work-kit-cli 0.2.7 → 0.3.0

package/cli/src/observer/data.ts

@@ -2,10 +2,14 @@ import * as fs from "node:fs";
 import * as path from "node:path";
 import { execFileSync } from "node:child_process";
 import type { WorkKitState, PhaseName } from "../state/schema.js";
-import { PHASE_NAMES, SUBSTAGES_BY_PHASE } from "../state/schema.js";
-import { readState, stateExists } from "../state/store.js";
+import { PHASE_NAMES, STEPS_BY_PHASE, MODE_AUTO } from "../state/schema.js";
+import { readState, stateExists, STATE_DIR, AWAITING_INPUT_MARKER_FILE, IDLE_MARKER_FILE } from "../state/store.js";
+import { TRACKER_DIR, INDEX_FILE } from "../config/constants.js";
 
-// ── View Types ──────────────────────────────────────────────────────
+const AWAITING_INPUT_MARKER = path.join(STATE_DIR, AWAITING_INPUT_MARKER_FILE);
+const IDLE_MARKER = path.join(STATE_DIR, IDLE_MARKER_FILE);
+
+// ── View Types ─────────────────────────────────────────────────────
 
 export interface WorkItemView {
   slug: string;
@@ -14,15 +18,17 @@ export interface WorkItemView {
   classification?: string;
   status: string;
   currentPhase: string | null;
-  currentSubStage: string | null;
+  currentStep: string | null;
   currentPhaseStartedAt?: string;
-  currentSubStageStatus?: string;
-  currentSubStageIndex?: number;
-  currentSubStageStartedAt?: string;
+  currentStepStatus?: string;
+  currentStepIndex?: number;
+  currentStepStartedAt?: string;
   currentPhaseTotal?: number;
   gated: boolean;
+  awaitingInput: boolean;
+  idle: boolean;
   worktreePath: string;
-  phaseSubStages: { name: string; status: string; startedAt?: string; completedAt?: string; outcome?: string }[];
+  phaseSteps: { name: string; status: string; startedAt?: string; completedAt?: string; outcome?: string }[];
   startedAt: string;
   progress: { completed: number; total: number; percent: number };
   phases: { name: string; status: string; startedAt?: string; completedAt?: string }[];
@@ -42,7 +48,7 @@ export interface DashboardData {
   lastUpdated: Date;
 }
 
-// ── Worktree Discovery ──────────────────────────────────────────────
+// ── Worktree Discovery ─────────────────────────────────────────────
 
 export function discoverWorktrees(mainRepoRoot: string): string[] {
   let output: string;
@@ -74,7 +80,7 @@ export function discoverWorktrees(mainRepoRoot: string): string[] {
   return worktrees;
 }
 
-// ── Collect Single Work Item ────────────────────────────────────────
+// ── Collect Single Work Item ───────────────────────────────────────
 
 export function collectWorkItem(worktreeRoot: string): WorkItemView | null {
   if (!stateExists(worktreeRoot)) return null;
@@ -91,30 +97,29 @@ export function collectWorkItem(worktreeRoot: string): WorkItemView | null {
   let total = 0;
   const phaseViews: { name: string; status: string; startedAt?: string; completedAt?: string }[] = [];
 
-  const phaseList: PhaseName[] = state.mode === "auto-kit" && state.workflow
+  const phaseList: PhaseName[] = state.mode === MODE_AUTO && state.workflow
     ? getAutoKitPhases(state)
     : [...PHASE_NAMES];
 
-  // Track current phase substage position
+  // Track current phase step position
   let currentPhaseStartedAt: string | undefined;
-  let currentSubStageStatus: string | undefined;
-  let currentSubStageIndex: number | undefined;
-  let currentSubStageStartedAt: string | undefined;
+  let currentStepStatus: string | undefined;
+  let currentStepIndex: number | undefined;
+  let currentStepStartedAt: string | undefined;
   let currentPhaseTotal: number | undefined;
-  let phaseSubStages: WorkItemView["phaseSubStages"] = [];
+  let phaseSteps: WorkItemView["phaseSteps"] = [];
 
   for (const phaseName of phaseList) {
     const phase = state.phases[phaseName];
     if (!phase) {
       phaseViews.push({ name: phaseName, status: "pending" });
-      // Count substages for total
-      const subs = SUBSTAGES_BY_PHASE[phaseName] || [];
-      total += subs.length;
+      const steps = STEPS_BY_PHASE[phaseName];
+      total += steps.length;
       continue;
     }
 
-    // If any sub-stage is "waiting", show the phase as waiting in the view
-    const hasWaiting = Object.values(phase.subStages).some(ss => ss.status === "waiting");
+    // If any step is "waiting", show the phase as waiting in the view
+    const hasWaiting = Object.values(phase.steps).some(s => s.status === "waiting");
     phaseViews.push({
       name: phaseName,
       status: hasWaiting ? "waiting" : phase.status,
@@ -122,21 +127,18 @@ export function collectWorkItem(worktreeRoot: string): WorkItemView | null {
       completedAt: phase.completedAt,
     });
 
-    const subStageKeys = Object.keys(phase.subStages);
-    if (subStageKeys.length === 0) {
-      // Use default substages — skip entirely skipped phases
+    const stepKeys = Object.keys(phase.steps);
+    if (stepKeys.length === 0) {
       if (phase.status === "skipped") continue;
-      const defaults = SUBSTAGES_BY_PHASE[phaseName] || [];
+      const defaults = STEPS_BY_PHASE[phaseName];
       total += defaults.length;
       if (phase.status === "completed") completed += defaults.length;
     } else {
-      let phaseIdx = 0;
-      const activeKeys = subStageKeys.filter(k => phase.subStages[k].status !== "skipped");
+      const activeKeys = stepKeys.filter(k => phase.steps[k].status !== "skipped");
       for (const key of activeKeys) {
-        const sub = phase.subStages[key];
+        const s = phase.steps[key];
         total++;
-        phaseIdx++;
-        if (sub.status === "completed") {
+        if (s.status === "completed") {
           completed++;
         }
       }
@@ -144,21 +146,21 @@ export function collectWorkItem(worktreeRoot: string): WorkItemView | null {
       if (phaseName === state.currentPhase) {
         currentPhaseStartedAt = phase.startedAt;
         currentPhaseTotal = activeKeys.length;
-        if (state.currentSubStage) {
-          const idx = activeKeys.indexOf(state.currentSubStage);
-          currentSubStageIndex = idx >= 0 ? idx + 1 : undefined;
-          const ss = phase.subStages[state.currentSubStage];
-          currentSubStageStatus = ss?.status;
-          currentSubStageStartedAt = ss?.startedAt;
+        if (state.currentStep) {
+          const idx = activeKeys.indexOf(state.currentStep);
+          currentStepIndex = idx >= 0 ? idx + 1 : undefined;
+          const s = phase.steps[state.currentStep];
+          currentStepStatus = s?.status;
+          currentStepStartedAt = s?.startedAt;
         }
-        phaseSubStages = activeKeys.map(key => {
-          const ss = phase.subStages[key];
+        phaseSteps = activeKeys.map(key => {
+          const s = phase.steps[key];
           return {
             name: key,
-            status: ss.status,
-            startedAt: ss.startedAt,
-            completedAt: ss.completedAt,
-            outcome: ss.outcome,
+            status: s.status,
+            startedAt: s.startedAt,
+            completedAt: s.completedAt,
+            outcome: s.outcome,
           };
         });
       }
@@ -173,10 +175,10 @@ export function collectWorkItem(worktreeRoot: string): WorkItemView | null {
     count: loopbacks.length,
     lastReason: loopbacks.length > 0 ? loopbacks[loopbacks.length - 1].reason : undefined,
     lastFrom: loopbacks.length > 0
-      ? `${loopbacks[loopbacks.length - 1].from.phase}/${loopbacks[loopbacks.length - 1].from.subStage}`
+      ? `${loopbacks[loopbacks.length - 1].from.phase}/${loopbacks[loopbacks.length - 1].from.step}`
       : undefined,
     lastTo: loopbacks.length > 0
-      ? `${loopbacks[loopbacks.length - 1].to.phase}/${loopbacks[loopbacks.length - 1].to.subStage}`
+      ? `${loopbacks[loopbacks.length - 1].to.phase}/${loopbacks[loopbacks.length - 1].to.step}`
       : undefined,
   };
 
@@ -187,15 +189,23 @@ export function collectWorkItem(worktreeRoot: string): WorkItemView | null {
     classification: state.classification,
     status: state.status,
     currentPhase: state.currentPhase,
-    currentSubStage: state.currentSubStage,
+    currentStep: state.currentStep,
     currentPhaseStartedAt,
-    currentSubStageStatus,
-    currentSubStageIndex,
-    currentSubStageStartedAt,
+    currentStepStatus,
+    currentStepIndex,
+    currentStepStartedAt,
     currentPhaseTotal,
     gated: state.gated ?? false,
+    awaitingInput: fs.existsSync(path.join(worktreeRoot, AWAITING_INPUT_MARKER)),
+    // Idle badge only fires when the agent ended its turn *mid-step*
+    // (suggesting it asked a prose question) — not during normal gaps
+    // between steps.
+    idle:
+      fs.existsSync(path.join(worktreeRoot, IDLE_MARKER)) &&
+      state.status === "in-progress" &&
+      currentStepStatus === "in-progress",
     worktreePath: state.metadata.worktreeRoot,
-    phaseSubStages,
+    phaseSteps,
     startedAt: state.started,
     progress: { completed, total, percent },
     phases: phaseViews,
@@ -206,17 +216,17 @@ export function collectWorkItem(worktreeRoot: string): WorkItemView | null {
 function getAutoKitPhases(state: WorkKitState): PhaseName[] {
   if (!state.workflow) return [...PHASE_NAMES];
   const phases = new Set<PhaseName>();
-  for (const step of state.workflow) {
-    if (step.included) phases.add(step.phase);
+  for (const ws of state.workflow) {
+    if (ws.included) phases.add(ws.phase);
   }
   // Maintain canonical order
   return PHASE_NAMES.filter(p => phases.has(p));
 }
 
-// ── Collect Completed Items ─────────────────────────────────────────
+// ── Collect Completed Items ────────────────────────────────────────
 
 export function collectCompletedItems(mainRepoRoot: string): CompletedItemView[] {
-  const indexPath = path.join(mainRepoRoot, ".work-kit-tracker", "index.md");
+  const indexPath = path.join(mainRepoRoot, TRACKER_DIR, INDEX_FILE);
   if (!fs.existsSync(indexPath)) return [];
 
   let content: string;
@@ -227,7 +237,6 @@ export function collectCompletedItems(mainRepoRoot: string): CompletedItemView[]
   }
 
   const items: CompletedItemView[] = [];
-  // Format: | Date | Slug | PR | Status | Phases |
   const lines = content.split("\n");
   for (const line of lines) {
     const match = line.match(/^\|\s*(.+?)\s*\|\s*(.+?)\s*\|\s*(.+?)\s*\|\s*(.+?)\s*\|\s*(.+?)\s*\|/);
@@ -245,7 +254,7 @@ export function collectCompletedItems(mainRepoRoot: string): CompletedItemView[]
   return items;
 }
 
-// ── Collect All Dashboard Data ──────────────────────────────────────
+// ── Collect All Dashboard Data ─────────────────────────────────────
 
 export function collectDashboardData(mainRepoRoot: string, cachedWorktrees?: string[]): DashboardData {
   const worktrees = cachedWorktrees ?? discoverWorktrees(mainRepoRoot);
@@ -280,7 +289,6 @@ export function collectDashboardData(mainRepoRoot: string, cachedWorktrees?: str
   });
 
   // Merge completed items from worktrees and index file, dedup by slug
-  // Also exclude any slug that is currently active (re-initialized features)
   const activeSlugs = new Set(activeItems.map(i => i.slug));
   const indexItems = collectCompletedItems(mainRepoRoot);
   const seen = new Set(completedFromWorktrees.map(i => i.slug));

package/cli/src/observer/renderer.ts

@@ -1,8 +1,10 @@
 import {
   bold, dim, green, yellow, red, cyan, magenta,
-  bgYellow, bgCyan, bgRed, bgMagenta,
-  boldCyan, boldGreen,
+  bgYellow, bgCyan, bgRed, bgMagenta, bgGreen, bgBlue,
+  boldCyan, boldGreen, boldMagenta,
 } from "../utils/colors.js";
+import { formatDurationMs, formatDurationSince } from "../utils/time.js";
+import { MODE_FULL } from "../state/schema.js";
 import type { DashboardData, WorkItemView, CompletedItemView } from "./data.js";
 
 // ── Spinners & Animation Frames ─────────────────────────────────────
@@ -63,19 +65,7 @@ function formatTimeAgo(dateStr: string): string {
   return `${weeks}w ago`;
 }
 
-function formatDuration(startStr: string): string {
-  const now = Date.now();
-  const start = new Date(startStr).getTime();
-  if (isNaN(start)) return "";
-  const diffMs = now - start;
-  const sec = Math.floor(diffMs / 1000);
-  if (sec < 60) return `${sec}s`;
-  const min = Math.floor(sec / 60);
-  if (min < 60) return `${min}m`;
-  const hr = Math.floor(min / 60);
-  const remMin = min % 60;
-  return remMin > 0 ? `${hr}h${remMin}m` : `${hr}h`;
-}
+const formatDuration = formatDurationSince;
 
 // ── Box Drawing ─────────────────────────────────────────────────────
 
@@ -157,7 +147,7 @@ function phaseIndicator(status: string, tick: number = 0): string {
   }
 }
 
-function subStageIndicator(status: string, tick: number): string {
+function stepIndicator(status: string, tick: number): string {
   switch (status) {
     case "completed": return green("●");
     case "in-progress": return cyan(pulse(tick));
@@ -169,13 +159,20 @@ function subStageIndicator(status: string, tick: number): string {
   }
 }
 
+function phaseDisplayName(name: string): string {
+  // Uppercase with letter-spacing to visually distinguish phases from steps.
+  // e.g. "plan" → "P L A N", "wrap-up" → "W R A P - U P"
+  return name.toUpperCase().split("").join(" ");
+}
+
 function phaseName(name: string, status: string, tick: number): string {
+  const display = phaseDisplayName(name);
   switch (status) {
-    case "completed": return green(name);
-    case "in-progress": return tick % 2 === 0 ? boldCyan(name) : cyan(name);
-    case "waiting": return yellow(name);
-    case "failed": return red(name);
-    default: return dim(name);
+    case "completed": return boldGreen(display);
+    case "in-progress": return tick % 2 === 0 ? boldCyan(display) : bold(cyan(display));
+    case "waiting": return bold(yellow(display));
+    case "failed": return bold(red(display));
+    default: return dim(display);
   }
 }
 
@@ -192,40 +189,112 @@ function statusDot(status: string): string {
 // ── Badges ──────────────────────────────────────────────────────────
 
 function renderModeBadge(mode: string): string {
-  return mode === "full-kit" ? bgCyan(" Full Kit ") : bgYellow(" Auto Kit ");
+  return mode === MODE_FULL ? bgCyan(" Full Kit ") : bgYellow(" Auto Kit ");
 }
 
 function renderGatedBadge(): string {
   return bgMagenta(" GATED ");
 }
 
+function renderClassificationBadge(classification: string): string {
+  const label = ` ${classification.toUpperCase()} `;
+  switch (classification) {
+    case "bug-fix": return bgRed(label);
+    case "small-change": return bgGreen(label);
+    case "refactor": return bgCyan(label);
+    case "feature": return bgBlue(label);
+    case "large-feature": return bgMagenta(label);
+    default: return bgYellow(label);
+  }
+}
+
 // ── Phase Pipeline ──────────────────────────────────────────────────
 
+function phaseDuration(p: { status: string; startedAt?: string; completedAt?: string }): string {
+  if (p.status === "completed" && p.startedAt && p.completedAt) {
+    const ms = new Date(p.completedAt).getTime() - new Date(p.startedAt).getTime();
+    return formatDurationMs(ms);
+  }
+  if ((p.status === "in-progress" || p.status === "waiting") && p.startedAt) {
+    return formatDuration(p.startedAt);
+  }
+  return "";
+}
+
 function renderPhasePipeline(
   phases: WorkItemView["phases"],
-  tick: number
-): string {
-  const segments: string[] = [];
-  for (const p of phases) {
-    const icon = phaseIndicator(p.status, tick);
-    const name = phaseName(p.name, p.status, tick);
-    segments.push(`${icon} ${name}`);
+  tick: number,
+  awaitingInput: boolean = false,
+  currentPhase: string | null = null,
+): string[] {
+  const connector = dim(" ── ");
+  const connectorLen = 4; // " ── "
+
+  // Build top line (icons + names) and bottom line (timing, aligned)
+  const topParts: string[] = [];
+  const bottomParts: string[] = [];
+
+  for (let i = 0; i < phases.length; i++) {
+    const p = phases[i];
+    const isBlockedHere = awaitingInput && p.name === currentPhase && p.status === "in-progress";
+    const icon = isBlockedHere
+      ? magenta(tick % 2 === 0 ? "▶" : "▷")
+      : phaseIndicator(p.status, tick);
+    const name = isBlockedHere
+      ? boldMagenta(phaseDisplayName(p.name))
+      : phaseName(p.name, p.status, tick);
+    const segment = `${icon} ${name}`;
+    topParts.push(segment);
+
+    // Calculate plain width of this segment for alignment
+    const segPlainLen = stripAnsi(segment).length;
+    const dur = phaseDuration(p);
+
+    if (dur) {
+      // Color the duration based on status
+      let durStyled: string;
+      if (p.status === "completed") durStyled = dim(dur);
+      else if (p.status === "in-progress") durStyled = cyan(dur);
+      else if (p.status === "waiting") durStyled = yellow(dur);
+      else durStyled = dim(dur);
+
+      // Center the duration under the segment
+      const durPlainLen = stripAnsi(durStyled).length;
+      const pad = Math.max(0, Math.floor((segPlainLen - durPlainLen) / 2));
+      bottomParts.push(" ".repeat(pad) + durStyled + " ".repeat(Math.max(0, segPlainLen - durPlainLen - pad)));
+    } else {
+      bottomParts.push(" ".repeat(segPlainLen));
+    }
+
+    // Add connector spacing to bottom line too
+    if (i < phases.length - 1) {
+      bottomParts.push(" ".repeat(connectorLen));
+    }
+  }
+
+  const topLine = topParts.join(connector);
+  const bottomLine = bottomParts.join("");
+
+  // Only show bottom line if there's at least one duration
+  const hasAnyDuration = phases.some(p => phaseDuration(p) !== "");
+  if (hasAnyDuration) {
+    return [topLine, bottomLine];
   }
-  return segments.join(dim(" ── "));
+  return [topLine];
 }
 
-// ── Sub-Stage Detail Box ────────────────────────────────────────────
+// ── Step Detail Box ─────────────────────────────────────────────────
 
-function renderSubStageBox(
+function renderStepBox(
   item: WorkItemView,
   innerWidth: number,
   tick: number
 ): string[] {
-  const subs = item.phaseSubStages;
+  const subs = item.phaseSteps;
   if (!subs || subs.length === 0 || !item.currentPhase) return [];
 
   const lines: string[] = [];
-  const label = dim(item.currentPhase);
+  const label = bold(phaseDisplayName(item.currentPhase));
   const boxInner = innerWidth - 8; // indent + border padding
 
   // Top border with phase label
@@ -233,29 +302,42 @@ function renderSubStageBox(
   const topRule = dim("┌─ ") + label + dim(" " + "─".repeat(Math.max(0, boxInner - labelLen - 2)) + "┐");
   lines.push("  " + topRule);
 
-  // Render sub-stages in rows that fit the width
+  // Render steps in rows that fit the width
   const entries: string[] = [];
   for (const ss of subs) {
-    const icon = subStageIndicator(ss.status, tick);
+    // Highlight the current in-progress step in magenta if the agent is
+    // blocked waiting for human input (permission prompt / AskUserQuestion).
+    const isBlockedHere =
+      item.awaitingInput && ss.status === "in-progress" && ss.name === item.currentStep;
+
+    let icon: string;
     let nameStr: string;
-    switch (ss.status) {
-      case "completed": nameStr = green(ss.name); break;
-      case "in-progress": nameStr = boldCyan(ss.name); break;
-      case "waiting": nameStr = yellow(ss.name); break;
-      case "failed": nameStr = red(ss.name); break;
-      default: nameStr = dim(ss.name);
+    if (isBlockedHere) {
+      // Pulsing magenta pointer + bold magenta name
+      icon = magenta(tick % 2 === 0 ? "▶" : "▷");
+      nameStr = boldMagenta(ss.name);
+    } else {
+      icon = stepIndicator(ss.status, tick);
+      switch (ss.status) {
+        case "completed": nameStr = green(ss.name); break;
+        case "in-progress": nameStr = boldCyan(ss.name); break;
+        case "waiting": nameStr = yellow(ss.name); break;
+        case "failed": nameStr = red(ss.name); break;
+        default: nameStr = dim(ss.name);
+      }
     }
-    // Add duration for completed or in-progress
+
     let duration = "";
     if (ss.status === "completed" && ss.startedAt && ss.completedAt) {
       const ms = new Date(ss.completedAt).getTime() - new Date(ss.startedAt).getTime();
-      const sec = Math.floor(ms / 1000);
-      if (sec < 60) duration = dim(` ${sec}s`);
-      else duration = dim(` ${Math.floor(sec / 60)}m`);
+      duration = dim(` ${formatDurationMs(ms)}`);
     } else if (ss.status === "in-progress" && ss.startedAt) {
       duration = dim(` ${formatDuration(ss.startedAt)}`);
     }
-    entries.push(`${icon} ${nameStr}${duration}`);
+
+    // Append an inline "waiting you" hint next to the blocked step
+    const hint = isBlockedHere ? magenta(" ← waiting you") : "";
+    entries.push(`${icon} ${nameStr}${duration}${hint}`);
   }
 
   // Flow entries into rows
@@ -303,28 +385,24 @@ function renderWorkItem(item: WorkItemView, innerWidth: number, tick: number): s
   const gap1 = Math.max(2, innerWidth - slugLen - elapsedLen);
   lines.push(slugText + " ".repeat(gap1) + elapsedText);
 
-  // Line 2: branch + mode badge + gated badge + classification
-  const branchText = dim(item.branch);
-  let badges = "  " + renderModeBadge(item.mode);
+  // Line 2: mode badge + gated badge + classification + blocking state
+  let badges = renderModeBadge(item.mode);
   if (item.gated) badges += " " + renderGatedBadge();
   if (item.status === "paused") badges += " " + bgYellow(" PAUSED ");
   if (item.status === "failed") badges += " " + bgRed(" FAILED ");
-  if (item.classification) badges += "  " + dim(item.classification);
-  lines.push("  " + branchText + badges);
-
-  // Line 3: timing — phase elapsed + sub-stage elapsed
-  const timingParts: string[] = [];
-  if (item.currentPhase && item.currentPhaseStartedAt) {
-    timingParts.push(cyan("phase") + dim(`: ${formatDuration(item.currentPhaseStartedAt)}`));
-  }
-  if (item.currentSubStage && item.currentSubStageStartedAt) {
-    timingParts.push(cyan("step") + dim(`: ${formatDuration(item.currentSubStageStartedAt)}`));
-  }
-  if (timingParts.length > 0) {
-    lines.push("  " + timingParts.join(dim("  │  ")));
+  if (item.classification) badges += " " + renderClassificationBadge(item.classification);
+  if (item.awaitingInput) {
+    // Loud: agent definitely blocked on a permission prompt or AskUserQuestion
+    const arrow = tick % 2 === 0 ? "▶" : "▷";
+    badges += " " + bgMagenta(` ${arrow} AWAITING INPUT `);
+  } else if (item.idle) {
+    // Soft: turn ended but step not complete — probably asking a question in prose
+    badges += " " + dim("⏸ idle");
   }
+  lines.push("  " + badges);
+  lines.push("");
 
-  // Line 4: progress bar with animated head
+  // Line 3: progress bar with animated head
   const barMaxWidth = Math.max(20, Math.min(40, innerWidth - 20));
   lines.push("  " + renderProgressBar(
     item.progress.completed,
@@ -334,13 +412,16 @@ function renderWorkItem(item: WorkItemView, innerWidth: number, tick: number): s
     tick
   ));
 
-  // Line 5: phase pipeline with connectors and spinner
-  lines.push("  " + renderPhasePipeline(item.phases, tick));
+  // Line 4-5: phase pipeline with connectors, spinner, and timing row
+  const pipelineLines = renderPhasePipeline(item.phases, tick, item.awaitingInput, item.currentPhase);
+  for (const pl of pipelineLines) {
+    lines.push("  " + pl);
+  }
 
-  // Line 6: sub-stage detail box (all sub-stages of current phase)
-  const subStageBox = renderSubStageBox(item, innerWidth, tick);
-  if (subStageBox.length > 0) {
-    for (const line of subStageBox) {
+  // Step detail box (all steps of current phase)
+  const stepBox = renderStepBox(item, innerWidth, tick);
+  if (stepBox.length > 0) {
+    for (const line of stepBox) {
       lines.push(line);
     }
   }
@@ -358,15 +439,16 @@ function renderWorkItem(item: WorkItemView, innerWidth: number, tick: number): s
     lines.push(loopStr);
   }
 
-  // Worktree path
+  // Worktree path, then branch beneath it
   if (item.worktreePath) {
     let displayPath = item.worktreePath;
-    const maxPathLen = innerWidth - 4;
+    const maxPathLen = innerWidth - 8;
     if (displayPath.length > maxPathLen) {
       displayPath = "…" + displayPath.slice(displayPath.length - maxPathLen + 1);
     }
-    lines.push("  " + dim(displayPath));
+    lines.push("  " + dim("⌂ " + displayPath));
   }
+  lines.push("  " + dim("⎇ " + item.branch));
 
   return lines;
 }
@@ -417,11 +499,14 @@ export function renderDashboard(
 
   // Header counts
   let activeCount = 0, pausedCount = 0, failedCount = 0, waitingCount = 0;
+  let awaitingInputCount = 0, idleCount = 0;
   for (const item of data.activeItems) {
     if (item.status === "in-progress") activeCount++;
     else if (item.status === "paused") pausedCount++;
     else if (item.status === "failed") failedCount++;
-    if (item.currentSubStageStatus === "waiting") waitingCount++;
+    if (item.currentStepStatus === "waiting") waitingCount++;
+    if (item.awaitingInput) awaitingInputCount++;
+    else if (item.idle) idleCount++;
   }
   const completedCount = data.completedItems.length;
   const hasActive = activeCount > 0;
@@ -429,7 +514,9 @@ export function renderDashboard(
   // Header: mascot + title + counts
   let headerRight = "";
   if (activeCount > 0) headerRight += `${green("●")} ${activeCount} active`;
-  if (waitingCount > 0) headerRight += `  ${yellow("◉")} ${waitingCount} waiting`;
+  if (awaitingInputCount > 0) headerRight += `  ${magenta("▶")} ${awaitingInputCount} awaiting`;
+  if (idleCount > 0) headerRight += `  ${dim("⏸")} ${idleCount} idle`;
+  if (waitingCount > 0) headerRight += `  ${yellow("◉")} ${waitingCount} gated`;
   if (pausedCount > 0) headerRight += `  ${yellow("○")} ${pausedCount} paused`;
   if (failedCount > 0) headerRight += `  ${red("✗")} ${failedCount} failed`;
   if (completedCount > 0) headerRight += `  ${green("✓")} ${completedCount} done`;