@yemi33/minions 0.1.12 → 0.1.13

package/dashboard/js/modal-qa.js

@@ -0,0 +1,268 @@
+// modal-qa.js — Modal Q&A (document chat) functions extracted from dashboard.html
+
+let _modalDocContext = { title: '', content: '', selection: '' };
+let _modalFilePath = null; // file path for steering (null = read-only Q&A only)
+let _modalOriginalPlan = null; // tracks original plan file when editing a forked version
+
+function showModalQa() {
+  document.getElementById('modal-qa').style.display = '';
+}
+let _qaHistory = []; // multi-turn conversation history [{role:'user',text:''},{role:'assistant',text:''}]
+let _qaProcessing = false; // true while waiting for Haiku response
+let _qaQueue = []; // queued messages while processing
+let _qaSessionKey = ''; // key for current conversation (title or filePath)
+const _qaSessions = new Map(); // persist conversations across modal open/close {key → {history, threadHtml}}
+// Restore from localStorage
+try {
+  const saved = JSON.parse(localStorage.getItem('qa-sessions') || '{}');
+  for (const [k, v] of Object.entries(saved)) _qaSessions.set(k, v);
+} catch {}
+function _saveQaSessions() {
+  try {
+    const obj = {};
+    // Only persist last 10 sessions, cap threadHtml at 50KB each
+    const entries = [..._qaSessions.entries()].slice(-10);
+    for (const [k, v] of entries) obj[k] = { ...v, threadHtml: (v.threadHtml || '').slice(0, 50000) };
+    localStorage.setItem('qa-sessions', JSON.stringify(obj));
+  } catch {}
+}
+
+function modalAskAboutSelection() {
+  document.getElementById('ask-selection-btn').style.display = 'none';
+
+  // If the modal isn't open but we have a selection (from detail panel), open modal for Q&A
+  const modal = document.getElementById('modal');
+  if (!modal.classList.contains('open')) {
+    document.getElementById('modal-title').textContent = 'Q&A: ' + (_modalDocContext.title || 'Document');
+    document.getElementById('modal-body').textContent = _modalDocContext.content.slice(0, 3000) + (_modalDocContext.content.length > 3000 ? '\n\n...(truncated for display)' : '');
+    modal.classList.add('open');
+  }
+
+  // Show the selection pill
+  const pill = document.getElementById('modal-qa-pill');
+  const pillText = document.getElementById('modal-qa-pill-text');
+  const sel = _modalDocContext.selection || '';
+  if (sel) {
+    pillText.textContent = sel.slice(0, 80) + (sel.length > 80 ? '...' : '');
+    pill.style.display = 'flex';
+  }
+
+  const input = document.getElementById('modal-qa-input');
+  input.value = '';
+  input.placeholder = 'What do you want to know about this?';
+  input.focus();
+}
+
+function clearQaSelection() {
+  _modalDocContext.selection = '';
+  document.getElementById('modal-qa-pill').style.display = 'none';
+  document.getElementById('modal-qa-input').placeholder = 'Ask about this document (or select text first)...';
+}
+
+
+function _initQaSession() {
+  var key = _modalFilePath || _modalDocContext.title || '';
+  if (!key || _qaSessionKey === key) return;
+  _qaSessionKey = key;
+  // Clear notification badge on the source card when reopening
+  const card = findCardForFile(_modalFilePath);
+  if (card) clearNotifBadge(card);
+  var prior = _qaSessions.get(key);
+  if (prior) {
+    _qaHistory = prior.history;
+    document.getElementById('modal-qa-thread').innerHTML = prior.threadHtml;
+    if (prior.docContext) {
+      // Preserve freshly-fetched content and title — prior session may have stale/empty content
+      const freshContent = _modalDocContext.content;
+      const freshTitle = _modalDocContext.title;
+      _modalDocContext = Object.assign({}, prior.docContext, {
+        selection: _modalDocContext.selection,
+        content: freshContent || prior.docContext.content || '',
+        title: freshTitle || prior.docContext.title || '',
+      });
+    }
+    if (prior.filePath) { _modalFilePath = prior.filePath; showModalQa(); }
+    document.getElementById('qa-clear-btn').style.display = 'block';
+  } else {
+    _qaHistory = [];
+    document.getElementById('modal-qa-thread').innerHTML = '';
+    document.getElementById('qa-clear-btn').style.display = 'none';
+  }
+}
+
+function clearQaConversation() {
+  _qaHistory = [];
+  _qaQueue = [];
+  _qaProcessing = false;
+  document.getElementById('modal-qa-thread').innerHTML = '';
+  document.getElementById('qa-clear-btn').style.display = 'none';
+  if (_qaSessionKey) _qaSessions.delete(_qaSessionKey);
+}
+
+function modalSend() {
+  var input = document.getElementById('modal-qa-input');
+  var message = input.value.trim();
+  if (!message) return;
+
+  if (!_modalDocContext.content) {
+    var body = document.getElementById('modal-body');
+    if (body) {
+      _modalDocContext.content = body.textContent || body.innerText || '';
+      _modalDocContext.title = document.getElementById('modal-title')?.textContent || '';
+    }
+  }
+  if (!_modalDocContext.content) {
+    showToast('cmd-toast', 'No document content', false);
+    return;
+  }
+
+  _initQaSession();
+  document.getElementById('qa-clear-btn').style.display = 'block';
+
+  var thread = document.getElementById('modal-qa-thread');
+  const selection = _modalDocContext.selection || '';
+
+  // Show message in thread immediately
+  let qHtml = '<div class="modal-qa-q">' + escHtml(message);
+  if (selection) {
+    qHtml += '<span class="selection-ref">Re: "' + escHtml(selection.slice(0, 100)) + ((selection.length > 100) ? '...' : '') + '"</span>';
+  }
+  qHtml += '</div>';
+  thread.innerHTML += qHtml;
+  thread.scrollTop = thread.scrollHeight;
+
+  // Clear input immediately so user can type next message
+  input.value = '';
+  _modalDocContext.selection = '';
+  document.getElementById('modal-qa-pill').style.display = 'none';
+
+  if (_qaProcessing) {
+    // Queue the message — show it as "queued" in the thread
+    _qaQueue.push({ message, selection });
+    const preview = message.split(/\s+/).slice(0, 6).join(' ') + (message.split(/\s+/).length > 6 ? '...' : '');
+    thread.innerHTML += '<div class="modal-qa-loading" style="color:var(--muted);font-size:10px">Queued: "' + escHtml(preview) + '" — will send after current response</div>';
+    thread.scrollTop = thread.scrollHeight;
+    return;
+  }
+
+  _processQaMessage(message, selection);
+}
+
+async function _processQaMessage(message, selection) {
+  const thread = document.getElementById('modal-qa-thread');
+  const btn = document.getElementById('modal-send-btn');
+  _qaProcessing = true;
+
+  // Capture state now — closeModal may null these while we're awaiting
+  const capturedFilePath = _modalFilePath;
+  const capturedDocContext = { ..._modalDocContext };
+
+  const loadingId = 'chat-loading-' + Date.now();
+  const qaQueueBadge = _qaQueue.length > 0 ? ' <span style="font-size:9px;color:var(--muted);background:var(--surface);padding:1px 5px;border-radius:8px;border:1px solid var(--border)">+' + _qaQueue.length + ' queued</span>' : '';
+  thread.innerHTML += '<div class="modal-qa-loading" id="' + loadingId + '">' +
+    '<div class="dot-pulse"><span></span><span></span><span></span></div> ' +
+    '<span id="' + loadingId + '-text">Thinking...</span> ' +
+    '<span id="' + loadingId + '-time" style="font-size:10px;color:var(--muted)"></span>' +
+    qaQueueBadge + '</div>';
+  thread.scrollTop = thread.scrollHeight;
+
+  const isPlanEdit = _modalFilePath && _modalFilePath.match(/^plans\/.*\.md$/);
+  const qaStartTime = Date.now();
+  const qaPhases = isPlanEdit
+    ? [[0,'Reading plan...'],[3000,'Analyzing structure...'],[8000,'Researching context...'],[15000,'Drafting revisions...'],[30000,'Writing updated plan...'],[60000,'Still working (large document)...'],[120000,'Deep edit in progress...'],[300000,'Almost there...']]
+    : [[0,'Thinking...'],[3000,'Reading document...'],[8000,'Analyzing...'],[20000,'Still working...'],[60000,'Taking a while...']];
+  const qaTimer = setInterval(() => {
+    const elapsed = Date.now() - qaStartTime;
+    const timeEl = document.getElementById(loadingId + '-time');
+    const textEl = document.getElementById(loadingId + '-text');
+    if (timeEl) timeEl.textContent = Math.floor(elapsed / 1000) + 's';
+    if (textEl) { for (let i = qaPhases.length - 1; i >= 0; i--) { if (elapsed >= qaPhases[i][0]) { textEl.textContent = qaPhases[i][1]; break; } } }
+  }, 500);
+
+  try {
+    const res = await fetch('/api/doc-chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        message,
+        document: capturedDocContext.content,
+        title: capturedDocContext.title,
+        selection: selection,
+        filePath: capturedFilePath || null,
+      }),
+    });
+    const data = await res.json();
+    clearInterval(qaTimer);
+    const loadingEl = document.getElementById(loadingId);
+    if (loadingEl) loadingEl.remove();
+
+    if (data.ok) {
+      const borderColor = data.edited ? 'var(--green)' : 'var(--blue)';
+      const suffix = data.edited ? '\n\n\u2713 Document saved.' : '';
+      const qaElapsed = Math.round((Date.now() - qaStartTime) / 1000);
+      const qaTimeLabel = '<div style="font-size:9px;color:var(--muted);margin-top:4px;text-align:right">' + qaElapsed + 's</div>';
+      thread.innerHTML += '<div class="modal-qa-a" style="border-left-color:' + borderColor + '">' + llmCopyBtn() + escHtml(data.answer + suffix) + qaTimeLabel + '</div>';
+
+      // Track conversation history
+      _qaHistory.push({ role: 'user', text: message });
+      _qaHistory.push({ role: 'assistant', text: data.answer });
+
+      // Execute any CC actions (dispatch, note, etc.)
+      if (data.actions && data.actions.length > 0) {
+        for (const action of data.actions) { await ccExecuteAction(action); }
+      }
+
+      // Refresh modal body if document was edited
+      if (data.edited && data.content) {
+        const display = data.content.replace(/^---[\s\S]*?---\n*/m, '');
+        document.getElementById('modal-body').textContent = display;
+        _modalDocContext.content = display;
+      }
+    } else {
+      const qaElapsedErr = Math.round((Date.now() - qaStartTime) / 1000);
+      thread.innerHTML += '<div class="modal-qa-a" style="color:var(--red)">Error: ' + escHtml(data.error || 'Failed') + '<div style="font-size:9px;color:var(--muted);margin-top:4px;text-align:right">' + qaElapsedErr + 's</div></div>';
+    }
+  } catch (e) {
+    clearInterval(qaTimer);
+    const loadingEl = document.getElementById(loadingId);
+    if (loadingEl) loadingEl.remove();
+    const qaElapsedExc = Math.round((Date.now() - qaStartTime) / 1000);
+    thread.innerHTML += '<div class="modal-qa-a" style="color:var(--red)">Error: ' + escHtml(e.message) + '<div style="font-size:9px;color:var(--muted);margin-top:4px;text-align:right">' + qaElapsedExc + 's</div></div>';
+  }
+
+  _qaProcessing = false;
+  thread.scrollTop = thread.scrollHeight;
+
+  // Save session (persists even if modal was closed during processing)
+  const modalIsOpen = document.getElementById('modal').classList.contains('open');
+  if (_qaSessionKey) {
+    // Use captured values if closeModal nulled the globals during processing
+    const sessionFilePath = _modalFilePath || capturedFilePath;
+    const sessionDocContext = _modalDocContext.title ? { ..._modalDocContext } : { ...capturedDocContext, ..._modalDocContext, title: capturedDocContext.title };
+    _qaSessions.set(_qaSessionKey, {
+      history: _qaHistory,
+      threadHtml: thread.innerHTML,
+      docContext: sessionDocContext,
+      filePath: sessionFilePath,
+    });
+    _saveQaSessions();
+    // If modal was closed while processing, show notification badge on source card
+    if (!modalIsOpen) {
+      const card = findCardForFile(sessionFilePath);
+      if (card) showNotifBadge(card);
+      _qaSessionKey = '';
+    }
+  }
+
+  // Process next queued message
+  if (_qaQueue.length > 0) {
+    const next = _qaQueue.shift();
+    const queuedEls = thread.querySelectorAll('.modal-qa-loading');
+    for (const el of queuedEls) {
+      if (el.textContent.includes('Queued')) { el.remove(); break; }
+    }
+    _processQaMessage(next.message, next.selection);
+  } else if (modalIsOpen) {
+    document.getElementById('modal-qa-input')?.focus();
+  }
+}

package/dashboard/js/modal.js

@@ -0,0 +1,131 @@
+// modal.js — Modal and notification badge functions extracted from dashboard.html
+
+function closeModal() {
+  const modalEl = document.querySelector('#modal .modal');
+  if (modalEl) modalEl.classList.remove('modal-wide');
+  document.getElementById('modal').classList.remove('open');
+  // Hide Q&A section (only shown for document modals)
+  document.getElementById('modal-qa').style.display = 'none';
+  // Remove settings save button if present
+  const settingsBtn = document.getElementById('modal-settings-save');
+  if (settingsBtn) settingsBtn.remove();
+  // Save Q&A session for this document (persist across modal open/close)
+  if (_qaSessionKey && (_qaHistory.length > 0 || _qaQueue.length > 0)) {
+    _qaSessions.set(_qaSessionKey, {
+      history: _qaHistory,
+      threadHtml: document.getElementById('modal-qa-thread').innerHTML,
+      docContext: { ..._modalDocContext },
+      filePath: _modalFilePath,
+    });
+    _saveQaSessions();
+  }
+  // If still processing, show animated badge on the source card
+  if (_qaProcessing && _modalFilePath) {
+    const card = findCardForFile(_modalFilePath);
+    if (card) showNotifBadge(card, 'processing');
+  }
+  // Reset UI state but don't kill processing/queue — they run in background
+  _modalDocContext = { title: '', content: '', selection: '' };
+  // Keep session key alive if processing is in flight — result will save when it completes
+  if (!_qaProcessing) _qaSessionKey = '';
+  document.getElementById('modal-qa-input').value = '';
+  document.getElementById('modal-qa-input').placeholder = 'Ask about this document (or select text first)...';
+  document.getElementById('modal-qa-pill').style.display = 'none';
+  document.getElementById('ask-selection-btn').style.display = 'none';
+  // Clear edit/steer state
+  _modalEditable = null;
+  _modalFilePath = null;
+  _modalOriginalPlan = null;
+  // steer btn removed — unified send
+  const body = document.getElementById('modal-body');
+  body.contentEditable = 'false';
+  body.style.border = '';
+  body.style.padding = '';
+  document.getElementById('modal-edit-btn').style.display = 'none';
+  document.getElementById('modal-save-btn').style.display = 'none';
+  document.getElementById('modal-cancel-edit-btn').style.display = 'none';
+}
+
+function copyModalContent() {
+  const body = document.getElementById('modal-body');
+  const btn = document.getElementById('modal-copy-btn');
+  navigator.clipboard.writeText(body.textContent).then(() => {
+    btn.classList.add('copied');
+    btn.innerHTML = '<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/></svg> Copied';
+    setTimeout(() => {
+      btn.classList.remove('copied');
+      btn.innerHTML = '<svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25z"/><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25z"/></svg> Copy';
+    }, 2000);
+  });
+}
+
+// ─── Notification Badges ──────────────────────────────────────────────────────
+// Show a red dot on a card/button when a background response arrives
+// _activeBadges tracks badges by filePath so they survive DOM re-renders
+const _activeBadges = new Map(); // filePath → state ('done' | 'processing')
+
+function showNotifBadge(targetEl, state) {
+  if (!targetEl) return;
+  clearNotifBadge(targetEl);
+  targetEl.style.position = 'relative';
+  const badge = document.createElement('span');
+  badge.className = 'notif-badge ' + (state || 'done');
+  if (state === 'processing') {
+    badge.innerHTML = '<span></span><span></span><span></span>';
+  }
+  targetEl.appendChild(badge);
+  // Track by data-file so badge can be restored after DOM re-render
+  const fileKey = targetEl.getAttribute('data-file');
+  if (fileKey) _activeBadges.set(fileKey, state || 'done');
+}
+function clearNotifBadge(targetEl) {
+  if (!targetEl) return;
+  const dot = targetEl.querySelector('.notif-badge');
+  if (dot) dot.remove();
+  const fileKey = targetEl.getAttribute('data-file');
+  if (fileKey) _activeBadges.delete(fileKey);
+}
+// Re-apply tracked badges after DOM re-renders (called after renderInbox, renderPlans, renderKnowledgeBase)
+function restoreNotifBadges() {
+  for (const [filePath, state] of _activeBadges) {
+    const card = findCardForFile(filePath);
+    if (card && !card.querySelector('.notif-badge')) {
+      card.style.position = 'relative';
+      const badge = document.createElement('span');
+      badge.className = 'notif-badge ' + state;
+      if (state === 'processing') {
+        badge.innerHTML = '<span></span><span></span><span></span>';
+      }
+      card.appendChild(badge);
+    }
+  }
+}
+// Find the plan/KB/inbox card that matches a filePath
+function findCardForFile(filePath) {
+  if (!filePath) return null;
+  // Direct match by data-file attribute
+  var card = document.querySelector('[data-file="' + CSS.escape(filePath) + '"]');
+  if (card) return card;
+  // Plan cards may have data-file="plans/x.json" but filePath="prd/x.json" (PRD variant)
+  if (filePath.startsWith('prd/')) {
+    card = document.querySelector('[data-file="' + CSS.escape('plans/' + filePath.slice(4)) + '"]');
+    if (card) return card;
+  }
+  // Archived items: badge the "View Archives" button
+  if (filePath.includes('archive')) {
+    if (filePath.startsWith('prd/') || filePath.startsWith('plans/')) {
+      card = document.querySelector('[data-file="prd-archives"]') || document.querySelector('[data-file="plan-archives"]');
+      if (card) return card;
+    }
+  }
+  return null;
+}
+
+function renderArchiveButtons(archives) {
+  archivedPrds = archives;
+  const el = document.getElementById('archive-btns');
+  if (!archives.length) { el.innerHTML = ''; return; }
+  el.innerHTML = archives.map((a, i) =>
+    '<button class="archive-btn" onclick="openArchive(' + i + ')">Archived: ' + escHtml(a.version) + ' (' + a.total + ' items)</button>'
+  ).join(' ');
+}

package/dashboard/js/refresh.js

@@ -0,0 +1,59 @@
+// refresh.js — Main refresh loop and initialization extracted from dashboard.html
+
+async function refresh() {
+  try {
+    const data = await fetch('/api/status').then(r => r.json());
+    // Detect fresh install — clear stale browser state if install ID changed
+    if (data.installId) {
+      const prev = localStorage.getItem('minions-install-id');
+      if (prev && prev !== data.installId) {
+        localStorage.clear();
+        console.log('Minions: fresh install detected, cleared browser state');
+      }
+      localStorage.setItem('minions-install-id', data.installId);
+    }
+    document.getElementById('ts').textContent = new Date(data.timestamp).toLocaleTimeString();
+    const engineState = (data.engine && data.engine.state) ? data.engine.state : 'stopped';
+    document.getElementById('setup-banner').style.display = (!data.initialized && engineState !== 'stopped') ? 'block' : 'none';
+    renderAgents(data.agents);
+    renderPrdProgress(data.prdProgress);
+    _cachePrdItems(data.prdProgress);
+    renderInbox(data.inbox);
+    cmdUpdateAgentList(data.agents);
+    cmdUpdateProjectList(data.projects || []);
+    renderNotes(data.notes);
+    renderPrd(data.prd, data.prdProgress);
+    renderPrs(data.pullRequests || []);
+    renderArchiveButtons(data.archivedPrds || []);
+    renderEngineStatus(data.engine);
+    renderDispatch(data.dispatch);
+    window._lastDispatch = data.dispatch;
+    window._lastWorkItems = data.workItems || [];
+    window._lastStatus = data;
+    prunePrdRequeueState(window._lastWorkItems);
+    renderEngineLog(data.engineLog || []);
+    renderProjects(data.projects || []);
+    renderMetrics(data.metrics || {});
+    renderWorkItems(data.workItems || []);
+    renderSkills(data.skills || []);
+    renderMcpServers(data.mcpServers || []);
+    renderSchedules(data.schedules || []);
+    // Update sidebar counts
+    const swi = document.getElementById('sidebar-wi');
+    if (swi) swi.textContent = (data.workItems || []).length || '';
+    const spr = document.getElementById('sidebar-pr');
+    if (spr) spr.textContent = (data.pullRequests || []).length || '';
+    // Refresh KB and plans less frequently (every 3rd cycle = ~12s)
+    if (!window._kbRefreshCount) window._kbRefreshCount = 0;
+    if (window._kbRefreshCount++ % 3 === 0) { refreshKnowledgeBase(); refreshPlans(); }
+  } catch(e) { console.error('refresh error', e); }
+}
+
+refresh();
+setInterval(refresh, 4000);
+
+// Wire sidebar navigation
+document.querySelectorAll('.sidebar-link').forEach(link => {
+  link.addEventListener('click', e => { e.preventDefault(); switchPage(link.dataset.page); });
+});
+switchPage(currentPage);

package/dashboard/js/render-agents.js

@@ -0,0 +1,17 @@
+// dashboard/js/render-agents.js — Agent grid rendering extracted from dashboard.html
+
+function renderAgents(agents) {
+  agentData = agents;
+  const grid = document.getElementById('agents-grid');
+  grid.innerHTML = agents.map(a => `
+    <div class="agent-card ${statusColor(a.status)}" onclick="openAgentDetail('${a.id}')">
+      <div class="agent-card-header">
+        <span class="agent-name"><span class="agent-emoji">${a.emoji}</span>${a.name}</span>
+        <span class="status-badge ${a.status}">${a.status}</span>
+      </div>
+      <div class="agent-role">${a.role}</div>
+      <div class="agent-action" title="${escHtml(a.lastAction)}">${escHtml(a.lastAction)}</div>
+      ${a.resultSummary ? `<div class="agent-result" title="${escHtml(a.resultSummary)}">${escHtml(a.resultSummary.slice(0, 200))}${a.resultSummary.length > 200 ? '...' : ''}</div>` : ''}
+    </div>
+  `).join('');
+}

package/dashboard/js/render-dispatch.js

@@ -0,0 +1,148 @@
+// dashboard/js/render-dispatch.js — Engine status, dispatch, and log rendering extracted from dashboard.html
+
+function renderEngineStatus(engine) {
+  const badge = document.getElementById('engine-badge');
+  let state = engine?.state || 'stopped';
+  let staleMs = 0;
+
+  // Detect stale engine — says running but heartbeat is old (>2 min)
+  if (state === 'running' && engine?.heartbeat) {
+    staleMs = Date.now() - engine.heartbeat;
+    if (staleMs > 120000) {
+      state = 'stale';
+    }
+  } else if (state === 'running' && !engine?.heartbeat) {
+    // Running but no heartbeat yet — engine just started or old version
+    state = 'running';
+  }
+
+  badge.className = 'engine-badge ' + (state === 'stale' ? 'stopped' : state);
+  badge.textContent = state === 'stale' ? 'STALE' : state.toUpperCase();
+  badge.title = state === 'stale'
+    ? 'Engine claims running but heartbeat is stale (>2min). It may have crashed. Run: node engine.js start'
+    : state === 'stopped' ? 'Engine is stopped. Run: node engine.js start' : '';
+  renderEngineAlert(state, staleMs);
+}
+
+function renderEngineAlert(state, staleMs) {
+  const el = document.getElementById('engine-alert');
+  if (!el) return;
+  if (state !== 'stale') {
+    el.style.display = 'none';
+    el.innerHTML = '';
+    return;
+  }
+  const mins = Math.max(1, Math.round(staleMs / 60000));
+  el.innerHTML =
+    '<span class="engine-alert-msg">&#x26A0;&#xFE0F; Engine heartbeat is stale (' + mins + 'm old). Dispatch may be stuck.</span>' +
+    '<span class="engine-alert-action" id="engine-alert-restart">Restart engine</span>';
+  document.getElementById('engine-alert-restart').onclick = async function() {
+    this.classList.add('clicked');
+    this.textContent = 'Restarting...';
+    try {
+      const res = await fetch('/api/engine/restart', { method: 'POST' });
+      const data = await res.json();
+      if (data.ok) {
+        this.textContent = 'Restarted (PID ' + data.pid + ')';
+        setTimeout(() => refresh(), 3000);
+      } else {
+        this.textContent = 'Failed: ' + (data.error || 'unknown');
+        this.classList.remove('clicked');
+      }
+    } catch (e) {
+      this.textContent = 'Failed: ' + e.message;
+      this.classList.remove('clicked');
+    }
+  };
+  el.style.display = 'flex';
+}
+
+function renderDispatch(dispatch) {
+  if (!dispatch) return;
+
+  // Stats
+  const stats = document.getElementById('dispatch-stats');
+  stats.innerHTML =
+    '<div class="dispatch-stat"><div class="dispatch-stat-num yellow">' + (dispatch.active || []).length + '</div><div class="dispatch-stat-label">Active</div></div>' +
+    '<div class="dispatch-stat"><div class="dispatch-stat-num blue">' + (dispatch.pending || []).length + '</div><div class="dispatch-stat-label">Pending</div></div>' +
+    '<div class="dispatch-stat"><div class="dispatch-stat-num green">' + (dispatch.completed || []).length + '</div><div class="dispatch-stat-label">Completed</div></div>';
+
+  // Active
+  const activeEl = document.getElementById('dispatch-active');
+  if ((dispatch.active || []).length > 0) {
+    activeEl.innerHTML = '<div style="font-size:11px;color:var(--green);margin-bottom:6px;font-weight:600">ACTIVE</div><div class="dispatch-list">' +
+      dispatch.active.map(d =>
+        '<div class="dispatch-item">' +
+          '<span class="dispatch-type ' + (d.type || '') + '">' + escHtml(d.type || '') + '</span>' +
+          '<span class="dispatch-agent">' + escHtml(d.agentName || d.agent || '') + '</span>' +
+          '<span class="dispatch-task" title="' + escHtml(d.task || '') + '">' + escHtml(d.task || '') + '</span>' +
+          '<span class="dispatch-time">' + shortTime(d.started_at) + '</span>' +
+        '</div>'
+      ).join('') + '</div>';
+  } else {
+    activeEl.innerHTML = '<div style="color:var(--muted);font-size:11px;margin-bottom:8px">No active dispatches</div>';
+  }
+
+  // Pending
+  const pendingEl = document.getElementById('dispatch-pending');
+  if ((dispatch.pending || []).length > 0) {
+    pendingEl.innerHTML = '<div style="font-size:11px;color:var(--yellow);margin:8px 0 6px;font-weight:600">PENDING</div><div class="dispatch-list">' +
+      dispatch.pending.map(d =>
+        '<div class="dispatch-item">' +
+          '<span class="dispatch-type ' + (d.type || '') + '">' + escHtml(d.type || '') + '</span>' +
+          '<span class="dispatch-agent">' + escHtml(d.agentName || d.agent || '') + '</span>' +
+          '<span class="dispatch-task" title="' + escHtml(d.task || '') + '">' + escHtml(d.task || '') + '</span>' +
+          (d.skipReason ? '<span style="font-size:9px;color:var(--muted);margin-left:6px" title="' + escHtml(d.skipReason) + '">' + escHtml(d.skipReason.replace(/_/g, ' ')) + '</span>' : '') +
+        '</div>'
+      ).join('') + '</div>';
+  } else {
+    pendingEl.innerHTML = '';
+  }
+
+  // Completed
+  const completedEl = document.getElementById('completed-content');
+  const completedCount = document.getElementById('completed-count');
+  const completed = (dispatch.completed || []).slice().reverse();
+  completedCount.textContent = completed.length;
+
+  if (completed.length > 0) {
+    completedEl.innerHTML = '<table class="pr-table"><thead><tr><th>ID</th><th>Type</th><th>Agent</th><th>Task</th><th>Result</th><th>Completed</th></tr></thead><tbody>' +
+      completed.map(d => {
+        const isError = d.result === 'error';
+        const agentId = (d.agent || '').toLowerCase();
+        const errorBtn = isError
+          ? ' <button class="error-details-btn" data-agent="' + escHtml(agentId) + '" data-reason="' + escHtml(d.reason || 'No reason recorded') + '" data-task="' + escHtml((d.task || '').slice(0, 100)) + '" onclick="showErrorDetails(this.dataset.agent, this.dataset.reason, this.dataset.task)" title="View error details">details</button>'
+          : '';
+        return '<tr>' +
+          '<td style="font-family:Consolas;font-size:10px" title="' + escHtml(d.id || '') + '">' + escHtml(d.id || '') + '</td>' +
+          '<td><span class="dispatch-type ' + (d.type || '') + '">' + escHtml(d.type || '') + '</span></td>' +
+          '<td>' + escHtml(d.agentName || d.agent || '') + '</td>' +
+          '<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + escHtml((d.task || '').slice(0, 60)) + '</td>' +
+          '<td style="color:' + (d.result === 'success' ? 'var(--green)' : 'var(--red)') + '">' + escHtml(d.result || '') + errorBtn + '</td>' +
+          '<td class="pr-date">' + shortTime(d.completed_at) + '</td>' +
+        '</tr>';
+      }).join('') + '</tbody></table>';
+  } else {
+    completedEl.innerHTML = '<p class="empty">No completed dispatches yet.</p>';
+  }
+}
+
+function renderEngineLog(log) {
+  const el = document.getElementById('engine-log');
+  if (!log || log.length === 0) {
+    el.innerHTML = '<div class="empty">No log entries yet.</div>';
+    return;
+  }
+  el.innerHTML = log.slice().reverse().map(e =>
+    '<div class="log-entry">' +
+      '<span class="log-ts">' + shortTime(e.timestamp) + '</span> ' +
+      '<span class="log-level-' + (e.level || 'info') + '">[' + (e.level || 'info') + ']</span> ' +
+      escHtml(e.message || '') +
+    '</div>'
+  ).join('');
+}
+
+function shortTime(t) {
+  if (!t) return '';
+  try { return new Date(t).toLocaleTimeString(); } catch { return t; }
+}