@opengsd/gsd-pi 1.2.0-dev.fbdca60b → 1.3.0-dev.65546769

package/src/resources/extensions/gsd/auto-dashboard.ts

@@ -11,6 +11,7 @@
 import type {
   ExtensionContext,
   ExtensionCommandContext,
+  GsdProgressState,
   ReadonlyFooterDataProvider,
   Theme,
   ThemeColor,
@@ -30,7 +31,7 @@ import { execFileSync } from "node:child_process";
 import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
 import { makeUI } from "../shared/tui.js";
 import { GLYPH, INDENT } from "../shared/mod.js";
-import { padRightVisible, renderPanel, renderProgressBar, rightAlign, wrapVisibleText } from "./tui/render-kit.js";
+import { padRightVisible, renderPlainOutcome, renderProgressBar, rightAlign, wrapVisibleText } from "./tui/render-kit.js";
 import { computeProgressScore } from "./progress-score.js";
 import {
   getGlobalGSDPreferencesPath,
@@ -754,341 +755,88 @@ export function updateProgressWidget(
     updateSliceProgressCache(accessors.getBasePath(), mid.id, slice?.id);
   }
 
-  ctx.ui.setWidget("gsd-progress", (tui, theme) => {
-    let spinnerIndex = 0;
-    let cachedLines: string[] | undefined;
-    let cachedWidth: number | undefined;
-    let cachedRuntimeRecord: AutoUnitRuntimeRecord | null = null;
-
-    const refreshRuntimeRecord = (): void => {
-      try {
-        cachedRuntimeRecord = readUnitRuntimeRecord(accessors.getBasePath(), unitType, unitId);
-      } catch {
-        cachedRuntimeRecord = null;
-      }
-    };
-
-    refreshRuntimeRecord();
-
-    const spinnerTimer = setInterval(() => {
-      spinnerIndex = (spinnerIndex + 1) % ACTIVE_SPINNER_FRAMES.length;
-      cachedLines = undefined;
-      tui.requestRender();
-    }, 200);
-    spinnerTimer.unref?.();
-
-    // Refresh progress cache from disk every 15s so the widget reflects
-    // task/slice completion mid-unit. Without this, the progress bar only
-    // updates at dispatch time, appearing frozen during long-running units.
-    // 15s (vs 5s) reduces synchronous file I/O on the hot path.
-    const progressRefreshTimer = setInterval(() => {
-      try {
-        if (mid) {
-          updateSliceProgressCache(accessors.getBasePath(), mid.id, slice?.id);
-        }
-        refreshRuntimeRecord();
-        cachedLines = undefined;
-      } catch (err) { /* non-fatal */
-        logWarning("dashboard", `DB status update failed: ${err instanceof Error ? err.message : String(err)}`);
-      }
-    }, 15_000);
-    progressRefreshTimer.unref?.();
-
-    return {
-      render(width: number): string[] {
-        if (cachedLines && cachedWidth === width) return cachedLines;
-
-        // While newSession() is in-flight, session state is mid-mutation.
-        // Accessing cmdCtx.sessionManager or cmdCtx.getContextUsage() can
-        // block the render loop and freeze the TUI. Return the last cached
-        // frame (or an empty frame on first render) until the switch settles.
-        if (accessors.isSessionSwitching()) {
-          return cachedLines ?? [];
-        }
-
-        const ui = makeUI(theme, width);
-        const lines: string[] = [];
-        const pad = INDENT.base;
-
-        // ── Line 1: Top bar ───────────────────────────────────────────────
-        lines.push(...ui.bar());
-
-        const spinner = theme.fg("accent", ACTIVE_SPINNER_FRAMES[spinnerIndex]);
-        const elapsed = formatAutoElapsed(accessors.getAutoStartTime());
-        const modeTag = accessors.isStepMode() ? "NEXT" : "AUTO";
-
-        // Health indicator in header
-        const score = computeProgressScore();
-        const runtimeSignal = formatRuntimeHealthSignal(cachedRuntimeRecord);
-        const healthLevel = runtimeSignal?.level ?? score.level;
-        const healthSummary = runtimeSignal?.summary ?? score.summary;
-        const healthColor = healthLevel === "green" ? "success"
-          : healthLevel === "yellow" ? "warning"
-            : "error";
-        const healthIcon = healthLevel === "green" ? GLYPH.statusActive
-          : healthLevel === "yellow" ? "!"
-            : "x";
-        const activeState = runtimeSignal?.state === "waiting" ? "waiting" : "running";
-        const stateColor = runtimeSignal?.state === "waiting" ? "warning" : "success";
-        const healthParts: string[] = [];
-        if (runtimeSignal?.summary) {
-          healthParts.push(theme.fg(healthColor, healthSummary));
-        } else if (healthLevel !== "green") {
-          healthParts.push(`${theme.fg(healthColor, healthIcon)} ${theme.fg(healthColor, healthSummary)}`);
-        }
-
-        const headerLeft = [
-          `${pad}${spinner} ${theme.fg("accent", theme.bold("GSD"))}`,
-          theme.fg("success", modeTag),
-          theme.fg(stateColor, activeState),
-          ...healthParts,
-        ].join(` ${theme.fg("dim", "·")} `);
-
-        // ETA in header right, after elapsed
-        const eta = estimateTimeRemaining();
-        const etaShort = eta ? eta.replace(" remaining", " left") : null;
-        const headerRight = elapsed
-          ? (etaShort
-            ? `${theme.fg("dim", elapsed)} ${theme.fg("dim", "·")} ${theme.fg("dim", etaShort)}`
-            : theme.fg("dim", elapsed))
-          : "";
-        lines.push(rightAlign(headerLeft, headerRight, width));
-
-        // Show health signal details when degraded (yellow/red)
-        if (runtimeSignal?.detail && widgetMode !== "min") {
-          lines.push(`${pad}  ${theme.fg("dim", runtimeSignal.detail)}`);
-        } else if (score.level !== "green" && score.signals.length > 0 && widgetMode !== "min") {
-          // Show up to 3 most relevant signals in compact form
-          const topSignals = score.signals
-            .filter(s => s.kind === "negative")
-            .slice(0, 3);
-          if (topSignals.length > 0) {
-            const signalStr = topSignals
-              .map(s => theme.fg("dim", s.label))
-              .join(theme.fg("dim", " · "));
-            lines.push(`${pad}  ${signalStr}`);
-          }
-        }
-
-        // ── Mode: off — return empty ──────────────────────────────────
-        if (widgetMode === "off") {
-          cachedLines = [];
-          cachedWidth = width;
-          return [];
-        }
-
-        // ── Mode: min — header line only ──────────────────────────────
-        if (widgetMode === "min") {
-          lines.push(...ui.bar());
-          cachedLines = lines;
-          cachedWidth = width;
-          return lines;
-        }
-
-        // ── Mode: small — dense horizontal grid ───────────────────────
-        if (widgetMode === "small") {
-          lines.length = 0;
-          lines.push(...ui.bar());
-
-          const roadmapSlices = mid ? getRoadmapSlicesSync() : null;
-          const unitLabel = unitId || [mid?.id, slice?.id, task?.id].filter(Boolean).join("/");
-          const statusParts = [
-            spinner,
-            theme.fg("success", modeTag),
-            theme.fg(stateColor, activeState),
-          ];
-          if (runtimeSignal?.summary) {
-            statusParts.push(theme.fg(healthColor, healthSummary));
-          } else if (healthLevel !== "green") {
-            statusParts.push(`${theme.fg(healthColor, healthIcon)} ${theme.fg(healthColor, healthSummary)}`);
-          }
-
-          const timeValue = [elapsed, etaShort].filter(Boolean).join(" · ") || "--";
-          const rowOne = widgetGridColumns(theme, width, [
-            `${widgetGridLabel(theme, "status", "border")} ${statusParts.join(" ")}`,
-            `${widgetGridLabel(theme, "unit")} ${theme.fg("text", unitLabel || "--")}`,
-            `${widgetGridLabel(theme, "spend", "border")} ${theme.fg("dim", formatSmallWidgetSpend())}`,
-            `${widgetGridLabel(theme, "time")} ${theme.fg("dim", timeValue)}`,
-          ]);
-
-          const target = task
-            ? `${task.id}: ${task.title}`
-            : slice
-              ? `${slice.id}: ${slice.title}`
-              : unitId;
-
-          let taskValue = task?.id ?? "--";
-          let sliceValue = slice?.id ?? "--";
-          if (shouldRenderRoadmapProgress(roadmapSlices)) {
-            const { done, total, activeSliceTasks } = roadmapSlices;
-            const barWidth = Math.max(4, Math.min(14, Math.floor(width * 0.12)));
-            const bar = renderProgressBar(theme, done, total, barWidth);
-            sliceValue = `${bar} ${theme.fg("text", `${done}/${total}`)}`;
-            if (activeSliceTasks && activeSliceTasks.total > 0) {
-              const taskNum = isHook
-                ? Math.max(activeSliceTasks.done, 1)
-                : Math.min(activeSliceTasks.done + 1, activeSliceTasks.total);
-              taskValue = `${theme.fg("accent", `${taskNum}`)}${theme.fg("dim", `/${activeSliceTasks.total}`)}`;
-            }
-          }
+  installGsdProgressStrip(ctx, accessors, unitType, unitId, mid, slice, task, isHook, verb);
+}
 
-          const rowTwo = widgetGridColumns(theme, width, [
-            `${widgetGridLabel(theme, "phase", "border")} ${theme.fg("dim", unitType)}`,
-            `${widgetGridLabel(theme, "work")} ${theme.fg("text", target || "--")}`,
-            `${widgetGridLabel(theme, "task", "border")} ${taskValue}`,
-            `${widgetGridLabel(theme, "slice")} ${sliceValue}`,
-          ]);
-
-          lines.push(rowOne);
-          lines.push(rowTwo);
-          lines.push(...ui.bar());
-          cachedLines = lines;
-          cachedWidth = width;
-          return lines;
-        }
+function buildCompletionRollupLines(
+  theme: Theme,
+  snapshot: CompletionDashboardSnapshot,
+  width: number,
+): { lines: string[]; footerCommands?: string } {
+  const innerWidth = Math.max(8, width - 2);
+  const lines: string[] = [];
+
+  const add = (line: string): void => {
+    if (!line) return;
+    for (const wrapped of wrapVisibleText(line, innerWidth).slice(0, 12 - lines.length)) {
+      lines.push(wrapped);
+    }
+  };
 
-        // ── Mode: full — complete two-column layout ───────────────────
-        lines.push("");
+  if (snapshot.milestoneTitle) {
+    add(theme.fg("text", snapshot.milestoneTitle));
+  }
 
-        // Context section: milestone + slice. Footer owns model/cost/context.
-        const hasContext = !!(mid || (slice && unitType !== "research-milestone" && unitType !== "plan-milestone"));
-        if (mid) {
-          lines.push(truncateToWidth(`${pad}${theme.fg("dim", mid.title)}`, width, "…"));
-        }
-        if (slice && unitType !== "research-milestone" && unitType !== "plan-milestone") {
-          lines.push(truncateToWidth(
-            `${pad}${theme.fg("text", theme.bold(`${slice.id}: ${slice.title}`))}`,
-            width, "…",
-          ));
-        }
-        if (hasContext) lines.push("");
-
-        const target = task ? `${task.id}: ${task.title}` : unitId;
-        const actionLeft = `${pad}${theme.fg("accent", "▸")} ${theme.fg("accent", verb)}  ${theme.fg("text", target)}`;
-        const tierTag = tierBadge ? theme.fg("dim", `[${tierBadge}] `) : "";
-        const phaseBadge = `${tierTag}${theme.fg("dim", phaseLabel)}`;
-        lines.push(rightAlign(actionLeft, phaseBadge, width));
-
-        lines.push("");
-
-        // Two-column body
-        const minTwoColWidth = 76;
-        const roadmapSlices = mid ? getRoadmapSlicesSync() : null;
-        const taskDetailsCol = roadmapSlices?.taskDetails ?? null;
-        const useTwoCol = width >= minTwoColWidth && taskDetailsCol !== null && taskDetailsCol.length > 0;
-        const leftColWidth = useTwoCol
-          ? Math.floor(width * (width >= 100 ? 0.45 : 0.50))
-          : width;
-
-        const leftLines: string[] = [];
-
-        if (shouldRenderRoadmapProgress(roadmapSlices)) {
-          const { done, total, activeSliceTasks } = roadmapSlices;
-          const barWidth = Math.max(6, Math.min(18, Math.floor(leftColWidth * 0.4)));
-          const bar = renderProgressBar(theme, done, total, barWidth);
-
-          let meta = `${theme.fg("text", `${done}`)}${theme.fg("dim", `/${total} slices`)}`;
-          if (activeSliceTasks && activeSliceTasks.total > 0) {
-            const taskNum = isHook
-              ? Math.max(activeSliceTasks.done, 1)
-              : Math.min(activeSliceTasks.done + 1, activeSliceTasks.total);
-            meta += `${theme.fg("dim", " · task ")}${theme.fg("accent", `${taskNum}`)}${theme.fg("dim", `/${activeSliceTasks.total}`)}`;
-          }
-          leftLines.push(`${pad}${bar} ${meta}`);
-        }
+  const oneLiner = normalizeRollupText(snapshot.oneLiner);
+  if (oneLiner) {
+    add(`${theme.fg("accent", "Outcome")} ${theme.fg("text", oneLiner)}`);
+  }
 
-        // Build right column: task checklist
-        const rightLines: string[] = [];
-        const maxVisibleTasks = 8;
+  const changed = [
+    ...(snapshot.successCriteriaResults ? [snapshot.successCriteriaResults] : []),
+    ...(snapshot.requirementOutcomes ? [snapshot.requirementOutcomes] : []),
+    ...(snapshot.keyDecisions ?? []),
+  ].map(normalizeRollupText).filter((v): v is string => !!v).slice(0, 4);
+  if (changed.length > 0) {
+    add(theme.fg("accent", "What changed"));
+    for (const item of changed) add(`  - ${theme.fg("text", item)}`);
+  }
 
-        // Max visible chars for task title text (before ANSI theming)
-        const maxTaskTitleLen = 45;
-        function truncTitle(s: string): string {
-          return s.length > maxTaskTitleLen ? s.slice(0, maxTaskTitleLen - 1) + "…" : s;
-        }
+  const verification = [
+    snapshot.definitionOfDoneResults,
+    snapshot.deviations ? `Deviations: ${snapshot.deviations}` : null,
+    snapshot.followUps ? `Follow-ups: ${snapshot.followUps}` : null,
+  ].map(normalizeRollupText).filter((v): v is string => !!v);
+  if (verification.length > 0 || (snapshot.keyFiles?.length ?? 0) > 0) {
+    add(theme.fg("accent", "Verification"));
+    for (const item of verification.slice(0, 3)) add(`  - ${theme.fg("text", item)}`);
+    const files = (snapshot.keyFiles ?? []).map(normalizeRollupText).filter((v): v is string => !!v).slice(0, 4);
+    if (files.length > 0) {
+      add(`  ${theme.fg("accent", "Files:")} ${theme.fg("text", files.join("; "))}`);
+    }
+  }
 
-        function formatTaskLine(t: { id: string; title: string; done: boolean }, isCurrent: boolean): string {
-          const glyph = t.done
-            ? theme.fg("success", "*")
-            : isCurrent
-              ? theme.fg("accent", ">")
-              : theme.fg("dim", ".");
-          const id = isCurrent
-            ? theme.fg("accent", t.id)
-            : t.done
-              ? theme.fg("muted", t.id)
-              : theme.fg("dim", t.id);
-          const short = truncTitle(t.title);
-          const title = isCurrent
-            ? theme.fg("text", short)
-            : t.done
-              ? theme.fg("muted", short)
-              : theme.fg("text", short);
-          return `${glyph} ${id}: ${title}`;
-        }
+  const lessons = (snapshot.lessonsLearned ?? []).map(normalizeRollupText).filter((v): v is string => !!v).slice(0, 2);
+  if (lessons.length > 0) {
+    add(`${theme.fg("accent", "Lessons:")} ${theme.fg("text", lessons.join("; "))}`);
+  }
 
-        if (useTwoCol && taskDetailsCol) {
-          for (const t of taskDetailsCol.slice(0, maxVisibleTasks)) {
-            rightLines.push(formatTaskLine(t, !!(task && t.id === task.id)));
-          }
-          if (taskDetailsCol.length > maxVisibleTasks) {
-            rightLines.push(theme.fg("dim", `  +${taskDetailsCol.length - maxVisibleTasks} more`));
-          }
-        } else if (!useTwoCol && taskDetailsCol && taskDetailsCol.length > 0) {
-          for (const t of taskDetailsCol.slice(0, maxVisibleTasks)) {
-            leftLines.push(`${pad}${formatTaskLine(t, !!(task && t.id === task.id))}`);
-          }
-        }
+  const nextAction = snapshot.allMilestonesComplete
+    ? snapshot.unmappedActiveRequirements && snapshot.unmappedActiveRequirements > 0
+      ? `Review ${snapshot.unmappedActiveRequirements} unmapped active requirement${snapshot.unmappedActiveRequirements === 1 ? "" : "s"}, then start a new milestone when ready.`
+      : "Review the roll-up, then start a new milestone when ready."
+    : "Review the roll-up, inspect status, or continue to the next milestone.";
+  add(`${theme.fg("success", "Next")} ${theme.fg("text", nextAction)}`);
+
+  if ((snapshot.requirementsBacklogPreview?.length ?? 0) > 0) {
+    add(theme.fg("accent", "Requirements backlog"));
+    for (const line of snapshot.requirementsBacklogPreview ?? []) {
+      add(`  ${theme.fg("text", line)}`);
+    }
+  }
 
-        // Compose columns
-        if (useTwoCol) {
-          const maxRows = Math.max(leftLines.length, rightLines.length);
-          if (maxRows > 0) {
-            lines.push("");
-            for (let i = 0; i < maxRows; i++) {
-              const left = padRightVisible(truncateToWidth(leftLines[i] ?? "", leftColWidth, "…"), leftColWidth);
-              const right = rightLines[i] ?? "";
-              lines.push(`${left}${right}`);
-            }
-          }
-        } else {
-          if (leftLines.length > 0) {
-            lines.push("");
-            for (const l of leftLines) lines.push(truncateToWidth(l, width, "…"));
-          }
-        }
+  const commands = snapshot.allMilestonesComplete
+    ? snapshot.unmappedActiveRequirements && snapshot.unmappedActiveRequirements > 0
+      ? ["/gsd to review requirements backlog", "/gsd status for overview", "/gsd visualize to inspect", "/gsd start for new work"]
+      : ["/gsd status for overview", "/gsd visualize to inspect", "/gsd notifications for history", "/gsd start for new work"]
+    : ["/gsd status for overview", "/gsd visualize to inspect", "/gsd notifications for history", "/gsd auto for next milestone"];
+  const footerCommands = theme.fg("dim", commands.join("  ·  "));
 
-        // ── Auto controls. Footer owns cwd/branch/model/cost/context. ───
-        lines.push("");
-        // Step-mode guidance — shown above keyboard hints when auto is paused
-        if (accessors.isStepMode()) {
-          lines.push(`${pad}${theme.fg("accent", "→")} ${theme.fg("dim", "/gsd next to advance one step  ·  /gsd status for overview")}`);
-        }
+  if (snapshot.reason) {
+    add(theme.fg("dim", snapshot.reason));
+  }
 
-        // Hints line
-        const hintParts: string[] = [];
-        hintParts.push("esc pause");
-        hintParts.push(`${formattedShortcutPair("dashboard")} dashboard`);
-        hintParts.push(`${formattedShortcutPair("parallel")} parallel`);
-        const hintStr = theme.fg("dim", hintParts.join(" | "));
-        lines.push(rightAlign("", hintStr, width));
-
-        lines.push(...ui.bar());
-
-        cachedLines = lines;
-        cachedWidth = width;
-        return lines;
-      },
-      invalidate() {
-        cachedLines = undefined;
-        cachedWidth = undefined;
-      },
-      dispose() {
-        clearInterval(spinnerTimer);
-        if (progressRefreshTimer) clearInterval(progressRefreshTimer);
-      },
-    };
-  });
+  return { lines, footerCommands };
 }
 
 export function setCompletionProgressWidget(
@@ -1096,8 +844,11 @@ export function setCompletionProgressWidget(
   snapshot: CompletionDashboardSnapshot,
 ): void {
   if (!ctx.hasUI) return;
-  const widgetKey = "gsd-progress";
   clearAutoOutcomeWidget(ctx);
+  // Clear the structured GSD progress strip so it does not linger behind
+  // the completion widget (the two use separate display channels).
+  ctx.ui?.setGsdProgress?.(undefined);
+  ctx.ui.setWidget("gsd-progress", undefined);
 
   if (typeof ctx.ui?.setHeader === "function") {
     ctx.ui.setHeader(() => ({
@@ -1109,117 +860,20 @@ export function setCompletionProgressWidget(
     ctx.ui.setStatus("gsd-step", undefined);
   }
 
-  ctx.ui.setWidget(widgetKey, (_tui, theme) => ({
+  ctx.ui.setWidget("gsd-outcome", (_tui, theme) => ({
     render(width: number): string[] {
-      const ui = makeUI(theme, width);
-      const pad = INDENT.base;
-      const lines: string[] = [];
-      const contentWidth = Math.max(20, width - visibleWidth(pad));
-      const add = (line = ""): void => {
-        lines.push(line ? truncateToWidth(`${pad}${line}`, width, "…") : "");
-      };
-      const addSection = (label: string, value: string | null | undefined, indent = ""): void => {
-        const clean = normalizeRollupText(value);
-        if (!clean) return;
-        add(`${indent}${theme.fg("accent", label)} ${theme.fg("text", truncateToWidth(clean, contentWidth - indent.length - label.length - 1, "…"))}`);
-      };
-      const addList = (label: string, values: string[] | undefined, limit: number, indent = ""): void => {
-        const clean = (values ?? []).map(normalizeRollupText).filter((v): v is string => !!v);
-        if (clean.length === 0) return;
-        const shown = clean.slice(0, limit);
-        const more = clean.length > shown.length ? ` (+${clean.length - shown.length} more)` : "";
-        add(`${indent}${theme.fg("accent", label)} ${theme.fg("text", truncateToWidth(shown.join("; ") + more, contentWidth - indent.length - label.length - 1, "…"))}`);
-      };
-
-      lines.push(...ui.bar());
-
       const elapsed = formatAutoElapsed(snapshot.startedAt);
       const heading = snapshot.allMilestonesComplete
         ? "All milestones complete"
         : snapshot.milestoneId
           ? `Milestone ${snapshot.milestoneId} roll-up`
           : "Milestone roll-up";
-      lines.push(rightAlign(`${pad}${theme.fg("accent", theme.bold(heading))}`, elapsed ? theme.fg("dim", elapsed) : "", width));
-
-      if (snapshot.milestoneTitle) {
-        add(theme.fg("text", snapshot.milestoneTitle));
-      }
-
-      lines.push("");
-      add(theme.fg("accent", "Outcome"));
-      addSection("", snapshot.oneLiner, "  ");
-
-      const changed = [
-        ...(snapshot.successCriteriaResults ? [snapshot.successCriteriaResults] : []),
-        ...(snapshot.requirementOutcomes ? [snapshot.requirementOutcomes] : []),
-        ...(snapshot.keyDecisions ?? []),
-      ].map(normalizeRollupText).filter((v): v is string => !!v).slice(0, 4);
-      if (changed.length > 0) {
-        lines.push("");
-        add(theme.fg("accent", "What changed"));
-        for (const item of changed) add(`  - ${theme.fg("text", item)}`);
-      }
-
-      const verification = [
-        snapshot.definitionOfDoneResults,
-        snapshot.deviations ? `Deviations: ${snapshot.deviations}` : null,
-        snapshot.followUps ? `Follow-ups: ${snapshot.followUps}` : null,
-      ].map(normalizeRollupText).filter((v): v is string => !!v);
-      if (verification.length > 0 || (snapshot.keyFiles?.length ?? 0) > 0) {
-        lines.push("");
-        add(theme.fg("accent", "Verification"));
-        for (const item of verification.slice(0, 3)) add(`  - ${theme.fg("text", item)}`);
-        addList("Files:", snapshot.keyFiles, 4, "  ");
-      }
-
-      if ((snapshot.lessonsLearned?.length ?? 0) > 0) {
-        lines.push("");
-        addList("Lessons:", snapshot.lessonsLearned, 2);
-      }
-
-      const hasSliceTotals = typeof snapshot.completedSlices === "number" && typeof snapshot.totalSlices === "number" && snapshot.totalSlices > 0;
-
-      lines.push("");
-      const stats: string[] = [];
-      if (hasSliceTotals) stats.push(theme.fg("success", `${snapshot.completedSlices}/${snapshot.totalSlices} slices`));
-      if (snapshot.unitCount > 0) stats.push(theme.fg("dim", `${snapshot.unitCount} units`));
-      if (snapshot.totalTokens > 0) stats.push(theme.fg("dim", `${formatWidgetTokens(snapshot.totalTokens)} tokens`));
-      if (snapshot.totalCost > 0) stats.push(theme.fg("warning", `$${snapshot.totalCost.toFixed(2)}`));
-      if (typeof snapshot.cacheHitRate === "number") {
-        const hitColor = snapshot.cacheHitRate >= 70 ? "success" : snapshot.cacheHitRate >= 40 ? "warning" : "error";
-        stats.push(theme.fg(hitColor, `${Math.round(snapshot.cacheHitRate)}% cache hit`));
-      }
-      if (stats.length > 0) {
-        add(`${theme.fg("accent", "Run totals")} ${stats.join(theme.fg("dim", " · "))}`);
-      }
-
-      lines.push("");
-      const nextAction = snapshot.allMilestonesComplete
-        ? snapshot.unmappedActiveRequirements && snapshot.unmappedActiveRequirements > 0
-          ? `Review ${snapshot.unmappedActiveRequirements} unmapped active requirement${snapshot.unmappedActiveRequirements === 1 ? "" : "s"}, then start a new milestone when ready.`
-          : "Review the roll-up, then start a new milestone when ready."
-        : "Review the roll-up, inspect status, or continue to the next milestone.";
-      const commands = snapshot.allMilestonesComplete
-        ? snapshot.unmappedActiveRequirements && snapshot.unmappedActiveRequirements > 0
-          ? ["/gsd to review requirements backlog", "/gsd status for overview", "/gsd visualize to inspect", "/gsd start for new work"]
-          : ["/gsd status for overview", "/gsd visualize to inspect", "/gsd notifications for history", "/gsd start for new work"]
-        : ["/gsd status for overview", "/gsd visualize to inspect", "/gsd notifications for history", "/gsd auto for next milestone"];
-      add(`${theme.fg("success", "Next")} ${theme.fg("text", nextAction)}`);
-      if ((snapshot.requirementsBacklogPreview?.length ?? 0) > 0) {
-        lines.push("");
-        add(theme.fg("accent", "Requirements backlog"));
-        for (const line of snapshot.requirementsBacklogPreview ?? []) {
-          add(`  ${theme.fg("text", line)}`);
-        }
-      }
-      add(theme.fg("dim", commands.join("  ·  ")));
-
-      const location = snapshot.basePath ? theme.fg("dim", snapshot.basePath) : "";
-      const reason = theme.fg("dim", snapshot.reason);
-      lines.push(rightAlign(`${pad}${truncateToWidth(location, Math.max(0, width - 32), "…")}`, reason, width));
-      lines.push(...ui.bar());
-
-      return lines;
+      const statusLine = `${theme.fg("success", "✓")} ${theme.fg("text", heading)}`;
+      const { lines, footerCommands } = buildCompletionRollupLines(theme, snapshot, width);
+      return renderPlainOutcome(theme, width, statusLine, lines, {
+        headerRight: elapsed ? theme.fg("dim", elapsed) : undefined,
+        footerRight: footerCommands,
+      });
     },
     invalidate(): void {},
     dispose(): void {},
@@ -1231,6 +885,8 @@ export function setAutoOutcomeWidget(
   snapshot: AutoOutcomeSurfaceSnapshot,
 ): void {
   if (!ctx.hasUI) return;
+  ctx.ui?.setGsdProgress?.(undefined);
+  ctx.ui.setWidget("gsd-progress", undefined);
 
   ctx.ui.setWidget("gsd-outcome", (_tui, theme) => ({
     render(width: number): string[] {
@@ -1244,40 +900,57 @@ export function setAutoOutcomeWidget(
           : snapshot.status === "blocked" ? "!"
             : snapshot.status === "paused" ? "||"
               : "●";
-      // renderPanel indents body lines by 2; mirror that for wrap width.
-      const innerWidth = Math.max(8, width - 2);
-      const maxLines = 7;
-      const lines: string[] = [];
       const elapsed = snapshot.startedAt ? formatAutoElapsed(snapshot.startedAt) : "";
-      const heading = `${theme.fg(color, icon)} ${theme.fg("accent", theme.bold("GSD"))} ${theme.fg("text", snapshot.title)}`;
-      // Elapsed rides inline after the title on the header rule.
-      const title = elapsed ? `${heading}  ${theme.fg("dim", elapsed)}` : heading;
+      const statusLine = `${theme.fg(color, icon)} ${theme.fg("text", snapshot.title)}`;
       const commands = snapshot.commands?.filter(Boolean) ?? [];
-      const commandLine = commands.length > 0 ? theme.fg("dim", commands.join("  ·  ")) : null;
-
-      const addWrapped = (text: string, prefix = ""): void => {
-        const reserve = commandLine ? 1 : 0;
-        const remaining = Math.max(0, maxLines - reserve - lines.length);
-        if (remaining === 0) return;
-        const available = Math.max(8, innerWidth - visibleWidth(prefix));
-        for (const [idx, line] of wrapVisibleText(text, available).slice(0, remaining).entries()) {
-          lines.push(`${idx === 0 ? prefix : " ".repeat(visibleWidth(prefix))}${line}`);
-        }
+      const commandLine = commands.length > 0 ? theme.fg("dim", commands.join("  ·  ")) : undefined;
+
+      const innerWidth = Math.max(8, width);
+      const maxLines = 7;
+      const splitRows: Array<{ left: string; right?: string }> = [];
+      let commandsPlaced = false;
+
+      const pushLeft = (left: string): void => {
+        if (splitRows.length >= maxLines - (commandLine ? 1 : 0)) return;
+        splitRows.push({ left });
       };
 
       if (snapshot.detail) {
-        addWrapped(snapshot.detail, `${theme.fg("dim", "Reason")} `);
+        for (const line of wrapVisibleText(snapshot.detail, innerWidth).slice(0, maxLines)) {
+          pushLeft(theme.fg("text", line));
+        }
       }
+
       if (snapshot.unitLabel) {
-        addWrapped(snapshot.unitLabel, `${theme.fg("dim", "Last")}   `);
+        const lastLeft = theme.fg("dim", "Last · ") + theme.fg("text", snapshot.unitLabel);
+        if (
+          commandLine &&
+          visibleWidth(lastLeft) + visibleWidth(commandLine) + 2 <= innerWidth &&
+          splitRows.length < maxLines
+        ) {
+          splitRows.push({ left: lastLeft, right: commandLine });
+          commandsPlaced = true;
+        } else {
+          pushLeft(lastLeft);
+        }
       }
-      addWrapped(snapshot.nextAction, `${theme.fg("success", "Next")}   `);
 
-      if (commandLine && lines.length < maxLines) {
-        lines.push(commandLine);
+      const nextPrefix = theme.fg("success", "Next · ");
+      const nextPrefixWidth = visibleWidth(nextPrefix);
+      for (const [idx, line] of wrapVisibleText(
+        snapshot.nextAction,
+        Math.max(8, innerWidth - nextPrefixWidth),
+      ).entries()) {
+        if (splitRows.length >= maxLines - (commandLine && !commandsPlaced ? 1 : 0)) break;
+        const lead = idx === 0 ? nextPrefix : " ".repeat(nextPrefixWidth);
+        pushLeft(theme.fg("text", lead + line));
       }
 
-      return renderPanel(theme, title, lines, width, { ruleColor: color });
+      return renderPlainOutcome(theme, width, statusLine, [], {
+        headerRight: elapsed ? theme.fg("dim", elapsed) : undefined,
+        splitRows,
+        footerRight: commandLine && !commandsPlaced ? commandLine : undefined,
+      });
     },
     invalidate(): void {},
     dispose(): void {},
@@ -1344,3 +1017,186 @@ function extractMessageText(value: unknown): string | null {
 
   return null;
 }
+
+type MilestoneRef = NonNullable<GSDState["activeMilestone"]>;
+type SliceRef = NonNullable<GSDState["activeSlice"]>;
+type TaskRef = NonNullable<GSDState["activeTask"]>;
+
+function buildGsdProgressPayload(
+  accessors: WidgetStateAccessors,
+  unitType: string,
+  unitId: string,
+  mid: MilestoneRef | null | undefined,
+  slice: SliceRef | null | undefined,
+  task: TaskRef | null | undefined,
+  isHook: boolean,
+  verb: string,
+  runtimeRecord: AutoUnitRuntimeRecord | null,
+): GsdProgressState | undefined {
+  const mode = getWidgetMode();
+  if (mode === "off") return undefined;
+
+  const elapsed = formatAutoElapsed(accessors.getAutoStartTime());
+  const eta = estimateTimeRemaining();
+  const etaShort = eta ? eta.replace(" remaining", " left") : undefined;
+  const modeTag = accessors.isStepMode() ? "NEXT" : "AUTO";
+
+  const target = task
+    ? `${task.id}: ${task.title}`
+    : slice
+      ? `${slice.id}: ${slice.title}`
+      : unitId;
+  const phase = `${verb} ${target}`.trim();
+
+  const roadmapSlices = mid ? getRoadmapSlicesSync() : null;
+  let taskProgress: { done: number; total: number } | undefined;
+  let sliceProgress: { done: number; total: number } | undefined;
+  if (shouldRenderRoadmapProgress(roadmapSlices)) {
+    if (roadmapSlices.total > 0) {
+      sliceProgress = { done: roadmapSlices.done, total: roadmapSlices.total };
+    }
+    const { activeSliceTasks } = roadmapSlices;
+    if (activeSliceTasks && activeSliceTasks.total > 0) {
+      const taskNum = isHook
+        ? Math.max(activeSliceTasks.done, 1)
+        : Math.min(activeSliceTasks.done + 1, activeSliceTasks.total);
+      taskProgress = { done: taskNum, total: activeSliceTasks.total };
+    }
+  }
+
+  const runtimeSignal = formatRuntimeHealthSignal(runtimeRecord);
+  const score = computeProgressScore();
+  let healthSummary: string | undefined;
+  if (mode !== "min") {
+    if (runtimeSignal?.detail) {
+      healthSummary = runtimeSignal.detail;
+    } else if (score.level !== "green") {
+      healthSummary = score.signals
+        .filter((signal) => signal.kind === "negative")
+        .slice(0, 2)
+        .map((signal) => signal.label)
+        .join(" · ");
+    }
+  }
+
+  const unitLabel = unitId || [mid?.id, slice?.id, task?.id].filter(Boolean).join("/");
+
+  return {
+    phase,
+    modeTag,
+    taskProgress,
+    sliceProgress,
+    sliceLabel: slice?.id,
+    taskLabel: task?.id,
+    unitLabel,
+    elapsed,
+    eta: etaShort,
+    healthSummary,
+    path: accessors.getBasePath(),
+    widgetMode: mode,
+  };
+}
+
+function installGsdProgressStrip(
+  ctx: ExtensionContext,
+  accessors: WidgetStateAccessors,
+  unitType: string,
+  unitId: string,
+  mid: MilestoneRef | null | undefined,
+  slice: SliceRef | null | undefined,
+  task: TaskRef | null | undefined,
+  isHook: boolean,
+  verb: string,
+): void {
+  if (!ctx.hasUI || typeof ctx.ui?.setGsdProgress !== "function") return;
+
+  ctx.ui.setWidget("gsd-progress", undefined);
+
+  let cachedRuntimeRecord: AutoUnitRuntimeRecord | null = null;
+  const refreshRuntimeRecord = (): void => {
+    try {
+      cachedRuntimeRecord = readUnitRuntimeRecord(accessors.getBasePath(), unitType, unitId);
+    } catch {
+      cachedRuntimeRecord = null;
+    }
+  };
+  refreshRuntimeRecord();
+
+  let progressRefreshTimer: ReturnType<typeof setInterval> | undefined;
+  let elapsedRefreshTimer: ReturnType<typeof setInterval> | undefined;
+
+  const dispose = (): void => {
+    if (progressRefreshTimer !== undefined) {
+      clearInterval(progressRefreshTimer);
+      progressRefreshTimer = undefined;
+    }
+    if (elapsedRefreshTimer !== undefined) {
+      clearInterval(elapsedRefreshTimer);
+      elapsedRefreshTimer = undefined;
+    }
+    // Do not call setGsdProgress here: callers (resetExtensionUI, unit transition,
+    // setCompletionProgressWidget) clear gsdProgressState directly, and calling it
+    // here would re-enter setGsdProgress which calls dispose again — infinite recursion.
+  };
+
+  const publish = (registerDispose = false): boolean => {
+    if (accessors.isSessionSwitching()) {
+      // On initial install (registerDispose) clear any stale strip from the
+      // previous unit. On timer refreshes, skip silently — calling
+      // setGsdProgress(undefined) would run dispose() and permanently clear
+      // the refresh timers, leaving the strip blank after the switch.
+      if (registerDispose) {
+        ctx.ui!.setGsdProgress!(undefined);
+      }
+      return false;
+    }
+    ctx.ui!.setGsdProgress!(
+      buildGsdProgressPayload(
+        accessors,
+        unitType,
+        unitId,
+        mid,
+        slice,
+        task,
+        isHook,
+        verb,
+        cachedRuntimeRecord,
+      ),
+      registerDispose ? dispose : undefined,
+    );
+    return true;
+  };
+
+  const startElapsedRefreshTimer = (): void => {
+    if (elapsedRefreshTimer !== undefined) return;
+    elapsedRefreshTimer = setInterval(() => {
+      try {
+        publish();
+      } catch (err) {
+        logWarning("dashboard", `progress strip elapsed refresh failed: ${getErrorMessage(err)}`);
+      }
+    }, 1_000);
+    elapsedRefreshTimer.unref?.();
+  };
+
+  const startProgressRefreshTimer = (): void => {
+    if (progressRefreshTimer !== undefined) return;
+    progressRefreshTimer = setInterval(() => {
+      try {
+        if (mid) {
+          updateSliceProgressCache(accessors.getBasePath(), mid.id, slice?.id);
+        }
+        refreshRuntimeRecord();
+        publish();
+      } catch (err) {
+        logWarning("dashboard", `progress strip refresh failed: ${getErrorMessage(err)}`);
+      }
+    }, 15_000);
+    progressRefreshTimer.unref?.();
+  };
+
+  if (publish(true)) {
+    startElapsedRefreshTimer();
+    startProgressRefreshTimer();
+  }
+}