diff --git a/README.md b/README.md
index 3f08c5e..9a7526a 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,98 @@
-# devtools
-Browser devtools extension for debugging WebdriverIO tests
+# WebdriverIO DevTools
+
+A powerful browser devtools extension for debugging, visualizing, and controlling WebdriverIO test executions in real-time.
+
+## Features
+
+### 🎯 Interactive Test Execution
+- **Selective Test Rerun**: Click play buttons on individual test cases, test suites, or Cucumber scenario examples to re-execute them instantly
+- **Smart Browser Reuse**: Tests rerun in the same browser window without opening new tabs, improving performance and user experience
+- **Stop Test Execution**: Terminate running tests with proper process cleanup using the stop button
+- **Test List Preservation**: All tests remain visible in the sidebar during reruns, maintaining full context
+
+### 🎭 Multi-Framework Support
+- **Mocha**: Full support with grep-based filtering for test/suite execution
+- **Jasmine**: Complete integration with grep-based filtering
+- **Cucumber**: Scenario-level and example-specific execution with feature:line targeting
+
+### 📊 Real-Time Visualization
+- **Live Browser Preview**: View the application under test in a scaled iframe with automatic screenshot updates
+- **Actions Timeline**: Command-by-command execution log with timestamps and parameters
+- **Test Hierarchy**: Nested test suite and test case tree view with status indicators
+- **Live Status Updates**: Immediate spinner icons and visual feedback when tests start/stop
+
+### 🔍 Debugging Capabilities
+- **Command Logging**: Detailed capture of all WebDriver commands with arguments and results
+- **Screenshot Capture**: Automatic screenshots after each command for visual debugging
+- **Source Code Mapping**: View the exact line of code that triggered each command
+- **Console Logs**: Capture and display application console output
+- **Error Tracking**: Full error messages and stack traces for failed tests
+
+### 🎮 Execution Controls
+- **Global Test Running State**: All play buttons automatically disable during test execution to prevent conflicts
+- **Immediate Feedback**: Spinner icons update instantly when tests start
+- **Actions Tab Auto-Clear**: Execution data automatically clears and refreshes on reruns
+- **Metadata Tracking**: Test duration, status, and execution timestamps
+
+### 🏗️ Architecture
+- **Frontend**: Lit web components with reactive state management (@lit/context)
+- **Backend**: Fastify server with WebSocket streaming for real-time updates
+- **Service**: WebdriverIO reporter integration with stable UID generation
+- **Process Management**: Tree-kill for proper cleanup of spawned processes
+
+## Installation
+
+```bash
+npm install @wdio/devtools-service
+```
+
+## Configuration
+
+Add the service to your `wdio.conf.js`:
+
+```javascript
+export const config = {
+    // ...
+    services: ['devtools']
+}
+```
+
+## Usage
+
+1. Run your WebdriverIO tests with the devtools service enabled
+2. Open `http://localhost:3000` in your browser
+3. View real-time test execution with live browser preview
+4. Click play buttons on any test or suite to rerun selectively
+5. Click stop button to terminate running tests
+6. Explore actions, metadata, and console logs in the workbench tabs
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build all packages
+pnpm build
+
+# Run demo
+pnpm demo
+```
+
+## Project Structure
+
+```
+packages/
+├── app/          # Frontend Lit-based UI application
+├── backend/      # Fastify server with test runner management
+├── service/      # WebdriverIO service and reporter
+└── script/       # Browser-injected trace collection script
+```
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT
diff --git a/packages/app/package.json b/packages/app/package.json
index 6a41d2c..ee9ef9e 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wdio/devtools-app",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Browser devtools extension for debugging WebdriverIO tests.",
   "type": "module",
   "exports": "./src/index.ts",
diff --git a/packages/app/src/app.ts b/packages/app/src/app.ts
index ddd5568..25f3d83 100644
--- a/packages/app/src/app.ts
+++ b/packages/app/src/app.ts
@@ -52,6 +52,10 @@ export class WebdriverIODevtoolsApplication extends Element {
   connectedCallback(): void {
     super.connectedCallback()
     window.addEventListener('load-trace', this.#loadTrace.bind(this))
+    this.addEventListener(
+      'clear-execution-data',
+      this.#clearExecutionData.bind(this)
+    )
   }
 
   render() {
@@ -66,6 +70,10 @@ export class WebdriverIODevtoolsApplication extends Element {
     this.requestUpdate()
   }
 
+  #clearExecutionData({ detail }: { detail?: { uid?: string } }) {
+    this.dataManager.clearExecutionData(detail?.uid)
+  }
+
   #mainContent() {
     if (!this.dataManager.hasConnection) {
       return html`<wdio-devtools-start></wdio-devtools-start>`
diff --git a/packages/app/src/components/sidebar/constants.ts b/packages/app/src/components/sidebar/constants.ts
new file mode 100644
index 0000000..85ff538
--- /dev/null
+++ b/packages/app/src/components/sidebar/constants.ts
@@ -0,0 +1,10 @@
+import type { RunCapabilities } from './types.js'
+
+export const DEFAULT_CAPABILITIES: RunCapabilities = {
+  canRunSuites: true,
+  canRunTests: true
+}
+
+export const FRAMEWORK_CAPABILITIES: Record<string, RunCapabilities> = {
+  cucumber: { canRunSuites: true, canRunTests: false }
+}
diff --git a/packages/app/src/components/sidebar/explorer.ts b/packages/app/src/components/sidebar/explorer.ts
index bbeee9d..0d2835f 100644
--- a/packages/app/src/components/sidebar/explorer.ts
+++ b/packages/app/src/components/sidebar/explorer.ts
@@ -3,9 +3,21 @@ import { html, css, nothing, type TemplateResult } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 import type { TestStats, SuiteStats } from '@wdio/reporter'
+import type { Metadata } from '@wdio/devtools-service/types'
 import { repeat } from 'lit/directives/repeat.js'
-import { TestState } from './test-suite.js'
-import { suiteContext } from '../../controller/DataManager.js'
+import {
+  suiteContext,
+  metadataContext,
+  isTestRunningContext
+} from '../../controller/DataManager.js'
+import type {
+  TestEntry,
+  RunCapabilities,
+  RunnerOptions,
+  TestRunDetail
+} from './types.js'
+import { TestState } from './types.js'
+import { DEFAULT_CAPABILITIES, FRAMEWORK_CAPABILITIES } from './constants.js'
 
 import '~icons/mdi/play.js'
 import '~icons/mdi/stop.js'
@@ -19,17 +31,12 @@ import type { DevtoolsSidebarFilter } from './filter.js'
 
 const EXPLORER = 'wdio-devtools-sidebar-explorer'
 
-interface TestEntry {
-  uid: string
-  state?: string
-  label: string
-  callSource?: string
-  children: TestEntry[]
-}
-
 @customElement(EXPLORER)
 export class DevtoolsSidebarExplorer extends CollapseableEntry {
   #testFilter: DevtoolsSidebarFilter | undefined
+  #filterListener = this.#filterTests.bind(this)
+  #runListener = this.#handleTestRun.bind(this)
+  #stopListener = this.#handleTestStop.bind(this)
 
   static styles = [
     ...Element.styles,
@@ -58,9 +65,27 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   @consume({ context: suiteContext, subscribe: true })
   suites: Record<string, SuiteStats>[] | undefined = undefined
 
+  @consume({ context: metadataContext, subscribe: true })
+  metadata: Metadata | undefined = undefined
+
+  @consume({ context: isTestRunningContext, subscribe: true })
+  isTestRunning = false
+
   connectedCallback(): void {
     super.connectedCallback()
-    window.addEventListener('app-test-filter', this.#filterTests.bind(this))
+    window.addEventListener('app-test-filter', this.#filterListener)
+    this.addEventListener('app-test-run', this.#runListener as EventListener)
+    this.addEventListener('app-test-stop', this.#stopListener as EventListener)
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    window.removeEventListener('app-test-filter', this.#filterListener)
+    this.removeEventListener('app-test-run', this.#runListener as EventListener)
+    this.removeEventListener(
+      'app-test-stop',
+      this.#stopListener as EventListener
+    )
   }
 
   #filterTests({ detail }: { detail: DevtoolsSidebarFilter }) {
@@ -68,11 +93,200 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     this.requestUpdate()
   }
 
+  async #handleTestRun(event: Event) {
+    event.stopPropagation()
+    const detail = (event as CustomEvent<TestRunDetail>).detail
+    if (this.#isRunDisabledDetail(detail)) {
+      this.#surfaceCapabilityWarning(detail)
+      return
+    }
+
+    // Clear execution data before triggering rerun
+    this.dispatchEvent(
+      new CustomEvent('clear-execution-data', {
+        detail: { uid: detail.uid },
+        bubbles: true,
+        composed: true
+      })
+    )
+
+    const payload = {
+      ...detail,
+      runAll: detail.uid === '*',
+      framework: this.#getFramework(),
+      specFile: detail.specFile || this.#deriveSpecFile(detail),
+      configFile: this.#getConfigPath()
+    }
+    await this.#postToBackend('/api/tests/run', payload)
+  }
+
+  async #handleTestStop(event: Event) {
+    event.stopPropagation()
+    await this.#postToBackend('/api/tests/stop', {})
+  }
+
+  async #postToBackend(path: string, body: Record<string, unknown>) {
+    try {
+      const response = await fetch(path, {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify(body)
+      })
+      if (!response.ok) {
+        const errorText = await response.text()
+        throw new Error(errorText || 'Unknown error')
+      }
+    } catch (error) {
+      console.error('Failed to communicate with backend', error)
+      window.dispatchEvent(
+        new CustomEvent('app-logs', {
+          detail: `Test runner error: ${(error as Error).message}`
+        })
+      )
+    }
+  }
+
+  #deriveSpecFile(detail: TestRunDetail) {
+    if (detail.specFile) {
+      return detail.specFile
+    }
+    const source = detail.callSource
+    if (source?.startsWith('file://')) {
+      try {
+        return new URL(source).pathname
+      } catch {
+        return source
+      }
+    }
+    if (source) {
+      const match = source.match(/^(.*?):\d+:\d+$/)
+      if (match?.[1]) {
+        return match[1]
+      }
+      return source
+    }
+
+    return undefined
+  }
+
+  #runAllSuites() {
+    if (!this.#getRunCapabilities().canRunSuites) {
+      this.#surfaceCapabilityWarning({
+        entryType: 'suite',
+        uid: '*'
+      } as TestRunDetail)
+      return
+    }
+
+    // Clear execution data and mark all tests as running
+    this.dispatchEvent(
+      new CustomEvent('clear-execution-data', {
+        detail: { uid: '*' },
+        bubbles: true,
+        composed: true
+      })
+    )
+
+    void this.#postToBackend('/api/tests/run', {
+      uid: '*',
+      entryType: 'suite',
+      runAll: true,
+      framework: this.#getFramework(),
+      configFile: this.#getConfigPath()
+    })
+  }
+
+  #stopActiveRun() {
+    void this.#postToBackend('/api/tests/stop', {
+      uid: '*'
+    })
+  }
+
+  #getFramework(): string | undefined {
+    return this.#getRunnerOptions()?.framework
+  }
+
+  #getRunnerOptions(): RunnerOptions | undefined {
+    return this.metadata?.options as RunnerOptions | undefined
+  }
+
+  #getRunCapabilities(): RunCapabilities {
+    const options = this.#getRunnerOptions()
+    if (options?.runCapabilities) {
+      return {
+        ...DEFAULT_CAPABILITIES,
+        ...options.runCapabilities
+      }
+    }
+    const framework = options?.framework?.toLowerCase() ?? ''
+    return FRAMEWORK_CAPABILITIES[framework] || DEFAULT_CAPABILITIES
+  }
+
+  #isRunDisabled(entry: TestEntry) {
+    const caps = this.#getRunCapabilities()
+    if (entry.type === 'test' && !caps.canRunTests) {
+      return true
+    }
+    if (entry.type === 'suite' && !caps.canRunSuites) {
+      return true
+    }
+    return false
+  }
+
+  #isRunDisabledDetail(detail: TestRunDetail) {
+    const caps = this.#getRunCapabilities()
+    if (detail.entryType === 'test' && !caps.canRunTests) {
+      return true
+    }
+    if (detail.entryType === 'suite' && !caps.canRunSuites) {
+      return true
+    }
+    return false
+  }
+
+  #surfaceCapabilityWarning(detail: TestRunDetail) {
+    const message =
+      detail.entryType === 'test'
+        ? 'Single-test execution is not supported by this framework.'
+        : 'Suite execution is disabled by this framework.'
+    window.dispatchEvent(
+      new CustomEvent('app-logs', {
+        detail: message
+      })
+    )
+  }
+
+  #getRunDisabledReason(entry: TestEntry) {
+    if (!this.#isRunDisabled(entry)) {
+      return undefined
+    }
+    return entry.type === 'test'
+      ? 'Single-test execution is not supported by this framework.'
+      : 'Suite execution is not supported by this framework.'
+  }
+
+  #getConfigPath(): string | undefined {
+    const options = this.#getRunnerOptions()
+    return options?.configFilePath || options?.configFile
+  }
+
   #renderEntry(entry: TestEntry): TemplateResult {
     return html`
       <wdio-test-entry
+        uid="${entry.uid}"
         state="${entry.state as any}"
         call-source="${entry.callSource || ''}"
+        entry-type="${entry.type}"
+        spec-file="${entry.specFile || ''}"
+        full-title="${entry.fullTitle || ''}"
+        label-text="${entry.label}"
+        feature-file="${entry.featureFile || ''}"
+        feature-line="${entry.featureLine ?? ''}"
+        suite-type="${entry.suiteType || ''}"
+        .runDisabled=${this.#isRunDisabled(entry)}
+        .runDisabledReason=${this.#getRunDisabledReason(entry)}
       >
         <label slot="label">${entry.label}</label>
         ${entry.children && entry.children.length
@@ -101,11 +315,9 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     return (
       Boolean(
         ['all', 'none'].includes(this.#testFilter.filterStatus) ||
-          (entry.state === TestState.PASSED &&
-            this.#testFilter.filtersPassed) ||
-          (entry.state === TestState.FAILED &&
-            this.#testFilter.filtersFailed) ||
-          (entry.state === TestState.SKIPPED && this.#testFilter.filtersSkipped)
+        (entry.state === TestState.PASSED && this.#testFilter.filtersPassed) ||
+        (entry.state === TestState.FAILED && this.#testFilter.filtersFailed) ||
+        (entry.state === TestState.SKIPPED && this.#testFilter.filtersSkipped)
       ) &&
       (!this.#testFilter.filterQuery ||
         entryLabelIncludingChildren
@@ -120,12 +332,18 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       return {
         uid: entry.uid,
         label: entry.title,
+        type: 'suite',
         state: entry.tests.some((t) => !t.end)
           ? TestState.RUNNING
           : entry.tests.find((t) => t.state === 'failed')
             ? TestState.FAILED
             : TestState.PASSED,
         callSource: (entry as any).callSource,
+        specFile: (entry as any).file,
+        fullTitle: entry.title,
+        featureFile: (entry as any).featureFile,
+        featureLine: (entry as any).featureLine,
+        suiteType: (entry as any).type,
         children: Object.values(entries)
           .map(this.#getTestEntry.bind(this))
           .filter(this.#filterEntry.bind(this))
@@ -134,12 +352,17 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     return {
       uid: entry.uid,
       label: entry.title,
+      type: 'test',
       state: !entry.end
         ? TestState.RUNNING
         : entry.state === 'failed'
           ? TestState.FAILED
           : TestState.PASSED,
       callSource: (entry as any).callSource,
+      specFile: (entry as any).file,
+      fullTitle: (entry as any).fullTitle || entry.title,
+      featureFile: (entry as any).featureFile,
+      featureLine: (entry as any).featureLine,
       children: []
     }
   }
@@ -149,12 +372,10 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       return
     }
 
-    // ✅ Only root suites (no parent = true top-level suite)
     const rootSuites = this.suites
       .flatMap((s) => Object.values(s))
       .filter((suite) => !suite.parent)
 
-    // Deduplicate by uid (in case some frameworks still push duplicates)
     const uniqueSuites = Array.from(
       new Map(rootSuites.map((suite) => [suite.uid, suite])).values()
     )
@@ -171,11 +392,13 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
         <nav class="flex ml-auto">
           <button
             class="p-1 rounded hover:bg-toolbarHoverBackground text-sm group"
+            @click="${() => this.#runAllSuites()}"
           >
             <icon-mdi-play class="group-hover:text-chartsGreen"></icon-mdi-play>
           </button>
           <button
             class="p-1 rounded hover:bg-toolbarHoverBackground text-sm group"
+            @click="${() => this.#stopActiveRun()}"
           >
             <icon-mdi-stop class="group-hover:text-chartsRed"></icon-mdi-stop>
           </button>
diff --git a/packages/app/src/components/sidebar/test-suite.ts b/packages/app/src/components/sidebar/test-suite.ts
index 3fa86cd..428a267 100644
--- a/packages/app/src/components/sidebar/test-suite.ts
+++ b/packages/app/src/components/sidebar/test-suite.ts
@@ -3,6 +3,8 @@ 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 { TestState } from './types.js'
 
 import '~icons/mdi/chevron-right.js'
 import '~icons/mdi/play.js'
@@ -17,6 +19,7 @@ import '~icons/mdi/check.js'
 import '~icons/mdi/checkbox-blank-circle-outline.js'
 
 const TEST_SUITE = 'wdio-test-suite'
+
 @customElement(TEST_SUITE)
 export class ExplorerTestSuite extends Element {
   static styles = [
@@ -35,25 +38,48 @@ export class ExplorerTestSuite extends Element {
   }
 }
 
-export enum TestState {
-  PASSED = 'passed',
-  FAILED = 'failed',
-  RUNNING = 'running',
-  SKIPPED = 'skipped'
-}
-
 const TEST_ENTRY = 'wdio-test-entry'
 @customElement(TEST_ENTRY)
 export class ExplorerTestEntry extends CollapseableEntry {
   @property({ attribute: 'is-collapsed' })
   isCollapsed = 'false'
 
+  @property({ type: String })
+  uid?: string
+
   @property({ type: String })
   state?: TestState
 
   @property({ type: String, attribute: 'call-source' })
   callSource?: string
 
+  @property({ type: String, attribute: 'entry-type' })
+  entryType: 'suite' | 'test' = 'suite'
+
+  @property({ type: String, attribute: 'spec-file' })
+  specFile?: string
+
+  @property({ type: String, attribute: 'full-title' })
+  fullTitle?: string
+
+  @property({ type: String, attribute: 'label-text' })
+  labelText?: string
+
+  @property({ type: Boolean, attribute: 'run-disabled' })
+  runDisabled = false
+
+  @property({ type: String, attribute: 'run-disabled-reason' })
+  runDisabledReason?: string
+
+  @property({ type: String, attribute: 'feature-file' })
+  featureFile?: string
+
+  @property({ type: Number, attribute: 'feature-line' })
+  featureLine?: number
+
+  @property({ type: String, attribute: 'suite-type' })
+  suiteType?: string
+
   static styles = [
     ...Element.styles,
     css`
@@ -70,7 +96,7 @@ export class ExplorerTestEntry extends CollapseableEntry {
     this.dispatchEvent(
       new CustomEvent('entry-collapse-change', {
         detail: {
-          isCollapsed: isCollapsed,
+          isCollapsed,
           entry: this
         },
         bubbles: true
@@ -93,6 +119,53 @@ export class ExplorerTestEntry extends CollapseableEntry {
     )
   }
 
+  #runEntry(event: Event) {
+    event.stopPropagation()
+    if (!this.uid || this.runDisabled) {
+      return
+    }
+    const detail: TestRunDetail = {
+      uid: this.uid,
+      entryType: this.entryType,
+      specFile: this.specFile,
+      fullTitle: this.fullTitle,
+      label: this.labelText,
+      callSource: this.callSource,
+      featureFile: this.featureFile,
+      featureLine: this.featureLine,
+      suiteType: this.suiteType
+    }
+    this.dispatchEvent(
+      new CustomEvent<TestRunDetail>('app-test-run', {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
+  #stopEntry(event: Event) {
+    event.stopPropagation()
+    if (!this.uid || this.runDisabled) {
+      return
+    }
+    const detail: TestRunDetail = {
+      uid: this.uid,
+      entryType: this.entryType,
+      specFile: this.specFile,
+      fullTitle: this.fullTitle,
+      label: this.labelText,
+      callSource: this.callSource
+    }
+    this.dispatchEvent(
+      new CustomEvent<TestRunDetail>('app-test-stop', {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
   get hasPassed() {
     return this.state === TestState.PASSED
   }
@@ -136,6 +209,10 @@ export class ExplorerTestEntry extends CollapseableEntry {
     const hasNoChildren =
       this.querySelectorAll('[slot="children"]').length === 0
     const isCollapsed = this.isCollapsed === 'true'
+    const runTooltip = this.runDisabled
+      ? this.runDisabledReason ||
+        'Single-step execution is controlled by its scenario.'
+      : 'Run this entry'
 
     return html`
       <section class="block mt-2 text-sm flex w-full group/sidebar">
@@ -163,22 +240,34 @@ export class ExplorerTestEntry extends CollapseableEntry {
           ${!this.isRunning
             ? html`
                 <button
-                  class="p-1 rounded hover:bg-toolbarHoverBackground my-1 group/button"
+                  class="p-1 rounded hover:bg-toolbarHoverBackground my-1 group/button ${this
+                    .runDisabled
+                    ? 'opacity-60 cursor-not-allowed hover:bg-transparent'
+                    : ''}"
+                  title="${runTooltip}"
+                  ?disabled=${this.runDisabled}
+                  @click="${(event: Event) => this.#runEntry(event)}"
                 >
                   <icon-mdi-play
-                    class="group-hover/button:text-chartsGreen"
+                    class="${this.runDisabled
+                      ? ''
+                      : 'group-hover/button:text-chartsGreen'}"
                   ></icon-mdi-play>
                 </button>
               `
-            : html`
-                <button
-                  class="p-1 rounded hover:bg-toolbarHoverBackground my-1 group/button"
-                >
-                  <icon-mdi-stop
-                    class="group-hover/button:text-chartsRed"
-                  ></icon-mdi-stop>
-                </button>
-              `}
+            : !this.runDisabled
+              ? html`
+                  <button
+                    class="p-1 rounded hover:bg-toolbarHoverBackground my-1 group/button"
+                    title="Stop run"
+                    @click="${(event: Event) => this.#stopEntry(event)}"
+                  >
+                    <icon-mdi-stop
+                      class="group-hover/button:text-chartsRed"
+                    ></icon-mdi-stop>
+                  </button>
+                `
+              : nothing}
           <button
             class="p-1 rounded hover:bg-toolbarHoverBackground my-1 group"
             @click="${() => this.#viewSource()}"
diff --git a/packages/app/src/components/sidebar/types.ts b/packages/app/src/components/sidebar/types.ts
new file mode 100644
index 0000000..2c3d857
--- /dev/null
+++ b/packages/app/src/components/sidebar/types.ts
@@ -0,0 +1,45 @@
+export interface TestEntry {
+  uid: string
+  state?: string
+  label: string
+  callSource?: string
+  children: TestEntry[]
+  type: 'suite' | 'test'
+  specFile?: string
+  fullTitle?: string
+  featureFile?: string
+  featureLine?: number
+  suiteType?: string
+}
+
+export interface RunCapabilities {
+  canRunSuites: boolean
+  canRunTests: boolean
+}
+
+export interface RunnerOptions {
+  framework?: string
+  configFile?: string
+  configFilePath?: string
+  runCapabilities?: Partial<RunCapabilities>
+}
+
+export interface TestRunDetail {
+  uid: string
+  entryType: 'suite' | 'test'
+  specFile?: string
+  fullTitle?: string
+  label?: string
+  callSource?: string
+  configFile?: string
+  featureFile?: string
+  featureLine?: number
+  suiteType?: string
+}
+
+export enum TestState {
+  PASSED = 'passed',
+  FAILED = 'failed',
+  RUNNING = 'running',
+  SKIPPED = 'skipped'
+}
diff --git a/packages/app/src/controller/DataManager.ts b/packages/app/src/controller/DataManager.ts
index 65045f7..bbe469f 100644
--- a/packages/app/src/controller/DataManager.ts
+++ b/packages/app/src/controller/DataManager.ts
@@ -5,9 +5,21 @@ import type {
   CommandLog,
   TraceLog
 } from '@wdio/devtools-service/types'
+import type { SuiteStats, TestStats } from '@wdio/reporter'
 
 const CACHE_ID = 'wdio-trace-cache'
 
+type TestStatsFragment = Omit<Partial<TestStats>, 'uid'> & { uid: string }
+
+type SuiteStatsFragment = Omit<
+  Partial<SuiteStats>,
+  'uid' | 'tests' | 'suites'
+> & {
+  uid: string
+  tests?: TestStatsFragment[]
+  suites?: SuiteStatsFragment[]
+}
+
 export const mutationContext = createContext<TraceMutation[]>(
   Symbol('mutationContext')
 )
@@ -29,15 +41,21 @@ export const suiteContext = createContext<Record<string, any>[]>(
 )
 
 const hasConnection = createContext<boolean>(Symbol('hasConnection'))
+export const isTestRunningContext = createContext<boolean>(
+  Symbol('isTestRunning')
+)
 
-interface SocketMessage<T extends keyof TraceLog = keyof TraceLog> {
+interface SocketMessage<
+  T extends keyof TraceLog | 'testStopped' = keyof TraceLog | 'testStopped'
+> {
   scope: T
-  data: TraceLog[T]
+  data: T extends keyof TraceLog ? TraceLog[T] : unknown
 }
 
 export class DataManagerController implements ReactiveController {
   #ws?: WebSocket
   #host: ReactiveControllerHost & HTMLElement
+  #lastSeenRunTimestamp = 0
 
   mutationsContextProvider: ContextProvider<typeof mutationContext>
   logsContextProvider: ContextProvider<typeof logContext>
@@ -46,7 +64,6 @@ export class DataManagerController implements ReactiveController {
   commandsContextProvider: ContextProvider<typeof commandContext>
   sourcesContextProvider: ContextProvider<typeof sourceContext>
   suitesContextProvider: ContextProvider<typeof suiteContext>
-
   hasConnectionProvider: ContextProvider<typeof hasConnection>
 
   constructor(host: ReactiveControllerHost & HTMLElement) {
@@ -90,30 +107,126 @@ export class DataManagerController implements ReactiveController {
     return this.metadataContextProvider.value?.type
   }
 
-  /**
-   * connect to backend to receive data
-   */
+  // Public method to clear execution data when rerun is triggered
+  clearExecutionData(uid?: string) {
+    this.#resetExecutionData()
+    if (uid) {
+      this.#markTestAsRunning(uid)
+    }
+  }
+
+  // Private method to mark a test/suite as running immediately for UI feedback
+  #markTestAsRunning(uid: string) {
+    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,
+                start: new Date(),
+                end: undefined,
+                tests:
+                  s.tests?.map((test) => ({
+                    ...test,
+                    start: new Date(),
+                    end: undefined
+                  })) || [],
+                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 tests/suites as running
+          const markAsRunning = (s: SuiteStatsFragment): SuiteStatsFragment => {
+            // If this is the target suite/test, mark it as running
+            if (s.uid === uid) {
+              return {
+                ...s,
+                start: new Date(),
+                end: undefined, // Clear end to mark as running
+                tests:
+                  s.tests?.map((test) => ({
+                    ...test,
+                    start: new Date(),
+                    end: undefined
+                  })) || [],
+                suites: s.suites?.map(markAsRunning) || []
+              }
+            }
+
+            // Check if any child test matches
+            const updatedTests = s.tests?.map((test) => {
+              if (test.uid === uid) {
+                return {
+                  ...test,
+                  start: new Date(),
+                  end: undefined
+                }
+              }
+              return test
+            })
+
+            // Recursively check nested suites
+            const updatedNestedSuites = s.suites?.map(markAsRunning)
+
+            return {
+              ...s,
+              tests: updatedTests || [],
+              suites: updatedNestedSuites || []
+            }
+          }
+
+          updatedChunk[suiteUid] = markAsRunning(suite)
+        }
+      )
+      return updatedChunk
+    })
+
+    this.suitesContextProvider.setValue(updatedSuites)
+    this.#host.requestUpdate()
+  }
+
   hostConnected() {
-    /**
-     * expect application to be served from backend
-     */
     const wsUrl = `ws://${window.location.host}/client`
-    console.log(`Connecting to ${wsUrl}`)
     const ws = (this.#ws = new WebSocket(wsUrl))
 
-    /**
-     * if a connection to the backend is established we can
-     * start fetching data
-     */
     ws.addEventListener('open', () => {
       this.hasConnectionProvider.setValue(true)
       ws.addEventListener('message', this.#handleSocketMessage.bind(this))
       return this.#host.requestUpdate()
     })
 
-    /**
-     * otherwise attempt to load cached trace file
-     */
     ws.addEventListener('error', () => {
       try {
         const localStorageValue = JSON.parse(
@@ -130,7 +243,8 @@ export class DataManagerController implements ReactiveController {
 
   hostDisconnected() {
     if (this.#ws) {
-      return this.#ws.close()
+      this.#ws.close()
+      this.#ws = undefined
     }
   }
 
@@ -141,47 +255,36 @@ export class DataManagerController implements ReactiveController {
         return
       }
 
+      // Handle test stopped event
+      if (scope === 'testStopped') {
+        this.#handleTestStopped()
+        this.#host.requestUpdate()
+        return
+      }
+
+      // Check for new run BEFORE processing suites data
+      if (scope === 'suites') {
+        const shouldReset = this.#shouldResetForNewRun(data)
+        if (shouldReset) {
+          this.#resetExecutionData()
+        }
+      }
+
+      // Route data to appropriate handler
       if (scope === 'mutations') {
-        this.mutationsContextProvider.setValue([
-          ...this.mutationsContextProvider.value,
-          ...(data as TraceMutation[])
-        ])
+        this.#handleMutationsUpdate(data as TraceMutation[])
       } else if (scope === 'commands') {
-        this.commandsContextProvider.setValue([
-          ...this.commandsContextProvider.value,
-          ...(data as CommandLog[])
-        ])
+        this.#handleCommandsUpdate(data as CommandLog[])
       } else if (scope === 'metadata') {
-        this.metadataContextProvider.setValue({
-          ...this.metadataContextProvider.value,
-          ...(data as Metadata)
-        })
+        this.#handleMetadataUpdate(data as Metadata)
       } else if (scope === 'consoleLogs') {
-        this.consoleLogsContextProvider.setValue([
-          ...this.consoleLogsContextProvider.value,
-          ...(data as string[])
-        ])
+        this.#handleConsoleLogsUpdate(data as string[])
       } else if (scope === 'sources') {
-        const merged = {
-          ...(this.sourcesContextProvider.value || {}),
-          ...(data as Record<string, string>)
-        }
-        this.sourcesContextProvider.setValue(merged)
-        console.debug('Merged sources keys', Object.keys(merged))
+        this.#handleSourcesUpdate(data as Record<string, string>)
+      } else if (scope === 'suites') {
+        this.#handleSuitesUpdate(data)
       } else {
-        const providerMap = {
-          mutations: this.mutationsContextProvider,
-          logs: this.logsContextProvider,
-          consoleLogs: this.consoleLogsContextProvider,
-          metadata: this.metadataContextProvider,
-          commands: this.commandsContextProvider,
-          sources: this.sourcesContextProvider,
-          suites: this.suitesContextProvider
-        } as const
-        const provider = providerMap[scope as keyof typeof providerMap]
-        if (provider) {
-          provider.setValue(data as any)
-        }
+        this.#handleGenericUpdate(scope, data)
       }
 
       this.#host.requestUpdate()
@@ -190,6 +293,270 @@ export class DataManagerController implements ReactiveController {
     }
   }
 
+  #shouldResetForNewRun(data: unknown): boolean {
+    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 =
+          suite.start instanceof Date
+            ? suite.start.getTime()
+            : typeof suite.start === 'number'
+              ? suite.start
+              : 0
+
+        // New run detected if we see a newer start timestamp
+        if (suiteStartTime > this.#lastSeenRunTimestamp) {
+          this.#lastSeenRunTimestamp = suiteStartTime
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  #resetExecutionData() {
+    // Clear ONLY execution visualization data
+    this.mutationsContextProvider.setValue([])
+    this.commandsContextProvider.setValue([])
+    this.logsContextProvider.setValue([])
+    this.consoleLogsContextProvider.setValue([])
+
+    // Keep suitesContextProvider intact - test list stays visible
+    // Keep metadata and sources - they're environment-level
+
+    // Force synchronous re-render
+    this.#host.requestUpdate()
+  }
+
+  #handleTestStopped() {
+    // 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' as 'failed',
+                  error: {
+                    message: 'Test execution stopped',
+                    name: 'TestStoppedError'
+                  }
+                }
+              }
+              return test
+            })
+
+            // Recursively update nested suites (for Cucumber scenarios)
+            const updatedNestedSuites = s.suites?.map(updateSuite)
+
+            return {
+              ...s,
+              tests: updatedTests || [],
+              suites: updatedNestedSuites || []
+            }
+          }
+
+          updatedChunk[uid] = updateSuite(suite)
+        }
+      )
+      return updatedChunk
+    })
+
+    this.suitesContextProvider.setValue(updatedSuites)
+  }
+
+  #handleMutationsUpdate(data: TraceMutation[]) {
+    this.mutationsContextProvider.setValue([
+      ...(this.mutationsContextProvider.value || []),
+      ...data
+    ])
+  }
+
+  #handleCommandsUpdate(data: CommandLog[]) {
+    this.commandsContextProvider.setValue([
+      ...(this.commandsContextProvider.value || []),
+      ...data
+    ])
+  }
+
+  #handleConsoleLogsUpdate(data: string[]) {
+    this.consoleLogsContextProvider.setValue([
+      ...(this.consoleLogsContextProvider.value || []),
+      ...data
+    ])
+  }
+
+  #handleMetadataUpdate(data: Metadata) {
+    this.metadataContextProvider.setValue({
+      ...this.metadataContextProvider.value,
+      ...data
+    })
+  }
+
+  #handleSourcesUpdate(data: Record<string, string>) {
+    const merged = {
+      ...(this.sourcesContextProvider.value || {}),
+      ...data
+    }
+    this.sourcesContextProvider.setValue(merged)
+  }
+
+  #handleSuitesUpdate(data: unknown) {
+    const payloads = Array.isArray(data)
+      ? (data as Record<string, SuiteStatsFragment>[])
+      : ([data] as Record<string, SuiteStatsFragment>[])
+
+    const suiteMap = new Map<string, SuiteStatsFragment>()
+
+    // Populate with existing suites (keeps test list visible)
+    ;(this.suitesContextProvider.value || []).forEach((chunk) => {
+      Object.entries(chunk as Record<string, SuiteStatsFragment>).forEach(
+        ([uid, suite]) => {
+          if (suite?.uid) {
+            suiteMap.set(uid, suite)
+          }
+        }
+      )
+    })
+
+    // Process incoming payloads
+    payloads.forEach((chunk) => {
+      if (!chunk) {
+        return
+      }
+
+      Object.entries(chunk).forEach(([uid, suite]) => {
+        if (!suite?.uid) {
+          return
+        }
+
+        const existing = suiteMap.get(uid)
+
+        // Always merge to preserve all tests in the suite
+        suiteMap.set(uid, existing ? this.#mergeSuite(existing, suite) : suite)
+      })
+    })
+
+    this.suitesContextProvider.setValue(
+      Array.from(suiteMap.entries()).map(([uid, suite]) => ({ [uid]: suite }))
+    )
+  }
+
+  #getTimestamp(date: Date | number | undefined): number {
+    if (!date) {
+      return 0
+    }
+    return date instanceof Date ? date.getTime() : date
+  }
+
+  #handleGenericUpdate(scope: keyof TraceLog, data: any) {
+    const providerMap = {
+      mutations: this.mutationsContextProvider,
+      logs: this.logsContextProvider,
+      consoleLogs: this.consoleLogsContextProvider,
+      metadata: this.metadataContextProvider,
+      commands: this.commandsContextProvider,
+      sources: this.sourcesContextProvider,
+      suites: this.suitesContextProvider
+    } as const
+
+    const provider = providerMap[scope as keyof typeof providerMap]
+    if (provider) {
+      provider.setValue(data)
+    }
+  }
+
+  #mergeSuite(existing: SuiteStatsFragment, incoming: SuiteStatsFragment) {
+    // Note: Rerun detection and clearing is now handled in #handleSuitesUpdate
+    // before any merges happen, so data is cleared proactively
+
+    // 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
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { tests, suites, ...incomingProps } = incoming
+
+    return {
+      ...existing,
+      ...incomingProps,
+      tests: mergedTests,
+      suites: mergedSuites
+    }
+  }
+
+  #mergeChildSuites(
+    prev: SuiteStatsFragment[] = [],
+    next: SuiteStatsFragment[] = []
+  ) {
+    const map = new Map<string, SuiteStatsFragment>()
+    prev?.forEach((suite) => suite && map.set(suite.uid, suite))
+
+    next?.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))
+
+    next?.forEach((test) => {
+      if (!test) {
+        return
+      }
+      const existing = map.get(test.uid)
+
+      // Check if this test is a rerun (different start time)
+      const isRerun =
+        existing &&
+        test.start &&
+        existing.start &&
+        this.#getTimestamp(test.start) !== this.#getTimestamp(existing.start)
+
+      // Replace on rerun, 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)
diff --git a/packages/app/src/vite-env.d.ts b/packages/app/src/vite-env.d.ts
index 5c16f2b..a5d9678 100644
--- a/packages/app/src/vite-env.d.ts
+++ b/packages/app/src/vite-env.d.ts
@@ -14,7 +14,14 @@ interface GlobalEventHandlersEventMap {
   'app-test-filter': CustomEvent<
     import('./components/sidebar/filter').DevtoolsSidebarFilter
   >
+  'app-test-run': CustomEvent<
+    import('./components/sidebar/test-suite').TestRunDetail
+  >
+  'app-test-stop': CustomEvent<
+    import('./components/sidebar/test-suite').TestRunDetail
+  >
   'app-logs': CustomEvent<string>
   'load-trace': CustomEvent<TraceLog>
   'show-command': CustomEvent<CommandEventProps>
+  'clear-execution-data': CustomEvent<{ uid?: string }>
 }
diff --git a/packages/backend/package.json b/packages/backend/package.json
index f7b1b64..b47c6ff 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wdio/devtools-backend",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Backend service to spin up WebdriverIO Devtools",
   "author": "Christian Bromann <mail@bromann.dev>",
   "license": "MIT",
@@ -20,11 +20,13 @@
   "dependencies": {
     "@fastify/static": "^8.2.0",
     "@fastify/websocket": "^11.2.0",
+    "@wdio/cli": "9.18.0",
     "@wdio/devtools-app": "workspace:^",
     "@wdio/logger": "9.18.0",
     "fastify": "^5.5.0",
     "get-port": "^7.1.0",
-    "import-meta-resolve": "^4.1.0"
+    "import-meta-resolve": "^4.1.0",
+    "tree-kill": "^1.2.2"
   },
   "devDependencies": {
     "@types/ws": "^8.18.1",
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
index 385f27d..89c2809 100644
--- a/packages/backend/src/index.ts
+++ b/packages/backend/src/index.ts
@@ -9,6 +9,8 @@ import { WebSocket } from 'ws'
 
 import { getDevtoolsApp } from './utils.js'
 import { DEFAULT_PORT } from './constants.js'
+import { testRunner } from './runner.js'
+import type { RunnerRequestBody } from './types.js'
 
 let server: FastifyInstance | undefined
 
@@ -20,6 +22,14 @@ interface DevtoolsBackendOptions {
 const log = logger('@wdio/devtools-backend')
 const clients = new Set<WebSocket>()
 
+export function broadcastToClients(message: string) {
+  clients.forEach((client) => {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(message)
+    }
+  })
+}
+
 export async function start(opts: DevtoolsBackendOptions = {}) {
   const host = opts.hostname || 'localhost'
   const port = opts.port || (await getPort({ port: DEFAULT_PORT }))
@@ -31,6 +41,38 @@ export async function start(opts: DevtoolsBackendOptions = {}) {
     root: appPath
   })
 
+  server.post(
+    '/api/tests/run',
+    async (request: FastifyRequest<{ Body: RunnerRequestBody }>, reply) => {
+      const body = request.body
+      if (!body?.uid || !body.entryType) {
+        return reply.code(400).send({ error: 'Invalid run payload' })
+      }
+      try {
+        await testRunner.run({
+          ...body,
+          devtoolsHost: host,
+          devtoolsPort: port
+        })
+        return reply.send({ ok: true })
+      } catch (error) {
+        log.error(`Failed to start test run: ${(error as Error).message}`)
+        return reply.code(500).send({ error: (error as Error).message })
+      }
+    }
+  )
+
+  server.post('/api/tests/stop', async (_request, reply) => {
+    testRunner.stop()
+    broadcastToClients(
+      JSON.stringify({
+        scope: 'testStopped',
+        data: { stopped: true, timestamp: Date.now() }
+      })
+    )
+    reply.send({ ok: true })
+  })
+
   server.get(
     '/client',
     { websocket: true },
diff --git a/packages/backend/src/runner.ts b/packages/backend/src/runner.ts
new file mode 100644
index 0000000..eb052f7
--- /dev/null
+++ b/packages/backend/src/runner.ts
@@ -0,0 +1,350 @@
+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 type { RunnerRequestBody } from './types.js'
+import { WDIO_CONFIG_FILENAMES } from './types.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, '\\$&')
+}
+
+const FRAMEWORK_FILTERS: Record<
+  string,
+  (ctx: { specArg?: string; payload: RunnerRequestBody }) => string[]
+> = {
+  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
+  },
+  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
+  },
+  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 = ({ specArg }: { specArg?: string }) =>
+  specArg ? ['--spec', specArg] : []
+
+class TestRunner {
+  #child?: ChildProcess
+  #lastPayload?: RunnerRequestBody
+  #baseDir = process.cwd()
+
+  async run(payload: RunnerRequestBody) {
+    if (this.#child) {
+      throw new Error('A test run is already in progress')
+    }
+
+    const configPath = this.#resolveConfigPath(payload)
+    this.#baseDir = process.env.DEVTOOLS_RUNNER_CWD || path.dirname(configPath)
+
+    const args = [
+      wdioBin,
+      'run',
+      configPath,
+      ...this.#buildFilters(payload)
+    ].filter(Boolean)
+
+    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'
+    }
+
+    const child = spawn(process.execPath, args, {
+      cwd: this.#baseDir,
+      env: childEnv,
+      stdio: 'inherit',
+      detached: false
+    })
+
+    this.#child = child
+    this.#lastPayload = payload
+
+    child.once('close', () => {
+      this.#child = undefined
+      this.#lastPayload = undefined
+      this.#baseDir = process.cwd()
+    })
+
+    await new Promise<void>((resolve, reject) => {
+      child.once('spawn', resolve)
+      child.once('error', (error) => {
+        this.#child = undefined
+        this.#lastPayload = undefined
+        this.#baseDir = process.cwd()
+        reject(error)
+      })
+    })
+  }
+
+  stop() {
+    if (!this.#child || !this.#child.pid) {
+      return
+    }
+
+    const pid = this.#child.pid
+
+    // Kill the entire process tree
+    kill(pid, 'SIGTERM', (err) => {
+      if (err) {
+        console.error('Error stopping test run:', err)
+        // Try force kill if graceful termination fails
+        kill(pid, 'SIGKILL')
+      }
+    })
+
+    // Clean up immediately
+    this.#child = undefined
+    this.#lastPayload = undefined
+    this.#baseDir = process.cwd()
+  }
+
+  #buildFilters(payload: RunnerRequestBody) {
+    const framework = (payload.framework || '').toLowerCase()
+    const specFile = payload.runAll
+      ? undefined
+      : this.#normaliseSpecFile(payload)
+    const specArg = specFile
+      ? this.#buildSpecArgument(specFile, payload)
+      : undefined
+
+    const builderCandidate = FRAMEWORK_FILTERS[framework]
+    const builder =
+      typeof builderCandidate === 'function'
+        ? builderCandidate
+        : DEFAULT_FILTERS
+    return builder({ specArg, payload })
+  }
+
+  #buildSpecArgument(specFile: string, payload: RunnerRequestBody) {
+    const line = this.#resolveLineNumber(payload)
+    return line ? `${specFile}:${line}` : specFile
+  }
+
+  #resolveLineNumber(payload: RunnerRequestBody) {
+    if (payload.lineNumber && payload.lineNumber > 0) {
+      return payload.lineNumber
+    }
+    const source = payload.callSource?.trim() || this.#lastPayload?.callSource
+    if (!source) {
+      return this.#lastPayload?.lineNumber
+    }
+    const match = /:(\d+)(?::\d+)?$/.exec(source)
+    return match ? Number(match[1]) : this.#lastPayload?.lineNumber
+  }
+
+  #normaliseSpecFile(payload: RunnerRequestBody) {
+    const candidate = this.#getSpecCandidate(payload)
+    return candidate ? this.#toFsPath(candidate) : undefined
+  }
+
+  #getSpecCandidate(payload?: RunnerRequestBody) {
+    return (
+      payload?.specFile ||
+      this.#extractSpecFromCallSource(payload?.callSource) ||
+      this.#lastPayload?.specFile
+    )
+  }
+
+  #extractSpecFromCallSource(source?: string) {
+    if (!source) {
+      return undefined
+    }
+    const match = /^(.*?):\d+:\d+$/.exec(source.trim())
+    return match?.[1] ?? source
+  }
+
+  #toFsPath(candidate: string) {
+    const filePath = candidate.startsWith('file://')
+      ? url.fileURLToPath(candidate)
+      : candidate
+    return path.isAbsolute(filePath)
+      ? filePath
+      : path.resolve(this.#baseDir, filePath)
+  }
+
+  #resolveConfigPath(payload?: RunnerRequestBody) {
+    const specCandidate = this.#getSpecCandidate(payload)
+    const specDir = specCandidate
+      ? path.dirname(this.#toFsPath(specCandidate))
+      : undefined
+
+    const candidates = this.#dedupeCandidates([
+      payload?.configFile,
+      this.#lastPayload?.configFile,
+      process.env.DEVTOOLS_WDIO_CONFIG,
+      this.#findConfigFromSpec(specCandidate),
+      ...this.#expandDefaultConfigsFor(this.#baseDir),
+      ...this.#expandDefaultConfigsFor(path.resolve(this.#baseDir, 'example')),
+      ...this.#expandDefaultConfigsFor(specDir)
+    ])
+
+    for (const candidate of candidates) {
+      const resolved = this.#toFsPath(candidate)
+      if (fs.existsSync(resolved)) {
+        return resolved
+      }
+    }
+
+    throw new Error(
+      `Cannot locate WDIO config. Tried:\n${candidates
+        .map((c) => ` • ${this.#toFsPath(c)}`)
+        .join('\n')}`
+    )
+  }
+
+  #findConfigFromSpec(specFile?: string) {
+    if (!specFile) {
+      return undefined
+    }
+
+    const fsSpec = this.#toFsPath(specFile)
+    let dir = path.dirname(fsSpec)
+    const root = path.parse(dir).root
+
+    while (dir && dir !== root) {
+      for (const file of WDIO_CONFIG_FILENAMES) {
+        const candidate = path.join(dir, file)
+        if (fs.existsSync(candidate)) {
+          return candidate
+        }
+      }
+      const parent = path.dirname(dir)
+      if (parent === dir) {
+        break
+      }
+      dir = parent
+    }
+
+    return undefined
+  }
+
+  #expandDefaultConfigsFor(baseDir?: string) {
+    if (!baseDir) {
+      return []
+    }
+    return WDIO_CONFIG_FILENAMES.map((file) => path.resolve(baseDir, file))
+  }
+
+  #dedupeCandidates(values: Array<string | undefined>) {
+    return Array.from(
+      new Set(
+        values.filter(
+          (value): value is string =>
+            typeof value === 'string' && value.length > 0
+        )
+      )
+    )
+  }
+}
+
+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
new file mode 100644
index 0000000..2d0f87b
--- /dev/null
+++ b/packages/backend/src/types.ts
@@ -0,0 +1,24 @@
+export const WDIO_CONFIG_FILENAMES = [
+  'wdio.conf.ts',
+  'wdio.conf.js',
+  'wdio.conf.cjs',
+  'wdio.conf.mjs'
+] 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
+}
diff --git a/packages/service/package.json b/packages/service/package.json
index 3a85ea4..bf7c146 100644
--- a/packages/service/package.json
+++ b/packages/service/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wdio/devtools-service",
-  "version": "10.0.1",
+  "version": "10.1.0",
   "description": "Hook up WebdriverIO with DevTools",
   "author": "Christian Bromann <mail@bromann.dev>",
   "type": "module",
diff --git a/packages/service/src/launcher.ts b/packages/service/src/launcher.ts
index 687e804..fd9494c 100644
--- a/packages/service/src/launcher.ts
+++ b/packages/service/src/launcher.ts
@@ -15,6 +15,19 @@ export class DevToolsAppLauncher {
 
   async onPrepare(_: never, caps: ExtendedCapabilities[]) {
     try {
+      const reusePort = process.env.DEVTOOLS_APP_PORT
+      const reuseHost =
+        process.env.DEVTOOLS_APP_HOST || this.#options.hostname || 'localhost'
+      if (process.env.DEVTOOLS_APP_REUSE === '1' && reusePort) {
+        log.info(
+          `Reusing existing DevTools app at http://${reuseHost}:${reusePort}`
+        )
+        this.#updateCapabilities(caps, {
+          port: Number(reusePort),
+          hostname: reuseHost
+        })
+        return
+      }
       const { server } = await start({
         port: this.#options.port,
         hostname: this.#options.hostname
@@ -27,7 +40,10 @@ export class DevToolsAppLauncher {
         return console.log(`Failed to start server on port ${port}`)
       }
 
-      this.#updateCapabilities(caps, { port })
+      this.#updateCapabilities(caps, {
+        port,
+        hostname: this.#options.hostname || 'localhost'
+      })
       this.#browser = await remote({
         automationProtocol: 'devtools',
         capabilities: {
@@ -64,7 +80,7 @@ export class DevToolsAppLauncher {
 
   #updateCapabilities(
     caps: ExtendedCapabilities[],
-    devtoolsApp: { port: number }
+    devtoolsApp: { port: number; hostname?: string }
   ) {
     /**
      * we don't support multiremote yet
@@ -76,7 +92,7 @@ export class DevToolsAppLauncher {
     for (const cap of caps) {
       cap['wdio:devtoolsOptions'] = {
         port: devtoolsApp.port,
-        hostname: 'localhost'
+        hostname: devtoolsApp.hostname || 'localhost'
       }
     }
   }
diff --git a/packages/service/src/reporter.ts b/packages/service/src/reporter.ts
index 45d44ac..97cd7e0 100644
--- a/packages/service/src/reporter.ts
+++ b/packages/service/src/reporter.ts
@@ -7,6 +7,145 @@ import {
   setCurrentSpecFile,
   mapSuiteToSource
 } 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>()
+
+// Generate stable UID based on test/suite metadata
+function generateStableUid(item: SuiteStats | TestStats): string {
+  const rawItem = item as any
+
+  // For Cucumber scenarios with numeric UIDs (example indices), use them directly
+  // to ensure consistent UIDs across reruns
+  if (rawItem.type === 'scenario' && /^\d+$/.test(rawItem.uid)) {
+    const parts = [
+      item.title,
+      rawItem.file || '',
+      rawItem.parent || '',
+      rawItem.cid || '',
+      // Use original UID (example index) to ensure stable identification
+      `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)}`
+  }
+
+  // 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()
+}
+
+/**
+ * Parse a Cucumber feature file to extract line numbers for scenario outline examples
+ * Returns a map of example index -> line number
+ */
+function parseFeatureFileForExampleLines(
+  filePath: string,
+  scenarioTitle: string
+): Map<number, number> | null {
+  try {
+    if (!existsSync(filePath)) {
+      return null
+    }
+
+    const content = readFileSync(filePath, 'utf-8')
+    const lines = content.split('\n')
+
+    // Find the scenario outline with matching title
+    let scenarioLineIndex = -1
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim()
+      if (
+        (line.startsWith('Scenario Outline:') ||
+          line.startsWith('Scenario:')) &&
+        line.includes(scenarioTitle)
+      ) {
+        scenarioLineIndex = i
+        break
+      }
+    }
+
+    if (scenarioLineIndex === -1) {
+      return null
+    }
+
+    // Find the Examples section
+    let examplesStartIndex = -1
+    for (let i = scenarioLineIndex; i < lines.length; i++) {
+      if (lines[i].trim().startsWith('Examples:')) {
+        examplesStartIndex = i
+        break
+      }
+    }
+
+    if (examplesStartIndex === -1) {
+      return null
+    }
+
+    // Find the data rows (skip header row with |)
+    const exampleLines = new Map<number, number>()
+    let exampleIndex = 0
+    let foundHeader = false
+
+    for (let i = examplesStartIndex + 1; i < lines.length; i++) {
+      const line = lines[i].trim()
+
+      // Stop at next scenario or feature end
+      if (
+        line.startsWith('Scenario') ||
+        line.startsWith('Feature:') ||
+        (!line && exampleIndex > 0)
+      ) {
+        break
+      }
+
+      // Data rows start with |
+      if (line.startsWith('|')) {
+        if (!foundHeader) {
+          foundHeader = true // Skip header row
+        } else {
+          // Store line number (1-indexed)
+          exampleLines.set(exampleIndex, i + 1)
+          exampleIndex++
+        }
+      }
+    }
+
+    return exampleLines.size > 0 ? exampleLines : null
+  } catch (error) {
+    console.error('[Reporter] Failed to parse feature file:', error)
+    return null
+  }
+}
 
 export class TestReporter extends WebdriverIOReporter {
   #report: (data: any) => void
@@ -16,10 +155,35 @@ export class TestReporter extends WebdriverIOReporter {
   constructor(options: any, report: (data: any) => void) {
     super(options)
     this.#report = report
+    // Reset signature counters for each new reporter instance (new test run)
+    resetSignatureCounters()
   }
 
   onSuiteStart(suiteStats: SuiteStats): void {
     super.onSuiteStart(suiteStats)
+
+    const rawSuite = suiteStats as any
+
+    // For Cucumber scenario outlines: extract feature file line number from example index
+    if (rawSuite.type === 'scenario' && suiteStats.file?.endsWith('.feature')) {
+      const exampleIndex = parseInt(rawSuite.uid, 10)
+      if (!isNaN(exampleIndex)) {
+        const exampleLines = parseFeatureFileForExampleLines(
+          suiteStats.file,
+          suiteStats.title
+        )
+        if (exampleLines?.has(exampleIndex)) {
+          const lineNumber = exampleLines.get(exampleIndex)!
+          rawSuite.featureFile = suiteStats.file
+          rawSuite.featureLine = lineNumber
+        }
+      }
+    }
+
+    // Generate stable UID for consistent identification across reruns
+    const stableUid = generateStableUid(suiteStats)
+    ;(suiteStats as any).uid = stableUid
+
     this.#currentSpecFile = suiteStats.file
     setCurrentSpecFile(suiteStats.file)
 
@@ -39,13 +203,27 @@ export class TestReporter extends WebdriverIOReporter {
   }
 
   onTestStart(testStats: TestStats): void {
-    // Enrich testStats with callSource info
+    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
+    }
+
+    // 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}`
     }
-    super.onTestStart(testStats)
+
+    // Generate stable UID after enriching metadata for consistent test identification
+    const stableUid = generateStableUid(testStats)
+    ;(testStats as any).uid = stableUid
+
     this.#sendUpstream()
   }
 
@@ -78,9 +256,11 @@ export class TestReporter extends WebdriverIOReporter {
 
     const payload: Record<string, SuiteStats>[] = []
 
-    for (const [uid, suite] of Object.entries(this.suites)) {
+    // 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) {
-        payload.push({ [uid]: suite })
+        const actualUid = (suite as any).uid
+        payload.push({ [actualUid]: suite })
       }
     }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 48975d4..afe1259 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -196,6 +196,9 @@ importers:
       '@fastify/websocket':
         specifier: ^11.2.0
         version: 11.2.0
+      '@wdio/cli':
+        specifier: 9.18.0
+        version: 9.18.0(@types/node@24.9.1)(expect-webdriverio@5.4.3)(puppeteer-core@21.11.0)
       '@wdio/devtools-app':
         specifier: workspace:^
         version: link:../app
@@ -211,6 +214,9 @@ importers:
       import-meta-resolve:
         specifier: ^4.1.0
         version: 4.2.0
+      tree-kill:
+        specifier: ^1.2.2
+        version: 1.2.2
     devDependencies:
       '@types/ws':
         specifier: ^8.18.1
@@ -4728,6 +4734,10 @@ packages:
   traverse@0.3.9:
     resolution: {integrity: sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==}
 
+  tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
@@ -10276,6 +10286,8 @@ snapshots:
 
   traverse@0.3.9: {}
 
+  tree-kill@1.2.2: {}
+
   ts-api-utils@2.1.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
diff --git a/tsconfig.json b/tsconfig.json
index c3e1ffc..fba59e2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,10 @@
       "@components/*": ["packages/app/src/components/*"],
       "@core/*": ["packages/app/src/core/*"],
 
+      "@wdio/devtools-backend": ["packages/backend/src/index.ts"],
+      "@wdio/devtools-backend/*": ["packages/backend/src/*"],
+      "@wdio/devtools-script": ["packages/script/src/index.ts"],
+      "@wdio/devtools-script/*": ["packages/script/src/*"],
       "@wdio/devtools-service": ["packages/service/src/index.ts"],
       "@wdio/devtools-service/*": ["packages/service/src/*"]
     }