agentgui 1.0.131 → 1.0.138

package/static/js/client.js

@@ -192,6 +192,7 @@ class AgentGUIClient {
    */
   updateUrlForConversation(conversationId, sessionId) {
     if (!this.isValidId(conversationId)) return;
+    if (!this.routerState) return;
 
     this.routerState.currentConversationId = conversationId;
     if (sessionId && this.isValidId(sessionId)) {
@@ -689,7 +690,8 @@ class AgentGUIClient {
         </div>
       `;
     } else {
-      return `<div class="message-code"><pre>${this.escapeHtml(code)}</pre></div>`;
+      const lineCount = code.split('\n').length;
+      return `<div class="message-code"><details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(language)} - ${lineCount} line${lineCount !== 1 ? 's' : ''}</summary><pre style="margin:0;border-radius:0 0 0.375rem 0.375rem">${this.escapeHtml(code)}</pre></details></div>`;
     }
   }
 
@@ -731,7 +733,8 @@ class AgentGUIClient {
                 </div>
               `;
             } else {
-              html += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
+              const blkLineCount = block.code.split('\n').length;
+              html += `<div class="message-code"><details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(block.language || 'code')} - ${blkLineCount} line${blkLineCount !== 1 ? 's' : ''}</summary><pre style="margin:0;border-radius:0 0 0.375rem 0.375rem">${this.escapeHtml(block.code)}</pre></details></div>`;
             }
           } else if (block.type === 'tool_use') {
             let inputHtml = '';
@@ -1354,7 +1357,8 @@ class AgentGUIClient {
                   </div>
                 `;
               } else {
-                contentHtml += `<div class="message-code"><pre>${this.escapeHtml(block.code)}</pre></div>`;
+                const cBlkLineCount = block.code.split('\n').length;
+                contentHtml += `<div class="message-code"><details class="collapsible-code"><summary class="collapsible-code-summary">${this.escapeHtml(block.language || 'code')} - ${cBlkLineCount} line${cBlkLineCount !== 1 ? 's' : ''}</summary><pre style="margin:0;border-radius:0 0 0.375rem 0.375rem">${this.escapeHtml(block.code)}</pre></details></div>`;
               }
             } else if (block.type === 'tool_use') {
               let inputHtml = '';

package/static/js/conversations.js

@@ -19,7 +19,9 @@ class ConversationManager {
       listEl: null,
       breadcrumbEl: null,
       currentPath: '~',
-      homePath: '~'
+      homePath: '~',
+      cwdPath: null,
+      homePathReady: null
     };
 
     if (!this.listEl) return;
@@ -55,7 +57,7 @@ class ConversationManager {
       if (e.target === this.folderBrowser.modal) this.closeFolderBrowser();
     });
 
-    this.fetchHomePath();
+    this.folderBrowser.homePathReady = this.fetchHomePath();
   }
 
   async fetchHomePath() {
@@ -64,20 +66,25 @@ class ConversationManager {
       if (res.ok) {
         const data = await res.json();
         this.folderBrowser.homePath = data.home || '~';
+        this.folderBrowser.cwdPath = data.cwd || null;
       }
     } catch (e) {
       console.error('Failed to fetch home path:', e);
     }
   }
 
-  openFolderBrowser() {
+  async openFolderBrowser() {
     if (!this.folderBrowser.modal) {
       this.createNew();
       return;
     }
-    this.folderBrowser.currentPath = '~';
+    if (this.folderBrowser.homePathReady) {
+      await this.folderBrowser.homePathReady;
+    }
+    const startPath = this.folderBrowser.cwdPath || '~';
+    this.folderBrowser.currentPath = startPath;
     this.folderBrowser.modal.classList.add('visible');
-    this.loadFolders('~');
+    this.loadFolders(startPath);
   }
 
   closeFolderBrowser() {

package/static/js/features.js

@@ -195,31 +195,31 @@
     var chatArea = document.getElementById('output-scroll');
     var execPanel = document.querySelector('.input-section');
     var fileBrowser = document.getElementById('fileBrowserContainer');
-    var iframe = document.getElementById('fileBrowserIframe');
+    var fileIframe = document.getElementById('fileBrowserIframe');
+    var voiceContainer = document.getElementById('voiceContainer');
 
     if (!bar) return;
 
-    // Update active button
     bar.querySelectorAll('.view-toggle-btn').forEach(function(btn) {
       btn.classList.toggle('active', btn.dataset.view === view);
     });
 
-    if (view === 'files') {
-      if (chatArea) chatArea.style.display = 'none';
-      if (execPanel) execPanel.style.display = 'none';
-      if (fileBrowser) {
-        fileBrowser.style.display = 'flex';
-        if (iframe && currentConversation) {
-          var src = BASE + '/files/' + currentConversation + '/';
-          if (iframe.src !== location.origin + src) {
-            iframe.src = src;
-          }
-        }
+    if (chatArea) chatArea.style.display = view === 'chat' ? '' : 'none';
+    if (execPanel) execPanel.style.display = view === 'chat' ? '' : 'none';
+    if (fileBrowser) fileBrowser.style.display = view === 'files' ? 'flex' : 'none';
+    if (voiceContainer) voiceContainer.style.display = view === 'voice' ? 'flex' : 'none';
+
+    if (view === 'files' && fileIframe && currentConversation) {
+      var src = BASE + '/files/' + currentConversation + '/';
+      if (fileIframe.src !== location.origin + src) {
+        fileIframe.src = src;
       }
-    } else {
-      if (chatArea) chatArea.style.display = '';
-      if (execPanel) execPanel.style.display = '';
-      if (fileBrowser) fileBrowser.style.display = 'none';
+    }
+
+    if (view === 'voice' && window.voiceModule) {
+      window.voiceModule.activate();
+    } else if (view !== 'voice' && window.voiceModule) {
+      window.voiceModule.deactivate();
     }
   }
 

package/static/js/streaming-renderer.js

@@ -432,18 +432,24 @@ class StreamingRenderer {
 
     const code = block.code || '';
     const language = (block.language || 'plaintext').toLowerCase();
+    const lineCount = code.split('\n').length;
 
-    const header = document.createElement('div');
-    header.className = 'code-header';
-    header.innerHTML = `
-      <span class="lang-badge">${this.escapeHtml(language)}</span>
+    const details = document.createElement('details');
+    details.className = 'collapsible-code';
+
+    const summary = document.createElement('summary');
+    summary.className = 'collapsible-code-summary';
+    summary.innerHTML = `
+      <span class="collapsible-code-label">${this.escapeHtml(language)} - ${lineCount} line${lineCount !== 1 ? 's' : ''}</span>
       <button class="copy-code-btn" title="Copy code">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
       </button>
     `;
 
-    const copyBtn = header.querySelector('.copy-code-btn');
-    copyBtn.addEventListener('click', () => {
+    const copyBtn = summary.querySelector('.copy-code-btn');
+    copyBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
       navigator.clipboard.writeText(code).then(() => {
         const orig = copyBtn.innerHTML;
         copyBtn.innerHTML = '<svg viewBox="0 0 20 20" fill="#34d399"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>';
@@ -451,13 +457,18 @@ class StreamingRenderer {
       });
     });
 
-    // Use syntax highlighting instead of just escaping
-    const highlightedHTML = StreamingRenderer.renderCodeWithHighlight(code, this.escapeHtml.bind(this));
+    const preStyle = "background:#1e293b;padding:1rem;border-radius:0 0 0.375rem 0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;border:1px solid #334155;border-top:none;margin:0";
     const codeContainer = document.createElement('div');
-    codeContainer.innerHTML = highlightedHTML;
+    if (typeof hljs !== 'undefined') {
+      const result = hljs.highlightAuto(code);
+      codeContainer.innerHTML = `<pre style="${preStyle}"><code class="hljs">${result.value}</code></pre>`;
+    } else {
+      codeContainer.innerHTML = `<pre style="${preStyle}"><code>${this.escapeHtml(code)}</code></pre>`;
+    }
 
-    div.appendChild(header);
-    div.appendChild(codeContainer);
+    details.appendChild(summary);
+    details.appendChild(codeContainer);
+    div.appendChild(details);
 
     return div;
   }
@@ -991,12 +1002,18 @@ class StreamingRenderer {
    * Render code with basic syntax highlighting
    */
   static renderCodeWithHighlight(code, esc) {
-    const preStyle = "background:#1e293b;padding:1rem;border-radius:0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;border:1px solid #334155";
+    const preStyle = "background:#1e293b;padding:1rem;border-radius:0 0 0.375rem 0.375rem;overflow-x:auto;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:0.875rem;line-height:1.6;color:#e2e8f0;border:1px solid #334155;border-top:none;margin:0";
+    const lineCount = code.split('\n').length;
+    const lang = (typeof hljs !== 'undefined') ? (hljs.highlightAuto(code).language || 'code') : 'code';
+    const summaryLabel = `${lang} - ${lineCount} line${lineCount !== 1 ? 's' : ''}`;
+    let codeHtml;
     if (typeof hljs !== 'undefined') {
       const result = hljs.highlightAuto(code);
-      return `<pre style="${preStyle}"><code class="hljs">${result.value}</code></pre>`;
+      codeHtml = `<pre style="${preStyle}"><code class="hljs">${result.value}</code></pre>`;
+    } else {
+      codeHtml = `<pre style="${preStyle}">${esc(code)}</pre>`;
     }
-    return `<pre style="${preStyle}">${esc(code)}</pre>`;
+    return `<details class="collapsible-code"><summary class="collapsible-code-summary">${summaryLabel}</summary>${codeHtml}</details>`;
   }
 
   /**
@@ -1521,16 +1538,19 @@ class StreamingRenderer {
             <div class="html-content bg-white dark:bg-gray-800 p-4 overflow-x-auto">${part.code}</div>
           </div>`;
         } else {
+          const partLineCount = part.code.split('\n').length;
           html += `<div class="mb-3 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
-            <div class="flex items-center justify-between gap-2 bg-gray-900 dark:bg-gray-950 px-4 py-2 border-b border-gray-800">
-              <span class="text-xs font-mono text-gray-400 uppercase">${this.escapeHtml(part.language)}</span>
-              <button class="copy-code-btn text-gray-400 hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-800" title="Copy code">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
-                </svg>
-              </button>
-            </div>
-            <pre class="bg-gray-900 text-gray-100 p-4 overflow-x-auto"><code class="language-${this.escapeHtml(part.language)}">${this.escapeHtml(part.code)}</code></pre>
+            <details class="collapsible-code">
+              <summary class="collapsible-code-summary">
+                <span>${this.escapeHtml(part.language)} - ${partLineCount} line${partLineCount !== 1 ? 's' : ''}</span>
+                <button class="copy-code-btn text-gray-400 hover:text-gray-200 transition-colors p-1 rounded hover:bg-gray-800" title="Copy code" onclick="event.preventDefault();event.stopPropagation();navigator.clipboard.writeText(this.closest('.collapsible-code').querySelector('code').textContent)">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+                  </svg>
+                </button>
+              </summary>
+              <pre class="bg-gray-900 text-gray-100 p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(part.language)}">${this.escapeHtml(part.code)}</code></pre>
+            </details>
           </div>`;
         }
       }
@@ -1578,8 +1598,12 @@ class StreamingRenderer {
         </div>
       `;
     } else {
+      const codeLineCount = code.split('\n').length;
       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>
+        <details class="collapsible-code">
+          <summary class="collapsible-code-summary">${this.escapeHtml(language)} - ${codeLineCount} line${codeLineCount !== 1 ? 's' : ''}</summary>
+          <pre class="bg-gray-900 text-gray-100 p-4 overflow-x-auto" style="margin:0;border-radius:0 0 0.375rem 0.375rem"><code class="language-${this.escapeHtml(language)}">${this.escapeHtml(code)}</code></pre>
+        </details>
       `;
     }
     return div;

package/static/js/syntax-highlighter.js

@@ -6,7 +6,7 @@
 class SyntaxHighlighter {
   constructor(config = {}) {
     this.config = {
-      cdnUrl: config.cdnUrl || 'https://unpkg.com/prism@1.29.0',
+      cdnUrl: config.cdnUrl || 'https://cdn.jsdelivr.net/npm/prismjs@1.29.0',
       lazyLoad: config.lazyLoad !== false,
       enableCache: config.enableCache !== false,
       maxCacheSize: config.maxCacheSize || 500,