@agent-native/toolkit 0.23.1 → 0.198.1

package/dist/app/settings/AgentsSection.js

@@ -0,0 +1,1079 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { agentNativePath, appBasePath, appMountedPath, } from "@agent-native/core/client/api-path";
+import { useChangeVersion } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { useOrg, useSyncA2ASecret } from "@agent-native/core/client/org";
+import { buildOpenRoutePath, buildSettingsRoute, STANDARD_APP_ROUTES, STANDARD_SETTINGS_TABS, } from "@agent-native/core/navigation";
+import { getRemoteAgentIdFromPath, isRemoteAgentPath, parseRemoteAgentKind, parseRemoteAgentUrl, REMOTE_AGENT_RESOURCE_PREFIX, remoteAgentResourcePath, } from "@agent-native/core/resources/metadata";
+import { Picker, Skeleton, TextField, } from "@agent-native/toolkit/design-system";
+import { Alert, AlertDescription } from "@agent-native/toolkit/ui/alert";
+import { Button, ButtonBase as ToolkitButtonBase, } from "@agent-native/toolkit/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@agent-native/toolkit/ui/collapsible";
+import { DialogFooter } from "@agent-native/toolkit/ui/dialog";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger, } from "@agent-native/toolkit/ui/tooltip";
+import { cn } from "@agent-native/toolkit/utils";
+import { IconPlus, IconTrash, IconX, IconCheck, IconLoader2, IconAlertTriangle, IconExternalLink, IconRefresh, IconTopologyRing2, IconChevronDown, IconAlertCircle, } from "@tabler/icons-react";
+import { useState, useEffect, useId, useRef, useCallback, useMemo, } from "react";
+import { NewKeyMenu } from "./NewKeyMenu.js";
+const ANTHROPIC_MANAGED_AGENT_DEFAULT_URL = "https://api.anthropic.com";
+/** The Settings id that opens the Connected agents list and its Add form. */
+export const CONNECTED_AGENTS_SETTINGS_ID = "agent:agents";
+function emptyAnthropicManagedAgentKind() {
+    return {
+        provider: "anthropic-managed-agents",
+        agentId: "",
+        environmentId: "",
+        credentialRef: "",
+    };
+}
+export function probeStatus(result) {
+    if (!result)
+        return null;
+    if (result.cardStatus)
+        return result.cardStatus;
+    if (/json.?rpc/i.test(result.error ?? ""))
+        return "no-json-rpc";
+    if (result.authorized === false)
+        return "auth-rejected";
+    return result.reachable ? "reachable" : null;
+}
+function describeSkills(publicSkills, t) {
+    if (publicSkills === undefined)
+        return null;
+    if (publicSkills === 0)
+        return t("agentChat.agents.checkReadsRequireAuth");
+    return t("agentChat.agents.checkPublicSkills", { count: publicSkills });
+}
+function describeProbeTooltip(result) {
+    if (!result.reachable) {
+        return `Unreachable${result.error ? `: ${result.error}` : ""}`;
+    }
+    if (result.authorized === false) {
+        return "Reachable, but the peer rejected our token — calls will 401 in production";
+    }
+    if (result.authorized === undefined) {
+        return "Reachable; couldn't verify our token";
+    }
+    return "Reachable and authorized";
+}
+function describeCheckResult(result, t) {
+    if (!result.reachable) {
+        return result.error ?? t("agentChat.agents.checkNotReachable");
+    }
+    const scheme = result.securitySchemes?.length
+        ? result.securitySchemes.join(", ")
+        : t("agentChat.agents.checkNoAuthScheme");
+    const authText = result.authorized === false
+        ? t("agentChat.agents.checkTokenRejected")
+        : result.authorized === undefined
+            ? result.authError
+                ? t("agentChat.agents.checkTokenUnverifiedReason", {
+                    reason: result.authError,
+                })
+                : t("agentChat.agents.checkTokenUnverified")
+            : t("agentChat.agents.checkTokenWorks");
+    const skills = describeSkills(result.publicSkills, t);
+    return [t("agentChat.agents.checkLive", { scheme }), authText, skills]
+        .filter(Boolean)
+        .join(" · ");
+}
+export function normalizeHostedAgentUrl(value, options = {}) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return undefined;
+    return parseRemoteAgentUrl(trimmed, {
+        ...(options.requireHttps
+            ? { allowLoopbackHttp: true, requireHttps: true }
+            : {}),
+    })
+        ? trimmed
+        : undefined;
+}
+function normalizeHostedAuth(auth) {
+    if (!auth)
+        return undefined;
+    if (auth.type === "bearer") {
+        const credentialRef = auth.credentialRef.trim();
+        return credentialRef ? { type: "bearer", credentialRef } : undefined;
+    }
+    const tokenUrl = parseRemoteAgentUrl(auth.tokenUrl, {
+        requireHttps: true,
+    });
+    const clientId = auth.clientId.trim();
+    const clientSecretRef = auth.clientSecretRef.trim();
+    const scope = auth.scope?.trim();
+    if (!tokenUrl || !clientId || !clientSecretRef)
+        return undefined;
+    return {
+        type: auth.type,
+        tokenUrl,
+        clientId,
+        clientSecretRef,
+        ...(scope ? { scope } : {}),
+    };
+}
+export function normalizeHostedAgentCardUrl(value, kind, auth) {
+    if (kind?.provider === "anthropic-managed-agents")
+        return undefined;
+    const trimmed = value.trim();
+    return trimmed
+        ? normalizeHostedAgentUrl(trimmed, { requireHttps: Boolean(auth) })
+        : undefined;
+}
+export function parseHostedAuth(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value)) {
+        return undefined;
+    }
+    const candidate = value;
+    if (candidate.type === "bearer" &&
+        typeof candidate.credentialRef === "string") {
+        return normalizeHostedAuth({
+            type: "bearer",
+            credentialRef: candidate.credentialRef,
+        });
+    }
+    if (candidate.type === "oauth-client-credentials" &&
+        typeof candidate.tokenUrl === "string" &&
+        typeof candidate.clientId === "string" &&
+        typeof candidate.clientSecretRef === "string" &&
+        (candidate.scope === undefined || typeof candidate.scope === "string")) {
+        return normalizeHostedAuth({
+            type: candidate.type,
+            tokenUrl: candidate.tokenUrl,
+            clientId: candidate.clientId,
+            clientSecretRef: candidate.clientSecretRef,
+            ...(typeof candidate.scope === "string"
+                ? { scope: candidate.scope }
+                : {}),
+        });
+    }
+    return undefined;
+}
+function isRadixPortalTarget(target) {
+    return (typeof Element !== "undefined" &&
+        target instanceof Element &&
+        Boolean(target.closest("[data-radix-popper-content-wrapper]")));
+}
+function HostedAgentFields({ url, onUrlChange, cardUrl, onCardUrlChange, auth, onAuthChange, kind, onKindChange, credentialOptions, openOnMount = false, variant = "compact", }) {
+    const t = useT();
+    const [open, setOpen] = useState(() => Boolean(openOnMount || cardUrl.trim() || auth || kind));
+    const shouldOpen = Boolean(openOnMount || cardUrl.trim() || auth || kind);
+    useEffect(() => setOpen(shouldOpen), [shouldOpen]);
+    const provider = kind?.provider === "anthropic-managed-agents"
+        ? "anthropic-managed-agents"
+        : "a2a";
+    const managedKind = kind?.provider === "anthropic-managed-agents" ? kind : undefined;
+    const authType = auth?.type ?? "none";
+    const oauthAuth = auth?.type === "oauth-client-credentials" ? auth : undefined;
+    const selectedCredentialRef = auth?.type === "bearer"
+        ? auth.credentialRef
+        : auth?.type === "oauth-client-credentials"
+            ? auth.clientSecretRef
+            : "";
+    const updateAuthType = (value) => {
+        if (value === "none") {
+            onAuthChange(undefined);
+        }
+        else if (value === "bearer") {
+            onAuthChange({
+                type: "bearer",
+                credentialRef: auth?.type === "bearer" ? auth.credentialRef : "",
+            });
+        }
+        else if (value === "oauth-client-credentials") {
+            onAuthChange({
+                type: "oauth-client-credentials",
+                tokenUrl: auth?.type === "oauth-client-credentials" ? auth.tokenUrl : "",
+                clientId: auth?.type === "oauth-client-credentials" ? auth.clientId : "",
+                clientSecretRef: auth?.type === "oauth-client-credentials" ? auth.clientSecretRef : "",
+                scope: auth?.type === "oauth-client-credentials" ? (auth.scope ?? "") : "",
+            });
+        }
+    };
+    const updateCredentialRef = (value) => {
+        if (auth?.type === "bearer") {
+            onAuthChange({ ...auth, credentialRef: value });
+        }
+        else if (auth?.type === "oauth-client-credentials") {
+            onAuthChange({ ...auth, clientSecretRef: value });
+        }
+    };
+    const credentialLabel = selectedCredentialRef
+        ? (credentialOptions.find((option) => option.key === selectedCredentialRef)
+            ?.label ?? selectedCredentialRef)
+        : t("agentChat.agents.chooseCredential");
+    const managedCredentialLabel = managedKind?.credentialRef
+        ? (credentialOptions.find((option) => option.key === managedKind.credentialRef)?.label ?? managedKind.credentialRef)
+        : t("agentChat.agents.chooseCredential");
+    const updateProvider = (value) => {
+        if (value === "anthropic-managed-agents") {
+            onKindChange(managedKind ?? emptyAnthropicManagedAgentKind());
+            onAuthChange(undefined);
+            onCardUrlChange("");
+            onUrlChange(ANTHROPIC_MANAGED_AGENT_DEFAULT_URL);
+            return;
+        }
+        onKindChange(undefined);
+        onAuthChange(undefined);
+        if (url === ANTHROPIC_MANAGED_AGENT_DEFAULT_URL)
+            onUrlChange("");
+    };
+    const updateManagedKind = (field, value) => {
+        const next = managedKind ?? emptyAnthropicManagedAgentKind();
+        onKindChange({ ...next, [field]: value });
+    };
+    const providerOptions = [
+        { value: "a2a", label: t("agentChat.agents.providerA2A") },
+        {
+            value: "anthropic-managed-agents",
+            label: t("agentChat.agents.providerAnthropic"),
+        },
+    ];
+    const authOptions = [
+        { value: "none", label: t("agentChat.agents.authNone") },
+        { value: "bearer", label: t("agentChat.agents.authBearer") },
+        {
+            value: "oauth-client-credentials",
+            label: t("agentChat.agents.authClientCredentials"),
+        },
+    ];
+    if (variant === "dialog") {
+        const credentialField = (selected, onPick) => {
+            const menu = (label, size) => (_jsx(NewKeyMenu, { options: credentialOptions, label: label, size: size, variant: size === "xs" ? "ghost" : "secondary", onPick: (option) => onPick(option.key), onCustom: (name) => {
+                    if (name)
+                        onPick(name);
+                }, triggerClassName: "shrink-0" }));
+            if (!selected) {
+                return (_jsx("div", { className: "justify-self-start", children: menu(t("agentChat.agents.chooseCredential"), "default") }));
+            }
+            return (_jsxs("div", { className: "flex h-9 items-center justify-between gap-2 rounded-md border border-input bg-background ps-3 pe-1.5", children: [_jsx("span", { className: "min-w-0 truncate text-sm", children: credentialOptions.find((option) => option.key === selected)
+                            ?.label ?? selected }), menu(t("agentChat.settingsModel.change"), "xs")] }));
+        };
+        return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, className: "grid gap-4", children: [_jsxs(CollapsibleTrigger, { className: "group/hosted flex items-center gap-1 justify-self-start rounded-sm text-sm font-medium text-foreground outline-none underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-ring", children: [t("agentChat.agents.hostedAgent"), _jsx(IconChevronDown, { className: "size-4 transition-transform duration-200 group-data-[state=open]/hosted:rotate-180", "aria-hidden": true })] }), _jsxs(CollapsibleContent, { className: "grid gap-4", children: [_jsx(Picker, { mode: "select", value: provider, onChange: (value) => {
+                                if (value)
+                                    updateProvider(String(value));
+                            }, label: t("agentChat.agents.provider"), options: providerOptions }), provider === "a2a" ? (_jsxs(_Fragment, { children: [_jsx(TextField, { value: cardUrl, onChange: onCardUrlChange, label: t("agentChat.agents.cardUrl"), placeholder: t("agentChat.agents.cardUrlPlaceholder") }), _jsx(Picker, { mode: "select", value: authType, onChange: (value) => updateAuthType(String(value)), label: t("agentChat.agents.authType"), options: authOptions }), authType !== "none" &&
+                                    credentialField(selectedCredentialRef || undefined, updateCredentialRef), oauthAuth && (_jsxs(_Fragment, { children: [_jsx(TextField, { value: oauthAuth.tokenUrl, onChange: (value) => onAuthChange({ ...oauthAuth, tokenUrl: value }), label: t("agentChat.agents.tokenUrl") }), _jsx(TextField, { value: oauthAuth.clientId, onChange: (value) => onAuthChange({ ...oauthAuth, clientId: value }), label: t("agentChat.agents.clientId") }), _jsx(TextField, { value: oauthAuth.scope ?? "", onChange: (value) => onAuthChange({ ...oauthAuth, scope: value }), label: t("agentChat.agents.scope") })] }))] })) : (_jsxs(_Fragment, { children: [_jsx(TextField, { value: url, onChange: onUrlChange, label: t("agentChat.agents.apiBaseUrl"), placeholder: t("agentChat.agents.apiBaseUrlPlaceholder") }), _jsx(TextField, { value: managedKind?.agentId ?? "", onChange: (value) => updateManagedKind("agentId", value), label: t("agentChat.agents.agentId"), placeholder: t("agentChat.agents.agentIdPlaceholder") }), _jsx(TextField, { value: managedKind?.environmentId ?? "", onChange: (value) => updateManagedKind("environmentId", value), label: t("agentChat.agents.environmentId"), placeholder: t("agentChat.agents.environmentIdPlaceholder") }), credentialField(managedKind?.credentialRef || undefined, (key) => updateManagedKind("credentialRef", key))] }))] })] }));
+    }
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, className: "mt-1 rounded border border-border/70 bg-accent/20 px-2 py-1.5", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(ToolkitButtonBase, { type: "button", variant: "ghost", className: "flex w-full items-center justify-between px-0.5 py-0.5 text-[10px] font-medium text-foreground", children: [t("agentChat.agents.hostedAgent"), _jsx(IconChevronDown, { size: 12 })] }) }), _jsxs(CollapsibleContent, { className: "mt-2 flex flex-col gap-1.5", children: [_jsx(Picker, { mode: "select", value: provider, onChange: (value) => {
+                            if (value)
+                                updateProvider(String(value));
+                        }, "aria-label": t("agentChat.agents.provider"), options: providerOptions, className: "text-[11px]" }), provider === "a2a" ? (_jsxs(_Fragment, { children: [_jsx(TextField, { value: cardUrl, onChange: onCardUrlChange, "aria-label": t("agentChat.agents.cardUrl"), placeholder: t("agentChat.agents.cardUrlPlaceholder"), className: "w-full text-[11px]" }), _jsx(Picker, { mode: "select", value: authType, onChange: (value) => updateAuthType(String(value)), "aria-label": t("agentChat.agents.authType"), options: authOptions, className: "text-[11px]" }), authType !== "none" && (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "min-w-0 truncate text-[10px] text-muted-foreground", children: credentialLabel }), _jsx(NewKeyMenu, { options: credentialOptions, label: t("agentChat.agents.chooseCredential"), onPick: (option) => updateCredentialRef(option.key), onCustom: (name) => {
+                                            if (name)
+                                                updateCredentialRef(name);
+                                        }, triggerClassName: "shrink-0" })] })), oauthAuth && (_jsxs(_Fragment, { children: [_jsx(TextField, { value: oauthAuth.tokenUrl, onChange: (value) => onAuthChange({ ...oauthAuth, tokenUrl: value }), "aria-label": t("agentChat.agents.tokenUrl"), placeholder: t("agentChat.agents.tokenUrl"), className: "w-full text-[11px]" }), _jsx(TextField, { value: oauthAuth.clientId, onChange: (value) => onAuthChange({ ...oauthAuth, clientId: value }), "aria-label": t("agentChat.agents.clientId"), placeholder: t("agentChat.agents.clientId"), className: "w-full text-[11px]" }), _jsx(TextField, { value: oauthAuth.scope ?? "", onChange: (value) => onAuthChange({ ...oauthAuth, scope: value }), "aria-label": t("agentChat.agents.scope"), placeholder: t("agentChat.agents.scope"), className: "w-full text-[11px]" })] }))] })) : (_jsxs(_Fragment, { children: [_jsx(TextField, { value: url, onChange: onUrlChange, label: t("agentChat.agents.apiBaseUrl"), "aria-label": t("agentChat.agents.apiBaseUrl"), placeholder: t("agentChat.agents.apiBaseUrlPlaceholder"), className: "w-full text-[11px]" }), _jsx(TextField, { value: managedKind?.agentId ?? "", onChange: (value) => updateManagedKind("agentId", value), label: t("agentChat.agents.agentId"), "aria-label": t("agentChat.agents.agentId"), placeholder: t("agentChat.agents.agentIdPlaceholder"), className: "w-full text-[11px]" }), _jsx(TextField, { value: managedKind?.environmentId ?? "", onChange: (value) => updateManagedKind("environmentId", value), label: t("agentChat.agents.environmentId"), "aria-label": t("agentChat.agents.environmentId"), placeholder: t("agentChat.agents.environmentIdPlaceholder"), className: "w-full text-[11px]" }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "min-w-0 truncate text-[10px] text-muted-foreground", children: managedCredentialLabel }), _jsx(NewKeyMenu, { options: credentialOptions, label: t("agentChat.agents.chooseCredential"), onPick: (option) => updateManagedKind("credentialRef", option.key), onCustom: (name) => {
+                                            if (name)
+                                                updateManagedKind("credentialRef", name);
+                                        }, triggerClassName: "shrink-0" })] })] }))] })] }));
+}
+/** The inline popovers' compact controls; the dialog uses toolkit ones. */
+const COMPACT_FORM_CLASSES = {
+    stack: "flex flex-col gap-1.5",
+    field: "w-full 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",
+    text: "text-[10px]",
+    primary: "cursor-pointer rounded bg-accent px-2 py-0.5 text-[10px] font-medium text-foreground hover:bg-accent/80 disabled:opacity-40",
+    secondary: "inline-flex shrink-0 cursor-pointer items-center gap-1 rounded border border-border px-2 py-1 text-[10px] text-muted-foreground hover:bg-accent/40 hover:text-foreground disabled:opacity-40",
+    ghost: "cursor-pointer rounded px-2 py-0.5 text-[10px] text-muted-foreground hover:text-foreground",
+    destructive: "flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-destructive hover:bg-destructive/10",
+    footer: "pt-0.5",
+};
+/** A failed save in a dialog form: the server's message, above the footer. */
+function FormErrorAlert({ message }) {
+    return (_jsxs(Alert, { variant: "destructive", children: [_jsx(IconAlertCircle, {}), _jsx(AlertDescription, { children: message })] }));
+}
+/** Edit one registered agent: name, endpoint, description, hosted auth. */
+export function AgentEditForm({ agent, credentialOptions, onSave, onDelete, onClose, variant = "compact", }) {
+    const t = useT();
+    const classes = COMPACT_FORM_CLASSES;
+    const [name, setName] = useState(agent.name);
+    const [url, setUrl] = useState(agent.url);
+    const [description, setDescription] = useState(agent.description ?? "");
+    const [cardUrl, setCardUrl] = useState(agent.cardUrl ?? "");
+    const [auth, setAuth] = useState(agent.auth);
+    const [kind, setKind] = useState(agent.kind);
+    const [saveError, setSaveError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const canSave = !!name.trim() &&
+        (!!url.trim() || kind?.provider === "anthropic-managed-agents");
+    const handleSave = async () => {
+        if (!canSave || saving)
+            return;
+        setSaving(true);
+        try {
+            await onSave({
+                ...agent,
+                name: name.trim(),
+                url: url.trim(),
+                description: description.trim() || undefined,
+                cardUrl: cardUrl.trim() || undefined,
+                auth,
+                kind,
+            });
+            setSaveError(null);
+        }
+        catch (error) {
+            setSaveError(error instanceof Error
+                ? error.message
+                : t("agentChat.agents.formSaveFailed"));
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    if (variant === "dialog") {
+        return (_jsxs("form", { className: "grid gap-4", onSubmit: (event) => {
+                event.preventDefault();
+                void handleSave();
+            }, children: [_jsx(TextField, { value: name, onChange: setName, label: t("agentChat.agents.formName"), autoFocus: true }), kind?.provider !== "anthropic-managed-agents" && (_jsx(TextField, { value: url, onChange: setUrl, label: t("agentChat.agents.formUrl"), placeholder: t("agentChat.agents.formUrlPlaceholder") })), _jsx(TextField, { value: description, onChange: setDescription, label: t("agentChat.agents.formDescription") }), _jsx(HostedAgentFields, { variant: "dialog", url: url, onUrlChange: setUrl, cardUrl: cardUrl, onCardUrlChange: setCardUrl, auth: auth, onAuthChange: setAuth, kind: kind, onKindChange: setKind, credentialOptions: credentialOptions }), saveError ? _jsx(FormErrorAlert, { message: saveError }) : null, _jsxs(DialogFooter, { className: "gap-2 sm:space-x-0", children: [onDelete ? (_jsx(Button, { type: "button", variant: "outline-destructive", className: "sm:me-auto", disabled: saving, onClick: () => onDelete(agent.id), children: t("agentChat.agents.formRemove") })) : null, _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: t("agentChat.common.cancel") }), _jsxs(Button, { type: "submit", disabled: !canSave || saving, children: [saving ? _jsx(Spinner, {}) : null, saving
+                                    ? t("agentChat.settingsResources.saving")
+                                    : t("agentChat.common.save")] })] })] }));
+    }
+    // The inline popover closes on Escape; Enter saves.
+    const onFieldKeyDown = (e) => {
+        if (e.key === "Enter")
+            void handleSave();
+        if (e.key === "Escape")
+            onClose();
+    };
+    return (_jsxs("div", { className: classes.stack, children: [_jsx("input", { value: name, onChange: (e) => setName(e.target.value), onKeyDown: onFieldKeyDown, className: classes.field, placeholder: t("agentChat.agents.formName"), "aria-label": t("agentChat.agents.formName") }), kind?.provider !== "anthropic-managed-agents" && (_jsx("input", { value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: onFieldKeyDown, className: classes.field, placeholder: t("agentChat.agents.formUrlPlaceholder"), "aria-label": t("agentChat.agents.formUrl") })), _jsx("input", { value: description, onChange: (e) => setDescription(e.target.value), onKeyDown: onFieldKeyDown, className: classes.field, placeholder: t("agentChat.agents.formDescriptionPlaceholder"), "aria-label": t("agentChat.agents.formDescription") }), _jsx(HostedAgentFields, { url: url, onUrlChange: setUrl, cardUrl: cardUrl, onCardUrlChange: setCardUrl, auth: auth, onAuthChange: setAuth, kind: kind, onKindChange: setKind, credentialOptions: credentialOptions }), saveError && (_jsx("p", { className: `${classes.text} text-destructive`, children: saveError })), _jsxs("div", { className: `flex items-center justify-between ${classes.footer}`, children: [onDelete ? (_jsxs("button", { type: "button", onClick: () => onDelete(agent.id), className: classes.destructive, children: [_jsx(IconTrash, { size: 10 }), t("agentChat.agents.formRemove")] })) : (_jsx("span", {})), _jsxs("div", { className: "flex gap-1", children: [_jsx("button", { type: "button", onClick: onClose, className: classes.ghost, children: t("agentChat.common.cancel") }), _jsx("button", { type: "button", onClick: () => void handleSave(), disabled: !canSave, className: classes.primary, children: t("agentChat.common.save") })] })] })] }));
+}
+/** Closes on an outside click, ignoring clicks inside Radix portals. */
+function useCloseOnOutsideClick(ref, onClose) {
+    useEffect(() => {
+        function handleClick(e) {
+            if (isRadixPortalTarget(e.target))
+                return;
+            if (ref.current && !ref.current.contains(e.target)) {
+                onClose();
+            }
+        }
+        document.addEventListener("mousedown", handleClick);
+        return () => document.removeEventListener("mousedown", handleClick);
+    }, [onClose, ref]);
+}
+function AgentEditPopover(props) {
+    const popoverRef = useRef(null);
+    useCloseOnOutsideClick(popoverRef, props.onClose);
+    return (_jsx("div", { ref: popoverRef, className: "absolute end-0 top-full z-50 mt-1 w-64 rounded-lg border border-border bg-popover p-2.5 shadow-lg", children: _jsx(AgentEditForm, { ...props }) }));
+}
+/** Builds an absolute deep link into a peer's own Settings > Agents Add
+ * popover, prefilled with THIS app's own name/url/description, via the
+ * existing `/_agent-native/open` route's `f_*` filter-forwarding (the only
+ * non-reserved params the open route echoes onto the redirect URL instead of
+ * only stashing them server-side for `navigate` polling). No new endpoint.
+ * `agent:agents` is the one id both today's tabbed Settings and the Settings
+ * shell (Sub-agents) open with the Add form mounted. */
+function buildPeerRegisterBackLink(peerUrl) {
+    const selfUrl = `${window.location.origin}${appBasePath()}`;
+    const selfName = document.title.trim() || window.location.hostname;
+    const openPath = buildOpenRoutePath({
+        view: "settings",
+        to: buildSettingsRoute(CONNECTED_AGENTS_SETTINGS_ID),
+        params: {
+            f_agentName: selfName,
+            f_agentUrl: selfUrl,
+        },
+    });
+    return `${peerUrl.replace(/\/+$/, "")}${openPath}`;
+}
+/** Connect a remote agent by URL: check it, name it, and save it. */
+export function AgentAddForm({ initialName = "", initialUrl = "", initialDescription = "", initialProvider, credentialOptions, secretSet, syncSecret, onAdd, onClose, variant = "compact", }) {
+    const t = useT();
+    const classes = COMPACT_FORM_CLASSES;
+    const iconSize = 10;
+    const [name, setName] = useState(initialName);
+    const [url, setUrl] = useState(initialUrl ||
+        (initialProvider === "anthropic-managed-agents"
+            ? ANTHROPIC_MANAGED_AGENT_DEFAULT_URL
+            : ""));
+    const [description, setDescription] = useState(initialDescription);
+    const [cardUrl, setCardUrl] = useState("");
+    const [auth, setAuth] = useState();
+    const [kind, setKind] = useState(() => initialProvider === "anthropic-managed-agents"
+        ? emptyAnthropicManagedAgentKind()
+        : undefined);
+    const [check, setCheck] = useState({ status: "idle" });
+    const [added, setAdded] = useState(null);
+    const [adding, setAdding] = useState(false);
+    const [addError, setAddError] = useState(null);
+    const formId = useId();
+    const nameRef = useRef(null);
+    const urlRef = useRef(null);
+    const canAdd = !!name.trim() &&
+        (!!url.trim() || kind?.provider === "anthropic-managed-agents");
+    useEffect(() => {
+        const t = setTimeout(() => (urlRef.current?.value ? nameRef : urlRef).current?.focus(), 50);
+        return () => clearTimeout(t);
+    }, []);
+    const handleCheck = useCallback(async () => {
+        const trimmedUrl = url.trim();
+        if (!trimmedUrl)
+            return;
+        const normalizedKind = kind ? parseRemoteAgentKind(kind) : undefined;
+        if (kind && !normalizedKind) {
+            setCheck({
+                status: "error",
+                message: t("agentChat.agents.managedAgentIncomplete"),
+            });
+            return;
+        }
+        const normalizedAuth = normalizeHostedAuth(auth);
+        if (auth && !normalizedAuth) {
+            setCheck({
+                status: "error",
+                message: t("agentChat.agents.authIncomplete"),
+            });
+            return;
+        }
+        const normalizedUrl = normalizeHostedAgentUrl(trimmedUrl, {
+            requireHttps: Boolean(normalizedAuth || normalizedKind),
+        });
+        if (!normalizedUrl) {
+            setCheck({
+                status: "error",
+                message: t("agentChat.agents.invalidUrl"),
+            });
+            return;
+        }
+        const trimmedCardUrl = cardUrl.trim();
+        if (!normalizedKind &&
+            trimmedCardUrl &&
+            !normalizeHostedAgentCardUrl(trimmedCardUrl, normalizedKind, normalizedAuth)) {
+            setCheck({
+                status: "error",
+                message: t("agentChat.agents.invalidUrl"),
+            });
+            return;
+        }
+        setCheck({ status: "checking" });
+        try {
+            const cardQuery = trimmedCardUrl
+                ? `&cardUrl=${encodeURIComponent(trimmedCardUrl)}`
+                : "";
+            const authQuery = normalizedAuth
+                ? `&auth=${encodeURIComponent(JSON.stringify(normalizedAuth))}`
+                : "";
+            const kindQuery = normalizedKind
+                ? `&kind=${encodeURIComponent(JSON.stringify(normalizedKind))}`
+                : "";
+            const res = await fetch(agentNativePath(`/_agent-native/agents/probe?url=${encodeURIComponent(normalizedUrl)}${cardQuery}${authQuery}${kindQuery}`));
+            const body = await res.json().catch(() => null);
+            if (!res.ok) {
+                setCheck({
+                    status: "error",
+                    message: body?.error ??
+                        t("agentChat.agents.checkFailedStatus", { status: res.status }),
+                });
+                return;
+            }
+            const result = body;
+            setCheck({ status: "done", result });
+            if (result.reachable) {
+                if (!name.trim() && result.name)
+                    setName(result.name);
+                if (!description.trim() && result.description) {
+                    setDescription(result.description);
+                }
+            }
+        }
+        catch (err) {
+            setCheck({
+                status: "error",
+                message: err?.message ?? t("agentChat.agents.checkFailed"),
+            });
+        }
+    }, [url, cardUrl, name, description, auth, kind, t]);
+    const handleAdd = async () => {
+        if (!canAdd || adding)
+            return;
+        const trimmedName = name.trim();
+        const trimmedUrl = url.trim();
+        const trimmedDescription = description.trim();
+        setAdding(true);
+        setAddError(null);
+        try {
+            const ok = await onAdd(trimmedName, trimmedUrl, trimmedDescription, cardUrl.trim(), auth, kind);
+            if (ok) {
+                setAdded({
+                    name: trimmedName,
+                    url: trimmedUrl || ANTHROPIC_MANAGED_AGENT_DEFAULT_URL,
+                    description: trimmedDescription,
+                    provider: kind?.provider === "anthropic-managed-agents"
+                        ? "anthropic-managed-agents"
+                        : "a2a",
+                });
+            }
+        }
+        catch (error) {
+            setAddError(error instanceof Error
+                ? error.message
+                : t("agentChat.agents.formAddFailed"));
+        }
+        finally {
+            setAdding(false);
+        }
+    };
+    // The inline popover closes on Escape; a dialog owns Escape itself.
+    const closeOnEscape = (e) => {
+        if (e.key === "Escape")
+            onClose();
+    };
+    if (variant === "dialog") {
+        if (added) {
+            return (_jsxs("div", { className: "grid gap-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t("agentChat.agents.addedOneWay", { name: added.name }) }), added.provider === "a2a" ? (_jsx(Button, { asChild: true, variant: "secondary", className: "justify-self-start", children: _jsxs("a", { href: buildPeerRegisterBackLink(added.url), target: "_blank", rel: "noopener noreferrer", children: [_jsx(IconExternalLink, {}), t("agentChat.agents.openPeerSettings", { name: added.name })] }) })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: t("agentChat.agents.managedAgentSaved") })), _jsx(DialogFooter, { children: _jsx(Button, { type: "button", onClick: onClose, children: t("agentChat.common.dismiss") }) })] }));
+        }
+        const checked = check.status === "done" ? check.result : null;
+        const warn = checked
+            ? !checked.reachable || checked.authorized === false
+            : false;
+        const checking = check.status === "checking";
+        const checkStatusId = `${formId}-check`;
+        const checkStatus = (_jsx("p", { id: checkStatusId, "aria-live": "polite", className: cn("flex min-h-5 items-start gap-1.5 text-xs leading-5", check.status === "error"
+                ? "text-destructive"
+                : "text-muted-foreground"), children: check.status === "error" ? (_jsxs(_Fragment, { children: [_jsx(IconAlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": true }), check.message] })) : checked ? (_jsxs(_Fragment, { children: [warn ? (_jsx(IconAlertTriangle, { className: "mt-0.5 size-3.5 shrink-0 text-destructive", "aria-hidden": true })) : (_jsx(IconCheck, { className: "mt-0.5 size-3.5 shrink-0 text-primary", "aria-hidden": true })), _jsxs("span", { children: [describeCheckResult(checked, t), !checked.reachable ? (_jsx("span", { className: "block", children: t("agentChat.agents.unreachableHint") })) : null] })] })) : (t("agentChat.settingsSubAgents.anyAgentHint")) }));
+        const checkButton = (_jsxs(Button, { type: "button", variant: "secondary", className: "shrink-0", disabled: !url.trim() || checking, onClick: () => void handleCheck(), children: [checking ? _jsx(Spinner, {}) : null, t("agentChat.agents.formCheck")] }));
+        return (_jsxs("form", { className: "grid gap-4", onSubmit: (event) => {
+                event.preventDefault();
+                void handleAdd();
+            }, children: [kind?.provider !== "anthropic-managed-agents" ? (_jsxs("div", { className: "grid gap-1.5", children: [_jsx(TextField, { value: url, onChange: (value) => {
+                                setUrl(value);
+                                setCheck({ status: "idle" });
+                            }, label: t("agentChat.agents.formUrl"), placeholder: t("agentChat.agents.formUrlPlaceholder"), inputRef: urlRef, invalid: check.status === "error", "aria-describedby": checkStatusId, trailingContent: checkButton, onKeyDown: (event) => {
+                                // Enter on the URL checks it; the name comes back from the check.
+                                if (event.key === "Enter" && !canAdd) {
+                                    event.preventDefault();
+                                    void handleCheck();
+                                }
+                            } }), checkStatus] })) : (_jsxs("div", { className: "grid gap-1.5", children: [_jsx("div", { className: "justify-self-start", children: checkButton }), checkStatus] })), checked?.authorized === false ? (secretSet === true ? (_jsxs(Button, { type: "button", variant: "secondary", className: "justify-self-start", disabled: syncSecret.isPending, onClick: () => syncSecret.mutate(undefined), children: [syncSecret.isPending ? _jsx(Spinner, {}) : _jsx(IconRefresh, {}), t("agentChat.agents.syncSecret")] })) : (_jsx("p", { className: "text-xs leading-5 text-muted-foreground", children: secretSet === false ? (_jsxs(_Fragment, { children: [t("agentChat.agents.noSharedSecret"), " ", _jsx("a", { href: appMountedPath(buildSettingsRoute(STANDARD_SETTINGS_TABS.team), STANDARD_APP_ROUTES.settings), className: "font-medium text-foreground underline underline-offset-4", children: t("agentChat.agents.noSharedSecretLink") })] })) : (t("agentChat.agents.askOwnerSyncSecret")) }))) : null, _jsx(TextField, { value: name, onChange: setName, label: t("agentChat.agents.formName"), inputRef: nameRef }), _jsx(TextField, { value: description, onChange: setDescription, label: t("agentChat.agents.formDescription") }), _jsx(HostedAgentFields, { variant: "dialog", url: url, onUrlChange: (value) => {
+                        setUrl(value);
+                        setCheck({ status: "idle" });
+                    }, cardUrl: cardUrl, onCardUrlChange: (value) => {
+                        setCardUrl(value);
+                        setCheck({ status: "idle" });
+                    }, auth: auth, onAuthChange: (value) => {
+                        setAuth(value);
+                        setCheck({ status: "idle" });
+                    }, kind: kind, onKindChange: (value) => {
+                        setKind(value);
+                        setCheck({ status: "idle" });
+                    }, credentialOptions: credentialOptions, openOnMount: Boolean(initialProvider) }), addError ? _jsx(FormErrorAlert, { message: addError }) : null, _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: t("agentChat.common.cancel") }), _jsxs(Button, { type: "submit", disabled: !canAdd || adding, children: [adding ? _jsx(Spinner, {}) : null, adding
+                                    ? t("agentChat.agents.formAdding")
+                                    : checked && !checked.reachable
+                                        ? t("agentChat.agents.formAddAnyway")
+                                        : t("agentChat.agents.formAdd")] })] })] }));
+    }
+    if (added) {
+        return (_jsxs("div", { className: classes.stack, children: [_jsx("p", { className: `${classes.text} leading-relaxed text-muted-foreground`, children: t("agentChat.agents.addedOneWay", { name: added.name }) }), added.provider === "a2a" ? (_jsxs("a", { href: buildPeerRegisterBackLink(added.url), target: "_blank", rel: "noopener noreferrer", className: "inline-flex cursor-pointer items-center justify-center gap-1 rounded bg-accent px-2 py-1 text-[10px] font-medium text-foreground no-underline hover:bg-accent/80", children: [_jsx(IconExternalLink, { size: iconSize }), t("agentChat.agents.openPeerSettings", { name: added.name })] })) : (_jsx("p", { className: `${classes.text} text-primary`, children: t("agentChat.agents.managedAgentSaved") })), _jsx("button", { type: "button", onClick: onClose, className: classes.ghost, children: t("agentChat.common.dismiss") })] }));
+    }
+    const result = check.status === "done" ? check.result : null;
+    const unreachable = result ? !result.reachable : false;
+    const unauthorized = result ? result.authorized === false : false;
+    const checkButton = (_jsx(ToolkitButtonBase, { type: "button", variant: "outline", onClick: handleCheck, disabled: !url.trim() || check.status === "checking", className: classes.secondary, children: check.status === "checking" ? (_jsx(IconLoader2, { size: iconSize, className: "animate-spin" })) : (t("agentChat.agents.formCheck")) }));
+    return (_jsxs("div", { className: classes.stack, children: [kind?.provider !== "anthropic-managed-agents" && (_jsxs("div", { className: "flex gap-1", children: [_jsx("input", { ref: urlRef, value: url, onChange: (e) => {
+                            setUrl(e.target.value);
+                            setCheck({ status: "idle" });
+                        }, onKeyDown: (e) => {
+                            if (e.key === "Enter")
+                                void handleCheck();
+                            closeOnEscape(e);
+                        }, className: `${classes.field} flex-1`, placeholder: t("agentChat.agents.formUrlPlaceholder"), "aria-label": t("agentChat.agents.formUrl") }), checkButton] })), kind?.provider === "anthropic-managed-agents" && (_jsx("div", { className: "flex justify-end", children: checkButton })), check.status === "error" && (_jsxs("p", { className: `flex items-start gap-1 ${classes.text} text-destructive`, children: [_jsx(IconAlertTriangle, { size: 11, className: "mt-px shrink-0" }), check.message] })), addError && (_jsxs("p", { className: `flex items-start gap-1 ${classes.text} text-destructive`, children: [_jsx(IconAlertTriangle, { size: 11, className: "mt-px shrink-0" }), addError] })), result && (_jsxs("div", { className: `flex items-start gap-1 ${classes.text} ${unreachable || unauthorized
+                    ? "text-amber-600 dark:text-amber-400"
+                    : "text-primary"}`, children: [unreachable || unauthorized ? (_jsx(IconAlertTriangle, { size: 11, className: "mt-px shrink-0" })) : (_jsx(IconCheck, { size: 11, className: "mt-px shrink-0" })), _jsxs("span", { className: "leading-relaxed", children: [describeCheckResult(result, t), unreachable && (_jsx("span", { className: "block", children: t("agentChat.agents.unreachableHint") }))] })] })), unauthorized &&
+                (secretSet === true ? (_jsxs("button", { type: "button", onClick: () => syncSecret.mutate(undefined), disabled: syncSecret.isPending, className: `${classes.secondary} self-start`, children: [syncSecret.isPending ? (_jsx(IconLoader2, { size: iconSize, className: "animate-spin" })) : (_jsx(IconRefresh, { size: iconSize })), t("agentChat.agents.syncSecret")] })) : (_jsx("p", { className: `${classes.text} text-muted-foreground`, children: secretSet === false ? (_jsxs(_Fragment, { children: [t("agentChat.agents.noSharedSecret"), " ", _jsx("a", { href: appMountedPath(buildSettingsRoute(STANDARD_SETTINGS_TABS.team), STANDARD_APP_ROUTES.settings), className: "underline underline-offset-2 hover:text-foreground", children: t("agentChat.agents.noSharedSecretLink") })] })) : (t("agentChat.agents.askOwnerSyncSecret")) }))), _jsx("input", { ref: nameRef, value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Enter")
+                        void handleAdd();
+                    closeOnEscape(e);
+                }, className: classes.field, placeholder: t("agentChat.agents.formName"), "aria-label": t("agentChat.agents.formName") }), _jsx("input", { value: description, onChange: (e) => setDescription(e.target.value), onKeyDown: (e) => {
+                    if (e.key === "Enter")
+                        void handleAdd();
+                    closeOnEscape(e);
+                }, className: classes.field, placeholder: t("agentChat.agents.formDescriptionPlaceholder"), "aria-label": t("agentChat.agents.formDescription") }), _jsx(HostedAgentFields, { url: url, onUrlChange: (value) => {
+                    setUrl(value);
+                    setCheck({ status: "idle" });
+                }, cardUrl: cardUrl, onCardUrlChange: (value) => {
+                    setCardUrl(value);
+                    setCheck({ status: "idle" });
+                }, auth: auth, onAuthChange: (value) => {
+                    setAuth(value);
+                    setCheck({ status: "idle" });
+                }, kind: kind, onKindChange: (value) => {
+                    setKind(value);
+                    setCheck({ status: "idle" });
+                }, credentialOptions: credentialOptions, openOnMount: Boolean(initialProvider) }), _jsxs("div", { className: `flex justify-end gap-1 ${classes.footer}`, children: [_jsx("button", { type: "button", onClick: onClose, className: classes.ghost, children: t("agentChat.common.cancel") }), _jsx("button", { type: "button", onClick: handleAdd, disabled: !name.trim() ||
+                            (!url.trim() && kind?.provider !== "anthropic-managed-agents"), className: classes.primary, children: unreachable
+                            ? t("agentChat.agents.formAddAnyway")
+                            : t("agentChat.agents.formAdd") })] })] }));
+}
+function AgentAddPopover(props) {
+    const popoverRef = useRef(null);
+    useCloseOnOutsideClick(popoverRef, props.onClose);
+    return (_jsx("div", { ref: popoverRef, className: "absolute end-0 top-full z-50 mt-1 w-72 rounded-lg border border-border bg-popover p-2.5 shadow-lg", children: _jsx(AgentAddForm, { ...props }) }));
+}
+function A2ASecretStatusRow({ org, syncSecret, }) {
+    if (!org)
+        return null;
+    const secretSet = org.a2aSecretSet;
+    if (secretSet === undefined) {
+        return (_jsx("div", { className: "mb-2 rounded-md border border-border/60 bg-accent/20 px-2 py-1.5 text-[10px] text-muted-foreground", children: "Shared secret is managed by your workspace owner." }));
+    }
+    if (!secretSet) {
+        return (_jsxs("div", { className: "mb-2 rounded-md border border-amber-500/30 bg-amber-500/10 px-2 py-1.5 text-[10px] text-amber-600 dark:text-amber-400", children: ["No shared secret set \u2014 connected apps will reject calls in production.", " ", _jsx("a", { href: appMountedPath(buildSettingsRoute(STANDARD_SETTINGS_TABS.team), STANDARD_APP_ROUTES.settings), className: "underline underline-offset-2 hover:text-amber-500", children: "Set one on the Team page" })] }));
+    }
+    const noDomain = syncSecret.error?.message?.toLowerCase().includes("domain");
+    const failures = syncSecret.data?.results.filter((r) => !r.ok) ?? [];
+    return (_jsxs("div", { className: "mb-2 flex flex-col gap-1 rounded-md border border-border/60 bg-accent/20 px-2 py-1.5 text-[10px]", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Shared secret set", org.allowedDomain ? ` for ${org.allowedDomain}` : ""] }), _jsxs("button", { onClick: () => syncSecret.mutate(undefined), disabled: syncSecret.isPending, className: "inline-flex shrink-0 cursor-pointer items-center gap-1 rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground hover:text-foreground disabled:opacity-40", children: [syncSecret.isPending ? (_jsx(IconLoader2, { size: 10, className: "animate-spin" })) : (_jsx(IconRefresh, { size: 10 })), "Sync to apps"] })] }), syncSecret.data && !syncSecret.isPending && (_jsxs("div", { className: "text-muted-foreground", children: ["Synced to ", syncSecret.data.succeeded, "/", syncSecret.data.total, " app", syncSecret.data.total === 1 ? "" : "s", syncSecret.data.failed > 0
+                        ? ` (${syncSecret.data.failed} failed)`
+                        : "", ".", failures.length > 0 && (_jsx("ul", { className: "mt-0.5 list-disc ps-3 text-red-500", children: failures.map((r) => (_jsxs("li", { children: [r.name, ": ", r.error ?? `HTTP ${r.status ?? "?"}`] }, r.id))) }))] })), syncSecret.error && (_jsxs("p", { className: "text-red-500", children: [syncSecret.error.message, noDomain && (_jsxs(_Fragment, { children: [" ", _jsx("a", { href: appMountedPath(buildSettingsRoute(STANDARD_SETTINGS_TABS.team), STANDARD_APP_ROUTES.settings), className: "underline underline-offset-2", children: "Set the domain" })] }))] }))] }));
+}
+const PREFILL_PARAMS = [
+    "f_agentName",
+    "f_agentUrl",
+    "f_agentDescription",
+];
+/**
+ * Reads the connect deep link from the current URL. `?connect=` comes from
+ * the Agent directory; `f_agent*` from a peer's register-back link (see
+ * buildPeerRegisterBackLink), which the open route echoes onto the URL.
+ * `strip` also removes those params, so a reload does not reopen the form.
+ */
+export function readAgentConnectRequest({ strip = true, } = {}) {
+    if (typeof window === "undefined")
+        return null;
+    const params = new URLSearchParams(window.location.search);
+    const connect = params.get("connect");
+    let request = connect === "a2a" || connect === "anthropic-managed-agents"
+        ? { provider: connect }
+        : connect === "manual"
+            ? {}
+            : null;
+    const url = params.get("f_agentUrl");
+    if (url) {
+        request = {
+            ...request,
+            prefill: {
+                name: params.get("f_agentName") ?? "",
+                url,
+                description: params.get("f_agentDescription") ?? "",
+            },
+        };
+    }
+    if (strip)
+        stripAgentConnectParams();
+    return request;
+}
+/**
+ * Removes the connect deep-link params from the URL. The Settings shell
+ * rewrites a legacy link to its page's path keeping the query, so a page
+ * there strips only once the viewer is done with the form.
+ */
+export function stripAgentConnectParams() {
+    if (typeof window === "undefined")
+        return;
+    const params = new URLSearchParams(window.location.search);
+    const connect = params.get("connect");
+    const url = params.get("f_agentUrl");
+    if (!connect && !url)
+        return;
+    params.delete("connect");
+    if (url)
+        for (const key of PREFILL_PARAMS)
+            params.delete(key);
+    const query = params.toString();
+    window.history.replaceState(window.history.state, "", `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`);
+}
+/**
+ * Owners and admins write the shared `remote-agents/` manifests; so does
+ * anyone in a solo deployment. The resources route enforces the same rule.
+ */
+export function canManageSharedAgents(orgQuery) {
+    const org = orgQuery.data;
+    return (!orgQuery.isLoading &&
+        !orgQuery.isError &&
+        (!org?.orgId || org.role === "owner" || org.role === "admin"));
+}
+/**
+ * The registered remote agents (`remote-agents/<id>.json`, including the
+ * seeded first-party apps), with optimistic add, save, and remove. Refetches
+ * when the agent writes resources, so a `resources` write shows up live.
+ */
+export function useRemoteAgents() {
+    const t = useT();
+    const [agents, setAgents] = useState([]);
+    const [status, setStatus] = useState("loading");
+    const [probeById, setProbeById] = useState(null);
+    const [probeFailed, setProbeFailed] = useState(false);
+    const [savedSecrets, setSavedSecrets] = useState([]);
+    const agentWrites = useChangeVersion("action");
+    // The secrets list loads once; labels are applied at render so a new `t`
+    // never refetches it.
+    useEffect(() => {
+        let cancelled = false;
+        fetch(agentNativePath("/_agent-native/secrets"))
+            .then((res) => (res.ok ? res.json() : []))
+            .then((data) => {
+            if (cancelled || !Array.isArray(data))
+                return;
+            setSavedSecrets(data.filter((secret) => secret.status === "set" &&
+                secret.source !== "env" &&
+                typeof secret.key === "string" &&
+                typeof secret.label === "string"));
+        })
+            .catch(() => {
+            if (!cancelled)
+                setSavedSecrets([]);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const credentialOptions = useMemo(() => savedSecrets.map((secret) => ({
+        key: secret.key,
+        label: secret.label,
+        hint: secret.source === "vault" ? t("agentChat.agents.vault") : undefined,
+    })), [savedSecrets, t]);
+    useEffect(() => {
+        let cancelled = false;
+        fetch(agentNativePath("/_agent-native/agents/probe"))
+            .then((res) => (res.ok ? res.json() : null))
+            .then((data) => {
+            if (cancelled)
+                return;
+            if (!data) {
+                setProbeFailed(true);
+                return;
+            }
+            const results = Array.isArray(data.results)
+                ? data.results
+                : [];
+            const map = new Map();
+            for (const result of results)
+                map.set(result.id.toLowerCase(), result);
+            setProbeById(map);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setProbeFailed(true);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const fetchAgents = useCallback(async () => {
+        try {
+            const res = await fetch(agentNativePath("/_agent-native/resources?scope=all"));
+            if (!res.ok) {
+                setStatus("error");
+                return;
+            }
+            const data = await res.json();
+            const byAgentId = new Map();
+            for (const resource of (data.resources ?? [])) {
+                if (!isRemoteAgentPath(resource.path))
+                    continue;
+                const agentId = getRemoteAgentIdFromPath(resource.path);
+                const existing = byAgentId.get(agentId);
+                if (existing?.path.startsWith(REMOTE_AGENT_RESOURCE_PREFIX))
+                    continue;
+                byAgentId.set(agentId, resource);
+            }
+            const agentResources = [...byAgentId.values()];
+            const parsed = await Promise.all(agentResources.map(async (r) => {
+                try {
+                    const detail = await fetch(agentNativePath(`/_agent-native/resources/${r.id}`));
+                    if (!detail.ok)
+                        return null;
+                    const d = await detail.json();
+                    const config = JSON.parse(d.content);
+                    const hasAuth = config.auth !== undefined && config.auth !== null;
+                    const auth = parseHostedAuth(config.auth);
+                    if (hasAuth && !auth)
+                        return null;
+                    const hasKind = config.kind !== undefined && config.kind !== null;
+                    const kind = parseRemoteAgentKind(config.kind);
+                    if (hasKind && !kind)
+                        return null;
+                    const hostedCredential = Boolean(auth || kind);
+                    const url = typeof config.url === "string" && config.url.trim()
+                        ? normalizeHostedAgentUrl(config.url, {
+                            requireHttps: hostedCredential,
+                        })
+                        : kind?.provider === "anthropic-managed-agents"
+                            ? "https://api.anthropic.com"
+                            : undefined;
+                    if (!url)
+                        return null;
+                    const rawCardUrl = typeof config.cardUrl === "string" ? config.cardUrl.trim() : "";
+                    const cardUrl = normalizeHostedAgentCardUrl(rawCardUrl, kind, auth);
+                    if (rawCardUrl &&
+                        kind?.provider !== "anthropic-managed-agents" &&
+                        !cardUrl)
+                        return null;
+                    return {
+                        id: r.id,
+                        path: r.path,
+                        name: config.name,
+                        url,
+                        description: config.description,
+                        cardUrl,
+                        auth,
+                        kind,
+                    };
+                }
+                catch {
+                    return null;
+                }
+            }));
+            setAgents(parsed.filter((agent) => agent !== null));
+            setStatus("ready");
+        }
+        catch {
+            setStatus("error");
+        }
+    }, []);
+    useEffect(() => {
+        void fetchAgents();
+    }, [agentWrites, fetchAgents]);
+    const add = async (name, url, description, cardUrl, auth, kind) => {
+        const normalizedKind = kind ? parseRemoteAgentKind(kind) : undefined;
+        if (kind && !normalizedKind) {
+            throw new Error(t("agentChat.agents.managedAgentIncomplete"));
+        }
+        const normalizedAuth = normalizeHostedAuth(auth);
+        if (auth && !normalizedAuth) {
+            throw new Error(t("agentChat.agents.authIncomplete"));
+        }
+        if (normalizedKind && normalizedAuth) {
+            throw new Error(t("agentChat.agents.authIncomplete"));
+        }
+        const normalizedUrl = normalizeHostedAgentUrl(url ||
+            (normalizedKind?.provider === "anthropic-managed-agents"
+                ? ANTHROPIC_MANAGED_AGENT_DEFAULT_URL
+                : ""), {
+            requireHttps: Boolean(normalizedAuth || normalizedKind),
+        });
+        if (!normalizedUrl)
+            throw new Error(t("agentChat.agents.invalidUrl"));
+        const normalizedCardUrl = normalizeHostedAgentCardUrl(cardUrl, normalizedKind, normalizedAuth);
+        if (!normalizedKind && cardUrl.trim() && !normalizedCardUrl) {
+            throw new Error(t("agentChat.agents.invalidUrl"));
+        }
+        const id = name.toLowerCase().replace(/[^a-z0-9-]/g, "-");
+        const optimisticAgent = {
+            id: `optimistic-${id}`,
+            path: remoteAgentResourcePath(id),
+            name,
+            url: normalizedUrl,
+            description: description || undefined,
+            cardUrl: normalizedCardUrl,
+            auth: normalizedAuth,
+            kind: normalizedKind,
+        };
+        const previousAgents = agents;
+        setAgents((current) => [...current, optimisticAgent]);
+        const agentJson = JSON.stringify({
+            id,
+            name,
+            description: description || undefined,
+            url: normalizedUrl,
+            cardUrl: normalizedCardUrl,
+            auth: normalizedAuth,
+            ...(normalizedKind ? { kind: normalizedKind } : {}),
+            color: "#6B7280",
+        }, null, 2);
+        try {
+            const res = await fetch(agentNativePath("/_agent-native/resources"), {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    path: remoteAgentResourcePath(id),
+                    content: agentJson,
+                    shared: true,
+                }),
+            });
+            if (!res.ok) {
+                let body;
+                try {
+                    body = (await res.json());
+                }
+                catch {
+                    throw new Error(`Add failed (${res.status})`);
+                }
+                throw new Error(body?.error ?? body?.message ?? `Add failed (${res.status})`);
+            }
+        }
+        catch (error) {
+            setAgents(previousAgents);
+            throw error;
+        }
+        void fetchAgents();
+        return true;
+    };
+    const save = async (agent) => {
+        const normalizedKind = agent.kind
+            ? parseRemoteAgentKind(agent.kind)
+            : undefined;
+        if (agent.kind && !normalizedKind) {
+            throw new Error(t("agentChat.agents.managedAgentIncomplete"));
+        }
+        const normalizedAuth = normalizeHostedAuth(agent.auth);
+        if (agent.auth && !normalizedAuth) {
+            throw new Error(t("agentChat.agents.authIncomplete"));
+        }
+        if (normalizedKind && normalizedAuth) {
+            throw new Error(t("agentChat.agents.authIncomplete"));
+        }
+        const normalizedUrl = normalizeHostedAgentUrl(agent.url ||
+            (normalizedKind?.provider === "anthropic-managed-agents"
+                ? ANTHROPIC_MANAGED_AGENT_DEFAULT_URL
+                : ""), {
+            requireHttps: Boolean(normalizedAuth || normalizedKind),
+        });
+        if (!normalizedUrl)
+            throw new Error(t("agentChat.agents.invalidUrl"));
+        const trimmedCardUrl = agent.cardUrl?.trim() ?? "";
+        const normalizedCardUrl = normalizeHostedAgentCardUrl(trimmedCardUrl, normalizedKind, normalizedAuth);
+        if (!normalizedKind && trimmedCardUrl && !normalizedCardUrl)
+            throw new Error(t("agentChat.agents.invalidUrl"));
+        const previousAgents = agents;
+        setAgents((current) => current.map((currentAgent) => currentAgent.id === agent.id
+            ? {
+                ...agent,
+                url: normalizedUrl,
+                cardUrl: normalizedCardUrl,
+                auth: normalizedAuth,
+                kind: normalizedKind,
+            }
+            : currentAgent));
+        const agentJson = JSON.stringify({
+            id: getRemoteAgentIdFromPath(agent.path),
+            name: agent.name,
+            description: agent.description || undefined,
+            url: normalizedUrl,
+            cardUrl: normalizedCardUrl,
+            auth: normalizedAuth,
+            ...(normalizedKind ? { kind: normalizedKind } : {}),
+            color: "#6B7280",
+        }, null, 2);
+        try {
+            const res = await fetch(agentNativePath(`/_agent-native/resources/${agent.id}`), {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ content: agentJson }),
+            });
+            if (!res.ok) {
+                let body;
+                try {
+                    body = (await res.json());
+                }
+                catch {
+                    body = null;
+                }
+                throw new Error(body?.error ?? body?.message ?? `Save failed (${res.status})`);
+            }
+            void fetchAgents();
+        }
+        catch (error) {
+            setAgents(previousAgents);
+            throw error;
+        }
+    };
+    const remove = async (resourceId) => {
+        const previousAgents = agents;
+        setAgents((current) => current.filter((agent) => agent.id !== resourceId));
+        try {
+            const res = await fetch(agentNativePath(`/_agent-native/resources/${resourceId}`), {
+                method: "DELETE",
+                headers: { "Content-Type": "application/json" },
+            });
+            if (res.ok) {
+                void fetchAgents();
+                return true;
+            }
+            setAgents(previousAgents);
+            return false;
+        }
+        catch {
+            setAgents(previousAgents);
+            return false;
+        }
+    };
+    const retry = useCallback(() => {
+        setStatus("loading");
+        void fetchAgents();
+    }, [fetchAgents]);
+    return {
+        agents,
+        status,
+        probeById,
+        probeFailed,
+        credentialOptions,
+        add,
+        save,
+        remove,
+        retry,
+    };
+}
+export function AgentsSection() {
+    const t = useT();
+    const { agents, status, probeById, credentialOptions, add, save, remove } = useRemoteAgents();
+    const loading = status === "loading";
+    const [editingAgent, setEditingAgent] = useState(null);
+    const [showAdd, setShowAdd] = useState(false);
+    const [prefill, setPrefill] = useState(null);
+    const [connectProvider, setConnectProvider] = useState();
+    const orgQuery = useOrg();
+    const { data: org } = orgQuery;
+    const syncSecret = useSyncA2ASecret();
+    const canManage = canManageSharedAgents(orgQuery);
+    useEffect(() => {
+        const request = readAgentConnectRequest();
+        if (!request)
+            return;
+        setConnectProvider(request.provider);
+        setPrefill(request.prefill ?? null);
+        setShowAdd(true);
+    }, []);
+    const handleSave = async (agent) => {
+        await save(agent);
+        setEditingAgent(null);
+    };
+    const handleDelete = async (agentId) => {
+        if (await remove(agentId))
+            setEditingAgent(null);
+    };
+    return (_jsxs("div", { children: [_jsx("div", { className: "mb-3 flex flex-wrap items-center justify-end gap-3", children: canManage ? (_jsxs("div", { className: "relative", children: [_jsxs("button", { onClick: () => {
+                                setShowAdd(!showAdd);
+                                setEditingAgent(null);
+                            }, className: "inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [showAdd ? _jsx(IconX, { size: 13 }) : _jsx(IconPlus, { size: 13 }), showAdd ? "Cancel" : "Connect agent"] }), showAdd && (_jsx(AgentAddPopover, { initialName: prefill?.name, initialUrl: prefill?.url, initialDescription: prefill?.description, initialProvider: connectProvider, credentialOptions: credentialOptions, secretSet: org?.a2aSecretSet, syncSecret: syncSecret, onAdd: add, onClose: () => {
+                                setShowAdd(false);
+                                setPrefill(null);
+                                setConnectProvider(undefined);
+                            } }))] })) : !orgQuery.isLoading ? (_jsx("span", { className: "text-[10px] text-muted-foreground", children: "Only workspace owners and admins can connect agents." })) : null }), _jsx(A2ASecretStatusRow, { org: org, syncSecret: syncSecret }), loading ? (_jsxs("div", { className: "space-y-1.5", role: "status", "aria-busy": "true", "aria-label": "Loading connected agents", children: [_jsx(Skeleton, { className: "h-6 w-full bg-muted/50" }), _jsx(Skeleton, { className: "h-6 w-3/4 bg-muted/50" })] })) : status === "error" ? (_jsx("p", { role: "alert", className: "text-xs text-destructive", children: t("agentChat.settingsSubAgents.loadFailed") })) : agents.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center rounded-xl border border-border/70 bg-card px-5 py-8 text-center", children: [_jsx("span", { className: "mb-2 flex size-9 items-center justify-center rounded-full bg-muted text-muted-foreground", children: _jsx(IconTopologyRing2, { size: 17 }) }), _jsx("p", { className: "text-sm font-medium text-foreground", children: "No connected agents yet" }), _jsx("p", { className: "mt-1 max-w-sm text-xs leading-5 text-muted-foreground", children: "Connect an A2A agent to delegate work from chat." }), canManage ? (_jsxs("button", { onClick: () => setShowAdd(true), className: "mt-4 inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: [_jsx(IconPlus, { size: 13 }), "Connect agent"] })) : !orgQuery.isLoading ? (_jsx("p", { className: "mt-4 text-xs text-muted-foreground", children: "Ask a workspace owner or admin to connect an agent." })) : null] })) : (_jsx("div", { className: "overflow-hidden rounded-xl border border-border/70 bg-card text-card-foreground", children: _jsx("div", { className: "divide-y divide-border/60 px-4", children: agents.map((agent) => {
+                        const probe = probeById?.get(getRemoteAgentIdFromPath(agent.path).toLowerCase());
+                        const dotState = !probe
+                            ? null
+                            : probe.reachable && probe.authorized !== false
+                                ? "ok"
+                                : "warn";
+                        return (_jsxs("div", { className: "group relative", children: [_jsxs("div", { className: "flex w-full items-center gap-3 py-4", children: [_jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground", children: _jsx(IconTopologyRing2, { size: 15 }) }), dotState ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${dotState === "ok"
+                                                            ? "bg-primary"
+                                                            : "bg-destructive"}` }) }), _jsx(TooltipContent, { children: probe && describeProbeTooltip(probe) })] })) : (_jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-transparent" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium text-foreground", children: agent.name }), _jsx("span", { className: "mt-0.5 block truncate text-xs text-muted-foreground", children: agent.cardUrl || agent.url })] }), (() => {
+                                            const status = probeStatus(probe);
+                                            if (!status)
+                                                return null;
+                                            const label = status === "reachable"
+                                                ? t("agentChat.agents.statusReachable")
+                                                : status === "auth-rejected"
+                                                    ? t("agentChat.agents.statusAuthRejected")
+                                                    : t("agentChat.agents.statusNoJsonRpc");
+                                            return (_jsx("span", { className: `shrink-0 text-[10px] ${status === "reachable"
+                                                    ? "text-primary"
+                                                    : "text-amber-600 dark:text-amber-400"}`, children: label }));
+                                        })(), canManage ? (_jsx("button", { onClick: () => {
+                                                setEditingAgent(editingAgent === agent.id ? null : agent.id);
+                                                setShowAdd(false);
+                                            }, className: "shrink-0 rounded-md border border-border px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-accent", children: "Manage" })) : null] }), canManage && editingAgent === agent.id && (_jsx(AgentEditPopover, { agent: agent, credentialOptions: credentialOptions, onSave: handleSave, onDelete: handleDelete, onClose: () => setEditingAgent(null) }))] }, agent.id));
+                    }) }) }))] }));
+}
+//# sourceMappingURL=AgentsSection.js.map