agentgui 1.0.30 → 1.0.32

package/database.js

@@ -245,16 +245,34 @@ export const queries = {
   },
 
   getMessage(id) {
-    const stmt = db.prepare('SELECT * FROM messages WHERE id = ?');
-    return stmt.get(id);
-  },
-
-  getConversationMessages(conversationId) {
-    const stmt = db.prepare(
-      'SELECT * FROM messages WHERE conversationId = ? ORDER BY created_at ASC'
-    );
-    return stmt.all(conversationId);
-  },
+     const stmt = db.prepare('SELECT * FROM messages WHERE id = ?');
+     const msg = stmt.get(id);
+     if (msg && typeof msg.content === 'string') {
+       try {
+         msg.content = JSON.parse(msg.content);
+       } catch (_) {
+         // If it's not JSON, leave it as string
+       }
+     }
+     return msg;
+   },
+
+   getConversationMessages(conversationId) {
+     const stmt = db.prepare(
+       'SELECT * FROM messages WHERE conversationId = ? ORDER BY created_at ASC'
+     );
+     const messages = stmt.all(conversationId);
+     return messages.map(msg => {
+       if (typeof msg.content === 'string') {
+         try {
+           msg.content = JSON.parse(msg.content);
+         } catch (_) {
+           // If it's not JSON, leave it as string
+         }
+       }
+       return msg;
+     });
+   },
 
   createSession(conversationId) {
     const id = generateId('sess');
@@ -499,19 +517,25 @@ export const queries = {
             if (content && !content.startsWith('[{"tool_use_id"')) {
               messages.push({ id: obj.uuid || generateId('msg'), role: 'user', content, created_at: new Date(obj.timestamp).getTime() });
             }
-          } else if (obj.type === 'assistant' && obj.message?.content) {
-            let text = '';
-            const content = obj.message.content;
-            if (Array.isArray(content)) {
-              for (const c of content) {
-                if (c.type === 'text' && c.text) text += c.text;
-              }
-            } else if (typeof content === 'string') {
-              text = content;
-            }
-            if (text) {
-              messages.push({ id: obj.uuid || generateId('msg'), role: 'assistant', content: text, created_at: new Date(obj.timestamp).getTime() });
-            }
+           } else if (obj.type === 'assistant' && obj.message?.content) {
+             let text = '';
+             const content = obj.message.content;
+             if (Array.isArray(content)) {
+               // CRITICAL FIX: Join text blocks with newlines to preserve separation
+               const textBlocks = [];
+               for (const c of content) {
+                 if (c.type === 'text' && c.text) {
+                   textBlocks.push(c.text);
+                 }
+               }
+               // Join with double newline to preserve logical separation
+               text = textBlocks.join('\n\n');
+             } else if (typeof content === 'string') {
+               text = content;
+             }
+             if (text) {
+               messages.push({ id: obj.uuid || generateId('msg'), role: 'assistant', content: text, created_at: new Date(obj.timestamp).getTime() });
+             }
           }
         } catch (_) {}
       }

package/package.json

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

package/static/app.js

@@ -96,10 +96,15 @@ class GMGUIApp {
       console.error('[CRITICAL] GMGUIApp.init() failed:', err);
       console.error('[CRITICAL] Stack:', err.stack);
       throw err;
-    });
-  }
+     });
+   }
+
+   // Helper for authenticated API calls - ensures credentials sent for proxy auth
+   async apiFetch(url, options = {}) {
+     return fetch(url, { credentials: 'include', ...options });
+   }
 
-  async init() {
+   async init() {
     console.log('[DEBUG] Init: Starting initialization');
     console.log('[DEBUG] Init: BASE_URL =', BASE_URL);
     console.log('[DEBUG] Init: Window width:', window.innerWidth);
@@ -155,7 +160,7 @@ class GMGUIApp {
   async verifyConsistency() {
     // Silent consistency check - only log if mismatch found
     try {
-      const res = await fetch(BASE_URL + '/api/conversations');
+      const res = await this.apiFetch(BASE_URL + '/api/conversations');
       if (!res.ok) return;
       
       const data = await res.json();
@@ -176,7 +181,7 @@ class GMGUIApp {
 
   async autoImportClaudeCode() {
     try {
-      await fetch(BASE_URL + '/api/import/claude-code');
+      await this.apiFetch(BASE_URL + '/api/import/claude-code');
     } catch (e) {
       console.error('autoImportClaudeCode:', e);
     }
@@ -356,7 +361,7 @@ class GMGUIApp {
 
   async fetchHome() {
     try {
-      const res = await fetch(BASE_URL + '/api/home');
+      const res = await this.apiFetch(BASE_URL + '/api/home');
       if (res.ok) {
         const data = await res.json();
         localStorage.setItem('gmgui-home', data.home);
@@ -391,35 +396,129 @@ class GMGUIApp {
     return p.startsWith('~') ? p.replace('~', home) : p;
   }
 
-  setupEventListeners() {
-    window.addEventListener('focus', () => {
-      this.autoImportClaudeCode().then(() => {
-        this.fetchConversations().then(() => this.renderChatHistory());
-      });
-    });
-    const input = document.getElementById('messageInput');
-    if (input) {
-      input.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-          e.preventDefault();
-          this.sendMessage();
+   setupEventListeners() {
+     window.addEventListener('focus', () => {
+       this.autoImportClaudeCode().then(() => {
+         this.fetchConversations().then(() => this.renderChatHistory());
+       });
+     });
+     
+     // THEME CHANGE LISTENER: Update HTML blocks when theme changes
+     // Listen for theme changes on document element
+     const themeObserver = new MutationObserver(() => {
+       console.log('[THEME] Theme changed, updating HTML blocks');
+       this.updateHtmlBlockThemes();
+     });
+     
+     themeObserver.observe(document.documentElement, {
+       attributes: true,
+       attributeFilter: ['data-theme']
+     });
+     
+     // Also listen for system theme changes
+     if (window.matchMedia) {
+       window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+         console.log('[THEME] System theme changed, updating HTML blocks');
+         this.updateHtmlBlockThemes();
+       });
+     }
+     
+     const input = document.getElementById('messageInput');
+     if (input) {
+       input.addEventListener('keydown', (e) => {
+         if (e.key === 'Enter' && !e.shiftKey) {
+           e.preventDefault();
+           this.sendMessage();
+         }
+       });
+       input.addEventListener('input', () => this.updateSendButtonState());
+     }
+     document.getElementById('autoScroll')?.addEventListener('change', (e) => {
+       this.settings.autoScroll = e.target.checked;
+       this.saveSettings();
+     });
+     document.getElementById('connectTimeout')?.addEventListener('change', (e) => {
+       this.settings.connectTimeout = parseInt(e.target.value) * 1000;
+       this.saveSettings();
+     });
+   }
+   
+    updateHtmlBlockThemes() {
+      // Update theme attribute and CSS for all existing HTML blocks
+      const currentTheme = document.documentElement.getAttribute('data-theme') || 
+                          (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+      
+      // CRITICAL: Remove old theme styles and inject new ones for all HTML blocks
+      document.querySelectorAll('.html-content').forEach(content => {
+        // Remove any existing theme style tags
+        const oldStyles = content.querySelectorAll('style');
+        oldStyles.forEach(style => {
+          if (style.textContent.includes('.html-content')) {
+            style.remove();
+          }
+        });
+        
+        // Inject new theme-aware CSS
+        const themeCSS = currentTheme === 'dark' 
+          ? `<style>
+               .html-content { 
+                 color: #f8fafc; 
+                 background: transparent;
+               }
+               .html-content p { color: #cbd5e1; }
+               .html-content h1, .html-content h2, .html-content h3, 
+               .html-content h4, .html-content h5, .html-content h6 { 
+                 color: #f8fafc; 
+               }
+               .html-content a { color: #6366f1; }
+               .html-content code { color: #c7d2fe; background: rgba(0,0,0,0.3); }
+               .html-content pre { background: rgba(0,0,0,0.5); color: #e0e7ff; }
+               .html-content table { border-color: #334155; }
+               .html-content th { background: #1a202c; color: #f8fafc; }
+               .html-content td { border-color: #334155; }
+               .html-content blockquote { border-color: #334155; color: #cbd5e1; }
+               .html-content ul, .html-content ol { color: #cbd5e1; }
+               .html-content li { color: #cbd5e1; }
+            </style>`
+          : `<style>
+               .html-content { 
+                 color: #1d2129; 
+                 background: transparent;
+               }
+               .html-content p { color: #475569; }
+               .html-content h1, .html-content h2, .html-content h3, 
+               .html-content h4, .html-content h5, .html-content h6 { 
+                 color: #1d2129; 
+               }
+               .html-content a { color: #4f46e5; }
+               .html-content code { color: #6366f1; background: rgba(99,102,241,0.1); }
+               .html-content pre { background: #f3f4f6; color: #1d2129; }
+               .html-content table { border-color: #e5e7eb; }
+               .html-content th { background: #f9fafb; color: #1d2129; }
+               .html-content td { border-color: #e5e7eb; }
+               .html-content blockquote { border-color: #e5e7eb; color: #475569; }
+               .html-content ul, .html-content ol { color: #475569; }
+               .html-content li { color: #475569; }
+            </style>`;
+        
+        // Create a temporary wrapper to parse and insert the style
+        const tempDiv = document.createElement('div');
+        tempDiv.innerHTML = themeCSS;
+        const styleEl = tempDiv.querySelector('style');
+        if (styleEl) {
+          content.insertBefore(styleEl.cloneNode(true), content.firstChild);
         }
+        
+        // Update data-theme attribute
+        content.setAttribute('data-theme', currentTheme);
       });
-      input.addEventListener('input', () => this.updateSendButtonState());
+      
+      console.log(`[THEME] Updated ${document.querySelectorAll('.html-content').length} HTML blocks to ${currentTheme} mode`);
     }
-    document.getElementById('autoScroll')?.addEventListener('change', (e) => {
-      this.settings.autoScroll = e.target.checked;
-      this.saveSettings();
-    });
-    document.getElementById('connectTimeout')?.addEventListener('change', (e) => {
-      this.settings.connectTimeout = parseInt(e.target.value) * 1000;
-      this.saveSettings();
-    });
-  }
 
   async fetchAgents() {
     try {
-      const res = await fetch(BASE_URL + '/api/agents');
+      const res = await this.apiFetch(BASE_URL + '/api/agents');
       const data = await res.json();
       if (data.agents) {
         data.agents.forEach(a => this.agents.set(a.id, a));
@@ -432,7 +531,7 @@ class GMGUIApp {
   async fetchConversations() {
     try {
       console.log('[DEBUG] fetchConversations: Starting fetch from', BASE_URL + '/api/conversations');
-      const res = await fetch(BASE_URL + '/api/conversations');
+      const res = await this.apiFetch(BASE_URL + '/api/conversations');
       console.log('[DEBUG] fetchConversations: Response status:', res.status);
       
       if (!res.ok) {
@@ -470,7 +569,7 @@ class GMGUIApp {
 
   async fetchMessages(conversationId) {
     try {
-      const res = await fetch(`${BASE_URL}/api/conversations/${conversationId}/messages`);
+      const res = await this.apiFetch(`${BASE_URL}/api/conversations/${conversationId}/messages`);
       const data = await res.json();
       return data.messages || [];
     } catch (e) {
@@ -589,7 +688,7 @@ class GMGUIApp {
 
   async deleteConversation(id) {
     try {
-      const res = await fetch(`${BASE_URL}/api/conversations/${id}`, { method: 'DELETE' });
+      const res = await this.apiFetch(`${BASE_URL}/api/conversations/${id}`, { method: 'DELETE' });
       if (!res.ok) {
         console.error('deleteConversation failed:', res.status);
         return;
@@ -745,25 +844,129 @@ class GMGUIApp {
     return elements.length > 0 ? elements : null;
   }
 
-  renderTextOrHtml(text) {
-    if (this.looksLikeHtml(text)) {
-      return this.createSandboxedHtml(text);
-    }
-    const bubble = document.createElement('div');
-    bubble.className = 'message-bubble';
-    bubble.textContent = text;
-    return bubble;
-  }
-
-  createSandboxedHtml(rawHtml) {
-    const wrap = document.createElement('div');
-    wrap.className = 'html-block rendered-html';
-    const content = document.createElement('div');
-    content.className = 'html-content';
-    content.innerHTML = this.sanitizeHtml(rawHtml);
-    wrap.appendChild(content);
-    return wrap;
-  }
+   renderTextOrHtml(text) {
+     if (this.looksLikeHtml(text)) {
+       return this.createSandboxedHtml(text);
+     }
+     
+     // CRITICAL FIX: Don't bundle all text into one bubble
+     // Try splitting by paragraph breaks first (double newlines)
+     let parts = text.split('\n\n').filter(p => p.trim());
+     
+     // If no paragraphs found, try splitting by single newlines
+     // (handles imported messages that may not have proper paragraph breaks)
+     if (parts.length === 1) {
+       const singleNewlines = text.split('\n').filter(p => p.trim());
+       // Only use single newlines if we get reasonable chunks (3+ non-empty lines)
+       if (singleNewlines.length >= 3) {
+         parts = singleNewlines;
+       }
+     }
+     
+     // If still just one part and it's very long (>500 chars), split by sentences
+     if (parts.length === 1 && text.length > 500) {
+       const sentences = text.match(/[^.!?]+[.!?]+/g) || [text];
+       if (sentences.length > 1) {
+         parts = sentences.map(s => s.trim()).filter(s => s);
+       }
+     }
+     
+     if (parts.length === 1) {
+       // Single item - just one bubble
+       const bubble = document.createElement('div');
+       bubble.className = 'message-bubble';
+       bubble.textContent = text;
+       return bubble;
+     }
+     
+     // Multiple parts - create separate bubbles for each
+     const container = document.createElement('div');
+     container.className = 'message-bubbles-container';
+     
+     for (const part of parts) {
+       const bubble = document.createElement('div');
+       bubble.className = 'message-bubble';
+       bubble.textContent = part;
+       container.appendChild(bubble);
+     }
+     
+     return container;
+   }
+
+   createSandboxedHtml(rawHtml) {
+     const wrap = document.createElement('div');
+     wrap.className = 'html-block rendered-html';
+     const content = document.createElement('div');
+     content.className = 'html-content';
+     
+     // Get current theme to apply to HTML content
+     const currentTheme = document.documentElement.getAttribute('data-theme') || 
+                         (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+     
+     // CRITICAL: Inject theme-aware CSS to ensure text colors work in dark/light mode
+     const themeCSS = currentTheme === 'dark' 
+       ? `<style>
+            .html-content { 
+              color: #f8fafc; 
+              background: transparent;
+            }
+            .html-content p { color: #cbd5e1; }
+            .html-content h1, .html-content h2, .html-content h3, 
+            .html-content h4, .html-content h5, .html-content h6 { 
+              color: #f8fafc; 
+            }
+            .html-content a { color: #6366f1; }
+            .html-content code { color: #c7d2fe; background: rgba(0,0,0,0.3); }
+            .html-content pre { background: rgba(0,0,0,0.5); color: #e0e7ff; }
+            .html-content table { border-color: #334155; }
+            .html-content th { background: #1a202c; color: #f8fafc; }
+            .html-content td { border-color: #334155; }
+            .html-content blockquote { border-color: #334155; color: #cbd5e1; }
+            .html-content ul, .html-content ol { color: #cbd5e1; }
+            .html-content li { color: #cbd5e1; }
+         </style>`
+       : `<style>
+            .html-content { 
+              color: #1d2129; 
+              background: transparent;
+            }
+            .html-content p { color: #475569; }
+            .html-content h1, .html-content h2, .html-content h3, 
+            .html-content h4, .html-content h5, .html-content h6 { 
+              color: #1d2129; 
+            }
+            .html-content a { color: #4f46e5; }
+            .html-content code { color: #6366f1; background: rgba(99,102,241,0.1); }
+            .html-content pre { background: #f3f4f6; color: #1d2129; }
+            .html-content table { border-color: #e5e7eb; }
+            .html-content th { background: #f9fafb; color: #1d2129; }
+            .html-content td { border-color: #e5e7eb; }
+            .html-content blockquote { border-color: #e5e7eb; color: #475569; }
+            .html-content ul, .html-content ol { color: #475569; }
+            .html-content li { color: #475569; }
+         </style>`;
+     
+     // CRITICAL: Ensure RippleUI styles are available for agent HTML
+     // Agent responses use RippleUI/Tailwind classes, so wrap in a context that has those styles
+     let enhancedHtml = themeCSS + rawHtml;
+     
+     // If HTML doesn't already have the RippleUI wrapper classes, add them
+     if (!rawHtml.includes('space-y-4') && !rawHtml.includes('card') && !rawHtml.includes('alert')) {
+       // Wrap in RippleUI container if agent didn't already wrap it
+       enhancedHtml = themeCSS + `<div class="space-y-4 p-6 max-w-4xl">${rawHtml}</div>`;
+       console.log('[HTML] Wrapped agent HTML in RippleUI container with theme CSS');
+     } else {
+       console.log('[HTML] Agent HTML already has RippleUI classes, applying theme CSS');
+     }
+     
+     content.innerHTML = this.sanitizeHtml(enhancedHtml);
+     wrap.appendChild(content);
+     
+     // Apply theme attribute to content so nested elements inherit
+     content.setAttribute('data-theme', currentTheme);
+     
+     return wrap;
+   }
 
   addMessageToDisplay(msg) {
     const div = document.getElementById('chatMessages');
@@ -810,30 +1013,40 @@ class GMGUIApp {
         });
       }
       
-      // Display segmented content if available
-      if (msg.content.segments && Array.isArray(msg.content.segments)) {
-        console.log('[HTML] Rendering segments from agent response');
-        msg.content.segments.forEach(segment => {
-          el.appendChild(this.renderSegment(segment));
-        });
-      } else if (msg.content.text && !hasHtmlContent) {
-        // Only use text rendering if no HTML blocks were rendered
-        // But ALWAYS check if text itself contains HTML
-        if (this.looksLikeHtml(msg.content.text)) {
-          console.log('[HTML] Agent text content contains HTML - rendering as HTML');
-          el.appendChild(this.createSandboxedHtml(msg.content.text));
-        } else {
-          const parsed = this.parseAndRenderContent(msg.content.text);
-          if (parsed) {
-            parsed.forEach(elem => el.appendChild(elem));
-          } else {
-            const bubble = document.createElement('div');
-            bubble.className = 'message-bubble';
-            bubble.textContent = msg.content.text;
-            el.appendChild(bubble);
-          }
-        }
-      }
+       // CRITICAL: Agent responses are now HTML from system prompt
+       // Check if we have text first (which should be HTML)
+       if (msg.content.text && !hasHtmlContent) {
+         // ALWAYS check if text itself contains HTML first
+         if (this.looksLikeHtml(msg.content.text)) {
+           console.log('[HTML] ✅ Agent response is HTML - rendering directly (NOT segmenting)');
+           el.appendChild(this.createSandboxedHtml(msg.content.text));
+         } else {
+           // Only if NOT HTML, then try segmenting
+           console.log('[HTML] Text is not HTML, attempting segmentation');
+           if (msg.content.segments && Array.isArray(msg.content.segments)) {
+             console.log('[HTML] Rendering', msg.content.segments.length, 'segments');
+             msg.content.segments.forEach(segment => {
+               el.appendChild(this.renderSegment(segment));
+             });
+           } else {
+             const parsed = this.parseAndRenderContent(msg.content.text);
+             if (parsed) {
+               parsed.forEach(elem => el.appendChild(elem));
+             } else {
+               const bubble = document.createElement('div');
+               bubble.className = 'message-bubble';
+               bubble.textContent = msg.content.text;
+               el.appendChild(bubble);
+             }
+           }
+         }
+       } else if (msg.content.segments && Array.isArray(msg.content.segments) && !hasHtmlContent) {
+         // Fallback: only use segments if we have them and no text
+         console.log('[HTML] No text content, rendering segments');
+         msg.content.segments.forEach(segment => {
+           el.appendChild(this.renderSegment(segment));
+         });
+       }
 
       // Display metadata if available
       if (msg.content.metadata) {
@@ -1041,7 +1254,7 @@ class GMGUIApp {
       ? folderPath.split('/').pop() || folderPath
       : `Chat ${this.conversations.size + 1}`;
     try {
-      const res = await fetch(BASE_URL + '/api/conversations', {
+      const res = await this.apiFetch(BASE_URL + '/api/conversations', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ agentId: this.selectedAgent || 'claude-code', title }),
@@ -1082,7 +1295,7 @@ class GMGUIApp {
 
     try {
       const folderPath = conv?.folderPath || localStorage.getItem('gmgui-home') || '/config';
-      const res = await fetch(`${BASE_URL}/api/conversations/${this.currentConversation}/messages`, {
+      const res = await this.apiFetch(`${BASE_URL}/api/conversations/${this.currentConversation}/messages`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
@@ -1128,7 +1341,7 @@ class GMGUIApp {
 
     this.pollingInterval = setInterval(async () => {
       try {
-        const res = await fetch(`${BASE_URL}/api/conversations/${conversationId}/messages`);
+        const res = await this.apiFetch(`${BASE_URL}/api/conversations/${conversationId}/messages`);
         const data = await res.json();
         const messages = data.messages || [];
 
@@ -1295,7 +1508,7 @@ class GMGUIApp {
     if (!list) return;
     list.innerHTML = '<div style="padding: 1rem; color: var(--text-tertiary);">Loading...</div>';
     try {
-      const res = await fetch(BASE_URL + '/api/folders', {
+      const res = await this.apiFetch(BASE_URL + '/api/folders', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ path: folderPath }),
@@ -1377,7 +1590,7 @@ function createChatInFolder() {
 async function importClaudeCodeConversations() {
   closeNewChatModal();
   try {
-    const res = await fetch(BASE_URL + '/api/import/claude-code');
+    const res = await this.apiFetch(BASE_URL + '/api/import/claude-code');
     const data = await res.json();
 
     if (!data.imported) {

package/static/index.html

@@ -130,13 +130,6 @@
             <div class="chat-option-desc">Contextualize chat to a specific folder</div>
           </div>
         </button>
-        <button class="chat-option-btn" onclick="importClaudeCodeConversations()">
-          <span class="chat-option-icon">📥</span>
-          <div class="chat-option-content">
-            <div class="chat-option-title">Import Claude Code conversations</div>
-            <div class="chat-option-desc">Load existing conversations from Claude Code</div>
-          </div>
-        </button>
       </div>
     </div>
   </div>