subscription-sync

What problem does it solve?

This Skill addresses the challenge of keeping frontend views synchronized with backend state in real-time, while avoiding race conditions and stale data during flow and execution event processing.

Core Features & Use Cases

• Two-channel real-time syncing: Separate WebSocket-connected channels for flow editing and execution events to prevent backpressure and performance issues.
• Event buffering & atomic flush: Buffer incoming flow events and flush atomically on FlowInitEnd to ensure nodes render before edges.
• Dedicated subscriptions: Independent tRPC clients for editing and execution to isolate concerns and improve reliability.
• Use Case: Implement live flow editing dashboards that reflect backend changes instantly and safely while execution traces stream concurrently.

Quick Start

Configure the frontend to connect to ws://localhost:3001 (main server) and ws://localhost:4021 (executor server), then subscribe to flow events and execution events as needed, ensuring FlowInitEnd flush is performed before rendering completed structures and starting execution.