@gajae-code/coding-agent 0.11.6 → 0.11.8

package/src/modes/action-registry.ts

@@ -49,7 +49,7 @@ export const APP_ACTION_METADATA: readonly ActionMetadata[] = [
 	action("app.clipboard.copyPrompt", "Copy prompt", "Clipboard", ["composer"]),
 	action("app.session.new", "New session", "Session", ["composer"]),
 	action("app.session.tree", "Session tree", "Session", ["composer"]),
-	action("app.session.fork", "Fork session", "Session", ["composer"]),
+	action("app.session.fork", "Branch from message", "Session", ["composer"]),
 	action("app.session.resume", "Resume session", "Session", ["composer"]),
 	action("app.session.observe", "Observe sessions", "Session", ["composer"]),
 	action("app.session.dashboard", "Show sessions dashboard", "Session", ["composer"]),

package/src/modes/components/btw-panel.ts

@@ -1,4 +1,10 @@
 import { type Component, Container, Markdown, Spacer, Text, type TUI } from "@gajae-code/tui";
+import {
+	BTW_MAX_ANSWER_UTF8_BYTES,
+	BTW_MAX_CONTEXT_TURNS,
+	sanitizeBtwError,
+	truncateUtf8,
+} from "../../session/btw-contract";
 import { replaceTabs } from "../../tools/render-utils";
 import { getMarkdownTheme, theme } from "../theme/theme";
 import { DynamicBorder } from "./dynamic-border";
@@ -10,12 +16,21 @@ interface BtwPanelComponentOptions {
 	tui: TUI;
 }
 
+interface BtwTurn {
+	question: string;
+	answer: string;
+	state: BtwPanelState;
+	errorMessage?: string;
+}
+
 export class BtwPanelComponent extends Container {
 	#question: string;
 	#tui: TUI;
 	#state: BtwPanelState = "running";
 	#answer = "";
 	#errorMessage: string | undefined;
+	#completedTurns: BtwTurn[] = [];
+	#streamingContent = new Container();
 	#closed = false;
 
 	constructor(options: BtwPanelComponentOptions) {
@@ -25,16 +40,29 @@ export class BtwPanelComponent extends Container {
 		this.#rebuild();
 	}
 
+	beginTurn(question: string): void {
+		if (this.#closed) return;
+		if (this.#state === "complete") {
+			this.#completedTurns.push(this.#currentTurn());
+			if (this.#completedTurns.length > BTW_MAX_CONTEXT_TURNS) this.#completedTurns.shift();
+		}
+		this.#question = question;
+		this.#answer = "";
+		this.#errorMessage = undefined;
+		this.#state = "running";
+		this.#rebuild();
+	}
+
 	appendText(delta: string): void {
 		if (!delta || this.#closed) return;
-		this.#answer += delta;
-		this.#rebuild();
+		this.#answer = truncateUtf8(this.#answer + delta, BTW_MAX_ANSWER_UTF8_BYTES);
+		this.#updateStreamingContent();
 	}
 
 	setAnswer(text: string): void {
 		if (this.#closed) return;
-		this.#answer = text;
-		this.#rebuild();
+		this.#answer = truncateUtf8(text, BTW_MAX_ANSWER_UTF8_BYTES);
+		this.#updateStreamingContent();
 	}
 
 	markComplete(): void {
@@ -54,21 +82,33 @@ export class BtwPanelComponent extends Container {
 	markError(message: string): void {
 		if (this.#closed) return;
 		this.#state = "error";
-		this.#errorMessage = message;
+		this.#answer = "";
+		this.#errorMessage = sanitizeBtwError(message);
 		this.#rebuild();
 	}
 
 	close(): void {
 		this.#closed = true;
+		this.#question = "";
+		this.#completedTurns = [];
+		this.#answer = "";
+		this.#errorMessage = undefined;
+		this.#streamingContent.clear();
+		this.clear();
 	}
 
 	#rebuild(): void {
 		this.clear();
 		this.addChild(new DynamicBorder(str => theme.fg("dim", str)));
 		this.addChild(new Spacer(1));
+		for (const turn of this.#completedTurns) {
+			this.addChild(this.#turnComponent(turn));
+			this.addChild(new Spacer(1));
+		}
 		this.addChild(new Text(theme.fg("accent", replaceTabs(this.#question)), 1, 0));
 		this.addChild(new Spacer(1));
-		this.addChild(this.#contentComponent());
+		this.#updateStreamingContent(false);
+		this.addChild(this.#streamingContent);
 		this.addChild(new Spacer(1));
 		this.addChild(new Text(this.#footerLine(), 1, 0));
 		this.addChild(new Spacer(1));
@@ -76,29 +116,55 @@ export class BtwPanelComponent extends Container {
 		this.#tui.requestRender();
 	}
 
+	#updateStreamingContent(requestRender = true): void {
+		this.#streamingContent.clear();
+		this.#streamingContent.addChild(this.#contentComponent(this.#state, this.#answer, this.#errorMessage));
+		if (requestRender) this.#tui.requestRender();
+	}
+
+	#currentTurn(): BtwTurn {
+		return {
+			question: this.#question,
+			answer: this.#answer,
+			state: this.#state,
+			errorMessage: this.#errorMessage,
+		};
+	}
+
+	#turnComponent(turn: BtwTurn): Component {
+		const container = new Container();
+		container.addChild(new Text(theme.fg("accent", replaceTabs(turn.question)), 1, 0));
+		container.addChild(new Spacer(1));
+		container.addChild(this.#contentComponent(turn.state, turn.answer, turn.errorMessage));
+		return container;
+	}
+
 	#footerLine(): string {
 		switch (this.#state) {
 			case "running":
-				return theme.fg("muted", "Esc cancel /btw");
+				return theme.fg("muted", "Esc cancel /btw and return to main chat");
 			case "complete":
-				return theme.fg("muted", "Esc dismiss");
+				return theme.fg("muted", "Type a follow-up · Esc return to main chat");
 			case "aborted":
-				return theme.fg("warning", `${theme.status.warning} Cancelled · Esc dismiss`);
+				return theme.fg(
+					"warning",
+					`${theme.status.warning} Cancelled · Type a follow-up · Esc return to main chat`,
+				);
 			case "error":
-				return theme.fg("error", `${theme.status.error} Error · Esc dismiss`);
+				return theme.fg("error", `${theme.status.error} Error · Type a follow-up · Esc return to main chat`);
 		}
 	}
 
-	#contentComponent(): Component {
-		if (this.#state === "error") {
-			return new Text(theme.fg("error", replaceTabs(this.#errorMessage ?? "Unknown error")), 1, 0);
+	#contentComponent(state: BtwPanelState, answer: string, errorMessage: string | undefined): Component {
+		if (state === "error") {
+			return new Text(theme.fg("error", replaceTabs(errorMessage ?? "Unknown error")), 1, 0);
 		}
-		const text = replaceTabs(this.#answer).trim();
+		const text = replaceTabs(answer).trim();
 		if (!text) {
-			const waiting =
-				this.#state === "running" ? `${theme.status.pending} Waiting for response…` : "No text returned.";
+			const waiting = state === "running" ? `${theme.status.pending} Waiting for response…` : "No text returned.";
 			return new Text(theme.fg("dim", waiting), 1, 0);
 		}
+		if (state === "running") return new Text(text, 1, 0);
 		return new Markdown(text, 1, 0, getMarkdownTheme());
 	}
 }

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

@@ -35,6 +35,7 @@ import type { Settings } from "../../config/settings";
 import { type ThemeColor, theme } from "../../modes/theme/theme";
 import { formatModelOnboardingInlineHint } from "../../setup/model-onboarding-guidance";
 import { formatClampedModelSelector, getThinkingLevelMetadata, parseThinkingLevel } from "../../thinking";
+import { getConfiguredImageModel } from "../../tools/image-gen";
 import { getTabBarTheme } from "../shared";
 import { DynamicBorder } from "./dynamic-border";
 
@@ -118,6 +119,9 @@ export type ModelSelectorSelection =
 	| {
 			kind: "deleteProfile";
 			profileName: string;
+	  }
+	| {
+			kind: "imageGeneration";
 	  };
 
 interface PendingThinkingChoice {
@@ -183,13 +187,18 @@ interface PresetBrowseRow {
 	kind: "browse";
 }
 
+interface PresetImageGenerationRow {
+	kind: "imageGeneration";
+}
+
 type PresetLandingRow =
 	| PresetGroupRow
 	| PresetProfileRow
 	| PresetCreateRow
 	| PresetCreateUnavailableRow
 	| PresetAlreadySavedRow
-	| PresetBrowseRow;
+	| PresetBrowseRow
+	| PresetImageGenerationRow;
 
 // Stable logical identity for a preset landing row, independent of its current
 // list position. Used to relocate the cursor after the expanded group changes so
@@ -208,6 +217,8 @@ function presetRowIdentity(row: PresetLandingRow): string {
 			return "createUnavailable";
 		case "alreadySaved":
 			return `alreadySaved:${row.profile.name}`;
+		case "imageGeneration":
+			return "imageGeneration";
 	}
 }
 
@@ -334,6 +345,8 @@ export class ModelSelectorComponent extends Container {
 	#selectedActionIndex: number = 0;
 	#pendingThinkingChoice?: PendingThinkingChoice;
 	#selectedThinkingIndex: number = 0;
+	#assignmentState: "idle" | "assigning" = "idle";
+	#closeAfterAssignment = false;
 
 	// Preset landing state
 	#viewMode: ModelSelectorViewMode = "presets";
@@ -962,6 +975,7 @@ export class ModelSelectorComponent extends Container {
 		} else {
 			rows.push({ kind: "createUnavailable", label: "Select a model before creating a custom preset" });
 		}
+		rows.push({ kind: "imageGeneration" });
 		rows.push({ kind: "browse" });
 		return rows;
 	}
@@ -1047,7 +1061,8 @@ export class ModelSelectorComponent extends Container {
 			selected.kind === "browse" ||
 			selected.kind === "create" ||
 			selected.kind === "createUnavailable" ||
-			selected.kind === "alreadySaved"
+			selected.kind === "alreadySaved" ||
+			selected.kind === "imageGeneration"
 		)
 			return;
 		if (this.#expandedPresetProviderId === selected.groupId) return;
@@ -1063,7 +1078,8 @@ export class ModelSelectorComponent extends Container {
 			selected.kind === "browse" ||
 			selected.kind === "create" ||
 			selected.kind === "createUnavailable" ||
-			selected.kind === "alreadySaved"
+			selected.kind === "alreadySaved" ||
+			selected.kind === "imageGeneration"
 		)
 			return;
 		if (this.#expandedPresetProviderId !== selected.groupId) return;
@@ -1162,6 +1178,16 @@ export class ModelSelectorComponent extends Container {
 				this.#listContainer.addChild(new Text(`${prefix}${selected ? theme.fg("accent", label) : label}`, 0, 0));
 				continue;
 			}
+			if (row.kind === "imageGeneration") {
+				const config = getConfiguredImageModel();
+				const current =
+					config && config.provider !== "auto"
+						? `${config.provider}${config.model ? ` (${config.model})` : ""}`
+						: "Auto";
+				const label = `Image Generation: ${current}`;
+				this.#listContainer.addChild(new Text(`${prefix}${selected ? theme.fg("accent", label) : label}`, 0, 0));
+				continue;
+			}
 			if (row.kind === "group") {
 				const authenticated = this.#isPresetGroupUsable(row.profiles);
 				const mark = this.#providerAuthPending ? "…" : authenticated ? "✓" : "✗";
@@ -1469,6 +1495,12 @@ export class ModelSelectorComponent extends Container {
 	}
 
 	handleInput(keyData: string): void {
+		if (this.#assignmentState === "assigning") {
+			if (getKeybindings().matches(keyData, "tui.select.cancel")) {
+				this.#closeAfterAssignment = true;
+			}
+			return;
+		}
 		if (this.#pendingThinkingChoice) {
 			this.#handleThinkingMenuInput(keyData);
 			return;
@@ -1646,6 +1678,10 @@ export class ModelSelectorComponent extends Container {
 			this.#switchToModelMode();
 			return;
 		}
+		if (row.kind === "imageGeneration") {
+			this.#onSelectCallback({ kind: "imageGeneration" });
+			return;
+		}
 		if (row.kind === "group") {
 			// A group is a list of alternative presets; only surface a login hint
 			// when none of its members are usable. A partially-usable group stays
@@ -1833,24 +1869,50 @@ export class ModelSelectorComponent extends Container {
 				? item.selector
 				: formatModelSelectorValue(item.selector, selectedThinkingLevel);
 
-		// Update local state for UI
-		for (const targetRole of roles ?? [role]) {
-			this.#roles[targetRole] = { model: item.model, thinkingLevel: selectedThinkingLevel };
-		}
-
-		// Notify caller (for updating agent state if needed)
-		this.#onSelectCallback({
+		const selection: Extract<ModelSelectorSelection, { kind: "assignment" }> = {
 			kind: "assignment",
 			model: item.model,
 			role,
 			roles,
 			thinkingLevel: selectedThinkingLevel,
 			selector: selectorValue,
-		});
+		};
+		if (this.#isTrackedSingleAssignment(selection)) {
+			void this.#handleTrackedAssignment(selection);
+			return;
+		}
+
+		// Update local state for UI
+		for (const targetRole of roles ?? [role]) {
+			this.#roles[targetRole] = { model: item.model, thinkingLevel: selectedThinkingLevel };
+		}
+
+		// Notify caller (for updating agent state if needed)
+		this.#onSelectCallback(selection);
 
 		// Update list to show new badges
 		this.#updateList();
 	}
+	#isTrackedSingleAssignment(selection: Extract<ModelSelectorSelection, { kind: "assignment" }>): boolean {
+		return selection.role !== null && selection.roles === undefined;
+	}
+
+	async #handleTrackedAssignment(selection: Extract<ModelSelectorSelection, { kind: "assignment" }>): Promise<void> {
+		if (this.#assignmentState !== "idle") return;
+		this.#assignmentState = "assigning";
+		this.#tui.requestRender();
+		try {
+			await Promise.resolve(this.#onSelectCallback(selection));
+		} catch {
+			// The controller reports tracked assignment failures before rethrowing.
+		} finally {
+			this.#assignmentState = "idle";
+			const shouldClose = this.#closeAfterAssignment;
+			this.#closeAfterAssignment = false;
+			if (shouldClose) this.#onCancelCallback();
+			else this.#tui.requestRender();
+		}
+	}
 
 	getSearchInput(): Input {
 		return this.#searchInput;

package/src/modes/components/plan-preview-overlay.ts

@@ -122,7 +122,7 @@ export class PlanPreviewOverlay extends Container {
 				? `${this.#inputKind === "notes" ? "Notes" : `Comment for source line ${this.#sourceLine}`} (Enter save, Esc cancel): ${this.#input.getValue()}`
 				: this.#focus === "sourceSelect"
 					? `Source line ${this.#sourceLine}/${this.lines.length || 1}  j/k:select  c:comment  Esc:done`
-					: `${this.#scroll + 1}-${Math.min(this.#scroll + height, body.length)}/${body.length || 1}  s:source line  n:notes  ${this.options.externalEditorKey ? `${this.options.externalEditorKey.toLowerCase()}:edit  ` : ""}Tab:actions  PgUp/PgDn:page`;
+					: `${this.#scroll + 1}-${Math.min(this.#scroll + height, body.length)}/${body.length || 1}  s:source line  n:notes  ${this.options.externalEditorKey ? `${this.options.externalEditorKey}:edit  ` : ""}Tab:actions  PgUp/PgDn:page`;
 
 		const rendered = [
 			new DynamicBorder().render(width)[0] ?? "",

package/src/modes/components/runtime-mcp-add-wizard.ts

@@ -60,6 +60,7 @@ type WizardStep =
  */
 export interface MCPAddWizardOAuthResult {
 	credentialId: string;
+	tokenEndpoint: string;
 	clientId?: string;
 	clientSecret?: string;
 }
@@ -122,6 +123,7 @@ export class MCPAddWizard extends Container {
 	#onCancelCallback: () => void;
 	#onOAuthCallback:
 		| ((
+				endpointUrl: string,
 				authUrl: string,
 				tokenUrl: string,
 				clientId: string,
@@ -141,6 +143,7 @@ export class MCPAddWizard extends Container {
 		onComplete: (name: string, config: MCPServerConfig, scope: Scope) => void,
 		onCancel: () => void,
 		onOAuth?: (
+			endpointUrl: string,
 			authUrl: string,
 			tokenUrl: string,
 			clientId: string,
@@ -1189,6 +1192,7 @@ export class MCPAddWizard extends Container {
 		try {
 			// Call OAuth handler
 			const oauthResult = await this.#onOAuthCallback(
+				this.#state.url,
 				this.#state.oauthAuthUrl,
 				this.#state.oauthTokenUrl,
 				this.#state.oauthClientId,
@@ -1200,6 +1204,7 @@ export class MCPAddWizard extends Container {
 			// Store credential ID + any dynamically-registered client credentials,
 			// so the final mcp.json entry persists everything needed for refresh.
 			this.#state.oauthCredentialId = oauthResult.credentialId;
+			this.#state.oauthTokenUrl = oauthResult.tokenEndpoint;
 			if (oauthResult.clientId) this.#state.oauthClientId = oauthResult.clientId;
 			if (oauthResult.clientSecret) this.#state.oauthClientSecret = oauthResult.clientSecret;
 

package/src/modes/components/tool-status-header.ts

@@ -3,8 +3,12 @@ import * as fs from "node:fs";
 import { type Component, truncateToWidth, visibleWidth } from "@gajae-code/tui";
 import { formatCount, getProjectDir } from "@gajae-code/utils";
 import { $ } from "bun";
-import type { AppKeybinding, KeybindingsManager } from "../../config/keybindings";
-import { KEYBINDINGS } from "../../config/keybindings";
+import {
+	type AppKeybinding,
+	KEYBINDINGS,
+	type KeybindingsManager,
+	type KeyDisplayContext,
+} from "../../config/keybindings";
 import { settings } from "../../config/settings";
 import type { StatusLinePreset, StatusLineSegmentId, StatusLineSeparatorStyle } from "../../config/settings-schema";
 import { theme } from "../../modes/theme/theme";
@@ -46,6 +50,7 @@ export interface StatusLineSettings {
 	previewHighlightSegment?: StatusLineSegmentId;
 	showHookStatus?: boolean;
 	showSkillHud?: boolean;
+	showActionHints?: boolean;
 	sessionAccent?: boolean;
 	maxRows?: number;
 }
@@ -55,6 +60,7 @@ export interface StatusLineComponentOptions {
 	actionRegistry?: ActionRegistry<void>;
 	getKeybindings?: () => KeybindingsManager;
 	focusDomain?: FocusDomain;
+	keyDisplayContext?: KeyDisplayContext;
 }
 
 export interface StatusLineActionHint {
@@ -92,6 +98,7 @@ export function getAvailableActionHints(
 	getKeybindings: (() => KeybindingsManager) | undefined,
 	width: number,
 	domain: FocusDomain = "composer",
+	keyDisplayContext?: KeyDisplayContext,
 ): StatusLineActionHint[] {
 	if (!actionRegistry || !getKeybindings || width <= 0) return [];
 	const keybindings = getKeybindings();
@@ -108,7 +115,9 @@ export function getAvailableActionHints(
 		if (!(bindingId in KEYBINDINGS)) continue;
 		const keys = keybindings.getKeys(bindingId);
 		if (keys.length === 0) continue;
-		const content = theme.fg("dim", keybindings.getDisplayString(bindingId)) + theme.fg("muted", ` ${action.title}`);
+		const content =
+			theme.fg("dim", keybindings.getDisplayString(bindingId, keyDisplayContext)) +
+			theme.fg("muted", ` ${action.title}`);
 		const nextWidth = visibleWidth(content) + (selected.length === 0 ? 0 : 3);
 		if (used + nextWidth > width) break;
 		selected.push({ id: action.id, content });
@@ -160,6 +169,7 @@ export class StatusLineComponent implements Component {
 	#actionRegistry: ActionRegistry<void> | undefined;
 	#getKeybindings: (() => KeybindingsManager) | undefined;
 	#focusDomain: FocusDomain;
+	#keyDisplayContext: KeyDisplayContext | undefined;
 
 	#resolvedSettingsCache:
 		| (Required<Pick<StatusLineSettings, "leftSegments" | "rightSegments" | "separator" | "segmentOptions">> &
@@ -199,6 +209,7 @@ export class StatusLineComponent implements Component {
 			separator: settings.get("statusLine.separator"),
 			showHookStatus: settings.get("statusLine.showHookStatus"),
 			showSkillHud: settings.get("statusLine.showSkillHud"),
+			showActionHints: settings.get("statusLine.showActionHints"),
 			segmentOptions: settings.getGroup("statusLine").segmentOptions,
 			sessionAccent: settings.get("statusLine.sessionAccent"),
 			maxRows: settings.get("statusLine.maxRows"),
@@ -207,6 +218,7 @@ export class StatusLineComponent implements Component {
 		this.#actionRegistry = options.actionRegistry;
 		this.#getKeybindings = options.getKeybindings;
 		this.#focusDomain = options.focusDomain ?? "composer";
+		this.#keyDisplayContext = options.keyDisplayContext;
 	}
 
 	updateSettings(settings: StatusLineSettings): void {
@@ -791,7 +803,16 @@ export class StatusLineComponent implements Component {
 		}
 
 		const right: string[] = [];
-		const actionHints = getAvailableActionHints(this.#actionRegistry, this.#getKeybindings, width, this.#focusDomain);
+		const actionHints =
+			effectiveSettings.showActionHints === false
+				? []
+				: getAvailableActionHints(
+						this.#actionRegistry,
+						this.#getKeybindings,
+						width,
+						this.#focusDomain,
+						this.#keyDisplayContext,
+					);
 		for (const segId of effectiveSettings.rightSegments) {
 			const rendered = renderSegment(segId, ctx);
 			if (rendered.visible && rendered.content) {

package/src/modes/components/welcome.ts

@@ -1,6 +1,7 @@
 import { type Component, padding, TERMINAL, truncateToWidth, visibleWidth } from "@gajae-code/tui";
 import { APP_NAME } from "@gajae-code/utils";
 import { formatBuildLabel } from "../../build-metadata";
+import { formatKeyHint, type KeyDisplayContext } from "../../config/keybindings";
 import { type ThemeColor, theme } from "../../modes/theme/theme";
 
 export interface RecentSession {
@@ -21,26 +22,28 @@ export interface WelcomeComponentOptions {
 	changelogMarkdown?: string;
 	collapseChangelog?: boolean;
 	buildLabel?: string;
+	keyDisplayContext?: KeyDisplayContext;
 }
 
 const WELCOME_STATIC_RIGHT_ROWS_EXCLUDING_DYNAMIC_SECTIONS = 9;
 const DEFAULT_WHATS_NEW_ROWS = 3;
 const MAX_WHATS_NEW_ROWS = 12;
-const NEWLINE_FLOW_KEY =
-	process.platform === "win32" ? { key: "alt+enter", label: "newline" } : { key: "ctrl+j", label: "newline" };
-
-const FLOW_KEY_ITEMS: ReadonlyArray<{ key: string; label: string }> = [
-	{ key: "/", label: "commands" },
-	{ key: "#", label: "actions" },
-	{ key: "!", label: "shell" },
-	{ key: "$", label: "python" },
-	{ key: "?", label: "keymap" },
-	{ key: "ctrl+l", label: "model" },
-	{ key: "shift+tab", label: "reasoning" },
-	{ key: "tab", label: "complete" },
-	NEWLINE_FLOW_KEY,
-	{ key: "ctrl+c", label: "clear" },
-];
+
+function flowKeyItems(context: KeyDisplayContext): ReadonlyArray<{ key: string; label: string }> {
+	const newlineKey = context.platform === "win32" ? "alt+enter" : "ctrl+j";
+	return [
+		{ key: "/", label: "commands" },
+		{ key: "#", label: "actions" },
+		{ key: "!", label: "shell" },
+		{ key: "$", label: "python" },
+		{ key: "?", label: "keymap" },
+		{ key: "ctrl+l", label: "model" },
+		{ key: "shift+tab", label: "reasoning" },
+		{ key: "tab", label: "complete" },
+		{ key: newlineKey, label: "newline" },
+		{ key: "ctrl+c", label: "clear" },
+	];
+}
 
 /**
  * GJC-native launch surface with compact command affordances, project
@@ -325,7 +328,8 @@ export class WelcomeComponent implements Component {
 	}
 
 	#flowKeyItemText(item: { key: string; label: string }): string {
-		return `${theme.fg("dim", item.key)}${theme.fg("muted", ` ${item.label}`)}`;
+		const context = this.options.keyDisplayContext ?? { platform: process.platform };
+		return `${theme.fg("dim", formatKeyHint(item.key, context))}${theme.fg("muted", ` ${item.label}`)}`;
 	}
 
 	#flowKeyRows(width: number): string[] {
@@ -333,7 +337,7 @@ export class WelcomeComponent implements Component {
 		const separator = ` ${theme.fg("dim", "·")} `;
 		const rows: string[] = [];
 		let current = "";
-		for (const item of FLOW_KEY_ITEMS) {
+		for (const item of flowKeyItems(this.options.keyDisplayContext ?? { platform: process.platform })) {
 			const segment = this.#flowKeyItemText(item);
 			const next = current ? `${current}${separator}${segment}` : segment;
 			if (current && visibleWidth(next) > contentWidth) {
@@ -352,7 +356,7 @@ export class WelcomeComponent implements Component {
 		const rowLimit = Math.max(1, Math.floor(maxRows));
 		if (rows.length <= rowLimit) return rows;
 		if (rowLimit === 1) {
-			const firstItem = FLOW_KEY_ITEMS[0];
+			const firstItem = flowKeyItems(this.options.keyDisplayContext ?? { platform: process.platform })[0];
 			const firstSegment = firstItem ? this.#flowKeyItemText(firstItem) : theme.fg("dim", "keys");
 			return [this.#fitToWidth(` ${firstSegment} ${theme.fg("dim", "· … ")}${theme.bold("/help")}`, width)];
 		}