diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
new file mode 100644
index 0000000..96244ea
--- /dev/null
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -0,0 +1,106 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("sketch-call-status")
+export class SketchCallStatus extends LitElement {
+  @property({ type: Number })
+  llmCalls: number = 0;
+
+  @property({ type: Array })
+  toolCalls: string[] = [];
+
+  static styles = css`
+    .call-status-container {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 0 10px;
+    }
+
+    .indicator {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      position: relative;
+    }
+
+    .llm-indicator {
+      opacity: 0.5;
+    }
+
+    .llm-indicator.active {
+      opacity: 1;
+      color: #ffc107;
+    }
+
+    .tool-indicator {
+      opacity: 0.5;
+    }
+
+    .tool-indicator.active {
+      opacity: 1;
+      color: #2196f3;
+    }
+
+    .count-badge {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      background-color: #f44336;
+      color: white;
+      border-radius: 50%;
+      width: 16px;
+      height: 16px;
+      font-size: 11px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Icon styles */
+    .icon {
+      font-size: 20px;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`
+      <div class="call-status-container">
+        <div
+          class="indicator llm-indicator ${this.llmCalls > 0 ? "active" : ""}"
+          title="${this.llmCalls > 0
+            ? `${this.llmCalls} LLM ${this.llmCalls === 1 ? "call" : "calls"} in progress`
+            : "No LLM calls in progress"}"
+        >
+          <span class="icon">💡</span>
+          ${this.llmCalls >= 1
+            ? html`<span class="count-badge">${this.llmCalls}</span>`
+            : ""}
+        </div>
+        <div
+          class="indicator tool-indicator ${this.toolCalls.length > 0
+            ? "active"
+            : ""}"
+          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"}"
+        >
+          <span class="icon">🔧</span>
+          ${this.toolCalls.length >= 1
+            ? html`<span class="count-badge">${this.toolCalls.length}</span>`
+            : ""}
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sketch-call-status": SketchCallStatus;
+  }
+}