@bastani/atomic 0.9.11-alpha.9 → 0.9.11

package/dist/builtin/workflows/src/tui/session-overlays.ts

@@ -25,8 +25,10 @@
 
 import type { PiCustomComponent, PiCustomOverlayFactoryTui, PiCustomOverlayFunction } from "../extension/wiring.js";
 import type { Store } from "../shared/store.js";
+import { readGraphStoreSnapshot, subscribeStoreInvalidation } from "../shared/store-observation.js";
 import type { GraphTheme } from "./graph-theme.js";
 import {
+	createSessionPickerResumeCandidateCache,
 	createSessionPickerState,
 	handleSessionPickerInput,
 	renderSessionPicker,
@@ -80,6 +82,8 @@ export function openSessionPicker(
 		let settled = false;
 		let unsubscribe: (() => void) | null = null;
 
+		const resumeCandidateCache = createSessionPickerResumeCandidateCache();
+
 		const factory = (
 			tui: PiCustomOverlayFactoryTui,
 			_theme: unknown,
@@ -96,14 +100,31 @@ export function openSessionPicker(
 			};
 			// Re-render on store changes so newly-started runs appear and
 			// status icons refresh without the user having to press a key.
-			unsubscribe = store.subscribe(() => tui.requestRender?.());
+			// Read one memoized payload-free projection per render rather than
+			// caching a snapshot from the subscription callback: the
+			// invalidation channel carries no snapshot, so a cached one would
+			// go stale and newly-started runs would never appear.
+			const selectRows = (): ReturnType<typeof selectRunsForPicker> => {
+				const snapshot = readGraphStoreSnapshot(store);
+				const resumeCandidateLookup =
+					intent === "resume" ? resumeCandidateCache({ ...snapshot, runs: store.runs() }) : undefined;
+				return selectRunsForPicker(
+					snapshot.runs,
+					state.query,
+					state.includeAll,
+					Date.now(),
+					intent,
+					resumeCandidateLookup,
+				);
+			};
+			unsubscribe = subscribeStoreInvalidation(store, () => tui.requestRender?.());
 			return {
 				render: (width: number) => {
-					const rows = selectRunsForPicker(store.runs(), state.query, state.includeAll);
+					const rows = selectRows();
 					return renderSessionPicker({ width, theme, rows, state });
 				},
 				handleInput: (data: string) => {
-					const rows = selectRunsForPicker(store.runs(), state.query, state.includeAll);
+					const rows = selectRows();
 					const action = handleSessionPickerInput(data, state, rows);
 					if (action.kind === "noop") {
 						tui.requestRender?.();

package/dist/builtin/workflows/src/tui/session-picker.ts

@@ -19,11 +19,14 @@
  */
 
 import { keyText } from "@bastani/atomic";
+import { isWorkflowRunResumable, type WorkflowRunResumeCandidate } from "../durable/resume-eligibility.js";
 import { isTopLevelWorkflowRun } from "../shared/run-visibility.js";
-import type { RunSnapshot } from "../shared/store-types.js";
+import type { RunSnapshot, StoreSnapshot } from "../shared/store-types.js";
 import { elapsedRunMs } from "../shared/timing.js";
+import { workflowRunResumeCandidate } from "../shared/workflow-artifacts.js";
 import { BOLD, hexBg, hexToAnsi, RESET } from "./color-utils.js";
 import type { GraphTheme } from "./graph-theme.js";
+import { type IdentifierLine, wrapIdentifierLines } from "./run-identity-rows.js";
 import { fmtDuration, statusColor, statusIcon } from "./status-helpers.js";
 import { Key, matchesKey, truncateToWidth, visibleWidth } from "./text-helpers.js";
 
@@ -55,23 +58,54 @@ export interface PickerRow {
 	readonly bucket: "active" | "terminal";
 }
 
-const RECENT_WINDOW_MS = 60 * 60 * 1000;
+export type ResumeCandidateProbe = (run: RunSnapshot) => WorkflowRunResumeCandidate;
+export type ResumeCandidateLookup = (run: RunSnapshot) => WorkflowRunResumeCandidate;
+
+/** Cache resume probes for one store revision so render and input share the same filesystem/backend work. */
+export function createSessionPickerResumeCandidateCache(
+	probe: ResumeCandidateProbe = workflowRunResumeCandidate,
+): (snapshot: StoreSnapshot) => ResumeCandidateLookup {
+	let cachedVersion: number | undefined;
+	let cachedRuns: readonly RunSnapshot[] | undefined;
+	let sourceRuns = new Map<string, RunSnapshot>();
+	let candidates = new Map<string, WorkflowRunResumeCandidate>();
+
+	return (snapshot: StoreSnapshot): ResumeCandidateLookup => {
+		if (cachedVersion !== snapshot.version || cachedRuns !== snapshot.runs) {
+			cachedVersion = snapshot.version;
+			cachedRuns = snapshot.runs;
+			sourceRuns = new Map(snapshot.runs.map((run) => [run.id, run]));
+			candidates = new Map();
+		}
+		return (run: RunSnapshot): WorkflowRunResumeCandidate => {
+			const cached = candidates.get(run.id);
+			if (cached !== undefined) return cached;
+			const candidate = probe(sourceRuns.get(run.id) ?? run);
+			candidates.set(run.id, candidate);
+			return candidate;
+		};
+	};
+}
 
+const RECENT_WINDOW_MS = 60 * 60 * 1000;
 /**
  * Slice runs into picker rows. Active = `endedAt === undefined`. Terminal =
- * retained terminal runs. With `includeAll` false, terminal rows are limited
- * to the legacy recent-ended one-hour window.
- *
- * Sort: active first (newest start last in the list = bottom-of-pane),
- * then terminal newest-end first.
+ * retained terminal runs. Resume intent uses the shared resumability predicate;
+ * connect/attach and the legacy status list retain their broader listing.
+ * With `includeAll` false, terminal rows are limited to the recent-ended window.
  */
 export function selectRunsForPicker(
 	runs: readonly RunSnapshot[],
 	query: string,
 	includeAll: boolean,
 	now: number = Date.now(),
+	intent: "connect" | "resume" | "pause" = "connect",
+	resumeCandidateLookup?: ResumeCandidateLookup,
 ): PickerRow[] {
 	const q = query.trim().toLowerCase();
+	// Incremental search, not id resolution. The user narrows a list and then
+	// selects a row, and the selected run's full id is what gets acted on, so
+	// prefix matching here never targets a run by a truncated id.
 	const matches = (r: RunSnapshot): boolean => {
 		if (!q) return true;
 		return r.name.toLowerCase().includes(q) || r.id.startsWith(q);
@@ -82,7 +116,10 @@ export function selectRunsForPicker(
 	for (const r of runs) {
 		if (!isTopLevelWorkflowRun(r)) continue;
 		if (!matches(r)) continue;
-
+		if (intent === "resume") {
+			const candidate = resumeCandidateLookup?.(r) ?? workflowRunResumeCandidate(r);
+			if (!isWorkflowRunResumable(candidate)) continue;
+		}
 		const endedAt = r.endedAt;
 		if (endedAt === undefined) {
 			active.push({ run: r, bucket: "active" });
@@ -124,7 +161,8 @@ function renderHeader(width: number, theme: GraphTheme): string {
 	const inner = Math.max(4, width - 2);
 	const border = hexToAnsi(theme.border);
 	const accent = hexToAnsi(theme.accent);
-	const padded = ` ${TITLE} `;
+	const title = truncateToWidth(TITLE, Math.max(1, inner - 2), "…");
+	const padded = ` ${title} `;
 	const padLen = Math.max(0, inner - visibleWidth(padded));
 	const left = Math.min(2, padLen);
 	const right = padLen - left;
@@ -219,45 +257,60 @@ function stageProgress(run: RunSnapshot): string {
 	return `${done}/${total} stages`;
 }
 
-function renderRunRow(row: PickerRow, isSelected: boolean, inner: number, theme: GraphTheme, now: number): string {
+function renderRunRow(row: PickerRow, isSelected: boolean, inner: number, theme: GraphTheme, now: number): string[] {
 	const border = hexToAnsi(theme.border);
+	const panelBg = hexBg(theme.bg);
 	const run = row.run;
 	const icon = statusIcon(run.status);
-	const idShort = run.id.slice(0, 8);
+	const iconColor = hexToAnsi(statusColor(run.status, theme));
+	const dim = hexToAnsi(theme.dim);
+	const text = hexToAnsi(theme.text);
+	const muted = hexToAnsi(theme.textMuted);
+
+	// The full identifier owns its own row. It is never ellipsized; narrow
+	// overlays wrap it into continuation rows so the box remains intact.
+	const idRows = wrapIdentifierLines(run.id, inner, ` ${icon} `, "   ");
+	const renderIdRow = ({ prefix, chunk }: IdentifierLine, index: number): string => {
+		if (isSelected) {
+			return `${border}│${RESET}${hexBg(theme.accent)}${hexToAnsi(theme.backgroundElement)}${BOLD}${padTo(
+				`${prefix}${chunk}`,
+				inner,
+			)}${RESET}${border}│${RESET}`;
+		}
+		const content =
+			index === 0
+				? ` ${iconColor}${icon}${RESET}${panelBg} ${dim}${chunk}${RESET}${panelBg}`
+				: `   ${dim}${chunk}${RESET}${panelBg}`;
+		return `${border}│${RESET}${panelBg}${padTo(content, inner)}${border}│${RESET}`;
+	};
+
 	const elapsed = fmtElapsed(run, now);
 	const progress = stageProgress(run);
-
-	// Layout columns: glyph(1) idShort(8) name(flex) elapsed(R) progress(R).
-	// Name budgeting is done by visible cell width so wide workflow names
-	// cannot push the elapsed/progress columns through the right border.
 	const elapsedCol = elapsed.padStart(8, " ");
 	const progressCol = progress.padStart(10, " ");
 	const rightPlain = `${elapsedCol}   ${progressCol} `;
-	const namePrefixW = visibleWidth(` ${icon} ${idShort}  `);
-	const nameBudget = Math.max(1, inner - namePrefixW - visibleWidth(rightPlain) - 1);
+	const rightBudget = Math.max(1, inner - 5);
+	const rightVisible = truncateToWidth(rightPlain, rightBudget, "…");
+	const right =
+		visibleWidth(rightVisible) < visibleWidth(rightPlain)
+			? `${dim}${rightVisible}${RESET}${panelBg}`
+			: `${muted}${elapsedCol}${RESET}${panelBg}   ${dim}${progressCol}${RESET}${panelBg} `;
+	const nameBudget = Math.max(1, inner - 3 - visibleWidth(rightVisible) - 1);
 	const name = truncateToWidth(run.name, nameBudget, "…");
 
-	if (isSelected) {
-		const pillBg = hexBg(theme.accent);
-		const pillFg = hexToAnsi(theme.backgroundElement);
-		const left = ` ${icon} ${idShort}  ${name}`;
-		const right = rightPlain;
-		const gap = Math.max(1, inner - visibleWidth(left) - visibleWidth(right));
-		const content = `${left}${" ".repeat(gap)}${right}`;
-		return `${border}│${RESET}${pillBg}${pillFg}${BOLD}${padTo(content, inner)}${RESET}${border}│${RESET}`;
-	}
-
-	const panelBg = hexBg(theme.bg);
-	const iconColor = hexToAnsi(statusColor(run.status, theme));
-	const dim = hexToAnsi(theme.dim);
-	const text = hexToAnsi(theme.text);
-	const muted = hexToAnsi(theme.textMuted);
-
-	const left = ` ${iconColor}${icon}${RESET}${panelBg} ${dim}${idShort}${RESET}${panelBg}  ${text}${name}${RESET}${panelBg}`;
-	const right = `${muted}${elapsedCol}${RESET}${panelBg}   ${dim}${progressCol}${RESET}${panelBg} `;
-	const gap = Math.max(1, inner - visibleWidth(left) - visibleWidth(right));
-	const content = `${left}${" ".repeat(gap)}${right}`;
-	return `${border}│${RESET}${panelBg}${padTo(content, inner)}${RESET}${border}│${RESET}`;
+	const nameRow = isSelected
+		? `${border}│${RESET}${hexBg(theme.accent)}${hexToAnsi(theme.backgroundElement)}${BOLD}${padTo(
+				`   ${name}${" ".repeat(Math.max(1, inner - 3 - visibleWidth(name) - visibleWidth(rightVisible)))}${rightVisible}`,
+				inner,
+			)}${RESET}${border}│${RESET}`
+		: `${border}│${RESET}${panelBg}${padTo(
+				`   ${text}${name}${RESET}${panelBg}${" ".repeat(
+					Math.max(1, inner - 3 - visibleWidth(name) - visibleWidth(right)),
+				)}${right}`,
+				inner,
+			)}${border}│${RESET}`;
+
+	return [...idRows.map(renderIdRow), nameRow];
 }
 
 function renderEmptyState(inner: number, theme: GraphTheme): string {
@@ -269,12 +322,12 @@ function renderEmptyState(inner: number, theme: GraphTheme): string {
 	return `${border}│${RESET}${panelBg}${padTo(content, inner)}${RESET}${border}│${RESET}`;
 }
 
-const VIEWPORT = 10;
+const VIEWPORT = 5;
 
 export function renderSessionPicker(opts: SessionPickerRenderOpts): string[] {
 	const { width, theme, rows, state } = opts;
 	const now = opts.now ?? Date.now();
-	const inner = Math.max(40, width - 2);
+	const inner = Math.max(4, width - 2);
 
 	const lines: string[] = [];
 	lines.push(renderHeader(width, theme));
@@ -303,7 +356,7 @@ export function renderSessionPicker(opts: SessionPickerRenderOpts): string[] {
 			prevBucket = row.bucket;
 		}
 		const absIndex = Math.max(0, start) + i;
-		lines.push(renderRunRow(row, absIndex === sel, inner, theme, now));
+		lines.push(...renderRunRow(row, absIndex === sel, inner, theme, now));
 	}
 	lines.push(renderBlankRow(inner, theme));
 	lines.push(renderBottomBorder(width, theme));

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

@@ -2,7 +2,12 @@ import { Box, Text } from "@earendil-works/pi-tui";
 import type { PendingPrompt, StageSnapshot } from "../shared/store-types.js";
 import { renderRoundedBoxLines } from "./chat-surface.js";
 import { hexToAnsi, RESET } from "./color-utils.js";
-import { renderPromptCard } from "./prompt-card.js";
+import {
+	type PromptCardLayout,
+	renderPromptCardLayout,
+	renderPromptIdentityBanner,
+	renderPromptRunIdBanner,
+} from "./prompt-card-render.js";
 import { bannerLines, embedOrchestratorReturnHintInWidget } from "./stage-chat-view-footer-status.js";
 import {
 	blankLine,
@@ -205,24 +210,46 @@ export function renderBlockedBody(
 }
 
 export function renderPromptBody(ctx: StageChatViewContext, width: number, budget: number): string[] {
-	const primitiveLines = renderPrimitivePromptBody(ctx, width);
-	if (primitiveLines) {
-		return fitPromptBodyLines(ctx, embedOrchestratorReturnHintInWidget(ctx, primitiveLines, width), width, budget);
+	const primitiveLayout = renderPrimitivePromptBody(ctx, width, budget);
+	if (primitiveLayout) {
+		return fitPromptBodyLines(
+			ctx,
+			embedPromptReturnHint(ctx, primitiveLayout.lines, width),
+			width,
+			budget,
+			Math.max(0, primitiveLayout.totalQuestionRows - primitiveLayout.visibleQuestionRows),
+			true,
+			primitiveLayout.visibleQuestionRows,
+		);
 	}
 
 	const state = ctx.promptState;
-	const lines = state
-		? renderPromptCard({
-				state,
-				theme: ctx.theme,
-				width,
-				cursorOn: ctx.focused,
-			})
-		: [];
-	return fitPromptBodyLines(ctx, embedOrchestratorReturnHintInWidget(ctx, lines, width), width, budget);
+	if (!state) return fitPromptBodyLines(ctx, [], width, budget);
+	const layout = renderPromptCardLayout({
+		state,
+		theme: ctx.theme,
+		width,
+		cursorOn: ctx.focused,
+		identity: { runId: ctx.runId, name: ctx.workflowName },
+		maxRows: budget,
+		messageOffset: ctx.promptScrollOffset,
+	});
+	return fitPromptBodyLines(
+		ctx,
+		embedPromptReturnHint(ctx, layout.lines, width),
+		width,
+		budget,
+		Math.max(0, layout.totalQuestionRows - layout.visibleQuestionRows),
+		true,
+		layout.visibleQuestionRows,
+	);
+}
+
+function embedPromptReturnHint(ctx: StageChatViewContext, lines: readonly string[], width: number): string[] {
+	return lines.length < 3 ? [...lines] : embedOrchestratorReturnHintInWidget(ctx, lines, width);
 }
 
-function renderPrimitivePromptBody(ctx: StageChatViewContext, width: number): string[] | null {
+function renderPrimitivePromptBody(ctx: StageChatViewContext, width: number, budget: number): PromptCardLayout | null {
 	const state = ctx.promptState;
 	const editor = ctx.promptEditor;
 	if (!state || !editor) return null;
@@ -230,19 +257,151 @@ function renderPrimitivePromptBody(ctx: StageChatViewContext, width: number): st
 	setEditorBorderColor(editor, (text) => hexToAnsi(ctx.theme.accent) + text + RESET);
 
 	const innerWidth = Math.max(2, width - 2);
-	const bodyLines: string[] = [];
-	const messageBox = new Box(2, 1);
-	messageBox.addChild(new Text(paint(state.prompt.message, ctx.theme.text), 0, 0));
-	bodyLines.push(...messageBox.render(innerWidth));
-	bodyLines.push(...new Text(paint("response", ctx.theme.textMuted, { bold: true }), 2, 0).render(innerWidth));
-	for (const line of editor.render(Math.max(20, innerWidth - 4))) {
-		bodyLines.push(`  ${line}`);
+	const messageLines = new Text(paint(state.prompt.message, ctx.theme.text), 2, 0).render(innerWidth);
+	const responseLines = new Text(paint("response", ctx.theme.textMuted, { bold: true }), 2, 0).render(innerWidth);
+	const editorLines = editor.render(Math.max(20, innerWidth - 4)).map((line) => `  ${line}`);
+	const hintLines = new Text(renderHintsForPrompt(state.prompt.kind, ctx.theme), 2, 0).render(innerWidth);
+	const identity = { runId: ctx.runId, name: ctx.workflowName };
+	const unattributed = renderPrimitivePromptBlockLayout(
+		ctx,
+		width,
+		budget,
+		"AWAITING INPUT",
+		messageLines,
+		responseLines,
+		editorLines,
+		hintLines,
+	);
+	const minimumPromptRows = 2 + editorLines.length + hintLines.length + (messageLines.length > 0 ? 1 : 0);
+	// Same degradation ladder as the standard prompt surface: two identity rows,
+	// then the run id alone, then no banner. The middle rung matters most here,
+	// because the editor and hint rows leave the least room for attribution.
+	const banners = [
+		renderPromptIdentityBanner(identity, ctx.theme, width),
+		renderPromptRunIdBanner(identity, ctx.theme, width),
+	];
+	for (const banner of banners) {
+		const promptBudget = Math.max(0, budget - banner.length);
+		const attributed = renderPrimitivePromptBlockLayout(
+			ctx,
+			width,
+			promptBudget,
+			"",
+			messageLines,
+			responseLines,
+			editorLines,
+			hintLines,
+		);
+		if (
+			banner.length + minimumPromptRows > budget ||
+			attributed.visibleQuestionRows === 0 ||
+			attributed.visibleQuestionRows < unattributed.visibleQuestionRows
+		) {
+			continue;
+		}
+		return {
+			lines: [...banner, ...attributed.lines],
+			totalQuestionRows: attributed.totalQuestionRows,
+			visibleQuestionRows: attributed.visibleQuestionRows,
+		};
 	}
-	bodyLines.push("");
-	bodyLines.push(...new Text(renderHintsForPrompt(state.prompt.kind, ctx.theme), 2, 0).render(innerWidth));
+	return unattributed;
+}
+
+function renderPrimitivePromptBlockLayout(
+	ctx: StageChatViewContext,
+	width: number,
+	maxRows: number,
+	title: string,
+	messageLines: readonly string[],
+	responseLines: readonly string[],
+	editorLines: readonly string[],
+	hintLines: readonly string[],
+): PromptCardLayout {
+	const totalQuestionRows = messageLines.length;
+	if (maxRows === 0) return { lines: [], totalQuestionRows, visibleQuestionRows: 0 };
+	const fixedRows = 2 + editorLines.length + hintLines.length;
+	if (maxRows < fixedRows + (totalQuestionRows > 0 ? 1 : 0)) {
+		return renderReducedPrimitivePrompt(ctx, width, maxRows, messageLines, title);
+	}
+
+	let remaining = maxRows - fixedRows;
+	let messageCount = totalQuestionRows > 0 ? 1 : 0;
+	remaining -= messageCount;
+	const includeResponse = remaining >= responseLines.length;
+	if (includeResponse) remaining -= responseLines.length;
+	const extraMessageRows = Math.min(remaining, Math.max(0, totalQuestionRows - messageCount));
+	messageCount += extraMessageRows;
+	remaining -= extraMessageRows;
+	const includeBlank = remaining > 0;
+	const safeOffset = Math.min(ctx.promptScrollOffset, Math.max(0, totalQuestionRows - messageCount));
+	const bodyLines = [
+		...messageLines.slice(safeOffset, safeOffset + messageCount),
+		...(includeResponse ? responseLines : []),
+		...editorLines,
+		...(includeBlank ? [""] : []),
+		...hintLines,
+	];
+	return {
+		lines: renderPrimitivePromptBlock(ctx, width, title, bodyLines),
+		totalQuestionRows,
+		visibleQuestionRows: messageCount,
+	};
+}
 
+function renderReducedPrimitivePrompt(
+	ctx: StageChatViewContext,
+	width: number,
+	maxRows: number,
+	messageLines: readonly string[],
+	title: string,
+): PromptCardLayout {
+	const totalQuestionRows = messageLines.length;
+	const compactTitle = "AWAITING INPUT";
+	if (maxRows === 1) {
+		return {
+			lines: [paint(`${compactTitle} · enter Submit`, ctx.theme.textMuted, { bold: true })],
+			totalQuestionRows,
+			visibleQuestionRows: 0,
+		};
+	}
+	if (maxRows === 2) {
+		const closed = renderPrimitivePromptBlock(ctx, width, compactTitle, []);
+		return {
+			lines: [closed[0]!, closed.at(-1)!],
+			totalQuestionRows,
+			visibleQuestionRows: 0,
+		};
+	}
+
+	const availableBodyRows = maxRows - 2;
+	const supportingRows = availableBodyRows >= 3 ? 2 : Math.max(0, availableBodyRows - 1);
+	const messageCount = Math.min(totalQuestionRows, Math.max(1, availableBodyRows - supportingRows));
+	const safeOffset = Math.min(ctx.promptScrollOffset, Math.max(0, totalQuestionRows - messageCount));
+	const responseLine = paint(
+		availableBodyRows >= 3 ? "  response" : "  response · enter Submit",
+		ctx.theme.textMuted,
+		{ bold: true },
+	);
+	const hintLine = renderHintsForPrompt(ctx.promptState?.prompt.kind ?? "input", ctx.theme);
+	return {
+		lines: renderPrimitivePromptBlock(ctx, width, maxRows < 5 ? compactTitle : title || "AWAITING INPUT", [
+			...messageLines.slice(safeOffset, safeOffset + messageCount),
+			...(availableBodyRows >= 2 ? [responseLine] : []),
+			...(availableBodyRows >= 3 ? [hintLine] : []),
+		]),
+		totalQuestionRows,
+		visibleQuestionRows: messageCount,
+	};
+}
+function renderPrimitivePromptBlock(
+	ctx: StageChatViewContext,
+	width: number,
+	title: string,
+	bodyLines: readonly string[],
+): string[] {
 	return renderRoundedBoxLines({
-		title: "AWAITING INPUT",
+		title,
 		bodyLines,
 		width,
 		theme: ctx.theme,
@@ -255,10 +414,15 @@ export function fitPromptBodyLines(
 	lines: readonly string[],
 	width: number,
 	budget: number,
+	maxScroll = Math.max(0, lines.length - budget),
+	scrollApplied = false,
+	visibleRows = Math.min(lines.length, budget),
 ): string[] {
-	ctx.promptMaxScroll = Math.max(0, lines.length - budget);
+	ctx.promptMaxScroll = Math.max(0, maxScroll);
+	ctx.promptVisibleRows = Math.max(0, visibleRows);
 	ctx.promptScrollOffset = Math.max(0, Math.min(ctx.promptScrollOffset, ctx.promptMaxScroll));
-	const framed = lines.slice(ctx.promptScrollOffset, ctx.promptScrollOffset + budget);
+	const start = scrollApplied ? 0 : ctx.promptScrollOffset;
+	const framed = lines.slice(start, start + budget);
 	while (framed.length < budget) framed.push(blankLine(width));
 	return framed;
 }

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

@@ -2,6 +2,7 @@ import type { AgentSession } from "@bastani/atomic";
 import { Box, Text } from "@earendil-works/pi-tui";
 import type { StageSnapshot } from "../shared/store-types.js";
 import { hexToAnsi, RESET } from "./color-utils.js";
+import { wrapIdentifierLines } from "./run-identity-rows.js";
 import {
 	bgFn,
 	blendBg,
@@ -17,30 +18,63 @@ import { truncateToWidth, visibleWidth } from "./text-helpers.js";
 export function renderHeader(ctx: StageChatViewContext, width: number, stage: StageSnapshot | undefined): string[] {
 	const t = ctx.theme;
 	const stageName = stage?.name ?? "stage";
-	const left =
+	const sid = ctx.handle?.sessionId ?? stage?.sessionId;
+	const prefixWidth = visibleWidth("   STAGE  ");
+	const separatorWidth = visibleWidth(" / ");
+	const meta = sid ? `session ${sid}` : "";
+	const rightWidth = meta ? visibleWidth(meta) + 1 : 0;
+	const singleRowNameBudget = width - prefixWidth - separatorWidth - rightWidth - (meta ? 1 : 0);
+
+	const fullNameWidth = visibleWidth(ctx.workflowName) + visibleWidth(stageName);
+	if (!sid || singleRowNameBudget >= fullNameWidth) {
+		const names = fitHeaderNames(ctx.workflowName, stageName, Math.max(2, singleRowNameBudget));
+		const left = renderHeaderLeft(ctx, names.workflow, names.stage);
+		const right = meta ? `${paint(meta, t.dim)} ` : "";
+		const gap = Math.max(0, width - visibleWidth(left) - visibleWidth(right));
+		return [left + " ".repeat(gap) + right];
+	}
+
+	const names = fitHeaderNames(ctx.workflowName, stageName, Math.max(2, width - prefixWidth - separatorWidth));
+	const left = renderHeaderLeft(ctx, names.workflow, names.stage);
+	const lines = [left + " ".repeat(Math.max(0, width - visibleWidth(left)))];
+	if (visibleWidth(meta) + 1 <= width) {
+		lines.push(`${" ".repeat(Math.max(0, width - visibleWidth(meta) - 1))}${paint(meta, t.dim)} `);
+		return lines;
+	}
+	for (const row of wrapIdentifierLines(sid, width, "   ", "   ")) {
+		const value = `${row.prefix}${paint(row.chunk, t.dim)}`;
+		lines.push(value + " ".repeat(Math.max(0, width - visibleWidth(value))));
+	}
+	return lines;
+}
+
+function renderHeaderLeft(ctx: StageChatViewContext, workflowName: string, stageName: string): string {
+	const t = ctx.theme;
+	return (
 		paint("   ", t.mauve, { bold: true }) +
 		paint("STAGE", t.textMuted, { bold: true }) +
 		"  " +
-		paint(ctx.workflowName, t.textMuted) +
+		paint(workflowName, t.textMuted) +
 		paint(" / ", t.dim) +
-		paint(stageName, t.text, { bold: true });
-	const meta = headerMeta(ctx, stage);
-	const right = meta ? `${paint(meta, t.dim)} ` : "";
-	const leftW = visibleWidth(ctx.workflowName) + visibleWidth(stageName) + visibleWidth("  STAGE   /  ") + 1;
-	const rightW = visibleWidth(meta) + (meta ? 1 : 0);
-	const gap = Math.max(1, width - leftW - rightW);
-	return [left + " ".repeat(gap) + right];
+		paint(stageName, t.text, { bold: true })
+	);
 }
 
-function headerMeta(ctx: StageChatViewContext, stage: StageSnapshot | undefined): string {
-	const parts: string[] = [];
-	const sid = ctx.handle?.sessionId ?? stage?.sessionId;
-	if (sid) parts.push(`session ${shortenId(sid)}`);
-	return parts.join(" · ");
-}
-
-function shortenId(id: string): string {
-	return id.length > 10 ? id.slice(0, 8) : id;
+function fitHeaderNames(workflowName: string, stageName: string, budget: number): { workflow: string; stage: string } {
+	const available = Math.max(2, budget);
+	const workflowWidth = visibleWidth(workflowName);
+	const stageWidth = visibleWidth(stageName);
+	let workflowBudget = Math.min(workflowWidth, Math.max(1, Math.ceil(available / 2)));
+	let stageBudget = Math.min(stageWidth, Math.max(1, available - workflowBudget));
+	let remaining = available - workflowBudget - stageBudget;
+	const workflowExtra = Math.min(remaining, Math.max(0, workflowWidth - workflowBudget));
+	workflowBudget += workflowExtra;
+	remaining -= workflowExtra;
+	stageBudget += Math.min(remaining, Math.max(0, stageWidth - stageBudget));
+	return {
+		workflow: truncateToWidth(workflowName, workflowBudget, "…"),
+		stage: truncateToWidth(stageName, stageBudget, "…"),
+	};
 }
 
 export function sepRule(ctx: StageChatViewContext, width: number): string {

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

@@ -56,7 +56,7 @@ export function handleStageChatInput(ctx: StageChatViewContext, data: string): b
 			return ctx.chatHost.handleInput(data);
 		}
 		if (isAbortableStreamingSession(ctx)) {
-			void ctx.chatHost.interrupt();
+			void ctx.chatHost.interrupt({ restoreQueuedMessages: true });
 			return true;
 		}
 		ctx.onClose();
@@ -160,8 +160,8 @@ function handlePromptInput(ctx: StageChatViewContext, data: string): void {
 function handlePromptScrollInput(ctx: StageChatViewContext, data: string, includeKeyboard = true): boolean {
 	const mouse = parseTerminalMouseInput(data);
 	const wheelDirection = mouse ? terminalMouseWheelDirection(mouse) : null;
-	const wheelDeltaRows =
-		wheelDirection === "up" ? -PROMPT_SCROLL_STEP_ROWS : wheelDirection === "down" ? PROMPT_SCROLL_STEP_ROWS : 0;
+	const wheelStep = promptScrollStep(ctx, PROMPT_SCROLL_STEP_ROWS);
+	const wheelDeltaRows = wheelDirection === "up" ? -wheelStep : wheelDirection === "down" ? wheelStep : 0;
 	if (wheelDeltaRows !== 0) {
 		scrollPromptBy(ctx, wheelDeltaRows);
 		return true;
@@ -169,11 +169,11 @@ function handlePromptScrollInput(ctx: StageChatViewContext, data: string, includ
 	if (mouse) return true;
 	if (!includeKeyboard) return false;
 	if (matchesKey(data, "pageUp")) {
-		scrollPromptBy(ctx, -promptPageSize(ctx));
+		scrollPromptBy(ctx, -promptScrollStep(ctx, promptPageSize(ctx)));
 		return true;
 	}
 	if (matchesKey(data, "pageDown")) {
-		scrollPromptBy(ctx, promptPageSize(ctx));
+		scrollPromptBy(ctx, promptScrollStep(ctx, promptPageSize(ctx)));
 		return true;
 	}
 	if (!ctx.promptEditor && matchesKey(data, "home")) {
@@ -189,6 +189,10 @@ function handlePromptScrollInput(ctx: StageChatViewContext, data: string, includ
 	return false;
 }
 
+function promptScrollStep(ctx: StageChatViewContext, requestedRows: number): number {
+	return Math.max(1, Math.min(requestedRows, Math.max(1, ctx.promptVisibleRows)));
+}
+
 function scrollPromptBy(ctx: StageChatViewContext, deltaRows: number): void {
 	ctx.promptScrollOffset = Math.max(0, Math.min(ctx.promptMaxScroll, ctx.promptScrollOffset + deltaRows));
 	ctx.requestRender?.();