@sayknow-cli/coding-agent 0.3.6 → 0.3.8

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

@@ -98,6 +98,7 @@ export type ModelSelectorSelection =
 			kind: "assignment";
 			model: Model;
 			role: SkcModelAssignmentTargetId | null;
+			roles?: readonly SkcModelAssignmentTargetId[];
 			thinkingLevel?: ThinkingLevel;
 			selector?: string;
 	  }
@@ -397,7 +398,7 @@ export class ModelSelectorComponent extends Container {
 		// Create search input
 		this.#searchInput = new Input();
 		if (initialSearchInput) {
-			this.#searchInput.setValue(initialSearchInput);
+			this.#setSearchInputValue(initialSearchInput);
 		}
 		this.#searchInput.onSubmit = () => {
 			const selectedItem = this.#getSelectedItem();
@@ -1012,6 +1013,10 @@ export class ModelSelectorComponent extends Container {
 		if (!this.#relocatePresetCursor(targetIdentity)) this.#clampPresetCursor();
 	}
 
+	#setSearchInputValue(value: string): void {
+		this.#searchInput.setValue(value);
+	}
+
 	#switchToModelMode(seed?: string): void {
 		this.#viewMode = "models";
 		this.#expandedPresetProviderId = undefined;
@@ -1021,16 +1026,56 @@ export class ModelSelectorComponent extends Container {
 		this.#presetLoginHint = undefined;
 		this.#activeTabIndex = 0;
 		this.#selectedIndex = 0;
-		this.#searchInput.setValue(seed ?? this.#searchInput.getValue());
+		this.#setSearchInputValue(seed ?? this.#searchInput.getValue());
 		this.#updateTabBar();
 		this.#filterModels(this.#searchInput.getValue());
 	}
 
+	/**
+	 * "What is this session running right now" summary for the preset landing
+	 * header: active preset (when one is applied), the effective current model
+	 * and thinking level, and one line per assigned role (default, executor,
+	 * planner, critic, architect).
+	 */
+	#formatCurrentSessionLines(): string[] {
+		const lines: string[] = [];
+		const parts: string[] = [];
+		if (this.#activeModelProfile) {
+			const profile = this.#getProfileByName(this.#activeModelProfile);
+			const displayName = profile ? getModelProfilePresentation(profile).displayName : this.#activeModelProfile;
+			parts.push(`preset ${theme.fg("accent", displayName)}`);
+		}
+		if (this.#currentModel) {
+			parts.push(this.#formatAssignedModelLabel(this.#currentModel, this.#currentThinkingLevel));
+		}
+		if (parts.length > 0) lines.push(theme.fg("muted", `Current: ${parts.join(" · ")}`));
+		for (const role of PROFILE_ROLE_PREVIEW_ORDER) {
+			const assigned = this.#roles[role];
+			if (!assigned) continue;
+			const label = SKC_MODEL_ASSIGNMENT_TARGETS[role].tag ?? role.toUpperCase();
+			lines.push(
+				theme.fg("dim", `  ${label}: ${this.#formatAssignedModelLabel(assigned.model, assigned.thinkingLevel)}`),
+			);
+		}
+		return lines;
+	}
+
+	#formatAssignedModelLabel(model: Model, thinkingLevel: ThinkingLevel | undefined): string {
+		let label = `${model.provider}/${model.id}`;
+		if (thinkingLevel && thinkingLevel !== ThinkingLevel.Inherit) {
+			label += ` (${getThinkingLevelMetadata(thinkingLevel).label})`;
+		}
+		return label;
+	}
+
 	#renderPresetLanding(): void {
 		this.#headerContainer.clear();
 		this.#tabBar = null;
 		this.#listContainer.clear();
 		this.#headerContainer.addChild(new Text(theme.fg("accent", t("modelSelector.presets")), 0, 0));
+		for (const line of this.#formatCurrentSessionLines()) {
+			this.#headerContainer.addChild(new Text(line, 0, 0));
+		}
 		const rows = this.#getPresetRows();
 		for (let i = 0; i < rows.length; i++) {
 			const row = rows[i];
@@ -1060,17 +1105,23 @@ export class ModelSelectorComponent extends Container {
 			if (row.kind === "group") {
 				const authenticated = this.#isPresetGroupUsable(row.profiles);
 				const mark = this.#providerAuthPending ? "…" : authenticated ? "✓" : "✗";
+				const containsActive =
+					this.#activeModelProfile !== undefined &&
+					row.profiles.some(profile => profile.name === this.#activeModelProfile);
 				const label = `${mark} ${row.groupId}`;
 				const renderedLabel = selected ? theme.fg("accent", label) : authenticated ? label : theme.fg("dim", label);
-				this.#listContainer.addChild(new Text(`${prefix}${renderedLabel}`, 0, 0));
+				const activeSuffix = containsActive ? theme.fg("muted", " (current)") : "";
+				this.#listContainer.addChild(new Text(`${prefix}${renderedLabel}${activeSuffix}`, 0, 0));
 				continue;
 			}
 			const presentation = getModelProfilePresentation(row.profile);
 			const authenticated = this.#isPresetAuthenticated(row.profile);
 			const mark = this.#providerAuthPending ? "…" : authenticated ? "✓" : "✗";
+			const isActive = row.profile.name === this.#activeModelProfile;
 			const label = `  ${mark} ${presentation.displayName}`;
 			const renderedLabel = selected ? theme.fg("accent", label) : authenticated ? label : theme.fg("dim", label);
-			this.#listContainer.addChild(new Text(`${prefix}${renderedLabel}`, 0, 0));
+			const activeSuffix = isActive ? theme.fg("muted", " (current)") : "";
+			this.#listContainer.addChild(new Text(`${prefix}${renderedLabel}${activeSuffix}`, 0, 0));
 		}
 		if (this.#presetLoginHint) {
 			this.#listContainer.addChild(new Spacer(1));
@@ -1324,7 +1375,11 @@ export class ModelSelectorComponent extends Container {
 		for (let i = 0; i < actionCount; i++) {
 			const prefix = i === this.#selectedActionIndex ? theme.fg("accent", `${theme.nav.cursor} `) : "  ";
 			const role = SKC_MODEL_ASSIGNMENT_TARGET_IDS[i];
-			const label = `Set as ${SKC_MODEL_ASSIGNMENT_TARGETS[role].tag ?? role.toUpperCase()} (${SKC_MODEL_ASSIGNMENT_TARGETS[role].name})`;
+			const label = role
+				? `Set as ${SKC_MODEL_ASSIGNMENT_TARGETS[role].tag ?? role.toUpperCase()} (${SKC_MODEL_ASSIGNMENT_TARGETS[role].name})`
+				: i === SKC_MODEL_ASSIGNMENT_TARGET_IDS.length
+					? "Set for all role agents"
+					: "Set for all targets";
 			this.#listContainer.addChild(
 				new Text(`${prefix}${i === this.#selectedActionIndex ? theme.fg("accent", label) : label}`, 0, 0),
 			);
@@ -1361,7 +1416,7 @@ export class ModelSelectorComponent extends Container {
 		return this.#roles[role]?.thinkingLevel ?? ThinkingLevel.Inherit;
 	}
 	#getActionCount(_model: Model): number {
-		return SKC_MODEL_ASSIGNMENT_TARGET_IDS.length;
+		return SKC_MODEL_ASSIGNMENT_TARGET_IDS.length + 2;
 	}
 
 	#getSelectedItem(): ModelItem | CanonicalModelItem | undefined {
@@ -1541,7 +1596,17 @@ export class ModelSelectorComponent extends Container {
 				if (this.#startLoginForMissing(missing)) return;
 				this.#presetLoginHint = `Run ${missing.map(provider => `/login ${provider}`).join(", ")}`;
 				this.#renderPresetLanding();
+				return;
 			}
+			// Enter toggles a usable group's expansion so drilling into presets
+			// works without reaching for the arrow keys (right/left still work).
+			if (this.#expandedPresetProviderId === row.groupId) {
+				this.#collapseSelectedPresetProvider();
+			} else {
+				this.#expandSelectedPresetProvider();
+			}
+			this.#presetLoginHint = undefined;
+			this.#renderPresetLanding();
 			return;
 		}
 		const missing = this.#getMissingProviders(row.profile);
@@ -1599,7 +1664,15 @@ export class ModelSelectorComponent extends Container {
 		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return") || keyData === "\n") {
 			this.#pendingActionItem = undefined;
 			const role = SKC_MODEL_ASSIGNMENT_TARGET_IDS[this.#selectedActionIndex];
-			if (role) this.#handleSelect(item, role);
+			if (role) {
+				this.#handleSelect(item, role);
+				return;
+			}
+			const roles =
+				this.#selectedActionIndex === SKC_MODEL_ASSIGNMENT_TARGET_IDS.length
+					? (["executor", "architect", "planner", "critic"] as const)
+					: SKC_MODEL_ASSIGNMENT_TARGET_IDS;
+			this.#handleSelect(item, "default", undefined, roles);
 			return;
 		}
 		if (getKeybindings().matches(keyData, "tui.select.cancel")) {
@@ -1638,17 +1711,34 @@ export class ModelSelectorComponent extends Container {
 			this.#updateList();
 		}
 	}
+	#getInitialThinkingChoiceIndex(item: ModelItem | CanonicalModelItem, levels: ThinkingLevel[]): number {
+		const preferred = this.#getPreferredThinkingLevel(item);
+		if (preferred && preferred !== ThinkingLevel.Inherit) {
+			const index = levels.indexOf(preferred);
+			if (index !== -1) return index;
+		}
+		return 0;
+	}
+
+	#getPreferredThinkingLevel(item: ModelItem | CanonicalModelItem): ThinkingLevel | undefined {
+		if (item.thinkingLevel && item.thinkingLevel !== ThinkingLevel.Inherit) {
+			return item.thinkingLevel;
+		}
+		return undefined;
+	}
 
 	#handleSelect(
 		item: ModelItem | CanonicalModelItem,
 		role: SkcModelAssignmentTargetId | null,
 		thinkingLevel?: ThinkingLevel,
+		roles?: readonly SkcModelAssignmentTargetId[],
 	): void {
 		const itemThinkingLevel = thinkingLevel ?? item.thinkingLevel;
 		const hasExplicitThinkingChoice = thinkingLevel !== undefined || item.explicitThinkingLevel === true;
-		if (!hasExplicitThinkingChoice && requiresExplicitThinkingChoice(item.model)) {
-			this.#pendingThinkingChoice = { item, role, levels: getSelectableThinkingLevels(item.model) };
-			this.#selectedThinkingIndex = 0;
+		if (!hasExplicitThinkingChoice && requiresExplicitThinkingChoice(item.model, role)) {
+			const levels = getSelectableThinkingLevels(item.model);
+			this.#pendingThinkingChoice = { item, role, levels };
+			this.#selectedThinkingIndex = this.#getInitialThinkingChoiceIndex(item, levels);
 			this.#updateList();
 			return;
 		}
@@ -1666,17 +1756,23 @@ export class ModelSelectorComponent extends Container {
 		}
 
 		const selectedThinkingLevel = itemThinkingLevel ?? this.#getCurrentRoleThinkingLevel(role);
-		const selectorValue =
-			role === "default" ? item.selector : formatModelSelectorValue(item.selector, selectedThinkingLevel);
+		const selectorValue = roles
+			? formatModelSelectorValue(item.selector, selectedThinkingLevel)
+			: role === "default"
+				? item.selector
+				: formatModelSelectorValue(item.selector, selectedThinkingLevel);
 
 		// Update local state for UI
-		this.#roles[role] = { model: item.model, thinkingLevel: selectedThinkingLevel };
+		for (const targetRole of roles ?? [role]) {
+			this.#roles[targetRole] = { model: item.model, thinkingLevel: selectedThinkingLevel };
+		}
 
 		// Notify caller (for updating agent state if needed)
 		this.#onSelectCallback({
 			kind: "assignment",
 			model: item.model,
 			role,
+			roles,
 			thinkingLevel: selectedThinkingLevel,
 			selector: selectorValue,
 		});
@@ -1691,10 +1787,17 @@ export class ModelSelectorComponent extends Container {
 	async __testSelectProfile(profileName: string, setDefault: boolean): Promise<void> {
 		await this.#onSelectCallback({ kind: "profile", profileName, setDefault });
 	}
+	async __testSelectAssignment(
+		selection: Omit<Extract<ModelSelectorSelection, { kind: "assignment" }>, "kind">,
+	): Promise<void> {
+		await this.#onSelectCallback({ kind: "assignment", ...selection });
+	}
 }
 
-function requiresExplicitThinkingChoice(model: Model): boolean {
-	return model.reasoning === true && (model.provider === "openai" || model.provider === "openai-codex");
+function requiresExplicitThinkingChoice(model: Model, role: SkcModelAssignmentTargetId | null): boolean {
+	if (model.reasoning !== true) return false;
+	if (model.provider === "openai" || model.provider === "openai-codex") return true;
+	return role !== null && SKC_MODEL_ASSIGNMENT_TARGETS[role].settingsPath === "task.agentModelOverrides";
 }
 
 function getSelectableThinkingLevels(model: Model): ThinkingLevel[] {

package/src/modes/components/queued-message-selector.ts

@@ -0,0 +1,92 @@
+import { Container, matchesKey, type SelectItem, SelectList, Spacer, Text } from "@sayknow-cli/tui";
+import type { QueuedMessageEditEntry } from "../../session/agent-session";
+import { getSelectListTheme, theme } from "../theme/theme";
+import { DynamicBorder } from "./dynamic-border";
+
+const MAX_VISIBLE_QUEUED_MESSAGES = 8;
+const RAW_UP = "\x1b[A";
+const RAW_DOWN = "\x1b[B";
+type QueuedMessageMoveDirection = "up" | "down";
+
+export type { QueuedMessageMoveDirection };
+
+export class QueuedMessageSelectorComponent extends Container {
+	#selectList: SelectList;
+	#selectedEntry: QueuedMessageEditEntry | undefined;
+	#selectedIndex = 0;
+	#onDelete: (entry: QueuedMessageEditEntry, selectedIndex: number) => void;
+	#onMove: (entry: QueuedMessageEditEntry, selectedIndex: number, direction: QueuedMessageMoveDirection) => void;
+
+	constructor(
+		entries: QueuedMessageEditEntry[],
+		onSelect: (entry: QueuedMessageEditEntry) => void,
+		onDelete: (entry: QueuedMessageEditEntry, selectedIndex: number) => void,
+		onMove: (entry: QueuedMessageEditEntry, selectedIndex: number, direction: QueuedMessageMoveDirection) => void,
+		onCancel: () => void,
+		options?: { selectedIndex?: number },
+	) {
+		super();
+
+		this.#onDelete = onDelete;
+		this.#onMove = onMove;
+		const byId = new Map(entries.map(entry => [entry.id, entry]));
+		this.#selectedIndex = Math.max(0, Math.min(options?.selectedIndex ?? 0, entries.length - 1));
+		this.#selectedEntry = entries[this.#selectedIndex];
+		const items: SelectItem[] = entries.map((entry, index) => ({
+			value: entry.id,
+			label: `${entry.label} ${index + 1}`,
+			description: entry.text,
+			hint: "Enter edit · Del remove · Ctrl+↑/↓ move",
+		}));
+
+		this.addChild(new Spacer(1));
+		this.addChild(new Text(theme.bold("Queued messages"), 1, 0));
+		this.addChild(new Text(theme.fg("muted", "Enter edit · Del remove · Ctrl+↑/↓ move · Esc cancel"), 1, 0));
+		this.addChild(new Spacer(1));
+		this.addChild(new DynamicBorder());
+
+		this.#selectList = new SelectList(items, MAX_VISIBLE_QUEUED_MESSAGES, getSelectListTheme());
+		this.#selectList.onSelect = item => {
+			const entry = byId.get(item.value);
+			if (entry) onSelect(entry);
+		};
+		this.#selectList.onSelectionChange = item => {
+			const index = entries.findIndex(entry => entry.id === item.value);
+			this.#selectedIndex = index === -1 ? this.#selectedIndex : index;
+			this.#selectedEntry = byId.get(item.value);
+		};
+		this.#selectList.setSelectedIndex(this.#selectedIndex);
+		this.#selectList.onCancel = onCancel;
+
+		this.addChild(this.#selectList);
+		this.addChild(new DynamicBorder());
+	}
+
+	handleInput(keyData: string): void {
+		if (matchesKey(keyData, "alt+up")) {
+			this.#selectList.handleInput(RAW_UP);
+			return;
+		}
+		if (matchesKey(keyData, "alt+down")) {
+			this.#selectList.handleInput(RAW_DOWN);
+			return;
+		}
+		if (matchesKey(keyData, "ctrl+up") || matchesKey(keyData, "ctrl+shift+up")) {
+			if (this.#selectedEntry) this.#onMove(this.#selectedEntry, this.#selectedIndex, "up");
+			return;
+		}
+		if (matchesKey(keyData, "ctrl+down") || matchesKey(keyData, "ctrl+shift+down")) {
+			if (this.#selectedEntry) this.#onMove(this.#selectedEntry, this.#selectedIndex, "down");
+			return;
+		}
+		if (matchesKey(keyData, "delete")) {
+			if (this.#selectedEntry) this.#onDelete(this.#selectedEntry, this.#selectedIndex);
+			return;
+		}
+		this.#selectList.handleInput(keyData);
+	}
+
+	getSelectList(): SelectList {
+		return this.#selectList;
+	}
+}

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

@@ -50,6 +50,14 @@ class SessionList implements Component {
 		};
 	}
 
+	#clampSelectedIndex(): void {
+		if (this.#filteredSessions.length === 0) {
+			this.#selectedIndex = 0;
+			return;
+		}
+		this.#selectedIndex = Math.max(0, Math.min(this.#selectedIndex, this.#filteredSessions.length - 1));
+	}
+
 	#filterSessions(query: string): void {
 		this.#filteredSessions = fuzzyFilter(this.allSessions, query, session => {
 			const parts = [
@@ -62,7 +70,7 @@ class SessionList implements Component {
 			];
 			return parts.filter(Boolean).join(" ");
 		});
-		this.#selectedIndex = Math.min(this.#selectedIndex, Math.max(0, this.#filteredSessions.length - 1));
+		this.#clampSelectedIndex();
 	}
 
 	removeSession(sessionPath: string): void {
@@ -71,10 +79,6 @@ class SessionList implements Component {
 		this.allSessions.splice(index, 1);
 		// Re-filter to update filteredSessions
 		this.#filterSessions(this.#searchInput.getValue());
-		// Adjust selectedIndex if we deleted the last item or beyond
-		if (this.#selectedIndex >= this.#filteredSessions.length) {
-			this.#selectedIndex = Math.max(0, this.#filteredSessions.length - 1);
-		}
 	}
 
 	invalidate(): void {
@@ -182,6 +186,12 @@ class SessionList implements Component {
 	}
 
 	handleInput(keyData: string): void {
+		const moveSelection = (delta: number): void => {
+			if (this.#filteredSessions.length === 0) return;
+			this.#selectedIndex += delta;
+			this.#clampSelectedIndex();
+		};
+
 		// Delete key - request delete confirmation from parent
 		if (matchesKey(keyData, "delete")) {
 			const selected = this.#filteredSessions[this.#selectedIndex];
@@ -193,22 +203,22 @@ class SessionList implements Component {
 
 		// Up arrow
 		if (matchesKey(keyData, "up")) {
-			this.#selectedIndex = Math.max(0, this.#selectedIndex - 1);
+			moveSelection(-1);
 			return;
 		}
 		// Down arrow
 		if (matchesKey(keyData, "down")) {
-			this.#selectedIndex = Math.min(this.#filteredSessions.length - 1, this.#selectedIndex + 1);
+			moveSelection(1);
 			return;
 		}
 		// Page up - jump up by maxVisible items
 		if (matchesKey(keyData, "pageUp")) {
-			this.#selectedIndex = Math.max(0, this.#selectedIndex - this.#maxVisible);
+			moveSelection(-this.#maxVisible);
 			return;
 		}
 		// Page down - jump down by maxVisible items
 		if (matchesKey(keyData, "pageDown")) {
-			this.#selectedIndex = Math.min(this.#filteredSessions.length - 1, this.#selectedIndex + this.#maxVisible);
+			moveSelection(this.#maxVisible);
 			return;
 		}
 		// Enter

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

@@ -80,8 +80,6 @@ class TextInputSubmenu extends Container {
 		this.#input = new Input();
 		if (currentValue) {
 			this.#input.setValue(currentValue);
-			// Move cursor to end of pre-filled value (ctrl+e = cursorLineEnd).
-			this.#input.handleInput("\x05");
 		}
 		this.#input.onSubmit = value => {
 			this.onSubmit(value); // empty string clears the setting
@@ -184,6 +182,7 @@ class SelectSubmenu extends Container {
 	}
 }
 const STATUS_LINE_CUSTOM_EDITOR_ID = "statusLine.customEditor";
+const STATUS_LINE_USAGE_MODE_ID = "statusLine.usageMode";
 const PUBLIC_STATUS_SEGMENTS = ALL_SEGMENT_IDS.filter(id => id !== "pi");
 
 type StatusLineDraft = Required<
@@ -199,6 +198,8 @@ const TIME_FORMAT_OPTIONS: SelectItem[] = [
 	{ value: "24h", label: "24h" },
 	{ value: "12h", label: "12h" },
 ];
+const USAGE_MODE_VALUES = ["used", "remaining"] as const;
+type UsageMode = (typeof USAGE_MODE_VALUES)[number];
 
 function cloneSegmentOptions(options: StatusLineSegmentOptions | undefined): StatusLineSegmentOptions {
 	return mergeSegmentOptions(undefined, options);
@@ -238,6 +239,25 @@ function effectiveCustomSegments(
 	};
 }
 
+function getSavedUsageMode(): UsageMode {
+	const segmentOptions = settings.get("statusLine.segmentOptions") as StatusLineSegmentOptions;
+	return segmentOptions.usage?.mode === "remaining" ? "remaining" : "used";
+}
+
+function setSavedUsageMode(mode: string): StatusLineSegmentOptions {
+	const normalizedMode: UsageMode = mode === "remaining" ? "remaining" : "used";
+	const segmentOptions = settings.get("statusLine.segmentOptions") as StatusLineSegmentOptions;
+	const nextOptions: StatusLineSegmentOptions = {
+		...segmentOptions,
+		usage: {
+			...(segmentOptions.usage ?? {}),
+			mode: normalizedMode,
+		},
+	};
+	settings.set("statusLine.segmentOptions", nextOptions as Record<string, unknown>);
+	return nextOptions;
+}
+
 function statusSegmentLabel(id: StatusLineSegmentId): string {
 	return id.replace(/_/g, " ");
 }
@@ -649,6 +669,8 @@ export interface SettingsRuntimeContext {
 	thinkingLevel: ThinkingLevel | undefined;
 	/** Available themes */
 	availableThemes: string[];
+	/** Available model profile names (from the model registry) */
+	availableModelProfiles: string[];
 	/** Working directory for plugins tab */
 	cwd: string;
 }
@@ -662,6 +684,7 @@ export interface StatusLinePreviewSettings {
 	segmentOptions?: StatusLineSegmentOptions;
 	previewHighlightSegment?: StatusLineSegmentId;
 	sessionAccent?: boolean;
+	maxRows?: number;
 }
 
 export interface SettingsCallbacks {
@@ -840,6 +863,8 @@ export class SettingsSelectorComponent extends Container {
 			});
 		} else if (def.path === "theme.dark" || def.path === "theme.light") {
 			options = this.context.availableThemes.map(t => ({ value: t, label: t }));
+		} else if (def.path === "modelProfile.default") {
+			options = this.context.availableModelProfiles.map(p => ({ value: p, label: p }));
 		}
 		if (def.path === "statusLine.preset") {
 			options = options.filter(option => option.value !== "custom");
@@ -858,9 +883,7 @@ export class SettingsSelectorComponent extends Container {
 			};
 		} else if (def.path === "statusLine.preset") {
 			onPreview = value => {
-				const presetDef = getPreset(
-					value as "default" | "minimal" | "compact" | "full" | "nerd" | "ascii" | "custom",
-				);
+				const presetDef = getPreset(value as StatusLinePreset);
 				this.callbacks.onStatusLinePreview?.({
 					preset: value as StatusLinePreset,
 					leftSegments: presetDef.leftSegments,
@@ -904,6 +927,18 @@ export class SettingsSelectorComponent extends Container {
 				this.callbacks.onStatusLinePreview?.({ separator, previewHighlightSegment: undefined });
 				this.#updateStatusPreview();
 			};
+		} else if (def.path === "statusLine.maxRows") {
+			onPreview = value => {
+				this.callbacks.onStatusLinePreview?.({ maxRows: Number(value) });
+				this.#updateStatusPreview();
+			};
+			onPreviewCancel = () => {
+				this.callbacks.onStatusLinePreview?.({
+					maxRows: settings.get("statusLine.maxRows"),
+					previewHighlightSegment: undefined,
+				});
+				this.#updateStatusPreview();
+			};
 		}
 
 		// Provide status line preview for theme selection
@@ -998,6 +1033,16 @@ export class SettingsSelectorComponent extends Container {
 			10,
 			getSettingsListTheme(),
 			(id, newValue) => {
+				if (id === STATUS_LINE_USAGE_MODE_ID) {
+					const segmentOptions = setSavedUsageMode(newValue);
+					this.callbacks.onChange("statusLine.segmentOptions", segmentOptions);
+					if (tabId === "appearance") {
+						this.#triggerStatusLinePreview();
+					}
+					this.#refreshCurrentTabItems(defs);
+					return;
+				}
+
 				const def = defs.find(d => d.path === id);
 				if (!def) return;
 
@@ -1055,6 +1100,20 @@ export class SettingsSelectorComponent extends Container {
 			} else {
 				items.push(customEditorItem);
 			}
+			{
+				const usageModeItem: SettingItem = {
+					id: STATUS_LINE_USAGE_MODE_ID,
+					label: "Status Line Usage Mode",
+					description: "Show provider quota in the status line as used or remaining.",
+					currentValue: getSavedUsageMode(),
+					values: [...USAGE_MODE_VALUES],
+				};
+				if (presetIndex >= 0) {
+					items.splice(presetIndex + 2, 0, usageModeItem);
+				} else {
+					items.push(usageModeItem);
+				}
+			}
 		}
 		return items;
 	}

package/src/modes/components/skill-message.ts

@@ -13,18 +13,20 @@ import {
 import { getMarkdownTheme, theme } from "../../modes/theme/theme";
 import type { CustomMessage, SkillPromptDetails } from "../../session/messages";
 
-const COLLAPSED_ARGS_PREVIEW_WIDTH = 96;
+const DEFAULT_COLLAPSED_ARGS_PREVIEW_WIDTH = 96;
 const COLLAPSED_ARGS_PREVIEW_LINES = 6;
+const SKILL_BOX_HORIZONTAL_PADDING = 1;
 export class SkillMessageComponent extends Container {
 	#box: Box;
 	#contentComponent?: Component;
 	#expanded = false;
+	#argsPreviewWidth = DEFAULT_COLLAPSED_ARGS_PREVIEW_WIDTH;
 
 	constructor(private readonly message: CustomMessage<SkillPromptDetails>) {
 		super();
 		this.addChild(new Spacer(1));
 
-		this.#box = new Box(1, 1, t => theme.bg("customMessageBg", t));
+		this.#box = new Box(SKILL_BOX_HORIZONTAL_PADDING, 1, t => theme.bg("customMessageBg", t));
 		this.#rebuild();
 	}
 
@@ -40,6 +42,15 @@ export class SkillMessageComponent extends Container {
 		this.#rebuild();
 	}
 
+	override render(width: number): string[] {
+		const contentWidth = Math.max(1, width - SKILL_BOX_HORIZONTAL_PADDING * 2);
+		if (this.#argsPreviewWidth !== contentWidth) {
+			this.#argsPreviewWidth = contentWidth;
+			this.#rebuild();
+		}
+		return super.render(width);
+	}
+
 	#rebuild(): void {
 		if (this.#contentComponent) {
 			this.removeChild(this.#contentComponent);
@@ -57,7 +68,7 @@ export class SkillMessageComponent extends Container {
 		// Collapsed view keeps args readable without exposing the full prompt body.
 		// Each visual line is bounded, but multi-line arguments remain multi-line so
 		// the invocation context is not mistaken for a one-line truncated payload.
-		const argsPreview = args ? this.#formatArgsPreview(args) : [];
+		const argsPreview = args ? this.#formatArgsPreview(args, this.#argsPreviewWidth) : [];
 		const header = `${theme.fg("customMessageLabel", theme.bold("[skill]"))} ${theme.fg("customMessageText", name)}`;
 		this.#box.addChild(new Text(header, 0, 0));
 		if (argsPreview.length > 0) {
@@ -111,19 +122,19 @@ export class SkillMessageComponent extends Container {
 		this.#box.addChild(this.#contentComponent);
 	}
 
-	#formatArgsPreview(args: string): string[] {
+	#formatArgsPreview(args: string, width: number): string[] {
 		const preview: string[] = [];
 		let omitted = false;
 		const sourceLines = replaceTabs(args).split(/\r?\n/);
 		for (let index = 0; index < sourceLines.length; index += 1) {
 			const sourceLine = sourceLines[index]?.trimEnd() ?? "";
-			const wrapped = wrapTextWithAnsi(sourceLine.length > 0 ? sourceLine : " ", COLLAPSED_ARGS_PREVIEW_WIDTH);
+			const wrapped = wrapTextWithAnsi(sourceLine.length > 0 ? sourceLine : " ", width);
 			for (const line of wrapped.length > 0 ? wrapped : [""]) {
 				if (preview.length >= COLLAPSED_ARGS_PREVIEW_LINES) {
 					omitted = true;
 					break;
 				}
-				preview.push(truncateToWidth(line, COLLAPSED_ARGS_PREVIEW_WIDTH));
+				preview.push(truncateToWidth(line, width));
 			}
 			if (omitted) break;
 		}
@@ -132,10 +143,7 @@ export class SkillMessageComponent extends Container {
 			omitted ||= replaceTabs(args).trimEnd().length > visibleSource.trimEnd().length;
 		}
 		if (omitted && preview.length > 0) {
-			preview[preview.length - 1] = truncateToWidth(
-				`${preview[preview.length - 1]} …`,
-				COLLAPSED_ARGS_PREVIEW_WIDTH,
-			);
+			preview[preview.length - 1] = truncateToWidth(`${preview[preview.length - 1]} …`, width);
 		}
 		return preview;
 	}

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

@@ -24,6 +24,17 @@ export const STATUS_LINE_PRESETS: Record<StatusLinePreset, PresetDef> = {
 		},
 	},
 
+	"default-usage": {
+		leftSegments: ["model", "mode", "git", "pr", "path"],
+		rightSegments: ["session_name", "jobs", "token_rate", "usage", "context_pct", "cost"],
+		separator: "slash",
+		segmentOptions: {
+			model: { showThinkingLevel: true },
+			path: { abbreviate: true, maxLength: 32, stripWorkPrefix: true },
+			git: { showBranch: true, showStaged: true, showUnstaged: true, showUntracked: true },
+		},
+	},
+
 	minimal: {
 		leftSegments: ["path", "git"],
 		rightSegments: ["session_name", "jobs", "mode", "context_pct"],