agentgui 1.0.13 → 1.0.15

package/acp-launcher.js

@@ -67,13 +67,13 @@ export default class ACPConnection {
       await this.sendRequest('initialize', {
         protocolVersion: 1,
         clientCapabilities: { fs: { readTextFile: true, writeTextFile: true } },
-      }, 4000);
-      const result = await this.sendRequest('session/new', { cwd, mcpServers: [] }, 4000);
+      }, 10000);
+      const result = await this.sendRequest('session/new', { cwd, mcpServers: [] }, 30000);
       this.sessionId = result.sessionId;
-      await this.sendRequest('session/set_mode', { sessionId: this.sessionId, modeId: 'bypassPermissions' }, 2000);
+      await this.sendRequest('session/set_mode', { sessionId: this.sessionId, modeId: 'bypassPermissions' }, 10000);
     };
 
-    const deadline = new Promise((_, reject) => setTimeout(() => reject(new Error('ACP handshake timeout (5s)')), 5000));
+    const deadline = new Promise((_, reject) => setTimeout(() => reject(new Error('ACP handshake timeout (60s)')), 60000));
 
     try {
       await Promise.race([acpSetup(), deadline]);

package/package.json

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

package/response-formatter.js

@@ -0,0 +1,285 @@
+/**
+ * Response formatter for Claude Code outputs
+ * Handles segmentation of text, code blocks, tool calls, thinking blocks, etc.
+ */
+
+export class ResponseFormatter {
+  /**
+   * Parse Claude Code response into structured segments
+   */
+  static parseResponse(text) {
+    if (!text || typeof text !== 'string') return [];
+    
+    const segments = [];
+    const lines = text.split('\n');
+    let current = null;
+    let codeBlockLang = null;
+    let inCodeBlock = false;
+    
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      
+      // Check for code block markers
+      const codeBlockMatch = line.match(/^```(\w+)?$/);
+      if (codeBlockMatch) {
+        if (!inCodeBlock) {
+          // Starting a code block
+          if (current && current.type === 'text' && current.content.trim()) {
+            segments.push(current);
+            current = null;
+          }
+          inCodeBlock = true;
+          codeBlockLang = codeBlockMatch[1] || 'text';
+          current = { type: 'code', language: codeBlockLang, content: '' };
+        } else {
+          // Ending a code block
+          if (current) {
+            segments.push(current);
+            current = null;
+          }
+          inCodeBlock = false;
+          codeBlockLang = null;
+        }
+        continue;
+      }
+      
+      if (inCodeBlock) {
+        current.content += (current.content ? '\n' : '') + line;
+      } else {
+        // Check for markdown formatting
+        if (line.match(/^#+\s/)) {
+          // Heading
+          if (current && current.type === 'text' && current.content.trim()) {
+            segments.push(current);
+          }
+          segments.push({ type: 'heading', level: line.match(/^#+/)[0].length, content: line.replace(/^#+\s/, '') });
+          current = null;
+        } else if (line.match(/^>\s/) || line.match(/^-\s/) || line.match(/^\d+\.\s/)) {
+          // Quote, bullet, or numbered list
+          if (current && current.type === 'text') {
+            segments.push(current);
+          }
+          if (line.match(/^>\s/)) {
+            segments.push({ type: 'blockquote', content: line.replace(/^>\s/, '') });
+          } else {
+            segments.push({ type: 'list_item', content: line.replace(/^[-\d+.]\s+/, '') });
+          }
+          current = null;
+        } else if (line.trim()) {
+          // Regular text
+          if (!current || current.type !== 'text') {
+            if (current) segments.push(current);
+            current = { type: 'text', content: line };
+          } else {
+            current.content += '\n' + line;
+          }
+        } else if (current && current.type === 'text' && current.content.trim()) {
+          // Empty line - could indicate paragraph break
+          current.content += '\n\n';
+        }
+      }
+    }
+    
+    if (current) {
+      segments.push(current);
+    }
+    
+    return segments;
+  }
+
+  /**
+   * Extract tool calls, thinking blocks, and task information
+   */
+  static extractMetadata(text) {
+    if (!text || typeof text !== 'string') return { tools: [], thinking: [], tasks: [] };
+    
+    const metadata = {
+      tools: [],
+      thinking: [],
+      tasks: [],
+      subagents: []
+    };
+    
+    // Find tool call patterns
+    const toolPattern = /(?:^|\n)\s*(?:Using|Calling|Invoking|Running)\s+(?:the\s+)?(\w+(?:\s+\w+)*?)(?:\s+(?:tool|command|function))?\s*(?:with|to)?\s*(.+?)(?:\n|$)/gi;
+    let match;
+    while ((match = toolPattern.exec(text)) !== null) {
+      metadata.tools.push({
+        name: match[1].trim(),
+        description: match[2]?.trim() || ''
+      });
+    }
+    
+    // Find thinking/reasoning blocks
+    const thinkingPattern = /(?:thinking|reasoning|analyzing|considering)[\s:]+(.+?)(?:\n\n|$)/gi;
+    while ((match = thinkingPattern.exec(text)) !== null) {
+      metadata.thinking.push(match[1].trim());
+    }
+    
+    // Find task references
+    const taskPattern = /(?:task|step|doing)[\s:]+(.+?)(?:\n|$)/gi;
+    while ((match = taskPattern.exec(text)) !== null) {
+      metadata.tasks.push(match[1].trim());
+    }
+    
+    // Find subagent references
+    const subagentPattern = /(?:using|with|via)\s+(?:the\s+)?(\w+)\s+(?:subagent|agent)/gi;
+    while ((match = subagentPattern.exec(text)) !== null) {
+      metadata.subagents.push(match[1].trim());
+    }
+    
+    return metadata;
+  }
+
+  /**
+   * Segment a response into logical parts
+   * Splits on natural boundaries like tool calls, thinking, etc.
+   */
+  static segmentResponse(text) {
+    if (!text || typeof text !== 'string') return [];
+    
+    const segments = [];
+    const parts = [];
+    
+    // Split by major transitions
+    const transitions = [
+      { pattern: /I'll\s+use\s+the\s+\w+\s+(?:subagent|tool|command)/i, type: 'tool_transition' },
+      { pattern: /Let\s+me\s+(?:use|run|execute|call)\s+/i, type: 'action_start' },
+      { pattern: /Here['s]*\s+(?:what|the|a)\s+(?:happened|result|output)/i, type: 'result' },
+      { pattern: /^(✓|✅|✗|❌|-|•)\s+/m, type: 'bullet' }
+    ];
+    
+    let currentPart = '';
+    const lines = text.split('\n');
+    
+    for (const line of lines) {
+      let isTransition = false;
+      
+      for (const { pattern, type } of transitions) {
+        if (pattern.test(line)) {
+          if (currentPart.trim()) {
+            parts.push({ text: currentPart.trim(), type: 'text' });
+            currentPart = '';
+          }
+          isTransition = true;
+          break;
+        }
+      }
+      
+      if (isTransition || line.match(/^#+\s/) || line.match(/^```/)) {
+        if (currentPart.trim()) {
+          parts.push({ text: currentPart.trim(), type: 'text' });
+          currentPart = '';
+        }
+      }
+      
+      currentPart += (currentPart ? '\n' : '') + line;
+    }
+    
+    if (currentPart.trim()) {
+      parts.push({ text: currentPart.trim(), type: 'text' });
+    }
+    
+    // Further parse each part
+    for (const part of parts) {
+      segments.push({
+        ...part,
+        parsed: this.parseResponse(part.text),
+        metadata: this.extractMetadata(part.text)
+      });
+    }
+    
+    return segments;
+  }
+
+  /**
+   * Format segments for display with proper HTML
+   */
+  static formatForDisplay(segments) {
+    if (!Array.isArray(segments)) return '';
+    
+    const html = [];
+    
+    for (const segment of segments) {
+      if (segment.type === 'code') {
+        html.push(`<pre class="code-block language-${segment.language}"><code>${this.escapeHtml(segment.content)}</code></pre>`);
+      } else if (segment.type === 'heading') {
+        const tag = `h${Math.min(segment.level, 6)}`;
+        html.push(`<${tag} class="response-heading">${this.escapeHtml(segment.content)}</${tag}>`);
+      } else if (segment.type === 'blockquote') {
+        html.push(`<blockquote class="response-quote">${this.escapeHtml(segment.content)}</blockquote>`);
+      } else if (segment.type === 'list_item') {
+        html.push(`<li class="response-list-item">${this.escapeHtml(segment.content)}</li>`);
+      } else if (segment.type === 'text') {
+        html.push(`<p class="response-text">${this.escapeHtml(segment.content).replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\*(.*?)\*/g, '<em>$1</em>')}</p>`);
+      }
+    }
+    
+    return html.join('\n');
+  }
+
+  static escapeHtml(text) {
+    if (typeof text !== 'string') return '';
+    return text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+
+  /**
+   * Create rich metadata display
+   */
+  static createMetadataDisplay(metadata) {
+    if (!metadata || Object.keys(metadata).every(k => !metadata[k] || metadata[k].length === 0)) {
+      return null;
+    }
+
+    const html = ['<div class="response-metadata">'];
+    
+    if (metadata.tools?.length) {
+      html.push('<div class="metadata-section tools">');
+      html.push('<strong>Tools Used:</strong>');
+      html.push('<ul>');
+      for (const tool of metadata.tools) {
+        html.push(`<li><code>${this.escapeHtml(tool.name)}</code>${tool.description ? ': ' + this.escapeHtml(tool.description) : ''}</li>`);
+      }
+      html.push('</ul></div>');
+    }
+    
+    if (metadata.thinking?.length) {
+      html.push('<details class="metadata-section thinking">');
+      html.push('<summary>Reasoning</summary>');
+      for (const thought of metadata.thinking) {
+        html.push(`<p>${this.escapeHtml(thought)}</p>`);
+      }
+      html.push('</details>');
+    }
+    
+    if (metadata.subagents?.length) {
+      html.push('<div class="metadata-section subagents">');
+      html.push('<strong>Subagents:</strong>');
+      html.push('<ul>');
+      for (const agent of metadata.subagents) {
+        html.push(`<li>${this.escapeHtml(agent)}</li>`);
+      }
+      html.push('</ul></div>');
+    }
+    
+    if (metadata.tasks?.length) {
+      html.push('<div class="metadata-section tasks">');
+      html.push('<strong>Tasks:</strong>');
+      html.push('<ul>');
+      for (const task of metadata.tasks) {
+        html.push(`<li>${this.escapeHtml(task)}</li>`);
+      }
+      html.push('</ul></div>');
+    }
+    
+    html.push('</div>');
+    return html.join('\n');
+  }
+}
+
+export default ResponseFormatter;

package/server.js

@@ -7,6 +7,7 @@ import os from 'os';
 import { execSync } from 'child_process';
 import { queries } from './database.js';
 import ACPConnection from './acp-launcher.js';
+import { ResponseFormatter } from './response-formatter.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const PORT = process.env.PORT || 3000;
@@ -313,17 +314,21 @@ async function processMessage(conversationId, messageId, sessionId, content, age
 
     let fullText = '';
     const blocks = [];
+    const updateChunks = []; // Track all message chunks in order
     conn.onUpdate = (params) => {
       const u = params.update;
       if (!u) return;
       const kind = u.sessionUpdate;
       if (kind === 'agent_message_chunk' && u.content?.text) {
         fullText += u.content.text;
+        updateChunks.push({ type: 'text', content: u.content.text, timestamp: Date.now() });
       } else if (kind === 'html_content' && u.content?.html) {
         blocks.push({ type: 'html', html: u.content.html, title: u.content.title, id: u.content.id });
+        updateChunks.push({ type: 'html', content: u.content.html, title: u.content.title, timestamp: Date.now() });
       } else if (kind === 'image_content' && u.content?.path) {
         const imageUrl = BASE_URL + '/api/image/' + encodeURIComponent(u.content.path);
         blocks.push({ type: 'image', path: u.content.path, url: imageUrl, title: u.content.title, alt: u.content.alt });
+        updateChunks.push({ type: 'image', path: u.content.path, url: imageUrl, title: u.content.title, timestamp: Date.now() });
       }
     };
 
@@ -331,7 +336,23 @@ async function processMessage(conversationId, messageId, sessionId, content, age
     conn.onUpdate = null;
 
     const responseText = fullText || result?.result || (result?.stopReason ? `Completed: ${result.stopReason}` : 'No response.');
-    const messageContent = blocks.length > 0 ? { text: responseText, blocks } : responseText;
+    
+    // Segment and format the response for better display
+    const segments = ResponseFormatter.segmentResponse(responseText);
+    const metadata = ResponseFormatter.extractMetadata(responseText);
+    
+    const messageContent = blocks.length > 0 ? { 
+      text: responseText, 
+      blocks,
+      segments,
+      metadata,
+      updateChunks
+    } : {
+      text: responseText,
+      segments,
+      metadata,
+      updateChunks
+    };
 
     const assistantMessage = queries.createMessage(conversationId, 'assistant', messageContent);
     queries.updateSession(sessionId, { status: 'completed', response: { text: responseText, messageId: assistantMessage.id }, completed_at: Date.now() });

package/static/app.js

@@ -599,7 +599,13 @@ class GMGUIApp {
         el.appendChild(bubble);
       }
     } else if (typeof msg.content === 'object' && msg.content !== null) {
-      if (msg.content.text) {
+      // Display segmented content if available
+      if (msg.content.segments && Array.isArray(msg.content.segments)) {
+        msg.content.segments.forEach(segment => {
+          el.appendChild(this.renderSegment(segment));
+        });
+      } else if (msg.content.text) {
+        // Fallback to regular text rendering
         const parsed = this.parseAndRenderContent(msg.content.text);
         if (parsed) {
           parsed.forEach(elem => el.appendChild(elem));
@@ -610,6 +616,8 @@ class GMGUIApp {
           el.appendChild(bubble);
         }
       }
+
+      // Display blocks if available
       if (msg.content.blocks && Array.isArray(msg.content.blocks)) {
         msg.content.blocks.forEach(block => {
           if (block.type === 'html') {
@@ -621,6 +629,12 @@ class GMGUIApp {
           }
         });
       }
+
+      // Display metadata if available
+      if (msg.content.metadata) {
+        const metadataEl = this.renderMetadata(msg.content.metadata);
+        if (metadataEl) el.appendChild(metadataEl);
+      }
     } else {
       const bubble = document.createElement('div');
       bubble.className = 'message-bubble';
@@ -631,6 +645,127 @@ class GMGUIApp {
     div.appendChild(el);
   }
 
+  renderSegment(segment) {
+    const el = document.createElement('div');
+    el.className = `segment segment-${segment.type}`;
+
+    if (segment.type === 'code') {
+      const pre = document.createElement('pre');
+      pre.className = `code-block language-${segment.language || 'text'}`;
+      const code = document.createElement('code');
+      code.textContent = segment.content;
+      pre.appendChild(code);
+      el.appendChild(pre);
+    } else if (segment.type === 'heading') {
+      const tag = `h${Math.min(segment.level, 6)}`;
+      const heading = document.createElement(tag);
+      heading.className = 'response-heading';
+      heading.textContent = segment.content;
+      el.appendChild(heading);
+    } else if (segment.type === 'blockquote') {
+      const quote = document.createElement('blockquote');
+      quote.className = 'response-quote';
+      quote.textContent = segment.content;
+      el.appendChild(quote);
+    } else if (segment.type === 'list_item') {
+      const li = document.createElement('li');
+      li.className = 'response-list-item';
+      li.textContent = segment.content;
+      el.appendChild(li);
+    } else if (segment.type === 'text') {
+      const p = document.createElement('p');
+      p.className = 'response-text';
+      p.innerHTML = segment.content
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+        .replace(/`([^`]+)`/g, '<code>$1</code>');
+      el.appendChild(p);
+    }
+
+    return el;
+  }
+
+  renderMetadata(metadata) {
+    if (!metadata || Object.keys(metadata).every(k => !metadata[k] || metadata[k].length === 0)) {
+      return null;
+    }
+
+    const container = document.createElement('div');
+    container.className = 'response-metadata';
+
+    if (metadata.tools && metadata.tools.length > 0) {
+      const section = document.createElement('div');
+      section.className = 'metadata-section tools';
+      const title = document.createElement('strong');
+      title.textContent = 'Tools Used:';
+      section.appendChild(title);
+      const ul = document.createElement('ul');
+      metadata.tools.forEach(tool => {
+        const li = document.createElement('li');
+        const code = document.createElement('code');
+        code.textContent = tool.name;
+        li.appendChild(code);
+        if (tool.description) {
+          li.appendChild(document.createTextNode(`: ${tool.description}`));
+        }
+        ul.appendChild(li);
+      });
+      section.appendChild(ul);
+      container.appendChild(section);
+    }
+
+    if (metadata.thinking && metadata.thinking.length > 0) {
+      const section = document.createElement('details');
+      section.className = 'metadata-section thinking';
+      const summary = document.createElement('summary');
+      summary.textContent = 'Reasoning';
+      section.appendChild(summary);
+      metadata.thinking.forEach(thought => {
+        const p = document.createElement('p');
+        p.textContent = thought;
+        section.appendChild(p);
+      });
+      container.appendChild(section);
+    }
+
+    if (metadata.subagents && metadata.subagents.length > 0) {
+      const section = document.createElement('div');
+      section.className = 'metadata-section subagents';
+      const title = document.createElement('strong');
+      title.textContent = 'Subagents:';
+      section.appendChild(title);
+      const ul = document.createElement('ul');
+      metadata.subagents.forEach(agent => {
+        const li = document.createElement('li');
+        li.textContent = agent;
+        ul.appendChild(li);
+      });
+      section.appendChild(ul);
+      container.appendChild(section);
+    }
+
+    if (metadata.tasks && metadata.tasks.length > 0) {
+      const section = document.createElement('div');
+      section.className = 'metadata-section tasks';
+      const title = document.createElement('strong');
+      title.textContent = 'Tasks:';
+      section.appendChild(title);
+      const ul = document.createElement('ul');
+      metadata.tasks.forEach(task => {
+        const li = document.createElement('li');
+        li.textContent = task;
+        ul.appendChild(li);
+      });
+      section.appendChild(ul);
+      container.appendChild(section);
+    }
+
+    return container;
+  }
+
   async startNewChat(folderPath) {
     if (!this.selectedAgent) {
       const firstAgent = Array.from(this.agents.keys())[0];

package/static/styles.css

@@ -1418,3 +1418,163 @@ html, body {
     overflow: visible;
   }
 }
+
+/* Rich Response Rendering */
+
+/* Code blocks */
+.segment-code {
+  margin: 1rem 0;
+}
+
+.code-block {
+  background: #f5f5f5;
+  border-left: 4px solid #007acc;
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: #333;
+}
+
+.code-block code {
+  color: inherit;
+  background: none;
+  padding: 0;
+}
+
+/* Inline code */
+p code {
+  background: #f0f0f0;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: 'Courier New', monospace;
+  color: #d73a49;
+  font-size: 0.9em;
+}
+
+/* Headings */
+.response-heading {
+  font-weight: 600;
+  margin: 1rem 0 0.5rem 0;
+  line-height: 1.3;
+}
+
+.segment-heading {
+  margin-top: 1.5rem;
+}
+
+.segment-heading:first-child {
+  margin-top: 0;
+}
+
+/* Blockquotes */
+.response-quote {
+  border-left: 4px solid #ccc;
+  padding-left: 1rem;
+  color: #666;
+  font-style: italic;
+  margin: 0.5rem 0;
+}
+
+/* Lists */
+.response-list-item {
+  margin-left: 2rem;
+  margin-bottom: 0.25rem;
+}
+
+/* Text segments */
+.segment-text {
+  margin: 0.5rem 0;
+}
+
+.response-text {
+  margin: 0.5rem 0;
+  line-height: 1.6;
+  color: #333;
+}
+
+/* Metadata display */
+.response-metadata {
+  background: #f9f9f9;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem 0 0 0;
+  font-size: 0.9rem;
+}
+
+.metadata-section {
+  margin-bottom: 1rem;
+}
+
+.metadata-section:last-child {
+  margin-bottom: 0;
+}
+
+.metadata-section strong {
+  display: block;
+  margin-bottom: 0.5rem;
+  color: #555;
+  font-weight: 600;
+}
+
+.metadata-section ul {
+  list-style: none;
+  padding-left: 1rem;
+  margin: 0;
+}
+
+.metadata-section li {
+  margin-bottom: 0.25rem;
+  padding-left: 0.5rem;
+}
+
+.metadata-section li::before {
+  content: '▸ ';
+  color: #007acc;
+  font-weight: bold;
+  margin-right: 0.5rem;
+}
+
+.metadata-section.tools li code {
+  background: #e8f4f8;
+  color: #0071bc;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+}
+
+.metadata-section.thinking {
+  background: #fff9e6;
+  border: 1px solid #f5e6cc;
+}
+
+.metadata-section.thinking summary {
+  cursor: pointer;
+  font-weight: 600;
+  color: #997700;
+  user-select: none;
+}
+
+.metadata-section.thinking summary:hover {
+  color: #bb9900;
+}
+
+.metadata-section.thinking p {
+  margin: 0.5rem 0;
+  padding-left: 1rem;
+  border-left: 3px solid #f0c674;
+  padding-left: 1rem;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.metadata-section.subagents li::before {
+  content: '🤖 ';
+}
+
+.metadata-section.tasks li::before {
+  content: '✓ ';
+  color: #28a745;
+}