claudeup 3.7.2 → 3.8.0

package/src/ui/screens/ProfilesScreen.tsx

@@ -0,0 +1,487 @@
+import React, { useEffect, useCallback } from "react";
+import { useApp, useModal } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+import { ScreenLayout } from "../components/layout/index.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import {
+	listProfiles,
+	applyProfile,
+	renameProfile,
+	deleteProfile,
+	exportProfileToJson,
+	importProfileFromJson,
+} from "../../services/profiles.js";
+import {
+	writeClipboard,
+	readClipboard,
+	ClipboardUnavailableError,
+} from "../../utils/clipboard.js";
+import type { ProfileEntry } from "../../types/index.js";
+
+export function ProfilesScreen() {
+	const { state, dispatch } = useApp();
+	const { profiles: profilesState } = state;
+	const modal = useModal();
+	const dimensions = useDimensions();
+
+	// Fetch data
+	const fetchData = useCallback(async () => {
+		dispatch({ type: "PROFILES_DATA_LOADING" });
+		try {
+			const entries = await listProfiles(state.projectPath);
+			dispatch({ type: "PROFILES_DATA_SUCCESS", profiles: entries });
+		} catch (error) {
+			dispatch({
+				type: "PROFILES_DATA_ERROR",
+				error: error instanceof Error ? error : new Error(String(error)),
+			});
+		}
+	}, [dispatch, state.projectPath]);
+
+	useEffect(() => {
+		fetchData();
+	}, [fetchData, state.dataRefreshVersion]);
+
+	const profileList =
+		profilesState.profiles.status === "success"
+			? profilesState.profiles.data
+			: [];
+
+	const selectedProfile: ProfileEntry | undefined =
+		profileList[profilesState.selectedIndex];
+
+	// Keyboard handling
+	useKeyboard((event) => {
+		if (state.isSearching || state.modal) return;
+
+		if (event.name === "up" || event.name === "k") {
+			const newIndex = Math.max(0, profilesState.selectedIndex - 1);
+			dispatch({ type: "PROFILES_SELECT", index: newIndex });
+		} else if (event.name === "down" || event.name === "j") {
+			const newIndex = Math.min(
+				Math.max(0, profileList.length - 1),
+				profilesState.selectedIndex + 1,
+			);
+			dispatch({ type: "PROFILES_SELECT", index: newIndex });
+		} else if (event.name === "enter" || event.name === "a") {
+			handleApply();
+		} else if (event.name === "r") {
+			handleRename();
+		} else if (event.name === "d") {
+			handleDelete();
+		} else if (event.name === "c") {
+			handleCopy();
+		} else if (event.name === "i") {
+			handleImport();
+		}
+	});
+
+	const handleApply = async () => {
+		if (!selectedProfile) return;
+
+		const scopeChoice = await modal.select(
+			"Apply Profile",
+			`Apply "${selectedProfile.name}" to which scope?`,
+			[
+				{ label: "User — ~/.claude/settings.json (global)", value: "user" },
+				{
+					label: "Project — .claude/settings.json (this project)",
+					value: "project",
+				},
+			],
+		);
+		if (scopeChoice === null) return;
+
+		const targetScope = scopeChoice as "user" | "project";
+		const scopeLabel =
+			targetScope === "user"
+				? "~/.claude/settings.json"
+				: ".claude/settings.json";
+
+		const pluginCount = Object.keys(selectedProfile.plugins).length;
+		const emptyWarning =
+			pluginCount === 0
+				? "\n\nWARNING: This profile has no plugins — applying will disable all plugins."
+				: "";
+
+		const confirmed = await modal.confirm(
+			"Confirm Apply",
+			`This will REPLACE all enabledPlugins in ${scopeLabel}.${emptyWarning}\n\nContinue?`,
+		);
+		if (!confirmed) return;
+
+		modal.loading(`Applying "${selectedProfile.name}"...`);
+		try {
+			await applyProfile(
+				selectedProfile.id,
+				selectedProfile.scope,
+				targetScope,
+				state.projectPath,
+			);
+			modal.hideModal();
+			// Trigger PluginsScreen to refetch
+			dispatch({ type: "DATA_REFRESH_COMPLETE" });
+			await modal.message(
+				"Applied",
+				`Profile "${selectedProfile.name}" applied to ${scopeLabel}.`,
+				"success",
+			);
+		} catch (error) {
+			modal.hideModal();
+			await modal.message(
+				"Error",
+				`Failed to apply profile: ${error}`,
+				"error",
+			);
+		}
+	};
+
+	const handleRename = async () => {
+		if (!selectedProfile) return;
+
+		const newName = await modal.input(
+			"Rename Profile",
+			"New name:",
+			selectedProfile.name,
+		);
+		if (newName === null || !newName.trim()) return;
+
+		modal.loading("Renaming...");
+		try {
+			await renameProfile(
+				selectedProfile.id,
+				newName.trim(),
+				selectedProfile.scope,
+				state.projectPath,
+			);
+			modal.hideModal();
+			await fetchData();
+			await modal.message(
+				"Renamed",
+				`Profile renamed to "${newName.trim()}".`,
+				"success",
+			);
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to rename: ${error}`, "error");
+		}
+	};
+
+	const handleDelete = async () => {
+		if (!selectedProfile) return;
+
+		const confirmed = await modal.confirm(
+			`Delete "${selectedProfile.name}"?`,
+			"This will permanently remove the profile.",
+		);
+		if (!confirmed) return;
+
+		modal.loading("Deleting...");
+		try {
+			await deleteProfile(
+				selectedProfile.id,
+				selectedProfile.scope,
+				state.projectPath,
+			);
+			modal.hideModal();
+			// Adjust selection if we deleted the last item
+			const newIndex = Math.max(
+				0,
+				Math.min(profilesState.selectedIndex, profileList.length - 2),
+			);
+			dispatch({ type: "PROFILES_SELECT", index: newIndex });
+			await fetchData();
+			await modal.message("Deleted", "Profile deleted.", "success");
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to delete: ${error}`, "error");
+		}
+	};
+
+	const handleCopy = async () => {
+		if (!selectedProfile) return;
+
+		modal.loading("Exporting...");
+		try {
+			const json = await exportProfileToJson(
+				selectedProfile.id,
+				selectedProfile.scope,
+				state.projectPath,
+			);
+			modal.hideModal();
+			try {
+				await writeClipboard(json);
+				await modal.message(
+					"Copied",
+					`Profile JSON copied to clipboard.\nShare it with teammates to import.`,
+					"success",
+				);
+			} catch (err) {
+				if (err instanceof ClipboardUnavailableError) {
+					// Fallback: show JSON in modal for manual copy
+					await modal.message("Profile JSON (copy manually)", json, "info");
+				} else {
+					throw err;
+				}
+			}
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to export: ${error}`, "error");
+		}
+	};
+
+	const handleImport = async () => {
+		let json: string | null = null;
+
+		// Try to read from clipboard first
+		try {
+			json = await readClipboard();
+		} catch (err) {
+			if (err instanceof ClipboardUnavailableError) {
+				// Fallback: ask user to paste JSON manually
+				json = await modal.input("Import Profile", "Paste profile JSON:");
+			} else {
+				await modal.message("Error", `Clipboard error: ${err}`, "error");
+				return;
+			}
+		}
+
+		if (json === null || !json.trim()) return;
+
+		const scopeChoice = await modal.select(
+			"Import Profile",
+			"Save imported profile to which scope?",
+			[
+				{ label: "User — ~/.claude/profiles.json (global)", value: "user" },
+				{
+					label: "Project — .claude/profiles.json (this project)",
+					value: "project",
+				},
+			],
+		);
+		if (scopeChoice === null) return;
+
+		const targetScope = scopeChoice as "user" | "project";
+
+		modal.loading("Importing...");
+		try {
+			const id = await importProfileFromJson(
+				json,
+				targetScope,
+				state.projectPath,
+			);
+			modal.hideModal();
+			await fetchData();
+			await modal.message(
+				"Imported",
+				`Profile imported successfully (id: ${id}).`,
+				"success",
+			);
+		} catch (error) {
+			modal.hideModal();
+			await modal.message("Error", `Failed to import: ${error}`, "error");
+		}
+	};
+
+	const formatDate = (iso: string): string => {
+		try {
+			const d = new Date(iso);
+			return d.toLocaleDateString("en-US", {
+				month: "short",
+				day: "numeric",
+				year: "numeric",
+			});
+		} catch {
+			return iso;
+		}
+	};
+
+	const renderListItem = (
+		entry: ProfileEntry,
+		_idx: number,
+		isSelected: boolean,
+	) => {
+		const pluginCount = Object.keys(entry.plugins).length;
+		const dateStr = formatDate(entry.updatedAt);
+		const scopeColor = entry.scope === "user" ? "cyan" : "green";
+		const scopeLabel = entry.scope === "user" ? "[user]" : "[proj]";
+
+		if (isSelected) {
+			return (
+				<text bg="magenta" fg="white">
+					{" "}
+					{scopeLabel} {entry.name} — {pluginCount} plugin
+					{pluginCount !== 1 ? "s" : ""} · {dateStr}{" "}
+				</text>
+			);
+		}
+
+		return (
+			<text>
+				<span fg={scopeColor}>{scopeLabel}</span>
+				<span> </span>
+				<span fg="white">{entry.name}</span>
+				<span fg="gray">
+					{" "}
+					— {pluginCount} plugin{pluginCount !== 1 ? "s" : ""} · {dateStr}
+				</span>
+			</text>
+		);
+	};
+
+	const renderDetail = () => {
+		if (profilesState.profiles.status === "loading") {
+			return <text fg="gray">Loading profiles...</text>;
+		}
+
+		if (profilesState.profiles.status === "error") {
+			return (
+				<text fg="red">Error: {profilesState.profiles.error.message}</text>
+			);
+		}
+
+		if (profileList.length === 0) {
+			return (
+				<box flexDirection="column">
+					<text fg="gray">No profiles yet.</text>
+					<box marginTop={1}>
+						<text fg="green">
+							Press 's' in the Plugins screen to save the current selection as a
+							profile.
+						</text>
+					</box>
+				</box>
+			);
+		}
+
+		if (!selectedProfile) {
+			return <text fg="gray">Select a profile to see details</text>;
+		}
+
+		const plugins = Object.keys(selectedProfile.plugins);
+		const scopeColor = selectedProfile.scope === "user" ? "cyan" : "green";
+		const scopeLabel =
+			selectedProfile.scope === "user"
+				? "User (~/.claude/profiles.json)"
+				: "Project (.claude/profiles.json — committed to git)";
+
+		return (
+			<box flexDirection="column">
+				<text fg="cyan">
+					<strong>{selectedProfile.name}</strong>
+				</text>
+				<box marginTop={1}>
+					<text fg="gray">Scope: </text>
+					<text fg={scopeColor}>{scopeLabel}</text>
+				</box>
+				<box marginTop={1}>
+					<text fg="gray">
+						Created: {formatDate(selectedProfile.createdAt)} · Updated:{" "}
+						{formatDate(selectedProfile.updatedAt)}
+					</text>
+				</box>
+				<box marginTop={1} flexDirection="column">
+					<text fg="gray">
+						Plugins ({plugins.length}
+						{plugins.length === 0 ? " — applying will disable all plugins" : ""}
+						):
+					</text>
+					{plugins.length === 0 ? (
+						<text fg="yellow"> (none)</text>
+					) : (
+						plugins.map((p) => (
+							<box key={p}>
+								<text fg="white"> {p}</text>
+							</box>
+						))
+					)}
+				</box>
+				<box marginTop={2} flexDirection="column">
+					<box>
+						<text bg="magenta" fg="white">
+							{" "}
+							Enter/a{" "}
+						</text>
+						<text fg="gray"> Apply profile</text>
+					</box>
+					<box marginTop={1}>
+						<text bg="#333333" fg="white">
+							{" "}
+							r{" "}
+						</text>
+						<text fg="gray"> Rename</text>
+					</box>
+					<box marginTop={1}>
+						<text bg="red" fg="white">
+							{" "}
+							d{" "}
+						</text>
+						<text fg="gray"> Delete</text>
+					</box>
+					<box marginTop={1}>
+						<text bg="blue" fg="white">
+							{" "}
+							c{" "}
+						</text>
+						<text fg="gray"> Copy JSON to clipboard</text>
+					</box>
+					<box marginTop={1}>
+						<text bg="green" fg="white">
+							{" "}
+							i{" "}
+						</text>
+						<text fg="gray"> Import from clipboard</text>
+					</box>
+				</box>
+			</box>
+		);
+	};
+
+	const profileCount = profileList.length;
+	const userCount = profileList.filter((p) => p.scope === "user").length;
+	const projCount = profileList.filter((p) => p.scope === "project").length;
+
+	const statusContent = (
+		<text>
+			<span fg="gray">Profiles: </span>
+			<span fg="cyan">{userCount} user</span>
+			<span fg="gray"> + </span>
+			<span fg="green">{projCount} project</span>
+			<span fg="gray"> = </span>
+			<span fg="white">{profileCount} total</span>
+		</text>
+	);
+
+	return (
+		<ScreenLayout
+			title="claudeup Plugin Profiles"
+			currentScreen="profiles"
+			statusLine={statusContent}
+			footerHints="↑↓:nav │ Enter/a:apply │ r:rename │ d:delete │ c:copy │ i:import"
+			listPanel={
+				profileList.length === 0 &&
+				profilesState.profiles.status !== "loading" ? (
+					<box flexDirection="column">
+						<text fg="gray">No profiles yet.</text>
+						<box marginTop={1}>
+							<text fg="green">
+								Go to Plugins (1) and press 's' to save a profile.
+							</text>
+						</box>
+					</box>
+				) : (
+					<ScrollableList
+						items={profileList}
+						selectedIndex={profilesState.selectedIndex}
+						renderItem={renderListItem}
+						maxHeight={dimensions.listPanelHeight}
+					/>
+				)
+			}
+			detailPanel={renderDetail()}
+		/>
+	);
+}
+
+export default ProfilesScreen;

package/src/ui/screens/StatusLineScreen.js

@@ -162,7 +162,7 @@ export function StatusLineScreen() {
             return (_jsx("box", { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsx("text", { fg: "gray", children: "Select a theme to see preview" }) }));
         }
         if (selectedItem.isCustom) {
-            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "cyan", children: _jsx("strong", { children: "\u2728 Custom Status Line" }) }), _jsx("text", { fg: "gray", children: "Create your own unique status line!" }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsx("text", { fg: "yellow", children: _jsx("strong", { children: "Available variables:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { fg: "green", children: _jsx("strong", { children: "{model}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Model name"] }), _jsxs("text", { children: [_jsx("span", { fg: "green", children: _jsx("strong", { children: "{model_short}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Short name"] }), _jsxs("text", { children: [_jsx("span", { fg: "yellow", children: _jsx("strong", { children: "{cost}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Session cost"] }), _jsxs("text", { children: [_jsx("span", { fg: "blue", children: _jsx("strong", { children: "{cwd}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Working directory"] }), _jsxs("text", { children: [_jsx("span", { fg: "magenta", children: _jsx("strong", { children: "{git_branch}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Git branch"] }), _jsxs("text", { children: [_jsx("span", { fg: "cyan", children: _jsx("strong", { children: "{input_tokens}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Input tokens"] }), _jsxs("text", { children: [_jsx("span", { fg: "cyan", children: _jsx("strong", { children: "{output_tokens}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Output tokens"] }), _jsxs("text", { children: [_jsx("span", { fg: "red", children: _jsx("strong", { children: "{session_duration}" }) }), _jsx("span", { fg: "gray", children: "\u2192" }), " Duration"] })] })] })] }));
+            return (_jsxs("box", { flexDirection: "column", children: [_jsx("text", { fg: "cyan", children: _jsx("strong", { children: "\u2728 Custom Status Line" }) }), _jsx("text", { fg: "gray", children: "Create your own unique status line!" }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsx("text", { fg: "yellow", children: _jsx("strong", { children: "Available variables:" }) }), _jsxs("box", { marginTop: 1, flexDirection: "column", children: [_jsxs("text", { children: [_jsx("span", { fg: "green", children: _jsx("strong", { children: "{model}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Model name"] }), _jsxs("text", { children: [_jsx("span", { fg: "green", children: _jsx("strong", { children: "{model_short}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Short name"] }), _jsxs("text", { children: [_jsx("span", { fg: "yellow", children: _jsx("strong", { children: "{cost}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Session cost"] }), _jsxs("text", { children: [_jsx("span", { fg: "#5c9aff", children: _jsx("strong", { children: "{cwd}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Working directory"] }), _jsxs("text", { children: [_jsx("span", { fg: "magenta", children: _jsx("strong", { children: "{git_branch}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Git branch"] }), _jsxs("text", { children: [_jsx("span", { fg: "cyan", children: _jsx("strong", { children: "{input_tokens}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Input tokens"] }), _jsxs("text", { children: [_jsx("span", { fg: "cyan", children: _jsx("strong", { children: "{output_tokens}" }) }), " ", _jsx("span", { fg: "gray", children: "\u2192" }), " Output tokens"] }), _jsxs("text", { children: [_jsx("span", { fg: "red", children: _jsx("strong", { children: "{session_duration}" }) }), _jsx("span", { fg: "gray", children: "\u2192" }), " Duration"] })] })] })] }));
         }
         if (selectedItem.preset) {
             const example = selectedItem.preset.template
@@ -183,7 +183,7 @@ export function StatusLineScreen() {
             return (_jsx("text", { fg: "magenta", children: _jsxs("strong", { children: ["\u25B8 ", item.label] }) }));
         }
         if (item.isCustom) {
-            return isSelected ? (_jsx("text", { bg: "cyan", fg: "black", children: _jsxs("strong", { children: [" ", "\u2795 Custom Status Line", " "] }) })) : (_jsx("text", { fg: "cyan", children: _jsxs("strong", { children: ["  ", "\u2795 Custom Status Line"] }) }));
+            return isSelected ? (_jsx("text", { bg: "cyan", fg: "black", children: _jsx("strong", { children: " \u2795 Custom Status Line " }) })) : (_jsx("text", { fg: "cyan", children: _jsxs("strong", { children: ["  ", "\u2795 Custom Status Line"] }) }));
         }
         const currentForScope = getCurrentStatusLine();
         const isActive = item.preset && currentForScope === item.preset.template;

package/src/ui/screens/StatusLineScreen.tsx

@@ -251,7 +251,7 @@ export function StatusLineScreen() {
 								<span fg="gray">→</span> Session cost
 							</text>
 							<text>
-								<span fg="blue">
+								<span fg="#5c9aff">
 									<strong>{"{cwd}"}</strong>
 								</span>{" "}
 								<span fg="gray">→</span> Working directory
@@ -310,7 +310,8 @@ export function StatusLineScreen() {
 						</text>
 						<box
 							marginTop={1}
-							paddingLeft={1} paddingRight={1}
+							paddingLeft={1}
+							paddingRight={1}
 							borderStyle="rounded"
 							borderColor="green"
 						>
@@ -336,7 +337,7 @@ export function StatusLineScreen() {
 	) => {
 		if (item.isCategory) {
 			return (
-				<text fg="magenta" >
+				<text fg="magenta">
 					<strong>▸ {item.label}</strong>
 				</text>
 			);
@@ -344,14 +345,11 @@ export function StatusLineScreen() {
 
 		if (item.isCustom) {
 			return isSelected ? (
-				<text bg="cyan" fg="black" >
-					<strong>
-						{" "}
-						➕ Custom Status Line{" "}
-					</strong>
+				<text bg="cyan" fg="black">
+					<strong> ➕ Custom Status Line </strong>
 				</text>
 			) : (
-				<text fg="cyan" >
+				<text fg="cyan">
 					<strong>{"  "}➕ Custom Status Line</strong>
 				</text>
 			);
@@ -361,12 +359,12 @@ export function StatusLineScreen() {
 		const isActive = item.preset && currentForScope === item.preset.template;
 
 		return isSelected ? (
-			<text bg="magenta" fg="white" >
+			<text bg="magenta" fg="white">
 				{" "}
 				{isActive ? "●" : "○"} {item.preset?.name || ""}{" "}
 			</text>
 		) : (
-			<text fg={isActive ? "green" : "white"} >
+			<text fg={isActive ? "green" : "white"}>
 				{"  "}
 				{isActive ? "●" : "○"} {item.preset?.name || ""}
 			</text>
@@ -392,7 +390,7 @@ export function StatusLineScreen() {
 	return (
 		<ScreenLayout
 			title="claudeup Status Line"
-			currentScreen="statusline"
+			currentScreen={"statusline" as never}
 			statusLine={statusContent}
 			footerHints="↑↓:nav │ Enter:apply │ p:project │ g:global │ r:reset"
 			listPanel={

package/src/ui/screens/index.js

@@ -1,7 +1,7 @@
 export { PluginsScreen } from "./PluginsScreen.js";
 export { McpScreen } from "./McpScreen.js";
 export { McpRegistryScreen } from "./McpRegistryScreen.js";
-export { StatusLineScreen } from "./StatusLineScreen.js";
-export { EnvVarsScreen } from "./EnvVarsScreen.js";
+export { SettingsScreen } from "./EnvVarsScreen.js";
 export { CliToolsScreen } from "./CliToolsScreen.js";
 export { ModelSelectorScreen } from "./ModelSelectorScreen.js";
+export { ProfilesScreen } from "./ProfilesScreen.js";

package/src/ui/screens/index.ts

@@ -1,7 +1,7 @@
 export { PluginsScreen } from "./PluginsScreen.js";
 export { McpScreen } from "./McpScreen.js";
 export { McpRegistryScreen } from "./McpRegistryScreen.js";
-export { StatusLineScreen } from "./StatusLineScreen.js";
-export { EnvVarsScreen } from "./EnvVarsScreen.js";
+export { SettingsScreen } from "./EnvVarsScreen.js";
 export { CliToolsScreen } from "./CliToolsScreen.js";
 export { ModelSelectorScreen } from "./ModelSelectorScreen.js";
+export { ProfilesScreen } from "./ProfilesScreen.js";

package/src/ui/state/AppContext.js

@@ -91,7 +91,7 @@ export function useModal() {
                 });
             });
         },
-        select: (title, message, options) => {
+        select: (title, message, options, defaultIndex) => {
             return new Promise((resolve) => {
                 dispatch({
                     type: "SHOW_MODAL",
@@ -100,6 +100,7 @@ export function useModal() {
                         title,
                         message,
                         options,
+                        defaultIndex,
                         onSelect: (value) => {
                             dispatch({ type: "HIDE_MODAL" });
                             resolve(value);

package/src/ui/state/AppContext.tsx

@@ -153,6 +153,7 @@ export function useModal() {
 			title: string,
 			message: string,
 			options: { label: string; value: string; description?: string }[],
+			defaultIndex?: number,
 		): Promise<string | null> => {
 			return new Promise((resolve) => {
 				dispatch({
@@ -162,6 +163,7 @@ export function useModal() {
 						title,
 						message,
 						options,
+						defaultIndex,
 						onSelect: (value: string) => {
 							dispatch({ type: "HIDE_MODAL" });
 							resolve(value);