#710 — Frontend implementation of Websocket for chat

Repo: Twill-AI/twill-ai-ui State: closed | Status: done Assignee: nadddder, raymondehizoba

Created: 2025-09-18 · Updated: 2026-01-29

Description

Implement Type-Safe WebSocket System for Activity Feed

We need to implement a robust, type-safe WebSocket system to power real-time updates for the Activity Feed. The goal is to move away from polling and provide an instant feedback loop for user actions.

We are adopting a Hybrid Pattern where the Zustand store directly manages a generic WebSocketManager. This avoids unnecessary adapter layers (YAGNI) and keeps the architecture flat and manageable.

Architecture Overview

The system consists of three main parts:

1. WebSocketManager: A generic, reusable network handler.
2. ActivityMessage: A discriminated union defining all possible messages.
3. useActivityStore: The Zustand store that orchestrates the connection and business logic.

graph TD
    Store[useActivityStore] -->|Instantiates| WS[WebSocketManager]
    WS -->|Network| API[Raw WebSocket API]
    Store -->|Subscribes| WS
    WS -->|Typed Message| Store

Reusability & Scalability

1. Generic Reusability

The WebSocketManager<T> is designed as a pure transport layer. By providing a generic type parameter T, it can be reused across different domains (Chat, Notifications, System Alerts) without modification. Each feature team only needs to define their own message schema.

graph TD
    StoreA[useActivityStore] -->|Instantiates| WS1[WebSocketManager<ActivityMessage>]
    StoreB[useChatStore] -->|Instantiates| WS2[WebSocketManager<ChatMessage>]
    W

## Notes

_Add implementation notes, blockers, and context here_

## Related

_Add wikilinks to related people, meetings, or other tickets_