@gajae-code/coding-agent 0.7.8 → 0.7.10

package/src/modes/components/custom-model-preset-wizard.ts

@@ -1,11 +1,9 @@
 import { Container, Input, matchesKey, Spacer, Text, TruncatedText } from "@gajae-code/tui";
+import { MODEL_PROFILE_NAME_PATTERN } from "../../config/model-registry";
 import type { ModelProfileConfig } from "../../config/models-config-schema";
 import { theme } from "../theme/theme";
 import { matchesAppInterrupt } from "../utils/keybinding-matchers";
 import { DynamicBorder } from "./dynamic-border";
-
-const PROFILE_NAME_PATTERN = /^[a-z0-9][a-z0-9._-]*$/;
-
 export interface CustomModelPresetWizardSubmit {
 	name: string;
 	profile: ModelProfileConfig;
@@ -113,7 +111,7 @@ export class CustomModelPresetWizardComponent extends Container {
 			this.#onRender();
 			return;
 		}
-		if (!PROFILE_NAME_PATTERN.test(value)) {
+		if (!MODEL_PROFILE_NAME_PATTERN.test(value)) {
 			this.#lastError = "Preset id must use lowercase letters, numbers, dots, underscores, or hyphens.";
 			this.#renderStep();
 			this.#onRender();

package/src/modes/components/hook-editor.ts

@@ -96,14 +96,17 @@ export class HookEditorComponent extends Container {
 			return;
 		}
 
-		// Submit on plain Enter encodings. On Windows, raw LF is reserved for terminal
-		// newline mappings (Shift+Enter/Ctrl+J/Ctrl+Enter); plain Enter reports CR.
-		if (!isWindowsRawLfNewlineInput(keyData) && (matchesKey(keyData, "enter") || matchesKey(keyData, "return"))) {
+		// Submit on Enter and Ctrl+Enter encodings. On Windows, raw LF is reserved for
+		// terminal newline mappings (Shift+Enter/Ctrl+J); plain Enter reports CR.
+		if (
+			!isWindowsRawLfNewlineInput(keyData) &&
+			(matchesKey(keyData, "enter") || matchesKey(keyData, "return") || matchesKey(keyData, "ctrl+enter"))
+		) {
 			this.#onSubmitCallback(this.#editor.getText());
 			return;
 		}
 
-		// Let Editor handle modified newline-producing variants (Shift+Enter, Ctrl+Enter, Alt+Enter, etc.)
+		// Let Editor handle newline-producing variants (Shift+Enter, Ctrl+J, Alt+Enter, etc.)
 		this.#editor.handleInput(keyData);
 	}
 

package/src/modes/components/hook-input.ts

@@ -8,6 +8,7 @@ import { CountdownTimer } from "./countdown-timer";
 import { DynamicBorder } from "./dynamic-border";
 
 export interface HookInputOptions {
+	initialValue?: string;
 	tui?: TUI;
 	timeout?: number;
 	onTimeout?: () => void;
@@ -54,6 +55,9 @@ export class HookInputComponent extends Container {
 		}
 
 		this.#input = new Input();
+		if (opts?.initialValue) {
+			this.#input.setValue(opts.initialValue);
+		}
 		this.addChild(this.#input);
 		this.addChild(new Spacer(1));
 		this.addChild(new Text(theme.fg("dim", "enter submit  esc cancel"), 1, 0));

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

@@ -58,6 +58,11 @@ export interface HookSelectorOptions {
 		optionLabel: string;
 		onSubmit: (text: string) => void;
 	};
+	clarificationInput?: {
+		optionLabel: string;
+		onSubmit: (text: string) => void;
+		allowEmpty?: boolean;
+	};
 	/**
 	 * Autocomplete provider for the inline custom-input editor. When present,
 	 * the "Other (type your own)" editor gains the same `@` file-link and `/`
@@ -338,6 +343,8 @@ export class HookSelectorComponent extends Container {
 	#outline: boolean;
 	#scrollTitleRows: number | undefined;
 	#customInput: { optionLabel: string; onSubmit: (text: string) => void } | undefined;
+	#clarificationInput: { optionLabel: string; onSubmit: (text: string) => void; allowEmpty?: boolean } | undefined;
+	#activeInput: { onSubmit: (text: string) => void; allowEmpty?: boolean } | undefined;
 	#inputArea: Container;
 	#inlineEditor: Editor | undefined;
 	#helpTextComponent: Text;
@@ -365,6 +372,7 @@ export class HookSelectorComponent extends Container {
 		this.#wrapFocused = opts?.wrapFocused === true;
 		this.#outline = opts?.outline === true;
 		this.#customInput = opts?.customInput;
+		this.#clarificationInput = opts?.clarificationInput;
 		this.#tui = opts?.tui;
 		this.#autocompleteProvider = opts?.autocompleteProvider;
 
@@ -500,7 +508,11 @@ export class HookSelectorComponent extends Container {
 			const selected = this.#options[this.#selectedIndex];
 			if (!selected) return;
 			if (this.#customInput && selected === this.#customInput.optionLabel) {
-				this.#enterInputMode();
+				this.#enterInputMode(this.#customInput);
+				return;
+			}
+			if (this.#clarificationInput && selected === this.#clarificationInput.optionLabel) {
+				this.#enterInputMode(this.#clarificationInput);
 				return;
 			}
 			this.#onSelectCallback(selected);
@@ -535,14 +547,19 @@ export class HookSelectorComponent extends Container {
 			return;
 		}
 		if (matchesKey(keyData, "enter") || matchesKey(keyData, "return")) {
-			this.#customInput?.onSubmit(editor.getExpandedText());
+			const text = editor.getExpandedText();
+			if (this.#activeInput?.allowEmpty === false && text.trim() === "") {
+				return;
+			}
+			this.#activeInput?.onSubmit(text);
 			return;
 		}
 		editor.handleInput(keyData);
 	}
 
-	#enterInputMode(): void {
+	#enterInputMode(input: { onSubmit: (text: string) => void; allowEmpty?: boolean }): void {
 		if (this.#inlineEditor) return;
+		this.#activeInput = input;
 		// Stop the auto-select countdown for good: the user is actively typing,
 		// matching the old behavior where the separate editor had no timeout.
 		if (this.#countdown) {
@@ -577,6 +594,7 @@ export class HookSelectorComponent extends Container {
 	#exitInputMode(): void {
 		if (!this.#inlineEditor) return;
 		this.#inlineEditor = undefined;
+		this.#activeInput = undefined;
 		this.#inputArea.clear();
 		this.#helpTextComponent.setText(theme.fg("dim", this.#baseHelpText));
 		this.invalidate();

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

@@ -107,6 +107,14 @@ export type ModelSelectorSelection =
 	| {
 			kind: "createProfile";
 			profile: ModelProfileConfig;
+	  }
+	| {
+			kind: "renameProfile";
+			profileName: string;
+	  }
+	| {
+			kind: "deleteProfile";
+			profileName: string;
 	  };
 
 interface PendingThinkingChoice {
@@ -164,7 +172,7 @@ interface PresetCreateUnavailableRow {
 
 interface PresetAlreadySavedRow {
 	kind: "alreadySaved";
-	profileName: string;
+	profile: ModelProfileDefinition;
 }
 
 interface PresetBrowseRow {
@@ -195,7 +203,7 @@ function presetRowIdentity(row: PresetLandingRow): string {
 		case "createUnavailable":
 			return "createUnavailable";
 		case "alreadySaved":
-			return `alreadySaved:${row.profileName}`;
+			return `alreadySaved:${row.profile.name}`;
 	}
 }
 
@@ -207,6 +215,7 @@ const PROFILE_ROLE_PREVIEW_ORDER: GjcModelAssignmentTargetId[] = [
 	"architect",
 ];
 const PRESET_SCOPE_LABELS = ["Apply for this session", "Set as default"];
+const CUSTOM_PRESET_SCOPE_LABELS = ["Apply for this session", "Set as default", "Rename", "Delete"];
 
 function isPrintableCharacter(keyData: string): boolean {
 	return keyData.length === 1 && keyData >= " " && keyData !== "\x7f";
@@ -273,6 +282,10 @@ function sameStringArray(left: readonly string[], right: readonly string[]): boo
 function hasPersistableProfileSnapshot(snapshot: ModelProfileConfig): boolean {
 	return Object.keys(snapshot.model_mapping).length > 0 && snapshot.required_providers.length > 0;
 }
+
+function isCustomUserProfile(profile: ModelProfileDefinition): boolean {
+	return profile.source === "user";
+}
 /**
  * Component that renders a canonical model selector with provider tabs.
  * - Preset landing Left/Right: Collapse/expand selected provider
@@ -885,9 +898,7 @@ export class ModelSelectorComponent extends Container {
 		const snapshot = this.#buildCustomModelProfileSnapshot();
 		if (hasPersistableProfileSnapshot(snapshot)) {
 			const duplicateProfile = this.#findDuplicateGeneratedProfile(snapshot);
-			rows.push(
-				duplicateProfile ? { kind: "alreadySaved", profileName: duplicateProfile.name } : { kind: "create" },
-			);
+			rows.push(duplicateProfile ? { kind: "alreadySaved", profile: duplicateProfile } : { kind: "create" });
 		} else {
 			rows.push({ kind: "createUnavailable", label: "Select a model before creating a custom preset" });
 		}
@@ -961,7 +972,14 @@ export class ModelSelectorComponent extends Container {
 		this.#presetCursor = relocated;
 		return true;
 	}
-
+	#relocatePresetCursorForProfile(profileName: string): boolean {
+		for (const [groupId, profiles] of this.#getPresetGroups()) {
+			if (!profiles.some(profile => profile.name === profileName)) continue;
+			this.#expandedPresetProviderId = groupId;
+			return this.#relocatePresetCursor(`profile:${groupId}:${profileName}`);
+		}
+		return false;
+	}
 	#expandSelectedPresetProvider(): void {
 		const selected = this.#getSelectedPresetRow();
 		if (
@@ -1029,7 +1047,8 @@ export class ModelSelectorComponent extends Container {
 				continue;
 			}
 			if (row.kind === "alreadySaved") {
-				const label = `Already saved as ${row.profileName}`;
+				const presentation = getModelProfilePresentation(row.profile);
+				const label = `Already saved as ${presentation.displayName}`;
 				const renderedLabel = selected ? theme.fg("accent", label) : theme.fg("dim", label);
 				this.#listContainer.addChild(new Text(`${prefix}${renderedLabel}`, 0, 0));
 				continue;
@@ -1082,8 +1101,9 @@ export class ModelSelectorComponent extends Container {
 		}
 		this.#listContainer.addChild(new Spacer(1));
 		if (this.#presetScopeMenuOpen) {
-			for (let i = 0; i < PRESET_SCOPE_LABELS.length; i++) {
-				const label = PRESET_SCOPE_LABELS[i] ?? "";
+			const actionLabels = this.#getPresetScopeLabels(profile);
+			for (let i = 0; i < actionLabels.length; i++) {
+				const label = actionLabels[i] ?? "";
 				const prefix = i === this.#presetScopeIndex ? theme.fg("accent", `${theme.nav.cursor} `) : "  ";
 				this.#listContainer.addChild(
 					new Text(`${prefix}${i === this.#presetScopeIndex ? theme.fg("accent", label) : label}`, 0, 0),
@@ -1394,8 +1414,8 @@ export class ModelSelectorComponent extends Container {
 			const rows = this.#getPresetRows();
 			if (rows.length === 0) return;
 			if (this.#presetScopeMenuOpen) {
-				this.#presetScopeIndex =
-					this.#presetScopeIndex === 0 ? PRESET_SCOPE_LABELS.length - 1 : this.#presetScopeIndex - 1;
+				const actionCount = this.#getPreviewPresetScopeLabels().length;
+				this.#presetScopeIndex = this.#presetScopeIndex === 0 ? actionCount - 1 : this.#presetScopeIndex - 1;
 			} else {
 				this.#presetCursor = this.#presetCursor === 0 ? rows.length - 1 : this.#presetCursor - 1;
 				this.#previewProfileName = undefined;
@@ -1409,7 +1429,7 @@ export class ModelSelectorComponent extends Container {
 			const rows = this.#getPresetRows();
 			if (rows.length === 0) return;
 			if (this.#presetScopeMenuOpen) {
-				this.#presetScopeIndex = (this.#presetScopeIndex + 1) % PRESET_SCOPE_LABELS.length;
+				this.#presetScopeIndex = (this.#presetScopeIndex + 1) % this.#getPreviewPresetScopeLabels().length;
 			} else {
 				this.#presetCursor = (this.#presetCursor + 1) % rows.length;
 				this.#previewProfileName = undefined;
@@ -1464,6 +1484,22 @@ export class ModelSelectorComponent extends Container {
 
 	#handlePresetEnter(): void {
 		if (this.#presetScopeMenuOpen && this.#previewProfileName) {
+			const profile = this.#getProfileByName(this.#previewProfileName);
+			if (!profile) return;
+			if (this.#presetScopeIndex === 2 && isCustomUserProfile(profile)) {
+				this.#onSelectCallback({ kind: "renameProfile", profileName: this.#previewProfileName });
+				return;
+			}
+			if (this.#presetScopeIndex === 3 && isCustomUserProfile(profile)) {
+				this.#onSelectCallback({ kind: "deleteProfile", profileName: this.#previewProfileName });
+				return;
+			}
+			const missing = this.#getMissingProviders(profile);
+			if (missing.length > 0) {
+				this.#presetLoginHint = `Run ${missing.map(provider => `/login ${provider}`).join(", ")}`;
+				this.#renderPresetLanding();
+				return;
+			}
 			this.#onSelectCallback({
 				kind: "profile",
 				profileName: this.#previewProfileName,
@@ -1502,7 +1538,7 @@ export class ModelSelectorComponent extends Container {
 			return;
 		}
 		const missing = this.#getMissingProviders(row.profile);
-		if (missing.length > 0) {
+		if (missing.length > 0 && !isCustomUserProfile(row.profile)) {
 			this.#presetLoginHint = `Run ${missing.map(provider => `/login ${provider}`).join(", ")}`;
 			this.#renderPresetLanding();
 			return;
@@ -1512,6 +1548,31 @@ export class ModelSelectorComponent extends Container {
 		this.#renderPresetLanding();
 	}
 
+	#getPresetScopeLabels(profile: ModelProfileDefinition): string[] {
+		return isCustomUserProfile(profile) ? CUSTOM_PRESET_SCOPE_LABELS : PRESET_SCOPE_LABELS;
+	}
+
+	#getPreviewPresetScopeLabels(): string[] {
+		const profile = this.#getProfileByName(this.#previewProfileName);
+		return profile ? this.#getPresetScopeLabels(profile) : PRESET_SCOPE_LABELS;
+	}
+
+	refreshPresetProfiles(profileName?: string): void {
+		if (profileName) {
+			this.#previewProfileName = profileName;
+			this.#presetLoginHint = undefined;
+			if (!this.#relocatePresetCursorForProfile(profileName)) this.#clampPresetCursor();
+		} else {
+			this.#previewProfileName = undefined;
+			this.#presetScopeMenuOpen = false;
+			this.#presetScopeIndex = 0;
+			this.#presetLoginHint = undefined;
+			this.#clampPresetCursor();
+		}
+		this.#renderPresetLanding();
+		this.#tui.requestRender();
+	}
+
 	#beginActionMenuOrSelect(item: ModelItem | CanonicalModelItem): void {
 		if (this.#temporaryOnly) {
 			this.#handleSelect(item, null);
@@ -1631,6 +1692,16 @@ export class ModelSelectorComponent extends Container {
 	async __testSelectProfile(profileName: string, setDefault: boolean): Promise<void> {
 		await this.#onSelectCallback({ kind: "profile", profileName, setDefault });
 	}
+	async __testSelectPresetAction(profileName: string, action: "rename" | "delete"): Promise<void> {
+		await this.#onSelectCallback({
+			kind: action === "rename" ? "renameProfile" : "deleteProfile",
+			profileName,
+		});
+	}
+	__testSelectedPresetRowIdentity(): string | undefined {
+		const row = this.#getSelectedPresetRow();
+		return row ? presetRowIdentity(row) : undefined;
+	}
 }
 
 function requiresExplicitThinkingChoice(model: Model): boolean {

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

@@ -164,6 +164,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<
@@ -179,6 +180,12 @@ const TIME_FORMAT_OPTIONS: SelectItem[] = [
 	{ value: "24h", label: "24h" },
 	{ value: "12h", label: "12h" },
 ];
+const USAGE_MODE_OPTIONS: SelectItem[] = [
+	{ value: "used", label: "Used" },
+	{ value: "remaining", label: "Remaining" },
+];
+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);
@@ -193,6 +200,7 @@ function mergeSegmentOptions(
 		path: base?.path || overrides?.path ? { ...(base?.path ?? {}), ...(overrides?.path ?? {}) } : undefined,
 		git: base?.git || overrides?.git ? { ...(base?.git ?? {}), ...(overrides?.git ?? {}) } : undefined,
 		time: base?.time || overrides?.time ? { ...(base?.time ?? {}), ...(overrides?.time ?? {}) } : undefined,
+		usage: base?.usage || overrides?.usage ? { ...(base?.usage ?? {}), ...(overrides?.usage ?? {}) } : undefined,
 	};
 }
 
@@ -218,6 +226,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, " ");
 }
@@ -235,8 +262,6 @@ function segmentPlacement(
 class StatusLineCustomEditor extends Container {
 	#list!: SettingsList;
 	#draft: StatusLineDraft;
-	#currentWidthPreviewText!: Text;
-	#narrowWidthPreviewText!: Text;
 	#previewHighlightSegment: StatusLineSegmentId | undefined;
 
 	constructor(
@@ -268,13 +293,6 @@ class StatusLineCustomEditor extends Container {
 		this.clear();
 		this.addChild(new Text(theme.bold(theme.fg("accent", "Status Line Custom Editor")), 0, 0));
 		this.addChild(new Spacer(1));
-		this.addChild(new Text(theme.fg("muted", "Current width preview:"), 0, 0));
-		this.#currentWidthPreviewText = new Text(this.#statusLinePreview(), 0, 0);
-		this.addChild(this.#currentWidthPreviewText);
-		this.addChild(new Text(theme.fg("muted", "Narrow width preview:"), 0, 0));
-		this.#narrowWidthPreviewText = new Text(this.#statusLinePreview(40), 0, 0);
-		this.addChild(this.#narrowWidthPreviewText);
-		this.addChild(new Spacer(1));
 		this.#list = new SettingsList(
 			this.#items(),
 			14,
@@ -282,27 +300,17 @@ class StatusLineCustomEditor extends Container {
 			(id, value) => this.#handleChange(id, value),
 			() => this.#cancel(),
 			item => this.#setSelectedItem(item),
+			2,
 		);
 		this.addChild(this.#list);
 	}
 
 	#refresh(): void {
-		this.#refreshPreview();
 		this.#list.setItems(this.#items());
 	}
-
-	#refreshPreview(): void {
-		this.#currentWidthPreviewText.setText(this.#statusLinePreview());
-		this.#narrowWidthPreviewText.setText(this.#statusLinePreview(40));
-	}
-
-	#statusLinePreview(width?: number): string {
-		return this.callbacks.getStatusLinePreview?.(width) ?? theme.fg("dim", "(preview not available)");
-	}
 	#setSelectedItem(item: SettingItem | undefined): void {
 		this.#previewHighlightSegment = this.#highlightSegmentForItem(item);
 		this.#preview();
-		this.#refreshPreview();
 	}
 
 	#highlightSegmentForItem(item: SettingItem | undefined): StatusLineSegmentId | undefined {
@@ -388,6 +396,22 @@ class StatusLineCustomEditor extends Container {
 					},
 				);
 			}
+			if (id === "usage") {
+				items.push({
+					id: "option.usage.mode",
+					label: "Usage: mode",
+					currentValue: this.#draft.segmentOptions.usage?.mode ?? "used",
+					submenu: (currentValue, done) =>
+						new SelectSubmenu(
+							"Usage mode",
+							"Show used quota or remaining quota in the usage segment.",
+							USAGE_MODE_OPTIONS,
+							currentValue,
+							done,
+							() => done(),
+						),
+				});
+			}
 		}
 
 		items.push(
@@ -552,6 +576,12 @@ class StatusLineCustomEditor extends Container {
 			case "time.showSeconds":
 				this.#draft.segmentOptions.time = { ...(this.#draft.segmentOptions.time ?? {}), showSeconds: bool };
 				break;
+			case "usage.mode":
+				this.#draft.segmentOptions.usage = {
+					...(this.#draft.segmentOptions.usage ?? {}),
+					mode: value === "remaining" ? "remaining" : "used",
+				};
+				break;
 		}
 	}
 
@@ -836,9 +866,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,
@@ -976,6 +1004,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;
 
@@ -1019,13 +1057,20 @@ export class SettingsSelectorComponent extends Container {
 	#buildItemsForTab(defs: SettingDef[], tabId: SettingTab): SettingItem[] {
 		const items = this.#buildItemsForDefs(defs);
 		if (tabId === "appearance") {
+			const customEditorCallbacks: SettingsCallbacks = {
+				...this.callbacks,
+				onStatusLinePreview: previewSettings => {
+					this.callbacks.onStatusLinePreview?.(previewSettings);
+					this.#updateStatusPreview();
+				},
+			};
 			const customEditorItem: SettingItem = {
 				id: STATUS_LINE_CUSTOM_EDITOR_ID,
 				label: "Status Line Custom Editor",
 				description:
 					"Edit custom status line segments, placement, separator, and typed segment options with live previews.",
 				currentValue: "open",
-				submenu: (_currentValue, done) => new StatusLineCustomEditor(this.callbacks, done),
+				submenu: (_currentValue, done) => new StatusLineCustomEditor(customEditorCallbacks, done),
 			};
 			const presetIndex = items.findIndex(item => item.id === "statusLine.preset");
 			if (presetIndex >= 0) {
@@ -1033,6 +1078,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/status-line/presets.ts

@@ -12,6 +12,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"],

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

@@ -480,7 +480,12 @@ const sessionNameSegment: StatusLineSegment = {
 	},
 };
 
-function pickUsageColor(percent: number): "muted" | "warning" | "error" {
+function pickUsageColor(percent: number, mode: "used" | "remaining"): "muted" | "warning" | "error" {
+	if (mode === "remaining") {
+		if (percent <= 20) return "error";
+		if (percent <= 50) return "warning";
+		return "muted";
+	}
 	if (percent >= 80) return "error";
 	if (percent >= 50) return "warning";
 	return "muted";
@@ -508,8 +513,11 @@ const usageSegment: StatusLineSegment = {
 		if (!u || u.windows.length === 0) {
 			return { content: "", visible: false };
 		}
+		const mode = ctx.options.usage?.mode === "remaining" ? "remaining" : "used";
 		const parts = u.windows.map(window => {
-			const pctText = theme.fg(pickUsageColor(window.percent), `${Math.round(window.percent)}%`);
+			const displayPercent =
+				mode === "remaining" ? Math.max(0, Math.min(100, 100 - window.percent)) : window.percent;
+			const pctText = theme.fg(pickUsageColor(displayPercent, mode), `${Math.round(displayPercent)}%`);
 			const reset =
 				window.resetValue !== undefined && window.resetUnit !== undefined
 					? theme.fg("muted", ` (${formatUsageReset(window.resetValue, window.resetUnit)})`)

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

@@ -32,6 +32,7 @@ export interface StatusLineSegmentOptions {
 	path?: { abbreviate?: boolean; maxLength?: number; stripWorkPrefix?: boolean };
 	git?: { showBranch?: boolean; showStaged?: boolean; showUnstaged?: boolean; showUntracked?: boolean };
 	time?: { format?: "12h" | "24h"; showSeconds?: boolean };
+	usage?: { mode?: "used" | "remaining" };
 }
 
 export interface StatusLineSettings {

package/src/modes/controllers/extension-ui-controller.ts

@@ -617,7 +617,8 @@ export class ExtensionUiController {
 		const listChromeRows = dialogOptions?.outline === true ? HOOK_SELECTOR_OUTLINE_ROWS : 0;
 		// Reserve rows for the inline custom-input editor so opening it doesn't
 		// push the scrollable title past the viewport into terminal scrollback.
-		const inlineInputRows = dialogOptions?.customInput ? HOOK_SELECTOR_INLINE_INPUT_ROWS : 0;
+		const inlineInputRows =
+			dialogOptions?.customInput || dialogOptions?.clarificationInput ? HOOK_SELECTOR_INLINE_INPUT_ROWS : 0;
 		const availableTitleRows =
 			this.ctx.ui.terminal.rows - scrollOptionRows - listChromeRows - inlineInputRows - HOOK_SELECTOR_CHROME_ROWS;
 		const scrollTitleRows =
@@ -659,7 +660,10 @@ export class ExtensionUiController {
 				tui: this.ctx.ui,
 				// Share the main prompt editor's autocomplete provider so the
 				// inline "Other (type your own)" editor supports `@` file links.
-				autocompleteProvider: dialogOptions?.customInput ? this.ctx.editor.getAutocompleteProvider() : undefined,
+				autocompleteProvider:
+					dialogOptions?.customInput || dialogOptions?.clarificationInput
+						? this.ctx.editor.getAutocompleteProvider()
+						: undefined,
 				outline: dialogOptions?.outline,
 				wrapFocused: dialogOptions?.wrapFocused,
 				scrollTitleRows,
@@ -675,6 +679,18 @@ export class ExtensionUiController {
 							},
 						}
 					: undefined,
+				clarificationInput: dialogOptions?.clarificationInput
+					? {
+							optionLabel: dialogOptions.clarificationInput.optionLabel,
+							allowEmpty: dialogOptions.clarificationInput.allowEmpty,
+							onSubmit: text => {
+								const optionLabel = dialogOptions.clarificationInput?.optionLabel;
+								this.hideHookSelector();
+								dialogOptions.clarificationInput?.onSubmit(text);
+								finish(optionLabel);
+							},
+						}
+					: undefined,
 			},
 		);
 		// Detach (not dispose) the reusable editor before mounting the transient hook UI, so the
@@ -715,6 +731,7 @@ export class ExtensionUiController {
 		title: string,
 		placeholder?: string,
 		dialogOptions?: ExtensionUIDialogOptions,
+		inputOptions?: { readonly initialValue?: string },
 	): Promise<string | undefined> {
 		const { promise, finish, attachAbort } = this.#createHookDialogState(
 			() => this.hideHookInput(),
@@ -732,6 +749,7 @@ export class ExtensionUiController {
 				finish(undefined);
 			},
 			{
+				initialValue: inputOptions?.initialValue,
 				timeout: dialogOptions?.timeout,
 				onTimeout: dialogOptions?.onTimeout,
 				tui: this.ctx.ui,