agentgui 1.0.535 → 1.0.537

package/database.js

@@ -1038,6 +1038,44 @@ export const queries = {
     }
   },
 
+  deleteAllConversations() {
+    try {
+      const conversations = prep('SELECT id, claudeSessionId FROM conversations').all();
+
+      for (const conv of conversations) {
+        if (conv.claudeSessionId) {
+          this.deleteClaudeSessionFile(conv.claudeSessionId);
+        }
+      }
+
+      const deleteAllStmt = db.transaction(() => {
+        const allSessionIds = prep('SELECT id FROM sessions').all().map(r => r.id);
+
+        prep('DELETE FROM stream_updates');
+        prep('DELETE FROM chunks');
+        prep('DELETE FROM events');
+
+        if (allSessionIds.length > 0) {
+          const placeholders = allSessionIds.map(() => '?').join(',');
+          db.prepare(`DELETE FROM stream_updates WHERE sessionId IN (${placeholders})`).run(...allSessionIds);
+          db.prepare(`DELETE FROM chunks WHERE sessionId IN (${placeholders})`).run(...allSessionIds);
+          db.prepare(`DELETE FROM events WHERE sessionId IN (${placeholders})`).run(...allSessionIds);
+        }
+
+        prep('DELETE FROM sessions');
+        prep('DELETE FROM messages');
+        prep('DELETE FROM conversations');
+      });
+
+      deleteAllStmt();
+      console.log('[deleteAllConversations] Deleted all conversations and associated Claude Code files');
+      return true;
+    } catch (err) {
+      console.error('[deleteAllConversations] Error deleting all conversations:', err.message);
+      return false;
+    }
+  },
+
   cleanup() {
     const thirtyDaysAgo = Date.now() - (30 * 24 * 60 * 60 * 1000);
     const now = Date.now();

package/lib/ws-handlers-conv.js

@@ -43,6 +43,12 @@ export function register(router, deps) {
     return { deleted: true };
   });
 
+  router.handle('conv.del.all', (p) => {
+    if (!queries.deleteAllConversations()) fail(500, 'Failed to delete all conversations');
+    broadcastSync({ type: 'all_conversations_deleted', timestamp: Date.now() });
+    return { deleted: true, message: 'All conversations deleted' };
+  });
+
   router.handle('conv.full', (p) => {
     const conv = queries.getConversation(p.id);
     if (!conv) notFound();

package/package.json

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

package/static/index.html

@@ -3043,6 +3043,7 @@
       <div class="sidebar-header">
         <h2>History</h2>
         <div class="sidebar-header-actions">
+          <button id="deleteAllConversationsBtn" class="sidebar-clone-btn" data-delete-all-conversations title="Delete all conversations and Claude Code artifacts">Clear All</button>
           <button id="cloneRepoBtn" class="sidebar-clone-btn" data-clone-repo title="Clone a GitHub repo">Clone</button>
           <button id="newConversationBtn" class="sidebar-new-btn" data-new-conversation title="Start new conversation">+ New</button>
         </div>
@@ -3246,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/conversations.js

@@ -47,6 +47,7 @@ class ConversationManager {
     this.setupWebSocketListener();
     this.setupFolderBrowser();
     this.setupCloneUI();
+    this.setupDeleteAllButton();
 
     this._pollInterval = setInterval(() => this.loadConversations(), 30000);
 
@@ -245,6 +246,40 @@ class ConversationManager {
     }));
   }
 
+  setupDeleteAllButton() {
+    this.deleteAllBtn = document.getElementById('deleteAllConversationsBtn');
+    if (!this.deleteAllBtn) return;
+    this.deleteAllBtn.addEventListener('click', () => this.confirmDeleteAll());
+  }
+
+  async confirmDeleteAll() {
+    if (this.conversations.length === 0) {
+      window.UIDialog.alert('No conversations to delete', 'Information');
+      return;
+    }
+
+    const confirmed = await window.UIDialog.confirm(
+      `Delete all ${this.conversations.length} conversation(s) and associated Claude Code artifacts?\n\nThis action cannot be undone.`,
+      'Delete All Conversations'
+    );
+    if (!confirmed) return;
+
+    try {
+      this.deleteAllBtn.disabled = true;
+      await window.wsClient.rpc('conv.del.all', {});
+      console.log('[ConversationManager] Deleted all conversations');
+      this.conversations = [];
+      this.activeId = null;
+      window.dispatchEvent(new CustomEvent('conversation-deselected'));
+      this.render();
+    } catch (err) {
+      console.error('[ConversationManager] Delete all error:', err);
+      window.UIDialog.alert('Failed to delete all conversations: ' + (err.message || 'Unknown error'), 'Error');
+    } finally {
+      this.deleteAllBtn.disabled = false;
+    }
+  }
+
   setupCloneUI() {
     this.cloneBtn = document.getElementById('cloneRepoBtn');
     this.cloneBar = document.getElementById('cloneInputBar');

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

@@ -1950,6 +1950,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>