diff --git a/webui/package.json b/webui/package.json
index a24fa69..c62b08c 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -14,7 +14,7 @@
   "scripts": {
     "playwright-install": "playwright install",
     "check": "tsc --noEmit",
-    "demo": "vite --open src/web-components/demo/demo-runner.html",
+    "demo": "vite --open src/web-components/demo/demo.html",
     "dev": "vite --port 5173 --strictPort --host 127.0.0.1",
     "format": "prettier ./src --write",
     "gentypes": "go run ../cmd/go2ts -o src/types.ts",
diff --git a/webui/src/web-components/DEAR_LLM.md b/webui/src/web-components/DEAR_LLM.md
index 660f19a..67e9d12 100644
--- a/webui/src/web-components/DEAR_LLM.md
+++ b/webui/src/web-components/DEAR_LLM.md
@@ -65,8 +65,8 @@
 
 ### Running the demo server:
 
-- Use the `npm run demo:runner` command to start the demo server. It will render your component changes, populated with fake example data.
-- The server runs at http://localhost:5173/src/web-components/demo/demo-runner.html
+- Use the `npm run demo` command to start the demo server. It will render your component changes, populated with fake example data.
+- The server runs at http://localhost:5173/src/web-components/demo/demo.html
 - If you need to write or update the demo definition for an element, do so in demo files like ./demo/some-component-name.demo.ts
 - If you need to add new example data objects for demoing components, do so in ./demo/fixtures
 
diff --git a/webui/src/web-components/demo/demo-runner.html b/webui/src/web-components/demo/demo.html
similarity index 100%
rename from webui/src/web-components/demo/demo-runner.html
rename to webui/src/web-components/demo/demo.html
diff --git a/webui/src/web-components/demo/generate-index.ts b/webui/src/web-components/demo/generate-index.ts
index 015ef88..64ec4c7 100644
--- a/webui/src/web-components/demo/generate-index.ts
+++ b/webui/src/web-components/demo/generate-index.ts
@@ -68,7 +68,7 @@
 function generateIndexHTML(demos: DemoInfo[]): string {
   const demoLinks = demos
     .map((demo) => {
-      const href = `demo-runner.html#${demo.name}`;
+      const href = `demo.html#${demo.name}`;
       const description = demo.description ? ` - ${demo.description}` : "";
 
       return `      <li>
@@ -94,18 +94,18 @@
         padding: 20px;
         line-height: 1.6;
       }
-      
+
       h1 {
         color: #24292f;
         border-bottom: 1px solid #d1d9e0;
         padding-bottom: 10px;
       }
-      
+
       .demo-list {
         list-style: none;
         padding: 0;
       }
-      
+
       .demo-list li {
         margin: 15px 0;
         padding: 15px;
@@ -114,27 +114,27 @@
         background: #f6f8fa;
         transition: background-color 0.2s;
       }
-      
+
       .demo-list li:hover {
         background: #ffffff;
       }
-      
+
       .demo-list a {
         text-decoration: none;
         color: #0969da;
         display: block;
       }
-      
+
       .demo-list a:hover {
         text-decoration: underline;
       }
-      
+
       .demo-list strong {
         font-size: 16px;
         display: block;
         margin-bottom: 5px;
       }
-      
+
       .stats {
         background: #fff8dc;
         padding: 15px;
@@ -142,7 +142,7 @@
         margin: 20px 0;
         border-left: 4px solid #f9c23c;
       }
-      
+
       .runner-link {
         display: inline-block;
         padding: 10px 20px;
@@ -152,7 +152,7 @@
         border-radius: 6px;
         margin-top: 20px;
       }
-      
+
       .runner-link:hover {
         background: #0860ca;
       }
@@ -160,27 +160,27 @@
   </head>
   <body>
     <h1>Sketch Web Components Demo Index</h1>
-    
+
     <div class="stats">
       <strong>Auto-generated index</strong><br>
       Found ${demos.length} demo component${demos.length === 1 ? "" : "s"} • Last updated: ${new Date().toLocaleString()}
     </div>
-    
+
     <p>
       This page provides an overview of all available component demos.
       Click on any component below to view its interactive demo.
     </p>
-    
-    <a href="demo-runner.html" class="runner-link">🚀 Launch Demo Runner</a>
-    
+
+    <a href="demo.html" class="runner-link">🚀 Launch Demo Runner</a>
+
     <h2>Available Component Demos</h2>
-    
+
     <ul class="demo-list">
 ${demoLinks}
     </ul>
-    
+
     <hr style="margin: 40px 0; border: none; border-top: 1px solid #d1d9e0;">
-    
+
     <p>
       <em>This index is automatically generated from available <code>*.demo.ts</code> files.</em><br>
       To add a new demo, create a <code>component-name.demo.ts</code> file in this directory.
diff --git a/webui/src/web-components/demo/index-generated.html b/webui/src/web-components/demo/index-generated.html
index 9faf25c..ee9b4a1 100644
--- a/webui/src/web-components/demo/index-generated.html
+++ b/webui/src/web-components/demo/index-generated.html
@@ -91,121 +91,121 @@
       any component below to view its interactive demo.
     </p>
 
-    <a href="demo-runner.html" class="runner-link">🚀 Launch Demo Runner</a>
+    <a href="demo.html" class="runner-link">🚀 Launch Demo Runner</a>
 
     <h2>Available Component Demos</h2>
 
     <ul class="demo-list">
       <li>
-        <a href="demo-runner.html#sketch-call-status">
+        <a href="demo.html#sketch-call-status">
           <strong>Call Status Demo</strong> - Display current LLM and tool call
           status with visual indicators
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-chat-input">
+        <a href="demo.html#sketch-chat-input">
           <strong>Chat Input Demo</strong> - Interactive chat input component
           with send functionality
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-container-status">
+        <a href="demo.html#sketch-container-status">
           <strong>Container Status Demo</strong> - Display container status
           information with usage statistics
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-diff-range-picker">
+        <a href="demo.html#sketch-diff-range-picker">
           <strong>Diff Range Picker Demo</strong> - Component for selecting
           commit ranges for diff views
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#mobile-chat">
+        <a href="demo.html#mobile-chat">
           <strong>Mobile Chat Demo</strong> - Mobile chat interface with message
           display and scroll behavior
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-push-button">
+        <a href="demo.html#sketch-push-button">
           <strong>Push Button</strong>
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-app-shell">
+        <a href="demo.html#sketch-app-shell">
           <strong>Sketch App Shell Demo</strong> - Full sketch application shell
           with chat, diff, and terminal views
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-diff2-view">
+        <a href="demo.html#sketch-diff2-view">
           <strong>Sketch Monaco Diff View Demo</strong> - Monaco-based diff view
           with range and file pickers using mock data
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-monaco-view">
+        <a href="demo.html#sketch-monaco-view">
           <strong>Sketch Monaco Viewer Demo</strong> - Monaco editor with code
           comparison functionality for different languages
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-network-status">
+        <a href="demo.html#sketch-network-status">
           <strong>Sketch Network Status Demo</strong> - Status indicators
           showing different connection and activity states
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-timeline-viewport">
+        <a href="demo.html#sketch-timeline-viewport">
           <strong>Sketch Timeline Viewport Demo</strong> - Timeline viewport
           rendering with memory leak protection and event-driven approach
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-tool-card">
+        <a href="demo.html#sketch-tool-card">
           <strong>Sketch Tool Card Demo</strong> - Demonstration of different
           tool card components for various tool types
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#status-indicators">
+        <a href="demo.html#status-indicators">
           <strong>Status Indicators Demo</strong> - Status indicators showing
           connected, working, and disconnected states without the green
           connection dot
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-theme-toggle">
+        <a href="demo.html#sketch-theme-toggle">
           <strong>Theme Toggle Demo</strong> - Three-way theme toggle: light
           mode, dark mode, and system preference
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-timeline">
+        <a href="demo.html#sketch-timeline">
           <strong>Timeline Demo</strong> - Interactive timeline component for
           displaying conversation messages with various states
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-timeline-message">
+        <a href="demo.html#sketch-timeline-message">
           <strong>Timeline Message Demo</strong> - Interactive timeline message
           component with various message types and features
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-todo-panel">
+        <a href="demo.html#sketch-todo-panel">
           <strong>Todo Panel Demo</strong> - Interactive todo list panel showing
           task progress and allowing comments
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-tool-calls">
+        <a href="demo.html#sketch-tool-calls">
           <strong>Tool Calls Demo</strong> - Interactive tool call display with
           various tool types
         </a>
       </li>
       <li>
-        <a href="demo-runner.html#sketch-view-mode-select">
+        <a href="demo.html#sketch-view-mode-select">
           <strong>View Mode Select Demo</strong> - Interactive tab navigation
           for switching between chat, diff, and terminal views
         </a>
diff --git a/webui/src/web-components/demo/readme.md b/webui/src/web-components/demo/readme.md
index 686eb63..b5d87d2 100644
--- a/webui/src/web-components/demo/readme.md
+++ b/webui/src/web-components/demo/readme.md
@@ -9,7 +9,7 @@
 - **TypeScript Demo Modules** (`*.demo.ts`) - Component-specific demo configurations
 - **Demo Framework** (`demo-framework/`) - Shared infrastructure for loading and running demos
 - **Shared Fixtures** (`demo-fixtures/`) - Common fake data and utilities
-- **Demo Runner** (`demo-runner.html`) - Interactive demo browser
+- **Demo Runner** (`demo.html`) - Interactive demo browser
 - **Auto-generated Index** - Automatically maintained list of available demos
 
 ## Quick Start
@@ -21,7 +21,7 @@
 npm run demo
 
 # Visit the demo runner
-open http://localhost:5173/src/web-components/demo/demo-runner.html
+open http://localhost:5173/src/web-components/demo/demo.html
 
 # Or view the auto-generated index
 open http://localhost:5173/src/web-components/demo/index-generated.html
@@ -181,14 +181,14 @@
 demo/
 ├── demo-framework/
 │   ├── types.ts           # TypeScript interfaces
-│   └── demo-runner.ts     # Demo loading and execution
+│   └── demo.ts     # Demo loading and execution
 ├── demo-fixtures/
 │   ├── tool-calls.ts      # Tool call sample data
 │   ├── timeline-messages.ts # Message sample data
 │   ├── container-status.ts  # Status sample data
 │   └── index.ts           # Centralized exports
 ├── generate-index.ts      # Index generation script
-├── demo-runner.html       # Interactive demo browser
+├── demo.html       # Interactive demo browser
 ├── index-generated.html   # Auto-generated index
 ├── *.demo.ts             # Individual demo modules
 └── readme.md             # This file