@yemi33/minions 0.1.1591 → 0.1.1593

package/CHANGELOG.md

@@ -1,10 +1,18 @@
 # Changelog
 
-## 0.1.1591 (2026-04-28)
+## 0.1.1593 (2026-04-28)
+
+### Features
+- replace runtime text tag with inline SVG logos
+
+## 0.1.1592 (2026-04-28)
 
 ### Features
 - show runtime tag (Claude/Copilot/...) next to agent name
 
+### Other
+- Pretty-print Copilot live output
+
 ## 0.1.1590 (2026-04-28)
 
 ### Features

package/dashboard/js/live-stream.js

@@ -6,6 +6,11 @@ let _steerInFlight = false;
 let _lastRenderedText = '';
 let _runtimeTimer = null;
 
+function _currentAgentRuntime() {
+  var agent = (agentData || []).find(function(a) { return a.id === currentAgentId; });
+  return agent && agent.runtime ? agent.runtime : '';
+}
+
 function _updateRuntimeCounter() {
   var el = document.getElementById('live-runtime');
   if (!el) return;
@@ -75,8 +80,9 @@ async function refreshLiveOutput() {
     const el = document.getElementById('live-messages');
     if (el) {
       const wasAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 150;
+      const incrementalSafe = _currentAgentRuntime() !== 'copilot';
       // Incremental render: only parse new content if text is an extension of previous
-      if (_lastRenderedText && text.length > _lastRenderedText.length && text.startsWith(_lastRenderedText.slice(0, 200))) {
+      if (incrementalSafe && _lastRenderedText && text.length > _lastRenderedText.length && text.startsWith(_lastRenderedText.slice(0, 200))) {
         renderLiveChatMessage(text.slice(_lastRenderedText.length));
       } else {
         el.innerHTML = '';

package/dashboard/js/render-agents.js

@@ -1,14 +1,31 @@
 // dashboard/js/render-agents.js — Agent grid rendering extracted from dashboard.html
 
-// Per-runtime display labels and accent colors. Add a new entry here when a
-// new runtime is registered in engine/runtimes/index.js.
+// Per-runtime inline SVG logo + accent color. Each entry must define `label`
+// (used as title/tooltip + accessibility fallback) and `svg` (full inline
+// markup, currentColor-themed). Add a new entry here when a new runtime is
+// registered in engine/runtimes/index.js.
 const RUNTIME_TAGS = {
-  claude:  { label: 'Claude',  color: 'var(--blue)' },
-  copilot: { label: 'Copilot', color: 'var(--purple)' },
+  // Anthropic Claude — 8-pointed orange asterisk/burst
+  claude: {
+    label: 'Claude',
+    color: '#cc785c',
+    svg: '<svg viewBox="-12 -12 24 24" width="13" height="13" aria-hidden="true" focusable="false" style="display:inline-block;vertical-align:-2px"><g fill="currentColor"><path d="M-1.6 -10 L1.6 -10 L1 -1 L10 -1.6 L10 1.6 L1 1 L1.6 10 L-1.6 10 L-1 1 L-10 1.6 L-10 -1.6 L-1 -1 Z"/><path d="M-1.6 -10 L1.6 -10 L1 -1 L10 -1.6 L10 1.6 L1 1 L1.6 10 L-1.6 10 L-1 1 L-10 1.6 L-10 -1.6 L-1 -1 Z" transform="rotate(45)"/></g></svg>',
+  },
+  // GitHub Copilot — rounded "pilot" face from the official Octicons set
+  copilot: {
+    label: 'Copilot',
+    color: '#8957e5',
+    svg: '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" focusable="false" style="display:inline-block;vertical-align:-2px;fill:currentColor"><path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.71.354-2.434.13-.418.305-.808.516-1.142.218-.345.516-.648.886-.804.397-.167.832-.156 1.236-.014.404.142.858.396 1.342.762.227.171.487.367.733.557l.083.064c.16.124.305.236.434.337.265-.077.566-.142.879-.198a.877.877 0 0 1 .093-.013l.045-.005c.135-.018.273-.029.41-.034.137.005.275.016.41.034l.045.005a.877.877 0 0 1 .093.013c.313.056.614.121.879.198.129-.101.274-.213.434-.337l.083-.064c.246-.19.506-.386.733-.557.484-.366.938-.62 1.342-.762.404-.142.839-.153 1.236.014.37.156.668.459.886.804.21.334.385.724.516 1.142.226.724.354 1.564.354 2.434 0 .572-.053 1.148-.254 1.656.066.228.097.429.126.612.012.075.023.148.036.218.911.379 1.503 1.437 1.588 2.065v1.948c-.125.835-3.436 3.749-7.998 3.749ZM5.485 12.343a4.07 4.07 0 0 0 1.014-.214 1 1 0 0 1 .622-.001c.14.045.31.097.502.143.456.111.99.196 1.379.196.39 0 .923-.085 1.379-.196.192-.046.362-.098.502-.143a1 1 0 0 1 .622.001c.31.105.65.184 1.014.214.348.029.674-.027.927-.114a.535.535 0 0 0 .362-.51v-1.61a4.474 4.474 0 0 0-1.5-.339c-.456 0-.923.085-1.379.196-.192.046-.362.098-.502.143a1 1 0 0 1-.622-.001 11.91 11.91 0 0 1-1.014-.214 4.07 4.07 0 0 0-1.014.214 1 1 0 0 1-.622.001 13.92 13.92 0 0 0-.502-.143A6.474 6.474 0 0 0 4.5 9.769a4.474 4.474 0 0 0-1.5.339v1.611a.535.535 0 0 0 .362.51 1.95 1.95 0 0 0 .927.113Z"/></svg>',
+  },
 };
 function _runtimeTagHtml(runtime) {
-  const meta = RUNTIME_TAGS[runtime] || { label: runtime || 'unknown', color: 'var(--muted)' };
-  return '<span class="agent-runtime-tag" title="Runtime: ' + escapeHtml(runtime || 'unknown') + '" style="font-size:9px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:1px 5px;margin-left:6px;border:1px solid ' + meta.color + ';border-radius:3px;color:' + meta.color + ';background:transparent">' + escapeHtml(meta.label) + '</span>';
+  const meta = RUNTIME_TAGS[runtime];
+  if (meta && meta.svg) {
+    return '<span class="agent-runtime-tag" title="Runtime: ' + escapeHtml(meta.label) + '" style="display:inline-block;margin-left:6px;color:' + meta.color + '" aria-label="' + escapeHtml(meta.label) + ' runtime">' + meta.svg + '</span>';
+  }
+  // Unknown runtime — fall back to a small text pill so the user still sees something
+  const fallback = runtime || 'unknown';
+  return '<span class="agent-runtime-tag" title="Runtime: ' + escapeHtml(fallback) + '" style="font-size:9px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:1px 5px;margin-left:6px;border:1px solid var(--muted);border-radius:3px;color:var(--muted);background:transparent">' + escapeHtml(fallback) + '</span>';
 }
 
 function renderAgents(agents) {
@@ -49,13 +66,23 @@ async function openAgentDetail(id) {
   const emojiSpan = document.createElement('span');
   emojiSpan.style.fontSize = '22px';
   emojiSpan.textContent = agent.emoji || '';
-  // Runtime tag rendered as a separate span so the textContent path keeps its
-  // SEC-03-Phase-A safety for the user-controlled name/role fields.
-  const runtimeMeta = RUNTIME_TAGS[agent.runtime] || { label: agent.runtime || 'unknown', color: 'var(--muted)' };
+  // 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.style.cssText = 'font-size:10px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;padding:2px 6px;margin-left:10px;border:1px solid ' + runtimeMeta.color + ';border-radius:3px;color:' + runtimeMeta.color;
-  runtimeSpan.title = 'Runtime: ' + (agent.runtime || 'unknown');
-  runtimeSpan.textContent = runtimeMeta.label;
+  runtimeSpan.title = 'Runtime: ' + (runtimeMeta?.label || agent.runtime || 'unknown');
+  runtimeSpan.style.cssText = 'display:inline-block;margin-left:10px';
+  if (runtimeMeta && runtimeMeta.svg) {
+    runtimeSpan.style.color = runtimeMeta.color;
+    runtimeSpan.innerHTML = runtimeMeta.svg.replace('width="13"', 'width="18"').replace('height="13"', 'height="18"');
+    runtimeSpan.setAttribute('aria-label', runtimeMeta.label + ' runtime');
+  } else {
+    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';
+  }
   nameEl.replaceChildren(
     emojiSpan,
     document.createTextNode(' ' + (agent.name || '') + ' \u2014 ' + (agent.role || '')),

package/dashboard/js/render-utils.js

@@ -54,8 +54,39 @@ function formatToolSummary(name, input) {
  * @param {object} obj - Parsed JSON object from agent JSONL output
  * @returns {string} HTML fragment
  */
-function _renderJsonObj(obj) {
+function _renderJsonObj(obj, state) {
+  state = state || {};
   var parts = [];
+  if (!(state.copilotToolKeys instanceof Set)) state.copilotToolKeys = new Set();
+  if (typeof state.copilotDeltaBuffer !== 'string') state.copilotDeltaBuffer = '';
+  if (typeof state.copilotReasoningPending !== 'boolean') state.copilotReasoningPending = false;
+
+  function assistantBubbleHtml(text) {
+    return '<div style="display:flex;align-items:baseline;gap:6px;margin:4px 0">' +
+      '<span style="color:var(--muted);font-size:10px;flex-shrink:0">&#9679;</span>' +
+      '<div style="background:var(--surface2);padding:8px 12px;border-radius:12px 12px 12px 2px;max-width:90%;font-size:12px;word-break:break-word">' + renderMd(text) + '</div>' +
+      '</div>';
+  }
+  function toolUseHtml(name, input) {
+    var summary = formatToolSummary(name || 'tool', input || {});
+    var rawJson = escHtml(JSON.stringify(input || {}, null, 2).slice(0, 500));
+    return '<div style="display:flex;align-items:center;gap:4px;margin:2px 0;font-size:10px;color:var(--muted);font-family:monospace">' +
+        '<span style="flex-shrink:0">&#9679;</span>' +
+        '<span>' + summary + '</span>' +
+        '<span style="cursor:pointer;opacity:0.6;margin-left:4px" onclick="var t=this.parentElement.nextElementSibling;t.style.display=t.style.display===\'none\'?\'block\':\'none\';this.textContent=t.style.display===\'none\'?\'[+]\':\'[-]\'">[+]</span>' +
+      '</div>' +
+      '<div style="display:none;background:var(--bg);padding:4px 8px;border-radius:4px;margin:0 0 4px 16px;font-size:10px;font-family:monospace;white-space:pre-wrap;max-height:200px;overflow-y:auto;color:var(--muted)">' + rawJson + '</div>';
+  }
+  function toolResultHtml(text) {
+    if (!text || text.length <= 10) return '';
+    var truncated = text.length > 3000;
+    var displayText = truncated ? text.slice(0, 3000) + '...' : text;
+    return '<div style="background:var(--surface);border-left:2px solid var(--border);padding:2px 8px;margin:0 0 2px 16px;font-size:9px;font-family:monospace;color:var(--muted);max-height:160px;overflow-y:auto;white-space:pre-wrap;cursor:pointer" onclick="this.style.maxHeight=this.style.maxHeight===\'160px\'?\'none\':\'160px\'">' + escHtml(displayText) + '</div>';
+  }
+  function toolKey(name, input) {
+    try { return String(name || 'tool') + '|' + JSON.stringify(input || {}); }
+    catch { return String(name || 'tool'); }
+  }
 
   if (obj.type === 'assistant' && obj.message && obj.message.content) {
     var content = obj.message.content;
@@ -65,22 +96,10 @@ function _renderJsonObj(obj) {
         parts.push('<div style="font-size:10px;color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
       }
       if (block.type === 'text' && block.text) {
-        parts.push('<div style="display:flex;align-items:baseline;gap:6px;margin:4px 0">' +
-          '<span style="color:var(--muted);font-size:10px;flex-shrink:0">&#9679;</span>' +
-          '<div style="background:var(--surface2);padding:8px 12px;border-radius:12px 12px 12px 2px;max-width:90%;font-size:12px;word-break:break-word">' + renderMd(block.text) + '</div>' +
-          '</div>');
+        parts.push(assistantBubbleHtml(block.text));
       }
       if (block.type === 'tool_use') {
-        var summary = formatToolSummary(block.name || 'tool', block.input || {});
-        var rawJson = escHtml(JSON.stringify(block.input || {}, null, 2).slice(0, 500));
-        parts.push(
-          '<div style="display:flex;align-items:center;gap:4px;margin:2px 0;font-size:10px;color:var(--muted);font-family:monospace">' +
-            '<span style="flex-shrink:0">&#9679;</span>' +
-            '<span>' + summary + '</span>' +
-            '<span style="cursor:pointer;opacity:0.6;margin-left:4px" onclick="var t=this.parentElement.nextElementSibling;t.style.display=t.style.display===\'none\'?\'block\':\'none\';this.textContent=t.style.display===\'none\'?\'[+]\':\'[-]\'">[+]</span>' +
-          '</div>' +
-          '<div style="display:none;background:var(--bg);padding:4px 8px;border-radius:4px;margin:0 0 4px 16px;font-size:10px;font-family:monospace;white-space:pre-wrap;max-height:200px;overflow-y:auto;color:var(--muted)">' + rawJson + '</div>'
-        );
+        parts.push(toolUseHtml(block.name, block.input));
       }
     }
   }
@@ -88,11 +107,57 @@ function _renderJsonObj(obj) {
   if (obj.type === 'tool_result' || (obj.type === 'user' && obj.message && obj.message.content && obj.message.content[0] && obj.message.content[0].type === 'tool_result')) {
     var tc = (obj.message && obj.message.content && obj.message.content[0] && obj.message.content[0].content) || obj.content || '';
     var text = typeof tc === 'string' ? tc : JSON.stringify(tc);
-    if (text.length > 10) {
-      var truncated = text.length > 3000;
-      var displayText = truncated ? text.slice(0, 3000) + '...' : text;
-      parts.push('<div style="background:var(--surface);border-left:2px solid var(--border);padding:2px 8px;margin:0 0 2px 16px;font-size:9px;font-family:monospace;color:var(--muted);max-height:160px;overflow-y:auto;white-space:pre-wrap;cursor:pointer" onclick="this.style.maxHeight=this.style.maxHeight===\'160px\'?\'none\':\'160px\'">' + escHtml(displayText) + '</div>');
+    parts.push(toolResultHtml(text));
+  }
+
+  if (obj.type === 'assistant.reasoning' || obj.type === 'assistant.reasoning_delta') {
+    state.copilotReasoningPending = true;
+  }
+
+  if (obj.type === 'assistant.message_delta' && typeof obj.data?.deltaContent === 'string') {
+    if (state.copilotReasoningPending) {
+      parts.push('<div style="font-size:10px;color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
+      state.copilotReasoningPending = false;
     }
+    state.copilotDeltaBuffer += obj.data.deltaContent;
+  }
+
+  if (obj.type === 'assistant.message') {
+    if (state.copilotReasoningPending) {
+      parts.push('<div style="font-size:10px;color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
+      state.copilotReasoningPending = false;
+    }
+    state.copilotDeltaBuffer = '';
+    if (typeof obj.data?.content === 'string' && obj.data.content) {
+      parts.push(assistantBubbleHtml(obj.data.content));
+    }
+    var toolRequests = Array.isArray(obj.data?.toolRequests) ? obj.data.toolRequests : [];
+    for (var trIdx = 0; trIdx < toolRequests.length; trIdx++) {
+      var tr = toolRequests[trIdx];
+      if (!tr || !tr.name) continue;
+      var trInput = tr.arguments || {};
+      var trKey = toolKey(tr.name, trInput);
+      if (state.copilotToolKeys.has(trKey)) continue;
+      state.copilotToolKeys.add(trKey);
+      parts.push(toolUseHtml(tr.name, trInput));
+    }
+  }
+
+  if (obj.type === 'tool.execution_start' && obj.data?.toolName) {
+    var startInput = obj.data.arguments || {};
+    var startKey = toolKey(obj.data.toolName, startInput);
+    if (!state.copilotToolKeys.has(startKey)) {
+      state.copilotToolKeys.add(startKey);
+      parts.push(toolUseHtml(obj.data.toolName, startInput));
+    }
+  }
+
+  if (obj.type === 'tool.execution_complete') {
+    var resultData = obj.data?.result;
+    var resultText = resultData?.content || resultData?.detailedContent || '';
+    if (!resultText && resultData && typeof resultData !== 'string') resultText = JSON.stringify(resultData);
+    if (!resultText && obj.data?.success === false) resultText = 'Tool failed';
+    parts.push(toolResultHtml(typeof resultText === 'string' ? resultText : String(resultText || '')));
   }
 
   if (obj.type === 'result') {
@@ -116,6 +181,21 @@ function renderAgentOutput(text) {
   if (!text) return '';
   var fragments = [];
   var lines = text.split('\n');
+  var state = { copilotDeltaBuffer: '', copilotToolKeys: new Set(), copilotReasoningPending: false };
+
+  function flushCopilotPending() {
+    if (state.copilotReasoningPending) {
+      fragments.push('<div style="font-size:10px;color:var(--muted);padding:2px 8px;font-style:italic">\u{1F4AD} Thinking...</div>');
+      state.copilotReasoningPending = false;
+    }
+    if (state.copilotDeltaBuffer) {
+      fragments.push('<div style="display:flex;align-items:baseline;gap:6px;margin:4px 0">' +
+        '<span style="color:var(--muted);font-size:10px;flex-shrink:0">&#9679;</span>' +
+        '<div style="background:var(--surface2);padding:8px 12px;border-radius:12px 12px 12px 2px;max-width:90%;font-size:12px;word-break:break-word">' + renderMd(state.copilotDeltaBuffer) + '</div>' +
+        '</div>');
+      state.copilotDeltaBuffer = '';
+    }
+  }
 
   for (var i = 0; i < lines.length; i++) {
     var trimmed = lines[i].trim();
@@ -145,7 +225,7 @@ function renderAgentOutput(text) {
       try {
         var arr = JSON.parse(trimmed);
         if (Array.isArray(arr)) {
-          for (var j = 0; j < arr.length; j++) fragments.push(_renderJsonObj(arr[j]));
+          for (var j = 0; j < arr.length; j++) fragments.push(_renderJsonObj(arr[j], state));
           continue;
         }
       } catch (e) { /* fall through */ }
@@ -154,11 +234,17 @@ function renderAgentOutput(text) {
     // JSON object line
     if (trimmed.startsWith('{')) {
       try {
-        fragments.push(_renderJsonObj(JSON.parse(trimmed)));
+        var obj = JSON.parse(trimmed);
+        if (obj.type !== 'assistant.message_delta' && obj.type !== 'assistant.reasoning' && obj.type !== 'assistant.reasoning_delta' && obj.type !== 'assistant.message') {
+          flushCopilotPending();
+        }
+        fragments.push(_renderJsonObj(obj, state));
         continue;
       } catch (e) { /* fall through */ }
     }
 
+    flushCopilotPending();
+
     // Stderr
     if (trimmed.startsWith('[stderr]')) {
       fragments.push('<div style="font-size:9px;color:var(--red);font-family:monospace;padding:1px 4px">' + escHtml(trimmed) + '</div>');
@@ -168,6 +254,7 @@ function renderAgentOutput(text) {
     }
   }
 
+  flushCopilotPending();
   return fragments.join('');
 }
 

package/package.json

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