webui: Update status indicators
- Remove green dot connection indicator
- Add DISCONNECTED state with red styling when connection is lost
- Update the status bar to show DISCONNECTED instead of IDLE/WORKING when disconnected
- Create demo page to preview all three status states
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: skR3m0v3Gr3nD0tD1sc0nn3ct3dR3d
Change-ID: sa2b3679b9cdcaf80k
diff --git a/webui/src/web-components/sketch-call-status.test.ts b/webui/src/web-components/sketch-call-status.test.ts
index 88ae3bd..7dc16a5 100644
--- a/webui/src/web-components/sketch-call-status.test.ts
+++ b/webui/src/web-components/sketch-call-status.test.ts
@@ -136,3 +136,48 @@
"2 tool calls in progress: bash, think",
);
});
+
+test("displays IDLE status when isIdle is true and not disconnected", async ({ mount }) => {
+ const component = await mount(SketchCallStatus, {
+ props: {
+ isIdle: true,
+ isDisconnected: false,
+ llmCalls: 0,
+ toolCalls: [],
+ },
+ });
+
+ // Check that the status banner has the correct class and text
+ await expect(component.locator(".status-banner")).toHaveClass(/status-idle/);
+ await expect(component.locator(".status-banner")).toHaveText("IDLE");
+});
+
+test("displays WORKING status when isIdle is false and not disconnected", async ({ mount }) => {
+ const component = await mount(SketchCallStatus, {
+ props: {
+ isIdle: false,
+ isDisconnected: false,
+ llmCalls: 1,
+ toolCalls: [],
+ },
+ });
+
+ // Check that the status banner has the correct class and text
+ await expect(component.locator(".status-banner")).toHaveClass(/status-working/);
+ await expect(component.locator(".status-banner")).toHaveText("WORKING");
+});
+
+test("displays DISCONNECTED status when isDisconnected is true regardless of isIdle", async ({ mount }) => {
+ const component = await mount(SketchCallStatus, {
+ props: {
+ isIdle: true, // Even when idle
+ isDisconnected: true,
+ llmCalls: 0,
+ toolCalls: [],
+ },
+ });
+
+ // Check that the status banner has the correct class and text
+ await expect(component.locator(".status-banner")).toHaveClass(/status-disconnected/);
+ await expect(component.locator(".status-banner")).toHaveText("DISCONNECTED");
+});