agentgui 1.0.252 → 1.0.254

package/package.json

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

package/server.js

@@ -306,6 +306,7 @@ const discoveredAgents = discoverAgents();
 const modelCache = new Map();
 
 const AGENT_MODEL_COMMANDS = {
+  'claude-code': 'claude models',
   'opencode': 'opencode models',
   'kilo': 'kilo models',
 };
@@ -317,6 +318,7 @@ const AGENT_DEFAULT_MODELS = {
     { id: 'opus', label: 'Opus' },
     { id: 'haiku', label: 'Haiku' },
     { id: 'claude-sonnet-4-5-20250929', label: 'Sonnet 4.5' },
+    { id: 'claude-sonnet-4-6-20260219', label: 'Sonnet 4.6' },
     { id: 'claude-opus-4-6', label: 'Opus 4.6' },
     { id: 'claude-haiku-4-5-20251001', label: 'Haiku 4.5' }
   ],
@@ -390,25 +392,25 @@ async function getModelsForAgent(agentId) {
     return models;
   }
 
-  if (AGENT_DEFAULT_MODELS[agentId]) {
-    const models = AGENT_DEFAULT_MODELS[agentId];
-    modelCache.set(agentId, { models, timestamp: Date.now() });
-    return models;
-  }
-
   if (AGENT_MODEL_COMMANDS[agentId]) {
     try {
       const result = execSync(AGENT_MODEL_COMMANDS[agentId], { encoding: 'utf-8', timeout: 15000 });
       const lines = result.split('\n').map(l => l.trim()).filter(Boolean);
-      const models = [{ id: '', label: 'Default' }];
-      for (const line of lines) {
-        models.push({ id: line, label: line });
+      if (lines.length > 0) {
+        const models = [{ id: '', label: 'Default' }];
+        for (const line of lines) {
+          models.push({ id: line, label: line });
+        }
+        modelCache.set(agentId, { models, timestamp: Date.now() });
+        return models;
       }
-      modelCache.set(agentId, { models, timestamp: Date.now() });
-      return models;
-    } catch (_) {
-      return [{ id: '', label: 'Default' }];
-    }
+    } catch (_) {}
+  }
+
+  if (AGENT_DEFAULT_MODELS[agentId]) {
+    const models = AGENT_DEFAULT_MODELS[agentId];
+    modelCache.set(agentId, { models, timestamp: Date.now() });
+    return models;
   }
 
   const { getRegisteredAgents } = await import('./lib/claude-runner.js');
@@ -1970,6 +1972,41 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    const agentUpdateMatch = pathOnly.match(/^\/api\/agents\/([^/]+)\/update$/);
+    if (agentUpdateMatch && req.method === 'POST') {
+      const agentId = agentUpdateMatch[1];
+      const updateCommands = {
+        'claude-code': { cmd: 'claude', args: ['update', '--yes'] },
+      };
+      const updateCmd = updateCommands[agentId];
+      if (!updateCmd) { sendJSON(req, res, 400, { error: 'No update command for this agent' }); return; }
+      const conversationId = '__agent_update__';
+      if (activeScripts.has(conversationId)) { sendJSON(req, res, 409, { error: 'Update already running' }); return; }
+      const child = spawn(updateCmd.cmd, updateCmd.args, {
+        stdio: ['pipe', 'pipe', 'pipe'],
+        env: { ...process.env, FORCE_COLOR: '1' },
+        shell: os.platform() === 'win32'
+      });
+      activeScripts.set(conversationId, { process: child, script: 'update-' + agentId, startTime: Date.now() });
+      broadcastSync({ type: 'script_started', conversationId, script: 'update-' + agentId, agentId, timestamp: Date.now() });
+      const onData = (stream) => (chunk) => {
+        broadcastSync({ type: 'script_output', conversationId, data: chunk.toString(), stream, timestamp: Date.now() });
+      };
+      child.stdout.on('data', onData('stdout'));
+      child.stderr.on('data', onData('stderr'));
+      child.on('error', (err) => {
+        activeScripts.delete(conversationId);
+        broadcastSync({ type: 'script_stopped', conversationId, code: 1, error: err.message, timestamp: Date.now() });
+      });
+      child.on('close', (code) => {
+        activeScripts.delete(conversationId);
+        modelCache.delete(agentId);
+        broadcastSync({ type: 'script_stopped', conversationId, code: code || 0, timestamp: Date.now() });
+      });
+      sendJSON(req, res, 200, { ok: true, agentId, pid: child.pid });
+      return;
+    }
+
     if (pathOnly === '/api/auth/configs' && req.method === 'GET') {
       const configs = getProviderConfigs();
       sendJSON(req, res, 200, configs);
@@ -2555,9 +2592,9 @@ const server = http.createServer(async (req, res) => {
         const isWindows = os.platform() === 'win32';
         const result = execSync('git remote get-url origin' + (isWindows ? '' : ' 2>/dev/null'), { encoding: 'utf-8', cwd: STARTUP_CWD, shell: isWindows });
         const remoteUrl = result.trim();
-        const statusResult = execSync('git status --porcelain', { encoding: 'utf-8', cwd: STARTUP_CWD });
+        const statusResult = execSync('git status --porcelain' + (isWindows ? '' : ' 2>/dev/null'), { encoding: 'utf-8', cwd: STARTUP_CWD, shell: isWindows });
         const hasChanges = statusResult.trim().length > 0;
-        const unpushedResult = execSync('git rev-list --count --not --remotes 2>/dev/null', { encoding: 'utf-8', cwd: STARTUP_CWD });
+        const unpushedResult = execSync('git rev-list --count --not --remotes' + (isWindows ? '' : ' 2>/dev/null'), { encoding: 'utf-8', cwd: STARTUP_CWD, shell: isWindows });
         const hasUnpushed = parseInt(unpushedResult.trim() || '0', 10) > 0;
         const ownsRemote = !remoteUrl.includes('github.com/') || remoteUrl.includes(process.env.GITHUB_USER || '');
         sendJSON(req, res, 200, { ownsRemote, hasChanges, hasUnpushed, remoteUrl });
@@ -2570,7 +2607,10 @@ const server = http.createServer(async (req, res) => {
     if (pathOnly === '/api/git/push' && req.method === 'POST') {
       try {
         const isWindows = os.platform() === 'win32';
-        execSync('git add -A && git commit -m "Auto-commit" && git push', { encoding: 'utf-8', cwd: STARTUP_CWD, shell: isWindows });
+        const gitCommand = isWindows 
+          ? 'git add -A & git commit -m "Auto-commit" & git push'
+          : 'git add -A && git commit -m "Auto-commit" && git push';
+        execSync(gitCommand, { encoding: 'utf-8', cwd: STARTUP_CWD, shell: isWindows });
         sendJSON(req, res, 200, { success: true });
       } catch (err) {
         sendJSON(req, res, 500, { error: err.message });

package/static/app.js

@@ -678,8 +678,8 @@ function closeNewChatModal() {
   }
 }
 
-function createChatInWorkspace() {
-  const title = prompt('Enter a title for the conversation:', 'New Conversation');
+async function createChatInWorkspace() {
+  const title = await window.UIDialog.prompt('Enter a title for the conversation:', 'New Conversation', 'New Chat');
   if (title) {
     app.createConversation(title);
     closeNewChatModal();

package/static/index.html

@@ -1753,11 +1753,11 @@
       display: flex;
       align-items: center;
       gap: 0.375rem;
-      padding: 0.3rem 0.625rem;
+      padding: 0.4rem 0.75rem;
       cursor: pointer;
       user-select: none;
       list-style: none;
-      font-size: 0.75rem;
+      font-size: 0.85rem;
       line-height: 1.3;
       background: #dcfce7;
       transition: background 0.15s;
@@ -1784,24 +1784,24 @@
       display: flex;
       align-items: center;
       color: #16a34a;
-      width: 0.875rem;
-      height: 0.875rem;
+      width: 1rem;
+      height: 1rem;
       flex-shrink: 0;
     }
     html.dark .folded-tool-icon { color: #4ade80; }
-    .folded-tool-icon svg { width: 0.875rem; height: 0.875rem; }
+    .folded-tool-icon svg { width: 1rem; height: 1rem; }
     .folded-tool-name {
       font-weight: 600;
       color: #166534;
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.7rem;
+      font-size: 0.8rem;
       flex-shrink: 0;
     }
     html.dark .folded-tool-name { color: #86efac; }
     .folded-tool-desc {
       color: #15803d;
       font-family: 'Monaco','Menlo','Ubuntu Mono', monospace;
-      font-size: 0.7rem;
+      font-size: 0.8rem;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -1874,6 +1874,33 @@
     .folded-tool-info > .folded-tool-body { border-top-color: #c7d2fe; }
     html.dark .folded-tool-info > .folded-tool-body { border-top-color: #3730a3; }
 
+    /* --- Consecutive block joining --- */
+    .folded-tool + .folded-tool,
+    .block-tool-use + .block-tool-use {
+      margin-top: -1px;
+      border-radius: 0;
+    }
+    .folded-tool + .folded-tool > .folded-tool-bar,
+    .block-tool-use + .block-tool-use > .folded-tool-bar {
+      border-top: 1px solid rgba(0,0,0,0.06);
+    }
+    html.dark .folded-tool + .folded-tool > .folded-tool-bar,
+    html.dark .block-tool-use + .block-tool-use > .folded-tool-bar {
+      border-top: 1px solid rgba(255,255,255,0.06);
+    }
+    .folded-tool:first-child,
+    .block-tool-use:first-child {
+      border-radius: 0.375rem 0.375rem 0 0;
+    }
+    .folded-tool:last-child,
+    .block-tool-use:last-child {
+      border-radius: 0 0 0.375rem 0.375rem;
+    }
+    .folded-tool:only-child,
+    .block-tool-use:only-child {
+      border-radius: 0.375rem;
+    }
+
     /* --- Inline Tool Result (nested inside tool_use) --- */
     .tool-result-inline {
       border-top: 1px solid #bbf7d0;
@@ -1905,6 +1932,30 @@
     .tool-result-error > .folded-tool-body { border-top-color: #fecaca; }
     html.dark .tool-result-error > .folded-tool-body { border-top-color: #991b1b; }
 
+    /* --- Consecutive Block Joining --- */
+    .streaming-blocks > * + *,
+    .message-blocks > * + * {
+      margin-top: 0;
+    }
+    .streaming-blocks > *,
+    .message-blocks > * {
+      border-radius: 0;
+    }
+    .streaming-blocks > *:first-child,
+    .message-blocks > *:first-child {
+      border-top-left-radius: 0.375rem;
+      border-top-right-radius: 0.375rem;
+    }
+    .streaming-blocks > *:last-child,
+    .message-blocks > *:last-child {
+      border-bottom-left-radius: 0.375rem;
+      border-bottom-right-radius: 0.375rem;
+    }
+    .streaming-blocks > *:only-child,
+    .message-blocks > *:only-child {
+      border-radius: 0.375rem;
+    }
+
     /* --- Collapsible Code Summary --- */
     .collapsible-code {
       margin: 0;

package/static/js/client.js

@@ -315,14 +315,24 @@ class AgentGUIClient {
     const scrollContainer = document.getElementById(this.config.scrollContainerId);
     if (!scrollContainer) return;
 
+    this._userScrolledUp = false;
     let scrollTimer = null;
+    let lastScrollTop = scrollContainer.scrollTop;
     scrollContainer.addEventListener('scroll', () => {
+      const distFromBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
+      if (scrollContainer.scrollTop < lastScrollTop && distFromBottom > 200) {
+        this._userScrolledUp = true;
+      } else if (distFromBottom < 50) {
+        this._userScrolledUp = false;
+        this._removeNewContentPill();
+      }
+      lastScrollTop = scrollContainer.scrollTop;
       if (scrollTimer) clearTimeout(scrollTimer);
       scrollTimer = setTimeout(() => {
         if (this.state.currentConversation?.id) {
           this.saveScrollPosition(this.state.currentConversation.id);
         }
-      }, 500); // Debounce 500ms
+      }, 500);
     });
   }
 
@@ -706,50 +716,21 @@ class AgentGUIClient {
     if (!scrollContainer) return;
     const distFromBottom = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight;
 
-    if (!force && distFromBottom > 150) {
+    if (this._userScrolledUp && !force) {
       this._unseenCount = (this._unseenCount || 0) + 1;
       this._showNewContentPill();
       return;
     }
 
-    const maxScroll = scrollContainer.scrollHeight - scrollContainer.clientHeight;
-    const isStreaming = this.state.streamingConversations.size > 0;
-
-    if (!isStreaming || !this._scrollKalman || Math.abs(maxScroll - scrollContainer.scrollTop) > 2000 || force) {
-      scrollContainer.scrollTop = scrollContainer.scrollHeight;
-      this._removeNewContentPill();
-      this._scrollAnimating = false;
+    if (!force && distFromBottom > 150) {
+      this._unseenCount = (this._unseenCount || 0) + 1;
+      this._showNewContentPill();
       return;
     }
 
-    this._scrollKalman.update(maxScroll);
-    this._scrollTarget = this._scrollKalman.predict();
-
-    const conf = this._chunkArrivalConfidence();
-    if (conf > 0.5) {
-      const estHeight = this._estimatedBlockHeight('text') * 0.5 * conf;
-      this._scrollTarget += estHeight;
-      const trueMax = scrollContainer.scrollHeight - scrollContainer.clientHeight;
-      if (this._scrollTarget > trueMax + 100) this._scrollTarget = trueMax + 100;
-    }
-
-    if (!this._scrollAnimating) {
-      this._scrollAnimating = true;
-      const animate = () => {
-        if (!this._scrollAnimating) return;
-        const sc = document.getElementById('output-scroll');
-        if (!sc) { this._scrollAnimating = false; return; }
-        const diff = this._scrollTarget - sc.scrollTop;
-        if (Math.abs(diff) < 1) {
-          sc.scrollTop = this._scrollTarget;
-          if (this.state.streamingConversations.size === 0) { this._scrollAnimating = false; return; }
-        }
-        sc.scrollTop += diff * this._scrollLerpFactor;
-        this._removeNewContentPill();
-        requestAnimationFrame(animate);
-      };
-      requestAnimationFrame(animate);
-    }
+    scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    this._removeNewContentPill();
+    this._scrollAnimating = false;
   }
 
   _showNewContentPill() {
@@ -1205,11 +1186,11 @@ class AgentGUIClient {
             const tTitle = hasRenderer && block.input ? StreamingRenderer.getToolTitle(tn, block.input) : '';
             const iconHtml = hasRenderer && this.renderer ? `<span class="folded-tool-icon">${this.renderer.getToolIcon(tn)}</span>` : '';
             const colorIdx = hasRenderer && this.renderer ? this.renderer._getBlockColorIndex('tool_use') : 1;
-            html += `<details class="block-tool-use folded-tool" open style="border-left:3px solid var(--block-color-${colorIdx})"><summary class="folded-tool-bar">${iconHtml}<span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}</summary>${inputHtml}`;
+            html += `<details class="block-tool-use folded-tool" style="border-left:3px solid var(--block-color-${colorIdx})"><summary class="folded-tool-bar">${iconHtml}<span class="folded-tool-name">${this.escapeHtml(dName)}</span>${tTitle ? `<span class="folded-tool-desc">${this.escapeHtml(tTitle)}</span>` : ''}</summary>${inputHtml}`;
             pendingToolUseClose = true;
           } else if (block.type === 'tool_result') {
             const content = typeof block.content === 'string' ? block.content : JSON.stringify(block.content);
-            const smartHtml = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.renderSmartContentHTML(content, this.escapeHtml.bind(this)) : `<pre class="tool-result-pre">${this.escapeHtml(content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content)}</pre>`;
+            const smartHtml = typeof StreamingRenderer !== 'undefined' ? StreamingRenderer.renderSmartContentHTML(content, this.escapeHtml.bind(this), true) : `<pre class="tool-result-pre">${this.escapeHtml(content.length > 2000 ? content.substring(0, 2000) + '\n... (truncated)' : content)}</pre>`;
             const resultPreview = content.length > 80 ? content.substring(0, 77).replace(/\n/g, ' ') + '...' : content.replace(/\n/g, ' ');
             const resultIcon = block.is_error
               ? '<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>'
@@ -2235,6 +2216,7 @@ class AgentGUIClient {
 
       this.cacheCurrentConversation();
       this.stopChunkPolling();
+      if (this.renderer.resetScrollState) this.renderer.resetScrollState();
       var prevId = this.state.currentConversation?.id;
       if (prevId && prevId !== conversationId) {
         if (this.wsManager.isConnected && !this.state.streamingConversations.has(prevId)) {

package/static/js/conversations.js

@@ -475,7 +475,10 @@ class ConversationManager {
   }
 
   async confirmDelete(convId, title) {
-    const confirmed = confirm(`Delete conversation "${title || 'Untitled'}"?\n\nThis will also delete any associated Claude Code session data. This action cannot be undone.`);
+    const confirmed = await window.UIDialog.confirm(
+      `Delete conversation "${title || 'Untitled'}"?\n\nThis will also delete any associated Claude Code session data. This action cannot be undone.`,
+      'Delete Conversation'
+    );
     if (!confirmed) return;
 
     try {
@@ -486,15 +489,14 @@ class ConversationManager {
 
       if (res.ok) {
         console.log(`[ConversationManager] Deleted conversation ${convId}`);
-        // Remove from local list immediately for responsive UI
         this.deleteConversation(convId);
       } else {
         const error = await res.json().catch(() => ({ error: 'Failed to delete' }));
-        alert('Failed to delete conversation: ' + (error.error || 'Unknown error'));
+        window.UIDialog.alert('Failed to delete conversation: ' + (error.error || 'Unknown error'), 'Error');
       }
     } catch (err) {
       console.error('[ConversationManager] Delete error:', err);
-      alert('Failed to delete conversation: ' + err.message);
+      window.UIDialog.alert('Failed to delete conversation: ' + err.message, 'Error');
     }
   }
 

package/static/js/dialogs.js

@@ -0,0 +1,267 @@
+(function() {
+  var activeDialogs = [];
+  var dialogZIndex = 10000;
+
+  function escapeHtml(text) {
+    var map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    return String(text).replace(/[&<>"']/g, function(c) { return map[c]; });
+  }
+
+  function createOverlay() {
+    var overlay = document.createElement('div');
+    overlay.className = 'dialog-overlay';
+    overlay.innerHTML = '<div class="dialog-backdrop"></div>';
+    return overlay;
+  }
+
+  function showDialog(dialog, overlay) {
+    dialogZIndex++;
+    if (overlay) {
+      overlay.style.zIndex = dialogZIndex;
+      document.body.appendChild(overlay);
+    }
+    dialog.style.zIndex = dialogZIndex + 1;
+    document.body.appendChild(dialog);
+    activeDialogs.push({ dialog: dialog, overlay: overlay });
+
+    requestAnimationFrame(function() {
+      dialog.classList.add('visible');
+      if (overlay) overlay.classList.add('visible');
+      var input = dialog.querySelector('input, textarea');
+      if (input) input.focus();
+      else {
+        var btn = dialog.querySelector('.dialog-btn-primary');
+        if (btn) btn.focus();
+      }
+    });
+  }
+
+  function closeDialog(dialog, overlay) {
+    dialog.classList.remove('visible');
+    if (overlay) overlay.classList.remove('visible');
+    setTimeout(function() {
+      if (dialog.parentNode) dialog.remove();
+      if (overlay && overlay.parentNode) overlay.remove();
+    }, 200);
+    activeDialogs = activeDialogs.filter(function(d) {
+      return d.dialog !== dialog;
+    });
+  }
+
+  function closeAllDialogs() {
+    activeDialogs.forEach(function(d) {
+      closeDialog(d.dialog, d.overlay);
+    });
+  }
+
+  window.UIDialog = {
+    alert: function(message, title) {
+      return new Promise(function(resolve) {
+        var overlay = createOverlay();
+        var dialog = document.createElement('div');
+        dialog.className = 'dialog-container';
+        dialog.innerHTML = 
+          '<div class="dialog-box">' +
+            '<div class="dialog-header">' +
+              '<h3 class="dialog-title">' + escapeHtml(title || 'Alert') + '</h3>' +
+            '</div>' +
+            '<div class="dialog-body">' +
+              '<p class="dialog-message">' + escapeHtml(message) + '</p>' +
+            '</div>' +
+            '<div class="dialog-footer">' +
+              '<button class="dialog-btn dialog-btn-primary" data-action="ok">OK</button>' +
+            '</div>' +
+          '</div>';
+        
+        var okBtn = dialog.querySelector('[data-action="ok"]');
+        okBtn.addEventListener('click', function() {
+          closeDialog(dialog, overlay);
+          resolve(true);
+        });
+        
+        overlay.querySelector('.dialog-backdrop').addEventListener('click', function() {
+          closeDialog(dialog, overlay);
+          resolve(true);
+        });
+        
+        document.addEventListener('keydown', function handler(e) {
+          if (e.key === 'Escape' || e.key === 'Enter') {
+            document.removeEventListener('keydown', handler);
+            closeDialog(dialog, overlay);
+            resolve(true);
+          }
+        });
+        
+        showDialog(dialog, overlay);
+      });
+    },
+
+    confirm: function(message, title) {
+      return new Promise(function(resolve) {
+        var overlay = createOverlay();
+        var dialog = document.createElement('div');
+        dialog.className = 'dialog-container';
+        dialog.innerHTML = 
+          '<div class="dialog-box">' +
+            '<div class="dialog-header">' +
+              '<h3 class="dialog-title">' + escapeHtml(title || 'Confirm') + '</h3>' +
+            '</div>' +
+            '<div class="dialog-body">' +
+              '<p class="dialog-message">' + escapeHtml(message).replace(/\n/g, '<br>') + '</p>' +
+            '</div>' +
+            '<div class="dialog-footer">' +
+              '<button class="dialog-btn dialog-btn-secondary" data-action="cancel">Cancel</button>' +
+              '<button class="dialog-btn dialog-btn-primary dialog-btn-danger" data-action="confirm">Confirm</button>' +
+            '</div>' +
+          '</div>';
+        
+        var cancelBtn = dialog.querySelector('[data-action="cancel"]');
+        var confirmBtn = dialog.querySelector('[data-action="confirm"]');
+        
+        cancelBtn.addEventListener('click', function() {
+          closeDialog(dialog, overlay);
+          resolve(false);
+        });
+        
+        confirmBtn.addEventListener('click', function() {
+          closeDialog(dialog, overlay);
+          resolve(true);
+        });
+        
+        overlay.querySelector('.dialog-backdrop').addEventListener('click', function() {
+          closeDialog(dialog, overlay);
+          resolve(false);
+        });
+        
+        document.addEventListener('keydown', function handler(e) {
+          if (e.key === 'Escape') {
+            document.removeEventListener('keydown', handler);
+            closeDialog(dialog, overlay);
+            resolve(false);
+          } else if (e.key === 'Enter') {
+            document.removeEventListener('keydown', handler);
+            closeDialog(dialog, overlay);
+            resolve(true);
+          }
+        });
+        
+        showDialog(dialog, overlay);
+      });
+    },
+
+    prompt: function(message, defaultValue, title) {
+      return new Promise(function(resolve) {
+        var overlay = createOverlay();
+        var dialog = document.createElement('div');
+        dialog.className = 'dialog-container';
+        dialog.innerHTML = 
+          '<div class="dialog-box">' +
+            '<div class="dialog-header">' +
+              '<h3 class="dialog-title">' + escapeHtml(title || 'Input') + '</h3>' +
+            '</div>' +
+            '<div class="dialog-body">' +
+              '<label class="dialog-label">' + escapeHtml(message) + '</label>' +
+              '<input type="text" class="dialog-input" value="' + escapeHtml(defaultValue || '') + '">' +
+            '</div>' +
+            '<div class="dialog-footer">' +
+              '<button class="dialog-btn dialog-btn-secondary" data-action="cancel">Cancel</button>' +
+              '<button class="dialog-btn dialog-btn-primary" data-action="ok">OK</button>' +
+            '</div>' +
+          '</div>';
+        
+        var input = dialog.querySelector('.dialog-input');
+        var cancelBtn = dialog.querySelector('[data-action="cancel"]');
+        var okBtn = dialog.querySelector('[data-action="ok"]');
+        
+        cancelBtn.addEventListener('click', function() {
+          closeDialog(dialog, overlay);
+          resolve(null);
+        });
+        
+        okBtn.addEventListener('click', function() {
+          closeDialog(dialog, overlay);
+          resolve(input.value);
+        });
+        
+        input.addEventListener('keydown', function(e) {
+          if (e.key === 'Enter') {
+            closeDialog(dialog, overlay);
+            resolve(input.value);
+          }
+        });
+        
+        overlay.querySelector('.dialog-backdrop').addEventListener('click', function() {
+          closeDialog(dialog, overlay);
+          resolve(null);
+        });
+        
+        document.addEventListener('keydown', function handler(e) {
+          if (e.key === 'Escape') {
+            document.removeEventListener('keydown', handler);
+            closeDialog(dialog, overlay);
+            resolve(null);
+          }
+        });
+        
+        showDialog(dialog, overlay);
+      });
+    },
+
+    showProgress: function(config) {
+      var overlay = createOverlay();
+      var dialog = document.createElement('div');
+      dialog.className = 'dialog-container';
+      dialog.innerHTML = 
+        '<div class="dialog-box dialog-box-progress">' +
+          '<div class="dialog-header">' +
+            '<h3 class="dialog-title">' + escapeHtml(config.title || 'Please wait') + '</h3>' +
+          '</div>' +
+          '<div class="dialog-body">' +
+            '<p class="dialog-message progress-message">' + escapeHtml(config.message || 'Loading...') + '</p>' +
+            '<div class="dialog-progress-bar">' +
+              '<div class="dialog-progress-fill" style="width: 0%"></div>' +
+            '</div>' +
+            '<p class="dialog-progress-percent">0%</p>' +
+          '</div>' +
+        '</div>';
+      
+      showDialog(dialog, overlay);
+      
+      var progressFill = dialog.querySelector('.dialog-progress-fill');
+      var progressPercent = dialog.querySelector('.dialog-progress-percent');
+      var progressMessage = dialog.querySelector('.progress-message');
+      
+      return {
+        update: function(percent, message) {
+          progressFill.style.width = percent + '%';
+          progressPercent.textContent = Math.round(percent) + '%';
+          if (message) progressMessage.textContent = message;
+        },
+        close: function() {
+          closeDialog(dialog, overlay);
+        }
+      };
+    },
+
+    showToast: function(message, type, duration) {
+      var existing = document.querySelector('.toast-notification');
+      if (existing) existing.remove();
+      
+      var toast = document.createElement('div');
+      toast.className = 'toast-notification toast-' + (type || 'info');
+      toast.innerHTML = '<span class="toast-message">' + escapeHtml(message) + '</span>';
+      document.body.appendChild(toast);
+      
+      requestAnimationFrame(function() {
+        toast.classList.add('visible');
+      });
+      
+      setTimeout(function() {
+        toast.classList.remove('visible');
+        setTimeout(function() { if (toast.parentNode) toast.remove(); }, 300);
+      }, duration || 3000);
+    },
+
+    closeAll: closeAllDialogs
+  };
+})();

package/static/js/features.js

@@ -123,7 +123,7 @@
       overlay.classList.remove('visible');
 
       if (!currentConversation) {
-        showToast('Select a conversation first', 'error');
+        if (window.UIDialog) window.UIDialog.showToast('Select a conversation first', 'error');
         return;
       }
 
@@ -136,7 +136,7 @@
 
   function uploadFiles(files) {
     if (!currentConversation) {
-      showToast('No conversation selected', 'error');
+      if (window.UIDialog) window.UIDialog.showToast('No conversation selected', 'error');
       return;
     }
 
@@ -145,7 +145,7 @@
       formData.append('file', files[i]);
     }
 
-    showToast('Uploading ' + files.length + ' file(s)...', 'info');
+    if (window.UIDialog) window.UIDialog.showToast('Uploading ' + files.length + ' file(s)...', 'info');
 
     fetch(BASE + '/api/upload/' + currentConversation, {
       method: 'POST',
@@ -154,13 +154,13 @@
     .then(function(res) { return res.json(); })
     .then(function(data) {
       if (data.ok) {
-        showToast(data.count + ' file(s) uploaded', 'success');
+        if (window.UIDialog) window.UIDialog.showToast(data.count + ' file(s) uploaded', 'success');
       } else {
-        showToast('Upload failed: ' + (data.error || 'Unknown error'), 'error');
+        if (window.UIDialog) window.UIDialog.showToast('Upload failed: ' + (data.error || 'Unknown error'), 'error');
       }
     })
     .catch(function(err) {
-      showToast('Upload failed: ' + err.message, 'error');
+      if (window.UIDialog) window.UIDialog.showToast('Upload failed: ' + err.message, 'error');
     });
   }
 
@@ -197,6 +197,42 @@
     });
   }
 
+  function showVoiceDownloadProgress() {
+    if (window._voiceProgressDialog) return;
+    
+    window._voiceProgressDialog = window.UIDialog.showProgress({
+      title: 'Downloading Voice Models',
+      message: 'Preparing speech recognition and synthesis models...'
+    });
+    
+    var checkInterval = setInterval(function() {
+      if (isVoiceReady()) {
+        clearInterval(checkInterval);
+        if (window._voiceProgressDialog) {
+          window._voiceProgressDialog.close();
+          window._voiceProgressDialog = null;
+        }
+        switchView('voice');
+      }
+    }, 500);
+    
+    setTimeout(function() {
+      clearInterval(checkInterval);
+      if (window._voiceProgressDialog) {
+        window._voiceProgressDialog.close();
+        window._voiceProgressDialog = null;
+      }
+    }, 120000);
+  }
+
+  function updateVoiceProgress(percent, message) {
+    if (window._voiceProgressDialog) {
+      window._voiceProgressDialog.update(percent, message);
+    }
+  }
+
+  window.__updateVoiceProgress = updateVoiceProgress;
+
   function isVoiceReady() {
     var client = window.agentGUIClient;
     if (!client) return false;

package/static/js/streaming-renderer.js

@@ -98,6 +98,14 @@ class StreamingRenderer {
    * Setup scroll optimization and auto-scroll
    */
   setupScrollOptimization() {
+    if (!this.scrollContainer) return;
+    this._userScrolledUp = false;
+    this.scrollContainer.addEventListener('scroll', () => {
+      if (this._programmaticScroll) return;
+      const sc = this.scrollContainer;
+      const distFromBottom = sc.scrollHeight - sc.scrollTop - sc.clientHeight;
+      this._userScrolledUp = distFromBottom > 80;
+    });
   }
 
   /**
@@ -749,7 +757,6 @@ class StreamingRenderer {
 
     const details = document.createElement('details');
     details.className = 'block-tool-use folded-tool';
-    details.setAttribute('open', '');
     if (block.id) details.dataset.toolUseId = block.id;
     const colorIndex = this._getBlockColorIndex('tool_use');
     details.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
@@ -856,7 +863,7 @@ class StreamingRenderer {
   /**
    * Static HTML version of smart content rendering for use in string templates
    */
-  static renderSmartContentHTML(contentStr, escapeHtml) {
+  static renderSmartContentHTML(contentStr, escapeHtml, flat = false) {
     const trimmed = contentStr.trim();
     const esc = escapeHtml || window._escHtml;
 
@@ -874,8 +881,7 @@ class StreamingRenderer {
           const textParts = parsed.filter(b => b.type === 'text' && b.text);
           if (textParts.length > 0) {
             const combined = textParts.map(b => b.text).join('\n');
-            // Re-enter renderSmartContentHTML with the extracted text
-            return StreamingRenderer.renderSmartContentHTML(combined, esc);
+            return StreamingRenderer.renderSmartContentHTML(combined, esc, flat);
           }
         }
 
@@ -905,7 +911,7 @@ class StreamingRenderer {
       const cleanedContent = cleanedLines.join('\n');
 
       // Try to detect and highlight code based on content patterns
-      return StreamingRenderer.renderCodeWithHighlight(cleanedContent, esc);
+      return StreamingRenderer.renderCodeWithHighlight(cleanedContent, esc, flat);
     }
 
     // Check for system reminder tags and format them specially
@@ -1001,7 +1007,7 @@ class StreamingRenderer {
 
         // Add highlighted code
         if (codeContent.trim()) {
-          html += StreamingRenderer.renderCodeWithHighlight(codeContent, esc);
+          html += StreamingRenderer.renderCodeWithHighlight(codeContent, esc, flat);
         }
 
         // Add system reminders if any
@@ -1021,7 +1027,7 @@ class StreamingRenderer {
       if (contentWithoutReminders) {
         // Check if remaining content looks like code
         if (StreamingRenderer.detectCodeContent(contentWithoutReminders)) {
-          html += StreamingRenderer.renderCodeWithHighlight(contentWithoutReminders, esc);
+          html += StreamingRenderer.renderCodeWithHighlight(contentWithoutReminders, esc, flat);
         } else {
           html += `<pre class="tool-result-pre">${esc(contentWithoutReminders)}</pre>`;
         }
@@ -1050,7 +1056,7 @@ class StreamingRenderer {
     // Check if this looks like code
     const looksLikeCode = StreamingRenderer.detectCodeContent(trimmed);
     if (looksLikeCode) {
-      return StreamingRenderer.renderCodeWithHighlight(trimmed, esc);
+      return StreamingRenderer.renderCodeWithHighlight(trimmed, esc, flat);
     }
 
     const displayContent = trimmed.length > 2000 ? trimmed.substring(0, 2000) + '\n... (truncated)' : trimmed;
@@ -1109,11 +1115,12 @@ class StreamingRenderer {
   /**
    * Render code with basic syntax highlighting
    */
-  static renderCodeWithHighlight(code, esc) {
-    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";
+  static renderCodeWithHighlight(code, esc, flat = false) {
+    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;margin:0";
+    const codeHtml = `<pre style="${preStyle}"><code class="lazy-hl">${esc(code)}</code></pre>`;
+    if (flat) return codeHtml;
     const lineCount = code.split('\n').length;
     const summaryLabel = `code - ${lineCount} line${lineCount !== 1 ? 's' : ''}`;
-    const codeHtml = `<pre style="${preStyle}"><code class="lazy-hl">${esc(code)}</code></pre>`;
     return `<details class="collapsible-code"><summary class="collapsible-code-summary">${summaryLabel}</summary>${codeHtml}</details>`;
   }
 
@@ -1240,7 +1247,7 @@ class StreamingRenderer {
     `;
     wrapper.appendChild(header);
 
-    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this));
+    const renderedContent = StreamingRenderer.renderSmartContentHTML(contentStr, this.escapeHtml.bind(this), true);
     const body = document.createElement('div');
     body.className = 'folded-tool-body';
     if (!parentIsOpen) {
@@ -1348,7 +1355,6 @@ class StreamingRenderer {
     const details = document.createElement('details');
     details.className = isError ? 'folded-tool folded-tool-error' : 'folded-tool';
     details.dataset.eventType = 'result';
-    if (!isError) details.setAttribute('open', '');
     const colorIndex = this._getBlockColorIndex(isError ? 'error' : 'result');
     details.style.borderLeft = `3px solid var(--block-color-${colorIndex})`;
 
@@ -2003,16 +2009,22 @@ class StreamingRenderer {
    * Auto-scroll to bottom of container
    */
   autoScroll() {
-    if (this._scrollRafPending) return;
+    if (this._scrollRafPending || this._userScrolledUp) return;
     this._scrollRafPending = true;
     requestAnimationFrame(() => {
       this._scrollRafPending = false;
       if (this.scrollContainer) {
+        this._programmaticScroll = true;
         try { this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight; } catch (_) {}
+        this._programmaticScroll = false;
       }
     });
   }
 
+  resetScrollState() {
+    this._userScrolledUp = false;
+  }
+
   updateVirtualScroll() {
   }