@oh-my-pi/pi-coding-agent 16.1.13 → 16.1.15

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

@@ -0,0 +1,129 @@
+/**
+ * Shared scaffolding for the TUI selector/list/dashboard components: viewport
+ * windowing, scrollbar-aware row widths, ScrollView rendering, selection
+ * clamping, search-character classification, tab-cycling keys, and full-screen
+ * padding. Behaviour is identical to the per-component copies these helpers
+ * replace.
+ */
+import { extractPrintableText, matchesKey, ScrollView } from "@oh-my-pi/pi-tui";
+import { theme } from "../theme/theme";
+
+/**
+ * Render `rows` through a {@link ScrollView} with the shared list theme (muted
+ * track / accent thumb) and an "auto" scrollbar, positioned at `scrollOffset`.
+ * Returns the rendered lines for the caller to append to its output.
+ */
+export function renderScrollableList(
+	rows: readonly string[],
+	options: { width: number; totalRows: number; scrollOffset: number },
+): readonly string[] {
+	const sv = new ScrollView(rows, {
+		height: rows.length,
+		scrollbar: "auto",
+		totalRows: options.totalRows,
+		theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
+	});
+	sv.setScrollOffset(options.scrollOffset);
+	return sv.render(options.width);
+}
+
+/**
+ * Center a viewport window of `maxVisible` rows on `selectedIndex` within a
+ * list of `total` rows, clamped to valid bounds. Used by the selection-centered
+ * list panes (history search, tree selector).
+ */
+export function centeredWindow(
+	selectedIndex: number,
+	total: number,
+	maxVisible: number,
+): { startIndex: number; endIndex: number } {
+	const startIndex = Math.max(0, Math.min(selectedIndex - Math.floor(maxVisible / 2), total - maxVisible));
+	const endIndex = Math.min(startIndex + maxVisible, total);
+	return { startIndex, endIndex };
+}
+
+/**
+ * Width available for row content, reserving the rightmost column for the
+ * scrollbar when the list overflows its visible window.
+ */
+export function contentRowWidth(width: number, total: number, maxVisible: number): number {
+	const overflow = total > maxVisible;
+	return Math.max(0, width - (overflow ? 1 : 0));
+}
+
+/**
+ * Clamp `selectedIndex` into `[0, total)` and nudge `scrollOffset` so the
+ * selection stays within the visible window of `maxVisible` rows. Returns the
+ * adjusted pair; on an empty list both reset to 0.
+ */
+export function clampSelection(
+	selectedIndex: number,
+	scrollOffset: number,
+	total: number,
+	maxVisible: number,
+): { selectedIndex: number; scrollOffset: number } {
+	if (total === 0) {
+		return { selectedIndex: 0, scrollOffset: 0 };
+	}
+
+	const selected = Math.max(0, Math.min(selectedIndex, total - 1));
+
+	let scroll = scrollOffset;
+	if (selected < scroll) {
+		scroll = selected;
+	} else if (selected >= scroll + maxVisible) {
+		scroll = selected - maxVisible + 1;
+	}
+
+	return { selectedIndex: selected, scrollOffset: scroll };
+}
+
+/**
+ * Classify a key event for search-query text entry. Returns the single
+ * printable character to append to the query, or `null` when the key is not a
+ * searchable character: non-printable, multi-byte, or a reserved `j`/`k`
+ * navigation key.
+ */
+export function searchableChar(data: string): string | null {
+	const printableText = extractPrintableText(data);
+	if (printableText && printableText.length === 1) {
+		const printableCharCode = printableText.charCodeAt(0);
+		if (printableCharCode > 32 && printableCharCode < 127) {
+			if (printableText === "j" || printableText === "k") {
+				return null;
+			}
+			return printableText;
+		}
+	}
+	return null;
+}
+
+/**
+ * Handle the shared tab-cycling keys: Tab/Right advance to the next tab,
+ * Shift+Tab/Left to the previous. Invokes `switchTab` with the direction and
+ * returns true when the key was consumed.
+ */
+export function handleTabSwitchKey(data: string, switchTab: (direction: 1 | -1) => void): boolean {
+	if (matchesKey(data, "tab") || matchesKey(data, "right")) {
+		switchTab(1);
+		return true;
+	}
+	if (matchesKey(data, "shift+tab") || matchesKey(data, "left")) {
+		switchTab(-1);
+		return true;
+	}
+	return false;
+}
+
+/**
+ * Pad `lines` with blank rows up to `rows` so a full-screen overlay covers the
+ * viewport instead of letting the transcript peek through below it. Copies
+ * before padding — the source array may be component-owned and must not be
+ * mutated.
+ */
+export function padLinesToHeight(lines: readonly string[], rows: number): readonly string[] {
+	if (lines.length >= rows) return lines;
+	const padded = lines.slice();
+	while (padded.length < rows) padded.push("");
+	return padded;
+}

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

@@ -473,15 +473,17 @@ export class SettingsSelectorComponent implements Component {
 			return true;
 		}
 
-		if (event.wheel !== null) {
-			list?.handleWheel(event.wheel);
-			return true;
-		}
-
 		const tabLine = event.row - this.#tabRowStart;
 		const overTabs = tabLine >= 0 && tabLine < this.#tabRowCount;
 		const overContent = contentLine >= 0 && contentLine < this.#contentRowCount;
 
+		if (event.wheel !== null) {
+			if (overContent) {
+				list?.handleWheelAt(event.wheel, contentLine, innerCol);
+			}
+			return true;
+		}
+
 		if (event.motion) {
 			const hovered = overTabs ? this.#tabBar.tabAt(tabLine, innerCol) : undefined;
 			this.#tabBar.setHoverTab(hovered && !hovered.muted ? hovered.id : null);

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

@@ -727,10 +727,12 @@ export class StatusLineComponent implements Component {
 
 		let contextWindow = state.model?.contextWindow ?? this.session.model?.contextWindow ?? 0;
 		let contextPercent: number | null = 0;
+		let contextTokens = 0;
 		if (includeContext) {
 			const breakdown = this.getCachedContextBreakdown();
+			contextTokens = breakdown.usedTokens;
 			contextWindow = breakdown.contextWindow || contextWindow;
-			contextPercent = contextWindow > 0 ? (breakdown.usedTokens / contextWindow) * 100 : 0;
+			contextPercent = contextWindow > 0 ? (breakdown.usedTokens / contextWindow) * 100 : null;
 		}
 
 		// Collab guest: context comes from the host's state frames — the local
@@ -738,6 +740,7 @@ export class StatusLineComponent implements Component {
 		const collabState = this.#collabStatus?.stateOverride;
 		if (collabState?.contextUsage) {
 			contextWindow = collabState.contextUsage.contextWindow || contextWindow;
+			contextTokens = collabState.contextUsage.tokens ?? contextTokens;
 			contextPercent = collabState.contextUsage.percent ?? contextPercent;
 		}
 
@@ -756,6 +759,7 @@ export class StatusLineComponent implements Component {
 			collab: this.#collabStatus,
 			usageStats,
 			contextPercent,
+			contextTokens,
 			contextWindow,
 			autoCompactEnabled: this.#autoCompactEnabled,
 			subagentCount: this.#subagentCount,

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

@@ -56,10 +56,18 @@ export function getContextUsageLevel(contextPercent: number, contextWindow: numb
 }
 
 /**
- * Format context usage as `<percent>%/<window>` (e.g. `5.1%/1M`), matching the
- * status line's context gauge so subagent and footer renderers stay in sync.
+ * Format context usage as `<percent>%/<window>` when the model window is known.
+ * Unknown windows render as `<tokens>/?`, because `0.0%/0` suggests a real
+ * empty context instead of missing provider metadata.
  */
-export function formatContextUsage(contextPercent: number | null | undefined, contextWindow: number): string {
+export function formatContextUsage(
+	contextPercent: number | null | undefined,
+	contextWindow: number,
+	usedTokens?: number,
+): string {
+	if (!Number.isFinite(contextWindow) || contextWindow <= 0) {
+		return `${formatNumber(usedTokens ?? 0)}/?`;
+	}
 	const pct = contextPercent === null || contextPercent === undefined ? "?" : `${contextPercent.toFixed(1)}%`;
 	return `${pct}/${formatNumber(contextWindow)}`;
 }

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

@@ -375,7 +375,7 @@ const contextPctSegment: StatusLineSegment = {
 		const window = ctx.contextWindow;
 
 		const autoIcon = ctx.autoCompactEnabled && theme.icon.auto ? ` ${theme.icon.auto}` : "";
-		const text = `${formatContextUsage(pct, window)}${autoIcon}`;
+		const text = `${formatContextUsage(pct, window, ctx.contextTokens)}${autoIcon}`;
 
 		const color = getContextUsageThemeColor(getContextUsageLevel(pct ?? 0, window));
 		const content = withIcon(theme.icon.context, theme.fg(color, text));

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

@@ -73,6 +73,7 @@ export interface SegmentContext {
 	};
 	/** Context usage percent, or null when unknown (e.g. right after compaction). */
 	contextPercent: number | null;
+	contextTokens: number;
 	contextWindow: number;
 	autoCompactEnabled: boolean;
 	subagentCount: number;

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

@@ -6,7 +6,6 @@ import {
 	fuzzyMatch,
 	Input,
 	matchesKey,
-	ScrollView,
 	Spacer,
 	Text,
 	TruncatedText,
@@ -20,6 +19,7 @@ import { shortenPath } from "../../tools/render-utils";
 import { toPathList } from "../../tools/search";
 import { canonicalizeMessage } from "../../utils/thinking-display";
 import { DynamicBorder } from "./dynamic-border";
+import { centeredWindow, contentRowWidth, renderScrollableList } from "./selector-helpers";
 
 /** Gutter info: position (displayIndent where connector was) and whether to show │ */
 interface GutterInfo {
@@ -475,14 +475,11 @@ class TreeList implements Component {
 			return lines;
 		}
 
-		const startIndex = Math.max(
-			0,
-			Math.min(
-				this.#selectedIndex - Math.floor(this.maxVisibleLines / 2),
-				this.#filteredNodes.length - this.maxVisibleLines,
-			),
+		const { startIndex, endIndex } = centeredWindow(
+			this.#selectedIndex,
+			this.#filteredNodes.length,
+			this.maxVisibleLines,
 		);
-		const endIndex = Math.min(startIndex + this.maxVisibleLines, this.#filteredNodes.length);
 
 		// Cap the per-row gutter prefix so a content budget is always preserved.
 		// Each indent level renders as 3 cells; deep branching would otherwise eat the
@@ -494,8 +491,7 @@ class TreeList implements Component {
 		const contentReserve = Math.max(MIN_CONTENT_COLS, Math.floor(width / 2));
 		const maxIndentLevels = Math.max(1, Math.floor((width - contentReserve - OVERHEAD_COLS) / 3));
 
-		const overflow = this.#filteredNodes.length > this.maxVisibleLines;
-		const rowWidth = Math.max(0, width - (overflow ? 1 : 0));
+		const rowWidth = contentRowWidth(width, this.#filteredNodes.length, this.maxVisibleLines);
 		const rows: string[] = [];
 
 		for (let i = startIndex; i < endIndex; i++) {
@@ -584,14 +580,13 @@ class TreeList implements Component {
 			rows.push(truncateToWidth(line, rowWidth));
 		}
 
-		const sv = new ScrollView(rows, {
-			height: rows.length,
-			scrollbar: "auto",
-			totalRows: this.#filteredNodes.length,
-			theme: { track: t => theme.fg("muted", t), thumb: t => theme.fg("accent", t) },
-		});
-		sv.setScrollOffset(startIndex);
-		lines.push(...sv.render(width));
+		lines.push(
+			...renderScrollableList(rows, {
+				width,
+				totalRows: this.#filteredNodes.length,
+				scrollOffset: startIndex,
+			}),
+		);
 
 		const filterLabel = this.#getFilterLabel();
 		if (filterLabel) {

package/src/modes/controllers/command-controller.ts

@@ -217,6 +217,7 @@ export class CommandController {
 		try {
 			const result = await shareSession(this.ctx.session.sessionManager, {
 				serverUrl: this.ctx.settings.get("share.serverUrl"),
+				store: this.ctx.settings.get("share.store"),
 				state: this.ctx.session.state,
 				obfuscator: this.ctx.settings.get("share.redactSecrets") ? this.ctx.session.obfuscator : undefined,
 			});

package/src/modes/controllers/event-controller.ts

@@ -5,7 +5,7 @@ import { INTENT_FIELD } from "@oh-my-pi/pi-wire";
 import { extractTextContent } from "../../commit/utils";
 import { settings } from "../../config/settings";
 import { getFileSnapshotStore } from "../../edit/file-snapshot-store";
-import { AssistantMessageComponent } from "../../modes/components/assistant-message";
+import type { AssistantMessageComponent } from "../../modes/components/assistant-message";
 import { detectCacheInvalidation } from "../../modes/components/cache-invalidation-marker";
 import {
 	ReadToolGroupComponent,
@@ -25,6 +25,7 @@ import type { ResolveToolDetails } from "../../tools/resolve";
 import { vocalizer } from "../../tts/vocalizer";
 import { canonicalizeMessage } from "../../utils/thinking-display";
 import { interruptHint } from "../shared";
+import { createAssistantMessageComponent } from "../utils/interactive-context-helpers";
 import { StreamingRevealController } from "./streaming-reveal";
 import { ToolArgsRevealController } from "./tool-args-reveal";
 
@@ -332,14 +333,7 @@ export class EventController {
 			this.ctx.ui.requestRender();
 		} else if (event.message.role === "assistant") {
 			this.#lastVisibleBlockCount = 0;
-			this.ctx.streamingComponent = new AssistantMessageComponent(
-				undefined,
-				this.ctx.hideThinkingBlock,
-				() => this.ctx.ui.requestRender(),
-				this.ctx.viewSession.extensionRunner?.getAssistantThinkingRenderers(),
-				this.ctx.ui.imageBudget,
-				this.ctx.proseOnlyThinking,
-			);
+			this.ctx.streamingComponent = createAssistantMessageComponent(this.ctx);
 			this.ctx.streamingMessage = event.message;
 			this.ctx.chatContainer.addChild(this.ctx.streamingComponent);
 			this.#streamingReveal.begin(this.ctx.streamingComponent, this.ctx.streamingMessage);

package/src/modes/controllers/input-controller.ts

@@ -530,10 +530,7 @@ export class InputController {
 			// model continues the prior intent rather than second-guessing the interrupt.
 			if (text === "." || text === "c") {
 				if (this.ctx.onInputCallback) {
-					this.ctx.editor.setText("");
-					this.ctx.pendingImages = [];
-					this.ctx.pendingImageLinks = [];
-					this.ctx.editor.imageLinks = undefined;
+					this.ctx.editor.clearDraft();
 					this.ctx.onInputCallback({
 						text: manualContinuePrompt,
 						cancelled: false,
@@ -546,16 +543,14 @@ export class InputController {
 			}
 
 			const runner = this.ctx.session.extensionRunner;
-			let inputImages = this.ctx.pendingImages.length > 0 ? [...this.ctx.pendingImages] : undefined;
-			let inputImageLinks = this.ctx.pendingImageLinks.length > 0 ? [...this.ctx.pendingImageLinks] : undefined;
+			let inputImages = this.ctx.editor.pendingImages.length > 0 ? [...this.ctx.editor.pendingImages] : undefined;
+			let inputImageLinks =
+				this.ctx.editor.pendingImageLinks.length > 0 ? [...this.ctx.editor.pendingImageLinks] : undefined;
 
 			if (runner?.hasHandlers("input")) {
 				const result = await runner.emitInput(text, inputImages, "interactive");
 				if (result?.handled) {
-					this.ctx.editor.setText("");
-					this.ctx.pendingImages = [];
-					this.ctx.pendingImageLinks = [];
-					this.ctx.editor.imageLinks = undefined;
+					this.ctx.editor.clearDraft();
 					return;
 				}
 				if (result?.text !== undefined) {
@@ -603,12 +598,8 @@ export class InputController {
 					this.ctx.showStatus("This collab link is read-only — prompting is disabled");
 					return;
 				}
-				this.ctx.editor.addToHistory(text);
-				this.ctx.editor.setText("");
-				this.ctx.editor.imageLinks = undefined;
 				const images = inputImages && inputImages.length > 0 ? [...inputImages] : undefined;
-				this.ctx.pendingImages = [];
-				this.ctx.pendingImageLinks = [];
+				this.ctx.editor.clearDraft(text);
 				// No local render: the prompt comes back from the host as a
 				// collab-prompt event/entry and renders with the author badge.
 				this.ctx.collabGuest.sendPrompt(text, images);
@@ -680,8 +671,8 @@ export class InputController {
 				this.ctx.editor.setText("");
 				this.ctx.editor.imageLinks = undefined;
 				const images = inputImages && inputImages.length > 0 ? [...inputImages] : undefined;
-				this.ctx.pendingImages = [];
-				this.ctx.pendingImageLinks = [];
+				this.ctx.editor.pendingImages = [];
+				this.ctx.editor.pendingImageLinks = [];
 				// Record the signature so the queued message's eventual delivery
 				// (a user-role `message_start` event) leaves any draft the user has
 				// typed since queuing intact. Same protection as #783, applied to
@@ -744,8 +735,8 @@ export class InputController {
 				// Include any pending images from clipboard paste
 				this.ctx.editor.imageLinks = undefined;
 				const images = inputImages && inputImages.length > 0 ? [...inputImages] : undefined;
-				this.ctx.pendingImages = [];
-				this.ctx.pendingImageLinks = [];
+				this.ctx.editor.pendingImages = [];
+				this.ctx.editor.pendingImageLinks = [];
 
 				// Render user message immediately, then let session events catch up.
 				// Tag the submission as "steer": this is a normal Enter the controller
@@ -771,8 +762,8 @@ export class InputController {
 				// semantics instead of throwing AgentBusyError.
 				this.ctx.editor.imageLinks = undefined;
 				const images = inputImages && inputImages.length > 0 ? [...inputImages] : undefined;
-				this.ctx.pendingImages = [];
-				this.ctx.pendingImageLinks = [];
+				this.ctx.editor.pendingImages = [];
+				this.ctx.editor.pendingImageLinks = [];
 				try {
 					await this.ctx.withLocalSubmission(
 						text,
@@ -787,9 +778,11 @@ export class InputController {
 					// extension command).
 					this.ctx.editor.setText(text);
 					if (images && images.length > 0) {
-						this.ctx.pendingImages = [...images];
-						this.ctx.pendingImageLinks = inputImageLinks ? [...inputImageLinks] : images.map(() => undefined);
-						this.ctx.editor.imageLinks = this.ctx.pendingImageLinks;
+						this.ctx.editor.pendingImages = [...images];
+						this.ctx.editor.pendingImageLinks = inputImageLinks
+							? [...inputImageLinks]
+							: images.map(() => undefined);
+						this.ctx.editor.imageLinks = this.ctx.editor.pendingImageLinks;
 					}
 					this.ctx.showError(error instanceof Error ? error.message : String(error));
 				}
@@ -816,12 +809,8 @@ export class InputController {
 			this.ctx.showStatus("Commands run in the main session — press ←← to return first");
 			return; // editor text not cleared: Editor does not auto-clear on submit
 		}
-		const images = this.ctx.pendingImages.length > 0 ? [...this.ctx.pendingImages] : undefined;
-		this.ctx.editor.addToHistory(text);
-		this.ctx.editor.setText("");
-		this.ctx.editor.imageLinks = undefined;
-		this.ctx.pendingImages = [];
-		this.ctx.pendingImageLinks = [];
+		const images = this.ctx.editor.pendingImages.length > 0 ? [...this.ctx.editor.pendingImages] : undefined;
+		this.ctx.editor.clearDraft(text);
 		try {
 			// prompt() handles idle (new turn) and streaming (queues per streamingBehavior).
 			await this.ctx.withLocalSubmission(text, () => target.prompt(text, { streamingBehavior, images }), {
@@ -989,10 +978,7 @@ export class InputController {
 		}
 		const didRetry = await this.ctx.viewSession.retry();
 		if (didRetry) {
-			this.ctx.editor.setText("");
-			this.ctx.pendingImages = [];
-			this.ctx.pendingImageLinks = [];
-			this.ctx.editor.imageLinks = undefined;
+			this.ctx.editor.clearDraft();
 		} else {
 			this.ctx.showStatus("Nothing to retry");
 		}
@@ -1016,7 +1002,7 @@ export class InputController {
 		// the queued entry is later re-parsed into a skill invocation is a
 		// separate concern owned by the compaction-resume path.
 		if (this.ctx.session.isCompacting) {
-			const images = this.ctx.pendingImages.length > 0 ? [...this.ctx.pendingImages] : undefined;
+			const images = this.ctx.editor.pendingImages.length > 0 ? [...this.ctx.editor.pendingImages] : undefined;
 			this.ctx.queueCompactionMessage(text, "followUp", images);
 			return;
 		}
@@ -1040,14 +1026,10 @@ export class InputController {
 
 		// Forward any pending clipboard-pasted images alongside the queued text;
 		// otherwise the follow-up would drop the image (mirrors the Enter/steer path).
-		const images = this.ctx.pendingImages.length > 0 ? [...this.ctx.pendingImages] : undefined;
+		const images = this.ctx.editor.pendingImages.length > 0 ? [...this.ctx.editor.pendingImages] : undefined;
 
 		if (this.ctx.session.isStreaming) {
-			this.ctx.editor.addToHistory(text);
-			this.ctx.editor.setText("");
-			this.ctx.editor.imageLinks = undefined;
-			this.ctx.pendingImages = [];
-			this.ctx.pendingImageLinks = [];
+			this.ctx.editor.clearDraft(text);
 			await this.ctx.withLocalSubmission(
 				text,
 				() => this.ctx.session.prompt(text, { streamingBehavior: "followUp", images }),
@@ -1059,11 +1041,7 @@ export class InputController {
 		}
 
 		// Not streaming — just submit normally
-		this.ctx.editor.addToHistory(text);
-		this.ctx.editor.setText("");
-		this.ctx.editor.imageLinks = undefined;
-		this.ctx.pendingImages = [];
-		this.ctx.pendingImageLinks = [];
+		this.ctx.editor.clearDraft(text);
 		await this.ctx.withLocalSubmission(text, () => this.ctx.session.prompt(text, { images }), {
 			imageCount: images?.length ?? 0,
 		});
@@ -1108,7 +1086,7 @@ export class InputController {
 		let queuedText: string;
 		if (queuedImages.length > 0) {
 			const parts: string[] = [];
-			let imageOffset = this.ctx.pendingImages.length;
+			let imageOffset = this.ctx.editor.pendingImages.length;
 			for (const entry of allQueued) {
 				parts.push(shiftImageMarkers(entry.text, imageOffset));
 				if (entry.images && entry.images.length > 0) imageOffset += entry.images.length;
@@ -1124,9 +1102,9 @@ export class InputController {
 		// re-materialized lazily; the restored text already carries the
 		// renumbered `[Image #N, WxH]` markers).
 		if (queuedImages.length > 0) {
-			this.ctx.pendingImages.push(...queuedImages);
-			this.ctx.pendingImageLinks.push(...queuedImages.map(() => undefined));
-			this.ctx.editor.imageLinks = this.ctx.pendingImageLinks;
+			this.ctx.editor.pendingImages.push(...queuedImages);
+			this.ctx.editor.pendingImageLinks.push(...queuedImages.map(() => undefined));
+			this.ctx.editor.imageLinks = this.ctx.editor.pendingImageLinks;
 		}
 		this.ctx.updatePendingMessagesDisplay();
 		if (options?.abort) {
@@ -1148,14 +1126,14 @@ export class InputController {
 				this.ctx.sessionManager.putBlob.bind(this.ctx.sessionManager),
 			)
 		)?.[0];
-		this.ctx.pendingImages.push({
+		this.ctx.editor.pendingImages.push({
 			type: "image",
 			data: imageData.data,
 			mimeType: imageData.mimeType,
 		});
-		this.ctx.pendingImageLinks.push(imageLink);
-		this.ctx.editor.imageLinks = this.ctx.pendingImageLinks;
-		const imageNum = this.ctx.pendingImages.length;
+		this.ctx.editor.pendingImageLinks.push(imageLink);
+		this.ctx.editor.imageLinks = this.ctx.editor.pendingImageLinks;
+		const imageNum = this.ctx.editor.pendingImages.length;
 		const dims = await this.#imageDimensions(imageData);
 		const label = dims ? `[Image #${imageNum}, ${dims.width}x${dims.height}]` : `[Image #${imageNum}]`;
 		this.ctx.editor.insertText(`${label} `);

package/src/modes/interactive-mode.ts

@@ -408,8 +408,6 @@ export class InteractiveMode implements InteractiveModeContext {
 	todoPhases: TodoPhase[] = [];
 	hideThinkingBlock = false;
 	proseOnlyThinking = true;
-	pendingImages: ImageContent[] = [];
-	pendingImageLinks: (string | undefined)[] = [];
 	compactionQueuedMessages: CompactionQueuedMessage[] = [];
 	pendingTools = new Map<string, ToolExecutionHandle>();
 	pendingBashComponents: BashExecutionComponent[] = [];
@@ -1094,7 +1092,7 @@ export class InteractiveMode implements InteractiveModeContext {
 		if (this.#goalSuppressNextContinuation) return;
 		if (this.#pendingSubmittedInput) return;
 		if (this.editor.getText().trim().length > 0) return;
-		if ((this.pendingImages?.length ?? 0) > 0) return;
+		if ((this.editor.pendingImages?.length ?? 0) > 0) return;
 		const state = this.session.getGoalModeState();
 		if (!state?.enabled || state.goal.status !== "active") return;
 		const prompt = this.session.goalRuntime.buildContinuationPrompt();
@@ -1113,7 +1111,7 @@ export class InteractiveMode implements InteractiveModeContext {
 			if (this.#isAutoSubmitBlocked()) return;
 			if (this.#pendingSubmittedInput) return;
 			if (this.editor.getText().trim().length > 0) return;
-			if ((this.pendingImages?.length ?? 0) > 0) return;
+			if ((this.editor.pendingImages?.length ?? 0) > 0) return;
 			const latestState = this.session.getGoalModeState();
 			if (!latestState?.enabled || latestState.goal.status !== "active") return;
 			this.#goalContinuationTurnInFlight = true;
@@ -1338,9 +1336,9 @@ export class InteractiveMode implements InteractiveModeContext {
 			this.#stopLoadingAnimation(true);
 		}
 		if (!submission.customType) {
-			this.pendingImages = submission.images ? [...submission.images] : [];
-			this.pendingImageLinks = submission.imageLinks ? [...submission.imageLinks] : [];
-			this.editor.imageLinks = this.pendingImageLinks;
+			this.editor.pendingImages = submission.images ? [...submission.images] : [];
+			this.editor.pendingImageLinks = submission.imageLinks ? [...submission.imageLinks] : [];
+			this.editor.imageLinks = this.editor.pendingImageLinks;
 			this.rebuildChatFromMessages();
 			this.editor.setText(submission.text);
 		}

package/src/modes/theme/theme.ts

@@ -169,6 +169,7 @@ export type SymbolKey =
 	| "lang.cpp"
 	| "lang.csharp"
 	| "lang.ruby"
+	| "lang.julia"
 	| "lang.php"
 	| "lang.swift"
 	| "lang.kotlin"
@@ -369,6 +370,7 @@ const UNICODE_SYMBOLS: SymbolMap = {
 	"lang.cpp": "➕",
 	"lang.csharp": "♯",
 	"lang.ruby": "💎",
+	"lang.julia": "Ⓙ",
 	"lang.php": "🐘",
 	"lang.swift": "🕊",
 	"lang.kotlin": "🅺",
@@ -673,6 +675,7 @@ const NERD_SYMBOLS: SymbolMap = {
 	"lang.cpp": "\u{E61D}",
 	"lang.csharp": "\u{E7BC}",
 	"lang.ruby": "\u{E791}",
+	"lang.julia": "\u{E624}",
 	"lang.php": "\u{E608}",
 	"lang.swift": "\u{E755}",
 	"lang.kotlin": "\u{E634}",
@@ -870,6 +873,7 @@ const ASCII_SYMBOLS: SymbolMap = {
 	"lang.cpp": "cpp",
 	"lang.csharp": "cs",
 	"lang.ruby": "rb",
+	"lang.julia": "jl",
 	"lang.php": "php",
 	"lang.swift": "swift",
 	"lang.kotlin": "kt",
@@ -1335,6 +1339,8 @@ const langMap: Record<string, SymbolKey> = {
 	cs: "lang.csharp",
 	ruby: "lang.ruby",
 	rb: "lang.ruby",
+	julia: "lang.julia",
+	jl: "lang.julia",
 	php: "lang.php",
 	swift: "lang.swift",
 	kotlin: "lang.kotlin",
@@ -1406,6 +1412,20 @@ const langMap: Record<string, SymbolKey> = {
 	bin: "lang.binary",
 };
 
+/**
+ * Brand colors for language icons, keyed by the resolved `lang.*` SymbolKey.
+ * Used by {@link Theme.getLangIconStyled} so eval-kernel cell headers tint each
+ * language with its recognizable hue (JS yellow, Ruby red, Julia purple, Python
+ * blue) instead of a flat muted gray. Applied as truecolor/256 per the active
+ * color mode; languages without an entry fall back to the muted theme color.
+ */
+const LANG_BRAND_COLORS: Partial<Record<SymbolKey, string>> = {
+	"lang.javascript": "#f7df1e",
+	"lang.python": "#3776ab",
+	"lang.ruby": "#cc342d",
+	"lang.julia": "#9558b2",
+};
+
 /**
  * Resolve a theme color value (hex string or 256-color index) to a CSS hex string.
  * Empty string represents the default terminal color.
@@ -1874,6 +1894,21 @@ export class Theme {
 		const key = langMap[normalized];
 		return key ? this.#symbols[key] : this.#symbols["lang.default"];
 	}
+
+	/**
+	 * Language icon tinted with the language's brand color (see
+	 * {@link LANG_BRAND_COLORS}). Falls back to the muted theme color for
+	 * languages without a brand entry, and returns the bare (possibly empty)
+	 * icon when the active symbol preset has none.
+	 */
+	getLangIconStyled(lang: string | undefined): string {
+		const icon = this.getLangIcon(lang);
+		if (!icon) return icon;
+		const key = lang ? langMap[lang.toLowerCase()] : undefined;
+		const hex = key ? LANG_BRAND_COLORS[key] : undefined;
+		if (!hex) return this.fg("muted", icon);
+		return `${colorToAnsi(hex, this.mode)}${icon}\x1b[39m`;
+	}
 }
 
 // ============================================================================

package/src/modes/types.ts

@@ -160,8 +160,6 @@ export interface InteractiveModeContext {
 	planModePlanFilePath?: string;
 	hideThinkingBlock: boolean;
 	proseOnlyThinking: boolean;
-	pendingImages: ImageContent[];
-	pendingImageLinks: (string | undefined)[];
 	compactionQueuedMessages: CompactionQueuedMessage[];
 	pendingTools: Map<string, ToolExecutionHandle>;
 	pendingBashComponents: BashExecutionComponent[];