@agent-native/core 0.141.5 → 0.141.7

package/dist/client/settings/AccountSettingsCard.js

@@ -1,13 +1,15 @@
-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 { 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(/[ @._-]+/)
@@ -71,29 +73,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 +138,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;
     /**