agentgui 1.0.302 → 1.0.304

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.302",
+  "version": "1.0.304",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",
@@ -30,7 +30,7 @@
     "fsbrowse": "^0.2.18",
     "google-auth-library": "^10.5.0",
     "onnxruntime-node": "^1.24.1",
-    "webtalk": "file:../webtalk",
+    "webtalk": "^1.0.20",
     "ws": "^8.14.2"
   },
   "overrides": {

package/static/index.html

@@ -2257,35 +2257,28 @@
     }
 
     /* --- Inline Tool Result (nested inside tool_use) --- */
-    .tool-result-inline {
-      border-top: 1px solid #bbf7d0;
-      overflow: hidden;
+    /* Tool Result Blocks - Folded by default with status icons */
+    .folded-tool.block-type-tool_result {
+      margin-bottom: 0.375rem;
     }
-    html.dark .tool-result-inline { border-top-color: #166534; }
-    .tool-result-status {
-      display: flex;
-      align-items: center;
-      gap: 0.375rem;
-      padding: 0.3rem 0.625rem;
-      font-size: 0.75rem;
-      line-height: 1.3;
-      cursor: default;
-      user-select: none;
+    .folded-tool.folded-tool-success {
+      background: #f0fdf4;
+    }
+    html.dark .folded-tool.folded-tool-success {
+      background: #0a1f0f;
+    }
+    .folded-tool.folded-tool-success > .folded-tool-bar {
+      background: #dcfce7;
+    }
+    html.dark .folded-tool.folded-tool-success > .folded-tool-bar {
+      background: #0f2b1a;
+    }
+    .folded-tool.folded-tool-success > .folded-tool-bar::before {
+      color: #16a34a;
+    }
+    html.dark .folded-tool.folded-tool-success > .folded-tool-bar::before {
+      color: #4ade80;
     }
-    .tool-result-status::-webkit-details-marker { display: none; }
-    .tool-result-status::marker { display: none; content: ''; }
-    .tool-result-inline > .folded-tool-body { border-top: 1px solid #bbf7d0; }
-    html.dark .tool-result-inline > .folded-tool-body { border-top-color: #166534; }
-    .tool-result-error { background: #fef2f2; border-top-color: #fecaca; }
-    html.dark .tool-result-error { background: #1f0a0a; border-top-color: #991b1b; }
-    .tool-result-error .folded-tool-icon { color: #dc2626; }
-    html.dark .tool-result-error .folded-tool-icon { color: #f87171; }
-    .tool-result-error .folded-tool-name { color: #991b1b; }
-    html.dark .tool-result-error .folded-tool-name { color: #fca5a5; }
-    .tool-result-error .folded-tool-desc { color: #b91c1c; }
-    html.dark .tool-result-error .folded-tool-desc { color: #f87171; }
-    .tool-result-error > .folded-tool-body { border-top-color: #fecaca; }
-    html.dark .tool-result-error > .folded-tool-body { border-top-color: #991b1b; }
 
     /* --- Consecutive Block Joining --- */
     .streaming-blocks > * + *,

package/static/js/streaming-renderer.js

@@ -1210,35 +1210,31 @@ class StreamingRenderer {
     const isError = block.is_error || false;
     const content = block.content || '';
     const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
-    const parentIsOpen = context.parentIsOpen !== undefined ? context.parentIsOpen : true;
 
-    const wrapper = document.createElement('div');
-    wrapper.className = 'tool-result-inline' + (isError ? ' tool-result-error' : ' tool-result-success');
-    wrapper.dataset.eventType = 'tool_result';
-    if (block.tool_use_id) wrapper.dataset.toolUseId = block.tool_use_id;
-    wrapper.classList.add(this._getBlockTypeClass('tool_result'));
+    const details = document.createElement('details');
+    details.className = 'folded-tool' + (isError ? ' folded-tool-error' : ' folded-tool-success');
+    details.dataset.eventType = 'tool_result';
+    if (block.tool_use_id) details.dataset.toolUseId = block.tool_use_id;
+    details.classList.add(this._getBlockTypeClass('tool_result'));
 
-    const header = document.createElement('div');
-    header.className = 'tool-result-status';
+    const summary = document.createElement('summary');
+    summary.className = 'folded-tool-bar';
     const iconSvg = isError
       ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
       : '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';
-    header.innerHTML = `
+    summary.innerHTML = `
       <span class="folded-tool-icon">${iconSvg}</span>
       <span class="folded-tool-name">${isError ? 'Error' : 'Success'}</span>
     `;
-    wrapper.appendChild(header);
+    details.appendChild(summary);
 
     const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
     const body = document.createElement('div');
     body.className = 'folded-tool-body';
-    if (!parentIsOpen) {
-      body.style.display = 'none';
-    }
     body.innerHTML = renderedContent;
-    wrapper.appendChild(body);
+    details.appendChild(body);
 
-    return wrapper;
+    return details;
   }
 
   /**