@yemi33/minions 0.1.2255 → 0.1.2257

package/dashboard/js/charter-editor.js

@@ -0,0 +1,85 @@
+// dashboard/js/charter-editor.js — shared agent charter editor widget.
+//
+// Backs BOTH the agent detail panel (single instance, scope 'detail') and the
+// Settings Agents table (one instance per agent, scope 'settings-<id>'). All IDs
+// are suffixed with a caller-supplied `scope` so multiple editors coexist on the
+// same page. Raw content is kept in a module-level map (outside the DOM) so a
+// surrounding innerHTML rewrite — e.g. switching detail-panel tabs — never loses
+// the operator's unsaved text. Saves go through the existing
+// POST /api/agents/charter endpoint; do NOT add a second endpoint.
+
+const _charterStateByScope = Object.create(null); // scope -> { agentId, raw }
+
+// Returns the editor markup as a string. Side effect: records per-scope state
+// (agentId + raw content) so the toggle/cancel/save handlers can find it without
+// threading data through the DOM. `content` is used verbatim (callers pass
+// `detail.charter || ''`), preserving the detail-panel's pre-existing behavior.
+function renderCharterEditor(opts) {
+  const agentId = (opts && opts.agentId) || '';
+  const content = (opts && opts.content) || '';
+  const scope = (opts && opts.scope) || 'detail';
+  _charterStateByScope[scope] = { agentId, raw: content };
+  const s = escHtml(scope);
+  const a = escHtml(agentId);
+  return '' +
+    '<div style="display:flex;gap:6px;margin-bottom:8px">' +
+      '<button class="pr-pager-btn" id="charter-edit-btn-' + s + '" style="font-size:var(--text-sm);padding:2px 10px" onclick="_toggleCharterEdit(\'' + s + '\')">Edit</button>' +
+      '<button class="modal-copy is-success" id="charter-save-btn-' + s + '" style="display:none" onclick="_saveCharter(\'' + s + '\',\'' + a + '\')">Save</button>' +
+      '<button class="pr-pager-btn" id="charter-cancel-btn-' + s + '" style="font-size:var(--text-sm);padding:2px 10px;display:none" onclick="_cancelCharterEdit(\'' + s + '\')">Cancel</button>' +
+    '</div>' +
+    '<div id="charter-view-' + s + '" class="section">' + renderMd(content || 'No charter found. Click Edit to create one.') + '</div>' +
+    '<textarea id="charter-editor-' + s + '" style="display:none;width:100%;min-height:300px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:Consolas,monospace;font-size:var(--text-md);resize:vertical">' + escHtml(content) + '</textarea>';
+}
+
+function _toggleCharterEdit(scope) {
+  scope = scope || 'detail';
+  document.getElementById('charter-view-' + scope).style.display = 'none';
+  document.getElementById('charter-editor-' + scope).style.display = '';
+  document.getElementById('charter-edit-btn-' + scope).style.display = 'none';
+  document.getElementById('charter-save-btn-' + scope).style.display = '';
+  document.getElementById('charter-cancel-btn-' + scope).style.display = '';
+  document.getElementById('charter-editor-' + scope).focus();
+}
+
+function _cancelCharterEdit(scope) {
+  scope = scope || 'detail';
+  const st = _charterStateByScope[scope] || {};
+  document.getElementById('charter-editor-' + scope).value = st.raw || '';
+  document.getElementById('charter-view-' + scope).style.display = '';
+  document.getElementById('charter-editor-' + scope).style.display = 'none';
+  document.getElementById('charter-edit-btn-' + scope).style.display = '';
+  document.getElementById('charter-save-btn-' + scope).style.display = 'none';
+  document.getElementById('charter-cancel-btn-' + scope).style.display = 'none';
+}
+
+async function _saveCharter(scope, agentId) {
+  scope = scope || 'detail';
+  const st = _charterStateByScope[scope] || {};
+  const id = agentId || st.agentId;
+  if (!id) { alert('No agent selected'); return; }
+  const content = document.getElementById('charter-editor-' + scope).value;
+  const btn = document.getElementById('charter-save-btn-' + scope);
+  // Optimistic: flip the button to a saving state before the await; revert on error.
+  btn.textContent = 'Saving...'; btn.style.pointerEvents = 'none';
+  try {
+    const res = await fetch('/api/agents/charter', {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ agent: id, content })
+    });
+    if (res.ok) {
+      // eslint-disable-next-line no-unsanitized/property -- reason: renderMd() escapes all user-controlled fields before assembling HTML (see dashboard/js/utils.js)
+      document.getElementById('charter-view-' + scope).innerHTML = renderMd(content);
+      _charterStateByScope[scope] = { agentId: id, raw: content };
+      _cancelCharterEdit(scope);
+      showToast('cmd-toast', 'Charter saved', true);
+    } else {
+      const d = await res.json().catch(() => ({}));
+      alert('Save failed: ' + (d.error || 'unknown'));
+    }
+  } catch (e) { alert('Save failed: ' + e.message); }
+  btn.textContent = 'Save'; btn.style.pointerEvents = '';
+}
+
+try {
+  window.MinionsCharterEditor = { renderCharterEditor, _toggleCharterEdit, _cancelCharterEdit, _saveCharter };
+} catch (e) { /* non-browser (unit source-inspection) */ }

package/dashboard/js/detail-panel.js

@@ -1,6 +1,7 @@
 // dashboard/js/detail-panel.js — Agent detail panel extracted from dashboard.html
-
-let _charterRawCache = ''; // stored outside DOM to survive innerHTML rewrites on tab switch
+// The Charter tab reuses the shared charter editor widget (dashboard/js/charter-editor.js),
+// which also backs the Settings Agents table. Raw content survives innerHTML rewrites
+// on tab switch via the widget's own scope-keyed state map.
 
 function closeDetail() {
   document.getElementById('detail-overlay').classList.remove('open');
@@ -201,17 +202,10 @@ function renderDetailContent(detail, tab) {
       '</div>';
     startLiveStream(currentAgentId);
   } else if (tab === 'charter') {
-    const charterContent = detail.charter || '';
-    // eslint-disable-next-line no-unsanitized/property -- reason: renderMd() escapes charter display content and escHtml() escapes textarea content before assembling HTML (see dashboard/js/utils.js)
-    el.innerHTML =
-      '<div style="display:flex;gap:6px;margin-bottom:8px">' +
-        '<button class="pr-pager-btn" id="charter-edit-btn" style="font-size:var(--text-sm);padding:2px 10px" onclick="_toggleCharterEdit()">Edit</button>' +
-        '<button class="modal-copy is-success" id="charter-save-btn" style="display:none" onclick="_saveCharter()">Save</button>' +
-        '<button class="pr-pager-btn" id="charter-cancel-btn" style="font-size:var(--text-sm);padding:2px 10px;display:none" onclick="_cancelCharterEdit()">Cancel</button>' +
-      '</div>' +
-      '<div id="charter-view" class="section">' + renderMd(charterContent || 'No charter found. Click Edit to create one.') + '</div>' +
-      '<textarea id="charter-editor" style="display:none;width:100%;min-height:300px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:Consolas,monospace;font-size:var(--text-md);resize:vertical">' + escHtml(charterContent) + '</textarea>';
-    _charterRawCache = charterContent;
+    // Shared charter widget (scope 'detail') — same render/save logic the
+    // Settings Agents table uses. Pass charter verbatim to preserve behavior.
+    // eslint-disable-next-line no-unsanitized/property -- reason: renderCharterEditor() escapes all user-controlled fields (renderMd/escHtml) before assembling HTML (see dashboard/js/charter-editor.js)
+    el.innerHTML = renderCharterEditor({ agentId: currentAgentId, content: detail.charter || '', scope: 'detail' });
   } else if (tab === 'history') {
     let html = '';
     // Recent dispatch results
@@ -240,47 +234,4 @@ function renderDetailContent(detail, tab) {
   }
 }
 
-function _toggleCharterEdit() {
-  document.getElementById('charter-view').style.display = 'none';
-  document.getElementById('charter-editor').style.display = '';
-  document.getElementById('charter-edit-btn').style.display = 'none';
-  document.getElementById('charter-save-btn').style.display = '';
-  document.getElementById('charter-cancel-btn').style.display = '';
-  document.getElementById('charter-editor').focus();
-}
-
-function _cancelCharterEdit() {
-  const el = document.getElementById('detail-content');
-  document.getElementById('charter-editor').value = _charterRawCache || '';
-  document.getElementById('charter-view').style.display = '';
-  document.getElementById('charter-editor').style.display = 'none';
-  document.getElementById('charter-edit-btn').style.display = '';
-  document.getElementById('charter-save-btn').style.display = 'none';
-  document.getElementById('charter-cancel-btn').style.display = 'none';
-}
-
-async function _saveCharter() {
-  if (!currentAgentId) { alert('No agent selected'); return; }
-  const content = document.getElementById('charter-editor').value;
-  const btn = document.getElementById('charter-save-btn');
-  btn.textContent = 'Saving...'; btn.style.pointerEvents = 'none';
-  try {
-    const res = await fetch('/api/agents/charter', {
-      method: 'POST', headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ agent: currentAgentId, content })
-    });
-    if (res.ok) {
-      // eslint-disable-next-line no-unsanitized/property -- reason: renderMd() escapes all user-controlled fields before assembling HTML (see dashboard/js/utils.js)
-      document.getElementById('charter-view').innerHTML = renderMd(content);
-      _charterRawCache = content;
-      _cancelCharterEdit();
-      showToast('cmd-toast', 'Charter saved', true);
-    } else {
-      const d = await res.json().catch(() => ({}));
-      alert('Save failed: ' + (d.error || 'unknown'));
-    }
-  } catch (e) { alert('Save failed: ' + e.message); }
-  btn.textContent = 'Save'; btn.style.pointerEvents = '';
-}
-
 window.MinionsDetail = { closeDetail, renderDetailTabs, switchTab, renderDetailContent };

package/dashboard/js/refresh.js

@@ -165,7 +165,8 @@ const RENDER_VERSIONS = {
   // renderers) can call `_changed('settings', …)` and bump on visual revamps.
   // Bumped to 2 by W-mpmwxkcn000646cc (left-rail tabbed Settings layout).
   // Bumped to 3 by W-mqk2s8q1 (Advanced → Diagnostics: relocated the diag button).
-  settings: 3,
+  // Bumped to 4 by W-mqrdavob (Agents table: per-agent charter editor column).
+  settings: 4,
 };
 const _sectionCache = {};
 const _lastValueByKey = {};

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

@@ -190,7 +190,6 @@ function wiRow(item) {
     followupChip = ' <a class="pr-badge draft" style="font-size:var(--text-xs);text-decoration:none" target="_blank" rel="noopener" href="' + escapeHtml(prFollowup.parent_pr_url) + '" title="Follow-up dispatched from ' + escapeHtml(prRef) + (prFollowup.parent_comment_author ? ' by ' + escapeHtml(prFollowup.parent_comment_author) : '') + '" 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) + '\')">' +
-    '<td><span class="pr-id">' + escapeHtml(item.id || '') + '</span></td>' +
     '<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-xs)">fan-out</span>' : '') + '</td>' +
@@ -286,7 +285,7 @@ function renderWorkItems(items, opts) {
   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>Project</th><th>Type</th><th>Priority</th><th>Status</th><th>Agent</th><th>PR</th><th>Created</th><th></th><th></th></tr></thead><tbody>';
+  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></th><th></th></tr></thead><tbody>';
   html += pageItems.map(wiRow).join('');
   html += '</tbody></table></div>';
 
@@ -1061,7 +1060,7 @@ function openWorkItemDetail(id) {
 
 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>Project</th><th>Type</th><th>Priority</th><th>Status</th><th>Agent</th><th>PR</th><th>Created</th><th></th><th></th></tr></thead><tbody>' +
+  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></th><th></th></tr></thead><tbody>' +
     allWorkItems.map(wiRow).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;

package/dashboard/js/settings.js

@@ -82,7 +82,15 @@ async function openSettings() {
         '<input value="' + escHtml(a.model || '') + '" placeholder="' + escHtml(fleetModelLabel) + ' (fleet)" disabled style="width:120px;padding:4px 6px;background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--muted);font-size:var(--text-base)">' +
       '</td>' +
       '<td><input data-agent="' + escHtml(id) + '" data-field="monthlyBudgetUsd" value="' + escHtml(a.monthlyBudgetUsd != null ? String(a.monthlyBudgetUsd) : '') + '" placeholder="unlimited" style="width:70px;padding:4px 6px;background:var(--surface);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:var(--text-base);text-align:right"></td>' +
-    '</tr>';
+      // Charter editor opens the SAME shared widget as the agent detail panel
+      // (dashboard/js/charter-editor.js); content is lazy-loaded on first open.
+      '<td style="text-align:center"><button type="button" class="pr-pager-btn" id="charter-toggle-' + escHtml(id) + '" style="font-size:var(--text-sm);padding:2px 10px" onclick="_toggleSettingsCharter(\'' + escHtml(id) + '\')">Show Charter</button></td>' +
+    '</tr>' +
+    // Hidden expander row — the shared charter widget is rendered into the cell
+    // the first time the operator opens it (see _toggleSettingsCharter).
+    '<tr id="charter-row-' + escHtml(id) + '" style="display:none"><td colspan="7" style="padding:8px 4px 16px">' +
+      '<div id="charter-cell-' + escHtml(id) + '" style="color:var(--muted)">Loading charter…</div>' +
+    '</td></tr>';
   }).join('');
 
   // ── Section bodies — every original control is grouped under one of these
@@ -91,7 +99,7 @@ async function openSettings() {
   // wrapping the 8 advanced runtime toggles was split into Copilot Tuning and
   // Claude Tuning tabs so each runtime's knobs live behind its own rail entry.
   const paneRuntime =
-    '<h3>Runtime &amp; Models</h3>' +
+    '<h3>Agents Runtime &amp; Models</h3>' +
     '<div class="settings-pane-sub">Single source of truth for which CLI runtime + model the fleet spawns. Per-agent overrides live in the Agents table below.</div>' +
     '<div id="set-runtime-section" style="border:1px solid var(--border);border-radius:6px;padding:10px 12px;margin-bottom:16px">' +
       '<div style="display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-bottom:8px">' +
@@ -152,7 +160,7 @@ async function openSettings() {
     '<h4>Agents</h4>' +
     '<div style="font-size:var(--text-sm);color:var(--muted);margin-bottom:6px">CLI / Model placeholders show the fleet default each agent will inherit. Pick a value to pin per-agent; clear to re-inherit. Per-agent monthly budget overrides the fleet ceiling.</div>' +
     '<table style="width:100%;border-collapse:collapse;margin-bottom:16px;font-size:var(--text-base)">' +
-      '<tr style="text-align:left;color:var(--muted)"><th style="padding:4px">Agent</th><th style="padding:4px">Role</th><th style="padding:4px">Skills</th><th style="padding:4px">CLI</th><th style="padding:4px">Model</th><th style="padding:4px">Budget $/mo</th></tr>' +
+      '<tr style="text-align:left;color:var(--muted)"><th style="padding:4px">Agent</th><th style="padding:4px">Role</th><th style="padding:4px">Skills</th><th style="padding:4px">CLI</th><th style="padding:4px">Model</th><th style="padding:4px">Budget $/mo</th><th style="padding:4px">Charter</th></tr>' +
       agentRows +
     '</table>';
 
@@ -447,7 +455,7 @@ async function openSettings() {
 
   const paneBudget =
     '<h3>Budget</h3>' +
-    '<div class="settings-pane-sub">Fleet-wide spend ceiling. Per-agent monthly caps live in the Agents table on the Runtime &amp; Models tab.</div>' +
+    '<div class="settings-pane-sub">Fleet-wide spend ceiling. Per-agent monthly caps live in the Agents table on the Agents Runtime &amp; Models tab.</div>' +
     '<div class="settings-grid-2">' +
       settingsField('Max budget (USD)', 'set-maxBudgetUsd', e.maxBudgetUsd != null ? String(e.maxBudgetUsd) : '', '', 'Fleet ceiling for --max-budget-usd. 0 is a valid cap (read-only / dry-run). Empty = no cap. Claude only.') +
     '</div>';
@@ -543,7 +551,7 @@ async function openSettings() {
   // adjacent to Auto-fix so operators following the legacy mental model find
   // the moved flags quickly.
   const sections = [
-    { id: 'runtime', label: 'Runtime & Models', featured: true, html: paneRuntime },
+    { id: 'runtime', label: 'Agents Runtime & Models', featured: true, html: paneRuntime },
     { id: 'autofix', label: 'Auto-fix & Review Loop', featured: true, html: paneAutoFix },
     { id: 'lifecycle', label: 'PR Lifecycle', html: paneLifecycle },
     { id: 'workflow', label: 'Workflow Defaults', html: paneWorkflow },
@@ -696,6 +704,33 @@ async function openSettings() {
   });
 }
 
+// Lazily open/close the per-agent charter editor in the Settings Agents table.
+// The charter content is NOT included in /api/settings, so the first open fetches
+// it from /api/agent/<id> and renders the shared charter widget (scope
+// 'settings-<id>') into the expander cell — the same widget the detail panel uses.
+async function _toggleSettingsCharter(agentId) {
+  const row = document.getElementById('charter-row-' + agentId);
+  const cell = document.getElementById('charter-cell-' + agentId);
+  if (!row || !cell) return;
+  const isOpen = row.style.display !== 'none';
+  if (isOpen) { row.style.display = 'none'; return; }
+  row.style.display = '';
+  if (cell.dataset.loaded) return; // already rendered — just re-expand
+  cell.textContent = 'Loading charter…';
+  try {
+    const res = await fetch('/api/agent/' + encodeURIComponent(agentId));
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    const detail = await res.json();
+    const html = renderCharterEditor({ agentId, content: detail.charter || '', scope: 'settings-' + agentId });
+    cell.textContent = '';
+    // eslint-disable-next-line no-unsanitized/method -- reason: renderCharterEditor() escapes all user-controlled fields (renderMd/escHtml) before assembling HTML (see dashboard/js/charter-editor.js)
+    cell.insertAdjacentHTML('beforeend', html);
+    cell.dataset.loaded = '1';
+  } catch (err) {
+    cell.textContent = 'Failed to load charter: ' + err.message;
+  }
+}
+
 async function initRuntimeFleetUI(engineCfg, agentsCfg) {
   const cliSelect = document.getElementById('set-defaultCli');
   const ccCliSelect = document.getElementById('set-ccCli');

package/dashboard/slim/body.html

@@ -75,6 +75,11 @@
         <div class="member-grid" id="member-grid">
           <div class="member-empty">Loading team&hellip;</div>
         </div>
+        <!-- Inline hover details bar: sweeping across the member cards reveals
+             this bar with the hovered agent's task + a live working-for
+             duration, without opening the click->modal. Populated by
+             showAgentHoverBar(); hidden until first hover/focus. -->
+        <div class="member-hover-bar" id="member-hover-bar" hidden></div>
       </div>
       <!-- System sub-section: cockpit indicator tiles. The per-minion "working"
            count now lives in the Team cards above, so that tile is removed. -->

package/dashboard/slim/js/members.js

@@ -47,6 +47,13 @@
       card.addEventListener('keydown', function(ev) {
         if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); openAgentDetail(a); }
       });
+      // Hover (and keyboard focus, for tabindex=0 parity) reveals the inline
+      // details bar under the grid without opening the click->modal. Listeners
+      // are re-attached on every renderMembers since the cards are recreated.
+      card.addEventListener('mouseenter', function() { showAgentHoverBar(a); });
+      card.addEventListener('mouseleave', _scheduleHideAgentHoverBar);
+      card.addEventListener('focus', function() { showAgentHoverBar(a); });
+      card.addEventListener('blur', _scheduleHideAgentHoverBar);
 
       var emoji = document.createElement('div');
       emoji.className = 'member-emoji';
@@ -92,6 +99,111 @@
     if (_agentDetailTimer) { clearInterval(_agentDetailTimer); _agentDetailTimer = null; }
   }
 
+  // ── Inline hover details bar (member grid) ──────────────────────────
+  // Sweeping across .member-card elements reveals an inline bar UNDER the grid
+  // showing the hovered agent's task + a live "Working for" duration — without
+  // opening the click->modal. Uses a hover-scoped ticker distinct from the
+  // modal's _agentDetailTimer so the two never fight over one interval, and is
+  // cleared on every enter/leave/swap so no interval leaks when sweeping
+  // quickly across many cards.
+  var _agentHoverTimer = null;
+
+  function _tickAgentHoverRuntime() {
+    var el = document.getElementById('slim-agent-hover-tick');
+    if (!el) { _stopAgentHoverRuntime(); return; }
+    el.textContent = _fmtAgentElapsed(Date.now() - new Date(el.dataset.started).getTime());
+  }
+
+  function _stopAgentHoverRuntime() {
+    if (_agentHoverTimer) { clearInterval(_agentHoverTimer); _agentHoverTimer = null; }
+  }
+
+  // Dismiss-grace delay: the hover bar is hidden 0.5s after the pointer leaves
+  // (or focus blurs) rather than instantly, so brushing past a card or hopping
+  // between agents doesn't make the bottom status flicker. Re-entering any card
+  // cancels the pending hide (showAgentHoverBar → _cancelPendingHoverHide).
+  var AGENT_HOVER_DISMISS_MS = 500;
+  var _agentHoverHideTimer = null;
+
+  function _cancelPendingHoverHide() {
+    if (_agentHoverHideTimer) { clearTimeout(_agentHoverHideTimer); _agentHoverHideTimer = null; }
+  }
+
+  function _scheduleHideAgentHoverBar() {
+    _cancelPendingHoverHide();
+    _agentHoverHideTimer = setTimeout(function() {
+      _agentHoverHideTimer = null;
+      hideAgentHoverBar();
+    }, AGENT_HOVER_DISMISS_MS);
+  }
+
+  // Populate + reveal the hover bar for the given agent object (passed straight
+  // from the hovered/focused card). Always clears any prior hover ticker first
+  // so swapping between cards can never leak a second interval.
+  function showAgentHoverBar(a) {
+    var bar = document.getElementById('member-hover-bar');
+    if (!a || !bar) return;
+    _cancelPendingHoverHide();
+    _stopAgentHoverRuntime();
+    bar.textContent = '';
+
+    var name = document.createElement('span');
+    name.className = 'member-hover-name';
+    name.textContent = a.name || a.id;
+    bar.appendChild(name);
+
+    // Reuse the colored member-status chip rather than re-deriving status copy.
+    bar.appendChild(createStatusChip(a.status));
+
+    var runtime = [a.runtime, a.model].filter(Boolean).join(' · ');
+    if (runtime) {
+      var rt = document.createElement('span');
+      rt.className = 'member-hover-runtime';
+      rt.textContent = runtime;
+      bar.appendChild(rt);
+    }
+
+    // Only running agents with a start timestamp get the live elapsed segment.
+    // Rendered right after the runtime/model so the model name sits next to
+    // "Working for"; the work item then takes its own full-width row below.
+    if (a.status === 'working' && a.started_at) {
+      var work = document.createElement('span');
+      work.className = 'member-hover-working';
+      var label = document.createElement('span');
+      label.className = 'member-hover-working-label';
+      label.textContent = 'Working for ';
+      var tick = document.createElement('span');
+      tick.id = 'slim-agent-hover-tick';
+      tick.dataset.started = a.started_at;
+      work.appendChild(label);
+      work.appendChild(tick);
+      bar.appendChild(work);
+      _tickAgentHoverRuntime();
+      _agentHoverTimer = setInterval(_tickAgentHoverRuntime, 1000);
+    }
+
+    // Work item (current task) appended last so it wraps onto its own
+    // full-width row beneath the name/status/model/working-for metadata.
+    var task = a.currentTask || a.lastAction || '';
+    var taskEl = document.createElement('span');
+    taskEl.className = 'member-hover-task' + (task ? '' : ' muted');
+    taskEl.textContent = task || 'Idle — nothing in flight';
+    bar.appendChild(taskEl);
+
+    bar.classList.add('open');
+    bar.removeAttribute('hidden');
+  }
+
+  // Hide the hover bar and clear its ticker (no leaked intervals on leave/blur).
+  function hideAgentHoverBar() {
+    _cancelPendingHoverHide();
+    _stopAgentHoverRuntime();
+    var bar = document.getElementById('member-hover-bar');
+    if (!bar) return;
+    bar.classList.remove('open');
+    bar.setAttribute('hidden', '');
+  }
+
   // Append a labelled key/value row to the agent detail modal body.
   function appendAgentRow(body, key, value, muted) {
     var row = document.createElement('div');

package/dashboard/slim/js/projects.js

@@ -1,9 +1,8 @@
   // Project context picker: populated from /api/status (which already returns
-  // the configured project list). One-or-more projects: a <select> dropdown
-  // whose first option is a "Select project" sentinel (value ""), italicized
-  // via CSS, so the indicator reads "Select project" until the user explicitly
-  // picks one and can always be cleared back to it. Zero-project: a hint to
-  // add one. No auto-default: we never silently fall back to projects[0] /
+  // the configured project list). One-or-more projects: a row of selectable pill
+  // buttons, single-select, none active until the user explicitly picks one and
+  // can always be toggled back off to a "Select project" state. Zero-project: a
+  // hint to add one. No auto-default: we never silently fall back to projects[0] /
   // last-used / constellation, so project-scoped CC actions can't land in the
   // wrong project (W-mqayzsj3). Selection persists per-browser in localStorage
   // and is included in every /api/command-center/stream call.
@@ -26,29 +25,33 @@
     empty.textContent = 'No projects linked yet.';
     return empty;
   }
-  // Strip variant: project <select>. The first option is a "Select project"
-  // sentinel (value "") that is selected whenever no project is explicitly
-  // chosen, so the indicator never auto-defaults and the user can always clear
-  // their choice back to it. Returns the select so the caller can attach a
-  // change listener.
-  function makeContextSelect(projects, selected, displayByName) {
-    var sel = document.createElement('select');
-    sel.id = 'chat-context-select';
-    sel.setAttribute('aria-label', 'Working in project');
-    var placeholder = document.createElement('option');
-    placeholder.value = '';
-    placeholder.textContent = 'Select project';
-    if (!selected) placeholder.selected = true;
-    sel.appendChild(placeholder);
+  // Strip variant: project pills. One selectable pill per project, single-select.
+  // No auto-default: when nothing is explicitly chosen, no pill is active and the
+  // indicator stays in the "Select project" state, so the picker never silently
+  // falls back to projects[0] (W-mqayzsj3) and the user can always toggle their
+  // choice back off. Returns a container of pill buttons built as real DOM nodes
+  // (no innerHTML — SEC-03 ratchet, see test/unit.test.js DYNAMIC_INNERHTML_BASELINE);
+  // the caller attaches a click listener via event delegation.
+  function makeContextPills(projects, selected, displayByName) {
+    var group = document.createElement('span');
+    group.id = 'chat-context-pills';
+    group.className = 'context-pills';
+    group.setAttribute('role', 'radiogroup');
+    group.setAttribute('aria-label', 'Working in project');
     for (var i = 0; i < projects.length; i++) {
       var p = projects[i];
-      var opt = document.createElement('option');
-      opt.value = p;
-      opt.textContent = (displayByName && displayByName[p]) || p;
-      if (p === selected) opt.selected = true;
-      sel.appendChild(opt);
+      var pill = document.createElement('button');
+      pill.type = 'button';
+      pill.className = 'context-pill';
+      pill.dataset.project = p;
+      pill.textContent = (displayByName && displayByName[p]) || p;
+      pill.setAttribute('role', 'radio');
+      var isActive = p === selected;
+      pill.classList.toggle('active', isActive);
+      pill.setAttribute('aria-checked', isActive ? 'true' : 'false');
+      group.appendChild(pill);
     }
-    return sel;
+    return group;
   }
   async function loadProjectsAndRenderContext(opts) {
     var stripEl = document.getElementById('chat-context-strip');
@@ -77,23 +80,33 @@
           try { localStorage.removeItem(SLIM_PROJECT_KEY); } catch (_e) {}
         }
         // No auto-default: when nothing is explicitly selected, currentProject
-        // stays null and the picker shows the "Select project" sentinel
-        // (italicized via CSS). We deliberately do NOT fall back to projects[0]
-        // here (W-mqayzsj3) so CC turns and project-scoped actions don't
-        // silently target the wrong project.
-        var sel = makeContextSelect(projects, currentProject, displayByName);
+        // stays null and no pill is active (the "Select project" state). We
+        // deliberately do NOT fall back to projects[0] here (W-mqayzsj3) so CC
+        // turns and project-scoped actions don't silently target the wrong
+        // project.
+        var pills = makeContextPills(projects, currentProject, displayByName);
         stripEl.style.display = '';
-        controlsEl.replaceChildren(sel, makeContextAddBtn());
-        sel.addEventListener('change', function(ev) {
-          var val = ev.target.value || '';
-          if (val) {
+        controlsEl.replaceChildren(pills, makeContextAddBtn());
+        pills.addEventListener('click', function(ev) {
+          var pill = ev.target.closest('.context-pill');
+          if (!pill || !pills.contains(pill)) return;
+          var val = pill.dataset.project || '';
+          if (val && val !== currentProject) {
+            // Select this project.
             currentProject = val;
             try { localStorage.setItem(SLIM_PROJECT_KEY, currentProject); } catch (_e) {}
           } else {
-            // User cleared back to "Select project" — drop the persisted choice.
+            // Re-clicking the active pill toggles back to "Select project" —
+            // drop the persisted choice so nothing is selected.
             currentProject = null;
             try { localStorage.removeItem(SLIM_PROJECT_KEY); } catch (_e) {}
           }
+          var nodes = pills.querySelectorAll('.context-pill');
+          for (var j = 0; j < nodes.length; j++) {
+            var active = nodes[j].dataset.project === currentProject;
+            nodes[j].classList.toggle('active', active);
+            nodes[j].setAttribute('aria-checked', active ? 'true' : 'false');
+          }
         });
       }
       var addBtn = document.getElementById('chat-context-add');

package/dashboard/slim/styles.css

@@ -496,27 +496,54 @@
       font-weight: 700;
       font-size: var(--text-base);
     }
-    .chat-context-strip select {
+    /* Pills + "+ Add" lay out in a single row next to the "Working in" label
+       (W-mqsdptzy / PR #366). #chat-context-controls is a plain <span>, so
+       without an explicit flex the display:flex .context-pills (a block-level
+       flex container) pushed the "+ Add" sibling onto its own line below. */
+    .chat-context-strip #chat-context-controls {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      flex-wrap: wrap;
+      min-width: 0;
+    }
+    .chat-context-strip .context-pills {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      flex-wrap: wrap;
+    }
+    /* Project pills: outlined by default, filled/highlighted when active.
+       Single-select — exactly one (or zero) carries .active at a time. */
+    .chat-context-strip .context-pill {
       background: var(--bg);
       color: var(--text);
       border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 4px 8px;
+      border-radius: 999px;
+      padding: 4px 12px;
       font-family: inherit;
       font-size: var(--text-base);
+      line-height: 1;
       cursor: pointer;
+      transition: background 0.12s, border-color 0.12s, color 0.12s;
+    }
+    .chat-context-strip .context-pill:hover {
+      border-color: var(--blue);
+      background: var(--surface2);
+    }
+    .chat-context-strip .context-pill:focus-visible {
+      outline: none;
+      border-color: var(--blue);
+    }
+    .chat-context-strip .context-pill.active {
+      background: var(--blue);
+      border-color: var(--blue);
+      color: #fff;
+      font-weight: 600;
+    }
+    .chat-context-strip .context-pill.active:hover {
+      background: var(--blue);
     }
-    .chat-context-strip select:focus { outline: none; border-color: var(--blue); }
-    /* Italicize the "Select project" placeholder option AND the closed select
-       widget while the placeholder is the active value. `:has()` is needed
-       because native <select> rendering ignores child <option> styles for the
-       displayed (closed) text — we have to style the <select> itself. The
-       explicit `option { font-style: normal }` reset stops real project names
-       from inheriting the parent select's italic when the dropdown is opened
-       while the placeholder is still selected. */
-    .chat-context-strip select option { font-style: normal; color: var(--text); }
-    .chat-context-strip select option[value=""] { font-style: italic; color: var(--muted); }
-    .chat-context-strip select:has(option[value=""]:checked) { font-style: italic; color: var(--muted); }
     .chat-context-strip .context-static {
       color: var(--text);
       font-weight: 500;
@@ -1204,6 +1231,37 @@
       50% { opacity: 0.55; }
     }
 
+    /* Inline hover/focus details bar under the member grid. Sweeping across the
+       cards reveals the hovered agent's task + live working-for duration
+       without opening the click->modal; harmonizes with the .member-card and
+       .agent-detail-* surfaces. */
+    .member-hover-bar {
+      margin-top: 8px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 10px;
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      font-size: var(--text-md);
+    }
+    .member-hover-bar[hidden] { display: none; }
+    .member-hover-name { font-weight: 600; color: var(--text); }
+    .member-hover-task {
+      flex: 1 1 100%;
+      min-width: 0;
+      color: var(--text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .member-hover-task.muted { color: var(--muted); font-style: italic; }
+    .member-hover-runtime { font-size: var(--text-base); color: var(--muted); }
+    .member-hover-working { white-space: nowrap; color: var(--amber); font-weight: 600; }
+    .member-hover-working-label { color: var(--muted); font-weight: 400; }
+
     /* Agent detail modal body */
     .agent-detail-head {
       display: flex;

package/dashboard-build.js

@@ -44,7 +44,7 @@ function buildDashboardHtml() {
   }
 
   const jsFiles = [
-    'utils', 'state', 'features-client', 'render-utils', 'detail-panel', 'live-stream',
+    'utils', 'state', 'features-client', 'render-utils', 'charter-editor', 'detail-panel', 'live-stream',
     'render-agents', 'render-dispatch', 'render-work-items', 'render-prd',
     'render-prs', 'render-plans', 'render-inbox', 'render-kb', 'render-skills',
     'render-other', 'render-managed', 'memory-panel', 'render-schedules', 'render-watches', 'render-pipelines', 'render-meetings', 'render-pinned',

package/dashboard.js

@@ -1798,7 +1798,7 @@ function buildDashboardHtml() {
 
   // Assemble JS modules (order matters: utils → state → renderers → commands → refresh)
   const jsFiles = [
-    'utils', 'state', 'features-client', 'render-utils', 'detail-panel', 'live-stream',
+    'utils', 'state', 'features-client', 'render-utils', 'charter-editor', 'detail-panel', 'live-stream',
     'render-agents', 'render-dispatch', 'render-work-items', 'render-prd',
     'render-prs', 'render-plans', 'render-inbox', 'render-kb', 'render-skills',
     'render-other', 'render-managed', 'render-schedules', 'render-watches', 'render-pipelines', 'render-meetings', 'render-pinned',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yemi33/minions",
-  "version": "0.1.2255",
+  "version": "0.1.2257",
   "description": "Multi-agent AI dev team that runs from ~/.minions/ — five autonomous agents share a single engine, dashboard, and knowledge base",
   "bin": {
     "minions": "bin/minions.js"