agentgui 1.0.539 → 1.0.541

package/package.json

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

package/static/js/streaming-renderer.js

@@ -1671,12 +1671,26 @@ class StreamingRenderer {
       let html = '';
       if (event.path) html += this.renderFilePath(event.path);
       if (event.content) {
-        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>`;
+        let base64Data = null;
+        let mimeType = event.media_type || 'application/octet-stream';
+        if (typeof event.content === 'string') {
+          const imageInfo = this.detectBase64Image(event.content);
+          if (imageInfo) {
+            base64Data = imageInfo.data;
+            mimeType = imageInfo.type === 'jpeg' ? 'image/jpeg' : `image/${imageInfo.type}`;
+          }
+        } else if (typeof event.content === 'object' && event.content !== null) {
+          if (event.content.source?.type === 'base64' && event.content.source?.data) {
+            base64Data = event.content.source.data;
+          } else if (event.content.type === 'base64' && event.content.data) {
+            base64Data = event.content.data;
+          }
+        }
+        if (base64Data) {
+          html += `<div style="padding:0.5rem;display:flex;flex-direction:column;gap:0.5rem"><img src="data:${mimeType};base64,${this.escapeHtml(base64Data)}" 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>`;
+          const contentStr = typeof event.content === 'string' ? event.content : JSON.stringify(event.content, null, 2);
+          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(contentStr, 2000))}</code></pre>`;
         }
       }
       body.innerHTML = html;
@@ -1976,84 +1990,7 @@ 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