agentgui 1.0.97 → 1.0.99

package/package.json

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

package/server.js

@@ -475,10 +475,27 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
     let eventCount = 0;
 
     const onEvent = (parsed) => {
-      if (parsed.type === 'assistant' && parsed.message?.content) {
+      eventCount++;
+
+      if (parsed.type === 'system') {
+        broadcastSync({
+          type: 'streaming_progress',
+          sessionId,
+          conversationId,
+          block: {
+            type: 'system',
+            subtype: parsed.subtype,
+            model: parsed.model,
+            cwd: parsed.cwd,
+            tools: parsed.tools,
+            session_id: parsed.session_id
+          },
+          blockIndex: allBlocks.length,
+          timestamp: Date.now()
+        });
+      } else if (parsed.type === 'assistant' && parsed.message?.content) {
         for (const block of parsed.message.content) {
           allBlocks.push(block);
-          eventCount++;
           broadcastSync({
             type: 'streaming_progress',
             sessionId,
@@ -488,16 +505,45 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
             timestamp: Date.now()
           });
         }
-      } else if (parsed.type === 'result' && parsed.result && allBlocks.length === 0) {
+      } else if (parsed.type === 'user' && parsed.message?.content) {
+        for (const block of parsed.message.content) {
+          if (block.type === 'tool_result') {
+            broadcastSync({
+              type: 'streaming_progress',
+              sessionId,
+              conversationId,
+              block: {
+                type: 'tool_result',
+                tool_use_id: block.tool_use_id,
+                content: typeof block.content === 'string' ? block.content : JSON.stringify(block.content),
+                is_error: block.is_error || false
+              },
+              blockIndex: allBlocks.length,
+              timestamp: Date.now()
+            });
+          }
+        }
+      } else if (parsed.type === 'result') {
         broadcastSync({
           type: 'streaming_progress',
           sessionId,
           conversationId,
-          block: { type: 'text', text: parsed.result },
-          blockIndex: 0,
+          block: {
+            type: 'result',
+            subtype: parsed.subtype,
+            duration_ms: parsed.duration_ms,
+            total_cost_usd: parsed.total_cost_usd,
+            num_turns: parsed.num_turns,
+            is_error: parsed.is_error || false,
+            result: parsed.result
+          },
+          blockIndex: allBlocks.length,
           isResult: true,
           timestamp: Date.now()
         });
+        if (parsed.result && allBlocks.length === 0) {
+          allBlocks.push({ type: 'text', text: String(parsed.result) });
+        }
       }
     };
 

package/static/index.html

@@ -431,6 +431,170 @@
       margin: 0.25rem 0;
     }
 
+    /* --- Streaming block types --- */
+    .streaming-block-system {
+      padding: 0.5rem 0.75rem;
+      margin: 0.25rem 0;
+      background: rgba(59,130,246,0.08);
+      border: 1px solid rgba(59,130,246,0.2);
+      border-radius: 0.375rem;
+      font-size: 0.8rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .system-model-badge {
+      background: var(--color-primary);
+      color: white;
+      padding: 0.125rem 0.5rem;
+      border-radius: 1rem;
+      font-size: 0.7rem;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+
+    .system-info {
+      color: var(--color-text-secondary);
+      font-size: 0.75rem;
+    }
+
+    .streaming-block-tool-use {
+      margin: 0.5rem 0;
+      border-left: 3px solid #06b6d4;
+      background: rgba(6,182,212,0.06);
+      border-radius: 0 0.375rem 0.375rem 0;
+      overflow: hidden;
+    }
+
+    .tool-use-header {
+      padding: 0.5rem 0.75rem;
+      font-weight: 600;
+      font-size: 0.85rem;
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+    }
+
+    .tool-use-icon {
+      font-size: 0.9rem;
+      opacity: 0.7;
+    }
+
+    .tool-use-name {
+      color: #0891b2;
+    }
+
+    html.dark .tool-use-name { color: #22d3ee; }
+
+    .tool-input-details {
+      border-top: 1px solid rgba(6,182,212,0.15);
+    }
+
+    .tool-input-summary {
+      padding: 0.375rem 0.75rem;
+      font-size: 0.75rem;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .tool-input-summary:hover {
+      background: rgba(6,182,212,0.08);
+    }
+
+    .tool-input-pre {
+      margin: 0;
+      padding: 0.5rem 0.75rem;
+      font-size: 0.75rem;
+      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
+      background: rgba(0,0,0,0.03);
+      overflow-x: auto;
+      max-height: 200px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+
+    html.dark .tool-input-pre { background: rgba(255,255,255,0.03); }
+
+    .streaming-block-tool-result {
+      margin: 0.25rem 0 0.5rem 0;
+      border-radius: 0.375rem;
+      background: var(--color-bg-code);
+      overflow: hidden;
+    }
+
+    .tool-result-header {
+      padding: 0.375rem 0.75rem;
+      font-size: 0.7rem;
+      border-bottom: 1px solid rgba(255,255,255,0.05);
+    }
+
+    .tool-result-ok-badge {
+      color: #10b981;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .tool-result-error-badge {
+      color: #ef4444;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .tool-result-pre {
+      margin: 0;
+      padding: 0.5rem 0.75rem;
+      font-size: 0.75rem;
+      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
+      color: #d1d5db;
+      overflow-x: auto;
+      max-height: 300px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+
+    .streaming-block-tool-result.tool-result-error {
+      border: 1px solid rgba(239,68,68,0.3);
+    }
+
+    .streaming-block-result {
+      padding: 0.5rem 0.75rem;
+      margin: 0.5rem 0;
+      border-radius: 0.375rem;
+      background: rgba(16,185,129,0.08);
+      border: 1px solid rgba(16,185,129,0.2);
+      font-size: 0.8rem;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .streaming-block-result.result-error {
+      background: rgba(239,68,68,0.08);
+      border-color: rgba(239,68,68,0.2);
+    }
+
+    .result-status {
+      font-weight: 600;
+      color: #10b981;
+    }
+
+    .result-error .result-status { color: #ef4444; }
+
+    .result-stats {
+      color: var(--color-text-secondary);
+      font-size: 0.75rem;
+    }
+
+    .streaming-indicator-label {
+      white-space: nowrap;
+    }
+
     /* --- Input area: fixed at bottom --- */
     .input-section {
       flex-shrink: 0;

package/static/js/client.js

@@ -274,7 +274,7 @@ class AgentGUIClient {
         <div class="message-blocks streaming-blocks"></div>
         <div class="streaming-indicator" style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;color:var(--color-text-secondary);font-size:0.875rem;">
           <span class="animate-spin" style="display:inline-block;width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;"></span>
-          Thinking...
+          <span class="streaming-indicator-label">Thinking...</span>
         </div>
       `;
       messagesEl.appendChild(streamingDiv);
@@ -300,37 +300,75 @@ class AgentGUIClient {
     if (!blocksEl) return;
 
     const indicator = streamingEl.querySelector('.streaming-indicator');
+    let indicatorText = 'Responding...';
 
-    if (block.type === 'text' && block.text) {
+    if (block.type === 'system') {
+      const div = document.createElement('div');
+      div.className = 'streaming-block-system';
+      const toolCount = block.tools ? block.tools.length : 0;
+      div.innerHTML = `<span class="system-model-badge">${this.escapeHtml(block.model || 'unknown')}</span> <span class="system-info">${toolCount} tools available</span>`;
+      blocksEl.appendChild(div);
+      indicatorText = 'Initializing...';
+    } else if (block.type === 'text' && block.text) {
       const existingTextEl = blocksEl.querySelector('.streaming-text-current');
       if (existingTextEl && !data.isResult) {
         existingTextEl.innerHTML = this.renderBlockContent(block);
       } else {
+        const prevTextEl = blocksEl.querySelector('.streaming-text-current');
+        if (prevTextEl) prevTextEl.classList.remove('streaming-text-current');
         const div = document.createElement('div');
         div.className = 'message-text streaming-text-current';
         div.innerHTML = this.renderBlockContent(block);
         blocksEl.appendChild(div);
       }
+      indicatorText = 'Responding...';
     } else if (block.type === 'tool_use') {
       const prevTextEl = blocksEl.querySelector('.streaming-text-current');
       if (prevTextEl) prevTextEl.classList.remove('streaming-text-current');
 
       const div = document.createElement('div');
-      div.className = 'message-tool';
-      div.textContent = `[Tool: ${block.name || 'unknown'}]`;
+      div.className = 'streaming-block-tool-use';
+      div.dataset.toolUseId = block.id || '';
+      let inputHtml = '';
+      if (block.input && Object.keys(block.input).length > 0) {
+        const inputStr = JSON.stringify(block.input, null, 2);
+        inputHtml = `<details class="tool-input-details"><summary class="tool-input-summary">Input</summary><pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre></details>`;
+      }
+      div.innerHTML = `<div class="tool-use-header"><span class="tool-use-icon">&#9881;</span> <span class="tool-use-name">${this.escapeHtml(block.name || 'unknown')}</span></div>${inputHtml}`;
       blocksEl.appendChild(div);
+      indicatorText = `Using ${block.name || 'tool'}...`;
     } else if (block.type === 'tool_result') {
       const div = document.createElement('div');
-      div.className = 'message-text';
-      div.innerHTML = `<em style="color:var(--color-text-secondary)">${this.escapeHtml(String(block.result || '').substring(0, 500))}</em>`;
+      div.className = 'streaming-block-tool-result' + (block.is_error ? ' tool-result-error' : '');
+      const content = block.content || '';
+      const displayContent = content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content;
+      div.innerHTML = `<div class="tool-result-header">${block.is_error ? '<span class="tool-result-error-badge">Error</span>' : '<span class="tool-result-ok-badge">Result</span>'}</div><pre class="tool-result-pre">${this.escapeHtml(displayContent)}</pre>`;
       blocksEl.appendChild(div);
+      indicatorText = 'Processing result...';
+    } else if (block.type === 'result') {
+      const div = document.createElement('div');
+      div.className = 'streaming-block-result' + (block.is_error ? ' result-error' : '');
+      const duration = block.duration_ms ? (block.duration_ms / 1000).toFixed(1) + 's' : '';
+      const cost = block.total_cost_usd ? '$' + block.total_cost_usd.toFixed(4) : '';
+      const turns = block.num_turns ? block.num_turns + ' turns' : '';
+      const parts = [duration, cost, turns].filter(Boolean);
+      div.innerHTML = `<span class="result-status">${block.is_error ? 'Failed' : 'Complete'}</span>${parts.length ? ' <span class="result-stats">' + parts.join(' / ') + '</span>' : ''}`;
+      blocksEl.appendChild(div);
+      indicatorText = 'Complete';
     }
 
-    if (indicator) indicator.querySelector('span:last-child')?.remove();
     if (indicator) {
-      const label = document.createElement('span');
-      label.textContent = block.type === 'tool_use' ? `Using ${block.name}...` : 'Responding...';
-      indicator.appendChild(label);
+      const labelEl = indicator.querySelector('.streaming-indicator-label');
+      if (labelEl) {
+        labelEl.textContent = indicatorText;
+      } else {
+        const existingLabel = indicator.querySelector('span:last-child');
+        if (existingLabel && !existingLabel.classList.contains('animate-spin')) existingLabel.remove();
+        const label = document.createElement('span');
+        label.className = 'streaming-indicator-label';
+        label.textContent = indicatorText;
+        indicator.appendChild(label);
+      }
     }
 
     this.scrollToBottom();
@@ -339,10 +377,21 @@ class AgentGUIClient {
   renderBlockContent(block) {
     if (block.type === 'text' && block.text) {
       const text = block.text;
-      if (text.includes('<') && (text.includes('</') || text.includes('/>'))) {
-        return text;
+      if (this.isHtmlContent(text)) {
+        return `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${text}</div>`;
+      }
+      const parts = this.parseMarkdownCodeBlocks(text);
+      if (parts.length === 1 && parts[0].type === 'text') {
+        return this.escapeHtml(text);
       }
-      return this.escapeHtml(text);
+      return parts.map(part => {
+        if (part.type === 'html') {
+          return `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${part.content}</div>`;
+        } else if (part.type === 'code') {
+          return this.renderCodeBlock(part.language, part.code);
+        }
+        return this.escapeHtml(part.content);
+      }).join('');
     }
     return this.escapeHtml(JSON.stringify(block));
   }
@@ -455,10 +504,12 @@ class AgentGUIClient {
     }
   }
 
-  /**
-   * Parse markdown code blocks from text
-   * Returns array of parts with type ('text' or 'code') and content/language/code
-   */
+  isHtmlContent(text) {
+    const openTag = /<(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])\b[^>]*>/i;
+    const closeTag = /<\/(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])>/i;
+    return openTag.test(text) && closeTag.test(text);
+  }
+
   parseMarkdownCodeBlocks(text) {
     const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
     const parts = [];
@@ -466,14 +517,13 @@ class AgentGUIClient {
     let match;
 
     while ((match = codeBlockRegex.exec(text)) !== null) {
-      // Add text before the code block
       if (match.index > lastIndex) {
+        const segment = text.substring(lastIndex, match.index);
         parts.push({
-          type: 'text',
-          content: text.substring(lastIndex, match.index)
+          type: this.isHtmlContent(segment) ? 'html' : 'text',
+          content: segment
         });
       }
-      // Add the code block
       parts.push({
         type: 'code',
         language: match[1] || 'plain',
@@ -482,17 +532,16 @@ class AgentGUIClient {
       lastIndex = codeBlockRegex.lastIndex;
     }
 
-    // Add remaining text after last code block
     if (lastIndex < text.length) {
+      const segment = text.substring(lastIndex);
       parts.push({
-        type: 'text',
-        content: text.substring(lastIndex)
+        type: this.isHtmlContent(segment) ? 'html' : 'text',
+        content: segment
       });
     }
 
-    // If no code blocks found, return the text as-is
     if (parts.length === 0) {
-      return [{ type: 'text', content: text }];
+      return [{ type: this.isHtmlContent(text) ? 'html' : 'text', content: text }];
     }
 
     return parts;
@@ -523,16 +572,20 @@ class AgentGUIClient {
    */
   renderMessageContent(content) {
     if (typeof content === 'string') {
+      if (this.isHtmlContent(content)) {
+        return `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${content}</div></div>`;
+      }
       return `<div class="message-text">${this.escapeHtml(content)}</div>`;
     } else if (content && typeof content === 'object' && content.type === 'claude_execution') {
       let html = '<div class="message-blocks">';
       if (content.blocks && Array.isArray(content.blocks)) {
         content.blocks.forEach(block => {
           if (block.type === 'text') {
-            // Parse markdown code blocks from text
             const parts = this.parseMarkdownCodeBlocks(block.text);
             parts.forEach(part => {
-              if (part.type === 'text') {
+              if (part.type === 'html') {
+                html += `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${part.content}</div></div>`;
+              } else if (part.type === 'text') {
                 html += `<div class="message-text">${this.escapeHtml(part.content)}</div>`;
               } else if (part.type === 'code') {
                 html += this.renderCodeBlock(part.language, part.code);
@@ -555,7 +608,16 @@ class AgentGUIClient {
               html += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
             }
           } else if (block.type === 'tool_use') {
-            html += `<div class="message-tool">[Tool: ${this.escapeHtml(block.name)}]</div>`;
+            let inputHtml = '';
+            if (block.input && Object.keys(block.input).length > 0) {
+              const inputStr = JSON.stringify(block.input, null, 2);
+              inputHtml = `<details class="tool-input-details"><summary class="tool-input-summary">Input</summary><pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre></details>`;
+            }
+            html += `<div class="streaming-block-tool-use"><div class="tool-use-header"><span class="tool-use-icon">&#9881;</span> <span class="tool-use-name">${this.escapeHtml(block.name || 'unknown')}</span></div>${inputHtml}</div>`;
+          } else if (block.type === 'tool_result') {
+            const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
+            const displayContent = content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content;
+            html += `<div class="streaming-block-tool-result${block.is_error ? ' tool-result-error' : ''}"><div class="tool-result-header">${block.is_error ? '<span class="tool-result-error-badge">Error</span>' : '<span class="tool-result-ok-badge">Result</span>'}</div><pre class="tool-result-pre">${this.escapeHtml(displayContent)}</pre></div>`;
           }
         });
       }
@@ -809,18 +871,22 @@ class AgentGUIClient {
     return messages.map(msg => {
       let contentHtml = '';
 
-      // Handle different content types
       if (typeof msg.content === 'string') {
-        contentHtml = `<div class="message-text">${this.escapeHtml(msg.content)}</div>`;
+        if (this.isHtmlContent(msg.content)) {
+          contentHtml = `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${msg.content}</div></div>`;
+        } else {
+          contentHtml = `<div class="message-text">${this.escapeHtml(msg.content)}</div>`;
+        }
       } else if (msg.content && typeof msg.content === 'object' && msg.content.type === 'claude_execution') {
-        // Handle Claude execution blocks
         contentHtml = '<div class="message-blocks">';
         if (msg.content.blocks && Array.isArray(msg.content.blocks)) {
           msg.content.blocks.forEach(block => {
             if (block.type === 'text') {
               const parts = this.parseMarkdownCodeBlocks(block.text);
               parts.forEach(part => {
-                if (part.type === 'text') {
+                if (part.type === 'html') {
+                  contentHtml += `<div class="message-text"><div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${part.content}</div></div>`;
+                } else if (part.type === 'text') {
                   contentHtml += `<div class="message-text">${this.escapeHtml(part.content)}</div>`;
                 } else if (part.type === 'code') {
                   contentHtml += this.renderCodeBlock(part.language, part.code);
@@ -843,7 +909,16 @@ class AgentGUIClient {
                 contentHtml += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
               }
             } else if (block.type === 'tool_use') {
-              contentHtml += `<div class="message-tool">[Tool: ${this.escapeHtml(block.name)}]</div>`;
+              let inputHtml = '';
+              if (block.input && Object.keys(block.input).length > 0) {
+                const inputStr = JSON.stringify(block.input, null, 2);
+                inputHtml = `<details class="tool-input-details"><summary class="tool-input-summary">Input</summary><pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre></details>`;
+              }
+              contentHtml += `<div class="streaming-block-tool-use"><div class="tool-use-header"><span class="tool-use-icon">&#9881;</span> <span class="tool-use-name">${this.escapeHtml(block.name || 'unknown')}</span></div>${inputHtml}</div>`;
+            } else if (block.type === 'tool_result') {
+              const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
+              const displayContent = content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content;
+              contentHtml += `<div class="streaming-block-tool-result${block.is_error ? ' tool-result-error' : ''}"><div class="tool-result-header">${block.is_error ? '<span class="tool-result-error-badge">Error</span>' : '<span class="tool-result-ok-badge">Result</span>'}</div><pre class="tool-result-pre">${this.escapeHtml(displayContent)}</pre></div>`;
             }
           });
         }

package/static/js/streaming-renderer.js

@@ -569,9 +569,12 @@ class StreamingRenderer {
     return div;
   }
 
-  /**
-   * Parse markdown code blocks from text
-   */
+  isHtmlContent(text) {
+    const openTag = /<(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])\b[^>]*>/i;
+    const closeTag = /<\/(?:div|table|section|article|form|ul|ol|dl|nav|header|footer|main|aside|figure|details|summary|h[1-6])>/i;
+    return openTag.test(text) && closeTag.test(text);
+  }
+
   parseMarkdownCodeBlocks(text) {
     const codeBlockRegex = /```(\w*)\n([\s\S]*?)```/g;
     const parts = [];
@@ -580,18 +583,20 @@ class StreamingRenderer {
 
     while ((match = codeBlockRegex.exec(text)) !== null) {
       if (match.index > lastIndex) {
-        parts.push({ type: 'text', content: text.substring(lastIndex, match.index) });
+        const segment = text.substring(lastIndex, match.index);
+        parts.push({ type: this.isHtmlContent(segment) ? 'html' : 'text', content: segment });
       }
       parts.push({ type: 'code', language: match[1] || 'plain', code: match[2] });
       lastIndex = codeBlockRegex.lastIndex;
     }
 
     if (lastIndex < text.length) {
-      parts.push({ type: 'text', content: text.substring(lastIndex) });
+      const segment = text.substring(lastIndex);
+      parts.push({ type: this.isHtmlContent(segment) ? 'html' : 'text', content: segment });
     }
 
     if (parts.length === 0) {
-      return [{ type: 'text', content: text }];
+      return [{ type: this.isHtmlContent(text) ? 'html' : 'text', content: text }];
     }
 
     return parts;
@@ -610,7 +615,9 @@ class StreamingRenderer {
     const parts = this.parseMarkdownCodeBlocks(text);
     let html = '';
     parts.forEach(part => {
-      if (part.type === 'text') {
+      if (part.type === 'html') {
+        html += `<div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">${part.content}</div>`;
+      } else if (part.type === 'text') {
         html += `<p class="text-sm leading-relaxed">${this.escapeHtml(part.content)}</p>`;
       } else if (part.type === 'code') {
         if (part.language.toLowerCase() === 'html') {