Fix WebSocket keepalive, modernize Riverpod, add connection monitoring UI

[Copilot]

WebSocket connections were timing out due to missing upgrade headers and lack of keepalive. UI had no visibility into connection state. Server code was a 464-line monolith. Using legacy Riverpod StateNotifier pattern.

Client Changes

Riverpod 3.x Migration

• StateNotifier → Notifier with build() initialization
• ref.onDispose() for cleanup
• NotifierProvider throughout

Connection Lifecycle

enum ConnectionStatus { disconnected, connecting, connected, error }

// Ping/pong with latency tracking
void _startPingTimer() {
  _pingTimer = Timer.periodic(const Duration(seconds: 30), (_) {
    final timestamp = DateTime.now().millisecondsSinceEpoch;
    _sendMessage({'type': 'ping', 'timestamp': timestamp});
  });
}

Connection State UI

• App bar status indicator: 🟢 Connected (42ms) | 🟠 Connecting | 🔴 Error
• Expandable debug panel: ping latency, reconnect attempts, error details
• Auto-reconnect with exponential backoff (max 5 attempts)

Server Restructure

pkg/
├── models/types.go      # Config, User, Channel, Message
├── websocket/ping.go    # Keepalive handlers (54s interval)
└── server/
    ├── server.go        # WebSocket upgrade & connection management
    ├── handlers.go      # Message routing
    ├── broadcast.go     # State synchronization
    └── webrtc.go        # SFU implementation

WebSocket Fixes

• Proper upgrade headers with CORS
• Ping/pong handlers: 54s server-side (WebSocket), 30s client-side (application)
• Connection timeouts: 60s read, 10s write
• Compression enabled

Before/After

• main.go: 464 lines → 55 lines
• Clear separation: transport, business logic, media handling

Protocol Additions

// Client → Server
{"type": "ping", "timestamp": 1707826806000}

// Server → Client  
{"type": "pong", "timestamp": 1707826806000}

Latency calculated from round-trip timestamp delta.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.