pi-agent-flow 0.1.0-alpha.3 → 0.1.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-agent-flow",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "description": "Flow-state delegation extension for Pi coding agent.",
   "type": "module",
   "main": "index.ts",
@@ -11,6 +11,7 @@
     "runner-cli.js",
     "runner-events.js",
     "render.ts",
+    "render-utils.ts",
     "types.ts",
     "agents/",
     "README.md"

package/render-utils.ts

@@ -0,0 +1,53 @@
+/**
+ * Pure utility functions for rendering — extracted for testability.
+ */
+
+import type { UsageStats } from "./types.js";
+
+export function formatTokens(count: number): string {
+	if (count < 1000) return count.toString();
+	if (count < 10000) return `${(count / 1000).toFixed(1)}k`;
+	if (count < 1000000) return `${Math.round(count / 1000)}k`;
+	return `${(count / 1000000).toFixed(1)}M`;
+}
+
+export function formatFlowUsage(usage: Partial<UsageStats>, model?: string): string {
+	const parts: string[] = [];
+	if (usage.toolCalls && usage.toolCalls > 0) parts.push(`${usage.toolCalls} calls`);
+	if (usage.turns) parts.push(`${usage.turns} turn${usage.turns > 1 ? "s" : ""}`);
+	if (usage.input) parts.push(`↑${formatTokens(usage.input)}`);
+	if (usage.output) parts.push(`↓${formatTokens(usage.output)}`);
+	if (usage.cacheRead) parts.push(`CR:${formatTokens(usage.cacheRead)}`);
+	if (usage.cacheWrite) parts.push(`CW:${formatTokens(usage.cacheWrite)}`);
+	if (usage.cost) parts.push(`$${usage.cost.toFixed(4)}`);
+	if (usage.contextTokens && usage.contextTokens > 0) parts.push(`ctx:${formatTokens(usage.contextTokens)}`);
+	if (model) parts.push(model);
+	return parts.join(" ");
+}
+
+export function formatCompactStats(usage: Partial<UsageStats>, model?: string): string {
+	const io: string[] = [];
+	if (usage.input) io.push(`↑${formatTokens(usage.input)}`);
+	if (usage.output) io.push(`↓${formatTokens(usage.output)}`);
+	const meta: string[] = [];
+	if (usage.cacheRead) meta.push(`CR:${formatTokens(usage.cacheRead)}`);
+	if (usage.contextTokens && usage.contextTokens > 0) meta.push(`ctx:${formatTokens(usage.contextTokens)}`);
+	if (model) meta.push(model);
+	const parts: string[] = [];
+	if (io.length) parts.push(io.join(" "));
+	if (meta.length) parts.push(meta.join(" "));
+	return parts.join(" │ ");
+}
+
+export function truncateChars(text: string, max: number): string {
+	if (text.length <= max) return text;
+	const head = Math.ceil(max * 0.6);
+	const tail = max - head - 3;
+	return text.slice(0, head) + " ... " + text.slice(-tail);
+}
+
+export function tailText(text: string, max: number): string {
+	const flat = text.replace(/[\n\r\t]+/g, " ").replace(/ +/g, " ").trim();
+	if (flat.length <= max) return flat;
+	return flat.slice(-max);
+}

package/render.ts

@@ -28,6 +28,8 @@ function shortenPath(p: string): string {
 }
 
 type ThemeFg = (color: string, text: string) => string;
+type ThemeBg = (color: string, text: string) => string;
+type FlowTheme = { fg: ThemeFg; bold: (s: string) => string; bg: ThemeBg };
 
 function formatFlowToolCall(toolName: string, args: Record<string, unknown>, fg: ThemeFg): string {
 	const pathArg = (args.file_path || args.path || "...") as string;
@@ -113,7 +115,7 @@ function truncateText(text: string): string {
 	return `${words.slice(0, 3).join(" ")} ... ${words.slice(-8).join(" ")}`;
 }
 
-export function renderFlowCall(args: Record<string, any>, theme: { fg: ThemeFg; bold: (s: string) => string }): Text {
+export function renderFlowCall(args: Record<string, any>, theme: FlowTheme): Text {
 	const flows = args.flow as Array<{ type: string; intent: string }> | undefined;
 
 	// Minimal — renderFlowResult owns the full display
@@ -129,7 +131,7 @@ export function renderFlowCall(args: Record<string, any>, theme: { fg: ThemeFg;
 export function renderFlowResult(
 	result: { content: Array<{ type: string; text?: string }>; details?: unknown },
 	expanded: boolean,
-	theme: { fg: ThemeFg; bold: (s: string) => string },
+	theme: FlowTheme,
 ): Container | Text {
 	const details = result.details as FlowDetails | undefined;
 	const streamingText = result.content?.[0]?.type === "text" ? result.content[0].text : undefined;
@@ -152,7 +154,7 @@ export function renderFlowResult(
 function renderSingleFlowResult(
 	r: SingleResult,
 	expanded: boolean,
-	theme: { fg: ThemeFg; bold: (s: string) => string },
+	theme: FlowTheme,
 	streamingText?: string,
 ): Container | Text {
 	const error = isFlowError(r);
@@ -172,7 +174,7 @@ function renderFlowExpanded(
 	error: boolean,
 	displayItems: DisplayItem[],
 	flowOutput: string,
-	theme: { fg: ThemeFg; bold: (s: string) => string },
+	theme: FlowTheme,
 ): Container {
 	const mdTheme = getMarkdownTheme();
 	const container = new Container();
@@ -225,27 +227,27 @@ function renderFlowCollapsed(
 	icon: string,
 	error: boolean,
 	flowOutput: string,
-	theme: { fg: ThemeFg; bold: (s: string) => string },
+	theme: FlowTheme,
 	streamingText?: string,
 ): Text {
 	const stats = formatCompactStats(r.usage, r.model);
-	let text = `${theme.fg("accent", r.type)} ─ ${theme.fg("dim", stats)}`;
+	let text = `${theme.bg("selectedBg", theme.fg("accent", theme.bold(r.type)))} ${theme.fg("dim", "─")} ${theme.fg("dim", stats)}`;
 	if (error && r.stopReason) text += ` ${theme.fg("error", `[${r.stopReason}]`)}`;
 
 	// Intent line
 	const hasOutput = !!(flowOutput || streamingText || (error && r.errorMessage));
 	if (r.intent) {
 		const prefix = hasOutput ? "├" : "└";
-		text += `\n${theme.fg("muted", `${prefix}─ int:`)} ${theme.fg("dim", truncateChars(r.intent, 40))}`;
+		text += `\n${theme.fg("dim", `${prefix}─ int:`)} ${theme.fg("dim", truncateChars(r.intent, 40))}`;
 	}
 
 	// Output line
 	if (flowOutput) {
-		text += `\n${theme.fg("muted", "└─ msg:")} ${renderFlowReport(truncateChars(flowOutput, 25), theme)}`;
+		text += `\n${theme.fg("dim", "└─ msg:")} ${renderFlowReport(truncateChars(flowOutput, 25), theme)}`;
 	} else if (streamingText) {
-		text += `\n${theme.fg("muted", "└─ msg:")} ${theme.fg("dim", tailText(streamingText, 40))}`;
+		text += `\n${theme.fg("dim", "└─ msg:")} ${theme.fg("dim", tailText(streamingText, 40))}`;
 	} else if (error && r.errorMessage) {
-		text += `\n${theme.fg("muted", "└─ msg:")} ${theme.fg("error", truncateChars(r.errorMessage, 25))}`;
+		text += `\n${theme.fg("dim", "└─ msg:")} ${theme.fg("error", truncateChars(r.errorMessage, 25))}`;
 	}
 
 	return new Text(text, 0, 0);
@@ -258,7 +260,7 @@ function renderFlowCollapsed(
 function renderMultiFlowResult(
 	details: FlowDetails,
 	expanded: boolean,
-	theme: { fg: ThemeFg; bold: (s: string) => string },
+	theme: FlowTheme,
 ): Container | Text {
 	const results = details.results;
 	const successCount = results.filter((r) => isFlowSuccess(r)).length;
@@ -275,7 +277,7 @@ function renderMultiFlowExpanded(
 	results: SingleResult[],
 	successCount: number,
 	icon: string,
-	theme: { fg: ThemeFg; bold: (s: string) => string },
+	theme: FlowTheme,
 ): Container {
 	const mdTheme = getMarkdownTheme();
 	const container = new Container();
@@ -324,17 +326,43 @@ function renderMultiFlowCollapsed(
 	results: SingleResult[],
 	successCount: number,
 	icon: string,
-	theme: { fg: ThemeFg; bold: (s: string) => string },
+	theme: FlowTheme,
 ): Text {
 	let text = `${icon} ${theme.fg("toolTitle", theme.bold("flow "))}${theme.fg("accent", `${successCount}/${results.length} flows`)}`;
 
-	for (const r of results) {
+	for (let i = 0; i < results.length; i++) {
+		const r = results[i];
+		const isLast = i === results.length - 1;
 		const flowOutput = getFlowOutput(r.messages);
-		const usageStr = formatFlowUsage(r.usage, r.model);
-		text += `\n${theme.fg("accent", `flow [${r.type}]`)}`;
-		if (usageStr) text += ` ${theme.fg("dim", usageStr)}`;
+		const stats = formatCompactStats(r.usage, r.model);
+		const error = isFlowError(r);
+
+		// Header line
+		const headerPrefix = isLast ? "└─" : "├─";
+		let line = `\n${theme.fg("dim", headerPrefix)} ${theme.bg("selectedBg", theme.fg("accent", theme.bold(r.type)))}`;
+		if (stats) {
+			line += ` ${theme.fg("dim", "─")} ${theme.fg("dim", stats)}`;
+		}
+		if (error && r.stopReason) {
+			line += ` ${theme.fg("error", `[${r.stopReason}]`)}`;
+		}
+		text += line;
+
+		// Continuation indent for sub-lines
+		const indent = isLast ? "   " : "│  ";
+
+		// Intent line
+		const hasOutput = !!(flowOutput || (error && r.errorMessage));
+		if (r.intent) {
+			const intentPrefix = hasOutput ? "├─" : "└─";
+			text += `\n${theme.fg("dim", indent + intentPrefix + " int:")} ${theme.fg("dim", truncateChars(r.intent, 40))}`;
+		}
+
+		// Output line
 		if (flowOutput) {
-			text += `\n${renderFlowReport(truncateText(flowOutput), theme)}`;
+			text += `\n${theme.fg("dim", indent + "└─ msg:")} ${renderFlowReport(truncateChars(flowOutput, 25), theme)}`;
+		} else if (error && r.errorMessage) {
+			text += `\n${theme.fg("dim", indent + "└─ msg:")} ${theme.fg("error", truncateChars(r.errorMessage, 25))}`;
 		}
 	}