bigpowers 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.1.0](https://github.com/danielvm-git/bigpowers/compare/v2.0.1...v2.1.0) (2026-06-11)
+
+
+### Features
+
+* **dashboard/tui:** render blessed tags and improve layout ([fba0e49](https://github.com/danielvm-git/bigpowers/commit/fba0e4918a4d99c94c30e595378565263d72734d))
+
 ## [2.0.1](https://github.com/danielvm-git/bigpowers/compare/v2.0.0...v2.0.1) (2026-06-11)
 
 

package/dashboard/src/tui/epic-queue.js

@@ -1,5 +1,3 @@
-const { gateIcon, gateColor } = require('../loaders/gate-status');
-
 function renderEpicQueue(box, epics, executionStatus) {
   if (!box || typeof box.setContent !== 'function') {
     return;
@@ -10,27 +8,68 @@ function renderEpicQueue(box, epics, executionStatus) {
     return;
   }
 
-  let lines = [];
-  lines.push('{bold}EPIC QUEUE{/bold}');
-  lines.push('');
-  let totalBcps = 0;
+  const statusMap = executionStatus?.epics || new Map();
+  const doneStatuses = new Set(['done', 'complete', 'completed', 'released']);
+  const activeStatuses = new Set(['in_progress', 'running', 'active']);
 
-  epics.forEach(epic => {
-    const epicStatusIcon = gateIcon[epic.status] || '?';
-    lines.push(`${epicStatusIcon} ${epic.id} ${epic.title}`);
-
-    if (epic.stories && epic.stories.length > 0) {
-      epic.stories.forEach(story => {
-        const storyStatusIcon = gateIcon[story.status] || '?';
-        const bcpCount = story.bcps || 0;
-        totalBcps += bcpCount;
-        lines.push(`  ${storyStatusIcon} ${story.id} ${story.title} (${bcpCount} BCPs)`);
-      });
+  function dot(id) {
+    const s = statusMap.get(id) || '';
+    if (doneStatuses.has(s)) return '{green-fg}●{/green-fg}';
+    if (activeStatuses.has(s)) return '{yellow-fg}●{/yellow-fg}';
+    return '{dim}·{/dim}';
+  }
+
+  function epicDot(epic) {
+    const s = statusMap.get(epic.id) || '';
+    if (doneStatuses.has(s)) return '{green-fg}●{/green-fg}';
+    if (activeStatuses.has(s)) return '{yellow-fg}●{/yellow-fg}';
+    const stories = epic.stories || [];
+    if (stories.length > 0 && stories.every(st => doneStatuses.has(statusMap.get(st.id) || ''))) {
+      return '{green-fg}●{/green-fg}';
     }
+    return '{dim}·{/dim}';
+  }
+
+  const lines = [];
+  let grandTotalBcps = 0;
+  const perEpicBcp = [];
+
+  epics.forEach(epic => {
+    lines.push(`${epicDot(epic)} {bold}${epic.id}{/bold} {dim}·{/dim} ${epic.title || '—'}`);
+
+    const stories = epic.stories || [];
+    let epicBcpDone = 0;
+    let epicBcpTotal = 0;
+    let epicStoriesDone = 0;
+
+    stories.forEach(story => {
+      const bcp = story.bcps || 0;
+      epicBcpTotal += bcp;
+      grandTotalBcps += bcp;
+      const isDone = doneStatuses.has(statusMap.get(story.id) || '');
+      if (isDone) { epicBcpDone += bcp; epicStoriesDone++; }
+
+      const bcpStr = isDone
+        ? `{green-fg}${bcp} BCP{/green-fg}`
+        : `{dim}${bcp} BCP{/dim}`;
+      lines.push(`  ${dot(story.id)} {dim}${story.id}{/dim} ${story.title || '—'}  ${bcpStr}`);
+    });
+
+    perEpicBcp.push({ id: epic.id, bcps: epicBcpTotal });
+
+    const bcpProgressStr = epicBcpDone > 0
+      ? `{green-fg}${epicBcpDone}{/green-fg}{dim}/${epicBcpTotal} BCP{/dim}`
+      : `{dim}0/${epicBcpTotal} BCP{/dim}`;
+    lines.push(`  {dim}${epicStoriesDone}/${stories.length} done · ${bcpProgressStr}`);
+    lines.push('');
   });
 
-  lines.push('');
-  lines.push(`Total: ${totalBcps} BCPs`);
+  // Release baseline footer
+  lines.push('{dim}─────────────────────────{/dim}');
+  lines.push(`{dim}release baseline{/dim}`);
+  lines.push(`{dim}total: {/dim}{yellow-fg}${grandTotalBcps} BCPs{/yellow-fg}`);
+  lines.push(perEpicBcp.map(e => `{dim}${e.id}: ${e.bcps} BCP{/dim}`).join('  '));
+  lines.push(`{dim}target: {/dim}{bold}v2.0.0{/bold}`);
 
   box.setContent(lines.join('\n'));
 }

package/dashboard/src/tui/filesystem.js

@@ -15,8 +15,6 @@ function renderFilesystem(box, projectRoot) {
 
   const now = Date.now();
   const lines = [];
-  lines.push('{bold}FILE SYSTEM{/bold}');
-
   let fileCount = 0;
 
   try {

package/dashboard/src/tui/index.js

@@ -35,14 +35,14 @@ function start(projectRoot) {
   });
 
   // Check terminal size
-  if (screen.width < 120 || screen.height < 30) {
+  if (screen.width < 120 || screen.height < 34) {
     const msg = blessed.box({
       parent: screen,
       top: 'center',
       left: 'center',
       width: 60,
       height: 10,
-      content: '{center}Terminal must be at least 120x30{/center}\n{center}Please resize and try again{/center}',
+      content: '{center}Terminal must be at least 120x34{/center}\n{center}Please resize and try again{/center}',
       border: 'line',
       tags: true,
       style: { border: { fg: 'yellow' } }
@@ -58,17 +58,16 @@ function start(projectRoot) {
     left: 0,
     width: '100%',
     height: 1,
-    border: 'line',
     tags: true,
-    style: { border: { fg: 'magenta' } }
   });
 
+  // height 5 = 3 content lines + top/bottom borders: status bar, step info, stats row
   const metricsBar = blessed.box({
     parent: screen,
     top: 1,
     left: 0,
     width: '100%',
-    height: 3,
+    height: 5,
     border: 'line',
     tags: true,
     style: { border: { fg: 'blue' } }
@@ -76,54 +75,58 @@ function start(projectRoot) {
 
   const pipeline = blessed.box({
     parent: screen,
-    top: 4,
+    top: 6,
     left: 0,
     width: '100%',
     height: 5,
     border: 'line',
     tags: true,
-    style: { border: { fg: 'cyan' } }
+    label: ' {green-fg}≡ PIPELINE{/green-fg} ',
+    style: { border: { fg: 'green' } }
   });
 
   const epicQueue = blessed.box({
     parent: screen,
-    top: 9,
+    top: 11,
     left: 0,
     width: '33%',
-    height: screen.height - 21,
+    height: screen.height - 23,
     border: 'line',
     scrollable: true,
     mouse: true,
     keys: true,
     tags: true,
+    label: ' {green-fg}≡ EPIC QUEUE{/green-fg} ',
     style: { border: { fg: 'green' } }
   });
 
   const actionLog = blessed.box({
     parent: screen,
-    top: 9,
+    top: 11,
     left: '33%',
     width: '33%',
-    height: screen.height - 21,
+    height: screen.height - 23,
     border: 'line',
     scrollable: true,
     mouse: true,
     keys: true,
     tags: true,
-    style: { border: { fg: 'yellow' } }
+    label: ' {cyan-fg}>_ STATE.YAML{/cyan-fg} ',
+    style: { border: { fg: 'cyan' } }
   });
 
   const fsPanel = blessed.box({
     parent: screen,
-    top: 9,
+    top: 11,
     left: '66%',
     width: '34%',
-    height: screen.height - 21,
+    height: screen.height - 23,
     border: 'line',
     scrollable: true,
     mouse: true,
     keys: true,
     tags: true,
+    label: ' {magenta-fg}□ FILESYSTEM{/magenta-fg} ',
     style: { border: { fg: 'magenta' } }
   });
 
@@ -138,7 +141,8 @@ function start(projectRoot) {
     mouse: true,
     keys: true,
     tags: true,
-    style: { border: { fg: 'white' } }
+    label: ' {cyan-fg}⊙ CYCLE TIME LEDGER — BCPS · TIMESTAMPS · THROUGHPUT{/cyan-fg} ',
+    style: { border: { fg: 'cyan' } }
   });
 
   // Refresh function
@@ -149,12 +153,10 @@ function start(projectRoot) {
     const cycleTimes = readCycleTimes(projectRoot);
     const metrics = computeProjectMetrics(cycleTimes);
 
-    // Render title bar
-    const epicTitle = stateData?.active_epic || '—';
-    const stepNum = stateData?.epicCycle?.current_step ? (stateData.epicCycle.completed_steps?.length || 0) + 1 : 0;
-    titleBar.setContent(`{bold}{magenta}bigpowers factory{/magenta}{/bold} — ${epicTitle} — step ${stepNum} / 8`);
+    // Title bar: fixed project identity
+    titleBar.setContent(' {bold}{cyan-fg}⚙ bigpowers factory{/cyan-fg}{/bold} {dim}v2 — seed {cyan-fg}→{/cyan-fg} epics {cyan-fg}→{/cyan-fg} mvp{/dim}');
 
-    renderMetricsBar(metricsBar, metrics, stateData, epics);
+    renderMetricsBar(metricsBar, metrics, stateData, epics, cycleTimes);
     renderPipeline(pipeline, stateData);
     renderEpicQueue(epicQueue, epics, executionStatus);
     renderStateYaml(actionLog, stateData);

package/dashboard/src/tui/ledger.js

@@ -1,61 +1,56 @@
+function pad(str, width) {
+  const s = String(str);
+  return s.length >= width ? s : s + ' '.repeat(width - s.length);
+}
+
 function renderLedger(box, cycleTimes) {
   if (!box || typeof box.setContent !== 'function') {
     return;
   }
 
   if (!cycleTimes || cycleTimes.length === 0) {
-    box.setContent('{center}{dim}no completed stories yet{/dim}{/center}');
+    box.setContent('{dim}stories complete here as they land{/dim}');
     return;
   }
 
   const lines = [];
-  lines.push('{bold}{cyan}Ledger{/cyan}{/bold}');
-  lines.push('');
 
-  // Header row
+  // Column widths
+  const W = { sid: 12, epic: 6, bcps: 5, min: 8, bhr: 7 };
+
+  // Header
   lines.push(
-    '{bold}' +
-    '{cyan}Story ID{/cyan}  ' +
-    '{cyan}Epic{/cyan}  ' +
-    '{cyan}BCPs{/cyan}  ' +
-    '{cyan}Minutes{/cyan}  ' +
-    '{cyan}BCP/hr{/cyan}' +
-    '{/bold}'
+    `{cyan-fg}{bold}${pad('Story ID', W.sid)}${pad('Epic', W.epic)}${pad('BCPs', W.bcps)}${pad('Minutes', W.min)}${pad('BCP/hr', W.bhr)}{/bold}{/cyan-fg}`
   );
+  lines.push('{dim}' + '─'.repeat(W.sid + W.epic + W.bcps + W.min + W.bhr) + '{/dim}');
 
   let totalBCPs = 0;
   let totalMinutes = 0;
 
-  // Data rows
-  cycleTimes.forEach((cycle) => {
+  cycleTimes.forEach(cycle => {
     const storyId = cycle.id || '—';
-    const epicPrefix = cycle.epic || '—';
+    const epicId = cycle.epic || '—';
     const bcps = cycle.bcps || 0;
     const minutes = cycle.cycleMin || 0;
-    const bcpPerHour = minutes > 0 ? ((bcps * 60) / minutes).toFixed(1) : '—';
+    const bph = minutes > 0 ? ((bcps * 60) / minutes).toFixed(1) : '—';
 
     totalBCPs += bcps;
     totalMinutes += minutes;
 
     lines.push(
-      `  ${storyId}  ` +
-      `${epicPrefix}  ` +
-      `${bcps}  ` +
-      `${minutes}  ` +
-      `${bcpPerHour}`
+      `{white-fg}${pad(storyId, W.sid)}{/white-fg}` +
+      `{dim}${pad(epicId, W.epic)}{/dim}` +
+      `{yellow-fg}${pad(bcps, W.bcps)}{/yellow-fg}` +
+      `{dim}${pad(minutes, W.min)}{/dim}` +
+      `{green-fg}${pad(bph, W.bhr)}{/green-fg}`
     );
   });
 
-  lines.push('');
-
-  // Totals row
-  const avgBcpPerHour =
-    totalMinutes > 0 ? ((totalBCPs * 60) / totalMinutes).toFixed(1) : '—';
+  lines.push('{dim}' + '─'.repeat(W.sid + W.epic + W.bcps + W.min + W.bhr) + '{/dim}');
 
+  const avgBph = totalMinutes > 0 ? ((totalBCPs * 60) / totalMinutes).toFixed(1) : '—';
   lines.push(
-    '{bold}{yellow}' +
-    `TOTAL  —  ${totalBCPs}  ${totalMinutes}  ${avgBcpPerHour}` +
-    '{/yellow}{/bold}'
+    `{bold}{yellow-fg}${pad('TOTAL', W.sid)}${pad('—', W.epic)}${pad(totalBCPs, W.bcps)}${pad(totalMinutes, W.min)}${pad(avgBph, W.bhr)}{/yellow-fg}{/bold}`
   );
 
   box.setContent(lines.join('\n'));

package/dashboard/src/tui/metrics-bar.js

@@ -1,47 +1,82 @@
-function renderMetricsBar(box, projectMetrics, stateData, epics) {
+function renderMetricsBar(box, projectMetrics, stateData, epics, cycleTimes) {
   if (!box || typeof box.setContent !== 'function') {
     return;
   }
 
-  // Count epics and stories
-  let epicCount = 0;
-  let storyCount = 0;
+  const ct = cycleTimes || [];
+  const epicList = epics && Array.isArray(epics) ? epics : [];
+
+  // Compute totals
+  let totalStories = 0;
   let targetBcps = 0;
+  epicList.forEach(epic => {
+    if (epic.stories && Array.isArray(epic.stories)) {
+      totalStories += epic.stories.length;
+      epic.stories.forEach(s => { targetBcps += s.bcps || 0; });
+    }
+  });
 
-  if (epics && Array.isArray(epics)) {
-    epicCount = epics.length;
-    epics.forEach(epic => {
-      if (epic.stories && Array.isArray(epic.stories)) {
-        storyCount += epic.stories.length;
-        epic.stories.forEach(story => {
-          targetBcps += story.bcps || 0;
-        });
-      }
-    });
-  }
+  const doneStories = ct.length;
+  const totalEpics = epicList.length;
+  const doneStoryIds = new Set(ct.map(c => c.id));
+  const doneEpics = epicList.filter(e =>
+    e.stories && e.stories.length > 0 && e.stories.every(s => doneStoryIds.has(s.id))
+  ).length;
 
-  const deliveredBcps = projectMetrics?.totalBcps ?? '-';
-  const totalMin = projectMetrics?.totalMin ?? '-';
-  const avgBcpPerHour = projectMetrics?.avgBcpPerHour ?? '-';
-  const version = stateData?.release?.target_version ?? '-';
+  const deliveredBcps = projectMetrics?.totalBcps ?? 0;
+  const totalMin = projectMetrics?.totalMin ?? 0;
+  const avgBcpPerHour = projectMetrics?.avgBcpPerHour;
+  const version = stateData?.release?.target_version ?? '—';
+  const branch = stateData?.gitBranch ?? 'main';
 
-  let bcpHrColor = 'white';
+  // BCP/hr color threshold
+  let bphColor = 'white';
   if (typeof avgBcpPerHour === 'number') {
-    if (avgBcpPerHour >= 2.0) {
-      bcpHrColor = 'green';
-    } else if (avgBcpPerHour >= 1.0) {
-      bcpHrColor = 'yellow';
-    } else {
-      bcpHrColor = 'red';
-    }
+    if (avgBcpPerHour >= 2.0) bphColor = 'green';
+    else if (avgBcpPerHour >= 1.0) bphColor = 'yellow';
+    else bphColor = 'red';
   }
+  const bphDisplay = typeof avgBcpPerHour === 'number' ? avgBcpPerHour.toFixed(2) : '—';
+  const cycleDisplay = totalMin > 0 ? `${totalMin}m` : '—';
+
+  // ── Line 1: status bar ──
+  const statusLine =
+    `{dim}BCPs:{/dim} {yellow-fg}${deliveredBcps}{/yellow-fg}{dim}/${targetBcps}{/dim}` +
+    `  {dim}│{/dim}  {dim}Cycle:{/dim} ${cycleDisplay}` +
+    `  {dim}│{/dim}  {dim}BCP/hr:{/dim} {${bphColor}-fg}${bphDisplay}{/${bphColor}-fg}` +
+    `  {dim}│{/dim}  {dim}v{/dim}{green-fg}${version}{/green-fg}` +
+    `{|}  {dim}branch:{/dim} {green-fg}${branch}{/green-fg}  `;
+
+  // ── Line 2: step info ──
+  const currentStep = stateData?.epicCycle?.current_step;
+  const activeStory = stateData?.activeStory ?? '—';
+  const activeEpic = stateData?.activeEpic ?? '—';
+  const activeFlow = stateData?.activeFlow ?? '—';
 
-  const avgCycleTime = totalMin === '-' ? '-' : `${totalMin}m`;
-  const bcpHrDisplay = typeof avgBcpPerHour === 'number' ? avgBcpPerHour.toFixed(2) : avgBcpPerHour;
+  const STEP_NAMES = ['survey-context','plan-work','kickoff-branch','develop-tdd','verify-work','audit-code','commit-message','release-branch'];
+  const stepName = typeof currentStep === 'number' ? (STEP_NAMES[currentStep] ?? '—') : (currentStep ?? '—');
+  const isActive = stepName !== '—' && activeStory !== '—';
+  const statusWord = isActive
+    ? `{yellow-fg}running{/yellow-fg}`
+    : `{green-fg}ready{/green-fg}`;
+  const storyDesc = isActive
+    ? `{dim}${activeEpic}{/dim} {dim}›{/dim} {cyan-fg}${activeStory}{/cyan-fg} {dim}—{/dim} ${stepName}`
+    : `{dim}flow:{/dim} ${activeFlow}  {dim}next:{/dim} {cyan-fg}${stateData?.epicCycle?.next_skill ?? 'survey-context'}{/cyan-fg}`;
+  const stepLine =
+    `{dim}step {/dim}{cyan-fg}${doneStories}{/cyan-fg}{dim}/${totalStories}{/dim}` +
+    `  {dim}—{/dim}  ${statusWord}` +
+    `  {dim}—{/dim}  ${storyDesc}`;
 
-  const line = `epics: ${epicCount} | stories: ${storyCount} | BCPs: ${deliveredBcps}/${targetBcps} | cycle: ${avgCycleTime} | {${bcpHrColor}}BCP/hr: ${bcpHrDisplay}{/${bcpHrColor}} | v${version}`;
+  // ── Line 3: stats row ──
+  const statsLine =
+    `{dim}[{/dim} epics {green-fg}${doneEpics}${doneEpics > 0 ? '' : ''}{/green-fg}{dim}/${totalEpics} ]{/dim}` +
+    `   {dim}[{/dim} stories {cyan-fg}${doneStories}{/cyan-fg}{dim}/${totalStories} ]{/dim}` +
+    `   {dim}[{/dim} BCPs {yellow-fg}${deliveredBcps}{/yellow-fg}{dim}/${targetBcps} ]{/dim}` +
+    `   {dim}[{/dim} cycle ${cycleDisplay}{dim} ]{/dim}` +
+    `   {dim}[{/dim} BCP/hr {${bphColor}-fg}${bphDisplay}{/${bphColor}-fg}{dim} ]{/dim}` +
+    `   {dim}[{/dim} v{green-fg}${version}{/green-fg}{dim} ]{/dim}`;
 
-  box.setContent(line);
+  box.setContent([statusLine, stepLine, statsLine].join('\n'));
 }
 
 module.exports = { renderMetricsBar };

package/dashboard/src/tui/pipeline.js

@@ -1,5 +1,7 @@
 const { STEPS } = require('../loaders/pipeline-map');
 
+const STEP_ABBR = ['sur','pla','kic','tdd','ver','aud','com','rel'];
+
 function renderPipeline(box, stateData) {
   if (!box || typeof box.setContent !== 'function') {
     return;
@@ -10,33 +12,27 @@ function renderPipeline(box, stateData) {
     return;
   }
 
-  const currentStep = stateData.epicCycle?.current_step || null;
-  const completedSteps = stateData.epicCycle?.completed_steps || [];
-
-  // Build horizontal pipeline strip
-  const steps = STEPS.map((step, index) => {
-    const isCompleted = completedSteps.includes(step);
-    const isCurrent = step === currentStep;
-
-    let display = `${index + 1} ${step}`;
-
-    if (isCurrent) {
-      display = `{reverse}${display}{/reverse}`;
-    } else if (isCompleted) {
-      display = `{green-fg}${display}{/green-fg}`;
+  // current_step is a 0-based index (number) in state.yaml
+  const rawStep = stateData.epicCycle?.current_step;
+  const currentIdx = typeof rawStep === 'number' ? rawStep : STEPS.indexOf(rawStep);
+
+  // Build pipeline strip
+  const strip = STEPS.map((step, i) => {
+    const abbr = STEP_ABBR[i];
+    if (i < currentIdx) {
+      return `{green-fg}${i + 1} ${step}{/green-fg}`;
+    } else if (i === currentIdx) {
+      return `{reverse}{cyan-fg}${i + 1} ${step}{/cyan-fg}{/reverse}`;
     } else {
-      display = `{dim}${display}{/dim}`;
+      return `{dim}${i + 1} ${step}{/dim}`;
     }
+  }).join(' {dim}›{/dim} ');
 
-    return display;
-  }).join(' {bold}›{/bold} ');
-
-  const lines = [];
-  lines.push(`{bold}{cyan}Pipeline{/cyan}{/bold}  step ${STEPS.indexOf(currentStep) + 1} / ${STEPS.length}`);
-  lines.push('');
-  lines.push(steps);
+  const stepLabel = currentIdx >= 0 && currentIdx < STEPS.length
+    ? `{dim}step{/dim} {cyan-fg}${currentIdx + 1}{/cyan-fg}{dim}/${STEPS.length}{/dim}  {dim}—{/dim}  ${STEPS[currentIdx]}`
+    : '{dim}no active step{/dim}';
 
-  box.setContent(lines.join('\n'));
+  box.setContent(stepLabel + '\n\n' + strip);
 }
 
 module.exports = { renderPipeline };

package/dashboard/src/tui/state-yaml.js

@@ -1,45 +1,63 @@
+const STEP_NAMES = [
+  'survey-context', 'plan-work', 'kickoff-branch', 'develop-tdd',
+  'verify-work', 'audit-code', 'commit-message', 'release-branch'
+];
+const STEP_ABBR = ['sur', 'pla', 'kic', 'tdd', 'ver', 'aud', 'com', 'rel'];
+
 function renderStateYaml(box, stateData) {
   if (!box || typeof box.setContent !== 'function') {
     return;
   }
 
   if (!stateData) {
-    box.setContent('{center}state.yaml not found{/center}');
+    box.setContent('{center}{dim}state.yaml not found{/dim}{/center}');
     return;
   }
 
-  const lines = [];
-  lines.push('{bold}CURRENT ACTION{/bold}');
-  lines.push('');
+  const rawStep = stateData.epicCycle?.current_step;
+  const currentIdx = typeof rawStep === 'number' ? rawStep : STEP_NAMES.indexOf(rawStep);
+  const stepName = currentIdx >= 0 ? STEP_NAMES[currentIdx] : (rawStep ?? '—');
+  const nextSkill = stateData.epicCycle?.next_skill ?? stateData.handoff?.next_skill ?? '—';
 
-  const pairs = [
-    { key: 'active_flow', value: stateData.active_flow },
-    { key: 'active_epic', value: stateData.active_epic },
-    { key: 'active_story', value: stateData.active_story },
-    { key: 'current_step', value: stateData.current_step },
-    { key: 'next_skill', value: stateData.next_skill },
-    { key: 'git.branch', value: stateData.git?.branch },
-    { key: 'metrics.story_start', value: stateData.metrics?.story_start },
+  const fields = [
+    { key: 'active_flow',         value: stateData.activeFlow,    color: 'cyan' },
+    { key: 'active_epic',         value: stateData.activeEpic,    color: 't' },
+    { key: 'active_story',        value: stateData.activeStory,   color: 't' },
+    { key: 'current_step',        value: stepName,                color: currentIdx >= 0 ? 'yellow' : 'dim' },
+    { key: 'next_skill',          value: nextSkill,               color: 'green' },
+    { key: 'git.branch',          value: stateData.gitBranch,     color: 'green' },
+    { key: 'metrics.story_start', value: stateData.metrics?.story_start, color: 'dim' },
   ];
 
-  pairs.forEach(({ key, value }) => {
-    let displayValue = String(value || '—');
-
-    // Color rules: use blessed markup, not chalk
-    if (key === 'git.branch') {
-      if (displayValue === 'main') {
-        displayValue = `{green-fg}${displayValue}{/green-fg}`;
-      } else if (displayValue.startsWith('feat/')) {
-        displayValue = `{yellow-fg}${displayValue}{/yellow-fg}`;
-      }
+  const lines = fields.map(({ key, value }) => {
+    const v = value ?? '—';
+    const isDash = v === '—';
+    let colored;
+    if (isDash) {
+      colored = `{dim}${v}{/dim}`;
+    } else if (fields.find(f => f.key === key)?.color === 'cyan') {
+      colored = `{cyan-fg}${v}{/cyan-fg}`;
+    } else if (fields.find(f => f.key === key)?.color === 'green') {
+      colored = `{green-fg}${v}{/green-fg}`;
+    } else if (fields.find(f => f.key === key)?.color === 'yellow') {
+      colored = `{yellow-fg}${v}{/yellow-fg}`;
+    } else if (fields.find(f => f.key === key)?.color === 'dim') {
+      colored = `{dim}${v}{/dim}`;
+    } else {
+      colored = v;
     }
+    return `{dim}${key}:{/dim} ${colored}`;
+  });
 
-    if (key === 'next_skill' && value) {
-      displayValue = `{green-fg}${displayValue}{/green-fg}`;
-    }
+  // Stage tracker strip
+  const tracker = STEP_ABBR.map((abbr, i) => {
+    if (i < currentIdx) return `{green-fg}${abbr}{/green-fg}`;
+    if (i === currentIdx) return `{cyan-fg}{bold}${abbr}{/bold}{/cyan-fg}`;
+    return `{dim}${abbr}{/dim}`;
+  }).join(' {dim}·{/dim} ');
 
-    lines.push(`  {dim}${key}:{/dim} ${displayValue}`);
-  });
+  lines.push('');
+  lines.push(tracker);
 
   box.setContent(lines.join('\n'));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bigpowers",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "61 agent skills for spec-driven, test-first software development by solo developers",
   "main": "index.js",
   "scripts": {