@yemi33/minions 0.1.12 → 0.1.14

package/dashboard/js/render-dispatch.js

@@ -0,0 +1,171 @@
+// 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; }
+}
+
+async function showErrorDetails(agentId, reason, task) {
+  document.getElementById('modal-title').textContent = 'Error: ' + task;
+  document.getElementById('modal-body').textContent = 'Reason: ' + reason + '\n\nLoading agent output...';
+  document.getElementById('modal-body').style.fontFamily = 'Consolas, monospace';
+  document.getElementById('modal-body').style.whiteSpace = 'pre-wrap';
+  document.getElementById('modal').classList.add('open');
+
+  try {
+    const output = await fetch('/api/agent/' + agentId + '/output').then(r => r.text());
+    const lines = output.split('\n');
+    const stderrIdx = lines.findIndex(l => l.startsWith('## stderr'));
+    let summary = '';
+    if (stderrIdx >= 0) {
+      const stderr = lines.slice(stderrIdx + 1).join('\n').trim();
+      if (stderr) summary = 'STDERR:\n' + stderr.slice(-2000);
+    }
+    if (!summary) summary = output.slice(-3000);
+    document.getElementById('modal-body').textContent = 'Reason: ' + reason + '\n\n---\n\n' + summary;
+  } catch {
+    document.getElementById('modal-body').textContent = 'Reason: ' + reason + '\n\n(Could not load agent output)';
+  }
+}

package/dashboard/js/render-inbox.js

@@ -0,0 +1,163 @@
+// render-inbox.js — Inbox and notes rendering functions extracted from dashboard.html
+
+function renderInbox(inbox) {
+  inboxData = inbox;
+  const list = document.getElementById('inbox-list');
+  const count = document.getElementById('inbox-count');
+  count.textContent = inbox.length;
+  if (!inbox.length) { list.innerHTML = '<p class="empty">No messages yet.</p>'; return; }
+  list.innerHTML = inbox.map((item, i) => `
+    <div class="inbox-item" data-file="notes/inbox/${escHtml(item.name)}">
+      <div class="inbox-name" onclick="openModal(${i})" style="cursor:pointer">
+        <span>${escHtml(item.name)}</span><span>${item.age}</span>
+      </div>
+      <div class="inbox-preview" onclick="openModal(${i})" style="cursor:pointer">${escHtml(item.content.slice(0,200))}</div>
+      <div style="display:flex;gap:6px;margin-top:6px;align-items:center">
+        <button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" onclick="event.stopPropagation();promoteToKB('${escHtml(item.name)}')">Add to Knowledge Base</button>
+        <button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" onclick="event.stopPropagation();openInboxInExplorer('${escHtml(item.name)}')">Open in Explorer</button>
+        <button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;color:var(--red)" onclick="event.stopPropagation();deleteInboxItem('${escHtml(item.name)}')">Delete</button>
+      </div>
+    </div>
+  `).join('');
+  restoreNotifBadges();
+}
+
+function promoteToKB(name) {
+  const categories = [
+    { id: 'architecture', label: 'Architecture' },
+    { id: 'conventions', label: 'Conventions' },
+    { id: 'project-notes', label: 'Project Notes' },
+    { id: 'build-reports', label: 'Build Reports' },
+    { id: 'reviews', label: 'Reviews' },
+  ];
+  const picker = '<div style="padding:16px 20px">' +
+    '<p style="font-size:13px;color:var(--text);margin-bottom:12px">Choose a category for <strong>' + escHtml(name) + '</strong>:</p>' +
+    '<div style="display:flex;flex-direction:column;gap:8px">' +
+    categories.map(c =>
+      '<button class="pr-pager-btn" style="font-size:12px;padding:8px 16px;text-align:left" onclick="doPromoteToKB(\'' + escHtml(name) + '\',\'' + c.id + '\')">' + c.label + '</button>'
+    ).join('') +
+    '</div></div>';
+  document.getElementById('modal-title').textContent = 'Add to Knowledge Base';
+  document.getElementById('modal-body').innerHTML = picker;
+  document.getElementById('modal').classList.add('open');
+}
+
+function renderNotes(notes) {
+  const el = document.getElementById('notes-list');
+  const content = typeof notes === 'object' ? notes.content : notes;
+  const updatedAt = typeof notes === 'object' ? notes.updatedAt : null;
+
+  // Show last updated timestamp
+  const updatedEl = document.getElementById('notes-updated');
+  if (updatedEl && updatedAt) {
+    const d = new Date(updatedAt);
+    updatedEl.textContent = 'updated ' + d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit'});
+  }
+
+  if (!content || !content.trim()) { el.innerHTML = '<p class="empty">No team notes yet.</p>'; return; }
+  el.innerHTML = '<div class="notes-preview" onclick="openNotesModal()" title="Click to expand">' + escHtml(content) + '</div>';
+}
+
+function openNotesModal() {
+  const preview = document.querySelector('.notes-preview');
+  if (!preview) return;
+  const content = preview.textContent;
+  document.getElementById('modal-title').textContent = 'Team Notes';
+  document.getElementById('modal-body').textContent = content;
+  document.getElementById('modal-body').style.fontFamily = 'Consolas, monospace';
+  document.getElementById('modal-body').style.whiteSpace = 'pre-wrap';
+  _modalDocContext = { title: 'Team Notes', content, selection: '' };
+  _modalEditable = 'notes.md';
+  _modalFilePath = 'notes.md'; showModalQa();
+  document.getElementById('modal-edit-btn').style.display = '';
+  // steer btn removed — unified send
+  document.getElementById('modal').classList.add('open');
+}
+
+function modalToggleEdit() {
+  const body = document.getElementById('modal-body');
+  body.contentEditable = 'true';
+  body.style.border = '1px solid var(--blue)';
+  body.style.borderRadius = '4px';
+  body.style.padding = '12px';
+  body.style.outline = 'none';
+  body.focus();
+  document.getElementById('modal-edit-btn').style.display = 'none';
+  document.getElementById('modal-save-btn').style.display = '';
+  document.getElementById('modal-cancel-edit-btn').style.display = '';
+}
+
+async function modalSaveEdit() {
+  if (!_modalEditable) return;
+  const body = document.getElementById('modal-body');
+  const content = body.innerText;
+
+  try {
+    const res = await fetch('/api/notes-save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ file: _modalEditable, content }),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || 'Save failed');
+
+    body.contentEditable = 'false';
+    body.style.border = '';
+    body.style.padding = '';
+    document.getElementById('modal-edit-btn').style.display = '';
+    document.getElementById('modal-save-btn').style.display = 'none';
+    document.getElementById('modal-cancel-edit-btn').style.display = 'none';
+    _modalDocContext.content = content;
+    showToast('cmd-toast', 'Team Notes saved', true);
+  } catch (e) {
+    showToast('cmd-toast', 'Error: ' + e.message, false);
+  }
+}
+
+function modalCancelEdit() {
+  const body = document.getElementById('modal-body');
+  body.contentEditable = 'false';
+  body.textContent = _modalDocContext.content; // revert
+  body.style.border = '';
+  body.style.padding = '';
+  document.getElementById('modal-edit-btn').style.display = '';
+  document.getElementById('modal-save-btn').style.display = 'none';
+  document.getElementById('modal-cancel-edit-btn').style.display = 'none';
+}
+
+async function deleteInboxItem(name) {
+  if (!confirm('Delete "' + name + '" from inbox?')) return;
+  try {
+    const res = await fetch('/api/inbox/delete', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name })
+    });
+    if (res.ok) { refresh(); } else { const d = await res.json(); alert('Failed: ' + (d.error || 'unknown')); }
+  } catch (e) { alert('Error: ' + e.message); }
+}
+
+async function openInboxInExplorer(name) {
+  try {
+    await fetch('/api/inbox/open', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name })
+    });
+  } catch {}
+}
+
+async function doPromoteToKB(name, category) {
+  try {
+    const res = await fetch('/api/inbox/promote-kb', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, category })
+    });
+    const data = await res.json();
+    if (res.ok) {
+      closeModal();
+      refresh();
+      refreshKnowledgeBase();
+    } else {
+      alert('Failed: ' + (data.error || 'unknown'));
+    }
+  } catch (e) { alert('Error: ' + e.message); }
+}

package/dashboard/js/render-kb.js

@@ -0,0 +1,125 @@
+// render-kb.js — Knowledge base rendering functions extracted from dashboard.html
+
+let _kbActiveTab = 'all';
+
+async function refreshKnowledgeBase() {
+  try {
+    _kbData = await fetch('/api/knowledge').then(r => r.json());
+    renderKnowledgeBase();
+  } catch {}
+}
+
+function renderKnowledgeBase() {
+  const tabsEl = document.getElementById('kb-tabs');
+  const listEl = document.getElementById('kb-list');
+  const countEl = document.getElementById('kb-count');
+
+  // Count total (skip non-array keys like lastSwept)
+  let total = 0;
+  for (const [k, v] of Object.entries(_kbData)) if (Array.isArray(v)) total += v.length;
+  countEl.textContent = total;
+
+  // Last swept timestamp
+  const sweptEl = document.getElementById('kb-swept-time');
+  if (sweptEl) sweptEl.textContent = _kbData.lastSwept ? 'swept ' + timeSinceStr(new Date(_kbData.lastSwept)) : '';
+
+  if (total === 0) {
+    tabsEl.innerHTML = '';
+    listEl.innerHTML = '<p class="empty">No knowledge entries yet. Notes are classified here after consolidation.</p>';
+    return;
+  }
+
+  // Render tabs
+  let tabsHtml = '<button class="kb-tab ' + (_kbActiveTab === 'all' ? 'active' : '') + '" onclick="kbSetTab(\'all\')">All <span class="badge">' + total + '</span></button>';
+  for (const [cat, items] of Object.entries(_kbData)) {
+    if (!Array.isArray(items) || items.length === 0) continue;
+    const label = KB_CAT_LABELS[cat] || cat;
+    tabsHtml += '<button class="kb-tab ' + (_kbActiveTab === cat ? 'active' : '') + '" onclick="kbSetTab(\'' + cat + '\')">' + label + ' <span class="badge">' + items.length + '</span></button>';
+  }
+  tabsEl.innerHTML = tabsHtml;
+
+  // Collect items for active tab
+  let items = [];
+  if (_kbActiveTab === 'all') {
+    for (const [cat, catItems] of Object.entries(_kbData)) {
+      if (!Array.isArray(catItems)) continue;
+      for (const item of catItems) items.push({ ...item, category: cat });
+    }
+    items.sort((a, b) => b.date.localeCompare(a.date));
+  } else {
+    items = (_kbData[_kbActiveTab] || []).map(i => ({ ...i, category: _kbActiveTab }));
+  }
+
+  if (items.length === 0) {
+    listEl.innerHTML = '<p class="empty">No entries in this category.</p>';
+    return;
+  }
+
+  listEl.innerHTML = items.slice(0, 50).map(item => {
+    const icon = KB_CAT_ICONS[item.category] || '\u{1F4C4}';
+    const label = KB_CAT_LABELS[item.category] || item.category;
+    return '<div class="kb-item" data-file="knowledge/' + escHtml(item.category) + '/' + escHtml(item.file) + '" onclick="kbOpenItem(\'' + escHtml(item.category) + '\', \'' + escHtml(item.file) + '\')">' +
+      '<div class="kb-item-body">' +
+        '<div class="kb-item-title">' + icon + ' ' + escHtml(item.title) + '</div>' +
+        '<div class="kb-item-meta">' +
+          '<span>' + label + '</span>' +
+          (item.agent ? '<span>' + item.agent + '</span>' : '') +
+          '<span>' + (item.date || '') + '</span>' +
+          '<span>' + Math.round(item.size / 1024) + 'KB</span>' +
+        '</div>' +
+        (item.preview ? '<div class="kb-item-preview">' + escHtml(item.preview) + '</div>' : '') +
+      '</div>' +
+    '</div>';
+  }).join('');
+  restoreNotifBadges();
+}
+
+function kbSetTab(tab) {
+  _kbActiveTab = tab;
+  renderKnowledgeBase();
+}
+
+async function kbSweep() {
+  const btn = document.getElementById('kb-sweep-btn');
+  const origText = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = 'sweeping...';
+  btn.style.color = 'var(--blue)';
+  try {
+    const res = await fetch('/api/knowledge/sweep', { method: 'POST', signal: AbortSignal.timeout(300000) });
+    const data = await res.json();
+    if (data.ok) {
+      btn.textContent = 'done';
+      btn.style.color = 'var(--green)';
+      showToast('cmd-toast', 'KB sweep: ' + (data.summary || 'complete'), true);
+      refreshKnowledgeBase();
+    } else {
+      btn.style.color = 'var(--red)';
+      btn.textContent = 'failed';
+      showToast('cmd-toast', 'Sweep failed: ' + (data.error || 'unknown'), false);
+    }
+  } catch (e) {
+    btn.style.color = 'var(--red)';
+    btn.textContent = 'failed';
+    showToast('cmd-toast', 'Sweep error: ' + e.message, false);
+  }
+  setTimeout(() => { btn.textContent = origText; btn.style.color = 'var(--muted)'; btn.disabled = false; }, 3000);
+}
+
+async function kbOpenItem(category, file) {
+  try {
+    const content = await fetch('/api/knowledge/' + category + '/' + encodeURIComponent(file)).then(r => r.text());
+    const display = content.replace(/^---[\s\S]*?---\n*/m, '');
+    document.getElementById('modal-title').textContent = file;
+    document.getElementById('modal-body').textContent = display;
+    _modalDocContext = { title: file, content: display, selection: '' };
+    _modalFilePath = 'knowledge/' + category + '/' + file; showModalQa();
+    // Clear notification badge when opening this document
+    const card = findCardForFile(_modalFilePath);
+    if (card) clearNotifBadge(card);
+    // steer btn removed — unified send
+    document.getElementById('modal').classList.add('open');
+  } catch (e) {
+    console.error('Failed to load KB item:', e);
+  }
+}

package/dashboard/js/render-other.js

@@ -0,0 +1,181 @@
+// render-other.js — Projects, MCP servers, metrics, token usage renderers extracted from dashboard.html
+
+function renderProjects(projects) {
+  const header = document.getElementById('header-projects');
+  const list = document.getElementById('projects-list');
+  if (!projects.length) {
+    header.textContent = 'No projects';
+    list.innerHTML = '<span style="color:var(--muted);font-style:italic">No projects linked. Run: node minions.js add &lt;dir&gt;</span>';
+    return;
+  }
+  header.textContent = projects.map(p => p.name).join(' + ');
+  list.innerHTML = projects.map(p =>
+    '<span title="' + escHtml(p.description || p.path || '') + '" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 10px;color:var(--blue);font-weight:500;cursor:help">' +
+      escHtml(p.name) +
+      (p.description ? '<span style="color:var(--muted);font-weight:400;margin-left:6px;font-size:10px">' + escHtml(p.description.slice(0, 60)) + (p.description.length > 60 ? '...' : '') + '</span>' : '') +
+    '</span>'
+  ).join('') +
+  '<span onclick="addProject()" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 10px;color:var(--muted);font-weight:500;cursor:pointer;border-style:dashed">+ Add</span>';
+
+}
+
+function renderMcpServers(servers) {
+  const el = document.getElementById('mcp-list');
+  const countEl = document.getElementById('mcp-count');
+  countEl.textContent = servers.length;
+  if (!servers.length) {
+    el.innerHTML = '<p class="empty">No MCP servers found. Add them to <code>~/.claude.json</code> and they\'ll appear here automatically.</p>';
+    return;
+  }
+  el.innerHTML = '<div style="display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px">' +
+    servers.map(s =>
+      '<div style="font-size:11px;padding:5px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text)" title="' + escHtml(s.args || s.command) + '">' +
+        escHtml(s.name) +
+      '</div>'
+    ).join('') +
+  '</div>' +
+  '<p style="font-size:10px;color:var(--muted);margin:0">Synced from <code style="color:var(--blue)">~/.claude.json</code> — add MCP servers there to make them available to all agents.</p>';
+}
+
+function renderMetrics(metrics) {
+  const el = document.getElementById('metrics-content');
+  const agents = Object.entries(metrics).filter(([k]) => !k.startsWith('_'));
+  if (agents.length === 0) {
+    el.innerHTML = '<p class="empty">No metrics yet. Metrics appear after agents complete tasks.</p>';
+    renderTokenUsage(metrics);
+    return;
+  }
+  let html = '<table class="pr-table"><thead><tr><th>Agent</th><th>Done</th><th>Errors</th><th>PRs</th><th>Approved</th><th>Rejected</th><th>Rate</th><th>Reviews</th></tr></thead><tbody>';
+  for (const [id, m] of agents) {
+    const rate = m.prsCreated > 0 ? Math.round((m.prsApproved / m.prsCreated) * 100) + '%' : '-';
+    const rateColor = m.prsCreated > 0 ? (m.prsApproved / m.prsCreated >= 0.7 ? 'var(--green)' : 'var(--red)') : 'var(--muted)';
+    html += '<tr>' +
+      '<td style="font-weight:600">' + escHtml(id) + '</td>' +
+      '<td style="color:var(--green)">' + (m.tasksCompleted || 0) + '</td>' +
+      '<td style="color:' + (m.tasksErrored > 0 ? 'var(--red)' : 'var(--muted)') + '">' + (m.tasksErrored || 0) + '</td>' +
+      '<td>' + (m.prsCreated || 0) + '</td>' +
+      '<td style="color:var(--green)">' + (m.prsApproved || 0) + '</td>' +
+      '<td style="color:' + (m.prsRejected > 0 ? 'var(--red)' : 'var(--muted)') + '">' + (m.prsRejected || 0) + '</td>' +
+      '<td style="color:' + rateColor + ';font-weight:600">' + rate + '</td>' +
+      '<td>' + (m.reviewsDone || 0) + '</td>' +
+    '</tr>';
+  }
+  html += '</tbody></table>';
+  el.innerHTML = html;
+  renderTokenUsage(metrics);
+}
+
+function renderTokenUsage(metrics) {
+  const el = document.getElementById('token-usage-content');
+  const agents = Object.entries(metrics).filter(([k]) => !k.startsWith('_'));
+  const daily = metrics._daily || {};
+  const engine = metrics._engine || {};
+
+  // Aggregate agent totals
+  let agentCost = 0, agentInput = 0, agentOutput = 0, agentCache = 0;
+  for (const [, m] of agents) {
+    agentCost += m.totalCostUsd || 0;
+    agentInput += m.totalInputTokens || 0;
+    agentOutput += m.totalOutputTokens || 0;
+    agentCache += m.totalCacheRead || 0;
+  }
+
+  // Aggregate engine totals
+  let engineCost = 0, engineInput = 0, engineOutput = 0, engineCache = 0, engineCalls = 0;
+  for (const [, e] of Object.entries(engine)) {
+    engineCost += e.costUsd || 0;
+    engineInput += e.inputTokens || 0;
+    engineOutput += e.outputTokens || 0;
+    engineCache += e.cacheRead || 0;
+    engineCalls += e.calls || 0;
+  }
+
+  const totalCost = agentCost + engineCost;
+  const totalInput = agentInput + engineInput;
+  const totalOutput = agentOutput + engineOutput;
+  const totalCache = agentCache + engineCache;
+
+  if (totalCost === 0 && Object.keys(daily).length === 0) {
+    el.innerHTML = '<p class="empty">No usage data yet. Token tracking starts on next agent completion.</p>';
+    return;
+  }
+
+  const fmtTokens = (n) => n >= 1000000 ? (n / 1000000).toFixed(1) + 'M' : n >= 1000 ? (n / 1000).toFixed(0) + 'K' : String(n);
+  const fmtCost = (n) => '$' + n.toFixed(2);
+
+  // Summary tiles
+  let html = '<div class="token-tiles">';
+  html += '<div class="token-tile"><div class="token-tile-label">Total Cost</div><div class="token-tile-value">' + fmtCost(totalCost) + '</div></div>';
+  html += '<div class="token-tile"><div class="token-tile-label">Input Tokens</div><div class="token-tile-value">' + fmtTokens(totalInput) + '</div></div>';
+  html += '<div class="token-tile"><div class="token-tile-label">Output Tokens</div><div class="token-tile-value">' + fmtTokens(totalOutput) + '</div></div>';
+  html += '<div class="token-tile"><div class="token-tile-label">Cache Reads</div><div class="token-tile-value">' + fmtTokens(totalCache) + '</div></div>';
+
+  // Today's cost
+  const today = new Date().toISOString().slice(0, 10);
+  const todayData = daily[today];
+  if (todayData) {
+    html += '<div class="token-tile"><div class="token-tile-label">Today</div><div class="token-tile-value">' + fmtCost(todayData.costUsd) + '</div><div class="token-tile-sub">' + (todayData.tasks || 0) + ' tasks</div></div>';
+  }
+  html += '</div>';
+
+  // Daily bar chart (last 14 days)
+  const days = Object.keys(daily).sort().slice(-14);
+  if (days.length > 1) {
+    const maxCost = Math.max(...days.map(d => daily[d].costUsd || 0), 0.01);
+    html += '<div style="font-size:10px;color:var(--muted);margin:8px 0 4px">Daily Cost (last ' + days.length + ' days)</div>';
+    html += '<div class="token-chart">';
+    for (const day of days) {
+      const d = daily[day];
+      const pct = Math.max(((d.costUsd || 0) / maxCost) * 100, 2);
+      html += '<div class="token-bar" style="height:' + pct + '%"><div class="token-bar-tip">' + day.slice(5) + ': ' + fmtCost(d.costUsd) + ' / ' + (d.tasks || 0) + ' tasks</div></div>';
+    }
+    html += '</div>';
+    html += '<div class="token-chart-labels">';
+    for (const day of days) {
+      html += '<span>' + day.slice(8) + '</span>';
+    }
+    html += '</div>';
+  }
+
+  // Per-agent token table
+  const agentsWithUsage = agents.filter(([, m]) => (m.totalCostUsd || 0) > 0);
+  if (agentsWithUsage.length > 0) {
+    html += '<div style="font-size:10px;color:var(--muted);margin:12px 0 4px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Agent Usage</div>';
+    html += '<table class="token-agent-table"><thead><tr><th>Agent</th><th>Cost</th><th>Input</th><th>Output</th><th>Cache</th><th>$/task</th></tr></thead><tbody>';
+    for (const [id, m] of agentsWithUsage.sort((a, b) => (b[1].totalCostUsd || 0) - (a[1].totalCostUsd || 0))) {
+      const tasks = (m.tasksCompleted || 0) + (m.tasksErrored || 0);
+      const perTask = tasks > 0 ? fmtCost((m.totalCostUsd || 0) / tasks) : '-';
+      html += '<tr>' +
+        '<td style="font-weight:600">' + escHtml(id) + '</td>' +
+        '<td>' + fmtCost(m.totalCostUsd || 0) + '</td>' +
+        '<td>' + fmtTokens(m.totalInputTokens || 0) + '</td>' +
+        '<td>' + fmtTokens(m.totalOutputTokens || 0) + '</td>' +
+        '<td>' + fmtTokens(m.totalCacheRead || 0) + '</td>' +
+        '<td style="color:var(--muted)">' + perTask + '</td>' +
+      '</tr>';
+    }
+    html += '</tbody></table>';
+  }
+
+  // Engine (Haiku) usage table
+  const engineEntries = Object.entries(engine).filter(([, e]) => (e.costUsd || 0) > 0 || (e.calls || 0) > 0);
+  if (engineEntries.length > 0) {
+    const labels = { 'consolidation': 'Consolidation', 'command-center': 'Command Center', 'doc-chat': 'Doc Chat' };
+    html += '<div style="font-size:10px;color:var(--muted);margin:12px 0 4px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Engine Usage (Haiku)</div>';
+    html += '<table class="token-agent-table"><thead><tr><th>Operation</th><th>Cost</th><th>Calls</th><th>Input</th><th>Output</th><th>$/call</th></tr></thead><tbody>';
+    for (const [cat, e] of engineEntries.sort((a, b) => (b[1].costUsd || 0) - (a[1].costUsd || 0))) {
+      const perCall = (e.calls || 0) > 0 ? fmtCost((e.costUsd || 0) / e.calls) : '-';
+      html += '<tr>' +
+        '<td style="font-weight:600">' + escHtml(labels[cat] || cat) + '</td>' +
+        '<td>' + fmtCost(e.costUsd || 0) + '</td>' +
+        '<td>' + (e.calls || 0) + '</td>' +
+        '<td>' + fmtTokens(e.inputTokens || 0) + '</td>' +
+        '<td>' + fmtTokens(e.outputTokens || 0) + '</td>' +
+        '<td style="color:var(--muted)">' + perCall + '</td>' +
+      '</tr>';
+    }
+    html += '</tbody></table>';
+  }
+
+  el.innerHTML = html;
+}