@sayknow-cli/coding-agent 0.3.5 → 0.3.7

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

@@ -26,12 +26,14 @@ import { getPreset } from "./status-line/presets";
 import { renderSegment, type SegmentContext } from "./status-line/segments";
 import { getSeparator } from "./status-line/separators";
 import { calculateTokensPerSecond } from "./status-line/token-rate";
+import type { SeparatorDef } from "./status-line/types";
 
 export interface StatusLineSegmentOptions {
 	model?: { showThinkingLevel?: boolean };
 	path?: { abbreviate?: boolean; maxLength?: number; stripWorkPrefix?: boolean };
 	git?: { showBranch?: boolean; showStaged?: boolean; showUnstaged?: boolean; showUntracked?: boolean };
 	time?: { format?: "12h" | "24h"; showSeconds?: boolean };
+	usage?: { mode?: "used" | "remaining" };
 }
 
 export interface StatusLineSettings {
@@ -40,15 +42,34 @@ export interface StatusLineSettings {
 	rightSegments?: StatusLineSegmentId[];
 	separator?: StatusLineSeparatorStyle;
 	segmentOptions?: StatusLineSegmentOptions;
+	previewHighlightSegment?: StatusLineSegmentId;
 	showHookStatus?: boolean;
 	showSkillHud?: boolean;
 	sessionAccent?: boolean;
+	maxRows?: number;
 }
 
 export interface StatusLineComponentOptions {
 	version?: string;
 }
 
+interface CollectedStatusSegments {
+	ctx: SegmentContext;
+	separatorDef: SeparatorDef;
+	bgAnsi: string;
+	fgAnsi: string;
+	sepAnsi: string;
+	left: string[];
+	leftSegIds: StatusLineSegmentId[];
+	right: string[];
+	previewHighlightSegment: StatusLineSegmentId | undefined;
+	sessionAccent: boolean | undefined;
+	leftSepWidth: number;
+	rightSepWidth: number;
+	leftCapWidth: number;
+	rightCapWidth: number;
+}
+
 // ═══════════════════════════════════════════════════════════════════════════
 // Per-message token cache
 // ═══════════════════════════════════════════════════════════════════════════
@@ -181,11 +202,8 @@ export class StatusLineComponent implements Component {
 	#lastTokensPerSecond: number | null = null;
 	#lastTokensPerSecondTimestamp: number | null = null;
 
-	// Anthropic usage caching (5-min TTL, OAuth/sub only)
-	#cachedUsage: {
-		fiveHour?: { percent: number; resetMinutes?: number };
-		sevenDay?: { percent: number; resetHours?: number };
-	} | null = null;
+	// Provider usage caching (5-min TTL, OAuth/sub only)
+	#cachedUsage: SegmentContext["usage"] = null;
 	#usageFetchedAt = 0;
 	#usageInFlight = false;
 	// Context breakdown — incremental cache. Replaces the previous 2-second
@@ -216,12 +234,13 @@ export class StatusLineComponent implements Component {
 			showSkillHud: settings.get("statusLine.showSkillHud"),
 			segmentOptions: settings.getGroup("statusLine").segmentOptions,
 			sessionAccent: settings.get("statusLine.sessionAccent"),
+			maxRows: settings.get("statusLine.maxRows"),
 		};
 		this.#version = options.version?.trim() || undefined;
 	}
 
 	updateSettings(settings: StatusLineSettings): void {
-		this.#settings = { ...this.#settings, ...settings };
+		this.#settings = { ...this.#settings, previewHighlightSegment: undefined, ...settings };
 	}
 
 	setAutoCompactEnabled(enabled: boolean): void {
@@ -462,9 +481,9 @@ export class StatusLineComponent implements Component {
 	}
 
 	/**
-	 * Background-refresh the Anthropic OAuth quota report. Guarded by a 5-min
-	 * TTL on both success (cache lifetime) and error (backoff). Exposed
-	 * (non-private) so unit tests can verify the backoff invariant.
+	 * Background-refresh the OAuth quota report. Guarded by a 5-min TTL on both
+	 * success (cache lifetime) and error (backoff). Exposed (non-private) so
+	 * unit tests can verify the backoff invariant.
 	 */
 	refreshUsageInBackground(): void {
 		const now = Date.now();
@@ -478,6 +497,9 @@ export class StatusLineComponent implements Component {
 			.then(reports => {
 				this.#cachedUsage = this.#normalizeUsageReports(reports);
 				this.#usageFetchedAt = Date.now();
+				if (this.#onBranchChange) {
+					this.#onBranchChange();
+				}
 			})
 			.catch(() => {
 				// Backoff on error: stamp the fetch time so the 5-min TTL guard
@@ -491,47 +513,77 @@ export class StatusLineComponent implements Component {
 			});
 	}
 
-	#normalizeUsageReports(reports: unknown): {
-		fiveHour?: { percent: number; resetMinutes?: number };
-		sevenDay?: { percent: number; resetHours?: number };
-	} | null {
+	#normalizeUsageReports(reports: unknown): SegmentContext["usage"] {
 		if (!Array.isArray(reports)) return null;
-		let fiveHour: { percent: number; resetMinutes?: number } | undefined;
-		let sevenDay: { percent: number; resetHours?: number } | undefined;
+		const windows: NonNullable<SegmentContext["usage"]>["windows"] = [];
+		const seen = new Set<string>();
 		const now = Date.now();
+
+		const codexWindowLabel = (windowId: string | undefined, fallback: string): string => {
+			if (windowId && /^\d+[hd]$/.test(windowId)) return windowId;
+			return fallback;
+		};
+		const codexResetUnit = (label: string): "m" | "h" => (label.endsWith("d") ? "h" : "m");
+
+		const pushWindow = (
+			key: string,
+			label: string,
+			fraction: number,
+			resetsAt: number | undefined,
+			resetUnit: "m" | "h",
+		) => {
+			if (seen.has(key)) return;
+			seen.add(key);
+			windows.push({
+				label,
+				percent: fraction * 100,
+				resetValue:
+					typeof resetsAt === "number"
+						? Math.max(0, Math.round((resetsAt - now) / (resetUnit === "m" ? 60_000 : 3_600_000)))
+						: undefined,
+				resetUnit,
+			});
+		};
+
 		for (const report of reports) {
 			if (!report || typeof report !== "object") continue;
+			const provider = (report as { provider?: unknown }).provider;
+			const providerId = typeof provider === "string" ? provider : undefined;
 			const limits = (report as { limits?: unknown }).limits;
 			if (!Array.isArray(limits)) continue;
 			for (const limit of limits) {
 				if (!limit || typeof limit !== "object") continue;
 				const l = limit as {
-					scope?: { windowId?: string; tier?: string };
-					window?: { resetsAt?: number };
+					id?: unknown;
+					scope?: { windowId?: string; tier?: string; modelId?: string };
+					window?: { id?: string; resetsAt?: number };
 					amount?: { usedFraction?: number };
 				};
 				const fraction = l.amount?.usedFraction;
 				if (typeof fraction !== "number") continue;
-				const windowId = l.scope?.windowId;
+				const id = typeof l.id === "string" ? l.id : "";
+				const windowId = l.scope?.windowId ?? l.window?.id;
 				const tier = l.scope?.tier;
+				const modelId = l.scope?.modelId;
 				const resetsAt = l.window?.resetsAt;
-				if (windowId === "5h" && !tier && !fiveHour) {
-					fiveHour = {
-						percent: fraction * 100,
-						resetMinutes:
-							typeof resetsAt === "number" ? Math.max(0, Math.round((resetsAt - now) / 60_000)) : undefined,
-					};
-				} else if (windowId === "7d" && !tier && !sevenDay) {
-					sevenDay = {
-						percent: fraction * 100,
-						resetHours:
-							typeof resetsAt === "number" ? Math.max(0, Math.round((resetsAt - now) / 3_600_000)) : undefined,
-					};
+
+				if (providerId === "openai-codex") {
+					if (id === "openai-codex:primary" || (!id && !!windowId && windowId !== "7d" && !modelId)) {
+						const label = codexWindowLabel(windowId, "primary");
+						pushWindow("codex:primary", label, fraction, resetsAt, codexResetUnit(label));
+					} else if (id === "openai-codex:secondary" || (!id && windowId === "7d" && !modelId)) {
+						const label = codexWindowLabel(windowId, "secondary");
+						pushWindow("codex:secondary", label, fraction, resetsAt, codexResetUnit(label));
+					}
+				} else if (windowId === "5h" && !tier) {
+					pushWindow(`${providerId ?? "provider"}:5h`, "5h", fraction, resetsAt, "m");
+				} else if (windowId === "7d" && !tier) {
+					pushWindow(`${providerId ?? "provider"}:7d`, "7d", fraction, resetsAt, "h");
 				}
 			}
 		}
-		if (!fiveHour && !sevenDay) return null;
-		return { fiveHour, sevenDay };
+
+		return windows.length > 0 ? { windows } : null;
 	}
 
 	/**
@@ -670,7 +722,70 @@ export class StatusLineComponent implements Component {
 		};
 	}
 
-	#buildStatusLine(width: number): string {
+	#groupWidth(parts: string[], capWidth: number, sepWidth: number): number {
+		if (parts.length === 0) return 0;
+		const partsWidth = parts.reduce((sum, part) => sum + visibleWidth(part), 0);
+		const sepTotal = Math.max(0, parts.length - 1) * (sepWidth + 2);
+		return partsWidth + sepTotal + 2 + capWidth;
+	}
+
+	#renderStatusGroup(
+		parts: string[],
+		direction: "left" | "right",
+		separatorDef: SeparatorDef,
+		bgAnsi: string,
+		fgAnsi: string,
+		sepAnsi: string,
+	): string {
+		if (parts.length === 0) return "";
+		const sep = direction === "left" ? separatorDef.left : separatorDef.right;
+		const cap = separatorDef.endCaps
+			? direction === "left"
+				? separatorDef.endCaps.right
+				: separatorDef.endCaps.left
+			: "";
+		const capPrefix = separatorDef.endCaps?.useBgAsFg ? bgAnsi.replace("\x1b[48;", "\x1b[38;") : bgAnsi + sepAnsi;
+		const capText = cap ? `${capPrefix}${cap}\x1b[0m` : "";
+
+		let content = bgAnsi + fgAnsi;
+		content += ` ${parts.join(` ${sepAnsi}${sep}${fgAnsi} `)} `;
+		content += "\x1b[0m";
+
+		if (capText) {
+			return direction === "right" ? capText + content : content + capText;
+		}
+		return content;
+	}
+
+	#shrinkPathToWidth(content: string, ctx: SegmentContext, shrinkBy: number): string | null {
+		const currentPathVW = visibleWidth(content);
+		const minPathVW = 8; // icon + ellipsis + a few chars
+		const shrinkable = currentPathVW - minPathVW;
+		if (shrinkable <= 0 || shrinkBy <= 0) return null;
+		const targetShrink = Math.min(shrinkable, shrinkBy);
+		const currentMaxLen = ctx.options.path?.maxLength ?? 40;
+		let newMaxLen = Math.max(4, Math.min(currentMaxLen, currentPathVW) - targetShrink);
+		const pathCtx = (maxLen: number): SegmentContext => ({
+			...ctx,
+			options: { ...ctx.options, path: { ...ctx.options.path, maxLength: maxLen } },
+		});
+		let reRendered = renderSegment("path", pathCtx(newMaxLen));
+		if (!reRendered.visible || !reRendered.content) return null;
+		// maxLength governs path text, not icon prefix; iterate to compensate.
+		for (let i = 0; i < 8; i++) {
+			const saved = currentPathVW - visibleWidth(reRendered.content);
+			if (saved >= targetShrink) break;
+			const nextMaxLen = Math.max(4, newMaxLen - (targetShrink - saved));
+			if (nextMaxLen >= newMaxLen) break; // no progress or hit floor
+			newMaxLen = nextMaxLen;
+			const adjusted = renderSegment("path", pathCtx(newMaxLen));
+			if (!adjusted.visible || !adjusted.content) break;
+			reRendered = adjusted;
+		}
+		return reRendered.content;
+	}
+
+	#collectStatusSegments(width: number): CollectedStatusSegments {
 		const ctx = this.#buildSegmentContext(width);
 		const effectiveSettings = this.#resolveSettings();
 		const separatorDef = getSeparator(effectiveSettings.separator ?? "powerline-thin", theme);
@@ -683,22 +798,25 @@ export class StatusLineComponent implements Component {
 		const fgAnsi = theme.getFgAnsi("text");
 		const sepAnsi = theme.getFgAnsi("statusLineSep");
 
-		// Collect visible segment contents
-		const leftParts: string[] = [];
+		const previewHighlightSegment = effectiveSettings.previewHighlightSegment;
+		const highlightSegment = (segId: StatusLineSegmentId, content: string): string =>
+			previewHighlightSegment === segId ? `\x1b[7m${content}\x1b[27m` : content;
+
+		const left: string[] = [];
 		const leftSegIds: StatusLineSegmentId[] = [];
 		for (const segId of effectiveSettings.leftSegments) {
 			const rendered = renderSegment(segId, ctx);
 			if (rendered.visible && rendered.content) {
-				leftParts.push(rendered.content);
+				left.push(highlightSegment(segId, rendered.content));
 				leftSegIds.push(segId);
 			}
 		}
 
-		const rightParts: string[] = [];
+		const right: string[] = [];
 		for (const segId of effectiveSettings.rightSegments) {
 			const rendered = renderSegment(segId, ctx);
 			if (rendered.visible && rendered.content) {
-				rightParts.push(rendered.content);
+				right.push(highlightSegment(segId, rendered.content));
 			}
 		}
 
@@ -707,116 +825,152 @@ export class StatusLineComponent implements Component {
 		if (runningBackgroundJobs > 0) {
 			const icon = theme.icon.agents ? `${theme.icon.agents} ` : "";
 			const label = `${formatCount("job", runningBackgroundJobs)} running`;
-			rightParts.push(theme.fg("statusLineSubagents", `${icon}${label}`));
+			right.push(theme.fg("statusLineSubagents", `${icon}${label}`));
 		}
 		if (this.#version) {
-			rightParts.push(theme.fg("dim", `v${this.#version}`));
+			right.push(theme.fg("dim", `v${this.#version}`));
 		}
-		const topFillWidth = Math.max(0, width);
-		const left = [...leftParts];
-		const right = [...rightParts];
-
-		const leftSepWidth = visibleWidth(separatorDef.left);
-		const rightSepWidth = visibleWidth(separatorDef.right);
-		const leftCapWidth = separatorDef.endCaps ? visibleWidth(separatorDef.endCaps.right) : 0;
-		const rightCapWidth = separatorDef.endCaps ? visibleWidth(separatorDef.endCaps.left) : 0;
-
-		const groupWidth = (parts: string[], capWidth: number, sepWidth: number): number => {
-			if (parts.length === 0) return 0;
-			const partsWidth = parts.reduce((sum, part) => sum + visibleWidth(part), 0);
-			const sepTotal = Math.max(0, parts.length - 1) * (sepWidth + 2);
-			return partsWidth + sepTotal + 2 + capWidth;
+
+		return {
+			ctx,
+			separatorDef,
+			bgAnsi,
+			fgAnsi,
+			sepAnsi,
+			left,
+			leftSegIds,
+			right,
+			previewHighlightSegment,
+			sessionAccent: effectiveSettings.sessionAccent,
+			leftSepWidth: visibleWidth(separatorDef.left),
+			rightSepWidth: visibleWidth(separatorDef.right),
+			leftCapWidth: separatorDef.endCaps ? visibleWidth(separatorDef.endCaps.right) : 0,
+			rightCapWidth: separatorDef.endCaps ? visibleWidth(separatorDef.endCaps.left) : 0,
 		};
+	}
+
+	#resolveMaxRows(): number {
+		const raw = this.#settings.maxRows ?? 1;
+		if (!Number.isFinite(raw)) return 1;
+		return Math.max(1, Math.min(3, Math.trunc(raw)));
+	}
+
+	#buildStatusLine(width: number, precollected?: CollectedStatusSegments): string {
+		const seg = precollected ?? this.#collectStatusSegments(width);
+		const { ctx, separatorDef, bgAnsi, fgAnsi, sepAnsi, previewHighlightSegment } = seg;
+		const { leftSepWidth, rightSepWidth, leftCapWidth, rightCapWidth } = seg;
+		const left = [...seg.left];
+		const leftIds = [...seg.leftSegIds];
+		const right = [...seg.right];
+		const topFillWidth = Math.max(0, width);
 
-		let leftWidth = groupWidth(left, leftCapWidth, leftSepWidth);
-		let rightWidth = groupWidth(right, rightCapWidth, rightSepWidth);
+		let leftWidth = this.#groupWidth(left, leftCapWidth, leftSepWidth);
+		let rightWidth = this.#groupWidth(right, rightCapWidth, rightSepWidth);
 		const totalWidth = () => leftWidth + rightWidth + (left.length > 0 && right.length > 0 ? 1 : 0);
 
 		if (topFillWidth > 0) {
 			while (totalWidth() > topFillWidth && right.length > 0) {
 				right.pop();
-				rightWidth = groupWidth(right, rightCapWidth, rightSepWidth);
+				rightWidth = this.#groupWidth(right, rightCapWidth, rightSepWidth);
 			}
 			// Shrink path before dropping left segments — path is the only elastic segment
-			const pathIdx = leftSegIds.indexOf("path");
+			const pathIdx = leftIds.indexOf("path");
 			if (pathIdx >= 0 && totalWidth() > topFillWidth) {
 				const overflow = totalWidth() - topFillWidth;
-				const currentPathVW = visibleWidth(left[pathIdx]);
-				const minPathVW = 8; // icon + ellipsis + a few chars
-				const shrinkable = currentPathVW - minPathVW;
-				if (shrinkable > 0) {
-					const shrinkBy = Math.min(shrinkable, overflow);
-					const currentMaxLen = ctx.options.path?.maxLength ?? 40;
-					let newMaxLen = Math.max(4, Math.min(currentMaxLen, currentPathVW) - shrinkBy);
-					const pathCtx = (maxLen: number): SegmentContext => ({
-						...ctx,
-						options: { ...ctx.options, path: { ...ctx.options.path, maxLength: maxLen } },
-					});
-					let reRendered = renderSegment("path", pathCtx(newMaxLen));
-					if (reRendered.visible && reRendered.content) {
-						// maxLength governs path text, not icon prefix; iterate to compensate
-						for (let i = 0; i < 8; i++) {
-							const saved = currentPathVW - visibleWidth(reRendered.content);
-							if (saved >= shrinkBy) break;
-							const nextMaxLen = Math.max(4, newMaxLen - (shrinkBy - saved));
-							if (nextMaxLen >= newMaxLen) break; // no progress or hit floor
-							newMaxLen = nextMaxLen;
-							const adjusted = renderSegment("path", pathCtx(newMaxLen));
-							if (!adjusted.visible || !adjusted.content) break;
-							reRendered = adjusted;
-						}
-						left[pathIdx] = reRendered.content;
-						leftWidth = groupWidth(left, leftCapWidth, leftSepWidth);
-					}
+				const shrunk = this.#shrinkPathToWidth(left[pathIdx], ctx, overflow);
+				if (shrunk !== null) {
+					left[pathIdx] = previewHighlightSegment === "path" ? `\x1b[7m${shrunk}\x1b[27m` : shrunk;
+					leftWidth = this.#groupWidth(left, leftCapWidth, leftSepWidth);
 				}
 			}
 			while (totalWidth() > topFillWidth && left.length > 0) {
 				left.pop();
-				leftSegIds.pop();
-				leftWidth = groupWidth(left, leftCapWidth, leftSepWidth);
+				leftIds.pop();
+				leftWidth = this.#groupWidth(left, leftCapWidth, leftSepWidth);
 			}
 		}
 
-		const renderGroup = (parts: string[], direction: "left" | "right"): string => {
-			if (parts.length === 0) return "";
-			const sep = direction === "left" ? separatorDef.left : separatorDef.right;
-			const cap = separatorDef.endCaps
-				? direction === "left"
-					? separatorDef.endCaps.right
-					: separatorDef.endCaps.left
-				: "";
-			const capPrefix = separatorDef.endCaps?.useBgAsFg ? bgAnsi.replace("\x1b[48;", "\x1b[38;") : bgAnsi + sepAnsi;
-			const capText = cap ? `${capPrefix}${cap}\x1b[0m` : "";
-
-			let content = bgAnsi + fgAnsi;
-			content += ` ${parts.join(` ${sepAnsi}${sep}${fgAnsi} `)} `;
-			content += "\x1b[0m";
-
-			if (capText) {
-				return direction === "right" ? capText + content : content + capText;
-			}
-			return content;
-		};
-
-		const leftGroup = renderGroup(left, "left");
-		const rightGroup = renderGroup(right, "right");
+		const leftGroup = this.#renderStatusGroup(left, "left", separatorDef, bgAnsi, fgAnsi, sepAnsi);
+		const rightGroup = this.#renderStatusGroup(right, "right", separatorDef, bgAnsi, fgAnsi, sepAnsi);
 		if (!leftGroup && !rightGroup) return "";
 
 		if (topFillWidth === 0 || left.length === 0 || right.length === 0) {
 			return leftGroup + (leftGroup && rightGroup ? " " : "") + rightGroup;
 		}
 
-		leftWidth = groupWidth(left, leftCapWidth, leftSepWidth);
-		rightWidth = groupWidth(right, rightCapWidth, rightSepWidth);
+		leftWidth = this.#groupWidth(left, leftCapWidth, leftSepWidth);
+		rightWidth = this.#groupWidth(right, rightCapWidth, rightSepWidth);
 		const gapWidth = Math.max(1, topFillWidth - leftWidth - rightWidth);
-		const sessionName =
-			effectiveSettings.sessionAccent !== false ? this.session.sessionManager?.getSessionName() : undefined;
+		const sessionName = seg.sessionAccent !== false ? this.session.sessionManager?.getSessionName() : undefined;
 		const accentHex = sessionName ? getSessionAccentHex(sessionName) : undefined;
 		const gapColor = getSessionAccentAnsi(accentHex) ?? theme.getFgAnsi("border");
 		const gapFill = `${gapColor}${theme.boxRound.horizontal.repeat(gapWidth)}\x1b[39m`;
 		return leftGroup + gapFill + rightGroup;
 	}
 
+	/**
+	 * Multi-row status line. When `maxRows > 1` and the single-line layout would
+	 * overflow, segments wrap onto additional left-justified rows instead of
+	 * being dropped. Falls back to the polished justified single row whenever
+	 * everything fits on one line.
+	 */
+	#buildStatusRows(width: number, maxRows: number): string[] {
+		const seg = this.#collectStatusSegments(width);
+		if (seg.left.length === 0 && seg.right.length === 0) return [];
+
+		const topFillWidth = Math.max(1, width);
+		const leftWidth = this.#groupWidth(seg.left, seg.leftCapWidth, seg.leftSepWidth);
+		const rightWidth = this.#groupWidth(seg.right, seg.rightCapWidth, seg.rightSepWidth);
+		const gap = seg.left.length > 0 && seg.right.length > 0 ? 1 : 0;
+		const fitsSingleRow = leftWidth + rightWidth + gap <= topFillWidth;
+
+		if (maxRows <= 1 || fitsSingleRow) {
+			const single = this.#buildStatusLine(width, seg);
+			return single ? [single] : [];
+		}
+
+		// Ordered sequence: left segments first (in order), then right segments.
+		const items: { content: string; isPath: boolean }[] = [
+			...seg.left.map((content, i) => ({ content, isPath: seg.leftSegIds[i] === "path" })),
+			...seg.right.map(content => ({ content, isPath: false })),
+		];
+
+		// Pre-shrink an over-wide path so it never blows out a row on its own.
+		for (const item of items) {
+			if (!item.isPath) continue;
+			const alone = this.#groupWidth([item.content], seg.leftCapWidth, seg.leftSepWidth);
+			if (alone > topFillWidth) {
+				const shrunk = this.#shrinkPathToWidth(item.content, seg.ctx, alone - topFillWidth);
+				if (shrunk !== null) item.content = shrunk;
+			}
+		}
+
+		// Greedy pack into up to `maxRows` left-justified rows.
+		const rows: string[][] = [];
+		let current: string[] = [];
+		for (const item of items) {
+			if (current.length === 0) {
+				current.push(item.content);
+				continue;
+			}
+			const tentative = [...current, item.content];
+			if (this.#groupWidth(tentative, seg.leftCapWidth, seg.leftSepWidth) <= topFillWidth) {
+				current = tentative;
+			} else {
+				rows.push(current);
+				current = [item.content];
+				if (rows.length >= maxRows) break;
+			}
+		}
+		if (rows.length < maxRows && current.length > 0) {
+			rows.push(current);
+		}
+
+		return rows.map(row =>
+			this.#renderStatusGroup(row, "left", seg.separatorDef, seg.bgAnsi, seg.fgAnsi, seg.sepAnsi),
+		);
+	}
+
 	getTopBorder(width: number): { content: string; width: number } {
 		const content = this.#buildStatusLine(width);
 		return {
@@ -825,6 +979,16 @@ export class StatusLineComponent implements Component {
 		};
 	}
 
+	/**
+	 * Multi-row-aware content for the settings preview: the wrapped rows joined
+	 * with newlines so a single `Text` renders them stacked. Honors the current
+	 * `maxRows`; identical to the single status line when `maxRows` is 1 or when
+	 * everything fits on one row.
+	 */
+	getPreviewContent(width: number): string {
+		return this.#buildStatusRows(width, this.#resolveMaxRows()).join("\n");
+	}
+
 	render(width: number): string[] {
 		const lines: string[] = [];
 		this.#refreshSkillHudInBackground();
@@ -833,9 +997,9 @@ export class StatusLineComponent implements Component {
 			lines.push(skillHud);
 		}
 
-		const statusLine = this.#buildStatusLine(width);
-		if (statusLine) {
-			lines.push(truncateToWidth(statusLine, width));
+		const statusRows = this.#buildStatusRows(width, this.#resolveMaxRows());
+		for (const statusRow of statusRows) {
+			if (statusRow) lines.push(truncateToWidth(statusRow, width));
 		}
 
 		const showHooks = this.#settings.showHookStatus ?? true;

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

@@ -135,6 +135,14 @@ class TreeList implements Component {
 		return this.#filteredNodes.length - 1;
 	}
 
+	#clampSelectedIndex(): void {
+		if (this.#filteredNodes.length === 0) {
+			this.#selectedIndex = 0;
+			return;
+		}
+		this.#selectedIndex = Math.max(0, Math.min(this.#selectedIndex, this.#filteredNodes.length - 1));
+	}
+
 	#flattenTree(roots: SessionTreeNode[]): FlatNode[] {
 		const result: FlatNode[] = [];
 		this.#toolCallMap.clear();
@@ -333,12 +341,11 @@ class TreeList implements Component {
 			return true;
 		});
 
-		// Try to preserve cursor on the same node, or find nearest visible ancestor
+		// Try to preserve cursor on the same node, or keep the index in range.
 		if (this.#lastSelectedId) {
 			this.#selectedIndex = this.#findNearestVisibleIndex(this.#lastSelectedId);
-		} else if (this.#selectedIndex >= this.#filteredNodes.length) {
-			// Clamp index if out of bounds
-			this.#selectedIndex = Math.max(0, this.#filteredNodes.length - 1);
+		} else {
+			this.#clampSelectedIndex();
 		}
 
 		// Update lastSelectedId to the actual selection (may have changed due to parent walk)
@@ -710,16 +717,29 @@ class TreeList implements Component {
 	}
 
 	handleInput(keyData: string): void {
+		const moveSelection = (delta: number, wrap: boolean): void => {
+			if (this.#filteredNodes.length === 0) return;
+			if (wrap) {
+				const next = this.#selectedIndex + delta;
+				this.#selectedIndex =
+					next < 0 ? this.#filteredNodes.length - 1 : next >= this.#filteredNodes.length ? 0 : next;
+			} else {
+				this.#selectedIndex += delta;
+				this.#clampSelectedIndex();
+			}
+			this.#lastSelectedId = this.#filteredNodes[this.#selectedIndex]?.node.entry.id ?? this.#lastSelectedId;
+		};
+
 		if (matchesKey(keyData, "up")) {
-			this.#selectedIndex = this.#selectedIndex === 0 ? this.#filteredNodes.length - 1 : this.#selectedIndex - 1;
+			moveSelection(-1, true);
 		} else if (matchesKey(keyData, "down")) {
-			this.#selectedIndex = this.#selectedIndex === this.#filteredNodes.length - 1 ? 0 : this.#selectedIndex + 1;
+			moveSelection(1, true);
 		} else if (matchesKey(keyData, "left")) {
 			// Page up
-			this.#selectedIndex = Math.max(0, this.#selectedIndex - this.maxVisibleLines);
+			moveSelection(-this.maxVisibleLines, false);
 		} else if (matchesKey(keyData, "right")) {
 			// Page down
-			this.#selectedIndex = Math.min(this.#filteredNodes.length - 1, this.#selectedIndex + this.maxVisibleLines);
+			moveSelection(this.maxVisibleLines, false);
 		} else if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			const selected = this.#filteredNodes[this.#selectedIndex];
 			if (selected && this.onSelect) {

package/src/modes/components/two-column-body.ts

@@ -0,0 +1,36 @@
+import { type Component, padding, truncateToWidth, visibleWidth } from "@sayknow-cli/tui";
+import { theme } from "../theme/theme";
+
+export class TwoColumnBody implements Component {
+	constructor(
+		private readonly leftPane: Component,
+		private readonly rightPane: Component,
+		private readonly maxHeight: number,
+	) {}
+
+	render(width: number): string[] {
+		const leftWidth = Math.floor(width * 0.5);
+		const separatorText = theme.fg("dim", ` ${theme.boxSharp.vertical} `);
+		const separatorWidth = width - leftWidth > 3 ? visibleWidth(separatorText) : 0;
+		const separator = separatorWidth > 0 ? separatorText : "";
+		const rightWidth = Math.max(0, width - leftWidth - separatorWidth);
+		const leftLines = this.leftPane.render(leftWidth);
+		const rightLines = this.rightPane.render(rightWidth);
+		const lineCount = Math.min(this.maxHeight, Math.max(leftLines.length, rightLines.length));
+		const out: string[] = [];
+
+		for (let i = 0; i < lineCount; i++) {
+			const left = truncateToWidth(leftLines[i] ?? "", leftWidth);
+			const leftPadded = left + padding(Math.max(0, leftWidth - visibleWidth(left)));
+			const right = truncateToWidth(rightLines[i] ?? "", rightWidth);
+			out.push(leftPadded + separator + right);
+		}
+
+		return out;
+	}
+
+	invalidate(): void {
+		this.leftPane.invalidate?.();
+		this.rightPane.invalidate?.();
+	}
+}