gsd-pi 2.80.0 → 2.81.0-dev.3cddbbba2

package/packages/pi-coding-agent/src/modes/interactive/components/adaptive-layout.test.ts

@@ -0,0 +1,66 @@
+// Project/App: GSD-2
+// File Purpose: Runtime tests for adaptive command-center terminal layout rendering.
+
+import assert from "node:assert/strict";
+import { describe, it, before } from "node:test";
+import stripAnsi from "strip-ansi";
+import { AdaptiveLayoutComponent } from "./adaptive-layout.js";
+import { initTheme } from "../theme/theme.js";
+
+before(() => {
+	initTheme("dark", false);
+});
+
+function render(component: AdaptiveLayoutComponent, width: number): string {
+	return component.render(width).map(stripAnsi).join("\n");
+}
+
+describe("AdaptiveLayoutComponent", () => {
+	it("renders a rounded workflow command center on wide terminals", () => {
+		const component = new AdaptiveLayoutComponent(() => ({
+			override: "workflow",
+			activeToolCount: 2,
+			gsdPhase: "executing milestone M001",
+			sessionName: "demo",
+			cwd: "/tmp/demo",
+		}));
+
+		const output = render(component, 132);
+		assert.match(output, /GSD Command Center/);
+		assert.match(output, /workflow · ready/);
+		assert.match(output, /2 running/);
+		assert.match(output, /watch tool output/);
+		assert.doesNotMatch(output, /signals/);
+		assert.doesNotMatch(output, /inspector/);
+		assert.doesNotMatch(output, /\bauto\b/i);
+		assert.match(output, /^╭─+╮/m);
+	});
+
+	it("falls back to a single compact row for narrow workflow terminals", () => {
+		const component = new AdaptiveLayoutComponent(() => ({
+			override: "workflow",
+			activeToolCount: 1,
+			gsdPhase: "executing milestone M001",
+			cwd: "/tmp/demo",
+		}));
+
+		const output = render(component, 68);
+		assert.match(output, /GSD compact/);
+		assert.doesNotMatch(output, /signals/);
+		assert.doesNotMatch(output, /\bauto\b/i);
+	});
+
+	it("renders blocking failure context in debug mode", () => {
+		const component = new AdaptiveLayoutComponent(() => ({
+			override: "auto",
+			activeToolCount: 0,
+			lastError: "Cannot find module @gsd/native",
+			cwd: "/tmp/demo",
+		}));
+
+		const output = render(component, 120);
+		assert.match(output, /blocking failure/);
+		assert.match(output, /Cannot find module/);
+		assert.match(output, /inspect the failed output/);
+	});
+});

package/packages/pi-coding-agent/src/modes/interactive/components/adaptive-layout.ts

@@ -0,0 +1,161 @@
+// Project/App: GSD-2
+// File Purpose: Adaptive command-center dashboard for the interactive TUI.
+
+import { style, truncateToWidth, type Component } from "@gsd/pi-tui";
+import type { TuiAdaptiveMode, TuiMode } from "../tui-mode.js";
+import { resolveTuiMode } from "../tui-mode.js";
+import { theme, type ThemeColor } from "../theme/theme.js";
+import { alignRight, breakpoint, keyValue, roundedPanel } from "./tui-style-kit.js";
+
+export interface AdaptiveLayoutState {
+	override: TuiAdaptiveMode;
+	activeToolCount: number;
+	gsdPhase?: string;
+	lastError?: string;
+	sessionName?: string;
+	cwd: string;
+}
+
+export class AdaptiveLayoutComponent implements Component {
+	constructor(private readonly getState: () => AdaptiveLayoutState) {}
+
+	invalidate(): void {}
+
+	render(width: number): string[] {
+		const state = this.getState();
+		const mode = resolveTuiMode({
+			terminalWidth: width,
+			override: state.override,
+			activeToolCount: state.activeToolCount,
+			gsdPhase: state.gsdPhase,
+			hasBlockingError: !!state.lastError,
+		});
+
+		if (state.override === "auto" && mode === "chat" && !state.gsdPhase && !state.lastError && state.activeToolCount === 0) {
+			return [];
+		}
+
+		if (mode === "compact" || width < 72) return this.renderCompact(width, mode, state);
+		if (mode === "debug") return this.renderDebug(width, state);
+		if (mode === "validation") return this.renderValidation(width, state);
+		if (mode === "workflow") return this.renderWorkflow(width, state);
+		return this.renderChat(width, state);
+	}
+
+	private renderWorkflow(width: number, state: AdaptiveLayoutState): string[] {
+		if (width < 72) return this.renderCompact(width, "workflow", state);
+
+		const phase = state.gsdPhase ?? "Ready";
+		const tools = state.activeToolCount > 0 ? `${state.activeToolCount} running` : "idle";
+		const next = state.activeToolCount > 0 ? "watch tool output" : "continue from prompt";
+		const modeLabel = state.override === "auto" ? "workflow" : state.override;
+		const bp = breakpoint(width);
+
+		const rows = bp === "regular"
+			? [
+					keyValue("Status", phase, "modeWorkflow"),
+					keyValue("Tools", tools, state.activeToolCount > 0 ? "toolRunning" : "toolMuted"),
+					keyValue("Session", state.sessionName ?? "current", "text"),
+					keyValue("Next", next, "surfaceAccent"),
+				]
+			: [
+					alignRight(
+						keyValue("Status", phase, "modeWorkflow"),
+						keyValue("Tools", tools, state.activeToolCount > 0 ? "toolRunning" : "toolMuted"),
+						Math.max(1, width - 2),
+					),
+					alignRight(
+						keyValue("Session", state.sessionName ?? "current", "text"),
+						keyValue("Path", this.basename(state.cwd), "text"),
+						Math.max(1, width - 2),
+					),
+					alignRight(
+						keyValue("Next", next, "surfaceAccent"),
+						keyValue("Mode", modeLabel, "modeWorkflow"),
+						Math.max(1, width - 2),
+					),
+				];
+
+		return roundedPanel(rows, width, {
+			title: "GSD Command Center",
+			rightTitle: `${modeLabel} · ${state.lastError ? "blocked" : "ready"}`,
+			tone: state.lastError ? "error" : "default",
+		});
+	}
+
+	private renderValidation(width: number, state: AdaptiveLayoutState): string[] {
+		const phase = state.gsdPhase ?? "Validation pending";
+		return this.frame(
+			[
+				this.metric("Focus", phase, "modeValidation"),
+				this.metric("Checks", state.activeToolCount > 0 ? `${state.activeToolCount} active` : "waiting", "toolRunning"),
+				this.metric("Timeline", state.lastError ? "blocked" : "ready for completion evidence", state.lastError ? "toolError" : "toolSuccess"),
+			],
+			width,
+			"validation",
+			state.override === "auto" ? "auto" : state.override,
+			"modeValidation",
+		);
+	}
+
+	private renderDebug(width: number, state: AdaptiveLayoutState): string[] {
+		const error = state.lastError ?? "Blocking error detected";
+		return this.frame(
+			[
+				this.metric("Failure", truncateToWidth(error, Math.max(20, width - 20), ""), "toolError"),
+				this.metric("Tools", state.activeToolCount > 0 ? `${state.activeToolCount} still running` : "none running", "toolRunning"),
+				this.metric("Next", "inspect the failed output, then retry the smallest step", "modeDebug"),
+			],
+			width,
+			"blocking failure",
+			"debug",
+			"modeDebug",
+		);
+	}
+
+	private renderChat(width: number, state: AdaptiveLayoutState): string[] {
+		return this.frame(
+			[
+				this.metric("Mode", state.override === "auto" ? "auto chat" : state.override, "surfaceAccent"),
+				this.metric("Tools", state.activeToolCount > 0 ? `${state.activeToolCount} active` : "compact rows", "toolMuted"),
+			],
+			width,
+			"chat",
+			state.sessionName ?? "conversation",
+			"surfaceAccent",
+		);
+	}
+
+	private renderCompact(width: number, mode: TuiMode, state: AdaptiveLayoutState): string[] {
+		const phase = state.lastError ?? state.gsdPhase ?? (state.activeToolCount > 0 ? `${state.activeToolCount} tools` : "ready");
+		const line = `${theme.fg("modeCompact", "GSD compact")} ${theme.fg("surfaceMuted", `${mode} · ${phase}`)}`;
+		return style()
+			.border("minimal")
+			.borderColor((text) => theme.fg("surfaceBorder", text))
+			.bodyGutter(" ")
+			.render([line], width);
+	}
+
+	private frame(lines: string[], width: number, title: string, rightTitle: string, accent: ThemeColor): string[] {
+		return style()
+			.border("rule")
+			.density("compact")
+			.toneColor((text) => theme.fg("surfaceMuted", text))
+			.borderColor((text) => theme.fg("surfaceBorder", text))
+			.title(theme.fg("surfaceTitle", title))
+			.rightTitle(theme.fg(accent, rightTitle))
+			.bodyGutter(theme.fg(accent, "│ "))
+			.render(lines, width);
+	}
+
+	private metric(label: string, value: string, color: ThemeColor): string {
+		return `${theme.fg("surfaceMuted", `${label.padEnd(8)} `)}${theme.fg(color, value)}`;
+	}
+
+	private basename(cwd: string): string {
+		const trimmed = cwd.replace(/[\\/]+$/, "");
+		if (!trimmed) return cwd.includes("\\") ? "\\" : "/";
+		const slash = Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\"));
+		return slash === -1 ? trimmed : trimmed.slice(slash + 1);
+	}
+}

package/packages/pi-coding-agent/src/modes/interactive/components/assistant-message.ts

@@ -1,8 +1,11 @@
+// Project/App: GSD-2
+// File Purpose: Assistant message rail renderer for interactive terminal sessions.
 import type { AssistantMessage } from "@gsd/pi-ai";
 import { Container, Markdown, type MarkdownTheme, Spacer, Text } from "@gsd/pi-tui";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
 import { type TimestampFormat } from "./timestamp.js";
-import { renderChatFrame } from "./chat-frame.js";
+import { formatTimestamp } from "./timestamp.js";
+import { renderAssistantRail } from "./transcript-design.js";
 
 export interface ContentRange {
 	startIndex: number;
@@ -162,19 +165,17 @@ export class AssistantMessageComponent extends Container {
 
 	override render(width: number): string[] {
 		const frameWidth = Math.max(20, width);
-		const contentWidth = Math.max(1, frameWidth - 4);
+		const contentWidth = Math.max(1, frameWidth - 2);
 		const lines = super.render(contentWidth);
-		const headerLabel = this.lastMessage?.model ? `GSD - ${this.lastMessage.model}` : "GSD";
-		const framed = renderChatFrame(lines, frameWidth, {
-			label: headerLabel,
-			tone: "assistant",
-			timestamp: this.lastMessage?.timestamp,
-			timestampFormat: this.timestampFormat,
-			showTimestamp: this.showMetadata,
-		});
-		if (framed.length === 0) {
-			return framed;
+		const metaParts = [];
+		if (this.lastMessage?.model) metaParts.push(this.lastMessage.model);
+		if (this.showMetadata && this.lastMessage?.timestamp != null) {
+			metaParts.push(formatTimestamp(this.lastMessage.timestamp, this.timestampFormat));
 		}
-		return ["", ...framed];
+		const rendered = renderAssistantRail(lines, frameWidth, {
+			label: "GSD",
+			meta: metaParts.length > 0 ? `· ${metaParts.join(" · ")}` : undefined,
+		});
+		return rendered.length > 0 ? ["", ...rendered] : rendered;
 	}
 }

package/packages/pi-coding-agent/src/modes/interactive/components/bash-execution.ts

@@ -1,6 +1,5 @@
-/**
- * Component for displaying bash command execution with streaming output.
- */
+// Project/App: GSD-2
+// File Purpose: Interactive terminal bash execution renderer with streaming output and recommended command cards.
 
 import { Container, Loader, Spacer, Text, type TUI } from "@gsd/pi-tui";
 import stripAnsi from "strip-ansi";
@@ -13,6 +12,7 @@ import {
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 import { editorKey, keyHint } from "./keybinding-hints.js";
+import { renderCommandCard, renderTranscriptCard, type StatusTone } from "./transcript-design.js";
 import { truncateToVisualLines } from "./visual-truncate.js";
 
 // Preview line limit when not expanded (matches tool execution behavior)
@@ -120,6 +120,67 @@ export class BashExecutionComponent extends Container {
 		this.updateDisplay();
 	}
 
+	override render(width: number): string[] {
+		const frameWidth = Math.max(20, width);
+		const elapsedStatus =
+			this.status === "running"
+				? "running"
+				: this.status === "complete"
+					? "success"
+					: this.status === "cancelled"
+						? "cancelled"
+						: `failed${this.exitCode !== undefined ? ` · exit ${this.exitCode}` : ""}`;
+		const tone: StatusTone =
+			this.status === "running"
+				? "running"
+				: this.status === "complete"
+					? "success"
+					: this.status === "cancelled"
+						? "warning"
+						: "error";
+
+		if (!this.expanded && this.status !== "error") {
+			return [
+				"",
+				...renderCommandCard(this.command.replace(/\s+/g, " ").trim(), frameWidth, {
+					status: elapsedStatus,
+					tone,
+				}),
+			];
+		}
+
+		const output = this.outputLines.join("\n");
+		const contextTruncation = truncateTail(output, {
+			maxLines: DEFAULT_MAX_LINES,
+			maxBytes: DEFAULT_MAX_BYTES,
+		});
+		const truncationResult = this.truncationResult ?? contextTruncation;
+		const fullOutputPath = this.fullOutputPath;
+		const availableLines = contextTruncation.content ? contextTruncation.content.split("\n") : [];
+		const preview = this.expanded ? availableLines : availableLines.slice(-PREVIEW_LINES);
+		const hidden = Math.max(0, availableLines.length - preview.length);
+		const truncationWarning =
+			(truncationResult.truncated || contextTruncation.truncated) && fullOutputPath
+				? [theme.fg("warning", `Output truncated. Full output: ${fullOutputPath}`)]
+				: [];
+		const body = [
+			theme.fg("toolTitle", `$ ${this.command}`),
+			...preview.map((line) => theme.fg("toolOutput", line)),
+			...(hidden > 0 ? [theme.fg("muted", `... ${hidden} earlier lines`)] : []),
+			...truncationWarning,
+		];
+		return [
+			"",
+			...renderTranscriptCard(body, frameWidth, {
+				title: "command",
+				right: elapsedStatus,
+				tone,
+				footerLeft: this.expanded ? "output expanded" : "output preview",
+				footerRight: this.expanded ? "ctrl+o collapse" : "ctrl+o expand",
+			}),
+		];
+	}
+
 	private updateDisplay(): void {
 		// Apply truncation for LLM context limits (same limits as bash tool)
 		const fullOutput = this.outputLines.join("\n");

package/packages/pi-coding-agent/src/modes/interactive/components/chat-frame.ts

@@ -1,4 +1,5 @@
-import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
+// GSD2 TUI - Shared chat frame renderer for assistant, user, and system cards.
+import { style, truncateToWidth, visibleWidth } from "@gsd/pi-tui";
 import { theme } from "../theme/theme.js";
 import { formatTimestamp, type TimestampFormat } from "./timestamp.js";
 
@@ -34,7 +35,7 @@ export function renderChatFrame(
 				: "borderAccent";
 	const borderMuted = isPurple ? "customMessageLabel" : "borderMuted";
 	const border = (s: string) => theme.fg(borderColor, s);
-	const leftRaw = `• ${opts.label}`;
+	const leftRaw = opts.label;
 	const rightRaw =
 		opts.showTimestamp === false || !opts.timestamp
 			? ""
@@ -67,21 +68,21 @@ export function renderChatFrame(
 	const headerRow = `${leftStyled}${" ".repeat(gap)}${rightStyled}`;
 	const headerPad = Math.max(0, outerWidth - visibleWidth(headerRow));
 
-	const sourceLines = trimOuterBlankLines(contentLines);
 	const bodyColor =
 		opts.tone === "user"
 			? "userMessageText"
 			: isPurple
 				? "customMessageText"
 				: "assistantMessageText";
+	const sourceLines = trimOuterBlankLines(contentLines);
 	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {
 		const clipped = truncateToWidth(line, contentWidth, "");
-		return border("│ ") + theme.fg(bodyColor, clipped);
+		return theme.fg(bodyColor, clipped);
 	});
 
-	return [
-		theme.fg(borderMuted, "─".repeat(outerWidth)),
-		headerRow + " ".repeat(headerPad),
-		...bodyLines,
-	];
+	return style()
+		.border("rule")
+		.borderColor((line) => (line.startsWith("─") ? theme.fg(borderMuted, line) : border(line)))
+		.title(headerRow + " ".repeat(headerPad))
+		.render(bodyLines, outerWidth);
 }

package/packages/pi-coding-agent/src/modes/interactive/components/diff.ts

@@ -1,5 +1,5 @@
 import * as Diff from "diff";
-import { theme } from "../theme/theme.js";
+import { getLanguageFromPath, highlightCode, theme } from "../theme/theme.js";
 
 /**
  * Parse diff line to extract prefix, line number, and content.
@@ -66,19 +66,25 @@ function renderIntraLineDiff(oldContent: string, newContent: string): { removedL
 }
 
 export interface RenderDiffOptions {
-	/** File path (unused, kept for API compatibility) */
+	/** File path used to choose syntax highlighting for changed content. */
 	filePath?: string;
 }
 
+function syntaxLine(content: string, lang: string | undefined): string {
+	if (!lang) return content;
+	return highlightCode(content, lang)[0] ?? content;
+}
+
 /**
  * Render a diff string with colored lines and intra-line change highlighting.
  * - Context lines: dim/gray
  * - Removed lines: red, with inverse on changed tokens
  * - Added lines: green, with inverse on changed tokens
  */
-export function renderDiff(diffText: string, _options: RenderDiffOptions = {}): string {
+export function renderDiff(diffText: string, options: RenderDiffOptions = {}): string {
 	const lines = diffText.split("\n");
 	const result: string[] = [];
+	const lang = options.filePath ? getLanguageFromPath(options.filePath) : undefined;
 
 	let i = 0;
 	while (i < lines.length) {
@@ -126,19 +132,19 @@ export function renderDiff(diffText: string, _options: RenderDiffOptions = {}):
 			} else {
 				// Show all removed lines first, then all added lines
 				for (const removed of removedLines) {
-					result.push(theme.fg("toolDiffRemoved", `-${removed.lineNum} ${replaceTabs(removed.content)}`));
+					result.push(`${theme.fg("toolDiffRemoved", `-${removed.lineNum} `)}${syntaxLine(replaceTabs(removed.content), lang)}`);
 				}
 				for (const added of addedLines) {
-					result.push(theme.fg("toolDiffAdded", `+${added.lineNum} ${replaceTabs(added.content)}`));
+					result.push(`${theme.fg("toolDiffAdded", `+${added.lineNum} `)}${syntaxLine(replaceTabs(added.content), lang)}`);
 				}
 			}
 		} else if (parsed.prefix === "+") {
 			// Standalone added line
-			result.push(theme.fg("toolDiffAdded", `+${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			result.push(`${theme.fg("toolDiffAdded", `+${parsed.lineNum} `)}${syntaxLine(replaceTabs(parsed.content), lang)}`);
 			i++;
 		} else {
 			// Context line
-			result.push(theme.fg("toolDiffContext", ` ${parsed.lineNum} ${replaceTabs(parsed.content)}`));
+			result.push(`${theme.fg("toolDiffContext", ` ${parsed.lineNum} `)}${syntaxLine(replaceTabs(parsed.content), lang)}`);
 			i++;
 		}
 	}

package/packages/pi-coding-agent/src/modes/interactive/components/footer.ts

@@ -1,8 +1,12 @@
+// Project/App: GSD-2
+// File Purpose: Interactive terminal footer renderer for workspace, model, usage, context, and extension status.
+
 import { type Component, truncateToWidth, visibleWidth } from "@gsd/pi-tui";
 import type { AgentSession } from "../../../core/agent-session.js";
 import type { ReadonlyFooterDataProvider } from "../../../core/footer-data-provider.js";
 import { theme } from "../theme/theme.js";
 import { providerAuthBadge, providerDisplayName } from "./model-selector.js";
+import { renderFooterStrip } from "./transcript-design.js";
 
 /**
  * Sanitize text for display in a single-line status.
@@ -155,8 +159,8 @@ export class FooterComponent implements Component {
 			? Math.max(0, Math.min(BAR_WIDTH, Math.round((contextPercentValue / 100) * BAR_WIDTH)))
 			: 0;
 		const bar =
-			theme.fg(barColor, "━".repeat(filled)) +
-			theme.fg("dim", "─".repeat(Math.max(0, BAR_WIDTH - filled)));
+			theme.fg(barColor, "█".repeat(filled)) +
+			theme.fg("dim", "░".repeat(Math.max(0, BAR_WIDTH - filled)));
 		const pctText = contextPercent === "?" ? "?" : `${contextPercent}%`;
 		const suffix = `/${formatTokens(contextWindow)}${autoIndicator}`;
 		const colorizedPct =
@@ -218,34 +222,9 @@ export class FooterComponent implements Component {
 			}
 		}
 
-		const rightSideWidth = visibleWidth(rightSide);
-		const totalNeeded = statsLeftWidth + minPadding + rightSideWidth;
-
-		let statsLine: string;
-		if (totalNeeded <= width) {
-			// Both fit - add padding to right-align model
-			const padding = " ".repeat(width - statsLeftWidth - rightSideWidth);
-			statsLine = statsLeft + padding + rightSide;
-		} else {
-			// Need to truncate right side
-			const availableForRight = width - statsLeftWidth - minPadding;
-			if (availableForRight > 0) {
-				const truncatedRight = truncateToWidth(rightSide, availableForRight, "");
-				const truncatedRightWidth = visibleWidth(truncatedRight);
-				const padding = " ".repeat(Math.max(0, width - statsLeftWidth - truncatedRightWidth));
-				statsLine = statsLeft + padding + truncatedRight;
-			} else {
-				// Not enough space for right side at all
-				statsLine = statsLeft;
-			}
-		}
-
-		// Apply dim to each part separately. statsLeft may contain color codes (for context %)
-		// that end with a reset, which would clear an outer dim wrapper. So we dim the parts
-		// before and after the colored section independently.
+		// Apply dim to the stats group before handing it to the shared footer strip.
+		// statsLeft may contain color codes for context %, so keep coloring local to the group.
 		const dimStatsLeft = theme.fg("dim", statsLeft);
-		const remainder = statsLine.slice(statsLeft.length); // padding + rightSide
-		const dimRemainder = theme.fg("dim", remainder);
 
 		// Extension statuses right-aligned on the pwd line (sorted by key).
 		// Keeps the footer compact by avoiding a dedicated row when the content
@@ -260,18 +239,12 @@ export class FooterComponent implements Component {
 						.join(" ")
 				: "";
 
-		const pwdWidth = visibleWidth(pwd);
-		const extWidth = visibleWidth(extStatusText);
-		let pwdLine: string;
-		if (extStatusText && pwdWidth + 2 + extWidth <= width) {
-			const padding = " ".repeat(width - pwdWidth - extWidth);
-			pwdLine = theme.fg("dim", pwd + padding + extStatusText);
-		} else {
-			pwdLine = truncateToWidth(theme.fg("dim", pwd), width, theme.fg("dim", "..."));
-		}
-
-		const lines = [pwdLine, dimStatsLeft + dimRemainder];
-
-		return lines;
+		const leftSegments = [
+			theme.fg("accent", "● GSD"),
+			theme.fg("dim", pwd),
+			dimStatsLeft,
+		];
+		const footerRight = [rightSide, extStatusText].filter(Boolean).join(" ");
+		return renderFooterStrip(leftSegments, footerRight, width);
 	}
 }

package/packages/pi-coding-agent/src/modes/interactive/components/settings-selector.ts

@@ -1,5 +1,6 @@
 import type { ThinkingLevel } from "@gsd/pi-agent-core";
 import type { Transport } from "@gsd/pi-ai";
+import type { AdaptiveTuiMode } from "../../../core/settings-manager.js";
 import {
 	Container,
 	getCapabilities,
@@ -46,6 +47,7 @@ export interface SettingsConfig {
 	quietStartup: boolean;
 	clearOnShrink: boolean;
 	timestampFormat: "date-time-iso" | "date-time-us";
+	adaptiveMode: AdaptiveTuiMode;
 }
 
 export interface SettingsCallbacks {
@@ -71,6 +73,7 @@ export interface SettingsCallbacks {
 	onQuietStartupChange: (enabled: boolean) => void;
 	onClearOnShrinkChange: (enabled: boolean) => void;
 	onTimestampFormatChange: (format: "date-time-iso" | "date-time-us") => void;
+	onAdaptiveModeChange: (mode: AdaptiveTuiMode) => void;
 	onCancel: () => void;
 }
 
@@ -367,6 +370,15 @@ export class SettingsSelectorComponent extends Container {
 			values: ["date-time-iso", "date-time-us"],
 		});
 
+		const timestampIndex = items.findIndex((item) => item.id === "timestamp-format");
+		items.splice(timestampIndex + 1, 0, {
+			id: "adaptive-mode",
+			label: "TUI adaptive mode",
+			description: "Auto-select or force the terminal layout mode",
+			currentValue: config.adaptiveMode,
+			values: ["auto", "chat", "workflow", "validation", "debug", "compact"],
+		});
+
 		// Add borders
 		this.addChild(new DynamicBorder());
 
@@ -435,6 +447,9 @@ export class SettingsSelectorComponent extends Container {
 					case "timestamp-format":
 						callbacks.onTimestampFormatChange(newValue as "date-time-iso" | "date-time-us");
 						break;
+					case "adaptive-mode":
+						callbacks.onAdaptiveModeChange(newValue as AdaptiveTuiMode);
+						break;
 				}
 			},
 			callbacks.onCancel,