@yemi33/minions 0.1.2454 → 0.1.2455

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

@@ -6,6 +6,66 @@ let wiPage = 0;
 let wiFilterOptionsSignature = '';
 const WI_PER_PAGE = 20;
 
+// ── Bulk-operations mode (W-mscjvm33007r79ef) ─────────────────────────────
+// OFF by default: the normal Work Items UI shows no selection affordances and
+// cannot multi-select. An explicit "Bulk select" control flips wiBulkMode on,
+// which renders per-row checkboxes + a bulk action bar. wiSelectedIds tracks
+// the selection by work-item id so it stays coherent across the 4s refresh
+// poll, filtering, paging, and item state changes — bulk actions resolve ids
+// to LIVE items at apply time and skip any that vanished (never act on stale
+// or nonexistent items).
+let wiBulkMode = false;
+const wiSelectedIds = new Set();
+
+// Bulk actions reuse the EXISTING single-item POST endpoints and their exact
+// availability rules, so bulk never broadens or invents an action. `statuses:
+// null` means "any status" (Delete). Each spec drives eligibility, the
+// endpoint, the confirm gate, and whether the row is optimistically removed.
+//
+// `destructive` IS the bulk confirmation policy (it is the only gate on the
+// single confirm() in wiBulkAction), so it must mirror whether the single-item
+// counterpart confirms: cancelWorkItem/deleteWorkItem confirm, so bulk Cancel
+// and Delete confirm too. A bulk action multiplies the blast radius, so it can
+// never be LESS guarded than acting on one item. Cancel is destructive because
+// the server kills the running agent (handleWorkItemsCancel) and there is no
+// undo — retry only accepts `failed`, so a cancelled `dispatched` item cannot
+// be restored. Parity is enforced by test/unit/dashboard-work-items-bulk-actions.test.js.
+const WI_BULK_ACTIONS = {
+  cancel: { label: 'Cancel', endpoint: '/api/work-items/cancel', statuses: ['pending', 'dispatched', 'queued', 'failed'], destructive: true, optimisticRemove: true, wake: false },
+  archive: { label: 'Archive', endpoint: '/api/work-items/archive', statuses: ['done', 'failed'], destructive: false, optimisticRemove: true, wake: false },
+  retry: { label: 'Retry', endpoint: '/api/work-items/retry', statuses: ['failed'], destructive: false, optimisticRemove: false, wake: true },
+  delete: { label: 'Delete', endpoint: '/api/work-items/delete', statuses: null, destructive: true, optimisticRemove: true, wake: false },
+};
+
+// Pure eligibility predicate — mirrors the per-item button visibility in
+// wiRow() so a bulk action is only offered for the same statuses. Exported for
+// unit testing (no DOM deps).
+function wiActionEligible(item, action) {
+  const spec = WI_BULK_ACTIONS[action];
+  if (!spec || !item) return false;
+  if (spec.statuses === null) return true;
+  return spec.statuses.indexOf(item.status || 'pending') !== -1;
+}
+
+// Pure planner — resolves a selection (ids) against the LIVE item list and
+// splits it into { eligible, ineligible, missing } for a given action. This is
+// the anti-stale core: an id no longer present in `items` lands in `missing`
+// and is never acted on. Exported for unit testing.
+function wiBulkPlan(items, selectedIds, action) {
+  const idSet = selectedIds instanceof Set ? selectedIds : new Set(selectedIds || []);
+  const byId = new Map((items || []).map(function(i) { return [i.id, i]; }));
+  const eligible = [];
+  const ineligible = [];
+  const missing = [];
+  idSet.forEach(function(id) {
+    const it = byId.get(id);
+    if (!it) { missing.push(id); return; }
+    if (wiActionEligible(it, action)) eligible.push(it);
+    else ineligible.push(it);
+  });
+  return { eligible: eligible, ineligible: ineligible, missing: missing };
+}
+
 // Filter + sort controls modeled on the PR table (dashboard/js/render-prs.js).
 // Each dimension maps to a <select> in dashboard/pages/work.html; options are
 // populated dynamically from the current data set with a signature guard so the
@@ -184,7 +244,7 @@ function wiRetryBtn(item) {
   return '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:1px 6px;color:var(--yellow);border-color:var(--yellow);margin-left:4px" onclick="event.stopPropagation();retryWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')">Retry</button>';
 }
 
-function wiRow(item) {
+function wiRow(item, bulk) {
   const statusBadge = (s) => {
     const cls = s === 'failed' ? 'rejected' : s === 'dispatched' ? 'building' : s === 'pending' || s === 'queued' ? 'active' : s === 'done' ? 'approved' : s === 'decomposed' ? 'approved' : 'draft';
     return '<span class="pr-badge ' + cls + '">' + escapeHtml(s) + '</span>';
@@ -217,7 +277,15 @@ function wiRow(item) {
       : '';
     followupChip = ' <a class="pr-badge draft" style="font-size:var(--text-sm);text-decoration:none" target="_blank" rel="noopener" href="' + escapeHtml(prFollowup.parent_pr_url) + '" title="Follow-up dispatched from ' + escapeHtml(prRef) + (followupBy ? ' by ' + escapeHtml(followupBy) : '') + '" onclick="event.stopPropagation()">&#8617; from ' + escapeHtml(prLabel) + '</a>';
   }
-  return '<tr data-wi-id="' + escapeHtml(item.id) + '" style="cursor:pointer" onclick="if(shouldIgnoreSelectionClick(event))return;openWorkItemDetail(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')">' +
+  var _wiSelected = bulk && wiSelectedIds.has(item.id);
+  var bulkCell = bulk
+    ? '<td class="wi-bulk-cell"><input type="checkbox" class="wi-bulk-cb" data-wi-id="' + escapeHtml(item.id) + '" data-wi-source="' + escapeHtml(item._source || '') + '" aria-label="Select ' + escapeHtml((item.title || item.id || '').slice(0, 80)) + '"' + (_wiSelected ? ' checked' : '') + ' onclick="event.stopPropagation();wiToggleSelect(this)"></td>'
+    : '';
+  // The click handler receives the SAME `bulk` flag the row was rendered with
+  // (see wiRowClick) — a row drawn without a checkbox must never toggle a
+  // selection the operator cannot see.
+  return '<tr data-wi-id="' + escapeHtml(item.id) + '"' + (_wiSelected ? ' class="wi-row-selected"' : '') + ' style="cursor:pointer" onclick="wiRowClick(event,\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\',' + (bulk ? 'true' : 'false') + ')">' +
+    bulkCell +
     '<td style="min-width:280px;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="' + escapeHtml((item.title || '').slice(0, 200)) + '">' + escapeHtml(item.title || '') + followupChip + '</td>' +
     '<td><span style="font-size:var(--text-sm);color:var(--muted)">' + escapeHtml(item._source || '') + '</span>' +
       (item.scope === 'fan-out' ? ' <span class="pr-badge ' + (item.status === 'done' || item.status === 'failed' ? 'draft' : 'building') + '" style="font-size:var(--text-sm)">fan-out</span>' : '') + '</td>' +
@@ -250,8 +318,8 @@ function wiRow(item) {
     '</td>' +
     '<td>' +
       (item.completedAgents && item.completedAgents.length > 0
-        ? '<span class="pr-agent">' + escapeHtml(item.completedAgents.join(', ')) + '</span>'
-        : '<span class="pr-agent">' + escapeHtml(item.dispatched_to || item.agent || '—') + '</span>') +
+        ? '<span class="pr-agent">' + item.completedAgents.map(function(a) { return MinionsAgentIdentity.nameWithBadgeHtml({ id: a }); }).join(', ') + '</span>'
+        : '<span class="pr-agent">' + ((item.dispatched_to || item.agent) ? MinionsAgentIdentity.nameWithBadgeHtml({ id: item.dispatched_to || item.agent }) : '&mdash;') + '</span>') +
     '</td>' +
     '<td>' + prLink + (failSnippet ? failSnippet : '') + '</td>' +
     '<td><span class="pr-date">' + escapeHtml((item.created || '').slice(0, 16).replace('T', ' ')) + '</span></td>' +
@@ -272,15 +340,18 @@ function wiRow(item) {
                (acCount ? '<span title="' + acCount + ' acceptance criteria">&#x2611;' + acCount + '</span>' : '');
       })() +
     '</td>' +
-    '<td style="white-space:nowrap;text-align:right">' +
-      // W-mqqa76pi — "View live output" opens the agent slide-in panel (live-output
-      // tab auto-selected when the agent is working). Only for genuinely active
-      // dispatches with a resolvable assigned agent id.
-      ((item.status === 'dispatched' && (item.dispatched_to || item.agent)) ? '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:1px 6px;color:var(--green);border-color:var(--green);margin-right:4px" onclick="event.stopPropagation();openArtifact(\'agent\',\'' + escapeHtml(item.dispatched_to || item.agent) + '\')" title="View live output">&#x1F4FA;</button>' : '') +
-      ((item.status === 'pending' || item.status === 'failed') ? '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:1px 6px;color:var(--blue);border-color:var(--blue);margin-right:4px" onclick="event.stopPropagation();editWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Edit work item">&#x270E;</button>' : '') +
-      ((item.status === 'done' || item.status === 'failed') ? '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:1px 6px;color:var(--muted);border-color:var(--muted);margin-right:4px" onclick="event.stopPropagation();archiveWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Archive work item">&#x1F4E6;</button>' : '') +
-      ((item.status === 'done' || item.status === 'failed') && !item._humanFeedback ? '<button class="btn-action" style="margin-right:4px" onclick="event.stopPropagation();feedbackWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Give feedback">&#x1F44D;&#x1F44E;</button>' : (item._humanFeedback ? '<span style="font-size:var(--text-sm)" title="Feedback given">' + (item._humanFeedback.rating === 'up' ? '&#x1F44D;' : '&#x1F44E;') + '</span> ' : '')) +
-      ((item.status === 'pending' || item.status === 'dispatched' || item.status === 'queued' || item.status === 'failed') ? '<button class="pr-pager-btn" style="font-size:var(--text-sm);padding:1px 6px;color:var(--orange);border-color:var(--orange);margin-right:4px" onclick="event.stopPropagation();cancelWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Cancel work item and kill agent">&#x1F6AB;</button>' : '') +
+    '<td class="wi-actions-cell" style="white-space:nowrap;text-align:right">' +
+      // W-mscjvm33007r79ef — every per-item action EXCEPT Delete now lives in an
+      // overflow menu (wiOpenOverflowMenu), built on demand from the live item so
+      // it always reflects current availability/disabled states. The ⋯ button is
+      // omitted when the item has no eligible menu action (see
+      // _wiOverflowActionsFor), so an actionless item shows only Delete.
+      // The "feedback given" indicator is informational (not an action) and is
+      // preserved inline so operators still see prior feedback at a glance.
+      (item._humanFeedback ? '<span style="font-size:var(--text-sm);margin-right:4px" title="Feedback given">' + (item._humanFeedback.rating === 'up' ? '&#x1F44D;' : '&#x1F44E;') + '</span>' : '') +
+      (_wiOverflowActionsFor(item).length
+        ? '<button class="wi-overflow-btn pr-pager-btn" style="font-size:var(--text-sm);padding:1px 8px;margin-right:4px" data-wi-id="' + escapeHtml(item.id) + '" data-wi-source="' + escapeHtml(item._source || '') + '" aria-haspopup="menu" aria-expanded="false" aria-label="More actions for ' + escapeHtml((item.title || item.id || '').slice(0, 80)) + '" title="More actions" onclick="event.stopPropagation();wiOpenOverflowMenu(this)">&#x22EF;</button>'
+        : '') +
       '<button class="btn-destructive" onclick="event.stopPropagation();deleteWorkItem(\'' + escapeHtml(item.id) + '\',\'' + escapeHtml(item._source || '') + '\')" title="Delete work item and kill agent">&#x2715;</button>' +
     '</td>' +
   '</tr>';
@@ -432,6 +503,9 @@ function renderWorkItems(items, opts) {
   const view = computed.view;
   filteredWorkItems = view;
   const el = document.getElementById('work-items-content');
+  // Every return path below replaces el.innerHTML, so drop any overflow menu
+  // anchored inside it first (see _wiCloseOverflowMenuIn).
+  _wiCloseOverflowMenuIn(el);
   const countEl = document.getElementById('wi-count');
   const summaryEl = document.getElementById('wi-filter-summary');
   if (countEl) countEl.textContent = view.length;
@@ -442,12 +516,15 @@ function renderWorkItems(items, opts) {
   }
   if (!allWorkItems.length) {
     wiPage = 0;
+    if (wiSelectedIds.size) wiSelectedIds.clear();
     el.innerHTML = '<p class="empty">No work items. Add tasks via Command Center above.</p>';
+    _wiSyncBulkUI();
     return;
   }
   if (!view.length) {
     wiPage = 0;
     el.innerHTML = '<p class="empty">No work items match the selected filters.</p>';
+    _wiSyncBulkUI();
     return;
   }
 
@@ -457,8 +534,21 @@ function renderWorkItems(items, opts) {
   const start = wiPage * WI_PER_PAGE;
   const pageItems = view.slice(start, start + WI_PER_PAGE);
 
-  let html = '<div class="pr-table-wrap"><table class="pr-table"><thead><tr><th>Title</th><th>Project</th><th>Type</th><th>Priority</th><th>Status</th><th>Agent</th><th>PR</th><th>Created</th><th>Updated</th><th></th><th></th></tr></thead><tbody>';
-  html += pageItems.map(wiRow).join('');
+  // Keep the bulk selection coherent as items appear/disappear across refreshes,
+  // filtering, and paging: drop any selected id that no longer exists in the
+  // full list. Selection is by id (not row index), so it survives re-sorts and
+  // page changes; bulk actions still re-resolve to live items at apply time.
+  if (wiSelectedIds.size) {
+    const liveIds = new Set(allWorkItems.map(function(w) { return w.id; }));
+    wiSelectedIds.forEach(function(id) { if (!liveIds.has(id)) wiSelectedIds.delete(id); });
+  }
+
+  const bulkHeadCell = wiBulkMode ? '<th class="wi-bulk-cell"></th>' : '';
+  let html = '<div class="pr-table-wrap"><table class="pr-table"><thead><tr>' + bulkHeadCell + '<th>Title</th><th>Project</th><th>Type</th><th>Priority</th><th>Status</th><th>Agent</th><th>PR</th><th>Created</th><th>Updated</th><th></th><th></th></tr></thead><tbody>';
+  // Wrap so wiRow gets (item, wiBulkMode) — NOT (item, index, array) from a bare
+  // .map(wiRow), which would pass a truthy index as `bulk` for every row after
+  // the first and render stray checkboxes.
+  html += pageItems.map(function(it) { return wiRow(it, wiBulkMode); }).join('');
   html += '</tbody></table></div>';
 
   if (view.length > WI_PER_PAGE) {
@@ -478,6 +568,7 @@ function renderWorkItems(items, opts) {
   // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escapeHtml() by wiRow() (fields: work item id/title/source/status/agent/PR links/dates/follow-up metadata)
   el.innerHTML = html;
   restoreDashboardScrollState(el, scrollState);
+  _wiSyncBulkUI();
 }
 
 async function editWorkItem(id, source) {
@@ -686,7 +777,7 @@ async function toggleWorkItemArchive() {
             '<td style="min-width:240px;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">' + escapeHtml(i.title || '') + '</td>' +
             '<td><span class="dispatch-type ' + (i.type || '') + '">' + escapeHtml(i.type || '') + '</span></td>' +
             '<td style="color:' + (i.status === 'done' ? 'var(--green)' : 'var(--red)') + '">' + escapeHtml(i.status || '') + '</td>' +
-            '<td>' + escapeHtml(i.dispatched_to || '—') + '</td>' +
+            '<td>' + (i.dispatched_to ? MinionsAgentIdentity.nameWithBadgeHtml({ id: i.dispatched_to }) : '&mdash;') + '</td>' +
             '<td class="pr-date">' + shortTime(i.archivedAt) + '</td>' +
           '</tr>';
         }).join('') + '</tbody></table></div>';
@@ -977,7 +1068,7 @@ function _wiRenderDetail(item) {
     _descHtml = escapeHtml(item.title || '—');
   }
   html += field('Description', '<div id="wi-detail-desc" style="font-size:var(--text-md);max-height:320px;overflow-y:auto;padding:8px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm)">' + _descHtml + '</div>');
-  html += field('Agent', escapeHtml(item.dispatched_to || item.agent || 'Auto'));
+  html += field('Agent', (item.dispatched_to || item.agent) ? MinionsAgentIdentity.nameWithBadgeHtml({ id: item.dispatched_to || item.agent }) : escapeHtml('Auto'));
   // W-ms0ytfdd000d5a26 — the model this work item actually ran on. Resolved
   // server-side (engine/core/queries.js#resolveWorkItemModelInfo) so persisted
   // dispatch evidence — what the runtime reported, else what Minions requested
@@ -1003,7 +1094,7 @@ function _wiRenderDetail(item) {
     html += field('Working directory', '<code style="font-size:var(--text-sm);background:var(--surface2);padding:2px 6px;border-radius:var(--radius-sm)">' + escapeHtml(item.meta.workdir) + '</code>');
   }
   if (item.created) html += field('Created', escapeHtml(formatLocalDateTime(item.created)));
-  if (item.dispatched_at) html += field('Dispatched', escapeHtml(formatLocalDateTime(item.dispatched_at)) + ' to ' + escapeHtml(item.dispatched_to || '?'));
+  if (item.dispatched_at) html += field('Dispatched', escapeHtml(formatLocalDateTime(item.dispatched_at)) + ' to ' + (item.dispatched_to ? MinionsAgentIdentity.nameWithBadgeHtml({ id: item.dispatched_to }) : escapeHtml('?')));
   if (item.completedAt) html += field('Completed', escapeHtml(formatLocalDateTime(item.completedAt)));
   if (item.failReason) html += field('Failure Reason', '<span style="color:var(--red)">' + escapeHtml(item.failReason) + '</span>');
   // W-mrtdet41000h935a — surface the cancellation reason for CANCELLED items.
@@ -1294,9 +1385,13 @@ function openWorkItemDetail(id, source) {
 }
 
 function openAllWorkItems() {
+  // Re-opening the modal replaces its rows; defence-in-depth so the menu can
+  // never outlive its anchor even when the outside-click dismissal is bypassed
+  // (e.g. a programmatic open).
+  _wiCloseOverflowMenuIn(document.getElementById('modal-body'));
   document.getElementById('modal-title').textContent = 'All Work Items (' + filteredWorkItems.length + ')';
   const html = '<div class="pr-table-wrap"><table class="pr-table"><thead><tr><th>Title</th><th>Project</th><th>Type</th><th>Priority</th><th>Status</th><th>Agent</th><th>PR</th><th>Created</th><th>Updated</th><th></th><th></th></tr></thead><tbody>' +
-    filteredWorkItems.map(wiRow).join('') + '</tbody></table></div>';
+    filteredWorkItems.map(function(it) { return wiRow(it, false); }).join('') + '</tbody></table></div>';
   // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; all user data wrapped in escapeHtml() by wiRow() (fields: work item id/title/source/status/agent/PR links/dates/follow-up metadata)
   document.getElementById('modal-body').innerHTML = html;
   document.getElementById('modal-body').style.fontFamily = "'Segoe UI', system-ui, sans-serif";
@@ -1422,10 +1517,330 @@ function _wiInjectSourceChipFromFrontmatter(content, containerId) {
   bodyEl.insertAdjacentHTML('afterbegin', sourceBlock);
 }
 
+// ════════════════════════════════════════════════════════════════════════
+// Overflow (⋯) menu + bulk-operations mode — W-mscjvm33007r79ef
+// ════════════════════════════════════════════════════════════════════════
+
+// Actions offered in a row's overflow menu, derived from the LIVE item so the
+// menu always matches current status. Each entry invokes the existing per-item
+// action fn, preserving its confirmation/optimistic/toast/error behavior. Used
+// both to build the menu and (via .length) to decide whether to render the ⋯
+// button at all. Also drives the source-inspection guarantee that Delete is NOT
+// in here (Delete stays a directly-visible button).
+function _wiOverflowActionsFor(item) {
+  if (!item) return [];
+  var src = item._source || '';
+  var st = item.status;
+  var agentId = item.dispatched_to || item.agent;
+  var out = [];
+  if (st === 'dispatched' && agentId) {
+    out.push({ label: 'View live output', fn: function() { openArtifact('agent', agentId); } });
+  }
+  if (st === 'pending' || st === 'failed') {
+    out.push({ label: 'Edit', fn: function() { editWorkItem(item.id, src); } });
+  }
+  if (st === 'done' || st === 'failed') {
+    out.push({ label: 'Archive', fn: function() { archiveWorkItem(item.id, src); } });
+  }
+  if ((st === 'done' || st === 'failed') && !item._humanFeedback) {
+    out.push({ label: 'Give feedback', fn: function() { feedbackWorkItem(item.id, src); } });
+  }
+  if (st === 'pending' || st === 'dispatched' || st === 'queued' || st === 'failed') {
+    out.push({ label: 'Cancel', fn: function() { cancelWorkItem(item.id, src); } });
+  }
+  return out;
+}
+
+let _wiOverflowEl = null;
+let _wiOverflowAnchor = null;
+
+// Accessible popover built with pure DOM construction (createElement /
+// textContent — never innerHTML), mirroring _openCheckoutModeMenu in
+// render-other.js so it sidesteps the XSS lint gate. role=menu + menuitem,
+// arrow-key navigation, Escape/outside-click dismissal, focus management.
+function wiOpenOverflowMenu(btn) {
+  if (_wiOverflowAnchor === btn) { wiCloseOverflowMenu(true); return; }
+  wiCloseOverflowMenu(false);
+  var id = btn.getAttribute('data-wi-id');
+  var src = btn.getAttribute('data-wi-source') || '';
+  var item = allWorkItems.find(function(w) { return w.id === id && (!src || (w._source || '') === src); });
+  var actions = _wiOverflowActionsFor(item);
+  if (!actions.length) return;
+  var menu = document.createElement('div');
+  menu.className = 'wi-overflow-menu';
+  menu.setAttribute('role', 'menu');
+  menu.setAttribute('aria-label', 'Work item actions');
+  actions.forEach(function(a) {
+    var mi = document.createElement('button');
+    mi.type = 'button';
+    mi.className = 'wi-overflow-item';
+    mi.setAttribute('role', 'menuitem');
+    mi.tabIndex = -1;
+    mi.textContent = a.label;
+    mi.addEventListener('click', function(ev) {
+      ev.stopPropagation();
+      wiCloseOverflowMenu(true);
+      a.fn();
+    });
+    menu.appendChild(mi);
+  });
+  document.body.appendChild(menu);
+  // Position after append so offsetWidth is known; right-align under the button.
+  var r = btn.getBoundingClientRect();
+  var top = r.bottom + window.scrollY + 2;
+  var left = r.right + window.scrollX - menu.offsetWidth;
+  if (left < 4) left = 4;
+  menu.style.top = top + 'px';
+  menu.style.left = left + 'px';
+  btn.setAttribute('aria-expanded', 'true');
+  _wiOverflowEl = menu;
+  _wiOverflowAnchor = btn;
+  // Defer listener attach so the opening click doesn't immediately close it.
+  setTimeout(function() {
+    document.addEventListener('mousedown', _wiOverflowOutside, true);
+    document.addEventListener('keydown', _wiOverflowKeydown, true);
+  }, 0);
+  var first = menu.querySelector('.wi-overflow-item');
+  if (first) first.focus();
+}
+
+function wiCloseOverflowMenu(returnFocus) {
+  var anchor = _wiOverflowAnchor;
+  if (_wiOverflowEl && _wiOverflowEl.parentNode) _wiOverflowEl.parentNode.removeChild(_wiOverflowEl);
+  if (anchor) anchor.setAttribute('aria-expanded', 'false');
+  _wiOverflowEl = null;
+  _wiOverflowAnchor = null;
+  document.removeEventListener('mousedown', _wiOverflowOutside, true);
+  document.removeEventListener('keydown', _wiOverflowKeydown, true);
+  if (returnFocus && anchor) { try { anchor.focus(); } catch (e) { /* anchor gone after re-render */ } }
+}
+
+function _wiOverflowOutside(e) {
+  if (_wiOverflowEl && !_wiOverflowEl.contains(e.target) && e.target !== _wiOverflowAnchor) {
+    wiCloseOverflowMenu(false);
+  }
+}
+
+// The menu is appended to document.body but is ANCHORED to a ⋯ button living
+// inside a container that gets re-rendered wholesale — the work-items table on
+// every non-304 /api/work-items poll, the all-items modal on every open.
+// Replacing that container's innerHTML destroys the anchor and strands the
+// menu, which keeps the action closures built from the item as it looked when
+// the menu opened: a row that has since flipped dispatched → done would still
+// offer Cancel, breaking the "menu always reflects current availability"
+// invariant. Close it BEFORE the swap, scoped to the container actually being
+// replaced so a re-render of one surface cannot dismiss a menu opened from the
+// other. Pass returnFocus=false — a background poll must not yank focus to an
+// anchor that is about to vanish.
+function _wiCloseOverflowMenuIn(container) {
+  if (container && _wiOverflowAnchor && container.contains(_wiOverflowAnchor)) {
+    wiCloseOverflowMenu(false);
+  }
+}
+
+// The modal is torn down by paths this module never sees — browser Back /
+// Alt+Left (popstate), sidebar navigation, a frame pop — and none of them fire
+// the mousedown/keydown dismissal above. Opt the menu into the shared modal
+// teardown so a menu opened from a row inside the "See all" modal can't outlive
+// it. Registering the SCOPED closer keeps a menu anchored outside the modal
+// unaffected. typeof-guarded: this module is also require()d by unit tests.
+if (typeof registerTransientPopupCloser === 'function') registerTransientPopupCloser(_wiCloseOverflowMenuIn);
+
+function _wiOverflowKeydown(e) {
+  if (!_wiOverflowEl) return;
+  var items = Array.prototype.slice.call(_wiOverflowEl.querySelectorAll('.wi-overflow-item'));
+  if (!items.length) return;
+  var idx = items.indexOf(document.activeElement);
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    wiCloseOverflowMenu(true);
+  } else if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    items[(idx + 1) % items.length].focus();
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    items[(idx - 1 + items.length) % items.length].focus();
+  } else if (e.key === 'Home') {
+    e.preventDefault();
+    items[0].focus();
+  } else if (e.key === 'End') {
+    e.preventDefault();
+    items[items.length - 1].focus();
+  } else if (e.key === 'Tab') {
+    wiCloseOverflowMenu(false);
+  }
+}
+
+// ── Row click + selection ─────────────────────────────────────────────────
+// A row behaves the way it was RENDERED: `bulk` is the per-render flag wiRow()
+// baked into the handler, NOT the module-global wiBulkMode. They diverge —
+// openAllWorkItems() renders wiRow(it, false) while bulk mode can be on — and
+// reading the global there let a click on a checkbox-less modal row silently
+// toggle wiSelectedIds: invisible state feeding the destructive bulk Delete,
+// with the detail view never opening. Fail closed: only an explicit bulk row
+// toggles selection; anything else opens the detail (preserving the
+// pre-existing text-selection guard).
+function wiRowClick(event, id, source, bulk) {
+  if (shouldIgnoreSelectionClick(event)) return;
+  if (bulk === true) { _wiToggleId(id); return; }
+  openWorkItemDetail(id, source);
+}
+
+function _wiToggleId(id) {
+  if (wiSelectedIds.has(id)) wiSelectedIds.delete(id);
+  else wiSelectedIds.add(id);
+  _wiReflectRowSelection(id);
+  _wiSyncBulkUI();
+}
+
+function wiToggleSelect(cb) {
+  var id = cb.getAttribute('data-wi-id');
+  if (!id) return;
+  if (cb.checked) wiSelectedIds.add(id);
+  else wiSelectedIds.delete(id);
+  _wiReflectRowSelection(id);
+  _wiSyncBulkUI();
+}
+
+function _wiReflectRowSelection(id) {
+  var sel = wiSelectedIds.has(id);
+  var content = document.getElementById('work-items-content');
+  if (!content) return;
+  var esc = (typeof CSS !== 'undefined' && CSS.escape) ? CSS.escape(id) : String(id).replace(/"/g, '\\"');
+  content.querySelectorAll('tr[data-wi-id="' + esc + '"]').forEach(function(row) {
+    row.classList.toggle('wi-row-selected', sel);
+    var cb = row.querySelector('.wi-bulk-cb');
+    if (cb) cb.checked = sel;
+  });
+}
+
+// ── Bulk mode enter/exit ──────────────────────────────────────────────────
+function wiToggleBulkMode() {
+  wiBulkMode = !wiBulkMode;
+  if (!wiBulkMode) wiSelectedIds.clear();
+  wiCloseOverflowMenu(false);
+  _wiSyncBulkToggleBtn();
+  renderWorkItems(allWorkItems, { preserveScroll: true });
+}
+
+function wiExitBulkMode() {
+  if (!wiBulkMode) return;
+  wiBulkMode = false;
+  wiSelectedIds.clear();
+  wiCloseOverflowMenu(false);
+  _wiSyncBulkToggleBtn();
+  renderWorkItems(allWorkItems, { preserveScroll: true });
+}
+
+function wiClearSelection() {
+  if (!wiSelectedIds.size) { _wiSyncBulkUI(); return; }
+  var ids = Array.from(wiSelectedIds);
+  wiSelectedIds.clear();
+  ids.forEach(_wiReflectRowSelection);
+  _wiSyncBulkUI();
+}
+
+// Select-all targets the CURRENT filtered set (every page of the active
+// filter), keyed by id so it stays coherent across paging and re-sorts.
+function wiToggleSelectAll(cb) {
+  if (cb.checked) filteredWorkItems.forEach(function(w) { wiSelectedIds.add(w.id); });
+  else wiSelectedIds.clear();
+  filteredWorkItems.forEach(function(w) { _wiReflectRowSelection(w.id); });
+  _wiSyncBulkUI();
+}
+
+function _wiSyncBulkToggleBtn() {
+  var btn = document.getElementById('wi-bulk-toggle');
+  if (!btn) return;
+  btn.setAttribute('aria-pressed', wiBulkMode ? 'true' : 'false');
+  btn.classList.toggle('active', wiBulkMode);
+  btn.textContent = wiBulkMode ? 'Done' : 'Bulk select';
+}
+
+// Re-sync the bulk bar to current state after every render: bar visibility,
+// selected count, select-all checkbox/indeterminate against the filtered set,
+// and per-action button enablement + eligible counts.
+function _wiSyncBulkUI() {
+  _wiSyncBulkToggleBtn();
+  var bar = document.getElementById('wi-bulk-bar');
+  if (bar) bar.hidden = !wiBulkMode;
+  if (!wiBulkMode) return;
+  var count = wiSelectedIds.size;
+  var countEl = document.getElementById('wi-bulk-count');
+  if (countEl) countEl.textContent = count + ' selected';
+  var selAll = document.getElementById('wi-bulk-selectall-cb');
+  if (selAll) {
+    var total = filteredWorkItems.length;
+    var selectedInView = filteredWorkItems.reduce(function(n, w) { return n + (wiSelectedIds.has(w.id) ? 1 : 0); }, 0);
+    selAll.checked = total > 0 && selectedInView === total;
+    selAll.indeterminate = selectedInView > 0 && selectedInView < total;
+  }
+  Object.keys(WI_BULK_ACTIONS).forEach(function(action) {
+    var b = document.querySelector('#wi-bulk-bar [data-bulk-action="' + action + '"]');
+    if (!b) return;
+    var plan = wiBulkPlan(allWorkItems, wiSelectedIds, action);
+    var n = plan.eligible.length;
+    b.disabled = count === 0 || n === 0;
+    var base = WI_BULK_ACTIONS[action].label;
+    b.textContent = n > 0 ? base + ' (' + n + ')' : base;
+  });
+}
+
+// Apply a bulk action. Resolves the selection to LIVE items, applies only to
+// eligible ones, confirms destructive actions, reports partial failures
+// accurately (never claims success if any failed), and never acts on
+// stale/missing ids.
+async function wiBulkAction(action) {
+  var spec = WI_BULK_ACTIONS[action];
+  if (!spec) return;
+  var plan = wiBulkPlan(allWorkItems, wiSelectedIds, action);
+  var targets = plan.eligible;
+  if (!targets.length) {
+    showToast('cmd-toast', 'No selected items are eligible for ' + spec.label + '.', false);
+    return;
+  }
+  if (spec.destructive) {
+    if (!confirm(spec.label + ' ' + targets.length + ' work item' + (targets.length === 1 ? '' : 's') + '? This will kill any running agents and cannot be undone.')) return;
+  }
+  var results = await Promise.allSettled(targets.map(function(it) {
+    return fetch(spec.endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id: it.id, source: it._source || undefined })
+    }).then(function(r) {
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      return r.json().catch(function() { return {}; });
+    });
+  }));
+  var succeeded = [];
+  var failed = [];
+  results.forEach(function(res, i) {
+    if (res.status === 'fulfilled') succeeded.push(targets[i]);
+    else failed.push(targets[i]);
+  });
+  if (spec.optimisticRemove) {
+    succeeded.forEach(function(it) { markDeleted('wi:' + it.id); _removeWiRow(it.id); });
+  }
+  succeeded.forEach(function(it) { wiSelectedIds.delete(it.id); });
+  if (spec.wake && succeeded.length) wakeEngine();
+  var skipped = plan.ineligible.length + plan.missing.length;
+  if (failed.length) {
+    // Roll back optimistic hides for the failed ids and refresh to the truth.
+    failed.forEach(function(it) { clearDeleted('wi:' + it.id); });
+    showToast('cmd-toast', spec.label + ': ' + succeeded.length + ' succeeded, ' + failed.length + ' failed' + (skipped ? ', ' + skipped + ' skipped' : '') + '.', false);
+    refresh();
+  } else {
+    showToast('cmd-toast', spec.label + ': ' + succeeded.length + ' item' + (succeeded.length === 1 ? '' : 's') + (skipped ? ' (' + skipped + ' skipped)' : '') + '.', true);
+    if (!spec.optimisticRemove) refresh();
+  }
+  _wiSyncBulkUI();
+}
+
+
 if (typeof window !== 'undefined') {
-  window.MinionsWork = { wiRow, renderWorkItems, editWorkItem, submitWorkItemEdit, deleteWorkItem, archiveWorkItem, toggleWorkItemArchive, retryWorkItem, wiPrev, wiNext, feedbackWorkItem, openCreateWorkItemModal, openWorkItemDetail, openAllWorkItems, viewAgentOutput, openInboxNote, needsAttentionInfo, applyWiFilters, resetWiFilters, toggleWiSortDir };
+  window.MinionsWork = { wiRow, renderWorkItems, editWorkItem, submitWorkItemEdit, deleteWorkItem, archiveWorkItem, toggleWorkItemArchive, retryWorkItem, wiPrev, wiNext, feedbackWorkItem, openCreateWorkItemModal, openWorkItemDetail, openAllWorkItems, viewAgentOutput, openInboxNote, needsAttentionInfo, applyWiFilters, resetWiFilters, toggleWiSortDir, wiOpenOverflowMenu, wiCloseOverflowMenu, wiRowClick, wiToggleSelect, wiToggleBulkMode, wiExitBulkMode, wiClearSelection, wiToggleSelectAll, wiBulkAction };
 }
 // exported for testing — pure helpers safe to require under Node (no DOM deps).
 if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { needsAttentionInfo, formatPendingReason };
+  module.exports = { needsAttentionInfo, formatPendingReason, wiActionEligible, wiBulkPlan, WI_BULK_ACTIONS };
 }

package/dashboard/js/utils.js

@@ -269,6 +269,10 @@ function withTopFrame(type, id, fn) {
 function _restoreFrameToVisible(frame) {
   // Synchronously restore a snapshotted frame as the visible modal layer.
   // scrollY is restored after a double-rAF so layout settles first.
+  // The modal stays open but its whole body is replaced, so any popup anchored
+  // inside it is about to lose its anchor — dismiss BEFORE the swap, while
+  // contains() can still identify it.
+  _dismissModalTransientPopups();
   var titleEl = document.getElementById('modal-title');
   var bodyEl = document.getElementById('modal-body');
   if (titleEl) {
@@ -308,10 +312,46 @@ function _popOneFrameInternal() {
   _restoreFrameToVisible(frame);
 }
 
+// ─── Transient popup teardown ────────────────────────────────────────────────
+// An anchored popover (the work-item ⋯ overflow menu, the checkout-mode picker,
+// any future dropdown) is appended to document.body but ANCHORED to a trigger
+// that lives inside some container. Hide or replace that container and the
+// popover is stranded: it floats over the page with its anchor gone, still
+// holding the action closures built when it opened.
+//
+// The modal is the worst offender because it is torn down by paths that never
+// touch the DOM a popover listens to — browser Back / Alt+Left (popstate),
+// sidebar navigation (switchPage), and a frame pop all bypass the
+// mousedown/keydown dismissal the popover installed on itself.
+//
+// Owners register a SCOPED closer: one that closes only when its own anchor is
+// inside the container being torn down, so tearing down the modal can never
+// dismiss a popover opened elsewhere on the page. Every modal teardown and
+// every wholesale replacement of the modal body funnels through
+// dismissTransientPopupsIn(), so a new popup gets this for free by registering.
+var _transientPopupClosers = [];
+function registerTransientPopupCloser(fn) {
+  if (typeof fn !== 'function') return;
+  if (_transientPopupClosers.indexOf(fn) === -1) _transientPopupClosers.push(fn);
+}
+function dismissTransientPopupsIn(container) {
+  // No container means nothing to scope against — a closer could not tell
+  // whether its anchor is affected, so it must not fire.
+  if (!container) return;
+  for (var i = 0; i < _transientPopupClosers.length; i++) {
+    // Per-closer isolation: one popup owner must never block modal teardown.
+    try { _transientPopupClosers[i](container); } catch (e) { try { console.error(e); } catch {} }
+  }
+}
+function _dismissModalTransientPopups() {
+  dismissTransientPopupsIn(document.getElementById('modal'));
+}
+
 function _physicallyCloseModal() {
   // Close the modal DOM without going through closeModal() (which would itself
   // call popModalFrame and recurse). Mirrors the visible side-effects of
   // closeModal but skips stack management.
+  _dismissModalTransientPopups();
   var modalEl = document.getElementById('modal');
   if (modalEl) modalEl.classList.remove('open');
   var inner = document.querySelector('#modal .modal');

package/dashboard/pages/tools.html

@@ -1,4 +1,5 @@
       <section>
+        <p id="tools-refresh-status" class="empty" role="status" aria-live="polite" style="display:none"></p>
         <h2>Minions Skills <span class="count" id="skills-count">0</span> <span class="qa-section-subtitle">discovered from runtime native dirs, plugin installs, and configured project repos</span></h2>
         <div id="skills-list"><p class="empty">No skills yet. Agents create these when they discover repeatable workflows.</p></div>
       </section>