diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index 458709c..76ef0b8 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -10,6 +10,9 @@
   @property()
   toolCalls: string[] = [];
 
+  @property()
+  agentState: string | null = null;
+
   static styles = css`
     @keyframes gentle-pulse {
       0% {
@@ -85,13 +88,15 @@
       <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
     </svg>`;
 
+    const agentState = `${this.agentState ? " (" + this.agentState + ")" : ""}`;
+
     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"}"
+            : "No LLM calls in progress"}${agentState}"
         >
           ${unsafeHTML(lightbulbSVG)}
         </div>
@@ -101,7 +106,7 @@
             : ""}"
           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"}"
+            : "No tool calls in progress"}${agentState}"
         >
           ${unsafeHTML(wrenchSVG)}
         </div>