flowchart LR
    subgraph Frontend["Frontend (port 3000)"]
        App[React App]
    end

    subgraph Backend["Backend (port 3001)"]
        Server[Node.js Server]
        WS[WebSocket Server]
    end

    subgraph CLI
        GT[gt CLI]
        Workspace[(~/gt workspace)]
    end

    App <-->|WebSocket| WS
    WS --> Server
    Server -->|exec| GT
    GT --> Workspace

sequenceDiagram
    participant Client as React App
    participant WS as WebSocket Server
    participant API as API Server
    participant GT as gt CLI

    Client->>WS: Connect
    WS->>API: Request convoy data
    API->>GT: gt convoy list --all --json
    GT-->>API: Convoy list
    loop For each convoy
        API->>GT: gt convoy status {id} --json
        GT-->>API: Convoy status
    end
    API-->>WS: Aggregated convoy data
    WS-->>Client: { type: 'convoys', data: [...] }

    Note over Client,WS: Manual refresh
    Client->>WS: { type: 'refresh' }
    WS->>API: Broadcast to all clients
    API-->>WS: Updated convoy data
    WS-->>Client: { type: 'convoys', data: [...] }