feat(settings): add preferred terminal selection

Allow users to choose their preferred terminal app for opening
provider terminals. Supports platform-specific options:
- macOS: Terminal.app, iTerm2, Alacritty, Kitty, Ghostty
- Windows: cmd, PowerShell, Windows Terminal
- Linux: GNOME Terminal, Konsole, Xfce4, Alacritty, Kitty, Ghostty

Falls back to system default if selected terminal is unavailable.
This commit is contained in:
Jason
2026-01-25 21:16:07 +08:00
parent beebd9847f
commit 5e92111771
7 changed files with 229 additions and 0 deletions
+7
View File
@@ -36,6 +36,7 @@ import { ThemeSettings } from "@/components/settings/ThemeSettings";
import { WindowSettings } from "@/components/settings/WindowSettings";
import { AppVisibilitySettings } from "@/components/settings/AppVisibilitySettings";
import { SkillSyncMethodSettings } from "@/components/settings/SkillSyncMethodSettings";
import { TerminalSettings } from "@/components/settings/TerminalSettings";
import { DirectorySettings } from "@/components/settings/DirectorySettings";
import { ImportExportSection } from "@/components/settings/ImportExportSection";
import { AboutSection } from "@/components/settings/AboutSection";
@@ -256,6 +257,12 @@ export function SettingsPage({
handleAutoSave({ skillSyncMethod: method })
}
/>
<TerminalSettings
value={settings.preferredTerminal}
onChange={(terminal) =>
handleAutoSave({ preferredTerminal: terminal })
}
/>
</motion.div>
) : null}
</TabsContent>
@@ -0,0 +1,111 @@
import { useTranslation } from "react-i18next";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { isMac, isWindows, isLinux } from "@/lib/platform";
// Terminal options per platform
const MACOS_TERMINALS = [
{ value: "terminal", labelKey: "settings.terminal.options.macos.terminal" },
{ value: "iterm2", labelKey: "settings.terminal.options.macos.iterm2" },
{ value: "alacritty", labelKey: "settings.terminal.options.macos.alacritty" },
{ value: "kitty", labelKey: "settings.terminal.options.macos.kitty" },
{ value: "ghostty", labelKey: "settings.terminal.options.macos.ghostty" },
] as const;
const WINDOWS_TERMINALS = [
{ value: "cmd", labelKey: "settings.terminal.options.windows.cmd" },
{
value: "powershell",
labelKey: "settings.terminal.options.windows.powershell",
},
{ value: "wt", labelKey: "settings.terminal.options.windows.wt" },
] as const;
const LINUX_TERMINALS = [
{
value: "gnome-terminal",
labelKey: "settings.terminal.options.linux.gnomeTerminal",
},
{ value: "konsole", labelKey: "settings.terminal.options.linux.konsole" },
{
value: "xfce4-terminal",
labelKey: "settings.terminal.options.linux.xfce4Terminal",
},
{ value: "alacritty", labelKey: "settings.terminal.options.linux.alacritty" },
{ value: "kitty", labelKey: "settings.terminal.options.linux.kitty" },
{ value: "ghostty", labelKey: "settings.terminal.options.linux.ghostty" },
] as const;
// Get terminals for the current platform
function getTerminalOptions() {
if (isMac()) {
return MACOS_TERMINALS;
}
if (isWindows()) {
return WINDOWS_TERMINALS;
}
if (isLinux()) {
return LINUX_TERMINALS;
}
// Fallback to macOS options
return MACOS_TERMINALS;
}
// Get default terminal for the current platform
function getDefaultTerminal(): string {
if (isMac()) {
return "terminal";
}
if (isWindows()) {
return "cmd";
}
if (isLinux()) {
return "gnome-terminal";
}
return "terminal";
}
export interface TerminalSettingsProps {
value?: string;
onChange: (value: string) => void;
}
export function TerminalSettings({ value, onChange }: TerminalSettingsProps) {
const { t } = useTranslation();
const terminals = getTerminalOptions();
const defaultTerminal = getDefaultTerminal();
// Use value or default
const currentValue = value || defaultTerminal;
return (
<section className="space-y-2">
<header className="space-y-1">
<h3 className="text-sm font-medium">{t("settings.terminal.title")}</h3>
<p className="text-xs text-muted-foreground">
{t("settings.terminal.description")}
</p>
</header>
<Select value={currentValue} onValueChange={onChange}>
<SelectTrigger className="w-[200px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
{terminals.map((terminal) => (
<SelectItem key={terminal.value} value={terminal.value}>
{t(terminal.labelKey)}
</SelectItem>
))}
</SelectContent>
</Select>
<p className="text-xs text-muted-foreground">
{t("settings.terminal.fallbackHint")}
</p>
</section>
);
}