@gajae-code/coding-agent 0.3.0 → 0.3.2

package/src/modes/components/custom-provider-wizard.ts

@@ -0,0 +1,318 @@
+import { Container, Input, matchesKey, Spacer, Text, TruncatedText } from "@gajae-code/tui";
+import type { ProviderCompatibility, ProviderSetupInput } from "../../setup/provider-onboarding";
+import { theme } from "../theme/theme";
+import { matchesAppInterrupt } from "../utils/keybinding-matchers";
+import { DynamicBorder } from "./dynamic-border";
+
+export type CustomProviderCredentialSource = "env" | "literal";
+
+type WizardStep =
+	| "compatibility"
+	| "provider-id"
+	| "base-url"
+	| "credential-source"
+	| "credential"
+	| "models"
+	| "confirm"
+	| "force-confirm";
+
+interface WizardState {
+	compatibility: ProviderCompatibility;
+	providerId: string;
+	baseUrl: string;
+	credentialSource: CustomProviderCredentialSource;
+	credential: string;
+	models: string;
+}
+
+export type CustomProviderWizardSubmit = ProviderSetupInput;
+
+export class CustomProviderWizardComponent extends Container {
+	#contentContainer: Container;
+	#input: Input | null = null;
+	#step: WizardStep = "compatibility";
+	#selectedIndex = 0;
+	#lastSubmitError: string | null = null;
+	#state: WizardState = {
+		compatibility: "openai",
+		providerId: "",
+		baseUrl: "",
+		credentialSource: "env",
+		credential: "",
+		models: "",
+	};
+	#onSubmit: (input: CustomProviderWizardSubmit) => void;
+	#onCancel: () => void;
+	#onRender: () => void;
+
+	constructor(
+		onSubmit: (input: CustomProviderWizardSubmit) => void,
+		onCancel: () => void,
+		onRender: () => void = () => {},
+	) {
+		super();
+		this.#onSubmit = onSubmit;
+		this.#onCancel = onCancel;
+		this.#onRender = onRender;
+
+		this.addChild(new DynamicBorder());
+		this.addChild(new Spacer(1));
+		this.addChild(new TruncatedText(theme.bold("Add custom provider")));
+		this.addChild(
+			new TruncatedText(theme.fg("muted", "  Configure an OpenAI- or Anthropic-compatible API provider."), 0, 0),
+		);
+		this.addChild(new Spacer(1));
+		this.#contentContainer = new Container();
+		this.addChild(this.#contentContainer);
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+		this.#renderStep();
+	}
+
+	setSubmitError(error: string): void {
+		this.#lastSubmitError = error;
+		if (error.includes("already exists")) {
+			this.#step = "force-confirm";
+			this.#selectedIndex = 1;
+		}
+		this.#renderStep();
+		this.#onRender();
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesAppInterrupt(keyData)) {
+			if (this.#step === "compatibility") {
+				this.#onCancel();
+				return;
+			}
+			this.#goBack();
+			return;
+		}
+
+		if (this.#input) {
+			if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+				this.#saveInputAndProceed();
+				return;
+			}
+			this.#input.handleInput(keyData);
+			return;
+		}
+
+		if (matchesKey(keyData, "up")) {
+			this.#moveSelection(-1);
+			return;
+		}
+		if (matchesKey(keyData, "down")) {
+			this.#moveSelection(1);
+			return;
+		}
+		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
+			this.#selectCurrentOption();
+		}
+	}
+
+	#renderStep(): void {
+		this.#contentContainer.clear();
+		this.#input = null;
+		switch (this.#step) {
+			case "compatibility":
+				this.#renderCompatibilityStep();
+				break;
+			case "provider-id":
+				this.#renderInputStep(
+					"Step 2: Provider id",
+					"Enter a provider id:",
+					this.#state.providerId,
+					"e.g. my-openai-proxy",
+				);
+				break;
+			case "base-url":
+				this.#renderInputStep(
+					"Step 3: Base URL",
+					"Enter the API base URL:",
+					this.#state.baseUrl,
+					"e.g. https://api.example.com/v1",
+				);
+				break;
+			case "credential-source":
+				this.#renderCredentialSourceStep();
+				break;
+			case "credential":
+				this.#renderInputStep(
+					"Step 5: Credential",
+					this.#state.credentialSource === "env"
+						? "Enter the API key environment variable name:"
+						: "Paste the API key:",
+					this.#state.credential,
+					this.#state.credentialSource === "env"
+						? "e.g. OPENAI_API_KEY"
+						: "The key will be stored in models.yml and redacted in output.",
+				);
+				break;
+			case "models":
+				this.#renderInputStep(
+					"Step 6: Model id(s)",
+					"Enter model ids, comma-separated:",
+					this.#state.models,
+					"e.g. gpt-5, claude-sonnet-4-5",
+				);
+				break;
+			case "confirm":
+				this.#renderConfirmStep(false);
+				break;
+			case "force-confirm":
+				this.#renderConfirmStep(true);
+				break;
+		}
+	}
+
+	#renderCompatibilityStep(): void {
+		this.#contentContainer.addChild(new Text(theme.fg("accent", "Step 1: Compatibility")));
+		this.#contentContainer.addChild(new Spacer(1));
+		const options: Array<{ value: ProviderCompatibility; label: string }> = [
+			{ value: "openai", label: "OpenAI-compatible" },
+			{ value: "anthropic", label: "Anthropic-compatible" },
+		];
+		for (let i = 0; i < options.length; i++) this.#addOption(i, options[i]?.label ?? "");
+		this.#addHelp("[↑↓ to navigate, Enter to select, Esc to cancel]");
+	}
+
+	#renderCredentialSourceStep(): void {
+		this.#contentContainer.addChild(new Text(theme.fg("accent", "Step 4: Credential source")));
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#addOption(0, "Environment variable");
+		this.#addOption(1, "Paste API key");
+		this.#addHelp("[↑↓ to navigate, Enter to select, Esc to go back]");
+	}
+
+	#renderInputStep(title: string, prompt: string, value: string, hint: string): void {
+		this.#contentContainer.addChild(new Text(theme.fg("accent", title)));
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#contentContainer.addChild(new Text(prompt, 0, 0));
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#input = new Input();
+		this.#input.setValue(value);
+		this.#contentContainer.addChild(this.#input);
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#addHelp(hint);
+		this.#addHelp("[Enter to continue, Esc to go back]");
+	}
+
+	#renderConfirmStep(force: boolean): void {
+		this.#contentContainer.addChild(
+			new Text(theme.fg("accent", force ? "Provider exists — replace it?" : "Confirm custom provider")),
+		);
+		this.#contentContainer.addChild(new Spacer(1));
+		if (this.#lastSubmitError) {
+			this.#contentContainer.addChild(new Text(theme.fg(force ? "warning" : "error", this.#lastSubmitError), 0, 0));
+			this.#contentContainer.addChild(new Spacer(1));
+		}
+		this.#contentContainer.addChild(new Text(`Compatibility: ${this.#state.compatibility}`, 0, 0));
+		this.#contentContainer.addChild(new Text(`Provider: ${this.#state.providerId}`, 0, 0));
+		this.#contentContainer.addChild(new Text(`Base URL: ${this.#state.baseUrl}`, 0, 0));
+		this.#contentContainer.addChild(
+			new Text(
+				`Credential: ${this.#state.credentialSource === "env" ? this.#state.credential : "pasted API key"}`,
+				0,
+				0,
+			),
+		);
+		this.#contentContainer.addChild(new Text(`Models: ${this.#state.models}`, 0, 0));
+		this.#contentContainer.addChild(new Spacer(1));
+		this.#addOption(0, force ? "Replace existing provider" : "Add provider");
+		this.#addOption(1, "Go back");
+		this.#addHelp("[↑↓ to navigate, Enter to select, Esc to go back]");
+	}
+
+	#addOption(index: number, label: string): void {
+		const selected = index === this.#selectedIndex;
+		const prefix = selected ? theme.fg("accent", `${theme.nav.cursor} `) : "  ";
+		this.#contentContainer.addChild(new Text(`${prefix}${selected ? theme.fg("accent", label) : label}`, 0, 0));
+	}
+
+	#addHelp(text: string): void {
+		this.#contentContainer.addChild(new Text(theme.fg("muted", text), 0, 0));
+	}
+
+	#saveInputAndProceed(): void {
+		const value = this.#input?.getValue().trim() ?? "";
+		if (!value) return;
+		if (this.#step === "provider-id") {
+			this.#state.providerId = value;
+			this.#step = "base-url";
+		} else if (this.#step === "base-url") {
+			this.#state.baseUrl = value;
+			this.#step = "credential-source";
+			this.#selectedIndex = 0;
+		} else if (this.#step === "credential") {
+			this.#state.credential = value;
+			this.#step = "models";
+		} else if (this.#step === "models") {
+			this.#state.models = value;
+			this.#step = "confirm";
+			this.#selectedIndex = 0;
+			this.#lastSubmitError = null;
+		}
+		this.#renderStep();
+		this.#onRender();
+	}
+
+	#selectCurrentOption(): void {
+		if (this.#step === "compatibility") {
+			this.#state.compatibility = this.#selectedIndex === 0 ? "openai" : "anthropic";
+			this.#step = "provider-id";
+		} else if (this.#step === "credential-source") {
+			this.#state.credentialSource = this.#selectedIndex === 0 ? "env" : "literal";
+			this.#state.credential = "";
+			this.#step = "credential";
+		} else if (this.#step === "confirm" || this.#step === "force-confirm") {
+			if (this.#selectedIndex === 0) {
+				this.#onSubmit(this.#buildInput(this.#step === "force-confirm"));
+				return;
+			}
+			this.#step = "models";
+		}
+		this.#renderStep();
+		this.#onRender();
+	}
+
+	#buildInput(force: boolean): CustomProviderWizardSubmit {
+		return {
+			compatibility: this.#state.compatibility,
+			providerId: this.#state.providerId,
+			baseUrl: this.#state.baseUrl,
+			apiKeyEnv: this.#state.credentialSource === "env" ? this.#state.credential : undefined,
+			apiKey: this.#state.credentialSource === "literal" ? this.#state.credential : undefined,
+			models: this.#state.models
+				.split(",")
+				.map(model => model.trim())
+				.filter(Boolean),
+			force,
+		};
+	}
+
+	#moveSelection(delta: number): void {
+		const maxIndex =
+			this.#step === "confirm" ||
+			this.#step === "force-confirm" ||
+			this.#step === "compatibility" ||
+			this.#step === "credential-source"
+				? 1
+				: 0;
+		this.#selectedIndex = (this.#selectedIndex + delta + maxIndex + 1) % (maxIndex + 1);
+		this.#renderStep();
+		this.#onRender();
+	}
+
+	#goBack(): void {
+		if (this.#step === "provider-id") this.#step = "compatibility";
+		else if (this.#step === "base-url") this.#step = "provider-id";
+		else if (this.#step === "credential-source") this.#step = "base-url";
+		else if (this.#step === "credential") this.#step = "credential-source";
+		else if (this.#step === "models") this.#step = "credential";
+		else if (this.#step === "confirm" || this.#step === "force-confirm") this.#step = "models";
+		this.#selectedIndex = 0;
+		this.#renderStep();
+		this.#onRender();
+	}
+}

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

@@ -21,6 +21,22 @@ import { matchesAppExternalEditor, matchesSelectCancel } from "../../modes/utils
 import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
 
+const SGR_MOUSE_PRESS_PATTERN = /^\x1b\[<(\d+);\d+;\d+M$/;
+const MOUSE_WHEEL_TITLE_SCROLL_ROWS = 3;
+
+function getMouseWheelTitleScrollRows(keyData: string): number {
+	const match = SGR_MOUSE_PRESS_PATTERN.exec(keyData);
+	if (!match) return 0;
+
+	const button = Number.parseInt(match[1] ?? "", 10);
+	if (!Number.isFinite(button) || (button & 64) === 0) return 0;
+
+	const wheelDirection = button & 3;
+	if (wheelDirection === 0) return -MOUSE_WHEEL_TITLE_SCROLL_ROWS;
+	if (wheelDirection === 1) return MOUSE_WHEEL_TITLE_SCROLL_ROWS;
+	return 0;
+}
+
 export interface HookSelectorOptions {
 	tui?: TUI;
 	timeout?: number;
@@ -125,11 +141,10 @@ class ScrollableTitle extends Container {
  * `maxVisibleRows`; everything that depends on terminal width is recomputed
  * on each render so resize Just Works.
  *
- * `maxVisibleRows` is a sibling budget before it is a hard cap: surrounding
- * options shrink first so the focused option is never clipped. The single
- * allowed overflow exception is when the focused option's wrapped block
- * alone exceeds the budget — in that case the focused option is rendered
- * fully with zero siblings.
+ * `maxVisibleRows` is a hard viewport budget for every rendered option-list
+ * row. Surrounding options shrink first; if the focused option alone would
+ * exceed the remaining budget, it is compacted to contextual rows plus an
+ * omitted-rows marker so controls stay reachable for untrusted long labels.
  */
 class FocusAwareList extends Container {
 	#options: string[] = [];
@@ -168,19 +183,20 @@ class FocusAwareList extends Container {
 			theme.fg("accent", t),
 		);
 		const focusedWrappedSegments = wrapTextWithAnsi(focusedLabel, availableLabelWidth);
-		const focusedRows = Math.max(1, focusedWrappedSegments.length);
 
-		// Decide whether the position marker is going to be shown. We make a
-		// pessimistic first pass assuming the marker is needed; if the window
-		// ends up covering every option we drop it.
+		// Reserve one row for the option position marker only when the focused
+		// block itself must be compacted. Moderate focused labels keep the legacy
+		// wrap-focused behavior and spend the full viewport on label context.
 		const totalOptions = this.#options.length;
-		const willHaveSiblings = totalOptions > 1;
-		const wouldNeedMarker = willHaveSiblings; // tentative; refined below
-		const markerSlot = wouldNeedMarker ? 1 : 0;
+		const mustCompactFocused = focusedWrappedSegments.length > this.#maxVisibleRows;
+		const positionMarkerSlot = mustCompactFocused && totalOptions > 1 ? 1 : 0;
+		const focusedBudget = Math.max(1, this.#maxVisibleRows - positionMarkerSlot);
+		const focusedSegments = this.#capFocusedSegments(focusedWrappedSegments, focusedBudget, availableLabelWidth);
+		const focusedRows = Math.max(1, focusedSegments.length);
 
-		// Sibling budget. If the focused block alone is over budget, render it
-		// fully with zero siblings (only allowed overflow exception).
-		const siblingBudget = Math.max(0, this.#maxVisibleRows - focusedRows - markerSlot);
+		// Sibling budget. If the focused block consumes the available viewport,
+		// render it with zero siblings and the reserved position marker.
+		const siblingBudget = Math.max(0, this.#maxVisibleRows - focusedRows - positionMarkerSlot);
 
 		// Distribute sibling slots around focus, preferring closest options.
 		const availableAbove = this.#selectedIndex;
@@ -203,8 +219,8 @@ class FocusAwareList extends Container {
 			if (i === this.#selectedIndex) {
 				// Emit focused wrapped rows. Cursor only on row 0; continuation
 				// rows are whitespace-aligned under the label start.
-				for (let r = 0; r < focusedWrappedSegments.length; r++) {
-					const segment = focusedWrappedSegments[r] ?? "";
+				for (let r = 0; r < focusedSegments.length; r++) {
+					const segment = focusedSegments[r] ?? "";
 					rows.push(r === 0 ? styledSelectedPrefix + segment : continuationPrefix + segment);
 				}
 			} else {
@@ -217,13 +233,33 @@ class FocusAwareList extends Container {
 			}
 		}
 
-		if (showMarker) {
+		if (showMarker && rows.length < this.#maxVisibleRows) {
 			rows.push(theme.fg("dim", `  (${this.#selectedIndex + 1}/${totalOptions})`));
 		}
 
 		return this.#outline ? this.#wrapOutline(rows, width) : rows;
 	}
 
+	#capFocusedSegments(segments: string[], maxRows: number, availableLabelWidth: number): string[] {
+		const rows = segments.length > 0 ? segments : [""];
+		const budget = Math.max(1, Math.floor(maxRows));
+		if (rows.length <= budget) return rows;
+
+		if (budget === 1) {
+			return [truncateToWidth(`… ${rows.length - 1} wrapped rows omitted …`, availableLabelWidth)];
+		}
+
+		if (budget === 2) {
+			return [rows[0] ?? "", truncateToWidth(`… ${rows.length - 1} wrapped rows omitted …`, availableLabelWidth)];
+		}
+
+		const tailRows = Math.max(1, Math.floor((budget - 2) / 2));
+		const headRows = Math.max(1, budget - 1 - tailRows);
+		const omittedRows = Math.max(1, rows.length - headRows - tailRows);
+		const marker = truncateToWidth(`… ${omittedRows} wrapped rows omitted …`, availableLabelWidth);
+		return [...rows.slice(0, headRows), marker, ...rows.slice(rows.length - tailRows)];
+	}
+
 	#wrapOutline(rows: string[], width: number): string[] {
 		// Mirror the outline border drawn by `OutlinedList.render(width)`. The
 		// rows passed in are already constrained to `innerWidth` by
@@ -381,6 +417,13 @@ export class HookSelectorComponent extends Container {
 		// Reset countdown on any interaction
 		this.#countdown?.reset();
 
+		if (this.#scrollTitleRows !== undefined) {
+			const wheelRows = getMouseWheelTitleScrollRows(keyData);
+			if (wheelRows !== 0) {
+				this.#scrollableTitle?.scrollBy(wheelRows);
+				return;
+			}
+		}
 		if (this.#scrollTitleRows !== undefined && matchesKey(keyData, "pageUp")) {
 			this.#scrollableTitle?.scrollBy(-this.#scrollTitleRows);
 			return;

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 "@gajae-code/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}` },
+	];
+}