@yemi33/minions 0.1.11 → 0.1.13

package/dashboard/js/command-input.js

@@ -0,0 +1,268 @@
+// command-input.js — Command input UI functions extracted from dashboard.html
+
+// Auto-resize textarea
+function cmdAutoResize() {
+  const ta = document.getElementById('cmd-input');
+  ta.style.height = 'auto';
+  ta.style.height = Math.min(ta.scrollHeight, 200) + 'px';
+}
+
+function cmdUpdateHighlight() {
+  const text = document.getElementById('cmd-input').value;
+  const hl = document.getElementById('cmd-highlight');
+  if (!text) { hl.innerHTML = ''; return; }
+  // Escape HTML then wrap tokens with highlight spans
+  let html = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  html = html.replace(/(\/(?:plan|note|decide)\b)/gi, '<span class="hl-cmd">$1</span>');
+  html = html.replace(/(@\w+)/g, '<span class="hl-mention">$1</span>');
+  html = html.replace(/(![a-z]+\b)/gi, '<span class="hl-priority">$1</span>');
+  html = html.replace(/(#\S+)/g, '<span class="hl-project">$1</span>');
+  html = html.replace(/(--(?:stack|parallel)\b)/gi, '<span class="hl-flag">$1</span>');
+  hl.innerHTML = html + '\n'; // trailing newline prevents layout shift
+}
+
+function syncHighlightScroll() {
+  const ta = document.getElementById('cmd-input');
+  const hl = document.getElementById('cmd-highlight');
+  hl.scrollTop = ta.scrollTop;
+  hl.scrollLeft = ta.scrollLeft;
+}
+
+function cmdInputChanged() {
+  cmdAutoResize();
+  cmdUpdateHighlight();
+  cmdRenderMeta();
+
+  // Check for @ mention or # project trigger
+  const input = document.getElementById('cmd-input');
+  const cursor = input.selectionStart;
+  const before = input.value.slice(0, cursor);
+  const atMatch = before.match(/@(\w*)$/);
+  const hashMatch = before.match(/#(\w*)$/);
+  if (atMatch) {
+    cmdShowMentions(atMatch[1]);
+  } else if (hashMatch) {
+    cmdShowProjects(hashMatch[1]);
+  } else {
+    cmdHidePopup();
+  }
+}
+
+function cmdKeyDown(e) {
+  const popup = document.getElementById('cmd-mention-popup');
+  const isPopupVisible = popup.classList.contains('visible');
+
+  // Navigate mention popup with arrow keys
+  if (isPopupVisible) {
+    const items = popup.querySelectorAll('.cmd-mention-item');
+    if (items.length === 0) return;
+
+    if (e.key === 'ArrowDown' || (e.key === 'Tab' && !e.shiftKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      cmdMentionIdx = (cmdMentionIdx + 1) % items.length;
+      items.forEach((el, i) => el.classList.toggle('active', i === cmdMentionIdx));
+      items[cmdMentionIdx]?.scrollIntoView({ block: 'nearest' });
+      return;
+    }
+    if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      cmdMentionIdx = (cmdMentionIdx - 1 + items.length) % items.length;
+      items.forEach((el, i) => el.classList.toggle('active', i === cmdMentionIdx));
+      items[cmdMentionIdx]?.scrollIntoView({ block: 'nearest' });
+      return;
+    }
+    if (e.key === 'Enter' && !e.ctrlKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const active = items[cmdMentionIdx >= 0 ? cmdMentionIdx : 0];
+      if (active) cmdInsertPopupItem(active.dataset.id);
+      return;
+    }
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      cmdHidePopup();
+      return;
+    }
+  }
+
+  // ArrowUp/ArrowDown to navigate command history (only when no popup visible)
+  if (e.key === 'ArrowUp' && !isPopupVisible) {
+    const input = document.getElementById('cmd-input');
+    // Only intercept if cursor is at start of input (or input is single-line)
+    if (input.selectionStart === 0 || !input.value.includes('\n')) {
+      const history = cmdGetHistory();
+      if (history.length === 0) return;
+      if (_cmdHistoryIdx === -1) _cmdHistoryDraft = input.value; // Save current draft
+      if (_cmdHistoryIdx < history.length - 1) {
+        _cmdHistoryIdx++;
+        input.value = history[_cmdHistoryIdx].text;
+        cmdAutoResize();
+        cmdRenderMeta();
+        e.preventDefault();
+        // Move cursor to end
+        setTimeout(() => input.setSelectionRange(input.value.length, input.value.length), 0);
+      }
+      return;
+    }
+  }
+  if (e.key === 'ArrowDown' && !isPopupVisible) {
+    const input = document.getElementById('cmd-input');
+    if (input.selectionStart === input.value.length || !input.value.includes('\n')) {
+      if (_cmdHistoryIdx >= 0) {
+        _cmdHistoryIdx--;
+        const history = cmdGetHistory();
+        input.value = _cmdHistoryIdx >= 0 ? history[_cmdHistoryIdx].text : (_cmdHistoryDraft || '');
+        cmdAutoResize();
+        cmdRenderMeta();
+        e.preventDefault();
+        setTimeout(() => input.setSelectionRange(input.value.length, input.value.length), 0);
+      }
+      return;
+    }
+  }
+
+  // Ctrl+Enter to submit
+  if (e.key === 'Enter' && e.ctrlKey) {
+    e.preventDefault();
+    cmdSubmit();
+  }
+}
+
+async function cmdSubmit() {
+  const input = document.getElementById('cmd-input');
+  const raw = input.value.trim();
+  if (!raw) return showToast('cmd-toast', 'Type something first', false);
+
+  // Route to Command Center panel
+  input.value = '';
+  if (!_ccOpen) toggleCommandCenter();
+  document.getElementById('cc-input').value = raw;
+  ccSend();
+  cmdSaveHistory(raw, 'cc');
+  return;
+}
+
+// Render the parsed meta chips below input
+function cmdRenderMeta() {
+  const el = document.getElementById('cmd-meta');
+  const input = document.getElementById('cmd-input').value;
+  if (!input.trim()) { el.innerHTML = ''; return; }
+
+  const parsed = cmdParseInput(input);
+  let chips = [];
+
+  // Intent chip
+  if (parsed.intent === 'plan') {
+    const strategy = parsed.branchStrategy || 'parallel';
+    const stratLabel = strategy === 'parallel' ? 'parallel branches' : 'stacked';
+    chips.push('<span class="cmd-chip" style="background:var(--purple,#a855f7);color:#fff">Plan → PRD → Dispatch (' + stratLabel + ')</span>');
+  } else {
+    const intentLabels = { 'work-item': 'Work Item', 'note': 'Note', 'plan': 'Plan' };
+    chips.push('<span class="cmd-chip intent">' + intentLabels[parsed.intent] + '</span>');
+  }
+
+  // Type chip (only for work items)
+  if (parsed.intent === 'work-item') {
+    chips.push('<span class="cmd-chip">' + parsed.type + '</span>');
+  }
+
+  // Priority chip
+  chips.push('<span class="cmd-chip priority-' + parsed.priority + '">' + parsed.priority + ' priority</span>');
+
+  // Agent chips
+  if (parsed.fanout) {
+    chips.push('<span class="cmd-chip fanout">@everyone (fan-out)</span>');
+  }
+  for (const agentId of parsed.agents) {
+    const agent = cmdAgents.find(a => a.id === agentId);
+    if (agent) {
+      chips.push('<span class="cmd-chip agent-chip">' + agent.emoji + ' @' + agent.name + '</span>');
+    }
+  }
+
+  // Project chip(s)
+  if (parsed.projects.length > 0) {
+    parsed.projects.forEach(p => chips.push('<span class="cmd-chip project-chip">#' + escHtml(p) + '</span>'));
+  } else if (parsed.project) {
+    chips.push('<span class="cmd-chip project-chip">#' + escHtml(parsed.project) + '</span>');
+  }
+
+  el.innerHTML = chips.join('');
+}
+
+// Autocomplete popup (shared for @mentions and #projects)
+let cmdPopupMode = ''; // '@' or '#'
+
+function cmdShowMentions(query) {
+  cmdPopupMode = '@';
+  const popup = document.getElementById('cmd-mention-popup');
+  const q = query.toLowerCase();
+  let items = [];
+
+  // Always show @everyone option
+  items.push({ id: 'everyone', name: 'everyone', emoji: '\u{1F4E2}', role: 'Fan-out to all agents' });
+
+  for (const a of cmdAgents) {
+    if (!q || a.id.includes(q) || a.name.toLowerCase().includes(q) || a.role.toLowerCase().includes(q)) {
+      items.push(a);
+    }
+  }
+
+  if (items.length === 0) { popup.classList.remove('visible'); return; }
+
+  cmdMentionIdx = 0;
+  popup.innerHTML = items.map((a, i) =>
+    '<div class="cmd-mention-item' + (i === 0 ? ' active' : '') + '" data-id="' + a.id + '" onclick="cmdInsertPopupItem(\'' + escHtml(a.id) + '\')">' +
+      '<span class="mention-emoji">' + a.emoji + '</span>' +
+      '<span class="mention-name">@' + escHtml(a.name) + '</span>' +
+      '<span class="mention-role">' + escHtml(a.role) + '</span>' +
+    '</div>'
+  ).join('');
+  popup.classList.add('visible');
+  popup.scrollTop = 0;
+}
+
+function cmdShowProjects(query) {
+  cmdPopupMode = '#';
+  const popup = document.getElementById('cmd-mention-popup');
+  const q = query.toLowerCase();
+  let items = cmdProjects.filter(p => !q || p.name.toLowerCase().includes(q));
+
+  if (items.length === 0) { popup.classList.remove('visible'); return; }
+
+  cmdMentionIdx = 0;
+  popup.innerHTML = items.map((p, i) =>
+    '<div class="cmd-mention-item' + (i === 0 ? ' active' : '') + '" data-id="' + escHtml(p.name) + '" onclick="cmdInsertPopupItem(\'' + escHtml(p.name) + '\')">' +
+      '<span class="mention-emoji">\u{1F4C1}</span>' +
+      '<span class="mention-name" style="color:var(--green)">#' + escHtml(p.name) + '</span>' +
+      '<span class="mention-role">' + escHtml(p.description.slice(0, 50)) + (p.description.length > 50 ? '...' : '') + '</span>' +
+    '</div>'
+  ).join('');
+  popup.classList.add('visible');
+  popup.scrollTop = 0;
+}
+
+function cmdHidePopup() {
+  document.getElementById('cmd-mention-popup').classList.remove('visible');
+  cmdMentionIdx = -1;
+  cmdPopupMode = '';
+}
+
+function cmdInsertPopupItem(id) {
+  const input = document.getElementById('cmd-input');
+  const val = input.value;
+  const cursor = input.selectionStart;
+  const before = val.slice(0, cursor);
+  const trigger = cmdPopupMode; // '@' or '#'
+  const triggerIdx = before.lastIndexOf(trigger);
+  if (triggerIdx === -1) return;
+  const after = val.slice(cursor);
+  input.value = before.slice(0, triggerIdx) + trigger + id + ' ' + after;
+  input.focus();
+  const newPos = triggerIdx + id.length + 2;
+  input.setSelectionRange(newPos, newPos);
+  cmdHidePopup();
+  cmdRenderMeta();
+}

package/dashboard/js/command-parser.js

@@ -0,0 +1,129 @@
+// command-parser.js — Command parsing functions extracted from dashboard.html
+
+let cmdAgents = []; // [{id, name, emoji, role}]
+let cmdProjects = []; // [{name, description}]
+let cmdMentionIdx = -1; // active mention autocomplete index
+
+function cmdUpdateAgentList(agents) {
+  cmdAgents = (agents || []).map(a => ({ id: a.id, name: a.name, emoji: a.emoji, role: a.role }));
+}
+function cmdUpdateProjectList(projects) {
+  cmdProjects = (projects || []).map(p => ({ name: p.name, description: p.description || '' }));
+}
+
+function showToast(id, msg, ok) {
+  const el = document.getElementById(id);
+  el.className = 'cmd-toast ' + (ok ? 'success' : 'error');
+  el.textContent = msg;
+  setTimeout(() => { el.className = 'cmd-toast'; }, 4000);
+}
+
+function detectWorkItemType(text) {
+  const t = text.toLowerCase();
+  const patterns = [
+    { type: 'ask',      words: ['explain', 'why does', 'why is', 'what does', 'how do i', 'how do you', 'what\'s the', 'tell me', 'can you explain', 'walk me through'] },
+    { type: 'explore',  words: ['explore', 'investigate', 'understand', 'analyze', 'audit', 'document', 'architecture', 'how does', 'what is', 'look into', 'research', 'survey', 'map out', 'codebase', 'make a note of', 'find out'] },
+    { type: 'fix',      words: ['fix', 'bug', 'broken', 'crash', 'error', 'issue', 'patch', 'repair', 'resolve', 'regression', 'failing', 'doesn\'t work', 'not working'] },
+    { type: 'review',   words: ['code review', 'check pr', 'look at pr', 'audit code', 'inspect', 'review pr', 'review pull request'] },
+    { type: 'explore',  words: ['review the plan', 'review plan', 'review the design', 'review design', 'review the doc', 'look at the plan', 'check the plan', 'read the plan', 'review it', 'review this'] },
+    { type: 'review',   words: ['review'] },
+    { type: 'test',     words: ['test', 'write tests', 'add tests', 'unit test', 'e2e test', 'coverage', 'testing', 'build', 'run locally', 'localhost', 'start the', 'spin up', 'verify', 'check if it works'] },
+  ];
+  for (const { type, words } of patterns) {
+    if (words.some(w => t.includes(w))) return type;
+  }
+  return 'implement';
+}
+
+// Parse the unified input into structured intent
+function cmdParseInput(raw) {
+  let text = raw.trim();
+  const result = {
+    intent: 'work-item', // 'work-item' | 'note' | 'plan'
+    agents: [],           // assigned agent IDs
+    fanout: false,
+    priority: 'medium',
+    project: '',          // primary project (for work items, plans)
+    projects: [],          // multi-project list (for PRD items)
+    title: '',
+    description: '',
+    type: '',             // work item type (auto-detected)
+  };
+
+  // Detect /stop, /cancel, /kill
+  if (/^\/(?:stop|cancel|kill)\b/i.test(text) || /^(stop|cancel|kill|abort|halt)\s+/i.test(text)) {
+    result.intent = 'cancel';
+    text = text.replace(/^\/(?:stop|cancel|kill)\s*/i, '').replace(/^(stop|cancel|kill|abort|halt)\s+/i, '').trim();
+    // Try to resolve agent name from remaining text
+    var cancelAgent = cmdAgents.find(function(a) { return text.toLowerCase().includes(a.id) || text.toLowerCase().includes(a.name.toLowerCase()); });
+    if (cancelAgent) result.agents = [cancelAgent.id];
+    result.cancelTask = text;
+    result.title = 'Cancel: ' + text;
+    return result;
+  }
+
+  // Detect /decide, /note, or natural "remember" keyword
+  const rememberPattern = /^(remember|remember that|don't forget|note that|keep in mind)\b/i;
+  if (/^\/decide\b/i.test(text) || /^\/note\b/i.test(text) || rememberPattern.test(text)) {
+    result.intent = 'note';
+    text = text.replace(/^\/decide\s*/i, '').replace(/^\/note\s*/i, '').replace(rememberPattern, '').trim();
+  } else if (/^\/plan\b/i.test(text) || /^(make a plan|plan out|plan for|plan how|create a plan|design a plan|come up with a plan|draft a plan|write a plan)\b/i.test(text)) {
+    result.intent = 'plan';
+    text = text.replace(/^\/plan\s*/i, '').replace(/^(make a plan for|plan out how|plan for how|plan how|create a plan for|design a plan for|come up with a plan for|draft a plan for|write a plan for|make a plan|plan out|create a plan|design a plan|come up with a plan|draft a plan|write a plan)\s*/i, '').trim();
+    // Extract branch strategy flag
+    if (/--parallel\b/i.test(text)) {
+      result.branchStrategy = 'parallel';
+      text = text.replace(/--parallel\b/i, '').trim();
+    } else if (/--stack\b/i.test(text)) {
+      result.branchStrategy = 'shared-branch';
+      text = text.replace(/--stack\b/i, '').trim();
+    } else {
+      result.branchStrategy = 'parallel'; // default — items without depends_on get independent branches
+    }
+  }
+
+  // Extract @mentions
+  const mentionRe = /@(\w+)/g;
+  let m;
+  while ((m = mentionRe.exec(text)) !== null) {
+    const name = m[1].toLowerCase();
+    if (name === 'everyone' || name === 'all') {
+      result.fanout = true;
+    } else {
+      const agent = cmdAgents.find(a => a.id === name || a.name.toLowerCase() === name);
+      if (agent && !result.agents.includes(agent.id)) result.agents.push(agent.id);
+    }
+  }
+  // Remove @mentions from text
+  text = text.replace(/@\w+/g, '').trim();
+
+  // Extract !priority
+  if (/!high\b/i.test(text)) { result.priority = 'high'; text = text.replace(/!high\b/i, '').trim(); }
+  else if (/!low\b/i.test(text)) { result.priority = 'low'; text = text.replace(/!low\b/i, '').trim(); }
+  else if (/!urgent\b/i.test(text)) { result.priority = 'high'; text = text.replace(/!urgent\b/i, '').trim(); }
+
+  // Extract #project(s)
+  const projRe = /#(\S+)/g;
+  while ((m = projRe.exec(text)) !== null) {
+    const pname = m[1];
+    const proj = cmdProjects.find(p => p.name.toLowerCase() === pname.toLowerCase());
+    if (proj) {
+      result.project = proj.name; // last match for backward compat (work items, plans)
+      if (!result.projects.includes(proj.name)) result.projects.push(proj.name);
+    }
+  }
+  text = text.replace(/#\S+/g, '').trim();
+
+  // Clean up extra whitespace
+  text = text.replace(/\s+/g, ' ').trim();
+
+  // Split first line as title, rest as description
+  const lines = text.split('\n');
+  result.title = lines[0] || '';
+  result.description = lines.slice(1).join('\n').trim();
+
+  // Auto-detect work type
+  result.type = detectWorkItemType(result.title + ' ' + result.description);
+
+  return result;
+}

package/dashboard/js/detail-panel.js

@@ -0,0 +1,98 @@
+// dashboard/js/detail-panel.js — Agent detail panel extracted from dashboard.html
+
+function closeDetail() {
+  document.getElementById('detail-overlay').classList.remove('open');
+  document.getElementById('detail-panel').classList.remove('open');
+  currentAgentId = null;
+  stopLiveStream();
+}
+
+function renderDetailTabs(detail) {
+  const isWorking = detail.statusData?.status === 'working';
+  const tabs = [
+    ...(isWorking ? [{ id: 'live', label: 'Live Output' }] : []),
+    { id: 'thought-process', label: 'Thought Process' },
+    { id: 'charter', label: 'Charter' },
+    { id: 'history', label: 'History' },
+    { id: 'output', label: 'Output Log' },
+  ];
+  document.getElementById('detail-tabs').innerHTML = tabs.map(t =>
+    '<div class="detail-tab ' + (t.id === currentTab ? 'active' : '') + '" onclick="switchTab(\'' + t.id + '\')">' + t.label + '</div>'
+  ).join('');
+
+  document.getElementById('detail-panel').dataset.detail = JSON.stringify(detail);
+}
+
+function switchTab(tabId) {
+  currentTab = tabId;
+  const detail = JSON.parse(document.getElementById('detail-panel').dataset.detail || '{}');
+  renderDetailTabs(detail);
+  renderDetailContent(detail, tabId);
+}
+
+function renderDetailContent(detail, tab) {
+  const el = document.getElementById('detail-content');
+
+  if (tab === 'thought-process') {
+    let html = '';
+
+    if (detail.statusData) {
+      html += '<h4>Current Status</h4><div class="section">';
+      html += 'Status: <span style="color:var(--' + (detail.statusData.status === 'working' ? 'yellow' : detail.statusData.status === 'done' ? 'green' : 'muted') + ')">' + (detail.statusData.status || 'idle').toUpperCase() + '</span>\n';
+      if (detail.statusData.task) html += 'Task: ' + escHtml(detail.statusData.task) + '\n';
+      if (detail.statusData.started_at) html += 'Started: ' + detail.statusData.started_at + '\n';
+      if (detail.statusData.completed_at) html += 'Completed: ' + detail.statusData.completed_at + '\n';
+      html += '</div>';
+      if (detail.statusData.resultSummary) {
+        html += '<h4>Last Result</h4><div class="section" style="border-left:3px solid var(--green);padding-left:12px">' + escHtml(detail.statusData.resultSummary) + '</div>';
+      }
+    }
+
+    if (detail.inboxContents && detail.inboxContents.length > 0) {
+      html += '<h4>Notes & Findings (' + detail.inboxContents.length + ')</h4>';
+      detail.inboxContents.forEach(item => {
+        html += '<div class="section"><strong style="color:var(--purple)">' + escHtml(item.name) + '</strong>\n\n' + escHtml(item.content) + '</div>';
+      });
+    } else {
+      html += '<h4>Notes & Findings</h4><div class="section" style="color:var(--muted);font-style:italic">No notes or findings written yet.</div>';
+    }
+
+    if (detail.outputLog) {
+      html += '<h4>Latest Output</h4><div class="section">' + escHtml(detail.outputLog) + '</div>';
+    }
+
+    el.innerHTML = html;
+  } else if (tab === 'live') {
+    el.innerHTML = '<div class="section" id="live-output" style="max-height:60vh;overflow-y:auto;font-size:11px;line-height:1.6">Loading live output...</div>' +
+      '<div style="margin-top:8px;display:flex;gap:8px;align-items:center">' +
+        '<span class="pulse"></span><span id="live-status-label" style="font-size:11px;color:var(--green)">Streaming live</span>' +
+        '<button class="pr-pager-btn" onclick="refreshLiveOutput()" style="font-size:10px">Refresh now</button>' +
+      '</div>';
+    startLiveStream(currentAgentId);
+  } else if (tab === 'charter') {
+    el.innerHTML = '<div class="section">' + escHtml(detail.charter || 'No charter found.') + '</div>';
+  } else if (tab === 'history') {
+    let html = '';
+    // Recent dispatch results
+    if (detail.recentDispatches && detail.recentDispatches.length > 0) {
+      html += '<h4>Recent Dispatches</h4><table class="pr-table" style="margin-bottom:16px"><thead><tr><th>Task</th><th>Type</th><th>Result</th><th>Completed</th></tr></thead><tbody>';
+      detail.recentDispatches.forEach(d => {
+        const isError = d.result === 'error';
+        const color = isError ? 'var(--red)' : 'var(--green)';
+        const reason = d.reason ? ' title="' + escHtml(d.reason) + '"' : '';
+        html += '<tr>' +
+          '<td style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(d.task) + '">' + escHtml(d.task.slice(0, 80)) + '</td>' +
+          '<td><span class="dispatch-type ' + d.type + '">' + escHtml(d.type) + '</span></td>' +
+          '<td style="color:' + color + '"' + reason + '>' + escHtml(d.result) + (isError && d.reason ? ' <span style="font-size:10px;color:var(--muted)">(' + escHtml(d.reason.slice(0, 50)) + ')</span>' : '') + '</td>' +
+          '<td style="font-size:10px;color:var(--muted)">' + (d.completed_at ? new Date(d.completed_at).toLocaleString() : '') + '</td>' +
+        '</tr>';
+      });
+      html += '</tbody></table>';
+    }
+    // Raw history.md
+    html += '<h4>Task History</h4><div class="section">' + escHtml(detail.history || 'No history yet.') + '</div>';
+    el.innerHTML = html;
+  } else if (tab === 'output') {
+    el.innerHTML = '<div class="section">' + escHtml(detail.outputLog || 'No output log. The coordinator will save agent output here when tasks complete.') + '</div>';
+  }
+}

package/dashboard/js/live-stream.js

@@ -0,0 +1,69 @@
+// dashboard/js/live-stream.js — Live streaming and polling extracted from dashboard.html
+
+let livePollingInterval = null;
+let liveEventSource = null;
+
+function startLiveStream(agentId) {
+  stopLiveStream();
+  if (!agentId) return;
+
+  const outputEl = document.getElementById('live-output');
+  if (outputEl) outputEl.textContent = '';
+
+  liveEventSource = new EventSource('/api/agent/' + agentId + '/live-stream');
+
+  liveEventSource.onmessage = function(e) {
+    try {
+      const chunk = JSON.parse(e.data);
+      const el = document.getElementById('live-output');
+      if (el) {
+        const wasAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 100;
+        el.textContent += chunk;
+        if (wasAtBottom) el.scrollTop = el.scrollHeight;
+      }
+    } catch {}
+  };
+
+  liveEventSource.addEventListener('done', function() {
+    stopLiveStream();
+  });
+
+  liveEventSource.onerror = function() {
+    // Fall back to polling on SSE error
+    stopLiveStream();
+    startLivePolling();
+    const label = document.getElementById('live-status-label');
+    if (label) label.textContent = 'Auto-refreshing every 3s';
+  };
+}
+
+function stopLiveStream() {
+  if (liveEventSource) {
+    liveEventSource.close();
+    liveEventSource = null;
+  }
+  stopLivePolling();
+}
+
+function startLivePolling() {
+  stopLivePolling();
+  refreshLiveOutput();
+  livePollingInterval = setInterval(refreshLiveOutput, 3000);
+}
+
+function stopLivePolling() {
+  if (livePollingInterval) { clearInterval(livePollingInterval); livePollingInterval = null; }
+}
+
+async function refreshLiveOutput() {
+  if (!currentAgentId || currentTab !== 'live') { stopLivePolling(); return; }
+  try {
+    const text = await fetch('/api/agent/' + currentAgentId + '/live?tail=16384').then(r => r.text());
+    const el = document.getElementById('live-output');
+    if (el) {
+      const wasAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
+      el.textContent = text;
+      if (wasAtBottom) el.scrollTop = el.scrollHeight;
+    }
+  } catch {}
+}