agentgui 1.0.96 → 1.0.98

package/.prd

@@ -1,7 +1 @@
-CHAT UI LAYOUT REDESIGN - Standard Chat Interface Pattern
 
-GOAL: Make AgentGUI look and behave like Claude.ai/ChatGPT/Gemini/Grok standard chat layout
-
-ITEMS:
-
-7. [PENDING] Commit and push changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.96",
+  "version": "1.0.98",
   "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();
@@ -555,7 +593,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>`;
           }
         });
       }
@@ -843,7 +890,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>`;
             }
           });
         }