@gajae-code/coding-agent 0.2.5 → 0.3.1

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}` },
+	];
+}

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

@@ -0,0 +1,172 @@
+import { Container, type SelectItem, SelectList } from "@gajae-code/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/status-line/presets.ts

@@ -3,7 +3,7 @@ import type { PresetDef, StatusLinePreset } from "./types";
 export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 	default: {
 		leftSegments: ["model", "mode", "git", "pr", "path"],
-		rightSegments: ["session_name", "token_rate", "context_pct", "cost"],
+		rightSegments: ["session_name", "jobs", "token_rate", "context_pct", "cost"],
 		separator: "slash",
 		segmentOptions: {
 			model: { showThinkingLevel: true },
@@ -14,7 +14,7 @@ export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 
 	minimal: {
 		leftSegments: ["path", "git"],
-		rightSegments: ["session_name", "mode", "context_pct"],
+		rightSegments: ["session_name", "jobs", "mode", "context_pct"],
 		separator: "slash",
 		segmentOptions: {
 			path: { abbreviate: true, maxLength: 30 },
@@ -24,7 +24,7 @@ export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 
 	compact: {
 		leftSegments: ["model", "mode", "git", "pr"],
-		rightSegments: ["session_name", "cost", "context_pct"],
+		rightSegments: ["session_name", "jobs", "cost", "context_pct"],
 		separator: "slash",
 		segmentOptions: {
 			model: { showThinkingLevel: false },
@@ -36,6 +36,7 @@ export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 		leftSegments: ["gajae", "hostname", "model", "mode", "path", "git", "pr", "subagents"],
 		rightSegments: [
 			"session_name",
+			"jobs",
 			"token_in",
 			"token_out",
 			"token_rate",
@@ -59,6 +60,7 @@ export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 		leftSegments: ["gajae", "hostname", "model", "mode", "path", "git", "pr", "session", "subagents"],
 		rightSegments: [
 			"session_name",
+			"jobs",
 			"token_in",
 			"token_out",
 			"cache_read",
@@ -82,7 +84,7 @@ export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 	ascii: {
 		// No Nerd Font dependencies
 		leftSegments: ["model", "mode", "path", "git", "pr"],
-		rightSegments: ["session_name", "token_total", "cost", "context_pct"],
+		rightSegments: ["session_name", "jobs", "token_total", "cost", "context_pct"],
 		separator: "ascii",
 		segmentOptions: {
 			model: { showThinkingLevel: true },
@@ -94,7 +96,7 @@ export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 	custom: {
 		// User-defined - these are just defaults that get overridden
 		leftSegments: ["model", "mode", "path", "git", "pr"],
-		rightSegments: ["session_name", "token_total", "cost", "context_pct"],
+		rightSegments: ["session_name", "jobs", "token_total", "cost", "context_pct"],
 		separator: "slash",
 		segmentOptions: {},
 	},

package/src/modes/components/status-line/segments.ts

@@ -270,6 +270,30 @@ const subagentsSegment: StatusLineSegment = {
 	},
 };
 
+const jobsSegment: StatusLineSegment = {
+	id: "jobs",
+	render(ctx) {
+		const { jobs } = ctx;
+		const visible = jobs.activeMonitorCount > 0 || jobs.activeCronCount > 0 || jobs.worstState === "failed";
+		if (!visible) {
+			return { content: "", visible: false };
+		}
+		const parts: string[] = [];
+		if (jobs.activeMonitorCount > 0) {
+			parts.push(withIcon(theme.icon.agents, `${jobs.activeMonitorCount}`));
+		}
+		if (jobs.activeCronCount > 0) {
+			parts.push(withIcon(theme.icon.time, `${jobs.activeCronCount}`));
+		}
+		if (parts.length === 0) {
+			// Nothing active but a failure is unacknowledged — keep a drill-in marker.
+			parts.push(withIcon(theme.icon.warning, "jobs"));
+		}
+		const color: ThemeColor = jobs.worstState === "failed" ? "error" : "statusLineSubagents";
+		return { content: theme.fg(color, parts.join(" ")), visible: true };
+	},
+};
+
 const tokenInSegment: StatusLineSegment = {
 	id: "token_in",
 	render(ctx) {
@@ -521,6 +545,7 @@ export const SEGMENTS: Record<StatusLineSegmentId, StatusLineSegment> = {
 	git: gitSegment,
 	pr: prSegment,
 	subagents: subagentsSegment,
+	jobs: jobsSegment,
 	token_in: tokenInSegment,
 	token_out: tokenOutSegment,
 	token_total: tokenTotalSegment,

package/src/modes/components/status-line/types.ts

@@ -1,5 +1,6 @@
 import type { StatusLinePreset, StatusLineSegmentId, StatusLineSeparatorStyle } from "../../../config/settings-schema";
 import type { AgentSession } from "../../../session/agent-session";
+import type { JobsSnapshot } from "../../jobs-observer";
 import type { StatusLineSegmentOptions, StatusLineSettings } from "../status-line";
 
 export type {
@@ -42,6 +43,7 @@ export interface SegmentContext {
 	contextWindow: number;
 	autoCompactEnabled: boolean;
 	subagentCount: number;
+	jobs: JobsSnapshot;
 	sessionStartTime: number;
 	git: {
 		branch: string | null;

package/src/modes/components/status-line.ts

@@ -11,6 +11,7 @@ import type { AgentSession } from "../../session/agent-session";
 import { readVisibleSkillActiveState, type SkillActiveEntry } from "../../skill-state/active-state";
 import * as git from "../../utils/git";
 import { getSessionAccentAnsi, getSessionAccentHex } from "../../utils/session-color";
+import { EMPTY_JOBS_SNAPSHOT, type JobsSnapshot } from "../jobs-observer";
 import { sanitizeStatusText } from "../shared";
 import { computeNonMessageTokens } from "../utils/context-usage";
 import { renderSkillHudBar } from "./skill-hud/render";
@@ -153,6 +154,7 @@ export class StatusLineComponent implements Component {
 	#autoCompactEnabled: boolean = true;
 	#hookStatuses: Map<string, string> = new Map();
 	#subagentCount: number = 0;
+	#jobs: JobsSnapshot = EMPTY_JOBS_SNAPSHOT;
 	#sessionStartTime: number = Date.now();
 	#planModeStatus: { enabled: boolean; paused: boolean } | null = null;
 	#goalModeStatus: { enabled: boolean; paused: boolean } | null = null;
@@ -220,6 +222,10 @@ export class StatusLineComponent implements Component {
 		this.#subagentCount = count;
 	}
 
+	setJobs(jobs: JobsSnapshot): void {
+		this.#jobs = jobs;
+	}
+
 	setSessionStartTime(time: number): void {
 		this.#sessionStartTime = time;
 	}
@@ -612,6 +618,7 @@ export class StatusLineComponent implements Component {
 			contextWindow,
 			autoCompactEnabled: this.#autoCompactEnabled,
 			subagentCount: this.#subagentCount,
+			jobs: this.#jobs,
 			sessionStartTime: this.#sessionStartTime,
 			git: {
 				branch: this.#getCurrentBranch(),
@@ -687,7 +694,8 @@ export class StatusLineComponent implements Component {
 			}
 		}
 
-		const runningBackgroundJobs = this.session.getAsyncJobSnapshot()?.running.length ?? 0;
+		const runningBackgroundJobs =
+			this.session.getAsyncJobSnapshot()?.running.filter(job => job.metadata?.monitor !== true).length ?? 0;
 		if (runningBackgroundJobs > 0) {
 			const icon = theme.icon.agents ? `${theme.icon.agents} ` : "";
 			const label = `${formatCount("job", runningBackgroundJobs)} running`;

package/src/modes/controllers/event-controller.ts

@@ -1,6 +1,7 @@
 import { INTENT_FIELD } from "@gajae-code/agent-core";
 import { calculatePromptTokens } from "@gajae-code/agent-core/compaction/compaction";
 import type { AssistantMessage, ImageContent } from "@gajae-code/ai";
+import { parseRateLimitReason } from "@gajae-code/ai";
 import { type Component, Loader, TERMINAL, Text } from "@gajae-code/tui";
 import { settings } from "../../config/settings";
 import { AssistantMessageComponent } from "../../modes/components/assistant-message";
@@ -24,6 +25,24 @@ type AgentSessionEventKind = AgentSessionEvent["type"];
 
 const IRC_MESSAGE_VISIBLE_TTL_MS = 10_000;
 
+function friendlyRetryReason(errorMessage: string | undefined): string {
+	if (!errorMessage) return "";
+	switch (parseRateLimitReason(errorMessage)) {
+		case "RATE_LIMIT_EXCEEDED":
+			return "rate limited";
+		case "QUOTA_EXHAUSTED":
+			return "usage limit";
+		case "MODEL_CAPACITY_EXHAUSTED":
+			return "overloaded";
+		case "SERVER_ERROR":
+			return "server error";
+		default:
+			return /network|connection|socket|fetch failed|terminated|timeout|timed out|stream/i.test(errorMessage)
+				? "connection error"
+				: "transient error";
+	}
+}
+
 type AgentSessionEventHandlers = {
 	[E in AgentSessionEventKind]: (event: Extract<AgentSessionEvent, { type: E }>) => Promise<void>;
 };
@@ -71,6 +90,15 @@ export class EventController {
 
 	dispose(): void {
 		this.#cancelIdleCompaction();
+		this.#clearRetryCountdown();
+		if (this.ctx.retryEscapeHandler) {
+			this.ctx.editor.onEscape = this.ctx.retryEscapeHandler;
+			this.ctx.retryEscapeHandler = undefined;
+		}
+		if (this.ctx.retryLoader) {
+			this.ctx.retryLoader.stop();
+			this.ctx.retryLoader = undefined;
+		}
 		for (const timer of this.#ircExpiryTimers.values()) {
 			clearTimeout(timer);
 		}
@@ -166,6 +194,7 @@ export class EventController {
 		}
 		if (this.ctx.retryLoader) {
 			this.ctx.retryLoader.stop();
+			this.#clearRetryCountdown();
 			this.ctx.retryLoader = undefined;
 			this.ctx.statusContainer.clear();
 		}
@@ -648,21 +677,56 @@ export class EventController {
 		this.ctx.ui.requestRender();
 	}
 
+	#clearRetryCountdown(): void {
+		if (this.ctx.retryCountdownTimer) {
+			clearInterval(this.ctx.retryCountdownTimer);
+			this.ctx.retryCountdownTimer = undefined;
+		}
+	}
+
 	async #handleAutoRetryStart(event: Extract<AgentSessionEvent, { type: "auto_retry_start" }>): Promise<void> {
-		this.ctx.retryEscapeHandler = this.ctx.editor.onEscape;
+		// Preserve the ORIGINAL editor Escape handler across repeated retry
+		// starts: auto_retry_end only fires at final success/failure, so a
+		// second auto_retry_start must not snapshot the prior retry handler.
+		if (!this.ctx.retryEscapeHandler) {
+			this.ctx.retryEscapeHandler = this.ctx.editor.onEscape;
+		}
+		let escPressed = false;
 		this.ctx.editor.onEscape = () => {
-			this.ctx.session.abortRetry();
+			if (!escPressed) {
+				// First Esc: skip the backoff and retry immediately.
+				escPressed = true;
+				this.ctx.session.retryNow();
+			} else {
+				// Second Esc: cancel the retry entirely.
+				this.ctx.session.abortRetry();
+			}
 		};
 		this.ctx.statusContainer.clear();
-		const delaySeconds = Math.round(event.delayMs / 1000);
-		this.ctx.retryLoader = new Loader(
+		// Stop any prior retry loader/timer before installing a new one.
+		this.ctx.retryLoader?.stop();
+		this.#clearRetryCountdown();
+		const reason = friendlyRetryReason(event.errorMessage);
+		const attemptLabel = event.unbounded ? `attempt ${event.attempt}` : `${event.attempt}/${event.maxAttempts}`;
+		const reasonSuffix = reason ? ` — ${reason}` : "";
+		const deadline = Date.now() + event.delayMs;
+		const buildMessage = () => {
+			const remainingSeconds = Math.max(0, Math.round((deadline - Date.now()) / 1000));
+			// First Esc retries immediately; a second Esc cancels.
+			return `Retrying (${attemptLabel})${reasonSuffix}, next in ${remainingSeconds}s… (esc to retry now)`;
+		};
+		const retryLoader = new Loader(
 			this.ctx.ui,
 			spinner => theme.fg("warning", spinner),
 			text => theme.fg("muted", text),
-			`Retrying (${event.attempt}/${event.maxAttempts}) in ${delaySeconds}s… (esc to cancel)`,
+			buildMessage(),
 			getSymbolTheme().spinnerFrames,
 		);
-		this.ctx.statusContainer.addChild(this.ctx.retryLoader);
+		this.ctx.retryLoader = retryLoader;
+		this.ctx.retryCountdownTimer = setInterval(() => {
+			retryLoader.setMessage(buildMessage());
+		}, 1000);
+		this.ctx.statusContainer.addChild(retryLoader);
 		this.ctx.ui.requestRender();
 	}
 
@@ -673,6 +737,7 @@ export class EventController {
 		}
 		if (this.ctx.retryLoader) {
 			this.ctx.retryLoader.stop();
+			this.#clearRetryCountdown();
 			this.ctx.retryLoader = undefined;
 			this.ctx.statusContainer.clear();
 		}

package/src/modes/controllers/extension-ui-controller.ts

@@ -25,11 +25,17 @@ import type { InteractiveModeContext } from "../../modes/types";
 import { setSessionTerminalTitle, setTerminalTitle } from "../../utils/title-generator";
 
 const MAX_WIDGET_LINES = 10;
+const HOOK_SELECTOR_MOUSE_REPORTING_ENABLE = "\x1b[?1006h\x1b[?1000h";
+const HOOK_SELECTOR_MOUSE_REPORTING_DISABLE = "\x1b[?1000l\x1b[?1006l";
+const HOOK_SELECTOR_CHROME_ROWS = 7;
+const HOOK_SELECTOR_OUTLINE_ROWS = 2;
 
 export class ExtensionUiController {
 	#extensionTerminalInputUnsubscribers = new Set<() => void>();
 	#hookWidgetsAbove = new Map<string, ExtensionUiComponent>();
 	#hookWidgetsBelow = new Map<string, ExtensionUiComponent>();
+	#hookSelectorMouseReportingEnabled = false;
+
 	constructor(private ctx: InteractiveModeContext) {}
 
 	/**
@@ -589,7 +595,20 @@ export class ExtensionUiController {
 			() => this.hideHookSelector(),
 			dialogOptions?.signal,
 		);
-		const maxVisible = Math.max(4, Math.min(15, this.ctx.ui.terminal.rows - 12));
+		const requestedTitleRows = dialogOptions?.scrollTitleRows;
+		const baseMaxVisible = Math.max(4, Math.min(15, this.ctx.ui.terminal.rows - 12));
+		const scrollOptionRows = Math.max(1, Math.min(baseMaxVisible, options.length));
+		const maxVisible =
+			requestedTitleRows === undefined ? baseMaxVisible : Math.min(15, Math.max(3, scrollOptionRows + 1));
+		const listChromeRows = dialogOptions?.outline === true ? HOOK_SELECTOR_OUTLINE_ROWS : 0;
+		const availableTitleRows =
+			this.ctx.ui.terminal.rows - scrollOptionRows - listChromeRows - HOOK_SELECTOR_CHROME_ROWS;
+		const scrollTitleRows =
+			requestedTitleRows === undefined ? undefined : Math.max(1, Math.min(requestedTitleRows, availableTitleRows));
+		if (scrollTitleRows !== undefined) {
+			this.#enableHookSelectorMouseReporting();
+		}
+
 		this.ctx.hookSelector = new HookSelectorComponent(
 			title,
 			options,
@@ -624,6 +643,7 @@ export class ExtensionUiController {
 				tui: this.ctx.ui,
 				outline: dialogOptions?.outline,
 				wrapFocused: dialogOptions?.wrapFocused,
+				scrollTitleRows,
 				maxVisible,
 			},
 		);
@@ -634,10 +654,32 @@ export class ExtensionUiController {
 		attachAbort();
 		return promise;
 	}
+
+	#enableHookSelectorMouseReporting(): void {
+		if (this.#hookSelectorMouseReportingEnabled) return;
+		this.#hookSelectorMouseReportingEnabled = true;
+		this.#writeTerminalControl(HOOK_SELECTOR_MOUSE_REPORTING_ENABLE);
+	}
+
+	#disableHookSelectorMouseReporting(): void {
+		if (!this.#hookSelectorMouseReportingEnabled) return;
+		this.#hookSelectorMouseReportingEnabled = false;
+		this.#writeTerminalControl(HOOK_SELECTOR_MOUSE_REPORTING_DISABLE);
+	}
+
+	#writeTerminalControl(sequence: string): void {
+		try {
+			this.ctx.ui.terminal.write(sequence);
+		} catch {
+			// Terminal teardown can race selector cleanup; normal shutdown restores modes.
+		}
+	}
+
 	/**
 	 * Hide the hook selector.
 	 */
 	hideHookSelector(): void {
+		this.#disableHookSelectorMouseReporting();
 		this.ctx.hookSelector?.dispose();
 		this.ctx.editorContainer.clear();
 		this.ctx.editorContainer.addChild(this.ctx.editor);