webui: add agent state and status banner
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s9f1c332aad2630dfk
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"