@iowarp/clio-coder 0.3.1 → 0.3.2

package/src/interactive/chat-panel.ts

@@ -7,19 +7,19 @@ import { type Component, Markdown, truncateToWidth, wrapTextWithAnsi } from "../
 import type { AgentMessage } from "../engine/types.js";
 import type { ChatLoopEvent, RetryStatusPayload } from "./chat-loop.js";
 import { extractText, isSelfExplainingAbort } from "./chat-loop-messages.js";
+import type { ApprovalRequestView } from "./permission-overlay.js";
 import { codeInk } from "./renderers/code-ink.js";
+import { createMermaidMarkdownTransform } from "./renderers/mermaid.js";
 import { styleTaggedNotice } from "./renderers/notice.js";
 import { formatRetryStatus } from "./renderers/retry-status.js";
 import {
 	classifyResourceRead,
-	previewResult,
 	renderToolAwaitingApproval,
 	renderToolCallHeader,
 	renderToolExecution,
 	renderToolRunningStatus,
 	renderToolStreamingExecution,
 	renderToolSubline,
-	unwrapResultEnvelope,
 } from "./renderers/tool-execution.js";
 import { renderWorkerEntryLines } from "./renderers/worker-entry.js";
 import { INLINE_STATUS_INDENT_COLS, type StatusPhase, type VerbRender } from "./status/index.js";
@@ -33,6 +33,13 @@ import { type WorkerEntryState, workerAskedByModel } from "./worker-stream.js";
 // indentation, and width behavior stay pi-tui's and nothing post-processes
 // already-rendered output.
 const CHAT_MARKDOWN_THEME = markdownTheme(clioTheme(), (code, lang) => codeInk(lang, code.split("\n")));
+const CHAT_MARKDOWN_OPTIONS = {
+	transform: createMermaidMarkdownTransform(clioTheme()),
+	renderLatex: true,
+} as const;
+// TuiAltScreen uses Pi's OSC 133 prompt-start marker for semantic prompt
+// navigation. The sequence is zero-width and stripped before terminal output.
+const OSC133_PROMPT_START = "\x1b]133;A\x07";
 
 // Prefix and rail SGR constants, previously re-exported by the deleted
 // palette.ts. Composing them from fgSequence/GLYPH here yields byte-identical
@@ -49,10 +56,10 @@ const USER_GLYPH = GLYPH.user;
 
 /**
  * An assistant turn is a sequence of text and tool segments interleaved in
- * pi-agent-core event order. pi-agent-core emits: `message_start` →
- * `text_delta`+ → `message_end` → `tool_execution_*` → (next) `message_start`
- * → `text_delta`+ → `message_end`, so tool calls always sit BETWEEN the
- * assistant's pre-tool narration and the post-tool summary. Storing a flat
+ * pi-agent-core event order. A tool turn emits assistant `message_update`
+ * events carrying `toolcall_*` formation, then `message_end`, then the
+ * `tool_execution_*` lifecycle before the next assistant message. Tool calls
+ * therefore sit BETWEEN the assistant's pre-tool narration and the post-tool summary. Storing a flat
  * `text` buffer + `tools[]` array (pre-refactor) collapsed that order: all
  * text across the turn concatenated into one line with every tool block
  * appended at the end. The segment list preserves the stream order instead.
@@ -117,6 +124,10 @@ type ToolSegment = {
 	result?: unknown;
 	/** True once `tool_execution_end` has landed (success or error). */
 	finished: boolean;
+	/** Pi streamed the call row before execution and later starts this same row. */
+	executionStarted: boolean;
+	/** The assistant stream closed this call's argument block. */
+	argsComplete: boolean;
 	/**
 	 * True when the segment was force-settled without its own end event
 	 * (blocked at admission, aborted mid-batch, id reused). A late
@@ -137,13 +148,14 @@ type ToolSegment = {
 	/** Persisted result summary (bytes, truncated, offloadPath, observation) from the chat loop. */
 	resultSummary?: Record<string, unknown> | undefined;
 	/**
-	 * Latest cumulative partial output from `tool_execution_update`. Cleared
+	 * Latest cumulative Pi result from `tool_execution_update`, including the
+	 * display content and structured progress details. Cleared
 	 * back to `undefined` on `tool_execution_end` so the finished `result`
 	 * takes over. Only consumed when `!finished && expanded`. The explicit
 	 * `| undefined` is required under `exactOptionalPropertyTypes: true` so
 	 * the clear path can re-assign `undefined` without a `delete`.
 	 */
-	partialOutput?: string | undefined;
+	partialResult?: unknown;
 	/**
 	 * True while the call is parked at the permission gate. Set/cleared by
 	 * `tool_approval_state` events and cleared by any settle so a denied or
@@ -151,6 +163,8 @@ type ToolSegment = {
 	 * while `!finished`.
 	 */
 	awaitingApproval?: boolean | undefined;
+	/** Live, redacted approval facts. Never reconstructed during replay. */
+	approvalView?: ApprovalRequestView | undefined;
 	settlement?: "blocked" | "aborted" | "orphaned" | undefined;
 	/**
 	 * The admission verdict's short reason, present only on a settlement the
@@ -158,6 +172,8 @@ type ToolSegment = {
 	 * was refused and leaves the operator no way to learn why.
 	 */
 	blockReason?: string | undefined;
+	/** View-only marker: historical calls render mutation diffs without live color. */
+	replayed?: true;
 };
 /**
  * A turn's terminal-error marker (`[error] ...`, `[aborted] ...`,
@@ -210,14 +226,28 @@ type TranscriptEntry =
 	 * The panel is told when that happened through `applyWorkerState`.
 	 */
 	| { role: "worker"; state: WorkerEntryState; folded: boolean }
-	| { role: "replayBlock"; renderBlock: ReplayBlockRenderer };
+	/**
+	 * A block the caller renders itself. Most are settled the moment they are
+	 * appended, but a few (the operator's `!` bash row) keep mutating the state
+	 * their closure reads until the work behind them finishes. Such a block
+	 * declares `isLive`, which keeps it out of the frozen prefix and keeps the
+	 * panel's time-keyed tick running while it is unsettled.
+	 */
+	| { role: "replayBlock"; renderBlock: ReplayBlockRenderer; isLive?: (() => boolean) | undefined };
 
 type WorkerTranscriptEntry = Extract<TranscriptEntry, { role: "worker" }>;
 
 export interface ChatPanel extends Component {
 	appendUser(text: string): void;
-	appendReplayBlock(renderBlock: ReplayBlockRenderer): void;
+	/**
+	 * Append a caller-rendered block. Pass `isLive` when the closure reads state
+	 * that keeps changing after the append, so the panel keeps re-rendering it
+	 * instead of treating the first frame as final.
+	 */
+	appendReplayBlock(renderBlock: ReplayBlockRenderer, isLive?: () => boolean): void;
 	applyEvent(event: ChatLoopEvent): void;
+	/** Mark a just-rehydrated tool segment so its mutation diff remains plain. */
+	markToolReplayed?(toolCallId: string): void;
 	/**
 	 * Place or refresh a worker's block. The first call for an assignment
 	 * inserts the entry (agent origin nests under the tool segment named by
@@ -237,8 +267,8 @@ export interface ChatPanel extends Component {
 	/**
 	 * Force every tool segment into its collapsed one-line form. Replay
 	 * (`rehydrateChatPanelFromTurns`) calls this so a resumed or forked
-	 * transcript reproduces the settled live view, where tools are collapsed to
-	 * their ledger summary rather than the expanded body. Idempotent.
+	 * transcript uses compact ledger summaries instead of auto-expanding every
+	 * historical non-resource call. Idempotent.
 	 */
 	collapseAllTools(): void;
 	/**
@@ -249,6 +279,8 @@ export interface ChatPanel extends Component {
 	 */
 	toggleLastThinking(): boolean;
 	toggleAllThinking(): boolean;
+	/** Current panel-level live-thinking visibility used by presentation pacing. */
+	isThinkingExpanded(): boolean;
 	/** Toggle whether expanded live tool bodies include cumulative partial output. */
 	toggleLiveToolOutput(): boolean;
 	/** Clears the visible transcript. /new uses this after rotating the session. */
@@ -510,7 +542,7 @@ function renderTextSegmentLines(seg: TextSegment, width: number): string[] {
 		return wrapped;
 	}
 	if (!seg.md) {
-		seg.md = new Markdown(seg.text, 0, 0, CHAT_MARKDOWN_THEME);
+		seg.md = new Markdown(seg.text, 0, 0, CHAT_MARKDOWN_THEME, undefined, CHAT_MARKDOWN_OPTIONS);
 	}
 	// pi-tui Markdown right-pads lines to the render width. If a long streaming
 	// reply has already scrolled, flipping the finalized segment from unpadded
@@ -698,11 +730,20 @@ function renderToolSegmentLines(
 	const hintKey = seg.id === latestHintToolId ? expandKey : undefined;
 	const expanded = verbosity === "verbose" || (verbosity !== "minimal" && seg.expanded);
 	const elapsedMs = seg.startedAtMs !== undefined ? Math.max(0, rawDurationMs(seg.startedAtMs, nowMs)) : undefined;
+	const phase: "forming" | "ready" | "running" = seg.executionStarted
+		? "running"
+		: seg.argsComplete
+			? "ready"
+			: "forming";
 	// A parked call is not executing: the awaiting-approval line replaces the
 	// counting elapsed spinner in both collapsed and expanded form (there is no
 	// body or partial output to expand while the call sits at the gate).
 	if (!seg.finished && seg.awaitingApproval === true) {
-		return renderToolAwaitingApproval({ toolCallId: seg.id, toolName: seg.name, args: seg.args }, width);
+		return renderToolAwaitingApproval(
+			{ toolCallId: seg.id, toolName: seg.name, args: seg.args },
+			width,
+			seg.approvalView,
+		);
 	}
 	if (!expanded) {
 		return renderToolSubline(
@@ -718,20 +759,20 @@ function renderToolSegmentLines(
 						outcome: seg.settlement,
 						blockReason: seg.blockReason,
 					}
-				: { toolCallId: seg.id, toolName: seg.name, args: seg.args, elapsedMs },
+				: { toolCallId: seg.id, toolName: seg.name, args: seg.args, elapsedMs, phase },
 			width,
 			hintKey,
 		);
 	}
 	if (!seg.finished) {
-		if (liveToolOutput && seg.partialOutput !== undefined) {
+		if (liveToolOutput && seg.partialResult !== undefined) {
 			return renderToolStreamingExecution(
-				{ toolCallId: seg.id, toolName: seg.name, args: seg.args, elapsedMs },
+				{ toolCallId: seg.id, toolName: seg.name, args: seg.args, elapsedMs, phase },
 				width,
-				seg.partialOutput,
+				seg.partialResult,
 			);
 		}
-		const call = { toolCallId: seg.id, toolName: seg.name, args: seg.args, elapsedMs };
+		const call = { toolCallId: seg.id, toolName: seg.name, args: seg.args, elapsedMs, phase };
 		return liveToolOutput ? renderToolCallHeader(call, width) : renderToolRunningStatus(call, width);
 	}
 	return renderToolExecution(
@@ -747,7 +788,7 @@ function renderToolSegmentLines(
 			blockReason: seg.blockReason,
 		},
 		width,
-		{ unbounded: unboundedToolBodies },
+		{ unbounded: unboundedToolBodies, diffStyle: seg.replayed === true ? "plain" : "color" },
 	);
 }
 
@@ -780,7 +821,9 @@ function renderEntryLines(
 		const contentWidth = Math.max(1, width - PROSE_GUTTER_WIDTH);
 		const lines: string[] = [];
 		for (const sourceLine of entry.text.split("\n")) lines.push(...wrapTextWithAnsi(sourceLine, contentWidth));
-		return hangProseLines(lines, USER_PREFIX);
+		const rendered = hangProseLines(lines, USER_PREFIX);
+		if (rendered[0] !== undefined) rendered[0] = `${OSC133_PROMPT_START}${rendered[0]}`;
+		return rendered;
 	}
 	if (entry.role === "retryStatus") {
 		return wrapTextWithAnsi(formatRetryStatus(entry.status), width);
@@ -921,14 +964,14 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 	const entryCacheCapacity = (): number =>
 		Math.max(MIN_ENTRY_RENDER_CACHE, Math.min(MAX_ENTRY_RENDER_CACHE, transcript.length));
 	/**
-	 * Windowed-tail build (F19 on pi-tui 0.83 terms): the lines of every settled
+	 * Regular-screen windowed-tail build: the lines of every settled
 	 * leading entry are baked into one frozen prefix, so a dirty frame re-renders
-	 * only the live tail and re-emits the prefix by reference. pi-tui still
-	 * receives the full line array, deliberately: the 0.83 renderer keeps every
+	 * only the live tail and re-emits the prefix by reference. TuiMainScreen still
+	 * receives the full line array, deliberately: the renderer keeps every
 	 * line in `previousLines` and full-redraws (clearing scrollback) when the
-	 * head shrinks, so a real shrinking window needs the 0.84 ScrollView
-	 * architecture. The freeze is dropped whenever a frozen entry is invalidated
-	 * or the render key changes.
+	 * head shrinks. Fullscreen mode instead gives the transcript its own pi-tui
+	 * ScrollView. The freeze is dropped whenever a frozen entry is invalidated or
+	 * the render key changes.
 	 */
 	let frozen: { lines: string[]; through: number; key: string } | null = null;
 	let thinkingExpanded = false;
@@ -983,8 +1026,9 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 		if (seg.result === undefined)
 			seg.result = "(no result: the call did not complete; execution was aborted, blocked, or orphaned)";
 		seg.settlement = settlement;
-		seg.partialOutput = undefined;
+		seg.partialResult = undefined;
 		seg.awaitingApproval = undefined;
+		seg.approvalView = undefined;
 	};
 
 	/**
@@ -1142,18 +1186,22 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 
 	/** True when the entry renders at least one counting elapsed line this frame. */
 	const entryHasRunningTool = (entry: TranscriptEntry): boolean =>
-		entry.role === "assistant" &&
-		entry.segments.some((segment) => segment.kind === "tool" && !segment.finished && segment.startedAtMs !== undefined);
+		(entry.role === "assistant" &&
+			entry.segments.some(
+				(segment) => segment.kind === "tool" && !segment.finished && segment.startedAtMs !== undefined,
+			)) ||
+		(entry.role === "replayBlock" && entry.isLive?.() === true);
 
 	/**
 	 * Settled entries whose render is a pure function of the base key. A live
 	 * worker block is excluded for the same reason a running tool is: the
 	 * reducer mutates its state object in place, so a cached render would keep
-	 * serving the answer as it looked several deltas ago.
+	 * serving the answer as it looked several deltas ago. A replay block that
+	 * declares itself live is excluded on the same grounds.
 	 */
 	const entryIsStable = (entry: TranscriptEntry): boolean =>
 		entry.role === "user" ||
-		entry.role === "replayBlock" ||
+		(entry.role === "replayBlock" && entry.isLive?.() !== true) ||
 		(entry.role === "worker" && !entry.state.pending) ||
 		(entry.role === "assistant" &&
 			!entry.pending &&
@@ -1283,8 +1331,8 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 			transcript.push({ role: "user", text });
 			markDirty();
 		},
-		appendReplayBlock(renderBlock: ReplayBlockRenderer): void {
-			transcript.push({ role: "replayBlock", renderBlock });
+		appendReplayBlock(renderBlock: ReplayBlockRenderer, isLive?: () => boolean): void {
+			transcript.push({ role: "replayBlock", renderBlock, isLive });
 			markDirty();
 		},
 		applyWorkerState(state: WorkerEntryState): void {
@@ -1404,6 +1452,7 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 			markDirty();
 			return true;
 		},
+		isThinkingExpanded: () => thinkingExpanded,
 		toggleLiveToolOutput(): boolean {
 			liveToolOutput = !liveToolOutput;
 			markDirty();
@@ -1415,6 +1464,13 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 			clearRenderCaches();
 			markDirty();
 		},
+		markToolReplayed(toolCallId: string): void {
+			const owner = findToolSegmentOwner(toolCallId);
+			if (!owner || owner.segment.finished) return;
+			invalidateEntryCache(owner.entry);
+			owner.segment.replayed = true;
+			markDirty();
+		},
 		applyEvent(event: ChatLoopEvent): void {
 			if (event.type === "agent_status") {
 				return;
@@ -1439,6 +1495,50 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 				markDirty();
 				return;
 			}
+			if (event.type === "message_update") {
+				const assistantEvent = event.assistantMessageEvent as {
+					type?: unknown;
+					contentIndex?: unknown;
+					partial?: { content?: unknown };
+				};
+				if (
+					assistantEvent.type !== "toolcall_start" &&
+					assistantEvent.type !== "toolcall_delta" &&
+					assistantEvent.type !== "toolcall_end"
+				) {
+					return;
+				}
+				const index = typeof assistantEvent.contentIndex === "number" ? assistantEvent.contentIndex : -1;
+				const content = Array.isArray(assistantEvent.partial?.content) ? assistantEvent.partial.content : [];
+				const block = content[index];
+				if (block === null || typeof block !== "object" || Array.isArray(block)) return;
+				const streamed = block as { type?: unknown; id?: unknown; name?: unknown; arguments?: unknown };
+				if (streamed.type !== "toolCall" || typeof streamed.id !== "string" || streamed.id.length === 0) return;
+				const owner = findToolSegmentOwner(streamed.id);
+				const existing = owner?.segment;
+				if (existing && !existing.finished && !existing.executionStarted) {
+					if (owner) invalidateEntryCache(owner.entry);
+					existing.name = typeof streamed.name === "string" && streamed.name.length > 0 ? streamed.name : existing.name;
+					existing.args = streamed.arguments ?? existing.args;
+					existing.argsComplete = assistantEvent.type === "toolcall_end";
+				} else if (existing === undefined) {
+					const assistant = ensureAssistant();
+					assistant.pending = true;
+					assistant.segments.push({
+						kind: "tool",
+						id: streamed.id,
+						name: typeof streamed.name === "string" && streamed.name.length > 0 ? streamed.name : "tool",
+						args: streamed.arguments ?? {},
+						finished: false,
+						executionStarted: false,
+						argsComplete: assistantEvent.type === "toolcall_end",
+						isError: false,
+						expanded: false,
+					});
+				}
+				markDirty();
+				return;
+			}
 			if (event.type === "text_delta") {
 				const assistant = ensureAssistant();
 				assistant.pending = true;
@@ -1461,6 +1561,19 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 				return;
 			}
 			if (event.type === "tool_execution_start") {
+				const streamedOwner = findToolSegmentOwner(event.toolCallId);
+				if (streamedOwner !== undefined && !streamedOwner.segment.finished && !streamedOwner.segment.executionStarted) {
+					invalidateEntryCache(streamedOwner.entry);
+					const streamed = streamedOwner.segment;
+					streamed.name = event.toolName;
+					streamed.args = event.args;
+					streamed.executionStarted = true;
+					streamed.argsComplete = true;
+					streamed.startedAtMs = now();
+					streamed.expanded = classifyResourceRead(event.toolName, event.args) === null;
+					markDirty();
+					return;
+				}
 				// A model that reuses a tool-call id across calls would leave the
 				// prior same-id segment unsettled (its end matches the first segment
 				// on lookup). Settle any such orphan now, wherever it lives, so it
@@ -1474,7 +1587,7 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 				const assistant = ensureAssistant();
 				// Compact resource reads (SKILL.md, CLIO-CODER.md, AGENTS.md, docs/) stay
 				// collapsed to one labeled line until explicitly expanded.
-				const expanded = assistant.pending === false && classifyResourceRead(event.toolName, event.args) === null;
+				const expanded = classifyResourceRead(event.toolName, event.args) === null;
 				assistant.pending = true;
 				assistant.segments.push({
 					kind: "tool",
@@ -1482,6 +1595,8 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 					name: event.toolName,
 					args: event.args,
 					finished: false,
+					executionStarted: true,
+					argsComplete: true,
 					isError: false,
 					expanded,
 					startedAtMs: now(),
@@ -1499,24 +1614,22 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 				const tool = owner?.segment;
 				if (tool && !tool.finished) {
 					tool.awaitingApproval = event.state === "awaiting-approval" ? true : undefined;
+					tool.approvalView = event.state === "awaiting-approval" ? event.view : undefined;
 					markDirty();
 				}
 				return;
 			}
 			if (event.type === "tool_execution_update") {
-				// pi-agent emits `partialResult` as a cumulative tool-result envelope
-				// (the bash tool concatenates its rolling tail buffer on every tick).
-				// Unwrap with the same helper the finished-result path uses, then
-				// REPLACE `partialOutput` rather than appending: the upstream
-				// semantics are cumulative, so appending would double-print every
-				// snapshot. Render dispatch picks up the new buffer on the next
-				// frame via `renderToolSegmentLines`.
+				// pi-agent emits `partialResult` as a cumulative AgentToolResult.
+				// Preserve that full envelope so the renderer can use structured
+				// progress details as well as content. Replace rather than append:
+				// Pi's update semantics are cumulative, and appending would duplicate
+				// every earlier snapshot.
 				const owner = findToolSegmentOwner(event.toolCallId);
 				if (owner) invalidateEntryCache(owner.entry);
 				const tool = owner?.segment;
 				if (tool && !tool.finished) {
-					const unwrapped = unwrapResultEnvelope(event.partialResult);
-					tool.partialOutput = typeof unwrapped === "string" ? unwrapped : previewResult(unwrapped);
+					tool.partialResult = event.partialResult;
 				}
 				markDirty();
 				return;
@@ -1568,23 +1681,36 @@ export function createChatPanel(options: ChatPanelOptions = {}): ChatPanel {
 					// expanded render switches to `renderToolExecution` and stays
 					// stable instead of churning through partial-frame layout. A
 					// denied park settles here too, so the awaiting styling must go.
-					tool.partialOutput = undefined;
+					tool.partialResult = undefined;
 					tool.awaitingApproval = undefined;
+					tool.approvalView = undefined;
 				}
 				markDirty();
 				return;
 			}
 			if (event.type === "message_end") {
+				const current = transcript[transcript.length - 1];
+				let completedStreamedArgs = false;
+				if (current?.role === "assistant") {
+					for (const segment of current.segments) {
+						if (segment.kind !== "tool" || segment.finished || segment.executionStarted || segment.argsComplete) continue;
+						segment.argsComplete = true;
+						completedStreamedArgs = true;
+					}
+					if (completedStreamedArgs) invalidateEntryCache(current);
+				}
 				const text = extractAssistantText(event.message);
 				const thinking = extractAssistantThinking(event.message);
 				const extractedTerminalError = extractAssistantTerminalError(event.message);
-				const current = transcript[transcript.length - 1];
 				const terminalError =
 					current?.role === "assistant"
 						? scopeTerminalErrorAfterSuccessfulTool(current, extractedTerminalError)
 						: extractedTerminalError;
 				const usage = assistantUsage(event.message);
-				if (text.length === 0 && thinking.length === 0 && terminalError.length === 0 && usage === undefined) return;
+				if (text.length === 0 && thinking.length === 0 && terminalError.length === 0 && usage === undefined) {
+					if (completedStreamedArgs) markDirty();
+					return;
+				}
 				const assistant = ensureAssistant();
 				// message_end rewrites exactly one entry: the assistant it lands on.
 				invalidateEntryCache(assistant);