@selesai/code 0.13.13 → 0.13.15

package/dist/extensions/pi-zentui/test/settings-command.test.ts

@@ -0,0 +1,1663 @@
+import type { Theme } from "@earendil-works/pi-coding-agent";
+import { visibleWidth } from "@earendil-works/pi-tui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+	defaultConfig,
+	type EditorComponentConfig,
+	type ExtensionStatusPlacement,
+	type FooterComponentConfig,
+	type PolishedTuiConfig,
+	type SelectorBordersComponentConfig,
+	type ThinkingStepsComponentConfig,
+	type ThinkingStepsMode,
+	type UserMessagesComponentConfig,
+	type WorkingLineComponentPatch,
+} from "../extensions/zentui/config";
+import { SessionLifecycle } from "../extensions/zentui/session-lifecycle";
+import { registerZentuiSettingsCommand } from "../extensions/zentui/settings-command";
+
+type Component = { render(width: number): string[]; handleInput(data: string): void };
+type Command = {
+	handler(args: string, ctx: unknown): Promise<void>;
+	getArgumentCompletions(prefix: string): Array<{ value: string }> | null;
+};
+const sectionNames = [
+	"Appearance",
+	"Editor",
+	"User messages",
+	"Thinking",
+	"Working line",
+	"Footer",
+	"Segments",
+	"Git",
+	"Extensions",
+] as const;
+type SectionName = (typeof sectionNames)[number];
+
+function theme(): Theme {
+	return {
+		fg: (_color: string, text: string) => text,
+		bold: (text: string) => `[${text}]`,
+		italic: (text: string) => text,
+		underline: (text: string) => text,
+		strikethrough: (text: string) => text,
+		getThinkingBorderColor: () => (text: string) => text,
+	} as unknown as Theme;
+}
+function cloneConfig(): PolishedTuiConfig {
+	const config = structuredClone(defaultConfig);
+	config.icons.mode = "nerd";
+	config.components.editor.enabled = true;
+	config.components.editor.borderColorMode = "static";
+	config.components.editor.modelLabel = "id";
+	config.components.editor.viewportIndicators = true;
+	config.components.editor.styles.opencode.completionMenu = "palette";
+	config.components.editor.styles["opencode-copy-friendly"].completionMenu = "palette";
+	config.components.editor.styles.minimalist.contextGauge = false;
+	config.components.userMessages.style = "framed";
+	config.components.workingLine.enabled = false;
+	config.components.footer.style = "starship";
+	config.components.footer.modelLabel = "id";
+	config.components.footer.styles.starship.compactMaxLines = 2;
+	config.components.footer.styles.starship.separator = "pipe";
+	config.components.footer.styles.starship.pathDisplay.depth = 0;
+	config.components.footer.styles.starship.segments.gitMetrics = false;
+	return config;
+}
+function goToSection(component: Component, section: SectionName): void {
+	for (let index = 0; index < sectionNames.indexOf(section); index += 1)
+		component.handleInput("\t");
+}
+function selectLabel(component: Component, label: string): void {
+	for (let index = 0; index < 40; index += 1) {
+		if (component.render(160).some((line) => line.includes(`> ${label}`))) return;
+		component.handleInput("\x1b[B");
+	}
+	throw new Error(`Could not select ${label}`);
+}
+function row(component: Component, label: string): string {
+	selectLabel(component, label);
+	return component.render(160).find((line) => line.includes(`> ${label}`)) ?? "";
+}
+function focusedRow(component: Component): string {
+	return component.render(200).find((line) => line.includes("> ")) ?? "";
+}
+function previewRow(rows: string[], text: string): number {
+	const index = rows.findIndex((line) => line.includes(text));
+	if (index < 0) throw new Error(`Could not find preview row containing ${text}`);
+	return index;
+}
+function expectStackedPreview(rows: string[], previewText: string): void {
+	const previewIndex = previewRow(rows, previewText);
+	const settingsIndex = rows.findIndex(
+		(line, index) => index > previewIndex && line.includes("> "),
+	);
+	if (settingsIndex < 0) throw new Error("Could not find settings below preview");
+	expect(rows[3]).toBe("");
+	expect(rows[4]).not.toBe("");
+	expect(rows[settingsIndex - 1]).toBe("");
+	expect(rows[settingsIndex - 2]).not.toBe("");
+}
+function leadingEmptyRowCount(rows: string[]): number {
+	let count = 0;
+	for (const row of rows.slice(3)) {
+		if (row !== "") break;
+		count += 1;
+	}
+	return count;
+}
+function expectFocusOrder(component: Component, labels: readonly string[]): void {
+	const first = focusedRow(component);
+	for (const [index, label] of labels.entries()) {
+		expect(focusedRow(component)).toContain(`> ${label}`);
+		if (index < labels.length - 1) component.handleInput("\x1b[B");
+	}
+	component.handleInput("\x1b[B");
+	expect(focusedRow(component)).toBe(first);
+}
+
+function createHarness(
+	config = cloneConfig(),
+	overrides: Record<string, unknown> = {},
+	uiOverrides: Record<string, unknown> = {},
+) {
+	let command: Command | undefined;
+	let component: Component | undefined;
+	const notifications: string[] = [];
+	const notificationEvents: Array<{ message: string; severity: string }> = [];
+	let doneCalls = 0;
+	const sessionLifecycle = new SessionLifecycle();
+	const calls = {
+		editor: [] as Partial<EditorComponentConfig>[],
+		polished: [] as Array<Record<string, unknown>>,
+		polishedCopyFriendly: [] as Array<Record<string, unknown>>,
+		accentRail: [] as Array<Record<string, unknown>>,
+		messages: [] as Partial<UserMessagesComponentConfig>[],
+		thinkingSteps: [] as Partial<ThinkingStepsComponentConfig>[],
+		workingLine: [] as WorkingLineComponentPatch[],
+		renders: { shared: 0, local: 0 },
+		selectors: [] as Partial<SelectorBordersComponentConfig>[],
+		footer: [] as Partial<FooterComponentConfig>[],
+		minimalist: [] as Array<Record<string, unknown>>,
+		pathDisplay: [] as Array<Record<string, unknown>>,
+		segments: [] as Array<Record<string, boolean>>,
+		gitCommit: [] as Array<Record<string, boolean>>,
+		gitMetrics: [] as Array<Record<string, boolean>>,
+		extensionDefaultPlacement: [] as ExtensionStatusPlacement[],
+		recipe: [] as boolean[],
+	};
+	const deps = {
+		sessionLifecycle,
+		getConfig: () => config,
+		setEditorComponent(patch: Partial<EditorComponentConfig>) {
+			calls.editor.push(patch);
+			Object.assign(config.components.editor, patch);
+			return { applied: true };
+		},
+		setPolished(patch: Record<string, unknown>) {
+			calls.polished.push(patch);
+			Object.assign(config.components.editor.styles.opencode, patch);
+		},
+		setPolishedCopyFriendly(patch: Record<string, unknown>) {
+			calls.polishedCopyFriendly.push(patch);
+			Object.assign(config.components.editor.styles["opencode-copy-friendly"], patch);
+		},
+		setAccentRail(patch: Record<string, unknown>) {
+			calls.accentRail.push(patch);
+			Object.assign(config.components.editor.styles["accent-rail"], patch);
+		},
+		setMinimalist(patch: Record<string, unknown>) {
+			calls.minimalist.push(patch);
+			Object.assign(config.components.editor.styles.minimalist, patch);
+		},
+		setUserMessagesComponent(patch: Partial<UserMessagesComponentConfig>) {
+			calls.messages.push(patch);
+			Object.assign(config.components.userMessages, patch);
+		},
+		thinkingStepsCapability: { available: true },
+		setThinkingStepsComponent(patch: Partial<ThinkingStepsComponentConfig>) {
+			calls.thinkingSteps.push(patch);
+			Object.assign(config.components.thinkingSteps, patch);
+			return { applied: true };
+		},
+		setWorkingLineComponent(patch: WorkingLineComponentPatch) {
+			calls.workingLine.push(patch);
+			const { messages, segments, ...componentPatch } = patch;
+			Object.assign(config.components.workingLine, componentPatch);
+			if (messages) Object.assign(config.components.workingLine.messages, messages);
+			if (segments) Object.assign(config.components.workingLine.segments, segments);
+			return { applied: true };
+		},
+		setSelectorBordersComponent(patch: Partial<SelectorBordersComponentConfig>) {
+			calls.selectors.push(patch);
+			Object.assign(config.components.selectorBorders, patch);
+		},
+		setFooterComponent(patch: Partial<FooterComponentConfig>) {
+			calls.footer.push(patch);
+			Object.assign(config.components.footer, patch);
+		},
+		setFooterSegments(patch: Record<string, boolean>) {
+			calls.segments.push(patch);
+			Object.assign(config.components.footer.styles.starship.segments, patch);
+		},
+		setFooterFormat() {},
+		setResponsiveFooter() {},
+		setIconMode() {},
+		setContextStyle() {},
+		setSeparator() {},
+		setPathDisplay(patch: Record<string, unknown>) {
+			calls.pathDisplay.push(patch);
+			Object.assign(config.components.footer.styles.starship.pathDisplay, patch);
+		},
+		setGitBranch() {},
+		setGitCommit(patch: Record<string, boolean>) {
+			calls.gitCommit.push(patch);
+			Object.assign(config.components.footer.styles.starship.gitCommit, patch);
+		},
+		setGitMetrics(patch: Record<string, boolean>) {
+			calls.gitMetrics.push(patch);
+			Object.assign(config.components.footer.styles.starship.gitMetrics, patch);
+		},
+		getActiveExtensionStatuses: () => new Map(),
+		setExtensionStatusDefaultPlacement(placement: ExtensionStatusPlacement) {
+			calls.extensionDefaultPlacement.push(placement);
+			config.components.footer.styles.starship.extensionStatuses.defaultPlacement = placement;
+		},
+		setExtensionStatusPlacement() {},
+		setExtensionStatusColorMode() {},
+		requestRender() {
+			calls.renders.shared += 1;
+		},
+		settingsListTheme: {
+			label: (text: string) => text,
+			value: (text: string) => text,
+			description: (text: string) => text,
+			cursor: "> ",
+			hint: (text: string) => text,
+		},
+		...overrides,
+	};
+	registerZentuiSettingsCommand(
+		{
+			registerCommand(_name: string, value: unknown) {
+				command = value as Command;
+			},
+		} as never,
+		deps as never,
+	);
+	const ctx = {
+		hasUI: true,
+		mode: "tui",
+		cwd: process.cwd(),
+		ui: {
+			theme: theme(),
+			notify(message: string, severity = "info") {
+				notifications.push(message);
+				notificationEvents.push({ message, severity });
+			},
+			async custom(factory: (...args: unknown[]) => unknown) {
+				component = factory(
+					{
+						requestRender() {
+							calls.renders.local += 1;
+						},
+					},
+					theme(),
+					{},
+					() => {
+						doneCalls += 1;
+					},
+				) as Component;
+			},
+			async editor() {
+				return undefined;
+			},
+			...uiOverrides,
+		},
+	};
+	return {
+		config,
+		command: () => {
+			if (!command) throw new Error("Command was not registered");
+			return command;
+		},
+		component: () => {
+			if (!component) throw new Error("Settings component was not opened");
+			return component;
+		},
+		ctx,
+		calls,
+		notifications,
+		notificationEvents,
+		sessionLifecycle,
+		doneCalls: () => doneCalls,
+	};
+}
+
+afterEach(() => {
+	vi.useRealTimers();
+});
+
+describe("component-oriented /zentui settings", () => {
+	it("uses the exact nine-section order in wide and narrow navigation", async () => {
+		const harness = createHarness();
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		const wide = component.render(200).join("\n");
+		let previous = -1;
+		for (const name of sectionNames) {
+			const index = wide.indexOf(name);
+			expect(index).toBeGreaterThan(previous);
+			previous = index;
+		}
+		for (const [index, name] of sectionNames.entries()) {
+			const lines = component.render(40);
+			expect(lines[1]).toContain(name);
+			expect(lines[1]).toContain(`(${index + 1}/9)`);
+			expect(lines.every((line) => visibleWidth(line) <= 40)).toBe(true);
+			component.handleInput("\t");
+		}
+	});
+
+	it("describes elapsed and tokens unequivocally as whole-interaction totals", async () => {
+		const harness = createHarness();
+		await harness.command().handler("working-line", harness.ctx);
+		const component = harness.component();
+		selectLabel(component, "Elapsed");
+		expect(component.render(100).join("\n")).toContain("Show whole-interaction elapsed time.");
+		selectLabel(component, "Tokens");
+		const tokenRows = component.render(100).join("\n");
+		expect(tokenRows).toContain("Show whole-interaction tokens as ↑input");
+		expect(tokenRows).toContain("until final usage");
+		expect(tokenRows).toContain("reconciles.");
+	});
+
+	it("uses exact component-owned row sets and ordering", async () => {
+		const harness = createHarness();
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		expectFocusOrder(component, [
+			"Selector borders",
+			"Selector border style",
+			"Selector border colors",
+			"Icon mode",
+		]);
+
+		goToSection(component, "Editor");
+		expectFocusOrder(component, [
+			"Editor",
+			"Editor style",
+			"Editor colors",
+			"Editor model label",
+			"Editor border color",
+			"Editor viewport indicators",
+			"Completion menu",
+		]);
+
+		component.handleInput("\t");
+		expectFocusOrder(component, ["User messages", "Message style", "Message colors"]);
+		component.handleInput("\t");
+		expectFocusOrder(component, ["Enabled", "Mode"]);
+		component.handleInput("\t");
+		expectFocusOrder(component, [
+			"Enabled",
+			"Turn summary",
+			"Spinner",
+			"Spinner speed",
+			"Animate spinner color",
+			"Text animation",
+			"Text motion speed",
+			"Color source",
+			"Custom messages",
+			"Tool",
+			"Elapsed",
+			"Thinking time",
+			"Tokens",
+			"Message list",
+		]);
+		component.handleInput("\t");
+		expectFocusOrder(component, [
+			"Footer style",
+			"Footer colors",
+			"Footer model label",
+			"Responsive footer",
+			"Compact footer rows",
+			"Context style",
+			"Separator",
+			"Path display",
+			"Path depth",
+		]);
+		component.handleInput("\t");
+		expectFocusOrder(component, [
+			"Current directory",
+			"Session name",
+			"Runtime",
+			"Model info",
+			"Context usage",
+			"Token counts",
+			"Session cost",
+			"Session duration",
+			"Username@host",
+			"Current time",
+			"OS icon",
+			"Package version",
+		]);
+		component.handleInput("\t");
+		expectFocusOrder(component, [
+			"Git branch",
+			"Branch length",
+			"Git status",
+			"Git counts",
+			"Git commit",
+			"Commit only on detached HEAD",
+			"Show exact-match tag",
+			"Git line metrics",
+			"Hide zero metrics",
+			"Ignore submodules",
+		]);
+		component.handleInput("\t");
+		expectFocusOrder(component, ["Default placement", "No active statuses"]);
+	});
+
+	it.each(["native", "hidden"] as const)(
+		"shows only Footer style for %s while retaining Starship preconfiguration sections",
+		async (style) => {
+			const config = cloneConfig();
+			config.components.footer.style = style;
+			const harness = createHarness(config);
+			await harness.command().handler("", harness.ctx);
+			const component = harness.component();
+			goToSection(component, "Footer");
+			expectFocusOrder(component, ["Footer style"]);
+			component.handleInput("\t");
+			expectFocusOrder(component, [
+				"Current directory",
+				"Session name",
+				"Runtime",
+				"Model info",
+				"Context usage",
+				"Token counts",
+				"Session cost",
+				"Session duration",
+				"Username@host",
+				"Current time",
+				"OS icon",
+				"Package version",
+			]);
+			component.handleInput("\t");
+			expect(row(component, "Git branch")).toContain("enabled");
+			component.handleInput("\t");
+			expect(row(component, "Default placement")).toContain("right");
+		},
+	);
+
+	it("keeps Footer-style focus through Native, Starship, and Hidden rebuilds", async () => {
+		const config = cloneConfig();
+		config.components.footer.style = "native";
+		const harness = createHarness(config);
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Footer");
+		for (const expected of ["Starship", "Hidden", "Native"]) {
+			component.handleInput(" ");
+			expect(focusedRow(component)).toContain("> Footer style");
+			expect(focusedRow(component)).toContain(expected);
+		}
+		expect(harness.calls.footer).toEqual([
+			{ style: "starship" },
+			{ style: "hidden" },
+			{ style: "native" },
+		]);
+	});
+
+	it("restores Footer-style focus and effective rows after persistence failure", async () => {
+		const config = cloneConfig();
+		config.components.footer.style = "native";
+		const harness = createHarness(config, {
+			setFooterComponent() {
+				throw new Error("read-only footer");
+			},
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Footer");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Footer style");
+		expect(focusedRow(component)).toContain("Native");
+		expectFocusOrder(component, ["Footer style"]);
+		expect(harness.notifications).toEqual(["Could not update Zentui settings: read-only footer"]);
+	});
+
+	it("shows exact minimalist rows while components are disabled", async () => {
+		const config = cloneConfig();
+		config.components.editor.enabled = false;
+		config.components.editor.style = "minimalist";
+		config.components.userMessages.enabled = false;
+		const harness = createHarness(config);
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Editor");
+		expectFocusOrder(component, [
+			"Editor",
+			"Editor style",
+			"Editor colors",
+			"Editor model label",
+			"Editor border color",
+			"Editor viewport indicators",
+			"Path",
+			"Context text",
+			"Context gauge",
+			"Session name",
+			"Timer",
+			"Cost",
+			"Git",
+		]);
+		component.handleInput("\t");
+		expectFocusOrder(component, ["User messages", "Message style", "Message colors"]);
+	});
+
+	it("routes every minimalist, Git option, and default-placement action", async () => {
+		const config = cloneConfig();
+		config.components.editor.style = "minimalist";
+		const harness = createHarness(config);
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Editor");
+
+		for (const [label, value] of [
+			["Path", "project"],
+			["Context text", "percent-total"],
+			["Context gauge", "enabled"],
+			["Session name", "disabled"],
+			["Timer", "disabled"],
+			["Cost", "disabled"],
+			["Git", "disabled"],
+		] as const) {
+			selectLabel(component, label);
+			component.handleInput(" ");
+			expect(focusedRow(component)).toContain(`> ${label}`);
+			expect(focusedRow(component)).toContain(value);
+		}
+		expect(harness.calls.minimalist).toEqual([
+			{ pathDisplay: "project" },
+			{ contextFormat: "percent-total" },
+			{ contextGauge: true },
+			{ showSessionName: false },
+			{ showTimer: false },
+			{ showCost: false },
+			{ showGit: false },
+		]);
+
+		for (let index = 0; index < 6; index += 1) component.handleInput("\t");
+		for (const [label, value] of [
+			["Commit only on detached HEAD", "disabled"],
+			["Show exact-match tag", "disabled"],
+			["Hide zero metrics", "disabled"],
+			["Ignore submodules", "enabled"],
+		] as const) {
+			selectLabel(component, label);
+			component.handleInput(" ");
+			expect(focusedRow(component)).toContain(`> ${label}`);
+			expect(focusedRow(component)).toContain(value);
+		}
+		expect(harness.calls.gitCommit).toEqual([{ onlyDetached: false }, { showTag: false }]);
+		expect(harness.calls.gitMetrics).toEqual([{ onlyNonzero: false }, { ignoreSubmodules: true }]);
+
+		component.handleInput("\t");
+		selectLabel(component, "Default placement");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Default placement");
+		expect(focusedRow(component)).toContain("off");
+		expect(harness.calls.extensionDefaultPlacement).toEqual(["off"]);
+		expect(config.components.footer.styles.starship.extensionStatuses.defaultPlacement).toBe("off");
+	});
+
+	it("restores editor-style focus by ID after dynamic rebuild", async () => {
+		const harness = createHarness();
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Editor");
+		selectLabel(component, "Editor style");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Editor style");
+		expect(focusedRow(component)).toContain("Opencode (copy-friendly)");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Editor style");
+		expect(focusedRow(component)).toContain("Accent Rail");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Editor style");
+		expect(focusedRow(component)).toContain("Minimalist");
+		expect(harness.calls.editor).toEqual([
+			{ style: "opencode-copy-friendly" },
+			{ style: "accent-rail" },
+			{ style: "minimalist" },
+		]);
+	});
+
+	it("configures Opencode completion menus independently", async () => {
+		const current = cloneConfig();
+		const harness = createHarness(current);
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Editor");
+		selectLabel(component, "Completion menu");
+		expect(focusedRow(component)).toContain("palette");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("native");
+		expect(harness.calls.polished).toEqual([{ completionMenu: "native" }]);
+		expect(harness.calls.polishedCopyFriendly).toEqual([]);
+
+		selectLabel(component, "Editor style");
+		component.handleInput(" ");
+		selectLabel(component, "Completion menu");
+		expect(focusedRow(component)).toContain("palette");
+		component.handleInput(" ");
+		expect(harness.calls.polishedCopyFriendly).toEqual([{ completionMenu: "native" }]);
+		expect(current.components.editor.styles.opencode.completionMenu).toBe("native");
+		expect(current.components.editor.styles["opencode-copy-friendly"].completionMenu).toBe(
+			"native",
+		);
+
+		selectLabel(component, "Editor style");
+		component.handleInput(" ");
+		expect(component.render(100).join("\n")).not.toContain("Completion menu");
+	});
+
+	it("shows and persists the Accent Rail surface control only for that style", async () => {
+		const current = cloneConfig();
+		current.components.editor.style = "accent-rail";
+		const harness = createHarness(current);
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Editor");
+		selectLabel(component, "Accent Rail surface");
+		expect(focusedRow(component)).toContain("filled");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("transparent");
+		expect(harness.calls.accentRail).toEqual([{ transparent: true }]);
+		expect(harness.calls.editor).toEqual([]);
+		expect(current.components.editor.styles.minimalist).toEqual({
+			...defaultConfig.components.editor.styles.minimalist,
+			contextGauge: false,
+		});
+
+		selectLabel(component, "Editor style");
+		component.handleInput(" ");
+		expect(component.render(80).join("\n")).not.toContain("Accent Rail surface");
+	});
+
+	it("shows friendly message style labels and restores focus after rebuild", async () => {
+		const harness = createHarness();
+		await harness.command().handler("messages", harness.ctx);
+		const component = harness.component();
+		selectLabel(component, "Message style");
+		expect(focusedRow(component)).toContain("Framed");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Message style");
+		expect(focusedRow(component)).toContain("Framed (copy-friendly)");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Message style");
+		expect(focusedRow(component)).toContain("Compact");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Message style");
+		expect(focusedRow(component)).toContain("Labeled");
+		expect(harness.calls.messages).toEqual([
+			{ style: "framed-copy-friendly" },
+			{ style: "compact" },
+			{ style: "labeled" },
+		]);
+	});
+
+	it("offers and routes repository Footer paths with clarified depth semantics", async () => {
+		const harness = createHarness();
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Footer");
+		selectLabel(component, "Path display");
+		expect(focusedRow(component)).toContain("basename");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("repository");
+		expect(component.render(160).join("\n")).toContain("repository-relative");
+		selectLabel(component, "Path depth");
+		const depthRows = component.render(160).join("\n");
+		expect(depthRows).toContain("Final component count for Full and Repository");
+		expect(depthRows).toContain("0 = unlimited");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("1");
+		expect(harness.calls.pathDisplay).toEqual([{ mode: "repository" }, { depth: 1 }]);
+	});
+
+	it("routes color and model rows to separate component dependencies", async () => {
+		const harness = createHarness();
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		expect(component.render(160)[0]).not.toContain("\x1b[90m");
+		selectLabel(component, "Selector border colors");
+		component.handleInput(" ");
+		expect(component.render(160)[0]).toContain("\x1b[90m");
+		expect(harness.config.components.editor.colorSource).toBe("theme");
+		goToSection(component, "Editor");
+		selectLabel(component, "Editor colors");
+		component.handleInput(" ");
+		selectLabel(component, "Editor model label");
+		component.handleInput(" ");
+		component.handleInput("\t");
+		selectLabel(component, "Message colors");
+		component.handleInput(" ");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		selectLabel(component, "Footer colors");
+		component.handleInput(" ");
+		selectLabel(component, "Footer model label");
+		component.handleInput(" ");
+		expect(harness.calls.selectors).toEqual([{ colorSource: "terminal" }]);
+		expect(harness.calls.editor).toEqual([{ colorSource: "terminal" }, { modelLabel: "name" }]);
+		expect(harness.calls.messages).toEqual([{ colorSource: "terminal" }]);
+		expect(harness.calls.footer).toEqual([{ colorSource: "terminal" }, { modelLabel: "name" }]);
+	});
+
+	it("rebuilds failed persistence with effective values and attempted-row focus", async () => {
+		const config = cloneConfig();
+		const harness = createHarness(config, {
+			setEditorComponent() {
+				throw new Error("read-only");
+			},
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Editor");
+		selectLabel(component, "Editor model label");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Editor model label");
+		expect(focusedRow(component)).toContain("id");
+		expect(focusedRow(component)).not.toContain("name");
+		expect(harness.notifications).toEqual(["Could not update Zentui settings: read-only"]);
+	});
+
+	it("parses component direct operations and rejects removed copy commands", async () => {
+		const harness = createHarness();
+		for (const command of ["editor disable", "messages disable"]) {
+			await harness.command().handler(command, harness.ctx);
+		}
+		for (const command of [
+			"editor-copy-friendly enable",
+			"message-copy-friendly disable",
+			"copy-friendly enable",
+		]) {
+			await harness.command().handler(command, harness.ctx);
+		}
+		expect(harness.calls.editor).toEqual([{ enabled: false }]);
+		expect(harness.calls.messages).toEqual([{ enabled: false }]);
+		expect(harness.notifications.filter((message) => message.startsWith("Usage:"))).toHaveLength(3);
+		const values =
+			harness
+				.command()
+				.getArgumentCompletions("")
+				?.map((item) => item.value) ?? [];
+		expect(values).toContain("messages toggle");
+		expect(values.some((value) => value.includes("copy-friendly"))).toBe(false);
+		expect(values.join("\n")).not.toMatch(/fixed[-_ ]editor/i);
+	});
+
+	it.each([
+		"fixed-editor enable",
+		"fixed_editor disable",
+		"fixed editor toggle",
+		"layout",
+	] as const)("treats removed route %s as ordinary usage without mutation", async (args) => {
+		const harness = createHarness();
+		const before = structuredClone(harness.config);
+		await harness.command().handler(args, harness.ctx);
+		expect(harness.config).toEqual(before);
+		expect(harness.calls.editor).toEqual([]);
+		expect(harness.notifications).toHaveLength(1);
+		expect(harness.notifications[0]).toMatch(/^Usage:/);
+		expect(harness.notifications[0]).not.toMatch(/fixed[-_ ]editor/i);
+	});
+
+	it("persists and reopens editor-border and model/segment controls", async () => {
+		const harness = createHarness();
+		await harness.command().handler("", harness.ctx);
+		let component = harness.component();
+		goToSection(component, "Editor");
+		selectLabel(component, "Editor border color");
+		component.handleInput(" ");
+		selectLabel(component, "Editor model label");
+		component.handleInput(" ");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		selectLabel(component, "Ignore submodules");
+		component.handleInput(" ");
+		component.handleInput("\x1b[Z");
+		selectLabel(component, "Model info");
+		component.handleInput(" ");
+		component.handleInput("\x1b");
+		expect(harness.doneCalls()).toBe(1);
+
+		await harness.command().handler("", harness.ctx);
+		component = harness.component();
+		goToSection(component, "Editor");
+		expect(row(component, "Editor border color")).toContain("adaptive");
+		expect(row(component, "Editor model label")).toContain("name");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		expect(row(component, "Ignore submodules")).toContain("enabled");
+		component.handleInput("\x1b[Z");
+		expect(row(component, "Model info")).toContain("enabled");
+		expect(harness.calls.editor).toEqual([{ borderColorMode: "adaptive" }, { modelLabel: "name" }]);
+		expect(harness.calls.gitMetrics).toEqual([{ ignoreSubmodules: true }]);
+		expect(harness.calls.segments).toEqual([{ modelInfo: true }]);
+		component.handleInput("\x1b");
+		expect(harness.doneCalls()).toBe(2);
+	});
+
+	it("rolls back editor-border and model-info rows when persistence fails", async () => {
+		const config = cloneConfig();
+		const harness = createHarness(config, {
+			setEditorComponent() {
+				throw new Error("read-only editor");
+			},
+			setFooterSegments() {
+				throw new Error("read-only segments");
+			},
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Editor");
+		selectLabel(component, "Editor border color");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Editor border color");
+		expect(focusedRow(component)).toContain("static");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		component.handleInput("\t");
+		selectLabel(component, "Model info");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("> Model info");
+		expect(focusedRow(component)).toContain("disabled");
+		expect(config.components.editor.borderColorMode).toBe("static");
+		expect(config.components.footer.styles.starship.segments.modelInfo).toBe(false);
+		expect(harness.notifications).toEqual([
+			"Could not update Zentui settings: read-only editor",
+			"Could not update Zentui settings: read-only segments",
+		]);
+	});
+
+	it("shows Thinking (Experimental) with only Enabled and Mode focus rows", async () => {
+		const harness = createHarness();
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		expect(component.render(120).join("\n")).toContain("Thinking (Experimental)");
+		expectFocusOrder(component, ["Enabled", "Mode"]);
+		expect(component.render(120).join("\n")).toContain(
+			"Live switching supports Streaming → Rail/Tree and Rail ↔ Tree. Entering Streaming,",
+		);
+	});
+
+	it("shows saved and active mode mismatch honestly", async () => {
+		const config = cloneConfig();
+		config.components.thinkingSteps.enabled = true;
+		config.components.thinkingSteps.mode = "streaming";
+		const harness = createHarness(config, {
+			thinkingStepsCapability: {
+				state: {
+					available: true,
+					rendererAvailable: true,
+					streamingAvailable: false,
+					active: true,
+					activeMode: "tree",
+					startup: { enabled: true, mode: "tree" },
+					displaced: false,
+					restartRequired: true,
+					reason: "Streaming listener unavailable; restart required",
+				},
+			},
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		const output = component.render(160).join("\n");
+		expect(output).toContain(
+			"Saved: Streaming · Active: Tree · Streaming unavailable · restart required · Streaming listener unavailable",
+		);
+		expect(output.match(/restart required/gi)).toHaveLength(2);
+		// One status appears in the preview and one in the focused setting description;
+		// neither duplicates reason text that already contained the phrase.
+	});
+
+	it("keeps private-renderer unavailability non-focusable and fails open to native", async () => {
+		const harness = createHarness(cloneConfig(), {
+			thinkingStepsCapability: { available: false },
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		const output = component.render(120).join("\n");
+		expect(output).toContain("Saved: Disabled · Active: Native · Renderer unavailable");
+		expectFocusOrder(component, ["Enabled", "Mode"]);
+	});
+
+	it("routes Thinking-step enablement and mode independently", async () => {
+		const harness = createHarness();
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		expectFocusOrder(component, ["Enabled", "Mode"]);
+		selectLabel(component, "Enabled");
+		component.handleInput(" ");
+		selectLabel(component, "Mode");
+		component.handleInput(" ");
+		expect(harness.calls.thinkingSteps).toEqual([{ enabled: true }, { mode: "rail" }]);
+		expect(harness.config.components.thinkingSteps).toEqual({
+			enabled: true,
+			mode: "rail",
+		});
+		expect(harness.notifications).toContain("Thinking (Experimental): Rail");
+	});
+
+	it("cycles the real mode setting through Streaming to Tree", async () => {
+		const config = cloneConfig();
+		config.components.thinkingSteps = { enabled: true, mode: "streaming" };
+		const harness = createHarness(config);
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		selectLabel(component, "Mode");
+		component.handleInput(" ");
+		expect(harness.calls.thinkingSteps).toEqual([{ mode: "tree" }]);
+		expect(harness.config.components.thinkingSteps.mode).toBe("tree");
+	});
+
+	it("rebuilds Thinking settings in focus with honest live-success status and preview", async () => {
+		const config = cloneConfig();
+		config.components.thinkingSteps = { enabled: true, mode: "streaming" };
+		const state = {
+			available: true,
+			active: true,
+			activeMode: "streaming" as ThinkingStepsMode,
+			startup: { enabled: true, mode: "streaming" as ThinkingStepsMode },
+			displaced: false,
+			restartRequired: false,
+		};
+		const harness = createHarness(config, {
+			thinkingStepsCapability: { state },
+			setThinkingStepsComponent(patch: Partial<ThinkingStepsComponentConfig>) {
+				Object.assign(config.components.thinkingSteps, patch);
+				if (patch.mode) state.activeMode = patch.mode;
+				return { applied: true };
+			},
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		selectLabel(component, "Mode");
+		component.handleInput(" ");
+		const output = component.render(160).join("\n");
+		expect(focusedRow(component)).toContain("> Mode");
+		expect(output).toContain("Saved: Tree · Active: Tree");
+		expect(harness.notificationEvents.at(-1)).toEqual({
+			message: "Thinking (Experimental): Tree",
+			severity: "info",
+		});
+	});
+
+	it("rebuilds Thinking settings in focus with saved/active failure status and preview", async () => {
+		const config = cloneConfig();
+		config.components.thinkingSteps = { enabled: true, mode: "rail" };
+		const state = {
+			available: true,
+			rendererAvailable: true,
+			streamingAvailable: true,
+			active: true,
+			activeMode: "rail" as ThinkingStepsMode,
+			startup: { enabled: true, mode: "tree" as ThinkingStepsMode },
+			displaced: false,
+			restartRequired: false,
+			reason: undefined as string | undefined,
+		};
+		const harness = createHarness(config, {
+			thinkingStepsCapability: { state },
+			setThinkingStepsComponent(patch: Partial<ThinkingStepsComponentConfig>) {
+				Object.assign(config.components.thinkingSteps, patch);
+				state.restartRequired = true;
+				return {
+					applied: false,
+					reason: "Saved: Streaming · Active: Rail · restart required",
+				};
+			},
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		selectLabel(component, "Mode");
+		component.handleInput(" ");
+		const output = component.render(180).join("\n");
+		expect(focusedRow(component)).toContain("> Mode");
+		const expectedStatus = "Saved: Streaming · Active: Rail · restart required";
+		expect(output).toContain(expectedStatus);
+		expect(output).toContain("Thinking 7.1s");
+		expect(harness.notificationEvents.at(-1)).toEqual({
+			message: `Thinking (Experimental): Streaming (${expectedStatus})`,
+			severity: "warning",
+		});
+	});
+
+	it("includes a cleanup warning in a successful Thinking notification", async () => {
+		const config = cloneConfig();
+		config.components.thinkingSteps = { enabled: true, mode: "streaming" };
+		const state = {
+			available: true,
+			rendererAvailable: true,
+			streamingAvailable: true,
+			active: true,
+			activeMode: "streaming" as ThinkingStepsMode,
+			startup: { enabled: true, mode: "streaming" as ThinkingStepsMode },
+			displaced: false,
+			restartRequired: false,
+			reason: undefined as string | undefined,
+		};
+		const warning =
+			"Saved: Tree · Active: Tree · Streaming unavailable · Pi's terminal input listener cleanup is unavailable";
+		const harness = createHarness(config, {
+			thinkingStepsCapability: { state },
+			setThinkingStepsComponent(patch: Partial<ThinkingStepsComponentConfig>) {
+				Object.assign(config.components.thinkingSteps, patch);
+				state.activeMode = "tree";
+				state.streamingAvailable = false;
+				state.reason = "Pi's terminal input listener cleanup is unavailable";
+				return { applied: true, reason: warning };
+			},
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		selectLabel(component, "Mode");
+		component.handleInput(" ");
+		expect(component.render(180).join("\n")).toContain(warning);
+		expect(harness.notificationEvents.at(-1)).toEqual({
+			message: `Thinking (Experimental): Tree (${warning})`,
+			severity: "warning",
+		});
+	});
+
+	it("shows a warning when disabling Streaming restores native output with degraded cleanup", async () => {
+		const config = cloneConfig();
+		config.components.thinkingSteps = { enabled: true, mode: "streaming" };
+		const state = {
+			available: true,
+			rendererAvailable: true,
+			streamingAvailable: true,
+			active: true,
+			activeMode: "streaming" as ThinkingStepsMode | undefined,
+			startup: { enabled: true, mode: "streaming" as ThinkingStepsMode },
+			displaced: false,
+			restartRequired: false,
+			reason: undefined as string | undefined,
+		};
+		const warning =
+			"Saved: Disabled · Active: Native · Streaming unavailable · Pi's terminal input listener cleanup is unavailable";
+		const harness = createHarness(config, {
+			thinkingStepsCapability: { state },
+			setThinkingStepsComponent(patch: Partial<ThinkingStepsComponentConfig>) {
+				Object.assign(config.components.thinkingSteps, patch);
+				state.active = false;
+				state.activeMode = undefined;
+				state.streamingAvailable = false;
+				state.reason = "Pi's terminal input listener cleanup is unavailable";
+				return { applied: true, reason: warning };
+			},
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		selectLabel(component, "Enabled");
+		component.handleInput(" ");
+		expect(component.render(180).join("\n")).toContain(warning);
+		expect(harness.notificationEvents.at(-1)).toEqual({
+			message: `Thinking (Experimental): disabled (${warning})`,
+			severity: "warning",
+		});
+	});
+
+	it("restores Thinking-step rows after persistence failure and exposes no direct route", async () => {
+		const harness = createHarness(cloneConfig(), {
+			setThinkingStepsComponent() {
+				throw new Error("read-only thinking");
+			},
+		});
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Thinking");
+		selectLabel(component, "Enabled");
+		component.handleInput(" ");
+		expect(focusedRow(component)).toContain("disabled");
+		expect(harness.notifications).toContain("Could not update Zentui settings: read-only thinking");
+		await harness.command().handler("thinking-steps", harness.ctx);
+		expect(harness.notifications.at(-1)).toMatch(/^Usage:/);
+		expect(
+			harness
+				.command()
+				.getArgumentCompletions("")
+				?.map((item) => item.value)
+				.join("\n"),
+		).not.toMatch(/thinking.steps/i);
+	});
+
+	it("routes all Working-line rows independently", async () => {
+		const harness = createHarness();
+		await harness.command().handler("working-line", harness.ctx);
+		const component = harness.component();
+		expectFocusOrder(component, [
+			"Enabled",
+			"Turn summary",
+			"Spinner",
+			"Spinner speed",
+			"Animate spinner color",
+			"Text animation",
+			"Text motion speed",
+			"Color source",
+			"Custom messages",
+			"Tool",
+			"Elapsed",
+			"Thinking time",
+			"Tokens",
+			"Message list",
+		]);
+		for (const [label, expected] of [
+			["Enabled", "enabled"],
+			["Turn summary", "disabled"],
+			["Spinner", "ASCII Pinwheel"],
+			["Spinner speed", "Slow 160 ms"],
+			["Animate spinner color", "enabled"],
+			["Text animation", "kitt"],
+			["Text motion speed", "Slow 100 ms"],
+			["Color source", "terminal"],
+			["Custom messages", "disabled"],
+			["Tool", "disabled"],
+			["Elapsed", "disabled"],
+			["Thinking time", "disabled"],
+			["Tokens", "disabled"],
+		] as const) {
+			selectLabel(component, label);
+			component.handleInput(" ");
+			expect(focusedRow(component)).toContain(expected);
+		}
+		expect(harness.calls.workingLine).toEqual([
+			{ enabled: true },
+			{ turnSummary: false },
+			{ spinner: "pinwheel" },
+			{ spinnerIntervalMs: 160 },
+			{ animateSpinnerColor: true },
+			{ textAnimation: "kitt" },
+			{ textIntervalMs: 100 },
+			{ colorSource: "terminal" },
+			{ messages: { custom: false } },
+			{ segments: { tool: false } },
+			{ segments: { elapsed: false } },
+			{ segments: { thought: false } },
+			{ segments: { tokens: false } },
+		]);
+		expect(harness.calls.renders).toEqual({ shared: 0, local: 13 });
+	});
+
+	it("displays, previews, and stores all named spinner presets with canonical IDs", async () => {
+		const current = cloneConfig();
+		current.components.workingLine.spinnerIntervalMs = 180;
+		const harness = createHarness(current);
+		await harness.command().handler("working-line", harness.ctx);
+		selectLabel(harness.component(), "Spinner");
+		for (const label of [
+			"Star Bloom",
+			"ASCII Pinwheel",
+			"Claude-inspired",
+			"Pulse",
+			"Braille Orbit",
+		]) {
+			expect(focusedRow(harness.component())).toContain(label);
+			if (label === "Pulse") {
+				const rows = harness.component().render(100);
+				expect(rows[previewRow(rows, "⠀⠶⠀")]).toContain("⠀⠶⠀");
+				expect(current.components.workingLine.spinnerIntervalMs).toBe(180);
+			}
+			harness.component().handleInput(" ");
+		}
+		expect(harness.calls.workingLine).toEqual([
+			{ spinner: "pinwheel" },
+			{ spinner: "claude-inspired" },
+			{ spinner: "pulse" },
+			{ spinner: "braille" },
+			{ spinner: "star-bloom" },
+		]);
+		expect(current.components.workingLine.spinnerIntervalMs).toBe(180);
+	});
+
+	it("closes for Custom speed input, saves a valid integer, and reopens with Speed focused", async () => {
+		vi.useFakeTimers();
+		const current = cloneConfig();
+		current.components.workingLine.spinnerIntervalMs = 160;
+		const focusedAfterOpen: string[] = [];
+		let customCount = 0;
+		const harness = createHarness(
+			current,
+			{},
+			{
+				async custom(factory: (...args: unknown[]) => unknown) {
+					let outcome: unknown;
+					const component = factory({ requestRender() {} }, theme(), {}, (value: unknown) => {
+						outcome = value;
+					}) as Component;
+					if (customCount++ === 0) {
+						selectLabel(component, "Spinner speed");
+						component.handleInput(" ");
+					} else {
+						focusedAfterOpen.push(focusedRow(component));
+						component.handleInput("\x1b");
+					}
+					return outcome;
+				},
+				async input(title: string, placeholder: string) {
+					expect(title).toBe("Spinner speed (30–1000 ms)");
+					expect(placeholder).toBe("160");
+					return " 77 ";
+				},
+			},
+		);
+		harness.sessionLifecycle.start();
+		await harness.command().handler("working-line", harness.ctx);
+		expect(harness.calls.workingLine).toEqual([{ spinnerIntervalMs: 77 }]);
+		expect(focusedAfterOpen).toEqual([expect.stringContaining("> Spinner speed")]);
+		expect(focusedAfterOpen[0]).toContain("Custom 77 ms");
+		expect(harness.notifications).toContain("Spinner speed: 77 ms");
+		expect(vi.getTimerCount()).toBe(0);
+	});
+
+	it("uses a separate Custom text-speed dialog and reopens on its originating row", async () => {
+		const current = cloneConfig();
+		current.components.workingLine.textIntervalMs = 100;
+		let customCount = 0;
+		const focusedAfterOpen: string[] = [];
+		const harness = createHarness(
+			current,
+			{},
+			{
+				async custom(factory: (...args: unknown[]) => unknown) {
+					let outcome: unknown;
+					const component = factory({ requestRender() {} }, theme(), {}, (value: unknown) => {
+						outcome = value;
+					}) as Component;
+					if (customCount++ === 0) {
+						selectLabel(component, "Text motion speed");
+						component.handleInput(" ");
+					} else {
+						focusedAfterOpen.push(focusedRow(component));
+						component.handleInput("\x1b");
+					}
+					return outcome;
+				},
+				async input(title: string, placeholder: string) {
+					expect(title).toBe("Text motion speed (30–1000 ms)");
+					expect(placeholder).toBe("100");
+					return "73";
+				},
+			},
+		);
+		await harness.command().handler("working-line", harness.ctx);
+		expect(harness.calls.workingLine).toEqual([{ textIntervalMs: 73 }]);
+		expect(focusedAfterOpen[0]).toContain("> Text motion speed");
+		expect(focusedAfterOpen[0]).toContain("Custom 73 ms");
+	});
+
+	it.each([
+		[undefined, "Spinner speed unchanged (input canceled)"],
+		["29", "Spinner speed must be a whole number from 30 to 1000 ms; unchanged."],
+		["60.5", "Spinner speed must be a whole number from 30 to 1000 ms; unchanged."],
+	] as const)(
+		"preserves Custom speed on canceled or invalid input %s",
+		async (response, notice) => {
+			const current = cloneConfig();
+			current.components.workingLine.spinnerIntervalMs = 160;
+			let customCount = 0;
+			const harness = createHarness(
+				current,
+				{},
+				{
+					async custom(factory: (...args: unknown[]) => unknown) {
+						let outcome: unknown;
+						const component = factory({ requestRender() {} }, theme(), {}, (value: unknown) => {
+							outcome = value;
+						}) as Component;
+						if (customCount++ === 0) {
+							selectLabel(component, "Spinner speed");
+							component.handleInput(" ");
+						} else {
+							expect(focusedRow(component)).toContain("> Spinner speed");
+							component.handleInput("\x1b");
+						}
+						return outcome;
+					},
+					async input() {
+						return response;
+					},
+				},
+			);
+			await harness.command().handler("working-line", harness.ctx);
+			expect(current.components.workingLine.spinnerIntervalMs).toBe(160);
+			expect(harness.calls.workingLine).toEqual([]);
+			expect(harness.notifications).toContain(notice);
+		},
+	);
+
+	it("preserves shared rendering for settings outside Working line", async () => {
+		const harness = createHarness();
+		await harness.command().handler("", harness.ctx);
+		selectLabel(harness.component(), "Selector borders");
+		harness.component().handleInput(" ");
+		expect(harness.calls.renders).toEqual({ shared: 1, local: 1 });
+	});
+
+	it.each([
+		["Editor", "Explain"],
+		["User messages", "Please review"],
+		["Working line", "Sautéing…"],
+	] as const)(
+		"stacks the %s preview above settings at every width",
+		async (section, previewText) => {
+			vi.useFakeTimers();
+			const harness = createHarness();
+			harness.sessionLifecycle.start();
+			await harness.command().handler("", harness.ctx);
+			const component = harness.component();
+			goToSection(component, section);
+			const zeroWidthRows = component.render(0);
+			const oneCellRows = component.render(1);
+			expect(zeroWidthRows).toHaveLength(oneCellRows.length);
+			for (const width of [0, 1, 4]) {
+				const rows = component.render(width);
+				expect(rows.every((line) => visibleWidth(line) <= width)).toBe(true);
+				expect(rows.join("")).not.toContain(previewText);
+			}
+			for (const width of [24, 80, 99, 100, 118, 140, 160, 200]) {
+				const rows = component.render(width);
+				expect(rows.every((line) => visibleWidth(line) <= width)).toBe(true);
+				expectStackedPreview(rows, previewText);
+				expect(rows.some((line) => line.includes("> "))).toBe(true);
+			}
+			component.handleInput("\x1b");
+			expect(vi.getTimerCount()).toBe(0);
+		},
+	);
+
+	it.each(["Appearance", "Footer", "Segments", "Git", "Extensions"] as const)(
+		"does not add preview spacer rows in %s",
+		async (section) => {
+			const harness = createHarness();
+			await harness.command().handler("", harness.ctx);
+			const component = harness.component();
+			goToSection(component, section);
+			for (const width of [24, 80, 99, 100, 118, 140, 160, 200]) {
+				const rows = component.render(width);
+				expect(rows.every((line) => visibleWidth(line) <= width)).toBe(true);
+				expect(leadingEmptyRowCount(rows)).toBe(0);
+			}
+		},
+	);
+
+	it("shows static previews only in their owning sections without timers or extra setters", async () => {
+		vi.useFakeTimers();
+		const harness = createHarness();
+		harness.sessionLifecycle.start();
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		const appearanceRows = component.render(100);
+		expect(appearanceRows.join("\n")).not.toContain("Explain this change safely.");
+		expect(leadingEmptyRowCount(appearanceRows)).toBe(0);
+		component.handleInput("\t");
+		const editorRows = component.render(100);
+		expectStackedPreview(editorRows, "Explain this change safely.");
+		const editor = editorRows.join("\n");
+		expect(editor).toContain("Explain this change safely.");
+		expect(editor).not.toContain("Editor preview");
+		expect(vi.getTimerCount()).toBe(0);
+		selectLabel(component, "Editor style");
+		component.handleInput(" ");
+		const copyFriendly = component.render(100).join("\n");
+		expect(copyFriendly).not.toBe(editor);
+		expect(harness.calls.editor).toEqual([{ style: "opencode-copy-friendly" }]);
+		selectLabel(component, "Editor colors");
+		component.handleInput(" ");
+		expect(component.render(100).join("\n")).not.toBe(copyFriendly);
+		selectLabel(component, "Editor viewport indicators");
+		component.handleInput(" ");
+		expect(component.render(100).join("\n")).not.toContain("↑ 2 more");
+		selectLabel(component, "Editor style");
+		component.handleInput(" ");
+		const accentRail = component.render(100).join("\n");
+		expect(accentRail).not.toBe(copyFriendly);
+		selectLabel(component, "Editor style");
+		component.handleInput(" ");
+		const minimalist = component.render(100).join("\n");
+		selectLabel(component, "Timer");
+		component.handleInput(" ");
+		expect(component.render(100).join("\n")).not.toBe(minimalist);
+		expect(harness.calls.minimalist).toEqual([{ showTimer: false }]);
+		expect(vi.getTimerCount()).toBe(0);
+		component.handleInput("\t");
+		const messageRows = component.render(100);
+		expectStackedPreview(messageRows, "Please review");
+		const messages = messageRows.join("\n");
+		expect(messages).toContain("Please review [this change] safely.");
+		expect(messages).not.toContain("User message preview");
+		expect(harness.calls.messages).toEqual([]);
+		expect(vi.getTimerCount()).toBe(0);
+		selectLabel(component, "Message style");
+		component.handleInput(" ");
+		const copyFriendlyMessage = component.render(100).join("\n");
+		expect(copyFriendlyMessage).not.toBe(messages);
+		selectLabel(component, "Message colors");
+		component.handleInput(" ");
+		expect(component.render(100).join("\n")).not.toBe(copyFriendlyMessage);
+		expect(harness.calls.messages).toEqual([
+			{ style: "framed-copy-friendly" },
+			{ colorSource: "terminal" },
+		]);
+		expect(vi.getTimerCount()).toBe(0);
+		component.handleInput("\t");
+		expect(component.render(100).join("\n")).toContain("Thinking");
+		component.handleInput("\t");
+		const workingRows = component.render(100);
+		expectStackedPreview(workingRows, "Sautéing…");
+		component.handleInput("\t");
+		for (const section of ["Footer", "Segments", "Git", "Extensions"] as const) {
+			expect(leadingEmptyRowCount(component.render(100)), section).toBe(0);
+			if (section !== "Extensions") component.handleInput("\t");
+		}
+		expect(vi.getTimerCount()).toBe(0);
+	});
+
+	it("keeps disabled Editor and User-message previews visual, bounded, and focus-neutral", async () => {
+		const current = cloneConfig();
+		current.components.editor.enabled = false;
+		current.components.userMessages.enabled = false;
+		const harness = createHarness(current);
+		await harness.command().handler("", harness.ctx);
+		const component = harness.component();
+		goToSection(component, "Editor");
+		expect(component.render(80).join("\n")).toContain("Explain this change safely.");
+		expect(component.render(80).join("\n")).not.toContain("Editor preview");
+		expect(component.render(4).every((line) => visibleWidth(line) <= 4)).toBe(true);
+		expect(focusedRow(component)).toContain("> Editor");
+		component.handleInput("\t");
+		expect(component.render(24).join("\n")).toContain("Please review");
+		expect(component.render(80).join("\n")).not.toContain("User message preview");
+		expect(focusedRow(component)).toContain("> User messages");
+		expect(harness.calls.editor).toEqual([]);
+		expect(harness.calls.messages).toEqual([]);
+	});
+
+	it("animates the preview and cleans its single timer on changes, exits, errors, and shutdown", async () => {
+		vi.useFakeTimers();
+		const harness = createHarness();
+		harness.sessionLifecycle.start();
+		await harness.command().handler("working-line", harness.ctx);
+		const component = harness.component();
+		const animationWidth = 160;
+		const initialRows = component.render(animationWidth);
+		expectStackedPreview(initialRows, "Sautéing…");
+		expect(leadingEmptyRowCount(component.render(1))).toBe(0);
+		expect(component.render(1).every((line) => visibleWidth(line) <= 1)).toBe(true);
+		const firstPreviewIndex = previewRow(initialRows, "Sautéing…");
+		const firstPreview = initialRows[firstPreviewIndex];
+		expect(firstPreview).toContain("Sautéing…");
+		expect(firstPreview).toContain("read");
+		expect(harness.calls.workingLine).toEqual([]);
+		expect(vi.getTimerCount()).toBe(1);
+		vi.advanceTimersByTime(300);
+		expect(component.render(animationWidth)[firstPreviewIndex]).not.toBe(firstPreview);
+		selectLabel(component, "Custom messages");
+		component.handleInput(" ");
+		const fallbackPreview = component
+			.render(animationWidth)
+			[firstPreviewIndex]?.replaceAll("[", "")
+			.replaceAll("]", "");
+		expect(fallbackPreview).toContain("Working…");
+		expect(fallbackPreview).toContain("read");
+		vi.advanceTimersByTime(1200);
+		const stablePreview =
+			component
+				.render(animationWidth)
+				[firstPreviewIndex]?.replaceAll("[", "")
+				.replaceAll("]", "") ?? "";
+		expect(stablePreview).toContain("Working…");
+		expect(stablePreview).toContain("read · 1m02s · thinking 10s · ↑1.2k ↓56");
+		selectLabel(component, "Tool");
+		component.handleInput(" ");
+		const withoutTool =
+			component
+				.render(animationWidth)
+				[firstPreviewIndex]?.replaceAll("[", "")
+				.replaceAll("]", "") ?? "";
+		expect(withoutTool).not.toContain("read");
+		expect(withoutTool).toContain("1m02s · thinking 10s · ↑1.2k ↓56");
+		selectLabel(component, "Spinner");
+		component.handleInput(" ");
+		expect(vi.getTimerCount()).toBe(1);
+		selectLabel(component, "Spinner speed");
+		component.handleInput(" ");
+		expect(vi.getTimerCount()).toBe(1);
+		component.handleInput("\t");
+		expect(vi.getTimerCount()).toBe(0);
+		component.handleInput("\x1b[Z");
+		expect(vi.getTimerCount()).toBe(1);
+		component.handleInput("\x1b");
+		expect(vi.getTimerCount()).toBe(0);
+
+		const failed = createHarness(cloneConfig(), {
+			setWorkingLineComponent() {
+				throw new Error("read-only working line");
+			},
+		});
+		failed.sessionLifecycle.start();
+		await failed.command().handler("working-line", failed.ctx);
+		failed.component().handleInput(" ");
+		expect(vi.getTimerCount()).toBe(0);
+		expect(leadingEmptyRowCount(failed.component().render(100))).toBe(0);
+		expect(failed.notifications).toContain(
+			"Could not update Zentui settings: read-only working line",
+		);
+
+		const shutdown = createHarness();
+		shutdown.sessionLifecycle.start();
+		await shutdown.command().handler("working-line", shutdown.ctx);
+		expect(vi.getTimerCount()).toBe(1);
+		shutdown.sessionLifecycle.shutdown();
+		expect(vi.getTimerCount()).toBe(0);
+	});
+
+	it("saves an empty Message list canonically and reopens its styled fallback preview with focus restored", async () => {
+		vi.useFakeTimers();
+		let openCount = 0;
+		let reopenedPreview = "";
+		const harness = createHarness(
+			cloneConfig(),
+			{},
+			{
+				async custom(factory: (...args: unknown[]) => unknown) {
+					let outcome: unknown;
+					const component = factory({ requestRender() {} }, theme(), {}, (value: unknown) => {
+						outcome = value;
+					}) as Component;
+					if (openCount++ === 0) {
+						selectLabel(component, "Message list");
+						component.handleInput(" ");
+					} else {
+						expect(focusedRow(component)).toContain("> Message list");
+						const rows = component.render(100);
+						reopenedPreview = rows[previewRow(rows, "Working…")] ?? "";
+						component.handleInput("\x1b");
+					}
+					return outcome;
+				},
+				async editor(title: string) {
+					expect(title).toBe("Working line message list");
+					return " \n\t\r\n";
+				},
+			},
+		);
+		harness.sessionLifecycle.start();
+
+		await harness.command().handler("working-line", harness.ctx);
+
+		expect(openCount).toBe(2);
+		expect(harness.calls.workingLine).toEqual([{ messages: { values: [] } }]);
+		expect(harness.config.components.workingLine.messages.values).toEqual([]);
+		expect(harness.notifications).toContain("Message list: 0 (using styled Working…)");
+		expect(reopenedPreview.replaceAll("[", "").replaceAll("]", "")).toContain("Working…");
+		expect(reopenedPreview).toMatch(/\[[^\]]+\]/);
+		expect(vi.getTimerCount()).toBe(0);
+	});
+
+	it("closes for multiline message editing, normalizes save, preserves cancel, and reopens Working line", async () => {
+		vi.useFakeTimers();
+		const openedSections: string[] = [];
+		let customCount = 0;
+		const harness = createHarness(
+			cloneConfig(),
+			{},
+			{
+				async custom(factory: (...args: unknown[]) => unknown) {
+					let outcome: unknown;
+					const component = factory({ requestRender() {} }, theme(), {}, (value: unknown) => {
+						outcome = value;
+					}) as Component;
+					openedSections.push(component.render(40)[1] ?? "");
+					if (customCount++ === 0) {
+						selectLabel(component, "Message list");
+						component.handleInput(" ");
+					} else component.handleInput("\x1b");
+					return outcome;
+				},
+				async editor(title: string, prefill: string) {
+					expect(title).toBe("Working line message list");
+					expect(prefill).toBe(defaultConfig.components.workingLine.messages.values.join("\n"));
+					return " One \nOne\n\x1b[31mTwo\x1b[0m\n";
+				},
+			},
+		);
+		harness.sessionLifecycle.start();
+		await harness.command().handler("working-line", harness.ctx);
+		expect(vi.getTimerCount()).toBe(0);
+		expect(openedSections).toHaveLength(2);
+		expect(openedSections.every((line) => line.includes("Working line"))).toBe(true);
+		expect(harness.calls.workingLine).toEqual([{ messages: { values: ["One", "Two"] } }]);
+		expect(harness.calls.renders.shared).toBe(0);
+
+		let cancelCustomCount = 0;
+		const canceled = createHarness(
+			cloneConfig(),
+			{},
+			{
+				async custom(factory: (...args: unknown[]) => unknown) {
+					let outcome: unknown;
+					const component = factory({ requestRender() {} }, theme(), {}, (value: unknown) => {
+						outcome = value;
+					}) as Component;
+					if (cancelCustomCount++ === 0) {
+						selectLabel(component, "Message list");
+						component.handleInput(" ");
+					} else component.handleInput("\x1b");
+					return outcome;
+				},
+				async editor() {
+					return undefined;
+				},
+			},
+		);
+		canceled.sessionLifecycle.start();
+		await canceled.command().handler("working-line", canceled.ctx);
+		expect(vi.getTimerCount()).toBe(0);
+		expect(cancelCustomCount).toBe(2);
+		expect(canceled.calls.workingLine).toEqual([]);
+	});
+
+	it.each([
+		["messages", "User messages"],
+		["user-messages", "User messages"],
+		["working-line", "Working line"],
+	])("opens %s directly in %s", async (argument, section) => {
+		const harness = createHarness();
+		await harness.command().handler(argument, harness.ctx);
+		expect(harness.component().render(40)[1]).toContain(section);
+	});
+});