pi-subagents 0.29.0 → 0.31.0

package/src/tui/render.ts

@@ -88,6 +88,33 @@ function truncLine(text: string, maxWidth: number): string {
 	return result + activeStyles.join("") + "…";
 }
 
+function wrapPlainText(text: string, maxWidth: number): string[] {
+	if (maxWidth <= 0) return [""];
+	const lines: string[] = [];
+	for (const rawLine of text.split("\n")) {
+		if (rawLine.length === 0) {
+			lines.push("");
+			continue;
+		}
+		let current = "";
+		let currentWidth = 0;
+		for (const seg of segmenter.segment(rawLine)) {
+			const grapheme = seg.segment;
+			const graphemeWidth = visibleWidth(grapheme);
+			if (currentWidth > 0 && currentWidth + graphemeWidth > maxWidth) {
+				lines.push(current);
+				current = grapheme;
+				currentWidth = graphemeWidth;
+				continue;
+			}
+			current += grapheme;
+			currentWidth += graphemeWidth;
+		}
+		lines.push(current);
+	}
+	return lines;
+}
+
 const RUNNING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const STATIC_RUNNING_GLYPH = "●";
 
@@ -134,7 +161,7 @@ export function clearLegacyResultAnimationTimer(context: LegacyResultAnimationCo
 function extractOutputTarget(task: string): string | undefined {
 	const writeToMatch = task.match(/\[Write to:\s*([^\]\n]+)\]/i);
 	if (writeToMatch?.[1]?.trim()) return writeToMatch[1].trim();
-	const findingsMatch = task.match(/Write your findings to:\s*(\S+)/i);
+	const findingsMatch = task.match(/Write your findings to(?: exactly this path)?:\s*([^\r\n]+)/i);
 	if (findingsMatch?.[1]?.trim()) return findingsMatch[1].trim();
 	const outputMatch = task.match(/[Oo]utput(?:\s+to)?\s*:\s*(\S+)/i);
 	if (outputMatch?.[1]?.trim()) return outputMatch[1].trim();
@@ -231,8 +258,11 @@ function resultStatusLine(result: Details["results"][number], output: string): s
 	return "Done";
 }
 
-function resultGlyph(result: Details["results"][number], output: string, theme: Theme, running = result.progress?.status === "running", seed = progressRunningSeed(result.progress ?? result.progressSummary)): string {
-	if (running) return theme.fg("accent", runningGlyph(seed));
+function resultGlyph(result: Details["results"][number], output: string, theme: Theme, running = result.progress?.status === "running", seed = progressRunningSeed(result.progress ?? result.progressSummary), frame?: number): string {
+	if (running) {
+		if (frame !== undefined) return theme.fg("accent", runningGlyph((seed ?? 0) + frame));
+		return theme.fg("accent", runningGlyph(seed));
+	}
 	if (result.detached) return theme.fg("warning", "■");
 	if (result.interrupted) return theme.fg("warning", "■");
 	if (result.exitCode !== 0) return theme.fg("error", "✗");
@@ -899,11 +929,189 @@ function compactSingleWidgetLines(job: AsyncJobState, theme: Theme, width: numbe
 	return lines.map((line) => truncLine(line, width));
 }
 
+type WidgetRenderTier = "full" | "single-line" | "progressive";
+
+interface WidgetLayoutSession {
+	expanded: boolean;
+	rows: number;
+	columns: number;
+	tier: WidgetRenderTier;
+	lockedRows?: number;
+	visibleJobKeys: string[];
+}
+
+const RESERVED_NON_WIDGET_ROWS = 19;
+
+let widgetLayoutSession: WidgetLayoutSession | undefined;
+
+function resetWidgetLayoutSession(): void {
+	widgetLayoutSession = undefined;
+}
+
+function estimateAvailableWidgetRows(): number {
+	const rows = process.stdout.rows || 30;
+	return Math.max(1, rows - RESERVED_NON_WIDGET_ROWS);
+}
+
+function currentTerminalRows(): number {
+	return process.stdout.rows || 30;
+}
+
+function currentTerminalColumns(): number {
+	return process.stdout.columns || 120;
+}
+
+function widgetSessionMatches(expanded: boolean): boolean {
+	return widgetLayoutSession?.expanded === expanded
+		&& widgetLayoutSession.rows === currentTerminalRows()
+		&& widgetLayoutSession.columns === currentTerminalColumns();
+}
+
+function widgetHeaderCounts(jobs: AsyncJobState[]): { running: AsyncJobState[]; queued: AsyncJobState[]; complete: AsyncJobState[]; failed: AsyncJobState[]; paused: AsyncJobState[] } {
+	return {
+		running: jobs.filter((job) => job.status === "running"),
+		queued: jobs.filter((job) => job.status === "queued"),
+		complete: jobs.filter((job) => job.status === "complete"),
+		failed: jobs.filter((job) => job.status === "failed"),
+		paused: jobs.filter((job) => job.status === "paused"),
+	};
+}
+
+function buildSingleLineWidgetLines(jobs: AsyncJobState[], theme: Theme, width: number): string[] {
+	const counts = widgetHeaderCounts(jobs);
+	const hasActive = counts.running.length > 0 || counts.queued.length > 0;
+	const glyph = counts.running.length > 0 ? runningGlyph(widgetJobsRunningSeed(counts.running)) : hasActive ? "●" : "○";
+	const parts: string[] = [];
+	if (counts.running.length > 0) parts.push(`${counts.running.length}/${jobs.length} running`);
+	if (counts.queued.length > 0) parts.push(`${counts.queued.length} queued`);
+	if (counts.failed.length > 0) parts.push(`${counts.failed.length} failed`);
+	if (counts.paused.length > 0) parts.push(`${counts.paused.length} paused`);
+	if (!hasActive && counts.complete.length > 0) parts.push(`${counts.complete.length}/${jobs.length} done`);
+	return [truncLine(`${theme.fg(hasActive ? "accent" : "dim", glyph)} ${theme.fg(hasActive ? "accent" : "dim", "subagents")} (${parts.join(", ") || `${jobs.length} total`})`, width)];
+}
+
+function orderedWidgetJobs(jobs: AsyncJobState[]): AsyncJobState[] {
+	return [
+		...jobs.filter((job) => job.status === "running"),
+		...jobs.filter((job) => job.status === "queued"),
+		...jobs.filter((job) => job.status !== "running" && job.status !== "queued"),
+	];
+}
+
+function progressiveJobKey(job: AsyncJobState): string {
+	return job.asyncId;
+}
+
+function isProgressiveActiveJob(job: AsyncJobState | undefined): boolean {
+	return job?.status === "running" || job?.status === "queued";
+}
+
+function selectProgressiveJobKeys(jobs: AsyncJobState[], previousKeys: string[], bodyRows: number): string[] {
+	if (bodyRows <= 0) return [];
+	const jobsByKey = new Map(jobs.map((job) => [progressiveJobKey(job), job]));
+	const selected: string[] = [];
+	const append = (key: string): void => {
+		if (selected.includes(key) || !jobsByKey.has(key)) return;
+		selected.push(key);
+	};
+	for (const key of previousKeys) {
+		if (!isProgressiveActiveJob(jobsByKey.get(key))) continue;
+		append(key);
+		if (selected.length >= bodyRows) return selected;
+	}
+	for (const job of orderedWidgetJobs(jobs)) {
+		if (!isProgressiveActiveJob(job)) continue;
+		const key = progressiveJobKey(job);
+		append(key);
+		if (selected.length >= bodyRows) break;
+	}
+	if (selected.length >= bodyRows) return selected;
+	for (const key of previousKeys) {
+		if (isProgressiveActiveJob(jobsByKey.get(key))) continue;
+		append(key);
+		if (selected.length >= bodyRows) return selected;
+	}
+	for (const job of orderedWidgetJobs(jobs)) {
+		const key = progressiveJobKey(job);
+		append(key);
+		if (selected.length >= bodyRows) break;
+	}
+	return selected;
+}
+
+function progressiveHeaderLine(jobs: AsyncJobState[], theme: Theme, width: number): string {
+	const counts = widgetHeaderCounts(jobs);
+	const hasActive = counts.running.length > 0 || counts.queued.length > 0;
+	const glyph = counts.running.length > 0 ? runningGlyph(widgetJobsRunningSeed(counts.running)) : hasActive ? "●" : "○";
+	const parts: string[] = [];
+	if (counts.running.length > 0) parts.push(formatAgentRunningLabel(counts.running.length));
+	if (counts.queued.length > 0) parts.push(`${counts.queued.length} queued`);
+	if (!hasActive) {
+		if (counts.failed.length > 0) parts.push(`${counts.failed.length} failed`);
+		if (counts.paused.length > 0) parts.push(`${counts.paused.length} paused`);
+		if (counts.complete.length > 0) parts.push(`${counts.complete.length}/${jobs.length} done`);
+	}
+	return truncLine(`${theme.fg(hasActive ? "accent" : "dim", glyph)} ${theme.fg(hasActive ? "accent" : "dim", "Async agents")} ${theme.fg("dim", "·")} ${theme.fg("dim", parts.join(", ") || `${jobs.length} total`)}`, width);
+}
+
+function progressiveJobLine(job: AsyncJobState, theme: Theme, width: number): string {
+	const stats = widgetStats(job, theme);
+	const activity = widgetActivity(job);
+	const status = job.status === "complete" ? "done" : job.status;
+	const parts = [
+		themeBold(theme, widgetJobName(job)),
+		theme.fg("dim", status),
+		stats,
+		activity && activity.toLowerCase() !== status ? theme.fg("dim", activity) : "",
+	].filter(Boolean);
+	return truncLine(`  ${widgetStatusGlyph(job, theme)} ${parts.join(` ${theme.fg("dim", "·")} `)}`, width);
+}
+
+function progressiveHiddenLine(hiddenJobs: AsyncJobState[], theme: Theme, width: number): string {
+	const counts = widgetHeaderCounts(hiddenJobs);
+	const parts: string[] = [];
+	if (counts.running.length > 0) parts.push(`${counts.running.length} running`);
+	if (counts.queued.length > 0) parts.push(`${counts.queued.length} queued`);
+	const finished = counts.complete.length + counts.failed.length + counts.paused.length;
+	if (finished > 0) parts.push(`${finished} finished`);
+	return truncLine(theme.fg("dim", `  +${hiddenJobs.length} more${parts.length ? ` (${parts.join(", ")})` : ""}`), width);
+}
+
+function buildProgressiveWidgetLines(jobs: AsyncJobState[], theme: Theme, width: number, lockedRows: number, previousKeys: string[]): { lines: string[]; visibleJobKeys: string[] } {
+	const rowCount = Math.max(1, lockedRows);
+	if (rowCount === 1) return { lines: buildSingleLineWidgetLines(jobs, theme, width), visibleJobKeys: [] };
+
+	const bodyRows = rowCount - 1;
+	let visibleJobKeys = selectProgressiveJobKeys(jobs, previousKeys, bodyRows);
+	const jobsByKey = new Map(jobs.map((job) => [progressiveJobKey(job), job]));
+	let visibleJobs = visibleJobKeys.map((key) => jobsByKey.get(key)).filter((job): job is AsyncJobState => Boolean(job));
+	let hiddenJobs = jobs.filter((job) => !visibleJobKeys.includes(progressiveJobKey(job)));
+	const needsHiddenLine = hiddenJobs.length > 0;
+
+	if (needsHiddenLine && visibleJobs.length >= bodyRows && bodyRows > 0) {
+		visibleJobs = visibleJobs.slice(0, bodyRows - 1);
+		visibleJobKeys = visibleJobs.map(progressiveJobKey);
+		hiddenJobs = jobs.filter((job) => !visibleJobKeys.includes(progressiveJobKey(job)));
+	}
+
+	const lines = [
+		progressiveHeaderLine(jobs, theme, width),
+		...visibleJobs.map((job) => progressiveJobLine(job, theme, width)),
+	];
+	if (hiddenJobs.length > 0 && lines.length < rowCount) lines.push(progressiveHiddenLine(hiddenJobs, theme, width));
+	while (lines.length < rowCount) lines.push(" ");
+	return { lines: lines.slice(0, rowCount), visibleJobKeys };
+}
+
+function collapsedWidgetLineBudget(rows: number): number {
+	return Math.max(10, Math.min(14, Math.floor(rows * 0.35)));
+}
+
 function fitWidgetLineBudget(lines: string[], theme: Theme, width: number, expanded: boolean): string[] {
 	const rows = process.stdout.rows || 30;
 	const budget = expanded
 		? Math.max(12, Math.min(24, Math.floor(rows * 0.55)))
-		: Math.max(10, Math.min(14, Math.floor(rows * 0.35)));
+		: collapsedWidgetLineBudget(rows);
 	if (lines.length <= budget) return lines;
 	const visibleLines = Math.max(1, budget - 1);
 	const hiddenCount = lines.length - visibleLines;
@@ -913,6 +1121,43 @@ function fitWidgetLineBudget(lines: string[], theme: Theme, width: number, expan
 	return [...lines.slice(0, visibleLines), truncLine(theme.fg("dim", hint), width)];
 }
 
+function fitAdaptiveWidgetLines(jobs: AsyncJobState[], lines: string[], theme: Theme, width: number, expanded: boolean): string[] {
+	if (expanded) {
+		resetWidgetLayoutSession();
+		return fitWidgetLineBudget(lines, theme, width, true);
+	}
+
+	const hasMatchingSession = widgetSessionMatches(expanded);
+	const rows = currentTerminalRows();
+	const columns = currentTerminalColumns();
+	const availableRows = estimateAvailableWidgetRows();
+
+	if (hasMatchingSession && widgetLayoutSession?.tier === "single-line") {
+		return buildSingleLineWidgetLines(jobs, theme, width);
+	}
+
+	if (hasMatchingSession && widgetLayoutSession?.tier === "progressive" && widgetLayoutSession.lockedRows !== undefined) {
+		const rendered = buildProgressiveWidgetLines(jobs, theme, width, widgetLayoutSession.lockedRows, widgetLayoutSession.visibleJobKeys);
+		widgetLayoutSession.visibleJobKeys = rendered.visibleJobKeys;
+		return rendered.lines;
+	}
+
+	if (lines.length <= availableRows) {
+		widgetLayoutSession = { expanded, rows, columns, tier: "full", visibleJobKeys: [] };
+		return fitWidgetLineBudget(lines, theme, width, false);
+	}
+
+	if (availableRows <= 2) {
+		widgetLayoutSession = { expanded, rows, columns, tier: "single-line", visibleJobKeys: [] };
+		return buildSingleLineWidgetLines(jobs, theme, width);
+	}
+
+	const lockedRows = Math.min(availableRows, collapsedWidgetLineBudget(rows));
+	const rendered = buildProgressiveWidgetLines(jobs, theme, width, lockedRows, []);
+	widgetLayoutSession = { expanded, rows, columns, tier: "progressive", lockedRows, visibleJobKeys: rendered.visibleJobKeys };
+	return rendered.lines;
+}
+
 function buildWidgetComponent(jobs: AsyncJobState[], expanded: boolean): (_tui: unknown, theme: Theme) => Component {
 	return (_tui, theme) => {
 		const width = getTermWidth();
@@ -922,7 +1167,7 @@ function buildWidgetComponent(jobs: AsyncJobState[], expanded: boolean): (_tui:
 				? compactSingleWidgetLines(jobs[0]!, theme, width)
 				: buildWidgetLines(jobs, theme, width, false);
 		const container = new Container();
-		for (const line of fitWidgetLineBudget(lines, theme, width, expanded)) container.addChild(new Text(line, 1, 0));
+		for (const line of fitAdaptiveWidgetLines(jobs, lines, theme, width, expanded)) container.addChild(new Text(line, 1, 0));
 		return container;
 	};
 }
@@ -1002,6 +1247,7 @@ export function buildWidgetLines(jobs: AsyncJobState[], theme: Theme, width = ge
  */
 export function renderWidget(ctx: ExtensionContext, jobs: AsyncJobState[]): void {
 	if (jobs.length === 0) {
+		resetWidgetLayoutSession();
 		if (ctx.hasUI) ctx.ui.setWidget(WIDGET_KEY, undefined);
 		return;
 	}
@@ -1009,7 +1255,7 @@ export function renderWidget(ctx: ExtensionContext, jobs: AsyncJobState[]): void
 	ctx.ui.setWidget(WIDGET_KEY, buildWidgetComponent(jobs, ctx.ui.getToolsExpanded?.() ?? false));
 }
 
-function renderSingleCompact(d: Details, r: Details["results"][number], theme: Theme): Component {
+function renderSingleCompact(d: Details, r: Details["results"][number], theme: Theme, frame?: number): Component {
 	const output = r.truncation?.text || getSingleResultOutput(r);
 	const progress = r.progress || r.progressSummary;
 	const isRunning = r.progress?.status === "running";
@@ -1021,7 +1267,7 @@ function renderSingleCompact(d: Details, r: Details["results"][number], theme: T
 	const c = new Container();
 	const width = getTermWidth() - 4;
 	const modelDisplay = modelThinkingBadge(theme, r.model);
-	c.addChild(new Text(truncLine(`${resultGlyph(r, output, theme, isRunning)} ${theme.fg("toolTitle", theme.bold(r.agent))}${modelDisplay}${contextBadge}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`, width), 0, 0));
+	c.addChild(new Text(truncLine(`${resultGlyph(r, output, theme, isRunning, undefined, frame)} ${theme.fg("toolTitle", theme.bold(r.agent))}${modelDisplay}${contextBadge}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`, width), 0, 0));
 
 	if (isRunning && r.progress) {
 		const progressSnapshotNow = snapshotNowForProgress(r.progress);
@@ -1045,7 +1291,7 @@ function renderSingleCompact(d: Details, r: Details["results"][number], theme: T
 	return c;
 }
 
-function renderMultiCompact(d: Details, theme: Theme): Component {
+function renderMultiCompact(d: Details, theme: Theme, frame?: number): Component {
 	const hasRunning = d.progress?.some((p) => p.status === "running")
 		|| d.results.some((r) => r.progress?.status === "running")
 		|| workflowGraphHasStatus(d, ["running"]);
@@ -1071,7 +1317,7 @@ function renderMultiCompact(d: Details, theme: Theme): Component {
 	const itemTitle = multiLabel.itemTitle;
 	const stats = statJoin(theme, [multiLabel.headerLabel, formatProgressStats(theme, totalSummary)]);
 	const glyph = hasRunning
-		? theme.fg("accent", runningGlyph(runningSeed(progressRunningSeed(totalSummary), d.currentStepIndex)))
+		? theme.fg("accent", runningGlyph(frame !== undefined ? (runningSeed(progressRunningSeed(totalSummary), d.currentStepIndex) ?? 0) + frame : runningSeed(progressRunningSeed(totalSummary), d.currentStepIndex)))
 		: failed
 			? theme.fg("error", "✗")
 			: paused
@@ -1117,7 +1363,7 @@ function renderMultiCompact(d: Details, theme: Theme): Component {
 		const rPending = rProg && "status" in rProg && rProg.status === "pending";
 		const stepNumber = r.progress?.index !== undefined ? r.progress.index + 1 : progressFromArray?.index !== undefined ? progressFromArray.index + 1 : i + 1;
 		const stepStats = formatProgressStats(theme, rProg);
-		const glyph = rPending ? theme.fg("dim", "◦") : resultGlyph(r, output, theme, rRunning, progressRunningSeed(rProg));
+		const glyph = rPending ? theme.fg("dim", "◦") : resultGlyph(r, output, theme, rRunning, progressRunningSeed(rProg), frame);
 		const pendingLabel = rPending ? ` ${theme.fg("dim", "· pending")}` : "";
 		const stepLabel = resultRowLabel(d, multiLabel, i, stepNumber);
 		const line = `${glyph} ${stepLabel}: ${themeBold(theme, agentName)}${stepStats ? ` ${theme.fg("dim", "·")} ${stepStats}` : ""}${pendingLabel}`;
@@ -1144,13 +1390,19 @@ export function renderSubagentResult(
 	result: AgentToolResult<Details>,
 	options: { expanded: boolean },
 	theme: Theme,
+	frame?: number,
 ): Component {
 	const d = result.details;
 	if (!d || !d.results.length) {
 		const t = result.content[0];
 		const text = t?.type === "text" ? t.text : "(no output)";
 		const contextPrefix = d?.context === "fork" ? `${theme.fg("warning", "[fork]")} ` : "";
-		return new Text(truncLine(`${contextPrefix}${text}`, getTermWidth() - 4), 0, 0);
+		const width = getTermWidth() - 4;
+		if (!text.includes("\n")) return new Text(truncLine(`${contextPrefix}${text}`, width), 0, 0);
+		const c = new Container();
+		const wrapped = wrapPlainText(`${contextPrefix}${text}`, width);
+		for (const line of wrapped) c.addChild(new Text(line, 0, 0));
+		return c;
 	}
 
 	const expanded = options.expanded;
@@ -1158,7 +1410,7 @@ export function renderSubagentResult(
 
 	if (d.mode === "single" && d.results.length === 1) {
 		const r = d.results[0];
-		if (!expanded) return renderSingleCompact(d, r, theme);
+		if (!expanded) return renderSingleCompact(d, r, theme, frame);
 		const isRunning = r.progress?.status === "running";
 		const icon = isRunning
 			? theme.fg("warning", "running")
@@ -1252,7 +1504,7 @@ export function renderSubagentResult(
 		return c;
 	}
 
-	if (!expanded) return renderMultiCompact(d, theme);
+	if (!expanded) return renderMultiCompact(d, theme, frame);
 
 	const hasRunning = d.progress?.some((p) => p.status === "running") 
 		|| d.results.some((r) => r.progress?.status === "running")