agentgui 1.0.130 → 1.0.138

package/static/index.html

@@ -5,9 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <meta name="description" content="AgentGUI - Real-time Claude Code Execution Visualization">
   <title>AgentGUI</title>
+  <link rel="icon" type="image/svg+xml" href="/favicon.ico">
 
-  <link href="https://unpkg.com/rippleui@0.14.0/dist/ripple.css" rel="stylesheet">
-  <link href="https://unpkg.com/prism@1.29.0/themes/prism-dark.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/rippleui@1.12.1/dist/css/styles.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-dark.css" rel="stylesheet">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
 
@@ -161,6 +162,26 @@
 
     .conversation-item.active .conversation-item-meta { color: rgba(255,255,255,0.7); }
 
+    .conversation-streaming-badge {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 0.375rem;
+      vertical-align: middle;
+    }
+
+    .streaming-dot {
+      display: inline-block;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+      background-color: var(--color-success);
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    .conversation-item.active .streaming-dot {
+      background-color: #fff;
+    }
+
     .conversation-item {
       display: flex;
       align-items: center;
@@ -801,6 +822,7 @@
     /* ===== File browser ===== */
     .file-browser-container { flex:1; min-height:0; overflow:hidden; }
     .file-browser-iframe { width:100%; height:100%; border:none; }
+    .voice-iframe { width:100%; height:100%; border:none; }
 
     /* ===== RESPONSIVE: MOBILE ===== */
     @media (max-width: 768px) {
@@ -894,6 +916,191 @@
       scrollbar-color: #475569 transparent;
     }
 
+    /* ===== VOICE VIEW ===== */
+    .voice-container {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .voice-scroll {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 1.5rem 2rem;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .voice-messages {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .voice-block {
+      padding: 1rem 1.25rem;
+      border-radius: 0.75rem;
+      background: var(--color-bg-secondary);
+      line-height: 1.7;
+      font-size: 1rem;
+      max-width: 85%;
+      margin-right: auto;
+      position: relative;
+    }
+
+    .voice-block.speaking {
+      box-shadow: 0 0 0 2px var(--color-primary);
+    }
+
+    .voice-block-user {
+      background: var(--color-primary);
+      color: white;
+      margin-left: auto;
+      margin-right: 0;
+    }
+
+    .voice-input-section {
+      flex-shrink: 0;
+      background: var(--color-bg-primary);
+      padding: 0.75rem 1rem;
+      border-top: 1px solid var(--color-border);
+    }
+
+    .voice-input-wrapper {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+
+    .voice-transcript {
+      flex: 1;
+      min-height: 40px;
+      max-height: 100px;
+      padding: 0.5rem 0.875rem;
+      border-radius: 0.75rem;
+      background: var(--color-bg-secondary);
+      color: var(--color-text-primary);
+      font-size: 0.9375rem;
+      line-height: 1.5;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .voice-transcript:empty::before {
+      content: attr(data-placeholder);
+      color: var(--color-text-secondary);
+    }
+
+    .voice-mic-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 44px;
+      background: var(--color-bg-secondary);
+      color: var(--color-text-secondary);
+      border: 2px solid var(--color-border);
+      border-radius: 50%;
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: all 0.2s;
+    }
+
+    .voice-mic-btn:hover {
+      border-color: var(--color-primary);
+      color: var(--color-primary);
+    }
+
+    .voice-mic-btn.loading {
+      opacity: 0.5;
+      cursor: wait;
+      animation: mic-loading-spin 2s linear infinite;
+    }
+
+    @keyframes mic-loading-spin {
+      0% { border-color: var(--color-border); }
+      50% { border-color: var(--color-primary); }
+      100% { border-color: var(--color-border); }
+    }
+
+    .voice-mic-btn.recording {
+      background: var(--color-error);
+      border-color: var(--color-error);
+      color: white;
+      animation: pulse 1s ease-in-out infinite;
+    }
+
+    .voice-mic-btn svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .voice-send-btn {
+      flex-shrink: 0;
+    }
+
+    .voice-tts-controls {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 0.5rem;
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+    }
+
+    .voice-toggle-label {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .voice-toggle-label input[type="checkbox"] {
+      accent-color: var(--color-primary);
+    }
+
+    .voice-stop-btn {
+      padding: 0.25rem 0.75rem;
+      background: var(--color-bg-secondary);
+      border: 1px solid var(--color-border);
+      border-radius: 0.375rem;
+      cursor: pointer;
+      font-size: 0.75rem;
+      color: var(--color-text-secondary);
+      transition: all 0.15s;
+    }
+
+    .voice-stop-btn:hover {
+      background: var(--color-error);
+      color: white;
+      border-color: var(--color-error);
+    }
+
+    .voice-empty {
+      text-align: center;
+      color: var(--color-text-secondary);
+      padding: 4rem 2rem;
+      font-size: 1rem;
+    }
+
+    .voice-empty-icon {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      opacity: 0.3;
+    }
+
+    .voice-block .voice-result-stats {
+      font-size: 0.8rem;
+      color: var(--color-text-secondary);
+      margin-top: 0.5rem;
+      padding-top: 0.5rem;
+      border-top: 1px solid var(--color-border);
+    }
+
     /* ===== RESPONSIVE: TABLET ===== */
     @media (min-width: 769px) and (max-width: 1024px) {
       :root { --sidebar-width: 260px; }
@@ -1629,6 +1836,7 @@
       <div class="view-toggle-bar" id="viewToggleBar" style="display:none;">
         <button class="view-toggle-btn active" data-view="chat">Chat</button>
         <button class="view-toggle-btn" data-view="files">Files</button>
+        <button class="view-toggle-btn" data-view="voice">Voice</button>
       </div>
 
       <!-- Messages scroll area -->
@@ -1646,7 +1854,40 @@
 
       <!-- File browser (hidden by default) -->
       <div id="fileBrowserContainer" class="file-browser-container" style="display:none;">
-        <iframe id="fileBrowserIframe" class="file-browser-iframe" sandbox="allow-same-origin allow-scripts allow-forms allow-popups"></iframe>
+        <iframe id="fileBrowserIframe" class="file-browser-iframe"></iframe>
+      </div>
+
+      <!-- Voice STT/TTS view -->
+      <div id="voiceContainer" class="voice-container" style="display:none;">
+        <div id="voiceScroll" class="voice-scroll">
+          <div class="voice-messages" id="voiceMessages"></div>
+        </div>
+        <div class="voice-input-section">
+          <div class="voice-input-wrapper">
+            <select class="agent-selector voice-agent-selector" data-voice-agent-selector title="Select agent"></select>
+            <div class="voice-transcript" id="voiceTranscript" data-placeholder="Tap mic and speak..."></div>
+            <button class="voice-mic-btn" id="voiceMicBtn" title="Toggle recording" aria-label="Voice input">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                <line x1="12" y1="19" x2="12" y2="23"/>
+                <line x1="8" y1="23" x2="16" y2="23"/>
+              </svg>
+            </button>
+            <button class="send-btn voice-send-btn" id="voiceSendBtn" title="Send message" aria-label="Send message">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+              </svg>
+            </button>
+          </div>
+          <div class="voice-tts-controls">
+            <label class="voice-toggle-label">
+              <input type="checkbox" id="voiceTTSToggle" checked>
+              <span>Auto-speak responses</span>
+            </label>
+            <button class="voice-stop-btn" id="voiceStopSpeaking" title="Stop speaking">Stop</button>
+          </div>
+        </div>
       </div>
 
       <!-- Input area: fixed at bottom -->
@@ -1710,6 +1951,7 @@
   <script src="/gm/js/ui-components.js"></script>
   <script src="/gm/js/conversations.js"></script>
   <script src="/gm/js/client.js"></script>
+  <script type="module" src="/gm/js/voice.js"></script>
   <script src="/gm/js/features.js"></script>
 
   <script>

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)) {
@@ -344,6 +345,9 @@ class AgentGUIClient {
 
   handleWebSocketMessage(data) {
     try {
+      // Dispatch to window so other modules (conversations.js) can listen
+      window.dispatchEvent(new CustomEvent('ws-message', { detail: data }));
+
       switch (data.type) {
         case 'streaming_start':
           this.handleStreamingStart(data);
@@ -388,6 +392,15 @@ class AgentGUIClient {
 
   handleStreamingStart(data) {
     console.log('Streaming started:', data);
+
+    // If this streaming event is for a different conversation than what we are viewing,
+    // just track the state but do not modify the DOM or start polling
+    if (this.state.currentConversation?.id !== data.conversationId) {
+      console.log('Streaming started for non-active conversation:', data.conversationId);
+      this.emit('streaming:start', data);
+      return;
+    }
+
     this.state.isStreaming = true;
     this.state.currentSession = {
       id: data.sessionId,
@@ -490,8 +503,21 @@ class AgentGUIClient {
 
   handleStreamingError(data) {
     console.error('Streaming error:', data);
+
+    const conversationId = data.conversationId || this.state.currentSession?.conversationId;
+
+    // If this event is for a conversation we are NOT currently viewing, just track state
+    if (conversationId && this.state.currentConversation?.id !== conversationId) {
+      console.log('Streaming error for non-active conversation:', conversationId);
+      this.emit('streaming:error', data);
+      return;
+    }
+
     this.state.isStreaming = false;
 
+    // Stop polling for chunks
+    this.stopChunkPolling();
+
     const sessionId = data.sessionId || this.state.currentSession?.id;
     const streamingEl = document.getElementById(`streaming-${sessionId}`);
     if (streamingEl) {
@@ -507,6 +533,16 @@ class AgentGUIClient {
 
   handleStreamingComplete(data) {
     console.log('Streaming completed:', data);
+
+    const conversationId = data.conversationId || this.state.currentSession?.conversationId;
+
+    // If this event is for a conversation we are NOT currently viewing, just track state
+    if (conversationId && this.state.currentConversation?.id !== conversationId) {
+      console.log('Streaming completed for non-active conversation:', conversationId);
+      this.emit('streaming:complete', data);
+      return;
+    }
+
     this.state.isStreaming = false;
 
     // Stop polling for chunks
@@ -528,7 +564,6 @@ class AgentGUIClient {
     }
 
     // Save scroll position after streaming completes
-    const conversationId = data.conversationId || this.state.currentSession?.conversationId;
     if (conversationId) {
       this.saveScrollPosition(conversationId);
     }
@@ -655,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>`;
     }
   }
 
@@ -697,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 = '';
@@ -1099,9 +1136,21 @@ class AgentGUIClient {
 
   async loadConversationMessages(conversationId) {
     try {
+      // Save scroll position of current conversation before switching
+      if (this.state.currentConversation?.id) {
+        this.saveScrollPosition(this.state.currentConversation.id);
+      }
+
       // Stop any existing polling when switching conversations
       this.stopChunkPolling();
 
+      // Clear streaming state from previous conversation view
+      // (the actual streaming continues on the server, we just stop tracking it on the UI side)
+      if (this.state.isStreaming && this.state.currentConversation?.id !== conversationId) {
+        this.state.isStreaming = false;
+        this.state.currentSession = null;
+      }
+
       const convResponse = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}`);
       const { conversation, isActivelyStreaming, latestSession } = await convResponse.json();
       this.state.currentConversation = conversation;
@@ -1114,7 +1163,10 @@ class AgentGUIClient {
       }
 
       // Check if there's an active streaming session that needs to be resumed
-      const shouldResumeStreaming = isActivelyStreaming && latestSession && latestSession.status === 'active';
+      // isActivelyStreaming comes from the server checking both in-memory activeExecutions map
+      // AND database session status. Use it as primary signal, with session status as confirmation.
+      const shouldResumeStreaming = isActivelyStreaming && latestSession &&
+        (latestSession.status === 'active' || latestSession.status === 'pending');
 
       // Try to fetch chunks first (Wave 3 architecture)
       try {
@@ -1202,17 +1254,22 @@ class AgentGUIClient {
               startTime: latestSession.created_at
             };
 
-            // Subscribe to WebSocket updates
+            // Subscribe to WebSocket updates for BOTH conversation and session
             if (this.wsManager.isConnected) {
               this.wsManager.subscribeToSession(latestSession.id);
+              this.wsManager.sendMessage({ type: 'subscribe', conversationId });
             }
 
+            // Update URL with session ID
+            this.updateUrlForConversation(conversationId, latestSession.id);
+
             // Get the timestamp of the last chunk to start polling from
+            // Use the last chunk's created_at to avoid re-fetching already-rendered chunks
             const lastChunkTime = chunks.length > 0
               ? chunks[chunks.length - 1].created_at
-              : Date.now();
+              : 0;
 
-            // Start polling for new chunks
+            // Start polling for new chunks from where we left off
             this.chunkPollState.lastFetchTimestamp = lastChunkTime;
             this.startChunkPolling(conversationId);
 
@@ -1300,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

@@ -12,13 +12,16 @@ class ConversationManager {
     this.emptyEl = document.querySelector('[data-conversation-empty]');
     this.newBtn = document.querySelector('[data-new-conversation]');
     this.sidebarEl = document.querySelector('[data-sidebar]');
+    this.streamingConversations = new Set();
 
     this.folderBrowser = {
       modal: null,
       listEl: null,
       breadcrumbEl: null,
       currentPath: '~',
-      homePath: '~'
+      homePath: '~',
+      cwdPath: null,
+      homePathReady: null
     };
 
     if (!this.listEl) return;
@@ -54,7 +57,7 @@ class ConversationManager {
       if (e.target === this.folderBrowser.modal) this.closeFolderBrowser();
     });
 
-    this.fetchHomePath();
+    this.folderBrowser.homePathReady = this.fetchHomePath();
   }
 
   async fetchHomePath() {
@@ -63,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() {
@@ -191,6 +199,14 @@ class ConversationManager {
 
       const data = await res.json();
       this.conversations = data.conversations || [];
+
+      // Seed streaming state from database isStreaming flag
+      for (const conv of this.conversations) {
+        if (conv.isStreaming === 1 || conv.isStreaming === true) {
+          this.streamingConversations.add(conv.id);
+        }
+      }
+
       this.render();
     } catch (err) {
       console.error('Failed to load conversations:', err);
@@ -225,6 +241,8 @@ class ConversationManager {
     li.dataset.convId = conv.id;
     if (conv.id === this.activeId) li.classList.add('active');
 
+    const isStreaming = conv.isStreaming === 1 || conv.isStreaming === true || this.streamingConversations?.has(conv.id);
+
     const title = conv.title || `Conversation ${conv.id.slice(0, 8)}`;
     const timestamp = conv.created_at ? new Date(conv.created_at).toLocaleDateString() : 'Unknown';
     const agent = conv.agentType || 'unknown';
@@ -232,9 +250,13 @@ class ConversationManager {
     const metaParts = [agent, timestamp];
     if (wd) metaParts.push(wd);
 
+    const streamingBadge = isStreaming
+      ? '<span class="conversation-streaming-badge" title="Streaming in progress"><span class="streaming-dot"></span></span>'
+      : '';
+
     li.innerHTML = `
       <div class="conversation-item-content">
-        <div class="conversation-item-title">${this.escapeHtml(title)}</div>
+        <div class="conversation-item-title">${streamingBadge}${this.escapeHtml(title)}</div>
         <div class="conversation-item-meta">${metaParts.join(' • ')}</div>
       </div>
       <button class="conversation-item-delete" title="Delete conversation" data-delete-conv="${conv.id}">
@@ -335,6 +357,12 @@ class ConversationManager {
         this.updateConversation(msg.conversation.id, msg.conversation);
       } else if (msg.type === 'conversation_deleted') {
         this.deleteConversation(msg.conversationId);
+      } else if (msg.type === 'streaming_start' && msg.conversationId) {
+        this.streamingConversations.add(msg.conversationId);
+        this.render();
+      } else if ((msg.type === 'streaming_complete' || msg.type === 'streaming_error') && msg.conversationId) {
+        this.streamingConversations.delete(msg.conversationId);
+        this.render();
       }
     });
   }

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();
     }
   }