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-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index a540144..b73c83a 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -898,21 +898,6 @@
const errorData = await response.text();
throw new Error(`Server error: ${response.status} - ${errorData}`);
}
-
- // TOOD(philip): If the data manager is getting messages out of order, there's a bug?
- // Reset data manager state to force a full refresh after sending a message
- // This ensures we get all messages in the correct order
- // Use private API for now - TODO: add a resetState() method to DataManager
- (this.dataManager as any).nextFetchIndex = 0;
- (this.dataManager as any).currentFetchStartIndex = 0;
-
- // // If in diff view, switch to conversation view
- // if (this.viewMode === "diff") {
- // await this.toggleViewMode("chat");
- // }
-
- // Refresh the timeline data to show the new message
- await this.dataManager.fetchData();
} catch (error) {
console.error("Error sending chat message:", error);
const statusText = document.getElementById("statusText");
@@ -1032,16 +1017,16 @@
</div>
</div>
- <sketch-network-status
- connection=${this.connectionStatus}
- error=${this.connectionErrorMessage}
- ></sketch-network-status>
-
<sketch-call-status
.agentState=${this.containerState?.agent_state}
.llmCalls=${this.containerState?.outstanding_llm_calls || 0}
.toolCalls=${this.containerState?.outstanding_tool_calls || []}
></sketch-call-status>
+
+ <sketch-network-status
+ connection=${this.connectionStatus}
+ error=${this.connectionErrorMessage}
+ ></sketch-network-status>
</div>
</div>
@@ -1127,9 +1112,6 @@
}
});
- // Always enable polling by default
- this.dataManager.setPollingEnabled(true);
-
// Process any existing messages to find commit information
if (this.messages && this.messages.length > 0) {
this.updateLastCommitInfo(this.messages);