agentgui 1.0.85 → 1.0.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.85",
+  "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();
@@ -65,13 +68,16 @@ const server = http.createServer(async (req, res) => {
   const routePath = req.url.slice(BASE_URL.length) || '/';
 
   try {
-    if (routePath === '/api/conversations' && req.method === 'GET') {
+    // Remove query parameters from routePath for matching
+    const pathOnly = routePath.split('?')[0];
+
+    if (pathOnly === '/api/conversations' && req.method === 'GET') {
       res.writeHead(200, { 'Content-Type': 'application/json' });
       res.end(JSON.stringify({ conversations: queries.getConversationsList() }));
       return;
     }
 
-    if (routePath === '/api/conversations' && req.method === 'POST') {
+    if (pathOnly === '/api/conversations' && req.method === 'POST') {
       const body = await parseBody(req);
       const conversation = queries.createConversation(body.agentId, body.title);
       queries.createEvent('conversation.created', { agentId: body.agentId }, conversation.id);
@@ -81,7 +87,7 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
-    const convMatch = routePath.match(/^\/api\/conversations\/([^/]+)$/);
+    const convMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)$/);
     if (convMatch) {
       if (req.method === 'GET') {
         const conv = queries.getConversation(convMatch[1]);
@@ -111,7 +117,7 @@ const server = http.createServer(async (req, res) => {
       }
     }
 
-    const messagesMatch = routePath.match(/^\/api\/conversations\/([^/]+)\/messages$/);
+    const messagesMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/messages$/);
     if (messagesMatch) {
       if (req.method === 'GET') {
         const url = new URL(req.url, 'http://localhost');
@@ -141,7 +147,7 @@ const server = http.createServer(async (req, res) => {
       }
     }
 
-    const streamMatch = routePath.match(/^\/api\/conversations\/([^/]+)\/stream$/);
+    const streamMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/stream$/);
     if (streamMatch && req.method === 'POST') {
       const conversationId = streamMatch[1];
       const body = await parseBody(req);
@@ -180,7 +186,7 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
-    const messageMatch = routePath.match(/^\/api\/conversations\/([^/]+)\/messages\/([^/]+)$/);
+    const messageMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/messages\/([^/]+)$/);
     if (messageMatch && req.method === 'GET') {
       const msg = queries.getMessage(messageMatch[2]);
       if (!msg || msg.conversationId !== messageMatch[1]) { res.writeHead(404, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ error: 'Not found' })); return; }
@@ -189,7 +195,7 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
-    const sessionMatch = routePath.match(/^\/api\/sessions\/([^/]+)$/);
+    const sessionMatch = pathOnly.match(/^\/api\/sessions\/([^/]+)$/);
     if (sessionMatch && req.method === 'GET') {
       const sess = queries.getSession(sessionMatch[1]);
       if (!sess) { res.writeHead(404, { 'Content-Type': 'application/json' }); res.end(JSON.stringify({ error: 'Not found' })); return; }
@@ -199,8 +205,8 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
-    if (routePath.match(/^\/api\/conversations\/([^/]+)\/sessions\/latest$/) && req.method === 'GET') {
-      const convId = routePath.match(/^\/api\/conversations\/([^/]+)\/sessions\/latest$/)[1];
+    if (pathOnly.match(/^\/api\/conversations\/([^/]+)\/sessions\/latest$/) && req.method === 'GET') {
+      const convId = pathOnly.match(/^\/api\/conversations\/([^/]+)\/sessions\/latest$/)[1];
       const latestSession = queries.getLatestSession(convId);
       if (!latestSession) {
         res.writeHead(200, { 'Content-Type': 'application/json' });
@@ -213,7 +219,7 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
-    const executionMatch = routePath.match(/^\/api\/sessions\/([^/]+)\/execution$/);
+    const executionMatch = pathOnly.match(/^\/api\/sessions\/([^/]+)\/execution$/);
     if (executionMatch && req.method === 'GET') {
       const sessionId = executionMatch[1];
       const url = new URL(req.url, 'http://localhost');
@@ -383,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
@@ -500,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 {
@@ -359,6 +360,106 @@
       font-size: 0.7rem;
     }
 
+    /* Conversation display */
+    .conversation-header {
+      padding: 1rem;
+      border-bottom: 1px solid var(--color-border);
+      margin-bottom: 1rem;
+    }
+
+    .conversation-header h2 {
+      margin: 0 0 0.5rem 0;
+      font-size: 1.5rem;
+    }
+
+    .conversation-header p {
+      margin: 0;
+      font-size: 0.875rem;
+      color: var(--color-text-secondary);
+    }
+
+    .conversation-messages {
+      padding: 1rem;
+    }
+
+    .message {
+      margin-bottom: 1rem;
+      padding: 1rem;
+      border-radius: 0.375rem;
+      background-color: var(--color-bg-secondary);
+      border-left: 3px solid var(--color-primary);
+    }
+
+    .message-user {
+      border-left-color: var(--color-primary);
+    }
+
+    .message-assistant {
+      border-left-color: var(--color-success);
+    }
+
+    .message-role {
+      font-weight: 600;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      color: var(--color-text-secondary);
+      margin-bottom: 0.5rem;
+    }
+
+    .message-content {
+      font-size: 0.9rem;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .message-timestamp {
+      font-size: 0.75rem;
+      color: var(--color-text-secondary);
+      margin-top: 0.5rem;
+    }
+
+    .message-blocks {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .message-text {
+      line-height: 1.6;
+      word-break: break-word;
+      white-space: pre-wrap;
+    }
+
+    .message-code {
+      background-color: var(--color-bg-code);
+      border-radius: 0.375rem;
+      padding: 0.75rem;
+      overflow-x: auto;
+      margin: 0.5rem 0;
+    }
+
+    .message-code pre {
+      margin: 0;
+      font-family: 'Courier New', monospace;
+      font-size: 0.85rem;
+      color: #e0e0e0;
+    }
+
+    .message-tool {
+      background-color: var(--color-primary);
+      color: white;
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      font-size: 0.75rem;
+      display: inline-block;
+      margin: 0.25rem 0;
+    }
+
+    .text-secondary {
+      color: var(--color-text-secondary);
+    }
+
     /* Responsive */
     @media (max-width: 768px) {
       .layout-with-sidebar {

package/static/js/client.js

@@ -170,6 +170,11 @@ class AgentGUIClient {
 
     // Listen for new conversation creation
     window.addEventListener('create-new-conversation', () => this.createNewConversation());
+
+    // Listen for conversation selection
+    window.addEventListener('conversation-selected', (event) => {
+      this.loadConversationMessages(event.detail.conversationId);
+    });
   }
 
   /**
@@ -266,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',
@@ -319,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
    */
@@ -517,6 +584,94 @@ class AgentGUIClient {
     }
   }
 
+  /**
+   * Load and display conversation messages
+   */
+  async loadConversationMessages(conversationId) {
+    try {
+      this.state.currentConversation = { id: conversationId };
+
+      // Fetch conversation details
+      const convResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}`);
+      const { conversation } = await convResponse.json();
+
+      // Fetch messages
+      const messagesResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/messages`);
+      if (!messagesResponse.ok) {
+        throw new Error(`Failed to fetch messages: ${messagesResponse.status}`);
+      }
+      const messagesData = await messagesResponse.json();
+
+      // Clear output and display conversation header
+      const outputEl = document.getElementById('output');
+      if (outputEl) {
+        outputEl.innerHTML = `
+          <div class="conversation-header">
+            <h2>${this.escapeHtml(conversation.title || 'Conversation')}</h2>
+            <p class="text-secondary">${conversation.agentType || 'unknown'} • ${new Date(conversation.created_at).toLocaleDateString()}</p>
+          </div>
+          <div class="conversation-messages">
+            ${this.renderMessages(messagesData.messages || [])}
+          </div>
+        `;
+      }
+    } catch (error) {
+      console.error('Failed to load conversation messages:', error);
+      this.showError('Failed to load conversation: ' + error.message);
+    }
+  }
+
+  /**
+   * Render messages for display
+   */
+  renderMessages(messages) {
+    if (messages.length === 0) {
+      return '<p class="text-secondary">No messages in this conversation yet</p>';
+    }
+
+    return messages.map(msg => {
+      let contentHtml = '';
+
+      // Handle different content types
+      if (typeof msg.content === 'string') {
+        contentHtml = `<div class="message-text">${this.escapeHtml(msg.content)}</div>`;
+      } else if (msg.content && typeof msg.content === 'object' && msg.content.type === 'claude_execution') {
+        // Handle Claude execution blocks
+        contentHtml = '<div class="message-blocks">';
+        if (msg.content.blocks && Array.isArray(msg.content.blocks)) {
+          msg.content.blocks.forEach(block => {
+            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>`;
+            } else if (block.type === 'tool_use') {
+              contentHtml += `<div class="message-tool">[Tool: ${this.escapeHtml(block.name)}]</div>`;
+            }
+          });
+        }
+        contentHtml += '</div>';
+      } else {
+        contentHtml = `<div class="message-text">${this.escapeHtml(JSON.stringify(msg.content))}</div>`;
+      }
+
+      return `
+        <div class="message message-${msg.role}">
+          <div class="message-role">${msg.role.charAt(0).toUpperCase() + msg.role.slice(1)}</div>
+          ${contentHtml}
+          <div class="message-timestamp">${new Date(msg.created_at).toLocaleString()}</div>
+        </div>
+      `;
+    }).join('');
+  }
+
+  /**
+   * Escape HTML to prevent XSS
+   */
+  escapeHtml(text) {
+    const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    return text.replace(/[&<>"']/g, c => map[c]);
+  }
+
   /**
    * Show error message
    */

package/static/js/conversations.js

@@ -65,6 +65,7 @@ class ConversationManager {
   createConversationItem(conv) {
     const li = document.createElement('li');
     li.className = 'conversation-item';
+    li.dataset.convId = conv.id;
     if (conv.id === this.activeId) li.classList.add('active');
 
     const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;