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.ts b/webui/src/web-components/sketch-network-status.ts
index cf168fd..8a5a883 100644
--- a/webui/src/web-components/sketch-network-status.ts
+++ b/webui/src/web-components/sketch-network-status.ts
@@ -18,11 +18,41 @@
.status-container {
display: flex;
align-items: center;
+ justify-content: center;
}
- .status-text {
- font-size: 11px;
- color: #666;
+ .status-indicator {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ .status-indicator.connected {
+ background-color: #2e7d32; /* Green */
+ box-shadow: 0 0 5px rgba(46, 125, 50, 0.5);
+ }
+
+ .status-indicator.disconnected {
+ background-color: #d32f2f; /* Red */
+ box-shadow: 0 0 5px rgba(211, 47, 47, 0.5);
+ }
+
+ .status-indicator.connecting {
+ background-color: #f57c00; /* Orange */
+ box-shadow: 0 0 5px rgba(245, 124, 0, 0.5);
+ animation: pulse 1.5s infinite;
+ }
+
+ @keyframes pulse {
+ 0% {
+ opacity: 0.6;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0.6;
+ }
}
`;
@@ -41,14 +71,15 @@
}
render() {
- // Only render if there's an error to display
- if (!this.error) {
- return html``;
- }
-
+ // Only show the status indicator dot (no text)
return html`
<div class="status-container">
- <span id="statusText" class="status-text">${this.error}</span>
+ <div
+ class="status-indicator ${this.connection}"
+ title="Connection status: ${this.connection}${this.error
+ ? ` - ${this.error}`
+ : ""}"
+ ></div>
</div>
`;
}