agentgui 1.0.116 → 1.0.118

package/package.json

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

package/static/app.js

@@ -203,9 +203,14 @@ class GMGUIApp {
           throw new Error('Not a claude_execution message');
         }
       } catch (e) {
-        // Fallback: render as plain text
-        const text = typeof message.content === 'string' ? message.content : JSON.stringify(message.content);
-        contentHtml = `<div class="message-content">${this.escapeHtml(text)}</div>`;
+        // Fallback: try to parse and beautify, or render as plain text
+        try {
+          const parsed = typeof message.content === 'string' ? JSON.parse(message.content) : message.content;
+          contentHtml = `<div class="message-content">${this.renderParameters(parsed)}</div>`;
+        } catch (parseErr) {
+          const text = typeof message.content === 'string' ? message.content : JSON.stringify(message.content);
+          contentHtml = `<div class="message-content"><pre>${this.escapeHtml(text)}</pre></div>`;
+        }
       }
 
       msgEl.innerHTML = contentHtml;
@@ -227,20 +232,33 @@ class GMGUIApp {
         break;
       }
 
-      case 'tool_use':
+      case 'tool_use': {
         html += `<div class="block-tool-use">`;
         html += `<strong class="tool-name">${this.escapeHtml(block.name || 'Tool')}</strong>`;
-        html += `<div class="tool-input"><pre>${this.escapeHtml(JSON.stringify(block.input || {}, null, 2))}</pre></div>`;
+        const paramHtml = this.renderParameters(block.input || {});
+        html += `<div class="tool-input">${paramHtml}</div>`;
         html += `</div>`;
         break;
+      }
 
-      case 'tool_result':
+      case 'tool_result': {
         html += `<div class="block-tool-result">`;
         html += `<strong>Result:</strong>`;
-        const resultText = typeof block.result === 'string' ? block.result : JSON.stringify(block.result, null, 2);
-        html += `<div class="tool-result"><pre>${this.escapeHtml(resultText)}</pre></div>`;
+        let resultHtml;
+        if (typeof block.result === 'string') {
+          try {
+            const parsed = JSON.parse(block.result);
+            resultHtml = this.renderParameters(parsed);
+          } catch (e) {
+            resultHtml = `<pre>${this.escapeHtml(block.result)}</pre>`;
+          }
+        } else {
+          resultHtml = this.renderParameters(block.result);
+        }
+        html += `<div class="tool-result">${resultHtml}</div>`;
         html += `</div>`;
         break;
+      }
 
       case 'file_operation':
         html += `<div class="block-file-op">`;
@@ -350,9 +368,14 @@ class GMGUIApp {
           throw new Error('Not a claude_execution message');
         }
       } catch (e) {
-        // Fallback: render as plain text
-        const text = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content);
-        contentHtml = `<div class="message-content">${this.escapeHtml(text)}</div>`;
+        // Fallback: try to parse and beautify, or render as plain text
+        try {
+          const parsed = typeof msg.content === 'string' ? JSON.parse(msg.content) : msg.content;
+          contentHtml = `<div class="message-content">${this.renderParameters(parsed)}</div>`;
+        } catch (parseErr) {
+          const text = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content);
+          contentHtml = `<div class="message-content"><pre>${this.escapeHtml(text)}</pre></div>`;
+        }
       }
 
       msgEl.innerHTML = contentHtml;
@@ -580,6 +603,52 @@ class GMGUIApp {
     div.textContent = text;
     return div.innerHTML;
   }
+
+  renderParameters(obj, depth = 0) {
+    if (obj === null || obj === undefined) {
+      return `<span style="color: var(--text-tertiary);">null</span>`;
+    }
+
+    if (typeof obj === 'string') {
+      const isPath = obj.includes('/') || obj.includes('\\');
+      const isUrl = obj.startsWith('http://') || obj.startsWith('https://');
+      if (isPath || isUrl) {
+        return `<code style="color: var(--text-secondary); background: transparent;">${this.escapeHtml(obj)}</code>`;
+      }
+      return `<span>"${this.escapeHtml(obj)}"</span>`;
+    }
+
+    if (typeof obj === 'number' || typeof obj === 'boolean') {
+      return `<span style="color: var(--color-info);">${obj}</span>`;
+    }
+
+    if (Array.isArray(obj)) {
+      if (obj.length === 0) {
+        return `<span style="color: var(--text-tertiary);">[]</span>`;
+      }
+      const maxItems = depth === 0 ? 10 : 5;
+      const items = obj.slice(0, maxItems).map(item => this.renderParameters(item, depth + 1));
+      const more = obj.length > maxItems ? `<span style="color: var(--text-tertiary);">... ${obj.length - maxItems} more</span>` : '';
+      return `<span style="color: var(--text-tertiary);">[</span> ${items.join(', ')} ${more} <span style="color: var(--text-tertiary);">]</span>`;
+    }
+
+    if (typeof obj === 'object') {
+      const keys = Object.keys(obj);
+      if (keys.length === 0) {
+        return `<span style="color: var(--text-tertiary);">{}</span>`;
+      }
+      const maxKeys = depth === 0 ? 15 : 8;
+      const pairs = keys.slice(0, maxKeys).map(key => {
+        const keyHtml = `<span style="color: var(--color-primary);">${this.escapeHtml(key)}</span>`;
+        const valHtml = this.renderParameters(obj[key], depth + 1);
+        return `${keyHtml}: ${valHtml}`;
+      });
+      const more = keys.length > maxKeys ? `<span style="color: var(--text-tertiary);">... ${keys.length - maxKeys} more</span>` : '';
+      return `<div style="margin-left: ${depth * 1.5}rem;"><span style="color: var(--text-tertiary);">{</span><br/>${pairs.map(p => `&nbsp;&nbsp;${p}`).join(',<br/>')}<br/>${more}<span style="color: var(--text-tertiary);">}</span></div>`;
+    }
+
+    return `<span>${this.escapeHtml(String(obj))}</span>`;
+  }
 }
 
 const app = new GMGUIApp();

package/static/styles.css

@@ -739,7 +739,6 @@ html, body {
   align-items: center;
   justify-content: center;
   background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
   border-radius: 0.25rem;
   font-family: monospace;
   font-size: 0.75rem;
@@ -787,7 +786,6 @@ html, body {
   max-height: 300px;
   overflow-y: auto;
   background: var(--bg-secondary);
-  border-top: 1px solid var(--border-color);
 }
 
 .tool-block.collapsed .tool-body {
@@ -812,7 +810,6 @@ html, body {
   padding: 0.375rem 0.75rem;
   font-size: 0.8rem;
   color: var(--text-secondary);
-  border-top: 1px solid var(--border-color);
 }
 
 .html-block {
@@ -1792,12 +1789,13 @@ p code {
 }
 
 .tool-input {
-  background: var(--bg-tertiary);
+  background: transparent;
   border-radius: 0.375rem;
-  padding: 0.5rem;
+  padding: 0.5rem 0;
   overflow-x: auto;
   font-size: 0.8rem;
   font-family: 'Courier New', monospace;
+  line-height: 1.5;
 }
 
 .tool-input pre {
@@ -1805,6 +1803,17 @@ p code {
   color: var(--text-secondary);
 }
 
+.tool-input code {
+  color: var(--text-secondary);
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+}
+
+.tool-input span {
+  font-family: 'Courier New', monospace;
+}
+
 .block-tool-result {
   background: rgba(16, 185, 129, 0.05);
   border: 1px solid rgba(16, 185, 129, 0.2);
@@ -1819,14 +1828,15 @@ p code {
 }
 
 .tool-result {
-  background: var(--bg-tertiary);
+  background: transparent;
   border-radius: 0.375rem;
-  padding: 0.5rem;
+  padding: 0.5rem 0;
   overflow-x: auto;
   font-size: 0.8rem;
   font-family: 'Courier New', monospace;
   max-height: 300px;
   overflow-y: auto;
+  line-height: 1.5;
 }
 
 .tool-result pre {
@@ -1834,6 +1844,13 @@ p code {
   color: var(--text-secondary);
 }
 
+.tool-result code {
+  color: var(--text-secondary);
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+}
+
 .block-file-op {
   background: rgba(245, 158, 11, 0.05);
   border: 1px solid rgba(245, 158, 11, 0.2);
@@ -1853,15 +1870,15 @@ p code {
   font-size: 0.875rem;
   font-family: 'Courier New', monospace;
   margin-bottom: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  background: var(--bg-tertiary);
+  padding: 0.25rem 0;
+  background: transparent;
   border-radius: 0.25rem;
 }
 
 .file-content {
-  background: var(--bg-tertiary);
+  background: transparent;
   border-radius: 0.375rem;
-  padding: 0.5rem;
+  padding: 0.5rem 0;
   overflow-x: auto;
   font-size: 0.8rem;
   font-family: 'Courier New', monospace;