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-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>
`;
}