Implement Server-Sent Events (SSE) for Real-time Agent Communication
- Add server-side SSE endpoint (/stream?from=N) for streaming state updates and messages
- Replace polling with SSE in frontend for real-time updates with significant performance improvements
- Implement efficient connection handling with backoff strategy for reconnections
- Add visual network status indicator in UI to show connection state
- Use non-blocking goroutine with channel pattern to handle SSE message delivery
- Ensure proper message sequencing and state synchronization between client and server
- Fix test suite to accommodate the new streaming architecture
- Update mocks to use conversation.Budget instead of ant.Budget
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-network-status.test.ts b/webui/src/web-components/sketch-network-status.test.ts
index 5c968d4..bf0f4ba 100644
--- a/webui/src/web-components/sketch-network-status.test.ts
+++ b/webui/src/web-components/sketch-network-status.test.ts
@@ -1,22 +1,22 @@
import { test, expect } from "@sand4rt/experimental-ct-web";
import { SketchNetworkStatus } from "./sketch-network-status";
-// Test for when no error message is present - component should not render
-test("does not display anything when no error is provided", async ({
- mount,
-}) => {
+// Test for the status indicator dot
+test("shows status indicator dot when connected", async ({ mount }) => {
const component = await mount(SketchNetworkStatus, {
props: {
connection: "connected",
},
});
- // The component should be empty
- await expect(component.locator(".status-container")).not.toBeVisible();
+ // The status container and indicator should be visible
+ await expect(component.locator(".status-container")).toBeVisible();
+ await expect(component.locator(".status-indicator")).toBeVisible();
+ await expect(component.locator(".status-indicator")).toHaveClass(/connected/);
});
-// Test that error message is displayed correctly
-test("displays error message when provided", async ({ mount }) => {
+// Test that tooltip shows error message when provided
+test("includes error in tooltip when provided", async ({ mount }) => {
const errorMsg = "Connection error";
const component = await mount(SketchNetworkStatus, {
props: {
@@ -25,6 +25,9 @@
},
});
- await expect(component.locator(".status-text")).toBeVisible();
- await expect(component.locator(".status-text")).toContainText(errorMsg);
+ await expect(component.locator(".status-indicator")).toBeVisible();
+ await expect(component.locator(".status-indicator")).toHaveAttribute(
+ "title",
+ "Connection status: disconnected - Connection error",
+ );
});