diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index 76ef0b8..f398562 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -13,6 +13,9 @@
   @property()
   agentState: string | null = null;
 
+  @property()
+  isIdle: boolean = false;
+
   static styles = css`
     @keyframes gentle-pulse {
       0% {
@@ -75,6 +78,28 @@
       width: 20px;
       height: 20px;
     }
+
+    .status-banner {
+      margin-top: 4px;
+      padding: 2px 5px;
+      border-radius: 3px;
+      font-size: 10px;
+      font-weight: bold;
+      text-align: center;
+      letter-spacing: 0.5px;
+      width: 100%;
+      min-width: 64px; /* Ensure same width regardless of state */
+    }
+
+    .status-working {
+      background-color: #ffeecc;
+      color: #e65100;
+    }
+
+    .status-idle {
+      background-color: #e6f4ea;
+      color: #0d652d;
+    }
   `;
 
   render() {
@@ -90,6 +115,9 @@
 
     const agentState = `${this.agentState ? " (" + this.agentState + ")" : ""}`;
 
+    // Determine working state - working if not idle
+    const isWorking = !this.isIdle;
+
     return html`
       <div class="call-status-container">
         <div
@@ -110,6 +138,11 @@
         >
           ${unsafeHTML(wrenchSVG)}
         </div>
+        <div
+          class="status-banner ${isWorking ? "status-working" : "status-idle"}"
+        >
+          ${isWorking ? "WORKING" : "IDLE"}
+        </div>
       </div>
     `;
   }