@underactive/pi-topping-moa-fusion 0.1.0

package/src/ui/rosterEditor.ts

@@ -0,0 +1,310 @@
+/**
+ * Agent-roster manager for `/mf-plan-settings`.
+ *
+ * A staged CRUD surface over the saved `PlanRoster` list: list → name prompt →
+ * slot editor → per-slot model/thinking picker, ported from persona-audit's
+ * RosterEditor. Every mutation happens on in-memory copies; persistence stays
+ * with the settings overlay's Save button, so closing without saving (or the
+ * overlay's Cancel) leaves settings.json untouched.
+ *
+ * Each roster carries one model + thinking level for every fan-out role —
+ * 2–5 proposers plus synthesizer, implementer, and verifier. A roster must be
+ * complete before it can be saved; drafts are never persisted.
+ */
+
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { type Component, Key, matchesKey, type TUI } from "@earendil-works/pi-tui";
+import {
+	MAX_ROSTER_COUNT,
+	MAX_ROSTER_NAME_LENGTH,
+	MAX_ROSTER_PROPOSERS,
+	rosterNameError,
+	rosterReadinessError,
+	rosterSummary,
+	type DraftRoster,
+	type PlanRoster,
+	type RosterSlot,
+} from "../config/rosters.ts";
+import type { ThinkingLevel } from "../shared/modelRefs.ts";
+import { modelRefLabel } from "../shared/modelRefs.ts";
+import { ratioViewport } from "./chrome.ts";
+import { MenuComponent, showOverlayPrompt, type ActionMenuItem } from "./menu.ts";
+import { showModelThinkingPicker } from "./moaModelPicker.ts";
+
+const BACKSPACE = "\x7f";
+
+type SlotRole = "synthesizer" | "implementer" | "verifier";
+type SlotTarget = { kind: "proposer"; index: number } | { kind: "role"; role: SlotRole };
+type ListResult = { action: "create" } | { action: "edit"; index: number } | { action: "back" };
+type EditorResult =
+	| { action: "save"; draft: DraftRoster }
+	| { action: "pick"; target: SlotTarget; draft: DraftRoster }
+	| { action: "rename"; draft: DraftRoster }
+	| { action: "delete" }
+	| { action: "cancel" };
+
+const ROLE_LABELS: Record<SlotRole, string> = {
+	synthesizer: "Synthesizer",
+	implementer: "Implementer",
+	verifier: "Verifier",
+};
+
+const proposerLabel = (index: number): string => `Proposer ${index + 1}`;
+const targetLabel = (target: SlotTarget): string => target.kind === "proposer" ? proposerLabel(target.index) : ROLE_LABELS[target.role];
+const targetItemId = (target: SlotTarget): string => target.kind === "proposer" ? `proposer-${target.index}` : `role-${target.role}`;
+
+function parseTargetItemId(id: string): SlotTarget | undefined {
+	if (id.startsWith("proposer-")) {
+		const index = Number(id.slice("proposer-".length));
+		return Number.isInteger(index) && index >= 0 && index < MAX_ROSTER_PROPOSERS ? { kind: "proposer", index } : undefined;
+	}
+	if (id.startsWith("role-")) {
+		const role = id.slice("role-".length);
+		return role === "synthesizer" || role === "implementer" || role === "verifier" ? { kind: "role", role } : undefined;
+	}
+	return undefined;
+}
+
+function slotValue(slot: RosterSlot | undefined): string {
+	return slot ? `${modelRefLabel(slot.ref)} (thinking: ${slot.thinking})` : "(none)";
+}
+
+function cloneSlot(slot: RosterSlot | undefined): RosterSlot | undefined {
+	return slot ? { ref: { ...slot.ref }, thinking: slot.thinking } : undefined;
+}
+
+function toDraft(roster: PlanRoster): DraftRoster {
+	return {
+		name: roster.name,
+		proposers: Array.from({ length: MAX_ROSTER_PROPOSERS }, (_unused, index) => cloneSlot(roster.proposers[index])),
+		synthesizer: cloneSlot(roster.synthesizer),
+		implementer: cloneSlot(roster.implementer),
+		verifier: cloneSlot(roster.verifier),
+	};
+}
+
+function cloneDraft(draft: DraftRoster): DraftRoster {
+	return {
+		name: draft.name,
+		proposers: draft.proposers.map(cloneSlot),
+		synthesizer: cloneSlot(draft.synthesizer),
+		implementer: cloneSlot(draft.implementer),
+		verifier: cloneSlot(draft.verifier),
+	};
+}
+
+/** Compacts the sparse proposer slots into a dense, slot-ordered list — the same rule the picker's finish() uses. */
+function fromDraft(draft: DraftRoster): PlanRoster {
+	return {
+		name: draft.name,
+		proposers: draft.proposers.filter((slot): slot is RosterSlot => slot !== undefined),
+		synthesizer: draft.synthesizer!,
+		implementer: draft.implementer!,
+		verifier: draft.verifier!,
+	};
+}
+
+/**
+ * MenuComponent renders through this wrapper so its scrollable viewport tracks
+ * the terminal rows the way every other overlay in this extension does.
+ */
+class ViewportMenu implements Component {
+	constructor(private readonly menu: MenuComponent) {}
+
+	handleInput(data: string): void {
+		this.menu.handleInput(data);
+	}
+
+	render(width: number): string[] {
+		this.menu.setViewport(ratioViewport(process.stdout.rows, { fallbackRows: 24, ratio: 0.7, minimum: 6 }));
+		return this.menu.render(width);
+	}
+
+	invalidate(): void {
+		this.menu.invalidate();
+	}
+
+	dispose(): void {
+		this.menu.dispose();
+	}
+}
+
+async function promptRosterName(ctx: ExtensionContext, rosters: PlanRoster[], currentName = "", currentIndex?: number): Promise<string | undefined> {
+	for (;;) {
+		const entered = await ctx.ui.input("Roster name", currentName || `1–${MAX_ROSTER_NAME_LENGTH} letters or numbers`);
+		if (entered === undefined) return undefined;
+		const name = entered.trim();
+		const error = rosterNameError(name, rosters, currentIndex);
+		if (!error) return name;
+		ctx.ui.notify(error, "warning");
+	}
+}
+
+function showRosterList(ctx: ExtensionContext, rosters: PlanRoster[]): Promise<ListResult> {
+	return showOverlayPrompt(ctx, (tui, theme, finish) => {
+		const items: ActionMenuItem[] = rosters
+			.map((roster, index) => ({ roster, index }))
+			.sort((a, b) => a.roster.name.localeCompare(b.roster.name))
+			.map(({ roster, index }) => ({
+				id: `roster-${index}`,
+				label: roster.name,
+				displayValue: `${roster.proposers.length + 3} roles assigned`,
+				description: rosterSummary(roster),
+				onSelect: () => finish({ action: "edit", index }),
+			}));
+		if (rosters.length < MAX_ROSTER_COUNT) {
+			items.push({ id: "create", label: "Create roster", onSelect: () => finish({ action: "create" }) });
+		}
+		return new ViewportMenu(new MenuComponent(
+			{
+				title: "MoA Fusion: Agent rosters",
+				fullWidth: true,
+				maxItemsPerSection: 8,
+				sections: [{ title: "Rosters", items }],
+				buttons: [{ id: "back", label: "Back", primary: true, onSelect: () => finish({ action: "back" }) }],
+			},
+			theme,
+			() => finish({ action: "back" }),
+			tui,
+		));
+	});
+}
+
+function showSlotEditor(ctx: ExtensionContext, draft: DraftRoster, focusItemId: string, canDelete: boolean): Promise<EditorResult> {
+	const working = cloneDraft(draft);
+	return showOverlayPrompt(ctx, (tui, theme, finish) => {
+		const proposerItems: ActionMenuItem[] = working.proposers.map((slot, index) => ({
+			id: `proposer-${index}`,
+			label: proposerLabel(index),
+			displayValue: slotValue(slot),
+			onSelect: () => finish({ action: "pick", target: { kind: "proposer", index }, draft: cloneDraft(working) }),
+		}));
+		const roleItems: ActionMenuItem[] = (["synthesizer", "implementer", "verifier"] as const).map((role) => ({
+			id: `role-${role}`,
+			label: ROLE_LABELS[role],
+			displayValue: slotValue(working[role]),
+			onSelect: () => finish({ action: "pick", target: { kind: "role", role }, draft: cloneDraft(working) }),
+		}));
+		const items = [...proposerItems, ...roleItems];
+		const itemById = new Map(items.map((item) => [item.id, item]));
+		return new ViewportMenu(new MenuComponent(
+			{
+				title: `Agent roster: ${working.name}`,
+				fullWidth: true,
+				initialItemId: focusItemId,
+				hints: ["↑↓ slot", "⏎ choose", "⌫ clear", "⇥ buttons", "esc cancel"],
+				sections: [
+					{ title: "proposers", items: proposerItems },
+					{ title: "roles", items: roleItems },
+				],
+				onItemKey: (item, data) => {
+					if (data !== BACKSPACE && data !== "\b" && !matchesKey(data, Key.delete)) return false;
+					const target = parseTargetItemId(item.id);
+					if (!target) return true;
+					if (target.kind === "proposer") working.proposers[target.index] = undefined;
+					else working[target.role] = undefined;
+					const row = itemById.get(item.id);
+					if (row) row.displayValue = "(none)";
+					return true;
+				},
+				buttons: [
+					{
+						id: "save", label: "Save roster", primary: true,
+						onSelect: () => {
+							const error = rosterReadinessError(working);
+							if (error) {
+								ctx.ui.notify(error, "warning");
+								return;
+							}
+							finish({ action: "save", draft: cloneDraft(working) });
+						},
+					},
+					{ id: "rename", label: "Rename", onSelect: () => finish({ action: "rename", draft: cloneDraft(working) }) },
+					...(canDelete ? [{ id: "delete", label: "Delete", onSelect: () => finish({ action: "delete" } as const) }] : []),
+					{ id: "cancel", label: "Cancel", onSelect: () => finish({ action: "cancel" }) },
+				],
+			},
+			theme,
+			() => finish({ action: "cancel" }),
+			tui,
+		));
+	});
+}
+
+async function editRoster(
+	ctx: ExtensionContext,
+	rosters: PlanRoster[],
+	roster: DraftRoster,
+	currentIndex: number | undefined,
+	currentThinking: ThinkingLevel,
+): Promise<PlanRoster | "delete" | undefined> {
+	let draft = cloneDraft(roster);
+	let focusItemId = "proposer-0";
+	for (;;) {
+		const result = await showSlotEditor(ctx, draft, focusItemId, currentIndex !== undefined);
+		if (result.action === "cancel") return undefined;
+		if (result.action === "save") return fromDraft(result.draft);
+		if (result.action === "delete") {
+			if (await ctx.ui.confirm("Delete agent roster?", `Delete ${draft.name}? This is staged until settings are saved.`)) return "delete";
+			continue;
+		}
+		if (result.action === "rename") {
+			const name = await promptRosterName(ctx, rosters, result.draft.name, currentIndex);
+			draft = { ...result.draft, name: name ?? result.draft.name };
+			continue;
+		}
+		const target = result.target;
+		const current = target.kind === "proposer" ? result.draft.proposers[target.index] : result.draft[target.role];
+		const pick = await showModelThinkingPicker(
+			ctx,
+			currentThinking,
+			`${targetLabel(target)} — choose a model and thinking level`,
+			current?.ref,
+			current?.thinking,
+		);
+		draft = cloneDraft(result.draft);
+		if (pick) {
+			const slot: RosterSlot = { ref: pick.ref, thinking: pick.thinking };
+			if (target.kind === "proposer") draft.proposers[target.index] = slot;
+			else draft[target.role] = slot;
+		}
+		focusItemId = targetItemId(target);
+	}
+}
+
+/** Manage a staged roster collection; persistence remains the settings overlay's Save action's responsibility. */
+export async function showRosterManager(
+	ctx: ExtensionContext,
+	initial: PlanRoster[],
+	deps: { currentThinking: ThinkingLevel },
+): Promise<PlanRoster[]> {
+	const rosters = initial.map((roster) => ({ ...roster, proposers: [...roster.proposers] }));
+	for (;;) {
+		const action = await showRosterList(ctx, rosters);
+		if (action.action === "back") return rosters;
+		if (action.action === "create") {
+			const name = await promptRosterName(ctx, rosters);
+			if (!name) continue;
+			const created = await editRoster(
+				ctx,
+				rosters,
+				{
+					name,
+					proposers: Array.from({ length: MAX_ROSTER_PROPOSERS }, () => undefined),
+					synthesizer: undefined,
+					implementer: undefined,
+					verifier: undefined,
+				},
+				undefined,
+				deps.currentThinking,
+			);
+			if (created && created !== "delete") rosters.push(created);
+			continue;
+		}
+		const current = rosters[action.index];
+		if (!current) continue;
+		const edited = await editRoster(ctx, rosters, toDraft(current), action.index, deps.currentThinking);
+		if (edited === "delete") rosters.splice(action.index, 1);
+		else if (edited) rosters[action.index] = edited;
+	}
+}

package/src/ui/shimmer.ts

@@ -0,0 +1,77 @@
+/**
+ * Codex-style light-sweep text shimmer.
+ *
+ * Vendored from pi-topping-persona-audit (`src/shimmer.ts`) rather than
+ * depended on, so the extensions stay independently installable. The sweep
+ * geometry — band half-width, padding, speed scaling — is load-bearing for
+ * visual parity, so port changes upstream rather than tuning them here.
+ * test/shimmer.test.mjs mirrors the upstream tests to catch drift.
+ */
+
+import type { ThemeColor } from "@earendil-works/pi-coding-agent";
+
+const SHIMMER_SWEEP_S = 2.0;
+const SHIMMER_BAND_HALF = 5.0;
+const SHIMMER_PADDING = 10;
+
+/** The slice of pi's `Theme` shimmerString needs. Structural so callers can supply a stub. */
+export interface ShimmerTheme {
+	getFgAnsi(color: ThemeColor): string;
+	fg(color: ThemeColor, text: string): string;
+}
+
+/**
+ * With `invert=true`, the text color is used at rest and the sweep moves toward
+ * the theme's dim color.
+ */
+export function shimmerString(
+	text: string,
+	elapsedMs: number,
+	theme: ShimmerTheme,
+	direction: "ltr" | "rtl" = "ltr",
+	speed: "slow" | "normal" | "fast" = "normal",
+	invert = false,
+): string {
+	const chars = [...text];
+	if (chars.length === 0) return "";
+	const shimmerBase = ansiToRgb(theme.getFgAnsi(invert ? "text" : "dim"));
+	const shimmerHighlight = ansiToRgb(theme.getFgAnsi(invert ? "dim" : "text"));
+	if (!shimmerBase || !shimmerHighlight) return theme.fg("text", text);
+	const period = chars.length + SHIMMER_PADDING * 2;
+	const unitsPerS = period / SHIMMER_SWEEP_S;
+	// The band crosses padding at either end while every character is still dim. Scaling only
+	// the stretch where it actually overlaps the text keeps that dark pause identical at every
+	// speed, so `speed` changes the sweep alone rather than the whole cycle.
+	const litEnter = SHIMMER_PADDING - SHIMMER_BAND_HALF;
+	const litExit = SHIMMER_PADDING + chars.length - 1 + SHIMMER_BAND_HALF;
+	const enterS = litEnter / unitsPerS;
+	const litS = (litExit - litEnter) / unitsPerS / (speed === "slow" ? 0.5 : speed === "fast" ? 2 : 1);
+	const phase = (elapsedMs / 1000) % (enterS + litS + (period - litExit) / unitsPerS);
+	const linear =
+		phase < enterS
+			? phase * unitsPerS
+			: phase < enterS + litS
+				? litEnter + ((phase - enterS) / litS) * (litExit - litEnter)
+				: litExit + (phase - enterS - litS) * unitsPerS;
+	const pos = direction === "rtl" ? period - linear : linear;
+
+	let out = "";
+	for (let i = 0; i < chars.length; i++) {
+		const ch = chars[i]!;
+		const dist = Math.abs(i + SHIMMER_PADDING - pos);
+		const t = dist <= SHIMMER_BAND_HALF ? 0.5 * (1 + Math.cos((Math.PI * dist) / SHIMMER_BAND_HALF)) : 0;
+		const alpha = t * 0.9;
+		const r = Math.round(shimmerHighlight[0] * alpha + shimmerBase[0] * (1 - alpha));
+		const g = Math.round(shimmerHighlight[1] * alpha + shimmerBase[1] * (1 - alpha));
+		const b = Math.round(shimmerHighlight[2] * alpha + shimmerBase[2] * (1 - alpha));
+		const bold = !invert && t > 0.2 ? "\x1b[1m" : "";
+		out += `${bold}\x1b[38;2;${r};${g};${b}m${ch}\x1b[22m`;
+	}
+	return out + "\x1b[0m";
+}
+
+function ansiToRgb(ansi: string): [number, number, number] | null {
+	const match = ansi.match(/^\x1b\[38;2;(\d+);(\d+);(\d+)m$/);
+	if (!match) return null;
+	return [Number(match[1]), Number(match[2]), Number(match[3])];
+}

package/src/ui/toolActivity.ts

@@ -0,0 +1,35 @@
+/**
+ * Shared renderer for one-line tool-activity labels (`formatToolActivity`
+ * output), so the MoA progress table and the cancel overlay color a tool
+ * name and its argument identically, following pi's own read/grep/edit/write
+ * renderers (bold `toolTitle` name, `accent` argument).
+ *
+ * Splits only at the first run of whitespace — the boundary
+ * `formatToolActivity` itself produces between a tool name and its argument
+ * — and never rewrites the text on either side, so activity strings stay
+ * byte-identical for the runtime's equality-based loop detection.
+ */
+
+import type { ThemeColor } from "@earendil-works/pi-coding-agent";
+
+/** The slice of pi's `Theme` this renderer needs. */
+export interface ActivityTheme {
+	fg(color: ThemeColor, text: string): string;
+	bold(text: string): string;
+}
+
+const ACTIVITY_SPLIT = /^(\s*)(\S+)(\s*)([\s\S]*)$/;
+
+/**
+ * Highlight a plain activity string as a bold `toolTitle` tool name followed
+ * by its `accent` argument, preserving every character — including leading
+ * and repeated whitespace — exactly. Falls back to the raw string when no
+ * tool token can be found at all (empty or whitespace-only input).
+ */
+export function highlightActivity(theme: ActivityTheme, activity: string): string {
+	const match = activity.match(ACTIVITY_SPLIT);
+	if (!match) return activity;
+	const [, leading, tool, sep, detail] = match;
+	const styledTool = theme.fg("toolTitle", theme.bold(tool));
+	return detail ? `${leading}${styledTool}${sep}${theme.fg("accent", detail)}` : `${leading}${styledTool}${sep}`;
+}

package/src/ui/twoPaneModelThinking.ts

@@ -0,0 +1,272 @@
+import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
+import { getSelectListTheme } from "@earendil-works/pi-coding-agent";
+import { fuzzyFilter, Key, matchesKey, SelectList, truncateToWidth, visibleWidth, type SelectItem, type TUI } from "@earendil-works/pi-tui";
+import { SELECTOR_POINTER } from "./chrome.ts";
+import { renderMenuFooterContents } from "./menu.ts";
+import { MODEL_LIST_LAYOUT } from "./modelLabel.ts";
+import { getModelCatalogue } from "../config/modelCatalogue.ts";
+import {
+	defaultThinkingForModel,
+	thinkingOptionsForModel,
+	type MoaConfig,
+} from "../config/settings.ts";
+import {
+	isThinkingLevel,
+	modelRefLabel,
+	parseRef,
+	THINKING_LEVELS,
+	type ModelRef,
+	type ThinkingLevel,
+} from "../shared/modelRefs.ts";
+
+const MAX_VISIBLE_ROWS = 10;
+
+/** SelectList hardcodes "→ "; the extension's pointer is a plain "> " everywhere. */
+const withPointer = (line: string): string => line.replace("→ ", SELECTOR_POINTER);
+
+function modelThinkingPaneWidths(bodyWidth: number): { left: number; right: number } {
+	const divider = 1;
+	const longestLevel = THINKING_LEVELS.reduce((longest, level) => level.length > longest.length ? level : longest);
+	// One composed inset plus SelectList's two safety columns after its selector.
+	const rightMin = Math.max(visibleWidth(" Thinking"), visibleWidth(`→ ${longestLevel}`) + 3);
+	const right = Math.max(1, Math.min(rightMin, Math.max(1, bodyWidth - divider - 1)));
+	return { left: Math.max(1, bodyWidth - divider - right), right };
+}
+
+function toModelItems(refs: ModelRef[]): SelectItem[] {
+	return refs.map((ref) => ({ value: modelRefLabel(ref), label: modelRefLabel(ref) }));
+}
+
+/**
+ * Reusable two-pane selector: models on the left and model-specific thinking
+ * levels on the right. The model filter always owns text input; Tab or the
+ * left/right arrows move the selection focus between panes.
+ */
+export class TwoPaneModelThinking {
+	private modelList: SelectList;
+	private levelList: SelectList;
+	private filter = "";
+	private activePane: "model" | "level" | "buttons" = "model";
+	private activeButton = 0;
+	private maxVisibleRows = MAX_VISIBLE_ROWS;
+	private readonly modelItems: SelectItem[];
+
+	constructor(
+		private readonly tui: TUI,
+		private readonly theme: Theme,
+		availableRefs: ModelRef[],
+		private readonly config: MoaConfig,
+		private readonly currentThinking: ThinkingLevel,
+		private readonly ctx: ExtensionContext,
+	) {
+		this.modelItems = toModelItems(availableRefs);
+		this.modelList = new SelectList([], 1, getSelectListTheme());
+		this.levelList = new SelectList([], 1, getSelectListTheme());
+		this.reset();
+	}
+
+	isModelPane(): boolean {
+		return this.activePane === "model";
+	}
+
+	/** Limit the complete two-pane body, including filter/header/scroll rows. */
+	setMaxVisibleRows(limit: number): void {
+		const next = Math.max(1, Math.floor(limit));
+		if (next === this.maxVisibleRows) return;
+		this.maxVisibleRows = next;
+		this.rebuildPreservingSelection();
+	}
+
+	reset(defaultRef?: ModelRef, defaultThinking?: ThinkingLevel): void {
+		this.filter = "";
+		this.activePane = "model";
+		this.activeButton = 0;
+		this.rebuildModelList();
+		if (defaultRef) {
+			const defaultIndex = this.modelItems.findIndex((item) => item.value === modelRefLabel(defaultRef));
+			if (defaultIndex >= 0) this.modelList.setSelectedIndex(defaultIndex);
+		}
+		this.rebuildThinkingList();
+		if (defaultThinking) this.selectThinking(defaultThinking);
+	}
+
+	private selectThinking(thinking: ThinkingLevel): void {
+		const key = this.modelList.getSelectedItem()?.value;
+		if (!key) return;
+		const levels = thinkingOptionsForModel(getModelCatalogue(this.ctx.modelRegistry).thinkingLevelsFor(parseRef(key)));
+		const index = levels.indexOf(thinking);
+		if (index >= 0) this.levelList.setSelectedIndex(index);
+	}
+
+	private listItemRows(itemCount: number): number {
+		const chromeRows = 1 + (this.filter ? 1 : 0);
+		const available = Math.max(1, this.maxVisibleRows - chromeRows);
+		return itemCount > available ? Math.max(1, available - 1) : available;
+	}
+
+	private filteredModelItems(): SelectItem[] {
+		return this.filter.trim()
+			? fuzzyFilter(this.modelItems, this.filter, (item) => item.label)
+			: this.modelItems;
+	}
+
+	private rebuildModelList(): SelectItem[] {
+		const items = this.filteredModelItems();
+		this.modelList = new SelectList(
+			items,
+			Math.min(Math.max(items.length, 1), this.listItemRows(items.length)),
+			getSelectListTheme(),
+			MODEL_LIST_LAYOUT,
+		);
+		this.modelList.onSelectionChange = () => {
+			this.rebuildThinkingList();
+			this.tui.requestRender();
+		};
+		return items;
+	}
+
+	private rebuildPreservingSelection(): void {
+		const selectedModel = this.modelList.getSelectedItem()?.value;
+		const selectedLevel = this.levelList.getSelectedItem()?.value;
+		const items = this.rebuildModelList();
+		if (selectedModel) {
+			const index = items.findIndex((item) => item.value === selectedModel);
+			if (index >= 0) this.modelList.setSelectedIndex(index);
+		}
+		this.rebuildThinkingList();
+		if (selectedLevel && isThinkingLevel(selectedLevel)) this.selectThinking(selectedLevel);
+	}
+
+	private rebuildThinkingList(): void {
+		const key = this.modelList.getSelectedItem()?.value;
+		const registryLevels = key
+			? getModelCatalogue(this.ctx.modelRegistry).thinkingLevelsFor(parseRef(key))
+			: [];
+		const levels = thinkingOptionsForModel(registryLevels);
+		const items = (levels.length > 0 ? levels : ["off"]).map((level) => ({ value: level, label: level }));
+		this.levelList = new SelectList(items, Math.min(Math.max(items.length, 1), this.listItemRows(items.length)), getSelectListTheme());
+		if (!key) return;
+		const preferred = defaultThinkingForModel(key, this.config, this.currentThinking, registryLevels);
+		const preferredIndex = levels.indexOf(preferred);
+		if (preferredIndex >= 0) this.levelList.setSelectedIndex(preferredIndex);
+	}
+
+	handleInput(data: string): "confirm" | "back" | undefined {
+		if (matchesKey(data, Key.escape)) return "back";
+		if (matchesKey(data, Key.tab)) {
+			// Tab cycles Models → Thinking → action buttons → Models;
+			// left/right continue to switch between Models and Thinking (or
+			// between buttons, once the action bar is focused).
+			this.activePane = this.activePane === "model" ? "level" : this.activePane === "level" ? "buttons" : "model";
+			this.tui.requestRender();
+			return undefined;
+		}
+		if (this.activePane === "buttons") {
+			if (matchesKey(data, Key.left) || matchesKey(data, Key.right)) {
+				this.activeButton = this.activeButton === 0 ? 1 : 0;
+				this.tui.requestRender();
+				return undefined;
+			}
+			if (matchesKey(data, Key.enter)) {
+				return this.activeButton === 0 && this.modelList.getSelectedItem() && this.levelList.getSelectedItem()
+					? "confirm"
+					: "back";
+			}
+			return undefined;
+		}
+		if (matchesKey(data, Key.enter)) {
+			return this.modelList.getSelectedItem() && this.levelList.getSelectedItem() ? "confirm" : undefined;
+		}
+		if (matchesKey(data, Key.left) || matchesKey(data, Key.right)) {
+			this.activePane = this.activePane === "model" ? "level" : "model";
+			this.tui.requestRender();
+			return undefined;
+		}
+		if (data === "\x7f" || data === "\b") {
+			this.activePane = "model";
+			if (this.filter.length > 0) {
+				this.filter = this.filter.slice(0, -1);
+				this.rebuildPreservingSelection();
+				this.tui.requestRender();
+			}
+			return undefined;
+		}
+		if (data.length === 1 && data >= " " && data !== "\x7f") {
+			this.activePane = "model";
+			this.filter += data;
+			this.rebuildPreservingSelection();
+			this.tui.requestRender();
+			return undefined;
+		}
+		(this.activePane === "model" ? this.modelList : this.levelList).handleInput(data);
+		this.tui.requestRender();
+		return undefined;
+	}
+
+	getSelected(): { ref: ModelRef; thinking: ThinkingLevel } {
+		const model = this.modelList.getSelectedItem();
+		const level = this.levelList.getSelectedItem();
+		if (!model || !level || !isThinkingLevel(level.value)) {
+			throw new Error("Cannot confirm an empty model or thinking-level selection");
+		}
+		return { ref: parseRef(model.value), thinking: level.value };
+	}
+
+	render(bodyWidth: number): string[] {
+		const { left: leftWidth, right: rightWidth } = modelThinkingPaneWidths(bodyWidth);
+		const column = (text: string, width: number) => truncateToWidth(text, width, "", true);
+		const paneDivider = this.theme.fg("border", "│");
+		const headers = column(
+			this.activePane === "model" ? this.theme.bold(this.theme.fg("accent", " Models")) : this.theme.bold(" Models"),
+			leftWidth,
+		) + paneDivider + column(
+			` ${this.activePane === "level" ? this.theme.bold(this.theme.fg("accent", "Thinking")) : this.theme.bold("Thinking")}`,
+			rightWidth,
+		);
+		const modelLines = this.modelList.render(Math.max(1, leftWidth - 1));
+		const levelLines = this.levelList.render(Math.max(1, rightWidth - 1));
+		const rows = Math.max(modelLines.length, levelLines.length);
+		const lines = [
+			...(this.filter ? [column(this.theme.fg("muted", ` filter: ${this.filter}`), bodyWidth)] : []),
+			headers,
+		];
+		for (let index = 0; index < rows; index++) {
+			const modelLine = modelLines[index] ?? "";
+			const levelLine = levelLines[index] ?? "";
+			let leftCell = column(` ${withPointer(modelLine)}`, leftWidth);
+			let rightCell = column(` ${withPointer(levelLine)}`, rightWidth);
+			// SelectList renders "→ " only on the selected row; other rows use "  ".
+			if (this.activePane === "model" && modelLine.includes("→")) {
+				leftCell = this.theme.bg("selectedBg", leftCell);
+			}
+			if (this.activePane === "level" && levelLine.includes("→")) {
+				rightCell = this.theme.bg("selectedBg", rightCell);
+			}
+			lines.push(leftCell + paneDivider + rightCell);
+		}
+		return lines.slice(0, this.maxVisibleRows);
+	}
+
+	renderFooter(bodyWidth: number, hints: string): { actionRow: string; hintRows: string[] } {
+		const buttonText = (label: string, index: number) => {
+			const isActive = this.activeButton === index;
+			const text = isActive ? `[ ${label} ]` : `‹ ${label} ›`;
+			return isActive && this.activePane === "buttons"
+				? this.theme.bold(this.theme.fg("accent", text))
+				: this.theme.fg("muted", text);
+		};
+		const rows = renderMenuFooterContents(
+			this.theme,
+			bodyWidth,
+			`${buttonText("Select", 0)}    ${buttonText("Cancel", 1)}`,
+			hints,
+			{ wrapHints: true },
+		);
+		return { actionRow: rows[1] ?? "", hintRows: rows.slice(3) };
+	}
+
+	invalidate(): void {
+		this.modelList.invalidate();
+		this.levelList.invalidate();
+	}
+}