diff --git a/webui/src/web-components/demo/status-demo.html b/webui/src/web-components/demo/status-demo.html
new file mode 100644
index 0000000..063c693
--- /dev/null
+++ b/webui/src/web-components/demo/status-demo.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Status Demo</title>
+    <script type="module" src="../sketch-call-status.ts"></script>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      .demo-section {
+        margin-bottom: 40px;
+      }
+      .demo-item {
+        margin-bottom: 20px;
+        padding: 15px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+      }
+      h2 {
+        margin-top: 0;
+      }
+      .status-display {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 60px;
+        background-color: #f5f5f5;
+        border-radius: 4px;
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Status Indicators Demo</h1>
+    <p>This demo shows the status indicators with the DISCONNECTED state.</p>
+    
+    <div class="demo-section">
+      <div class="demo-item">
+        <h2>IDLE State</h2>
+        <div class="status-display">
+          <sketch-call-status id="idle-status"></sketch-call-status>
+        </div>
+      </div>
+      
+      <div class="demo-item">
+        <h2>WORKING State</h2>
+        <div class="status-display">
+          <sketch-call-status id="working-status"></sketch-call-status>
+        </div>
+      </div>
+      
+      <div class="demo-item">
+        <h2>DISCONNECTED State</h2>
+        <div class="status-display">
+          <sketch-call-status id="disconnected-status"></sketch-call-status>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Set up the demo after components are defined
+      window.addEventListener('DOMContentLoaded', () => {
+        // IDLE status
+        const idleStatus = document.getElementById('idle-status');
+        idleStatus.isIdle = true;
+        idleStatus.isDisconnected = false;
+        idleStatus.llmCalls = 0;
+        idleStatus.toolCalls = [];
+        
+        // WORKING status
+        const workingStatus = document.getElementById('working-status');
+        workingStatus.isIdle = false;
+        workingStatus.isDisconnected = false;
+        workingStatus.llmCalls = 1;
+        workingStatus.toolCalls = ['bash'];
+        
+        // DISCONNECTED status
+        const disconnectedStatus = document.getElementById('disconnected-status');
+        disconnectedStatus.isIdle = true;
+        disconnectedStatus.isDisconnected = true;
+        disconnectedStatus.llmCalls = 0;
+        disconnectedStatus.toolCalls = [];
+      });
+    </script>
+  </body>
+</html>
\ No newline at end of file