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

package/dist/resources/extensions/gsd/auto-dashboard.js

@@ -7,14 +7,11 @@ import { isDbAvailable, getMilestoneSlices, getSliceTasks } from "./gsd-db.js";
 import { readFileSync, writeFileSync, existsSync } from "node:fs";
 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, wrapVisibleText } from "./tui/render-kit.js";
 import { computeProgressScore } from "./progress-score.js";
 import { getGlobalGSDPreferencesPath, getProjectGSDPreferencesPath, parsePreferencesMarkdown, } from "./preferences.js";
 import { parseUnitId } from "./unit-id.js";
 import { logWarning } from "./workflow-logger.js";
-import { formattedShortcutPair } from "./shortcut-defs.js";
 import { readUnitRuntimeRecord } from "./unit-runtime.js";
 import { describeMilestoneReadinessPhase } from "./milestone-readiness.js";
 const ACTIVE_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -567,316 +564,84 @@ export function updateProgressWidget(ctx, unitType, unitId, state, accessors, ti
     if (mid) {
         updateSliceProgressCache(accessors.getBasePath(), mid.id, slice?.id);
     }
-    ctx.ui.setWidget("gsd-progress", (tui, theme) => {
-        let spinnerIndex = 0;
-        let cachedLines;
-        let cachedWidth;
-        let cachedRuntimeRecord = null;
-        const refreshRuntimeRecord = () => {
-            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) {
-                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 = [];
-                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 = [];
-                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}`)}`;
-                        }
-                    }
-                    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;
-                }
-                // ── Mode: full — complete two-column layout ───────────────────
-                lines.push("");
-                // 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 = [];
-                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}`);
-                }
-                // Build right column: task checklist
-                const rightLines = [];
-                const maxVisibleTasks = 8;
-                // Max visible chars for task title text (before ANSI theming)
-                const maxTaskTitleLen = 45;
-                function truncTitle(s) {
-                    return s.length > maxTaskTitleLen ? s.slice(0, maxTaskTitleLen - 1) + "…" : s;
-                }
-                function formatTaskLine(t, isCurrent) {
-                    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}`;
-                }
-                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))}`);
-                    }
-                }
-                // 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, "…"));
-                    }
-                }
-                // ── 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")}`);
-                }
-                // Hints line
-                const hintParts = [];
-                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);
-            },
-        };
-    });
+    installGsdProgressStrip(ctx, accessors, unitType, unitId, mid, slice, task, isHook, verb);
+}
+function buildCompletionRollupLines(theme, snapshot, width) {
+    const innerWidth = Math.max(8, width - 2);
+    const lines = [];
+    const add = (line) => {
+        if (!line)
+            return;
+        for (const wrapped of wrapVisibleText(line, innerWidth).slice(0, 12 - lines.length)) {
+            lines.push(wrapped);
+        }
+    };
+    if (snapshot.milestoneTitle) {
+        add(theme.fg("text", snapshot.milestoneTitle));
+    }
+    const oneLiner = normalizeRollupText(snapshot.oneLiner);
+    if (oneLiner) {
+        add(`${theme.fg("accent", "Outcome")} ${theme.fg("text", oneLiner)}`);
+    }
+    const changed = [
+        ...(snapshot.successCriteriaResults ? [snapshot.successCriteriaResults] : []),
+        ...(snapshot.requirementOutcomes ? [snapshot.requirementOutcomes] : []),
+        ...(snapshot.keyDecisions ?? []),
+    ].map(normalizeRollupText).filter((v) => !!v).slice(0, 4);
+    if (changed.length > 0) {
+        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);
+    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).slice(0, 4);
+        if (files.length > 0) {
+            add(`  ${theme.fg("accent", "Files:")} ${theme.fg("text", files.join("; "))}`);
+        }
+    }
+    const lessons = (snapshot.lessonsLearned ?? []).map(normalizeRollupText).filter((v) => !!v).slice(0, 2);
+    if (lessons.length > 0) {
+        add(`${theme.fg("accent", "Lessons:")} ${theme.fg("text", lessons.join("; "))}`);
+    }
+    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)}`);
+        }
+    }
+    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("  ·  "));
+    if (snapshot.reason) {
+        add(theme.fg("dim", snapshot.reason));
+    }
+    return { lines, footerCommands };
 }
 export function setCompletionProgressWidget(ctx, snapshot) {
     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(() => ({
             render() { return []; },
@@ -886,113 +651,20 @@ export function setCompletionProgressWidget(ctx, snapshot) {
     if (typeof ctx.ui?.setStatus === "function") {
         ctx.ui.setStatus("gsd-step", undefined);
     }
-    ctx.ui.setWidget(widgetKey, (_tui, theme) => ({
+    ctx.ui.setWidget("gsd-outcome", (_tui, theme) => ({
         render(width) {
-            const ui = makeUI(theme, width);
-            const pad = INDENT.base;
-            const lines = [];
-            const contentWidth = Math.max(20, width - visibleWidth(pad));
-            const add = (line = "") => {
-                lines.push(line ? truncateToWidth(`${pad}${line}`, width, "…") : "");
-            };
-            const addSection = (label, value, indent = "") => {
-                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, values, limit, indent = "") => {
-                const clean = (values ?? []).map(normalizeRollupText).filter((v) => !!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).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);
-            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 = [];
-            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() { },
         dispose() { },
@@ -1001,6 +673,8 @@ export function setCompletionProgressWidget(ctx, snapshot) {
 export function setAutoOutcomeWidget(ctx, snapshot) {
     if (!ctx.hasUI)
         return;
+    ctx.ui?.setGsdProgress?.(undefined);
+    ctx.ui.setWidget("gsd-progress", undefined);
     ctx.ui.setWidget("gsd-outcome", (_tui, theme) => ({
         render(width) {
             const color = snapshot.status === "failed" || snapshot.status === "blocked"
@@ -1013,37 +687,49 @@ export function setAutoOutcomeWidget(ctx, snapshot) {
                     : 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 = [];
             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, prefix = "") => {
-                const reserve = commandLine ? 1 : 0;
-                const remaining = Math.max(0, maxLines - reserve - lines.length);
-                if (remaining === 0)
+            const commandLine = commands.length > 0 ? theme.fg("dim", commands.join("  ·  ")) : undefined;
+            const innerWidth = Math.max(8, width);
+            const maxLines = 7;
+            const splitRows = [];
+            let commandsPlaced = false;
+            const pushLeft = (left) => {
+                if (splitRows.length >= maxLines - (commandLine ? 1 : 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}`);
-                }
+                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() { },
         dispose() { },
@@ -1111,3 +797,141 @@ function extractMessageText(value) {
     }
     return null;
 }
+function buildGsdProgressPayload(accessors, unitType, unitId, mid, slice, task, isHook, verb, runtimeRecord) {
+    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;
+    let sliceProgress;
+    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;
+    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, accessors, unitType, unitId, mid, slice, task, isHook, verb) {
+    if (!ctx.hasUI || typeof ctx.ui?.setGsdProgress !== "function")
+        return;
+    ctx.ui.setWidget("gsd-progress", undefined);
+    let cachedRuntimeRecord = null;
+    const refreshRuntimeRecord = () => {
+        try {
+            cachedRuntimeRecord = readUnitRuntimeRecord(accessors.getBasePath(), unitType, unitId);
+        }
+        catch {
+            cachedRuntimeRecord = null;
+        }
+    };
+    refreshRuntimeRecord();
+    let progressRefreshTimer;
+    let elapsedRefreshTimer;
+    const dispose = () => {
+        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) => {
+        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 = () => {
+        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 = () => {
+        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();
+    }
+}