[claude] Add real-time WebSocket connection to Hermes gateway (#210) (#216)

Co-authored-by: Claude (Opus 4.6) <claude@hermes.local>
Co-committed-by: Claude (Opus 4.6) <claude@hermes.local>

app.js

@@ -703,6 +703,14 @@ window.addEventListener('chat-message', (/** @type {CustomEvent} */ event) => {
   }
 });
 
+window.addEventListener('status-update', (/** @type {CustomEvent} */ event) => {
+  console.log('[hermes] Status update:', event.detail);
+});
+
+window.addEventListener('pr-notification', (/** @type {CustomEvent} */ event) => {
+  console.log('[hermes] PR notification:', event.detail);
+});
+
 // === SOVEREIGNTY EASTER EGG ===
 const SOVEREIGNTY_WORD = 'sovereignty';
 let sovereigntyBuffer = '';

ws-client.js

@@ -1,9 +1,11 @@
+const HERMES_WS_URL = 'ws://143.198.27.163/api/world/ws';
+
 export class WebSocketClient {
-  constructor(url = 'wss://localhost:8080') {
+  constructor(url = HERMES_WS_URL) {
     this.url = url;
     this.reconnectAttempts = 0;
-    this.maxReconnectAttempts = 5;
-    this.reconnectDelay = 1000;
+    this.maxReconnectAttempts = 10;
+    this.reconnectBaseDelay = 1000;
     this.maxReconnectDelay = 30000;
     this.socket = null;
     this.connected = false;
@@ -12,71 +14,121 @@ export class WebSocketClient {
   }
 
   connect() {
-    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+    if (this.socket && (this.socket.readyState === WebSocket.OPEN || this.socket.readyState === WebSocket.CONNECTING)) {
       return;
     }
 
-    this.socket = new WebSocket(this.url);
+    try {
+      this.socket = new WebSocket(this.url);
+    } catch (err) {
+      console.error('[hermes] WebSocket construction failed:', err);
+      this._scheduleReconnect();
+      return;
+    }
 
     this.socket.onopen = () => {
+      console.log('[hermes] Connected to Hermes gateway');
       this.connected = true;
       this.reconnectAttempts = 0;
-      this.messageQueue.forEach(msg => this.send(msg));
+      this.messageQueue.forEach(msg => this._send(msg));
       this.messageQueue = [];
-      window.dispatchEvent(new CustomEvent('player-joined', { detail: { id: 'system', name: 'System' } }));
+      window.dispatchEvent(new CustomEvent('ws-connected', { detail: { url: this.url } }));
     };
 
     this.socket.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      switch (data.type) {
-        case 'player-joined':
-          window.dispatchEvent(new CustomEvent('player-joined', { detail: data }));
-          break;
-        case 'player-left':
-          window.dispatchEvent(new CustomEvent('player-left', { detail: data }));
-          break;
-        case 'chat-message':
-          window.dispatchEvent(new CustomEvent('chat-message', { detail: data }));
-          break;
+      let data;
+      try {
+        data = JSON.parse(event.data);
+      } catch (err) {
+        console.warn('[hermes] Unparseable message:', event.data);
+        return;
       }
+      this._route(data);
     };
 
-    this.socket.onclose = () => {
+    this.socket.onclose = (event) => {
       this.connected = false;
-      this.reconnect();
+      this.socket = null;
+      console.warn(`[hermes] Connection closed (code=${event.code})`);
+      window.dispatchEvent(new CustomEvent('ws-disconnected', { detail: { code: event.code } }));
+      this._scheduleReconnect();
     };
 
-    this.socket.onerror = (error) => {
-      console.error('WebSocket error:', error);
+    this.socket.onerror = () => {
+      // onclose fires after onerror; logging here would be redundant noise
+      console.warn('[hermes] WebSocket error — waiting for close event');
     };
   }
 
-  reconnect() {
+  _route(data) {
+    switch (data.type) {
+      case 'chat':
+      case 'chat-message':
+        window.dispatchEvent(new CustomEvent('chat-message', { detail: data }));
+        break;
+
+      case 'status-update':
+        window.dispatchEvent(new CustomEvent('status-update', { detail: data }));
+        break;
+
+      case 'pr-notification':
+        window.dispatchEvent(new CustomEvent('pr-notification', { detail: data }));
+        break;
+
+      case 'player-joined':
+        window.dispatchEvent(new CustomEvent('player-joined', { detail: data }));
+        break;
+
+      case 'player-left':
+        window.dispatchEvent(new CustomEvent('player-left', { detail: data }));
+        break;
+
+      default:
+        console.debug('[hermes] Unhandled message type:', data.type, data);
+    }
+  }
+
+  _scheduleReconnect() {
     if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      console.warn('Max reconnection attempts reached.');
+      console.warn('[hermes] Max reconnection attempts reached — giving up');
+      window.dispatchEvent(new CustomEvent('ws-failed'));
       return;
     }
 
+    const delay = Math.min(
+      this.reconnectBaseDelay * Math.pow(2, this.reconnectAttempts),
+      this.maxReconnectDelay
+    );
+    console.log(`[hermes] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts + 1}/${this.maxReconnectAttempts})`);
     this.reconnectTimeout = setTimeout(() => {
       this.reconnectAttempts++;
       this.connect();
-    }, Math.min(this.reconnectDelay * Math.pow(2, this.reconnectAttempts), this.maxReconnectDelay));
+    }, delay);
+  }
+
+  _send(message) {
+    this.socket.send(JSON.stringify(message));
   }
 
   send(message) {
-    if (this.connected) {
-      this.socket.send(JSON.stringify(message));
+    if (this.connected && this.socket && this.socket.readyState === WebSocket.OPEN) {
+      this._send(message);
     } else {
       this.messageQueue.push(message);
     }
   }
 
   disconnect() {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    this.maxReconnectAttempts = 0; // prevent auto-reconnect after intentional disconnect
     if (this.socket) {
       this.socket.close();
+      this.socket = null;
     }
   }
 }
 
-// Initialize and export a singleton instance
 export const wsClient = new WebSocketClient();