@jawcode-dev/coding-agent 1.1.0

package/src/modes/components/index.ts

@@ -0,0 +1,36 @@
+// UI Components barrel export
+export * from "./assistant-message";
+export * from "./bash-execution";
+export * from "./bordered-loader";
+export * from "./branch-summary-message";
+export * from "./compaction-summary-message";
+export * from "./countdown-timer";
+export * from "./custom-editor";
+export * from "./custom-message";
+export * from "./diff";
+export * from "./dynamic-border";
+export * from "./footer";
+export * from "./hook-editor";
+export * from "./hook-input";
+export * from "./hook-message";
+export * from "./hook-selector";
+export * from "./keybinding-hints";
+export * from "./login-dialog";
+export * from "./model-selector";
+export * from "./oauth-selector";
+export * from "./queue-mode-selector";
+export * from "./read-tool-group";
+export * from "./session-selector";
+export * from "./settings-selector";
+export * from "./show-images-selector";
+export * from "./status-line";
+export * from "./theme-selector";
+export * from "./thinking-selector";
+export * from "./todo-reminder";
+export * from "./tool-execution";
+export * from "./tree-selector";
+export * from "./ttsr-notification";
+export * from "./user-message";
+export * from "./user-message-selector";
+export * from "./visual-truncate";
+export * from "./welcome";

package/src/modes/components/jobs-overlay-model.ts

@@ -0,0 +1,109 @@
+/**
+ * Pure model helpers for the jobs overlay.
+ *
+ * Kept free of UI/Component dependencies so the grouping/ordering and
+ * detail-formatting logic is unit-testable. The selector controller wires these
+ * SelectItem lists into nested SelectLists (list -> detail -> confirm).
+ */
+import type { SelectItem } from "@jawcode-dev/tui";
+import type { JobsSnapshot } from "../jobs-observer";
+
+export type JobRefKind = "monitor" | "cron";
+
+export interface JobRef {
+	kind: JobRefKind;
+	id: string;
+}
+
+const PROMPT_PREVIEW_MAX = 60;
+
+function preview(text: string, max = PROMPT_PREVIEW_MAX): string {
+	const oneLine = text.replace(/\s+/g, " ").trim();
+	return oneLine.length > max ? `${oneLine.slice(0, max - 1)}…` : oneLine;
+}
+
+/** Compact relative time, e.g. "in 5m", "2m ago", "now". */
+export function formatRelative(targetMs: number | undefined, nowMs = Date.now()): string {
+	if (targetMs === undefined) return "—";
+	const deltaMs = targetMs - nowMs;
+	const abs = Math.abs(deltaMs);
+	const mins = Math.round(abs / 60_000);
+	if (mins < 1) return "now";
+	const unit = mins >= 60 ? `${Math.round(mins / 60)}h` : `${mins}m`;
+	return deltaMs >= 0 ? `in ${unit}` : `${unit} ago`;
+}
+
+/** Parse a list item value back into a job reference. */
+export function parseJobRef(value: string): JobRef | null {
+	const sep = value.indexOf(":");
+	if (sep === -1) return null;
+	const kind = value.slice(0, sep);
+	const id = value.slice(sep + 1);
+	if ((kind === "monitor" || kind === "cron") && id.length > 0) {
+		return { kind, id };
+	}
+	return null;
+}
+
+/**
+ * Build the grouped jobs list: monitors first (newest-first), then crons
+ * (newest-first). The snapshot arrays are already sorted newest-first.
+ */
+export function buildJobsListItems(snapshot: JobsSnapshot): SelectItem[] {
+	const items: SelectItem[] = [];
+	for (const monitor of snapshot.monitors) {
+		items.push({
+			value: `monitor:${monitor.id}`,
+			label: `monitor · ${preview(monitor.label, 40)}`,
+			description: monitor.status,
+			hint: monitor.status === "failed" ? "failed" : undefined,
+		});
+	}
+	for (const cron of snapshot.crons) {
+		items.push({
+			value: `cron:${cron.id}`,
+			label: `cron · ${cron.humanSchedule}`,
+			description: preview(cron.prompt),
+		});
+	}
+	return items;
+}
+
+/**
+ * Build the detail-level items for a job: read-only info rows (value "noop"),
+ * then the destructive action, then a back row. `output` is the bounded monitor
+ * output tail (ignored for cron jobs).
+ */
+export function buildJobDetailItems(snapshot: JobsSnapshot, ref: JobRef, output = ""): SelectItem[] {
+	if (ref.kind === "monitor") {
+		const monitor = snapshot.monitors.find(m => m.id === ref.id);
+		if (!monitor) return [{ value: "back", label: "Back (job no longer present)" }];
+		const lastOutput = output.trim().split("\n").filter(Boolean).slice(-1)[0] ?? "(no output captured)";
+		return [
+			{ value: "noop", label: "Status", description: monitor.status },
+			{ value: "noop", label: "Label", description: preview(monitor.label) },
+			{ value: "noop", label: "Started", description: formatRelative(monitor.startTime) },
+			{ value: "noop", label: "Output", description: preview(lastOutput, 80) },
+			{ value: "action:cancel", label: "Cancel this monitor", hint: "stops the running job" },
+			{ value: "back", label: "Back" },
+		];
+	}
+	const cron = snapshot.crons.find(c => c.id === ref.id);
+	if (!cron) return [{ value: "back", label: "Back (job no longer present)" }];
+	return [
+		{ value: "noop", label: "Schedule", description: `${cron.humanSchedule} (${cron.cronExpression})` },
+		{ value: "noop", label: "Recurring", description: cron.recurring ? "yes" : "no" },
+		{ value: "noop", label: "Next fire", description: formatRelative(cron.nextFireAt) },
+		{ value: "noop", label: "Prompt", description: preview(cron.prompt, 80) },
+		{ value: "action:delete", label: "Delete this cron", hint: "removes the schedule" },
+		{ value: "back", label: "Back" },
+	];
+}
+
+/** Yes/No confirm items for a destructive action. */
+export function buildConfirmItems(actionLabel: string): SelectItem[] {
+	return [
+		{ value: "no", label: `No, keep it` },
+		{ value: "yes", label: `Yes, ${actionLabel}` },
+	];
+}

package/src/modes/components/jobs-overlay.ts

@@ -0,0 +1,172 @@
+import { Container, type SelectItem, SelectList } from "@jawcode-dev/tui";
+import type { JobsSnapshot } from "../jobs-observer";
+import { getSelectListTheme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+import {
+	buildConfirmItems,
+	buildJobDetailItems,
+	buildJobsListItems,
+	type JobRef,
+	parseJobRef,
+} from "./jobs-overlay-model";
+
+/**
+ * Generic single-level selector used by the jobs overlay. The selector
+ * controller mounts a fresh instance per navigation level (list -> detail ->
+ * confirm); focus is placed on the inner SelectList, matching the existing
+ * selector components (e.g. ThemeSelectorComponent).
+ */
+export class JobsSelectorComponent extends Container {
+	#selectList: SelectList;
+
+	constructor(items: SelectItem[], onSelect: (item: SelectItem) => void, onCancel: () => void, maxVisible = 12) {
+		super();
+		this.addChild(new DynamicBorder());
+		this.#selectList = new SelectList(items, maxVisible, getSelectListTheme());
+		this.#selectList.onSelect = onSelect;
+		this.#selectList.onCancel = onCancel;
+		this.addChild(this.#selectList);
+		this.addChild(new DynamicBorder());
+	}
+
+	getSelectList(): SelectList {
+		return this.#selectList;
+	}
+}
+
+export interface JobsOverlayController {
+	acknowledgeFailures(): void;
+	getSnapshot(): JobsSnapshot;
+	getMonitorOutput(id: string): string;
+	cancelMonitor(id: string): boolean;
+	deleteCron(id: string): boolean;
+}
+
+export interface JobsOverlayCallbacks {
+	close(): void;
+	requestRender(): void;
+}
+
+type JobsOverlayView = "list" | "detail" | "confirm";
+type JobsOverlayAction = "cancel" | "delete";
+
+export class JobsOverlayComponent extends Container {
+	readonly #controller: JobsOverlayController;
+	readonly #callbacks: JobsOverlayCallbacks;
+	#view: JobsOverlayView = "list";
+	#ref: JobRef | undefined;
+	#action: JobsOverlayAction | undefined;
+	#selectList: SelectList | undefined;
+
+	constructor(controller: JobsOverlayController, callbacks: JobsOverlayCallbacks) {
+		super();
+		this.#controller = controller;
+		this.#callbacks = callbacks;
+		this.#controller.acknowledgeFailures();
+		this.#renderList();
+	}
+
+	getFocus(): SelectList {
+		if (!this.#selectList) throw new Error("Jobs overlay has no focusable list");
+		return this.#selectList;
+	}
+
+	handleInput(data: string): void {
+		if (this.#view === "confirm") {
+			const key = data.toLowerCase();
+			if (key === "y") {
+				this.#confirmYes();
+				return;
+			}
+			if (key === "n") {
+				this.#renderDetail();
+				return;
+			}
+		}
+		this.#selectList?.handleInput(data);
+	}
+
+	#replaceList(
+		items: SelectItem[],
+		onSelect: (item: SelectItem) => void,
+		onCancel: () => void,
+		maxVisible = 12,
+	): void {
+		this.clear();
+		this.addChild(new DynamicBorder());
+		this.#selectList = new SelectList(items, maxVisible, getSelectListTheme());
+		this.#selectList.onSelect = onSelect;
+		this.#selectList.onCancel = onCancel;
+		this.addChild(this.#selectList);
+		this.addChild(new DynamicBorder());
+		this.#callbacks.requestRender();
+	}
+
+	#renderList(): void {
+		this.#view = "list";
+		this.#ref = undefined;
+		this.#action = undefined;
+		const snapshot = this.#controller.getSnapshot();
+		const built = buildJobsListItems(snapshot);
+		const items = built.length > 0 ? built : [{ value: "close", label: "No active monitor or cron jobs" }];
+		this.#replaceList(
+			items,
+			item => {
+				const ref = parseJobRef(item.value);
+				if (ref) this.#renderDetail(ref);
+				else this.#callbacks.close();
+			},
+			() => this.#callbacks.close(),
+		);
+	}
+
+	#renderDetail(ref = this.#ref): void {
+		if (!ref) {
+			this.#renderList();
+			return;
+		}
+		this.#view = "detail";
+		this.#ref = ref;
+		this.#action = undefined;
+		const output = ref.kind === "monitor" ? this.#controller.getMonitorOutput(ref.id) : "";
+		const items = buildJobDetailItems(this.#controller.getSnapshot(), ref, output);
+		this.#replaceList(
+			items,
+			item => {
+				if (item.value === "action:cancel") this.#renderConfirm("cancel");
+				else if (item.value === "action:delete") this.#renderConfirm("delete");
+				else if (item.value === "back") this.#renderList();
+			},
+			() => this.#callbacks.close(),
+		);
+	}
+
+	#renderConfirm(action: JobsOverlayAction): void {
+		if (!this.#ref) {
+			this.#renderList();
+			return;
+		}
+		this.#view = "confirm";
+		this.#action = action;
+		const label = action === "cancel" ? "cancel this monitor" : "delete this cron";
+		this.#replaceList(
+			buildConfirmItems(label),
+			item => {
+				if (item.value === "yes") this.#confirmYes();
+				else this.#renderDetail();
+			},
+			() => this.#renderDetail(),
+			4,
+		);
+	}
+
+	#confirmYes(): void {
+		if (!this.#ref || !this.#action) {
+			this.#renderList();
+			return;
+		}
+		if (this.#action === "cancel") this.#controller.cancelMonitor(this.#ref.id);
+		else this.#controller.deleteCron(this.#ref.id);
+		this.#renderList();
+	}
+}

package/src/modes/components/keybinding-hints.ts

@@ -0,0 +1,65 @@
+/**
+ * Utilities for formatting keybinding hints in the UI.
+ */
+import { getKeybindings, type Keybinding, type KeyId } from "@jawcode-dev/tui";
+import type { AppKeybinding, KeybindingsManager } from "../../config/keybindings";
+import { theme } from "../../modes/theme/theme";
+
+/**
+ * Format keys array as display string (e.g., ["ctrl+c", "escape"] -> "ctrl+c/escape").
+ */
+function formatKeys(keys: KeyId[]): string {
+	if (keys.length === 0) return "";
+	if (keys.length === 1) return keys[0]!;
+	return keys.join("/");
+}
+
+/**
+ * Get display string for an editor action.
+ */
+export function editorKey(action: Keybinding): string {
+	return formatKeys(getKeybindings().getKeys(action));
+}
+
+/**
+ * Get display string for an app action.
+ */
+export function appKey(keybindings: KeybindingsManager, action: AppKeybinding): string {
+	return formatKeys(keybindings.getKeys(action));
+}
+
+/**
+ * Format a keybinding hint with consistent styling: dim key, muted description.
+ * Looks up the key from editor keybindings automatically.
+ *
+ * @param action - Keybinding action name (e.g., "tui.select.confirm", "app.tools.expand")
+ * @param description - Description text (e.g., "to expand", "cancel")
+ * @returns Formatted string with dim key and muted description
+ */
+export function keyHint(action: Keybinding, description: string): string {
+	return theme.fg("dim", editorKey(action)) + theme.fg("muted", ` ${description}`);
+}
+
+/**
+ * Format a keybinding hint for app-level actions.
+ * Requires the KeybindingsManager instance.
+ *
+ * @param keybindings - KeybindingsManager instance
+ * @param action - App keybinding name (e.g., "app.interrupt", "app.editor.external")
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function appKeyHint(keybindings: KeybindingsManager, action: AppKeybinding, description: string): string {
+	return theme.fg("dim", appKey(keybindings, action)) + theme.fg("muted", ` ${description}`);
+}
+
+/**
+ * Format a raw key string with description (for non-configurable keys like ↑↓).
+ *
+ * @param key - Raw key string
+ * @param description - Description text
+ * @returns Formatted string with dim key and muted description
+ */
+export function rawKeyHint(key: string, description: string): string {
+	return theme.fg("dim", key) + theme.fg("muted", ` ${description}`);
+}

package/src/modes/components/login-dialog.ts

@@ -0,0 +1,164 @@
+import { getOAuthProviders } from "@jawcode-dev/ai/utils/oauth";
+import { Container, getKeybindings, Input, Spacer, Text, type TUI } from "@jawcode-dev/tui";
+import { theme } from "../../modes/theme/theme";
+import { openPath } from "../../utils/open";
+import { DynamicBorder } from "./dynamic-border";
+
+/**
+ * Login dialog component - replaces editor during OAuth login flow
+ */
+export class LoginDialogComponent extends Container {
+	#contentContainer: Container;
+	#input: Input;
+	#tui: TUI;
+	#abortController = new AbortController();
+	#inputResolver?: (value: string) => void;
+	#inputRejecter?: (error: Error) => void;
+
+	constructor(
+		tui: TUI,
+		providerId: string,
+		private onComplete: (success: boolean, message?: string) => void,
+	) {
+		super();
+		this.#tui = tui;
+
+		const providerInfo = getOAuthProviders().find(p => p.id === providerId);
+		const providerName = providerInfo?.name || providerId;
+
+		// Top border
+		this.addChild(new DynamicBorder());
+
+		// Title
+		this.addChild(new Text(theme.fg("warning", `Login to ${providerName}`), 1, 0));
+
+		// Dynamic content area
+		this.#contentContainer = new Container();
+		this.addChild(this.#contentContainer);
+
+		// Input (always present, used when needed)
+		this.#input = new Input();
+		this.#input.onSubmit = () => {
+			if (this.#inputResolver) {
+				this.#inputResolver(this.#input.getValue());
+				this.#inputResolver = undefined;
+				this.#inputRejecter = undefined;
+			}
+		};
+		this.#input.onEscape = () => {
+			this.#cancel();
+		};
+
+		// Bottom border
+		this.addChild(new DynamicBorder());
+	}
+
+	get signal(): AbortSignal {
+		return this.#abortController.signal;
+	}
+
+	#cancel(): void {
+		this.#abortController.abort();
+		if (this.#inputRejecter) {
+			this.#inputRejecter(new Error("Login cancelled"));
+			this.#inputResolver = undefined;
+			this.#inputRejecter = undefined;
+		}
+		this.onComplete(false, "Login cancelled");
+	}
+
+	/**
+	 * Called by onAuth callback - show URL and optional instructions
+	 */
+	showAuth(url: string, instructions?: string): void {
+		this.#contentContainer.clear();
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("accent", url), 1, 0));
+
+		const clickHint = process.platform === "darwin" ? "Cmd+click to open" : "Ctrl+click to open";
+		const hyperlink = `\x1b]8;;${url}\x07${clickHint}\x1b]8;;\x07`;
+		this.#contentContainer.addChild(new Text(theme.fg("dim", hyperlink), 1, 0));
+
+		if (instructions) {
+			this.#contentContainer.addChild(new Spacer(1));
+			this.#contentContainer.addChild(new Text(theme.fg("warning", instructions), 1, 0));
+		}
+
+		// Open browser (best-effort)
+		openPath(url);
+
+		this.#tui.requestRender();
+	}
+
+	/**
+	 * Show input for manual code/URL entry (for callback server providers)
+	 */
+	showManualInput(prompt: string): Promise<string> {
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("dim", prompt), 1, 0));
+		if (!this.#contentContainer.children.includes(this.#input)) {
+			this.#contentContainer.addChild(this.#input);
+		}
+		this.#contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel)"), 1, 0));
+		this.#tui.requestRender();
+
+		const { promise, resolve, reject } = Promise.withResolvers<string>();
+		this.#inputResolver = resolve;
+		this.#inputRejecter = reject;
+		return promise;
+	}
+
+	/**
+	 * Called by onPrompt callback - show prompt and wait for input
+	 * Note: Does NOT clear content, appends to existing (preserves URL from showAuth)
+	 */
+	showPrompt(message: string, placeholder?: string): Promise<string> {
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("text", message), 1, 0));
+		if (placeholder) {
+			this.#contentContainer.addChild(new Text(theme.fg("dim", `e.g., ${placeholder}`), 1, 0));
+		}
+		if (!this.#contentContainer.children.includes(this.#input)) {
+			this.#contentContainer.addChild(this.#input);
+		}
+		this.#contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel, Enter to submit)"), 1, 0));
+
+		this.#input.setValue("");
+		this.#tui.requestRender();
+
+		const { promise, resolve, reject } = Promise.withResolvers<string>();
+		this.#inputResolver = resolve;
+		this.#inputRejecter = reject;
+		return promise;
+	}
+
+	/**
+	 * Show waiting message (for polling flows like GitHub Copilot)
+	 */
+	showWaiting(message: string): void {
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+		this.#contentContainer.addChild(new Text(theme.fg("dim", "(Escape to cancel)"), 1, 0));
+		this.#tui.requestRender();
+	}
+
+	/**
+	 * Called by onProgress callback
+	 */
+	showProgress(message: string): void {
+		this.#contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+		this.#tui.requestRender();
+	}
+
+	handleInput(data: string): void {
+		const kb = getKeybindings();
+
+		if (kb.matches(data, "tui.select.cancel")) {
+			this.#cancel();
+			return;
+		}
+
+		// Pass to input
+		this.#input.handleInput(data);
+	}
+}

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

@@ -0,0 +1,88 @@
+/**
+ * Shared rendering for extension/hook custom message frames.
+ *
+ * Both `CustomMessageComponent` and `HookMessageComponent` wrap a
+ * `Spacer(1) + Box` layout, try a user-supplied renderer first, and fall
+ * back to a label + markdown body when the renderer returns nothing or
+ * throws. The only meaningful difference is that hook messages collapse to
+ * the first N lines when not expanded; extension messages render in full.
+ */
+
+import type { TextContent } from "@jawcode-dev/ai";
+import type { Box, Component } from "@jawcode-dev/tui";
+import { Markdown, Spacer, Text } from "@jawcode-dev/tui";
+import { getMarkdownTheme, type Theme, theme } from "../../modes/theme/theme";
+
+/** Message shape consumed by the shared frame. */
+export interface FramedMessage {
+	customType: string;
+	content: string | (TextContent | { type: string })[];
+}
+
+/**
+ * Callable signature shared by `MessageRenderer` (extensions) and
+ * `HookMessageRenderer` (hooks). Both narrow `message` to their own type;
+ * this signature is the structural intersection callers can hand off here.
+ */
+export type FramedRenderer<M extends FramedMessage> = (
+	message: M,
+	options: { expanded: boolean },
+	theme: Theme,
+) => Component | undefined;
+
+export interface RebuildFrameOptions<M extends FramedMessage> {
+	message: M;
+	box: Box;
+	expanded: boolean;
+	/** Collapse the markdown body to this many lines when `expanded` is false. Omit to never collapse. */
+	collapseAfterLines?: number;
+	customRenderer?: FramedRenderer<M>;
+}
+
+/**
+ * Attempt the custom renderer; on failure or undefined return, populate
+ * `box` with the default `[customType]` label + markdown body and return
+ * undefined. When the custom renderer succeeds, return its Component so the
+ * caller can mount it and skip the default box.
+ */
+export function renderFramedMessage<M extends FramedMessage>(opts: RebuildFrameOptions<M>): Component | undefined {
+	if (opts.customRenderer) {
+		try {
+			const component = opts.customRenderer(opts.message, { expanded: opts.expanded }, theme);
+			if (component) return component;
+		} catch {
+			// Fall through to default rendering
+		}
+	}
+
+	opts.box.clear();
+
+	const label = theme.fg("customMessageLabel", theme.bold(`[${opts.message.customType}]`));
+	opts.box.addChild(new Text(label, 0, 0));
+	opts.box.addChild(new Spacer(1));
+
+	let text: string;
+	if (typeof opts.message.content === "string") {
+		text = opts.message.content;
+	} else {
+		text = opts.message.content
+			.filter((c): c is TextContent => c.type === "text")
+			.map(c => c.text)
+			.join("\n");
+	}
+
+	if (!opts.expanded && opts.collapseAfterLines !== undefined) {
+		const lines = text.split("\n");
+		if (lines.length > opts.collapseAfterLines) {
+			text = `${lines.slice(0, opts.collapseAfterLines).join("\n")}\n…`;
+		}
+	}
+
+	opts.box.addChild(
+		new Markdown(text, 0, 0, getMarkdownTheme(), {
+			color: (value: string) => theme.fg("customMessageText", value),
+		}),
+	);
+
+	return undefined;
+}