agentgui 1.0.826 → 1.0.828

package/static/js/streaming-renderer-tools.js

@@ -0,0 +1,189 @@
+Object.assign(StreamingRenderer.prototype, {
+  getToolIcon(toolName) {
+    const icons = {
+      Read: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"/></svg>',
+      Write: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/></svg>',
+      Edit: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"/></svg>',
+      Bash: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/></svg>',
+      Glob: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>',
+      Grep: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/></svg>',
+      WebFetch: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 012 2v1a2 2 0 01-2 2 2 2 0 01-2 2v.5a6.003 6.003 0 01-6.668-7.473z" clip-rule="evenodd"/></svg>',
+      WebSearch: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/></svg>',
+      TodoWrite: '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 011 1v3.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L6 11.586V8a1 1 0 011-1z" clip-rule="evenodd"/></svg>',
+      Task: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/></svg>',
+      NotebookEdit: '<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"/></svg>'
+    };
+    return icons[toolName] || '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10.666a1 1 0 11-1.64-1.118L9.687 10H5a1 1 0 01-.82-1.573l7-10.666a1 1 0 011.12-.373z" clip-rule="evenodd"/></svg>';
+  },
+
+  renderFilePath(filePath) {
+    if (!filePath) return '';
+    const parts = pathSplit(filePath);
+    const fileName = parts.pop();
+    const dir = parts.join('/');
+    return `<div class="tool-param-file"><span class="file-icon">&#128196;</span>${dir ? `<span class="file-dir">${this.escapeHtml(dir)}/</span>` : ''}<span class="file-name">${this.escapeHtml(fileName)}</span></div>`;
+  },
+
+  renderSmartParams(toolName, input) {
+    if (!input || Object.keys(input).length === 0) return '';
+
+    const normalizedName = toolName.replace(/^mcp__.*?__/, '');
+
+    switch (normalizedName) {
+      case 'Read':
+        return `<div class="tool-params">${this.renderFilePath(input.file_path)}${input.offset ? `<div style="margin-top:0.375rem;font-size:0.75rem;color:var(--color-text-secondary)">Lines ${input.offset}${input.limit ? '–' + (input.offset + input.limit) : '+'}</div>` : ''}</div>`;
+
+      case 'Write':
+        return `<div class="tool-params">${this.renderFilePath(input.file_path)}${input.content ? this.renderContentPreview(input.content, 'Content') : ''}</div>`;
+
+      case 'Edit': {
+        let html = `<div class="tool-params">${this.renderFilePath(input.file_path)}`;
+        if (input.old_string || input.new_string) {
+          html += `<div class="tool-param-diff" style="margin-top:0.5rem">`;
+          if (input.old_string) {
+            html += `<div class="diff-header">Remove</div><div class="diff-old">${this.escapeHtml(this.truncateContent(input.old_string, 500))}</div>`;
+          }
+          if (input.new_string) {
+            html += `<div class="diff-header">Add</div><div class="diff-new">${this.escapeHtml(this.truncateContent(input.new_string, 500))}</div>`;
+          }
+          html += '</div>';
+        }
+        return html + '</div>';
+      }
+
+      case 'Bash': {
+        const cmd = input.command || input.commands || '';
+        const cmdText = typeof cmd === 'string' ? cmd : JSON.stringify(cmd);
+        let html = `<div class="tool-params"><div class="tool-param-command"><span class="prompt-char">$</span><span class="command-text">${this.escapeHtml(cmdText)}</span></div>`;
+        if (input.description) html += `<div style="margin-top:0.375rem;font-size:0.75rem;color:var(--color-text-secondary)">${this.escapeHtml(input.description)}</div>`;
+        return html + '</div>';
+      }
+
+      case 'Glob':
+        return `<div class="tool-params"><div class="tool-param-query"><span class="query-icon">&#128193;</span><code style="font-size:0.85rem">${this.escapeHtml(input.pattern || '')}</code></div>${input.path ? `<div style="margin-top:0.25rem;font-size:0.75rem;color:var(--color-text-secondary)">in ${this.escapeHtml(input.path)}</div>` : ''}</div>`;
+
+      case 'Grep':
+        return `<div class="tool-params"><div class="tool-param-query"><span class="query-icon">&#128269;</span><code style="font-size:0.85rem">${this.escapeHtml(input.pattern || '')}</code></div>${input.path ? `<div style="margin-top:0.25rem;font-size:0.75rem;color:var(--color-text-secondary)">in ${this.escapeHtml(input.path)}</div>` : ''}${input.glob ? `<div style="margin-top:0.125rem;font-size:0.7rem;color:var(--color-text-secondary)">files: ${this.escapeHtml(input.glob)}</div>` : ''}</div>`;
+
+      case 'WebFetch':
+        return `<div class="tool-params"><div class="tool-param-url"><span class="url-icon">&#127760;</span>${this.escapeHtml(input.url || '')}</div>${input.prompt ? `<div style="margin-top:0.375rem;font-size:0.8rem;color:var(--color-text-secondary)">${this.escapeHtml(this.truncateContent(input.prompt, 150))}</div>` : ''}</div>`;
+
+      case 'WebSearch':
+        return `<div class="tool-params"><div class="tool-param-query"><span class="query-icon">&#128269;</span><strong style="font-size:0.85rem">${this.escapeHtml(input.query || '')}</strong></div></div>`;
+
+      case 'TodoWrite':
+        if (input.todos && Array.isArray(input.todos)) {
+          const statusIcons = { completed: '&#9989;', in_progress: '&#9881;', pending: '&#9744;' };
+          const completedCount = input.todos.filter(t => t.status === 'completed').length;
+          const totalCount = input.todos.length;
+          const items = input.todos.map(t => `<div class="todo-item"><span class="todo-status">${statusIcons[t.status] || '&#9744;'}</span><span class="todo-text">${this.escapeHtml(t.content || '')}</span></div>`).join('');
+          const summary = `<summary class="folded-tool-bar" style="cursor:pointer;padding:0.5rem;background:var(--color-bg-secondary);border-radius:0.25rem;user-select:none"><span style="font-weight:600;font-size:0.9rem">📋 Tasks</span><span style="margin-left:0.5rem;font-size:0.8rem;color:var(--color-text-secondary)">${completedCount}/${totalCount} complete</span></summary>`;
+          return `<details class="folded-tool" open>${summary}<div class="folded-tool-body tool-param-todos" style="padding:0.75rem">${items}</div></details>`;
+        }
+        return this.renderJsonParams(input);
+
+      case 'Task':
+        return `<div class="tool-params">${input.description ? `<div style="font-weight:600;font-size:0.85rem;margin-bottom:0.375rem">${this.escapeHtml(input.description)}</div>` : ''}${input.prompt ? `<div style="font-size:0.8rem;color:var(--color-text-secondary);max-height:100px;overflow-y:auto;white-space:pre-wrap;word-break:break-word">${this.escapeHtml(this.truncateContent(input.prompt, 300))}</div>` : ''}${input.subagent_type ? `<div style="margin-top:0.375rem;font-size:0.7rem"><code style="background:var(--color-bg-secondary);padding:0.125rem 0.375rem;border-radius:0.25rem">${this.escapeHtml(input.subagent_type)}</code></div>` : ''}</div>`;
+
+      case 'NotebookEdit':
+        return `<div class="tool-params">${this.renderFilePath(input.notebook_path)}${input.new_source ? this.renderContentPreview(input.new_source, 'Cell content') : ''}</div>`;
+
+      case 'dev__execute':
+      case 'dev_execute':
+      case 'execute': {
+        let html = '<div class="tool-params">';
+
+        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>`;
+        }
+
+        if (input.timeout) {
+          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>`;
+        }
+
+        if (input.code) {
+          const codeLines = input.code.split('\n');
+          const lineCount = codeLines.length;
+          const truncated = lineCount > 50;
+          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), true)}${truncated ? `<div style="font-size:0.7rem;color:var(--color-text-secondary);text-align:center;padding:0.25rem">... ${lineCount - 50} more lines</div>` : ''}</div>`;
+        }
+
+        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>';
+        return html;
+      }
+
+      default:
+        return this.renderJsonParams(input);
+    }
+  },
+
+  renderContentPreview(content, label) {
+    const maxLen = 500;
+    const truncated = content.length > maxLen;
+    const displayContent = truncated ? content.substring(0, maxLen) : content;
+    const lineCount = content.split('\n').length;
+    const codeBody = StreamingRenderer.detectCodeContent(displayContent)
+      ? StreamingRenderer.renderCodeWithHighlight(displayContent, this.escapeHtml.bind(this), true)
+      : `<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>`;
+  },
+
+  renderJsonParams(input) {
+    return `<div class="tool-params">${this.renderParametersBeautiful(input)}</div>`;
+  },
+
+  getToolUseTitle(toolName, input) {
+    const normalizedName = toolName.replace(/^mcp__.*?__/, '');
+    if (normalizedName === 'Edit' && input.file_path) {
+      const parts = pathSplit(input.file_path);
+      const fileName = parts.pop();
+      const dir = parts.slice(-2).join('/');
+      return dir ? `${dir}/${fileName}` : fileName;
+    }
+    if (normalizedName === 'Read' && input.file_path) {
+      return pathBasename(input.file_path);
+    }
+    if (normalizedName === 'Write' && input.file_path) {
+      return pathBasename(input.file_path);
+    }
+    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 pathBasename(input.file_path);
+    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;
+  }
+
+});

package/static/js/streaming-renderer-tools2.js

@@ -0,0 +1,92 @@
+Object.assign(StreamingRenderer.prototype, {
+  renderBlockToolUse(block, context) {
+    const toolName = block.name || 'unknown';
+    const input = block.input || {};
+
+    const details = document.createElement('details');
+    details.className = 'block-tool-use folded-tool';
+    if (block.id) details.dataset.toolUseId = block.id;
+    details.dataset.startedAt = Date.now();
+    details.classList.add(this._getBlockTypeClass('tool_use'));
+    details.classList.add(this._getToolColorClass(toolName));
+    const normalizedForOpen = toolName.replace(/^mcp__.*?__/, '');
+    if (normalizedForOpen === 'TodoWrite') details.open = true;
+    const summary = document.createElement('summary');
+    summary.className = 'folded-tool-bar';
+    const displayName = this.getToolUseDisplayName(toolName);
+    const titleInfo = this.getToolUseTitle(toolName, input);
+    summary.innerHTML = `
+      <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);
+    }
+    return details;
+  },
+
+  renderSmartContent(contentStr) {
+    const trimmed = contentStr.trim();
+
+    if (trimmed.startsWith('data:image/')) {
+      return `<div style="padding:0.5rem"><img src="${this.escapeHtml(trimmed)}" style="max-width:100%;max-height:24rem;border-radius:0.375rem" loading="lazy"></div>`;
+    }
+
+    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        return `<div style="padding:0.625rem 1rem">${this.renderParametersBeautiful(parsed)}</div>`;
+      } catch (e) {}
+    }
+
+    const lines = trimmed.split('\n');
+    const allFilePaths = lines.length > 1 && lines.every(l => {
+      const t = l.trim();
+      return t === '' || t.startsWith('/') || /^[A-Za-z]:[\\\/]/.test(t);
+    });
+    if (allFilePaths && lines.filter(l => l.trim()).length > 0) {
+      const fileHtml = lines.filter(l => l.trim()).map(l => {
+        const p = l.trim();
+        const parts = pathSplit(p);
+        const name = parts.pop();
+        const dir = parts.join('/');
+        return `<div style="display:flex;align-items:center;gap:0.375rem;padding:0.1875rem 0;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem"><span style="opacity:0.5">&#128196;</span><span style="color:var(--color-text-secondary)">${this.escapeHtml(dir)}/</span><span style="font-weight:600">${this.escapeHtml(name)}</span></div>`;
+      }).join('');
+      return `<div style="padding:0.625rem 1rem">${fileHtml}</div>`;
+    }
+
+    if (trimmed.length > 1500) {
+      return `<div class="result-body collapsed" style="padding:0.625rem 1rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;line-height:1.5">${this.escapeHtml(trimmed)}</div><button class="expand-btn" onclick="this.previousElementSibling.classList.toggle('collapsed');this.textContent=this.textContent==='Show more'?'Show less':'Show more'">Show more</button>`;
+    }
+
+    return `<div style="padding:0.625rem 1rem;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.75rem;white-space:pre-wrap;word-break:break-all;line-height:1.5">${this.escapeHtml(trimmed)}</div>`;
+  },
+  renderBlockToolResult(block, context) {
+    const content = block.content || '';
+    const toolName = block.tool_name || block.name || '';
+
+    if (toolName.includes('TodoWrite') || (typeof content === 'object' && Array.isArray(content?.todos))) {
+      return null;
+    }
+
+    const contentStr = typeof content === 'string' ? content : JSON.stringify(content, null, 2);
+    const isError = (block.is_error || false) && !contentStr.trimStart().startsWith('exec ran successfully.');
+
+    const container = document.createElement('div');
+    container.className = 'tool-result-pending';
+    container.dataset.eventType = 'tool_result';
+    container.dataset.isError = isError ? '1' : '0';
+    if (block.tool_use_id) container.dataset.toolUseId = block.tool_use_id;
+    container.style.display = 'none';
+
+    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
+    container.innerHTML = renderedContent;
+
+    return container;
+  }
+});