agentgui 1.0.85 → 1.0.86

package/package.json

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

package/server.js

@@ -65,13 +65,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 +84,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 +114,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 +144,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 +183,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 +192,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 +202,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 +216,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');

package/static/index.html

@@ -359,6 +359,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);
+    });
   }
 
   /**
@@ -517,6 +522,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)}`;