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

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

@@ -0,0 +1,120 @@
+import type { ExtensionContext } from "@bastani/atomic";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import type { AgentProgress } from "../shared/types.ts";
+
+export type Theme = ExtensionContext["ui"]["theme"];
+
+export function getTermWidth(): number {
+	return process.stdout.columns || 120;
+}
+
+const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
+/**
+ * Truncate a line to maxWidth, preserving ANSI styling through the ellipsis.
+ *
+ * pi-tui's truncateToWidth adds \x1b[0m before ellipsis which resets all styling,
+ * causing background color bleed in the TUI. This implementation tracks active
+ * ANSI styles and re-applies them before the ellipsis.
+ *
+ * Uses Intl.Segmenter for proper Unicode/emoji handling (not char-by-char).
+ */
+export function truncLine(text: string, maxWidth: number): string {
+	if (visibleWidth(text) <= maxWidth) return text;
+
+	const targetWidth = maxWidth - 1;
+	let result = "";
+	let currentWidth = 0;
+	let activeStyles: string[] = [];
+	let i = 0;
+
+	while (i < text.length) {
+		const ansiMatch = text.slice(i).match(/^\x1b\[[0-9;]*m/);
+		if (ansiMatch) {
+			const code = ansiMatch[0];
+			result += code;
+
+			if (code === "\x1b[0m" || code === "\x1b[m") {
+				activeStyles = [];
+			} else {
+				activeStyles.push(code);
+			}
+			i += code.length;
+			continue;
+		}
+
+		let end = i;
+		while (end < text.length && !text.slice(end).match(/^\x1b\[[0-9;]*m/)) {
+			end++;
+		}
+
+		const textPortion = text.slice(i, end);
+		for (const seg of segmenter.segment(textPortion)) {
+			const grapheme = seg.segment;
+			const graphemeWidth = visibleWidth(grapheme);
+
+			if (currentWidth + graphemeWidth > targetWidth) {
+				return result + activeStyles.join("") + "…";
+			}
+
+			result += grapheme;
+			currentWidth += graphemeWidth;
+		}
+		i = end;
+	}
+
+	return result + activeStyles.join("") + "…";
+}
+
+const RUNNING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+
+/**
+ * Spinner cadence (ms per frame). The running glyph is derived from wall-clock
+ * time so every active spinner advances smoothly and in lockstep, independent
+ * of how often (or how irregularly) progress data updates arrive. The animation
+ * timers below only schedule re-renders; the displayed frame always comes from
+ * the clock. This fixes the frozen/stuttering spinner from issue #1084 while
+ * keeping per-frame diffs to a single glyph cell so the differential renderer
+ * never needs a full-clear (no flicker).
+ */
+export const RUNNING_ANIMATION_MS = 80;
+
+type ProgressSeedSource = Partial<Pick<AgentProgress, "index" | "toolCount" | "tokens" | "durationMs" | "lastActivityAt" | "currentToolStartedAt" | "turnCount">>;
+
+/**
+ * Wall-clock-derived animation frame counter. Advances exactly one step every
+ * `RUNNING_ANIMATION_MS`. Exposed for tests so they can pin a deterministic now.
+ */
+export function currentRunningFrame(now: number = Date.now()): number {
+	return Math.floor(now / RUNNING_ANIMATION_MS);
+}
+
+export function runningSeed(...values: Array<number | undefined>): number | undefined {
+	let seed: number | undefined;
+	for (const value of values) {
+		if (value === undefined || !Number.isFinite(value)) continue;
+		seed = (seed ?? 0) + Math.trunc(value);
+	}
+	return seed;
+}
+
+export function runningGlyph(seed?: number, now?: number): string {
+	// Fold the wall-clock frame into the (optional) progress seed so the glyph
+	// advances over time. Callers that render into chat scrollback can pass a
+	// captured `now` so host re-renders do not mutate already-emitted lines.
+	const animatedSeed = runningSeed(seed, currentRunningFrame(now)) ?? 0;
+	return RUNNING_FRAMES[Math.abs(animatedSeed) % RUNNING_FRAMES.length]!;
+}
+
+export function progressRunningSeed(progress: ProgressSeedSource | undefined): number | undefined {
+	if (!progress) return undefined;
+	return runningSeed(
+		progress.index,
+		progress.toolCount,
+		progress.tokens,
+		progress.durationMs,
+		progress.lastActivityAt,
+		progress.currentToolStartedAt,
+		progress.turnCount,
+	);
+}

package/dist/builtin/subagents/src/tui/render-result-animation.ts

@@ -0,0 +1,56 @@
+import { RUNNING_ANIMATION_MS } from "./render-layout.ts";
+
+type ResultAnimationTimer = ReturnType<typeof setInterval>;
+
+export interface SubagentResultRenderState {
+	subagentResultAnimationTimer?: ResultAnimationTimer;
+	subagentResultSnapshotKey?: string;
+	/** Stable semantic/content timestamp used for durations and activity text. */
+	subagentResultSnapshotNow?: number;
+	/** Timer-driven timestamp used only for spinner glyph frames. */
+	subagentResultSpinnerFrameNow?: number;
+}
+
+export type ResultAnimationContext = {
+	state: SubagentResultRenderState;
+	invalidate: () => void;
+};
+type LegacyResultAnimationContext = { state: { subagentResultAnimationTimer?: ResultAnimationTimer } };
+
+const activeResultAnimationTimers = new Map<ResultAnimationTimer, SubagentResultRenderState>();
+
+export function clearResultAnimationTimer(context: LegacyResultAnimationContext): void {
+	const timer = context.state.subagentResultAnimationTimer;
+	if (timer) {
+		clearInterval(timer);
+		activeResultAnimationTimers.delete(timer);
+	}
+	context.state.subagentResultAnimationTimer = undefined;
+}
+
+export function clearLegacyResultAnimationTimer(context: LegacyResultAnimationContext): void {
+	clearResultAnimationTimer(context);
+}
+
+export function ensureResultAnimation(context: ResultAnimationContext): void {
+	if (context.state.subagentResultAnimationTimer) return;
+	const timer = setInterval(() => {
+		context.state.subagentResultSpinnerFrameNow = Date.now();
+		try {
+			context.invalidate();
+		} catch {
+			clearResultAnimationTimer(context);
+		}
+	}, RUNNING_ANIMATION_MS);
+	timer.unref?.();
+	context.state.subagentResultAnimationTimer = timer;
+	activeResultAnimationTimers.set(timer, context.state);
+}
+
+export function stopResultAnimations(): void {
+	for (const [timer, state] of activeResultAnimationTimers) {
+		clearInterval(timer);
+		if (state.subagentResultAnimationTimer === timer) state.subagentResultAnimationTimer = undefined;
+	}
+	activeResultAnimationTimers.clear();
+}

package/dist/builtin/subagents/src/tui/render-result-compact.ts

@@ -0,0 +1,154 @@
+import { Container, Text, type Component } from "@earendil-works/pi-tui";
+import type { AgentProgress, AsyncJobStep, Details } from "../shared/types.ts";
+import { shortenPath } from "../shared/formatters.ts";
+import { getSingleResultOutput } from "../shared/utils.ts";
+import { getTermWidth, progressRunningSeed, runningGlyph, runningSeed, truncLine, type Theme } from "./render-layout.ts";
+import {
+	buildLiveStatusLine,
+	compactCurrentActivity,
+	extractOutputTarget,
+	firstOutputLine,
+	formatProgressStats,
+	hasEmptyTextOutputWithoutOutputTarget,
+	resultGlyph,
+	resultStatusLine,
+	snapshotNowForProgress,
+	statJoin,
+	themeBold,
+} from "./render-status-progress.ts";
+import {
+	buildChainRenderEntries,
+	buildMultiProgressLabel,
+	resultRowLabel,
+	workflowGraphHasStatus,
+	type ChainRenderEntry,
+} from "./render-chain-graph.ts";
+import { modelThinkingBadge, widgetStepGlyph, widgetStepStatus } from "./render-event-formatting.ts";
+
+export function renderSingleCompact(d: Details, r: Details["results"][number], theme: Theme, now?: number, spinnerNow?: number): Component {
+	const output = r.truncation?.text || getSingleResultOutput(r);
+	const progress = r.progress || r.progressSummary;
+	const isRunning = r.progress?.status === "running";
+	const contextBadge = d.context === "fork" ? theme.fg("warning", " [fork]") : "";
+	const stats = statJoin(theme, [
+		r.usage?.turns ? `⟳ ${r.usage.turns}` : "",
+		formatProgressStats(theme, progress, true, now),
+	]);
+	const c = new Container();
+	const width = getTermWidth() - 4;
+	const modelDisplay = modelThinkingBadge(theme, r.model, undefined, r.fastMode);
+	c.addChild(new Text(truncLine(`${resultGlyph(r, output, theme, isRunning, progressRunningSeed(r.progress ?? r.progressSummary), spinnerNow ?? now)} ${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, now);
+		const activity = compactCurrentActivity(r.progress, now);
+		c.addChild(new Text(truncLine(theme.fg("dim", `  ⎿  ${activity}`), width), 0, 0));
+		const liveStatus = buildLiveStatusLine(r.progress, progressSnapshotNow);
+		if (liveStatus && liveStatus !== activity) c.addChild(new Text(truncLine(theme.fg("dim", `     ${liveStatus}`), width), 0, 0));
+		c.addChild(new Text(truncLine(theme.fg("accent", "  Press ctrl+o for live detail"), width), 0, 0));
+		if (r.artifactPaths) c.addChild(new Text(truncLine(theme.fg("dim", `  output: ${shortenPath(r.artifactPaths.outputPath)}`), width), 0, 0));
+		return c;
+	}
+
+	c.addChild(new Text(truncLine(theme.fg("dim", `  ⎿  ${resultStatusLine(r, output)}`), width), 0, 0));
+	const preview = firstOutputLine(output);
+	if (preview && r.exitCode === 0 && !hasEmptyTextOutputWithoutOutputTarget(r.task, output)) {
+		c.addChild(new Text(truncLine(theme.fg("dim", `     ${preview}`), width), 0, 0));
+	}
+	if (r.sessionFile) c.addChild(new Text(truncLine(theme.fg("dim", `  session: ${shortenPath(r.sessionFile)}`), width), 0, 0));
+	if (r.artifactPaths) c.addChild(new Text(truncLine(theme.fg("dim", `  output: ${shortenPath(r.artifactPaths.outputPath)}`), width), 0, 0));
+	if (r.truncation?.artifactPath) c.addChild(new Text(truncLine(theme.fg("dim", `  full output: ${shortenPath(r.truncation.artifactPath)}`), width), 0, 0));
+	return c;
+}
+
+export function renderMultiCompact(d: Details, theme: Theme, now?: number, spinnerNow?: number): Component {
+	const hasRunning = d.progress?.some((p) => p.status === "running")
+		|| d.results.some((r) => r.progress?.status === "running")
+		|| workflowGraphHasStatus(d, ["running"]);
+	const failed = d.results.some((r) => r.exitCode !== 0 && r.progress?.status !== "running")
+		|| workflowGraphHasStatus(d, ["failed"]);
+	const paused = d.results.some((r) => (r.interrupted || r.detached) && r.progress?.status !== "running")
+		|| workflowGraphHasStatus(d, ["paused", "detached"]);
+	let totalSummary = d.progressSummary;
+	if (!totalSummary) {
+		let sawProgress = false;
+		const summary = { toolCount: 0, tokens: 0, durationMs: 0 };
+		for (const r of d.results) {
+			const prog = r.progress || r.progressSummary;
+			if (!prog) continue;
+			sawProgress = true;
+			summary.toolCount += prog.toolCount;
+			summary.tokens += prog.tokens;
+			summary.durationMs = d.mode === "chain" ? summary.durationMs + prog.durationMs : Math.max(summary.durationMs, prog.durationMs);
+		}
+		if (sawProgress) totalSummary = summary;
+	}
+	const multiLabel = buildMultiProgressLabel(d, hasRunning);
+	const itemTitle = multiLabel.itemTitle;
+	const stats = statJoin(theme, [multiLabel.headerLabel, formatProgressStats(theme, totalSummary, true, now)]);
+	const glyph = hasRunning
+		? theme.fg("accent", runningGlyph(runningSeed(progressRunningSeed(totalSummary), d.currentStepIndex), spinnerNow ?? now))
+		: failed
+			? theme.fg("error", "✗")
+			: paused
+				? theme.fg("warning", "■")
+				: theme.fg("success", "✓");
+	const contextBadge = d.context === "fork" ? theme.fg("warning", " [fork]") : "";
+	const c = new Container();
+	const width = getTermWidth() - 4;
+	c.addChild(new Text(truncLine(`${glyph} ${theme.fg("toolTitle", theme.bold(d.mode))}${contextBadge}${stats ? ` ${theme.fg("dim", "·")} ${stats}` : ""}`, width), 0, 0));
+
+	const useResultsDirectly = multiLabel.hasParallelInChain || !d.chainAgents?.length;
+	const displayStart = multiLabel.showActiveGroupOnly ? multiLabel.groupStartIndex : 0;
+	const displayEnd = multiLabel.showActiveGroupOnly ? multiLabel.groupEndIndex : (useResultsDirectly ? d.results.length : d.chainAgents!.length);
+	const chainEntries = buildChainRenderEntries(d, multiLabel);
+	const renderEntries = chainEntries ?? Array.from({ length: displayEnd - displayStart }, (_, offset): ChainRenderEntry => {
+		const i = displayStart + offset;
+		const r = d.results[i];
+		const fallbackLabel = itemTitle.toLowerCase();
+		const rowNumber = multiLabel.showActiveGroupOnly ? (i - multiLabel.groupStartIndex + 1) : (i + 1);
+		return { kind: "result", resultIndex: i, rowNumber, agentName: useResultsDirectly ? (r?.agent || `${fallbackLabel}-${rowNumber}`) : (d.chainAgents![i] || r?.agent || `${fallbackLabel}-${rowNumber}`) };
+	});
+	for (const entry of renderEntries) {
+		if (entry.kind === "placeholder") {
+			const glyph = widgetStepGlyph(entry.status as AsyncJobStep["status"], theme);
+			const statusLabel = widgetStepStatus(entry.status as AsyncJobStep["status"], theme);
+			c.addChild(new Text(truncLine(`  ${glyph} ${entry.stepLabel}: ${themeBold(theme, entry.agentName)} ${theme.fg("dim", "·")} ${statusLabel}`, width), 0, 0));
+			if (entry.error) c.addChild(new Text(truncLine(theme.fg("error", `    ⎿  Error: ${entry.error}`), width), 0, 0));
+			continue;
+		}
+		const i = entry.resultIndex;
+		const r = d.results[i];
+		const rowNumber = entry.rowNumber;
+		const agentName = entry.agentName;
+		if (!r) {
+			const pendingLabel = chainEntries ? resultRowLabel(d, multiLabel, i, rowNumber) : `${itemTitle} ${rowNumber}`;
+			c.addChild(new Text(truncLine(theme.fg("dim", `  ◦ ${pendingLabel}: ${agentName} · pending`), width), 0, 0));
+			continue;
+		}
+		const output = getSingleResultOutput(r);
+		const progressFromArray = d.progress?.find((p) => p.index === i) || d.progress?.find((p) => p.agent === r.agent && p.status === "running");
+		const rProg = (r.progress || progressFromArray || r.progressSummary) as AgentProgress | undefined;
+		const rRunning = rProg && "status" in rProg && rProg.status === "running";
+		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, true, now);
+		const glyph = rPending ? theme.fg("dim", "◦") : resultGlyph(r, output, theme, rRunning, progressRunningSeed(rProg), spinnerNow ?? now);
+		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}`;
+		c.addChild(new Text(truncLine(`  ${line}`, width), 0, 0));
+		if (rRunning && rProg && "status" in rProg) {
+			const activity = compactCurrentActivity(rProg, now);
+			c.addChild(new Text(truncLine(theme.fg("dim", `    ⎿  ${activity}`), width), 0, 0));
+			c.addChild(new Text(truncLine(theme.fg("accent", "    Press ctrl+o for live detail"), width), 0, 0));
+		} else if (!rPending && (r.exitCode !== 0 || r.interrupted || r.detached || hasEmptyTextOutputWithoutOutputTarget(r.task, output))) {
+			c.addChild(new Text(truncLine(theme.fg(r.exitCode !== 0 ? "error" : "dim", `    ⎿  ${resultStatusLine(r, output)}`), width), 0, 0));
+		}
+		const outputTarget = extractOutputTarget(r.task);
+		if (outputTarget) c.addChild(new Text(truncLine(theme.fg("dim", `    output: ${outputTarget}`), width), 0, 0));
+		if (r.artifactPaths) c.addChild(new Text(truncLine(theme.fg("dim", `    output: ${shortenPath(r.artifactPaths.outputPath)}`), width), 0, 0));
+	}
+	if (d.artifacts) c.addChild(new Text(truncLine(theme.fg("dim", `  artifacts: ${shortenPath(d.artifacts.dir)}`), width), 0, 0));
+	return c;
+}