@nghyane/arcane 0.1.13 → 0.1.15

package/src/modes/components/tool-image-display.ts

@@ -0,0 +1,107 @@
+import {
+	type Component,
+	getImageDimensions,
+	Image,
+	ImageProtocol,
+	imageFallback,
+	Spacer,
+	TERMINAL,
+} from "@nghyane/arcane-tui";
+import { convertToPng } from "../../utils/image-convert";
+
+type ImageBlock = { data?: string; mimeType?: string };
+
+/**
+ * Manages image rendering for tool results.
+ * Handles Kitty PNG conversion, spacers, and fallback text.
+ */
+export class ToolImageDisplay {
+	#images: Image[] = [];
+	#spacers: Spacer[] = [];
+	#convertedImages = new Map<number, { data: string; mimeType: string }>();
+	#parent: { addChild(c: Component): void; removeChild(c: Component): void };
+	#onUpdate: () => void;
+
+	constructor(parent: { addChild(c: Component): void; removeChild(c: Component): void }, onUpdate: () => void) {
+		this.#parent = parent;
+		this.#onUpdate = onUpdate;
+	}
+
+	/**
+	 * Trigger async PNG conversion for Kitty protocol.
+	 * Call when result is first received or updated.
+	 */
+	convertForKitty(imageBlocks: ImageBlock[]): void {
+		if (TERMINAL.imageProtocol !== ImageProtocol.Kitty) return;
+
+		for (let i = 0; i < imageBlocks.length; i++) {
+			const img = imageBlocks[i];
+			if (!img.data || !img.mimeType) continue;
+			if (img.mimeType === "image/png") continue;
+			if (this.#convertedImages.has(i)) continue;
+
+			const index = i;
+			convertToPng(img.data, img.mimeType)
+				.then(converted => {
+					if (converted) {
+						this.#convertedImages.set(index, converted);
+						this.#onUpdate();
+					}
+				})
+				.catch(() => {});
+		}
+	}
+
+	/**
+	 * Update displayed images. Removes old components, adds new ones.
+	 */
+	update(imageBlocks: ImageBlock[], showImages: boolean, themeFg: (s: string) => string): void {
+		// Remove old
+		for (const img of this.#images) this.#parent.removeChild(img);
+		for (const spacer of this.#spacers) this.#parent.removeChild(spacer);
+		this.#images = [];
+		this.#spacers = [];
+
+		for (let i = 0; i < imageBlocks.length; i++) {
+			const img = imageBlocks[i];
+			if (!TERMINAL.imageProtocol || !showImages || !img.data || !img.mimeType) continue;
+
+			const converted = this.#convertedImages.get(i);
+			const imageData = converted?.data ?? img.data;
+			const imageMimeType = converted?.mimeType ?? img.mimeType;
+
+			// Kitty requires PNG — skip unconverted non-PNG
+			if (TERMINAL.imageProtocol === ImageProtocol.Kitty && imageMimeType !== "image/png") {
+				continue;
+			}
+
+			const spacer = new Spacer(1);
+			this.#parent.addChild(spacer);
+			this.#spacers.push(spacer);
+
+			const imageComponent = new Image(
+				imageData,
+				imageMimeType,
+				{
+					fallbackColor: (s: string) => themeFg(s),
+				},
+				{ maxWidthCells: 60 },
+			);
+			this.#images.push(imageComponent);
+			this.#parent.addChild(imageComponent);
+		}
+	}
+
+	/**
+	 * Get text fallback for images when terminal doesn't support image display.
+	 */
+	static fallbackText(imageBlocks: ImageBlock[]): string {
+		return imageBlocks
+			.filter((img): img is ImageBlock & { mimeType: string } => !!img.mimeType)
+			.map(img => {
+				const dims = img.data ? (getImageDimensions(img.data, img.mimeType) ?? undefined) : undefined;
+				return imageFallback(img.mimeType, dims);
+			})
+			.join("\n");
+	}
+}

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

@@ -8,9 +8,9 @@ import {
 	TruncatedText,
 	truncateToWidth,
 } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
 import type { SessionTreeNode } from "../../session/session-manager";
-import { shortenPath } from "../../tools/render-utils";
+import { theme } from "../../theme/theme";
+import { shortenPath } from "../../ui/render-utils";
 import { DynamicBorder } from "./dynamic-border";
 
 /** Gutter info: position (displayIndent where connector was) and whether to show │ */

package/src/modes/components/ttsr-notification.ts

@@ -1,13 +1,13 @@
-import { Box, Container, Spacer, Text } from "@nghyane/arcane-tui";
+import { Container, LeftBorderBox, Spacer, Text } from "@nghyane/arcane-tui";
 import type { Rule } from "../../capability/rule";
-import { theme } from "../../modes/theme/theme";
+import { theme } from "../../theme/theme";
 
 /**
  * Component that renders a TTSR (Time Traveling Stream Rules) notification.
  * Shows when a rule violation is detected and the stream is being rewound.
  */
 export class TtsrNotificationComponent extends Container {
-	#box: Box;
+	#box: LeftBorderBox;
 	#expanded = false;
 
 	constructor(private readonly rules: Rule[]) {
@@ -15,8 +15,7 @@ export class TtsrNotificationComponent extends Container {
 
 		this.addChild(new Spacer(1));
 
-		// Use inverse warning color for yellow background effect
-		this.#box = new Box(1, 1, t => theme.inverse(theme.fg("warning", t)));
+		this.#box = new LeftBorderBox(1, 1, s => theme.fg("warning", s));
 		this.addChild(this.#box);
 
 		this.#rebuild();
@@ -61,20 +60,8 @@ export class TtsrNotificationComponent extends Container {
 					}
 				}
 
-				// Use italic for subtle distinction (fg colors conflict with inverse)
 				this.#box.addChild(new Text(theme.italic(displayText), 0, 0));
 			}
 		}
-
-		// Show expand hint if collapsed and there's more content
-		if (!this.#expanded) {
-			const hasMoreContent = this.rules.some(r => {
-				const desc = r.description || r.content;
-				return desc && desc.split("\n").length > 2;
-			});
-			if (hasMoreContent) {
-				this.#box.addChild(new Text(theme.italic(" (ctrl+o to expand)"), 0, 0));
-			}
-		}
 	}
 }

package/src/modes/components/user-message-selector.ts

@@ -1,5 +1,5 @@
 import { type Component, Container, matchesKey, Spacer, Text, truncateToWidth } from "@nghyane/arcane-tui";
-import { theme } from "../../modes/theme/theme";
+import { theme } from "../../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
 
 interface UserMessageItem {

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

@@ -1,5 +1,5 @@
-import { Container, Markdown, Spacer } from "@nghyane/arcane-tui";
-import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import { Container, LeftBorderBox, Markdown, Spacer } from "@nghyane/arcane-tui";
+import { getMarkdownTheme, theme } from "../../theme/theme";
 
 /**
  * Component that renders a user message
@@ -7,18 +7,17 @@ import { getMarkdownTheme, theme } from "../../modes/theme/theme";
 export class UserMessageComponent extends Container {
 	constructor(text: string, synthetic = false) {
 		super();
-		const bgColor = (value: string) => theme.bg("userMessageBg", value);
-		const leftBorder = theme.fg("accent", "▎");
 		const color = synthetic
 			? (value: string) => theme.fg("dim", value)
 			: (value: string) => theme.fg("userMessageText", value);
 		this.addChild(new Spacer(1));
-		this.addChild(
-			new Markdown(text, 1, 1, getMarkdownTheme(), {
-				bgColor,
-				color,
-				leftBorder,
-			}),
+		const borderBox = new LeftBorderBox(
+			2,
+			1,
+			s => theme.fg("accent", s),
+			t => theme.bg("userMessageBg", t),
 		);
+		borderBox.addChild(new Markdown(text, 0, 0, getMarkdownTheme(), { color }));
+		this.addChild(borderBox);
 	}
 }

package/src/modes/components/welcome.ts

@@ -1,6 +1,6 @@
 import { type Component, padding, truncateToWidth, visibleWidth } from "@nghyane/arcane-tui";
 import { APP_NAME } from "@nghyane/arcane-utils/dirs";
-import { theme } from "../../modes/theme/theme";
+import { theme } from "../../theme/theme";
 
 export interface RecentSession {
 	name: string;

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

@@ -22,10 +22,10 @@ import { BashExecutionComponent } from "../../modes/components/bash-execution";
 import { BorderedLoader } from "../../modes/components/bordered-loader";
 import { DynamicBorder } from "../../modes/components/dynamic-border";
 import { PythonExecutionComponent } from "../../modes/components/python-execution";
-import { getMarkdownTheme, getSymbolTheme, theme } from "../../modes/theme/theme";
 import type { InteractiveModeContext } from "../../modes/types";
 import type { AuthStorage } from "../../session/auth-storage";
 import { createCompactionSummaryMessage } from "../../session/messages";
+import { getMarkdownTheme, getSymbolTheme, theme } from "../../theme/theme";
 import { outputMeta } from "../../tools/output-meta";
 import { resolveToCwd } from "../../tools/path-utils";
 import { getChangelogPath, parseChangelog } from "../../utils/changelog";

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

@@ -1,80 +1,24 @@
-import { INTENT_FIELD } from "@nghyane/arcane-agent";
-import { Loader, TERMINAL, Text } from "@nghyane/arcane-tui";
+import { type AgentTool, toolDetails } from "@nghyane/arcane-agent";
+import { Loader, TERMINAL } from "@nghyane/arcane-tui";
 import { settings } from "../../config/settings";
 import { AssistantMessageComponent } from "../../modes/components/assistant-message";
-import { CodeModeGroupComponent } from "../../modes/components/codemode-group";
-import { ReadToolGroupComponent } from "../../modes/components/read-tool-group";
+import { ContextGroupComponent } from "../../modes/components/context-group";
 import { TodoReminderComponent } from "../../modes/components/todo-reminder";
 import { ToolExecutionComponent } from "../../modes/components/tool-execution";
 import { TtsrNotificationComponent } from "../../modes/components/ttsr-notification";
-import { getSymbolTheme, theme } from "../../modes/theme/theme";
-import type { InteractiveModeContext, TodoItem } from "../../modes/types";
+import type { InteractiveModeContext } from "../../modes/types";
 import type { AgentSessionEvent } from "../../session/agent-session";
+import { getSymbolTheme, theme } from "../../theme/theme";
+import { getToolTier, isContextTool } from "../../ui/render-utils";
 
 export class EventController {
-	#lastReadGroup: ReadToolGroupComponent | undefined = undefined;
-	#codemodeGroups = new Map<string, CodeModeGroupComponent>();
 	#lastThinkingCount = 0;
 	#renderedCustomMessages = new Set<string>();
-	#lastIntent: string | undefined = undefined;
+	#currentContextGroup?: ContextGroupComponent;
+	#toolGroups = new Map<string, ContextGroupComponent>();
 
 	constructor(private ctx: InteractiveModeContext) {}
 
-	#resetReadGroup(): void {
-		this.#lastReadGroup = undefined;
-	}
-
-	#getReadGroup(): ReadToolGroupComponent {
-		if (!this.#lastReadGroup) {
-			this.ctx.chatContainer.addChild(new Text("", 0, 0));
-			const group = new ReadToolGroupComponent();
-			group.setExpanded(this.ctx.toolOutputExpanded);
-			this.ctx.chatContainer.addChild(group);
-			this.#lastReadGroup = group;
-		}
-		return this.#lastReadGroup;
-	}
-
-	#updateWorkingMessageFromIntent(intent: string | undefined): void {
-		const trimmed = intent?.trim();
-		if (!trimmed || trimmed === this.#lastIntent) return;
-		this.#lastIntent = trimmed;
-		this.ctx.setWorkingMessage(`${trimmed} (esc to interrupt)`);
-	}
-
-	#ensureCodemodeGroup(id: string): CodeModeGroupComponent {
-		let group = this.#codemodeGroups.get(id);
-		if (!group) {
-			this.#resetReadGroup();
-			group = new CodeModeGroupComponent(this.ctx.ui);
-			group.setExpanded(this.ctx.toolOutputExpanded);
-			this.ctx.chatContainer.addChild(group);
-			this.#codemodeGroups.set(id, group);
-			this.ctx.pendingTools.set(id, group);
-			this.#hideLoader();
-		}
-		return group;
-	}
-
-	#hideLoader(): void {
-		if (!this.ctx.loadingAnimation) return;
-		this.ctx.loadingAnimation.stop();
-		this.ctx.statusContainer.clear();
-		this.ctx.loadingAnimation = undefined;
-	}
-
-	#restoreLoader(): void {
-		if (this.ctx.loadingAnimation || this.#codemodeGroups.size > 0) return;
-		this.ctx.loadingAnimation = new Loader(
-			this.ctx.ui,
-			spinner => theme.fg("accent", spinner),
-			text => theme.fg("muted", text),
-			`Working\u2026 (esc to interrupt)`,
-			getSymbolTheme().spinnerFrames,
-		);
-		this.ctx.statusContainer.addChild(this.ctx.loadingAnimation);
-	}
-
 	subscribeToAgent(): void {
 		this.ctx.unsubscribe = this.ctx.session.subscribe(async (event: AgentSessionEvent) => {
 			await this.handleEvent(event);
@@ -91,7 +35,6 @@ export class EventController {
 
 		switch (event.type) {
 			case "agent_start":
-				this.#lastIntent = undefined;
 				if (this.ctx.retryEscapeHandler) {
 					this.ctx.editor.onEscape = this.ctx.retryEscapeHandler;
 					this.ctx.retryEscapeHandler = undefined;
@@ -124,11 +67,11 @@ export class EventController {
 						break;
 					}
 					this.#renderedCustomMessages.add(signature);
-					this.#resetReadGroup();
+					this.#finalizeContextGroup();
 					this.ctx.addMessageToChat(event.message);
 					this.ctx.ui.requestRender();
 				} else if (event.message.role === "user") {
-					this.#resetReadGroup();
+					this.#finalizeContextGroup();
 					this.ctx.addMessageToChat(event.message);
 					if (!event.message.synthetic) {
 						this.ctx.editor.setText("");
@@ -136,12 +79,12 @@ export class EventController {
 					}
 					this.ctx.ui.requestRender();
 				} else if (event.message.role === "fileMention") {
-					this.#resetReadGroup();
+					this.#finalizeContextGroup();
 					this.ctx.addMessageToChat(event.message);
 					this.ctx.ui.requestRender();
 				} else if (event.message.role === "assistant") {
 					this.#lastThinkingCount = 0;
-					this.#resetReadGroup();
+					this.#finalizeContextGroup();
 					this.ctx.streamingComponent = new AssistantMessageComponent(undefined, this.ctx.hideThinkingBlock);
 					this.ctx.streamingMessage = event.message;
 					this.ctx.chatContainer.addChild(this.ctx.streamingComponent);
@@ -159,49 +102,15 @@ export class EventController {
 						content => content.type === "thinking" && content.thinking.trim(),
 					).length;
 					if (thinkingCount > this.#lastThinkingCount) {
-						this.#resetReadGroup();
 						this.#lastThinkingCount = thinkingCount;
 					}
 
 					for (const content of this.ctx.streamingMessage.content) {
 						if (content.type !== "toolCall") continue;
-						// Code Mode: create group component early during streaming for intent display
-						if (content.name === "code") {
-							const group = this.#ensureCodemodeGroup(content.id);
-							const args = content.arguments;
-							if (args && typeof args === "object" && INTENT_FIELD in args) {
-								const intent = (args[INTENT_FIELD] as string | undefined)?.trim();
-								if (intent) group.setIntent(intent);
-							}
-							continue;
-						}
 
 						if (!this.ctx.pendingTools.has(content.id)) {
-							if (content.name === "read") {
-								const group = this.#getReadGroup();
-								group.updateArgs(content.arguments, content.id);
-								this.ctx.pendingTools.set(content.id, group);
-								continue;
-							}
-
-							this.#resetReadGroup();
-							this.ctx.chatContainer.addChild(new Text("", 0, 0));
 							const tool = this.ctx.session.getToolByName(content.name);
-							const component = new ToolExecutionComponent(
-								content.name,
-								content.arguments,
-								{
-									showImages: settings.get("terminal.showImages"),
-									editFuzzyThreshold: settings.get("edit.fuzzyThreshold"),
-									editAllowFuzzy: settings.get("edit.fuzzyMatch"),
-								},
-								tool,
-								this.ctx.ui,
-								this.ctx.sessionManager.getCwd(),
-							);
-							component.setExpanded(this.ctx.toolOutputExpanded);
-							this.ctx.chatContainer.addChild(component);
-							this.ctx.pendingTools.set(content.id, component);
+							this.#appendTool(content.id, content.name, content.arguments, tool);
 						} else {
 							const component = this.ctx.pendingTools.get(content.id);
 							if (component) {
@@ -210,15 +119,6 @@ export class EventController {
 						}
 					}
 
-					// Update working message with intent — skip for code tools that already have a visible group
-					for (const content of this.ctx.streamingMessage.content) {
-						if (content.type !== "toolCall") continue;
-						if (this.#codemodeGroups.has(content.id)) continue;
-						const args = content.arguments;
-						if (!args || typeof args !== "object" || !(INTENT_FIELD in args)) continue;
-						this.#updateWorkingMessageFromIntent(args[INTENT_FIELD] as string | undefined);
-					}
-
 					this.ctx.ui.requestRender();
 				}
 				break;
@@ -260,68 +160,11 @@ export class EventController {
 				break;
 
 			case "tool_execution_start": {
-				if (!this.#codemodeGroups.has(event.toolCallId)) this.#updateWorkingMessageFromIntent(event.intent);
-				if (event.toolName === "code") {
-					const group = this.#ensureCodemodeGroup(event.toolCallId);
-					const intent = (event.intent ?? (event.args as Record<string, unknown>)?.agent__intent) as
-						| string
-						| undefined;
-					if (typeof intent === "string" && intent.trim()) {
-						group.setIntent(intent.trim());
-					}
-					this.ctx.ui.requestRender();
-					break;
-				}
-				// Route sub-tools into their parent codemode group
-				if (event.parentToolCallId) {
-					const parentGroup = this.#codemodeGroups.get(event.parentToolCallId);
-					if (parentGroup) {
-						const tool = event.tool ?? this.ctx.session.getToolByName(event.toolName);
-						const handle = parentGroup.addSubTool(
-							event.toolCallId,
-							event.toolName,
-							event.args,
-							tool,
-							{
-								showImages: settings.get("terminal.showImages"),
-								editFuzzyThreshold: settings.get("edit.fuzzyThreshold"),
-								editAllowFuzzy: settings.get("edit.fuzzyMatch"),
-							},
-							this.ctx.ui,
-							this.ctx.sessionManager.getCwd(),
-						);
-						this.ctx.pendingTools.set(event.toolCallId, handle);
-						this.ctx.ui.requestRender();
-						break;
-					}
-				}
+				if (event.intent) this.ctx.setWorkingMessage(`${event.intent} (esc to interrupt)`);
 
 				if (!this.ctx.pendingTools.has(event.toolCallId)) {
-					if (event.toolName === "read") {
-						const group = this.#getReadGroup();
-						group.updateArgs(event.args, event.toolCallId);
-						this.ctx.pendingTools.set(event.toolCallId, group);
-						this.ctx.ui.requestRender();
-						break;
-					}
-
-					this.#resetReadGroup();
 					const tool = event.tool ?? this.ctx.session.getToolByName(event.toolName);
-					const component = new ToolExecutionComponent(
-						event.toolName,
-						event.args,
-						{
-							showImages: settings.get("terminal.showImages"),
-							editFuzzyThreshold: settings.get("edit.fuzzyThreshold"),
-							editAllowFuzzy: settings.get("edit.fuzzyMatch"),
-						},
-						tool,
-						this.ctx.ui,
-						this.ctx.sessionManager.getCwd(),
-					);
-					component.setExpanded(this.ctx.toolOutputExpanded);
-					this.ctx.chatContainer.addChild(component);
-					this.ctx.pendingTools.set(event.toolCallId, component);
+					this.#appendTool(event.toolCallId, event.toolName, event.args, tool);
 					this.ctx.ui.requestRender();
 				}
 				break;
@@ -341,30 +184,23 @@ export class EventController {
 				if (component) {
 					component.updateResult({ ...event.result, isError: event.isError }, false, event.toolCallId);
 					this.ctx.pendingTools.delete(event.toolCallId);
-					this.ctx.ui.requestRender();
-				}
-				// Code Mode: finalize the group when the "code" tool ends
-				if (event.toolName === "code") {
-					const group = this.#codemodeGroups.get(event.toolCallId);
+					// Mark context group completion
+					const group = this.#toolGroups.get(event.toolCallId);
 					if (group) {
-						const details = event.result.details as { logs?: string[] } | undefined;
-						if (details?.logs) {
-							group.setLogs(details.logs);
-						}
-						group.setDone();
-						this.#codemodeGroups.delete(event.toolCallId);
+						group.markDone();
+						this.#toolGroups.delete(event.toolCallId);
 					}
-					this.#restoreLoader();
+					this.ctx.ui.requestRender();
 				}
 				// Update todo display when todo_write tool completes
 				if (event.toolName === "todo_write" && !event.isError) {
-					const details = event.result.details as { todos?: TodoItem[] } | undefined;
+					const details = toolDetails("todo_write", (event.result.details ?? {}) as Record<string, unknown>);
 					if (details?.todos) {
 						this.ctx.setTodos(details.todos);
 					}
 				} else if (event.toolName === "todo_write" && event.isError) {
 					const textContent = event.result.content.find(
-						(content: { type: string; text?: string }) => content.type === "text",
+						(content): content is { type: "text"; text: string } => content.type === "text",
 					)?.text;
 					this.ctx.showWarning(
 						`Todo update failed${textContent ? `: ${textContent}` : ". Progress may be stale until todo_write succeeds."}`,
@@ -374,6 +210,7 @@ export class EventController {
 			}
 
 			case "agent_end":
+				this.#finalizeContextGroup();
 				if (this.ctx.loadingAnimation) {
 					this.ctx.loadingAnimation.stop();
 					this.ctx.loadingAnimation = undefined;
@@ -385,7 +222,7 @@ export class EventController {
 					this.ctx.streamingMessage = undefined;
 				}
 				this.ctx.pendingTools.clear();
-				this.#codemodeGroups.clear();
+				this.#toolGroups.clear();
 				this.ctx.ui.requestRender();
 				this.sendCompletionNotification();
 				break;
@@ -480,6 +317,7 @@ export class EventController {
 			}
 
 			case "ttsr_triggered": {
+				this.#finalizeContextGroup();
 				const component = new TtsrNotificationComponent(event.rules);
 				component.setExpanded(this.ctx.toolOutputExpanded);
 				this.ctx.chatContainer.addChild(component);
@@ -488,6 +326,7 @@ export class EventController {
 			}
 
 			case "todo_reminder": {
+				this.#finalizeContextGroup();
 				const component = new TodoReminderComponent(event.todos, event.attempt, event.maxAttempts);
 				this.ctx.chatContainer.addChild(component);
 				this.ctx.ui.requestRender();
@@ -496,6 +335,38 @@ export class EventController {
 		}
 	}
 
+	#appendTool(toolCallId: string, toolName: string, args: unknown, tool: AgentTool | undefined): void {
+		const tier = getToolTier(toolName);
+		const component = new ToolExecutionComponent(
+			toolName,
+			args,
+			{ showImages: settings.get("terminal.showImages"), tier },
+			tool,
+			this.ctx.ui,
+			this.ctx.sessionManager.getCwd(),
+		);
+		component.setExpanded(this.ctx.toolOutputExpanded);
+
+		if (isContextTool(toolName)) {
+			if (!this.#currentContextGroup) {
+				this.#currentContextGroup = new ContextGroupComponent();
+				this.#currentContextGroup.setExpanded(this.ctx.toolOutputExpanded);
+				this.ctx.chatContainer.addChild(this.#currentContextGroup);
+			}
+			this.#currentContextGroup.addTool(toolName, component);
+			this.#toolGroups.set(toolCallId, this.#currentContextGroup);
+		} else {
+			this.#finalizeContextGroup();
+			this.ctx.chatContainer.addChild(component);
+		}
+
+		this.ctx.pendingTools.set(toolCallId, component);
+	}
+
+	#finalizeContextGroup(): void {
+		this.#currentContextGroup = undefined;
+	}
+
 	sendCompletionNotification(): void {
 		if (this.ctx.isBackgrounded === false) return;
 		const notify = settings.get("completion.notify");

package/src/modes/controllers/extension-ui-controller.ts

@@ -14,8 +14,8 @@ import type {
 import { HookEditorComponent } from "../../modes/components/hook-editor";
 import { HookInputComponent } from "../../modes/components/hook-input";
 import { HookSelectorComponent } from "../../modes/components/hook-selector";
-import { getAvailableThemesWithPaths, getThemeByName, setTheme, type Theme, theme } from "../../modes/theme/theme";
 import type { InteractiveModeContext } from "../../modes/types";
+import { getAvailableThemesWithPaths, getThemeByName, setTheme, type Theme, theme } from "../../theme/theme";
 import { setTerminalTitle } from "../../utils/title-generator";
 
 export class ExtensionUiController {

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

@@ -3,11 +3,11 @@ import type { AgentMessage } from "@nghyane/arcane-agent";
 import { copyToClipboard, readImageFromClipboard, sanitizeText } from "@nghyane/arcane-natives";
 import { $env } from "@nghyane/arcane-utils";
 import { settings } from "../../config/settings";
-import { theme } from "../../modes/theme/theme";
 import type { InteractiveModeContext } from "../../modes/types";
 import type { AgentSessionEvent } from "../../session/agent-session";
 import { SKILL_PROMPT_MESSAGE_TYPE, type SkillPromptDetails } from "../../session/messages";
 import { executeBuiltinSlashCommand } from "../../slash-commands/builtin-registry";
+import { theme } from "../../theme/theme";
 import { getEditorCommand, openInEditor } from "../../utils/external-editor";
 import { resizeImage } from "../../utils/image-resize";
 import { generateSessionTitle, setTerminalTitle } from "../../utils/title-generator";
@@ -52,6 +52,8 @@ export class InputController {
 				this.ctx.editor.setText("");
 				this.ctx.isPythonMode = false;
 				this.ctx.updateEditorBorderColor();
+			} else if (this.ctx.session.isStreaming) {
+				this.ctx.agent.abort();
 			} else if (!this.ctx.editor.getText().trim()) {
 				// Double-escape with empty editor triggers /tree, /branch, or nothing based on setting
 				const action = settings.get("doubleEscapeAction");

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

@@ -19,10 +19,10 @@ import {
 import { MCPOAuthFlow } from "../../mcp/oauth-flow";
 import type { MCPServerConfig, MCPServerConnection } from "../../mcp/types";
 import type { OAuthCredential } from "../../session/auth-storage";
+import { theme } from "../../theme/theme";
 import { openPath } from "../../utils/open";
 import { DynamicBorder } from "../components/dynamic-border";
 import { MCPAddWizard } from "../components/mcp-add-wizard";
-import { theme } from "../theme/theme";
 import type { InteractiveModeContext } from "../types";
 
 function withTimeout<T>(promise: Promise<T>, timeoutMs: number, message: string): Promise<T> {