agentgui 1.0.822 → 1.0.824

package/static/js/image-loader-element.js

@@ -0,0 +1,76 @@
+
+Object.assign(ImageLoader.prototype, {
+  createImageElement(imagePath, options = {}) {
+    const container = document.createElement('div');
+    container.className = 'image-container';
+    container.dataset.imagePath = imagePath;
+    container.style.cssText = `
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.75rem;
+      border-radius: 0.375rem;
+      background: var(--color-bg-secondary);
+      border: 1px solid var(--color-border);
+    `;
+
+    const placeholder = document.createElement('div');
+    placeholder.className = 'image-placeholder';
+    placeholder.style.cssText = `
+      background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
+      background-size: 200% 100%;
+      animation: loading 1.5s infinite;
+      border-radius: 0.375rem;
+      aspect-ratio: 16/9;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-secondary);
+      font-size: 0.875rem;
+    `;
+    placeholder.innerHTML = 'Loading image...';
+    placeholder.dataset.path = imagePath;
+
+    const img = document.createElement('img');
+    img.className = 'lazy-image';
+    img.alt = imagePath;
+    img.style.cssText = `
+      max-width: 100%;
+      max-height: ${this.config.maxImageDisplaySize};
+      border-radius: 0.375rem;
+      display: none;
+    `;
+    img.dataset.src = imagePath;
+
+    const caption = document.createElement('div');
+    caption.className = 'image-caption';
+    caption.style.cssText = `
+      font-size: 0.75rem;
+      color: var(--color-text-secondary);
+      word-break: break-all;
+      font-family: 'Monaco', 'Menlo', monospace;
+    `;
+    caption.textContent = imagePath;
+
+    container.appendChild(placeholder);
+    container.appendChild(img);
+    container.appendChild(caption);
+
+    img.addEventListener('load', () => {
+      placeholder.style.display = 'none';
+      img.style.display = 'block';
+    });
+
+    img.addEventListener('error', () => {
+      placeholder.textContent = 'Failed to load image';
+      placeholder.style.background = 'var(--color-bg-error)';
+      placeholder.style.color = 'var(--color-text-error)';
+    });
+
+    if (this.intersectionObserver) {
+      this.intersectionObserver.observe(container);
+    }
+
+    return container;
+  }
+});

package/static/js/image-loader.js

@@ -89,80 +89,6 @@ class ImageLoader {
     return images;
   }
 
-  createImageElement(imagePath, options = {}) {
-    const container = document.createElement('div');
-    container.className = 'image-container';
-    container.dataset.imagePath = imagePath;
-    container.style.cssText = `
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      padding: 0.75rem;
-      border-radius: 0.375rem;
-      background: var(--color-bg-secondary);
-      border: 1px solid var(--color-border);
-    `;
-
-    const placeholder = document.createElement('div');
-    placeholder.className = 'image-placeholder';
-    placeholder.style.cssText = `
-      background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
-      background-size: 200% 100%;
-      animation: loading 1.5s infinite;
-      border-radius: 0.375rem;
-      aspect-ratio: 16/9;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-text-secondary);
-      font-size: 0.875rem;
-    `;
-    placeholder.innerHTML = 'Loading image...';
-    placeholder.dataset.path = imagePath;
-
-    const img = document.createElement('img');
-    img.className = 'lazy-image';
-    img.alt = imagePath;
-    img.style.cssText = `
-      max-width: 100%;
-      max-height: ${this.config.maxImageDisplaySize};
-      border-radius: 0.375rem;
-      display: none;
-    `;
-    img.dataset.src = imagePath;
-
-    const caption = document.createElement('div');
-    caption.className = 'image-caption';
-    caption.style.cssText = `
-      font-size: 0.75rem;
-      color: var(--color-text-secondary);
-      word-break: break-all;
-      font-family: 'Monaco', 'Menlo', monospace;
-    `;
-    caption.textContent = imagePath;
-
-    container.appendChild(placeholder);
-    container.appendChild(img);
-    container.appendChild(caption);
-
-    img.addEventListener('load', () => {
-      placeholder.style.display = 'none';
-      img.style.display = 'block';
-    });
-
-    img.addEventListener('error', () => {
-      placeholder.textContent = 'Failed to load image';
-      placeholder.style.background = 'var(--color-bg-error)';
-      placeholder.style.color = 'var(--color-text-error)';
-    });
-
-    if (this.intersectionObserver) {
-      this.intersectionObserver.observe(container);
-    }
-
-    return container;
-  }
-
   initIntersectionObserver() {
     this.intersectionObserver = new IntersectionObserver(
       (entries) => {

package/static/js/syntax-highlighter-render.js

@@ -0,0 +1,72 @@
+Object.assign(SyntaxHighlighter.prototype, {
+  async highlight(code, language = 'plaintext') {
+    if (!code) return '';
+    if (this.config.lazyLoad) {
+      try {
+        await this.ensureLoaded();
+      } catch (error) {
+        console.warn('Prism loading failed, returning unformatted code');
+        return this.escapeHtml(code);
+      }
+    }
+    const cacheKey = `${language}:${code}`;
+    if (this.config.enableCache && this.highlightCache.has(cacheKey)) return this.highlightCache.get(cacheKey);
+    let highlighted;
+    try {
+      if (typeof Prism !== 'undefined' && Prism.languages[language]) {
+        highlighted = Prism.highlight(code, Prism.languages[language], language);
+      } else {
+        highlighted = this.escapeHtml(code);
+      }
+    } catch (error) {
+      console.error('Highlight error:', error);
+      highlighted = this.escapeHtml(code);
+    }
+    if (this.config.enableCache) {
+      this.highlightCache.set(cacheKey, highlighted);
+      if (this.highlightCache.size > this.config.maxCacheSize) {
+        const firstKey = this.highlightCache.keys().next().value;
+        this.highlightCache.delete(firstKey);
+      }
+    }
+    return highlighted;
+  },
+
+  async createHighlightedElement(code, language = 'plaintext') {
+    const pre = document.createElement('pre');
+    const code_el = document.createElement('code');
+    code_el.className = `language-${language}`;
+    if (this.config.lazyLoad) {
+      try {
+        await this.ensureLoaded();
+        const highlighted = await this.highlight(code, language);
+        code_el.innerHTML = highlighted;
+      } catch (error) {
+        code_el.textContent = code;
+      }
+    } else {
+      code_el.textContent = code;
+    }
+    pre.appendChild(code_el);
+    return pre;
+  },
+
+  async highlightElement(element) {
+    if (!element || !element.querySelector('code')) return;
+    if (this.config.lazyLoad) {
+      try {
+        await this.ensureLoaded();
+      } catch (error) {
+        console.warn('Prism loading failed, skipping highlighting');
+        return;
+      }
+    }
+    if (typeof Prism !== 'undefined') {
+      try {
+        Prism.highlightElement(element.querySelector('code'));
+      } catch (error) {
+        console.error('Element highlighting error:', error);
+      }
+    }
+  }
+});

package/static/js/syntax-highlighter.js

@@ -81,90 +81,6 @@ class SyntaxHighlighter {
     }
   }
 
-  async highlight(code, language = 'plaintext') {
-    if (!code) return '';
-
-    if (this.config.lazyLoad) {
-      try {
-        await this.ensureLoaded();
-      } catch (error) {
-        console.warn('Prism loading failed, returning unformatted code');
-        return this.escapeHtml(code);
-      }
-    }
-
-    const cacheKey = `${language}:${code}`;
-    if (this.config.enableCache && this.highlightCache.has(cacheKey)) {
-      return this.highlightCache.get(cacheKey);
-    }
-
-    let highlighted;
-    try {
-      if (typeof Prism !== 'undefined' && Prism.languages[language]) {
-        highlighted = Prism.highlight(code, Prism.languages[language], language);
-      } else {
-        highlighted = this.escapeHtml(code);
-      }
-    } catch (error) {
-      console.error('Highlight error:', error);
-      highlighted = this.escapeHtml(code);
-    }
-
-    if (this.config.enableCache) {
-      this.highlightCache.set(cacheKey, highlighted);
-
-      if (this.highlightCache.size > this.config.maxCacheSize) {
-        const firstKey = this.highlightCache.keys().next().value;
-        this.highlightCache.delete(firstKey);
-      }
-    }
-
-    return highlighted;
-  }
-
-  async createHighlightedElement(code, language = 'plaintext') {
-    const pre = document.createElement('pre');
-    const code_el = document.createElement('code');
-
-    code_el.className = `language-${language}`;
-
-    if (this.config.lazyLoad) {
-      try {
-        await this.ensureLoaded();
-        const highlighted = await this.highlight(code, language);
-        code_el.innerHTML = highlighted;
-      } catch (error) {
-        code_el.textContent = code;
-      }
-    } else {
-      code_el.textContent = code;
-    }
-
-    pre.appendChild(code_el);
-    return pre;
-  }
-
-  async highlightElement(element) {
-    if (!element || !element.querySelector('code')) return;
-
-    if (this.config.lazyLoad) {
-      try {
-        await this.ensureLoaded();
-      } catch (error) {
-        console.warn('Prism loading failed, skipping highlighting');
-        return;
-      }
-    }
-
-    if (typeof Prism !== 'undefined') {
-      try {
-        Prism.highlightElement(element.querySelector('code'));
-      } catch (error) {
-        console.error('Element highlighting error:', error);
-      }
-    }
-  }
-
   detectLanguage(code) {
     if (!code) return 'plaintext';
 

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