@oh-my-pi/pi-coding-agent 15.8.2 → 15.9.0

package/src/main.ts

@@ -66,6 +66,7 @@ import type { AgentSession } from "./session/agent-session";
 import type { AuthStorage } from "./session/auth-storage";
 import { resolveResumableSession, type SessionInfo, SessionManager } from "./session/session-manager";
 import { resolvePromptInput } from "./system-prompt";
+import { initTelemetryExport, isTelemetryExportEnabled } from "./telemetry-export";
 import { AUTO_THINKING } from "./thinking";
 import type { LspStartupServerInfo } from "./tools";
 import { getChangelogPath, getNewEntries, parseChangelog } from "./utils/changelog";
@@ -973,6 +974,17 @@ export async function runRootCommand(
 	sessionOptions.hasUI = isInteractive || mode === "rpc-ui";
 	sessionOptions.settings = settingsInstance;
 
+	// OTEL: register the global OTLP trace exporter when an OTLP endpoint is
+	// configured via env, then switch on the agent loop's telemetry so its
+	// GenAI spans (invoke_agent / chat / execute_tool) are actually emitted.
+	// Both are no-ops when OTEL_EXPORTER_OTLP_ENDPOINT is unset. An empty config
+	// is enough to enable telemetry — content capture is governed by the
+	// standard OTEL_INSTRUMENTATION_GENAI_CAPTURE_MESSAGE_CONTENT env var.
+	initTelemetryExport();
+	if (isTelemetryExportEnabled()) {
+		sessionOptions.telemetry = {};
+	}
+
 	// Handle CLI --api-key as runtime override (not persisted)
 	if (parsedArgs.apiKey) {
 		if (!sessionOptions.model && !sessionOptions.modelPattern) {

package/src/mcp/transports/stdio.ts

@@ -25,22 +25,42 @@ interface FrameSink {
 	flush(): unknown;
 }
 
+/** Narrow a value to a thenable so a rejection handler can be attached. */
+function isThenable(value: unknown): value is PromiseLike<unknown> {
+	return (
+		value != null &&
+		(typeof value === "object" || typeof value === "function") &&
+		typeof (value as { then?: unknown }).then === "function"
+	);
+}
+
 /**
  * Write a newline-delimited JSON-RPC frame to the subprocess's stdin sink,
- * swallowing synchronous errors so the caller can decide how to react.
+ * swallowing both synchronous throws and asynchronous rejections so the caller
+ * can decide how to react.
+ *
+ * Bun's `FileSink.write()`/`flush()` can fail two ways once the read end of the
+ * pipe has been closed by a subprocess that exited between read-loop ticks:
+ *   - a synchronous throw (most reliably observed on Windows), and
+ *   - a *rejected Promise* returned from `write()`/`flush()`, i.e. the EPIPE is
+ *     surfaced asynchronously (note the `processTicksAndRejections` frame in the
+ *     stack traces on #1710 and the follow-up report).
  *
- * Bun's `FileSink` may throw synchronously (most reliably on Windows) when
- * the read end of the pipe has been closed by a subprocess that exited
- * between read-loop ticks. Letting that throw escape an `async` method
- * surfaces as an unhandled promise rejection at the call site.
+ * A sibling `async` method's `try/catch` only catches the synchronous case; an
+ * un-awaited rejected Promise escapes as a fatal unhandled rejection. So we both
+ * catch the throw and neutralize any returned promise's rejection.
  *
- * Returns `true` when the frame was accepted by the sink, `false` when the
- * sink threw — callers signal transport closure on `false`.
+ * Returns `true` when the frame was accepted synchronously, `false` when the
+ * sink threw — callers signal transport closure on `false`. An asynchronous
+ * failure cannot be reflected in the return value; it is neutralized here and
+ * the dead transport is detected by the read loop / request timeout instead.
  */
 export function writeFrame(stdin: FrameSink, frame: string): boolean {
 	try {
-		stdin.write(frame);
-		stdin.flush();
+		const wrote = stdin.write(frame);
+		const flushed = stdin.flush();
+		if (isThenable(wrote)) wrote.then(undefined, () => {});
+		if (isThenable(flushed)) flushed.then(undefined, () => {});
 		return true;
 	} catch {
 		return false;
@@ -287,11 +307,16 @@ export class StdioTransport implements MCPTransport {
 			}, timeout);
 		}
 
+		const stdin = this.#process.stdin;
 		const message = `${JSON.stringify(request)}\n`;
 		try {
-			// Bun's FileSink has write() method directly
-			this.#process.stdin.write(message);
-			this.#process.stdin.flush();
+			// Await both: Bun's FileSink can surface a broken pipe either as a
+			// synchronous throw or as a rejected Promise (the EPIPE arrives on a
+			// processTicksAndRejections tick). Awaiting funnels both into this catch
+			// so the request rejects cleanly instead of leaving a floating rejected
+			// promise that crashes the process via the unhandledRejection handler.
+			await stdin.write(message);
+			await stdin.flush();
 		} catch (error: unknown) {
 			cleanup();
 			reject(error instanceof Error ? error : new Error(String(error)));

package/src/modes/acp/acp-event-mapper.ts

@@ -8,7 +8,7 @@ import type {
 } from "@agentclientprotocol/sdk";
 import type { AgentSessionEvent } from "../../session/agent-session";
 import { resolveToCwd } from "../../tools/path-utils";
-import type { TodoStatus } from "../../tools/todo-write";
+import type { TodoStatus } from "../../tools/todo";
 
 interface MessageProgress {
 	textEmitted: boolean;
@@ -148,7 +148,7 @@ export function mapToolKind(toolName: string): ToolKind {
 			return "search";
 		case "web_search":
 			return "fetch";
-		case "todo_write":
+		case "todo":
 			return "think";
 		default:
 			return "other";
@@ -215,7 +215,7 @@ export function mapAgentSessionEventToAcpSessionUpdates(
 				update.locations = locations;
 			}
 			const notifications = [toSessionNotification(sessionId, update)];
-			const planUpdate = mapTodoWriteResultToPlanUpdate(event);
+			const planUpdate = mapTodoResultToPlanUpdate(event);
 			if (planUpdate) {
 				notifications.push(toSessionNotification(sessionId, planUpdate));
 			}
@@ -336,13 +336,13 @@ function mapTodoStatus(status: TodoStatus): "pending" | "in_progress" | "complet
 	return todoStatusMap[status];
 }
 
-function mapTodoWriteResultToPlanUpdate(
+function mapTodoResultToPlanUpdate(
 	event: Extract<AgentSessionEvent, { type: "tool_execution_end" }>,
 ): SessionUpdate | undefined {
-	if (event.toolName !== "todo_write" || event.isError) {
+	if (event.toolName !== "todo" || event.isError) {
 		return undefined;
 	}
-	const phases = extractTodoWritePhases(event.result);
+	const phases = extractTodoPhases(event.result);
 	if (!Array.isArray(phases)) {
 		return undefined;
 	}
@@ -356,7 +356,7 @@ function mapTodoWriteResultToPlanUpdate(
 	};
 }
 
-function extractTodoWritePhases(result: unknown): unknown {
+function extractTodoPhases(result: unknown): unknown {
 	if (typeof result !== "object" || result === null || !("details" in result)) {
 		return undefined;
 	}

package/src/modes/components/assistant-message.ts

@@ -1,5 +1,5 @@
 import type { AssistantMessage, ImageContent, Usage } from "@oh-my-pi/pi-ai";
-import { Container, Image, ImageProtocol, Markdown, Spacer, TERMINAL, Text } from "@oh-my-pi/pi-tui";
+import { Container, Image, type ImageBudget, ImageProtocol, Markdown, Spacer, TERMINAL, Text } from "@oh-my-pi/pi-tui";
 import { formatNumber } from "@oh-my-pi/pi-utils";
 import { settings } from "../../config/settings";
 import type { AssistantThinkingRenderer } from "../../extensibility/extensions/types";
@@ -23,6 +23,7 @@ export class AssistantMessageComponent extends Container {
 		private hideThinkingBlock = false,
 		private readonly onImageUpdate?: () => void,
 		private readonly thinkingRenderers: readonly AssistantThinkingRenderer[] = [],
+		private readonly imageBudget?: ImageBudget,
 	) {
 		super();
 
@@ -124,7 +125,7 @@ export class AssistantMessageComponent extends Container {
 						displayImage.data,
 						displayImage.mimeType,
 						{ fallbackColor: (text: string) => theme.fg("toolOutput", text) },
-						resolveImageOptions(),
+						{ ...resolveImageOptions(), budget: this.imageBudget, imageKey: key },
 					),
 				);
 				continue;

package/src/modes/components/hook-selector.ts

@@ -4,6 +4,7 @@
  */
 import {
 	Container,
+	Ellipsis,
 	extractPrintableText,
 	fuzzyFilter,
 	Markdown,
@@ -15,6 +16,7 @@ import {
 	Spacer,
 	Text,
 	type TUI,
+	truncateToWidth,
 	visibleWidth,
 	wrapTextWithAnsi,
 } from "@oh-my-pi/pi-tui";
@@ -71,6 +73,17 @@ export interface HookSelectorOptions {
 	/** Indices into the original options that cannot be selected: they render
 	 *  dimmed, are skipped during navigation, and reject enter/timeout. */
 	disabledIndices?: readonly number[];
+	/** Render a leading radio/checkbox marker before each markable option,
+	 *  matching the ask transcript. "radio" fills the marker on the cursor row
+	 *  (single-choice); "checkbox" reflects {@link checkedIndices} per row
+	 *  (multi-select). Options at or beyond {@link markableCount} keep the plain
+	 *  cursor prefix — used for trailing control rows like "Other"/"Done". */
+	selectionMarker?: "radio" | "checkbox";
+	/** For `selectionMarker: "checkbox"`: original-indices currently checked. */
+	checkedIndices?: readonly number[];
+	/** Number of leading options (original order) that receive a selection
+	 *  marker. Defaults to every option when {@link selectionMarker} is set. */
+	markableCount?: number;
 }
 
 export interface HookSelectorOption {
@@ -140,6 +153,9 @@ export class HookSelectorComponent extends Container {
 	#searchQuery = "";
 	#selectedIndex: number;
 	#disabledIndices: Set<number>;
+	#selectionMarker: "radio" | "checkbox" | undefined;
+	#checkedIndices: Set<number>;
+	#markableCount: number;
 	#maxVisible: number;
 	#listContainer: Container | undefined;
 	#outlinedList: OutlinedList | undefined;
@@ -171,6 +187,13 @@ export class HookSelectorComponent extends Container {
 				index => Number.isInteger(index) && index >= 0 && index < this.#options.length,
 			),
 		);
+		this.#selectionMarker = opts?.selectionMarker;
+		this.#checkedIndices = new Set(
+			(opts?.checkedIndices ?? []).filter(
+				index => Number.isInteger(index) && index >= 0 && index < this.#options.length,
+			),
+		);
+		this.#markableCount = Math.max(0, Math.min(opts?.markableCount ?? this.#options.length, this.#options.length));
 		this.#selectedIndex = this.#coerceSelectedIndex(opts?.initialIndex ?? 0);
 		this.#maxVisible = Math.max(3, opts?.maxVisible ?? 12);
 		this.#onSelectCallback = onSelect;
@@ -278,20 +301,71 @@ export class HookSelectorComponent extends Container {
 		isSelected: boolean,
 		isDisabled: boolean,
 		mdTheme: MarkdownTheme,
+		descRows: number | "full",
+		renderWidth?: number,
+		index?: number,
 	): string[] {
 		const textColor = isDisabled ? "dim" : isSelected ? "accent" : "text";
 		const prefixColor = isDisabled ? "dim" : "accent";
 		const label = renderInlineMarkdown(option.label, mdTheme, t => theme.fg(textColor, t));
-		const prefix = isSelected ? theme.fg(prefixColor, `${theme.nav.cursor} `) : "  ";
+		const marker = index !== undefined ? this.#renderMarkerPrefix(index, isSelected, isDisabled) : undefined;
+		const prefix = marker ?? (isSelected ? theme.fg(prefixColor, `${theme.nav.cursor} `) : "  ");
 		const lines = [prefix + label];
-		if (option.description) {
-			const descriptionColor = isDisabled ? "dim" : "muted";
-			const description = renderInlineMarkdown(option.description, mdTheme, t => theme.fg(descriptionColor, t));
-			lines.push(`    ${description}`);
+		if (option.description && descRows !== 0) {
+			const descriptionColor: ThemeColor = isDisabled ? "dim" : "muted";
+			if (descRows === "full") {
+				const description = renderInlineMarkdown(option.description, mdTheme, t => theme.fg(descriptionColor, t));
+				lines.push(`    ${description}`);
+			} else {
+				lines.push(
+					...this.#wrapDescriptionRows(option.description, descRows, descriptionColor, mdTheme, renderWidth),
+				);
+			}
 		}
 		return lines;
 	}
 
+	/** Styled leading marker (`"<glyph> "`) for a markable option row, or
+	 *  `undefined` when no marker applies (control rows beyond `markableCount`,
+	 *  or when {@link selectionMarker} is unset) so the caller falls back to the
+	 *  classic cursor prefix. Radio fills on the cursor row; checkbox reflects
+	 *  the per-row checked state, with the cursor row drawn in accent. */
+	#renderMarkerPrefix(index: number, isSelected: boolean, isDisabled: boolean): string | undefined {
+		if (this.#selectionMarker === undefined || index >= this.#markableCount) return undefined;
+		if (this.#selectionMarker === "radio") {
+			const glyph = isSelected ? theme.radio.selected : theme.radio.unselected;
+			const color = isDisabled ? "dim" : isSelected ? "accent" : "dim";
+			return theme.fg(color, `${glyph} `);
+		}
+		const checked = this.#checkedIndices.has(index);
+		const glyph = checked ? theme.checkbox.checked : theme.checkbox.unchecked;
+		const color = isDisabled ? "dim" : isSelected ? "accent" : checked ? "success" : "dim";
+		return theme.fg(color, `${glyph} `);
+	}
+
+	/** Wrap an option description into indented rows, truncating to `maxRows`
+	 *  with an ellipsis. Pre-wrapping (rather than emitting one long line that the
+	 *  list re-wraps) lets compact mode bound how much of the highlighted option's
+	 *  detail is shown, so every option label stays on screen on short terminals. */
+	#wrapDescriptionRows(
+		description: string,
+		maxRows: number,
+		color: ThemeColor,
+		mdTheme: MarkdownTheme,
+		renderWidth = this.#lastRenderWidth,
+	): string[] {
+		if (maxRows <= 0) return [];
+		const indent = "    ";
+		const innerWidth = Math.max(1, (renderWidth ?? 80) - 2);
+		const bodyWidth = Math.max(1, innerWidth - indent.length);
+		const colored = renderInlineMarkdown(description, mdTheme, t => theme.fg(color, t));
+		const wrapped = wrapTextWithAnsi(colored, bodyWidth);
+		if (wrapped.length <= maxRows) return wrapped.map(row => indent + row);
+		const kept = wrapped.slice(0, maxRows);
+		kept[maxRows - 1] = truncateToWidth(wrapped.slice(maxRows - 1).join(" "), bodyWidth, Ellipsis.Unicode);
+		return kept.map(row => indent + row);
+	}
+
 	#renderedLineRowCount(line: string, renderWidth: number): number {
 		const normalized = replaceTabs(line);
 		if (this.#outlinedList) {
@@ -309,10 +383,11 @@ export class HookSelectorComponent extends Container {
 		renderWidth: number | undefined,
 		isSelected: boolean,
 		mdTheme: MarkdownTheme,
+		descRows: number | "full",
 	): number {
-		if (renderWidth === undefined) return option.description ? 2 : 1;
+		if (renderWidth === undefined) return option.description && descRows !== 0 ? 2 : 1;
 		let rows = 0;
-		for (const line of this.#renderOptionLines(option, isSelected, false, mdTheme)) {
+		for (const line of this.#renderOptionLines(option, isSelected, false, mdTheme, descRows, renderWidth)) {
 			rows += this.#renderedLineRowCount(line, renderWidth);
 		}
 		return rows;
@@ -322,7 +397,7 @@ export class HookSelectorComponent extends Container {
 		const themeForRows = mdTheme ?? getMarkdownTheme();
 		let rows = 0;
 		for (const option of options) {
-			rows += this.#optionRowCount(option, renderWidth, false, themeForRows);
+			rows += this.#optionRowCount(option, renderWidth, false, themeForRows, "full");
 		}
 		return rows;
 	}
@@ -331,19 +406,37 @@ export class HookSelectorComponent extends Container {
 		total: number,
 		renderWidth?: number,
 		mdTheme: MarkdownTheme = getMarkdownTheme(),
+		compact = false,
 	): { startIndex: number; endIndex: number } {
 		if (total === 0) return { startIndex: 0, endIndex: 0 };
 
+		// In compact mode every option contributes only its label rows; the
+		// highlighted option's description is layered on afterwards (see
+		// #updateList), so the window is sized to keep as many labels visible as
+		// possible rather than letting one long description swallow the budget.
+		const descMode: number | "full" = compact ? 0 : "full";
 		const rowBudget = Math.max(1, this.#maxVisible);
 		const selectedIndex = Math.max(0, Math.min(this.#selectedIndex, total - 1));
 		let startIndex = selectedIndex;
 		let endIndex = selectedIndex + 1;
-		let rows = this.#optionRowCount(this.#filteredOptions[selectedIndex]!.option, renderWidth, true, mdTheme);
+		let rows = this.#optionRowCount(
+			this.#filteredOptions[selectedIndex]!.option,
+			renderWidth,
+			true,
+			mdTheme,
+			descMode,
+		);
 		let beforeRows = 0;
 		const targetBeforeRows = Math.max(0, Math.floor((rowBudget - rows) / 2));
 
 		while (startIndex > 0) {
-			const cost = this.#optionRowCount(this.#filteredOptions[startIndex - 1]!.option, renderWidth, false, mdTheme);
+			const cost = this.#optionRowCount(
+				this.#filteredOptions[startIndex - 1]!.option,
+				renderWidth,
+				false,
+				mdTheme,
+				descMode,
+			);
 			if (beforeRows + cost > targetBeforeRows || rows + cost > rowBudget) break;
 			startIndex--;
 			beforeRows += cost;
@@ -351,14 +444,26 @@ export class HookSelectorComponent extends Container {
 		}
 
 		while (endIndex < total) {
-			const cost = this.#optionRowCount(this.#filteredOptions[endIndex]!.option, renderWidth, false, mdTheme);
+			const cost = this.#optionRowCount(
+				this.#filteredOptions[endIndex]!.option,
+				renderWidth,
+				false,
+				mdTheme,
+				descMode,
+			);
 			if (rows + cost > rowBudget) break;
 			endIndex++;
 			rows += cost;
 		}
 
 		while (startIndex > 0) {
-			const cost = this.#optionRowCount(this.#filteredOptions[startIndex - 1]!.option, renderWidth, false, mdTheme);
+			const cost = this.#optionRowCount(
+				this.#filteredOptions[startIndex - 1]!.option,
+				renderWidth,
+				false,
+				mdTheme,
+				descMode,
+			);
 			if (rows + cost > rowBudget) break;
 			startIndex--;
 			rows += cost;
@@ -371,13 +476,43 @@ export class HookSelectorComponent extends Container {
 		const lines: string[] = [];
 		const total = this.#filteredOptions.length;
 		const mdTheme = getMarkdownTheme();
-		const { startIndex, endIndex } = this.#getVisibleOptionRange(total, renderWidth, mdTheme);
+		// Compact mode kicks in exactly when the fully-expanded list (all
+		// descriptions) would overflow the row budget — the same condition that
+		// enables search. There we collapse every option to its label and show
+		// only the highlighted option's description, so the whole menu stays
+		// visible on short terminals instead of collapsing to a single entry.
+		const compact = this.#isSearchEnabled(renderWidth, mdTheme);
+		const { startIndex, endIndex } = this.#getVisibleOptionRange(total, renderWidth, mdTheme, compact);
+
+		let selectedDescRows = 0;
+		if (compact && renderWidth !== undefined) {
+			let labelRows = 0;
+			for (let i = startIndex; i < endIndex; i++) {
+				const filtered = this.#filteredOptions[i];
+				if (filtered === undefined) continue;
+				labelRows += this.#optionRowCount(filtered.option, renderWidth, i === this.#selectedIndex, mdTheme, 0);
+			}
+			// Reserve one row for the status line; give the remainder to the
+			// highlighted option's description.
+			selectedDescRows = Math.max(0, Math.max(1, this.#maxVisible) - labelRows - 1);
+		}
 
 		for (let i = startIndex; i < endIndex; i++) {
 			const filtered = this.#filteredOptions[i];
 			if (filtered === undefined) continue;
 			const isSelected = i === this.#selectedIndex;
-			lines.push(...this.#renderOptionLines(filtered.option, isSelected, this.#isDisabled(filtered.index), mdTheme));
+			const descMode: number | "full" = compact ? (isSelected ? selectedDescRows : 0) : "full";
+			lines.push(
+				...this.#renderOptionLines(
+					filtered.option,
+					isSelected,
+					this.#isDisabled(filtered.index),
+					mdTheme,
+					descMode,
+					renderWidth,
+					filtered.index,
+				),
+			);
 		}
 
 		if (total === 0) {

package/src/modes/components/session-selector.ts

@@ -14,11 +14,34 @@ import {
 import { formatBytes } from "@oh-my-pi/pi-utils";
 import { theme } from "../../modes/theme/theme";
 import { matchesAppInterrupt, matchesSelectDown, matchesSelectUp } from "../../modes/utils/keybinding-matchers";
-import type { SessionInfo } from "../../session/session-manager";
+import type { SessionInfo, SessionStatus } from "../../session/session-manager";
 import { shortenPath } from "../../tools/render-utils";
 import { DynamicBorder } from "./dynamic-border";
 import { HookSelectorComponent } from "./hook-selector";
 
+/**
+ * Themed glyph + colored label for a session's lifecycle status, or `undefined`
+ * when there is nothing useful to show (`unknown`/unset) so the metadata line
+ * stays uncluttered. The glyph resolves through the active symbol preset
+ * (nerdfont / unicode / ascii) via `theme.status.*`.
+ */
+function formatSessionStatus(status: SessionStatus | undefined): string | undefined {
+	switch (status) {
+		case "complete":
+			return theme.fg("success", `${theme.status.success} done`);
+		case "interrupted":
+			return theme.fg("warning", `${theme.status.warning} interrupted`);
+		case "aborted":
+			return theme.fg("muted", `${theme.status.aborted} aborted`);
+		case "error":
+			return theme.fg("error", `${theme.status.error} error`);
+		case "pending":
+			return theme.fg("accent", `${theme.status.pending} pending`);
+		default:
+			return undefined;
+	}
+}
+
 /** Returns the IDs of sessions whose recorded prompts match a query, best first. */
 export type SessionHistoryMatcher = (query: string) => string[];
 
@@ -227,13 +250,21 @@ class SessionList implements Component {
 				lines.push(messageLine);
 			}
 
-			// Metadata line: date + file size (+ project dir in all-projects scope)
+			// Metadata line: date + file size + lifecycle status (+ project dir in
+			// all-projects scope). The status segment carries its own color, so each
+			// segment is dimmed individually rather than wrapping the whole line.
+			const dim = (s: string) => theme.fg("dim", s);
+			const dot = dim(theme.sep.dot);
 			const modified = formatDate(session.modified);
-			let metadata = `  ${modified} ${theme.sep.dot} ${formatBytes(session.size)}`;
+			let metadata = `  ${dim(modified)} ${dot} ${dim(formatBytes(session.size))}`;
+			const status = formatSessionStatus(session.status);
+			if (status) {
+				metadata += ` ${dot} ${status}`;
+			}
 			if (this.#showCwd && session.cwd) {
-				metadata += ` ${theme.sep.dot} ${shortenPath(session.cwd)}`;
+				metadata += ` ${dot} ${dim(shortenPath(session.cwd))}`;
 			}
-			const metadataLine = theme.fg("dim", truncateToWidth(metadata, width));
+			const metadataLine = truncateToWidth(metadata, width);
 
 			lines.push(metadataLine);
 			lines.push(""); // Blank line between sessions

package/src/modes/components/status-line/segments.ts

@@ -485,7 +485,8 @@ const sessionNameSegment: StatusLineSegment = {
 		const name = sessionManager?.getSessionName();
 		if (!name) return { content: "", visible: false };
 
-		const ansi = getSessionAccentAnsi(getSessionAccentHex(name)) ?? theme.getFgAnsi("accent");
+		const ansi =
+			getSessionAccentAnsi(getSessionAccentHex(name, theme.accentSurfaceLuminance)) ?? theme.getFgAnsi("accent");
 		return { content: `${ansi}${sanitizeStatusText(name)}\x1b[39m`, visible: true };
 	},
 };

package/src/modes/components/status-line.ts

@@ -764,7 +764,7 @@ export class StatusLineComponent implements Component {
 		const gapWidth = Math.max(1, topFillWidth - leftWidth - rightWidth);
 		const sessionName =
 			effectiveSettings.sessionAccent !== false ? this.session.sessionManager?.getSessionName() : undefined;
-		const accentHex = sessionName ? getSessionAccentHex(sessionName) : undefined;
+		const accentHex = sessionName ? getSessionAccentHex(sessionName, theme.accentSurfaceLuminance) : undefined;
 		const gapColor = getSessionAccentAnsi(accentHex) ?? theme.getFgAnsi("border");
 		const gapFill = `${gapColor}${theme.boxRound.horizontal.repeat(gapWidth)}\x1b[39m`;
 		return leftGroup + gapFill + rightGroup;

package/src/modes/components/tips.txt

@@ -5,7 +5,7 @@ Find out which model you emotionally abuse the most with `omp stats`
 Try task isolation to create CoW worktrees
 Your LLM can call an LLM using `llm(x...)`. Have a big batch of tasks? Ask clanker to use it!
 Spaghetti code? Try complaining with /omfg
-Did you know? Each kitty/tmux split keeps its own session — `omp -c` resumes the right one
+Did you know? Each kitty/tmux/cmux split keeps its own session — `omp -c` resumes the right one
 Drop the word `ultrathink` in your message for harder multi-step reasoning — watch it glow rainbow as you type
 Say `orchestrate` in your message to drive a multi-phase task with parallel subagents — watch it glow as you type
 Say `workflow` in your message to drive the task with parallel subagents in eval — watch it glow as you type

package/src/modes/components/todo-reminder.ts

@@ -1,6 +1,6 @@
 import { Box, Container, Spacer, Text } from "@oh-my-pi/pi-tui";
 import { theme } from "../../modes/theme/theme";
-import type { TodoItem } from "../../tools/todo-write";
+import type { TodoItem } from "../../tools/todo";
 
 /**
  * Component that renders a todo completion reminder notification.

package/src/modes/components/tool-execution.ts

@@ -32,7 +32,7 @@ import {
 } from "../../tools/json-tree";
 import { formatExpandHint, replaceTabs, resolveImageOptions, truncateToWidth } from "../../tools/render-utils";
 import { toolRenderers } from "../../tools/renderers";
-import { TODO_WRITE_STRIKE_TOTAL_FRAMES } from "../../tools/todo-write";
+import { TODO_STRIKE_TOTAL_FRAMES } from "../../tools/todo";
 import { renderStatusLine } from "../../tui";
 import { sanitizeWithOptionalSixelPassthrough } from "../../utils/sixel";
 import { renderDiff } from "./diff";
@@ -149,6 +149,10 @@ const SPINNER_RENDER_INTERVAL_MS = 16;
  * 60fps render cadence (mirrors `Loader`). */
 const SPINNER_GLYPH_ADVANCE_MS = 80;
 
+// Stable per-instance counter so each tool execution's inline images get a
+// graphics id that survives child re-creation (the image budget keys off it).
+let toolExecutionInstanceSeq = 0;
+
 /**
  * Component that renders a tool call with its result (updateable)
  */
@@ -158,6 +162,7 @@ export class ToolExecutionComponent extends Container {
 	#multiFileBoxes: (Box | Spacer)[] = []; // Extra boxes for multi-file edit results
 	#imageComponents: Image[] = [];
 	#imageSpacers: Spacer[] = [];
+	readonly #instanceId = ++toolExecutionInstanceSeq;
 	#toolName: string;
 	#toolLabel: string;
 	#args: any;
@@ -447,7 +452,7 @@ export class ToolExecutionComponent extends Container {
 	}
 
 	#updateTodoStrikeAnimation(): void {
-		if (this.#toolName !== "todo_write" || this.#isPartial || this.#result?.isError) {
+		if (this.#toolName !== "todo" || this.#isPartial || this.#result?.isError) {
 			this.#stopTodoStrikeAnimation();
 			return;
 		}
@@ -462,7 +467,7 @@ export class ToolExecutionComponent extends Container {
 		this.#renderState.spinnerFrame = 0;
 		this.#todoStrikeInterval = setInterval(() => {
 			const nextFrame = (this.#spinnerFrame ?? 0) + 1;
-			if (nextFrame > TODO_WRITE_STRIKE_TOTAL_FRAMES) {
+			if (nextFrame > TODO_STRIKE_TOTAL_FRAMES) {
 				this.#stopTodoStrikeAnimation();
 			} else {
 				this.#spinnerFrame = nextFrame;
@@ -754,7 +759,7 @@ export class ToolExecutionComponent extends Container {
 						imageData,
 						imageMimeType,
 						{ fallbackColor: (s: string) => theme.fg("toolOutput", s) },
-						resolveImageOptions(),
+						{ ...resolveImageOptions(), budget: this.#ui.imageBudget, imageKey: `te${this.#instanceId}:${i}` },
 					);
 					this.#imageComponents.push(imageComponent);
 					this.addChild(imageComponent);