webui: add current Agent state to call-status tooltip
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 157f2f2..21bbb9e 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -1038,6 +1038,7 @@
></sketch-network-status>
<sketch-call-status
+ .agentState=${this.containerState?.agent_state}
.llmCalls=${this.containerState?.outstanding_llm_calls || 0}
.toolCalls=${this.containerState?.outstanding_tool_calls || []}
></sketch-call-status>
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>