@bastani/atomic 0.8.31-alpha.4 → 0.9.0-alpha.1

package/dist/builtin/subagents/src/tui/render-widget-graph.ts

@@ -0,0 +1,166 @@
+import type { AsyncJobState } from "../shared/types.ts";
+import { shortenPath } from "../shared/formatters.ts";
+import { aggregateStepStatus, formatParallelOutcome } from "../shared/status-format.ts";
+import { buildAsyncChainStepSpans } from "./render-chain-graph.ts";
+import { getTermWidth, truncLine, type Theme } from "./render-layout.ts";
+import { buildLiveStatusLine, themeBold } from "./render-status-progress.ts";
+import {
+	formatNestedWidgetLines,
+	modelThinkingBadge,
+	widgetActivity,
+	widgetOutputPath,
+	widgetStats,
+	widgetStatusGlyph,
+	widgetStepActivity,
+	widgetStepActivityLine,
+	widgetStepGlyph,
+	widgetStepRunningSeed,
+	widgetStepStats,
+	widgetStepStatus,
+	widgetStepsRunningSeed,
+	widgetJobName,
+} from "./render-event-formatting.ts";
+
+export function widgetChainDetails(job: AsyncJobState, theme: Theme, expanded = false, width = getTermWidth(), now?: number): string[] {
+	if (!job.steps?.length) return [];
+	const total = job.chainStepCount ?? job.steps.length;
+	const lines: string[] = [];
+	for (const span of buildAsyncChainStepSpans(total, job.steps.length, job.parallelGroups)) {
+		const steps = job.steps.slice(span.start, span.start + span.count);
+		if (span.isParallel) {
+			const status = aggregateStepStatus(steps);
+			lines.push(`  ${widgetStepGlyph(status, theme, widgetStepsRunningSeed(steps), now)} Step ${span.stepIndex + 1}/${total}: ${themeBold(theme, "parallel group")} ${theme.fg("dim", "·")} ${theme.fg("dim", formatParallelOutcome(steps, span.count))}`);
+			continue;
+		}
+		const step = steps[0];
+		if (!step) {
+			lines.push(`  ${theme.fg("dim", `◦ Step ${span.stepIndex + 1}/${total}: pending`)}`);
+			continue;
+		}
+		lines.push(...foregroundStyleWidgetStepLines(job, theme, step, "Step", span.stepIndex + 1, total, expanded, width, now));
+	}
+	return lines;
+}
+
+export function widgetParallelAgentDetails(job: AsyncJobState, theme: Theme, expanded = false, width = getTermWidth(), now?: number): string[] {
+	if (!job.steps?.length) return [];
+	if (job.mode !== "parallel" && job.mode !== "chain") return [];
+	if (job.mode === "chain" && !job.activeParallelGroup && job.parallelGroups?.length) return widgetChainDetails(job, theme, expanded, width, now);
+	const total = job.stepsTotal ?? job.steps.length;
+	const lines: string[] = [];
+	for (const [index, step] of job.steps.entries()) {
+		const marker = index === job.steps.length - 1 ? "└" : "├";
+		const activity = widgetStepActivity(step, job.updatedAt);
+		const itemTitle = job.mode === "parallel" || job.activeParallelGroup ? "Agent" : "Step";
+		const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking, step.fastMode);
+		lines.push(`  ${theme.fg("dim", `${marker} ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index), now)} ${itemTitle} ${index + 1}/${total}: ${step.agent} · ${widgetStepStatus(step.status, theme)}${modelDisplay}${activity ? ` · ${activity}` : ""}`)}`);
+		for (const nestedLine of formatNestedWidgetLines(step.children, theme, width, expanded, job.updatedAt, expanded ? 8 : 1, now)) lines.push(`    ${nestedLine}`);
+	}
+	return lines;
+}
+
+export function foregroundStyleWidgetStepLines(
+	job: AsyncJobState,
+	theme: Theme,
+	step: NonNullable<AsyncJobState["steps"]>[number],
+	itemTitle: "Agent" | "Step",
+	index: number,
+	total: number,
+	expanded: boolean,
+	width: number,
+	now?: number,
+): string[] {
+	const status = widgetStepStatus(step.status, theme);
+	const stats = widgetStepStats(theme, step);
+	const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking, step.fastMode);
+	const lines = [`  ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index - 1), now)} ${itemTitle} ${index}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${modelDisplay}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`];
+	const activity = widgetStepActivityLine(step, width, expanded, job.updatedAt);
+	if (activity) lines.push(`    ${theme.fg("dim", `⎿  ${activity}`)}`);
+	for (const nestedLine of formatNestedWidgetLines(step.children, theme, width, expanded, job.updatedAt, undefined, now)) {
+		lines.push(`    ${nestedLine}`);
+	}
+	if (step.status === "running") {
+		if (!expanded) lines.push(`    ${theme.fg("accent", "Press ctrl+o for live detail")}`);
+		const output = widgetOutputPath(job, step);
+		if (output) lines.push(`    ${theme.fg("dim", `output: ${shortenPath(output)}`)}`);
+		if (expanded) {
+			const liveStatus = buildLiveStatusLine(step, job.updatedAt);
+			if (liveStatus && liveStatus !== activity) lines.push(`    ${theme.fg("accent", liveStatus)}`);
+			for (const tool of step.recentTools?.slice(-3) ?? []) {
+				const maxArgsLen = Math.max(40, width - 30);
+				const argsPreview = tool.args.length <= maxArgsLen ? tool.args : `${tool.args.slice(0, maxArgsLen)}...`;
+				lines.push(`      ${theme.fg("dim", `${tool.tool}${argsPreview ? `: ${argsPreview}` : ""}`)}`);
+			}
+			for (const line of step.recentOutput?.slice(-5) ?? []) {
+				lines.push(`      ${theme.fg("dim", line)}`);
+			}
+		}
+	}
+	return lines;
+}
+
+export function foregroundStyleWidgetDetails(job: AsyncJobState, theme: Theme, expanded: boolean, width: number, now?: number): string[] {
+	if (!job.steps?.length) return [
+		`  ${theme.fg("dim", `⎿  ${widgetActivity(job)}`)}`,
+		...formatNestedWidgetLines(job.nestedChildren, theme, width, expanded, job.updatedAt, undefined, now).map((line) => `  ${line}`),
+	];
+	if (job.mode === "chain" && !job.activeParallelGroup && job.parallelGroups?.length) return widgetChainDetails(job, theme, expanded, width, now);
+	const total = job.stepsTotal ?? job.steps.length;
+	const itemTitle = job.mode === "parallel" || job.activeParallelGroup ? "Agent" : "Step";
+	const lines: string[] = [];
+	for (const [index, step] of job.steps.entries()) {
+		lines.push(...foregroundStyleWidgetStepLines(job, theme, step, itemTitle, index + 1, total, expanded, width, now));
+	}
+	const attached = new Set(job.steps.flatMap((step) => step.children?.map((child) => child.id) ?? []));
+	const unattached = job.nestedChildren?.filter((child) => !attached.has(child.id)) ?? [];
+	for (const nestedLine of formatNestedWidgetLines(unattached, theme, width, expanded, job.updatedAt, undefined, now)) {
+		lines.push(`  ${nestedLine}`);
+	}
+	return lines;
+}
+
+export function buildSingleWidgetLines(job: AsyncJobState, theme: Theme, width: number, expanded: boolean, now?: number): string[] {
+	const stats = widgetStats(job, theme);
+	const count = job.mode === "chain" ? job.chainStepCount : job.stepsTotal ?? job.agents?.length ?? job.steps?.length;
+	const mode = widgetJobName(job);
+	const title = `async subagent ${mode}${count && count > 1 ? ` (${count})` : ""}`;
+	return [
+		`${theme.fg("toolTitle", themeBold(theme, title))} ${theme.fg("dim", "· background")}`,
+		`${widgetStatusGlyph(job, theme, now)} ${themeBold(theme, mode)}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`,
+		...foregroundStyleWidgetDetails(job, theme, expanded, width, now),
+	].map((line) => truncLine(line, width));
+}
+
+export function compactSingleWidgetLines(job: AsyncJobState, theme: Theme, width: number, now?: number): string[] {
+	const fullLines = buildSingleWidgetLines(job, theme, width, false, now);
+	if (fullLines.length <= 10 || !job.steps?.length || (job.mode !== "parallel" && !job.activeParallelGroup)) return fullLines;
+
+	const total = job.stepsTotal ?? job.steps.length;
+	const itemTitle = job.mode === "parallel" || job.activeParallelGroup ? "Agent" : "Step";
+	const lines = fullLines.slice(0, 2);
+	for (const [index, step] of job.steps.entries()) {
+		const status = widgetStepStatus(step.status, theme);
+		const activity = widgetStepActivityLine(step, width, false, job.updatedAt);
+		const stepStats = widgetStepStats(theme, step);
+		const activitySuffix = activity ? ` ${theme.fg("dim", "·")} ${theme.fg("dim", activity)}` : "";
+		const modelDisplay = modelThinkingBadge(theme, step.model, step.thinking, step.fastMode);
+		lines.push(`  ${widgetStepGlyph(step.status, theme, widgetStepRunningSeed(step, index), now)} ${itemTitle} ${index + 1}/${total}: ${themeBold(theme, step.agent)} ${theme.fg("dim", "·")} ${status}${modelDisplay}${activitySuffix}${stepStats ? ` ${theme.fg("dim", "·")} ${stepStats}` : ""}`);
+		for (const nestedLine of formatNestedWidgetLines(step.children, theme, width, false, job.updatedAt, undefined, now)) lines.push(`    ${nestedLine}`);
+	}
+	if (job.steps.some((step) => step.status === "running")) lines.push(theme.fg("accent", "  Press ctrl+o for live detail"));
+	return lines.map((line) => truncLine(line, width));
+}
+
+export 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)));
+	if (lines.length <= budget) return lines;
+	const visibleLines = Math.max(1, budget - 1);
+	const hiddenCount = lines.length - visibleLines;
+	const hint = expanded
+		? `… ${hiddenCount} live-detail lines hidden`
+		: `… ${hiddenCount} lines hidden · ctrl+o expands`;
+	return [...lines.slice(0, visibleLines), truncLine(theme.fg("dim", hint), width)];
+}

package/dist/builtin/subagents/src/tui/render-widget.ts

@@ -0,0 +1,273 @@
+import type { ExtensionContext } from "@bastani/atomic";
+import { Container, Text, type Component } from "@earendil-works/pi-tui";
+import { MAX_WIDGET_JOBS, WIDGET_KEY, type AsyncJobState } from "../shared/types.ts";
+import { getTermWidth, RUNNING_ANIMATION_MS, runningGlyph, truncLine, type Theme } from "./render-layout.ts";
+import { themeBold } from "./render-status-progress.ts";
+import {
+	buildSingleWidgetLines,
+	compactSingleWidgetLines,
+	fitWidgetLineBudget,
+	widgetParallelAgentDetails,
+} from "./render-widget-graph.ts";
+import {
+	widgetActivity,
+	widgetJobName,
+	widgetJobsRunningSeed,
+	widgetStats,
+	widgetStatusGlyph,
+} from "./render-event-formatting.ts";
+
+class LiveWidgetComponent implements Component {
+	private readonly container = new Container();
+
+	constructor(
+		private readonly getJobs: () => AsyncJobState[],
+		private readonly theme: Theme,
+		private readonly getExpanded: () => boolean,
+		private readonly getNow: () => number,
+	) {}
+
+	render(width: number): string[] {
+		const jobs = this.getJobs();
+		const expanded = this.getExpanded();
+		const now = this.getNow();
+		const lines = this.buildLines(jobs, width, expanded, now);
+		this.container.clear();
+		for (const line of fitWidgetLineBudget(lines, this.theme, width, expanded)) this.container.addChild(new Text(line, 1, 0));
+		return this.container.render(width);
+	}
+
+	private buildLines(jobs: AsyncJobState[], width: number, expanded: boolean, now: number): string[] {
+		if (expanded) return buildWidgetLines(jobs, this.theme, width, true, now);
+		if (jobs.length === 1) return compactSingleWidgetLines(jobs[0]!, this.theme, width, now);
+		return buildWidgetLines(jobs, this.theme, width, false, now);
+	}
+
+	invalidate(): void {
+		this.container.invalidate();
+	}
+}
+
+function buildWidgetComponent(getJobs: () => AsyncJobState[], getExpanded: () => boolean, getNow: () => number): (_tui: unknown, theme: Theme) => Component {
+	return (_tui, theme) => new LiveWidgetComponent(getJobs, theme, getExpanded, getNow);
+}
+
+interface RenderRequestingContext {
+	ui: ExtensionContext["ui"] & { requestRender?: () => void };
+}
+
+// There is only ever one async-agents widget per host process, so the widget
+// ticker and mounted component read their driving context/jobs from module-level
+// singletons instead of remounting the widget for every visible update.
+let latestWidgetCtx: ExtensionContext | undefined;
+let latestWidgetJobs: AsyncJobState[] = [];
+let latestWidgetFrameNow = 0;
+let widgetTimer: ReturnType<typeof setInterval> | undefined;
+let mountedWidgetCtx: ExtensionContext | undefined;
+let widgetMounted = false;
+
+function getLatestWidgetJobs(): AsyncJobState[] {
+	return latestWidgetJobs;
+}
+
+function getLatestWidgetFrameNow(): number {
+	return latestWidgetFrameNow;
+}
+
+function getLatestWidgetExpanded(): boolean {
+	// LiveWidgetComponent re-renders outside a specific renderWidget() call, so
+	// read expansion from the latest live singleton context. If that context was
+	// cleared or went stale, collapse safely instead of consulting a stale caller.
+	if (!latestWidgetCtx?.hasUI) return false;
+	return latestWidgetCtx.ui.getToolsExpanded?.() ?? false;
+}
+
+function clearLatestWidgetState(): void {
+	latestWidgetCtx = undefined;
+	latestWidgetJobs = [];
+	latestWidgetFrameNow = 0;
+	mountedWidgetCtx = undefined;
+	widgetMounted = false;
+}
+
+function requestWidgetRender(ctx: ExtensionContext): void {
+	(ctx as RenderRequestingContext).ui.requestRender?.();
+}
+
+function unmountWidgetBestEffort(ctx: ExtensionContext | undefined): void {
+	if (!ctx?.hasUI) return;
+	try {
+		ctx.ui.setWidget(WIDGET_KEY, undefined);
+	} catch {
+		// Best-effort teardown only: stale host contexts can reject cleanup during
+		// reload/session rebinding, but local state still needs to move on so the
+		// next status update can mount cleanly on the active UI context.
+	}
+}
+
+function hasAnimatedWidgetJobs(jobs: AsyncJobState[]): boolean {
+	// Animate while any job — or any of its nested steps — is still running so the
+	// header/step spinners never freeze before the work actually settles.
+	return jobs.some((job) => job.status === "running" || job.steps?.some((step) => step.status === "running"));
+}
+
+function refreshAnimatedWidget(): void {
+	if (!latestWidgetCtx?.hasUI) return;
+	try {
+		latestWidgetFrameNow = Date.now();
+		requestWidgetRender(latestWidgetCtx);
+	} catch {
+		// A stale render context means the cosmetic ticker can no longer update the
+		// mounted widget safely; tear it down best-effort and let the next status
+		// update remount on the active host context.
+		stopWidgetAnimation();
+	}
+}
+
+function ensureWidgetAnimation(): void {
+	if (widgetTimer) return;
+	widgetTimer = setInterval(() => {
+		if (!hasAnimatedWidgetJobs(latestWidgetJobs)) {
+			stopWidgetAnimation();
+			return;
+		}
+		refreshAnimatedWidget();
+	}, RUNNING_ANIMATION_MS);
+	widgetTimer.unref?.();
+}
+
+// Stop only the ticker, keeping the last-rendered widget context/jobs intact.
+function stopWidgetTicker(): void {
+	if (widgetTimer) {
+		clearInterval(widgetTimer);
+		widgetTimer = undefined;
+	}
+}
+
+// Full teardown: stop the ticker, clear the mounted widget if possible, and
+// forget the driving context/jobs entirely.
+export function stopWidgetAnimation(): void {
+	stopWidgetTicker();
+	if (widgetMounted) unmountWidgetBestEffort(mountedWidgetCtx);
+	clearLatestWidgetState();
+}
+
+export function buildWidgetLines(jobs: AsyncJobState[], theme: Theme, width = getTermWidth(), expanded = false, now: number = Date.now()): string[] {
+	if (jobs.length === 0) return [];
+	if (jobs.length === 1) return buildSingleWidgetLines(jobs[0]!, theme, width, expanded, now);
+	const running = jobs.filter((job) => job.status === "running");
+	const queued = jobs.filter((job) => job.status === "queued");
+	const finished = jobs.filter((job) => job.status !== "running" && job.status !== "queued");
+
+	const lines: string[] = [];
+	const hasActive = running.length > 0 || queued.length > 0;
+	const headerGlyph = running.length > 0 ? runningGlyph(widgetJobsRunningSeed(running), now) : hasActive ? "●" : "○";
+	lines.push(truncLine(`${theme.fg(hasActive ? "accent" : "dim", headerGlyph)} ${theme.fg(hasActive ? "accent" : "dim", "Async agents")} ${theme.fg("dim", "· background")}`, width));
+
+	const items: string[][] = [];
+	let hiddenRunning = 0;
+	let hiddenFinished = 0;
+	let queuedSummaryShown = false;
+	let slots = MAX_WIDGET_JOBS;
+
+	for (const job of running) {
+		if (slots <= 0) { hiddenRunning++; continue; }
+		const stats = widgetStats(job, theme);
+		items.push([
+			`${widgetStatusGlyph(job, theme, now)} ${themeBold(theme, widgetJobName(job))}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`,
+			`  ${theme.fg("dim", `⎿  ${widgetActivity(job)}`)}`,
+			...widgetParallelAgentDetails(job, theme, expanded, width, now),
+		]);
+		slots--;
+	}
+
+	if (queued.length > 0 && slots > 0) {
+		items.push([`${theme.fg("muted", "◦")} ${theme.fg("dim", `${queued.length} queued`)}`]);
+		queuedSummaryShown = true;
+		slots--;
+	}
+
+	for (const job of finished) {
+		if (slots <= 0) { hiddenFinished++; continue; }
+		const stats = widgetStats(job, theme);
+		items.push([
+			`${widgetStatusGlyph(job, theme, now)} ${themeBold(theme, widgetJobName(job))}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`,
+			`  ${theme.fg("dim", `⎿  ${widgetActivity(job)}`)}`,
+			...widgetParallelAgentDetails(job, theme, expanded, width, now),
+		]);
+		slots--;
+	}
+
+	const hiddenQueued = queued.length > 0 && !queuedSummaryShown ? queued.length : 0;
+	const hiddenTotal = hiddenRunning + hiddenFinished + hiddenQueued;
+	if (hiddenTotal > 0) {
+		const parts: string[] = [];
+		if (hiddenRunning > 0) parts.push(`${hiddenRunning} running`);
+		if (hiddenQueued > 0) parts.push(`${hiddenQueued} queued`);
+		if (hiddenFinished > 0) parts.push(`${hiddenFinished} finished`);
+		items.push([theme.fg("dim", `+${hiddenTotal} more (${parts.join(", ")})`)]);
+	}
+
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i]!;
+		const last = i === items.length - 1;
+		const branch = last ? "└─" : "├─";
+		const continuation = last ? "   " : "│  ";
+		lines.push(truncLine(`${theme.fg("dim", branch)} ${item[0]}`, width));
+		for (const detail of item.slice(1)) {
+			lines.push(truncLine(`${theme.fg("dim", continuation)} ${detail}`, width));
+		}
+	}
+
+	return lines;
+}
+
+/**
+ * Render the async jobs widget
+ */
+export function renderWidget(ctx: ExtensionContext, jobs: AsyncJobState[]): void {
+	if (jobs.length === 0) {
+		if (widgetMounted && mountedWidgetCtx !== ctx) {
+			// Empty updates from stale contexts must not clear the active context's
+			// widget. The mounted context owns the eventual teardown.
+			return;
+		}
+		stopWidgetAnimation();
+		return;
+	}
+	if (!ctx.hasUI) {
+		stopWidgetAnimation();
+		return;
+	}
+	latestWidgetCtx = ctx;
+	latestWidgetJobs = [...jobs];
+	latestWidgetFrameNow = Date.now();
+	if (widgetMounted && mountedWidgetCtx !== ctx) {
+		// Context rebinding can leave the previous host UI alive briefly; clear the
+		// old mount before installing the singleton widget on the new context.
+		unmountWidgetBestEffort(mountedWidgetCtx);
+		mountedWidgetCtx = undefined;
+		widgetMounted = false;
+	}
+	if (!widgetMounted) {
+		// belowEditor: the widget animates a running glyph / elapsed labels on a
+		// timer. pi-tui full-clears the screen+scrollback whenever a changed line
+		// sits above the viewport fold, so an aboveEditor widget flickers once the
+		// bottom region grows tall and pushes it above the fold. Rendering below the
+		// editor keeps the live line within the bottom viewport (flicker-free), and
+		// matches the workflow companion widget's placement (#1109).
+		ctx.ui.setWidget(WIDGET_KEY, buildWidgetComponent(getLatestWidgetJobs, getLatestWidgetExpanded, getLatestWidgetFrameNow), {
+			placement: "belowEditor",
+		});
+		mountedWidgetCtx = ctx;
+		widgetMounted = true;
+	} else {
+		// The mounted widget reads latestWidgetJobs via getLatestWidgetJobs(), so a
+		// visible->visible update only needs to ask the host to render in place.
+		requestWidgetRender(ctx);
+	}
+	// Keep the just-rendered ctx/jobs as the last-rendered state; only the ticker
+	// is conditional on whether anything is still animating.
+	if (hasAnimatedWidgetJobs(jobs)) ensureWidgetAnimation();
+	else stopWidgetTicker();
+}