agentgui 1.0.930 → 1.0.932

package/static/js/event-processor.js

@@ -1,181 +0,0 @@
-class EventProcessor {
-  constructor(config = {}) {
-    this.config = {
-      enableSyntaxHighlight: config.enableSyntaxHighlight !== false,
-      ...config
-    };
-
-    this.stats = {
-      totalEvents: 0,
-      processedEvents: 0,
-      validatedEvents: 0,
-      transformedEvents: 0,
-      errorCount: 0,
-      avgProcessTime: 0
-    };
-  }
-
-  /**
-   * Process and enrich event
-   */
-  processEvent(event) {
-    if (!event || typeof event !== 'object') {
-      return null;
-    }
-
-    // Filter isMeta user entries (local command caveats injected by Claude Code CLI)
-    if (event.type === 'user' && event.isMeta === true) {
-      return null;
-    }
-
-    const startTime = performance.now();
-    this.stats.totalEvents++;
-
-    try {
-      // Validate event structure
-      if (!this.validateEvent(event)) {
-        this.stats.errorCount++;
-        return null;
-      }
-
-      this.stats.validatedEvents++;
-
-      // Add processing metadata
-      const processed = {
-        ...event,
-        processedAt: Date.now(),
-        processTime: 0
-      };
-
-      // Route isCompactSummary entries to special display type
-      if (event.isCompactSummary === true) {
-        processed.type = 'compact_summary';
-        this.stats.transformedEvents++;
-      }
-
-      // Extract and flatten cache usage for cost tracking
-      if (event.message?.usage) {
-        const u = event.message.usage;
-        processed._cacheCreation = u.cache_creation_input_tokens
-          || u['cache_creation.ephemeral_1h_input_tokens']
-          || u['cache_creation.ephemeral_5m_input_tokens']
-          || 0;
-        processed._cacheRead = u.cache_read_input_tokens || 0;
-        if (processed._cacheCreation || processed._cacheRead) {
-          this.stats.transformedEvents++;
-        }
-      }
-
-      if (event.type === 'file_read' && event.path && this.isImagePath(event.path)) {
-        processed.isImage = true;
-        processed.imagePath = event.path;
-        this.stats.transformedEvents++;
-      }
-
-      if ((event.type === 'text_block' || event.type === 'command_execute' || event.type === 'streaming_progress') && (event.content || event.output)) {
-        const imagePaths = this.extractImagePaths(event.content || event.output || '');
-        if (imagePaths.length > 0) {
-          processed.detectedImages = imagePaths;
-          this.stats.transformedEvents++;
-        }
-      }
-
-      processed.processTime = performance.now() - startTime;
-      this.stats.processedEvents++;
-
-      // Update average processing time
-      this.stats.avgProcessTime = (this.stats.avgProcessTime * (this.stats.processedEvents - 1) + processed.processTime) / this.stats.processedEvents;
-
-      return processed;
-    } catch (error) {
-      console.error('Event processing error:', error);
-      this.stats.errorCount++;
-      return null;
-    }
-  }
-
-  /**
-   * Validate event structure
-   */
-  validateEvent(event) {
-    if (!event.type) {
-      return false;
-    }
-
-    // Required fields by type
-    const typeRequirements = {
-      streaming_start: ['sessionId', 'conversationId'],
-      streaming_complete: ['sessionId'],
-      file_read: ['path'],
-      file_write: ['path'],
-      command_execute: ['command'],
-      git_status: [],
-      error: ['message']
-    };
-
-    const requirements = typeRequirements[event.type];
-    if (requirements) {
-      for (const field of requirements) {
-        if (!event[field]) {
-          return false;
-        }
-      }
-    }
-
-    return true;
-  }
-
-  getFileExtension(filePath) {
-    const match = filePath.match(/\.([^.]+)$/);
-    return match ? match[1].toLowerCase() : null;
-  }
-
-  getStats() {
-    return { ...this.stats };
-  }
-
-  /**
-   * Reset statistics
-   */
-  resetStats() {
-    this.stats = {
-      totalEvents: 0,
-      processedEvents: 0,
-      validatedEvents: 0,
-      transformedEvents: 0,
-      errorCount: 0,
-      avgProcessTime: 0
-    };
-  }
-
-  /**
-   * Check if a path is an image file
-   */
-  isImagePath(filePath) {
-    if (!filePath || typeof filePath !== 'string') return false;
-    const imageExts = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'];
-    const ext = this.getFileExtension(filePath);
-    return imageExts.includes(ext);
-  }
-
-  /**
-   * Extract image file paths from text content
-   */
-  extractImagePaths(content) {
-    if (typeof content !== 'string') return [];
-    const paths = [];
-    const pathPattern = /(?:\/[a-zA-Z0-9_.\-]+)+\/[a-zA-Z0-9_.\-]+\.(?:png|jpg|jpeg|gif|webp|svg)/gi;
-    let match;
-    while ((match = pathPattern.exec(content)) !== null) {
-      if (this.isImagePath(match[0])) {
-        paths.push(match[0]);
-      }
-    }
-    return [...new Set(paths)];
-  }
-}
-
-// Export for use in browser
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = EventProcessor;
-}

package/static/js/features.js

@@ -1,187 +0,0 @@
-(function() {
-  const BASE = window.__BASE_URL || '';
-  let currentConversation = null;
-  let currentView = 'chat';
-  let dragCounter = 0;
-
-  function init() {
-    setupSidebarToggle();
-    setupDragAndDrop();
-    setupViewToggle();
-    setupConversationListener();
-    setupModelProgressIndicator();
-  }
-
-  function setupSidebarToggle() {
-    var toggleBtn = document.querySelector('[data-sidebar-toggle]');
-    var sidebar = document.querySelector('[data-sidebar]');
-    var overlay = document.querySelector('[data-sidebar-overlay]');
-    if (!sidebar) return;
-    if (window.innerWidth <= 768) {
-      sidebar.classList.add('collapsed');
-    } else {
-      var savedState = localStorage.getItem('sidebar-collapsed');
-      if (savedState === 'true') sidebar.classList.add('collapsed');
-    }
-    function isMobile() { return window.innerWidth <= 768; }
-    function toggleSidebar() {
-      if (isMobile()) {
-        sidebar.classList.contains('mobile-visible') ? closeSidebar() : openSidebar();
-      } else {
-        sidebar.classList.toggle('collapsed');
-        localStorage.setItem('sidebar-collapsed', sidebar.classList.contains('collapsed'));
-      }
-    }
-    function openSidebar() {
-      sidebar.classList.add('mobile-visible');
-      sidebar.classList.remove('collapsed');
-      if (overlay) overlay.classList.add('visible');
-    }
-    function closeSidebar() {
-      sidebar.classList.remove('mobile-visible');
-      sidebar.classList.add('collapsed'); // Ensure sidebar is hidden on close
-      if (overlay) overlay.classList.remove('visible');
-    }
-    if (toggleBtn) toggleBtn.addEventListener('click', function(e) { e.stopPropagation(); toggleSidebar(); });
-    if (overlay) overlay.addEventListener('click', closeSidebar);
-    document.addEventListener('keydown', function(e) {
-      if ((e.ctrlKey || e.metaKey) && e.key === 'b') { e.preventDefault(); toggleSidebar(); }
-    });
-    window.addEventListener('conversation-selected', function() { if (isMobile()) closeSidebar(); });
-    window.addEventListener('resize', function() {
-      if (!isMobile()) { sidebar.classList.remove('mobile-visible'); if (overlay) overlay.classList.remove('visible'); }
-    });
-  }
-
-  function setupDragAndDrop() {
-    var dropZone = document.querySelector('[data-drop-zone]');
-    var overlay = document.getElementById('dropZoneOverlay');
-    if (!dropZone || !overlay) return;
-    dropZone.addEventListener('dragenter', function(e) { e.preventDefault(); e.stopPropagation(); dragCounter++; if (dragCounter === 1) overlay.classList.add('visible'); });
-    dropZone.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); });
-    dropZone.addEventListener('dragleave', function(e) { e.preventDefault(); e.stopPropagation(); dragCounter--; if (dragCounter <= 0) { dragCounter = 0; overlay.classList.remove('visible'); } });
-    dropZone.addEventListener('drop', function(e) {
-      e.preventDefault(); e.stopPropagation(); dragCounter = 0; overlay.classList.remove('visible');
-      if (!currentConversation) { if (window.UIDialog) window.UIDialog.showToast('Select a conversation first', 'error'); return; }
-      var files = e.dataTransfer.files;
-      if (!files || files.length === 0) return;
-      uploadFiles(files);
-    });
-  }
-
-  function uploadFiles(files) {
-    if (!currentConversation) { if (window.UIDialog) window.UIDialog.showToast('No conversation selected', 'error'); return; }
-    var formData = new FormData();
-    for (var i = 0; i < files.length; i++) formData.append('file', files[i]);
-    if (window.UIDialog) window.UIDialog.showToast('Uploading ' + files.length + ' file(s)...', 'info');
-    fetch(BASE + '/api/upload/' + currentConversation, { method: 'POST', body: formData })
-      .then(function(res) { return res.json(); })
-      .then(function(data) {
-        if (data.ok) { if (window.UIDialog) window.UIDialog.showToast(data.count + ' file(s) uploaded', 'success'); }
-        else { if (window.UIDialog) window.UIDialog.showToast('Upload failed: ' + (data.error || 'Unknown error'), 'error'); }
-      })
-      .catch(function(err) { if (window.UIDialog) window.UIDialog.showToast('Upload failed: ' + err.message, 'error'); });
-  }
-
-  function setupViewToggle() {
-    var bar = document.getElementById('viewToggleBar');
-    if (!bar) return;
-    bar.querySelectorAll('.view-toggle-btn').forEach(function(btn) {
-      btn.addEventListener('click', function() { switchView(btn.dataset.view); });
-    });
-  }
-
-  function setupModelProgressIndicator() {
-    var indicator = document.getElementById('modelDlIndicator');
-    var tooltip = document.getElementById('modelDlTooltip');
-    var progressCircle = indicator ? indicator.querySelector('.progress') : null;
-    var circumference = 62.83;
-
-    window.addEventListener('ws-message', function(e) {
-      var data = e.detail;
-      if (!data || data.type !== 'model_download_progress') return;
-      var progress = data.progress || data;
-      if (progress.done && progress.complete) {
-        if (indicator) indicator.classList.remove('active');
-        return;
-      }
-      if (progress.error || progress.status === 'failed') {
-        if (indicator) indicator.classList.remove('active');
-        if (tooltip) tooltip.textContent = 'Voice model download failed: ' + (progress.error || 'unknown');
-        return;
-      }
-      if (progress.started || progress.downloading || progress.status === 'downloading') {
-        if (indicator) indicator.classList.add('active');
-        var pct = progress.percentComplete || 0;
-        if (progress.completedFiles && progress.totalFiles) {
-          pct = Math.round((progress.completedFiles / progress.totalFiles) * 100);
-        }
-        if (progressCircle) {
-          progressCircle.style.strokeDashoffset = circumference - (circumference * pct / 100);
-        }
-        var msg = 'Downloading voice models... ' + pct + '%';
-        if (progress.file) msg = 'Downloading ' + progress.file + '...';
-        if (tooltip) tooltip.textContent = msg;
-      }
-    });
-
-    if (window.wsClient) {
-      window.wsClient.rpc('speech.status')
-        .then(function(status) {
-          if (status.modelsComplete) {
-            if (indicator) indicator.classList.remove('active');
-          } else if (status.modelsDownloading) {
-            if (indicator) indicator.classList.add('active');
-          }
-        })
-        .catch(function() {});
-    }
-  }
-
-  function switchView(view) {
-    currentView = view;
-    var bar = document.getElementById('viewToggleBar');
-    var chatArea = document.getElementById('output-scroll');
-    var execPanel = document.querySelector('.input-section');
-    var fileBrowser = document.getElementById('fileBrowserContainer');
-    var fileIframe = document.getElementById('fileBrowserIframe');
-    var terminalContainer = document.getElementById('terminalContainer');
-    if (!bar) return;
-    bar.querySelectorAll('.view-toggle-btn').forEach(function(btn) {
-      btn.classList.toggle('active', btn.dataset.view === view);
-    });
-    if (chatArea) chatArea.style.display = view === 'chat' ? '' : 'none';
-    if (execPanel) execPanel.style.display = view === 'chat' ? '' : 'none';
-    if (fileBrowser) fileBrowser.style.display = view === 'files' ? 'flex' : 'none';
-    if (terminalContainer) terminalContainer.style.display = view === 'terminal' ? 'flex' : 'none';
-    if (view === 'files' && fileIframe && currentConversation) {
-      var src = BASE + '/files/' + currentConversation + '/';
-      if (fileIframe.src !== location.origin + src) fileIframe.src = src;
-    }
-    window.dispatchEvent(new CustomEvent('view-switched', { detail: { view: view } }));
-  }
-
-  function updateViewToggleVisibility() {
-    var bar = document.getElementById('viewToggleBar');
-    if (!bar) return;
-    bar.style.display = currentConversation ? 'flex' : 'none';
-  }
-
-  function setupConversationListener() {
-    window.addEventListener('conversation-selected', function(e) {
-      currentConversation = e.detail.conversationId;
-      updateViewToggleVisibility();
-      if (currentView === 'files') switchView('files');
-    });
-    window.addEventListener('conversation-deselected', function() {
-      currentConversation = null;
-      updateViewToggleVisibility();
-      switchView('chat');
-    });
-  }
-
-  window.switchView = switchView;
-
-  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
-  else init();
-})();

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

@@ -1,76 +0,0 @@
-
-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

@@ -1,146 +0,0 @@
-
-class ImageLoader {
-  constructor(config = {}) {
-    this.config = {
-      supportedExts: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'],
-      lazyLoadThreshold: config.lazyLoadThreshold || 0.5,
-      maxImageDisplaySize: config.maxImageDisplaySize || '600px',
-      ...config
-    };
-
-    this.imageCache = new Map();
-    this.pendingImages = new Map();
-    this.intersectionObserver = null;
-    this.drawerObserver = null;
-    this.initIntersectionObserver();
-  }
-
-  isImagePath(filePath) {
-    if (!filePath || typeof filePath !== 'string') return false;
-    const ext = this.getExtension(filePath).toLowerCase();
-    return this.config.supportedExts.includes(ext);
-  }
-
-  getExtension(filePath) {
-    const match = filePath.match(/\.([^.]+)$/);
-    return match ? match[1] : '';
-  }
-
-  extractImagePaths(content) {
-    if (typeof content !== 'string') return [];
-
-    const paths = [];
-    const pathPattern = /(?:\/[a-zA-Z0-9_.\-]+)+\/[a-zA-Z0-9_.\-]+\.(?:png|jpg|jpeg|gif|webp|svg)/gi;
-
-    let match;
-    while ((match = pathPattern.exec(content)) !== null) {
-      if (this.isImagePath(match[0])) {
-        paths.push(match[0]);
-      }
-    }
-
-    return [...new Set(paths)];
-  }
-
-  registerImagesFromEvent(event) {
-    const images = [];
-
-    if (event.type === 'file_read' && event.path && this.isImagePath(event.path)) {
-      images.push({
-        path: event.path,
-        type: 'file_read',
-        eventId: event.id || event.sessionId,
-        timestamp: event.timestamp || Date.now()
-      });
-    }
-
-    if (event.content && typeof event.content === 'string') {
-      const paths = this.extractImagePaths(event.content);
-      paths.forEach(path => {
-        images.push({
-          path,
-          type: 'extracted',
-          eventId: event.id || event.sessionId,
-          timestamp: event.timestamp || Date.now()
-        });
-      });
-    }
-
-    if (event.output && typeof event.output === 'string') {
-      const paths = this.extractImagePaths(event.output);
-      paths.forEach(path => {
-        images.push({
-          path,
-          type: 'extracted',
-          eventId: event.id || event.sessionId,
-          timestamp: event.timestamp || Date.now()
-        });
-      });
-    }
-
-    images.forEach(img => {
-      const key = img.path;
-      if (!this.imageCache.has(key)) {
-        this.imageCache.set(key, img);
-        this.pendingImages.set(key, img);
-      }
-    });
-
-    return images;
-  }
-
-  initIntersectionObserver() {
-    this.intersectionObserver = new IntersectionObserver(
-      (entries) => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            const img = entry.target.querySelector('img.lazy-image');
-            if (img && img.dataset.src && !img.src) {
-              img.src = img.dataset.src;
-              this.intersectionObserver.unobserve(entry.target);
-            }
-          }
-        });
-      },
-      { threshold: this.config.lazyLoadThreshold }
-    );
-  }
-
-  setupDrawerObserver(drawerSelector = '.drawer-panel, [role="dialog"]') {
-    const drawers = document.querySelectorAll(drawerSelector);
-    drawers.forEach(drawer => {
-      const observer = new MutationObserver(() => {
-        if (drawer.offsetHeight > 0 && drawer.offsetWidth > 0) {
-          this.loadVisibleImages(drawer);
-        }
-      });
-
-      observer.observe(drawer, { attributes: true, attributeFilter: ['style', 'class'] });
-    });
-  }
-
-  loadVisibleImages(container = document) {
-    const images = container.querySelectorAll('img.lazy-image[data-src]');
-    images.forEach(img => {
-      if (!img.src && img.dataset.src) {
-        img.src = img.dataset.src;
-      }
-    });
-  }
-
-  getImages(eventId = null) {
-    if (!eventId) {
-      return Array.from(this.imageCache.values());
-    }
-    return Array.from(this.imageCache.values()).filter(img => img.eventId === eventId);
-  }
-
-  clear() {
-    this.imageCache.clear();
-    this.pendingImages.clear();
-  }
-}
-
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = ImageLoader;
-}

package/static/js/prompt-machine.js

@@ -1,108 +0,0 @@
-(function() {
-  const { createMachine, createActor, assign } = XState;
-
-  const promptMachine = createMachine({
-    id: 'prompt-area',
-    initial: 'ready',
-    context: {
-      conversationId: null,
-      queueLength: 0,
-    },
-    states: {
-      ready: {
-        on: {
-          LOADING: 'loading',
-          STREAMING: {
-            target: 'streaming',
-            actions: assign(({ event }) => ({ conversationId: event.conversationId || null })),
-          },
-          DISABLED: 'disabled',
-        },
-      },
-      loading: {
-        on: {
-          READY: 'ready',
-          STREAMING: {
-            target: 'streaming',
-            actions: assign(({ event }) => ({ conversationId: event.conversationId || null })),
-          },
-          DISABLED: 'disabled',
-        },
-      },
-      streaming: {
-        on: {
-          QUEUED: {
-            target: 'queued',
-            actions: assign(({ event }) => ({ queueLength: event.queueLength || 1 })),
-          },
-          READY: {
-            target: 'ready',
-            actions: assign({ conversationId: null, queueLength: 0 }),
-          },
-          STREAMING: {
-            actions: assign(({ event }) => ({ conversationId: event.conversationId || null })),
-          },
-          QUEUE_UPDATE: {
-            actions: assign(({ event }) => ({ queueLength: event.queueLength || 0 })),
-          },
-        },
-      },
-      queued: {
-        on: {
-          STREAMING: {
-            target: 'streaming',
-            actions: assign(({ event }) => ({ conversationId: event.conversationId || null, queueLength: 0 })),
-          },
-          READY: {
-            target: 'ready',
-            actions: assign({ conversationId: null, queueLength: 0 }),
-          },
-          QUEUE_UPDATE: {
-            actions: assign(({ event }) => ({ queueLength: event.queueLength || 0 })),
-            guard: ({ event }) => (event.queueLength || 0) > 0,
-          },
-          QUEUE_EMPTY: {
-            target: 'ready',
-            actions: assign({ conversationId: null, queueLength: 0 }),
-          },
-        },
-      },
-      disabled: {
-        on: {
-          READY: 'ready',
-        },
-      },
-    },
-  });
-
-  const actor = createActor(promptMachine);
-  actor.start();
-
-  function sendEvent(event) {
-    actor.send(event);
-    return actor.getSnapshot();
-  }
-
-  function getState() {
-    return actor.getSnapshot().value;
-  }
-
-  function isReady() {
-    return getState() === 'ready';
-  }
-
-  function isStreaming() {
-    return getState() === 'streaming';
-  }
-
-  function isDisabled() {
-    return getState() === 'disabled';
-  }
-
-  function subscribe(fn) {
-    return actor.subscribe(fn);
-  }
-
-  window.__promptMachine = actor;
-  window.promptMachineAPI = { send: sendEvent, getState, isReady, isStreaming, isDisabled, subscribe };
-})();