agentgui 1.0.821 → 1.0.823

package/static/js/ws-core.js

@@ -0,0 +1,162 @@
+class WebSocketManager {
+  constructor(config = {}) {
+    this.config = {
+      url: config.url || this.getWebSocketURL(),
+      reconnectDelays: config.reconnectDelays || [500, 1000, 2000, 4000, 8000, 15000, 30000],
+      maxReconnectDelay: config.maxReconnectDelay || 30000,
+      heartbeatInterval: config.heartbeatInterval || 15000,
+      messageTimeout: config.messageTimeout || 60000,
+      maxBufferedMessages: config.maxBufferedMessages || 1000,
+      pongTimeout: config.pongTimeout || 5000,
+      latencyWindowSize: config.latencyWindowSize || 10,
+      ...config
+    };
+    this.ws = null;
+    this._isConnected = false;
+    this._isConnecting = false;
+    this._isManuallyDisconnected = false;
+    this._reconnectCount = 0;
+    this.isManuallyDisconnected = false;
+    this.reconnectCount = 0;
+    this.reconnectTimer = null;
+    this.messageBuffer = [];
+    this.requestMap = new Map();
+    this.heartbeatTimer = null;
+    this._connectionState = 'disconnected';
+    this.activeSubscriptions = new Set();
+    this._wsActor = typeof createWsActor === 'function' ? createWsActor() : null;
+    this.connectionEstablishedAt = 0;
+    this.cachedVoiceList = null;
+    this.voiceListListeners = [];
+    this.latency = { samples: [], current: 0, avg: 0, jitter: 0, quality: 'unknown', predicted: 0, predictedNext: 0, trend: 'stable', missedPongs: 0, pingCounter: 0 };
+    this._latencyEma = null;
+    this._trendHistory = [];
+    this._trendCount = 0;
+    this._reconnectedAt = 0;
+    this.stats = { totalConnections: 0, totalReconnects: 0, totalMessagesSent: 0, totalMessagesReceived: 0, totalErrors: 0, totalTimeouts: 0, avgLatency: 0, lastConnectedTime: null, connectionDuration: 0 };
+    this.lastSeqBySession = {};
+    this.listeners = {};
+    this._onVisibilityChange = this._handleVisibilityChange.bind(this);
+    this._onOnline = this._handleOnline.bind(this);
+    if (typeof document !== 'undefined') document.addEventListener('visibilitychange', this._onVisibilityChange);
+    if (typeof window !== 'undefined') window.addEventListener('online', this._onOnline);
+  }
+
+  get isConnected() { return this._wsActor ? this._wsActor.getSnapshot().value === 'connected' : this._isConnected; }
+  set isConnected(v) { this._isConnected = v; }
+  get isConnecting() { return this._wsActor ? this._wsActor.getSnapshot().value === 'connecting' : this._isConnecting; }
+  set isConnecting(v) { this._isConnecting = v; }
+  get connectionState() { return this._wsActor ? this._wsActor.getSnapshot().value : this._connectionState; }
+  set connectionState(v) { this._connectionState = v; }
+  get isManuallyDisconnected() { return this._wsActor ? !!this._wsActor.getSnapshot().context.manualDisconnect : this._isManuallyDisconnected; }
+  set isManuallyDisconnected(v) { this._isManuallyDisconnected = v; if (this._wsActor && v) this._wsActor.send({ type: 'MANUAL_DISCONNECT' }); }
+  get reconnectCount() { return this._wsActor ? this._wsActor.getSnapshot().context.reconnectCount : this._reconnectCount; }
+  set reconnectCount(v) { this._reconnectCount = v; }
+
+  getWebSocketURL() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const baseURL = window.__BASE_URL || '/gm';
+    let url = `${protocol}//${window.location.host}${baseURL}/sync`;
+    if (window.__WS_TOKEN) url += `?token=${encodeURIComponent(window.__WS_TOKEN)}`;
+    return url;
+  }
+
+  async connect() {
+    if (this.isConnected || this.isConnecting) return this.ws;
+    this.isManuallyDisconnected = false;
+    this._isConnecting = true;
+    if (this._wsActor) this._wsActor.send({ type: 'CONNECT' });
+    this.setConnectionState('connecting');
+    try {
+      this.ws = new WebSocket(this.config.url);
+      this.ws.binaryType = 'arraybuffer';
+      this.ws.onopen = () => this.onOpen();
+      this.ws.onmessage = (event) => this.onMessage(event);
+      this.ws.onerror = (error) => this.onError(error);
+      this.ws.onclose = () => this.onClose();
+      return await this.waitForConnection(this.config.messageTimeout);
+    } catch (error) {
+      this.isConnecting = false;
+      this.stats.totalErrors++;
+      this.scheduleReconnect();
+      throw error;
+    }
+  }
+
+  waitForConnection(timeout = 5000) {
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => reject(new Error('WebSocket connection timeout')), timeout);
+      const check = () => {
+        if (this.isConnected || this.ws?.readyState === WebSocket.OPEN) { clearTimeout(timer); resolve(this.ws); }
+        else setTimeout(check, 50);
+      };
+      check();
+    });
+  }
+
+  onOpen() {
+    this._isConnected = true;
+    this._isConnecting = false;
+    if (this._wsActor) this._wsActor.send({ type: 'OPEN' });
+    this.connectionEstablishedAt = Date.now();
+    this._reconnectedAt = this.stats.totalConnections > 0 ? Date.now() : 0;
+    this.stats.totalConnections++;
+    this.stats.lastConnectedTime = Date.now();
+    this.latency.missedPongs = 0;
+    this.setConnectionState('connected');
+    this.flushMessageBuffer();
+    this.resubscribeAll();
+    this.startHeartbeat();
+    this.emit('connected', { timestamp: Date.now() });
+  }
+
+  async onMessage(event) {
+    try {
+      const buf = event.data instanceof Blob ? await event.data.arrayBuffer() : event.data;
+      const parsed = window._codec ? window._codec.decode(buf) : msgpackr.unpack(new Uint8Array(buf));
+      const messages = Array.isArray(parsed) ? parsed : [parsed];
+      this.stats.totalMessagesReceived += messages.length;
+      for (const data of messages) {
+        if (data.type === 'pong') { this._handlePong(data); continue; }
+        if (data.type === 'voice_list') {
+          this.cachedVoiceList = data.voices || [];
+          for (const listener of this.voiceListListeners) { try { listener(this.cachedVoiceList); } catch (_) {} }
+        }
+        if (data.seq !== undefined && data.sessionId) {
+          this.lastSeqBySession[data.sessionId] = Math.max(this.lastSeqBySession[data.sessionId] || -1, data.seq);
+        }
+        this.emit('message', data);
+        if (data.type) this.emit('message:' + data.type, data);
+      }
+    } catch (error) { this.stats.totalErrors++; }
+  }
+
+  onError(error) {
+    this.stats.totalErrors++;
+    if (this._wsActor) this._wsActor.send({ type: 'ERROR' });
+    this.emit('error', { error, timestamp: Date.now() });
+  }
+
+  onClose() {
+    this._isConnected = false;
+    this._isConnecting = false;
+    if (this._wsActor) this._wsActor.send({ type: 'CLOSE' });
+    this.setConnectionState('disconnected');
+    this.stopHeartbeat();
+    if (this.stats.lastConnectedTime) this.stats.connectionDuration = Date.now() - this.stats.lastConnectedTime;
+    this.emit('disconnected', { timestamp: Date.now() });
+    if (!this.isManuallyDisconnected) this.scheduleReconnect();
+  }
+
+  scheduleReconnect() {
+    if (this.isManuallyDisconnected || this.reconnectTimer) return;
+    const delays = this.config.reconnectDelays;
+    const baseDelay = this.reconnectCount < delays.length ? delays[this.reconnectCount] : this.config.maxReconnectDelay;
+    const delay = Math.round(baseDelay + Math.random() * 0.3 * baseDelay);
+    this.reconnectCount++;
+    this.stats.totalReconnects++;
+    this.setConnectionState('reconnecting');
+    this.emit('reconnecting', { delay, attempt: this.reconnectCount, nextAttemptAt: Date.now() + delay });
+    this.reconnectTimer = setTimeout(() => { this.reconnectTimer = null; this.connect().catch(() => {}); }, delay);
+  }
+}

package/static/js/ws-latency.js

@@ -0,0 +1,88 @@
+Object.assign(WebSocketManager.prototype, {
+  startHeartbeat() {
+    this.stopHeartbeat();
+    this.heartbeatTimer = setInterval(() => { this.ping(); }, this.config.heartbeatInterval);
+  },
+
+  stopHeartbeat() {
+    if (this.heartbeatTimer) { clearInterval(this.heartbeatTimer); this.heartbeatTimer = null; }
+  },
+
+  _reportLatency() {
+    this.emit('latency', { current: this.latency.current, avg: this.latency.avg, jitter: this.latency.jitter, quality: this.latency.quality, trend: this.latency.trend });
+  },
+
+  _handleVisibilityChange() {
+    if (document.visibilityState === 'visible' && !this.isConnected && !this.isManuallyDisconnected) this.connect().catch(() => {});
+  },
+
+  _handleOnline() {
+    if (!this.isConnected && !this.isManuallyDisconnected) this.connect().catch(() => {});
+  },
+
+  ping() {
+    if (!this.isConnected) return;
+    this.latency.pingCounter++;
+    const id = this.latency.pingCounter;
+    const pongTimer = setTimeout(() => {
+      this.latency.missedPongs++;
+      this.emit('latency', { current: null, avg: this.latency.avg, jitter: this.latency.jitter, quality: 'poor', missed: true });
+      if (this.latency.missedPongs >= 3) { this.onClose(); }
+    }, this.config.pongTimeout);
+    this.requestMap.set('ping:' + id, { type: 'ping', sentAt: Date.now(), pongTimer });
+    try {
+      this.ws.send(window._codec ? window._codec.encode({ type: 'ping', id }) : msgpackr.pack({ type: 'ping', id }));
+    } catch (_) { clearTimeout(pongTimer); this.requestMap.delete('ping:' + id); }
+  },
+
+  _handlePong(data) {
+    const key = 'ping:' + data.id;
+    const pending = this.requestMap.get(key);
+    if (!pending) return;
+    clearTimeout(pending.pongTimer);
+    this.requestMap.delete(key);
+    this.latency.missedPongs = 0;
+    const rtt = Date.now() - pending.sentAt;
+    this._recordLatency(rtt);
+    this._checkDegradation();
+    this._reportLatency();
+  },
+
+  _recordLatency(rtt) {
+    const samples = this.latency.samples;
+    samples.push(rtt);
+    if (samples.length > this.config.latencyWindowSize) samples.shift();
+    this.latency.current = rtt;
+    this.latency.avg = Math.round(samples.reduce((a, b) => a + b, 0) / samples.length);
+    const jitterSamples = samples.slice(1).map((v, i) => Math.abs(v - samples[i]));
+    this.latency.jitter = jitterSamples.length ? Math.round(jitterSamples.reduce((a, b) => a + b, 0) / jitterSamples.length) : 0;
+    this.latency.quality = this._qualityTier(this.latency.avg);
+    if (this._latencyEma === null) this._latencyEma = rtt;
+    else this._latencyEma = 0.3 * rtt + 0.7 * this._latencyEma;
+    this.latency.predicted = Math.round(this._latencyEma);
+    this.stats.avgLatency = this.latency.avg;
+    this._trendHistory.push(rtt);
+    if (this._trendHistory.length > 5) this._trendHistory.shift();
+    if (this._trendHistory.length >= 3) {
+      const h = this._trendHistory;
+      const slope = (h[h.length - 1] - h[0]) / h.length;
+      this.latency.trend = slope > 5 ? 'rising' : slope < -5 ? 'falling' : 'stable';
+    }
+  },
+
+  _qualityTier(avg) {
+    if (avg < 50) return 'excellent';
+    if (avg < 150) return 'good';
+    if (avg < 300) return 'fair';
+    return 'poor';
+  },
+
+  _checkDegradation() {
+    const tier = this.latency.quality;
+    const prev = this._lastQualityTier;
+    if (tier !== prev) {
+      this._lastQualityTier = tier;
+      this.emit('quality_change', { quality: tier, latency: this.latency.avg });
+    }
+  }
+});

package/.prd

@@ -1,42 +0,0 @@
-[
-  {
-    "id": "split-conversations-js",
-    "subject": "Split conversations.js into 3 files under 200 lines each",
-    "status": "pending",
-    "description": "conversations.js is 742L. Natural split: (1) conv-folder-browser.js — FolderBrowser methods L189-470 (~90L), (2) conv-list.js — ConversationManager render/CRUD/WS methods L480-742 (~180L), (3) conversations.js — core class constructor/init/loadAgents/agents/format methods L1-190 (~190L). All three reference shared ConversationManager instance.",
-    "effort": "large",
-    "category": "refactor",
-    "blocking": [],
-    "blockedBy": [],
-    "acceptance": [
-      "conversations.js ≤200 lines",
-      "conv-folder-browser.js ≤200 lines and loaded in index.html",
-      "conv-list.js ≤200 lines and loaded in index.html",
-      "window.conversationManager still works post-split",
-      "DOM-ready guard at end of file preserved (if/else is correct, not a duplicate)"
-    ],
-    "edge_cases": [
-      "Methods cross-call — must verify all internal references resolve after split"
-    ]
-  },
-  {
-    "id": "split-websocket-manager",
-    "subject": "Split websocket-manager.js into connection and messaging files",
-    "status": "pending",
-    "description": "websocket-manager.js is 650L with a single WebSocketManager class. Split into: (1) ws-connection.js — raw WebSocket open/close/reconnect logic, (2) ws-subscriptions.js — subscribe/unsubscribe/broadcast logic, (3) websocket-manager.js — coordinator that imports both (≤200L each).",
-    "effort": "large",
-    "category": "refactor",
-    "blocking": [],
-    "blockedBy": [],
-    "acceptance": [
-      "websocket-manager.js ≤200 lines",
-      "ws-connection.js ≤200 lines",
-      "ws-subscriptions.js ≤200 lines",
-      "All three loaded in index.html in correct order",
-      "wsManager API unchanged from client.js perspective"
-    ],
-    "edge_cases": [
-      "ws-machine.js wraps WebSocketManager — must still find it at window.wsManager"
-    ]
-  }
-]