What problem does it solve?
Coordinating real-time WebSocket events across CachiBot's backend and frontend is error-prone and time-consuming, leading to mismatched message types, missing payload schemas, and frontend stores that don't reflect live state. This Skill provides a clear, end-to-end process for adding new server-to-client and client-to-server message types so events stream reliably and are handled consistently across the stack.
Core Features & Use Cases
- Backend integration: Extend WSMessageType enums, define payload models, and add WSMessage factory methods to produce strongly-typed events.
- Runtime delivery: Emit events from websocket handlers or run_agent loops using manager.send or manager.broadcast for targeted or broadcast updates.
- Frontend handling: Add TypeScript message types, implement message switches in useWebSocket, and update Zustand stores to reflect live progress, approvals, or status changes.
- Use Cases: Live progress updates for long-running agent tasks, streaming file upload status, approval request workflows, and bidirectional client-initiated control messages.
Quick Start
Add a new server-to-client 'your_event' by extending WSMessageType and payload models in the backend, sending the event via manager.send or broadcast from the appropriate handler, then add TypeScript types, a useWebSocket handler, and a store action to process the incoming payload.
