@yemi33/minions 0.1.2060 → 0.1.2061

package/dashboard/js/render-agents.js

@@ -69,24 +69,18 @@ function renderAgents(agents) {
   `).join('');
 }
 
-async function openAgentDetail(id) {
-  const agent = agentData.find(a => a.id === id);
-  if (!agent) return;
-  currentAgentId = id;
-  currentTab = (agent.status === 'working') ? 'live' : 'thought-process';
-
-  // SEC-03 Phase A: Build the detail header via DOM + textContent instead of innerHTML.
-  // Emoji, name and role are all user-controlled fields; routing them through textContent
-  // guarantees no HTML interpretation even if the escape function were ever bypassed.
+// Re-render the detail-panel header (name + emoji + runtime/model chips +
+// status badge + lastAction + blocking-tool / resultSummary blocks) from a
+// slim agentData record. Extracted so renderAgents can call it every poll
+// tick to keep an open detail panel live without re-fetching the expensive
+// /api/agent/<id> charter/history/output payload. SEC-03 Phase A rules
+// still apply: emoji/name/role go through textContent.
+function _renderAgentDetailHeader(agent) {
   const nameEl = document.getElementById('detail-agent-name');
+  if (!nameEl) return;
   const emojiSpan = document.createElement('span');
   emojiSpan.style.fontSize = '22px';
   emojiSpan.textContent = agent.emoji || '';
-  // Runtime tag \u2014 uses the inline-SVG logo from the same RUNTIME_TAGS map the
-  // card uses, so the visual is consistent. The container's user-controlled
-  // text fields stay on the textContent path; the SVG is a hardcoded literal
-  // from RUNTIME_TAGS keyed by the runtime string (server-controlled, finite
-  // set), so injecting via innerHTML on the icon-only span is safe.
   const runtimeMeta = RUNTIME_TAGS[agent.runtime];
   const runtimeSpan = document.createElement('span');
   runtimeSpan.title = 'Runtime: ' + (runtimeMeta?.label || agent.runtime || 'unknown');
@@ -100,9 +94,6 @@ async function openAgentDetail(id) {
     runtimeSpan.style.cssText += ';font-size:10px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:2px 6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted)';
     runtimeSpan.textContent = agent.runtime || 'unknown';
   }
-  // W-mpmwxk4y00053271 — mirror the model chip the card shows so the detail
-  // header stays in sync. textContent path keeps the model string from being
-  // interpreted as HTML.
   const modelSpan = (agent.model && typeof agent.model === 'string')
     ? (() => {
         const s = document.createElement('span');
@@ -121,12 +112,27 @@ async function openAgentDetail(id) {
   nameEl.replaceChildren(...children);
 
   const badgeClass = agent.status;
-  // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; status is an internal bounded enum and all user data is wrapped in escapeHtml()/renderMd() (fields: lastAction, blocking tool, resultSummary)
-  document.getElementById('detail-status-line').innerHTML =
-    '<span class="status-badge ' + badgeClass + '">' + agent.status.toUpperCase() + '</span> ' +
-    '<span style="color:var(--muted)">' + escapeHtml(agent.lastAction) + '</span>' +
-    (agent._blockingToolCall ? '<div style="margin-top:4px;padding:4px 8px;background:rgba(130,160,210,0.13);border:1px solid rgba(130,160,210,0.3);border-radius:4px;font-size:11px;color:var(--muted)">&#x23F3; Blocking tool call (' + escapeHtml(agent._blockingToolCall.tool) + ') &mdash; silent ' + Math.round(agent._blockingToolCall.silentMs/60000) + 'min, timeout in ' + Math.round(agent._blockingToolCall.remainingMs/60000) + 'min</div>' : '') +
-    (agent.resultSummary ? '<div style="margin-top:4px;font-size:11px;color:var(--text);line-height:1.4">' + renderMd(agent.resultSummary.slice(0, 300)) + '</div>' : '');
+  const statusEl = document.getElementById('detail-status-line');
+  if (statusEl) {
+    // eslint-disable-next-line no-unsanitized/property -- reason: structural HTML is a string literal; status is an internal bounded enum and all user data is wrapped in escapeHtml()/renderMd() (fields: lastAction, blocking tool, resultSummary)
+    statusEl.innerHTML =
+      '<span class="status-badge ' + badgeClass + '">' + agent.status.toUpperCase() + '</span> ' +
+      '<span style="color:var(--muted)">' + escapeHtml(agent.lastAction) + '</span>' +
+      (agent._blockingToolCall ? '<div style="margin-top:4px;padding:4px 8px;background:rgba(130,160,210,0.13);border:1px solid rgba(130,160,210,0.3);border-radius:4px;font-size:11px;color:var(--muted)">&#x23F3; Blocking tool call (' + escapeHtml(agent._blockingToolCall.tool) + ') &mdash; silent ' + Math.round(agent._blockingToolCall.silentMs/60000) + 'min, timeout in ' + Math.round(agent._blockingToolCall.remainingMs/60000) + 'min</div>' : '') +
+      (agent.resultSummary ? '<div style="margin-top:4px;font-size:11px;color:var(--text);line-height:1.4">' + renderMd(agent.resultSummary.slice(0, 300)) + '</div>' : '');
+  }
+}
+
+async function openAgentDetail(id) {
+  const agent = agentData.find(a => a.id === id);
+  if (!agent) return;
+  currentAgentId = id;
+  currentTab = (agent.status === 'working') ? 'live' : 'thought-process';
+
+  // SEC-03 Phase A: Build the detail header via DOM + textContent instead of innerHTML.
+  // Emoji, name and role are all user-controlled fields; routing them through textContent
+  // guarantees no HTML interpretation even if the escape function were ever bypassed.
+  _renderAgentDetailHeader(agent);
 
   // Show panel immediately with loading state — don't wait for API
   document.getElementById('detail-content').innerHTML = '<div style="padding:24px;text-align:center;color:var(--muted)">Loading...</div>';
@@ -161,7 +167,12 @@ function _tickAgentRuntimes() {
     el.textContent = 'Running: ' + (hr > 0 ? hr + 'h ' : '') + min + 'm ' + sec + 's';
   });
 }
-// Start ticker after each render if working agents exist
+// Start ticker after each render if working agents exist, and refresh the
+// open agent-detail panel header so status / lastAction / blocking-tool /
+// resultSummary track the latest /api/status slice without re-fetching the
+// expensive /api/agent/<id> charter/history/output payload. The body tabs
+// (thought-process, live, output, etc.) are loaded once on open via
+// openAgentDetail's safeFetch — they stay as-is until the user reopens.
 var _origRenderAgents = renderAgents;
 renderAgents = function(agents) {
   _origRenderAgents(agents);
@@ -170,6 +181,10 @@ renderAgents = function(agents) {
     _tickAgentRuntimes();
     _agentRuntimeTimer = setInterval(_tickAgentRuntimes, 1000);
   }
+  if (currentAgentId) {
+    var open = agents.find(function(a) { return a.id === currentAgentId; });
+    if (open) _renderAgentDetailHeader(open);
+  }
 };
 
 window.MinionsAgents = { renderAgents, openAgentDetail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yemi33/minions",
-  "version": "0.1.2060",
+  "version": "0.1.2061",
   "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"