diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 9b3430d..7436671 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -964,6 +964,10 @@
             .agentState=${this.containerState?.agent_state}
             .llmCalls=${this.containerState?.outstanding_llm_calls || 0}
             .toolCalls=${this.containerState?.outstanding_tool_calls || []}
+            .isIdle=${this.messages.length > 0
+              ? this.messages[this.messages.length - 1]?.end_of_turn &&
+                !this.messages[this.messages.length - 1]?.parent_conversation_id
+              : true}
           ></sketch-call-status>
 
           <sketch-network-status
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>
     `;
   }
diff --git a/webui/src/web-components/sketch-container-status.ts b/webui/src/web-components/sketch-container-status.ts
index a0db867..0d2b4f6 100644
--- a/webui/src/web-components/sketch-container-status.ts
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -568,7 +568,7 @@
             </div>
           </div>
 
-          <!-- Second column: git repo and cost -->
+          <!-- Second column: git repo, agent state, and cost -->
           <div class="info-column">
             ${this.state?.git_origin
               ? html`
@@ -600,6 +600,7 @@
                   </div>
                 `
               : ""}
+
             <div class="info-item">
               <span id="totalCost" class="info-value cost"
                 >$${(this.state?.total_usage?.total_cost_usd || 0).toFixed(
@@ -667,6 +668,16 @@
                 >${this.state?.session_id || "N/A"}</span
               >
             </div>
+            ${this.state?.agent_state
+              ? html`
+                  <div class="info-item">
+                    <span class="info-label">Agent State:</span>
+                    <span id="agentState" class="info-value"
+                      >${this.state?.agent_state}</span
+                    >
+                  </div>
+                `
+              : ""}
             <div class="info-item">
               <span class="info-label">Input tokens:</span>
               <span id="inputTokens" class="info-value"