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

package/components/settings/SecuritySettingsSection.js

@@ -1,9 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, cn, Input, Label } from "@elizaos/ui";
 import { KeyRound, Laptop, Loader2, Monitor, RefreshCw, Shield, Smartphone, Trash2, } from "lucide-react";
 import { 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.js";
+import { useBootConfig } from "../../config/boot-config-react.hooks.js";
+import { cn } from "../../lib/utils.js";
+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 { SettingsGroup, SettingsStack } from "./settings-layout.js";
 function formatRelativeTime(ms) {
     if (ms == null)
         return "local only";
@@ -29,11 +35,8 @@ function DeviceIcon({ userAgent }) {
     }
     return _jsx(Laptop, { className: "h-4 w-4 shrink-0 opacity-70" });
 }
-const SECTION_CLASS = "rounded-lg border border-border/50 bg-bg/40 p-4 shadow-sm space-y-4 sm:p-5";
-const SECTION_TITLE_CLASS = "flex items-center gap-2 text-sm font-semibold text-foreground/90";
-const DIVIDER_CLASS = "border-t border-border/40";
 function SectionShell({ icon, title, children, }) {
-    return (_jsxs("div", { className: SECTION_CLASS, children: [_jsxs("h3", { className: SECTION_TITLE_CLASS, children: [icon, title] }), _jsx("div", { className: DIVIDER_CLASS }), 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 }) }));
 }
 async function fetchAccessState() {
     const result = await authMe();
@@ -128,80 +131,158 @@ 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 uppercase tracking-wide text-muted-foreground", children: label }), _jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsx("div", { className: "break-words text-sm font-medium text-foreground/90", children: value }), _jsx("p", { className: "text-xs leading-5 text-muted-foreground", children: 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 })] })] }));
 }
 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-[var(--ok-muted)] bg-[var(--ok-subtle)] text-ok", tone === "warn" && "border-warning/40 bg-warning/10 text-warning", tone === "danger" && "border-danger/40 bg-danger/10 text-danger", tone === "neutral" && "border-border/60 bg-bg/70 text-muted-foreground"), children: children }));
+    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 }));
 }
 function AccessModeSection({ state, onRefresh, }) {
     const bootConfig = useBootConfig();
-    let title = "Checking access";
-    let detail = "Confirming how this browser is connected.";
-    let status = "Checking";
+    const { t } = useTranslation();
+    const { ref: accessRefreshRef, agentProps: accessRefreshAgentProps } = useAgentElement({
+        id: "security-access-refresh",
+        role: "button",
+        label: "Refresh access status",
+        group: "security-access",
+        description: "Re-check how this browser is connected",
+        onActivate: () => void onRefresh(),
+    });
+    let title = t("security.access.checking.title", {
+        defaultValue: "Checking access",
+    });
+    let detail = t("security.access.checking.detail", {
+        defaultValue: "Confirming how this browser is connected.",
+    });
+    let status = t("security.access.status.checking", {
+        defaultValue: "Checking",
+    });
     let statusTone = "neutral";
-    let currentBrowserValue = "Checking";
-    let currentBrowserDetail = "Waiting for the auth endpoint to identify this browser.";
-    let remotePasswordValue = "Checking";
-    let remotePasswordDetail = "Waiting for the auth endpoint to report remote password state.";
+    let currentBrowserValue = t("security.access.status.checking", {
+        defaultValue: "Checking",
+    });
+    let currentBrowserDetail = t("security.access.currentBrowser.checking", {
+        defaultValue: "Waiting for the auth endpoint to identify this browser.",
+    });
+    let remotePasswordValue = t("security.access.status.checking", {
+        defaultValue: "Checking",
+    });
+    let remotePasswordDetail = t("security.access.remotePassword.checking", {
+        defaultValue: "Waiting for the auth endpoint to report remote password state.",
+    });
     let remotePasswordTone = "neutral";
     if (state.phase === "loaded") {
         if (state.access.mode === "local") {
-            title = "Local access";
-            detail =
-                "This browser is on the host machine. Localhost and Electrobun access do not require a password. Remote browsers use the remote password below.";
+            title = t("security.access.local.title", {
+                defaultValue: "Local access",
+            });
+            detail = t("security.access.local.detail", {
+                defaultValue: "This browser is on the host machine. Remote browsers use the remote password below.",
+            });
             status = state.access.passwordConfigured
-                ? "Remote password set"
-                : "Remote password not set";
+                ? t("security.access.status.remotePasswordSet", {
+                    defaultValue: "Remote password set",
+                })
+                : t("security.access.status.remotePasswordNotSet", {
+                    defaultValue: "Remote password not set",
+                });
             statusTone = state.access.passwordConfigured ? "ok" : "warn";
-            currentBrowserValue = "Local host";
-            currentBrowserDetail =
-                "The current browser is trusted because it is running from localhost or the desktop renderer.";
+            currentBrowserValue = t("security.access.currentBrowser.localHost", {
+                defaultValue: "Local host",
+            });
+            currentBrowserDetail = t("security.access.currentBrowser.localDetail", {
+                defaultValue: "Trusted: running from localhost or the desktop renderer.",
+            });
         }
         else {
-            title = "Remote session";
-            detail =
-                "This browser is signed in remotely. Localhost and Electrobun still use local access on the host machine.";
-            status = "Signed in";
+            title = t("security.access.remote.title", {
+                defaultValue: "Remote session",
+            });
+            detail = t("security.access.remote.detail", {
+                defaultValue: "This browser is signed in remotely. Localhost and Electrobun still use local access on the host machine.",
+            });
+            status = t("security.access.status.signedIn", {
+                defaultValue: "Signed in",
+            });
             statusTone = "ok";
-            currentBrowserValue = "Remote browser";
-            currentBrowserDetail =
-                "This session is authenticated with the configured remote password.";
+            currentBrowserValue = t("security.access.currentBrowser.remoteBrowser", {
+                defaultValue: "Remote browser",
+            });
+            currentBrowserDetail = t("security.access.currentBrowser.remoteDetail", {
+                defaultValue: "This session is authenticated with the configured remote password.",
+            });
         }
-        remotePasswordValue = state.access.passwordConfigured ? "Set" : "Not set";
+        remotePasswordValue = state.access.passwordConfigured
+            ? t("security.access.value.set", { defaultValue: "Set" })
+            : t("security.access.value.notSet", { defaultValue: "Not set" });
         remotePasswordDetail = state.access.passwordConfigured
-            ? "Remote browsers can sign in with the configured password."
-            : "Remote browsers cannot sign in until a remote password is set.";
+            ? t("security.access.remotePassword.canSignIn", {
+                defaultValue: "Remote browsers can sign in with the configured password.",
+            })
+            : t("security.access.remotePassword.cannotSignIn", {
+                defaultValue: "Remote browsers cannot sign in until a remote password is set.",
+            });
         remotePasswordTone = state.access.passwordConfigured ? "ok" : "warn";
     }
     else if (state.phase === "locked") {
-        title = "Remote access";
+        title = t("security.access.lockedRemote.title", {
+            defaultValue: "Remote access",
+        });
         detail =
             state.reason === "remote_password_not_configured"
-                ? "Remote access is disabled until this instance is opened on the host machine and a remote password is set."
-                : "Remote access requires a password session.";
-        status = state.access?.passwordConfigured ? "Password required" : "Not set";
+                ? t("security.access.lockedRemote.detailNotConfigured", {
+                    defaultValue: "Remote access is disabled until this instance is opened on the host machine and a remote password is set.",
+                })
+                : t("security.access.lockedRemote.detailRequiresPassword", {
+                    defaultValue: "Remote access requires a password session.",
+                });
+        status = state.access?.passwordConfigured
+            ? t("security.access.status.passwordRequired", {
+                defaultValue: "Password required",
+            })
+            : t("security.access.value.notSet", { defaultValue: "Not set" });
         statusTone = state.access?.passwordConfigured ? "warn" : "danger";
-        currentBrowserValue = "Remote browser";
+        currentBrowserValue = t("security.access.currentBrowser.remoteBrowser", {
+            defaultValue: "Remote browser",
+        });
         currentBrowserDetail =
             state.reason === "remote_password_not_configured"
-                ? "This browser is remote and no remote password is configured yet."
-                : "This browser is remote and needs a password session.";
-        remotePasswordValue = state.access?.passwordConfigured ? "Set" : "Not set";
+                ? t("security.access.currentBrowser.lockedNotConfigured", {
+                    defaultValue: "This browser is remote and no remote password is configured yet.",
+                })
+                : t("security.access.currentBrowser.lockedNeedsPassword", {
+                    defaultValue: "This browser is remote and needs a password session.",
+                });
+        remotePasswordValue = state.access?.passwordConfigured
+            ? t("security.access.value.set", { defaultValue: "Set" })
+            : t("security.access.value.notSet", { defaultValue: "Not set" });
         remotePasswordDetail = state.access?.passwordConfigured
-            ? "Remote password exists; sign in to manage sessions and changes."
-            : "Remote access is disabled until the host machine sets a password.";
+            ? t("security.access.remotePassword.existsSignIn", {
+                defaultValue: "Remote password exists; sign in to manage sessions and changes.",
+            })
+            : t("security.access.remotePassword.disabledUntilSet", {
+                defaultValue: "Remote access is disabled until the host machine sets a password.",
+            });
         remotePasswordTone = state.access?.passwordConfigured ? "warn" : "danger";
     }
     else if (state.phase === "error") {
-        title = "Access unavailable";
+        title = t("security.access.error.title", {
+            defaultValue: "Access unavailable",
+        });
         detail = state.message;
-        status = "Unavailable";
+        status = t("security.access.status.unavailable", {
+            defaultValue: "Unavailable",
+        });
         statusTone = "danger";
-        currentBrowserValue = "Unavailable";
+        currentBrowserValue = t("security.access.status.unavailable", {
+            defaultValue: "Unavailable",
+        });
         currentBrowserDetail = state.message;
-        remotePasswordValue = "Unavailable";
-        remotePasswordDetail = "The auth endpoint did not return password state.";
+        remotePasswordValue = t("security.access.status.unavailable", {
+            defaultValue: "Unavailable",
+        });
+        remotePasswordDetail = t("security.access.remotePassword.unavailable", {
+            defaultValue: "The auth endpoint did not return password state.",
+        });
         remotePasswordTone = "danger";
     }
     const pageOrigin = currentPageOrigin();
@@ -217,13 +298,42 @@ function AccessModeSection({ state, onRefresh, }) {
         ? describeEndpoint(apiEndpoint)
         : null;
     const pageUrlLabel = pageEndpoint && !isLoopbackHost(pageEndpoint.hostname)
-        ? "Remote URL"
-        : "Local URL";
-    return (_jsxs(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: "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-foreground/90", children: title }), _jsx("p", { className: "max-w-2xl text-sm leading-6 text-muted-foreground", 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-md border border-border/40 bg-bg/35 px-3", children: [_jsx(AccessInfoRow, { label: "Current browser", value: currentBrowserValue, detail: currentBrowserDetail }), _jsx(AccessInfoRow, { label: "Local access", value: "Enabled", detail: "Host-machine localhost and desktop renderer sessions do not require the remote password." }), _jsx(AccessInfoRow, { label: "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: "API base", value: trimTrailingSlash(apiBase), detail: `${apiEndpointDescription.value}: ${apiEndpointDescription.detail}` })), state.phase === "loaded" && (_jsx(AccessInfoRow, { label: "Identity", value: state.identity.displayName, detail: `Signed in as ${state.identity.kind}.` }))] }), _jsxs("button", { type: "button", onClick: () => void onRefresh(), className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), "Refresh"] })] }));
+        ? 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", {
+                            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", {
+                            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" })] })] }));
 }
 function SessionsSection() {
+    const { t } = useTranslation();
     const [state, setState] = useState({ phase: "loading" });
     const [revokingIds, setRevokingIds] = useState(new Set());
+    const { ref: sessionsRefreshRef, agentProps: sessionsRefreshAgentProps } = useAgentElement({
+        id: "security-sessions-refresh",
+        role: "button",
+        label: "Refresh active sessions",
+        group: "security-sessions",
+    });
+    const { ref: revokeOthersRef, agentProps: revokeOthersAgentProps } = useAgentElement({
+        id: "security-sessions-sign-out-everywhere",
+        role: "button",
+        label: "Sign out everywhere else",
+        group: "security-sessions",
+        description: "Revoke every session except the current one",
+    });
     const load = useCallback(async () => {
         setState({ phase: "loading" });
         const result = await authListSessions();
@@ -234,11 +344,15 @@ function SessionsSection() {
             setState({
                 phase: "error",
                 message: result.status === 401
-                    ? "You must be signed in to view sessions."
-                    : "Could not load sessions. Try reloading the page.",
+                    ? t("security.sessions.error.signInRequired", {
+                        defaultValue: "You must be signed in to view sessions.",
+                    })
+                    : t("security.sessions.error.loadFailed", {
+                        defaultValue: "Could not load sessions. Try reloading the page.",
+                    }),
             });
         }
-    }, []);
+    }, [t]);
     useEffect(() => {
         void load();
     }, [load]);
@@ -261,14 +375,44 @@ function SessionsSection() {
             await handleRevoke(s.id);
         }
     }, [state, handleRevoke]);
-    return (_jsxs(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: "Active sessions", children: [state.phase === "loading" && (_jsxs("div", { className: "flex items-center gap-2 py-3 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "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-foreground", children: "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", { type: "button", onClick: load, className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-colors hover:text-foreground", children: [_jsx(RefreshCw, { className: "h-3 w-3" }), "Refresh"] }), state.sessions.filter((s) => !s.current).length > 1 && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleRevokeOthers, className: "border-danger/40 text-xs text-danger hover:bg-danger/10", children: "Sign out everywhere else" }))] })] }))] }));
+    return (_jsxs(SectionShell, { icon: _jsx(Shield, { className: "h-4 w-4 opacity-60" }), title: t("security.sessions.title", {
+            defaultValue: "Active sessions",
+        }), children: [state.phase === "loading" && (_jsxs("div", { className: "flex items-center gap-2 py-3 text-sm text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), t("security.sessions.loading", {
+                        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", {
+                                    defaultValue: "Sign out everywhere else",
+                                }) }))] })] }))] }));
 }
 function SessionRow({ session, revoking, onRevoke, }) {
-    return (_jsxs("div", { className: "flex items-start gap-3 py-3", children: [_jsx(DeviceIcon, { userAgent: session.userAgent }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium capitalize text-foreground/90", children: session.kind }), session.current && (_jsx("span", { className: "rounded-full border border-[var(--ok-muted)] bg-[var(--ok-subtle)] px-2 py-0.5 text-3xs font-medium uppercase tracking-[0.08em] text-ok", children: "This session" }))] }), _jsxs("p", { className: "truncate text-xs text-muted-foreground/80", children: [session.ip ?? "Unknown IP", " \u00B7", " ", session.userAgent
+    const { t } = useTranslation();
+    const { ref: revokeRef, agentProps: revokeAgentProps } = useAgentElement({
+        id: `security-session-revoke-${session.id}`,
+        role: "button",
+        label: `Revoke ${session.kind} session`,
+        group: "security-sessions",
+        onActivate: () => onRevoke(session.id),
+    });
+    return (_jsxs("div", { className: "flex items-start gap-3 py-3", children: [_jsx(DeviceIcon, { userAgent: session.userAgent }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium capitalize text-txt-strong", children: session.kind }), session.current && (_jsx("span", { className: "rounded-full border border-ok/35 bg-ok/12 px-2 py-0.5 text-xs font-medium text-ok", children: t("security.sessions.thisSession", {
+                                    defaultValue: "This session",
+                                }) }))] }), _jsxs("p", { className: "truncate text-xs text-muted", children: [session.ip ??
+                                t("security.sessions.unknownIp", {
+                                    defaultValue: "Unknown IP",
+                                }), " ", "\u00B7", " ", session.userAgent
                                 ? session.userAgent.slice(0, 60)
-                                : "Unknown client"] }), _jsxs("p", { className: "text-xs text-muted-foreground/60", children: ["Last seen ", formatRelativeTime(session.lastSeenAt), " \u00B7 expires", " ", formatRelativeTime(session.expiresAt)] })] }), !session.current && (_jsx(Button, { 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": "Revoke this session", children: revoking ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Trash2, { className: "h-3 w-3" })) }))] }));
+                                : t("security.sessions.unknownClient", {
+                                    defaultValue: "Unknown client",
+                                })] }), _jsx("p", { className: "text-xs text-muted", children: t("security.sessions.lastSeenExpires", {
+                            lastSeen: formatRelativeTime(session.lastSeenAt),
+                            expires: formatRelativeTime(session.expiresAt),
+                            defaultValue: "Last seen {{lastSeen}} · expires {{expires}}",
+                        }) })] }), !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, "");
     const currentPasswordId = useId().replace(/:/g, "");
     const newPasswordId = useId().replace(/:/g, "");
@@ -278,6 +422,44 @@ function RemotePasswordSection({ accessState, onAccessChanged, }) {
     const [newPassword, setNewPassword] = useState("");
     const [confirmPassword, setConfirmPassword] = useState("");
     const [state, setState] = useState({ phase: "idle" });
+    const { ref: displayNameRef, agentProps: displayNameAgentProps } = useAgentElement({
+        id: "security-password-display-name",
+        role: "text-input",
+        label: "Owner display name",
+        group: "security-password",
+        getValue: () => displayName,
+        onFill: (v) => setDisplayName(v),
+    });
+    const { ref: currentPasswordRef, agentProps: currentPasswordAgentProps } = useAgentElement({
+        id: "security-password-current",
+        role: "text-input",
+        label: "Current password",
+        group: "security-password",
+        getValue: () => currentPassword,
+        onFill: (v) => setCurrentPassword(v),
+    });
+    const { ref: newPasswordRef, agentProps: newPasswordAgentProps } = useAgentElement({
+        id: "security-password-new",
+        role: "text-input",
+        label: "New remote password",
+        group: "security-password",
+        getValue: () => newPassword,
+        onFill: (v) => setNewPassword(v),
+    });
+    const { ref: confirmPasswordRef, agentProps: confirmPasswordAgentProps } = useAgentElement({
+        id: "security-password-confirm",
+        role: "text-input",
+        label: "Confirm new remote password",
+        group: "security-password",
+        getValue: () => confirmPassword,
+        onFill: (v) => setConfirmPassword(v),
+    });
+    const { ref: passwordSubmitRef, agentProps: passwordSubmitAgentProps } = useAgentElement({
+        id: "security-password-submit",
+        role: "button",
+        label: "Set or change remote password",
+        group: "security-password",
+    });
     const loaded = accessState.phase === "loaded" ? accessState : null;
     const setupMode = loaded?.access.mode === "local" && !loaded.access.ownerConfigured;
     const localAccess = loaded?.access.mode === "local";
@@ -295,7 +477,12 @@ function RemotePasswordSection({ accessState, onAccessChanged, }) {
         if (!loaded)
             return;
         if (newPassword !== confirmPassword) {
-            setState({ phase: "error", message: "New passwords do not match." });
+            setState({
+                phase: "error",
+                message: t("security.password.error.mismatch", {
+                    defaultValue: "New passwords do not match.",
+                }),
+            });
             return;
         }
         setState({ phase: "submitting" });
@@ -316,7 +503,9 @@ function RemotePasswordSection({ accessState, onAccessChanged, }) {
         }
         setState({
             phase: "success",
-            message: "Remote access is enabled. Remote browsers can sign in with this password when they can reach this instance.",
+            message: t("security.password.success", {
+                defaultValue: "Remote access enabled. Remote browsers can sign in with this password.",
+            }),
         });
         setCurrentPassword("");
         setNewPassword("");
@@ -331,40 +520,75 @@ function RemotePasswordSection({ accessState, onAccessChanged, }) {
         newPassword,
         onAccessChanged,
         setupMode,
+        t,
     ]);
     if (accessState.phase === "loading") {
-        return (_jsx(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: "Remote password", children: _jsxs("div", { className: "flex items-center gap-2 py-3 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Loading password settings..."] }) }));
+        return (_jsx(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: t("security.password.title", {
+                defaultValue: "Remote password",
+            }), children: _jsxs("div", { className: "flex items-center gap-2 py-3 text-sm text-muted", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), t("security.password.loading", {
+                        defaultValue: "Loading password settings...",
+                    })] }) }));
     }
     if (accessState.phase !== "loaded") {
         const message = accessState.phase === "locked" &&
             accessState.reason === "remote_password_not_configured"
-            ? "Remote access is not enabled yet. Open this instance on the host machine via localhost and set a remote password here."
-            : "Sign in to manage the remote password.";
-        return (_jsx(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: "Remote password", children: _jsx("p", { className: "text-sm text-muted-foreground", children: message }) }));
+            ? t("security.password.notEnabled", {
+                defaultValue: "Remote access is not enabled. Open this instance on the host machine and set a remote password.",
+            })
+            : t("security.password.signInToManage", {
+                defaultValue: "Sign in to manage the remote password.",
+            });
+        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 text-muted", children: message }) }));
     }
     const description = localAccess
-        ? "Set the password used by browsers that connect to this instance from another machine. Localhost and Electrobun do not use it."
-        : "Change the password for this remote browser session.";
+        ? 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
-        ? "Set remote password"
-        : "Change remote password";
-    return (_jsxs(SectionShell, { icon: _jsx(KeyRound, { className: "h-4 w-4 opacity-60" }), title: "Remote password", children: [_jsx("p", { className: "text-sm leading-6 text-muted-foreground", 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 uppercase tracking-wide text-muted-foreground", children: "Display name" }), _jsx(Input, { id: displayNameId, type: "text", autoComplete: "username", value: displayName, onChange: (event) => {
+        ? t("security.password.setButton", {
+            defaultValue: "Set remote password",
+        })
+        : 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", {
+            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 })] })), currentPasswordRequired && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: currentPasswordId, className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Current password" }), _jsx(Input, { id: currentPasswordId, type: "password", autoComplete: "current-password", value: currentPassword, onChange: (event) => {
+                                }, 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 })] })), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: newPasswordId, className: "text-xs uppercase tracking-wide text-muted-foreground", children: "New password" }), _jsx(Input, { id: newPasswordId, type: "password", autoComplete: "new-password", placeholder: "At least 12 characters", value: newPassword, onChange: (event) => {
+                                }, 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 })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: confirmPasswordId, className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Confirm new password" }), _jsx(Input, { id: confirmPasswordId, type: "password", autoComplete: "new-password", value: confirmPassword, onChange: (event) => {
+                                }, 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(confirmMismatch && "border-danger focus-visible:border-danger") }), confirmMismatch && (_jsx("p", { className: "text-xs text-danger", children: "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, { type: "submit", disabled: !canSubmit, size: "sm", children: isSubmitting ? "Saving..." : buttonLabel }) })] })] }));
+                                }, 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 }) })] })] }));
 }
 export function SecuritySettingsSection() {
     const [accessState, setAccessState] = useState({
@@ -377,5 +601,5 @@ export function SecuritySettingsSection() {
     useEffect(() => {
         void refreshAccessState();
     }, [refreshAccessState]);
-    return (_jsxs("div", { className: "space-y-4", children: [_jsx(AccessModeSection, { state: accessState, onRefresh: refreshAccessState }), _jsx(RemotePasswordSection, { accessState: accessState, onAccessChanged: refreshAccessState }), _jsx(SessionsSection, {})] }));
+    return (_jsxs(SettingsStack, { children: [_jsx(AccessModeSection, { state: accessState, onRefresh: refreshAccessState }), _jsx(RemotePasswordSection, { accessState: accessState, onAccessChanged: refreshAccessState }), _jsx(SessionsSection, {})] }));
 }

package/components/settings/SubscriptionStatus.d.ts

@@ -17,12 +17,7 @@ export interface SubscriptionStatusProps {
     }>;
     anthropicConnected: boolean;
     setAnthropicConnected: (v: boolean) => void;
-    /**
-     * True when Claude Code CLI credentials exist on this machine but the user
-     * has NOT linked their subscription via the in-app OAuth flow. In this
-     * state the panel shows a read-only notice and hides the Disconnect
-     * button — the app can't clear CLI-owned credentials.
-     */
+    /** Claude Code CLI credentials exist on disk but no in-app OAuth link. */
     anthropicCliDetected: boolean;
     openaiConnected: boolean;
     setOpenaiConnected: (v: boolean) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/SubscriptionStatus.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,+BAA+B,EACrC,MAAM,iBAAiB,CAAC;AAQzB,MAAM,WAAW,uBAAuB;IACtC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,EAAE,KAAK,CAAC;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,OAAO,CAAC;QACpB,KAAK,EAAE,OAAO,CAAC;QACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,MAAM,CAAC,EACH,KAAK,GACL,iBAAiB,GACjB,aAAa,GACb,WAAW,GACX,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,IAAI,CAAC;QACT,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,0BAA0B,GAAG,yBAAyB,CAAC;KACtE,CAAC,CAAC;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C;;;;;OAKG;IACH,oBAAoB,EAAE,OAAO,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wBAAwB,EAAE,CACxB,UAAU,EAAE,+BAA+B,EAC3C,QAAQ,CAAC,EAAE,OAAO,KACf,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,sBAAsB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7C;AA4LD,wBAAgB,kBAAkB,CAAC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,GACvB,EAAE,uBAAuB,2CA8ezB"}
+{"version":3,"file":"SubscriptionStatus.d.ts","sourceRoot":"","sources":["../../../../../../src/components/settings/SubscriptionStatus.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,KAAK,+BAA+B,EACrC,MAAM,iBAAiB,CAAC;AAWzB,MAAM,WAAW,uBAAuB;IACtC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,kBAAkB,EAAE,KAAK,CAAC;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,OAAO,CAAC;QACpB,KAAK,EAAE,OAAO,CAAC;QACf,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,MAAM,CAAC,EACH,KAAK,GACL,iBAAiB,GACjB,aAAa,GACb,WAAW,GACX,YAAY,GACZ,iBAAiB,GACjB,aAAa,GACb,IAAI,CAAC;QACT,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,0BAA0B,GAAG,yBAAyB,CAAC;KACtE,CAAC,CAAC;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,0EAA0E;IAC1E,oBAAoB,EAAE,OAAO,CAAC;IAC9B,eAAe,EAAE,OAAO,CAAC;IACzB,kBAAkB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,wBAAwB,EAAE,CACxB,UAAU,EAAE,+BAA+B,EAC3C,QAAQ,CAAC,EAAE,OAAO,KACf,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,sBAAsB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7C;AAiQD,wBAAgB,kBAAkB,CAAC,EACjC,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,sBAAsB,GACvB,EAAE,uBAAuB,2CA8fzB"}