Improve status bar icons for LLM and tool calls
- Replace notification-style number badges with background and color changes
- Use SVG icons instead of emoji
- Improve visual appearance when active/inactive
- Update tests accordingly
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-call-status.test.ts b/webui/src/web-components/sketch-call-status.test.ts
index 9706319..6cc290e 100644
--- a/webui/src/web-components/sketch-call-status.test.ts
+++ b/webui/src/web-components/sketch-call-status.test.ts
@@ -17,8 +17,9 @@
);
expect(toolCalls).toEqual([]);
- // Check that badges are not shown
- await expect(component.locator(".count-badge")).toHaveCount(0);
+ // Check that indicators are not active
+ await expect(component.locator(".llm-indicator")).not.toHaveClass(/active/);
+ await expect(component.locator(".tool-indicator")).not.toHaveClass(/active/);
});
test("displays the correct state for active LLM calls", async ({ mount }) => {
@@ -31,11 +32,9 @@
// Check that LLM indicator is active
await expect(component.locator(".llm-indicator")).toHaveClass(/active/);
-
- // Check that badge shows correct count
- await expect(component.locator(".llm-indicator .count-badge")).toHaveText(
- "3",
- );
+
+ // Check that LLM indicator has the correct background and color
+ await expect(component.locator(".llm-indicator.active")).toBeVisible();
// Check that tool indicator is not active
await expect(component.locator(".tool-indicator")).not.toHaveClass(/active/);
@@ -51,11 +50,9 @@
// Check that tool indicator is active
await expect(component.locator(".tool-indicator")).toHaveClass(/active/);
-
- // Check that badge shows correct count
- await expect(component.locator(".tool-indicator .count-badge")).toHaveText(
- "2",
- );
+
+ // Check that tool indicator has the correct background and color
+ await expect(component.locator(".tool-indicator.active")).toBeVisible();
// Check that LLM indicator is not active
await expect(component.locator(".llm-indicator")).not.toHaveClass(/active/);
@@ -74,14 +71,10 @@
// Check that both indicators are active
await expect(component.locator(".llm-indicator")).toHaveClass(/active/);
await expect(component.locator(".tool-indicator")).toHaveClass(/active/);
-
- // Check that badges show correct counts
- await expect(component.locator(".llm-indicator .count-badge")).toHaveText(
- "1",
- );
- await expect(component.locator(".tool-indicator .count-badge")).toHaveText(
- "1",
- );
+
+ // Check that both active indicators are visible with their respective styles
+ await expect(component.locator(".llm-indicator.active")).toBeVisible();
+ await expect(component.locator(".tool-indicator.active")).toBeVisible();
});
test("has correct tooltip text for LLM calls", async ({ mount }) => {
diff --git a/webui/src/web-components/sketch-call-status.ts b/webui/src/web-components/sketch-call-status.ts
index 96244ea..3d48768 100644
--- a/webui/src/web-components/sketch-call-status.ts
+++ b/webui/src/web-components/sketch-call-status.ts
@@ -1,12 +1,13 @@
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
@customElement("sketch-call-status")
export class SketchCallStatus extends LitElement {
- @property({ type: Number })
+ @property()
llmCalls: number = 0;
- @property({ type: Array })
+ @property()
toolCalls: string[] = [];
static styles = css`
@@ -19,55 +20,54 @@
.indicator {
display: flex;
+ justify-content: center;
align-items: center;
- gap: 4px;
+ width: 32px;
+ height: 32px;
+ border-radius: 4px;
+ transition: all 0.2s ease;
position: relative;
}
+ /* LLM indicator (lightbulb) */
.llm-indicator {
- opacity: 0.5;
+ background-color: transparent;
+ color: #9CA3AF; /* Gray when inactive */
}
.llm-indicator.active {
- opacity: 1;
- color: #ffc107;
+ background-color: #FEF3C7; /* Light yellow */
+ color: #F59E0B; /* Yellow/amber when active */
}
+ /* Tool indicator (wrench) */
.tool-indicator {
- opacity: 0.5;
+ background-color: transparent;
+ color: #9CA3AF; /* Gray when inactive */
}
.tool-indicator.active {
- opacity: 1;
- color: #2196f3;
+ background-color: #DBEAFE; /* Light blue */
+ color: #3B82F6; /* Blue when active */
}
- .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;
+ svg {
+ width: 20px;
+ height: 20px;
}
`;
- constructor() {
- super();
- }
-
render() {
+ const lightbulbSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path>
+ <path d="M9 18h6"></path>
+ <path d="M10 22h4"></path>
+ </svg>`;
+
+ const wrenchSVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ <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>`;
+
return html`
<div class="call-status-container">
<div
@@ -76,10 +76,7 @@
? `${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>`
- : ""}
+ ${unsafeHTML(lightbulbSVG)}
</div>
<div
class="indicator tool-indicator ${this.toolCalls.length > 0
@@ -89,10 +86,7 @@
? `${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>`
- : ""}
+ ${unsafeHTML(wrenchSVG)}
</div>
</div>
`;