webui: s/demo-runner/demo/g
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