agentgui 1.0.86 → 1.0.88

package/.prd

@@ -0,0 +1,44 @@
+HTML Code Block Rendering Implementation
+
+GOAL: Render HTML code blocks as actual HTML elements instead of escaped text
+
+DEPENDENCIES:
+- streaming-renderer.js renderCode() method modification
+- client.js renderMessageContent() method modification
+- client.js renderMessages() method modification
+
+COMPLETED ITEMS:
+
+1. DONE: Update streaming-renderer.js renderCode() to detect HTML blocks
+   - Check if language === 'html' ✓
+   - If HTML: render content with innerHTML (Claude responses trusted) ✓
+   - If not HTML: keep existing escaped text rendering ✓
+   - Wrap HTML output in styled container ✓
+
+2. DONE: Update client.js renderMessageContent() to handle HTML code blocks
+   - Detect block.type === 'code_block' AND block.language === 'html' ✓
+   - If HTML: render with innerHTML in wrapper div ✓
+   - If not HTML: escape and display as text ✓
+
+3. DONE: Update client.js renderMessages() to handle HTML code blocks
+   - Detect block.type === 'code_block' AND block.language === 'html' ✓
+   - If HTML: render with innerHTML in wrapper div ✓
+   - If not HTML: escape and display as text ✓
+
+4. DONE: Style HTML rendered blocks appropriately
+   - Add CSS classes for container styling ✓
+   - Ensure proper padding and borders ✓
+   - Add label indicating "Rendered HTML" ✓
+
+5. DONE: Test implementation
+   - Created test cases for HTML detection logic ✓
+   - Verified HTML detection correctly identifies html language ✓
+   - Verified non-HTML code blocks use escaped rendering ✓
+   - Confirmed no breaking changes to existing logic ✓
+
+6. DONE: Commit changes
+   - Stage modified files ✓
+   - Create meaningful commit message ✓
+   - Commit hash: 13ee551 ✓
+
+ALL WORK COMPLETED ✓

package/package.json

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

package/server.js

@@ -7,6 +7,9 @@ import { execSync } from 'child_process';
 import { queries } from './database.js';
 import { runClaudeWithStreaming } from './lib/claude-runner.js';
 
+// System prompt for Claude to format responses as HTML
+const SYSTEM_PROMPT = `Always write your responses in ripple-ui enhanced HTML. Avoid overriding light/dark mode CSS variables. Use all the benefits of HTML to express technical details with proper semantic markup, tables, code blocks, headings, and lists. Write clean, well-structured HTML that respects the existing design system.`;
+
 // Debug logging to file
 const debugLog = (msg) => {
   const timestamp = new Date().toISOString();
@@ -386,7 +389,10 @@ async function processMessageWithStreaming(conversationId, messageId, sessionId,
       print: true
     };
 
-    const outputs = await runClaudeWithStreaming(content, cwd, actualAgentId, config);
+    // Prepend system prompt to user content
+    const promptWithSystem = `${SYSTEM_PROMPT}\n\n${content}`;
+
+    const outputs = await runClaudeWithStreaming(promptWithSystem, cwd, actualAgentId, config);
     debugLog(`[stream] Claude returned ${outputs.length} streaming outputs`);
 
     // Process streaming outputs similar to processMessage
@@ -503,7 +509,9 @@ async function processMessage(conversationId, messageId, content, agentId) {
     const actualAgentId = agentId || 'claude-code';
 
     debugLog(`[processMessage] Calling runClaudeWithStreaming with prompt: "${content.substring(0, 50)}..."`);
-    const outputs = await runClaudeWithStreaming(content, cwd, actualAgentId);
+    // Prepend system prompt to user content
+    const promptWithSystem = `${SYSTEM_PROMPT}\n\n${content}`;
+    const outputs = await runClaudeWithStreaming(promptWithSystem, cwd, actualAgentId);
     debugLog(`[processMessage] Claude returned ${outputs.length} outputs`);
 
     // Collect all message blocks to preserve full execution details

package/static/index.html

@@ -74,6 +74,7 @@
       background-color: var(--color-bg-secondary);
       border-right: 1px solid var(--color-border);
       overflow: hidden;
+      min-height: 0;
     }
 
     .sidebar-header {

package/static/js/client.js

@@ -271,8 +271,25 @@ class AgentGUIClient {
       agentId: data.agentId,
       startTime: Date.now()
     };
+    this.state.currentConversation = { id: data.conversationId };
     this.state.sessionEvents = [];
-    this.renderer.clear();
+
+    // Auto-select the streaming conversation in the sidebar
+    if (window.conversationManager) {
+      window.conversationManager.select(data.conversationId);
+    }
+
+    // Load the conversation to display it in real-time
+    this.loadConversationMessages(data.conversationId).then(() => {
+      // Clear output and prepare for streaming
+      const outputEl = document.getElementById('output');
+      if (outputEl) {
+        outputEl.innerHTML = '';
+      }
+    }).catch(err => {
+      console.error('Failed to load conversation during streaming:', err);
+      this.renderer.clear();
+    });
 
     this.renderer.queueEvent({
       type: 'streaming_start',
@@ -324,9 +341,68 @@ class AgentGUIClient {
    * Handle message created
    */
   handleMessageCreated(data) {
+    // If the message is for the currently displayed conversation, append it to the output
+    if (data.conversationId === this.state.currentConversation?.id && data.message) {
+      const outputEl = document.querySelector('.conversation-messages');
+      if (outputEl) {
+        const messageHtml = `
+          <div class="message message-${data.message.role}">
+            <div class="message-role">${data.message.role.charAt(0).toUpperCase() + data.message.role.slice(1)}</div>
+            ${this.renderMessageContent(data.message.content)}
+            <div class="message-timestamp">${new Date(data.message.created_at).toLocaleString()}</div>
+          </div>
+        `;
+        outputEl.insertAdjacentHTML('beforeend', messageHtml);
+        // Scroll to bottom
+        const scrollContainer = document.getElementById('output-scroll');
+        if (scrollContainer) {
+          scrollContainer.scrollTop = scrollContainer.scrollHeight;
+        }
+      }
+    }
     this.emit('message:created', data);
   }
 
+  /**
+   * Render message content based on type
+   */
+  renderMessageContent(content) {
+    if (typeof content === 'string') {
+      return `<div class="message-text">${this.escapeHtml(content)}</div>`;
+    } else if (content && typeof content === 'object' && content.type === 'claude_execution') {
+      let html = '<div class="message-blocks">';
+      if (content.blocks && Array.isArray(content.blocks)) {
+        content.blocks.forEach(block => {
+          if (block.type === 'text') {
+            html += `<div class="message-text">${this.escapeHtml(block.text)}</div>`;
+          } else if (block.type === 'code_block') {
+            // Render HTML code blocks as actual HTML elements
+            if (block.language === 'html') {
+              html += `
+                <div class="message-code">
+                  <div class="html-rendered-label mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
+                    Rendered HTML
+                  </div>
+                  <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
+                    ${block.code}
+                  </div>
+                </div>
+              `;
+            } else {
+              html += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
+            }
+          } else if (block.type === 'tool_use') {
+            html += `<div class="message-tool">[Tool: ${this.escapeHtml(block.name)}]</div>`;
+          }
+        });
+      }
+      html += '</div>';
+      return html;
+    } else {
+      return `<div class="message-text">${this.escapeHtml(JSON.stringify(content))}</div>`;
+    }
+  }
+
   /**
    * Start execution
    */
@@ -581,7 +657,21 @@ class AgentGUIClient {
             if (block.type === 'text') {
               contentHtml += `<div class="message-text">${this.escapeHtml(block.text)}</div>`;
             } else if (block.type === 'code_block') {
-              contentHtml += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
+              // Render HTML code blocks as actual HTML elements
+              if (block.language === 'html') {
+                contentHtml += `
+                  <div class="message-code">
+                    <div class="html-rendered-label mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
+                      Rendered HTML
+                    </div>
+                    <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
+                      ${block.code}
+                    </div>
+                  </div>
+                `;
+              } else {
+                contentHtml += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
+              }
             } else if (block.type === 'tool_use') {
               contentHtml += `<div class="message-tool">[Tool: ${this.escapeHtml(block.name)}]</div>`;
             }

package/static/js/streaming-renderer.js

@@ -595,9 +595,21 @@ class StreamingRenderer {
     const code = event.code || event.content || '';
     const language = event.language || 'plaintext';
 
-    div.innerHTML = `
-      <pre class="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
-    `;
+    // Render HTML code blocks as actual HTML elements
+    if (language === 'html') {
+      div.innerHTML = `
+        <div class="html-rendered-container mb-2 p-2 bg-blue-50 dark:bg-blue-900 rounded border border-blue-200 dark:border-blue-700 text-xs text-blue-700 dark:text-blue-300">
+          Rendered HTML
+        </div>
+        <div class="html-content bg-white dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
+          ${code}
+        </div>
+      `;
+    } else {
+      div.innerHTML = `
+        <pre class="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
+      `;
+    }
     return div;
   }