@elizaos/ui 2.0.3-beta.2 → 2.0.3-beta.3

package/components/settings/RemotePluginHostSection.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Remote Plugin Manager — install from a local directory, start/stop, tail
  * logs, and uninstall Electrobun remote plugins via the typed desktop bridge.
@@ -11,7 +11,7 @@ import { appNameInterpolationVars, useBranding } from "../../config/branding.js"
 import { useTranslation, } from "../../state/TranslationContext.hooks.js";
 import { Button } from "../ui/button.js";
 import { SettingsInput } from "../ui/settings-controls.js";
-import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
+import { SettingsGroup, SettingsStack } from "./settings-layout.js";
 const STATE_TONE = {
     stopped: "bg-surface text-muted",
     starting: "bg-warn/20 text-warn",
@@ -117,7 +117,7 @@ function RemotePluginRow({ remotePlugin, status, onStart, onStop, onUninstall, t
         group: "remote-plugins-list",
         onActivate: () => void onUninstall(remotePlugin.id, remotePlugin.name),
     });
-    return (_jsxs("div", { className: "rounded-lg border border-border bg-card p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-txt", children: remotePlugin.name }), _jsx("span", { className: "text-xs font-mono text-muted", children: remotePlugin.id }), _jsxs("span", { className: "text-xs text-muted", children: ["v", remotePlugin.version] }), _jsx("span", { className: "rounded-sm bg-bg/40 px-1.5 py-0.5 text-xs text-muted", children: remotePlugin.mode }), _jsx(StateBadge, { state: state })] }), _jsx("p", { className: "mt-0.5 truncate text-xs text-muted", children: remotePlugin.description }), status?.error ? (_jsx("p", { className: "mt-1 text-xs text-warn", children: status.error })) : null] }), _jsxs("div", { className: "flex shrink-0 gap-1", children: [isRunning ? (_jsxs(Button, { ref: toggleRef, size: "sm", variant: "outline", disabled: isBusy, onClick: () => onStop(remotePlugin.id), ...toggleAgentProps, children: [_jsx(Square, { className: "mr-1 h-3 w-3" }), " ", t("remotepluginhost.stop", { defaultValue: "Stop" })] })) : (_jsxs(Button, { ref: toggleRef, size: "sm", variant: "outline", onClick: () => onStart(remotePlugin.id), ...toggleAgentProps, children: [_jsx(Play, { className: "mr-1 h-3 w-3" }), " ", t("remotepluginhost.start", { defaultValue: "Start" })] })), _jsx(Button, { ref: logsRef, size: "sm", variant: "outline", onClick: handleLogsToggle, disabled: logsLoading, ...logsAgentProps, children: t("remotepluginhost.logs", { defaultValue: "Logs" }) }), _jsx(Button, { ref: uninstallRef, size: "sm", variant: "outline", onClick: () => onUninstall(remotePlugin.id, remotePlugin.name), ...uninstallAgentProps, children: _jsx(Trash2, { className: "h-3 w-3" }) })] })] }), _jsxs("div", { className: "mt-2 grid grid-cols-1 gap-1 text-xs text-muted sm:grid-cols-3", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium text-txt/80", children: "host:" }), " ", host.length === 0
+    return (_jsxs("div", { className: "py-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "truncate text-sm font-medium text-txt", children: remotePlugin.name }), _jsx("span", { className: "text-xs font-mono text-muted", children: remotePlugin.id }), _jsxs("span", { className: "text-xs text-muted", children: ["v", remotePlugin.version] }), _jsx("span", { className: "rounded-sm bg-bg/40 px-1.5 py-0.5 text-xs text-muted", children: remotePlugin.mode }), _jsx(StateBadge, { state: state })] }), _jsx("p", { className: "mt-0.5 truncate text-xs text-muted", children: remotePlugin.description }), status?.error ? (_jsx("p", { className: "mt-1 text-xs text-warn", children: status.error })) : null] }), _jsxs("div", { className: "flex shrink-0 gap-1", children: [isRunning ? (_jsxs(Button, { ref: toggleRef, size: "sm", variant: "outline", disabled: isBusy, onClick: () => onStop(remotePlugin.id), ...toggleAgentProps, children: [_jsx(Square, { className: "mr-1 h-3 w-3" }), " ", t("remotepluginhost.stop", { defaultValue: "Stop" })] })) : (_jsxs(Button, { ref: toggleRef, size: "sm", variant: "outline", onClick: () => onStart(remotePlugin.id), ...toggleAgentProps, children: [_jsx(Play, { className: "mr-1 h-3 w-3" }), " ", t("remotepluginhost.start", { defaultValue: "Start" })] })), _jsx(Button, { ref: logsRef, size: "sm", variant: "outline", onClick: handleLogsToggle, disabled: logsLoading, ...logsAgentProps, children: t("remotepluginhost.logs", { defaultValue: "Logs" }) }), _jsx(Button, { ref: uninstallRef, size: "sm", variant: "outline", onClick: () => onUninstall(remotePlugin.id, remotePlugin.name), ...uninstallAgentProps, children: _jsx(Trash2, { className: "h-3 w-3" }) })] })] }), _jsxs("div", { className: "mt-2 grid grid-cols-1 gap-1 text-xs text-muted sm:grid-cols-3", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium text-txt/80", children: "host:" }), " ", host.length === 0
                                 ? t("remotepluginhost.none", { defaultValue: "none" })
                                 : host.join(", ")] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium text-txt/80", children: "bun:" }), " ", bun.length === 0
                                 ? t("remotepluginhost.none", { defaultValue: "none" })
@@ -286,31 +286,17 @@ export function RemotePluginHostSection() {
         status: busy || sourceDir.trim().length === 0 ? "inactive" : "active",
         onActivate: () => void handleInstall(),
     });
-    return (_jsxs(SettingsStack, { children: [_jsx(SettingsGroup, { title: t("remotepluginhost.aboutTitle", {
-                    defaultValue: "About remote plugins",
-                }), children: _jsx(SettingsRow, { label: t("remotepluginhost.aboutTitle", {
-                        defaultValue: "About remote plugins",
-                    }), stacked: true, children: _jsxs("div", { className: "space-y-2", children: [_jsxs("p", { className: "text-xs text-muted", children: [t("remotepluginhost.aboutIntro", {
-                                        defaultValue: "Each remote plugin runs in its own Bun Worker with a scoped state path, log file, and auth token.",
-                                    }), " ", _jsx("span", { className: "text-warn", children: t("remotepluginhost.aboutWarnLeadIn", {
-                                            defaultValue: "Permissions are declared in the manifest and shown here at install.",
-                                        }) })] }), _jsxs("p", { className: "text-xs text-muted", children: [_jsx("span", { className: "text-warn", children: t("remotepluginhost.authTokenLabel", {
-                                            defaultValue: "Auth token:",
-                                        }) }), " ", t("remotepluginhost.authTokenDesc", {
-                                        defaultValue: "a remote plugin can request your API token and call {{appName}}'s HTTP API as you. Only install remote plugins from sources you trust.",
-                                        ...appNameInterpolationVars(branding),
-                                    })] }), storeRoot ? (_jsxs("p", { className: "flex items-center gap-1 text-xs text-muted/80", children: [_jsxs("span", { children: [t("remotepluginhost.storeLabel", { defaultValue: "Store:" }), " ", _jsx("code", { children: storeRoot })] }), _jsx("button", { ref: revealStoreRef, type: "button", className: "flex h-8 w-8 items-center justify-center rounded-md hover:bg-surface", title: t("remotepluginhost.revealInFileManager", {
-                                            defaultValue: "Reveal in file manager",
-                                        }), onClick: () => void desktopOpenPath(storeRoot), ...revealStoreAgentProps, children: _jsx(ExternalLink, { className: "h-3.5 w-3.5" }) })] })) : null] }) }) }), _jsx(SettingsGroup, { title: t("remotepluginhost.installFromDirectory", {
+    return (_jsxs(SettingsStack, { children: [_jsx(SettingsGroup, { title: t("remotepluginhost.installFromDirectory", {
                     defaultValue: "Install from directory",
-                }), footer: error ? _jsx("span", { className: "text-warn", children: error }) : undefined, children: _jsx(SettingsRow, { label: t("remotepluginhost.installFromDirectory", {
-                        defaultValue: "Install from directory",
-                    }), stacked: true, children: _jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [_jsx(SettingsInput, { ref: sourceDirRef, variant: "touch", value: sourceDir, onChange: (e) => setSourceDir(e.target.value), placeholder: "/absolute/path/to/remote-plugin/source", disabled: busy, className: "w-full sm:flex-1", ...sourceDirAgentProps }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { ref: pickFolderRef, type: "button", variant: "outline", onClick: () => void handlePickFolder(), disabled: busy, className: "h-11 w-11 shrink-0 rounded-md p-0", title: t("remotepluginhost.pickFolder", {
-                                            defaultValue: "Pick a folder…",
-                                        }), ...pickFolderAgentProps, children: _jsx(FolderOpen, { className: "h-4 w-4" }) }), _jsx(Button, { ref: installRef, type: "button", onClick: () => void handleInstall(), disabled: busy || sourceDir.trim().length === 0, className: "h-11 flex-1 rounded-md px-4 text-sm sm:flex-none", ...installAgentProps, children: t("remotepluginhost.install", { defaultValue: "Install" }) })] })] }) }) }), _jsx(SettingsGroup, { bare: true, title: t("remotepluginhost.installedCount", {
+                }), description: t("remotepluginhost.authTokenDesc", {
+                    defaultValue: "A remote plugin can call {{appName}}'s API as you. Only install from sources you trust.",
+                    ...appNameInterpolationVars(branding),
+                }), footer: storeRoot || error ? (_jsxs(_Fragment, { children: [storeRoot ? (_jsxs("button", { ref: revealStoreRef, type: "button", className: "flex items-center gap-1.5 text-muted/80 hover:text-txt", onClick: () => void desktopOpenPath(storeRoot), ...revealStoreAgentProps, children: [_jsx("code", { className: "truncate", children: storeRoot }), _jsx(ExternalLink, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true })] })) : null, error ? _jsx("span", { className: "text-warn", children: error }) : null] })) : undefined, children: _jsxs("div", { className: "flex flex-col gap-2 py-2.5 sm:flex-row", children: [_jsx(SettingsInput, { ref: sourceDirRef, variant: "touch", value: sourceDir, onChange: (e) => setSourceDir(e.target.value), placeholder: "/absolute/path/to/remote-plugin/source", disabled: busy, className: "w-full sm:flex-1", ...sourceDirAgentProps }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { ref: pickFolderRef, type: "button", variant: "outline", onClick: () => void handlePickFolder(), disabled: busy, className: "h-11 w-11 shrink-0 rounded-md p-0", title: t("remotepluginhost.pickFolder", {
+                                        defaultValue: "Pick a folder…",
+                                    }), ...pickFolderAgentProps, children: _jsx(FolderOpen, { className: "h-4 w-4" }) }), _jsx(Button, { ref: installRef, type: "button", onClick: () => void handleInstall(), disabled: busy || sourceDir.trim().length === 0, className: "h-11 flex-1 rounded-md px-4 text-sm sm:flex-none", ...installAgentProps, children: t("remotepluginhost.install", { defaultValue: "Install" }) })] })] }) }), _jsx(SettingsGroup, { bare: true, title: t("remotepluginhost.installedCount", {
                     count: remotePlugins.length,
                     defaultValue: "Installed ({{count}})",
-                }), children: remotePlugins.length === 0 ? (_jsx("p", { className: "rounded-lg border border-border bg-card px-4 py-3 text-xs text-muted", children: t("remotepluginhost.emptyLeadIn", {
-                        defaultValue: "No remote plugins installed. Install one from a local directory above.",
-                    }) })) : (_jsx("div", { className: "space-y-2", children: remotePlugins.map((remotePlugin) => (_jsx(RemotePluginRow, { remotePlugin: remotePlugin, status: statuses[remotePlugin.id], onStart: handleStart, onStop: handleStop, onUninstall: handleUninstall, t: t }, remotePlugin.id))) })) })] }));
+                }), children: remotePlugins.length === 0 ? (_jsx("p", { className: "px-1 py-3 text-xs text-muted", children: t("remotepluginhost.emptyLeadIn", {
+                        defaultValue: "No remote plugins installed.",
+                    }) })) : (_jsx("div", { className: "flex flex-col", children: remotePlugins.map((remotePlugin) => (_jsx(RemotePluginRow, { remotePlugin: remotePlugin, status: statuses[remotePlugin.id], onStart: handleStart, onStop: handleStop, onUninstall: handleUninstall, t: t }, remotePlugin.id))) })) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"RuntimeSettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/RuntimeSettingsSection.tsx"],"names":[],"mappings":"AA8EA,wBAAgB,sBAAsB,4CAuOrC"}
+{"version":3,"file":"RuntimeSettingsSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/RuntimeSettingsSection.tsx"],"names":[],"mappings":"AA6EA,wBAAgB,sBAAsB,4CAuNrC"}

package/components/settings/RuntimeSettingsSection.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Cloud, Laptop, RadioTower } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
@@ -9,7 +9,7 @@ import { readPersistedMobileRuntimeMode } from "../../first-run/mobile-runtime-m
 import { reloadIntoFirstRunRuntime, } from "../../first-run/reload-into-first-run-runtime.js";
 import { useRuntimeMode } from "../../hooks/useRuntimeMode.js";
 import { isAndroidCloudBuild } from "../../platform/android-runtime.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { inferAgentRuntimeTarget, } from "../../state/agent-runtime-target.js";
 import { loadPersistedActiveServer } from "../../state/persistence.js";
 import { SettingsActionButton } from "./settings-agent-rows.js";
@@ -28,7 +28,7 @@ function RuntimeModeRow({ target, icon, label, description, active, disabled, on
 }
 const STORE_LOCAL_DISABLED_DOCS_URL = "https://github.com/eliza-ai/eliza/blob/develop/docs/desktop/build-variants.md";
 export function RuntimeSettingsSection() {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const { state: runtimeModeState } = useRuntimeMode();
     const [migrationMessage, setMigrationMessage] = useState(null);
     const [migrationBusy, setMigrationBusy] = useState(false);
@@ -60,9 +60,6 @@ export function RuntimeSettingsSection() {
                 label: t("settings.runtime.cloudLabel", {
                     defaultValue: "Cloud agent",
                 }),
-                description: t("settings.runtime.cloudDescription", {
-                    defaultValue: "Use an Eliza Cloud hosted agent.",
-                }),
                 icon: Cloud,
             },
         ];
@@ -72,9 +69,6 @@ export function RuntimeSettingsSection() {
                 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,
@@ -85,9 +79,6 @@ export function RuntimeSettingsSection() {
             label: t("settings.runtime.remoteLabel", {
                 defaultValue: "Remote",
             }),
-            description: t("settings.runtime.remoteDescription", {
-                defaultValue: "Connect to an agent on another machine.",
-            }),
             icon: RadioTower,
         });
         return base;
@@ -154,14 +145,12 @@ export function RuntimeSettingsSection() {
                 }), children: actions.map((action) => {
                     const active = currentRuntime.kind === action.target;
                     const disabled = action.disabled === true;
-                    return (_jsx(RuntimeModeRow, { target: action.target, icon: action.icon, label: action.label, description: disabled ? action.disabledReason : action.description, active: active, disabled: disabled, onSelect: () => handleSwitch(action.target) }, action.target));
+                    return (_jsx(RuntimeModeRow, { target: action.target, icon: action.icon, label: action.label, description: disabled ? action.disabledReason : undefined, active: active, disabled: disabled, onSelect: () => handleSwitch(action.target) }, action.target));
                 }) }), storeBuild ? (_jsx(SettingsGroup, { title: t("settings.runtime.sandboxGroupTitle", {
                     defaultValue: "Sandbox build",
-                }), footer: _jsxs(_Fragment, { children: [t("settings.runtime.localDisabledStoreNote", {
-                            defaultValue: "This store build runs in a sandbox. ",
-                        }), _jsx("a", { href: STORE_LOCAL_DISABLED_DOCS_URL, target: "_blank", rel: "noreferrer", className: "text-accent underline", children: t("settings.runtime.localDisabledStoreLink", {
-                                defaultValue: "Why?",
-                            }) })] }), children: isElectrobunRuntime() ? (_jsx(SettingsRow, { label: t("settings.runtime.importDirectState", {
+                }), footer: _jsx("a", { href: STORE_LOCAL_DISABLED_DOCS_URL, target: "_blank", rel: "noreferrer", className: "text-accent underline", children: t("settings.runtime.localDisabledStoreLink", {
+                        defaultValue: "Why is local disabled?",
+                    }) }), children: isElectrobunRuntime() ? (_jsx(SettingsRow, { label: t("settings.runtime.importDirectState", {
                         defaultValue: "Import direct-build data",
                     }), description: migrationMessage ?? undefined, stacked: true, children: _jsx(SettingsActionButton, { agentId: "runtime-import-direct-state", agentLabel: t("settings.runtime.importDirectState", {
                             defaultValue: "Import direct-build data",

package/components/settings/SecretsManagerSection.d.ts

@@ -1,4 +1,4 @@
-import { type VaultTab } from "../../hooks/useSecretsManagerModal";
+import { type VaultTab } from "../../hooks/useSecretsManagerModal.js";
 export declare function SecretsManagerSection(): import("react/jsx-runtime").JSX.Element;
 export declare function SecretsManagerModalRoot(): import("react/jsx-runtime").JSX.Element;
 export interface VaultModalProps {

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

@@ -1 +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;AAwE5C,wBAAgB,qBAAqB,4CAuEpC;AAED,wBAAgB,uBAAuB,4CAetC;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"}
+{"version":3,"file":"SecretsManagerSection.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/SecretsManagerSection.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,oCAAoC,CAAC;AAuE5C,wBAAgB,qBAAqB,4CAkEpC;AAED,wBAAgB,uBAAuB,4CAetC;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"}

package/components/settings/SecretsManagerSection.js

@@ -3,7 +3,7 @@ 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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../ui/dialog.js";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "../ui/dialog.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
 import { SettingsActionButton } from "./settings-agent-rows.js";
 import { SettingsGroup, SettingsRow, SettingsStack } from "./settings-layout.js";
@@ -74,7 +74,7 @@ export function SecretsManagerSection() {
         if (!isOpen)
             void refreshSummary();
     }, [isOpen, refreshSummary]);
-    return (_jsx(SettingsStack, { children: _jsx(SettingsGroup, { title: "Vault", description: "API keys, tokens, and saved logins.", footer: `Open the full vault with ${getShortcutLabel()}.`, children: _jsx(SettingsRow, { icon: KeyRound, label: _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "min-w-0", 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" })) : null, enabledCount > 1 ? (_jsxs("span", { className: "rounded-full border border-border bg-surface px-1.5 py-0.5 text-2xs text-muted", children: ["+", enabledCount - 1, " more"] })) : null] }), description: "Primary secrets backend for this device.", control: _jsx(SettingsActionButton, { agentId: "secrets-manage", agentLabel: "Open the vault", agentDescription: "Open the full vault manager modal", agentGroup: "secrets", variant: "outline", size: "sm", className: "h-9 shrink-0 rounded-md", onClick: () => dispatchSecretsManagerOpen(), children: "Manage\u2026" }) }) }) }));
+    return (_jsx(SettingsStack, { children: _jsx(SettingsGroup, { title: "Vault", children: _jsx(SettingsRow, { icon: KeyRound, label: _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "min-w-0", 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" })) : null, enabledCount > 1 ? (_jsxs("span", { className: "rounded-full border border-border bg-surface px-1.5 py-0.5 text-2xs text-muted", children: ["+", enabledCount - 1, " more"] })) : null] }), control: _jsx(SettingsActionButton, { agentId: "secrets-manage", agentLabel: "Open the vault", agentDescription: "Open the full vault manager modal", agentGroup: "secrets", variant: "outline", size: "sm", className: "h-9 shrink-0 rounded-md", onClick: () => dispatchSecretsManagerOpen(), children: "Manage\u2026" }) }) }) }));
 }
 export function SecretsManagerModalRoot() {
     // Forward the modal-state hook's initial-tab / focus payload directly to
@@ -317,5 +317,5 @@ function VaultBody({ open, onOpenChange, initialTab, initialFocusKey, initialFoc
         }
     }, []);
     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-sm 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: "Backends, secrets, logins, and routing. Local storage is always available." })] }), _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-sm 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-xs 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(SettingsActionButton, { agentId: "secrets-close", agentLabel: "Close the vault", agentGroup: "secrets", variant: "ghost", size: "sm", className: "h-9 rounded-sm", onClick: () => onOpenChange(false), disabled: saving, children: "Close" }) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(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-sm border border-border/50 bg-bg/40 px-2 py-0.5 font-mono text-2xs font-normal text-muted", children: getShortcutLabel() })] }) }), _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-sm 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 }) })] })] })] })) }), _jsx(DialogFooter, { className: "flex shrink-0 flex-row items-center justify-end gap-3 pt-3", children: _jsx("div", { className: "flex shrink-0 items-center gap-2", children: _jsx(SettingsActionButton, { agentId: "secrets-close", agentLabel: "Close the vault", agentGroup: "secrets", variant: "ghost", size: "sm", className: "h-9 rounded-sm", onClick: () => onOpenChange(false), disabled: saving, children: "Close" }) }) })] }));
 }

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

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

package/components/settings/SecuritySettingsSection.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { KeyRound, Laptop, Loader2, Monitor, RefreshCw, Shield, Smartphone, Trash2, } from "lucide-react";
-import { useCallback, useEffect, useId, useState, } from "react";
+import { memo, useCallback, useEffect, useId, useState, } from "react";
 import { useAgentElement } from "../../agent-surface/index.js";
 import { authChangePassword, authListSessions, authMe, authRevokeSession, authSetup, } from "../../api/auth-client.js";
 import { useBootConfig } from "../../config/boot-config-react.hooks.js";
@@ -9,6 +9,8 @@ import { useTranslation } from "../../state/TranslationContext.hooks.js";
 import { Button } from "../ui/button.js";
 import { Input } from "../ui/input.js";
 import { Label } from "../ui/label.js";
+import { AdvancedToggle } from "./AdvancedToggle.js";
+import { useAdvancedSettingsEnabled } from "./AdvancedToggle.hooks.js";
 import { SettingsGroup, SettingsStack } from "./settings-layout.js";
 function formatRelativeTime(ms) {
     if (ms == null)
@@ -36,7 +38,7 @@ function DeviceIcon({ userAgent }) {
     return _jsx(Laptop, { className: "h-4 w-4 shrink-0 opacity-70" });
 }
 function SectionShell({ icon, title, children, }) {
-    return (_jsx(SettingsGroup, { bare: true, title: _jsxs("span", { className: "flex items-center gap-2 normal-case tracking-normal text-sm text-txt-strong", children: [icon, title] }), children: _jsx("div", { className: "space-y-4 rounded-lg border border-border bg-card p-4 sm:p-5", children: children }) }));
+    return (_jsx(SettingsGroup, { bare: true, title: _jsxs("span", { className: "flex items-center gap-2 normal-case tracking-normal text-sm text-txt-strong", children: [icon, title] }), children: _jsx("div", { className: "space-y-4", children: children }) }));
 }
 async function fetchAccessState() {
     const result = await authMe();
@@ -131,7 +133,7 @@ function currentPageOrigin() {
     return window.location.origin;
 }
 function AccessInfoRow({ label, value, detail, }) {
-    return (_jsxs("div", { className: "grid gap-1 border-t border-border/30 py-2.5 first:border-t-0 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-3", children: [_jsx("div", { className: "text-xs font-medium text-muted", children: label }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx("div", { className: "break-words text-sm font-medium text-txt-strong", children: value }), _jsx("p", { className: "text-xs leading-5 text-muted", children: detail })] })] }));
+    return (_jsxs("div", { className: "grid gap-1 py-2 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-3", children: [_jsx("div", { className: "text-xs font-medium text-muted", children: label }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx("div", { className: "break-words text-sm font-medium text-txt-strong", children: value }), _jsx("p", { className: "text-xs leading-5 text-muted", children: detail })] })] }));
 }
 function StatusBadge({ children, tone = "neutral", }) {
     return (_jsx("span", { className: cn("inline-flex w-fit shrink-0 rounded-full border px-2.5 py-1 text-xs font-medium", tone === "ok" && "border-ok/35 bg-ok/12 text-ok", tone === "warn" && "border-warn/40 bg-warn/14 text-warn", tone === "danger" && "border-danger/40 bg-danger/10 text-danger", tone === "neutral" && "border-border/60 bg-bg/70 text-muted"), children: children }));
@@ -139,6 +141,7 @@ function StatusBadge({ children, tone = "neutral", }) {
 function AccessModeSection({ state, onRefresh, }) {
     const bootConfig = useBootConfig();
     const { t } = useTranslation();
+    const advancedEnabled = useAdvancedSettingsEnabled();
     const { ref: accessRefreshRef, agentProps: accessRefreshAgentProps } = useAgentElement({
         id: "security-access-refresh",
         role: "button",
@@ -300,22 +303,18 @@ function AccessModeSection({ state, onRefresh, }) {
     const pageUrlLabel = pageEndpoint && !isLoopbackHost(pageEndpoint.hostname)
         ? t("security.access.pageUrl.remote", { defaultValue: "Remote URL" })
         : t("security.access.pageUrl.local", { defaultValue: "Local URL" });
-    return (_jsxs(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: t("security.access.sectionTitle", { defaultValue: "Access" }), children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "text-sm font-medium text-txt-strong", children: title }), _jsx("p", { className: "max-w-2xl text-sm leading-6 text-muted", children: detail })] }), _jsx(StatusBadge, { tone: statusTone, children: state.phase === "loading" ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), status] })) : (status) })] }), _jsxs("div", { className: "rounded-sm border border-border/40 bg-bg/35 px-3", children: [_jsx(AccessInfoRow, { label: t("security.access.row.currentBrowser", {
-                            defaultValue: "Current browser",
-                        }), value: currentBrowserValue, detail: currentBrowserDetail }), _jsx(AccessInfoRow, { label: t("security.access.row.localAccess", {
-                            defaultValue: "Local access",
-                        }), value: t("security.access.row.enabled", { defaultValue: "Enabled" }), detail: t("security.access.row.localAccessDetail", {
-                            defaultValue: "Host-machine localhost and desktop renderer sessions do not require the remote password.",
-                        }) }), _jsx(AccessInfoRow, { label: t("security.access.row.remotePassword", {
+    return (_jsxs(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: t("security.access.sectionTitle", { defaultValue: "Access" }), children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsx("div", { className: "text-sm font-medium text-txt-strong", children: title }), _jsx("p", { className: "max-w-2xl text-sm leading-6 text-muted", children: detail })] }), _jsx(StatusBadge, { tone: statusTone, children: state.phase === "loading" ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), status] })) : (status) })] }), _jsxs("div", { className: "flex flex-col", children: [_jsx(AccessInfoRow, { label: t("security.access.row.remotePassword", {
                             defaultValue: "Remote password",
-                        }), value: _jsx(StatusBadge, { tone: remotePasswordTone, children: remotePasswordValue }), detail: remotePasswordDetail }), pageUrl && pageEndpointDescription && (_jsx(AccessInfoRow, { label: pageUrlLabel, value: pageUrl, detail: pageEndpointDescription.detail })), apiBase && apiEndpointDescription && (_jsx(AccessInfoRow, { label: t("security.access.row.apiBase", {
-                            defaultValue: "API base",
-                        }), value: trimTrailingSlash(apiBase), detail: `${apiEndpointDescription.value}: ${apiEndpointDescription.detail}` })), state.phase === "loaded" && (_jsx(AccessInfoRow, { label: t("security.access.row.identity", {
+                        }), value: _jsx(StatusBadge, { tone: remotePasswordTone, children: remotePasswordValue }), detail: remotePasswordDetail }), state.phase === "loaded" && (_jsx(AccessInfoRow, { label: t("security.access.row.identity", {
                             defaultValue: "Identity",
                         }), value: state.identity.displayName, detail: t("security.access.row.signedInAs", {
                             kind: state.identity.kind,
                             defaultValue: "Signed in as {{kind}}.",
-                        }) }))] }), _jsxs("button", { ref: accessRefreshRef, ...accessRefreshAgentProps, type: "button", onClick: () => void onRefresh(), className: "inline-flex items-center gap-1.5 text-xs text-muted transition-colors hover:text-txt-strong", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), t("security.refresh", { defaultValue: "Refresh" })] })] }));
+                        }) })), advancedEnabled && (_jsxs(_Fragment, { children: [_jsx(AccessInfoRow, { label: t("security.access.row.currentBrowser", {
+                                    defaultValue: "Current browser",
+                                }), value: currentBrowserValue, detail: currentBrowserDetail }), pageUrl && pageEndpointDescription && (_jsx(AccessInfoRow, { label: pageUrlLabel, value: pageUrl, detail: pageEndpointDescription.detail })), apiBase && apiEndpointDescription && (_jsx(AccessInfoRow, { label: t("security.access.row.apiBase", {
+                                    defaultValue: "API base",
+                                }), value: trimTrailingSlash(apiBase), detail: `${apiEndpointDescription.value}: ${apiEndpointDescription.detail}` }))] }))] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("button", { ref: accessRefreshRef, ...accessRefreshAgentProps, type: "button", onClick: () => void onRefresh(), className: "inline-flex items-center gap-1.5 text-xs text-muted transition-colors hover:text-txt-strong", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), t("security.refresh", { defaultValue: "Refresh" })] }), _jsx(AdvancedToggle, { label: "Advanced" })] })] }));
 }
 function SessionsSection() {
     const { t } = useTranslation();
@@ -381,11 +380,11 @@ function SessionsSection() {
                         defaultValue: "Loading sessions...",
                     })] })), state.phase === "error" && (_jsx("p", { className: "py-2 text-sm text-danger", children: state.message })), state.phase === "loaded" && (_jsxs("div", { className: "space-y-3", children: [state.sessions.length === 0 ? (_jsx("p", { className: "text-sm text-muted", children: t("security.sessions.empty", {
                             defaultValue: "No active sessions.",
-                        }) })) : (_jsx("div", { className: "divide-y divide-border/30", children: state.sessions.map((session) => (_jsx(SessionRow, { session: session, revoking: revokingIds.has(session.id), onRevoke: handleRevoke }, session.id))) })), _jsxs("div", { className: "flex items-center justify-between pt-1", children: [_jsxs("button", { ref: sessionsRefreshRef, ...sessionsRefreshAgentProps, type: "button", onClick: load, className: "inline-flex items-center gap-1.5 text-xs text-muted transition-colors hover:text-txt-strong", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), t("security.refresh", { defaultValue: "Refresh" })] }), state.sessions.filter((s) => !s.current).length > 1 && (_jsx(Button, { ref: revokeOthersRef, ...revokeOthersAgentProps, variant: "outline", size: "sm", onClick: handleRevokeOthers, className: "border-danger/40 text-xs text-danger hover:bg-danger/10", children: t("security.sessions.signOutEverywhere", {
+                        }) })) : (_jsx("div", { className: "flex flex-col", children: state.sessions.map((session) => (_jsx(SessionRow, { session: session, revoking: revokingIds.has(session.id), onRevoke: handleRevoke }, session.id))) })), _jsxs("div", { className: "flex items-center justify-between pt-1", children: [_jsxs("button", { ref: sessionsRefreshRef, ...sessionsRefreshAgentProps, type: "button", onClick: load, className: "inline-flex items-center gap-1.5 text-xs text-muted transition-colors hover:text-txt-strong", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), t("security.refresh", { defaultValue: "Refresh" })] }), state.sessions.filter((s) => !s.current).length > 1 && (_jsx(Button, { ref: revokeOthersRef, ...revokeOthersAgentProps, variant: "outline", size: "sm", onClick: handleRevokeOthers, className: "border-danger/40 text-xs text-danger hover:bg-danger/10", children: t("security.sessions.signOutEverywhere", {
                                     defaultValue: "Sign out everywhere else",
                                 }) }))] })] }))] }));
 }
-function SessionRow({ session, revoking, onRevoke, }) {
+const SessionRow = memo(function SessionRow({ session, revoking, onRevoke, }) {
     const { t } = useTranslation();
     const { ref: revokeRef, agentProps: revokeAgentProps } = useAgentElement({
         id: `security-session-revoke-${session.id}`,
@@ -410,7 +409,7 @@ function SessionRow({ session, revoking, onRevoke, }) {
                         }) })] }), !session.current && (_jsx(Button, { ref: revokeRef, ...revokeAgentProps, variant: "ghost", size: "sm", disabled: revoking, onClick: () => onRevoke(session.id), className: "shrink-0 text-xs text-danger hover:bg-danger/10 hover:text-danger", "aria-label": t("security.sessions.revoke", {
                     defaultValue: "Revoke this session",
                 }), children: revoking ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Trash2, { className: "h-3 w-3" })) }))] }));
-}
+});
 function RemotePasswordSection({ accessState, onAccessChanged, }) {
     const { t } = useTranslation();
     const displayNameId = useId().replace(/:/g, "");
@@ -542,13 +541,6 @@ function RemotePasswordSection({ accessState, onAccessChanged, }) {
                 defaultValue: "Remote password",
             }), children: _jsx("p", { className: "text-sm text-muted", children: message }) }));
     }
-    const description = localAccess
-        ? t("security.password.description.local", {
-            defaultValue: "Set the password used by browsers connecting from another machine.",
-        })
-        : t("security.password.description.remote", {
-            defaultValue: "Change the password for this remote browser session.",
-        });
     const buttonLabel = setupMode || !accessState.access.passwordConfigured
         ? t("security.password.setButton", {
             defaultValue: "Set remote password",
@@ -556,39 +548,39 @@ function RemotePasswordSection({ accessState, onAccessChanged, }) {
         : t("security.password.changeButton", {
             defaultValue: "Change remote password",
         });
-    return (_jsxs(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: t("security.password.title", {
+    return (_jsx(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: t("security.password.title", {
             defaultValue: "Remote password",
-        }), children: [_jsx("p", { className: "text-sm leading-6 text-muted", children: description }), _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", noValidate: true, children: [setupMode && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: displayNameId, className: "text-xs text-muted", children: t("security.password.field.displayName", {
-                                    defaultValue: "Display name",
-                                }) }), _jsx(Input, { ref: displayNameRef, ...displayNameAgentProps, id: displayNameId, type: "text", autoComplete: "username", value: displayName, onChange: (event) => {
-                                    setDisplayName(event.target.value);
-                                    if (state.phase === "error")
-                                        setState({ phase: "idle" });
-                                }, disabled: isSubmitting, className: "h-11" })] })), currentPasswordRequired && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: currentPasswordId, className: "text-xs text-muted", children: t("security.password.field.current", {
-                                    defaultValue: "Current password",
-                                }) }), _jsx(Input, { ref: currentPasswordRef, ...currentPasswordAgentProps, id: currentPasswordId, type: "password", autoComplete: "current-password", value: currentPassword, onChange: (event) => {
-                                    setCurrentPassword(event.target.value);
-                                    if (state.phase === "error")
-                                        setState({ phase: "idle" });
-                                }, disabled: isSubmitting, className: "h-11" })] })), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: newPasswordId, className: "text-xs text-muted", children: t("security.password.field.new", {
-                                    defaultValue: "New password",
-                                }) }), _jsx(Input, { ref: newPasswordRef, ...newPasswordAgentProps, id: newPasswordId, type: "password", autoComplete: "new-password", placeholder: t("security.password.field.newPlaceholder", {
-                                    defaultValue: "At least 12 characters",
-                                }), value: newPassword, onChange: (event) => {
-                                    setNewPassword(event.target.value);
-                                    if (state.phase === "error")
-                                        setState({ phase: "idle" });
-                                }, disabled: isSubmitting, className: "h-11" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: confirmPasswordId, className: "text-xs text-muted", children: t("security.password.field.confirm", {
-                                    defaultValue: "Confirm new password",
-                                }) }), _jsx(Input, { ref: confirmPasswordRef, ...confirmPasswordAgentProps, id: confirmPasswordId, type: "password", autoComplete: "new-password", value: confirmPassword, onChange: (event) => {
-                                    setConfirmPassword(event.target.value);
-                                    if (state.phase === "error")
-                                        setState({ phase: "idle" });
-                                }, disabled: isSubmitting, "aria-invalid": confirmMismatch, className: cn("h-11", confirmMismatch && "border-danger focus-visible:border-danger") }), confirmMismatch && (_jsx("p", { className: "text-xs text-danger", children: t("security.password.error.mismatchShort", {
-                                    defaultValue: "Passwords do not match.",
-                                }) }))] }), state.phase === "error" && (_jsx("p", { role: "alert", className: "text-sm text-danger", children: state.message })), state.phase === "success" && (_jsx("p", { className: "text-sm text-ok", children: state.message })), _jsx("div", { className: "flex justify-end pt-1", children: _jsx(Button, { ref: passwordSubmitRef, ...passwordSubmitAgentProps, type: "submit", disabled: !canSubmit, size: "sm", children: isSubmitting
-                                ? t("security.password.saving", { defaultValue: "Saving..." })
-                                : buttonLabel }) })] })] }));
+        }), children: _jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", noValidate: true, children: [setupMode && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: displayNameId, className: "text-xs text-muted", children: t("security.password.field.displayName", {
+                                defaultValue: "Display name",
+                            }) }), _jsx(Input, { ref: displayNameRef, ...displayNameAgentProps, id: displayNameId, type: "text", autoComplete: "username", value: displayName, onChange: (event) => {
+                                setDisplayName(event.target.value);
+                                if (state.phase === "error")
+                                    setState({ phase: "idle" });
+                            }, disabled: isSubmitting, className: "h-11" })] })), currentPasswordRequired && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: currentPasswordId, className: "text-xs text-muted", children: t("security.password.field.current", {
+                                defaultValue: "Current password",
+                            }) }), _jsx(Input, { ref: currentPasswordRef, ...currentPasswordAgentProps, id: currentPasswordId, type: "password", autoComplete: "current-password", value: currentPassword, onChange: (event) => {
+                                setCurrentPassword(event.target.value);
+                                if (state.phase === "error")
+                                    setState({ phase: "idle" });
+                            }, disabled: isSubmitting, className: "h-11" })] })), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: newPasswordId, className: "text-xs text-muted", children: t("security.password.field.new", {
+                                defaultValue: "New password",
+                            }) }), _jsx(Input, { ref: newPasswordRef, ...newPasswordAgentProps, id: newPasswordId, type: "password", autoComplete: "new-password", placeholder: t("security.password.field.newPlaceholder", {
+                                defaultValue: "At least 12 characters",
+                            }), value: newPassword, onChange: (event) => {
+                                setNewPassword(event.target.value);
+                                if (state.phase === "error")
+                                    setState({ phase: "idle" });
+                            }, disabled: isSubmitting, className: "h-11" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: confirmPasswordId, className: "text-xs text-muted", children: t("security.password.field.confirm", {
+                                defaultValue: "Confirm new password",
+                            }) }), _jsx(Input, { ref: confirmPasswordRef, ...confirmPasswordAgentProps, id: confirmPasswordId, type: "password", autoComplete: "new-password", value: confirmPassword, onChange: (event) => {
+                                setConfirmPassword(event.target.value);
+                                if (state.phase === "error")
+                                    setState({ phase: "idle" });
+                            }, disabled: isSubmitting, "aria-invalid": confirmMismatch, className: cn("h-11", confirmMismatch && "border-danger ") }), confirmMismatch && (_jsx("p", { className: "text-xs text-danger", children: t("security.password.error.mismatchShort", {
+                                defaultValue: "Passwords do not match.",
+                            }) }))] }), state.phase === "error" && (_jsx("p", { role: "alert", className: "text-sm text-danger", children: state.message })), state.phase === "success" && (_jsx("p", { className: "text-sm text-ok", children: state.message })), _jsx("div", { className: "flex justify-end pt-1", children: _jsx(Button, { ref: passwordSubmitRef, ...passwordSubmitAgentProps, type: "submit", disabled: !canSubmit, size: "sm", children: isSubmitting
+                            ? t("security.password.saving", { defaultValue: "Saving..." })
+                            : buttonLabel }) })] }) }));
 }
 export function SecuritySettingsSection() {
     const [accessState, setAccessState] = useState({

package/components/settings/SubscriptionStatus.d.ts

@@ -1,4 +1,4 @@
-import { type SubscriptionProviderSelectionId } from "../../providers";
+import { type SubscriptionProviderSelectionId } from "../../providers/index.js";
 export interface SubscriptionStatusProps {
     resolvedSelectedId: string | null;
     subscriptionStatus: Array<{

package/components/settings/SubscriptionStatus.js

@@ -5,7 +5,7 @@ import { useAgentElement } from "../../agent-surface/index.js";
 import { client } from "../../api/index.js";
 import { useTimeout } from "../../hooks/useTimeout.js";
 import { getStoredSubscriptionProvider, } from "../../providers/index.js";
-import { useApp } from "../../state/index.js";
+import { useAppSelector } from "../../state/index.js";
 import { openExternalUrl } from "../../utils/index.js";
 import { formatSubscriptionRequestError, normalizeOpenAICallbackInput, } from "../../utils/subscription-auth.js";
 import { Input } from "../ui/input.js";
@@ -35,7 +35,7 @@ function StatusIcon({ connected }) {
     return (_jsx("span", { className: connected ? "text-ok" : "text-warn", children: connected ? (_jsx(CheckCircle2, { className: "h-3.5 w-3.5", "aria-hidden": true })) : (_jsx(AlertTriangle, { className: "h-3.5 w-3.5", "aria-hidden": true })) }));
 }
 function SubscriptionProviderPanel({ providerId, connected, canDisconnect = true, externalNotice, configuredButInvalid, titleConnected, titleDisconnected, loginLabel, loginHint, connectedSummary, invalidWarning, noteWhenConnected, warningBanner, preOauthSlot, oauthInstructions, oauthInputPlaceholder, oauthInputType = "text", oauthCode, setOauthCode, oauthStarted, oauthError, oauthExchangeBusy, exchangeButtonLabel, exchangeBusyLabel, disconnecting, onStartOauth, onExchange, onResetFlow, onDisconnect, bodyOverride, }) {
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     const slug = `sub-${providerId.replace(/-subscription$/, "")}`;
     const { ref: oauthCodeRef, agentProps: oauthCodeAgentProps } = useAgentElement({
         id: `${slug}-oauth-code`,
@@ -50,7 +50,7 @@ function SubscriptionProviderPanel({ providerId, connected, canDisconnect = true
 }
 export function SubscriptionStatus({ resolvedSelectedId, subscriptionStatus, anthropicConnected, setAnthropicConnected, anthropicCliDetected, openaiConnected, setOpenaiConnected, handleSelectSubscription, loadSubscriptionStatus, }) {
     const { setTimeout } = useTimeout();
-    const { t } = useApp();
+    const t = useAppSelector((s) => s.t);
     /* ── Anthropic ─────────────────────────────────────────────────── */
     const [subscriptionTab, setSubscriptionTab] = useState("token");
     const [setupTokenValue, setSetupTokenValue] = useState("");
@@ -295,7 +295,7 @@ export function SubscriptionStatus({ resolvedSelectedId, subscriptionStatus, ant
         ? subscriptionStatus.filter((status) => status.provider === genericStoredProvider)
         : [];
     const genericStatus = selectRepresentativeSubscriptionStatus(genericStatuses);
-    return (_jsxs("div", { className: "border-t border-border/40 pt-4", children: [resolvedSelectedId === "anthropic-subscription" && (_jsx(SubscriptionProviderPanel, { providerId: "anthropic-subscription", connected: anthropicConnected, canDisconnect: false, externalNotice: anthropicCliDetected && !anthropicConnected ? (_jsxs("div", { className: "rounded-sm border border-border/40 bg-card/40 px-2.5 py-2 text-xs leading-relaxed", children: [_jsx("div", { className: "font-semibold", children: t("subscriptionstatus.ClaudeCodeCliDetectedTitle") }), _jsx("p", { className: "mt-1 text-muted", children: t("subscriptionstatus.ClaudeCodeCliDetectedBody") })] })) : undefined, configuredButInvalid: Boolean(anthropicStatus?.configured && !anthropicStatus.valid), titleConnected: t("subscriptionstatus.ConnectedToClaudeSubscription"), titleDisconnected: anthropicCliDetected
+    return (_jsxs("div", { className: "pt-2", children: [resolvedSelectedId === "anthropic-subscription" && (_jsx(SubscriptionProviderPanel, { providerId: "anthropic-subscription", connected: anthropicConnected, canDisconnect: false, externalNotice: anthropicCliDetected && !anthropicConnected ? (_jsxs("div", { className: "rounded-sm border border-border/40 bg-card/40 px-2.5 py-2 text-xs leading-relaxed", children: [_jsx("div", { className: "font-semibold", children: t("subscriptionstatus.ClaudeCodeCliDetectedTitle") }), _jsx("p", { className: "mt-1 text-muted", children: t("subscriptionstatus.ClaudeCodeCliDetectedBody") })] })) : undefined, configuredButInvalid: Boolean(anthropicStatus?.configured && !anthropicStatus.valid), titleConnected: t("subscriptionstatus.ConnectedToClaudeSubscription"), titleDisconnected: anthropicCliDetected
                     ? t("subscriptionstatus.ClaudeCodeCliDetectedTitle")
                     : t("subscriptionstatus.ClaudeSubscriptionTitle"), loginLabel: t("settings.subscription.loginWithAnthropic"), loginHint: t("subscriptionstatus.RequiresClaudePro"), connectedSummary: t("subscriptionstatus.YourClaudeSubscrip"), invalidWarning: t("subscriptionstatus.ClaudeSubscription"), warningBanner: _jsx("div", { className: "rounded-sm border border-warn/30 bg-warn/5 px-2.5 py-2 text-xs leading-relaxed", children: _jsx("span", { className: "font-semibold", children: t("subscriptionstatus.ClaudeTosWarningShort") }) }), preOauthSlot: anthropicTabs, oauthInstructions: _jsx("p", { className: "text-xs text-muted", children: t("subscriptionstatus.AfterLoggingInCo") }), oauthInputPlaceholder: t("subscriptionstatus.PasteTheAuthorizat"), oauthCode: anthropicCode, setOauthCode: (v) => {
                     setAnthropicCode(v);

package/components/settings/VaultInventoryPanel.d.ts

@@ -21,7 +21,7 @@
  * Hard rule: revealed values never persist in component state past the
  * 10-second auto-hide window.
  */
-import type { VaultEntryMeta } from "./vault-tabs/types";
+import type { VaultEntryMeta } from "./vault-tabs/types.js";
 export interface VaultInventoryPanelProps {
     /**
      * Pre-fetched entries owned by the parent tab. When provided, the

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

@@ -1 +1 @@
-{"version":3,"file":"VaultInventoryPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/VaultInventoryPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AA2BH,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,oBAAoB,CAAC;AA2D7E,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,wBAA6B,2CAwJvE"}
+{"version":3,"file":"VaultInventoryPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/VaultInventoryPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AA8BH,OAAO,KAAK,EAAsB,cAAc,EAAE,MAAM,oBAAoB,CAAC;AA2D7E,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,wBAA6B,2CAiJvE"}