Implement tracking of outstanding LLM and Tool calls
This commit implements a listener pattern between ant.convo and the Agent for tracking outstanding calls.
* Added fields to the Agent struct to track outstanding LLM calls and Tool calls
* Implemented the listener methods to properly track and update these fields
* Added methods to retrieve the counts and names
* Updated the State struct in loophttp.go to expose this information
* Added a unit test to verify the tracking functionality
* Created UI components with lightbulb and wrench icons to display call status
* Added numerical indicators that always show when there are active calls
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
new file mode 100644
index 0000000..96244ea
--- /dev/null
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -0,0 +1,106 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("sketch-call-status")
+export class SketchCallStatus extends LitElement {
+ @property({ type: Number })
+ llmCalls: number = 0;
+
+ @property({ type: Array })
+ toolCalls: string[] = [];
+
+ static styles = css`
+ .call-status-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 0 10px;
+ }
+
+ .indicator {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ position: relative;
+ }
+
+ .llm-indicator {
+ opacity: 0.5;
+ }
+
+ .llm-indicator.active {
+ opacity: 1;
+ color: #ffc107;
+ }
+
+ .tool-indicator {
+ opacity: 0.5;
+ }
+
+ .tool-indicator.active {
+ opacity: 1;
+ color: #2196f3;
+ }
+
+ .count-badge {
+ position: absolute;
+ top: -8px;
+ right: -8px;
+ background-color: #f44336;
+ color: white;
+ border-radius: 50%;
+ width: 16px;
+ height: 16px;
+ font-size: 11px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ /* Icon styles */
+ .icon {
+ font-size: 20px;
+ }
+ `;
+
+ constructor() {
+ super();
+ }
+
+ render() {
+ 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"}"
+ >
+ <span class="icon">💡</span>
+ ${this.llmCalls >= 1
+ ? html`<span class="count-badge">${this.llmCalls}</span>`
+ : ""}
+ </div>
+ <div
+ class="indicator tool-indicator ${this.toolCalls.length > 0
+ ? "active"
+ : ""}"
+ 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"}"
+ >
+ <span class="icon">🔧</span>
+ ${this.toolCalls.length >= 1
+ ? html`<span class="count-badge">${this.toolCalls.length}</span>`
+ : ""}
+ </div>
+ </div>
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "sketch-call-status": SketchCallStatus;
+ }
+}