agentgui 1.0.145 → 1.0.146

package/package.json

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

package/static/index.html

@@ -524,12 +524,17 @@
     }
 
     .streaming-block-tool-use {
-      margin: 0.5rem 0;
+      margin: 0.25rem 0;
       border-left: 3px solid #06b6d4;
       background: rgba(6,182,212,0.06);
       border-radius: 0 0.375rem 0.375rem 0;
       overflow: hidden;
     }
+    .streaming-block-tool-use.folded-tool {
+      border-left: none;
+      border-radius: 0.375rem;
+      margin: 0.125rem 0;
+    }
 
     .tool-use-header {
       padding: 0.5rem 0.75rem;
@@ -582,7 +587,7 @@
     html.dark .tool-input-pre { background: rgba(255,255,255,0.03); }
 
     .streaming-block-tool-result {
-      margin: 0.25rem 0 0.5rem 0;
+      margin: 0.125rem 0 0.25rem 0;
       border-radius: 0.375rem;
       background: var(--color-bg-code);
       overflow: hidden;
@@ -1218,7 +1223,7 @@
 
     /* --- Tool Use Block --- */
     .block-tool-use {
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.25rem;
       border-radius: 0.5rem;
       background: #ecfeff;
       overflow: hidden;
@@ -1227,10 +1232,10 @@
     html.dark .block-tool-use { background: #0c1a24; }
 
     .block-tool-use .tool-header {
-      padding: 0.625rem 1rem;
+      padding: 0.375rem 0.75rem;
       display: flex;
       align-items: center;
-      gap: 0.5rem;
+      gap: 0.375rem;
       background: #cffafe;
     }
 
@@ -1263,7 +1268,7 @@
     html.dark .block-tool-use .tool-header .tool-name code { background: #164e63; }
 
     .block-tool-use .tool-params {
-      padding: 0.75rem 1rem;
+      padding: 0.5rem 0.75rem;
     }
 
     .block-tool-use .tool-params .param-label {
@@ -1458,9 +1463,94 @@
       text-align: center;
     }
 
+    /* --- Folded Tool Use (compact success-style bar) --- */
+    .folded-tool {
+      margin: 0.25rem 0;
+      border-radius: 0.375rem;
+      overflow: hidden;
+      background: #f0fdf4;
+      border: 1px solid #bbf7d0;
+    }
+    html.dark .folded-tool {
+      background: #0a1f0f;
+      border-color: #166534;
+    }
+    .folded-tool-bar {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+      padding: 0.3rem 0.625rem;
+      cursor: pointer;
+      user-select: none;
+      list-style: none;
+      font-size: 0.75rem;
+      line-height: 1.3;
+      background: #dcfce7;
+      transition: background 0.15s;
+    }
+    html.dark .folded-tool-bar {
+      background: #0f2b1a;
+    }
+    .folded-tool-bar::-webkit-details-marker { display: none; }
+    .folded-tool-bar::marker { display: none; content: ''; }
+    .folded-tool-bar::before {
+      content: '\25b6';
+      font-size: 0.5rem;
+      margin-right: 0.125rem;
+      display: inline-block;
+      transition: transform 0.15s;
+      color: #16a34a;
+      flex-shrink: 0;
+    }
+    html.dark .folded-tool-bar::before { color: #4ade80; }
+    .folded-tool[open] > .folded-tool-bar::before { transform: rotate(90deg); }
+    .folded-tool-bar:hover { background: #bbf7d0; }
+    html.dark .folded-tool-bar:hover { background: #14532d; }
+    .folded-tool-icon {
+      display: flex;
+      align-items: center;
+      color: #16a34a;
+      width: 0.875rem;
+      height: 0.875rem;
+      flex-shrink: 0;
+    }
+    html.dark .folded-tool-icon { color: #4ade80; }
+    .folded-tool-icon svg { width: 0.875rem; height: 0.875rem; }
+    .folded-tool-name {
+      font-weight: 600;
+      color: #166534;
+      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
+      font-size: 0.7rem;
+      flex-shrink: 0;
+    }
+    html.dark .folded-tool-name { color: #86efac; }
+    .folded-tool-desc {
+      color: #15803d;
+      font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
+      font-size: 0.7rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+      min-width: 0;
+      opacity: 0.8;
+    }
+    html.dark .folded-tool-desc { color: #4ade80; }
+    .folded-tool-body {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.75rem;
+      border-top: 1px solid #bbf7d0;
+    }
+    html.dark .folded-tool-body { border-top-color: #166534; }
+    .folded-tool-body .tool-input-pre {
+      margin: 0;
+      padding: 0.375rem 0.5rem;
+      font-size: 0.7rem;
+    }
+
     /* --- Tool Result Block --- */
     .block-tool-result {
-      margin-bottom: 0.75rem;
+      margin-bottom: 0.25rem;
       border-radius: 0.5rem;
       overflow: hidden;
     }
@@ -1471,7 +1561,7 @@
     html.dark .block-tool-result.result-error { background: #1c0f0f; }
 
     .block-tool-result .result-header {
-      padding: 0.5rem 1rem;
+      padding: 0.3rem 0.75rem;
       display: flex;
       align-items: center;
       justify-content: space-between;

package/static/js/client.js

@@ -790,12 +790,14 @@ class AgentGUIClient {
             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>`;
+              inputHtml = `<div class="folded-tool-body"><pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre></div>`;
             }
             const tn = block.name || 'unknown';
             const foldable = tn.startsWith('mcp__') || tn === 'Edit';
             if (foldable) {
-              html += `<details class="streaming-block-tool-use"><summary class="tool-use-header" style="cursor:pointer;user-select:none;list-style:none;"><span class="tool-use-icon">&#9881;</span> <span class="tool-use-name">${this.escapeHtml(tn)}</span></summary>${inputHtml}</details>`;
+              const dName = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.getToolDisplayName(tn) : tn;
+              const tTitle = typeof StreamingRenderer !== 'undefined' && block.input ? StreamingRenderer.getToolTitle(tn, block.input) : '';
+              html += `<details class="streaming-block-tool-use folded-tool"><summary class="folded-tool-bar"><span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}</summary>${inputHtml}</details>`;
             } else {
               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(tn)}</span></div>${inputHtml}</div>`;
             }
@@ -1437,12 +1439,14 @@ class AgentGUIClient {
               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>`;
+                inputHtml = `<div class="folded-tool-body"><pre class="tool-input-pre">${this.escapeHtml(inputStr)}</pre></div>`;
               }
               const tn2 = block.name || 'unknown';
               const foldable2 = tn2.startsWith('mcp__') || tn2 === 'Edit';
               if (foldable2) {
-                contentHtml += `<details class="streaming-block-tool-use"><summary class="tool-use-header" style="cursor:pointer;user-select:none;list-style:none;"><span class="tool-use-icon">&#9881;</span> <span class="tool-use-name">${this.escapeHtml(tn2)}</span></summary>${inputHtml}</details>`;
+                const dName2 = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.getToolDisplayName(tn2) : tn2;
+                const tTitle2 = typeof StreamingRenderer !== 'undefined' && block.input ? StreamingRenderer.getToolTitle(tn2, block.input) : '';
+                contentHtml += `<details class="streaming-block-tool-use folded-tool"><summary class="folded-tool-bar"><span class="folded-tool-name">${this.escapeHtml(dName2)}</span>${tTitle2 ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle2)}</span>` : ''}</summary>${inputHtml}</details>`;
               } else {
                 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(tn2)}</span></div>${inputHtml}</div>`;
               }

package/static/js/streaming-renderer.js

@@ -623,6 +623,53 @@ class StreamingRenderer {
   /**
    * Render tool use block with smart parameter display
    */
+  getToolUseTitle(toolName, input) {
+    const normalizedName = toolName.replace(/^mcp__[^_]+__/, '');
+    if (normalizedName === 'Edit' && input.file_path) {
+      const parts = input.file_path.split('/');
+      const fileName = parts.pop();
+      const dir = parts.slice(-2).join('/');
+      return dir ? `${dir}/${fileName}` : fileName;
+    }
+    if (normalizedName === 'Read' && input.file_path) {
+      const parts = input.file_path.split('/');
+      return parts.pop();
+    }
+    if (normalizedName === 'Write' && input.file_path) {
+      const parts = input.file_path.split('/');
+      return parts.pop();
+    }
+    if (normalizedName === 'Bash' || normalizedName === 'bash') {
+      const cmd = input.command || input.commands || '';
+      const cmdText = typeof cmd === 'string' ? cmd : JSON.stringify(cmd);
+      return cmdText.length > 60 ? cmdText.substring(0, 57) + '...' : cmdText;
+    }
+    if (normalizedName === 'Glob' && input.pattern) return input.pattern;
+    if (normalizedName === 'Grep' && input.pattern) return input.pattern;
+    if (normalizedName === 'WebFetch' && input.url) {
+      try { return new URL(input.url).hostname; } catch (e) { return input.url.substring(0, 40); }
+    }
+    if (normalizedName === 'WebSearch' && input.query) return input.query.substring(0, 50);
+    if (input.file_path) return input.file_path.split('/').pop();
+    if (input.command) {
+      const c = typeof input.command === 'string' ? input.command : JSON.stringify(input.command);
+      return c.length > 50 ? c.substring(0, 47) + '...' : c;
+    }
+    if (input.query) return input.query.substring(0, 50);
+    return '';
+  }
+
+  getToolUseDisplayName(toolName) {
+    const normalized = toolName.replace(/^mcp__[^_]+__/, '');
+    const knownTools = ['Read','Write','Edit','Bash','Glob','Grep','WebFetch','WebSearch','TodoWrite','Task','NotebookEdit'];
+    if (knownTools.includes(normalized)) return normalized;
+    if (toolName.startsWith('mcp__')) {
+      const parts = toolName.split('__');
+      return parts.length >= 3 ? parts[2] : parts[parts.length - 1];
+    }
+    return normalized || toolName;
+  }
+
   renderBlockToolUse(block, context) {
     const toolName = block.name || 'unknown';
     const input = block.input || {};
@@ -630,17 +677,20 @@ class StreamingRenderer {
 
     if (shouldFold) {
       const details = document.createElement('details');
-      details.className = 'block-tool-use';
+      details.className = 'block-tool-use folded-tool';
       const summary = document.createElement('summary');
-      summary.className = 'tool-header';
-      summary.style.cssText = 'cursor:pointer;user-select:none;list-style:none;';
+      summary.className = 'folded-tool-bar';
+      const displayName = this.getToolUseDisplayName(toolName);
+      const titleInfo = this.getToolUseTitle(toolName, input);
       summary.innerHTML = `
-        <span class="tool-icon">${this.getToolIcon(toolName)}</span>
-        <span class="tool-name"><code>${this.escapeHtml(toolName)}</code></span>
+        <span class="folded-tool-icon">${this.getToolIcon(toolName)}</span>
+        <span class="folded-tool-name">${this.escapeHtml(displayName)}</span>
+        ${titleInfo ? `<span class="folded-tool-desc">${this.escapeHtml(titleInfo)}</span>` : ''}
       `;
       details.appendChild(summary);
       if (Object.keys(input).length > 0) {
         const paramsDiv = document.createElement('div');
+        paramsDiv.className = 'folded-tool-body';
         paramsDiv.innerHTML = this.renderSmartParams(toolName, input);
         details.appendChild(paramsDiv);
       }
@@ -1004,6 +1054,33 @@ class StreamingRenderer {
     return `<details class="collapsible-code"><summary class="collapsible-code-summary">${summaryLabel}</summary>${codeHtml}</details>`;
   }
 
+  static getToolDisplayName(toolName) {
+    const normalized = toolName.replace(/^mcp__[^_]+__/, '');
+    const knownTools = ['Read','Write','Edit','Bash','Glob','Grep','WebFetch','WebSearch','TodoWrite','Task','NotebookEdit'];
+    if (knownTools.includes(normalized)) return normalized;
+    if (toolName.startsWith('mcp__')) {
+      const parts = toolName.split('__');
+      return parts.length >= 3 ? parts[2] : parts[parts.length - 1];
+    }
+    return normalized || toolName;
+  }
+
+  static getToolTitle(toolName, input) {
+    const n = toolName.replace(/^mcp__[^_]+__/, '');
+    if (n === 'Edit' && input.file_path) { const p = input.file_path.split('/'); const f = p.pop(); const d = p.slice(-2).join('/'); return d ? d+'/'+f : f; }
+    if (n === 'Read' && input.file_path) return input.file_path.split('/').pop();
+    if (n === 'Write' && input.file_path) return input.file_path.split('/').pop();
+    if ((n === 'Bash' || n === 'bash') && (input.command || input.commands)) { const c = typeof (input.command||input.commands) === 'string' ? (input.command||input.commands) : JSON.stringify(input.command||input.commands); return c.length > 60 ? c.substring(0,57)+'...' : c; }
+    if (n === 'Glob' && input.pattern) return input.pattern;
+    if (n === 'Grep' && input.pattern) return input.pattern;
+    if (n === 'WebFetch' && input.url) { try { return new URL(input.url).hostname; } catch(e) { return input.url.substring(0,40); } }
+    if (n === 'WebSearch' && input.query) return input.query.substring(0,50);
+    if (input.file_path) return input.file_path.split('/').pop();
+    if (input.command) { const c = typeof input.command === 'string' ? input.command : JSON.stringify(input.command); return c.length > 50 ? c.substring(0,47)+'...' : c; }
+    if (input.query) return input.query.substring(0,50);
+    return '';
+  }
+
   /**
    * Static HTML version of parameter rendering
    */

package/static/styles.css

@@ -281,10 +281,10 @@ html, body {
 .chat-messages {
   flex: 1;
   overflow-y: auto;
-  padding: 2rem;
+  padding: 1rem 2rem;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 0.5rem;
 }
 
 .chat-context-header {
@@ -593,7 +593,7 @@ html, body {
 .message {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 0.375rem;
   animation: slideUp 0.2s ease;
   width: 100%;
 }
@@ -631,7 +631,7 @@ html, body {
   max-width: 70%;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
 }
 
 .stream-text-block {
@@ -788,7 +788,7 @@ html, body {
   border-radius: 0.5rem;
   overflow: visible;
   background: var(--bg-secondary);
-  margin: 0.75rem 0;
+  margin: 0.25rem 0;
 }
 
 .html-header {
@@ -810,7 +810,7 @@ html, body {
   border-radius: 0.5rem;
   overflow-x: auto;
   background: var(--bg-tertiary);
-  margin: 0.75rem 0;
+  margin: 0.25rem 0;
   font-family: 'Monaco', 'Courier New', monospace;
   font-size: 0.8rem;
 }
@@ -828,7 +828,7 @@ html, body {
 .collapsible-code {
   border-radius: 0.375rem;
   overflow: hidden;
-  margin: 0.5rem 0;
+  margin: 0.25rem 0;
   border: 1px solid #334155;
   background: #1e293b;
 }
@@ -1271,7 +1271,7 @@ html, body {
   }
 
   .chat-messages {
-    padding: 1.5rem;
+    padding: 0.75rem 1rem;
   }
 
   .chat-input-section {
@@ -1363,8 +1363,8 @@ html, body {
 /* Small height viewports */
 @media (max-height: 600px) {
   .chat-messages {
-    padding: 1rem;
-    gap: 0.75rem;
+    padding: 0.75rem;
+    gap: 0.375rem;
   }
 
   .chat-input-section {
@@ -1421,8 +1421,8 @@ html, body {
 
 @media (max-height: 500px) {
   .chat-messages {
-    padding: 0.75rem;
-    gap: 0.5rem;
+    padding: 0.5rem;
+    gap: 0.25rem;
   }
 
   .chat-input-section {
@@ -1663,8 +1663,8 @@ p code {
 .segment-tool-use {
   background: #f0f8ff;
   border-left: 4px solid #007acc;
-  padding: 1rem;
-  margin: 1rem 0;
+  padding: 0.5rem;
+  margin: 0.25rem 0;
   border-radius: 4px;
 }
 
@@ -1690,8 +1690,8 @@ p code {
 .segment-tool-result {
   background: #fff9e6;
   border-left: 4px solid #ffb300;
-  padding: 1rem;
-  margin: 1rem 0;
+  padding: 0.5rem;
+  margin: 0.25rem 0;
   border-radius: 4px;
 }
 
@@ -1744,12 +1744,12 @@ p code {
 .execution-blocks {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.25rem;
   width: 100%;
 }
 
 .message-block {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   border-radius: 0.5rem;
   background: var(--bg-secondary);
   word-wrap: break-word;
@@ -1819,7 +1819,11 @@ p code {
 .block-tool-use {
   background: rgba(59, 130, 246, 0.05);
   border-radius: 0.5rem;
-  padding: 0.75rem;
+  padding: 0.5rem;
+}
+.block-tool-use.folded-tool {
+  padding: 0;
+  background: none;
 }
 
 .tool-name {
@@ -1858,7 +1862,7 @@ p code {
 .block-tool-result {
   background: rgba(16, 185, 129, 0.05);
   border-radius: 0.5rem;
-  padding: 0.75rem;
+  padding: 0.5rem;
 }
 
 .block-tool-result strong {