@bastani/atomic 0.9.11-alpha.9 → 0.9.11

package/dist/builtin/workflows/src/tui/stage-chat-view-state.ts

@@ -1,6 +1,7 @@
 import { type AgentSessionEvent, ChatSessionHost } from "@bastani/atomic";
 import { Editor, type EditorComponent } from "@earendil-works/pi-tui";
 import { stageUiBroker } from "../shared/stage-ui-broker.js";
+import { readGraphStoreSnapshot, subscribeStoreInvalidation } from "../shared/store-observation.js";
 import type { PendingPrompt, RunSnapshot, StageSnapshot } from "../shared/store-types.js";
 import { hexToAnsi, RESET } from "./color-utils.js";
 import { createPromptCardState } from "./prompt-card.js";
@@ -66,6 +67,7 @@ export function initializeStageChatView(ctx: StageChatViewContext, opts: StageCh
 	ctx.promptEditorSubmitFromEnter = false;
 	ctx.promptScrollOffset = 0;
 	ctx.promptMaxScroll = 0;
+	ctx.promptVisibleRows = 0;
 	ctx.localPaused = false;
 	ctx.mouseScrollCaptureEnabled = true;
 	ctx.lastObservedStageStatus = undefined;
@@ -101,9 +103,10 @@ export function initializeStageChatView(ctx: StageChatViewContext, opts: StageCh
 	snapshotMessagesFromSessionFile(ctx, initialStage);
 	absorbStageNotices(ctx, initialStage);
 	syncPromptState(ctx, initialStage?.pendingPrompt);
-	if (isTerminalStageChatState(initialRun?.status) || isTerminalStageChatState(initialStage?.status))
-		ctx.chatHost.clearBusyForTerminalWorkflowStage();
-	ctx._unsubscribeStore = ctx.store.subscribe(() => handleStoreUpdate(ctx));
+	const initialChatIsTerminal =
+		isTerminalStageChatState(initialRun?.status) || isTerminalStageChatState(initialStage?.status);
+	if (initialChatIsTerminal) ctx.chatHost.clearBusyForTerminalWorkflowStage();
+	ctx._unsubscribeStore = subscribeStoreInvalidation(ctx.store, () => handleStoreUpdate(ctx));
 	ctx._unsubscribeFooterData = ctx.footerData?.onBranchChange(() => ctx.requestRender?.()) ?? null;
 
 	if (ctx.handle) {
@@ -112,11 +115,47 @@ export function initializeStageChatView(ctx: StageChatViewContext, opts: StageCh
 		// stage can see that a live delivery authorizes it.
 		ctx._unsubscribeDeliveryActivity = subscribeStageChatDeliveryActivity(ctx);
 		ctx._unsubscribeHandle = ctx.handle.subscribe((event) => applyStageChatLiveHandleEvent(ctx, event));
+		if (!initialChatIsTerminal) rehydrateCompactionStatusAfterAttach(ctx);
 		rehydrateQueuedMessages(ctx);
 	}
 	ctx.chatHost.syncAnimationTick();
 }
 
+/**
+ * Restore the factual compaction indicator into a freshly mounted host.
+ *
+ * Compaction start is an event, but the active reason lives on the session so
+ * a host rebuilt after detach can render the same label even when it missed
+ * that event. An absent reason explicitly clears the fresh host's status.
+ */
+function rehydrateCompactionStatus(ctx: StageChatViewContext): void {
+	const session = liveHandle(ctx)?.agentSession;
+	ctx.chatHost.hydrateCompactionStatus(session?.isCompacting === true ? session.compactionReason : undefined);
+}
+
+/**
+ * The live stage handle may create its session lazily. Re-read compaction state
+ * after that async attach so a host mounted while the session is already
+ * compacting does not stay on the generic Working row forever.
+ */
+function rehydrateCompactionStatusAfterAttach(ctx: StageChatViewContext): void {
+	const handle = liveHandle(ctx);
+	if (!handle) return;
+	rehydrateCompactionStatus(ctx);
+	void handle.ensureAttached().then(
+		() => {
+			if (ctx._unsubscribeHandle === null || liveHandle(ctx) === undefined) return;
+			if (isTerminalStageChatState(currentRun(ctx)?.status) || isTerminalStageChatState(currentStage(ctx)?.status)) {
+				return;
+			}
+			rehydrateCompactionStatus(ctx);
+			ctx.chatHost.syncAnimationTick();
+			ctx.requestRender?.();
+		},
+		() => {},
+	);
+}
+
 /**
  * Replay the stage's pending queue into a freshly mounted chat host.
  *
@@ -308,7 +347,7 @@ function absorbStageNotices(ctx: StageChatViewContext, stage: StageSnapshot | un
 }
 
 export function currentRun(ctx: StageChatViewContext): RunSnapshot | undefined {
-	return ctx.store.snapshot().runs.find((r) => r.id === ctx.runId);
+	return readGraphStoreSnapshot(ctx.store).runs.find((r) => r.id === ctx.runId);
 }
 
 export function currentStage(ctx: StageChatViewContext): StageSnapshot | undefined {
@@ -337,6 +376,7 @@ export function syncPromptState(ctx: StageChatViewContext, prompt: PendingPrompt
 function resetPromptScroll(ctx: StageChatViewContext): void {
 	ctx.promptScrollOffset = 0;
 	ctx.promptMaxScroll = 0;
+	ctx.promptVisibleRows = 0;
 }
 
 function promptSeedText(ctx: StageChatViewContext, prompt: PendingPrompt): string {

package/dist/builtin/workflows/src/tui/stage-chat-view-types.ts

@@ -15,7 +15,8 @@ import type { PromptCardState } from "./prompt-card.js";
 
 export const VIEW_LINE_COUNT = 32;
 export const PROMPT_SCROLL_STEP_ROWS = 4;
-export const HEADER_ROWS = 1;
+/** Header rows reserved by prompt paging for the normal UUID continuation shape. */
+export const HEADER_ROWS = 2;
 export const SEP_ROWS = 1;
 export const STAGE_CHAT_MOUSE_SCROLL_TOGGLE_LABEL = "ctrl+t";
 
@@ -148,6 +149,7 @@ export interface StageChatViewContext {
 	promptEditorSubmitFromEnter: boolean;
 	promptScrollOffset: number;
 	promptMaxScroll: number;
+	promptVisibleRows: number;
 	localPaused: boolean;
 	mouseScrollCaptureEnabled: boolean;
 	lastObservedStageStatus: StageStatus | undefined;

package/dist/builtin/workflows/src/tui/stage-chat-view.ts

@@ -53,7 +53,6 @@ import {
 } from "./stage-chat-view-state.js";
 import { transcriptDebugEntries } from "./stage-chat-view-transcript.js";
 import {
-	HEADER_ROWS,
 	SEP_ROWS,
 	type StageChatViewContext,
 	type StageChatViewOpts,
@@ -99,6 +98,7 @@ export class StageChatView implements Component, Focusable {
 	private promptEditorSubmitFromEnter!: StageChatViewContext["promptEditorSubmitFromEnter"];
 	private promptScrollOffset!: StageChatViewContext["promptScrollOffset"];
 	private promptMaxScroll!: StageChatViewContext["promptMaxScroll"];
+	private promptVisibleRows!: StageChatViewContext["promptVisibleRows"];
 	private localPaused!: StageChatViewContext["localPaused"];
 	private mouseScrollCaptureEnabled!: StageChatViewContext["mouseScrollCaptureEnabled"];
 	private seenNoticeIds!: StageChatViewContext["seenNoticeIds"];
@@ -141,7 +141,7 @@ export class StageChatView implements Component, Focusable {
 		const totalRows = viewLineCount(ctx);
 		const plan = planStageChatFrame({
 			viewportRows: totalRows,
-			headerRows: HEADER_ROWS,
+			headerRows: headerLines.length,
 			separatorRows: SEP_ROWS,
 			pendingRows: pendingLines.length,
 			workingRows: workingLines.length,
@@ -234,6 +234,7 @@ export class StageChatView implements Component, Focusable {
 		void this.promptEditorSubmitFromEnter;
 		void this.promptScrollOffset;
 		void this.promptMaxScroll;
+		void this.promptVisibleRows;
 		void this.mouseScrollCaptureEnabled;
 		void this.seenNoticeIds;
 		void this._unsubscribeStore;

package/dist/builtin/workflows/src/tui/status-list.ts

@@ -4,13 +4,8 @@
  * Visual contract (DESIGN.md §5):
  *  - One rounded `BACKGROUND` panel with subtitle and count badges.
  *  - One rounded card per run (replaces the indented per-stage rows):
- *      title: runId · workflow · state badge
- *      row 1: mode · progress strip · meta
- *  - Status colour is carried by the card border and state badge semantics,
- *    never by decorative body text.
- *  - One trailing hint row pointing at `/workflow status <id>` for the
- *    most-recently-active run; full per-stage detail moves into
- *    `/workflow status <id>` ({@link renderRunDetail}).
+ *      title: full runId · workflow · state badge
+ *      rows: status glyph + full runId, then workflow identity and meta
  *
  * Plain mode (theme omitted) preserves the rounded panel/card shape without
  * ANSI escapes, with ASCII bracket cells `[✓][●][○][✗]`.
@@ -30,14 +25,13 @@ import { effectiveRunStatus } from "../shared/returned-run-status.js";
 import type { RunSnapshot, StageSnapshot, StageStatus } from "../shared/store-types.js";
 import { elapsedRunMs, elapsedStageMs } from "../shared/timing.js";
 import type { FlatBandBadge } from "./chat-surface.js";
-import { chatWidth, ELLIPSIS, progressStrip, renderHintRows, renderRoundedBox } from "./chat-surface.js";
+import { chatWidth, ELLIPSIS, progressStrip, renderRoundedBox } from "./chat-surface.js";
 import { BOLD, hexToAnsi, RESET } from "./color-utils.js";
 import type { GraphTheme } from "./graph-theme.js";
+import { wrapIdentifierLines } from "./run-identity-rows.js";
 import { fmtDuration } from "./status-helpers.js";
 import { truncateToWidth, visibleWidth } from "./text-helpers.js";
 
-const SHORT_ID_LEN = 6;
-const MIN_TITLE_BUDGET = 12;
 const STAGE_LABEL_BUDGET = 24;
 
 export interface RenderStatusListOpts {
@@ -83,17 +77,10 @@ export function renderStatusList(runs: readonly RunSnapshot[], opts: RenderStatu
 			body.push(...renderRunEntry(sorted[i]!, now, cardWidth, opts.theme));
 		}
 	}
-
 	if (opts.showDetailHint !== false && sorted.length > 0) {
-		const sid = shortId(sorted[0]!.id);
 		body.push("");
-		body.push(
-			...renderHintRows([{ command: `/workflow status ${sid}`, hint: "drill into a run" }], opts.theme)
-				.split("\n")
-				.map((line) => ` ${line} `),
-		);
+		body.push(...renderStatusHintRows(sorted[0]!.id, opts.theme, width).map((line) => ` ${line} `));
 	}
-
 	const badgeText = badges && badges.length > 0 ? `  ${badges.map((b) => b.text).join("  ")}` : "";
 	return renderRoundedBox({
 		title: `BACKGROUND  ${subtitle}${badgeText}`,
@@ -108,43 +95,50 @@ export function renderStatusList(runs: readonly RunSnapshot[], opts: RenderStatu
 // ---------------------------------------------------------------------------
 
 function renderRunEntry(run: RunSnapshot, now: number, width: number, theme?: GraphTheme): string[] {
-	const sid = shortId(run.id);
-	const trailing = runTrailing(run, theme);
-	const mode = run.stages.length > 1 ? "chain " : "single";
 	const bodyWidth = effectiveWidth(width);
 	const interior = Math.max(8, bodyWidth - 4);
+	const glyph = statusIconForRun(run);
+	const glyphFg = theme ? hexToAnsi(runAccent(run, theme)) : "";
+	const accent = theme ? hexToAnsi(theme.accent) : "";
+	const text = theme ? hexToAnsi(theme.text) : "";
+	const muted = theme ? hexToAnsi(theme.textMuted) : "";
+	const dim = theme ? hexToAnsi(theme.dim) : "";
+	const reset = theme ? RESET : "";
+
+	// The identifier owns its row and is never sent through truncateToWidth.
+	// At narrow widths, continuation rows preserve every identifier character
+	// while keeping each row inside the rounded panel's interior.
+	const idRows = wrapIdentifierLines(run.id, interior, ` ${glyph}  `, "   ");
+	const identityRows = idRows.map(({ prefix, chunk }, index) => {
+		if (!theme) return `${prefix}${chunk}`;
+		if (index === 0) return ` ${glyphFg}${glyph}${RESET}  ${accent}${chunk}${RESET}`;
+		return `   ${accent}${chunk}${RESET}`;
+	});
+
+	const trailing = runTrailing(run, theme);
+	const trailingText = truncateToWidth(trailing?.text ?? "", Math.max(0, interior - 1), ELLIPSIS);
+	const nameBudget = Math.max(1, interior - 3 - visibleWidth(trailingText) - (trailingText ? 2 : 0));
+	const name = truncateToWidth(run.name, nameBudget, ELLIPSIS);
+	const nameSeg = theme ? `${text}${BOLD}${name}${RESET}` : name;
+	const trailingSeg =
+		theme && trailingText ? `${hexToAnsi(trailing?.fg ?? theme.dim)}${trailingText}${RESET}` : trailingText;
+	const identity = `   ${nameSeg}${trailingSeg ? `  ${trailingSeg}` : ""}`;
+
+	const mode = run.stages.length > 1 ? "chain " : "single";
 	const rawMeta = runCardMeta(run, now);
 	const modeW = mode.length + 4;
 	const maxMetaW = Math.max(0, interior - modeW - 3);
 	const meta = truncateToWidth(rawMeta, maxMetaW, ELLIPSIS);
 	const metaW = visibleWidth(meta);
 	const stripBudget = Math.max(0, interior - modeW - metaW - 2);
-
 	const strip = progressStrip(stageCells(run), stripBudget, theme);
 	const usedLeftW = modeW + visibleWidth(strip);
 	const gap = Math.max(metaW > 0 ? 1 : 0, interior - usedLeftW - metaW);
-
-	const glyph = statusIconForRun(run);
-	const glyphFg = theme ? hexToAnsi(runAccent(run, theme)) : "";
-	const accent = theme ? hexToAnsi(theme.accent) : "";
-	const text = theme ? hexToAnsi(theme.text) : "";
-	const muted = theme ? hexToAnsi(theme.textMuted) : "";
-	const dim = theme ? hexToAnsi(theme.dim) : "";
-	const reset = theme ? RESET : "";
-
-	const name = truncateToWidth(
-		run.name,
-		Math.max(MIN_TITLE_BUDGET, interior - visibleWidth(sid) - visibleWidth(trailing?.text ?? "") - 8),
-		ELLIPSIS,
-	);
-	const line1 = theme
-		? ` ${glyphFg}${glyph}${RESET}  ${accent}${sid}${RESET}  ${text}${BOLD}${name}${RESET}  ${glyphFg}${trailing?.text ?? ""}${RESET} `
-		: ` ${glyph}  ${sid}  ${name}  ${trailing?.text ?? ""} `;
 	const modeSeg = theme ? `${muted}${mode}${reset}` : mode;
 	const metaSeg = theme ? `${dim}${meta}${reset}` : meta;
-	const line2 = `   ${modeSeg}    ${strip}${" ".repeat(gap)}${metaSeg} `;
+	const metaLine = `   ${modeSeg}    ${strip}${" ".repeat(gap)}${metaSeg} `;
 
-	return [line1, line2];
+	return [...identityRows, identity, metaLine];
 }
 
 function runAccent(run: RunSnapshot, theme?: GraphTheme): string {
@@ -403,8 +397,38 @@ function sortRuns(runs: readonly RunSnapshot[]): RunSnapshot[] {
 	return [...[...active].sort(byStart), ...[...ended].sort(byStart)];
 }
 
-function shortId(id: string): string {
-	return id.length > SHORT_ID_LEN ? id.slice(0, SHORT_ID_LEN) : id;
+function renderStatusHintRows(id: string, theme: GraphTheme | undefined, width: number): string[] {
+	const budget = Math.max(1, width - 4);
+	const prefix = "▸ /workflow status ";
+	const continuation = "  ";
+	const rows = wrapIdentifierLines(id, budget, prefix, continuation);
+	const identifierRowCount = rows.length;
+	const suffix = "  drill into a run";
+	const last = rows[rows.length - 1]!;
+	if (visibleWidth(`${last.prefix}${last.chunk}${suffix}`) <= budget) {
+		last.chunk += suffix;
+	} else {
+		rows.push({
+			prefix: continuation,
+			chunk: truncateToWidth(suffix.trimStart(), Math.max(1, budget - visibleWidth(continuation)), ELLIPSIS),
+		});
+	}
+	if (!theme) return rows.map((row) => `${row.prefix}${row.chunk}`);
+	const dim = hexToAnsi(theme.dim);
+	const accent = hexToAnsi(theme.accent);
+	return rows.map((row, index) => {
+		const carriesIdentifier = index < identifierRowCount;
+		const carriesSuffix = carriesIdentifier && index === identifierRowCount - 1 && row.chunk.endsWith(suffix);
+		const idChunk = carriesSuffix ? row.chunk.slice(0, -suffix.length) : row.chunk;
+		const suffixText = carriesSuffix ? suffix : "";
+		if (index === 0) {
+			return `${dim}▸${RESET} ${accent}/workflow status ${idChunk}${RESET}${suffixText ? `${dim}${suffixText}${RESET}` : ""}`;
+		}
+		if (carriesIdentifier) {
+			return `${row.prefix}${accent}${idChunk}${RESET}${suffixText ? `${dim}${suffixText}${RESET}` : ""}`;
+		}
+		return `${row.prefix}${dim}${row.chunk}${RESET}`;
+	});
 }
 
 function emptyStateLine(theme?: GraphTheme): string {
@@ -418,7 +442,6 @@ function statusIconForRun(run: RunSnapshot): string {
 		case "completed":
 			return "✓";
 		case "skipped":
-			return "⊘";
 		case "cancelled":
 			return "⊘";
 		case "blocked":
@@ -437,4 +460,3 @@ function statusIconForRun(run: RunSnapshot): string {
 }
 
 // Re-export for callers that need to inspect width budgeting.
-export { MIN_TITLE_BUDGET };

package/dist/builtin/workflows/src/tui/store-widget-installer.ts

@@ -45,6 +45,7 @@ import {
 	type ReactiveWidgetTimerHandle,
 } from "@bastani/atomic";
 import type { Store } from "../shared/store.js";
+import { readGraphStoreSnapshot, subscribeStoreInvalidation } from "../shared/store-observation.js";
 import type { StoreSnapshot } from "../shared/store-types.js";
 import { buildThemedWidgetLines, nextWidgetRefreshDelayMs } from "./widget.js";
 
@@ -106,8 +107,8 @@ export function installStoreWidget(
 		key: WIDGET_KEY,
 		placement: "belowEditor",
 		timers,
-		getSnapshot: () => storeInstance.snapshot(),
-		subscribe: (listener) => storeInstance.subscribe(() => listener()),
+		getSnapshot: () => readGraphStoreSnapshot(storeInstance),
+		subscribe: (listener) => subscribeStoreInvalidation(storeInstance, listener),
 		getPreviewLines: (snap, now) => buildThemedWidgetLines(snap, undefined, 120, now),
 		render: (snap, { theme, width, now }) => buildThemedWidgetLines(snap, theme as PiTheme | undefined, width, now),
 		getNextRefreshDelayMs: (snap, now) => nextWidgetRefreshDelayMs(snap, now),
@@ -206,12 +207,12 @@ export function installToolExecutionHooks(pi: LiveWidgetAPI, storeInstance: Stor
 		return call ? { key, call } : null;
 	}
 
-	storeInstance.subscribe(pruneActiveToolCalls);
+	subscribeStoreInvalidation(storeInstance, () => pruneActiveToolCalls(readGraphStoreSnapshot(storeInstance)));
 
 	function recordToolStart(payload: unknown): void {
 		if (!isToolExecutionPayload(payload)) return;
 
-		const snap = storeInstance.snapshot();
+		const snap = readGraphStoreSnapshot(storeInstance);
 		pruneActiveToolCalls(snap);
 
 		const scope = resolveExplicitStageScope(payload);
@@ -234,7 +235,7 @@ export function installToolExecutionHooks(pi: LiveWidgetAPI, storeInstance: Stor
 	function recordToolUpdate(payload: unknown): void {
 		if (!isToolExecutionPayload(payload)) return;
 
-		pruneActiveToolCalls(storeInstance.snapshot());
+		pruneActiveToolCalls(readGraphStoreSnapshot(storeInstance));
 
 		if (!activeToolCallForPayload(payload)) return;
 		// Updates are attach-only until the store has an explicit update API.
@@ -243,7 +244,7 @@ export function installToolExecutionHooks(pi: LiveWidgetAPI, storeInstance: Stor
 	function recordToolEnd(payload: unknown): void {
 		if (!isToolExecutionPayload(payload)) return;
 
-		pruneActiveToolCalls(storeInstance.snapshot());
+		pruneActiveToolCalls(readGraphStoreSnapshot(storeInstance));
 
 		const active = activeToolCallForPayload(payload);
 		if (!active) return;

package/dist/builtin/workflows/src/tui/widget.ts

@@ -5,9 +5,8 @@
  *  - One transparent rounded `BACKGROUND` panel with `N runs` and status
  *    badges (`✓ n  ● n  ○ n  ✗ n`) in the title.
  *  - One compact rounded card per run:
- *      title: `<status glyph>  <short id>  <name>`
- *      row 1: `<dim mode · progress · duration>`
- *  - Blank line between cards; trailing blank trimmed.
+ *      title: `<status glyph>  <full id>`
+ *      row 1: `<name> · <dim mode · progress · duration>`
  *  - Collapsed single-line form below 80 cells:
  *      `▾  N background · X ●` in dim+warning.
  *
@@ -28,9 +27,10 @@ import type { RunSnapshot, StoreSnapshot } from "../shared/store-types.js";
 import { elapsedRunMs } from "../shared/timing.js";
 import type { FlatBandBadge } from "./chat-surface.js";
 import { renderRoundedBoxLines } from "./chat-surface.js";
-import { BOLD, hexToAnsi, RESET } from "./color-utils.js";
+import { hexToAnsi, RESET } from "./color-utils.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { deriveGraphTheme } from "./graph-theme.js";
+import { renderRunIdentityRows } from "./run-identity-rows.js";
 import { statusIcon } from "./status-helpers.js";
 import type { PiTheme } from "./store-widget-installer.js";
 
@@ -38,8 +38,6 @@ import type { PiTheme } from "./store-widget-installer.js";
 // Tunables
 // ---------------------------------------------------------------------------
 
-const SHORT_ID_LEN = 6;
-const MAX_VISIBLE_RUNS = 4;
 export const RECENT_ENDED_WINDOW_MS = 30_000;
 const COLLAPSED_BREAKPOINT_COLS = 80;
 
@@ -62,16 +60,28 @@ export function formatDuration(ms: number): string {
 // Run classification + selection
 // ---------------------------------------------------------------------------
 
+function isQuitRun(run: RunSnapshot): boolean {
+	return run.endedAt === undefined && run.status === "paused" && run.exitReason === "quit";
+}
+
 function isActive(run: RunSnapshot): boolean {
-	return run.endedAt === undefined;
+	return run.endedAt === undefined && !isQuitRun(run);
 }
 
 function recentlyEnded(run: RunSnapshot, now: number): boolean {
 	return run.endedAt !== undefined && now - run.endedAt <= RECENT_ENDED_WINDOW_MS;
 }
 
-function isQuitRun(run: RunSnapshot): boolean {
-	return run.endedAt === undefined && run.status === "paused" && run.exitReason === "quit";
+/**
+ * Returns the timestamp from which a quit card's display-only expiry is measured.
+ * Older snapshots do not have `quitAt`, so retain the bounded legacy fallbacks.
+ */
+function quitExpiryTimestamp(run: RunSnapshot): number {
+	return run.quitAt ?? run.pausedAt ?? run.startedAt;
+}
+
+function recentlyQuit(run: RunSnapshot, now: number): boolean {
+	return isQuitRun(run) && now - quitExpiryTimestamp(run) <= RECENT_ENDED_WINDOW_MS;
 }
 
 interface RunCounts {
@@ -123,7 +133,7 @@ function countRuns(runs: readonly RunSnapshot[], allRuns: readonly RunSnapshot[]
 /**
  * Returns the next wall-clock boundary that can change the visible widget.
  * Running elapsed labels tick on exact one-second boundaries; paused runs stay
- * frozen. Recently ended cards retain their independent one-shot expiry.
+ * frozen. Recently ended and quit cards retain their independent one-shot expiry.
  * Reactive-widget updates the existing mounted component in place, so these
  * ticks repaint the visible panel without disposing or remounting it.
  */
@@ -131,9 +141,14 @@ export function nextWidgetRefreshDelayMs(snap: StoreSnapshot, now = Date.now()):
 	const display = selectDisplayRuns(snap, now);
 	if (display.length === 0) return undefined;
 
-	const delays: number[] = display
-		.filter((run) => run.endedAt !== undefined)
-		.map((run) => Math.max(1, run.endedAt! + RECENT_ENDED_WINDOW_MS - now + 1));
+	const delays: number[] = [];
+	for (const run of display) {
+		if (run.endedAt !== undefined) {
+			delays.push(Math.max(1, run.endedAt + RECENT_ENDED_WINDOW_MS - now + 1));
+		} else if (isQuitRun(run)) {
+			delays.push(Math.max(1, quitExpiryTimestamp(run) + RECENT_ENDED_WINDOW_MS - now + 1));
+		}
+	}
 	for (const run of display) {
 		if (run.endedAt !== undefined || effectiveRunStatus(run) !== "running" || run.pausedAt !== undefined) continue;
 		const remainder = elapsedRunMs(run, now) % 1_000;
@@ -150,21 +165,16 @@ function selectDisplayRuns(snap: StoreSnapshot, now: number): RunSnapshot[] {
 	// rule `statusRuns`/the `status` action already apply.
 	const all = topLevelWorkflowRuns(snap.runs);
 	const active = all.filter((r) => isActive(r));
-	const recent = all.filter((r) => recentlyEnded(r, now));
+	const recent = all.filter((r) => recentlyEnded(r, now) || recentlyQuit(r, now));
 	// Most recently started first within each bucket; active runs precede recent.
 	const sort = (xs: RunSnapshot[]) => [...xs].sort((a, b) => (b.startedAt ?? 0) - (a.startedAt ?? 0));
-	const ordered = [...sort(active), ...sort(recent)];
-	return ordered.slice(0, MAX_VISIBLE_RUNS);
+	return [...sort(active), ...sort(recent)];
 }
 
 // ---------------------------------------------------------------------------
 // Per-run derived strings
 // ---------------------------------------------------------------------------
 
-function shortId(run: RunSnapshot): string {
-	return run.id.length > SHORT_ID_LEN ? run.id.slice(0, SHORT_ID_LEN) : run.id;
-}
-
 function statusGlyph(run: RunSnapshot): string {
 	if (isQuitRun(run)) return "○";
 	switch (effectiveRunStatus(run)) {
@@ -298,29 +308,28 @@ function formatTitleBadges(badges: readonly FlatBandBadge[], theme: GraphTheme,
 // ---------------------------------------------------------------------------
 
 function themedRunLines(run: RunSnapshot, now: number, theme: GraphTheme): string[] {
-	const dim = hexToAnsi(theme.dim);
-	const text = hexToAnsi(theme.text);
-	const accent = hexToAnsi(theme.accent);
-	const muted = hexToAnsi(theme.textMuted);
-	const glyphFg = hexToAnsi(statusFg(run, theme));
-
-	const glyph = statusGlyph(run);
-	const sid = shortId(run);
-	const name = run.name;
-
-	const line1 = `   ${glyphFg}${glyph}${RESET}  ${accent}${sid}${RESET}  ${text}${BOLD}${name}${RESET}`;
 	const meta = metaLine(run, now);
 	// Render the meta line in muted while running so the elapsed-time
 	// gradient stays readable; dim it once the run has terminated.
-	const metaFg = effectiveRunStatus(run) === "running" ? muted : dim;
-	const line2 = `     ${metaFg}${meta}${RESET}`;
-	return [line1, line2];
+	const metaColor = effectiveRunStatus(run) === "running" ? theme.textMuted : theme.dim;
+	return renderRunIdentityRows({
+		runId: run.id,
+		name: run.name,
+		meta,
+		glyph: statusGlyph(run),
+		glyphColor: statusFg(run, theme),
+		metaColor,
+		theme,
+	});
 }
 
 function plainRunLines(run: RunSnapshot, now: number): string[] {
-	const line1 = `   ${statusGlyph(run)}  ${shortId(run)}  ${run.name}`;
-	const line2 = `     ${metaLine(run, now)}`;
-	return [line1, line2];
+	return renderRunIdentityRows({
+		runId: run.id,
+		name: run.name,
+		meta: metaLine(run, now),
+		glyph: statusGlyph(run),
+	});
 }
 
 // ---------------------------------------------------------------------------
@@ -371,7 +380,7 @@ export function buildThemedWidgetLines(
 	const display = selectDisplayRuns(snap, now);
 	if (display.length === 0) return [];
 
-	const counts = countRuns(topLevelWorkflowRuns(snap.runs), snap.runs);
+	const displayCounts = countRuns(display, snap.runs);
 	// Active + recently-ended dominate the badge counts so a finished run
 	// visually persists for a beat before dropping off.
 	const visibleCounts: RunCounts = {
@@ -385,7 +394,7 @@ export function buildThemedWidgetLines(
 		blocked: display.filter((r) => effectiveRunStatus(r) === "blocked").length,
 		failed: display.filter((r) => r.endedAt !== undefined && ["failed", "killed"].includes(effectiveRunStatus(r)))
 			.length,
-		awaiting: counts.awaiting,
+		awaiting: displayCounts.awaiting,
 	};
 
 	const themed = piTheme !== undefined;
@@ -396,7 +405,7 @@ export function buildThemedWidgetLines(
 		return [themed ? themedCollapsed(visibleCounts, graphTheme) : plainCollapsed(visibleCounts)];
 	}
 
-	const total = counts.active + counts.paused + counts.quit + counts.done + counts.blocked + counts.failed;
+	const total = display.length;
 	const subtitle = `${total} run${total === 1 ? "" : "s"}`;
 
 	const badgeList = countBadges(visibleCounts, graphTheme);

package/dist/builtin/workflows/src/tui/workflow-attach-pane.ts

@@ -15,6 +15,7 @@ import { stageQueuedUserMessageCount } from "../runs/foreground/stage-queued-use
 import { expandWorkflowGraph } from "../shared/expanded-workflow-graph.js";
 import type { StageUiBroker } from "../shared/stage-ui-broker.js";
 import type { Store } from "../shared/store.js";
+import { readGraphStoreSnapshot, subscribeStoreInvalidation } from "../shared/store-observation.js";
 import type { StageSnapshot, StoreSnapshot } from "../shared/store-types.js";
 import type { GraphTheme } from "./graph-theme.js";
 import { GraphView } from "./graph-view.js";
@@ -86,7 +87,9 @@ export class WorkflowAttachPane implements Component {
 		this.setToolsExpanded = opts.setToolsExpanded;
 		this.footerData = opts.footerData;
 		this.now = opts.now ?? Date.now;
-		this.unsubscribeStore = this.store.subscribe((snapshot) => this._handleStoreUpdate(snapshot));
+		this.unsubscribeStore = subscribeStoreInvalidation(this.store, () =>
+			this._handleStoreUpdate(readGraphStoreSnapshot(this.store)),
+		);
 		this.graphView = this._buildGraphView();
 		const target =
 			opts.initialAttachStageId !== undefined && this.runId
@@ -97,7 +100,7 @@ export class WorkflowAttachPane implements Component {
 		if (target) {
 			this._attachToStage(target.runId, target.stageId);
 		} else {
-			this._syncAwaitingInputKeys(this.store.snapshot());
+			this._syncAwaitingInputKeys(readGraphStoreSnapshot(this.store));
 			this._armGraphEnterQuarantineIfRunNeedsInput();
 			this._syncMouseScrollTracking();
 		}
@@ -150,7 +153,7 @@ export class WorkflowAttachPane implements Component {
 		return null;
 	}
 	private _workflowName(runId: string): string {
-		const snap = this.store.snapshot();
+		const snap = readGraphStoreSnapshot(this.store);
 		const run = snap.runs.find((r) => r.id === runId);
 		return run?.name ?? "workflow";
 	}
@@ -160,7 +163,7 @@ export class WorkflowAttachPane implements Component {
 		options: { suppressInitialPromptSubmit?: boolean } = { suppressInitialPromptSubmit: true },
 	): void {
 		this.graphEnterQuarantineUntil = 0;
-		const snapshot = this.store.snapshot();
+		const snapshot = readGraphStoreSnapshot(this.store);
 		const graphRunId = this._resolveRunId();
 		this.lastGraphAwaitingInputKey = graphRunId ? this._runAwaitingInputKey(snapshot, graphRunId) : null;
 		this.lastStageAwaitingInputKey = this._stageAwaitingInputKey(snapshot, runId, stageId);
@@ -227,7 +230,9 @@ export class WorkflowAttachPane implements Component {
 		this.mode = "graph";
 		this.stagePromptEnterQuarantineUntil = 0;
 		this.lastStageAwaitingInputKey = null;
-		this.lastGraphAwaitingInputKey = this.runId ? this._runAwaitingInputKey(this.store.snapshot(), this.runId) : null;
+		this.lastGraphAwaitingInputKey = this.runId
+			? this._runAwaitingInputKey(readGraphStoreSnapshot(this.store), this.runId)
+			: null;
 		this.graphEnterQuarantineUntil =
 			reason === "prompt-resolved" && metadata.suppressNextGraphSubmit === true
 				? this.now() + ENTER_TRANSITION_QUARANTINE_MS
@@ -248,7 +253,7 @@ export class WorkflowAttachPane implements Component {
 		this.graphEnterQuarantineUntil = 0;
 		this.stagePromptEnterQuarantineUntil = 0;
 		this.graphView = this._buildGraphView();
-		this._syncAwaitingInputKeys(this.store.snapshot());
+		this._syncAwaitingInputKeys(readGraphStoreSnapshot(this.store));
 		if (stageId !== undefined && runId) {
 			const target =
 				stageRunId === undefined ? this._resolveGraphStageTarget(runId, stageId) : { runId: stageRunId, stageId };
@@ -264,7 +269,7 @@ export class WorkflowAttachPane implements Component {
 		rootRunId: string,
 		stageId: string,
 	): { runId: string; stageId: string } | undefined {
-		const graph = expandWorkflowGraph(this.store.snapshot(), rootRunId);
+		const graph = expandWorkflowGraph(readGraphStoreSnapshot(this.store), rootRunId);
 		const exact = graph.stages.find((stage) => stage.id === stageId);
 		const localMatches = graph.stages.filter((stage) => stage.workflowGraphTarget.stageId === stageId);
 		if (exact === undefined && localMatches.length > 1) return undefined;
@@ -403,7 +408,7 @@ export class WorkflowAttachPane implements Component {
 			runId && this._runNeedsInput(runId) ? this.now() + ENTER_TRANSITION_QUARANTINE_MS : 0;
 	}
 	private _runNeedsInput(runId: string): boolean {
-		return this._runAwaitingInputKey(this.store.snapshot(), runId) !== null;
+		return this._runAwaitingInputKey(readGraphStoreSnapshot(this.store), runId) !== null;
 	}
 	private _runAwaitingInputKey(snapshot: StoreSnapshot, runId: string): string | null {
 		const run = snapshot.runs.find((candidate) => candidate.id === runId);
@@ -422,7 +427,7 @@ export class WorkflowAttachPane implements Component {
 		return keys[0]!.key;
 	}
 	private _stageNeedsInput(runId: string, stageId: string): boolean {
-		return this._stageAwaitingInputKey(this.store.snapshot(), runId, stageId) !== null;
+		return this._stageAwaitingInputKey(readGraphStoreSnapshot(this.store), runId, stageId) !== null;
 	}
 	private _stageAwaitingInputKey(snapshot: StoreSnapshot, runId: string, stageId: string): string | null {
 		const run = snapshot.runs.find((candidate) => candidate.id === runId);
@@ -448,7 +453,7 @@ export class WorkflowAttachPane implements Component {
 		return this._stageSnapshot(runId, stageId)?.attached === true;
 	}
 	private _stageSnapshot(runId: string, stageId: string): StageSnapshot | undefined {
-		const run = this.store.snapshot().runs.find((candidate) => candidate.id === runId);
+		const run = readGraphStoreSnapshot(this.store).runs.find((candidate) => candidate.id === runId);
 		return run?.stages.find((candidate) => candidate.id === stageId);
 	}
 	private _stageSnapshotNeedsInput(stage: Pick<StageSnapshot, "pendingPrompt" | "inputRequest" | "status">): boolean {