NetMesh/components/SettingsPage.tsx

/**
 * Settings Page - Standalone settings window content
 * This component is rendered in a separate Electron window
 */
import { AppWindow, Cloud, FileType, HardDrive, Keyboard, Palette, Puzzle, Sparkles, TerminalSquare, X } from "lucide-react";
import React, { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
import { useAISettingsState } from "../application/state/useAISettingsState";
import { useAvailableFonts } from "../application/state/fontStore";
import { usePortForwardingState } from "../application/state/usePortForwardingState";
import { useVaultState } from "../application/state/useVaultState";
import { useWindowControls } from "../application/state/useWindowControls";
import { useUpdateCheck } from "../application/state/useUpdateCheck";
import { I18nProvider, useI18n } from "../application/i18n/I18nProvider";
import { sanitizePortForwardingRulesForSync } from "../application/syncPayload";
import type { AppLockGateRenderContext } from "./AppLockGate";
import { toast } from "./ui/toast";
import { SettingsTabContent } from "./settings/settings-ui";
import { SettingsFocusProvider, useSettingsFocus } from "./settings/SettingsFocusContext";
import { SettingsSearchControl } from "./settings/SettingsSearchControl";
import { cancelSettingsFocus, focusSettingsAnchor } from "./settings/settingsFocus";
import { Tabs, TabsList, TabsTrigger } from "./ui/tabs";
import { LazyLoadBoundary } from "./ui/lazy-load-boundary";
import { ExternalMcpApprovalsHost } from "./ai/ExternalMcpApprovalsHost";
import { useExternalMcpGrantPersister } from "./ai/useExternalMcpGrantPersister";
import { setupMcpApprovalBridge } from "../infrastructure/ai/shared/approvalGate";
import { usePluginContributions } from "../application/state/usePluginContributions";
import { PluginContributionHost } from "./plugins/PluginContributionHost";
import { matchesKeyBinding } from "../domain/models";
import { isPrimaryModifierWBinding } from "../application/state/windowCommandClose";

const LazySettingsApplicationTab = lazy(() => import("./SettingsApplicationTab"));
const LazySettingsAppearanceTab = lazy(() => import("./settings/tabs/SettingsAppearanceTab"));
const LazySettingsFileAssociationsTab = lazy(() => import("./settings/tabs/SettingsFileAssociationsTab"));
const LazySettingsShortcutsTab = lazy(() => import("./settings/tabs/SettingsShortcutsTab"));
const LazySettingsAITab = lazy(() => import("./settings/tabs/SettingsAITab"));
const LazySettingsSyncTab = lazy(() => import("./settings/tabs/SettingsSyncTab"));
const LazySettingsTerminalTab = lazy(() => import("./settings/tabs/SettingsTerminalTab"));
const LazySettingsSystemTab = lazy(() => import("./settings/tabs/SettingsSystemTab"));
const LazySettingsPluginsTab = lazy(() => import("./settings/tabs/SettingsPluginsTab"));

const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);

type AITabErrorBoundaryProps = { children: React.ReactNode };
type AITabErrorBoundaryState = { error: Error | null };

class AITabErrorBoundary extends React.Component<
  AITabErrorBoundaryProps,
  AITabErrorBoundaryState
> {
  declare props: Readonly<AITabErrorBoundaryProps>;
  state: { error: Error | null } = { error: null };
  static getDerivedStateFromError(error: Error) {
    return { error };
  }
  render() {
    if (this.state.error) {
      return (
        <div style={{ padding: 32, color: "#f87171", fontFamily: "monospace", whiteSpace: "pre-wrap" }}>
          <h3 style={{ marginBottom: 8 }}>AI Settings Error</h3>
          <div>{this.state.error.message}</div>
          <div style={{ marginTop: 8, fontSize: 12, color: "#888" }}>{this.state.error.stack}</div>
        </div>
      );
    }
    return this.props.children;
  }
}

type SettingsState = AppLockGateRenderContext["settings"];
type AppLockState = AppLockGateRenderContext["appLock"];

const settingsTabTriggerClassName =
    "w-full justify-start gap-2 px-3 py-2 text-sm data-[state=active]:bg-background hover:bg-background/60 rounded-md transition-colors overflow-hidden";
const settingsTabIconClassName = "shrink-0";
const settingsTabLabelClassName = "min-w-0 truncate";

const SettingsTabLoading = ({ value }: { value: string }) => (
    <SettingsTabContent value={value}>
        <div className="netcatty-lazy-fade-in min-h-[320px]" aria-hidden="true" />
    </SettingsTabContent>
);

const SettingsTabLoadError = ({ value, error }: { value: string; error?: Error }) => (
    <SettingsTabContent value={value}>
        <div className="flex min-h-[320px] flex-col items-start justify-center gap-3 text-sm text-muted-foreground">
            <div className="font-medium text-foreground">This settings tab could not load.</div>
            {error?.message && (
                <div className="max-w-md text-xs font-mono text-destructive/90 break-words">
                    {error.message}
                </div>
            )}
            <button
                type="button"
                className="rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-muted"
                onClick={() => window.location.reload()}
            >
                Reload
            </button>
        </div>
    </SettingsTabContent>
);

const SettingsLazyTab = ({ children, value }: { children: React.ReactNode; value: string }) => (
    <LazyLoadBoundary
        name="Settings tab"
        resetKey={value}
        fallback={(error) => <SettingsTabLoadError value={value} error={error} />}
    >
        <Suspense fallback={<SettingsTabLoading value={value} />}>
            {children}
        </Suspense>
    </LazyLoadBoundary>
);

type TerminalTabSettingsProps = Pick<
    SettingsState,
    | 'terminalThemeId'
    | 'setTerminalThemeId'
    | 'resolvedTheme'
    | 'followAppTerminalTheme'
    | 'setFollowAppTerminalTheme'
    | 'terminalThemeDarkId'
    | 'setTerminalThemeDarkId'
    | 'terminalThemeLightId'
    | 'setTerminalThemeLightId'
    | 'lightUiThemeId'
    | 'darkUiThemeId'
    | 'terminalFontFamilyId'
    | 'setTerminalFontFamilyId'
    | 'terminalFontSize'
    | 'setTerminalFontSize'
    | 'terminalSettings'
    | 'updateTerminalSetting'
    | 'terminalSidePanelAutoOpen'
    | 'setTerminalSidePanelAutoOpen'
    | 'terminalSidePanelAutoOpenTab'
    | 'setTerminalSidePanelAutoOpenTab'
    | 'workspaceFocusStyle'
    | 'setWorkspaceFocusStyle'
>;

const SettingsTerminalTabContainer = React.memo<TerminalTabSettingsProps>(function SettingsTerminalTabContainer({
    terminalThemeId,
    setTerminalThemeId,
    resolvedTheme,
    followAppTerminalTheme,
    setFollowAppTerminalTheme,
    terminalThemeDarkId,
    setTerminalThemeDarkId,
    terminalThemeLightId,
    setTerminalThemeLightId,
    lightUiThemeId,
    darkUiThemeId,
    terminalFontFamilyId,
    setTerminalFontFamilyId,
    terminalFontSize,
    setTerminalFontSize,
    terminalSettings,
    updateTerminalSetting,
    terminalSidePanelAutoOpen,
    setTerminalSidePanelAutoOpen,
    terminalSidePanelAutoOpenTab,
    setTerminalSidePanelAutoOpenTab,
    workspaceFocusStyle,
    setWorkspaceFocusStyle,
}) {
    const availableFonts = useAvailableFonts();

    return (
        <LazySettingsTerminalTab
            terminalThemeId={terminalThemeId}
            setTerminalThemeId={setTerminalThemeId}
            resolvedTheme={resolvedTheme}
            followAppTerminalTheme={followAppTerminalTheme}
            setFollowAppTerminalTheme={setFollowAppTerminalTheme}
            terminalThemeDarkId={terminalThemeDarkId}
            setTerminalThemeDarkId={setTerminalThemeDarkId}
            terminalThemeLightId={terminalThemeLightId}
            setTerminalThemeLightId={setTerminalThemeLightId}
            lightUiThemeId={lightUiThemeId}
            darkUiThemeId={darkUiThemeId}
            terminalFontFamilyId={terminalFontFamilyId}
            setTerminalFontFamilyId={setTerminalFontFamilyId}
            terminalFontSize={terminalFontSize}
            setTerminalFontSize={setTerminalFontSize}
            terminalSettings={terminalSettings}
            updateTerminalSetting={updateTerminalSetting}
            terminalSidePanelAutoOpen={terminalSidePanelAutoOpen}
            setTerminalSidePanelAutoOpen={setTerminalSidePanelAutoOpen}
            terminalSidePanelAutoOpenTab={terminalSidePanelAutoOpenTab}
            setTerminalSidePanelAutoOpenTab={setTerminalSidePanelAutoOpenTab}
            availableFonts={availableFonts}
            workspaceFocusStyle={workspaceFocusStyle}
            setWorkspaceFocusStyle={setWorkspaceFocusStyle}
        />
    );
});

const SettingsAITabContainer: React.FC = () => {
    const aiState = useAISettingsState();

    return (
        <AITabErrorBoundary>
            <LazySettingsAITab
                providers={aiState.providers}
                addProvider={aiState.addProvider}
                updateProvider={aiState.updateProvider}
                removeProvider={aiState.removeProvider}
                activeProviderId={aiState.activeProviderId}
                setActiveProviderId={aiState.setActiveProviderId}
                activeModelId={aiState.activeModelId}
                setActiveModelId={aiState.setActiveModelId}
                globalPermissionMode={aiState.globalPermissionMode}
                setGlobalPermissionMode={aiState.setGlobalPermissionMode}
                toolIntegrationMode={aiState.toolIntegrationMode}
                setToolIntegrationMode={aiState.setToolIntegrationMode}
                externalAgents={aiState.externalAgents}
                setExternalAgents={aiState.setExternalAgents}
                defaultAgentId={aiState.defaultAgentId}
                setDefaultAgentId={aiState.setDefaultAgentId}
                commandBlocklist={aiState.commandBlocklist}
                setCommandBlocklist={aiState.setCommandBlocklist}
                commandTimeout={aiState.commandTimeout}
                setCommandTimeout={aiState.setCommandTimeout}
                responseIdleTimeout={aiState.responseIdleTimeout}
                setResponseIdleTimeout={aiState.setResponseIdleTimeout}
                maxIterations={aiState.maxIterations}
                setMaxIterations={aiState.setMaxIterations}
                webSearchConfig={aiState.webSearchConfig}
                setWebSearchConfig={aiState.setWebSearchConfig}
                quickMessages={aiState.quickMessages}
                setQuickMessages={aiState.setQuickMessages}
                showTerminalSelectionAIAction={aiState.showTerminalSelectionAIAction}
                setShowTerminalSelectionAIAction={aiState.setShowTerminalSelectionAIAction}
            />
        </AITabErrorBoundary>
    );
};

const SettingsSyncTabWithVault: React.FC<{ onSettingsApplied?: () => void }> = ({ onSettingsApplied }) => {
    const {
        hosts,
        keys,
        identities,
        proxyProfiles,
        snippets,
        customGroups,
        snippetPackages,
        notes,
        noteGroups,
        knownHosts,
        groupConfigs,
        importDataFromString,
        clearVaultData,
    } = useVaultState();

    const { rules: portForwardingRules, importRules: importPortForwardingRules } = usePortForwardingState();

    // Strip transient runtime fields before passing to sync
    const portForwardingRulesForSync = useMemo(
        () => sanitizePortForwardingRulesForSync(portForwardingRules) ?? [],
        [portForwardingRules],
    );

    const vault = useMemo(
        () => ({
            hosts,
            keys,
            identities,
            proxyProfiles,
            snippets,
            customGroups,
            snippetPackages,
            notes,
            noteGroups,
            knownHosts,
            groupConfigs,
        }),
        [
            hosts,
            keys,
            identities,
            proxyProfiles,
            snippets,
            customGroups,
            snippetPackages,
            notes,
            noteGroups,
            knownHosts,
            groupConfigs,
        ],
    );

    return (
        <LazySettingsSyncTab
            vault={vault}
            portForwardingRules={portForwardingRulesForSync}
            importDataFromString={importDataFromString}
            importPortForwardingRules={importPortForwardingRules}
            clearVaultData={clearVaultData}
            onSettingsApplied={onSettingsApplied}
        />
    );
};

const SettingsPageContent: React.FC<{ settings: SettingsState; appLock?: AppLockState }> = ({ settings, appLock }) => {
    const { t } = useI18n();
    const { request, clearFocus, openSearch } = useSettingsFocus();
    const { notifyRendererReady, closeSettingsWindow, onWindowCommandCloseRequested } = useWindowControls();
    const { updateState, checkNow, installUpdate, openReleasePage, startDownload, isUpdateDemoMode } = useUpdateCheck({
        autoUpdateEnabled: settings.autoUpdateEnabled,
        // Install blocked by unsaved editors in the main window — surface a toast
        // here so a click from the Settings window isn't a silent no-op (#1215).
        onNeedsSave: () => toast.warning(t('update.needsSave.message'), t('update.needsSave.title')),
    });
    const [activeTab, setActiveTab] = useState("application");
    const [mountedTabs, setMountedTabs] = useState(() => new Set(["application"]));
    const { available: pluginRuntimeAvailable } = usePluginContributions();
    const closeTabKeyStr = useMemo(() => {
        if (settings.hotkeyScheme === "disabled") return null;
        const binding = settings.keyBindings.find((item) => item.action === "closeTab");
        if (!binding) return null;
        return settings.hotkeyScheme === "mac" ? binding.mac : binding.pc;
    }, [settings.hotkeyScheme, settings.keyBindings]);
    const nativeCommandWClosesSettings = isPrimaryModifierWBinding(closeTabKeyStr, matchesKeyBinding, true);

    useEffect(() => {
        notifyRendererReady();
    }, [notifyRendererReady]);

    useEffect(() => {
        const onKeyDown = (event: KeyboardEvent) => {
            const isFind = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "f";
            if (!isFind) return;
            event.preventDefault();
            openSearch();
        };
        window.addEventListener("keydown", onKeyDown);
        return () => window.removeEventListener("keydown", onKeyDown);
    }, [openSearch]);

    useEffect(() => {
        return setupMcpApprovalBridge();
    }, []);

    useExternalMcpGrantPersister();

    useEffect(() => {
        const unsubscribe = onWindowCommandCloseRequested(() => {
            if (!nativeCommandWClosesSettings) {
                (document.activeElement ?? window).dispatchEvent(new KeyboardEvent("keydown", {
                    key: "w",
                    code: "KeyW",
                    metaKey: true,
                    bubbles: true,
                    cancelable: true,
                }));
                return;
            }
            void closeSettingsWindow();
        });
        return () => unsubscribe?.();
    }, [closeSettingsWindow, nativeCommandWClosesSettings, onWindowCommandCloseRequested]);

    useEffect(() => {
        setMountedTabs((prev) => {
            if (prev.has(activeTab)) return prev;
            const next = new Set(prev);
            next.add(activeTab);
            return next;
        });
    }, [activeTab]);

    useEffect(() => {
        if (!request) return;
        if (activeTab !== request.tab) {
            setActiveTab(request.tab);
            return;
        }
        // Nested tabs (AI / Sync) read `request` to switch sub-tabs. Keep it until
        // scroll succeeds (or retries are exhausted) so lazy mounts still see it.
        let cancelled = false;
        const nestedDelayMs = (request.aiSubTab || request.syncSubTab) ? 80 : 40;
        const focusHandle = window.setTimeout(() => {
            void focusSettingsAnchor(request.anchorId, {
                attempts: 48,
                delayMs: 50,
            }).finally(() => {
                if (!cancelled) clearFocus();
            });
        }, nestedDelayMs);
        return () => {
            cancelled = true;
            window.clearTimeout(focusHandle);
            cancelSettingsFocus();
        };
    }, [request, activeTab, clearFocus]);

    const handleTabChange = useCallback((tab: string) => {
        // Manual sidebar navigation should cancel any pending search jump.
        cancelSettingsFocus();
        clearFocus();
        setActiveTab(tab);
    }, [clearFocus]);

    const handleClose = useCallback(() => {
        closeSettingsWindow();
    }, [closeSettingsWindow]);

    return (
        <>
        <div className="settings-window h-screen flex flex-col bg-background text-foreground font-sans">
            <div className="shrink-0 border-b border-border app-drag">
                <div className="flex items-center justify-between px-4 pt-3">
                    {isMac && <div className="h-6" />}
                </div>
                <div className="flex items-center justify-between px-4 py-2">
                    <h1 className="text-lg font-semibold">{t("settings.title")}</h1>
                    {!isMac && (
                        // No tooltip: on Windows the primary-colored tooltip sits in a
                        // drag titlebar region, can stick open, and blocks the real X.
                        <button
                            type="button"
                            onClick={handleClose}
                            aria-label={t("common.close")}
                            className="app-no-drag w-8 h-8 flex items-center justify-center rounded-md hover:bg-destructive/20 hover:text-destructive transition-colors text-muted-foreground"
                        >
                            <X size={16} />
                        </button>
                    )}
                </div>
            </div>

            <Tabs
                value={activeTab}
                onValueChange={handleTabChange}
                orientation="vertical"
                className="flex-1 flex overflow-hidden"
            >
                <div className="w-56 border-r border-border flex flex-col shrink-0 px-3 py-3">
                    <SettingsSearchControl includePlugins={pluginRuntimeAvailable} />
                    <TabsList className="flex flex-col h-auto bg-transparent gap-1 p-0 justify-start">
                        <TabsTrigger
                            value="application"
                            className={settingsTabTriggerClassName}
                        >
                            <AppWindow size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.application")}</span>
                        </TabsTrigger>
                        {pluginRuntimeAvailable && (
                            <TabsTrigger value="plugins" className={settingsTabTriggerClassName}>
                                <Puzzle size={14} className={settingsTabIconClassName} />
                                <span className={settingsTabLabelClassName}>{t("settings.tab.plugins")}</span>
                            </TabsTrigger>
                        )}
                        <TabsTrigger
                            value="appearance"
                            className={settingsTabTriggerClassName}
                        >
                            <Palette size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.appearance")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="terminal"
                            className={settingsTabTriggerClassName}
                        >
                            <TerminalSquare size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.terminal")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="shortcuts"
                            className={settingsTabTriggerClassName}
                        >
                            <Keyboard size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.shortcuts")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="file-associations"
                            className={settingsTabTriggerClassName}
                        >
                            <FileType size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.sftpFileAssociations")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="ai"
                            className={settingsTabTriggerClassName}
                        >
                            <Sparkles size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.ai")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="sync"
                            className={settingsTabTriggerClassName}
                        >
                            <Cloud size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.syncCloud")}</span>
                        </TabsTrigger>
                        <TabsTrigger
                            value="system"
                            className={settingsTabTriggerClassName}
                        >
                            <HardDrive size={14} className={settingsTabIconClassName} />
                            <span className={settingsTabLabelClassName}>{t("settings.tab.system")}</span>
                        </TabsTrigger>
                    </TabsList>
                </div>

                <div className="flex-1 h-full flex flex-col min-h-0 bg-muted/10">
                    {mountedTabs.has("application") && (
                        <SettingsLazyTab value="application">
                            <LazySettingsApplicationTab
                                updateState={updateState}
                                checkNow={checkNow}
                                openReleasePage={openReleasePage}
                                installUpdate={installUpdate}
                                startDownload={startDownload}
                                isUpdateDemoMode={isUpdateDemoMode}
                            />
                        </SettingsLazyTab>
                    )}

                    {mountedTabs.has("appearance") && (
                        <SettingsLazyTab value="appearance">
                            <LazySettingsAppearanceTab
                                theme={settings.theme}
                                resolvedTheme={settings.resolvedTheme}
                                setTheme={settings.setTheme}
                                lightUiThemeId={settings.lightUiThemeId}
                                setLightUiThemeId={settings.setLightUiThemeId}
                                darkUiThemeId={settings.darkUiThemeId}
                                setDarkUiThemeId={settings.setDarkUiThemeId}
                                accentMode={settings.accentMode}
                                setAccentMode={settings.setAccentMode}
                                customAccent={settings.customAccent}
                                setCustomAccent={settings.setCustomAccent}
                                uiFontFamilyId={settings.uiFontFamilyId}
                                setUiFontFamilyId={settings.setUiFontFamilyId}
                                uiLanguage={settings.uiLanguage}
                                setUiLanguage={settings.setUiLanguage}
                                customCSS={settings.customCSS}
                                setCustomCSS={settings.setCustomCSS}
                                showRecentHosts={settings.showRecentHosts}
                                setShowRecentHosts={settings.setShowRecentHosts}
                                hostClickBehavior={settings.hostClickBehavior}
                                setHostClickBehavior={settings.setHostClickBehavior}
                                showOnlyUngroupedHostsInRoot={settings.showOnlyUngroupedHostsInRoot}
                                setShowOnlyUngroupedHostsInRoot={settings.setShowOnlyUngroupedHostsInRoot}
                                showSftpTab={settings.showSftpTab}
                                setShowSftpTab={settings.setShowSftpTab}
                                showHostTreeSidebar={settings.showHostTreeSidebar}
                                setShowHostTreeSidebar={settings.setShowHostTreeSidebar}
                                windowOpacity={settings.windowOpacity}
                                setWindowOpacity={settings.setWindowOpacity}
                                appIconVariant={settings.appIconVariant}
                                setAppIconVariant={settings.setAppIconVariant}
                            />
                        </SettingsLazyTab>
                    )}

                    {mountedTabs.has("terminal") && (
                        <SettingsLazyTab value="terminal">
                            <SettingsTerminalTabContainer
                                terminalThemeId={settings.terminalThemeId}
                                setTerminalThemeId={settings.setTerminalThemeId}
                                resolvedTheme={settings.resolvedTheme}
                                followAppTerminalTheme={settings.followAppTerminalTheme}
                                setFollowAppTerminalTheme={settings.setFollowAppTerminalTheme}
                                terminalThemeDarkId={settings.terminalThemeDarkId}
                                setTerminalThemeDarkId={settings.setTerminalThemeDarkId}
                                terminalThemeLightId={settings.terminalThemeLightId}
                                setTerminalThemeLightId={settings.setTerminalThemeLightId}
                                lightUiThemeId={settings.lightUiThemeId}
                                darkUiThemeId={settings.darkUiThemeId}
                                terminalFontFamilyId={settings.terminalFontFamilyId}
                                setTerminalFontFamilyId={settings.setTerminalFontFamilyId}
                                terminalFontSize={settings.terminalFontSize}
                                setTerminalFontSize={settings.setTerminalFontSize}
                                terminalSettings={settings.terminalSettings}
                                updateTerminalSetting={settings.updateTerminalSetting}
                                terminalSidePanelAutoOpen={settings.terminalSidePanelAutoOpen}
                                setTerminalSidePanelAutoOpen={settings.setTerminalSidePanelAutoOpen}
                                terminalSidePanelAutoOpenTab={settings.terminalSidePanelAutoOpenTab}
                                setTerminalSidePanelAutoOpenTab={settings.setTerminalSidePanelAutoOpenTab}
                                workspaceFocusStyle={settings.workspaceFocusStyle}
                                setWorkspaceFocusStyle={settings.setWorkspaceFocusStyle}
                            />
                        </SettingsLazyTab>
                    )}

                    {mountedTabs.has("shortcuts") && (
                        <SettingsLazyTab value="shortcuts">
                            <LazySettingsShortcutsTab
                                hotkeyScheme={settings.hotkeyScheme}
                                setHotkeyScheme={settings.setHotkeyScheme}
                                shellOnlyTabNumberShortcuts={settings.shellOnlyTabNumberShortcuts}
                                setShellOnlyTabNumberShortcuts={settings.setShellOnlyTabNumberShortcuts}
                                showTabNumberBadges={settings.showTabNumberBadges}
                                setShowTabNumberBadges={settings.setShowTabNumberBadges}
                                disableTerminalFontZoom={settings.disableTerminalFontZoom}
                                setDisableTerminalFontZoom={settings.setDisableTerminalFontZoom}
                                keyBindings={settings.keyBindings}
                                updateKeyBinding={settings.updateKeyBinding}
                                resetKeyBinding={settings.resetKeyBinding}
                                resetAllKeyBindings={settings.resetAllKeyBindings}
                                setIsHotkeyRecording={settings.setIsHotkeyRecording}
                            />
                        </SettingsLazyTab>
                    )}

                    {mountedTabs.has("file-associations") && (
                        <SettingsLazyTab value="file-associations">
                            <LazySettingsFileAssociationsTab />
                        </SettingsLazyTab>
                    )}

                    {mountedTabs.has("ai") && (
                        <SettingsLazyTab value="ai">
                            <SettingsAITabContainer />
                        </SettingsLazyTab>
                    )}

                    {mountedTabs.has("sync") && (
                        <SettingsLazyTab value="sync">
                            <SettingsSyncTabWithVault onSettingsApplied={settings.rehydrateAllFromStorage} />
                        </SettingsLazyTab>
                    )}

                    {mountedTabs.has("system") && (
                        <SettingsLazyTab value="system">
                            <LazySettingsSystemTab
                                appLockSettings={settings.appLockSettings}
                                setAppLockTimeoutMinutes={settings.setAppLockTimeoutMinutes}
                                requestAppLockDisable={settings.requestAppLockDisable}
                                requestAppLockPasswordChange={settings.requestAppLockPasswordChange}
                                appLockSystemUnlockStatus={appLock?.systemUnlockStatus}
                                setAppLockSystemUnlockEnabled={settings.setAppLockSystemUnlockEnabled}
                                sessionLogsEnabled={settings.sessionLogsEnabled}
                                setSessionLogsEnabled={settings.setSessionLogsEnabled}
                                sessionLogsDir={settings.sessionLogsDir}
                                setSessionLogsDir={settings.setSessionLogsDir}
                                sessionLogsFormat={settings.sessionLogsFormat}
                                setSessionLogsFormat={settings.setSessionLogsFormat}
                                sessionLogsTimestampsEnabled={settings.sessionLogsTimestampsEnabled}
                                setSessionLogsTimestampsEnabled={settings.setSessionLogsTimestampsEnabled}
                                sshDebugLogsEnabled={settings.sshDebugLogsEnabled}
                                setSshDebugLogsEnabled={settings.setSshDebugLogsEnabled}
                                sshDeepLinkEnabled={settings.sshDeepLinkEnabled}
                                setSshDeepLinkEnabled={settings.setSshDeepLinkEnabled}
                                jmsDeepLinkEnabled={settings.jmsDeepLinkEnabled}
                                setJmsDeepLinkEnabled={settings.setJmsDeepLinkEnabled}
                                explorerContextMenuEnabled={settings.explorerContextMenuEnabled}
                                setExplorerContextMenuEnabled={settings.setExplorerContextMenuEnabled}
                                explorerContextMenuSupported={settings.explorerContextMenuSupported}
                                restorePreviousSession={settings.restorePreviousSession}
                                setRestorePreviousSession={settings.setRestorePreviousSession}
                                restoreTerminalCwd={settings.restoreTerminalCwd}
                                setRestoreTerminalCwd={settings.setRestoreTerminalCwd}
                                startupLanding={settings.startupLanding}
                                setStartupLanding={settings.setStartupLanding}
                                toggleWindowHotkey={settings.toggleWindowHotkey}
                                setToggleWindowHotkey={settings.setToggleWindowHotkey}
                                closeToTray={settings.closeToTray}
                                setCloseToTray={settings.setCloseToTray}
                                autoLaunchEnabled={settings.autoLaunchEnabled}
                                setAutoLaunchEnabled={settings.setAutoLaunchEnabled}
                                autoLaunchSupported={settings.autoLaunchSupported}
                                httpNetworkProxy={settings.httpNetworkProxy}
                                setHttpNetworkProxy={settings.setHttpNetworkProxy}
                                hotkeyRegistrationError={settings.hotkeyRegistrationError}
                                globalHotkeyEnabled={settings.globalHotkeyEnabled}
                                setGlobalHotkeyEnabled={settings.setGlobalHotkeyEnabled}
                                autoUpdateEnabled={settings.autoUpdateEnabled}
                                setAutoUpdateEnabled={settings.setAutoUpdateEnabled}
                                updateState={updateState}
                                checkNow={checkNow}
                                installUpdate={installUpdate}
                                openReleasePage={openReleasePage}
                                startDownload={startDownload}
                            />
                        </SettingsLazyTab>
                    )}
                    {mountedTabs.has("plugins") && pluginRuntimeAvailable && (
                        <SettingsLazyTab value="plugins">
                            <LazySettingsPluginsTab />
                        </SettingsLazyTab>
                    )}
                </div>
            </Tabs>
        </div>
        <ExternalMcpApprovalsHost />
        <PluginContributionHost locale={settings.uiLanguage} theme={settings.resolvedTheme} />
        </>
    );
};

export default function SettingsPage({
    settings,
    appLock,
}: {
    settings: SettingsState;
    appLock: AppLockState;
}) {
    return (
        <I18nProvider locale={settings.uiLanguage}>
            <SettingsFocusProvider>
                <SettingsPageContent settings={settings} appLock={appLock} />
            </SettingsFocusProvider>
        </I18nProvider>
    );
}