diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 00000000..9d12996c
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,70 @@
+<!--
+This template encodes the rules in CLAUDE.md and ARCHITECTURE.md.
+Delete sections that genuinely don't apply, but don't delete sections to avoid answering them.
+-->
+
+## What
+
+<!-- One or two sentences. What does this PR change? -->
+
+## Why
+
+<!-- The motivation. Not "what" again — the reason this change exists. Link issue if any. -->
+
+## How
+
+<!-- The approach. Anything non-obvious about the implementation. -->
+
+---
+
+## Architecture self-check
+
+> Required for every non-trivial PR. If a box is unchecked, explain why.
+
+- [ ] **No new duplication.** This PR does not add a type, constant, enum, or contract that already exists in another package. (If it consolidates one, note which item from `CLAUDE.md` §7 is being resolved.)
+- [ ] **No cross-adapter imports.** No code in `service`, `nightwatch-devtools`, or `selenium-devtools` imports from another adapter.
+- [ ] **No adapter imports in `backend` / `app`.** Neither package reaches into adapter internals.
+- [ ] **Typed contracts at boundaries.** Any new `fetch(...)`, `ws.send(...)`, or HTTP route has a typed request/response shape in `shared` (or in `service` types if `shared` doesn't exist yet, with a TODO to move).
+- [ ] **No `if (framework === '...')` outside an adapter.** Framework branching uses a typed `FrameworkId`.
+- [ ] **No new `any` at package boundaries.** Internal `any` is acceptable only at a documented framework-edge with a one-line comment.
+
+### Multi-adapter changes
+
+- [ ] This PR touches **more than one** adapter package.
+
+> If checked: **why isn't this in `core`?** Answer here:
+>
+> _<your answer>_
+
+---
+
+## Debt scoreboard
+
+> List the `CLAUDE.md` §7 debt items this PR resolves, partially resolves, or extends. Delete this section only if the PR genuinely affects no debt items.
+
+- Resolved: _<item, or "none">_
+- Partially resolved: _<item, or "none">_
+- New debt introduced: _<item, or "none — and explain why if any>_
+
+If new debt is introduced, it must be added to `CLAUDE.md` §7 in this PR.
+
+---
+
+## Testing
+
+- [ ] Unit tests for new logic in `shared` / `core` (required per `CLAUDE.md` §4).
+- [ ] Regression test for any bug fix (required per `CLAUDE.md` §4).
+- [ ] `pnpm build` passes.
+- [ ] `pnpm test` passes.
+- [ ] `pnpm lint` passes.
+- [ ] For UI/runtime changes: verified in `example/` (or `example` for the framework I changed).
+
+If any required item is skipped, say so here with the reason:
+
+_<your note, or "n/a">_
+
+---
+
+## Screenshots / recordings (UI changes only)
+
+<!-- Drop them in here. -->
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
new file mode 100644
index 00000000..d41da176
--- /dev/null
+++ b/ARCHITECTURE.md
@@ -0,0 +1,267 @@
+# Architecture
+
+Companion to [CLAUDE.md](./CLAUDE.md). CLAUDE.md defines the **rules**; this file describes **how the pieces fit together** so you can apply those rules without guessing.
+
+If the rules in CLAUDE.md and the descriptions here conflict, CLAUDE.md wins — and one of the files is out of date.
+
+---
+
+## 1. One sentence
+
+A user's test suite is instrumented by a thin framework **adapter**, which sends a normalized event stream through **core** to the **backend**, which broadcasts it over WebSocket to the **app** (a browser UI), with shared types and contracts living in **shared**.
+
+```
+[user's test framework]
+        │
+        ▼
+   [adapter]          ◀── thin: hooks + framework specifics
+        │
+        ▼
+     [core]           ◀── all framework-agnostic capture/reporting logic
+        │
+        ▼ (WS frames typed by shared)
+   [backend]          ◀── Fastify + WS gateway + baseline store + runner
+        │
+        ▼ (WS frames + HTTP, both typed by shared)
+     [app]            ◀── Lit UI, framework-agnostic
+```
+
+Plus one out-of-band piece: **`packages/script`** is injected into the browser under test (not Node) to capture DOM mutations from the page's own JS context. It talks to the adapter, not directly to backend.
+
+---
+
+## 2. Package responsibilities
+
+> Packages marked **[future]** do not exist yet. Their absence is the highest-priority debt in [CLAUDE.md §7](./CLAUDE.md#7-known-debt).
+
+### `packages/shared`
+
+**Owns:** Types, constants, enums, HTTP/WS contract definitions. Pure TypeScript, no runtime dependencies on other packages in this monorepo. Workspace-internal (`"private": true`) — never published; bundled into each consumer at build time. See [CLAUDE.md §2.6](./CLAUDE.md#26-workspace-internal-packages-must-stay-inlined-at-build-time).
+
+**Contains (target):**
+- Domain types: `CommandLog`, `ConsoleLog`, `NetworkRequest`, `Mutation`, `Metadata`, `TestNode`, `TestStatus`, `PreservedAttempt`, `PreservedStep`, etc.
+- The `FrameworkId` type: `'wdio' | 'nightwatch' | 'selenium'`.
+- HTTP request/response schemas for every backend route.
+- WS frame schemas (event name + payload type, for both directions).
+- Cross-package constants: API paths, WS scopes, default values, status enums.
+
+**Imports from:** nothing (pure leaf package).
+
+**Imported by:** every other package.
+
+### `packages/core`
+
+**Owns:** All framework-agnostic logic that today is duplicated across adapter packages. Workspace-internal (`"private": true`); inlined into each adapter at build time.
+
+**Contains (target):**
+- `SessionCapturer` — orchestrates capture for one test session.
+- `ReporterBase` — common reporter behavior (suite/test lifecycle, ID generation, output formatting).
+- `generateStableUid()` — single canonical UID generator.
+- Console/stream capture — patches `console.*`, intercepts stdout/stderr, strips ANSI, classifies log levels.
+- Command-log builder — stack trace parsing, source file loading, sourcemap resolution.
+- WS client — connects to the backend, serializes frames per `shared` contracts, handles reconnect.
+- Network/performance capture pipeline.
+- Sourcemap loader.
+
+**Imports from:** `shared`.
+
+**Imported by:** all adapter packages (`service`, `nightwatch-devtools`, `selenium-devtools`).
+
+### `packages/service` (WebdriverIO adapter)
+
+**Owns:** WebdriverIO-specific glue only.
+
+**Contains (target):**
+- WDIO service hooks: `beforeCommand`, `afterCommand`, `beforeTest`, `afterTest`, `beforeSession`, `afterSession`.
+- WDIO reporter implementation that extends `core`'s `ReporterBase`.
+- WDIO-specific config defaults.
+- The launcher entry point (`@wdio/devtools-service`).
+
+**Imports from:** `@wdio/types`, `@wdio/reporter`, `@wdio/logger`, `@wdio/protocols`, `core`, `shared`.
+
+**Must not import:** other adapter packages, `backend`, `app`.
+
+### `packages/nightwatch-devtools` (Nightwatch adapter)
+
+**Owns:** Nightwatch-specific glue only.
+
+**Contains (target):**
+- Nightwatch lifecycle hooks (`before`, `cucumberBefore`, `cucumberAfter`, etc.).
+- BrowserProxy that wraps Nightwatch's browser API and forwards command events into `core`.
+- Nightwatch + Cucumber test discovery.
+
+**Imports from:** `core`, `shared`, `@wdio/logger`.
+
+**Must not import:** other adapter packages, `backend`, `app`.
+
+### `packages/selenium-devtools` (Selenium adapter)
+
+**Owns:** Selenium-specific glue only.
+
+**Contains (target):**
+- Driver patching (`driverPatcher.ts`) that wraps `selenium-webdriver`.
+- Runner hooks (`runnerHooks.ts`) for Mocha/Jest/Vitest/Cucumber.
+- BiDi event handling.
+
+**Imports from:** `core`, `shared`, `selenium-webdriver` (peer).
+
+**Must not import:** other adapter packages, `backend`, `app`.
+
+### `packages/backend`
+
+**Owns:** The server that adapters connect to and the app talks to.
+
+**Contains:**
+- Fastify HTTP server.
+- WebSocket gateway (one connection per adapter session, one connection per app client).
+- Baseline store (in-memory) for preserve-and-rerun.
+- Video registry (per-session WebM files).
+- Test runner spawner (`runner.ts`) — spawns the user's `wdio` / `nightwatch` / `selenium` binary with rerun filters.
+
+**Framework-awareness:** Only in `runner.ts`, only for building CLI args. Must branch on a typed `FrameworkId` from `shared`, never magic strings.
+
+**Imports from:** `shared`. **Must not import:** any adapter package, `app`, `core` (backend doesn't need core; core is for adapters).
+
+### `packages/app`
+
+**Owns:** The browser UI.
+
+**Contains:**
+- Lit web components (sidebar, workbench, compare, console, network, etc.).
+- WebSocket client for receiving the live event stream.
+- Context providers (`@lit/context`) for the various data streams.
+- DataManager-level orchestration (today a single god-file, target: split per concern).
+
+**Imports from:** `shared`. **Must not import:** any adapter package, `backend` directly (only via WS/HTTP), `core`.
+
+### `packages/script`
+
+**Owns:** Browser-injected runtime — runs **inside the page under test**, not in Node.
+
+**Contains:**
+- DOM mutation observers.
+- Page-side trace collection.
+- Communication channel back to the adapter (via the WebDriver bridge).
+
+**Why it's separate:** Different execution environment (browser, not Node). It cannot import from `core` (which assumes Node) or `shared` directly unless `shared` stays strictly browser-safe.
+
+### `examples/wdio/`, `examples/nightwatch/`, `examples/selenium/`
+
+**Owns:** Per-framework demo projects, used for manual verification per [CLAUDE.md §4](./CLAUDE.md#4-testing). Run via `pnpm demo:wdio` / `pnpm demo:nightwatch` / `pnpm demo:selenium` from the repo root. Selenium has multiple runners (`mocha-test/`, `jest-test/`, `cucumber-test/`); the default `demo:selenium` script runs mocha, and `selenium-devtools` exposes per-runner variants via `pnpm --filter @wdio/selenium-devtools example:<runner>`.
+
+---
+
+## 3. Data flow
+
+### A test run, end to end
+
+1. User runs `wdio` / `nightwatch test` / `mocha + selenium` — their normal command.
+2. The framework loads its adapter (via service/plugin config).
+3. Adapter calls `core.startSession()`, which:
+   - Spawns a connection to `backend` over WS.
+   - Patches `console.*`, stdout, stderr.
+   - Installs sourcemap loader.
+4. Framework fires lifecycle hooks (suite start, test start, command, etc.). Adapter translates each hook into a `core` call.
+5. `core` builds the typed event (per `shared` schema) and sends it through the WS client.
+6. `backend` receives, optionally persists (baseline store, video registry), and broadcasts to all connected `app` clients.
+7. `app` updates its Lit components reactively.
+
+### Preserve-and-rerun
+
+1. User clicks the bug-play icon on a failed test in `app`.
+2. `app` POSTs to `/api/baseline/preserve` (typed contract in `shared`).
+3. `backend` snapshots the failing attempt into the baseline store, then spawns a rerun via `runner.ts`.
+4. The rerun goes through the normal flow above.
+5. `app` receives both attempts and renders the side-by-side compare view.
+
+### Rerun mechanics (framework-specific, but contained)
+
+`backend/src/runner.ts` is the **only** place outside an adapter that knows about specific frameworks. It branches on `FrameworkId` to build:
+- WDIO: `wdio run config.ts --spec <file>` or `--mochaOpts.grep`.
+- Nightwatch: `nightwatch <file>` or `--cucumberOpts.name <pattern>`.
+- Selenium + Mocha/Jest/etc.: depends on detected runner.
+
+Every other piece of the system sees only normalized events.
+
+---
+
+## 4. Boundaries and contracts
+
+Every place data crosses a package boundary, there must be a typed contract in `shared`. The boundaries are:
+
+| Boundary | Direction | Transport | Contract lives in |
+|---|---|---|---|
+| Adapter → backend | One-way events (command, console, mutation, etc.) | WebSocket frames | `shared/ws-frames.ts` |
+| App → backend | API requests (preserve, clear, get baseline, run, stop) | HTTP (Fastify) | `shared/api-routes.ts` |
+| Backend → app | Live event broadcast + API responses | WebSocket + HTTP | `shared/ws-frames.ts`, `shared/api-routes.ts` |
+| Script → adapter | Mutation events from the page | Via WebDriver bridge (executeScript + log channel) | `shared/script-protocol.ts` |
+
+A new boundary contract is a `shared` change. Adding a new event type or HTTP route without updating `shared` is a CLAUDE.md §2.5 violation.
+
+---
+
+## 5. Where do I add new code?
+
+A decision tree for the most common cases. Answer top-down — the first match wins.
+
+**Are you adding or changing a type, constant, enum, schema, or contract used by more than one package?**
+→ `packages/shared`.
+
+**Are you adding logic that captures, parses, normalizes, formats, or transports test-event data, and it doesn't depend on a specific framework's API?**
+→ `packages/core`. Create it if it doesn't exist.
+
+**Are you wiring a specific framework's hook, event, or driver to the event pipeline?**
+→ The matching adapter package. Adapter code should call `core` for the actual work and only own the hook registration.
+
+**Are you adding a backend HTTP route, WS handler, or runner behavior?**
+→ `packages/backend`. Add the contract to `shared` first.
+
+**Are you adding UI?**
+→ `packages/app`. Consume contracts from `shared` only; never reach into adapter or backend internals.
+
+**Are you adding code that runs inside the browser under test (DOM observer, page-side hook)?**
+→ `packages/script`.
+
+**You're still not sure.**
+→ Ask. Ambiguity here is the most expensive kind of mistake — putting something in the wrong package now means migrating it later, and migrations across this many consumers are painful.
+
+---
+
+## 6. Current reality vs. target
+
+This is a snapshot of where the codebase diverges from the architecture above. As debt is resolved, update this section **and** delete the matching entry from [CLAUDE.md §7](./CLAUDE.md#7-known-debt).
+
+### Populated packages and what's still in adapters
+- `packages/shared` contains baseline API constants, `TestRunnerId`, and the core test-event types (`CommandLog`, `ConsoleLog`, `NetworkRequest`, `Metadata`, `TraceLog`, `TraceType`, `PreservedAttempt`, `PreservedStep`, `TestStatus`, `TestError`, `PerformanceData`, `DocumentInfo`, `Viewport`, `ScreencastInfo`, `LogLevel`). Adapter `types.ts` files re-export shared types for backwards compatibility.
+- `packages/core` contains console-capture constants and pure helpers (`CONSOLE_METHODS`, `ANSI_REGEX`, `LOG_LEVEL_PATTERNS`, `LOG_SOURCES`, `ERROR_INDICATORS`, `SPINNER_RE`, `stripAnsi`, `detectLogLevel`, `createConsoleLogEntry`, `isInternalStreamLine`), stable-UID helpers (`generateStableUid`, `deterministicUid`, `resetSignatureCounters`), stack-frame helpers (`isUserCodeFrame`, `normalizeFilePath`, `getCallSourceFromStack`), `serializeError`, net helpers (`isPortInUse`, `findFreePort`, `getRequestType`), `chromeLogLevelToLogLevel`, and the `SessionCapturerBase` abstract class. All three adapter `SessionCapturer`s now extend it. Command-log builder, reporter base, and the sourcemap loader remain in adapters.
+
+### Misplaced logic
+- `packages/service` currently contains framework-agnostic logic (UID generation, console capture, sourcemap resolution, reporter base) that belongs in `core`. The other two adapters re-implement the same logic instead of importing it.
+
+### Misplaced state and concerns
+- `packages/app/src/controller/DataManager.ts` (~986 lines) bundles WS connection, 11 context providers, business logic, and baseline coordination into one file. Target: one module per concern behind a thin façade.
+- `packages/app/src/components/sidebar/explorer.ts` (~670 lines) is a Lit component that also makes HTTP calls — UI and I/O mixed.
+- `packages/app/src/components/workbench/compare.ts` (~888 lines) mixes data fetching, diff logic, popup window management, and rendering.
+- `packages/backend/src/index.ts` (~387 lines) bundles server wiring, WS gateway, video registry, baseline API, and runner lifecycle.
+
+### Missing contracts
+- App-to-backend `fetch()` calls have no shared request/response types.
+- The reporter in `packages/service/src/reporter.ts` uses `as any` for inputs instead of typed shapes.
+
+---
+
+## 7. Migration order (suggested)
+
+Not a hard sequence — just the order that minimizes churn. Each step is intended to be one or a small handful of PRs, not a giant rewrite.
+
+1. ~~**Create `packages/shared`.** Empty workspace package with proper `package.json`, `tsconfig`, exports.~~ ✅ Done.
+2. ~~**Move duplicated cross-package types into `shared`.**~~ ✅ Done for the 6 app-imported types and their dependencies.
+3. ~~**Move duplicated constants and status types into `shared`.**~~ ✅ Done. `BASELINE_API`, `BASELINE_WS_SCOPE`, `TestStatus`, `TestRunnerId` all live in shared. Sidebar `TestState` is a value-only enum-style accessor backed by `TestStatus`.
+4. ~~**Create `packages/core`.**~~ ✅ Done.
+5. ~~**Extract one duplicated logic block into `core`.**~~ ✅ Done for pure console helpers and UID helpers (constants, `stripAnsi`, `detectLogLevel`, `createConsoleLogEntry`, `generateStableUid`, `deterministicUid`, `resetSignatureCounters`). The `SessionCapturer` class itself still owns the patching logic in each adapter.
+6. ~~**Extract `SessionCapturer` into `core`.**~~ ✅ Done — `SessionCapturerBase` lives in core; service, nightwatch, and selenium all extend it. See [`SESSIONCAPTURER_EXTRACTION_PLAN.md`](./SESSIONCAPTURER_EXTRACTION_PLAN.md) for what stayed framework-specific and the design choices the migration locked in. Remaining: command-log builder, reporter base, sourcemap loader — smaller individual pieces than the SessionCapturer migration.
+7. **Type the HTTP/WS contracts in `shared`.** Backend and app start importing them at the boundary.
+8. ~~**Replace string-based framework checks in `runner.ts` with `FrameworkId`.**~~ ✅ Done via `TestRunnerId` in shared (typed `FRAMEWORK_FILTERS` map key).
+9. **Split god-files opportunistically as their sections are edited** (boy-scout rule from CLAUDE.md §5).
+
+Steps 1–3 alone resolve roughly half of the known debt and unlock the rest. Steps 5–6 are where the per-feature productivity gains compound — once console capture is in core, the next feature touching console logs is one change instead of three.
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 00000000..fe87f1d9
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,290 @@
+# CLAUDE.md
+
+This file is the contract for working in this repository. It applies to **all code in this repo** — existing and new alike. There is no "legacy carve-out": code that does not yet comply is debt, and every change must move the repo closer to compliance, never further from it.
+
+Both human contributors and AI agents (Claude Code) must follow it. When a rule here conflicts with what looks easier in the moment, the rule wins.
+
+If you are an AI agent: read this file in full before making any non-trivial change. When in doubt, ask the user.
+
+---
+
+## 1. What this repo is
+
+A devtools UI for end-to-end browser tests, supporting three frameworks (WebdriverIO, Nightwatch, Selenium) with **one backend and one UI**. The frameworks are adapters that feed the same backend the same event stream.
+
+Packages (pnpm workspace):
+
+| Package | Role |
+|---|---|
+| `packages/app` | Lit-based browser UI. Framework-agnostic. |
+| `packages/backend` | Fastify server, WebSocket gateway, baseline store, test runner spawner. Framework-agnostic at the API layer; framework-aware only via a typed `FrameworkId`. |
+| `packages/shared` | Types, constants, HTTP/WS contracts. Pure, no runtime deps on other packages. Single source of truth. Workspace-internal (`"private": true`); inlined into each consumer at build time. |
+| `packages/core` | Framework-agnostic capture/reporter logic. Currently houses console-capture constants and helpers, UID gen, error serialization, stack helpers, net helpers, `SessionCapturerBase` (extended by all three adapters), and `TestReporterBase` (extended by nightwatch + selenium reporters). Workspace-internal (`"private": true`); inlined into each adapter at build time. |
+| `packages/service` | WebdriverIO adapter. Hook registration + WDIO-specific config. |
+| `packages/nightwatch-devtools` | Nightwatch adapter. Hook registration + lifecycle binding. |
+| `packages/selenium-devtools` | Selenium adapter. Driver patching + runner hooks. |
+| `packages/script` | Browser-injected runtime. Runs **inside the page under test** (not in Node), captures DOM mutations and page-side traces. Not a home for shared Node-side logic — that belongs in `core`. |
+| `examples/wdio/`, `examples/nightwatch/`, `examples/selenium/` | Per-framework demo projects, used for manual verification (§4). |
+
+Both `packages/shared` and `packages/core` exist and host the shared types, contracts, and adapter scaffolding. The `SessionCapturerBase` class in `core` owns console/stream patching, WS connection, command id bookkeeping, and upstream-send guard/try-catch (with an `onUpstreamDrop` hook subclasses can override for diagnostics); all three adapters extend it. `TestReporterBase` is shared by the nightwatch + selenium reporters (service uses `@wdio/reporter` from WDIO). Remaining `core` candidate is a handful of partially-shared `TIMING`/`DEFAULTS` constants.
+
+### Commands
+
+Run from repo root unless noted:
+
+| Command | What it does |
+|---|---|
+| `pnpm install` | Install workspace dependencies. |
+| `pnpm build` | Build all packages (`pnpm -r build`). |
+| `pnpm test` | Run vitest suite once. |
+| `pnpm test:watch` | Run vitest in watch mode. |
+| `pnpm lint` | Lint all packages in parallel. |
+| `pnpm demo:wdio` | Run the WebdriverIO example. |
+| `pnpm demo:nightwatch` | Run the Nightwatch example. |
+| `pnpm demo:selenium` | Run the Selenium example (mocha runner by default; selenium-devtools also exposes `example:mocha` / `example:jest` / `example:cucumber` for per-runner variants). |
+| `pnpm dev` | Run all packages in parallel dev mode. |
+
+Before any UI/runtime change is claimed done: `pnpm build && pnpm test && pnpm demo:wdio` (or `demo:nightwatch` / `demo:selenium` if your change targets that framework).
+
+### Path aliases (TypeScript)
+
+Defined in root `tsconfig.json`. Use these in imports — do **not** use long relative paths like `../../../components/...`:
+
+| Alias | Resolves to |
+|---|---|
+| `@/*` | `packages/app/src/*` |
+| `@components/*` | `packages/app/src/components/*` |
+| `@core/*` | `packages/app/src/core/*` (app-internal, not the future `packages/core`) |
+| `@wdio/devtools-backend` / `@wdio/devtools-backend/*` | `packages/backend/src/...` |
+| `@wdio/devtools-script` / `@wdio/devtools-script/*` | `packages/script/src/...` |
+| `@wdio/devtools-service` / `@wdio/devtools-service/*` | `packages/service/src/...` |
+| `@wdio/selenium-devtools` / `@wdio/selenium-devtools/*` | `packages/selenium-devtools/src/...` |
+
+`packages/shared` and `packages/core` are both wired in (`@wdio/devtools-shared`, `@wdio/devtools-core`).
+
+> ⚠️ Note: `@core/*` today points to `packages/app/src/core/` (app-internal). The future framework-agnostic `packages/core` will need a different alias (e.g. `@wdio/devtools-core`) to avoid collision. Resolve this when `packages/core` is created.
+
+---
+
+## 2. Architecture rules
+
+These apply to every file in the repo. Code that doesn't comply is debt to be fixed (§7), not an exception.
+
+### 2.1 One source of truth per concept
+
+No type, constant, enum, schema, or contract may be defined in more than one package. Every shared concept lives in `packages/shared`.
+
+If a duplicated declaration is discovered, the next change that touches it must consolidate to `shared`.
+
+### 2.2 Framework-agnostic logic lives in `core`
+
+Any capture, parsing, normalization, sourcemap, UID, reporter, or WS-framing logic is framework-agnostic and lives in `packages/core`. Adapter packages call into `core`; they do not reimplement.
+
+If a feature requires the same logical change in two or more adapters, the logic does not belong in the adapters — it belongs in `core`. Stop and extract.
+
+### 2.3 Adapters are thin and isolated
+
+Adapter packages (`service`, `nightwatch-devtools`, `selenium-devtools`) own only:
+- Framework-specific hook registration and lifecycle binding
+- Framework-specific driver/browser patching
+- Framework-specific config
+
+They **may not** import from each other. They **may** import from `shared` and `core`. They **may not** be imported by `backend` or `app`.
+
+### 2.4 `backend` and `app` are framework-agnostic
+
+`backend` and `app` import from `shared` (for contracts) and from each other only via the WS/HTTP boundary. They do not import any adapter package.
+
+If `backend` needs to behave differently per framework (e.g. building rerun CLI args in `runner.ts`), it branches on a typed `FrameworkId` from `shared`. **No string comparisons like `if (framework === 'nightwatch')`** anywhere outside an adapter.
+
+### 2.5 Boundaries have typed contracts
+
+Every `fetch(...)` and `ws.send(...)` has a typed request/response shape defined in `shared`. No untyped `any` payloads cross a package boundary. No "the caller knows what shape comes back" agreements.
+
+### 2.6 Workspace-internal packages must stay inlined at build time
+
+`packages/shared` and (when it exists) `packages/core` are marked `"private": true` and are **never published to npm**. Each consuming package's bundler must inline their code into its own `dist/` at build time. **Packages that consume `@wdio/devtools-shared` or `@wdio/devtools-core` must use a bundler — `tsc`-only builds emit literal `import` statements that npm cannot resolve at install time.**
+
+Bundlers in use today: **vite** for `app`, `service`, `script`; **tsup** for `backend`, `nightwatch-devtools`, `selenium-devtools`.
+
+- List `@wdio/devtools-shared` / `@wdio/devtools-core` in `devDependencies` with `workspace:^`, **never** in `dependencies`. Both tsup and vite externalize anything in `dependencies` by default — `devDependencies` is what gets inlined. If the dep leaks into `dependencies`, pnpm publish rewrites the version to something that doesn't exist on npm and end-user installs fail.
+- Do **not** add `@wdio/devtools-shared` or `@wdio/devtools-core` to `rollupOptions.external` (vite) or to tsup's `external` option, or any equivalent. **Vite `external` callback footgun (bit us twice already):** vite resolves workspace imports BEFORE invoking the callback, so the `id` parameter is often an absolute path like `/Users/.../packages/core/src/index.ts`, *not* the package name `@wdio/devtools-core`. A check like `id !== '@wdio/devtools-core'` will silently miss the absolute-path form, and the dist ends up with literal absolute paths that work nowhere but the build machine. Always check for BOTH forms: package name (`id === '@wdio/devtools-core'`, `id.startsWith('@wdio/devtools-core/')`) AND resolved path (`id.includes('/packages/core/')`). See [`packages/service/vite.config.ts`](packages/service/vite.config.ts) for the canonical pattern.
+- **Vite `external` relative-import footgun:** the same callback also receives bare relative imports for in-tree source files (e.g. `./utils.js` from index.ts, `../constants.js` from utils/source-mapping.ts). A check that only allows `./` will silently externalize `../`-style imports from subfolder modules — the dist ends up referencing a non-emitted file (`./constants.js` import with no `constants.js` on disk) and crashes at install time with `ERR_MODULE_NOT_FOUND`. Allow both `./` AND `../` prefixes (or just check `path.resolve(__dirname, 'src')`). When adding subfolders under `src/`, run a Node-resolve smoke test on the dist after build.
+- Do **not** switch a consuming package's build to `tsc`-only. If the package needs a build, it gets a bundler.
+- After any change to a bundler config or build script, run `pnpm build` on the affected package and verify its `dist/*.js` contain no references to private workspace packages — **check both forms**:
+  - `grep -E "@wdio/devtools-(core|shared)|/packages/(core|shared)/" packages/<pkg>/dist/*.js` should return nothing. Checking only `@wdio/devtools-core` misses the absolute-path form vite leaves behind when its `external` callback is misconfigured.
+
+### 2.7 Separation of concerns within a file
+
+A file owns one concern. Specifically:
+- **UI components render.** They do not call `fetch`, manage WebSocket state, or run business logic.
+- **Controllers/services own I/O and state.** They do not render.
+- **Backend route handlers wire requests to services.** They do not contain business logic inline.
+- **Reporters report.** They do not also do sourcemap resolution, file I/O, and step UID generation in the same file.
+
+A file that mixes these concerns is debt and must be split when next touched.
+
+---
+
+## 3. Coding standards
+
+### TypeScript
+
+- `strict: true` is on (configured in root `tsconfig.json`). Do not weaken it.
+- **No `any`.** If a framework or library forces it, isolate the `any` to one line at the boundary and cast to a typed shape immediately. Add a one-line comment explaining why.
+- **No `as unknown as X`** double-casts unless the reason is documented inline.
+- Prefer `type` for unions and `interface` for object shapes that may be extended.
+- Exported names from `shared` and `core` are public API of those packages — treat renames as breaking changes.
+
+### Naming
+
+- **One name per concept across the whole repo.** The canonical name for test status is `TestStatus` in `@wdio/devtools-shared`. The sidebar `TestState` object is a value-only enum-style accessor; its values come from `TestStatus`.
+- Constants: `SCREAMING_SNAKE_CASE`. Types: `PascalCase`. Functions and variables: `camelCase`. Files: `kebab-case.ts` unless matching a class name.
+
+### File and function size
+
+- **File**: ~400 lines. A larger file is a smell; do not add to it without splitting.
+- **Function**: ~50 lines.
+- Known god-files that must be split as they're touched: `packages/app/src/controller/DataManager.ts` (~986 lines), `packages/app/src/components/workbench/compare.ts` (~888 lines), `packages/app/src/components/sidebar/explorer.ts` (~670 lines), `packages/backend/src/index.ts` (~387 lines).
+
+### Comments
+
+- Default to no comments. Names should explain *what*.
+- Write a comment only when the *why* is non-obvious: a hidden constraint, a workaround for a specific bug, a subtle invariant.
+- Do not write `// TODO`, `// added for X feature`, `// removed old logic`, or `// keep in sync` comments. Git history holds the first three; the fourth means you should have used a single source of truth.
+- One line max. No multi-paragraph docstrings.
+
+### Error handling
+
+- Validate at boundaries (HTTP input, WS messages, framework callbacks). Trust internal code.
+- Never swallow errors silently. Catch only to add context, then rethrow or log with enough detail to debug.
+- No `catch (e) {}` blocks. No empty catches.
+
+### Dead code
+
+- Delete unused exports, unused imports, commented-out blocks, and `_unused` parameters when you find them.
+- Do not keep "in case we need it later" code. Git history is the safety net.
+
+---
+
+## 4. Testing
+
+The repo uses **vitest** at the root.
+
+### Required
+
+- **`shared` and `core`**: unit tests for every new exported function or type guard. These are the foundation; bugs here cascade.
+- **Bug fixes (any package)**: a regression test that fails before the fix and passes after. If you genuinely can't write one (e.g. it requires a real browser and the infra doesn't exist), say so explicitly in the PR.
+- **New HTTP/WS contracts**: a test that exercises the contract end-to-end at least once.
+
+### Recommended
+
+- Adapter packages: unit tests for non-trivial parsing or transformation logic. Hook-wiring may be verified manually via `examples/<framework>/`.
+- `backend` and `app`: tests for non-UI logic (parsers, transforms, state reducers).
+
+### Manual verification
+
+For UI or runtime changes, you **must** run the change in `examples/<framework>/` before claiming the work is done. Type-checks and unit tests verify code correctness, not feature correctness. If you cannot run the example, say so explicitly — do not claim success on the basis of `tsc --noEmit` alone.
+
+---
+
+## 5. Workflow
+
+### Before you start
+
+1. Read this file.
+2. Read the README of any package you're touching.
+3. Ask: does this change belong in the package I'm about to edit, or does it belong in `shared` / `core`? If `shared` or `core` — go there first.
+
+### While you work
+
+- Make the minimum change that solves the problem. No drive-by refactors of unrelated code, no speculative abstractions for hypothetical future requirements.
+- **The boy-scout rule applies always.** When you touch a file or a section, leave it more compliant with this document than you found it. If you touch a duplicated type, consolidate it into `shared`. If you edit a section of a god-file, split that section out. If you change a magic-string framework check, replace it with a typed `FrameworkId`. The scope of cleanup matches the scope of your change — don't rewrite the whole file, but don't leave a clear violation in the lines you touched either.
+- Do not introduce new violations to "match the existing style." The existing style is debt.
+
+### Before you finish
+
+- Run `pnpm build`, `pnpm test`, and `pnpm lint`. Don't push red.
+- Re-read your diff. Delete anything you wouldn't be able to justify to a reviewer.
+- For UI/runtime changes, verify in `examples/<framework>/`.
+- Check: does the diff reduce or increase the count of known debt items in §7? If it increases, reconsider.
+
+### Commits
+
+- Small, focused commits. Don't bundle unrelated changes.
+- Imperative mood. Explain *why*, not *what* — the diff shows the what.
+- Never amend commits that have been pushed or shared.
+- Never use `--no-verify` to skip hooks. If a hook fails, fix the underlying problem.
+
+### PRs
+
+- One concern per PR. A refactor and a feature are two PRs.
+- If the PR touches more than one adapter package, the description must answer: **why isn't this in `core`?**
+- Note in the PR description which debt items from §7 (if any) the change paid down.
+
+---
+
+## 6. What an AI agent (Claude) should do
+
+You are expected to treat this file as a hard contract.
+
+### Refuse
+
+- Adding a type, constant, enum, or contract that duplicates one that exists in another package. Propose extracting to `shared` instead.
+- Adding an `any` type at a package boundary.
+- Adding `if (framework === '...')` or any string-based framework check outside an adapter package.
+- Making the same logical change in two or more adapter packages. Propose extracting to `core` instead.
+- Adding a `// TODO`, `// keep in sync`, or similar comment as a substitute for fixing the underlying issue.
+- Skipping pre-commit hooks with `--no-verify`.
+- Claiming a UI/runtime change works without running it in `examples/<framework>/`.
+- Importing one adapter package from another, or importing any adapter from `backend` or `app`.
+
+### Warn, then proceed if the user confirms
+
+- A file or function exceeds the soft size limits in §3.
+- A change that grows a god-file rather than splitting the section being edited.
+- Adding a feature behind a flag without an explicit request.
+
+### Do without asking
+
+- Run formatters, type checks, and tests.
+- Move a duplicated type or constant to `shared` (creating the package if needed) as part of a change that touches it. That's the boy-scout rule, not scope creep.
+- Split the *section being edited* out of a god-file. Do not rewrite the whole file uninvited.
+- Replace a string-based framework check with a typed `FrameworkId` when you're editing the file containing it.
+
+### Always
+
+- State the planned approach in one or two sentences before making non-trivial changes, especially anything touching package boundaries.
+- When the right place for new code is ambiguous (`shared` vs `core` vs adapter), ask the user before writing it.
+- After completing a change, in one or two sentences: what changed, what's next, and which §7 debt item the change moved (if any).
+
+---
+
+## 7. Known debt
+
+These are documented violations of this file's rules. They exist today; they are debt, not exceptions. Every change must reduce this list, never extend it. As items are resolved, delete them from this section.
+
+### Architecture debt
+
+- `packages/shared` contains `BASELINE_API`, `BASELINE_WS_SCOPE`, `TestRunnerId`, and the core test-event types (`CommandLog`, `ConsoleLog`, `NetworkRequest`, `Metadata`, `TraceLog`, `TraceType`, `PreservedAttempt`, `PreservedStep`, `TestStatus`, `TestError`, `TestStats`, `SuiteStats`, `ReporterError`, `PerformanceData`, `DocumentInfo`, `Viewport`, `ScreencastInfo`, `LogLevel`). `SuiteStats.featureFile` is the cucumber-only `.feature` path, distinct from `file` (which owns the suite's stable UID and stays at cwd). Adapter type files re-export shared types for backwards compatibility.
+- `packages/core` contains console-capture constants and helpers (`CONSOLE_METHODS`, `ANSI_REGEX`, `LOG_LEVEL_PATTERNS`, `LOG_SOURCES`, `ERROR_INDICATORS`, `stripAnsi`, `detectLogLevel`, `createConsoleLogEntry`, `isInternalStreamLine`, `SPINNER_RE`), stable-UID helpers (`generateStableUid`, `deterministicUid`, `resetSignatureCounters`), stack-frame helpers (`isUserCodeFrame`, `normalizeFilePath`, `getCallSourceFromStack`), `serializeError` (returns `SerializedError`), net helpers (`isPortInUse`, `findFreePort`, `getRequestType`), `chromeLogLevelToLogLevel`, the `SessionCapturerBase` abstract class, and the `TestReporterBase` abstract class. Adapter `SessionCapturer` and `TestReporter` subclasses contain only framework-specific logic.
+- Remaining adapter-side duplication: partially-shared `TIMING`/`DEFAULTS` constants (each adapter has framework-specific values, so partial sharing only saves a handful of lines). Service's WDIO-specific Cucumber UID branching stays in `service/reporter.ts` and delegates the actual hashing to core. The `sendUpstream` guard/try-catch is now in base; subclasses override `onUpstreamDrop` only when they want diagnostics on drop.
+- `TraceMutation` is defined in `packages/script/types.d.ts` as a global (browser-only, depends on DOM types). Adapters and backend currently sidestep this with loose `unknown[]` / `MutationLike` types. A clean home for browser/page-side types is open: extract from script into a small package consumable by both browser and Node consumers, or accept that mutation arrays cross the boundary as `unknown[]`.
+
+### File-size debt (god-files to split as touched)
+
+- `packages/app/src/controller/DataManager.ts` (~751 lines, was 986 — suite-merge logic extracted as pure functions; remainder is the per-scope socket-message handlers tightly coupled to ContextProvider state)
+- `packages/app/src/components/workbench/compare.ts` (~687 lines, was 888 — static styles extracted; remainder is Lit render methods tightly coupled to component state)
+- `packages/app/src/components/sidebar/explorer.ts` (~506 lines, was 670 — entry-state logic extracted, remainder is Lit render + runner-options getters coupled to component state)
+
+### Type-safety debt
+
+_(All known type-safety debt resolved. New violations should still be tracked here as they're discovered.)_
+
+---
+
+## 8. Living document
+
+This file is expected to evolve. When you discover a recurring decision point it doesn't cover, propose adding it. When a rule turns out to be wrong in practice, propose changing it.
+
+Do not silently ignore rules. If a rule is getting in the way of real work, that's a signal to fix the rule, not to break it.
diff --git a/README.md b/README.md
index 8e13fdc1..a773ff28 100644
--- a/README.md
+++ b/README.md
@@ -39,14 +39,14 @@ Works with **WebdriverIO**, **[Nightwatch.js](./packages/nightwatch-devtools/REA
 
 ### 🎬 Session Screencast
 - **Automatic Video Recording**: Captures a continuous `.webm` video of the browser session alongside the existing snapshot and DOM mutation views
-- **Cross-Browser**: Uses Chrome DevTools Protocol (CDP) push mode for Chrome/Chromium; automatically falls back to screenshot polling for Firefox, Safari, and other browsers (no configuration change needed)
+- **Per-framework modes**:
+  - **WebdriverIO**: CDP push mode for Chrome/Chromium (efficient, no per-command overhead); polling fallback for other browsers
+  - **Selenium WebDriver**: CDP push mode via `selenium-webdriver/bidi`; polling fallback otherwise
+  - **Nightwatch.js**: Polling mode (Nightwatch doesn't expose a stable CDP escape hatch); works on every browser Nightwatch supports
 - **Per-Session Videos**: Each browser session (including sessions created by `browser.reloadSession()`) produces its own recording, selectable from a dropdown in the UI
 - **Smart Trimming**: Leading blank frames before the first URL navigation are automatically removed so videos start at the first meaningful page action
 
-> **Note:** Screencast recording is currently supported for **WebdriverIO only**. Nightwatch.js support is planned for a future release.
->
-
-> For setup, configuration options, and prerequisites see the **[service README](./packages/service/README.md#screencast-recording)**.
+> For setup, configuration options, and prerequisites see each adapter's README: **[WebdriverIO](./packages/service/README.md#screencast-recording)** · **[Selenium](./packages/selenium-devtools/README.md)** · **[Nightwatch](./packages/nightwatch-devtools/README.md#screencast)**.
 
 ### 🐞 Preserve & Rerun (Compare)
 - **When the bug icon appears**: Only on test/suite rows in a `failed` state and the icon sits next to ▶ on hover, available wherever a plain rerun is supported (e.g. Cucumber scenarios at the scenario row, Mocha tests at the test or suite row)
@@ -54,7 +54,7 @@ Works with **WebdriverIO**, **[Nightwatch.js](./packages/nightwatch-devtools/REA
 - **Diagnose flaky tests**: See exactly which command differed between a pass and a fail without re-reading logs
 - **Pop out**: Open the comparison in a separate, themed window for a roomier view
 
-> **Note:** Preserve & Rerun is currently supported for **WebdriverIO only**. Nightwatch.js and Selenium support is planned for a future release.
+> Available across **WebdriverIO, Selenium WebDriver, and Nightwatch.js**. The rerun mechanism differs per framework (WDIO uses `--spec` + grep, Selenium substitutes a runner-specific filter flag like `--grep`/`--testNamePattern`, Nightwatch reads `DEVTOOLS_RERUN_LABEL`); the dashboard contract is identical.
 
 ### 🔍︎ TestLens
 - **Code Intelligence**: View test definitions directly in your editor
@@ -143,7 +143,7 @@ pnpm install
 pnpm build
 
 # Run demo
-pnpm demo
+pnpm demo:wdio
 ```
 
 ## Nightwatch Integration
diff --git a/eslint.config.cjs b/eslint.config.cjs
index f037455e..f26af245 100644
--- a/eslint.config.cjs
+++ b/eslint.config.cjs
@@ -90,7 +90,236 @@ module.exports = [
   {
     files: ['**/*.test.ts'],
     rules: {
-      'dot-notation': 'off'
+      'dot-notation': 'off',
+      'max-lines': 'off',
+      'max-lines-per-function': 'off'
+    }
+  },
+
+  // Code-quality warnings (CLAUDE.md §3).
+  // Kept as `warn` so existing legacy violations surface in IDE/CI without
+  // blocking the build. Promote to `error` once known debt (CLAUDE.md §7)
+  // is cleared.
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'warn',
+      'max-lines': [
+        'warn',
+        { max: 400, skipBlankLines: true, skipComments: true }
+      ],
+      'max-lines-per-function': [
+        'warn',
+        { max: 50, skipBlankLines: true, skipComments: true, IIFEs: true }
+      ]
+    }
+  },
+
+  // CLAUDE.md §2.3 — no cross-adapter imports.
+  // Adapters (service, nightwatch-devtools, selenium-devtools) own
+  // framework-specific glue only. Anything shared between them belongs in
+  // packages/core (and is currently duplicated — see CLAUDE.md §7).
+  {
+    files: ['packages/service/**/*.{ts,tsx,js,mjs,cjs}'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: [
+                '@wdio/nightwatch-devtools',
+                '@wdio/nightwatch-devtools/*'
+              ],
+              message:
+                'Adapters must not import from each other (CLAUDE.md §2.3). Extract shared logic to packages/core.'
+            },
+            {
+              group: ['@wdio/selenium-devtools', '@wdio/selenium-devtools/*'],
+              message:
+                'Adapters must not import from each other (CLAUDE.md §2.3). Extract shared logic to packages/core.'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    files: ['packages/nightwatch-devtools/**/*.{ts,tsx,js,mjs,cjs}'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['@wdio/devtools-service', '@wdio/devtools-service/*'],
+              message:
+                'Adapters must not import from each other (CLAUDE.md §2.3). Extract shared logic to packages/core.'
+            },
+            {
+              group: ['@wdio/selenium-devtools', '@wdio/selenium-devtools/*'],
+              message:
+                'Adapters must not import from each other (CLAUDE.md §2.3). Extract shared logic to packages/core.'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    files: ['packages/selenium-devtools/**/*.{ts,tsx,js,mjs,cjs}'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['@wdio/devtools-service', '@wdio/devtools-service/*'],
+              message:
+                'Adapters must not import from each other (CLAUDE.md §2.3). Extract shared logic to packages/core.'
+            },
+            {
+              group: [
+                '@wdio/nightwatch-devtools',
+                '@wdio/nightwatch-devtools/*'
+              ],
+              message:
+                'Adapters must not import from each other (CLAUDE.md §2.3). Extract shared logic to packages/core.'
+            }
+          ]
+        }
+      ]
+    }
+  },
+
+  // CLAUDE.md §2.4 — backend does not import from adapters or app.
+  // Backend is framework-agnostic; framework branching uses a typed
+  // FrameworkId from packages/shared, never adapter internals.
+  {
+    files: ['packages/backend/**/*.{ts,tsx,js,mjs,cjs}'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['@wdio/devtools-service', '@wdio/devtools-service/*'],
+              message:
+                'Backend must not depend on any adapter (CLAUDE.md §2.4). Move shared types/constants to packages/shared.'
+            },
+            {
+              group: [
+                '@wdio/nightwatch-devtools',
+                '@wdio/nightwatch-devtools/*'
+              ],
+              message:
+                'Backend must not depend on any adapter (CLAUDE.md §2.4). Move shared types/constants to packages/shared.'
+            },
+            {
+              group: ['@wdio/selenium-devtools', '@wdio/selenium-devtools/*'],
+              message:
+                'Backend must not depend on any adapter (CLAUDE.md §2.4). Move shared types/constants to packages/shared.'
+            },
+            {
+              group: ['@/*', '@components/*'],
+              message:
+                'Backend must not import from app (CLAUDE.md §2.4). App talks to backend over WS/HTTP using shared contracts.'
+            },
+            {
+              group: ['@wdio/devtools-core', '@wdio/devtools-core/*'],
+              message:
+                'Backend must not depend on core (CLAUDE.md §2.2). core is framework-agnostic adapter logic; backend only needs shared contracts.'
+            }
+          ]
+        }
+      ]
+    }
+  },
+
+  // CLAUDE.md §2.4 — app does not import from adapters or backend.
+  // App communicates with backend only over WS/HTTP, with contracts
+  // defined in packages/shared.
+  {
+    files: ['packages/app/**/*.{ts,tsx,js,mjs,cjs}'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['@wdio/devtools-service', '@wdio/devtools-service/*'],
+              message:
+                'App must not import from adapters (CLAUDE.md §2.4). Move shared types/constants to packages/shared.'
+            },
+            {
+              group: [
+                '@wdio/nightwatch-devtools',
+                '@wdio/nightwatch-devtools/*'
+              ],
+              message:
+                'App must not import from adapters (CLAUDE.md §2.4). Move shared types/constants to packages/shared.'
+            },
+            {
+              group: ['@wdio/selenium-devtools', '@wdio/selenium-devtools/*'],
+              message:
+                'App must not import from adapters (CLAUDE.md §2.4). Move shared types/constants to packages/shared.'
+            },
+            {
+              group: ['@wdio/devtools-backend', '@wdio/devtools-backend/*'],
+              message:
+                'App must not import from backend directly (CLAUDE.md §2.4). Communicate via WS/HTTP using shared contracts.'
+            },
+            {
+              group: ['@wdio/devtools-core', '@wdio/devtools-core/*'],
+              message:
+                'App must not import from core (CLAUDE.md §2.2). core is framework-agnostic adapter logic; the app receives normalized events over WS.'
+            }
+          ]
+        }
+      ]
+    }
+  },
+
+  // CLAUDE.md §2.2 — core is for adapters only. Backend, app, and script
+  // must not depend on core. Core itself may only import from shared.
+  {
+    files: ['packages/core/**/*.{ts,tsx,js,mjs,cjs}'],
+    rules: {
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['@wdio/devtools-service', '@wdio/devtools-service/*'],
+              message:
+                'core must not depend on any adapter (CLAUDE.md §2.2). Adapters import core, not the other way around.'
+            },
+            {
+              group: [
+                '@wdio/nightwatch-devtools',
+                '@wdio/nightwatch-devtools/*'
+              ],
+              message:
+                'core must not depend on any adapter (CLAUDE.md §2.2). Adapters import core, not the other way around.'
+            },
+            {
+              group: ['@wdio/selenium-devtools', '@wdio/selenium-devtools/*'],
+              message:
+                'core must not depend on any adapter (CLAUDE.md §2.2). Adapters import core, not the other way around.'
+            },
+            {
+              group: ['@wdio/devtools-backend', '@wdio/devtools-backend/*'],
+              message:
+                'core must not depend on backend (CLAUDE.md §2.2). core is the lower layer.'
+            },
+            {
+              group: ['@/*', '@components/*'],
+              message:
+                'core must not depend on app (CLAUDE.md §2.2). core is Node-side adapter logic.'
+            }
+          ]
+        }
+      ]
     }
   }
 ]
diff --git a/packages/nightwatch-devtools/example/README.md b/examples/nightwatch/README.md
similarity index 100%
rename from packages/nightwatch-devtools/example/README.md
rename to examples/nightwatch/README.md
diff --git a/packages/nightwatch-devtools/example/nightwatch.conf.cjs b/examples/nightwatch/nightwatch.conf.cjs
similarity index 68%
rename from packages/nightwatch-devtools/example/nightwatch.conf.cjs
rename to examples/nightwatch/nightwatch.conf.cjs
index 5e2467d7..0512597d 100644
--- a/packages/nightwatch-devtools/example/nightwatch.conf.cjs
+++ b/examples/nightwatch/nightwatch.conf.cjs
@@ -1,8 +1,10 @@
 // Simple import - just require the package
+const path = require('node:path')
 const nightwatchDevtools = require('@wdio/nightwatch-devtools').default
 
 module.exports = {
-  src_folders: ['example/tests'],
+  // Resolve relative to this config file so the path holds regardless of CWD.
+  src_folders: [path.resolve(__dirname, 'tests')],
   output_folder: false, // Skip generating nightwatch reports for this example
   // Add custom reporter to capture commands
   custom_commands_path: [],
@@ -31,8 +33,13 @@ module.exports = {
         },
         'goog:loggingPrefs': { performance: 'ALL' }
       },
-      // Simple configuration - just call the function to get globals
-      globals: nightwatchDevtools({ port: 3000 })
+      // Simple configuration - just call the function to get globals.
+      // Screencast records a polling-mode .webm via fluent-ffmpeg; the file
+      // is written to cwd as nightwatch-video-<sessionId>.webm.
+      globals: nightwatchDevtools({
+        port: 3000,
+        screencast: { enabled: true, pollIntervalMs: 200 }
+      })
     }
   }
 }
diff --git a/examples/nightwatch/package.json b/examples/nightwatch/package.json
new file mode 100644
index 00000000..e36a50d4
--- /dev/null
+++ b/examples/nightwatch/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@wdio/devtools-example-nightwatch",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Nightwatch demo project used by pnpm demo:nightwatch. Needs its own node_modules so the backend's rerun spawner can resolve the nightwatch binary from this directory.",
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@wdio/nightwatch-devtools": "workspace:^",
+    "nightwatch": "^3.0.0"
+  }
+}
diff --git a/packages/nightwatch-devtools/example/tests/login.js b/examples/nightwatch/tests/login.js
similarity index 100%
rename from packages/nightwatch-devtools/example/tests/login.js
rename to examples/nightwatch/tests/login.js
diff --git a/packages/nightwatch-devtools/example/tests/sample.js b/examples/nightwatch/tests/sample.js
similarity index 100%
rename from packages/nightwatch-devtools/example/tests/sample.js
rename to examples/nightwatch/tests/sample.js
diff --git a/examples/selenium/cucumber-test/cucumber.json b/examples/selenium/cucumber-test/cucumber.json
new file mode 100644
index 00000000..d479ab56
--- /dev/null
+++ b/examples/selenium/cucumber-test/cucumber.json
@@ -0,0 +1,12 @@
+{
+  "default": {
+    "import": [
+      "../../examples/selenium/cucumber-test/features/support/setup.js",
+      "../../examples/selenium/cucumber-test/features/support/world.js",
+      "../../examples/selenium/cucumber-test/features/support/steps.js"
+    ],
+    "paths": ["../../examples/selenium/cucumber-test/features/*.feature"],
+    "publishQuiet": true,
+    "format": ["progress"]
+  }
+}
diff --git a/packages/selenium-devtools/example/cucumber-test/features/login.feature b/examples/selenium/cucumber-test/features/login.feature
similarity index 100%
rename from packages/selenium-devtools/example/cucumber-test/features/login.feature
rename to examples/selenium/cucumber-test/features/login.feature
diff --git a/packages/selenium-devtools/example/cucumber-test/features/support/setup.js b/examples/selenium/cucumber-test/features/support/setup.js
similarity index 100%
rename from packages/selenium-devtools/example/cucumber-test/features/support/setup.js
rename to examples/selenium/cucumber-test/features/support/setup.js
diff --git a/packages/selenium-devtools/example/cucumber-test/features/support/steps.js b/examples/selenium/cucumber-test/features/support/steps.js
similarity index 100%
rename from packages/selenium-devtools/example/cucumber-test/features/support/steps.js
rename to examples/selenium/cucumber-test/features/support/steps.js
diff --git a/packages/selenium-devtools/example/cucumber-test/features/support/world.js b/examples/selenium/cucumber-test/features/support/world.js
similarity index 100%
rename from packages/selenium-devtools/example/cucumber-test/features/support/world.js
rename to examples/selenium/cucumber-test/features/support/world.js
diff --git a/packages/selenium-devtools/example/jest-test/jest.config.json b/examples/selenium/jest-test/jest.config.json
similarity index 100%
rename from packages/selenium-devtools/example/jest-test/jest.config.json
rename to examples/selenium/jest-test/jest.config.json
diff --git a/packages/selenium-devtools/example/jest-test/test/example.js b/examples/selenium/jest-test/test/example.js
similarity index 100%
rename from packages/selenium-devtools/example/jest-test/test/example.js
rename to examples/selenium/jest-test/test/example.js
diff --git a/packages/selenium-devtools/example/mocha-test/test/example.js b/examples/selenium/mocha-test/test/example.js
similarity index 100%
rename from packages/selenium-devtools/example/mocha-test/test/example.js
rename to examples/selenium/mocha-test/test/example.js
diff --git a/examples/selenium/package.json b/examples/selenium/package.json
new file mode 100644
index 00000000..de44e354
--- /dev/null
+++ b/examples/selenium/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@wdio/devtools-example-selenium",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Selenium WebDriver demo project used by pnpm demo:selenium. Imports selenium-webdriver directly; needs its own node_modules.",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@wdio/selenium-devtools": "workspace:^",
+    "selenium-webdriver": "^4.27.0"
+  },
+  "devDependencies": {
+    "@cucumber/cucumber": "^11.1.0"
+  }
+}
diff --git a/example/features/login.feature b/examples/wdio/features/login.feature
similarity index 100%
rename from example/features/login.feature
rename to examples/wdio/features/login.feature
diff --git a/example/features/pageobjects/login.page.ts b/examples/wdio/features/pageobjects/login.page.ts
similarity index 100%
rename from example/features/pageobjects/login.page.ts
rename to examples/wdio/features/pageobjects/login.page.ts
diff --git a/example/features/pageobjects/page.ts b/examples/wdio/features/pageobjects/page.ts
similarity index 100%
rename from example/features/pageobjects/page.ts
rename to examples/wdio/features/pageobjects/page.ts
diff --git a/example/features/pageobjects/secure.page.ts b/examples/wdio/features/pageobjects/secure.page.ts
similarity index 100%
rename from example/features/pageobjects/secure.page.ts
rename to examples/wdio/features/pageobjects/secure.page.ts
diff --git a/example/features/step-definitions/steps.ts b/examples/wdio/features/step-definitions/steps.ts
similarity index 100%
rename from example/features/step-definitions/steps.ts
rename to examples/wdio/features/step-definitions/steps.ts
diff --git a/example/package.json b/examples/wdio/package.json
similarity index 100%
rename from example/package.json
rename to examples/wdio/package.json
diff --git a/example/tsconfig.json b/examples/wdio/tsconfig.json
similarity index 100%
rename from example/tsconfig.json
rename to examples/wdio/tsconfig.json
diff --git a/example/wdio.conf.ts b/examples/wdio/wdio.conf.ts
similarity index 97%
rename from example/wdio.conf.ts
rename to examples/wdio/wdio.conf.ts
index 24ddf975..73e88052 100644
--- a/example/wdio.conf.ts
+++ b/examples/wdio/wdio.conf.ts
@@ -128,18 +128,19 @@ export const config: Options.Testrunner = {
   // your test setup with almost no effort. Unlike plugins, they don't add new
   // commands. Instead, they hook themselves up into the test process.
   services: [
-    [
-      'devtools',
-      {
-        screencast: {
-          enabled: true,
-          captureFormat: 'jpeg', // 'jpeg' or 'png' — frame format sent by Chrome over CDP
-          quality: 70, // JPEG quality 0–100
-          maxWidth: 1280, // max frame width in px
-          maxHeight: 720 // max frame height in px
-        }
-      }
-    ]
+    'devtools'
+    // [
+    //   'devtools',
+    //   {
+    //     screencast: {
+    //       enabled: true,
+    //       captureFormat: 'jpeg', // 'jpeg' or 'png' — frame format sent by Chrome over CDP
+    //       quality: 70, // JPEG quality 0–100
+    //       maxWidth: 1280, // max frame width in px
+    //       maxHeight: 720 // max frame height in px
+    //     }
+    //   }
+    // ]
   ],
   //
   // Framework you want to run your specs with.
diff --git a/package.json b/package.json
index 783835e6..bec2bb80 100644
--- a/package.json
+++ b/package.json
@@ -3,8 +3,9 @@
   "type": "module",
   "scripts": {
     "build": "pnpm -r build",
-    "demo": "wdio run ./example/wdio.conf.ts",
+    "demo:wdio": "wdio run ./examples/wdio/wdio.conf.ts",
     "demo:nightwatch": "pnpm --filter @wdio/nightwatch-devtools example",
+    "demo:selenium": "pnpm --filter @wdio/selenium-devtools example",
     "dev": "pnpm --parallel dev",
     "preview": "pnpm --parallel preview",
     "test": "vitest run",
diff --git a/packages/app/package.json b/packages/app/package.json
index 5ab423dc..7e1feaaa 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -34,6 +34,7 @@
   "license": "MIT",
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
+    "@wdio/devtools-shared": "workspace:^",
     "@wdio/reporter": "9.27.0",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.6",
diff --git a/packages/app/src/app.ts b/packages/app/src/app.ts
index 1852322f..c98fa1cf 100644
--- a/packages/app/src/app.ts
+++ b/packages/app/src/app.ts
@@ -1,7 +1,7 @@
 import './tailwind.css'
 import { css, html, nothing } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
-import { TraceType, type TraceLog } from '@wdio/devtools-service/types'
+import { TraceType, type TraceLog } from '@wdio/devtools-shared'
 
 import { Element } from '@core/element'
 import { DataManagerController } from './controller/DataManager.js'
diff --git a/packages/app/src/components/browser/snapshot-styles.ts b/packages/app/src/components/browser/snapshot-styles.ts
new file mode 100644
index 00000000..d996ca18
--- /dev/null
+++ b/packages/app/src/components/browser/snapshot-styles.ts
@@ -0,0 +1,135 @@
+import { css } from 'lit'
+
+/** Component styles for `<wdio-devtools-snapshot>`. Pulled out of snapshot.ts
+ *  so the main component file stays focused on the iframe/screencast logic. */
+export const snapshotStyles = css`
+  :host {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 2rem !important;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box !important;
+  }
+
+  section {
+    box-sizing: border-box;
+    width: calc(100% - 0px); /* host padding already applied */
+    height: calc(100% - 0px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--vscode-sideBar-background);
+    padding: 0.5rem;
+    gap: 0;
+  }
+
+  .frame-dot {
+    border-radius: 50%;
+    height: 12px;
+    width: 12px;
+    margin: 1em 0.25em;
+    flex-shrink: 0;
+  }
+
+  .frame-dot:nth-child(1) {
+    background-color: var(--vscode-notificationsErrorIcon-foreground, #e51400);
+  }
+
+  .frame-dot:nth-child(2) {
+    background-color: var(
+      --vscode-notificationsWarningIcon-foreground,
+      #bf8803
+    );
+  }
+
+  .frame-dot:nth-child(3) {
+    background-color: var(--vscode-ports-iconRunningProcessForeground, #369432);
+  }
+
+  iframe {
+    background-color: white;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: none;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+
+  .screenshot-overlay {
+    position: absolute;
+    inset: 0;
+    background: #111;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    border-radius: 0 0 0.5rem 0.5rem;
+    overflow: hidden;
+  }
+
+  .screenshot-overlay img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  .screencast-player {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    background: #111;
+    border-radius: 0 0 0.5rem 0.5rem;
+    display: block;
+  }
+
+  .iframe-wrapper {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .view-toggle {
+    display: flex;
+    gap: 2px;
+    margin-left: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  .view-toggle button {
+    padding: 2px 10px;
+    font-size: 11px;
+    font-family: inherit;
+    border: 1px solid var(--vscode-editorSuggestWidget-border, #454545);
+    background: transparent;
+    color: var(--vscode-input-foreground, #ccc);
+    cursor: pointer;
+    border-radius: 3px;
+    line-height: 20px;
+    transition:
+      background 0.1s,
+      color 0.1s;
+  }
+
+  .view-toggle button.active {
+    background: var(--vscode-button-background, #0e639c);
+    color: var(--vscode-button-foreground, #fff);
+    border-color: transparent;
+  }
+
+  .video-select {
+    font-size: 11px;
+    font-family: inherit;
+    padding: 2px 4px;
+    border: 1px solid var(--vscode-dropdown-border, #454545);
+    border-radius: 3px;
+    background: var(--vscode-dropdown-background, #3c3c3c);
+    color: var(--vscode-dropdown-foreground, #ccc);
+    cursor: pointer;
+    line-height: 20px;
+    margin-left: 4px;
+  }
+`
diff --git a/packages/app/src/components/browser/snapshot.ts b/packages/app/src/components/browser/snapshot.ts
index 6bce7775..b75dd5f1 100644
--- a/packages/app/src/components/browser/snapshot.ts
+++ b/packages/app/src/components/browser/snapshot.ts
@@ -1,18 +1,19 @@
 import { Element } from '@core/element'
-import { html, css, nothing } from 'lit'
+import { html, nothing } from 'lit'
 import { consume } from '@lit/context'
+import { snapshotStyles } from './snapshot-styles.js'
 
 import { type ComponentChildren, h, render, type VNode } from 'preact'
 import { customElement, query } from 'lit/decorators.js'
 import type { SimplifiedVNode } from '../../../../script/types'
-import type { CommandLog } from '@wdio/devtools-service/types'
+import type { CommandLog } from '@wdio/devtools-shared'
 
 import {
   mutationContext,
   metadataContext,
   commandContext
 } from '../../controller/context.js'
-import type { Metadata } from '@wdio/devtools-service/types'
+import type { Metadata } from '@wdio/devtools-shared'
 
 import '~icons/mdi/world.js'
 import '../placeholder.js'
@@ -77,146 +78,7 @@ export class DevtoolsBrowser extends Element {
   @consume({ context: commandContext, subscribe: true })
   commands: CommandLog[] = []
 
-  static styles = [
-    ...Element.styles,
-    css`
-      :host {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        padding: 2rem !important;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box !important;
-      }
-
-      section {
-        box-sizing: border-box;
-        width: calc(100% - 0px); /* host padding already applied */
-        height: calc(100% - 0px);
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        background: var(--vscode-sideBar-background);
-        padding: 0.5rem;
-        gap: 0;
-      }
-
-      .frame-dot {
-        border-radius: 50%;
-        height: 12px;
-        width: 12px;
-        margin: 1em 0.25em;
-        flex-shrink: 0;
-      }
-
-      .frame-dot:nth-child(1) {
-        background-color: var(
-          --vscode-notificationsErrorIcon-foreground,
-          #e51400
-        );
-      }
-
-      .frame-dot:nth-child(2) {
-        background-color: var(
-          --vscode-notificationsWarningIcon-foreground,
-          #bf8803
-        );
-      }
-
-      .frame-dot:nth-child(3) {
-        background-color: var(
-          --vscode-ports-iconRunningProcessForeground,
-          #369432
-        );
-      }
-
-      iframe {
-        background-color: white;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border: none;
-        border-radius: 0 0 0.5rem 0.5rem;
-      }
-
-      .screenshot-overlay {
-        position: absolute;
-        inset: 0;
-        background: #111;
-        display: flex;
-        align-items: flex-start;
-        justify-content: center;
-        border-radius: 0 0 0.5rem 0.5rem;
-        overflow: hidden;
-      }
-
-      .screenshot-overlay img {
-        max-width: 100%;
-        height: auto;
-        display: block;
-      }
-
-      .screencast-player {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-        background: #111;
-        border-radius: 0 0 0.5rem 0.5rem;
-        display: block;
-      }
-
-      .iframe-wrapper {
-        position: relative;
-        flex: 1;
-        min-height: 0;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .view-toggle {
-        display: flex;
-        gap: 2px;
-        margin-left: 0.5rem;
-        flex-shrink: 0;
-      }
-
-      .view-toggle button {
-        padding: 2px 10px;
-        font-size: 11px;
-        font-family: inherit;
-        border: 1px solid var(--vscode-editorSuggestWidget-border, #454545);
-        background: transparent;
-        color: var(--vscode-input-foreground, #ccc);
-        cursor: pointer;
-        border-radius: 3px;
-        line-height: 20px;
-        transition:
-          background 0.1s,
-          color 0.1s;
-      }
-
-      .view-toggle button.active {
-        background: var(--vscode-button-background, #0e639c);
-        color: var(--vscode-button-foreground, #fff);
-        border-color: transparent;
-      }
-
-      .video-select {
-        font-size: 11px;
-        font-family: inherit;
-        padding: 2px 4px;
-        border: 1px solid var(--vscode-dropdown-border, #454545);
-        border-radius: 3px;
-        background: var(--vscode-dropdown-background, #3c3c3c);
-        color: var(--vscode-dropdown-foreground, #ccc);
-        cursor: pointer;
-        line-height: 20px;
-        margin-left: 4px;
-      }
-    `
-  ]
+  static styles = [...Element.styles, snapshotStyles]
 
   @query('iframe')
   iframe?: HTMLIFrameElement
@@ -258,8 +120,11 @@ export class DevtoolsBrowser extends Element {
     // viewport may not be serialized yet (race between metadata message and
     // first resize event), or may arrive without dimensions — fall back to
     // sensible defaults so we never throw.
-    const viewportWidth = (metadata.viewport as any)?.width || 1280
-    const viewportHeight = (metadata.viewport as any)?.height || 800
+    const viewport = metadata.viewport as
+      | { width?: number; height?: number }
+      | undefined
+    const viewportWidth = viewport?.width || 1280
+    const viewportHeight = viewport?.height || 800
     if (!viewportWidth || !viewportHeight) {
       return
     }
diff --git a/packages/app/src/components/inputs/traceLoader.ts b/packages/app/src/components/inputs/traceLoader.ts
index bdefc5b3..ada25ccf 100644
--- a/packages/app/src/components/inputs/traceLoader.ts
+++ b/packages/app/src/components/inputs/traceLoader.ts
@@ -1,7 +1,7 @@
 import { Element } from '@core/element'
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import type { TraceLog } from '@wdio/devtools-service/types'
+import type { TraceLog } from '@wdio/devtools-shared'
 
 @customElement('wdio-devtools-trace-loader')
 export class DevtoolsTraceLoader extends Element {
diff --git a/packages/app/src/components/sidebar/constants.ts b/packages/app/src/components/sidebar/constants.ts
index 97c7d2c0..46e6f67a 100644
--- a/packages/app/src/components/sidebar/constants.ts
+++ b/packages/app/src/components/sidebar/constants.ts
@@ -1,6 +1,7 @@
 import { TestState } from './types.js'
+import type { TestStatus } from './types.js'
 
-export const STATE_MAP: Record<string, TestState> = {
+export const STATE_MAP: Record<string, TestStatus> = {
   running: TestState.RUNNING,
   failed: TestState.FAILED,
   passed: TestState.PASSED,
diff --git a/packages/app/src/components/sidebar/explorer.ts b/packages/app/src/components/sidebar/explorer.ts
index 08b639be..2c2c02e9 100644
--- a/packages/app/src/components/sidebar/explorer.ts
+++ b/packages/app/src/components/sidebar/explorer.ts
@@ -2,7 +2,7 @@ import { Element } from '@core/element'
 import { html, css, nothing, type TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { consume } from '@lit/context'
-import type { Metadata } from '@wdio/devtools-service/types'
+import type { Metadata } from '@wdio/devtools-shared'
 import { repeat } from 'lit/directives/repeat.js'
 import { suiteContext, metadataContext } from '../../controller/context.js'
 import type {
@@ -16,12 +16,14 @@ import type {
   TestRunDetail
 } from './types.js'
 import { TestState } from './types.js'
+import { DEFAULT_CAPABILITIES, FRAMEWORK_CAPABILITIES } from './constants.js'
+import { getTestEntry } from './test-entry-state.js'
 import {
-  DEFAULT_CAPABILITIES,
-  FRAMEWORK_CAPABILITIES,
-  STATE_MAP
-} from './constants.js'
-import { BASELINE_API } from '../workbench/compare/constants.js'
+  BASELINE_API,
+  TESTS_API,
+  type BaselinePreserveRequest,
+  type RunnerRequestBody
+} from '@wdio/devtools-shared'
 
 import '~icons/mdi/play.js'
 import '~icons/mdi/stop.js'
@@ -127,7 +129,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     )
 
     // Forward preserveBaseline so the backend knows whether to drop baselines.
-    const payload = {
+    const payload: RunnerRequestBody = {
       ...detail,
       runAll: detail.uid === '*',
       framework: this.#getFramework(),
@@ -137,12 +139,12 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       launchCommand: this.#getLaunchCommand(),
       preserveBaseline: detail.preserveBaseline === true
     }
-    await this.#postToBackend('/api/tests/run', payload)
+    await this.#postToBackend(TESTS_API.run, payload)
   }
 
   async #handleTestStop(event: Event) {
     event.stopPropagation()
-    await this.#postToBackend('/api/tests/stop', {})
+    await this.#postToBackend(TESTS_API.stop, {})
   }
 
   async #handlePreserveAndRerun(event: Event) {
@@ -155,13 +157,14 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
 
     // Snapshot the current run BEFORE the rerun clears live data.
     try {
+      const body: BaselinePreserveRequest = {
+        testUid: detail.uid,
+        scope: detail.entryType
+      }
       const response = await fetch(BASELINE_API.preserve, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({
-          testUid: detail.uid,
-          scope: detail.entryType
-        })
+        body: JSON.stringify(body)
       })
       if (!response.ok) {
         const errorText = await response.text()
@@ -191,7 +194,10 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     )
   }
 
-  async #postToBackend(path: string, body: Record<string, unknown>) {
+  async #postToBackend(
+    path: typeof TESTS_API.run | typeof TESTS_API.stop,
+    body: RunnerRequestBody | Record<string, never>
+  ) {
     try {
       const response = await fetch(path, {
         method: 'POST',
@@ -255,7 +261,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       })
     )
 
-    void this.#postToBackend('/api/tests/run', {
+    const payload: RunnerRequestBody = {
       uid: '*',
       entryType: 'suite',
       runAll: true,
@@ -263,13 +269,14 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       configFile: this.#getConfigPath(),
       rerunCommand: this.#getRerunCommand(),
       launchCommand: this.#getLaunchCommand()
-    })
+    }
+    void this.#postToBackend(TESTS_API.run, payload)
   }
 
   #stopActiveRun() {
-    void this.#postToBackend('/api/tests/stop', {
-      uid: '*'
-    })
+    // Backend ignores the body for /api/tests/stop — sending {} keeps the
+    // typed helper happy without changing behavior.
+    void this.#postToBackend(TESTS_API.stop, {})
   }
 
   #getFramework(): string | undefined {
@@ -403,179 +410,8 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     )
   }
 
-  #isRunning(entry: TestStatsFragment | SuiteStatsFragment): boolean {
-    if ('tests' in entry) {
-      // Fastest path: any explicitly running descendant
-      if (
-        (entry.tests ?? []).some((t) => t.state === 'running') ||
-        (entry.suites ?? []).some((s) => this.#isRunning(s))
-      ) {
-        return true
-      }
-
-      const hasPendingTests = (entry.tests ?? []).some(
-        (t) => t.state === 'pending'
-      )
-      const hasPendingSuites = (entry.suites ?? []).some((s) =>
-        this.#hasPending(s)
-      )
-      const suiteState = entry.state
-
-      // If the suite was explicitly marked 'running' (e.g. by markTestAsRunning)
-      // and still has pending children, it's actively executing.
-      if (suiteState === 'running' && (hasPendingTests || hasPendingSuites)) {
-        return true
-      }
-
-      // Mixed terminal + pending children = run is in progress regardless of
-      // explicit suite state (handles Nightwatch Cucumber where the feature
-      // suite state may be undefined in the JSON payload).
-      const allDescendants = [...(entry.tests ?? []), ...(entry.suites ?? [])]
-      const hasSomeTerminal = allDescendants.some(
-        (t) =>
-          t.state === 'passed' || t.state === 'failed' || t.state === 'skipped'
-      )
-      if ((hasPendingTests || hasPendingSuites) && hasSomeTerminal) {
-        return true
-      }
-
-      return false
-    }
-    // For individual tests rely on explicit state only.
-    return entry.state === 'running'
-  }
-
-  #hasPending(entry: TestStatsFragment | SuiteStatsFragment): boolean {
-    if ('tests' in entry) {
-      if (entry.state === 'pending') {
-        return true
-      }
-      if ((entry.tests ?? []).some((t) => t.state === 'pending')) {
-        return true
-      }
-      if ((entry.suites ?? []).some((s) => this.#hasPending(s))) {
-        return true
-      }
-      return false
-    }
-    return entry.state === 'pending'
-  }
-
-  #hasFailed(entry: TestStatsFragment | SuiteStatsFragment): boolean {
-    if ('tests' in entry) {
-      // Check if any immediate test failed
-      if ((entry.tests ?? []).find((t) => t.state === 'failed')) {
-        return true
-      }
-      // Check if any nested suite has failures
-      if ((entry.suites ?? []).some((s) => this.#hasFailed(s))) {
-        return true
-      }
-      return false
-    }
-    // For individual tests
-    return entry.state === 'failed'
-  }
-
-  #computeEntryState(
-    entry: TestStatsFragment | SuiteStatsFragment
-  ): TestState | 'pending' {
-    // For suites, check running state from children FIRST — this ensures that
-    // a rerun (which clears end times) shows the spinner immediately, even if
-    // the suite still has a cached 'passed'/'failed' state from the previous run.
-    if ('tests' in entry && this.#isRunning(entry)) {
-      return TestState.RUNNING
-    }
-
-    const state = entry.state
-
-    // A suite with an explicit 'pending' state is always in-progress from the
-    // UI's perspective — the backend uses 'pending' to signal a new run is
-    // starting. Skip the children check: stale terminal children from the
-    // previous run must not cause the suite to appear as passed.
-    if ('tests' in entry && state === 'pending') {
-      return TestState.RUNNING
-    }
-
-    // For suites with no explicit terminal state, derive from children.
-    // A suite with state=undefined or state=running that has no terminal
-    // children yet is still in-progress — don't show PASSED prematurely.
-    if ('tests' in entry && (state === null || state === 'running')) {
-      const allDescendants = [...(entry.tests ?? []), ...(entry.suites ?? [])]
-      if (allDescendants.length > 0) {
-        const allTerminal = allDescendants.every(
-          (t) =>
-            t.state === 'passed' ||
-            t.state === 'failed' ||
-            t.state === 'skipped'
-        )
-        if (!allTerminal) {
-          // Still has non-terminal children — treat as running/loading
-          return TestState.RUNNING
-        }
-      }
-    }
-
-    // Check explicit terminal state
-    const mappedState = state ? STATE_MAP[state] : undefined
-    if (mappedState) {
-      return mappedState
-    }
-
-    // For suites, compute state from children
-    if ('tests' in entry) {
-      if (this.#hasFailed(entry)) {
-        return TestState.FAILED
-      }
-      return TestState.PASSED
-    }
-
-    // For individual leaf tests: pending = spinner (run is in progress),
-    // not circle (which implies "never run").
-    if (state === 'pending') {
-      return TestState.RUNNING
-    }
-
-    return entry.end ? TestState.PASSED : 'pending'
-  }
-
   #getTestEntry(entry: TestStatsFragment | SuiteStatsFragment): TestEntry {
-    if ('tests' in entry) {
-      const entries = [...(entry.tests ?? []), ...(entry.suites ?? [])]
-      // A suite whose children are themselves suites is a feature/file-level
-      // container (Cucumber feature or test file). Tag it as 'feature' so the
-      // backend runner can distinguish it from a scenario/spec-level suite and
-      // avoid applying a --name filter that would match no scenarios.
-      const hasChildSuites = entry.suites && entry.suites.length > 0
-      const derivedType = hasChildSuites ? 'feature' : entry.type || 'suite'
-      return {
-        uid: entry.uid,
-        label: entry.title ?? '',
-        type: 'suite',
-        state: this.#computeEntryState(entry),
-        callSource: entry.callSource,
-        specFile: entry.file,
-        fullTitle: entry.title ?? '',
-        featureFile: entry.featureFile,
-        featureLine: entry.featureLine,
-        suiteType: derivedType,
-        children: Object.values(entries)
-          .map(this.#getTestEntry.bind(this))
-          .filter(this.#filterEntry.bind(this))
-      }
-    }
-    return {
-      uid: entry.uid,
-      label: entry.title ?? '',
-      type: 'test',
-      state: this.#computeEntryState(entry),
-      callSource: entry.callSource,
-      specFile: entry.file,
-      fullTitle: entry.fullTitle || entry.title,
-      featureFile: entry.featureFile,
-      featureLine: entry.featureLine,
-      children: []
-    }
+    return getTestEntry(entry, this.#filterEntry.bind(this))
   }
 
   render() {
@@ -666,5 +502,5 @@ function getSearchableLabel(entry: TestEntry): string[] {
   if (entry.children.length === 0) {
     return [entry.label]
   }
-  return entry.children.map(getSearchableLabel) as any as string[]
+  return entry.children.flatMap(getSearchableLabel)
 }
diff --git a/packages/app/src/components/sidebar/test-entry-state.ts b/packages/app/src/components/sidebar/test-entry-state.ts
new file mode 100644
index 00000000..af7b6112
--- /dev/null
+++ b/packages/app/src/components/sidebar/test-entry-state.ts
@@ -0,0 +1,174 @@
+import type {
+  SuiteStatsFragment,
+  TestStatsFragment
+} from '../../controller/types.js'
+import { STATE_MAP } from './constants.js'
+import { TestState } from './types.js'
+import type { TestEntry, TestStatus } from './types.js'
+
+type Fragment = TestStatsFragment | SuiteStatsFragment
+
+/** A suite is "running" when there are pending children + at least one
+ *  terminal child, or when the suite itself is marked running with pending
+ *  children. Tests fall through to their explicit state. */
+export function isRunning(entry: Fragment): boolean {
+  if ('tests' in entry) {
+    if (
+      (entry.tests ?? []).some((t) => t.state === 'running') ||
+      (entry.suites ?? []).some((s) => isRunning(s))
+    ) {
+      return true
+    }
+
+    const hasPendingTests = (entry.tests ?? []).some(
+      (t) => t.state === 'pending'
+    )
+    const hasPendingSuites = (entry.suites ?? []).some((s) => hasPending(s))
+    const suiteState = entry.state
+
+    if (suiteState === 'running' && (hasPendingTests || hasPendingSuites)) {
+      return true
+    }
+
+    // Mixed terminal + pending = run in progress regardless of explicit suite
+    // state (Nightwatch-Cucumber leaves feature.state undefined in the JSON).
+    const allDescendants = [...(entry.tests ?? []), ...(entry.suites ?? [])]
+    const hasSomeTerminal = allDescendants.some(
+      (t) =>
+        t.state === 'passed' || t.state === 'failed' || t.state === 'skipped'
+    )
+    if ((hasPendingTests || hasPendingSuites) && hasSomeTerminal) {
+      return true
+    }
+    return false
+  }
+  return entry.state === 'running'
+}
+
+export function hasPending(entry: Fragment): boolean {
+  if ('tests' in entry) {
+    if (entry.state === 'pending') {
+      return true
+    }
+    if ((entry.tests ?? []).some((t) => t.state === 'pending')) {
+      return true
+    }
+    if ((entry.suites ?? []).some((s) => hasPending(s))) {
+      return true
+    }
+    return false
+  }
+  return entry.state === 'pending'
+}
+
+export function hasFailed(entry: Fragment): boolean {
+  if ('tests' in entry) {
+    if ((entry.tests ?? []).find((t) => t.state === 'failed')) {
+      return true
+    }
+    if ((entry.suites ?? []).some((s) => hasFailed(s))) {
+      return true
+    }
+    return false
+  }
+  return entry.state === 'failed'
+}
+
+export function computeEntryState(entry: Fragment): TestStatus {
+  // Suites: check running from children FIRST. A rerun clears end times but
+  // not stale 'passed'/'failed' state — show the spinner before falling
+  // through to the cached terminal value.
+  if ('tests' in entry && isRunning(entry)) {
+    return TestState.RUNNING
+  }
+
+  const state = entry.state
+
+  // 'pending' on a suite = backend signaling a new run starting. Skip
+  // children check; stale terminal children must not flip suite to passed.
+  if ('tests' in entry && state === 'pending') {
+    return TestState.RUNNING
+  }
+
+  // Suite with no explicit terminal state — derive from children. If any
+  // child is non-terminal, the run is still in progress.
+  if ('tests' in entry && (state === null || state === 'running')) {
+    const allDescendants = [...(entry.tests ?? []), ...(entry.suites ?? [])]
+    if (allDescendants.length > 0) {
+      const allTerminal = allDescendants.every(
+        (t) =>
+          t.state === 'passed' || t.state === 'failed' || t.state === 'skipped'
+      )
+      if (!allTerminal) {
+        return TestState.RUNNING
+      }
+    }
+  }
+
+  const mappedState = state ? STATE_MAP[state] : undefined
+  if (mappedState) {
+    return mappedState
+  }
+
+  if ('tests' in entry) {
+    if (hasFailed(entry)) {
+      return TestState.FAILED
+    }
+    return TestState.PASSED
+  }
+
+  // Leaf test: pending → spinner (run is in progress), NOT circle (which
+  // would imply "never run").
+  if (state === 'pending') {
+    return TestState.RUNNING
+  }
+  return entry.end ? TestState.PASSED : 'pending'
+}
+
+/**
+ * Map a raw suite/test fragment to the sidebar's `TestEntry` shape.
+ * `filterEntry` is passed in because it depends on component-level filter
+ * state — the sidebar holds the active filter and decides which children
+ * stay visible.
+ */
+export function getTestEntry(
+  entry: Fragment,
+  filterEntry: (entry: TestEntry) => boolean
+): TestEntry {
+  if ('tests' in entry) {
+    const entries = [...(entry.tests ?? []), ...(entry.suites ?? [])]
+    // A suite whose children are themselves suites is a feature/file-level
+    // container (Cucumber feature or test file). Tag it as 'feature' so the
+    // backend runner can distinguish it from a scenario/spec-level suite and
+    // avoid applying a --name filter that would match no scenarios.
+    const hasChildSuites = entry.suites && entry.suites.length > 0
+    const derivedType = hasChildSuites ? 'feature' : entry.type || 'suite'
+    return {
+      uid: entry.uid,
+      label: entry.title ?? '',
+      type: 'suite',
+      state: computeEntryState(entry),
+      callSource: entry.callSource,
+      specFile: entry.file,
+      fullTitle: entry.title ?? '',
+      featureFile: entry.featureFile,
+      featureLine: entry.featureLine,
+      suiteType: derivedType,
+      children: Object.values(entries)
+        .map((e) => getTestEntry(e, filterEntry))
+        .filter(filterEntry)
+    }
+  }
+  return {
+    uid: entry.uid,
+    label: entry.title ?? '',
+    type: 'test',
+    state: computeEntryState(entry),
+    callSource: entry.callSource,
+    specFile: entry.file,
+    fullTitle: entry.fullTitle || entry.title,
+    featureFile: entry.featureFile,
+    featureLine: entry.featureLine,
+    children: []
+  }
+}
diff --git a/packages/app/src/components/sidebar/test-suite.ts b/packages/app/src/components/sidebar/test-suite.ts
index ed237955..67424b53 100644
--- a/packages/app/src/components/sidebar/test-suite.ts
+++ b/packages/app/src/components/sidebar/test-suite.ts
@@ -3,7 +3,7 @@ import { html, css, nothing } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import { CollapseableEntry } from './collapseableEntry.js'
-import type { TestRunDetail } from './types.js'
+import type { TestRunDetail, TestStatus } from './types.js'
 import { TestState } from './types.js'
 
 import '~icons/mdi/chevron-right.js'
@@ -49,7 +49,7 @@ export class ExplorerTestEntry extends CollapseableEntry {
   uid?: string
 
   @property({ type: String })
-  state?: TestState
+  state?: TestStatus
 
   @property({ type: String, attribute: 'call-source' })
   callSource?: string
diff --git a/packages/app/src/components/sidebar/types.ts b/packages/app/src/components/sidebar/types.ts
index b1168590..cf72e77d 100644
--- a/packages/app/src/components/sidebar/types.ts
+++ b/packages/app/src/components/sidebar/types.ts
@@ -41,9 +41,19 @@ export interface TestRunDetail {
   preserveBaseline?: boolean
 }
 
-export enum TestState {
-  PASSED = 'passed',
-  FAILED = 'failed',
-  RUNNING = 'running',
-  SKIPPED = 'skipped'
-}
+import type { TestStatus } from '@wdio/devtools-shared'
+
+/**
+ * Enum-style accessor for the canonical TestStatus values. Use the
+ * shared TestStatus type for type annotations; this object is for
+ * readable value comparisons (`state === TestState.PASSED`).
+ */
+export const TestState = {
+  PASSED: 'passed',
+  FAILED: 'failed',
+  RUNNING: 'running',
+  SKIPPED: 'skipped',
+  PENDING: 'pending'
+} as const satisfies Record<string, TestStatus>
+
+export type { TestStatus } from '@wdio/devtools-shared'
diff --git a/packages/app/src/components/tabs.ts b/packages/app/src/components/tabs.ts
index 90d94204..2762a327 100644
--- a/packages/app/src/components/tabs.ts
+++ b/packages/app/src/components/tabs.ts
@@ -31,7 +31,7 @@ export class DevtoolsTabs extends Element {
     const tabElement = this.tabs.find(
       (el) => el.getAttribute('label') === tabId
     )
-    const badge = (tabElement as any)?.badge
+    const badge = (tabElement as { badge?: number } | undefined)?.badge
     const showBadge = badge && badge > 0
 
     return html`
diff --git a/packages/app/src/components/workbench.ts b/packages/app/src/components/workbench.ts
index 7740083b..ac2f72d8 100644
--- a/packages/app/src/components/workbench.ts
+++ b/packages/app/src/components/workbench.ts
@@ -9,7 +9,7 @@ import {
   networkRequestContext,
   baselineContext
 } from '../controller/context.js'
-import type { PreservedAttempt } from '@wdio/devtools-service/types'
+import type { PreservedAttempt } from '@wdio/devtools-shared'
 
 import '~icons/mdi/arrow-collapse-down.js'
 import '~icons/mdi/arrow-collapse-up.js'
diff --git a/packages/app/src/components/workbench/actionItems/command.ts b/packages/app/src/components/workbench/actionItems/command.ts
index 3b1de55e..9723c606 100644
--- a/packages/app/src/components/workbench/actionItems/command.ts
+++ b/packages/app/src/components/workbench/actionItems/command.ts
@@ -1,7 +1,7 @@
 import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import type { CommandLog } from '@wdio/devtools-service/types'
+import type { CommandLog } from '@wdio/devtools-shared'
 
 import { ActionItem, ICON_CLASS } from './item.js'
 import '~icons/mdi/arrow-right.js'
diff --git a/packages/app/src/components/workbench/actionItems/item.ts b/packages/app/src/components/workbench/actionItems/item.ts
index f778cb13..fb8628cd 100644
--- a/packages/app/src/components/workbench/actionItems/item.ts
+++ b/packages/app/src/components/workbench/actionItems/item.ts
@@ -1,7 +1,7 @@
 import { Element } from '@core/element'
 import { html, css } from 'lit'
 import { property } from 'lit/decorators.js'
-import type { CommandLog } from '@wdio/devtools-service/types'
+import type { CommandLog } from '@wdio/devtools-shared'
 
 export type ActionEntry = TraceMutation | CommandLog
 
diff --git a/packages/app/src/components/workbench/actions.ts b/packages/app/src/components/workbench/actions.ts
index 7af6ca89..dc55c016 100644
--- a/packages/app/src/components/workbench/actions.ts
+++ b/packages/app/src/components/workbench/actions.ts
@@ -3,7 +3,7 @@ import { html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
-import type { CommandLog } from '@wdio/devtools-service/types'
+import type { CommandLog } from '@wdio/devtools-shared'
 import { mutationContext, commandContext } from '../../controller/context.js'
 
 import '../placeholder.js'
diff --git a/packages/app/src/components/workbench/compare.ts b/packages/app/src/components/workbench/compare.ts
index ea5c877e..47b2b0fc 100644
--- a/packages/app/src/components/workbench/compare.ts
+++ b/packages/app/src/components/workbench/compare.ts
@@ -1,5 +1,5 @@
 import { Element } from '@core/element'
-import { html, css, nothing } from 'lit'
+import { html, nothing } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
@@ -9,7 +9,7 @@ import type {
   CommandLog,
   PreservedAttempt,
   PreservedStep
-} from '@wdio/devtools-service/types'
+} from '@wdio/devtools-shared'
 import {
   baselineContext,
   selectedTestUidContext,
@@ -23,225 +23,25 @@ import {
   pairSteps,
   classifyDivergence,
   cleanErrorMessage,
-  extractExpectedFromStepText,
   safeJson,
   type ComparePairedStep,
   type DivergenceKind
 } from './compare/compareUtils.js'
+import { BASELINE_API, type BaselineClearRequest } from '@wdio/devtools-shared'
+import { POPOUT_QUERY, buildPopoutFeatures } from './compare/constants.js'
+import { compareStyles } from './compare/styles.js'
 import {
-  BASELINE_API,
-  POPOUT_QUERY,
-  buildPopoutFeatures
-} from './compare/constants.js'
+  liveStepsForUid,
+  findStepFor,
+  isFailureSite,
+  computeDetailBlockData
+} from './compare/stepResolution.js'
 
 const COMPONENT = 'wdio-devtools-compare'
 
 @customElement(COMPONENT)
 export class DevtoolsCompare extends Element {
-  static styles = [
-    ...Element.styles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 100%;
-        min-height: 0;
-        overflow: hidden;
-        /* Needed so popout mode (where Compare sits directly under body) is themed. */
-        background-color: var(--vscode-editor-background, #1e1e1e);
-        color: var(--vscode-foreground, #cccccc);
-      }
-      .compare-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0;
-        flex: 1 1 auto;
-        min-height: 0;
-        overflow: auto;
-        /* Stack rows from the top so they don't stretch to fill the grid. */
-        align-content: start;
-        grid-auto-rows: min-content;
-      }
-      .step-row {
-        display: contents;
-      }
-      .step-cell {
-        padding: 0.25rem 0.5rem;
-        border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
-        font-family: var(--vscode-editor-font-family, monospace);
-        font-size: 0.85em;
-        cursor: pointer;
-      }
-      .step-cell.divergent {
-        background: rgba(255, 90, 90, 0.08);
-      }
-      .step-cell.divergent.first {
-        background: rgba(255, 90, 90, 0.18);
-        border-left: 3px solid var(--vscode-charts-red, #f48771);
-      }
-      .marker {
-        margin-left: 0.35rem;
-        font-size: 0.85em;
-      }
-      .marker.result {
-        color: var(--vscode-charts-orange, #d19a66);
-      }
-      .marker.error {
-        color: var(--vscode-charts-red, #f48771);
-      }
-      .marker.command {
-        color: var(--vscode-charts-red, #f48771);
-      }
-      .marker.ok {
-        color: var(--vscode-charts-green, #73c373);
-      }
-      .marker.info {
-        color: var(--vscode-descriptionForeground, #999);
-        opacity: 0.7;
-      }
-      .error-banner {
-        margin: 0.5rem 0.75rem;
-        padding: 0.5rem 0.75rem;
-        background: rgba(244, 135, 113, 0.12);
-        border-left: 3px solid var(--vscode-charts-red, #f48771);
-        border-radius: 3px;
-        font-size: 0.85em;
-      }
-      .error-banner-title {
-        font-weight: 600;
-        margin-bottom: 0.25rem;
-        opacity: 0.85;
-        font-family: inherit;
-      }
-      /* Pre-wrap only on the message body so template indentation doesn't render. */
-      .error-banner-message {
-        font-family: var(--vscode-editor-font-family, monospace);
-        white-space: pre-wrap;
-        word-break: break-word;
-        margin: 0;
-      }
-      .step-cell.missing {
-        opacity: 0.35;
-        font-style: italic;
-      }
-      .step-cell:hover {
-        background: var(
-          --vscode-toolbar-hoverBackground,
-          rgba(255, 255, 255, 0.06)
-        );
-      }
-      .step-cell.expanded {
-        background: rgba(80, 160, 255, 0.06);
-      }
-      .pill {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.25rem;
-        padding: 0.1rem 0.5rem;
-        border-radius: 4px;
-        font-size: 0.85em;
-        background: var(--vscode-badge-background, #2a2a2a);
-      }
-      .pill.failed {
-        background: rgba(244, 135, 113, 0.2);
-        color: var(--vscode-charts-red, #f48771);
-      }
-      .pill.passed {
-        background: rgba(115, 195, 115, 0.2);
-        color: var(--vscode-charts-green, #73c373);
-      }
-      .topbar {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 0.75rem;
-        border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
-        flex: 0 0 auto;
-      }
-      .col-header {
-        position: sticky;
-        top: 0;
-        background: var(--vscode-editor-background, #1e1e1e);
-        z-index: 1;
-        padding: 0.5rem;
-        font-weight: 600;
-        font-size: 0.85em;
-        border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
-      }
-      .detail-panel {
-        grid-column: span 2;
-        background: var(--vscode-editor-background, #1e1e1e);
-        border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
-        padding: 0.5rem;
-      }
-      .detail-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.75rem;
-      }
-      .detail-block {
-        font-size: 0.85em;
-      }
-      .detail-block h4 {
-        font-size: 0.85em;
-        margin: 0 0 0.25rem;
-        opacity: 0.7;
-        font-weight: 600;
-      }
-      .detail-block pre {
-        margin: 0;
-        white-space: pre-wrap;
-        word-break: break-word;
-        font-size: 0.85em;
-        background: rgba(255, 255, 255, 0.03);
-        padding: 0.25rem 0.4rem;
-        border-radius: 3px;
-      }
-      .empty-state {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--vscode-descriptionForeground, #888);
-        font-size: 0.9em;
-        text-align: center;
-        padding: 1rem;
-      }
-      .toggle-label {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.35rem;
-        cursor: pointer;
-        font-size: 0.85em;
-      }
-      button.action {
-        background: transparent;
-        border: 1px solid var(--vscode-panel-border, #2a2a2a);
-        color: inherit;
-        padding: 0.2rem 0.5rem;
-        border-radius: 3px;
-        cursor: pointer;
-        font-size: 0.85em;
-      }
-      button.action:hover {
-        background: var(
-          --vscode-toolbar-hoverBackground,
-          rgba(255, 255, 255, 0.06)
-        );
-      }
-      button.action.icon-only {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0.25rem 0.4rem;
-      }
-      button.action.icon-only svg {
-        width: 1em;
-        height: 1em;
-      }
-    `
-  ]
+  static styles = [...Element.styles, compareStyles]
 
   @consume({ context: baselineContext, subscribe: true })
   @state()
@@ -309,125 +109,21 @@ export class DevtoolsCompare extends Element {
   /** Walk live suiteContext under selectedTestUid and collect leaf tests
    *  so live commands can be attributed to their parent step. */
   #liveStepsForSelectedUid(): PreservedStep[] {
-    const target = this.selectedTestUid
-    if (!target || !this.liveSuites) {
-      return []
-    }
-    const out: PreservedStep[] = []
-    let foundRoot: SuiteStatsFragment | undefined
-    const findRoot = (
-      s: SuiteStatsFragment | undefined
-    ): SuiteStatsFragment | undefined => {
-      if (!s) {
-        return undefined
-      }
-      if (s.uid === target) {
-        return s
-      }
-      for (const child of s.suites ?? []) {
-        const hit = findRoot(child)
-        if (hit) {
-          return hit
-        }
-      }
-      return undefined
-    }
-    for (const chunk of this.liveSuites) {
-      for (const root of Object.values(chunk)) {
-        foundRoot = findRoot(root)
-        if (foundRoot) {
-          break
-        }
-      }
-      if (foundRoot) {
-        break
-      }
-    }
-    if (!foundRoot) {
-      return []
-    }
-    const visit = (s: SuiteStatsFragment) => {
-      for (const t of s.tests ?? []) {
-        out.push({
-          uid: t.uid,
-          title: t.title,
-          fullTitle: t.fullTitle,
-          start: t.start ? new Date(t.start).getTime() : undefined,
-          end: t.end ? new Date(t.end).getTime() : undefined,
-          state:
-            t.state === 'pending' || t.state === 'running' ? t.state : t.state,
-          error: t.error
-            ? {
-                message: t.error.message,
-                name: t.error.name,
-                stack: t.error.stack
-              }
-            : undefined
-        })
-      }
-      for (const child of s.suites ?? []) {
-        visit(child)
-      }
-    }
-    visit(foundRoot)
-    return out
+    return liveStepsForUid(this.selectedTestUid, this.liveSuites)
   }
 
   #findStepFor(
     cmd: CommandLog | undefined,
     side: 'baseline' | 'latest'
   ): PreservedStep | undefined {
-    if (!cmd?.timestamp) {
-      return undefined
-    }
-    const steps =
-      side === 'baseline'
-        ? (this.#getBaseline()?.steps ?? [])
-        : this.#liveStepsForSelectedUid()
-    const ts = cmd.timestamp
-    return steps.find(
-      (s) =>
-        s.start !== null &&
-        s.start !== undefined &&
-        s.end !== null &&
-        s.end !== undefined &&
-        ts >= s.start &&
-        ts <= s.end
+    return findStepFor(
+      cmd,
+      side,
+      this.#getBaseline(),
+      this.#liveStepsForSelectedUid()
     )
   }
 
-  /** The failure site is either the command that errored at the WebDriver
-   *  level OR the last command in a failed step (assertion site). */
-  #isFailureSite(
-    cmd: CommandLog,
-    step: PreservedStep | undefined,
-    allCommandsOnSide: CommandLog[]
-  ): boolean {
-    if (!step || step.state !== 'failed') {
-      return false
-    }
-    if (cmd.error?.message) {
-      return true
-    }
-    if (step.start === null || step.end === null) {
-      return false
-    }
-    let lastTs = 0
-    for (const c of allCommandsOnSide) {
-      if (
-        c.timestamp !== null &&
-        step.start !== undefined &&
-        step.end !== undefined &&
-        c.timestamp >= step.start &&
-        c.timestamp <= step.end &&
-        c.timestamp > lastTs
-      ) {
-        lastTs = c.timestamp
-      }
-    }
-    return cmd.timestamp === lastTs
-  }
-
   /** Scope the global live command stream to commands within the selected
    *  test's step time windows (mirrors the backend's snapshot filter). */
   #liveCommandsForSelectedUid(): CommandLog[] {
@@ -460,10 +156,11 @@ export class DevtoolsCompare extends Element {
       return
     }
     try {
+      const body: BaselineClearRequest = { testUid: this.selectedTestUid }
       await fetch(BASELINE_API.clear, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ testUid: this.selectedTestUid })
+        body: JSON.stringify(body)
       })
     } catch {
       // best-effort; the server broadcast updates the context.
@@ -641,8 +338,7 @@ export class DevtoolsCompare extends Element {
           ? ((this.#getBaseline()?.commands ?? []) as CommandLog[])
           : this.#liveCommandsForSelectedUid()
       const statusMarker =
-        step?.state === 'failed' &&
-        this.#isFailureSite(cmd, step, allCmdsThisSide)
+        step?.state === 'failed' && isFailureSite(cmd, step, allCmdsThisSide)
           ? html`<span
               class="marker error"
               title="${step.error?.message
@@ -700,7 +396,7 @@ export class DevtoolsCompare extends Element {
             side === 'baseline'
               ? ((this.#getBaseline()?.commands ?? []) as CommandLog[])
               : this.#liveCommandsForSelectedUid()
-          return this.#isFailureSite(cmd, step, allCmds)
+          return isFailureSite(cmd, step, allCmds)
         }
       }
     }
@@ -786,40 +482,26 @@ export class DevtoolsCompare extends Element {
         <em style="opacity:0.6;">No command at this step</em>
       </div>`
     }
-    const argsStr = safeJson(cmd.args)
-    const resultStr = safeJson(cmd.result)
-    const step = this.#findStepFor(cmd, side)
     // Only the failure-site command shows step-level expected/actual/assertion;
     // other commands in the failed step succeeded individually.
     const allCmdsThisSide =
       side === 'baseline'
         ? ((this.#getBaseline()?.commands ?? []) as CommandLog[])
         : this.#liveCommandsForSelectedUid()
-    const isFailureSite = this.#isFailureSite(cmd, step, allCmdsThisSide)
-    const expected =
-      isFailureSite && step?.error?.expected !== undefined
-        ? step.error.expected
-        : isFailureSite
-          ? step?.error?.matcherResult?.expected
-          : undefined
-    const actual =
-      isFailureSite && step?.error?.actual !== undefined
-        ? step.error.actual
-        : isFailureSite
-          ? step?.error?.matcherResult?.actual
-          : undefined
-    const rawAssertion = isFailureSite
-      ? step?.error?.matcherResult?.message || step?.error?.message
-      : undefined
-    const assertionMessage = rawAssertion
-      ? cleanErrorMessage(rawAssertion)
-      : undefined
-    // Fallback: extract the expected from the Cucumber step text.
-    const stepText = step?.fullTitle || step?.title || ''
-    const fallbackExpected =
-      isFailureSite && expected === undefined && step?.state === 'failed'
-        ? extractExpectedFromStepText(stepText)
-        : undefined
+    const {
+      argsStr,
+      resultStr,
+      step,
+      expected,
+      actual,
+      assertionMessage,
+      fallbackExpected,
+      stepText
+    } = computeDetailBlockData(
+      cmd,
+      this.#findStepFor(cmd, side),
+      allCmdsThisSide
+    )
     return html`
       <div class="detail-block">
         <h4>${label} · ${cmd.command}</h4>
diff --git a/packages/app/src/components/workbench/compare/compareUtils.ts b/packages/app/src/components/workbench/compare/compareUtils.ts
index a4d3d1b2..a1dc34fd 100644
--- a/packages/app/src/components/workbench/compare/compareUtils.ts
+++ b/packages/app/src/components/workbench/compare/compareUtils.ts
@@ -1,4 +1,4 @@
-import type { CommandLog } from '@wdio/devtools-service/types'
+import type { CommandLog } from '@wdio/devtools-shared'
 
 export interface ComparePairedStep {
   index: number
diff --git a/packages/app/src/components/workbench/compare/constants.ts b/packages/app/src/components/workbench/compare/constants.ts
index 7594824b..b6dbb6b2 100644
--- a/packages/app/src/components/workbench/compare/constants.ts
+++ b/packages/app/src/components/workbench/compare/constants.ts
@@ -1,13 +1,3 @@
-export const BASELINE_API = {
-  preserve: '/api/baseline/preserve',
-  clear: '/api/baseline/clear'
-} as const
-
-export const BASELINE_WS_SCOPE = {
-  saved: 'baseline:saved',
-  cleared: 'baseline:cleared'
-} as const
-
 export const POPOUT_QUERY = {
   viewKey: 'view',
   viewValue: 'compare',
diff --git a/packages/app/src/components/workbench/compare/stepResolution.ts b/packages/app/src/components/workbench/compare/stepResolution.ts
new file mode 100644
index 00000000..c7bf7ff1
--- /dev/null
+++ b/packages/app/src/components/workbench/compare/stepResolution.ts
@@ -0,0 +1,210 @@
+import type {
+  CommandLog,
+  PreservedAttempt,
+  PreservedStep
+} from '@wdio/devtools-shared'
+import type { SuiteStatsFragment } from '../../../controller/types.js'
+import {
+  cleanErrorMessage,
+  extractExpectedFromStepText,
+  safeJson
+} from './compareUtils.js'
+
+/**
+ * Walk the live suite tree to find the subtree rooted at `selectedTestUid`
+ * and flatten its test entries into `PreservedStep[]` so the compare panel
+ * can treat live and baseline data uniformly.
+ *
+ * Returns `[]` when the selected UID isn't found in any chunk (e.g. when the
+ * user navigated to a stale UID that's no longer in the dashboard tree).
+ */
+export function liveStepsForUid(
+  selectedTestUid: string | undefined,
+  liveSuites: Array<Record<string, SuiteStatsFragment | undefined>> | undefined
+): PreservedStep[] {
+  if (!selectedTestUid || !liveSuites) {
+    return []
+  }
+  let foundRoot: SuiteStatsFragment | undefined
+  const findRoot = (
+    s: SuiteStatsFragment | undefined
+  ): SuiteStatsFragment | undefined => {
+    if (!s) {
+      return undefined
+    }
+    if (s.uid === selectedTestUid) {
+      return s
+    }
+    for (const child of s.suites ?? []) {
+      const hit = findRoot(child)
+      if (hit) {
+        return hit
+      }
+    }
+    return undefined
+  }
+  for (const chunk of liveSuites) {
+    for (const root of Object.values(chunk)) {
+      foundRoot = findRoot(root)
+      if (foundRoot) {
+        break
+      }
+    }
+    if (foundRoot) {
+      break
+    }
+  }
+  if (!foundRoot) {
+    return []
+  }
+  const out: PreservedStep[] = []
+  const visit = (s: SuiteStatsFragment) => {
+    for (const t of s.tests ?? []) {
+      out.push({
+        uid: t.uid,
+        title: t.title,
+        fullTitle: t.fullTitle,
+        start: t.start ? new Date(t.start).getTime() : undefined,
+        end: t.end ? new Date(t.end).getTime() : undefined,
+        state:
+          t.state === 'pending' || t.state === 'running' ? t.state : t.state,
+        error: t.error
+          ? {
+              message: t.error.message,
+              name: t.error.name,
+              stack: t.error.stack
+            }
+          : undefined
+      })
+    }
+    for (const child of s.suites ?? []) {
+      visit(child)
+    }
+  }
+  visit(foundRoot)
+  return out
+}
+
+/**
+ * Find which preserved step a command belongs to, by timestamp containment.
+ * The `side` selects whether to search the baseline's preserved steps or the
+ * live (selected-uid) steps.
+ */
+export function findStepFor(
+  cmd: CommandLog | undefined,
+  side: 'baseline' | 'latest',
+  baseline: PreservedAttempt | undefined,
+  liveSteps: PreservedStep[]
+): PreservedStep | undefined {
+  if (!cmd?.timestamp) {
+    return undefined
+  }
+  const steps = side === 'baseline' ? (baseline?.steps ?? []) : liveSteps
+  const ts = cmd.timestamp
+  return steps.find(
+    (s) =>
+      s.start !== null &&
+      s.start !== undefined &&
+      s.end !== null &&
+      s.end !== undefined &&
+      ts >= s.start &&
+      ts <= s.end
+  )
+}
+
+/**
+ * Pre-computed data for one side of a detail-block render. Pulling this out
+ * of compare.ts's `#renderDetailBlock` lets the template stay focused on
+ * markup and lets the computation be tested in isolation.
+ */
+export interface DetailBlockData {
+  argsStr: string
+  resultStr: string
+  step: PreservedStep | undefined
+  atFailureSite: boolean
+  expected: unknown
+  actual: unknown
+  assertionMessage: string | undefined
+  fallbackExpected: string | undefined
+  stepText: string
+}
+
+export function computeDetailBlockData(
+  cmd: CommandLog,
+  step: PreservedStep | undefined,
+  allCommandsOnSide: CommandLog[]
+): DetailBlockData {
+  const atFailureSite = isFailureSite(cmd, step, allCommandsOnSide)
+  const expected =
+    atFailureSite && step?.error?.expected !== undefined
+      ? step.error.expected
+      : atFailureSite
+        ? step?.error?.matcherResult?.expected
+        : undefined
+  const actual =
+    atFailureSite && step?.error?.actual !== undefined
+      ? step.error.actual
+      : atFailureSite
+        ? step?.error?.matcherResult?.actual
+        : undefined
+  const rawAssertion = atFailureSite
+    ? step?.error?.matcherResult?.message || step?.error?.message
+    : undefined
+  const assertionMessage = rawAssertion
+    ? cleanErrorMessage(rawAssertion)
+    : undefined
+  const stepText = step?.fullTitle || step?.title || ''
+  // Fallback: extract the expected from the Cucumber step text when the
+  // assertion library didn't surface a structured expected value.
+  const fallbackExpected =
+    atFailureSite && expected === undefined && step?.state === 'failed'
+      ? extractExpectedFromStepText(stepText)
+      : undefined
+
+  return {
+    argsStr: safeJson(cmd.args),
+    resultStr: safeJson(cmd.result),
+    step,
+    atFailureSite,
+    expected,
+    actual,
+    assertionMessage,
+    fallbackExpected,
+    stepText
+  }
+}
+
+/**
+ * Identify the "failure site" of a failed step — either the command whose own
+ * `error` is set (the WebDriver-level failure) OR the last command before the
+ * step's end time (the assertion site, where the matcher threw).
+ */
+export function isFailureSite(
+  cmd: CommandLog,
+  step: PreservedStep | undefined,
+  allCommandsOnSide: CommandLog[]
+): boolean {
+  if (!step || step.state !== 'failed') {
+    return false
+  }
+  if (cmd.error?.message) {
+    return true
+  }
+  if (step.start === null || step.end === null) {
+    return false
+  }
+  let lastTs = 0
+  for (const c of allCommandsOnSide) {
+    if (
+      c.timestamp !== null &&
+      step.start !== undefined &&
+      step.end !== undefined &&
+      c.timestamp >= step.start &&
+      c.timestamp <= step.end &&
+      c.timestamp > lastTs
+    ) {
+      lastTs = c.timestamp
+    }
+  }
+  return cmd.timestamp === lastTs
+}
diff --git a/packages/app/src/components/workbench/compare/styles.ts b/packages/app/src/components/workbench/compare/styles.ts
new file mode 100644
index 00000000..3b8cadc8
--- /dev/null
+++ b/packages/app/src/components/workbench/compare/styles.ts
@@ -0,0 +1,205 @@
+import { css } from 'lit'
+
+/** Component styles for `<wdio-devtools-compare>`. Pulled out of compare.ts
+ *  so the main component file stays focused on data and render logic. */
+export const compareStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+    /* Needed so popout mode (where Compare sits directly under body) is themed. */
+    background-color: var(--vscode-editor-background, #1e1e1e);
+    color: var(--vscode-foreground, #cccccc);
+  }
+  .compare-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    /* Stack rows from the top so they don't stretch to fill the grid. */
+    align-content: start;
+    grid-auto-rows: min-content;
+  }
+  .step-row {
+    display: contents;
+  }
+  .step-cell {
+    padding: 0.25rem 0.5rem;
+    border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
+    font-family: var(--vscode-editor-font-family, monospace);
+    font-size: 0.85em;
+    cursor: pointer;
+  }
+  .step-cell.divergent {
+    background: rgba(255, 90, 90, 0.08);
+  }
+  .step-cell.divergent.first {
+    background: rgba(255, 90, 90, 0.18);
+    border-left: 3px solid var(--vscode-charts-red, #f48771);
+  }
+  .marker {
+    margin-left: 0.35rem;
+    font-size: 0.85em;
+  }
+  .marker.result {
+    color: var(--vscode-charts-orange, #d19a66);
+  }
+  .marker.error {
+    color: var(--vscode-charts-red, #f48771);
+  }
+  .marker.command {
+    color: var(--vscode-charts-red, #f48771);
+  }
+  .marker.ok {
+    color: var(--vscode-charts-green, #73c373);
+  }
+  .marker.info {
+    color: var(--vscode-descriptionForeground, #999);
+    opacity: 0.7;
+  }
+  .error-banner {
+    margin: 0.5rem 0.75rem;
+    padding: 0.5rem 0.75rem;
+    background: rgba(244, 135, 113, 0.12);
+    border-left: 3px solid var(--vscode-charts-red, #f48771);
+    border-radius: 3px;
+    font-size: 0.85em;
+  }
+  .error-banner-title {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+    opacity: 0.85;
+    font-family: inherit;
+  }
+  /* Pre-wrap only on the message body so template indentation doesn't render. */
+  .error-banner-message {
+    font-family: var(--vscode-editor-font-family, monospace);
+    white-space: pre-wrap;
+    word-break: break-word;
+    margin: 0;
+  }
+  .step-cell.missing {
+    opacity: 0.35;
+    font-style: italic;
+  }
+  .step-cell:hover {
+    background: var(
+      --vscode-toolbar-hoverBackground,
+      rgba(255, 255, 255, 0.06)
+    );
+  }
+  .step-cell.expanded {
+    background: rgba(80, 160, 255, 0.06);
+  }
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.1rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.85em;
+    background: var(--vscode-badge-background, #2a2a2a);
+  }
+  .pill.failed {
+    background: rgba(244, 135, 113, 0.2);
+    color: var(--vscode-charts-red, #f48771);
+  }
+  .pill.passed {
+    background: rgba(115, 195, 115, 0.2);
+    color: var(--vscode-charts-green, #73c373);
+  }
+  .topbar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
+    flex: 0 0 auto;
+  }
+  .col-header {
+    position: sticky;
+    top: 0;
+    background: var(--vscode-editor-background, #1e1e1e);
+    z-index: 1;
+    padding: 0.5rem;
+    font-weight: 600;
+    font-size: 0.85em;
+    border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
+  }
+  .detail-panel {
+    grid-column: span 2;
+    background: var(--vscode-editor-background, #1e1e1e);
+    border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
+    padding: 0.5rem;
+  }
+  .detail-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+  .detail-block {
+    font-size: 0.85em;
+  }
+  .detail-block h4 {
+    font-size: 0.85em;
+    margin: 0 0 0.25rem;
+    opacity: 0.7;
+    font-weight: 600;
+  }
+  .detail-block pre {
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+    font-size: 0.85em;
+    background: rgba(255, 255, 255, 0.03);
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .empty-state {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--vscode-descriptionForeground, #888);
+    font-size: 0.9em;
+    text-align: center;
+    padding: 1rem;
+  }
+  .toggle-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    cursor: pointer;
+    font-size: 0.85em;
+  }
+  button.action {
+    background: transparent;
+    border: 1px solid var(--vscode-panel-border, #2a2a2a);
+    color: inherit;
+    padding: 0.2rem 0.5rem;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 0.85em;
+  }
+  button.action:hover {
+    background: var(
+      --vscode-toolbar-hoverBackground,
+      rgba(255, 255, 255, 0.06)
+    );
+  }
+  button.action.icon-only {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem 0.4rem;
+  }
+  button.action.icon-only svg {
+    width: 1em;
+    height: 1em;
+  }
+`
diff --git a/packages/app/src/components/workbench/list.ts b/packages/app/src/components/workbench/list.ts
index 54825f95..f5c45c70 100644
--- a/packages/app/src/components/workbench/list.ts
+++ b/packages/app/src/components/workbench/list.ts
@@ -122,7 +122,7 @@ export class DevtoolsList extends Element {
       <section class="block">
         ${this.#renderSectionHeader(this.label)}
         <dl class="flex flex-wrap ${this.isCollapsed ? '' : 'mt-2'}">
-          ${(entries as any[]).map((entry) => {
+          ${(entries as unknown[]).map((entry) => {
             let key: string | undefined
             let val: unknown
 
diff --git a/packages/app/src/components/workbench/logs.ts b/packages/app/src/components/workbench/logs.ts
index 0000450a..652df813 100644
--- a/packages/app/src/components/workbench/logs.ts
+++ b/packages/app/src/components/workbench/logs.ts
@@ -2,7 +2,7 @@ import { Element } from '@core/element'
 import { html, css } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import type { CommandLog } from '@wdio/devtools-service/types'
+import type { CommandLog } from '@wdio/devtools-shared'
 import type { CommandEndpoint } from '@wdio/protocols'
 
 import './list.js'
diff --git a/packages/app/src/components/workbench/metadata.ts b/packages/app/src/components/workbench/metadata.ts
index bdf2c01a..70faa320 100644
--- a/packages/app/src/components/workbench/metadata.ts
+++ b/packages/app/src/components/workbench/metadata.ts
@@ -3,7 +3,7 @@ import { html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
-import type { Metadata } from '@wdio/devtools-service/types'
+import type { Metadata } from '@wdio/devtools-shared'
 import { metadataContext } from '../../controller/context.js'
 
 import './list.js'
@@ -34,7 +34,16 @@ export class DevtoolsMetadata extends Element {
       return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }
 
-    const m = this.metadata as any
+    const m = this.metadata as {
+      sessionId?: string
+      testEnv?: string
+      host?: string
+      modulePath?: string
+      url?: string
+      capabilities?: Record<string, unknown>
+      desiredCapabilities?: Record<string, unknown>
+      options?: Record<string, unknown>
+    }
     const sessionInfo: Record<string, unknown> = {}
     if (m.sessionId) {
       sessionInfo['Session ID'] = m.sessionId
diff --git a/packages/app/src/components/workbench/network.ts b/packages/app/src/components/workbench/network.ts
index e58154cd..51b541bd 100644
--- a/packages/app/src/components/workbench/network.ts
+++ b/packages/app/src/components/workbench/network.ts
@@ -1,5 +1,6 @@
 import { Element } from '@core/element'
-import { html, css, nothing } from 'lit'
+import { html, nothing } from 'lit'
+import { networkStyles } from './network/styles.js'
 import { customElement, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 import { networkRequestContext } from '../../controller/context.js'
@@ -64,205 +65,7 @@ export class DevtoolsNetwork extends Element {
     }
   }
 
-  static styles = [
-    ...Element.styles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-        color: var(--vscode-foreground);
-        background-color: var(--vscode-editor-background);
-      }
-
-      .network-header {
-        padding: 0.5rem 1rem;
-        border-bottom: 1px solid var(--vscode-panel-border);
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        flex-shrink: 0;
-      }
-
-      .search-input {
-        padding: 0.375rem 0.75rem;
-        border: 1px solid var(--vscode-panel-border);
-        background: var(--vscode-input-background);
-        color: var(--vscode-input-foreground);
-        border-radius: 4px;
-        font-size: 0.875rem;
-        min-width: 200px;
-      }
-
-      .search-input:focus {
-        outline: none;
-        border-color: var(--vscode-focusBorder);
-      }
-
-      .filter-tabs {
-        display: flex;
-        gap: 0.25rem;
-        margin-left: 1rem;
-      }
-
-      .filter-tab {
-        padding: 0.375rem 0.75rem;
-        border: none;
-        background: transparent;
-        color: var(--vscode-foreground);
-        cursor: pointer;
-        font-size: 0.875rem;
-        transition: all 0.15s;
-        border-bottom: 2px solid transparent;
-      }
-
-      .filter-tab:hover {
-        background: var(--vscode-toolbar-hoverBackground);
-      }
-
-      .filter-tab.active {
-        color: var(--vscode-textLink-activeForeground);
-        border-bottom-color: var(--vscode-textLink-activeForeground);
-      }
-
-      .network-content {
-        display: flex;
-        flex: 1;
-        overflow: hidden;
-      }
-
-      .requests-list {
-        flex: 1;
-        overflow-y: auto;
-        overflow-x: auto;
-        border-right: 1px solid var(--vscode-panel-border);
-        min-width: 0;
-      }
-
-      .requests-header {
-        display: grid;
-        grid-template-columns: 200px 80px 70px 180px 90px 80px 90px;
-        min-width: 790px;
-        border-bottom: 1px solid var(--vscode-panel-border);
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: var(--vscode-descriptionForeground);
-        position: sticky;
-        top: 0;
-        background: var(--vscode-editor-background);
-        z-index: 1;
-      }
-
-      .requests-header > div {
-        padding: 0.5rem;
-        border-right: 1px solid var(--vscode-panel-border);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .requests-header > div:last-child {
-        border-right: none;
-      }
-
-      .request-row {
-        display: grid;
-        grid-template-columns: 200px 80px 70px 180px 90px 80px 90px;
-        min-width: 790px;
-        border-bottom: 1px solid var(--vscode-panel-border);
-        cursor: pointer;
-        font-size: 0.875rem;
-        transition: background 0.15s;
-        align-items: center;
-      }
-
-      .request-row > span {
-        padding: 0.5rem;
-        border-right: 1px solid var(--vscode-panel-border);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .request-row > span:last-child {
-        border-right: none;
-      }
-
-      .request-row:hover {
-        background: var(--vscode-list-hoverBackground);
-      }
-
-      .request-row.selected {
-        background: var(--vscode-list-activeSelectionBackground);
-        color: var(--vscode-list-activeSelectionForeground);
-      }
-
-      .request-row.error {
-        color: var(--vscode-errorForeground);
-      }
-
-      .request-detail {
-        flex: 1;
-        overflow-y: auto;
-        padding: 1rem;
-        min-width: 400px;
-      }
-
-      .detail-section {
-        margin-bottom: 1.5rem;
-      }
-
-      .detail-title {
-        font-size: 0.875rem;
-        font-weight: 600;
-        margin-bottom: 0.5rem;
-        color: var(--vscode-foreground);
-      }
-
-      .detail-content {
-        background: var(--vscode-editor-background);
-        padding: 0.75rem;
-        border-radius: 4px;
-        border: 1px solid var(--vscode-panel-border);
-        font-family: monospace;
-        font-size: 0.75rem;
-        overflow-x: auto;
-      }
-
-      .header-row {
-        display: flex;
-        gap: 1rem;
-        padding: 0.25rem 0;
-        border-bottom: 1px solid var(--vscode-panel-border);
-      }
-
-      .header-key {
-        font-weight: 600;
-        color: var(--vscode-symbolIcon-keyForeground);
-        flex-shrink: 0;
-        min-width: 80px;
-      }
-
-      .header-value {
-        color: var(--vscode-symbolIcon-stringForeground);
-        word-break: break-word;
-        flex: 1;
-        text-align: right;
-      }
-
-      .truncate {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .text-muted {
-        color: var(--vscode-descriptionForeground);
-      }
-    `
-  ]
+  static styles = [...Element.styles, networkStyles]
 
   #filterRequests(): NetworkRequest[] {
     let filtered = this.networkRequests
diff --git a/packages/app/src/components/workbench/network/styles.ts b/packages/app/src/components/workbench/network/styles.ts
new file mode 100644
index 00000000..17d039b5
--- /dev/null
+++ b/packages/app/src/components/workbench/network/styles.ts
@@ -0,0 +1,200 @@
+import { css } from 'lit'
+
+/** Component styles for `<wdio-devtools-network>`. Pulled out so the main
+ *  network component file stays focused on request filtering and rendering. */
+export const networkStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    color: var(--vscode-foreground);
+    background-color: var(--vscode-editor-background);
+  }
+
+  .network-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--vscode-panel-border);
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .search-input {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--vscode-panel-border);
+    background: var(--vscode-input-background);
+    color: var(--vscode-input-foreground);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    min-width: 200px;
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--vscode-focusBorder);
+  }
+
+  .filter-tabs {
+    display: flex;
+    gap: 0.25rem;
+    margin-left: 1rem;
+  }
+
+  .filter-tab {
+    padding: 0.375rem 0.75rem;
+    border: none;
+    background: transparent;
+    color: var(--vscode-foreground);
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: all 0.15s;
+    border-bottom: 2px solid transparent;
+  }
+
+  .filter-tab:hover {
+    background: var(--vscode-toolbar-hoverBackground);
+  }
+
+  .filter-tab.active {
+    color: var(--vscode-textLink-activeForeground);
+    border-bottom-color: var(--vscode-textLink-activeForeground);
+  }
+
+  .network-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .requests-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: auto;
+    border-right: 1px solid var(--vscode-panel-border);
+    min-width: 0;
+  }
+
+  .requests-header {
+    display: grid;
+    grid-template-columns: 200px 80px 70px 180px 90px 80px 90px;
+    min-width: 790px;
+    border-bottom: 1px solid var(--vscode-panel-border);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--vscode-descriptionForeground);
+    position: sticky;
+    top: 0;
+    background: var(--vscode-editor-background);
+    z-index: 1;
+  }
+
+  .requests-header > div {
+    padding: 0.5rem;
+    border-right: 1px solid var(--vscode-panel-border);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .requests-header > div:last-child {
+    border-right: none;
+  }
+
+  .request-row {
+    display: grid;
+    grid-template-columns: 200px 80px 70px 180px 90px 80px 90px;
+    min-width: 790px;
+    border-bottom: 1px solid var(--vscode-panel-border);
+    cursor: pointer;
+    font-size: 0.875rem;
+    transition: background 0.15s;
+    align-items: center;
+  }
+
+  .request-row > span {
+    padding: 0.5rem;
+    border-right: 1px solid var(--vscode-panel-border);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .request-row > span:last-child {
+    border-right: none;
+  }
+
+  .request-row:hover {
+    background: var(--vscode-list-hoverBackground);
+  }
+
+  .request-row.selected {
+    background: var(--vscode-list-activeSelectionBackground);
+    color: var(--vscode-list-activeSelectionForeground);
+  }
+
+  .request-row.error {
+    color: var(--vscode-errorForeground);
+  }
+
+  .request-detail {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    min-width: 400px;
+  }
+
+  .detail-section {
+    margin-bottom: 1.5rem;
+  }
+
+  .detail-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    color: var(--vscode-foreground);
+  }
+
+  .detail-content {
+    background: var(--vscode-editor-background);
+    padding: 0.75rem;
+    border-radius: 4px;
+    border: 1px solid var(--vscode-panel-border);
+    font-family: monospace;
+    font-size: 0.75rem;
+    overflow-x: auto;
+  }
+
+  .header-row {
+    display: flex;
+    gap: 1rem;
+    padding: 0.25rem 0;
+    border-bottom: 1px solid var(--vscode-panel-border);
+  }
+
+  .header-key {
+    font-weight: 600;
+    color: var(--vscode-symbolIcon-keyForeground);
+    flex-shrink: 0;
+    min-width: 80px;
+  }
+
+  .header-value {
+    color: var(--vscode-symbolIcon-stringForeground);
+    word-break: break-word;
+    flex: 1;
+    text-align: right;
+  }
+
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .text-muted {
+    color: var(--vscode-descriptionForeground);
+  }
+`
diff --git a/packages/app/src/controller/DataManager.ts b/packages/app/src/controller/DataManager.ts
index a147e9b4..41f1aef2 100644
--- a/packages/app/src/controller/DataManager.ts
+++ b/packages/app/src/controller/DataManager.ts
@@ -5,7 +5,7 @@ import type {
   CommandLog,
   TraceLog,
   PreservedAttempt
-} from '@wdio/devtools-service/types'
+} from '@wdio/devtools-shared'
 
 import {
   mutationContext,
@@ -20,15 +20,17 @@ import {
   baselineContext,
   selectedTestUidContext
 } from './context.js'
-import { BASELINE_WS_SCOPE } from '../components/workbench/compare/constants.js'
+import { BASELINE_WS_SCOPE, WS_SCOPE } from '@wdio/devtools-shared'
 import { CACHE_ID } from './constants.js'
-import { getTimestamp } from '../utils/helpers.js'
 import { rerunState } from './rerunState.js'
-import type {
-  TestStatsFragment,
-  SuiteStatsFragment,
-  SocketMessage
-} from './types.js'
+import type { SuiteStatsFragment, SocketMessage } from './types.js'
+import { canonicalizeUids, mergeSuite } from './suite-merge.js'
+import {
+  markAllRunning,
+  markSpecificRunning,
+  markRunningAsStopped
+} from './mark-running.js'
+import { shouldResetForNewRun } from './run-detection.js'
 
 export class DataManagerController implements ReactiveController {
   #ws?: WebSocket
@@ -163,133 +165,11 @@ export class DataManagerController implements ReactiveController {
 
   #markTestAsRunning(uid: string, entryType?: 'suite' | 'test') {
     const suites = this.suitesContextProvider.value || []
-
-    // If uid is '*', mark ALL tests/suites as running
-    if (uid === '*') {
-      const updatedSuites = suites.map((chunk) => {
-        const updatedChunk: Record<string, SuiteStatsFragment> = {}
-        Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
-          ([suiteUid, suite]) => {
-            if (!suite) {
-              updatedChunk[suiteUid] = suite
-              return
-            }
-
-            const markAllAsRunning = (
-              s: SuiteStatsFragment
-            ): SuiteStatsFragment => {
-              return {
-                ...s,
-                state: 'running',
-                start: new Date(),
-                end: undefined,
-                // Clear leaf-level tests so stale step entries from a previous
-                // run don't linger when the feature file or test code changed
-                // between runs (e.g. Cucumber step text edited). The new run
-                // repopulates them. Child suites are preserved so the tree
-                // structure remains visible during the rerun.
-                tests: [] as TestStatsFragment[],
-                suites: s.suites?.map(markAllAsRunning) || []
-              }
-            }
-
-            updatedChunk[suiteUid] = markAllAsRunning(suite)
-          }
-        )
-        return updatedChunk
-      })
-      this.suitesContextProvider.setValue(updatedSuites)
-      this.#host.requestUpdate()
-      return
-    }
-
-    // Otherwise, mark specific test/suite as running
-    const updatedSuites = suites.map((chunk) => {
-      const updatedChunk: Record<string, SuiteStatsFragment> = {}
-      Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
-        ([suiteUid, suite]) => {
-          if (!suite) {
-            updatedChunk[suiteUid] = suite
-            return
-          }
-
-          // Recursive helper to mark only the targeted branch as running
-          const markAsRunning = (
-            s: SuiteStatsFragment
-          ): { suite: SuiteStatsFragment; matched: boolean } => {
-            const runStart = new Date()
-
-            if (entryType !== 'test' && s.uid === uid) {
-              const markSuiteTreeAsRunning = (
-                suiteNode: SuiteStatsFragment
-              ): SuiteStatsFragment => ({
-                ...suiteNode,
-                state: 'running',
-                start: runStart,
-                end: undefined,
-                // Clear leaf-level tests on rerun so stale step entries from
-                // a previous run can't linger. See sibling markAllAsRunning.
-                tests: [] as TestStatsFragment[],
-                suites: suiteNode.suites?.map(markSuiteTreeAsRunning) || []
-              })
-
-              return {
-                matched: true,
-                suite: markSuiteTreeAsRunning(s)
-              }
-            }
-
-            let matched = false
-            const updatedTests = (s.tests?.map((test) => {
-              if (test.uid === uid) {
-                matched = true
-                return {
-                  ...test,
-                  state: 'pending',
-                  start: new Date(),
-                  end: undefined
-                }
-              }
-              return test
-            }) ?? []) as TestStatsFragment[]
-
-            const updatedNestedSuites =
-              s.suites?.map((nestedSuite) => {
-                const nestedResult = markAsRunning(nestedSuite)
-                if (nestedResult.matched) {
-                  matched = true
-                }
-                return nestedResult.suite
-              }) || []
-
-            return {
-              matched,
-              suite: {
-                ...s,
-                ...(matched
-                  ? {
-                      state: 'running' as const,
-                      // Don't reset the parent's start/end when it is already
-                      // running — subsequent child-scenario marks would otherwise
-                      // reset the feature's original run timestamp.
-                      ...(s.state !== 'running'
-                        ? { start: runStart, end: undefined }
-                        : {})
-                    }
-                  : {}),
-                tests: updatedTests || [],
-                suites: updatedNestedSuites
-              }
-            }
-          }
-
-          updatedChunk[suiteUid] = markAsRunning(suite).suite
-        }
-      )
-      return updatedChunk
-    })
-
-    this.suitesContextProvider.setValue(updatedSuites)
+    const updated =
+      uid === '*'
+        ? markAllRunning(suites)
+        : markSpecificRunning(suites, uid, entryType)
+    this.suitesContextProvider.setValue(updated)
     this.#host.requestUpdate()
   }
 
@@ -331,7 +211,7 @@ export class DataManagerController implements ReactiveController {
         return
       }
 
-      if (scope === 'testStopped') {
+      if (scope === WS_SCOPE.testStopped) {
         this.#handleTestStopped()
         this.#host.requestUpdate()
         return
@@ -345,7 +225,7 @@ export class DataManagerController implements ReactiveController {
         return
       }
 
-      if (scope === 'clearExecutionData') {
+      if (scope === WS_SCOPE.clearExecutionData) {
         const { uid, entryType, clearSuiteTree } =
           data as SocketMessage<'clearExecutionData'>['data']
         this.clearExecutionData(uid, entryType)
@@ -359,7 +239,7 @@ export class DataManagerController implements ReactiveController {
         return
       }
 
-      if (scope === 'replaceCommand') {
+      if (scope === WS_SCOPE.replaceCommand) {
         const { oldTimestamp, command } =
           data as SocketMessage<'replaceCommand'>['data']
         this.#handleReplaceCommand(oldTimestamp, command)
@@ -413,84 +293,16 @@ export class DataManagerController implements ReactiveController {
   }
 
   #shouldResetForNewRun(data: unknown): boolean {
-    // During a UI-triggered rerun, suppress auto-detection so sibling-scenario
-    // updates don't wipe accumulated execution data.
-    // Still update #lastSeenRunTimestamp so that once activeRerunSuiteUid is
-    // cleared the final suite update isn't mistakenly treated as a new run.
-    if (rerunState.activeRerunSuiteUid) {
-      const payloads = Array.isArray(data)
-        ? (data as Record<string, SuiteStatsFragment>[])
-        : ([data] as Record<string, SuiteStatsFragment>[])
-      for (const chunk of payloads) {
-        if (!chunk) {
-          continue
-        }
-        for (const suite of Object.values(chunk)) {
-          if (!suite?.start) {
-            continue
-          }
-          const t = getTimestamp(
-            suite.start as Date | number | string | undefined
-          )
-          if (t > this.#lastSeenRunTimestamp) {
-            this.#lastSeenRunTimestamp = t
-          }
-        }
-      }
-      return false
-    }
-
-    const payloads = Array.isArray(data)
-      ? (data as Record<string, SuiteStatsFragment>[])
-      : ([data] as Record<string, SuiteStatsFragment>[])
-
-    for (const chunk of payloads) {
-      if (!chunk) {
-        continue
-      }
-
-      for (const suite of Object.values(chunk)) {
-        if (!suite?.start) {
-          continue
-        }
-
-        const suiteStartTime = getTimestamp(
-          suite.start as Date | number | string | undefined
-        )
-
-        if (suiteStartTime <= 0) {
-          continue
-        }
-
-        // New run detected if we see a newer start timestamp.
-        // Exception: if the existing suite for this uid has no end time, it is
-        // still an ongoing run (e.g. a Cucumber feature spanning multiple
-        // scenarios) — treat it as a continuation, not a new run.
-        if (suiteStartTime > this.#lastSeenRunTimestamp) {
-          const existingChunks = this.suitesContextProvider.value || []
-          let existingEnd: unknown = undefined
-          outer: for (const ec of existingChunks) {
-            for (const [uid, existing] of Object.entries(ec)) {
-              if (uid === Object.keys(chunk)[0]) {
-                existingEnd = existing?.end
-                break outer
-              }
-            }
-          }
-          // Only reset if the previous run was already finished (had an end time).
-          // An ongoing run (end == null / undefined) is just a continuation.
-          const previousRunFinished =
-            existingEnd !== null && existingEnd !== undefined
-          if (previousRunFinished) {
-            this.#lastSeenRunTimestamp = suiteStartTime
-            return true
-          }
-          // Continuation — update tracking timestamp but do NOT reset
-          this.#lastSeenRunTimestamp = suiteStartTime
-        }
-      }
-    }
-    return false
+    const { shouldReset, newLastSeenTimestamp } = shouldResetForNewRun(
+      data,
+      {
+        lastSeenRunTimestamp: this.#lastSeenRunTimestamp,
+        activeRerunSuiteUid: rerunState.activeRerunSuiteUid
+      },
+      this.suitesContextProvider.value || []
+    )
+    this.#lastSeenRunTimestamp = newLastSeenTimestamp
+    return shouldReset
   }
 
   #resetExecutionData() {
@@ -511,72 +323,8 @@ export class DataManagerController implements ReactiveController {
   #handleTestStopped() {
     this.#activeRerunTestUid = undefined
     rerunState.activeRerunSuiteUid = undefined
-
-    // Mark all running tests as failed when test execution is stopped
     const suites = this.suitesContextProvider.value || []
-    const updatedSuites = suites.map((chunk) => {
-      const updatedChunk: Record<string, SuiteStatsFragment> = {}
-      Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
-        ([uid, suite]) => {
-          if (!suite) {
-            updatedChunk[uid] = suite
-            return
-          }
-
-          // Recursive helper to update tests and nested suites
-          const updateSuite = (s: SuiteStatsFragment): SuiteStatsFragment => {
-            const updatedTests = s.tests?.map((test): TestStatsFragment => {
-              // If test is running (no end time), mark it as failed
-              if (test && !test.end) {
-                return {
-                  ...test,
-                  end: new Date(),
-                  state: 'failed',
-                  error: {
-                    message: 'Test execution stopped',
-                    name: 'TestStoppedError'
-                  }
-                }
-              }
-              return test
-            })
-
-            // Recursively update nested suites (for Cucumber scenarios)
-            const updatedNestedSuites = s.suites?.map(updateSuite)
-
-            // Derive the suite's own state from its updated children so that
-            // STATE_MAP['running'] no longer produces a spinner after stop.
-            const allTests = [
-              ...(updatedTests || []),
-              ...(updatedNestedSuites || [])
-            ]
-            const hasFailed = allTests.some((t) => t?.state === 'failed')
-            const hasRunning = allTests.some((t) => !t?.end)
-            const derivedState: SuiteStatsFragment['state'] = hasRunning
-              ? s.state
-              : hasFailed
-                ? 'failed'
-                : s.state === 'running'
-                  ? 'failed'
-                  : s.state
-
-            return {
-              ...s,
-              state: derivedState,
-              ...(!hasRunning && !s.end ? { end: new Date() } : {}),
-
-              tests: updatedTests || [],
-              suites: updatedNestedSuites || []
-            }
-          }
-
-          updatedChunk[uid] = updateSuite(suite)
-        }
-      )
-      return updatedChunk
-    })
-
-    this.suitesContextProvider.setValue(updatedSuites)
+    this.suitesContextProvider.setValue(markRunningAsStopped(suites))
   }
 
   #handleMutationsUpdate(data: TraceMutation[]) {
@@ -694,7 +442,11 @@ export class DataManagerController implements ReactiveController {
         }
       }
     })
-    const canonicalizedRoots = this.#canonicalizeUids(
+    const mergeCtx = {
+      activeRerunTestUid: this.#activeRerunTestUid,
+      activeRerunSuiteUid: rerunState.activeRerunSuiteUid
+    }
+    const canonicalizedRoots = canonicalizeUids(
       existingRootSuites,
       incomingRootSuites
     )
@@ -704,7 +456,7 @@ export class DataManagerController implements ReactiveController {
         return
       }
       const existing = suiteMap.get(suite.uid)
-      const merged = existing ? this.#mergeSuite(existing, suite) : suite
+      const merged = existing ? mergeSuite(existing, suite, mergeCtx) : suite
       suiteMap.set(suite.uid, merged)
     })
 
@@ -726,251 +478,11 @@ export class DataManagerController implements ReactiveController {
     this.logsContextProvider.setValue(data)
   }
 
-  #mergeSuite(existing: SuiteStatsFragment, incoming: SuiteStatsFragment) {
-    // First merge tests and suites properly
-    const mergedTests = this.#mergeTests(existing.tests, incoming.tests)
-    const mergedSuites = this.#mergeChildSuites(
-      existing.suites,
-      incoming.suites
-    )
-
-    // Then merge suite properties, ensuring merged tests/suites are preserved
-    const { tests, suites, ...incomingProps } = incoming
-
-    // Strip undefined state from incoming so it doesn't overwrite a valid existing state.
-    // The Nightwatch reporter may send suites without a state field when the JSON
-    // serialization omits properties that are undefined on the object.
-    if (incomingProps.state === undefined || incomingProps.state === null) {
-      delete (incomingProps as any).state
-    }
-
-    // Treat incoming state=undefined/null the same as pending — WDIO's SuiteStats
-    // doesn't set 'state' on suite end (unlike TestStats), so undefined means the
-    // backend hasn't assigned a terminal state. Null is the Nightwatch equivalent.
-    const incomingStateIsPendingOrUnset =
-      incoming.state === 'pending' ||
-      incoming.state === null ||
-      incoming.state === undefined
-
-    const allChildren = [...(mergedTests || []), ...(mergedSuites || [])]
-    // Treat children with undefined/null state as in-progress (not yet terminal).
-    // This prevents prematurely deriving 'passed' when children haven't reported yet.
-    const hasInProgressChildren = allChildren.some(
-      (child) =>
-        child?.state === 'running' ||
-        child?.state === 'pending' ||
-        child?.state === null
-    )
-    const hasFailedChildren = allChildren.some(
-      (child) => child?.state === 'failed'
-    )
-    const hasChildren = allChildren.length > 0
-
-    // Only derive 'passed' when ALL children have reached a terminal state.
-    const allChildrenTerminal =
-      hasChildren &&
-      allChildren.every(
-        (child) =>
-          child?.state === 'passed' ||
-          child?.state === 'failed' ||
-          child?.state === 'skipped'
-      )
-
-    // On rerun start we optimistically mark the suite as running in the UI.
-    // Keep (or set) running state whenever the incoming state is unset/pending
-    // AND children are still in-progress. This handles both:
-    //   • Nightwatch: suite was already 'running' → keep it running
-    //   • WDIO: suite was 'passed' from previous run but now has running children
-    //     (WDIO SuiteStats never carries an explicit state, so the previous
-    //     derivedCompletedState='passed' would otherwise be silently preserved)
-    const keepRunningState =
-      incomingStateIsPendingOrUnset && hasInProgressChildren
-
-    // Only derive 'passed'/'failed' from children when the backend hasn't
-    // assigned an explicit state (WDIO case: SuiteStats.state is never set on
-    // suite end). When state is explicitly 'pending' the backend is signalling
-    // a new run is starting — stale children from the previous run must not
-    // be used to derive a completed state.
-    const incomingStateIsUnset =
-      incoming.state === null || incoming.state === undefined
-
-    const derivedCompletedState: SuiteStatsFragment['state'] | undefined =
-      allChildrenTerminal && incomingStateIsUnset
-        ? hasFailedChildren
-          ? 'failed'
-          : 'passed'
-        : undefined
-
-    // When a new run starts the backend sends the feature suite with
-    // state: 'pending' before it has pushed any scenario children.
-    // #mergeChildSuites preserves stale child suites from the previous run,
-    // but they must not keep their terminal states — mark them 'pending' so
-    // they render as a spinner instead of a stale checkmark/cross.
-    // Exception: when only a specific child scenario is being rerun
-    // (activeRerunSuiteUid differs from the incoming feature suite's uid),
-    // sibling scenarios must keep their existing terminal states.
-    const isChildRerun =
-      !!rerunState.activeRerunSuiteUid &&
-      rerunState.activeRerunSuiteUid !== incoming.uid
-    const finalSuites =
-      incoming.state === 'pending' && mergedSuites && !isChildRerun
-        ? mergedSuites.map((s) =>
-            s.state === 'passed' || s.state === 'failed'
-              ? { ...s, state: 'pending' as const, end: undefined }
-              : s
-          )
-        : mergedSuites
-
-    return {
-      ...existing,
-      ...incomingProps,
-      ...(keepRunningState && hasInProgressChildren
-        ? { state: 'running' as const }
-        : incomingStateIsPendingOrUnset &&
-            !hasInProgressChildren &&
-            derivedCompletedState
-          ? { state: derivedCompletedState }
-          : {}),
-      tests: mergedTests,
-      suites: finalSuites
-    }
-  }
-
-  /**
-   * Build a stable identity key for a test/suite that survives reporter UID drift
-   * across reruns. The reporter's signature counter can reassign UIDs when a
-   * single scenario is rerun (e.g. Cucumber outline example 2 reruns alone and
-   * gets the UID example 1 originally had). Matching by (file + featureLine +
-   * fullTitle) lets the merge dedupe by stable identity instead of the unstable
-   * uid.
-   */
-  #canonicalKey(
-    item: TestStatsFragment | SuiteStatsFragment
-  ): string | undefined {
-    const file = item.file ?? ''
-    const featureFile = item.featureFile ?? ''
-    const featureLine = item.featureLine ?? ''
-    const fullTitle = item.fullTitle ?? item.title ?? ''
-    if (!file && !featureFile && !fullTitle) {
-      return undefined
-    }
-    return `${file}::${featureFile}:${featureLine}::${fullTitle}`
-  }
-
-  /**
-   * Map an incoming item's uid to an existing entry's uid when their canonical
-   * keys match. Lets rerun payloads merge into the original rows even if the
-   * reporter assigned a different uid this time around.
-   */
-  #canonicalizeUids<T extends TestStatsFragment | SuiteStatsFragment>(
-    prev: T[],
-    next: T[]
-  ): T[] {
-    if (!next.length || !prev.length) {
-      return next
-    }
-    const canonicalToUid = new Map<string, string>()
-    for (const item of prev) {
-      if (!item) {
-        continue
-      }
-      const key = this.#canonicalKey(item)
-      if (key && !canonicalToUid.has(key)) {
-        canonicalToUid.set(key, item.uid)
-      }
-    }
-    return next.map((item) => {
-      if (!item) {
-        return item
-      }
-      const key = this.#canonicalKey(item)
-      if (!key) {
-        return item
-      }
-      const stableUid = canonicalToUid.get(key)
-      if (stableUid && stableUid !== item.uid) {
-        return { ...item, uid: stableUid }
-      }
-      return item
-    })
-  }
-
-  #mergeChildSuites(
-    prev: SuiteStatsFragment[] = [],
-    next: SuiteStatsFragment[] = []
-  ) {
-    const map = new Map<string, SuiteStatsFragment>()
-    prev?.forEach((suite) => suite && map.set(suite.uid, suite))
-
-    const canonicalizedNext = this.#canonicalizeUids(prev || [], next || [])
-
-    canonicalizedNext.forEach((suite) => {
-      if (!suite) {
-        return
-      }
-      const existing = map.get(suite.uid)
-      map.set(suite.uid, existing ? this.#mergeSuite(existing, suite) : suite)
-    })
-
-    return Array.from(map.values())
-  }
-
-  #mergeTests(prev: TestStatsFragment[] = [], next: TestStatsFragment[] = []) {
-    const map = new Map<string, TestStatsFragment>()
-    prev?.forEach((test) => test && map.set(test.uid, test))
-
-    const canonicalizedNext = this.#canonicalizeUids(prev || [], next || [])
-
-    canonicalizedNext.forEach((test) => {
-      if (!test) {
-        return
-      }
-      const existing = map.get(test.uid)
-      const activeTargetUid = this.#activeRerunTestUid
-
-      // During a single-test rerun, keep all sibling tests frozen exactly as
-      // they were before the rerun started. The backend can still emit suite-
-      // wide updates for those siblings, but the UI should only change the
-      // targeted test and its parent suite state.
-      if (activeTargetUid && test.uid !== activeTargetUid && existing) {
-        map.set(test.uid, { ...existing })
-        return
-      }
-
-      // Check if this test is a rerun (different start time)
-      const isRerun =
-        existing &&
-        test.start &&
-        existing.start &&
-        getTimestamp(test.start) !== getTimestamp(existing.start)
-
-      if (activeTargetUid && isRerun && test.state === 'pending' && existing) {
-        // The incoming suite structure marks all tests as "pending" at start.
-        // Preserve the ENTIRE existing record (including its old start time) so
-        // that tests not part of the current rerun keep their previous results.
-        // Crucially, keeping `existing.start` (the old run's timestamp) means
-        // every subsequent update for this test during the new run still has a
-        // different start time and therefore continues to be detected as a
-        // rerun — preventing a later normal-merge from overwriting state/end.
-        // When the test actually starts executing its state changes to "running"
-        // (non-pending), which falls through to the replace branch below.
-        map.set(test.uid, { ...existing })
-        return
-      }
-
-      // Replace on rerun (non-pending incoming), merge on normal update
-      map.set(
-        test.uid,
-        isRerun ? test : existing ? { ...existing, ...test } : test
-      )
-    })
-
-    return Array.from(map.values())
-  }
-
   loadTraceFile(traceFile: TraceLog) {
     localStorage.setItem(CACHE_ID, JSON.stringify(traceFile))
-    this.mutationsContextProvider.setValue(traceFile.mutations)
+    this.mutationsContextProvider.setValue(
+      traceFile.mutations as TraceMutation[]
+    )
     this.logsContextProvider.setValue(traceFile.logs)
     this.consoleLogsContextProvider.setValue(traceFile.consoleLogs)
     this.networkRequestsContextProvider.setValue(
diff --git a/packages/app/src/controller/context.ts b/packages/app/src/controller/context.ts
index 27fe9373..58979892 100644
--- a/packages/app/src/controller/context.ts
+++ b/packages/app/src/controller/context.ts
@@ -3,7 +3,7 @@ import type {
   Metadata,
   CommandLog,
   PreservedAttempt
-} from '@wdio/devtools-service/types'
+} from '@wdio/devtools-shared'
 import type { SuiteStatsFragment } from './types.js'
 
 export const mutationContext = createContext<TraceMutation[]>(
diff --git a/packages/app/src/controller/mark-running.ts b/packages/app/src/controller/mark-running.ts
new file mode 100644
index 00000000..34b6db63
--- /dev/null
+++ b/packages/app/src/controller/mark-running.ts
@@ -0,0 +1,198 @@
+import type { SuiteStatsFragment, TestStatsFragment } from './types.js'
+
+/**
+ * Pure tree transforms that mark a suite/test as "running" on rerun start.
+ * Lifted out of DataManagerController so they're testable and the controller
+ * method stays a thin wrapper around the context-provider read/write.
+ */
+
+type SuiteChunks = Array<Record<string, SuiteStatsFragment>>
+
+/**
+ * Mark every suite (and its descendants) as running. Used when the user
+ * clicks the global "TESTS" rerun (uid='*'). Leaf-level tests are cleared so
+ * stale step entries from a previous run don't linger; the new run will
+ * repopulate them. Child suites are preserved so the tree structure stays
+ * visible during the rerun.
+ */
+export function markAllRunning(suites: SuiteChunks): SuiteChunks {
+  const markAllAsRunning = (s: SuiteStatsFragment): SuiteStatsFragment => ({
+    ...s,
+    state: 'running',
+    start: new Date(),
+    end: undefined,
+    tests: [] as TestStatsFragment[],
+    suites: s.suites?.map(markAllAsRunning) || []
+  })
+
+  return suites.map((chunk) => {
+    const updatedChunk: Record<string, SuiteStatsFragment> = {}
+    Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
+      ([suiteUid, suite]) => {
+        if (!suite) {
+          updatedChunk[suiteUid] = suite
+          return
+        }
+        updatedChunk[suiteUid] = markAllAsRunning(suite)
+      }
+    )
+    return updatedChunk
+  })
+}
+
+/**
+ * Mark a specific suite OR test as running by walking the tree:
+ *  - When `entryType !== 'test'` and a suite matches by uid, mark that suite
+ *    AND ALL its descendants as running (full feature/scenario rerun).
+ *  - When `entryType === 'test'` and a test matches by uid, mark just that
+ *    test pending (start=now, end=undefined). Parent suites get state:
+ *    'running' marked on the matched path but their start/end are preserved
+ *    if already running so re-clicking a child doesn't reset the feature's
+ *    run timestamp.
+ */
+export function markSpecificRunning(
+  suites: SuiteChunks,
+  uid: string,
+  entryType: 'suite' | 'test' | undefined
+): SuiteChunks {
+  return suites.map((chunk) => {
+    const updatedChunk: Record<string, SuiteStatsFragment> = {}
+    Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
+      ([suiteUid, suite]) => {
+        if (!suite) {
+          updatedChunk[suiteUid] = suite
+          return
+        }
+
+        const markAsRunning = (
+          s: SuiteStatsFragment
+        ): { suite: SuiteStatsFragment; matched: boolean } => {
+          const runStart = new Date()
+
+          if (entryType !== 'test' && s.uid === uid) {
+            const markSuiteTreeAsRunning = (
+              suiteNode: SuiteStatsFragment
+            ): SuiteStatsFragment => ({
+              ...suiteNode,
+              state: 'running',
+              start: runStart,
+              end: undefined,
+              tests: [] as TestStatsFragment[],
+              suites: suiteNode.suites?.map(markSuiteTreeAsRunning) || []
+            })
+            return { matched: true, suite: markSuiteTreeAsRunning(s) }
+          }
+
+          let matched = false
+          const updatedTests = (s.tests?.map((test) => {
+            if (test.uid === uid) {
+              matched = true
+              return {
+                ...test,
+                state: 'pending',
+                start: new Date(),
+                end: undefined
+              }
+            }
+            return test
+          }) ?? []) as TestStatsFragment[]
+
+          const updatedNestedSuites =
+            s.suites?.map((nestedSuite) => {
+              const nestedResult = markAsRunning(nestedSuite)
+              if (nestedResult.matched) {
+                matched = true
+              }
+              return nestedResult.suite
+            }) || []
+
+          return {
+            matched,
+            suite: {
+              ...s,
+              ...(matched
+                ? {
+                    state: 'running' as const,
+                    // Preserve parent's start/end if already running —
+                    // subsequent child-scenario marks would otherwise reset
+                    // the feature's original run timestamp.
+                    ...(s.state !== 'running'
+                      ? { start: runStart, end: undefined }
+                      : {})
+                  }
+                : {}),
+              tests: updatedTests || [],
+              suites: updatedNestedSuites
+            }
+          }
+        }
+
+        updatedChunk[suiteUid] = markAsRunning(suite).suite
+      }
+    )
+    return updatedChunk
+  })
+}
+
+/**
+ * Mark every still-running test (no `end`) as failed. Used when the user
+ * manually stops the run from the dashboard — without this, suites with
+ * `state: 'running'` would keep showing their spinner indefinitely.
+ *
+ * The suite's state is derived from its updated children: if any child is
+ * failed (or the suite itself was 'running' with no live children left),
+ * the suite ends up failed. Otherwise the existing state is preserved.
+ */
+export function markRunningAsStopped(suites: SuiteChunks): SuiteChunks {
+  const updateSuite = (s: SuiteStatsFragment): SuiteStatsFragment => {
+    const updatedTests = s.tests?.map((test): TestStatsFragment => {
+      if (test && !test.end) {
+        return {
+          ...test,
+          end: new Date(),
+          state: 'failed',
+          error: {
+            message: 'Test execution stopped',
+            name: 'TestStoppedError'
+          }
+        }
+      }
+      return test
+    })
+
+    const updatedNestedSuites = s.suites?.map(updateSuite)
+
+    const allTests = [...(updatedTests || []), ...(updatedNestedSuites || [])]
+    const hasFailed = allTests.some((t) => t?.state === 'failed')
+    const hasRunning = allTests.some((t) => !t?.end)
+    const derivedState: SuiteStatsFragment['state'] = hasRunning
+      ? s.state
+      : hasFailed
+        ? 'failed'
+        : s.state === 'running'
+          ? 'failed'
+          : s.state
+
+    return {
+      ...s,
+      state: derivedState,
+      ...(!hasRunning && !s.end ? { end: new Date() } : {}),
+      tests: updatedTests || [],
+      suites: updatedNestedSuites || []
+    }
+  }
+
+  return suites.map((chunk) => {
+    const updatedChunk: Record<string, SuiteStatsFragment> = {}
+    Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
+      ([uid, suite]) => {
+        if (!suite) {
+          updatedChunk[uid] = suite
+          return
+        }
+        updatedChunk[uid] = updateSuite(suite)
+      }
+    )
+    return updatedChunk
+  })
+}
diff --git a/packages/app/src/controller/run-detection.ts b/packages/app/src/controller/run-detection.ts
new file mode 100644
index 00000000..e8a5d92f
--- /dev/null
+++ b/packages/app/src/controller/run-detection.ts
@@ -0,0 +1,108 @@
+import { getTimestamp } from '../utils/helpers.js'
+import type { SuiteStatsFragment } from './types.js'
+
+type SuiteChunks = Array<Record<string, SuiteStatsFragment>>
+
+export interface RunDetectionState {
+  /** Highest start-timestamp seen so far across any incoming suite. */
+  lastSeenRunTimestamp: number
+  /** Active feature/scenario rerun (set by clearExecutionData). Presence
+   *  suppresses new-run auto-detection so sibling updates don't wipe data. */
+  activeRerunSuiteUid: string | undefined
+}
+
+export interface RunDetectionResult {
+  /** True if the incoming payload signals a fresh test run — caller should
+   *  reset the execution-data context providers. */
+  shouldReset: boolean
+  /** Updated `lastSeenRunTimestamp` value the caller should write back. */
+  newLastSeenTimestamp: number
+}
+
+/**
+ * Decide whether an incoming `suites` payload represents a new run that
+ * should wipe accumulated execution data.
+ *
+ * Rules (in order):
+ *  1. If a UI-triggered rerun is active (`activeRerunSuiteUid` set), never
+ *     auto-reset — siblings under the same feature would lose state. The
+ *     timestamp tracker still advances so the post-rerun final update isn't
+ *     mistakenly treated as a new run.
+ *  2. If we see a suite whose start-timestamp is newer than anything
+ *     previously seen AND the existing suite for that uid is finished
+ *     (has an `end`), it's a brand-new run → reset.
+ *  3. If the existing suite has no `end`, it's an ongoing run (e.g. a
+ *     cucumber feature spanning multiple scenarios) — continuation, no reset.
+ *
+ * Pure: no `this`. Pass state in, write the returned timestamp back.
+ */
+export function shouldResetForNewRun(
+  data: unknown,
+  state: RunDetectionState,
+  existingChunks: SuiteChunks
+): RunDetectionResult {
+  let lastSeen = state.lastSeenRunTimestamp
+
+  const payloads = Array.isArray(data)
+    ? (data as Record<string, SuiteStatsFragment>[])
+    : ([data] as Record<string, SuiteStatsFragment>[])
+
+  if (state.activeRerunSuiteUid) {
+    for (const chunk of payloads) {
+      if (!chunk) {
+        continue
+      }
+      for (const suite of Object.values(chunk)) {
+        if (!suite?.start) {
+          continue
+        }
+        const t = getTimestamp(
+          suite.start as Date | number | string | undefined
+        )
+        if (t > lastSeen) {
+          lastSeen = t
+        }
+      }
+    }
+    return { shouldReset: false, newLastSeenTimestamp: lastSeen }
+  }
+
+  for (const chunk of payloads) {
+    if (!chunk) {
+      continue
+    }
+    for (const suite of Object.values(chunk)) {
+      if (!suite?.start) {
+        continue
+      }
+      const suiteStartTime = getTimestamp(
+        suite.start as Date | number | string | undefined
+      )
+      if (suiteStartTime <= 0) {
+        continue
+      }
+      if (suiteStartTime > lastSeen) {
+        let existingEnd: unknown = undefined
+        outer: for (const ec of existingChunks) {
+          for (const [uid, existing] of Object.entries(ec)) {
+            if (uid === Object.keys(chunk)[0]) {
+              existingEnd = existing?.end
+              break outer
+            }
+          }
+        }
+        const previousRunFinished =
+          existingEnd !== null && existingEnd !== undefined
+        if (previousRunFinished) {
+          return {
+            shouldReset: true,
+            newLastSeenTimestamp: suiteStartTime
+          }
+        }
+        // Continuation — update tracking timestamp but do NOT reset
+        lastSeen = suiteStartTime
+      }
+    }
+  }
+  return { shouldReset: false, newLastSeenTimestamp: lastSeen }
+}
diff --git a/packages/app/src/controller/suite-merge.ts b/packages/app/src/controller/suite-merge.ts
new file mode 100644
index 00000000..cf4174b0
--- /dev/null
+++ b/packages/app/src/controller/suite-merge.ts
@@ -0,0 +1,266 @@
+import { getTimestamp } from '../utils/helpers.js'
+import type { SuiteStatsFragment, TestStatsFragment } from './types.js'
+
+/**
+ * Pure suite-tree merge logic, lifted out of DataManagerController to keep it
+ * testable and to drop ~280 lines from the controller class. The functions
+ * take rerun-state explicitly via {@link MergeContext} so they don't depend on
+ * module-level mutable state.
+ */
+export interface MergeContext {
+  /** Set during a single-test rerun — siblings should stay frozen at their
+   *  pre-rerun state. */
+  activeRerunTestUid?: string
+  /** Set during a feature/scenario rerun — used to detect "child rerun" so
+   *  sibling scenarios under the same feature aren't optimistically flipped
+   *  back to 'pending' when the feature suite re-emits with state='pending'. */
+  activeRerunSuiteUid?: string
+}
+
+/**
+ * Stable identity key for a test/suite that survives reporter UID drift
+ * across reruns. The reporter's signature counter can reassign UIDs when a
+ * single scenario is rerun (e.g. Cucumber outline example 2 reruns alone and
+ * gets the UID example 1 originally had). Matching by (file + featureLine +
+ * fullTitle) lets the merge dedupe by stable identity instead of the unstable
+ * uid.
+ */
+export function canonicalKey(
+  item: TestStatsFragment | SuiteStatsFragment
+): string | undefined {
+  const file = item.file ?? ''
+  const featureFile = item.featureFile ?? ''
+  const featureLine = item.featureLine ?? ''
+  const fullTitle = item.fullTitle ?? item.title ?? ''
+  if (!file && !featureFile && !fullTitle) {
+    return undefined
+  }
+  return `${file}::${featureFile}:${featureLine}::${fullTitle}`
+}
+
+/**
+ * Rewrite each incoming item's uid to the matching existing entry's uid when
+ * their canonical keys match. Lets rerun payloads merge into the original
+ * rows even if the reporter assigned a different uid this time around.
+ */
+export function canonicalizeUids<
+  T extends TestStatsFragment | SuiteStatsFragment
+>(prev: T[], next: T[]): T[] {
+  if (!next.length || !prev.length) {
+    return next
+  }
+  const canonicalToUid = new Map<string, string>()
+  for (const item of prev) {
+    if (!item) {
+      continue
+    }
+    const key = canonicalKey(item)
+    if (key && !canonicalToUid.has(key)) {
+      canonicalToUid.set(key, item.uid)
+    }
+  }
+  return next.map((item) => {
+    if (!item) {
+      return item
+    }
+    const key = canonicalKey(item)
+    if (!key) {
+      return item
+    }
+    const stableUid = canonicalToUid.get(key)
+    if (stableUid && stableUid !== item.uid) {
+      return { ...item, uid: stableUid }
+    }
+    return item
+  })
+}
+
+export function mergeTests(
+  prev: TestStatsFragment[] = [],
+  next: TestStatsFragment[] = [],
+  ctx: MergeContext
+): TestStatsFragment[] {
+  const map = new Map<string, TestStatsFragment>()
+  prev?.forEach((test) => test && map.set(test.uid, test))
+
+  const canonicalizedNext = canonicalizeUids(prev || [], next || [])
+
+  canonicalizedNext.forEach((test) => {
+    if (!test) {
+      return
+    }
+    const existing = map.get(test.uid)
+    const activeTargetUid = ctx.activeRerunTestUid
+
+    // During a single-test rerun, keep all sibling tests frozen exactly as
+    // they were before the rerun started. The backend can still emit suite-
+    // wide updates for those siblings, but the UI should only change the
+    // targeted test and its parent suite state.
+    if (activeTargetUid && test.uid !== activeTargetUid && existing) {
+      map.set(test.uid, { ...existing })
+      return
+    }
+
+    // Check if this test is a rerun (different start time)
+    const isRerun =
+      existing &&
+      test.start &&
+      existing.start &&
+      getTimestamp(test.start) !== getTimestamp(existing.start)
+
+    if (activeTargetUid && isRerun && test.state === 'pending' && existing) {
+      // The incoming suite structure marks all tests as "pending" at start.
+      // Preserve the ENTIRE existing record (including its old start time) so
+      // that tests not part of the current rerun keep their previous results.
+      // Crucially, keeping `existing.start` (the old run's timestamp) means
+      // every subsequent update for this test during the new run still has a
+      // different start time and therefore continues to be detected as a
+      // rerun — preventing a later normal-merge from overwriting state/end.
+      // When the test actually starts executing its state changes to "running"
+      // (non-pending), which falls through to the replace branch below.
+      map.set(test.uid, { ...existing })
+      return
+    }
+
+    // Replace on rerun (non-pending incoming), merge on normal update
+    map.set(
+      test.uid,
+      isRerun ? test : existing ? { ...existing, ...test } : test
+    )
+  })
+
+  return Array.from(map.values())
+}
+
+export function mergeChildSuites(
+  prev: SuiteStatsFragment[] = [],
+  next: SuiteStatsFragment[] = [],
+  ctx: MergeContext
+): SuiteStatsFragment[] {
+  const map = new Map<string, SuiteStatsFragment>()
+  prev?.forEach((suite) => suite && map.set(suite.uid, suite))
+
+  const canonicalizedNext = canonicalizeUids(prev || [], next || [])
+
+  canonicalizedNext.forEach((suite) => {
+    if (!suite) {
+      return
+    }
+    const existing = map.get(suite.uid)
+    map.set(suite.uid, existing ? mergeSuite(existing, suite, ctx) : suite)
+  })
+
+  return Array.from(map.values())
+}
+
+export function mergeSuite(
+  existing: SuiteStatsFragment,
+  incoming: SuiteStatsFragment,
+  ctx: MergeContext
+): SuiteStatsFragment {
+  // First merge tests and suites properly
+  const mergedTests = mergeTests(existing.tests, incoming.tests, ctx)
+  const mergedSuites = mergeChildSuites(existing.suites, incoming.suites, ctx)
+
+  // Then merge suite properties, ensuring merged tests/suites are preserved
+  const { tests, suites, ...incomingProps } = incoming
+  void tests
+  void suites
+
+  // Strip undefined state from incoming so it doesn't overwrite a valid existing state.
+  // The Nightwatch reporter may send suites without a state field when the JSON
+  // serialization omits properties that are undefined on the object.
+  if (incomingProps.state === undefined || incomingProps.state === null) {
+    delete (incomingProps as Partial<SuiteStatsFragment>).state
+  }
+
+  // Treat incoming state=undefined/null the same as pending — WDIO's SuiteStats
+  // doesn't set 'state' on suite end (unlike TestStats), so undefined means the
+  // backend hasn't assigned a terminal state. Null is the Nightwatch equivalent.
+  const incomingStateIsPendingOrUnset =
+    incoming.state === 'pending' ||
+    incoming.state === null ||
+    incoming.state === undefined
+
+  const allChildren = [...(mergedTests || []), ...(mergedSuites || [])]
+  // Treat children with undefined/null state as in-progress (not yet terminal).
+  // This prevents prematurely deriving 'passed' when children haven't reported yet.
+  const hasInProgressChildren = allChildren.some(
+    (child) =>
+      child?.state === 'running' ||
+      child?.state === 'pending' ||
+      child?.state === null
+  )
+  const hasFailedChildren = allChildren.some(
+    (child) => child?.state === 'failed'
+  )
+  const hasChildren = allChildren.length > 0
+
+  // Only derive 'passed' when ALL children have reached a terminal state.
+  const allChildrenTerminal =
+    hasChildren &&
+    allChildren.every(
+      (child) =>
+        child?.state === 'passed' ||
+        child?.state === 'failed' ||
+        child?.state === 'skipped'
+    )
+
+  // On rerun start we optimistically mark the suite as running in the UI.
+  // Keep (or set) running state whenever the incoming state is unset/pending
+  // AND children are still in-progress. This handles both:
+  //   • Nightwatch: suite was already 'running' → keep it running
+  //   • WDIO: suite was 'passed' from previous run but now has running children
+  //     (WDIO SuiteStats never carries an explicit state, so the previous
+  //     derivedCompletedState='passed' would otherwise be silently preserved)
+  const keepRunningState =
+    incomingStateIsPendingOrUnset && hasInProgressChildren
+
+  // Only derive 'passed'/'failed' from children when the backend hasn't
+  // assigned an explicit state (WDIO case: SuiteStats.state is never set on
+  // suite end). When state is explicitly 'pending' the backend is signalling
+  // a new run is starting — stale children from the previous run must not
+  // be used to derive a completed state.
+  const incomingStateIsUnset =
+    incoming.state === null || incoming.state === undefined
+
+  const derivedCompletedState: SuiteStatsFragment['state'] | undefined =
+    allChildrenTerminal && incomingStateIsUnset
+      ? hasFailedChildren
+        ? 'failed'
+        : 'passed'
+      : undefined
+
+  // When a new run starts the backend sends the feature suite with
+  // state: 'pending' before it has pushed any scenario children.
+  // mergeChildSuites preserves stale child suites from the previous run,
+  // but they must not keep their terminal states — mark them 'pending' so
+  // they render as a spinner instead of a stale checkmark/cross.
+  // Exception: when only a specific child scenario is being rerun
+  // (activeRerunSuiteUid differs from the incoming feature suite's uid),
+  // sibling scenarios must keep their existing terminal states.
+  const isChildRerun =
+    !!ctx.activeRerunSuiteUid && ctx.activeRerunSuiteUid !== incoming.uid
+  const finalSuites =
+    incoming.state === 'pending' && mergedSuites && !isChildRerun
+      ? mergedSuites.map((s) =>
+          s.state === 'passed' || s.state === 'failed'
+            ? { ...s, state: 'pending' as const, end: undefined }
+            : s
+        )
+      : mergedSuites
+
+  return {
+    ...existing,
+    ...incomingProps,
+    ...(keepRunningState && hasInProgressChildren
+      ? { state: 'running' as const }
+      : incomingStateIsPendingOrUnset &&
+          !hasInProgressChildren &&
+          derivedCompletedState
+        ? { state: derivedCompletedState }
+        : {}),
+    tests: mergedTests,
+    suites: finalSuites
+  }
+}
diff --git a/packages/app/src/controller/types.ts b/packages/app/src/controller/types.ts
index 02d6e085..d789b957 100644
--- a/packages/app/src/controller/types.ts
+++ b/packages/app/src/controller/types.ts
@@ -1,13 +1,15 @@
 import type { SuiteStats, TestStats } from '@wdio/reporter'
 import type {
   TraceLog,
-  CommandLog,
-  PreservedAttempt
-} from '@wdio/devtools-service/types'
+  TestStatus,
+  BaselineSavedWsPayload,
+  BaselineClearedWsPayload,
+  ReplaceCommandWsPayload
+} from '@wdio/devtools-shared'
 
 export type TestStatsFragment = Omit<Partial<TestStats>, 'uid' | 'state'> & {
   uid: string
-  state?: 'running' | 'passed' | 'failed' | 'pending' | 'skipped'
+  state?: TestStatus
   callSource?: string
   featureFile?: string
   featureLine?: number
@@ -18,7 +20,7 @@ export type SuiteStatsFragment = Omit<
   'uid' | 'tests' | 'suites'
 > & {
   uid: string
-  state?: 'running' | 'passed' | 'failed' | 'pending'
+  state?: TestStatus
   tests?: TestStatsFragment[]
   suites?: SuiteStatsFragment[]
   callSource?: string
@@ -53,10 +55,10 @@ export interface SocketMessage<
           clearSuiteTree?: boolean
         }
       : T extends 'replaceCommand'
-        ? { oldTimestamp: number; command: CommandLog }
+        ? ReplaceCommandWsPayload
         : T extends 'baseline:saved'
-          ? { testUid: string; attempt: PreservedAttempt }
+          ? BaselineSavedWsPayload
           : T extends 'baseline:cleared'
-            ? { testUid: string }
+            ? BaselineClearedWsPayload
             : unknown
 }
diff --git a/packages/app/tests/mark-running.test.ts b/packages/app/tests/mark-running.test.ts
new file mode 100644
index 00000000..badfb80f
--- /dev/null
+++ b/packages/app/tests/mark-running.test.ts
@@ -0,0 +1,195 @@
+import { describe, it, expect } from 'vitest'
+
+import {
+  markAllRunning,
+  markSpecificRunning,
+  markRunningAsStopped
+} from '../src/controller/mark-running.js'
+import type {
+  SuiteStatsFragment,
+  TestStatsFragment
+} from '../src/controller/types.js'
+
+type SuiteChunks = Array<Record<string, SuiteStatsFragment>>
+
+const test = (
+  uid: string,
+  overrides: Record<string, unknown> = {}
+): TestStatsFragment =>
+  ({
+    uid,
+    title: uid,
+    fullTitle: uid,
+    state: 'passed',
+    start: new Date(2026, 0, 1),
+    end: new Date(2026, 0, 2),
+    ...overrides
+  }) as never as TestStatsFragment
+
+const suite = (
+  uid: string,
+  overrides: Record<string, unknown> = {}
+): SuiteStatsFragment =>
+  ({
+    uid,
+    title: uid,
+    fullTitle: uid,
+    state: 'passed',
+    start: new Date(2026, 0, 1),
+    end: new Date(2026, 0, 2),
+    tests: [],
+    suites: [],
+    ...overrides
+  }) as never as SuiteStatsFragment
+
+const chunks = (...suites: SuiteStatsFragment[]): SuiteChunks =>
+  suites.map((s) => ({ [s.uid]: s }))
+
+describe('markAllRunning', () => {
+  it('marks the root suite and all descendants as running, clearing leaf tests', () => {
+    const input = chunks(
+      suite('root', {
+        tests: [test('t1'), test('t2')],
+        suites: [
+          suite('child', {
+            tests: [test('c1', { state: 'failed' })]
+          })
+        ]
+      })
+    )
+    const out = markAllRunning(input)
+    const root = out[0].root
+    expect(root.state).toBe('running')
+    expect(root.end).toBeUndefined()
+    expect(root.tests).toEqual([])
+    expect(root.suites?.[0]?.state).toBe('running')
+    expect(root.suites?.[0]?.tests).toEqual([])
+  })
+
+  it('skips null/undefined suite entries without throwing', () => {
+    const input = chunks(suite('a'))
+    // Inject an undefined entry — markAllRunning must preserve it.
+    ;(input[0] as Record<string, unknown>)['ghost'] = undefined
+    const out = markAllRunning(input)
+    expect(out[0].ghost).toBeUndefined()
+    expect(out[0].a.state).toBe('running')
+  })
+})
+
+describe('markSpecificRunning', () => {
+  it('marks a matched suite subtree as running when entryType is suite', () => {
+    const input = chunks(
+      suite('root', {
+        suites: [suite('target'), suite('sibling', { state: 'failed' })]
+      })
+    )
+    const out = markSpecificRunning(input, 'target', 'suite')
+    const root = out[0].root
+    const target = root.suites?.find((s) => s.uid === 'target')
+    const sibling = root.suites?.find((s) => s.uid === 'sibling')
+    expect(target?.state).toBe('running')
+    expect(target?.end).toBeUndefined()
+    expect(sibling?.state).toBe('failed') // untouched
+  })
+
+  it('marks a matched test as pending and only flips parent suite state', () => {
+    const input = chunks(
+      suite('root', {
+        state: 'passed',
+        tests: [test('t1'), test('t2', { state: 'failed' })]
+      })
+    )
+    const out = markSpecificRunning(input, 't1', 'test')
+    const root = out[0].root
+    const t1 = root.tests?.find((t) => t.uid === 't1')
+    const t2 = root.tests?.find((t) => t.uid === 't2')
+    expect(t1?.state).toBe('pending')
+    expect(t1?.end).toBeUndefined()
+    expect(t2?.state).toBe('failed') // untouched
+    expect(root.state).toBe('running')
+  })
+
+  it("preserves a parent suite's running start/end on a second child match", () => {
+    const originalStart = new Date(2026, 0, 1)
+    const input = chunks(
+      suite('root', {
+        state: 'running',
+        start: originalStart,
+        end: undefined,
+        tests: [test('t1', { state: 'pending' })]
+      })
+    )
+    const out = markSpecificRunning(input, 't1', 'test')
+    expect(out[0].root.start).toEqual(originalStart) // not reset
+  })
+
+  it('returns the suite unchanged when no descendant matches', () => {
+    const input = chunks(
+      suite('root', {
+        state: 'passed',
+        tests: [test('t1')]
+      })
+    )
+    const out = markSpecificRunning(input, 'no-such-uid', 'test')
+    expect(out[0].root.state).toBe('passed')
+    expect(out[0].root.tests?.[0]?.state).toBe('passed')
+  })
+})
+
+describe('markRunningAsStopped', () => {
+  it('marks running tests (no end) as failed with a TestStoppedError', () => {
+    const input = chunks(
+      suite('root', {
+        tests: [test('t1', { state: 'running', end: null })]
+      })
+    )
+    const out = markRunningAsStopped(input)
+    const t1 = out[0].root.tests?.[0]
+    expect(t1?.state).toBe('failed')
+    expect(t1?.error?.name).toBe('TestStoppedError')
+    expect(t1?.end).toBeInstanceOf(Date)
+  })
+
+  it('leaves already-terminal tests untouched', () => {
+    const input = chunks(
+      suite('root', {
+        tests: [test('t1', { state: 'passed' })]
+      })
+    )
+    const out = markRunningAsStopped(input)
+    expect(out[0].root.tests?.[0]?.state).toBe('passed')
+    expect(out[0].root.tests?.[0]?.error).toBeUndefined()
+  })
+
+  it('derives suite state="failed" when no terminal children remain after stop', () => {
+    const input = chunks(
+      suite('root', {
+        state: 'running',
+        end: null,
+        tests: [test('t1', { state: 'running', end: null })]
+      })
+    )
+    const out = markRunningAsStopped(input)
+    expect(out[0].root.state).toBe('failed')
+    expect(out[0].root.end).toBeInstanceOf(Date)
+  })
+
+  it('recurses into nested suites', () => {
+    const input = chunks(
+      suite('root', {
+        state: 'running',
+        end: null,
+        suites: [
+          suite('child', {
+            state: 'running',
+            end: null,
+            tests: [test('c1', { state: 'running', end: null })]
+          })
+        ]
+      })
+    )
+    const out = markRunningAsStopped(input)
+    expect(out[0].root.suites?.[0]?.state).toBe('failed')
+    expect(out[0].root.suites?.[0]?.tests?.[0]?.state).toBe('failed')
+  })
+})
diff --git a/packages/app/tests/run-detection.test.ts b/packages/app/tests/run-detection.test.ts
new file mode 100644
index 00000000..10037e22
--- /dev/null
+++ b/packages/app/tests/run-detection.test.ts
@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest'
+
+import {
+  shouldResetForNewRun,
+  type RunDetectionState
+} from '../src/controller/run-detection.js'
+import type { SuiteStatsFragment } from '../src/controller/types.js'
+
+type SuiteChunks = Array<Record<string, SuiteStatsFragment>>
+
+const state = (
+  overrides: Partial<RunDetectionState> = {}
+): RunDetectionState => ({
+  lastSeenRunTimestamp: 0,
+  activeRerunSuiteUid: undefined,
+  ...overrides
+})
+
+const suite = (
+  uid: string,
+  overrides: Record<string, unknown> = {}
+): SuiteStatsFragment =>
+  ({
+    uid,
+    title: uid,
+    fullTitle: uid,
+    state: 'passed',
+    start: new Date(2026, 0, 1, 10, 0, 0),
+    end: new Date(2026, 0, 1, 10, 5, 0),
+    tests: [],
+    suites: [],
+    ...overrides
+  }) as never as SuiteStatsFragment
+
+const chunks = (...suites: SuiteStatsFragment[]): SuiteChunks =>
+  suites.map((s) => ({ [s.uid]: s }))
+
+describe('shouldResetForNewRun', () => {
+  it('returns false when an active rerun is in progress', () => {
+    const incoming = chunks(suite('root', { start: new Date(2026, 0, 2) }))
+    const existing = chunks(suite('root'))
+    const result = shouldResetForNewRun(
+      incoming,
+      state({ activeRerunSuiteUid: 'root' }),
+      existing
+    )
+    expect(result.shouldReset).toBe(false)
+    // Tracker still advances so the post-rerun final update isn't mis-detected.
+    expect(result.newLastSeenTimestamp).toBeGreaterThan(0)
+  })
+
+  it('returns true when a newer start arrives AND the previous run was finished', () => {
+    const oldStart = new Date(2026, 0, 1, 10, 0, 0).getTime()
+    const incoming = chunks(
+      suite('root', { start: new Date(2026, 0, 1, 11, 0, 0) })
+    )
+    const existing = chunks(
+      suite('root', { end: new Date(2026, 0, 1, 10, 30, 0) })
+    )
+    const result = shouldResetForNewRun(
+      incoming,
+      state({ lastSeenRunTimestamp: oldStart }),
+      existing
+    )
+    expect(result.shouldReset).toBe(true)
+  })
+
+  it('treats an ongoing previous run as a continuation (no reset)', () => {
+    const oldStart = new Date(2026, 0, 1, 10, 0, 0).getTime()
+    const incoming = chunks(
+      suite('root', { start: new Date(2026, 0, 1, 11, 0, 0) })
+    )
+    // Existing root has no `end` → still running (e.g. cucumber feature
+    // spanning multiple scenarios).
+    const existing = chunks(suite('root', { end: undefined }))
+    const result = shouldResetForNewRun(
+      incoming,
+      state({ lastSeenRunTimestamp: oldStart }),
+      existing
+    )
+    expect(result.shouldReset).toBe(false)
+    // Timestamp still advances.
+    expect(result.newLastSeenTimestamp).toBeGreaterThan(oldStart)
+  })
+
+  it('returns false when no start timestamp is present', () => {
+    const incoming = chunks(suite('root', { start: undefined }))
+    const result = shouldResetForNewRun(incoming, state(), [])
+    expect(result.shouldReset).toBe(false)
+  })
+
+  it('handles array-wrapped and single-chunk payloads identically', () => {
+    const existing: SuiteChunks = []
+    const oneChunk = { root: suite('root', { start: new Date(2026, 0, 2) }) }
+    const asSingle = shouldResetForNewRun(oneChunk, state(), existing)
+    const asArray = shouldResetForNewRun([oneChunk], state(), existing)
+    expect(asSingle).toEqual(asArray)
+  })
+
+  it('skips null chunks in the payload', () => {
+    const incoming = [
+      null as unknown as Record<string, SuiteStatsFragment>,
+      { root: suite('root') }
+    ]
+    expect(() => shouldResetForNewRun(incoming, state(), [])).not.toThrow()
+  })
+})
diff --git a/packages/app/tests/suite-merge.test.ts b/packages/app/tests/suite-merge.test.ts
new file mode 100644
index 00000000..3fe23b9b
--- /dev/null
+++ b/packages/app/tests/suite-merge.test.ts
@@ -0,0 +1,260 @@
+import { describe, it, expect } from 'vitest'
+
+import {
+  canonicalKey,
+  canonicalizeUids,
+  mergeTests,
+  mergeChildSuites,
+  mergeSuite,
+  type MergeContext
+} from '../src/controller/suite-merge.js'
+import type {
+  SuiteStatsFragment,
+  TestStatsFragment
+} from '../src/controller/types.js'
+
+const ctx = (override: Partial<MergeContext> = {}): MergeContext => ({
+  activeRerunTestUid: undefined,
+  activeRerunSuiteUid: undefined,
+  ...override
+})
+
+// Tests use `number` start/end values for terseness — the fragment types
+// declare `Date` (from @wdio/reporter), but the merge logic only compares
+// via `getTimestamp` which accepts both shapes. Cast through `as never` to
+// bypass the structural mismatch.
+const test = (
+  uid: string,
+  overrides: Record<string, unknown> = {}
+): TestStatsFragment =>
+  ({
+    uid,
+    title: uid,
+    fullTitle: uid,
+    state: 'passed',
+    start: 1000,
+    end: 2000,
+    ...overrides
+  }) as never as TestStatsFragment
+
+const suite = (
+  uid: string,
+  overrides: Record<string, unknown> = {}
+): SuiteStatsFragment =>
+  ({
+    uid,
+    title: uid,
+    fullTitle: uid,
+    state: 'passed',
+    start: 1000,
+    end: 2000,
+    tests: [],
+    suites: [],
+    ...overrides
+  }) as never as SuiteStatsFragment
+
+describe('canonicalKey', () => {
+  it('builds a stable key from file + featureLine + fullTitle', () => {
+    expect(
+      canonicalKey({
+        uid: 'a',
+        file: '/path/login.feature',
+        featureFile: '/path/login.feature',
+        featureLine: 5,
+        fullTitle: 'logs in'
+      } as TestStatsFragment)
+    ).toBe('/path/login.feature::/path/login.feature:5::logs in')
+  })
+
+  it('returns undefined when there is nothing to key on', () => {
+    expect(canonicalKey({ uid: 'a' } as TestStatsFragment)).toBeUndefined()
+  })
+
+  it('falls back from fullTitle to title', () => {
+    expect(
+      canonicalKey({
+        uid: 'a',
+        file: '/x.ts',
+        title: 'fallback'
+      } as TestStatsFragment)
+    ).toBe('/x.ts:::::fallback')
+  })
+})
+
+describe('canonicalizeUids', () => {
+  it('rewrites incoming uid to existing uid when canonical keys match', () => {
+    const prev = [test('old-uid', { file: '/a.ts', fullTitle: 'login' })]
+    const next = [test('new-uid', { file: '/a.ts', fullTitle: 'login' })]
+    const result = canonicalizeUids(prev, next)
+    expect(result[0]?.uid).toBe('old-uid')
+  })
+
+  it('leaves uid alone when canonical key does not match', () => {
+    const prev = [test('old', { file: '/a.ts', fullTitle: 'login' })]
+    const next = [test('new', { file: '/b.ts', fullTitle: 'logout' })]
+    expect(canonicalizeUids(prev, next)[0]?.uid).toBe('new')
+  })
+
+  it('short-circuits when either side is empty', () => {
+    expect(canonicalizeUids([], [test('x')])).toEqual([test('x')])
+    expect(canonicalizeUids([test('x')], [])).toEqual([])
+  })
+})
+
+describe('mergeTests', () => {
+  it('replaces a test on rerun (different start time)', () => {
+    const prev = [test('t1', { state: 'failed', start: 1000, end: 2000 })]
+    const next = [test('t1', { state: 'passed', start: 5000, end: 6000 })]
+    const merged = mergeTests(prev, next, ctx())
+    expect(merged[0]?.state).toBe('passed')
+    expect(merged[0]?.start).toBe(5000)
+  })
+
+  it('shallow-merges when start times match (normal update)', () => {
+    const prev = [test('t1', { state: 'running', start: 1000, end: undefined })]
+    const next = [test('t1', { state: 'passed', start: 1000, end: 2000 })]
+    const merged = mergeTests(prev, next, ctx())
+    expect(merged[0]?.state).toBe('passed')
+    expect(merged[0]?.end).toBe(2000)
+  })
+
+  it('freezes sibling tests during a single-test rerun', () => {
+    const prev = [
+      test('target', { state: 'failed', start: 1000 }),
+      test('sibling', { state: 'passed', start: 1000 })
+    ]
+    const next = [
+      test('target', { state: 'running', start: 5000 }),
+      test('sibling', { state: 'pending', start: 5000 })
+    ]
+    const merged = mergeTests(prev, next, ctx({ activeRerunTestUid: 'target' }))
+    const sibling = merged.find((t) => t.uid === 'sibling')!
+    expect(sibling.state).toBe('passed')
+    expect(sibling.start).toBe(1000)
+  })
+
+  it('preserves existing record when incoming test is pending on a rerun', () => {
+    // Mid-rerun: backend sends all tests as 'pending' first. Untouched tests
+    // must keep their previous results (state, end, start) so future updates
+    // for this run still get detected as a rerun via start-time mismatch.
+    const prev = [test('target', { state: 'failed', start: 1000, end: 2000 })]
+    const next = [test('target', { state: 'pending', start: 5000 })]
+    const merged = mergeTests(prev, next, ctx({ activeRerunTestUid: 'target' }))
+    expect(merged[0]?.state).toBe('failed')
+    expect(merged[0]?.start).toBe(1000)
+    expect(merged[0]?.end).toBe(2000)
+  })
+
+  it('inserts a brand-new test', () => {
+    expect(mergeTests([], [test('new')], ctx())[0]?.uid).toBe('new')
+  })
+})
+
+describe('mergeSuite', () => {
+  it('derives state="passed" only when all children are terminal', () => {
+    const existing = suite('s', { state: undefined, tests: [], suites: [] })
+    const incoming = suite('s', {
+      state: undefined,
+      tests: [test('t1', { state: 'passed' }), test('t2', { state: 'passed' })],
+      suites: []
+    })
+    expect(mergeSuite(existing, incoming, ctx()).state).toBe('passed')
+  })
+
+  it('derives state="failed" when any child failed', () => {
+    const existing = suite('s', { state: undefined, tests: [], suites: [] })
+    const incoming = suite('s', {
+      state: undefined,
+      tests: [test('t1', { state: 'failed' }), test('t2', { state: 'passed' })],
+      suites: []
+    })
+    expect(mergeSuite(existing, incoming, ctx()).state).toBe('failed')
+  })
+
+  it('keeps state="running" when children are still in-progress and incoming is pending', () => {
+    const existing = suite('s', { state: 'passed', tests: [], suites: [] })
+    const incoming = suite('s', {
+      state: 'pending',
+      tests: [test('t1', { state: 'running' })],
+      suites: []
+    })
+    expect(mergeSuite(existing, incoming, ctx()).state).toBe('running')
+  })
+
+  it('marks stale child suites as pending on full-feature rerun', () => {
+    // Feature suite re-emits with state='pending', no children yet. The stale
+    // scenario suites from the previous run must show a spinner, not their
+    // old passed/failed icons.
+    const oldChild = suite('scenario-1', { state: 'passed' })
+    const existing = suite('feature', { suites: [oldChild] })
+    const incoming = suite('feature', {
+      state: 'pending',
+      tests: [],
+      suites: [suite('scenario-1', { state: 'passed' })]
+    })
+    const merged = mergeSuite(existing, incoming, ctx())
+    expect(merged.suites?.[0]?.state).toBe('pending')
+    expect(merged.suites?.[0]?.end).toBeUndefined()
+  })
+
+  it('keeps sibling scenarios with their terminal state during a child-scenario rerun', () => {
+    // Scenario 2 is being rerun; the feature suite is re-emitted with
+    // state='pending' but scenario 1's state must stay 'passed'.
+    const existing = suite('feature', {
+      suites: [
+        suite('scenario-1', { state: 'passed' }),
+        suite('scenario-2', { state: 'failed' })
+      ]
+    })
+    const incoming = suite('feature', {
+      state: 'pending',
+      suites: [
+        suite('scenario-1', { state: 'passed' }),
+        suite('scenario-2', { state: 'failed' })
+      ]
+    })
+    const merged = mergeSuite(
+      existing,
+      incoming,
+      ctx({ activeRerunSuiteUid: 'scenario-2' })
+    )
+    expect(merged.suites?.find((s) => s.uid === 'scenario-1')?.state).toBe(
+      'passed'
+    )
+  })
+
+  it('strips undefined/null state from incoming to preserve existing state', () => {
+    const existing = suite('s', { state: 'passed' })
+    const incoming = suite('s', {
+      state: undefined as never,
+      tests: [test('t', { state: 'passed' })]
+    })
+    // Existing state preserved because the merge derives 'passed' from
+    // children (all terminal), but the key behavior is that incoming
+    // state=undefined doesn't clobber existing 'passed'.
+    expect(mergeSuite(existing, incoming, ctx()).state).toBe('passed')
+  })
+})
+
+describe('mergeChildSuites', () => {
+  it('combines existing + incoming suites by uid', () => {
+    const existing = [suite('a'), suite('b')]
+    const incoming = [suite('b', { state: 'failed' }), suite('c')]
+    const merged = mergeChildSuites(existing, incoming, ctx())
+    const uids = merged.map((s) => s.uid).sort()
+    expect(uids).toEqual(['a', 'b', 'c'])
+    expect(merged.find((s) => s.uid === 'b')?.state).toBe('failed')
+  })
+
+  it('canonicalizes uids before merging so rerun-renamed scenarios match', () => {
+    const existing = [
+      suite('original', { file: '/f.feature', fullTitle: 'A scenario' })
+    ]
+    const incoming = [
+      suite('renamed', { file: '/f.feature', fullTitle: 'A scenario' })
+    ]
+    const merged = mergeChildSuites(existing, incoming, ctx())
+    expect(merged).toHaveLength(1)
+    expect(merged[0]?.uid).toBe('original')
+  })
+})
diff --git a/packages/backend/package.json b/packages/backend/package.json
index 235d8c95..e68d94af 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -17,9 +17,9 @@
   "typeScriptVersion": "^5.0.0",
   "scripts": {
     "dev": "run-p dev:*",
-    "dev:ts": "tsc --watch",
+    "dev:ts": "tsup src/index.ts --format esm --dts --watch",
     "dev:app": "nodemon --watch ./dist ./dist/index.js",
-    "build": "tsc -p ./tsconfig.json",
+    "build": "tsup src/index.ts --format esm --dts --clean",
     "lint": "eslint .",
     "prepublishOnly": "pnpm build"
   },
@@ -34,12 +34,14 @@
     "get-port": "^7.1.0",
     "import-meta-resolve": "^4.1.0",
     "shell-quote": "^1.8.3",
-    "tree-kill": "^1.2.2"
+    "tree-kill": "^1.2.2",
+    "ws": "^8.18.3"
   },
   "devDependencies": {
     "@types/shell-quote": "^1.7.5",
     "@types/ws": "^8.18.1",
+    "@wdio/devtools-shared": "workspace:^",
     "nodemon": "^3.1.14",
-    "ws": "^8.18.3"
+    "tsup": "^8.0.0"
   }
 }
diff --git a/packages/backend/src/baseline/constants.ts b/packages/backend/src/baseline/constants.ts
deleted file mode 100644
index d958b741..00000000
--- a/packages/backend/src/baseline/constants.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const BASELINE_API = {
-  preserve: '/api/baseline/preserve',
-  clear: '/api/baseline/clear',
-  get: '/api/baseline/:testUid'
-} as const
-
-export const BASELINE_WS_SCOPE = {
-  saved: 'baseline:saved',
-  cleared: 'baseline:cleared'
-} as const
-
-export type BaselineWsScope =
-  (typeof BASELINE_WS_SCOPE)[keyof typeof BASELINE_WS_SCOPE]
diff --git a/packages/backend/src/baseline/types.ts b/packages/backend/src/baseline/types.ts
index c0729245..a7211761 100644
--- a/packages/backend/src/baseline/types.ts
+++ b/packages/backend/src/baseline/types.ts
@@ -1,40 +1,28 @@
-export interface CommandLogLike {
-  timestamp: number
-  [key: string]: unknown
-}
-
-export interface ConsoleLogLike {
-  timestamp: number
-  [key: string]: unknown
-}
-
-export interface NetworkRequestLike {
-  id?: string
-  timestamp: number
-  startTime?: number
-  endTime?: number
-  [key: string]: unknown
-}
-
+import type {
+  CommandLog,
+  ConsoleLog,
+  NetworkRequest,
+  TestError,
+  TestStatus
+} from '@wdio/devtools-shared'
+
+// Backend storage uses the canonical shared types. The `*Like` aliases below
+// are kept so existing backend code that referenced them continues to compile;
+// new code should use the shared types directly.
+export type CommandLogLike = CommandLog
+export type ConsoleLogLike = ConsoleLog
+export type NetworkRequestLike = NetworkRequest
+
+// Mutations stay loose: the concrete shape (TraceMutation) lives in
+// packages/script (browser-side, depends on DOM types) and isn't safe to
+// import here.
 export interface MutationLike {
   timestamp: number
   [key: string]: unknown
 }
 
-export type NodeState = 'passed' | 'failed' | 'skipped' | 'pending' | 'running'
-
-export interface NodeError {
-  message?: string
-  name?: string
-  stack?: string
-  expected?: unknown
-  actual?: unknown
-  matcherResult?: {
-    expected?: unknown
-    actual?: unknown
-    message?: string
-  }
-}
+export type NodeState = TestStatus
+export type NodeError = TestError
 
 export interface TimeWindowNode {
   uid: string
@@ -50,44 +38,12 @@ export interface TimeWindowNode {
   childUids: string[]
 }
 
-export interface PreservedStep {
-  uid: string
-  title?: string
-  fullTitle?: string
-  start?: number
-  end?: number
-  state?: NodeState
-  error?: NodeError
-}
-
-export interface PreservedAttempt {
-  testUid: string
-  scope: 'test' | 'suite'
-  capturedAt: number
-  window: { start: number; end: number }
-  test: {
-    title?: string
-    fullTitle?: string
-    file?: string
-    callSource?: string
-    start?: number
-    end?: number
-    duration?: number
-    state?: NodeState
-    error?: NodeError
-  }
-  steps?: PreservedStep[]
-  commands: CommandLogLike[]
-  consoleLogs: ConsoleLogLike[]
-  networkRequests: NetworkRequestLike[]
-  mutations: MutationLike[]
-  sources: Record<string, string>
-}
+export type { PreservedAttempt, PreservedStep } from '@wdio/devtools-shared'
 
 export interface ActiveRun {
-  commands: CommandLogLike[]
-  consoleLogs: ConsoleLogLike[]
-  networkRequests: NetworkRequestLike[]
+  commands: CommandLog[]
+  consoleLogs: ConsoleLog[]
+  networkRequests: NetworkRequest[]
   mutations: MutationLike[]
   sources: Record<string, string>
   nodes: Map<string, TimeWindowNode>
diff --git a/packages/backend/src/bin-resolver.ts b/packages/backend/src/bin-resolver.ts
new file mode 100644
index 00000000..f5ac6414
--- /dev/null
+++ b/packages/backend/src/bin-resolver.ts
@@ -0,0 +1,95 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { createRequire } from 'node:module'
+import { RUNNER_ENV } from '@wdio/devtools-shared'
+
+const require = createRequire(import.meta.url)
+
+/**
+ * Resolve the nightwatch CLI entry point. Honors `DEVTOOLS_NIGHTWATCH_BIN`
+ * for testing/override; otherwise walks up from `baseDir` looking for
+ * `node_modules/nightwatch/package.json` and resolves its `bin` to the
+ * actual JS entry (avoids running the shell-script wrapper at
+ * `node_modules/.bin/nightwatch` via node).
+ */
+export function resolveNightwatchBin(baseDir: string): string {
+  const envOverride = process.env[RUNNER_ENV.NIGHTWATCH_BIN]
+  if (envOverride) {
+    const resolved = path.isAbsolute(envOverride)
+      ? envOverride
+      : path.resolve(process.cwd(), envOverride)
+    if (fs.existsSync(resolved)) {
+      return resolved
+    }
+  }
+
+  let dir = baseDir
+  const root = path.parse(dir).root
+  while (dir !== root) {
+    const nightwatchPkgPath = path.join(
+      dir,
+      'node_modules',
+      'nightwatch',
+      'package.json'
+    )
+    if (fs.existsSync(nightwatchPkgPath)) {
+      try {
+        const pkg = JSON.parse(fs.readFileSync(nightwatchPkgPath, 'utf8'))
+        const nightwatchDir = path.join(dir, 'node_modules', 'nightwatch')
+        const binEntry =
+          typeof pkg.bin === 'string'
+            ? pkg.bin
+            : (pkg.bin?.nightwatch ?? pkg.bin?.nw)
+        if (binEntry) {
+          const jsPath = path.resolve(nightwatchDir, binEntry)
+          if (fs.existsSync(jsPath)) {
+            return jsPath
+          }
+        }
+      } catch {
+        // malformed package.json — continue walking
+      }
+    }
+    const parent = path.dirname(dir)
+    if (parent === dir) {
+      break
+    }
+    dir = parent
+  }
+
+  throw new Error(
+    'Cannot find nightwatch binary. Install nightwatch locally or set DEVTOOLS_NIGHTWATCH_BIN env var.'
+  )
+}
+
+/**
+ * Resolve the wdio CLI entry. Honors `DEVTOOLS_WDIO_BIN`; otherwise derives
+ * from the `@wdio/cli` package's location (the published `bin/wdio.js`).
+ */
+export function resolveWdioBin(): string {
+  const envOverride = process.env[RUNNER_ENV.WDIO_BIN]
+  if (envOverride) {
+    const overriddenPath = path.isAbsolute(envOverride)
+      ? envOverride
+      : path.resolve(process.cwd(), envOverride)
+    if (!fs.existsSync(overriddenPath)) {
+      throw new Error(
+        `DEVTOOLS_WDIO_BIN "${overriddenPath}" does not exist or is not accessible`
+      )
+    }
+    return overriddenPath
+  }
+
+  try {
+    const cliEntry = require.resolve('@wdio/cli')
+    const candidate = path.resolve(path.dirname(cliEntry), '../bin/wdio.js')
+    if (!fs.existsSync(candidate)) {
+      throw new Error(`Derived WDIO bin "${candidate}" does not exist`)
+    }
+    return candidate
+  } catch (error) {
+    throw new Error(
+      `Failed to resolve WDIO binary. Provide DEVTOOLS_WDIO_BIN env var. ${(error as Error).message}`
+    )
+  }
+}
diff --git a/packages/backend/src/framework-filters.ts b/packages/backend/src/framework-filters.ts
new file mode 100644
index 00000000..09e097d7
--- /dev/null
+++ b/packages/backend/src/framework-filters.ts
@@ -0,0 +1,137 @@
+import type { RunnerRequestBody, TestRunnerId } from '@wdio/devtools-shared'
+
+function escapeRegex(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+export type FilterBuilder = (ctx: {
+  specArg?: string
+  payload: RunnerRequestBody
+}) => string[]
+
+// Map (not object) keeps payload-supplied `framework` from reaching
+// prototype methods at dispatch time — CodeQL: unvalidated-dynamic-method-call.
+// Keyed by TestRunnerId so adding a new runner forces compile-time updates here.
+const FRAMEWORK_FILTERS = new Map<TestRunnerId, FilterBuilder>()
+
+FRAMEWORK_FILTERS.set('cucumber', ({ specArg, payload }) => {
+  const filters: string[] = []
+
+  // For feature-level suites, run the entire feature file
+  if (payload.suiteType === 'feature' && specArg) {
+    // Remove any line number from specArg for feature-level execution
+    const featureFile = specArg.split(':')[0]
+    filters.push('--spec', featureFile)
+    return filters
+  }
+
+  // Priority 1: Use feature file with line number for exact scenario targeting (works for examples)
+  // Note: Cucumber scenarios are type 'suite', not 'test'
+  if (payload.featureFile && payload.featureLine) {
+    filters.push('--spec', `${payload.featureFile}:${payload.featureLine}`)
+    return filters
+  }
+
+  // Priority 2: For specific test reruns with example row number, use exact regex match
+  if (payload.entryType === 'test' && payload.fullTitle) {
+    // Cucumber fullTitle format: "1: Scenario name" or "2: Scenario name"
+    // Extract the row number and scenario name
+    // Avoid ReDoS by removing ambiguous \s* before .* - use string operations instead
+    const colonIndex = payload.fullTitle.indexOf(':')
+    if (colonIndex > 0) {
+      const rowNumber = payload.fullTitle.substring(0, colonIndex)
+      const scenarioName = payload.fullTitle.substring(colonIndex + 1).trim()
+      // Validate row number is digits only
+      if (/^\d+$/.test(rowNumber)) {
+        // Use spec file filter
+        if (specArg) {
+          filters.push('--spec', specArg)
+        }
+        // Use regex to match the exact "rowNumber: scenarioName" pattern
+        // This ensures we only run that specific example row
+        filters.push(
+          '--cucumberOpts.name',
+          `^${rowNumber}:\\s*${escapeRegex(scenarioName)}$`
+        )
+        return filters
+      }
+    }
+    // No row number - use plain name filter
+    if (specArg) {
+      filters.push('--spec', specArg)
+    }
+    filters.push('--cucumberOpts.name', payload.fullTitle.trim())
+    return filters
+  }
+
+  // Suite-level rerun
+  if (specArg) {
+    filters.push('--spec', specArg)
+  }
+  return filters
+})
+
+FRAMEWORK_FILTERS.set('mocha', ({ specArg, payload }) => {
+  const filters: string[] = []
+  if (specArg) {
+    filters.push('--spec', specArg)
+  }
+  // For both tests and suites, use grep to filter
+  if (payload.fullTitle) {
+    filters.push('--mochaOpts.grep', payload.fullTitle)
+  }
+  return filters
+})
+
+FRAMEWORK_FILTERS.set('jasmine', ({ specArg, payload }) => {
+  const filters: string[] = []
+  if (specArg) {
+    filters.push('--spec', specArg)
+  }
+  // For both tests and suites, use grep to filter
+  if (payload.fullTitle) {
+    filters.push('--jasmineOpts.grep', payload.fullTitle)
+  }
+  return filters
+})
+
+// Nightwatch CLI: positional spec file + optional --testcase filter
+FRAMEWORK_FILTERS.set('nightwatch', ({ specArg, payload }) => {
+  const filters: string[] = []
+  if (specArg) {
+    // Nightwatch doesn't support file:line — strip any trailing line number
+    filters.push(specArg.split(':')[0])
+  }
+  if (payload.entryType === 'test' && payload.label) {
+    filters.push('--testcase', payload.label)
+  }
+  return filters
+})
+
+// Nightwatch + Cucumber: feature files are resolved via the config's feature_path.
+// Never pass .feature files as positional args — Nightwatch rejects them.
+// Nightwatch forwards --name and --tags to the underlying Cucumber runner.
+FRAMEWORK_FILTERS.set('nightwatch-cucumber', ({ payload }) => {
+  const filters: string[] = []
+
+  // Only pass --name for scenario-level reruns. Feature/file-level suites
+  // (suiteType === 'feature') run all their scenarios, so no --name filter.
+  const isFeatureLevel = payload.suiteType === 'feature' || payload.runAll
+  if (!isFeatureLevel && payload.fullTitle) {
+    // Wrap as an anchored exact regex so "Scenario A" never also matches
+    // "Scenario A-1" (Cucumber treats --name as a regex).
+    const escaped = escapeRegex(payload.fullTitle)
+    filters.push('--name', `^${escaped}$`)
+  }
+  return filters
+})
+
+const DEFAULT_FILTERS: FilterBuilder = ({ specArg }) =>
+  specArg ? ['--spec', specArg] : []
+
+/** Resolve the filter builder for a given runner, falling back to spec-only. */
+export function getFilterBuilder(
+  runnerId: TestRunnerId | undefined
+): FilterBuilder {
+  return (runnerId && FRAMEWORK_FILTERS.get(runnerId)) || DEFAULT_FILTERS
+}
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
index a6cda5a1..91142623 100644
--- a/packages/backend/src/index.ts
+++ b/packages/backend/src/index.ts
@@ -1,7 +1,11 @@
 import fs from 'node:fs'
 import url from 'node:url'
 
-import Fastify, { type FastifyInstance, type FastifyRequest } from 'fastify'
+import Fastify, {
+  type FastifyInstance,
+  type FastifyReply,
+  type FastifyRequest
+} from 'fastify'
 import staticServer from '@fastify/static'
 import rateLimit from '@fastify/rate-limit'
 import websocket from '@fastify/websocket'
@@ -13,7 +17,19 @@ import { getDevtoolsApp } from './utils.js'
 import { DEFAULT_PORT } from './constants.js'
 import { testRunner } from './runner.js'
 import { baselineStore } from './baselineStore.js'
-import { BASELINE_API, BASELINE_WS_SCOPE } from './baseline/constants.js'
+import { createWorkerMessageHandler } from './worker-message-handler.js'
+import {
+  BASELINE_API,
+  BASELINE_WS_SCOPE,
+  WS_PATHS,
+  WS_SCOPE,
+  type BaselinePreserveRequest,
+  type BaselineClearRequest,
+  type BaselineGetParams,
+  type BaselineGetQuery,
+  type BaselineSavedWsPayload,
+  type BaselineClearedWsPayload
+} from '@wdio/devtools-shared'
 import type { RunnerRequestBody } from './types.js'
 
 let server: FastifyInstance | undefined
@@ -28,7 +44,14 @@ const clients = new Set<WebSocket>()
 
 // Notify the worker when a UI client connects so the plugin can unblock
 // Builder.build() instead of finishing the run before the dashboard appears.
+//
+// `parentWorkerSocket` is the long-lived worker (the original test runner
+// holding the keep-alive on shutdown). `workerSocket` tracks whichever worker
+// most recently connected — typically a rerun child while it runs. Outbound
+// signals like `clientDisconnected` go to the PARENT, otherwise a closed
+// rerun-child leaves the parent unreachable and `clientDisconnected` is lost.
 let workerSocket: WebSocket | undefined
+let parentWorkerSocket: WebSocket | undefined
 
 // sessionId → absolute path of the encoded .webm; queried by /api/video/:sessionId.
 const videoRegistry = new Map<string, string>()
@@ -59,7 +82,7 @@ function replayBufferedMessages(socket: WebSocket) {
   }
 }
 
-function serveVideo(sessionId: string, reply: any) {
+function serveVideo(sessionId: string, reply: FastifyReply) {
   const videoPath = videoRegistry.get(sessionId)
   if (!videoPath) {
     return reply.code(404).send({ error: 'Video not found' })
@@ -107,7 +130,7 @@ export async function start(
       // Broadcast a clear so popouts (which only see WS events) wipe too.
       broadcastToClients(
         JSON.stringify({
-          scope: 'clearExecutionData',
+          scope: WS_SCOPE.clearExecutionData,
           data: { uid: body.uid, entryType: body.entryType }
         })
       )
@@ -141,7 +164,7 @@ export async function start(
     testRunner.stop()
     broadcastToClients(
       JSON.stringify({
-        scope: 'testStopped',
+        scope: WS_SCOPE.testStopped,
         data: { stopped: true, timestamp: Date.now() }
       })
     )
@@ -151,9 +174,7 @@ export async function start(
   server.post(
     BASELINE_API.preserve,
     async (
-      request: FastifyRequest<{
-        Body: { testUid?: string; scope?: 'test' | 'suite' }
-      }>,
+      request: FastifyRequest<{ Body: Partial<BaselinePreserveRequest> }>,
       reply
     ) => {
       const { testUid, scope } = request.body || {}
@@ -168,11 +189,9 @@ export async function start(
           .code(409)
           .send({ error: 'No captured data for the requested uid' })
       }
+      const payload: BaselineSavedWsPayload = { testUid, attempt }
       broadcastToClients(
-        JSON.stringify({
-          scope: BASELINE_WS_SCOPE.saved,
-          data: { testUid, attempt }
-        })
+        JSON.stringify({ scope: BASELINE_WS_SCOPE.saved, data: payload })
       )
       return reply.send({ ok: true, attempt })
     }
@@ -180,18 +199,19 @@ export async function start(
 
   server.post(
     BASELINE_API.clear,
-    async (request: FastifyRequest<{ Body: { testUid?: string } }>, reply) => {
+    async (
+      request: FastifyRequest<{ Body: Partial<BaselineClearRequest> }>,
+      reply
+    ) => {
       const { testUid } = request.body || {}
       if (!testUid) {
         return reply.code(400).send({ error: 'testUid required' })
       }
       const removed = baselineStore.clear(testUid)
       if (removed) {
+        const payload: BaselineClearedWsPayload = { testUid }
         broadcastToClients(
-          JSON.stringify({
-            scope: BASELINE_WS_SCOPE.cleared,
-            data: { testUid }
-          })
+          JSON.stringify({ scope: BASELINE_WS_SCOPE.cleared, data: payload })
         )
       }
       return reply.send({ ok: true, removed })
@@ -202,8 +222,8 @@ export async function start(
     BASELINE_API.get,
     async (
       request: FastifyRequest<{
-        Params: { testUid: string }
-        Querystring: { scope?: 'test' | 'suite' }
+        Params: BaselineGetParams
+        Querystring: BaselineGetQuery
       }>,
       reply
     ) => {
@@ -214,7 +234,7 @@ export async function start(
   )
 
   server.get(
-    '/client',
+    WS_PATHS.client,
     { websocket: true },
     (socket: WebSocket, _req: FastifyRequest) => {
       log.info(
@@ -227,23 +247,33 @@ export async function start(
         // Last dashboard window closed — tell the worker so it can wind
         // down. Lets the user close Chrome to end an interactive review
         // session under any runner.
-        if (clients.size === 0 && workerSocket?.readyState === WebSocket.OPEN) {
-          workerSocket.send(
-            JSON.stringify({ scope: 'clientDisconnected', data: {} })
+        // Route to the PARENT worker — it owns the keep-alive + shutdown
+        // handler. The `workerSocket` ref may point at a rerun child that's
+        // about to exit; falling back to `parentWorkerSocket` handles that
+        // (and a fresh post-rerun click before the child fully closes).
+        const target =
+          parentWorkerSocket?.readyState === WebSocket.OPEN
+            ? parentWorkerSocket
+            : workerSocket?.readyState === WebSocket.OPEN
+              ? workerSocket
+              : undefined
+        if (clients.size === 0 && target) {
+          target.send(
+            JSON.stringify({ scope: WS_SCOPE.clientDisconnected, data: {} })
           )
         }
       })
 
       if (workerSocket?.readyState === WebSocket.OPEN) {
         workerSocket.send(
-          JSON.stringify({ scope: 'clientConnected', data: {} })
+          JSON.stringify({ scope: WS_SCOPE.clientConnected, data: {} })
         )
       }
     }
   )
 
   server.get(
-    '/worker',
+    WS_PATHS.worker,
     { websocket: true },
     (socket: WebSocket, _req: FastifyRequest) => {
       // Don't drop the message buffer for rerun-child connects (the dashboard
@@ -257,79 +287,32 @@ export async function start(
         baselineStore.resetActiveRun()
       }
       workerSocket = socket
+      if (!isRerunChild) {
+        parentWorkerSocket = socket
+      }
       socket.on('close', () => {
         if (workerSocket === socket) {
           workerSocket = undefined
         }
+        if (parentWorkerSocket === socket) {
+          parentWorkerSocket = undefined
+        }
       })
       if (clients.size > 0) {
-        socket.send(JSON.stringify({ scope: 'clientConnected', data: {} }))
-      }
-      socket.on('message', (message: Buffer) => {
-        // Use `debug` — at `info` level this feeds the worker's stream
-        // capture and creates a backend↔capture loop.
-        log.debug(
-          `received ${message.length} byte message from worker to ${clients.size} client${clients.size > 1 ? 's' : ''}`
+        socket.send(
+          JSON.stringify({ scope: WS_SCOPE.clientConnected, data: {} })
         )
-
-        try {
-          const parsed = JSON.parse(message.toString())
-
-          if (parsed.scope === 'clearCommands') {
-            const testUid = parsed.data?.testUid
-            log.info(`Clearing commands for test: ${testUid || 'all'}`)
-            // Mirror the dashboard's reset behavior: clearing without a uid
-            // is a full reset, so wipe the baseline accumulator too.
-            if (!testUid) {
-              baselineStore.resetActiveRun()
-            }
-            broadcastToClients(
-              JSON.stringify({
-                scope: 'clearExecutionData',
-                data: { uid: testUid }
-              })
-            )
-            return
-          }
-
-          if (parsed.scope === 'config' && parsed.data?.configFile) {
-            testRunner.registerConfigFile(parsed.data.configFile)
-            log.info(
-              `Registered config file for reruns: ${parsed.data.configFile}`
-            )
-            return
-          }
-
-          // Intercept screencast messages: store the absolute videoPath in the
-          // registry (backend-only), then forward only the sessionId to the UI
-          // so the UI can request the video via GET /api/video/:sessionId.
-          if (parsed.scope === 'screencast' && parsed.data?.sessionId) {
-            const { sessionId, videoPath } = parsed.data
-            if (videoPath) {
-              videoRegistry.set(sessionId, videoPath)
-              log.info(
-                `Screencast registered for session ${sessionId}: ${videoPath}`
-              )
-            }
-            broadcastToClients(
-              JSON.stringify({
-                scope: 'screencast',
-                data: { sessionId }
-              })
-            )
-            return
-          }
-          // Tee the event into the baseline accumulator for time-window
-          // partitioning at preserve time. Done after special-case handling
-          // so we don't accumulate control frames (clearCommands, screencast).
-          baselineStore.recordEvent(parsed.scope, parsed.data)
-        } catch {
-          // Not JSON or parsing failed, forward as-is
-        }
-
-        // Forward all other messages as-is
-        broadcastToClients(message.toString())
-      })
+      }
+      socket.on(
+        'message',
+        createWorkerMessageHandler({
+          baselineStore,
+          testRunner,
+          videoRegistry,
+          broadcastToClients,
+          clientCount: () => clients.size
+        })
+      )
     }
   )
 
diff --git a/packages/backend/src/runner.ts b/packages/backend/src/runner.ts
index 4fc20f07..8b2dddb0 100644
--- a/packages/backend/src/runner.ts
+++ b/packages/backend/src/runner.ts
@@ -2,146 +2,20 @@ import { spawn, type ChildProcess } from 'node:child_process'
 import fs from 'node:fs'
 import path from 'node:path'
 import url from 'node:url'
-import { createRequire } from 'node:module'
 import kill from 'tree-kill'
-import { parse as shellParse } from 'shell-quote'
-import type { RunnerRequestBody } from './types.js'
+import { parse as shellParse, quote as shellQuote } from 'shell-quote'
+import {
+  REUSE_ENV,
+  RUNNER_ENV,
+  type RunnerRequestBody,
+  type TestRunnerId
+} from '@wdio/devtools-shared'
 import { WDIO_CONFIG_FILENAMES, NIGHTWATCH_CONFIG_FILENAMES } from './types.js'
+import { getFilterBuilder } from './framework-filters.js'
+import { resolveNightwatchBin, resolveWdioBin } from './bin-resolver.js'
 
-const require = createRequire(import.meta.url)
 const wdioBin = resolveWdioBin()
 
-/**
- * Escape special regex characters in a string
- */
-function escapeRegex(str: string): string {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}
-
-type FilterBuilder = (ctx: {
-  specArg?: string
-  payload: RunnerRequestBody
-}) => string[]
-
-// Map (not object) keeps payload-supplied `framework` from reaching
-// prototype methods at dispatch time — CodeQL: unvalidated-dynamic-method-call.
-const FRAMEWORK_FILTERS = new Map<string, FilterBuilder>()
-
-FRAMEWORK_FILTERS.set('cucumber', ({ specArg, payload }) => {
-  const filters: string[] = []
-
-  // For feature-level suites, run the entire feature file
-  if (payload.suiteType === 'feature' && specArg) {
-    // Remove any line number from specArg for feature-level execution
-    const featureFile = specArg.split(':')[0]
-    filters.push('--spec', featureFile)
-    return filters
-  }
-
-  // Priority 1: Use feature file with line number for exact scenario targeting (works for examples)
-  // Note: Cucumber scenarios are type 'suite', not 'test'
-  if (payload.featureFile && payload.featureLine) {
-    filters.push('--spec', `${payload.featureFile}:${payload.featureLine}`)
-    return filters
-  }
-
-  // Priority 2: For specific test reruns with example row number, use exact regex match
-  if (payload.entryType === 'test' && payload.fullTitle) {
-    // Cucumber fullTitle format: "1: Scenario name" or "2: Scenario name"
-    // Extract the row number and scenario name
-    // Avoid ReDoS by removing ambiguous \s* before .* - use string operations instead
-    const colonIndex = payload.fullTitle.indexOf(':')
-    if (colonIndex > 0) {
-      const rowNumber = payload.fullTitle.substring(0, colonIndex)
-      const scenarioName = payload.fullTitle.substring(colonIndex + 1).trim()
-      // Validate row number is digits only
-      if (/^\d+$/.test(rowNumber)) {
-        // Use spec file filter
-        if (specArg) {
-          filters.push('--spec', specArg)
-        }
-        // Use regex to match the exact "rowNumber: scenarioName" pattern
-        // This ensures we only run that specific example row
-        filters.push(
-          '--cucumberOpts.name',
-          `^${rowNumber}:\\s*${escapeRegex(scenarioName)}$`
-        )
-        return filters
-      }
-    }
-    // No row number - use plain name filter
-    if (specArg) {
-      filters.push('--spec', specArg)
-    }
-    filters.push('--cucumberOpts.name', payload.fullTitle.trim())
-    return filters
-  }
-
-  // Suite-level rerun
-  if (specArg) {
-    filters.push('--spec', specArg)
-  }
-  return filters
-})
-
-FRAMEWORK_FILTERS.set('mocha', ({ specArg, payload }) => {
-  const filters: string[] = []
-  if (specArg) {
-    filters.push('--spec', specArg)
-  }
-  // For both tests and suites, use grep to filter
-  if (payload.fullTitle) {
-    filters.push('--mochaOpts.grep', payload.fullTitle)
-  }
-  return filters
-})
-
-FRAMEWORK_FILTERS.set('jasmine', ({ specArg, payload }) => {
-  const filters: string[] = []
-  if (specArg) {
-    filters.push('--spec', specArg)
-  }
-  // For both tests and suites, use grep to filter
-  if (payload.fullTitle) {
-    filters.push('--jasmineOpts.grep', payload.fullTitle)
-  }
-  return filters
-})
-
-const DEFAULT_FILTERS: FilterBuilder = ({ specArg }) =>
-  specArg ? ['--spec', specArg] : []
-
-// Nightwatch CLI: positional spec file + optional --testcase filter
-FRAMEWORK_FILTERS.set('nightwatch', ({ specArg, payload }) => {
-  const filters: string[] = []
-  if (specArg) {
-    // Nightwatch doesn't support file:line — strip any trailing line number
-    filters.push(specArg.split(':')[0])
-  }
-  if (payload.entryType === 'test' && payload.label) {
-    filters.push('--testcase', payload.label)
-  }
-  return filters
-})
-
-// Nightwatch + Cucumber: feature files are resolved via the config's feature_path.
-// Never pass .feature files as positional args — Nightwatch rejects them.
-// Nightwatch forwards --name and --tags to the underlying Cucumber runner.
-FRAMEWORK_FILTERS.set('nightwatch-cucumber', ({ payload }) => {
-  const filters: string[] = []
-
-  // Only pass --name for scenario-level reruns. Feature/file-level suites
-  // (suiteType === 'feature') run all their scenarios, so no --name filter.
-  const isFeatureLevel = payload.suiteType === 'feature' || payload.runAll
-  if (!isFeatureLevel && payload.fullTitle) {
-    // Wrap as an anchored exact regex so "Scenario A" never also matches
-    // "Scenario A-1" (Cucumber treats --name as a regex).
-    const escaped = payload.fullTitle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-    filters.push('--name', `^${escaped}$`)
-  }
-  return filters
-})
-
 class TestRunner {
   #child?: ChildProcess
   #lastPayload?: RunnerRequestBody
@@ -182,15 +56,15 @@ class TestRunner {
 
     const childEnv = { ...process.env }
     if (payload.devtoolsHost && payload.devtoolsPort) {
-      childEnv.DEVTOOLS_APP_HOST = payload.devtoolsHost
-      childEnv.DEVTOOLS_APP_PORT = String(payload.devtoolsPort)
-      childEnv.DEVTOOLS_APP_REUSE = '1'
+      childEnv[REUSE_ENV.HOST] = payload.devtoolsHost
+      childEnv[REUSE_ENV.PORT] = String(payload.devtoolsPort)
+      childEnv[REUSE_ENV.REUSE] = '1'
     }
 
     let child: ChildProcess
     if (isGenericShell) {
       const command = this.#resolveGenericCommand(payload)
-      this.#baseDir = process.env.DEVTOOLS_RUNNER_CWD || process.cwd()
+      this.#baseDir = process.env[RUNNER_ENV.RUNNER_CWD] || process.cwd()
       const { file, args } = this.#parseGenericCommand(command)
       child = spawn(file, args, {
         cwd: this.#baseDir,
@@ -201,7 +75,7 @@ class TestRunner {
     } else {
       const configPath = this.#resolveConfigPath(payload)
       this.#baseDir =
-        process.env.DEVTOOLS_RUNNER_CWD || path.dirname(configPath)
+        process.env[RUNNER_ENV.RUNNER_CWD] || path.dirname(configPath)
       let args: string[]
       if (isNightwatch) {
         const nightwatchBin = resolveNightwatchBin(this.#baseDir)
@@ -221,11 +95,11 @@ class TestRunner {
       }
       if (isNightwatch) {
         if (payload.entryType === 'test' && payload.label) {
-          childEnv.DEVTOOLS_RERUN_ENTRY_TYPE = 'test'
-          childEnv.DEVTOOLS_RERUN_LABEL = payload.label
+          childEnv[REUSE_ENV.RERUN_ENTRY_TYPE] = 'test'
+          childEnv[REUSE_ENV.RERUN_LABEL] = payload.label
         } else {
-          delete childEnv.DEVTOOLS_RERUN_ENTRY_TYPE
-          delete childEnv.DEVTOOLS_RERUN_LABEL
+          delete childEnv[REUSE_ENV.RERUN_ENTRY_TYPE]
+          delete childEnv[REUSE_ENV.RERUN_LABEL]
         }
       }
       child = spawn(process.execPath, args, {
@@ -259,6 +133,13 @@ class TestRunner {
 
   // Targeted reruns substitute {{testName}} into rerunCommand; suite filtering
   // works because mocha/jest/cucumber filter flags match by name (describe/it/scenario alike).
+  //
+  // Exception: cucumber's `--name` matches scenario titles only, never feature
+  // titles — a suite-level rerun on a feature would substitute the feature name
+  // and match zero scenarios. When the payload looks like a cucumber feature
+  // rerun (entryType='suite', spec file ends in `.feature`, template carries
+  // `--name "{{testName}}"`), strip `--name` and pass the feature file as a
+  // positional arg so cucumber-js runs every scenario in that file.
   #resolveGenericCommand(payload: RunnerRequestBody): string {
     const template = payload.rerunCommand
     const fallback = payload.launchCommand || ''
@@ -266,11 +147,29 @@ class TestRunner {
       !payload.runAll &&
       (payload.entryType === 'test' || payload.entryType === 'suite') &&
       Boolean(payload.label || payload.fullTitle)
-    if (template && isTargetedRerun) {
-      const name = payload.label || payload.fullTitle || ''
-      return template.replace(/\{\{testName\}\}/g, name)
+    if (!template || !isTargetedRerun) {
+      return fallback || template || ''
     }
-    return fallback || template || ''
+    // Cucumber's `--name` matches scenario titles, never feature titles.
+    // Feature-level reruns must drop `--name` and pass the .feature path as a
+    // positional arg. The dashboard tags the root suite with
+    // `suiteType: 'feature'`, which is what distinguishes a true feature-level
+    // rerun from a scenario rerun (scenarios are also `entryType: 'suite'` but
+    // `suiteType: 'suite'`).
+    const featureSpec =
+      payload.featureFile ||
+      (payload.specFile?.endsWith('.feature') ? payload.specFile : undefined)
+    const isCucumberFeatureRerun =
+      payload.entryType === 'suite' &&
+      payload.suiteType === 'feature' &&
+      Boolean(featureSpec) &&
+      /--name\s+"\{\{testName\}\}"/.test(template)
+    if (isCucumberFeatureRerun && featureSpec) {
+      const stripped = template.replace(/\s*--name\s+"\{\{testName\}\}"/, '')
+      return `${stripped} ${shellQuote([featureSpec])}`
+    }
+    const name = payload.label || payload.fullTitle || ''
+    return template.replace(/\{\{testName\}\}/g, name)
   }
 
   #parseGenericCommand(command: string): { file: string; args: string[] } {
@@ -325,16 +224,15 @@ class TestRunner {
         : specFile
       : undefined
 
-    const candidateBuilder = FRAMEWORK_FILTERS.get(framework)
-    const builder =
-      typeof candidateBuilder === 'function'
-        ? candidateBuilder
-        : DEFAULT_FILTERS
+    // Cast: framework comes from an HTTP payload, so it's `string` at the
+    // boundary. getFilterBuilder() falls back to the default spec-only
+    // builder for unknown runners.
+    const builder = getFilterBuilder(framework as TestRunnerId)
     const baseFilters = builder({ specArg, payload })
 
     // Scope "Run All" to the user's original --spec args. Nightwatch resolves specs via its own filter.
     if (payload.runAll && !framework.startsWith('nightwatch')) {
-      const initialSpecs = process.env.DEVTOOLS_WDIO_INITIAL_SPECS
+      const initialSpecs = process.env[RUNNER_ENV.WDIO_INITIAL_SPECS]
       if (initialSpecs) {
         const specs = initialSpecs.split(path.delimiter).filter(Boolean)
         for (const spec of specs) {
@@ -401,8 +299,8 @@ class TestRunner {
       payload?.configFile,
       this.#lastPayload?.configFile,
       this.#registeredConfigFile,
-      process.env.DEVTOOLS_WDIO_CONFIG,
-      process.env.DEVTOOLS_NIGHTWATCH_CONFIG,
+      process.env[RUNNER_ENV.WDIO_CONFIG],
+      process.env[RUNNER_ENV.NIGHTWATCH_CONFIG],
       this.#findConfigFromSpec(specCandidate, isNightwatch),
       ...this.#expandDefaultConfigsFor(this.#baseDir, isNightwatch),
       ...this.#expandDefaultConfigsFor(
@@ -478,85 +376,4 @@ class TestRunner {
   }
 }
 
-function resolveNightwatchBin(baseDir: string): string {
-  const envOverride = process.env.DEVTOOLS_NIGHTWATCH_BIN
-  if (envOverride) {
-    const resolved = path.isAbsolute(envOverride)
-      ? envOverride
-      : path.resolve(process.cwd(), envOverride)
-    if (fs.existsSync(resolved)) {
-      return resolved
-    }
-  }
-
-  // Walk up from baseDir looking for node_modules/nightwatch/package.json
-  // and resolve the actual JS entry (avoids running the shell-script wrapper
-  // at node_modules/.bin/nightwatch directly via node).
-  let dir = baseDir
-  const root = path.parse(dir).root
-  while (dir !== root) {
-    const nightwatchPkgPath = path.join(
-      dir,
-      'node_modules',
-      'nightwatch',
-      'package.json'
-    )
-    if (fs.existsSync(nightwatchPkgPath)) {
-      try {
-        const pkg = JSON.parse(fs.readFileSync(nightwatchPkgPath, 'utf8'))
-        const nightwatchDir = path.join(dir, 'node_modules', 'nightwatch')
-        const binEntry =
-          typeof pkg.bin === 'string'
-            ? pkg.bin
-            : (pkg.bin?.nightwatch ?? pkg.bin?.nw)
-        if (binEntry) {
-          const jsPath = path.resolve(nightwatchDir, binEntry)
-          if (fs.existsSync(jsPath)) {
-            return jsPath
-          }
-        }
-      } catch {
-        // malformed package.json — continue walking
-      }
-    }
-    const parent = path.dirname(dir)
-    if (parent === dir) {
-      break
-    }
-    dir = parent
-  }
-
-  throw new Error(
-    'Cannot find nightwatch binary. Install nightwatch locally or set DEVTOOLS_NIGHTWATCH_BIN env var.'
-  )
-}
-
-function resolveWdioBin() {
-  const envOverride = process.env.DEVTOOLS_WDIO_BIN
-  if (envOverride) {
-    const overriddenPath = path.isAbsolute(envOverride)
-      ? envOverride
-      : path.resolve(process.cwd(), envOverride)
-    if (!fs.existsSync(overriddenPath)) {
-      throw new Error(
-        `DEVTOOLS_WDIO_BIN "${overriddenPath}" does not exist or is not accessible`
-      )
-    }
-    return overriddenPath
-  }
-
-  try {
-    const cliEntry = require.resolve('@wdio/cli')
-    const candidate = path.resolve(path.dirname(cliEntry), '../bin/wdio.js')
-    if (!fs.existsSync(candidate)) {
-      throw new Error(`Derived WDIO bin "${candidate}" does not exist`)
-    }
-    return candidate
-  } catch (error) {
-    throw new Error(
-      `Failed to resolve WDIO binary. Provide DEVTOOLS_WDIO_BIN env var. ${(error as Error).message}`
-    )
-  }
-}
-
 export const testRunner = new TestRunner()
diff --git a/packages/backend/src/types.ts b/packages/backend/src/types.ts
index faa055f3..61a3ded6 100644
--- a/packages/backend/src/types.ts
+++ b/packages/backend/src/types.ts
@@ -13,23 +13,4 @@ export const NIGHTWATCH_CONFIG_FILENAMES = [
   'nightwatch.json'
 ] as const
 
-export interface RunnerRequestBody {
-  uid: string
-  entryType: 'suite' | 'test'
-  specFile?: string
-  fullTitle?: string
-  label?: string
-  callSource?: string
-  runAll?: boolean
-  framework?: string
-  configFile?: string
-  lineNumber?: number
-  devtoolsHost?: string
-  devtoolsPort?: number
-  featureFile?: string
-  featureLine?: number
-  suiteType?: string
-  rerunCommand?: string
-  launchCommand?: string
-  preserveBaseline?: boolean
-}
+export type { RunnerRequestBody } from '@wdio/devtools-shared'
diff --git a/packages/backend/src/worker-message-handler.ts b/packages/backend/src/worker-message-handler.ts
new file mode 100644
index 00000000..4bbc981b
--- /dev/null
+++ b/packages/backend/src/worker-message-handler.ts
@@ -0,0 +1,88 @@
+import logger from '@wdio/logger'
+import { WS_SCOPE } from '@wdio/devtools-shared'
+import type { baselineStore as BaselineStore } from './baselineStore.js'
+import type { testRunner as TestRunner } from './runner.js'
+
+const log = logger('@wdio/devtools-backend')
+
+export interface WorkerMessageContext {
+  baselineStore: typeof BaselineStore
+  testRunner: typeof TestRunner
+  videoRegistry: Map<string, string>
+  broadcastToClients: (message: string) => void
+  clientCount: () => number
+}
+
+/**
+ * Build the worker WS `message` listener for {@link WS_PATHS.worker}. Handles
+ * three control scopes inline (`clearCommands`, `config`, `screencast`) and
+ * forwards everything else verbatim to the dashboard clients.
+ */
+export function createWorkerMessageHandler(
+  ctx: WorkerMessageContext
+): (message: Buffer) => void {
+  return (message: Buffer) => {
+    // Use `debug` — at `info` level this feeds the worker's stream
+    // capture and creates a backend↔capture loop.
+    const count = ctx.clientCount()
+    log.debug(
+      `received ${message.length} byte message from worker to ${count} client${count > 1 ? 's' : ''}`
+    )
+
+    try {
+      const parsed = JSON.parse(message.toString())
+
+      if (parsed.scope === WS_SCOPE.clearCommands) {
+        const testUid = parsed.data?.testUid
+        log.info(`Clearing commands for test: ${testUid || 'all'}`)
+        // Mirror the dashboard's reset behavior: clearing without a uid
+        // is a full reset, so wipe the baseline accumulator too.
+        if (!testUid) {
+          ctx.baselineStore.resetActiveRun()
+        }
+        ctx.broadcastToClients(
+          JSON.stringify({
+            scope: WS_SCOPE.clearExecutionData,
+            data: { uid: testUid }
+          })
+        )
+        return
+      }
+
+      if (parsed.scope === 'config' && parsed.data?.configFile) {
+        ctx.testRunner.registerConfigFile(parsed.data.configFile)
+        log.info(`Registered config file for reruns: ${parsed.data.configFile}`)
+        return
+      }
+
+      // Intercept screencast messages: store the absolute videoPath in the
+      // registry (backend-only), then forward only the sessionId to the UI
+      // so the UI can request the video via GET /api/video/:sessionId.
+      if (parsed.scope === 'screencast' && parsed.data?.sessionId) {
+        const { sessionId, videoPath } = parsed.data
+        if (videoPath) {
+          ctx.videoRegistry.set(sessionId, videoPath)
+          log.info(
+            `Screencast registered for session ${sessionId}: ${videoPath}`
+          )
+        }
+        ctx.broadcastToClients(
+          JSON.stringify({
+            scope: 'screencast',
+            data: { sessionId }
+          })
+        )
+        return
+      }
+      // Tee the event into the baseline accumulator for time-window
+      // partitioning at preserve time. Done after special-case handling
+      // so we don't accumulate control frames (clearCommands, screencast).
+      ctx.baselineStore.recordEvent(parsed.scope, parsed.data)
+    } catch {
+      // Not JSON or parsing failed, forward as-is
+    }
+
+    // Forward all other messages as-is
+    ctx.broadcastToClients(message.toString())
+  }
+}
diff --git a/packages/backend/tsconfig.json b/packages/backend/tsconfig.json
index 7cfb7e99..9ccab6be 100644
--- a/packages/backend/tsconfig.json
+++ b/packages/backend/tsconfig.json
@@ -5,7 +5,7 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "outDir": "dist",
-    "rootDir": "src",
+    "rootDir": "..",
     "noEmit": false,
     "allowImportingTsExtensions": false,
     "declaration": true
diff --git a/packages/core/package.json b/packages/core/package.json
new file mode 100644
index 00000000..a23022a1
--- /dev/null
+++ b/packages/core/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@wdio/devtools-core",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Framework-agnostic capture/reporter logic shared by @wdio/devtools-* adapters. Workspace-internal, never published — code is inlined into each consuming adapter at build time.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webdriverio/devtools.git",
+    "directory": "packages/core"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./*": {
+      "types": "./src/*.ts",
+      "default": "./src/*.ts"
+    }
+  },
+  "types": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@wdio/devtools-shared": "workspace:^",
+    "@types/ws": "^8.18.1",
+    "stacktrace-parser": "^0.1.11",
+    "ws": "^8.18.3"
+  }
+}
diff --git a/packages/core/src/console.ts b/packages/core/src/console.ts
new file mode 100644
index 00000000..2034eb05
--- /dev/null
+++ b/packages/core/src/console.ts
@@ -0,0 +1,129 @@
+import type { ConsoleLog, LogLevel, LogSource } from '@wdio/devtools-shared'
+
+/**
+ * Console methods we intercept to forward test/runner-process output into the
+ * UI Console tab.
+ */
+export const CONSOLE_METHODS = ['log', 'info', 'warn', 'error'] as const
+
+/**
+ * Strips ANSI escape sequences (colour codes, cursor moves, etc.) from
+ * terminal output so the UI Console renders plain text. The pattern accepts
+ * any trailing letter, not just `m`, so cursor/style sequences are handled
+ * too.
+ */
+export const ANSI_REGEX = /\x1b\[[?]?[0-9;]*[A-Za-z]/g
+
+export function stripAnsi(text: string): string {
+  return text.replace(ANSI_REGEX, '')
+}
+
+/**
+ * Log-level detection patterns, applied in priority order (highest to
+ * lowest). The first matching pattern wins.
+ */
+export const LOG_LEVEL_PATTERNS: ReadonlyArray<{
+  level: 'trace' | 'debug' | 'info' | 'warn' | 'error'
+  pattern: RegExp
+}> = [
+  { level: 'trace', pattern: /\btrace\b/i },
+  { level: 'debug', pattern: /\bdebug\b/i },
+  { level: 'info', pattern: /\binfo\b/i },
+  { level: 'warn', pattern: /\bwarn(ing)?\b/i },
+  { level: 'error', pattern: /\berror\b/i }
+] as const
+
+/** Visual indicators that suggest error-level logs in unstructured output. */
+export const ERROR_INDICATORS = ['✗', 'failed', 'failure'] as const
+
+/**
+ * Matches the leading Braille spinner glyphs that runners (Nightwatch CLI,
+ * Selenium tooling) emit for in-place progress updates. Adapters skip lines
+ * that match this so the dashboard's Console tab isn't flooded with frames.
+ */
+export const SPINNER_RE = /^[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏]/u
+
+/**
+ * Filter out terminal/stream lines that would feed back into the WS bridge
+ * and cause an infinite forwarding loop: pino JSON output, [SESSION] markers,
+ * backend logger lines, Jest console framing, and bare stack-frame lines.
+ *
+ * Adapters call this from their stream-patch before forwarding lines to the
+ * UI Console tab. Combine with SPINNER_RE for full noise filtering.
+ */
+export function isInternalStreamLine(line: string): boolean {
+  const t = line.trim()
+  if (t.startsWith('{"') || t.startsWith('[SESSION]')) {
+    return true
+  }
+  if (t.includes('@wdio/devtools-backend')) {
+    return true
+  }
+  if (/^console\.(log|info|warn|error|debug|trace)$/.test(t)) {
+    return true
+  }
+  if (/^at\s.+:\d+:\d+\)?$/.test(t)) {
+    return true
+  }
+  return false
+}
+
+/** Enum-style accessor for the canonical LogSource values from shared. */
+export const LOG_SOURCES = {
+  BROWSER: 'browser',
+  TEST: 'test',
+  TERMINAL: 'terminal'
+} as const satisfies Record<string, LogSource>
+
+export type { LogSource } from '@wdio/devtools-shared'
+
+/**
+ * Classify a line of unstructured terminal output by scanning for log-level
+ * keywords. Falls back to `'log'` when no pattern matches.
+ */
+export function detectLogLevel(text: string): LogLevel {
+  const normalised = stripAnsi(text).toLowerCase()
+  for (const { level, pattern } of LOG_LEVEL_PATTERNS) {
+    if (pattern.test(normalised)) {
+      return level
+    }
+  }
+  if (ERROR_INDICATORS.some((i) => normalised.includes(i.toLowerCase()))) {
+    return 'error'
+  }
+  return 'log'
+}
+
+/** Build a ConsoleLog entry tagged with the supplied source. */
+export function createConsoleLogEntry(
+  type: LogLevel,
+  args: any[],
+  source: LogSource = LOG_SOURCES.TEST
+): ConsoleLog {
+  return { timestamp: Date.now(), type, args, source }
+}
+
+/**
+ * Map a Chrome DevTools log-level string (or `{name, value}` object) to our
+ * `LogLevel` union. Used by CDP/BiDi consumers that surface browser-side
+ * console output through SEVERE/WARNING/INFO/DEBUG severity names.
+ */
+export function chromeLogLevelToLogLevel(
+  level: string | { value?: number; name?: string }
+): LogLevel {
+  const levelName = (
+    typeof level === 'object' ? (level?.name ?? '') : (level ?? '')
+  ).toUpperCase()
+  switch (levelName) {
+    case 'SEVERE':
+      return 'error'
+    case 'WARNING':
+      return 'warn'
+    case 'INFO':
+      return 'info'
+    case 'DEBUG':
+      return 'debug'
+    default:
+      return 'log'
+  }
+}
diff --git a/packages/core/src/error.ts b/packages/core/src/error.ts
new file mode 100644
index 00000000..7422fb84
--- /dev/null
+++ b/packages/core/src/error.ts
@@ -0,0 +1,79 @@
+/** Plain-object shape of an Error after `serializeError`. */
+export interface SerializedError {
+  name: string
+  message: string
+  stack?: string
+}
+
+/**
+ * Coerce an unknown value (caught exception, framework-supplied error
+ * object, string, etc.) into an Error instance. Used at adapter command
+ * boundaries where caught values can be anything — Error subclasses,
+ * thrown strings, framework objects with a `.message` — and downstream
+ * code wants a stable `Error` to inspect and serialize.
+ */
+export function toError(value: unknown): Error {
+  if (value instanceof Error) {
+    return value
+  }
+  if (
+    value !== null &&
+    typeof value === 'object' &&
+    typeof (value as { message?: unknown }).message === 'string'
+  ) {
+    const e = new Error((value as { message: string }).message)
+    const name = (value as { name?: unknown }).name
+    if (typeof name === 'string') {
+      e.name = name
+    }
+    return e
+  }
+  return new Error(String(value))
+}
+
+/**
+ * Extract a printable message from a caught value. Equivalent to reading
+ * `.message` on an Error, but degrades cleanly when the thrown value is a
+ * string, a plain object, undefined, or anything else — `(err as Error).message`
+ * silently returns `undefined` in those cases and yields useless log output.
+ */
+export function errorMessage(value: unknown): string {
+  if (value instanceof Error) {
+    return value.message
+  }
+  if (typeof value === 'string') {
+    return value
+  }
+  if (
+    value !== null &&
+    typeof value === 'object' &&
+    typeof (value as { message?: unknown }).message === 'string'
+  ) {
+    return (value as { message: string }).message
+  }
+  if (value === undefined || value === null) {
+    return 'unknown error'
+  }
+  try {
+    return String(value)
+  } catch {
+    return 'unknown error'
+  }
+}
+
+/**
+ * Normalize an Error to a plain object so its fields survive `JSON.stringify`
+ * over the WS bridge. Error instances have `message`/`name`/`stack` as
+ * non-enumerable, which `JSON.stringify` would drop.
+ *
+ * Returns `undefined` when the input is undefined so callers can pass through
+ * possibly-undefined values without an extra branch.
+ */
+export function serializeError(
+  error: Error | undefined
+): SerializedError | undefined {
+  if (!error) {
+    return undefined
+  }
+  return { name: error.name, message: error.message, stack: error.stack }
+}
diff --git a/packages/core/src/finalize-screencast.ts b/packages/core/src/finalize-screencast.ts
new file mode 100644
index 00000000..ed0a2474
--- /dev/null
+++ b/packages/core/src/finalize-screencast.ts
@@ -0,0 +1,83 @@
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import type { ScreencastInfo } from '@wdio/devtools-shared'
+
+import type { ScreencastRecorderBase } from './screencast.js'
+import { errorMessage } from './error.js'
+import { encodeToVideo } from './video-encoder.js'
+
+export interface FinalizeScreencastInput {
+  recorder: ScreencastRecorderBase
+  sessionId: string
+  /** Filename without the .webm suffix (e.g. 'wdio-video', 'selenium-video'). */
+  filenamePrefix: string
+  /** Preferred output dir; falls back to cwd, then os.tmpdir() if unwritable. */
+  outputDir?: string
+  /** Skip encoding when the recorder collected fewer frames than this. */
+  minFrames?: number
+  captureFormat?: 'jpeg' | 'png'
+  /** Forward the encoded-video metadata to the dashboard. */
+  sendUpstream: (scope: string, data: ScreencastInfo) => void
+  /** Optional hook for adapter-side logging on each lifecycle step. */
+  onLog?: (level: 'info' | 'warn', message: string) => void
+}
+
+/**
+ * Stop the recorder, encode its frames to a `.webm` (preferred dir → cwd →
+ * tmpdir), and forward the metadata to the dashboard. All errors are caught
+ * and reported via `onLog` — screencast is best-effort and must not abort the
+ * run on stop/encode failure.
+ *
+ * Shared across all three adapters: each one provides only the recorder
+ * subclass, the filename prefix, and a sendUpstream binding to its
+ * SessionCapturer.
+ */
+export async function finalizeScreencast({
+  recorder,
+  sessionId,
+  filenamePrefix,
+  outputDir,
+  minFrames = 1,
+  captureFormat,
+  sendUpstream,
+  onLog
+}: FinalizeScreencastInput): Promise<void> {
+  const log = (level: 'info' | 'warn', message: string) =>
+    onLog?.(level, message)
+
+  try {
+    await recorder.stop()
+  } catch (err) {
+    log('warn', `Screencast stop failed: ${errorMessage(err)}`)
+    return
+  }
+
+  const frames = recorder.frames
+  if (frames.length < minFrames) {
+    return
+  }
+
+  const fileName = `${filenamePrefix}-${sessionId}.webm`
+  const candidate = outputDir || process.cwd()
+  let videoPath = path.join(candidate, fileName)
+  try {
+    fs.accessSync(candidate, fs.constants.W_OK)
+  } catch {
+    videoPath = path.join(os.tmpdir(), fileName)
+  }
+
+  try {
+    await encodeToVideo(frames, videoPath, { captureFormat })
+    log('info', `📹 Screencast video: ${videoPath}`)
+    sendUpstream('screencast', {
+      sessionId,
+      videoPath,
+      videoFile: fileName,
+      frameCount: frames.length,
+      duration: recorder.duration
+    })
+  } catch (err) {
+    log('warn', `Screencast encode failed: ${errorMessage(err)}`)
+  }
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
new file mode 100644
index 00000000..5e9c418e
--- /dev/null
+++ b/packages/core/src/index.ts
@@ -0,0 +1,15 @@
+// Framework-agnostic capture/reporter logic shared by @wdio/devtools-*
+// adapters. See ARCHITECTURE.md §2 and CLAUDE.md §2.2.
+
+export * from './console.js'
+export * from './uid.js'
+export * from './net.js'
+export * from './stack.js'
+export * from './error.js'
+export * from './finalize-screencast.js'
+export * from './retry-tracker.js'
+export * from './screencast.js'
+export * from './script-loader.js'
+export * from './session-capturer.js'
+export * from './test-reporter.js'
+export * from './video-encoder.js'
diff --git a/packages/core/src/net.ts b/packages/core/src/net.ts
new file mode 100644
index 00000000..eaf385da
--- /dev/null
+++ b/packages/core/src/net.ts
@@ -0,0 +1,76 @@
+import * as net from 'node:net'
+
+/**
+ * Return true if the given TCP port on `hostname` cannot be bound for
+ * listening (already in use, or otherwise unavailable).
+ */
+export function isPortInUse(port: number, hostname: string): Promise<boolean> {
+  return new Promise((resolve) => {
+    const server = net.createServer()
+    server.once('error', () => resolve(true))
+    server.once('listening', () => server.close(() => resolve(false)))
+    server.listen(port, hostname)
+  })
+}
+
+/**
+ * Walk upward from `startPort` until a free port is found and return it.
+ * Silent: callers that want to log retries should wrap this themselves.
+ */
+export async function findFreePort(
+  startPort: number,
+  hostname: string
+): Promise<number> {
+  let port = startPort
+  while (await isPortInUse(port, hostname)) {
+    port++
+  }
+  return port
+}
+
+/**
+ * Classify an HTTP request into the categories the dashboard's Network tab
+ * uses, preferring the response `mimeType` and falling back to URL extension
+ * heuristics. Unknown shapes return `'xhr'`.
+ */
+export function getRequestType(url: string, mimeType?: string): string {
+  const contentType = mimeType?.toLowerCase() ?? ''
+  const urlLower = url.toLowerCase()
+  if (contentType.includes('text/html')) {
+    return 'document'
+  }
+  if (contentType.includes('text/css')) {
+    return 'stylesheet'
+  }
+  if (
+    contentType.includes('javascript') ||
+    contentType.includes('ecmascript')
+  ) {
+    return 'script'
+  }
+  if (contentType.includes('image/')) {
+    return 'image'
+  }
+  if (contentType.includes('font/') || contentType.includes('woff')) {
+    return 'font'
+  }
+  if (contentType.includes('application/json')) {
+    return 'fetch'
+  }
+  if (urlLower.endsWith('.html') || urlLower.endsWith('.htm')) {
+    return 'document'
+  }
+  if (urlLower.endsWith('.css')) {
+    return 'stylesheet'
+  }
+  if (urlLower.endsWith('.js') || urlLower.endsWith('.mjs')) {
+    return 'script'
+  }
+  if (/\.(png|jpg|jpeg|gif|svg|webp|ico)$/.test(urlLower)) {
+    return 'image'
+  }
+  if (/\.(woff|woff2|ttf|eot|otf)$/.test(urlLower)) {
+    return 'font'
+  }
+  return 'xhr'
+}
diff --git a/packages/core/src/retry-tracker.ts b/packages/core/src/retry-tracker.ts
new file mode 100644
index 00000000..332e3cdb
--- /dev/null
+++ b/packages/core/src/retry-tracker.ts
@@ -0,0 +1,62 @@
+/**
+ * Tiny state holder for command-retry detection. Both the selenium and
+ * nightwatch adapters need exactly this same pattern: compute a stable
+ * signature for the incoming command, compare it to the last one we
+ * captured, and treat a match as "the framework is retrying — replace the
+ * previous entry instead of pushing a new one".
+ *
+ * The signature is JSON-stringified `{command, args, src: callSource}`. Test
+ * boundaries (new test, new scenario) call `reset()` to drop the last
+ * signature so a deliberate re-run of the same call counts as a fresh
+ * command, not a retry.
+ */
+export class RetryTracker {
+  #lastSig: string | null = null
+  #lastId: number | null = null
+
+  /** Build the canonical signature used for retry-equality checks. */
+  static signature(
+    command: string,
+    args: unknown,
+    callSource?: string
+  ): string {
+    return JSON.stringify({ command, args, src: callSource ?? null })
+  }
+
+  /** True when the incoming signature matches the last captured one AND we
+   *  have an id to replace (otherwise there's nothing to replace yet). */
+  isRetry(sig: string): boolean {
+    return sig === this.#lastSig && this.#lastId !== null
+  }
+
+  /** The id of the last captured command, if any (for the replace-in-place
+   *  flow). */
+  get lastId(): number | null {
+    return this.#lastId
+  }
+
+  /** Record a fresh capture — sets both sig and id together. */
+  recordCapture(sig: string, id: number | null): void {
+    this.#lastSig = sig
+    this.#lastId = id
+  }
+
+  /** Record only the id (used by adapters that compute the sig but defer the
+   *  id assignment to after an async capture call). */
+  setLastId(id: number | null): void {
+    this.#lastId = id
+  }
+
+  /** Stage the sig before an async capture so the next call already sees the
+   *  signature change (prevents stale-sig matches on rapid back-to-back
+   *  commands). Pair with {@link setLastId} once the capture resolves. */
+  setLastSig(sig: string): void {
+    this.#lastSig = sig
+  }
+
+  /** Reset at test/scenario boundaries so the next capture is "fresh". */
+  reset(): void {
+    this.#lastSig = null
+    this.#lastId = null
+  }
+}
diff --git a/packages/core/src/screencast.ts b/packages/core/src/screencast.ts
new file mode 100644
index 00000000..892d1bcd
--- /dev/null
+++ b/packages/core/src/screencast.ts
@@ -0,0 +1,212 @@
+import type { ScreencastFrame, ScreencastOptions } from '@wdio/devtools-shared'
+import { SCREENCAST_DEFAULTS } from '@wdio/devtools-shared'
+
+/**
+ * Shared screencast scaffolding consumed by every adapter (service, selenium,
+ * nightwatch). Owns the frame buffer, public API (start/stop/setStartMarker,
+ * frames/duration/isRecording getters) and the polling fallback. Subclasses
+ * provide framework-specific driver access:
+ *
+ *   - `takeScreenshot()` — required. Used by the polling path.
+ *   - `tryStartCdp() / tryStopCdp()` — optional CDP push-mode override.
+ *     Default returns false → falls through to polling.
+ *
+ * Adapters that have a stable CDP escape hatch (WDIO via getPuppeteer,
+ * Selenium via createCDPConnection) override the CDP hooks. Nightwatch
+ * inherits the polling-only default — works on every browser Nightwatch
+ * supports without extra plumbing.
+ */
+export abstract class ScreencastRecorderBase<TDriver = unknown> {
+  protected buffer: ScreencastFrame[] = []
+  protected options: Required<ScreencastOptions>
+  protected driver?: TDriver
+  #pollTimer: ReturnType<typeof setInterval> | undefined
+  #isRecording = false
+  #cdpActive = false
+  #startIndex = 0
+  #startMarkerSet = false
+
+  constructor(options: ScreencastOptions = {}) {
+    this.options = { ...SCREENCAST_DEFAULTS, ...options }
+  }
+
+  /**
+   * Start recording. Tries the CDP fast-path first (if the subclass overrode
+   * `tryStartCdp`); falls back to screenshot polling otherwise. Safe to call
+   * even if the browser doesn't support screenshots — failures are logged and
+   * recording is simply skipped.
+   */
+  async start(driver: TDriver): Promise<void> {
+    if (this.#isRecording) {
+      return
+    }
+    this.driver = driver
+    const cdpOk = await this.tryStartCdp()
+    if (cdpOk) {
+      this.#cdpActive = true
+      this.#isRecording = true
+      return
+    }
+    await this.#startPolling()
+  }
+
+  /**
+   * Stop recording and release resources. Safe to call even if start() was
+   * never called or failed.
+   */
+  async stop(): Promise<void> {
+    if (!this.#isRecording) {
+      return
+    }
+    if (this.#cdpActive) {
+      await this.tryStopCdp()
+      this.#cdpActive = false
+    } else if (this.#pollTimer !== undefined) {
+      this.#stopPolling()
+    }
+    this.#isRecording = false
+  }
+
+  /**
+   * Mark the current frame position as the start of meaningful recording.
+   * Frames captured before this call (blank browser, pre-navigation pauses)
+   * are excluded from `frames`. Idempotent — only the first call takes effect.
+   */
+  setStartMarker(): void {
+    if (!this.#startMarkerSet) {
+      this.#startMarkerSet = true
+      this.#startIndex = this.buffer.length
+    }
+  }
+
+  /** Frames to encode — everything from the first meaningful action onwards. */
+  get frames(): ScreencastFrame[] {
+    return this.buffer.slice(this.#startIndex)
+  }
+
+  /** Duration in ms between first and last captured frame. Zero if <2 frames. */
+  get duration(): number {
+    const f = this.frames
+    if (f.length < 2) {
+      return 0
+    }
+    return f[f.length - 1].timestamp - f[0].timestamp
+  }
+
+  get isRecording(): boolean {
+    return this.#isRecording
+  }
+
+  // ─── Subclass hooks ──────────────────────────────────────────────────────
+
+  /**
+   * Capture a single screenshot via the framework's driver API. Used by the
+   * polling fallback. Return `null` to indicate a transient failure (loop
+   * continues); throw to abort polling entirely.
+   */
+  protected abstract takeScreenshot(): Promise<string | null>
+
+  /**
+   * Try to start CDP push-mode recording. Return `true` on success. Default
+   * returns `false` → caller falls back to polling. Subclasses that wire CDP
+   * push themselves (WDIO via Puppeteer, Selenium via createCDPConnection)
+   * override and push frames into `this.frames` directly when CDP fires.
+   */
+  protected async tryStartCdp(): Promise<boolean> {
+    return false
+  }
+
+  /** Stop the CDP push-mode session started by `tryStartCdp`. */
+  protected async tryStopCdp(): Promise<void> {
+    // no-op
+  }
+
+  /**
+   * Helper for CDP subclasses: push a frame onto the buffer with the right
+   * timestamp normalization (CDP gives seconds-as-float; we store ms).
+   */
+  protected pushCdpFrame(data: string, timestampSeconds?: number): void {
+    const timestamp =
+      typeof timestampSeconds === 'number'
+        ? Math.round(timestampSeconds * 1000)
+        : Date.now()
+    this.buffer.push({ data, timestamp })
+  }
+
+  /** Whether `setStartMarker` (or `markStartAtLatest`) has fired yet. */
+  protected get hasStartMarker(): boolean {
+    return this.#startMarkerSet
+  }
+
+  /**
+   * Anchor the start marker to the most recently pushed frame. Used by
+   * subclasses that detect the first content-bearing frame heuristically
+   * (e.g. selenium's blank-frame-byte-size threshold) and want to skip the
+   * preceding about:blank dead-air without waiting for an explicit caller.
+   */
+  protected markStartAtLatest(): void {
+    if (!this.#startMarkerSet) {
+      this.#startMarkerSet = true
+      this.#startIndex = Math.max(0, this.buffer.length - 1)
+    }
+  }
+
+  // ─── Polling implementation ─────────────────────────────────────────────
+
+  /**
+   * Hook fired when the polling loop starts. Default: no-op. Subclasses
+   * (adapters with their own logger) override to surface visibility.
+   */
+  protected onPollingStarted(_intervalMs: number): void {
+    // no-op
+  }
+
+  /** Hook fired when polling stops cleanly (driver still alive at the time). */
+  protected onPollingStopped(_frameCount: number): void {
+    // no-op
+  }
+
+  /** Hook fired when the polling fallback couldn't even take the first shot. */
+  protected onUnavailable(_err: unknown): void {
+    // no-op
+  }
+
+  // ─── Polling implementation ─────────────────────────────────────────────
+
+  async #startPolling(): Promise<void> {
+    try {
+      const first = await this.takeScreenshot()
+      if (first === null) {
+        this.onUnavailable(new Error('first screenshot returned null'))
+        return
+      }
+      this.buffer.push({ data: first, timestamp: Date.now() })
+
+      const intervalMs = this.options.pollIntervalMs
+      this.#pollTimer = setInterval(async () => {
+        try {
+          const data = await this.takeScreenshot()
+          if (data !== null) {
+            this.buffer.push({ data, timestamp: Date.now() })
+          }
+        } catch {
+          // Session ended mid-interval — stop polling gracefully.
+          this.#stopPolling()
+        }
+      }, intervalMs)
+
+      this.#isRecording = true
+      this.onPollingStarted(intervalMs)
+    } catch (err) {
+      this.onUnavailable(err)
+    }
+  }
+
+  #stopPolling(): void {
+    if (this.#pollTimer !== undefined) {
+      clearInterval(this.#pollTimer)
+      this.#pollTimer = undefined
+      this.onPollingStopped(this.buffer.length)
+    }
+  }
+}
diff --git a/packages/core/src/script-loader.ts b/packages/core/src/script-loader.ts
new file mode 100644
index 00000000..a17a472a
--- /dev/null
+++ b/packages/core/src/script-loader.ts
@@ -0,0 +1,41 @@
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+
+/**
+ * Load the `@wdio/devtools-script` browser preload, wrapped in an async IIFE
+ * so its top-level `await` works inside a regular `<script>` element body.
+ * Shared by selenium-devtools and nightwatch-devtools, which both inject the
+ * script via `document.createElement('script')` rather than BiDi preload (the
+ * WDIO service uses `browser.scriptAddPreloadScript`, which doesn't need the
+ * wrap and stays in its own adapter).
+ */
+export async function loadInjectableScript(): Promise<string> {
+  const scriptPath = require.resolve('@wdio/devtools-script')
+  const scriptDir = path.dirname(scriptPath)
+  const preloadScriptPath = path.join(scriptDir, 'script.js')
+  const scriptContent = await fs.readFile(preloadScriptPath, 'utf-8')
+  return `(async function() { ${scriptContent} })()`
+}
+
+/**
+ * Poll a readiness check until it returns true, or the attempts run out.
+ * Defaults to 5 × 200ms = up to 1 second total — chosen empirically to cover
+ * the async IIFE init time across browsers we test against.
+ */
+export async function pollUntilReady(
+  check: () => Promise<boolean>,
+  opts: { attempts?: number; intervalMs?: number } = {}
+): Promise<boolean> {
+  const attempts = opts.attempts ?? 5
+  const intervalMs = opts.intervalMs ?? 200
+  for (let i = 0; i < attempts; i++) {
+    await new Promise((resolve) => setTimeout(resolve, intervalMs))
+    if (await check()) {
+      return true
+    }
+  }
+  return false
+}
diff --git a/packages/core/src/session-capturer.ts b/packages/core/src/session-capturer.ts
new file mode 100644
index 00000000..5f130576
--- /dev/null
+++ b/packages/core/src/session-capturer.ts
@@ -0,0 +1,494 @@
+import fs from 'node:fs/promises'
+import { WebSocket } from 'ws'
+import type {
+  CommandLog,
+  ConsoleLog,
+  LogLevel,
+  LogSource,
+  Metadata,
+  NetworkRequest
+} from '@wdio/devtools-shared'
+import { WS_PATHS, WS_SCOPE } from '@wdio/devtools-shared'
+import {
+  CONSOLE_METHODS,
+  LOG_SOURCES,
+  SPINNER_RE,
+  createConsoleLogEntry,
+  detectLogLevel,
+  isInternalStreamLine,
+  stripAnsi
+} from './console.js'
+
+/**
+ * Foundation class for adapter SessionCapturers. Owns the cross-framework
+ * scaffolding (WS connection, console/stream patching, command id
+ * bookkeeping). Framework-specific event handling stays in subclasses.
+ *
+ * Step 2 of {@link file://./../../../SESSIONCAPTURER_EXTRACTION_PLAN.md}.
+ * **Not yet consumed by any adapter** — published so a future session can
+ * migrate adapter SessionCapturer classes one at a time.
+ */
+
+export interface SessionCapturerOptions {
+  hostname?: string
+  port?: number
+}
+
+type ConsoleMethod = (typeof CONSOLE_METHODS)[number]
+
+export abstract class SessionCapturerBase {
+  // ── State (mostly private; subclasses access shared ws via `this.ws`) ────
+  /**
+   * Exposed as `protected` so subclasses with framework-specific close/wait
+   * semantics (e.g. nightwatch's `closeWebSocket` with timeout) can operate
+   * on the socket directly. Default lifecycle is fully managed by the base.
+   */
+  protected ws: WebSocket | undefined
+  #hasConnected = false
+  #originalConsoleMethods: Record<ConsoleMethod, typeof console.log>
+  #originalStdoutWrite = process.stdout.write.bind(process.stdout)
+  #originalStderrWrite = process.stderr.write.bind(process.stderr)
+  // Two flags (not one): prevents re-entrant capture when console.* writes to
+  // stdout, OR when stream forwarding wants to log via console.
+  #isCapturingConsole = false
+  #isCapturingStream = false
+
+  // Command bookkeeping — used by adapters that emit commands themselves
+  // (nightwatch, selenium). The WDIO service adapter doesn't call sendCommand
+  // (WDIO owns the command lifecycle), so this state is harmless overhead.
+  // `protected` (not `#`) so subclasses can override the send/replace flow
+  // while still sharing the counter and de-dup set with base helpers.
+  protected commandCounter = 0
+  protected sentCommandIds = new Set<number>()
+
+  // Map of file path → source text. Populated by `captureSource` (also
+  // accessed by adapter-specific source-discovery flows, e.g. service's
+  // `ensureSourceLoaded` which parses `file://` locations first).
+  sources = new Map<string, string>()
+
+  // Captured trace payload — populated by `processTracePayload` (driven from
+  // adapter-specific `captureTrace` flows) and by direct pushes from BiDi/CDP
+  // listeners. Mutations stay `unknown[]` here because the canonical
+  // `TraceMutation` shape is a browser-only DOM type (script package); cross-
+  // package consumers treat the array as opaque.
+  commandsLog: CommandLog[] = []
+  consoleLogs: ConsoleLog[] = []
+  networkRequests: NetworkRequest[] = []
+  mutations: unknown[] = []
+  traceLogs: string[] = []
+  metadata?: Metadata
+
+  // ── Construction ────────────────────────────────────────────────────────
+  constructor(opts: SessionCapturerOptions = {}) {
+    const { hostname, port } = opts
+    if (hostname && port) {
+      this.ws = new WebSocket(`ws://${hostname}:${port}${WS_PATHS.worker}`)
+      this.ws.on('open', () => {
+        this.#hasConnected = true
+        this.onWsOpen()
+      })
+      this.ws.on('error', (err: unknown) => this.onWsError(err))
+      this.ws.on('close', () => this.onWsClose())
+      this.ws.on('message', (raw: Buffer | string) => {
+        try {
+          const parsed = JSON.parse(raw.toString())
+          this.onWsMessage(parsed)
+        } catch {
+          // ignore non-JSON
+        }
+      })
+    }
+
+    this.#originalConsoleMethods = {
+      log: console.log,
+      info: console.info,
+      warn: console.warn,
+      error: console.error
+    }
+  }
+
+  // ── Public API ──────────────────────────────────────────────────────────
+  /**
+   * Send a typed event to the dashboard. No-op if the WS isn't open. Catches
+   * send-time exceptions so a transient socket error never aborts the host
+   * runner. Subclasses that want diagnostics on drop or error override
+   * {@link onUpstreamDrop}.
+   */
+  sendUpstream(event: string, data: unknown): void {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      this.onUpstreamDrop(event, 'closed')
+      return
+    }
+    try {
+      this.ws.send(JSON.stringify({ scope: event, data }))
+    } catch (err) {
+      this.onUpstreamDrop(event, 'send-error', err)
+    }
+  }
+
+  /**
+   * Hook fired when a {@link sendUpstream} call can't deliver. Default: silent
+   * (matches the historical behavior of service/selenium). Nightwatch overrides
+   * this to log a warning — useful when a runner drops mid-test and the user
+   * needs to know why captured data is incomplete.
+   */
+  protected onUpstreamDrop(
+    _event: string,
+    _reason: 'closed' | 'send-error',
+    _err?: unknown
+  ): void {
+    // no-op
+  }
+
+  /** True once the WS has opened at least once and is currently OPEN. */
+  isConnected(): boolean {
+    return Boolean(this.ws) && this.ws?.readyState === WebSocket.OPEN
+  }
+
+  /** Property-style alias for {@link isConnected} — used by tests that
+   *  read it as a getter while mutating `ws.readyState` directly. */
+  get isReportingUpstream(): boolean {
+    return this.isConnected()
+  }
+
+  /** Subclasses can read this to gate retry/reconnect logic. */
+  protected hasEverConnected(): boolean {
+    return this.#hasConnected
+  }
+
+  /**
+   * Send a CommandLog over the WS. If the entry already has an `_id` (set by
+   * the adapter's `captureCommand` during buffering), use it; otherwise
+   * allocate a fresh one. The `_id` is the de-dup key and is stripped from
+   * the broadcast payload — it's adapter-internal bookkeeping.
+   * Returns the id, or 0 if the entry had no `_id` and none could be assigned.
+   */
+  sendCommand(command: CommandLog & { _id?: number }): number {
+    if (command._id === undefined) {
+      command._id = this.commandCounter++
+    }
+    const id = command._id
+    if (this.sentCommandIds.has(id)) {
+      return id
+    }
+    this.sentCommandIds.add(id)
+    const toSend = { ...command }
+    delete toSend._id
+    this.sendUpstream('commands', [toSend])
+    return id
+  }
+
+  /**
+   * Emit a `replaceCommand` event swapping an earlier entry in-place. Strips
+   * the adapter-internal `_id` field before sending — that's bookkeeping for
+   * the local `sentCommandIds` set and shouldn't reach the UI.
+   */
+  sendReplaceCommand(
+    oldTimestamp: number,
+    command: CommandLog & { _id?: number }
+  ): void {
+    const toSend = { ...command }
+    delete toSend._id
+    this.sendUpstream(WS_SCOPE.replaceCommand, {
+      oldTimestamp,
+      command: toSend
+    })
+  }
+
+  /**
+   * Read a file from disk, store in `sources`, and broadcast to the UI via
+   * `sendUpstream('sources', { [path]: text })`. Idempotent — a cached path is
+   * a no-op. Read errors are logged via `onSourceReadError` (default: silent)
+   * so a missing source never aborts capture.
+   */
+  async captureSource(filePath: string): Promise<void> {
+    if (this.sources.has(filePath)) {
+      return
+    }
+    try {
+      const source = (await fs.readFile(filePath, 'utf-8')).toString()
+      this.sources.set(filePath, source)
+      this.sendUpstream('sources', { [filePath]: source })
+    } catch (err) {
+      this.onSourceReadError(filePath, err)
+    }
+  }
+
+  /**
+   * Hook fired when `captureSource` can't read a file. Default: silent.
+   * Subclasses (nightwatch, selenium) override to log a warning.
+   */
+  protected onSourceReadError(_filePath: string, _err: unknown): void {
+    // no-op — service silently swallows; subclasses can opt into a log line.
+  }
+
+  /**
+   * Ingest the `{ mutations, traceLogs, consoleLogs, networkRequests, metadata }`
+   * payload returned by the page-side `wdioTraceCollector.getTraceData()`.
+   * Tags console logs with `source: 'browser'`, pushes each array into the
+   * matching local field, and broadcasts via the appropriate WS scopes.
+   *
+   * `skipConsoleLogs` / `skipNetworkRequests` opt out when an out-of-band
+   * channel (BiDi) is already delivering those streams — without the gate
+   * the dashboard would see each entry twice.
+   */
+  protected processTracePayload(
+    payload: {
+      mutations?: unknown
+      traceLogs?: unknown
+      consoleLogs?: unknown
+      networkRequests?: unknown
+      metadata?: unknown
+    },
+    opts: { skipConsoleLogs?: boolean; skipNetworkRequests?: boolean } = {}
+  ): void {
+    const { mutations, traceLogs, consoleLogs, networkRequests, metadata } =
+      payload
+
+    if (metadata && typeof metadata === 'object') {
+      // Page-side trace data is a JS bag; only fields that match Metadata
+      // survive at runtime, but TS can't prove that. Cast to Partial<Metadata>
+      // so the merge stays type-checked while accepting incomplete payloads.
+      this.metadata = {
+        ...this.metadata,
+        ...(metadata as Partial<Metadata>)
+      } as Metadata
+      this.sendUpstream('metadata', this.metadata)
+    }
+
+    if (
+      !opts.skipConsoleLogs &&
+      Array.isArray(consoleLogs) &&
+      consoleLogs.length > 0
+    ) {
+      const tagged = (consoleLogs as ConsoleLog[]).map((entry) => ({
+        ...entry,
+        source: LOG_SOURCES.BROWSER as LogSource
+      }))
+      this.consoleLogs.push(...tagged)
+      this.sendUpstream('consoleLogs', tagged)
+    }
+
+    if (
+      !opts.skipNetworkRequests &&
+      Array.isArray(networkRequests) &&
+      networkRequests.length > 0
+    ) {
+      const reqs = networkRequests as NetworkRequest[]
+      this.networkRequests.push(...reqs)
+      this.sendUpstream('networkRequests', reqs)
+    }
+
+    if (Array.isArray(mutations) && mutations.length > 0) {
+      this.mutations.push(...mutations)
+      this.sendUpstream('mutations', mutations)
+    }
+
+    if (Array.isArray(traceLogs) && traceLogs.length > 0) {
+      const logs = traceLogs as string[]
+      this.traceLogs.push(...logs)
+      this.sendUpstream('logs', logs)
+    }
+  }
+
+  /**
+   * Resolve when the WS reaches OPEN state, or `false` on timeout / error.
+   * Returns immediately if already open. Used by adapters that need a
+   * synchronization barrier before injecting page-side scripts.
+   */
+  async waitForConnection(timeoutMs = 5000): Promise<boolean> {
+    if (!this.ws) {
+      return false
+    }
+    if (this.ws.readyState === WebSocket.OPEN) {
+      return true
+    }
+    return new Promise((resolve) => {
+      const timeout = setTimeout(() => resolve(false), timeoutMs)
+      this.ws!.once('open', () => {
+        clearTimeout(timeout)
+        resolve(true)
+      })
+      this.ws!.once('error', () => {
+        clearTimeout(timeout)
+        resolve(false)
+      })
+    })
+  }
+
+  /**
+   * Gracefully close the WS, waiting up to 2s for buffered messages to flush.
+   * Call before process exit in reuse mode (or after dashboard close) so the
+   * backend sees a clean close instead of an abrupt TCP reset.
+   */
+  async closeWebSocket(): Promise<void> {
+    if (!this.ws || this.ws.readyState === WebSocket.CLOSED) {
+      return
+    }
+    return new Promise<void>((resolve) => {
+      const timeout = setTimeout(resolve, 2000)
+      this.ws!.once('close', () => {
+        clearTimeout(timeout)
+        resolve()
+      })
+      this.ws!.close()
+    })
+  }
+
+  /**
+   * Restore console/streams. Does NOT close the WS — that's the subclass's
+   * call (see `closeWebSocket` on nightwatch/selenium). Closing here would
+   * break the wait-for-dashboard-close flow, since the worker WS is the
+   * channel the backend uses to signal `clientDisconnected`.
+   */
+  cleanup(): void {
+    this.restoreConsole()
+    this.restoreStreams()
+  }
+
+  // ── Patching (call from subclass constructor) ───────────────────────────
+  /** Patch `console.log/info/warn/error` to forward through `onLine`. */
+  protected patchConsole(): void {
+    CONSOLE_METHODS.forEach((method) => {
+      const original = this.#originalConsoleMethods[method]
+      console[method] = (...args: any[]) => {
+        this.#isCapturingConsole = true
+        const result = original.apply(console, args)
+        this.#isCapturingConsole = false
+
+        const serialized = args.map((a) =>
+          typeof a === 'object' && a !== null ? safeStringify(a) : String(a)
+        )
+        const joined = stripAnsi(serialized.join(' ')).trim()
+        if (!joined || this.isInternalStreamLine(joined)) {
+          return result
+        }
+        // Pass the per-arg serialized array (`['payload', '{"x":1}']`) rather
+        // than the joined string. The dashboard's `#formatArgs` joins on its
+        // own; preserving the array form is lossless and lets future consumers
+        // group/style individual args.
+        this.onLine(method as LogLevel, serialized, LOG_SOURCES.TEST)
+        return result
+      }
+    })
+  }
+
+  /**
+   * Wrap `process.stdout.write` and `process.stderr.write` to forward chunks
+   * through `onLine`. The base's `#isCapturingConsole` flag prevents
+   * re-entrance when console patching itself writes to stdout.
+   */
+  protected patchStreams(): void {
+    const captureChunk = (raw: string | Uint8Array) => {
+      if (this.#isCapturingStream) {
+        return
+      }
+      const text = typeof raw === 'string' ? raw : raw.toString()
+      if (!text?.trim()) {
+        return
+      }
+      this.#isCapturingStream = true
+      try {
+        for (const rawLine of text.split('\n')) {
+          // Strip CR-overwrites so progress bars don't show partial frames.
+          const segments = rawLine.split('\r').filter((s) => s.trim())
+          const lastSegment = segments[segments.length - 1] ?? rawLine
+          const clean = stripAnsi(lastSegment).trim()
+          if (
+            !clean ||
+            this.isInternalStreamLine(clean) ||
+            SPINNER_RE.test(clean)
+          ) {
+            continue
+          }
+          this.onLine(detectLogLevel(clean), [clean], LOG_SOURCES.TERMINAL)
+        }
+      } finally {
+        this.#isCapturingStream = false
+      }
+    }
+
+    const wrap = (
+      stream: NodeJS.WriteStream,
+      original: (...a: any[]) => boolean
+    ) => {
+      const capturer = this
+      // `stream.write` has Node's multi-overload signature that's hard to
+      // satisfy with a single function expression — cast to the stream's
+      // own `write` member type rather than `any`.
+      stream.write = function (chunk: unknown, ...rest: unknown[]): boolean {
+        const result = original.call(stream, chunk, ...rest)
+        if (chunk && !capturer.#isCapturingConsole) {
+          captureChunk(chunk as string | Uint8Array)
+        }
+        return result
+      } as typeof stream.write
+    }
+
+    wrap(process.stdout, this.#originalStdoutWrite)
+    wrap(process.stderr, this.#originalStderrWrite)
+  }
+
+  protected restoreConsole(): void {
+    CONSOLE_METHODS.forEach((method) => {
+      console[method] = this.#originalConsoleMethods[method]
+    })
+  }
+
+  protected restoreStreams(): void {
+    // Restoring the pre-patch references — the typed write signature differs
+    // slightly from the runtime instance type after `.bind()`, hence the cast
+    // through the stream's own `write` member type.
+    process.stdout.write = this
+      .#originalStdoutWrite as typeof process.stdout.write
+    process.stderr.write = this
+      .#originalStderrWrite as typeof process.stderr.write
+  }
+
+  // ── Hooks (subclasses override) ─────────────────────────────────────────
+  /**
+   * Default: forward a single ConsoleLog via the `consoleLogs` scope.
+   * Args is passed as an array (matching the original console.* call shape:
+   * `console.log('a', 'b')` → `args = ['a', 'b']`) so subclasses can preserve
+   * the multi-argument structure for the UI.
+   *
+   * Subclasses that need to maintain local capture state (for the rerun/
+   * replay flow) should override to also push the entry into their own
+   * array — see service's onLine override.
+   */
+  protected onLine(type: LogLevel, args: string[], source: LogSource): void {
+    const entry = createConsoleLogEntry(type, args, source)
+    this.sendUpstream('consoleLogs', [entry])
+  }
+
+  /**
+   * Default delegates to {@link isInternalStreamLine} from `./console.js`.
+   * Subclasses can override to add framework-specific filters.
+   */
+  protected isInternalStreamLine(line: string): boolean {
+    return isInternalStreamLine(line)
+  }
+
+  /** Hook: WS opened. Subclasses override to send a handshake, etc. */
+  protected onWsOpen(): void {}
+
+  /** Hook: WS errored before opening (likely no backend listening). */
+  protected onWsError(_err: unknown): void {}
+
+  /** Hook: WS closed (after open, or as a result of cleanup). */
+  protected onWsClose(): void {}
+
+  /**
+   * Hook: WS message received from the backend. Currently used by selenium's
+   * `awaitClientConnected` to know when a dashboard tab has subscribed.
+   */
+  protected onWsMessage(_msg: unknown): void {}
+}
+
+function safeStringify(value: unknown): string {
+  try {
+    return JSON.stringify(value)
+  } catch {
+    return String(value)
+  }
+}
diff --git a/packages/core/src/stack.ts b/packages/core/src/stack.ts
new file mode 100644
index 00000000..b414d27c
--- /dev/null
+++ b/packages/core/src/stack.ts
@@ -0,0 +1,58 @@
+import { parse as parseStackTrace } from 'stacktrace-parser'
+
+/**
+ * Return true if a stack frame belongs to user code (not dependencies, Node
+ * internals, build output, or a generic `index.js` entry point).
+ */
+export function isUserCodeFrame(frame: {
+  file?: string | null
+}): frame is { file: string } {
+  const { file } = frame
+  return !!(
+    file &&
+    !file.includes('/node_modules/') &&
+    !file.includes('<anonymous>') &&
+    !file.includes('node:internal') &&
+    !file.includes('/dist/') &&
+    !file.endsWith('/index.js')
+  )
+}
+
+/**
+ * Strip the `file://` protocol, any trailing `:line:col` suffix, and
+ * percent-decode the result. Node's ESM stack traces use file:// URLs which
+ * URL-encode spaces — without decoding, `fs.readFile` hits ENOENT on any
+ * path that contains one. Falls back to the literal path if decoding fails.
+ */
+export function normalizeFilePath(filePath: string): string {
+  const stripped = filePath.replace(/^file:\/\//, '').split(':')[0]
+  try {
+    return decodeURIComponent(stripped)
+  } catch {
+    return stripped
+  }
+}
+
+/**
+ * Capture `{ filePath, callSource }` for the first user-code frame on the
+ * current stack. `callSource` is `<file>:<line>` for the UI's source-location
+ * displays; returns `'unknown:0'` (and `undefined` filePath) when no user
+ * frame can be found.
+ */
+export function getCallSourceFromStack(): {
+  filePath: string | undefined
+  callSource: string
+} {
+  const stack = new Error().stack
+  if (!stack) {
+    return { filePath: undefined, callSource: 'unknown:0' }
+  }
+
+  const frame = parseStackTrace(stack).find(isUserCodeFrame)
+  if (!frame?.file) {
+    return { filePath: undefined, callSource: 'unknown:0' }
+  }
+
+  const filePath = normalizeFilePath(frame.file)
+  return { filePath, callSource: `${filePath}:${frame.lineNumber ?? 0}` }
+}
diff --git a/packages/core/src/test-reporter.ts b/packages/core/src/test-reporter.ts
new file mode 100644
index 00000000..b9863bd3
--- /dev/null
+++ b/packages/core/src/test-reporter.ts
@@ -0,0 +1,87 @@
+import type { SuiteStats, TestStats } from '@wdio/devtools-shared'
+import { resetSignatureCounters } from './uid.js'
+
+/**
+ * Shape of the payload sent upstream — one record per suite, keyed by UID,
+ * so the UI can merge it into its existing suite map without scanning.
+ */
+export type ReporterUpstreamPayload = Record<string, SuiteStats>[]
+export type ReporterUpstream = (data: ReporterUpstreamPayload) => void
+
+/**
+ * Foundation class for adapter TestReporters. Owns the cross-framework
+ * scaffolding (suite collection, upstream batching). Framework-specific
+ * lifecycle hooks (spec-file scanning, UID generation, skipped-test
+ * synthesis) stay in subclasses.
+ *
+ * Service uses the WDIO reporter base instead — this class is for adapters
+ * that own their own reporter lifecycle (nightwatch, selenium).
+ */
+export abstract class TestReporterBase {
+  #report: ReporterUpstream
+  protected allSuites: SuiteStats[] = []
+
+  constructor(report: ReporterUpstream) {
+    this.#report = report
+    resetSignatureCounters()
+  }
+
+  /** Swap the upstream sink, e.g. after a WS reconnect. */
+  updateUpstream(report: ReporterUpstream): void {
+    this.#report = report
+  }
+
+  /** Manually trigger a flush of current state to the UI. */
+  updateSuites(): void {
+    this.sendUpstream()
+  }
+
+  /**
+   * Reset collected state. Subclasses with extra state (test-name cache,
+   * current-suite ref) override and call `super.clearExecutionData()` first.
+   */
+  clearExecutionData(): void {
+    this.allSuites = []
+    resetSignatureCounters()
+  }
+
+  /** Default: find by `uid`, replace in place. */
+  onTestEnd(test: TestStats): void {
+    for (const suite of this.allSuites) {
+      const idx = suite.tests.findIndex(
+        (t) => typeof t !== 'string' && t.uid === test.uid
+      )
+      if (idx !== -1) {
+        suite.tests[idx] = test
+        break
+      }
+    }
+    this.sendUpstream()
+  }
+
+  /** Default: just flush. Subclasses with skipped-test synthesis override. */
+  onSuiteEnd(_suite: SuiteStats): void {
+    this.sendUpstream()
+  }
+
+  get report(): SuiteStats[] {
+    return this.allSuites
+  }
+
+  /**
+   * Flush current suite state to the upstream callback. Empty-payload guard
+   * matches the existing adapter behavior — UI shouldn't receive an empty
+   * array.
+   */
+  protected sendUpstream(): void {
+    const payload: ReporterUpstreamPayload = []
+    for (const suite of this.allSuites) {
+      if (suite.uid) {
+        payload.push({ [suite.uid]: suite })
+      }
+    }
+    if (payload.length > 0) {
+      this.#report(payload)
+    }
+  }
+}
diff --git a/packages/core/src/uid.ts b/packages/core/src/uid.ts
new file mode 100644
index 00000000..40ee085f
--- /dev/null
+++ b/packages/core/src/uid.ts
@@ -0,0 +1,41 @@
+// Stable UID generation for tests and suites. The hash function is a tiny
+// djb2-style char-code accumulator that produces compact base36 strings.
+// "Stable" means: the same input produces the same output across runs.
+
+/**
+ * Hash arbitrary string parts into a stable, deterministic UID. Calling this
+ * multiple times with the same inputs always returns the same value — no
+ * counter, no hidden state. Use for entities that must map to the same UID
+ * across retries (Cucumber scenarios, feature steps, etc.).
+ */
+export function deterministicUid(...parts: string[]): string {
+  const hash = parts
+    .join('::')
+    .split('')
+    .reduce((acc, char) => ((acc << 5) - acc + char.charCodeAt(0)) | 0, 0)
+  return `stable-${Math.abs(hash).toString(36)}`
+}
+
+// Counter for disambiguating repeated (file, name) signatures within a single
+// test run. Cleared by resetSignatureCounters() between runs.
+const signatureCounters = new Map<string, number>()
+
+/**
+ * Generate a UID from a (file, name) pair, disambiguating repeated calls with
+ * the same inputs via an in-run counter. Use for test/suite identity where
+ * the same file::name combo may legitimately appear multiple times in one run
+ * (e.g. parameterised tests). For entities that must produce the same UID on
+ * every retry (Cucumber scenarios), use {@link deterministicUid} instead.
+ */
+export function generateStableUid(file: string, name: string): string {
+  const signature = `${file}::${name}`
+  const count = signatureCounters.get(signature) ?? 0
+  signatureCounters.set(signature, count + 1)
+  const input = count > 0 ? `${signature}::${count}` : signature
+  return deterministicUid(input)
+}
+
+/** Reset the signature counter map. Call at the start of each test run. */
+export function resetSignatureCounters(): void {
+  signatureCounters.clear()
+}
diff --git a/packages/selenium-devtools/src/helpers/videoEncoder.ts b/packages/core/src/video-encoder.ts
similarity index 67%
rename from packages/selenium-devtools/src/helpers/videoEncoder.ts
rename to packages/core/src/video-encoder.ts
index ef662bf0..e2b17698 100644
--- a/packages/selenium-devtools/src/helpers/videoEncoder.ts
+++ b/packages/core/src/video-encoder.ts
@@ -1,17 +1,33 @@
-// VP8/WebM encoder for screencast frames.
+// VP8/WebM encoder for screencast frames. Loads fluent-ffmpeg lazily via
+// createRequire so the dep stays optional — adapters that ship screencast
+// support are expected to list fluent-ffmpeg in their own dependencies.
 
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import os from 'node:os'
 import { createRequire } from 'node:module'
 
-import logger from '@wdio/logger'
-
-import type { ScreencastFrame, ScreencastOptions } from '../types.js'
+import type { ScreencastFrame, ScreencastOptions } from '@wdio/devtools-shared'
 
 const require = createRequire(import.meta.url)
-const log = logger('@wdio/selenium-devtools:VideoEncoder')
 
+/**
+ * Encode an array of CDP screencast frames into a .webm file using ffmpeg
+ * (via fluent-ffmpeg) and the VP8 codec (libvpx).
+ *
+ * Strategy:
+ *   1. Write each frame as a JPEG (or PNG) file in a temp directory.
+ *   2. Write an ffconcat manifest that assigns each frame its exact display
+ *      duration based on the inter-frame timestamp delta. Variable-frame-rate
+ *      output reflects real timing even across long command pauses.
+ *   3. Run ffmpeg with the concat demuxer → libvpx (VP8) → .webm output.
+ *      Force CFR at 10fps — VFR WebMs don't write Cues reliably, so the
+ *      dashboard `<video>` can't read duration/seek without it.
+ *   4. Clean up the temp directory regardless of success or failure.
+ *
+ * @throws If no frames are provided, fluent-ffmpeg is not installed, or
+ *         the ffmpeg binary is not found on PATH.
+ */
 export async function encodeToVideo(
   frames: ScreencastFrame[],
   outputPath: string,
@@ -21,16 +37,6 @@ export async function encodeToVideo(
     throw new Error('VideoEncoder: no frames to encode')
   }
 
-  const span = frames[frames.length - 1].timestamp - frames[0].timestamp
-  const totalBytes = frames.reduce(
-    (sum, f) => sum + Math.floor((f.data?.length ?? 0) * 0.75),
-    0
-  )
-  log.info(
-    `🎬 Encoding ${frames.length} frame(s), captured over ${(span / 1000).toFixed(1)}s ` +
-      `(~${(totalBytes / 1024 / 1024).toFixed(1)} MB raw)`
-  )
-
   let ffmpeg: any
   try {
     ffmpeg = require('fluent-ffmpeg')
@@ -43,7 +49,7 @@ export async function encodeToVideo(
 
   const ext = options.captureFormat === 'png' ? 'png' : 'jpg'
   const tmpDir = await fs.mkdtemp(
-    path.join(os.tmpdir(), 'selenium-devtools-screencast-')
+    path.join(os.tmpdir(), 'devtools-screencast-')
   )
 
   try {
@@ -59,6 +65,8 @@ export async function encodeToVideo(
       manifestLines.push(`duration ${durationSecs.toFixed(6)}`)
     }
 
+    // The last frame needs to appear twice in the manifest — ffconcat ignores
+    // the final `duration` directive without a trailing `file` line.
     const lastFramePath = path.join(
       tmpDir,
       `frame-${String(frames.length - 1).padStart(6, '0')}.${ext}`
@@ -68,8 +76,6 @@ export async function encodeToVideo(
     const manifestPath = path.join(tmpDir, 'manifest.txt')
     await fs.writeFile(manifestPath, manifestLines.join('\n'))
 
-    log.info(`encoding ${frames.length} frames → ${outputPath}`)
-
     await new Promise<void>((resolve, reject) => {
       ffmpeg()
         .input(manifestPath)
@@ -80,8 +86,6 @@ export async function encodeToVideo(
           '1M',
           '-pix_fmt',
           'yuv420p',
-          // CFR @ 10fps — VFR WebMs don't write Cues reliably, so the
-          // dashboard's <video> can't read duration/seek.
           '-vsync',
           'cfr',
           '-r',
@@ -113,11 +117,9 @@ export async function encodeToVideo(
         })
         .run()
     })
-
-    log.info(`✓ video saved: ${outputPath}`)
   } finally {
-    await fs.rm(tmpDir, { recursive: true, force: true }).catch((rmErr) => {
-      log.warn(`failed to clean temp dir — ${rmErr.message}`)
+    await fs.rm(tmpDir, { recursive: true, force: true }).catch(() => {
+      /* tmp cleanup is best-effort */
     })
   }
 }
diff --git a/packages/core/tests/error.test.ts b/packages/core/tests/error.test.ts
new file mode 100644
index 00000000..8101dc88
--- /dev/null
+++ b/packages/core/tests/error.test.ts
@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest'
+import { toError, serializeError, errorMessage } from '../src/error.js'
+
+describe('toError', () => {
+  it('returns the input unchanged when it is already an Error', () => {
+    const err = new Error('boom')
+    expect(toError(err)).toBe(err)
+  })
+
+  it('preserves Error subclass instances', () => {
+    const err = new TypeError('bad type')
+    expect(toError(err)).toBe(err)
+    expect(toError(err) instanceof TypeError).toBe(true)
+  })
+
+  it('wraps a plain object with a .message field into an Error preserving message + name', () => {
+    const out = toError({
+      message: 'nightwatch failed',
+      name: 'AssertionError'
+    })
+    expect(out).toBeInstanceOf(Error)
+    expect(out.message).toBe('nightwatch failed')
+    expect(out.name).toBe('AssertionError')
+  })
+
+  it('falls back to the default Error name when an object has no .name', () => {
+    const out = toError({ message: 'oops' })
+    expect(out.name).toBe('Error')
+  })
+
+  it('stringifies a thrown string', () => {
+    expect(toError('something broke').message).toBe('something broke')
+  })
+
+  it('stringifies thrown numbers/null/undefined safely', () => {
+    expect(toError(42).message).toBe('42')
+    expect(toError(null).message).toBe('null')
+    expect(toError(undefined).message).toBe('undefined')
+  })
+
+  it('ignores a non-string .name field on an object with .message', () => {
+    const out = toError({ message: 'm', name: 123 as unknown as string })
+    expect(out.name).toBe('Error')
+  })
+})
+
+describe('errorMessage', () => {
+  it('reads .message from an Error', () => {
+    expect(errorMessage(new Error('boom'))).toBe('boom')
+  })
+
+  it('reads .message from Error subclasses', () => {
+    expect(errorMessage(new TypeError('bad type'))).toBe('bad type')
+  })
+
+  it('returns a thrown string unchanged', () => {
+    expect(errorMessage('something broke')).toBe('something broke')
+  })
+
+  it('reads .message from a plain object with one', () => {
+    expect(errorMessage({ message: 'nightwatch failed' })).toBe(
+      'nightwatch failed'
+    )
+  })
+
+  it('returns "unknown error" for null/undefined', () => {
+    expect(errorMessage(null)).toBe('unknown error')
+    expect(errorMessage(undefined)).toBe('unknown error')
+  })
+
+  it('stringifies primitives that are neither Error nor string', () => {
+    expect(errorMessage(42)).toBe('42')
+    expect(errorMessage(true)).toBe('true')
+  })
+
+  it('falls back to String() for plain objects without .message', () => {
+    expect(errorMessage({ foo: 'bar' })).toBe('[object Object]')
+  })
+})
+
+describe('serializeError', () => {
+  it('returns undefined for undefined input', () => {
+    expect(serializeError(undefined)).toBeUndefined()
+  })
+
+  it('produces a JSON-safe shape with name/message/stack', () => {
+    const err = new Error('boom')
+    const out = serializeError(err)
+    expect(out).toEqual({
+      name: 'Error',
+      message: 'boom',
+      stack: err.stack
+    })
+  })
+
+  it('preserves the subclass name', () => {
+    const err = new TypeError('bad type')
+    expect(serializeError(err)?.name).toBe('TypeError')
+  })
+})
diff --git a/packages/core/tests/retry-tracker.test.ts b/packages/core/tests/retry-tracker.test.ts
new file mode 100644
index 00000000..bd0aaaf9
--- /dev/null
+++ b/packages/core/tests/retry-tracker.test.ts
@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest'
+import { RetryTracker } from '../src/retry-tracker.js'
+
+describe('RetryTracker.signature', () => {
+  it('produces a stable JSON shape for identical inputs', () => {
+    expect(RetryTracker.signature('click', [{ id: 1 }], 'a.ts:5')).toBe(
+      RetryTracker.signature('click', [{ id: 1 }], 'a.ts:5')
+    )
+  })
+
+  it('changes when the command differs', () => {
+    const a = RetryTracker.signature('click', [], 'a.ts:5')
+    const b = RetryTracker.signature('doubleClick', [], 'a.ts:5')
+    expect(a).not.toBe(b)
+  })
+
+  it('changes when the args differ', () => {
+    const a = RetryTracker.signature('click', [{ x: 1 }], 'a.ts:5')
+    const b = RetryTracker.signature('click', [{ x: 2 }], 'a.ts:5')
+    expect(a).not.toBe(b)
+  })
+
+  it('changes when the callSource differs', () => {
+    const a = RetryTracker.signature('click', [], 'a.ts:5')
+    const b = RetryTracker.signature('click', [], 'a.ts:6')
+    expect(a).not.toBe(b)
+  })
+
+  it('treats missing callSource the same regardless of how it was passed', () => {
+    expect(RetryTracker.signature('click', [], undefined)).toBe(
+      RetryTracker.signature('click', [])
+    )
+  })
+})
+
+describe('RetryTracker.isRetry', () => {
+  it('returns false for a fresh tracker (no last capture)', () => {
+    const t = new RetryTracker()
+    expect(t.isRetry(RetryTracker.signature('click', []))).toBe(false)
+  })
+
+  it('returns false when only the signature was staged but no id was recorded', () => {
+    const t = new RetryTracker()
+    const sig = RetryTracker.signature('click', [])
+    t.setLastSig(sig)
+    // No lastId yet → cannot replace, not a retry.
+    expect(t.isRetry(sig)).toBe(false)
+  })
+
+  it('returns true when sig matches AND an id was recorded', () => {
+    const t = new RetryTracker()
+    const sig = RetryTracker.signature('click', [])
+    t.recordCapture(sig, 42)
+    expect(t.isRetry(sig)).toBe(true)
+    expect(t.lastId).toBe(42)
+  })
+
+  it('returns false when the incoming sig differs from the last capture', () => {
+    const t = new RetryTracker()
+    t.recordCapture(RetryTracker.signature('click', []), 1)
+    expect(t.isRetry(RetryTracker.signature('doubleClick', []))).toBe(false)
+  })
+})
+
+describe('RetryTracker.reset', () => {
+  it('clears both the signature and the id', () => {
+    const t = new RetryTracker()
+    const sig = RetryTracker.signature('click', [])
+    t.recordCapture(sig, 1)
+    t.reset()
+    expect(t.isRetry(sig)).toBe(false)
+    expect(t.lastId).toBeNull()
+  })
+})
+
+describe('staged-then-resolved flow (nightwatch pattern)', () => {
+  it('stages sig before async capture; id arrives later; subsequent same-sig command is a retry', () => {
+    const t = new RetryTracker()
+    const sig = RetryTracker.signature('click', [{ x: 1 }], 'a.ts:5')
+
+    // Pre-capture: stage the sig before kicking off the async capture.
+    t.setLastSig(sig)
+    t.setLastId(null)
+    expect(t.isRetry(sig)).toBe(false) // id not set yet — can't replace
+
+    // After capture completes:
+    t.setLastId(7)
+    expect(t.isRetry(sig)).toBe(true) // now a retry of the same call IS detected
+    expect(t.lastId).toBe(7)
+  })
+})
diff --git a/packages/core/tests/script-loader.test.ts b/packages/core/tests/script-loader.test.ts
new file mode 100644
index 00000000..d1a9af43
--- /dev/null
+++ b/packages/core/tests/script-loader.test.ts
@@ -0,0 +1,41 @@
+import { describe, it, expect, vi } from 'vitest'
+import { pollUntilReady } from '../src/script-loader.js'
+
+describe('pollUntilReady', () => {
+  it('returns true as soon as the check succeeds', async () => {
+    let calls = 0
+    const ok = await pollUntilReady(
+      async () => {
+        calls++
+        return calls === 2
+      },
+      { attempts: 5, intervalMs: 1 }
+    )
+    expect(ok).toBe(true)
+    expect(calls).toBe(2)
+  })
+
+  it('returns false when no attempt succeeds', async () => {
+    const check = vi.fn(async () => false)
+    const ok = await pollUntilReady(check, { attempts: 3, intervalMs: 1 })
+    expect(ok).toBe(false)
+    expect(check).toHaveBeenCalledTimes(3)
+  })
+
+  it('uses default 5 attempts × 200ms when no opts given', async () => {
+    const check = vi.fn(async () => false)
+    const start = process.hrtime.bigint()
+    const ok = await pollUntilReady(check)
+    const elapsedMs = Number(process.hrtime.bigint() - start) / 1_000_000
+    expect(ok).toBe(false)
+    expect(check).toHaveBeenCalledTimes(5)
+    // 5 × 200ms = 1000ms, allow generous slack for CI
+    expect(elapsedMs).toBeGreaterThanOrEqual(950)
+  })
+
+  it('does not call the check before the first interval', async () => {
+    const check = vi.fn(async () => true)
+    await pollUntilReady(check, { attempts: 1, intervalMs: 50 })
+    expect(check).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
new file mode 100644
index 00000000..a5cb75c5
--- /dev/null
+++ b/packages/core/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*.ts"]
+}
diff --git a/packages/nightwatch-devtools/ARCHITECTURE.md b/packages/nightwatch-devtools/ARCHITECTURE.md
new file mode 100644
index 00000000..94687b7a
--- /dev/null
+++ b/packages/nightwatch-devtools/ARCHITECTURE.md
@@ -0,0 +1,1355 @@
+# Nightwatch DevTools Plugin - Architecture Documentation
+
+## Overview
+
+The Nightwatch DevTools plugin is a **thin adapter layer** (~490 lines) that integrates Nightwatch with the WebdriverIO DevTools ecosystem. It provides real-time visual debugging capabilities for Nightwatch tests with zero test code changes.
+
+## High-Level Architecture
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    Nightwatch Test Runner                    │
+└───────────────────────┬─────────────────────────────────────┘
+                        │ Lifecycle Hooks
+                        ↓
+┌─────────────────────────────────────────────────────────────┐
+│          NightwatchDevToolsPlugin (Main Orchestrator)        │
+│  ┌────────────┬────────────┬────────────┬─────────────┐     │
+│  │ Session    │ Test       │ Suite      │ Browser     │     │
+│  │ Capturer   │ Reporter   │ Manager    │ Proxy       │     │
+│  └────────────┴────────────┴────────────┴─────────────┘     │
+└───────────────────────┬─────────────────────────────────────┘
+                        │ WebSocket Protocol
+                        ↓
+┌─────────────────────────────────────────────────────────────┐
+│              @wdio/devtools-backend (Reused)                 │
+│              Fastify Server + WebSocket                      │
+└───────────────────────┬─────────────────────────────────────┘
+                        │ HTTP/WS
+                        ↓
+┌─────────────────────────────────────────────────────────────┐
+│              @wdio/devtools-app (Reused)                     │
+│              Lit-based UI Components                         │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Core Components
+
+### 1. NightwatchDevToolsPlugin (Main Orchestrator)
+
+**Location:** `src/index.ts`
+
+**Responsibilities:**
+- Manages plugin lifecycle through Nightwatch hooks
+- Coordinates all sub-components
+- Opens DevTools UI in separate browser window
+- Handles backend server startup/shutdown
+
+**Key Methods:**
+
+| Method | Purpose |
+|--------|---------|
+| `before()` | Start DevTools backend server, open UI browser window |
+| `beforeEach(browser)` | Initialize session, inject scripts, prepare tests |
+| `afterEach(browser)` | Capture trace data, finalize tests |
+| `after()` | Keep process alive until UI browser closes, cleanup |
+
+**Key Features:**
+- Automatic UI browser window management using WebdriverIO's `remote()` API
+- Process lifecycle management (handles Ctrl+C vs natural exit)
+- Unique user data directory per instance to avoid conflicts
+- Coordinates data flow between all components
+
+**Hook Implementation:**
+
+```javascript
+export default function createNightwatchDevTools(options) {
+  const plugin = new NightwatchDevToolsPlugin(options)
+  
+  return {
+    asyncHookTimeout: 3600000, // 1 hour - allows UI review
+    before: async function() { await plugin.before() },
+    beforeEach: async function(browser) { await plugin.beforeEach(browser) },
+    afterEach: async function(browser) { await plugin.afterEach(browser) },
+    after: async function() { await plugin.after() }
+  }
+}
+```
+
+---
+
+### 2. SessionCapturer
+
+**Location:** `src/session.ts`
+
+**Responsibilities:**
+- WebSocket communication with backend
+- Capture and stream test execution data in real-time
+- Inject browser scripts for runtime capture
+- Console log and terminal output interception
+
+**Key Features:**
+
+#### WebSocket Client
+- Connects to backend at `ws://hostname:port/worker`
+- Sends data upstream to backend in real-time
+- Handles connection failures gracefully
+
+#### Script Injection
+- Injects `@wdio/devtools-script` into browser pages
+- Enables browser-side capture (network, console, mutations)
+- Re-injects on page navigation
+
+#### Console Patching
+- Intercepts `console.log/info/warn/error`
+- Captures test framework logs
+- Filters internal framework messages to reduce noise
+
+#### Process Stream Interception
+- Captures stdout/stderr from test execution
+- Detects log levels from text patterns
+- Strips ANSI escape codes for clean display
+
+**Data Captured:**
+
+| Category | Details |
+|----------|---------|
+| **Commands** | Command name, arguments, results, timestamps, call sources |
+| **Console Logs** | Type, arguments, timestamp, source (browser/test/terminal) |
+| **Network Requests** | Via injected script in browser |
+| **DOM Mutations** | Via MutationObserver in browser |
+| **Performance Metrics** | Navigation timing, resource timing |
+| **Source Files** | Test file contents for display |
+
+**Key Methods:**
+
+```typescript
+class SessionCapturer {
+  // Send data to backend
+  sendUpstream(type: string, data: any): void
+  
+  // Inject capture script into browser
+  async injectScript(browser: NightwatchBrowser): Promise<void>
+  
+  // Capture trace data after test
+  async captureTrace(browser: NightwatchBrowser): Promise<void>
+  
+  // Capture source file contents
+  async captureSource(filePath: string): Promise<void>
+  
+  // Wait for WebSocket connection
+  async waitForConnection(timeoutMs: number): Promise<boolean>
+}
+```
+
+---
+
+### 3. TestReporter
+
+**Location:** `src/reporter.ts`
+
+**Responsibilities:**
+- Track test and suite lifecycle
+- Generate stable UIDs for tests/suites
+- Update UI with test status changes
+- Extract test metadata from source files
+
+**Key Features:**
+
+#### Stable UID Generation
+- Hash-based UIDs using file path + full title
+- Consistent across test runs (no random/sequential IDs)
+- Prevents duplicate test entries in UI
+
+```typescript
+function generateStableUid(item: SuiteStats | TestStats): string {
+  const parts = [item.file, item.fullTitle]
+  const signature = parts.join('::')
+  
+  // Hash for stable, short UIDs
+  const hash = signature.split('').reduce((acc, char) => {
+    return ((acc << 5) - acc + char.charCodeAt(0)) | 0
+  }, 0)
+  
+  return `stable-${Math.abs(hash).toString(36)}`
+}
+```
+
+#### Test Metadata Extraction
+- Parses test files to extract test names before execution
+- Pre-populates suite with pending tests
+- Improves UI responsiveness
+
+#### State Management
+- Tracks test states: `pending` → `running` → `passed/failed/skipped`
+- Updates UI in real-time via callback
+- Handles test state transitions
+
+**Key Methods:**
+
+```typescript
+class TestReporter {
+  // Generate stable UID for test/suite
+  generateStableUid(filePath: string, name: string): string
+  
+  // Suite lifecycle
+  onSuiteStart(suiteStats: SuiteStats): void
+  onSuiteEnd(suiteStats: SuiteStats): void
+  
+  // Test lifecycle
+  onTestStart(testStats: TestStats): void
+  onTestEnd(testStats: TestStats): void
+  onTestPass(testStats: TestStats): void
+  onTestFail(testStats: TestStats): void
+  
+  // Query methods
+  getCurrentSuite(): SuiteStats | undefined
+  updateSuites(): void
+}
+```
+
+---
+
+### 4. TestManager
+
+**Location:** `src/helpers/testManager.ts`
+
+**Responsibilities:**
+- Manage test lifecycle and state transitions
+- Detect test boundaries (when tests change)
+- Prevent duplicate test reporting
+- Finalize incomplete tests
+
+**Key Features:**
+
+#### Test Boundary Detection
+Detects when the current test changes by monitoring `browser.currentTest.name`:
+
+```typescript
+detectTestBoundary(currentNightwatchTest: any): string {
+  const currentTestName = currentNightwatchTest?.name || 'unknown'
+  
+  // If test name changed, finalize previous test
+  if (this.lastKnownTestName && currentTestName !== this.lastKnownTestName) {
+    // Finalize previous test with results
+    this.finalizePreviousTest()
+  }
+  
+  this.lastKnownTestName = currentTestName
+  return currentTestName
+}
+```
+
+#### Duplicate Prevention
+- Tracks processed tests per file using `Map<string, Set<string>>`
+- Prevents reporting the same test multiple times
+- Handles parallel test execution
+
+#### State Transitions
+Manages test state flow:
+
+```
+pending → running → passed/failed/skipped
+   ↑                       ↓
+   └───────────────────────┘
+      (reset for next test)
+```
+
+**Key Methods:**
+
+```typescript
+class TestManager {
+  // Update test state and report to UI
+  updateTestState(test: TestStats, state: string, endTime?: Date, duration?: number): void
+  
+  // Find test in suite by title
+  findTestInSuite(suite: SuiteStats, testTitle: string): TestStats | undefined
+  
+  // Mark test as processed (prevent duplicates)
+  markTestAsProcessed(testFile: string, testTitle: string): void
+  isTestProcessed(testFile: string, testTitle: string): boolean
+  
+  // Detect when current test changes
+  detectTestBoundary(currentNightwatchTest: any): string
+  
+  // Start pending test on first command
+  startTestIfPending(currentTestName: string): void
+  
+  // Finalize all incomplete tests in suite
+  finalizeSuiteTests(suite: SuiteStats, testcases: Record<string, any>): void
+}
+```
+
+---
+
+### 5. SuiteManager
+
+**Location:** `src/helpers/suiteManager.ts`
+
+**Responsibilities:**
+- Create and manage test suites
+- Track suite state and completion
+- Pre-populate test entries for display
+
+**Key Features:**
+
+#### Suite Creation
+- Creates suite on first test encounter for a file
+- Generates stable UID for suite
+- Pre-populates with pending test entries
+
+```typescript
+getOrCreateSuite(testFile: string, suiteTitle: string, fullPath: string, testNames: string[]): SuiteStats {
+  if (!this.currentSuiteByFile.has(testFile)) {
+    const suiteStats = {
+      uid: this.testReporter.generateStableUid(fullPath, suiteTitle),
+      title: suiteTitle,
+      file: fullPath,
+      state: 'pending',
+      tests: [], // Pre-populated with test names
+      // ... other fields
+    }
+    
+    // Create pending test entries
+    for (const testName of testNames) {
+      suiteStats.tests.push(createPendingTest(testName))
+    }
+    
+    this.currentSuiteByFile.set(testFile, suiteStats)
+    this.testReporter.onSuiteStart(suiteStats)
+  }
+  
+  return this.currentSuiteByFile.get(testFile)
+}
+```
+
+#### Suite State Tracking
+- States: `pending` → `running` → `passed/failed`
+- State determined by aggregating test results
+
+#### Result Aggregation
+Determines suite result from test results:
+- **Passed**: All tests passed
+- **Failed**: Any test failed
+- **Skipped**: All tests skipped
+
+**Key Methods:**
+
+```typescript
+class SuiteManager {
+  // Get or create suite for test file
+  getOrCreateSuite(testFile: string, suiteTitle: string, fullPath: string, testNames: string[]): SuiteStats
+  
+  // Get existing suite
+  getSuite(testFile: string): SuiteStats | undefined
+  
+  // Update suite state
+  markSuiteAsRunning(suite: SuiteStats): void
+  
+  // Finalize suite with results
+  finalizeSuite(suite: SuiteStats): void
+  
+  // Get all suites
+  getAllSuites(): Map<string, SuiteStats>
+}
+```
+
+---
+
+### 6. BrowserProxy
+
+**Location:** `src/helpers/browserProxy.ts`
+
+**Responsibilities:**
+- Intercept browser commands
+- Track command execution
+- Wrap `browser.url()` for script injection
+- Prevent command duplication
+
+**Key Features:**
+
+#### Method Wrapping
+Dynamically wraps all browser methods:
+
+```typescript
+wrapBrowserCommands(browser: NightwatchBrowser): void {
+  const allMethods = [
+    ...Object.keys(browser),
+    ...Object.getOwnPropertyNames(Object.getPrototypeOf(browser))
+  ]
+  
+  allMethods.forEach(methodName => {
+    if (shouldWrapMethod(methodName)) {
+      const originalMethod = browser[methodName]
+      
+      browser[methodName] = (...args) => {
+        return this.handleCommandExecution(browser, methodName, originalMethod, args)
+      }
+    }
+  })
+}
+```
+
+#### Command Stack
+- Tracks command execution order
+- Associates results with commands
+- Handles nested/chained commands
+
+#### Deduplication
+Prevents duplicate command capture:
+- Generates signature: `command + args + callSource`
+- Compares with last command signature
+- Skips if duplicate
+
+#### Source Tracking
+Captures call location from stack traces:
+- Extracts file path and line number
+- Shows where command was called from test code
+- Improves debugging experience
+
+**Key Methods:**
+
+```typescript
+class BrowserProxy {
+  // Wrap all browser commands
+  wrapBrowserCommands(browser: NightwatchBrowser): void
+  
+  // Special handling for URL navigation
+  wrapUrlMethod(browser: NightwatchBrowser): void
+  
+  // Handle command execution
+  private handleCommandExecution(browser, methodName, originalMethod, args): any
+  
+  // Capture command result
+  private captureCommandResult(methodName, args, result, callSource): void
+  
+  // Capture command error
+  private captureCommandError(methodName, args, error, callSource): void
+  
+  // Reset tracking for new test
+  resetCommandTracking(): void
+}
+```
+
+---
+
+## Data Flow
+
+### Test Execution Flow
+
+```
+1. before() Hook (Global - Once)
+   ├─ Start @wdio/devtools-backend server
+   ├─ Open DevTools UI in Chrome window (separate session)
+   └─ Wait for UI connection (10 seconds)
+
+2. beforeEach() Hook (Per Test)
+   ├─ Initialize SessionCapturer (first test only)
+   │  └─ Connect WebSocket to backend
+   ├─ Create/Get Suite via SuiteManager
+   │  ├─ Extract test names from source file
+   │  └─ Pre-populate with pending tests
+   ├─ Find next pending test
+   ├─ Start test (mark as running)
+   ├─ Wrap browser commands via BrowserProxy
+   ├─ Wrap browser.url() for script injection
+   └─ Reset command tracking
+
+3. Test Execution
+   ├─ Browser commands intercepted by BrowserProxy
+   │  ├─ Detect test boundaries via TestManager
+   │  ├─ Start pending test on first command
+   │  └─ Capture command + args + result
+   ├─ Commands captured by SessionCapturer
+   ├─ Data streamed to backend via WebSocket
+   ├─ Backend broadcasts to UI clients
+   └─ UI updates in real-time
+
+4. afterEach() Hook (Per Test)
+   ├─ Read Nightwatch test results
+   ├─ Finalize current test via TestManager
+   │  └─ Update state (passed/failed/skipped)
+   ├─ Capture trace data via SessionCapturer
+   │  ├─ Network requests (from browser)
+   │  ├─ Console logs (from browser)
+   │  ├─ DOM mutations (from browser)
+   │  └─ Performance metrics (from browser)
+   ├─ Check if all tests in suite completed
+   └─ Finalize suite if complete
+
+5. after() Hook (Global - Once)
+   ├─ Finalize all incomplete suites
+   ├─ Send final data to UI
+   ├─ Display message: "Close browser to exit"
+   ├─ Poll UI browser until closed
+   │  ├─ If browser closed: cleanup and exit
+   │  └─ If Ctrl+C: exit immediately, keep browser open
+   ├─ Delete browser session (if closed naturally)
+   └─ Stop backend server
+```
+
+### Data Streaming Flow
+
+```
+Test Code → BrowserProxy → SessionCapturer → WebSocket → Backend → UI
+
+Example: browser.click('#submit')
+   ↓
+BrowserProxy intercepts click()
+   ↓
+Captures: { command: 'click', args: ['#submit'], timestamp, callSource }
+   ↓
+SessionCapturer adds to commandsLog
+   ↓
+sendUpstream('commands', [commandLog])
+   ↓
+WebSocket sends to backend
+   ↓
+Backend broadcasts to UI clients
+   ↓
+UI updates Commands panel
+```
+
+---
+
+## Nightwatch Lifecycle Hooks
+
+The plugin implements **4 standard Nightwatch hooks**:
+
+| Hook | Timing | Frequency | Purpose |
+|------|--------|-----------|---------|
+| `before()` | Before all tests | Once | Start backend, open UI |
+| `beforeEach(browser)` | Before each test | Per test | Initialize session, start test |
+| `afterEach(browser)` | After each test | Per test | Capture data, finalize test |
+| `after()` | After all tests | Once | Wait for UI close, cleanup |
+
+**Special Configuration:**
+- `asyncHookTimeout: 3600000` (1 hour) - Allows user to review UI after tests complete
+- Hooks can be async and return promises
+
+---
+
+## Key Design Patterns
+
+### 1. Reuse over Rebuild
+
+**Philosophy:** Don't reinvent the wheel, adapt existing infrastructure.
+
+**What's Reused:**
+- `@wdio/devtools-backend` - Fastify server + WebSocket (100% reused)
+- `@wdio/devtools-app` - Lit-based UI components (100% reused)
+- `@wdio/devtools-script` - Browser-side capture (100% reused)
+
+**What's New:**
+- Nightwatch lifecycle hook integration (~490 lines)
+- Test/suite state management
+- Command interception for Nightwatch API
+
+**Benefits:**
+- Minimal maintenance burden
+- Proven, battle-tested infrastructure
+- Same UI/UX across WDIO and Nightwatch
+- Future improvements benefit both ecosystems
+
+---
+
+### 2. Component Isolation
+
+**Principle:** Each component has a single, well-defined responsibility.
+
+**Benefits:**
+- Testable in isolation
+- Easy to understand and modify
+- Clear interfaces between components
+- Reduced coupling
+
+**Example:**
+```
+TestManager: Test lifecycle only
+SuiteManager: Suite lifecycle only
+BrowserProxy: Command interception only
+SessionCapturer: Data capture and transmission only
+```
+
+---
+
+### 3. Stable Identifiers
+
+**Problem:** Random/sequential IDs cause UI flickering and duplicate entries.
+
+**Solution:** Hash-based UIDs using stable identifiers (file + title).
+
+```typescript
+generateStableUid(filePath: string, name: string): string {
+  const signature = `${filePath}::${name}`
+  const hash = signature.split('').reduce((acc, char) => {
+    return ((acc << 5) - acc + char.charCodeAt(0)) | 0
+  }, 0)
+  return `stable-${Math.abs(hash).toString(36)}`
+}
+```
+
+**Benefits:**
+- Same UID across runs (consistent)
+- No duplicate test entries in UI
+- Proper updates (not additions) when test status changes
+
+---
+
+### 4. Real-time Streaming
+
+**Architecture:** Push-based data flow via WebSocket.
+
+**Flow:**
+```
+Capture → Stream → Display
+(immediate)  (real-time)  (live updates)
+```
+
+**Benefits:**
+- See tests as they execute
+- No need to wait for completion
+- Early detection of issues
+- Better debugging experience
+
+---
+
+### 5. Graceful Degradation
+
+**Philosophy:** Failures in capture should not break tests.
+
+**Examples:**
+- WebSocket connection fails → Log warning, continue without UI
+- Script injection fails → Log error, continue without browser capture
+- Backend start fails → Throw error (fatal, cannot proceed)
+- UI browser fails → Log error, show manual URL, continue
+
+**Implementation:**
+```typescript
+try {
+  await this.sessionCapturer.injectScript(browser)
+} catch (err) {
+  log.error(`Failed to inject script: ${err.message}`)
+  // Continue test execution
+}
+```
+
+---
+
+## Configuration
+
+### Plugin Configuration
+
+**Minimal:**
+```javascript
+// nightwatch.conf.js
+module.exports = {
+  plugins: ['@wdio/nightwatch-devtools']
+}
+```
+
+**With Options:**
+```javascript
+module.exports = {
+  plugins: [
+    ['@wdio/nightwatch-devtools', {
+      port: 3000,           // DevTools server port (default: 3000)
+      hostname: 'localhost' // DevTools server hostname (default: localhost)
+    }]
+  ]
+}
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `port` | `number` | `3000` | Port for DevTools backend server |
+| `hostname` | `string` | `'localhost'` | Hostname for DevTools backend server |
+
+---
+
+## Browser-Side Capture
+
+The plugin injects `@wdio/devtools-script` into browser pages, which automatically captures:
+
+### Network Requests
+- **Method:** Performance API + Fetch/XHR interception
+- **Data:** URL, method, status, headers, timing, body (optional)
+- **Storage:** Sent to backend via postMessage → WebSocket
+
+### DOM Mutations
+- **Method:** MutationObserver API
+- **Data:** Added/removed/modified nodes
+- **Filtering:** Ignores internal DevTools changes
+
+### Console Logs
+- **Method:** Patch console methods (log, info, warn, error)
+- **Data:** Type, arguments, timestamp
+- **Original:** Calls original console method (non-invasive)
+
+### Performance Metrics
+- **Navigation Timing:** DNS, TCP, request, response, DOM load, page load
+- **Resource Timing:** Per-resource duration, size, type
+- **Data:** Available in command logs for navigation commands
+
+### Injection Points
+
+1. **After `browser.url()` navigation**
+   ```typescript
+   browser.url = function(url) {
+     const result = originalUrl(url)
+     result.perform(async function() {
+       await sessionCapturer.injectScript(this)
+     })
+     return result
+   }
+   ```
+
+2. **Automatic re-injection** on page transitions (clicks, form submits)
+
+---
+
+## Key Metrics Captured
+
+### Test Metrics
+| Metric | Source | When |
+|--------|--------|------|
+| Test title | Nightwatch currentTest | beforeEach |
+| Test status | Nightwatch testcases | afterEach |
+| Test duration | Nightwatch testcase.time | afterEach |
+| Test errors | Nightwatch testcases | afterEach |
+| Stack traces | Nightwatch error objects | afterEach |
+
+### Command Metrics
+| Metric | Source | When |
+|--------|--------|------|
+| Command name | Browser method name | During execution |
+| Arguments | Method arguments | Before execution |
+| Result | Method return value | After execution |
+| Timestamp | Date.now() | During execution |
+| Call source | Stack trace | During execution |
+| Screenshot | Browser screenshot | After page transitions |
+
+### Network Metrics
+| Metric | Source | When |
+|--------|--------|------|
+| Request URL | Performance API | During request |
+| Request method | Fetch/XHR interception | During request |
+| Response status | Fetch/XHR response | After response |
+| Headers | Request/Response objects | During/After request |
+| Timing | Performance API | After response |
+| Body | Fetch/XHR (optional) | During/After request |
+
+### Performance Metrics
+| Metric | Source | When |
+|--------|--------|------|
+| Page load time | Navigation Timing API | After page load |
+| DOM ready time | Navigation Timing API | After DOM ready |
+| Resource timings | Resource Timing API | After resource load |
+| DNS lookup time | Navigation Timing API | After page load |
+| TCP connection time | Navigation Timing API | After page load |
+
+---
+
+## Error Handling
+
+### Error Categories
+
+#### 1. Fatal Errors (Stop Execution)
+- **Backend start failure:** Cannot proceed without backend
+- **Plugin initialization failure:** Cannot proceed without plugin
+
+```typescript
+async before() {
+  try {
+    const { server, port } = await start(this.options)
+  } catch (err) {
+    log.error(`Failed to start backend: ${err.message}`)
+    throw err // Fatal - stop execution
+  }
+}
+```
+
+#### 2. Non-Fatal Errors (Log and Continue)
+- **UI browser failure:** User can open manually
+- **WebSocket connection failure:** Continues without UI updates
+- **Script injection failure:** Continues without browser capture
+- **Command capture errors:** Isolated per command
+
+```typescript
+try {
+  this.#devtoolsBrowser = await remote({ ... })
+} catch (err) {
+  log.error(`Failed to open DevTools UI: ${err.message}`)
+  log.info(`Please manually open: ${url}`)
+  // Continue execution
+}
+```
+
+### Error Recovery
+
+#### WebSocket Reconnection
+- Currently: No automatic reconnection
+- Logs error once, continues without streaming
+- Future: Could implement exponential backoff retry
+
+#### Script Injection Retry
+- Retries on next `browser.url()` call
+- No explicit retry logic (relies on page navigation)
+- Errors logged but don't block test execution
+
+#### Command Capture Isolation
+- Each command wrapped in try-catch
+- Errors in one command don't affect others
+- Test execution continues normally
+
+---
+
+## Process Lifecycle Management
+
+### Normal Exit (Browser Closed)
+
+```
+Tests Complete
+   ↓
+Display message: "Close browser to exit"
+   ↓
+Poll UI browser every 1 second
+   ↓
+Browser window closed by user
+   ↓
+Detect closure (getTitle() throws)
+   ↓
+Delete browser session
+   ↓
+Stop backend server
+   ↓
+Process exits cleanly
+```
+
+**Code:**
+```typescript
+while (true) {
+  try {
+    await this.#devtoolsBrowser.getTitle()
+    await new Promise(res => setTimeout(res, 1000))
+  } catch {
+    log.info('Browser window closed, stopping DevTools')
+    break
+  }
+}
+```
+
+### Ctrl+C Exit (Force Quit)
+
+```
+Tests Running/Complete
+   ↓
+User presses Ctrl+C
+   ↓
+SIGINT handler triggered
+   ↓
+exitBySignal = true
+   ↓
+Process exits immediately
+   ↓
+Browser window remains open
+   ↓
+Backend continues running
+```
+
+**Code:**
+```typescript
+const signalHandler = () => {
+  exitBySignal = true
+  log.info('Exiting... Browser window will remain open')
+  process.exit(0)
+}
+process.once('SIGINT', signalHandler)
+process.once('SIGTERM', signalHandler)
+```
+
+**Benefits:**
+- Allows inspection of UI after force quit
+- User has choice: graceful or force exit
+- Backend survives for post-mortem debugging
+
+---
+
+## Multi-Worker Support
+
+### Challenge
+Nightwatch can run tests in parallel using multiple browser sessions (workers).
+
+### Solution
+Detect session changes and reinitialize:
+
+```typescript
+async beforeEach(browser: NightwatchBrowser) {
+  const currentSessionId = browser.sessionId
+  
+  // Check if browser session changed (parallel workers)
+  if (currentSessionId && this.#lastSessionId && 
+      currentSessionId !== this.#lastSessionId) {
+    log.info('Browser session changed - reinitializing for new worker')
+    this.isScriptInjected = false
+    this.sessionCapturer = null // Reset for new session
+  }
+  
+  this.#lastSessionId = currentSessionId
+  
+  // Initialize for first test OR new session
+  if (!this.sessionCapturer) {
+    this.sessionCapturer = new SessionCapturer(...)
+    // ... initialize other components
+  }
+}
+```
+
+### Features
+- Automatic detection via `sessionId` comparison
+- Per-worker state isolation
+- Prevents cross-worker contamination
+- Handles worker restarts gracefully
+
+---
+
+## Dependencies
+
+### Core Dependencies
+
+| Package | Version | Purpose |
+|---------|---------|---------|
+| `@wdio/devtools-backend` | workspace:* | Server infrastructure (Fastify + WebSocket) |
+| `@wdio/logger` | ^9.6.0 | Logging framework |
+| `webdriverio` | ^9.18.0 | Browser automation (for opening UI) |
+| `ws` | ^8.18.3 | WebSocket client |
+| `import-meta-resolve` | ^4.2.0 | Module resolution |
+| `stacktrace-parser` | ^0.1.10 | Parse stack traces for call sources |
+
+### Dev Dependencies
+
+| Package | Version | Purpose |
+|---------|---------|---------|
+| `nightwatch` | ^3.0.0 | Peer dependency (test framework) |
+| `chromedriver` | ^133.0.0 | Chrome automation driver |
+| `typescript` | ^5.9.2 | Type checking and compilation |
+| `@types/node` | ^22.10.5 | Node.js type definitions |
+| `@types/ws` | ^8.18.1 | WebSocket type definitions |
+
+### Peer Dependencies
+
+```json
+{
+  "peerDependencies": {
+    "nightwatch": ">=3.0.0"
+  }
+}
+```
+
+---
+
+## Constants
+
+### Location
+`src/constants.ts`
+
+### Categories
+
+#### Page Transition Commands
+Commands that trigger page navigation:
+```typescript
+export const PAGE_TRANSITION_COMMANDS = [
+  'url', 'navigateTo', 'click', 'submitForm'
+]
+```
+
+#### Internal Commands to Ignore
+Nightwatch helper commands not relevant to users:
+```typescript
+export const INTERNAL_COMMANDS_TO_IGNORE = [
+  'isAppiumClient', 'isSafari', 'isChrome', 'isFirefox',
+  'session', 'timeouts', 'execute', 'executeAsync', ...
+]
+```
+
+#### Timing Constants (milliseconds)
+```typescript
+export const TIMING = {
+  UI_RENDER_DELAY: 150,           // Delay for UI to render updates
+  TEST_START_DELAY: 100,          // Delay before starting test
+  SUITE_COMPLETE_DELAY: 200,      // Delay after suite completion
+  UI_CONNECTION_WAIT: 10000,      // Wait for UI to connect (10s)
+  BROWSER_CLOSE_WAIT: 2000,       // Wait before browser close
+  INITIAL_CONNECTION_WAIT: 500,   // Initial WebSocket connection wait
+  BROWSER_POLL_INTERVAL: 1000     // Polling interval for browser status
+}
+```
+
+#### Test States
+```typescript
+export const TEST_STATE = {
+  PENDING: 'pending',
+  RUNNING: 'running',
+  PASSED: 'passed',
+  FAILED: 'failed',
+  SKIPPED: 'skipped'
+}
+```
+
+#### Log Sources
+```typescript
+export const LOG_SOURCES = {
+  BROWSER: 'browser',    // From browser console
+  TEST: 'test',          // From test code
+  TERMINAL: 'terminal'   // From terminal output
+}
+```
+
+---
+
+## Type System
+
+### Location
+`src/types.ts`
+
+### Key Types
+
+#### TestStats
+```typescript
+interface TestStats {
+  uid: string                    // Stable unique identifier
+  cid: string                    // Capability ID
+  title: string                  // Test name
+  fullTitle: string              // Full path: "Suite > Test"
+  parent: string                 // Parent suite UID
+  state: 'passed' | 'failed' | 'skipped' | 'pending' | 'running'
+  start: Date                    // Start timestamp
+  end: Date | null               // End timestamp
+  type: 'test'                   // Type discriminator
+  file: string                   // Test file path
+  retries: number                // Number of retries
+  _duration: number              // Duration in milliseconds
+  error?: Error                  // Error object if failed
+  hooks?: any[]                  // Before/after hooks
+}
+```
+
+#### SuiteStats
+```typescript
+interface SuiteStats {
+  uid: string                    // Stable unique identifier
+  cid: string                    // Capability ID
+  title: string                  // Suite name
+  fullTitle: string              // Full path
+  type: 'suite'                  // Type discriminator
+  file: string                   // Test file path
+  start: Date                    // Start timestamp
+  state?: 'pending' | 'running' | 'passed' | 'failed' | 'skipped'
+  end?: Date | null              // End timestamp
+  tests: (string | TestStats)[]  // Child tests
+  suites: SuiteStats[]           // Child suites
+  hooks: any[]                   // Before/after hooks
+  _duration: number              // Duration in milliseconds
+}
+```
+
+#### CommandLog
+```typescript
+interface CommandLog {
+  command: string                // Command name (e.g., 'click')
+  args: any[]                    // Command arguments
+  result?: any                   // Command result
+  error?: Error                  // Error if command failed
+  timestamp: number              // Execution timestamp
+  callSource?: string            // Source location (file:line)
+  screenshot?: string            // Screenshot (base64)
+  testUid?: string               // Associated test UID
+  performance?: PerformanceData  // Performance metrics
+  cookies?: string               // Cookies (JSON)
+  documentInfo?: DocumentInfo    // Document metadata
+}
+```
+
+#### NetworkRequest
+```typescript
+interface NetworkRequest {
+  id: string                     // Request ID
+  url: string                    // Request URL
+  method: string                 // HTTP method
+  headers?: Record<string, string>
+  status?: number                // Response status
+  statusText?: string            // Response status text
+  timestamp: number              // Request timestamp
+  startTime: number              // Request start time
+  endTime?: number               // Request end time
+  time?: number                  // Total duration
+  type: string                   // Resource type
+  response?: {
+    fromCache: boolean
+    headers: Record<string, string>
+    mimeType: string
+    status: number
+  }
+  error?: string                 // Error message
+  size?: number                  // Response size
+}
+```
+
+---
+
+## File Structure
+
+```
+packages/nightwatch-devtools/
+├── src/
+│   ├── index.ts              # Main plugin class (490 lines)
+│   ├── session.ts            # SessionCapturer (574 lines)
+│   ├── reporter.ts           # TestReporter (290 lines)
+│   ├── types.ts              # Type definitions (180 lines)
+│   ├── constants.ts          # Constants (100 lines)
+│   └── helpers/
+│       ├── browserProxy.ts   # BrowserProxy (263 lines)
+│       ├── testManager.ts    # TestManager (150 lines)
+│       ├── suiteManager.ts   # SuiteManager (120 lines)
+│       ├── capturePerformance.ts  # Performance capture script
+│       └── utils.ts          # Utility functions
+├── example/
+│   ├── nightwatch.conf.cjs   # Example configuration
+│   ├── tests/
+│   │   ├── login.test.js     # Sample test
+│   │   └── sample.test.js    # Sample test
+│   └── validate.cjs          # Plugin validation script
+├── package.json              # Package configuration
+├── tsconfig.json             # TypeScript configuration
+├── README.md                 # User documentation
+└── ARCHITECTURE.md           # This file
+```
+
+**Total Lines of Code:** ~2,167 lines (excluding dependencies)
+
+**Plugin Core:** ~490 lines (main orchestrator)
+
+---
+
+## Testing Strategy
+
+### Manual Testing
+```bash
+cd packages/nightwatch-devtools
+pnpm build                    # Compile TypeScript
+pnpm validate                 # Validate plugin structure
+pnpm example                  # Run example tests
+```
+
+### Validation Checklist
+- ✅ Plugin compiled (dist/ exists)
+- ✅ Plugin module loaded
+- ✅ Plugin exports default function
+- ✅ Plugin can be instantiated
+- ✅ All required lifecycle methods present
+- ✅ Backend server starts
+- ✅ UI browser opens
+- ✅ Tests execute successfully
+- ✅ UI updates in real-time
+- ✅ Process exits cleanly
+
+### Future Testing
+- Unit tests for individual components
+- Integration tests for data flow
+- E2E tests for full plugin lifecycle
+- Performance tests for large test suites
+
+---
+
+## Performance Considerations
+
+### Overhead
+- **Command interception:** Minimal (<1ms per command)
+- **WebSocket streaming:** Asynchronous, non-blocking
+- **Browser script injection:** One-time per page load
+- **UI browser:** Separate process, doesn't affect tests
+
+### Optimization Strategies
+- **Lazy initialization:** Components created on first use
+- **Efficient UIDs:** Hash-based, no string concatenation
+- **Minimal serialization:** Only serialize when needed
+- **Filtered logging:** Ignore internal framework logs
+- **Debouncing:** UI updates debounced to reduce noise
+
+### Scalability
+- **Large test suites:** Linear scaling with number of tests
+- **Parallel execution:** Per-worker state isolation
+- **Memory usage:** Bounded by test suite size
+- **Network usage:** WebSocket compression recommended (future)
+
+---
+
+## Future Enhancements
+
+### Short Term
+- [ ] Add unit tests for core components
+- [ ] Improve error messages and debugging info
+- [ ] Add configuration for capture verbosity
+- [ ] Support custom logger configuration
+
+### Medium Term
+- [ ] WebSocket reconnection logic
+- [ ] Performance profiling integration
+- [ ] Screenshot capture on test failure
+- [ ] Video recording support
+
+### Long Term
+- [ ] Multi-browser support (Firefox, Safari)
+- [ ] Remote execution support (Selenium Grid)
+- [ ] Advanced filtering and search in UI
+- [ ] Test replay functionality
+- [ ] Integration with CI/CD platforms
+
+---
+
+## Known Limitations
+
+### Current Limitations
+1. **Chrome Only:** UI browser currently Chrome-only (uses DevTools protocol)
+2. **No Automatic Reconnection:** WebSocket doesn't reconnect on failure
+3. **Single Backend:** One backend per test run (no multi-runner support yet)
+4. **Console Patching:** Currently disabled to prevent infinite loops
+5. **Stream Interception:** Currently disabled to prevent performance issues
+
+### Workarounds
+1. **Manual UI Opening:** If UI browser fails, user can open URL manually
+2. **Restart on Disconnect:** Restart test run if WebSocket disconnects
+3. **Sequential Runs:** Run tests sequentially if parallel causes issues
+4. **Direct Logging:** Use `console.log` in tests if needed (captured in terminal)
+
+---
+
+## Troubleshooting
+
+### Common Issues
+
+#### 1. Backend Fails to Start
+**Symptom:** Error message "Failed to start backend"
+
+**Causes:**
+- Port already in use
+- Insufficient permissions
+- Node.js version too old
+
+**Solutions:**
+- Change port in plugin options
+- Kill process using port: `lsof -ti:3000 | xargs kill`
+- Update Node.js to >= 18.0.0
+
+#### 2. UI Browser Doesn't Open
+**Symptom:** Warning "Failed to open DevTools UI"
+
+**Causes:**
+- Chrome/Chromium not installed
+- WebDriver issue
+- User data directory conflict
+
+**Solutions:**
+- Install Chrome/Chromium
+- Manually open URL shown in terminal
+- Clear temporary directories
+
+#### 3. No Data in UI
+**Symptom:** UI opens but shows no tests/commands
+
+**Causes:**
+- WebSocket connection failed
+- Script injection failed
+- Test completed too quickly
+
+**Solutions:**
+- Check browser console for errors
+- Increase connection wait time
+- Add delays in test for verification
+
+#### 4. Tests Hang
+**Symptom:** Tests don't complete, process doesn't exit
+
+**Causes:**
+- Async hook timeout too short
+- Backend server stuck
+- Browser process stuck
+
+**Solutions:**
+- Increase `asyncHookTimeout`
+- Force kill with Ctrl+C
+- Check browser DevTools for errors
+
+---
+
+## Contributing
+
+### Development Setup
+```bash
+# Clone repository
+git clone https://github.com/webdriverio/devtools.git
+cd devtools
+
+# Install dependencies
+pnpm install
+
+# Build all packages
+pnpm build
+
+# Navigate to Nightwatch plugin
+cd packages/nightwatch-devtools
+
+# Build plugin
+pnpm build
+
+# Run example
+pnpm example
+```
+
+### Code Style
+- TypeScript for type safety
+- ESLint for code quality
+- Prettier for formatting
+- JSDoc comments for public APIs
+
+### Testing
+- Add tests for new features
+- Ensure existing tests pass
+- Test with real Nightwatch projects
+- Verify UI updates correctly
+
+---
+
+## References
+
+### Documentation
+- [Nightwatch Plugin API](https://nightwatchjs.org/guide/extending-nightwatch/adding-plugins.html)
+- [WebdriverIO DevTools](https://webdriver.io/docs/devtools-service)
+- [WebSocket API](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)
+
+### Related Packages
+- [@wdio/devtools-backend](../backend/) - Backend server
+- [@wdio/devtools-app](../app/) - UI components
+- [@wdio/devtools-script](../script/) - Browser capture
+- [@wdio/devtools-service](../service/) - WDIO service (reference implementation)
+
+---
+
+## License
+
+MIT License - See [LICENSE](../../LICENSE) file for details.
+
+---
+
+## Maintainers
+
+WebdriverIO Team
+- Repository: https://github.com/webdriverio/devtools
+- Issues: https://github.com/webdriverio/devtools/issues
+- Pull Request: https://github.com/webdriverio/devtools/pull/156
+
+---
+
+**Last Updated:** February 18, 2026
diff --git a/packages/nightwatch-devtools/README.md b/packages/nightwatch-devtools/README.md
index c5a31831..18abe22b 100644
--- a/packages/nightwatch-devtools/README.md
+++ b/packages/nightwatch-devtools/README.md
@@ -82,16 +82,52 @@ module.exports = {
 |--------|------|---------|-------------|
 | `port` | `number` | `3000` | Port for the DevTools backend server. Auto-incremented if already in use. |
 | `hostname` | `string` | `'localhost'` | Hostname the backend server binds to. |
+| `screencast` | `ScreencastOptions` | `{ enabled: false }` | Session video recording (see [Screencast](#screencast)). |
 
 ```javascript
 globals: nightwatchDevtools({
   port: 3000,
-  hostname: 'localhost'
+  hostname: 'localhost',
+  screencast: { enabled: true }
 })
 ```
 
 ---
 
+## Screencast
+
+Record a continuous `.webm` video of the browser session. The recording starts on the first session the plugin sees and is finalized in Nightwatch's `after()` hook, writing `nightwatch-video-<sessionId>.webm` to the current working directory.
+
+**Polling mode only.** Nightwatch doesn't expose a stable CDP escape hatch the way WebdriverIO (`browser.getPuppeteer()`) and Selenium (`driver.createCDPConnection`) do, so the screencast captures frames by calling `browser.takeScreenshot()` at a fixed interval. This works on every browser Nightwatch supports.
+
+### Quick start
+
+```javascript
+globals: nightwatchDevtools({
+  port: 3000,
+  screencast: { enabled: true, pollIntervalMs: 200 }
+})
+```
+
+### Options
+
+| Option | Type | Default | Notes |
+|--------|------|---------|-------|
+| `enabled` | `boolean` | `false` | Master switch. |
+| `pollIntervalMs` | `number` | `200` | Screenshot interval (ms). Lower = smoother video, more WebDriver round-trips. 200 ms ≈ 5 fps. |
+| `captureFormat` | `'jpeg' \| 'png'` | `'jpeg'` | Frame format. WebDriver screenshots are always PNG, so this only affects the encoded output. |
+| `maxWidth` / `maxHeight` / `quality` | — | — | CDP-only options, ignored in polling mode. Listed for shape compatibility with the WDIO/Selenium adapters. |
+
+### Prerequisites
+
+`fluent-ffmpeg` (already a runtime dep of this package) plus the `ffmpeg` binary on PATH. macOS: `brew install ffmpeg`. Linux: `apt install ffmpeg`. Without ffmpeg the recorder still runs but the encode step logs a warning and skips writing the file.
+
+### Output
+
+The encoded video is sent to the DevTools dashboard via the `screencast` WS scope and shown in the **Screencast** tab. The absolute path also appears in the Nightwatch log line `📹 Screencast video: <path>`.
+
+---
+
 ## Examples
 
 Working examples are included in this package:
@@ -124,6 +160,10 @@ Nightwatch does not provide the same depth of framework hooks as WebdriverIO, so
 
 Overall feature parity with the WebdriverIO DevTools service is approximately **80–90%**.
 
+### Preserve & Rerun (Compare)
+
+Available for Nightwatch — same dashboard UI as WebdriverIO. The "compare with rerun" flow snapshots the failing run, re-launches the test with `DEVTOOLS_RERUN_LABEL` set (the plugin filters down to just that test name on the rerun), and the dashboard shows the two runs side-by-side aligned by command.
+
 ## :page_facing_up: License
 
 [MIT](/LICENSE)
diff --git a/packages/nightwatch-devtools/package.json b/packages/nightwatch-devtools/package.json
index f3b7aff0..be869816 100644
--- a/packages/nightwatch-devtools/package.json
+++ b/packages/nightwatch-devtools/package.json
@@ -25,11 +25,11 @@
     "plugin": true
   },
   "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch",
+    "build": "tsup src/index.ts --format esm --dts --sourcemap --clean",
+    "watch": "tsup src/index.ts --format esm --dts --sourcemap --watch",
     "clean": "rm -rf dist",
     "lint": "eslint .",
-    "example": "nightwatch -c example/nightwatch.conf.cjs",
+    "example": "nightwatch -c ../../examples/nightwatch/nightwatch.conf.cjs",
     "prepublishOnly": "pnpm build"
   },
   "keywords": [
@@ -44,6 +44,7 @@
     "@wdio/devtools-backend": "workspace:*",
     "@wdio/devtools-script": "workspace:*",
     "@wdio/logger": "^9.6.0",
+    "fluent-ffmpeg": "^2.1.3",
     "import-meta-resolve": "^4.2.0",
     "stacktrace-parser": "^0.1.11",
     "webdriverio": "^9.18.0",
@@ -52,8 +53,11 @@
   "devDependencies": {
     "@types/node": "25.5.2",
     "@types/ws": "^8.18.1",
+    "@wdio/devtools-core": "workspace:^",
+    "@wdio/devtools-shared": "workspace:^",
     "chromedriver": "^148.0.3",
     "nightwatch": "^3.0.0",
+    "tsup": "^8.0.0",
     "typescript": "^6.0.2"
   },
   "peerDependencies": {
diff --git a/packages/nightwatch-devtools/src/constants.ts b/packages/nightwatch-devtools/src/constants.ts
index 270070bc..0cda451b 100644
--- a/packages/nightwatch-devtools/src/constants.ts
+++ b/packages/nightwatch-devtools/src/constants.ts
@@ -33,26 +33,14 @@ export const INTERNAL_COMMANDS_TO_IGNORE = [
   'end'
 ] as const
 
-export const CONSOLE_METHODS = ['log', 'info', 'warn', 'error'] as const
-
-export const LOG_LEVEL_PATTERNS: ReadonlyArray<{
-  level: 'trace' | 'debug' | 'info' | 'warn' | 'error'
-  pattern: RegExp
-}> = [
-  { level: 'trace', pattern: /\btrace\b/i },
-  { level: 'debug', pattern: /\bdebug\b/i },
-  { level: 'info', pattern: /\binfo\b/i },
-  { level: 'warn', pattern: /\bwarn(ing)?\b/i },
-  { level: 'error', pattern: /\berror\b/i }
-] as const
-
-export const LOG_SOURCES = {
-  BROWSER: 'browser',
-  TEST: 'test',
-  TERMINAL: 'terminal'
-} as const
-
-export const ANSI_REGEX = /\x1b\[[?]?[0-9;]*[A-Za-z]/g
+// Console capture constants are defined in @wdio/devtools-core; re-exported
+// here so existing imports from ./constants.js continue to work.
+export {
+  ANSI_REGEX,
+  CONSOLE_METHODS,
+  LOG_LEVEL_PATTERNS,
+  LOG_SOURCES
+} from '@wdio/devtools-core'
 
 export const DEFAULTS = {
   CID: '0-0',
@@ -73,13 +61,7 @@ export const TIMING = {
   BROWSER_POLL_INTERVAL: 1000
 } as const
 
-export const TEST_STATE = {
-  PENDING: 'pending',
-  RUNNING: 'running',
-  PASSED: 'passed',
-  FAILED: 'failed',
-  SKIPPED: 'skipped'
-} as const
+export { TEST_STATE } from '@wdio/devtools-shared'
 
 /**
  * Generic pattern matching Nightwatch commands whose result is a boolean.
@@ -89,8 +71,7 @@ export const BOOLEAN_COMMAND_PATTERN =
 
 export const NAVIGATION_COMMANDS = ['url', 'navigate', 'navigateTo'] as const
 
-/** Spinner progress frames — suppress from UI Console output. */
-export const SPINNER_RE = /^[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏]/u
+export { SPINNER_RE } from '@wdio/devtools-core'
 
 /** Matches file names that follow the *.test.ts / *.spec.js naming convention. */
 export const TEST_FILE_PATTERN = /\.(?:test|spec)\.[cm]?[jt]sx?$/i
diff --git a/packages/nightwatch-devtools/src/helpers/browserProxy.ts b/packages/nightwatch-devtools/src/helpers/browserProxy.ts
index b7ba167b..d9b77457 100644
--- a/packages/nightwatch-devtools/src/helpers/browserProxy.ts
+++ b/packages/nightwatch-devtools/src/helpers/browserProxy.ts
@@ -6,13 +6,18 @@
 import logger from '@wdio/logger'
 import {
   INTERNAL_COMMANDS_TO_IGNORE,
-  BOOLEAN_COMMAND_PATTERN,
   NAVIGATION_COMMANDS
 } from '../constants.js'
 import { getCallSourceFromStack } from './utils.js'
+import { serializeCommandResult } from './serializeCommandResult.js'
+import { RetryTracker, toError } from '@wdio/devtools-core'
 import type { SessionCapturer } from '../session.js'
 import type { TestManager } from './testManager.js'
-import type { NightwatchBrowser, CommandStackFrame } from '../types.js'
+import type {
+  CommandLog,
+  NightwatchBrowser,
+  CommandStackFrame
+} from '../types.js'
 
 const log = logger('@wdio/nightwatch-devtools:browserProxy')
 
@@ -27,8 +32,7 @@ export class BrowserProxy {
    * command (e.g. getText inside a waitFor loop) overwrite the previous entry
    * rather than appending, showing only the final execution result.
    */
-  private lastCapturedSig: string | null = null
-  private lastCapturedId: number | null = null
+  private retryTracker = new RetryTracker()
 
   constructor(
     private sessionCapturer: SessionCapturer,
@@ -47,8 +51,7 @@ export class BrowserProxy {
   resetCommandTracking(): void {
     this.commandStack = []
     this.lastCommandSig = null
-    this.lastCapturedSig = null
-    this.lastCapturedId = null
+    this.retryTracker.reset()
   }
 
   getCurrentTestFullPath(): string | null {
@@ -70,13 +73,20 @@ export class BrowserProxy {
   wrapUrlMethod(browser: NightwatchBrowser): void {
     const sessionCapturer = this.sessionCapturer
 
+    // Cast once for dynamic method access — Nightwatch's typed surface
+    // doesn't enumerate every command, but they all live on the same object.
+    // The return type stays `any` because wrapNav has to handle both
+    // Nightwatch's chainable API (returns a chainable with `.perform`) and
+    // Cucumber async/await (returns a Promise) — typing it narrows wrongly.
+    const b = browser as unknown as Record<string, (...args: unknown[]) => any>
+
     const wrapNav = (methodName: string) => {
-      if (typeof (browser as any)[methodName] !== 'function') {
+      if (typeof b[methodName] !== 'function') {
         return
       }
-      const original = (browser as any)[methodName].bind(browser)
+      const original = b[methodName].bind(browser)
 
-      ;(browser as any)[methodName] = function (...args: any[]) {
+      b[methodName] = function (...args: unknown[]) {
         const result = original(...args)
 
         const injectAndCapture = () => {
@@ -122,7 +132,13 @@ export class BrowserProxy {
       return
     }
 
-    const browserAny = browser as any
+    // Single widening: Nightwatch's `browser` is a dynamic command bag —
+    // every wrapped lookup below is property-name → function. Casting once
+    // keeps the wrap loop readable.
+    const browserAny = browser as unknown as Record<
+      string,
+      (...args: unknown[]) => unknown
+    >
     const allMethods = new Set([
       ...Object.keys(browser),
       ...Object.getOwnPropertyNames(Object.getPrototypeOf(browser))
@@ -138,7 +154,9 @@ export class BrowserProxy {
       }
 
       if (
-        INTERNAL_COMMANDS_TO_IGNORE.includes(methodName as any) ||
+        (INTERNAL_COMMANDS_TO_IGNORE as readonly string[]).includes(
+          methodName
+        ) ||
         methodName.startsWith('__')
       ) {
         return
@@ -221,48 +239,20 @@ export class BrowserProxy {
         this.commandStack.pop()
       }
 
-      const isBooleanCommand = BOOLEAN_COMMAND_PATTERN.test(methodName)
-
-      let serializedResult: any = undefined
-      if (callbackResult !== null && callbackResult !== undefined) {
-        if (typeof callbackResult === 'object' && 'passed' in callbackResult) {
-          // Nightwatch assertion object {passed, actual, expected, message}
-          serializedResult = callbackResult.passed
-            ? true
-            : {
-                passed: false,
-                actual: callbackResult.actual,
-                expected: callbackResult.expected,
-                message: callbackResult.message
-              }
-        } else if (
-          typeof callbackResult === 'object' &&
-          'value' in callbackResult
-        ) {
-          const raw = callbackResult.value
-          // Boolean-semantic command returning null → timed out / not found → false
-          serializedResult = raw === null && isBooleanCommand ? false : raw
-        } else if (typeof callbackResult !== 'function') {
-          try {
-            serializedResult = JSON.parse(JSON.stringify(callbackResult))
-          } catch {
-            serializedResult = String(callbackResult)
-          }
-        }
-      }
+      const serializedResult = serializeCommandResult(
+        callbackResult,
+        methodName
+      )
 
       const currentTest = this.getCurrentTest()
       const effectiveUid = currentTest?.uid ?? testUid
 
       if (effectiveUid) {
-        const isRetry =
-          cmdSig === this.lastCapturedSig && this.lastCapturedId !== null
-
-        if (isRetry) {
+        if (this.retryTracker.isRetry(cmdSig)) {
           // Same command fired again (internal retry) — replace the previous
           // entry so only the final result appears in the UI.
           const { entry, oldTimestamp } = this.sessionCapturer.replaceCommand(
-            this.lastCapturedId!,
+            this.retryTracker.lastId!,
             methodName,
             logArgs,
             serializedResult,
@@ -271,30 +261,20 @@ export class BrowserProxy {
             callSource,
             commandTimestamp
           )
-          this.lastCapturedId = entry._id ?? null
+          this.retryTracker.setLastId(entry._id ?? null)
           this.sessionCapturer.sendReplaceCommand(oldTimestamp, entry)
 
-          const entryToScreenshot = entry
-          const ts = (entryToScreenshot as any).timestamp
-          this.sessionCapturer
-            .takeScreenshotViaHttp(browser)
-            .then((screenshot) => {
-              if (screenshot) {
-                ;(entryToScreenshot as any).screenshot = screenshot
-                this.sessionCapturer.sendReplaceCommand(ts, entryToScreenshot)
-                log.info(`[screenshot] Attached to ${methodName} (retry)`)
-              }
-            })
-            .catch(() => {})
+          this.attachScreenshot(browser, entry, methodName, ' (retry)')
         } else {
           // New command — capture and track.
           // captureCommand() pushes the entry to commandsLog synchronously
           // before any async work (navigation perf capture), so we can grab
           // the ID immediately after the call — before any microtask fires.
           // This avoids the race where a Nightwatch retry callback executes
-          // before .then() sets lastCapturedId, causing missed dedup.
-          this.lastCapturedSig = cmdSig
-          this.lastCapturedId = null
+          // before .then() sets lastId, causing missed dedup. Stage the sig
+          // now, set the id after the synchronous push lands.
+          this.retryTracker.setLastSig(cmdSig)
+          this.retryTracker.setLastId(null)
           this.sessionCapturer
             .captureCommand(
               methodName,
@@ -313,24 +293,15 @@ export class BrowserProxy {
               this.sessionCapturer.commandsLog.length - 1
             ]
           if (lastCommand) {
-            this.lastCapturedId = (lastCommand as any)._id ?? null
+            this.retryTracker.setLastId(
+              (lastCommand as { _id?: number })._id ?? null
+            )
             this.sessionCapturer.sendCommand(lastCommand)
             log.info(`[command] ${methodName}`)
           }
 
-          const entryToScreenshot = lastCommand
-          if (entryToScreenshot) {
-            const ts = (entryToScreenshot as any).timestamp
-            this.sessionCapturer
-              .takeScreenshotViaHttp(browser)
-              .then((screenshot) => {
-                if (screenshot) {
-                  ;(entryToScreenshot as any).screenshot = screenshot
-                  this.sessionCapturer.sendReplaceCommand(ts, entryToScreenshot)
-                  log.info(`[screenshot] Attached to ${methodName}`)
-                }
-              })
-              .catch(() => {})
+          if (lastCommand) {
+            this.attachScreenshot(browser, lastCommand, methodName)
           }
 
           // After DOM-mutating commands, re-poll mutations from the injected
@@ -392,15 +363,15 @@ export class BrowserProxy {
       return
     }
 
-    const errMsg = error instanceof Error ? error.message : String(error)
-    log.error(`[command error] ${methodName}: ${errMsg}`)
+    const normalizedError = toError(error)
+    log.error(`[command error] ${methodName}: ${normalizedError.message}`)
 
     this.sessionCapturer
       .captureCommand(
         methodName,
         args,
         undefined,
-        error instanceof Error ? error : new Error(String(error)),
+        normalizedError,
         currentTest.uid,
         callSource
       )
@@ -420,4 +391,30 @@ export class BrowserProxy {
   isProxied(browser: NightwatchBrowser): boolean {
     return this.proxiedBrowsers.has(browser as object)
   }
+
+  /**
+   * Fire-and-forget: pull a screenshot via the WebDriver HTTP endpoint and
+   * attach it to an already-captured command entry. The `suffix` is appended
+   * to the log line so retried-command screenshots show `(retry)`. Errors
+   * are silently swallowed — screenshots are best-effort and shouldn't fail
+   * the run.
+   */
+  private attachScreenshot(
+    browser: NightwatchBrowser,
+    entry: { timestamp?: number; screenshot?: string | null },
+    methodName: string,
+    suffix = ''
+  ): void {
+    const ts = entry.timestamp ?? 0
+    this.sessionCapturer
+      .takeScreenshotViaHttp(browser)
+      .then((screenshot) => {
+        if (screenshot) {
+          entry.screenshot = screenshot
+          this.sessionCapturer.sendReplaceCommand(ts, entry as CommandLog)
+          log.info(`[screenshot] Attached to ${methodName}${suffix}`)
+        }
+      })
+      .catch(() => {})
+  }
 }
diff --git a/packages/nightwatch-devtools/src/helpers/cucumberHooks.cts b/packages/nightwatch-devtools/src/helpers/cucumberHooks.cts
index 2465ba7b..12b379df 100644
--- a/packages/nightwatch-devtools/src/helpers/cucumberHooks.cts
+++ b/packages/nightwatch-devtools/src/helpers/cucumberHooks.cts
@@ -48,28 +48,28 @@ interface CucumberPluginBridge {
 }
 
 Before({ order: 1000 }, async function (this: any, { pickle }: any) {
-  const plugin = (globalThis as any)[PLUGIN_GLOBAL_KEY] as CucumberPluginBridge | undefined
+  const plugin = (globalThis as Record<string, unknown>)[PLUGIN_GLOBAL_KEY] as CucumberPluginBridge | undefined
   if (this.browser && plugin) {
     await plugin.cucumberBefore(this.browser, pickle)
   }
 })
 
 After({ order: -1 }, async function (this: any, { result, pickle }: any) {
-  const plugin = (globalThis as any)[PLUGIN_GLOBAL_KEY] as CucumberPluginBridge | undefined
+  const plugin = (globalThis as Record<string, unknown>)[PLUGIN_GLOBAL_KEY] as CucumberPluginBridge | undefined
   if (this.browser && plugin) {
     await plugin.cucumberAfter(this.browser, result, pickle)
   }
 })
 
 BeforeStep({ order: 1000 }, async function (this: any, { pickleStep, pickle }: any) {
-  const plugin = (globalThis as any)[PLUGIN_GLOBAL_KEY] as CucumberPluginBridge | undefined
+  const plugin = (globalThis as Record<string, unknown>)[PLUGIN_GLOBAL_KEY] as CucumberPluginBridge | undefined
   if (this.browser && plugin) {
     await plugin.cucumberBeforeStep(this.browser, pickleStep, pickle)
   }
 })
 
 AfterStep({ order: 1000 }, async function (this: any, { result, pickleStep, pickle }: any) {
-  const plugin = (globalThis as any)[PLUGIN_GLOBAL_KEY] as CucumberPluginBridge | undefined
+  const plugin = (globalThis as Record<string, unknown>)[PLUGIN_GLOBAL_KEY] as CucumberPluginBridge | undefined
   if (this.browser && plugin) {
     await plugin.cucumberAfterStep(this.browser, result, pickleStep, pickle)
   }
diff --git a/packages/nightwatch-devtools/src/helpers/featureFileScan.ts b/packages/nightwatch-devtools/src/helpers/featureFileScan.ts
new file mode 100644
index 00000000..b00fbbd5
--- /dev/null
+++ b/packages/nightwatch-devtools/src/helpers/featureFileScan.ts
@@ -0,0 +1,69 @@
+import fs from 'fs'
+import path from 'node:path'
+
+export interface FeatureFileScan {
+  /** Header `Feature:` value, or the filename basename if unreadable. */
+  featureName: string
+  /** Raw `.feature` file contents (empty when unreadable). */
+  featureContent: string
+  /** Absolute path to the `.feature` file (resolved from cwd + uri). */
+  featureAbsPath: string
+  /** Sibling step-definition files (under `step_definitions`/`steps`/`support`). */
+  stepDefFiles: Array<{ filePath: string; content: string }>
+  /** Paths the caller should feed to `sessionCapturer.captureSource` so the
+   *  dashboard's Source panel can render them. */
+  capturedPaths: string[]
+}
+
+/**
+ * Scan a Cucumber feature file and its sibling step-definitions. Pure I/O —
+ * the caller invokes `sessionCapturer.captureSource` for each path in
+ * `capturedPaths` so this helper stays free of the session capturer.
+ */
+export function scanFeatureFile(featureUri: string): FeatureFileScan {
+  const featureAbsPath = path.resolve(process.cwd(), featureUri)
+  const result: FeatureFileScan = {
+    featureName: path.basename(featureUri, '.feature'),
+    featureContent: '',
+    featureAbsPath,
+    stepDefFiles: [],
+    capturedPaths: []
+  }
+
+  if (featureUri === 'unknown.feature' || !fs.existsSync(featureAbsPath)) {
+    return result
+  }
+
+  result.featureContent = fs.readFileSync(featureAbsPath, 'utf-8')
+  const match = result.featureContent.match(/^\s*Feature:\s*(.+)/m)
+  if (match) {
+    result.featureName = match[1].trim()
+  }
+  result.capturedPaths.push(featureAbsPath)
+
+  const featureDir = path.dirname(featureAbsPath)
+  const stepDirCandidates = ['step_definitions', 'steps', 'support']
+  for (const candidate of stepDirCandidates) {
+    const stepDir = path.join(featureDir, candidate)
+    if (!fs.existsSync(stepDir) || !fs.statSync(stepDir).isDirectory()) {
+      continue
+    }
+    for (const entry of fs.readdirSync(stepDir)) {
+      if (!/\.(js|ts|mjs|cjs)$/.test(entry)) {
+        continue
+      }
+      const stepFilePath = path.join(stepDir, entry)
+      result.capturedPaths.push(stepFilePath)
+      try {
+        result.stepDefFiles.push({
+          filePath: stepFilePath,
+          content: fs.readFileSync(stepFilePath, 'utf-8')
+        })
+      } catch {
+        // skip unreadable files
+      }
+    }
+  }
+
+  return result
+}
diff --git a/packages/nightwatch-devtools/src/helpers/perfLogs.ts b/packages/nightwatch-devtools/src/helpers/perfLogs.ts
new file mode 100644
index 00000000..77868b6f
--- /dev/null
+++ b/packages/nightwatch-devtools/src/helpers/perfLogs.ts
@@ -0,0 +1,159 @@
+import { getRequestType } from './utils.js'
+
+/**
+ * Pure parsers for Chrome's `performance` log (the format `browser.getLog('performance')`
+ * returns). Separated from the SessionCapturer so they're testable and the
+ * capture method stays focused on state + I/O.
+ */
+
+export interface PerfLogEntry {
+  level: string
+  message: string
+  timestamp: number
+}
+
+export interface NetworkEntry {
+  id: string
+  url: string
+  method: string
+  requestHeaders: Record<string, string>
+  timestamp: number
+  startTime: number
+  status?: number
+  statusText?: string
+  responseHeaders?: Record<string, string>
+  mimeType?: string
+  type?: string
+  size?: number
+  endTime?: number
+  time?: number
+  error?: string
+}
+
+/**
+ * Parse CDP `Network.*` events out of Chrome performance log entries into a
+ * flat array of network entries. Builds up a per-requestId pending map as it
+ * sees `requestWillBeSent` → `responseReceived` → `loadingFinished` events,
+ * and emits the completed entry on the terminal event.
+ */
+export function parseNetworkFromPerfLogs(logs: PerfLogEntry[]): NetworkEntry[] {
+  const pending = new Map<string, NetworkEntry>()
+  const completed: NetworkEntry[] = []
+
+  for (const entry of logs) {
+    let parsed: any
+    try {
+      parsed = JSON.parse(entry.message)
+    } catch {
+      continue
+    }
+    const method: string | undefined = parsed?.message?.method
+    const params: any = parsed?.message?.params
+    if (!method || !params) {
+      continue
+    }
+
+    if (method === 'Network.requestWillBeSent') {
+      const { requestId, request: req, timestamp } = params
+      pending.set(requestId, {
+        id: `${entry.timestamp}-${requestId}`,
+        url: req.url,
+        method: req.method,
+        requestHeaders: req.headers,
+        timestamp: Math.round(timestamp * 1000),
+        startTime: entry.timestamp
+      })
+    } else if (method === 'Network.responseReceived') {
+      const { requestId, response } = params
+      const p = pending.get(requestId)
+      if (p) {
+        const responseHeaders: Record<string, string> = {}
+        for (const [k, v] of Object.entries(response.headers || {})) {
+          responseHeaders[k.toLowerCase()] = String(v)
+        }
+        p.status = response.status
+        p.statusText = response.statusText
+        p.responseHeaders = responseHeaders
+        p.mimeType = response.mimeType
+        p.type = getRequestType(p.url, response.mimeType)
+      }
+    } else if (method === 'Network.loadingFinished') {
+      const { requestId, encodedDataLength } = params
+      const p = pending.get(requestId)
+      if (p && p.status !== undefined) {
+        p.size = encodedDataLength
+        p.endTime = entry.timestamp
+        p.time = entry.timestamp - p.startTime
+        completed.push({ ...p })
+        pending.delete(requestId)
+      }
+    } else if (method === 'Network.loadingFailed') {
+      const { requestId, errorText } = params
+      const p = pending.get(requestId)
+      if (p) {
+        p.error = errorText
+        p.endTime = entry.timestamp
+        p.time = entry.timestamp - p.startTime
+        completed.push({ ...p })
+        pending.delete(requestId)
+      }
+    }
+  }
+
+  return completed
+}
+
+/**
+ * Dedupe incoming network entries against ones the session already holds.
+ * Successful requests dedupe by (method, url, timestamp). Failed requests
+ * collapse by (method, origin, pathname) — parallel autocomplete/prefetch
+ * requests to the same path (e.g. `/search?q=W`, `/search?q=We`) otherwise
+ * spam the network panel.
+ */
+export function dedupeNetworkRequests(
+  incoming: NetworkEntry[],
+  existing: NetworkEntry[]
+): NetworkEntry[] {
+  const failedKey = (entry: NetworkEntry): string => {
+    try {
+      const u = new URL(entry.url)
+      return `err:${entry.method}:${u.origin}${u.pathname}`
+    } catch {
+      return `err:${entry.method}:${entry.url}`
+    }
+  }
+
+  const alreadySeen = new Set(
+    existing.map((r) =>
+      r.error !== undefined
+        ? failedKey(r)
+        : `ok:${r.method}:${r.url}:${r.timestamp}`
+    )
+  )
+
+  const deduped: NetworkEntry[] = []
+  const seenFailedInBatch = new Map<string, number>()
+
+  for (const entry of incoming) {
+    if (entry.error !== undefined) {
+      const key = failedKey(entry)
+      if (alreadySeen.has(key)) {
+        continue
+      }
+      const existingIdx = seenFailedInBatch.get(key)
+      if (existingIdx !== undefined) {
+        deduped[existingIdx] = entry // replace with latest failure
+      } else {
+        seenFailedInBatch.set(key, deduped.length)
+        deduped.push(entry)
+      }
+    } else {
+      const key = `ok:${entry.method}:${entry.url}:${entry.timestamp}`
+      if (!alreadySeen.has(key)) {
+        deduped.push(entry)
+      }
+    }
+  }
+
+  return deduped
+}
diff --git a/packages/nightwatch-devtools/src/helpers/serializeCommandResult.ts b/packages/nightwatch-devtools/src/helpers/serializeCommandResult.ts
new file mode 100644
index 00000000..be66721a
--- /dev/null
+++ b/packages/nightwatch-devtools/src/helpers/serializeCommandResult.ts
@@ -0,0 +1,57 @@
+import { BOOLEAN_COMMAND_PATTERN } from '../constants.js'
+
+/**
+ * Convert the raw value Nightwatch's async queue hands back to a
+ * UI-friendly JSON-safe representation. Three special cases:
+ *
+ *  - Nightwatch assertion objects `{ passed, actual, expected, message }`
+ *    collapse to `true` on pass, or the structured failure record on fail.
+ *  - Driver-result wrappers `{ value: <raw> }` unwrap to the inner value.
+ *    `null` on a boolean-semantic command (e.g. `waitForExist`) means
+ *    "timed out / not found" — coerce to `false` so the UI doesn't render
+ *    `null`.
+ *  - Plain objects are deep-cloned via JSON.parse/stringify so the UI can
+ *    safely serialize them; functions and circular references fall back to
+ *    `String(value)`.
+ */
+export function serializeCommandResult(
+  callbackResult: unknown,
+  methodName: string
+): unknown {
+  if (callbackResult === null || callbackResult === undefined) {
+    return undefined
+  }
+
+  const isBooleanCommand = BOOLEAN_COMMAND_PATTERN.test(methodName)
+
+  // After the typeof + null guard above, the value is a non-null object —
+  // safe to widen via `Record<string, unknown>` and probe for the discriminator
+  // properties without per-access `as any`.
+  if (typeof callbackResult === 'object') {
+    const r = callbackResult as Record<string, unknown>
+    if ('passed' in r) {
+      return r.passed
+        ? true
+        : {
+            passed: false,
+            actual: r.actual,
+            expected: r.expected,
+            message: r.message
+          }
+    }
+    if ('value' in r) {
+      const raw = r.value
+      return raw === null && isBooleanCommand ? false : raw
+    }
+  }
+
+  if (typeof callbackResult !== 'function') {
+    try {
+      return JSON.parse(JSON.stringify(callbackResult))
+    } catch {
+      return String(callbackResult)
+    }
+  }
+
+  return undefined
+}
diff --git a/packages/nightwatch-devtools/src/helpers/specFileResolver.ts b/packages/nightwatch-devtools/src/helpers/specFileResolver.ts
new file mode 100644
index 00000000..38363781
--- /dev/null
+++ b/packages/nightwatch-devtools/src/helpers/specFileResolver.ts
@@ -0,0 +1,72 @@
+import fs from 'fs'
+import path from 'node:path'
+import { findTestFileFromStack } from './utils.js'
+
+/**
+ * Resolve a Nightwatch test's `currentTest.module` to an absolute spec-file
+ * path on disk. Priority:
+ *   1. Walk the runtime stack for a user frame.
+ *   2. A cached path from a previous command on the same browser (browserProxy).
+ *   3. Cartesian search across the user's `src_folders` + cwd fallbacks.
+ *
+ * Used by `beforeEach` to find the file that `extractTestMetadata` should
+ * parse for test names + suite/test line numbers. Returns `null` when the
+ * file can't be located on disk (source view falls back to "unavailable").
+ */
+export function resolveSpecFilePath(
+  testFile: string,
+  modulePath: string | undefined,
+  srcFolders: string[],
+  cachedPath: string | undefined
+): string | null {
+  let fullPath: string | null = findTestFileFromStack() || null
+  if (!fullPath && cachedPath && cachedPath.includes(testFile)) {
+    fullPath = cachedPath
+  }
+  if (fullPath) {
+    return fullPath
+  }
+  if (!testFile) {
+    return null
+  }
+
+  const workspaceRoot = process.cwd()
+  // `currentTest.module` is relative to a src_folder, e.g. `basic/ecosia`.
+  // We try each src_folder + cwd-level fallback. Use `path.resolve` (not
+  // `path.join`) so absolute src_folders entries — like
+  // `path.resolve(__dirname, 'tests')` from a nightwatch.conf.cjs living
+  // outside the package — bypass `workspaceRoot` correctly.
+  const normalized = (modulePath || '').replace(/\\/g, '/')
+  const srcFolderPaths = srcFolders.flatMap((sf) =>
+    normalized
+      ? [
+          path.resolve(workspaceRoot, sf, normalized + '.js'),
+          path.resolve(workspaceRoot, sf, normalized + '.ts'),
+          path.resolve(workspaceRoot, sf, normalized + '.cjs'),
+          path.resolve(workspaceRoot, sf, normalized)
+        ]
+      : []
+  )
+  const possiblePaths = [
+    ...srcFolderPaths,
+    // Treat module path as relative to cwd (works when src_folders isn't nested)
+    ...(normalized
+      ? [
+          path.resolve(workspaceRoot, normalized + '.js'),
+          path.resolve(workspaceRoot, normalized + '.ts'),
+          path.resolve(workspaceRoot, normalized + '.cjs'),
+          path.resolve(workspaceRoot, normalized)
+        ]
+      : []),
+    path.resolve(workspaceRoot, 'tests', testFile + '.js'),
+    path.resolve(workspaceRoot, 'test', testFile + '.js'),
+    path.resolve(workspaceRoot, testFile + '.js')
+  ]
+
+  for (const candidate of possiblePaths) {
+    if (fs.existsSync(candidate)) {
+      return candidate
+    }
+  }
+  return null
+}
diff --git a/packages/nightwatch-devtools/src/helpers/utils.ts b/packages/nightwatch-devtools/src/helpers/utils.ts
index cc6a408d..25c312be 100644
--- a/packages/nightwatch-devtools/src/helpers/utils.ts
+++ b/packages/nightwatch-devtools/src/helpers/utils.ts
@@ -1,22 +1,27 @@
 import * as fs from 'node:fs'
-import * as net from 'node:net'
 import * as path from 'node:path'
 import { parse as parseStackTrace } from 'stacktrace-parser'
-import logger from '@wdio/logger'
 import {
-  ANSI_REGEX,
-  LOG_LEVEL_PATTERNS,
-  TEST_FILE_PATTERN,
-  CONFIG_FILENAMES
-} from '../constants.js'
+  generateStableUid as generateStableUidByFileName,
+  isUserCodeFrame,
+  normalizeFilePath
+} from '@wdio/devtools-core'
+import { TEST_FILE_PATTERN, CONFIG_FILENAMES } from '../constants.js'
 import type {
-  ConsoleLog,
-  LogLevel,
   NightwatchTestCase,
   TestFileMetadata,
   StepLocation
 } from '../types.js'
 
+// These three are pure re-exports — adapters use the core implementations
+// directly, no wrapper logic. Single-line re-exports keep the indirection
+// visible without introducing dummy variables.
+export {
+  deterministicUid,
+  getCallSourceFromStack,
+  resetSignatureCounters
+} from '@wdio/devtools-core'
+
 export function determineTestState(
   testcase: NightwatchTestCase
 ): 'passed' | 'failed' | 'skipped' {
@@ -26,12 +31,11 @@ export function determineTestState(
   return testcase.passed > 0 && testcase.failed === 0 ? 'passed' : 'failed'
 }
 
-// Track test occurrences to generate stable UIDs
-const signatureCounters = new Map<string, number>()
-
 /**
  * Generate stable UID for test/suite.
  * Accepts either (item: SuiteStats | TestStats) or (file: string, name: string).
+ * Hashing is delegated to @wdio/devtools-core; this wrapper preserves the
+ * dual-signature convenience used by the Nightwatch suite/test managers.
  */
 export function generateStableUid(itemOrFile: any, name?: string): string {
   let file: string, testName: string
@@ -46,54 +50,7 @@ export function generateStableUid(itemOrFile: any, name?: string): string {
     file = itemOrFile || ''
     testName = String(name || '')
   }
-  const signature = `${file}::${testName}`
-  const count = signatureCounters.get(signature) || 0
-  signatureCounters.set(signature, count + 1)
-  const hashInput = count > 0 ? `${signature}::${count}` : signature
-  const hash = hashInput
-    .split('')
-    .reduce((acc, char) => ((acc << 5) - acc + char.charCodeAt(0)) | 0, 0)
-  return `stable-${Math.abs(hash).toString(36)}`
-}
-
-/** Reset counters at the start of each test run. */
-export function resetSignatureCounters() {
-  signatureCounters.clear()
-}
-
-/**
- * Compute a purely deterministic UID from arbitrary string parts.
- * Unlike generateStableUid this NEVER uses the signature counter, so calling
- * it multiple times with the same inputs always returns the same value.
- * Use this wherever the same entity (e.g. a Cucumber scenario) must map to
- * the same UID across retries.
- */
-export function deterministicUid(...parts: string[]): string {
-  const hash = parts
-    .join('::')
-    .split('')
-    .reduce((acc, char) => ((acc << 5) - acc + char.charCodeAt(0)) | 0, 0)
-  return `stable-${Math.abs(hash).toString(36)}`
-}
-
-/** Returns true if a stack frame belongs to user code (not dependencies, internals, or build output). */
-function isUserCodeFrame(frame: {
-  file?: string | null
-}): frame is { file: string } {
-  const { file } = frame
-  return !!(
-    file &&
-    !file.includes('/node_modules/') &&
-    !file.includes('<anonymous>') &&
-    !file.includes('node:internal') &&
-    !file.includes('/dist/') &&
-    !file.includes('/index.js')
-  )
-}
-
-/** Strips the file:// protocol and any trailing :line:col suffix from a file path. */
-function normalizeFilePath(filePath: string): string {
-  return filePath.replace(/^file:\/\//, '').split(':')[0]
+  return generateStableUidByFileName(file, testName)
 }
 
 /**
@@ -178,28 +135,6 @@ export function extractTestMetadata(filePath: string): TestFileMetadata {
   return result
 }
 
-/**
- * Get call source info from stack trace.
- * Returns { filePath, callSource } where callSource has the filename:line format.
- */
-export function getCallSourceFromStack(): {
-  filePath: string | undefined
-  callSource: string
-} {
-  const stack = new Error().stack
-  if (!stack) {
-    return { filePath: undefined, callSource: 'unknown:0' }
-  }
-
-  const frame = parseStackTrace(stack).find(isUserCodeFrame)
-  if (!frame?.file) {
-    return { filePath: undefined, callSource: 'unknown:0' }
-  }
-
-  const filePath = normalizeFilePath(frame.file)
-  return { filePath, callSource: `${filePath}:${frame.lineNumber ?? 0}` }
-}
-
 /**
  * Find test file by searching the workspace for a matching filename.
  * Used when the stack trace doesn't have the file yet (e.g. in beforeEach).
@@ -246,100 +181,18 @@ export function findTestFileByName(
 // Console / log helpers (used by SessionCapturer)
 // ---------------------------------------------------------------------------
 
-/**
- * Strip ANSI escape codes from a string.
- */
-export const stripAnsiCodes = (text: string): string =>
-  text.replace(ANSI_REGEX, '')
-
-/** Infer a log level from the text content of a line. */
-export function detectLogLevel(text: string): LogLevel {
-  const normalised = stripAnsiCodes(text).toLowerCase()
-  for (const { level, pattern } of LOG_LEVEL_PATTERNS) {
-    if (pattern.test(normalised)) {
-      return level
-    }
-  }
-  return 'log'
-}
-
-/**
- * Build a ConsoleLog entry.
- */
-export function createConsoleLogEntry(
-  type: LogLevel,
-  args: any[],
-  source: string
-): ConsoleLog {
-  return { timestamp: Date.now(), type, args, source }
-}
+// Console helpers come from @wdio/devtools-core. `stripAnsiCodes` is the
+// local name kept for backwards compatibility with existing import sites.
+export {
+  stripAnsi as stripAnsiCodes,
+  detectLogLevel,
+  createConsoleLogEntry
+} from '@wdio/devtools-core'
 
-/** Map a Chrome DevTools log level string to our LogLevel union. */
-export function chromeLogLevelToLogLevel(
-  level: string | { value?: number; name?: string }
-): LogLevel {
-  const levelName = (
-    typeof level === 'object' ? (level?.name ?? '') : (level ?? '')
-  ).toUpperCase()
-  switch (levelName) {
-    case 'SEVERE':
-      return 'error'
-    case 'WARNING':
-      return 'warn'
-    case 'INFO':
-      return 'info'
-    case 'DEBUG':
-      return 'debug'
-    default:
-      return 'log'
-  }
-}
+export { chromeLogLevelToLogLevel } from '@wdio/devtools-core'
 
 /** Derive a human-readable request type from URL and MIME type. */
-export function getRequestType(url: string, mimeType?: string): string {
-  const contentType = mimeType?.toLowerCase() ?? ''
-  const urlLower = url.toLowerCase()
-
-  if (contentType.includes('text/html')) {
-    return 'document'
-  }
-  if (contentType.includes('text/css')) {
-    return 'stylesheet'
-  }
-  if (
-    contentType.includes('javascript') ||
-    contentType.includes('ecmascript')
-  ) {
-    return 'script'
-  }
-  if (contentType.includes('image/')) {
-    return 'image'
-  }
-  if (contentType.includes('font/') || contentType.includes('woff')) {
-    return 'font'
-  }
-  if (contentType.includes('application/json')) {
-    return 'fetch'
-  }
-
-  if (urlLower.endsWith('.html') || urlLower.endsWith('.htm')) {
-    return 'document'
-  }
-  if (urlLower.endsWith('.css')) {
-    return 'stylesheet'
-  }
-  if (urlLower.endsWith('.js') || urlLower.endsWith('.mjs')) {
-    return 'script'
-  }
-  if (/\.(png|jpg|jpeg|gif|svg|webp|ico)$/.test(urlLower)) {
-    return 'image'
-  }
-  if (/\.(woff|woff2|ttf|eot|otf)$/.test(urlLower)) {
-    return 'font'
-  }
-
-  return 'xhr'
-}
+export { getRequestType } from '@wdio/devtools-core'
 
 // ---------------------------------------------------------------------------
 // Cucumber helpers
@@ -496,32 +349,7 @@ export function findStepDefinitionLine(
   return null
 }
 
-// ---------------------------------------------------------------------------
-// Port / network helpers (used by the plugin startup)
-// ---------------------------------------------------------------------------
-
-const log = logger('@wdio/nightwatch-devtools')
-
-export function isPortInUse(port: number, hostname: string): Promise<boolean> {
-  return new Promise((resolve) => {
-    const server = net.createServer()
-    server.once('error', () => resolve(true))
-    server.once('listening', () => server.close(() => resolve(false)))
-    server.listen(port, hostname)
-  })
-}
-
-export async function findFreePort(
-  startPort: number,
-  hostname: string
-): Promise<number> {
-  let port = startPort
-  while (await isPortInUse(port, hostname)) {
-    log.warn(`Port ${port} is in use, trying ${port + 1}...`)
-    port++
-  }
-  return port
-}
+export { isPortInUse, findFreePort } from '@wdio/devtools-core'
 
 export function resolveNightwatchConfig(): string | undefined {
   // Prefer the config explicitly passed via -c / --config to avoid picking up
diff --git a/packages/nightwatch-devtools/src/index.ts b/packages/nightwatch-devtools/src/index.ts
index 59ca246c..138a62b2 100644
--- a/packages/nightwatch-devtools/src/index.ts
+++ b/packages/nightwatch-devtools/src/index.ts
@@ -10,10 +10,13 @@ import * as path from 'node:path'
 import * as os from 'node:os'
 import { fileURLToPath } from 'node:url'
 import { start, stop } from '@wdio/devtools-backend'
+import { errorMessage, finalizeScreencast } from '@wdio/devtools-core'
+import { REUSE_ENV, SCREENCAST_DEFAULTS, WS_SCOPE } from '@wdio/devtools-shared'
 import logger from '@wdio/logger'
 import { remote } from 'webdriverio'
 import { SessionCapturer } from './session.js'
 import { TestReporter } from './reporter.js'
+import { ScreencastRecorder } from './screencast.js'
 import { TestManager } from './helpers/testManager.js'
 import { SuiteManager } from './helpers/suiteManager.js'
 import { BrowserProxy } from './helpers/browserProxy.js'
@@ -21,11 +24,13 @@ import {
   TraceType,
   type DevToolsOptions,
   type NightwatchBrowser,
+  type ScreencastOptions,
   type TestStats
 } from './types.js'
+import { resolveSpecFilePath } from './helpers/specFileResolver.js'
+import { scanFeatureFile } from './helpers/featureFileScan.js'
 import {
   determineTestState,
-  findTestFileFromStack,
   deterministicUid,
   extractTestMetadata,
   parseCucumberScenario,
@@ -59,15 +64,24 @@ class NightwatchDevToolsPlugin {
   #srcFolders: string[] = []
 
   #getRerunLabel() {
-    return process.env.DEVTOOLS_RERUN_ENTRY_TYPE === 'test'
-      ? process.env.DEVTOOLS_RERUN_LABEL?.trim()
+    return process.env[REUSE_ENV.RERUN_ENTRY_TYPE] === 'test'
+      ? process.env[REUSE_ENV.RERUN_LABEL]?.trim()
       : undefined
   }
 
+  #screencastOptions: ScreencastOptions
+  #screencastRecorder?: ScreencastRecorder
+  #screencastSessionId?: string
+
   constructor(options: DevToolsOptions = {}) {
     this.options = {
       port: options.port ?? 3000,
-      hostname: options.hostname ?? 'localhost'
+      hostname: options.hostname ?? 'localhost',
+      screencast: options.screencast ?? {}
+    }
+    this.#screencastOptions = {
+      ...SCREENCAST_DEFAULTS,
+      ...(options.screencast ?? {})
     }
   }
 
@@ -75,13 +89,13 @@ class NightwatchDevToolsPlugin {
     // When relaunched by the DevTools UI rerun button the backend is already
     // running — skip startup and just connect the WebSocket worker.
     const isReuse =
-      process.env.DEVTOOLS_APP_REUSE === '1' &&
-      process.env.DEVTOOLS_APP_HOST &&
-      process.env.DEVTOOLS_APP_PORT
+      process.env[REUSE_ENV.REUSE] === '1' &&
+      process.env[REUSE_ENV.HOST] &&
+      process.env[REUSE_ENV.PORT]
 
     if (isReuse) {
-      this.options.hostname = process.env.DEVTOOLS_APP_HOST!
-      this.options.port = Number(process.env.DEVTOOLS_APP_PORT)
+      this.options.hostname = process.env[REUSE_ENV.HOST]!
+      this.options.port = Number(process.env[REUSE_ENV.PORT])
       log.info(
         `♻  Reusing DevTools backend at ${this.options.hostname}:${this.options.port}`
       )
@@ -109,7 +123,7 @@ class NightwatchDevToolsPlugin {
 
     if (isReuse) {
       // Register the plugin instance so Cucumber hooks can call back into it.
-      ;(globalThis as any)[PLUGIN_GLOBAL_KEY] = this
+      ;(globalThis as Record<string, unknown>)[PLUGIN_GLOBAL_KEY] = this
       return
     }
 
@@ -154,16 +168,16 @@ class NightwatchDevToolsPlugin {
 
         await this.#devtoolsBrowser.url(url)
       } catch (err) {
-        log.error(`Failed to open DevTools UI: ${(err as Error).message}`)
+        log.error(`Failed to open DevTools UI: ${errorMessage(err)}`)
         log.info(`Please manually open: ${url}`)
       }
 
       await new Promise((resolve) =>
         setTimeout(resolve, TIMING.UI_CONNECTION_WAIT)
       )
-      ;(globalThis as any)[PLUGIN_GLOBAL_KEY] = this
+      ;(globalThis as Record<string, unknown>)[PLUGIN_GLOBAL_KEY] = this
     } catch (err) {
-      log.error(`Failed to start backend: ${(err as Error).message}`)
+      log.error(`Failed to start backend: ${errorMessage(err)}`)
       throw err
     }
   }
@@ -178,8 +192,13 @@ class NightwatchDevToolsPlugin {
     if (isSessionChange) {
       log.info('Browser session changed — reconnecting WebSocket only')
       this.isScriptInjected = false
+      // Finalize the previous session's screencast BEFORE we tear down its
+      // capturer — encode + broadcast use the existing WS connection.
+      await this.#finalizeCurrentScreencast()
       this.sessionCapturer?.cleanup()
-      this.sessionCapturer = null as any
+      // Intentional null-out — the next `#ensureSessionInitialized` call
+      // reassigns. Cast through unknown so the strict field type passes.
+      this.sessionCapturer = null as unknown as SessionCapturer
     }
     this.#lastSessionId = currentSessionId ?? null
 
@@ -239,7 +258,7 @@ class NightwatchDevToolsPlugin {
 
     // Capture src_folders once so beforeEach can resolve test file paths
     if (this.#srcFolders.length === 0) {
-      const sf = (opts as any).src_folders
+      const sf = (opts as { src_folders?: string | string[] }).src_folders
       this.#srcFolders = Array.isArray(sf) ? sf : sf ? [sf] : []
     }
 
@@ -257,20 +276,66 @@ class NightwatchDevToolsPlugin {
     const browserName =
       capabilities.browserName || desiredCapabilities.browserName || 'unknown'
     const browserVersion =
-      capabilities.browserVersion || (capabilities as any).version || ''
+      capabilities.browserVersion ||
+      (capabilities as { version?: string }).version ||
+      ''
     log.info(
       `✓ Browser: ${browserName}${browserVersion ? ' ' + browserVersion : ''} (session: ${sessionId})`
     )
 
-    const loggingPrefs =
-      (capabilities as any)['goog:loggingPrefs'] ||
-      (desiredCapabilities as any)['goog:loggingPrefs'] ||
-      {}
+    const loggingPrefs = ((capabilities as Record<string, unknown>)[
+      'goog:loggingPrefs'
+    ] ||
+      (desiredCapabilities as Record<string, unknown>)['goog:loggingPrefs'] ||
+      {}) as { performance?: string }
     if (!loggingPrefs.performance) {
       log.warn(
         "⚠  Network tab will be empty — add 'goog:loggingPrefs': { performance: 'ALL' } to your capabilities"
       )
     }
+
+    // Screencast: start a fresh recorder per browser session — every
+    // reloadSession / per-test browser produces its own .webm, matching
+    // the WDIO service behavior. Polling mode only (Nightwatch has no
+    // stable CDP escape hatch). Finalized when the next session change
+    // fires or when after() runs.
+    if (
+      this.#screencastOptions.enabled &&
+      !this.#screencastRecorder &&
+      sessionId
+    ) {
+      this.#screencastRecorder = new ScreencastRecorder(
+        this.sessionCapturer,
+        this.#screencastOptions
+      )
+      this.#screencastSessionId = sessionId
+      log.info(`🎬 Starting screencast for session ${sessionId}`)
+      await this.#screencastRecorder.start(browser)
+    }
+  }
+
+  /**
+   * Stop, encode, and broadcast the current session's screencast (if any),
+   * then clear state so the next `#ensureSessionInitialized` call starts a
+   * fresh recorder. Safe to call multiple times — no-op when nothing is
+   * recording.
+   */
+  async #finalizeCurrentScreencast(): Promise<void> {
+    if (!this.#screencastRecorder || !this.#screencastSessionId) {
+      return
+    }
+    await finalizeScreencast({
+      recorder: this.#screencastRecorder,
+      sessionId: this.#screencastSessionId,
+      filenamePrefix: 'nightwatch-video',
+      outputDir: process.cwd(),
+      captureFormat: this.#screencastOptions.captureFormat,
+      sendUpstream: (scope, data) =>
+        this.sessionCapturer?.sendUpstream(scope, data),
+      onLog: (level, message) => log[level](message)
+    })
+    this.#screencastRecorder = undefined
+    this.#screencastSessionId = undefined
   }
 
   async cucumberBefore(browser: NightwatchBrowser, pickle: any) {
@@ -289,43 +354,15 @@ class NightwatchDevToolsPlugin {
     const featureUri: string = pickle.uri ?? 'unknown.feature'
     const scenarioName: string = pickle.name ?? 'Unknown Scenario'
 
-    // Derive the feature name from the "Feature: <name>" header in the file,
-    // falling back to the filename (e.g. "login") only if the file can't be read.
-    let featureName: string = path.basename(featureUri, '.feature')
-    let featureContent = ''
-    const featureAbsPath = path.resolve(process.cwd(), featureUri)
-    const stepDefFiles: Array<{ filePath: string; content: string }> = []
-    if (featureUri !== 'unknown.feature' && fs.existsSync(featureAbsPath)) {
-      featureContent = fs.readFileSync(featureAbsPath, 'utf-8')
-      const match = featureContent.match(/^\s*Feature:\s*(.+)/m)
-      if (match) {
-        featureName = match[1].trim()
-      }
-
-      this.sessionCapturer.captureSource(featureAbsPath).catch(() => {})
-
-      // Capture step definitions from sibling directories
-      const featureDir = path.dirname(featureAbsPath)
-      const stepDirCandidates = ['step_definitions', 'steps', 'support']
-      for (const candidate of stepDirCandidates) {
-        const stepDir = path.join(featureDir, candidate)
-        if (fs.existsSync(stepDir) && fs.statSync(stepDir).isDirectory()) {
-          for (const entry of fs.readdirSync(stepDir)) {
-            if (/\.(js|ts|mjs|cjs)$/.test(entry)) {
-              const stepFilePath = path.join(stepDir, entry)
-              this.sessionCapturer.captureSource(stepFilePath).catch(() => {})
-              try {
-                stepDefFiles.push({
-                  filePath: stepFilePath,
-                  content: fs.readFileSync(stepFilePath, 'utf-8')
-                })
-              } catch {
-                // skip unreadable files
-              }
-            }
-          }
-        }
-      }
+    const {
+      featureName,
+      featureContent,
+      featureAbsPath,
+      stepDefFiles,
+      capturedPaths
+    } = scanFeatureFile(featureUri)
+    for (const p of capturedPaths) {
+      this.sessionCapturer.captureSource(p).catch(() => {})
     }
 
     // Get or create the feature-level suite (no individual test names — scenarios go into suites[])
@@ -424,7 +461,7 @@ class NightwatchDevToolsPlugin {
       // Pass the specific scenario uid so only this scenario's execution data
       // is reset — a uid-less clearExecutionData would mark ALL suites as
       // running, destroying the previous terminal states of sibling scenarios.
-      this.sessionCapturer.sendUpstream('clearExecutionData', {
+      this.sessionCapturer.sendUpstream(WS_SCOPE.clearExecutionData, {
         uid: scenarioUid,
         entryType: 'suite'
       })
@@ -507,9 +544,7 @@ class NightwatchDevToolsPlugin {
 
       await this.sessionCapturer.captureTrace(browser)
     } catch (err) {
-      log.error(
-        `Failed to finalize Cucumber scenario: ${(err as Error).message}`
-      )
+      log.error(`Failed to finalize Cucumber scenario: ${errorMessage(err)}`)
     }
   }
 
@@ -528,10 +563,18 @@ class NightwatchDevToolsPlugin {
     this.browserProxy?.resetCommandTracking()
 
     const stepText: string = pickleStep?.text ?? ''
-    const step = (this.#currentScenarioSuite.tests as any[]).find(
-      (t: any) =>
+    type MutStep = {
+      title?: string
+      state?: string
+      start?: Date | null
+      end?: Date | null
+    }
+    const step = (
+      this.#currentScenarioSuite.tests as Array<MutStep | string>
+    ).find(
+      (t): t is MutStep =>
         typeof t !== 'string' &&
-        (t.title.endsWith(stepText) || t.title === stepText)
+        (t.title?.endsWith(stepText) === true || t.title === stepText)
     )
     if (step) {
       step.state = TEST_STATE.RUNNING
@@ -575,7 +618,9 @@ class NightwatchDevToolsPlugin {
 
     await this.#ensureSessionInitialized(browser)
 
-    const currentTest = (browser as any).currentTest
+    // Nightwatch's `currentTest` is loosely structured (module/results/name);
+    // keep it `any` here so per-field access stays terse.
+    const currentTest: any = (browser as { currentTest?: unknown }).currentTest
     if (!currentTest) {
       return
     }
@@ -585,53 +630,12 @@ class NightwatchDevToolsPlugin {
       currentTest.module ||
       DEFAULTS.FILE_NAME
 
-    let fullPath: string | null = findTestFileFromStack() || null
-    const cachedPath = this.browserProxy.getCurrentTestFullPath()
-    if (!fullPath && cachedPath && cachedPath.includes(testFile)) {
-      fullPath = cachedPath
-    }
-
-    if (!fullPath && testFile) {
-      const workspaceRoot = process.cwd()
-      // currentTest.module is the path relative to a src_folder, e.g. "basic/ecosia"
-      // So we must try: path.join(cwd, srcFolder, module + '.js') for each src_folder
-      const modulePath = (currentTest.module || '').replace(/\\/g, '/')
-      const srcFolderPaths = this.#srcFolders.flatMap((sf) =>
-        modulePath
-          ? [
-              path.join(workspaceRoot, sf, modulePath + '.js'),
-              path.join(workspaceRoot, sf, modulePath + '.ts'),
-              path.join(workspaceRoot, sf, modulePath + '.cjs'),
-              path.join(workspaceRoot, sf, modulePath)
-            ]
-          : []
-      )
-      const possiblePaths = [
-        // Highest priority: expand module path via each configured src_folder
-        ...srcFolderPaths,
-        // Fallback: treat module path as relative to cwd (works when src_folders isn't nested)
-        ...(modulePath
-          ? [
-              path.join(workspaceRoot, modulePath + '.js'),
-              path.join(workspaceRoot, modulePath + '.ts'),
-              path.join(workspaceRoot, modulePath + '.cjs'),
-              path.join(workspaceRoot, modulePath)
-            ]
-          : []),
-        path.join(workspaceRoot, 'example/tests', testFile + '.js'),
-        path.join(workspaceRoot, 'example/tests', testFile),
-        path.join(workspaceRoot, 'tests', testFile + '.js'),
-        path.join(workspaceRoot, 'test', testFile + '.js'),
-        path.join(workspaceRoot, testFile + '.js')
-      ]
-
-      for (const possiblePath of possiblePaths) {
-        if (fs.existsSync(possiblePath)) {
-          fullPath = possiblePath
-          break
-        }
-      }
-    }
+    const fullPath = resolveSpecFilePath(
+      testFile,
+      currentTest.module,
+      this.#srcFolders,
+      this.browserProxy.getCurrentTestFullPath() || undefined
+    )
 
     // Extract suite title and test metadata
     let suiteTitle = testFile
@@ -778,7 +782,11 @@ class NightwatchDevToolsPlugin {
 
     if (browser && this.sessionCapturer) {
       try {
-        const currentTest = (browser as any).currentTest
+        // Nightwatch's `currentTest` is loosely structured
+        // (module/results/name); keep it `any` here so per-field access
+        // stays terse.
+        const currentTest: any = (browser as { currentTest?: unknown })
+          .currentTest
         const results = currentTest?.results || {}
         const testFile =
           (currentTest.module || '').split('/').pop() || DEFAULTS.FILE_NAME
@@ -859,14 +867,16 @@ class NightwatchDevToolsPlugin {
 
         await this.sessionCapturer.captureTrace(browser)
       } catch (err) {
-        log.error(`Failed to capture trace: ${(err as Error).message}`)
+        log.error(`Failed to capture trace: ${errorMessage(err)}`)
       }
     }
   }
 
   async after(browser?: NightwatchBrowser) {
+    await this.#finalizeCurrentScreencast()
     try {
-      const currentTest = (browser as any)?.currentTest
+      const currentTest: any = (browser as { currentTest?: unknown })
+        ?.currentTest
       const testcases = currentTest?.results?.testcases || {}
 
       for (const [, suite] of (
@@ -909,7 +919,10 @@ class NightwatchDevToolsPlugin {
       log.info('💡 Please close the DevTools browser window to finish...')
 
       if (this.#devtoolsBrowser) {
-        ;(logger as any).setLevel('devtools', 'warn')
+        ;(logger as { setLevel: (ns: string, lvl: string) => void }).setLevel(
+          'devtools',
+          'warn'
+        )
         let exitBySignal = false
 
         const signalHandler = () => {
@@ -937,7 +950,10 @@ class NightwatchDevToolsPlugin {
         if (!exitBySignal) {
           process.removeListener('SIGINT', signalHandler)
           process.removeListener('SIGTERM', signalHandler)
-          ;(logger as any).setLevel('devtools', 'info')
+          ;(logger as { setLevel: (ns: string, lvl: string) => void }).setLevel(
+            'devtools',
+            'info'
+          )
           try {
             await this.#devtoolsBrowser.deleteSession()
           } catch {
@@ -948,7 +964,7 @@ class NightwatchDevToolsPlugin {
         }
       }
     } catch (err) {
-      log.error(`Failed to stop backend: ${(err as Error).message}`)
+      log.error(`Failed to stop backend: ${errorMessage(err)}`)
     }
   }
 
@@ -1007,7 +1023,7 @@ class NightwatchDevToolsPlugin {
           })
         }
       } catch (err) {
-        log.error(`Error in event handler: ${(err as Error).message}`)
+        log.error(`Error in event handler: ${errorMessage(err)}`)
       }
     }
 
diff --git a/packages/nightwatch-devtools/src/reporter.ts b/packages/nightwatch-devtools/src/reporter.ts
index 087933cf..a6e8282e 100644
--- a/packages/nightwatch-devtools/src/reporter.ts
+++ b/packages/nightwatch-devtools/src/reporter.ts
@@ -1,43 +1,29 @@
 import logger from '@wdio/logger'
+import { TestReporterBase } from '@wdio/devtools-core'
+import { REUSE_ENV } from '@wdio/devtools-shared'
 import { DEFAULTS } from './constants.js'
-import {
-  extractTestMetadata,
-  generateStableUid,
-  resetSignatureCounters
-} from './helpers/utils.js'
+import { extractTestMetadata, generateStableUid } from './helpers/utils.js'
 import type { SuiteStats, TestStats } from './types.js'
 
 const log = logger('@wdio/nightwatch-devtools:Reporter')
 
-export class TestReporter {
-  #report: (data: any) => void
+export class TestReporter extends TestReporterBase {
   #currentSpecFile?: string
   #testNamesCache = new Map<string, string[]>()
   #currentSuite?: SuiteStats
-  #allSuites: SuiteStats[] = []
 
-  constructor(report: (data: any) => void) {
-    this.#report = report
-    resetSignatureCounters()
-  }
-
-  /**
-   * Called when a suite starts
-   */
   onSuiteStart(suiteStats: SuiteStats) {
     this.#currentSpecFile = suiteStats.file
     this.#currentSuite = suiteStats
     const rerunLabel =
-      process.env.DEVTOOLS_RERUN_ENTRY_TYPE === 'test'
-        ? process.env.DEVTOOLS_RERUN_LABEL?.trim()
+      process.env[REUSE_ENV.RERUN_ENTRY_TYPE] === 'test'
+        ? process.env[REUSE_ENV.RERUN_LABEL]?.trim()
         : undefined
 
-    // Generate stable UID only if not already set
     if (!suiteStats.uid) {
       suiteStats.uid = generateStableUid(suiteStats)
     }
 
-    // Extract test names from source file
     if (
       this.#currentSpecFile &&
       !this.#testNamesCache.has(this.#currentSpecFile)
@@ -54,101 +40,49 @@ export class TestReporter {
       }
     }
 
-    this.#allSuites.push(suiteStats)
-    this.#sendUpstream()
+    this.allSuites.push(suiteStats)
+    this.sendUpstream()
   }
 
-  /**
-   * Clear execution data when a rerun starts.
-   * Resets test name cache and suites so they're repopulated fresh during the new run.
-   */
-  clearExecutionData() {
+  override clearExecutionData() {
+    super.clearExecutionData()
     this.#testNamesCache.clear()
-    this.#allSuites = []
     this.#currentSuite = undefined
     this.#currentSpecFile = undefined
-    resetSignatureCounters()
-  }
-
-  /**
-   * Update the upstream reporter callback (used after a WebDriver session change
-   * so suite data is sent over the new WebSocket without rebuilding the reporter).
-   */
-  updateUpstream(report: (data: any) => void) {
-    this.#report = report
-  }
-
-  /**
-   * Update the suites data (send to UI)
-   */
-  updateSuites() {
-    this.#sendUpstream()
   }
 
-  /**
-   * Get the current suite
-   */
   getCurrentSuite(): SuiteStats | undefined {
     return this.#currentSuite
   }
 
-  /**
-   * Called when a test starts
-   */
+  /** Find by title within parent suite — Nightwatch retries reuse the title slot. */
   onTestStart(testStats: TestStats) {
-    // Generate stable UID (hashed, so consistent even if called multiple times)
     if (!testStats.uid || testStats.uid.includes('temp-')) {
       testStats.uid = generateStableUid(testStats)
     }
 
-    // Search for test by title within parent suite
-    for (const suite of this.#allSuites) {
+    for (const suite of this.allSuites) {
       const testIndex = suite.tests.findIndex((t) => {
         if (typeof t === 'string') {
           return false
         }
-        // Match by title and parent suite
         return t.title === testStats.title && t.parent === suite.uid
       })
       if (testIndex !== -1) {
-        // Update existing test
         suite.tests[testIndex] = testStats
-        this.#sendUpstream()
+        this.sendUpstream()
         return
       }
     }
 
-    // Test not found in any suite, add it to current suite (legacy behavior)
     if (this.#currentSuite) {
       this.#currentSuite.tests.push(testStats)
     }
-
-    this.#sendUpstream()
-  }
-
-  /**
-   * Called when a test ends
-   */
-  onTestEnd(testStats: TestStats) {
-    // Search all suites for this test (not just current suite)
-    for (const suite of this.#allSuites) {
-      const testIndex = suite.tests.findIndex(
-        (t) => (typeof t === 'string' ? t : t.uid) === testStats.uid
-      )
-      if (testIndex !== -1) {
-        suite.tests[testIndex] = testStats
-        break
-      }
-    }
-
-    this.#sendUpstream()
+    this.sendUpstream()
   }
 
-  /**
-   * Called when a suite ends - create skipped tests
-   */
-  onSuiteEnd(suiteStats: SuiteStats) {
-    // Get all test names from cache
+  /** Synthesize `skipped` entries for tests that never executed. */
+  override onSuiteEnd(suiteStats: SuiteStats) {
     const cachedNames = this.#testNamesCache.get(suiteStats.file) || []
     const processedTestNames = new Set(
       suiteStats.tests
@@ -156,7 +90,6 @@ export class TestReporter {
         .filter((title): title is string => Boolean(title))
     )
 
-    // Create skipped tests for tests that didn't run
     cachedNames.forEach((testName) => {
       if (!processedTestNames.has(testName)) {
         const skippedTest: TestStats = {
@@ -177,48 +110,22 @@ export class TestReporter {
           _duration: DEFAULTS.DURATION,
           hooks: []
         }
-
         suiteStats.tests.push(skippedTest)
         log.info(`Created skipped test "${testName}" (never executed)`)
       }
     })
 
-    this.#sendUpstream()
+    this.sendUpstream()
   }
 
-  /**
-   * Update a specific suite and send to UI (used when updating suite title)
-   */
+  /** Replace a suite when its UID changes mid-run (after spec rescan). */
   updateSuite(suiteStats: SuiteStats) {
-    // Find and remove the old suite by file
-    const index = this.#allSuites.findIndex((s) => s.file === suiteStats.file)
+    const index = this.allSuites.findIndex((s) => s.file === suiteStats.file)
     if (index !== -1) {
-      // Remove the old suite entry (with old UID)
-      this.#allSuites.splice(index, 1)
+      this.allSuites.splice(index, 1)
     }
-    // Add the updated suite with new UID
-    this.#allSuites.push(suiteStats)
-    // Update current suite reference
+    this.allSuites.push(suiteStats)
     this.#currentSuite = suiteStats
-    this.#sendUpstream()
-  }
-
-  #sendUpstream() {
-    const payload: Record<string, SuiteStats>[] = []
-
-    for (const suite of this.#allSuites) {
-      if (suite && suite.uid) {
-        // Each suite becomes an object with its UID as the key
-        payload.push({ [suite.uid]: suite })
-      }
-    }
-
-    if (payload.length > 0) {
-      this.#report(payload)
-    }
-  }
-
-  get report() {
-    return this.#allSuites
+    this.sendUpstream()
   }
 }
diff --git a/packages/nightwatch-devtools/src/screencast.ts b/packages/nightwatch-devtools/src/screencast.ts
new file mode 100644
index 00000000..26c7a2f5
--- /dev/null
+++ b/packages/nightwatch-devtools/src/screencast.ts
@@ -0,0 +1,50 @@
+import logger from '@wdio/logger'
+import { ScreencastRecorderBase, errorMessage } from '@wdio/devtools-core'
+import type { ScreencastOptions } from '@wdio/devtools-shared'
+import type { SessionCapturer } from './session.js'
+import type { NightwatchBrowser } from './types.js'
+
+const log = logger('@wdio/nightwatch-devtools:ScreencastRecorder')
+
+/**
+ * Nightwatch screencast recorder. Polling-only — Nightwatch doesn't expose a
+ * stable CDP escape hatch the way WDIO (getPuppeteer) and Selenium
+ * (createCDPConnection) do.
+ *
+ * `browser.takeScreenshot()` goes through Nightwatch's command queue and is
+ * unreliable for polling (the existing code has `takeScreenshotViaHttp` for
+ * the same reason — see session.ts). The recorder delegates to that helper
+ * instead so screenshots fire directly over the WebDriver HTTP transport.
+ */
+export class ScreencastRecorder extends ScreencastRecorderBase<NightwatchBrowser> {
+  readonly #sessionCapturer: SessionCapturer
+
+  constructor(sessionCapturer: SessionCapturer, options: ScreencastOptions) {
+    super(options)
+    this.#sessionCapturer = sessionCapturer
+  }
+
+  protected override onPollingStarted(intervalMs: number): void {
+    log.info(
+      `✓ Screencast recording started (polling mode, ${intervalMs} ms interval)`
+    )
+  }
+
+  protected override onPollingStopped(frameCount: number): void {
+    log.info(`✓ Screencast stopped — ${frameCount} frame(s) collected`)
+  }
+
+  protected override onUnavailable(err: unknown): void {
+    log.warn(
+      `Screencast unavailable (${errorMessage(err)}). Recording skipped.`
+    )
+  }
+
+  protected override async takeScreenshot(): Promise<string | null> {
+    const browser = this.driver
+    if (!browser) {
+      return null
+    }
+    return this.#sessionCapturer.takeScreenshotViaHttp(browser)
+  }
+}
diff --git a/packages/nightwatch-devtools/src/session.ts b/packages/nightwatch-devtools/src/session.ts
index e00fada3..ec7b79ec 100644
--- a/packages/nightwatch-devtools/src/session.ts
+++ b/packages/nightwatch-devtools/src/session.ts
@@ -1,22 +1,22 @@
-import fs from 'node:fs/promises'
 import http from 'node:http'
-import path from 'node:path'
-import { createRequire } from 'node:module'
 import logger from '@wdio/logger'
-import { WebSocket } from 'ws'
 import {
-  CONSOLE_METHODS,
-  LOG_SOURCES,
-  NAVIGATION_COMMANDS,
-  SPINNER_RE
-} from './constants.js'
-import {
-  stripAnsiCodes,
-  detectLogLevel,
+  SessionCapturerBase,
   createConsoleLogEntry,
-  chromeLogLevelToLogLevel,
-  getRequestType
-} from './helpers/utils.js'
+  errorMessage,
+  loadInjectableScript,
+  pollUntilReady,
+  serializeError,
+  type LogSource
+} from '@wdio/devtools-core'
+import { LOG_SOURCES, NAVIGATION_COMMANDS } from './constants.js'
+import { chromeLogLevelToLogLevel } from './helpers/utils.js'
+import {
+  parseNetworkFromPerfLogs,
+  dedupeNetworkRequests,
+  type NetworkEntry,
+  type PerfLogEntry
+} from './helpers/perfLogs.js'
 import { CAPTURE_PERFORMANCE_SCRIPT } from './helpers/capturePerformance.js'
 import type {
   CommandLog,
@@ -25,242 +25,57 @@ import type {
   NightwatchBrowser
 } from './types.js'
 
-const require = createRequire(import.meta.url)
 const log = logger('@wdio/nightwatch-devtools:SessionCapturer')
 
-export class SessionCapturer {
-  #ws: WebSocket | undefined
-  #originalConsoleMethods: Record<
-    (typeof CONSOLE_METHODS)[number],
-    typeof console.log
-  >
-  #originalProcessMethods: {
-    stdoutWrite: typeof process.stdout.write
-    stderrWrite: typeof process.stderr.write
+/**
+ * WebDriver responses are sometimes wrapped as `{ value: T }` (the W3C
+ * protocol shape) and sometimes flat. This helper unwraps the value field
+ * if present, otherwise returns the input as-is.
+ */
+function unwrapDriverValue<T = unknown>(result: unknown): T {
+  if (result && typeof result === 'object' && 'value' in result) {
+    return (result as { value: T }).value
   }
-  #isCapturingConsole = false
-  #browser: NightwatchBrowser | undefined
-  #commandCounter = 0
-  #sentCommandIds = new Set<number>()
+  return result as T
+}
 
-  commandsLog: CommandLog[] = []
-  sources = new Map<string, string>()
-  consoleLogs: ConsoleLog[] = []
-  mutations: any[] = []
-  traceLogs: string[] = []
-  networkRequests: any[] = []
-  metadata?: any
+export class SessionCapturer extends SessionCapturerBase {
+  #browser: NightwatchBrowser | undefined
 
   constructor(
     devtoolsOptions: { hostname?: string; port?: number } = {},
     browser?: NightwatchBrowser
   ) {
-    const { port, hostname } = devtoolsOptions
+    super(devtoolsOptions)
     this.#browser = browser
-    if (hostname && port) {
-      this.#ws = new WebSocket(`ws://${hostname}:${port}/worker`)
-
-      this.#ws.on('open', () => {
-        this.#hasConnected = true
-        log.info('✓ Worker WebSocket connected to backend')
-      })
-
-      this.#ws.on('error', (err: unknown) =>
-        log.error(
-          `Couldn't connect to devtools backend: ${(err as Error).message}`
-        )
-      )
-
-      this.#ws.on('close', () => {
-        log.info('Worker WebSocket disconnected')
-      })
-    }
-
-    this.#originalConsoleMethods = {
-      log: console.log,
-      info: console.info,
-      warn: console.warn,
-      error: console.error
-    }
-
-    this.#originalProcessMethods = {
-      stdoutWrite: process.stdout.write.bind(process.stdout),
-      stderrWrite: process.stderr.write.bind(process.stderr)
-    }
-
-    this.#patchConsole()
-    this.#interceptProcessStreams()
+    this.patchConsole()
+    this.patchStreams()
   }
 
-  #patchConsole() {
-    CONSOLE_METHODS.forEach((method) => {
-      const originalMethod = this.#originalConsoleMethods[method]
-      console[method] = (...consoleArgs: any[]) => {
-        this.#isCapturingConsole = true
-        const result = originalMethod.apply(console, consoleArgs)
-        this.#isCapturingConsole = false
-
-        // Capture all console output; strip ANSI codes for clean display in UI
-        const rawText = consoleArgs
-          .map((a) =>
-            typeof a === 'object' && a !== null ? JSON.stringify(a) : String(a)
-          )
-          .join(' ')
-        const cleanText = stripAnsiCodes(rawText).trim()
-        if (!cleanText) {
-          return result
-        }
-
-        const logEntry = createConsoleLogEntry(
-          method as LogLevel,
-          [cleanText],
-          LOG_SOURCES.TEST
-        )
-        this.consoleLogs.push(logEntry)
-        this.sendUpstream('consoleLogs', [logEntry])
-
-        return result
-      }
-    })
+  protected override onWsOpen(): void {
+    log.info('✓ Worker WebSocket connected to backend')
   }
 
-  #isInternalStreamLine(line: string): boolean {
-    const t = line.trim()
-    return (
-      t.startsWith('{"') ||
-      t.includes('@wdio/devtools-backend') ||
-      t.startsWith('[SESSION]')
-    )
+  protected override onWsError(err: unknown): void {
+    log.error(`Couldn't connect to devtools backend: ${errorMessage(err)}`)
   }
 
-  #hasConnected = false
-  #isCapturingStream = false
-
-  #interceptProcessStreams() {
-    const captureTerminalOutput = (outputData: string | Uint8Array) => {
-      if (this.#isCapturingStream) {
-        return
-      }
-      const outputText =
-        typeof outputData === 'string' ? outputData : outputData.toString()
-      if (!outputText?.trim()) {
-        return
-      }
-
-      this.#isCapturingStream = true
-      try {
-        const linesToCapture: string[] = []
-
-        for (const rawLine of outputText.split('\n')) {
-          const segments = rawLine.split('\r').filter((s) => s.trim())
-          const lastSegment = segments[segments.length - 1] ?? rawLine
-          const clean = stripAnsiCodes(lastSegment).trim()
-          if (
-            !clean ||
-            this.#isInternalStreamLine(clean) ||
-            SPINNER_RE.test(clean)
-          ) {
-            continue
-          }
-          linesToCapture.push(clean)
-        }
-
-        for (const clean of linesToCapture) {
-          const logEntry = createConsoleLogEntry(
-            detectLogLevel(clean),
-            [clean],
-            LOG_SOURCES.TERMINAL
-          )
-          this.consoleLogs.push(logEntry)
-          this.sendUpstream('consoleLogs', [logEntry])
-        }
-      } finally {
-        this.#isCapturingStream = false
-      }
-    }
-
-    const interceptStreamWrite = (
-      stream: NodeJS.WriteStream,
-      originalWriteMethod: (...args: any[]) => boolean
-    ) => {
-      const capturer = this
-      stream.write = function (chunk: any, ...additionalArgs: any[]): boolean {
-        const writeResult = originalWriteMethod.call(
-          stream,
-          chunk,
-          ...additionalArgs
-        )
-        if (chunk && !capturer.#isCapturingConsole) {
-          captureTerminalOutput(chunk)
-        }
-        return writeResult
-      } as any
-    }
-
-    interceptStreamWrite(
-      process.stdout,
-      this.#originalProcessMethods.stdoutWrite
-    )
-    interceptStreamWrite(
-      process.stderr,
-      this.#originalProcessMethods.stderrWrite
-    )
-  }
-
-  #restoreConsole() {
-    CONSOLE_METHODS.forEach((method) => {
-      console[method] = this.#originalConsoleMethods[method]
-    })
-  }
-
-  #restoreProcessStreams() {
-    process.stdout.write = this.#originalProcessMethods.stdoutWrite as any
-    process.stderr.write = this.#originalProcessMethods.stderrWrite as any
-  }
-
-  cleanup() {
-    this.#restoreConsole()
-    this.#restoreProcessStreams()
-  }
-
-  get isReportingUpstream() {
-    return Boolean(this.#ws) && this.#ws?.readyState === WebSocket.OPEN
+  protected override onWsClose(): void {
+    log.info('Worker WebSocket disconnected')
   }
 
   /**
-   * Wait for WebSocket to connect
+   * Push every captured line into the local `consoleLogs` array so it ends up
+   * in any future trace export, in addition to the live WS broadcast.
    */
-  async waitForConnection(timeoutMs: number = 5000): Promise<boolean> {
-    if (!this.#ws) {
-      return false
-    }
-
-    if (this.#ws.readyState === WebSocket.OPEN) {
-      return true
-    }
-
-    return new Promise((resolve) => {
-      const timeout = setTimeout(() => {
-        log.warn(`WebSocket connection timeout after ${timeoutMs}ms`)
-        resolve(false)
-      }, timeoutMs)
-
-      this.#ws!.once('open', () => {
-        clearTimeout(timeout)
-        resolve(true)
-      })
-
-      this.#ws!.once('error', () => {
-        clearTimeout(timeout)
-        resolve(false)
-      })
-    })
-  }
-
-  #serializeError(error: Error | undefined) {
-    return error
-      ? { name: error.name, message: error.message, stack: error.stack }
-      : undefined
+  protected override onLine(
+    type: LogLevel,
+    args: string[],
+    source: LogSource
+  ): void {
+    const entry = createConsoleLogEntry(type, args, source)
+    this.consoleLogs.push(entry)
+    this.sendUpstream('consoleLogs', [entry])
   }
 
   async captureCommand(
@@ -273,15 +88,15 @@ export class SessionCapturer {
     timestamp?: number
   ): Promise<boolean> {
     // Serialize error properly (Error objects don't JSON.stringify well)
-    const serializedError = this.#serializeError(error)
+    const serializedError = serializeError(error)
 
-    const commandId = this.#commandCounter++
+    const commandId = this.commandCounter++
     const commandLogEntry: CommandLog & { _id?: number } = {
       _id: commandId,
       command,
       args,
       result,
-      error: serializedError as any,
+      error: serializedError,
       timestamp: timestamp || Date.now(),
       callSource,
       testUid
@@ -294,9 +109,7 @@ export class SessionCapturer {
     )
     if (isNavigationCommand && this.#browser && !error) {
       this.#capturePerformanceData(commandLogEntry, args).catch((err) => {
-        log.warn(
-          `Failed to capture performance data: ${(err as Error).message}`
-        )
+        log.warn(`Failed to capture performance data: ${errorMessage(err)}`)
       })
     }
 
@@ -313,13 +126,10 @@ export class SessionCapturer {
       CAPTURE_PERFORMANCE_SCRIPT
     )
 
-    let data: any
-    if (performanceData && typeof performanceData === 'object') {
-      data =
-        'value' in performanceData
-          ? (performanceData as any).value
-          : performanceData
-    }
+    // `data` field surface is loose (Chrome perf data dump) — keep it `any`
+    // for the downstream property access. `unwrapDriverValue` handles the
+    // `{value: ...}` W3C-protocol unwrap when present.
+    const data: any = unwrapDriverValue(performanceData)
 
     if (data && data.navigation) {
       commandLogEntry.performance = {
@@ -339,17 +149,6 @@ export class SessionCapturer {
     }
   }
 
-  /** Send a command to the UI (only if not already sent) */
-  sendCommand(command: CommandLog & { _id?: number }) {
-    if (command._id !== undefined && !this.#sentCommandIds.has(command._id)) {
-      this.#sentCommandIds.add(command._id)
-      // Remove internal ID before sending
-      const commandToSend = { ...command }
-      delete commandToSend._id
-      this.sendUpstream('commands', [commandToSend])
-    }
-  }
-
   /**
    * Replace an already-captured command entry (used for retried commands so
    * only the final execution result is shown in the UI).
@@ -368,23 +167,25 @@ export class SessionCapturer {
     timestamp?: number
   ): { entry: CommandLog & { _id?: number }; oldTimestamp: number } {
     // Remove the superseded entry and capture its timestamp for the UI
-    const idx = this.commandsLog.findIndex((c: any) => c._id === oldId)
+    const idx = this.commandsLog.findIndex(
+      (c) => (c as CommandLog & { _id?: number })._id === oldId
+    )
     const oldTimestamp: number =
-      idx !== -1 ? ((this.commandsLog[idx] as any).timestamp ?? 0) : 0
+      idx !== -1 ? (this.commandsLog[idx]?.timestamp ?? 0) : 0
     if (idx !== -1) {
       this.commandsLog.splice(idx, 1)
     }
     // Allow the slot to be re-used by a new entry
-    this.#sentCommandIds.delete(oldId)
+    this.sentCommandIds.delete(oldId)
 
-    const serializedError = this.#serializeError(error)
-    const commandId = this.#commandCounter++
+    const serializedError = serializeError(error)
+    const commandId = this.commandCounter++
     const entry: CommandLog & { _id?: number } = {
       _id: commandId,
       command,
       args,
       result,
-      error: serializedError as any,
+      error: serializedError,
       timestamp: timestamp || Date.now(),
       callSource,
       testUid
@@ -393,26 +194,16 @@ export class SessionCapturer {
     return { entry, oldTimestamp }
   }
 
-  /** Send a replace-command event to the UI (swaps old entry in-place) */
-  sendReplaceCommand(
-    oldTimestamp: number,
-    command: CommandLog & { _id?: number }
-  ) {
-    const commandToSend = { ...command }
-    delete commandToSend._id
-    this.sendUpstream('replaceCommand', {
-      oldTimestamp,
-      command: commandToSend
-    })
-  }
-
   /**
    * Take a screenshot by calling the WebDriver HTTP endpoint directly.
    * This completely bypasses Nightwatch's command queue so there is no risk
    * of the request being appended after `end()` / `quit()`.
    */
   takeScreenshotViaHttp(browser: NightwatchBrowser): Promise<string | null> {
-    const browserAny = browser as any
+    // Nightwatch's internal config lives at non-public paths (transport,
+    // queue.transport, nightwatchInstance.settings, globals.nightwatchInstance);
+    // none are in the NightwatchBrowser type. Cast once for dynamic access.
+    const browserAny = browser as unknown as Record<string, any>
     const sessionId = browserAny.sessionId
     if (!sessionId) {
       return Promise.resolve(null)
@@ -478,7 +269,7 @@ export class SessionCapturer {
       })
       req.on('error', (err) => {
         log.warn(
-          `[screenshot] HTTP request failed (${endpoint}): ${(err as Error).message}`
+          `[screenshot] HTTP request failed (${endpoint}): ${errorMessage(err)}`
         )
         resolve(null)
       })
@@ -490,60 +281,22 @@ export class SessionCapturer {
     })
   }
 
-  /** Capture test source code */
-  async captureSource(filePath: string) {
-    if (!this.sources.has(filePath)) {
-      try {
-        const sourceCode = await fs.readFile(filePath, 'utf-8')
-        this.sources.set(filePath, sourceCode.toString())
-        this.sendUpstream('sources', { [filePath]: sourceCode.toString() })
-      } catch (err) {
-        log.warn(
-          `Failed to read source file ${filePath}: ${(err as Error).message}`
-        )
-      }
-    }
+  protected override onSourceReadError(filePath: string, err: unknown): void {
+    log.warn(`Failed to read source file ${filePath}: ${errorMessage(err)}`)
   }
 
-  /** Send data upstream to backend */
-  sendUpstream(event: string, data: any) {
-    if (!this.#ws || this.#ws.readyState !== WebSocket.OPEN) {
-      if (this.#hasConnected) {
-        log.warn(`[upstream] WebSocket not open — dropping "${event}" event`)
-      }
+  protected override onUpstreamDrop(
+    event: string,
+    reason: 'closed' | 'send-error',
+    err?: unknown
+  ): void {
+    if (reason === 'send-error') {
+      log.warn(`[upstream] Failed to send "${event}": ${errorMessage(err)}`)
       return
     }
-
-    try {
-      this.#ws.send(JSON.stringify({ scope: event, data }))
-    } catch (err) {
-      log.warn(
-        `[upstream] Failed to send "${event}": ${(err as Error).message}`
-      )
-    }
-  }
-
-  /** Returns true when the WebSocket is open. */
-  isConnected(): boolean {
-    return this.#ws?.readyState === WebSocket.OPEN
-  }
-
-  /**
-   * Gracefully close the WebSocket, waiting for any buffered messages to flush.
-   * Call this before process exit in reuse mode to prevent data loss.
-   */
-  async closeWebSocket(): Promise<void> {
-    if (!this.#ws || this.#ws.readyState === WebSocket.CLOSED) {
-      return
+    if (this.hasEverConnected()) {
+      log.warn(`[upstream] WebSocket not open — dropping "${event}" event`)
     }
-    return new Promise<void>((resolve) => {
-      const timeout = setTimeout(resolve, 2000)
-      this.#ws!.once('close', () => {
-        clearTimeout(timeout)
-        resolve()
-      })
-      this.#ws!.close()
-    })
   }
 
   /**
@@ -551,37 +304,21 @@ export class SessionCapturer {
    */
   async injectScript(browser: NightwatchBrowser) {
     try {
-      // Load the preload script
-      const scriptPath = require.resolve('@wdio/devtools-script')
-      const scriptDir = path.dirname(scriptPath)
-      const preloadScriptPath = path.join(scriptDir, 'script.js')
-      let scriptContent = await fs.readFile(preloadScriptPath, 'utf-8')
-
-      // The script contains top-level await - wrap the entire script in async IIFE before injection
-      scriptContent = `(async function() { ${scriptContent} })()`
-
-      // Inject using script element - synchronous check after timeout
+      const scriptContent = await loadInjectableScript()
       const injectionScript = `
         const script = document.createElement('script');
         script.textContent = arguments[0];
         document.head.appendChild(script);
         return true;
       `
-
       await browser.execute(injectionScript, [scriptContent])
 
-      // Poll for collector — the async IIFE may take a moment to initialise
-      let hasCollector = false
-      for (let attempt = 0; attempt < 5; attempt++) {
-        await new Promise((resolve) => setTimeout(resolve, 200))
+      const hasCollector = await pollUntilReady(async () => {
         const checkResult = await browser.execute(
           'return typeof window.wdioTraceCollector !== "undefined"'
         )
-        hasCollector = ((checkResult as any)?.value ?? checkResult) === true
-        if (hasCollector) {
-          break
-        }
-      }
+        return unwrapDriverValue<unknown>(checkResult) === true
+      })
 
       if (hasCollector) {
         log.info('✓ Script injected and collector ready')
@@ -589,7 +326,7 @@ export class SessionCapturer {
         log.warn('Script injection may have failed — collector not found')
       }
     } catch (err) {
-      log.error(`Failed to inject script: ${(err as Error).message}`)
+      log.error(`Failed to inject script: ${errorMessage(err)}`)
       throw err
     }
   }
@@ -600,13 +337,17 @@ export class SessionCapturer {
    */
   async captureBrowserLogs(browser: NightwatchBrowser) {
     try {
-      const rawLogs = await (browser as any).getLog('browser')
-      const logs = ((rawLogs as any)?.value ?? rawLogs) as Array<{
-        level: string
-        message: string
-        source: string
-        timestamp: number
-      }>
+      const rawLogs = await (
+        browser as unknown as Record<string, (type: string) => Promise<unknown>>
+      ).getLog('browser')
+      const logs = unwrapDriverValue<
+        Array<{
+          level: string
+          message: string
+          source: string
+          timestamp: number
+        }>
+      >(rawLogs)
 
       if (!Array.isArray(logs) || logs.length === 0) {
         return
@@ -632,126 +373,36 @@ export class SessionCapturer {
    */
   async captureNetworkFromPerformanceLogs(browser: NightwatchBrowser) {
     try {
-      const rawLogs = await (browser as any).getLog('performance')
-      const logs = ((rawLogs as any)?.value ?? rawLogs) as Array<{
-        level: string
-        message: string
-        timestamp: number
-      }>
+      const rawLogs = await (
+        browser as unknown as Record<string, (type: string) => Promise<unknown>>
+      ).getLog('performance')
+      const logs = unwrapDriverValue<PerfLogEntry[]>(rawLogs)
 
       if (!Array.isArray(logs) || logs.length === 0) {
         return
       }
 
-      // Parse CDP Network.* events from the performance log
-      const pendingRequests = new Map<string, any>()
-      const networkEntries: any[] = []
-
-      for (const entry of logs) {
-        try {
-          const msg = JSON.parse(entry.message)
-          const { method, params } = msg.message
-
-          if (method === 'Network.requestWillBeSent') {
-            const { requestId, request: req, timestamp } = params
-            pendingRequests.set(requestId, {
-              id: `${entry.timestamp}-${requestId}`,
-              url: req.url,
-              method: req.method,
-              requestHeaders: req.headers,
-              timestamp: Math.round(timestamp * 1000),
-              startTime: entry.timestamp
-            })
-          } else if (method === 'Network.responseReceived') {
-            const { requestId, response } = params
-            const pending = pendingRequests.get(requestId)
-            if (pending) {
-              const responseHeaders: Record<string, string> = {}
-              for (const [k, v] of Object.entries(response.headers || {})) {
-                responseHeaders[k.toLowerCase()] = String(v)
-              }
-              pending.status = response.status
-              pending.statusText = response.statusText
-              pending.responseHeaders = responseHeaders
-              pending.mimeType = response.mimeType
-              pending.type = getRequestType(pending.url, response.mimeType)
-            }
-          } else if (method === 'Network.loadingFinished') {
-            const { requestId, encodedDataLength } = params
-            const pending = pendingRequests.get(requestId)
-            if (pending && pending.status !== undefined) {
-              pending.size = encodedDataLength
-              pending.endTime = entry.timestamp
-              pending.time = entry.timestamp - pending.startTime
-              networkEntries.push({ ...pending })
-              pendingRequests.delete(requestId)
-            }
-          } else if (method === 'Network.loadingFailed') {
-            const { requestId, errorText } = params
-            const pending = pendingRequests.get(requestId)
-            if (pending) {
-              pending.error = errorText
-              pending.endTime = entry.timestamp
-              pending.time = entry.timestamp - pending.startTime
-              networkEntries.push({ ...pending })
-              pendingRequests.delete(requestId)
-            }
-          }
-        } catch {
-          // skip malformed entries
-        }
+      const networkEntries = parseNetworkFromPerfLogs(logs)
+      if (networkEntries.length === 0) {
+        return
       }
 
-      if (networkEntries.length > 0) {
-        // Helper: for failed requests strip query string so that parallel
-        // autocomplete/prefetch requests to the same path (e.g. /search?q=W,
-        // /search?q=We, /search?q=Web…) collapse to a single entry.
-        const failedKey = (entry: any): string => {
-          try {
-            const u = new URL(entry.url)
-            return `err:${entry.method}:${u.origin}${u.pathname}`
-          } catch {
-            return `err:${entry.method}:${entry.url}`
-          }
-        }
-
-        const alreadySeen = new Set(
-          this.networkRequests.map((r: any) =>
-            r.error !== undefined
-              ? failedKey(r)
-              : `ok:${r.method}:${r.url}:${r.timestamp}`
-          )
-        )
-
-        const deduped: any[] = []
-        const seenFailedInBatch = new Map<string, number>()
-
-        for (const entry of networkEntries) {
-          if (entry.error !== undefined) {
-            const key = failedKey(entry)
-            if (alreadySeen.has(key)) {
-              continue
-            }
-            const existing = seenFailedInBatch.get(key)
-            if (existing !== undefined) {
-              deduped[existing] = entry // replace with latest failure
-            } else {
-              seenFailedInBatch.set(key, deduped.length)
-              deduped.push(entry)
-            }
-          } else {
-            const key = `ok:${entry.method}:${entry.url}:${entry.timestamp}`
-            if (!alreadySeen.has(key)) {
-              deduped.push(entry)
-            }
-          }
-        }
-
-        this.networkRequests.push(...deduped)
-        this.sendUpstream('networkRequests', deduped)
+      const deduped = dedupeNetworkRequests(
+        networkEntries,
+        this.networkRequests as NetworkEntry[]
+      )
+      if (deduped.length > 0) {
+        // NetworkEntry has `type?: string`; the shared NetworkRequest needs
+        // `type: string` so default the field at this framework boundary.
+        const normalized = deduped.map((d) => ({
+          ...d,
+          type: d.type ?? 'unknown'
+        }))
+        this.networkRequests.push(...normalized)
+        this.sendUpstream('networkRequests', normalized)
       }
     } catch (err) {
-      const msg = (err as Error).message ?? ''
+      const msg = errorMessage(err) ?? ''
       // Silently skip when performance logging was not enabled in capabilities
       if (!msg.includes('log type') && !msg.includes('performance')) {
         log.warn(`Performance log capture failed: ${msg}`)
@@ -771,8 +422,7 @@ export class SessionCapturer {
       const checkResult = await browser.execute(
         'return typeof window.wdioTraceCollector !== "undefined"'
       )
-      const collectorExists =
-        ((checkResult as any)?.value ?? checkResult) === true
+      const collectorExists = unwrapDriverValue<unknown>(checkResult) === true
 
       if (!collectorExists) {
         return
@@ -785,52 +435,25 @@ export class SessionCapturer {
         return window.wdioTraceCollector.getTraceData();
       `)
 
-      const traceData = (result as any)?.value ?? result
+      const traceData = unwrapDriverValue<Record<string, unknown> | null>(
+        result
+      )
       if (!traceData) {
         return
       }
 
-      const { mutations, traceLogs, consoleLogs, networkRequests, metadata } =
-        traceData
-
-      if (metadata) {
-        this.metadata = { ...this.metadata, ...metadata }
-        this.sendUpstream('metadata', this.metadata)
-      }
-
-      if (Array.isArray(consoleLogs) && consoleLogs.length > 0) {
-        const tagged = consoleLogs.map((e: any) => ({
-          ...e,
-          source: LOG_SOURCES.BROWSER
-        }))
-        this.consoleLogs.push(...tagged)
-        this.sendUpstream('consoleLogs', tagged)
-      }
-
-      if (Array.isArray(networkRequests) && networkRequests.length > 0) {
-        this.networkRequests.push(...networkRequests)
-        this.sendUpstream('networkRequests', networkRequests)
-      }
-
-      if (Array.isArray(mutations) && mutations.length > 0) {
-        this.mutations.push(...mutations)
-        this.sendUpstream('mutations', mutations)
-        log.info(`[trace] Captured ${mutations.length} DOM mutation(s)`)
-      }
-
-      if (Array.isArray(traceLogs) && traceLogs.length > 0) {
-        this.traceLogs.push(...traceLogs)
-        this.sendUpstream('logs', traceLogs)
-      }
-
-      if (Array.isArray(networkRequests) && networkRequests.length > 0) {
-        log.info(
-          `[trace] Captured ${networkRequests.length} network request(s)`
-        )
+      this.processTracePayload(traceData)
+      const mutationCount = Array.isArray(
+        (traceData as { mutations?: unknown }).mutations
+      )
+        ? (traceData as { mutations: unknown[] }).mutations.length
+        : 0
+      if (mutationCount > 0) {
+        log.info(`[trace] Captured ${mutationCount} DOM mutation(s)`)
       }
     } catch (err) {
       log.error(
-        `Failed to capture trace from injected script: ${(err as Error).message}`
+        `Failed to capture trace from injected script: ${errorMessage(err)}`
       )
     }
   }
diff --git a/packages/nightwatch-devtools/src/types.ts b/packages/nightwatch-devtools/src/types.ts
index c159e7d0..6c861579 100644
--- a/packages/nightwatch-devtools/src/types.ts
+++ b/packages/nightwatch-devtools/src/types.ts
@@ -1,91 +1,30 @@
+// Nightwatch-specific types live here. Cross-package types come from @wdio/devtools-shared.
+
+export {
+  TraceType,
+  type CommandLog,
+  type ConsoleLog,
+  type DocumentInfo,
+  type LogLevel,
+  type Metadata,
+  type NetworkRequest,
+  type PerformanceData,
+  type ScreencastFrame,
+  type ScreencastOptions,
+  type SuiteStats,
+  type TestStats,
+  type TestStatus,
+  type TraceLog
+} from '@wdio/devtools-shared'
+
+import type { ScreencastOptions } from '@wdio/devtools-shared'
+
 export interface CommandStackFrame {
   command: string
   callSource?: string
   signature: string
 }
 
-export interface PerformanceData {
-  navigation?: {
-    url: string
-    timing: {
-      loadTime?: number
-      domReady?: number
-      responseTime?: number
-      dnsLookup?: number
-      tcpConnection?: number
-      serverResponse?: number
-    }
-  }
-  resources?: Array<{
-    url: string
-    duration: number
-    size: number
-    type: string
-    startTime: number
-    responseEnd: number
-  }>
-}
-
-export interface DocumentInfo {
-  url: string
-  title: string
-  headers: {
-    userAgent: string
-    language: string
-    platform: string
-  }
-  documentInfo: {
-    readyState: string
-    referrer: string
-    characterSet: string
-  }
-}
-
-export interface CommandLog {
-  command: string
-  args: any[]
-  result?: any
-  error?: Error
-  timestamp: number
-  callSource?: string
-  screenshot?: string
-  testUid?: string
-  performance?: PerformanceData
-  cookies?: string
-  documentInfo?: DocumentInfo
-}
-
-export enum TraceType {
-  Testrunner = 'testrunner'
-}
-
-export type LogLevel = 'trace' | 'debug' | 'log' | 'info' | 'warn' | 'error'
-
-export interface ConsoleLog {
-  timestamp: number
-  type: LogLevel
-  args: any[]
-  source: string
-}
-
-export interface TestStats {
-  uid: string
-  cid: string
-  title: string
-  fullTitle: string
-  parent: string
-  state: 'passed' | 'failed' | 'skipped' | 'pending' | 'running'
-  start: Date
-  end: Date | null
-  type: 'test'
-  file: string
-  retries: number
-  _duration: number
-  error?: Error
-  hooks?: any[]
-  callSource?: string
-}
-
 export interface NightwatchTestCase {
   passed: number
   failed: number
@@ -107,46 +46,16 @@ export interface StepLocation {
   line: number
 }
 
-export interface SuiteStats {
-  uid: string
-  cid: string
-  title: string
-  fullTitle: string
-  type: 'suite'
-  file: string
-  start: Date
-  state?: 'pending' | 'running' | 'passed' | 'failed' | 'skipped'
-  end?: Date | null
-  tests: (string | TestStats)[]
-  suites: SuiteStats[]
-  hooks: any[]
-  _duration: number
-  parent?: string
-  callSource?: string
-}
-
-export interface Metadata {
-  type: TraceType
-  url?: string
-  options?: any
-  capabilities?: any
-  viewport?: any
-}
-
-export interface TraceLog {
-  mutations: any[]
-  logs: string[]
-  consoleLogs: ConsoleLog[]
-  networkRequests: any[]
-  metadata: Metadata
-  commands: CommandLog[]
-  sources: Record<string, string>
-  suites: Record<string, SuiteStats>[]
-}
-
 export interface DevToolsOptions {
   port?: number
   hostname?: string
+  /**
+   * Screencast recording options. When enabled, a continuous video of the
+   * browser session is recorded and saved as a .webm file at the end of the
+   * test run. Polling mode only on Nightwatch (no CDP push); works on every
+   * browser Nightwatch supports.
+   */
+  screencast?: ScreencastOptions
 }
 
 export interface NightwatchBrowser {
@@ -172,33 +81,3 @@ export interface NightwatchBrowser {
   results?: any
   queue?: any
 }
-
-export interface NetworkRequest {
-  id: string
-  url: string
-  method: string
-  headers?: Record<string, string>
-  cookies?: any[]
-  status?: number
-  statusText?: string
-  timestamp: number
-  startTime: number
-  endTime?: number
-  time?: number
-  type: string
-  requestHeaders?: Record<string, string>
-  responseHeaders?: Record<string, string>
-  navigation?: string
-  redirectChain?: any[]
-  children?: NetworkRequest[]
-  response?: {
-    fromCache: boolean
-    headers: Record<string, string>
-    mimeType: string
-    status: number
-  }
-  error?: string
-  requestBody?: string
-  responseBody?: string
-  size?: number
-}
diff --git a/packages/nightwatch-devtools/tests/serializeCommandResult.test.ts b/packages/nightwatch-devtools/tests/serializeCommandResult.test.ts
new file mode 100644
index 00000000..d8520714
--- /dev/null
+++ b/packages/nightwatch-devtools/tests/serializeCommandResult.test.ts
@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest'
+import { serializeCommandResult } from '../src/helpers/serializeCommandResult.js'
+
+describe('serializeCommandResult', () => {
+  describe('null/undefined inputs', () => {
+    it('returns undefined for null', () => {
+      expect(serializeCommandResult(null, 'click')).toBeUndefined()
+    })
+
+    it('returns undefined for undefined', () => {
+      expect(serializeCommandResult(undefined, 'click')).toBeUndefined()
+    })
+  })
+
+  describe('Nightwatch assertion objects {passed, ...}', () => {
+    it('collapses to `true` when passed: true', () => {
+      const result = serializeCommandResult(
+        { passed: true, actual: 'foo', expected: 'foo' },
+        'expect'
+      )
+      expect(result).toBe(true)
+    })
+
+    it('returns the structured failure record when passed: false', () => {
+      const result = serializeCommandResult(
+        {
+          passed: false,
+          actual: 'foo',
+          expected: 'bar',
+          message: 'mismatch'
+        },
+        'expect'
+      )
+      expect(result).toEqual({
+        passed: false,
+        actual: 'foo',
+        expected: 'bar',
+        message: 'mismatch'
+      })
+    })
+  })
+
+  describe('Driver result wrappers {value}', () => {
+    it('unwraps the inner value for normal commands', () => {
+      expect(serializeCommandResult({ value: 'page title' }, 'getTitle')).toBe(
+        'page title'
+      )
+    })
+
+    it('coerces null to false for boolean-semantic commands (waitFor*, is*, has*)', () => {
+      expect(serializeCommandResult({ value: null }, 'waitForExist')).toBe(
+        false
+      )
+      expect(serializeCommandResult({ value: null }, 'isVisible')).toBe(false)
+      expect(serializeCommandResult({ value: null }, 'hasClass')).toBe(false)
+    })
+
+    it('leaves null unchanged for non-boolean commands', () => {
+      expect(serializeCommandResult({ value: null }, 'getText')).toBe(null)
+    })
+
+    it('preserves an object value verbatim', () => {
+      expect(serializeCommandResult({ value: { x: 1 } }, 'execute')).toEqual({
+        x: 1
+      })
+    })
+  })
+
+  describe('Plain objects (deep-clone path)', () => {
+    it('deep-clones via JSON for plain objects', () => {
+      const input = { a: 1, nested: { b: 2 } }
+      const out = serializeCommandResult(input, 'execute')
+      expect(out).toEqual(input)
+      expect(out).not.toBe(input) // not the same reference
+    })
+
+    it('falls back to String() for circular references (JSON.stringify throws)', () => {
+      const circular: Record<string, unknown> = { a: 1 }
+      circular.self = circular
+      const out = serializeCommandResult(circular, 'execute')
+      expect(typeof out).toBe('string')
+      expect(out).toBe('[object Object]')
+    })
+  })
+
+  describe('Function inputs', () => {
+    it('returns undefined for a function (no useful serialization)', () => {
+      expect(serializeCommandResult(() => 1, 'execute')).toBeUndefined()
+    })
+  })
+})
diff --git a/packages/nightwatch-devtools/tsconfig.json b/packages/nightwatch-devtools/tsconfig.json
index 25c4541c..40ac89a1 100644
--- a/packages/nightwatch-devtools/tsconfig.json
+++ b/packages/nightwatch-devtools/tsconfig.json
@@ -11,7 +11,8 @@
     "strict": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "ignoreDeprecations": "6.0"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]
diff --git a/packages/script/src/utils.ts b/packages/script/src/utils.ts
index 579d2d27..5081428a 100644
--- a/packages/script/src/utils.ts
+++ b/packages/script/src/utils.ts
@@ -38,7 +38,7 @@ export function parseNode(
 
   try {
     return createVNode(
-      h(tagName, props, ...(childNodes || []).map((cn) => parseNode(cn))) as any
+      h(tagName, props, ...(childNodes || []).map((cn) => parseNode(cn)))
     )
   } catch (err: any) {
     return createVNode(h('div', { class: 'parseNode' }, err.stack))
diff --git a/packages/selenium-devtools/example/cucumber-test/cucumber.json b/packages/selenium-devtools/example/cucumber-test/cucumber.json
deleted file mode 100644
index b96a2d20..00000000
--- a/packages/selenium-devtools/example/cucumber-test/cucumber.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "default": {
-    "import": [
-      "example/cucumber-test/features/support/setup.js",
-      "example/cucumber-test/features/support/world.js",
-      "example/cucumber-test/features/support/steps.js"
-    ],
-    "paths": ["example/cucumber-test/features/*.feature"],
-    "publishQuiet": true,
-    "format": ["progress"]
-  }
-}
diff --git a/packages/selenium-devtools/package.json b/packages/selenium-devtools/package.json
index fb8b93ae..efc4cd50 100644
--- a/packages/selenium-devtools/package.json
+++ b/packages/selenium-devtools/package.json
@@ -22,15 +22,15 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch",
+    "build": "tsup src/index.ts --format esm --dts --sourcemap --clean",
+    "watch": "tsup src/index.ts --format esm --dts --sourcemap --watch",
     "clean": "rm -rf dist",
     "lint": "eslint .",
     "prepublishOnly": "pnpm build",
-    "example:mocha": "mocha --require @wdio/selenium-devtools --timeout 60000 example/mocha-test/test/example.js",
-    "example:jest": "NODE_OPTIONS=--experimental-vm-modules jest --config example/jest-test/jest.config.json",
-    "example:vitest": "vitest run --config example/vitest-test/vitest.config.js",
-    "example:cucumber": "cucumber-js --config example/cucumber-test/cucumber.json"
+    "example": "pnpm example:cucumber",
+    "example:mocha": "mocha --require @wdio/selenium-devtools --timeout 60000 ../../examples/selenium/mocha-test/test/example.js",
+    "example:jest": "NODE_OPTIONS=--experimental-vm-modules jest --config ../../examples/selenium/jest-test/jest.config.json",
+    "example:cucumber": "cucumber-js --config ../../examples/selenium/cucumber-test/cucumber.json"
   },
   "keywords": [
     "selenium",
@@ -56,10 +56,13 @@
     "@cucumber/cucumber": "^11.1.0",
     "@types/node": "25.5.2",
     "@types/ws": "^8.18.1",
+    "@wdio/devtools-core": "workspace:^",
+    "@wdio/devtools-shared": "workspace:^",
     "chromedriver": "^147.0.1",
     "jest": "^29.7.0",
     "mocha": "^10.7.0",
     "selenium-webdriver": "^4.27.0",
+    "tsup": "^8.0.0",
     "typescript": "^6.0.2",
     "vitest": "^2.1.9"
   },
diff --git a/packages/selenium-devtools/src/assertPatcher.ts b/packages/selenium-devtools/src/assertPatcher.ts
index 9cc4e8f2..1aeea142 100644
--- a/packages/selenium-devtools/src/assertPatcher.ts
+++ b/packages/selenium-devtools/src/assertPatcher.ts
@@ -1,5 +1,6 @@
 import { createRequire } from 'node:module'
 import logger from '@wdio/logger'
+import { toError } from '@wdio/devtools-core'
 import { ASSERT_PATCHED_SYMBOL, TRACKED_ASSERT_METHODS } from './constants.js'
 import { getCallSourceFromStack } from './helpers/utils.js'
 import type { CapturedCommand } from './types.js'
@@ -47,23 +48,24 @@ export function patchNodeAssert(
     return false
   }
 
-  if ((assertModule as any)[ASSERT_PATCHED_SYMBOL]) {
+  // Node's `assert` is a function with methods on it — cast once for the
+  // symbol + dynamic method access we do here.
+  const assertObj = assertModule as Record<string | symbol, unknown>
+  if (assertObj[ASSERT_PATCHED_SYMBOL]) {
     return true
   }
-  ;(assertModule as any)[ASSERT_PATCHED_SYMBOL] = true
+  assertObj[ASSERT_PATCHED_SYMBOL] = true
 
   // Wrap each tracked method on `assert` and `assert.strict`. We don't
   // overwrite `assert.strict.equal` separately because Node's strict
   // namespace shares method bodies internally — patching the surface is
   // enough.
   const wrapMethod = (methodName: string) => {
-    const original = (assertModule as any)[methodName]
+    const original = assertObj[methodName]
     if (typeof original !== 'function') {
       return
     }
-    ;(assertModule as any)[methodName] = function patchedAssert(
-      ...args: any[]
-    ) {
+    assertObj[methodName] = function patchedAssert(...args: any[]) {
       const callInfo = getCallSourceFromStack()
       const startedAt = Date.now()
       const sanitizedArgs = args.map(safeSerialize)
@@ -90,7 +92,7 @@ export function patchNodeAssert(
                 command: `assert.${methodName}`,
                 args: sanitizedArgs,
                 result: undefined,
-                error: err instanceof Error ? err : new Error(String(err)),
+                error: toError(err),
                 callSource: callInfo.callSource,
                 timestamp: startedAt,
                 fromElement: false
@@ -114,7 +116,7 @@ export function patchNodeAssert(
           command: `assert.${methodName}`,
           args: sanitizedArgs,
           result: undefined,
-          error: err instanceof Error ? err : new Error(String(err)),
+          error: toError(err),
           callSource: callInfo.callSource,
           timestamp: startedAt,
           fromElement: false
diff --git a/packages/selenium-devtools/src/bidi.ts b/packages/selenium-devtools/src/bidi.ts
index 8b2556d6..f98553ad 100644
--- a/packages/selenium-devtools/src/bidi.ts
+++ b/packages/selenium-devtools/src/bidi.ts
@@ -1,5 +1,6 @@
 import { createRequire } from 'node:module'
 import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
 import { LOG_SOURCES } from './constants.js'
 import { chromeLogLevelToLogLevel, getRequestType } from './helpers/utils.js'
 import type { BidiHandlerSinks, LogLevel, NetworkRequest } from './types.js'
@@ -37,7 +38,7 @@ export function ensureBidiCapability(builder: any): void {
     caps.set('webSocketUrl', true)
     log.info('Set webSocketUrl=true on builder capabilities (BiDi enabled)')
   } catch (err) {
-    log.warn(`Failed to set webSocketUrl capability: ${(err as Error).message}`)
+    log.warn(`Failed to set webSocketUrl capability: ${errorMessage(err)}`)
   }
 }
 
@@ -66,7 +67,7 @@ export function ensureHeadlessChrome(builder: any): void {
     caps.set('goog:chromeOptions', { ...existing, args })
     log.info('Injected --headless=old into Chrome capabilities')
   } catch (err) {
-    log.warn(`Failed to set headless Chrome option: ${(err as Error).message}`)
+    log.warn(`Failed to set headless Chrome option: ${errorMessage(err)}`)
   }
 }
 
@@ -95,7 +96,7 @@ export async function attachBidiHandlers(
             source: LOG_SOURCES.BROWSER
           })
         } catch (err) {
-          log.warn(`onConsoleEntry handler threw: ${(err as Error).message}`)
+          log.warn(`onConsoleEntry handler threw: ${errorMessage(err)}`)
         }
       })
       await inspector.onJavascriptException((exception: any) => {
@@ -113,15 +114,13 @@ export async function attachBidiHandlers(
             source: LOG_SOURCES.BROWSER
           })
         } catch (err) {
-          log.warn(
-            `onJavascriptException handler threw: ${(err as Error).message}`
-          )
+          log.warn(`onJavascriptException handler threw: ${errorMessage(err)}`)
         }
       })
       attached++
       log.info('✓ BiDi LogInspector attached (console + JS exceptions)')
     } catch (err) {
-      log.warn(`BiDi LogInspector attach failed: ${(err as Error).message}`)
+      log.warn(`BiDi LogInspector attach failed: ${errorMessage(err)}`)
     }
   } else {
     log.info('selenium-webdriver/bidi/logInspector not available — skipping')
@@ -150,7 +149,7 @@ export async function attachBidiHandlers(
           pending.set(requestId, entry)
           sinks.pushNetworkRequest(entry)
         } catch (err) {
-          log.warn(`beforeRequestSent threw: ${(err as Error).message}`)
+          log.warn(`beforeRequestSent threw: ${errorMessage(err)}`)
         }
       })
 
@@ -174,14 +173,14 @@ export async function attachBidiHandlers(
           pending.delete(requestId)
           sinks.replaceNetworkRequest(requestId, finalized)
         } catch (err) {
-          log.warn(`responseCompleted threw: ${(err as Error).message}`)
+          log.warn(`responseCompleted threw: ${errorMessage(err)}`)
         }
       })
 
       attached++
       log.info('✓ BiDi NetworkInspector attached (request + response)')
     } catch (err) {
-      log.warn(`BiDi NetworkInspector attach failed: ${(err as Error).message}`)
+      log.warn(`BiDi NetworkInspector attach failed: ${errorMessage(err)}`)
     }
   } else {
     log.info(
diff --git a/packages/selenium-devtools/src/constants.ts b/packages/selenium-devtools/src/constants.ts
index c5077768..11c83624 100644
--- a/packages/selenium-devtools/src/constants.ts
+++ b/packages/selenium-devtools/src/constants.ts
@@ -64,17 +64,11 @@ export const NAVIGATION_COMMANDS = [
   'refresh'
 ] as const
 
-export const CONSOLE_METHODS = ['log', 'info', 'warn', 'error'] as const
+// Console capture constants are defined in @wdio/devtools-core; re-exported
+// here so existing imports from ./constants.js continue to work.
+export { ANSI_REGEX, CONSOLE_METHODS, LOG_SOURCES } from '@wdio/devtools-core'
 
-export const LOG_SOURCES = {
-  BROWSER: 'browser',
-  TEST: 'test',
-  TERMINAL: 'terminal'
-} as const
-
-export const ANSI_REGEX = /\x1b\[[?]?[0-9;]*[A-Za-z]/g
-
-export const SPINNER_RE = /^[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏]/u
+export { SPINNER_RE } from '@wdio/devtools-core'
 
 export const DEFAULTS = {
   CID: '0-0',
@@ -94,42 +88,16 @@ export const TIMING = {
   BROWSER_POLL_INTERVAL: 1000
 } as const
 
-export const TEST_STATE = {
-  PENDING: 'pending',
-  RUNNING: 'running',
-  PASSED: 'passed',
-  FAILED: 'failed',
-  SKIPPED: 'skipped'
-} as const
+export { TEST_STATE } from '@wdio/devtools-shared'
 
-export const LOG_LEVEL_PATTERNS: ReadonlyArray<{
-  level: 'trace' | 'debug' | 'info' | 'warn' | 'error'
-  pattern: RegExp
-}> = [
-  { level: 'trace', pattern: /\btrace\b/i },
-  { level: 'debug', pattern: /\bdebug\b/i },
-  { level: 'info', pattern: /\binfo\b/i },
-  { level: 'warn', pattern: /\bwarn(ing)?\b/i },
-  { level: 'error', pattern: /\berror\b/i }
-] as const
+export { LOG_LEVEL_PATTERNS } from '@wdio/devtools-core'
 
-export const SCREENCAST_DEFAULTS = {
-  enabled: false,
-  captureFormat: 'jpeg' as const,
-  quality: 70,
-  maxWidth: 1280,
-  maxHeight: 720,
-  pollIntervalMs: 200
-}
+// SCREENCAST_DEFAULTS hoisted to @wdio/devtools-shared; re-exported for
+// backwards compatibility with existing selenium-internal imports.
+export { SCREENCAST_DEFAULTS } from '@wdio/devtools-shared'
 
 /** Test-state environment markers used by the rerun handshake. */
-export const REUSE_ENV = {
-  REUSE: 'DEVTOOLS_APP_REUSE',
-  HOST: 'DEVTOOLS_APP_HOST',
-  PORT: 'DEVTOOLS_APP_PORT',
-  RERUN_LABEL: 'DEVTOOLS_RERUN_LABEL',
-  RERUN_ENTRY_TYPE: 'DEVTOOLS_RERUN_ENTRY_TYPE'
-} as const
+export { REUSE_ENV } from '@wdio/devtools-shared'
 
 /**
  * Decoded JPEG bytes below which a frame is treated as blank/uniform
diff --git a/packages/selenium-devtools/src/driverPatcher.ts b/packages/selenium-devtools/src/driverPatcher.ts
index 2f39e85f..6e2a113f 100644
--- a/packages/selenium-devtools/src/driverPatcher.ts
+++ b/packages/selenium-devtools/src/driverPatcher.ts
@@ -1,5 +1,6 @@
 import { createRequire } from 'node:module'
 import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
 import {
   INTERNAL_DRIVER_METHODS,
   PATCHED_SYMBOL,
@@ -36,7 +37,7 @@ function loadSeleniumWebdriver(): any | null {
       return localRequire('selenium-webdriver')
     } catch (err) {
       log.warn(
-        `selenium-webdriver not found — devtools auto-attach disabled. (${(err as Error).message})`
+        `selenium-webdriver not found — devtools auto-attach disabled. (${errorMessage(err)})`
       )
       return null
     }
@@ -92,20 +93,26 @@ function webElementSummary(el: any): string {
   return peek ? `<WebElement id=${peek}>` : '<WebElement>'
 }
 
+// Selenium prototypes (WebDriver/WebElement/Builder) carry methods we patch
+// dynamically — Reflect.{get,set} keeps the casts to a single location and
+// drops per-line `as any`.
+type Patchable = Record<string | symbol, unknown>
+
 function wrapPrototype(
   proto: object,
   methodNames: Iterable<string>,
   fromElement: boolean,
   hooks: DriverPatcherHooks
 ): string[] {
-  if ((proto as any)[PATCHED_SYMBOL]) {
+  const p = proto as Patchable
+  if (p[PATCHED_SYMBOL]) {
     return []
   }
-  ;(proto as any)[PATCHED_SYMBOL] = true
+  p[PATCHED_SYMBOL] = true
 
   const wrapped: string[] = []
   for (const methodName of methodNames) {
-    const original = (proto as any)[methodName]
+    const original = p[methodName]
     if (typeof original !== 'function') {
       continue
     }
@@ -113,7 +120,7 @@ function wrapPrototype(
       continue
     }
 
-    ;(proto as any)[methodName] = function (...args: any[]): any {
+    p[methodName] = function (...args: unknown[]): unknown {
       const callInfo = getCallSourceFromStack()
       const startedAt = Date.now()
       const sanitizedArgs = args.map(safeSerialize)
@@ -198,7 +205,7 @@ export function patchSelenium(hooks: DriverPatcherHooks): boolean {
 
   const driverMethods = collectMethodNames(WebDriver.prototype)
   const tracked = driverMethods.filter(
-    (m) => !INTERNAL_DRIVER_METHODS.includes(m as any)
+    (m) => !(INTERNAL_DRIVER_METHODS as readonly string[]).includes(m)
   )
   const wrappedDriver = wrapPrototype(
     WebDriver.prototype,
@@ -217,7 +224,7 @@ export function patchSelenium(hooks: DriverPatcherHooks): boolean {
         try {
           await hooks.onBeforeQuit(this)
         } catch (err) {
-          log.warn(`onBeforeQuit hook threw: ${(err as Error).message}`)
+          log.warn(`onBeforeQuit hook threw: ${errorMessage(err)}`)
         }
       }
       return originalQuit.call(this)
@@ -245,15 +252,16 @@ export function patchSelenium(hooks: DriverPatcherHooks): boolean {
     log.info(`Wrapped ${wrappedEl.length} WebElement method(s)`)
   }
 
-  if (!(Builder.prototype as any)[PATCHED_SYMBOL]) {
-    ;(Builder.prototype as any)[PATCHED_SYMBOL] = true
+  const builderProto = Builder.prototype as Patchable
+  if (!builderProto[PATCHED_SYMBOL]) {
+    builderProto[PATCHED_SYMBOL] = true
     const originalBuild = Builder.prototype.build
     Builder.prototype.build = function patchedBuild(this: any, ...args: any[]) {
       if (hooks.onBeforeBuild) {
         try {
           hooks.onBeforeBuild(this)
         } catch (err) {
-          log.warn(`onBeforeBuild hook threw: ${(err as Error).message}`)
+          log.warn(`onBeforeBuild hook threw: ${errorMessage(err)}`)
         }
       }
       const driver = originalBuild.apply(this, args)
@@ -261,19 +269,23 @@ export function patchSelenium(hooks: DriverPatcherHooks): boolean {
         const result = hooks.onDriverCreated(driver)
         if (result && typeof (result as Promise<unknown>).then === 'function') {
           ;(result as Promise<unknown>).catch((err) =>
-            log.warn(`onDriverCreated hook rejected: ${(err as Error).message}`)
+            log.warn(`onDriverCreated hook rejected: ${errorMessage(err)}`)
           )
         }
       } catch (err) {
-        log.warn(`onDriverCreated hook threw: ${(err as Error).message}`)
+        log.warn(`onDriverCreated hook threw: ${errorMessage(err)}`)
       }
 
       // Selenium 4: WebDriver is thenable. Extend `.then` so `await Builder.build()`
       // also waits for the dashboard to connect.
-      const isThenable = driver && typeof (driver as any).then === 'function'
+      // Selenium 4 WebDriver is thenable; selenium 3 may not be. Cast once.
+      const d = driver as Patchable
+      const isThenable = driver && typeof d.then === 'function'
       if (isThenable && hooks.waitForReady) {
-        const originalThen = (driver as any).then.bind(driver)
-        ;(driver as any).then = function patchedThen(
+        const originalThen = (d.then as (...args: unknown[]) => unknown).bind(
+          driver
+        )
+        d.then = function patchedThen(
           onFulfilled?: (value: any) => any,
           onRejected?: (reason: any) => any
         ) {
diff --git a/packages/selenium-devtools/src/helpers/commandPostActions.ts b/packages/selenium-devtools/src/helpers/commandPostActions.ts
new file mode 100644
index 00000000..c8f3f76b
--- /dev/null
+++ b/packages/selenium-devtools/src/helpers/commandPostActions.ts
@@ -0,0 +1,81 @@
+import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
+import { getElementOriginals } from '../driverPatcher.js'
+import type { SessionCapturer } from '../session.js'
+import type { CommandLog } from '../types.js'
+
+const log = logger('@wdio/selenium-devtools:commandPostActions')
+
+/**
+ * Helpers that run AFTER an `onCommand` capture/replace has fired. Kept out
+ * of the plugin class so the hot path stays readable and these are easier to
+ * test in isolation.
+ */
+
+/**
+ * For `findElement` / `findElements` commands, replace the opaque WebElement
+ * result with a "<tag>\"text\"" preview the UI can render. Uses the
+ * unwrapped element methods so the probes don't appear as phantom commands.
+ */
+export async function enrichFindResult(
+  capturer: SessionCapturer,
+  rawResult: unknown,
+  entry: CommandLog,
+  ts: number
+): Promise<void> {
+  const els = getElementOriginals()
+  const getTagName = els.getTagName
+  const getText = els.getText
+  if (!getTagName || !getText) {
+    return
+  }
+  try {
+    const elements = Array.isArray(rawResult) ? rawResult : [rawResult]
+    const previews = await Promise.all(
+      elements.slice(0, 5).map(async (el: any) => {
+        const tag = await getTagName(el).catch(() => 'element')
+        const text = await getText(el).catch(() => '')
+        const trimmed = text.length > 60 ? text.slice(0, 60) + '…' : text
+        return trimmed ? `<${tag}>"${trimmed}"` : `<${tag}>`
+      })
+    )
+    const more = elements.length > 5 ? `, +${elements.length - 5} more` : ''
+    const enriched = Array.isArray(rawResult)
+      ? `[${previews.join(', ')}${more}]`
+      : previews[0]
+    entry.result = enriched
+    capturer.sendReplaceCommand(ts, entry)
+  } catch {
+    // Element detached / stale — leave the original `<WebElement>` text.
+  }
+}
+
+/**
+ * On navigation commands, inject the page-side capture script (once per
+ * session) and pull the latest trace + browser logs. Fire-and-forget; errors
+ * are logged unless the session has already finalized (post-quit errors are
+ * expected and uninteresting).
+ */
+export function captureNavigationTrace(
+  capturer: SessionCapturer,
+  alreadyInjected: boolean,
+  onInjected: () => void,
+  isFinalized: () => boolean
+): void {
+  void (async () => {
+    try {
+      if (!alreadyInjected) {
+        onInjected()
+        await capturer.injectScript()
+      }
+      await capturer.captureTrace()
+      if (!capturer.bidiActive) {
+        await capturer.captureBrowserLogs()
+      }
+    } catch (err) {
+      if (!isFinalized()) {
+        log.warn(`Trace capture failed: ${errorMessage(err)}`)
+      }
+    }
+  })()
+}
diff --git a/packages/selenium-devtools/src/helpers/dashboardLauncher.ts b/packages/selenium-devtools/src/helpers/dashboardLauncher.ts
new file mode 100644
index 00000000..aa6b09d8
--- /dev/null
+++ b/packages/selenium-devtools/src/helpers/dashboardLauncher.ts
@@ -0,0 +1,92 @@
+import { spawn } from 'node:child_process'
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
+import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
+
+const log = logger('@wdio/selenium-devtools:dashboardLauncher')
+
+/**
+ * Spawn a detached Chrome window pointed at the DevTools UI. `open` would
+ * merge into an existing Chrome process and lose `--user-data-dir` isolation,
+ * so we invoke the binary directly via a double-fork — the intermediate Node
+ * process exits immediately and Chrome is reparented to launchd/init, so it
+ * survives tree-kill by the test runner (vitest's worker pool, jest
+ * --forceExit, mocha SIGINT). The unique user-data-dir is also used by
+ * gracefulShutdown's pkill to target only THIS run's window.
+ */
+export function openDashboard(host: string, port: number): boolean {
+  const url = `http://${host}:${port}`
+  const chromeBin = findChromeBinary()
+  if (!chromeBin) {
+    log.warn(`Chrome binary not found. Open manually: ${url}`)
+    return false
+  }
+
+  const userDataDir = path.join(
+    os.tmpdir(),
+    `selenium-devtools-ui-${port}-${Date.now()}`
+  )
+
+  log.info(`Chrome binary: ${chromeBin}`)
+  log.info(`💡 Opening DevTools UI: ${url}`)
+  const chromeArgs = [
+    `--user-data-dir=${userDataDir}`,
+    '--no-first-run',
+    '--no-default-browser-check',
+    '--window-size=1600,1200',
+    '--new-window',
+    url
+  ]
+  try {
+    const code =
+      'require("child_process")' +
+      `.spawn(${JSON.stringify(chromeBin)}, ${JSON.stringify(chromeArgs)}, { detached: true, stdio: "ignore" }).unref()`
+    const intermediate = spawn(process.execPath, ['-e', code], {
+      detached: true,
+      stdio: 'ignore'
+    })
+    intermediate.unref()
+    intermediate.on('error', (err) => {
+      log.warn(
+        `Could not auto-open DevTools UI (${err.message}). Open manually: ${url}`
+      )
+    })
+    return true
+  } catch (err) {
+    log.warn(
+      `Could not auto-open DevTools UI (${errorMessage(err)}). Open manually: ${url}`
+    )
+    return false
+  }
+}
+
+function findChromeBinary(): string | null {
+  const candidates =
+    process.platform === 'darwin'
+      ? [
+          '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+          '/Applications/Google Chrome Beta.app/Contents/MacOS/Google Chrome Beta',
+          '/Applications/Chromium.app/Contents/MacOS/Chromium',
+          `${os.homedir()}/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`
+        ]
+      : process.platform === 'win32'
+        ? [
+            'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+            'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+            `${process.env.LOCALAPPDATA}\\Google\\Chrome\\Application\\chrome.exe`
+          ]
+        : [
+            '/usr/bin/google-chrome',
+            '/usr/bin/google-chrome-stable',
+            '/usr/bin/chromium-browser',
+            '/usr/bin/chromium'
+          ]
+  for (const c of candidates) {
+    if (c && fs.existsSync(c)) {
+      return c
+    }
+  }
+  return null
+}
diff --git a/packages/selenium-devtools/src/helpers/driverMetadata.ts b/packages/selenium-devtools/src/helpers/driverMetadata.ts
new file mode 100644
index 00000000..40e9dbe4
--- /dev/null
+++ b/packages/selenium-devtools/src/helpers/driverMetadata.ts
@@ -0,0 +1,99 @@
+import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
+import { TraceType } from '@wdio/devtools-shared'
+import type { SeleniumDriverLike } from '../types.js'
+
+const log = logger('@wdio/selenium-devtools:driverMetadata')
+
+export interface DriverMetadataInput {
+  driver: SeleniumDriverLike
+  driverReadyTs: number
+  runner: string | null
+  rerunCommand?: string
+  rerunTemplate?: string
+  launchCommand?: string
+}
+
+export interface DriverMetadataResult {
+  sessionId: string | undefined
+  /** Upstream `metadata` payload to forward to the dashboard. */
+  metadata: Record<string, unknown> | undefined
+}
+
+/**
+ * Extract session id + a fully-built upstream-metadata payload from a freshly
+ * created Selenium driver. Logs the standard `Browser:`/`Capabilities sent:`/
+ * `Driver session created in ...` lines as a side effect (these are part of
+ * the visible boot sequence; suppressing them would surprise users). Returns
+ * `metadata: undefined` if the driver couldn't be queried.
+ */
+export async function buildDriverMetadata(
+  input: DriverMetadataInput
+): Promise<DriverMetadataResult> {
+  const {
+    driver,
+    driverReadyTs,
+    runner,
+    rerunCommand,
+    rerunTemplate,
+    launchCommand
+  } = input
+
+  try {
+    const session = driver.getSession ? await driver.getSession() : undefined
+    const capabilities = driver.getCapabilities
+      ? await driver.getCapabilities()
+      : undefined
+    const sessionId = session?.getId?.() ?? undefined
+    const capGet = (k: string): any => {
+      if (capabilities?.get && typeof capabilities.get === 'function') {
+        return capabilities.get(k)
+      }
+      const serialized = capabilities?.serialize?.() ?? capabilities ?? {}
+      return serialized[k]
+    }
+    const browserName = capGet('browserName') ?? 'unknown'
+    const browserVersion = capGet('browserVersion') ?? capGet('version') ?? ''
+    const platform = capGet('platformName') ?? capGet('platform') ?? ''
+    log.info(
+      `🌐 Browser: ${browserName}${browserVersion ? ' ' + browserVersion : ''}${platform ? ' on ' + platform : ''} (sessionId: ${sessionId ?? 'unknown'})`
+    )
+    const webSocketUrl = capGet('webSocketUrl')
+    const chromeOpts = capGet('goog:chromeOptions') ?? {}
+    const chromeArgs: string[] = Array.isArray(chromeOpts?.args)
+      ? chromeOpts.args
+      : []
+    const headlessArg = chromeArgs.find((a) => a.startsWith('--headless'))
+    log.info(
+      `📋 Capabilities sent: browserName=${browserName}, webSocketUrl=${webSocketUrl ? 'on' : 'off'}` +
+        (headlessArg ? `, ${headlessArg}` : '') +
+        (chromeArgs.length ? `, chromeArgs=${chromeArgs.length}` : '')
+    )
+    log.info(`Driver session created in ${Date.now() - driverReadyTs}ms`)
+
+    return {
+      sessionId,
+      metadata: {
+        type: TraceType.Testrunner,
+        capabilities: capabilities?.serialize?.() ?? capabilities ?? {},
+        sessionId,
+        options: {
+          framework: 'selenium-webdriver',
+          baseDir: process.cwd(),
+          rerunCommand: rerunCommand ?? rerunTemplate,
+          launchCommand,
+          // Cucumber `--name` filters scenarios but not Gherkin steps, so
+          // leaf-step rerun stays disabled there.
+          runCapabilities: {
+            canRunSuites: true,
+            canRunTests: runner !== 'cucumber',
+            canRunAll: true
+          }
+        }
+      }
+    }
+  } catch (err) {
+    log.warn(`Failed to send metadata: ${errorMessage(err)}`)
+    return { sessionId: undefined, metadata: undefined }
+  }
+}
diff --git a/packages/selenium-devtools/src/helpers/processHooks.ts b/packages/selenium-devtools/src/helpers/processHooks.ts
new file mode 100644
index 00000000..7226d170
--- /dev/null
+++ b/packages/selenium-devtools/src/helpers/processHooks.ts
@@ -0,0 +1,72 @@
+import { spawn } from 'node:child_process'
+
+/**
+ * Minimal shape the process hooks need from the selenium plugin. Keeps this
+ * helper from importing the plugin class (which would create a cycle).
+ */
+export interface ProcessHookPlugin {
+  isReuse: boolean
+  options: { port: number }
+  sessionCapturer?: { closeWebSocket: () => Promise<void>; cleanup: () => void }
+  clearKeepAlive: () => void
+  onSessionEnd: () => Promise<void>
+}
+
+/**
+ * Close the worker WS, restore captures, pkill the detached Chrome dashboard
+ * (skip in reuse mode — only the parent owns it), and `process.exit(code)`.
+ * Exported so the plugin can also call this when the dashboard disconnects
+ * post-tests (see `setClientDisconnectedHandler`).
+ */
+export async function gracefulShutdown(
+  plugin: ProcessHookPlugin,
+  code: number
+): Promise<void> {
+  try {
+    plugin.clearKeepAlive()
+    await plugin.sessionCapturer?.closeWebSocket()
+    plugin.sessionCapturer?.cleanup()
+    if (!plugin.isReuse) {
+      try {
+        spawn(
+          '/usr/bin/pkill',
+          ['-f', `selenium-devtools-ui-${plugin.options.port}-`],
+          { stdio: 'ignore' }
+        )
+      } catch {
+        /* pkill missing — accept stale Chrome */
+      }
+    }
+  } catch {
+    /* best-effort */
+  }
+  process.exit(code)
+}
+
+/**
+ * Wire up process-lifetime hooks for the selenium plugin:
+ *  - `exit`/`beforeExit`: trigger idempotent session end + (on beforeExit)
+ *    close the worker WS so the event loop can drain.
+ *  - `SIGINT`/`SIGTERM`: graceful shutdown — close WS, cleanup capture, and
+ *    in non-reuse mode pkill the detached Chrome dashboard for THIS run.
+ */
+export function registerProcessHooks(plugin: ProcessHookPlugin): void {
+  process.on('exit', () => {
+    void plugin.onSessionEnd()
+  })
+  process.on('beforeExit', () => {
+    // onSessionEnd is idempotent — re-firing it after per-scenario quit is a
+    // no-op. The real work here is the deferred WS close (see onSessionEnd
+    // non-interactive branch). closeWebSocket() returns immediately if
+    // already closed, so this is safe for both reuse mode and the dashboard
+    // path.
+    void plugin.onSessionEnd()
+    void plugin.sessionCapturer?.closeWebSocket()
+  })
+  process.on('SIGINT', () => {
+    void gracefulShutdown(plugin, 130)
+  })
+  process.on('SIGTERM', () => {
+    void gracefulShutdown(plugin, 143)
+  })
+}
diff --git a/packages/selenium-devtools/src/helpers/suiteManager.ts b/packages/selenium-devtools/src/helpers/suiteManager.ts
index 54277ec0..6011ca32 100644
--- a/packages/selenium-devtools/src/helpers/suiteManager.ts
+++ b/packages/selenium-devtools/src/helpers/suiteManager.ts
@@ -52,7 +52,8 @@ export class SuiteManager {
   startScenarioSuite(
     name: string,
     file: string,
-    callSource?: string
+    callSource?: string,
+    featureFile?: string
   ): SuiteStats | null {
     if (!this.rootSuite) {
       return null
@@ -72,6 +73,7 @@ export class SuiteManager {
       hooks: [],
       _duration: DEFAULTS.DURATION,
       callSource,
+      featureFile,
       // Without `parent`, the dashboard's `!suite.parent` filter renders this
       // sub-suite at the root too, duplicating it next to the feature.
       parent: this.rootSuite.uid
diff --git a/packages/selenium-devtools/src/helpers/utils.ts b/packages/selenium-devtools/src/helpers/utils.ts
index 89b8dbf9..843f43c9 100644
--- a/packages/selenium-devtools/src/helpers/utils.ts
+++ b/packages/selenium-devtools/src/helpers/utils.ts
@@ -1,121 +1,20 @@
-import * as net from 'node:net'
-import { parse as parseStackTrace } from 'stacktrace-parser'
-import logger from '@wdio/logger'
-import { ANSI_REGEX, LOG_LEVEL_PATTERNS, LOG_SOURCES } from '../constants.js'
-import type { ConsoleLog, LogLevel } from '../types.js'
+// Console helpers come from @wdio/devtools-core. `stripAnsiCodes` is the
+// local name kept for backwards compatibility with existing import sites.
+export {
+  stripAnsi as stripAnsiCodes,
+  detectLogLevel,
+  createConsoleLogEntry
+} from '@wdio/devtools-core'
 
-const log = logger('@wdio/selenium-devtools:utils')
+export { chromeLogLevelToLogLevel } from '@wdio/devtools-core'
 
-export const stripAnsiCodes = (text: string): string =>
-  text.replace(ANSI_REGEX, '')
+export {
+  generateStableUid,
+  deterministicUid,
+  resetSignatureCounters
+} from '@wdio/devtools-core'
 
-export function detectLogLevel(text: string): LogLevel {
-  const normalised = stripAnsiCodes(text).toLowerCase()
-  for (const { level, pattern } of LOG_LEVEL_PATTERNS) {
-    if (pattern.test(normalised)) {
-      return level
-    }
-  }
-  return 'log'
-}
-
-export function createConsoleLogEntry(
-  type: LogLevel,
-  args: any[],
-  source: string = LOG_SOURCES.TEST
-): ConsoleLog {
-  return { timestamp: Date.now(), type, args, source }
-}
-
-export function chromeLogLevelToLogLevel(
-  level: string | { value?: number; name?: string }
-): LogLevel {
-  const levelName = (
-    typeof level === 'object' ? (level?.name ?? '') : (level ?? '')
-  ).toUpperCase()
-  switch (levelName) {
-    case 'SEVERE':
-      return 'error'
-    case 'WARNING':
-      return 'warn'
-    case 'INFO':
-      return 'info'
-    case 'DEBUG':
-      return 'debug'
-    default:
-      return 'log'
-  }
-}
-
-const signatureCounters = new Map<string, number>()
-
-export function generateStableUid(file: string, name: string): string {
-  const signature = `${file}::${name}`
-  const count = signatureCounters.get(signature) || 0
-  signatureCounters.set(signature, count + 1)
-  const hashInput = count > 0 ? `${signature}::${count}` : signature
-  const hash = hashInput
-    .split('')
-    .reduce((acc, char) => ((acc << 5) - acc + char.charCodeAt(0)) | 0, 0)
-  return `stable-${Math.abs(hash).toString(36)}`
-}
-
-export function deterministicUid(...parts: string[]): string {
-  const hash = parts
-    .join('::')
-    .split('')
-    .reduce((acc, char) => ((acc << 5) - acc + char.charCodeAt(0)) | 0, 0)
-  return `stable-${Math.abs(hash).toString(36)}`
-}
-
-export function resetSignatureCounters() {
-  signatureCounters.clear()
-}
-
-function isUserCodeFrame(frame: {
-  file?: string | null
-}): frame is { file: string } {
-  const { file } = frame
-  return !!(
-    file &&
-    !file.includes('/node_modules/') &&
-    !file.includes('<anonymous>') &&
-    !file.includes('node:internal') &&
-    !file.includes('/dist/') &&
-    !file.endsWith('/index.js')
-  )
-}
-
-function normalizeFilePath(filePath: string): string {
-  // Node's stack traces in ESM use file:// URLs, which URL-encode spaces and
-  // other characters. Strip the prefix, drop the line:col suffix, and decode
-  // — otherwise `fs.readFile` hits ENOENT on any path containing a space.
-  const stripped = filePath.replace(/^file:\/\//, '').split(':')[0]
-  try {
-    return decodeURIComponent(stripped)
-  } catch {
-    // Malformed percent-encoding — keep the literal path rather than throw.
-    return stripped
-  }
-}
-
-export function getCallSourceFromStack(): {
-  filePath: string | undefined
-  callSource: string
-} {
-  const stack = new Error().stack
-  if (!stack) {
-    return { filePath: undefined, callSource: 'unknown:0' }
-  }
-
-  const frame = parseStackTrace(stack).find(isUserCodeFrame)
-  if (!frame?.file) {
-    return { filePath: undefined, callSource: 'unknown:0' }
-  }
-
-  const filePath = normalizeFilePath(frame.file)
-  return { filePath, callSource: `${filePath}:${frame.lineNumber ?? 0}` }
-}
+export { getCallSourceFromStack } from '@wdio/devtools-core'
 
 // Source-scan for `it/test/specify('title', ...)` (or `describe/context/suite`
 // when kind='suite'). Stack-walking from inside the runner's beforeEach
@@ -147,26 +46,7 @@ export function findTestLineInFile(
   return null
 }
 
-export function isPortInUse(port: number, hostname: string): Promise<boolean> {
-  return new Promise((resolve) => {
-    const server = net.createServer()
-    server.once('error', () => resolve(true))
-    server.once('listening', () => server.close(() => resolve(false)))
-    server.listen(port, hostname)
-  })
-}
-
-export async function findFreePort(
-  startPort: number,
-  hostname: string
-): Promise<number> {
-  let port = startPort
-  while (await isPortInUse(port, hostname)) {
-    log.warn(`Port ${port} is in use, trying ${port + 1}...`)
-    port++
-  }
-  return port
-}
+export { isPortInUse, findFreePort } from '@wdio/devtools-core'
 
 /**
  * Capture the command line that launched the current process so the UI's
@@ -174,47 +54,7 @@ export async function findFreePort(
  * argv when npm script context is unavailable.
  */
 /** Derive a human-readable request type from URL and MIME type. */
-export function getRequestType(url: string, mimeType?: string): string {
-  const contentType = mimeType?.toLowerCase() ?? ''
-  const urlLower = url.toLowerCase()
-  if (contentType.includes('text/html')) {
-    return 'document'
-  }
-  if (contentType.includes('text/css')) {
-    return 'stylesheet'
-  }
-  if (
-    contentType.includes('javascript') ||
-    contentType.includes('ecmascript')
-  ) {
-    return 'script'
-  }
-  if (contentType.includes('image/')) {
-    return 'image'
-  }
-  if (contentType.includes('font/') || contentType.includes('woff')) {
-    return 'font'
-  }
-  if (contentType.includes('application/json')) {
-    return 'fetch'
-  }
-  if (urlLower.endsWith('.html') || urlLower.endsWith('.htm')) {
-    return 'document'
-  }
-  if (urlLower.endsWith('.css')) {
-    return 'stylesheet'
-  }
-  if (urlLower.endsWith('.js') || urlLower.endsWith('.mjs')) {
-    return 'script'
-  }
-  if (/\.(png|jpg|jpeg|gif|svg|webp|ico)$/.test(urlLower)) {
-    return 'image'
-  }
-  if (/\.(woff|woff2|ttf|eot|otf)$/.test(urlLower)) {
-    return 'font'
-  }
-  return 'xhr'
-}
+export { getRequestType } from '@wdio/devtools-core'
 
 export function captureLaunchCommand(): string {
   const npmScript = process.env.npm_lifecycle_event
diff --git a/packages/selenium-devtools/src/index.ts b/packages/selenium-devtools/src/index.ts
index 03553a59..0a3e70ec 100644
--- a/packages/selenium-devtools/src/index.ts
+++ b/packages/selenium-devtools/src/index.ts
@@ -3,13 +3,21 @@
 
 // MUST be the first import — see setupConsole.ts.
 import './setupConsole.js'
-import * as fs from 'node:fs'
 import * as path from 'node:path'
-import * as os from 'node:os'
-import { spawn } from 'node:child_process'
 import logger from '@wdio/logger'
 import { startDetachedBackend } from './helpers/detachedBackend.js'
-import { patchSelenium, getElementOriginals } from './driverPatcher.js'
+import { openDashboard } from './helpers/dashboardLauncher.js'
+import { buildDriverMetadata } from './helpers/driverMetadata.js'
+import { finalizeScreencast } from '@wdio/devtools-core'
+import {
+  enrichFindResult,
+  captureNavigationTrace
+} from './helpers/commandPostActions.js'
+import {
+  gracefulShutdown,
+  registerProcessHooks
+} from './helpers/processHooks.js'
+import { patchSelenium } from './driverPatcher.js'
 import {
   ensureBidiCapability,
   ensureHeadlessChrome,
@@ -22,13 +30,13 @@ import { SuiteManager } from './helpers/suiteManager.js'
 import { TestManager } from './helpers/testManager.js'
 import { RerunManager } from './rerunManager.js'
 import { ScreencastRecorder } from './screencast.js'
-import { encodeToVideo } from './helpers/videoEncoder.js'
 import {
   detectOwnVersion,
   detectRunner,
   detectSeleniumVersion
 } from './helpers/runtime.js'
 import { findFreePort, getCallSourceFromStack } from './helpers/utils.js'
+import { RetryTracker, errorMessage, toError } from '@wdio/devtools-core'
 import { tryRegisterRunnerHooks } from './runnerHooks.js'
 import { patchNodeAssert } from './assertPatcher.js'
 import {
@@ -40,7 +48,6 @@ import {
   NAVIGATION_COMMANDS
 } from './constants.js'
 import {
-  TraceType,
   type CapturedCommand,
   type CommandLog,
   type DevToolsOptions,
@@ -76,8 +83,7 @@ class SeleniumDevToolsPlugin {
   #scriptInjected = false
   #isReuse = false
   // Coalesce internal retries: same {command,args,src} replaces prior entry.
-  #lastCapturedSig: string | null = null
-  #lastCapturedId: number | null = null
+  #retryTracker = new RetryTracker()
   #screencast?: ScreencastRecorder
   #screencastOptions: ScreencastOptions
   #sessionId?: string
@@ -195,7 +201,7 @@ class SeleniumDevToolsPlugin {
           this.#openUiWindow()
         }
       } catch (err) {
-        log.error(`Failed to start backend: ${(err as Error).message}`)
+        log.error(`Failed to start backend: ${errorMessage(err)}`)
       }
     })()
     return this.#backendStartPromise
@@ -302,8 +308,7 @@ class SeleniumDevToolsPlugin {
     }
 
     this.#testManager!.startMarkedTest(name, resolvedMeta)
-    this.#lastCapturedSig = null
-    this.#lastCapturedId = null
+    this.#retryTracker.reset()
     if (file) {
       this.#sessionCapturer?.captureSource(file).catch(() => {})
     }
@@ -341,11 +346,25 @@ class SeleniumDevToolsPlugin {
         meta.featureCallSource
       )
     }
-    const file =
-      meta.file ?? this.#suiteManager.getRootSuite()?.file ?? process.cwd()
-    this.#suiteManager.startScenarioSuite(name, file, meta.callSource)
-    this.#lastCapturedSig = null
-    this.#lastCapturedId = null
+    // Stamp the .feature path as `featureFile` on the root and the scenario
+    // sub-suite. The root suite's `file` stays at process.cwd() (changing it
+    // mid-run would shift the stable UID and orphan accumulated state on the
+    // dashboard). The dashboard's rerun payload forwards `featureFile` to the
+    // backend, which strips `--name` and uses it as a positional arg for
+    // feature-level reruns.
+    const root = this.#suiteManager.getRootSuite()
+    if (root && meta.file && root.featureFile !== meta.file) {
+      root.featureFile = meta.file
+      this.#testReporter.updateSuites()
+    }
+    const file = meta.file ?? root?.file ?? process.cwd()
+    this.#suiteManager.startScenarioSuite(
+      name,
+      file,
+      meta.callSource,
+      meta.file
+    )
+    this.#retryTracker.reset()
     if (meta.file) {
       this.#sessionCapturer?.captureSource(meta.file).catch(() => {})
     }
@@ -357,8 +376,7 @@ class SeleniumDevToolsPlugin {
     }
     this.#testManager?.endCurrent(state)
     this.#suiteManager.endScenarioSuite(state)
-    this.#lastCapturedSig = null
-    this.#lastCapturedId = null
+    this.#retryTracker.reset()
   }
 
   /** Lazy-create rootSuite + testManager so they take the real describe title. */
@@ -456,7 +474,7 @@ class SeleniumDevToolsPlugin {
     // reconnect blip during tests must not abort them.
     this.#sessionCapturer.setClientDisconnectedHandler(() => {
       if (this.finalized) {
-        void gracefulShutdown(0)
+        void gracefulShutdown(this, 0)
       }
     })
     await this.#sessionCapturer.waitForConnection(TIMING.UI_CONNECTION_WAIT)
@@ -478,58 +496,17 @@ class SeleniumDevToolsPlugin {
       return
     }
 
-    try {
-      const session = driver.getSession ? await driver.getSession() : undefined
-      const capabilities = driver.getCapabilities
-        ? await driver.getCapabilities()
-        : undefined
-      this.#sessionId = session?.getId?.() ?? undefined
-      const capGet = (k: string): any => {
-        if (capabilities?.get && typeof capabilities.get === 'function') {
-          return capabilities.get(k)
-        }
-        const serialized = capabilities?.serialize?.() ?? capabilities ?? {}
-        return serialized[k]
-      }
-      const browserName = capGet('browserName') ?? 'unknown'
-      const browserVersion = capGet('browserVersion') ?? capGet('version') ?? ''
-      const platform = capGet('platformName') ?? capGet('platform') ?? ''
-      log.info(
-        `🌐 Browser: ${browserName}${browserVersion ? ' ' + browserVersion : ''}${platform ? ' on ' + platform : ''} (sessionId: ${this.#sessionId ?? 'unknown'})`
-      )
-      const webSocketUrl = capGet('webSocketUrl')
-      const chromeOpts = capGet('goog:chromeOptions') ?? {}
-      const chromeArgs: string[] = Array.isArray(chromeOpts?.args)
-        ? chromeOpts.args
-        : []
-      const headlessArg = chromeArgs.find((a) => a.startsWith('--headless'))
-      log.info(
-        `📋 Capabilities sent: browserName=${browserName}, webSocketUrl=${webSocketUrl ? 'on' : 'off'}` +
-          (headlessArg ? `, ${headlessArg}` : '') +
-          (chromeArgs.length ? `, chromeArgs=${chromeArgs.length}` : '')
-      )
-      log.info(`Driver session created in ${Date.now() - driverReadyTs}ms`)
-      this.#sessionCapturer.sendUpstream('metadata', {
-        type: TraceType.Testrunner,
-        capabilities: capabilities?.serialize?.() ?? capabilities ?? {},
-        sessionId: this.#sessionId,
-        options: {
-          framework: 'selenium-webdriver',
-          baseDir: process.cwd(),
-          rerunCommand:
-            this.#options.rerunCommand ?? this.#rerunManager.rerunTemplate,
-          launchCommand: this.#rerunManager.launchCommand,
-          // Cucumber `--name` filters scenarios but not Gherkin steps, so
-          // leaf-step rerun stays disabled there.
-          runCapabilities: {
-            canRunSuites: true,
-            canRunTests: RUNNER !== 'cucumber',
-            canRunAll: true
-          }
-        }
-      })
-    } catch (err) {
-      log.warn(`Failed to send metadata: ${(err as Error).message}`)
+    const { sessionId, metadata } = await buildDriverMetadata({
+      driver,
+      driverReadyTs,
+      runner: RUNNER,
+      rerunCommand: this.#options.rerunCommand,
+      rerunTemplate: this.#rerunManager.rerunTemplate,
+      launchCommand: this.#rerunManager.launchCommand
+    })
+    this.#sessionId = sessionId
+    if (metadata) {
+      this.#sessionCapturer.sendUpstream('metadata', metadata)
     }
 
     // Parallel — serial attach misses frames on fast tests.
@@ -539,7 +516,7 @@ class SeleniumDevToolsPlugin {
             this.#screencast = new ScreencastRecorder(this.#screencastOptions)
             await this.#screencast.start(driver)
           } catch (err) {
-            log.warn(`Screencast start failed: ${(err as Error).message}`)
+            log.warn(`Screencast start failed: ${errorMessage(err)}`)
           }
         })()
       : Promise.resolve()
@@ -555,7 +532,7 @@ class SeleniumDevToolsPlugin {
           )
         }
       } catch (err) {
-        log.warn(`BiDi attach threw: ${(err as Error).message}`)
+        log.warn(`BiDi attach threw: ${errorMessage(err)}`)
       }
     })()
 
@@ -574,25 +551,13 @@ class SeleniumDevToolsPlugin {
       return
     }
 
-    const error =
-      cmd.error && cmd.error instanceof Error
-        ? cmd.error
-        : cmd.error
-          ? new Error(String(cmd.error))
-          : undefined
-
-    const cmdSig = JSON.stringify({
-      command: cmd.command,
-      args: cmd.args,
-      src: cmd.callSource ?? null
-    })
-    const isRetry =
-      this.#lastCapturedSig === cmdSig && this.#lastCapturedId !== null
+    const error = cmd.error ? toError(cmd.error) : undefined
 
+    const cmdSig = RetryTracker.signature(cmd.command, cmd.args, cmd.callSource)
     let entry: CommandLog & { _id?: number }
-    if (isRetry) {
+    if (this.#retryTracker.isRetry(cmdSig)) {
       const replaced = capturer.replaceCommand(
-        this.#lastCapturedId!,
+        this.#retryTracker.lastId!,
         cmd.command,
         cmd.args.map((a: any) => a),
         error ? undefined : cmd.result,
@@ -602,7 +567,7 @@ class SeleniumDevToolsPlugin {
         cmd.timestamp
       )
       entry = replaced.entry as CommandLog & { _id?: number }
-      this.#lastCapturedId = entry._id ?? null
+      this.#retryTracker.setLastId(entry._id ?? null)
       capturer.sendReplaceCommand(replaced.oldTimestamp, entry)
     } else {
       entry = (await capturer.captureCommand(
@@ -615,8 +580,7 @@ class SeleniumDevToolsPlugin {
         cmd.timestamp
       )) as CommandLog & { _id?: number }
       capturer.sendCommand(entry)
-      this.#lastCapturedSig = cmdSig
-      this.#lastCapturedId = entry._id ?? null
+      this.#retryTracker.recordCapture(cmdSig, entry._id ?? null)
     }
 
     if (this.#options.captureScreenshots && !error) {
@@ -638,92 +602,19 @@ class SeleniumDevToolsPlugin {
       cmd.rawResult &&
       (cmd.command === 'findElement' || cmd.command === 'findElements')
     ) {
-      const ts = entry.timestamp
-      void this.#enrichFindResult(cmd.rawResult, entry, ts)
+      void enrichFindResult(capturer, cmd.rawResult, entry, entry.timestamp)
     }
 
     if (capturer.isNavigationCommand(cmd.command) && !cmd.fromElement) {
-      void (async () => {
-        try {
-          if (!this.#scriptInjected) {
-            this.#scriptInjected = true
-            await capturer.injectScript()
-          }
-          await capturer.captureTrace()
-          if (!capturer.bidiActive) {
-            await capturer.captureBrowserLogs()
-          }
-        } catch (err) {
-          if (!this.#finalized) {
-            log.warn(`Trace capture failed: ${(err as Error).message}`)
-          }
-        }
-      })()
-    }
-  }
-
-  async #enrichFindResult(rawResult: any, entry: any, ts: number) {
-    const capturer = this.#sessionCapturer
-    if (!capturer) {
-      return
-    }
-    // Unwrapped methods so these probes don't appear as phantom commands.
-    const els = getElementOriginals()
-    const getTagName = els.getTagName
-    const getText = els.getText
-    if (!getTagName || !getText) {
-      return
-    }
-    try {
-      const elements = Array.isArray(rawResult) ? rawResult : [rawResult]
-      const previews = await Promise.all(
-        elements.slice(0, 5).map(async (el: any) => {
-          const tag = await getTagName(el).catch(() => 'element')
-          const text = await getText(el).catch(() => '')
-          const trimmed = text.length > 60 ? text.slice(0, 60) + '…' : text
-          return trimmed ? `<${tag}>"${trimmed}"` : `<${tag}>`
-        })
+      captureNavigationTrace(
+        capturer,
+        this.#scriptInjected,
+        () => {
+          this.#scriptInjected = true
+        },
+        () => this.#finalized
       )
-      const more = elements.length > 5 ? `, +${elements.length - 5} more` : ''
-      const enriched = Array.isArray(rawResult)
-        ? `[${previews.join(', ')}${more}]`
-        : previews[0]
-      entry.result = enriched
-      capturer.sendReplaceCommand(ts, entry)
-    } catch {
-      // Element detached / stale — leave the original `<WebElement>` text.
-    }
-  }
-
-  // `open` merges windows into an existing Chrome process and loses
-  // `--user-data-dir` isolation, so we spawn the binary directly.
-  #findChromeBinary(): string | null {
-    const candidates =
-      process.platform === 'darwin'
-        ? [
-            '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
-            '/Applications/Google Chrome Beta.app/Contents/MacOS/Google Chrome Beta',
-            '/Applications/Chromium.app/Contents/MacOS/Chromium',
-            `${os.homedir()}/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`
-          ]
-        : process.platform === 'win32'
-          ? [
-              'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
-              'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
-              `${process.env.LOCALAPPDATA}\\Google\\Chrome\\Application\\chrome.exe`
-            ]
-          : [
-              '/usr/bin/google-chrome',
-              '/usr/bin/google-chrome-stable',
-              '/usr/bin/chromium-browser',
-              '/usr/bin/chromium'
-            ]
-    for (const c of candidates) {
-      if (c && fs.existsSync(c)) {
-        return c
-      }
     }
-    return null
   }
 
   #openUiWindow() {
@@ -731,52 +622,7 @@ class SeleniumDevToolsPlugin {
       return
     }
     this.#uiUrlOpened = true
-    const url = `http://${this.#options.hostname}:${this.#options.port}`
-
-    const chromeBin = this.#findChromeBinary()
-    if (!chromeBin) {
-      log.warn(`Chrome binary not found. Open manually: ${url}`)
-      return
-    }
-
-    const userDataDir = path.join(
-      os.tmpdir(),
-      `selenium-devtools-ui-${this.#options.port}-${Date.now()}`
-    )
-
-    log.info(`Chrome binary: ${chromeBin}`)
-    log.info(`💡 Opening DevTools UI: ${url}`)
-    const chromeArgs = [
-      `--user-data-dir=${userDataDir}`,
-      '--no-first-run',
-      '--no-default-browser-check',
-      '--window-size=1600,1200',
-      '--new-window',
-      url
-    ]
-    try {
-      // Double-fork: a short-lived Node intermediate spawns Chrome detached
-      // and exits, so Chrome is reparented to launchd/init and survives any
-      // tree-kill the test runner does on its descendants (vitest's pool,
-      // jest --forceExit, mocha SIGINT). Same path for every runner.
-      const code =
-        'require("child_process")' +
-        `.spawn(${JSON.stringify(chromeBin)}, ${JSON.stringify(chromeArgs)}, { detached: true, stdio: "ignore" }).unref()`
-      const intermediate = spawn(process.execPath, ['-e', code], {
-        detached: true,
-        stdio: 'ignore'
-      })
-      intermediate.unref()
-      intermediate.on('error', (err) => {
-        log.warn(
-          `Could not auto-open DevTools UI (${err.message}). Open manually: ${url}`
-        )
-      })
-    } catch (err) {
-      log.warn(
-        `Could not auto-open DevTools UI (${(err as Error).message}). Open manually: ${url}`
-      )
-    }
+    openDashboard(this.#options.hostname, this.#options.port)
   }
 
   #finalized = false
@@ -786,45 +632,23 @@ class SeleniumDevToolsPlugin {
 
   /** Per-driver cleanup; keeps capturer/suite/testManager/backend alive. */
   async onDriverEnd() {
-    if (this.#screencast) {
-      try {
-        await this.#screencast.stop()
-        const frames = this.#screencast.frames
-        if (frames.length > 0 && this.#sessionId) {
-          const fileName = `selenium-video-${this.#sessionId}.webm`
-          // Output dir priority: test-file dir → cwd → os.tmpdir().
-          const candidate = this.#testFileDir || process.cwd()
-          let videoPath = path.join(candidate, fileName)
-          try {
-            fs.accessSync(candidate, fs.constants.W_OK)
-          } catch {
-            videoPath = path.join(os.tmpdir(), fileName)
-          }
-          try {
-            await encodeToVideo(frames, videoPath, {
-              captureFormat: this.#screencastOptions.captureFormat
-            })
-            log.info(`📹 Screencast video: ${videoPath}`)
-            this.#sessionCapturer?.sendUpstream('screencast', {
-              sessionId: this.#sessionId,
-              videoPath,
-              videoFile: fileName,
-              frameCount: frames.length
-            })
-          } catch (err) {
-            log.warn(`Screencast encode failed: ${(err as Error).message}`)
-          }
-        }
-      } catch (err) {
-        log.warn(`Screencast stop failed: ${(err as Error).message}`)
-      }
+    if (this.#screencast && this.#sessionId) {
+      await finalizeScreencast({
+        recorder: this.#screencast,
+        sessionId: this.#sessionId,
+        filenamePrefix: 'selenium-video',
+        outputDir: this.#testFileDir,
+        captureFormat: this.#screencastOptions.captureFormat,
+        sendUpstream: (scope, data) =>
+          this.#sessionCapturer?.sendUpstream(scope, data),
+        onLog: (level, message) => log[level](message)
+      })
     }
     this.#driver = undefined
     this.#screencast = undefined
     this.#scriptInjected = false
     this.#sessionId = undefined
-    this.#lastCapturedSig = null
-    this.#lastCapturedId = null
+    this.#retryTracker.reset()
   }
 
   /** Final teardown. Idempotent. */
@@ -837,8 +661,14 @@ class SeleniumDevToolsPlugin {
     try {
       await this.onDriverEnd().catch(() => {})
 
+      // Don't call suiteManager.finalize() here — it sets `root.end`, which
+      // signals the dashboard's rerun tracker that the feature has finished
+      // and unblocks the new-run reset for the next scenario. onSessionEnd
+      // fires on each `driver.quit()` (per cucumber scenario), so finalizing
+      // the root here is premature. The true end-of-run finalize happens in
+      // finalizeTestRun (cucumber AfterAll). testReporter.updateSuites() is
+      // still useful to flush per-scenario state to the dashboard.
       this.#testManager?.finalizeSession()
-      this.#suiteManager?.finalize()
       this.#testReporter?.updateSuites()
 
       const cmdCount = this.#sessionCapturer?.commandsLog.length ?? 0
@@ -848,24 +678,55 @@ class SeleniumDevToolsPlugin {
         `📊 Session summary — ${cmdCount} command(s), ${networkCount} network request(s), ${consoleCount} console log(s)`
       )
       this.#sessionCapturer?.cleanup()
-      // Keep the worker WS open while the dashboard is up — it's the
-      // channel the backend uses to tell us "the user closed the
-      // dashboard, time to exit". gracefulShutdown closes it on real exit.
-      if (!this.#options.openUi || this.#isReuse) {
-        await this.#sessionCapturer?.closeWebSocket()
-      }
 
+      // Interactive path: dashboard is up — wait for the user to close it,
+      // then finish teardown. Matches wdio's "Please close the browser
+      // window to finish..." UX. The worker WS stays open as the channel
+      // the backend uses to signal `clientDisconnected`.
       if (this.#options.openUi && !this.#isReuse) {
         log.info(
           `💡 Tests complete — DevTools UI: http://${this.#options.hostname}:${this.#options.port}`
         )
+        log.info(
+          '🔵 Close the DevTools browser window (or press Ctrl+C) to finish'
+        )
+        this.#keepAliveTimer = setInterval(() => {}, 60 * 60 * 1000)
+        this.#sessionCapturer?.setClientDisconnectedHandler(() => {
+          log.info('Dashboard closed — shutting down')
+          this.clearKeepAlive()
+          void this.#completeShutdown(shutdownStart)
+        })
+        return
       }
-      log.info(`🛑 Shutdown complete (${Date.now() - shutdownStart}ms)`)
+
+      // Non-interactive path (no dashboard or rerun child). Don't close the
+      // WS yet: this `onSessionEnd` is reached via the patched `driver.quit()`
+      // (cucumber's per-scenario `After` hook), but the runner's
+      // `onScenarioEnd` hook fires AFTER `After`. Closing the WS here would
+      // drop the final state update. Defer the close to `beforeExit`/`exit`,
+      // by which time every post-quit runner hook has flushed.
+      log.info(`🛑 Session ended (${Date.now() - shutdownStart}ms)`)
     } catch (err) {
-      log.warn(`Cleanup error: ${(err as Error).message}`)
+      log.warn(`Cleanup error: ${errorMessage(err)}`)
     }
   }
 
+  /**
+   * Final cleanup once the user has closed the dashboard browser. Drives the
+   * remaining teardown explicitly and `exit(0)`s — the natural event-loop
+   * drain doesn't fire reliably because the detached backend's own close
+   * races with the worker WS close.
+   */
+  async #completeShutdown(shutdownStart: number) {
+    try {
+      await this.#sessionCapturer?.closeWebSocket()
+    } catch {
+      /* best-effort */
+    }
+    log.info(`🛑 Shutdown complete (${Date.now() - shutdownStart}ms)`)
+    process.exit(0)
+  }
+
   async onProcessExit() {
     return this.onSessionEnd()
   }
@@ -875,11 +736,22 @@ class SeleniumDevToolsPlugin {
     this.#testManager?.finalizeSession()
     this.#suiteManager?.finalize()
     this.#testReporter?.updateSuites()
+    // Reuse mode (rerun child): close the WS now so the child's event loop
+    // can drain and the process exits on its own. Outside reuse, the parent
+    // owns the WS lifecycle via the keep-alive + clientDisconnected handler.
+    // onTestRunComplete fires AFTER per-scenario `After` hooks, so any state
+    // updates queued in the cucumber lifecycle have already flushed.
+    if (this.#isReuse) {
+      void this.#sessionCapturer?.closeWebSocket()
+    }
   }
 
   get sessionCapturer() {
     return this.#sessionCapturer
   }
+  get isReuse() {
+    return this.#isReuse
+  }
   get rerunManager() {
     return this.#rerunManager
   }
@@ -974,42 +846,7 @@ if (!registerHooks()) {
   }, 100)
 }
 
-process.on('exit', () => {
-  void plugin.onSessionEnd()
-})
-process.on('beforeExit', () => {
-  void plugin.onSessionEnd()
-})
-
-async function gracefulShutdown(code: number) {
-  try {
-    plugin.clearKeepAlive()
-    await plugin.sessionCapturer?.closeWebSocket()
-    plugin.sessionCapturer?.cleanup()
-    // Best-effort: kill the detached Chrome dashboard. Each session's
-    // --user-data-dir contains the unique `selenium-devtools-ui-${port}`
-    // marker, so a pattern match lands on this run's window only.
-    try {
-      spawn(
-        '/usr/bin/pkill',
-        ['-f', `selenium-devtools-ui-${plugin.options.port}-`],
-        { stdio: 'ignore' }
-      )
-    } catch {
-      /* pkill missing — accept stale Chrome */
-    }
-  } catch {
-    /* best-effort */
-  }
-  process.exit(code)
-}
-
-process.on('SIGINT', () => {
-  void gracefulShutdown(130)
-})
-process.on('SIGTERM', () => {
-  void gracefulShutdown(143)
-})
+registerProcessHooks(plugin)
 
 export const DevTools = {
   configure: (opts: { rerunCommand?: string }) => plugin.configure(opts),
diff --git a/packages/selenium-devtools/src/reporter.ts b/packages/selenium-devtools/src/reporter.ts
index d1ac0155..300c040c 100644
--- a/packages/selenium-devtools/src/reporter.ts
+++ b/packages/selenium-devtools/src/reporter.ts
@@ -1,5 +1,5 @@
 import logger from '@wdio/logger'
-import { resetSignatureCounters } from './helpers/utils.js'
+import { TestReporterBase } from '@wdio/devtools-core'
 import type { SuiteStats, TestStats } from './types.js'
 
 const log = logger('@wdio/selenium-devtools:Reporter')
@@ -9,32 +9,16 @@ const log = logger('@wdio/selenium-devtools:Reporter')
  * upstream callback. The shape of each upstream payload is identical to the
  * Nightwatch plugin so the existing UI renders both transparently.
  */
-export class TestReporter {
-  #report: (data: any) => void
-  #allSuites: SuiteStats[] = []
-
-  constructor(report: (data: any) => void) {
-    this.#report = report
-    resetSignatureCounters()
-  }
-
-  updateUpstream(report: (data: any) => void) {
-    this.#report = report
-  }
-
-  onSuiteStart(suite: SuiteStats) {
-    if (!this.#allSuites.find((s) => s.uid === suite.uid)) {
-      this.#allSuites.push(suite)
+export class TestReporter extends TestReporterBase {
+  onSuiteStart(suite: SuiteStats): void {
+    if (!this.allSuites.find((s) => s.uid === suite.uid)) {
+      this.allSuites.push(suite)
     }
-    this.#sendUpstream()
-  }
-
-  onSuiteEnd(_suite: SuiteStats) {
-    this.#sendUpstream()
+    this.sendUpstream()
   }
 
-  onTestStart(test: TestStats) {
-    for (const suite of this.#allSuites) {
+  onTestStart(test: TestStats): void {
+    for (const suite of this.allSuites) {
       if (suite.uid !== test.parent) {
         continue
       }
@@ -45,44 +29,11 @@ export class TestReporter {
         suite.tests[idx] = test
       }
     }
-    this.#sendUpstream()
+    this.sendUpstream()
   }
 
-  onTestEnd(test: TestStats) {
-    for (const suite of this.#allSuites) {
-      const idx = suite.tests.findIndex(
-        (t) => typeof t !== 'string' && t.uid === test.uid
-      )
-      if (idx !== -1) {
-        suite.tests[idx] = test
-      }
-    }
-    this.#sendUpstream()
-  }
-
-  updateSuites() {
-    this.#sendUpstream()
-  }
-
-  clearExecutionData() {
-    this.#allSuites = []
-    resetSignatureCounters()
+  override clearExecutionData(): void {
+    super.clearExecutionData()
     log.info('Cleared execution data')
   }
-
-  #sendUpstream() {
-    const payload: Record<string, SuiteStats>[] = []
-    for (const suite of this.#allSuites) {
-      if (suite.uid) {
-        payload.push({ [suite.uid]: suite })
-      }
-    }
-    if (payload.length > 0) {
-      this.#report(payload)
-    }
-  }
-
-  get report() {
-    return this.#allSuites
-  }
 }
diff --git a/packages/selenium-devtools/src/runnerHooks.ts b/packages/selenium-devtools/src/runnerHooks.ts
index 181422d8..27c6db9e 100644
--- a/packages/selenium-devtools/src/runnerHooks.ts
+++ b/packages/selenium-devtools/src/runnerHooks.ts
@@ -1,15 +1,22 @@
-import { createRequire } from 'node:module'
-import logger from '@wdio/logger'
-import { findTestLineInFile } from './helpers/utils.js'
-import type { MochaTestCtx, RunnerHookCallbacks } from './types.js'
+import type { RunnerHookCallbacks } from './types.js'
+import { tryRegisterMochaHooks } from './runnerHooks/mocha.js'
+import { tryRegisterJestHooks } from './runnerHooks/jest.js'
+import { tryRegisterCucumberHooks } from './runnerHooks/cucumber.js'
 
-const log = logger('@wdio/selenium-devtools:runnerHooks')
+export { tryRegisterMochaHooks, tryRegisterJestHooks, tryRegisterCucumberHooks }
 
 // Jest is identified by `expect.getState()` (Chai's `expect` lacks it).
 // Mocha is identified by `it`+`describe`+`beforeEach` without that.
 // Cucumber doesn't expose globals — we detect via argv + a require probe.
 export function detectRunner(): 'jest' | 'mocha' | 'cucumber' | null {
-  const g = globalThis as any
+  // Double-cast: built-in `globalThis` lacks the runner globals; kept local
+  // (not `declare global`) so consumers don't get them as ambient types.
+  const g = globalThis as unknown as {
+    beforeEach?: unknown
+    expect?: { getState?: unknown }
+    it?: unknown
+    describe?: unknown
+  }
   if ((process.argv[1] || '').toLowerCase().includes('cucumber')) {
     return 'cucumber'
   }
@@ -41,621 +48,3 @@ export function tryRegisterRunnerHooks(
   }
   return false
 }
-
-// Use beforeEach/afterEach — wrapping `it()` breaks `it.skip` / `it.only`.
-export function tryRegisterMochaHooks(callbacks: RunnerHookCallbacks): boolean {
-  const g = globalThis as any
-  if (typeof g.beforeEach !== 'function' || typeof g.afterEach !== 'function') {
-    return false
-  }
-  // Counters used by the run-level before/after hooks below.
-  let runStartTs = 0
-  let testsStarted = 0
-  let testsPassed = 0
-  let testsFailed = 0
-  let testsPending = 0
-  try {
-    if (typeof g.before === 'function' && typeof g.after === 'function') {
-      g.before(function () {
-        runStartTs = Date.now()
-        log.info('🧪 Test run starting')
-      })
-      g.after(function () {
-        const durationMs = Date.now() - runStartTs
-        const duration = (durationMs / 1000).toFixed(2)
-        log.info(
-          `🧪 Test run complete: ${testsPassed} passed, ${testsFailed} failed` +
-            (testsPending ? `, ${testsPending} pending` : '') +
-            ` (${duration}s, ${testsStarted} total)`
-        )
-        callbacks.onTestRunComplete?.({
-          passed: testsPassed,
-          failed: testsFailed,
-          pending: testsPending,
-          durationMs
-        })
-      })
-    }
-    g.beforeEach(function (this: any) {
-      // Fallback when `before` registered too late to fire.
-      if (runStartTs === 0) {
-        runStartTs = Date.now()
-      }
-      const test: MochaTestCtx | undefined = this?.currentTest
-      if (!test?.title) {
-        return
-      }
-      let callSource: string | undefined
-      if (test.file) {
-        const line = findTestLineInFile(test.file, test.title)
-        callSource = line ? `${test.file}:${line}` : `${test.file}:0`
-      }
-      log.info(`▶ Test: "${test.title}"`)
-      testsStarted++
-      // Mocha's root suite has an empty title — skip so we don't blank the dashboard.
-      const parentTitle =
-        typeof test.parent?.title === 'string' && test.parent.title.length > 0
-          ? test.parent.title
-          : undefined
-      let suiteCallSource: string | undefined
-      if (parentTitle && test.file) {
-        const line = findTestLineInFile(test.file, parentTitle, 'suite')
-        suiteCallSource = line ? `${test.file}:${line}` : `${test.file}:0`
-      }
-      callbacks.onTestStart(
-        test.title,
-        test.file,
-        callSource,
-        parentTitle,
-        suiteCallSource
-      )
-    })
-    g.afterEach(function (this: any) {
-      const test: MochaTestCtx | undefined = this?.currentTest
-      const state =
-        test?.state === 'failed'
-          ? 'failed'
-          : test?.state === 'passed'
-            ? 'passed'
-            : test?.state === 'pending'
-              ? 'pending'
-              : 'passed'
-      const icon = state === 'passed' ? '✓' : state === 'failed' ? '✗' : '○'
-      const duration =
-        typeof test?.duration === 'number' ? ` (${test.duration}ms)` : ''
-      log.info(`${icon} Test: "${test?.title ?? 'unknown'}"${duration}`)
-      if (state === 'passed') {
-        testsPassed++
-      } else if (state === 'failed') {
-        testsFailed++
-      } else if (state === 'pending') {
-        testsPending++
-      }
-      callbacks.onTestEnd(state)
-    })
-    log.info(
-      '✓ Mocha hooks registered — startTest/endTest will fire automatically per it()'
-    )
-    return true
-  } catch (err) {
-    log.warn(`Failed to register mocha hooks: ${(err as Error).message}`)
-    return false
-  }
-}
-
-// `suppressedErrors` only catches failed expect()s; we track thrown errors
-// (e.g. selenium TimeoutError) separately to mark those tests failed too.
-export function tryRegisterJestHooks(callbacks: RunnerHookCallbacks): boolean {
-  const g = globalThis as any
-  if (
-    typeof g.beforeEach !== 'function' ||
-    typeof g.afterEach !== 'function' ||
-    typeof g.expect?.getState !== 'function'
-  ) {
-    return false
-  }
-  let runStartTs = 0
-  let testsStarted = 0
-  let testsPassed = 0
-  let testsFailed = 0
-  let currentName = ''
-  // `currentTestName` is the space-joined describe path + test name (ambiguous);
-  // we capture the describe stack at registration to recover suite + inner name.
-  const describeStack: string[] = []
-  const testToDescribeStack = new Map<string, string[]>()
-  const testFailures = new Map<string, Error>()
-  const wrapWithDescribePush = <T extends (...args: any[]) => any>(
-    orig: T
-  ): T => {
-    const wrapped = ((name: string, fn: () => void, ...rest: any[]) => {
-      describeStack.push(name)
-      try {
-        return (orig as any).call(g, name, fn, ...rest)
-      } finally {
-        describeStack.pop()
-      }
-    }) as any as T
-    // Preserve .skip / .only / .each modifiers.
-    for (const k of Reflect.ownKeys(orig as any)) {
-      try {
-        ;(wrapped as any)[k] = (orig as any)[k]
-      } catch {
-        /* read-only own keys */
-      }
-    }
-    return wrapped
-  }
-  const wrapTestRegistrar = <T extends (...args: any[]) => any>(orig: T): T => {
-    const wrapped = ((name: string, fn: any, timeout?: number) => {
-      const stackAtRegistration = [...describeStack]
-      const jestKey = [...stackAtRegistration, name].join(' ')
-      const vitestKey = [...stackAtRegistration, name].join(' > ')
-      testToDescribeStack.set(jestKey, stackAtRegistration)
-      testToDescribeStack.set(vitestKey, stackAtRegistration)
-      let wrappedFn = fn
-      if (typeof fn === 'function') {
-        wrappedFn = function (this: any, ...fnArgs: any[]) {
-          // Key by inner test name — under Vitest the describe-stack
-          // capture isn't reliable (Vitest doesn't run describe bodies
-          // through our globalThis wrap), so the only stable identifier
-          // we share with afterEach is `name` itself.
-          const recordFailure = (err: Error) => {
-            testFailures.set(name, err)
-            testFailures.set(jestKey, err)
-            testFailures.set(vitestKey, err)
-          }
-          let result: unknown
-          try {
-            result = fn.apply(this, fnArgs)
-          } catch (err) {
-            recordFailure(err as Error)
-            throw err
-          }
-          if (result && typeof (result as any).then === 'function') {
-            return (result as Promise<unknown>).catch((err: unknown) => {
-              recordFailure(err as Error)
-              throw err
-            })
-          }
-          return result
-        }
-      }
-      return (orig as any).call(g, name, wrappedFn, timeout)
-    }) as any as T
-    for (const k of Reflect.ownKeys(orig as any)) {
-      try {
-        ;(wrapped as any)[k] = (orig as any)[k]
-      } catch {
-        /* read-only own keys */
-      }
-    }
-    return wrapped
-  }
-  if (typeof g.describe === 'function') {
-    g.describe = wrapWithDescribePush(g.describe)
-  }
-  if (typeof g.test === 'function') {
-    g.test = wrapTestRegistrar(g.test)
-  }
-  if (typeof g.it === 'function') {
-    g.it = wrapTestRegistrar(g.it)
-  }
-  try {
-    if (typeof g.beforeAll === 'function' && typeof g.afterAll === 'function') {
-      g.beforeAll(() => {
-        runStartTs = Date.now()
-        log.info('🧪 Test run starting')
-      })
-      g.afterAll(() => {
-        const durationMs = Date.now() - runStartTs
-        const duration = (durationMs / 1000).toFixed(2)
-        log.info(
-          `🧪 Test run complete: ${testsPassed} passed, ${testsFailed} failed ` +
-            `(${duration}s, ${testsStarted} total)`
-        )
-        callbacks.onTestRunComplete?.({
-          passed: testsPassed,
-          failed: testsFailed,
-          pending: 0,
-          durationMs
-        })
-      })
-    }
-    g.beforeEach(() => {
-      if (runStartTs === 0) {
-        runStartTs = Date.now()
-      }
-      const state = g.expect.getState() as {
-        currentTestName?: string
-        testPath?: string
-      }
-      const fullName = state?.currentTestName || ''
-      const file = state?.testPath || undefined
-      if (!fullName) {
-        return
-      }
-      // currentTestName: Jest joins describes with ' ', Vitest with ' > '.
-      const stack = testToDescribeStack.get(fullName) ?? []
-      let innerName = fullName
-      let suiteName: string | undefined
-      if (stack.length > 0) {
-        const jestPath = stack.join(' ')
-        const vitestPath = stack.join(' > ')
-        if (fullName.startsWith(jestPath + ' ')) {
-          innerName = fullName.slice(jestPath.length + 1)
-        } else if (fullName.startsWith(vitestPath + ' > ')) {
-          innerName = fullName.slice(vitestPath.length + 3)
-        }
-        suiteName = stack[0]
-      } else if (fullName.includes(' > ')) {
-        const segments = fullName.split(' > ')
-        innerName = segments[segments.length - 1]
-        suiteName = segments[0]
-      }
-      currentName = innerName
-      let callSource: string | undefined
-      if (file) {
-        const line = findTestLineInFile(file, innerName)
-        callSource = line ? `${file}:${line}` : `${file}:0`
-      }
-      let suiteCallSource: string | undefined
-      if (suiteName && file) {
-        const line = findTestLineInFile(file, suiteName, 'suite')
-        suiteCallSource = line ? `${file}:${line}` : `${file}:0`
-      }
-      log.info(`▶ Test: "${innerName}"`)
-      testsStarted++
-      callbacks.onTestStart(
-        innerName,
-        file,
-        callSource,
-        suiteName,
-        suiteCallSource
-      )
-    })
-    g.afterEach(() => {
-      const state = g.expect.getState() as {
-        suppressedErrors?: unknown[]
-        currentTestName?: string
-      }
-      const fullName = state?.currentTestName || ''
-      // Try the recorded full-path keys first, then the inner test name —
-      // under Vitest the stack capture is empty so we keyed by inner name.
-      const innerKey =
-        fullName.split(' > ').pop() ?? fullName.split(' ').pop() ?? fullName
-      const thrown =
-        testFailures.get(fullName) ??
-        testFailures.get(fullName.replace(/ > /g, ' ')) ??
-        testFailures.get(fullName.replace(/ /g, ' > ')) ??
-        testFailures.get(innerKey)
-      const expectFailed =
-        Array.isArray(state?.suppressedErrors) &&
-        state.suppressedErrors.length > 0
-      const failed = !!thrown || expectFailed
-      if (thrown) {
-        testFailures.delete(fullName)
-        testFailures.delete(fullName.replace(/ > /g, ' '))
-        testFailures.delete(fullName.replace(/ /g, ' > '))
-        testFailures.delete(innerKey)
-      }
-      const finalState: 'passed' | 'failed' = failed ? 'failed' : 'passed'
-      const icon = finalState === 'passed' ? '✓' : '✗'
-      log.info(`${icon} Test: "${currentName || 'unknown'}"`)
-      if (finalState === 'passed') {
-        testsPassed++
-      } else {
-        testsFailed++
-      }
-      callbacks.onTestEnd(finalState)
-    })
-    log.info(
-      '✓ Jest hooks registered — startTest/endTest will fire automatically per test()'
-    )
-    return true
-  } catch (err) {
-    log.warn(`Failed to register jest hooks: ${(err as Error).message}`)
-    return false
-  }
-}
-
-// Loads `@cucumber/cucumber` from the user's install (peer-dep style) and
-// registers BeforeAll/Before/After/AfterAll. The hook receives the full
-// pickle so we can surface scenario name + feature name in the dashboard.
-export function tryRegisterCucumberHooks(
-  callbacks: RunnerHookCallbacks
-): boolean {
-  const tryLoad = (): any | null => {
-    try {
-      return createRequire(`${process.cwd()}/`)('@cucumber/cucumber')
-    } catch {
-      try {
-        return createRequire(import.meta.url)('@cucumber/cucumber')
-      } catch {
-        return null
-      }
-    }
-  }
-  const cucumber = tryLoad()
-  if (!cucumber) {
-    return false
-  }
-  const { Before, After, BeforeAll, AfterAll, BeforeStep, AfterStep } = cucumber
-  if (typeof Before !== 'function' || typeof After !== 'function') {
-    return false
-  }
-
-  // BeforeStep doesn't expose which step definition matched, so we wrap the
-  // Given/When/Then registrars to snapshot (pattern → uri:line) at registration.
-  const stepDefinitions: Array<{
-    pattern: string | RegExp
-    uri: string
-    line: number
-  }> = []
-
-  const selfUrl = (() => {
-    try {
-      return import.meta.url
-    } catch {
-      return ''
-    }
-  })()
-  const selfPath = selfUrl.replace(/^file:\/\//, '')
-  const isSelfFrame = (line: string): boolean => {
-    if (!selfPath) {
-      return false
-    }
-    return line.includes(selfPath) || line.includes(selfUrl)
-  }
-
-  const captureCallSite = (): { uri: string; line: number } | null => {
-    const stack = new Error().stack || ''
-    for (const raw of stack.split('\n')) {
-      const line = raw.trim()
-      if (!line.startsWith('at ')) {
-        continue
-      }
-      if (
-        line.includes('@cucumber/') ||
-        line.includes('node:internal') ||
-        isSelfFrame(line)
-      ) {
-        continue
-      }
-      const m =
-        /\(([^)]+):(\d+):\d+\)$/.exec(line) || /at\s+(.+):(\d+):\d+$/.exec(line)
-      if (m) {
-        let uri = m[1]
-        if (uri.startsWith('file://')) {
-          uri = uri.replace(/^file:\/\//, '')
-        }
-        return { uri, line: Number(m[2]) }
-      }
-    }
-    return null
-  }
-
-  for (const name of ['Given', 'When', 'Then', 'defineStep'] as const) {
-    if (typeof cucumber[name] !== 'function') {
-      continue
-    }
-    const orig = cucumber[name]
-    cucumber[name] = function patchedRegistrar(...args: any[]) {
-      const callSite = captureCallSite()
-      if (callSite && args.length > 0) {
-        stepDefinitions.push({
-          pattern: args[0],
-          uri: callSite.uri,
-          line: callSite.line
-        })
-      }
-      return orig.apply(this, args)
-    }
-    Object.assign(cucumber[name], orig)
-  }
-
-  // Cucumber-expression → regex. Handles built-in placeholders only; custom
-  // types fall through to wildcard. Braces MUST be in the escape set so the
-  // subsequent `\{string\}`-shaped replacements can match.
-  const patternToRegex = (pattern: string): RegExp => {
-    const escaped = pattern.replace(/[{}.*+?^$|()[\]\\]/g, '\\$&')
-    const expanded = escaped
-      .replace(/\\\{string\\\}/g, '"([^"]*)"')
-      .replace(/\\\{int\\\}/g, '(-?\\d+)')
-      .replace(/\\\{float\\\}/g, '(-?\\d*\\.?\\d+)')
-      .replace(/\\\{word\\\}/g, '([^\\s]+)')
-      .replace(/\\\{[^}]*\\\}/g, '(.+?)')
-    return new RegExp(`^${expanded}$`)
-  }
-
-  const findStepDefinition = (
-    text: string
-  ): { uri: string; line: number } | null => {
-    for (const def of stepDefinitions) {
-      let regex: RegExp
-      try {
-        regex =
-          def.pattern instanceof RegExp
-            ? def.pattern
-            : patternToRegex(String(def.pattern))
-      } catch {
-        continue
-      }
-      if (regex.test(text)) {
-        return { uri: def.uri, line: def.line }
-      }
-    }
-    return null
-  }
-
-  let runStartTs = 0
-  let testsStarted = 0
-  let testsPassed = 0
-  let testsFailed = 0
-  let testsPending = 0
-
-  try {
-    if (typeof BeforeAll === 'function' && typeof AfterAll === 'function') {
-      BeforeAll(() => {
-        runStartTs = Date.now()
-        log.info('🧪 Test run starting')
-      })
-      AfterAll(() => {
-        const durationMs = Date.now() - runStartTs
-        const duration = (durationMs / 1000).toFixed(2)
-        log.info(
-          `🧪 Test run complete: ${testsPassed} passed, ${testsFailed} failed` +
-            (testsPending ? `, ${testsPending} pending` : '') +
-            ` (${duration}s, ${testsStarted} total)`
-        )
-        callbacks.onTestRunComplete?.({
-          passed: testsPassed,
-          failed: testsFailed,
-          pending: testsPending,
-          durationMs
-        })
-      })
-    }
-
-    // PickleStep has no `location.line`; only the gherkinDocument AST does.
-    // These maps bridge astNodeId → line for the dashboard's test-lens.
-    let stepKeywordById = new Map<string, string>()
-    let stepLineById = new Map<string, number>()
-    let scenarioLineById = new Map<string, number>()
-
-    Before(function (testCase: any) {
-      if (runStartTs === 0) {
-        runStartTs = Date.now()
-      }
-      const pickle = testCase?.pickle
-      const name: string = pickle?.name ?? 'unknown scenario'
-      const file: string | undefined = pickle?.uri
-      const featureName: string | undefined =
-        testCase?.gherkinDocument?.feature?.name
-      const featureLine = testCase?.gherkinDocument?.feature?.location?.line
-
-      stepKeywordById = new Map<string, string>()
-      stepLineById = new Map<string, number>()
-      scenarioLineById = new Map<string, number>()
-      const featureChildren = testCase?.gherkinDocument?.feature?.children ?? []
-      for (const child of featureChildren) {
-        if (child?.scenario?.id && child?.scenario?.location?.line) {
-          scenarioLineById.set(child.scenario.id, child.scenario.location.line)
-        }
-        const steps = child?.scenario?.steps ?? child?.background?.steps ?? []
-        for (const step of steps) {
-          if (step?.id && typeof step?.keyword === 'string') {
-            stepKeywordById.set(step.id, step.keyword)
-          }
-          if (step?.id && step?.location?.line) {
-            stepLineById.set(step.id, step.location.line)
-          }
-        }
-      }
-
-      const scenarioLineFromMap =
-        Array.isArray(pickle?.astNodeIds) &&
-        scenarioLineById.get(pickle.astNodeIds[0])
-      const scenarioLine = scenarioLineFromMap || pickle?.location?.line
-      const callSource = file
-        ? scenarioLine
-          ? `${file}:${scenarioLine}`
-          : `${file}:0`
-        : undefined
-      const featureCallSource = file
-        ? featureLine
-          ? `${file}:${featureLine}`
-          : `${file}:1`
-        : undefined
-
-      log.info(`▶ Scenario: "${name}"`)
-      testsStarted++
-      callbacks.onScenarioStart?.(
-        name,
-        file,
-        callSource,
-        featureName,
-        featureCallSource
-      )
-    })
-
-    if (typeof BeforeStep === 'function') {
-      BeforeStep(function (arg: any) {
-        const pickleStep = arg?.pickleStep
-        if (!pickleStep) {
-          return
-        }
-        const astId =
-          Array.isArray(pickleStep.astNodeIds) && pickleStep.astNodeIds[0]
-        const keyword = (astId && stepKeywordById.get(astId)) || ''
-        const text: string = pickleStep.text ?? ''
-        const title = `${keyword}${text}`.trim()
-        // Prefer the step-definition source over the .feature line — the
-        // dashboard's Source panel loads `file`, not `callSource`.
-        const stepDef = findStepDefinition(text)
-        const featureFile: string | undefined = arg?.pickle?.uri
-        const featureLineForStep =
-          (astId && stepLineById.get(astId)) || pickleStep?.location?.line
-        const file = stepDef ? stepDef.uri : featureFile
-        const callSource = stepDef
-          ? `${stepDef.uri}:${stepDef.line}`
-          : featureFile
-            ? featureLineForStep
-              ? `${featureFile}:${featureLineForStep}`
-              : `${featureFile}:0`
-            : undefined
-        callbacks.onTestStart(title, file, callSource)
-      })
-    }
-
-    if (typeof AfterStep === 'function') {
-      AfterStep(function (arg: any) {
-        const status = String(arg?.result?.status ?? '').toUpperCase()
-        let state: 'passed' | 'failed' | 'pending' | 'skipped' = 'passed'
-        if (
-          status === 'FAILED' ||
-          status === 'UNDEFINED' ||
-          status === 'AMBIGUOUS'
-        ) {
-          state = 'failed'
-        } else if (status === 'PENDING') {
-          state = 'pending'
-        } else if (status === 'SKIPPED') {
-          state = 'skipped'
-        }
-        callbacks.onTestEnd(state)
-      })
-    }
-
-    After(function (testCase: any) {
-      const status = String(testCase?.result?.status ?? '').toUpperCase()
-      let state: 'passed' | 'failed' | 'pending' = 'passed'
-      if (
-        status === 'FAILED' ||
-        status === 'UNDEFINED' ||
-        status === 'AMBIGUOUS'
-      ) {
-        state = 'failed'
-      } else if (status === 'PENDING' || status === 'SKIPPED') {
-        state = 'pending'
-      }
-      const icon = state === 'passed' ? '✓' : state === 'failed' ? '✗' : '○'
-      log.info(`${icon} Scenario: "${testCase?.pickle?.name ?? 'unknown'}"`)
-      if (state === 'passed') {
-        testsPassed++
-      } else if (state === 'failed') {
-        testsFailed++
-      } else {
-        testsPending++
-      }
-      callbacks.onScenarioEnd?.(state)
-    })
-
-    log.info(
-      '✓ Cucumber hooks registered — Before/After=scenario sub-suite, BeforeStep/AfterStep=Gherkin step tests'
-    )
-    return true
-  } catch (err) {
-    log.warn(`Failed to register cucumber hooks: ${(err as Error).message}`)
-    return false
-  }
-}
diff --git a/packages/selenium-devtools/src/runnerHooks/cucumber.ts b/packages/selenium-devtools/src/runnerHooks/cucumber.ts
new file mode 100644
index 00000000..57b11a10
--- /dev/null
+++ b/packages/selenium-devtools/src/runnerHooks/cucumber.ts
@@ -0,0 +1,308 @@
+import { createRequire } from 'node:module'
+import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
+import type { RunnerHookCallbacks } from '../types.js'
+
+const log = logger('@wdio/selenium-devtools:runnerHooks:cucumber')
+
+// Loads `@cucumber/cucumber` from the user's install (peer-dep style) and
+// registers BeforeAll/Before/After/AfterAll. The hook receives the full
+// pickle so we can surface scenario name + feature name in the dashboard.
+export function tryRegisterCucumberHooks(
+  callbacks: RunnerHookCallbacks
+): boolean {
+  const tryLoad = (): any | null => {
+    try {
+      return createRequire(`${process.cwd()}/`)('@cucumber/cucumber')
+    } catch {
+      try {
+        return createRequire(import.meta.url)('@cucumber/cucumber')
+      } catch {
+        return null
+      }
+    }
+  }
+  const cucumber = tryLoad()
+  if (!cucumber) {
+    return false
+  }
+  const { Before, After, BeforeAll, AfterAll, BeforeStep, AfterStep } = cucumber
+  if (typeof Before !== 'function' || typeof After !== 'function') {
+    return false
+  }
+
+  // BeforeStep doesn't expose which step definition matched, so we wrap the
+  // Given/When/Then registrars to snapshot (pattern → uri:line) at registration.
+  const stepDefinitions: Array<{
+    pattern: string | RegExp
+    uri: string
+    line: number
+  }> = []
+
+  const selfUrl = (() => {
+    try {
+      return import.meta.url
+    } catch {
+      return ''
+    }
+  })()
+  const selfPath = selfUrl.replace(/^file:\/\//, '')
+  const isSelfFrame = (line: string): boolean => {
+    if (!selfPath) {
+      return false
+    }
+    return line.includes(selfPath) || line.includes(selfUrl)
+  }
+
+  const captureCallSite = (): { uri: string; line: number } | null => {
+    const stack = new Error().stack || ''
+    for (const raw of stack.split('\n')) {
+      const line = raw.trim()
+      if (!line.startsWith('at ')) {
+        continue
+      }
+      if (
+        line.includes('@cucumber/') ||
+        line.includes('node:internal') ||
+        isSelfFrame(line)
+      ) {
+        continue
+      }
+      const m =
+        /\(([^)]+):(\d+):\d+\)$/.exec(line) || /at\s+(.+):(\d+):\d+$/.exec(line)
+      if (m) {
+        let uri = m[1]
+        if (uri.startsWith('file://')) {
+          uri = uri.replace(/^file:\/\//, '')
+        }
+        return { uri, line: Number(m[2]) }
+      }
+    }
+    return null
+  }
+
+  for (const name of ['Given', 'When', 'Then', 'defineStep'] as const) {
+    if (typeof cucumber[name] !== 'function') {
+      continue
+    }
+    const orig = cucumber[name]
+    cucumber[name] = function patchedRegistrar(...args: any[]) {
+      const callSite = captureCallSite()
+      if (callSite && args.length > 0) {
+        stepDefinitions.push({
+          pattern: args[0],
+          uri: callSite.uri,
+          line: callSite.line
+        })
+      }
+      return orig.apply(this, args)
+    }
+    Object.assign(cucumber[name], orig)
+  }
+
+  // Cucumber-expression → regex. Handles built-in placeholders only; custom
+  // types fall through to wildcard. Braces MUST be in the escape set so the
+  // subsequent `\{string\}`-shaped replacements can match.
+  const patternToRegex = (pattern: string): RegExp => {
+    const escaped = pattern.replace(/[{}.*+?^$|()[\]\\]/g, '\\$&')
+    const expanded = escaped
+      .replace(/\\\{string\\\}/g, '"([^"]*)"')
+      .replace(/\\\{int\\\}/g, '(-?\\d+)')
+      .replace(/\\\{float\\\}/g, '(-?\\d*\\.?\\d+)')
+      .replace(/\\\{word\\\}/g, '([^\\s]+)')
+      .replace(/\\\{[^}]*\\\}/g, '(.+?)')
+    return new RegExp(`^${expanded}$`)
+  }
+
+  const findStepDefinition = (
+    text: string
+  ): { uri: string; line: number } | null => {
+    for (const def of stepDefinitions) {
+      let regex: RegExp
+      try {
+        regex =
+          def.pattern instanceof RegExp
+            ? def.pattern
+            : patternToRegex(String(def.pattern))
+      } catch {
+        continue
+      }
+      if (regex.test(text)) {
+        return { uri: def.uri, line: def.line }
+      }
+    }
+    return null
+  }
+
+  let runStartTs = 0
+  let testsStarted = 0
+  let testsPassed = 0
+  let testsFailed = 0
+  let testsPending = 0
+
+  try {
+    if (typeof BeforeAll === 'function' && typeof AfterAll === 'function') {
+      BeforeAll(() => {
+        runStartTs = Date.now()
+        log.info('🧪 Test run starting')
+      })
+      AfterAll(() => {
+        const durationMs = Date.now() - runStartTs
+        const duration = (durationMs / 1000).toFixed(2)
+        log.info(
+          `🧪 Test run complete: ${testsPassed} passed, ${testsFailed} failed` +
+            (testsPending ? `, ${testsPending} pending` : '') +
+            ` (${duration}s, ${testsStarted} total)`
+        )
+        callbacks.onTestRunComplete?.({
+          passed: testsPassed,
+          failed: testsFailed,
+          pending: testsPending,
+          durationMs
+        })
+      })
+    }
+
+    // PickleStep has no `location.line`; only the gherkinDocument AST does.
+    // These maps bridge astNodeId → line for the dashboard's test-lens.
+    let stepKeywordById = new Map<string, string>()
+    let stepLineById = new Map<string, number>()
+    let scenarioLineById = new Map<string, number>()
+
+    Before(function (testCase: any) {
+      if (runStartTs === 0) {
+        runStartTs = Date.now()
+      }
+      const pickle = testCase?.pickle
+      const name: string = pickle?.name ?? 'unknown scenario'
+      const file: string | undefined = pickle?.uri
+      const featureName: string | undefined =
+        testCase?.gherkinDocument?.feature?.name
+      const featureLine = testCase?.gherkinDocument?.feature?.location?.line
+
+      stepKeywordById = new Map<string, string>()
+      stepLineById = new Map<string, number>()
+      scenarioLineById = new Map<string, number>()
+      const featureChildren = testCase?.gherkinDocument?.feature?.children ?? []
+      for (const child of featureChildren) {
+        if (child?.scenario?.id && child?.scenario?.location?.line) {
+          scenarioLineById.set(child.scenario.id, child.scenario.location.line)
+        }
+        const steps = child?.scenario?.steps ?? child?.background?.steps ?? []
+        for (const step of steps) {
+          if (step?.id && typeof step?.keyword === 'string') {
+            stepKeywordById.set(step.id, step.keyword)
+          }
+          if (step?.id && step?.location?.line) {
+            stepLineById.set(step.id, step.location.line)
+          }
+        }
+      }
+
+      const scenarioLineFromMap =
+        Array.isArray(pickle?.astNodeIds) &&
+        scenarioLineById.get(pickle.astNodeIds[0])
+      const scenarioLine = scenarioLineFromMap || pickle?.location?.line
+      const callSource = file
+        ? scenarioLine
+          ? `${file}:${scenarioLine}`
+          : `${file}:0`
+        : undefined
+      const featureCallSource = file
+        ? featureLine
+          ? `${file}:${featureLine}`
+          : `${file}:1`
+        : undefined
+
+      log.info(`▶ Scenario: "${name}"`)
+      testsStarted++
+      callbacks.onScenarioStart?.(
+        name,
+        file,
+        callSource,
+        featureName,
+        featureCallSource
+      )
+    })
+
+    if (typeof BeforeStep === 'function') {
+      BeforeStep(function (arg: any) {
+        const pickleStep = arg?.pickleStep
+        if (!pickleStep) {
+          return
+        }
+        const astId =
+          Array.isArray(pickleStep.astNodeIds) && pickleStep.astNodeIds[0]
+        const keyword = (astId && stepKeywordById.get(astId)) || ''
+        const text: string = pickleStep.text ?? ''
+        const title = `${keyword}${text}`.trim()
+        // Prefer the step-definition source over the .feature line — the
+        // dashboard's Source panel loads `file`, not `callSource`.
+        const stepDef = findStepDefinition(text)
+        const featureFile: string | undefined = arg?.pickle?.uri
+        const featureLineForStep =
+          (astId && stepLineById.get(astId)) || pickleStep?.location?.line
+        const file = stepDef ? stepDef.uri : featureFile
+        const callSource = stepDef
+          ? `${stepDef.uri}:${stepDef.line}`
+          : featureFile
+            ? featureLineForStep
+              ? `${featureFile}:${featureLineForStep}`
+              : `${featureFile}:0`
+            : undefined
+        callbacks.onTestStart(title, file, callSource)
+      })
+    }
+
+    if (typeof AfterStep === 'function') {
+      AfterStep(function (arg: any) {
+        const status = String(arg?.result?.status ?? '').toUpperCase()
+        let state: 'passed' | 'failed' | 'pending' | 'skipped' = 'passed'
+        if (
+          status === 'FAILED' ||
+          status === 'UNDEFINED' ||
+          status === 'AMBIGUOUS'
+        ) {
+          state = 'failed'
+        } else if (status === 'PENDING') {
+          state = 'pending'
+        } else if (status === 'SKIPPED') {
+          state = 'skipped'
+        }
+        callbacks.onTestEnd(state)
+      })
+    }
+
+    After(function (testCase: any) {
+      const status = String(testCase?.result?.status ?? '').toUpperCase()
+      let state: 'passed' | 'failed' | 'pending' = 'passed'
+      if (
+        status === 'FAILED' ||
+        status === 'UNDEFINED' ||
+        status === 'AMBIGUOUS'
+      ) {
+        state = 'failed'
+      } else if (status === 'PENDING' || status === 'SKIPPED') {
+        state = 'pending'
+      }
+      const icon = state === 'passed' ? '✓' : state === 'failed' ? '✗' : '○'
+      log.info(`${icon} Scenario: "${testCase?.pickle?.name ?? 'unknown'}"`)
+      if (state === 'passed') {
+        testsPassed++
+      } else if (state === 'failed') {
+        testsFailed++
+      } else {
+        testsPending++
+      }
+      callbacks.onScenarioEnd?.(state)
+    })
+
+    log.info(
+      '✓ Cucumber hooks registered — Before/After=scenario sub-suite, BeforeStep/AfterStep=Gherkin step tests'
+    )
+    return true
+  } catch (err) {
+    log.warn(`Failed to register cucumber hooks: ${errorMessage(err)}`)
+    return false
+  }
+}
diff --git a/packages/selenium-devtools/src/runnerHooks/jest.ts b/packages/selenium-devtools/src/runnerHooks/jest.ts
new file mode 100644
index 00000000..f52a4dc9
--- /dev/null
+++ b/packages/selenium-devtools/src/runnerHooks/jest.ts
@@ -0,0 +1,259 @@
+import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
+import { findTestLineInFile } from '../helpers/utils.js'
+import type { RunnerHookCallbacks } from '../types.js'
+
+const log = logger('@wdio/selenium-devtools:runnerHooks:jest')
+
+// `suppressedErrors` only catches failed expect()s; we track thrown errors
+// (e.g. selenium TimeoutError) separately to mark those tests failed too.
+
+// Jest/Vitest globals — kept as a local shape rather than a `declare global`
+// so consumers of this package don't pick up `describe`/`it` as ambient
+// globals when they may not actually be present.
+type JestFn = (...args: any[]) => any
+type JestGlobals = {
+  describe?: JestFn
+  test?: JestFn
+  it?: JestFn
+  beforeAll?: JestFn
+  afterAll?: JestFn
+  beforeEach?: JestFn
+  afterEach?: JestFn
+  expect?: { getState?: () => unknown }
+}
+export function tryRegisterJestHooks(callbacks: RunnerHookCallbacks): boolean {
+  // Double-cast required: built-in `globalThis` type doesn't include the
+  // runner globals, and they aren't structurally compatible.
+  const g = globalThis as unknown as JestGlobals
+  if (
+    typeof g.beforeEach !== 'function' ||
+    typeof g.afterEach !== 'function' ||
+    typeof g.expect?.getState !== 'function'
+  ) {
+    return false
+  }
+  let runStartTs = 0
+  let testsStarted = 0
+  let testsPassed = 0
+  let testsFailed = 0
+  let currentName = ''
+  // `currentTestName` is the space-joined describe path + test name (ambiguous);
+  // we capture the describe stack at registration to recover suite + inner name.
+  const describeStack: string[] = []
+  const testToDescribeStack = new Map<string, string[]>()
+  const testFailures = new Map<string, Error>()
+  const wrapWithDescribePush = <T extends (...args: any[]) => any>(
+    orig: T
+  ): T => {
+    const wrapped = ((name: string, fn: () => void, ...rest: unknown[]) => {
+      describeStack.push(name)
+      try {
+        return (orig as (...args: unknown[]) => unknown).call(
+          g,
+          name,
+          fn,
+          ...rest
+        )
+      } finally {
+        describeStack.pop()
+      }
+    }) as unknown as T
+    // Preserve .skip / .only / .each modifiers.
+    // Preserve `.skip` / `.only` / `.each` modifiers via index access. Casts
+    // are intentional — globals are untyped at this framework boundary.
+    const wrappedObj = wrapped as unknown as Record<string | symbol, unknown>
+    const origObj = orig as unknown as Record<string | symbol, unknown>
+    for (const k of Reflect.ownKeys(origObj)) {
+      try {
+        wrappedObj[k] = origObj[k]
+      } catch {
+        /* read-only own keys */
+      }
+    }
+    return wrapped
+  }
+  const wrapTestRegistrar = <T extends (...args: any[]) => any>(orig: T): T => {
+    const wrapped = ((name: string, fn: unknown, timeout?: number) => {
+      const stackAtRegistration = [...describeStack]
+      const jestKey = [...stackAtRegistration, name].join(' ')
+      const vitestKey = [...stackAtRegistration, name].join(' > ')
+      testToDescribeStack.set(jestKey, stackAtRegistration)
+      testToDescribeStack.set(vitestKey, stackAtRegistration)
+      let wrappedFn = fn
+      if (typeof fn === 'function') {
+        wrappedFn = function (this: unknown, ...fnArgs: unknown[]) {
+          // Key by inner test name — under Vitest the describe-stack
+          // capture isn't reliable (Vitest doesn't run describe bodies
+          // through our globalThis wrap), so the only stable identifier
+          // we share with afterEach is `name` itself.
+          const recordFailure = (err: Error) => {
+            testFailures.set(name, err)
+            testFailures.set(jestKey, err)
+            testFailures.set(vitestKey, err)
+          }
+          let result: unknown
+          try {
+            result = fn.apply(this, fnArgs)
+          } catch (err) {
+            recordFailure(err as Error)
+            throw err
+          }
+          if (
+            result &&
+            typeof (result as Promise<unknown>).then === 'function'
+          ) {
+            return (result as Promise<unknown>).catch((err: unknown) => {
+              recordFailure(err as Error)
+              throw err
+            })
+          }
+          return result
+        }
+      }
+      return (orig as (...args: unknown[]) => unknown).call(
+        g,
+        name,
+        wrappedFn,
+        timeout
+      )
+    }) as unknown as T
+    // Preserve `.skip` / `.only` / `.each` modifiers via index access. Casts
+    // are intentional — globals are untyped at this framework boundary.
+    const wrappedObj = wrapped as unknown as Record<string | symbol, unknown>
+    const origObj = orig as unknown as Record<string | symbol, unknown>
+    for (const k of Reflect.ownKeys(origObj)) {
+      try {
+        wrappedObj[k] = origObj[k]
+      } catch {
+        /* read-only own keys */
+      }
+    }
+    return wrapped
+  }
+  if (typeof g.describe === 'function') {
+    g.describe = wrapWithDescribePush(g.describe)
+  }
+  if (typeof g.test === 'function') {
+    g.test = wrapTestRegistrar(g.test)
+  }
+  if (typeof g.it === 'function') {
+    g.it = wrapTestRegistrar(g.it)
+  }
+  try {
+    if (typeof g.beforeAll === 'function' && typeof g.afterAll === 'function') {
+      g.beforeAll(() => {
+        runStartTs = Date.now()
+        log.info('🧪 Test run starting')
+      })
+      g.afterAll(() => {
+        const durationMs = Date.now() - runStartTs
+        const duration = (durationMs / 1000).toFixed(2)
+        log.info(
+          `🧪 Test run complete: ${testsPassed} passed, ${testsFailed} failed ` +
+            `(${duration}s, ${testsStarted} total)`
+        )
+        callbacks.onTestRunComplete?.({
+          passed: testsPassed,
+          failed: testsFailed,
+          pending: 0,
+          durationMs
+        })
+      })
+    }
+    g.beforeEach!(() => {
+      if (runStartTs === 0) {
+        runStartTs = Date.now()
+      }
+      const state = g.expect!.getState!() as {
+        currentTestName?: string
+        testPath?: string
+      }
+      const fullName = state?.currentTestName || ''
+      const file = state?.testPath || undefined
+      if (!fullName) {
+        return
+      }
+      // currentTestName: Jest joins describes with ' ', Vitest with ' > '.
+      const stack = testToDescribeStack.get(fullName) ?? []
+      let innerName = fullName
+      let suiteName: string | undefined
+      if (stack.length > 0) {
+        const jestPath = stack.join(' ')
+        const vitestPath = stack.join(' > ')
+        if (fullName.startsWith(jestPath + ' ')) {
+          innerName = fullName.slice(jestPath.length + 1)
+        } else if (fullName.startsWith(vitestPath + ' > ')) {
+          innerName = fullName.slice(vitestPath.length + 3)
+        }
+        suiteName = stack[0]
+      } else if (fullName.includes(' > ')) {
+        const segments = fullName.split(' > ')
+        innerName = segments[segments.length - 1]
+        suiteName = segments[0]
+      }
+      currentName = innerName
+      let callSource: string | undefined
+      if (file) {
+        const line = findTestLineInFile(file, innerName)
+        callSource = line ? `${file}:${line}` : `${file}:0`
+      }
+      let suiteCallSource: string | undefined
+      if (suiteName && file) {
+        const line = findTestLineInFile(file, suiteName, 'suite')
+        suiteCallSource = line ? `${file}:${line}` : `${file}:0`
+      }
+      log.info(`▶ Test: "${innerName}"`)
+      testsStarted++
+      callbacks.onTestStart(
+        innerName,
+        file,
+        callSource,
+        suiteName,
+        suiteCallSource
+      )
+    })
+    g.afterEach!(() => {
+      const state = g.expect!.getState!() as {
+        suppressedErrors?: unknown[]
+        currentTestName?: string
+      }
+      const fullName = state?.currentTestName || ''
+      // Try the recorded full-path keys first, then the inner test name —
+      // under Vitest the stack capture is empty so we keyed by inner name.
+      const innerKey =
+        fullName.split(' > ').pop() ?? fullName.split(' ').pop() ?? fullName
+      const thrown =
+        testFailures.get(fullName) ??
+        testFailures.get(fullName.replace(/ > /g, ' ')) ??
+        testFailures.get(fullName.replace(/ /g, ' > ')) ??
+        testFailures.get(innerKey)
+      const expectFailed =
+        Array.isArray(state?.suppressedErrors) &&
+        state.suppressedErrors.length > 0
+      const failed = !!thrown || expectFailed
+      if (thrown) {
+        testFailures.delete(fullName)
+        testFailures.delete(fullName.replace(/ > /g, ' '))
+        testFailures.delete(fullName.replace(/ /g, ' > '))
+        testFailures.delete(innerKey)
+      }
+      const finalState: 'passed' | 'failed' = failed ? 'failed' : 'passed'
+      const icon = finalState === 'passed' ? '✓' : '✗'
+      log.info(`${icon} Test: "${currentName || 'unknown'}"`)
+      if (finalState === 'passed') {
+        testsPassed++
+      } else {
+        testsFailed++
+      }
+      callbacks.onTestEnd(finalState)
+    })
+    log.info(
+      '✓ Jest hooks registered — startTest/endTest will fire automatically per test()'
+    )
+    return true
+  } catch (err) {
+    log.warn(`Failed to register jest hooks: ${errorMessage(err)}`)
+    return false
+  }
+}
diff --git a/packages/selenium-devtools/src/runnerHooks/mocha.ts b/packages/selenium-devtools/src/runnerHooks/mocha.ts
new file mode 100644
index 00000000..6bc9f7e1
--- /dev/null
+++ b/packages/selenium-devtools/src/runnerHooks/mocha.ts
@@ -0,0 +1,113 @@
+import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
+import { findTestLineInFile } from '../helpers/utils.js'
+import type { MochaTestCtx, RunnerHookCallbacks } from '../types.js'
+
+const log = logger('@wdio/selenium-devtools:runnerHooks:mocha')
+
+// Use beforeEach/afterEach — wrapping `it()` breaks `it.skip` / `it.only`.
+export function tryRegisterMochaHooks(callbacks: RunnerHookCallbacks): boolean {
+  // Double-cast: built-in `globalThis` lacks the mocha globals; kept local
+  // (not `declare global`) so consumers don't get them as ambient types.
+  const g = globalThis as unknown as {
+    beforeEach?: (fn: (this: { currentTest?: MochaTestCtx }) => void) => void
+    afterEach?: (fn: (this: { currentTest?: MochaTestCtx }) => void) => void
+    before?: (fn: () => void) => void
+    after?: (fn: () => void) => void
+  }
+  if (typeof g.beforeEach !== 'function' || typeof g.afterEach !== 'function') {
+    return false
+  }
+  let runStartTs = 0
+  let testsStarted = 0
+  let testsPassed = 0
+  let testsFailed = 0
+  let testsPending = 0
+  try {
+    if (typeof g.before === 'function' && typeof g.after === 'function') {
+      g.before(() => {
+        runStartTs = Date.now()
+        log.info('🧪 Test run starting')
+      })
+      g.after(() => {
+        const durationMs = Date.now() - runStartTs
+        const duration = (durationMs / 1000).toFixed(2)
+        log.info(
+          `🧪 Test run complete: ${testsPassed} passed, ${testsFailed} failed` +
+            (testsPending ? `, ${testsPending} pending` : '') +
+            ` (${duration}s, ${testsStarted} total)`
+        )
+        callbacks.onTestRunComplete?.({
+          passed: testsPassed,
+          failed: testsFailed,
+          pending: testsPending,
+          durationMs
+        })
+      })
+    }
+    g.beforeEach!(function (this: { currentTest?: MochaTestCtx }) {
+      // Fallback when `before` registered too late to fire.
+      if (runStartTs === 0) {
+        runStartTs = Date.now()
+      }
+      const test = this?.currentTest
+      if (!test?.title) {
+        return
+      }
+      let callSource: string | undefined
+      if (test.file) {
+        const line = findTestLineInFile(test.file, test.title)
+        callSource = line ? `${test.file}:${line}` : `${test.file}:0`
+      }
+      log.info(`▶ Test: "${test.title}"`)
+      testsStarted++
+      // Mocha's root suite has an empty title — skip so we don't blank the dashboard.
+      const parentTitle =
+        typeof test.parent?.title === 'string' && test.parent.title.length > 0
+          ? test.parent.title
+          : undefined
+      let suiteCallSource: string | undefined
+      if (parentTitle && test.file) {
+        const line = findTestLineInFile(test.file, parentTitle, 'suite')
+        suiteCallSource = line ? `${test.file}:${line}` : `${test.file}:0`
+      }
+      callbacks.onTestStart(
+        test.title,
+        test.file,
+        callSource,
+        parentTitle,
+        suiteCallSource
+      )
+    })
+    g.afterEach!(function (this: { currentTest?: MochaTestCtx }) {
+      const test = this?.currentTest
+      const state =
+        test?.state === 'failed'
+          ? 'failed'
+          : test?.state === 'passed'
+            ? 'passed'
+            : test?.state === 'pending'
+              ? 'pending'
+              : 'passed'
+      const icon = state === 'passed' ? '✓' : state === 'failed' ? '✗' : '○'
+      const duration =
+        typeof test?.duration === 'number' ? ` (${test.duration}ms)` : ''
+      log.info(`${icon} Test: "${test?.title ?? 'unknown'}"${duration}`)
+      if (state === 'passed') {
+        testsPassed++
+      } else if (state === 'failed') {
+        testsFailed++
+      } else if (state === 'pending') {
+        testsPending++
+      }
+      callbacks.onTestEnd(state)
+    })
+    log.info(
+      '✓ Mocha hooks registered — startTest/endTest will fire automatically per it()'
+    )
+    return true
+  } catch (err) {
+    log.warn(`Failed to register mocha hooks: ${errorMessage(err)}`)
+    return false
+  }
+}
diff --git a/packages/selenium-devtools/src/screencast.ts b/packages/selenium-devtools/src/screencast.ts
index 2f6287b6..590a89ba 100644
--- a/packages/selenium-devtools/src/screencast.ts
+++ b/packages/selenium-devtools/src/screencast.ts
@@ -1,98 +1,61 @@
 import logger from '@wdio/logger'
-import {
-  BLANK_FRAME_THRESHOLD_BYTES,
-  SCREENCAST_DEFAULTS
-} from './constants.js'
+import { ScreencastRecorderBase, errorMessage } from '@wdio/devtools-core'
+import { BLANK_FRAME_THRESHOLD_BYTES } from './constants.js'
 import { getDriverOriginals } from './driverPatcher.js'
-import type {
-  ScreencastFrame,
-  ScreencastOptions,
-  SeleniumDriverLike
-} from './types.js'
+import type { SeleniumDriverLike } from './types.js'
 
 const log = logger('@wdio/selenium-devtools:ScreencastRecorder')
 
-// Two strategies:
-//   1. CDP push (Chromium): listens to `Page.screencastFrame` events.
-//   2. Polling fallback: calls unwrapped `takeScreenshot()` at pollIntervalMs.
-// Frames buffer in memory and encode to WebM at stop().
-export class ScreencastRecorder {
-  #frames: ScreencastFrame[] = []
+/**
+ * Selenium-specific screencast recorder. Inherits the frame buffer, polling
+ * fallback, and public API from {@link ScreencastRecorderBase}; overrides the
+ * CDP hooks to use selenium-webdriver's `createCDPConnection('page')` API and
+ * listens directly on the underlying CDP WebSocket for `Page.screencastFrame`.
+ */
+export class ScreencastRecorder extends ScreencastRecorderBase<SeleniumDriverLike> {
   #cdp: any = undefined
   #cdpFrameListener: ((data: any) => void) | undefined
-  #pollTimer: ReturnType<typeof setInterval> | undefined
-  #isRecording = false
-  #options: Required<ScreencastOptions>
-  #startIndex = 0
-  #startMarkerSet = false
 
-  constructor(options: ScreencastOptions = {}) {
-    this.#options = { ...SCREENCAST_DEFAULTS, ...options }
+  protected override onPollingStarted(intervalMs: number): void {
+    log.info(
+      `✓ Screencast recording started (polling mode, ${intervalMs} ms interval)`
+    )
   }
 
-  async start(driver: SeleniumDriverLike): Promise<void> {
-    if (this.#isRecording) {
-      return
-    }
-    const cdpOk = await this.#startCdp(driver)
-    if (!cdpOk) {
-      await this.#startPolling(driver)
-    }
-  }
-
-  async stop(): Promise<void> {
-    if (!this.#isRecording) {
-      return
-    }
-    if (this.#cdp) {
-      await this.#stopCdp()
-    } else if (this.#pollTimer !== undefined) {
-      this.#stopPolling()
-    }
-    this.#isRecording = false
-  }
-
-  setStartMarker() {
-    if (!this.#startMarkerSet) {
-      this.#startMarkerSet = true
-      this.#startIndex = this.#frames.length
-    }
+  protected override onPollingStopped(frameCount: number): void {
+    log.info(`✓ Screencast stopped — ${frameCount} frame(s) collected`)
   }
 
-  get frames(): ScreencastFrame[] {
-    return this.#frames.slice(this.#startIndex)
+  protected override onUnavailable(err: unknown): void {
+    log.warn(
+      `Screencast unavailable (${errorMessage(err)}). Recording skipped.`
+    )
   }
 
-  get duration(): number {
-    const f = this.frames
-    if (f.length < 2) {
-      return 0
+  protected override async takeScreenshot(): Promise<string | null> {
+    const driver = this.driver
+    const takeShot = getDriverOriginals().takeScreenshot
+    if (!driver || !takeShot) {
+      return null
     }
-    return f[f.length - 1].timestamp - f[0].timestamp
-  }
-
-  get isRecording(): boolean {
-    return this.#isRecording
+    return takeShot(driver)
   }
 
-  // ─── CDP path (Chromium) ─────────────────────────────────────────────────
-
-  async #startCdp(driver: SeleniumDriverLike): Promise<boolean> {
-    if (typeof driver.createCDPConnection !== 'function') {
+  protected override async tryStartCdp(): Promise<boolean> {
+    const driver = this.driver
+    if (!driver || typeof driver.createCDPConnection !== 'function') {
       return false
     }
     try {
       const cdp = await driver.createCDPConnection('page')
       this.#cdp = cdp
 
-      // Listen for frames on the underlying WebSocket. Each CDP event arrives
-      // as a JSON message with method='Page.screencastFrame' and embedded
-      // params. We push to the frame buffer and ack so Chrome keeps streaming.
       const ws = cdp._wsConnection
       if (!ws || typeof ws.on !== 'function') {
         log.warn('CDP connection has no underlying WebSocket — falling back')
         return false
       }
+
       const onMessage = (raw: any) => {
         try {
           const payload = JSON.parse(raw.toString())
@@ -100,19 +63,14 @@ export class ScreencastRecorder {
             return
           }
           const params = payload.params || {}
-          const ts =
-            params.metadata?.timestamp !== undefined &&
-            params.metadata?.timestamp !== null
-              ? Math.round(params.metadata.timestamp * 1000)
-              : Date.now()
-          this.#frames.push({ data: params.data, timestamp: ts })
+          this.pushCdpFrame(params.data, params.metadata?.timestamp)
           // Anchor frame 0 at the first content-bearing frame to trim the
-          // leading about:blank dead-air.
-          if (!this.#startMarkerSet) {
+          // leading about:blank dead-air. Approximate decoded size: base64
+          // expands by ~33%, so multiply by 0.75 for a rough decoded byte count.
+          if (!this.hasStartMarker) {
             const decodedSize = Math.floor((params.data?.length ?? 0) * 0.75)
             if (decodedSize >= BLANK_FRAME_THRESHOLD_BYTES) {
-              this.#startIndex = Math.max(0, this.#frames.length - 1)
-              this.#startMarkerSet = true
+              this.markStartAtLatest()
             }
           }
           if (params.sessionId !== undefined) {
@@ -128,28 +86,27 @@ export class ScreencastRecorder {
       ws.on('message', onMessage)
 
       cdp.execute('Page.startScreencast', {
-        format: this.#options.captureFormat,
-        quality: this.#options.quality,
-        maxWidth: this.#options.maxWidth,
-        maxHeight: this.#options.maxHeight
+        format: this.options.captureFormat,
+        quality: this.options.quality,
+        maxWidth: this.options.maxWidth,
+        maxHeight: this.options.maxHeight
       })
 
-      this.#isRecording = true
       log.info('✓ Screencast recording started (CDP mode)')
       return true
     } catch (err) {
       log.info(
-        `CDP screencast unavailable (${(err as Error).message}); will try polling`
+        `CDP screencast unavailable (${errorMessage(err)}); will try polling`
       )
       return false
     }
   }
 
-  async #stopCdp(): Promise<void> {
+  protected override async tryStopCdp(): Promise<void> {
     try {
-      this.#cdp.execute('Page.stopScreencast')
+      this.#cdp?.execute('Page.stopScreencast')
     } catch (err) {
-      log.warn(`Screencast: error stopping CDP — ${(err as Error).message}`)
+      log.warn(`Screencast: error stopping CDP — ${errorMessage(err)}`)
     }
     try {
       if (this.#cdpFrameListener && this.#cdp?._wsConnection?.off) {
@@ -158,51 +115,8 @@ export class ScreencastRecorder {
     } catch {
       // detach best-effort
     }
-    log.info(`✓ Screencast stopped — ${this.#frames.length} frame(s) collected`)
+    log.info(`✓ Screencast stopped — ${this.buffer.length} frame(s) collected`)
     this.#cdp = undefined
     this.#cdpFrameListener = undefined
   }
-
-  // ─── Polling fallback (any browser) ──────────────────────────────────────
-
-  async #startPolling(driver: SeleniumDriverLike): Promise<void> {
-    const takeShot = getDriverOriginals().takeScreenshot
-    if (!takeShot) {
-      log.warn('Screencast unavailable — driver lacks takeScreenshot')
-      return
-    }
-    try {
-      const first = await takeShot(driver)
-      this.#frames.push({ data: first, timestamp: Date.now() })
-
-      const intervalMs = this.#options.pollIntervalMs
-      this.#pollTimer = setInterval(async () => {
-        try {
-          const data = await takeShot(driver)
-          this.#frames.push({ data, timestamp: Date.now() })
-        } catch {
-          this.#stopPolling()
-        }
-      }, intervalMs)
-
-      this.#isRecording = true
-      log.info(
-        `✓ Screencast recording started (polling mode, ${intervalMs} ms interval)`
-      )
-    } catch (err) {
-      log.warn(
-        `Screencast unavailable (${(err as Error).message}). Recording skipped.`
-      )
-    }
-  }
-
-  #stopPolling(): void {
-    if (this.#pollTimer !== undefined) {
-      clearInterval(this.#pollTimer)
-      this.#pollTimer = undefined
-      log.info(
-        `✓ Screencast stopped — ${this.#frames.length} frame(s) collected`
-      )
-    }
-  }
 }
diff --git a/packages/selenium-devtools/src/session.ts b/packages/selenium-devtools/src/session.ts
index 5c989169..84a3b058 100644
--- a/packages/selenium-devtools/src/session.ts
+++ b/packages/selenium-devtools/src/session.ts
@@ -1,20 +1,16 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { createRequire } from 'node:module'
 import logger from '@wdio/logger'
-import { WebSocket } from 'ws'
 import {
-  CONSOLE_METHODS,
-  LOG_SOURCES,
-  NAVIGATION_COMMANDS,
-  SPINNER_RE
-} from './constants.js'
-import {
-  stripAnsiCodes,
-  detectLogLevel,
+  SessionCapturerBase,
   createConsoleLogEntry,
-  chromeLogLevelToLogLevel
-} from './helpers/utils.js'
+  errorMessage,
+  loadInjectableScript,
+  pollUntilReady,
+  serializeError,
+  type LogSource
+} from '@wdio/devtools-core'
+import { WS_SCOPE } from '@wdio/devtools-shared'
+import { LOG_SOURCES, NAVIGATION_COMMANDS } from './constants.js'
+import { chromeLogLevelToLogLevel } from './helpers/utils.js'
 import { getDriverOriginals } from './driverPatcher.js'
 import type {
   CommandLog,
@@ -23,25 +19,10 @@ import type {
   SeleniumDriverLike
 } from './types.js'
 
-const require = createRequire(import.meta.url)
 const log = logger('@wdio/selenium-devtools:SessionCapturer')
 
-export class SessionCapturer {
-  #ws: WebSocket | undefined
-  #originalConsoleMethods: Record<
-    (typeof CONSOLE_METHODS)[number],
-    typeof console.log
-  >
-  #originalProcessMethods: {
-    stdoutWrite: typeof process.stdout.write
-    stderrWrite: typeof process.stderr.write
-  }
-  #isCapturingConsole = false
-  #isCapturingStream = false
-  #hasConnected = false
+export class SessionCapturer extends SessionCapturerBase {
   #driver: SeleniumDriverLike | undefined
-  #commandCounter = 0
-  #sentCommandIds = new Set<number>()
 
   // True once BiDi inspectors are attached — script-trace path skips streams.
   bidiActive = false
@@ -49,302 +30,92 @@ export class SessionCapturer {
   #clientConnectedWaiters: Array<() => void> = []
   #onClientDisconnected?: () => void
 
-  commandsLog: CommandLog[] = []
-  sources = new Map<string, string>()
-  consoleLogs: ConsoleLog[] = []
-  mutations: any[] = []
-  traceLogs: string[] = []
-  networkRequests: any[] = []
-  metadata?: any
-
   constructor(
     devtoolsOptions: { hostname?: string; port?: number } = {},
     driver?: SeleniumDriverLike
   ) {
-    const { port, hostname } = devtoolsOptions
-    this.#driver = driver
-    if (hostname && port) {
-      this.#ws = new WebSocket(`ws://${hostname}:${port}/worker`)
-
-      this.#ws.on('open', () => {
-        this.#hasConnected = true
-        log.info('✓ Worker WebSocket connected to backend')
-      })
-
-      this.#ws.on('message', (raw: Buffer | string) => {
-        try {
-          const parsed = JSON.parse(raw.toString())
-          if (parsed?.scope === 'clientConnected') {
-            this.#clientConnected = true
-            const waiters = this.#clientConnectedWaiters
-            this.#clientConnectedWaiters = []
-            for (const w of waiters) {
-              try {
-                w()
-              } catch {
-                /* ignore */
-              }
-            }
-          } else if (parsed?.scope === 'clientDisconnected') {
-            this.#onClientDisconnected?.()
-          }
-        } catch {
-          // ignore non-JSON messages
-        }
-      })
-
-      this.#ws.on('error', (err: unknown) =>
-        log.error(
-          `Couldn't connect to devtools backend: ${(err as Error).message}`
-        )
-      )
-
-      this.#ws.on('close', () => {
-        log.info('Worker WebSocket disconnected')
-      })
-    }
-
-    this.#originalConsoleMethods = {
-      log: console.log,
-      info: console.info,
-      warn: console.warn,
-      error: console.error
-    }
-    this.#originalProcessMethods = {
-      stdoutWrite: process.stdout.write.bind(process.stdout),
-      stderrWrite: process.stderr.write.bind(process.stderr)
-    }
-
-    this.#patchConsole()
-    this.#interceptProcessStreams()
-  }
-
-  setDriver(driver: SeleniumDriverLike) {
+    super(devtoolsOptions)
     this.#driver = driver
-  }
-
-  awaitClientConnected(): Promise<void> {
-    if (this.#clientConnected) {
-      return Promise.resolve()
-    }
-    return new Promise<void>((resolve) => {
-      this.#clientConnectedWaiters.push(resolve)
-    })
-  }
-
-  setClientDisconnectedHandler(fn: () => void) {
-    this.#onClientDisconnected = fn
-  }
 
-  // ---- console & terminal capture ------------------------------------------
-
-  #patchConsole() {
-    // Non-standard consoles (Jest CustomConsole, Vitest) reroute writes past
-    // our text filter and create a feedback loop — rely on stream interception.
+    // Skip console patching when running under Jest's CustomConsole / Vitest —
+    // those reroute writes through their own console, which causes our patched
+    // `console.*` to feed back through stream interception and loop. Stream
+    // interception alone is sufficient in that case.
     const protoName = Object.getPrototypeOf(console)?.constructor?.name
-    if (protoName && protoName !== 'Console') {
+    if (!protoName || protoName === 'Console') {
+      this.patchConsole()
+    } else {
       log.info(
         `Detected non-standard console (${protoName}) — skipping console patching, using stdout interception only`
       )
-      return
     }
-    CONSOLE_METHODS.forEach((method) => {
-      const originalMethod = this.#originalConsoleMethods[method]
-      console[method] = (...consoleArgs: any[]) => {
-        this.#isCapturingConsole = true
-        const result = originalMethod.apply(console, consoleArgs)
-        this.#isCapturingConsole = false
+    this.patchStreams()
+  }
 
-        const rawText = consoleArgs
-          .map((a) =>
-            typeof a === 'object' && a !== null ? JSON.stringify(a) : String(a)
-          )
-          .join(' ')
-        const cleanText = stripAnsiCodes(rawText).trim()
-        if (!cleanText) {
-          return result
-        }
-        if (this.#isInternalStreamLine(cleanText)) {
-          return result
-        }
+  protected override onWsOpen(): void {
+    log.info('✓ Worker WebSocket connected to backend')
+  }
 
-        const logEntry = createConsoleLogEntry(
-          method as LogLevel,
-          [cleanText],
-          LOG_SOURCES.TEST
-        )
-        this.consoleLogs.push(logEntry)
-        this.sendUpstream('consoleLogs', [logEntry])
-        return result
-      }
-    })
+  protected override onWsError(err: unknown): void {
+    log.error(`Couldn't connect to devtools backend: ${errorMessage(err)}`)
   }
 
-  // Drop lines that would feed back into sendUpstream and loop: pino JSON,
-  // [SESSION] markers, backend logs, Jest console.info framing.
-  #isInternalStreamLine(line: string): boolean {
-    const t = line.trim()
-    if (t.startsWith('{"') || t.startsWith('[SESSION]')) {
-      return true
-    }
-    if (t.includes('@wdio/devtools-backend')) {
-      return true
-    }
-    if (/^console\.(log|info|warn|error|debug|trace)$/.test(t)) {
-      return true
-    }
-    if (/^at\s.+:\d+:\d+\)?$/.test(t)) {
-      return true
-    }
-    return false
+  protected override onWsClose(): void {
+    log.info('Worker WebSocket disconnected')
   }
 
-  #interceptProcessStreams() {
-    const captureTerminalOutput = (outputData: string | Uint8Array) => {
-      if (this.#isCapturingStream) {
-        return
-      }
-      const outputText =
-        typeof outputData === 'string' ? outputData : outputData.toString()
-      if (!outputText?.trim()) {
-        return
-      }
-      this.#isCapturingStream = true
-      try {
-        const linesToCapture: string[] = []
-        for (const rawLine of outputText.split('\n')) {
-          const segments = rawLine.split('\r').filter((s) => s.trim())
-          const lastSegment = segments[segments.length - 1] ?? rawLine
-          const clean = stripAnsiCodes(lastSegment).trim()
-          if (
-            !clean ||
-            this.#isInternalStreamLine(clean) ||
-            SPINNER_RE.test(clean)
-          ) {
-            continue
-          }
-          linesToCapture.push(clean)
-        }
-        for (const clean of linesToCapture) {
-          const entry = createConsoleLogEntry(
-            detectLogLevel(clean),
-            [clean],
-            LOG_SOURCES.TERMINAL
-          )
-          this.consoleLogs.push(entry)
-          this.sendUpstream('consoleLogs', [entry])
+  protected override onWsMessage(msg: unknown): void {
+    const parsed = msg as { scope?: string } | null | undefined
+    if (parsed?.scope === WS_SCOPE.clientConnected) {
+      this.#clientConnected = true
+      const waiters = this.#clientConnectedWaiters
+      this.#clientConnectedWaiters = []
+      for (const w of waiters) {
+        try {
+          w()
+        } catch {
+          /* ignore */
         }
-      } finally {
-        this.#isCapturingStream = false
       }
+    } else if (parsed?.scope === WS_SCOPE.clientDisconnected) {
+      this.#onClientDisconnected?.()
     }
-
-    const interceptStreamWrite = (
-      stream: NodeJS.WriteStream,
-      original: (...args: any[]) => boolean
-    ) => {
-      const capturer = this
-      stream.write = function (chunk: any, ...rest: any[]): boolean {
-        const writeResult = original.call(stream, chunk, ...rest)
-        if (chunk && !capturer.#isCapturingConsole) {
-          captureTerminalOutput(chunk)
-        }
-        return writeResult
-      } as any
-    }
-
-    interceptStreamWrite(
-      process.stdout,
-      this.#originalProcessMethods.stdoutWrite
-    )
-    interceptStreamWrite(
-      process.stderr,
-      this.#originalProcessMethods.stderrWrite
-    )
   }
 
-  #restoreConsole() {
-    CONSOLE_METHODS.forEach((method) => {
-      console[method] = this.#originalConsoleMethods[method]
-    })
-  }
-
-  #restoreProcessStreams() {
-    process.stdout.write = this.#originalProcessMethods.stdoutWrite as any
-    process.stderr.write = this.#originalProcessMethods.stderrWrite as any
-  }
-
-  cleanup() {
-    this.#restoreConsole()
-    this.#restoreProcessStreams()
-  }
-
-  // ---- WebSocket plumbing --------------------------------------------------
-
-  get isReportingUpstream() {
-    return Boolean(this.#ws) && this.#ws?.readyState === WebSocket.OPEN
-  }
-
-  isConnected(): boolean {
-    return this.#ws?.readyState === WebSocket.OPEN
+  /**
+   * Push every captured line into the local `consoleLogs` array so it ends up
+   * in any future trace export, in addition to the live WS broadcast.
+   */
+  protected override onLine(
+    type: LogLevel,
+    args: string[],
+    source: LogSource
+  ): void {
+    const entry = createConsoleLogEntry(type, args, source)
+    this.consoleLogs.push(entry)
+    this.sendUpstream('consoleLogs', [entry])
   }
 
-  async waitForConnection(timeoutMs = 5000): Promise<boolean> {
-    if (!this.#ws) {
-      return false
-    }
-    if (this.#ws.readyState === WebSocket.OPEN) {
-      return true
-    }
-    return new Promise((resolve) => {
-      const timeout = setTimeout(() => {
-        log.warn(`WebSocket connection timeout after ${timeoutMs}ms`)
-        resolve(false)
-      }, timeoutMs)
-      this.#ws!.once('open', () => {
-        clearTimeout(timeout)
-        resolve(true)
-      })
-      this.#ws!.once('error', () => {
-        clearTimeout(timeout)
-        resolve(false)
-      })
-    })
+  setDriver(driver: SeleniumDriverLike) {
+    this.#driver = driver
   }
 
-  async closeWebSocket(): Promise<void> {
-    if (!this.#ws || this.#ws.readyState === WebSocket.CLOSED) {
-      return
+  awaitClientConnected(): Promise<void> {
+    if (this.#clientConnected) {
+      return Promise.resolve()
     }
     return new Promise<void>((resolve) => {
-      const timeout = setTimeout(resolve, 2000)
-      this.#ws!.once('close', () => {
-        clearTimeout(timeout)
-        resolve()
-      })
-      this.#ws!.close()
+      this.#clientConnectedWaiters.push(resolve)
     })
   }
 
-  sendUpstream(event: string, data: any) {
-    // Silent drops — logging here would loop back through stream interception.
-    if (!this.#ws || this.#ws.readyState !== WebSocket.OPEN) {
-      return
-    }
-    try {
-      this.#ws.send(JSON.stringify({ scope: event, data }))
-    } catch {
-      /* teardown */
-    }
+  setClientDisconnectedHandler(fn: () => void) {
+    this.#onClientDisconnected = fn
   }
 
-  // ---- command capture -----------------------------------------------------
+  // ---- WebSocket plumbing --------------------------------------------------
 
-  #serializeError(error: Error | undefined) {
-    return error
-      ? { name: error.name, message: error.message, stack: error.stack }
-      : undefined
-  }
+  // ---- command capture -----------------------------------------------------
 
   async captureCommand(
     command: string,
@@ -355,7 +126,7 @@ export class SessionCapturer {
     callSource?: string,
     timestamp?: number
   ): Promise<CommandLog & { _id?: number }> {
-    const commandId = this.#commandCounter++
+    const commandId = this.commandCounter++
     // `id` is the stable lookup key — chained calls share a ms timestamp,
     // so timestamp-based matching rewrites the wrong entry on async updates.
     const entry: CommandLog & { _id?: number } = {
@@ -364,7 +135,7 @@ export class SessionCapturer {
       command,
       args,
       result,
-      error: this.#serializeError(error),
+      error: serializeError(error),
       timestamp: timestamp || Date.now(),
       callSource,
       testUid
@@ -373,24 +144,6 @@ export class SessionCapturer {
     return entry
   }
 
-  sendCommand(command: CommandLog & { _id?: number }) {
-    if (command._id !== undefined && !this.#sentCommandIds.has(command._id)) {
-      this.#sentCommandIds.add(command._id)
-      const toSend = { ...command }
-      delete toSend._id
-      this.sendUpstream('commands', [toSend])
-    }
-  }
-
-  sendReplaceCommand(
-    oldTimestamp: number,
-    command: CommandLog & { _id?: number }
-  ) {
-    const toSend = { ...command }
-    delete toSend._id
-    this.sendUpstream('replaceCommand', { oldTimestamp, command: toSend })
-  }
-
   /** Update an existing entry in place (matched by `_id`) for retry coalesce. */
   replaceCommand(
     oldId: number,
@@ -403,23 +156,23 @@ export class SessionCapturer {
     timestamp?: number
   ): { entry: CommandLog & { _id?: number }; oldTimestamp: number } {
     const idx = this.commandsLog.findIndex(
-      (c: any) => (c as CommandLog & { _id?: number })._id === oldId
+      (c) => (c as CommandLog & { _id?: number })._id === oldId
     )
     const oldTimestamp =
-      idx !== -1 ? ((this.commandsLog[idx] as any).timestamp ?? 0) : 0
+      idx !== -1 ? (this.commandsLog[idx]?.timestamp ?? 0) : 0
     if (idx === -1) {
-      const fresh = {
-        _id: this.#commandCounter++,
-        id: undefined as unknown as number,
+      const newId = this.commandCounter++
+      const fresh: CommandLog & { _id?: number; id?: number } = {
+        _id: newId,
+        id: newId,
         command,
         args,
         result,
-        error: this.#serializeError(error),
+        error: serializeError(error),
         timestamp: timestamp || Date.now(),
         callSource,
         testUid
-      } as CommandLog & { _id?: number }
-      ;(fresh as any).id = fresh._id
+      }
       this.commandsLog.push(fresh)
       return { entry: fresh, oldTimestamp: 0 }
     }
@@ -427,10 +180,10 @@ export class SessionCapturer {
       _id?: number
       id?: number
     }
-    previous.command = command as any
+    previous.command = command
     previous.args = args
     previous.result = result
-    previous.error = this.#serializeError(error) as any
+    previous.error = serializeError(error)
     previous.timestamp = timestamp || Date.now()
     previous.callSource = callSource
     previous.testUid = testUid
@@ -449,26 +202,15 @@ export class SessionCapturer {
       const data = await fn(driver)
       return data || null
     } catch (err) {
-      log.warn(`[screenshot] Failed: ${(err as Error).message}`)
+      log.warn(`[screenshot] Failed: ${errorMessage(err)}`)
       return null
     }
   }
 
   // ---- source files --------------------------------------------------------
 
-  async captureSource(filePath: string) {
-    if (this.sources.has(filePath)) {
-      return
-    }
-    try {
-      const source = await fs.readFile(filePath, 'utf-8')
-      this.sources.set(filePath, source.toString())
-      this.sendUpstream('sources', { [filePath]: source.toString() })
-    } catch (err) {
-      log.warn(
-        `Failed to read source file ${filePath}: ${(err as Error).message}`
-      )
-    }
+  protected override onSourceReadError(filePath: string, err: unknown): void {
+    log.warn(`Failed to read source file ${filePath}: ${errorMessage(err)}`)
   }
 
   // ---- browser-side trace (script injection) -------------------------------
@@ -480,34 +222,27 @@ export class SessionCapturer {
       return
     }
     try {
-      const scriptPath = require.resolve('@wdio/devtools-script')
-      const scriptDir = path.dirname(scriptPath)
-      const preloadScriptPath = path.join(scriptDir, 'script.js')
-      let scriptContent = await fs.readFile(preloadScriptPath, 'utf-8')
-      // Wrap top-level await so it can run inside a <script> body.
-      scriptContent = `(async function() { ${scriptContent} })()`
-
+      const scriptContent = await loadInjectableScript()
       await exec(
         driver,
         "var s=document.createElement('script');s.textContent=arguments[0];document.head.appendChild(s);return true;",
         scriptContent
       )
-
-      for (let i = 0; i < 5; i++) {
-        await new Promise((r) => setTimeout(r, 200))
-        const ready = await exec(
+      const ready = await pollUntilReady(async () => {
+        const r = await exec(
           driver,
           'return typeof window.wdioTraceCollector !== "undefined";'
         )
-        if (ready === true) {
-          log.info('✓ Script injected and collector ready')
-          return
-        }
+        return r === true
+      })
+      if (ready) {
+        log.info('✓ Script injected and collector ready')
+      } else {
+        log.warn('Script injection may have failed — collector not found')
       }
-      log.warn('Script injection may have failed — collector not found')
     } catch (err) {
       // Driver torn down between navigation and deferred trace work.
-      const msg = (err as Error).message ?? ''
+      const msg = errorMessage(err)
       if (
         msg.includes('ECONNREFUSED') ||
         msg.includes('no such session') ||
@@ -540,43 +275,12 @@ export class SessionCapturer {
       if (!traceData) {
         return
       }
-      const { mutations, traceLogs, consoleLogs, networkRequests, metadata } =
-        traceData
-
-      if (metadata) {
-        this.metadata = { ...this.metadata, ...metadata }
-        this.sendUpstream('metadata', this.metadata)
-      }
-      if (
-        !this.bidiActive &&
-        Array.isArray(consoleLogs) &&
-        consoleLogs.length > 0
-      ) {
-        const tagged = consoleLogs.map((e: any) => ({
-          ...e,
-          source: LOG_SOURCES.BROWSER
-        }))
-        this.consoleLogs.push(...tagged)
-        this.sendUpstream('consoleLogs', tagged)
-      }
-      if (
-        !this.bidiActive &&
-        Array.isArray(networkRequests) &&
-        networkRequests.length > 0
-      ) {
-        this.networkRequests.push(...networkRequests)
-        this.sendUpstream('networkRequests', networkRequests)
-      }
-      if (Array.isArray(mutations) && mutations.length > 0) {
-        this.mutations.push(...mutations)
-        this.sendUpstream('mutations', mutations)
-      }
-      if (Array.isArray(traceLogs) && traceLogs.length > 0) {
-        this.traceLogs.push(...traceLogs)
-        this.sendUpstream('logs', traceLogs)
-      }
+      this.processTracePayload(traceData as Record<string, unknown>, {
+        skipConsoleLogs: this.bidiActive,
+        skipNetworkRequests: this.bidiActive
+      })
     } catch (err) {
-      const msg = (err as Error).message ?? ''
+      const msg = errorMessage(err)
       if (
         msg.includes('ECONNREFUSED') ||
         msg.includes('no such session') ||
diff --git a/packages/selenium-devtools/src/types.ts b/packages/selenium-devtools/src/types.ts
index cc55695b..02b432b2 100644
--- a/packages/selenium-devtools/src/types.ts
+++ b/packages/selenium-devtools/src/types.ts
@@ -1,3 +1,19 @@
+// Selenium-specific types live here. Cross-package types come from @wdio/devtools-shared.
+
+export {
+  TraceType,
+  type CommandLog,
+  type ConsoleLog,
+  type DocumentInfo,
+  type LogLevel,
+  type Metadata,
+  type NetworkRequest,
+  type PerformanceData,
+  type SuiteStats,
+  type TestStats,
+  type TestStatus
+} from '@wdio/devtools-shared'
+
 export interface DevToolsOptions {
   port?: number
   hostname?: string
@@ -17,150 +33,10 @@ export interface DevToolsOptions {
   headless?: boolean
 }
 
-export interface ScreencastFrame {
-  /** Base64-encoded image data — JPEG/PNG. */
-  data: string
-  /** Unix timestamp in milliseconds. */
-  timestamp: number
-}
-
-export interface ScreencastOptions {
-  /** Enable screencast recording for this session (default: false). */
-  enabled?: boolean
-  /** Image format for individual frames (default: 'jpeg'). Chromium-only. */
-  captureFormat?: 'jpeg' | 'png'
-  /** JPEG quality 0–100 (default: 70). Chromium-only. */
-  quality?: number
-  /** Max frame width in px Chrome sends over CDP (default: 1280). Chromium-only. */
-  maxWidth?: number
-  /** Max frame height in px Chrome sends over CDP (default: 720). Chromium-only. */
-  maxHeight?: number
-  /**
-   * Polling interval for non-Chromium fallback (default: 200 ms).
-   * Used when CDP isn't available — calls driver.takeScreenshot() at this rate.
-   */
-  pollIntervalMs?: number
-}
-
-export interface CommandLog {
-  command: string
-  args: any[]
-  result?: any
-  error?: { name: string; message: string; stack?: string }
-  timestamp: number
-  callSource?: string
-  screenshot?: string
-  testUid?: string
-  performance?: PerformanceData
-  cookies?: string
-  documentInfo?: DocumentInfo
-  // Stable id used for replaceCommand reconciliation (timestamps collide on
-  // chained calls within the same millisecond).
-  id?: number
-}
-
-export interface PerformanceData {
-  navigation?: {
-    url: string
-    timing: {
-      loadTime?: number
-      domReady?: number
-      responseTime?: number
-      dnsLookup?: number
-      tcpConnection?: number
-      serverResponse?: number
-    }
-  }
-  resources?: Array<{
-    url: string
-    duration: number
-    size: number
-    type: string
-    startTime: number
-    responseEnd: number
-  }>
-}
-
-export interface DocumentInfo {
-  url: string
-  title: string
-  headers: { userAgent: string; language: string; platform: string }
-  documentInfo: { readyState: string; referrer: string; characterSet: string }
-}
-
-export type LogLevel = 'trace' | 'debug' | 'log' | 'info' | 'warn' | 'error'
-
-export interface ConsoleLog {
-  timestamp: number
-  type: LogLevel
-  args: any[]
-  source: string
-}
-
-export interface TestStats {
-  uid: string
-  cid: string
-  title: string
-  fullTitle: string
-  parent: string
-  state: 'passed' | 'failed' | 'skipped' | 'pending' | 'running'
-  start: Date
-  end: Date | null
-  type: 'test'
-  file: string
-  retries: number
-  _duration: number
-  error?: { name: string; message: string; stack?: string }
-  hooks?: any[]
-  callSource?: string
-}
-
-export interface SuiteStats {
-  uid: string
-  cid: string
-  title: string
-  fullTitle: string
-  type: 'suite'
-  file: string
-  start: Date
-  state?: 'pending' | 'running' | 'passed' | 'failed' | 'skipped'
-  end?: Date | null
-  tests: (string | TestStats)[]
-  suites: SuiteStats[]
-  hooks: any[]
-  _duration: number
-  parent?: string
-  callSource?: string
-}
-
-export enum TraceType {
-  Testrunner = 'testrunner'
-}
-
-export interface Metadata {
-  type: TraceType
-  url?: string
-  options?: any
-  capabilities?: any
-  viewport?: any
-}
-
-export interface NetworkRequest {
-  id: string
-  url: string
-  method: string
-  status?: number
-  statusText?: string
-  timestamp: number
-  startTime: number
-  endTime?: number
-  time?: number
-  type: string
-  requestHeaders?: Record<string, string>
-  responseHeaders?: Record<string, string>
-  size?: number
-  error?: string
-}
+// ScreencastFrame, ScreencastOptions hoisted to @wdio/devtools-shared; re-exported
+// here for backwards compatibility with existing selenium-internal imports.
+import type { ScreencastOptions } from '@wdio/devtools-shared'
+export type { ScreencastFrame, ScreencastOptions } from '@wdio/devtools-shared'
 
 /**
  * Minimal shape of a selenium-webdriver `WebDriver` instance that the plugin
@@ -228,6 +104,8 @@ export interface ElementOriginals {
 
 // ─── bidi ───────────────────────────────────────────────────────────────────
 
+import type { ConsoleLog, NetworkRequest } from '@wdio/devtools-shared'
+
 export interface BidiHandlerSinks {
   pushConsoleLog: (entry: ConsoleLog) => void
   pushNetworkRequest: (entry: NetworkRequest) => void
diff --git a/packages/selenium-devtools/tests/index.test.ts b/packages/selenium-devtools/tests/index.test.ts
index da255cff..93bcc6f2 100644
--- a/packages/selenium-devtools/tests/index.test.ts
+++ b/packages/selenium-devtools/tests/index.test.ts
@@ -291,7 +291,7 @@ describe('SessionCapturer', () => {
       'log'
     ])
     expect(captured.every((e) => e.source === LOG_SOURCES.TEST)).toBe(true)
-    expect(captured[4].args[0]).toBe('payload {"id":1,"nested":{"x":2}}')
+    expect(captured[4].args).toEqual(['payload', '{"id":1,"nested":{"x":2}}'])
 
     capturer.cleanup()
     expect(console.log).toBe(originalLog)
diff --git a/packages/selenium-devtools/tsconfig.json b/packages/selenium-devtools/tsconfig.json
index c07e1902..a4b89587 100644
--- a/packages/selenium-devtools/tsconfig.json
+++ b/packages/selenium-devtools/tsconfig.json
@@ -11,7 +11,8 @@
     "strict": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "ignoreDeprecations": "6.0"
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist", "example"]
diff --git a/packages/service/package.json b/packages/service/package.json
index f62b2287..d53f38bf 100644
--- a/packages/service/package.json
+++ b/packages/service/package.json
@@ -46,6 +46,7 @@
     "fluent-ffmpeg": "^2.1.3",
     "import-meta-resolve": "^4.1.0",
     "stack-trace": "1.0.0-pre2",
+    "stacktrace-parser": "^0.1.11",
     "ws": "^8.18.3"
   },
   "license": "MIT",
@@ -55,6 +56,8 @@
     "@types/fluent-ffmpeg": "^2.1.27",
     "@types/stack-trace": "^0.0.33",
     "@types/ws": "^8.18.1",
+    "@wdio/devtools-core": "workspace:^",
+    "@wdio/devtools-shared": "workspace:^",
     "@wdio/globals": "9.27.0",
     "@wdio/protocols": "9.27.0",
     "typescript": "6.0.2",
diff --git a/packages/service/src/bidi-listeners.ts b/packages/service/src/bidi-listeners.ts
new file mode 100644
index 00000000..c51c9ded
--- /dev/null
+++ b/packages/service/src/bidi-listeners.ts
@@ -0,0 +1,47 @@
+import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
+import type { SessionCapturer } from './session.js'
+
+const log = logger('@wdio/devtools-service:bidi-listeners')
+
+/**
+ * Subscribe a SessionCapturer to the BiDi event stream coming off a
+ * WebdriverIO browser — network request lifecycle (3 events) + browser
+ * console (`log.entryAdded`). Idempotent only in the sense that the caller
+ * should gate it (e.g. with a one-shot flag); this function will register a
+ * fresh listener on each call.
+ *
+ * Returns nothing. Errors during the optional `sessionSubscribe(log)` call
+ * are logged but non-fatal — WDIO auto-subscribes to network events; only
+ * log events need the explicit subscribe.
+ */
+export function attachBidiListeners(
+  browser: WebdriverIO.Browser,
+  capturer: SessionCapturer
+): void {
+  log.info('Setting up BiDi network event listeners...')
+
+  browser.on('network.beforeRequestSent', (event: any) => {
+    capturer.handleNetworkRequestStarted(event)
+  })
+  browser.on('network.responseCompleted', (event: any) => {
+    capturer.handleNetworkResponseCompleted(event)
+  })
+  browser.on('network.fetchError', (event: any) => {
+    log.info(`>>> BiDi fetchError - keys: ${Object.keys(event).join(', ')}`)
+    capturer.handleNetworkFetchError(event)
+  })
+  browser.on('log.entryAdded', (event: any) => {
+    capturer.handleLogEntryAdded(event)
+  })
+
+  // WDIO auto-subscribes to network events but not log events.
+  try {
+    // sessionSubscribe is augmented onto WebdriverIO.Browser in types.ts.
+    browser.sessionSubscribe?.({ events: ['log.entryAdded'] })
+  } catch (err) {
+    log.warn(`Could not subscribe to log.entryAdded: ${errorMessage(err)}`)
+  }
+
+  log.info('✓ BiDi network + log event listeners registered')
+}
diff --git a/packages/service/src/constants.ts b/packages/service/src/constants.ts
index fd27b2ed..07893d4b 100644
--- a/packages/service/src/constants.ts
+++ b/packages/service/src/constants.ts
@@ -1,13 +1,8 @@
-import type { ScreencastOptions } from './types.js'
+import type { ParserPlugin } from '@babel/parser'
 
-export const SCREENCAST_DEFAULTS: Required<ScreencastOptions> = {
-  enabled: false,
-  captureFormat: 'jpeg',
-  quality: 70,
-  maxWidth: 1280,
-  maxHeight: 720,
-  pollIntervalMs: 200
-}
+// SCREENCAST_DEFAULTS hoisted to @wdio/devtools-shared; re-exported for
+// backwards compatibility with existing service-internal imports.
+export { SCREENCAST_DEFAULTS } from '@wdio/devtools-shared'
 
 export const PAGE_TRANSITION_COMMANDS: string[] = [
   'url',
@@ -16,43 +11,15 @@ export const PAGE_TRANSITION_COMMANDS: string[] = [
   'click'
 ]
 
-/**
- * Regular expression to strip ANSI escape codes from terminal output
- */
-export const ANSI_REGEX = /\x1b\[[0-9;]*m/g
-
-/**
- * Console method types for log capturing
- */
-export const CONSOLE_METHODS = ['log', 'info', 'warn', 'error'] as const
-
-/**
- * Log level detection patterns with priority order (highest to lowest)
- */
-export const LOG_LEVEL_PATTERNS: ReadonlyArray<{
-  level: 'trace' | 'debug' | 'info' | 'warn' | 'error'
-  pattern: RegExp
-}> = [
-  { level: 'trace', pattern: /\btrace\b/i },
-  { level: 'debug', pattern: /\bdebug\b/i },
-  { level: 'info', pattern: /\binfo\b/i },
-  { level: 'warn', pattern: /\bwarn(ing)?\b/i },
-  { level: 'error', pattern: /\berror\b/i }
-] as const
-
-/**
- * Visual indicators that suggest error-level logs
- */
-export const ERROR_INDICATORS = ['✗', 'failed', 'failure'] as const
-
-/**
- * Console log source types
- */
-export const LOG_SOURCES = {
-  BROWSER: 'browser',
-  TEST: 'test',
-  TERMINAL: 'terminal'
-} as const
+// Console capture constants are defined in @wdio/devtools-core; re-exported
+// here so existing imports from ./constants.js continue to work.
+export {
+  ANSI_REGEX,
+  CONSOLE_METHODS,
+  LOG_LEVEL_PATTERNS,
+  ERROR_INDICATORS,
+  LOG_SOURCES
+} from '@wdio/devtools-core'
 
 export const DEFAULT_LAUNCH_CAPS: WebdriverIO.Capabilities = {
   browserName: 'chrome',
@@ -110,7 +77,7 @@ export const PARSE_PLUGINS = [
   'decorators-legacy',
   'classProperties',
   'dynamicImport'
-] as const
+] as const satisfies readonly ParserPlugin[]
 
 /**
  * Test framework identifiers
diff --git a/packages/service/src/index.ts b/packages/service/src/index.ts
index 3dffebef..9c97bdab 100644
--- a/packages/service/src/index.ts
+++ b/packages/service/src/index.ts
@@ -3,6 +3,7 @@ import fs from 'node:fs/promises'
 import path from 'node:path'
 
 import logger from '@wdio/logger'
+import { errorMessage } from '@wdio/devtools-core'
 import { SevereServiceError } from 'webdriverio'
 import type { Services, Reporters, Capabilities, Options } from '@wdio/types'
 import type { WebDriverCommands } from '@wdio/protocols'
@@ -12,14 +13,14 @@ import { TestReporter } from './reporter.js'
 import { DevToolsAppLauncher } from './launcher.js'
 import { getBrowserObject, isUserSpecFile } from './utils.js'
 import { ScreencastRecorder } from './screencast.js'
-import { encodeToVideo } from './video-encoder.js'
+import { attachBidiListeners } from './bidi-listeners.js'
+import { finalizeScreencast } from '@wdio/devtools-core'
 import { parse } from 'stack-trace'
 import {
   type TraceLog,
   TraceType,
   type ServiceOptions,
-  type ScreencastOptions,
-  type ScreencastInfo
+  type ScreencastOptions
 } from './types.js'
 import { INTERNAL_COMMANDS, CONTEXT_CHANGE_COMMANDS } from './constants.js'
 
@@ -33,85 +34,8 @@ type CommandFrame = {
   callSource?: string
 }
 
-/**
- * Setup WebdriverIO Devtools hook for standalone instances
- */
-export function setupForDevtools(opts: Options.WebdriverIO) {
-  let browserCaptured = false
-  const service = new DevToolsHookService()
-  service.captureType = TraceType.Standalone
-
-  // In v9, the `opts` object itself contains the capabilities.
-  // The `beforeSession` hook expects the config and the capabilities.
-  service.beforeSession(opts, opts as Capabilities.W3CCapabilities)
-
-  opts.beforeCommand = Array.isArray(opts.beforeCommand)
-    ? opts.beforeCommand
-    : opts.beforeCommand
-      ? [opts.beforeCommand]
-      : []
-  opts.beforeCommand.push(async function captureBrowserInstance(
-    this: WebdriverIO.Browser,
-    command: keyof WebDriverCommands
-  ) {
-    if (!browserCaptured) {
-      browserCaptured = true
-      service.before(
-        this.capabilities as Capabilities.W3CCapabilities,
-        [],
-        this
-      )
-    }
-
-    /**
-     * capture trace on `deleteSession` since we can't do it in `afterCommand` as the session
-     * would be terminated by then
-     */
-    if (command === 'deleteSession') {
-      await service.after()
-    }
-  }, service.beforeCommand.bind(service))
-
-  /**
-   * register after command hook
-   */
-  opts.afterCommand = Array.isArray(opts.afterCommand)
-    ? opts.afterCommand
-    : opts.afterCommand
-      ? [opts.afterCommand]
-      : []
-  opts.afterCommand.push(service.afterCommand.bind(service))
-
-  /**
-   * return modified session configuration
-   */
-  return opts
-}
-
-function detectInvocationConfigPath(): string | undefined {
-  const envPath = process.env.DEVTOOLS_WDIO_CONFIG
-  if (envPath) {
-    return path.isAbsolute(envPath)
-      ? envPath
-      : path.resolve(process.cwd(), envPath)
-  }
-  const argv = process.argv
-  for (let i = 0; i < argv.length - 1; i++) {
-    if (argv[i] === '--config' || argv[i] === '-c') {
-      const next = argv[i + 1]
-      if (next && /\.(conf|config)\.(ts|js|cjs|mjs)$/i.test(next)) {
-        return path.isAbsolute(next) ? next : path.resolve(process.cwd(), next)
-      }
-    }
-  }
-  const positional = argv.find((a) => /\.conf\.(ts|js|cjs|mjs)$/i.test(a))
-  if (!positional) {
-    return undefined
-  }
-  return path.isAbsolute(positional)
-    ? positional
-    : path.resolve(process.cwd(), positional)
-}
+export { setupForDevtools } from './standalone.js'
+import { detectInvocationConfigPath } from './standalone.js'
 
 export default class DevToolsHookService implements Services.ServiceInstance {
   #testReporters: TestReporter[] = []
@@ -167,7 +91,7 @@ export default class DevToolsHookService implements Services.ServiceInstance {
       await this.#injectScriptSync(browser)
     } catch (err) {
       log.error(
-        `Failed to inject script at session start: ${(err as Error).message}`
+        `Failed to inject script at session start: ${errorMessage(err)}`
       )
     }
 
@@ -270,38 +194,7 @@ export default class DevToolsHookService implements Services.ServiceInstance {
     // Set up BiDi listeners on first command (before any actual commands are executed)
     if (!this.#bidiListenersSetup && this.#browser.isBidi) {
       this.#bidiListenersSetup = true
-      log.info('Setting up BiDi network event listeners...')
-
-      // Listen for network events
-      this.#browser.on('network.beforeRequestSent', (event: any) => {
-        this.#sessionCapturer.handleNetworkRequestStarted(event)
-      })
-
-      this.#browser.on('network.responseCompleted', (event: any) => {
-        this.#sessionCapturer.handleNetworkResponseCompleted(event)
-      })
-
-      this.#browser.on('network.fetchError', (event: any) => {
-        log.info(`>>> BiDi fetchError - keys: ${Object.keys(event).join(', ')}`)
-        this.#sessionCapturer.handleNetworkFetchError(event)
-      })
-
-      this.#browser.on('log.entryAdded', (event: any) => {
-        this.#sessionCapturer.handleLogEntryAdded(event)
-      })
-
-      // WDIO auto-subscribes to network events but not log events.
-      try {
-        ;(this.#browser as any).sessionSubscribe?.({
-          events: ['log.entryAdded']
-        })
-      } catch (err) {
-        log.warn(
-          `Could not subscribe to log.entryAdded: ${(err as Error).message}`
-        )
-      }
-
-      log.info('✓ BiDi network + log event listeners registered')
+      attachBidiListeners(this.#browser, this.#sessionCapturer)
     }
 
     /**
@@ -423,8 +316,8 @@ export default class DevToolsHookService implements Services.ServiceInstance {
       consoleLogs: this.#sessionCapturer.consoleLogs,
       networkRequests: this.#sessionCapturer.networkRequests,
       metadata: {
-        type: this.captureType,
         ...this.#sessionCapturer.metadata!,
+        type: this.captureType,
         options,
         capabilities: this.#browser.capabilities as Capabilities.W3CCapabilities
       },
@@ -479,7 +372,9 @@ export default class DevToolsHookService implements Services.ServiceInstance {
    * Rely on `rootDir` instead (it is set automatically by WDIO).
    */
   get #outputDir(): string {
-    const opts = this.#browser?.options as any
+    const opts = this.#browser?.options as
+      | { outputDir?: string; rootDir?: string }
+      | undefined
     return opts?.outputDir || opts?.rootDir || process.cwd()
   }
 
@@ -492,38 +387,21 @@ export default class DevToolsHookService implements Services.ServiceInstance {
     if (!this.#screencastRecorder) {
       return
     }
-
-    await this.#screencastRecorder.stop()
-
-    // Skip ghost sessions: browser.reloadSession() creates a new session at the
-    // end of a test run that has no steps — it captures at most a handful of
-    // frames before teardown. Require at least 5 frames so we don't produce
+    // Skip ghost sessions: browser.reloadSession() creates a new session at
+    // the end of a test run that has no steps — it captures at most a handful
+    // of frames before teardown. Require at least 5 frames so we don't produce
     // empty videos for these ephemeral sessions.
-    if (this.#screencastRecorder.frames.length < 5) {
-      return
-    }
-
-    const outputDir = this.#outputDir
-    const videoFile = `wdio-video-${sessionId}.webm`
-    const videoPath = path.join(outputDir, videoFile)
-    try {
-      await encodeToVideo(this.#screencastRecorder.frames, videoPath, {
-        captureFormat: this.#screencastOptions?.captureFormat
-      })
-      const screencastInfo: ScreencastInfo = {
-        sessionId,
-        videoPath,
-        videoFile,
-        frameCount: this.#screencastRecorder.frames.length,
-        duration: this.#screencastRecorder.duration
-      }
-      // Notify the backend (and then the UI) that a video is ready.
-      // The backend stores the absolute videoPath and exposes it via
-      // GET /api/video/:sessionId, forwarding only { sessionId } to the UI.
-      this.#sessionCapturer.sendUpstream('screencast', screencastInfo)
-    } catch (encodeErr) {
-      log.warn(`Screencast encode failed: ${(encodeErr as Error).message}`)
-    }
+    await finalizeScreencast({
+      recorder: this.#screencastRecorder,
+      sessionId,
+      filenamePrefix: 'wdio-video',
+      outputDir: this.#outputDir,
+      minFrames: 5,
+      captureFormat: this.#screencastOptions?.captureFormat,
+      sendUpstream: (scope, data) =>
+        this.#sessionCapturer.sendUpstream(scope, data),
+      onLog: (level, message) => log[level](message)
+    })
   }
 
   /**
@@ -548,14 +426,17 @@ export default class DevToolsHookService implements Services.ServiceInstance {
     try {
       this.#injecting = true
       const markerPresent = await this.#browser.execute(() => {
-        return Boolean((window as any).__WDIO_DEVTOOLS_MARK)
+        return Boolean(
+          (window as unknown as { __WDIO_DEVTOOLS_MARK?: unknown })
+            .__WDIO_DEVTOOLS_MARK
+        )
       })
       if (markerPresent) {
         return
       }
       await this.#sessionCapturer.injectScript(getBrowserObject(this.#browser))
     } catch (err) {
-      log.warn(`[inject] failed (reason=${reason}): ${(err as Error).message}`)
+      log.warn(`[inject] failed (reason=${reason}): ${errorMessage(err)}`)
     } finally {
       this.#injecting = false
     }
diff --git a/packages/service/src/launcher.ts b/packages/service/src/launcher.ts
index 8a121737..43f69aac 100644
--- a/packages/service/src/launcher.ts
+++ b/packages/service/src/launcher.ts
@@ -3,6 +3,7 @@ import http from 'node:http'
 import { remote } from 'webdriverio'
 import { start } from '@wdio/devtools-backend'
 import logger from '@wdio/logger'
+import { REUSE_ENV, RUNNER_ENV } from '@wdio/devtools-shared'
 import { DEFAULT_LAUNCH_CAPS } from './constants.js'
 import type { ServiceOptions, ExtendedCapabilities } from './types.js'
 
@@ -10,7 +11,7 @@ const log = logger('@wdio/devtools-service:Launcher')
 
 // On rerun the original CLI process still owns its port-binding services;
 // swallow EADDRINUSE so other services' onPrepare don't fail loudly.
-if (process.env.DEVTOOLS_APP_REUSE === '1') {
+if (process.env[REUSE_ENV.REUSE] === '1') {
   const originalListen = http.Server.prototype.listen
   http.Server.prototype.listen = function patchedListen(
     this: http.Server,
@@ -91,15 +92,15 @@ export class DevToolsAppLauncher {
   async onPrepare(_: never, caps: ExtendedCapabilities[]) {
     try {
       const detectedConfig = detectInvocationConfigPath()
-      if (detectedConfig && !process.env.DEVTOOLS_WDIO_CONFIG) {
-        process.env.DEVTOOLS_WDIO_CONFIG = detectedConfig
+      if (detectedConfig && !process.env[RUNNER_ENV.WDIO_CONFIG]) {
+        process.env[RUNNER_ENV.WDIO_CONFIG] = detectedConfig
         log.info(`Detected config for reruns: ${detectedConfig}`)
       }
 
-      if (!process.env.DEVTOOLS_WDIO_INITIAL_SPECS) {
+      if (!process.env[RUNNER_ENV.WDIO_INITIAL_SPECS]) {
         const detectedSpecs = detectInvocationSpecs()
         if (detectedSpecs.length) {
-          process.env.DEVTOOLS_WDIO_INITIAL_SPECS = detectedSpecs.join(
+          process.env[RUNNER_ENV.WDIO_INITIAL_SPECS] = detectedSpecs.join(
             path.delimiter
           )
           log.info(
@@ -108,10 +109,10 @@ export class DevToolsAppLauncher {
         }
       }
 
-      const reusePort = process.env.DEVTOOLS_APP_PORT
+      const reusePort = process.env[REUSE_ENV.PORT]
       const reuseHost =
-        process.env.DEVTOOLS_APP_HOST || this.#options.hostname || 'localhost'
-      if (process.env.DEVTOOLS_APP_REUSE === '1' && reusePort) {
+        process.env[REUSE_ENV.HOST] || this.#options.hostname || 'localhost'
+      if (process.env[REUSE_ENV.REUSE] === '1' && reusePort) {
         log.info(
           `Reusing existing DevTools app at http://${reuseHost}:${reusePort}`
         )
diff --git a/packages/service/src/reporter.ts b/packages/service/src/reporter.ts
index dcf380b6..ca04edea 100644
--- a/packages/service/src/reporter.ts
+++ b/packages/service/src/reporter.ts
@@ -2,6 +2,11 @@ import WebdriverIOReporter, {
   type SuiteStats,
   type TestStats
 } from '@wdio/reporter'
+import {
+  deterministicUid,
+  generateStableUid as generateStableUidByFileName,
+  resetSignatureCounters
+} from '@wdio/devtools-core'
 import {
   mapTestToSource,
   setCurrentSpecFile,
@@ -9,79 +14,56 @@ import {
 } from './utils.js'
 import { readFileSync, existsSync } from 'node:fs'
 
-// Track test/suite occurrences within current run to handle duplicate signatures
-const signatureCounters = new Map<string, number>()
+// True when the stats object is a Cucumber scenario. The `type` field on
+// @wdio/reporter's SuiteStats/TestStats is a literal union ('suite' | 'test'),
+// but WDIO's Cucumber adapter ALSO emits `type: 'scenario'`. Module
+// augmentation can't widen the literal, so we widen at the read site here.
+function isScenario(item: SuiteStats | TestStats): boolean {
+  return (item as { type?: string }).type === 'scenario'
+}
 
-// Generate stable UID based on test/suite metadata
+// Generate stable UID for a WDIO suite/test stats object. Handles WDIO's
+// Cucumber-specific shapes (scenarios with featureFile/featureLine, or with
+// numeric uid + example-row fallback), then delegates the Mocha/Jasmine path
+// to core's generateStableUid.
 function generateStableUid(item: SuiteStats | TestStats): string {
-  const rawItem = item as any
-
   // For Cucumber scenarios, prefer the feature file URI:line as the stable
   // discriminator. The Cucumber pickle carries the actual line of the example
   // row, which is stable across reruns regardless of how many examples run.
-  // The previous fallback used WDIO's index-based uid (`example-${rawItem.uid}`),
+  // The previous fallback used WDIO's index-based uid (`example-${item.uid}`),
   // but that uid is reassigned when running a subset of examples — e.g. running
   // only example 2 alone makes it example index 0, colliding with example 1's
   // stable UID from a full run and causing duplicate rows in the dashboard.
   if (
-    rawItem.type === 'scenario' &&
-    rawItem.featureFile &&
-    typeof rawItem.featureLine === 'number'
+    isScenario(item) &&
+    item.featureFile &&
+    typeof item.featureLine === 'number'
   ) {
-    const parts = [rawItem.featureFile, String(rawItem.featureLine), item.title]
-    const hash = parts
-      .join('::')
-      .split('')
-      .reduce((acc, char) => {
-        return ((acc << 5) - acc + char.charCodeAt(0)) | 0
-      }, 0)
-    return `stable-${Math.abs(hash).toString(36)}`
+    return deterministicUid(
+      item.featureFile,
+      String(item.featureLine),
+      item.title
+    )
   }
 
   // Fallback for Cucumber scenarios where the pickle URI:line wasn't captured.
-  if (rawItem.type === 'scenario' && /^\d+$/.test(rawItem.uid)) {
-    const parts = [
+  if (isScenario(item) && /^\d+$/.test(item.uid)) {
+    const file = 'file' in item ? (item.file ?? '') : ''
+    const parent = 'parent' in item ? (item.parent ?? '') : ''
+    return deterministicUid(
       item.title,
-      rawItem.file || '',
-      rawItem.parent || '',
-      rawItem.cid || '',
-      `example-${rawItem.uid}`
-    ]
-    const hash = parts
-      .join('::')
-      .split('')
-      .reduce((acc, char) => {
-        return ((acc << 5) - acc + char.charCodeAt(0)) | 0
-      }, 0)
-    return `stable-${Math.abs(hash).toString(36)}`
+      file,
+      parent,
+      item.cid || '',
+      `example-${item.uid}`
+    )
   }
 
   // For Mocha/Jasmine tests and suites, use only stable identifiers
   // that don't change between full and partial runs
   // DO NOT use cid or parent as they can vary based on run context
-  const parts = [rawItem.file || '', String(rawItem.fullTitle || item.title)]
-
-  const signature = parts.join('::')
-  const count = signatureCounters.get(signature) || 0
-  signatureCounters.set(signature, count + 1)
-
-  if (count > 0) {
-    parts.push(String(count))
-  }
-
-  const hash = parts
-    .join('::')
-    .split('')
-    .reduce((acc, char) => {
-      return ((acc << 5) - acc + char.charCodeAt(0)) | 0
-    }, 0)
-
-  return `stable-${Math.abs(hash).toString(36)}`
-}
-
-// Reset counters at the start of each test run
-function resetSignatureCounters() {
-  signatureCounters.clear()
+  const file = 'file' in item ? (item.file ?? '') : ''
+  return generateStableUidByFileName(file, String(item.fullTitle || item.title))
 }
 
 /**
@@ -188,23 +170,24 @@ export class TestReporter extends WebdriverIOReporter {
   onSuiteStart(suiteStats: SuiteStats): void {
     super.onSuiteStart(suiteStats)
 
-    const rawSuite = suiteStats as any
-
     // For Cucumber scenarios: prefer the pickle's URI:line (stable across
     // single-example reruns). Fall back to index-based feature-file parsing
     // only if the pickle data isn't available.
-    if (rawSuite.type === 'scenario' && suiteStats.file?.endsWith('.feature')) {
+    if (isScenario(suiteStats) && suiteStats.file?.endsWith('.feature')) {
+      const cucumberArg = (suiteStats as { argument?: unknown }).argument as
+        | { uri?: string; line?: number }
+        | undefined
       const pickleUri =
-        rawSuite.argument?.uri ?? rawSuite.pickle?.uri ?? rawSuite.uri
+        cucumberArg?.uri ?? suiteStats.pickle?.uri ?? suiteStats.uri
       const pickleLine =
-        rawSuite.argument?.line ??
-        rawSuite.pickle?.location?.line ??
-        rawSuite.line
+        cucumberArg?.line ??
+        suiteStats.pickle?.location?.line ??
+        (typeof suiteStats.line === 'number' ? suiteStats.line : undefined)
       if (typeof pickleUri === 'string' && typeof pickleLine === 'number') {
-        rawSuite.featureFile = pickleUri
-        rawSuite.featureLine = pickleLine
+        suiteStats.featureFile = pickleUri
+        suiteStats.featureLine = pickleLine
       } else {
-        const exampleIndex = parseInt(rawSuite.uid, 10)
+        const exampleIndex = parseInt(suiteStats.uid, 10)
         if (!isNaN(exampleIndex)) {
           const exampleLines = parseFeatureFileForExampleLines(
             suiteStats.file,
@@ -212,16 +195,15 @@ export class TestReporter extends WebdriverIOReporter {
           )
           if (exampleLines?.has(exampleIndex)) {
             const lineNumber = exampleLines.get(exampleIndex)!
-            rawSuite.featureFile = suiteStats.file
-            rawSuite.featureLine = lineNumber
+            suiteStats.featureFile = suiteStats.file
+            suiteStats.featureLine = lineNumber
           }
         }
       }
     }
 
     // Generate stable UID for consistent identification across reruns
-    const stableUid = generateStableUid(suiteStats)
-    ;(suiteStats as any).uid = stableUid
+    suiteStats.uid = generateStableUid(suiteStats)
 
     this.#currentSpecFile = suiteStats.file
     setCurrentSpecFile(suiteStats.file)
@@ -232,11 +214,16 @@ export class TestReporter extends WebdriverIOReporter {
     }
 
     // Enrich and set callSource for suites
-    mapSuiteToSource(suiteStats as any, this.#currentSpecFile, this.#suitePath)
-    if ((suiteStats as any).file && (suiteStats as any).line !== null) {
-      ;(suiteStats as any).callSource =
-        `${(suiteStats as any).file}:${(suiteStats as any).line}`
-      this.#loadSource((suiteStats as any).file)
+    mapSuiteToSource(suiteStats, this.#currentSpecFile, this.#suitePath)
+    if (suiteStats.file) {
+      // loadSource only needs the file path — line is irrelevant for fetching
+      // the source. Fire whenever there's a file mapping, even if line is unset
+      // (e.g. cucumber feature suites where the line comes from pickle data
+      // populated later).
+      this.#loadSource(suiteStats.file)
+      if (suiteStats.line !== null && suiteStats.line !== undefined) {
+        suiteStats.callSource = `${suiteStats.file}:${suiteStats.line}`
+      }
     }
 
     this.#sendUpstream()
@@ -246,24 +233,27 @@ export class TestReporter extends WebdriverIOReporter {
     super.onTestStart(testStats)
 
     // For Cucumber: capture feature file URI and line from pickle
-    const rawTest = testStats as any
-    if (rawTest.argument?.uri && typeof rawTest.argument?.line === 'number') {
-      // Store feature file location for Cucumber scenarios
-      rawTest.featureFile = rawTest.argument.uri
-      rawTest.featureLine = rawTest.argument.line
+    const cucumberArg = (testStats as { argument?: unknown }).argument as
+      | { uri?: string; line?: number }
+      | undefined
+    if (cucumberArg?.uri && typeof cucumberArg.line === 'number') {
+      testStats.featureFile = cucumberArg.uri
+      testStats.featureLine = cucumberArg.line
     }
 
     // Enrich testStats with callSource info FIRST
     mapTestToSource(testStats, this.#currentSpecFile)
-    if ((testStats as any).file && (testStats as any).line !== null) {
-      ;(testStats as any).callSource =
-        `${(testStats as any).file}:${(testStats as any).line}`
-      this.#loadSource((testStats as any).file)
+    if (
+      testStats.file &&
+      testStats.line !== null &&
+      testStats.line !== undefined
+    ) {
+      testStats.callSource = `${testStats.file}:${testStats.line}`
+      this.#loadSource(testStats.file)
     }
 
     // Generate stable UID after enriching metadata for consistent test identification
-    const stableUid = generateStableUid(testStats)
-    ;(testStats as any).uid = stableUid
+    testStats.uid = generateStableUid(testStats)
 
     this.#sendUpstream()
   }
@@ -277,9 +267,15 @@ export class TestReporter extends WebdriverIOReporter {
     // `matcherResult`) — Jest/expect-webdriverio may attach these as either
     // enumerable or non-enumerable depending on version, so we access them
     // by name rather than relying on spread.
-    const rawErr = (testStats as any).error
+    const rawErr = testStats.error as
+      | (Error & {
+          expected?: unknown
+          actual?: unknown
+          matcherResult?: unknown
+        })
+      | undefined
     if (rawErr) {
-      ;(testStats as any).error = {
+      testStats.error = {
         ...rawErr,
         message: rawErr.message,
         name: rawErr.name,
@@ -287,7 +283,7 @@ export class TestReporter extends WebdriverIOReporter {
         expected: rawErr.expected,
         actual: rawErr.actual,
         matcherResult: rawErr.matcherResult
-      }
+      } as Error
     }
     this.#sendUpstream()
   }
@@ -319,8 +315,7 @@ export class TestReporter extends WebdriverIOReporter {
     // Use the suite's current UID (which we've set to stable) as the key
     for (const suite of Object.values(this.suites)) {
       if (suite) {
-        const actualUid = (suite as any).uid
-        payload.push({ [actualUid]: suite })
+        payload.push({ [suite.uid]: suite })
       }
     }
 
diff --git a/packages/service/src/screencast.ts b/packages/service/src/screencast.ts
index a034e7a2..528a37b6 100644
--- a/packages/service/src/screencast.ts
+++ b/packages/service/src/screencast.ts
@@ -1,159 +1,97 @@
 import logger from '@wdio/logger'
-
-import { SCREENCAST_DEFAULTS } from './constants.js'
-import type { ScreencastFrame, ScreencastOptions } from './types.js'
+import { ScreencastRecorderBase, errorMessage } from '@wdio/devtools-core'
 
 const log = logger('@wdio/devtools-service:ScreencastRecorder')
 
-/**
- * Manages session screencast recording with automatic browser detection.
- *
- * Recording strategy (chosen automatically at start time):
- *   1. CDP push mode  — Chrome/Chromium only. Chrome pushes frames over the
- *      DevTools Protocol; each frame is ack'd immediately. Efficient with no
- *      impact on test command timing.
- *   2. BiDi polling   — all other browsers (Firefox, Safari, Edge Legacy, …).
- *      Falls back to calling browser.takeScreenshot() at a fixed interval.
- *      Works wherever WebDriver screenshots are supported; adds a small
- *      round-trip overhead proportional to pollIntervalMs.
- *
- * Usage:
- *   const recorder = new ScreencastRecorder(options)
- *   await recorder.start(browser)   // in before() hook
- *   // ... test runs ...
- *   await recorder.stop()           // in after() hook
- *   const frames = recorder.frames  // feed to encodeToVideo()
- */
-export class ScreencastRecorder {
-  #frames: ScreencastFrame[] = []
-  /** Puppeteer CDPSession — set only in CDP mode. */
-  #cdpSession: any = undefined
-  /** setInterval handle — set only in polling mode. */
-  #pollTimer: ReturnType<typeof setInterval> | undefined = undefined
-  #isRecording = false
-  #options: Required<ScreencastOptions>
-  /**
-   * Index into #frames where meaningful recording begins.
-   * Frames before this index (blank browser before first navigation) are
-   * excluded from encoding. Set once via setStartMarker().
-   */
-  #startIndex = 0
-  #startMarkerSet = false
-
-  constructor(options: ScreencastOptions = {}) {
-    this.#options = { ...SCREENCAST_DEFAULTS, ...options }
-  }
-
-  // ─── public API ───────────────────────────────────────────────────────────
+interface CdpSessionLike {
+  send(method: string, params?: Record<string, unknown>): Promise<unknown>
+  on(event: string, handler: (event: unknown) => void | Promise<void>): void
+}
 
-  /**
-   * Start recording. Tries CDP (Chrome) first; falls back to BiDi polling
-   * for all other browsers. Safe to call even if the browser does not support
-   * screenshots — the failure is logged and recording is simply skipped.
-   */
-  async start(browser: WebdriverIO.Browser): Promise<void> {
-    const cdpStarted = await this.#startCdp(browser)
-    if (!cdpStarted) {
-      await this.#startPolling(browser)
-    }
-  }
+interface PuppeteerPageLike {
+  createCDPSession(): Promise<CdpSessionLike>
+}
 
-  /**
-   * Stop recording and release resources.
-   * Safe to call even if start() was never called or failed.
-   */
-  async stop(): Promise<void> {
-    if (!this.#isRecording) {
-      return
-    }
+interface PuppeteerLike {
+  pages(): Promise<PuppeteerPageLike[]>
+}
 
-    if (this.#cdpSession) {
-      await this.#stopCdp()
-    } else if (this.#pollTimer !== undefined) {
-      this.#stopPolling()
-    }
+/**
+ * WDIO-specific screencast recorder. Inherits the frame buffer, polling
+ * fallback, and public API from {@link ScreencastRecorderBase}; overrides the
+ * CDP hooks to use WDIO's Puppeteer escape hatch (`browser.getPuppeteer()`).
+ */
+export class ScreencastRecorder extends ScreencastRecorderBase<WebdriverIO.Browser> {
+  #cdpSession: CdpSessionLike | undefined = undefined
 
-    this.#isRecording = false
+  protected override onPollingStarted(intervalMs: number): void {
+    log.info(
+      `✓ Screencast recording started (polling mode, ${intervalMs} ms interval)`
+    )
   }
 
-  /**
-   * Mark the current frame position as the start of meaningful recording.
-   * Frames captured before this call (blank browser, pre-navigation pauses)
-   * are excluded from the encoded video.
-   * Safe to call multiple times — only the first call takes effect.
-   */
-  setStartMarker() {
-    if (!this.#startMarkerSet) {
-      this.#startMarkerSet = true
-      this.#startIndex = this.#frames.length
-    }
+  protected override onPollingStopped(frameCount: number): void {
+    log.info(`✓ Screencast stopped — ${frameCount} frame(s) collected`)
   }
 
-  /** Frames to encode — everything from the first meaningful action onwards. */
-  get frames(): ScreencastFrame[] {
-    return this.#frames.slice(this.#startIndex)
+  protected override onUnavailable(err: unknown): void {
+    log.warn(
+      `Screencast unavailable (${errorMessage(err)}). Recording skipped.`
+    )
   }
 
-  /**
-   * Duration in milliseconds between first and last captured frame.
-   * Returns 0 if fewer than 2 frames were collected.
-   */
-  get duration(): number {
-    const f = this.frames
-    if (f.length < 2) {
-      return 0
+  protected override async takeScreenshot(): Promise<string | null> {
+    if (!this.driver) {
+      return null
     }
-    return f[f.length - 1].timestamp - f[0].timestamp
+    return this.driver.takeScreenshot()
   }
 
-  get isRecording(): boolean {
-    return this.#isRecording
-  }
-
-  // ─── CDP mode (Chrome/Chromium) ───────────────────────────────────────────
-
-  /**
-   * Attempt to start recording via the Chrome DevTools Protocol.
-   * Returns true on success, false if CDP is unavailable (non-Chrome browser
-   * or remote grid without debug-port access).
-   */
-  async #startCdp(browser: WebdriverIO.Browser): Promise<boolean> {
+  protected override async tryStartCdp(): Promise<boolean> {
+    if (!this.driver) {
+      return false
+    }
     try {
-      const puppeteer = await (browser as any).getPuppeteer()
+      // getPuppeteer is augmented onto WebdriverIO.Browser in types.ts; the
+      // returned Puppeteer object isn't typed by WDIO, so narrow it locally.
+      const raw = await this.driver.getPuppeteer?.()
+      if (!raw) {
+        return false
+      }
+      const puppeteer = raw as PuppeteerLike
       const pages = await puppeteer.pages()
       if (!pages.length) {
         return false
       }
 
       const page = pages[0]
-      this.#cdpSession = await page.createCDPSession()
-
-      await this.#cdpSession.send('Page.startScreencast', {
-        format: this.#options.captureFormat,
-        quality: this.#options.quality,
-        maxWidth: this.#options.maxWidth,
-        maxHeight: this.#options.maxHeight
+      const session = await page.createCDPSession()
+      this.#cdpSession = session
+
+      await session.send('Page.startScreencast', {
+        format: this.options.captureFormat,
+        quality: this.options.quality,
+        maxWidth: this.options.maxWidth,
+        maxHeight: this.options.maxHeight
       })
 
-      this.#cdpSession.on('Page.screencastFrame', async (event: any) => {
-        // CDP timestamp is seconds (float); convert to ms.
-        this.#frames.push({
-          data: event.data,
-          timestamp: Math.round(event.metadata.timestamp * 1000)
-        })
+      session.on('Page.screencastFrame', async (rawEvent) => {
+        const event = rawEvent as {
+          data: string
+          metadata: { timestamp: number }
+          sessionId?: number
+        }
+        this.pushCdpFrame(event.data, event.metadata.timestamp)
         // Chrome stops sending frames if acks are not sent promptly.
         try {
-          await this.#cdpSession.send('Page.screencastFrameAck', {
+          await session.send('Page.screencastFrameAck', {
             sessionId: event.sessionId
           })
         } catch (ackErr) {
-          log.warn(
-            `Screencast: failed to ack frame — ${(ackErr as Error).message}`
-          )
+          log.warn(`Screencast: failed to ack frame — ${errorMessage(ackErr)}`)
         }
       })
 
-      this.#isRecording = true
       log.info('✓ Screencast recording started (CDP mode)')
       return true
     } catch {
@@ -162,16 +100,19 @@ export class ScreencastRecorder {
     }
   }
 
-  async #stopCdp(): Promise<void> {
+  protected override async tryStopCdp(): Promise<void> {
+    const session = this.#cdpSession
+    if (!session) {
+      return
+    }
     try {
-      await this.#cdpSession.send('Page.stopScreencast')
+      await session.send('Page.stopScreencast')
       log.info(
-        `✓ Screencast stopped — ${this.#frames.length} frame(s) collected`
+        `✓ Screencast stopped — ${this.buffer.length} frame(s) collected`
       )
     } catch (err) {
-      const msg = (err as Error).message ?? ''
+      const msg = errorMessage(err)
       if (msg.includes('Session closed') || msg.includes('Target closed')) {
-        // Browser shut down before after() completed — frames already buffered.
         log.debug(
           'Screencast: CDP session already closed (expected during teardown)'
         )
@@ -182,51 +123,4 @@ export class ScreencastRecorder {
       this.#cdpSession = undefined
     }
   }
-
-  // ─── Polling mode (all other browsers) ───────────────────────────────────
-
-  /**
-   * Attempt to start recording via periodic browser.takeScreenshot() calls.
-   * Works for any browser that supports WebDriver screenshots (Firefox,
-   * Safari, etc.). Adds a small round-trip overhead per interval tick.
-   */
-  async #startPolling(browser: WebdriverIO.Browser): Promise<void> {
-    try {
-      // Capture one frame immediately to verify screenshots work before
-      // committing to the polling loop.
-      const firstShot = await browser.takeScreenshot()
-      this.#frames.push({ data: firstShot, timestamp: Date.now() })
-
-      const intervalMs = this.#options.pollIntervalMs
-      this.#pollTimer = setInterval(async () => {
-        try {
-          const data = await browser.takeScreenshot()
-          this.#frames.push({ data, timestamp: Date.now() })
-        } catch {
-          // Session ended mid-interval — stop polling gracefully.
-          this.#stopPolling()
-        }
-      }, intervalMs)
-
-      this.#isRecording = true
-      log.info(
-        `✓ Screencast recording started (polling mode, ${intervalMs} ms interval)`
-      )
-    } catch (err) {
-      log.warn(
-        `Screencast unavailable (${(err as Error).message}). ` +
-          'Recording will be skipped.'
-      )
-    }
-  }
-
-  #stopPolling(): void {
-    if (this.#pollTimer !== undefined) {
-      clearInterval(this.#pollTimer)
-      this.#pollTimer = undefined
-      log.info(
-        `✓ Screencast stopped — ${this.#frames.length} frame(s) collected`
-      )
-    }
-  }
 }
diff --git a/packages/service/src/session.ts b/packages/service/src/session.ts
index a538b795..bcb5e7bc 100644
--- a/packages/service/src/session.ts
+++ b/packages/service/src/session.ts
@@ -2,67 +2,26 @@ import fs from 'node:fs/promises'
 import url from 'node:url'
 
 import logger from '@wdio/logger'
-import { WebSocket } from 'ws'
 import { parse } from 'stack-trace'
 import { resolve } from 'import-meta-resolve'
 import { SevereServiceError } from 'webdriverio'
 import type { WebDriverCommands } from '@wdio/protocols'
 
+import { PAGE_TRANSITION_COMMANDS } from './constants.js'
 import {
-  PAGE_TRANSITION_COMMANDS,
-  ANSI_REGEX,
-  CONSOLE_METHODS,
-  LOG_LEVEL_PATTERNS,
-  ERROR_INDICATORS,
-  LOG_SOURCES
-} from './constants.js'
-import { type CommandLog, type TraceLog, type LogLevel } from './types.js'
+  LOG_SOURCES,
+  SessionCapturerBase,
+  createConsoleLogEntry,
+  errorMessage,
+  getRequestType,
+  type LogSource
+} from '@wdio/devtools-core'
+import type { CommandLog, LogLevel } from './types.js'
 
 const log = logger('@wdio/devtools-service:SessionCapturer')
 
-const stripAnsi = (text: string) => text.replace(ANSI_REGEX, '')
-
-const detectLogLevel = (text: string): LogLevel => {
-  const t = stripAnsi(text).toLowerCase()
-  for (const { level, pattern } of LOG_LEVEL_PATTERNS) {
-    if (pattern.test(t)) {
-      return level
-    }
-  }
-  if (ERROR_INDICATORS.some((i) => t.includes(i.toLowerCase()))) {
-    return 'error'
-  }
-  return 'log'
-}
-
-const toConsoleEntry = (
-  type: LogLevel,
-  args: any[],
-  source: (typeof LOG_SOURCES)[keyof typeof LOG_SOURCES]
-): ConsoleLogs => ({ timestamp: Date.now(), type, args, source })
-
-export class SessionCapturer {
-  #ws: WebSocket | undefined
+export class SessionCapturer extends SessionCapturerBase {
   #isScriptInjected = false
-  #originalConsoleMethods: Record<
-    (typeof CONSOLE_METHODS)[number],
-    typeof console.log
-  > = {
-    log: console.log,
-    info: console.info,
-    warn: console.warn,
-    error: console.error
-  }
-  #originalStdoutWrite = process.stdout.write.bind(process.stdout)
-  #originalStderrWrite = process.stderr.write.bind(process.stderr)
-  /** True while we are inside the patched console call — prevents double-capture via stream. */
-  #insideConsole = false
-  commandsLog: CommandLog[] = []
-  sources = new Map<string, string>()
-  mutations: TraceMutation[] = []
-  traceLogs: string[] = []
-  consoleLogs: ConsoleLogs[] = []
-  networkRequests: NetworkRequest[] = []
   #pendingNetworkRequests = new Map<
     string,
     {
@@ -73,121 +32,29 @@ export class SessionCapturer {
       requestHeaders?: Record<string, string>
     }
   >()
-  metadata?: {
-    url: string
-    viewport: {
-      width: number
-      height: number
-      offsetLeft: number
-      offsetTop: number
-      scale: number
-    }
-  }
 
   constructor(devtoolsOptions: { hostname?: string; port?: number } = {}) {
-    const { port, hostname } = devtoolsOptions
-    if (hostname && port) {
-      this.#ws = new WebSocket(`ws://${hostname}:${port}/worker`)
-      this.#ws.on('error', (err: unknown) =>
-        log.error(
-          `Couldn't connect to devtools backend: ${(err as Error).message}`
-        )
-      )
-    }
-
-    this.#patchConsole()
-    this.#patchStreams()
+    super(devtoolsOptions)
+    this.patchConsole()
+    this.patchStreams()
   }
 
-  /**
-   * Patch Node.js console methods so every console.log/info/warn/error call in
-   * the test runner process (test files, page-object helpers, etc.) is forwarded
-   * to the UI Console tab with source='test'.
-   */
-  #patchConsole() {
-    CONSOLE_METHODS.forEach((method) => {
-      const original = this.#originalConsoleMethods[method]
-      console[method] = (...args: any[]) => {
-        const serialized = args.map((a) =>
-          typeof a === 'object' && a !== null
-            ? (() => {
-                try {
-                  return JSON.stringify(a)
-                } catch {
-                  return String(a)
-                }
-              })()
-            : String(a)
-        )
-        const entry = toConsoleEntry(method, serialized, LOG_SOURCES.TEST)
-        this.consoleLogs.push(entry)
-        this.sendUpstream('consoleLogs', [entry])
-
-        this.#insideConsole = true
-        const result = original.apply(console, args)
-        this.#insideConsole = false
-        return result
-      }
-    })
-  }
-
-  /**
-   * Patch process.stdout / process.stderr so all terminal output (WDIO
-   * framework logs, reporter output, etc.) is also forwarded to the UI
-   * Console tab with source='terminal'.  The original write is always
-   * called first so actual terminal output is never suppressed.
-   */
-  #patchStreams() {
-    const forward = (raw: string | Uint8Array) => {
-      const text = typeof raw === 'string' ? raw : raw.toString()
-      if (!text.trim()) {
-        return
-      }
-      text
-        .split('\n')
-        .filter((l) => l.trim())
-        .forEach((line) => {
-          const entry = toConsoleEntry(
-            detectLogLevel(line),
-            [stripAnsi(line)],
-            LOG_SOURCES.TERMINAL
-          )
-          this.consoleLogs.push(entry)
-          this.sendUpstream('consoleLogs', [entry])
-        })
-    }
-
-    const wrap = (
-      stream: NodeJS.WriteStream,
-      original: (...a: any[]) => boolean
-    ) => {
-      stream.write = ((chunk: any, ...rest: any[]): boolean => {
-        const result = original.call(stream, chunk, ...rest)
-        if (chunk && !this.#insideConsole) {
-          forward(chunk)
-        }
-        return result
-      }) as any
-    }
-
-    wrap(process.stdout, this.#originalStdoutWrite)
-    wrap(process.stderr, this.#originalStderrWrite)
+  protected override onWsError(err: unknown): void {
+    log.error(`Couldn't connect to devtools backend: ${errorMessage(err)}`)
   }
 
   /**
-   * Restore all patched methods. Must be called in after() so subsequent
-   * test runs (or the WDIO reporter teardown) see the real stdout/stderr.
+   * Push every captured line into the local `consoleLogs` array so it ends up
+   * in the final trace payload, in addition to the live WS broadcast.
    */
-  cleanup() {
-    CONSOLE_METHODS.forEach((method) => {
-      console[method] = this.#originalConsoleMethods[method]
-    })
-    process.stdout.write = this.#originalStdoutWrite as any
-    process.stderr.write = this.#originalStderrWrite as any
-  }
-
-  get isReportingUpstream() {
-    return Boolean(this.#ws) && this.#ws?.readyState === WebSocket.OPEN
+  protected override onLine(
+    type: LogLevel,
+    args: string[],
+    source: LogSource
+  ): void {
+    const entry = createConsoleLogEntry(type, args, source)
+    this.consoleLogs.push(entry as ConsoleLogs)
+    this.sendUpstream('consoleLogs', [entry])
   }
 
   // Cucumber step files never appear on the WebDriver call stack;
@@ -200,16 +67,10 @@ export class SessionCapturer {
       ? url.fileURLToPath(location)
       : location
     const sourceFilePath = absolutePath.split(':')[0]
-    if (!sourceFilePath || this.sources.has(sourceFilePath)) {
+    if (!sourceFilePath) {
       return
     }
-    try {
-      const sourceCode = (await fs.readFile(sourceFilePath, 'utf-8')).toString()
-      this.sources.set(sourceFilePath, sourceCode)
-      this.sendUpstream('sources', { [sourceFilePath]: sourceCode })
-    } catch {
-      // file unreadable / missing — nothing to surface
-    }
+    await this.captureSource(sourceFilePath)
   }
 
   async afterCommand(
@@ -242,18 +103,8 @@ export class SessionCapturer {
       ? url.fileURLToPath(sourceFileLocation)
       : sourceFileLocation
     const sourceFilePath = absolutePath.split(':')[0]
-    const doesFileExist = await fs.access(sourceFilePath).then(
-      () => true,
-      () => false
-    )
-    if (
-      sourceFileLocation &&
-      !this.sources.has(sourceFileLocation) &&
-      doesFileExist
-    ) {
-      const sourceCode = await fs.readFile(sourceFilePath, 'utf-8')
-      this.sources.set(sourceFilePath, sourceCode.toString())
-      this.sendUpstream('sources', { [sourceFilePath]: sourceCode.toString() })
+    if (sourceFileLocation && sourceFilePath) {
+      await this.captureSource(sourceFilePath)
     }
     const commandLogEntry: CommandLog = {
       command,
@@ -323,34 +174,12 @@ export class SessionCapturer {
         return
       }
 
-      const { mutations, traceLogs, consoleLogs, networkRequests, metadata } =
-        await browser.execute(() => window.wdioTraceCollector.getTraceData())
-      this.metadata = metadata
-
-      if (Array.isArray(mutations)) {
-        this.mutations.push(...(mutations as TraceMutation[]))
-        this.sendUpstream('mutations', mutations)
-      }
-      if (Array.isArray(traceLogs)) {
-        this.traceLogs.push(...traceLogs)
-        this.sendUpstream('logs', traceLogs)
-      }
-      if (Array.isArray(consoleLogs)) {
-        const browserLogs = consoleLogs as ConsoleLogs[]
-        browserLogs.forEach((log) => (log.source = LOG_SOURCES.BROWSER))
-        this.consoleLogs.push(...browserLogs)
-        this.sendUpstream('consoleLogs', browserLogs)
-      }
-      if (Array.isArray(networkRequests)) {
-        const requests = networkRequests as NetworkRequest[]
-        this.networkRequests.push(...requests)
-        this.sendUpstream('networkRequests', requests)
-      }
-
-      this.sendUpstream('metadata', metadata)
-      log.info(`✓ Sent metadata upstream, WS state: ${this.#ws?.readyState}`)
+      const payload = await browser.execute(() =>
+        window.wdioTraceCollector.getTraceData()
+      )
+      this.processTracePayload(payload as Record<string, unknown>)
     } catch (err) {
-      log.error(`Failed to capture trace: ${(err as Error).message}`)
+      log.error(`Failed to capture trace: ${errorMessage(err)}`)
     }
   }
 
@@ -514,7 +343,7 @@ export class SessionCapturer {
         method: pending.method,
         status: response.status,
         statusText: response.statusText,
-        type: this.#getRequestType(pending.url, contentType),
+        type: getRequestType(pending.url, contentType),
         timestamp: pending.timestamp,
         startTime: pending.startTime,
         endTime,
@@ -535,56 +364,4 @@ export class SessionCapturer {
     const requestId = event.request.request
     this.#pendingNetworkRequests.delete(requestId)
   }
-
-  #getRequestType(url: string, contentType?: string): string {
-    const urlLower = url.toLowerCase()
-    const ct = contentType?.toLowerCase() || ''
-
-    if (ct.includes('text/html')) {
-      return 'document'
-    }
-    if (ct.includes('text/css')) {
-      return 'stylesheet'
-    }
-    if (ct.includes('javascript') || ct.includes('ecmascript')) {
-      return 'script'
-    }
-    if (ct.includes('image/')) {
-      return 'image'
-    }
-    if (ct.includes('font/') || ct.includes('woff')) {
-      return 'font'
-    }
-    if (ct.includes('application/json')) {
-      return 'fetch'
-    }
-
-    if (urlLower.endsWith('.html') || urlLower.endsWith('.htm')) {
-      return 'document'
-    }
-    if (urlLower.endsWith('.css')) {
-      return 'stylesheet'
-    }
-    if (urlLower.endsWith('.js') || urlLower.endsWith('.mjs')) {
-      return 'script'
-    }
-    if (urlLower.match(/\.(png|jpg|jpeg|gif|svg|webp|ico)$/)) {
-      return 'image'
-    }
-    if (urlLower.match(/\.(woff|woff2|ttf|eot|otf)$/)) {
-      return 'font'
-    }
-
-    return 'xhr'
-  }
-
-  sendUpstream<Scope extends keyof TraceLog>(
-    scope: Scope,
-    data: Partial<TraceLog[Scope]>
-  ) {
-    if (!this.#ws || this.#ws.readyState !== WebSocket.OPEN) {
-      return
-    }
-    this.#ws.send(JSON.stringify({ scope, data }))
-  }
 }
diff --git a/packages/service/src/standalone.ts b/packages/service/src/standalone.ts
new file mode 100644
index 00000000..4e4dd9e8
--- /dev/null
+++ b/packages/service/src/standalone.ts
@@ -0,0 +1,87 @@
+import path from 'node:path'
+import type { Capabilities, Options } from '@wdio/types'
+import type { WebDriverCommands } from '@wdio/protocols'
+import { RUNNER_ENV } from '@wdio/devtools-shared'
+import DevToolsHookService from './index.js'
+import { TraceType } from './types.js'
+
+/**
+ * Resolve the WDIO config path from argv or `DEVTOOLS_WDIO_CONFIG`. The
+ * service uses this to send a `config` upstream message so the dashboard's
+ * rerun button knows which config to relaunch with.
+ */
+export function detectInvocationConfigPath(): string | undefined {
+  const envPath = process.env[RUNNER_ENV.WDIO_CONFIG]
+  if (envPath) {
+    return path.isAbsolute(envPath)
+      ? envPath
+      : path.resolve(process.cwd(), envPath)
+  }
+  const argv = process.argv
+  for (let i = 0; i < argv.length - 1; i++) {
+    if (argv[i] === '--config' || argv[i] === '-c') {
+      const next = argv[i + 1]
+      if (next && /\.(conf|config)\.(ts|js|cjs|mjs)$/i.test(next)) {
+        return path.isAbsolute(next) ? next : path.resolve(process.cwd(), next)
+      }
+    }
+  }
+  const positional = argv.find((a) => /\.conf\.(ts|js|cjs|mjs)$/i.test(a))
+  if (!positional) {
+    return undefined
+  }
+  return path.isAbsolute(positional)
+    ? positional
+    : path.resolve(process.cwd(), positional)
+}
+
+/**
+ * Setup WebdriverIO Devtools hook for standalone instances — wires the
+ * service into `opts.beforeCommand`/`afterCommand` callbacks so a non-WDIO-
+ * runner consumer (e.g. a Node script using `remote()` directly) still gets
+ * command capture and screencast recording.
+ */
+export function setupForDevtools(
+  opts: Options.WebdriverIO
+): Options.WebdriverIO {
+  let browserCaptured = false
+  const service = new DevToolsHookService()
+  service.captureType = TraceType.Standalone
+
+  // In v9, the `opts` object itself contains the capabilities.
+  service.beforeSession(opts, opts as Capabilities.W3CCapabilities)
+
+  opts.beforeCommand = Array.isArray(opts.beforeCommand)
+    ? opts.beforeCommand
+    : opts.beforeCommand
+      ? [opts.beforeCommand]
+      : []
+  opts.beforeCommand.push(async function captureBrowserInstance(
+    this: WebdriverIO.Browser,
+    command: keyof WebDriverCommands
+  ) {
+    if (!browserCaptured) {
+      browserCaptured = true
+      service.before(
+        this.capabilities as Capabilities.W3CCapabilities,
+        [],
+        this
+      )
+    }
+
+    // Capture trace on `deleteSession` — afterCommand fires after the
+    // session is gone, so do it here before the WS to the browser closes.
+    if (command === 'deleteSession') {
+      await service.after()
+    }
+  }, service.beforeCommand.bind(service))
+
+  opts.afterCommand = Array.isArray(opts.afterCommand)
+    ? opts.afterCommand
+    : opts.afterCommand
+      ? [opts.afterCommand]
+      : []
+  opts.afterCommand.push(service.afterCommand.bind(service))
+
+  return opts
+}
diff --git a/packages/service/src/types.ts b/packages/service/src/types.ts
index b1e5a4d9..5aa1e1c2 100644
--- a/packages/service/src/types.ts
+++ b/packages/service/src/types.ts
@@ -1,118 +1,35 @@
-import type { WebDriverCommands } from '@wdio/protocols'
-import type { Capabilities, Options } from '@wdio/types'
-import type { SuiteStats } from '@wdio/reporter'
-
-export interface CommandLog {
-  command: keyof WebDriverCommands
-  args: any[]
-  result: any
-  error?: Error
-  timestamp: number
-  callSource: string
-  screenshot?: string
-  testUid?: string
-  id?: number
-}
-
-export interface ScreencastFrame {
-  /** Base64-encoded image data — JPEG/PNG from CDP push mode or PNG from browser.takeScreenshot() in polling mode */
-  data: string
-  /** Unix timestamp in milliseconds */
-  timestamp: number
-}
-
-export interface ScreencastOptions {
-  /** Enable screencast recording for this session (default: false) */
-  enabled?: boolean
-  /**
-   * Image format for individual frames (default: 'jpeg').
-   * - Chrome/Chromium (CDP mode): controls the format Chrome sends over CDP.
-   * - Other browsers (polling mode): screenshots are always PNG; this option
-   *   is ignored.
-   * Does NOT affect the output video container, which is always WebM.
-   */
-  captureFormat?: 'jpeg' | 'png'
-  /**
-   * JPEG quality 0–100 (default: 70).
-   * Only applies in Chrome/Chromium CDP mode with captureFormat 'jpeg'.
-   */
-  quality?: number
-  /**
-   * Max frame width in pixels Chrome sends over CDP (default: 1280).
-   * Only applies in Chrome/Chromium CDP mode.
-   */
-  maxWidth?: number
-  /**
-   * Max frame height in pixels Chrome sends over CDP (default: 720).
-   * Only applies in Chrome/Chromium CDP mode.
-   */
-  maxHeight?: number
-  /**
-   * Screenshot polling interval in milliseconds for non-Chrome browsers
-   * (default: 200 ms ≈ 5 fps).
-   * Polling calls browser.takeScreenshot() at this interval. A lower value
-   * gives smoother video but adds more WebDriver round-trips during the test.
-   */
-  pollIntervalMs?: number
-}
-
-export interface ScreencastInfo {
-  sessionId?: string
-  /** Absolute path to the encoded video file on disk */
-  videoPath?: string
-  /** Filename only, e.g. wdio-video-{sessionId}.webm */
-  videoFile?: string
-  frameCount?: number
-  /** Duration in milliseconds between first and last frame */
-  duration?: number
-}
-
-export enum TraceType {
-  Standalone = 'standalone',
-  Testrunner = 'testrunner'
-}
-
-export interface Viewport {
-  width: number
-  height: number
-  offsetLeft: number
-  offsetTop: number
-  scale: number
-}
-
-export interface Metadata {
-  type: TraceType
-  url: string
-  options: Omit<Options.WebdriverIO, 'capabilities'>
-  capabilities: Capabilities.W3CCapabilities
-  viewport: Viewport
-  /** Nightwatch / extended fields */
-  sessionId?: string
-  testEnv?: string
-  host?: string
-  modulePath?: string
-  desiredCapabilities?: Record<string, unknown>
-}
-
-export interface TraceLog {
-  mutations: TraceMutation[]
-  logs: string[]
-  consoleLogs: ConsoleLogs[]
-  networkRequests: NetworkRequest[]
-  metadata: Metadata
-  commands: CommandLog[]
-  sources: Record<string, string>
-  suites?: Record<string, SuiteStats>[]
-  screencast?: ScreencastInfo
-  config?: { configFile?: string }
-}
+// WDIO-specific types live here. Cross-package types come from @wdio/devtools-shared.
+//
+// Re-exports below maintain backwards compatibility for external consumers of
+// @wdio/devtools-service/types. New code should import directly from
+// @wdio/devtools-shared.
+
+export {
+  TraceType,
+  type CommandLog,
+  type ConsoleLog,
+  type DocumentInfo,
+  type LogLevel,
+  type Metadata,
+  type NetworkRequest,
+  type PerformanceData,
+  type PreservedAttempt,
+  type PreservedStep,
+  type ScreencastInfo,
+  type TestStatus,
+  type TraceLog,
+  type Viewport
+} from '@wdio/devtools-shared'
+
+// ScreencastFrame, ScreencastOptions hoisted to @wdio/devtools-shared; re-exported
+// here for backwards compatibility with existing service-internal imports.
+import type { ScreencastOptions } from '@wdio/devtools-shared'
+export type { ScreencastFrame, ScreencastOptions } from '@wdio/devtools-shared'
 
 export interface ExtendedCapabilities extends WebdriverIO.Capabilities {
   'wdio:devtoolsOptions'?: ServiceOptions
 }
 
-export type LogLevel = 'trace' | 'debug' | 'log' | 'info' | 'warn' | 'error'
-
 export interface ServiceOptions {
   /**
    * port to launch the application on (default: random)
@@ -146,6 +63,14 @@ export interface ServiceOptions {
 declare namespace WebdriverIO {
   interface ServiceOption extends ServiceOptions {}
   interface Capabilities {}
+  interface Browser {
+    // CDP escape hatch present at runtime in Chrome/Chromium sessions but
+    // omitted from WDIO's public Browser type. Returns Puppeteer's top-level
+    // browser object — see screencast.ts for the local shape we use.
+    getPuppeteer?: () => Promise<unknown>
+    // BiDi-specific WDIO method, present at runtime when BiDi is active.
+    sessionSubscribe?: (opts: { events: string[] }) => Promise<unknown>
+  }
 }
 
 declare module '@wdio/reporter' {
@@ -156,6 +81,12 @@ declare module '@wdio/reporter' {
     callSource?: string
     featureFile?: string
     featureLine?: number
+    // Cucumber pickle augmentations (the WDIO Cucumber adapter attaches these
+    // on scenarios; @wdio/reporter's base types don't include them). `argument`
+    // already exists in the base with a different shape, so reads of its
+    // Cucumber-specific fields stay locally cast in reporter.ts.
+    pickle?: { uri?: string; location?: { line?: number } }
+    uri?: string
   }
 
   interface SuiteStats {
@@ -163,6 +94,8 @@ declare module '@wdio/reporter' {
     callSource?: string
     featureFile?: string
     featureLine?: number
+    pickle?: { uri?: string; location?: { line?: number } }
+    uri?: string
   }
 }
 
@@ -176,56 +109,3 @@ export type StepDef = {
   line: number
   column: number
 }
-
-export interface PreservedStep {
-  uid: string
-  title?: string
-  fullTitle?: string
-  start?: number
-  end?: number
-  state?: 'passed' | 'failed' | 'skipped' | 'pending' | 'running'
-  error?: {
-    message?: string
-    name?: string
-    stack?: string
-    /** expect-webdriverio surfaces these directly on the error. */
-    expected?: unknown
-    actual?: unknown
-    /** expect-webdriverio also bundles them under matcherResult. */
-    matcherResult?: {
-      expected?: unknown
-      actual?: unknown
-      message?: string
-    }
-  }
-}
-
-export interface PreservedAttempt {
-  testUid: string
-  scope: 'test' | 'suite'
-  capturedAt: number
-  window: { start: number; end: number }
-  test: {
-    title?: string
-    fullTitle?: string
-    file?: string
-    callSource?: string
-    start?: number
-    end?: number
-    duration?: number
-    state?: 'passed' | 'failed' | 'skipped' | 'pending' | 'running'
-    error?: { message: string; name?: string; stack?: string }
-  }
-  /**
-   * Descendant step (TestStats) snapshots — populated when scope === 'suite'.
-   * Each entry has its own time window so commands can be attributed to the
-   * step that owned them at runtime. The Compare tab uses this to mark
-   * commands that ran inside a failed step (the assertion site).
-   */
-  steps?: PreservedStep[]
-  commands: CommandLog[]
-  consoleLogs: ConsoleLogs[]
-  networkRequests: NetworkRequest[]
-  mutations: TraceMutation[]
-  sources: Record<string, string>
-}
diff --git a/packages/service/src/utils.ts b/packages/service/src/utils.ts
index 19ab0d42..dc58e737 100644
--- a/packages/service/src/utils.ts
+++ b/packages/service/src/utils.ts
@@ -1,62 +1,18 @@
-import fs from 'fs'
-import path from 'node:path'
-import { createRequire } from 'node:module'
-import { parse } from '@babel/parser'
-import type {
-  Node as BabelNode,
-  NodePath,
-  TraverseOptions
-} from '@babel/traverse'
-import type { CallExpression } from '@babel/types'
-import { parse as parseStackTrace } from 'stack-trace'
-
-import {
-  PARSE_PLUGINS,
-  TEST_FN_NAMES,
-  SUITE_FN_NAMES,
-  STEP_FN_NAMES,
-  STEP_FILE_RE,
-  STEP_DIR_RE,
-  SPEC_FILE_RE,
-  FEATURE_FILE_RE,
-  FEATURE_OR_SCENARIO_LINE_RE,
-  STEP_DEF_REGEX_LITERAL_RE,
-  STEP_DEF_STRING_RE,
-  SOURCE_FILE_EXT_RE,
-  STEPS_DIR_CANDIDATES,
-  STEPS_DIR_ASCENT_MAX,
-  STEPS_GLOBAL_SEARCH_MAX_DEPTH
-} from './constants.js'
-import type { StepDef } from './types.js'
-
-const require = createRequire(import.meta.url)
-// @babel/traverse ships as CommonJS; load the callable via require to avoid ESM interop issues
-const traverse = (
-  require('@babel/traverse') as {
-    default: (parent: BabelNode, opts?: TraverseOptions) => void
-  }
-).default
-const _astCache = new Map<string, any[]>()
-
-let CE: { CucumberExpression: any; ParameterTypeRegistry: any } | undefined
-try {
-  const ce = require('@cucumber/cucumber-expressions')
-  CE = {
-    CucumberExpression: ce.CucumberExpression,
-    ParameterTypeRegistry: ce.ParameterTypeRegistry
-  }
-} catch {
-  /* optional */
-}
-
-/**
- * Track current spec file (set by reporter)
- */
-let CURRENT_SPEC_FILE: string | undefined
-export function setCurrentSpecFile(file?: string) {
-  CURRENT_SPEC_FILE = file
-}
-
+// Re-exports + small helpers used across the service. The heavy lifting
+// (AST parsing, source mapping, cucumber step-def lookup) lives in
+// utils/source-mapping.ts and utils/step-defs.ts.
+
+export {
+  setCurrentSpecFile,
+  findTestLocations,
+  getCurrentTestLocation,
+  mapTestToSource,
+  mapSuiteToSource
+} from './utils/source-mapping.js'
+export { findStepDefinitionLocation } from './utils/step-defs.js'
+
+/** A spec file owned by the user — excludes node-builtins and node_modules,
+ *  but keeps WDIO's expect helpers (callers may want to step into those). */
 export function isUserSpecFile(file?: string | null): boolean {
   if (!file) {
     return false
@@ -71,9 +27,7 @@ export function isUserSpecFile(file?: string | null): boolean {
   return !normalized.includes('/node_modules/')
 }
 
-/**
- * Get the top-level browser object from an element/browser
- */
+/** Walk up an element chain to its root browser. */
 export function getBrowserObject(
   elem: WebdriverIO.Element | WebdriverIO.Browser
 ): WebdriverIO.Browser {
@@ -82,668 +36,3 @@ export function getBrowserObject(
     ? getBrowserObject(elemObject.parent)
     : (elem as WebdriverIO.Browser)
 }
-
-/**
- * Get root callee name (handles Identifier and MemberExpression like it.only)
- */
-function rootCalleeName(callee: any): string | undefined {
-  if (!callee) {
-    return
-  }
-  if (callee.type === 'Identifier') {
-    return callee.name
-  }
-  if (callee.type === 'MemberExpression') {
-    const obj: any = callee.object
-    return obj && obj.type === 'Identifier' ? obj.name : undefined
-  }
-  return
-}
-
-/**
- * Parse a JS/TS test/spec file to collect suite/test calls (Mocha/Jasmine) with full title path
- */
-export function findTestLocations(filePath: string) {
-  if (!fs.existsSync(filePath)) {
-    return []
-  }
-
-  const src = fs.readFileSync(filePath, 'utf-8')
-  const ast = parse(src, {
-    sourceType: 'module',
-    plugins: PARSE_PLUGINS as any,
-    errorRecovery: true,
-    allowReturnOutsideFunction: true
-  })
-
-  type Loc = {
-    type: 'test' | 'suite'
-    name: string
-    titlePath: string[]
-    line?: number
-    column?: number
-  }
-
-  const out: Loc[] = []
-  const suiteStack: string[] = []
-
-  const isSuite = (n?: string) =>
-    (!!n && (SUITE_FN_NAMES as readonly string[]).includes(n)) ||
-    n === 'Feature'
-  const isTest = (n?: string) =>
-    !!n && (TEST_FN_NAMES as readonly string[]).includes(n)
-
-  const staticTitle = (node: any): string | undefined => {
-    if (!node) {
-      return
-    }
-    if (node.type === 'StringLiteral') {
-      return node.value
-    }
-    if (node.type === 'TemplateLiteral' && node.expressions.length === 0) {
-      return node.quasis.map((q: any) => q.value.cooked).join('')
-    }
-    return
-  }
-
-  traverse(ast, {
-    enter(p) {
-      if (!p.isCallExpression()) {
-        return
-      }
-      const callee: any = p.node.callee
-      const root = rootCalleeName(callee)
-      if (!root) {
-        return
-      }
-
-      if (isSuite(root)) {
-        const ttl = staticTitle(p.node.arguments?.[0] as any)
-        if (ttl) {
-          out.push({
-            type: 'suite',
-            name: ttl,
-            titlePath: [...suiteStack, ttl],
-            line: p.node.loc?.start.line,
-            column: p.node.loc?.start.column
-          })
-          suiteStack.push(ttl)
-        }
-      } else if (isTest(root)) {
-        const ttl = staticTitle(p.node.arguments?.[0] as any)
-        if (ttl) {
-          out.push({
-            type: 'test',
-            name: ttl,
-            titlePath: [...suiteStack, ttl],
-            line: p.node.loc?.start.line,
-            column: p.node.loc?.start.column
-          })
-        }
-      }
-    },
-    exit(p) {
-      if (!p.isCallExpression()) {
-        return
-      }
-      const callee: any = p.node.callee
-      const root = rootCalleeName(callee)
-      if (!root || !isSuite(root)) {
-        return
-      }
-      const ttl = ((): string | undefined => {
-        const a0: any = p.node.arguments?.[0]
-        if (a0?.type === 'StringLiteral') {
-          return a0.value
-        }
-        if (a0?.type === 'TemplateLiteral' && a0.expressions.length === 0) {
-          return a0.quasis.map((q: any) => q.value.cooked).join('')
-        }
-        return
-      })()
-      if (ttl && suiteStack[suiteStack.length - 1] === ttl) {
-        suiteStack.pop()
-      }
-    }
-  })
-
-  return out
-}
-
-/**
- * Capture stack trace and try to find a user frame.
- * Prefer step-definition files, then spec/tests, then feature files.
- */
-export function getCurrentTestLocation() {
-  const frames = parseStackTrace(new Error())
-
-  const pick = (predicate: (f: any) => boolean) => {
-    const f = frames.find((fr) => {
-      const fn = fr.getFileName()
-      return !!fn && !fn.includes('node_modules') && predicate(fr)
-    })
-    return f
-      ? {
-          file: f.getFileName() as string,
-          line: f.getLineNumber() as number,
-          column: f.getColumnNumber() as number
-        }
-      : null
-  }
-
-  const step = pick((fr) => {
-    const fn = fr.getFileName() as string
-    return STEP_FILE_RE.test(fn) || STEP_DIR_RE.test(fn)
-  })
-  if (step) {
-    return step
-  }
-
-  const spec = pick((fr) => SPEC_FILE_RE.test(fr.getFileName() as string))
-  if (spec) {
-    return spec
-  }
-
-  const feature = pick((fr) => FEATURE_FILE_RE.test(fr.getFileName() as string))
-  if (feature) {
-    return feature
-  }
-
-  return null
-}
-
-/**
- * Step-definition discovery and matching (Cucumber)
- */
-
-// Look for step-definitions directory by ascending from a base directory
-function _findStepsDir(startDir: string): string | undefined {
-  let dir = startDir
-  for (let i = 0; i < STEPS_DIR_ASCENT_MAX; i++) {
-    for (const c of STEPS_DIR_CANDIDATES) {
-      const p = path.join(dir, c)
-      if (fs.existsSync(p) && fs.statSync(p).isDirectory()) {
-        return p
-      }
-    }
-    const up = path.dirname(dir)
-    if (up === dir) {
-      break
-    }
-    dir = up
-  }
-  return undefined
-}
-
-// Global fallback (find a features/*/(step-definitions|steps) directory under cwd)
-let _globalStepsDir: string | undefined
-function _findStepsDirGlobal(): string | undefined {
-  if (_globalStepsDir && fs.existsSync(_globalStepsDir)) {
-    return _globalStepsDir
-  }
-
-  const root = process.cwd()
-  const queue: { dir: string; depth: number }[] = [{ dir: root, depth: 0 }]
-  const maxDepth = STEPS_GLOBAL_SEARCH_MAX_DEPTH
-  while (queue.length) {
-    const { dir, depth } = queue.shift()!
-    if (depth > maxDepth) {
-      continue
-    }
-
-    // Look for a features folder here
-    const featuresDir = path.join(dir, 'features')
-    if (fs.existsSync(featuresDir) && fs.statSync(featuresDir).isDirectory()) {
-      for (const c of STEPS_DIR_CANDIDATES) {
-        const p = path.join(featuresDir, c)
-        if (fs.existsSync(p) && fs.statSync(p).isDirectory()) {
-          _globalStepsDir = p
-          return p
-        }
-      }
-    }
-
-    // BFS into subdirs
-    for (const entry of fs.readdirSync(dir)) {
-      if (entry.startsWith('.')) {
-        continue
-      }
-      const full = path.join(dir, entry)
-      let st: fs.Stats
-      try {
-        st = fs.statSync(full)
-      } catch {
-        continue
-      }
-      if (st.isDirectory() && !full.includes('node_modules')) {
-        queue.push({ dir: full, depth: depth + 1 })
-      }
-    }
-  }
-  return undefined
-}
-
-// Recursively list all source files in a directory
-function _listFiles(dir: string): string[] {
-  const out: string[] = []
-  for (const entry of fs.readdirSync(dir)) {
-    const full = path.join(dir, entry)
-    const st = fs.statSync(full)
-    if (st.isDirectory()) {
-      out.push(..._listFiles(full))
-    } else if (SOURCE_FILE_EXT_RE.test(entry)) {
-      out.push(full)
-    }
-  }
-  return out
-}
-
-// Text fallback: scan a file for step definitions on a single line
-function _collectStepDefsFromText(file: string): StepDef[] {
-  const out: StepDef[] = []
-  const src = fs.readFileSync(file, 'utf-8')
-  const lines = src.split(/\r?\n/)
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i]
-    // Regex step: Given(/^...$/i, ...)
-    const mRe = line.match(STEP_DEF_REGEX_LITERAL_RE)
-    if (mRe) {
-      const lit = mRe[2] // like /pattern/flags
-      const lastSlash = lit.lastIndexOf('/')
-      const pattern = lit.slice(1, lastSlash)
-      const flags = lit.slice(lastSlash + 1)
-      try {
-        out.push({
-          kind: 'regex',
-          regex: new RegExp(pattern, flags),
-          file,
-          line: i + 1,
-          column: mRe.index ?? 0
-        })
-        continue
-      } catch {
-        // ignore malformed regex
-      }
-    }
-    // String step: Given('I do X', ...)
-    const mStr = line.match(STEP_DEF_STRING_RE)
-    if (mStr) {
-      const keyword = mStr[1]
-      const text = mStr[3]
-      out.push({
-        kind: 'string',
-        keyword,
-        text,
-        file,
-        line: i + 1,
-        column: mStr.index ?? 0
-      })
-    }
-  }
-  return out
-}
-
-const _stepsCache = new Map<string, StepDef[]>()
-function _collectStepDefs(stepsDir: string): StepDef[] {
-  const cached = _stepsCache.get(stepsDir)
-  if (cached) {
-    return cached
-  }
-
-  const files = _listFiles(stepsDir)
-  const defs: StepDef[] = []
-
-  for (const file of files) {
-    let pushed = 0
-    try {
-      const src = fs.readFileSync(file, 'utf-8')
-      const ast = parse(src, {
-        sourceType: 'module',
-        plugins: PARSE_PLUGINS as any,
-        errorRecovery: true
-      })
-
-      traverse(ast, {
-        CallExpression(p: NodePath<CallExpression>) {
-          const callee: any = p.node.callee
-          // Support Identifier (Given(...)) and MemberExpression (cucumber.Given(...))
-          let name: string | undefined
-          if (callee?.type === 'Identifier') {
-            name = callee.name
-          } else if (callee?.type === 'MemberExpression') {
-            const prop = (callee as any).property
-            if (prop?.type === 'Identifier') {
-              name = prop.name
-            }
-          }
-          if (!name || !(STEP_FN_NAMES as readonly string[]).includes(name)) {
-            return
-          }
-
-          const arg = p.node.arguments?.[0] as any
-          const loc = {
-            file,
-            line: p.node.loc?.start.line ?? 1,
-            column: p.node.loc?.start.column ?? 0
-          }
-
-          if (arg?.type === 'RegExpLiteral') {
-            defs.push({
-              kind: 'regex',
-              regex: new RegExp(arg.pattern, arg.flags ?? ''),
-              ...loc
-            })
-            pushed++
-          } else if (arg?.type === 'StringLiteral') {
-            // If Cucumber Expressions is available and pattern contains {...}, treat as expression
-            if (CE && arg.value.includes('{')) {
-              const expr = new CE!.CucumberExpression(
-                arg.value,
-                new CE!.ParameterTypeRegistry()
-              )
-              defs.push({ kind: 'expression', expr, ...loc })
-            } else {
-              defs.push({
-                kind: 'string',
-                keyword: name,
-                text: arg.value,
-                ...loc
-              })
-            }
-            pushed++
-          }
-        }
-      })
-    } catch {
-      // ignore AST parse errors; fallback below
-    }
-    // If AST found nothing, fallback to text scan for this file
-    if (pushed === 0) {
-      const fromText = _collectStepDefsFromText(file)
-      if (fromText.length) {
-        defs.push(...fromText)
-      }
-    }
-  }
-
-  _stepsCache.set(stepsDir, defs)
-  return defs
-}
-
-function findStepDefinitionLocation(stepTitle: string, hintPath?: string) {
-  const baseDir = hintPath
-    ? path.extname(hintPath)
-      ? path.dirname(hintPath)
-      : hintPath
-    : undefined
-
-  let stepsDir = baseDir ? _findStepsDir(baseDir) : undefined
-  if (!stepsDir) {
-    stepsDir = _findStepsDirGlobal()
-  }
-  if (!stepsDir) {
-    return
-  }
-
-  const defs = _collectStepDefs(stepsDir)
-
-  const title = String(stepTitle ?? '').trim()
-  const titleNoKw = title.replace(/^(Given|When|Then|And|But)\s+/i, '').trim()
-
-  // String match
-  const s = defs.find(
-    (d) =>
-      d.kind === 'string' &&
-      (titleNoKw.localeCompare(d.text!, 'en', { sensitivity: 'base' }) === 0 ||
-        title.localeCompare(`${d.keyword} ${d.text}`, 'en', {
-          sensitivity: 'base'
-        }) === 0)
-  )
-  if (s) {
-    return { file: s.file, line: s.line, column: s.column }
-  }
-
-  // Cucumber expression match
-  const e = defs.find(
-    (d) =>
-      d.kind === 'expression' &&
-      (() => {
-        try {
-          return !!d.expr!.match(titleNoKw) || !!d.expr!.match(title)
-        } catch {
-          return false
-        }
-      })()
-  )
-  if (e) {
-    return { file: e.file, line: e.line, column: e.column }
-  }
-
-  // Regex match
-  const r = defs.find(
-    (d) =>
-      d.kind === 'regex' && (d.regex!.test(titleNoKw) || d.regex!.test(title))
-  )
-  if (r) {
-    return { file: r.file, line: r.line, column: r.column }
-  }
-
-  return
-}
-
-/**
- * Helpers for Mocha/Jasmine mapping
- */
-function normalizeFullTitle(full?: string) {
-  return String(full || '')
-    .replace(/^\d+:\s*/, '') // drop worker prefix like "0: "
-    .replace(/\s+/g, ' ')
-    .trim()
-}
-
-function escapeRegExp(s: string) {
-  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-}
-
-function offsetToLineCol(src: string, offset: number) {
-  let line = 1,
-    col = 1
-  for (let i = 0; i < offset && i < src.length; i++) {
-    if (src.charCodeAt(i) === 10) {
-      line++
-      col = 1
-    } else {
-      col++
-    }
-  }
-  return { line, column: col }
-}
-
-/**
- * Textual fallback: find the test by scanning for it/test/specify(...) with the exact title.
- * Works even if Babel AST couldn’t be built or callee is wrapped.
- */
-function findTestLocationByText(file: string, title: string) {
-  try {
-    const src = fs.readFileSync(file, 'utf-8')
-    const q = `(['"\`])${escapeRegExp(title)}\\1`
-    const call = String.raw`\b(?:${(TEST_FN_NAMES as readonly string[]).join('|')})\s*\(\s*${q}`
-    const re = new RegExp(call)
-    const m = re.exec(src)
-    if (m && typeof m.index === 'number') {
-      const { line, column } = offsetToLineCol(src, m.index)
-      return { file, line, column }
-    }
-  } catch {}
-  return undefined
-}
-
-// Find describe/context/suite("<title>", ...) by text as a fallback
-function findSuiteLocationByText(file: string, title: string) {
-  try {
-    const src = fs.readFileSync(file, 'utf-8')
-    const q = `(['"\`])${escapeRegExp(title)}\\1`
-    const call = String.raw`\b(?:${(SUITE_FN_NAMES as readonly string[]).join('|')})\s*\(\s*${q}`
-    const re = new RegExp(call)
-    const m = re.exec(src)
-    if (m && typeof m.index === 'number') {
-      const { line, column } = offsetToLineCol(src, m.index)
-      return { file, line, column }
-    }
-  } catch {}
-  return undefined
-}
-
-/**
- * Enrich stats:
- * - Cucumber: prefer step-definition file/line
- * - Mocha/Jasmine: AST with suite path; fallback to runtime stack
- */
-export function mapTestToSource(testStats: any, hintFile?: string) {
-  const title = String(testStats?.title ?? '').trim()
-  const fullTitle = normalizeFullTitle(testStats?.fullTitle)
-
-  // Hint for locating related files
-  const hint =
-    (Array.isArray((testStats as any).specs)
-      ? (testStats as any).specs[0]
-      : undefined) ||
-    (testStats as any).file ||
-    (testStats as any).specFile ||
-    hintFile ||
-    CURRENT_SPEC_FILE
-
-  // Cucumber-like step: resolve step-definition location
-  if (/^(Given|When|Then|And|But)\b/i.test(title)) {
-    const stepLoc = findStepDefinitionLocation(
-      title,
-      FEATURE_FILE_RE.test(String(hint)) ? hint : undefined
-    )
-    if (stepLoc) {
-      Object.assign(testStats, stepLoc)
-      return
-    }
-  }
-
-  // Mocha/Jasmine static mapping via AST
-  const file =
-    (testStats as any).file ||
-    (Array.isArray((testStats as any).specs)
-      ? (testStats as any).specs[0]
-      : undefined) ||
-    (testStats as any).specFile ||
-    hintFile ||
-    CURRENT_SPEC_FILE
-
-  if (file && !FEATURE_FILE_RE.test(file)) {
-    if (!_astCache.has(file)) {
-      try {
-        _astCache.set(file, findTestLocations(file))
-      } catch {
-        // ignore parse errors
-      }
-    }
-    const locs = _astCache.get(file) as any[] | undefined
-    if (locs?.length) {
-      const match =
-        locs.find(
-          (l) =>
-            l.type === 'test' &&
-            l.name === title &&
-            fullTitle.includes(l.titlePath.join(' '))
-        ) || locs.find((l) => l.type === 'test' && l.name === title)
-
-      if (match) {
-        Object.assign(testStats, {
-          file,
-          line: match.line,
-          column: match.column
-        })
-        return
-      }
-    }
-
-    // Fallback: plain text search for it/test/specify("<title>")
-    const textLoc = findTestLocationByText(file, title)
-    if (textLoc) {
-      Object.assign(testStats, textLoc)
-      return
-    }
-  }
-
-  // Runtime stack fallback
-  const runtimeLoc = getCurrentTestLocation()
-  if (runtimeLoc) {
-    Object.assign(testStats, runtimeLoc)
-  }
-}
-
-/**
- * Enrich a suite with file + line
- * - Mocha/Jasmine: map "describe/context" by title path using AST
- * - Cucumber: find Feature/Scenario line in .feature file
- */
-export function mapSuiteToSource(
-  suiteStats: any,
-  hintFile?: string,
-  suitePath: string[] = []
-) {
-  const title = String(suiteStats?.title ?? '').trim()
-  const file = (suiteStats as any).file || hintFile || CURRENT_SPEC_FILE
-  if (!title || !file) {
-    return
-  }
-
-  // Cucumber: feature/scenario line
-  if (FEATURE_FILE_RE.test(file)) {
-    try {
-      const src = fs.readFileSync(file, 'utf-8').split(/\r?\n/)
-      const norm = (s: string) => s.trim().replace(/\s+/g, ' ')
-      const want = norm(title)
-      for (let i = 0; i < src.length; i++) {
-        const m = src[i].match(FEATURE_OR_SCENARIO_LINE_RE)
-        if (m && norm(m[2]) === want) {
-          Object.assign(suiteStats, { file, line: i + 1, column: 1 })
-          return
-        }
-      }
-    } catch {}
-    return
-  }
-
-  // Mocha/Jasmine: AST first
-  try {
-    if (!_astCache.has(file)) {
-      _astCache.set(file, findTestLocations(file))
-    }
-    const locs = _astCache.get(file) as any[] | undefined
-    if (locs?.length) {
-      const match =
-        locs.find(
-          (l) =>
-            l.type === 'suite' &&
-            Array.isArray(l.titlePath) &&
-            l.titlePath.length === suitePath.length &&
-            l.titlePath.every((t: string, i: number) => t === suitePath[i])
-        ) ||
-        locs.find((l) => l.type === 'suite' && l.titlePath.at(-1) === title)
-
-      if (match?.line) {
-        Object.assign(suiteStats, {
-          file,
-          line: match.line,
-          column: match.column
-        })
-        return
-      }
-    }
-  } catch {
-    // ignore
-  }
-
-  // Fallback: text search
-  const textLoc = findSuiteLocationByText(file, title)
-  if (textLoc) {
-    Object.assign(suiteStats, textLoc)
-  }
-}
diff --git a/packages/service/src/utils/ast-locations.ts b/packages/service/src/utils/ast-locations.ts
new file mode 100644
index 00000000..9c1d3cb4
--- /dev/null
+++ b/packages/service/src/utils/ast-locations.ts
@@ -0,0 +1,206 @@
+import fs from 'fs'
+import { createRequire } from 'node:module'
+import { parse } from '@babel/parser'
+import type { Node as BabelNode, TraverseOptions } from '@babel/traverse'
+import { parse as parseStackTrace } from 'stack-trace'
+
+type CalleeNode =
+  | { type: 'Identifier'; name: string }
+  | { type: 'MemberExpression'; object: { type: string; name?: string } }
+  | { type: string }
+
+type TitleNode =
+  | { type: 'StringLiteral'; value: string }
+  | {
+      type: 'TemplateLiteral'
+      expressions: unknown[]
+      quasis: Array<{ value: { cooked?: string } }>
+    }
+  | { type: string }
+
+interface StackFrameLike {
+  getFileName(): string | null
+  getLineNumber(): number | null
+  getColumnNumber(): number | null
+}
+
+import {
+  PARSE_PLUGINS,
+  TEST_FN_NAMES,
+  SUITE_FN_NAMES,
+  STEP_FILE_RE,
+  STEP_DIR_RE,
+  SPEC_FILE_RE,
+  FEATURE_FILE_RE
+} from '../constants.js'
+
+const require = createRequire(import.meta.url)
+const traverse = (
+  require('@babel/traverse') as {
+    default: (parent: BabelNode, opts?: TraverseOptions) => void
+  }
+).default
+
+export interface Loc {
+  type: 'test' | 'suite'
+  name: string
+  titlePath: string[]
+  line?: number
+  column?: number
+}
+
+function rootCalleeName(callee: CalleeNode | undefined): string | undefined {
+  if (!callee) {
+    return
+  }
+  if (callee.type === 'Identifier') {
+    return (callee as { name: string }).name
+  }
+  if (callee.type === 'MemberExpression') {
+    const obj = (callee as { object: { type: string; name?: string } }).object
+    return obj && obj.type === 'Identifier' ? obj.name : undefined
+  }
+  return
+}
+
+/** Parse a JS/TS test/spec file and collect suite/test calls (Mocha/Jasmine)
+ *  with full title paths. */
+export function findTestLocations(filePath: string): Loc[] {
+  if (!fs.existsSync(filePath)) {
+    return []
+  }
+
+  const src = fs.readFileSync(filePath, 'utf-8')
+  const ast = parse(src, {
+    sourceType: 'module',
+    plugins: [...PARSE_PLUGINS],
+    errorRecovery: true,
+    allowReturnOutsideFunction: true
+  })
+
+  const out: Loc[] = []
+  const suiteStack: string[] = []
+
+  const isSuite = (n?: string) =>
+    (!!n && (SUITE_FN_NAMES as readonly string[]).includes(n)) ||
+    n === 'Feature'
+  const isTest = (n?: string) =>
+    !!n && (TEST_FN_NAMES as readonly string[]).includes(n)
+
+  const staticTitle = (node: TitleNode | undefined): string | undefined => {
+    if (!node) {
+      return
+    }
+    if (node.type === 'StringLiteral') {
+      return (node as { value: string }).value
+    }
+    if (node.type === 'TemplateLiteral') {
+      const tl = node as {
+        expressions: unknown[]
+        quasis: Array<{ value: { cooked?: string } }>
+      }
+      if (tl.expressions.length === 0) {
+        return tl.quasis.map((q) => q.value.cooked ?? '').join('')
+      }
+    }
+    return
+  }
+
+  traverse(ast, {
+    enter(p) {
+      if (!p.isCallExpression()) {
+        return
+      }
+      const callee = p.node.callee as CalleeNode
+      const root = rootCalleeName(callee)
+      if (!root) {
+        return
+      }
+
+      if (isSuite(root)) {
+        const ttl = staticTitle(p.node.arguments?.[0] as TitleNode | undefined)
+        if (ttl) {
+          out.push({
+            type: 'suite',
+            name: ttl,
+            titlePath: [...suiteStack, ttl],
+            line: p.node.loc?.start.line,
+            column: p.node.loc?.start.column
+          })
+          suiteStack.push(ttl)
+        }
+      } else if (isTest(root)) {
+        const ttl = staticTitle(p.node.arguments?.[0] as TitleNode | undefined)
+        if (ttl) {
+          out.push({
+            type: 'test',
+            name: ttl,
+            titlePath: [...suiteStack, ttl],
+            line: p.node.loc?.start.line,
+            column: p.node.loc?.start.column
+          })
+        }
+      }
+    },
+    exit(p) {
+      if (!p.isCallExpression()) {
+        return
+      }
+      const callee = p.node.callee as CalleeNode
+      const root = rootCalleeName(callee)
+      if (!root || !isSuite(root)) {
+        return
+      }
+      const ttl = staticTitle(p.node.arguments?.[0] as TitleNode | undefined)
+      if (ttl && suiteStack[suiteStack.length - 1] === ttl) {
+        suiteStack.pop()
+      }
+    }
+  })
+
+  return out
+}
+
+/** Capture a stack trace and pick a user frame. Prefers step-definition
+ *  files, then specs, then `.feature` files. */
+export function getCurrentTestLocation(): {
+  file: string
+  line: number
+  column: number
+} | null {
+  const frames = parseStackTrace(new Error())
+
+  const pick = (predicate: (f: StackFrameLike) => boolean) => {
+    const f = frames.find((fr) => {
+      const fn = fr.getFileName()
+      return !!fn && !fn.includes('node_modules') && predicate(fr)
+    })
+    return f
+      ? {
+          file: f.getFileName() as string,
+          line: f.getLineNumber() as number,
+          column: f.getColumnNumber() as number
+        }
+      : null
+  }
+
+  const step = pick((fr) => {
+    const fn = fr.getFileName() as string
+    return STEP_FILE_RE.test(fn) || STEP_DIR_RE.test(fn)
+  })
+  if (step) {
+    return step
+  }
+
+  const spec = pick((fr) => SPEC_FILE_RE.test(fr.getFileName() as string))
+  if (spec) {
+    return spec
+  }
+
+  const feature = pick((fr) => FEATURE_FILE_RE.test(fr.getFileName() as string))
+  if (feature) {
+    return feature
+  }
+
+  return null
+}
diff --git a/packages/service/src/utils/source-mapping.ts b/packages/service/src/utils/source-mapping.ts
new file mode 100644
index 00000000..01cbba00
--- /dev/null
+++ b/packages/service/src/utils/source-mapping.ts
@@ -0,0 +1,272 @@
+import fs from 'fs'
+
+import {
+  TEST_FN_NAMES,
+  SUITE_FN_NAMES,
+  FEATURE_FILE_RE,
+  FEATURE_OR_SCENARIO_LINE_RE
+} from '../constants.js'
+import { findStepDefinitionLocation } from './step-defs.js'
+import {
+  findTestLocations,
+  getCurrentTestLocation,
+  type Loc
+} from './ast-locations.js'
+
+export { findTestLocations, getCurrentTestLocation }
+
+// ── Spec-file pointer + AST cache ───────────────────────────────────────────
+let CURRENT_SPEC_FILE: string | undefined
+export function setCurrentSpecFile(file?: string) {
+  CURRENT_SPEC_FILE = file
+}
+
+const _astCache = new Map<string, Loc[]>()
+
+// ── Text fallback helpers ───────────────────────────────────────────────────
+function normalizeFullTitle(full?: string): string {
+  return String(full || '')
+    .replace(/^\d+:\s*/, '') // drop worker prefix like "0: "
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+function escapeRegExp(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function offsetToLineCol(
+  src: string,
+  offset: number
+): { line: number; column: number } {
+  let line = 1
+  let col = 1
+  for (let i = 0; i < offset && i < src.length; i++) {
+    if (src.charCodeAt(i) === 10) {
+      line++
+      col = 1
+    } else {
+      col++
+    }
+  }
+  return { line, column: col }
+}
+
+/** Textual fallback for the AST scan: find it/test/specify("<title>", ...). */
+function findTestLocationByText(
+  file: string,
+  title: string
+): { file: string; line: number; column: number } | undefined {
+  try {
+    const src = fs.readFileSync(file, 'utf-8')
+    const q = `(['"\`])${escapeRegExp(title)}\\1`
+    const call = String.raw`\b(?:${(TEST_FN_NAMES as readonly string[]).join('|')})\s*\(\s*${q}`
+    const re = new RegExp(call)
+    const m = re.exec(src)
+    if (m && typeof m.index === 'number') {
+      const { line, column } = offsetToLineCol(src, m.index)
+      return { file, line, column }
+    }
+  } catch {
+    /* unreadable file */
+  }
+  return undefined
+}
+
+function findSuiteLocationByText(
+  file: string,
+  title: string
+): { file: string; line: number; column: number } | undefined {
+  try {
+    const src = fs.readFileSync(file, 'utf-8')
+    const q = `(['"\`])${escapeRegExp(title)}\\1`
+    const call = String.raw`\b(?:${(SUITE_FN_NAMES as readonly string[]).join('|')})\s*\(\s*${q}`
+    const re = new RegExp(call)
+    const m = re.exec(src)
+    if (m && typeof m.index === 'number') {
+      const { line, column } = offsetToLineCol(src, m.index)
+      return { file, line, column }
+    }
+  } catch {
+    /* unreadable file */
+  }
+  return undefined
+}
+
+// ── Stats enrichers ─────────────────────────────────────────────────────────
+/**
+ * Subset of stats fields {@link mapTestToSource}/{@link mapSuiteToSource}
+ * read. The wdio reporter's TestStats/SuiteStats classes carry many more
+ * fields (hooks, retries, etc.) that vary by reporter version, so the
+ * function parameters stay `unknown` and we narrow internally with one cast
+ * per call instead of per-field `as any` sprinkled through the body.
+ */
+interface StatsHintShape {
+  title?: string
+  fullTitle?: string
+  file?: string
+  specFile?: string
+  specs?: string[]
+}
+
+const asHint = (stats: unknown): StatsHintShape =>
+  (stats ?? {}) as StatsHintShape
+
+/** Pull the most-relevant hint path from a stats fragment. Falls through:
+ *  specs[0] → file → specFile → caller hint → tracked current spec file. */
+function hintFromStats(
+  stats: StatsHintShape,
+  hintFile: string | undefined
+): string | undefined {
+  if (Array.isArray(stats.specs) && stats.specs[0]) {
+    return stats.specs[0]
+  }
+  return stats.file || stats.specFile || hintFile || CURRENT_SPEC_FILE
+}
+
+/**
+ * Enrich test stats with `file`/`line`/`column`:
+ *  - Cucumber: prefer step-definition file/line
+ *  - Mocha/Jasmine: AST with suite path; fallback to runtime stack
+ */
+export function mapTestToSource(testStats: unknown, hintFile?: string): void {
+  const t = asHint(testStats)
+  const title = String(t.title ?? '').trim()
+  const fullTitle = normalizeFullTitle(t.fullTitle)
+
+  // Cucumber-like step: resolve step-definition location
+  if (/^(Given|When|Then|And|But)\b/i.test(title)) {
+    const hint = hintFromStats(t, hintFile)
+    const stepLoc = findStepDefinitionLocation(
+      title,
+      hint && FEATURE_FILE_RE.test(hint) ? hint : undefined
+    )
+    if (stepLoc) {
+      Object.assign(testStats as object, stepLoc)
+      return
+    }
+  }
+
+  // Mocha/Jasmine static mapping via AST. The .file-first fallback ORDER
+  // here matches the previous behavior — .file beats .specs[0].
+  const file =
+    t.file ||
+    (Array.isArray(t.specs) ? t.specs[0] : undefined) ||
+    t.specFile ||
+    hintFile ||
+    CURRENT_SPEC_FILE
+
+  if (file && !FEATURE_FILE_RE.test(file)) {
+    if (!_astCache.has(file)) {
+      try {
+        _astCache.set(file, findTestLocations(file))
+      } catch {
+        /* parse errors */
+      }
+    }
+    const locs = _astCache.get(file)
+    if (locs?.length) {
+      const match =
+        locs.find(
+          (l) =>
+            l.type === 'test' &&
+            l.name === title &&
+            fullTitle.includes(l.titlePath.join(' '))
+        ) || locs.find((l) => l.type === 'test' && l.name === title)
+
+      if (match) {
+        Object.assign(testStats as object, {
+          file,
+          line: match.line,
+          column: match.column
+        })
+        return
+      }
+    }
+
+    const textLoc = findTestLocationByText(file, title)
+    if (textLoc) {
+      Object.assign(testStats as object, textLoc)
+      return
+    }
+  }
+
+  // Runtime stack fallback
+  const runtimeLoc = getCurrentTestLocation()
+  if (runtimeLoc) {
+    Object.assign(testStats as object, runtimeLoc)
+  }
+}
+
+/**
+ * Enrich a suite with file/line:
+ *  - Mocha/Jasmine: map describe/context by title path using AST
+ *  - Cucumber: find Feature/Scenario line in .feature file
+ */
+export function mapSuiteToSource(
+  suiteStats: unknown,
+  hintFile?: string,
+  suitePath: string[] = []
+): void {
+  const s = asHint(suiteStats)
+  const title = String(s.title ?? '').trim()
+  const file = s.file || hintFile || CURRENT_SPEC_FILE
+  if (!title || !file) {
+    return
+  }
+
+  // Cucumber: feature/scenario line
+  if (FEATURE_FILE_RE.test(file)) {
+    try {
+      const src = fs.readFileSync(file, 'utf-8').split(/\r?\n/)
+      const norm = (s: string) => s.trim().replace(/\s+/g, ' ')
+      const want = norm(title)
+      for (let i = 0; i < src.length; i++) {
+        const m = src[i].match(FEATURE_OR_SCENARIO_LINE_RE)
+        if (m && norm(m[2]) === want) {
+          Object.assign(suiteStats as object, { file, line: i + 1, column: 1 })
+          return
+        }
+      }
+    } catch {
+      /* unreadable file */
+    }
+    return
+  }
+
+  // Mocha/Jasmine: AST first
+  try {
+    if (!_astCache.has(file)) {
+      _astCache.set(file, findTestLocations(file))
+    }
+    const locs = _astCache.get(file)
+    if (locs?.length) {
+      const match =
+        locs.find(
+          (l) =>
+            l.type === 'suite' &&
+            Array.isArray(l.titlePath) &&
+            l.titlePath.length === suitePath.length &&
+            l.titlePath.every((t: string, i: number) => t === suitePath[i])
+        ) ||
+        locs.find((l) => l.type === 'suite' && l.titlePath.at(-1) === title)
+
+      if (match?.line) {
+        Object.assign(suiteStats as object, {
+          file,
+          line: match.line,
+          column: match.column
+        })
+        return
+      }
+    }
+  } catch {
+    /* ignore */
+  }
+
+  // Fallback: text search
+  const textLoc = findSuiteLocationByText(file, title)
+  if (textLoc) {
+    Object.assign(suiteStats as object, textLoc)
+  }
+}
diff --git a/packages/service/src/utils/step-defs.ts b/packages/service/src/utils/step-defs.ts
new file mode 100644
index 00000000..0c897f78
--- /dev/null
+++ b/packages/service/src/utils/step-defs.ts
@@ -0,0 +1,321 @@
+import fs from 'fs'
+import path from 'node:path'
+import { createRequire } from 'node:module'
+import { parse } from '@babel/parser'
+import type {
+  Node as BabelNode,
+  NodePath,
+  TraverseOptions
+} from '@babel/traverse'
+import type { CallExpression, Identifier, MemberExpression } from '@babel/types'
+
+import {
+  PARSE_PLUGINS,
+  STEP_FN_NAMES,
+  STEP_DEF_REGEX_LITERAL_RE,
+  STEP_DEF_STRING_RE,
+  SOURCE_FILE_EXT_RE,
+  STEPS_DIR_CANDIDATES,
+  STEPS_DIR_ASCENT_MAX,
+  STEPS_GLOBAL_SEARCH_MAX_DEPTH
+} from '../constants.js'
+import type { StepDef } from '../types.js'
+
+const require = createRequire(import.meta.url)
+const traverse = (
+  require('@babel/traverse') as {
+    default: (parent: BabelNode, opts?: TraverseOptions) => void
+  }
+).default
+
+let CE: { CucumberExpression: any; ParameterTypeRegistry: any } | undefined
+try {
+  const ce = require('@cucumber/cucumber-expressions')
+  CE = {
+    CucumberExpression: ce.CucumberExpression,
+    ParameterTypeRegistry: ce.ParameterTypeRegistry
+  }
+} catch {
+  /* optional */
+}
+
+// Ascending search from a starting directory.
+function findStepsDir(startDir: string): string | undefined {
+  let dir = startDir
+  for (let i = 0; i < STEPS_DIR_ASCENT_MAX; i++) {
+    for (const c of STEPS_DIR_CANDIDATES) {
+      const p = path.join(dir, c)
+      if (fs.existsSync(p) && fs.statSync(p).isDirectory()) {
+        return p
+      }
+    }
+    const up = path.dirname(dir)
+    if (up === dir) {
+      break
+    }
+    dir = up
+  }
+  return undefined
+}
+
+// BFS under cwd for a features/*/(step-definitions|steps) directory.
+let globalStepsDir: string | undefined
+function findStepsDirGlobal(): string | undefined {
+  if (globalStepsDir && fs.existsSync(globalStepsDir)) {
+    return globalStepsDir
+  }
+
+  const root = process.cwd()
+  const queue: { dir: string; depth: number }[] = [{ dir: root, depth: 0 }]
+  const maxDepth = STEPS_GLOBAL_SEARCH_MAX_DEPTH
+  while (queue.length) {
+    const { dir, depth } = queue.shift()!
+    if (depth > maxDepth) {
+      continue
+    }
+
+    const featuresDir = path.join(dir, 'features')
+    if (fs.existsSync(featuresDir) && fs.statSync(featuresDir).isDirectory()) {
+      for (const c of STEPS_DIR_CANDIDATES) {
+        const p = path.join(featuresDir, c)
+        if (fs.existsSync(p) && fs.statSync(p).isDirectory()) {
+          globalStepsDir = p
+          return p
+        }
+      }
+    }
+
+    for (const entry of fs.readdirSync(dir)) {
+      if (entry.startsWith('.')) {
+        continue
+      }
+      const full = path.join(dir, entry)
+      let st: fs.Stats
+      try {
+        st = fs.statSync(full)
+      } catch {
+        continue
+      }
+      if (st.isDirectory() && !full.includes('node_modules')) {
+        queue.push({ dir: full, depth: depth + 1 })
+      }
+    }
+  }
+  return undefined
+}
+
+function listFiles(dir: string): string[] {
+  const out: string[] = []
+  for (const entry of fs.readdirSync(dir)) {
+    const full = path.join(dir, entry)
+    const st = fs.statSync(full)
+    if (st.isDirectory()) {
+      out.push(...listFiles(full))
+    } else if (SOURCE_FILE_EXT_RE.test(entry)) {
+      out.push(full)
+    }
+  }
+  return out
+}
+
+// Text fallback: scan a file for step definitions on a single line.
+function collectStepDefsFromText(file: string): StepDef[] {
+  const out: StepDef[] = []
+  const src = fs.readFileSync(file, 'utf-8')
+  const lines = src.split(/\r?\n/)
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const mRe = line.match(STEP_DEF_REGEX_LITERAL_RE)
+    if (mRe) {
+      const lit = mRe[2]
+      const lastSlash = lit.lastIndexOf('/')
+      const pattern = lit.slice(1, lastSlash)
+      const flags = lit.slice(lastSlash + 1)
+      try {
+        out.push({
+          kind: 'regex',
+          regex: new RegExp(pattern, flags),
+          file,
+          line: i + 1,
+          column: mRe.index ?? 0
+        })
+        continue
+      } catch {
+        /* malformed regex */
+      }
+    }
+    const mStr = line.match(STEP_DEF_STRING_RE)
+    if (mStr) {
+      const keyword = mStr[1]
+      const text = mStr[3]
+      out.push({
+        kind: 'string',
+        keyword,
+        text,
+        file,
+        line: i + 1,
+        column: mStr.index ?? 0
+      })
+    }
+  }
+  return out
+}
+
+const stepsCache = new Map<string, StepDef[]>()
+function collectStepDefs(stepsDir: string): StepDef[] {
+  const cached = stepsCache.get(stepsDir)
+  if (cached) {
+    return cached
+  }
+
+  const files = listFiles(stepsDir)
+  const defs: StepDef[] = []
+
+  for (const file of files) {
+    let pushed = 0
+    try {
+      const src = fs.readFileSync(file, 'utf-8')
+      const ast = parse(src, {
+        sourceType: 'module',
+        plugins: [...PARSE_PLUGINS],
+        errorRecovery: true
+      })
+
+      traverse(ast, {
+        CallExpression(p: NodePath<CallExpression>) {
+          const callee = p.node.callee
+          let name: string | undefined
+          if (callee.type === 'Identifier') {
+            name = (callee as Identifier).name
+          } else if (callee.type === 'MemberExpression') {
+            const prop = (callee as MemberExpression).property
+            if (prop.type === 'Identifier') {
+              name = (prop as Identifier).name
+            }
+          }
+          if (!name || !(STEP_FN_NAMES as readonly string[]).includes(name)) {
+            return
+          }
+
+          type StepArg =
+            | { type: 'RegExpLiteral'; pattern: string; flags?: string }
+            | { type: 'StringLiteral'; value: string }
+            | { type: string }
+          const arg = p.node.arguments?.[0] as StepArg | undefined
+          const loc = {
+            file,
+            line: p.node.loc?.start.line ?? 1,
+            column: p.node.loc?.start.column ?? 0
+          }
+
+          if (arg?.type === 'RegExpLiteral') {
+            const re = arg as { pattern: string; flags?: string }
+            defs.push({
+              kind: 'regex',
+              regex: new RegExp(re.pattern, re.flags ?? ''),
+              ...loc
+            })
+            pushed++
+          } else if (arg?.type === 'StringLiteral') {
+            const sl = arg as { value: string }
+            if (CE && sl.value.includes('{')) {
+              const expr = new CE!.CucumberExpression(
+                sl.value,
+                new CE!.ParameterTypeRegistry()
+              )
+              defs.push({ kind: 'expression', expr, ...loc })
+            } else {
+              defs.push({
+                kind: 'string',
+                keyword: name,
+                text: sl.value,
+                ...loc
+              })
+            }
+            pushed++
+          }
+        }
+      })
+    } catch {
+      /* AST errors fall through to text scan */
+    }
+    if (pushed === 0) {
+      const fromText = collectStepDefsFromText(file)
+      if (fromText.length) {
+        defs.push(...fromText)
+      }
+    }
+  }
+
+  stepsCache.set(stepsDir, defs)
+  return defs
+}
+
+/**
+ * Resolve a step title (e.g. `Given I open the app`) to the file:line where
+ * the Cucumber step definition is declared. Walks up from `hintPath` first
+ * (per-feature step dirs), then falls back to a global BFS under cwd.
+ */
+export function findStepDefinitionLocation(
+  stepTitle: string,
+  hintPath?: string
+): { file: string; line: number; column: number } | undefined {
+  const baseDir = hintPath
+    ? path.extname(hintPath)
+      ? path.dirname(hintPath)
+      : hintPath
+    : undefined
+
+  let stepsDir = baseDir ? findStepsDir(baseDir) : undefined
+  if (!stepsDir) {
+    stepsDir = findStepsDirGlobal()
+  }
+  if (!stepsDir) {
+    return
+  }
+
+  const defs = collectStepDefs(stepsDir)
+
+  const title = String(stepTitle ?? '').trim()
+  const titleNoKw = title.replace(/^(Given|When|Then|And|But)\s+/i, '').trim()
+
+  // String match
+  const s = defs.find(
+    (d) =>
+      d.kind === 'string' &&
+      (titleNoKw.localeCompare(d.text!, 'en', { sensitivity: 'base' }) === 0 ||
+        title.localeCompare(`${d.keyword} ${d.text}`, 'en', {
+          sensitivity: 'base'
+        }) === 0)
+  )
+  if (s) {
+    return { file: s.file, line: s.line, column: s.column }
+  }
+
+  // Cucumber expression match
+  const e = defs.find(
+    (d) =>
+      d.kind === 'expression' &&
+      (() => {
+        try {
+          return !!d.expr!.match(titleNoKw) || !!d.expr!.match(title)
+        } catch {
+          return false
+        }
+      })()
+  )
+  if (e) {
+    return { file: e.file, line: e.line, column: e.column }
+  }
+
+  // Regex match
+  const r = defs.find(
+    (d) =>
+      d.kind === 'regex' && (d.regex!.test(titleNoKw) || d.regex!.test(title))
+  )
+  if (r) {
+    return { file: r.file, line: r.line, column: r.column }
+  }
+
+  return
+}
diff --git a/packages/service/src/video-encoder.ts b/packages/service/src/video-encoder.ts
deleted file mode 100644
index d92cc02f..00000000
--- a/packages/service/src/video-encoder.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import os from 'node:os'
-import { createRequire } from 'node:module'
-
-import logger from '@wdio/logger'
-
-import type { ScreencastFrame, ScreencastOptions } from './types.js'
-
-// fluent-ffmpeg uses `export =` (CommonJS). With module:NodeNext, dynamic
-// import() of such modules doesn't resolve .default correctly in TypeScript.
-// createRequire is the idiomatic way to load CJS modules in ESM.
-const require = createRequire(import.meta.url)
-
-const log = logger('@wdio/devtools-service:VideoEncoder')
-
-/**
- * Encodes an array of CDP screencast frames into a .webm video file using
- * ffmpeg (via fluent-ffmpeg) and the VP8 codec (libvpx).
- *
- * Strategy:
- *   1. Write each frame as a JPEG (or PNG) file in a temp directory.
- *   2. Write an ffconcat manifest that assigns each frame its exact display
- *      duration based on the inter-frame timestamp delta. This produces a
- *      variable-frame-rate video that accurately reflects real timing even
- *      when commands cause long pauses between frames.
- *   3. Run ffmpeg with the concat demuxer → libvpx (VP8) → .webm output.
- *   4. Clean up the temp directory regardless of success or failure.
- *
- * @throws If no frames are provided, if fluent-ffmpeg is not installed, or if
- *         the ffmpeg binary is not found on PATH.
- */
-export async function encodeToVideo(
-  frames: ScreencastFrame[],
-  outputPath: string,
-  options: Pick<ScreencastOptions, 'captureFormat'> = {}
-): Promise<void> {
-  if (frames.length === 0) {
-    throw new Error('VideoEncoder: no frames to encode')
-  }
-
-  // Load fluent-ffmpeg via require so TypeScript is happy with the export=
-  // style module. Wrap in try/catch for a clear missing-package message.
-  // fluent-ffmpeg is an optional peer dependency so we use `any` here.
-
-  let ffmpeg: any
-  try {
-    ffmpeg = require('fluent-ffmpeg')
-  } catch {
-    throw new Error(
-      'VideoEncoder: fluent-ffmpeg is required for screencast encoding. ' +
-        'Install it with: npm install fluent-ffmpeg'
-    )
-  }
-
-  const ext = options.captureFormat === 'png' ? 'png' : 'jpg'
-  const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), 'wdio-screencast-'))
-
-  try {
-    // ── Step 1: write frame files ──────────────────────────────────────────
-    const manifestLines: string[] = ['ffconcat version 1.0']
-
-    for (let i = 0; i < frames.length; i++) {
-      const frameName = `frame-${String(i).padStart(6, '0')}.${ext}`
-      const framePath = path.join(tmpDir, frameName)
-
-      await fs.writeFile(framePath, Buffer.from(frames[i].data, 'base64'))
-
-      // Duration = time until the NEXT frame (or 100 ms for the last frame).
-      const nextTs = frames[i + 1]?.timestamp ?? frames[i].timestamp + 100
-      const durationSecs = Math.max((nextTs - frames[i].timestamp) / 1000, 0.01)
-
-      manifestLines.push(`file '${framePath}'`)
-      manifestLines.push(`duration ${durationSecs.toFixed(6)}`)
-    }
-
-    // ffconcat requires the last file entry to be listed a second time without
-    // a duration so the muxer knows where the last frame ends.
-    const lastFramePath = path.join(
-      tmpDir,
-      `frame-${String(frames.length - 1).padStart(6, '0')}.${ext}`
-    )
-    manifestLines.push(`file '${lastFramePath}'`)
-
-    const manifestPath = path.join(tmpDir, 'manifest.txt')
-    await fs.writeFile(manifestPath, manifestLines.join('\n'))
-
-    // ── Step 2: encode with ffmpeg ─────────────────────────────────────────
-    log.info(`VideoEncoder: encoding ${frames.length} frames → ${outputPath}`)
-
-    await new Promise<void>((resolve, reject) => {
-      ffmpeg()
-        .input(manifestPath)
-        .inputOptions(['-f', 'concat', '-safe', '0'])
-        // VP8 (libvpx) produces broadly compatible WebM that plays in Chrome,
-        // Firefox, VS Code's built-in media player, and most video players.
-        // VP9 CRF mode has widespread issues with incorrect color-space metadata
-        // (bt470bg instead of bt709) and missing stream PTS that cause players to
-        // report "invalid file" even when the container is well-formed.
-        .videoCodec('libvpx')
-        .outputOptions([
-          // 1 Mbit/s target — good quality at reasonable file size for screencasts
-          '-b:v',
-          '1M',
-          // Standard chroma subsampling required for VP8
-          '-pix_fmt',
-          'yuv420p',
-          // Preserve the variable frame rate from the concat manifest timestamps.
-          // Without this ffmpeg re-timestamps frames to a fixed rate and the
-          // per-frame durations written in the manifest are ignored.
-          '-vsync',
-          'vfr',
-          // Disable alt-ref frames — required for WebM muxer compatibility
-          '-auto-alt-ref',
-          '0',
-          // Mark the video stream as the default track so Chrome/VS Code
-          // select it automatically without needing an explicit track selection
-          '-disposition:v',
-          'default'
-        ])
-        .output(outputPath)
-        .on('end', () => resolve())
-        .on('error', (err: Error) => {
-          const msg = err.message || ''
-          if (
-            msg.includes('Cannot find ffmpeg') ||
-            msg.includes('ENOENT') ||
-            msg.includes('spawn') ||
-            msg.includes('not found')
-          ) {
-            reject(
-              new Error(
-                'VideoEncoder: ffmpeg binary not found on PATH. ' +
-                  'Install ffmpeg: https://ffmpeg.org/download.html'
-              )
-            )
-          } else {
-            reject(new Error(`VideoEncoder: ffmpeg error — ${msg}`))
-          }
-        })
-        .run()
-    })
-
-    log.info(`✓ Screencast video saved: ${outputPath}`)
-  } finally {
-    // Always clean up temp files, even if encoding failed.
-    await fs.rm(tmpDir, { recursive: true, force: true }).catch((rmErr) => {
-      log.warn(`VideoEncoder: failed to clean temp dir — ${rmErr.message}`)
-    })
-  }
-}
diff --git a/packages/service/tests/index.test.ts b/packages/service/tests/index.test.ts
index 59338114..6d2a56ff 100644
--- a/packages/service/tests/index.test.ts
+++ b/packages/service/tests/index.test.ts
@@ -1,4 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
+import type * as DevtoolsCore from '@wdio/devtools-core'
 import DevToolsHookService from '../src/index.js'
 
 const fakeFrame = {
@@ -46,9 +47,23 @@ vi.mock('../src/screencast.js', () => ({
   })
 }))
 
-vi.mock('../src/video-encoder.js', () => ({
-  encodeToVideo: vi.fn().mockResolvedValue(undefined)
-}))
+vi.mock('@wdio/devtools-core', async (importOriginal) => {
+  const actual = await importOriginal<typeof DevtoolsCore>()
+  return {
+    ...actual,
+    encodeToVideo: vi.fn().mockResolvedValue(undefined),
+    finalizeScreencast: vi.fn(async (opts: any) => {
+      await opts.recorder.stop()
+      opts.sendUpstream('screencast', {
+        sessionId: opts.sessionId,
+        videoPath: `/out/${opts.filenamePrefix}-${opts.sessionId}.webm`,
+        videoFile: `${opts.filenamePrefix}-${opts.sessionId}.webm`,
+        frameCount: opts.recorder.frames.length,
+        duration: opts.recorder.duration
+      })
+    })
+  }
+})
 
 vi.mock('node:fs/promises', () => ({
   default: { writeFile: vi.fn().mockResolvedValue(undefined) }
@@ -181,7 +196,6 @@ describe('DevtoolsService - Screencast Integration', () => {
   })
 
   it('full lifecycle: start → setStartMarker on url → encode on after() → notify backend', async () => {
-    const { encodeToVideo } = await import('../src/video-encoder.js')
     service = new DevToolsHookService({ screencast: { enabled: true } })
     await service.before({} as any, [], mockBrowser)
 
@@ -203,49 +217,39 @@ describe('DevtoolsService - Screencast Integration', () => {
     await service.after()
 
     expect(mockScreencastRecorder.stop).toHaveBeenCalled()
-    expect(encodeToVideo).toHaveBeenCalledWith(
-      mockScreencastRecorder.frames,
-      expect.stringContaining('wdio-video-session-123.webm'),
-      expect.any(Object)
-    )
     expect(mockSessionCapturerInstance.sendUpstream).toHaveBeenCalledWith(
       'screencast',
       expect.objectContaining({
         sessionId: 'session-123',
         frameCount: 10,
-        duration: 5000
+        duration: 5000,
+        videoFile: 'wdio-video-session-123.webm'
       })
     )
   })
 
-  it('skips when disabled, skips ghost sessions, and swallows encode errors', async () => {
-    const { encodeToVideo } = await import('../src/video-encoder.js')
+  it('skips when disabled, forwards minFrames=5 for ghost sessions, swallows encode errors', async () => {
+    const { finalizeScreencast } = await import('@wdio/devtools-core')
 
-    // Disabled — recorder never starts
+    // Disabled — recorder never starts, finalizer never called
     service = new DevToolsHookService({})
     await service.before({} as any, [], mockBrowser)
     expect(mockScreencastRecorder.start).not.toHaveBeenCalled()
+    expect(finalizeScreencast).not.toHaveBeenCalled()
 
-    // Ghost session — <5 frames, encoding skipped
+    // Enabled — finalizer is called with minFrames=5 so the helper skips
+    // ghost sessions internally (we don't need to assert recorder.frames).
+    vi.mocked(finalizeScreencast).mockClear()
     service = new DevToolsHookService({ screencast: { enabled: true } })
     await service.before({} as any, [], mockBrowser)
-    mockScreencastRecorder.frames = Array(3).fill({
-      data: 'f',
-      timestamp: 1000
-    })
-    vi.mocked(encodeToVideo).mockClear()
+    mockScreencastRecorder.frames = Array(3).fill({ data: 'f', timestamp: 1 })
     await service.after()
-    expect(encodeToVideo).not.toHaveBeenCalled()
+    expect(finalizeScreencast).toHaveBeenCalledWith(
+      expect.objectContaining({ filenamePrefix: 'wdio-video', minFrames: 5 })
+    )
 
-    // Encode error — swallowed, doesn't throw
-    service = new DevToolsHookService({ screencast: { enabled: true } })
-    await service.before({} as any, [], mockBrowser)
-    mockScreencastRecorder.frames = Array(10).fill({
-      data: 'f',
-      timestamp: 1000
-    })
-    vi.mocked(encodeToVideo).mockRejectedValueOnce(new Error('ffmpeg missing'))
-    await expect(service.after()).resolves.toBeUndefined()
+    // Encode-error swallowing is the responsibility of the shared finalize
+    // helper itself (covered in core/tests). Service just needs to invoke it.
   })
 
   it('onReload finalizes old session and starts fresh recorder', async () => {
diff --git a/packages/service/tests/video-encoder.test.ts b/packages/service/tests/video-encoder.test.ts
index be8a5778..f6f3916c 100644
--- a/packages/service/tests/video-encoder.test.ts
+++ b/packages/service/tests/video-encoder.test.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 
-import { encodeToVideo } from '../src/video-encoder.js'
+import { encodeToVideo } from '@wdio/devtools-core'
 import type { ScreencastFrame } from '../src/types.js'
 
 vi.mock('@wdio/logger', () => {
@@ -51,7 +51,7 @@ const makeFrames = (timestamps: number[]): ScreencastFrame[] =>
 describe('encodeToVideo', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    vi.mocked(fs.mkdtemp).mockResolvedValue('/tmp/wdio-screencast-abc123')
+    vi.mocked(fs.mkdtemp).mockResolvedValue('/tmp/devtools-screencast-abc123')
     vi.mocked(fs.writeFile).mockResolvedValue(undefined)
     vi.mocked(fs.rm).mockResolvedValue(undefined)
 
@@ -87,13 +87,13 @@ describe('encodeToVideo', () => {
 
     // Temp dir created
     expect(fs.mkdtemp).toHaveBeenCalledWith(
-      path.join('/tmp', 'wdio-screencast-')
+      path.join('/tmp', 'devtools-screencast-')
     )
 
     // 3 frame files + 1 manifest = 4 writes
     expect(fs.writeFile).toHaveBeenCalledTimes(4)
     expect(fs.writeFile).toHaveBeenCalledWith(
-      '/tmp/wdio-screencast-abc123/frame-000000.jpg',
+      '/tmp/devtools-screencast-abc123/frame-000000.jpg',
       expect.any(Buffer)
     )
 
@@ -112,7 +112,7 @@ describe('encodeToVideo', () => {
     expect(mockFfmpegInstance.output).toHaveBeenCalledWith('/out/video.webm')
 
     // Temp dir cleaned up
-    expect(fs.rm).toHaveBeenCalledWith('/tmp/wdio-screencast-abc123', {
+    expect(fs.rm).toHaveBeenCalledWith('/tmp/devtools-screencast-abc123', {
       recursive: true,
       force: true
     })
@@ -131,7 +131,7 @@ describe('encodeToVideo', () => {
     ).rejects.toThrow('ffmpeg binary not found')
 
     // Temp dir still cleaned up on failure
-    expect(fs.rm).toHaveBeenCalledWith('/tmp/wdio-screencast-abc123', {
+    expect(fs.rm).toHaveBeenCalledWith('/tmp/devtools-screencast-abc123', {
       recursive: true,
       force: true
     })
diff --git a/packages/service/vite.config.ts b/packages/service/vite.config.ts
index ea7a344c..e0f04aa0 100644
--- a/packages/service/vite.config.ts
+++ b/packages/service/vite.config.ts
@@ -33,8 +33,34 @@ export default defineConfig({
       output: {
         entryFileNames: '[name].js'
       },
-      external: (id) =>
-        !id.startsWith(path.resolve(__dirname, 'src')) && !id.startsWith('./')
+      // Inline private workspace packages (@wdio/devtools-core,
+      // @wdio/devtools-shared) — they are not published, so the dist must
+      // not contain runtime `import` statements for them. The `id` here can
+      // be EITHER the unresolved package name OR an already-resolved absolute
+      // path (vite resolves workspace symlinks before calling this), so we
+      // check for both forms. See CLAUDE.md §2.6.
+      external: (id) => {
+        const isPrivateWorkspaceDep =
+          id === '@wdio/devtools-core' ||
+          id === '@wdio/devtools-shared' ||
+          id.startsWith('@wdio/devtools-core/') ||
+          id.startsWith('@wdio/devtools-shared/') ||
+          id.includes('/packages/core/') ||
+          id.includes('/packages/shared/')
+        if (isPrivateWorkspaceDep) {
+          return false
+        }
+        // Any relative import (`./foo.js` from top-level, OR `../foo.js`
+        // from a subfolder like utils/) and any absolute path under src/
+        // must be bundled, not externalized. The `../` case was missing
+        // before and caused constants.ts to leak as a non-emitted external
+        // import once utils/ subfolder modules started importing it.
+        return (
+          !id.startsWith(path.resolve(__dirname, 'src')) &&
+          !id.startsWith('./') &&
+          !id.startsWith('../')
+        )
+      }
     }
   },
   plugins: [
diff --git a/packages/shared/package.json b/packages/shared/package.json
new file mode 100644
index 00000000..419f0c12
--- /dev/null
+++ b/packages/shared/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@wdio/devtools-shared",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Shared types, constants, and HTTP/WS contracts for @wdio/devtools-* packages. Workspace-internal, never published — code is inlined into each consuming package at build time.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webdriverio/devtools.git",
+    "directory": "packages/shared"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./*": {
+      "types": "./src/*.ts",
+      "default": "./src/*.ts"
+    }
+  },
+  "types": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint ."
+  },
+  "license": "MIT"
+}
diff --git a/packages/shared/src/baseline.ts b/packages/shared/src/baseline.ts
new file mode 100644
index 00000000..aa6713ed
--- /dev/null
+++ b/packages/shared/src/baseline.ts
@@ -0,0 +1,74 @@
+import type { PreservedAttempt } from './types.js'
+
+export const BASELINE_API = {
+  preserve: '/api/baseline/preserve',
+  clear: '/api/baseline/clear',
+  get: '/api/baseline/:testUid'
+} as const
+
+export const BASELINE_WS_SCOPE = {
+  saved: 'baseline:saved',
+  cleared: 'baseline:cleared'
+} as const
+
+export type BaselineWsScope =
+  (typeof BASELINE_WS_SCOPE)[keyof typeof BASELINE_WS_SCOPE]
+
+// ─── HTTP request/response contracts ────────────────────────────────────────
+
+/** POST /api/baseline/preserve body. */
+export interface BaselinePreserveRequest {
+  testUid: string
+  scope: 'test' | 'suite'
+}
+
+/** 200 response from /api/baseline/preserve. */
+export interface BaselinePreserveResponse {
+  ok: true
+  attempt: PreservedAttempt
+}
+
+/** POST /api/baseline/clear body. */
+export interface BaselineClearRequest {
+  testUid: string
+}
+
+/** 200 response from /api/baseline/clear. */
+export interface BaselineClearResponse {
+  ok: true
+  removed: boolean
+}
+
+/** URL params for GET /api/baseline/:testUid. */
+export interface BaselineGetParams {
+  testUid: string
+}
+
+/** Querystring for GET /api/baseline/:testUid. */
+export interface BaselineGetQuery {
+  scope?: 'test' | 'suite'
+}
+
+/** Response from GET /api/baseline/:testUid. */
+export interface BaselineGetResponse {
+  baseline: PreservedAttempt | undefined
+  latest: PreservedAttempt | undefined
+}
+
+/** 4xx response shape from any baseline endpoint. */
+export interface BaselineErrorResponse {
+  error: string
+}
+
+// ─── WebSocket broadcast payloads ───────────────────────────────────────────
+
+/** Payload broadcast under BASELINE_WS_SCOPE.saved. */
+export interface BaselineSavedWsPayload {
+  testUid: string
+  attempt: PreservedAttempt
+}
+
+/** Payload broadcast under BASELINE_WS_SCOPE.cleared. */
+export interface BaselineClearedWsPayload {
+  testUid: string
+}
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
new file mode 100644
index 00000000..6ce4e107
--- /dev/null
+++ b/packages/shared/src/index.ts
@@ -0,0 +1,7 @@
+// Single source of truth for types, constants, and HTTP/WS contracts shared
+// across @wdio/devtools-* packages. See ARCHITECTURE.md §2 and CLAUDE.md §2.1.
+
+export * from './baseline.js'
+export * from './routes.js'
+export * from './runner.js'
+export * from './types.js'
diff --git a/packages/shared/src/routes.ts b/packages/shared/src/routes.ts
new file mode 100644
index 00000000..91084bb4
--- /dev/null
+++ b/packages/shared/src/routes.ts
@@ -0,0 +1,43 @@
+/**
+ * WebSocket upgrade paths on the backend's Fastify server. Each adapter opens
+ * one socket at `worker`; one or more browser tabs subscribe at `client`.
+ *
+ * The HTTP API endpoints under `/api/baseline/*` live in `./baseline.ts`.
+ */
+export const WS_PATHS = {
+  /** Adapter session upgrade endpoint. One socket per running adapter. */
+  worker: '/worker',
+  /** App/UI client upgrade endpoint. Multiple browser tabs may connect. */
+  client: '/client'
+} as const
+
+/**
+ * Control-frame scopes exchanged over the worker↔backend↔client WS channels.
+ * `BASELINE_WS_SCOPE` (in `./baseline.ts`) covers the baseline-specific
+ * scopes; this object covers the runtime control frames. Single source of
+ * truth — typos previously caused silent breakage when one end of the wire
+ * sent a string the other end didn't recognize.
+ */
+export const WS_SCOPE = {
+  /** Backend → worker: a dashboard client has subscribed. Wakes up the
+   *  adapter's `await UI ready` gate before tests start. */
+  clientConnected: 'clientConnected',
+  /** Backend → worker: the last dashboard tab closed. Triggers the
+   *  interactive shutdown flow (close WS, exit, pkill the dashboard). */
+  clientDisconnected: 'clientDisconnected',
+  /** Worker → backend → clients (or app-local): wipe the visualization data
+   *  for a specific test/suite uid (or the whole tree). */
+  clearExecutionData: 'clearExecutionData',
+  /** Worker → backend: clear-by-test-uid request (drives clearExecutionData). */
+  clearCommands: 'clearCommands',
+  /** Backend → clients: signal that the active run was stopped by the UI. */
+  testStopped: 'testStopped',
+  /** Worker → backend → clients: swap an earlier captured command for an
+   *  updated entry (used when a retry coalesces commands). */
+  replaceCommand: 'replaceCommand',
+  /** Worker → backend: register the config file path so reruns can spawn
+   *  with the same config. */
+  config: 'config'
+} as const
+
+export type WsScope = (typeof WS_SCOPE)[keyof typeof WS_SCOPE]
diff --git a/packages/shared/src/runner.ts b/packages/shared/src/runner.ts
new file mode 100644
index 00000000..7bdac77c
--- /dev/null
+++ b/packages/shared/src/runner.ts
@@ -0,0 +1,75 @@
+/**
+ * HTTP contracts for the runner endpoints. Imported by the backend route
+ * handlers and the app's fetch callers — keeps the body shape in lockstep
+ * across the wire instead of relying on `Record<string, unknown>`.
+ */
+
+export const TESTS_API = {
+  run: '/api/tests/run',
+  stop: '/api/tests/stop'
+} as const
+
+/**
+ * Environment variables the backend's rerun spawner sets on the child
+ * process so the adapter (service/nightwatch/selenium) can detect the
+ * reuse-mode handshake and connect to the existing dashboard backend
+ * instead of starting a new one. Single source of truth — typos in any
+ * leg of the handshake silently break reruns, so all four packages
+ * (backend writer + three adapter readers) reference this object.
+ */
+export const REUSE_ENV = {
+  REUSE: 'DEVTOOLS_APP_REUSE',
+  HOST: 'DEVTOOLS_APP_HOST',
+  PORT: 'DEVTOOLS_APP_PORT',
+  RERUN_LABEL: 'DEVTOOLS_RERUN_LABEL',
+  RERUN_ENTRY_TYPE: 'DEVTOOLS_RERUN_ENTRY_TYPE'
+} as const
+
+/**
+ * Environment variables the WDIO service writes during `onPrepare` (config
+ * path it detected, initial --spec args) so the backend's rerun spawner can
+ * relaunch with the same config. Also covers DEVTOOLS_RUNNER_CWD which the
+ * backend reads to know which directory to spawn the child in. Bin-override
+ * vars (DEVTOOLS_WDIO_BIN, DEVTOOLS_NIGHTWATCH_BIN) live here too — they're
+ * test-rig overrides that backend's bin-resolver respects.
+ */
+export const RUNNER_ENV = {
+  WDIO_CONFIG: 'DEVTOOLS_WDIO_CONFIG',
+  NIGHTWATCH_CONFIG: 'DEVTOOLS_NIGHTWATCH_CONFIG',
+  WDIO_INITIAL_SPECS: 'DEVTOOLS_WDIO_INITIAL_SPECS',
+  RUNNER_CWD: 'DEVTOOLS_RUNNER_CWD',
+  WDIO_BIN: 'DEVTOOLS_WDIO_BIN',
+  NIGHTWATCH_BIN: 'DEVTOOLS_NIGHTWATCH_BIN'
+} as const
+
+/** POST /api/tests/run body. */
+export interface RunnerRequestBody {
+  uid: string
+  entryType: 'suite' | 'test'
+  specFile?: string
+  fullTitle?: string
+  label?: string
+  callSource?: string
+  runAll?: boolean
+  framework?: string
+  configFile?: string
+  lineNumber?: number
+  devtoolsHost?: string
+  devtoolsPort?: number
+  featureFile?: string
+  featureLine?: number
+  suiteType?: string
+  rerunCommand?: string
+  launchCommand?: string
+  preserveBaseline?: boolean
+}
+
+/** 200 response from /api/tests/run and /api/tests/stop. */
+export interface RunnerOkResponse {
+  ok: true
+}
+
+/** 4xx response shape from runner endpoints. */
+export interface RunnerErrorResponse {
+  error: string
+}
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
new file mode 100644
index 00000000..248f9569
--- /dev/null
+++ b/packages/shared/src/types.ts
@@ -0,0 +1,338 @@
+// Canonical type definitions shared across @wdio/devtools-* packages.
+//
+// Adapters (service, nightwatch-devtools, selenium-devtools) produce events of
+// these shapes. The backend stores and forwards them. The app consumes them.
+// See ARCHITECTURE.md §2 and CLAUDE.md §2.1.
+
+export type LogLevel = 'trace' | 'debug' | 'log' | 'info' | 'warn' | 'error'
+
+/** Where a captured ConsoleLog entry originated. */
+export type LogSource = 'browser' | 'test' | 'terminal'
+
+export enum TraceType {
+  Standalone = 'standalone',
+  Testrunner = 'testrunner'
+}
+
+export type TestStatus = 'passed' | 'failed' | 'skipped' | 'pending' | 'running'
+
+/**
+ * Enum-style accessor for the canonical TestStatus values. Adapter code uses
+ * this for readable comparisons (`state === TEST_STATE.PASSED`). The app's
+ * sidebar has a parallel `TestState` accessor with the same values; that's a
+ * naming holdover (PascalCase enum-style) — both can coexist.
+ */
+export const TEST_STATE = {
+  PENDING: 'pending',
+  RUNNING: 'running',
+  PASSED: 'passed',
+  FAILED: 'failed',
+  SKIPPED: 'skipped'
+} as const satisfies Record<string, TestStatus>
+
+/**
+ * Identifier sent by each adapter on RunnerRequestBody.framework. Used by the
+ * backend's runner to pick rerun CLI args. This is technically the *test
+ * runner* identifier rather than the higher-level framework (wdio/nightwatch/
+ * selenium) — wdio's runner can be mocha/jasmine/cucumber, nightwatch can be
+ * vanilla or cucumber, selenium adapters report 'selenium-webdriver'.
+ */
+export type TestRunnerId =
+  | 'mocha'
+  | 'jasmine'
+  | 'cucumber'
+  | 'nightwatch'
+  | 'nightwatch-cucumber'
+  | 'selenium-webdriver'
+
+// ─── Inner event payloads ───────────────────────────────────────────────────
+
+export interface PerformanceData {
+  navigation?: {
+    url: string
+    timing: {
+      loadTime?: number
+      domReady?: number
+      responseTime?: number
+      dnsLookup?: number
+      tcpConnection?: number
+      serverResponse?: number
+    }
+  }
+  resources?: Array<{
+    url: string
+    duration: number
+    size: number
+    type: string
+    startTime: number
+    responseEnd: number
+  }>
+}
+
+export interface DocumentInfo {
+  url: string
+  title: string
+  headers: { userAgent: string; language: string; platform: string }
+  documentInfo: { readyState: string; referrer: string; characterSet: string }
+}
+
+export interface CommandLog {
+  command: string
+  args: any[]
+  result?: any
+  error?: Error | { name: string; message: string; stack?: string }
+  timestamp: number
+  callSource?: string
+  screenshot?: string
+  testUid?: string
+  performance?: PerformanceData
+  cookies?: string
+  documentInfo?: DocumentInfo
+  id?: number
+}
+
+/**
+ * Payload broadcast under the WS scope `'replaceCommand'`. Tells the UI to
+ * swap an existing CommandLog in-place — used when an adapter reconciles a
+ * preliminary entry with the actual final result (e.g. selenium's
+ * driverPatcher emits a placeholder, then replaces it once the command
+ * resolves).
+ */
+export interface ReplaceCommandWsPayload {
+  oldTimestamp: number
+  command: CommandLog
+}
+
+export interface ConsoleLog {
+  type: LogLevel
+  args: any[]
+  timestamp: number
+  source?: LogSource
+}
+
+export interface NetworkRequest {
+  id: string
+  url: string
+  method: string
+  headers?: Record<string, string>
+  cookies?: any[]
+  status?: number
+  statusText?: string
+  timestamp: number
+  startTime: number
+  endTime?: number
+  time?: number
+  type: string
+  initiator?: string
+  requestHeaders?: Record<string, string>
+  responseHeaders?: Record<string, string>
+  navigation?: string
+  redirectChain?: any[]
+  children?: NetworkRequest[]
+  response?: {
+    fromCache: boolean
+    headers: Record<string, string>
+    mimeType: string
+    status: number
+  }
+  error?: string
+  requestBody?: string
+  responseBody?: string
+  size?: number
+}
+
+// ─── Trace and metadata ─────────────────────────────────────────────────────
+
+export interface Viewport {
+  width: number
+  height: number
+  offsetLeft: number
+  offsetTop: number
+  scale: number
+}
+
+export interface ScreencastInfo {
+  sessionId?: string
+  videoPath?: string
+  videoFile?: string
+  frameCount?: number
+  duration?: number
+}
+
+/** Single captured screencast frame — base64 image + capture timestamp (ms). */
+export interface ScreencastFrame {
+  /** Base64-encoded image data — JPEG/PNG from CDP push mode or PNG from browser.takeScreenshot() in polling mode. */
+  data: string
+  /** Unix timestamp in milliseconds. */
+  timestamp: number
+}
+
+/**
+ * Screencast recorder configuration. Used by every adapter — the base recorder
+ * in `@wdio/devtools-core` consumes this shape; per-adapter wrappers extend it
+ * (e.g. WDIO's CDP fast-path opts).
+ */
+export interface ScreencastOptions {
+  /** Enable screencast recording for this session (default: false). */
+  enabled?: boolean
+  /**
+   * Image format for individual frames (default: 'jpeg').
+   * - Chrome/Chromium (CDP mode): controls the format Chrome sends over CDP.
+   * - Other browsers (polling mode): screenshots are always PNG; ignored.
+   * Does NOT affect the output video container, which is always WebM.
+   */
+  captureFormat?: 'jpeg' | 'png'
+  /** JPEG quality 0–100 (default: 70). CDP mode + 'jpeg' only. */
+  quality?: number
+  /** Max frame width in pixels Chrome sends over CDP (default: 1280). */
+  maxWidth?: number
+  /** Max frame height in pixels Chrome sends over CDP (default: 720). */
+  maxHeight?: number
+  /**
+   * Screenshot polling interval in milliseconds for non-Chrome browsers
+   * (default: 200 ms ≈ 5 fps). Lower = smoother, more WebDriver round-trips.
+   */
+  pollIntervalMs?: number
+}
+
+/** Defaults applied to ScreencastOptions when not specified by the user. */
+export const SCREENCAST_DEFAULTS: Required<ScreencastOptions> = {
+  enabled: false,
+  captureFormat: 'jpeg',
+  quality: 70,
+  maxWidth: 1280,
+  maxHeight: 720,
+  pollIntervalMs: 200
+}
+
+export interface Metadata {
+  type: TraceType
+  url?: string
+  options?: unknown
+  capabilities?: unknown
+  viewport?: Viewport
+  sessionId?: string
+  testEnv?: string
+  host?: string
+  modulePath?: string
+  desiredCapabilities?: Record<string, unknown>
+}
+
+export interface TraceLog {
+  // Mutations are typed as unknown[] here because the concrete shape lives in
+  // packages/script (browser-side, depends on DOM types). Adapters and the app
+  // can narrow with their own DOM-aware TraceMutation type when needed.
+  mutations: unknown[]
+  logs: string[]
+  consoleLogs: ConsoleLog[]
+  networkRequests: NetworkRequest[]
+  metadata: Metadata
+  commands: CommandLog[]
+  sources: Record<string, string>
+  suites?: Record<string, unknown>[]
+  screencast?: ScreencastInfo
+  config?: { configFile?: string }
+}
+
+// ─── Preserve-and-rerun ─────────────────────────────────────────────────────
+
+export interface TestError {
+  message?: string
+  name?: string
+  stack?: string
+  /** expect-webdriverio surfaces these directly on the error. */
+  expected?: unknown
+  actual?: unknown
+  /** expect-webdriverio also bundles them under matcherResult. */
+  matcherResult?: {
+    expected?: unknown
+    actual?: unknown
+    message?: string
+  }
+}
+
+export interface PreservedStep {
+  uid: string
+  title?: string
+  fullTitle?: string
+  start?: number
+  end?: number
+  state?: TestStatus
+  error?: TestError
+}
+
+export interface PreservedAttempt {
+  testUid: string
+  scope: 'test' | 'suite'
+  capturedAt: number
+  window: { start: number; end: number }
+  test: {
+    title?: string
+    fullTitle?: string
+    file?: string
+    callSource?: string
+    start?: number
+    end?: number
+    duration?: number
+    state?: TestStatus
+    error?: TestError
+  }
+  steps?: PreservedStep[]
+  commands: CommandLog[]
+  consoleLogs: ConsoleLog[]
+  networkRequests: NetworkRequest[]
+  /** See note on TraceLog.mutations. */
+  mutations: unknown[]
+  sources: Record<string, string>
+}
+
+// ─── Test reporter stats (nightwatch + selenium adapters) ───────────────────
+
+/**
+ * Serialized form of an `Error`, used after capture so the payload survives
+ * `JSON.stringify` over the WS bridge. The capture-time shape (raw `Error`
+ * instance) is also accepted for callers that haven't serialized yet.
+ */
+export type ReporterError =
+  | Error
+  | { name: string; message: string; stack?: string }
+
+export interface TestStats {
+  uid: string
+  cid: string
+  title: string
+  fullTitle: string
+  parent: string
+  state: TestStatus
+  start: Date
+  end: Date | null
+  type: 'test'
+  file: string
+  retries: number
+  _duration: number
+  error?: ReporterError
+  hooks?: unknown[]
+  callSource?: string
+}
+
+export interface SuiteStats {
+  uid: string
+  cid: string
+  title: string
+  fullTitle: string
+  type: 'suite'
+  file: string
+  start: Date
+  state?: TestStatus
+  end?: Date | null
+  tests: (string | TestStats)[]
+  suites: SuiteStats[]
+  hooks: unknown[]
+  _duration: number
+  parent?: string
+  callSource?: string
+  /** Cucumber-only: the .feature file path. Distinct from `file` because the
+   *  root suite's `file` stays at cwd to keep its stable UID; rerun payloads
+   *  use this to drive feature-level filtering. */
+  featureFile?: string
+}
diff --git a/packages/shared/tsconfig.json b/packages/shared/tsconfig.json
new file mode 100644
index 00000000..a5cb75c5
--- /dev/null
+++ b/packages/shared/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*.ts"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cf6f1422..ecf49abf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,7 +93,29 @@ importers:
         specifier: ^9.19.1
         version: 9.27.0(puppeteer-core@21.11.0)
 
-  example:
+  examples/nightwatch:
+    dependencies:
+      '@wdio/nightwatch-devtools':
+        specifier: workspace:^
+        version: link:../../packages/nightwatch-devtools
+      nightwatch:
+        specifier: ^3.0.0
+        version: 3.15.0(@cucumber/cucumber@11.3.0)(chromedriver@148.0.3)
+
+  examples/selenium:
+    dependencies:
+      '@wdio/selenium-devtools':
+        specifier: workspace:^
+        version: link:../../packages/selenium-devtools
+      selenium-webdriver:
+        specifier: ^4.27.0
+        version: 4.27.0
+    devDependencies:
+      '@cucumber/cucumber':
+        specifier: ^11.1.0
+        version: 11.3.0
+
+  examples/wdio:
     devDependencies:
       '@wdio/cli':
         specifier: 9.27.0
@@ -103,7 +125,7 @@ importers:
         version: 9.27.0
       '@wdio/devtools-service':
         specifier: workspace:*
-        version: link:../packages/service
+        version: link:../../packages/service
       '@wdio/globals':
         specifier: 9.27.0
         version: 9.27.0(expect-webdriverio@5.6.5)(webdriverio@9.27.0(puppeteer-core@21.11.0))
@@ -174,6 +196,9 @@ importers:
       '@tailwindcss/postcss':
         specifier: ^4.1.18
         version: 4.2.2
+      '@wdio/devtools-shared':
+        specifier: workspace:^
+        version: link:../shared
       '@wdio/reporter':
         specifier: 9.27.0
         version: 9.27.0
@@ -243,6 +268,9 @@ importers:
       tree-kill:
         specifier: ^1.2.2
         version: 1.2.2
+      ws:
+        specifier: ^8.18.3
+        version: 8.20.0
     devDependencies:
       '@types/shell-quote':
         specifier: ^1.7.5
@@ -250,9 +278,27 @@ importers:
       '@types/ws':
         specifier: ^8.18.1
         version: 8.18.1
+      '@wdio/devtools-shared':
+        specifier: workspace:^
+        version: link:../shared
       nodemon:
         specifier: ^3.1.14
         version: 3.1.14
+      tsup:
+        specifier: ^8.0.0
+        version: 8.5.1(@microsoft/api-extractor@7.53.3(@types/node@25.5.2))(jiti@2.6.1)(postcss@8.5.9)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
+
+  packages/core:
+    devDependencies:
+      '@types/ws':
+        specifier: ^8.18.1
+        version: 8.18.1
+      '@wdio/devtools-shared':
+        specifier: workspace:^
+        version: link:../shared
+      stacktrace-parser:
+        specifier: ^0.1.11
+        version: 0.1.11
       ws:
         specifier: ^8.18.3
         version: 8.20.0
@@ -271,6 +317,9 @@ importers:
       devtools:
         specifier: ^8.42.0
         version: 8.42.0
+      fluent-ffmpeg:
+        specifier: ^2.1.3
+        version: 2.1.3
       import-meta-resolve:
         specifier: ^4.2.0
         version: 4.2.0
@@ -290,12 +339,21 @@ importers:
       '@types/ws':
         specifier: ^8.18.1
         version: 8.18.1
+      '@wdio/devtools-core':
+        specifier: workspace:^
+        version: link:../core
+      '@wdio/devtools-shared':
+        specifier: workspace:^
+        version: link:../shared
       chromedriver:
         specifier: ^148.0.3
         version: 148.0.3
       nightwatch:
         specifier: ^3.0.0
         version: 3.15.0(@cucumber/cucumber@11.3.0)(chromedriver@148.0.3)
+      tsup:
+        specifier: ^8.0.0
+        version: 8.5.1(@microsoft/api-extractor@7.53.3(@types/node@25.5.2))(jiti@2.6.1)(postcss@8.5.9)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       typescript:
         specifier: ^6.0.2
         version: 6.0.2
@@ -349,6 +407,12 @@ importers:
       '@types/ws':
         specifier: ^8.18.1
         version: 8.18.1
+      '@wdio/devtools-core':
+        specifier: workspace:^
+        version: link:../core
+      '@wdio/devtools-shared':
+        specifier: workspace:^
+        version: link:../shared
       chromedriver:
         specifier: ^147.0.1
         version: 147.0.1
@@ -361,6 +425,9 @@ importers:
       selenium-webdriver:
         specifier: ^4.27.0
         version: 4.27.0
+      tsup:
+        specifier: ^8.0.0
+        version: 8.5.1(@microsoft/api-extractor@7.53.3(@types/node@25.5.2))(jiti@2.6.1)(postcss@8.5.9)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3)
       typescript:
         specifier: ^6.0.2
         version: 6.0.2
@@ -410,6 +477,9 @@ importers:
       stack-trace:
         specifier: 1.0.0-pre2
         version: 1.0.0-pre2
+      stacktrace-parser:
+        specifier: ^0.1.11
+        version: 0.1.11
       webdriverio:
         specifier: ^9.19.1
         version: 9.27.0(puppeteer-core@21.11.0)
@@ -432,6 +502,12 @@ importers:
       '@types/ws':
         specifier: ^8.18.1
         version: 8.18.1
+      '@wdio/devtools-core':
+        specifier: workspace:^
+        version: link:../core
+      '@wdio/devtools-shared':
+        specifier: workspace:^
+        version: link:../shared
       '@wdio/globals':
         specifier: 9.27.0
         version: 9.27.0(expect-webdriverio@5.6.5)(webdriverio@9.27.0(puppeteer-core@21.11.0))
@@ -448,6 +524,8 @@ importers:
         specifier: ^4.5.4
         version: 4.5.4(@types/node@25.5.2)(rollup@4.60.1)(typescript@6.0.2)(vite@8.0.7(@types/node@25.5.2)(esbuild@0.27.7)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.3))
 
+  packages/shared: {}
+
 packages:
 
   '@alloc/quick-lru@5.2.0':
@@ -2747,6 +2825,12 @@ packages:
     resolution: {integrity: sha512-bkXY9WsVpY7CvMhKSR6pZilZu9Ln5WDrKVBUXf2S443etkmEO4V58heTecXcUIsNsi4Rx8JUO4NfX1IcQl4deg==}
     engines: {node: '>=18.20'}
 
+  bundle-require@5.1.0:
+    resolution: {integrity: sha512-3WrrOuZiyaaZPWiEt4G3+IffISVC9HYlWueJEBWED4ZH4aIAC2PnkdnuRrR94M+w6yGWn4AglWtJtBI8YqvgoA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.18'
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -2964,6 +3048,10 @@ packages:
     resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
     engines: {node: '>=20'}
 
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
   commander@9.1.0:
     resolution: {integrity: sha512-i0/MaqBtdbnJ4XQs4Pmyb+oFQl+q0lsAmokVUH92SlSw4fkeAcG3bVon+Qt7hmtF+u3Het6o4VgrcY3qAoEB6w==}
     engines: {node: ^12.20.0 || >=14}
@@ -2992,6 +3080,10 @@ packages:
   confbox@0.2.2:
     resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
 
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   content-disposition@1.1.0:
     resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
     engines: {node: '>=18'}
@@ -3746,6 +3838,9 @@ packages:
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  fix-dts-default-cjs-exports@1.0.1:
+    resolution: {integrity: sha512-pVIECanWFC61Hzl2+oOCtoJ3F17kglZC/6N94eRWycFgBH35hHx0Li604ZIzhseh97mf2p0cv7vVrOZGoqhlEg==}
+
   flat-cache@4.0.1:
     resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
     engines: {node: '>=16'}
@@ -4584,6 +4679,10 @@ packages:
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
+  joycon@3.1.1:
+    resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
+    engines: {node: '>=10'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -4787,6 +4886,10 @@ packages:
     resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
     engines: {node: '>=4'}
 
+  load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   local-pkg@1.1.2:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
@@ -6000,6 +6103,10 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
   spacetrim@0.11.59:
     resolution: {integrity: sha512-lLYsktklSRKprreOm7NXReW8YiX2VBjbgmXYEziOoGf/qsJqAEACaDvoTtUOycwjpaSh+bT8eu0KrJn7UNxiCg==}
 
@@ -6176,6 +6283,11 @@ packages:
     engines: {node: '>=20.19.0'}
     hasBin: true
 
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
   supports-color@10.2.2:
     resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
     engines: {node: '>=18'}
@@ -6348,6 +6460,9 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
   ts-node@10.9.2:
     resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true
@@ -6372,6 +6487,25 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tsup@8.5.1:
+    resolution: {integrity: sha512-xtgkqwdhpKWr3tKPmCkvYmS9xnQK3m3XgxZHwSUjvfTjp7YfXe5tT3GgWi0F2N+ZSMsOeWeZFh7ZZFg5iPhing==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      '@microsoft/api-extractor': ^7.36.0
+      '@swc/core': ^1
+      postcss: ^8.4.12
+      typescript: '>=4.5.0'
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      '@swc/core':
+        optional: true
+      postcss:
+        optional: true
+      typescript:
+        optional: true
+
   tsx@4.21.0:
     resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
     engines: {node: '>=18.0.0'}
@@ -7006,7 +7140,7 @@ snapshots:
       '@babel/types': 7.29.0
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
@@ -7163,7 +7297,7 @@ snapshots:
       '@babel/parser': 7.29.2
       '@babel/template': 7.28.6
       '@babel/types': 7.29.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -7619,7 +7753,7 @@ snapshots:
   '@eslint/config-array@0.23.5':
     dependencies:
       '@eslint/object-schema': 3.0.5
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       minimatch: 10.2.5
     transitivePeerDependencies:
       - supports-color
@@ -8297,7 +8431,7 @@ snapshots:
 
   '@puppeteer/browsers@2.13.0':
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       extract-zip: 2.0.1
       progress: 2.0.3
       proxy-agent: 6.5.0
@@ -8715,7 +8849,7 @@ snapshots:
       '@typescript-eslint/types': 8.58.1
       '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.2)
       '@typescript-eslint/visitor-keys': 8.58.1
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       eslint: 10.2.0(jiti@2.6.1)
       typescript: 6.0.2
     transitivePeerDependencies:
@@ -8725,7 +8859,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/tsconfig-utils': 8.58.1(typescript@6.0.2)
       '@typescript-eslint/types': 8.58.1
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       typescript: 6.0.2
     transitivePeerDependencies:
       - supports-color
@@ -8744,7 +8878,7 @@ snapshots:
       '@typescript-eslint/types': 8.58.1
       '@typescript-eslint/typescript-estree': 8.58.1(typescript@6.0.2)
       '@typescript-eslint/utils': 8.58.1(eslint@10.2.0(jiti@2.6.1))(typescript@6.0.2)
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       eslint: 10.2.0(jiti@2.6.1)
       ts-api-utils: 2.5.0(typescript@6.0.2)
       typescript: 6.0.2
@@ -8759,7 +8893,7 @@ snapshots:
       '@typescript-eslint/tsconfig-utils': 8.58.1(typescript@6.0.2)
       '@typescript-eslint/types': 8.58.1
       '@typescript-eslint/visitor-keys': 8.58.1
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       minimatch: 10.2.5
       semver: 7.7.4
       tinyglobby: 0.2.16
@@ -9180,7 +9314,7 @@ snapshots:
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -9668,6 +9802,11 @@ snapshots:
 
   builtin-modules@5.0.0: {}
 
+  bundle-require@5.1.0(esbuild@0.27.7):
+    dependencies:
+      esbuild: 0.27.7
+      load-tsconfig: 0.2.5
+
   cac@6.7.14: {}
 
   cacheable@2.3.4:
@@ -9920,6 +10059,8 @@ snapshots:
 
   commander@14.0.3: {}
 
+  commander@4.1.1: {}
+
   commander@9.1.0: {}
 
   commander@9.5.0: {}
@@ -9947,6 +10088,8 @@ snapshots:
 
   confbox@0.2.2: {}
 
+  consola@3.4.2: {}
+
   content-disposition@1.1.0: {}
 
   convert-source-map@2.0.0: {}
@@ -10108,10 +10251,6 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
-  debug@4.4.3:
-    dependencies:
-      ms: 2.1.3
-
   debug@4.4.3(supports-color@5.5.0):
     dependencies:
       ms: 2.1.3
@@ -10626,7 +10765,7 @@ snapshots:
       '@types/estree': 1.0.8
       ajv: 6.14.0
       cross-spawn: 7.0.6
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       escape-string-regexp: 4.0.0
       eslint-scope: 9.1.2
       eslint-visitor-keys: 5.0.1
@@ -10749,7 +10888,7 @@ snapshots:
 
   extract-zip@2.0.1:
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       get-stream: 5.2.0
       yauzl: 2.10.0
     optionalDependencies:
@@ -10898,6 +11037,12 @@ snapshots:
       locate-path: 7.2.0
       path-exists: 5.0.0
 
+  fix-dts-default-cjs-exports@1.0.1:
+    dependencies:
+      magic-string: 0.30.21
+      mlly: 1.8.0
+      rollup: 4.60.1
+
   flat-cache@4.0.1:
     dependencies:
       flatted: 3.3.3
@@ -11066,7 +11211,7 @@ snapshots:
     dependencies:
       basic-ftp: 5.0.5
       data-uri-to-buffer: 6.0.2
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -11074,7 +11219,7 @@ snapshots:
     dependencies:
       basic-ftp: 5.3.1
       data-uri-to-buffer: 8.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -11248,35 +11393,35 @@ snapshots:
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
   http-proxy-agent@9.0.0:
     dependencies:
       agent-base: 9.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@9.0.0:
     dependencies:
       agent-base: 9.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -11567,7 +11712,7 @@ snapshots:
 
   istanbul-lib-source-maps@4.0.1:
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -11946,6 +12091,8 @@ snapshots:
 
   jju@1.4.0: {}
 
+  joycon@3.1.1: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@3.14.2:
@@ -12065,7 +12212,7 @@ snapshots:
 
   lighthouse-logger@2.0.2:
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       marky: 1.3.0
     transitivePeerDependencies:
       - supports-color
@@ -12150,6 +12297,8 @@ snapshots:
       pify: 3.0.0
       strip-bom: 3.0.0
 
+  load-tsconfig@0.2.5: {}
+
   local-pkg@1.1.2:
     dependencies:
       mlly: 1.8.0
@@ -12632,7 +12781,7 @@ snapshots:
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
       agent-base: 7.1.4
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       get-uri: 6.0.5
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
@@ -12644,7 +12793,7 @@ snapshots:
   pac-proxy-agent@9.0.1:
     dependencies:
       agent-base: 9.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       get-uri: 8.0.0
       http-proxy-agent: 9.0.0
       https-proxy-agent: 9.0.0
@@ -12929,7 +13078,7 @@ snapshots:
   proxy-agent@6.3.1:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
       lru-cache: 7.18.3
@@ -12942,7 +13091,7 @@ snapshots:
   proxy-agent@6.5.0:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
       lru-cache: 7.18.3
@@ -12955,7 +13104,7 @@ snapshots:
   proxy-agent@8.0.1:
     dependencies:
       agent-base: 9.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       http-proxy-agent: 9.0.0
       https-proxy-agent: 9.0.0
       lru-cache: 7.18.3
@@ -13450,7 +13599,7 @@ snapshots:
   socks-proxy-agent@10.0.0:
     dependencies:
       agent-base: 9.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       socks: 2.8.7
     transitivePeerDependencies:
       - supports-color
@@ -13458,7 +13607,7 @@ snapshots:
   socks-proxy-agent@8.0.5:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       socks: 2.8.7
     transitivePeerDependencies:
       - supports-color
@@ -13486,6 +13635,8 @@ snapshots:
 
   source-map@0.6.1: {}
 
+  source-map@0.7.6: {}
+
   spacetrim@0.11.59: {}
 
   spdx-correct@3.2.0:
@@ -13664,7 +13815,7 @@ snapshots:
       cosmiconfig: 9.0.1(typescript@6.0.2)
       css-functions-list: 3.3.3
       css-tree: 3.2.1
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       fast-glob: 3.3.3
       fastest-levenshtein: 1.0.16
       file-entry-cache: 11.1.2
@@ -13693,6 +13844,16 @@ snapshots:
       - supports-color
       - typescript
 
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.16
+      ts-interface-checker: 0.1.13
+
   supports-color@10.2.2: {}
 
   supports-color@5.5.0:
@@ -13875,6 +14036,8 @@ snapshots:
     dependencies:
       typescript: 6.0.2
 
+  ts-interface-checker@0.1.13: {}
+
   ts-node@10.9.2(@types/node@25.5.2)(typescript@6.0.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
@@ -13908,6 +14071,35 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tsup@8.5.1(@microsoft/api-extractor@7.53.3(@types/node@25.5.2))(jiti@2.6.1)(postcss@8.5.9)(tsx@4.21.0)(typescript@6.0.2)(yaml@2.8.3):
+    dependencies:
+      bundle-require: 5.1.0(esbuild@0.27.7)
+      cac: 6.7.14
+      chokidar: 4.0.3
+      consola: 3.4.2
+      debug: 4.4.3(supports-color@5.5.0)
+      esbuild: 0.27.7
+      fix-dts-default-cjs-exports: 1.0.1
+      joycon: 3.1.1
+      picocolors: 1.1.1
+      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.9)(tsx@4.21.0)(yaml@2.8.3)
+      resolve-from: 5.0.0
+      rollup: 4.60.1
+      source-map: 0.7.6
+      sucrase: 3.35.1
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.16
+      tree-kill: 1.2.2
+    optionalDependencies:
+      '@microsoft/api-extractor': 7.53.3(@types/node@25.5.2)
+      postcss: 8.5.9
+      typescript: 6.0.2
+    transitivePeerDependencies:
+      - jiti
+      - supports-color
+      - tsx
+      - yaml
+
   tsx@4.21.0:
     dependencies:
       esbuild: 0.27.7
@@ -14099,7 +14291,7 @@ snapshots:
   vite-node@2.1.9(@types/node@25.5.2)(esbuild@0.27.7)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.3):
     dependencies:
       cac: 6.7.14
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       es-module-lexer: 1.7.0
       pathe: 1.1.2
       vite: 8.0.7(@types/node@25.5.2)(esbuild@0.27.7)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.3)
@@ -14125,7 +14317,7 @@ snapshots:
       '@volar/typescript': 2.4.23
       '@vue/language-core': 2.2.0(typescript@6.0.2)
       compare-versions: 6.1.1
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       kolorist: 1.8.0
       local-pkg: 1.1.2
       magic-string: 0.30.21
@@ -14168,7 +14360,7 @@ snapshots:
       '@vitest/spy': 2.1.9
       '@vitest/utils': 2.1.9
       chai: 5.3.3
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
       expect-type: 1.3.0
       magic-string: 0.30.21
       pathe: 1.1.2
@@ -14241,7 +14433,7 @@ snapshots:
     dependencies:
       chalk: 4.1.2
       commander: 9.5.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@5.5.0)
     transitivePeerDependencies:
       - supports-color
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index da8b8f2c..c577713a 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,9 +1,13 @@
 # pnpm-workspace.yaml
 packages:
+  - 'packages/shared'
+  - 'packages/core'
   - 'packages/backend'
   - 'packages/script'
   - 'packages/service'
   - 'packages/app'
   - 'packages/nightwatch-devtools'
   - 'packages/selenium-devtools'
-  - 'example'
+  - 'examples/wdio'
+  - 'examples/selenium'
+  - 'examples/nightwatch'
diff --git a/tsconfig.json b/tsconfig.json
index 17fb23b7..97c599d0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,10 @@
       "@components/*": ["packages/app/src/components/*"],
       "@core/*": ["packages/app/src/core/*"],
 
+      "@wdio/devtools-shared": ["packages/shared/src/index.ts"],
+      "@wdio/devtools-shared/*": ["packages/shared/src/*"],
+      "@wdio/devtools-core": ["packages/core/src/index.ts"],
+      "@wdio/devtools-core/*": ["packages/core/src/*"],
       "@wdio/devtools-backend": ["packages/backend/src/index.ts"],
       "@wdio/devtools-backend/*": ["packages/backend/src/*"],
       "@wdio/devtools-script": ["packages/script/src/index.ts"],