@gajae-code/coding-agent 0.1.1

package/src/modes/components/countdown-timer.ts

@@ -0,0 +1,75 @@
+/**
+ * Reusable countdown timer for dialog components.
+ */
+import type { TUI } from "@gajae-code/tui";
+
+export class CountdownTimer {
+	#intervalId: NodeJS.Timeout | undefined;
+	#expireTimeoutId: NodeJS.Timeout | undefined;
+	#remainingSeconds: number;
+	#deadlineMs = 0;
+	readonly #initialMs: number;
+
+	constructor(
+		timeoutMs: number,
+		private tui: TUI | undefined,
+		private onTick: (seconds: number) => void,
+		private onExpire: () => void,
+	) {
+		this.#initialMs = timeoutMs;
+		this.#remainingSeconds = Math.ceil(timeoutMs / 1000);
+		this.#start();
+	}
+
+	#calculateRemainingSeconds(now = Date.now()): number {
+		const remainingMs = Math.max(0, this.#deadlineMs - now);
+		return Math.ceil(remainingMs / 1000);
+	}
+
+	#start(): void {
+		const now = Date.now();
+		this.#deadlineMs = now + this.#initialMs;
+		this.#remainingSeconds = this.#calculateRemainingSeconds(now);
+		this.onTick(this.#remainingSeconds);
+		this.tui?.requestRender();
+
+		this.#expireTimeoutId = setTimeout(() => {
+			this.dispose();
+			this.onExpire();
+		}, this.#initialMs);
+
+		this.#startInterval();
+	}
+
+	#startInterval(): void {
+		if (this.#intervalId) {
+			clearInterval(this.#intervalId);
+			this.#intervalId = undefined;
+		}
+		this.#intervalId = setInterval(() => {
+			const remainingSeconds = this.#calculateRemainingSeconds();
+			if (remainingSeconds !== this.#remainingSeconds) {
+				this.#remainingSeconds = remainingSeconds;
+				this.onTick(this.#remainingSeconds);
+			}
+			this.tui?.requestRender();
+		}, 1000);
+	}
+
+	/** Reset the countdown to its initial value */
+	reset(): void {
+		this.dispose();
+		this.#start();
+	}
+
+	dispose(): void {
+		if (this.#intervalId) {
+			clearInterval(this.#intervalId);
+			this.#intervalId = undefined;
+		}
+		if (this.#expireTimeoutId) {
+			clearTimeout(this.#expireTimeoutId);
+			this.#expireTimeoutId = undefined;
+		}
+	}
+}

package/src/modes/components/custom-editor.ts

@@ -0,0 +1,237 @@
+import { Editor, type KeyId, matchesKey, parseKittySequence } from "@gajae-code/tui";
+import type { AppKeybinding } from "../../config/keybindings";
+
+type ConfigurableEditorAction = Extract<
+	AppKeybinding,
+	| "app.interrupt"
+	| "app.clear"
+	| "app.exit"
+	| "app.suspend"
+	| "app.thinking.cycle"
+	| "app.model.cycleForward"
+	| "app.model.cycleBackward"
+	| "app.model.select"
+	| "app.model.selectTemporary"
+	| "app.tools.expand"
+	| "app.thinking.toggle"
+	| "app.editor.external"
+	| "app.history.search"
+	| "app.message.dequeue"
+	| "app.clipboard.pasteImage"
+	| "app.clipboard.copyPrompt"
+>;
+
+const DEFAULT_ACTION_KEYS: Record<ConfigurableEditorAction, KeyId[]> = {
+	"app.interrupt": ["escape"],
+	"app.clear": ["ctrl+c"],
+	"app.exit": ["ctrl+d"],
+	"app.suspend": ["ctrl+z"],
+	"app.thinking.cycle": ["shift+tab"],
+	"app.model.cycleForward": ["ctrl+p"],
+	"app.model.cycleBackward": ["shift+ctrl+p"],
+	"app.model.select": ["ctrl+l"],
+	"app.model.selectTemporary": ["alt+p"],
+	"app.tools.expand": ["ctrl+o"],
+	"app.thinking.toggle": ["ctrl+t"],
+	"app.editor.external": ["ctrl+g"],
+	"app.history.search": ["ctrl+r"],
+	"app.message.dequeue": ["alt+up"],
+	"app.clipboard.pasteImage": ["ctrl+v"],
+	"app.clipboard.copyPrompt": ["alt+shift+c"],
+};
+
+/**
+ * Custom editor that handles configurable app-level shortcuts for coding-agent.
+ */
+export class CustomEditor extends Editor {
+	onEscape?: () => void;
+	shouldBypassAutocompleteOnEscape?: () => boolean;
+	onClear?: () => void;
+	onExit?: () => void;
+	onCycleThinkingLevel?: () => void;
+	onCycleModelForward?: () => void;
+	onCycleModelBackward?: () => void;
+	onSelectModel?: () => void;
+	onExpandTools?: () => void;
+	onToggleThinking?: () => void;
+	onExternalEditor?: () => void;
+	onHistorySearch?: () => void;
+	onSuspend?: () => void;
+	onShowHotkeys?: () => void;
+	onSelectModelTemporary?: () => void;
+	/** Called when the configured copy-prompt shortcut is pressed. */
+	onCopyPrompt?: () => void;
+	/** Called when the configured image-paste shortcut is pressed. */
+	onPasteImage?: () => Promise<boolean>;
+	/** Called when the configured dequeue shortcut is pressed. */
+	onDequeue?: () => void;
+	/** Called when Caps Lock is pressed. */
+	onCapsLock?: () => void;
+
+	/** Custom key handlers from extensions and non-built-in app actions. */
+	#customKeyHandlers = new Map<KeyId, () => void>();
+	#actionKeys = new Map<ConfigurableEditorAction, KeyId[]>(
+		Object.entries(DEFAULT_ACTION_KEYS).map(([action, keys]) => [action as ConfigurableEditorAction, [...keys]]),
+	);
+
+	setActionKeys(action: ConfigurableEditorAction, keys: KeyId[]): void {
+		this.#actionKeys.set(action, [...keys]);
+	}
+
+	#matchesAction(data: string, action: ConfigurableEditorAction): boolean {
+		const keys = this.#actionKeys.get(action);
+		if (!keys) return false;
+		for (const key of keys) {
+			if (matchesKey(data, key)) return true;
+		}
+		return false;
+	}
+
+	/**
+	 * Register a custom key handler. Extensions use this for shortcuts.
+	 */
+	setCustomKeyHandler(key: KeyId, handler: () => void): void {
+		this.#customKeyHandlers.set(key, handler);
+	}
+
+	/**
+	 * Remove a custom key handler.
+	 */
+	removeCustomKeyHandler(key: KeyId): void {
+		this.#customKeyHandlers.delete(key);
+	}
+
+	/**
+	 * Clear all custom key handlers.
+	 */
+	clearCustomKeyHandlers(): void {
+		this.#customKeyHandlers.clear();
+	}
+
+	handleInput(data: string): void {
+		const parsed = parseKittySequence(data);
+		if (parsed && (parsed.modifier & 64) !== 0 && this.onCapsLock) {
+			// Caps Lock is modifier bit 64
+			this.onCapsLock();
+			return;
+		}
+
+		// Intercept configured image paste (async - fires and handles result)
+		if (this.#matchesAction(data, "app.clipboard.pasteImage") && this.onPasteImage) {
+			void this.onPasteImage();
+			return;
+		}
+
+		// Intercept configured external editor shortcut
+		if (this.#matchesAction(data, "app.editor.external") && this.onExternalEditor) {
+			this.onExternalEditor();
+			return;
+		}
+
+		// Intercept configured temporary model selector shortcut
+		if (this.#matchesAction(data, "app.model.selectTemporary") && this.onSelectModelTemporary) {
+			this.onSelectModelTemporary();
+			return;
+		}
+
+		// Intercept configured suspend shortcut
+		if (this.#matchesAction(data, "app.suspend") && this.onSuspend) {
+			this.onSuspend();
+			return;
+		}
+
+		// Intercept configured thinking block visibility toggle
+		if (this.#matchesAction(data, "app.thinking.toggle") && this.onToggleThinking) {
+			this.onToggleThinking();
+			return;
+		}
+
+		// Intercept configured model selector shortcut
+		if (this.#matchesAction(data, "app.model.select") && this.onSelectModel) {
+			this.onSelectModel();
+			return;
+		}
+
+		// Intercept configured history search shortcut
+		if (this.#matchesAction(data, "app.history.search") && this.onHistorySearch) {
+			this.onHistorySearch();
+			return;
+		}
+
+		// Intercept configured tool output expansion shortcut
+		if (this.#matchesAction(data, "app.tools.expand") && this.onExpandTools) {
+			this.onExpandTools();
+			return;
+		}
+
+		// Intercept configured backward model cycling (check before forward cycling)
+		if (this.#matchesAction(data, "app.model.cycleBackward") && this.onCycleModelBackward) {
+			this.onCycleModelBackward();
+			return;
+		}
+
+		// Intercept configured forward model cycling
+		if (this.#matchesAction(data, "app.model.cycleForward") && this.onCycleModelForward) {
+			this.onCycleModelForward();
+			return;
+		}
+
+		// Intercept configured thinking level cycling
+		if (this.#matchesAction(data, "app.thinking.cycle") && this.onCycleThinkingLevel) {
+			this.onCycleThinkingLevel();
+			return;
+		}
+
+		// Intercept configured interrupt shortcut.
+		// Default behavior keeps autocomplete dismissal, but parent can prioritize global interrupt handling.
+		if (this.#matchesAction(data, "app.interrupt") && this.onEscape) {
+			if (!this.isShowingAutocomplete() || this.shouldBypassAutocompleteOnEscape?.()) {
+				this.onEscape();
+				return;
+			}
+		}
+
+		// Intercept configured clear shortcut
+		if (this.#matchesAction(data, "app.clear") && this.onClear) {
+			this.onClear();
+			return;
+		}
+
+		// Intercept configured exit shortcut. Always consume the shortcut so it
+		// never reaches the parent handler; firing onExit is the controller's
+		// chance to snapshot the current text as a draft before shutting down.
+		if (this.#matchesAction(data, "app.exit")) {
+			this.onExit?.();
+			return;
+		}
+
+		// Intercept configured dequeue shortcut (restore queued message to editor)
+		if (this.#matchesAction(data, "app.message.dequeue") && this.onDequeue) {
+			this.onDequeue();
+			return;
+		}
+
+		// Intercept configured copy-prompt shortcut
+		if (this.#matchesAction(data, "app.clipboard.copyPrompt") && this.onCopyPrompt) {
+			this.onCopyPrompt();
+			return;
+		}
+
+		// Intercept ? when editor is empty to show hotkeys
+		if (data === "?" && this.getText().length === 0 && this.onShowHotkeys) {
+			this.onShowHotkeys();
+			return;
+		}
+
+		// Check custom key handlers (extensions)
+		for (const [keyId, handler] of this.#customKeyHandlers) {
+			if (matchesKey(data, keyId)) {
+				handler();
+				return;
+			}
+		}
+
+		// Pass to parent for normal handling
+		super.handleInput(data);
+	}
+}

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

@@ -0,0 +1,65 @@
+import type { Component } from "@gajae-code/tui";
+import { Box, Container, Spacer } from "@gajae-code/tui";
+import type { MessageRenderer } from "../../extensibility/extensions/types";
+import { theme } from "../../modes/theme/theme";
+import type { CustomMessage } from "../../session/messages";
+import { renderFramedMessage } from "./message-frame";
+
+/**
+ * Component that renders a custom message entry from extensions.
+ * Uses distinct styling to differentiate from user messages.
+ */
+export class CustomMessageComponent extends Container {
+	#box: Box;
+	#customComponent?: Component;
+	#expanded = false;
+
+	constructor(
+		private readonly message: CustomMessage<unknown>,
+		private readonly customRenderer?: MessageRenderer,
+	) {
+		super();
+
+		this.addChild(new Spacer(1));
+
+		// Create box with custom background (used for default rendering)
+		this.#box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+
+		this.#rebuild();
+	}
+
+	setExpanded(expanded: boolean): void {
+		if (this.#expanded !== expanded) {
+			this.#expanded = expanded;
+			this.#rebuild();
+		}
+	}
+
+	override invalidate(): void {
+		super.invalidate();
+		this.#rebuild();
+	}
+
+	#rebuild(): void {
+		if (this.#customComponent) {
+			this.removeChild(this.#customComponent);
+			this.#customComponent = undefined;
+		}
+		this.removeChild(this.#box);
+
+		const custom = renderFramedMessage({
+			message: this.message,
+			box: this.#box,
+			expanded: this.#expanded,
+			customRenderer: this.customRenderer,
+			// Extension messages render full content; no collapse-on-fold behaviour.
+		});
+
+		if (custom) {
+			this.#customComponent = custom;
+			this.addChild(custom);
+		} else {
+			this.addChild(this.#box);
+		}
+	}
+}

package/src/modes/components/diff.ts

@@ -0,0 +1,266 @@
+import { getIndentation, sanitizeText } from "@gajae-code/utils";
+import * as Diff from "diff";
+import { getLanguageFromPath, highlightCode, theme } from "../../modes/theme/theme";
+import { type CodeFrameMarker, formatCodeFrameLine, replaceTabs } from "../../tools/render-utils";
+
+/** SGR dim on / normal intensity — additive, preserves fg/bg colors. */
+const DIM = "\x1b[2m";
+const DIM_OFF = "\x1b[22m";
+
+/**
+ * Visualize leading whitespace (indentation) with dim glyphs.
+ * Tabs become ` → ` and spaces become `·`. Only affects whitespace
+ * before the first non-whitespace character; remaining tabs in code
+ * content are replaced with spaces (like replaceTabs).
+ */
+function visualizeIndent(text: string, filePath?: string): string {
+	const match = text.match(/^([ \t]+)/);
+	if (!match) return replaceTabs(text, filePath);
+	const indent = match[1];
+	const rest = text.slice(indent.length);
+	const tabWidth = getIndentation(filePath);
+	const leftPadding = Math.floor(tabWidth / 2);
+	const rightPadding = Math.max(0, tabWidth - leftPadding - 1);
+	const tabMarker = `${DIM}${" ".repeat(leftPadding)}→${" ".repeat(rightPadding)}${DIM_OFF}`;
+	let visible = "";
+	for (const ch of indent) {
+		if (ch === "\t") {
+			visible += tabMarker;
+		} else {
+			visible += `${DIM}·${DIM_OFF}`;
+		}
+	}
+	return `${visible}${replaceTabs(rest, filePath)}`;
+}
+
+/**
+ * Parse diff line to extract prefix, line number, and content.
+ * Supported formats: "+123|content" (canonical) and "+123 content" (legacy).
+ */
+function parseDiffLine(line: string): { prefix: CodeFrameMarker; lineNum: string; content: string } | null {
+	const canonical = line.match(/^([+-\s])(\s*\d+)\|(.*)$/);
+	if (canonical) {
+		return { prefix: canonical[1] as CodeFrameMarker, lineNum: canonical[2] ?? "", content: canonical[3] ?? "" };
+	}
+	const legacy = line.match(/^([+-\s])(?:(\s*\d+)\s)?(.*)$/);
+	if (!legacy) return null;
+	return { prefix: legacy[1] as CodeFrameMarker, lineNum: legacy[2] ?? "", content: legacy[3] ?? "" };
+}
+
+/**
+ * Compute word-level diff and render with inverse on changed parts.
+ * Uses diffWords which groups whitespace with adjacent words for cleaner highlighting.
+ * Strips leading whitespace from inverse to avoid highlighting indentation.
+ */
+function renderIntraLineDiff(oldContent: string, newContent: string): { removedLine: string; addedLine: string } {
+	const wordDiff = Diff.diffWords(oldContent, newContent);
+
+	let removedLine = "";
+	let addedLine = "";
+	let isFirstRemoved = true;
+	let isFirstAdded = true;
+
+	for (const part of wordDiff) {
+		if (part.removed) {
+			let value = part.value;
+			// Strip leading whitespace from the first removed part
+			if (isFirstRemoved) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				removedLine += leadingWs;
+				isFirstRemoved = false;
+			}
+			if (value) {
+				removedLine += theme.inverse(value);
+			}
+		} else if (part.added) {
+			let value = part.value;
+			// Strip leading whitespace from the first added part
+			if (isFirstAdded) {
+				const leadingWs = value.match(/^(\s*)/)?.[1] || "";
+				value = value.slice(leadingWs.length);
+				addedLine += leadingWs;
+				isFirstAdded = false;
+			}
+			if (value) {
+				addedLine += theme.inverse(value);
+			}
+		} else {
+			removedLine += part.value;
+			addedLine += part.value;
+		}
+	}
+
+	return { removedLine, addedLine };
+}
+
+export interface RenderDiffOptions {
+	/** File path used to resolve indentation (.editorconfig + defaults) */
+	filePath?: string;
+}
+
+/**
+ * Render a diff string with colored lines and intra-line change highlighting.
+ * - Context lines: dim/gray
+ * - Removed lines: red, with inverse on changed tokens
+ * - Added lines: green, with inverse on changed tokens
+ */
+export function renderDiff(diffText: string, options: RenderDiffOptions = {}): string {
+	const lines = sanitizeText(diffText).split("\n");
+	const result: string[] = [];
+	const parsedLines = lines.map(parseDiffLine);
+	const lineNumberWidth = parsedLines.reduce((width, parsed) => {
+		const lineNumber = parsed?.lineNum.trim() ?? "";
+		return Math.max(width, lineNumber.length);
+	}, 0);
+
+	// Batch-highlight context (unedited) lines so consecutive lines tokenize
+	// with full multi-line context. Highlighting is a no-op when no language
+	// can be detected from the file path.
+	const contextHighlights = highlightContextLines(parsedLines, options.filePath);
+	// Track the line number rendered on the previous emitted line so we can
+	// blank out duplicate gutters. Two cases trigger this:
+	//  1. Single-line replacement (`-N` followed by `+N`) — the `+N` repeats `N`.
+	//  2. Insertion followed by context (`+N` then ` N` if producer used oldLine).
+	let prevLineNum = "";
+
+	const formatLine = (prefix: CodeFrameMarker, lineNum: string, content: string): string => {
+		if (lineNum.trim().length === 0) {
+			prevLineNum = "";
+			return `${prefix}${content}`;
+		}
+		const trimmed = lineNum.trim();
+		const displayNum = trimmed === prevLineNum ? "" : trimmed;
+		prevLineNum = trimmed;
+		return formatCodeFrameLine(prefix, displayNum, content, lineNumberWidth);
+	};
+
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		const parsed = parseDiffLine(line);
+
+		if (!parsed) {
+			prevLineNum = "";
+			result.push(theme.fg("toolDiffContext", replaceTabs(line, options.filePath)));
+			i++;
+			continue;
+		}
+
+		if (parsed.prefix === "-") {
+			const removedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "-") break;
+				removedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			const addedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (!p || p.prefix !== "+") break;
+				addedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			if (removedLines.length === 1 && addedLines.length === 1) {
+				const removed = removedLines[0];
+				const added = addedLines[0];
+
+				const { removedLine, addedLine } = renderIntraLineDiff(
+					replaceTabs(removed.content),
+					replaceTabs(added.content),
+				);
+
+				result.push(
+					theme.fg(
+						"toolDiffRemoved",
+						formatLine("-", removed.lineNum, visualizeIndent(removedLine, options.filePath)),
+					),
+				);
+				result.push(
+					theme.fg("toolDiffAdded", formatLine("+", added.lineNum, visualizeIndent(addedLine, options.filePath))),
+				);
+			} else {
+				for (const removed of removedLines) {
+					result.push(
+						theme.fg(
+							"toolDiffRemoved",
+							formatLine("-", removed.lineNum, visualizeIndent(removed.content, options.filePath)),
+						),
+					);
+				}
+				for (const added of addedLines) {
+					result.push(
+						theme.fg(
+							"toolDiffAdded",
+							formatLine("+", added.lineNum, visualizeIndent(added.content, options.filePath)),
+						),
+					);
+				}
+			}
+		} else if (parsed.prefix === "+") {
+			result.push(
+				theme.fg(
+					"toolDiffAdded",
+					formatLine("+", parsed.lineNum, visualizeIndent(parsed.content, options.filePath)),
+				),
+			);
+			i++;
+		} else {
+			const highlighted = contextHighlights.get(i);
+			const content =
+				highlighted !== undefined
+					? replaceTabs(highlighted, options.filePath)
+					: visualizeIndent(parsed.content, options.filePath);
+			result.push(theme.fg("toolDiffContext", formatLine(" ", parsed.lineNum, content)));
+			i++;
+		}
+	}
+
+	return result.join("\n");
+}
+
+/**
+ * Batch-highlight runs of consecutive context lines.
+ * Returns a map keyed by index in `parsedLines` to the highlighted content
+ * for that line. Lines whose language is unknown are not added to the map,
+ * letting callers fall back to the existing rendering path.
+ */
+function highlightContextLines(
+	parsedLines: Array<{ prefix: CodeFrameMarker; lineNum: string; content: string } | null>,
+	filePath: string | undefined,
+): Map<number, string> {
+	const map = new Map<number, string>();
+	const lang = filePath ? getLanguageFromPath(filePath) : undefined;
+	if (!lang) return map;
+
+	let runIndices: number[] = [];
+	let runContents: string[] = [];
+	const flush = () => {
+		if (runContents.length === 0) return;
+		const highlighted = highlightCode(runContents.join("\n"), lang);
+		for (let k = 0; k < runIndices.length; k++) {
+			map.set(runIndices[k], highlighted[k] ?? runContents[k]);
+		}
+		runIndices = [];
+		runContents = [];
+	};
+
+	for (let j = 0; j < parsedLines.length; j++) {
+		const p = parsedLines[j];
+		// Collapse markers ("...") are emitted as context lines but are not real
+		// code; highlighting them produces nonsense (e.g. "..." → spread operator)
+		// and would also stitch together unrelated context blocks across the gap.
+		const isCollapseMarker = p?.prefix === " " && (p.content === "..." || p.content === "…");
+		if (p && p.prefix === " " && !isCollapseMarker) {
+			runIndices.push(j);
+			runContents.push(p.content);
+		} else {
+			flush();
+		}
+	}
+	flush();
+	return map;
+}

package/src/modes/components/dynamic-border.ts

@@ -0,0 +1,25 @@
+import type { Component } from "@gajae-code/tui";
+import { theme } from "../../modes/theme/theme";
+
+/**
+ * Dynamic border component that adjusts to viewport width.
+ *
+ * Note: When used from hooks loaded via jiti, the global `theme` may be undefined
+ * because jiti creates a separate module cache. Always pass an explicit color
+ * function when using DynamicBorder in components exported for hook use.
+ */
+export class DynamicBorder implements Component {
+	#color: (str: string) => string;
+
+	constructor(color: (str: string) => string = str => theme.fg("border", str)) {
+		this.#color = color;
+	}
+
+	invalidate(): void {
+		// No cached state to invalidate currently
+	}
+
+	render(width: number): string[] {
+		return [this.#color(theme.boxSharp.horizontal.repeat(Math.max(1, width)))];
+	}
+}