diff --git a/webui/src/web-components/demo/demo-fixtures/call-status.ts b/webui/src/web-components/demo/demo-fixtures/call-status.ts
new file mode 100644
index 0000000..b3c7bec
--- /dev/null
+++ b/webui/src/web-components/demo/demo-fixtures/call-status.ts
@@ -0,0 +1,51 @@
+/**
+ * Shared fake call status data for demos
+ */
+
+export interface CallStatusState {
+  llmCalls: number;
+  toolCalls: string[];
+  agentState: string | null;
+  isIdle: boolean;
+  isDisconnected: boolean;
+}
+
+export const idleCallStatus: CallStatusState = {
+  llmCalls: 0,
+  toolCalls: [],
+  agentState: null,
+  isIdle: true,
+  isDisconnected: false,
+};
+
+export const workingCallStatus: CallStatusState = {
+  llmCalls: 1,
+  toolCalls: ["patch", "bash"],
+  agentState: "analyzing code",
+  isIdle: false,
+  isDisconnected: false,
+};
+
+export const heavyWorkingCallStatus: CallStatusState = {
+  llmCalls: 3,
+  toolCalls: ["keyword_search", "patch", "bash", "think", "codereview"],
+  agentState: "refactoring components",
+  isIdle: false,
+  isDisconnected: false,
+};
+
+export const disconnectedCallStatus: CallStatusState = {
+  llmCalls: 0,
+  toolCalls: [],
+  agentState: null,
+  isIdle: true,
+  isDisconnected: true,
+};
+
+export const workingDisconnectedCallStatus: CallStatusState = {
+  llmCalls: 2,
+  toolCalls: ["browser_navigate", "patch"],
+  agentState: "testing changes",
+  isIdle: false,
+  isDisconnected: true,
+};
diff --git a/webui/src/web-components/demo/demo-fixtures/index.ts b/webui/src/web-components/demo/demo-fixtures/index.ts
index 627b257..0bfcc9d 100644
--- a/webui/src/web-components/demo/demo-fixtures/index.ts
+++ b/webui/src/web-components/demo/demo-fixtures/index.ts
@@ -32,6 +32,16 @@
   createViewModeTestButtons,
 } from "./view-mode-select";
 
+// Call status
+export {
+  idleCallStatus,
+  workingCallStatus,
+  heavyWorkingCallStatus,
+  disconnectedCallStatus,
+  workingDisconnectedCallStatus,
+} from "./call-status";
+export type { CallStatusState } from "./call-status";
+
 // Common demo utilities
 export const demoStyles = {
   container: `
diff --git a/webui/src/web-components/demo/demo-framework/demo-runner.ts b/webui/src/web-components/demo/demo-framework/demo-runner.ts
index 76b7085..c624cb2 100644
--- a/webui/src/web-components/demo/demo-framework/demo-runner.ts
+++ b/webui/src/web-components/demo/demo-framework/demo-runner.ts
@@ -94,6 +94,7 @@
     // For now, we'll maintain a registry of known demo components
     // This could be improved with build-time generation
     const knownComponents = [
+      "sketch-call-status",
       "sketch-chat-input",
       "sketch-container-status",
       "sketch-tool-calls",
diff --git a/webui/src/web-components/demo/sketch-call-status.demo.ts b/webui/src/web-components/demo/sketch-call-status.demo.ts
new file mode 100644
index 0000000..44b8c21
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-call-status.demo.ts
@@ -0,0 +1,258 @@
+/**
+ * Demo module for sketch-call-status component
+ */
+
+import { DemoModule } from "./demo-framework/types";
+import {
+  demoUtils,
+  idleCallStatus,
+  workingCallStatus,
+  heavyWorkingCallStatus,
+  disconnectedCallStatus,
+  workingDisconnectedCallStatus,
+} from "./demo-fixtures/index";
+import type { CallStatusState } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Call Status Demo",
+  description:
+    "Display current LLM and tool call status with visual indicators",
+  imports: ["../sketch-call-status"],
+  styles: ["/dist/tailwind.css"],
+
+  setup: async (container: HTMLElement) => {
+    // Create demo sections
+    const statusVariationsSection = demoUtils.createDemoSection(
+      "Status Variations",
+      "Different states of the call status component",
+    );
+
+    const interactiveSection = demoUtils.createDemoSection(
+      "Interactive Demo",
+      "Dynamically change call status to see real-time updates",
+    );
+
+    // Helper function to create status component with state
+    const createStatusComponent = (
+      id: string,
+      state: CallStatusState,
+      label: string,
+    ) => {
+      const wrapper = document.createElement("div");
+      wrapper.style.cssText =
+        "margin: 15px 0; padding: 10px; border: 1px solid #e1e5e9; border-radius: 6px; background: white;";
+
+      const labelEl = document.createElement("h4");
+      labelEl.textContent = label;
+      labelEl.style.cssText =
+        "margin: 0 0 10px 0; color: #24292f; font-size: 14px; font-weight: 600;";
+
+      const statusComponent = document.createElement(
+        "sketch-call-status",
+      ) as any;
+      statusComponent.id = id;
+      statusComponent.llmCalls = state.llmCalls;
+      statusComponent.toolCalls = state.toolCalls;
+      statusComponent.agentState = state.agentState;
+      statusComponent.isIdle = state.isIdle;
+      statusComponent.isDisconnected = state.isDisconnected;
+
+      wrapper.appendChild(labelEl);
+      wrapper.appendChild(statusComponent);
+      return wrapper;
+    };
+
+    // Create status variations
+    const idleStatus = createStatusComponent(
+      "idle-status",
+      idleCallStatus,
+      "Idle State - No active calls",
+    );
+
+    const workingStatus = createStatusComponent(
+      "working-status",
+      workingCallStatus,
+      "Working State - LLM and tool calls active",
+    );
+
+    const heavyWorkingStatus = createStatusComponent(
+      "heavy-working-status",
+      heavyWorkingCallStatus,
+      "Heavy Working State - Multiple calls active",
+    );
+
+    const disconnectedStatus = createStatusComponent(
+      "disconnected-status",
+      disconnectedCallStatus,
+      "Disconnected State - No connection",
+    );
+
+    const workingDisconnectedStatus = createStatusComponent(
+      "working-disconnected-status",
+      workingDisconnectedCallStatus,
+      "Working but Disconnected - Calls active but no connection",
+    );
+
+    // Interactive demo component
+    const interactiveStatus = document.createElement(
+      "sketch-call-status",
+    ) as any;
+    interactiveStatus.id = "interactive-status";
+    interactiveStatus.llmCalls = 0;
+    interactiveStatus.toolCalls = [];
+    interactiveStatus.agentState = null;
+    interactiveStatus.isIdle = true;
+    interactiveStatus.isDisconnected = false;
+
+    // Control buttons for interactive demo
+    const controlsDiv = document.createElement("div");
+    controlsDiv.style.cssText =
+      "margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px;";
+
+    const addLLMCallButton = demoUtils.createButton("Add LLM Call", () => {
+      interactiveStatus.llmCalls = interactiveStatus.llmCalls + 1;
+      interactiveStatus.isIdle = false;
+    });
+
+    const removeLLMCallButton = demoUtils.createButton(
+      "Remove LLM Call",
+      () => {
+        interactiveStatus.llmCalls = Math.max(
+          0,
+          interactiveStatus.llmCalls - 1,
+        );
+        if (
+          interactiveStatus.llmCalls === 0 &&
+          interactiveStatus.toolCalls.length === 0
+        ) {
+          interactiveStatus.isIdle = true;
+        }
+      },
+    );
+
+    const addToolCallButton = demoUtils.createButton("Add Tool Call", () => {
+      const toolNames = [
+        "bash",
+        "patch",
+        "think",
+        "keyword_search",
+        "browser_navigate",
+        "codereview",
+      ];
+      const randomTool =
+        toolNames[Math.floor(Math.random() * toolNames.length)];
+      const currentTools = Array.isArray(interactiveStatus.toolCalls)
+        ? [...interactiveStatus.toolCalls]
+        : [];
+      if (!currentTools.includes(randomTool)) {
+        currentTools.push(randomTool);
+        interactiveStatus.toolCalls = currentTools;
+        interactiveStatus.isIdle = false;
+      }
+    });
+
+    const removeToolCallButton = demoUtils.createButton(
+      "Remove Tool Call",
+      () => {
+        const currentTools = Array.isArray(interactiveStatus.toolCalls)
+          ? [...interactiveStatus.toolCalls]
+          : [];
+        if (currentTools.length > 0) {
+          currentTools.pop();
+          interactiveStatus.toolCalls = currentTools;
+          if (interactiveStatus.llmCalls === 0 && currentTools.length === 0) {
+            interactiveStatus.isIdle = true;
+          }
+        }
+      },
+    );
+
+    const toggleConnectionButton = demoUtils.createButton(
+      "Toggle Connection",
+      () => {
+        interactiveStatus.isDisconnected = !interactiveStatus.isDisconnected;
+      },
+    );
+
+    const setAgentStateButton = demoUtils.createButton(
+      "Change Agent State",
+      () => {
+        const states = [
+          null,
+          "analyzing code",
+          "refactoring components",
+          "running tests",
+          "reviewing changes",
+          "generating documentation",
+        ];
+        const currentIndex = states.indexOf(interactiveStatus.agentState);
+        const nextIndex = (currentIndex + 1) % states.length;
+        interactiveStatus.agentState = states[nextIndex];
+      },
+    );
+
+    const resetButton = demoUtils.createButton("Reset to Idle", () => {
+      interactiveStatus.llmCalls = 0;
+      interactiveStatus.toolCalls = [];
+      interactiveStatus.agentState = null;
+      interactiveStatus.isIdle = true;
+      interactiveStatus.isDisconnected = false;
+    });
+
+    controlsDiv.appendChild(addLLMCallButton);
+    controlsDiv.appendChild(removeLLMCallButton);
+    controlsDiv.appendChild(addToolCallButton);
+    controlsDiv.appendChild(removeToolCallButton);
+    controlsDiv.appendChild(toggleConnectionButton);
+    controlsDiv.appendChild(setAgentStateButton);
+    controlsDiv.appendChild(resetButton);
+
+    // Assemble the demo
+    statusVariationsSection.appendChild(idleStatus);
+    statusVariationsSection.appendChild(workingStatus);
+    statusVariationsSection.appendChild(heavyWorkingStatus);
+    statusVariationsSection.appendChild(disconnectedStatus);
+    statusVariationsSection.appendChild(workingDisconnectedStatus);
+
+    const interactiveWrapper = document.createElement("div");
+    interactiveWrapper.style.cssText =
+      "padding: 10px; border: 1px solid #e1e5e9; border-radius: 6px; background: white;";
+    interactiveWrapper.appendChild(interactiveStatus);
+    interactiveWrapper.appendChild(controlsDiv);
+    interactiveSection.appendChild(interactiveWrapper);
+
+    container.appendChild(statusVariationsSection);
+    container.appendChild(interactiveSection);
+
+    // Add some simulation of real activity
+    const simulationInterval = setInterval(() => {
+      const statusComponents = [
+        document.getElementById("working-status") as any,
+        document.getElementById("heavy-working-status") as any,
+      ].filter(Boolean);
+
+      statusComponents.forEach((statusEl) => {
+        if (statusEl && Math.random() > 0.8) {
+          // 20% chance to update
+          // Simulate some activity by slightly changing the number of calls
+          const variation = Math.floor(Math.random() * 3) - 1; // -1, 0, or 1
+          statusEl.llmCalls = Math.max(0, statusEl.llmCalls + variation);
+        }
+      });
+    }, 2000);
+
+    // Store interval for cleanup
+    (container as any).demoInterval = simulationInterval;
+  },
+
+  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/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index fa530ed..1af2302 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -1,9 +1,10 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element.js";
 
 @customElement("sketch-call-status")
-export class SketchCallStatus extends LitElement {
+export class SketchCallStatus extends SketchTailwindElement {
   @property()
   llmCalls: number = 0;
 
@@ -19,109 +20,6 @@
   @property()
   isDisconnected: boolean = false;
 
-  static styles = css`
-    @keyframes gentle-pulse {
-      0% {
-        transform: scale(1);
-        opacity: 1;
-      }
-      50% {
-        transform: scale(1.15);
-        opacity: 0.8;
-      }
-      100% {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-
-    .call-status-container {
-      display: flex;
-      position: relative;
-      align-items: center;
-      padding: 0 10px;
-    }
-
-    .indicators-container {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      position: relative;
-    }
-
-    .indicator {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 32px;
-      height: 32px;
-      border-radius: 4px;
-      transition: all 0.2s ease;
-      position: relative;
-    }
-
-    /* LLM indicator (lightbulb) */
-    .llm-indicator {
-      background-color: transparent;
-      color: #9ca3af; /* Gray when inactive */
-    }
-
-    .llm-indicator.active {
-      background-color: #fef3c7; /* Light yellow */
-      color: #f59e0b; /* Yellow/amber when active */
-      animation: gentle-pulse 1.5s infinite ease-in-out;
-    }
-
-    /* Tool indicator (wrench) */
-    .tool-indicator {
-      background-color: transparent;
-      color: #9ca3af; /* Gray when inactive */
-    }
-
-    .tool-indicator.active {
-      background-color: #dbeafe; /* Light blue */
-      color: #3b82f6; /* Blue when active */
-      animation: gentle-pulse 1.5s infinite ease-in-out;
-    }
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-
-    .status-banner {
-      position: absolute;
-      padding: 2px 5px;
-      border-radius: 3px;
-      font-size: 10px;
-      font-weight: bold;
-      text-align: center;
-      letter-spacing: 0.5px;
-      width: 104px; /* Wider to accommodate DISCONNECTED text */
-      left: 50%;
-      transform: translateX(-50%);
-      top: 60%; /* Position a little below center */
-      z-index: 10; /* Ensure it appears above the icons */
-      opacity: 0.9;
-    }
-
-    .status-working {
-      background-color: #ffeecc;
-      color: #e65100;
-    }
-
-    .status-idle {
-      background-color: #e6f4ea;
-      color: #0d652d;
-    }
-
-    .status-disconnected {
-      background-color: #ffebee; /* Light red */
-      color: #d32f2f; /* Red */
-      font-weight: bold;
-    }
-  `;
-
   render() {
     const lightbulbSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path>
@@ -148,28 +46,60 @@
     }
 
     return html`
-      <div class="call-status-container">
-        <div class="indicators-container">
+      <style>
+        @keyframes gentle-pulse {
+          0% {
+            transform: scale(1);
+            opacity: 1;
+          }
+          50% {
+            transform: scale(1.15);
+            opacity: 0.8;
+          }
+          100% {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+        .animate-gentle-pulse {
+          animation: gentle-pulse 1.5s infinite ease-in-out;
+        }
+      </style>
+      <div class="flex relative items-center px-2.5">
+        <div class="flex items-center gap-2.5 relative">
           <div
-            class="indicator llm-indicator ${this.llmCalls > 0 ? "active" : ""}"
+            class="llm-indicator flex justify-center items-center w-8 h-8 rounded transition-all duration-200 relative ${this
+              .llmCalls > 0
+              ? "bg-yellow-100 text-amber-500 animate-gentle-pulse active"
+              : "bg-transparent text-gray-400"}"
             title="${this.llmCalls > 0
               ? `${this.llmCalls} LLM ${this.llmCalls === 1 ? "call" : "calls"} in progress`
               : "No LLM calls in progress"}${agentState}"
           >
-            ${unsafeHTML(lightbulbSVG)}
+            <div class="w-5 h-5">${unsafeHTML(lightbulbSVG)}</div>
           </div>
           <div
-            class="indicator tool-indicator ${this.toolCalls.length > 0
-              ? "active"
-              : ""}"
+            class="tool-indicator flex justify-center items-center w-8 h-8 rounded transition-all duration-200 relative ${this
+              .toolCalls.length > 0
+              ? "bg-blue-100 text-blue-500 animate-gentle-pulse active"
+              : "bg-transparent text-gray-400"}"
             title="${this.toolCalls.length > 0
               ? `${this.toolCalls.length} tool ${this.toolCalls.length === 1 ? "call" : "calls"} in progress: ${this.toolCalls.join(", ")}`
               : "No tool calls in progress"}${agentState}"
           >
-            ${unsafeHTML(wrenchSVG)}
+            <div class="w-5 h-5">${unsafeHTML(wrenchSVG)}</div>
           </div>
         </div>
-        <div class="status-banner ${statusClass}">${statusText}</div>
+        <div
+          class="status-banner absolute py-0.5 px-1.5 rounded text-xs font-bold text-center tracking-wider w-26 left-1/2 transform -translate-x-1/2 top-3/5 z-10 opacity-90 ${statusClass} ${this
+            .isDisconnected
+            ? "bg-red-50 text-red-600"
+            : !this.isIdle
+              ? "bg-orange-50 text-orange-600"
+              : "bg-green-50 text-green-700"}"
+        >
+          ${statusText}
+        </div>
       </div>
     `;
   }