@agent-native/core 0.141.6 → 0.144.0

package/dist/client/resources/mcp-integration-logos.js

@@ -108,9 +108,25 @@ const LOGOS = {
         data: "PHN2ZyBmaWxsPSIjRkY0RjAwIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGU+WmFwaWVyPC90aXRsZT48cGF0aCBkPSJNNC4xNTcgMEE0LjE1MSA0LjE1MSAwIDAgMCAwIDQuMTYxdjE1LjY3OEE0LjE1MSA0LjE1MSAwIDAgMCA0LjE1NyAyNGgxNS42ODJBNC4xNTIgNC4xNTIgMCAwIDAgMjQgMTkuODM5VjQuMTYxQTQuMTUyIDQuMTUyIDAgMCAwIDE5LjgzOSAwSDQuMTU3Wm0xMC42MSA4Ljc2MWguMDNhLjU3Ny41NzcgMCAwIDEgLjIzLjAzOC41ODUuNTg1IDAgMCAxIC4yMDEuMTI0LjYzLjYzIDAgMCAxIC4xNjIuNDMxLjYxMi42MTIgMCAwIDEtLjE2Mi40MzUuNTguNTggMCAwIDEtLjIwMS4xMjguNTguNTggMCAwIDEtLjIzLjA0Mi41MjkuNTI5IDAgMCAxLS4yMzUtLjA0Mi41ODUuNTg1IDAgMCAxLS4zMzItLjMyOC41NTkuNTU5IDAgMCAxLS4wMzgtLjIzNS42MTMuNjEzIDAgMCAxIC4xNy0uNDMxLjU5LjU5IDAgMCAxIC40MDUtLjE2MlptMi44NTMgMS41NzJjLjAzLjAwNC4wNjEuMDA0LjA5NS4wMDQuMzI1LS4wMTEuNjQ2LjA2NC45MzcuMjE5LjIzOC4xNDQuNDMxLjM1NS41NTIuNjA5LjEyOC4yNzkuMTg5LjU4Mi4xODUuODg4di4xOTNhMiAyIDAgMCAxIDAgLjIxOWgtMi40OThjLjAwMy4yMjcuMDc1LjQ1LjIwNC42NDJhLjc4Ljc4IDAgMCAwIC42NDYuMjY1LjcxNC43MTQgMCAwIDAgLjQ4NC0uMTM2LjY0Mi42NDIgMCAwIDAgLjIzLS4zMThsLjkxNS4yNTdhMS4zOTggMS4zOTggMCAwIDEtLjI4LjUzN2MtLjE0LjE1OS0uMzIxLjI4NC0uNTIxLjM1NWEyLjIzNCAyLjIzNCAwIDAgMS0uODM2LjEzNiAxLjkyMyAxLjkyMyAwIDAgMS0xLjAwMS0uMjQ1IDEuNjE4IDEuNjE4IDAgMCAxLS42NjUtLjcwMyAyLjIyMSAyLjIyMSAwIDAgMS0uMjI3LTEuMDM2IDEuOTUgMS45NSAwIDAgMSAuNDgtMS4zOTggMS45IDEuOSAwIDAgMSAxLjMtLjQ4OFptLTkuNjA3LjAyM2MuMTYyLjAwNC4zMjUuMDI2LjQ4LjA3OS4yMDcuMDY1LjQuMTc0LjU2My4zMTQuMjYuMzAyLjM5My42OTIuMzY2IDEuMDg4djIuMjc2SDguNTNsLS4xMDktLjcxMWgtLjA2NWMtLjA2NC4xNjMtLjE1NS4zMS0uMjcyLjQzOWExLjEyMiAxLjEyMiAwIDAgMS0uMzc0LjI2NCAxLjAyMyAxLjAyMyAwIDAgMS0uNDUzLjA4MyAxLjMzNCAxLjMzNCAwIDAgMS0uODY2LS4yNjQuOTY1Ljk2NSAwIDAgMS0uMzI5LS44MDEuOTkzLjk5MyAwIDAgMSAuMDc2LS40MzEgMS4wMiAxLjAyIDAgMCAxIC4yNDItLjM2MyAxLjQ3OCAxLjQ3OCAwIDAgMSAxLjA0My0uMzAzaC45NTJ2LS4xODFhLjY5Ni42OTYgMCAwIDAtLjEzNi0uNDU0LjU1My41NTMgMCAwIDAtLjQzOC0uMTU0LjY5NS42OTUgMCAwIDAtLjM3OC4wODYuNDguNDggMCAwIDAtLjE5My4yNTRsLS45OS0uMTQ0YTEuMjYgMS4yNiAwIDAgMSAuMjU3LS41NjNjLjE0LS4xNzQuMzIxLS4zMDIuNTMzLS4zNzguMjYxLS4wOTEuNTQtLjEzNi44Mi0uMTI5LjA1My0uMDAzLjEwNi0uMDA3LjE2My0uMDA3Wm00LjM4NC4wMDdjLjE3NCAwIC4zNDcuMDM4LjUwNi4xMTQuMTgyLjA4My4zNC4yMTEuNDU4LjM3NC4yNTcuNDIzLjM3Ny45MTEuMzUxIDEuNDA2YTIuNTMgMi41MyAwIDAgMS0uMzU1IDEuNDQ4IDEuMTQ4IDEuMTQ4IDAgMCAxLTEuMDA5LjUxN2MtLjIwNCAwLS40MDEtLjA0NS0uNTgyLS4xMzZhMS4wNTIgMS4wNTIgMCAwIDEtLjQ4LS40NTcgMS4yOTggMS4yOTggMCAwIDEtLjExNC0uMjM0aC0uMDQ1bC4wMDQgMS43ODRoLTEuMDU5di00LjcxM2guOTA0bC4xMTcuODA1aC4wNTdjLjA2OC0uMjA4LjE3Ny0uNDAxLjMyOC0uNTZhMS4xMjkgMS4xMjkgMCAwIDEgLjg0My0uMzQ0aC4wNzZ2LS4wMDRabTcuNTU5LjA4NGguOTAzbC4xMTMuODA1aC4wNTNhMS4zNyAxLjM3IDAgMCAxIC4yMzUtLjQ4NC44MTMuODEzIDAgMCAxIC4zMTMtLjI0Mi44Mi44MiAwIDAgMSAuMzktLjA3NmguMjM0djEuMDUxaC0uNDAxYS42NjIuNjYyIDAgMCAwLS4zMTMuMDA4LjYyMy42MjMgMCAwIDAtLjI3Mi4xNTUuNjYzLjY2MyAwIDAgMC0uMTc0LjI2LjY4My42ODMgMCAwIDAtLjAyNy4zMTR2MS44NzVoLTEuMDU0di0zLjY2NlptLTE3LjUxNS4wMDNoMy4yNjJ2Ljg5NkwzLjczIDEzLjEwNGwuMDM0LjExM2gxLjk3M2wuMDQyLjlIMi40di0uOWwxLjkzMS0xLjc1NC0uMDQ1LS4xMTdIMi40NDF2LS44OTZabTExLjgxNSAwaDEuMDU1djMuNjU5aC0xLjA1NVYxMC40NVptMy40NDMuNjg0LjAxOS4wMTZhLjY5LjY5IDAgMCAwLS4zNTEuMDQ1Ljc1Ni43NTYgMCAwIDAtLjI4Ny4yMDRjLS4xMS4xNTUtLjE3NC4zMzYtLjE4OS41MjJoMS41NDVjLS4wMzQtLjUyNi0uMjU3LS43ODctLjc0LS43ODdoLjAwM1ptLTUuNzE4LjE2M2MtLjAyNiAwLS4wNTcgMC0uMDgzLjAwNGEuNzguNzggMCAwIDAtLjMxLjA1My43NDYuNzQ2IDAgMCAwLS4yNTcuMTg5IDEuMDE2IDEuMDE2IDAgMCAwLS4yMDQuNjk1di4wNjRjLS4wMTUuMjU3LjA1Ny41MDcuMjA0LjcxMWEuNjM0LjYzNCAwIDAgMCAuMjUzLjE5Ni42MzguNjM4IDAgMCAwIC4zMTQuMDYxLjY0NC42NDQgMCAwIDAgLjU3OC0uMjY1Yy4xNC0uMjIzLjIwNC0uNDguMTg5LS43NGExLjIxNiAxLjIxNiAwIDAgMC0uMTgxLS43MTEuNjc3LjY3NyAwIDAgMC0uNTAzLS4yNTdabS00LjUwOSAxLjI2NmEuNDY0LjQ2NCAwIDAgMC0uMjY4LjEwMi4zNzMuMzczIDAgMCAwLS4xMTQuMjc2YzAgLjA1My4wMDguMTA2LjAyNy4xNTVhLjM3NS4zNzUgMCAwIDAgLjA4Ny4xMzIuNTc2LjU3NiAwIDAgMCAuMzk3LjExdi4wMDRhLjg2My44NjMgMCAwIDAgLjU2My0uMTgyLjU3My41NzMgMCAwIDAgLjIxMS0uNDU3di0uMTRoLS45MDNaIi8+PC9zdmc+",
     },
 };
+const FALLBACK_MONOGRAMS = {
+    amplitude: "AM",
+    apollo: "AP",
+    "common-room": "CR",
+    exa: "EX",
+    gong: "GO",
+    grafana: "GF",
+    "google-workspace": "GW",
+    pylon: "PY",
+    "builder-cms": "B",
+};
 export function mcpIntegrationLogo(id) {
     const logo = LOGOS[id];
-    if (!logo)
-        return "";
+    if (!logo) {
+        const label = FALLBACK_MONOGRAMS[id];
+        if (!label)
+            return "";
+        const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><text x="12" y="12" text-anchor="middle" dominant-baseline="central" font-family="Arial,sans-serif" font-size="${label.length > 1 ? 8 : 14}" font-weight="700" fill="currentColor">${label}</text></svg>`;
+        return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+    }
     return `data:${logo.mime};base64,${logo.data}`;
 }

package/dist/client/resources/use-mcp-servers.d.ts

@@ -46,10 +46,15 @@ export interface CreateMcpServerArgs {
     description?: string;
 }
 export declare function useCreateMcpServer(): import("@tanstack/react-query").UseMutationResult<McpServer, Error, CreateMcpServerArgs, unknown>;
+export interface ReconnectMcpServerArgs {
+    id: string;
+    scope: McpServerScope;
+}
 export declare function useDeleteMcpServer(): import("@tanstack/react-query").UseMutationResult<void, Error, {
     id: string;
     scope: McpServerScope;
 }, unknown>;
+export declare function useReconnectMcpServer(): import("@tanstack/react-query").UseMutationResult<void, Error, ReconnectMcpServerArgs, unknown>;
 export interface TestMcpUrlResult {
     ok: boolean;
     error?: string;

package/dist/client/resources/use-mcp-servers.js

@@ -59,6 +59,42 @@ export function useDeleteMcpServer() {
         onSuccess: () => qc.invalidateQueries({ queryKey: LIST_KEY }),
     });
 }
+async function readMcpMutationBody(res) {
+    const text = (await res.text()).trim();
+    if (!text)
+        return null;
+    try {
+        return JSON.parse(text);
+    }
+    catch (cause) {
+        throw new Error(`Reconnect response was not valid JSON (HTTP ${res.status}).`, { cause });
+    }
+}
+function reconnectMcpServerUrl(args) {
+    return `${ENDPOINT}/${encodeURIComponent(args.id)}/reconnect?scope=${args.scope}`;
+}
+export function useReconnectMcpServer() {
+    const qc = useQueryClient();
+    return useMutation({
+        mutationFn: async (args) => {
+            const res = await fetch(reconnectMcpServerUrl(args), {
+                method: "POST",
+                credentials: "include",
+            });
+            const body = await readMcpMutationBody(res);
+            const error = typeof body?.error === "string" && body.error.trim()
+                ? body.error.trim()
+                : undefined;
+            if (!res.ok) {
+                throw new Error(error || `Reconnect failed (${res.status})`);
+            }
+            if (body?.ok !== true) {
+                throw new Error(error || "Reconnect failed");
+            }
+        },
+        onSuccess: () => qc.invalidateQueries({ queryKey: LIST_KEY }),
+    });
+}
 export function getMcpUrlValidationError(rawUrl) {
     const trimmed = rawUrl.trim();
     if (!trimmed)

package/dist/client/settings/AccountSettingsCard.js

@@ -1,13 +1,16 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ActionButton, Avatar, Surface, TextField, } from "@agent-native/toolkit/design-system";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActionButton, Avatar, TextField, } from "@agent-native/toolkit/design-system";
 import { IconCamera, IconCheck, IconLock } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
+import { PASSWORD_MIN_LENGTH } from "../../shared/password-policy.js";
+import { Popover, PopoverContent, PopoverTrigger, } from "../components/ui/popover.js";
 import { useT } from "../i18n.js";
 import { useActionMutation, useActionQuery } from "../use-action.js";
 import { uploadAvatar, useAvatarUrl } from "../use-avatar.js";
 import { useSession } from "../use-session.js";
 import { cn } from "../utils.js";
 import { SchedulingTimezoneField } from "./SchedulingTimezoneField.js";
+import { SettingsGroup, SettingsRow } from "./SettingsRow.js";
 function profileInitials(name) {
     return (name
         .split(/[ @._-]+/)
@@ -44,7 +47,7 @@ function PasswordSettings() {
     const submit = () => {
         setSaved(false);
         setValidationError(null);
-        if (newPassword.length < 8) {
+        if (newPassword.length < PASSWORD_MIN_LENGTH) {
             setValidationError("length");
             return;
         }
@@ -71,29 +74,30 @@ function PasswordSettings() {
     const hasPassword = authMethods.data?.hasPassword ?? false;
     if (!session?.email)
         return null;
-    return (_jsxs("div", { className: "space-y-3 border-t border-border/60 pt-3", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(IconLock, { className: "mt-0.5 size-4 text-muted-foreground" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: hasPassword
-                                    ? t("settings.passwordChange")
-                                    : t("settings.passwordTitle") }), _jsx("p", { className: "text-xs leading-5 text-muted-foreground", children: t("settings.passwordDescription") })] })] }), isLoading ? (_jsx("p", { className: "text-xs text-muted-foreground", children: t("settings.passwordStatusLoading") })) : authMethods.error ? (_jsx("p", { className: "text-xs text-destructive", children: t("settings.passwordSaveError") })) : (_jsxs(_Fragment, { children: [hasPassword && (_jsx(TextField, { id: "agent-native-current-password", type: "password", label: t("settings.passwordCurrentLabel"), value: currentPassword, onChange: (value) => {
-                            clearStatus();
-                            setCurrentPassword(value);
-                        }, placeholder: t("settings.passwordPlaceholder"), autoComplete: "current-password", disabled: isPending })), _jsx(TextField, { id: "agent-native-new-password", type: "password", label: t("settings.passwordNewLabel"), value: newPassword, onChange: (value) => {
-                            clearStatus();
-                            setNewPassword(value);
-                        }, placeholder: t("settings.passwordPlaceholder"), autoComplete: hasPassword ? "new-password" : "new-password", disabled: isPending, invalid: !!error }), _jsx(TextField, { id: "agent-native-confirm-password", type: "password", label: t("settings.passwordConfirmLabel"), value: confirmPassword, onChange: (value) => {
-                            clearStatus();
-                            setConfirmPassword(value);
-                        }, placeholder: t("settings.passwordPlaceholder"), autoComplete: "new-password", disabled: isPending, invalid: !!error, errorMessage: error }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: "min-h-4 text-xs", children: saved && (_jsxs("p", { className: "flex items-center gap-1 text-primary", children: [_jsx(IconCheck, { className: "size-3" }), t("settings.passwordSaved")] })) }), _jsx(ActionButton, { type: "button", intent: "primary", emphasis: "solid", size: "compact", pending: isPending, disabled: isPending ||
-                                    !newPassword ||
-                                    !confirmPassword ||
-                                    (hasPassword && !currentPassword), onPress: submit, children: isPending
-                                    ? t("settings.passwordSaving")
-                                    : hasPassword
-                                        ? t("settings.passwordChange")
-                                        : t("settings.passwordAdd") })] })] }))] }));
+    const passwordForm = isLoading ? (_jsx("p", { className: "text-xs text-muted-foreground", children: t("settings.passwordStatusLoading") })) : authMethods.error ? (_jsx("p", { className: "text-xs text-destructive", children: t("settings.passwordSaveError") })) : (_jsxs("div", { className: "space-y-3", children: [hasPassword && (_jsx(TextField, { id: "agent-native-current-password", type: "password", label: t("settings.passwordCurrentLabel"), value: currentPassword, onChange: (value) => {
+                    clearStatus();
+                    setCurrentPassword(value);
+                }, placeholder: t("settings.passwordPlaceholder"), autoComplete: "current-password", disabled: isPending })), _jsx(TextField, { id: "agent-native-new-password", type: "password", label: t("settings.passwordNewLabel"), value: newPassword, onChange: (value) => {
+                    clearStatus();
+                    setNewPassword(value);
+                }, placeholder: t("settings.passwordPlaceholder"), autoComplete: "new-password", disabled: isPending, invalid: !!error }), _jsx(TextField, { id: "agent-native-confirm-password", type: "password", label: t("settings.passwordConfirmLabel"), value: confirmPassword, onChange: (value) => {
+                    clearStatus();
+                    setConfirmPassword(value);
+                }, placeholder: t("settings.passwordPlaceholder"), autoComplete: "new-password", disabled: isPending, invalid: !!error, errorMessage: error }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: "min-h-4 text-xs", children: saved && (_jsxs("p", { className: "flex items-center gap-1 text-primary", children: [_jsx(IconCheck, { className: "size-3" }), t("settings.passwordSaved")] })) }), _jsx(ActionButton, { type: "button", intent: "primary", emphasis: "solid", size: "compact", pending: isPending, disabled: isPending ||
+                            !newPassword ||
+                            !confirmPassword ||
+                            (hasPassword && !currentPassword), onPress: submit, children: isPending
+                            ? t("settings.passwordSaving")
+                            : hasPassword
+                                ? t("settings.passwordChange")
+                                : t("settings.passwordAdd") })] })] }));
+    return (_jsx(SettingsRow, { id: "password", label: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(IconLock, { className: "size-4 text-muted-foreground" }), hasPassword
+                    ? t("settings.passwordChange")
+                    : t("settings.passwordTitle")] }), description: t("settings.passwordDescription"), control: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(ActionButton, { type: "button", intent: "neutral", emphasis: "outline", size: "compact", children: "Manage" }) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: "w-[min(420px,calc(100vw-2rem))] p-4", children: passwordForm })] }) }));
 }
 export function AccountSettingsForm({ compact = false, }) {
     const t = useT();
-    const { session, isLoading } = useSession();
+    const { session } = useSession();
     const email = session?.email;
     const profileQuery = useActionQuery("get-user-profile", undefined, { enabled: !!email });
     const updateProfile = useActionMutation("update-user-profile");
@@ -135,19 +139,21 @@ export function AccountSettingsForm({ compact = false, }) {
             return;
         updateProfile.mutate({ name: nextName });
     };
-    return (_jsxs("div", { className: cn("space-y-4", compact && "space-y-3"), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { name: displayName, src: avatarUrl, fallback: profileInitials(displayName), size: compact ? "default" : "large", className: cn("shrink-0 rounded-full border border-border bg-accent font-semibold text-muted-foreground", compact ? "size-12 text-[13px]" : "size-14 text-[15px]") }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: cn("truncate font-medium", compact ? "text-xs" : "text-sm"), children: isLoading ? t("settings.profileLoading") : displayName }), email && (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: email })), photoStatus === "saved" && (_jsxs("p", { className: "mt-1 flex items-center gap-1 text-xs text-green-600 dark:text-green-400", children: [_jsx(IconCheck, { className: "size-3" }), t("settings.profilePhotoUpdated")] })), photoStatus === "error" && (_jsx("p", { className: "mt-1 text-xs text-destructive", children: t("settings.profilePhotoError") }))] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleAvatarChange }), _jsx(ActionButton, { type: "button", intent: "neutral", emphasis: "outline", size: "compact", disabled: !email || uploading, leadingIcon: _jsx(IconCamera, { className: "size-3.5" }), onPress: () => fileInputRef.current?.click(), className: "shrink-0", children: uploading
-                            ? t("settings.profileUploading")
-                            : t("settings.profileChangePhoto") })] }), _jsx("div", { className: "space-y-3", children: _jsx(TextField, { id: "agent-native-profile-name", label: t("settings.profileNameLabel"), value: name, onChange: (value) => {
-                        updateProfile.reset();
-                        setName(value);
-                    }, placeholder: t("settings.profileNamePlaceholder"), description: t("settings.profileNameDescription"), disabled: !email || profileQuery.isLoading || updateProfile.isPending }) }), _jsx("div", { className: "border-t border-border/60 pt-3", children: _jsx(SchedulingTimezoneField, {}) }), _jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-border/60 pt-3", children: [_jsxs("div", { className: "min-h-4 text-xs", children: [updateProfile.isSuccess && (_jsx("p", { className: "text-primary", children: t("settings.profileSaved") })), updateProfile.error && (_jsx("p", { className: "text-destructive", children: t("settings.profileSaveError") }))] }), _jsx(ActionButton, { type: "button", intent: "primary", emphasis: "solid", size: "compact", pending: updateProfile.isPending, disabled: !email ||
-                            profileQuery.isLoading ||
-                            updateProfile.isPending ||
-                            !name.trim(), onPress: handleProfileSave, children: updateProfile.isPending
-                            ? t("settings.profileSaving")
-                            : t("settings.profileSave") })] })] }));
+    const profileStatus = photoStatus === "saved" ? (_jsx("span", { className: "text-primary", children: t("settings.profilePhotoUpdated") })) : photoStatus === "error" ? (_jsx("span", { className: "text-destructive", children: t("settings.profilePhotoError") })) : email ? (email) : undefined;
+    return (_jsxs(SettingsGroup, { id: "account", title: t("settings.profileTitle"), description: t("settings.profileDescription"), className: cn(compact && "[&>div:last-child>div>div]:py-3"), children: [_jsx(SettingsRow, { id: "profile", label: t("settings.profileTitle"), description: profileStatus, control: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { name: displayName, src: avatarUrl, fallback: profileInitials(displayName), size: "default", className: "size-10 shrink-0 rounded-full border border-border bg-accent font-semibold text-muted-foreground" }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleAvatarChange }), _jsx(ActionButton, { type: "button", intent: "neutral", emphasis: "outline", size: "compact", disabled: !email || uploading, leadingIcon: _jsx(IconCamera, { className: "size-3.5" }), onPress: () => fileInputRef.current?.click(), children: uploading
+                                ? t("settings.profileUploading")
+                                : t("settings.profileChangePhoto") })] }) }), _jsx(SettingsRow, { id: "profile-name", label: t("settings.profileNameLabel"), description: updateProfile.isSuccess ? (_jsx("span", { className: "text-primary", children: t("settings.profileSaved") })) : updateProfile.error ? (_jsx("span", { className: "text-destructive", children: t("settings.profileSaveError") })) : (t("settings.profileNameDescription")), control: _jsxs("div", { className: "flex w-full items-center gap-2 sm:w-80", children: [_jsx(TextField, { id: "agent-native-profile-name", value: name, onChange: (value) => {
+                                updateProfile.reset();
+                                setName(value);
+                            }, placeholder: t("settings.profileNamePlaceholder"), disabled: !email || profileQuery.isLoading || updateProfile.isPending, "aria-label": t("settings.profileNameLabel"), className: "min-w-0 flex-1" }), _jsx(ActionButton, { type: "button", intent: "primary", emphasis: "solid", size: "compact", pending: updateProfile.isPending, disabled: !email ||
+                                profileQuery.isLoading ||
+                                updateProfile.isPending ||
+                                !name.trim(), onPress: handleProfileSave, children: updateProfile.isPending
+                                ? t("settings.profileSaving")
+                                : t("settings.profileSave") })] }) }), _jsx(SettingsRow, { id: "timezone", label: t("settings.timezoneLabel", { defaultValue: "Timezone" }), description: t("settings.timezoneHint", {
+                    defaultValue: "Used for timestamps and scheduled automations.",
+                }), control: _jsx(SchedulingTimezoneField, { compact: true }) }), _jsx(PasswordSettings, {})] }));
 }
 export function AccountSettingsCard({ className }) {
-    const t = useT();
-    return (_jsxs(Surface, { as: "section", id: "account", elevation: "low", padding: "none", className: cn("mx-auto w-full max-w-2xl scroll-mt-4 rounded-lg border border-border bg-card p-5 text-card-foreground shadow-sm", className), children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { className: "text-base font-semibold", children: t("settings.profileTitle") }), _jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: t("settings.profileDescription") })] }), _jsxs("div", { className: "mt-5", children: [_jsx(AccountSettingsForm, {}), _jsx(PasswordSettings, {})] })] }));
+    return (_jsx("div", { className: cn("w-full", className), children: _jsx(AccountSettingsForm, {}) }));
 }

package/dist/client/settings/AutomationsSection.js

@@ -11,7 +11,7 @@ export function AutomationsSection() {
     const t = useT();
     return (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-xs leading-5 text-muted-foreground", children: t("jobs.settingsSummary", {
                     defaultValue: "Manage scheduled and event-triggered agent tasks together from the Automations page.",
-                }) }), _jsxs("div", { className: "flex flex-wrap gap-2 text-[11px] text-muted-foreground", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1", children: [_jsx(IconClock, { className: "size-3" }), t("jobs.scheduledTrigger", { defaultValue: "Scheduled" })] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1", children: [_jsx(IconBolt, { className: "size-3" }), t("jobs.eventTrigger", { defaultValue: "Event-triggered" })] })] }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsxs(Link, { to: "/settings#agent:automations", children: [t("jobs.openAutomations", {
+                }) }), _jsxs("div", { className: "flex flex-wrap gap-2 text-[11px] text-muted-foreground", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1", children: [_jsx(IconClock, { className: "size-3" }), t("jobs.scheduledTrigger", { defaultValue: "Scheduled" })] }), _jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1", children: [_jsx(IconBolt, { className: "size-3" }), t("jobs.eventTrigger", { defaultValue: "Event-triggered" })] })] }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsxs(Link, { to: "/settings/agent/automations", children: [t("jobs.openAutomations", {
                             defaultValue: "Open Automations",
                         }), _jsx(IconArrowRight, { className: "size-3.5" })] }) })] }));
 }

package/dist/client/settings/DemoModeSection.d.ts

@@ -1,2 +1,4 @@
 /** Browser-local presentation toggle. Backend and agent results stay real. */
-export declare function DemoModeSection(): import("react").JSX.Element;
+export declare function DemoModeSection({ compact }: {
+    compact?: boolean;
+}): import("react").JSX.Element;

package/dist/client/settings/DemoModeSection.js

@@ -3,7 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Switch } from "@agent-native/toolkit/design-system";
 import { setBrowserDemoModeEnabled } from "../../demo/browser-state.js";
 import { useDemoModeStatus } from "../use-demo-mode-status.js";
-export function DemoModeSection() {
+export function DemoModeSection({ compact = false }) {
     const { enabled } = useDemoModeStatus();
+    if (compact) {
+        return (_jsx(Switch, { checked: enabled, onChange: (checked) => setBrowserDemoModeEnabled(checked), "aria-label": "Enable demo mode", className: "shrink-0" }));
+    }
     return (_jsxs("div", { className: "flex items-start justify-between gap-3 rounded-md border border-border bg-accent/30 px-2.5 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[11px] font-medium text-foreground", children: "Enable demo mode" }), _jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Anonymize displayed emails in this browser and reshape supported dashboard charts for presentations. Backend, agent integrations, and agent results stay real and access-scoped." })] }), _jsx(Switch, { checked: enabled, onChange: (checked) => setBrowserDemoModeEnabled(checked), "aria-label": "Enable demo mode", className: "shrink-0" })] }));
 }

package/dist/client/settings/ExtensionsSettingsContent.js

@@ -5,5 +5,5 @@ const ExtensionsListPage = lazy(() => import("../extensions/ExtensionsListPage.j
     default: module.ExtensionsListPage,
 })));
 export function ExtensionsSettingsContent() {
-    return (_jsx("div", { className: "mx-auto w-full max-w-5xl", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex min-h-[28rem] items-center justify-center text-muted-foreground", children: _jsx(IconLoader2, { className: "size-5 animate-spin", "aria-label": "Loading" }) }), children: _jsx(ExtensionsListPage, { embedded: true }) }) }));
+    return (_jsx("div", { className: "w-full", children: _jsx(Suspense, { fallback: _jsx("div", { className: "flex min-h-[28rem] items-center justify-center text-muted-foreground", children: _jsx(IconLoader2, { className: "size-5 animate-spin", "aria-label": "Loading" }) }), children: _jsx(ExtensionsListPage, { embedded: true }) }) }));
 }

package/dist/client/settings/SchedulingTimezoneField.d.ts

@@ -6,4 +6,6 @@
  * browser at all (cron ticks, chat integrations, A2A), and those callers would
  * otherwise fall back to the host zone and schedule the user's 8am job in UTC.
  */
-export declare function SchedulingTimezoneField(): import("react").JSX.Element;
+export declare function SchedulingTimezoneField({ compact, }: {
+    compact?: boolean;
+}): import("react").JSX.Element;

package/dist/client/settings/SchedulingTimezoneField.js

@@ -11,7 +11,7 @@ const SYSTEM = "system";
  * browser at all (cron ticks, chat integrations, A2A), and those callers would
  * otherwise fall back to the host zone and schedule the user's 8am job in UTC.
  */
-export function SchedulingTimezoneField() {
+export function SchedulingTimezoneField({ compact = false, }) {
     const t = useT();
     const detected = browserTimezone();
     const preference = useActionQuery("get-localization-preference");
@@ -20,10 +20,14 @@ export function SchedulingTimezoneField() {
     const stored = preference.data?.timezone ?? SYSTEM;
     const pending = save.isPending ? save.variables?.timezone : undefined;
     const value = pending ?? stored;
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium", htmlFor: "agent-native-scheduling-timezone", children: t("settings.timezoneLabel", { defaultValue: "Timezone" }) }), _jsx(TimezoneSelect, { id: "agent-native-scheduling-timezone", value: value, disabled: preference.isLoading || save.isPending, suggested: [detected], systemLabel: t("settings.timezoneSystem", {
-                    defaultValue: "Follow this browser ({{zone}})",
-                    zone: detected,
-                }), onChange: (timezone) => save.mutate({ timezone }) }), _jsx("p", { className: "min-h-4 text-xs text-muted-foreground", children: save.error ? (_jsx("span", { className: "text-destructive", children: save.error.message })) : (t("settings.timezoneHint", {
+    const select = (_jsx(TimezoneSelect, { id: "agent-native-scheduling-timezone", value: value, disabled: preference.isLoading || save.isPending, suggested: [detected], systemLabel: t("settings.timezoneSystem", {
+            defaultValue: "Follow this browser ({{zone}})",
+            zone: detected,
+        }), onChange: (timezone) => save.mutate({ timezone }) }));
+    if (compact) {
+        return (_jsxs("div", { className: "w-full sm:w-72", children: [select, save.error && (_jsx("p", { className: "mt-1 text-xs text-destructive", children: save.error.message }))] }));
+    }
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium", htmlFor: "agent-native-scheduling-timezone", children: t("settings.timezoneLabel", { defaultValue: "Timezone" }) }), select, _jsx("p", { className: "min-h-4 text-xs text-muted-foreground", children: save.error ? (_jsx("span", { className: "text-destructive", children: save.error.message })) : (t("settings.timezoneHint", {
                     defaultValue: "Used for timestamps and scheduled automations.",
                 })) })] }));
 }

package/dist/client/settings/SettingsPanel.d.ts

@@ -24,14 +24,17 @@ export interface AgentSettingsTabsOptions {
      * app capability and stay hidden unless the host opts in.
      */
     extensionTools?: boolean;
+    /** Optional page-level settings to show in the Agent section. */
+    agentAdditionalContent?: React.ReactNode;
 }
 export declare function areExtensionSettingsEnabled(options?: AgentSettingsTabsOptions): boolean;
 export declare function SettingsPanel(props: SettingsPanelProps): React.JSX.Element;
 export declare function ConnectionsSettingsContent({ settingsPanelProps, }: {
     settingsPanelProps: SettingsPanelProps;
 }): React.JSX.Element;
-export declare function AgentSettingsContent({ className, sections, }?: {
+export declare function AgentSettingsContent({ className, sections, agentAdditionalContent, }?: {
     className?: string;
     sections?: readonly SettingsSectionId[];
+    agentAdditionalContent?: React.ReactNode;
 }): React.JSX.Element;
 export declare function useAgentSettingsTabs(options?: AgentSettingsTabsOptions): SettingsTabItem[];

package/dist/client/settings/SettingsPanel.js

@@ -2,9 +2,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Checkbox, Picker, TextField, } from "@agent-native/toolkit/design-system";
 import { Button as ToolkitButton } from "@agent-native/toolkit/ui/button";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@agent-native/toolkit/ui/command";
-import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconHierarchy2, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconFolder, IconShield, IconShieldLock, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconApps, IconUsersGroup, IconTool, } from "@tabler/icons-react";
+import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconHierarchy2, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconFolder, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconApps, IconUsersGroup, IconTool, } from "@tabler/icons-react";
 import React, { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef, } from "react";
 import { PROVIDER_ENV_PLACEHOLDERS } from "../../agent/engine/provider-env-vars.js";
+import { buildSettingsRoute } from "../../navigation/index.js";
 import { saveAgentEngineProviderSettings } from "../agent-engine-key.js";
 import { AgentWorkspaceContent } from "../agent-page/AgentWorkspaceContent.js";
 import { agentNativePath } from "../api-path.js";
@@ -40,6 +41,9 @@ const IntegrationsPanel = lazy(() => import("../integrations/IntegrationsPanel.j
 function SettingsSkeleton({ lines = 3 }) {
     return (_jsx("div", { className: "space-y-3 animate-pulse", children: Array.from({ length: lines }, (_, i) => (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "h-3 rounded bg-muted-foreground/10", style: { width: i === 0 ? "30%" : i === 1 ? "100%" : "60%" } }), i < 2 && (_jsx("div", { className: "h-9 rounded-md border border-border bg-muted-foreground/5" }))] }, i))) }));
 }
+function SettingsLoadingRow({ label, description, controlCount = 1, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 px-5 py-4 sm:px-6", children: [_jsxs("div", { className: "min-w-0 space-y-2", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: label }), description ? (_jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: description })) : null] }), _jsx("div", { className: "flex shrink-0 items-center gap-2", "aria-hidden": "true", children: Array.from({ length: controlCount }, (_, index) => (_jsx("div", { className: cn("h-9 animate-pulse rounded-md border border-border bg-muted-foreground/10", index === 0 ? "w-28" : "w-20") }, index))) })] }));
+}
 const CONTROL_STYLE = {
     fontSize: 12,
     lineHeight: 1,
@@ -549,7 +553,7 @@ function LLMSectionInner({ builderFlow, builderLoading, connectUrl, connected, o
         }
         catch { }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Use Builder.io free credits or your own LLM provider.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, grouped: isPage && grouped, open: open, onToggle: onToggle, children: initialLoading ? (_jsx("div", { className: cn(isPage && "px-5 py-4 sm:px-6"), children: _jsx(SettingsSkeleton, { lines: 3 }) })) : (_jsxs("div", { className: cn(isPage
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("llm"), icon: _jsx(IconBrain, { size: 14 }), title: "LLM", subtitle: "Use Builder.io free credits or your own LLM provider.", required: true, connected: initialLoading ? undefined : anyKeyConfigured, grouped: isPage && grouped, open: open, onToggle: onToggle, children: initialLoading ? (_jsx(SettingsLoadingRow, { label: "Connect an LLM", description: "Use Builder.io free credits or your own provider.", controlCount: 2 })) : (_jsxs("div", { className: cn(isPage
                 ? "flex items-center justify-between gap-4 px-5 py-4 sm:px-6"
                 : "space-y-2"), children: [isPage && (_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Connect an LLM" }), _jsx("p", { className: "mt-1 text-sm leading-6 text-muted-foreground", children: "Use Builder.io free credits or your own provider." })] })), _jsxs("div", { className: cn(isPage && "flex flex-wrap items-center justify-end gap-2"), children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "llm_settings", trackingFlow: "connect_llm", label: "Connect Builder.io", compact: isPage }), builderConnected && !isPage && (_jsxs(Button, { type: "button", intent: "neutral", emphasis: "ghost", "aria-expanded": manualSetupOpen, "aria-controls": "llm-manual-setup", onClick: () => setManualSetupOpen((open) => !open), className: cn("inline-flex items-center gap-1 px-0.5 text-muted-foreground hover:text-foreground", isPage ? "text-xs" : "text-[10px]"), children: [t("agentPanel.addOwnKeys", {
                                     defaultValue: "Add your own keys",
@@ -600,8 +604,10 @@ function AppDefaultModelPicker({ engines, value, disabled, onChange, }) {
         : "Global default";
     const openIntegrations = () => {
         setOpen(false);
-        if (typeof window !== "undefined")
-            window.location.hash = "integrations";
+        if (typeof window !== "undefined") {
+            window.history.pushState(null, "", buildSettingsRoute("integrations"));
+            window.dispatchEvent(new Event("popstate"));
+        }
     };
     return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", disabled: disabled, "aria-label": "Default model", className: "inline-flex h-10 min-w-[230px] max-w-[320px] items-center justify-between gap-3 rounded-md border border-border bg-background px-3 text-start text-sm text-foreground transition-colors hover:bg-accent/40 disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx("span", { className: "truncate", children: selectedLabel }), _jsx(IconChevronDown, { size: 15, className: "shrink-0 text-muted-foreground" })] }) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: "w-[min(380px,calc(100vw-2rem))] p-0", children: _jsxs(Command, { filter: (candidate, search) => candidate.toLowerCase().includes(search.toLowerCase()) ? 1 : 0, children: [_jsx(CommandInput, { placeholder: "Search providers or models..." }), _jsxs(CommandList, { className: "max-h-[min(420px,calc(100vh-8rem))]", children: [_jsx(CommandEmpty, { children: "No models found." }), _jsx(CommandGroup, { heading: "Default", children: _jsxs(CommandItem, { value: "global default shared llm", onSelect: () => {
                                             onChange("__global__");
@@ -758,7 +764,7 @@ function AppModelDefaultsSectionInner({ grouped = false, open, onToggle, }) {
             setSaving(false);
         }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("app-models"), icon: _jsx(IconApps, { size: 14 }), title: "App Default Model", subtitle: "Choose the model used by this app by default.", connected: loading ? undefined : hasAppDefault, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (isPage ? (_jsxs(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Default model", description: hasAppDefault
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("app-models"), icon: _jsx(IconApps, { size: 14 }), title: "App Default Model", subtitle: "Choose the model used by this app by default.", connected: loading ? undefined : hasAppDefault, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsLoadingRow, { label: "Default model", description: "Choose the model used by this app by default." })) : settings ? (isPage ? (_jsxs(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Default model", description: hasAppDefault
                 ? `Used by ${friendlyAppName(settings.appId) || "this app"} · ${scopeLabel}.`
                 : "Uses the global LLM default.", status: _jsx("span", { className: "text-xs text-muted-foreground", children: settings.source }), control: _jsx(AppDefaultModelPicker, { engines: settings.engines, value: hasAppDefault
                     ? `${selectedEngine}::${selectedModel}`
@@ -981,7 +987,7 @@ function AgentLimitsSectionInner({ grouped = false, open, onToggle, }) {
             ? undefined
             : settings
                 ? settings.maxIterations !== settings.defaultMaxIterations
-                : false, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (isPage ? (_jsx(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Max iterations", description: `Default ${settings.defaultMaxIterations.toLocaleString()} · applies to ${scopeLabel}.`, status: _jsx("span", { className: "text-xs text-muted-foreground", children: settings.source }), control: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(ManageButton, {}) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: "w-80 p-4", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Max iterations" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Choose how long a response can work before pausing." })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "number", min: settings.minMaxIterations, max: settings.maxMaxIterations, value: value, disabled: !settings.canUpdate || saving, onChange: (event) => {
+                : false, grouped: isPage && grouped, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsLoadingRow, { label: "Max iterations", description: "Set how long a response can work before pausing." })) : settings ? (isPage ? (_jsx(SettingsRow, { className: grouped ? undefined : "-mx-5 sm:-mx-6", label: "Max iterations", description: `Default ${settings.defaultMaxIterations.toLocaleString()} · applies to ${scopeLabel}.`, status: _jsx("span", { className: "text-xs text-muted-foreground", children: settings.source }), control: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(ManageButton, {}) }), _jsx(PopoverContent, { align: "end", sideOffset: 6, className: "w-80 p-4", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Max iterations" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Choose how long a response can work before pausing." })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("input", { type: "number", min: settings.minMaxIterations, max: settings.maxMaxIterations, value: value, disabled: !settings.canUpdate || saving, onChange: (event) => {
                                                 setValue(event.target.value);
                                                 setError(null);
                                             }, onKeyDown: (event) => {
@@ -1016,7 +1022,7 @@ function CapabilityStatusStrip({ isDevMode, builderConnected, builderLoading, bu
             : "Desktop/local";
     return (_jsxs("div", { className: "rounded-md border border-border bg-muted/20 px-2.5 py-2", children: [_jsx("div", { className: "mb-1.5 text-[10px] font-medium text-muted-foreground", children: "Available now" }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(CapabilityStatusRow, { label: "App", value: "Chat + actions", active: true }), _jsx(CapabilityStatusRow, { label: "Code", value: codeLabel, active: codeAvailable }), _jsx(CapabilityStatusRow, { label: "Builder", active: builderConnected, value: builderLoading ? ("Checking...") : builderConnected ? ("Connected") : (_jsx(Button, { type: "button", intent: "neutral", emphasis: "outline", onClick: onOpenLlm, className: "rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground", children: "Connect" })) })] })] }));
 }
-function SettingsPanelContent({ isDevMode, initialSection, sectionRequestKey, sections = ALL_SETTINGS_SECTIONS, showCapabilityStrip = true, className, surface = "sidebar", builderConnectionOwnedExternally = false, }) {
+function SettingsPanelContent({ isDevMode, initialSection, sectionRequestKey, sections = ALL_SETTINGS_SECTIONS, showCapabilityStrip = true, className, surface = "sidebar", builderConnectionOwnedExternally = false, agentAdditionalContent, }) {
     const { status: builder, loading: builderLoading } = useBuilderStatus({
         enabled: !builderConnectionOwnedExternally,
     });
@@ -1047,9 +1053,10 @@ function SettingsPanelContent({ isDevMode, initialSection, sectionRequestKey, se
     });
     const openSettingsSection = useCallback((section, scroll = false) => openControllerSection(section, { scroll }), [openControllerSection]);
     const isPage = surface === "page";
+    const isWorkspacePage = isPage && sections.includes("hosting");
     return (_jsx(SettingsSurfaceProvider, { surface: surface, children: _jsxs("div", { className: cn(isPage ? "space-y-8" : "flex-1 min-h-0 overflow-y-auto p-3 space-y-2", className), style: isPage ? undefined : { overflowY: "auto" }, children: [showCapabilityStrip && (_jsx(CapabilityStatusStrip, { isDevMode: isDevMode, builderConnected: connected, builderLoading: builderLoading, builderBranchesAvailable: builderBranchesAvailable, onOpenLlm: () => openSettingsSection("llm", true) })), isPage &&
-                    ["llm", "app-models", "limits", "voice"].some((section) => shouldShowSection(section)) && (_jsxs(SettingsGroup, { title: "Agent", children: [shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, grouped: true, open: openSection === "llm", onToggle: () => toggle("llm") })), shouldShowSection("app-models") && (_jsx(AppModelDefaultsSectionInner, { grouped: true, open: openSection === "app-models", onToggle: () => toggle("app-models") })), shouldShowSection("limits") && (_jsx(AgentLimitsSectionInner, { grouped: true, open: openSection === "limits", onToggle: () => toggle("limits") })), shouldShowSection("voice") && (_jsx(SettingsSection, { id: settingsSectionDomId("voice"), icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "Choose how voice input is transcribed.", grouped: true, flat: true, open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, { compact: true }) }))] })), isPage &&
-                    ["automations", "background"].some((section) => shouldShowSection(section)) && (_jsxs(SettingsGroup, { title: "Agent workflows", children: [shouldShowSection("automations") && (_jsx(SettingsSection, { id: settingsSectionDomId("automations"), icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Scheduled and event-triggered agent tasks.", grouped: true, flat: true, open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(SettingsRow, { label: "Automations", description: "Schedule agent tasks or run them from events.", control: _jsxs("a", { href: "/settings#agent:automations", className: "inline-flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground no-underline transition-colors hover:bg-accent/40", children: ["Open automations", _jsx(IconExternalLink, { size: 14 })] }) }) })), shouldShowSection("background") && (_jsx(SettingsSection, { id: settingsSectionDomId("background"), icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", grouped: true, flat: true, connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(SettingsRow, { label: "Background agent", description: "Make code changes from production mode via Builder.", control: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent", compact: true }) }) }))] })), !isPage && shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") })), !isPage && shouldShowSection("app-models") && (_jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") })), !isPage && shouldShowSection("limits") && (_jsx(AgentLimitsSectionInner, { open: openSection === "limits", onToggle: () => toggle("limits") })), !isPage && shouldShowSection("voice") && (_jsx(SettingsSection, { id: settingsSectionDomId("voice"), icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "How the composer microphone turns your voice into text.", flat: true, open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, {}) })), shouldShowSection("demo-mode") && (_jsx(SettingsSection, { id: settingsSectionDomId("demo-mode"), icon: _jsx(IconEyeOff, { size: 14 }), title: "Demo mode", subtitle: "Replace displayed emails with realistic fake data in this browser and reshape supported charts for presentations. Backend, agent integrations, and agent results stay real and access-scoped.", flat: true, open: openSection === "demo-mode", onToggle: () => toggle("demo-mode"), children: _jsx(DemoModeSection, {}) })), !isPage && shouldShowSection("automations") && (_jsx(SettingsSection, { id: settingsSectionDomId("automations"), icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Scheduled and event-triggered agent tasks.", flat: true, open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) })), shouldShowSection("secrets") && (_jsx(SettingsSection, { id: settingsSectionDomId("secrets"), icon: _jsx(IconKey, { size: 14 }), title: "API keys", subtitle: "Service credentials and automation keys.", flat: true, open: openSection === "secrets", onToggle: () => toggle("secrets"), children: _jsx(SecretsSection, { focusKey: focusSecretKey }) })), shouldShowSection("hosting") && (_jsx(SettingsSection, { id: settingsSectionDomId("hosting"), icon: _jsx(IconCloud, { size: 14 }), title: "Hosting", subtitle: "Deploy your app to the cloud.", flat: true, connected: connected, open: openSection === "hosting", onToggle: () => toggle("hosting"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting" }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=deployment_settings", dim: connected })] }) })), shouldShowSection("database") && (_jsx(SettingsSection, { id: settingsSectionDomId("database"), icon: _jsx(IconDatabase, { size: 14 }), title: "Database", subtitle: "Connect a cloud database for persistent storage.", flat: true, connected: connected, open: openSection === "database", onToggle: () => toggle("database"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database" }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, any Postgres/SQLite database, or local PGlite with pglite:./data/pglite.", docsUrl: "https://www.builder.io/c/docs/agent-native-database?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=database_settings", dim: connected })] }) })), shouldShowSection("uploads") && (_jsx(SettingsSection, { id: settingsSectionDomId("uploads"), icon: _jsx(IconUpload, { size: 14 }), title: "File uploads", subtitle: "Where user-uploaded files (avatars, chat attachments) are stored.", flat: true, connected: connected, open: openSection === "uploads", onToggle: () => toggle("uploads"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload" }), _jsx(ManualSetupCard, { hint: "Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production.", docsUrl: "https://www.builder.io/c/docs/agent-native-file-uploads?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=file_upload_settings", dim: connected })] }) })), shouldShowSection("auth") && (_jsx(SettingsSection, { id: settingsSectionDomId("auth"), icon: _jsx(IconShield, { size: 14 }), title: "Authentication", subtitle: "Set up user authentication and access control.", flat: true, connected: connected, open: openSection === "auth", onToggle: () => toggle("auth"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth" }), _jsx(ManualSetupCard, { hint: "Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=authentication_settings", dim: connected })] }) })), shouldShowSection("email") && (_jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") })), shouldShowSection("browser") && (_jsx(SettingsSection, { id: settingsSectionDomId("browser"), icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", flat: true, connected: builderConnectionOwnedExternally ? undefined : connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: !builderConnectionOwnedExternally ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "browser_settings", trackingFlow: "browser_automation" })) : null })), !isPage &&
+                    ["llm", "app-models", "limits", "voice"].some((section) => shouldShowSection(section)) && (_jsxs(SettingsGroup, { title: "Agent", children: [shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, grouped: true, open: openSection === "llm", onToggle: () => toggle("llm") })), shouldShowSection("app-models") && (_jsx(AppModelDefaultsSectionInner, { grouped: true, open: openSection === "app-models", onToggle: () => toggle("app-models") })), shouldShowSection("limits") && (_jsx(AgentLimitsSectionInner, { grouped: true, open: openSection === "limits", onToggle: () => toggle("limits") })), shouldShowSection("voice") && (_jsx(SettingsSection, { id: settingsSectionDomId("voice"), icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "Choose how voice input is transcribed.", grouped: true, flat: true, open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, { compact: true }) }))] })), isPage && agentAdditionalContent ? (_jsx(SettingsGroup, { title: "Notifications", children: agentAdditionalContent })) : null, isPage &&
+                    ["automations", "background"].some((section) => shouldShowSection(section)) && (_jsxs(SettingsGroup, { title: "Agent workflows", children: [shouldShowSection("automations") && (_jsx(SettingsSection, { id: settingsSectionDomId("automations"), icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Scheduled and event-triggered agent tasks.", grouped: true, flat: true, open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(SettingsRow, { label: "Automations", description: "Schedule agent tasks or run them from events.", control: _jsxs("a", { href: "/settings/agent/automations", className: "inline-flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground no-underline transition-colors hover:bg-accent/40", children: ["Open automations", _jsx(IconExternalLink, { size: 14 })] }) }) })), shouldShowSection("background") && (_jsx(SettingsSection, { id: settingsSectionDomId("background"), icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", grouped: true, flat: true, connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(SettingsRow, { label: "Background agent", description: "Make code changes from production mode via Builder.", control: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent", compact: true }) }) }))] })), isWorkspacePage && (_jsxs(SettingsGroup, { title: "Workspace", children: [shouldShowSection("demo-mode") && (_jsx(SettingsRow, { id: settingsSectionDomId("demo-mode"), label: "Demo mode", description: "Use sample data in this browser for presentations.", control: _jsx(DemoModeSection, { compact: true }) })), shouldShowSection("hosting") && (_jsx(SettingsRow, { id: settingsSectionDomId("hosting"), label: "Hosting", description: "Deploy the app to the cloud.", control: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting", compact: true }), _jsx(ManualSetupCard, { title: "Set up manually", hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=deployment_settings", dim: connected, bare: true, popover: true, popoverLabel: "Manage" })] }) })), shouldShowSection("database") && (_jsx(SettingsRow, { id: settingsSectionDomId("database"), label: "Database", description: "Connect persistent app storage.", control: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database", compact: true }), _jsx(ManualSetupCard, { title: "Set up manually", hint: "Set DATABASE_URL in your .env to connect a supported database.", docsUrl: "https://www.builder.io/c/docs/agent-native-database?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=database_settings", dim: connected, bare: true, popover: true, popoverLabel: "Manage" })] }) })), shouldShowSection("uploads") && (_jsx(SettingsRow, { id: settingsSectionDomId("uploads"), label: "File uploads", description: "Store avatars and chat attachments.", control: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload", compact: true }), _jsx(ManualSetupCard, { title: "Set up manually", hint: "Configure your own file or object storage provider.", docsUrl: "https://www.builder.io/c/docs/agent-native-file-uploads?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=file_upload_settings", dim: connected, bare: true, popover: true, popoverLabel: "Manage" })] }) })), shouldShowSection("auth") && (_jsx(SettingsRow, { id: settingsSectionDomId("auth"), label: "Authentication", description: "Set up sign-in and access control.", control: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth", compact: true }), _jsx(ManualSetupCard, { title: "Set up manually", hint: "Configure Better Auth and optional Google or GitHub providers.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=authentication_settings", dim: connected, bare: true, popover: true, popoverLabel: "Manage" })] }) }))] })), !isPage && shouldShowSection("llm") && (_jsx(LLMSectionInner, { builderFlow: builderFlow, builderLoading: builderLoading, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, open: openSection === "llm", onToggle: () => toggle("llm") })), !isPage && shouldShowSection("app-models") && (_jsx(AppModelDefaultsSectionInner, { open: openSection === "app-models", onToggle: () => toggle("app-models") })), !isPage && shouldShowSection("limits") && (_jsx(AgentLimitsSectionInner, { open: openSection === "limits", onToggle: () => toggle("limits") })), !isPage && shouldShowSection("voice") && (_jsx(SettingsSection, { id: settingsSectionDomId("voice"), icon: _jsx(IconMicrophone, { size: 14 }), title: "Voice Transcription", subtitle: "How the composer microphone turns your voice into text.", flat: true, open: openSection === "voice", onToggle: () => toggle("voice"), children: _jsx(VoiceTranscriptionSection, {}) })), !isPage && shouldShowSection("demo-mode") && (_jsx(SettingsSection, { id: settingsSectionDomId("demo-mode"), icon: _jsx(IconEyeOff, { size: 14 }), title: "Demo mode", subtitle: "Replace displayed emails with realistic fake data in this browser and reshape supported charts for presentations. Backend, agent integrations, and agent results stay real and access-scoped.", flat: true, open: openSection === "demo-mode", onToggle: () => toggle("demo-mode"), children: _jsx(DemoModeSection, {}) })), !isPage && shouldShowSection("automations") && (_jsx(SettingsSection, { id: settingsSectionDomId("automations"), icon: _jsx(IconBolt, { size: 14 }), title: "Automations", subtitle: "Scheduled and event-triggered agent tasks.", flat: true, open: openSection === "automations", onToggle: () => toggle("automations"), children: _jsx(AutomationsSection, {}) })), shouldShowSection("secrets") && (_jsx(SettingsSection, { id: settingsSectionDomId("secrets"), icon: _jsx(IconKey, { size: 14 }), title: "API keys", subtitle: "Service credentials and automation keys.", flat: true, open: openSection === "secrets", onToggle: () => toggle("secrets"), children: _jsx(SecretsSection, { focusKey: focusSecretKey }) })), !isPage && shouldShowSection("hosting") && (_jsx(SettingsSection, { id: settingsSectionDomId("hosting"), icon: _jsx(IconCloud, { size: 14 }), title: "Hosting", subtitle: "Deploy your app to the cloud.", flat: true, connected: connected, open: openSection === "hosting", onToggle: () => toggle("hosting"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "hosting_settings", trackingFlow: "hosting" }), _jsx(ManualSetupCard, { hint: "Deploy manually to Netlify, Vercel, Cloudflare, or any Nitro-supported target.", docsUrl: "https://www.builder.io/c/docs/agent-native-deployment?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=deployment_settings", dim: connected })] }) })), !isPage && shouldShowSection("database") && (_jsx(SettingsSection, { id: settingsSectionDomId("database"), icon: _jsx(IconDatabase, { size: 14 }), title: "Database", subtitle: "Connect a cloud database for persistent storage.", flat: true, connected: connected, open: openSection === "database", onToggle: () => toggle("database"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "database_settings", trackingFlow: "database" }), _jsx(ManualSetupCard, { hint: "Set DATABASE_URL in your .env to connect Neon, Supabase, Turso, any Postgres/SQLite database, or local PGlite with pglite:./data/pglite.", docsUrl: "https://www.builder.io/c/docs/agent-native-database?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=database_settings", dim: connected })] }) })), !isPage && shouldShowSection("uploads") && (_jsx(SettingsSection, { id: settingsSectionDomId("uploads"), icon: _jsx(IconUpload, { size: 14 }), title: "File uploads", subtitle: "Where user-uploaded files (avatars, chat attachments) are stored.", flat: true, connected: connected, open: openSection === "uploads", onToggle: () => toggle("uploads"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "file_upload_settings", trackingFlow: "file_upload" }), _jsx(ManualSetupCard, { hint: "Without a provider, files are stored as base64 in your database. Fine for dev, not recommended for production.", docsUrl: "https://www.builder.io/c/docs/agent-native-file-uploads?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=file_upload_settings", dim: connected })] }) })), !isPage && shouldShowSection("auth") && (_jsx(SettingsSection, { id: settingsSectionDomId("auth"), icon: _jsx(IconShield, { size: 14 }), title: "Authentication", subtitle: "Set up user authentication and access control.", flat: true, connected: connected, open: openSection === "auth", onToggle: () => toggle("auth"), children: _jsxs("div", { className: "space-y-2", children: [_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "auth_settings", trackingFlow: "auth" }), _jsx(ManualSetupCard, { hint: "Configure Better Auth with BETTER_AUTH_SECRET and optional Google/GitHub OAuth providers.", docsUrl: "https://www.builder.io/c/docs/agent-native-authentication?utm_source=agent-native&utm_medium=product&utm_campaign=onboarding&utm_content=authentication_settings", dim: connected })] }) })), shouldShowSection("email") && (_jsx(EmailSectionInner, { open: openSection === "email", onToggle: () => toggle("email") })), shouldShowSection("browser") && (_jsx(SettingsSection, { id: settingsSectionDomId("browser"), icon: _jsx(IconBrowser, { size: 14 }), title: "Browser Automation", subtitle: "Let agents control a real browser for web tasks.", flat: true, connected: builderConnectionOwnedExternally ? undefined : connected, open: openSection === "browser", onToggle: () => toggle("browser"), children: !builderConnectionOwnedExternally ? (_jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "browser_settings", trackingFlow: "browser_automation" })) : null })), !isPage &&
                     builderBranchesAvailable &&
                     shouldShowSection("background") && (_jsx(SettingsSection, { id: settingsSectionDomId("background"), icon: _jsx(IconGitBranch, { size: 14 }), title: "Background Agent", subtitle: "Make code changes from production mode via Builder.", flat: true, connected: connected, open: openSection === "background", onToggle: () => toggle("background"), children: _jsx(UseBuilderCard, { builderFlow: builderFlow, connectUrl: connectUrl, connected: connected, orgName: orgName, envManaged: envManaged, credentialSource: credentialSource, trackingSource: "background_agent_settings", trackingFlow: "background_agent" }) })), shouldShowSection("integrations") && (_jsx(SettingsSection, { id: settingsSectionDomId("integrations"), icon: _jsx(IconPlugConnected, { size: 14 }), title: "Integrations", subtitle: "Connect messaging platforms and external services.", flat: true, open: openSection === "integrations", onToggle: () => toggle("integrations"), children: _jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }) })), shouldShowSection("usage") && (_jsx(SettingsSection, { id: settingsSectionDomId("usage"), icon: _jsx(IconCoin, { size: 14 }), title: "Usage", subtitle: "Track token consumption and estimated cost \u2014 broken down by chat, automations, and background jobs.", flat: true, open: openSection === "usage", onToggle: () => toggle("usage"), children: _jsx(UsageSection, {}) })), shouldShowSection("a2a") && (_jsx(SettingsSection, { id: settingsSectionDomId("a2a"), icon: _jsx(IconTopologyRing2, { size: 14 }), title: "Connected Agents (A2A)", subtitle: "Manage remote agents connected via the A2A protocol.", flat: true, open: openSection === "a2a", onToggle: () => toggle("a2a"), children: _jsx(AgentsSection, {}) }))] }) }));
 }
@@ -1059,7 +1066,7 @@ export function SettingsPanel(props) {
 export function ConnectionsSettingsContent({ settingsPanelProps, }) {
     return (_jsxs("div", { className: "w-full space-y-8", children: [_jsx(Suspense, { fallback: null, children: _jsx(IntegrationsPanel, {}) }), _jsx(BuilderConnectCard, { trackingSource: "settings_connections" }), _jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: INTEGRATION_SETTINGS_SECTIONS.filter((section) => section !== "integrations"), showCapabilityStrip: false, className: "w-full", builderConnectionOwnedExternally: true })] }));
 }
-export function AgentSettingsContent({ className, sections = AGENT_SETTINGS_SECTIONS, } = {}) {
+export function AgentSettingsContent({ className, sections = AGENT_SETTINGS_SECTIONS, agentAdditionalContent, } = {}) {
     const { isDevMode, canToggle, setDevMode } = useDevMode();
     const settingsPanelProps = useMemo(() => ({
         isDevMode,
@@ -1068,11 +1075,12 @@ export function AgentSettingsContent({ className, sections = AGENT_SETTINGS_SECT
         },
         showDevToggle: canToggle,
     }), [canToggle, isDevMode, setDevMode]);
-    return (_jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: sections, showCapabilityStrip: false, className: cn("w-full", className) }));
+    return (_jsx(SettingsPanelContent, { ...settingsPanelProps, surface: "page", sections: sections, showCapabilityStrip: false, className: cn("w-full", className), agentAdditionalContent: agentAdditionalContent }));
 }
 export function useAgentSettingsTabs(options = {}) {
     const { isDevMode, canToggle, setDevMode } = useDevMode();
     const extensionToolsEnabled = areExtensionSettingsEnabled(options);
+    const agentAdditionalContent = options.agentAdditionalContent;
     const baseProps = useMemo(() => ({
         isDevMode,
         onToggleDevMode: () => {
@@ -1196,7 +1204,7 @@ export function useAgentSettingsTabs(options = {}) {
                 group: "agent",
                 keywords: agent.keywords,
                 searchEntries: overviewSearchEntries,
-                content: (_jsx(AgentWorkspaceContent, { activeTab: "overview", overview: _jsx(AgentSettingsContent, { className: "w-full", sections: AGENT_SETTINGS_SECTIONS.filter((section) => section !== "automations" && section !== "a2a") }) })),
+                content: (_jsx(AgentWorkspaceContent, { activeTab: "overview", overview: _jsx(AgentSettingsContent, { className: "w-full", agentAdditionalContent: agentAdditionalContent, sections: AGENT_SETTINGS_SECTIONS.filter((section) => section !== "automations" && section !== "a2a") }) })),
             },
             {
                 id: "agent:resources",
@@ -1245,14 +1253,6 @@ export function useAgentSettingsTabs(options = {}) {
                 ],
                 content: _jsx(AgentWorkspaceContent, { activeTab: "agents", overview: null }),
             },
-            {
-                id: "agent:access",
-                label: "Access",
-                icon: IconShieldLock,
-                group: "agent",
-                keywords: "access sharing permissions clients",
-                content: _jsx(AgentWorkspaceContent, { activeTab: "access", overview: null }),
-            },
         ];
-    }, [baseProps, extensionToolsEnabled]);
+    }, [agentAdditionalContent, baseProps, extensionToolsEnabled]);
 }

package/dist/client/settings/SettingsTabsPage.d.ts

@@ -73,8 +73,8 @@ export interface SettingsTabsPageProps {
      * Controlled active tab id. When provided, the parent owns tab state (and is
      * responsible for URL/app-state sync). Recognized top-level tab hashes still
      * report through `onValueChange`, so shared links such as
-     * `/settings#organization` can select the matching controlled Team tab.
-     * Leave undefined for the default uncontrolled, hash-driven behavior.
+     * `/settings/organization` can select the matching controlled Team tab.
+     * Legacy hash links remain supported and are canonicalized on load.
      */
     value?: string;
     /**