diff --git a/webui/src/web-components/demo/demo-fixtures/container-status.ts b/webui/src/web-components/demo/demo-fixtures/container-status.ts
new file mode 100644
index 0000000..14c4964
--- /dev/null
+++ b/webui/src/web-components/demo/demo-fixtures/container-status.ts
@@ -0,0 +1,99 @@
+/**
+ * Shared fake container status data for demos
+ */
+
+import { State, CumulativeUsage } from "../../../types";
+
+export const sampleUsage: CumulativeUsage = {
+  start_time: "2024-01-15T10:00:00Z",
+  messages: 1337,
+  input_tokens: 25432,
+  output_tokens: 18765,
+  cache_read_input_tokens: 8234,
+  cache_creation_input_tokens: 12354,
+  total_cost_usd: 2.03,
+  tool_uses: {
+    bash: 45,
+    patch: 23,
+    think: 12,
+    "multiple-choice": 8,
+    keyword_search: 6,
+  },
+};
+
+export const sampleContainerState: State = {
+  state_version: 1,
+  message_count: 27,
+  total_usage: sampleUsage,
+  initial_commit: "decafbad42abc123",
+  slug: "file-upload-component",
+  branch_name: "sketch-wip",
+  branch_prefix: "sketch",
+  hostname: "example.hostname",
+  working_dir: "/app",
+  os: "linux",
+  git_origin: "https://github.com/user/repo.git",
+  outstanding_llm_calls: 0,
+  outstanding_tool_calls: null,
+  session_id: "session-abc123",
+  ssh_available: true,
+  in_container: true,
+  first_message_index: 0,
+  agent_state: "ready",
+  outside_hostname: "host.example.com",
+  inside_hostname: "container.local",
+  outside_os: "macOS",
+  inside_os: "linux",
+  outside_working_dir: "/Users/dev/project",
+  inside_working_dir: "/app",
+  todo_content:
+    "- Implement file upload component\n- Add drag and drop support\n- Write tests",
+  skaband_addr: "localhost:8080",
+  link_to_github: true,
+  ssh_connection_string: "ssh user@example.com",
+  diff_lines_added: 245,
+  diff_lines_removed: 67,
+};
+
+export const lightUsageState: State = {
+  ...sampleContainerState,
+  message_count: 5,
+  total_usage: {
+    ...sampleUsage,
+    messages: 5,
+    input_tokens: 1234,
+    output_tokens: 890,
+    total_cost_usd: 0.15,
+    tool_uses: {
+      bash: 2,
+      patch: 1,
+    },
+  },
+  diff_lines_added: 45,
+  diff_lines_removed: 12,
+};
+
+export const heavyUsageState: State = {
+  ...sampleContainerState,
+  message_count: 156,
+  total_usage: {
+    ...sampleUsage,
+    messages: 156,
+    input_tokens: 89234,
+    output_tokens: 67890,
+    cache_read_input_tokens: 23456,
+    cache_creation_input_tokens: 45678,
+    total_cost_usd: 12.45,
+    tool_uses: {
+      bash: 234,
+      patch: 89,
+      think: 67,
+      "multiple-choice": 23,
+      keyword_search: 45,
+      browser_navigate: 12,
+      codereview: 8,
+    },
+  },
+  diff_lines_added: 2847,
+  diff_lines_removed: 1456,
+};
diff --git a/webui/src/web-components/demo/demo-fixtures/index.ts b/webui/src/web-components/demo/demo-fixtures/index.ts
new file mode 100644
index 0000000..9a47f8e
--- /dev/null
+++ b/webui/src/web-components/demo/demo-fixtures/index.ts
@@ -0,0 +1,104 @@
+/**
+ * Centralized exports for all demo fixtures
+ */
+
+// Tool calls
+export {
+  sampleToolCalls,
+  longBashCommand,
+  multipleToolCallGroups,
+} from "./tool-calls";
+
+// Timeline messages
+export {
+  sampleTimelineMessages,
+  longTimelineMessage,
+  mixedTimelineMessages,
+} from "./timeline-messages";
+
+// Container status
+export {
+  sampleUsage,
+  sampleContainerState,
+  lightUsageState,
+  heavyUsageState,
+} from "./container-status";
+
+// Common demo utilities
+export const demoStyles = {
+  container: `
+    max-width: 1200px;
+    margin: 20px auto;
+    padding: 20px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  `,
+
+  demoSection: `
+    margin: 20px 0;
+    padding: 15px;
+    border: 1px solid #e1e5e9;
+    border-radius: 8px;
+    background: #f8f9fa;
+  `,
+
+  demoHeader: `
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: #24292f;
+  `,
+};
+
+/**
+ * Common demo setup utilities
+ */
+export const demoUtils = {
+  /**
+   * Create a labeled demo section
+   */
+  createDemoSection(title: string, description?: string): HTMLElement {
+    const section = document.createElement("div");
+    section.style.cssText = demoStyles.demoSection;
+
+    const header = document.createElement("h3");
+    header.style.cssText = demoStyles.demoHeader;
+    header.textContent = title;
+    section.appendChild(header);
+
+    if (description) {
+      const desc = document.createElement("p");
+      desc.textContent = description;
+      desc.style.cssText = "color: #656d76; margin-bottom: 15px;";
+      section.appendChild(desc);
+    }
+
+    return section;
+  },
+
+  /**
+   * Wait for a specified number of milliseconds
+   */
+  delay(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  },
+
+  /**
+   * Create a simple button for demo interactions
+   */
+  createButton(text: string, onClick: () => void): HTMLButtonElement {
+    const button = document.createElement("button");
+    button.textContent = text;
+    button.style.cssText = `
+      padding: 8px 16px;
+      margin: 5px;
+      background: #0969da;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+    `;
+    button.addEventListener("click", onClick);
+    return button;
+  },
+};
diff --git a/webui/src/web-components/demo/demo-fixtures/timeline-messages.ts b/webui/src/web-components/demo/demo-fixtures/timeline-messages.ts
new file mode 100644
index 0000000..a98c728
--- /dev/null
+++ b/webui/src/web-components/demo/demo-fixtures/timeline-messages.ts
@@ -0,0 +1,113 @@
+/**
+ * Shared fake timeline message data for demos
+ */
+
+import { AgentMessage } from "../../../types";
+import { sampleToolCalls } from "./tool-calls";
+
+const baseTimestamp = new Date("2024-01-15T10:00:00Z");
+
+export const sampleTimelineMessages: AgentMessage[] = [
+  {
+    type: "user",
+    end_of_turn: true,
+    content:
+      "Can you help me implement a file upload component with drag and drop support?",
+    timestamp: new Date(baseTimestamp.getTime()).toISOString(),
+    conversation_id: "demo-conversation",
+    idx: 0,
+  },
+  {
+    type: "agent",
+    end_of_turn: false,
+    content:
+      "I'll help you create a file upload component with drag and drop support. Let me start by analyzing your current project structure and then implement the component.",
+    timestamp: new Date(baseTimestamp.getTime() + 1000).toISOString(),
+    conversation_id: "demo-conversation",
+    idx: 1,
+  },
+  {
+    type: "agent",
+    end_of_turn: false,
+    content: "First, let me check your current directory structure:",
+    tool_calls: [sampleToolCalls[2]], // bash command
+    timestamp: new Date(baseTimestamp.getTime() + 2000).toISOString(),
+    conversation_id: "demo-conversation",
+    idx: 2,
+  },
+  {
+    type: "tool",
+    end_of_turn: false,
+    content:
+      "src/\n├── components/\n│   ├── Button.tsx\n│   └── Input.tsx\n├── styles/\n│   └── globals.css\n└── utils/\n    └── helpers.ts",
+    tool_name: "bash",
+    tool_call_id: "toolu_01bash123",
+    timestamp: new Date(baseTimestamp.getTime() + 3000).toISOString(),
+    conversation_id: "demo-conversation",
+    idx: 3,
+  },
+  {
+    type: "agent",
+    end_of_turn: true,
+    content:
+      "Perfect! I can see you have a components directory. Now I'll create a FileUpload component with drag and drop functionality. This will include:\n\n1. A drop zone area\n2. File selection via click\n3. Progress indicators\n4. File validation\n5. Preview of selected files",
+    timestamp: new Date(baseTimestamp.getTime() + 4000).toISOString(),
+    conversation_id: "demo-conversation",
+    idx: 4,
+  },
+];
+
+export const longTimelineMessage: AgentMessage = {
+  type: "agent",
+  end_of_turn: true,
+  content: `I've analyzed your codebase and here's a comprehensive plan for implementing the file upload component:
+
+## Implementation Plan
+
+### 1. Component Structure
+The FileUpload component will be built using React with TypeScript. It will consist of:
+- A main container with drop zone styling
+- File input element (hidden)
+- Visual feedback for drag states
+- File list display area
+- Progress indicators
+
+### 2. Key Features
+- **Drag & Drop**: Full drag and drop support with visual feedback
+- **Multiple Files**: Support for selecting multiple files at once
+- **File Validation**: Size limits, file type restrictions
+- **Progress Tracking**: Upload progress for each file
+- **Error Handling**: User-friendly error messages
+- **Accessibility**: Proper ARIA labels and keyboard navigation
+
+### 3. Technical Considerations
+- Use the HTML5 File API for file handling
+- Implement proper event handlers for drag events
+- Add debouncing for performance
+- Include comprehensive error boundaries
+- Ensure mobile responsiveness
+
+### 4. Styling Approach
+- CSS modules for component-scoped styles
+- Responsive design with mobile-first approach
+- Smooth animations and transitions
+- Consistent with your existing design system
+
+This implementation will provide a robust, user-friendly file upload experience that integrates seamlessly with your existing application.`,
+  timestamp: new Date(baseTimestamp.getTime() + 5000).toISOString(),
+  conversation_id: "demo-conversation",
+  idx: 5,
+};
+
+export const mixedTimelineMessages: AgentMessage[] = [
+  ...sampleTimelineMessages,
+  longTimelineMessage,
+  {
+    type: "user",
+    end_of_turn: true,
+    content: "That sounds great! Can you also add file type validation?",
+    timestamp: new Date(baseTimestamp.getTime() + 6000).toISOString(),
+    conversation_id: "demo-conversation",
+    idx: 6,
+  },
+];
diff --git a/webui/src/web-components/demo/demo-fixtures/tool-calls.ts b/webui/src/web-components/demo/demo-fixtures/tool-calls.ts
new file mode 100644
index 0000000..eaa5009
--- /dev/null
+++ b/webui/src/web-components/demo/demo-fixtures/tool-calls.ts
@@ -0,0 +1,101 @@
+/**
+ * Shared fake tool call data for demos
+ */
+
+import { ToolCall } from "../../../types";
+
+export const sampleToolCalls: ToolCall[] = [
+  {
+    name: "multiple-choice",
+    input: JSON.stringify({
+      question: "What is your favorite programming language?",
+      choices: [
+        "JavaScript",
+        "TypeScript",
+        "Python",
+        "Go",
+        "Rust",
+        "Java",
+        "C#",
+        "C++",
+      ],
+    }),
+    tool_call_id: "toolu_01choice123",
+    result_message: {
+      type: "tool",
+      end_of_turn: false,
+      content: "Go",
+      tool_result: JSON.stringify({
+        selected: "Go",
+      }),
+      timestamp: new Date().toISOString(),
+      conversation_id: "demo-conversation",
+      idx: 1,
+    },
+  },
+  {
+    name: "multiple-choice",
+    input: JSON.stringify({
+      question: "Which feature would you like to implement next?",
+      choices: [
+        "Dark mode",
+        "User profiles",
+        "Social sharing",
+        "Analytics dashboard",
+      ],
+    }),
+    tool_call_id: "toolu_01choice456",
+    // No result yet, showing the choices without a selection
+  },
+  {
+    name: "bash",
+    input: JSON.stringify({
+      command:
+        "docker ps -a --format '{{.ID}} {{.Image }} {{.Names}}' | grep sketch | awk '{print $1 }' | xargs -I {} docker rm {} && docker image prune -af",
+    }),
+    tool_call_id: "toolu_01bash123",
+    result: "Removed containers and pruned images",
+  },
+  {
+    name: "patch",
+    input: JSON.stringify({
+      path: "/app/src/components/Button.tsx",
+      patches: [
+        {
+          operation: "replace",
+          oldText: "className='btn'",
+          newText: "className='btn btn-primary'",
+        },
+      ],
+    }),
+    tool_call_id: "toolu_01patch123",
+    result: "Applied patch successfully",
+  },
+  {
+    name: "think",
+    input: JSON.stringify({
+      thoughts:
+        "I need to analyze the user's requirements and break this down into smaller steps. The user wants to implement a file upload feature with drag-and-drop support.",
+    }),
+    tool_call_id: "toolu_01think123",
+    result: "Recorded thoughts for planning",
+  },
+];
+
+export const longBashCommand: ToolCall = {
+  name: "bash",
+  input: JSON.stringify({
+    command:
+      'git commit --allow-empty -m "chore: create empty commit with very long message\n\nThis is an extremely long commit message to demonstrate how Git handles verbose commit messages.\nThis empty commit has no actual code changes, but contains a lengthy explanation.\n\nThe empty commit pattern can be useful in several scenarios:\n1. Triggering CI/CD pipelines without modifying code\n2. Marking significant project milestones or releases\n3. Creating annotated reference points in the commit history\n4. Documenting important project decisions"',
+  }),
+  tool_call_id: "toolu_01longbash",
+  result:
+    "[main abc1234] chore: create empty commit with very long message\n\ncommit created successfully",
+};
+
+export const multipleToolCallGroups = [
+  [sampleToolCalls[0], sampleToolCalls[1]], // Multiple choice examples
+  [sampleToolCalls[2]], // Single bash command
+  [sampleToolCalls[3], sampleToolCalls[4]], // Patch and think
+  [longBashCommand], // Long command example
+];
diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
new file mode 100644
index 0000000..53f9fba
--- /dev/null
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -0,0 +1,219 @@
+/**
+ * Demo runner that dynamically loads and executes demo modules
+ */
+
+import {
+  DemoModule,
+  DemoRegistry,
+  DemoRunnerOptions,
+  DemoNavigationEvent,
+} from "./types";
+
+export class DemoRunner {
+  private container: HTMLElement;
+  private basePath: string;
+  private currentDemo: DemoModule | null = null;
+  private currentComponentName: string | null = null;
+  private onDemoChange?: (componentName: string, demo: DemoModule) => void;
+
+  constructor(options: DemoRunnerOptions) {
+    this.container = options.container;
+    this.basePath = options.basePath || "../";
+    this.onDemoChange = options.onDemoChange;
+  }
+
+  /**
+   * Load and display a demo for the specified component
+   */
+  async loadDemo(componentName: string): Promise<void> {
+    try {
+      // Cleanup current demo if any
+      await this.cleanup();
+
+      // Dynamically import the demo module
+      const demoModule = await import(
+        /* @vite-ignore */ `../${componentName}.demo.ts`
+      );
+      const demo: DemoModule = demoModule.default;
+
+      if (!demo) {
+        throw new Error(
+          `Demo module for ${componentName} does not export a default DemoModule`,
+        );
+      }
+
+      // Clear container
+      this.container.innerHTML = "";
+
+      // Load additional styles if specified
+      if (demo.styles) {
+        for (const styleUrl of demo.styles) {
+          await this.loadStylesheet(styleUrl);
+        }
+      }
+
+      // Add custom styles if specified
+      if (demo.customStyles) {
+        this.addCustomStyles(demo.customStyles, componentName);
+      }
+
+      // Import required component modules
+      if (demo.imports) {
+        for (const importPath of demo.imports) {
+          await import(/* @vite-ignore */ this.basePath + importPath);
+        }
+      }
+
+      // Set up the demo
+      await demo.setup(this.container);
+
+      // Update current state
+      this.currentDemo = demo;
+      this.currentComponentName = componentName;
+
+      // Notify listeners
+      if (this.onDemoChange) {
+        this.onDemoChange(componentName, demo);
+      }
+
+      // Dispatch navigation event
+      const event: DemoNavigationEvent = new CustomEvent("demo-navigation", {
+        detail: { componentName, demo },
+      });
+      document.dispatchEvent(event);
+    } catch (error) {
+      console.error(`Failed to load demo for ${componentName}:`, error);
+      this.showError(`Failed to load demo for ${componentName}`, error);
+    }
+  }
+
+  /**
+   * Get list of available demo components by scanning for .demo.ts files
+   */
+  async getAvailableComponents(): Promise<string[]> {
+    // For now, we'll maintain a registry of known demo components
+    // This could be improved with build-time generation
+    const knownComponents = [
+      "sketch-chat-input",
+      "sketch-container-status",
+      "sketch-tool-calls",
+    ];
+
+    // Filter to only components that actually have demo files
+    const availableComponents: string[] = [];
+    for (const component of knownComponents) {
+      try {
+        // Test if the demo module exists by attempting to import it
+        const demoModule = await import(
+          /* @vite-ignore */ `../${component}.demo.ts`
+        );
+        if (demoModule.default) {
+          availableComponents.push(component);
+        }
+      } catch (error) {
+        console.warn(`Demo not available for ${component}:`, error);
+        // Component demo doesn't exist, skip it
+      }
+    }
+
+    return availableComponents;
+  }
+
+  /**
+   * Cleanup current demo
+   */
+  private async cleanup(): Promise<void> {
+    if (this.currentDemo?.cleanup) {
+      await this.currentDemo.cleanup();
+    }
+
+    // Remove custom styles
+    if (this.currentComponentName) {
+      this.removeCustomStyles(this.currentComponentName);
+    }
+
+    this.currentDemo = null;
+    this.currentComponentName = null;
+  }
+
+  /**
+   * Load a CSS stylesheet dynamically
+   */
+  private async loadStylesheet(url: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = url;
+      link.onload = () => resolve();
+      link.onerror = () =>
+        reject(new Error(`Failed to load stylesheet: ${url}`));
+      document.head.appendChild(link);
+    });
+  }
+
+  /**
+   * Add custom CSS styles for a demo
+   */
+  private addCustomStyles(css: string, componentName: string): void {
+    const styleId = `demo-custom-styles-${componentName}`;
+
+    // Remove existing styles for this component
+    const existing = document.getElementById(styleId);
+    if (existing) {
+      existing.remove();
+    }
+
+    // Add new styles
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = css;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * Remove custom styles for a component
+   */
+  private removeCustomStyles(componentName: string): void {
+    const styleId = `demo-custom-styles-${componentName}`;
+    const existing = document.getElementById(styleId);
+    if (existing) {
+      existing.remove();
+    }
+  }
+
+  /**
+   * Show error message in the demo container
+   */
+  private showError(message: string, error: any): void {
+    this.container.innerHTML = `
+      <div style="
+        padding: 20px;
+        background: #fee;
+        border: 1px solid #fcc;
+        border-radius: 4px;
+        color: #800;
+        font-family: monospace;
+      ">
+        <h3>Demo Error</h3>
+        <p><strong>${message}</strong></p>
+        <details>
+          <summary>Error Details</summary>
+          <pre>${error.stack || error.message || error}</pre>
+        </details>
+      </div>
+    `;
+  }
+
+  /**
+   * Get current demo info
+   */
+  getCurrentDemo(): { componentName: string; demo: DemoModule } | null {
+    if (this.currentComponentName && this.currentDemo) {
+      return {
+        componentName: this.currentComponentName,
+        demo: this.currentDemo,
+      };
+    }
+    return null;
+  }
+}
diff --git a/webui/src/web-components/demo/demo-framework/types.ts b/webui/src/web-components/demo/demo-framework/types.ts
new file mode 100644
index 0000000..88b1fc5
--- /dev/null
+++ b/webui/src/web-components/demo/demo-framework/types.ts
@@ -0,0 +1,57 @@
+/**
+ * TypeScript interfaces for the demo module system
+ */
+
+export interface DemoModule {
+  /** Display title for the demo */
+  title: string;
+
+  /** Component imports required for this demo */
+  imports: string[];
+
+  /** Additional CSS files to load (optional) */
+  styles?: string[];
+
+  /** Setup function called when demo is loaded */
+  setup: (container: HTMLElement) => void | Promise<void>;
+
+  /** Cleanup function called when demo is unloaded (optional) */
+  cleanup?: () => void | Promise<void>;
+
+  /** Demo-specific CSS styles (optional) */
+  customStyles?: string;
+
+  /** Description of what this demo shows (optional) */
+  description?: string;
+}
+
+/**
+ * Registry of available demo modules
+ */
+export interface DemoRegistry {
+  [componentName: string]: () => Promise<{ default: DemoModule }>;
+}
+
+/**
+ * Options for the demo runner
+ */
+export interface DemoRunnerOptions {
+  /** Container element to render demos in */
+  container: HTMLElement;
+
+  /** Base path for component imports */
+  basePath?: string;
+
+  /** Callback when demo changes */
+  onDemoChange?: (componentName: string, demo: DemoModule) => void;
+}
+
+/**
+ * Event dispatched when demo navigation occurs
+ */
+export interface DemoNavigationEvent extends CustomEvent {
+  detail: {
+    componentName: string;
+    demo: DemoModule;
+  };
+}
diff --git a/webui/src/web-components/demo/demo-runner.html b/webui/src/web-components/demo/demo-runner.html
new file mode 100644
index 0000000..94af314
--- /dev/null
+++ b/webui/src/web-components/demo/demo-runner.html
@@ -0,0 +1,328 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sketch Web Components Demo Runner</title>
+    <link rel="stylesheet" href="demo.css" />
+    <link rel="stylesheet" href="/dist/tailwind.css" />
+    <style>
+      :root {
+        --demo-primary: #0969da;
+        --demo-secondary: #656d76;
+        --demo-background: #f6f8fa;
+        --demo-border: #d1d9e0;
+      }
+
+      .demo-runner {
+        display: flex;
+        height: 100vh;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      }
+
+      .demo-sidebar {
+        width: 280px;
+        background: var(--demo-background);
+        border-right: 1px solid var(--demo-border);
+        padding: 20px;
+        overflow-y: auto;
+      }
+
+      .demo-content {
+        flex: 1;
+        padding: 20px;
+        overflow-y: auto;
+      }
+
+      .demo-nav {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      .demo-nav li {
+        margin-bottom: 4px;
+      }
+
+      .demo-nav button {
+        width: 100%;
+        text-align: left;
+        padding: 8px 12px;
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 14px;
+        color: var(--demo-secondary);
+        transition: all 0.2s;
+      }
+
+      .demo-nav button:hover {
+        background: #ffffff;
+        border-color: var(--demo-border);
+        color: var(--demo-primary);
+      }
+
+      .demo-nav button.active {
+        background: var(--demo-primary);
+        color: white;
+      }
+
+      .demo-header {
+        margin-bottom: 20px;
+        padding-bottom: 15px;
+        border-bottom: 1px solid var(--demo-border);
+      }
+
+      .demo-title {
+        font-size: 24px;
+        font-weight: 600;
+        margin: 0 0 8px 0;
+        color: #24292f;
+      }
+
+      .demo-description {
+        color: var(--demo-secondary);
+        margin: 0;
+        font-size: 14px;
+      }
+
+      .demo-container {
+        background: white;
+        border: 1px solid var(--demo-border);
+        border-radius: 8px;
+        min-height: 400px;
+        padding: 20px;
+      }
+
+      .demo-loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 200px;
+        color: var(--demo-secondary);
+      }
+
+      .demo-welcome {
+        text-align: center;
+        padding: 60px 20px;
+        color: var(--demo-secondary);
+      }
+
+      .demo-welcome h2 {
+        margin-bottom: 10px;
+        color: #24292f;
+      }
+
+      .search-box {
+        width: 100%;
+        padding: 8px 12px;
+        margin-bottom: 16px;
+        border: 1px solid var(--demo-border);
+        border-radius: 6px;
+        font-size: 14px;
+      }
+
+      .search-box:focus {
+        outline: none;
+        border-color: var(--demo-primary);
+      }
+
+      .demo-error {
+        padding: 20px;
+        background: #ffeaea;
+        border: 1px solid #ffcccc;
+        border-radius: 6px;
+        color: #d73a49;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="demo-runner">
+      <nav class="demo-sidebar">
+        <h1 style="font-size: 18px; margin: 0 0 20px 0; color: #24292f">
+          Component Demos
+        </h1>
+
+        <input
+          type="text"
+          class="search-box"
+          placeholder="Search components..."
+          id="demo-search"
+        />
+
+        <ul class="demo-nav" id="demo-nav">
+          <!-- Component list will be populated dynamically -->
+        </ul>
+      </nav>
+
+      <main class="demo-content">
+        <div class="demo-header" id="demo-header" style="display: none">
+          <h1 class="demo-title" id="demo-title"></h1>
+          <p class="demo-description" id="demo-description"></p>
+        </div>
+
+        <div class="demo-container" id="demo-container">
+          <div class="demo-welcome">
+            <h2>Welcome to Sketch Component Demos</h2>
+            <p>Select a component from the sidebar to view its demo.</p>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <script type="module">
+      import { DemoRunner } from "./demo-framework/demo-runner.ts";
+
+      class DemoRunnerApp {
+        constructor() {
+          this.demoRunner = new DemoRunner({
+            container: document.getElementById("demo-container"),
+            onDemoChange: this.onDemoChange.bind(this),
+          });
+
+          this.searchBox = document.getElementById("demo-search");
+          this.navList = document.getElementById("demo-nav");
+          this.demoHeader = document.getElementById("demo-header");
+          this.demoTitle = document.getElementById("demo-title");
+          this.demoDescription = document.getElementById("demo-description");
+
+          this.currentComponent = null;
+          this.availableComponents = [];
+
+          this.init();
+        }
+
+        async init() {
+          try {
+            // Load available components
+            this.availableComponents =
+              await this.demoRunner.getAvailableComponents();
+            this.renderNavigation();
+
+            // Set up search
+            this.searchBox.addEventListener(
+              "input",
+              this.handleSearch.bind(this),
+            );
+
+            // Handle URL hash for direct linking
+            this.handleHashChange();
+            window.addEventListener(
+              "hashchange",
+              this.handleHashChange.bind(this),
+            );
+          } catch (error) {
+            console.error("Failed to initialize demo runner:", error);
+            this.showError("Failed to load demo components");
+          }
+        }
+
+        renderNavigation(filter = "") {
+          const filteredComponents = this.availableComponents.filter(
+            (component) =>
+              component.toLowerCase().includes(filter.toLowerCase()),
+          );
+
+          this.navList.innerHTML = "";
+
+          filteredComponents.forEach((component) => {
+            const li = document.createElement("li");
+            const button = document.createElement("button");
+            button.textContent = this.formatComponentName(component);
+            button.addEventListener("click", () =>
+              this.loadComponent(component),
+            );
+
+            if (component === this.currentComponent) {
+              button.classList.add("active");
+            }
+
+            li.appendChild(button);
+            this.navList.appendChild(li);
+          });
+        }
+
+        formatComponentName(component) {
+          return component
+            .replace(/^sketch-/, "")
+            .replace(/-/g, " ")
+            .replace(/\b\w/g, (l) => l.toUpperCase());
+        }
+
+        async loadComponent(componentName) {
+          if (this.currentComponent === componentName) {
+            return;
+          }
+
+          try {
+            this.showLoading();
+            await this.demoRunner.loadDemo(componentName);
+            this.currentComponent = componentName;
+
+            // Update URL hash
+            window.location.hash = componentName;
+
+            // Update navigation
+            this.renderNavigation(this.searchBox.value);
+          } catch (error) {
+            console.error(`Failed to load demo for ${componentName}:`, error);
+            this.showError(`Failed to load demo for ${componentName}`);
+          }
+        }
+
+        onDemoChange(componentName, demo) {
+          // Update header
+          this.demoTitle.textContent = demo.title;
+          this.demoDescription.textContent = demo.description || "";
+
+          if (demo.description) {
+            this.demoDescription.style.display = "block";
+          } else {
+            this.demoDescription.style.display = "none";
+          }
+
+          this.demoHeader.style.display = "block";
+        }
+
+        handleSearch(event) {
+          this.renderNavigation(event.target.value);
+        }
+
+        handleHashChange() {
+          const hash = window.location.hash.slice(1);
+          if (hash && this.availableComponents.includes(hash)) {
+            this.loadComponent(hash);
+          }
+        }
+
+        showLoading() {
+          document.getElementById("demo-container").innerHTML = `
+            <div class="demo-loading">
+              Loading demo...
+            </div>
+          `;
+        }
+
+        showError(message) {
+          document.getElementById("demo-container").innerHTML = `
+            <div class="demo-error">
+              <strong>Error:</strong> ${message}
+            </div>
+          `;
+        }
+      }
+
+      // Initialize the demo runner when DOM is ready
+      if (document.readyState === "loading") {
+        document.addEventListener(
+          "DOMContentLoaded",
+          () => new DemoRunnerApp(),
+        );
+      } else {
+        new DemoRunnerApp();
+      }
+    </script>
+  </body>
+</html>
diff --git a/webui/src/web-components/demo/generate-index.ts b/webui/src/web-components/demo/generate-index.ts
new file mode 100644
index 0000000..015ef88
--- /dev/null
+++ b/webui/src/web-components/demo/generate-index.ts
@@ -0,0 +1,198 @@
+/**
+ * Build-time script to auto-generate demo index page
+ */
+
+import * as fs from "fs";
+import * as path from "path";
+
+interface DemoInfo {
+  name: string;
+  title: string;
+  description?: string;
+  fileName: string;
+}
+
+async function generateIndex() {
+  const demoDir = path.join(__dirname);
+  const files = await fs.promises.readdir(demoDir);
+
+  // Find all .demo.ts files
+  const demoFiles = files.filter((file) => file.endsWith(".demo.ts"));
+
+  const demos: DemoInfo[] = [];
+
+  for (const file of demoFiles) {
+    const componentName = file.replace(".demo.ts", "");
+    const filePath = path.join(demoDir, file);
+
+    try {
+      // Read the file content to extract title and description
+      const content = await fs.promises.readFile(filePath, "utf-8");
+
+      // Extract title from the demo module
+      const titleMatch = content.match(/title:\s*['"]([^'"]+)['"]/);
+      const descriptionMatch = content.match(/description:\s*['"]([^'"]+)['"]/);
+
+      demos.push({
+        name: componentName,
+        title: titleMatch ? titleMatch[1] : formatComponentName(componentName),
+        description: descriptionMatch ? descriptionMatch[1] : undefined,
+        fileName: file,
+      });
+    } catch (error) {
+      console.warn(`Failed to process demo file ${file}:`, error);
+    }
+  }
+
+  // Sort demos alphabetically
+  demos.sort((a, b) => a.title.localeCompare(b.title));
+
+  // Generate HTML index
+  const html = generateIndexHTML(demos);
+
+  // Write the generated index
+  const indexPath = path.join(demoDir, "index-generated.html");
+  await fs.promises.writeFile(indexPath, html, "utf-8");
+
+  console.log(`Generated demo index with ${demos.length} components`);
+  console.log("Available demos:", demos.map((d) => d.name).join(", "));
+}
+
+function formatComponentName(name: string): string {
+  return name
+    .replace(/^sketch-/, "")
+    .replace(/-/g, " ")
+    .replace(/\b\w/g, (l) => l.toUpperCase());
+}
+
+function generateIndexHTML(demos: DemoInfo[]): string {
+  const demoLinks = demos
+    .map((demo) => {
+      const href = `demo-runner.html#${demo.name}`;
+      const description = demo.description ? ` - ${demo.description}` : "";
+
+      return `      <li>
+        <a href="${href}">
+          <strong>${demo.title}</strong>${description}
+        </a>
+      </li>`;
+    })
+    .join("\n");
+
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sketch Web Components - Demo Index</title>
+    <link rel="stylesheet" href="demo.css" />
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        max-width: 800px;
+        margin: 40px auto;
+        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;
+        border: 1px solid #d1d9e0;
+        border-radius: 6px;
+        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;
+        border-radius: 6px;
+        margin: 20px 0;
+        border-left: 4px solid #f9c23c;
+      }
+      
+      .runner-link {
+        display: inline-block;
+        padding: 10px 20px;
+        background: #0969da;
+        color: white;
+        text-decoration: none;
+        border-radius: 6px;
+        margin-top: 20px;
+      }
+      
+      .runner-link:hover {
+        background: #0860ca;
+      }
+    </style>
+  </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>
+    
+    <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.
+    </p>
+  </body>
+</html>
+`;
+}
+
+// Run the generator if this script is executed directly
+if (require.main === module) {
+  generateIndex().catch(console.error);
+}
+
+export { generateIndex };
diff --git a/webui/src/web-components/demo/index-generated.html b/webui/src/web-components/demo/index-generated.html
new file mode 100644
index 0000000..7460e78
--- /dev/null
+++ b/webui/src/web-components/demo/index-generated.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sketch Web Components - Demo Index</title>
+    <link rel="stylesheet" href="demo.css" />
+    <style>
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        max-width: 800px;
+        margin: 40px auto;
+        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;
+        border: 1px solid #d1d9e0;
+        border-radius: 6px;
+        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;
+        border-radius: 6px;
+        margin: 20px 0;
+        border-left: 4px solid #f9c23c;
+      }
+
+      .runner-link {
+        display: inline-block;
+        padding: 10px 20px;
+        background: #0969da;
+        color: white;
+        text-decoration: none;
+        border-radius: 6px;
+        margin-top: 20px;
+      }
+
+      .runner-link:hover {
+        background: #0860ca;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Sketch Web Components Demo Index</h1>
+
+    <div class="stats">
+      <strong>Auto-generated index</strong><br />
+      Found 3 demo components • Last updated: 6/25/2025, 8:50:21 PM
+    </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>
+
+    <h2>Available Component Demos</h2>
+
+    <ul class="demo-list">
+      <li>
+        <a href="demo-runner.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">
+          <strong>Container Status Demo</strong> - Display container status
+          information with usage statistics
+        </a>
+      </li>
+      <li>
+        <a href="demo-runner.html#sketch-tool-calls">
+          <strong>Tool Calls Demo</strong> - Interactive tool call display with
+          various tool types
+        </a>
+      </li>
+    </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.
+    </p>
+  </body>
+</html>
diff --git a/webui/src/web-components/demo/readme.md b/webui/src/web-components/demo/readme.md
index 324d077..686eb63 100644
--- a/webui/src/web-components/demo/readme.md
+++ b/webui/src/web-components/demo/readme.md
@@ -1,5 +1,257 @@
-# Stand-alone demo pages for sketch web components
+# Sketch Web Components Demo System
 
-These are handy for iterating on specific component UI issues in isolation from the rest of the sketch application, and without having to start a full backend to serve the full frontend app UI.
+This directory contains an automated demo system for Sketch web components that reduces maintenance overhead and provides a consistent development experience.
 
-See [README](../../../readme.md#development-mode) for more information on how to run the demo pages.
+## Overview
+
+The demo system consists of:
+
+- **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
+- **Auto-generated Index** - Automatically maintained list of available demos
+
+## Quick Start
+
+### Running Demos
+
+```bash
+# Start the demo server
+npm run demo
+
+# Visit the demo runner
+open http://localhost:5173/src/web-components/demo/demo-runner.html
+
+# Or view the auto-generated index
+open http://localhost:5173/src/web-components/demo/index-generated.html
+```
+
+### Creating a New Demo
+
+1. Create a new demo module file: `your-component.demo.ts`
+
+```typescript
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils, sampleData } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Your Component Demo",
+  description: "Interactive demo showing component functionality",
+  imports: ["your-component.ts"], // Component files to import
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const section = demoUtils.createDemoSection(
+      "Basic Usage",
+      "Description of what this demo shows",
+    );
+
+    // Create your component
+    const component = document.createElement("your-component") as any;
+    component.data = sampleData.yourData;
+
+    // Add to container
+    section.appendChild(component);
+    container.appendChild(section);
+  },
+
+  cleanup: async () => {
+    // Optional cleanup when demo is unloaded
+  },
+};
+
+export default demo;
+```
+
+2. Regenerate the index:
+
+```bash
+cd src/web-components/demo
+npx tsx generate-index.ts
+```
+
+3. Your demo will automatically appear in the demo runner!
+
+## Demo Module Structure
+
+### Required Properties
+
+- `title`: Display name for the demo
+- `imports`: Array of component files to import (relative to parent directory)
+- `setup`: Function that creates the demo content
+
+### Optional Properties
+
+- `description`: Brief description of what the demo shows
+- `styles`: Additional CSS files to load
+- `customStyles`: Inline CSS styles
+- `cleanup`: Function called when demo is unloaded
+
+### Setup Function
+
+The setup function receives a container element and should populate it with demo content:
+
+```typescript
+setup: async (container: HTMLElement) => {
+  // Use demo utilities for consistent styling
+  const section = demoUtils.createDemoSection("Title", "Description");
+
+  // Create and configure your component
+  const component = document.createElement("my-component");
+  component.setAttribute("data", JSON.stringify(sampleData));
+
+  // Add interactive controls
+  const button = demoUtils.createButton("Reset", () => {
+    component.reset();
+  });
+
+  // Assemble the demo
+  section.appendChild(component);
+  section.appendChild(button);
+  container.appendChild(section);
+};
+```
+
+## Shared Fixtures
+
+The `demo-fixtures/` directory contains reusable fake data and utilities:
+
+```typescript
+import {
+  sampleToolCalls,
+  sampleTimelineMessages,
+  sampleContainerState,
+  demoUtils,
+} from "./demo-fixtures/index";
+```
+
+### Available Fixtures
+
+- `sampleToolCalls` - Various tool call examples
+- `sampleTimelineMessages` - Chat/timeline message data
+- `sampleContainerState` - Container status information
+- `demoUtils` - Helper functions for creating demo UI elements
+
+### Demo Utilities
+
+- `demoUtils.createDemoSection(title, description)` - Create a styled demo section
+- `demoUtils.createButton(text, onClick)` - Create a styled button
+- `demoUtils.delay(ms)` - Promise-based delay function
+
+## Benefits of This System
+
+### For Developers
+
+- **TypeScript Support**: Full type checking for demo code and shared data
+- **Hot Module Replacement**: Instant updates when demo code changes
+- **Shared Data**: Consistent fake data across all demos
+- **Reusable Utilities**: Common demo patterns abstracted into utilities
+- **Auto-discovery**: New demos automatically appear in the index
+
+### For Maintenance
+
+- **No Boilerplate**: No need to copy HTML structure between demos
+- **Centralized Styling**: Demo appearance controlled in one place
+- **Automated Index**: Never forget to update the index page
+- **Type Safety**: Catch errors early with TypeScript compilation
+
+## Vite Integration
+
+The system is designed to work seamlessly with Vite:
+
+- **Dynamic Imports**: Demo modules are loaded on demand
+- **TypeScript Compilation**: `.demo.ts` files are compiled automatically
+- **HMR Support**: Changes to demos or fixtures trigger instant reloads
+- **Dependency Tracking**: Vite knows when to reload based on imports
+
+## Migration from HTML Demos
+
+To convert an existing HTML demo:
+
+1. Extract the component setup JavaScript into a `setup` function
+2. Move shared data to `demo-fixtures/`
+3. Replace HTML boilerplate with `demoUtils` calls
+4. Convert inline styles to `customStyles` property
+5. Test with the demo runner
+
+## File Structure
+
+```
+demo/
+├── demo-framework/
+│   ├── types.ts           # TypeScript interfaces
+│   └── demo-runner.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
+├── index-generated.html   # Auto-generated index
+├── *.demo.ts             # Individual demo modules
+└── readme.md             # This file
+```
+
+## Advanced Usage
+
+### Custom Styling
+
+```typescript
+const demo: DemoModule = {
+  // ...
+  customStyles: `
+    .my-demo-container {
+      background: #f0f0f0;
+      padding: 20px;
+      border-radius: 8px;
+    }
+  `,
+  setup: async (container) => {
+    container.className = "my-demo-container";
+    // ...
+  },
+};
+```
+
+### Progressive Loading
+
+```typescript
+setup: async (container) => {
+  const messages = [];
+  const timeline = document.createElement("sketch-timeline");
+
+  // Add messages progressively
+  for (let i = 0; i < sampleMessages.length; i++) {
+    await demoUtils.delay(500);
+    messages.push(sampleMessages[i]);
+    timeline.messages = [...messages];
+  }
+};
+```
+
+### Cleanup
+
+```typescript
+let intervalId: number;
+
+const demo: DemoModule = {
+  // ...
+  setup: async (container) => {
+    // Set up interval for updates
+    intervalId = setInterval(() => {
+      updateComponent();
+    }, 1000);
+  },
+
+  cleanup: async () => {
+    // Clean up interval
+    if (intervalId) {
+      clearInterval(intervalId);
+    }
+  },
+};
+```
+
+For more examples, see the existing demo modules in this directory.
diff --git a/webui/src/web-components/demo/sketch-app-shell.demo.html b/webui/src/web-components/demo/sketch-app-shell.demo.html
index 51c3564..651c46a 100644
--- a/webui/src/web-components/demo/sketch-app-shell.demo.html
+++ b/webui/src/web-components/demo/sketch-app-shell.demo.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>sketch coding assistant</title>
     <link rel="stylesheet" href="/src/sketch-app-shell.css" />
-    <link rel="stylesheet" href="/src/tailwind.css" />
+    <link rel="stylesheet" href="/dist/tailwind.css" />
 
     <script type="module">
       const { worker } = await import("./mocks/browser");
diff --git a/webui/src/web-components/demo/sketch-chat-input.demo.ts b/webui/src/web-components/demo/sketch-chat-input.demo.ts
new file mode 100644
index 0000000..f18c0b9
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-chat-input.demo.ts
@@ -0,0 +1,114 @@
+/**
+ * Demo module for sketch-chat-input component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Chat Input Demo",
+  description: "Interactive chat input component with send functionality",
+  imports: ["../sketch-chat-input"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic Chat Input",
+      "Type a message and press Enter or click Send",
+    );
+
+    const messagesSection = demoUtils.createDemoSection(
+      "Chat Messages",
+      "Messages will appear here when sent",
+    );
+
+    // Create chat messages container
+    const messagesDiv = document.createElement("div");
+    messagesDiv.id = "chat-messages";
+    messagesDiv.style.cssText = `
+      min-height: 100px;
+      max-height: 200px;
+      overflow-y: auto;
+      border: 1px solid #d1d9e0;
+      border-radius: 6px;
+      padding: 10px;
+      margin-bottom: 10px;
+      background: #f6f8fa;
+    `;
+
+    // Create chat input
+    const chatInput = document.createElement("sketch-chat-input") as any;
+    chatInput.content = "Hello, how can I help you today?";
+
+    // Add message to display
+    const addMessage = (message: string, isUser: boolean = true) => {
+      const messageDiv = document.createElement("div");
+      messageDiv.style.cssText = `
+        padding: 8px 12px;
+        margin: 4px 0;
+        border-radius: 6px;
+        background: ${isUser ? "#0969da" : "#f1f3f4"};
+        color: ${isUser ? "white" : "#24292f"};
+        max-width: 80%;
+        margin-left: ${isUser ? "auto" : "0"};
+        margin-right: ${isUser ? "0" : "auto"};
+      `;
+      messageDiv.textContent = message;
+      messagesDiv.appendChild(messageDiv);
+      messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    };
+
+    // Handle send events
+    chatInput.addEventListener("send-chat", (evt: any) => {
+      const message = evt.detail.message;
+      if (message.trim()) {
+        addMessage(message, true);
+        chatInput.content = "";
+
+        // Simulate bot response after a delay
+        setTimeout(() => {
+          const responses = [
+            "Thanks for your message!",
+            "I understand your request.",
+            "Let me help you with that.",
+            "That's a great question!",
+            "I'll look into that for you.",
+          ];
+          const randomResponse =
+            responses[Math.floor(Math.random() * responses.length)];
+          addMessage(randomResponse, false);
+        }, 1000);
+      }
+    });
+
+    // Add some sample messages
+    addMessage("Welcome to the chat demo!", false);
+    addMessage("This is a sample user message", true);
+
+    // Control buttons
+    const controlsDiv = document.createElement("div");
+    controlsDiv.style.cssText = "margin-top: 15px;";
+
+    const clearButton = demoUtils.createButton("Clear Messages", () => {
+      messagesDiv.innerHTML = "";
+      addMessage("Chat cleared!", false);
+    });
+
+    const presetButton = demoUtils.createButton("Add Preset Message", () => {
+      chatInput.content = "Can you help me implement a file upload component?";
+    });
+
+    controlsDiv.appendChild(clearButton);
+    controlsDiv.appendChild(presetButton);
+
+    // Assemble the demo
+    messagesSection.appendChild(messagesDiv);
+    basicSection.appendChild(chatInput);
+    basicSection.appendChild(controlsDiv);
+
+    container.appendChild(messagesSection);
+    container.appendChild(basicSection);
+  },
+};
+
+export default demo;
diff --git a/webui/src/web-components/demo/sketch-container-status.demo.html b/webui/src/web-components/demo/sketch-container-status.demo.html
index 3b5725b..a48584d 100644
--- a/webui/src/web-components/demo/sketch-container-status.demo.html
+++ b/webui/src/web-components/demo/sketch-container-status.demo.html
@@ -2,7 +2,7 @@
   <head>
     <title>sketch-container-status demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <link rel="stylesheet" href="/src/tailwind.css" />
+    <link rel="stylesheet" href="/dist/tailwind.css" />
     <script type="module" src="../sketch-container-status.ts"></script>
 
     <script>
diff --git a/webui/src/web-components/demo/sketch-container-status.demo.ts b/webui/src/web-components/demo/sketch-container-status.demo.ts
new file mode 100644
index 0000000..20d6a47
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-container-status.demo.ts
@@ -0,0 +1,147 @@
+/**
+ * Demo module for sketch-container-status component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import {
+  demoUtils,
+  sampleContainerState,
+  lightUsageState,
+  heavyUsageState,
+} from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Container Status Demo",
+  description: "Display container status information with usage statistics",
+  imports: ["../sketch-container-status"],
+  styles: ["/dist/tailwind.css"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic Container Status",
+      "Shows current container state with usage information",
+    );
+
+    const variationsSection = demoUtils.createDemoSection(
+      "Usage Variations",
+      "Different usage levels and states",
+    );
+
+    // Basic status component
+    const basicStatus = document.createElement(
+      "sketch-container-status",
+    ) as any;
+    basicStatus.id = "basic-status";
+    basicStatus.state = sampleContainerState;
+
+    // Light usage status
+    const lightStatus = document.createElement(
+      "sketch-container-status",
+    ) as any;
+    lightStatus.id = "light-status";
+    lightStatus.state = lightUsageState;
+
+    const lightLabel = document.createElement("h4");
+    lightLabel.textContent = "Light Usage";
+    lightLabel.style.cssText = "margin: 20px 0 10px 0; color: #24292f;";
+
+    // Heavy usage status
+    const heavyStatus = document.createElement(
+      "sketch-container-status",
+    ) as any;
+    heavyStatus.id = "heavy-status";
+    heavyStatus.state = heavyUsageState;
+
+    const heavyLabel = document.createElement("h4");
+    heavyLabel.textContent = "Heavy Usage";
+    heavyLabel.style.cssText = "margin: 20px 0 10px 0; color: #24292f;";
+
+    // Control buttons for interaction
+    const controlsDiv = document.createElement("div");
+    controlsDiv.style.cssText = "margin-top: 20px;";
+
+    const updateBasicButton = demoUtils.createButton(
+      "Update Basic Status",
+      () => {
+        const updatedState = {
+          ...sampleContainerState,
+          message_count: sampleContainerState.message_count + 1,
+          total_usage: {
+            ...sampleContainerState.total_usage!,
+            messages: sampleContainerState.total_usage!.messages + 1,
+            total_cost_usd: Number(
+              (sampleContainerState.total_usage!.total_cost_usd + 0.05).toFixed(
+                2,
+              ),
+            ),
+          },
+        };
+        basicStatus.state = updatedState;
+      },
+    );
+
+    const toggleSSHButton = demoUtils.createButton("Toggle SSH Status", () => {
+      const currentState = basicStatus.state;
+      basicStatus.state = {
+        ...currentState,
+        ssh_available: !currentState.ssh_available,
+        ssh_error: currentState.ssh_available ? "Connection failed" : undefined,
+      };
+    });
+
+    const resetButton = demoUtils.createButton("Reset to Defaults", () => {
+      basicStatus.state = sampleContainerState;
+      lightStatus.state = lightUsageState;
+      heavyStatus.state = heavyUsageState;
+    });
+
+    controlsDiv.appendChild(updateBasicButton);
+    controlsDiv.appendChild(toggleSSHButton);
+    controlsDiv.appendChild(resetButton);
+
+    // Assemble the demo
+    basicSection.appendChild(basicStatus);
+    basicSection.appendChild(controlsDiv);
+
+    variationsSection.appendChild(lightLabel);
+    variationsSection.appendChild(lightStatus);
+    variationsSection.appendChild(heavyLabel);
+    variationsSection.appendChild(heavyStatus);
+
+    container.appendChild(basicSection);
+    container.appendChild(variationsSection);
+
+    // Add some real-time updates
+    const updateInterval = setInterval(() => {
+      const states = [basicStatus, lightStatus, heavyStatus];
+      states.forEach((status) => {
+        if (status.state) {
+          const updatedState = {
+            ...status.state,
+            message_count:
+              status.state.message_count + Math.floor(Math.random() * 2),
+          };
+          if (Math.random() > 0.7) {
+            // 30% chance to update
+            status.state = updatedState;
+          }
+        }
+      });
+    }, 3000);
+
+    // Store interval for cleanup
+    (container as any).demoInterval = updateInterval;
+  },
+
+  cleanup: async () => {
+    // Clear any intervals
+    const container = document.getElementById("demo-container");
+    if (container && (container as any).demoInterval) {
+      clearInterval((container as any).demoInterval);
+      delete (container as any).demoInterval;
+    }
+  },
+};
+
+export default demo;
diff --git a/webui/src/web-components/demo/sketch-tool-calls.demo.ts b/webui/src/web-components/demo/sketch-tool-calls.demo.ts
new file mode 100644
index 0000000..f279657
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-tool-calls.demo.ts
@@ -0,0 +1,138 @@
+/**
+ * Demo module for sketch-tool-calls component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import {
+  demoUtils,
+  sampleToolCalls,
+  multipleToolCallGroups,
+  longBashCommand,
+} from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Tool Calls Demo",
+  description: "Interactive tool call display with various tool types",
+  imports: ["../sketch-tool-calls"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const basicSection = demoUtils.createDemoSection(
+      "Basic Tool Calls",
+      "Various types of tool calls with results",
+    );
+
+    const interactiveSection = demoUtils.createDemoSection(
+      "Interactive Examples",
+      "Tool calls that can be modified and updated",
+    );
+
+    const groupsSection = demoUtils.createDemoSection(
+      "Tool Call Groups",
+      "Multiple tool calls grouped together",
+    );
+
+    // Basic tool calls component
+    const basicToolCalls = document.createElement("sketch-tool-calls") as any;
+    basicToolCalls.toolCalls = sampleToolCalls.slice(0, 3);
+
+    // Interactive tool calls component
+    const interactiveToolCalls = document.createElement(
+      "sketch-tool-calls",
+    ) as any;
+    interactiveToolCalls.toolCalls = [sampleToolCalls[0]];
+
+    // Control buttons for interaction
+    const controlsDiv = document.createElement("div");
+    controlsDiv.style.cssText = "margin-top: 15px;";
+
+    const addBashButton = demoUtils.createButton("Add Bash Command", () => {
+      const currentCalls = interactiveToolCalls.toolCalls || [];
+      interactiveToolCalls.toolCalls = [...currentCalls, sampleToolCalls[2]];
+    });
+
+    const addLongCommandButton = demoUtils.createButton(
+      "Add Long Command",
+      () => {
+        const currentCalls = interactiveToolCalls.toolCalls || [];
+        interactiveToolCalls.toolCalls = [...currentCalls, longBashCommand];
+      },
+    );
+
+    const clearButton = demoUtils.createButton("Clear Tool Calls", () => {
+      interactiveToolCalls.toolCalls = [];
+    });
+
+    const resetButton = demoUtils.createButton("Reset to Default", () => {
+      interactiveToolCalls.toolCalls = [sampleToolCalls[0]];
+    });
+
+    controlsDiv.appendChild(addBashButton);
+    controlsDiv.appendChild(addLongCommandButton);
+    controlsDiv.appendChild(clearButton);
+    controlsDiv.appendChild(resetButton);
+
+    // Tool call groups
+    const groupsContainer = document.createElement("div");
+    multipleToolCallGroups.forEach((group, index) => {
+      const groupHeader = document.createElement("h4");
+      groupHeader.textContent = `Group ${index + 1}`;
+      groupHeader.style.cssText = "margin: 20px 0 10px 0; color: #24292f;";
+
+      const groupToolCalls = document.createElement("sketch-tool-calls") as any;
+      groupToolCalls.toolCalls = group;
+
+      groupsContainer.appendChild(groupHeader);
+      groupsContainer.appendChild(groupToolCalls);
+    });
+
+    // Progressive loading demo
+    const progressiveSection = demoUtils.createDemoSection(
+      "Progressive Loading Demo",
+      "Tool calls that appear one by one",
+    );
+
+    const progressiveToolCalls = document.createElement(
+      "sketch-tool-calls",
+    ) as any;
+    progressiveToolCalls.toolCalls = [];
+
+    const startProgressiveButton = demoUtils.createButton(
+      "Start Progressive Load",
+      async () => {
+        progressiveToolCalls.toolCalls = [];
+
+        for (let i = 0; i < sampleToolCalls.length; i++) {
+          await demoUtils.delay(1000);
+          const currentCalls = progressiveToolCalls.toolCalls || [];
+          progressiveToolCalls.toolCalls = [
+            ...currentCalls,
+            sampleToolCalls[i],
+          ];
+        }
+      },
+    );
+
+    const progressiveControls = document.createElement("div");
+    progressiveControls.style.cssText = "margin-top: 15px;";
+    progressiveControls.appendChild(startProgressiveButton);
+
+    // Assemble the demo
+    basicSection.appendChild(basicToolCalls);
+
+    interactiveSection.appendChild(interactiveToolCalls);
+    interactiveSection.appendChild(controlsDiv);
+
+    groupsSection.appendChild(groupsContainer);
+
+    progressiveSection.appendChild(progressiveToolCalls);
+    progressiveSection.appendChild(progressiveControls);
+
+    container.appendChild(basicSection);
+    container.appendChild(interactiveSection);
+    container.appendChild(groupsSection);
+    container.appendChild(progressiveSection);
+  },
+};
+
+export default demo;