@agent-native/core 0.92.0 → 0.92.1

package/dist/client/settings/SettingsPanel.js

@@ -1,12 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconUserCircle, IconApps, } from "@tabler/icons-react";
+import { IconChevronDown, IconChevronRight, IconCheck, IconExternalLink, IconBrain, IconBrowser, IconGitBranch, IconCloud, IconDatabase, IconShield, IconPlugConnected, IconTopologyRing2, IconLoader2, IconUpload, IconCoin, IconMail, IconKey, IconMicrophone, IconEyeOff, IconBolt, IconGauge, IconUserCircle, IconApps, IconUsersGroup, } from "@tabler/icons-react";
 import { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef, } from "react";
 import { PROVIDER_ENV_PLACEHOLDERS } from "../../agent/engine/provider-env-vars.js";
 import { saveAgentEngineProviderSettings } from "../agent-engine-key.js";
 import { agentNativePath } from "../api-path.js";
 import { BuilderBMark } from "../builder-mark.js";
 import { Tooltip, TooltipContent, TooltipTrigger, } from "../components/ui/tooltip.js";
+import { TeamPage } from "../org/TeamPage.js";
 import { callAction } from "../use-action.js";
 import { uploadAvatar, useAvatarUrl } from "../use-avatar.js";
 import { useDevMode } from "../use-dev-mode.js";
@@ -41,6 +42,14 @@ const CONTROL_STYLE_PAGE = {
 function fieldLabelClass(isPage) {
     return cn("font-medium text-foreground", isPage ? "text-sm" : "text-[12px]");
 }
+// Secondary label / row-title size (e.g. "This app", provider names).
+function subTextClass(isPage) {
+    return isPage ? "text-sm" : "text-[11px]";
+}
+// Helper / hint / status note size.
+function noteTextClass(isPage) {
+    return isPage ? "text-xs" : "text-[10px]";
+}
 function textInputClass(isPage) {
     return cn("flex w-full rounded-md border border-border bg-background text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-accent placeholder:text-muted-foreground/50", isPage ? "h-10 px-3 text-sm" : "h-9 px-3 text-[12px]");
 }
@@ -507,6 +516,7 @@ function friendlyAppName(appId) {
         .join(" ");
 }
 function AppModelDefaultsSectionInner({ open, onToggle, }) {
+    const isPage = useSettingsSurface() === "page";
     const [settings, setSettings] = useState(null);
     const [selectedEngine, setSelectedEngine] = useState("");
     const [selectedModel, setSelectedModel] = useState("");
@@ -629,23 +639,27 @@ function AppModelDefaultsSectionInner({ open, onToggle, }) {
             setSaving(false);
         }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("app-models"), icon: _jsx(IconApps, { size: 14 }), title: "App Default Model", subtitle: "Choose the default model for this app/template when no one-off composer model is selected.", connected: loading ? undefined : hasAppDefault, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "rounded-md border border-border bg-accent/20 px-2.5 py-2", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-[11px] font-medium text-foreground", children: friendlyAppName(settings.appId) || "This app" }), _jsx("p", { className: "mt-0.5 text-[10px] text-muted-foreground", children: hasAppDefault
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("app-models"), icon: _jsx(IconApps, { size: 14 }), title: "App Default Model", subtitle: "Choose the default model for this app/template when no one-off composer model is selected.", connected: loading ? undefined : hasAppDefault, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: cn("rounded-md border border-border bg-accent/20", isPage ? "px-3.5 py-3" : "px-2.5 py-2"), children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: cn("truncate font-medium text-foreground", subTextClass(isPage)), children: friendlyAppName(settings.appId) || "This app" }), _jsx("p", { className: cn("mt-0.5 text-muted-foreground", noteTextClass(isPage)), children: hasAppDefault
                                             ? `Applies to ${scopeLabel}.`
-                                            : "Using the global LLM default." })] }), _jsx("span", { className: "shrink-0 rounded-full bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: settings.source })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: engineOptions, onValueChange: (value) => {
+                                            : "Using the global LLM default." })] }), _jsx("span", { className: cn("shrink-0 rounded-full bg-background px-2 py-0.5 font-medium text-muted-foreground", noteTextClass(isPage)), children: settings.source })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(SettingsSelect, { label: "Provider", value: selectedEngine, options: engineOptions, onValueChange: (value) => {
                                     setSelectedEngine(value);
                                     const info = settings.engines.find((engine) => engine.name === value);
                                     setSelectedModel(info?.defaultModel ?? "");
                                     setError(null);
-                                } }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-[12px] font-medium text-foreground", children: "Model" }), _jsx("input", { type: "text", list: `app-model-suggestions-${selectedEngine}`, value: selectedModel, disabled: !settings.canUpdate || saving, onChange: (event) => {
+                                } }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: fieldLabelClass(isPage), children: "Model" }), _jsx("input", { type: "text", list: `app-model-suggestions-${selectedEngine}`, value: selectedModel, disabled: !settings.canUpdate || saving, onChange: (event) => {
                                             setSelectedModel(event.target.value);
                                             setError(null);
                                         }, onKeyDown: (event) => {
                                             if (event.key === "Enter" && hasPendingChange)
                                                 void save();
-                                        }, placeholder: selectedEngineInfo?.defaultModel ?? "model-id", spellCheck: false, autoComplete: "off", className: "flex h-9 w-full rounded-md border border-border bg-background px-3 text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 focus:ring-1 focus:ring-accent placeholder:text-muted-foreground/50 disabled:opacity-60", style: CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `app-model-suggestions-${selectedEngine}`, children: modelOptions.map((option) => (_jsx("option", { value: option.value, label: option.label }, option.value))) }))] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: save, disabled: !hasPendingChange || saving, className: "inline-flex h-8 items-center gap-1 rounded bg-accent px-2.5 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40", children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }), _jsx("button", { type: "button", onClick: reset, disabled: !settings.canUpdate || !hasAppDefault || saving, className: "h-8 rounded border border-border px-2.5 text-[10px] font-medium text-muted-foreground hover:bg-accent/40 hover:text-foreground disabled:opacity-40", children: "Reset" })] })] }), !settings.canUpdate && (_jsx("p", { className: "mt-2 text-[10px] text-muted-foreground", children: "Only organization owners and admins can change app model defaults." })), selectedEngineInfo?.packageInstalled === false ? (_jsx("p", { className: "mt-2 text-[10px] text-muted-foreground", children: "This app does not include the optional runtime packages for this provider." })) : selectedEngineInfo && !selectedEngineInfo.configured ? (_jsx("p", { className: "mt-2 text-[10px] text-muted-foreground", children: "Credentials for this provider were not detected; runtime will fall back if the model cannot be used." })) : null, error && (_jsx("p", { className: "mt-2 text-[10px] text-destructive", children: error }))] }) })) : (_jsx("p", { className: "text-[10px] text-muted-foreground", children: "App model defaults are unavailable." })) }));
+                                        }, placeholder: selectedEngineInfo?.defaultModel ?? "model-id", spellCheck: false, autoComplete: "off", className: cn(textInputClass(isPage), "disabled:opacity-60"), style: isPage ? CONTROL_STYLE_PAGE : CONTROL_STYLE }), modelOptions.length > 0 && (_jsx("datalist", { id: `app-model-suggestions-${selectedEngine}`, children: modelOptions.map((option) => (_jsx("option", { value: option.value, label: option.label }, option.value))) }))] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: save, disabled: !hasPendingChange || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") }), _jsx("button", { type: "button", onClick: reset, disabled: !settings.canUpdate || !hasAppDefault || saving, className: pillButtonClass(isPage, "outline"), children: "Reset" })] })] }), !settings.canUpdate && (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Only organization owners and admins can change app model defaults." })), selectedEngineInfo?.packageInstalled === false ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "This app does not include the optional runtime packages for this provider." })) : selectedEngineInfo && !selectedEngineInfo.configured ? (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Credentials for this provider were not detected; runtime will fall back if the model cannot be used." })) : null, error && (_jsx("p", { className: cn("mt-2 text-destructive", noteTextClass(isPage)), children: error }))] }) })) : (_jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: "App model defaults are unavailable." })) }));
 }
 // ─── Email Section ──────────────────────────────────────────────────────────
 function EmailSectionInner({ open, onToggle, }) {
+    const isPage = useSettingsSurface() === "page";
+    const emailInputCls = cn(textInputClass(isPage), "flex-1");
+    const emailBtnCls = pillButtonClass(isPage, "solid");
+    const emailIconSize = isPage ? 14 : 10;
     const [envKeys, setEnvKeys] = useState([]);
     const [resendKey, setResendKey] = useState("");
     const [sendgridKey, setSendgridKey] = useState("");
@@ -708,21 +722,22 @@ function EmailSectionInner({ open, onToggle, }) {
         if (vars.length)
             save(vars);
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("email"), icon: _jsx(IconMail, { size: 14 }), title: "Email", subtitle: "Needed before deploy for password resets, team invitations, share notifications, and dashboard email reports. Local development can run without it.", connected: !envLoaded ? undefined : anyConfigured, open: open, onToggle: onToggle, children: !envLoaded ? (_jsx(SettingsSkeleton, { lines: 2 })) : (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: "Provider" }), _jsxs("select", { value: emailProvider, onChange: (e) => setEmailProvider(e.target.value), className: "w-full rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none focus:ring-1 focus:ring-accent", children: [_jsx("option", { value: "resend", children: "Resend" }), _jsx("option", { value: "sendgrid", children: "SendGrid" })] })] }), emailProvider === "resend" ? (_jsxs(ManualSetupCard, { hint: "Use Resend for transactional email.", docsUrl: "https://resend.com/api-keys", docsLabel: "Get a Resend key", children: [resendConfigured ? (_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "RESEND_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: resendKey, onChange: (e) => setResendKey(e.target.value), onKeyDown: (e) => {
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("email"), icon: _jsx(IconMail, { size: 14 }), title: "Email", subtitle: "Needed before deploy for password resets, team invitations, share notifications, and dashboard email reports. Local development can run without it.", connected: !envLoaded ? undefined : anyConfigured, open: open, onToggle: onToggle, children: !envLoaded ? (_jsx(SettingsSkeleton, { lines: 2 })) : (_jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "block space-y-1", children: [_jsx("span", { className: cn("uppercase tracking-wide text-muted-foreground", noteTextClass(isPage)), children: "Provider" }), _jsxs("select", { value: emailProvider, onChange: (e) => setEmailProvider(e.target.value), className: cn(textInputClass(isPage), "w-full"), style: isPage ? CONTROL_STYLE_PAGE : undefined, children: [_jsx("option", { value: "resend", children: "Resend" }), _jsx("option", { value: "sendgrid", children: "SendGrid" })] })] }), emailProvider === "resend" ? (_jsxs(ManualSetupCard, { hint: "Use Resend for transactional email.", docsUrl: "https://resend.com/api-keys", docsLabel: "Get a Resend key", children: [resendConfigured ? (_jsxs("div", { className: cn("mb-1 flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "RESEND_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: resendKey, onChange: (e) => setResendKey(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "Enter")
                                             saveResend();
-                                    }, placeholder: "re_...", className: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), _jsx("button", { onClick: saveResend, disabled: !resendKey.trim() || saving, className: "rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40", children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
+                                    }, placeholder: "re_...", className: emailInputCls }), _jsx("button", { onClick: saveResend, disabled: !resendKey.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "Enter")
                                             saveResend();
-                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), !resendConfigured ? null : (_jsx("button", { onClick: saveResend, disabled: !fromAddr.trim() || saving, className: "rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40", children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }))] }))] })) : (_jsxs(ManualSetupCard, { hint: "Use SendGrid for transactional email. SendGrid requires a verified from address.", docsUrl: "https://app.sendgrid.com/settings/api_keys", docsLabel: "Get a SendGrid key", children: [sendgridConfigured ? (_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "SENDGRID_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: sendgridKey, onChange: (e) => setSendgridKey(e.target.value), onKeyDown: (e) => {
+                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: emailInputCls }), !resendConfigured ? null : (_jsx("button", { onClick: saveResend, disabled: !fromAddr.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }))] }))] })) : (_jsxs(ManualSetupCard, { hint: "Use SendGrid for transactional email. SendGrid requires a verified from address.", docsUrl: "https://app.sendgrid.com/settings/api_keys", docsLabel: "Get a SendGrid key", children: [sendgridConfigured ? (_jsxs("div", { className: cn("mb-1 flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "SENDGRID_API_KEY configured"] })) : (_jsxs("div", { className: "mb-1 flex gap-1.5", children: [_jsx("input", { type: "password", value: sendgridKey, onChange: (e) => setSendgridKey(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "Enter")
                                             saveSendgrid();
-                                    }, placeholder: "SG....", className: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), _jsx("button", { onClick: saveSendgrid, disabled: !sendgridKey.trim() || saving, className: "rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40", children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-green-500", children: [_jsx(IconCheck, { size: 10 }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
+                                    }, placeholder: "SG....", className: emailInputCls }), _jsx("button", { onClick: saveSendgrid, disabled: !sendgridKey.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") })] })), fromConfigured ? (_jsxs("div", { className: cn("flex items-center gap-1.5 text-green-500", noteTextClass(isPage)), children: [_jsx(IconCheck, { size: emailIconSize }), "EMAIL_FROM configured"] })) : (_jsxs("div", { className: "flex gap-1.5", children: [_jsx("input", { type: "text", value: fromAddr, onChange: (e) => setFromAddr(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "Enter")
                                             saveSendgrid();
-                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: "flex-1 rounded border border-border bg-background px-2 py-1 text-[11px] text-foreground outline-none placeholder:text-muted-foreground/50 focus:ring-1 focus:ring-accent" }), !sendgridConfigured ? null : (_jsx("button", { onClick: saveSendgrid, disabled: !fromAddr.trim() || saving, className: "rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40", children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }))] }))] }))] })) }));
+                                    }, placeholder: "From address - e.g. Acme <hi@acme.com>", className: emailInputCls }), !sendgridConfigured ? null : (_jsx("button", { onClick: saveSendgrid, disabled: !fromAddr.trim() || saving, className: emailBtnCls, children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }))] }))] }))] })) }));
 }
 function AgentLimitsSectionInner({ open, onToggle, }) {
+    const isPage = useSettingsSurface() === "page";
     const [settings, setSettings] = useState(null);
     const [value, setValue] = useState("");
     const [loading, setLoading] = useState(true);
@@ -827,15 +842,15 @@ function AgentLimitsSectionInner({ open, onToggle, }) {
             ? undefined
             : settings
                 ? settings.maxIterations !== settings.defaultMaxIterations
-                : false, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: "rounded-md border border-border px-2.5 py-2 bg-accent/20", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-[11px] font-medium text-foreground", children: "Max iterations" }), _jsxs("p", { className: "mt-0.5 text-[10px] text-muted-foreground", children: ["Applies to ", scopeLabel, ". Default is", " ", settings.defaultMaxIterations.toLocaleString(), "."] })] }), _jsx("span", { className: "rounded-full bg-background px-2 py-0.5 text-[10px] font-medium text-muted-foreground", children: settings.source })] }), _jsxs("div", { className: "mt-2 flex items-center gap-1.5", children: [_jsx("input", { type: "number", min: settings.minMaxIterations, max: settings.maxMaxIterations, value: value, disabled: !settings.canUpdate || saving, onChange: (e) => {
+                : false, open: open, onToggle: onToggle, children: loading ? (_jsx(SettingsSkeleton, { lines: 2 })) : settings ? (_jsx("div", { className: "space-y-2", children: _jsxs("div", { className: cn("rounded-md border border-border bg-accent/20", isPage ? "px-3.5 py-3" : "px-2.5 py-2"), children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: cn("font-medium text-foreground", subTextClass(isPage)), children: "Max iterations" }), _jsxs("p", { className: cn("mt-0.5 text-muted-foreground", noteTextClass(isPage)), children: ["Applies to ", scopeLabel, ". Default is", " ", settings.defaultMaxIterations.toLocaleString(), "."] })] }), _jsx("span", { className: cn("rounded-full bg-background px-2 py-0.5 font-medium text-muted-foreground", noteTextClass(isPage)), children: settings.source })] }), _jsxs("div", { className: "mt-2 flex items-center gap-1.5", children: [_jsx("input", { type: "number", min: settings.minMaxIterations, max: settings.maxMaxIterations, value: value, disabled: !settings.canUpdate || saving, onChange: (e) => {
                                     setValue(e.target.value);
                                     setError(null);
                                 }, onKeyDown: (e) => {
                                     if (e.key === "Enter" && hasPendingChange)
                                         void save();
-                                }, className: "h-8 min-w-0 flex-1 rounded border border-border bg-background px-2 text-[11px] text-foreground outline-none focus:ring-1 focus:ring-accent disabled:opacity-60" }), _jsx("button", { type: "button", onClick: save, disabled: !hasPendingChange || saving, className: "inline-flex h-8 items-center gap-1 rounded bg-accent px-2.5 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40", children: saving ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: 10 })) : ("Save") }), _jsx("button", { type: "button", onClick: reset, disabled: !settings.canUpdate ||
+                                }, className: cn(textInputClass(isPage), "min-w-0 flex-1 disabled:opacity-60"), style: isPage ? CONTROL_STYLE_PAGE : undefined }), _jsx("button", { type: "button", onClick: save, disabled: !hasPendingChange || saving, className: pillButtonClass(isPage, "solid"), children: saving ? (_jsx(IconLoader2, { size: isPage ? 14 : 10, className: "animate-spin" })) : saved ? (_jsx(IconCheck, { size: isPage ? 14 : 10 })) : ("Save") }), _jsx("button", { type: "button", onClick: reset, disabled: !settings.canUpdate ||
                                     saving ||
-                                    settings.maxIterations === settings.defaultMaxIterations, className: "h-8 rounded border border-border px-2.5 text-[10px] font-medium text-muted-foreground hover:bg-accent/40 hover:text-foreground disabled:opacity-40", children: "Reset" })] }), !settings.canUpdate && (_jsx("p", { className: "mt-2 text-[10px] text-muted-foreground", children: "Only organization owners and admins can change this limit." })), error && (_jsx("p", { className: "mt-2 text-[10px] text-destructive", children: error }))] }) })) : (_jsx("p", { className: "text-[10px] text-muted-foreground", children: "Agent limit settings are unavailable." })) }));
+                                    settings.maxIterations === settings.defaultMaxIterations, className: pillButtonClass(isPage, "outline"), children: "Reset" })] }), !settings.canUpdate && (_jsx("p", { className: cn("mt-2 text-muted-foreground", noteTextClass(isPage)), children: "Only organization owners and admins can change this limit." })), error && (_jsx("p", { className: cn("mt-2 text-destructive", noteTextClass(isPage)), children: error }))] }) })) : (_jsx("p", { className: cn("text-muted-foreground", noteTextClass(isPage)), children: "Agent limit settings are unavailable." })) }));
 }
 const SETTINGS_SECTION_IDS = new Set([
     "account",
@@ -1056,6 +1071,7 @@ function CapabilityStatusStrip({ isDevMode, builderConnected, builderLoading, bu
     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", 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 AccountSectionInner({ open, onToggle, }) {
+    const isPage = useSettingsSurface() === "page";
     const { session, isLoading } = useSession();
     const email = session?.email;
     const avatarUrl = useAvatarUrl(email);
@@ -1087,7 +1103,7 @@ function AccountSectionInner({ open, onToggle, }) {
             setUploading(false);
         }
     };
-    return (_jsx(SettingsSection, { id: settingsSectionDomId("account"), icon: _jsx(IconUserCircle, { size: 14 }), title: "Account", subtitle: "Your profile photo and signed-in identity.", open: open, onToggle: onToggle, children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-accent text-[13px] font-semibold text-muted-foreground", children: avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-full w-full object-cover" })) : (initials) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-[12px] font-medium text-foreground", children: isLoading ? "Loading..." : displayName }), email && (_jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: email })), status === "saved" && (_jsx("p", { className: "mt-1 text-[11px] text-green-600 dark:text-green-400", children: "Photo updated" })), status === "error" && (_jsx("p", { className: "mt-1 text-[11px] text-destructive", children: "Could not update photo" }))] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleAvatarChange }), _jsx("button", { type: "button", disabled: !email || uploading, onClick: () => fileInputRef.current?.click(), className: "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border bg-background px-3 text-[12px] font-medium text-foreground transition-colors hover:bg-accent/50 disabled:cursor-not-allowed disabled:opacity-50", children: uploading ? "Uploading..." : "Change photo" })] }) }));
+    return (_jsx(SettingsSection, { id: settingsSectionDomId("account"), icon: _jsx(IconUserCircle, { size: 14 }), title: "Account", subtitle: "Your profile photo and signed-in identity.", open: open, onToggle: onToggle, children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-accent font-semibold text-muted-foreground", isPage ? "h-14 w-14 text-[15px]" : "h-12 w-12 text-[13px]"), children: avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-full w-full object-cover" })) : (initials) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: cn("truncate font-medium text-foreground", isPage ? "text-sm" : "text-[12px]"), children: isLoading ? "Loading..." : displayName }), email && (_jsx("p", { className: cn("truncate text-muted-foreground", subTextClass(isPage)), children: email })), status === "saved" && (_jsx("p", { className: cn("mt-1 text-green-600 dark:text-green-400", subTextClass(isPage)), children: "Photo updated" })), status === "error" && (_jsx("p", { className: cn("mt-1 text-destructive", subTextClass(isPage)), children: "Could not update photo" }))] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", className: "hidden", onChange: handleAvatarChange }), _jsx("button", { type: "button", disabled: !email || uploading, onClick: () => fileInputRef.current?.click(), className: cn(pillButtonClass(isPage, "outline"), "shrink-0 justify-center"), children: uploading ? "Uploading..." : "Change photo" })] }) }));
 }
 function SettingsPanelContent({ isDevMode, onToggleDevMode, showDevToggle, devAppUrl, initialSection, sectionRequestKey, sections = ALL_SETTINGS_SECTIONS, showCapabilityStrip = true, className, surface = "sidebar", }) {
     const { status: builder, loading: builderLoading } = useBuilderStatus();
@@ -1199,6 +1215,13 @@ export function useAgentSettingsTabs() {
             searchEntries: buildSectionSearchEntries(CONNECTION_SETTINGS_SECTIONS),
             content: (_jsx(SettingsPanelContent, { ...baseProps, surface: "page", sections: CONNECTION_SETTINGS_SECTIONS, showCapabilityStrip: false, className: "mx-auto w-full max-w-2xl" })),
         },
+        {
+            id: "organization",
+            label: "Organization",
+            icon: IconUsersGroup,
+            keywords: "organization org team members invites collaborators",
+            content: (_jsx("div", { className: "mx-auto w-full max-w-2xl", children: _jsx(TeamPage, { showTitle: false }) })),
+        },
         {
             id: "workspace",
             label: "Workspace",