webui: add current Agent state to call-status tooltip
diff --git a/webui/package.json b/webui/package.json
index 4c74453..13535fa 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -16,7 +16,7 @@
"demo:mermaid": "vite --open src/web-components/demo/mermaid-test/index.html",
"dev": "vite --port 5173 --strictPort --host 127.0.0.1",
"format": "prettier ./src --write",
- "gentypes": "go run ../../cmd/go2ts -o src/types.ts",
+ "gentypes": "go run ../cmd/go2ts -o src/types.ts",
"build": "go run ../cmd/go2ts -o src/types.ts && tsc",
"watch": "tsc --watch",
"test": "tsc && npm run test:playwright",
diff --git a/webui/src/fixtures/dummy.ts b/webui/src/fixtures/dummy.ts
index 1972b09..f18acf7 100644
--- a/webui/src/fixtures/dummy.ts
+++ b/webui/src/fixtures/dummy.ts
@@ -375,4 +375,5 @@
outstanding_tool_calls: [],
in_container: true,
first_message_index: 0,
+ agent_state: "WaitingForUserInput",
};
diff --git a/webui/src/types.ts b/webui/src/types.ts
index b9451b7..e7d9386 100644
--- a/webui/src/types.ts
+++ b/webui/src/types.ts
@@ -76,6 +76,7 @@
ssh_error?: string;
in_container: boolean;
first_message_index: number;
+ agent_state?: string;
outside_hostname?: string;
inside_hostname?: string;
outside_os?: string;
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>