@yemi33/minions 0.1.680 → 0.1.682

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.1.682 (2026-04-09)
+
+### Features
+-  horizontal node chain pipeline visualization (TDD)
+
+### Fixes
+-  pipeline node chain overlap — truncate labels, remove old stageFlow
+
 ## 0.1.678 (2026-04-09)
 
 ### Fixes

package/dashboard/js/render-pipelines.js

@@ -176,6 +176,82 @@ function _buildProgressBar(stages, run, options) {
   '</div>';
 }
 
+var _nodeIcons = { task: '\u2699', meeting: '\uD83D\uDCAC', plan: '\uD83D\uDCCB', 'merge-prs': '\uD83D\uDD04', condition: '\u2753', wait: '\u23F8', parallel: '\u2693', schedule: '\u23F0', api: '\uD83C\uDF10' };
+
+function _buildNodeChain(stages, run, options) {
+  var compact = options && options.compact;
+  var pipeline = options && options.pipeline;
+  var html = '<div class="pl-node-chain">';
+
+  for (var i = 0; i < stages.length; i++) {
+    var s = stages[i];
+    var stageRun = run?.stages?.[s.id];
+    var st = stageRun?.status || 'pending';
+    var cls = st === 'completed' ? 'complete' : st === 'running' ? 'running' : st === 'failed' ? 'failed' : st === 'waiting-human' ? 'waiting' : 'pending';
+    var icon = _nodeIcons[s.type] || '\u2699';
+    var isCondition = s.type === 'condition';
+    var isWait = s.type === 'wait';
+
+    // Arrow before node (except first)
+    if (i > 0) html += '<div class="pl-node-arrow">\u2192</div>';
+
+    html += '<div class="pl-node">';
+    var label = compact ? (s.id || '').slice(0, 16) : (s.title || s.id || '').slice(0, 24);
+    html += '<div class="pl-node-box ' + cls + (isCondition ? ' condition' : '') + '" title="' + escHtml((s.title || s.id) + ': ' + st) + '">';
+    html += icon + ' ' + escHtml(label);
+    if (isWait && s.duration) html += ' ' + escHtml(s.duration);
+    html += '</div>';
+
+    // Meta line (agent, timing) — skip in compact mode
+    if (!compact) {
+      var meta = [];
+      var agent = stageRun?.agent || s.agent;
+      if (agent) meta.push(escHtml(agent));
+      if (st === 'completed' && stageRun?.completedAt) meta.push(timeSinceStr(new Date(stageRun.completedAt)));
+      if (st === 'running' && stageRun?.startedAt) meta.push(timeSinceStr(new Date(stageRun.startedAt)));
+      // Artifact counts
+      var arts = stageRun?.artifacts || {};
+      var artCounts = [];
+      if (arts.workItems?.length) artCounts.push(arts.workItems.length + ' WI');
+      if (arts.prs?.length) artCounts.push(arts.prs.length + ' PR');
+      if (arts.notes?.length) artCounts.push(arts.notes.length + ' notes');
+      if (artCounts.length) meta.push(artCounts.join(', '));
+      if (meta.length) html += '<div class="pl-node-meta">' + meta.join(' \u00b7 ') + '</div>';
+    }
+
+    // Condition fork labels
+    if (isCondition) {
+      html += '<div class="pl-node-meta" style="font-style:italic">';
+      if (s.onMet) html += '\u2714 ' + escHtml(s.onMet);
+      if (s.onMet && s.onUnmet) html += ' / ';
+      if (s.onUnmet) html += '\u2718 ' + escHtml(s.onUnmet);
+      html += '</div>';
+    }
+
+    html += '</div>';
+  }
+
+  // Stop/exit condition terminal node
+  var stopWhen = pipeline?.stopWhen;
+  if (stopWhen) {
+    html += '<div class="pl-node-arrow">\u2192</div>';
+    html += '<div class="pl-node"><div class="pl-node-box pl-node-stop">\u23F9 Stop</div>';
+    html += '<div class="pl-node-meta">' + escHtml(stopWhen) + '</div></div>';
+  }
+
+  html += '</div>';
+
+  // Loop indicator
+  if (pipeline?.trigger?.cron) {
+    var runCount = (pipeline.runs || []).length;
+    html += '<div class="pl-node-loop">\u21BA Loop (' + escHtml(_cronToHuman(pipeline.trigger.cron)) + ')';
+    if (runCount > 0) html += ' \u00b7 Run ' + runCount;
+    html += '</div>';
+  }
+
+  return html;
+}
+
 function renderPipelines(pipelines) {
   _pipelinesData = pipelines || [];
   const el = document.getElementById('pipelines-content');
@@ -207,7 +283,7 @@ function renderPipelines(pipelines) {
     var progressHtml = '';
     var displayRun = activeRun || lastRun;
     if (displayRun && (p.stages || []).length > 0) {
-      progressHtml = _buildProgressBar(p.stages || [], displayRun);
+      progressHtml = _buildNodeChain(p.stages || [], displayRun, { compact: true, pipeline: p });
     }
 
     // Monitored resources (pipeline-level + stage-level, compact on card)
@@ -224,7 +300,6 @@ function renderPipelines(pipelines) {
           (p.enabled === false ? '<span style="font-size:9px;color:var(--red)"' + (p._stopReason ? ' title="' + escHtml(p._stopReason) + '"' : '') + '>' + (p._stoppedBy ? 'AUTO-STOPPED' : 'DISABLED') + '</span>' : '') +
         '</div>' +
       '</div>' +
-      '<div style="margin-top:6px;display:flex;gap:4px;align-items:center;flex-wrap:wrap">' + stageFlow + '</div>' +
       resourcesHtml +
       progressHtml +
     '</div>';
@@ -256,7 +331,7 @@ function openPipelineDetail(id) {
   // Stage detail with progress bar
   var detailRun = activeRun || (p.runs || []).slice(-1)[0];
   if (detailRun && (p.stages || []).length > 0) {
-    html += _buildProgressBar(p.stages || [], detailRun, { height: '8px', detailLabel: true });
+    html += _buildNodeChain(p.stages || [], detailRun, { compact: false, pipeline: p });
   }
   // Pipeline-level monitored resources (full view in detail)
   var pipelineResources = _collectMonitoredResources(p);

package/dashboard/styles.css

@@ -192,6 +192,19 @@
   .pl-prog-seg.pending { background: transparent; }
   @keyframes plSegPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
   .pl-progress-label { display: flex; gap: 8px; align-items: center; margin-top: 4px; font-size: 10px; }
+  .pl-node-chain { display: flex; align-items: flex-start; gap: 2px; overflow-x: auto; padding: 8px 0; }
+  .pl-node { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
+  .pl-node-box { padding: 4px 8px; border-radius: 6px; border: 2px solid var(--border); background: var(--surface2); text-align: center; font-size: 10px; transition: border-color 0.2s; white-space: nowrap; }
+  .pl-node-box.complete { border-color: var(--green); background: rgba(63,185,80,0.08); }
+  .pl-node-box.running { border-color: var(--blue); animation: plSegPulse 1.5s ease-in-out infinite; }
+  .pl-node-box.failed { border-color: var(--red); background: rgba(248,81,73,0.08); }
+  .pl-node-box.waiting { border-color: var(--yellow); }
+  .pl-node-box.pending { border-color: var(--border); opacity: 0.6; }
+  .pl-node-box.condition { border-style: dashed; }
+  .pl-node-box.pl-node-stop { border-style: dotted; border-color: var(--muted); opacity: 0.7; }
+  .pl-node-arrow { display: flex; align-items: center; padding: 0 2px; color: var(--muted); font-size: 12px; flex-shrink: 0; margin-top: 8px; }
+  .pl-node-meta { font-size: 9px; color: var(--muted); margin-top: 2px; text-align: center; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
+  .pl-node-loop { font-size: 10px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
   .prd-items-list { display: flex; flex-direction: column; gap: 3px; max-height: 400px; overflow-y: auto; padding: 0 8px; }
   .prd-item-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--text-base); background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--border); }
   .prd-item-row.st-done { border-left-color: var(--green); }

package/package.json

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