@yemi33/minions 0.1.1592 → 0.1.1594

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.1594 (2026-04-28)
+
+### Features
+- match runtime tags to actual logos (pixel-crab Claude, mascot Copilot)
+- replace runtime text tag with inline SVG logos
+
 ## 0.1.1592 (2026-04-28)
 
 ### Features

package/dashboard/js/render-agents.js

@@ -1,14 +1,37 @@
 // 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)' },
+  // Claude Code — pixel-art "crab" mascot in Anthropic orange. Wide blocky
+  // body with two black square eyes, side fin protrusions, and four legs at
+  // the bottom with a wide middle gap. Approximates the standalone Claude
+  // Code sticker icon.
+  claude: {
+    label: 'Claude',
+    color: '#cc785c',
+    svg: '<svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true" focusable="false" style="display:inline-block;vertical-align:-2px"><g fill="currentColor"><rect x="4" y="3" width="16" height="15"/><rect x="2" y="8" width="2" height="4"/><rect x="20" y="8" width="2" height="4"/><rect x="4" y="18" width="2.5" height="3"/><rect x="8" y="18" width="2.5" height="3"/><rect x="13.5" y="18" width="2.5" height="3"/><rect x="17.5" y="18" width="2.5" height="3"/></g><g fill="#000"><rect x="7" y="7.5" width="2.5" height="3"/><rect x="14.5" y="7.5" width="2.5" height="3"/></g></svg>',
+  },
+  // GitHub Copilot — bespectacled "pilot" mascot: head with side ear cups,
+  // two round goggles, small bridge, and a rectangular grill mouth with two
+  // vertical bars. Matches the standalone github-copilot icon. Cutouts use
+  // white so the logo stays recognisable against any agent-card background.
+  copilot: {
+    label: 'Copilot',
+    color: '#8957e5',
+    svg: '<svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true" focusable="false" style="display:inline-block;vertical-align:-2px"><g fill="currentColor"><ellipse cx="12" cy="11" rx="10" ry="8.5"/><circle cx="2.5" cy="13" r="2.4"/><circle cx="21.5" cy="13" r="2.4"/></g><g fill="#fff"><circle cx="8" cy="10" r="3"/><circle cx="16" cy="10" r="3"/><rect x="11.2" y="9.5" width="1.6" height="1.6" rx="0.3"/><rect x="8.4" y="14" width="7.2" height="3.8" rx="0.5"/></g><g fill="currentColor"><rect x="10.4" y="14.5" width="0.9" height="2.8" rx="0.2"/><rect x="12.7" y="14.5" width="0.9" height="2.8" rx="0.2"/></g></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 +72,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/package.json

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