agentgui 1.0.86 → 1.0.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.86",
+  "version": "1.0.87",
   "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,54 @@ 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') {
+            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
    */