@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.2

package/components/settings/RuntimeSettingsSection.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Runtime Settings Section.
+ *
+ * The actual storage clear + URL navigation is in
+ * `onboarding/reload-into-runtime-picker.ts` — kept as a leaf module so
+ * its contract is testable without booting the SettingsView dependency
+ * graph.
+ */
+export declare function RuntimeSettingsSection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RuntimeSettingsSection.d.ts.map

package/components/settings/RuntimeSettingsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeSettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/RuntimeSettingsSection.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAsCH,wBAAgB,sBAAsB,4CAiPrC"}

package/components/settings/RuntimeSettingsSection.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runtime Settings Section.
+ *
+ * The actual storage clear + URL navigation is in
+ * `onboarding/reload-into-runtime-picker.ts` — kept as a leaf module so
+ * its contract is testable without booting the SettingsView dependency
+ * graph.
+ */
+import { Button } from "@elizaos/ui";
+import { Cloud, Laptop, RadioTower } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { inspectExistingElizaInstall, migrateDesktopStateDir, pickDesktopWorkspaceFolder, } from "../../bridge/electrobun-rpc.js";
+import { isElectrobunRuntime } from "../../bridge/electrobun-runtime.js";
+import { isStoreBuild } from "../../build-variant.js";
+import { useRuntimeMode } from "../../hooks/useRuntimeMode.js";
+import { readPersistedMobileRuntimeMode } from "../../onboarding/mobile-runtime-mode.js";
+import { reloadIntoRuntimePicker, } from "../../onboarding/reload-into-runtime-picker.js";
+import { isAndroidCloudBuild } from "../../platform/android-runtime.js";
+import { useApp } from "../../state/index.js";
+import { inferAgentRuntimeTarget, } from "../../state/agent-runtime-target.js";
+import { loadPersistedActiveServer } from "../../state/persistence.js";
+const STORE_LOCAL_DISABLED_DOCS_URL = "https://github.com/milady-ai/milady/blob/develop/docs/desktop/build-variants.md";
+export function RuntimeSettingsSection() {
+    const { t } = useApp();
+    const { state: runtimeModeState } = useRuntimeMode();
+    const [migrationMessage, setMigrationMessage] = useState(null);
+    const [migrationBusy, setMigrationBusy] = useState(false);
+    // Prefer the authoritative server snapshot (`GET /api/runtime/mode`).
+    // Fall back to the local heuristic when the snapshot is loading or the
+    // endpoint is unreachable — older builds and offline shells still need
+    // a sensible label.
+    const currentRuntime = useMemo(() => {
+        const fallback = inferAgentRuntimeTarget({
+            activeServer: loadPersistedActiveServer(),
+            mobileRuntimeMode: readPersistedMobileRuntimeMode(),
+        });
+        if (runtimeModeState.phase !== "ready")
+            return fallback;
+        const kind = runtimeModeState.snapshot.deploymentRuntime;
+        return { kind, label: fallback.label };
+    }, [runtimeModeState]);
+    const storeBuild = isStoreBuild();
+    const localDisabledReason = storeBuild
+        ? t("settings.runtime.localDisabledStore", {
+            defaultValue: "Local agent requires the direct download build. Open docs for details.",
+        })
+        : undefined;
+    // The Play-Store-compliant Android build (`build:android:cloud`) ships
+    // without the on-device agent runtime, so the Local option must be
+    // hidden — selecting it would point the renderer at a loopback agent
+    // that physically isn't there. The default sideload Android build, the
+    // AOSP system build, iOS, and desktop all keep the full picker.
+    const cloudOnly = isAndroidCloudBuild();
+    const actions = useMemo(() => {
+        const base = [
+            {
+                target: "cloud",
+                label: t("settings.runtime.cloudLabel", {
+                    defaultValue: "Cloud agent",
+                }),
+                description: t("settings.runtime.cloudDescription", {
+                    defaultValue: "Use an Eliza Cloud hosted agent.",
+                }),
+                icon: Cloud,
+            },
+        ];
+        if (!cloudOnly) {
+            base.push({
+                target: "local",
+                label: t("settings.runtime.localLabel", {
+                    defaultValue: "Local",
+                }),
+                description: t("settings.runtime.localDescription", {
+                    defaultValue: "Use the agent running on this device.",
+                }),
+                icon: Laptop,
+                disabled: storeBuild,
+                disabledReason: localDisabledReason,
+            });
+        }
+        base.push({
+            target: "remote",
+            label: t("settings.runtime.remoteLabel", {
+                defaultValue: "Remote",
+            }),
+            description: t("settings.runtime.remoteDescription", {
+                defaultValue: "Connect to an agent on another machine.",
+            }),
+            icon: RadioTower,
+        });
+        return base;
+    }, [t, cloudOnly, storeBuild, localDisabledReason]);
+    const handleSwitch = useCallback((target) => {
+        reloadIntoRuntimePicker(target);
+    }, []);
+    const handleImportDirectState = useCallback(async () => {
+        setMigrationBusy(true);
+        setMigrationMessage(null);
+        try {
+            const existing = await inspectExistingElizaInstall();
+            const picked = await pickDesktopWorkspaceFolder({
+                defaultPath: existing?.stateDir,
+                promptTitle: t("settings.runtime.importDirectStatePickerTitle", {
+                    defaultValue: "Choose direct-build data folder",
+                }),
+            });
+            if (!picked || picked.canceled || !picked.path) {
+                setMigrationMessage(t("settings.runtime.importDirectStateCanceled", {
+                    defaultValue: "Import canceled.",
+                }));
+                return;
+            }
+            const result = await migrateDesktopStateDir(picked.path);
+            if (!result) {
+                setMigrationMessage(t("settings.runtime.importDirectStateUnavailable", {
+                    defaultValue: "Import is unavailable in this runtime.",
+                }));
+                return;
+            }
+            if (!result.ok) {
+                setMigrationMessage(t("settings.runtime.importDirectStateFailed", {
+                    defaultValue: "Import failed: {{error}}",
+                    error: result.error ?? "unknown error",
+                }));
+                return;
+            }
+            if (!result.migrated) {
+                setMigrationMessage(t("settings.runtime.importDirectStateSkipped", {
+                    defaultValue: "Nothing was imported from that folder.",
+                }));
+                return;
+            }
+            setMigrationMessage(t("settings.runtime.importDirectStateDone", {
+                defaultValue: "Imported direct-build data into this sandboxed build.",
+            }));
+        }
+        catch (error) {
+            setMigrationMessage(t("settings.runtime.importDirectStateFailed", {
+                defaultValue: "Import failed: {{error}}",
+                error: error instanceof Error ? error.message : String(error),
+            }));
+        }
+        finally {
+            setMigrationBusy(false);
+        }
+    }, [t]);
+    return (_jsxs("div", { className: "flex flex-col gap-4 p-4 sm:p-5", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: t("settings.runtime.currentMode", {
+                            defaultValue: "Current mode: {{mode}}",
+                            mode: currentRuntime.label,
+                        }) }), _jsx("p", { className: "text-sm text-foreground/70", children: t("settings.runtime.description", {
+                            defaultValue: "Switch where the app sends agent requests. Reset Everything resets the currently selected agent.",
+                        }) })] }), _jsx("div", { className: actions.length === 2
+                    ? "grid gap-2 sm:grid-cols-2"
+                    : "grid gap-2 sm:grid-cols-3", children: actions.map((action) => {
+                    const Icon = action.icon;
+                    const active = currentRuntime.kind === action.target;
+                    const disabled = action.disabled === true;
+                    return (_jsxs(Button, { onClick: () => handleSwitch(action.target), variant: active ? "default" : "outline", size: "sm", disabled: disabled, title: action.disabledReason, className: "h-auto justify-start gap-2 px-3 py-2 text-left", children: [_jsx(Icon, { className: "size-4 shrink-0", "aria-hidden": "true" }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-sm font-medium", children: action.label }), _jsx("span", { className: "whitespace-normal text-xs opacity-70", children: action.description })] })] }, action.target));
+                }) }), storeBuild ? (_jsxs("div", { className: "space-y-2 text-xs text-foreground/60", children: [_jsxs("p", { children: [t("settings.runtime.localDisabledStoreNote", {
+                                defaultValue: "This is the store-distributed build, which runs in a sandbox. ",
+                            }), _jsx("a", { href: STORE_LOCAL_DISABLED_DOCS_URL, target: "_blank", rel: "noreferrer", className: "underline", children: t("settings.runtime.localDisabledStoreLink", {
+                                    defaultValue: "Why?",
+                                }) })] }), isElectrobunRuntime() ? (_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void handleImportDirectState(), disabled: migrationBusy, className: "w-fit", children: migrationBusy
+                                    ? t("settings.runtime.importingDirectState", {
+                                        defaultValue: "Importing...",
+                                    })
+                                    : t("settings.runtime.importDirectState", {
+                                        defaultValue: "Import direct-build data",
+                                    }) }), migrationMessage ? _jsx("span", { children: migrationMessage }) : null] })) : null] })) : null, _jsx("p", { className: "text-xs text-foreground/60", children: t("settings.runtime.switchNote", {
+                    defaultValue: "Switching reopens the runtime picker and leaves each agent's own data on that agent.",
+                }) })] }));
+}

package/components/settings/SecretsManagerSection.d.ts

@@ -0,0 +1,21 @@
+import { type VaultTab } from "../../hooks/useSecretsManagerModal";
+export declare function SecretsManagerSection(): import("react/jsx-runtime").JSX.Element;
+export declare function SecretsManagerModalRoot(): import("react/jsx-runtime").JSX.Element;
+export interface VaultModalProps {
+    open: boolean;
+    onOpenChange: (next: boolean) => void;
+    /**
+     * Optional tab to land on when opening. Owner is responsible for
+     * resetting via `onConsumeInitial` after the modal opens so the
+     * next open uses the user's most recent tab again.
+     */
+    initialTab?: VaultTab | null;
+    initialFocusKey?: string | null;
+    initialFocusProfileId?: string | null;
+    onConsumeInitial?: () => void;
+}
+export declare function VaultModal({ open, onOpenChange, initialTab, initialFocusKey, initialFocusProfileId, onConsumeInitial, }: VaultModalProps): import("react/jsx-runtime").JSX.Element;
+export { LoginsTab as SavedLoginsPanel } from "./vault-tabs/LoginsTab";
+export { BackendRow, InstallSheet, SigninSheet, } from "./vault-tabs/OverviewTab";
+export { VaultModal as SecretsManagerModal };
+//# sourceMappingURL=SecretsManagerSection.d.ts.map

package/components/settings/SecretsManagerSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecretsManagerSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/SecretsManagerSection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,oCAAoC,CAAC;AAoE5C,wBAAgB,qBAAqB,4CAkEpC;AAED,wBAAgB,uBAAuB,4CAkBtC;AAID,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,UAAiB,EACjB,eAAsB,EACtB,qBAA4B,EAC5B,gBAAgB,GACjB,EAAE,eAAe,2CAejB;AA6aD,OAAO,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EACL,UAAU,EACV,YAAY,EACZ,WAAW,GACZ,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,CAAC"}

package/components/settings/SecretsManagerSection.js

@@ -0,0 +1,339 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Tabs, TabsContent, TabsList, TabsTrigger, } from "@elizaos/ui";
+import { KeyRound, Loader2 } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { dispatchSecretsManagerOpen, useSecretsManagerModalState, VAULT_TABS, } from "../../hooks/useSecretsManagerModal.js";
+import { getShortcutLabel } from "../../hooks/useSecretsManagerShortcut.js";
+import { LoginsTab } from "./vault-tabs/LoginsTab.js";
+import { OverviewTab } from "./vault-tabs/OverviewTab.js";
+import { RoutingTab } from "./vault-tabs/RoutingTab.js";
+import { SecretsTab } from "./vault-tabs/SecretsTab.js";
+/**
+ * Settings → Vault section.
+ *
+ * Two exports:
+ *  - `SecretsManagerSection` — the inline launcher row in Settings.
+ *    Shows current primary backend + status; clicking dispatches the
+ *    global open event for the modal. Doesn't mount the modal itself.
+ *  - `SecretsManagerModalRoot` — the modal's top-level mount. Should
+ *    be rendered ONCE at app root (alongside SaveCommandModal etc.
+ *    in App.tsx). Subscribes to global open/close state so any
+ *    trigger (Settings launcher, ⌘⌥⌃V keyboard chord, application
+ *    menu accelerator) shows it.
+ *
+ * The modal itself is a tabbed Vault interface: Overview / Secrets /
+ * Logins / Routing. Each tab is a separate file under `vault-tabs/`.
+ * Data is fetched once per modal-open and shared across tabs via
+ * props; mutations call back to the modal to refresh.
+ */
+const HASH_PREFIX = "vault";
+function readHashTab() {
+    if (typeof window === "undefined")
+        return null;
+    const hash = window.location.hash.replace(/^#/, "");
+    if (!hash.startsWith(`${HASH_PREFIX}/`))
+        return null;
+    const candidate = hash.slice(HASH_PREFIX.length + 1);
+    return VAULT_TABS.includes(candidate) ? candidate : null;
+}
+function writeHashTab(tab) {
+    if (typeof window === "undefined")
+        return;
+    const next = `#${HASH_PREFIX}/${tab}`;
+    if (window.location.hash === next)
+        return;
+    // Replace, not push, so closing the modal doesn't litter the back stack
+    // with intermediate tab states.
+    history.replaceState(null, "", next);
+}
+function clearHash() {
+    if (typeof window === "undefined")
+        return;
+    if (!window.location.hash.startsWith(`#${HASH_PREFIX}`))
+        return;
+    history.replaceState(null, "", window.location.pathname + window.location.search);
+}
+// ── Public components ──────────────────────────────────────────────
+export function SecretsManagerSection() {
+    const [primary, setPrimary] = useState(null);
+    const [enabledCount, setEnabledCount] = useState(1);
+    const { isOpen } = useSecretsManagerModalState();
+    const refreshSummary = useCallback(async () => {
+        const [bRes, pRes] = await Promise.all([
+            fetch("/api/secrets/manager/backends"),
+            fetch("/api/secrets/manager/preferences"),
+        ]);
+        if (!bRes.ok || !pRes.ok)
+            return;
+        const bJson = (await bRes.json());
+        const pJson = (await pRes.json());
+        const primaryId = pJson.preferences.enabled[0] ?? "in-house";
+        setPrimary(bJson.backends.find((b) => b.id === primaryId) ?? null);
+        setEnabledCount(pJson.preferences.enabled.length);
+    }, []);
+    useEffect(() => {
+        void refreshSummary();
+    }, [refreshSummary]);
+    useEffect(() => {
+        if (!isOpen)
+            void refreshSummary();
+    }, [isOpen, refreshSummary]);
+    return (_jsx("section", { className: "space-y-3", children: _jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border/60 bg-card/40 px-3 py-3", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-border/50 bg-bg/50 text-muted", children: _jsx(KeyRound, { className: "h-3.5 w-3.5", "aria-hidden": true }) }), _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate font-medium text-sm text-txt", children: primary?.label ?? "Local (encrypted)" }), primary && (_jsx("span", { className: "rounded-full border border-accent/40 bg-accent/10 px-1.5 py-0.5 text-2xs font-medium text-accent", children: "Primary" })), enabledCount > 1 && (_jsxs("span", { className: "rounded-full border border-border/50 bg-bg/40 px-1.5 py-0.5 text-2xs text-muted", children: ["+", enabledCount - 1, " more"] }))] }), _jsxs("p", { className: "mt-0.5 truncate text-2xs text-muted", children: ["Where sensitive values like API keys are stored.", _jsxs("span", { className: "ml-1 text-muted/70", children: ["(", getShortcutLabel(), ")"] })] })] })] }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 shrink-0 rounded-lg", onClick: () => dispatchSecretsManagerOpen(), children: "Manage\u2026" })] }) }));
+}
+export function SecretsManagerModalRoot() {
+    // The modal-state hook is the single source of truth. We forward
+    // its initial-tab / focus payload directly to `VaultModal` as props
+    // rather than re-subscribing to the event from the modal body — that
+    // would double the listeners and risk dropping the dispatch payload
+    // for the body's hook (which mounts after the dispatch fires).
+    const { isOpen, initialTab, focusKey, focusProfileId, setOpen, clearFocus } = useSecretsManagerModalState();
+    return (_jsx(VaultModal, { open: isOpen, onOpenChange: setOpen, initialTab: initialTab, initialFocusKey: focusKey, initialFocusProfileId: focusProfileId, onConsumeInitial: clearFocus }));
+}
+export function VaultModal({ open, onOpenChange, initialTab = null, initialFocusKey = null, initialFocusProfileId = null, onConsumeInitial, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { className: "flex max-h-[85vh] flex-col gap-0 overflow-hidden sm:max-w-4xl", children: _jsx(VaultBody, { open: open, onOpenChange: onOpenChange, initialTab: initialTab, initialFocusKey: initialFocusKey, initialFocusProfileId: initialFocusProfileId, onConsumeInitial: onConsumeInitial }) }) }));
+}
+function VaultBody({ open, onOpenChange, initialTab, initialFocusKey, initialFocusProfileId, onConsumeInitial, }) {
+    // Stash the hash that was present when the modal opened so closing
+    // the modal restores it. Without this we'd nuke `#secrets` (settings
+    // section anchor) every time the user popped the modal open and
+    // closed it, breaking the SettingsView deep-link contract.
+    const priorHashRef = useRef("");
+    // Tab state. Resolved in this order: (1) initial dispatch detail,
+    // (2) hash, (3) "overview". Subsequent tab changes update the hash so
+    // the URL is shareable / restorable.
+    const [activeTab, setActiveTab] = useState(() => initialTab ?? readHashTab() ?? "overview");
+    // Cross-tab focus (key + optional profile id). The receiving tab
+    // applies this and calls `clearFocusState()` to prevent re-application
+    // on every parent re-render.
+    const [focusKey, setFocusKey] = useState(initialFocusKey);
+    const [focusProfileId, setFocusProfileId] = useState(initialFocusProfileId);
+    const clearFocusState = useCallback(() => {
+        setFocusKey(null);
+        setFocusProfileId(null);
+    }, []);
+    // When the parent forwards a new initial tab / focus (modal re-opened
+    // via dispatch with new payload), sync local state and signal the
+    // owner to clear so we don't re-apply on every re-render.
+    useEffect(() => {
+        if (!open)
+            return;
+        if (initialTab)
+            setActiveTab(initialTab);
+        if (initialFocusKey !== null)
+            setFocusKey(initialFocusKey);
+        if (initialFocusProfileId !== null)
+            setFocusProfileId(initialFocusProfileId);
+        if (initialTab || initialFocusKey || initialFocusProfileId) {
+            onConsumeInitial?.();
+        }
+    }, [
+        open,
+        initialTab,
+        initialFocusKey,
+        initialFocusProfileId,
+        onConsumeInitial,
+    ]);
+    // Capture the prior hash on open so close can restore it.
+    useEffect(() => {
+        if (!open)
+            return;
+        if (typeof window === "undefined")
+            return;
+        const current = window.location.hash;
+        // Don't overwrite if the open was triggered BY a `#vault/<tab>` paste —
+        // that hash is ours, not the prior settings hash.
+        if (!current.startsWith(`#${HASH_PREFIX}`)) {
+            priorHashRef.current = current;
+        }
+    }, [open]);
+    // Sync hash on tab change while open.
+    useEffect(() => {
+        if (!open)
+            return;
+        writeHashTab(activeTab);
+    }, [open, activeTab]);
+    // On close, restore prior hash (or strip the vault hash if none).
+    useEffect(() => {
+        if (open)
+            return;
+        if (typeof window === "undefined")
+            return;
+        if (!window.location.hash.startsWith(`#${HASH_PREFIX}`))
+            return;
+        if (priorHashRef.current) {
+            history.replaceState(null, "", priorHashRef.current);
+        }
+        else {
+            clearHash();
+        }
+    }, [open]);
+    // Listen for external hash changes (e.g. user pasted a URL).
+    useEffect(() => {
+        if (!open)
+            return;
+        const onHashChange = () => {
+            const next = readHashTab();
+            if (next && next !== activeTab)
+                setActiveTab(next);
+        };
+        window.addEventListener("hashchange", onHashChange);
+        return () => window.removeEventListener("hashchange", onHashChange);
+    }, [open, activeTab]);
+    // ── Data ───────────────────────────────────────────────────────
+    const [backends, setBackends] = useState(null);
+    const [preferences, setPreferences] = useState(null);
+    const [installMethods, setInstallMethods] = useState(null);
+    const [entries, setEntries] = useState(null);
+    const [routingConfig, setRoutingConfig] = useState(null);
+    const [agents, setAgents] = useState([]);
+    const [apps, setApps] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [savedAt, setSavedAt] = useState(null);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [backendsRes, prefsRes, methodsRes, entriesRes, routingRes, agentsRes, appsRes,] = await Promise.all([
+                fetch("/api/secrets/manager/backends"),
+                fetch("/api/secrets/manager/preferences"),
+                fetch("/api/secrets/manager/install/methods"),
+                fetch("/api/secrets/inventory"),
+                fetch("/api/secrets/routing"),
+                fetch("/api/agents").catch(() => null),
+                fetch("/api/apps").catch(() => null),
+            ]);
+            if (!backendsRes.ok)
+                throw new Error(`backends: HTTP ${backendsRes.status}`);
+            if (!prefsRes.ok)
+                throw new Error(`preferences: HTTP ${prefsRes.status}`);
+            if (!methodsRes.ok)
+                throw new Error(`install/methods: HTTP ${methodsRes.status}`);
+            if (!entriesRes.ok)
+                throw new Error(`inventory: HTTP ${entriesRes.status}`);
+            if (!routingRes.ok)
+                throw new Error(`routing: HTTP ${routingRes.status}`);
+            const backendsJson = (await backendsRes.json());
+            const prefsJson = (await prefsRes.json());
+            const methodsJson = (await methodsRes.json());
+            const entriesJson = (await entriesRes.json());
+            const routingJson = (await routingRes.json());
+            setBackends(backendsJson.backends);
+            setPreferences(prefsJson.preferences);
+            setInstallMethods(methodsJson.methods);
+            setEntries(entriesJson.entries);
+            setRoutingConfig(routingJson.config);
+            // Best-effort agent/app fetches — endpoints may not exist in headless
+            // / test environments. The Routing tab still works without them.
+            if (agentsRes?.ok) {
+                const aJson = (await agentsRes.json());
+                setAgents(aJson.agents ?? []);
+            }
+            else {
+                setAgents([]);
+            }
+            if (appsRes?.ok) {
+                const aJson = (await appsRes.json());
+                setApps(aJson.apps ?? []);
+            }
+            else {
+                setApps([]);
+            }
+        }
+        catch (err) {
+            // Boundary translation: a failed bulk load surfaces in a single
+            // banner; tabs that don't depend on the failed endpoint still
+            // render usable empty states from their own state.
+            setError(err instanceof Error ? err.message : "load failed");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        if (open)
+            void load();
+    }, [open, load]);
+    // Refresh inventory + routing after any tab mutation. Cheaper than a
+    // full re-load but always gives sibling tabs the latest data.
+    const refreshInventory = useCallback(async () => {
+        const [entriesRes, routingRes] = await Promise.all([
+            fetch("/api/secrets/inventory"),
+            fetch("/api/secrets/routing"),
+        ]);
+        if (entriesRes.ok) {
+            const json = (await entriesRes.json());
+            setEntries(json.entries);
+        }
+        if (routingRes.ok) {
+            const json = (await routingRes.json());
+            setRoutingConfig(json.config);
+        }
+    }, []);
+    // Clear the "Saved" label after 2.5s.
+    useEffect(() => {
+        if (savedAt === null)
+            return;
+        const id = setTimeout(() => setSavedAt(null), 2500);
+        return () => clearTimeout(id);
+    }, [savedAt]);
+    const save = useCallback(async () => {
+        if (!preferences)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const res = await fetch("/api/secrets/manager/preferences", {
+                method: "PUT",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify({ preferences }),
+            });
+            if (!res.ok)
+                throw new Error(`HTTP ${res.status}`);
+            const json = (await res.json());
+            setPreferences(json.preferences);
+            setSavedAt(Date.now());
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "save failed");
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [preferences]);
+    const onSignout = useCallback(async (backendId) => {
+        const res = await fetch("/api/secrets/manager/signout", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ backendId }),
+        });
+        if (!res.ok) {
+            setError(`sign-out HTTP ${res.status}`);
+            return;
+        }
+        await load();
+    }, [load]);
+    // Cross-tab navigation handed to each tab via props.
+    const navigate = useMemo(() => (target) => {
+        setActiveTab(target.tab);
+        setFocusKey(target.focusKey ?? null);
+        setFocusProfileId(target.focusProfileId ?? null);
+    }, []);
+    const onTabChange = useCallback((next) => {
+        if (VAULT_TABS.includes(next)) {
+            setActiveTab(next);
+        }
+    }, []);
+    const isReady = !loading && backends && preferences && installMethods;
+    return (_jsxs(_Fragment, { children: [_jsxs(DialogHeader, { className: "shrink-0", children: [_jsxs(DialogTitle, { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(KeyRound, { className: "h-4 w-4 text-muted", "aria-hidden": true }), "Vault"] }), _jsx("span", { className: "rounded-md border border-border/50 bg-bg/40 px-2 py-0.5 font-mono text-2xs font-normal text-muted", children: getShortcutLabel() })] }), _jsx(DialogDescription, { children: "One stop for backends, secrets, saved logins, and per-context routing. Local storage is always available as the fallback." })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden pt-2", children: !isReady || !backends || !preferences || !installMethods ? (_jsxs("div", { className: "flex items-center gap-2 px-1 py-6 text-sm text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": true }), " Loading\u2026"] })) : (_jsxs(_Fragment, { children: [error && (_jsx("div", { "aria-live": "polite", "data-testid": "vault-modal-error", className: "rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-xs text-danger", children: error })), _jsxs(Tabs, { value: activeTab, onValueChange: onTabChange, className: "flex min-h-0 flex-1 flex-col", children: [_jsxs(TabsList, { className: "h-9 shrink-0 self-start", children: [_jsx(TabsTrigger, { value: "overview", "data-testid": "vault-tab-overview", children: "Overview" }), _jsx(TabsTrigger, { value: "secrets", "data-testid": "vault-tab-secrets", children: "Secrets" }), _jsx(TabsTrigger, { value: "logins", "data-testid": "vault-tab-logins", children: "Logins" }), _jsx(TabsTrigger, { value: "routing", "data-testid": "vault-tab-routing", children: "Routing" })] }), _jsxs("div", { className: "mt-2 min-h-0 flex-1 overflow-y-auto pr-1", children: [_jsx(TabsContent, { value: "overview", className: "mt-0", "data-testid": "vault-tab-overview-content", children: _jsx(OverviewTab, { backends: backends, preferences: preferences, installMethods: installMethods, saving: saving, savedAt: savedAt, onPreferencesChange: setPreferences, onSave: () => void save(), onReload: () => void load(), onInstallComplete: () => void load(), onSigninComplete: () => void load(), onSignout: (id) => void onSignout(id) }) }), _jsx(TabsContent, { value: "secrets", className: "mt-0", "data-testid": "vault-tab-secrets-content", children: _jsx(SecretsTab, { entries: entries ?? [], onChanged: () => void refreshInventory(), navigate: navigate, focusKey: activeTab === "secrets" ? focusKey : null, focusProfileId: activeTab === "secrets" ? focusProfileId : null, onFocusApplied: clearFocusState }) }), _jsx(TabsContent, { value: "logins", className: "mt-0", "data-testid": "vault-tab-logins-content", children: _jsx(LoginsTab, {}) }), _jsx(TabsContent, { value: "routing", className: "mt-0", "data-testid": "vault-tab-routing-content", children: _jsx(RoutingTab, { config: routingConfig ?? { rules: [] }, agents: agents, apps: apps, entries: entries ?? [], onConfigChange: setRoutingConfig, navigate: navigate, focusKey: activeTab === "routing" ? focusKey : null, onFocusApplied: clearFocusState }) })] })] })] })) }), _jsxs(DialogFooter, { className: "flex shrink-0 flex-row items-center justify-between gap-3 border-t border-border/30 pt-3 sm:justify-between", children: [_jsx("p", { className: "text-2xs text-muted sm:max-w-sm", children: "Non-sensitive config always stays in-house." }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: _jsx(Button, { variant: "ghost", size: "sm", className: "h-9 rounded-lg", onClick: () => onOpenChange(false), disabled: saving, children: "Close" }) })] })] }));
+}
+// ── Re-exports for legacy imports ──────────────────────────────────
+//
+// External callers (tests, App root mounts) historically imported
+// `BackendRow`, `SavedLoginsPanel`, and `SecretsManagerModal` from this
+// file. Re-export them so the move into `vault-tabs/` doesn't break
+// anything that hasn't migrated yet.
+export { LoginsTab as SavedLoginsPanel } from "./vault-tabs/LoginsTab.js";
+export { BackendRow, InstallSheet, SigninSheet, } from "./vault-tabs/OverviewTab.js";
+export { VaultModal as SecretsManagerModal };

package/components/settings/SecuritySettingsSection.d.ts

@@ -0,0 +1,2 @@
+export declare function SecuritySettingsSection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SecuritySettingsSection.d.ts.map

package/components/settings/SecuritySettingsSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecuritySettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/SecuritySettingsSection.tsx"],"names":[],"mappings":"AAi0BA,wBAAgB,uBAAuB,4CAwBtC"}