@nghyane/arcane 0.1.19 → 0.1.20

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 ## [Unreleased]
 
+## [0.1.20] - 2026-03-05
+
+### Added
+
+- Spinner animation on tool calls while running
+
+### Changed
+
+- Stricter tool schemas and simplified edit tool insert operation
+- Improved edit error steering and diff preview
+- Normalize node:path/fs imports to namespace style
+
+### Fixed
+
+- Task tool returns plain text instead of JSON-serialized result
+- GitHub client non-JSON response handling
+- Tab sanitization in hashline
+
+### Performance
+
+- Reuse markdown components and throttle stream renders
+
 ## [0.1.17] - 2026-03-02
 
 ### Added

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@nghyane/arcane",
-	"version": "0.1.19",
+	"version": "0.1.20",
 	"description": "Coding agent CLI with read, bash, edit, write tools and session management",
 	"homepage": "https://github.com/nghyane/arcane",
 	"author": "Can Bölük",
@@ -44,12 +44,12 @@
 	},
 	"dependencies": {
 		"@mozilla/readability": "0.6.0",
-		"@nghyane/arcane-stats": "^0.1.11",
-		"@nghyane/arcane-agent": "^0.1.15",
-		"@nghyane/arcane-ai": "^0.1.11",
-		"@nghyane/arcane-natives": "^0.1.10",
-		"@nghyane/arcane-tui": "^0.1.14",
-		"@nghyane/arcane-utils": "^0.1.7",
+		"@nghyane/arcane-stats": "^0.1.12",
+		"@nghyane/arcane-agent": "^0.1.16",
+		"@nghyane/arcane-ai": "^0.1.12",
+		"@nghyane/arcane-natives": "^0.1.11",
+		"@nghyane/arcane-tui": "^0.1.15",
+		"@nghyane/arcane-utils": "^0.1.8",
 		"@sinclair/typebox": "^0.34.48",
 		"@xterm/headless": "^6.0.0",
 		"ajv": "^8.18.0",

package/src/lsp/clients/biome-client.ts

@@ -2,7 +2,7 @@
  * Biome CLI-based linter client.
  * Uses Biome's CLI with JSON output instead of LSP (which has stale diagnostics issues).
  */
-import path from "node:path";
+import * as path from "node:path";
 import type { Diagnostic, DiagnosticSeverity, LinterClient, ServerConfig } from "../../lsp/types";
 
 // =============================================================================

package/src/lsp/edits.ts

@@ -1,5 +1,5 @@
 import * as fs from "node:fs/promises";
-import path from "node:path";
+import * as path from "node:path";
 import type { CreateFile, DeleteFile, RenameFile, TextDocumentEdit, TextEdit, WorkspaceEdit } from "./types";
 import { uriToFile } from "./utils";
 

package/src/lsp/index.ts

@@ -1,5 +1,5 @@
 import * as fs from "node:fs";
-import path from "node:path";
+import * as path from "node:path";
 import type { AgentTool, AgentToolContext, AgentToolResult, AgentToolUpdateCallback } from "@nghyane/arcane-agent";
 import { logger, once, untilAborted } from "@nghyane/arcane-utils";
 import type { BunFile } from "bun";

package/src/lsp/render.ts

@@ -16,7 +16,7 @@ import type { LspParams, LspToolDetails } from "./types";
  * Render the LSP tool call in the TUI.
  * Shows: "lsp <operation> <file/filecount>"
  */
-export function renderCall(args: LspParams, _options: RenderResultOptions, theme: Theme): Text {
+export function renderCall(args: LspParams, options: RenderResultOptions, theme: Theme): Text {
 	const actionLabel = (args.action ?? "request").replace(/_/g, " ");
 	const queryPreview = args.query ? truncateToWidth(args.query, TRUNCATE_LENGTHS.SHORT) : undefined;
 
@@ -66,7 +66,8 @@ export function renderCall(args: LspParams, _options: RenderResultOptions, theme
 
 	const text = renderStatusLine(
 		{
-			icon: "pending",
+			icon: "running",
+			spinnerFrame: options.spinnerFrame,
 			title: "LSP",
 			description: descriptionParts.join(" "),
 			meta,

package/src/lsp/utils.ts

@@ -1,4 +1,4 @@
-import path from "node:path";
+import * as path from "node:path";
 import { type Theme, theme } from "../theme/theme";
 import type {
 	Diagnostic,

package/src/main.ts

@@ -5,7 +5,7 @@
  * createAgentSession() options. The SDK does the heavy lifting.
  */
 
-import { realpathSync } from "node:fs";
+import * as nodeFs from "node:fs";
 import * as fs from "node:fs/promises";
 import * as os from "node:os";
 import * as path from "node:path";
@@ -284,7 +284,7 @@ async function maybeAutoChdir(parsed: Args): Promise<void> {
 	}
 
 	const normalizePath = (value: string) => {
-		const resolved = realpathSync(path.resolve(value));
+		const resolved = nodeFs.realpathSync(path.resolve(value));
 		return process.platform === "win32" ? resolved.toLowerCase() : resolved;
 	};
 

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

@@ -4,13 +4,21 @@ import { logger } from "@nghyane/arcane-utils";
 import { hasPendingMermaid, prerenderMermaid } from "../../theme/mermaid-cache";
 import { getMarkdownTheme, theme } from "../../theme/theme";
 
+interface CachedBlock {
+	type: "text" | "thinking" | "thinking-hidden";
+	component: Markdown | Text;
+	text: string;
+}
+
 /**
- * Component that renders a complete assistant message
+ * Component that renders a complete assistant message.
+ * Reuses Markdown/Text instances across updates so unchanged blocks skip re-parsing.
  */
 export class AssistantMessageComponent extends Container {
 	#contentContainer: Container;
 	#lastMessage?: AssistantMessage;
 	#prerenderInFlight = false;
+	#cachedBlocks: CachedBlock[] = [];
 
 	constructor(
 		message?: AssistantMessage,
@@ -69,11 +77,7 @@ export class AssistantMessageComponent extends Container {
 
 	updateContent(message: AssistantMessage): void {
 		this.#lastMessage = message;
-
-		// Clear content container
 		this.#contentContainer.clear();
-
-		// Trigger background mermaid pre-rendering if needed
 		this.#triggerMermaidPrerender(message);
 
 		const hasVisibleContent = message.content.some(
@@ -84,43 +88,73 @@ export class AssistantMessageComponent extends Container {
 			this.#contentContainer.addChild(new Spacer(1));
 		}
 
-		// Render content in order
+		let blockIndex = 0;
 		for (let i = 0; i < message.content.length; i++) {
 			const content = message.content[i];
 			if (content.type === "text" && content.text.trim()) {
-				// Assistant text messages with no background - trim the text
-				// Set paddingY=0 to avoid extra spacing before tool executions
-				this.#contentContainer.addChild(new Markdown(content.text.trim(), 2, 0, getMarkdownTheme()));
+				const text = content.text.trim();
+				const cached = this.#cachedBlocks[blockIndex];
+				let md: Markdown;
+				if (cached?.type === "text") {
+					md = cached.component as Markdown;
+					if (cached.text !== text) {
+						md.setText(text);
+						cached.text = text;
+					}
+				} else {
+					md = new Markdown(text, 2, 0, getMarkdownTheme());
+					this.#cachedBlocks[blockIndex] = { type: "text", component: md, text };
+				}
+				this.#contentContainer.addChild(md);
+				blockIndex++;
 			} else if (content.type === "thinking" && content.thinking.trim()) {
-				// Add spacing only when another visible assistant content block follows.
-				// This avoids a superfluous blank line before separately-rendered tool execution blocks.
 				const hasVisibleContentAfter = message.content
 					.slice(i + 1)
 					.some(c => (c.type === "text" && c.text.trim()) || (c.type === "thinking" && c.thinking.trim()));
 
 				if (this.hideThinkingBlock) {
-					// Show static "Thinking..." label when hidden
-					this.#contentContainer.addChild(new Text(theme.italic(theme.fg("thinkingText", "Thinking...")), 2, 0));
+					const cached = this.#cachedBlocks[blockIndex];
+					let label: Text;
+					if (cached?.type === "thinking-hidden") {
+						label = cached.component as Text;
+					} else {
+						label = new Text(theme.italic(theme.fg("thinkingText", "Thinking...")), 2, 0);
+						this.#cachedBlocks[blockIndex] = { type: "thinking-hidden", component: label, text: "" };
+					}
+					this.#contentContainer.addChild(label);
 					if (hasVisibleContentAfter) {
 						this.#contentContainer.addChild(new Spacer(1));
 					}
 				} else {
-					// Thinking traces in thinkingText color, italic
-					this.#contentContainer.addChild(
-						new Markdown(content.thinking.trim(), 2, 0, getMarkdownTheme(), {
+					const text = content.thinking.trim();
+					const cached = this.#cachedBlocks[blockIndex];
+					let md: Markdown;
+					if (cached?.type === "thinking") {
+						md = cached.component as Markdown;
+						if (cached.text !== text) {
+							md.setText(text);
+							cached.text = text;
+						}
+					} else {
+						md = new Markdown(text, 2, 0, getMarkdownTheme(), {
 							color: (text: string) => theme.fg("thinkingText", text),
 							italic: true,
-						}),
-					);
+						});
+						this.#cachedBlocks[blockIndex] = { type: "thinking", component: md, text };
+					}
+					this.#contentContainer.addChild(md);
 					if (hasVisibleContentAfter) {
 						this.#contentContainer.addChild(new Spacer(1));
 					}
 				}
+				blockIndex++;
 			}
 		}
 
-		// Check if aborted - show after partial content
-		// But only if there are no tool calls (tool execution components will show the error)
+		if (this.#cachedBlocks.length > blockIndex) {
+			this.#cachedBlocks.length = blockIndex;
+		}
+
 		const hasToolCalls = message.content.some(c => c.type === "toolCall");
 		if (!hasToolCalls) {
 			if (message.stopReason === "aborted") {
@@ -128,11 +162,7 @@ export class AssistantMessageComponent extends Container {
 					message.errorMessage && message.errorMessage !== "Request was aborted"
 						? message.errorMessage
 						: "Operation aborted";
-				if (hasVisibleContent) {
-					this.#contentContainer.addChild(new Spacer(1));
-				} else {
-					this.#contentContainer.addChild(new Spacer(1));
-				}
+				this.#contentContainer.addChild(new Spacer(1));
 				this.#contentContainer.addChild(new Text(theme.fg("error", abortMessage), 2, 0));
 			} else if (message.stopReason === "error") {
 				const errorMsg = message.errorMessage || "Unknown error";

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

@@ -22,6 +22,9 @@ export class BashExecutionComponent extends Container {
 	#expanded = false;
 	#headerText: Text;
 	#bodyText: Text;
+	#spinnerFrame = 0;
+	#spinnerInterval?: NodeJS.Timeout;
+	#ui: TUI;
 
 	constructor(
 		private readonly command: string,
@@ -29,6 +32,7 @@ export class BashExecutionComponent extends Container {
 		_excludeFromContext = false,
 	) {
 		super();
+		this.#ui = ui;
 		this.addChild(new Spacer(1));
 
 		this.#headerText = new Text(
@@ -49,6 +53,7 @@ export class BashExecutionComponent extends Container {
 			getSymbolTheme().spinnerFrames,
 		);
 		this.addChild(this.#loader);
+		this.#startSpinner();
 	}
 
 	setExpanded(expanded: boolean): void {
@@ -91,9 +96,28 @@ export class BashExecutionComponent extends Container {
 			this.#setOutput(options.output);
 		}
 		this.#loader.stop();
+		this.#stopSpinner();
 		this.#updateDisplay();
 	}
 
+	#startSpinner(): void {
+		if (this.#spinnerInterval) return;
+		this.#spinnerInterval = setInterval(() => {
+			const frameCount = theme.spinnerFrames.length;
+			if (frameCount === 0) return;
+			this.#spinnerFrame = (this.#spinnerFrame + 1) % frameCount;
+			this.#updateDisplay();
+			this.#ui.requestRender();
+		}, 80);
+	}
+
+	#stopSpinner(): void {
+		if (this.#spinnerInterval) {
+			clearInterval(this.#spinnerInterval);
+			this.#spinnerInterval = undefined;
+		}
+	}
+
 	#updateDisplay(): void {
 		const isError = this.#status === "error";
 		const isDone = this.#status !== "running";
@@ -109,6 +133,13 @@ export class BashExecutionComponent extends Container {
 			this.#headerText.setText(
 				renderStatusLine({ icon, title: "Bash", description: `$ ${this.command}`, meta }, theme),
 			);
+		} else {
+			this.#headerText.setText(
+				renderStatusLine(
+					{ icon: "running", spinnerFrame: this.#spinnerFrame, title: "Bash", description: `$ ${this.command}` },
+					theme,
+				),
+			);
 		}
 
 		// Build tree-style body

package/src/modes/components/context-group.ts

@@ -1,4 +1,4 @@
-import type { Component } from "@nghyane/arcane-tui";
+import type { Component, TUI } from "@nghyane/arcane-tui";
 import { Spacer } from "@nghyane/arcane-tui";
 import { theme } from "../../theme/theme";
 import { formatCount, formatStatusIcon } from "../../ui/render-utils";
@@ -26,19 +26,27 @@ export class ContextGroupComponent implements Component {
 	#expanded = false;
 	#pendingCount = 0;
 	#spacer: Spacer;
+	#spinnerFrame = 0;
+	#spinnerInterval?: NodeJS.Timeout;
+	#ui: TUI;
 
-	constructor() {
+	constructor(ui: TUI) {
 		this.#spacer = new Spacer(1);
+		this.#ui = ui;
 	}
 
 	addTool(name: string, component: ToolExecutionComponent): void {
 		this.#entries.push({ name, component });
 		this.#pendingCount++;
 		component.setExpanded(this.#expanded);
+		this.#startSpinner();
 	}
 
 	markDone(): void {
 		this.#pendingCount = Math.max(0, this.#pendingCount - 1);
+		if (this.#pendingCount <= 0) {
+			this.#stopSpinner();
+		}
 	}
 
 	setExpanded(expanded: boolean): void {
@@ -63,6 +71,23 @@ export class ContextGroupComponent implements Component {
 		}
 	}
 
+	#startSpinner(): void {
+		if (this.#spinnerInterval) return;
+		this.#spinnerInterval = setInterval(() => {
+			const frameCount = theme.spinnerFrames.length;
+			if (frameCount === 0) return;
+			this.#spinnerFrame = (this.#spinnerFrame + 1) % frameCount;
+			this.#ui.requestRender();
+		}, 80);
+	}
+
+	#stopSpinner(): void {
+		if (this.#spinnerInterval) {
+			clearInterval(this.#spinnerInterval);
+			this.#spinnerInterval = undefined;
+		}
+	}
+
 	render(width: number): string[] {
 		const lines: string[] = [];
 
@@ -71,7 +96,9 @@ export class ContextGroupComponent implements Component {
 
 		// Summary line
 		const allDone = this.#pendingCount <= 0;
-		const icon = allDone ? formatStatusIcon("success", theme) : formatStatusIcon("running", theme);
+		const icon = allDone
+			? formatStatusIcon("success", theme)
+			: formatStatusIcon("running", theme, this.#spinnerFrame);
 		const label = allDone ? "Gathered context" : "Gathering context…";
 
 		// Count by tool type

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

@@ -12,7 +12,7 @@ import {
 	visibleWidth,
 } from "@nghyane/arcane-tui";
 import { MODEL_ROLE_IDS, MODEL_ROLES, type ModelRegistry, type ModelRole } from "../../config/model-registry";
-import { parseModelString } from "../../config/model-resolver";
+import { parseModelPattern, parseModelString } from "../../config/model-resolver";
 import type { Settings } from "../../config/settings";
 import { type ThemeColor, theme } from "../../theme/theme";
 import { fuzzyFilter } from "../../utils/fuzzy";
@@ -24,6 +24,19 @@ function makeInvertedBadge(label: string, color: ThemeColor): string {
 	return `${bgAnsi}\x1b[30m ${label} \x1b[39m${theme.getAppBgAnsi()}`;
 }
 
+function formatRoleThinkingLabel(thinkingLevel: string | undefined): string {
+	if (!thinkingLevel || thinkingLevel === "default") return "inherit";
+	const labels: Record<string, string> = {
+		minimal: "min",
+		low: "low",
+		medium: "med",
+		high: "high",
+		xhigh: "xhi",
+		off: "off",
+	};
+	return labels[thinkingLevel] ?? thinkingLevel;
+}
+
 interface ModelItem {
 	provider: string;
 	id: string;
@@ -40,7 +53,11 @@ interface MenuAction {
 	role: ModelRole;
 }
 
-const MENU_ACTIONS: MenuAction[] = MODEL_ROLE_IDS.map(role => ({ label: `Set as ${MODEL_ROLES[role].name}`, role }));
+const MENU_ACTIONS: MenuAction[] = MODEL_ROLE_IDS.map(role => {
+	const roleInfo = MODEL_ROLES[role];
+	const roleLabel = roleInfo.tag ? `${roleInfo.tag} (${roleInfo.name})` : roleInfo.name;
+	return { label: `Set as ${roleLabel}`, role };
+});
 
 const ALL_TAB = "ALL";
 
@@ -69,7 +86,7 @@ export class ModelSelectorComponent extends Container {
 	#allModels: ModelItem[] = [];
 	#filteredModels: ModelItem[] = [];
 	#selectedIndex: number = 0;
-	#roles: { [key in ModelRole]?: Model } = {};
+	#roles: { [key in ModelRole]?: { model: Model; thinkingLevel?: string } } = {};
 	#settings: Settings;
 	#modelRegistry: ModelRegistry;
 	#onSelectCallback: (model: Model, role: ModelRole | null) => void;
@@ -183,9 +200,15 @@ export class ModelSelectorComponent extends Container {
 			if (parsed) {
 				const model = allModels.find(m => m.provider === parsed.provider && m.id === parsed.id);
 				if (model) {
-					this.#roles[role] = model;
+					this.#roles[role] = { model };
+					continue;
 				}
 			}
+			// Fallback: parse as pattern to extract thinking level from suffix
+			const result = parseModelPattern(modelId, allModels);
+			if (result.model) {
+				this.#roles[role] = { model: result.model, thinkingLevel: result.thinkingLevel };
+			}
 		}
 	}
 
@@ -198,7 +221,7 @@ export class ModelSelectorComponent extends Container {
 			let i = 0;
 			while (i < MODEL_ROLE_IDS.length) {
 				const role = MODEL_ROLE_IDS[i];
-				if (this.#roles[role] && modelsAreEqual(this.#roles[role], model.model)) {
+				if (this.#roles[role] && modelsAreEqual(this.#roles[role]!.model, model.model)) {
 					break;
 				}
 				i++;
@@ -395,9 +418,12 @@ export class ModelSelectorComponent extends Container {
 			const badges: string[] = [];
 			for (const role of MODEL_ROLE_IDS) {
 				const { tag, color } = MODEL_ROLES[role];
-				if (tag && modelsAreEqual(this.#roles[role], item.model)) {
-					badges.push(makeInvertedBadge(tag, color ?? "success"));
-				}
+				const assigned = this.#roles[role];
+				if (!tag || !assigned || !modelsAreEqual(assigned.model, item.model)) continue;
+
+				const badge = makeInvertedBadge(tag, color ?? "success");
+				const thinkingLabel = formatRoleThinkingLabel(assigned.thinkingLevel);
+				badges.push(`${badge} ${theme.fg("dim", `(${thinkingLabel})`)}`);
 			}
 			const badgeText = badges.length > 0 ? ` ${badges.join(" ")}` : "";
 
@@ -596,7 +622,7 @@ export class ModelSelectorComponent extends Container {
 		this.#settings.setModelRole(role, `${model.provider}/${model.id}`);
 
 		// Update local state for UI
-		this.#roles[role] = model;
+		this.#roles[role] = { model };
 
 		// Notify caller (for updating agent state if needed)
 		this.#onSelectCallback(model, role);

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

@@ -22,6 +22,9 @@ export class PythonExecutionComponent extends Container {
 	#expanded = false;
 	#headerText: Text;
 	#bodyText: Text;
+	#spinnerFrame = 0;
+	#spinnerInterval?: NodeJS.Timeout;
+	#ui: TUI;
 
 	constructor(
 		private readonly code: string,
@@ -29,6 +32,7 @@ export class PythonExecutionComponent extends Container {
 		_excludeFromContext = false,
 	) {
 		super();
+		this.#ui = ui;
 		this.addChild(new Spacer(1));
 
 		const codePreview = code.split("\n")[0].slice(0, 60);
@@ -50,6 +54,7 @@ export class PythonExecutionComponent extends Container {
 			getSymbolTheme().spinnerFrames,
 		);
 		this.addChild(this.#loader);
+		this.#startSpinner();
 	}
 
 	setExpanded(expanded: boolean): void {
@@ -92,9 +97,28 @@ export class PythonExecutionComponent extends Container {
 			this.#setOutput(options.output);
 		}
 		this.#loader.stop();
+		this.#stopSpinner();
 		this.#updateDisplay();
 	}
 
+	#startSpinner(): void {
+		if (this.#spinnerInterval) return;
+		this.#spinnerInterval = setInterval(() => {
+			const frameCount = theme.spinnerFrames.length;
+			if (frameCount === 0) return;
+			this.#spinnerFrame = (this.#spinnerFrame + 1) % frameCount;
+			this.#updateDisplay();
+			this.#ui.requestRender();
+		}, 80);
+	}
+
+	#stopSpinner(): void {
+		if (this.#spinnerInterval) {
+			clearInterval(this.#spinnerInterval);
+			this.#spinnerInterval = undefined;
+		}
+	}
+
 	#updateDisplay(): void {
 		const isError = this.#status === "error";
 		const isDone = this.#status !== "running";
@@ -110,6 +134,19 @@ export class PythonExecutionComponent extends Container {
 			this.#headerText.setText(
 				renderStatusLine({ icon, title: "Python", description: `>>> ${codePreview}`, meta }, theme),
 			);
+		} else {
+			const codePreview = this.code.split("\n")[0].slice(0, 60);
+			this.#headerText.setText(
+				renderStatusLine(
+					{
+						icon: "running",
+						spinnerFrame: this.#spinnerFrame,
+						title: "Python",
+						description: `>>> ${codePreview}`,
+					},
+					theme,
+				),
+			);
 		}
 
 		const bodyLines: string[] = [];

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

@@ -130,6 +130,7 @@ export class ToolExecutionComponent extends Container {
 			this.addChild(this.#contentBox);
 		}
 
+		this.#updateSpinnerAnimation();
 		this.#updateDisplay();
 	}
 
@@ -212,10 +213,8 @@ export class ToolExecutionComponent extends Container {
 	 * Start or stop spinner animation based on whether this is a partial task result.
 	 */
 	#updateSpinnerAnimation(): void {
-		// Spinner for: task tool with partial result, or edit/write while args streaming
-		const isStreamingArgs = !this.#argsComplete && (this.#toolName === "edit" || this.#toolName === "write");
-		const isPartialTask = this.#isPartial && this.#tool?.mergeCallAndResult === true;
-		const needsSpinner = isStreamingArgs || isPartialTask;
+		// Spinner runs whenever the tool hasn't produced a final result
+		const needsSpinner = this.#isPartial || !this.#result || !this.#argsComplete;
 		if (needsSpinner && !this.#spinnerInterval) {
 			this.#spinnerInterval = setInterval(() => {
 				const frameCount = theme.spinnerFrames.length;