agentgui 1.0.815 → 1.0.816

package/static/js/syntax-highlighter.js

@@ -1,7 +1,3 @@
-/**
- * Syntax Highlighter Integration
- * Handles lazy-loading and caching of Prism.js for code highlighting
- */
 
 class SyntaxHighlighter {
   constructor(config = {}) {
@@ -24,21 +20,15 @@ class SyntaxHighlighter {
     this.loadPromise = null;
   }
 
-  /**
-   * Ensure Prism is loaded
-   */
   async ensureLoaded() {
-    // Already loaded
     if (typeof Prism !== 'undefined' && this.isLoaded) {
       return true;
     }
 
-    // Currently loading
     if (this.isLoading && this.loadPromise) {
       return this.loadPromise;
     }
 
-    // Start loading
     this.isLoading = true;
     this.loadPromise = this.loadPrism();
 
@@ -54,19 +44,14 @@ class SyntaxHighlighter {
     }
   }
 
-  /**
-   * Load Prism library
-   */
   async loadPrism() {
     return new Promise((resolve, reject) => {
       try {
-        // Load main Prism JS
         const script = document.createElement('script');
         script.src = `${this.config.cdnUrl}/prism.js`;
         script.async = true;
 
         script.onload = () => {
-          // Load common language files
           this.loadLanguages();
           this.isLoading = false;
           resolve(true);
@@ -85,9 +70,6 @@ class SyntaxHighlighter {
     });
   }
 
-  /**
-   * Load language files
-   */
   loadLanguages() {
     const languages = ['javascript', 'python', 'sql', 'bash', 'json'];
 
@@ -99,13 +81,9 @@ class SyntaxHighlighter {
     }
   }
 
-  /**
-   * Highlight code
-   */
   async highlight(code, language = 'plaintext') {
     if (!code) return '';
 
-    // Ensure Prism is loaded
     if (this.config.lazyLoad) {
       try {
         await this.ensureLoaded();
@@ -115,19 +93,16 @@ class SyntaxHighlighter {
       }
     }
 
-    // Check cache
     const cacheKey = `${language}:${code}`;
     if (this.config.enableCache && this.highlightCache.has(cacheKey)) {
       return this.highlightCache.get(cacheKey);
     }
 
-    // Highlight code
     let highlighted;
     try {
       if (typeof Prism !== 'undefined' && Prism.languages[language]) {
         highlighted = Prism.highlight(code, Prism.languages[language], language);
       } else {
-        // Fallback to escaped HTML if language not supported
         highlighted = this.escapeHtml(code);
       }
     } catch (error) {
@@ -135,11 +110,9 @@ class SyntaxHighlighter {
       highlighted = this.escapeHtml(code);
     }
 
-    // Cache result
     if (this.config.enableCache) {
       this.highlightCache.set(cacheKey, highlighted);
 
-      // Trim cache if too large
       if (this.highlightCache.size > this.config.maxCacheSize) {
         const firstKey = this.highlightCache.keys().next().value;
         this.highlightCache.delete(firstKey);
@@ -149,14 +122,10 @@ class SyntaxHighlighter {
     return highlighted;
   }
 
-  /**
-   * Create highlighted code element
-   */
   async createHighlightedElement(code, language = 'plaintext') {
     const pre = document.createElement('pre');
     const code_el = document.createElement('code');
 
-    // Set language class
     code_el.className = `language-${language}`;
 
     if (this.config.lazyLoad) {
@@ -175,9 +144,6 @@ class SyntaxHighlighter {
     return pre;
   }
 
-  /**
-   * Highlight DOM element
-   */
   async highlightElement(element) {
     if (!element || !element.querySelector('code')) return;
 
@@ -199,13 +165,9 @@ class SyntaxHighlighter {
     }
   }
 
-  /**
-   * Detect language from code content
-   */
   detectLanguage(code) {
     if (!code) return 'plaintext';
 
-    // Shebang detection
     if (code.startsWith('#!/')) {
       if (code.includes('python')) return 'python';
       if (code.includes('node') || code.includes('node.js')) return 'javascript';
@@ -213,7 +175,6 @@ class SyntaxHighlighter {
       if (code.includes('ruby')) return 'ruby';
     }
 
-    // Pattern detection
     if (code.includes('def ') && code.includes(':')) return 'python';
     if (code.includes('function') || code.includes('=>')) return 'javascript';
     if (code.includes('fn ') && code.includes('->')) return 'rust';
@@ -225,30 +186,18 @@ class SyntaxHighlighter {
     return 'plaintext';
   }
 
-  /**
-   * Get supported languages
-   */
   getSupportedLanguages() {
     return [...this.config.supportedLanguages];
   }
 
-  /**
-   * Check if language is supported
-   */
   isSupportedLanguage(language) {
     return this.config.supportedLanguages.includes(language);
   }
 
-  /**
-   * Clear cache
-   */
   clearCache() {
     this.highlightCache.clear();
   }
 
-  /**
-   * Get cache stats
-   */
   getCacheStats() {
     return {
       size: this.highlightCache.size,
@@ -256,15 +205,11 @@ class SyntaxHighlighter {
     };
   }
 
-  /**
-   * HTML escape utility
-   */
   escapeHtml(text) {
     return window._escHtml(text);
   }
 }
 
-// Export for use in browser
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = SyntaxHighlighter;
 }

package/static/js/ui-components.js

@@ -1,12 +1,5 @@
-/**
- * UI Components
- * Reusable UI building blocks for modals, tabs, buttons, and more
- */
 
 class UIComponents {
-  /**
-   * Create a modal dialog
-   */
   static createModal(config = {}) {
     const {
       title = 'Dialog',
@@ -45,14 +38,12 @@ class UIComponents {
       </div>
     `;
 
-    // Add close handler
     const closeBtn = modal.querySelector('.modal-close');
     closeBtn.addEventListener('click', () => {
       modal.remove();
       if (onClose) onClose();
     });
 
-    // Add button handlers
     modal.querySelectorAll('[data-action]').forEach(btn => {
       btn.addEventListener('click', (e) => {
         const action = e.target.dataset.action;
@@ -63,7 +54,6 @@ class UIComponents {
       });
     });
 
-    // Close on background click
     modal.addEventListener('click', (e) => {
       if (e.target === modal) {
         modal.remove();
@@ -74,9 +64,6 @@ class UIComponents {
     return modal;
   }
 
-  /**
-   * Create a tabbed interface
-   */
   static createTabs(config = {}) {
     const {
       tabs = [],
@@ -87,7 +74,6 @@ class UIComponents {
     const container = document.createElement('div');
     container.className = 'tabs';
 
-    // Tab buttons
     const tabButtons = document.createElement('div');
     tabButtons.className = 'tab-buttons flex border-b';
 
@@ -98,7 +84,6 @@ class UIComponents {
       btn.dataset.tabIndex = index;
 
       btn.addEventListener('click', () => {
-        // Update active button
         tabButtons.querySelectorAll('.tab-button').forEach((b, i) => {
           if (i === index) {
             b.classList.add('tab-active');
@@ -107,7 +92,6 @@ class UIComponents {
           }
         });
 
-        // Update tab content
         tabContent.querySelectorAll('.tab-pane').forEach((pane, i) => {
           pane.style.display = i === index ? 'block' : 'none';
         });
@@ -120,7 +104,6 @@ class UIComponents {
 
     container.appendChild(tabButtons);
 
-    // Tab content
     const tabContent = document.createElement('div');
     tabContent.className = 'tab-content mt-4';
 
@@ -136,9 +119,6 @@ class UIComponents {
     return container;
   }
 
-  /**
-   * Create an alert/notification
-   */
   static createAlert(config = {}) {
     const {
       message = '',
@@ -175,9 +155,6 @@ class UIComponents {
     return alert;
   }
 
-  /**
-   * Create a loading spinner
-   */
   static createSpinner(config = {}) {
     const {
       size = 'medium', // small, medium, large
@@ -199,9 +176,6 @@ class UIComponents {
     return container;
   }
 
-  /**
-   * Create a progress bar
-   */
   static createProgressBar(config = {}) {
     const {
       percentage = 0,
@@ -225,9 +199,6 @@ class UIComponents {
     return container;
   }
 
-  /**
-   * Create a collapsible section
-   */
   static createCollapsible(config = {}) {
     const {
       title = 'Details',
@@ -252,9 +223,6 @@ class UIComponents {
     return container;
   }
 
-  /**
-   * Create a form input
-   */
   static createInput(config = {}) {
     const {
       type = 'text',
@@ -288,9 +256,6 @@ class UIComponents {
     return container;
   }
 
-  /**
-   * Create a select dropdown
-   */
   static createSelect(config = {}) {
     const {
       name = '',
@@ -326,9 +291,6 @@ class UIComponents {
     return container;
   }
 
-  /**
-   * Create a button group
-   */
   static createButtonGroup(config = {}) {
     const {
       buttons = [],
@@ -351,9 +313,6 @@ class UIComponents {
     return container;
   }
 
-  /**
-   * Create a badge/tag
-   */
   static createBadge(config = {}) {
     const {
       label = '',
@@ -381,16 +340,10 @@ class UIComponents {
     return badge;
   }
 
-  /**
-   * HTML escape utility
-   */
   static escapeHtml(text) {
     return window._escHtml(text);
   }
 
-  /**
-   * Copy text to clipboard
-   */
   static copyToClipboard(text) {
     return navigator.clipboard.writeText(text).catch(err => {
       console.error('Failed to copy:', err);
@@ -398,9 +351,6 @@ class UIComponents {
     });
   }
 
-  /**
-   * Download data as file
-   */
   static downloadFile(data, filename, mimeType = 'text/plain') {
     const blob = new Blob([data], { type: mimeType });
     const url = URL.createObjectURL(blob);
@@ -414,7 +364,6 @@ class UIComponents {
   }
 }
 
-// Export for use in browser
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = UIComponents;
 }

package/static/js/websocket-manager.js

@@ -1,5 +1,3 @@
-// codec is loaded as ES module and exposed globally by ws-client.js
-// or inline: import('./codec.js').then(m => window._codec = m)
 
 class WebSocketManager {
   constructor(config = {}) {
@@ -94,7 +92,6 @@ class WebSocketManager {
   }
   set connectionState(v) { this._connectionState = v; }
 
-  // Machine context is authoritative for these flags
   get isManuallyDisconnected() {
     if (this._wsActor) return !!this._wsActor.getSnapshot().context.manualDisconnect;
     return this._isManuallyDisconnected;
@@ -201,7 +198,6 @@ class WebSocketManager {
           );
         }
 
-        // RPC reply envelopes — emit for WsClient to intercept, then skip broadcast
         if (data.r !== undefined && !data.type) {
           this.emit('message', data);
           continue;
@@ -233,7 +229,6 @@ class WebSocketManager {
 
     this.latency.current = rtt;
 
-    // EMA smoothing (α=0.2 → slow adaptation, less noise)
     const alpha = 0.2;
     this._latencyEma = this._latencyEma === null ? rtt : alpha * rtt + (1 - alpha) * this._latencyEma;
     this.latency.avg = this._latencyEma;
@@ -535,8 +530,6 @@ class WebSocketManager {
         this.stats.totalMessagesSent++;
       } catch (_) {}
     }
-    // Server automatically sends streaming_start{resumed:true} on subscribe
-    // when an active execution exists — no need to query conv.get here.
   }
 
   unsubscribeFromSession(sessionId) {

package/static/js/ws-client.js

@@ -10,7 +10,6 @@ class WsClient {
   _install() {
     if (this._installed) return;
     this._installed = true;
-    // Listen on decoded message objects — websocket-manager emits 'message' with decoded obj
     this._ws.on('message', (data) => {
       if (data.r && this._pending.has(data.r)) {
         const p = this._pending.get(data.r);
@@ -23,7 +22,6 @@ class WsClient {
         }
         return; // consumed — don't re-emit
       }
-      // Non-RPC messages are already emitted by websocket-manager; nothing to do
     });
     this._ws.on('disconnected', () => this.cancelAll());
   }
@@ -78,8 +76,6 @@ class WsClient {
 
 window.WsClient = WsClient;
 
-// Bootstrap: create wsManager and wsClient synchronously so other modules can use them immediately.
-// Codec is loaded async and upgrades encoding once ready; websocket-manager falls back to msgpackr until then.
 window.wsManager = new WebSocketManager();
 window.wsClient = new WsClient(window.wsManager);
 window.wsManager.connect().catch(function() {});

package/static/js/ws-machine.js

@@ -1,5 +1,3 @@
-// WebSocket connection state machine using XState v5
-// Consumed by WebSocketManager to provide formal state tracking
 
 const { createMachine, createActor, assign } = XState;
 

package/static/theme.js

@@ -1,4 +1,3 @@
-// Theme management for dark/light mode
 class ThemeManager {
   constructor() {
     this.THEME_KEY = 'gmgui-theme';
@@ -7,27 +6,22 @@ class ThemeManager {
   }
 
   init() {
-    // Load saved theme or use system preference
     const savedTheme = localStorage.getItem(this.THEME_KEY);
     const prefersDark = this.SYSTEM_DARK_MODE.matches;
 
     if (savedTheme) {
       this.setTheme(savedTheme);
     } else {
-      // Use system preference
       this.setTheme(prefersDark ? 'dark' : 'light');
     }
 
-    // Listen for system theme changes
     this.SYSTEM_DARK_MODE.addEventListener('change', (e) => {
       const savedTheme = localStorage.getItem(this.THEME_KEY);
-      // Only auto-switch if user hasn't manually set a preference
       if (!savedTheme) {
         this.setTheme(e.matches ? 'dark' : 'light');
       }
     });
 
-    // Setup theme toggle button
     const themeToggle = document.getElementById('themeToggle');
     if (themeToggle) {
       themeToggle.addEventListener('click', () => this.toggleTheme());
@@ -45,7 +39,6 @@ class ThemeManager {
     localStorage.setItem(this.THEME_KEY, theme);
     this.updateThemeIcon(theme);
 
-    // Notify embedded iframes (storage events don't fire in same window)
     const msg = { type: 'theme-change', theme };
     document.querySelectorAll('iframe').forEach(iframe => {
       try { iframe.contentWindow.postMessage(msg, '*'); } catch (_) {}
@@ -73,7 +66,6 @@ class ThemeManager {
   }
 }
 
-// Initialize theme manager when DOM is ready
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', () => {
     window.themeManager = new ThemeManager();