agentgui 1.0.14 → 1.0.16

package/acp-launcher.js

@@ -33,19 +33,62 @@ function findBinary(paths) {
   return null;
 }
 
-const RIPPLEUI_SYSTEM_PROMPT = `ALWAYS respond with HTML using RippleUI components. The chat renders HTML. Use: cards (class='card'), alerts (class='alert alert-info'), tables (class='table table-zebra'), badges (class='badge badge-primary'), buttons (class='btn btn-primary'). Wrap all responses in styled HTML with Tailwind CSS utility classes for layout.
-
-RIPPLEUI COMPONENTS:
-Cards: <div class="card bg-base-100 shadow-lg p-6"><h2 class="text-xl font-bold mb-2">Title</h2><p>Content</p></div>
-Alerts: <div class="alert alert-info"><span>Message</span></div>
-Tables: <div class="overflow-x-auto"><table class="table table-zebra"><thead><tr><th>Col</th></tr></thead><tbody><tr><td>Val</td></tr></tbody></table></div>
-Badges: <span class="badge badge-primary">Tag</span>
-Buttons: <button class="btn btn-primary">Action</button>
-Code: <pre class="bg-base-200 p-4 rounded-lg overflow-x-auto"><code>code here</code></pre>
-Lists: <ul class="list-none space-y-2"><li class="p-3 bg-base-200 rounded-lg">Item</li></ul>
-
-Use Tailwind CSS utility classes for layout (flex, grid, gap-4, p-4, rounded, shadow).
-ALWAYS wrap responses in styled HTML. Never send plain unstyled text.`;
+const RIPPLEUI_SYSTEM_PROMPT = `CRITICAL: ALWAYS respond with styled HTML using RippleUI components. This is a web-based chat interface that ONLY renders HTML beautifully. NEVER respond with plain text.
+
+FOR EVERY RESPONSE:
+1. Wrap your ENTIRE response in a container div with proper styling
+2. Use semantic HTML (h1-h6 for headings, p for paragraphs, ul/ol for lists)
+3. Format code in <pre><code> blocks with language class
+4. Use cards for organized information blocks
+5. Use alerts for important information
+6. Use tables for tabular data
+7. Style everything with Tailwind CSS classes
+
+RESPONSE STRUCTURE TEMPLATE:
+\`\`\`html
+<div class="space-y-4 p-4">
+  <h2 class="text-2xl font-bold">Main Heading</h2>
+  <p class="text-gray-700">Introductory text here.</p>
+  
+  <div class="card bg-base-100 shadow-lg p-4">
+    <h3 class="text-lg font-semibold mb-2">Section Title</h3>
+    <p>Content goes here.</p>
+  </div>
+  
+  <pre class="bg-base-200 p-4 rounded-lg overflow-x-auto"><code class="language-javascript">// Code example
+const example = () => { };</code></pre>
+  
+  <ul class="list-none space-y-2 ml-4">
+    <li class="p-2 bg-base-200 rounded">• Item one</li>
+    <li class="p-2 bg-base-200 rounded">• Item two</li>
+  </ul>
+</div>
+\`\`\`
+
+COMPONENT REFERENCE:
+- Cards: <div class="card bg-base-100 shadow-lg p-6"><h3 class="font-bold">Title</h3><p>Content</p></div>
+- Alerts: <div class="alert alert-info"><span>Message</span></div>
+- Tables: <table class="table table-zebra"><thead><tr><th>Header</th></tr></thead><tbody><tr><td>Data</td></tr></tbody></table>
+- Badges: <span class="badge badge-primary">Label</span>
+- Code: <pre class="bg-base-200 p-4 rounded-lg overflow-x-auto"><code class="language-{lang}">{code}</code></pre>
+- Lists: <ul class="list-none space-y-2"><li class="p-2 bg-base-200 rounded">Item</li></ul>
+
+REQUIRED FOR ALL RESPONSES:
+✓ Wrap response in HTML (usually a div with space-y-4 for vertical spacing)
+✓ Use Tailwind classes: text-xl, font-bold, p-4, mb-3, rounded-lg, shadow, etc.
+✓ Always use proper semantic HTML tags
+✓ Format code blocks with language class for syntax highlighting
+✓ Use colors: bg-blue-50, text-gray-700, border-blue-200 for visual hierarchy
+✓ NEVER respond with raw text - ALWAYS wrap in HTML container
+
+EXAMPLES OF GOOD RESPONSES:
+- Questions: Wrap answer in a card with bold question and styled answer
+- Code: Use <pre><code> with language class
+- Lists: Use <ul> or <ol> with proper styling
+- Instructions: Use numbered or bulleted lists in cards
+- Explanations: Use cards for each concept, bold headings, clear spacing
+
+Remember: The user sees raw HTML output. Make it beautiful and readable.`;
 
 export default class ACPConnection {
   constructor() {
@@ -255,13 +298,44 @@ export default class ACPConnection {
     return this.sendRequest('session/set_mode', { sessionId: this.sessionId, modeId });
   }
 
-  async injectSkills() {
+  async injectSkills(additionalContext = '') {
     if (this.printMode) return {};
-    return this.sendRequest('session/skill_inject', {
-      sessionId: this.sessionId,
-      skills: [],
-      notification: [{ type: 'text', text: RIPPLEUI_SYSTEM_PROMPT }]
-    }).catch(() => null);
+    
+    // Combine the system prompt with any additional context
+    const systemPrompt = additionalContext ? `${RIPPLEUI_SYSTEM_PROMPT}\n\n---\n\n${additionalContext}` : RIPPLEUI_SYSTEM_PROMPT;
+    
+    try {
+      const result = await this.sendRequest('session/skill_inject', {
+        sessionId: this.sessionId,
+        skills: [],
+        notification: [{ type: 'text', text: systemPrompt }]
+      });
+      return result;
+    } catch (e) {
+      // skill_inject may not be supported, try alternative methods
+      console.log(`[ACP] skill_inject failed (may not be supported): ${e.message}`);
+      return null;
+    }
+  }
+
+  /**
+   * Inject system prompt as initial context
+   */
+  async injectSystemContext() {
+    if (this.printMode) return {};
+    
+    // Some versions may need the system prompt sent as the first message context
+    try {
+      await this.sendRequest('session/context', {
+        sessionId: this.sessionId,
+        context: RIPPLEUI_SYSTEM_PROMPT,
+        role: 'system'
+      });
+      return { success: true };
+    } catch (e) {
+      // This method may not be supported, silently fail
+      return null;
+    }
   }
 
   async sendPrompt(prompt) {

package/hot-reload-manager.js

@@ -0,0 +1,186 @@
+/**
+ * Hot Reload Manager
+ * Enables live reloading of client code and graceful server restarts without losing connections
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export class HotReloadManager {
+  constructor(staticDir, options = {}) {
+    this.staticDir = staticDir;
+    this.watchedFiles = new Map();
+    this.hotReloadClients = [];
+    this.debounceTimers = new Map();
+    this.debounceDelay = options.debounceDelay || 300;
+    this.enabled = options.enabled !== false;
+  }
+
+  /**
+   * Start watching files for changes
+   */
+  start() {
+    if (!this.enabled) return;
+    
+    try {
+      this.watchDirectory(this.staticDir);
+      console.log('[HotReload] Watching for changes:', this.staticDir);
+    } catch (e) {
+      console.error('[HotReload] Failed to start:', e.message);
+    }
+  }
+
+  /**
+   * Watch directory recursively
+   */
+  watchDirectory(dir) {
+    try {
+      const files = fs.readdirSync(dir, { withFileTypes: true });
+      
+      for (const file of files) {
+        const fullPath = path.join(dir, file.name);
+        
+        if (file.isDirectory()) {
+          this.watchDirectory(fullPath);
+        } else {
+          this.watchFile(fullPath);
+        }
+      }
+    } catch (e) {
+      console.error('[HotReload] Error watching directory:', e.message);
+    }
+  }
+
+  /**
+   * Watch individual file for changes
+   */
+  watchFile(filePath) {
+    if (this.watchedFiles.has(filePath)) return;
+
+    try {
+      fs.watchFile(filePath, { interval: 100 }, (curr, prev) => {
+        if (curr.mtime > prev.mtime) {
+          this.onFileChanged(filePath);
+        }
+      });
+
+      this.watchedFiles.set(filePath, true);
+    } catch (e) {
+      console.error('[HotReload] Error watching file:', e.message);
+    }
+  }
+
+  /**
+   * Handle file change with debouncing
+   */
+  onFileChanged(filePath) {
+    // Clear existing timer for this file
+    if (this.debounceTimers.has(filePath)) {
+      clearTimeout(this.debounceTimers.get(filePath));
+    }
+
+    // Set new debounced timer
+    const timer = setTimeout(() => {
+      this.debounceTimers.delete(filePath);
+      const relPath = path.relative(this.staticDir, filePath);
+      
+      console.log(`[HotReload] File changed: ${relPath}`);
+      this.broadcastReload();
+    }, this.debounceDelay);
+
+    this.debounceTimers.set(filePath, timer);
+  }
+
+  /**
+   * Register a WebSocket client for hot reload
+   */
+  registerClient(ws) {
+    if (!this.enabled) return;
+    this.hotReloadClients.push(ws);
+    
+    ws.on('close', () => {
+      const idx = this.hotReloadClients.indexOf(ws);
+      if (idx > -1) this.hotReloadClients.splice(idx, 1);
+    });
+  }
+
+  /**
+   * Broadcast reload signal to all connected clients
+   */
+  broadcastReload() {
+    const message = JSON.stringify({ type: 'reload', timestamp: Date.now() });
+    
+    for (const ws of this.hotReloadClients) {
+      if (ws.readyState === 1) { // WebSocket.OPEN
+        try {
+          ws.send(message);
+        } catch (e) {
+          // Client may have disconnected
+        }
+      }
+    }
+  }
+
+  /**
+   * Cleanup watchers
+   */
+  stop() {
+    for (const filePath of this.watchedFiles.keys()) {
+      try {
+        fs.unwatchFile(filePath);
+      } catch (e) {}
+    }
+    
+    for (const timer of this.debounceTimers.values()) {
+      clearTimeout(timer);
+    }
+    
+    this.watchedFiles.clear();
+    this.debounceTimers.clear();
+    this.hotReloadClients = [];
+  }
+
+  /**
+   * Get HTML snippet to inject for hot reload
+   */
+  getClientScript(baseUrl = '') {
+    if (!this.enabled) return '';
+
+    return `
+<script>
+(function() {
+  const baseUrl = '${baseUrl}';
+  const ws = new WebSocket((location.protocol === 'https:' ? 'wss:' : 'ws:') + '//' + location.host + baseUrl + '/hot-reload');
+  
+  ws.onmessage = function(event) {
+    try {
+      const data = JSON.parse(event.data);
+      if (data.type === 'reload') {
+        console.log('[HotReload] Reloading page...');
+        location.reload();
+      }
+    } catch (e) {
+      console.error('[HotReload] Error parsing message:', e);
+    }
+  };
+  
+  ws.onerror = function(e) {
+    console.log('[HotReload] WebSocket error:', e);
+  };
+  
+  ws.onclose = function() {
+    console.log('[HotReload] Connection closed, will attempt to reconnect...');
+    setTimeout(function() {
+      location.reload();
+    }, 2000);
+  };
+})();
+</script>
+    `;
+  }
+}
+
+export default HotReloadManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "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;
@@ -31,7 +32,9 @@ async function getACP(agentId, cwd) {
     await conn.initialize();
     await conn.newSession(cwd);
     await conn.setSessionMode('bypassPermissions');
-    await conn.injectSkills(['html_rendering', 'image_display', 'scrot', 'fs_access']);
+    // Inject system prompt to ensure HTML/RippleUI formatting
+    await conn.injectSkills();
+    await conn.injectSystemContext();
     acpPool.set(agentId, conn);
     console.log(`ACP connection ready for ${agentId} in ${cwd}`);
     return conn;
@@ -313,17 +316,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 +338,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

@@ -525,10 +525,15 @@ class GMGUIApp {
 
   looksLikeHtml(text) {
     const trimmed = text.trim();
+    // Check for HTML tags at the start
     if (/^<[a-z][\s\S]*>/i.test(trimmed)) return true;
-    if (/<\/(div|span|p|table|ul|ol|h[1-6]|section|article|header|footer|nav|main|aside|details|summary|figure|figcaption|blockquote|pre|code|a|strong|em|img|br|hr)>/i.test(trimmed)) return true;
+    // Check for closing tags of common HTML elements
+    if (/<\/(div|span|p|table|ul|ol|h[1-6]|section|article|header|footer|nav|main|aside|details|summary|figure|figcaption|blockquote|pre|code|a|strong|em|img|br|hr|button|input|form|label)>/i.test(trimmed)) return true;
+    // Check for Tailwind/RippleUI classes (strong indicator of HTML)
+    if (/class\s*=\s*["'][^"']*(?:card|alert|badge|btn|table|space-y|p-\d+|text-|bg-|rounded|shadow)/.test(trimmed)) return true;
+    // Count HTML tags
     const tagCount = (trimmed.match(/<[a-z][^>]*>/gi) || []).length;
-    if (tagCount >= 3) return true;
+    if (tagCount >= 2) return true; // Lower threshold for HTML detection
     return false;
   }
 
@@ -599,7 +604,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 +621,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 +634,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 +650,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, '&amp;')
+        .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;
+}