agentgui 1.0.197 → 1.0.199

package/package.json

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

package/server.js

@@ -410,6 +410,46 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    const queueMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/queue$/);
+    if (queueMatch && req.method === 'GET') {
+      const conversationId = queueMatch[1];
+      const conv = queries.getConversation(conversationId);
+      if (!conv) { sendJSON(req, res, 404, { error: 'Conversation not found' }); return; }
+      const queue = messageQueues.get(conversationId) || [];
+      sendJSON(req, res, 200, { queue });
+      return;
+    }
+
+    const queueItemMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/queue\/([^/]+)$/);
+    if (queueItemMatch && req.method === 'DELETE') {
+      const conversationId = queueItemMatch[1];
+      const messageId = queueItemMatch[2];
+      const queue = messageQueues.get(conversationId);
+      if (!queue) { sendJSON(req, res, 404, { error: 'Queue not found' }); return; }
+      const index = queue.findIndex(q => q.messageId === messageId);
+      if (index === -1) { sendJSON(req, res, 404, { error: 'Queued message not found' }); return; }
+      queue.splice(index, 1);
+      if (queue.length === 0) messageQueues.delete(conversationId);
+      broadcastSync({ type: 'queue_status', conversationId, queueLength: queue?.length || 0, timestamp: Date.now() });
+      sendJSON(req, res, 200, { deleted: true });
+      return;
+    }
+
+    if (queueItemMatch && req.method === 'PATCH') {
+      const conversationId = queueItemMatch[1];
+      const messageId = queueItemMatch[2];
+      const body = await parseBody(req);
+      const queue = messageQueues.get(conversationId);
+      if (!queue) { sendJSON(req, res, 404, { error: 'Queue not found' }); return; }
+      const item = queue.find(q => q.messageId === messageId);
+      if (!item) { sendJSON(req, res, 404, { error: 'Queued message not found' }); return; }
+      if (body.content !== undefined) item.content = body.content;
+      if (body.agentId !== undefined) item.agentId = body.agentId;
+      broadcastSync({ type: 'queue_updated', conversationId, messageId, content: item.content, agentId: item.agentId, timestamp: Date.now() });
+      sendJSON(req, res, 200, { updated: true, item });
+      return;
+    }
+
     const messageMatch = pathOnly.match(/^\/api\/conversations\/([^/]+)\/messages\/([^/]+)$/);
     if (messageMatch && req.method === 'GET') {
       const msg = queries.getMessage(messageMatch[2]);
@@ -573,7 +613,11 @@ const server = http.createServer(async (req, res) => {
         if (!pkg.scripts || !pkg.scripts[script]) { sendJSON(req, res, 400, { error: `Script "${script}" not found` }); return; }
       } catch { sendJSON(req, res, 400, { error: 'No package.json' }); return; }
 
-      const child = spawn('npm', ['run', script], { cwd: wd, stdio: ['ignore', 'pipe', 'pipe'], detached: true, env: { ...process.env, FORCE_COLOR: '1' } });
+      const childEnv = { ...process.env, FORCE_COLOR: '1' };
+      delete childEnv.PORT;
+      delete childEnv.BASE_URL;
+      delete childEnv.HOT_RELOAD;
+      const child = spawn('npm', ['run', script], { cwd: wd, stdio: ['ignore', 'pipe', 'pipe'], detached: true, env: childEnv });
       activeScripts.set(conversationId, { process: child, script, startTime: Date.now() });
       broadcastSync({ type: 'script_started', conversationId, script, timestamp: Date.now() });
 
@@ -616,6 +660,100 @@ const server = http.createServer(async (req, res) => {
       return;
     }
 
+    if (pathOnly === '/api/agents/auth-status' && req.method === 'GET') {
+      const statuses = discoveredAgents.map(agent => {
+        const status = { id: agent.id, name: agent.name, authenticated: false, detail: '' };
+        try {
+          if (agent.id === 'claude-code') {
+            const credFile = path.join(os.homedir(), '.claude', '.credentials.json');
+            if (fs.existsSync(credFile)) {
+              const creds = JSON.parse(fs.readFileSync(credFile, 'utf-8'));
+              if (creds.claudeAiOauth && creds.claudeAiOauth.expiresAt > Date.now()) {
+                status.authenticated = true;
+                status.detail = creds.claudeAiOauth.subscriptionType || 'authenticated';
+              } else {
+                status.detail = 'expired';
+              }
+            } else {
+              status.detail = 'no credentials';
+            }
+          } else if (agent.id === 'gemini') {
+            const acctFile = path.join(os.homedir(), '.gemini', 'google_accounts.json');
+            if (fs.existsSync(acctFile)) {
+              const accts = JSON.parse(fs.readFileSync(acctFile, 'utf-8'));
+              if (accts.active) {
+                status.authenticated = true;
+                status.detail = accts.active;
+              } else {
+                status.detail = 'logged out';
+              }
+            } else {
+              status.detail = 'no credentials';
+            }
+          } else if (agent.id === 'opencode') {
+            const out = execSync('opencode auth list 2>&1', { encoding: 'utf-8', timeout: 5000 });
+            const countMatch = out.match(/(\d+)\s+credentials?/);
+            if (countMatch && parseInt(countMatch[1], 10) > 0) {
+              status.authenticated = true;
+              status.detail = countMatch[1] + ' credential(s)';
+            } else {
+              status.detail = 'no credentials';
+            }
+          } else {
+            status.detail = 'unknown';
+          }
+        } catch (e) {
+          status.detail = 'check failed';
+        }
+        return status;
+      });
+      sendJSON(req, res, 200, { agents: statuses });
+      return;
+    }
+
+    const agentAuthMatch = pathOnly.match(/^\/api\/agents\/([^/]+)\/auth$/);
+    if (agentAuthMatch && req.method === 'POST') {
+      const agentId = agentAuthMatch[1];
+      const agent = discoveredAgents.find(a => a.id === agentId);
+      if (!agent) { sendJSON(req, res, 404, { error: 'Agent not found' }); return; }
+
+      const authCommands = {
+        'claude-code': { cmd: 'claude', args: ['setup-token'] },
+        'opencode': { cmd: 'opencode', args: ['auth', 'login'] },
+        'gemini': { cmd: 'gemini', args: [] }
+      };
+      const authCmd = authCommands[agentId];
+      if (!authCmd) { sendJSON(req, res, 400, { error: 'No auth command for this agent' }); return; }
+
+      const conversationId = '__agent_auth__';
+      if (activeScripts.has(conversationId)) {
+        sendJSON(req, res, 409, { error: 'Auth process already running' });
+        return;
+      }
+
+      const child = spawn(authCmd.cmd, authCmd.args, {
+        stdio: ['pipe', 'pipe', 'pipe'],
+        env: { ...process.env, FORCE_COLOR: '1' }
+      });
+      activeScripts.set(conversationId, { process: child, script: 'auth-' + agentId, startTime: Date.now() });
+      broadcastSync({ type: 'script_started', conversationId, script: 'auth-' + 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);
+        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/import/claude-code' && req.method === 'GET') {
       const result = queries.importClaudeCodeConversations();
@@ -1378,7 +1516,7 @@ wss.on('connection', (ws, req) => {
 
 const BROADCAST_TYPES = new Set([
   'message_created', 'conversation_created', 'conversation_updated',
-  'conversations_updated', 'conversation_deleted', 'queue_status',
+  'conversations_updated', 'conversation_deleted', 'queue_status', 'queue_updated',
   'streaming_start', 'streaming_complete', 'streaming_error',
   'rate_limit_hit', 'rate_limit_clear',
   'script_started', 'script_stopped', 'script_output'

package/static/index.html

@@ -447,12 +447,12 @@
     .script-buttons { display: flex; gap: 0.25rem; align-items: center; }
     .header-icon-btn {
       display: flex; align-items: center; justify-content: center;
-      width: 32px; height: 32px; background: none; border: none;
+      width: 36px; height: 36px; background: none; border: none;
       border-radius: 0.375rem; cursor: pointer; color: var(--color-text-secondary);
       transition: background-color 0.15s, color 0.15s;
     }
     .header-icon-btn:hover { background-color: var(--color-bg-primary); color: var(--color-text-primary); }
-    .header-icon-btn svg { width: 16px; height: 16px; }
+    .header-icon-btn svg { width: 18px; height: 18px; }
     #scriptStartBtn { color: var(--color-success); }
     #scriptStartBtn:hover { background-color: rgba(16,185,129,0.1); color: var(--color-success); }
     .script-dev-btn { color: var(--color-info); }
@@ -460,6 +460,32 @@
     .script-stop-btn { color: var(--color-error); }
     .script-stop-btn:hover { background-color: rgba(239,68,68,0.1); color: var(--color-error); }
 
+    .agent-auth-btn { color: var(--color-text-secondary); position: relative; }
+    .agent-auth-btn.auth-ok { color: var(--color-success); }
+    .agent-auth-btn.auth-warn { color: var(--color-warning); }
+    .agent-auth-btn:hover { background-color: var(--color-bg-primary); }
+    .agent-auth-dropdown {
+      position: absolute; top: 100%; right: 0; z-index: 100;
+      min-width: 200px; padding: 0.25rem 0;
+      background: var(--color-bg-secondary); border: 1px solid var(--color-border);
+      border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      display: none;
+    }
+    .agent-auth-dropdown.open { display: block; }
+    .agent-auth-item {
+      display: flex; align-items: center; gap: 0.5rem;
+      padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.8125rem;
+      color: var(--color-text-primary); border: none; background: none; width: 100%;
+      text-align: left;
+    }
+    .agent-auth-item:hover { background: var(--color-bg-primary); }
+    .agent-auth-dot {
+      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+    }
+    .agent-auth-dot.ok { background: var(--color-success); }
+    .agent-auth-dot.missing { background: var(--color-warning); }
+    .agent-auth-dot.unknown { background: var(--color-text-secondary); }
+
     .terminal-container {
       flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #1e1e1e;
     }
@@ -2234,6 +2260,10 @@
               <svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="5" y="5" width="14" height="14" rx="1"></rect></svg>
             </button>
           </div>
+          <button class="header-icon-btn agent-auth-btn" id="agentAuthBtn" title="Agent authentication" aria-label="Agent authentication" style="display:none;">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
+            <div class="agent-auth-dropdown" id="agentAuthDropdown"></div>
+          </button>
           <div class="status-badge">
             <div class="status-indicator" data-status="disconnected"></div>
             <span id="connectionStatus" data-status-indicator>Disconnected</span>
@@ -2378,6 +2408,7 @@
   <script type="module" src="/gm/js/voice.js"></script>
   <script defer src="/gm/js/features.js"></script>
   <script defer src="/gm/js/script-runner.js"></script>
+  <script defer src="/gm/js/agent-auth.js"></script>
 
   <script>
     const savedTheme = localStorage.getItem('theme') || 'light';

package/static/js/agent-auth.js

@@ -0,0 +1,144 @@
+(function() {
+  var BASE = window.__BASE_URL || '';
+  var btn = document.getElementById('agentAuthBtn');
+  var dropdown = document.getElementById('agentAuthDropdown');
+  var agents = [];
+  var authRunning = false;
+  var AUTH_CONV_ID = '__agent_auth__';
+
+  function init() {
+    if (!btn || !dropdown) return;
+    btn.addEventListener('click', toggleDropdown);
+    document.addEventListener('click', function(e) {
+      if (!btn.contains(e.target)) closeDropdown();
+    });
+    window.addEventListener('conversation-selected', function() { fetchAuthStatus(); });
+    window.addEventListener('ws-message', onWsMessage);
+    fetchAuthStatus();
+  }
+
+  function fetchAuthStatus() {
+    fetch(BASE + '/api/agents/auth-status')
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        agents = data.agents || [];
+        updateButton();
+        renderDropdown();
+      })
+      .catch(function() {});
+  }
+
+  function updateButton() {
+    if (agents.length === 0) { btn.style.display = 'none'; return; }
+    btn.style.display = 'flex';
+    var allOk = agents.every(function(a) { return a.authenticated; });
+    var anyMissing = agents.some(function(a) { return !a.authenticated; });
+    btn.classList.toggle('auth-ok', allOk);
+    btn.classList.toggle('auth-warn', anyMissing);
+  }
+
+  function renderDropdown() {
+    dropdown.innerHTML = '';
+    agents.forEach(function(agent) {
+      var item = document.createElement('button');
+      item.className = 'agent-auth-item';
+      var dotClass = agent.authenticated ? 'ok' : (agent.detail === 'unknown' ? 'unknown' : 'missing');
+      item.innerHTML = '<span class="agent-auth-dot ' + dotClass + '"></span>' +
+        '<span>' + escapeHtml(agent.name) + '</span>' +
+        '<span style="margin-left:auto;font-size:0.7rem;color:var(--color-text-secondary)">' + escapeHtml(agent.detail) + '</span>';
+      item.addEventListener('click', function(e) {
+        e.stopPropagation();
+        closeDropdown();
+        triggerAuth(agent.id);
+      });
+      dropdown.appendChild(item);
+    });
+  }
+
+  function toggleDropdown(e) {
+    e.stopPropagation();
+    dropdown.classList.toggle('open');
+  }
+
+  function closeDropdown() {
+    dropdown.classList.remove('open');
+  }
+
+  function triggerAuth(agentId) {
+    if (authRunning) return;
+    fetch(BASE + '/api/agents/' + agentId + '/auth', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: '{}'
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.ok) {
+        authRunning = true;
+        showTerminalTab();
+        switchToTerminalView();
+        var term = getTerminal();
+        if (term) {
+          term.clear();
+          term.writeln('\x1b[36m[authenticating ' + agentId + ']\x1b[0m\r\n');
+        }
+      }
+    })
+    .catch(function() {});
+  }
+
+  function onWsMessage(e) {
+    var data = e.detail;
+    if (!data || data.conversationId !== AUTH_CONV_ID) return;
+    if (data.type === 'script_started') {
+      authRunning = true;
+      showTerminalTab();
+      switchToTerminalView();
+      var term = getTerminal();
+      if (term) {
+        term.clear();
+        term.writeln('\x1b[36m[authenticating ' + (data.agentId || '') + ']\x1b[0m\r\n');
+      }
+    } else if (data.type === 'script_output') {
+      showTerminalTab();
+      var term = getTerminal();
+      if (term) term.write(data.data);
+    } else if (data.type === 'script_stopped') {
+      authRunning = false;
+      var term = getTerminal();
+      var msg = data.error ? data.error : ('exited with code ' + (data.code || 0));
+      if (term) term.writeln('\r\n\x1b[90m[auth ' + msg + ']\x1b[0m');
+      setTimeout(fetchAuthStatus, 1000);
+    }
+  }
+
+  function showTerminalTab() {
+    var tabBtn = document.getElementById('terminalTabBtn');
+    if (tabBtn) tabBtn.style.display = '';
+  }
+
+  function switchToTerminalView() {
+    var bar = document.getElementById('viewToggleBar');
+    if (!bar) return;
+    var termBtn = bar.querySelector('[data-view="terminal"]');
+    if (termBtn) termBtn.click();
+  }
+
+  function getTerminal() {
+    return window.scriptRunner ? window.scriptRunner.getTerminal() : null;
+  }
+
+  function escapeHtml(s) {
+    var d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+
+  window.agentAuth = { refresh: fetchAuthStatus };
+})();

package/static/js/client.js

@@ -372,6 +372,9 @@ class AgentGUIClient {
         case 'queue_status':
           this.handleQueueStatus(data);
           break;
+        case 'queue_updated':
+          this.handleQueueUpdated(data);
+          break;
         case 'rate_limit_hit':
           this.handleRateLimitHit(data);
           break;
@@ -478,7 +481,7 @@ class AgentGUIClient {
                 const bFrag = document.createDocumentFragment();
                 sList.forEach(chunk => {
                   if (!chunk.block?.type) return;
-                  const el = this.renderer.renderBlock(chunk.block, chunk);
+                  const el = this.renderer.renderBlock(chunk.block, chunk, bFrag);
                   if (!el) return;
                   if (chunk.block.type === 'tool_result') {
                     const lastInFrag = bFrag.lastElementChild;
@@ -699,21 +702,68 @@ class AgentGUIClient {
 
   handleQueueStatus(data) {
     if (data.conversationId !== this.state.currentConversation?.id) return;
+    this.fetchAndRenderQueue(data.conversationId);
+  }
+
+  handleQueueUpdated(data) {
+    if (data.conversationId !== this.state.currentConversation?.id) return;
+    this.fetchAndRenderQueue(data.conversationId);
+  }
 
+  async fetchAndRenderQueue(conversationId) {
     const outputEl = document.querySelector('.conversation-messages');
     if (!outputEl) return;
 
-    let queueEl = outputEl.querySelector('.queue-indicator');
-    if (data.queueLength > 0) {
+    try {
+      const response = await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue`);
+      const { queue } = await response.json();
+
+      let queueEl = outputEl.querySelector('.queue-indicator');
+      if (!queue || queue.length === 0) {
+        if (queueEl) queueEl.remove();
+        return;
+      }
+
       if (!queueEl) {
         queueEl = document.createElement('div');
         queueEl.className = 'queue-indicator';
-        queueEl.style.cssText = 'padding:0.5rem 1rem;margin:0.5rem 0;border-radius:0.375rem;background:var(--color-warning);color:#000;font-size:0.875rem;text-align:center;';
         outputEl.appendChild(queueEl);
       }
-      queueEl.textContent = `${data.queueLength} message${data.queueLength > 1 ? 's' : ''} queued`;
-    } else if (queueEl) {
-      queueEl.remove();
+
+      queueEl.innerHTML = queue.map((q, i) => `
+        <div class="queue-item" data-message-id="${q.messageId}" style="padding:0.5rem 1rem;margin:0.5rem 0;border-radius:0.375rem;background:var(--color-warning);color:#000;font-size:0.875rem;display:flex;align-items:center;gap:0.5rem;">
+          <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${i + 1}. ${this.escapeHtml(q.content)}</span>
+          <button class="queue-edit-btn" data-index="${i}" style="padding:0.25rem 0.5rem;background:transparent;border:1px solid #000;border-radius:0.25rem;cursor:pointer;font-size:0.75rem;">Edit</button>
+          <button class="queue-delete-btn" data-index="${i}" style="padding:0.25rem 0.5rem;background:transparent;border:1px solid #000;border-radius:0.25rem;cursor:pointer;font-size:0.75rem;">Delete</button>
+        </div>
+      `).join('');
+
+      queueEl.querySelectorAll('.queue-delete-btn').forEach(btn => {
+        btn.addEventListener('click', async (e) => {
+          const index = parseInt(e.target.dataset.index);
+          const msgId = queue[index].messageId;
+          if (confirm('Delete this queued message?')) {
+            await fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue/${msgId}`, { method: 'DELETE' });
+          }
+        });
+      });
+
+      queueEl.querySelectorAll('.queue-edit-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          const index = parseInt(e.target.dataset.index);
+          const q = queue[index];
+          const newContent = prompt('Edit message:', q.content);
+          if (newContent !== null && newContent !== q.content) {
+            fetch(window.__BASE_URL + `/api/conversations/${conversationId}/queue/${q.messageId}`, {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ content: newContent })
+            });
+          }
+        });
+      });
+    } catch (err) {
+      console.error('Failed to fetch queue:', err);
     }
   }
 
@@ -1160,8 +1210,8 @@ class AgentGUIClient {
     if (!streamingEl) return;
     const blocksEl = streamingEl.querySelector('.streaming-blocks');
     if (!blocksEl) return;
-    const element = this.renderer.renderBlock(chunk.block, chunk);
-    if (!element) return;
+    const element = this.renderer.renderBlock(chunk.block, chunk, blocksEl);
+    if (!element) { this.scrollToBottom(); return; }
     if (chunk.block.type === 'tool_result') {
       const matchById = chunk.block.tool_use_id && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${chunk.block.tool_use_id}"]`);
       const lastEl = blocksEl.lastElementChild;
@@ -1187,8 +1237,8 @@ class AgentGUIClient {
       const blocksEl = streamingEl.querySelector('.streaming-blocks');
       if (!blocksEl) continue;
       for (const chunk of groups[sid]) {
-        const el = this.renderer.renderBlock(chunk.block, chunk);
-        if (!el) continue;
+        const el = this.renderer.renderBlock(chunk.block, chunk, blocksEl);
+        if (!el) { appended = true; continue; }
         if (chunk.block.type === 'tool_result') {
           const matchById = chunk.block.tool_use_id && blocksEl.querySelector(`.block-tool-use[data-tool-use-id="${chunk.block.tool_use_id}"]`);
           const lastEl = blocksEl.lastElementChild;
@@ -1271,7 +1321,6 @@ class AgentGUIClient {
    */
   disableControls() {
     if (this.ui.sendButton) this.ui.sendButton.disabled = true;
-    if (this.ui.agentSelector) this.ui.agentSelector.disabled = true;
   }
 
   /**
@@ -1279,7 +1328,6 @@ class AgentGUIClient {
    */
   enableControls() {
     if (this.ui.sendButton) this.ui.sendButton.disabled = false;
-    if (this.ui.agentSelector) this.ui.agentSelector.disabled = false;
   }
 
   /**
@@ -1501,7 +1549,7 @@ class AgentGUIClient {
             const blockFrag = document.createDocumentFragment();
             sessionChunkList.forEach(chunk => {
               if (!chunk.block?.type) return;
-              const element = this.renderer.renderBlock(chunk.block, chunk);
+              const element = this.renderer.renderBlock(chunk.block, chunk, blockFrag);
               if (!element) return;
               if (chunk.block.type === 'tool_result') {
                 const lastInFrag = blockFrag.lastElementChild;

package/static/js/streaming-renderer.js

@@ -328,13 +328,13 @@ class StreamingRenderer {
   /**
    * Render Claude message blocks with beautiful styling
    */
-  renderBlock(block, context = {}) {
+  renderBlock(block, context = {}, targetContainer = null) {
     if (!block || !block.type) return null;
 
     try {
       switch (block.type) {
         case 'text':
-          return this.renderBlockText(block, context);
+          return this.renderBlockText(block, context, targetContainer);
         case 'code':
           return this.renderBlockCode(block, context);
         case 'thinking':
@@ -363,7 +363,7 @@ class StreamingRenderer {
   /**
    * Render text block with semantic HTML
    */
-  renderBlockText(block, context) {
+  renderBlockText(block, context, targetContainer = null) {
     const text = block.text || '';
     const isHtml = this.containsHtmlTags(text);
     const cached = this.renderCache.get(text);
@@ -373,7 +373,8 @@ class StreamingRenderer {
       this.renderCache.set(text, html);
     }
 
-    const lastChild = this.outputContainer && this.outputContainer.lastElementChild;
+    const container = targetContainer || this.outputContainer;
+    const lastChild = container && container.lastElementChild;
     if (lastChild && lastChild.classList.contains('block-text') && !isHtml && !lastChild.classList.contains('html-content')) {
       lastChild.innerHTML += html;
       return null;