@f5-sales-demo/xcsh 19.51.2

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

@@ -0,0 +1,75 @@
+/**
+ * Reusable countdown timer for dialog components.
+ */
+import type { TUI } from "@f5xc-salesdemos/pi-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,238 @@
+import { Editor, type KeyId, matchesKey, parseKittySequence } from "@f5xc-salesdemos/pi-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 (only when editor is empty)
+		if (this.#matchesAction(data, "app.exit")) {
+			if (this.getText().length === 0 && this.onExit) {
+				this.onExit();
+			}
+			// Always consume exit shortcut (don't pass to parent)
+			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,91 @@
+import type { TextContent } from "@f5xc-salesdemos/pi-ai";
+import type { Component } from "@f5xc-salesdemos/pi-tui";
+import { Box, Container, Markdown, Spacer, Text } from "@f5xc-salesdemos/pi-tui";
+import type { MessageRenderer } from "../../extensibility/extensions/types";
+import { getMarkdownTheme, theme } from "../../modes/theme/theme";
+import type { CustomMessage } from "../../session/messages";
+
+/**
+ * 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, 0, 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 {
+		// Remove previous content component
+		if (this.#customComponent) {
+			this.removeChild(this.#customComponent);
+			this.#customComponent = undefined;
+		}
+		this.removeChild(this.#box);
+
+		// Try custom renderer first - it handles its own styling
+		if (this.customRenderer) {
+			try {
+				const component = this.customRenderer(this.message, { expanded: this.#expanded }, theme);
+				if (component) {
+					this.#customComponent = component;
+					this.addChild(component);
+					return;
+				}
+			} catch {
+				// Fall through to default rendering
+			}
+		}
+
+		// Default rendering uses our box
+		this.addChild(this.#box);
+		this.#box.clear();
+
+		// Default rendering: label + content
+		const label = theme.fg("customMessageLabel", theme.bold(`[${this.message.customType}]`));
+		this.#box.addChild(new Text(label, 0, 0));
+		this.#box.addChild(new Spacer(1));
+
+		// Extract text content
+		let text: string;
+		if (typeof this.message.content === "string") {
+			text = this.message.content;
+		} else {
+			text = this.message.content
+				.filter((c): c is TextContent => c.type === "text")
+				.map(c => c.text)
+				.join("\n");
+		}
+
+		this.#box.addChild(
+			new Markdown(text, 0, 0, getMarkdownTheme(), {
+				color: (value: string) => theme.fg("customMessageText", value),
+			}),
+		);
+	}
+}

package/src/modes/components/diff.ts

@@ -0,0 +1,210 @@
+import { getIndentation } from "@f5xc-salesdemos/pi-utils";
+import * as Diff from "diff";
+import { theme } from "../../modes/theme/theme";
+import { 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);
+	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)}`;
+}
+
+/**
+ * Parse diff line to extract prefix, line number, and content.
+ * Supported formats: "+123|content" (canonical) and "+123 content" (legacy).
+ */
+function parseDiffLine(line: string): { prefix: string; lineNum: string; content: string } | null {
+	const canonical = line.match(/^([+-\s])(\s*\d+)\|(.*)$/);
+	if (canonical) {
+		return { prefix: canonical[1], lineNum: canonical[2], content: canonical[3] };
+	}
+	const legacy = line.match(/^([+-\s])(?:(\s*\d+)\s)?(.*)$/);
+	if (!legacy) return null;
+	return { prefix: legacy[1], 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 = diffText.split("\n");
+	const result: string[] = [];
+
+	const formatLine = (prefix: string, lineNum: string, content: string): string => {
+		if (lineNum.trim().length === 0) {
+			return `${prefix}${content}`;
+		}
+		return `${prefix}${lineNum}|${content}`;
+	};
+
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		const parsed = parseDiffLine(line);
+
+		if (!parsed) {
+			result.push(theme.fg("toolDiffContext", line));
+			i++;
+			continue;
+		}
+
+		if (parsed.prefix === "-") {
+			// Collect consecutive removed lines
+			const removedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (p?.prefix !== "-") break;
+				removedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Collect consecutive added lines
+			const addedLines: { lineNum: string; content: string }[] = [];
+			while (i < lines.length) {
+				const p = parseDiffLine(lines[i]);
+				if (p?.prefix !== "+") break;
+				addedLines.push({ lineNum: p.lineNum, content: p.content });
+				i++;
+			}
+
+			// Only do intra-line diffing when there's exactly one removed and one added line
+			// (indicating a single line modification). Otherwise, show lines as-is.
+			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 {
+				// Show all removed lines first, then all added lines
+				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 === "+") {
+			// Standalone added line
+			result.push(
+				theme.fg(
+					"toolDiffAdded",
+					formatLine("+", parsed.lineNum, visualizeIndent(parsed.content, options.filePath)),
+				),
+			);
+			i++;
+		} else {
+			// Context line
+			result.push(
+				theme.fg(
+					"toolDiffContext",
+					formatLine(" ", parsed.lineNum, visualizeIndent(parsed.content, options.filePath)),
+				),
+			);
+			i++;
+		}
+	}
+
+	return result.join("\n");
+}

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

@@ -0,0 +1,25 @@
+import type { Component } from "@f5xc-salesdemos/pi-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)))];
+	}
+}