muonroi-cli 1.8.4 → 1.9.0

package/dist/src/ui/components/council-phase-timeline.d.ts

@@ -3,8 +3,16 @@ import type { Theme } from "../theme.js";
 export interface CouncilPhaseTimelineProps {
     phases: CouncilPhaseEvent[];
     theme: Theme;
+    /**
+     * When false (default), completed phases fold into a single "N steps done"
+     * summary line and only the live (active/error) phase is shown — the
+     * aggressive-collapse UX. When true (Ctrl+O), the full done-trail is shown.
+     * Shares the council transcript's expand state so one toggle controls all
+     * council detail.
+     */
+    expanded?: boolean;
 }
-export declare function CouncilPhaseTimeline({ phases, theme: t }: CouncilPhaseTimelineProps): import("react").ReactNode;
+export declare function CouncilPhaseTimeline({ phases, theme: t, expanded }: CouncilPhaseTimelineProps): import("react").ReactNode;
 /**
  * Reducer-friendly upsert: returns the next phase array given an incoming event.
  * Matches by phaseId; preserves insertion order for new phases. The first event

package/dist/src/ui/components/council-phase-timeline.js

@@ -1,10 +1,14 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { useEffect, useState } from "react";
+import { heartbeatDebug } from "../heartbeat-debug.js";
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 function Spinner() {
     const [frame, setFrame] = useState(0);
     useEffect(() => {
-        const id = setInterval(() => setFrame((n) => (n + 1) % SPINNER_FRAMES.length), 100);
+        const id = setInterval(() => {
+            heartbeatDebug("phase-timeline-spinner", "timer");
+            setFrame((n) => (n + 1) % SPINNER_FRAMES.length);
+        }, 100);
         return () => clearInterval(id);
     }, []);
     return _jsx(_Fragment, { children: SPINNER_FRAMES[frame] });
@@ -31,28 +35,73 @@ function formatElapsed(ms) {
 function useHeartbeat(tickMs = 1000) {
     const [, force] = useState(0);
     useEffect(() => {
-        const id = setInterval(() => force((n) => n + 1), tickMs);
+        const id = setInterval(() => {
+            heartbeatDebug("phase-timeline-heartbeat", "timer");
+            force((n) => n + 1);
+        }, tickMs);
         return () => clearInterval(id);
     }, [tickMs]);
     return Date.now();
 }
-export function CouncilPhaseTimeline({ phases, theme: t }) {
+export function CouncilPhaseTimeline({ phases, theme: t, expanded = false }) {
     const now = useHeartbeat(1000);
-    if (phases.length === 0)
+    // Collapse per-round brackets: the "Clarification round N" / "Round N" phases
+    // duplicate the live status line ("Generating clarification questions (round
+    // N)"), stacking 3-4 near-identical spinner rows at council start. Keep only
+    // the coarse lifecycle phases here; round detail already rides on the status
+    // line label. Errors are always shown so a failed round stays visible.
+    const visible = phases.filter((p) => !((p.kind === "clarification_round" || p.kind === "round") && p.state !== "error"));
+    if (visible.length === 0)
         return null;
-    return (_jsx("box", { flexDirection: "column", paddingLeft: 2, paddingTop: 0, flexShrink: 0, children: phases.map((p) => {
-            const isError = p.state === "error";
-            const isDone = p.state === "done";
-            const marker = isError ? "✗" : isDone ? "✓" : _jsx(Spinner, {});
-            const markerColor = isError ? t.diffRemovedFg : isDone ? t.planOptionCheck : t.accent;
-            const labelColor = isError ? t.diffRemovedFg : isDone ? t.textMuted : t.text;
-            // For active phases with a startedAt, derive elapsed from wall-clock
-            // so the displayed time keeps counting up between emitter updates.
-            const liveElapsedMs = p.state === "active" && typeof p.startedAt === "number" ? Math.max(0, now - p.startedAt) : p.elapsedMs;
-            const elapsed = formatElapsed(liveElapsedMs);
-            const meta = elapsed ? ` (${elapsed})` : isDone ? "" : " …";
-            return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: markerColor, children: marker }), _jsx("text", { fg: labelColor, children: ` ${p.label}` }), meta && _jsx("text", { fg: t.textDim, children: meta })] }), p.detail && (_jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.textMuted, children: `└ ${truncate(p.detail, 100)}` }) })), p.errorMessage && (_jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.diffRemovedFg, children: `└ ${truncate(p.errorMessage, 100)}` }) }))] }, p.phaseId));
-        }) }));
+    // Aggressive collapse (default): show only the live (active/error) phases as
+    // full rows; fold every completed phase into one "N steps done" summary line.
+    // Ctrl+O (expanded=true) restores the full done-trail. Errors are never
+    // folded — a failed phase always stays visible.
+    const live = visible.filter((p) => p.state === "active" || p.state === "error");
+    const doneCount = visible.length - live.length;
+    const rows = expanded ? visible : live;
+    // Split off error phases so identical provider failures can be folded into one
+    // row instead of N repeated blocks. A flaky proxy (Console Go glm/kimi) makes
+    // clarify + spec-infer + eval all fail with the SAME message — rendered raw
+    // that spammed the (narrow) context rail. Non-error rows keep their order.
+    const nonErrorRows = rows.filter((p) => p.state !== "error");
+    const errorRows = rows.filter((p) => p.state === "error");
+    const errorGroups = [];
+    for (const p of errorRows) {
+        const message = p.errorMessage ?? "(failed)";
+        const existing = errorGroups.find((g) => g.message === message);
+        if (existing)
+            existing.phases.push(p);
+        else
+            errorGroups.push({ message, phases: [p] });
+    }
+    const renderRow = (p) => {
+        const isDone = p.state === "done";
+        const marker = isDone ? "✓" : _jsx(Spinner, {});
+        const markerColor = isDone ? t.planOptionCheck : t.accent;
+        const labelColor = isDone ? t.textMuted : t.text;
+        const liveElapsedMs = p.state === "active" && typeof p.startedAt === "number" ? Math.max(0, now - p.startedAt) : p.elapsedMs;
+        if (p.state === "active") {
+            heartbeatDebug("phase-timeline", "render", {
+                label: p.label,
+                liveElapsedMs,
+                startedAt: p.startedAt,
+                now,
+            });
+        }
+        const elapsed = formatElapsed(liveElapsedMs);
+        const meta = elapsed ? ` (${elapsed})` : isDone ? "" : " …";
+        return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: markerColor, children: marker }), _jsx("text", { fg: labelColor, children: ` ${p.label}` }), meta && _jsx("text", { fg: t.textDim, children: meta })] }), p.detail && (_jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.textMuted, children: `└ ${truncate(p.detail, 100)}` }) }))] }, p.phaseId));
+    };
+    return (_jsxs("box", { flexDirection: "column", paddingLeft: 2, paddingTop: 0, flexShrink: 0, children: [!expanded && doneCount > 0 && (_jsxs("box", { children: [_jsx("text", { fg: t.planOptionCheck, children: "\u2713" }), _jsx("text", { fg: t.textDim, children: ` ${doneCount} step${doneCount === 1 ? "" : "s"} done` }), _jsx("text", { fg: t.textMuted, children: "  ·  Ctrl+O to expand" })] })), nonErrorRows.map(renderRow), errorGroups.map((g) => {
+                // One header per unique error; when >1 phase shares it, name the count
+                // and list the affected steps compactly instead of repeating the message.
+                const first = g.phases[0];
+                const label = g.phases.length === 1
+                    ? first.label
+                    : `${g.phases.length} steps failed: ${g.phases.map((p) => p.label).join(", ")}`;
+                return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: t.diffRemovedFg, children: "\u2717" }), _jsx("text", { fg: t.diffRemovedFg, children: ` ${truncate(label, 100)}` })] }), _jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.diffRemovedFg, children: `└ ${truncate(g.message, 100)}` }) })] }, `err-${first.phaseId}`));
+            })] }));
 }
 function truncate(s, max) {
     if (s.length <= max)

package/dist/src/ui/components/council-placeholder-bubble.d.ts

@@ -2,20 +2,27 @@ import type { Theme } from "../theme.js";
 export type PlaceholderVariant = "participant" | "leader";
 export interface CouncilPlaceholderBubbleProps {
     role: string;
+    /** Legacy pair-side hint — ignored in the linear group-chat layout. */
     side: "left" | "right";
     terminalCols: number;
     color: string;
     theme: Theme;
     variant?: PlaceholderVariant;
+    /**
+     * Optional per-speaker context shown as muted sub-lines while composing, so the
+     * main console is not a bare spinner during the 20–60s atomic generateText
+     * window. Newline-separated "Name — lens" entries emitted by the engine in the
+     * opening/exchange `council_status.detail`. Empty/undefined → label-only.
+     */
+    detail?: string;
 }
-export declare function buildPlaceholderLabel(role: string): string;
+export declare function buildPlaceholderLabel(role: string, elapsedSec?: number): string;
 /**
- * Thin placeholder bubble shown while the producer is generating a turn.
- * Rendered at turn-start (when council_status{state:"start"} arrives for this speaker).
- * Swapped for the real CouncilMessageBubble when council_message arrives.
- *
- * Two variants:
- *  - "participant" (default): left/right aligned per pair-side map, palette color border
- *  - "leader": centered, leader-gray border, 40% width — matches the real leader bubble
+ * "Typing…" indicator for a speaker whose turn is in flight — a spinner + a
+ * role-colored line (`⠋ Role · composing… · 12s`) in the same linear stream as
+ * the real messages, WhatsApp-style. Swapped for the real CouncilMessageBubble
+ * when the council_message arrives. The spinner + ticking elapsed distinguish
+ * a live provider from a hung one (a static line looked identical at 2s and
+ * 2min — live-verified 2026-07-06).
  */
-export declare function CouncilPlaceholderBubble({ role, side, terminalCols, color, theme, variant, }: CouncilPlaceholderBubbleProps): import("react").ReactNode;
+export declare function CouncilPlaceholderBubble({ role, color, detail, theme: t }: CouncilPlaceholderBubbleProps): import("react").ReactNode;

package/dist/src/ui/components/council-placeholder-bubble.js

@@ -1,37 +1,40 @@
-import { jsx as _jsx } from "@opentui/react/jsx-runtime";
-import { computeBubbleLayout } from "./bubble-layout.js";
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useState } from "react";
 const FALLBACK_ROLE = "Speaker";
-const PLACEHOLDER_MAX_COLS = 40;
-export function buildPlaceholderLabel(role) {
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+export function buildPlaceholderLabel(role, elapsedSec) {
     const trimmed = role.trim();
     const display = trimmed.length > 0 ? trimmed : FALLBACK_ROLE;
-    return `${display} · composing…`;
+    const elapsed = elapsedSec !== undefined && elapsedSec >= 1 ? ` · ${elapsedSec}s` : "";
+    return `${display} · composing…${elapsed}`;
 }
 /**
- * Thin placeholder bubble shown while the producer is generating a turn.
- * Rendered at turn-start (when council_status{state:"start"} arrives for this speaker).
- * Swapped for the real CouncilMessageBubble when council_message arrives.
- *
- * Two variants:
- *  - "participant" (default): left/right aligned per pair-side map, palette color border
- *  - "leader": centered, leader-gray border, 40% width — matches the real leader bubble
+ * "Typing…" indicator for a speaker whose turn is in flight — a spinner + a
+ * role-colored line (`⠋ Role · composing… · 12s`) in the same linear stream as
+ * the real messages, WhatsApp-style. Swapped for the real CouncilMessageBubble
+ * when the council_message arrives. The spinner + ticking elapsed distinguish
+ * a live provider from a hung one (a static line looked identical at 2s and
+ * 2min — live-verified 2026-07-06).
  */
-export function CouncilPlaceholderBubble({ role, side, terminalCols, color, theme, variant = "participant", }) {
-    const layout = computeBubbleLayout(terminalCols);
-    const isLeader = variant === "leader";
-    const width = layout.fallback
-        ? terminalCols
-        : isLeader
-            ? layout.leaderCols
-            : Math.min(layout.bubbleCols, PLACEHOLDER_MAX_COLS);
-    const indent = layout.fallback
-        ? 0
-        : isLeader
-            ? Math.max(0, Math.floor((terminalCols - width) / 2))
-            : side === "right"
-                ? layout.rightIndent
-                : 0;
-    const borderColor = isLeader ? theme.councilLeaderBorder : color;
-    return (_jsx("box", { marginLeft: indent, marginBottom: 1, children: _jsx("box", { width: width, borderStyle: "single", borderColor: borderColor, paddingLeft: 1, paddingRight: 1, children: _jsx("text", { fg: theme.textMuted, children: buildPlaceholderLabel(role) }) }) }));
+export function CouncilPlaceholderBubble({ role, color, detail, theme: t }) {
+    const [startedAt] = useState(() => Date.now());
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        // The 100ms spinner interval doubles as the elapsed re-render tick — no
+        // second timer needed. Braille frames match the timeline/pill spinner
+        // vocabulary rather than adding a third glyph set.
+        const id = setInterval(() => setFrame((n) => n + 1), 100);
+        return () => clearInterval(id);
+    }, []);
+    const elapsedSec = Math.floor((Date.now() - startedAt) / 1000);
+    // Split the engine-emitted roster ("Name — lens" per line) into muted preview
+    // rows. Trimmed + non-empty only so a trailing newline never renders a blank.
+    const detailLines = detail
+        ? detail
+            .split("\n")
+            .map((l) => l.trim())
+            .filter((l) => l.length > 0)
+        : [];
+    return (_jsxs("box", { marginBottom: 1, paddingLeft: 2, flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: t.accent, children: `${SPINNER_FRAMES[frame % SPINNER_FRAMES.length]} ` }), _jsx("text", { fg: color, children: buildPlaceholderLabel(role, elapsedSec) })] }), detailLines.map((line, i) => (_jsx("text", { fg: t.textMuted, children: `    ↳ ${line}` }, i)))] }));
 }
 //# sourceMappingURL=council-placeholder-bubble.js.map

package/dist/src/ui/components/council-question-card.js

@@ -1,14 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { Semantic } from "@muonroi/agent-harness-opentui";
 const PHASE_LABEL = {
-    clarify: "Clarify",
-    preflight: "Pre-flight",
-    "plan-confirm": "Plan",
-    "post-debate": "Post-Debate",
-    "pil-interview": "Understanding",
-    "pil-acceptance": "Confirm Intent",
-    "tool-loop-cap": "Tool-loop guard",
-    "safety-override": "Safety override",
+    clarify: "Quick question",
+    preflight: "Pre-flight check",
+    "plan-confirm": "Plan review",
+    "post-debate": "Debate wrap-up",
+    "pil-interview": "Understanding your idea",
+    "pil-acceptance": "Confirm the goal",
+    "tool-loop-cap": "Tool-loop checkpoint",
+    "safety-override": "Safety check",
+    "ask-user": "The agent is asking",
 };
 /**
  * AskUserQuestion-style card. Controlled component — parent owns the state
@@ -32,8 +33,8 @@ export function CouncilQuestionCard({ question, theme: t, state, freetextInputWi
                     const cursor = selected ? "›" : " ";
                     const numberColor = selected ? t.accent : t.textMuted;
                     const labelColor = selected ? t.accent : t.text;
-                    return (_jsx(Semantic, { id: `askcard-option-${opt.value ?? i}`, role: "button", name: opt.label, selected: selected || undefined, children: _jsxs("box", { flexDirection: "column", children: [_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: numberColor, children: `${cursor} ${i + 1}. ` }), _jsx("text", { fg: labelColor, children: opt.label }), isRecommended && _jsx("text", { fg: t.planOptionCheck, children: "  (Recommended)" })] }), opt.description && (_jsx("box", { paddingLeft: 5, children: _jsx("text", { fg: t.textMuted, children: opt.description }) }))] }) }, i));
-                }), freetext !== null && (_jsxs("box", { flexDirection: "column", paddingTop: 1, children: [_jsx("text", { fg: t.textMuted, children: "Type your answer · Enter to submit · Esc to go back" }), _jsx(Semantic, { id: "askcard-input", role: "textbox", value: freetext, children: _jsx("box", { paddingLeft: 1, paddingRight: 1, width: freetextInputWidth, children: _jsx("text", { fg: t.planInputText, bg: t.planInputBg, children: freetext.length > 0 ? freetext : " " }) }) })] })), _jsx("box", { paddingTop: 1, children: _jsx("text", { fg: t.textDim, children: "Enter to select · ↑/↓ to navigate · Esc to cancel" }) })] }) }));
+                    return (_jsx(Semantic, { id: `askcard-option-${opt.value ?? i}`, role: "button", name: opt.label, selected: selected || undefined, children: _jsxs("box", { flexDirection: "column", children: [_jsxs("box", { flexDirection: "row", children: [_jsx("text", { fg: numberColor, children: `${cursor} ${i + 1}. ` }), _jsx("text", { fg: labelColor, children: opt.label }), isRecommended && _jsx("text", { fg: t.planOptionCheck, children: "  (recommended)" })] }), opt.description && (_jsx("box", { paddingLeft: 5, children: _jsx("text", { fg: t.textMuted, children: opt.description }) }))] }) }, i));
+                }), freetext !== null && (_jsxs("box", { flexDirection: "column", paddingTop: 1, children: [_jsx("text", { fg: t.textMuted, children: "Type your answer · Enter to send · Esc to go back" }), _jsx(Semantic, { id: "askcard-input", role: "textbox", value: freetext, children: _jsx("box", { paddingLeft: 1, paddingRight: 1, width: freetextInputWidth, children: _jsx("text", { fg: t.planInputText, bg: t.planInputBg, children: freetext.length > 0 ? freetext : " " }) }) })] })), _jsx("box", { paddingTop: 1, children: _jsx("text", { fg: t.textDim, children: "↑/↓ to browse · Enter to select · Esc to cancel" }) })] }) }));
 }
 export function clampIndex(i, len) {
     if (len <= 0)
@@ -50,7 +51,7 @@ function legacyFallback(q) {
         .filter((s) => typeof s === "string" && s.trim().length > 0)
         .map((s) => ({ label: s.trim(), value: s.trim(), kind: "choice" }));
     if (choices.length === 0) {
-        choices.push({ label: "Answer", value: "", kind: "freetext", description: "Nhập câu trả lời" });
+        choices.push({ label: "Answer", value: "", kind: "freetext", description: "Type your answer here" });
     }
     return choices;
 }
@@ -116,7 +117,7 @@ export function reduceCardKey(question, state, key) {
                         // Sentinel-ish text: caller may special-case this prefix to pause
                         // the council loop. For now we ship a clear default that records a
                         // meaningful answer so the run keeps moving.
-                        text: "Let me discuss this further before answering.",
+                        text: "I'd like to talk this through a bit more before answering.",
                         kind: "chat",
                     },
                 },

package/dist/src/ui/components/council-rail-rounds.d.ts

@@ -0,0 +1,26 @@
+import type { CouncilRoundRecord } from "../../types/index.js";
+import type { Theme } from "../theme.js";
+/**
+ * Selectable round list in the context rail (P2 / feature D). The rail keeps its
+ * GLOBAL overview; this list lets the user scope the MAIN transcript pane to a
+ * single round's debate turns without hiding the overview — reconciling the
+ * documented "never re-scope the rail" constraint (context-rail.tsx) with the
+ * "click a round → see its debate" request.
+ *
+ * Selection is driven by keyboard (Ctrl+←/→ when the composer is empty) and by
+ * mouse (OpenTUI onMouseDown per row). `null` = global view (all/live rounds).
+ */
+/**
+ * Pure selection-cycle used by the keyboard handler. Stepping before the first
+ * round returns to the global view (null); stepping past the last clamps.
+ */
+export declare function cycleRoundSelection(roundNumbers: number[], current: number | null, dir: 1 | -1): number | null;
+export interface CouncilRailRoundsProps {
+    rounds: CouncilRoundRecord[];
+    /** Selected round number, or null for the global (all-rounds) view. */
+    selected: number | null;
+    onSelect: (round: number | null) => void;
+    width: number;
+    theme: Theme;
+}
+export declare function CouncilRailRounds({ rounds, selected, onSelect, width, theme }: CouncilRailRoundsProps): import("react").ReactNode;

package/dist/src/ui/components/council-rail-rounds.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { Semantic } from "@muonroi/agent-harness-opentui";
+/**
+ * Selectable round list in the context rail (P2 / feature D). The rail keeps its
+ * GLOBAL overview; this list lets the user scope the MAIN transcript pane to a
+ * single round's debate turns without hiding the overview — reconciling the
+ * documented "never re-scope the rail" constraint (context-rail.tsx) with the
+ * "click a round → see its debate" request.
+ *
+ * Selection is driven by keyboard (Ctrl+←/→ when the composer is empty) and by
+ * mouse (OpenTUI onMouseDown per row). `null` = global view (all/live rounds).
+ */
+/**
+ * Pure selection-cycle used by the keyboard handler. Stepping before the first
+ * round returns to the global view (null); stepping past the last clamps.
+ */
+export function cycleRoundSelection(roundNumbers, current, dir) {
+    if (roundNumbers.length === 0)
+        return null;
+    if (current === null)
+        return dir === 1 ? roundNumbers[0] : null;
+    const i = roundNumbers.indexOf(current);
+    if (i === -1)
+        return dir === 1 ? roundNumbers[0] : null;
+    const j = i + dir;
+    if (j < 0)
+        return null; // step before first → global
+    if (j >= roundNumbers.length)
+        return roundNumbers[roundNumbers.length - 1]; // clamp at last
+    return roundNumbers[j];
+}
+function roundLabel(rec, maxWidth) {
+    const base = `Round ${rec.round}`;
+    if (!rec.topic)
+        return base;
+    const budget = Math.max(6, maxWidth - base.length - 3);
+    const topic = rec.topic.length > budget ? `${rec.topic.slice(0, budget - 1)}…` : rec.topic;
+    return `${base}: ${topic}`;
+}
+export function CouncilRailRounds({ rounds, selected, onSelect, width, theme }) {
+    if (rounds.length === 0)
+        return null;
+    const rows = [
+        { key: "all", label: "All rounds", round: null, running: false },
+        ...rounds.map((rec) => ({
+            key: `round-${rec.round}`,
+            label: roundLabel(rec, width),
+            round: rec.round,
+            running: rec.state === "running",
+        })),
+    ];
+    return (_jsx(Semantic, { id: "rail-rounds", role: "listbox", name: "Debate rounds", props: { selected: selected ?? -1, count: rounds.length }, children: _jsxs("box", { flexDirection: "column", flexShrink: 0, marginTop: 1, children: [_jsx("text", { fg: theme.textMuted, attributes: 1, children: "Rounds" }), _jsx("text", { fg: theme.textDim, children: "ctrl+\u2190/\u2192 scope" }), rows.map((row) => {
+                    const isSel = row.round === selected || (row.round === null && selected === null);
+                    return (_jsx(Semantic, { id: row.round === null ? "rail-round-all" : `rail-round-${row.round}`, role: "listitem", name: row.label, selected: isSel || undefined, children: _jsxs("box", { flexDirection: "row", onMouseDown: () => onSelect(row.round), children: [_jsx("text", { fg: isSel ? theme.accent : theme.textMuted, children: isSel ? "› " : "  " }), _jsx("text", { fg: isSel ? theme.accent : theme.text, attributes: isSel ? 1 : 0, children: row.label }), row.running ? _jsx("text", { fg: theme.accent, children: " ·live" }) : null] }) }, row.key));
+                })] }) }));
+}
+//# sourceMappingURL=council-rail-rounds.js.map

package/dist/src/ui/components/council-round-group.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+import type { CouncilRoundRecord } from "../../types/index.js";
+import type { Theme } from "../theme.js";
+export interface CouncilRoundGroupProps {
+    record: CouncilRoundRecord;
+    /**
+     * Turn nodes for this round. Rendered while the round is running (live stream)
+     * OR when the round is selected in the rail (inspect a finished round's debate).
+     */
+    children?: ReactNode;
+    /** True when this round is the one selected in the rail — highlight + expand. */
+    selected?: boolean;
+    theme: Theme;
+}
+/**
+ * F2 — header that frames a DONE round's persisted directive as its *opening*
+ * brief. Without it the directive's "Unmet (n/m)" line reads as current state and
+ * contradicts the "✓ Outcome: m/m met" line below on a converged round. When the
+ * round met everything, say so ("resolved below") so brief + outcome cohere.
+ */
+export declare function openingBriefHeader(allMet: boolean): string;
+/**
+ * One debate round in the round-grouped transcript (P6). The running round auto-
+ * opens and streams its turns live; a done round collapses to an expanded-inline
+ * summary — input (topic + members), outcome (criteria met/total), and the
+ * leader's decision — so a finished round always shows what it achieved instead
+ * of a bare "done". When `selected` (P2/D — the round chosen in the rail), a
+ * finished round also expands its debate turns and highlights.
+ */
+export declare function CouncilRoundGroup({ record, children, selected, theme }: CouncilRoundGroupProps): ReactNode;
+export interface CouncilRoundsOverviewProps {
+    rounds: CouncilRoundRecord[];
+    theme: Theme;
+    /** Optional session id appended to the overview so it stays visible above the debate transcript. */
+    sessionId?: string;
+}
+/** One-line overview above the round groups: totals + emergent count + session id. */
+export declare function CouncilRoundsOverview({ rounds, theme, sessionId }: CouncilRoundsOverviewProps): ReactNode;

package/dist/src/ui/components/council-round-group.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { Semantic } from "@muonroi/agent-harness-opentui";
+const DECISION_LABEL = {
+    continue: "continue",
+    stop: "sufficient — stop",
+    extend: "extend (emergent round)",
+    aborted: "aborted",
+    "circuit-break": "circuit breaker",
+    "eval-unavailable": "evaluation unavailable",
+};
+/**
+ * F2 — header that frames a DONE round's persisted directive as its *opening*
+ * brief. Without it the directive's "Unmet (n/m)" line reads as current state and
+ * contradicts the "✓ Outcome: m/m met" line below on a converged round. When the
+ * round met everything, say so ("resolved below") so brief + outcome cohere.
+ */
+export function openingBriefHeader(allMet) {
+    return `Opening brief${allMet ? " — resolved below" : ""}:`;
+}
+/** Color the leader's decision by whether the round landed well. */
+function decisionColor(decision, theme) {
+    switch (decision) {
+        case "stop":
+            return theme.diffAddedFg; // sufficient — a clean landing
+        case "aborted":
+        case "circuit-break":
+        case "eval-unavailable":
+            return theme.diffRemovedFg; // ended abnormally
+        default:
+            return theme.accent; // continue / extend — still in progress
+    }
+}
+/**
+ * One debate round in the round-grouped transcript (P6). The running round auto-
+ * opens and streams its turns live; a done round collapses to an expanded-inline
+ * summary — input (topic + members), outcome (criteria met/total), and the
+ * leader's decision — so a finished round always shows what it achieved instead
+ * of a bare "done". When `selected` (P2/D — the round chosen in the rail), a
+ * finished round also expands its debate turns and highlights.
+ */
+export function CouncilRoundGroup({ record, children, selected = false, theme }) {
+    const running = record.state === "running";
+    const headParts = [`Round ${record.round}`];
+    if (record.topic)
+        headParts.push(record.topic);
+    if (record.emergent)
+        headParts.push("(emergent)");
+    // Outcome verdict: how many acceptance criteria the round met. Colored + marked
+    // so a scan of the transcript shows at a glance which rounds landed cleanly.
+    const total = record.criteriaTotal ?? -1;
+    const met = record.criteriaMet ?? 0;
+    const hasCriteria = total > 0;
+    const allMet = hasCriteria && met >= total;
+    const noneMet = hasCriteria && met === 0;
+    const outcomeColor = allMet ? theme.diffAddedFg : noneMet ? theme.diffRemovedFg : theme.mdItalic;
+    const outcomeMark = allMet ? "✓" : noneMet ? "✗" : "◐";
+    return (_jsx(Semantic, { id: `council-round-${record.round}`, role: "region", name: `Round ${record.round}`, props: {
+            state: record.state,
+            emergent: record.emergent,
+            selected,
+            criteriaMet: record.criteriaMet ?? -1,
+            criteriaTotal: record.criteriaTotal ?? -1,
+            decision: record.leaderDecision ?? "",
+            directive: record.directive ?? "",
+        }, children: _jsxs("box", { flexDirection: "column", marginBottom: 1, border: ["left"], borderColor: running || selected ? theme.accent : theme.councilLeaderBorder, paddingLeft: 2, children: [_jsx("text", { fg: running || selected ? theme.accent : theme.textMuted, attributes: 1, children: `${running ? "> " : selected ? "› " : "✓ "}${headParts.join(" · ")}` }), record.participants.length > 0 && (_jsx("text", { fg: theme.textMuted, children: `${record.participants.length} members: ${record.participants.join(", ")}` })), running ? (
+                // Running round streams its turns live.
+                _jsx("box", { flexDirection: "column", marginTop: 1, children: children })) : (
+                // Done round: expanded debate turns (when selected in the rail) followed
+                // by the outcome verdict + leader decision summary.
+                _jsxs("box", { flexDirection: "column", children: [children ? (_jsx("box", { flexDirection: "column", marginTop: 1, marginBottom: 1, children: children })) : null, record.directive && _jsx("text", { fg: theme.textMuted, children: openingBriefHeader(allMet) }), record.directive &&
+                            record.directive.split("\n").map((line, i) => (_jsx("text", { fg: theme.accent, attributes: i === 0 ? 1 : 0, children: i === 0 ? `▶ ${line}` : `  ${line}` }, `dir-${i}`))), hasCriteria && (_jsx("text", { fg: outcomeColor, attributes: 1, children: `${outcomeMark} Outcome: ${met}/${total} criteria met` })), record.leaderDecision && (_jsx("text", { fg: decisionColor(record.leaderDecision, theme), attributes: 1, children: `Decision: ${DECISION_LABEL[record.leaderDecision]}` })), record.leaderReason && _jsx("text", { fg: theme.textMuted, children: record.leaderReason }), record.nextRoundFocus && _jsx("text", { fg: theme.textMuted, children: `Next focus: ${record.nextRoundFocus}` })] }))] }) }));
+}
+/** One-line overview above the round groups: totals + emergent count + session id. */
+export function CouncilRoundsOverview({ rounds, theme, sessionId }) {
+    const total = rounds.length;
+    const emergent = rounds.filter((r) => r.emergent).length;
+    const members = new Set();
+    for (const r of rounds)
+        for (const p of r.participants)
+            members.add(p);
+    const parts = [`Debate: ${total} round${total === 1 ? "" : "s"}`, `${members.size} members`];
+    if (emergent > 0)
+        parts.push(`${emergent} emergent`);
+    if (sessionId)
+        parts.push(`session ${sessionId}`);
+    return (_jsx(Semantic, { id: "council-rounds-overview", role: "region", props: { total, emergent, members: members.size, sessionId }, children: _jsx("text", { fg: theme.textMuted, attributes: 1, children: parts.join(" · ") }) }));
+}
+//# sourceMappingURL=council-round-group.js.map

package/dist/src/ui/components/council-status-list.d.ts

@@ -3,8 +3,10 @@ import type { Theme } from "../theme.js";
 export interface CouncilStatusListProps {
     statuses: CouncilStatusData[];
     theme: Theme;
+    /** Optional session id rendered as a pinned header so the user can correlate a council run with its session. */
+    sessionId?: string;
 }
-export declare function CouncilStatusList({ statuses, theme: t }: CouncilStatusListProps): import("react").ReactNode;
+export declare function CouncilStatusList({ statuses, theme: t, sessionId }: CouncilStatusListProps): import("react").ReactNode;
 /**
  * Reducer-friendly upsert: returns the next status array given an incoming
  * status chunk. Done statuses are kept until DONE_HOLD_MS expires (caller

package/dist/src/ui/components/council-status-list.js

@@ -2,16 +2,6 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@opentui/reac
 import { useEffect, useState } from "react";
 const SPINNER_FRAMES = ["⬒", "⬔", "⬓", "⬕"];
 const DONE_HOLD_MS = 1500;
-const PHASE_LABEL = {
-    clarify: "clarify",
-    plan_debate: "plan",
-    research: "research",
-    opening: "opening",
-    exchange: "exchange",
-    evaluate: "evaluate",
-    synthesis: "synthesis",
-    summary: "summary",
-};
 function Spinner() {
     const [frame, setFrame] = useState(0);
     useEffect(() => {
@@ -20,6 +10,20 @@ function Spinner() {
     }, []);
     return _jsx(_Fragment, { children: SPINNER_FRAMES[frame] });
 }
+/**
+ * Re-render every `tickMs` so active rows show a live-ticking elapsed counter.
+ * Without this the row freezes at the last emitter-sent elapsedMs (emitters
+ * only send on state transitions) — the same "im lìm" symptom the phase
+ * timeline fixed with its own heartbeat (council-phase-timeline.tsx).
+ */
+function useHeartbeat(tickMs = 1000) {
+    const [, force] = useState(0);
+    useEffect(() => {
+        const id = setInterval(() => force((n) => n + 1), tickMs);
+        return () => clearInterval(id);
+    }, [tickMs]);
+    return Date.now();
+}
 function formatElapsed(ms) {
     if (!ms || ms < 0)
         return "0s";
@@ -38,18 +42,22 @@ function formatTokens(s) {
         parts.push(`↓ ${s.tokensOut}`);
     return parts.length > 0 ? ` · ${parts.join(" · ")} tokens` : "";
 }
-export function CouncilStatusList({ statuses, theme: t }) {
-    if (statuses.length === 0)
+export function CouncilStatusList({ statuses, theme: t, sessionId }) {
+    // Hook must run unconditionally — before the empty-list early return.
+    const now = useHeartbeat(1000);
+    if (statuses.length === 0 && !sessionId)
         return null;
-    return (_jsx("box", { flexDirection: "column", paddingLeft: 2, paddingTop: 0, flexShrink: 0, children: statuses.map((s) => {
-            const isError = s.state === "error";
-            const isDone = s.state === "done";
-            const marker = isError ? "✗" : isDone ? "✓" : _jsx(Spinner, {});
-            const markerColor = isError ? t.diffRemovedFg : isDone ? t.planOptionCheck : t.accent;
-            const labelColor = isError ? t.diffRemovedFg : t.text;
-            const meta = `(${formatElapsed(s.elapsedMs)}${formatTokens(s)})`;
-            return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: markerColor, children: marker }), _jsx("text", { fg: labelColor, children: ` ${s.label}` }), _jsx("text", { fg: t.textMuted, children: ` ${meta}` }), _jsx("text", { fg: t.textDim, children: `  [${PHASE_LABEL[s.phase]}]` })] }), s.detail && (_jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.textMuted, children: `└ ${truncate(s.detail, 90)}` }) })), s.errorMessage && (_jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.diffRemovedFg, children: `└ ${truncate(s.errorMessage, 90)}` }) }))] }, s.statusId));
-        }) }));
+    return (_jsxs("box", { flexDirection: "column", paddingLeft: 2, paddingTop: 0, flexShrink: 0, children: [sessionId && (_jsx("box", { marginBottom: 1, children: _jsx("text", { fg: t.textDim, children: `session ${sessionId}` }) })), statuses.map((s) => {
+                const isError = s.state === "error";
+                const isDone = s.state === "done";
+                const marker = isError ? "✗" : isDone ? "✓" : _jsx(Spinner, {});
+                const markerColor = isError ? t.diffRemovedFg : isDone ? t.planOptionCheck : t.accent;
+                const labelColor = isError ? t.diffRemovedFg : t.text;
+                const isLive = s.state === "start" || s.state === "tick";
+                const liveElapsedMs = isLive && typeof s.startedAt === "number" ? Math.max(0, now - s.startedAt) : s.elapsedMs;
+                const meta = `(${formatElapsed(liveElapsedMs)}${formatTokens(s)})`;
+                return (_jsxs("box", { flexDirection: "column", children: [_jsxs("box", { children: [_jsx("text", { fg: markerColor, children: marker }), _jsx("text", { fg: labelColor, children: ` ${s.label}` }), _jsx("text", { fg: t.textMuted, children: ` ${meta}` })] }), s.detail && (_jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.textMuted, children: `└ ${truncate(s.detail, 140)}` }) })), s.errorMessage && (_jsx("box", { paddingLeft: 2, children: _jsx("text", { fg: t.diffRemovedFg, children: `└ ${truncate(s.errorMessage, 140)}` }) }))] }, s.statusId));
+            })] }));
 }
 function truncate(s, max) {
     if (s.length <= max)
@@ -63,10 +71,14 @@ function truncate(s, max) {
  */
 export function upsertStatus(prev, next) {
     const idx = prev.findIndex((s) => s.statusId === next.statusId);
-    if (idx === -1)
-        return [...prev, next];
+    if (idx === -1) {
+        // Stamp a client-side start anchor so the row can live-tick between emitter
+        // updates (emitters only send elapsedMs on state transitions).
+        const startedAt = next.startedAt ?? Date.now() - (next.elapsedMs ?? 0);
+        return [...prev, { ...next, startedAt }];
+    }
     const out = prev.slice();
-    out[idx] = next;
+    out[idx] = { ...next, startedAt: next.startedAt ?? out[idx].startedAt };
     return out;
 }
 /** Remove `done` rows that finished more than DONE_HOLD_MS ago. */