webdriverio · vishnuv688 · Jun 12, 2026 · Jun 12, 2026 · Jun 12, 2026 · Jun 12, 2026
diff --git 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
diff --git a/assets/console-logs.gif b/assets/console-logs.gif
diff --git a/assets/metadata.gif b/assets/metadata.gif
diff --git a/assets/network-logs.gif b/assets/network-logs.gif
diff --git a/assets/preserve-rerun.gif b/assets/preserve-rerun.gif
diff --git a/assets/screencast.gif b/assets/screencast.gif
diff --git a/assets/stop-test-runner.gif b/assets/stop-test-runner.gif
diff --git a/assets/test-rerunner.gif b/assets/test-rerunner.gif
diff --git a/assets/test-runner.gif b/assets/test-runner.gif
diff --git a/assets/testlens.gif b/assets/testlens.gif
diff --git 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
@@ -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/package.json b/packages/app/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/state": "^6.5.4",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.43.0",
     "@iconify-json/mdi": "^1.2.3",

diff --git 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
@@ -28,6 +32,14 @@ window.addEventListener('storage', (e) => {
     document.body.classList.toggle('dark', e.newValue === 'true')
   }
 })
+// Follow live OS theme changes while the user hasn't set an explicit override.
+window
+  .matchMedia('(prefers-color-scheme: dark)')
+  .addEventListener('change', (e) => {
+    if (localStorage.getItem(DARK_MODE_KEY) === null) {
+      document.body.classList.toggle('dark', e.matches)
+    }
+  })
 
 import './components/header.js'
 import './components/sidebar.js'
@@ -65,7 +77,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
@@ -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>
+  `
+}