pi-agent-flow 0.1.0-alpha.2 → 0.1.0-alpha.4

package/flow.ts

@@ -12,7 +12,7 @@ import * as path from "node:path";
 import type { AgentToolResult } from "@mariozechner/pi-agent-core";
 import type { FlowConfig } from "./agents.js";
 import { parseFlowCliArgs } from "./runner-cli.js";
-import { processFlowJsonLine } from "./runner-events.js";
+import { processFlowJsonLine, drainStreamingText } from "./runner-events.js";
 import {
 	type SingleResult,
 	type FlowDetails,
@@ -224,11 +224,12 @@ export async function runFlow(opts: RunFlowOptions): Promise<SingleResult> {
 	};
 
 	const emitUpdate = () => {
+		const streaming = drainStreamingText(result);
 		onUpdate?.({
 			content: [
 				{
 					type: "text",
-					text: getFlowOutput(result.messages) || "(running...)",
+					text: streaming || getFlowOutput(result.messages) || "(running...)",
 				},
 			],
 			details: makeDetails([result]),

package/index.ts

@@ -379,9 +379,8 @@ Multiple independent flows? Batch them into one call:
 
 Each call renders as:
 
-routing to:
-  • flow [explore] — Map the full directory structure...
-  • flow [review] — Audit security and quality...
+• flow [explore] — Map the full directory structure...
+• flow [review] — Audit security and quality...
 
 Each flow returns:
 
@@ -489,10 +488,12 @@ flow [type] accomplished
 					};
 				}
 
-				const emitProgress = () => {
+				let lastStreamingText = "";
+				const emitProgress = (streamingText?: string) => {
 					if (!onUpdate) return;
+					if (streamingText) lastStreamingText = streamingText;
 					onUpdate({
-						content: [{ type: "text", text: `Flow: ${allResults.filter((r) => r.exitCode !== -1).length}/${allResults.length} done` }],
+						content: [{ type: "text", text: lastStreamingText || "" }],
 						details: makeDetails([...allResults]),
 					});
 				};
@@ -527,7 +528,7 @@ flow [type] accomplished
 							onUpdate: (partial) => {
 								if (partial.details?.results[0]) {
 									allResults[index] = partial.details.results[0];
-									emitProgress();
+									emitProgress(partial.content?.[0]?.text);
 								}
 							},
 							makeDetails,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-agent-flow",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "Flow-state delegation extension for Pi coding agent.",
   "type": "module",
   "main": "index.ts",
@@ -36,10 +36,11 @@
   },
   "scripts": {
     "lint": "tsc --noEmit",
-    "test": "echo \"no tests yet\" && exit 0"
+    "test": "vitest run"
   },
   "devDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": "^5.0.0",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@mariozechner/pi-agent-core": ">=0.37.0",

package/render.ts

@@ -20,31 +20,7 @@ import {
 	isFlowError,
 	isFlowSuccess,
 } from "./types.js";
-
-// ---------------------------------------------------------------------------
-// Formatting helpers
-// ---------------------------------------------------------------------------
-
-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`;
-}
-
-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(" ");
-}
+import { formatTokens, formatFlowUsage, formatCompactStats, truncateChars, tailText } from "./render-utils.js";
 
 function shortenPath(p: string): string {
 	const home = os.homedir();
@@ -52,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;
@@ -137,28 +115,11 @@ 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;
 
-	if (flows && flows.length > 0) {
-		if (flows.length === 1) {
-			const f = flows[0];
-			const text =
-				theme.fg("toolTitle", "routing to ") +
-				theme.fg("accent", `flow [${f.type}]`) +
-				theme.fg("dim", ` — ${truncateText(f.intent)}`);
-			return new Text(text, 0, 0);
-		}
-
-		let text = theme.fg("toolTitle", "routing to:");
-		for (const f of flows) {
-			text +=
-				`\n  ${theme.fg("muted", "•")} ` +
-				theme.fg("accent", `flow [${f.type}]`) +
-				theme.fg("dim", ` — ${truncateText(f.intent)}`);
-		}
-		return new Text(text, 0, 0);
-	}
+	// Minimal — renderFlowResult owns the full display
+	return new Text("", 0, 0);
 
 	return new Text(theme.fg("muted", "(empty flow call)"), 0, 0);
 }
@@ -170,16 +131,17 @@ 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;
+
 	if (!details || details.results.length === 0) {
-		const first = result.content[0];
-		return new Text(first?.type === "text" && first.text ? first.text : "(no output)", 0, 0);
+		return new Text(streamingText || "", 0, 0);
 	}
 
 	if (details.results.length === 1) {
-		return renderSingleFlowResult(details.results[0], expanded, theme);
+		return renderSingleFlowResult(details.results[0], expanded, theme, streamingText);
 	}
 
 	return renderMultiFlowResult(details, expanded, theme);
@@ -192,7 +154,8 @@ 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);
 	const icon = flowStatusIcon(r, theme);
@@ -202,7 +165,7 @@ function renderSingleFlowResult(
 	if (expanded) {
 		return renderFlowExpanded(r, icon, error, displayItems, flowOutput, theme);
 	}
-	return renderFlowCollapsed(r, icon, error, flowOutput, theme);
+	return renderFlowCollapsed(r, icon, error, flowOutput, theme, streamingText);
 }
 
 function renderFlowExpanded(
@@ -211,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();
@@ -257,24 +220,34 @@ function renderFlowExpanded(
 	return container;
 }
 
+
+
 function renderFlowCollapsed(
 	r: SingleResult,
 	icon: string,
 	error: boolean,
 	flowOutput: string,
-	theme: { fg: ThemeFg; bold: (s: string) => string },
+	theme: FlowTheme,
+	streamingText?: string,
 ): Text {
-	const usageStr = formatFlowUsage(r.usage, r.model);
-	let text = `${icon} ${theme.fg("toolTitle", theme.bold(`[${r.type}]`))}${theme.fg("muted", ` (${r.agentSource})`)}`;
-	if (usageStr) text += `   ${theme.fg("dim", usageStr)}`;
+	const stats = formatCompactStats(r.usage, r.model);
+	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}]`)}`;
 
-	if (error && r.errorMessage) {
-		text += `\n${theme.fg("error", `Error: ${r.errorMessage}`)}`;
-	} else if (flowOutput) {
-		text += `\n${renderFlowReport(truncateText(flowOutput), theme)}`;
-	} else {
-		text += `\n${theme.fg(error ? "error" : "muted", getFlowSummaryText(r))}`;
+	// Intent line
+	const hasOutput = !!(flowOutput || streamingText || (error && r.errorMessage));
+	if (r.intent) {
+		const prefix = hasOutput ? "├" : "└";
+		text += `\n${theme.fg("dim", `${prefix}─ int:`)} ${theme.fg("dim", truncateChars(r.intent, 40))}`;
+	}
+
+	// Output line
+	if (flowOutput) {
+		text += `\n${theme.fg("dim", "└─ msg:")} ${renderFlowReport(truncateChars(flowOutput, 25), theme)}`;
+	} else if (streamingText) {
+		text += `\n${theme.fg("dim", "└─ msg:")} ${theme.fg("dim", tailText(streamingText, 40))}`;
+	} else if (error && r.errorMessage) {
+		text += `\n${theme.fg("dim", "└─ msg:")} ${theme.fg("error", truncateChars(r.errorMessage, 25))}`;
 	}
 
 	return new Text(text, 0, 0);
@@ -287,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;
@@ -304,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();
@@ -353,20 +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) {
-		const rIcon = flowStatusIcon(r, theme);
+	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\n${theme.fg("muted", "─── ")}${theme.fg("accent", `[${r.type}]`)} ${rIcon}`;
-		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)}`;
-		} else {
-			text += `\n${theme.fg("muted", getFlowSummaryText(r))}`;
+			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))}`;
 		}
 	}
 

package/runner-events.js

@@ -14,6 +14,51 @@ function getSeenFlowMessageSignatures(result) {
   return result.__seenMessageSignatures;
 }
 
+function getStreamingTextBuffer(result) {
+  if (!Object.prototype.hasOwnProperty.call(result, "__streamingTextBuffer")) {
+    Object.defineProperty(result, "__streamingTextBuffer", {
+      value: "",
+      enumerable: false,
+      configurable: false,
+      writable: true,
+    });
+    Object.defineProperty(result, "__lastEmittedWordCount", {
+      value: 0,
+      enumerable: false,
+      configurable: false,
+      writable: true,
+    });
+  }
+  return result.__streamingTextBuffer;
+}
+
+/**
+ * Drain the accumulated streaming text buffer and return it.
+ * Updates the last-emitted word count for threshold tracking.
+ */
+export function drainStreamingText(result) {
+  const buf = getStreamingTextBuffer(result);
+  if (!buf) return "";
+  result.__streamingTextBuffer = "";
+  result.__lastEmittedWordCount = 0;
+  return buf;
+}
+
+/**
+ * Accumulate a text or thinking delta into the streaming buffer.
+ * Returns true if the caller should emit an update.
+ */
+function accumulateStreamingDelta(result, delta) {
+  if (!delta) return false;
+  const buf = getStreamingTextBuffer(result);
+  result.__streamingTextBuffer = buf + delta;
+  if (result.__streamingTextBuffer.length - result.__lastEmittedWordCount >= 40) {
+    result.__lastEmittedWordCount = result.__streamingTextBuffer.length;
+    return true;
+  }
+  return false;
+}
+
 function stableStringify(value) {
   if (value === null || typeof value !== "object") {
     return JSON.stringify(value);
@@ -98,6 +143,18 @@ export function processFlowEvent(event, result) {
       result.sawAgentEnd = true;
       return addFlowAssistantMessages(result, event.messages);
 
+    case "message_update": {
+      const evt = event.assistantMessageEvent;
+      if (!evt || typeof evt !== "object") return false;
+      if (evt.type === "text_delta") {
+        return accumulateStreamingDelta(result, evt.delta);
+      }
+      if (evt.type === "thinking_delta") {
+        return accumulateStreamingDelta(result, evt.delta);
+      }
+      return false;
+    }
+
     default:
       return false;
   }