npm - agentgui - Versions diffs - 1.0.214 → 1.0.215 - Mend

agentgui 1.0.214 → 1.0.215

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/package.json +1 -1
package/server.js +10 -1
package/static/index.html +17 -0
package/static/js/client.js +267 -17
package/static/js/event-consolidator.js +98 -0
package/static/js/kalman-filter.js +67 -0
package/static/js/websocket-manager.js +82 -5

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.214",
+  "version": "1.0.215",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/server.js CHANGED Viewed

@@ -2168,6 +2168,7 @@ wss.on('connection', (ws, req) => {
         } else if (data.type === 'latency_report') {
           ws.latencyTier = data.quality || 'good';
           ws.latencyAvg = data.avg || 0;
+          ws.latencyTrend = data.trend || 'stable';
         } else if (data.type === 'ping') {
           ws.send(JSON.stringify({
             type: 'pong',
@@ -2207,8 +2208,16 @@ const BROADCAST_TYPES = new Set([
 const wsBatchQueues = new Map();
 const BATCH_BY_TIER = { excellent: 16, good: 32, fair: 50, poor: 100, bad: 200 };
+const TIER_ORDER = ['excellent', 'good', 'fair', 'poor', 'bad'];
 function getBatchInterval(ws) {
-  return BATCH_BY_TIER[ws.latencyTier] || 32;
+  const tier = ws.latencyTier || 'good';
+  const trend = ws.latencyTrend;
+  if (trend === 'rising' || trend === 'falling') {
+    const idx = TIER_ORDER.indexOf(tier);
+    if (trend === 'rising' && idx < TIER_ORDER.length - 1) return BATCH_BY_TIER[TIER_ORDER[idx + 1]] || 32;
+    if (trend === 'falling' && idx > 0) return BATCH_BY_TIER[TIER_ORDER[idx - 1]] || 32;
+  }
+  return BATCH_BY_TIER[tier] || 32;
 }
 function flushWsBatch(ws) {

package/static/index.html CHANGED Viewed

@@ -2292,6 +2292,21 @@
     .streaming-blocks > details.block-tool-use {
       transition: max-height 0.3s ease;
     }
+    @keyframes chunk-placeholder-pulse {
+      0%, 100% { opacity: 0.3; }
+      50% { opacity: 0.6; }
+    }
+    .chunk-placeholder {
+      height: 2rem;
+      border-radius: 0.375rem;
+      background: var(--color-bg-secondary);
+      animation: chunk-placeholder-pulse 1s ease-in-out infinite;
+      margin: 0.25rem 0;
+    }
+    .connection-dot.degrading {
+      animation: pulse 1s ease-in-out infinite;
+      background-color: var(--color-warning) !important;
+    }
   </style>
 </head>
 <body>
@@ -2483,6 +2498,8 @@
   </script>
   <script defer src="/gm/js/event-processor.js"></script>
   <script defer src="/gm/js/streaming-renderer.js"></script>
+  <script defer src="/gm/js/kalman-filter.js"></script>
+  <script defer src="/gm/js/event-consolidator.js"></script>
   <script defer src="/gm/js/websocket-manager.js"></script>
   <script defer src="/gm/js/event-filter.js"></script>
   <script defer src="/gm/js/syntax-highlighter.js"></script>

package/static/js/client.js CHANGED Viewed

@@ -62,6 +62,22 @@ class AgentGUIClient {
     this._inflightRequests = new Map();
     this._previousConvAbort = null;
+    this._scrollKalman = typeof KalmanFilter !== 'undefined' ? new KalmanFilter({ processNoise: 50, measurementNoise: 100 }) : null;
+    this._scrollTarget = 0;
+    this._scrollAnimating = false;
+    this._scrollLerpFactor = config.scrollAnimationSpeed || 0.15;
+    this._chunkTimingKalman = typeof KalmanFilter !== 'undefined' ? new KalmanFilter({ processNoise: 10, measurementNoise: 200 }) : null;
+    this._lastChunkArrival = 0;
+    this._chunkTimingUpdateCount = 0;
+    this._chunkMissedPredictions = 0;
+    this._consolidator = typeof EventConsolidator !== 'undefined' ? new EventConsolidator() : null;
+    this._serverProcessingEstimate = 2000;
+    this._lastSendTime = 0;
+    this._countdownTimer = null;
     // Router state
     this.routerState = {
       currentConversationId: null,
@@ -103,6 +119,7 @@ class AgentGUIClient {
       this.state.isInitialized = true;
       this.emit('initialized');
+      this._setupDebugHooks();
       console.log('AgentGUI client initialized');
       return this;
@@ -147,6 +164,16 @@ class AgentGUIClient {
     this.wsManager.on('latency_update', (data) => {
       this._updateConnectionIndicator(data.quality);
     });
+    this.wsManager.on('connection_degrading', () => {
+      const dot = document.querySelector('.connection-dot');
+      if (dot) dot.classList.add('degrading');
+    });
+    this.wsManager.on('connection_recovering', () => {
+      const dot = document.querySelector('.connection-dot');
+      if (dot) dot.classList.remove('degrading');
+    });
   }
   /**
@@ -409,6 +436,13 @@ class AgentGUIClient {
   async handleStreamingStart(data) {
     console.log('Streaming started:', data);
+    this._clearThinkingCountdown();
+    if (this._lastSendTime > 0) {
+      const actual = Date.now() - this._lastSendTime;
+      const predicted = this.wsManager?.latency?.predicted || 0;
+      const serverTime = Math.max(500, actual - predicted);
+      this._serverProcessingEstimate = 0.7 * this._serverProcessingEstimate + 0.3 * serverTime;
+    }
     // If this streaming event is for a different conversation than what we are viewing,
     // just track the state but do not modify the DOM or start polling
@@ -585,21 +619,54 @@ class AgentGUIClient {
   }
   scrollToBottom() {
-    if (this._scrollRafPending) return;
-    this._scrollRafPending = true;
-    requestAnimationFrame(() => {
-      this._scrollRafPending = false;
-      const scrollContainer = document.getElementById('output-scroll');
-      if (!scrollContainer) return;
-      const distFromBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
-      if (distFromBottom < 150) {
-        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    const scrollContainer = document.getElementById('output-scroll');
+    if (!scrollContainer) return;
+    const distFromBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
+    if (distFromBottom > 150) {
+      this._unseenCount = (this._unseenCount || 0) + 1;
+      this._showNewContentPill();
+      return;
+    }
+    const maxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+    const isStreaming = this.state.streamingConversations.size > 0;
+    if (!isStreaming || !this._scrollKalman || Math.abs(maxScroll - scrollContainer.scrollTop) > 2000) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      this._removeNewContentPill();
+      this._scrollAnimating = false;
+      return;
+    }
+    this._scrollKalman.update(maxScroll);
+    this._scrollTarget = this._scrollKalman.predict();
+    const conf = this._chunkArrivalConfidence();
+    if (conf > 0.5) {
+      const estHeight = this._estimatedBlockHeight('text') * 0.5 * conf;
+      this._scrollTarget += estHeight;
+      const trueMax = scrollContainer.scrollHeight - scrollContainer.clientHeight;
+      if (this._scrollTarget > trueMax + 100) this._scrollTarget = trueMax + 100;
+    }
+    if (!this._scrollAnimating) {
+      this._scrollAnimating = true;
+      const animate = () => {
+        if (!this._scrollAnimating) return;
+        const sc = document.getElementById('output-scroll');
+        if (!sc) { this._scrollAnimating = false; return; }
+        const diff = this._scrollTarget - sc.scrollTop;
+        if (Math.abs(diff) < 1) {
+          sc.scrollTop = this._scrollTarget;
+          if (this.state.streamingConversations.size === 0) { this._scrollAnimating = false; return; }
+        }
+        sc.scrollTop += diff * this._scrollLerpFactor;
         this._removeNewContentPill();
-      } else {
-        this._unseenCount = (this._unseenCount || 0) + 1;
-        this._showNewContentPill();
-      }
-    });
+        requestAnimationFrame(animate);
+      };
+      requestAnimationFrame(animate);
+    }
   }
   _showNewContentPill() {
@@ -627,6 +694,7 @@ class AgentGUIClient {
   handleStreamingError(data) {
     console.error('Streaming error:', data);
+    this._clearThinkingCountdown();
     const conversationId = data.conversationId || this.state.currentSession?.conversationId;
@@ -658,6 +726,7 @@ class AgentGUIClient {
   handleStreamingComplete(data) {
     console.log('Streaming completed:', data);
+    this._clearThinkingCountdown();
     const conversationId = data.conversationId || this.state.currentSession?.conversationId;
     if (conversationId) this.invalidateCache(conversationId);
@@ -1157,7 +1226,130 @@ class AgentGUIClient {
   _getAdaptivePollInterval() {
     const quality = this.wsManager?.latency?.quality || 'unknown';
-    return this._pollIntervalByTier[quality] || 200;
+    const base = this._pollIntervalByTier[quality] || 200;
+    const trend = this.wsManager?.latency?.trend;
+    if (!trend || trend === 'stable') return base;
+    const tiers = ['excellent', 'good', 'fair', 'poor', 'bad'];
+    const idx = tiers.indexOf(quality);
+    if (trend === 'rising' && idx < tiers.length - 1) return this._pollIntervalByTier[tiers[idx + 1]];
+    if (trend === 'falling' && idx > 0) return this._pollIntervalByTier[tiers[idx - 1]];
+    return base;
+  }
+  _chunkArrivalConfidence() {
+    if (this._chunkTimingUpdateCount < 2) return 0;
+    const base = Math.min(1, this._chunkTimingUpdateCount / 8);
+    const penalty = Math.min(1, this._chunkMissedPredictions * 0.33);
+    return Math.max(0, base - penalty);
+  }
+  _predictedNextChunkArrival() {
+    if (!this._chunkTimingKalman || this._chunkTimingUpdateCount < 2) return 0;
+    return this._lastChunkArrival + Math.min(this._chunkTimingKalman.predict(), 5000);
+  }
+  _schedulePreAllocation(sessionId) {
+    if (this._placeholderTimer) clearTimeout(this._placeholderTimer);
+    if (this._chunkArrivalConfidence() < 0.5) return;
+    const scrollContainer = document.getElementById('output-scroll');
+    if (!scrollContainer) return;
+    const distFromBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
+    if (distFromBottom > 150) return;
+    const nextArrival = this._predictedNextChunkArrival();
+    if (!nextArrival) return;
+    const delay = Math.max(0, nextArrival - performance.now() - 100);
+    this._placeholderTimer = setTimeout(() => {
+      this._placeholderTimer = null;
+      this._insertPlaceholder(sessionId);
+    }, delay);
+  }
+  _insertPlaceholder(sessionId) {
+    this._removePlaceholder();
+    const streamingEl = document.getElementById(`streaming-${sessionId}`);
+    if (!streamingEl) return;
+    const blocksEl = streamingEl.querySelector('.streaming-blocks');
+    if (!blocksEl) return;
+    const ph = document.createElement('div');
+    ph.className = 'chunk-placeholder';
+    ph.id = 'chunk-placeholder-active';
+    blocksEl.appendChild(ph);
+    this._placeholderAutoRemove = setTimeout(() => this._removePlaceholder(), 500);
+  }
+  _removePlaceholder() {
+    if (this._placeholderAutoRemove) { clearTimeout(this._placeholderAutoRemove); this._placeholderAutoRemove = null; }
+    const ph = document.getElementById('chunk-placeholder-active');
+    if (ph && ph.parentNode) ph.remove();
+  }
+  _trackBlockHeight(block, element) {
+    if (!element || !block?.type) return;
+    const h = element.offsetHeight;
+    if (h <= 0) return;
+    if (!this._blockHeightAvg) this._blockHeightAvg = {};
+    const t = block.type;
+    if (!this._blockHeightAvg[t]) this._blockHeightAvg[t] = { sum: 0, count: 0 };
+    this._blockHeightAvg[t].sum += h;
+    this._blockHeightAvg[t].count++;
+  }
+  _estimatedBlockHeight(type) {
+    const defaults = { text: 40, tool_use: 60, tool_result: 40 };
+    if (this._blockHeightAvg?.[type]?.count >= 3) {
+      return this._blockHeightAvg[type].sum / this._blockHeightAvg[type].count;
+    }
+    return defaults[type] || 40;
+  }
+  _startThinkingCountdown() {
+    this._clearThinkingCountdown();
+    if (!this._lastSendTime) return;
+    const predicted = this.wsManager?.latency?.predicted || 0;
+    const estimatedWait = predicted + this._serverProcessingEstimate;
+    if (estimatedWait < 1000) return;
+    let remaining = Math.ceil(estimatedWait / 1000);
+    const update = () => {
+      const indicator = document.querySelector('.streaming-indicator');
+      if (!indicator) return;
+      if (remaining > 0) {
+        indicator.textContent = `Thinking... (~${remaining}s)`;
+        remaining--;
+        this._countdownTimer = setTimeout(update, 1000);
+      } else {
+        indicator.textContent = 'Thinking... (taking longer than expected)';
+      }
+    };
+    this._countdownTimer = setTimeout(update, 100);
+  }
+  _clearThinkingCountdown() {
+    if (this._countdownTimer) { clearTimeout(this._countdownTimer); this._countdownTimer = null; }
+  }
+  _setupDebugHooks() {
+    if (typeof window === 'undefined') return;
+    const kalmanHistory = { latency: [], scroll: [], chunkTiming: [] };
+    const self = this;
+    window.__kalman = {
+      latency: this.wsManager?._latencyKalman || null,
+      scroll: this._scrollKalman || null,
+      chunkTiming: this._chunkTimingKalman || null,
+      history: kalmanHistory,
+      getState: () => ({
+        latency: self.wsManager?._latencyKalman?.getState() || null,
+        scroll: self._scrollKalman?.getState() || null,
+        chunkTiming: self._chunkTimingKalman?.getState() || null,
+        serverProcessingEstimate: self._serverProcessingEstimate,
+        chunkConfidence: self._chunkArrivalConfidence(),
+        latencyTrend: self.wsManager?.latency?.trend || null
+      })
+    };
+    this.wsManager.on('latency_prediction', (data) => {
+      kalmanHistory.latency.push({ time: Date.now(), ...data });
+      if (kalmanHistory.latency.length > 100) kalmanHistory.latency.shift();
+    });
   }
   _showSkeletonLoading(conversationId) {
@@ -1230,6 +1422,8 @@ class AgentGUIClient {
         this.wsManager.subscribeToSession(result.session.id);
       }
+      this._lastSendTime = Date.now();
+      this._startThinkingCountdown();
       this.emit('execution:started', result);
     } catch (error) {
       console.error('Stream execution error:', error);
@@ -1334,14 +1528,38 @@ class AgentGUIClient {
           pollState.emptyPollCount = 0;
           const lastChunk = chunks[chunks.length - 1];
           pollState.lastFetchTimestamp = lastChunk.created_at;
+          const now = performance.now();
+          if (this._lastChunkArrival > 0 && this._chunkTimingKalman) {
+            const delta = now - this._lastChunkArrival;
+            this._chunkTimingKalman.update(delta);
+            this._chunkTimingUpdateCount++;
+            this._chunkMissedPredictions = 0;
+          }
+          this._lastChunkArrival = now;
           this.renderChunkBatch(chunks.filter(c => c.block && c.block.type));
+          if (this.state.currentSession?.id) this._schedulePreAllocation(this.state.currentSession.id);
         } else {
           pollState.emptyPollCount++;
+          if (this._chunkTimingUpdateCount > 0) this._chunkMissedPredictions++;
           pollState.backoffDelay = Math.min(pollState.backoffDelay + 50, 500);
         }
         if (pollState.isPolling) {
-          pollState.pollTimer = setTimeout(pollOnce, pollState.backoffDelay);
+          let nextDelay = pollState.backoffDelay;
+          if (this._chunkArrivalConfidence() >= 0.3 && this._chunkTimingKalman) {
+            const predicted = this._chunkTimingKalman.predict();
+            const elapsed = performance.now() - this._lastChunkArrival;
+            const untilNext = predicted - elapsed - 20;
+            nextDelay = Math.max(50, Math.min(2000, untilNext));
+            if (this._chunkMissedPredictions >= 3) {
+              this._chunkTimingKalman.setProcessNoise(20);
+            } else {
+              this._chunkTimingKalman.setProcessNoise(10);
+            }
+          }
+          pollState.pollTimer = setTimeout(pollOnce, nextDelay);
         }
       } catch (error) {
         console.warn('Chunk poll error:', error.message);
@@ -1372,6 +1590,13 @@ class AgentGUIClient {
     }
     pollState.isPolling = false;
+    this._scrollAnimating = false;
+    if (this._scrollKalman) this._scrollKalman.reset();
+    if (this._chunkTimingKalman) this._chunkTimingKalman.reset();
+    this._chunkTimingUpdateCount = 0;
+    this._chunkMissedPredictions = 0;
+    this._lastChunkArrival = 0;
+    if (this._placeholderTimer) { clearTimeout(this._placeholderTimer); this._placeholderTimer = null; }
   }
   /**
@@ -1397,13 +1622,36 @@ class AgentGUIClient {
   renderChunkBatch(chunks) {
     if (!chunks.length) return;
-    const groups = {};
+    const deduped = [];
     for (const chunk of chunks) {
       const sid = chunk.sessionId;
       if (!this._renderedSeqs.has(sid)) this._renderedSeqs.set(sid, new Set());
       const seqSet = this._renderedSeqs.get(sid);
       if (chunk.sequence !== undefined && seqSet.has(chunk.sequence)) continue;
       if (chunk.sequence !== undefined) seqSet.add(chunk.sequence);
+      deduped.push(chunk);
+    }
+    if (!deduped.length) return;
+    let toRender = deduped;
+    if (this._consolidator) {
+      const { consolidated, stats } = this._consolidator.consolidate(deduped);
+      toRender = consolidated;
+      for (const c of consolidated) {
+        if (c._mergedSequences) {
+          const seqSet = this._renderedSeqs.get(c.sessionId);
+          if (seqSet) c._mergedSequences.forEach(s => seqSet.add(s));
+        }
+      }
+      if (stats.textMerged || stats.toolsCollapsed || stats.systemSuperseded) {
+        console.log('Consolidation:', stats);
+      }
+    }
+    this._removePlaceholder();
+    const groups = {};
+    for (const chunk of toRender) {
+      const sid = chunk.sessionId;
       if (!groups[sid]) groups[sid] = [];
       groups[sid].push(chunk);
     }
@@ -1542,6 +1790,8 @@ class AgentGUIClient {
     tooltip.innerHTML = [
       `<div>State: ${state}</div>`,
       `<div>Latency: ${Math.round(latency.avg || 0)}ms</div>`,
+      `<div>Predicted: ${Math.round(latency.predicted || 0)}ms (Kalman)</div>`,
+      `<div>Trend: ${latency.trend || 'unknown'}</div>`,
       `<div>Jitter: ${Math.round(latency.jitter || 0)}ms</div>`,
       `<div>Quality: ${latency.quality || 'unknown'}</div>`,
       `<div>Reconnects: ${stats.totalReconnects || 0}</div>`,

package/static/js/event-consolidator.js ADDED Viewed

@@ -0,0 +1,98 @@
+class EventConsolidator {
+  consolidate(chunks) {
+    const stats = { original: chunks.length, deduplicated: 0, textMerged: 0, toolsCollapsed: 0, systemSuperseded: 0 };
+    if (chunks.length <= 1) return { consolidated: chunks, stats };
+    const sorted = chunks.slice().sort((a, b) => (a.sequence || 0) - (b.sequence || 0));
+    const seen = new Set();
+    const deduped = [];
+    for (const c of sorted) {
+      const key = c.sessionId + ':' + c.sequence;
+      if (c.sequence !== undefined && seen.has(key)) { stats.deduplicated++; continue; }
+      if (c.sequence !== undefined) seen.add(key);
+      deduped.push(c);
+    }
+    const bySession = {};
+    for (const c of deduped) {
+      const sid = c.sessionId || '_';
+      if (!bySession[sid]) bySession[sid] = [];
+      bySession[sid].push(c);
+    }
+    const result = [];
+    for (const sid of Object.keys(bySession)) {
+      const sessionChunks = bySession[sid];
+      const merged = this._mergeTextBlocks(sessionChunks, stats);
+      this._collapseToolPairs(merged, stats);
+      const superseded = this._supersedeSystemBlocks(merged, stats);
+      result.push(...superseded);
+    }
+    result.sort((a, b) => (a.sequence || 0) - (b.sequence || 0));
+    return { consolidated: result, stats };
+  }
+  _mergeTextBlocks(chunks, stats) {
+    const result = [];
+    let pending = null;
+    const MAX_MERGE = 50 * 1024;
+    for (const c of chunks) {
+      if (c.block?.type === 'text') {
+        if (pending) {
+          const combined = (pending.block.text || '') + '\n' + (c.block.text || '');
+          if (combined.length <= MAX_MERGE) {
+            pending = {
+              ...pending,
+              block: { ...pending.block, text: combined },
+              created_at: c.created_at,
+              _mergedSequences: [...(pending._mergedSequences || [pending.sequence]), c.sequence]
+            };
+            stats.textMerged++;
+            continue;
+          }
+        }
+        if (pending) result.push(pending);
+        pending = { ...c, _mergedSequences: [c.sequence] };
+      } else {
+        if (pending) { result.push(pending); pending = null; }
+        result.push(c);
+      }
+    }
+    if (pending) result.push(pending);
+    return result;
+  }
+  _collapseToolPairs(chunks, stats) {
+    const toolUseMap = {};
+    for (const c of chunks) {
+      if (c.block?.type === 'tool_use' && c.block.id) toolUseMap[c.block.id] = c;
+    }
+    for (const c of chunks) {
+      if (c.block?.type === 'tool_result' && c.block.tool_use_id) {
+        const match = toolUseMap[c.block.tool_use_id];
+        if (match) {
+          match.block._hasResult = true;
+          c.block._collapsed = true;
+          stats.toolsCollapsed++;
+        }
+      }
+    }
+  }
+  _supersedeSystemBlocks(chunks, stats) {
+    const systemIndices = [];
+    for (let i = 0; i < chunks.length; i++) {
+      if (chunks[i].block?.type === 'system') systemIndices.push(i);
+    }
+    if (systemIndices.length <= 1) return chunks;
+    const keep = new Set();
+    keep.add(systemIndices[systemIndices.length - 1]);
+    stats.systemSuperseded += systemIndices.length - 1;
+    return chunks.filter((_, i) => !systemIndices.includes(i) || keep.has(i));
+  }
+}
+if (typeof module !== 'undefined' && module.exports) module.exports = EventConsolidator;

package/static/js/kalman-filter.js ADDED Viewed

@@ -0,0 +1,67 @@
+class KalmanFilter {
+  constructor(config = {}) {
+    this._initEst = config.initialEstimate || 0;
+    this._initErr = config.initialError || 1000;
+    this._q = Math.max(config.processNoise || 1, 0.001);
+    this._r = config.measurementNoise || 10;
+    this._est = this._initEst;
+    this._err = this._initErr;
+    this._gain = 0;
+    this._initialized = false;
+    this._lastValid = this._initEst;
+  }
+  update(measurement) {
+    if (!Number.isFinite(measurement)) {
+      return { estimate: this._est, error: this._err, gain: this._gain };
+    }
+    if (measurement < 0) measurement = 0;
+    if (!this._initialized) {
+      this._est = measurement;
+      this._err = this._r;
+      this._initialized = true;
+      this._lastValid = measurement;
+      this._gain = 1;
+      return { estimate: this._est, error: this._err, gain: this._gain };
+    }
+    let r = this._r;
+    if (this._est > 0 && Math.abs(measurement - this._est) > this._est * 10) {
+      r = r * 100;
+    }
+    const predErr = this._err + this._q;
+    this._gain = predErr / (predErr + r);
+    this._est = this._est + this._gain * (measurement - this._est);
+    this._err = (1 - this._gain) * predErr;
+    if (this._err < 1e-10) this._err = 1e-10;
+    this._lastValid = this._est;
+    return { estimate: this._est, error: this._err, gain: this._gain };
+  }
+  predict() {
+    return this._est;
+  }
+  setProcessNoise(q) { this._q = Math.max(q, 0.001); }
+  setMeasurementNoise(r) { this._r = r; }
+  getState() {
+    return {
+      estimate: this._est,
+      error: this._err,
+      gain: this._gain,
+      processNoise: this._q,
+      measurementNoise: this._r,
+      initialized: this._initialized
+    };
+  }
+  reset() {
+    this._est = this._initEst;
+    this._err = this._initErr;
+    this._gain = 0;
+    this._initialized = false;
+    this._lastValid = this._initEst;
+  }
+}
+if (typeof module !== 'undefined' && module.exports) module.exports = KalmanFilter;

package/static/js/websocket-manager.js CHANGED Viewed

@@ -31,10 +31,18 @@ class WebSocketManager {
       avg: 0,
       jitter: 0,
       quality: 'unknown',
+      predicted: 0,
+      predictedNext: 0,
+      trend: 'stable',
       missedPongs: 0,
       pingCounter: 0
     };
+    this._latencyKalman = typeof KalmanFilter !== 'undefined' ? new KalmanFilter({ processNoise: 1, measurementNoise: 10 }) : null;
+    this._trendHistory = [];
+    this._trendCount = 0;
+    this._reconnectedAt = 0;
     this.stats = {
       totalConnections: 0,
       totalReconnects: 0,
@@ -106,6 +114,7 @@ class WebSocketManager {
     this.isConnected = true;
     this.isConnecting = false;
     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;
@@ -162,21 +171,47 @@ class WebSocketManager {
     if (samples.length > this.config.latencyWindowSize) samples.shift();
     this.latency.current = rtt;
-    this.latency.avg = samples.reduce((a, b) => a + b, 0) / samples.length;
+    if (this._latencyKalman && samples.length > 3) {
+      if (this._reconnectedAt && Date.now() - this._reconnectedAt < 5000) {
+        this._latencyKalman.setMeasurementNoise(50);
+      } else {
+        this._latencyKalman.setMeasurementNoise(10);
+      }
+      const result = this._latencyKalman.update(rtt);
+      this.latency.predicted = result.estimate;
+      this.latency.predictedNext = this._latencyKalman.predict();
+      this.latency.avg = result.estimate;
+    } else {
+      this.latency.avg = samples.reduce((a, b) => a + b, 0) / samples.length;
+      this.latency.predicted = this.latency.avg;
+      this.latency.predictedNext = this.latency.avg;
+    }
     if (samples.length > 1) {
-      const mean = this.latency.avg;
+      const mean = samples.reduce((a, b) => a + b, 0) / samples.length;
       const variance = samples.reduce((sum, s) => sum + Math.pow(s - mean, 2), 0) / samples.length;
       this.latency.jitter = Math.sqrt(variance);
     }
-    const prev = this.latency.quality;
+    this._trendHistory.push(this.latency.predicted);
+    if (this._trendHistory.length > 3) this._trendHistory.shift();
+    if (this._trendHistory.length >= 3) {
+      const [a, b, c] = this._trendHistory;
+      const rising = b > a * 1.05 && c > b * 1.05;
+      const falling = b < a * 0.95 && c < b * 0.95;
+      this.latency.trend = rising ? 'rising' : falling ? 'falling' : 'stable';
+    }
     this.latency.quality = this._qualityTier(this.latency.avg);
     this.stats.avgLatency = this.latency.avg;
     this.emit('latency_update', {
       latency: rtt,
       avg: this.latency.avg,
+      predicted: this.latency.predicted,
+      predictedNext: this.latency.predictedNext,
+      trend: this.latency.trend,
       jitter: this.latency.jitter,
       quality: this.latency.quality
     });
@@ -184,6 +219,37 @@ class WebSocketManager {
     if (rtt > this.latency.avg * 3 && samples.length >= 3) {
       this.emit('latency_spike', { latency: rtt, avg: this.latency.avg });
     }
+    this.emit('latency_prediction', {
+      predicted: this.latency.predicted,
+      predictedNext: this.latency.predictedNext,
+      trend: this.latency.trend,
+      gain: this._latencyKalman ? this._latencyKalman.getState().gain : 0
+    });
+    this._checkDegradation();
+  }
+  _checkDegradation() {
+    if (this.latency.trend === 'rising') {
+      this._trendCount = (this._trendCount || 0) + 1;
+    } else {
+      if (this._trendCount >= 5 && (this.latency.trend === 'stable' || this.latency.trend === 'falling')) {
+        this.emit('connection_recovering', { currentTier: this.latency.quality });
+      }
+      this._trendCount = 0;
+      return;
+    }
+    if (this._trendCount < 5) return;
+    const currentTier = this.latency.quality;
+    const predictedTier = this._qualityTier(this.latency.predictedNext);
+    if (predictedTier === currentTier) return;
+    const thresholds = { excellent: 50, good: 150, fair: 300, poor: 500 };
+    const threshold = thresholds[currentTier];
+    if (!threshold) return;
+    const rate = this._trendHistory.length >= 2 ? this._trendHistory[this._trendHistory.length - 1] - this._trendHistory[0] : 0;
+    const timeToChange = rate > 0 ? Math.round((threshold - this.latency.predicted) / rate * 1000) : Infinity;
+    this.emit('connection_degrading', { currentTier, predictedTier, predictedLatency: this.latency.predictedNext, timeToChange });
   }
   _qualityTier(avg) {
@@ -283,13 +349,24 @@ class WebSocketManager {
         type: 'latency_report',
         avg: Math.round(this.latency.avg),
         jitter: Math.round(this.latency.jitter),
-        quality: this.latency.quality
+        quality: this.latency.quality,
+        trend: this.latency.trend,
+        predictedNext: Math.round(this.latency.predictedNext)
       });
     }
   }
   _handleVisibilityChange() {
-    if (typeof document !== 'undefined' && document.hidden) return;
+    if (typeof document !== 'undefined' && document.hidden) {
+      this._hiddenAt = Date.now();
+      return;
+    }
+    if (this._hiddenAt && this._latencyKalman && Date.now() - this._hiddenAt > 30000) {
+      this._latencyKalman.reset();
+      this._trendHistory = [];
+      this.latency.trend = 'stable';
+    }
+    this._hiddenAt = 0;
     if (!this.isConnected && !this.isConnecting && !this.isManuallyDisconnected) {
       if (this.reconnectTimer) {
         clearTimeout(this.reconnectTimer);