@yemi33/minions 0.1.12 → 0.1.14

package/dashboard/js/render-prs.js

@@ -0,0 +1,94 @@
+// render-prs.js — PR tracker rendering functions extracted from dashboard.html
+
+let allPrs = [];
+let prPage = 0;
+const PR_PER_PAGE = 3;
+
+function prRow(pr) {
+  // Minions review (agent) state — separate from ADO human review
+  const sq = pr.minionsReview || {};
+  const reviewSource = sq.status || pr.reviewStatus || 'pending';
+  const reviewClass = reviewSource === 'approved' ? 'approved' : (reviewSource === 'changes-requested' || reviewSource === 'rejected') ? 'rejected' : reviewSource === 'waiting' ? 'building' : 'draft';
+  const reviewLabel = sq.status === 'waiting' ? 'reviewing (minions)' : sq.status ? sq.status + ' (minions)' : (pr.reviewStatus || 'pending');
+  const buildClass = pr.buildStatus === 'passing' ? 'build-pass' : pr.buildStatus === 'failing' ? 'build-fail' : pr.buildStatus === 'running' ? 'building' : 'no-build';
+  const buildLabel = pr.buildStatus || 'none';
+  const statusClass = pr.status === 'merged' ? 'merged' : pr.status === 'abandoned' ? 'rejected' : pr.status === 'active' ? 'active' : 'draft';
+  const statusLabel = pr.status || 'active';
+  const url = pr.url || '#';
+  const prId = pr.id || '—';
+  return '<tr>' +
+    '<td><span class="pr-id">' + escHtml(String(prId)) + '</span></td>' +
+    '<td><a class="pr-title" href="' + escHtml(url) + '" target="_blank">' + escHtml(pr.title || 'Untitled') + '</a></td>' +
+    '<td><span class="pr-agent">' + escHtml(pr.agent || '—') + '</span></td>' +
+    '<td><span class="pr-branch">' + escHtml(pr.branch || '—') + '</span></td>' +
+    '<td><span class="pr-badge ' + reviewClass + '">' + escHtml(reviewLabel) + '</span></td>' +
+    '<td>' + (sq.reviewer && sq.status !== 'waiting' ? '<span class="pr-agent" title="' + escHtml(sq.note || '') + '">' + escHtml(sq.reviewer) + '</span>' : sq.reviewer && sq.status === 'waiting' ? '<span class="pr-agent" style="color:var(--muted)" title="Vote pending confirmation">' + escHtml(sq.reviewer) + '…</span>' : '<span style="color:var(--muted);font-size:11px">—</span>') + '</td>' +
+    '<td><span class="pr-badge ' + buildClass + '">' + escHtml(buildLabel) + '</span></td>' +
+    '<td><span class="pr-badge ' + statusClass + '">' + escHtml(statusLabel) + '</span></td>' +
+    '<td><span class="pr-date">' + escHtml(pr.created || '—') + '</span></td>' +
+    '</tr>';
+}
+
+function prTableHtml(rows) {
+  return '<div class="pr-table-wrap"><table class="pr-table"><thead><tr>' +
+    '<th>PR</th><th>Title</th><th>Agent</th><th>Branch</th><th>Review</th><th>Signed Off By</th><th>Build</th><th>Status</th><th>Created</th><th></th>' +
+    '</tr></thead><tbody>' + rows + '</tbody></table></div>';
+}
+
+function renderPrs(prs) {
+  allPrs = prs;
+  const el = document.getElementById('pr-content');
+  const count = document.getElementById('pr-count');
+  count.textContent = prs.length;
+  if (!prs.length) {
+    el.innerHTML = '<p class="pr-empty">No pull requests yet. PRs created by agents will appear here with review, build, and merge status.</p>';
+    return;
+  }
+  const totalPages = Math.ceil(prs.length / PR_PER_PAGE);
+  if (prPage >= totalPages) prPage = totalPages - 1;
+  const start = prPage * PR_PER_PAGE;
+  const pagePrs = prs.slice(start, start + PR_PER_PAGE);
+  const rows = pagePrs.map(prRow).join('');
+
+  let pager = '';
+  if (prs.length > PR_PER_PAGE) {
+    pager = '<div class="pr-pager">' +
+      '<span class="pr-page-info">Showing ' + (start+1) + ' to ' + Math.min(start+PR_PER_PAGE, prs.length) + ' of ' + prs.length + '</span>' +
+      '<div class="pr-pager-btns">' +
+        '<button class="pr-pager-btn ' + (prPage === 0 ? 'disabled' : '') + '" onclick="prPrev()">Prev</button>' +
+        '<button class="pr-pager-btn ' + (prPage >= totalPages-1 ? 'disabled' : '') + '" onclick="prNext()">Next</button>' +
+        '<button class="pr-pager-btn see-all" onclick="openAllPrs()">See all ' + prs.length + ' PRs</button>' +
+      '</div>' +
+    '</div>';
+  }
+
+  el.innerHTML = prTableHtml(rows) + pager;
+}
+
+function prPrev() { if (prPage > 0) { prPage--; renderPrs(allPrs); } }
+function prNext() { const totalPages = Math.ceil(allPrs.length / PR_PER_PAGE); if (prPage < totalPages-1) { prPage++; renderPrs(allPrs); } }
+
+function openAllPrs() {
+  const modalEl = document.querySelector('#modal .modal');
+  if (modalEl) modalEl.classList.add('modal-wide');
+  document.getElementById('modal-title').textContent = 'All Pull Requests (' + allPrs.length + ')';
+  document.getElementById('modal-body').innerHTML = prTableHtml(allPrs.map(prRow).join(''));
+  document.getElementById('modal-body').style.fontFamily = "'Segoe UI', system-ui, sans-serif";
+  document.getElementById('modal-body').style.whiteSpace = 'normal';
+  document.getElementById('modal').classList.add('open');
+}
+
+function openModal(i) {
+  const item = inboxData[i];
+  if (!item) return;
+  document.getElementById('modal-title').textContent = item.name;
+  document.getElementById('modal-body').innerHTML =
+    '<div style="margin-bottom:12px"><button class="pr-pager-btn" style="font-size:10px;padding:3px 10px" onclick="promoteToKB(\'' + escHtml(item.name) + '\')">Add to Knowledge Base</button></div>' +
+    '<pre style="white-space:pre-wrap;word-wrap:break-word;margin:0;font-family:Consolas,monospace;font-size:12px;line-height:1.7;color:var(--muted)">' + escHtml(item.content) + '</pre>';
+  _modalDocContext = { title: item.name, content: item.content, selection: '' };
+  _modalFilePath = 'notes/inbox/' + item.name; showModalQa();
+  // Clear notification badge when opening this document
+  const card = findCardForFile(_modalFilePath);
+  if (card) clearNotifBadge(card);
+  document.getElementById('modal').classList.add('open');
+}

package/dashboard/js/render-schedules.js

@@ -0,0 +1,158 @@
+// render-schedules.js — Schedule rendering functions extracted from dashboard.html
+
+function renderSchedules(schedules) {
+  const el = document.getElementById('scheduled-content');
+  const countEl = document.getElementById('scheduled-count');
+  countEl.textContent = schedules.length;
+  if (!schedules.length) {
+    el.innerHTML = '<p class="empty">No scheduled tasks. Add one to automate recurring work.</p>';
+    return;
+  }
+  let html = '<div class="pr-table-wrap"><table class="pr-table"><thead><tr><th>ID</th><th>Title</th><th>Cron</th><th>Type</th><th>Project</th><th>Agent</th><th>Enabled</th><th>Last Run</th><th></th></tr></thead><tbody>';
+  for (const s of schedules) {
+    const enabledBadge = s.enabled
+      ? '<span class="pr-badge approved">enabled</span>'
+      : '<span class="pr-badge rejected">disabled</span>';
+    const lastRun = s._lastRun ? timeAgo(s._lastRun) : 'never';
+    const typeBadge = '<span class="dispatch-type ' + escHtml(s.type || 'implement') + '">' + escHtml(s.type || 'implement') + '</span>';
+    html += '<tr>' +
+      '<td><span class="pr-id">' + escHtml(s.id || '') + '</span></td>' +
+      '<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(s.title || '') + '">' + escHtml(s.title || '') + '</td>' +
+      '<td><code style="font-size:10px;color:var(--blue)">' + escHtml(s.cron || '') + '</code></td>' +
+      '<td>' + typeBadge + '</td>' +
+      '<td><span style="font-size:10px;color:var(--muted)">' + escHtml(s.project || '') + '</span></td>' +
+      '<td><span class="pr-agent">' + escHtml(s.agent || 'auto') + '</span></td>' +
+      '<td>' + enabledBadge + '</td>' +
+      '<td><span class="pr-date">' + escHtml(lastRun) + '</span></td>' +
+      '<td style="white-space:nowrap">' +
+        '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:' + (s.enabled ? 'var(--yellow)' : 'var(--green)') + ';border-color:' + (s.enabled ? 'var(--yellow)' : 'var(--green)') + ';margin-right:4px" onclick="event.stopPropagation();toggleScheduleEnabled(\'' + escHtml(s.id) + '\',' + !s.enabled + ')" title="' + (s.enabled ? 'Disable' : 'Enable') + '">' + (s.enabled ? '&#x23F8;' : '&#x25B6;') + '</button>' +
+        '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--blue);border-color:var(--blue);margin-right:4px" onclick="event.stopPropagation();openEditScheduleModal(\'' + escHtml(s.id) + '\')" title="Edit">&#x270E;</button>' +
+        '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--red);border-color:var(--red)" onclick="event.stopPropagation();deleteSchedule(\'' + escHtml(s.id) + '\')" title="Delete">&#x2715;</button>' +
+      '</td>' +
+    '</tr>';
+  }
+  html += '</tbody></table></div>';
+  el.innerHTML = html;
+  window._lastSchedules = schedules;
+}
+
+function _scheduleFormHtml(sched, isEdit) {
+  const types = ['implement', 'test', 'explore', 'ask', 'review', 'fix'];
+  const priorities = ['high', 'medium', 'low'];
+  const typeOpts = types.map(t => '<option value="' + t + '"' + ((sched.type || 'implement') === t ? ' selected' : '') + '>' + t + '</option>').join('');
+  const priOpts = priorities.map(p => '<option value="' + p + '"' + ((sched.priority || 'medium') === p ? ' selected' : '') + '>' + p + '</option>').join('');
+  const projOpts = '<option value="">Any</option>' + cmdProjects.map(p => '<option value="' + escHtml(p.name) + '"' + (sched.project === p.name ? ' selected' : '') + '>' + escHtml(p.name) + '</option>').join('');
+  const agentOpts = '<option value="">Auto</option>' + cmdAgents.map(a => '<option value="' + escHtml(a.id) + '"' + (sched.agent === a.id ? ' selected' : '') + '>' + escHtml(a.name) + '</option>').join('');
+
+  const inputStyle = 'display:block;width:100%;margin-top:4px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-md);font-family:inherit';
+
+  return '<div style="display:flex;flex-direction:column;gap:12px;font-family:inherit">' +
+    (isEdit ? '' :
+      '<label style="color:var(--text);font-size:var(--text-md)">ID (unique slug)' +
+        '<input id="sched-edit-id" value="' + escHtml(sched.id || '') + '" placeholder="e.g. nightly-tests" style="' + inputStyle + '">' +
+      '</label>') +
+    '<label style="color:var(--text);font-size:var(--text-md)">Title' +
+      '<input id="sched-edit-title" value="' + escHtml(sched.title || '') + '" style="' + inputStyle + '">' +
+    '</label>' +
+    '<label style="color:var(--text);font-size:var(--text-md)">Cron <span style="font-size:10px;color:var(--muted)">(minute hour dayOfWeek)</span>' +
+      '<input id="sched-edit-cron" value="' + escHtml(sched.cron || '') + '" placeholder="0 2 *" style="' + inputStyle + '">' +
+    '</label>' +
+    '<div style="display:flex;gap:12px">' +
+      '<label style="color:var(--text);font-size:var(--text-md);flex:1">Type' +
+        '<select id="sched-edit-type" style="' + inputStyle + '">' + typeOpts + '</select>' +
+      '</label>' +
+      '<label style="color:var(--text);font-size:var(--text-md);flex:1">Priority' +
+        '<select id="sched-edit-priority" style="' + inputStyle + '">' + priOpts + '</select>' +
+      '</label>' +
+    '</div>' +
+    '<div style="display:flex;gap:12px">' +
+      '<label style="color:var(--text);font-size:var(--text-md);flex:1">Project' +
+        '<select id="sched-edit-project" style="' + inputStyle + '">' + projOpts + '</select>' +
+      '</label>' +
+      '<label style="color:var(--text);font-size:var(--text-md);flex:1">Agent' +
+        '<select id="sched-edit-agent" style="' + inputStyle + '">' + agentOpts + '</select>' +
+      '</label>' +
+    '</div>' +
+    '<label style="color:var(--text);font-size:var(--text-md)">Description' +
+      '<textarea id="sched-edit-desc" rows="3" style="' + inputStyle + ';resize:vertical">' + escHtml(sched.description || '') + '</textarea>' +
+    '</label>' +
+    '<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:8px">' +
+      '<button onclick="closeModal()" class="pr-pager-btn" style="padding:6px 16px;font-size:var(--text-md)">Cancel</button>' +
+      '<button onclick="submitSchedule(' + isEdit + ')" style="padding:6px 16px;font-size:var(--text-md);background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer">' + (isEdit ? 'Save' : 'Create') + '</button>' +
+    '</div>' +
+  '</div>';
+}
+
+function openCreateScheduleModal() {
+  document.getElementById('modal-title').textContent = 'New Scheduled Task';
+  document.getElementById('modal-body').style.whiteSpace = 'normal';
+  document.getElementById('modal-body').style.fontFamily = '';
+  document.getElementById('modal-body').innerHTML = _scheduleFormHtml({}, false);
+  document.getElementById('modal').classList.add('open');
+}
+
+function openEditScheduleModal(id) {
+  const sched = (window._lastSchedules || []).find(s => s.id === id);
+  if (!sched) return;
+  document.getElementById('modal-title').textContent = 'Edit Schedule: ' + id;
+  document.getElementById('modal-body').style.whiteSpace = 'normal';
+  document.getElementById('modal-body').style.fontFamily = '';
+  document.getElementById('modal-body').innerHTML = _scheduleFormHtml(sched, true);
+  window._editScheduleId = id;
+  document.getElementById('modal').classList.add('open');
+}
+
+async function submitSchedule(isEdit) {
+  const title = document.getElementById('sched-edit-title').value.trim();
+  const cron = document.getElementById('sched-edit-cron').value.trim();
+  const type = document.getElementById('sched-edit-type').value;
+  const priority = document.getElementById('sched-edit-priority').value;
+  const project = document.getElementById('sched-edit-project').value;
+  const agent = document.getElementById('sched-edit-agent').value;
+  const description = document.getElementById('sched-edit-desc').value;
+  const id = isEdit ? window._editScheduleId : (document.getElementById('sched-edit-id') ? document.getElementById('sched-edit-id').value.trim() : '');
+
+  if (!id) { alert('ID is required'); return; }
+  if (!title) { alert('Title is required'); return; }
+  if (!cron) { alert('Cron expression is required'); return; }
+
+  const payload = { id, title, cron, type, priority, project: project || undefined, agent: agent || undefined, description: description || undefined, enabled: true };
+  const url = isEdit ? '/api/schedules/update' : '/api/schedules';
+  try {
+    const res = await fetch(url, {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+    if (res.ok) { closeModal(); refresh(); showToast('cmd-toast', isEdit ? 'Schedule updated' : 'Schedule created', true); } else {
+      const d = await res.json().catch(() => ({}));
+      alert((isEdit ? 'Update' : 'Create') + ' failed: ' + (d.error || 'unknown'));
+    }
+  } catch (e) { alert('Error: ' + e.message); }
+}
+
+async function toggleScheduleEnabled(id, enabled) {
+  try {
+    const res = await fetch('/api/schedules/update', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, enabled })
+    });
+    if (res.ok) { refresh(); } else {
+      const d = await res.json().catch(() => ({}));
+      alert('Toggle failed: ' + (d.error || 'unknown'));
+    }
+  } catch (e) { alert('Toggle error: ' + e.message); }
+}
+
+async function deleteSchedule(id) {
+  if (!confirm('Delete scheduled task "' + id + '"?')) return;
+  try {
+    const res = await fetch('/api/schedules/delete', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id })
+    });
+    if (res.ok) { refresh(); showToast('cmd-toast', 'Schedule deleted', true); } else {
+      const d = await res.json().catch(() => ({}));
+      alert('Delete failed: ' + (d.error || 'unknown'));
+    }
+  } catch (e) { alert('Delete error: ' + e.message); }
+}

package/dashboard/js/render-skills.js

@@ -0,0 +1,89 @@
+// render-skills.js — Skills rendering functions extracted from dashboard.html
+
+let _skillsTab = 'all';
+let _skillsPage = 0;
+const SKILLS_PER_PAGE = 5;
+
+function renderSkills(skills) {
+  const el = document.getElementById('skills-list');
+  const countEl = document.getElementById('skills-count');
+  countEl.textContent = skills.length;
+  if (!skills.length) {
+    el.innerHTML = '<p class="empty">No skills yet. Agents create these when they discover repeatable workflows.</p>';
+    return;
+  }
+
+  const sourceIcon = (s) => s === 'claude-code' ? '⚡' : s === 'plugin' ? '🔌' : s?.startsWith('project:') ? '📁' : '🔧';
+  const sourceLabel = (s) => s === 'plugin' ? 'plugin' : s?.startsWith('project:') ? s.replace('project:', '') : 'global';
+
+  // Group by source
+  const groups = {};
+  for (const r of skills) {
+    const key = r.source === 'plugin' ? 'plugins' : r.source?.startsWith('project:') ? r.source.replace('project:', '') : 'global';
+    if (!groups[key]) groups[key] = [];
+    groups[key].push(r);
+  }
+  const groupKeys = Object.keys(groups).sort((a, b) => a === 'global' ? -1 : b === 'global' ? 1 : a.localeCompare(b));
+
+  // Tab bar
+  const tabs = [{ key: 'all', label: 'All (' + skills.length + ')' }];
+  for (const k of groupKeys) tabs.push({ key: k, label: k + ' (' + groups[k].length + ')' });
+
+  let html = '<div style="display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap">';
+  for (const t of tabs) {
+    const active = _skillsTab === t.key;
+    html += '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px;' +
+      (active ? 'background:var(--green);color:#fff;border-color:var(--green)' : '') +
+      '" onclick="_skillsTab=\'' + escHtml(t.key) + '\';_skillsPage=0;renderSkills(window._lastSkills)">' + escHtml(t.label) + '</button>';
+  }
+  html += '</div>';
+
+  // Filter by tab
+  const filtered = _skillsTab === 'all' ? skills : (groups[_skillsTab] || []);
+
+  // Paginate
+  const totalPages = Math.ceil(filtered.length / SKILLS_PER_PAGE);
+  if (_skillsPage >= totalPages) _skillsPage = Math.max(0, totalPages - 1);
+  const page = filtered.slice(_skillsPage * SKILLS_PER_PAGE, (_skillsPage + 1) * SKILLS_PER_PAGE);
+
+  html += '<div style="display:flex;flex-direction:column;gap:6px">';
+  for (const r of page) {
+    const autoTag = r.autoGenerated ? '<span style="font-size:8px;background:rgba(63,185,80,0.15);color:var(--green);padding:1px 4px;border-radius:3px;margin-left:4px">auto</span>' : '';
+    html += '<div class="inbox-item" onclick="openSkill(\'' + escHtml(r.file) + '\',\'' + escHtml(r.source || 'claude-code') + '\',\'' + escHtml(r.dir || '') + '\')" style="border-left-color:var(--green)">' +
+      '<div class="inbox-name"><span style="color:var(--green);font-weight:600">' + sourceIcon(r.source) + ' ' + escHtml(r.name) + '</span>' + autoTag +
+        '<span style="font-size:9px;color:var(--muted);margin-left:auto">' + escHtml(sourceLabel(r.source)) + '</span>' +
+      '</div>' +
+      (r.description ? '<div class="inbox-preview" style="color:var(--text)">' + escHtml(r.description) + '</div>' : '') +
+    '</div>';
+  }
+  html += '</div>';
+
+  // Pagination controls
+  if (totalPages > 1) {
+    html += '<div style="display:flex;align-items:center;gap:8px;margin-top:6px;justify-content:center">';
+    html += '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" ' +
+      (_skillsPage === 0 ? 'disabled' : '') +
+      ' onclick="_skillsPage--;renderSkills(window._lastSkills)">&laquo;</button>';
+    html += '<span style="font-size:10px;color:var(--muted)">' + (_skillsPage + 1) + ' / ' + totalPages + '</span>';
+    html += '<button class="pr-pager-btn" style="font-size:9px;padding:2px 8px" ' +
+      (_skillsPage >= totalPages - 1 ? 'disabled' : '') +
+      ' onclick="_skillsPage++;renderSkills(window._lastSkills)">&raquo;</button>';
+    html += '</div>';
+  }
+
+  el.innerHTML = html;
+  window._lastSkills = skills;
+}
+
+function openSkill(file, source, dir) {
+  fetch('/api/skill?file=' + encodeURIComponent(file) + '&source=' + encodeURIComponent(source || 'claude-code') + (dir ? '&dir=' + encodeURIComponent(dir) : ''))
+    .then(r => r.text())
+    .then(content => {
+      document.getElementById('modal-title').textContent = file;
+      document.getElementById('modal-body').textContent = content;
+      document.getElementById('modal-body').style.fontFamily = 'Consolas, monospace';
+      document.getElementById('modal-body').style.whiteSpace = 'pre-wrap';
+      document.getElementById('modal').classList.add('open');
+    })
+    .catch(() => {});
+}

package/dashboard/js/render-work-items.js

@@ -0,0 +1,219 @@
+// dashboard/js/render-work-items.js — Work item rendering and management extracted from dashboard.html
+
+let allWorkItems = [];
+let wiPage = 0;
+const WI_PER_PAGE = 6;
+
+function wiRow(item) {
+  const statusBadge = (s) => {
+    const cls = s === 'failed' ? 'rejected' : s === 'dispatched' ? 'building' : s === 'pending' || s === 'queued' ? 'active' : s === 'done' ? 'approved' : 'draft';
+    return '<span class="pr-badge ' + cls + '">' + escHtml(s) + '</span>';
+  };
+  const typeBadge = (t) => '<span class="dispatch-type ' + (t || 'implement') + '">' + escHtml(t || 'implement') + '</span>';
+  const priBadge = (p) => '<span class="prd-item-priority ' + (p || '') + '">' + escHtml(p || 'medium') + '</span>';
+  const prLink = item._pr
+    ? '<a class="pr-title" href="' + escHtml(item._prUrl || '#') + '" target="_blank" style="font-size:10px">' + escHtml(item._pr) + '</a>'
+    : '<span style="color:var(--muted)">—</span>';
+  return '<tr>' +
+    '<td><span class="pr-id">' + escHtml(item.id || '') + '</span></td>' +
+    '<td style="max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escHtml(item.description || item.title || '') + '">' + escHtml(item.title || '') + '</td>' +
+    '<td><span style="font-size:10px;color:var(--muted)">' + escHtml(item._source || '') + '</span>' +
+      (item.scope === 'fan-out' ? ' <span class="pr-badge ' + (item.status === 'done' || item.status === 'failed' ? 'draft' : 'building') + '" style="font-size:8px">fan-out</span>' : '') + '</td>' +
+    '<td>' + typeBadge(item.type) + '</td>' +
+    '<td>' + priBadge(item.priority) + '</td>' +
+    '<td>' + statusBadge(item.status || 'pending') +
+      (item._pendingReason ? ' <span style="font-size:9px;color:var(--muted);margin-left:4px" title="Pending reason: ' + escHtml(item._pendingReason) + '">' + escHtml(item._pendingReason.replace(/_/g, ' ')) + '</span>' : '') +
+      (item.status === 'failed' ? ' <button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--yellow);border-color:var(--yellow);margin-left:4px" onclick="event.stopPropagation();retryWorkItem(\'' + escHtml(item.id) + '\',\'' + escHtml(item._source || '') + '\')">Retry</button>' : '') +
+    '</td>' +
+    '<td>' +
+      (item.completedAgents && item.completedAgents.length > 0
+        ? '<span class="pr-agent">' + escHtml(item.completedAgents.join(', ')) + '</span>'
+        : '<span class="pr-agent">' + escHtml(item.dispatched_to || '—') + '</span>') +
+      (item.failReason ? '<span style="display:block;font-size:9px;color:var(--red)" title="' + escHtml(item.failReason) + '">' + escHtml(item.failReason.slice(0, 30)) + '</span>' : '') +
+    '</td>' +
+    '<td>' + prLink + '</td>' +
+    '<td><span class="pr-date">' + shortTime(item.created) + '</span></td>' +
+    '<td style="white-space:nowrap">' +
+      ((item.status === 'pending' || item.status === 'failed') ? '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--blue);border-color:var(--blue);margin-right:4px" onclick="event.stopPropagation();editWorkItem(\'' + escHtml(item.id) + '\',\'' + escHtml(item._source || '') + '\')" title="Edit work item">&#x270E;</button>' : '') +
+      ((item.status === 'done' || item.status === 'failed') ? '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--muted);border-color:var(--border);margin-right:4px" onclick="event.stopPropagation();archiveWorkItem(\'' + escHtml(item.id) + '\',\'' + escHtml(item._source || '') + '\')" title="Archive work item">&#x1F4E6;</button>' : '') +
+      '<button class="pr-pager-btn" style="font-size:9px;padding:1px 6px;color:var(--red);border-color:var(--red)" onclick="event.stopPropagation();deleteWorkItem(\'' + escHtml(item.id) + '\',\'' + escHtml(item._source || '') + '\')" title="Delete work item and kill agent">&#x2715;</button>' +
+    '</td>' +
+  '</tr>';
+}
+
+function renderWorkItems(items) {
+  // Sort: active/dispatched first, then by most recent activity
+  const statusOrder = { dispatched: 0, pending: 1, queued: 1, failed: 2, done: 3 };
+  items.sort((a, b) => {
+    const sa = statusOrder[a.status] ?? 2, sb = statusOrder[b.status] ?? 2;
+    if (sa !== sb) return sa - sb;
+    const ta = a.completedAt || a.dispatched_at || a.created || '';
+    const tb = b.completedAt || b.dispatched_at || b.created || '';
+    return tb.localeCompare(ta); // most recent first
+  });
+  allWorkItems = items;
+  const el = document.getElementById('work-items-content');
+  const countEl = document.getElementById('wi-count');
+  countEl.textContent = items.length;
+  if (!items.length) {
+    el.innerHTML = '<p class="empty">No work items. Add tasks via Command Center above.</p>';
+    return;
+  }
+
+  const totalPages = Math.ceil(items.length / WI_PER_PAGE);
+  if (wiPage >= totalPages) wiPage = totalPages - 1;
+  const start = wiPage * WI_PER_PAGE;
+  const pageItems = items.slice(start, start + WI_PER_PAGE);
+
+  let html = '<div class="pr-table-wrap"><table class="pr-table"><thead><tr><th>ID</th><th>Title</th><th>Source</th><th>Type</th><th>Priority</th><th>Status</th><th>Agent</th><th>PR</th><th>Created</th><th></th></tr></thead><tbody>';
+  html += pageItems.map(wiRow).join('');
+  html += '</tbody></table></div>';
+
+  if (items.length > WI_PER_PAGE) {
+    html += '<div class="pr-pager">' +
+      '<span class="pr-page-info">Showing ' + (start+1) + ' to ' + Math.min(start+WI_PER_PAGE, items.length) + ' of ' + items.length + '</span>' +
+      '<div class="pr-pager-btns">' +
+        '<button class="pr-pager-btn ' + (wiPage === 0 ? 'disabled' : '') + '" onclick="wiPrev()">Prev</button>' +
+        '<button class="pr-pager-btn ' + (wiPage >= totalPages-1 ? 'disabled' : '') + '" onclick="wiNext()">Next</button>' +
+        '<button class="pr-pager-btn see-all" onclick="openAllWorkItems()">See all ' + items.length + '</button>' +
+      '</div>' +
+    '</div>';
+  }
+
+  el.innerHTML = html;
+}
+
+function editWorkItem(id, source) {
+  const item = allWorkItems.find(i => i.id === id);
+  if (!item) return;
+  const types = ['implement', 'fix', 'review', 'plan', 'verify', 'investigate', 'refactor', 'test', 'docs'];
+  const priorities = ['critical', 'high', 'medium', 'low'];
+  const agentOpts = cmdAgents.map(a => '<option value="' + escHtml(a.id) + '"' + (item.agent === a.id ? ' selected' : '') + '>' + escHtml(a.name) + '</option>').join('');
+  const typeOpts = types.map(t => '<option value="' + t + '"' + ((item.type || 'implement') === t ? ' selected' : '') + '>' + t + '</option>').join('');
+  const priOpts = priorities.map(p => '<option value="' + p + '"' + ((item.priority || 'medium') === p ? ' selected' : '') + '>' + p + '</option>').join('');
+
+  document.getElementById('modal-title').textContent = 'Edit Work Item ' + id;
+  document.getElementById('modal-body').style.whiteSpace = 'normal';
+  document.getElementById('modal-body').innerHTML =
+    '<div style="display:flex;flex-direction:column;gap:12px;font-family:inherit">' +
+      '<label style="color:var(--text);font-size:var(--text-md)">Title' +
+        '<input id="wi-edit-title" value="' + escHtml(item.title || '') + '" style="display:block;width:100%;margin-top:4px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-md);font-family:inherit">' +
+      '</label>' +
+      '<label style="color:var(--text);font-size:var(--text-md)">Description' +
+        '<textarea id="wi-edit-desc" rows="3" style="display:block;width:100%;margin-top:4px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-md);font-family:inherit;resize:vertical">' + escHtml(item.description || '') + '</textarea>' +
+      '</label>' +
+      '<div style="display:flex;gap:12px">' +
+        '<label style="color:var(--text);font-size:var(--text-md);flex:1">Type' +
+          '<select id="wi-edit-type" style="display:block;width:100%;margin-top:4px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-md)">' + typeOpts + '</select>' +
+        '</label>' +
+        '<label style="color:var(--text);font-size:var(--text-md);flex:1">Priority' +
+          '<select id="wi-edit-priority" style="display:block;width:100%;margin-top:4px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-md)">' + priOpts + '</select>' +
+        '</label>' +
+        '<label style="color:var(--text);font-size:var(--text-md);flex:1">Agent' +
+          '<select id="wi-edit-agent" style="display:block;width:100%;margin-top:4px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:var(--text-md)"><option value="">Auto</option>' + agentOpts + '</select>' +
+        '</label>' +
+      '</div>' +
+      '<div style="display:flex;justify-content:flex-end;gap:8px;margin-top:8px">' +
+        '<button onclick="closeModal()" class="pr-pager-btn" style="padding:6px 16px;font-size:var(--text-md)">Cancel</button>' +
+        '<button onclick="submitWorkItemEdit(\'' + escHtml(id) + '\',\'' + escHtml(source || '') + '\')" style="padding:6px 16px;font-size:var(--text-md);background:var(--blue);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer">Save</button>' +
+      '</div>' +
+    '</div>';
+  document.getElementById('modal').classList.add('open');
+}
+
+async function submitWorkItemEdit(id, source) {
+  const title = document.getElementById('wi-edit-title').value.trim();
+  const description = document.getElementById('wi-edit-desc').value;
+  const type = document.getElementById('wi-edit-type').value;
+  const priority = document.getElementById('wi-edit-priority').value;
+  const agent = document.getElementById('wi-edit-agent').value;
+  if (!title) { alert('Title is required'); return; }
+  try {
+    const res = await fetch('/api/work-items/update', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, source: source || undefined, title, description, type, priority, agent })
+    });
+    if (res.ok) { closeModal(); refresh(); showToast('cmd-toast', 'Work item updated', true); } else {
+      const d = await res.json();
+      alert('Update failed: ' + (d.error || 'unknown'));
+    }
+  } catch (e) { alert('Update error: ' + e.message); }
+}
+
+async function deleteWorkItem(id, source) {
+  if (!confirm('Delete work item ' + id + '? This will kill any running agent and remove all dispatch history.')) return;
+  try {
+    const res = await fetch('/api/work-items/delete', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, source: source || undefined })
+    });
+    if (res.ok) { refresh(); } else {
+      const d = await res.json();
+      alert('Delete failed: ' + (d.error || 'unknown'));
+    }
+  } catch (e) { alert('Delete error: ' + e.message); }
+}
+
+async function archiveWorkItem(id, source) {
+  try {
+    const res = await fetch('/api/work-items/archive', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, source: source || undefined })
+    });
+    if (res.ok) { refresh(); } else {
+      const d = await res.json();
+      alert('Archive failed: ' + (d.error || 'unknown'));
+    }
+  } catch (e) { alert('Archive error: ' + e.message); }
+}
+
+let wiArchiveVisible = false;
+async function toggleWorkItemArchive() {
+  const el = document.getElementById('work-items-archive');
+  wiArchiveVisible = !wiArchiveVisible;
+  if (!wiArchiveVisible) { el.style.display = 'none'; return; }
+  el.style.display = 'block';
+  el.innerHTML = '<p class="empty">Loading archive...</p>';
+  try {
+    const items = await fetch('/api/work-items/archive').then(r => r.json());
+    if (!items.length) { el.innerHTML = '<p class="empty">No archived work items.</p>'; return; }
+    el.innerHTML = '<div style="font-size:10px;color:var(--muted);margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px">Archived (' + items.length + ')</div>' +
+      '<div class="pr-table-wrap"><table class="pr-table"><thead><tr><th>ID</th><th>Title</th><th>Type</th><th>Status</th><th>Agent</th><th>Archived</th></tr></thead><tbody>' +
+      items.map(function(i) {
+        return '<tr style="opacity:0.6">' +
+          '<td><span class="pr-id">' + escHtml(i.id || '') + '</span></td>' +
+          '<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + escHtml(i.title || '') + '</td>' +
+          '<td><span class="dispatch-type ' + (i.type || '') + '">' + escHtml(i.type || '') + '</span></td>' +
+          '<td style="color:' + (i.status === 'done' ? 'var(--green)' : 'var(--red)') + '">' + escHtml(i.status || '') + '</td>' +
+          '<td>' + escHtml(i.dispatched_to || '—') + '</td>' +
+          '<td class="pr-date">' + shortTime(i.archivedAt) + '</td>' +
+        '</tr>';
+      }).join('') + '</tbody></table></div>';
+  } catch (e) { el.innerHTML = '<p class="empty">Failed to load archive.</p>'; }
+}
+
+async function retryWorkItem(id, source) {
+  try {
+    const res = await fetch('/api/work-items/retry', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, source: source || undefined })
+    });
+    if (res.ok) { refresh(); } else {
+      const d = await res.json();
+      alert('Retry failed: ' + (d.error || 'unknown'));
+    }
+  } catch (e) { alert('Retry error: ' + e.message); }
+}
+
+function wiPrev() { if (wiPage > 0) { wiPage--; renderWorkItems(allWorkItems); } }
+function wiNext() { const tp = Math.ceil(allWorkItems.length / WI_PER_PAGE); if (wiPage < tp-1) { wiPage++; renderWorkItems(allWorkItems); } }
+
+function openAllWorkItems() {
+  document.getElementById('modal-title').textContent = 'All Work Items (' + allWorkItems.length + ')';
+  const html = '<div class="pr-table-wrap"><table class="pr-table"><thead><tr><th>ID</th><th>Title</th><th>Source</th><th>Type</th><th>Priority</th><th>Status</th><th>Agent</th><th>PR</th><th>Created</th><th></th></tr></thead><tbody>' +
+    allWorkItems.map(wiRow).join('') + '</tbody></table></div>';
+  document.getElementById('modal-body').innerHTML = html;
+  document.getElementById('modal-body').style.fontFamily = "'Segoe UI', system-ui, sans-serif";
+  document.getElementById('modal-body').style.whiteSpace = 'normal';
+  document.getElementById('modal').classList.add('open');
+}