infinity-harness 2.0.0

package/src/ui/theme.ts

@@ -0,0 +1,317 @@
+/**
+ * infinity-harness — terminal styling primitives.
+ *
+ * Two things every renderer here needs and neither the host nor Node gives us:
+ *
+ *   1. Width that matches what the terminal actually draws. An ANSI escape
+ *      occupies zero columns and a CJK glyph occupies two, so every layout
+ *      decision measures with `width()` rather than `String.length`.
+ *   2. Colour that degrades. A pipe, a CI log, and NO_COLOR all want plain
+ *      text; a modern terminal wants truecolor. `createStyler` picks once.
+ */
+
+import stringWidth from "string-width";
+
+const ESC = "\u001b";
+const RESET = ESC + "[0m";
+const ANSI_RE = /\u001b\[[0-9;]*m/g;
+
+export function stripAnsi(s: string): string {
+  return s.replace(ANSI_RE, "");
+}
+
+/** Display width in terminal columns, ignoring ANSI and honouring wide chars. */
+export function width(s: string): number {
+  const plain = stripAnsi(s);
+  let w = 0;
+  for (const ch of plain) w += cellWidth(ch);
+  return w;
+}
+
+/**
+ * Truncate to `max` columns, appending an ellipsis when it does not fit.
+ *
+ * ANSI-aware: escape sequences are copied through without consuming columns,
+ * and a reset is appended when the cut lands inside a styled run. Truncating a
+ * styled string with a naive slice would either bleed colour into the rest of
+ * the line or strip it entirely.
+ */
+export function truncate(s: string, max: number, ellipsis = "…"): string {
+  if (max <= 0) return "";
+  if (width(s) <= max) return s;
+
+  const eW = width(ellipsis);
+  const budget = max - eW;
+  let out = "";
+  let w = 0;
+  let styled = false;
+  let i = 0;
+
+  while (i < s.length) {
+    if (s[i] === ESC) {
+      const end = s.indexOf("m", i);
+      if (end === -1) break;
+      const seq = s.slice(i, end + 1);
+      out += seq;
+      styled = seq !== RESET;
+      i = end + 1;
+      continue;
+    }
+    const cp = String.fromCodePoint(s.codePointAt(i)!);
+    const cw = cellWidth(cp);
+    if (w + cw > budget) break;
+    out += cp;
+    w += cw;
+    i += cp.length;
+  }
+
+  return out + (styled ? RESET : "") + ellipsis;
+}
+
+/**
+ * Column width of a single grapheme.
+ *
+ * `string-width` reports East Asian Ambiguous characters as 2 columns, but
+ * every terminal we target draws these particular symbols in 1. Trusting the
+ * library here shifts whole columns of the widget out of alignment, so the
+ * handful of glyphs the UI actually uses are pinned to 1.
+ */
+const AMBIGUOUS_SINGLE = new Set([
+  "\u26a0", // warning sign
+  "\u21b7", // clockwise top semicircle arrow
+  "\u25b8", // small right-pointing triangle
+  "\u2713", // check mark
+  "\u2261", // identical to
+  "\u2022", // bullet
+  "\u00b7", // middle dot
+  "\u2500", // box drawing light horizontal
+]);
+
+export function cellWidth(ch: string): number {
+  if (AMBIGUOUS_SINGLE.has(ch)) return 1;
+  try {
+    return stringWidth(ch);
+  } catch {
+    return 1;
+  }
+}
+
+/** Pad on the right to exactly `n` columns (no-op if already wider). */
+export function padEnd(s: string, n: number): string {
+  const w = width(s);
+  return w >= n ? s : s + " ".repeat(n - w);
+}
+
+export function padStart(s: string, n: number): string {
+  const w = width(s);
+  return w >= n ? s : " ".repeat(n - w) + s;
+}
+
+/**
+ * Wrap to `max` columns on word boundaries, hard-splitting words that cannot
+ * fit. Never truncates — plan text the human needs to read stays readable.
+ */
+export function wrap(text: string, max: number): string[] {
+  if (max <= 0) return [text];
+  if (text === "") return [""];
+  if (width(text) <= max) return [text];
+
+  const lines: string[] = [];
+  let cur = "";
+
+  for (const word of text.split(" ")) {
+    if (width(word) > max) {
+      if (cur) {
+        lines.push(cur);
+        cur = "";
+      }
+      let chunk = "";
+      for (const ch of word) {
+        if (width(chunk) + width(ch) > max) {
+          lines.push(chunk);
+          chunk = ch;
+        } else {
+          chunk += ch;
+        }
+      }
+      if (chunk) cur = chunk;
+      continue;
+    }
+    if (!cur) cur = word;
+    else if (width(cur) + 1 + width(word) <= max) cur += " " + word;
+    else {
+      lines.push(cur);
+      cur = word;
+    }
+  }
+  if (cur) lines.push(cur);
+  return lines.length ? lines : [""];
+}
+
+// -- Colour ------------------------------------------------------------------
+
+export type ColorMode = "none" | "ansi256" | "truecolor";
+
+export type Role =
+  | "brand"
+  | "accent"
+  | "success"
+  | "active"
+  | "pending"
+  | "blocked"
+  | "rework"
+  | "muted"
+  | "text"
+  | "rule";
+
+export type Styler = {
+  mode: ColorMode;
+  fg(role: Role, s: string): string;
+  bold(s: string): string;
+  dim(s: string): string;
+  hex(hex: string, s: string): string;
+};
+
+/**
+ * Palette. Chosen to stay legible on both light and dark terminals: every
+ * colour sits in the mid-luminance band rather than at either extreme, so
+ * nothing disappears into the background on one theme or the other.
+ */
+export const PALETTE: Record<Role, string> = {
+  brand: "#7C5CFF",
+  accent: "#00B8D4",
+  success: "#2E9E5B",
+  active: "#D98A00",
+  pending: "#8A8F98",
+  blocked: "#D64545",
+  rework: "#B36BD4",
+  muted: "#6E7481",
+  text: "#C9CDD4",
+  rule: "#4A5058",
+};
+
+function hexToRgb(hex: string): [number, number, number] {
+  const h = hex.replace("#", "");
+  return [
+    Number.parseInt(h.slice(0, 2), 16),
+    Number.parseInt(h.slice(2, 4), 16),
+    Number.parseInt(h.slice(4, 6), 16),
+  ];
+}
+
+/** Nearest xterm-256 index for an RGB triple (6x6x6 cube + grey ramp). */
+function rgbTo256(r: number, g: number, b: number): number {
+  if (r === g && g === b) {
+    if (r < 8) return 16;
+    if (r > 248) return 231;
+    return Math.round(((r - 8) / 247) * 24) + 232;
+  }
+  const q = (v: number): number => Math.round((v / 255) * 5);
+  return 16 + 36 * q(r) + 6 * q(g) + q(b);
+}
+
+export function detectColorMode(env: NodeJS.ProcessEnv = process.env): ColorMode {
+  if (env.NO_COLOR !== undefined && env.NO_COLOR !== "") return "none";
+  if (env.INFINITY_HARNESS_COLOR === "0" || env.INFINITY_HARNESS_COLOR === "none") return "none";
+  if (env.INFINITY_HARNESS_COLOR === "truecolor") return "truecolor";
+  if (env.INFINITY_HARNESS_COLOR === "256") return "ansi256";
+  if (env.FORCE_COLOR === "0") return "none";
+  const ct = env.COLORTERM ?? "";
+  if (ct.includes("truecolor") || ct.includes("24bit")) return "truecolor";
+  const term = env.TERM ?? "";
+  if (term === "dumb") return "none";
+  if (term.includes("256")) return "ansi256";
+  if (env.FORCE_COLOR) return "ansi256";
+  if (term) return "ansi256";
+  return "none";
+}
+
+export function createStyler(mode: ColorMode = detectColorMode()): Styler {
+  if (mode === "none") {
+    const id = (s: string): string => s;
+    return { mode, fg: (_r, s) => s, bold: id, dim: id, hex: (_h, s) => s };
+  }
+  const sgr = (open: string, s: string): string => ESC + "[" + open + "m" + s + ESC + "[0m";
+  const hex = (h: string, s: string): string => {
+    const [r, g, b] = hexToRgb(h);
+    return mode === "truecolor"
+      ? sgr("38;2;" + r + ";" + g + ";" + b, s)
+      : sgr("38;5;" + rgbTo256(r, g, b), s);
+  };
+  return {
+    mode,
+    hex,
+    fg: (role, s) => hex(PALETTE[role], s),
+    bold: (s) => sgr("1", s),
+    dim: (s) => sgr("2", s),
+  };
+}
+
+// -- Glyphs ------------------------------------------------------------------
+
+export type GlyphSet = {
+  pending: string;
+  inProgress: string;
+  complete: string;
+  blocked: string;
+  rework: string;
+  subPending: string;
+  subActive: string;
+  subDone: string;
+  barFull: string;
+  barEmpty: string;
+  arrow: string;
+  more: string;
+  branch: string;
+  phaseDone: string;
+  phaseCurrent: string;
+  phaseTodo: string;
+  rail: string;
+};
+
+export const UNICODE_GLYPHS: GlyphSet = {
+  pending: "○",
+  inProgress: "◐",
+  complete: "●",
+  blocked: "⚠",
+  rework: "↷",
+  subPending: "·",
+  subActive: "▸",
+  subDone: "✓",
+  barFull: "▰",
+  barEmpty: "▱",
+  arrow: "←",
+  more: "⋯",
+  branch: "▸",
+  phaseDone: "●",
+  phaseCurrent: "◉",
+  phaseTodo: "○",
+  rail: "─",
+};
+
+export const ASCII_GLYPHS: GlyphSet = {
+  pending: "o",
+  inProgress: "*",
+  complete: "x",
+  blocked: "!",
+  rework: "~",
+  subPending: ".",
+  subActive: ">",
+  subDone: "+",
+  barFull: "#",
+  barEmpty: "-",
+  arrow: "<-",
+  more: "...",
+  branch: ">",
+  phaseDone: "x",
+  phaseCurrent: "O",
+  phaseTodo: "o",
+  rail: "-",
+};
+
+export function detectGlyphs(env: NodeJS.ProcessEnv = process.env): GlyphSet {
+  if (env.INFINITY_HARNESS_ASCII === "1") return ASCII_GLYPHS;
+  const enc = (env.LC_ALL ?? env.LC_CTYPE ?? env.LANG ?? "").toLowerCase();
+  if (enc && !enc.includes("utf")) return ASCII_GLYPHS;
+  return UNICODE_GLYPHS;
+}

package/src/ui/widget.ts

@@ -0,0 +1,370 @@
+/**
+ * infinity-harness — the plan widget.
+ *
+ * This is what the human watches while the loop runs unattended for hours. It
+ * has to answer three questions in one glance, without scrolling:
+ *
+ *   Where are we?      the phase rail
+ *   How far along?     the progress meter
+ *   What is happening? the task window, centred on the active task
+ *
+ * Everything is derived from state on disk, so the widget is always truthful
+ * even if the agent's own narration has drifted.
+ */
+
+import type { FeatureList, Phase, TaskStatus } from "../core/types.ts";
+import { computeProgress, flattenTasks, type FlatTask } from "../core/featureList.ts";
+import { getPhaseOrder } from "../core/phases.ts";
+import {
+  createStyler,
+  detectGlyphs,
+  padEnd,
+  truncate,
+  width,
+  wrap,
+  type GlyphSet,
+  type Role,
+  type Styler,
+} from "./theme.ts";
+
+export const DEFAULT_WIDTH = 76;
+/** Task rows shown at once. Enough for context, short enough to stay glanceable. */
+export const TASK_WINDOW = 9;
+/** Completed rows kept above the active task so progress stays visible. */
+export const COMPLETED_CONTEXT = 3;
+
+export type WidgetState = {
+  list: FeatureList;
+  phase: Phase | null;
+  enabledPhases?: readonly string[] | null;
+  paused?: boolean;
+  gate?: { overall: boolean; failures: string[] } | null;
+  /** Shown in the header rule, e.g. "rev 42". */
+  revision?: number;
+  retries?: { task: number; max: number };
+};
+
+export type WidgetOptions = {
+  width?: number;
+  styler?: Styler;
+  glyphs?: GlyphSet;
+  /** Frame the widget in a box. Off when the host already draws a frame. */
+  boxed?: boolean;
+  /** Cap on task rows. Defaults to TASK_WINDOW. */
+  taskWindow?: number;
+};
+
+const STATUS_ROLE: Record<TaskStatus, Role> = {
+  pending: "pending",
+  in_progress: "active",
+  complete: "success",
+  blocked: "blocked",
+  rework: "rework",
+};
+
+export function statusGlyph(status: string, g: GlyphSet = detectGlyphs()): string {
+  switch (status) {
+    case "complete":
+    case "done":
+    case "closed":
+    case "passed":
+      return g.complete;
+    case "in_progress":
+    case "in-progress":
+    case "active":
+      return g.inProgress;
+    case "blocked":
+      return g.blocked;
+    case "rework":
+    case "waiting":
+      return g.rework;
+    default:
+      return g.pending;
+  }
+}
+
+function statusRole(status: string): Role {
+  return STATUS_ROLE[status as TaskStatus] ?? "pending";
+}
+
+/**
+ * Pick the slice of tasks to display: centred on the active task, biased so a
+ * few completed rows stay visible above it. Clamps at both ends so the window
+ * is always exactly `limit` rows when there are enough tasks.
+ */
+export function taskWindowBounds(
+  tasks: Array<{ status: string }>,
+  limit = TASK_WINDOW,
+  context = COMPLETED_CONTEXT,
+): { start: number; end: number } {
+  const total = tasks.length;
+  if (total <= limit) return { start: 0, end: total };
+
+  let active = tasks.findIndex((t) => t.status === "in_progress");
+  if (active === -1) active = tasks.findIndex((t) => t.status === "rework");
+  if (active === -1) active = tasks.findIndex((t) => t.status === "blocked");
+  if (active === -1) active = tasks.findIndex((t) => t.status === "pending");
+  if (active === -1) active = total - 1; // everything done: show the tail
+
+  if (active < limit - context) return { start: 0, end: limit };
+  if (active >= total - (limit - context)) return { start: total - limit, end: total };
+
+  const start = Math.max(0, Math.min(active - context, total - limit));
+  return { start, end: start + limit };
+}
+
+/** `▰▰▰▰▱▱▱▱ 62%` — a fixed-width meter that never reflows the line. */
+export function progressBar(percent: number, cells: number, g: GlyphSet, s: Styler): string {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const filled = Math.round((clamped / 100) * cells);
+  const bar =
+    s.fg("success", g.barFull.repeat(filled)) + s.fg("rule", g.barEmpty.repeat(Math.max(0, cells - filled)));
+  return bar + " " + s.bold(String(clamped).padStart(3) + "%");
+}
+
+/**
+ * `define ─ plan ─ ◉ BUILD ─ verify ─ review ─ ship`
+ *
+ * Collapses to just the current phase plus its neighbours when the terminal is
+ * too narrow to hold the whole pipeline.
+ */
+export function phaseRail(
+  current: Phase | null,
+  enabled: readonly string[] | null | undefined,
+  max: number,
+  g: GlyphSet,
+  s: Styler,
+): string {
+  const order = getPhaseOrder(enabled);
+  const idx = current ? order.indexOf(current) : -1;
+
+  const render = (phases: Phase[], elideLeft: boolean, elideRight: boolean): string => {
+    const parts = phases.map((p) => {
+      const i = order.indexOf(p);
+      if (p === current) return s.bold(s.fg("accent", g.phaseCurrent + " " + p.toUpperCase()));
+      if (idx >= 0 && i < idx) return s.fg("success", g.phaseDone + " " + p);
+      return s.fg("muted", g.phaseTodo + " " + p);
+    });
+    const joiner = s.fg("rule", " " + g.rail + " ");
+    const body = parts.join(joiner);
+    const lead = elideLeft ? s.fg("rule", g.more + " ") : "";
+    const tail = elideRight ? s.fg("rule", " " + g.more) : "";
+    return lead + body + tail;
+  };
+
+  const full = render(order, false, false);
+  if (width(full) <= max || idx === -1) return truncate(full, max);
+
+  // Narrow: keep the current phase and one neighbour each side.
+  const lo = Math.max(0, idx - 1);
+  const hi = Math.min(order.length, idx + 2);
+  const windowed = render(order.slice(lo, hi), lo > 0, hi < order.length);
+  return truncate(windowed, max);
+}
+
+function depLabel(
+  task: FlatTask,
+  indexByKey: Map<string, number>,
+  g: GlyphSet,
+  s: Styler,
+): string {
+  const deps = task.dependsOn ?? [];
+  if (deps.length === 0) return "";
+  const nums = deps.map((d) => {
+    const i = indexByKey.get(d);
+    return i === undefined ? d : "#" + i;
+  });
+  return s.fg("muted", g.arrow + " " + nums.join(", "));
+}
+
+/**
+ * Render the widget as terminal lines.
+ *
+ * Returns plain strings so the host can hand them straight to
+ * `ctx.ui.setWidget`. Colour is embedded as ANSI when the styler is colouring.
+ */
+export function renderWidget(state: WidgetState, options: WidgetOptions = {}): string[] {
+  const total = options.width ?? DEFAULT_WIDTH;
+  const s = options.styler ?? createStyler();
+  const g = options.glyphs ?? detectGlyphs();
+  const boxed = options.boxed ?? false;
+  const pad = boxed ? 2 : 0;
+  const inner = Math.max(24, total - pad * 2);
+  const limit = options.taskWindow ?? TASK_WINDOW;
+
+  const out: string[] = [];
+  const push = (line = ""): void => {
+    out.push(line);
+  };
+
+  const progress = computeProgress(state.list);
+  const tasks = flattenTasks(state.list);
+
+  // -- header ---------------------------------------------------------------
+  const brand = s.bold(s.fg("brand", "∞ INFINITY"));
+  const phaseTag = state.paused
+    ? s.fg("blocked", "PAUSED")
+    : state.phase
+      ? s.fg("accent", state.phase.toUpperCase())
+      : s.fg("muted", "NOT STARTED");
+  const revTag = state.revision === undefined ? "" : s.fg("muted", " rev " + state.revision);
+  const headLeft = brand;
+  const headRight = phaseTag + revTag;
+  const gapW = inner - width(headLeft) - width(headRight);
+  push(headLeft + (gapW > 1 ? s.fg("rule", " " + g.rail.repeat(gapW - 2) + " ") : " ") + headRight);
+
+  // -- goal -----------------------------------------------------------------
+  const goal = (state.list.goals ?? [])[0];
+  if (goal?.title) {
+    for (const line of wrap(goal.title, inner - 2)) {
+      push(s.fg("muted", g.branch + " ") + s.fg("text", line));
+    }
+  }
+
+  // -- phase rail -----------------------------------------------------------
+  push();
+  push(phaseRail(state.phase, state.enabledPhases, inner, g, s));
+
+  // -- progress -------------------------------------------------------------
+  const full =
+    s.fg("muted", progress.tasksDone + "/" + progress.tasksTotal + " tasks") +
+    s.fg("rule", " · ") +
+    s.fg("muted", progress.featuresDone + "/" + progress.featuresTotal + " features");
+  const compact = s.fg("muted", progress.tasksDone + "/" + progress.tasksTotal);
+
+  // The meter has a floor of 8 cells plus "  NNN%" (6 columns). Below that the
+  // long stat cannot fit, and padding it out would push the row past the
+  // frame — so the row degrades to the task count alone, then to no stat.
+  const METER_MIN = 8 + 6;
+  let stats = full;
+  if (inner - width(full) < METER_MIN) stats = compact;
+  if (inner - width(stats) < METER_MIN) stats = "";
+
+  const statsW = width(stats);
+  const barCells = Math.max(8, Math.min(24, inner - statsW - 8));
+  const bar = progressBar(progress.percent, barCells, g, s);
+  push();
+  const gap2 = inner - width(bar) - statsW;
+  push(truncate(bar + (gap2 > 0 ? " ".repeat(gap2) : " ") + stats, inner));
+
+  // -- alerts ---------------------------------------------------------------
+  const alerts: string[] = [];
+  if (progress.blocked > 0) alerts.push(s.fg("blocked", g.blocked + " " + progress.blocked + " blocked"));
+  if (progress.rework > 0) alerts.push(s.fg("rework", g.rework + " " + progress.rework + " rework"));
+  if (state.retries && state.retries.task > 0) {
+    const role: Role = state.retries.task >= state.retries.max ? "blocked" : "active";
+    alerts.push(s.fg(role, "retry " + state.retries.task + "/" + state.retries.max));
+  }
+  if (state.gate && !state.gate.overall) {
+    alerts.push(s.fg("blocked", "gate: " + state.gate.failures.slice(0, 3).join(", ")));
+  }
+  if (alerts.length) push(truncate(alerts.join(s.fg("rule", " · ")), inner));
+
+  // -- tasks ----------------------------------------------------------------
+  push();
+  if (tasks.length === 0) {
+    push(s.fg("muted", "  no tasks planned yet"));
+    return frame(out, total, boxed, s, g);
+  }
+
+  const indexByKey = new Map<string, number>();
+  for (const t of tasks) {
+    indexByKey.set(t.compositeKey, t.index);
+    indexByKey.set(t.id, t.index);
+    if (t.key) indexByKey.set(t.key, t.index);
+  }
+
+  const bounds = taskWindowBounds(tasks, limit);
+  const visible = tasks.slice(bounds.start, bounds.end);
+  const hiddenBefore = bounds.start;
+  const hiddenAfter = tasks.length - bounds.end;
+
+  if (hiddenBefore > 0) {
+    push(s.fg("rule", "  " + g.more + " " + hiddenBefore + " earlier"));
+  }
+
+  let lastFeature: string | null = null;
+  const numW = String(tasks.length).length;
+
+  for (const t of visible) {
+    if (t.featureId !== lastFeature) {
+      lastFeature = t.featureId;
+      const label = t.featureId + s.fg("rule", " · ") + t.featureName;
+      push(s.fg("muted", g.branch + " ") + truncate(label, inner - 2));
+    }
+
+    const role = statusRole(t.status);
+    const icon = s.fg(role, statusGlyph(t.status, g));
+    const num = s.fg("rule", String(t.index).padStart(numW));
+    const dep = depLabel(t, indexByKey, g, s);
+    const prefix = "  " + icon + " " + num + " ";
+    const prefixW = width(prefix);
+    const depW = dep ? width(dep) + 1 : 0;
+    const titleMax = Math.max(8, inner - prefixW - depW);
+
+    const isActive = t.status === "in_progress" || t.status === "rework";
+    const titleLines = wrap(t.description || t.compositeKey, titleMax);
+    const head = isActive ? s.bold(s.fg("text", titleLines[0]!)) : s.fg(role === "success" ? "muted" : "text", titleLines[0]!);
+
+    let row = prefix + head;
+    if (dep) {
+      const rowW = width(row);
+      const spacer = Math.max(1, inner - rowW - width(dep));
+      row += " ".repeat(spacer) + dep;
+    }
+    push(row);
+    for (const extra of titleLines.slice(1)) {
+      push(" ".repeat(prefixW) + s.fg("muted", extra));
+    }
+
+    // Subtasks only for the task actually being worked — otherwise the window
+    // fills with detail nobody is acting on.
+    if (isActive) {
+      for (const sub of t.subtasks ?? []) {
+        const sIcon =
+          sub.status === "complete"
+            ? s.fg("success", g.subDone)
+            : sub.status === "in_progress"
+              ? s.fg("active", g.subActive)
+              : s.fg("rule", g.subPending);
+        const sTitle = truncate(sub.title, inner - prefixW - 4);
+        push(" ".repeat(prefixW) + sIcon + " " + s.fg("muted", sTitle));
+      }
+    }
+  }
+
+  if (hiddenAfter > 0) {
+    push(s.fg("rule", "  " + g.more + " " + hiddenAfter + " more"));
+  }
+
+  return frame(out, total, boxed, s, g);
+}
+
+function frame(lines: string[], total: number, boxed: boolean, s: Styler, g: GlyphSet): string[] {
+  // Unboxed still has to honour the requested width: the caller sized the
+  // widget to a terminal, and a row that overruns wraps and breaks the layout.
+  if (!boxed) return lines.map((l) => truncate(l, total));
+  const inner = total - 4;
+  const top = s.fg("rule", "╭" + "─".repeat(total - 2) + "╮");
+  const bottom = s.fg("rule", "╰" + "─".repeat(total - 2) + "╯");
+  const side = s.fg("rule", "│");
+  const body = lines.map((l) => side + " " + padEnd(truncate(l, inner), inner) + " " + side);
+  return [top, ...body, bottom];
+}
+
+/** Compact one-liner for the status bar: `BUILD 13/21 ◐`. */
+export function renderStatusLine(state: WidgetState, g: GlyphSet = detectGlyphs()): string {
+  const p = computeProgress(state.list);
+  if (state.paused) return "paused";
+  if (p.tasksTotal === 0) return state.phase ?? "idle";
+  const mark =
+    p.blocked > 0
+      ? g.blocked
+      : p.inProgress > 0
+        ? g.inProgress
+        : p.tasksDone === p.tasksTotal
+          ? g.complete
+          : g.pending;
+  const phase = state.phase ? state.phase + " " : "";
+  return phase + p.tasksDone + "/" + p.tasksTotal + " " + mark;
+}