agentgui 1.0.253 → 1.0.255

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.253",
+  "version": "1.0.255",
   "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);

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,9 @@ class AgentGUIClient {
 
       this.cacheCurrentConversation();
       this.stopChunkPolling();
+      if (this.renderer.resetScrollState) this.renderer.resetScrollState();
+      this._userScrolledUp = false;
+      this._removeNewContentPill();
       var prevId = this.state.currentConversation?.id;
       if (prevId && prevId !== conversationId) {
         if (this.wsManager.isConnected && !this.state.streamingConversations.has(prevId)) {

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