@sayknow-cli/coding-agent 0.3.11 → 0.3.13

package/src/modes/acp/acp-client-bridge.ts

@@ -22,18 +22,38 @@ import type {
 	ClientBridgeTerminalHandle,
 } from "../../session/client-bridge";
 
+type AcpPermissionMode = "auto" | "prompt" | "always-allow";
+
+const ACP_PERMISSION_MODE_ENV = "SKC_ACP_PERMISSION_MODE";
+
+function parseAcpPermissionMode(value: unknown): AcpPermissionMode {
+	if (value === "auto" || value === "prompt" || value === "always-allow") return value;
+	return "prompt";
+}
+
+/** Client metadata is authoritative; the process environment is only a fallback when that field is absent. */
+function resolveAcpPermissionMode(clientCapabilities: ClientCapabilities | undefined): AcpPermissionMode {
+	const meta = clientCapabilities?._meta;
+	if (typeof meta === "object" && meta !== null) {
+		const skc = (meta as { skc?: unknown }).skc;
+		if (typeof skc === "object" && skc !== null && "permissionHandling" in skc) {
+			return parseAcpPermissionMode((skc as { permissionHandling?: unknown }).permissionHandling);
+		}
+	}
+	return parseAcpPermissionMode(process.env[ACP_PERMISSION_MODE_ENV]);
+}
+
 export function createAcpClientBridge(
 	connection: AgentSideConnection,
 	sessionId: string,
 	clientCapabilities: ClientCapabilities | undefined,
 ): ClientBridge {
+	const promptPermission = resolveAcpPermissionMode(clientCapabilities) === "prompt";
 	const capabilities: ClientBridgeCapabilities = {
 		readTextFile: clientCapabilities?.fs?.readTextFile === true,
 		writeTextFile: clientCapabilities?.fs?.writeTextFile === true,
 		terminal: clientCapabilities?.terminal === true,
-		// Permission requests are always usable on the connection; gating is
-		// the agent's policy choice rather than a client capability.
-		requestPermission: true,
+		requestPermission: promptPermission,
 	};
 
 	const bridge: ClientBridge = { capabilities, deferAgentInitiatedTurns: true };
@@ -65,8 +85,10 @@ export function createAcpClientBridge(
 			createTerminalHandle(connection, sessionId, params);
 	}
 
-	bridge.requestPermission = (toolCall, options, signal) =>
-		requestPermission(connection, sessionId, toolCall, options, signal);
+	if (promptPermission) {
+		bridge.requestPermission = (toolCall, options, signal) =>
+			requestPermission(connection, sessionId, toolCall, options, signal);
+	}
 
 	return bridge;
 }

package/src/modes/acp/acp-event-mapper.ts

@@ -27,6 +27,8 @@ interface AcpEventMapperOptions {
 	 * before emitting `ToolCallLocation` entries.
 	 */
 	cwd?: string;
+	/** Phase to expose after compaction ends. Prompt-bound compaction resumes responding; idle maintenance returns idle. */
+	compactionEndPhase?: "responding" | "idle";
 }
 
 interface ContentArrayContainer {
@@ -236,8 +238,44 @@ export function mapAgentSessionEventToAcpSessionUpdates(
 		case "turn_start":
 		case "turn_end":
 		case "message_start":
+			return [];
 		case "auto_compaction_start":
-		case "auto_compaction_end":
+			return [
+				toSessionNotification(sessionId, {
+					sessionUpdate: "session_info_update",
+					_meta: {
+						skcPhase: "compacting",
+						skcCompactionState: "start",
+						skcCompactionTrigger: event.reason,
+						skcCompactionAction: event.action,
+						running: true,
+						skcRunning: true,
+					},
+				}),
+			];
+		case "auto_compaction_end": {
+			const phase = options.compactionEndPhase ?? "responding";
+			const running = phase !== "idle";
+			const meta: Record<string, unknown> = {
+				skcPhase: phase,
+				skcCompactionState: "end",
+				skcCompactionAction: event.action,
+				skcCompactionAborted: event.aborted,
+				skcCompactionWillRetry: event.willRetry,
+				running,
+				skcRunning: running,
+			};
+			if (event.skipped !== undefined) {
+				meta.skcCompactionSkipped = event.skipped;
+			}
+			if (event.errorMessage !== undefined) {
+				meta.skcCompactionErrorMessage = event.errorMessage;
+			}
+			if (event.continuationSkipReason !== undefined) {
+				meta.skcCompactionContinuationSkipReason = event.continuationSkipReason;
+			}
+			return [toSessionNotification(sessionId, { sessionUpdate: "session_info_update", _meta: meta })];
+		}
 		case "auto_retry_start":
 		case "auto_retry_end":
 		case "retry_fallback_applied":

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) {
@@ -269,7 +289,7 @@ export class AssistantMessageComponent extends Container {
 								displayImage.data,
 								displayImage.mimeType,
 								{ fallbackColor: (text: string) => theme.fg("toolOutput", text) },
-								resolveImageOptions(),
+								{ ...resolveImageOptions(), refetch: () => displayImage.data },
 							),
 					),
 				});
@@ -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/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));
@@ -435,6 +442,10 @@ export class HookSelectorComponent extends Container {
 		this.#updateList();
 	}
 
+	hasActiveInlineInput(): boolean {
+		return this.#inlineEditor !== undefined;
+	}
+
 	#updateList(): void {
 		if (this.#wrapFocused && this.#focusAwareList) {
 			this.#focusAwareList.setState(this.#options, this.#selectedIndex, this.#maxVisible);
@@ -499,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?.();
+	}
+}