@bastani/atomic 0.8.31-alpha.5 → 0.9.0-alpha.2

package/dist/builtin/subagents/src/runs/foreground/chain-clarify-render-modes.ts

@@ -0,0 +1,161 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { getEffectiveBehavior, getEffectiveModel } from "./chain-clarify-behavior.ts";
+import { appendNotice, getFooterText, renderFooter, renderHeader, row } from "./chain-clarify-frame.ts";
+import type { ChainClarifyState } from "./chain-clarify-state.ts";
+
+export function renderSingleMode(state: ChainClarifyState): string[] {
+	const innerW = state.width - 2;
+	const th = state.theme;
+	const lines: string[] = [];
+
+	const agentName = state.agentConfigs[0]?.name ?? "unknown";
+	const maxHeaderLen = innerW - 4;
+	const headerText = ` Agent: ${truncateToWidth(agentName, maxHeaderLen - 9)} `;
+	lines.push(renderHeader(state, headerText));
+	lines.push(row(state, ""));
+
+	const config = state.agentConfigs[0]!;
+	const behavior = getEffectiveBehavior(state, 0);
+	lines.push(row(state, ` ${th.fg("accent", "▶ " + config.name)}`));
+
+	const template = (state.templates[0] ?? "").split("\n")[0] ?? "";
+	lines.push(row(state, `     ${th.fg("dim", "task: ")}${truncateToWidth(template, innerW - 12)}`));
+	lines.push(row(state, `     ${th.fg("dim", "model: ")}${truncateToWidth(formatModelValue(state, 0), innerW - 13)}`));
+
+	const writesValue = behavior.output === false
+		? th.fg("dim", "(disabled)")
+		: (behavior.output || th.fg("dim", "(none)"));
+	lines.push(row(state, `     ${th.fg("dim", "writes: ")}${truncateToWidth(writesValue, innerW - 14)}`));
+	lines.push(row(state, `     ${th.fg("dim", "skills: ")}${truncateToWidth(formatSkillsValue(state, behavior.skills), innerW - 14)}`));
+	lines.push(row(state, ""));
+
+	appendNotice(state, lines);
+	lines.push(renderFooter(state, getFooterText(state)));
+	return lines;
+}
+
+export function renderParallelMode(state: ChainClarifyState): string[] {
+	const innerW = state.width - 2;
+	const th = state.theme;
+	const lines: string[] = [];
+
+	lines.push(renderHeader(state, ` Parallel Tasks (${state.agentConfigs.length}) `));
+	lines.push(row(state, ""));
+
+	for (let i = 0; i < state.agentConfigs.length; i++) {
+		const config = state.agentConfigs[i]!;
+		const isSelected = i === state.selectedStep;
+		const color = isSelected ? "accent" : "dim";
+		const prefix = isSelected ? "▶ " : "  ";
+		const taskPrefix = `Task ${i + 1}: `;
+		const maxNameLen = innerW - 4 - prefix.length - taskPrefix.length;
+		const agentName = config.name.length > maxNameLen
+			? config.name.slice(0, maxNameLen - 1) + "…"
+			: config.name;
+		lines.push(row(state, ` ${th.fg(color, prefix + taskPrefix + agentName)}`));
+
+		const template = (state.templates[i] ?? "").split("\n")[0] ?? "";
+		lines.push(row(state, `     ${th.fg("dim", "task: ")}${truncateToWidth(template, innerW - 12)}`));
+		lines.push(row(state, `     ${th.fg("dim", "model: ")}${truncateToWidth(formatModelValue(state, i), innerW - 13)}`));
+
+		const behavior = getEffectiveBehavior(state, i);
+		lines.push(row(state, `     ${th.fg("dim", "skills: ")}${truncateToWidth(formatSkillsValue(state, behavior.skills), innerW - 14)}`));
+		lines.push(row(state, ""));
+	}
+
+	appendNotice(state, lines);
+	lines.push(renderFooter(state, getFooterText(state)));
+	return lines;
+}
+
+export function renderChainMode(state: ChainClarifyState): string[] {
+	const innerW = state.width - 2;
+	const th = state.theme;
+	const lines: string[] = [];
+
+	const chainLabel = state.agentConfigs.map((c) => c.name).join(" → ");
+	const maxHeaderLen = innerW - 4;
+	lines.push(renderHeader(state, ` Chain: ${truncateToWidth(chainLabel, maxHeaderLen - 9)} `));
+	lines.push(row(state, ""));
+	lines.push(row(state, ` Original Task: ${truncateToWidth(state.originalTask, innerW - 16)}`));
+	const chainDirPreview = truncateToWidth(state.chainDir ?? "", innerW - 12);
+	lines.push(row(state, ` Chain Dir: ${th.fg("dim", chainDirPreview)}`));
+
+	const progressEnabled = state.agentConfigs.some((_, i) => getEffectiveBehavior(state, i).progress);
+	const progressValue = progressEnabled ? th.fg("success", "enabled") : th.fg("dim", "disabled");
+	lines.push(row(state, ` Progress: ${progressValue} ${th.fg("dim", "(press [p] to toggle)")}`));
+	lines.push(row(state, ""));
+
+	for (let i = 0; i < state.agentConfigs.length; i++) {
+		renderChainStep(state, lines, i, progressEnabled);
+	}
+
+	appendNotice(state, lines);
+	lines.push(renderFooter(state, getFooterText(state)));
+	return lines;
+}
+
+function renderChainStep(state: ChainClarifyState, lines: string[], index: number, progressEnabled: boolean): void {
+	const innerW = state.width - 2;
+	const th = state.theme;
+	const config = state.agentConfigs[index]!;
+	const isSelected = index === state.selectedStep;
+	const behavior = getEffectiveBehavior(state, index);
+	const color = isSelected ? "accent" : "dim";
+	const prefix = isSelected ? "▶ " : "  ";
+	const stepPrefix = `Step ${index + 1}: `;
+	const maxNameLen = innerW - 4 - prefix.length - stepPrefix.length;
+	const agentName = config.name.length > maxNameLen
+		? config.name.slice(0, maxNameLen - 1) + "…"
+		: config.name;
+	lines.push(row(state, ` ${th.fg(color, prefix + stepPrefix + agentName)}`));
+
+	const template = (state.templates[index] ?? "").split("\n")[0] ?? "";
+	const highlighted = template
+		.replace(/\{task\}/g, th.fg("success", "{task}"))
+		.replace(/\{previous\}/g, th.fg("warning", "{previous}"))
+		.replace(/\{chain_dir\}/g, th.fg("accent", "{chain_dir}"));
+	lines.push(row(state, `     ${th.fg("dim", "task: ")}${truncateToWidth(highlighted, innerW - 12)}`));
+	lines.push(row(state, `     ${th.fg("dim", "model: ")}${truncateToWidth(formatModelValue(state, index), innerW - 13)}`));
+
+	const writesValue = behavior.output === false
+		? th.fg("dim", "(disabled)")
+		: (behavior.output || th.fg("dim", "(none)"));
+	lines.push(row(state, `     ${th.fg("dim", "writes: ")}${truncateToWidth(writesValue, innerW - 14)}`));
+
+	const readsValue = behavior.reads === false
+		? th.fg("dim", "(disabled)")
+		: (behavior.reads && behavior.reads.length > 0 ? behavior.reads.join(", ") : th.fg("dim", "(none)"));
+	lines.push(row(state, `     ${th.fg("dim", "reads: ")}${truncateToWidth(readsValue, innerW - 13)}`));
+	lines.push(row(state, `     ${th.fg("dim", "skills: ")}${truncateToWidth(formatSkillsValue(state, behavior.skills), innerW - 14)}`));
+
+	if (progressEnabled) {
+		const progressAction = index === 0
+			? th.fg("success", "writes progress.md")
+			: th.fg("accent", "reads progress.md");
+		lines.push(row(state, `     ${th.fg("dim", "progress: ")}${progressAction}`));
+	}
+
+	if (index < state.agentConfigs.length - 1) {
+		const nextStepUsePrevious = (state.templates[index + 1] ?? "").includes("{previous}");
+		if (nextStepUsePrevious) {
+			const indicator = th.fg("dim", "     ↳ response → ") + th.fg("warning", "{previous}");
+			lines.push(row(state, indicator));
+		}
+	}
+	lines.push(row(state, ""));
+}
+
+function formatModelValue(state: ChainClarifyState, stepIndex: number): string {
+	const effectiveModel = getEffectiveModel(state, stepIndex);
+	const override = state.behaviorOverrides.get(stepIndex);
+	return override?.model !== undefined
+		? state.theme.fg("warning", effectiveModel) + state.theme.fg("dim", " ✎")
+		: effectiveModel;
+}
+
+function formatSkillsValue(state: ChainClarifyState, skills: string[] | false): string {
+	return skills === false
+		? state.theme.fg("dim", "(disabled)")
+		: (skills.length ? skills.join(", ") : state.theme.fg("dim", "(none)"));
+}

package/dist/builtin/subagents/src/runs/foreground/chain-clarify-render-selectors.ts

@@ -0,0 +1,203 @@
+import { truncateToWidth } from "@earendil-works/pi-tui";
+import { getCursorDisplayPos, ensureCursorVisible, renderEditor, wrapText } from "./chain-clarify-editor.ts";
+import { getAvailableThinkingLevels, getEffectiveModel } from "./chain-clarify-behavior.ts";
+import { getStepLabel, renderFooter, renderHeader, row } from "./chain-clarify-frame.ts";
+import { EDIT_VIEWPORT_HEIGHT, MODEL_SELECTOR_HEIGHT, type ChainClarifyState } from "./chain-clarify-state.ts";
+import { splitKnownThinkingSuffix, type ThinkingLevel } from "../../shared/model-info.ts";
+
+export function renderFullEditMode(state: ChainClarifyState): string[] {
+	const innerW = state.width - 2;
+	const textWidth = innerW - 2;
+	const lines: string[] = [];
+
+	const { lines: wrapped, starts } = wrapText(state.editState.buffer, textWidth);
+	const cursorPos = getCursorDisplayPos(state.editState.cursor, starts);
+	state.editState = {
+		...state.editState,
+		viewportOffset: ensureCursorVisible(cursorPos.line, EDIT_VIEWPORT_HEIGHT, state.editState.viewportOffset),
+	};
+
+	const fieldName = state.editMode === "template" ? "task" : state.editMode;
+	const rawAgentName = state.agentConfigs[state.editingStep!]?.name ?? "unknown";
+	const maxAgentLen = innerW - 30;
+	const agentName = rawAgentName.length > maxAgentLen
+		? rawAgentName.slice(0, maxAgentLen - 1) + "…"
+		: rawAgentName;
+	const stepLabel = state.mode === "single"
+		? agentName
+		: state.mode === "parallel"
+			? `Task ${state.editingStep! + 1}: ${agentName}`
+			: `Step ${state.editingStep! + 1}: ${agentName}`;
+	lines.push(renderHeader(state, ` Editing ${fieldName} (${stepLabel}) `));
+	lines.push(row(state, ""));
+
+	const editorLines = renderEditor(state.editState, textWidth, EDIT_VIEWPORT_HEIGHT);
+	for (const line of editorLines) {
+		lines.push(row(state, ` ${line}`));
+	}
+
+	const linesBelow = wrapped.length - state.editState.viewportOffset - EDIT_VIEWPORT_HEIGHT;
+	const hasMore = linesBelow > 0;
+	const hasLess = state.editState.viewportOffset > 0;
+	let scrollInfo = "";
+	if (hasLess) scrollInfo += "↑";
+	if (hasMore) scrollInfo += `↓ ${linesBelow}+`;
+
+	lines.push(row(state, ""));
+	const footerText = scrollInfo
+		? ` [Esc] Done • [Ctrl+C] Discard • ${scrollInfo} `
+		: " [Esc] Done • [Ctrl+C] Discard ";
+	lines.push(renderFooter(state, footerText));
+
+	return lines;
+}
+
+export function renderModelSelector(state: ChainClarifyState): string[] {
+	const th = state.theme;
+	const lines: string[] = [];
+
+	lines.push(renderHeader(state, ` Select Model (${getStepLabel(state, state.editingStep!)}) `));
+	lines.push(row(state, ""));
+	const searchPrefix = th.fg("dim", "Search: ");
+	const cursor = "\x1b[7m \x1b[27m";
+	lines.push(row(state, ` ${searchPrefix}${state.modelSearchQuery}${cursor}`));
+	lines.push(row(state, ""));
+
+	const currentModel = getEffectiveModel(state, state.editingStep!);
+	const currentModelBase = splitKnownThinkingSuffix(currentModel).baseModel;
+	const currentLabel = th.fg("dim", "Current: ");
+	lines.push(row(state, ` ${currentLabel}${th.fg("warning", currentModel)}`));
+	lines.push(row(state, ""));
+
+	if (state.filteredModels.length === 0) {
+		lines.push(row(state, ` ${th.fg("dim", "No matching models")}`));
+	} else {
+		const maxVisible = MODEL_SELECTOR_HEIGHT;
+		let startIdx = 0;
+		if (state.filteredModels.length > maxVisible) {
+			startIdx = Math.max(0, state.modelSelectedIndex - Math.floor(maxVisible / 2));
+			startIdx = Math.min(startIdx, state.filteredModels.length - maxVisible);
+		}
+
+		const endIdx = Math.min(startIdx + maxVisible, state.filteredModels.length);
+		if (startIdx > 0) {
+			lines.push(row(state, ` ${th.fg("dim", `  ↑ ${startIdx} more`)}`));
+		}
+
+		for (let i = startIdx; i < endIdx; i++) {
+			const model = state.filteredModels[i]!;
+			const isSelected = i === state.modelSelectedIndex;
+			const isCurrent = model.fullId === currentModelBase || model.id === currentModelBase;
+			const prefix = isSelected ? th.fg("accent", "→ ") : "  ";
+			const modelText = isSelected ? th.fg("accent", model.id) : model.id;
+			const providerBadge = th.fg("dim", ` [${model.provider}]`);
+			const currentBadge = isCurrent ? th.fg("success", " current") : "";
+			lines.push(row(state, ` ${prefix}${modelText}${providerBadge}${currentBadge}`));
+		}
+
+		const remaining = state.filteredModels.length - endIdx;
+		if (remaining > 0) {
+			lines.push(row(state, ` ${th.fg("dim", `  ↓ ${remaining} more`)}`));
+		}
+	}
+
+	for (let i = lines.length; i < 18; i++) {
+		lines.push(row(state, ""));
+	}
+	lines.push(renderFooter(state, " [Enter] Select • [Esc] Cancel • Type to search "));
+	return lines;
+}
+
+export function renderThinkingSelector(state: ChainClarifyState): string[] {
+	const th = state.theme;
+	const lines: string[] = [];
+
+	lines.push(renderHeader(state, ` Thinking Level (${getStepLabel(state, state.editingStep!)}) `));
+	lines.push(row(state, ""));
+	const currentModel = getEffectiveModel(state, state.editingStep!);
+	lines.push(row(state, ` ${th.fg("dim", "Model: ")}${th.fg("accent", currentModel)}`));
+	lines.push(row(state, ""));
+	lines.push(row(state, ` ${th.fg("dim", "Select thinking level (extended thinking budget):")}`));
+	lines.push(row(state, ""));
+
+	const levelDescriptions: Record<ThinkingLevel, string> = {
+		off: "No extended thinking",
+		minimal: "Brief reasoning",
+		low: "Light reasoning",
+		medium: "Moderate reasoning",
+		high: "Deep reasoning",
+		xhigh: "Maximum reasoning (ultrathink)",
+	};
+	const levels = getAvailableThinkingLevels(state, state.editingStep!);
+	if (levels.length === 0) {
+		lines.push(row(state, ` ${th.fg("dim", "No supported thinking levels")}`));
+	} else {
+		for (let i = 0; i < levels.length; i++) {
+			const level = levels[i]!;
+			const isSelected = i === state.thinkingSelectedIndex;
+			const prefix = isSelected ? th.fg("accent", "→ ") : "  ";
+			const levelText = isSelected ? th.fg("accent", level) : level;
+			const desc = th.fg("dim", ` - ${levelDescriptions[level]}`);
+			lines.push(row(state, ` ${prefix}${levelText}${desc}`));
+		}
+	}
+
+	for (let i = lines.length; i < 16; i++) {
+		lines.push(row(state, ""));
+	}
+	const footerText = levels.length === 0
+		? " [Esc] Cancel "
+		: " [Enter] Select • [Esc] Cancel • ↑↓ Navigate ";
+	lines.push(renderFooter(state, footerText));
+	return lines;
+}
+
+export function renderSkillSelector(state: ChainClarifyState): string[] {
+	const innerW = state.width - 2;
+	const th = state.theme;
+	const lines: string[] = [];
+
+	lines.push(renderHeader(state, ` Select Skills (${getStepLabel(state, state.editingStep!)}) `));
+	lines.push(row(state, ""));
+	const cursor = "\x1b[7m \x1b[27m";
+	lines.push(row(state, ` ${th.fg("dim", "Search: ")}${state.skillSearchQuery}${cursor}`));
+	lines.push(row(state, ""));
+
+	const selected = [...state.skillSelectedNames].join(", ") || th.fg("dim", "(none)");
+	lines.push(row(state, ` ${th.fg("dim", "Selected: ")}${truncateToWidth(selected, innerW - 12)}`));
+	lines.push(row(state, ""));
+
+	const selectorHeight = 10;
+	if (state.filteredSkills.length === 0) {
+		lines.push(row(state, ` ${th.fg("dim", "No matching skills")}`));
+	} else {
+		let startIdx = 0;
+		if (state.filteredSkills.length > selectorHeight) {
+			startIdx = Math.max(0, state.skillCursorIndex - Math.floor(selectorHeight / 2));
+			startIdx = Math.min(startIdx, state.filteredSkills.length - selectorHeight);
+		}
+		const endIdx = Math.min(startIdx + selectorHeight, state.filteredSkills.length);
+		if (startIdx > 0) lines.push(row(state, ` ${th.fg("dim", `  ↑ ${startIdx} more`)}`));
+
+		for (let i = startIdx; i < endIdx; i++) {
+			const skill = state.filteredSkills[i]!;
+			const isCursor = i === state.skillCursorIndex;
+			const isSelected = state.skillSelectedNames.has(skill.name);
+			const prefix = isCursor ? th.fg("accent", "→ ") : "  ";
+			const checkbox = isSelected ? th.fg("success", "[x]") : "[ ]";
+			const nameText = isCursor ? th.fg("accent", skill.name) : skill.name;
+			const sourceBadge = th.fg("dim", ` [${skill.source}]`);
+			const desc = skill.description ? th.fg("dim", ` - ${truncateToWidth(skill.description, 25)}`) : "";
+			lines.push(row(state, ` ${prefix}${checkbox} ${nameText}${sourceBadge}${desc}`));
+		}
+
+		const remaining = state.filteredSkills.length - endIdx;
+		if (remaining > 0) lines.push(row(state, ` ${th.fg("dim", `  ↓ ${remaining} more`)}`));
+	}
+
+	for (let i = lines.length; i < 18; i++) {
+		lines.push(row(state, ""));
+	}
+	lines.push(renderFooter(state, " [Enter] Confirm • [Space] Toggle • [Esc] Cancel "));
+	return lines;
+}

package/dist/builtin/subagents/src/runs/foreground/chain-clarify-selectors.ts

@@ -0,0 +1,234 @@
+import { matchesKey } from "@earendil-works/pi-tui";
+import { findModelInfo, getSupportedThinkingLevels, splitKnownThinkingSuffix } from "../../shared/model-info.ts";
+import { getAvailableThinkingLevels, getEffectiveBehavior, getEffectiveModel, updateBehavior } from "./chain-clarify-behavior.ts";
+import { showNotice } from "./chain-clarify-frame.ts";
+import { exitEditMode, type ChainClarifyState } from "./chain-clarify-state.ts";
+
+export function enterModelSelector(state: ChainClarifyState): void {
+	state.editingStep = state.selectedStep;
+	state.editMode = "model";
+	state.modelSearchQuery = "";
+	state.modelSelectedIndex = 0;
+	state.filteredModels = [...state.availableModels];
+	const currentModel = splitKnownThinkingSuffix(getEffectiveModel(state, state.selectedStep)).baseModel;
+	const currentIndex = state.filteredModels.findIndex((m) => m.fullId === currentModel || m.id === currentModel);
+	if (currentIndex >= 0) {
+		state.modelSelectedIndex = currentIndex;
+	}
+
+	state.tui.requestRender();
+}
+
+function filterModels(state: ChainClarifyState): void {
+	const query = state.modelSearchQuery.toLowerCase();
+	if (!query) {
+		state.filteredModels = [...state.availableModels];
+	} else {
+		state.filteredModels = state.availableModels.filter((m) =>
+			m.fullId.toLowerCase().includes(query) ||
+			m.id.toLowerCase().includes(query) ||
+			m.provider.toLowerCase().includes(query)
+		);
+	}
+	state.modelSelectedIndex = Math.min(state.modelSelectedIndex, Math.max(0, state.filteredModels.length - 1));
+}
+
+export function handleModelSelectorInput(state: ChainClarifyState, data: string): void {
+	if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+		exitEditMode(state);
+		return;
+	}
+
+	if (matchesKey(data, "return")) {
+		const selected = state.filteredModels[state.modelSelectedIndex];
+		if (selected) {
+			const { thinkingSuffix } = splitKnownThinkingSuffix(getEffectiveModel(state, state.editingStep!));
+			const requestedLevel = thinkingSuffix.slice(1);
+			const selectedModel = findModelInfo(selected.fullId, state.availableModels, state.preferredProvider);
+			const suffix = getSupportedThinkingLevels(selectedModel).some((level) => level === requestedLevel) ? thinkingSuffix : "";
+			updateBehavior(state, state.editingStep!, "model", `${selected.fullId}${suffix}`);
+		}
+		exitEditMode(state);
+		return;
+	}
+
+	if (matchesKey(data, "up")) {
+		if (state.filteredModels.length > 0) {
+			state.modelSelectedIndex = state.modelSelectedIndex === 0
+				? state.filteredModels.length - 1
+				: state.modelSelectedIndex - 1;
+		}
+		state.tui.requestRender();
+		return;
+	}
+
+	if (matchesKey(data, "down")) {
+		if (state.filteredModels.length > 0) {
+			state.modelSelectedIndex = state.modelSelectedIndex === state.filteredModels.length - 1
+				? 0
+				: state.modelSelectedIndex + 1;
+		}
+		state.tui.requestRender();
+		return;
+	}
+
+	if (matchesKey(data, "backspace")) {
+		if (state.modelSearchQuery.length > 0) {
+			state.modelSearchQuery = state.modelSearchQuery.slice(0, -1);
+			filterModels(state);
+		}
+		state.tui.requestRender();
+		return;
+	}
+
+	if (data.length === 1 && data.charCodeAt(0) >= 32) {
+		state.modelSearchQuery += data;
+		filterModels(state);
+		state.tui.requestRender();
+	}
+}
+
+export function enterThinkingSelector(state: ChainClarifyState): void {
+	if (!getEffectiveBehavior(state, state.selectedStep).model) {
+		showNotice(state, "Select a model first", "error");
+		return;
+	}
+	state.editingStep = state.selectedStep;
+	state.editMode = "thinking";
+
+	const levels = getAvailableThinkingLevels(state, state.selectedStep);
+	const { thinkingSuffix } = splitKnownThinkingSuffix(getEffectiveModel(state, state.selectedStep));
+	const suffix = thinkingSuffix.slice(1);
+	const levelIdx = levels.findIndex((level) => level === suffix);
+	state.thinkingSelectedIndex = levelIdx >= 0 ? levelIdx : Math.max(0, levels.indexOf("off"));
+
+	state.tui.requestRender();
+}
+
+export function handleThinkingSelectorInput(state: ChainClarifyState, data: string): void {
+	if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+		exitEditMode(state);
+		return;
+	}
+
+	const levels = getAvailableThinkingLevels(state, state.editingStep!);
+	if (levels.length === 0) return;
+
+	if (matchesKey(data, "return")) {
+		const selectedLevel = levels[state.thinkingSelectedIndex] ?? "off";
+		const currentModel = getEffectiveBehavior(state, state.editingStep!).model;
+		if (currentModel) {
+			const { baseModel } = splitKnownThinkingSuffix(currentModel);
+			const newModel = selectedLevel === "off" ? baseModel : `${baseModel}:${selectedLevel}`;
+			updateBehavior(state, state.editingStep!, "model", newModel);
+		}
+		exitEditMode(state);
+		return;
+	}
+
+	if (matchesKey(data, "up")) {
+		state.thinkingSelectedIndex = state.thinkingSelectedIndex === 0
+			? levels.length - 1
+			: state.thinkingSelectedIndex - 1;
+		state.tui.requestRender();
+		return;
+	}
+
+	if (matchesKey(data, "down")) {
+		state.thinkingSelectedIndex = state.thinkingSelectedIndex === levels.length - 1
+			? 0
+			: state.thinkingSelectedIndex + 1;
+		state.tui.requestRender();
+	}
+}
+
+export function enterSkillSelector(state: ChainClarifyState): void {
+	state.editingStep = state.selectedStep;
+	state.editMode = "skills";
+	state.skillSearchQuery = "";
+	state.skillCursorIndex = 0;
+	state.filteredSkills = [...state.availableSkills];
+	const current = getEffectiveBehavior(state, state.selectedStep).skills;
+	state.skillSelectedNames.clear();
+	if (current !== false && current.length > 0) {
+		current.forEach((skillName) => state.skillSelectedNames.add(skillName));
+	}
+	state.tui.requestRender();
+}
+
+function filterSkills(state: ChainClarifyState): void {
+	const query = state.skillSearchQuery.toLowerCase();
+	if (!query) {
+		state.filteredSkills = [...state.availableSkills];
+	} else {
+		state.filteredSkills = state.availableSkills.filter((s) =>
+			s.name.toLowerCase().includes(query) ||
+			(s.description?.toLowerCase().includes(query) ?? false),
+		);
+	}
+	state.skillCursorIndex = Math.min(state.skillCursorIndex, Math.max(0, state.filteredSkills.length - 1));
+}
+
+export function handleSkillSelectorInput(state: ChainClarifyState, data: string): void {
+	if (matchesKey(data, "escape") || matchesKey(data, "ctrl+c")) {
+		exitEditMode(state);
+		return;
+	}
+
+	if (matchesKey(data, "return")) {
+		const selected = [...state.skillSelectedNames];
+		updateBehavior(state, state.editingStep!, "skills", selected);
+		exitEditMode(state);
+		return;
+	}
+
+	if (data === " ") {
+		if (state.filteredSkills.length > 0) {
+			const skill = state.filteredSkills[state.skillCursorIndex];
+			if (skill) {
+				if (state.skillSelectedNames.has(skill.name)) {
+					state.skillSelectedNames.delete(skill.name);
+				} else {
+					state.skillSelectedNames.add(skill.name);
+				}
+			}
+		}
+		state.tui.requestRender();
+		return;
+	}
+
+	if (matchesKey(data, "up")) {
+		if (state.filteredSkills.length > 0) {
+			state.skillCursorIndex = state.skillCursorIndex === 0
+				? state.filteredSkills.length - 1
+				: state.skillCursorIndex - 1;
+		}
+		state.tui.requestRender();
+		return;
+	}
+
+	if (matchesKey(data, "down")) {
+		if (state.filteredSkills.length > 0) {
+			state.skillCursorIndex = state.skillCursorIndex === state.filteredSkills.length - 1
+				? 0
+				: state.skillCursorIndex + 1;
+		}
+		state.tui.requestRender();
+		return;
+	}
+
+	if (matchesKey(data, "backspace")) {
+		if (state.skillSearchQuery.length > 0) {
+			state.skillSearchQuery = state.skillSearchQuery.slice(0, -1);
+			filterSkills(state);
+		}
+		state.tui.requestRender();
+		return;
+	}
+
+	if (data.length === 1 && data.charCodeAt(0) >= 32) {
+		state.skillSearchQuery += data;
+		filterSkills(state);
+		state.tui.requestRender();
+	}
+}