agentgui 1.0.536 → 1.0.538

package/package.json

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

package/static/index.html

@@ -3247,6 +3247,7 @@
   </script>
   <script defer src="/gm/js/event-processor.js"></script>
   <script defer src="/gm/js/streaming-renderer.js"></script>
+  <script defer src="/gm/js/image-loader.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>

package/static/js/client.js

@@ -102,6 +102,12 @@ class AgentGUIClient {
       // Initialize renderer
       this.renderer.init(this.config.outputContainerId, this.config.scrollContainerId);
 
+      // Initialize image loader
+      if (typeof ImageLoader !== 'undefined') {
+        window.imageLoader = new ImageLoader();
+        console.log('Image loader initialized');
+      }
+
       // Setup event listeners
       this.setupWebSocketListeners();
       this.setupRendererListeners();
@@ -1649,10 +1655,6 @@ class AgentGUIClient {
       }
 
       let finalPrompt = prompt;
-      if (subAgent && agentId === 'claude-code') {
-        const displaySubAgent = subAgent.split('-·-')[0];
-        finalPrompt = `use ${displaySubAgent} subagent to ${prompt}`;
-      }
       const streamBody = { id: conversationId, content: finalPrompt, agentId };
       if (model) streamBody.model = model;
       if (subAgent) streamBody.subAgent = subAgent;

package/static/js/event-processor.js

@@ -119,6 +119,20 @@ class EventProcessor {
         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++;
 
@@ -444,6 +458,32 @@ class EventProcessor {
       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

package/static/js/image-loader.js

@@ -0,0 +1,255 @@
+/**
+ * Image Loader Module
+ * Detects image file reads from agent events and manages lazy loading
+ * Supports PNG, JPG, JPEG, GIF, WebP, SVG formats
+ */
+
+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();
+  }
+
+  /**
+   * Check if a path is an image file
+   */
+  isImagePath(filePath) {
+    if (!filePath || typeof filePath !== 'string') return false;
+    const ext = this.getExtension(filePath).toLowerCase();
+    return this.config.supportedExts.includes(ext);
+  }
+
+  /**
+   * Extract file extension from path
+   */
+  getExtension(filePath) {
+    const match = filePath.match(/\.([^.]+)$/);
+    return match ? match[1] : '';
+  }
+
+  /**
+   * Extract image 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)];
+  }
+
+  /**
+   * Register images from event
+   */
+  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;
+  }
+
+  /**
+   * Create image element with lazy loading
+   */
+  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;
+  }
+
+  /**
+   * Initialize Intersection Observer for lazy loading
+   */
+  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 }
+    );
+  }
+
+  /**
+   * Setup drawer observer to load images when drawer opens
+   */
+  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'] });
+    });
+  }
+
+  /**
+   * Load all visible images in a container
+   */
+  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;
+      }
+    });
+  }
+
+  /**
+   * Get cached images for a session/conversation
+   */
+  getImages(eventId = null) {
+    if (!eventId) {
+      return Array.from(this.imageCache.values());
+    }
+    return Array.from(this.imageCache.values()).filter(img => img.eventId === eventId);
+  }
+
+  /**
+   * Clear cache
+   */
+  clear() {
+    this.imageCache.clear();
+    this.pendingImages.clear();
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = ImageLoader;
+}

package/static/js/streaming-renderer.js

@@ -1626,6 +1626,26 @@ class StreamingRenderer {
     return div;
   }
 
+  /**
+   * Detect if content is a base64-encoded image
+   */
+  detectBase64Image(content) {
+    if (!content || typeof content !== 'string') return null;
+    const trimmed = content.trim();
+    const signatures = {
+      'png': /^iVBORw0KGgo/,
+      'jpeg': /^\/9j\/4AAQ/,
+      'webp': /^UklGRi/,
+      'gif': /^R0lGODlh/
+    };
+    for (const [type, pattern] of Object.entries(signatures)) {
+      if (pattern.test(trimmed)) {
+        return { type, isBase64: true, data: trimmed };
+      }
+    }
+    return null;
+  }
+
   /**
    * Render file read event
    */
@@ -1651,7 +1671,13 @@ class StreamingRenderer {
       let html = '';
       if (event.path) html += this.renderFilePath(event.path);
       if (event.content) {
-        html += `<pre style="background:#1e293b;padding:0.75rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:#e2e8f0;margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(event.content, 2000))}</code></pre>`;
+        const imageInfo = this.detectBase64Image(event.content);
+        if (imageInfo) {
+          const mimeType = imageInfo.type === 'jpeg' ? 'image/jpeg' : `image/${imageInfo.type}`;
+          html += `<div style="padding:0.5rem;display:flex;flex-direction:column;gap:0.5rem"><img src="data:${mimeType};base64,${this.escapeHtml(imageInfo.data)}" style="max-width:100%;max-height:600px;border-radius:0.375rem;border:1px solid #334155" loading="lazy"><div style="font-size:0.7rem;color:#64748b;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;word-break:break-all">${this.escapeHtml(event.path)}</div></div>`;
+        } else {
+          html += `<pre style="background:#1e293b;padding:0.75rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:#e2e8f0;margin:0.5rem 0 0 0"><code class="lazy-hl">${this.escapeHtml(this.truncateContent(event.content, 2000))}</code></pre>`;
+        }
       }
       body.innerHTML = html;
       details.appendChild(body);
@@ -1950,6 +1976,85 @@ class StreamingRenderer {
     return div;
   }
 
+  /**
+   * Render file read event with image detection
+   */
+  renderFileRead(event) {
+    const div = document.createElement('div');
+    div.className = 'event-file-read mb-3 p-3 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900';
+    div.dataset.eventId = event.id || '';
+    div.dataset.eventType = 'file_read';
+
+    const filePath = event.path || '';
+    const fileName = pathBasename(filePath);
+    const isImage = this.isImagePath(filePath);
+
+    let html = `
+      <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:${isImage ? '0.75rem' : '0'}">
+        <svg viewBox="0 0 20 20" fill="currentColor" style="width:1rem;height:1rem;color:var(--color-info)">
+          <path d="M8 16a2 2 0 100-4 2 2 0 000 4zM9 2a1 1 0 011 1v2h2V3a1 1 0 112 0v2h2V3a1 1 0 112 0v2h2a2 2 0 012 2v2h2a1 1 0 110 2h-2v2h2a1 1 0 110 2h-2v2a2 2 0 01-2 2h-2v2a1 1 0 11-2 0v-2h-2v2a1 1 0 11-2 0v-2H9a2 2 0 01-2-2v-2H5a1 1 0 110-2h2V9H5a1 1 0 010-2h2V5H5a1 1 0 010-2h2V3a1 1 0 011-1z"/>
+        </svg>
+        <code style="font-size:0.75rem;color:var(--color-text-primary);font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${this.escapeHtml(filePath)}</code>
+      </div>
+    `;
+
+    if (isImage) {
+      html += `<div style="margin-top:0.75rem" class="lazy-image-container" data-image-path="${this.escapeHtml(filePath)}"></div>`;
+    }
+
+    div.innerHTML = html;
+
+    if (isImage) {
+      const container = div.querySelector('.lazy-image-container');
+      if (container && window.imageLoader) {
+        const imgElement = window.imageLoader.createImageElement(filePath);
+        container.appendChild(imgElement);
+      }
+    }
+
+    return div;
+  }
+
+  /**
+   * Render file write event
+   */
+  renderFileWrite(event) {
+    const div = document.createElement('div');
+    div.className = 'event-file-write mb-3 p-3 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900';
+    div.dataset.eventId = event.id || '';
+    div.dataset.eventType = 'file_write';
+
+    const filePath = event.path || '';
+    const icon = '<svg viewBox="0 0 20 20" fill="currentColor" style="width:1rem;height:1rem;color:var(--color-success)"><path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM16.243 15.657a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM10 15a1 1 0 01-1-1v-1a1 1 0 112 0v1a1 1 0 01-1 1zM5.757 16.243a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414l-.707.707zM5 10a1 1 0 01-1-1V8a1 1 0 012 0v1a1 1 0 01-1 1zM5.757 5.757a1 1 0 000-1.414l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM10 5a1 1 0 011-1h1a1 1 0 110 2h-1a1 1 0 01-1-1z"/></svg>';
+
+    div.innerHTML = `
+      <div style="display:flex;align-items:center;gap:0.5rem">
+        ${icon}
+        <code style="font-size:0.75rem;color:var(--color-text-primary);font-family:'Monaco','Menlo','Ubuntu Mono',monospace">${this.escapeHtml(filePath)}</code>
+      </div>
+    `;
+
+    return div;
+  }
+
+  /**
+   * 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 file extension
+   */
+  getFileExtension(filePath) {
+    const match = filePath.match(/\.([^.]+)$/);
+    return match ? match[1].toLowerCase() : '';
+  }
+
   /**
    * Render generic event with formatted key-value pairs
    */

package/static/templates/image-display.html

@@ -0,0 +1,76 @@
+<!-- Image Display Container with Lazy Loading -->
+<div class="image-container" data-image-path="{{ imagePath }}" role="img" aria-label="{{ imagePath }}">
+  <!-- Placeholder shown while loading -->
+  <div class="image-placeholder" data-path="{{ imagePath }}" style="
+    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;
+  ">
+    Loading image...
+  </div>
+
+  <!-- Actual image element with lazy loading -->
+  <img
+    class="lazy-image"
+    data-src="{{ imagePath }}"
+    alt="{{ imagePath }}"
+    loading="lazy"
+    style="
+      max-width: 100%;
+      max-height: 600px;
+      border-radius: 0.375rem;
+      display: none;
+    "
+  />
+
+  <!-- Image path caption -->
+  <div class="image-caption" style="
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+    word-break: break-all;
+    font-family: 'Monaco', 'Menlo', monospace;
+  ">
+    {{ imagePath }}
+  </div>
+</div>
+
+<style>
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.image-container {
+  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);
+  margin: 0.5rem 0;
+}
+
+.image-placeholder {
+  animation: loading 1.5s infinite;
+}
+
+.lazy-image {
+  transition: opacity 0.3s ease-in-out;
+}
+
+.image-caption {
+  white-space: pre-wrap;
+}
+</style>