@sayknow-cli/coding-agent 0.3.12 → 0.3.15

package/src/modes/acp/acp-mode.ts

@@ -5,19 +5,46 @@ import { AcpAgent } from "./acp-agent";
 
 export type AcpSessionFactory = (cwd: string) => Promise<AgentSession>;
 
+export interface AcpConnectionHandle {
+	connection: AgentSideConnection;
+	agent: AcpAgent;
+}
+
 export function createAcpConnection(
 	transport: Stream,
 	createSession: AcpSessionFactory,
 	initialSession?: AgentSession,
 ): AgentSideConnection {
-	return new AgentSideConnection(conn => new AcpAgent(conn, createSession, initialSession), transport);
+	return createAcpConnectionWithAgent(transport, createSession, initialSession).connection;
+}
+
+/**
+ * Create an ACP connection and return both the {@link AgentSideConnection} and the
+ * underlying {@link AcpAgent}. Callers that need to await agent shutdown (terminal
+ * delete/dispose work) after transport closure should use this instead of
+ * {@link createAcpConnection}.
+ */
+export function createAcpConnectionWithAgent(
+	transport: Stream,
+	createSession: AcpSessionFactory,
+	initialSession?: AgentSession,
+): AcpConnectionHandle {
+	let agent: AcpAgent | undefined;
+	const connection = new AgentSideConnection(conn => {
+		agent = new AcpAgent(conn, createSession, initialSession);
+		return agent;
+	}, transport);
+	return { connection, agent: agent! };
 }
 
 export async function runAcpMode(createSession: AcpSessionFactory, initialSession?: AgentSession): Promise<never> {
 	const input = stream.Writable.toWeb(process.stdout);
 	const output = stream.Readable.toWeb(process.stdin);
 	const transport = ndJsonStream(input, output);
-	const connection = createAcpConnection(transport, createSession, initialSession);
+	const { connection, agent } = createAcpConnectionWithAgent(transport, createSession, initialSession);
 	await connection.closed;
+	// Await connection-local terminal work (active deletes, disposal) so
+	// `process.exit` never kills in-flight deletion/cleanup.
+	await agent.shutdownPromise;
 	process.exit(0);
 }

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

@@ -1,5 +1,16 @@
 import type { AssistantMessage, ImageContent, Usage } from "@sayknow-cli/ai";
-import { type Component, Container, Image, ImageProtocol, Markdown, Spacer, TERMINAL, Text } from "@sayknow-cli/tui";
+import {
+	type Component,
+	Container,
+	Image,
+	ImageProtocol,
+	isViewportAnchorSourceRenderer,
+	Markdown,
+	Spacer,
+	TERMINAL,
+	Text,
+	type ViewportAnchorSource,
+} from "@sayknow-cli/tui";
 import { formatNumber } from "@sayknow-cli/utils";
 import { settings } from "../../config/settings";
 import { renderDeepInterviewAssistantText } from "../../deep-interview/render-middleware";
@@ -62,6 +73,7 @@ interface AssistantMessageUpdateOptions {
 type AssistantChildDescriptor = {
 	key: string;
 	component: Component;
+	anchorSource?: ViewportAnchorSource;
 };
 
 /**
@@ -81,15 +93,16 @@ export class AssistantMessageComponent extends Container {
 	#contentBlockKeys = new WeakMap<object, string>();
 	#nextContentBlockKey = 0;
 	#reusableChildren = new WeakSet<Component>();
-
+	#viewportAnchorId?: string;
 	constructor(
 		message?: AssistantMessage,
 		private hideThinkingBlock = false,
 		private readonly onImageUpdate?: () => void,
+		viewportAnchorId?: string,
 	) {
 		super();
+		this.#viewportAnchorId = viewportAnchorId;
 
-		// Container for text/thinking content
 		this.#contentContainer = new Container();
 		this.addChild(this.#contentContainer);
 
@@ -98,6 +111,13 @@ export class AssistantMessageComponent extends Container {
 		}
 	}
 
+	#contentAnchorSource(
+		index: number,
+		kind: "text" | "thinking" | "thinking-hidden",
+	): ViewportAnchorSource | undefined {
+		return this.#viewportAnchorId ? { id: `${this.#viewportAnchorId}:content:${index}:${kind}` } : undefined;
+	}
+
 	override invalidate(): void {
 		super.invalidate();
 		if (this.#lastMessage) {
@@ -288,6 +308,12 @@ export class AssistantMessageComponent extends Container {
 	}
 
 	#reconcileChildren(descriptors: AssistantChildDescriptor[]): void {
+		for (const child of this.#contentContainer.children) this.#contentContainer.setViewportAnchorSource(child, null);
+		for (const descriptor of descriptors) {
+			if (descriptor.anchorSource && isViewportAnchorSourceRenderer(descriptor.component)) {
+				this.#contentContainer.setViewportAnchorSource(descriptor.component, descriptor.anchorSource);
+			}
+		}
 		const nextChildren = descriptors.map(descriptor => descriptor.component);
 		if (
 			nextChildren.length === this.#contentContainer.children.length &&
@@ -346,6 +372,7 @@ export class AssistantMessageComponent extends Container {
 				descriptors.push({
 					key: `${blockKey}:text`,
 					component: this.#renderTextBlock(content, streaming && i === activeContentIndex),
+					anchorSource: this.#contentAnchorSource(i, "text"),
 				});
 			} else if (content.type === "thinking" && content.thinking.trim()) {
 				// Add spacing only when another visible assistant content block follows.
@@ -358,11 +385,13 @@ export class AssistantMessageComponent extends Container {
 							`${blockKey}:thinking-hidden`,
 							() => new Text(theme.italic(theme.fg("thinkingText", "Thinking...")), 1, 0),
 						),
+						anchorSource: this.#contentAnchorSource(i, "thinking-hidden"),
 					});
 				} else {
 					descriptors.push({
 						key: `${blockKey}:thinking`,
 						component: this.#renderThinkingBlock(content, streaming && i === activeContentIndex),
+						anchorSource: this.#contentAnchorSource(i, "thinking"),
 					});
 				}
 				if (visibleContentAfter[i]) {

package/src/modes/components/bash-execution.ts

@@ -6,6 +6,7 @@ import {
 	Container,
 	Ellipsis,
 	ImageProtocol,
+	isTerminalGraphicsFallbackActive,
 	type Loader,
 	TERMINAL,
 	Text,
@@ -16,7 +17,12 @@ import {
 import { sanitizeText } from "@sayknow-cli/utils";
 import { theme } from "../../modes/theme/theme";
 import type { TruncationMeta } from "../../tools/output-meta";
-import { getSixelLineMask, isSixelPassthroughEnabled, sanitizeWithOptionalSixelPassthrough } from "../../utils/sixel";
+import {
+	containsSixelSequence,
+	getSixelLineMask,
+	isSixelPassthroughEnabled,
+	sanitizeWithOptionalSixelPassthrough,
+} from "../../utils/sixel";
 import {
 	buildExecutionFrame,
 	buildStatusFooter,
@@ -41,6 +47,7 @@ export class BashExecutionComponent extends Container {
 	#truncation?: TruncationMeta;
 	#expanded = false;
 	#displayDirty = false;
+	#displayBuiltWithGraphicsFallback: boolean | undefined;
 	#chunkGate = false;
 	#contentContainer: Container;
 	#headerText: Text;
@@ -135,7 +142,8 @@ export class BashExecutionComponent extends Container {
 	}
 
 	override render(width: number): string[] {
-		if (this.#displayDirty) {
+		const fallbackActive = isTerminalGraphicsFallbackActive();
+		if (this.#displayDirty || this.#displayBuiltWithGraphicsFallback !== fallbackActive) {
 			this.#displayDirty = false;
 			this.#updateDisplay();
 		}
@@ -143,16 +151,16 @@ export class BashExecutionComponent extends Container {
 	}
 
 	#updateDisplay(): void {
+		const fallbackActive = isTerminalGraphicsFallbackActive();
 		const availableLines = this.#outputLines;
-
-		// Apply preview truncation based on expanded state
-		const previewLogicalLines = availableLines.slice(-PREVIEW_LINES);
-		const hiddenLineCount = availableLines.length - previewLogicalLines.length;
 		const sixelLineMask =
-			TERMINAL.imageProtocol === ImageProtocol.Sixel && isSixelPassthroughEnabled()
+			fallbackActive || (TERMINAL.imageProtocol === ImageProtocol.Sixel && isSixelPassthroughEnabled())
 				? getSixelLineMask(availableLines)
 				: undefined;
 		const hasSixelOutput = sixelLineMask?.some(Boolean) ?? false;
+		const selectedLines =
+			this.#expanded || (hasSixelOutput && !fallbackActive) ? availableLines : availableLines.slice(-PREVIEW_LINES);
+		const hiddenLineCount = availableLines.length - selectedLines.length;
 
 		// Rebuild content container
 		// Detach (not dispose): #headerText and the running #loader are persistent,
@@ -165,15 +173,36 @@ export class BashExecutionComponent extends Container {
 		this.#contentContainer.addChild(this.#headerText);
 
 		// Output
-		if (availableLines.length > 0) {
-			if (this.#expanded || hasSixelOutput) {
-				const displayText = availableLines
-					.map((line, index) => (sixelLineMask?.[index] ? line : theme.fg("muted", line)))
+		if (selectedLines.length > 0) {
+			if (fallbackActive && hasSixelOutput) {
+				const displayLines: string[] = [];
+				const selectedStart = availableLines.length - selectedLines.length;
+				for (const [selectedIndex, line] of selectedLines.entries()) {
+					const index = selectedStart + selectedIndex;
+					if (sixelLineMask?.[index]) {
+						// Emit one placeholder per visible SIXEL block: at a true sequence
+						// start, at the top of a collapsed slice that begins mid-sequence,
+						// or when the line itself opens a new sequence.
+						const isBlockStart = selectedIndex === 0 || !sixelLineMask[index - 1] || containsSixelSequence(line);
+						if (isBlockStart) {
+							displayLines.push(theme.fg("muted", "[SIXEL image hidden while IRC sidebar is visible]"));
+						}
+					} else {
+						displayLines.push(theme.fg("muted", line));
+					}
+				}
+				this.#contentContainer.addChild(new Text(`\n${displayLines.join("\n")}`, 1, 0));
+			} else if (this.#expanded || hasSixelOutput) {
+				const displayText = selectedLines
+					.map((line, selectedIndex) => {
+						const index = availableLines.length - selectedLines.length + selectedIndex;
+						return sixelLineMask?.[index] ? line : theme.fg("muted", line);
+					})
 					.join("\n");
 				this.#contentContainer.addChild(new Text(`\n${displayText}`, 1, 0));
 			} else {
 				// Use shared visual truncation utility, recomputed per render width
-				const styledOutput = previewLogicalLines.map(line => theme.fg("muted", line)).join("\n");
+				const styledOutput = selectedLines.map(line => theme.fg("muted", line)).join("\n");
 				this.#contentContainer.addChild(createCollapsedPreview(`\n${styledOutput}`, PREVIEW_LINES));
 			}
 		}
@@ -187,10 +216,11 @@ export class BashExecutionComponent extends Container {
 				exitCode: this.#exitCode,
 				truncation: this.#truncation,
 				hiddenLineCount,
-				suppressHiddenCount: hasSixelOutput,
+				suppressHiddenCount: hasSixelOutput && !fallbackActive,
 			});
 			if (footer) this.#contentContainer.addChild(footer);
 		}
+		this.#displayBuiltWithGraphicsFallback = fallbackActive;
 	}
 
 	#clampDisplayLine(line: string): string {

package/src/modes/components/custom-editor.ts

@@ -123,6 +123,11 @@ export class CustomEditor extends Editor {
 		this.#actionKeys.set(action, [...keys]);
 	}
 
+	/** Returns whether a built-in editor action consumes this configured key before custom handlers. */
+	hasActionKey(key: KeyId): boolean {
+		return [...this.#actionKeys.values()].some(keys => keys.includes(key));
+	}
+
 	#matchesAction(data: string, action: ConfigurableEditorAction): boolean {
 		const keys = this.#actionKeys.get(action);
 		if (!keys) return false;

package/src/modes/components/footer.ts

@@ -139,8 +139,8 @@ export class FooterComponent implements Component {
 		// After compaction, tokens are unknown until the next LLM response.
 		const contextUsage = this.session.getContextUsage();
 		const contextWindow = contextUsage?.contextWindow ?? state.model?.contextWindow ?? 0;
-		const contextPercentValue = contextUsage?.percent ?? 0;
-		const contextPercent = contextUsage?.percent !== null ? contextPercentValue.toFixed(1) : "?";
+		const contextPercentValue = contextUsage?.percent;
+		const contextPercent = typeof contextPercentValue === "number" ? contextPercentValue.toFixed(1) : "?";
 
 		// Replace home directory with ~
 		let pwd = shortenPath(getProjectDir());
@@ -188,7 +188,7 @@ export class FooterComponent implements Component {
 			contextPercent === "?"
 				? `?/${formatNumber(contextWindow)}${autoIndicator}`
 				: `${contextPercent}%/${formatNumber(contextWindow)}${autoIndicator}`;
-		if (contextUsage?.percent !== null && contextUsage?.percent !== undefined) {
+		if (typeof contextPercentValue === "number") {
 			const color = getContextUsageThemeColor(getContextUsageLevel(contextPercentValue, contextWindow));
 			contextPercentStr =
 				color === "statusLineContext" ? contextPercentDisplay : theme.fg(color, contextPercentDisplay);

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

@@ -70,6 +70,11 @@ export interface HookSelectorOptions {
 	 * completion behavior as the main prompt editor.
 	 */
 	autocompleteProvider?: AutocompleteProvider;
+	/**
+	 * Maps raw single-key accelerators to option labels. Unset maps preserve
+	 * the legacy selector key handling exactly.
+	 */
+	acceleratorMap?: Readonly<Record<string, string>>;
 }
 
 class OutlinedList extends Container {
@@ -352,6 +357,7 @@ export class HookSelectorComponent extends Container {
 	#baseHelpText: string;
 	#tui: TUI | undefined;
 	#autocompleteProvider: AutocompleteProvider | undefined;
+	#acceleratorMap: Readonly<Record<string, string>> | undefined;
 	constructor(
 		title: string,
 		options: string[],
@@ -376,6 +382,7 @@ export class HookSelectorComponent extends Container {
 		this.#clarificationInput = opts?.clarificationInput;
 		this.#tui = opts?.tui;
 		this.#autocompleteProvider = opts?.autocompleteProvider;
+		this.#acceleratorMap = opts?.acceleratorMap;
 
 		this.addChild(new DynamicBorder());
 		this.addChild(new Spacer(1));
@@ -503,6 +510,11 @@ export class HookSelectorComponent extends Container {
 			this.#handleInputModeKey(keyData, this.#inlineEditor);
 			return;
 		}
+		const acceleratedOption = this.#acceleratorMap?.[keyData.toLowerCase()];
+		if (acceleratedOption && this.#options.includes(acceleratedOption)) {
+			this.#onSelectCallback(acceleratedOption);
+			return;
+		}
 		if (matchesKey(keyData, "up") || keyData === "k") {
 			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
 			this.#updateList();

package/src/modes/components/irc-sidebar.ts

@@ -0,0 +1,206 @@
+import {
+	type Component,
+	padding,
+	renderComponentWithViewportAnchors,
+	TERMINAL,
+	truncateToWidth,
+	type ViewportAnchorProvider,
+	type ViewportAnchorRender,
+	visibleWidth,
+	withTerminalGraphicsFallback,
+	wrapTextWithAnsi,
+} from "@sayknow-cli/tui";
+import type { IrcObservationLedger, IrcObservationRecord } from "../irc-observation-ledger";
+import { formatIrcMessageBlock, projectIrcText } from "../utils/irc-message";
+
+export const IRC_SIDEBAR_WIDTH_RATIO = 0.3;
+const IRC_SIDEBAR_MIN_WIDTH = 30;
+const IRC_SEPARATOR_WIDTH = 3;
+export const IRC_SIDEBAR_MAX_RENDER_ROWS = 2_048;
+const IRC_SIDEBAR_MAX_RENDER_SOURCE_UTF8_BYTES = 64 * 1_024;
+const IRC_SIDEBAR_OLDER_MESSAGES_ELISION = "… older IRC messages elided …";
+const IRC_SIDEBAR_MESSAGE_ELISION = "  … message elided …";
+
+/** Computes transcript/sidebar widths while preserving at least half the terminal for the transcript. */
+export function computeIrcSplitWidths(width: number): {
+	leftWidth: number;
+	separatorWidth: number;
+	rightWidth: number;
+} {
+	const normalizedWidth = Math.max(0, Math.floor(width));
+	const transcriptFloor = Math.floor(normalizedWidth * 0.5);
+	const preferredSidebar = Math.max(IRC_SIDEBAR_MIN_WIDTH, Math.floor(normalizedWidth * IRC_SIDEBAR_WIDTH_RATIO));
+	const sidebarWidth = Math.max(
+		0,
+		Math.min(preferredSidebar, normalizedWidth - IRC_SEPARATOR_WIDTH - transcriptFloor),
+	);
+
+	// The sidebar yields entirely rather than rendering below its readable minimum.
+	if (sidebarWidth < IRC_SIDEBAR_MIN_WIDTH) {
+		return { leftWidth: normalizedWidth, separatorWidth: 0, rightWidth: 0 };
+	}
+
+	return {
+		leftWidth: normalizedWidth - IRC_SEPARATOR_WIDTH - sidebarWidth,
+		separatorWidth: IRC_SEPARATOR_WIDTH,
+		rightWidth: sidebarWidth,
+	};
+}
+
+function styleSender(componentTheme: IrcSidebarTheme, sender: string): string {
+	return componentTheme.fg("accent", componentTheme.bold(sender));
+}
+
+function renderSidebarRecord(
+	record: IrcObservationRecord,
+	width: number,
+	componentTheme: IrcSidebarTheme,
+	maxRows: number,
+	maxSourceUtf8Bytes: number,
+): { lines: string[]; sourceUtf8Bytes: number; truncated: boolean } {
+	const bodyWidth = Math.max(1, width - 2);
+	const sourceLimit = Math.min(maxSourceUtf8Bytes, Math.max(0, maxRows - 1) * bodyWidth);
+	const clipped = projectIrcText(record.text, sourceLimit);
+	const block = formatIrcMessageBlock({ ...record, text: clipped.text });
+	const sender = styleSender(componentTheme, block.sender);
+	const time = componentTheme.fg("dim", block.time);
+	const lines = [truncateToWidth(`${sender} → ${block.recipient} · ${time}`, width)];
+	let truncated = clipped.truncated;
+
+	body: for (const bodyLine of block.bodyLines) {
+		for (const wrappedLine of wrapTextWithAnsi(bodyLine, bodyWidth)) {
+			if (lines.length >= maxRows) {
+				truncated = true;
+				break body;
+			}
+			lines.push(truncateToWidth(`  ${wrappedLine}`, width));
+		}
+	}
+	if (truncated && maxRows > 1) {
+		const marker = componentTheme.fg("dim", IRC_SIDEBAR_MESSAGE_ELISION);
+		if (lines.length >= maxRows) lines[maxRows - 1] = truncateToWidth(marker, width);
+		else lines.push(truncateToWidth(marker, width));
+	}
+	return { lines, sourceUtf8Bytes: clipped.utf8Bytes, truncated };
+}
+
+function renderSidebarRecords(ledger: IrcObservationLedger, width: number, componentTheme: IrcSidebarTheme): string[] {
+	if (width <= 0) return [];
+
+	const records = ledger.getSidebarRecords();
+	const newestFirstBlocks: string[][] = [];
+	let renderedRows = 0;
+	let renderedSourceUtf8Bytes = 0;
+	let omittedOlderRecords = false;
+	for (let index = records.length - 1; index >= 0; index--) {
+		const separatorRows = newestFirstBlocks.length > 0 ? 1 : 0;
+		const availableRows = IRC_SIDEBAR_MAX_RENDER_ROWS - renderedRows - separatorRows - 2;
+		const availableSourceUtf8Bytes = IRC_SIDEBAR_MAX_RENDER_SOURCE_UTF8_BYTES - renderedSourceUtf8Bytes;
+		const minimumRecordRows = records[index].text.length > 0 ? 2 : 1;
+		if (availableRows < minimumRecordRows || (availableSourceUtf8Bytes <= 0 && records[index].text.length > 0)) {
+			omittedOlderRecords = true;
+			break;
+		}
+
+		const rendered = renderSidebarRecord(
+			records[index],
+			width,
+			componentTheme,
+			availableRows,
+			availableSourceUtf8Bytes,
+		);
+		newestFirstBlocks.push(rendered.lines);
+		renderedRows += separatorRows + rendered.lines.length;
+		renderedSourceUtf8Bytes += rendered.sourceUtf8Bytes;
+		if (rendered.truncated) {
+			omittedOlderRecords = index > 0;
+			break;
+		}
+	}
+
+	const lines: string[] = [];
+	if (omittedOlderRecords) {
+		lines.push(truncateToWidth(componentTheme.fg("dim", IRC_SIDEBAR_OLDER_MESSAGES_ELISION), width));
+	}
+	for (const block of newestFirstBlocks.reverse()) {
+		if (lines.length > 0) lines.push("");
+		lines.push(...block);
+	}
+	return lines.slice(0, IRC_SIDEBAR_MAX_RENDER_ROWS);
+}
+
+export interface IrcSidebarTheme {
+	fg(color: "dim" | "accent", text: string): string;
+	bold(text: string): string;
+	readonly boxSharp: { readonly vertical: string };
+}
+
+export type IrcSidebarThemeSource = IrcSidebarTheme | (() => IrcSidebarTheme);
+
+/** Read-only IRC history alongside the active transcript. */
+export class IrcSplitViewComponent implements ViewportAnchorProvider {
+	#visible = false;
+
+	constructor(
+		private readonly leftPane: Component,
+		private readonly ledger: IrcObservationLedger,
+		private readonly componentTheme: IrcSidebarThemeSource,
+	) {}
+
+	get visible(): boolean {
+		return this.#visible;
+	}
+
+	effectiveSidebarVisible(width = process.stdout.columns ?? 0): boolean {
+		return this.#visible && computeIrcSplitWidths(width).rightWidth > 0;
+	}
+
+	setVisible(visible: boolean): void {
+		if (this.#visible === visible) return;
+		this.#visible = visible;
+		this.invalidate();
+	}
+
+	render(width: number): string[] {
+		return this.renderWithViewportAnchors(width).lines;
+	}
+
+	renderWithViewportAnchors(width: number): ViewportAnchorRender {
+		if (!this.#visible) return renderComponentWithViewportAnchors(this.leftPane, width);
+
+		const componentTheme = typeof this.componentTheme === "function" ? this.componentTheme() : this.componentTheme;
+		const { leftWidth, separatorWidth, rightWidth } = computeIrcSplitWidths(width);
+		if (rightWidth === 0) return renderComponentWithViewportAnchors(this.leftPane, width);
+
+		const separatorText = componentTheme.fg("dim", ` ${componentTheme.boxSharp.vertical} `);
+		const separator = separatorWidth > 0 ? separatorText : "";
+		const leftRender = withTerminalGraphicsFallback(
+			() => renderComponentWithViewportAnchors(this.leftPane, leftWidth),
+			{ allowCursorNeutralImages: true },
+		);
+		const rightLines = renderSidebarRecords(this.ledger, rightWidth, componentTheme);
+		const lineCount = Math.max(leftRender.lines.length, rightLines.length);
+		const lines: string[] = [];
+		const anchors: ViewportAnchorRender["anchors"] = [];
+
+		const leftOffset = lineCount - leftRender.lines.length;
+		const rightOffset = lineCount - rightLines.length;
+		for (let index = 0; index < lineCount; index++) {
+			const leftIndex = index - leftOffset;
+			const leftRaw = leftRender.lines[leftIndex] ?? "";
+			const right = truncateToWidth(rightLines[index - rightOffset] ?? "", rightWidth);
+			if (TERMINAL.isImageLine(leftRaw)) {
+				lines.push(leftRaw + padding(leftWidth) + separator + right);
+			} else {
+				const left = truncateToWidth(leftRaw, leftWidth);
+				lines.push(left + padding(Math.max(0, leftWidth - visibleWidth(left))) + separator + right);
+			}
+			anchors.push(leftRender.anchors[leftIndex] ?? null);
+		}
+		return { lines, anchors };
+	}
+
+	invalidate(): void {
+		this.leftPane.invalidate?.();
+	}
+}

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

@@ -0,0 +1,55 @@
+import { Container, PET_SKIN_IDS, PET_SKINS, type SelectItem, SelectList } from "@sayknow-cli/tui";
+import { getSelectListTheme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+import type { PetMode } from "./sayknow-pet-widget";
+
+const PET_OPTIONS: { value: PetMode; label: string; description: string }[] = [
+	{ value: "off", label: "Off", description: "No pet" },
+	...PET_SKIN_IDS.map(id => ({
+		value: id,
+		label: PET_SKINS[id].label,
+		description: PET_SKINS[id].description,
+	})),
+];
+
+/**
+ * Theme-style picker for the sayknow pet skin (Off / RedSayknow / BlueSayknow). Preview
+ * fires as the selection moves; select commits, cancel restores.
+ */
+export class PetSelectorComponent extends Container {
+	#selectList: SelectList;
+
+	constructor(
+		current: PetMode,
+		onSelect: (mode: PetMode) => void,
+		onCancel: () => void,
+		onPreview: (mode: PetMode) => void,
+	) {
+		super();
+
+		const items: SelectItem[] = PET_OPTIONS.map(option => ({
+			value: option.value,
+			label: option.label,
+			description: option.value === current ? `${option.description} (current)` : option.description,
+		}));
+
+		this.addChild(new DynamicBorder());
+
+		this.#selectList = new SelectList(items, 10, getSelectListTheme());
+		const currentIndex = PET_OPTIONS.findIndex(option => option.value === current);
+		if (currentIndex !== -1) {
+			this.#selectList.setSelectedIndex(currentIndex);
+		}
+
+		this.#selectList.onSelect = item => onSelect(item.value as PetMode);
+		this.#selectList.onCancel = () => onCancel();
+		this.#selectList.onSelectionChange = item => onPreview(item.value as PetMode);
+
+		this.addChild(this.#selectList);
+		this.addChild(new DynamicBorder());
+	}
+
+	getSelectList(): SelectList {
+		return this.#selectList;
+	}
+}