agentgui 1.0.705 → 1.0.707

package/acp-queries.js

@@ -0,0 +1,182 @@
+import { randomUUID } from 'crypto';
+const gid = (p) => `${p}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+const uuid = () => randomUUID();
+const iso = (t) => new Date(t).toISOString();
+const j = (o) => JSON.stringify(o);
+const jp = (s) => { try { return JSON.parse(s); } catch { return {}; } };
+
+export function createACPQueries(db, prep) {
+  return {
+    createThread(metadata = {}) {
+      const id = uuid(), now = Date.now();
+      prep('INSERT INTO conversations (id, agentId, title, created_at, updated_at, status, metadata) VALUES (?, ?, ?, ?, ?, ?, ?)').run(id, 'unknown', null, now, now, 'idle', j(metadata));
+      return { thread_id: id, created_at: iso(now), updated_at: iso(now), metadata, status: 'idle' };
+    },
+    getThread(tid) {
+      const r = prep('SELECT * FROM conversations WHERE id = ?').get(tid);
+      if (!r) return null;
+      return { thread_id: r.id, created_at: iso(r.created_at), updated_at: iso(r.updated_at), metadata: jp(r.metadata), status: r.status || 'idle' };
+    },
+    patchThread(tid, upd) {
+      const t = this.getThread(tid);
+      if (!t) throw new Error('Thread not found');
+      const now = Date.now(), meta = upd.metadata !== undefined ? upd.metadata : t.metadata, stat = upd.status !== undefined ? upd.status : t.status;
+      prep('UPDATE conversations SET metadata = ?, status = ?, updated_at = ? WHERE id = ?').run(j(meta), stat, now, tid);
+      return { thread_id: tid, created_at: t.created_at, updated_at: iso(now), metadata: meta, status: stat };
+    },
+    deleteThread(tid) {
+      const pr = prep('SELECT COUNT(*) as count FROM run_metadata WHERE thread_id = ? AND status = ?').get(tid, 'pending');
+      if (pr && pr.count > 0) throw new Error('Cannot delete thread with pending runs');
+      db.transaction(() => {
+        prep('DELETE FROM thread_states WHERE thread_id = ?').run(tid);
+        prep('DELETE FROM checkpoints WHERE thread_id = ?').run(tid);
+        prep('DELETE FROM run_metadata WHERE thread_id = ?').run(tid);
+        prep('DELETE FROM sessions WHERE conversationId = ?').run(tid);
+        prep('DELETE FROM messages WHERE conversationId = ?').run(tid);
+        prep('DELETE FROM chunks WHERE conversationId = ?').run(tid);
+        prep('DELETE FROM events WHERE conversationId = ?').run(tid);
+        prep('DELETE FROM conversations WHERE id = ?').run(tid);
+      })();
+      return true;
+    },
+    saveThreadState(tid, cid, sd) {
+      const id = gid('state'), now = Date.now();
+      prep('INSERT INTO thread_states (id, thread_id, checkpoint_id, state_data, created_at) VALUES (?, ?, ?, ?, ?)').run(id, tid, cid, j(sd), now);
+      return { id, thread_id: tid, checkpoint_id: cid, created_at: iso(now) };
+    },
+    getThreadState(tid, cid = null) {
+      const r = cid ? prep('SELECT * FROM thread_states WHERE thread_id = ? AND checkpoint_id = ? ORDER BY created_at DESC LIMIT 1').get(tid, cid) : prep('SELECT * FROM thread_states WHERE thread_id = ? ORDER BY created_at DESC LIMIT 1').get(tid);
+      if (!r) return null;
+      const sd = jp(r.state_data);
+      return { checkpoint: { checkpoint_id: r.checkpoint_id }, values: sd.values || {}, messages: sd.messages || [], metadata: sd.metadata || {} };
+    },
+    getThreadHistory(tid, lim = 50, off = 0) {
+      const tot = prep('SELECT COUNT(*) as count FROM thread_states WHERE thread_id = ?').get(tid).count;
+      const rows = prep('SELECT * FROM thread_states WHERE thread_id = ? ORDER BY created_at DESC LIMIT ? OFFSET ?').all(tid, lim, off);
+      const states = rows.map(r => { const sd = jp(r.state_data); return { checkpoint: { checkpoint_id: r.checkpoint_id }, values: sd.values || {}, messages: sd.messages || [], metadata: sd.metadata || {} }; });
+      return { states, total: tot, limit: lim, offset: off, hasMore: off + lim < tot };
+    },
+    copyThread(stid) {
+      const st = this.getThread(stid);
+      if (!st) throw new Error('Source thread not found');
+      const ntid = uuid(), now = Date.now();
+      db.transaction(() => {
+        prep('INSERT INTO conversations (id, agentId, title, created_at, updated_at, status, metadata, workingDirectory) SELECT ?, agentId, title || \' (copy)\', ?, ?, status, metadata, workingDirectory FROM conversations WHERE id = ?').run(ntid, now, now, stid);
+        const cps = prep('SELECT * FROM checkpoints WHERE thread_id = ? ORDER BY sequence ASC').all(stid);
+        cps.forEach(cp => prep('INSERT INTO checkpoints (id, thread_id, checkpoint_name, sequence, created_at) VALUES (?, ?, ?, ?, ?)').run(uuid(), ntid, cp.checkpoint_name, cp.sequence, now));
+        const sts = prep('SELECT * FROM thread_states WHERE thread_id = ? ORDER BY created_at ASC').all(stid);
+        sts.forEach(s => prep('INSERT INTO thread_states (id, thread_id, checkpoint_id, state_data, created_at) VALUES (?, ?, ?, ?, ?)').run(gid('state'), ntid, s.checkpoint_id, s.state_data, now));
+        const msgs = prep('SELECT * FROM messages WHERE conversationId = ? ORDER BY created_at ASC').all(stid);
+        msgs.forEach(m => prep('INSERT INTO messages (id, conversationId, role, content, created_at) VALUES (?, ?, ?, ?, ?)').run(gid('msg'), ntid, m.role, m.content, now));
+      })();
+      return this.getThread(ntid);
+    },
+    createCheckpoint(tid, name = null) {
+      const id = uuid(), now = Date.now();
+      const ms = prep('SELECT MAX(sequence) as max FROM checkpoints WHERE thread_id = ?').get(tid);
+      const seq = (ms?.max ?? -1) + 1;
+      prep('INSERT INTO checkpoints (id, thread_id, checkpoint_name, sequence, created_at) VALUES (?, ?, ?, ?, ?)').run(id, tid, name, seq, now);
+      return { checkpoint_id: id, thread_id: tid, checkpoint_name: name, sequence: seq, created_at: iso(now) };
+    },
+    getCheckpoint(cid) {
+      const r = prep('SELECT * FROM checkpoints WHERE id = ?').get(cid);
+      if (!r) return null;
+      return { checkpoint_id: r.id, thread_id: r.thread_id, checkpoint_name: r.checkpoint_name, sequence: r.sequence, created_at: iso(r.created_at) };
+    },
+    listCheckpoints(tid, lim = 50, off = 0) {
+      const tot = prep('SELECT COUNT(*) as count FROM checkpoints WHERE thread_id = ?').get(tid).count;
+      const rows = prep('SELECT * FROM checkpoints WHERE thread_id = ? ORDER BY sequence DESC LIMIT ? OFFSET ?').all(tid, lim, off);
+      const cps = rows.map(r => ({ checkpoint_id: r.id, thread_id: r.thread_id, checkpoint_name: r.checkpoint_name, sequence: r.sequence, created_at: iso(r.created_at) }));
+      return { checkpoints: cps, total: tot, limit: lim, offset: off, hasMore: off + lim < tot };
+    },
+    createRun(aid, tid = null, inp = null, cfg = null, wh = null) {
+      const rid = uuid(), now = Date.now(), mid = gid('runmeta');
+      let atid = tid;
+      if (!tid) {
+        atid = uuid();
+        prep('INSERT INTO conversations (id, agentId, title, created_at, updated_at, status, metadata) VALUES (?, ?, ?, ?, ?, ?, ?)').run(atid, aid, 'Stateless Run', now, now, 'idle', '{"stateless":true}');
+      }
+      prep('INSERT INTO sessions (id, conversationId, status, started_at, completed_at, response, error) VALUES (?, ?, ?, ?, ?, ?, ?)').run(rid, atid, 'pending', now, null, null, null);
+      prep('INSERT INTO run_metadata (id, run_id, thread_id, agent_id, status, input, config, webhook_url, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)').run(mid, rid, tid, aid, 'pending', inp ? j(inp) : null, cfg ? j(cfg) : null, wh, now, now);
+      return { run_id: rid, thread_id: tid, agent_id: aid, status: 'pending', created_at: iso(now), updated_at: iso(now) };
+    },
+    getRun(rid) {
+      const r = prep('SELECT * FROM run_metadata WHERE run_id = ?').get(rid);
+      if (!r) return null;
+      return { run_id: r.run_id, thread_id: r.thread_id, agent_id: r.agent_id, status: r.status, created_at: iso(r.created_at), updated_at: iso(r.updated_at) };
+    },
+    updateRunStatus(rid, stat) {
+      const now = Date.now();
+      prep('UPDATE run_metadata SET status = ?, updated_at = ? WHERE run_id = ?').run(stat, now, rid);
+      prep('UPDATE sessions SET status = ? WHERE id = ?').run(stat, rid);
+      return this.getRun(rid);
+    },
+    cancelRun(rid) {
+      const r = this.getRun(rid);
+      if (!r) throw new Error('Run not found');
+      if (['success', 'error', 'cancelled'].includes(r.status)) throw new Error('Run already completed or cancelled');
+      return this.updateRunStatus(rid, 'cancelled');
+    },
+    deleteRun(rid) {
+      db.transaction(() => {
+        prep('DELETE FROM chunks WHERE sessionId = ?').run(rid);
+        prep('DELETE FROM events WHERE sessionId = ?').run(rid);
+        prep('DELETE FROM run_metadata WHERE run_id = ?').run(rid);
+        prep('DELETE FROM sessions WHERE id = ?').run(rid);
+      })();
+      return true;
+    },
+    getThreadRuns(tid, lim = 50, off = 0) {
+      const tot = prep('SELECT COUNT(*) as count FROM run_metadata WHERE thread_id = ?').get(tid).count;
+      const rows = prep('SELECT * FROM run_metadata WHERE thread_id = ? ORDER BY created_at DESC LIMIT ? OFFSET ?').all(tid, lim, off);
+      const runs = rows.map(r => ({ run_id: r.run_id, thread_id: r.thread_id, agent_id: r.agent_id, status: r.status, created_at: iso(r.created_at), updated_at: iso(r.updated_at) }));
+      return { runs, total: tot, limit: lim, offset: off, hasMore: off + lim < tot };
+    },
+    searchThreads(flt = {}) {
+      const { metadata, status, dateRange, limit = 50, offset = 0 } = flt;
+      let wh = "status != 'deleted'", prm = [];
+      if (status) { wh += ' AND status = ?'; prm.push(status); }
+      if (dateRange?.start) { wh += ' AND created_at >= ?'; prm.push(new Date(dateRange.start).getTime()); }
+      if (dateRange?.end) { wh += ' AND created_at <= ?'; prm.push(new Date(dateRange.end).getTime()); }
+      if (metadata) { for (const [k, v] of Object.entries(metadata)) { wh += ' AND metadata LIKE ?'; prm.push(`%"${k}":"${v}"%`); } }
+      const tot = prep(`SELECT COUNT(*) as count FROM conversations WHERE ${wh}`).get(...prm).count;
+      const rows = prep(`SELECT * FROM conversations WHERE ${wh} ORDER BY updated_at DESC LIMIT ? OFFSET ?`).all(...prm, limit, offset);
+      const ths = rows.map(r => ({ thread_id: r.id, created_at: iso(r.created_at), updated_at: iso(r.updated_at), metadata: jp(r.metadata), status: r.status || 'idle' }));
+      return { threads: ths, total: tot, limit, offset, hasMore: offset + limit < tot };
+    },
+    searchAgents(agents, flt = {}) {
+      const { name, version, capabilities, limit = 50, offset = 0 } = flt;
+      let results = agents;
+      if (name) {
+        const n = name.toLowerCase();
+        results = results.filter(a => a.name.toLowerCase().includes(n) || a.id.toLowerCase().includes(n));
+      }
+      if (capabilities) {
+        results = results.filter(a => {
+          const desc = this.getAgentDescriptor ? this.getAgentDescriptor(a.id) : null;
+          if (!desc) return false;
+          const caps = desc.specs?.capabilities || {};
+          if (capabilities.streaming !== undefined && !caps.streaming) return false;
+          if (capabilities.threads !== undefined && caps.threads !== capabilities.threads) return false;
+          if (capabilities.interrupts !== undefined && caps.interrupts !== capabilities.interrupts) return false;
+          return true;
+        });
+      }
+      const total = results.length;
+      const paginated = results.slice(offset, offset + limit);
+      const agents_list = paginated.map(a => ({ agent_id: a.id, name: a.name, version: version || '1.0.0', path: a.path }));
+      return { agents: agents_list, total, limit, offset, hasMore: offset + limit < total };
+    },
+    searchRuns(flt = {}) {
+      const { agent_id, thread_id, status, limit = 50, offset = 0 } = flt;
+      let wh = '1=1', prm = [];
+      if (agent_id) { wh += ' AND agent_id = ?'; prm.push(agent_id); }
+      if (thread_id) { wh += ' AND thread_id = ?'; prm.push(thread_id); }
+      if (status) { wh += ' AND status = ?'; prm.push(status); }
+      const tot = prep(`SELECT COUNT(*) as count FROM run_metadata WHERE ${wh}`).get(...prm).count;
+      const rows = prep(`SELECT * FROM run_metadata WHERE ${wh} ORDER BY created_at DESC LIMIT ? OFFSET ?`).all(...prm, limit, offset);
+      const runs = rows.map(r => ({ run_id: r.run_id, thread_id: r.thread_id, agent_id: r.agent_id, status: r.status, created_at: iso(r.created_at), updated_at: iso(r.updated_at) }));
+      return { runs, total: tot, limit, offset, hasMore: offset + limit < tot };
+    }
+  };
+}

package/lib/claude-runner.js

@@ -603,7 +603,46 @@ registry.register({
 
   parseOutput(line) {
     try {
-      return JSON.parse(line);
+      const entry = JSON.parse(line);
+      if (!entry || typeof entry !== 'object') return null;
+
+      // Filter isMeta user entries (local command caveats, not real conversation turns)
+      if (entry.type === 'user' && entry.isMeta === true) return null;
+
+      // Mark isCompactSummary entries so renderer can display them specially
+      // (already passes through as-is, renderer checks this flag)
+
+      // Detect rate limit via isApiErrorMessage + error field
+      if (entry.isApiErrorMessage === true && entry.error === 'rate_limit') {
+        entry._rateLimitDetected = true;
+      }
+
+      // Annotate streaming fragments vs final consolidated response
+      // assistant entries with stop_reason: null are fragments; non-null stop_reason is final
+      if (entry.type === 'assistant' && entry.message) {
+        entry._isFragment = entry.message.stop_reason === null || entry.message.stop_reason === undefined;
+      }
+
+      // Extract turn duration from system/turn_duration entries
+      if (entry.type === 'system' && entry.subtype === 'turn_duration' && entry.durationMs) {
+        entry._turnDurationMs = entry.durationMs;
+      }
+
+      // Extract compact boundary metadata
+      if (entry.type === 'system' && entry.subtype === 'compact_boundary' && entry.compactMetadata) {
+        entry._preTokens = entry.compactMetadata.preTokens;
+      }
+
+      // Normalize cache usage fields into a flat structure for cost tracking
+      if (entry.message?.usage) {
+        const u = entry.message.usage;
+        entry._cacheUsage = {
+          cache_creation: u.cache_creation_input_tokens || u['cache_creation.ephemeral_1h_input_tokens'] || u['cache_creation.ephemeral_5m_input_tokens'] || 0,
+          cache_read: u.cache_read_input_tokens || 0
+        };
+      }
+
+      return entry;
     } catch {
       return null;
     }

package/package.json

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

package/static/js/event-processor.js

@@ -23,6 +23,11 @@ class EventProcessor {
       return null;
     }
 
+    // Filter isMeta user entries (local command caveats injected by Claude Code CLI)
+    if (event.type === 'user' && event.isMeta === true) {
+      return null;
+    }
+
     const startTime = performance.now();
     this.stats.totalEvents++;
 
@@ -42,6 +47,25 @@ class EventProcessor {
         processTime: 0
       };
 
+      // Route isCompactSummary entries to special display type
+      if (event.isCompactSummary === true) {
+        processed.type = 'compact_summary';
+        this.stats.transformedEvents++;
+      }
+
+      // Extract and flatten cache usage for cost tracking
+      if (event.message?.usage) {
+        const u = event.message.usage;
+        processed._cacheCreation = u.cache_creation_input_tokens
+          || u['cache_creation.ephemeral_1h_input_tokens']
+          || u['cache_creation.ephemeral_5m_input_tokens']
+          || 0;
+        processed._cacheRead = u.cache_read_input_tokens || 0;
+        if (processed._cacheCreation || processed._cacheRead) {
+          this.stats.transformedEvents++;
+        }
+      }
+
       if (event.type === 'file_read' && event.path && this.isImagePath(event.path)) {
         processed.isImage = true;
         processed.imagePath = event.path;
@@ -101,90 +125,11 @@ class EventProcessor {
     return true;
   }
 
-  /**
-   * Detect language from content or hint
-   */
-  detectLanguage(content, hint = null) {
-    if (hint) {
-      return hint.toLowerCase();
-    }
-
-    // Simple language detection based on shebang or content patterns
-    if (content.startsWith('#!/')) {
-      if (content.includes('python')) return 'python';
-      if (content.includes('node') || content.includes('javascript')) return 'javascript';
-      if (content.includes('bash') || content.includes('sh')) return 'bash';
-      if (content.includes('ruby')) return 'ruby';
-    }
-
-    // Pattern detection
-    if (content.includes('def ') && content.includes(':')) return 'python';
-    if (content.includes('function') || content.includes('=>')) return 'javascript';
-    if (content.includes('fn ') && content.includes('->')) return 'rust';
-    if (content.includes('public static void') || content.includes('class ')) return 'java';
-
-    return 'plaintext';
-  }
-
-  /**
-   * Parse JSON safely
-   */
-  parseJSON(jsonStr) {
-    try {
-      return JSON.parse(jsonStr);
-    } catch (e) {
-      console.error('JSON parse error:', e);
-      return null;
-    }
-  }
-
-  /**
-   * Format JSON for display
-   */
-  formatJSON(obj, indent = 2) {
-    try {
-      return JSON.stringify(obj, null, indent);
-    } catch (e) {
-      return String(obj);
-    }
-  }
-
-  /**
-   * Extract file extension
-   */
   getFileExtension(filePath) {
     const match = filePath.match(/\.([^.]+)$/);
     return match ? match[1].toLowerCase() : null;
   }
 
-  /**
-   * Truncate text with ellipsis
-   */
-  truncateText(text, maxLength = 200) {
-    if (text.length <= maxLength) {
-      return text;
-    }
-    return text.substring(0, maxLength) + '...';
-  }
-
-  /**
-   * HTML escape utility
-   */
-  escapeHtml(text) {
-    return window._escHtml(text);
-  }
-
-  /**
-   * Format timestamp
-   */
-  formatTimestamp(timestamp) {
-    const date = new Date(timestamp);
-    return date.toLocaleTimeString();
-  }
-
-  /**
-   * Get statistics
-   */
   getStats() {
     return { ...this.stats };
   }

package/static/js/streaming-renderer.js

@@ -350,6 +350,16 @@ class StreamingRenderer {
           return null;
         case 'tool_use':
           return this.renderToolUse(event);
+        case 'compact_boundary':
+          return this.renderCompactBoundary(event);
+        case 'compact_summary':
+          return this.renderCompactBoundary(event);
+        case 'turn_duration':
+          return this.renderTurnDuration(event);
+        case 'agent_progress':
+          return this.renderAgentProgress(event);
+        case 'mcp_progress':
+          return this.renderMcpProgress(event);
         default:
           return this.renderGeneric(event);
       }
@@ -527,7 +537,7 @@ class StreamingRenderer {
   }
 
   /**
-   * Render thinking block (expandable)
+   * Render thinking block (expandable), signature-aware
    */
   renderBlockThinking(block, context) {
     const div = document.createElement('div');
@@ -535,11 +545,13 @@ class StreamingRenderer {
     div.classList.add(this._getBlockTypeClass('thinking'));
 
     const thinking = block.thinking || '';
+    const hasSignature = !!block.signature;
     div.innerHTML = `
       <details>
         <summary>
           <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
           <span>Thinking Process</span>
+          ${hasSignature ? '<span style="margin-left:0.5rem;font-size:0.65rem;opacity:0.5;font-weight:400">verified</span>' : ''}
         </summary>
         <div class="thinking-content">${this.escapeHtml(thinking)}</div>
       </details>
@@ -1333,6 +1345,8 @@ class StreamingRenderer {
    * Render system event
    */
   renderBlockSystem(block, context) {
+    if (block.subtype === 'compact_boundary') return this.renderCompactBoundary(block);
+    if (block.subtype === 'turn_duration') return this.renderTurnDuration(block);
     if (!block.model && !block.cwd && !block.tools) return null;
     const details = document.createElement('details');
     details.className = 'folded-tool folded-tool-info permanently-expanded';
@@ -2030,6 +2044,70 @@ class StreamingRenderer {
 
 
 
+  renderCompactBoundary(event) {
+    const preTokens = event._preTokens || event.compactMetadata?.preTokens;
+    const div = document.createElement('div');
+    div.className = 'event-compact-boundary';
+    div.dataset.eventType = 'compact_boundary';
+    div.innerHTML = `
+      <div style="display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem;margin:0.5rem 0;background:var(--color-bg-secondary);border-radius:0.375rem;font-size:0.75rem;color:var(--color-text-secondary)">
+        <svg viewBox="0 0 20 20" fill="currentColor" style="width:1rem;height:1rem;flex-shrink:0;opacity:0.6"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/></svg>
+        <span>Conversation compacted${preTokens ? ` (${preTokens.toLocaleString()} tokens before)` : ''}</span>
+      </div>
+    `;
+    return div;
+  }
+
+  renderTurnDuration(event) {
+    const ms = event._turnDurationMs || event.durationMs;
+    if (!ms) return null;
+    const sec = (ms / 1000).toFixed(1);
+    const div = document.createElement('div');
+    div.className = 'event-turn-duration';
+    div.dataset.eventType = 'turn_duration';
+    div.innerHTML = `
+      <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.75rem;font-size:0.7rem;color:var(--color-text-secondary);opacity:0.7">
+        <svg viewBox="0 0 20 20" fill="currentColor" style="width:0.75rem;height:0.75rem;flex-shrink:0"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/></svg>
+        <span>${sec}s</span>
+      </div>
+    `;
+    return div;
+  }
+
+  renderAgentProgress(event) {
+    const msg = event.data?.message || event.message || '';
+    if (!msg) return null;
+    const div = document.createElement('div');
+    div.className = 'event-agent-progress';
+    div.dataset.eventType = 'agent_progress';
+    div.innerHTML = `
+      <div style="display:flex;align-items:flex-start;gap:0.5rem;padding:0.375rem 0.75rem;margin:0.25rem 0;background:var(--color-bg-secondary);border-left:2px solid #7c3aed;border-radius:0 0.25rem 0.25rem 0;font-size:0.75rem;color:var(--color-text-secondary)">
+        <svg viewBox="0 0 20 20" fill="currentColor" style="width:0.875rem;height:0.875rem;flex-shrink:0;margin-top:0.125rem;color:#7c3aed"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5z" clip-rule="evenodd"/></svg>
+        <span>${this.escapeHtml(msg)}</span>
+      </div>
+    `;
+    return div;
+  }
+
+  renderMcpProgress(event) {
+    const status = event.status || 'running';
+    const name = event.tool || event.name || 'MCP tool';
+    const statusColors = { running: '#0891b2', completed: '#059669', failed: '#dc2626' };
+    const color = statusColors[status] || statusColors.running;
+    const div = document.createElement('div');
+    div.className = 'event-mcp-progress';
+    div.dataset.eventType = 'mcp_progress';
+    div.innerHTML = `
+      <div style="display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.75rem;font-size:0.75rem;color:var(--color-text-secondary)">
+        <span style="width:0.5rem;height:0.5rem;border-radius:50%;background:${color};flex-shrink:0"></span>
+        <span style="color:${color};font-weight:600">MCP</span>
+        <span>${this.escapeHtml(name)}</span>
+        <span style="opacity:0.6">${this.escapeHtml(status)}</span>
+      </div>
+    `;
+    return div;
+  }
+
   /**
    * Render generic event with formatted key-value pairs
    */