pi-agent-flow 2.2.14 → 2.2.16

package/dist/tui/render.js

@@ -4,14 +4,21 @@
  * Option B: collapsed view shows structured report (Summary/Done/Not Done/Next Steps).
  * Expanded view adds raw tool call traces.
  */
-import * as os from "node:os";
-import { getMarkdownTheme } from "@earendil-works/pi-coding-agent";
-import { Container, Markdown, Spacer, Text } from "@earendil-works/pi-tui";
-import { getFlowSummaryText } from "../snapshot/runner-events.js";
-import { aggregateFlowUsage, getFlowOutput, isFlowError, isFlowSuccess, } from "../types/flow.js";
-import { getFlowDisplayItems, getLastToolCall, } from "../types/ui.js";
-import { formatBatchOpsSummary } from "../batch/summary.js";
-import { scrambleManager, runScrambleTimer, DynamicScrambleText, getLiveText, hashNoise, THIN_BRAILLE_SPARK } from "./scramble/index.js";
+import { Container, Text } from "@earendil-works/pi-tui";
+import { isFlowError, isFlowSuccess } from "../types/flow.js";
+import { getFlowDisplayItems } from "../types/ui.js";
+import { getFlowOutput } from "../types/flow.js";
+import { scrambleManager, runScrambleTimer } from "./scramble/index.js";
+import { buildBootPhaseSingleResult, getFlowLiveState } from "./flow-live-state.js";
+import { applyRole } from "./flow-colors.js";
+import { detectGroups, flowStatusIcon, isFlowStatusComplete, isFlowRunning, isFlowAwaiting, } from "./grouping.js";
+import { renderFlowHeader, } from "./header.js";
+import { renderFlowExpanded, renderFlowCollapsed, renderFlowBody, renderMultiFlowExpanded, } from "./body-render.js";
+// Re-export all extracted symbols for backward compatibility
+export { detectGroups, flowStatusIcon, getFlowStatus, isFlowStatusComplete, isFlowRunning, isFlowAwaiting, hashStrToSeed, getScintillatingStatusDot, } from "./grouping.js";
+export { reconstructHeader, sectionHeader, renderFlowHeader, formatCollapsedFlowHeaderTypeName, } from "./header.js";
+export { renderFlowExpanded, renderFlowCollapsed, renderFlowBody, renderMultiFlowExpanded, } from "./body-render.js";
+export { getContentRole, applyScrambledContextLabel, getLiveTextWithFallback, shortenPath, formatFlowToolCall, splitOutputLines, renderToolTraces, renderFlowReport, } from "./traces.js";
 // ---------------------------------------------------------------------------
 // Anonymous flow-id counter — prevents scramble-state collisions when multiple
 // flow widgets share the screen and toolCallId is absent from result/args.
@@ -24,327 +31,6 @@ function getAnonymousFlowId() {
 export function resetAnonymousFlowIdCounter() {
     anonFlowIdCounter = 0;
 }
-function getContentRole(baseRole, text, useError) {
-    if (useError)
-        return "msgError";
-    if (["[awaiting...]", "[skipped]", "[approved]", "[finished]"].includes(text)) {
-        return "placeholder";
-    }
-    return baseRole;
-}
-function getLiveTextWithFallback(id) {
-    const value = getLiveText(id);
-    if (value !== undefined)
-        return value;
-    const fallbackId = id.includes("#") ? "collapsed" + id.slice(id.indexOf("#")) : "collapsed";
-    return getLiveText(fallbackId);
-}
-import { formatCompactStats, formatFlowTypeName, lowerFirstWord, truncateChars, tailText, getTruncationBudget, visibleLength, stripAnsi, formatModelLabel, formatContextLabel, formatTps } from "./render-utils.js";
-function shortenPath(p) {
-    const home = os.homedir();
-    return p.startsWith(home) ? `~${p.slice(home.length)}` : p;
-}
-import { applyRole, } from "./flow-colors.js";
-function formatCollapsedFlowHeaderTypeName(type) {
-    return type.toLowerCase();
-}
-function formatFlowToolCall(toolName, args, fg) {
-    const pathArg = (args.file_path || args.path || "...");
-    switch (toolName) {
-        case "bash": {
-            const cmd = (args.command || "...").replace(/[\n\r\t]+/g, " ").replace(/ +/g, " ").trim();
-            return fg("muted", "$ ") + fg("toolOutput", cmd);
-        }
-        case "read": {
-            let text = fg("accent", shortenPath(pathArg));
-            const offset = args.offset;
-            const limit = args.limit;
-            if (offset !== undefined || limit !== undefined) {
-                const start = offset ?? 1;
-                const end = limit !== undefined ? start + limit - 1 : "";
-                text += fg("warning", `:${start}${end ? `-${end}` : ""}`);
-            }
-            return fg("muted", "read ") + text;
-        }
-        case "write": {
-            const lines = (args.content || "").split("\n").length;
-            let text = fg("muted", "write ") + fg("accent", shortenPath(pathArg));
-            if (lines > 1)
-                text += fg("dim", ` (${lines} lines)`);
-            return text;
-        }
-        case "edit":
-            return fg("muted", "edit ") + fg("accent", shortenPath(pathArg));
-        case "ls":
-            return fg("muted", "ls ") + fg("accent", shortenPath((args.path || ".")));
-        case "find":
-            return fg("muted", "find ") + fg("accent", (args.pattern || "*")) + fg("dim", ` in ${shortenPath((args.path || "."))}`);
-        case "grep":
-            return fg("muted", "grep ") + fg("accent", `/${(args.pattern || "")}/`) + fg("dim", ` in ${shortenPath((args.path || "."))}`);
-        case "batch":
-        case "batch_read": {
-            const summary = formatBatchOpsSummary(args);
-            return fg("muted", `${toolName} `) + fg("accent", summary);
-        }
-        default:
-            return fg("accent", toolName) + fg("dim", ` ${JSON.stringify(args)}`);
-    }
-}
-// ---------------------------------------------------------------------------
-// Shared rendering building blocks
-// ---------------------------------------------------------------------------
-function splitOutputLines(text) {
-    const lines = text.replace(/\r\n?/g, "\n").split("\n");
-    if (lines.length > 1 && lines[lines.length - 1] === "")
-        lines.pop();
-    return lines;
-}
-function renderToolTraces(items, theme, config) {
-    const lines = [];
-    for (const item of items) {
-        if (item.type === "toolCall") {
-            lines.push(applyRole("prefixLabel", "→ ", theme, config) + formatFlowToolCall(item.name, item.args, theme.fg.bind(theme)));
-        }
-    }
-    return lines.join("\n");
-}
-function renderFlowReport(output, theme, config) {
-    const lines = splitOutputLines(output);
-    return lines.map((line) => applyRole("actContent", line, theme, config)).join("\n");
-}
-function getFlowStatus(r) {
-    return r.status ?? (r.exitCode === -1 ? "running" : r.exitCode === 0 ? "done" : "error");
-}
-function isFlowStatusComplete(r) {
-    const status = getFlowStatus(r);
-    return status === "done" || status === "error" || status === "skipped";
-}
-function isFlowRunning(r) {
-    const status = getFlowStatus(r);
-    return status === "running" || status === "pending";
-}
-function isFlowAwaiting(r) {
-    return getFlowStatus(r) === "awaiting";
-}
-/**
- * Detect audit-loop groups.
- *
- * When the executor stamps `auditLoopGroupId` on results, grouping is
- * explicit and works regardless of array layout (no contiguity required).
- *
- * When no `auditLoopGroupId` is present (legacy / hand-crafted results),
- * we fall back to contiguity-based detection: N contiguous builds with
- * `pingPongMeta` followed immediately by an audit with
- * `auditParentType === "build"`.
- */
-export function detectGroups(results) {
-    const groups = [];
-    const rootIndices = [];
-    // Phase 1: explicit grouping by auditLoopGroupId
-    const groupMap = new Map();
-    const ungroupedIndices = [];
-    for (let i = 0; i < results.length; i++) {
-        const r = results[i];
-        if (r.auditLoopGroupId !== undefined) {
-            let g = groupMap.get(r.auditLoopGroupId);
-            if (!g) {
-                g = { buildIndices: [], auditIndex: -1 };
-                groupMap.set(r.auditLoopGroupId, g);
-            }
-            if (r.pingPongMeta) {
-                g.buildIndices.push(i);
-            }
-            else if (r.auditParentType === "build") {
-                g.auditIndex = i;
-            }
-        }
-        else {
-            ungroupedIndices.push(i);
-        }
-    }
-    for (const g of groupMap.values()) {
-        if (g.auditIndex !== -1) {
-            groups.push({ buildIndices: g.buildIndices, auditIndex: g.auditIndex });
-        }
-        else {
-            // Orphaned builds with groupId but no audit capstone
-            rootIndices.push(...g.buildIndices);
-        }
-    }
-    // Phase 2: legacy fallback on ungrouped results (contiguity-based)
-    let i = 0;
-    while (i < ungroupedIndices.length) {
-        const idx = ungroupedIndices[i];
-        const r = results[idx];
-        if (r.pingPongMeta) {
-            const buildIndices = [];
-            while (i < ungroupedIndices.length && results[ungroupedIndices[i]].pingPongMeta) {
-                buildIndices.push(ungroupedIndices[i]);
-                i++;
-            }
-            if (i < ungroupedIndices.length && results[ungroupedIndices[i]].auditParentType === "build") {
-                groups.push({ buildIndices, auditIndex: ungroupedIndices[i] });
-                i++;
-            }
-            else {
-                rootIndices.push(...buildIndices);
-            }
-        }
-        else if (r.auditParentType === "build" && i > 0 && results[ungroupedIndices[i - 1]].pingPongMeta) {
-            i++; // orphan audit already consumed
-        }
-        else {
-            rootIndices.push(idx);
-            i++;
-        }
-    }
-    return { groups, rootIndices };
-}
-/**
- * Get the status icon dot for a result (● ○ ✗ ⊘).
- */
-function flowStatusIcon(r, theme) {
-    const status = getFlowStatus(r);
-    switch (status) {
-        case "running":
-        case "pending":
-            return theme.fg("warning", "●");
-        case "awaiting":
-            return theme.fg("muted", "○");
-        case "done":
-            return theme.fg("success", "●");
-        case "error":
-            return theme.fg("error", "✗");
-        case "skipped":
-            return theme.fg("muted", "⊘");
-        default:
-            return theme.fg("muted", "?");
-    }
-}
-function hashStrToSeed(s) {
-    let h = 2166136261;
-    for (let i = 0; i < s.length; i++) {
-        h ^= s.charCodeAt(i);
-        h = Math.imul(h, 16777619);
-    }
-    return h >>> 0;
-}
-function getScintillatingStatusDot(r, theme, now, flowId) {
-    const status = getFlowStatus(r);
-    switch (status) {
-        case "running":
-        case "pending": {
-            const isPending = status === "pending";
-            const seed = hashStrToSeed(flowId || r.type);
-            const bucketSize = isPending ? 7000 : 5000;
-            const bucket = Math.floor(now / bucketSize);
-            const t = now % bucketSize;
-            const burstCount = isPending
-                ? 1 + Math.floor(hashNoise(seed, bucket, 0, 0x5a4f) * 2) // 1-2
-                : 2 + Math.floor(hashNoise(seed, bucket, 0, 0x5a4f) * 2); // 2-3
-            let cursor = 50;
-            for (let b = 0; b < burstCount; b++) {
-                const gap = isPending
-                    ? 800 + Math.floor(hashNoise(seed, bucket, b * 4, 0xb8a0) * 1400) // 800-2200ms
-                    : 500 + Math.floor(hashNoise(seed, bucket, b * 4, 0xb8a0) * 1300); // 500-1800ms
-                cursor += gap;
-                const duration = isPending
-                    ? 80 + Math.floor(hashNoise(seed, bucket, b * 4 + 1, 0xc0de) * 170) // 80-250ms
-                    : 100 + Math.floor(hashNoise(seed, bucket, b * 4 + 1, 0xc0de) * 250); // 100-350ms
-                const burstStart = cursor;
-                const burstEnd = cursor + duration;
-                cursor = burstEnd;
-                if (t >= burstStart && t < burstEnd) {
-                    const tInBurst = t - burstStart;
-                    const tick = 12 + Math.floor(hashNoise(seed, bucket, b * 4 + 3, 0xd1a0) * 10); // 12-22ms per stutter step
-                    // Vary stutter depth: 3-tick ○●○ or 5-tick ○●○●○ per burst
-                    const rawStutterTicks = hashNoise(seed, bucket, b * 4 + 2, 0xe7a1) > 0.5 ? 5 : 3;
-                    const stutterLen5 = tick * 5;
-                    const onRunMax5 = duration - stutterLen5 - 5;
-                    const stutterTicks = (rawStutterTicks === 5 && onRunMax5 >= tick) ? 5 : 3;
-                    const stutterLen = tick * stutterTicks;
-                    const onRunMax = duration - stutterLen - 5;
-                    const onRun = Math.max(tick, Math.min(Math.floor(duration * (0.35 + hashNoise(seed, bucket, b * 4 + 2, 0xf1c0) * 0.3)), onRunMax));
-                    const cycleLen = onRun + stutterLen;
-                    const phaseInCycle = tInBurst % cycleLen;
-                    const cycleIdx = Math.floor(tInBurst / cycleLen);
-                    // Helper: dip ○ with occasional sparkle
-                    const dipDot = (dipIndex) => {
-                        if (hashNoise(seed, bucket, cycleIdx + dipIndex * 100, 0x5ab0) < 0.05) {
-                            const sparkIdx = Math.floor(hashNoise(seed, bucket, cycleIdx + dipIndex * 100, 0x5b1) * THIN_BRAILLE_SPARK.length);
-                            return theme.fg("muted", THIN_BRAILLE_SPARK[sparkIdx]);
-                        }
-                        return theme.fg("muted", "○");
-                    };
-                    if (phaseInCycle < onRun) {
-                        // Sustained bright ●
-                        return theme.fg("warning", "●");
-                    }
-                    else if (phaseInCycle < onRun + tick) {
-                        return dipDot(0); // ○ dip 1
-                    }
-                    else if (phaseInCycle < onRun + tick * 2) {
-                        return theme.fg("warning", "●"); // ● flash 1
-                    }
-                    else if (phaseInCycle < onRun + tick * 3) {
-                        return dipDot(1); // ○ dip 2
-                    }
-                    else if (stutterTicks >= 5 && phaseInCycle < onRun + tick * 4) {
-                        return theme.fg("warning", "●"); // ● flash 2 (5-tick only)
-                    }
-                    else if (stutterTicks >= 5 && phaseInCycle < onRun + tick * 5) {
-                        return dipDot(2); // ○ dip 3 (5-tick only)
-                    }
-                    else {
-                        // Fallback: shouldn't reach if scheduling is correct
-                        return theme.fg("warning", "●");
-                    }
-                }
-            }
-            return theme.fg("warning", "●");
-        }
-        case "awaiting":
-            return theme.fg("muted", "○");
-        case "done":
-            return theme.fg("success", "●");
-        case "error":
-            return theme.fg("error", "✗");
-        case "skipped":
-            return theme.fg("muted", "⊘");
-        default:
-            return theme.fg("muted", "?");
-    }
-}
-/** Center a label in a fixed-width header using em-dashes. Total width = 20. */
-function sectionHeader(label) {
-    const total = 20;
-    const innerLen = label.length + 2; // account for spaces around label
-    const side = (total - innerLen) / 2;
-    const left = "─".repeat(Math.floor(side));
-    const right = "─".repeat(Math.ceil(side));
-    return `${left} ${label} ${right}`;
-}
-/** Reconstruct multi-segment ANSI styles on a flat string by splitting at
- *  original segment boundaries and re-applying each segment's style function.
- */
-export function reconstructHeader(content, segments) {
-    let offset = 0;
-    const parts = [];
-    for (const seg of segments) {
-        const len = seg.text.length;
-        if (offset >= content.length)
-            break;
-        parts.push(seg.style(content.slice(offset, offset + len)));
-        offset += len;
-    }
-    if (offset < content.length) {
-        parts.push(content.slice(offset));
-    }
-    return parts.join("");
-}
-// ---------------------------------------------------------------------------
-// renderFlowCall — shown while the flow is being invoked
-// ---------------------------------------------------------------------------
 export function renderFlowCall(args, theme, config) {
     let container = new Text("", 0, 0);
     // In-place mutation pattern: reuse the stored root container
@@ -357,7 +43,7 @@ export function renderFlowCall(args, theme, config) {
             s.__rootContainer = root;
             container = root;
         }
-        else if (container !== s.__rootContainer) {
+        else {
             const root = s.__rootContainer;
             root.clear();
             root.addChild(container);
@@ -373,13 +59,13 @@ export function renderFlowCall(args, theme, config) {
 export function renderFlowResult(result, expanded, theme, args, config) {
     const details = result.details;
     const streamingText = result.content?.[0]?.type === "text" ? result.content[0].text : undefined;
-    const sharedContext = details?.sharedContext;
-    // Resolve a stable id for this flow widget. Once an id is stored in
-    // state we keep reusing it to prevent mid-render id switches that would
-    // reset scramble animation state. On first render we prefer result._toolCallId,
-    // then args inputs, then a per-state anonymous counter.
-    // This prevents scramble-state collisions when multiple flow widgets are
-    // visible simultaneously (e.g. sequential flows) and toolCallId is absent.
+    const resolvedIdForLive = result._toolCallId
+        || args?.toolCallId
+        || args?.id;
+    const live = getFlowLiveState(resolvedIdForLive);
+    const sharedContext = details?.sharedContext
+        ?? args?.sharedContext
+        ?? live?.sharedContext;
     let resolvedToolCallId;
     if (args?.state) {
         const s = args.state;
@@ -396,41 +82,30 @@ export function renderFlowResult(result, expanded, theme, args, config) {
         resolvedToolCallId = result._toolCallId || args?.toolCallId || args?.id;
     }
     let container;
-    if (!details || details.results.length === 0) {
-        // Ghost Dashboard: render a placeholder status line during the zero state
-        const flowRequest = args?.flow?.[0];
-        if (flowRequest) {
-            const ghostResult = {
-                type: flowRequest.type || "unknown",
-                agentSource: "user",
-                intent: flowRequest.intent || "Processing...",
-                aim: flowRequest.aim ?? flowRequest.intent ?? "Processing...",
-                acceptance: flowRequest.acceptance,
-                exitCode: -1, // In progress
-                messages: [],
-                stderr: "",
-                usage: { input: 0, output: 0, cacheRead: 0, cacheWrite: 0, cost: 0, contextTokens: 0, turns: 0, toolCalls: 0 },
-                ...(flowRequest.model ? { model: flowRequest.model } : {}),
-                ...(flowRequest.maxContextTokens !== undefined ? { maxContextTokens: flowRequest.maxContextTokens } : {}),
-            };
-            const ghostId = resolvedToolCallId || 'ghost';
-            if (expanded) {
-                const now = Date.now();
-                container = renderFlowExpanded(ghostResult, flowStatusIcon(ghostResult, theme), false, getFlowDisplayItems([]), getFlowOutput([]), theme, ghostId, now, false, streamingText || "", config, undefined);
-            }
-            else {
-                container = renderFlowCollapsed(ghostResult, flowStatusIcon(ghostResult, theme), false, streamingText || "", theme, undefined, ghostId, config);
-            }
-        }
-        else {
-            container = new Text(scrambleManager.renderStatic(streamingText || ""), 0, 0);
-        }
-    }
-    else if (details.results.length === 1) {
-        container = renderSingleFlowResult(details.results[0], expanded, theme, streamingText, resolvedToolCallId, config, sharedContext);
+    const flowRequest = args?.flow?.[0];
+    const bootResult = buildBootPhaseSingleResult(live, flowRequest);
+    const results = details?.results?.length
+        ? details.results
+        : bootResult
+            ? [bootResult]
+            : [];
+    if (results.length === 0) {
+        container = new Text(scrambleManager.renderStatic(streamingText || ""), 0, 0);
+    }
+    else if (results.length === 1) {
+        container = renderSingleFlowResult(results[0], expanded, theme, streamingText, resolvedToolCallId, config, sharedContext);
+    }
+    else if (details && details.results.length > 1) {
+        container = renderMultiFlowResult(details, expanded, theme, resolvedToolCallId, config, sharedContext);
     }
     else {
-        container = renderMultiFlowResult(details, expanded, theme, resolvedToolCallId, config, sharedContext);
+        container = renderMultiFlowResult({
+            mode: "flow",
+            flowStyle: "fork",
+            projectAgentsDir: details?.projectAgentsDir ?? null,
+            results,
+            sharedContext,
+        }, expanded, theme, resolvedToolCallId, config, sharedContext);
     }
     // In-place mutation pattern: reuse the stored root container
     // so the TUI host's cached reference stays valid.
@@ -447,7 +122,7 @@ export function renderFlowResult(result, expanded, theme, args, config) {
                 s.__rootContainer = root;
             }
         }
-        else if (container !== s.__rootContainer) {
+        else {
             // Subsequent renders: transfer children to the stored container.
             // Use a snapshot of the children array so the loop remains safe even if
             // addChild() mutates the source array (removes from old parent).
@@ -469,17 +144,8 @@ export function renderFlowResult(result, expanded, theme, args, config) {
     }
     // Scramble animation timer — shared helper so any renderer can animate.
     // Use resolvedToolCallId so the timer scope matches the state scope.
-    let timerId;
-    if (!details || details.results.length === 0) {
-        const flowRequest = args?.flow?.[0];
-        timerId = resolvedToolCallId || (flowRequest ? 'ghost' : 'single');
-    }
-    else if (details.results.length === 1) {
-        timerId = resolvedToolCallId || 'single';
-    }
-    else {
-        timerId = resolvedToolCallId || 'multi';
-    }
+    const timerId = resolvedToolCallId
+        || (results.length > 1 ? "multi" : results.length === 1 ? "single" : "empty");
     runScrambleTimer(args, timerId);
     return container;
 }
@@ -499,342 +165,6 @@ export function renderSingleFlowResult(r, expanded, theme, streamingText, toolCa
     }
     return renderFlowCollapsed(r, icon, error, flowOutput, theme, streamingText, id, config, sharedContext);
 }
-function renderFlowExpanded(r, icon, error, displayItems, flowOutput, theme, id, now, isComplete, streamingText, config, sharedContext) {
-    const mdTheme = getMarkdownTheme();
-    const container = new Container();
-    const typeName = formatFlowTypeName(r.type);
-    if (sharedContext) {
-        container.addChild(new Text(applyRole("prefixLabel", "── shared context ──", theme, config), 0, 0));
-        container.addChild(new Text(applyRole("aimContent", sharedContext.preview, theme, config), 0, 0));
-        const statsParts = [];
-        statsParts.push(`${sharedContext.userMessageCount} user`);
-        statsParts.push(`${sharedContext.assistantMessageCount} assistant`);
-        statsParts.push(`${sharedContext.totalTokens} tokens`);
-        for (const [name, count] of Object.entries(sharedContext.toolCalls)) {
-            statsParts.push(`${count}× ${name}`);
-        }
-        container.addChild(new Text(applyRole("stats", statsParts.join(" · "), theme, config), 0, 0));
-        container.addChild(new Spacer(1));
-        container.addChild(new Text(applyRole("prefixLabel", sectionHeader(typeName), theme, config), 0, 0));
-        container.addChild(new Spacer(1));
-    }
-    const initialDot = flowStatusIcon(r, theme);
-    let header = `${initialDot} ${applyRole("flowName", typeName, theme, config)}`;
-    const errorSegment = error && r.stopReason ? ` [${r.stopReason}]` : "";
-    if (errorSegment)
-        header += ` ${theme.fg("error", errorSegment)}`;
-    const dotPlaceholder = stripAnsi(initialDot) + ' ';
-    const plainHeader = dotPlaceholder + typeName + errorSegment;
-    const headerSegments = [
-        { text: dotPlaceholder, style: (_s) => getScintillatingStatusDot(r, theme, Date.now(), id) + " " },
-        { text: typeName, style: (s) => applyRole("flowName", s, theme, config) },
-    ];
-    if (errorSegment) {
-        headerSegments.push({ text: errorSegment, style: (s) => theme.fg("error", s) });
-    }
-    container.addChild(new DynamicScrambleText(header, () => {
-        const now = Date.now();
-        const result = scrambleManager.updateText(id, 'header', plainHeader, now, isComplete);
-        return reconstructHeader(result.content, headerSegments);
-    }));
-    if (error && r.errorMessage) {
-        container.addChild(new Text(scrambleManager.renderStatic(theme.fg("error", `Error: ${r.errorMessage}`)), 0, 0));
-    }
-    // Stats: dashboard format
-    const displayUsage = sharedContext ? { ...r.usage, input: sharedContext.totalTokens } : r.usage;
-    const inlineStats = formatCompactStats(displayUsage, r.model);
-    container.addChild(new DynamicScrambleText(applyRole("stats", inlineStats, theme, config), () => {
-        const result = scrambleManager.updateText(id, 'stats', stripAnsi(inlineStats), Date.now(), isComplete);
-        return result.isAnimating ? applyRole("stats", result.content, theme, config) : applyRole("stats", inlineStats, theme, config);
-    }));
-    // Intent — column-aware truncation (budget recalculated inside closure for resize handling)
-    const intentBudget = getTruncationBudget(0);
-    const displayIntent = truncateChars(r.intent, intentBudget);
-    container.addChild(new Spacer(1));
-    container.addChild(new Text(applyRole("prefixLabel", sectionHeader("intent"), theme, config), 0, 0));
-    container.addChild(new DynamicScrambleText(applyRole("aimContent", displayIntent, theme, config), () => {
-        const budget = getTruncationBudget(0);
-        const text = truncateChars(r.intent, budget);
-        const result = scrambleManager.updateText(id, 'intent', text, Date.now(), isComplete);
-        return result.isAnimating ? applyRole("aimContent", result.content, theme, config) : applyRole("aimContent", text, theme, config);
-    }));
-    // Acceptance
-    if (r.acceptance) {
-        const acceptanceRaw = r.acceptance;
-        const acceptanceBudget = getTruncationBudget(0);
-        const acceptanceText = truncateChars(acceptanceRaw, acceptanceBudget);
-        container.addChild(new Spacer(1));
-        container.addChild(new Text(applyRole("prefixLabel", sectionHeader("acceptance"), theme, config), 0, 0));
-        container.addChild(new DynamicScrambleText(applyRole("aimContent", acceptanceText, theme, config), () => {
-            const budget = getTruncationBudget(0);
-            const text = truncateChars(acceptanceRaw, budget);
-            const result = scrambleManager.updateText(id, 'acceptance', text, Date.now(), isComplete);
-            return result.isAnimating ? applyRole("aimContent", result.content, theme, config) : applyRole("aimContent", text, theme, config);
-        }));
-    }
-    // Flow report (structured output)
-    container.addChild(new Spacer(1));
-    container.addChild(new Text(applyRole("prefixLabel", sectionHeader("report"), theme, config), 0, 0));
-    // Structured output summary (compact badge when available)
-    if (r.structuredOutput) {
-        const so = r.structuredOutput;
-        const statusColor = so.status === "complete" ? "success" : so.status === "partial" ? "warning" : "error";
-        const statusText = `[${so.status}] ${so.summary}`;
-        const statusStatic = `${theme.fg(statusColor, `[${so.status}]`)} ${applyRole("aimContent", so.summary, theme, config)}`;
-        container.addChild(new DynamicScrambleText(statusStatic, () => {
-            const result = scrambleManager.updateText(id, 'report-status', statusText, Date.now(), isComplete, false);
-            return result.isAnimating ? `${theme.fg(statusColor, result.content.split(' ')[0])} ${applyRole("aimContent", result.content.slice(result.content.indexOf(' ') + 1), theme, config)}` : statusStatic;
-        }));
-        if (so.files.length > 0) {
-            const filesText = `Files: ${so.files.map((f) => f.path).join(", ")}`;
-            container.addChild(new DynamicScrambleText(applyRole("aimContent", filesText, theme, config), () => {
-                const result = scrambleManager.updateText(id, 'report-files', filesText, Date.now(), isComplete, false);
-                return result.isAnimating ? applyRole("aimContent", result.content, theme, config) : applyRole("aimContent", filesText, theme, config);
-            }));
-        }
-        if (so.commands?.length > 0) {
-            const cmdLabels = so.commands.map((c) => {
-                const short = c.command.length > 30 ? c.command.slice(0, 30) + "..." : c.command;
-                return `${c.tool ?? "cmd"}: ${short}`;
-            });
-            const commandsText = `Commands: ${cmdLabels.join(", ")}`;
-            container.addChild(new DynamicScrambleText(applyRole("aimContent", commandsText, theme, config), () => {
-                const result = scrambleManager.updateText(id, 'report-commands', commandsText, Date.now(), isComplete, false);
-                return result.isAnimating ? applyRole("aimContent", result.content, theme, config) : applyRole("aimContent", commandsText, theme, config);
-            }));
-        }
-        if (so.notDone.length > 0) {
-            const notDoneText = `Not Done: ${so.notDone.map((item) => {
-                const details = [
-                    item.reason ? `reason: ${item.reason}` : undefined,
-                    item.blocker ? `blocker: ${item.blocker}` : undefined,
-                    item.nextStep ? `next: ${item.nextStep}` : undefined,
-                ].filter(Boolean).join("; ");
-                return details ? `${item.item} (${details})` : item.item;
-            }).join("; ")}`;
-            container.addChild(new DynamicScrambleText(applyRole("aimContent", notDoneText, theme, config), () => {
-                const result = scrambleManager.updateText(id, 'report-notDone', notDoneText, Date.now(), isComplete, false);
-                return result.isAnimating ? applyRole("aimContent", result.content, theme, config) : applyRole("aimContent", notDoneText, theme, config);
-            }));
-        }
-        if (so.nextSteps.length > 0) {
-            const nextStepsText = `Next: ${so.nextSteps.join("; ")}`;
-            container.addChild(new DynamicScrambleText(applyRole("aimContent", nextStepsText, theme, config), () => {
-                const result = scrambleManager.updateText(id, 'report-nextSteps', nextStepsText, Date.now(), isComplete, false);
-                return result.isAnimating ? applyRole("aimContent", result.content, theme, config) : applyRole("aimContent", nextStepsText, theme, config);
-            }));
-        }
-        container.addChild(new Spacer(1));
-    }
-    // Output: animate streaming text; show clean markdown when complete
-    if (isFlowAwaiting(r)) {
-        container.addChild(new Text(applyRole("placeholder", "[awaiting...]", theme, config), 0, 0));
-    }
-    else if (!isComplete && streamingText != null) {
-        const msgBudget = getTruncationBudget(0);
-        const displayMsg = tailText(stripAnsi(streamingText), msgBudget);
-        container.addChild(new DynamicScrambleText(applyRole("msgContent", displayMsg, theme, config), () => {
-            const budget = getTruncationBudget(0);
-            const freshStreamingText = getLiveTextWithFallback(id) ?? streamingText;
-            const text = tailText(stripAnsi(freshStreamingText), budget);
-            const result = scrambleManager.updateMsg(id, text, Date.now(), isComplete, undefined, true);
-            return result.isAnimating ? applyRole("msgContent", result.content, theme, config) : applyRole("msgContent", text, theme, config);
-        }));
-    }
-    else if (flowOutput) {
-        container.addChild(new Markdown(flowOutput.trim(), 0, 0, mdTheme));
-    }
-    else {
-        const summary = getFlowSummaryText(r);
-        container.addChild(new DynamicScrambleText(applyRole("msgContent", summary, theme, config), () => {
-            const result = scrambleManager.updateText(id, 'output-summary', summary, Date.now(), isComplete, false);
-            return result.isAnimating ? applyRole("msgContent", result.content, theme, config) : applyRole("msgContent", summary, theme, config);
-        }));
-    }
-    // Tool traces (expanded only) — per-line scramble
-    const toolCallItems = displayItems.filter((item) => item.type === "toolCall");
-    if (toolCallItems.length > 0) {
-        container.addChild(new Spacer(1));
-        container.addChild(new Text(applyRole("prefixLabel", sectionHeader("tool calls"), theme, config), 0, 0));
-        const toolPrefixLen = visibleLength("→ ");
-        const toolBudget = getTruncationBudget(toolPrefixLen);
-        for (let i = 0; i < toolCallItems.length; i++) {
-            const item = toolCallItems[i];
-            const lineText = applyRole("prefixLabel", "→ ", theme, config) + formatFlowToolCall(item.name, item.args, theme.fg.bind(theme));
-            const plainText = stripAnsi(lineText);
-            const displayTool = truncateChars(plainText, toolBudget);
-            const initialScrambled = scrambleManager.updateText(id, `tool#${i}`, displayTool, now, isComplete).content;
-            container.addChild(new DynamicScrambleText(initialScrambled, () => {
-                const budget = getTruncationBudget(toolPrefixLen);
-                const freshPlain = stripAnsi(lineText);
-                const text = truncateChars(freshPlain, budget);
-                return scrambleManager.updateText(id, `tool#${i}`, text, Date.now(), isComplete).content;
-            }));
-        }
-    }
-    if (isComplete) {
-        scrambleManager.completeFlow(id);
-    }
-    return container;
-}
-function renderFlowCollapsed(r, icon, error, flowOutput, theme, streamingText, toolCallId, config, sharedContext) {
-    const id = toolCallId || "collapsed";
-    const now = Date.now();
-    const container = new Container();
-    const maxWidth = process.stdout.columns ?? 80;
-    const typeName = formatCollapsedFlowHeaderTypeName(r.type);
-    const modelLabel = formatModelLabel(r.model);
-    const headerPrefixLen = visibleLength(typeName) + visibleLength(modelLabel ? `  ${modelLabel} · ` : "  ");
-    const isComplete = isFlowStatusComplete(r);
-    // Build header stats: ctxLabel · t/s
-    const statsParts = [];
-    const ctxTokens = sharedContext?.totalTokens ?? r.usage.contextTokens;
-    if (r.maxContextTokens !== undefined || ctxTokens > 0) {
-        const ctxLabel = formatContextLabel(ctxTokens, r.maxContextTokens);
-        statsParts.push(ctxLabel);
-    }
-    let displayStats = statsParts.join(" · ");
-    if (r.usage.smoothedTps && r.usage.smoothedTps > 0) {
-        const tpsFormatted = formatTps(r.usage.smoothedTps);
-        statsParts.push(tpsFormatted);
-        displayStats = statsParts.join(" · ");
-        // Flash TPS value when it changes
-        const tpsNum = tpsFormatted.slice(0, -4); // remove " t/s" suffix
-        const scrambledTps = scrambleManager.updateTps(id, tpsNum, now, isComplete, true);
-        if (scrambledTps !== tpsNum) {
-            displayStats = displayStats.replace(`${tpsNum} t/s`, `${scrambledTps} t/s`);
-        }
-    }
-    const modelSegment = modelLabel ? `  ${modelLabel} · ` : "  ";
-    const statsSegment = stripAnsi(displayStats);
-    const errorSegment = error && r.stopReason ? ` [${r.stopReason}]` : "";
-    const initialDot = flowStatusIcon(r, theme);
-    let header = `${initialDot} ${applyRole("flowName", typeName, theme, config)}${applyRole("modelName", modelSegment, theme, config)}${applyRole("stats", displayStats, theme, config)}`;
-    if (errorSegment)
-        header += ` ${theme.fg("error", errorSegment)}`;
-    const dotPlaceholder = stripAnsi(initialDot) + ' ';
-    const plainHeader = dotPlaceholder + typeName + modelSegment + statsSegment + errorSegment;
-    const headerSegments = [
-        { text: dotPlaceholder, style: (_s) => getScintillatingStatusDot(r, theme, Date.now(), id) + " " },
-        { text: typeName, style: (s) => applyRole("flowName", s, theme, config) },
-        { text: modelSegment, style: (s) => applyRole("modelName", s, theme, config) },
-        { text: statsSegment, style: (s) => applyRole("stats", s, theme, config) },
-    ];
-    if (errorSegment) {
-        headerSegments.push({ text: errorSegment, style: (s) => theme.fg("error", s) });
-    }
-    container.addChild(new DynamicScrambleText(header, () => {
-        const now = Date.now();
-        const result = scrambleManager.updateText(id, 'header', plainHeader, now, isComplete, true);
-        return reconstructHeader(result.content, headerSegments);
-    }, true));
-    // aim: line — glitch on text change
-    if (r.aim && r.type !== "trace") {
-        const aimTree = "├─";
-        const aimLabel = ` aim ▸ `;
-        const aimPrefix = `${aimTree}${aimLabel}`;
-        const budget = getTruncationBudget(visibleLength(aimPrefix));
-        const displayAim = isFlowAwaiting(r) ? "[awaiting...]" : truncateChars(lowerFirstWord(r.aim), budget);
-        container.addChild(new DynamicScrambleText(`${applyRole("treeChars", aimTree, theme, config)}${applyRole("prefixLabel", aimLabel, theme, config)}${applyRole(getContentRole("aimContent", displayAim), displayAim, theme, config)}`, () => {
-            const now = Date.now();
-            const freshAimLabel = ` aim ▸ `;
-            const freshAimPrefix = `${aimTree}${freshAimLabel}`;
-            const freshBudget = getTruncationBudget(visibleLength(freshAimPrefix));
-            const freshText = isFlowAwaiting(r) ? "[awaiting...]" : truncateChars(lowerFirstWord(r.aim), freshBudget);
-            const result = scrambleManager.updateAim(id, freshText, now, isComplete, true);
-            return `${applyRole("treeChars", aimTree, theme, config)}${applyRole("prefixLabel", freshAimLabel, theme, config)}${applyRole(getContentRole("aimContent", freshText), result.content, theme, config)}`;
-        }, true));
-    }
-    // act: line (last tool call with count)
-    const lastTool = getLastToolCall(r.messages);
-    const actStr = lastTool ? formatFlowToolCall(lastTool.name, lastTool.args, theme.fg.bind(theme)) : "[n/a]";
-    const isLite = config?.bodyVerbosity !== "full";
-    const actTree = isLite ? "└─" : "├─";
-    const actLabel = ` cmd ▸ `;
-    const prefixStub = `${actTree}${actLabel}`;
-    const budget = getTruncationBudget(visibleLength(prefixStub));
-    const actFullText = stripAnsi(lowerFirstWord(actStr));
-    const initialActContent = isFlowAwaiting(r) ? "[n/a]" : (actFullText.length > budget ? tailText(actFullText, budget) : actFullText);
-    container.addChild(new DynamicScrambleText(`${applyRole("treeChars", actTree, theme, config)}${applyRole("prefixLabel", actLabel, theme, config)}${applyRole(getContentRole("actContent", initialActContent), initialActContent, theme, config)}`, () => {
-        const now = Date.now();
-        const actLabel = ` cmd ▸ `;
-        const actPrefix = `${actTree}${actLabel}`;
-        const freshBudget = getTruncationBudget(visibleLength(actPrefix));
-        const displayAct = isFlowAwaiting(r) ? "[n/a]" : tailText(actFullText, freshBudget);
-        const actContent = scrambleManager.updateAct(id, displayAct, now, isComplete, true).content;
-        return `${applyRole("treeChars", actTree, theme, config)}${applyRole("prefixLabel", actLabel, theme, config)}${applyRole(getContentRole("actContent", displayAct), actContent, theme, config)}`;
-    }, true));
-    // msg: line (last assistant text or streaming) — full mode only
-    if (!isLite) {
-        const msgPrefixStub = `└─ msg ▸ `;
-        const msgBudget = getTruncationBudget(visibleLength(msgPrefixStub));
-        let rawMsg;
-        let useError = false;
-        if (isFlowAwaiting(r)) {
-            rawMsg = "[awaiting...]";
-        }
-        else if (r.status === "skipped") {
-            rawMsg = "[skipped]";
-        }
-        else {
-            const liveMsgText = isFlowRunning(r) ? getLiveTextWithFallback(id) : undefined;
-            if (liveMsgText != null) {
-                rawMsg = stripAnsi(liveMsgText);
-            }
-            else if (isFlowRunning(r) && streamingText != null) {
-                rawMsg = stripAnsi(streamingText);
-            }
-            else if (r.structuredOutput?.summary) {
-                rawMsg = stripAnsi(r.structuredOutput.summary);
-            }
-            else if (flowOutput) {
-                rawMsg = stripAnsi(flowOutput);
-            }
-            else if (error && r.errorMessage) {
-                rawMsg = stripAnsi(r.errorMessage);
-                useError = true;
-            }
-            else {
-                const summary = getFlowSummaryText(r);
-                rawMsg = stripAnsi(summary) || "[n/a]";
-            }
-        }
-        const initialNeedsTail = !isFlowAwaiting(r) && isFlowRunning(r) && (streamingText != null || getLiveTextWithFallback(id) != null);
-        const initialMsgContent = initialNeedsTail
-            ? tailText(rawMsg, msgBudget)
-            : truncateChars(rawMsg, msgBudget);
-        const msgTree = "└─";
-        const msgLabel = ` msg ▸ `;
-        const initialMsgPrefix = `${msgTree}${msgLabel}`;
-        container.addChild(new DynamicScrambleText(`${applyRole("treeChars", msgTree, theme, config)}${applyRole("prefixLabel", msgLabel, theme, config)}${applyRole(getContentRole("msgContent", initialMsgContent, useError), initialMsgContent, theme, config)}`, () => {
-            const now = Date.now();
-            const msgLabel = ` msg ▸ `;
-            const msgPrefix = `${msgTree}${msgLabel}`;
-            let freshRawMsg;
-            let needsTail;
-            if (isFlowAwaiting(r)) {
-                freshRawMsg = "[awaiting...]";
-                needsTail = false;
-            }
-            else if (r.status === "skipped") {
-                freshRawMsg = "[skipped]";
-                needsTail = false;
-            }
-            else {
-                const isRunningNow = isFlowRunning(r);
-                freshRawMsg = (isRunningNow ? getLiveTextWithFallback(id) : undefined) ?? rawMsg;
-                needsTail = isRunningNow && (streamingText != null || getLiveTextWithFallback(id) != null);
-            }
-            const displayMsg = needsTail ? tailText(freshRawMsg, msgBudget) : truncateChars(freshRawMsg, msgBudget);
-            const result = scrambleManager.updateMsg(id, displayMsg, now, isComplete, undefined, true);
-            return `${applyRole("treeChars", msgTree, theme, config)}${applyRole("prefixLabel", msgLabel, theme, config)}${applyRole(getContentRole("msgContent", freshRawMsg, useError), result.content, theme, config)}`;
-        }, true));
-    }
-    if (isComplete) {
-        scrambleManager.completeFlow(id);
-    }
-    return container;
-}
 // ---------------------------------------------------------------------------
 // Multi-flow result
 // ---------------------------------------------------------------------------
@@ -850,119 +180,12 @@ function renderMultiFlowResult(details, expanded, theme, toolCallId, config, sha
     }
     return renderMultiFlowCollapsed(results, theme, baseId, config, sharedContext);
 }
-function renderMultiFlowExpanded(results, successCount, icon, theme, baseId, now, config, sharedContext) {
-    const mdTheme = getMarkdownTheme();
-    const container = new Container();
-    if (sharedContext) {
-        container.addChild(new Text(applyRole("prefixLabel", "── shared context ──", theme, config), 0, 0));
-        container.addChild(new Text(applyRole("aimContent", sharedContext.preview, theme, config), 0, 0));
-        const statsParts = [];
-        statsParts.push(`${sharedContext.userMessageCount} user`);
-        statsParts.push(`${sharedContext.assistantMessageCount} assistant`);
-        statsParts.push(`${sharedContext.totalTokens} tokens`);
-        for (const [name, count] of Object.entries(sharedContext.toolCalls)) {
-            statsParts.push(`${count}× ${name}`);
-        }
-        container.addChild(new Text(applyRole("stats", statsParts.join(" · "), theme, config), 0, 0));
-        container.addChild(new Spacer(1));
-    }
-    // Summary: just show count, no icon
-    container.addChild(new Text(applyRole("flowName", `${results.length} flows`, theme, config), 0, 0));
-    for (let flowIdx = 0; flowIdx < results.length; flowIdx++) {
-        const r = results[flowIdx];
-        const flowId = `${baseId}#${flowIdx}`;
-        const isComplete = isFlowStatusComplete(r);
-        const displayItems = getFlowDisplayItems(r.messages);
-        const flowOutput = getFlowOutput(r.messages);
-        const typeName = formatFlowTypeName(r.type);
-        container.addChild(new Spacer(1));
-        // Per-flow header: ─── EXPLORER (no icon)
-        const headerStatic = applyRole("prefixLabel", sectionHeader(typeName), theme, config);
-        container.addChild(new DynamicScrambleText(headerStatic, () => {
-            const result = scrambleManager.updateText(flowId, 'header', typeName, Date.now(), isComplete, true);
-            return result.isAnimating ? applyRole("prefixLabel", result.content, theme, config) : headerStatic;
-        }));
-        // Stats: dashboard format
-        const flowStats = formatCompactStats(r.usage, r.model);
-        container.addChild(new DynamicScrambleText(applyRole("stats", flowStats, theme, config), () => {
-            const result = scrambleManager.updateText(flowId, 'stats', stripAnsi(flowStats), Date.now(), isComplete, true);
-            return result.isAnimating ? applyRole("stats", result.content, theme, config) : applyRole("stats", flowStats, theme, config);
-        }));
-        // Intent: just show text, no prefix (budget computed dynamically for resize recalculation)
-        const intentBudget = getTruncationBudget(0);
-        const displayIntent = truncateChars(r.intent, intentBudget);
-        container.addChild(new DynamicScrambleText(applyRole("aimContent", displayIntent, theme, config), () => {
-            const budget = getTruncationBudget(0);
-            const text = truncateChars(r.intent, budget);
-            const result = scrambleManager.updateText(flowId, 'intent', text, Date.now(), isComplete, true);
-            return result.isAnimating ? applyRole("aimContent", result.content, theme, config) : applyRole("aimContent", text, theme, config);
-        }));
-        if (r.acceptance) {
-            const acceptanceRaw = r.acceptance;
-            const acceptancePrefix = "Acceptance: ";
-            const acceptanceBudget = getTruncationBudget(visibleLength(acceptancePrefix));
-            const acceptanceText = truncateChars(acceptanceRaw, acceptanceBudget);
-            const acceptanceStatic = applyRole("aimContent", `${acceptancePrefix}${acceptanceText}`, theme, config);
-            container.addChild(new DynamicScrambleText(acceptanceStatic, () => {
-                const budget = getTruncationBudget(visibleLength(acceptancePrefix));
-                const text = truncateChars(acceptanceRaw, budget);
-                const result = scrambleManager.updateText(flowId, 'acceptance', text, Date.now(), isComplete, true);
-                return result.isAnimating ? applyRole("aimContent", `${acceptancePrefix}${result.content}`, theme, config) : applyRole("aimContent", `${acceptancePrefix}${text}`, theme, config);
-            }));
-        }
-        // Output: animate streaming text; show clean markdown when complete
-        if (isFlowAwaiting(r)) {
-            container.addChild(new Text(applyRole("placeholder", "[awaiting...]", theme, config), 0, 0));
-        }
-        else if (!isComplete && r.streamingText != null) {
-            const streamingRaw = r.streamingText;
-            const msgBudget = getTruncationBudget(0);
-            const displayMsg = tailText(stripAnsi(streamingRaw), msgBudget);
-            container.addChild(new DynamicScrambleText(applyRole("msgContent", displayMsg, theme, config), () => {
-                const budget = getTruncationBudget(0);
-                const freshStreamingText = getLiveTextWithFallback(flowId) ?? streamingRaw;
-                const text = tailText(stripAnsi(freshStreamingText), budget);
-                const result = scrambleManager.updateMsg(flowId, text, Date.now(), isComplete, undefined, true);
-                return result.isAnimating ? applyRole("msgContent", result.content, theme, config) : applyRole("msgContent", text, theme, config);
-            }));
-        }
-        else if (flowOutput) {
-            container.addChild(new Spacer(1));
-            container.addChild(new Markdown(flowOutput.trim(), 0, 0, mdTheme));
-        }
-        // Tool traces in expanded view — per-line scramble
-        const toolCallItems = displayItems.filter((item) => item.type === "toolCall");
-        if (toolCallItems.length > 0) {
-            container.addChild(new Spacer(1));
-            container.addChild(new Text(applyRole("prefixLabel", sectionHeader("tool calls"), theme, config), 0, 0));
-            const toolPrefixLen = visibleLength("→ ");
-            const toolBudget = getTruncationBudget(toolPrefixLen);
-            for (let i = 0; i < toolCallItems.length; i++) {
-                const item = toolCallItems[i];
-                const lineText = applyRole("prefixLabel", "→ ", theme, config) + formatFlowToolCall(item.name, item.args, theme.fg.bind(theme));
-                const plainText = stripAnsi(lineText);
-                const displayTool = truncateChars(plainText, toolBudget);
-                const initialScrambled = scrambleManager.updateText(flowId, `tool#${i}`, displayTool, now, isComplete).content;
-                container.addChild(new DynamicScrambleText(initialScrambled, () => {
-                    const budget = getTruncationBudget(toolPrefixLen);
-                    const freshPlain = stripAnsi(lineText);
-                    const text = truncateChars(freshPlain, budget);
-                    return scrambleManager.updateText(flowId, `tool#${i}`, text, Date.now(), isComplete).content;
-                }));
-            }
-        }
-        if (isComplete) {
-            scrambleManager.completeFlow(flowId);
-        }
-    }
-    // Total stats: dashboard format
-    const totalUsage = aggregateFlowUsage(results);
-    const totalModel = results[0]?.model;
-    const totalStats = formatCompactStats(totalUsage, totalModel);
-    container.addChild(new Spacer(1));
-    container.addChild(new Text(applyRole("stats", totalStats, theme, config), 0, 0));
-    return container;
+function renderMultiFlowCollapsed(results, theme, baseId, config, sharedContext) {
+    return renderActivityPanel(results, theme, baseId, config, sharedContext);
 }
+// ---------------------------------------------------------------------------
+// Activity panel
+// ---------------------------------------------------------------------------
 function renderActivityPanel(results, theme, baseId, config, sharedContext) {
     const idPrefix = baseId || "panel";
     const container = new Container();
@@ -1020,9 +243,65 @@ function renderStandaloneFlow(container, r, index, idPrefix, theme, now, config,
 // ---------------------------------------------------------------------------
 function renderGroup(container, group, results, idPrefix, theme, now, config, isLastRoot = false, sharedContext) {
     // ─── Group header line ───
-    const headerPrefix = isLastRoot ? "" : "├─";
-    const headerText = `${headerPrefix}${headerPrefix ? ' ' : ''}audit-loop`;
-    container.addChild(new Text(applyRole("treeChars", headerText, theme, config), 0, 0));
+    // Collect all children for aggregate status computation
+    const childIndices = [...group.buildIndices, group.auditIndex];
+    const children = childIndices.map((idx) => results[idx]);
+    // Compute aggregate status icon
+    const anyRunning = children.some((r) => isFlowRunning(r));
+    const anyAwaiting = children.some((r) => isFlowAwaiting(r));
+    const anyError = children.some((r) => isFlowError(r));
+    const allComplete = children.every((r) => isFlowStatusComplete(r));
+    const buildChildren = group.buildIndices.map((idx) => results[idx]);
+    const anyPass = buildChildren.some((r) => r.pingPongMeta?.finalVerdict === "pass");
+    let aggregateIcon;
+    if (anyRunning) {
+        aggregateIcon = theme.fg("warning", "↻");
+    }
+    else if (anyAwaiting) {
+        aggregateIcon = theme.fg("muted", "○");
+    }
+    else if (allComplete && anyPass) {
+        aggregateIcon = theme.fg("success", "✓");
+    }
+    else if (anyError) {
+        aggregateIcon = theme.fg("error", "✗");
+    }
+    else if (allComplete) {
+        aggregateIcon = theme.fg("muted", "⊘");
+    }
+    else {
+        aggregateIcon = theme.fg("muted", "?");
+    }
+    // Compute cycle counter badge from build metadata
+    const maxCycles = Math.max(...buildChildren.map((r) => r.pingPongMeta?.cycles ?? 0));
+    const hasPingPong = buildChildren.some((r) => r.pingPongMeta !== undefined);
+    let badgeText = "";
+    if (hasPingPong && maxCycles > 0) {
+        const anyIncomplete = children.some((r) => !isFlowStatusComplete(r));
+        if (anyIncomplete) {
+            badgeText = `cycle ${maxCycles}`;
+        }
+        else {
+            const finalVerdict = buildChildren.find((r) => r.pingPongMeta?.finalVerdict)?.pingPongMeta?.finalVerdict ?? "";
+            const cyclesLabel = maxCycles === 1 ? "1 cycle" : `${maxCycles} cycles`;
+            badgeText = finalVerdict ? `${cyclesLabel} · ${finalVerdict}` : cyclesLabel;
+        }
+    }
+    // Build header parts
+    const treePart = isLastRoot ? "" : "├─ ";
+    const label = " audit-loop";
+    const badge = badgeText ? ` · ${badgeText}` : "";
+    // Compute trailing rule to pad to ~50 visible chars
+    const targetWidth = 50;
+    const visibleWidth = treePart.length + 1 + label.length + badge.length;
+    const ruleWidth = Math.max(0, targetWidth - visibleWidth);
+    const rule = "─".repeat(ruleWidth);
+    const headerLine = applyRole("treeChars", treePart, theme, config) +
+        aggregateIcon +
+        applyRole("groupHeader", label, theme, config) +
+        applyRole("groupHeader", badge, theme, config) +
+        applyRole("treeChars", rule, theme, config);
+    container.addChild(new Text(headerLine, 0, 0));
     // ─── Build children ───
     for (let b = 0; b < group.buildIndices.length; b++) {
         const buildIdx = group.buildIndices[b];
@@ -1052,185 +331,4 @@ function renderGroup(container, group, results, idPrefix, theme, now, config, is
     }
     // No extra spacer — renderActivityPanel handles uniform inter-item spacing
 }
-// ---------------------------------------------------------------------------
-// Shared flow rendering helpers
-// ---------------------------------------------------------------------------
-function renderFlowHeader(container, r, flowId, headerPrefix, theme, now, config, sharedContext) {
-    const typeName = formatCollapsedFlowHeaderTypeName(r.type);
-    const modelLabel = formatModelLabel(r.model);
-    const isComplete = isFlowStatusComplete(r);
-    const flowComplete = isComplete;
-    const error = isFlowError(r);
-    const errorSegment = error && r.stopReason ? ` [${r.stopReason}]` : "";
-    const initialDot = flowStatusIcon(r, theme);
-    const dotPlaceholder = stripAnsi(initialDot) + ' ';
-    let headerLine;
-    let plainHeader;
-    const headerSegments = [
-        { text: headerPrefix + " ", style: (s) => applyRole("treeChars", s, theme, config) },
-        { text: dotPlaceholder, style: (_s) => getScintillatingStatusDot(r, theme, Date.now(), flowId) + " " },
-        { text: typeName, style: (s) => applyRole("flowName", s, theme, config) },
-    ];
-    {
-        // Standard flow: model + stats
-        const statsParts = [];
-        if (r.maxContextTokens !== undefined || r.usage.contextTokens > 0) {
-            const ctxTokens = sharedContext?.totalTokens ?? r.usage.contextTokens;
-            const ctxLabel = formatContextLabel(ctxTokens, r.maxContextTokens);
-            statsParts.push(ctxLabel);
-        }
-        let displayStats = statsParts.join(" · ");
-        if (r.usage.smoothedTps && r.usage.smoothedTps > 0) {
-            const tpsFormatted = formatTps(r.usage.smoothedTps);
-            statsParts.push(tpsFormatted);
-            displayStats = statsParts.join(" · ");
-            const tpsNum = tpsFormatted.slice(0, -4); // remove " t/s" suffix
-            const scrambledTps = scrambleManager.updateTps(flowId, tpsNum, now, flowComplete, true);
-            if (scrambledTps !== tpsNum) {
-                displayStats = displayStats.replace(`${tpsNum} t/s`, `${scrambledTps} t/s`);
-            }
-        }
-        const modelSegment = modelLabel ? `  ${modelLabel}` : "";
-        const statsSegment = ` · ${displayStats}`;
-        const statsPlain = stripAnsi(statsSegment);
-        headerLine = `${applyRole("treeChars", headerPrefix, theme, config)} ${initialDot} ${applyRole("flowName", typeName, theme, config)}${applyRole("modelName", modelSegment, theme, config)}${applyRole("stats", statsSegment, theme, config)}`;
-        if (errorSegment) {
-            headerLine += ` ${theme.fg("error", errorSegment)}`;
-        }
-        plainHeader = headerPrefix + " " + dotPlaceholder + typeName + modelSegment + statsPlain + errorSegment;
-        headerSegments.push({ text: modelSegment, style: (s) => applyRole("modelName", s, theme, config) }, { text: statsPlain, style: (s) => applyRole("stats", s, theme, config) });
-    }
-    if (errorSegment) {
-        headerSegments.push({ text: errorSegment, style: (s) => theme.fg("error", s) });
-    }
-    container.addChild(new DynamicScrambleText(headerLine, () => {
-        const now = Date.now();
-        const result = scrambleManager.updateText(flowId, 'header', plainHeader, now, flowComplete, true);
-        return reconstructHeader(result.content, headerSegments);
-    }, true));
-}
-function renderFlowBody(container, r, flowId, indent, theme, now, config) {
-    const isComplete = isFlowStatusComplete(r);
-    const flowComplete = isComplete;
-    // aim: line — glitch on text change
-    if (r.aim && r.type !== "trace") {
-        const aimTree = indent + "├─";
-        const aimLabel = ` aim ▸ `;
-        const aimPrefix = `${aimTree}${aimLabel}`;
-        const budget = getTruncationBudget(visibleLength(aimPrefix));
-        const displayAim = isFlowAwaiting(r) ? "[awaiting...]" : truncateChars(lowerFirstWord(r.aim), budget);
-        container.addChild(new DynamicScrambleText(`${applyRole("treeChars", aimTree, theme, config)}${applyRole("prefixLabel", aimLabel, theme, config)}${applyRole(getContentRole("aimContent", displayAim), displayAim, theme, config)}`, () => {
-            const now = Date.now();
-            const freshAimLabel = ` aim ▸ `;
-            const freshAimPrefix = `${aimTree}${freshAimLabel}`;
-            const freshBudget = getTruncationBudget(visibleLength(freshAimPrefix));
-            const freshText = isFlowAwaiting(r) ? "[awaiting...]" : truncateChars(lowerFirstWord(r.aim), freshBudget);
-            const result = scrambleManager.updateAim(flowId, freshText, now, flowComplete, true);
-            return `${applyRole("treeChars", aimTree, theme, config)}${applyRole("prefixLabel", freshAimLabel, theme, config)}${applyRole(getContentRole("aimContent", freshText), result.content, theme, config)}`;
-        }, true));
-    }
-    // act: line (last tool call with count)
-    const lastTool = getLastToolCall(r.messages);
-    const actStr = lastTool ? formatFlowToolCall(lastTool.name, lastTool.args, theme.fg.bind(theme)) : "[n/a]";
-    const isLite = config?.bodyVerbosity !== "full";
-    const actTree = isLite ? `${indent}└─` : `${indent}├─`;
-    const actLabel = ` cmd ▸ `;
-    const prefixStub = `${actTree}${actLabel}`;
-    const budget = getTruncationBudget(visibleLength(prefixStub));
-    const actFullText = stripAnsi(lowerFirstWord(actStr));
-    const initialActContent = isFlowAwaiting(r) ? "[n/a]" : (actFullText.length > budget ? tailText(actFullText, budget) : actFullText);
-    container.addChild(new DynamicScrambleText(`${applyRole("treeChars", actTree, theme, config)}${applyRole("prefixLabel", actLabel, theme, config)}${applyRole(getContentRole("actContent", initialActContent), initialActContent, theme, config)}`, () => {
-        const now = Date.now();
-        const actLabel = ` cmd ▸ `;
-        const actPrefix = `${actTree}${actLabel}`;
-        const freshBudget = getTruncationBudget(visibleLength(actPrefix));
-        const displayAct = isFlowAwaiting(r) ? "[n/a]" : tailText(actFullText, freshBudget);
-        const actContent = scrambleManager.updateAct(flowId, displayAct, now, flowComplete, true).content;
-        return `${applyRole("treeChars", actTree, theme, config)}${applyRole("prefixLabel", actLabel, theme, config)}${applyRole(getContentRole("actContent", displayAct), actContent, theme, config)}`;
-    }, true));
-    // msg: line (live streaming text or last assistant text) — full mode only
-    if (!isLite) {
-        const msgTree = `${indent}└─`;
-        const msgLabel = ` msg ▸ `;
-        const msgPrefixStub = `${msgTree}${msgLabel}`;
-        const msgBudget = getTruncationBudget(visibleLength(msgPrefixStub));
-        let rawMsg;
-        let useError = false;
-        if (isFlowAwaiting(r)) {
-            rawMsg = "[awaiting...]";
-        }
-        else if (r.status === "skipped") {
-            rawMsg = "[skipped]";
-        }
-        else if (isFlowStatusComplete(r) && !isFlowRunning(r)) {
-            if (isFlowError(r) && r.errorMessage) {
-                rawMsg = stripAnsi(r.errorMessage);
-                useError = true;
-            }
-            else if ((r.pingPongMeta?.finalVerdict === "pass" || r.structuredOutput?.verdict === "pass") && r.type === "audit") {
-                rawMsg = "[approved]";
-            }
-            else if (r.type === "audit" && !r.structuredOutput?.summary && !getFlowOutput(r.messages)) {
-                rawMsg = "[finished]";
-            }
-            else {
-                rawMsg = stripAnsi(r.structuredOutput?.summary ?? getFlowOutput(r.messages) ?? getFlowSummaryText(r)) || "[n/a]";
-            }
-        }
-        else {
-            const liveMsgText = isFlowRunning(r) ? getLiveTextWithFallback(flowId) : undefined;
-            if (liveMsgText != null) {
-                rawMsg = stripAnsi(liveMsgText);
-            }
-            else if (isFlowRunning(r) && r.streamingText != null) {
-                rawMsg = stripAnsi(r.streamingText);
-            }
-            else if (r.structuredOutput?.summary) {
-                rawMsg = stripAnsi(r.structuredOutput.summary);
-            }
-            else {
-                const flowOutput = getFlowOutput(r.messages);
-                if (flowOutput) {
-                    rawMsg = stripAnsi(flowOutput);
-                }
-                else if (isFlowError(r) && r.errorMessage) {
-                    rawMsg = stripAnsi(r.errorMessage);
-                    useError = true;
-                }
-                else {
-                    const summary = getFlowSummaryText(r);
-                    rawMsg = stripAnsi(summary) || "[n/a]";
-                }
-            }
-        }
-        const initialNeedsTail = !isFlowAwaiting(r) && isFlowRunning(r) && (r.streamingText != null || getLiveTextWithFallback(flowId) != null);
-        const initialDisplayMsg = initialNeedsTail ? tailText(rawMsg, msgBudget) : truncateChars(rawMsg, msgBudget);
-        container.addChild(new DynamicScrambleText(`${applyRole("treeChars", msgTree, theme, config)}${applyRole("prefixLabel", msgLabel, theme, config)}${applyRole(getContentRole("msgContent", initialDisplayMsg, useError), initialDisplayMsg, theme, config)}`, () => {
-            const now = Date.now();
-            const msgLabel = ` msg ▸ `;
-            const msgPrefix = `${msgTree}${msgLabel}`;
-            let freshRawMsg;
-            let needsTail;
-            if (isFlowAwaiting(r)) {
-                freshRawMsg = "[awaiting...]";
-                needsTail = false;
-            }
-            else if (r.status === "skipped") {
-                freshRawMsg = "[skipped]";
-                needsTail = false;
-            }
-            else {
-                const isRunningNow = isFlowRunning(r);
-                freshRawMsg = (isRunningNow ? getLiveTextWithFallback(flowId) : undefined) ?? rawMsg;
-                needsTail = isRunningNow && (r.streamingText != null || getLiveTextWithFallback(flowId) != null);
-            }
-            const displayMsg = needsTail ? tailText(freshRawMsg, msgBudget) : truncateChars(freshRawMsg, msgBudget);
-            const result = scrambleManager.updateMsg(flowId, displayMsg, now, flowComplete, undefined, true);
-            return `${applyRole("treeChars", msgTree, theme, config)}${applyRole("prefixLabel", msgLabel, theme, config)}${applyRole(getContentRole("msgContent", freshRawMsg, useError), result.content, theme, config)}`;
-        }, true));
-    }
-}
-function renderMultiFlowCollapsed(results, theme, baseId, config, sharedContext) {
-    return renderActivityPanel(results, theme, baseId, config, sharedContext);
-}
 //# sourceMappingURL=render.js.map