agentgui 1.0.125 → 1.0.127

package/package.json

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

package/static/js/streaming-renderer.js

@@ -581,41 +581,32 @@ class StreamingRenderer {
       case 'dev__execute':
       case 'dev_execute':
       case 'execute': {
-        // Handle mcp__plugin_gm_dev__execute and similar dev execution tools
         let html = '<div class="tool-params">';
 
-        // Show working directory if present
         if (input.workingDirectory) {
-          html += `<div style="margin-bottom:0.5rem;font-size:0.75rem;color:var(--color-text-secondary)">
-            <span style="opacity:0.7">📁</span> ${this.escapeHtml(input.workingDirectory)}
-          </div>`;
+          html += `<div style="margin-bottom:0.5rem;font-size:0.75rem;color:var(--color-text-secondary)"><span style="opacity:0.7">📁</span> ${this.escapeHtml(input.workingDirectory)}</div>`;
         }
 
-        // Show timeout if present
         if (input.timeout) {
-          const seconds = Math.round(input.timeout / 1000);
-          html += `<div style="margin-bottom:0.5rem;font-size:0.75rem;color:var(--color-text-secondary)">
-            <span style="opacity:0.7">⏱️</span> Timeout: ${seconds}s
-          </div>`;
+          html += `<div style="margin-bottom:0.5rem;font-size:0.75rem;color:var(--color-text-secondary)"><span style="opacity:0.7">⏱️</span> Timeout: ${Math.round(input.timeout / 1000)}s</div>`;
         }
 
-        // Render code in a styled code block
+        // Render code with syntax highlighting
         if (input.code) {
-          const lines = input.code.split('\n');
-          const lineCount = lines.length;
+          const codeLines = input.code.split('\n');
+          const lineCount = codeLines.length;
           const truncated = lineCount > 50;
-          const displayLines = truncated ? lines.slice(0, 50) : lines;
+          const displayCode = truncated ? codeLines.slice(0, 50).join('\n') : input.code;
+          const lang = input.runtime || 'javascript';
+          html += `<div style="margin-top:0.5rem"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem"><span style="font-size:0.7rem;font-weight:600;color:#0891b2;text-transform:uppercase">${this.escapeHtml(lang)}</span><span style="font-size:0.7rem;color:var(--color-text-secondary)">${lineCount} lines</span></div>${StreamingRenderer.renderCodeWithHighlight(displayCode, this.escapeHtml.bind(this))}${truncated ? `<div style="font-size:0.7rem;color:var(--color-text-secondary);text-align:center;padding:0.25rem">... ${lineCount - 50} more lines</div>` : ''}</div>`;
+        }
 
-          html += `<div style="margin-top:0.5rem">
-            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.25rem">
-              <span style="font-size:0.7rem;font-weight:600;color:#0891b2;text-transform:uppercase">JavaScript Code</span>
-              <span style="font-size:0.7rem;color:var(--color-text-secondary)">${lineCount} lines</span>
-            </div>
-            <div style="background:var(--color-bg-code);border-radius:0.375rem;padding:0.75rem;overflow-x:auto">
-              <pre style="margin:0;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;line-height:1.5;color:#d1d5db">${this.escapeHtml(displayLines.join('\n'))}</pre>
-              ${truncated ? `<div style="margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--color-border);font-size:0.7rem;color:var(--color-text-secondary);text-align:center">... ${lineCount - 50} more lines truncated ...</div>` : ''}
-            </div>
-          </div>`;
+        // Render commands (bash commands)
+        if (input.commands) {
+          const cmds = Array.isArray(input.commands) ? input.commands : [input.commands];
+          cmds.forEach(cmd => {
+            html += `<div style="margin-top:0.375rem"><div class="tool-param-command"><span class="prompt-char">$</span><span class="command-text">${this.escapeHtml(typeof cmd === 'string' ? cmd : JSON.stringify(cmd))}</span></div></div>`;
+          });
         }
 
         html += '</div>';
@@ -635,14 +626,17 @@ class StreamingRenderer {
     const truncated = content.length > maxLen;
     const displayContent = truncated ? content.substring(0, maxLen) : content;
     const lineCount = content.split('\n').length;
-    return `<div class="tool-param-content-preview" style="margin-top:0.5rem"><div class="preview-header"><span>${this.escapeHtml(label)}</span><span style="font-weight:400">${lineCount} lines${truncated ? ' (truncated)' : ''}</span></div><div class="preview-body">${this.escapeHtml(displayContent)}</div>${truncated ? '<div class="preview-truncated">... ' + (content.length - maxLen) + ' more characters</div>' : ''}</div>`;
+    const codeBody = StreamingRenderer.detectCodeContent(displayContent)
+      ? StreamingRenderer.renderCodeWithHighlight(displayContent, this.escapeHtml.bind(this))
+      : `<div class="preview-body">${this.escapeHtml(displayContent)}</div>`;
+    return `<div class="tool-param-content-preview" style="margin-top:0.5rem"><div class="preview-header"><span>${this.escapeHtml(label)}</span><span style="font-weight:400">${lineCount} lines${truncated ? ' (truncated)' : ''}</span></div>${codeBody}${truncated ? '<div class="preview-truncated">... ' + (content.length - maxLen) + ' more characters</div>' : ''}</div>`;
   }
 
   /**
    * Render params as formatted JSON (default fallback for unknown tools)
    */
   renderJsonParams(input) {
-    return `<div class="tool-params"><div class="tool-param-json"><pre>${this.escapeHtml(JSON.stringify(input, null, 2))}</pre></div></div>`;
+    return `<div class="tool-params">${this.renderParametersBeautiful(input)}</div>`;
   }
 
   /**
@@ -712,6 +706,11 @@ class StreamingRenderer {
     if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
 
     if (typeof data === 'string') {
+      if (data.length > 200 && StreamingRenderer.detectCodeContent(data)) {
+        const displayData = data.length > 1000 ? data.substring(0, 1000) : data;
+        const suffix = data.length > 1000 ? `<div style="font-size:0.7rem;color:var(--color-text-secondary);text-align:center;padding:0.25rem">... ${data.length - 1000} more characters</div>` : '';
+        return `<div style="max-height:200px;overflow-y:auto">${StreamingRenderer.renderCodeWithHighlight(displayData, this.escapeHtml.bind(this))}${suffix}</div>`;
+      }
       if (data.length > 500) {
         const lines = data.split('\n').length;
         return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:#d1d5db;padding:0.5rem;border-radius:0.375rem;line-height:1.5">${this.escapeHtml(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars, ' + lines + ' lines)' : ''}</div>`;
@@ -749,14 +748,23 @@ class StreamingRenderer {
       return `<div style="padding:0.5rem"><img src="${esc(trimmed)}" style="max-width:100%;max-height:24rem;border-radius:0.375rem" loading="lazy"></div>`;
     }
 
-    // Instead of rendering JSON as parameters, check if it looks like code output
+    // Parse JSON and render as structured content
     if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
       try {
-        // Validate it's JSON, then render as highlighted code
-        JSON.parse(trimmed);
-        // Format JSON with proper indentation
-        const formatted = JSON.stringify(JSON.parse(trimmed), null, 2);
-        return StreamingRenderer.renderCodeWithHighlight(formatted, esc);
+        const parsed = JSON.parse(trimmed);
+
+        // Handle Claude content block arrays: [{type:"text", text:"..."}]
+        if (Array.isArray(parsed) && parsed.length > 0 && parsed[0] && parsed[0].type === 'text') {
+          const textParts = parsed.filter(b => b.type === 'text' && b.text);
+          if (textParts.length > 0) {
+            const combined = textParts.map(b => b.text).join('\n');
+            // Re-enter renderSmartContentHTML with the extracted text
+            return StreamingRenderer.renderSmartContentHTML(combined, esc);
+          }
+        }
+
+        // For other JSON, render as itemized key-value structure
+        return `<div style="padding:0.5rem 0.75rem">${StreamingRenderer.renderParamsHTML(parsed, 0, esc)}</div>`;
       } catch (e) {
         // Not valid JSON, might be code with braces
       }
@@ -1069,6 +1077,11 @@ class StreamingRenderer {
     if (typeof data === 'number') return `<span style="color:#7c3aed;font-weight:600">${data}</span>`;
 
     if (typeof data === 'string') {
+      if (data.length > 200 && StreamingRenderer.detectCodeContent(data)) {
+        const displayData = data.length > 1000 ? data.substring(0, 1000) : data;
+        const suffix = data.length > 1000 ? `<div style="font-size:0.7rem;color:var(--color-text-secondary);text-align:center;padding:0.25rem">... ${data.length - 1000} more characters</div>` : '';
+        return `<div style="max-height:200px;overflow-y:auto">${StreamingRenderer.renderCodeWithHighlight(displayData, esc)}${suffix}</div>`;
+      }
       if (data.length > 500) {
         return `<div style="font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto;background:var(--color-bg-code);color:#d1d5db;padding:0.5rem;border-radius:0.375rem;line-height:1.5">${esc(data.substring(0, 1000))}${data.length > 1000 ? '\n... (' + (data.length - 1000) + ' more chars)' : ''}</div>`;
       }