diff --git a/README.md b/README.md
index f5b7c974..67ca25f8 100644
--- a/README.md
+++ b/README.md
@@ -125,28 +125,35 @@ See [ARCHITECTURE.md](./ARCHITECTURE.md) for the full package map and data flow,
 
 ## Demo
 
+### ▶️ Test Runner
+<img src="assets/test-runner.gif" alt="Test Runner Demo" width="400" />
+
 ### 🛠️ Test Rerunner & Snapshot
-<img src="https://github.com/user-attachments/assets/c3804559-c0ec-441a-80dc-e4048385f3b2" alt="Test Rerunner & Snapshot Demo" width="400" />
+<img src="assets/test-rerunner.gif" alt="Test Rerunner & Snapshot Demo" width="400" />
 
 ### 🛑 Stop Test Runner
-<img src="https://github.com/user-attachments/assets/f42e43ed-bfac-4280-be5f-87895fb232d3" alt="Stop Test Runner Demo" width="400" />
+<img src="assets/stop-test-runner.gif" alt="Stop Test Runner Demo" width="400" />
 
-### 🔍︎ TestLens
-<img src="https://github.com/user-attachments/assets/72c576a1-330a-49c4-affe-df260e7c70df" alt="TestLens Demo" width="400" />
+### ⚡ Actions & Command Logs
+<img src="assets/actions-command-logs.gif" alt="Actions & Command Logs Demo" width="400" />
 
 ### >_ Console Logs
-<img src="https://github.com/user-attachments/assets/aff14f15-a298-4a12-bc3d-8e4deefddae6" alt="Console Logs" width="400" />
+<img src="assets/console-logs.gif" alt="Console Logs Demo" width="400" />
 
 ### 🌐 Network Logs
-<img src="https://github.com/user-attachments/assets/2cca4885-f989-4d07-b7ce-a4fa476c3c1c" alt="Network Logs 1" width="400" />
+<img src="assets/network-logs.gif" alt="Network Logs Demo" width="400" />
 
-<img src="https://github.com/user-attachments/assets/0f81e0af-75b5-454f-bffb-e40654c89908" alt="Network Logs 2" width="400" />
+### 📋 Metadata
+<img src="assets/metadata.gif" alt="Metadata Demo" width="400" />
 
 ### 🎬 Session Screencast
-<img src="https://github.com/user-attachments/assets/65914424-480f-4b50-b54a-69e659710f15" alt="Screencast" width="400" />
+<img src="assets/screencast.gif" alt="Session Screencast Demo" width="400" />
 
 ### 🐞 Preserve & Rerun
-<img src="https://github.com/user-attachments/assets/247d687e-59ae-41ba-83c8-ad6be9ff7687" alt="Preserve & Rerun" width="400" />
+<img src="assets/preserve-rerun.gif" alt="Preserve & Rerun Demo" width="400" />
+
+### 🔍︎ TestLens
+<img src="assets/testlens.gif" alt="TestLens Demo" width="400" />
 
 ## Installation
 
diff --git a/assets/actions-command-logs.gif b/assets/actions-command-logs.gif
new file mode 100644
index 00000000..5d7da709
Binary files /dev/null and b/assets/actions-command-logs.gif differ
diff --git a/assets/console-logs.gif b/assets/console-logs.gif
new file mode 100644
index 00000000..853f383a
Binary files /dev/null and b/assets/console-logs.gif differ
diff --git a/assets/metadata.gif b/assets/metadata.gif
new file mode 100644
index 00000000..2e37c7a3
Binary files /dev/null and b/assets/metadata.gif differ
diff --git a/assets/network-logs.gif b/assets/network-logs.gif
new file mode 100644
index 00000000..96277ae4
Binary files /dev/null and b/assets/network-logs.gif differ
diff --git a/assets/preserve-rerun.gif b/assets/preserve-rerun.gif
new file mode 100644
index 00000000..84c86f7a
Binary files /dev/null and b/assets/preserve-rerun.gif differ
diff --git a/assets/screencast.gif b/assets/screencast.gif
new file mode 100644
index 00000000..e0b3887a
Binary files /dev/null and b/assets/screencast.gif differ
diff --git a/assets/stop-test-runner.gif b/assets/stop-test-runner.gif
new file mode 100644
index 00000000..760e6922
Binary files /dev/null and b/assets/stop-test-runner.gif differ
diff --git a/assets/test-rerunner.gif b/assets/test-rerunner.gif
new file mode 100644
index 00000000..e3fc4e02
Binary files /dev/null and b/assets/test-rerunner.gif differ
diff --git a/assets/test-runner.gif b/assets/test-runner.gif
new file mode 100644
index 00000000..b2697350
Binary files /dev/null and b/assets/test-runner.gif differ
diff --git a/assets/testlens.gif b/assets/testlens.gif
new file mode 100644
index 00000000..17d205ec
Binary files /dev/null and b/assets/testlens.gif differ
diff --git a/examples/nightwatch/nightwatch.conf.cjs b/examples/nightwatch/nightwatch.conf.cjs
index 7f14af67..2a969097 100644
--- a/examples/nightwatch/nightwatch.conf.cjs
+++ b/examples/nightwatch/nightwatch.conf.cjs
@@ -32,7 +32,7 @@ module.exports = {
             '--headless',
             '--no-sandbox',
             '--disable-dev-shm-usage',
-            '--window-size=1600,1200'
+            '--window-size=1600,900'
           ]
         },
         'goog:loggingPrefs': { performance: 'ALL' }
diff --git a/examples/wdio/wdio.conf.ts b/examples/wdio/wdio.conf.ts
index 00abe28a..0f7b3470 100644
--- a/examples/wdio/wdio.conf.ts
+++ b/examples/wdio/wdio.conf.ts
@@ -69,7 +69,7 @@ export const config: Options.Testrunner = {
           '--headless',
           '--disable-gpu',
           '--remote-allow-origins=*',
-          '--window-size=1600,1200'
+          '--window-size=1600,900'
         ]
       }
       // }, {
diff --git a/packages/app/src/app.ts b/packages/app/src/app.ts
index c98fa1cf..788facb2 100644
--- a/packages/app/src/app.ts
+++ b/packages/app/src/app.ts
@@ -6,7 +6,11 @@ import { TraceType, type TraceLog } from '@wdio/devtools-shared'
 import { Element } from '@core/element'
 import { DataManagerController } from './controller/DataManager.js'
 import { DragController, Direction } from './utils/DragController.js'
-import { SIDEBAR_MIN_WIDTH, DARK_MODE_KEY } from './controller/constants.js'
+import {
+  SIDEBAR_MIN_WIDTH,
+  SIDEBAR_DEFAULT_WIDTH,
+  DARK_MODE_KEY
+} from './controller/constants.js'
 import { POPOUT_QUERY } from './components/workbench/compare/constants.js'
 
 // Bootstrap the dark-mode class on <body> as early as possible so popout
@@ -65,7 +69,7 @@ export class WebdriverIODevtoolsApplication extends Element {
   #drag = new DragController(this, {
     localStorageKey: 'sidebarWidth',
     minPosition: SIDEBAR_MIN_WIDTH,
-    initialPosition: window.innerWidth * 0.2,
+    initialPosition: SIDEBAR_DEFAULT_WIDTH,
     getContainerEl: () => this.#getWindow(),
     direction: Direction.horizontal
   })
diff --git a/packages/app/src/components/browser/browser-chrome.ts b/packages/app/src/components/browser/browser-chrome.ts
new file mode 100644
index 00000000..0aa0a4da
--- /dev/null
+++ b/packages/app/src/components/browser/browser-chrome.ts
@@ -0,0 +1,36 @@
+import type { nothing } from 'lit'
+import { html, type TemplateResult } from 'lit'
+
+import '~icons/mdi/world.js'
+import '~icons/mdi/lock.js'
+
+/** The browser-frame chrome: traffic-light dots, address bar (with a lock for
+ *  https), and a slot for the Snapshot/Screencast view toggle. Extracted from
+ *  the snapshot component so that file stays focused on capture/replay. */
+export function renderBrowserChrome(
+  displayUrl: string | undefined,
+  viewToggle: TemplateResult | typeof nothing
+): TemplateResult {
+  return html`
+    <header
+      class="flex items-center mx-2 bg-sideBarBackground rounded-t-[14px]"
+    >
+      <div class="frame-dot bg-notificationsErrorIconForeground"></div>
+      <div class="frame-dot bg-notificationsWarningIconForeground"></div>
+      <div class="frame-dot bg-portsIconRunningProcessForeground"></div>
+      <div
+        class="flex items-center mx-4 my-2 pr-2 bg-input-background text-inputForeground border border-editorSuggestWidgetBorder rounded leading-7 flex-1 min-w-0 overflow-hidden"
+      >
+        ${displayUrl?.startsWith('https')
+          ? html`<icon-mdi-lock
+              class="w-[16px] h-[16px] m-1 mr-2 flex-shrink-0 text-chartsGreen"
+            ></icon-mdi-lock>`
+          : html`<icon-mdi-world
+              class="w-[20px] h-[20px] m-1 mr-2 flex-shrink-0"
+            ></icon-mdi-world>`}
+        <span class="truncate">${displayUrl}</span>
+      </div>
+      ${viewToggle}
+    </header>
+  `
+}
diff --git a/packages/app/src/components/browser/screencast-player.ts b/packages/app/src/components/browser/screencast-player.ts
new file mode 100644
index 00000000..7687d1c3
--- /dev/null
+++ b/packages/app/src/components/browser/screencast-player.ts
@@ -0,0 +1,343 @@
+import { Element } from '@core/element'
+import { css, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { consume } from '@lit/context'
+import type { CommandLog } from '@wdio/devtools-shared'
+
+import { commandContext } from '../../controller/context.js'
+import { computeMarkers, formatClock } from './scrubber.js'
+
+const COMPONENT = 'wdio-devtools-screencast-player'
+
+/**
+ * Screencast video player with a custom scrubber: play/pause, `m:ss / m:ss`
+ * time, an orange progress bar with drag-seek, and per-command markers pinned
+ * to the recording timeline. Owns the `<video>` element and all playback state;
+ * the parent only supplies `src` and the recording window (`startTime`/
+ * `duration`). Markers come from the shared command context.
+ */
+@customElement(COMPONENT)
+export class ScreencastPlayer extends Element {
+  /** `/api/video/:sessionId` URL of the recording to play. */
+  @property({ type: String }) src = ''
+  /** Unix ms timestamp of the recording's first frame (marker origin). */
+  @property({ type: Number }) startTime?: number
+  /** Recording span in ms (marker scale). */
+  @property({ type: Number }) duration?: number
+
+  @consume({ context: commandContext, subscribe: true })
+  commands: CommandLog[] = []
+
+  @state() private currentTime = 0
+  @state() private videoDuration = 0
+  @state() private playing = false
+
+  @query('video')
+  video?: HTMLVideoElement
+
+  static styles = [
+    ...Element.styles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+      }
+
+      video {
+        flex: 1;
+        min-height: 0;
+        width: 100%;
+        object-fit: contain;
+        /* Letterbox bars track the theme (near-black in dark, light in light)
+           instead of a fixed #111 that looked wrong in light mode. */
+        background: var(--vscode-editor-background, #111);
+        display: block;
+        cursor: pointer;
+      }
+
+      .scrubber {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-shrink: 0;
+        padding: 10px 14px;
+        background: var(--vscode-sideBar-background);
+        border-top: 1px solid var(--vscode-panel-border, #262b33);
+        border-radius: 0 0 14px 14px;
+      }
+
+      .scrub-play {
+        flex-shrink: 0;
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        border-radius: 50%;
+        background: var(--accent, #ff7a3c);
+        color: var(--accent-foreground, #0d0f12);
+        cursor: pointer;
+        font-size: 13px;
+        line-height: 0;
+        transition: background 0.1s;
+      }
+
+      .scrub-play:hover {
+        background: var(--accent-hover, #ff9a66);
+      }
+
+      .scrub-time {
+        flex-shrink: 0;
+        font-family: 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+        font-size: 11px;
+        font-variant-numeric: tabular-nums;
+        color: var(--vscode-descriptionForeground, #8a929c);
+        min-width: 64px;
+      }
+
+      .scrub-track {
+        position: relative;
+        flex: 1;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        touch-action: none;
+      }
+
+      .scrub-rail {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 5px;
+        border-radius: 999px;
+        /* Foreground-tinted so the unfilled track reads on both themes
+           (light track on dark, grey track on light). */
+        background: color-mix(
+          in srgb,
+          var(--vscode-foreground) 14%,
+          transparent
+        );
+      }
+
+      .scrub-fill {
+        position: absolute;
+        left: 0;
+        height: 5px;
+        border-radius: 999px;
+        background: linear-gradient(
+          90deg,
+          var(--accent-hover, #ff9a66),
+          var(--accent, #ff7a3c)
+        );
+        pointer-events: none;
+      }
+
+      .scrub-head {
+        position: absolute;
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        background: #fff;
+        /* Inner ring gives the white knob an edge on light tracks; outer ring
+           is the accent halo. */
+        box-shadow:
+          0 0 0 1px
+            color-mix(in srgb, var(--vscode-foreground) 35%, transparent),
+          0 0 0 4px color-mix(in srgb, var(--accent, #ff7a3c) 35%, transparent);
+        transform: translateX(-50%);
+        pointer-events: none;
+      }
+
+      .scrub-marker {
+        position: absolute;
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        transform: translateX(-50%);
+        border: 2px solid var(--vscode-sideBar-background);
+        cursor: pointer;
+        background: var(--vscode-foreground, #ccc);
+      }
+
+      .scrub-marker:hover {
+        transform: translateX(-50%) scale(1.35);
+      }
+
+      .scrub-marker.navigation {
+        background: var(--vscode-charts-blue, #4daafc);
+      }
+      .scrub-marker.input {
+        background: var(
+          --color-chartsPurple,
+          var(--vscode-charts-purple, #b180d7)
+        );
+      }
+      .scrub-marker.assertion {
+        background: var(--vscode-charts-green, #89d185);
+      }
+      .scrub-marker.query {
+        background: var(--vscode-charts-yellow, #e2c08d);
+      }
+      .scrub-marker.other {
+        background: var(--vscode-descriptionForeground, #8a929c);
+      }
+    `
+  ]
+
+  #togglePlay() {
+    const video = this.video
+    if (!video) {
+      return
+    }
+    if (video.paused) {
+      void video.play()
+    } else {
+      video.pause()
+    }
+  }
+
+  #onLoaded = () => {
+    this.videoDuration = this.video?.duration ?? 0
+  }
+
+  #onTime = () => {
+    this.currentTime = this.video?.currentTime ?? 0
+    // Only follow during actual playback — the browser fires a timeupdate at
+    // 0:00 when the video first loads, which would otherwise highlight the
+    // first action the moment a recording appears (e.g. on run completion).
+    if (this.playing) {
+      this.#emitProgress()
+    }
+  }
+
+  /**
+   * Broadcast the current playback position as a wall-clock ms timestamp so the
+   * action timeline can highlight the action playing at this frame. Mapped via
+   * the recording window rather than raw video time so it stays correct even if
+   * the encoded video's duration drifts slightly from the captured span.
+   */
+  #emitProgress() {
+    if (
+      typeof this.startTime !== 'number' ||
+      !this.duration ||
+      !this.videoDuration
+    ) {
+      return
+    }
+    const fraction = this.currentTime / this.videoDuration
+    const time = this.startTime + fraction * this.duration
+    window.dispatchEvent(
+      new CustomEvent('app-screencast-progress', { detail: { time } })
+    )
+  }
+
+  #onPlayState = () => {
+    this.playing = !!this.video && !this.video.paused
+  }
+
+  /** Seek the video to a fraction (0–1) of its duration. */
+  #seekTo(fraction: number) {
+    const video = this.video
+    if (!video || !video.duration) {
+      return
+    }
+    const clamped = Math.max(0, Math.min(1, fraction))
+    video.currentTime = clamped * video.duration
+    // Update the timeline highlight immediately on an explicit seek, even while
+    // paused (timeupdate only emits during playback now).
+    this.currentTime = video.currentTime
+    this.#emitProgress()
+  }
+
+  #seekFromPointer(ev: PointerEvent) {
+    const track = ev.currentTarget as HTMLElement
+    const rect = track.getBoundingClientRect()
+    if (!rect.width) {
+      return
+    }
+    this.#seekTo((ev.clientX - rect.left) / rect.width)
+  }
+
+  #onTrackPointerDown = (ev: PointerEvent) => {
+    ;(ev.currentTarget as HTMLElement).setPointerCapture(ev.pointerId)
+    this.#seekFromPointer(ev)
+  }
+
+  #onTrackPointerMove = (ev: PointerEvent) => {
+    const track = ev.currentTarget as HTMLElement
+    if (!track.hasPointerCapture(ev.pointerId)) {
+      return
+    }
+    this.#seekFromPointer(ev)
+  }
+
+  #renderScrubber() {
+    const pct = this.videoDuration
+      ? (this.currentTime / this.videoDuration) * 100
+      : 0
+    const markers =
+      typeof this.startTime === 'number' && this.duration
+        ? computeMarkers(this.commands, this.startTime, this.duration)
+        : []
+    return html`
+      <div class="scrubber">
+        <button
+          class="scrub-play"
+          title=${this.playing ? 'Pause' : 'Play'}
+          @click=${() => this.#togglePlay()}
+        >
+          ${this.playing ? '❚❚' : '▶'}
+        </button>
+        <span class="scrub-time">
+          ${formatClock(this.currentTime)} / ${formatClock(this.videoDuration)}
+        </span>
+        <div
+          class="scrub-track"
+          @pointerdown=${this.#onTrackPointerDown}
+          @pointermove=${this.#onTrackPointerMove}
+        >
+          <div class="scrub-rail"></div>
+          <div class="scrub-fill" style="width: ${pct}%"></div>
+          <div class="scrub-head" style="left: ${pct}%"></div>
+          ${markers.map(
+            (m) =>
+              html`<span
+                class="scrub-marker ${m.category}"
+                style="left: ${m.fraction * 100}%"
+                title=${m.label}
+                @pointerdown=${(ev: PointerEvent) => {
+                  ev.stopPropagation()
+                  this.#seekTo(m.fraction)
+                }}
+              ></span>`
+          )}
+        </div>
+      </div>
+    `
+  }
+
+  render() {
+    return html`
+      <video
+        src=${this.src}
+        @loadedmetadata=${this.#onLoaded}
+        @durationchange=${this.#onLoaded}
+        @timeupdate=${this.#onTime}
+        @play=${this.#onPlayState}
+        @pause=${this.#onPlayState}
+        @click=${() => this.#togglePlay()}
+      ></video>
+      ${this.#renderScrubber()}
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [COMPONENT]: ScreencastPlayer
+  }
+}
diff --git a/packages/app/src/components/browser/scrubber.ts b/packages/app/src/components/browser/scrubber.ts
new file mode 100644
index 00000000..62a42c03
--- /dev/null
+++ b/packages/app/src/components/browser/scrubber.ts
@@ -0,0 +1,54 @@
+import type { CommandLog } from '@wdio/devtools-shared'
+import {
+  commandCategory,
+  type ActionCategory
+} from '../workbench/actionItems/category.js'
+
+/** A command pinned to a position along the screencast timeline. */
+export interface ScrubMarker {
+  /** Position along the track, 0–1, relative to the recording window. */
+  fraction: number
+  category: ActionCategory
+  label: string
+}
+
+/** Format a duration in seconds as `m:ss` (e.g. 3 → `0:03`, 75 → `1:15`). */
+export function formatClock(seconds: number): string {
+  const safe = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0
+  const m = Math.floor(safe / 60)
+  const s = safe % 60
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+/**
+ * Map each command onto the recording timeline. `startTime`/`duration` are the
+ * recording's first-frame timestamp and total span (ms). A command's wall-clock
+ * time (`startTime`, falling back to `timestamp`) becomes a fraction 0–1; markers
+ * outside the recording window are dropped so they never sit off the track.
+ */
+export function computeMarkers(
+  commands: CommandLog[],
+  startTime: number,
+  duration: number
+): ScrubMarker[] {
+  if (!(duration > 0)) {
+    return []
+  }
+  const markers: ScrubMarker[] = []
+  for (const command of commands) {
+    const ts = command.startTime ?? command.timestamp
+    if (typeof ts !== 'number') {
+      continue
+    }
+    const fraction = (ts - startTime) / duration
+    if (fraction < 0 || fraction > 1) {
+      continue
+    }
+    markers.push({
+      fraction,
+      category: commandCategory(command.command),
+      label: command.command
+    })
+  }
+  return markers
+}
diff --git a/packages/app/src/components/browser/snapshot-styles.ts b/packages/app/src/components/browser/snapshot-styles.ts
index d996ca18..664b5776 100644
--- a/packages/app/src/components/browser/snapshot-styles.ts
+++ b/packages/app/src/components/browser/snapshot-styles.ts
@@ -7,10 +7,15 @@ export const snapshotStyles = css`
     width: 100%;
     height: 100%;
     display: flex;
-    padding: 2rem !important;
+    padding: 1.25rem !important;
     align-items: center;
     justify-content: center;
     box-sizing: border-box !important;
+    background: radial-gradient(
+      120% 120% at 50% 0%,
+      var(--vscode-editorWidget-background),
+      var(--vscode-editor-background)
+    );
   }
 
   section {
@@ -23,6 +28,9 @@ export const snapshotStyles = css`
     background: var(--vscode-sideBar-background);
     padding: 0.5rem;
     gap: 0;
+    box-shadow:
+      0 12px 40px rgba(0, 0, 0, 0.45),
+      0 0 60px color-mix(in srgb, var(--accent) 12%, transparent);
   }
 
   .frame-dot {
@@ -54,17 +62,17 @@ export const snapshotStyles = css`
     top: 0;
     left: 0;
     border: none;
-    border-radius: 0 0 0.5rem 0.5rem;
+    border-radius: 0 0 14px 14px;
   }
 
   .screenshot-overlay {
     position: absolute;
     inset: 0;
-    background: #111;
+    background: var(--vscode-editor-background, #111);
     display: flex;
     align-items: flex-start;
     justify-content: center;
-    border-radius: 0 0 0.5rem 0.5rem;
+    border-radius: 0 0 14px 14px;
     overflow: hidden;
   }
 
@@ -74,15 +82,6 @@ export const snapshotStyles = css`
     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;
@@ -92,44 +91,58 @@ export const snapshotStyles = css`
     flex-direction: column;
   }
 
+  /* Segmented control like the mockup: the border lives on the group; the
+     buttons are borderless pills inside a small inset. */
   .view-toggle {
     display: flex;
-    gap: 2px;
+    gap: 0;
     margin-left: 0.5rem;
     flex-shrink: 0;
+    padding: 2px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 8px;
+    background: var(--vscode-input-background);
   }
 
   .view-toggle button {
-    padding: 2px 10px;
+    padding: 5px 11px;
     font-size: 11px;
+    font-weight: 600;
     font-family: inherit;
-    border: 1px solid var(--vscode-editorSuggestWidget-border, #454545);
+    border: none;
     background: transparent;
-    color: var(--vscode-input-foreground, #ccc);
+    color: var(--vscode-descriptionForeground, #ccc);
     cursor: pointer;
-    border-radius: 3px;
-    line-height: 20px;
+    border-radius: 6px;
+    line-height: 1;
     transition:
-      background 0.1s,
-      color 0.1s;
+      background-color 0.18s ease,
+      color 0.18s ease;
+  }
+
+  .view-toggle button:hover {
+    color: var(--vscode-foreground);
   }
 
   .view-toggle button.active {
-    background: var(--vscode-button-background, #0e639c);
-    color: var(--vscode-button-foreground, #fff);
-    border-color: transparent;
+    background: var(--accent, #ff7a3c);
+    color: var(--accent-foreground, #0d0f12);
+  }
+
+  .view-toggle button.active:hover {
+    color: var(--accent-foreground, #0d0f12);
   }
 
   .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);
+    padding: 5px 8px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 8px;
+    background: var(--vscode-input-background);
+    color: var(--vscode-foreground);
     cursor: pointer;
-    line-height: 20px;
-    margin-left: 4px;
+    line-height: 1;
+    margin-left: 6px;
   }
 `
diff --git a/packages/app/src/components/browser/snapshot.ts b/packages/app/src/components/browser/snapshot.ts
index d2a218cc..16fae044 100644
--- a/packages/app/src/components/browser/snapshot.ts
+++ b/packages/app/src/components/browser/snapshot.ts
@@ -2,6 +2,8 @@ import { Element } from '@core/element'
 import { html, nothing } from 'lit'
 import { consume } from '@lit/context'
 import { snapshotStyles } from './snapshot-styles.js'
+import { renderBrowserChrome } from './browser-chrome.js'
+import { commandPageUrl } from './url-at-timestamp.js'
 
 import { type ComponentChildren, h, render, type VNode } from 'preact'
 import { customElement, query } from 'lit/decorators.js'
@@ -11,18 +13,23 @@ import type { CommandLog } from '@wdio/devtools-shared'
 import {
   mutationContext,
   metadataContext,
+  metadataBySessionContext,
   commandContext
 } from '../../controller/context.js'
-import type { Metadata } from '@wdio/devtools-shared'
+import type { Metadata, MetadataBySession } from '@wdio/devtools-shared'
 
-import '~icons/mdi/world.js'
 import '../placeholder.js'
+import './screencast-player.js'
 
 const MUTATION_SELECTOR = '__mutation-highlight__'
 
 declare global {
   interface WindowEventMap {
-    'screencast-ready': CustomEvent<{ sessionId: string }>
+    'screencast-ready': CustomEvent<{
+      sessionId: string
+      startTime?: number
+      duration?: number
+    }>
   }
 }
 
@@ -69,11 +76,17 @@ export class DevtoolsBrowser extends Element {
   /** Base64 PNG of the screenshot for the currently selected command, or null. */
   #screenshotData: string | null = null
   /**
-   * All recorded videos received from the backend, in arrival order.
-   * Each entry is { sessionId, url } — a new entry is pushed for every
-   * browser session (initial + after every reloadSession() call).
+   * All recorded videos received from the backend, in arrival order. A new
+   * entry is pushed for every browser session (initial + after every
+   * reloadSession() call). `startTime`/`duration` (recording first-frame
+   * timestamp and total span in ms) drive the scrubber's action markers.
    */
-  #videos: Array<{ sessionId: string; url: string }> = []
+  #videos: Array<{
+    sessionId: string
+    url: string
+    startTime?: number
+    duration?: number
+  }> = []
   /** Index into #videos of the currently displayed video. */
   #activeVideoIdx = 0
   /**
@@ -86,6 +99,9 @@ export class DevtoolsBrowser extends Element {
   @consume({ context: metadataContext, subscribe: true })
   metadata: Metadata | undefined = undefined
 
+  @consume({ context: metadataBySessionContext, subscribe: true })
+  metadataBySession: MetadataBySession | undefined = undefined
+
   @consume({ context: mutationContext, subscribe: true })
   mutations: TraceMutation[] = []
 
@@ -126,6 +142,22 @@ export class DevtoolsBrowser extends Element {
   }
 
   #setIframeSize() {
+    if (!this.section || !this.header) {
+      return
+    }
+    // Screencast: let the device frame fill the pane and the video object-fit
+    // inside it, so the frame spans the column like the mockup regardless of
+    // the captured window's aspect ratio. Snapshot mode keeps its aspect-lock
+    // (the DOM-replay iframe is scaled to the captured viewport).
+    if (this.#viewMode === 'video') {
+      this.section.style.width = '100%'
+      this.section.style.height = '100%'
+      return
+    }
+    this.#sizeSnapshotToViewport()
+  }
+
+  #sizeSnapshotToViewport() {
     const metadata = this.metadata
     if (!this.section || !this.header || !metadata) {
       return
@@ -191,8 +223,19 @@ export class DevtoolsBrowser extends Element {
     )
 
   #handleScreencastReady = (event: Event) => {
-    const { sessionId } = (event as CustomEvent<{ sessionId: string }>).detail
-    this.#videos.push({ sessionId, url: `/api/video/${sessionId}` })
+    const { sessionId, startTime, duration } = (
+      event as CustomEvent<{
+        sessionId: string
+        startTime?: number
+        duration?: number
+      }>
+    ).detail
+    this.#videos.push({
+      sessionId,
+      url: `/api/video/${sessionId}`,
+      startTime,
+      duration
+    })
     // Always show the latest video and switch to video mode automatically
     this.#activeVideoIdx = this.#videos.length - 1
     this.#viewMode = 'video'
@@ -214,8 +257,34 @@ export class DevtoolsBrowser extends Element {
     return this.#videos[this.#activeVideoIdx]?.url ?? null
   }
 
+  /** Recording window of the active video — feeds the scrubber's markers. */
+  get #activeRecording(): { startTime?: number; duration?: number } {
+    const v = this.#videos[this.#activeVideoIdx]
+    return { startTime: v?.startTime, duration: v?.duration }
+  }
+
+  /** URL for the address bar: in video mode the selected recording's page URL
+   *  (looked up by its sessionId), else the snapshot's resolved URL. */
+  get #displayUrl(): string | undefined {
+    if (this.#viewMode === 'video') {
+      const sessionId = this.#videos[this.#activeVideoIdx]?.sessionId
+      const sessionUrl = sessionId
+        ? this.metadataBySession?.[sessionId]?.url
+        : undefined
+      return sessionUrl ?? this.#activeUrl ?? this.metadata?.url
+    }
+    return this.#activeUrl
+  }
+
   async #renderCommandScreenshot(command?: CommandLog) {
     this.#screenshotData = command?.screenshot ?? null
+    // Follow the selected command's page in the address bar — commands carry no
+    // URL, so resolve it from the navigation active at the command's time.
+    if (command) {
+      this.#activeUrl =
+        commandPageUrl(command, this.commands ?? [], this.mutations ?? []) ??
+        this.#activeUrl
+    }
     // Switch to snapshot mode so the command screenshot is visible instead of the video.
     this.#viewMode = 'snapshot'
     this.requestUpdate()
@@ -456,7 +525,7 @@ export class DevtoolsBrowser extends Element {
         >
           Screencast
         </button>
-        ${this.#videos.length > 1
+        ${this.#videos.length > 1 && this.#viewMode === 'video'
           ? html`<select
               class="video-select"
               @change=${(e: Event) => {
@@ -483,12 +552,13 @@ export class DevtoolsBrowser extends Element {
 
   #renderViewport(hasMutations: number | null) {
     if (this.#viewMode === 'video' && this.#activeVideoUrl) {
+      const rec = this.#activeRecording
       return html`<div class="iframe-wrapper">
-        <video
-          class="screencast-player"
-          src="${this.#activeVideoUrl}"
-          controls
-        ></video>
+        <wdio-devtools-screencast-player
+          src=${this.#activeVideoUrl}
+          .startTime=${rec.startTime}
+          .duration=${rec.duration}
+        ></wdio-devtools-screencast-player>
       </div>`
     }
     if (this.#screenshotData) {
@@ -531,24 +601,9 @@ export class DevtoolsBrowser extends Element {
     const hasMutations = this.mutations && this.mutations.length
     return html`
       <section
-        class="w-full h-full bg-sideBarBackground rounded-lg border-2 border-panelBorder shadow-xl"
+        class="w-full h-full bg-sideBarBackground rounded-[14px] border-2 border-panelBorder"
       >
-        <header
-          class="flex items-center mx-2 bg-sideBarBackground rounded-t-lg"
-        >
-          <div class="frame-dot bg-notificationsErrorIconForeground"></div>
-          <div class="frame-dot bg-notificationsWarningIconForeground"></div>
-          <div class="frame-dot bg-portsIconRunningProcessForeground"></div>
-          <div
-            class="flex items-center mx-4 my-2 pr-2 bg-input-background text-inputForeground border border-editorSuggestWidgetBorder rounded leading-7 flex-1 min-w-0 overflow-hidden"
-          >
-            <icon-mdi-world
-              class="w-[20px] h-[20px] m-1 mr-2 flex-shrink-0"
-            ></icon-mdi-world>
-            <span class="truncate">${this.#activeUrl}</span>
-          </div>
-          ${this.#renderViewToggle()}
-        </header>
+        ${renderBrowserChrome(this.#displayUrl, this.#renderViewToggle())}
         ${this.#renderViewport(hasMutations)}
       </section>
     `
diff --git a/packages/app/src/components/browser/url-at-timestamp.ts b/packages/app/src/components/browser/url-at-timestamp.ts
new file mode 100644
index 00000000..8f1302a2
--- /dev/null
+++ b/packages/app/src/components/browser/url-at-timestamp.ts
@@ -0,0 +1,64 @@
+import type { CommandLog, TraceMutation } from '@wdio/devtools-shared'
+
+import { commandCategory } from '../workbench/actionItems/category.js'
+
+const ABSOLUTE_URL = /^https?:\/\//
+
+/** The page URL captured at or before `timestamp` — the most recent navigation
+ *  in the mutation stream up to that point. Commands carry no URL of their own,
+ *  so the address bar uses this to follow command selection in snapshot mode. */
+export function urlAtTimestamp(
+  mutations: TraceMutation[],
+  timestamp: number
+): string | undefined {
+  let url: string | undefined
+  let best = -Infinity
+  for (const mutation of mutations) {
+    if (
+      mutation.url &&
+      mutation.timestamp <= timestamp &&
+      mutation.timestamp >= best
+    ) {
+      best = mutation.timestamp
+      url = mutation.url
+    }
+  }
+  return url
+}
+
+/** First argument of a navigation command when it's an absolute URL — `url`,
+ *  `navigateTo` etc. carry their destination there. */
+function navigationTarget(command: CommandLog): string | undefined {
+  if (commandCategory(command.command) !== 'navigation') {
+    return undefined
+  }
+  const target = command.args?.[0]
+  return typeof target === 'string' && ABSOLUTE_URL.test(target)
+    ? target
+    : undefined
+}
+
+/** The page URL a command's screenshot shows: the destination of the most
+ *  recent navigation command at or before it (the command itself when it
+ *  navigates). The command stream is authoritative — unlike the DOM mutation
+ *  stream it captures every navigation even on pages that block DOM capture —
+ *  so mutations are only a fallback for traces without command navigations. */
+export function commandPageUrl(
+  command: CommandLog,
+  commands: CommandLog[],
+  mutations: TraceMutation[]
+): string | undefined {
+  let url: string | undefined
+  let best = -Infinity
+  for (const candidate of commands) {
+    if (candidate.timestamp > command.timestamp || candidate.timestamp < best) {
+      continue
+    }
+    const target = navigationTarget(candidate)
+    if (target) {
+      best = candidate.timestamp
+      url = target
+    }
+  }
+  return url ?? urlAtTimestamp(mutations, command.timestamp)
+}
diff --git a/packages/app/src/components/header.ts b/packages/app/src/components/header.ts
index 45d666af..f584f286 100644
--- a/packages/app/src/components/header.ts
+++ b/packages/app/src/components/header.ts
@@ -32,18 +32,46 @@ export class DevtoolsHeader extends Element {
       :host {
         display: flex;
         align-items: center;
-        background: black;
+        gap: 10px;
+        box-sizing: border-box;
+        /* Token-based so the header tracks the theme (dark bar in dark mode,
+           light bar in light mode). */
+        background: linear-gradient(
+          180deg,
+          var(--vscode-sideBar-background),
+          var(--vscode-editor-background)
+        );
+        border-bottom: 1px solid var(--vscode-panel-border) !important;
         height: 40px;
         width: 100%;
       }
+
+      icon-custom-logo {
+        flex: none;
+        width: 28px;
+        height: 28px;
+        /* Left inset set on the element itself (deterministic) rather than
+           :host padding. */
+        margin-left: 16px;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 12px rgba(255, 122, 60, 0.4);
+      }
+
+      h1 {
+        font-size: 15px;
+        font-weight: 700;
+        letter-spacing: 0.2px;
+        color: var(--vscode-foreground);
+      }
     `
   ]
 
   render() {
     return html`
-      <icon-custom-logo class="p-2 dark:p-2 h-full"></icon-custom-logo>
-      <h1 class="font-bold text-white">WebdriverIO Devtools</h1>
-      <nav class="ml-auto mr-2">
+      <icon-custom-logo></icon-custom-logo>
+      <h1>WebdriverIO Devtools</h1>
+      <nav class="ml-auto mr-3">
         <wdio-devtools-trace-loader as="button"></wdio-devtools-trace-loader>
         <button class="p-2" @click="${this.#switchMode}">
           <icon-mdi-moon-waning-crescent
diff --git a/packages/app/src/components/sidebar.ts b/packages/app/src/components/sidebar.ts
index de1a6272..6f42e6b6 100644
--- a/packages/app/src/components/sidebar.ts
+++ b/packages/app/src/components/sidebar.ts
@@ -3,6 +3,7 @@ import { html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
 
 import './sidebar/filter.js'
+import './sidebar/summary.js'
 import './sidebar/explorer.js'
 
 @customElement('wdio-devtools-sidebar')
@@ -12,19 +13,37 @@ export class DevtoolsSidebar extends Element {
     css`
       :host {
         flex-shrink: 0;
+        box-sizing: border-box;
         color: var(--vscode-foreground);
         background-color: var(--vscode-sideBar-background);
         border-right: 1px solid var(--vscode-panel-border) !important;
         display: flex;
         flex-direction: column;
         height: 100%;
+        min-height: 0;
+      }
+
+      .top {
+        flex: 0 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        padding: 0.75rem 0.75rem 0.875rem;
+      }
+
+      wdio-devtools-sidebar-explorer {
+        flex: 1 1 auto;
+        min-height: 0;
       }
     `
   ]
 
   render() {
     return html`
-      <wdio-devtools-sidebar-filter></wdio-devtools-sidebar-filter>
+      <div class="top">
+        <wdio-devtools-sidebar-filter></wdio-devtools-sidebar-filter>
+        <wdio-devtools-sidebar-summary></wdio-devtools-sidebar-summary>
+      </div>
       <wdio-devtools-sidebar-explorer></wdio-devtools-sidebar-explorer>
     `
   }
diff --git a/packages/app/src/components/sidebar/explorer.ts b/packages/app/src/components/sidebar/explorer.ts
index 3ee8a88b..fa4928c7 100644
--- a/packages/app/src/components/sidebar/explorer.ts
+++ b/packages/app/src/components/sidebar/explorer.ts
@@ -9,9 +9,10 @@ import type {
   SuiteStatsFragment,
   TestStatsFragment
 } from '../../controller/types.js'
-import type { TestEntry, TestRunDetail } from './types.js'
-import { TestState } from './types.js'
+import type { TestEntry, TestRunDetail, StatusFilterDetail } from './types.js'
+import type { TestStatus } from '@wdio/devtools-shared'
 import { getTestEntry } from './test-entry-state.js'
+import { entryPassesFilter } from './tree-filter.js'
 import {
   getCapabilityWarning,
   getConfigPath,
@@ -32,7 +33,6 @@ import {
 
 import '~icons/mdi/play.js'
 import '~icons/mdi/stop.js'
-import '~icons/mdi/eye.js'
 import '~icons/mdi/collapse-all.js'
 import '~icons/mdi/expand-all.js'
 
@@ -44,8 +44,13 @@ const EXPLORER = 'wdio-devtools-sidebar-explorer'
 
 @customElement(EXPLORER)
 export class DevtoolsSidebarExplorer extends CollapseableEntry {
-  #testFilter: DevtoolsSidebarFilter | undefined
+  #query = ''
+  #statusFilter: TestStatus | null = null
+  #selectedUid?: string
+  #autoSelectedUid?: string
   #filterListener = this.#filterTests.bind(this)
+  #statusFilterListener = this.#applyStatusFilter.bind(this)
+  #selectListener = this.#handleSelect.bind(this)
   #runListener = this.#handleTestRun.bind(this)
   #stopListener = this.#handleTestStop.bind(this)
   #preserveRerunListener = this.#handlePreserveAndRerun.bind(this)
@@ -71,6 +76,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
         overflow-x: hidden;
         min-height: 0;
         scrollbar-width: none;
+        padding-bottom: 24px;
       }
     `
   ]
@@ -89,6 +95,11 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   connectedCallback(): void {
     super.connectedCallback()
     window.addEventListener('app-test-filter', this.#filterListener)
+    window.addEventListener('app-status-filter', this.#statusFilterListener)
+    this.addEventListener(
+      'app-test-select',
+      this.#selectListener as EventListener
+    )
     this.addEventListener('app-test-run', this.#runListener as EventListener)
     this.addEventListener('app-test-stop', this.#stopListener as EventListener)
     this.addEventListener(
@@ -100,6 +111,11 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   disconnectedCallback(): void {
     super.disconnectedCallback()
     window.removeEventListener('app-test-filter', this.#filterListener)
+    window.removeEventListener('app-status-filter', this.#statusFilterListener)
+    this.removeEventListener(
+      'app-test-select',
+      this.#selectListener as EventListener
+    )
     this.removeEventListener('app-test-run', this.#runListener as EventListener)
     this.removeEventListener(
       'app-test-stop',
@@ -112,10 +128,38 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   }
 
   #filterTests({ detail }: { detail: DevtoolsSidebarFilter }) {
-    this.#testFilter = detail
+    this.#query = detail.filterQuery
+    this.requestUpdate()
+  }
+
+  #applyStatusFilter({ detail }: { detail: StatusFilterDetail }) {
+    this.#statusFilter = detail.status
     this.requestUpdate()
   }
 
+  #handleSelect(event: CustomEvent<string>) {
+    this.#selectedUid = event.detail
+    this.requestUpdate()
+  }
+
+  // Deepest running entry (a running step/test), so the highlight tracks the
+  // most specific in-progress row rather than its parent suite.
+  #findRunningUid(entries: TestEntry[]): string | undefined {
+    for (const entry of entries) {
+      const child =
+        entry.children && entry.children.length
+          ? this.#findRunningUid(entry.children)
+          : undefined
+      if (child) {
+        return child
+      }
+      if (entry.state === 'running') {
+        return entry.uid
+      }
+    }
+    return undefined
+  }
+
   async #handleTestRun(event: Event) {
     event.stopPropagation()
     const detail = (event as CustomEvent<TestRunDetail>).detail
@@ -314,7 +358,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     return getLaunchCommand(this.metadata)
   }
 
-  #renderEntry(entry: TestEntry): TemplateResult {
+  #renderEntry(entry: TestEntry, isRoot = false): TemplateResult {
     return html`
       <wdio-test-entry
         uid="${entry.uid}"
@@ -328,6 +372,9 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
         feature-line="${entry.featureLine ?? ''}"
         suite-type="${entry.suiteType || ''}"
         ?has-children="${entry.children && entry.children.length > 0}"
+        ?selected="${entry.uid ===
+        (this.#selectedUid ?? this.#autoSelectedUid)}"
+        ?root="${isRoot}"
         .runDisabled=${this.#isRunDisabled(entry)}
         .runDisabledReason=${this.#getRunDisabledReason(entry)}
       >
@@ -348,25 +395,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   }
 
   #filterEntry(entry: TestEntry): boolean {
-    if (!this.#testFilter) {
-      return true
-    }
-
-    const entryLabelIncludingChildren = getSearchableLabel(entry)
-      .flat(Infinity)
-      .join(' ')
-    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)
-      ) &&
-      (!this.#testFilter.filterQuery ||
-        entryLabelIncludingChildren
-          .toLowerCase()
-          .includes(this.#testFilter.filterQuery.toLowerCase()))
-    )
+    return entryPassesFilter(entry, this.#query, this.#statusFilter)
   }
 
   #getTestEntry(entry: TestStatsFragment | SuiteStatsFragment): TestEntry {
@@ -380,28 +409,26 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       : 'opacity-30 cursor-not-allowed'
     const iconCls = (color: string) => (canRunAll ? `group-hover:${color}` : '')
     return html`
-      <nav class="flex ml-auto">
+      <nav class="flex ml-auto gap-0.5 text-[16px] text-descriptionForeground">
         <button
-          class="p-1 rounded text-sm group ${runBtnCls}"
+          class="p-1 rounded group ${runBtnCls}"
           ?disabled=${!canRunAll}
+          title="Run all"
           @click="${() => this.#runAllSuites()}"
         >
           <icon-mdi-play class="${iconCls('text-chartsGreen')}"></icon-mdi-play>
         </button>
         <button
-          class="p-1 rounded text-sm group ${runBtnCls}"
+          class="p-1 rounded group ${runBtnCls}"
           ?disabled=${!canRunAll}
+          title="Stop"
           @click="${() => this.#stopActiveRun()}"
         >
           <icon-mdi-stop class="${iconCls('text-chartsRed')}"></icon-mdi-stop>
         </button>
         <button
-          class="p-1 rounded hover:bg-toolbarHoverBackground text-sm group"
-        >
-          <icon-mdi-eye class="group-hover:text-chartsYellow"></icon-mdi-eye>
-        </button>
-        <button
-          class="p-1 rounded hover:bg-toolbarHoverBackground text-sm group"
+          class="p-1 rounded hover:bg-toolbarHoverBackground group"
+          title="Collapse / expand all"
         >
           ${this.renderCollapseOrExpandIcon('group-hover:text-chartsBlue')}
         </button>
@@ -422,9 +449,12 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     const suites = uniqueSuites
       .map(this.#getTestEntry.bind(this))
       .filter(this.#filterEntry.bind(this))
+    this.#autoSelectedUid = this.#findRunningUid(suites)
     return html`
-      <header class="pl-4 py-2 flex shadow-md pr-2">
-        <h3 class="flex content-center flex-wrap uppercase font-bold text-sm">
+      <header class="px-3 py-2 flex shadow-md">
+        <h3
+          class="flex content-center flex-wrap uppercase font-bold text-[11px] tracking-[0.8px] text-disabledForeground"
+        >
           Tests
         </h3>
         ${this.#renderHeaderToolbar()}
@@ -434,7 +464,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
           ? repeat(
               suites,
               (suite) => suite.uid,
-              (suite) => this.#renderEntry(suite)
+              (suite) => this.#renderEntry(suite, true)
             )
           : html`<div class="text-sm px-4 py-2">
               <p class="text-disabledForeground">No tests to display</p>
@@ -449,10 +479,3 @@ declare global {
     [EXPLORER]: DevtoolsSidebarExplorer
   }
 }
-
-function getSearchableLabel(entry: TestEntry): string[] {
-  if (entry.children.length === 0) {
-    return [entry.label]
-  }
-  return entry.children.flatMap(getSearchableLabel)
-}
diff --git a/packages/app/src/components/sidebar/filter.ts b/packages/app/src/components/sidebar/filter.ts
index 7ee639ff..18bdb85b 100644
--- a/packages/app/src/components/sidebar/filter.ts
+++ b/packages/app/src/components/sidebar/filter.ts
@@ -2,33 +2,51 @@ import { Element } from '@core/element'
 import { html, css } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
 
-import '~icons/mdi/chevron-right.js'
-
-enum FilterState {
-  PASSED = 1,
-  FAILED = 2,
-  SKIPPED = 4
-}
+import '~icons/mdi/magnify.js'
 
 @customElement('wdio-devtools-sidebar-filter')
 export class DevtoolsSidebarFilter extends Element {
-  #filterState = 0
   #filterQuery = ''
-  #isStateFilterOpen = false
 
   static styles = [
     ...Element.styles,
     css`
       :host {
+        display: block;
         width: 100%;
-        display: flex;
-        align-items: top;
-        font-size: 0.8em;
-        padding-right: 1em !important;
+        font-size: 12px;
       }
 
-      label {
-        cursor: pointer;
+      .field {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+        height: 2rem;
+        padding: 0 0.6rem;
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 8px;
+        background: var(--vscode-input-background);
+        box-shadow: 0 1px 2px var(--vscode-widget-shadow);
+        transition: border-color 0.12s;
+      }
+      .field:focus-within {
+        border-color: var(--accent);
+      }
+      .field icon-mdi-magnify {
+        flex: none;
+        width: 1rem;
+        height: 1rem;
+        display: block;
+        color: var(--vscode-descriptionForeground);
+      }
+      .field input {
+        flex: 1;
+        min-width: 0;
+        height: 100%;
+        border: none;
+        background: none;
+        color: var(--vscode-input-foreground);
+        outline: none;
       }
     `
   ]
@@ -36,18 +54,6 @@ export class DevtoolsSidebarFilter extends Element {
   @query('input[name="filter"]')
   queryInput?: HTMLInputElement
 
-  #updateState(change: Event) {
-    const target = change.target as HTMLInputElement | null
-    if (!target) {
-      return
-    }
-    this.#filterState = target.checked
-      ? this.#filterState + Number(target.value)
-      : this.#filterState - Number(target.value)
-    this.requestUpdate()
-    this.#emitState()
-  }
-
   #updateQuery() {
     if (!this.queryInput) {
       return
@@ -56,11 +62,6 @@ export class DevtoolsSidebarFilter extends Element {
     this.#emitState()
   }
 
-  #toggleStateFilter() {
-    this.#isStateFilterOpen = !this.#isStateFilterOpen
-    this.requestUpdate()
-  }
-
   #emitState() {
     window.dispatchEvent(
       new CustomEvent('app-test-filter', {
@@ -71,82 +72,20 @@ export class DevtoolsSidebarFilter extends Element {
     )
   }
 
-  get filtersPassed() {
-    return this.#filterState & FilterState.PASSED
-  }
-  get filtersFailed() {
-    return this.#filterState & FilterState.FAILED
-  }
-  get filtersSkipped() {
-    return this.#filterState & FilterState.SKIPPED
-  }
-  get filterStatus() {
-    if (this.filtersPassed && this.filtersFailed && this.filtersSkipped) {
-      return 'all'
-    }
-
-    return (
-      ['passed', 'failed', 'skipped']
-        .filter(
-          (filter) =>
-            this[
-              `filters${filter.charAt(0).toUpperCase() + filter.slice(1)}` as keyof typeof this
-            ]
-        )
-        .join(', ') || 'none'
-    )
-  }
   get filterQuery() {
     return this.#filterQuery
   }
 
-  #renderStateCheckbox(state: FilterState, label: string, id: string) {
-    return html`
-      <li>
-        <input type="checkbox" value="${state}" name="${id}" id="${id}" />
-        <label for="${id}">${label}</label>
-      </li>
-    `
-  }
-
   render() {
     return html`
-      <button
-        class="pointer p-2 h-10"
-        @click="${() => this.#toggleStateFilter()}"
-      >
-        <icon-mdi-chevron-right
-          class="transition-transform text-base block ${this.#isStateFilterOpen
-            ? 'block rotate-90'
-            : ''}"
-        ></icon-mdi-chevron-right>
-      </button>
-      <div class="flex flex-col w-full">
+      <div class="field">
+        <icon-mdi-magnify></icon-mdi-magnify>
         <input
           type="text"
           name="filter"
           placeholder="Filter (e.g. text, @tag)"
-          class="h-6 w-full my-2 px-2"
           @keyup="${this.#updateQuery.bind(this)}"
         />
-        <div class="mb-2">
-          <em class="text-disabledForeground not-italic font-bold">Status:</em>
-          ${this.filterStatus}
-        </div>
-        <form
-          @change="${this.#updateState}"
-          class="${this.#isStateFilterOpen ? 'show' : 'hidden'}"
-        >
-          <ul class="block w-full">
-            ${this.#renderStateCheckbox(FilterState.PASSED, 'Passed', 'passed')}
-            ${this.#renderStateCheckbox(FilterState.FAILED, 'Failed', 'failed')}
-            ${this.#renderStateCheckbox(
-              FilterState.SKIPPED,
-              'Skipped',
-              'skipped'
-            )}
-          </ul>
-        </form>
       </div>
     `
   }
diff --git a/packages/app/src/components/sidebar/suite-summary.ts b/packages/app/src/components/sidebar/suite-summary.ts
new file mode 100644
index 00000000..fabc7669
--- /dev/null
+++ b/packages/app/src/components/sidebar/suite-summary.ts
@@ -0,0 +1,105 @@
+import type {
+  SuiteStatsFragment,
+  TestStatsFragment
+} from '../../controller/types.js'
+import { TestState } from './types.js'
+
+export interface SuiteSummary {
+  passed: number
+  failed: number
+  running: number
+  skipped: number
+  pending: number
+  total: number
+}
+
+export type RunStatus = 'running' | 'failed' | 'passed' | 'idle'
+
+const emptySummary = (): SuiteSummary => ({
+  passed: 0,
+  failed: 0,
+  running: 0,
+  skipped: 0,
+  pending: 0,
+  total: 0
+})
+
+function tally(test: TestStatsFragment, summary: SuiteSummary): void {
+  summary.total += 1
+  switch (test.state) {
+    case TestState.PASSED:
+      summary.passed += 1
+      break
+    case TestState.FAILED:
+      summary.failed += 1
+      break
+    case TestState.RUNNING:
+      summary.running += 1
+      break
+    case TestState.SKIPPED:
+      summary.skipped += 1
+      break
+    default:
+      summary.pending += 1
+  }
+}
+
+function walk(suite: SuiteStatsFragment, summary: SuiteSummary): void {
+  for (const test of suite.tests ?? []) {
+    if (test) {
+      tally(test, summary)
+    }
+  }
+  for (const child of suite.suites ?? []) {
+    if (child) {
+      walk(child, summary)
+    }
+  }
+}
+
+/**
+ * Count leaf tests by state across the suite tree. Roots are deduped by uid
+ * the same way the explorer renders them — nested suites carry a `parent` and
+ * are reached via recursion, so counting only roots avoids double-counting the
+ * flat registry entries.
+ */
+export function computeSuiteSummary(
+  suites: Record<string, SuiteStatsFragment>[] | undefined
+): SuiteSummary {
+  const summary = emptySummary()
+  if (!suites) {
+    return summary
+  }
+  const roots = suites
+    .flatMap((chunk) => Object.values(chunk))
+    .filter((suite) => suite && !suite.parent)
+  const unique = Array.from(
+    new Map(roots.map((suite) => [suite.uid, suite])).values()
+  )
+  for (const suite of unique) {
+    walk(suite, summary)
+  }
+  return summary
+}
+
+/**
+ * The headline run state shown in the status pill. Running wins over a stale
+ * terminal count (a rerun leaves old passed/failed values until results
+ * arrive); a finished run is failed if any test failed, otherwise passed.
+ */
+export function deriveRunStatus(summary: SuiteSummary): RunStatus {
+  const terminal = summary.passed + summary.failed + summary.skipped
+  if (summary.total === 0) {
+    return 'idle'
+  }
+  if (summary.running > 0 || (summary.pending > 0 && terminal > 0)) {
+    return 'running'
+  }
+  if (summary.failed > 0) {
+    return 'failed'
+  }
+  if (terminal === 0) {
+    return 'idle'
+  }
+  return 'passed'
+}
diff --git a/packages/app/src/components/sidebar/summary.ts b/packages/app/src/components/sidebar/summary.ts
new file mode 100644
index 00000000..56fabca8
--- /dev/null
+++ b/packages/app/src/components/sidebar/summary.ts
@@ -0,0 +1,252 @@
+import { Element } from '@core/element'
+import { html, css, nothing, type TemplateResult } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { consume } from '@lit/context'
+import type { TestStatus } from '@wdio/devtools-shared'
+import { suiteContext } from '../../controller/context.js'
+import type { SuiteStatsFragment } from '../../controller/types.js'
+import { TestState } from './types.js'
+import {
+  computeSuiteSummary,
+  deriveRunStatus,
+  type RunStatus,
+  type SuiteSummary
+} from './suite-summary.js'
+
+const SUMMARY = 'wdio-devtools-sidebar-summary'
+
+const STATUS_LABEL: Record<RunStatus, string> = {
+  running: 'Running',
+  failed: 'Failed',
+  passed: 'Passed',
+  idle: 'Idle'
+}
+
+const STATUS_CHIPS = [
+  { status: TestState.PASSED, label: 'Passed' },
+  { status: TestState.FAILED, label: 'Failed' },
+  { status: TestState.RUNNING, label: 'Running' },
+  { status: TestState.SKIPPED, label: 'Skipped' }
+] as const
+
+@customElement(SUMMARY)
+export class DevtoolsSidebarSummary extends Element {
+  static styles = [
+    ...Element.styles,
+    css`
+      :host {
+        display: block;
+        font-size: 12px;
+      }
+
+      .card {
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 8px;
+        padding: 0.625rem 0.75rem;
+        background: var(--vscode-input-background);
+        box-shadow: 0 1px 2px var(--vscode-widget-shadow);
+      }
+
+      .row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.5rem;
+      }
+
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-weight: 700;
+        color: var(--status);
+      }
+
+      .pill .dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        background: var(--status);
+      }
+
+      :host([data-status='running']) .pill .dot {
+        animation: pulse 1.6s infinite;
+      }
+
+      @keyframes pulse {
+        0% {
+          box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 60%, transparent);
+        }
+        70% {
+          box-shadow: 0 0 0 7px transparent;
+        }
+        100% {
+          box-shadow: 0 0 0 0 transparent;
+        }
+      }
+
+      .count {
+        color: var(--vscode-foreground);
+      }
+      .count b {
+        font-weight: 700;
+      }
+
+      .progress {
+        display: flex;
+        height: 6px;
+        border-radius: 999px;
+        overflow: hidden;
+        background: var(--vscode-panel-border);
+      }
+      .progress > span {
+        height: 100%;
+      }
+      .seg-passed {
+        background: var(--vscode-charts-green);
+      }
+      .seg-failed {
+        background: var(--vscode-charts-red);
+      }
+      .seg-running {
+        background: var(--vscode-charts-blue);
+      }
+
+      .legend {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem 0.875rem;
+        margin-top: 0.75rem;
+        font-size: 0.85em;
+      }
+      .legend button {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0;
+        border: none;
+        background: none;
+        cursor: pointer;
+        white-space: nowrap;
+        font-size: inherit;
+        color: var(--vscode-descriptionForeground);
+        transition: color 0.12s;
+      }
+      .legend button:hover {
+        color: var(--vscode-foreground);
+      }
+      .legend button[aria-pressed='true'] {
+        color: var(--accent);
+        font-weight: 700;
+      }
+      .legend i {
+        width: 8px;
+        height: 8px;
+        border-radius: 2px;
+        flex: none;
+      }
+      .legend .passed i {
+        background: var(--vscode-charts-green);
+      }
+      .legend .failed i {
+        background: var(--vscode-charts-red);
+      }
+      .legend .running i {
+        background: var(--vscode-charts-blue);
+      }
+      .legend .skipped i {
+        background: var(--vscode-charts-yellow);
+      }
+    `
+  ]
+
+  @consume({ context: suiteContext, subscribe: true })
+  @property({ type: Array })
+  suites: Record<string, SuiteStatsFragment>[] | undefined = undefined
+
+  @state()
+  private activeStatus: TestStatus | null = null
+
+  #statusColor(status: RunStatus): string {
+    switch (status) {
+      case 'failed':
+        return 'var(--vscode-charts-red)'
+      case 'passed':
+        return 'var(--vscode-charts-green)'
+      case 'running':
+        return 'var(--vscode-charts-blue)'
+      default:
+        return 'var(--vscode-descriptionForeground)'
+    }
+  }
+
+  #toggleStatus(status: TestStatus): void {
+    this.activeStatus = this.activeStatus === status ? null : status
+    window.dispatchEvent(
+      new CustomEvent('app-status-filter', {
+        bubbles: true,
+        composed: true,
+        detail: { status: this.activeStatus }
+      })
+    )
+  }
+
+  #renderProgress(summary: SuiteSummary): TemplateResult {
+    const pct = (n: number) => `${(n / summary.total) * 100}%`
+    return html`
+      <div class="progress">
+        <span class="seg-passed" style="width:${pct(summary.passed)}"></span>
+        <span class="seg-failed" style="width:${pct(summary.failed)}"></span>
+        <span class="seg-running" style="width:${pct(summary.running)}"></span>
+      </div>
+    `
+  }
+
+  #renderLegend(): TemplateResult {
+    return html`
+      <div class="legend">
+        ${STATUS_CHIPS.map(
+          (chip) => html`
+            <button
+              class="${chip.status}"
+              aria-pressed="${this.activeStatus === chip.status}"
+              @click="${() => this.#toggleStatus(chip.status)}"
+            >
+              <i></i>${chip.label}
+            </button>
+          `
+        )}
+      </div>
+    `
+  }
+
+  render() {
+    const summary = computeSuiteSummary(this.suites)
+    if (summary.total === 0) {
+      return nothing
+    }
+    const status = deriveRunStatus(summary)
+    this.setAttribute('data-status', status)
+    this.style.setProperty('--status', this.#statusColor(status))
+
+    return html`
+      <div class="card">
+        <div class="row">
+          <span class="pill"
+            ><span class="dot"></span>${STATUS_LABEL[status]}</span
+          >
+          <span class="count">
+            <b>${summary.passed}</b>/${summary.total} passed
+          </span>
+        </div>
+        ${this.#renderProgress(summary)} ${this.#renderLegend()}
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [SUMMARY]: DevtoolsSidebarSummary
+  }
+}
diff --git a/packages/app/src/components/sidebar/test-suite.ts b/packages/app/src/components/sidebar/test-suite.ts
index 576d6969..42938f8f 100644
--- a/packages/app/src/components/sidebar/test-suite.ts
+++ b/packages/app/src/components/sidebar/test-suite.ts
@@ -6,17 +6,15 @@ import { CollapseableEntry } from './collapseableEntry.js'
 import type { TestRunDetail, TestStatus } from './types.js'
 import { TestState } from './types.js'
 
-import '~icons/mdi/chevron-right.js'
+import '~icons/mdi/menu-down.js'
 import '~icons/mdi/play.js'
 import '~icons/mdi/stop.js'
-import '~icons/mdi/eye.js'
 import '~icons/mdi/collapse-all.js'
 import '~icons/mdi/expand-all.js'
-import '~icons/mdi/autorenew.js'
-import '~icons/mdi/window-close.js'
+import '~icons/mdi/close.js'
 import '~icons/mdi/debug-step-over.js'
 import '~icons/mdi/check.js'
-import '~icons/mdi/checkbox-blank-circle-outline.js'
+import '~icons/mdi/circle-outline.js'
 import '~icons/mdi/bug-play.js'
 
 const TEST_SUITE = 'wdio-test-suite'
@@ -84,12 +82,68 @@ export class ExplorerTestEntry extends CollapseableEntry {
   @property({ type: Boolean, attribute: 'has-children' })
   hasChildren = false
 
+  @property({ type: Boolean, reflect: true })
+  selected = false
+
+  @property({ type: Boolean, reflect: true })
+  root = false
+
   static styles = [
     ...Element.styles,
     css`
       :host {
         display: block;
-        font-size: 0.8em;
+        font-size: 12.5px;
+      }
+
+      /* The label is slotted, so its size must be set on the slotted node
+         directly — :host font-size doesn't reach it. */
+      ::slotted(label) {
+        font-size: 12.5px;
+      }
+
+      :host([selected]) .row {
+        background: color-mix(in srgb, var(--accent) 14%, transparent);
+        box-shadow: inset 2px 0 0 var(--accent);
+      }
+
+      :host(:not([has-children])) ::slotted(label) {
+        color: var(--vscode-descriptionForeground);
+      }
+      :host([state='running']) ::slotted(label) {
+        color: var(--vscode-charts-blue);
+      }
+      :host([state='failed']) ::slotted(label) {
+        color: var(--vscode-charts-red);
+      }
+      :host([state='skipped']) ::slotted(label) {
+        color: var(--vscode-charts-yellow);
+      }
+      :host([selected]) ::slotted(label) {
+        color: var(--vscode-foreground);
+      }
+      :host([root]) ::slotted(label) {
+        color: var(--vscode-foreground);
+        font-weight: 600;
+      }
+
+      .run-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--vscode-charts-blue);
+        animation: run-pulse 1.5s ease-in-out infinite;
+      }
+      @keyframes run-pulse {
+        0%,
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+        50% {
+          opacity: 0.4;
+          transform: scale(0.7);
+        }
       }
     `
   ]
@@ -123,6 +177,19 @@ export class ExplorerTestEntry extends CollapseableEntry {
     )
   }
 
+  #selectEntry() {
+    if (this.uid) {
+      this.dispatchEvent(
+        new CustomEvent('app-test-select', {
+          detail: this.uid,
+          bubbles: true,
+          composed: true
+        })
+      )
+    }
+    this.#viewSource()
+  }
+
   #runEntry(event: Event) {
     event.stopPropagation()
     if (!this.uid || this.runDisabled) {
@@ -209,9 +276,10 @@ export class ExplorerTestEntry extends CollapseableEntry {
   }
   get testStateIcon() {
     if (this.isRunning) {
-      return html`<icon-mdi-autorenew
-        class="w-4 mt-2 shrink-0 animate-spin"
-      ></icon-mdi-autorenew>`
+      return html`<span
+        class="w-4 mt-2 shrink-0 flex items-center justify-center"
+        ><span class="run-dot"></span
+      ></span>`
     }
     if (this.hasPassed) {
       return html`<icon-mdi-check
@@ -219,9 +287,9 @@ export class ExplorerTestEntry extends CollapseableEntry {
       ></icon-mdi-check>`
     }
     if (this.hasFailed) {
-      return html`<icon-mdi-window-close
+      return html`<icon-mdi-close
         class="w-4 mt-2 shrink-0 text-chartsRed"
-      ></icon-mdi-window-close>`
+      ></icon-mdi-close>`
     }
     if (this.hasSkipped) {
       return html`<icon-mdi-debug-step-over
@@ -229,9 +297,9 @@ export class ExplorerTestEntry extends CollapseableEntry {
       ></icon-mdi-debug-step-over>`
     }
 
-    return html`<icon-mdi-checkbox-blank-circle-outline
-      class="w-4 mt-2 shrink-0"
-    ></icon-mdi-checkbox-blank-circle-outline>`
+    return html`<icon-mdi-circle-outline
+      class="w-4 mt-2 shrink-0 text-disabledForeground"
+    ></icon-mdi-circle-outline>`
   }
 
   #renderStopButton() {
@@ -300,12 +368,6 @@ export class ExplorerTestEntry extends CollapseableEntry {
         class="flex-none ml-auto mr-1 transition-opacity opacity-0 group-hover/sidebar:opacity-100"
       >
         ${this.#renderRunStopButtons()}
-        <button
-          class="p-1 rounded hover:bg-toolbarHoverBackground my-1 group"
-          @click="${() => this.#viewSource()}"
-        >
-          <icon-mdi-eye class="group-hover:text-chartsYellow"></icon-mdi-eye>
-        </button>
         ${!hasNoChildren
           ? html`
               <button
@@ -326,28 +388,35 @@ export class ExplorerTestEntry extends CollapseableEntry {
     const hasNoChildren = !this.hasChildren
     const isCollapsed = this.isCollapsed === 'true'
     return html`
-      <section class="block mt-2 text-sm flex w-full group/sidebar">
+      <section
+        class="row flex w-full items-start text-sm group/sidebar rounded-md my-0.5 px-1 cursor-pointer hover:bg-toolbarHoverBackground"
+      >
         <button
           class="flex-none pointer px-2 h-8 ${hasNoChildren ? 'hidden' : ''}"
           @click="${() => this.#toggleEntry()}"
         >
-          <icon-mdi-chevron-right
-            class="text-base transition-transform block ${!isCollapsed
-              ? 'block rotate-90'
+          <icon-mdi-menu-down
+            class="text-[11px] transition-transform block text-disabledForeground ${isCollapsed
+              ? '-rotate-90'
               : ''}"
-          ></icon-mdi-chevron-right>
+          ></icon-mdi-menu-down>
         </button>
         <span
           class="flex items-start shrink flex-nowrap min-w-0 ${hasNoChildren
             ? 'pl-9'
             : ''}"
+          @click="${() => this.#selectEntry()}"
         >
-          ${this.testStateIcon}
+          ${this.root ? nothing : this.testStateIcon}
           <slot name="label" class="mx-2 mt-1 block flex-initial shrink"></slot>
         </span>
         ${this.#renderToolbar(hasNoChildren)}
       </section>
-      <section class="block ml-4 ${!isCollapsed ? '' : 'hidden'}">
+      <section
+        class="ml-3 border-l border-panelBorder pl-1 ${!isCollapsed
+          ? ''
+          : 'hidden'}"
+      >
         <slot name="children"></slot>
       </section>
     `
diff --git a/packages/app/src/components/sidebar/tree-filter.ts b/packages/app/src/components/sidebar/tree-filter.ts
new file mode 100644
index 00000000..308fbe81
--- /dev/null
+++ b/packages/app/src/components/sidebar/tree-filter.ts
@@ -0,0 +1,40 @@
+import type { TestStatus } from '@wdio/devtools-shared'
+import type { TestEntry } from './types.js'
+
+/** Flatten a tree entry to the labels searched by the text filter: a leaf
+ *  contributes its own label, a suite contributes its descendants' labels. */
+export function getSearchableLabel(entry: TestEntry): string[] {
+  if (entry.children.length === 0) {
+    return [entry.label]
+  }
+  return entry.children.flatMap(getSearchableLabel)
+}
+
+/**
+ * Decide whether a tree entry survives the active filters. Children are
+ * filtered before their parent, so a suite that still has children kept its
+ * matching descendants and stays visible to keep them reachable — only leaves
+ * are matched against the status directly.
+ */
+export function entryPassesFilter(
+  entry: TestEntry,
+  query: string,
+  status: TestStatus | null
+): boolean {
+  const queryMatches =
+    !query ||
+    getSearchableLabel(entry)
+      .join(' ')
+      .toLowerCase()
+      .includes(query.toLowerCase())
+  if (!queryMatches) {
+    return false
+  }
+  if (!status) {
+    return true
+  }
+  if (entry.children.length > 0) {
+    return true
+  }
+  return entry.state === status
+}
diff --git a/packages/app/src/components/sidebar/types.ts b/packages/app/src/components/sidebar/types.ts
index cf72e77d..5375ba9c 100644
--- a/packages/app/src/components/sidebar/types.ts
+++ b/packages/app/src/components/sidebar/types.ts
@@ -43,6 +43,12 @@ export interface TestRunDetail {
 
 import type { TestStatus } from '@wdio/devtools-shared'
 
+/** Detail for the `app-status-filter` event: the single status the tree is
+ *  narrowed to, or null when no status filter is active. */
+export interface StatusFilterDetail {
+  status: TestStatus | null
+}
+
 /**
  * Enum-style accessor for the canonical TestStatus values. Use the
  * shared TestStatus type for type annotations; this object is for
diff --git a/packages/app/src/components/tabs.ts b/packages/app/src/components/tabs.ts
index 2762a327..ccda011a 100644
--- a/packages/app/src/components/tabs.ts
+++ b/packages/app/src/components/tabs.ts
@@ -22,7 +22,33 @@ export class DevtoolsTabs extends Element {
         display: flex;
         flex-direction: column;
         color: var(--vscode-foreground);
-        background-color: var(--vscode-editor-background);
+        background-color: var(--vscode-sideBar-background);
+      }
+
+      /* Token-based utilities (text-*Foreground) don't generate CSS in this
+         Tailwind setup, so tab colours live here. */
+      .tab-btn {
+        color: var(--vscode-descriptionForeground);
+        cursor: pointer;
+      }
+      .tab-btn:hover {
+        color: var(--vscode-foreground);
+      }
+      .tab-btn--active {
+        color: var(--vscode-foreground);
+        font-weight: 600;
+      }
+      .tab-badge {
+        font-size: 11px;
+        line-height: 1.4;
+        padding: 1px 7px;
+        border-radius: 999px;
+        background: color-mix(
+          in srgb,
+          var(--vscode-foreground) 10%,
+          transparent
+        );
+        color: var(--vscode-descriptionForeground);
       }
     `
   ]
@@ -37,19 +63,13 @@ export class DevtoolsTabs extends Element {
     return html`
       <button
         @click="${() => this.activateTab(tabId)}"
-        class="transition-colors px-4 py-2 hover:bg-toolbarHoverBackground ${this
+        class="tab-btn transition-colors px-4 py-2 border-b-2 flex items-center gap-2 ${this
           .#activeTab === tabId
-          ? 'bg-toolbarHoverBackground'
-          : ''} flex items-center gap-2"
+          ? 'tab-btn--active border-accent'
+          : 'border-transparent'}"
       >
         <span>${tabId}</span>
-        ${showBadge
-          ? html`<span
-              class="inline-flex items-center justify-center min-w-[20px] px-1.5 py-0.5 text-xs font-semibold rounded-full"
-              style="background-color: #5a5a5a; color: #ffffff;"
-              >${badge}</span
-            >`
-          : nothing}
+        ${showBadge ? html`<span class="tab-badge">${badge}</span>` : nothing}
       </button>
     `
   }
diff --git a/packages/app/src/components/workbench.ts b/packages/app/src/components/workbench.ts
index 9159f82c..b3513b7b 100644
--- a/packages/app/src/components/workbench.ts
+++ b/packages/app/src/components/workbench.ts
@@ -28,6 +28,8 @@ import './browser/snapshot.js'
 import {
   MIN_WORKBENCH_HEIGHT,
   MIN_METATAB_WIDTH,
+  ACTIONS_DEFAULT_WIDTH,
+  BROWSER_HEIGHT_RATIO,
   RERENDER_TIMEOUT
 } from '../controller/constants.js'
 
@@ -57,7 +59,9 @@ export class DevtoolsWorkbench extends Element {
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-        height: 100vh;
+        /* Fill the parent (calc(100% - header)); 100vh overflowed by the 40px
+           header height and clipped the bottom of the right column. */
+        height: 100%;
         min-height: 0;
         overflow: hidden;
         color: var(--vscode-foreground);
@@ -71,15 +75,20 @@ export class DevtoolsWorkbench extends Element {
     localStorageKey: 'toolbarHeight',
     minPosition: MIN_WORKBENCH_HEIGHT,
     maxPosition: window.innerHeight * 0.7,
-    initialPosition: window.innerHeight * 0.7, // initial height of browser window is 70% of window
-    getContainerEl: () => this as unknown as Element,
+    initialPosition: window.innerHeight * BROWSER_HEIGHT_RATIO,
+    getContainerEl: () => this.#getVerticalWindow(),
     direction: Direction.vertical
   })
 
+  async #getVerticalWindow() {
+    await this.updateComplete
+    return this.verticalResizerWindow as Element
+  }
+
   #dragHorizontal = new DragController(this, {
     localStorageKey: 'workbenchSidebarWidth',
     minPosition: MIN_METATAB_WIDTH,
-    initialPosition: MIN_METATAB_WIDTH,
+    initialPosition: ACTIONS_DEFAULT_WIDTH,
     getContainerEl: () => this.#getHorizontalWindow(),
     direction: Direction.horizontal
   })
@@ -120,12 +129,17 @@ export class DevtoolsWorkbench extends Element {
   @query('section[data-horizontal-resizer-window]')
   horizontalResizerWindow?: HTMLElement
 
-  #computeWorkbenchPaneStyle(): string {
+  @query('section[data-vertical-resizer-window]')
+  verticalResizerWindow?: HTMLElement
+
+  // Height of the screencast pane; the dock fills the rest of the right column.
+  // Collapsed dock → empty string so the browser flex-grows to fill.
+  #computeBrowserPaneStyle(): string {
     if (this.#toolbarCollapsed) {
       return ''
     }
     const m = this.#dragVertical.getPosition().match(/(\d+(?:\.\d+)?)px/)
-    const raw = m ? parseFloat(m[1]) : window.innerHeight * 0.7
+    const raw = m ? parseFloat(m[1]) : window.innerHeight * BROWSER_HEIGHT_RATIO
     const capped = Math.min(raw, window.innerHeight * 0.7)
     const paneHeight = Math.max(MIN_WORKBENCH_HEIGHT, capped)
     return `flex:0 0 ${paneHeight}px; height:${paneHeight}px; max-height:70vh; min-height:0;`
@@ -165,16 +179,20 @@ export class DevtoolsWorkbench extends Element {
           </button>
         </nav>
       </wdio-devtools-tabs>
-      ${this.#workbenchSidebarCollapsed
-        ? html`
-            <button
-              @click="${() => this.#toggle('workbenchSidebar')}"
-              class="absolute top-2 left-2 bg-sideBarBackground flex h-10 w-10 items-center justify-center cursor-pointer rounded-md shadow hover:bg-toolbarHoverBackground border border-panelBorder"
-            >
-              <icon-mdi-arrow-collapse-right></icon-mdi-arrow-collapse-right>
-            </button>
-          `
-        : nothing}
+    `
+  }
+
+  #renderSidebarRestoreButton() {
+    if (!this.#workbenchSidebarCollapsed) {
+      return nothing
+    }
+    return html`
+      <button
+        @click="${() => this.#toggle('workbenchSidebar')}"
+        class="absolute z-20 top-2 left-2 bg-sideBarBackground flex h-10 w-10 items-center justify-center cursor-pointer rounded-md shadow hover:bg-toolbarHoverBackground border border-panelBorder"
+      >
+        <icon-mdi-arrow-collapse-right></icon-mdi-arrow-collapse-right>
+      </button>
     `
   }
 
@@ -212,7 +230,7 @@ export class DevtoolsWorkbench extends Element {
         class="relative z-10 border-t-[1px] border-t-panelBorder ${this
           .#toolbarCollapsed
           ? 'hidden'
-          : ''} flex-1 min-h-0 pb-10"
+          : ''} flex-1 min-h-0"
       >
         <wdio-devtools-tab label="Source">
           <wdio-devtools-source></wdio-devtools-source>
@@ -251,12 +269,10 @@ export class DevtoolsWorkbench extends Element {
   }
 
   render() {
-    const heightWorkbench = this.#toolbarCollapsed ? 'h-full flex-1' : ''
     return html`
       <section
         data-horizontal-resizer-window
-        class="flex relative w-full ${heightWorkbench} min-h-0 overflow-hidden"
-        style="${this.#computeWorkbenchPaneStyle()}"
+        class="flex relative w-full h-full min-h-0 overflow-hidden"
       >
         <section
           data-sidebar
@@ -265,19 +281,26 @@ export class DevtoolsWorkbench extends Element {
         >
           ${this.#renderActionsSidebar()}
         </section>
+        ${this.#renderSidebarRestoreButton()}
         ${!this.#workbenchSidebarCollapsed
           ? this.#dragHorizontal.getSlider('z-30')
           : nothing}
         <section
-          class="basis-auto text-gray-500 flex items-center justify-center flex-grow"
+          data-vertical-resizer-window
+          class="relative flex flex-col flex-grow min-w-0 min-h-0 overflow-hidden"
         >
-          <wdio-devtools-browser></wdio-devtools-browser>
+          <section
+            class="basis-auto text-gray-500 flex items-center justify-center flex-1 min-h-0"
+            style="${this.#computeBrowserPaneStyle()}"
+          >
+            <wdio-devtools-browser></wdio-devtools-browser>
+          </section>
+          ${!this.#toolbarCollapsed
+            ? this.#dragVertical.getSlider('z-[999] pointer-events-auto')
+            : nothing}
+          ${this.#renderWorkbenchTabs()}
         </section>
       </section>
-      ${!this.#toolbarCollapsed
-        ? this.#dragVertical.getSlider('z-[999] -mt-[5px] pointer-events-auto')
-        : nothing}
-      ${this.#renderWorkbenchTabs()}
     `
   }
 }
diff --git a/packages/app/src/components/workbench/actionItems/category.ts b/packages/app/src/components/workbench/actionItems/category.ts
new file mode 100644
index 00000000..e40861a8
--- /dev/null
+++ b/packages/app/src/components/workbench/actionItems/category.ts
@@ -0,0 +1,143 @@
+export type ActionCategory =
+  | 'navigation'
+  | 'input'
+  | 'assertion'
+  | 'query'
+  | 'other'
+
+const NAVIGATION = new Set([
+  'url',
+  'navigateTo',
+  'back',
+  'forward',
+  'refresh',
+  'reloadSession',
+  'newWindow',
+  'switchWindow',
+  'closeWindow',
+  'switchToFrame',
+  'switchToParentFrame'
+])
+
+const INPUT = new Set([
+  'click',
+  'doubleClick',
+  'setValue',
+  'addValue',
+  'clearValue',
+  'selectByAttribute',
+  'selectByIndex',
+  'selectByVisibleText',
+  'dragAndDrop',
+  'scrollIntoView',
+  'moveTo',
+  'keys',
+  'touchAction',
+  'uploadFile',
+  'setWindowSize'
+])
+
+const ASSERTION = new Set([
+  'isExisting',
+  'isDisplayed',
+  'isDisplayedInViewport',
+  'isVisible',
+  'isEnabled',
+  'isSelected',
+  'isClickable',
+  'isFocused',
+  'waitForExist',
+  'waitForDisplayed',
+  'waitForEnabled',
+  'waitForClickable',
+  'waitForElementVisible',
+  'waitForElementPresent',
+  'waitForElementNotPresent',
+  'waitUntil'
+])
+
+const QUERY = new Set([
+  '$',
+  '$$',
+  'getText',
+  'getAttribute',
+  'getValue',
+  'getProperty',
+  'getCSSProperty',
+  'getHTML',
+  'getTagName',
+  'getSize',
+  'getLocation',
+  'getTitle',
+  'getUrl',
+  'getPageSource',
+  'custom$',
+  'react$',
+  'shadow$',
+  'findElement',
+  'findElements'
+])
+
+/** Group a command by intent so the timeline can colour it consistently. */
+export function commandCategory(command: string): ActionCategory {
+  if (NAVIGATION.has(command)) {
+    return 'navigation'
+  }
+  if (INPUT.has(command)) {
+    return 'input'
+  }
+  if (ASSERTION.has(command)) {
+    return 'assertion'
+  }
+  if (QUERY.has(command)) {
+    return 'query'
+  }
+  return 'other'
+}
+
+export type ActionIcon =
+  | 'navigate'
+  | 'reload'
+  | 'select'
+  | 'type'
+  | 'click'
+  | 'assert'
+  | 'read'
+  | 'execute'
+
+const RELOAD = new Set(['reloadSession', 'refresh'])
+const SELECT = new Set([
+  '$',
+  '$$',
+  'custom$',
+  'react$',
+  'shadow$',
+  'findElement',
+  'findElements'
+])
+const TYPE = new Set(['setValue', 'addValue', 'clearValue', 'keys'])
+
+export function commandIcon(command: string): ActionIcon {
+  if (RELOAD.has(command)) {
+    return 'reload'
+  }
+  if (NAVIGATION.has(command)) {
+    return 'navigate'
+  }
+  if (SELECT.has(command)) {
+    return 'select'
+  }
+  if (TYPE.has(command)) {
+    return 'type'
+  }
+  if (INPUT.has(command)) {
+    return 'click'
+  }
+  if (ASSERTION.has(command)) {
+    return 'assert'
+  }
+  if (QUERY.has(command)) {
+    return 'read'
+  }
+  return 'execute'
+}
diff --git a/packages/app/src/components/workbench/actionItems/command.ts b/packages/app/src/components/workbench/actionItems/command.ts
index 9723c606..574cb297 100644
--- a/packages/app/src/components/workbench/actionItems/command.ts
+++ b/packages/app/src/components/workbench/actionItems/command.ts
@@ -1,13 +1,33 @@
-import { html } from 'lit'
+import { html, type TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import type { CommandLog } from '@wdio/devtools-shared'
 
 import { ActionItem, ICON_CLASS } from './item.js'
-import '~icons/mdi/arrow-right.js'
+import {
+  commandCategory,
+  commandIcon,
+  type ActionCategory
+} from './category.js'
+import '~icons/mdi/arrow-top-right.js'
+import '~icons/mdi/refresh.js'
+import '~icons/mdi/target.js'
+import '~icons/mdi/keyboard-outline.js'
+import '~icons/mdi/cursor-default-click-outline.js'
+import '~icons/mdi/check-circle-outline.js'
+import '~icons/mdi/text.js'
+import '~icons/mdi/code-tags.js'
 
 const SOURCE_COMPONENT = 'wdio-devtools-command-item'
 
+const CATEGORY_COLOR: Record<ActionCategory, string> = {
+  navigation: 'text-chartsBlue',
+  input: 'text-chartsPurple',
+  assertion: 'text-chartsGreen',
+  query: 'text-chartsYellow',
+  other: ''
+}
+
 @customElement(SOURCE_COMPONENT)
 export class CommandItem extends ActionItem {
   @property({ type: Object, attribute: true })
@@ -23,6 +43,36 @@ export class CommandItem extends ActionItem {
     window.dispatchEvent(event)
   }
 
+  #renderIcon(command: string): TemplateResult {
+    const cls = `${ICON_CLASS} ${CATEGORY_COLOR[commandCategory(command)]}`
+    switch (commandIcon(command)) {
+      case 'navigate':
+        return html`<icon-mdi-arrow-top-right
+          class="${cls}"
+        ></icon-mdi-arrow-top-right>`
+      case 'reload':
+        return html`<icon-mdi-refresh class="${cls}"></icon-mdi-refresh>`
+      case 'select':
+        return html`<icon-mdi-target class="${cls}"></icon-mdi-target>`
+      case 'type':
+        return html`<icon-mdi-keyboard-outline
+          class="${cls}"
+        ></icon-mdi-keyboard-outline>`
+      case 'click':
+        return html`<icon-mdi-cursor-default-click-outline
+          class="${cls}"
+        ></icon-mdi-cursor-default-click-outline>`
+      case 'assert':
+        return html`<icon-mdi-check-circle-outline
+          class="${cls}"
+        ></icon-mdi-check-circle-outline>`
+      case 'read':
+        return html`<icon-mdi-text class="${cls}"></icon-mdi-text>`
+      default:
+        return html`<icon-mdi-code-tags class="${cls}"></icon-mdi-code-tags>`
+    }
+  }
+
   render() {
     if (!this.entry) {
       return
@@ -34,8 +84,8 @@ export class CommandItem extends ActionItem {
         class="flex px-1 w-full items-center hover:bg-toolbarHoverBackground"
         @click="${() => this.#highlightLine()}"
       >
-        <icon-mdi-arrow-right class="${ICON_CLASS}"></icon-mdi-arrow-right>
-        <code class="text-sm flex-wrap text-left break-all"
+        ${this.iconChip(this.#renderIcon(entry.command))}
+        <code class="text-[12.5px] flex-wrap text-left break-all"
           >${entry.command}</code
         >
         ${this.renderTime()}
diff --git a/packages/app/src/components/workbench/actionItems/duration.ts b/packages/app/src/components/workbench/actionItems/duration.ts
new file mode 100644
index 00000000..db4b7fbc
--- /dev/null
+++ b/packages/app/src/components/workbench/actionItems/duration.ts
@@ -0,0 +1,44 @@
+export type DurationHeat = 'fast' | 'mid' | 'slow'
+
+const ONE_SECOND = 1000
+const ONE_MINUTE = ONE_SECOND * 60
+
+/** Human-readable duration: `ms` under a second, `s` under a minute, `m s` above. */
+export function formatDuration(ms: number): string {
+  if (ms > ONE_MINUTE) {
+    const minutes = Math.floor(ms / ONE_MINUTE)
+    const seconds = Math.floor((ms - minutes * ONE_MINUTE) / ONE_SECOND)
+    return `${minutes}m ${seconds}s`
+  }
+  if (ms > ONE_SECOND) {
+    return `${(ms / ONE_SECOND).toFixed(2)}s`
+  }
+  return `${ms}ms`
+}
+
+/** Bucket a step duration so slow steps stand out: fast < 500ms ≤ mid < 2s ≤ slow. */
+export function durationHeat(ms: number): DurationHeat {
+  if (ms >= 2000) {
+    return 'slow'
+  }
+  if (ms >= 500) {
+    return 'mid'
+  }
+  return 'fast'
+}
+
+/**
+ * Per-step duration for each timeline entry: the gap to the next entry. The
+ * final entry has no next, so it falls back to the gap from the previous entry
+ * — that way every row shows a duration. A lone entry has no neighbour at all.
+ */
+export function stepDurations(timestamps: number[]): Array<number | undefined> {
+  return timestamps.map((ts, index) => {
+    const next = timestamps[index + 1]
+    if (next !== undefined) {
+      return next - ts
+    }
+    const prev = timestamps[index - 1]
+    return prev !== undefined ? ts - prev : undefined
+  })
+}
diff --git a/packages/app/src/components/workbench/actionItems/item.ts b/packages/app/src/components/workbench/actionItems/item.ts
index fb8628cd..931a2299 100644
--- a/packages/app/src/components/workbench/actionItems/item.ts
+++ b/packages/app/src/components/workbench/actionItems/item.ts
@@ -1,18 +1,34 @@
 import { Element } from '@core/element'
-import { html, css } from 'lit'
+import { html, css, type TemplateResult } from 'lit'
 import { property } from 'lit/decorators.js'
 import type { CommandLog } from '@wdio/devtools-shared'
 
+import { formatDuration, durationHeat, type DurationHeat } from './duration.js'
+
 export type ActionEntry = TraceMutation | CommandLog
 
-export const ICON_CLASS = 'w-[20px] h-[20px] m-1 mr-2 shrink-0 block'
+/** Icon sized to sit inside the `.ic` chip rendered by `iconChip`. */
+export const ICON_CLASS = 'w-[15px] h-[15px] block shrink-0'
 
-const ONE_MINUTE = 1000 * 60
+const HEAT_CLASS: Record<DurationHeat, string> = {
+  fast: 'bg-chartsGreen/10 text-chartsGreen',
+  mid: 'bg-chartsYellow/10 text-chartsYellow',
+  slow: 'bg-chartsRed/10 text-chartsRed'
+}
 
 export class ActionItem extends Element {
+  /** Cumulative time since run start — forwarded to the `show-command` event. */
   @property({ type: Number })
   elapsedTime?: number
 
+  /** Gap to the next action (≈ how long this step took) — drives the heat badge. */
+  @property({ type: Number })
+  duration?: number
+
+  /** Whether this row is the currently selected action. */
+  @property({ type: Boolean, reflect: true })
+  active = false
+
   static styles = [
     ...Element.styles,
     css`
@@ -21,27 +37,56 @@ export class ActionItem extends Element {
         flex-grow: 0;
         width: 100%;
       }
+
+      button {
+        position: relative;
+      }
+
+      .ic {
+        flex: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 26px;
+        height: 26px;
+        margin: 0.25rem 0.5rem 0.25rem 0.25rem;
+        border-radius: 7px;
+        background: var(--vscode-editorWidget-background);
+        border: 1px solid var(--vscode-panel-border);
+        position: relative;
+        z-index: 1;
+      }
+
+      button {
+        border-radius: 8px;
+      }
+      :host([active]) button {
+        background: var(--vscode-editorWidget-background);
+        box-shadow: inset 0 0 0 1px var(--vscode-panel-border);
+      }
+      :host([active]) .ic {
+        border-color: var(--accent);
+      }
     `
   ]
 
+  /** Wrap an action icon in the timeline chip the connector rail threads. */
+  protected iconChip(icon: TemplateResult) {
+    return html`<span class="ic">${icon}</span>`
+  }
+
   protected renderTime() {
-    if (!this.elapsedTime) {
+    // Show every step (including 0ms gaps between same-timestamp commands) for
+    // a consistent column; only the final action has no next-action gap.
+    if (this.duration === undefined) {
       return
     }
 
-    let diffLabel = `${this.elapsedTime}ms`
-    if (this.elapsedTime > 1000) {
-      diffLabel = `${(this.elapsedTime / 1000).toFixed(2)}s`
-    }
-    if (this.elapsedTime > ONE_MINUTE) {
-      const minutes = Math.floor(this.elapsedTime / 1000 / 60)
-      diffLabel = `${minutes}m ${Math.floor((this.elapsedTime - minutes * ONE_MINUTE) / 1000)}s`
-    }
-
+    const heatCls = HEAT_CLASS[durationHeat(this.duration)]
     return html`
       <span
-        class="text-[10px] grow-0 shrink border border-editorSuggestWidgetBorder rounded-xl ml-auto px-1 bg-badgeBackground text-debugTokenExpressionName"
-        >${diffLabel}</span
+        class="text-[10px] grow-0 shrink rounded-xl ml-auto px-1.5 py-px font-medium ${heatCls}"
+        >${formatDuration(this.duration)}</span
       >
     `
   }
diff --git a/packages/app/src/components/workbench/actionItems/mutation.ts b/packages/app/src/components/workbench/actionItems/mutation.ts
index 3b39aea3..52721c33 100644
--- a/packages/app/src/components/workbench/actionItems/mutation.ts
+++ b/packages/app/src/components/workbench/actionItems/mutation.ts
@@ -25,7 +25,9 @@ export class MutationItem extends ActionItem {
 
   #getAttributeMutationLabel(mutation: TraceMutation) {
     return html`
-      <icon-mdi-pencil class="${ICON_CLASS}"></icon-mdi-pencil>
+      ${this.iconChip(
+        html`<icon-mdi-pencil class="${ICON_CLASS}"></icon-mdi-pencil>`
+      )}
       <span class="flex-grow text-left"
         >element attribute "<code>${mutation.attributeName}</code>"
         changed</span
@@ -37,13 +39,19 @@ export class MutationItem extends ActionItem {
   #getChildListMutationLabel(mutation: TraceMutation) {
     if (mutation.addedNodes.length === 1 && Boolean(mutation.url)) {
       return html`
-        <icon-mdi-document class="${ICON_CLASS}"></icon-mdi-document>
+        ${this.iconChip(
+          html`<icon-mdi-document class="${ICON_CLASS}"></icon-mdi-document>`
+        )}
         <span class="flex-grow text-left">Document loaded</span>
         ${this.renderTime()}
       `
     }
     return html`
-      <icon-mdi-family-tree class="${ICON_CLASS}"></icon-mdi-family-tree>
+      ${this.iconChip(
+        html`<icon-mdi-family-tree
+          class="${ICON_CLASS}"
+        ></icon-mdi-family-tree>`
+      )}
       <span class="flex-grow text-left">
         ${this.#renderNodeAmount(mutation.addedNodes, 'added')}
         ${mutation.addedNodes.length && mutation.removedNodes.length
@@ -91,7 +99,7 @@ export class MutationItem extends ActionItem {
       <button
         @mouseenter="${() => this.#showMutationTarget()}"
         @click="${() => this.#selectMutation()}"
-        class="px-1 flex items-center justify-center text-sm w-full hover:bg-toolbarHoverBackground"
+        class="px-1 flex items-center justify-center text-[12.5px] w-full hover:bg-toolbarHoverBackground"
       >
         ${this.#getLabel(this.entry)}
       </button>
diff --git a/packages/app/src/components/workbench/actions.ts b/packages/app/src/components/workbench/actions.ts
index dc55c016..86f4e856 100644
--- a/packages/app/src/components/workbench/actions.ts
+++ b/packages/app/src/components/workbench/actions.ts
@@ -1,6 +1,6 @@
 import { Element } from '@core/element'
 import { html, css } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { customElement, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
 import type { CommandLog } from '@wdio/devtools-shared'
@@ -9,6 +9,10 @@ import { mutationContext, commandContext } from '../../controller/context.js'
 import '../placeholder.js'
 import './actionItems/command.js'
 import './actionItems/mutation.js'
+import { stepDurations } from './actionItems/duration.js'
+import { activeTimestampAt } from './active-entry.js'
+
+type TimelineEntry = TraceMutation | CommandLog
 
 const SOURCE_COMPONENT = 'wdio-devtools-actions'
 
@@ -22,6 +26,27 @@ export class DevtoolsActions extends Element {
         flex-direction: column;
         width: 100%;
       }
+
+      /* Wraps the rows so the rail spans the full content height — the host
+         itself is stretched to the viewport by the row-flex tab. */
+      .timeline {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        padding: 8px 8px 12px;
+      }
+
+      /* Vertical rail threading the action icon chips. */
+      .timeline::before {
+        content: '';
+        position: absolute;
+        left: 28px;
+        top: 18px;
+        bottom: 18px;
+        width: 1px;
+        background: var(--vscode-panel-border);
+        pointer-events: none;
+      }
     `
   ]
 
@@ -31,31 +56,117 @@ export class DevtoolsActions extends Element {
   @consume({ context: commandContext, subscribe: true })
   commands: CommandLog[] = []
 
-  render() {
-    const mutations = this.mutations || []
-    const commands = this.commands || []
-    // Only show document-load mutations (childList with a url) in the actions
-    // list — individual node add/remove mutations are too noisy.
-    const visibleMutations = mutations.filter(
+  // The selected timeline row, tracked by object reference — timestamps aren't
+  // unique (commands logged in the same millisecond would all match), so
+  // reference identity is what highlights exactly one row.
+  @state()
+  private activeEntry?: TimelineEntry
+
+  #onShowCommand = (event: Event) => {
+    const command = (event as CustomEvent<{ command?: CommandLog }>).detail
+      ?.command
+    this.activeEntry = command
+    // Follow the call site in the Source editor passively — the Log tab is what
+    // surfaces on a command click, so stealing focus to Source would flash.
+    if (command?.callSource) {
+      window.dispatchEvent(
+        new CustomEvent('app-source-track', {
+          detail: { callSource: command.callSource }
+        })
+      )
+    }
+  }
+
+  #onSelectMutation = (event: Event) => {
+    this.activeEntry = (event as CustomEvent<TraceMutation>).detail
+  }
+
+  // Screencast playback drives the highlight to the action at the current frame.
+  // Only acts when the active action changes, so the editor isn't re-scrolled on
+  // every timeupdate tick.
+  #onScreencastProgress = (event: Event) => {
+    const { time } = (event as CustomEvent<{ time: number }>).detail
+    const entries = this.#sortedEntries()
+    const timestamp = activeTimestampAt(
+      entries.map((entry) => entry.timestamp),
+      time
+    )
+    const active = entries.find((entry) => entry.timestamp === timestamp)
+    if (active === this.activeEntry) {
+      return
+    }
+    this.activeEntry = active
+    if (active && 'command' in active && active.callSource) {
+      window.dispatchEvent(
+        new CustomEvent('app-source-track', {
+          detail: { callSource: active.callSource }
+        })
+      )
+    }
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback()
+    window.addEventListener('show-command', this.#onShowCommand)
+    window.addEventListener('app-mutation-select', this.#onSelectMutation)
+    window.addEventListener(
+      'app-screencast-progress',
+      this.#onScreencastProgress
+    )
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+    window.removeEventListener('show-command', this.#onShowCommand)
+    window.removeEventListener('app-mutation-select', this.#onSelectMutation)
+    window.removeEventListener(
+      'app-screencast-progress',
+      this.#onScreencastProgress
+    )
+  }
+
+  // Mutations + commands merged and ordered by time — the timeline's rows.
+  // Only document-load mutations (childList with a url) are shown; individual
+  // node add/remove mutations are too noisy.
+  #sortedEntries(): TimelineEntry[] {
+    const visibleMutations = (this.mutations || []).filter(
       (m) => m.type === 'childList' && Boolean(m.url)
     )
-    const entries = [...visibleMutations, ...commands].sort(
+    return [...visibleMutations, ...(this.commands || [])].sort(
       (a, b) => a.timestamp - b.timestamp
     )
+  }
+
+  // Keep the action that's playing in view as the screencast scrubs.
+  updated(changed: Map<string, unknown>): void {
+    if (changed.has('activeEntry') && this.activeEntry !== undefined) {
+      this.renderRoot
+        .querySelector('[active]')
+        ?.scrollIntoView({ block: 'nearest' })
+    }
+  }
+
+  render() {
+    const entries = this.#sortedEntries()
 
     if (!entries.length) {
       return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }
     const baselineTimestamp = entries[0]?.timestamp ?? 0
+    const durations = stepDurations(entries.map((entry) => entry.timestamp))
 
-    return entries.map((entry) => {
+    const rows = entries.map((entry, index) => {
       const elapsedTime = entry.timestamp - baselineTimestamp
+      const duration = durations[index]
+      const active = entry === this.activeEntry
 
       if ('command' in entry) {
         return html`
           <wdio-devtools-command-item
             elapsedTime=${elapsedTime}
+            .duration=${duration}
             .entry=${entry}
+            ?active=${active}
           ></wdio-devtools-command-item>
         `
       }
@@ -63,10 +174,14 @@ export class DevtoolsActions extends Element {
       return html`
         <wdio-devtools-mutation-item
           elapsedTime=${elapsedTime}
+          .duration=${duration}
           .entry=${entry}
+          ?active=${active}
         ></wdio-devtools-mutation-item>
       `
     })
+
+    return html`<div class="timeline">${rows}</div>`
   }
 }
 
diff --git a/packages/app/src/components/workbench/active-entry.ts b/packages/app/src/components/workbench/active-entry.ts
new file mode 100644
index 00000000..3cdd2ed2
--- /dev/null
+++ b/packages/app/src/components/workbench/active-entry.ts
@@ -0,0 +1,20 @@
+/**
+ * Given action timestamps sorted ascending and a playback time (wall-clock ms),
+ * return the timestamp of the action that is "current" — the latest one at or
+ * before `time`. Returns undefined when `time` precedes the first action, so
+ * nothing is highlighted before the first command runs.
+ */
+export function activeTimestampAt(
+  sortedTimestamps: number[],
+  time: number
+): number | undefined {
+  let active: number | undefined
+  for (const ts of sortedTimestamps) {
+    if (ts <= time) {
+      active = ts
+    } else {
+      break
+    }
+  }
+  return active
+}
diff --git a/packages/app/src/components/workbench/compare.ts b/packages/app/src/components/workbench/compare.ts
index 84e4c91e..4f040398 100644
--- a/packages/app/src/components/workbench/compare.ts
+++ b/packages/app/src/components/workbench/compare.ts
@@ -224,38 +224,45 @@ export class DevtoolsCompare extends Element {
     return html`
       <div class="topbar">
         <span class="pill ${baseline.test.state || ''}">
+          <i class="dot"></i>
           Baseline · ${baseline.test.state || 'unknown'} · ${baselineCount}
           commands
         </span>
-        <span>⇄</span>
-        <span class="pill"> Latest · ${latestCount} commands </span>
-        <span style="opacity:0.6; font-size:0.85em;">
+        <span class="swap-ico">⇄</span>
+        <span class="pill">
+          <i class="dot"></i> Latest · ${latestCount} commands
+        </span>
+        <span class="scope">
           ${baseline.scope === 'suite' ? 'suite scope' : 'test scope'}
         </span>
-        <label class="toggle-label" style="margin-left:auto;">
-          <input
-            type="checkbox"
-            .checked=${this.differencesOnly}
-            @change="${(e: Event) =>
-              (this.differencesOnly = (e.target as HTMLInputElement).checked)}"
-          />
-          Differences only
-        </label>
-        <button
-          class="action"
-          @click="${() => (this.swapped = !this.swapped)}"
-          title="Swap sides"
-        >
-          Swap
-        </button>
-        <button
-          class="action"
-          @click="${() => this.#clearBaseline()}"
-          title="Drop this baseline"
-        >
-          Clear
-        </button>
-        ${this.#renderPopoutButton()}
+        <div class="actions-group">
+          <label class="toggle-label">
+            <input
+              type="checkbox"
+              .checked=${this.differencesOnly}
+              @change="${(e: Event) =>
+                (this.differencesOnly = (
+                  e.target as HTMLInputElement
+                ).checked)}"
+            />
+            Differences only
+          </label>
+          <button
+            class="action"
+            @click="${() => (this.swapped = !this.swapped)}"
+            title="Swap sides"
+          >
+            Swap
+          </button>
+          <button
+            class="action"
+            @click="${() => this.#clearBaseline()}"
+            title="Drop this baseline"
+          >
+            Clear
+          </button>
+          ${this.#renderPopoutButton()}
+        </div>
       </div>
     `
   }
@@ -286,12 +293,16 @@ export class DevtoolsCompare extends Element {
             <div class="error-banner-message">${errorMessage}</div>
           </div>`
         : nothing}
-      <div class="compare-grid">
+      <div class="cmp-colhead">
         <div class="col-header">${this.swapped ? 'Latest' : 'Baseline'}</div>
         <div class="col-header">${this.swapped ? 'Baseline' : 'Latest'}</div>
-        ${visiblePairs.map((pair) =>
-          this.#renderPair(pair, leftCommands, rightCommands, firstDivergent)
-        )}
+      </div>
+      <div class="cmp-body">
+        <div class="cmp-rows">
+          ${visiblePairs.map((pair) =>
+            this.#renderPair(pair, leftCommands, rightCommands, firstDivergent)
+          )}
+        </div>
       </div>
     `
   }
diff --git a/packages/app/src/components/workbench/compare/markers.ts b/packages/app/src/components/workbench/compare/markers.ts
index ed87c5a9..ccec430b 100644
--- a/packages/app/src/components/workbench/compare/markers.ts
+++ b/packages/app/src/components/workbench/compare/markers.ts
@@ -98,11 +98,13 @@ export function renderMarker(
   }
   const statusMarker = renderStatusMarker(cmd, step, allCmdsThisSide)
   if (kind === 'missing' && !oneSideEntirelyEmpty) {
-    return html`${statusMarker}<span
+    // `only here` before the status so the ✓ stays in the right-edge column,
+    // aligned with rows that show only a ✓.
+    return html`<span
         class="marker info"
         title="Only present on this side — the other run ended before this step"
         >only here</span
-      >`
+      >${statusMarker}`
   }
   return statusMarker
 }
diff --git a/packages/app/src/components/workbench/compare/styles.ts b/packages/app/src/components/workbench/compare/styles.ts
index 3b8cadc8..9fe9ceb1 100644
--- a/packages/app/src/components/workbench/compare/styles.ts
+++ b/packages/app/src/components/workbench/compare/styles.ts
@@ -14,192 +14,279 @@ export const compareStyles = css`
     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;
+
+  /* ── Toolbar ── */
+  .topbar {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--vscode-panel-border);
   }
-  .step-cell {
-    padding: 0.25rem 0.5rem;
-    border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
     font-family: var(--vscode-editor-font-family, monospace);
-    font-size: 0.85em;
-    cursor: pointer;
+    font-size: 11.5px;
+    padding: 4px 11px;
+    border-radius: 999px;
+    background: var(--vscode-editorWidget-background);
+    color: var(--vscode-descriptionForeground);
+    border: 1px solid var(--vscode-panel-border);
+  }
+  .pill .dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    flex: none;
+    background: var(--vscode-editorLineNumber-foreground);
+  }
+  .pill.passed .dot {
+    background: var(--vscode-charts-green);
   }
-  .step-cell.divergent {
-    background: rgba(255, 90, 90, 0.08);
+  .pill.failed {
+    color: var(--vscode-charts-red);
+    border-color: color-mix(in srgb, var(--vscode-charts-red) 35%, transparent);
   }
-  .step-cell.divergent.first {
-    background: rgba(255, 90, 90, 0.18);
-    border-left: 3px solid var(--vscode-charts-red, #f48771);
+  .pill.failed .dot {
+    background: var(--vscode-charts-red);
   }
-  .marker {
-    margin-left: 0.35rem;
-    font-size: 0.85em;
+  .swap-ico {
+    color: var(--vscode-editorLineNumber-foreground);
   }
-  .marker.result {
-    color: var(--vscode-charts-orange, #d19a66);
+  .scope {
+    font-size: 11px;
+    color: var(--vscode-editorLineNumber-foreground);
   }
-  .marker.error {
-    color: var(--vscode-charts-red, #f48771);
+  .actions-group {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
-  .marker.command {
-    color: var(--vscode-charts-red, #f48771);
+  .toggle-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 11.5px;
+    color: var(--vscode-descriptionForeground);
   }
-  .marker.ok {
-    color: var(--vscode-charts-green, #73c373);
+  button.action {
+    background: var(--vscode-editorWidget-background);
+    border: 1px solid var(--vscode-panel-border);
+    color: var(--vscode-descriptionForeground);
+    font-size: 11.5px;
+    padding: 5px 12px;
+    border-radius: 7px;
+    cursor: pointer;
+    font-family: inherit;
   }
-  .marker.info {
-    color: var(--vscode-descriptionForeground, #999);
-    opacity: 0.7;
+  button.action:hover {
+    color: var(--vscode-foreground);
+    background: var(--vscode-list-hoverBackground);
+  }
+  button.action.icon-only {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 8px;
+  }
+  button.action.icon-only svg {
+    width: 1em;
+    height: 1em;
   }
+
+  /* ── Error banner ── */
   .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;
+    flex: none;
+    margin: 12px 14px 0;
+    padding: 10px 14px;
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--vscode-charts-red) 9%, transparent);
+    border: 1px solid
+      color-mix(in srgb, var(--vscode-charts-red) 25%, transparent);
   }
   .error-banner-title {
-    font-weight: 600;
-    margin-bottom: 0.25rem;
-    opacity: 0.85;
-    font-family: inherit;
+    font-size: 10px;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: var(--vscode-charts-red);
+    margin-bottom: 5px;
   }
   /* Pre-wrap only on the message body so template indentation doesn't render. */
   .error-banner-message {
     font-family: var(--vscode-editor-font-family, monospace);
+    font-size: 12px;
+    color: var(--vscode-foreground);
     white-space: pre-wrap;
     word-break: break-word;
     margin: 0;
   }
-  .step-cell.missing {
-    opacity: 0.35;
-    font-style: italic;
+
+  /* ── Diff body ── */
+  /* Header sits OUTSIDE the scroll container so rows can't scroll above it. */
+  .cmp-colhead {
+    flex: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    padding: 10px 14px 8px;
+    background: var(--vscode-editor-background);
+    border-bottom: 1px solid var(--vscode-panel-border);
+  }
+  .cmp-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: 12px 14px;
+  }
+  .col-header {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.4px;
+    color: var(--vscode-foreground);
+  }
+  .cmp-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .step-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+  .step-cell {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    font-family: var(--vscode-editor-font-family, monospace);
+    font-size: 12.5px;
+    color: var(--vscode-foreground);
+    background: var(--vscode-editorWidget-background);
+    border: 1px solid var(--vscode-panel-border);
+    cursor: pointer;
+  }
+  .step-cell code {
+    font-family: inherit;
   }
   .step-cell:hover {
-    background: var(
-      --vscode-toolbar-hoverBackground,
-      rgba(255, 255, 255, 0.06)
-    );
+    background: var(--vscode-list-hoverBackground);
+  }
+  .step-cell.divergent {
+    background: color-mix(in srgb, var(--vscode-charts-red) 9%, transparent);
+    border-color: color-mix(in srgb, var(--vscode-charts-red) 30%, transparent);
+    box-shadow: inset 3px 0 0 var(--vscode-charts-red);
+  }
+  .step-cell.divergent.first {
+    background: color-mix(in srgb, var(--vscode-charts-red) 16%, transparent);
   }
   .step-cell.expanded {
-    background: rgba(80, 160, 255, 0.06);
+    outline: 1px solid var(--accent);
   }
-  .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);
+  .step-cell.missing {
+    justify-content: center;
+    color: var(--vscode-editorLineNumber-foreground);
+    background: transparent;
+    border-style: dashed;
+    cursor: default;
+    font-style: italic;
   }
-  .pill.failed {
-    background: rgba(244, 135, 113, 0.2);
-    color: var(--vscode-charts-red, #f48771);
+
+  /* ── Per-cell status markers ── */
+  /* Only the first marker pushes the group to the right edge; any following
+     marker (e.g. the ✓ after an "only here" tag) sits adjacent, so the ✓
+     stays in the same right-edge column across rows. */
+  .marker {
+    margin-left: 8px;
+    font-family: var(--vscode-font-family, sans-serif);
+    font-size: 10px;
+    padding: 1px 7px;
+    border-radius: 5px;
   }
-  .pill.passed {
-    background: rgba(115, 195, 115, 0.2);
-    color: var(--vscode-charts-green, #73c373);
+  .step-cell .marker:first-of-type {
+    margin-left: auto;
   }
-  .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;
+  .marker.ok {
+    padding: 0;
+    background: transparent;
+    font-size: 12px;
+    color: var(--vscode-charts-green);
   }
-  .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);
+  .marker.command,
+  .marker.error {
+    color: var(--vscode-charts-red);
+    background: color-mix(in srgb, var(--vscode-charts-red) 16%, transparent);
+  }
+  .marker.result {
+    color: var(--vscode-charts-yellow);
+    background: color-mix(
+      in srgb,
+      var(--vscode-charts-yellow) 16%,
+      transparent
+    );
   }
+  .marker.info {
+    color: var(--vscode-charts-yellow);
+    background: color-mix(
+      in srgb,
+      var(--vscode-charts-yellow) 16%,
+      transparent
+    );
+  }
+
+  /* ── Expanded row detail ── */
   .detail-panel {
-    grid-column: span 2;
-    background: var(--vscode-editor-background, #1e1e1e);
-    border-bottom: 1px solid var(--vscode-panel-border, #2a2a2a);
-    padding: 0.5rem;
+    grid-column: 1 / -1;
+    margin-top: 4px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    background: var(--vscode-editorWidget-background);
+    border: 1px solid var(--vscode-panel-border);
   }
   .detail-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 0.75rem;
+    gap: 14px;
   }
   .detail-block {
-    font-size: 0.85em;
+    font-size: 12px;
   }
   .detail-block h4 {
-    font-size: 0.85em;
-    margin: 0 0 0.25rem;
-    opacity: 0.7;
-    font-weight: 600;
+    font-size: 10px;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    font-weight: 700;
+    margin: 0 0 6px;
+    color: var(--vscode-editorLineNumber-foreground);
   }
   .detail-block pre {
     margin: 0;
+    padding: 8px 10px;
+    border-radius: 6px;
+    font-size: 11px;
     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;
+    color: var(--vscode-descriptionForeground);
+    background: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-panel-border);
   }
+
   .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;
+    text-align: center;
+    font-size: 0.9em;
+    color: var(--vscode-descriptionForeground, #888);
   }
 `
diff --git a/packages/app/src/components/workbench/console-filter.ts b/packages/app/src/components/workbench/console-filter.ts
new file mode 100644
index 00000000..2a325ef0
--- /dev/null
+++ b/packages/app/src/components/workbench/console-filter.ts
@@ -0,0 +1,67 @@
+/**
+ * Pure helpers for the Console tab's search + level filtering, split out so the
+ * matching logic can be unit-tested without rendering the component.
+ */
+
+/** Level filter options — `all` plus one per captured log type. */
+export type ConsoleLevelFilter = 'all' | 'error' | 'warn' | 'info' | 'log'
+
+/** Ordered level filters for the Console toolbar: filter key + display label. */
+export const CONSOLE_LEVEL_FILTERS: ReadonlyArray<{
+  key: ConsoleLevelFilter
+  label: string
+}> = [
+  { key: 'all', label: 'All' },
+  { key: 'error', label: 'Errors' },
+  { key: 'warn', label: 'Warnings' },
+  { key: 'info', label: 'Info' },
+  { key: 'log', label: 'Logs' }
+]
+
+// SGR escape sequences (e.g. ``) from the WDIO terminal logger render
+// as stray `[31m` once the invisible ESC is dropped — strip them for display.
+const ANSI_SGR_RE = /\[[0-9;]*m/g
+
+/** Remove terminal ANSI color codes so logger output reads cleanly in the UI. */
+export function stripAnsi(value: string): string {
+  return value.replace(ANSI_SGR_RE, '')
+}
+
+/** Render a log entry's args into one string for display and search. */
+export function formatConsoleArgs(args: unknown): string {
+  if (!Array.isArray(args)) {
+    return stripAnsi(String(args))
+  }
+  return stripAnsi(
+    args
+      .map((arg) => {
+        if (typeof arg === 'string') {
+          return arg
+        }
+        try {
+          return JSON.stringify(arg, null, 2)
+        } catch {
+          return String(arg)
+        }
+      })
+      .join(' ')
+  )
+}
+
+/** Filter logs by level and a case-insensitive substring of the message. */
+export function filterConsoleLogs(
+  logs: ConsoleLogs[],
+  level: ConsoleLevelFilter,
+  search: string
+): ConsoleLogs[] {
+  const needle = search.trim().toLowerCase()
+  return logs.filter((log) => {
+    if (level !== 'all' && (log.type || 'log') !== level) {
+      return false
+    }
+    if (needle && !formatConsoleArgs(log.args).toLowerCase().includes(needle)) {
+      return false
+    }
+    return true
+  })
+}
diff --git a/packages/app/src/components/workbench/console.ts b/packages/app/src/components/workbench/console.ts
index 09d451a6..ae986562 100644
--- a/packages/app/src/components/workbench/console.ts
+++ b/packages/app/src/components/workbench/console.ts
@@ -1,10 +1,16 @@
 import { Element } from '@core/element'
-import { html, css, nothing } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { html, css } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
 import { consoleLogContext } from '../../controller/context.js'
-import { LOG_ICONS } from '../../controller/constants.js'
+import { LOG_ICONS, CONSOLE_SOURCE_BADGE } from '../../controller/constants.js'
+import {
+  filterConsoleLogs,
+  formatConsoleArgs,
+  CONSOLE_LEVEL_FILTERS,
+  type ConsoleLevelFilter
+} from './console-filter.js'
 
 const SOURCE_COMPONENT = 'wdio-devtools-console-logs'
 @customElement(SOURCE_COMPONENT)
@@ -21,89 +27,148 @@ export class DevtoolsConsoleLogs extends Element {
         position: relative;
       }
 
+      /* ── Toolbar: filter input + segmented level filter ── */
+      .console-header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 14px;
+        flex-shrink: 0;
+      }
+      .search-input {
+        flex: 1;
+        max-width: 280px;
+        padding: 6px 10px;
+        border: 1px solid var(--vscode-panel-border);
+        background: var(--vscode-input-background);
+        color: var(--vscode-foreground);
+        border-radius: 8px;
+        font-size: 12px;
+      }
+      .search-input::placeholder {
+        color: var(--vscode-descriptionForeground);
+      }
+      .search-input:focus {
+        outline: none;
+        border-color: var(--accent);
+      }
+      .filter-tabs {
+        display: flex;
+        gap: 2px;
+        padding: 2px;
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 8px;
+        background: var(--vscode-input-background);
+      }
+      .filter-tab {
+        border: none;
+        background: transparent;
+        color: var(--vscode-descriptionForeground);
+        cursor: pointer;
+        font-size: 11px;
+        font-weight: 600;
+        padding: 4px 10px;
+        border-radius: 6px;
+        transition:
+          background-color 0.15s ease,
+          color 0.15s ease;
+      }
+      .filter-tab:hover {
+        color: var(--vscode-foreground);
+      }
+      .filter-tab.active {
+        background: var(--accent);
+        color: var(--accent-foreground);
+      }
+
+      /* ── Log list ── */
       .console-container {
         flex: 1;
         overflow-y: auto;
-        font-family:
-          'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas,
-          'Courier New', monospace;
-        font-size: 13px;
-        line-height: 1.6;
+        font-family: var(--vscode-editor-font-family);
+        font-size: 12px;
+        padding: 4px 0;
       }
 
       .log-entry {
-        display: flex;
-        align-items: flex-start;
-        padding: 2px 8px;
-        border-bottom: 1px solid rgba(128, 128, 128, 0.05);
-        min-height: 22px;
+        display: grid;
+        grid-template-columns: 46px 16px auto 1fr;
+        align-items: start;
+        gap: 10px;
+        padding: 4px 14px;
+        border-bottom: 1px solid var(--vscode-panel-border);
+        line-height: 1.55;
       }
-
       .log-entry:hover {
-        background-color: rgba(255, 255, 255, 0.02);
+        background-color: var(--vscode-list-hoverBackground);
       }
-
       .log-entry.log-type-error {
-        background-color: rgba(244, 135, 113, 0.03);
+        background-color: color-mix(
+          in srgb,
+          var(--vscode-charts-red) 6%,
+          transparent
+        );
       }
-
       .log-entry.log-type-warn {
-        background-color: rgba(205, 151, 49, 0.03);
-      }
-
-      .log-entry.log-type-info {
-        background-color: rgba(14, 99, 156, 0.03);
-      }
-
-      .log-time,
-      .log-icon {
-        flex-shrink: 0;
+        background-color: color-mix(
+          in srgb,
+          var(--vscode-charts-yellow) 6%,
+          transparent
+        );
       }
 
       .log-time {
-        width: 45px;
         text-align: right;
-        margin-right: 12px;
-        font-size: 11px;
-        opacity: 0.5;
-        user-select: none;
+        font-size: 10.5px;
         color: var(--vscode-editorLineNumber-foreground);
-        line-height: 18px;
+        font-variant-numeric: tabular-nums;
+        user-select: none;
       }
-
       .log-icon {
-        margin-right: 8px;
-        font-size: 14px;
-        line-height: 18px;
+        text-align: center;
+        line-height: 1.55;
+        color: var(--vscode-descriptionForeground);
       }
-
-      .log-prefix {
-        flex-shrink: 0;
-        color: var(--vscode-foreground);
-        opacity: 0.8;
-        margin-right: 4px;
-        font-weight: 600;
+      .log-entry.log-type-error .log-icon,
+      .log-entry.log-type-error .log-message {
+        color: var(--vscode-charts-red);
       }
-
-      .log-prefix.source-test {
-        color: #4ec9b0;
+      .log-entry.log-type-warn .log-icon,
+      .log-entry.log-type-warn .log-message {
+        color: var(--vscode-charts-yellow);
       }
-
-      .log-prefix.source-terminal {
-        color: #ce9178;
+      .log-entry.log-type-info .log-icon {
+        color: var(--vscode-charts-blue);
       }
 
-      .log-prefix.source-browser {
-        color: #569cd6;
+      .log-badge {
+        justify-self: start;
+        font-size: 9.5px;
+        line-height: 1.55;
+        font-weight: 700;
+        letter-spacing: 0.4px;
+        padding: 2px 6px;
+        border-radius: 5px;
       }
-
-      .log-content {
-        flex: 1;
-        min-width: 0;
-        word-break: break-word;
-        line-height: 18px;
-        display: flex;
-        align-items: baseline;
+      .b-test {
+        color: var(--vscode-charts-green);
+        background: color-mix(
+          in srgb,
+          var(--vscode-charts-green) 14%,
+          transparent
+        );
+      }
+      .b-runner {
+        color: var(--accent);
+        background: color-mix(in srgb, var(--accent) 14%, transparent);
+      }
+      .b-browser {
+        color: var(--vscode-charts-blue);
+        background: color-mix(
+          in srgb,
+          var(--vscode-charts-blue) 14%,
+          transparent
+        );
       }
 
       .log-message {
@@ -112,18 +177,6 @@ export class DevtoolsConsoleLogs extends Element {
         word-break: break-word;
       }
 
-      .log-entry.log-type-error .log-message {
-        color: #f48771;
-      }
-
-      .log-entry.log-type-warn .log-message {
-        color: #cd9731;
-      }
-
-      .log-entry.log-type-info .log-message {
-        color: #75beff;
-      }
-
       .empty-state {
         position: absolute;
         inset: 0;
@@ -134,12 +187,10 @@ export class DevtoolsConsoleLogs extends Element {
         gap: 12px;
         color: var(--vscode-descriptionForeground);
       }
-
       .empty-state-icon {
         font-size: 48px;
         opacity: 0.3;
       }
-
       .empty-state-text {
         font-size: 14px;
         opacity: 0.6;
@@ -150,9 +201,11 @@ export class DevtoolsConsoleLogs extends Element {
   @consume({ context: consoleLogContext, subscribe: true })
   logs: ConsoleLogs[] | undefined = undefined
 
-  get logCount(): number {
-    return this.logs?.length || 0
-  }
+  @state()
+  private searchText = ''
+
+  @state()
+  private activeLevel: ConsoleLevelFilter = 'all'
 
   #startTime?: number
 
@@ -164,22 +217,34 @@ export class DevtoolsConsoleLogs extends Element {
     return `${elapsed.toFixed(1)}s`
   }
 
-  #formatArgs(args: unknown): string {
-    if (Array.isArray(args)) {
-      return args
-        .map((arg) => {
-          if (typeof arg === 'string') {
-            return arg
-          }
-          try {
-            return JSON.stringify(arg, null, 2)
-          } catch {
-            return String(arg)
-          }
-        })
-        .join(' ')
-    }
-    return String(args)
+  #renderToolbar() {
+    return html`
+      <div class="console-header">
+        <input
+          class="search-input"
+          type="text"
+          placeholder="Filter logs"
+          .value=${this.searchText}
+          @input=${(e: Event) => {
+            this.searchText = (e.target as HTMLInputElement).value
+          }}
+        />
+        <div class="filter-tabs">
+          ${CONSOLE_LEVEL_FILTERS.map(
+            ({ key, label }) => html`
+              <button
+                class="filter-tab ${this.activeLevel === key ? 'active' : ''}"
+                @click=${() => {
+                  this.activeLevel = key
+                }}
+              >
+                ${label}
+              </button>
+            `
+          )}
+        </div>
+      </div>
+    `
   }
 
   #renderEmptyState() {
@@ -193,31 +258,17 @@ export class DevtoolsConsoleLogs extends Element {
 
   #renderLogEntry(log: ConsoleLogs) {
     const icon = LOG_ICONS[log.type] || LOG_ICONS.log
-    const sourceLabel =
-      log.source === 'test'
-        ? '[TEST]'
-        : log.source === 'terminal'
-          ? '[WDIO]'
-          : log.source === 'browser'
-            ? '[BROWSER]'
-            : ''
-    const sourceClass = log.source ? `source-${log.source}` : ''
+    const badge = log.source ? CONSOLE_SOURCE_BADGE[log.source] : undefined
     return html`
       <div class="log-entry log-type-${log.type || 'log'}">
-        ${log.timestamp
-          ? html`<div class="log-time">
-              ${this.#formatElapsedTime(log.timestamp)}
-            </div>`
-          : nothing}
-        <div class="log-icon">${icon}</div>
-        <div class="log-content">
-          ${sourceLabel
-            ? html`<span class="log-prefix ${sourceClass}"
-                >${sourceLabel}</span
-              >`
-            : nothing}
-          <span class="log-message">${this.#formatArgs(log.args)}</span>
+        <div class="log-time">
+          ${log.timestamp ? this.#formatElapsedTime(log.timestamp) : ''}
         </div>
+        <div class="log-icon">${icon}</div>
+        ${badge
+          ? html`<span class="log-badge ${badge.class}">${badge.label}</span>`
+          : html`<span></span>`}
+        <span class="log-message">${formatConsoleArgs(log.args)}</span>
       </div>
     `
   }
@@ -226,9 +277,19 @@ export class DevtoolsConsoleLogs extends Element {
     if (!this.logs || this.logs.length === 0) {
       return this.#renderEmptyState()
     }
+    const visible = filterConsoleLogs(
+      this.logs,
+      this.activeLevel,
+      this.searchText
+    )
     return html`
+      ${this.#renderToolbar()}
       <div class="console-container">
-        ${this.logs.map((log) => this.#renderLogEntry(log))}
+        ${visible.length
+          ? visible.map((log) => this.#renderLogEntry(log))
+          : html`<div class="empty-state-text" style="padding: 16px 14px">
+              No logs match the current filter.
+            </div>`}
       </div>
     `
   }
diff --git a/packages/app/src/components/workbench/list.ts b/packages/app/src/components/workbench/list.ts
deleted file mode 100644
index 5fc0b995..00000000
--- a/packages/app/src/components/workbench/list.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import { Element } from '@core/element'
-import { html, css } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import '~icons/mdi/chevron-right.js'
-
-const SOURCE_COMPONENT = 'wdio-devtools-list'
-@customElement(SOURCE_COMPONENT)
-export class DevtoolsList extends Element {
-  @property({ type: Boolean })
-  isCollapsed = false
-
-  @property({ type: String })
-  label = ''
-
-  @property({ type: Object })
-  list: Record<string, unknown> | unknown[] = {}
-
-  static styles = [
-    ...Element.styles,
-    css`
-      :host {
-        display: block;
-        width: 100%;
-      }
-      dl {
-        width: 100%;
-      }
-      dt {
-        font-weight: 600;
-        font-size: 11px;
-        letter-spacing: 0.5px;
-        text-transform: uppercase;
-        opacity: 0.75;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      pre {
-        margin: 0;
-        font-family: var(--vscode-editor-font-family, monospace);
-        font-size: 11px;
-        line-height: 1.25;
-        white-space: pre-wrap;
-        word-break: break-word;
-        overflow-wrap: anywhere;
-        background: var(--vscode-editorInlayHint-background, transparent);
-        padding: 2px 4px;
-        border-radius: 3px;
-        max-height: 16rem;
-        overflow: auto;
-      }
-      .row {
-        transition: max-height 0.18s ease;
-        box-sizing: border-box;
-      }
-      .collapse {
-        max-height: 0 !important;
-        overflow: hidden !important;
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
-        border-bottom-width: 0 !important;
-      }
-    `
-  ]
-
-  #renderMetadataProp(prop: unknown) {
-    if (typeof prop === 'object' && prop !== null) {
-      return html`<pre>${JSON.stringify(prop, null, 2)}</pre>`
-    }
-    return html`<span class="break-words whitespace-pre-wrap"
-      >${String(prop)}</span
-    >`
-  }
-
-  #toggleCollapseState() {
-    this.isCollapsed = !this.isCollapsed
-    this.requestUpdate()
-  }
-
-  #renderSectionHeader(label: string) {
-    return html`
-      <button
-        @click=${() => this.#toggleCollapseState()}
-        class="block w-full border-b-[1px] border-b-panelBorder font-bold flex py-1 px-1"
-      >
-        <icon-mdi-chevron-right
-          class="text-base transition-transform block ${!this.isCollapsed
-            ? 'block rotate-90'
-            : ''}"
-        ></icon-mdi-chevron-right>
-        ${label}
-      </button>
-    `
-  }
-
-  #unpackEntry(
-    entry: unknown,
-    isArrayList: boolean
-  ): { key: string | undefined; val: unknown } {
-    const isKeyValueTuple = (v: unknown): v is [string, unknown] =>
-      Array.isArray(v) && v.length === 2 && typeof v[0] === 'string'
-    if (isArrayList) {
-      if (isKeyValueTuple(entry)) {
-        return { key: entry[0], val: entry[1] }
-      }
-      return { key: undefined, val: entry }
-    }
-    const tuple = entry as [string, unknown]
-    return { key: tuple[0], val: tuple[1] }
-  }
-
-  #renderRow(entry: unknown, isArrayList: boolean) {
-    const { key, val } = this.#unpackEntry(entry, isArrayList)
-    const stringForMeasure =
-      val && typeof val === 'object'
-        ? JSON.stringify(val, null, 2)
-        : String(val)
-    const isMultiline =
-      /\n/.test(stringForMeasure) ||
-      stringForMeasure.length > 40 ||
-      (val && typeof val === 'object')
-    const baseCls = 'row px-2 py-1 border-b-[1px] border-b-panelBorder'
-    const colCls = isMultiline ? 'basis-full w-full' : 'basis-1/2'
-    const collapsedCls = this.isCollapsed ? 'collapse' : 'max-h-[500px]'
-    if (key === undefined) {
-      return html`
-        <dd class="${baseCls} ${colCls} ${collapsedCls}">
-          ${this.#renderMetadataProp(val)}
-        </dd>
-      `
-    }
-    return html`
-      <dt class="${baseCls} ${colCls} ${collapsedCls}">${key}</dt>
-      <dd class="${baseCls} ${colCls} ${collapsedCls}">
-        ${this.#renderMetadataProp(val)}
-      </dd>
-    `
-  }
-
-  render() {
-    const list = this.list ?? {}
-    const isArrayList = Array.isArray(list)
-    if (list === null) {
-      return null
-    }
-    if (isArrayList && (list as unknown[]).length === 0) {
-      return null
-    }
-    if (
-      !isArrayList &&
-      Object.keys(list as Record<string, unknown>).length === 0
-    ) {
-      return null
-    }
-    const entries: unknown[] = isArrayList
-      ? (this.list as unknown[])
-      : Object.entries(this.list as Record<string, unknown>)
-    return html`
-      <section class="block">
-        ${this.#renderSectionHeader(this.label)}
-        <dl class="flex flex-wrap ${this.isCollapsed ? '' : 'mt-2'}">
-          ${entries.map((entry) => this.#renderRow(entry, isArrayList))}
-        </dl>
-      </section>
-    `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    [SOURCE_COMPONENT]: DevtoolsList
-  }
-}
diff --git a/packages/app/src/components/workbench/logs.ts b/packages/app/src/components/workbench/logs.ts
index 674082ce..2c065283 100644
--- a/packages/app/src/components/workbench/logs.ts
+++ b/packages/app/src/components/workbench/logs.ts
@@ -1,11 +1,12 @@
 import { Element } from '@core/element'
-import { html, css } from 'lit'
+import { html, css, nothing, type TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import type { CommandLog } from '@wdio/devtools-shared'
 import type { CommandEndpoint } from '@wdio/protocols'
 
-import './list.js'
+import { commandCategory } from './actionItems/category.js'
+import { formatDuration } from './actionItems/duration.js'
 
 const SOURCE_COMPONENT = 'wdio-devtools-logs'
 @customElement(SOURCE_COMPONENT)
@@ -22,10 +23,122 @@ export class DevtoolsCommandLogs extends Element {
     ...Element.styles,
     css`
       :host {
-        display: block;
+        display: flex;
+        flex-direction: column;
         width: 100%;
         height: 100%;
-        min-height: 200px;
+        min-height: 0;
+        color: var(--vscode-foreground);
+      }
+
+      .cmd-empty {
+        flex: 1;
+        display: grid;
+        place-items: center;
+        color: var(--vscode-descriptionForeground);
+        font-size: 13px;
+      }
+
+      .cmd-head {
+        flex: none;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 12px 14px;
+        border-bottom: 1px solid var(--vscode-panel-border);
+      }
+      .cat-dot {
+        width: 9px;
+        height: 9px;
+        border-radius: 3px;
+        flex: none;
+      }
+      .cat-navigation {
+        background: var(--vscode-charts-blue);
+      }
+      .cat-input {
+        background: var(--vscode-charts-purple);
+      }
+      .cat-assertion {
+        background: var(--vscode-charts-green);
+      }
+      .cat-query {
+        background: var(--vscode-charts-yellow);
+      }
+      .cat-other {
+        background: var(--vscode-descriptionForeground);
+      }
+      .cmd-name {
+        font-family: var(--vscode-editor-font-family);
+        font-weight: 700;
+        font-size: 14px;
+      }
+      .cmd-dur {
+        font-family: var(--vscode-editor-font-family);
+        font-size: 11px;
+        color: var(--vscode-editorLineNumber-foreground);
+      }
+      .cmd-ref {
+        margin-left: auto;
+        font-size: 12px;
+        color: var(--accent);
+        text-decoration: none;
+      }
+      .cmd-ref:hover {
+        text-decoration: underline;
+      }
+
+      .cmd-body {
+        flex: 1;
+        overflow: auto;
+        padding: 14px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+      .dsec > h4 {
+        font-size: 10.5px;
+        letter-spacing: 0.6px;
+        text-transform: uppercase;
+        color: var(--vscode-descriptionForeground);
+        margin-bottom: 8px;
+      }
+      .cmd-desc {
+        font-size: 12.5px;
+        color: var(--vscode-descriptionForeground);
+        line-height: 1.65;
+      }
+
+      .kv-card {
+        background: var(--vscode-editorWidget-background);
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 10px;
+        overflow: hidden;
+      }
+      .kv {
+        display: grid;
+        grid-template-columns: minmax(80px, auto) 1fr;
+        gap: 14px;
+        padding: 9px 14px;
+        font-size: 12px;
+        border-top: 1px solid var(--vscode-panel-border);
+      }
+      .kv:first-child {
+        border-top: none;
+      }
+      .kv .k {
+        color: var(--vscode-descriptionForeground);
+        font-family: var(--vscode-editor-font-family);
+        white-space: nowrap;
+      }
+      .kv .v {
+        color: var(--vscode-foreground);
+        font-family: var(--vscode-editor-font-family);
+        word-break: break-all;
+        text-align: right;
+      }
+      .kv .v.empty {
+        color: var(--vscode-editorLineNumber-foreground);
       }
     `
   ]
@@ -67,75 +180,103 @@ export class DevtoolsCommandLogs extends Element {
       this.#commandDefinition = endpoints[command.command]
       this.command = command
 
-      window.dispatchEvent(
-        new CustomEvent('app-source-highlight', {
-          detail: this.command?.callSource
-        })
-      )
+      // Source line-tracking is dispatched by the Actions handler; here we only
+      // surface the command's detail in the Log tab.
       this.closest('wdio-devtools-tabs')?.activateTab('Log')
     })
   }
 
+  #stringify(value: unknown): string {
+    if (typeof value === 'string') {
+      return value
+    }
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch {
+      return String(value)
+    }
+  }
+
+  #renderKvCard(rows: Array<[string, unknown]>): TemplateResult {
+    return html`
+      <div class="kv-card">
+        ${rows.map(([key, value]) => {
+          const isEmpty = value === null || value === undefined
+          return html`<div class="kv">
+            <span class="k">${key}</span>
+            <span class="v ${isEmpty ? 'empty' : ''}"
+              >${isEmpty ? 'null' : this.#stringify(value)}</span
+            >
+          </div>`
+        })}
+      </div>
+    `
+  }
+
   #renderParameters() {
     const args = this.command!.args || []
-    const params = args.reduce(
-      (acc: Record<string, unknown>, val: unknown, i: number) => {
-        const paramName = this.#commandDefinition?.parameters?.[i]?.name ?? i
-        acc[paramName] = val
-        return acc
-      },
-      {} as Record<string, unknown>
-    )
-    return html`<wdio-devtools-list
-      label="Parameters"
-      class="text-xs"
-      .list="${params}"
-    ></wdio-devtools-list>`
+    if (args.length === 0) {
+      return nothing
+    }
+    const rows = args.map((val, i): [string, unknown] => [
+      String(this.#commandDefinition?.parameters?.[i]?.name ?? i),
+      val
+    ])
+    return html`
+      <div class="dsec">
+        <h4>Parameters</h4>
+        ${this.#renderKvCard(rows)}
+      </div>
+    `
   }
 
   #renderResult() {
     const result = this.command!.result
     if (result === null || result === undefined) {
-      return ''
+      return nothing
     }
-    return html`<wdio-devtools-list
-      label="Result"
-      class="text-xs"
-      .list="${typeof result === 'object' ? result : [result]}"
-    ></wdio-devtools-list>`
+    const rows: Array<[string, unknown]> =
+      typeof result === 'object' ? Object.entries(result) : [['value', result]]
+    return html`
+      <div class="dsec">
+        <h4>Result</h4>
+        ${this.#renderKvCard(rows)}
+      </div>
+    `
   }
 
   render() {
     if (!this.command) {
-      return html`
-        <section class="flex items-center justify-center text-sm w-full h-full">
-          Please select a command to view details!
-        </section>
-      `
+      return html`<div class="cmd-empty">
+        Select a command to view its details
+      </div>`
     }
+    const category = commandCategory(this.command.command)
+    const definition = this.#commandDefinition
     return html`
-      <section
-        class="flex flex-column border-b-[1px] border-b-panelBorder px-2 py-1"
-      >
-        <h1 class="font-bold">${this.command.command}</h1>
-        ${this.#commandDefinition &&
-        html`<a
-          class="ml-auto text-xs flex items-center text-textLinkForeground"
-          href="${this.#commandDefinition.ref}"
-          target="_blank"
-          >Reference</a
-        >`}
-      </section>
-      ${this.#commandDefinition &&
-      html`
-        <wdio-devtools-list
-          label="Description"
-          class="text-xs"
-          .list="${[this.#commandDefinition.description]}"
-        >
-        </wdio-devtools-list>
-      `}
-      ${this.#renderParameters()} ${this.#renderResult()}
+      <div class="cmd-head">
+        <span class="cat-dot cat-${category}"></span>
+        <span class="cmd-name">${this.command.command}</span>
+        ${this.elapsedTime !== undefined
+          ? html`<span class="cmd-dur"
+              >${formatDuration(this.elapsedTime)}</span
+            >`
+          : nothing}
+        ${definition
+          ? html`<a class="cmd-ref" href="${definition.ref}" target="_blank"
+              >Reference ↗</a
+            >`
+          : nothing}
+      </div>
+      <div class="cmd-body">
+        ${definition?.description
+          ? html`<div class="dsec">
+              <h4>Description</h4>
+              <div class="cmd-desc">${definition.description}</div>
+            </div>`
+          : nothing}
+        ${this.#renderParameters()} ${this.#renderResult()}
+      </div>
     `
   }
 }
diff --git a/packages/app/src/components/workbench/metadata.ts b/packages/app/src/components/workbench/metadata.ts
index 75a0553f..0bae239d 100644
--- a/packages/app/src/components/workbench/metadata.ts
+++ b/packages/app/src/components/workbench/metadata.ts
@@ -1,21 +1,36 @@
 import { Element } from '@core/element'
-import { html, css } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { html, css, nothing, type TemplateResult } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
-import type { Metadata } from '@wdio/devtools-shared'
-import { metadataContext } from '../../controller/context.js'
+import type { Metadata, MetadataBySession } from '@wdio/devtools-shared'
+import {
+  metadataContext,
+  metadataBySessionContext
+} from '../../controller/context.js'
+import { PENDING_SESSION_KEY } from '../../controller/contextUpdates.js'
 
-import './list.js'
 import '../placeholder.js'
 import '~icons/mdi/chevron-right.js'
 
 const SOURCE_COMPONENT = 'wdio-devtools-metadata'
 @customElement(SOURCE_COMPONENT)
 export class DevtoolsMetadata extends Element {
+  /** Latest/active session metadata — fallback when no per-session map exists
+   *  (e.g. a loaded single-session trace without a sessionId). */
   @consume({ context: metadataContext, subscribe: true })
   metadata: Partial<Metadata> | undefined = undefined
 
+  @consume({ context: metadataBySessionContext, subscribe: true })
+  metadataBySession: MetadataBySession | undefined = undefined
+
+  /** sessionId the user picked in the dropdown; falls back to the latest. */
+  @state()
+  private selectedSessionId?: string
+
+  /** Section labels the user has collapsed. */
+  #collapsed = new Set<string>()
+
   static styles = [
     ...Element.styles,
     css`
@@ -24,12 +39,117 @@ export class DevtoolsMetadata extends Element {
         flex-direction: column;
         width: 100%;
         height: 100%;
-        font-size: 0.8em;
+        overflow: auto;
+      }
+
+      .meta {
+        padding: 14px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      .session-select {
+        align-self: flex-start;
+        font-size: 11px;
+        font-family: inherit;
+        padding: 5px 8px;
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 8px;
+        background: var(--vscode-input-background);
+        color: var(--vscode-foreground);
+        cursor: pointer;
+        line-height: 1;
+      }
+
+      .meta-sec h4 {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin: 0 0 8px;
+        font-size: 12px;
+        font-weight: 700;
+        color: var(--vscode-foreground);
+        cursor: pointer;
+        user-select: none;
+      }
+      .meta-sec .chev {
+        color: var(--vscode-descriptionForeground);
+        transition: transform 0.15s;
+      }
+      .meta-sec .chev.open {
+        transform: rotate(90deg);
+      }
+
+      .meta-card {
+        background: var(--vscode-editorWidget-background);
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 10px;
+        overflow: hidden;
+      }
+
+      .mrow {
+        display: grid;
+        grid-template-columns: minmax(120px, 200px) 1fr;
+        gap: 14px;
+        padding: 9px 14px;
+        font-size: 12px;
+        border-top: 1px solid var(--vscode-panel-border);
+      }
+      .mrow:first-child {
+        border-top: none;
+      }
+      .mrow .k {
+        color: var(--vscode-descriptionForeground);
+        font-family: var(--vscode-editor-font-family);
+        font-size: 11px;
+        word-break: break-word;
+      }
+      .mrow .v {
+        color: var(--vscode-foreground);
+        font-family: var(--vscode-editor-font-family);
+        word-break: break-all;
+      }
+      .mrow .v a {
+        color: var(--accent);
+        text-decoration: none;
+      }
+      .mrow .v a:hover {
+        text-decoration: underline;
+      }
+      .bool-true {
+        color: var(--vscode-charts-green);
+      }
+      .bool-false {
+        color: var(--vscode-charts-red);
+      }
+
+      /* Object/JSON values get a full-width recessed code block. */
+      .mrow.json {
+        display: block;
+      }
+      .mrow.json .k {
+        display: block;
+        margin-bottom: 8px;
+      }
+      .mrow.json pre {
+        margin: 0;
+        background: var(--vscode-editor-background);
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 8px;
+        padding: 10px 12px;
+        font-family: var(--vscode-editor-font-family);
+        font-size: 11px;
+        line-height: 1.5;
+        color: var(--vscode-descriptionForeground);
+        overflow: auto;
+        white-space: pre-wrap;
+        word-break: break-all;
       }
     `
   ]
 
-  #buildSessionInfo(m: MetadataShape): Record<string, unknown> {
+  #buildSessionInfo(m: Metadata): Record<string, unknown> {
     const sessionInfo: Record<string, unknown> = {}
     if (m.sessionId) {
       sessionInfo['Session ID'] = m.sessionId
@@ -49,46 +169,153 @@ export class DevtoolsMetadata extends Element {
     return sessionInfo
   }
 
-  #renderListIfNonEmpty(label: string, list: Record<string, unknown>) {
-    return Object.keys(list).length
-      ? html`<wdio-devtools-list
-          label="${label}"
-          .list="${list}"
-        ></wdio-devtools-list>`
-      : ''
+  #toggle(label: string) {
+    if (this.#collapsed.has(label)) {
+      this.#collapsed.delete(label)
+    } else {
+      this.#collapsed.add(label)
+    }
+    this.requestUpdate()
+  }
+
+  #renderValue(val: unknown): TemplateResult | string {
+    if (typeof val === 'boolean') {
+      return html`<span class="bool-${val}">${val}</span>`
+    }
+    if (typeof val === 'string' && /^https?:\/\//.test(val)) {
+      return html`<a href="${val}" target="_blank" rel="noreferrer">${val}</a>`
+    }
+    return String(val)
+  }
+
+  #renderRow(key: string, val: unknown) {
+    if (val !== null && typeof val === 'object') {
+      return html`
+        <div class="mrow json">
+          <span class="k">${key}</span>
+          <pre>${JSON.stringify(val, null, 2)}</pre>
+        </div>
+      `
+    }
+    return html`
+      <div class="mrow">
+        <span class="k">${key}</span>
+        <span class="v">${this.#renderValue(val)}</span>
+      </div>
+    `
+  }
+
+  #renderSection(label: string, data: unknown) {
+    // Metadata's capability/option bags are typed `unknown` upstream; narrow to
+    // a record here so the section can iterate their key/value pairs.
+    const entries = Object.entries((data ?? {}) as Record<string, unknown>)
+    if (entries.length === 0) {
+      return nothing
+    }
+    const open = !this.#collapsed.has(label)
+    return html`
+      <div class="meta-sec">
+        <h4 @click="${() => this.#toggle(label)}">
+          <icon-mdi-chevron-right
+            class="chev ${open ? 'open' : ''}"
+          ></icon-mdi-chevron-right>
+          ${label}
+        </h4>
+        ${open
+          ? html`<div class="meta-card">
+              ${entries.map(([k, v]) => this.#renderRow(k, v))}
+            </div>`
+          : nothing}
+      </div>
+    `
+  }
+
+  /** Captured sessions in arrival order (the pending buffer is never shown). */
+  #sessions(): Array<[string, Metadata]> {
+    return Object.entries(this.metadataBySession ?? {}).filter(
+      ([id]) => id !== PENDING_SESSION_KEY
+    )
+  }
+
+  /** Map key of the session to display: the picked one (when still present),
+   *  else the latest. Selection is by map key throughout — never the metadata's
+   *  `sessionId` field — so the highlighted option and shown content can't drift. */
+  #activeKey(sessions: Array<[string, Metadata]>): string | undefined {
+    if (
+      this.selectedSessionId &&
+      sessions.some(([id]) => id === this.selectedSessionId)
+    ) {
+      return this.selectedSessionId
+    }
+    return sessions.length ? sessions[sessions.length - 1][0] : undefined
+  }
+
+  /** Metadata to display: the active session, else the single active value
+   *  (loaded trace with no sessionId). */
+  #activeMetadata(sessions: Array<[string, Metadata]>): Metadata | undefined {
+    const key = this.#activeKey(sessions)
+    const found = key && sessions.find(([id]) => id === key)
+    return found ? found[1] : (this.metadata as Metadata | undefined)
+  }
+
+  /** Label a session by its index and (when known) its URL host, so the
+   *  options are distinguishable — e.g. "Session 2 · www.google.com". */
+  #sessionLabel(meta: Metadata, index: number): string {
+    let host = ''
+    try {
+      if (meta.url) {
+        host = new URL(meta.url).host
+      }
+    } catch {
+      /* non-URL value — fall back to just the index */
+    }
+    return host ? `Session ${index + 1} · ${host}` : `Session ${index + 1}`
+  }
+
+  #renderSessionSelect(sessions: Array<[string, Metadata]>) {
+    if (sessions.length < 2) {
+      return nothing
+    }
+    const selectedKey = this.#activeKey(sessions)
+    return html`
+      <select
+        class="session-select"
+        .value=${selectedKey ?? ''}
+        @change=${(e: Event) => {
+          this.selectedSessionId = (e.target as HTMLSelectElement).value
+        }}
+      >
+        ${sessions.map(
+          ([id, meta], i) =>
+            html`<option value=${id} ?selected=${id === selectedKey}>
+              ${this.#sessionLabel(meta, i)}
+            </option>`
+        )}
+      </select>
+    `
   }
 
   render() {
-    if (!this.metadata) {
+    const sessions = this.#sessions()
+    const active = this.#activeMetadata(sessions)
+    if (!active) {
       return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }
-    const m = this.metadata as MetadataShape
     return html`
-      ${this.#renderListIfNonEmpty('Session', this.#buildSessionInfo(m))}
-      <wdio-devtools-list
-        label="Capabilities"
-        .list="${m.capabilities || {}}"
-      ></wdio-devtools-list>
-      ${this.#renderListIfNonEmpty(
-        'Desired Capabilities',
-        m.desiredCapabilities || {}
-      )}
-      ${this.#renderListIfNonEmpty('Options', m.options || {})}
+      <div class="meta">
+        ${this.#renderSessionSelect(sessions)}
+        ${this.#renderSection('Session', this.#buildSessionInfo(active))}
+        ${this.#renderSection('Capabilities', active.capabilities)}
+        ${this.#renderSection(
+          'Desired Capabilities',
+          active.desiredCapabilities
+        )}
+        ${this.#renderSection('Options', active.options)}
+      </div>
     `
   }
 }
 
-interface MetadataShape {
-  sessionId?: string
-  testEnv?: string
-  host?: string
-  modulePath?: string
-  url?: string
-  capabilities?: Record<string, unknown>
-  desiredCapabilities?: Record<string, unknown>
-  options?: Record<string, unknown>
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     [SOURCE_COMPONENT]: DevtoolsMetadata
diff --git a/packages/app/src/components/workbench/network.ts b/packages/app/src/components/workbench/network.ts
index 9fe9aa6b..e25c4b6e 100644
--- a/packages/app/src/components/workbench/network.ts
+++ b/packages/app/src/components/workbench/network.ts
@@ -4,13 +4,17 @@ import { networkStyles } from './network/styles.js'
 import { customElement, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 import { networkRequestContext } from '../../controller/context.js'
-import { RESOURCE_TYPES } from '../../utils/network-constants.js'
+import {
+  RESOURCE_TYPES,
+  TYPE_DOT_CLASS
+} from '../../utils/network-constants.js'
 import {
   formatBytes,
   formatTime,
-  getStatusClass,
+  statusKind,
   getResourceType,
-  getFileName
+  getFileName,
+  contentType
 } from '../../utils/network-helpers.js'
 
 import '../placeholder.js'
@@ -93,7 +97,9 @@ export class DevtoolsNetwork extends Element {
   }
 
   #selectRequest(request: NetworkRequest) {
-    this.selectedRequest = request
+    // Clicking the already-selected row again closes the detail panel.
+    this.selectedRequest =
+      this.selectedRequest?.id === request.id ? undefined : request
   }
 
   #renderNetworkHeader() {
@@ -124,29 +130,31 @@ export class DevtoolsNetwork extends Element {
   }
 
   #renderRequestRow(request: NetworkRequest) {
+    const kind = statusKind(request.status, Boolean(request.error))
+    const dotClass = TYPE_DOT_CLASS[getResourceType(request)]
     return html`
       <div
-        class="request-row ${this.selectedRequest?.id === request.id
+        class="grid request-row ${this.selectedRequest?.id === request.id
           ? 'selected'
-          : ''} ${request.error ? 'error' : ''}"
+          : ''}"
         @click="${() => this.#selectRequest(request)}"
       >
-        <span class="truncate" title="${request.url}"
-          >${getFileName(request.url)}</span
-        >
-        <span>${request.method}</span>
-        <span class="${getStatusClass(request.status)}"
-          >${request.status || (request.error ? 'ERR' : '-')}</span
-        >
-        <span class="truncate text-muted"
-          >${request.responseHeaders?.['content-type']?.split(';')[0] ||
-          '-'}</span
-        >
-        <span>${formatTime(request.time)}</span>
-        <span>${formatBytes(request.size)}</span>
-        <span class="text-muted"
-          >${request.startTime ? `${request.startTime.toFixed(1)}s` : '-'}</span
+        <span class="req-name">
+          <i class="type-dot ${dotClass}"></i>
+          <span class="truncate" title="${request.url}"
+            >${getFileName(request.url)}</span
+          >
+        </span>
+        <span class="req-method">${request.method}</span>
+        <span class="req-status kind-${kind}">
+          <i class="status-dot"></i>
+          ${request.status || (request.error ? 'ERR' : '—')}
+        </span>
+        <span class="req-type truncate" title="${contentType(request)}"
+          >${contentType(request)}</span
         >
+        <span class="req-dur">${formatTime(request.time)}</span>
+        <span class="req-size">${formatBytes(request.size)}</span>
       </div>
     `
   }
@@ -166,17 +174,16 @@ export class DevtoolsNetwork extends Element {
       ${this.#renderNetworkHeader()}
       <div class="network-content">
         <div class="requests-list">
-          <div class="requests-header">
+          <div class="grid requests-header">
             <div>Name</div>
             <div>Method</div>
             <div>Status</div>
-            <div>Content Type</div>
-            <div>Duration</div>
-            <div>Size</div>
-            <div>Start</div>
+            <div>Type</div>
+            <div class="col-num">Duration</div>
+            <div class="col-num">Size</div>
           </div>
           ${filteredRequests.length === 0
-            ? html`<div class="p-4 text-center text-sm text-muted">
+            ? html`<div class="filter-empty">
                 No requests match your filter
               </div>`
             : filteredRequests.map((r) => this.#renderRequestRow(r))}
@@ -186,11 +193,11 @@ export class DevtoolsNetwork extends Element {
     `
   }
 
-  #renderHeaderRow(key: string, value: unknown, valueClass = '') {
+  #renderKv(key: string, value: unknown, valueClass = '') {
     return html`
-      <div class="header-row">
-        <span class="header-key">${key}:</span>
-        <span class="header-value ${valueClass}">${value}</span>
+      <div class="kv">
+        <span class="k">${key}</span>
+        <span class="v ${valueClass}">${value}</span>
       </div>
     `
   }
@@ -205,10 +212,8 @@ export class DevtoolsNetwork extends Element {
     return html`
       <div class="detail-section">
         <div class="detail-title">${title}</div>
-        <div class="detail-content">
-          ${Object.entries(headers).map(([k, v]) =>
-            this.#renderHeaderRow(k, v)
-          )}
+        <div class="kv-card">
+          ${Object.entries(headers).map(([k, v]) => this.#renderKv(k, v))}
         </div>
       </div>
     `
@@ -221,34 +226,33 @@ export class DevtoolsNetwork extends Element {
     return html`
       <div class="detail-section">
         <div class="detail-title">${title}</div>
-        <div class="detail-content">
-          <pre>${this.#formatBody(body)}</pre>
+        <div class="kv-card">
+          <div class="kv">
+            <span class="v"><pre>${this.#formatBody(body)}</pre></span>
+          </div>
         </div>
       </div>
     `
   }
 
   #renderGeneralSection(req: NetworkRequest) {
+    const kind = statusKind(req.status, Boolean(req.error))
     return html`
       <div class="detail-section">
         <div class="detail-title">General</div>
-        <div class="detail-content">
-          ${this.#renderHeaderRow('URL', req.url)}
-          ${this.#renderHeaderRow('Method', req.method)}
-          ${this.#renderHeaderRow(
+        <div class="kv-card">
+          ${this.#renderKv('Request URL', req.url)}
+          ${this.#renderKv('Method', req.method)}
+          ${this.#renderKv(
             'Status',
-            html`${req.status || '-'} ${req.statusText || ''}`,
-            getStatusClass(req.status)
+            html`${req.status || '—'} ${req.statusText || ''}`,
+            `kind-${kind}`
           )}
-          ${this.#renderHeaderRow('Type', req.type)}
-          ${req.time
-            ? this.#renderHeaderRow('Time', formatTime(req.time))
-            : nothing}
-          ${req.size
-            ? this.#renderHeaderRow('Size', formatBytes(req.size))
-            : nothing}
+          ${this.#renderKv('Type', contentType(req))}
+          ${req.time ? this.#renderKv('Time', formatTime(req.time)) : nothing}
+          ${req.size ? this.#renderKv('Size', formatBytes(req.size)) : nothing}
           ${req.error
-            ? this.#renderHeaderRow('Error', req.error, 'text-red-500')
+            ? this.#renderKv('Error', req.error, 'kind-error')
             : nothing}
         </div>
       </div>
diff --git a/packages/app/src/components/workbench/network/styles.ts b/packages/app/src/components/workbench/network/styles.ts
index 17d039b5..2cb99d8f 100644
--- a/packages/app/src/components/workbench/network/styles.ts
+++ b/packages/app/src/components/workbench/network/styles.ts
@@ -10,191 +10,267 @@ export const networkStyles = css`
     width: 100%;
     overflow: hidden;
     color: var(--vscode-foreground);
-    background-color: var(--vscode-editor-background);
+    background-color: var(--vscode-sideBar-background);
   }
 
+  /* ── Toolbar: filter input + segmented type filter ── */
   .network-header {
-    padding: 0.5rem 1rem;
-    border-bottom: 1px solid var(--vscode-panel-border);
     display: flex;
-    gap: 0.5rem;
     align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
     flex-shrink: 0;
   }
 
   .search-input {
-    padding: 0.375rem 0.75rem;
+    flex: 1;
+    max-width: 280px;
+    padding: 6px 10px;
     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;
+    color: var(--vscode-foreground);
+    border-radius: 8px;
+    font-size: 12px;
+  }
+  .search-input::placeholder {
+    color: var(--vscode-descriptionForeground);
   }
-
   .search-input:focus {
     outline: none;
-    border-color: var(--vscode-focusBorder);
+    border-color: var(--accent);
   }
 
   .filter-tabs {
     display: flex;
-    gap: 0.25rem;
-    margin-left: 1rem;
+    gap: 2px;
+    padding: 2px;
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 8px;
+    background: var(--vscode-input-background);
   }
-
   .filter-tab {
-    padding: 0.375rem 0.75rem;
     border: none;
     background: transparent;
-    color: var(--vscode-foreground);
+    color: var(--vscode-descriptionForeground);
     cursor: pointer;
-    font-size: 0.875rem;
-    transition: all 0.15s;
-    border-bottom: 2px solid transparent;
+    font-size: 11px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 6px;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
   }
-
   .filter-tab:hover {
-    background: var(--vscode-toolbar-hoverBackground);
+    color: var(--vscode-foreground);
   }
-
   .filter-tab.active {
-    color: var(--vscode-textLink-activeForeground);
-    border-bottom-color: var(--vscode-textLink-activeForeground);
+    background: var(--accent);
+    color: var(--accent-foreground);
   }
 
+  /* ── List + detail split ── */
   .network-content {
     display: flex;
     flex: 1;
+    min-height: 0;
     overflow: hidden;
   }
-
   .requests-list {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: auto;
-    border-right: 1px solid var(--vscode-panel-border);
+    flex: 1.4;
     min-width: 0;
+    overflow: auto;
+    padding: 0 8px 12px;
   }
 
-  .requests-header {
+  .grid {
     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);
+    grid-template-columns:
+      minmax(160px, 2fr) 64px 76px minmax(110px, 1.2fr)
+      76px 76px;
+    align-items: center;
+    gap: 14px;
+    /* Keep the row box wide enough to contain every column (incl. the row's
+       own 10px padding) when the detail panel narrows the list — so the
+       highlight spans full width, Size isn't clipped, and it scrolls instead. */
+    min-width: 660px;
+  }
+  .requests-header {
     position: sticky;
     top: 0;
-    background: var(--vscode-editor-background);
     z-index: 1;
+    background: var(--vscode-sideBar-background);
+    padding: 8px 10px;
+    font-size: 10px;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    color: var(--vscode-descriptionForeground);
+    border-bottom: 1px solid var(--vscode-panel-border);
   }
-
-  .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;
+  .col-num {
+    text-align: right;
   }
 
   .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);
+    padding: 7px 10px;
+    font-size: 12px;
+    border-radius: 8px;
     cursor: pointer;
-    font-size: 0.875rem;
-    transition: background 0.15s;
-    align-items: center;
+    transition: background 0.12s;
+  }
+  .request-row:hover {
+    background: var(--vscode-list-hoverBackground);
+  }
+  .request-row.selected {
+    background: var(--vscode-editorWidget-background);
+    box-shadow: inset 0 0 0 1px var(--vscode-panel-border);
   }
 
-  .request-row > span {
-    padding: 0.5rem;
-    border-right: 1px solid var(--vscode-panel-border);
+  .req-name {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    min-width: 0;
+    font-family: var(--vscode-editor-font-family);
+    color: var(--vscode-foreground);
+  }
+  .req-name .type-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    flex: none;
+  }
+  .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .request-row > span:last-child {
-    border-right: none;
+  /* content-type dots (tokens only) */
+  .type-html {
+    background: var(--accent);
   }
-
-  .request-row:hover {
-    background: var(--vscode-list-hoverBackground);
+  .type-css {
+    background: var(--vscode-charts-blue);
   }
-
-  .request-row.selected {
-    background: var(--vscode-list-activeSelectionBackground);
-    color: var(--vscode-list-activeSelectionForeground);
+  .type-js {
+    background: var(--vscode-charts-yellow);
   }
-
-  .request-row.error {
-    color: var(--vscode-errorForeground);
+  .type-image {
+    background: var(--vscode-charts-green);
   }
-
-  .request-detail {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
-    min-width: 400px;
+  .type-font {
+    background: var(--vscode-charts-purple);
   }
-
-  .detail-section {
-    margin-bottom: 1.5rem;
+  .type-fetch {
+    background: var(--vscode-charts-orange);
+  }
+  .type-other {
+    background: var(--vscode-descriptionForeground);
   }
 
-  .detail-title {
-    font-size: 0.875rem;
+  .req-method {
+    font-family: var(--vscode-editor-font-family);
+    font-size: 11px;
     font-weight: 600;
-    margin-bottom: 0.5rem;
-    color: var(--vscode-foreground);
+    color: var(--vscode-descriptionForeground);
   }
-
-  .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;
+  .req-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--vscode-editor-font-family);
+    font-variant-numeric: tabular-nums;
+  }
+  .req-status .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+    flex: none;
+  }
+  .kind-ok {
+    color: var(--vscode-charts-green);
+  }
+  .kind-redirect {
+    color: var(--vscode-charts-yellow);
+  }
+  .kind-error {
+    color: var(--vscode-charts-red);
+  }
+  .kind-pending {
+    color: var(--vscode-descriptionForeground);
   }
 
-  .header-row {
-    display: flex;
-    gap: 1rem;
-    padding: 0.25rem 0;
-    border-bottom: 1px solid var(--vscode-panel-border);
+  .req-type,
+  .req-dur,
+  .req-size {
+    color: var(--vscode-descriptionForeground);
+    font-size: 11px;
+  }
+  .req-dur,
+  .req-size {
+    font-family: var(--vscode-editor-font-family);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
   }
 
-  .header-key {
-    font-weight: 600;
-    color: var(--vscode-symbolIcon-keyForeground);
-    flex-shrink: 0;
-    min-width: 80px;
+  .filter-empty {
+    padding: 1rem;
+    text-align: center;
+    font-size: 12px;
+    color: var(--vscode-descriptionForeground);
   }
 
-  .header-value {
-    color: var(--vscode-symbolIcon-stringForeground);
-    word-break: break-word;
+  /* ── Detail panel ── */
+  .request-detail {
     flex: 1;
-    text-align: right;
+    min-width: 280px;
+    overflow: auto;
+    border-left: 1px solid var(--vscode-panel-border);
+    padding: 14px 14px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
   }
-
-  .truncate {
+  .detail-title {
+    font-size: 10.5px;
+    letter-spacing: 0.6px;
+    text-transform: uppercase;
+    color: var(--vscode-descriptionForeground);
+    margin-bottom: 8px;
+  }
+  .kv-card {
+    background: var(--vscode-editorWidget-background);
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 10px;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
-
-  .text-muted {
+  .kv {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 14px;
+    padding: 9px 14px;
+    font-size: 12px;
+    border-top: 1px solid var(--vscode-panel-border);
+  }
+  .kv:first-child {
+    border-top: none;
+  }
+  .kv .k {
     color: var(--vscode-descriptionForeground);
+    font-family: var(--vscode-editor-font-family);
+    white-space: nowrap;
+  }
+  .kv .v {
+    color: var(--vscode-foreground);
+    font-family: var(--vscode-editor-font-family);
+    word-break: break-all;
+    text-align: right;
+  }
+  .kv .v pre {
+    margin: 0;
+    white-space: pre-wrap;
+    text-align: left;
   }
 `
diff --git a/packages/app/src/components/workbench/source.ts b/packages/app/src/components/workbench/source.ts
index d26ab69b..14929318 100644
--- a/packages/app/src/components/workbench/source.ts
+++ b/packages/app/src/components/workbench/source.ts
@@ -30,10 +30,19 @@ export class DevtoolsSource extends Element {
         padding: 10px 0px;
         flex: 1;
         min-height: 0;
+        font-size: 12.5px;
       }
       .cm-content {
         padding: 0 !important;
       }
+      /* Blend the editor with the dock panel (overrides oneDark/basicSetup,
+         which paint their own background). !important beats the theme's
+         injected rules regardless of order; token-based so light mode matches. */
+      .cm-editor,
+      .cm-gutters {
+        background-color: var(--vscode-sideBar-background) !important;
+        border: none !important;
+      }
 
       .source-container {
         display: flex;
@@ -52,13 +61,22 @@ export class DevtoolsSource extends Element {
   #editorView?: EditorView
   #activeFile?: string
   #tabObserver?: MutationObserver
+  #themeObserver?: MutationObserver
+  /** Theme the live editor was built with, so we can rebuild on toggle. */
+  #editorIsDark = false
+
+  #onHighlight = (ev: Event) => this.#highlightCallSource(ev)
+  #onTrack = (ev: Event) => this.#trackCallSource(ev)
+
+  #isDark(): boolean {
+    return document.body.classList.contains('dark')
+  }
 
   connectedCallback(): void {
     super.connectedCallback()
-    window.addEventListener(
-      'app-source-highlight',
-      this.#highlightCallSource.bind(this)
-    )
+    window.addEventListener('app-source-highlight', this.#onHighlight)
+    // Passive line-follow during screencast playback — scroll only, no tab flip.
+    window.addEventListener('app-source-track', this.#onTrack)
     // Observe when the containing tab becomes active so CodeMirror can remeasure
     // after having been initialized while the tab was hidden (display:none).
     requestAnimationFrame(() => {
@@ -79,14 +97,33 @@ export class DevtoolsSource extends Element {
         })
       }
     })
+    // Rebuild the editor when the app theme toggles so it isn't stuck on the
+    // dark CodeMirror theme in light mode (and vice versa).
+    this.#themeObserver = new MutationObserver(() => {
+      if (
+        this.#editorView &&
+        this.#activeFile &&
+        this.#editorIsDark !== this.#isDark()
+      ) {
+        this.#mountEditor(this.#activeFile)
+      }
+    })
+    this.#themeObserver.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback()
+    window.removeEventListener('app-source-highlight', this.#onHighlight)
+    window.removeEventListener('app-source-track', this.#onTrack)
     this.#editorView?.destroy()
     this.#editorView = undefined
     this.#tabObserver?.disconnect()
     this.#tabObserver = undefined
+    this.#themeObserver?.disconnect()
+    this.#themeObserver = undefined
   }
 
   updated(_changedProperties: PropertyValues<this>) {
@@ -114,8 +151,12 @@ export class DevtoolsSource extends Element {
       return
     }
 
-    // Reuse the existing editor if the file hasn't changed
-    if (this.#editorView && this.#activeFile === filePath) {
+    // Reuse the existing editor when the file and theme are unchanged.
+    if (
+      this.#editorView &&
+      this.#activeFile === filePath &&
+      this.#editorIsDark === this.#isDark()
+    ) {
       if (highlightLine && highlightLine > 0) {
         this.#scrollToLine(this.#editorView, highlightLine)
       }
@@ -125,13 +166,17 @@ export class DevtoolsSource extends Element {
     // Destroy previous editor instance before creating a new one
     this.#editorView?.destroy()
 
+    // oneDark only in dark mode; basicSetup's default light theme otherwise so
+    // the editor tracks the app theme instead of staying dark in light mode.
+    const dark = this.#isDark()
     const opts: EditorViewConfig = {
       root: this.shadowRoot!,
-      extensions: [basicSetup, javascript(), oneDark],
+      extensions: [basicSetup, javascript(), ...(dark ? [oneDark] : [])],
       doc: source,
       parent: container
     }
     this.#editorView = new EditorView(opts)
+    this.#editorIsDark = dark
     this.#activeFile = filePath
 
     // Force a measure on the next frame so CodeMirror can calculate heights
@@ -159,7 +204,20 @@ export class DevtoolsSource extends Element {
   }
 
   #highlightCallSource(ev: Event) {
-    const [filePath, line] = (ev as CustomEvent<string>).detail.split(':')
+    this.#applyCallSource((ev as CustomEvent<string>).detail)
+    this.closest('wdio-devtools-tabs')?.activateTab('Source')
+  }
+
+  // Passive variant for screencast playback: follow the line without stealing
+  // the active tab, so watching the video doesn't yank you off Console/Network.
+  #trackCallSource(ev: Event) {
+    this.#applyCallSource(
+      (ev as CustomEvent<{ callSource: string }>).detail.callSource
+    )
+  }
+
+  #applyCallSource(callSource: string) {
+    const [filePath, line] = callSource.split(':')
     // If the source for this file is already loaded, mount and scroll immediately
     if (this.sources?.[filePath]) {
       this.#mountEditor(filePath, parseInt(line, 10))
@@ -168,7 +226,6 @@ export class DevtoolsSource extends Element {
       // store desired highlight so we can apply it then.
       this.#activeFile = filePath
     }
-    this.closest('wdio-devtools-tabs')?.activateTab('Source')
   }
 
   render() {
diff --git a/packages/app/src/controller/DataManager.ts b/packages/app/src/controller/DataManager.ts
index 4d59c0f6..aa40b474 100644
--- a/packages/app/src/controller/DataManager.ts
+++ b/packages/app/src/controller/DataManager.ts
@@ -13,6 +13,7 @@ import {
   consoleLogContext,
   networkRequestContext,
   metadataContext,
+  metadataBySessionContext,
   commandContext,
   sourceContext,
   suiteContext,
@@ -31,19 +32,29 @@ import {
   markRunningAsStopped
 } from './mark-running.js'
 import { shouldResetForNewRun } from './run-detection.js'
-import { mergeNetworkRequests, replaceCommand } from './contextUpdates.js'
+import {
+  mergeNetworkRequests,
+  replaceCommand,
+  mergeSessionMetadata
+} from './contextUpdates.js'
 
 export class DataManagerController implements ReactiveController {
   #ws?: WebSocket
   #host: ReactiveControllerHost & HTMLElement
   #lastSeenRunTimestamp = 0
   #activeRerunTestUid?: string
+  /** Most-recently-seen browser sessionId — target for metadata messages
+   *  that arrive without their own sessionId (e.g. url updates). */
+  #currentSessionId?: string
 
   mutationsContextProvider: ContextProvider<typeof mutationContext>
   logsContextProvider: ContextProvider<typeof logContext>
   consoleLogsContextProvider: ContextProvider<typeof consoleLogContext>
   networkRequestsContextProvider: ContextProvider<typeof networkRequestContext>
   metadataContextProvider: ContextProvider<typeof metadataContext>
+  metadataBySessionContextProvider: ContextProvider<
+    typeof metadataBySessionContext
+  >
   commandsContextProvider: ContextProvider<typeof commandContext>
   sourcesContextProvider: ContextProvider<typeof sourceContext>
   suitesContextProvider: ContextProvider<typeof suiteContext>
@@ -72,6 +83,10 @@ export class DataManagerController implements ReactiveController {
     this.metadataContextProvider = new ContextProvider(this.#host, {
       context: metadataContext
     })
+    this.metadataBySessionContextProvider = new ContextProvider(this.#host, {
+      context: metadataBySessionContext,
+      initialValue: {}
+    })
     this.commandsContextProvider = new ContextProvider(this.#host, {
       context: commandContext,
       initialValue: []
@@ -225,9 +240,15 @@ export class DataManagerController implements ReactiveController {
       return true
     }
     if (scope === 'screencast') {
-      const { sessionId } = data as { sessionId: string }
+      const { sessionId, startTime, duration } = data as {
+        sessionId: string
+        startTime?: number
+        duration?: number
+      }
       window.dispatchEvent(
-        new CustomEvent('screencast-ready', { detail: { sessionId } })
+        new CustomEvent('screencast-ready', {
+          detail: { sessionId, startTime, duration }
+        })
       )
       return true
     }
@@ -374,10 +395,16 @@ export class DataManagerController implements ReactiveController {
   }
 
   #handleMetadataUpdate(data: Metadata) {
-    this.metadataContextProvider.setValue({
-      ...this.metadataContextProvider.value,
-      ...data
-    })
+    const { bySession, currentSessionId, active } = mergeSessionMetadata(
+      {
+        bySession: this.metadataBySessionContextProvider.value || {},
+        currentSessionId: this.#currentSessionId
+      },
+      data
+    )
+    this.#currentSessionId = currentSessionId
+    this.metadataBySessionContextProvider.setValue(bySession)
+    this.metadataContextProvider.setValue(active)
   }
 
   #handleSourcesUpdate(data: Record<string, string>) {
@@ -473,6 +500,13 @@ export class DataManagerController implements ReactiveController {
       traceFile.networkRequests || []
     )
     this.metadataContextProvider.setValue(traceFile.metadata)
+    // Trace files hold a single session; seed the per-session map so the
+    // Metadata tab shows it (keyed by sessionId when present).
+    const traceSessionId = traceFile.metadata?.sessionId
+    this.metadataBySessionContextProvider.setValue(
+      traceSessionId ? { [traceSessionId]: traceFile.metadata } : {}
+    )
+    this.#currentSessionId = traceSessionId
     this.commandsContextProvider.setValue(traceFile.commands)
     this.sourcesContextProvider.setValue(traceFile.sources)
     this.suitesContextProvider.setValue(
diff --git a/packages/app/src/controller/constants.ts b/packages/app/src/controller/constants.ts
index 92b2f56b..05168031 100644
--- a/packages/app/src/controller/constants.ts
+++ b/packages/app/src/controller/constants.ts
@@ -4,9 +4,22 @@ export const DARK_MODE_KEY = 'darkMode'
 export const MIN_WORKBENCH_HEIGHT = Math.min(300, window.innerHeight * 0.3)
 export const MIN_METATAB_WIDTH = 260
 export const RERENDER_TIMEOUT = 10
+export const SIDEBAR_DEFAULT_WIDTH = 350
+export const ACTIONS_DEFAULT_WIDTH = 360
+export const BROWSER_HEIGHT_RATIO = 1.4 / 2.4
 export const LOG_ICONS: Record<string, string> = {
-  log: '📄',
-  info: 'ℹ️',
-  warn: '⚠️',
-  error: '❌'
+  log: '›',
+  info: 'ⓘ',
+  warn: '⚠',
+  error: '✕'
+}
+
+/** Console-tab badge per log source: short label + style class. */
+export const CONSOLE_SOURCE_BADGE: Record<
+  NonNullable<ConsoleLogs['source']>,
+  { label: string; class: string }
+> = {
+  test: { label: 'TEST', class: 'b-test' },
+  terminal: { label: 'RUNNER', class: 'b-runner' },
+  browser: { label: 'PAGE', class: 'b-browser' }
 }
diff --git a/packages/app/src/controller/context.ts b/packages/app/src/controller/context.ts
index 58979892..fe2f5766 100644
--- a/packages/app/src/controller/context.ts
+++ b/packages/app/src/controller/context.ts
@@ -1,6 +1,7 @@
 import { createContext } from '@lit/context'
 import type {
   Metadata,
+  MetadataBySession,
   CommandLog,
   PreservedAttempt
 } from '@wdio/devtools-shared'
@@ -19,6 +20,9 @@ export const networkRequestContext = createContext<NetworkRequest[]>(
 export const metadataContext = createContext<Metadata>(
   Symbol('metadataContext')
 )
+export const metadataBySessionContext = createContext<MetadataBySession>(
+  Symbol('metadataBySessionContext')
+)
 export const commandContext = createContext<CommandLog[]>(
   Symbol('commandContext')
 )
diff --git a/packages/app/src/controller/contextUpdates.ts b/packages/app/src/controller/contextUpdates.ts
index a9b338b7..fb3dda4c 100644
--- a/packages/app/src/controller/contextUpdates.ts
+++ b/packages/app/src/controller/contextUpdates.ts
@@ -7,7 +7,12 @@
  * new value the ContextProvider should publish.
  */
 
-import type { CommandLog, NetworkRequest } from '@wdio/devtools-shared'
+import type {
+  CommandLog,
+  NetworkRequest,
+  Metadata,
+  MetadataBySession
+} from '@wdio/devtools-shared'
 
 /**
  * Replace an existing command entry (matched first by stable `id`, then by
@@ -67,3 +72,66 @@ export function mergeNetworkRequests(
   }
   return next
 }
+
+/** Key for metadata received before any `sessionId` is known; folded into the
+ *  first real session once it arrives so early `{ url }`/viewport aren't lost. */
+export const PENDING_SESSION_KEY = '__pending__'
+
+export interface MetadataMergeState {
+  bySession: MetadataBySession
+  /** Most-recently-seen sessionId — target for messages without their own. */
+  currentSessionId?: string
+}
+
+export interface MetadataMergeResult extends MetadataMergeState {
+  /** Merged metadata for the resolved session — what `metadataContext` publishes. */
+  active: Metadata
+}
+
+/**
+ * Merge an incoming metadata message into a per-session map, immutably.
+ *
+ * Messages carry `sessionId` on session start but not on every update (e.g. a
+ * `url` change), so updates without one attribute to the current session. A
+ * message arriving before any session is known is buffered under
+ * {@link PENDING_SESSION_KEY} and folded into the first real session.
+ */
+export function mergeSessionMetadata(
+  state: MetadataMergeState,
+  incoming: Metadata
+): MetadataMergeResult {
+  const bySession: MetadataBySession = { ...state.bySession }
+  // Boundary broadcasts can carry an empty-string sessionId; treat it as absent
+  // so it attributes to the current session instead of forging a ghost entry.
+  const incomingSessionId = incoming.sessionId || undefined
+  const sessionId =
+    incomingSessionId ?? state.currentSessionId ?? PENDING_SESSION_KEY
+
+  // Drop empty/undefined fields so a later partial message (e.g. the
+  // session-start broadcast that carries `url: ''`) can't wipe a real value
+  // already captured for the session.
+  const updates = Object.fromEntries(
+    Object.entries(incoming).filter(
+      ([, v]) => v !== undefined && v !== null && v !== ''
+    )
+  ) as Partial<Metadata>
+
+  let merged: Metadata = { ...bySession[sessionId], ...updates }
+
+  // First real session absorbs anything buffered before a sessionId existed.
+  if (
+    incomingSessionId &&
+    sessionId !== PENDING_SESSION_KEY &&
+    bySession[PENDING_SESSION_KEY]
+  ) {
+    merged = { ...bySession[PENDING_SESSION_KEY], ...merged }
+    delete bySession[PENDING_SESSION_KEY]
+  }
+
+  bySession[sessionId] = merged
+  return {
+    bySession,
+    currentSessionId: incomingSessionId ?? state.currentSessionId,
+    active: merged
+  }
+}
diff --git a/packages/app/src/core/colors.css b/packages/app/src/core/colors.css
index bcadbe94..513f3877 100644
--- a/packages/app/src/core/colors.css
+++ b/packages/app/src/core/colors.css
@@ -5,10 +5,10 @@
 
 @layer base {
   :host {
-    --vscode-font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif;
+    --vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, "Ubuntu", "Droid Sans", sans-serif;
     --vscode-font-weight: normal;
     --vscode-font-size: 13px;
-    --vscode-editor-font-family: "Droid Sans Mono", "monospace", monospace;
+    --vscode-editor-font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Droid Sans Mono", monospace;
     --vscode-editor-font-weight: normal;
     --vscode-editor-font-size: 14px;
     --vscode-foreground: #616161;
@@ -546,10 +546,10 @@
   }
 
   :host-context(.dark) {
-    --vscode-font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif;
+    --vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, "Ubuntu", "Droid Sans", sans-serif;
     --vscode-font-weight: normal;
     --vscode-font-size: 13px;
-    --vscode-editor-font-family: "Droid Sans Mono", "monospace", monospace;
+    --vscode-editor-font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Droid Sans Mono", monospace;
     --vscode-editor-font-weight: normal;
     --vscode-editor-font-size: 14px;
     --vscode-foreground: #cccccc;
@@ -566,7 +566,7 @@
     --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
     --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
     --vscode-widget-shadow: rgba(0, 0, 0, 0.36);
-    --vscode-input-background: #3c3c3c;
+    --vscode-input-background: #1c2128;
     --vscode-input-foreground: #cccccc;
     --vscode-inputOption-activeBorder: #007acc;
     --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
@@ -604,11 +604,11 @@
     --vscode-editorInfo-foreground: #3794ff;
     --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
     --vscode-sash-hoverBorder: #007fd4;
-    --vscode-editor-background: #1e1e1e;
+    --vscode-editor-background: #0d0f12;
     --vscode-editor-foreground: #d4d4d4;
     --vscode-editorStickyScroll-background: #1e1e1e;
     --vscode-editorStickyScrollHover-background: #2a2d2e;
-    --vscode-editorWidget-background: #252526;
+    --vscode-editorWidget-background: #1c2128;
     --vscode-editorWidget-foreground: #cccccc;
     --vscode-editorWidget-border: #454545;
     --vscode-quickInput-background: #252526;
@@ -852,8 +852,8 @@
     --vscode-editorGroup-dropIntoPromptBackground: #252526;
     --vscode-sideBySideEditor-horizontalBorder: #444444;
     --vscode-sideBySideEditor-verticalBorder: #444444;
-    --vscode-panel-background: #1e1e1e;
-    --vscode-panel-border: rgba(128, 128, 128, 0.35);
+    --vscode-panel-background: #0d0f12;
+    --vscode-panel-border: #262b33;
     --vscode-panelTitle-activeForeground: #e7e7e7;
     --vscode-panelTitle-inactiveForeground: rgba(231, 231, 231, 0.6);
     --vscode-panelTitle-activeBorder: #e7e7e7;
@@ -891,7 +891,7 @@
     --vscode-statusBarItem-remoteForeground: #ffffff;
     --vscode-extensionBadge-remoteBackground: #007acc;
     --vscode-extensionBadge-remoteForeground: #ffffff;
-    --vscode-sideBar-background: #252526;
+    --vscode-sideBar-background: #14171c;
     --vscode-sideBarTitle-foreground: #bbbbbb;
     --vscode-sideBar-dropBackground: rgba(83, 89, 93, 0.5);
     --vscode-sideBarSectionHeader-background: rgba(0, 0, 0, 0);
@@ -1085,3 +1085,17 @@
     --vscode-gitDecoration-submoduleResourceForeground: #8db9e2;
   }
 }
+
+/* WebdriverIO brand accent, layered over the VSCode palette for active/interactive states; switches with the .dark theme class. */
+@layer base {
+  :host {
+    --accent: #e8590c;
+    --accent-hover: #c2410c;
+    --accent-foreground: #ffffff;
+  }
+  :host-context(.dark) {
+    --accent: #ff7a3c;
+    --accent-hover: #ff5e1f;
+    --accent-foreground: #1a0d05;
+  }
+}
diff --git a/packages/app/src/core/core.css b/packages/app/src/core/core.css
index a17e1c2e..0911bcf7 100644
--- a/packages/app/src/core/core.css
+++ b/packages/app/src/core/core.css
@@ -35,3 +35,42 @@ svg {
   width: 100%;
   height: 100%;
 }
+
+button[data-draggable-id]::after {
+  content: '';
+  position: absolute;
+  background: transparent;
+  transition:
+    background 0.12s,
+    width 0.12s,
+    height 0.12s;
+  pointer-events: none;
+}
+/* The 10px handle is centered on the pane boundary (position − 5px, see
+   DragController), so the line sits on the boundary at the handle's center. */
+button[data-draggable-id].cursor-col-resize::after {
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+}
+button[data-draggable-id].cursor-row-resize::after {
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1px;
+  transform: translateY(-50%);
+}
+button[data-draggable-id]:hover::after,
+button[data-draggable-id][data-dragging='dragging']::after {
+  background: var(--accent);
+}
+button[data-draggable-id].cursor-col-resize:hover::after,
+button[data-draggable-id].cursor-col-resize[data-dragging='dragging']::after {
+  width: 2px;
+}
+button[data-draggable-id].cursor-row-resize:hover::after,
+button[data-draggable-id].cursor-row-resize[data-dragging='dragging']::after {
+  height: 2px;
+}
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index ae9c9045..89fc8c2c 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -12,6 +12,7 @@ body {
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
+  font-size: 13px;
 }
 
 @media (prefers-color-scheme: light) {
diff --git a/packages/app/src/tailwind.css b/packages/app/src/tailwind.css
index 92c82080..014c3241 100644
--- a/packages/app/src/tailwind.css
+++ b/packages/app/src/tailwind.css
@@ -14,6 +14,17 @@
   --color-chartsRed: var(--vscode-charts-red);
   --color-chartsYellow: var(--vscode-charts-yellow);
   --color-chartsBlue: var(--vscode-charts-blue);
+  --color-chartsPurple: var(--vscode-charts-purple);
   --color-input-background: var(--vscode-input-background);
   --color-debugTokenExpressionName: var(--vscode-debugTokenExpression-name);
+  --color-accent: var(--accent);
+  --color-accentHover: var(--accent-hover);
+  --color-accentForeground: var(--accent-foreground);
+
+  --text-xs: 11px;
+  --text-xs--line-height: 1.4;
+  --text-sm: 12.5px;
+  --text-sm--line-height: 1.45;
+  --text-base: 13px;
+  --text-base--line-height: 1.5;
 }
diff --git a/packages/app/src/utils/DragController.ts b/packages/app/src/utils/DragController.ts
index 6d831cb9..593d452d 100644
--- a/packages/app/src/utils/DragController.ts
+++ b/packages/app/src/utils/DragController.ts
@@ -269,7 +269,7 @@ export class DragController implements ReactiveController {
       <button
         data-draggable-id=${this.#id}
         data-dragging=${this.#state}
-        style=${styleMap({ [anchor]: `${this.#getPosition() - 3}px` })}
+        style=${styleMap({ [anchor]: `${this.#getPosition() - 5}px` })}
         class="absolute ${className}"
       ></button>
     `
diff --git a/packages/app/src/utils/network-constants.ts b/packages/app/src/utils/network-constants.ts
index aef621e5..0c6537d3 100644
--- a/packages/app/src/utils/network-constants.ts
+++ b/packages/app/src/utils/network-constants.ts
@@ -28,6 +28,22 @@ export const RESOURCE_TYPE_PATTERNS = {
   }
 } as const
 
+export const OTHER_RESOURCE_TYPE = 'Other'
+
+export type ResourceType =
+  | keyof typeof RESOURCE_TYPE_PATTERNS
+  | typeof OTHER_RESOURCE_TYPE
+
+export const TYPE_DOT_CLASS: Record<ResourceType, string> = {
+  HTML: 'type-html',
+  CSS: 'type-css',
+  JS: 'type-js',
+  Image: 'type-image',
+  Font: 'type-font',
+  Fetch: 'type-fetch',
+  Other: 'type-other'
+}
+
 /**
  * Available resource types for filtering
  */
@@ -40,3 +56,20 @@ export const RESOURCE_TYPES = [
   'Font',
   'Image'
 ] as const
+
+/** Inclusive lower bounds of the HTTP status-code ranges. */
+export const HTTP_STATUS = {
+  SUCCESS_MIN: 200,
+  REDIRECT_MIN: 300,
+  CLIENT_ERROR_MIN: 400
+} as const
+
+/** Coarse status buckets used to colour the status dot/number in the list. */
+export const STATUS_KIND = {
+  OK: 'ok',
+  REDIRECT: 'redirect',
+  ERROR: 'error',
+  PENDING: 'pending'
+} as const
+
+export type StatusKind = (typeof STATUS_KIND)[keyof typeof STATUS_KIND]
diff --git a/packages/app/src/utils/network-helpers.ts b/packages/app/src/utils/network-helpers.ts
index d3e720bd..5e22314d 100644
--- a/packages/app/src/utils/network-helpers.ts
+++ b/packages/app/src/utils/network-helpers.ts
@@ -1,4 +1,11 @@
-import { RESOURCE_TYPE_PATTERNS } from './network-constants.js'
+import {
+  RESOURCE_TYPE_PATTERNS,
+  OTHER_RESOURCE_TYPE,
+  HTTP_STATUS,
+  STATUS_KIND,
+  type StatusKind,
+  type ResourceType
+} from './network-constants.js'
 
 /**
  * Format bytes to human-readable format
@@ -33,41 +40,68 @@ export function formatTime(ms?: number): string {
 }
 
 /**
- * Get CSS class based on HTTP status code
+ * Bucket an HTTP status into a coarse {@link StatusKind}. The single source of
+ * truth for status ranges — both the dot colour and the text colour derive
+ * from it.
  */
-export function getStatusClass(status?: number): string {
-  if (!status) {
-    return 'text-gray-500'
+export function statusKind(status?: number, hasError?: boolean): StatusKind {
+  if (hasError) {
+    return STATUS_KIND.ERROR
+  }
+  if (typeof status !== 'number') {
+    return STATUS_KIND.PENDING
   }
-  if (status >= 200 && status < 300) {
-    return 'text-green-500'
+  if (status >= HTTP_STATUS.SUCCESS_MIN && status < HTTP_STATUS.REDIRECT_MIN) {
+    return STATUS_KIND.OK
   }
-  if (status >= 300 && status < 400) {
-    return 'text-yellow-500'
+  if (
+    status >= HTTP_STATUS.REDIRECT_MIN &&
+    status < HTTP_STATUS.CLIENT_ERROR_MIN
+  ) {
+    return STATUS_KIND.REDIRECT
   }
-  if (status >= 400) {
-    return 'text-red-500'
+  if (status >= HTTP_STATUS.CLIENT_ERROR_MIN) {
+    return STATUS_KIND.ERROR
   }
-  return 'text-gray-500'
+  return STATUS_KIND.PENDING
+}
+
+const STATUS_TEXT_CLASS: Record<StatusKind, string> = {
+  [STATUS_KIND.OK]: 'text-green-500',
+  [STATUS_KIND.REDIRECT]: 'text-yellow-500',
+  [STATUS_KIND.ERROR]: 'text-red-500',
+  [STATUS_KIND.PENDING]: 'text-gray-500'
+}
+
+/**
+ * Tailwind text-colour class for an HTTP status code — derived from
+ * {@link statusKind} so the thresholds live in one place.
+ */
+export function getStatusClass(status?: number): string {
+  return STATUS_TEXT_CLASS[statusKind(status)]
 }
 
 /**
  * Determine resource type from network request
  */
-export function getResourceType(request: NetworkRequest): string {
+export function getResourceType(request: NetworkRequest): ResourceType {
   const url = request.url.toLowerCase()
   const contentType =
     request.responseHeaders?.['content-type']?.toLowerCase() || ''
+  const entries = Object.entries(RESOURCE_TYPE_PATTERNS) as [
+    keyof typeof RESOURCE_TYPE_PATTERNS,
+    (typeof RESOURCE_TYPE_PATTERNS)[keyof typeof RESOURCE_TYPE_PATTERNS]
+  ][]
 
   // Check by content-type first
-  for (const [type, patterns] of Object.entries(RESOURCE_TYPE_PATTERNS)) {
+  for (const [type, patterns] of entries) {
     if (patterns.contentTypes.some((ct) => contentType.includes(ct))) {
       return type
     }
   }
 
   // Fallback to URL extension
-  for (const [type, patterns] of Object.entries(RESOURCE_TYPE_PATTERNS)) {
+  for (const [type, patterns] of entries) {
     if (patterns.extensions.some((ext) => url.endsWith(ext))) {
       return type
     }
@@ -78,7 +112,17 @@ export function getResourceType(request: NetworkRequest): string {
     return 'Fetch'
   }
 
-  return 'Other'
+  return OTHER_RESOURCE_TYPE
+}
+
+/** Short content-type label for a request (response content-type, then the
+ *  captured `type`, else a dash placeholder). */
+export function contentType(request: NetworkRequest): string {
+  return (
+    request.responseHeaders?.['content-type']?.split(';')[0] ||
+    request.type ||
+    '-'
+  )
 }
 
 /**
diff --git a/packages/app/src/vite-env.d.ts b/packages/app/src/vite-env.d.ts
index 27bbbdf0..c8b0a9f0 100644
--- a/packages/app/src/vite-env.d.ts
+++ b/packages/app/src/vite-env.d.ts
@@ -10,10 +10,16 @@ interface GlobalEventHandlersEventMap {
   'app-mutation-highlight': CustomEvent<TraceMutation | null>
   'app-mutation-select': CustomEvent<TraceMutation>
   'app-source-highlight': CustomEvent<string>
+  'app-source-track': CustomEvent<{ callSource: string }>
+  'app-screencast-progress': CustomEvent<{ time: number }>
 
   'app-test-filter': CustomEvent<
     import('./components/sidebar/filter').DevtoolsSidebarFilter
   >
+  'app-status-filter': CustomEvent<
+    import('./components/sidebar/types').StatusFilterDetail
+  >
+  'app-test-select': CustomEvent<string>
   'app-test-run': CustomEvent<
     import('./components/sidebar/test-suite').TestRunDetail
   >
diff --git a/packages/app/tests/active-entry.test.ts b/packages/app/tests/active-entry.test.ts
new file mode 100644
index 00000000..9dcf416f
--- /dev/null
+++ b/packages/app/tests/active-entry.test.ts
@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+
+import { activeTimestampAt } from '../src/components/workbench/active-entry.js'
+
+describe('activeTimestampAt', () => {
+  const stamps = [100, 200, 300, 400]
+
+  it('returns undefined before the first action', () => {
+    expect(activeTimestampAt(stamps, 50)).toBeUndefined()
+  })
+
+  it('returns the action exactly at the playback time', () => {
+    expect(activeTimestampAt(stamps, 200)).toBe(200)
+  })
+
+  it('returns the latest action at or before the playback time', () => {
+    expect(activeTimestampAt(stamps, 250)).toBe(200)
+    expect(activeTimestampAt(stamps, 399)).toBe(300)
+  })
+
+  it('clamps to the last action once playback passes it', () => {
+    expect(activeTimestampAt(stamps, 999)).toBe(400)
+  })
+
+  it('returns undefined for an empty timeline', () => {
+    expect(activeTimestampAt([], 100)).toBeUndefined()
+  })
+})
diff --git a/packages/app/tests/category.test.ts b/packages/app/tests/category.test.ts
new file mode 100644
index 00000000..046b7752
--- /dev/null
+++ b/packages/app/tests/category.test.ts
@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest'
+
+import {
+  commandCategory,
+  commandIcon
+} from '../src/components/workbench/actionItems/category.js'
+
+describe('commandCategory', () => {
+  it('classifies navigation commands', () => {
+    expect(commandCategory('url')).toBe('navigation')
+    expect(commandCategory('reloadSession')).toBe('navigation')
+    expect(commandCategory('back')).toBe('navigation')
+  })
+
+  it('classifies input commands', () => {
+    expect(commandCategory('click')).toBe('input')
+    expect(commandCategory('setValue')).toBe('input')
+    expect(commandCategory('dragAndDrop')).toBe('input')
+  })
+
+  it('classifies assertion/wait commands', () => {
+    expect(commandCategory('isExisting')).toBe('assertion')
+    expect(commandCategory('waitForElementVisible')).toBe('assertion')
+    expect(commandCategory('waitUntil')).toBe('assertion')
+  })
+
+  it('classifies query commands', () => {
+    expect(commandCategory('$')).toBe('query')
+    expect(commandCategory('getText')).toBe('query')
+    expect(commandCategory('getAttribute')).toBe('query')
+  })
+
+  it('falls back to other for unknown or misc commands', () => {
+    expect(commandCategory('execute')).toBe('other')
+    expect(commandCategory('pause')).toBe('other')
+    expect(commandCategory('somethingNew')).toBe('other')
+  })
+})
+
+describe('commandIcon', () => {
+  it('distinguishes icons within the query category', () => {
+    expect(commandIcon('$')).toBe('select')
+    expect(commandIcon('getText')).toBe('read')
+  })
+
+  it('distinguishes type vs click within input', () => {
+    expect(commandIcon('setValue')).toBe('type')
+    expect(commandIcon('click')).toBe('click')
+  })
+
+  it('maps reload separately from other navigation', () => {
+    expect(commandIcon('reloadSession')).toBe('reload')
+    expect(commandIcon('url')).toBe('navigate')
+  })
+
+  it('maps assertions and falls back to execute', () => {
+    expect(commandIcon('waitForElementVisible')).toBe('assert')
+    expect(commandIcon('execute')).toBe('execute')
+    expect(commandIcon('unknownThing')).toBe('execute')
+  })
+})
diff --git a/packages/app/tests/console-filter.test.ts b/packages/app/tests/console-filter.test.ts
new file mode 100644
index 00000000..382d7201
--- /dev/null
+++ b/packages/app/tests/console-filter.test.ts
@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest'
+import {
+  filterConsoleLogs,
+  formatConsoleArgs,
+  stripAnsi
+} from '../src/components/workbench/console-filter.js'
+
+const ESC = ''
+
+function log(
+  type: ConsoleLogs['type'],
+  args: unknown[],
+  source?: ConsoleLogs['source']
+): ConsoleLogs {
+  return { type, args, timestamp: 0, source }
+}
+
+describe('stripAnsi', () => {
+  it('removes SGR color escape sequences', () => {
+    expect(stripAnsi(`${ESC}[90m2026-06-16${ESC}[39m INFO`)).toBe(
+      '2026-06-16 INFO'
+    )
+  })
+
+  it('leaves plain text untouched', () => {
+    expect(stripAnsi('no codes here')).toBe('no codes here')
+  })
+})
+
+describe('formatConsoleArgs', () => {
+  it('joins string args with a space', () => {
+    expect(formatConsoleArgs(['a', 'b'])).toBe('a b')
+  })
+
+  it('strips ANSI codes from logger output', () => {
+    expect(formatConsoleArgs([`${ESC}[31mError${ESC}[39m`])).toBe('Error')
+  })
+
+  it('pretty-prints non-string args', () => {
+    expect(formatConsoleArgs([{ x: 1 }])).toBe('{\n  "x": 1\n}')
+  })
+
+  it('falls back to String() for non-arrays', () => {
+    expect(formatConsoleArgs(42)).toBe('42')
+  })
+})
+
+describe('filterConsoleLogs', () => {
+  const logs = [
+    log('log', ['hello world']),
+    log('warn', ['deprecated API']),
+    log('error', ['boom failed']),
+    log('info', ['connected'])
+  ]
+
+  it('returns everything for level "all" and empty search', () => {
+    expect(filterConsoleLogs(logs, 'all', '')).toHaveLength(4)
+  })
+
+  it('filters by a single level', () => {
+    const errs = filterConsoleLogs(logs, 'error', '')
+    expect(errs).toHaveLength(1)
+    expect(errs[0].args).toEqual(['boom failed'])
+  })
+
+  it('treats a missing type as "log"', () => {
+    const untyped = [{ args: ['x'], timestamp: 0 } as unknown as ConsoleLogs]
+    expect(filterConsoleLogs(untyped, 'log', '')).toHaveLength(1)
+  })
+
+  it('matches search case-insensitively against the message', () => {
+    const r = filterConsoleLogs(logs, 'all', 'WORLD')
+    expect(r).toHaveLength(1)
+    expect(r[0].args).toEqual(['hello world'])
+  })
+
+  it('combines level and search (both must match)', () => {
+    expect(filterConsoleLogs(logs, 'warn', 'boom')).toHaveLength(0)
+    expect(filterConsoleLogs(logs, 'warn', 'deprecated')).toHaveLength(1)
+  })
+
+  it('ignores leading/trailing whitespace in the search', () => {
+    expect(filterConsoleLogs(logs, 'all', '   ')).toHaveLength(4)
+  })
+})
diff --git a/packages/app/tests/contextUpdates.test.ts b/packages/app/tests/contextUpdates.test.ts
index 6389fb8a..641acd55 100644
--- a/packages/app/tests/contextUpdates.test.ts
+++ b/packages/app/tests/contextUpdates.test.ts
@@ -1,8 +1,14 @@
 import { describe, expect, it } from 'vitest'
-import type { CommandLog, NetworkRequest } from '@wdio/devtools-shared'
+import type {
+  CommandLog,
+  NetworkRequest,
+  Metadata
+} from '@wdio/devtools-shared'
 import {
   mergeNetworkRequests,
-  replaceCommand
+  replaceCommand,
+  mergeSessionMetadata,
+  PENDING_SESSION_KEY
 } from '../src/controller/contextUpdates.js'
 
 function cmd(
@@ -90,3 +96,111 @@ describe('mergeNetworkRequests', () => {
     expect(current).toHaveLength(1)
   })
 })
+
+const meta = (m: Partial<Metadata>): Metadata => m as Metadata
+
+describe('mergeSessionMetadata', () => {
+  it('creates an entry for a message carrying a sessionId', () => {
+    const r = mergeSessionMetadata(
+      { bySession: {} },
+      meta({ sessionId: 's1', url: '/a' })
+    )
+    expect(r.currentSessionId).toBe('s1')
+    expect(r.bySession).toEqual({ s1: { sessionId: 's1', url: '/a' } })
+    expect(r.active).toEqual({ sessionId: 's1', url: '/a' })
+  })
+
+  it('merges a sessionId-less update into the current session', () => {
+    const first = mergeSessionMetadata(
+      { bySession: {} },
+      meta({
+        sessionId: 's1',
+        url: '/a',
+        capabilities: { browserName: 'chrome' }
+      })
+    )
+    const next = mergeSessionMetadata(first, meta({ url: '/secure' }))
+    // url updates, capabilities preserved (the overwrite regression)
+    expect(next.bySession.s1).toEqual({
+      sessionId: 's1',
+      url: '/secure',
+      capabilities: { browserName: 'chrome' }
+    })
+    expect(next.currentSessionId).toBe('s1')
+  })
+
+  it('keeps a second session independent of the first', () => {
+    const first = mergeSessionMetadata(
+      { bySession: {} },
+      meta({ sessionId: 's1', url: '/a' })
+    )
+    const second = mergeSessionMetadata(
+      first,
+      meta({ sessionId: 's2', url: '/b' })
+    )
+    expect(second.bySession.s1).toEqual({ sessionId: 's1', url: '/a' })
+    expect(second.bySession.s2).toEqual({ sessionId: 's2', url: '/b' })
+    expect(second.active).toEqual({ sessionId: 's2', url: '/b' })
+  })
+
+  it('buffers under PENDING_SESSION_KEY then folds into the first session', () => {
+    const pending = mergeSessionMetadata(
+      { bySession: {} },
+      meta({ url: '/early' })
+    )
+    expect(pending.bySession[PENDING_SESSION_KEY]).toEqual({ url: '/early' })
+    expect(pending.currentSessionId).toBeUndefined()
+
+    const resolved = mergeSessionMetadata(
+      pending,
+      meta({ sessionId: 's1', capabilities: { browserName: 'chrome' } })
+    )
+    expect(resolved.bySession[PENDING_SESSION_KEY]).toBeUndefined()
+    expect(resolved.bySession.s1).toEqual({
+      url: '/early',
+      sessionId: 's1',
+      capabilities: { browserName: 'chrome' }
+    })
+  })
+
+  it('does not let an empty url clobber a real one (re-broadcast)', () => {
+    const withUrl = mergeSessionMetadata(
+      { bySession: {} },
+      meta({ sessionId: 's1', url: 'https://example.com' })
+    )
+    // session-start re-broadcast carries url: '' — must not wipe the real url
+    const after = mergeSessionMetadata(
+      withUrl,
+      meta({
+        sessionId: 's1',
+        url: '',
+        capabilities: { browserName: 'chrome' }
+      })
+    )
+    expect(after.bySession.s1.url).toBe('https://example.com')
+    expect(after.bySession.s1.capabilities).toEqual({ browserName: 'chrome' })
+  })
+
+  it('treats an empty-string sessionId as absent (no ghost entry)', () => {
+    const first = mergeSessionMetadata(
+      { bySession: {} },
+      meta({ sessionId: 's1', url: 'https://a' })
+    )
+    // boundary broadcast carries sessionId: '' — must attribute to current,
+    // not forge a '' key
+    const after = mergeSessionMetadata(first, meta({ sessionId: '' }))
+    expect(Object.keys(after.bySession)).toEqual(['s1'])
+    expect(after.currentSessionId).toBe('s1')
+    expect(after.bySession.s1.url).toBe('https://a')
+  })
+
+  it('does not mutate the input map', () => {
+    const state = { bySession: { s1: meta({ sessionId: 's1', url: '/a' }) } }
+    const next = mergeSessionMetadata(
+      state,
+      meta({ sessionId: 's2', url: '/b' })
+    )
+    expect(next.bySession).not.toBe(state.bySession)
+    expect(Object.keys(state.bySession)).toEqual(['s1'])
+  })
+})
diff --git a/packages/app/tests/duration.test.ts b/packages/app/tests/duration.test.ts
new file mode 100644
index 00000000..c32f3bc1
--- /dev/null
+++ b/packages/app/tests/duration.test.ts
@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest'
+
+import {
+  formatDuration,
+  durationHeat,
+  stepDurations
+} from '../src/components/workbench/actionItems/duration.js'
+
+describe('formatDuration', () => {
+  it('shows milliseconds under a second', () => {
+    expect(formatDuration(0)).toBe('0ms')
+    expect(formatDuration(276)).toBe('276ms')
+    expect(formatDuration(1000)).toBe('1000ms')
+  })
+
+  it('shows seconds with two decimals under a minute', () => {
+    expect(formatDuration(1430)).toBe('1.43s')
+    expect(formatDuration(10760)).toBe('10.76s')
+  })
+
+  it('shows minutes and seconds above a minute', () => {
+    expect(formatDuration(60001)).toBe('1m 0s')
+    expect(formatDuration(150000)).toBe('2m 30s')
+  })
+})
+
+describe('durationHeat', () => {
+  it('is fast below 500ms', () => {
+    expect(durationHeat(0)).toBe('fast')
+    expect(durationHeat(499)).toBe('fast')
+  })
+
+  it('is mid from 500ms up to 2s', () => {
+    expect(durationHeat(500)).toBe('mid')
+    expect(durationHeat(1999)).toBe('mid')
+  })
+
+  it('is slow at 2s and above', () => {
+    expect(durationHeat(2000)).toBe('slow')
+    expect(durationHeat(10760)).toBe('slow')
+  })
+})
+
+describe('stepDurations', () => {
+  it('uses the gap to the next entry for all but the last', () => {
+    expect(stepDurations([0, 100, 350, 1350])).toEqual([100, 250, 1000, 1000])
+  })
+
+  it('falls back to the previous gap for the final entry so it is never blank', () => {
+    // last entry (1350) has no next → reuses the prior gap (1350 - 350 = 1000)
+    const out = stepDurations([0, 350, 1350])
+    expect(out[out.length - 1]).toBe(1000)
+  })
+
+  it('returns undefined for a single lone entry', () => {
+    expect(stepDurations([42])).toEqual([undefined])
+  })
+
+  it('handles an empty timeline', () => {
+    expect(stepDurations([])).toEqual([])
+  })
+
+  it('keeps 0ms gaps for same-timestamp commands', () => {
+    expect(stepDurations([0, 0, 0, 500])).toEqual([0, 0, 500, 500])
+  })
+})
diff --git a/packages/app/tests/network-helpers.test.ts b/packages/app/tests/network-helpers.test.ts
new file mode 100644
index 00000000..2dc22d76
--- /dev/null
+++ b/packages/app/tests/network-helpers.test.ts
@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+
+import { statusKind, getStatusClass } from '../src/utils/network-helpers.js'
+import { STATUS_KIND } from '../src/utils/network-constants.js'
+
+describe('statusKind', () => {
+  it('buckets 2xx as ok', () => {
+    expect(statusKind(200)).toBe(STATUS_KIND.OK)
+    expect(statusKind(204)).toBe(STATUS_KIND.OK)
+  })
+
+  it('buckets 3xx as redirect', () => {
+    expect(statusKind(301)).toBe(STATUS_KIND.REDIRECT)
+    expect(statusKind(304)).toBe(STATUS_KIND.REDIRECT)
+  })
+
+  it('buckets 4xx/5xx as error', () => {
+    expect(statusKind(404)).toBe(STATUS_KIND.ERROR)
+    expect(statusKind(500)).toBe(STATUS_KIND.ERROR)
+  })
+
+  it('treats a missing status as pending', () => {
+    expect(statusKind(undefined)).toBe(STATUS_KIND.PENDING)
+  })
+
+  it('treats an error flag as error regardless of status', () => {
+    expect(statusKind(200, true)).toBe(STATUS_KIND.ERROR)
+    expect(statusKind(undefined, true)).toBe(STATUS_KIND.ERROR)
+  })
+})
+
+describe('getStatusClass', () => {
+  it('derives the text colour from the status bucket', () => {
+    expect(getStatusClass(200)).toBe('text-green-500')
+    expect(getStatusClass(302)).toBe('text-yellow-500')
+    expect(getStatusClass(404)).toBe('text-red-500')
+    expect(getStatusClass(undefined)).toBe('text-gray-500')
+  })
+})
diff --git a/packages/app/tests/scrubber.test.ts b/packages/app/tests/scrubber.test.ts
new file mode 100644
index 00000000..f1e00509
--- /dev/null
+++ b/packages/app/tests/scrubber.test.ts
@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest'
+import type { CommandLog } from '@wdio/devtools-shared'
+
+import {
+  computeMarkers,
+  formatClock
+} from '../src/components/browser/scrubber.js'
+
+const cmd = (command: string, ts: number): CommandLog => ({
+  command,
+  args: [],
+  timestamp: ts
+})
+
+describe('formatClock', () => {
+  it('formats seconds as m:ss with zero-padded seconds', () => {
+    expect(formatClock(3)).toBe('0:03')
+    expect(formatClock(9)).toBe('0:09')
+    expect(formatClock(75)).toBe('1:15')
+    expect(formatClock(600)).toBe('10:00')
+  })
+
+  it('floors fractional seconds', () => {
+    expect(formatClock(3.9)).toBe('0:03')
+  })
+
+  it('clamps non-finite and negative values to 0:00', () => {
+    expect(formatClock(NaN)).toBe('0:00')
+    expect(formatClock(-5)).toBe('0:00')
+    expect(formatClock(Infinity)).toBe('0:00')
+  })
+})
+
+describe('computeMarkers', () => {
+  it('maps each command to its fraction of the recording window', () => {
+    const start = 1000
+    const duration = 1000
+    const markers = computeMarkers(
+      [cmd('url', 1000), cmd('click', 1500), cmd('getText', 2000)],
+      start,
+      duration
+    )
+    expect(markers.map((m) => m.fraction)).toEqual([0, 0.5, 1])
+    expect(markers.map((m) => m.category)).toEqual([
+      'navigation',
+      'input',
+      'query'
+    ])
+    expect(markers.map((m) => m.label)).toEqual(['url', 'click', 'getText'])
+  })
+
+  it('prefers command.startTime over timestamp when present', () => {
+    const markers = computeMarkers(
+      [{ command: 'click', args: [], timestamp: 9999, startTime: 1500 }],
+      1000,
+      1000
+    )
+    expect(markers[0].fraction).toBe(0.5)
+  })
+
+  it('drops commands outside the recording window', () => {
+    const markers = computeMarkers(
+      [cmd('url', 500), cmd('click', 1500), cmd('getText', 5000)],
+      1000,
+      1000
+    )
+    expect(markers.map((m) => m.label)).toEqual(['click'])
+  })
+
+  it('returns no markers when duration is zero or negative', () => {
+    expect(computeMarkers([cmd('url', 1000)], 1000, 0)).toEqual([])
+    expect(computeMarkers([cmd('url', 1000)], 1000, -1)).toEqual([])
+  })
+
+  it('skips commands with a non-numeric timestamp', () => {
+    const markers = computeMarkers(
+      [{ command: 'url', args: [] } as unknown as CommandLog],
+      1000,
+      1000
+    )
+    expect(markers).toEqual([])
+  })
+})
diff --git a/packages/app/tests/suite-summary.test.ts b/packages/app/tests/suite-summary.test.ts
new file mode 100644
index 00000000..a36e4c12
--- /dev/null
+++ b/packages/app/tests/suite-summary.test.ts
@@ -0,0 +1,146 @@
+import { describe, it, expect } from 'vitest'
+
+import {
+  computeSuiteSummary,
+  deriveRunStatus,
+  type SuiteSummary
+} from '../src/components/sidebar/suite-summary.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',
+    ...overrides
+  }) as never as TestStatsFragment
+
+const suite = (
+  uid: string,
+  overrides: Record<string, unknown> = {}
+): SuiteStatsFragment =>
+  ({
+    uid,
+    title: uid,
+    state: 'passed',
+    tests: [],
+    suites: [],
+    ...overrides
+  }) as never as SuiteStatsFragment
+
+const chunks = (...suites: SuiteStatsFragment[]): SuiteChunks =>
+  suites.map((s) => ({ [s.uid]: s }))
+
+const summary = (overrides: Partial<SuiteSummary>): SuiteSummary => ({
+  passed: 0,
+  failed: 0,
+  running: 0,
+  skipped: 0,
+  pending: 0,
+  total: 0,
+  ...overrides
+})
+
+describe('computeSuiteSummary', () => {
+  it('returns an empty summary for undefined input', () => {
+    expect(computeSuiteSummary(undefined)).toEqual(summary({}))
+  })
+
+  it('counts leaf tests by state across nested suites', () => {
+    const input = chunks(
+      suite('root', {
+        tests: [test('t1'), test('t2', { state: 'failed' })],
+        suites: [
+          suite('child', {
+            tests: [
+              test('c1', { state: 'running' }),
+              test('c2', { state: 'skipped' }),
+              test('c3', { state: 'pending' })
+            ]
+          })
+        ]
+      })
+    )
+    expect(computeSuiteSummary(input)).toEqual(
+      summary({
+        passed: 1,
+        failed: 1,
+        running: 1,
+        skipped: 1,
+        pending: 1,
+        total: 5
+      })
+    )
+  })
+
+  it('treats missing/undefined state as pending', () => {
+    const input = chunks(
+      suite('root', { tests: [test('t1', { state: undefined })] })
+    )
+    expect(computeSuiteSummary(input)).toEqual(
+      summary({ pending: 1, total: 1 })
+    )
+  })
+
+  it('does not double-count nested suites present in the flat registry', () => {
+    const child = suite('child', { parent: 'root', tests: [test('c1')] })
+    const root = suite('root', { tests: [test('t1')], suites: [child] })
+    // The registry holds both root and child; child carries a parent so it is
+    // only counted via recursion from root, not as its own root.
+    const input: SuiteChunks = [{ root }, { child }]
+    expect(computeSuiteSummary(input)).toEqual(summary({ passed: 2, total: 2 }))
+  })
+
+  it('skips undefined registry entries without throwing', () => {
+    const input = chunks(suite('root', { tests: [test('t1')] }))
+    ;(input[0] as Record<string, unknown>)['ghost'] = undefined
+    expect(computeSuiteSummary(input)).toEqual(summary({ passed: 1, total: 1 }))
+  })
+})
+
+describe('deriveRunStatus', () => {
+  it('is idle when there are no tests', () => {
+    expect(deriveRunStatus(summary({}))).toBe('idle')
+  })
+
+  it('is idle when every test is still pending (never run)', () => {
+    expect(deriveRunStatus(summary({ pending: 3, total: 3 }))).toBe('idle')
+  })
+
+  it('is running when a test is running', () => {
+    expect(deriveRunStatus(summary({ running: 1, passed: 2, total: 3 }))).toBe(
+      'running'
+    )
+  })
+
+  it('is running when terminal results coexist with pending ones', () => {
+    expect(deriveRunStatus(summary({ passed: 2, pending: 1, total: 3 }))).toBe(
+      'running'
+    )
+  })
+
+  it('is failed when a finished run has any failure', () => {
+    expect(deriveRunStatus(summary({ passed: 2, failed: 1, total: 3 }))).toBe(
+      'failed'
+    )
+  })
+
+  it('is passed when every test finished without failure', () => {
+    expect(deriveRunStatus(summary({ passed: 3, total: 3 }))).toBe('passed')
+  })
+
+  it('prefers running over a stale failure count from a prior run', () => {
+    expect(deriveRunStatus(summary({ failed: 1, running: 1, total: 2 }))).toBe(
+      'running'
+    )
+  })
+})
diff --git a/packages/app/tests/tree-filter.test.ts b/packages/app/tests/tree-filter.test.ts
new file mode 100644
index 00000000..0ed6d912
--- /dev/null
+++ b/packages/app/tests/tree-filter.test.ts
@@ -0,0 +1,87 @@
+import { describe, it, expect } from 'vitest'
+
+import {
+  getSearchableLabel,
+  entryPassesFilter
+} from '../src/components/sidebar/tree-filter.js'
+import type { TestEntry } from '../src/components/sidebar/types.js'
+
+const entry = (overrides: Partial<TestEntry> = {}): TestEntry => ({
+  uid: overrides.label ?? 'e',
+  label: 'entry',
+  type: 'test',
+  children: [],
+  ...overrides
+})
+
+describe('getSearchableLabel', () => {
+  it('returns a leaf label', () => {
+    expect(getSearchableLabel(entry({ label: 'login works' }))).toEqual([
+      'login works'
+    ])
+  })
+
+  it('flattens descendant labels for a suite', () => {
+    const tree = entry({
+      label: 'suite',
+      type: 'suite',
+      children: [
+        entry({ label: 'a' }),
+        entry({
+          label: 'nested',
+          type: 'suite',
+          children: [entry({ label: 'b' })]
+        })
+      ]
+    })
+    expect(getSearchableLabel(tree)).toEqual(['a', 'b'])
+  })
+})
+
+describe('entryPassesFilter', () => {
+  it('passes everything with no query and no status', () => {
+    expect(entryPassesFilter(entry({ state: 'failed' }), '', null)).toBe(true)
+  })
+
+  it('matches a leaf by case-insensitive query against its label', () => {
+    const leaf = entry({ label: 'Secure Login' })
+    expect(entryPassesFilter(leaf, 'secure', null)).toBe(true)
+    expect(entryPassesFilter(leaf, 'logout', null)).toBe(false)
+  })
+
+  it('matches a suite by any descendant label', () => {
+    const suite = entry({
+      label: 'suite',
+      type: 'suite',
+      children: [entry({ label: 'checkout flow' })]
+    })
+    expect(entryPassesFilter(suite, 'checkout', null)).toBe(true)
+  })
+
+  it('keeps only leaves whose state matches the status filter', () => {
+    expect(entryPassesFilter(entry({ state: 'passed' }), '', 'passed')).toBe(
+      true
+    )
+    expect(entryPassesFilter(entry({ state: 'failed' }), '', 'passed')).toBe(
+      false
+    )
+  })
+
+  it('keeps a suite that still has children so matching cases stay reachable', () => {
+    const suite = entry({
+      label: 'suite',
+      type: 'suite',
+      state: 'failed',
+      children: [entry({ label: 'passing case', state: 'passed' })]
+    })
+    // The suite itself is failed, but it survives because a child remained.
+    expect(entryPassesFilter(suite, '', 'passed')).toBe(true)
+  })
+
+  it('combines query and status — both must hold for a leaf', () => {
+    const leaf = entry({ label: 'login', state: 'passed' })
+    expect(entryPassesFilter(leaf, 'login', 'passed')).toBe(true)
+    expect(entryPassesFilter(leaf, 'login', 'failed')).toBe(false)
+    expect(entryPassesFilter(leaf, 'logout', 'passed')).toBe(false)
+  })
+})
diff --git a/packages/app/tests/url-at-timestamp.test.ts b/packages/app/tests/url-at-timestamp.test.ts
new file mode 100644
index 00000000..ca67fca6
--- /dev/null
+++ b/packages/app/tests/url-at-timestamp.test.ts
@@ -0,0 +1,89 @@
+import { describe, expect, it } from 'vitest'
+import type { CommandLog, TraceMutation } from '@wdio/devtools-shared'
+import {
+  urlAtTimestamp,
+  commandPageUrl
+} from '../src/components/browser/url-at-timestamp.js'
+
+function nav(timestamp: number, url: string): TraceMutation {
+  return {
+    type: 'childList',
+    addedNodes: [],
+    removedNodes: [],
+    timestamp,
+    url
+  }
+}
+
+function plain(timestamp: number): TraceMutation {
+  return { type: 'attributes', addedNodes: [], removedNodes: [], timestamp }
+}
+
+describe('urlAtTimestamp', () => {
+  const mutations = [
+    nav(100, 'https://a.com'),
+    plain(150),
+    nav(200, 'https://b.com'),
+    plain(250)
+  ]
+
+  it('returns the navigation active at the given time', () => {
+    expect(urlAtTimestamp(mutations, 175)).toBe('https://a.com')
+    expect(urlAtTimestamp(mutations, 230)).toBe('https://b.com')
+  })
+
+  it('includes a navigation that lands exactly on the timestamp', () => {
+    expect(urlAtTimestamp(mutations, 200)).toBe('https://b.com')
+  })
+
+  it('returns undefined before any navigation', () => {
+    expect(urlAtTimestamp(mutations, 50)).toBeUndefined()
+  })
+
+  it('ignores mutations without a url', () => {
+    expect(urlAtTimestamp([plain(100), plain(200)], 300)).toBeUndefined()
+  })
+
+  it('picks the latest navigation regardless of array order', () => {
+    const unordered = [nav(200, 'https://b.com'), nav(100, 'https://a.com')]
+    expect(urlAtTimestamp(unordered, 250)).toBe('https://b.com')
+  })
+})
+
+function cmd(command: string, timestamp: number, args: unknown[]): CommandLog {
+  return { command, args, timestamp }
+}
+
+describe('commandPageUrl', () => {
+  const urlA = cmd('url', 100, ['https://a.com'])
+  const urlB = cmd('url', 300, ['https://b.com'])
+  const typeOnB = cmd('setValue', 400, ['#q', 'hello'])
+  const commands = [urlA, urlB, typeOnB]
+
+  it('a navigation command resolves to its own destination', () => {
+    expect(commandPageUrl(urlB, commands, [])).toBe('https://b.com')
+  })
+
+  it('a later command resolves to the most recent navigation before it', () => {
+    // setValue ran on page B even when B was never captured as a mutation
+    expect(commandPageUrl(typeOnB, commands, [])).toBe('https://b.com')
+  })
+
+  it('a command before any later navigation keeps the earlier page', () => {
+    const typeOnA = cmd('setValue', 200, ['#q', 'hi'])
+    expect(commandPageUrl(typeOnA, [urlA, urlB, typeOnA], [])).toBe(
+      'https://a.com'
+    )
+  })
+
+  it('falls back to the mutation stream when no navigation command exists', () => {
+    const getText = cmd('getText', 200, ['#flash'])
+    const mutations = [nav(100, 'https://a.com')]
+    expect(commandPageUrl(getText, [getText], mutations)).toBe('https://a.com')
+  })
+
+  it('ignores non-URL navigation args (e.g. back/switchWindow)', () => {
+    const back = cmd('back', 500, [])
+    expect(commandPageUrl(back, [urlB, back], [])).toBe('https://b.com')
+  })
+})
diff --git a/packages/backend/src/baseline/command-attribution.ts b/packages/backend/src/baseline/command-attribution.ts
new file mode 100644
index 00000000..f7da7b76
--- /dev/null
+++ b/packages/backend/src/baseline/command-attribution.ts
@@ -0,0 +1,146 @@
+/**
+ * Attribute captured commands to a test/suite node for Preserve & Rerun.
+ *
+ * Adapters can't always tag a command with the right `testUid` — Nightwatch's
+ * before/after hooks fire once per spec file, so every test after the first in
+ * a multi-test file inherits the first test's uid. Source location is reliable
+ * instead: a command's call site (`callSource` line) sits inside exactly one
+ * `it()` block. Commands issued indirectly (e.g. an assertion's internal
+ * `getText`) have no resolvable call site and fall back to the node's time
+ * window, which keeps them with the test they ran in.
+ *
+ * Pure functions over the accumulator's node map + command list, so the
+ * attribution can be unit-tested without the store.
+ */
+import type { CommandLogLike, TimeWindowNode } from './types.js'
+
+type SourceRange = { file: string; start: number; end: number }
+type TimeWindow = { start: number; end: number }
+type NodeMap = Map<string, TimeWindowNode>
+
+/** Split a `callSource` (`file:line` or `file:line:col`) into file + line. */
+export function lineOf(
+  callSource?: string
+): { file: string; line: number } | undefined {
+  if (!callSource) {
+    return undefined
+  }
+  const m = callSource.match(/:(\d+)(?::\d+)?$/)
+  if (!m || m.index === undefined) {
+    return undefined
+  }
+  return { file: callSource.slice(0, m.index), line: Number(m[1]) }
+}
+
+/** Sorted declaration lines of every test node in `file` — bounds each test's
+ *  source range at the next test's line. */
+function testLinesInFile(nodes: NodeMap, file: string): number[] {
+  const lines = new Set<number>()
+  for (const n of nodes.values()) {
+    if (n.kind !== 'test') {
+      continue
+    }
+    const loc = lineOf(n.callSource)
+    if (loc && loc.file === file) {
+      lines.add(loc.line)
+    }
+  }
+  return [...lines].sort((a, b) => a - b)
+}
+
+/** Source range [it()-line, next-test-line) for a single test node. */
+function rangeOf(
+  node: TimeWindowNode,
+  nodes: NodeMap
+): SourceRange | undefined {
+  const loc = lineOf(node.callSource)
+  if (!loc) {
+    return undefined
+  }
+  const next = testLinesInFile(nodes, loc.file).find((l) => l > loc.line)
+  return {
+    file: loc.file,
+    start: loc.line,
+    end: next ?? Number.POSITIVE_INFINITY
+  }
+}
+
+/** Source ranges of every test node in a subtree (itself + descendants). */
+function rangesForSubtree(node: TimeWindowNode, nodes: NodeMap): SourceRange[] {
+  const ranges: SourceRange[] = []
+  const visit = (n: TimeWindowNode) => {
+    if (n.kind === 'test') {
+      const r = rangeOf(n, nodes)
+      if (r) {
+        ranges.push(r)
+      }
+    }
+    for (const childUid of n.childUids) {
+      const child = nodes.get(childUid)
+      if (child) {
+        visit(child)
+      }
+    }
+  }
+  visit(node)
+  return ranges
+}
+
+/** Source ranges of every test node in the run — used to tell when a command
+ *  belongs to *some other* test (so it must be excluded from this node). */
+function allTestRanges(nodes: NodeMap): SourceRange[] {
+  const ranges: SourceRange[] = []
+  for (const n of nodes.values()) {
+    if (n.kind === 'test') {
+      const r = rangeOf(n, nodes)
+      if (r) {
+        ranges.push(r)
+      }
+    }
+  }
+  return ranges
+}
+
+function inRanges(
+  loc: { file: string; line: number } | undefined,
+  ranges: SourceRange[]
+): boolean {
+  return (
+    loc !== undefined &&
+    ranges.some(
+      (r) => r.file === loc.file && loc.line >= r.start && loc.line < r.end
+    )
+  )
+}
+
+/**
+ * Commands belonging to `node`:
+ *   - call site inside this test's source range → include;
+ *   - call site inside a *different* test's range → exclude;
+ *   - no resolvable call site (e.g. assertion-internal getText) → include when
+ *     it falls in the node's time window.
+ */
+export function commandsForNode(
+  node: TimeWindowNode,
+  nodes: NodeMap,
+  commands: CommandLogLike[],
+  nodeWindow: TimeWindow | undefined
+): CommandLogLike[] {
+  const nodeRanges = rangesForSubtree(node, nodes)
+  const allRanges = allTestRanges(nodes)
+  const inWindow = (t: number | undefined) =>
+    nodeWindow !== undefined &&
+    t !== undefined &&
+    t >= nodeWindow.start &&
+    t <= nodeWindow.end
+  return commands.filter((c) => {
+    const loc = lineOf(c.callSource)
+    if (inRanges(loc, nodeRanges)) {
+      return true
+    }
+    if (inRanges(loc, allRanges)) {
+      return false
+    }
+    return inWindow(c.timestamp)
+  })
+}
diff --git a/packages/backend/src/baselineStore.ts b/packages/backend/src/baselineStore.ts
index d504f9c1..e6ed8f25 100644
--- a/packages/backend/src/baselineStore.ts
+++ b/packages/backend/src/baselineStore.ts
@@ -17,6 +17,7 @@ import type {
   TimeWindowNode
 } from './baseline/types.js'
 import { freshRun, toMs, pickMin, pickMax } from './baseline/utils.js'
+import { commandsForNode } from './baseline/command-attribution.js'
 
 export type { PreservedAttempt, PreservedStep } from './baseline/types.js'
 
@@ -41,6 +42,19 @@ class BaselineStore {
           this.#activeRun.commands.push(...(data as CommandLogLike[]))
         }
         return
+      case 'replaceCommand': {
+        // A command is sent first, then re-sent with late-attached fields
+        // (e.g. a per-command screenshot). Apply the replacement so preserved
+        // baselines carry those fields instead of the initial bare command.
+        const payload = data as {
+          oldTimestamp?: number
+          command?: CommandLogLike
+        }
+        if (payload?.command) {
+          this.#replaceCommand(payload.oldTimestamp, payload.command)
+        }
+        return
+      }
       case 'consoleLogs':
         if (Array.isArray(data)) {
           this.#activeRun.consoleLogs.push(...(data as ConsoleLogLike[]))
@@ -65,6 +79,25 @@ class BaselineStore {
     }
   }
 
+  // Mirrors the app's command replacement: match by stable `id`, then by the
+  // old timestamp, appending only when neither locates the original.
+  #replaceCommand(oldTimestamp: number | undefined, command: CommandLogLike) {
+    const cmds = this.#activeRun.commands
+    const newId = (command as { id?: number }).id
+    let idx = -1
+    if (typeof newId === 'number') {
+      idx = cmds.findIndex((c) => (c as { id?: number }).id === newId)
+    }
+    if (idx === -1 && oldTimestamp !== undefined) {
+      idx = cmds.map((c) => c.timestamp).lastIndexOf(oldTimestamp)
+    }
+    if (idx === -1) {
+      cmds.push(command)
+    } else {
+      cmds[idx] = command
+    }
+  }
+
   #mergeNetwork(incoming: NetworkRequestLike[]) {
     const byId = new Map<string, number>()
     this.#activeRun.networkRequests.forEach((r, i) => {
@@ -154,6 +187,16 @@ class BaselineStore {
       incomingStart !== undefined &&
       incomingStart > existing.end
 
+    // A test re-executing (rerun, or a framework retry of a failed test) starts
+    // a new attempt. Drop its previous attempt's commands so a preserve keeps
+    // only the latest run — other tests' commands (accumulated across session
+    // changes within one run) are left intact.
+    if (isNewRun && kind === 'test') {
+      this.#activeRun.commands = this.#activeRun.commands.filter(
+        (c) => c.testUid !== uid
+      )
+    }
+
     const nextStart = isNewRun
       ? incomingStart
       : pickMin(existing?.start, incomingStart)
@@ -303,12 +346,36 @@ class BaselineStore {
     }
   }
 
+  /** Tight [min,max] window from a command set's timestamps. */
+  #spanOf(
+    commands: CommandLogLike[]
+  ): { start: number; end: number } | undefined {
+    const ts = commands
+      .map((c) => c.timestamp)
+      .filter((t): t is number => t !== undefined)
+    if (ts.length === 0) {
+      return undefined
+    }
+    return { start: Math.min(...ts), end: Math.max(...ts) }
+  }
+
   snapshot(uid: string, scope: 'test' | 'suite'): PreservedAttempt | undefined {
     const node = this.#activeRun.nodes.get(uid)
     if (!node) {
       return undefined
     }
-    const window = this.#windowFor(uid)
+    const nodeWindow = this.#windowFor(uid)
+    const commands = commandsForNode(
+      node,
+      this.#activeRun.nodes,
+      this.#activeRun.commands,
+      nodeWindow
+    )
+
+    // Window for the non-uid streams: the matched commands' span, expanded by
+    // the node window only when they overlap (a stale node window from a
+    // previous run must not pull in unrelated events).
+    const window = this.#resolveWindow(this.#spanOf(commands), nodeWindow)
     if (!window) {
       return undefined
     }
@@ -328,7 +395,7 @@ class BaselineStore {
       window,
       test: this.#buildTestSnapshot(node),
       steps: steps.length > 0 ? steps : undefined,
-      commands: this.#activeRun.commands.filter((c) => inWindow(c.timestamp)),
+      commands,
       consoleLogs: this.#activeRun.consoleLogs.filter((c) =>
         inWindow(c.timestamp)
       ),
@@ -340,6 +407,30 @@ class BaselineStore {
     }
   }
 
+  /** Window for the non-uid event streams: the command span, expanded by the
+   *  node window only when the two overlap (same run). A disjoint node window
+   *  is stale — ignore it so the snapshot tracks the run the commands came from. */
+  #resolveWindow(
+    commandSpan: { start: number; end: number } | undefined,
+    nodeWindow: { start: number; end: number } | undefined
+  ): { start: number; end: number } | undefined {
+    if (!commandSpan) {
+      return nodeWindow
+    }
+    if (!nodeWindow) {
+      return commandSpan
+    }
+    const overlap =
+      nodeWindow.start <= commandSpan.end && nodeWindow.end >= commandSpan.start
+    if (!overlap) {
+      return commandSpan
+    }
+    return {
+      start: Math.min(commandSpan.start, nodeWindow.start),
+      end: Math.max(commandSpan.end, nodeWindow.end)
+    }
+  }
+
   preserve(uid: string, scope: 'test' | 'suite'): PreservedAttempt | undefined {
     const attempt = this.snapshot(uid, scope)
     if (!attempt) {
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
index 300ffcf2..5cfe8cee 100644
--- a/packages/backend/src/index.ts
+++ b/packages/backend/src/index.ts
@@ -18,6 +18,7 @@ import { DEFAULT_PORT } from './constants.js'
 import { testRunner } from './runner.js'
 import { baselineStore } from './baselineStore.js'
 import { createWorkerMessageHandler } from './worker-message-handler.js'
+import { resolveByteRange } from './video-range.js'
 import {
   BASELINE_API,
   BASELINE_WS_SCOPE,
@@ -82,7 +83,11 @@ function replayBufferedMessages(socket: WebSocket) {
   }
 }
 
-function serveVideo(sessionId: string, reply: FastifyReply) {
+function serveVideo(
+  sessionId: string,
+  request: FastifyRequest,
+  reply: FastifyReply
+) {
   const videoPath = videoRegistry.get(sessionId)
   if (!videoPath) {
     return reply.code(404).send({ error: 'Video not found' })
@@ -90,9 +95,27 @@ function serveVideo(sessionId: string, reply: FastifyReply) {
   if (!fs.existsSync(videoPath)) {
     return reply.code(404).send({ error: 'Video file missing from disk' })
   }
+  const total = fs.statSync(videoPath).size
+  reply.header('Content-Type', 'video/webm')
+  // Range support is what makes the <video> seekable — without a 206 the
+  // browser plays linearly but `video.seekable` stays empty and any
+  // currentTime set snaps back to 0. The scrubber/markers depend on it.
+  reply.header('Accept-Ranges', 'bytes')
+
+  const range = resolveByteRange(request.headers.range, total)
+  if (range.kind === 'unsatisfiable') {
+    return reply.code(416).header('Content-Range', `bytes */${total}`).send()
+  }
+  if (range.kind === 'full') {
+    reply.header('Content-Length', total)
+    return reply.send(fs.createReadStream(videoPath))
+  }
+  const { start, end } = range
   return reply
-    .header('Content-Type', 'video/webm')
-    .send(fs.createReadStream(videoPath))
+    .code(206)
+    .header('Content-Range', `bytes ${start}-${end}/${total}`)
+    .header('Content-Length', end - start + 1)
+    .send(fs.createReadStream(videoPath, { start, end }))
 }
 
 async function handleTestRun(
@@ -270,14 +293,19 @@ function registerWorkerWebSocket(s: FastifyInstance): void {
   s.get(
     WS_PATHS.worker,
     { websocket: true },
-    (socket: WebSocket, _req: FastifyRequest) => {
+    (socket: WebSocket, req: FastifyRequest) => {
       // Don't drop the message buffer for rerun-child connects (the dashboard
       // tree dedupes by uid and stale state must survive). Same applies to
       // baselineStore.activeRun — keep it across reruns so Preserve & Rerun on
       // a different failed test still finds data; #updateNode handles window
       // expansion across reruns of the same test.
       const isRerunChild = testRunner.consumeRerunChildFlag()
-      if (!isRerunChild) {
+      // A mid-run session-change reconnect (e.g. after `browser.end()`) reopens
+      // this socket; keep the accumulated run state so earlier tests' commands
+      // survive for Preserve & Rerun instead of being wiped.
+      const isReconnect =
+        (req.query as { reconnect?: string })?.reconnect === '1'
+      if (!isRerunChild && !isReconnect) {
         messageBuffer.length = 0
         baselineStore.resetActiveRun()
       }
@@ -325,7 +353,7 @@ function registerVideoRoute(s: FastifyInstance): void {
       request: FastifyRequest<{ Params: { sessionId: string } }>,
       reply
     ) => {
-      return serveVideo(request.params.sessionId, reply)
+      return serveVideo(request.params.sessionId, request, reply)
     }
   )
 }
diff --git a/packages/backend/src/video-range.ts b/packages/backend/src/video-range.ts
new file mode 100644
index 00000000..63d1d3b6
--- /dev/null
+++ b/packages/backend/src/video-range.ts
@@ -0,0 +1,34 @@
+// Pure HTTP byte-range resolution for the video endpoint. Kept separate from
+// the Fastify wiring so the range math is unit-testable without a real file.
+
+/** Matches a single-range `bytes=start-end` header (either bound optional). */
+const BYTE_RANGE_RE = /^bytes=(\d*)-(\d*)$/
+
+export type ByteRange =
+  /** No (or unparsable) Range header — serve the whole file with 200. */
+  | { kind: 'full' }
+  /** Valid range — serve `[start, end]` inclusive with 206. */
+  | { kind: 'partial'; start: number; end: number }
+  /** Range outside the file — respond 416. */
+  | { kind: 'unsatisfiable' }
+
+/**
+ * Resolve a `Range` request header against a file of `total` bytes. A missing
+ * or malformed header yields a full response; a well-formed but out-of-bounds
+ * range yields `unsatisfiable` (HTTP 416).
+ */
+export function resolveByteRange(
+  rangeHeader: string | undefined,
+  total: number
+): ByteRange {
+  const match = BYTE_RANGE_RE.exec(rangeHeader ?? '')
+  if (!match) {
+    return { kind: 'full' }
+  }
+  const start = match[1] ? Number(match[1]) : 0
+  const end = match[2] ? Number(match[2]) : total - 1
+  if (start > end || start < 0 || end >= total) {
+    return { kind: 'unsatisfiable' }
+  }
+  return { kind: 'partial', start, end }
+}
diff --git a/packages/backend/src/worker-message-handler.ts b/packages/backend/src/worker-message-handler.ts
index ef643f9a..ccb8f8b1 100644
--- a/packages/backend/src/worker-message-handler.ts
+++ b/packages/backend/src/worker-message-handler.ts
@@ -40,7 +40,8 @@ function tryHandleControlMessage(
     return true
   }
   // Screencast: store the absolute videoPath in the registry (backend-only),
-  // then forward only the sessionId so the UI can fetch via /api/video/:sessionId.
+  // then forward the sessionId plus recording timing (startTime/duration) so
+  // the UI can fetch via /api/video/:sessionId and map actions onto the video.
   if (parsed.scope === 'screencast' && parsed.data?.sessionId) {
     const sessionId = String(parsed.data.sessionId)
     const videoPath =
@@ -51,8 +52,19 @@ function tryHandleControlMessage(
       ctx.videoRegistry.set(sessionId, videoPath)
       log.info(`Screencast registered for session ${sessionId}: ${videoPath}`)
     }
+    const startTime =
+      typeof parsed.data.startTime === 'number'
+        ? parsed.data.startTime
+        : undefined
+    const duration =
+      typeof parsed.data.duration === 'number'
+        ? parsed.data.duration
+        : undefined
     ctx.broadcastToClients(
-      JSON.stringify({ scope: 'screencast', data: { sessionId } })
+      JSON.stringify({
+        scope: 'screencast',
+        data: { sessionId, startTime, duration }
+      })
     )
     return true
   }
diff --git a/packages/backend/tests/baselineStore.test.ts b/packages/backend/tests/baselineStore.test.ts
index 619d0f65..dbd328aa 100644
--- a/packages/backend/tests/baselineStore.test.ts
+++ b/packages/backend/tests/baselineStore.test.ts
@@ -57,6 +57,156 @@ describe('baselineStore', () => {
     expect(baselineStore.snapshot('does-not-exist', 'test')).toBeUndefined()
   })
 
+  it('attributes commands by call-site line when testUid is mis-tagged (multi-test file)', () => {
+    const file = '/spec.js'
+    // Two tests in one file; nightwatch's per-file hooks mis-tag both tests'
+    // commands with the FIRST test's uid. Source location must still split them.
+    baselineStore.recordEvent('suites', [
+      {
+        [SUITE_UID]: {
+          uid: SUITE_UID,
+          title: 'Suite',
+          file,
+          start: 100,
+          end: 400,
+          tests: [
+            {
+              uid: 'test-A',
+              title: 'A',
+              fullTitle: 'Suite A',
+              file,
+              callSource: `${file}:5`,
+              start: 100,
+              end: 200
+            },
+            {
+              uid: 'test-B',
+              title: 'B',
+              fullTitle: 'Suite B',
+              file,
+              callSource: `${file}:20`,
+              start: 250,
+              end: 350
+            }
+          ],
+          suites: []
+        }
+      }
+    ])
+    baselineStore.recordEvent('commands', [
+      {
+        timestamp: 110,
+        command: 'a1',
+        args: [],
+        testUid: 'test-A',
+        callSource: `${file}:7:3`
+      },
+      {
+        timestamp: 120,
+        command: 'a2',
+        args: [],
+        testUid: 'test-A',
+        callSource: `${file}:9:3`
+      },
+      // test B's commands are mis-tagged test-A but live below test B's line.
+      {
+        timestamp: 260,
+        command: 'b1',
+        args: [],
+        testUid: 'test-A',
+        callSource: `${file}:22:3`
+      },
+      {
+        timestamp: 270,
+        command: 'b2',
+        args: [],
+        testUid: 'test-A',
+        callSource: `${file}:24:3`
+      }
+    ])
+
+    const a = baselineStore.snapshot('test-A', 'test')!
+    expect(a.commands.map((c) => c.command)).toEqual(['a1', 'a2'])
+    const b = baselineStore.snapshot('test-B', 'test')!
+    expect(b.commands.map((c) => c.command)).toEqual(['b1', 'b2'])
+  })
+
+  it('applies replaceCommand so late-attached fields (e.g. screenshots) survive into the snapshot', () => {
+    baselineStore.recordEvent('commands', [
+      { timestamp: 250, command: 'getText', args: ['#flash'] }
+    ])
+    // The adapter re-sends the command once a screenshot is attached.
+    baselineStore.recordEvent('replaceCommand', {
+      oldTimestamp: 250,
+      command: {
+        timestamp: 250,
+        command: 'getText',
+        args: ['#flash'],
+        screenshot: 'data:image/png;base64,AAAA'
+      }
+    })
+    baselineStore.recordEvent('suites', suite({ start: 200, end: 300 }))
+
+    const snap = baselineStore.snapshot(TEST_UID, 'test')!
+    expect(snap.commands).toHaveLength(1)
+    expect(snap.commands[0].screenshot).toBe('data:image/png;base64,AAAA')
+  })
+
+  it('keeps an indirectly-issued command (no call site) via the time window', () => {
+    const file = '/spec.js'
+    baselineStore.recordEvent('suites', [
+      {
+        [SUITE_UID]: {
+          uid: SUITE_UID,
+          title: 'Suite',
+          file,
+          start: 100,
+          end: 300,
+          tests: [
+            {
+              uid: TEST_UID,
+              title: 'A',
+              fullTitle: 'Suite A',
+              file,
+              callSource: `${file}:5`,
+              start: 100,
+              end: 300
+            }
+          ],
+          suites: []
+        }
+      }
+    ])
+    baselineStore.recordEvent('commands', [
+      { timestamp: 120, command: 'click', args: [], callSource: `${file}:7` },
+      // assertion-internal getText: no resolvable call site, but in-window.
+      { timestamp: 150, command: 'getText', args: [] }
+    ])
+
+    const snap = baselineStore.snapshot(TEST_UID, 'test')!
+    expect(snap.commands.map((c) => c.command)).toEqual(['click', 'getText'])
+  })
+
+  it('drops a re-executed test’s previous commands so only the latest attempt is kept', () => {
+    // First attempt: 2 commands tagged with the test uid.
+    baselineStore.recordEvent('commands', [
+      { timestamp: 100, command: 'url', args: [], testUid: TEST_UID },
+      { timestamp: 110, command: 'getText', args: [], testUid: TEST_UID }
+    ])
+    baselineStore.recordEvent('suites', suite({ start: 100, end: 200 }))
+
+    // The test re-executes (new run: start strictly after the previous end),
+    // then sends its second attempt's commands.
+    baselineStore.recordEvent('suites', suite({ start: 500, end: 600 }))
+    baselineStore.recordEvent('commands', [
+      { timestamp: 510, command: 'url', args: [], testUid: TEST_UID },
+      { timestamp: 520, command: 'getText', args: [], testUid: TEST_UID }
+    ])
+
+    const snap = baselineStore.snapshot(TEST_UID, 'test')!
+    expect(snap.commands.map((c) => c.timestamp)).toEqual([510, 520])
+  })
+
   it('replaces (not unions) the time window when a new run is detected', () => {
     baselineStore.recordEvent(
       'suites',
diff --git a/packages/backend/tests/video-range.test.ts b/packages/backend/tests/video-range.test.ts
new file mode 100644
index 00000000..9ca4e97a
--- /dev/null
+++ b/packages/backend/tests/video-range.test.ts
@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest'
+
+import { resolveByteRange } from '../src/video-range.js'
+
+describe('resolveByteRange', () => {
+  const TOTAL = 1000
+
+  it('serves the full file when no Range header is present', () => {
+    expect(resolveByteRange(undefined, TOTAL)).toEqual({ kind: 'full' })
+    expect(resolveByteRange('', TOTAL)).toEqual({ kind: 'full' })
+  })
+
+  it('serves the full file for a malformed Range header', () => {
+    expect(resolveByteRange('bytes=abc', TOTAL)).toEqual({ kind: 'full' })
+    expect(resolveByteRange('seconds=0-1', TOTAL)).toEqual({ kind: 'full' })
+  })
+
+  it('resolves a fully specified range inclusively', () => {
+    expect(resolveByteRange('bytes=100-199', TOTAL)).toEqual({
+      kind: 'partial',
+      start: 100,
+      end: 199
+    })
+  })
+
+  it('treats an open-ended range as start→EOF', () => {
+    expect(resolveByteRange('bytes=500-', TOTAL)).toEqual({
+      kind: 'partial',
+      start: 500,
+      end: 999
+    })
+  })
+
+  it('treats a missing start as 0→end (browsers send 0- to probe seekability)', () => {
+    expect(resolveByteRange('bytes=0-', TOTAL)).toEqual({
+      kind: 'partial',
+      start: 0,
+      end: 999
+    })
+  })
+
+  it('rejects ranges past the end of the file as unsatisfiable', () => {
+    expect(resolveByteRange('bytes=1000-2000', TOTAL)).toEqual({
+      kind: 'unsatisfiable'
+    })
+    expect(resolveByteRange('bytes=0-1000', TOTAL)).toEqual({
+      kind: 'unsatisfiable'
+    })
+  })
+
+  it('rejects an inverted range as unsatisfiable', () => {
+    expect(resolveByteRange('bytes=300-100', TOTAL)).toEqual({
+      kind: 'unsatisfiable'
+    })
+  })
+})
diff --git a/packages/core/src/finalize-screencast.ts b/packages/core/src/finalize-screencast.ts
index ed0a2474..e8c6b00c 100644
--- a/packages/core/src/finalize-screencast.ts
+++ b/packages/core/src/finalize-screencast.ts
@@ -75,7 +75,8 @@ export async function finalizeScreencast({
       videoPath,
       videoFile: fileName,
       frameCount: frames.length,
-      duration: recorder.duration
+      duration: recorder.duration,
+      startTime: frames[0]?.timestamp
     })
   } catch (err) {
     log('warn', `Screencast encode failed: ${errorMessage(err)}`)
diff --git a/packages/core/src/session-capturer.ts b/packages/core/src/session-capturer.ts
index 115e8360..1cce3000 100644
--- a/packages/core/src/session-capturer.ts
+++ b/packages/core/src/session-capturer.ts
@@ -33,6 +33,13 @@ import {
 export interface SessionCapturerOptions {
   hostname?: string
   port?: number
+  /**
+   * Set when this capturer reconnects mid-run (e.g. after `browser.end()` opens
+   * a new session). Tells the backend to keep the accumulated run state instead
+   * of resetting it — otherwise earlier tests' commands are wiped and Preserve
+   * & Rerun on those tests finds nothing.
+   */
+  reconnect?: boolean
 }
 
 type ConsoleMethod = (typeof CONSOLE_METHODS)[number]
@@ -81,9 +88,12 @@ export abstract class SessionCapturerBase {
 
   // ── Construction ────────────────────────────────────────────────────────
   constructor(opts: SessionCapturerOptions = {}) {
-    const { hostname, port } = opts
+    const { hostname, port, reconnect } = opts
     if (hostname && port) {
-      this.ws = new WebSocket(`ws://${hostname}:${port}${WS_PATHS.worker}`)
+      const query = reconnect ? '?reconnect=1' : ''
+      this.ws = new WebSocket(
+        `ws://${hostname}:${port}${WS_PATHS.worker}${query}`
+      )
       this.ws.on('open', () => {
         this.#hasConnected = true
         this.onWsOpen()
diff --git a/packages/core/src/video-encoder.ts b/packages/core/src/video-encoder.ts
index 54e59ac2..38a02808 100644
--- a/packages/core/src/video-encoder.ts
+++ b/packages/core/src/video-encoder.ts
@@ -116,6 +116,15 @@ function runFfmpeg(
         'cfr',
         '-r',
         '10',
+        // Force a keyframe every frame. VP8 can only seek to keyframes, and
+        // libvpx's default GOP places a single keyframe on near-static
+        // screencast content — so scrubber/marker seeks snap back to the
+        // start. At 10fps over short recordings, all-intra keeps seeking
+        // frame-accurate at an acceptable size.
+        '-g',
+        '1',
+        '-keyint_min',
+        '1',
         '-auto-alt-ref',
         '0',
         '-disposition:v',
diff --git a/packages/nightwatch-devtools/src/run-lifecycle.ts b/packages/nightwatch-devtools/src/run-lifecycle.ts
index 15ab3486..8badb144 100644
--- a/packages/nightwatch-devtools/src/run-lifecycle.ts
+++ b/packages/nightwatch-devtools/src/run-lifecycle.ts
@@ -145,8 +145,15 @@ export async function openDevtoolsBrowser(
             '--no-first-run',
             '--no-default-browser-check'
           ]
+        },
+        // Dashboard uses the Puppeteer-based 'devtools' protocol; drop the
+        // "controlled by automated test software" infobar by ignoring
+        // Puppeteer's --enable-automation default. (Runtime-valid capability
+        // not present in the type.)
+        'wdio:devtoolsOptions': {
+          ignoreDefaultArgs: ['--enable-automation']
         }
-      }
+      } as WebdriverIO.Capabilities
     })
     await ctx.devtoolsBrowser.url(url)
   } catch (err) {
diff --git a/packages/nightwatch-devtools/src/session-init.ts b/packages/nightwatch-devtools/src/session-init.ts
index 4d6c9913..71a1c21b 100644
--- a/packages/nightwatch-devtools/src/session-init.ts
+++ b/packages/nightwatch-devtools/src/session-init.ts
@@ -233,7 +233,15 @@ export async function ensureSessionInitialized(
   // Trace mode: empty opts skip SessionCapturerBase's WS init — no backend
   // to forward events to anyway.
   ctx.sessionCapturer = new SessionCapturer(
-    ctx.mode === 'trace' ? {} : { port: ctx.port, hostname: ctx.hostname },
+    ctx.mode === 'trace'
+      ? {}
+      : {
+          port: ctx.port,
+          hostname: ctx.hostname,
+          // A session change reopens the WS mid-run — tell the backend to keep
+          // the accumulated run state so earlier tests' commands survive.
+          reconnect: Boolean(isSessionChange)
+        },
     browser
   )
   ctx.sessionCapturer.traceMode = ctx.mode
diff --git a/packages/nightwatch-devtools/src/session.ts b/packages/nightwatch-devtools/src/session.ts
index 7fc70e42..680b5221 100644
--- a/packages/nightwatch-devtools/src/session.ts
+++ b/packages/nightwatch-devtools/src/session.ts
@@ -119,7 +119,11 @@ export class SessionCapturer extends SessionCapturerBase {
   readonly snapshotCaptures: Promise<void>[] = []
 
   constructor(
-    devtoolsOptions: { hostname?: string; port?: number } = {},
+    devtoolsOptions: {
+      hostname?: string
+      port?: number
+      reconnect?: boolean
+    } = {},
     browser?: NightwatchBrowser
   ) {
     super(devtoolsOptions)
diff --git a/packages/service/src/constants.ts b/packages/service/src/constants.ts
index eec10f5c..46e38878 100644
--- a/packages/service/src/constants.ts
+++ b/packages/service/src/constants.ts
@@ -21,15 +21,23 @@ export {
   LOG_SOURCES
 } from '@wdio/devtools-core'
 
-export const DEFAULT_LAUNCH_CAPS: WebdriverIO.Capabilities = {
+// The dashboard launches via the Puppeteer-based 'devtools' protocol, so the
+// "controlled by automated test software" infobar (added by Puppeteer's
+// --enable-automation default) is removed via ignoreDefaultArgs, not
+// chromedriver's excludeSwitches. `wdio:devtoolsOptions` is honored at runtime
+// but isn't in this WebdriverIO.Capabilities type, hence the assertion.
+export const DEFAULT_LAUNCH_CAPS = {
   browserName: 'chrome',
   'goog:chromeOptions': {
     // production:
     args: ['--window-size=1600,1200']
     // development:
     // args: ['--window-size=1600,1200', '--auto-open-devtools-for-tabs']
+  },
+  'wdio:devtoolsOptions': {
+    ignoreDefaultArgs: ['--enable-automation']
   }
-}
+} as WebdriverIO.Capabilities
 
 export const INTERNAL_COMMANDS = [
   'emit',
diff --git a/packages/service/src/index.ts b/packages/service/src/index.ts
index 43cd694a..ed11e913 100644
--- a/packages/service/src/index.ts
+++ b/packages/service/src/index.ts
@@ -237,6 +237,7 @@ export default class DevToolsHookService implements Services.ServiceInstance {
 
   private resetStack() {
     this.#commandStack = []
+    this.#sessionCapturer.resetRetryTracker()
   }
 
   #resolveCallSourceFromFrame(
diff --git a/packages/service/src/session.ts b/packages/service/src/session.ts
index cc684234..ac25594a 100644
--- a/packages/service/src/session.ts
+++ b/packages/service/src/session.ts
@@ -12,6 +12,7 @@ import { isNativeMobile } from './mobile.js'
 import {
   CAPTURE_PERFORMANCE_SCRIPT,
   LOG_SOURCES,
+  RetryTracker,
   SessionCapturerBase,
   applyPerformanceData,
   createConsoleLogEntry,
@@ -30,6 +31,8 @@ export class SessionCapturer extends SessionCapturerBase {
   readonly startWallTime = Date.now()
   /** Last find-element selector — carried forward to the next element command. */
   #lastSelector: string | undefined
+  /** Collapses internal command retries onto a single entry (see #captureOrReplace). */
+  #retryTracker = new RetryTracker()
   #pendingNetworkRequests = new Map<
     string,
     {
@@ -197,8 +200,7 @@ export class SessionCapturer extends SessionCapturerBase {
       }
     }
 
-    this.commandsLog.push(commandLogEntry)
-    this.sendUpstream('commands', [commandLogEntry])
+    this.#captureOrReplace(commandLogEntry)
     // Capture trace + perf on commands that could trigger a page transition.
     // Skip on native mobile — scripts can't execute in a native app context.
     if (
@@ -212,6 +214,46 @@ export class SessionCapturer extends SessionCapturerBase {
     }
   }
 
+  /**
+   * Send a command, collapsing internal framework retries onto one entry. WDIO
+   * polls some commands (e.g. an assertion repeatedly calling `getText`); each
+   * poll fires `afterCommand`, so without this the UI fills with duplicate
+   * rows. A matching signature (same command + args + call site) replaces the
+   * previous entry in place — mirroring the nightwatch and selenium adapters.
+   */
+  #captureOrReplace(entry: CommandLog & { _id?: number }) {
+    const sig = RetryTracker.signature(
+      entry.command,
+      entry.args,
+      entry.callSource
+    )
+    if (this.#retryTracker.isRetry(sig)) {
+      const prev = this.commandsLog.find(
+        (c) =>
+          (c as CommandLog & { _id?: number })._id === this.#retryTracker.lastId
+      ) as (CommandLog & { _id?: number }) | undefined
+      const oldTimestamp = prev?.timestamp ?? entry.timestamp
+      if (prev) {
+        entry._id = prev._id
+        Object.assign(prev, entry)
+      } else {
+        this.commandsLog.push(entry)
+      }
+      this.sendReplaceCommand(oldTimestamp, entry)
+      this.#retryTracker.recordCapture(sig, entry._id ?? null)
+      return
+    }
+    this.commandsLog.push(entry)
+    const id = this.sendCommand(entry)
+    this.#retryTracker.recordCapture(sig, id)
+  }
+
+  /** Drop retry state at test/scenario boundaries so a deliberate re-issue of
+   *  the same call in the next test counts as fresh, not a retry. */
+  resetRetryTracker(): void {
+    this.#retryTracker.reset()
+  }
+
   /**
    * Run the shared Performance API capture script and attach the result to
    * the given CommandLog entry. Same `CAPTURE_PERFORMANCE_SCRIPT` +
diff --git a/packages/shared/src/types.ts b/packages/shared/src/types.ts
index cb59ab51..4e11181d 100644
--- a/packages/shared/src/types.ts
+++ b/packages/shared/src/types.ts
@@ -168,6 +168,7 @@ export interface ScreencastInfo {
   videoFile?: string
   frameCount?: number
   duration?: number
+  startTime?: number
 }
 
 /** Single captured screencast frame — base64 image + capture timestamp (ms). */
@@ -229,6 +230,11 @@ export interface Metadata {
   desiredCapabilities?: Record<string, unknown>
 }
 
+/** Captured metadata keyed by browser `sessionId` — lets the UI keep each
+ *  session's metadata instead of overwriting on a new session. Record (not Map)
+ *  so it stays JSON-serializable across the WS boundary and in contexts. */
+export type MetadataBySession = Record<string, Metadata>
+
 /**
  * Node-safe shape of a captured DOM mutation. The browser-side script
  * (packages/script) extends this with the real `MutationRecordType` union