agentgui 1.0.822 → 1.0.823

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [Unreleased]
+
+### Refactor
+- Split `conversations.js` (737L) into 4 files: conversations.js (117L), conv-sidebar-actions.js (185L), conv-sidebar-clone.js (92L), conv-list-renderer.js (198L)
+- Split `websocket-manager.js` (643L) into 3 files: ws-core.js (163L), ws-latency.js (89L), websocket-manager.js (108L)
+- Split `ui-components.js` (370L) into 2 files: ui-components.js (89L), ui-components-rendering.js (63L)
+- Split `agent-auth.js` into agent-auth.js (147L) and agent-auth-oauth.js (160L)
+- Deleted dead code: event-filter.js (zero external references)
+- Updated index.html script load order for all new split files
+
 ## 2026-04-11
 - refactor: split conversations.js (742L→116L) into conv-sidebar-actions.js (prototype extension: drag/drop, bulk actions, folder browser), conv-list-renderer.js (loadConversations, render, vnode), conv-sidebar-clone.js (clone UI, delete-all); all ≤200 lines
 - refactor: split websocket-manager.js (643L) into ws-core.js (class constructor, connect, onOpen, onMessage, reconnect), websocket-manager.js (sendMessage, subscriptions, state); ws-latency/connection/heartbeat empty stubs deleted

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.822",
+  "version": "1.0.823",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "electron/main.js",

package/static/index.html

@@ -298,6 +298,7 @@
   <script defer src="/gm/js/conv-sidebar-clone.js"></script>
   <script defer src="/gm/lib/msgpackr.min.js"></script>
   <script defer src="/gm/js/ws-core.js"></script>
+  <script defer src="/gm/js/ws-latency.js"></script>
   <script defer src="/gm/js/websocket-manager.js"></script>
   <script defer src="/gm/js/ws-client.js"></script>
   <script defer src="/gm/js/syntax-highlighter.js"></script>
@@ -313,7 +314,6 @@
   <script defer src="/gm/js/voice.js"></script>
   <script defer src="/gm/js/pm2-monitor.js"></script>
   <script defer src="/gm/js/event-filter-config.js"></script>
-  <script defer src="/gm/js/event-filter.js"></script>
   <script defer src="/gm/js/client.js"></script>
   <script defer src="/gm/js/features.js"></script>
   <script defer src="/gm/js/agent-auth.js"></script>

package/static/js/ui-components-rendering.js

@@ -1,183 +1,62 @@
-
-UIComponents.copyToClipboard = function(text) {
-  return navigator.clipboard.writeText(text).catch(err => {
-    console.error('Failed to copy:', err);
-    return false;
-  });
-};
-
-UIComponents.downloadFile = function(data, filename, mimeType = 'text/plain') {
-  const blob = new Blob([data], { type: mimeType });
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = filename;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(url);
-};
-
-UIComponents.createProgressBar = function(config = {}) {
-  const {
-    percentage = 0,
-    label = '',
-    showLabel = true
-  } = config;
-
-  const container = document.createElement('div');
-  container.className = 'progress-container';
-
-  let html = '';
-  if (label && showLabel) {
-    html += `<div class="flex justify-between mb-2 text-sm"><span>${UIComponents.escapeHtml(label)}</span><span>${Math.round(percentage)}%</span></div>`;
-  }
-
-  html += `
-    <progress class="progress progress-primary progress-xs w-full" value="${Math.min(100, Math.max(0, percentage))}" max="100"></progress>
-  `;
-
-  container.innerHTML = html;
-  return container;
-};
-
-UIComponents.createCollapsible = function(config = {}) {
-  const {
-    title = 'Details',
-    content = '',
-    isOpen = false
-  } = config;
-
-  const container = document.createElement('div');
-  container.className = 'collapsible';
-
-  container.innerHTML = `
-    <details ${isOpen ? 'open' : ''}>
-      <summary class="cursor-pointer font-semibold hover:bg-base-200 px-2 py-1 rounded transition-colors">
-        ${UIComponents.escapeHtml(title)}
-      </summary>
-      <div class="content mt-2 ml-4">
-        ${typeof content === 'string' ? content : ''}
-      </div>
-    </details>
-  `;
-
-  return container;
-};
-
-UIComponents.createInput = function(config = {}) {
-  const {
-    type = 'text',
-    name = '',
-    label = '',
-    placeholder = '',
-    value = '',
-    required = false
-  } = config;
-
-  const container = document.createElement('div');
-  container.className = 'form-group mb-4';
-
-  let html = '';
-  if (label) {
-    html += `<label class="block text-sm font-medium mb-2">${UIComponents.escapeHtml(label)}</label>`;
+Object.assign(UIComponents, {
+  escapeHtml(text) { return window._escHtml ? window._escHtml(String(text)) : String(text).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); },
+
+  copyToClipboard(text) {
+    return navigator.clipboard.writeText(text).catch(() => false);
+  },
+
+  downloadFile(data, filename, mimeType = 'text/plain') {
+    const blob = new Blob([data], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url; link.download = filename;
+    document.body.appendChild(link); link.click(); document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  },
+
+  createInput(config = {}) {
+    const { type = 'text', name = '', label = '', placeholder = '', value = '', required = false } = config;
+    const container = document.createElement('div');
+    container.className = 'form-group mb-4';
+    let html = '';
+    if (label) html += `<label class="block text-sm font-medium mb-2">${UIComponents.escapeHtml(label)}</label>`;
+    html += `<input type="${type}" name="${name}" placeholder="${UIComponents.escapeHtml(placeholder)}" value="${UIComponents.escapeHtml(value)}" ${required ? 'required' : ''} class="input input-block input-solid" />`;
+    container.innerHTML = html;
+    return container;
+  },
+
+  createSelect(config = {}) {
+    const { name = '', label = '', options = [], value = '', required = false } = config;
+    const container = document.createElement('div');
+    container.className = 'form-group mb-4';
+    let html = '';
+    if (label) html += `<label class="block text-sm font-medium mb-2">${UIComponents.escapeHtml(label)}</label>`;
+    html += `<select name="${name}" ${required ? 'required' : ''} class="select select-block select-solid">${options.map(opt => `<option value="${opt.value}" ${opt.value === value ? 'selected' : ''}>${UIComponents.escapeHtml(opt.label)}</option>`).join('')}</select>`;
+    container.innerHTML = html;
+    return container;
+  },
+
+  createButtonGroup(config = {}) {
+    const { buttons = [], vertical = false } = config;
+    const container = document.createElement('div');
+    container.className = `button-group flex gap-2 ${vertical ? 'flex-col' : 'flex-row'}`;
+    buttons.forEach(btn => {
+      const button = document.createElement('button');
+      button.className = `btn btn-${btn.variant || 'secondary'} flex-${vertical ? '1' : 'none'}`;
+      button.textContent = btn.label;
+      if (btn.onClick) button.addEventListener('click', btn.onClick);
+      container.appendChild(button);
+    });
+    return container;
+  },
+
+  createBadge(config = {}) {
+    const { label = '', variant = 'default', size = 'medium' } = config;
+    const sizeClasses = { small: 'badge-sm', medium: 'badge-md', large: 'badge-lg' };
+    const variantClasses = { default: 'badge-flat', primary: 'badge-flat-primary', success: 'badge-flat-success', warning: 'badge-flat-warning', error: 'badge-flat-error' };
+    const badge = document.createElement('span');
+    badge.className = `badge ${sizeClasses[size] || sizeClasses.medium} ${variantClasses[variant] || variantClasses.default}`;
+    badge.textContent = label;
+    return badge;
   }
-
-  html += `
-    <input
-      type="${type}"
-      name="${name}"
-      placeholder="${UIComponents.escapeHtml(placeholder)}"
-      value="${UIComponents.escapeHtml(value)}"
-      ${required ? 'required' : ''}
-      class="input input-block input-solid"
-    />
-  `;
-
-  container.innerHTML = html;
-  return container;
-};
-
-UIComponents.createSelect = function(config = {}) {
-  const {
-    name = '',
-    label = '',
-    options = [],
-    value = '',
-    required = false
-  } = config;
-
-  const container = document.createElement('div');
-  container.className = 'form-group mb-4';
-
-  let html = '';
-  if (label) {
-    html += `<label class="block text-sm font-medium mb-2">${UIComponents.escapeHtml(label)}</label>`;
-  }
-
-  html += `
-    <select
-      name="${name}"
-      ${required ? 'required' : ''}
-      class="select select-block select-solid"
-    >
-      ${options.map(opt => `
-        <option value="${opt.value}" ${opt.value === value ? 'selected' : ''}>
-          ${UIComponents.escapeHtml(opt.label)}
-        </option>
-      `).join('')}
-    </select>
-  `;
-
-  container.innerHTML = html;
-  return container;
-};
-
-UIComponents.createButtonGroup = function(config = {}) {
-  const {
-    buttons = [],
-    vertical = false
-  } = config;
-
-  const container = document.createElement('div');
-  container.className = `button-group flex gap-2 ${vertical ? 'flex-col' : 'flex-row'}`;
-
-  buttons.forEach(btn => {
-    const button = document.createElement('button');
-    button.className = `btn btn-${btn.variant || 'secondary'} flex-${vertical ? '1' : 'none'}`;
-    button.textContent = btn.label;
-    if (btn.onClick) {
-      button.addEventListener('click', btn.onClick);
-    }
-    container.appendChild(button);
-  });
-
-  return container;
-};
-
-UIComponents.createBadge = function(config = {}) {
-  const {
-    label = '',
-    variant = 'default',
-    size = 'medium'
-  } = config;
-
-  const sizeClasses = {
-    'small': 'badge-sm',
-    'medium': 'badge-md',
-    'large': 'badge-lg'
-  };
-
-  const variantClasses = {
-    'default': 'badge-flat',
-    'primary': 'badge-flat-primary',
-    'success': 'badge-flat-success',
-    'warning': 'badge-flat-warning',
-    'error': 'badge-flat-error'
-  };
-
-  const badge = document.createElement('span');
-  badge.className = `badge ${sizeClasses[size] || sizeClasses['medium']} ${variantClasses[variant] || variantClasses['default']}`;
-  badge.textContent = label;
-  return badge;
-};
+});

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 });
+    }
+  }
+});