@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/sections/connectors-view.js

@@ -0,0 +1,1267 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Slack } from '../../internal/icons/slack.js';
+import { useTranslations } from '../../i18n/index.js';
+import { CheckIcon as Check, CaretDownIcon as ChevronDown, CaretRightIcon as ChevronRight, CopyIcon as Copy, DotsThreeIcon, ArrowSquareOutIcon as ExternalLink, LockIcon as Lock, EnvelopeIcon as Mail, PlugIcon as Plug, PlusIcon as Plus, MagnifyingGlassIcon as Search, ShareNetworkIcon, UsersIcon as Users, UsersThreeIcon as UsersThree, XIcon as X, LightningIcon as Zap, } from '@phosphor-icons/react';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { UiImage as Image, useUiViewer, useUiHostConfig } from '../../providers/ui-provider.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { HighlightedCode } from '../../markdown/code/index.js';
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import { ButtonGroup, ButtonGroupSeparator } from '../../primitives/button-group.js';
+import { Checkbox } from '../../primitives/checkbox.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import { EntityAvatar } from '../../primitives/entity-avatar.js';
+import { Field, FieldDescription, FieldGroup, FieldLabel } from '../../primitives/field.js';
+import Hint from '../../primitives/hint.js';
+import { InfoBanner } from '../../primitives/info-banner.js';
+import { InlineMeta } from '../../primitives/inline-meta.js';
+import { Input } from '../../primitives/input.js';
+import { Label } from '../../primitives/label.js';
+import Loading from '../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../primitives/modal.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../primitives/select.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { SplitSheetBody, SplitSheetContent, SplitSheetDescription, SplitSheetFooter, SplitSheetHeader, SplitSheetTitle, } from '../../primitives/split-sheet.js';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../primitives/tabs.js';
+import { Textarea } from '../../primitives/textarea.js';
+import { errorToast, successToast, warningToast } from '../../primitives/toast.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ComputerConnectModal, ComputerStateDot } from '../../internal/tunnel/computer-connect.js';
+import { mcpServerIdentity } from '../connectors/add-mcp/add-mcp-server.js';
+import { connectorDisplayName } from '../connectors/connector-filter.js';
+import { isManagedConnectorProvider } from '../connectors/provider-label.js';
+import { AccessDialog } from '../../access/access/access-dialog.js';
+import { useConnectEmail, useConnectSlack, useDisconnectEmail, useDisconnectSlack, useEmailInstall, useEmailMode, useSlackInstall, useSlackManifest, useSlackMode, useUpdateEmailPolicy, } from '../../internal/hooks/channels/use-channels-installations.js';
+import { emptyProjectSlot, useAddAccount } from '../../internal/hooks/connectors/use-add-account.js';
+import { useDeleteTunnelConnection } from '@kortix/sdk/react';
+import { useCopy } from '../../internal/hooks/use-copy.js';
+import { cn } from '../../internal/lib/utils.js';
+import { createConnector, discoverConnectionOAuth2, discoverConnectionOAuth2Resource, discoverConnectorAuth, ensureProjectConnectorConnection, getConnectorConfig, getConnectStatus, getProjectDetail, listAllConnections, listConnections, listPipedreamApps, listProjectAccess, pollConnectionOAuth2DeviceAuthorization, putConnectionOAuth2Application, reconcileMemberConnection, renameConnection, revokeConnection, setConnectorCredential, setDefaultConnection, startConnectionOAuth2Authorization, startConnectionOAuth2DeviceAuthorization, updateConnectionCredential, } from '@kortix/sdk';
+import { contract, qk, useProjectAccountId } from '@kortix/sdk/react';
+import { AddAccountFields } from './add-account-fields.js';
+import { buildEasyConnectConnectorDraft, buildEmailConnectorConnectionSlug, connectorSyncErrorForSlug, createOnlyConnectorDraft, proposeConnectorConnectionSlug, } from './connector-connection-form.js';
+import { ConnectorConnectionModal } from './connector-connection-modal.js';
+import { credentialWriteTarget, oauth2DiscoveryConnectionKey } from './connector-credential-target.js';
+import { buildOAuth2ApplicationInput, buildOAuth2CredentialInput, EMPTY_OAUTH2_APPLICATION_FORM, EMPTY_OAUTH2_CREDENTIAL_FORM, mergeOAuth2DiscoveryMetadata, oauth2ApplicationFormValid, oauth2CredentialFormValid, } from './connector-oauth2.js';
+import { OAuth2ApplicationFields } from './connector-oauth2-application-fields.js';
+import { autoConnectPlan, mergeResourceDiscoveryIntoForm } from './connector-oauth2-auto.js';
+import { OAuth2CredentialFields } from './connector-oauth2-fields.js';
+import { startOAuth2SignIn } from './connector-oauth2-start.js';
+import { DiscoverCatalogue } from './discover-catalogue.js';
+import { useAddRequest } from './use-add-request.js';
+import { useCreateCustomConnector } from './use-create-custom-connector.js';
+import { AudienceText } from './view/audience-badge.js';
+import { accountNeedsSignIn, accountVisibility, connectorConnectionRows, newAccountLabelTaken, newAccountReady, } from './view/connector-connections.js';
+import { randomUUID } from '../../internal/lib/utils/random-uuid.js';
+const BUILT_IN_CHANNEL_APP_SLUGS = new Set(['slack', 'slack_v2']);
+function SaveBar({ dirty, saving, disabled, onSave, onReset, label = 'Save', }) {
+    const tI18nHardcoded = useTranslations('hardcodedUi');
+    if (!dirty)
+        return null;
+    return (_jsxs("div", { className: "border-border/60 mt-5 flex items-center justify-end gap-2 border-t pt-4", children: [_jsxs("span", { className: "text-muted-foreground mr-auto flex items-center gap-1.5 text-xs", children: [_jsx("span", { className: "bg-kortix-orange size-1.5 rounded-full" }), tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextUnsavedChanges4682b870')] }), onReset && (_jsx(Button, { size: "sm", variant: "ghost", onClick: onReset, disabled: saving, children: tI18nHardcoded.raw('i18nComplete.textdaee7606b339') })), _jsxs(Button, { size: "sm", onClick: onSave, disabled: saving || disabled, className: "gap-1.5", children: [saving && _jsx(Loading, { className: "size-4 shrink-0" }), label] })] }));
+}
+function CodeSnippet({ code, language, className, }) {
+    return (_jsx("div", { className: cn('border-border/60 bg-card flex w-full overflow-x-auto rounded-md border', className), children: _jsx("div", { className: "p-3 [&_code]:text-xs", children: _jsx(HighlightedCode, { code: code, language: language }) }) }));
+}
+/** One row in the connections list — a single connected account. */
+function ConnectionRow({ connection, viewerId, isMine, canManage, onSetDefault, onDisconnect, onRename, onStartSession, onSetCredential, onShare, onConnect, needsSignIn, pending, disabled = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tSharing = useTranslations('accessSharing');
+    const tComputers = useTranslations('computers');
+    const tConnectorPages = useTranslations('connectorPages');
+    const isProjectAuthorization = connection.owner_type === 'project';
+    const active = connection.status === 'active';
+    // Only the owner of a connection may change it: your own personal connection,
+    // or, for a project authorization, a project manager.
+    const mayMutate = isProjectAuthorization ? canManage : isMine;
+    const visibility = accountVisibility(connection, viewerId);
+    const everyoneWithAccess = (connection.shared_with ?? []).map((share) => share.label);
+    const { copy } = useCopy({ successMessage: tI18nComplete.raw('text56ee71f3ece0') });
+    return (_jsxs("li", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx("span", { "aria-hidden": true, className: "bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md", children: visibility.kind === 'you' ? (_jsx(Lock, { className: "size-4" })) : visibility.kind === 'everyone' ? (_jsx(UsersThree, { className: "size-4" })) : (_jsx(Users, { className: "size-4" })) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium", children: connection.label }), connection.is_default && (_jsx(Badge, { variant: "secondary", size: "xs", children: tI18nComplete.raw('text21b111cbfe6e') }))] }), _jsxs(InlineMeta, { children: [_jsx(AudienceText, { visibility: visibility, labels: everyoneWithAccess }), connection.usable === false ? tSharing('notSharedWithYou') : null, active && needsSignIn ? (_jsx("span", { children: tConnectorPages('notSignedIn') })) : null, active && connection.metadata?.credential_rejected_at ? (_jsx("span", { className: "text-destructive", children: tConnectorPages('credentialRejected') })) : null, active ? null : (_jsx("span", { className: "text-destructive", children: connection.status === 'revoked' ? 'Disconnected' : 'Error' })), active && connection.machine ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(ComputerStateDot, { state: connection.machine.online ? 'online' : 'offline' }), tComputers(connection.machine.online ? 'online' : 'offline')] })) : null, connection.connected_as && connection.connected_as !== connection.label
+                                ? tI18nComplete('texte9e0b20cf289', { value0: connection.connected_as })
+                                : null] })] }), onConnect && mayMutate && needsSignIn ? (_jsx(Button, { size: "sm", className: "shrink-0", onClick: onConnect, disabled: pending || disabled, children: tConnectorPages('connectAccount') })) : null, _jsxs(ButtonGroup, { className: "shrink-0", children: [onShare && mayMutate ? (
+                    // Your own private account is shared by turning it into a shared one,
+                    // which needs the same right as creating a shared account.
+                    isProjectAuthorization || canManage ? (_jsxs(Button, { variant: "secondary", size: "sm", className: "shrink-0 gap-1.5", onClick: onShare, disabled: pending || disabled, "aria-label": tSharing('shareTitle', { label: connection.label }), children: [_jsx(ShareNetworkIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text29887a5ff984')] })) : (_jsx(Hint, { label: tSharing('shareRequiresManage'), children: _jsx("span", { className: "inline-flex shrink-0", children: _jsxs(Button, { variant: "secondary", size: "sm", className: "gap-1.5", disabled: true, "aria-label": tSharing('shareTitle', { label: connection.label }), children: [_jsx(ShareNetworkIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text29887a5ff984')] }) }) }))) : null, _jsx(ButtonGroupSeparator, { className: "bg-border" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "size-8 shrink-0", "aria-label": tI18nComplete('text33da220b1a34', { value0: connection.label }), disabled: pending || disabled, children: pending ? (_jsx(Loading, { className: "size-4 shrink-0" })) : (_jsx(DotsThreeIcon, { className: "size-4" })) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-48", children: [_jsx(DropdownMenuItem, { onClick: () => copy(connection.connection_id), children: tI18nComplete.raw('text99775327d988') }), mayMutate && (_jsx(DropdownMenuItem, { onClick: onRename, children: tI18nComplete.raw('text3064d79a295c') })), mayMutate && isMine && active && onStartSession && (_jsx(DropdownMenuItem, { onClick: onStartSession, children: tI18nComplete.raw('textfae237eed0c5') })), mayMutate && onSetCredential && (_jsx(DropdownMenuItem, { onClick: onSetCredential, children: tI18nComplete.raw('text3d6627454174') })), mayMutate && !connection.is_default && active && (_jsxs(DropdownMenuItem, { onClick: onSetDefault, children: [tI18nComplete.raw('texta92f66fd3d83'), isProjectAuthorization ? ` ${tI18nComplete.raw('text801a345cd406')}` : ''] })), mayMutate && (_jsx(DropdownMenuItem, { onClick: onDisconnect, children: tI18nComplete.raw('textacfc5be785a9') }))] })] })] })] }));
+}
+/**
+ * Every account this connector can run as, in one list. Each card states who
+ * may use it (`accountVisibility`); one "Add account" asks only who may use the
+ * new account.
+ *
+ * An account is an authorized identity on the connector, owned by the project
+ * (shared) or by one member (only you), and both can coexist on the same
+ * connector. Sharing an account is manager-gated
+ * (`PROJECT_CONNECTOR_CONNECTIONS_MANAGE`, the same right the API checks);
+ * adding your own never is.
+ *
+ * The API already scopes the list to the caller, so a member-owned row is
+ * always the caller's own. Another member's private account is not visible
+ * here and is not meant to be.
+ */
+const EMPTY_NEW_ACCOUNT = {
+    label: '',
+    audience: 'private',
+    picked: { memberIds: [], groupIds: [] },
+};
+export function ConnectionsList({ projectId, connector, displayName, canManageConnections, onChanged, onStartSession, onSetCredential, onConnect, titleAddon, addVariant = 'secondary', addRequest = 0, onAddRequestHandled, disabled = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tSharing = useTranslations('accessSharing');
+    const tComputers = useTranslations('computers');
+    // A direct provider (openapi/http/mcp/graphql/...) has no hosted OAuth: "Add"
+    // creates the account and this then opens `SetCredentialModal` for it. A
+    // managed provider (Composio/Pipedream) runs hosted OAuth. Both go through
+    // `useAddAccount`.
+    // A computer account is a paired machine: "Add" pairs one (desktop one-click,
+    // or download + npx) instead of asking for a credential.
+    const isComputer = connector.provider === 'computer';
+    const isDirectProvider = !isManagedConnectorProvider(connector.provider) && !isComputer;
+    const [computerOpen, setComputerOpen] = useState(false);
+    const user = useUiViewer();
+    const viewerId = user?.id ?? null;
+    const [confirmDisconnect, setConfirmDisconnect] = useState(null);
+    const [renameTarget, setRenameTarget] = useState(null);
+    const [renameDraft, setRenameDraft] = useState('');
+    const [credentialTarget, setCredentialTarget] = useState(null);
+    // The shared account whose audience the share dialog edits.
+    const [shareTarget, setShareTarget] = useState(null);
+    const [shareOpen, setShareOpen] = useState(false);
+    const accountId = useProjectAccountId(projectId);
+    const projectDetailQuery = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        ...contract('config'),
+    });
+    const projectName = projectDetailQuery.data?.project?.name ?? '';
+    const everyoneLabel = projectName
+        ? tSharing('everyone', { project: projectName })
+        : tSharing('visibilityEveryone');
+    const connectionsQuery = useQuery({
+        queryKey: ['connections', projectId],
+        queryFn: () => listConnections(projectId),
+        staleTime: 30_000,
+        // A computer goes online and offline on its own: keep its status current.
+        refetchInterval: isComputer ? 15_000 : false,
+    });
+    const refresh = () => {
+        void connectionsQuery.refetch();
+        onChanged();
+    };
+    const allRows = connectorConnectionRows(connectionsQuery.data?.connections, connector.slug);
+    // The server's empty shared slot is a placeholder, not an account anyone
+    // added: listing it reads as "everyone already shares this". Add account
+    // still reuses it when the person picks Everyone.
+    const slot = emptyProjectSlot(connector, allRows);
+    const rows = slot ? allRows.filter((row) => row !== slot) : allRows;
+    const openCredential = onSetCredential ?? setCredentialTarget;
+    // "Add account" asks the account's name and who may use it: only you,
+    // everyone in the project, or picked people and groups. The connector
+    // profile itself is always the project's.
+    const [addOpen, setAddOpen] = useState(false);
+    const [draft, setDraft] = useState(EMPTY_NEW_ACCOUNT);
+    // The proposed name is the next free one. Right after Install the dialog
+    // opens before this account list has loaded, so the proposal follows the
+    // list until the user types a name of their own.
+    const [labelEdited, setLabelEdited] = useState(false);
+    const closeAdd = () => setAddOpen(false);
+    const addAccount = useAddAccount({
+        projectId,
+        connector,
+        displayName,
+        onAdded: () => {
+            closeAdd();
+            refresh();
+        },
+        onCredential: openCredential,
+    });
+    const adding = addAccount.pending;
+    const openAdd = () => {
+        if (isComputer) {
+            setComputerOpen(true);
+            return;
+        }
+        setDraft({ ...EMPTY_NEW_ACCOUNT, label: addAccount.proposedLabel() });
+        setLabelEdited(false);
+        setAddOpen(true);
+    };
+    const proposedLabel = addAccount.proposedLabel();
+    if (addOpen && !labelEdited && draft.label !== proposedLabel)
+        setDraft({ ...draft, label: proposedLabel });
+    useAddRequest(addRequest, openAdd, onAddRequestHandled);
+    const labelTaken = newAccountLabelTaken(draft, rows);
+    const canSubmitAdd = !disabled && !adding && newAccountReady(draft, rows, { canManageConnections, accountId });
+    const submitAdd = () => {
+        if (canSubmitAdd)
+            addAccount.submit(draft);
+    };
+    const setDefault = useMutation({
+        mutationFn: (connectionId) => setDefaultConnection(projectId, connectionId),
+        onSuccess: () => {
+            successToast(tI18nComplete.raw('text109ff88aec78'));
+            refresh();
+        },
+        onError: (e) => errorToast(e.message || tI18nComplete.raw('texta2cf78785484')),
+    });
+    // Your own computer row follows you into every project, so its Disconnect
+    // removes the machine from Kortix (every project), not one account.
+    const unpairComputer = useDeleteTunnelConnection();
+    const disconnect = useMutation({
+        mutationFn: (connectionId) => revokeConnection(projectId, connectionId),
+        onSuccess: () => {
+            successToast(tI18nComplete.raw('text04dfac3671b4'));
+            setConfirmDisconnect(null);
+            refresh();
+        },
+        onError: (e) => errorToast(e.message || tI18nComplete.raw('textb7668a581f59')),
+    });
+    const rename = useMutation({
+        mutationFn: (input) => renameConnection(projectId, input.connectionId, input.label),
+        onSuccess: () => {
+            successToast(tI18nComplete.raw('text499d7f6dfdfc'));
+            setRenameTarget(null);
+            refresh();
+        },
+        // The API names the refusal (a clash with another account, a reserved
+        // word), so show its message rather than a generic one.
+        onError: (e) => errorToast(e.message || tI18nComplete.raw('text11ef24ea6e15')),
+    });
+    const openRename = (connection) => {
+        setRenameDraft(connection.label);
+        setRenameTarget(connection);
+    };
+    const submitRename = () => {
+        const label = renameDraft.trim();
+        if (disabled || !renameTarget || !label)
+            return;
+        if (label === renameTarget.label) {
+            setRenameTarget(null);
+            return;
+        }
+        rename.mutate({ connectionId: renameTarget.connection_id, label });
+    };
+    const pendingConnectionId = setDefault.isPending && typeof setDefault.variables === 'string'
+        ? setDefault.variables
+        : disconnect.isPending && typeof disconnect.variables === 'string'
+            ? disconnect.variables
+            : rename.isPending && rename.variables
+                ? rename.variables.connectionId
+                : null;
+    // Re-open the credential entry for an existing direct-provider account —
+    // wired from the row menu ("Set credential") and reused right after
+    // `useAddAccount` creates a brand new one.
+    const setCredential = isDirectProvider
+        ? (connection) => openCredential({
+            connectionId: connection.connection_id,
+            owner: connection.owner_type === 'project' ? 'project' : 'me',
+        })
+        : undefined;
+    // A member's computer account follows them into every project, so it is
+    // never removed from one project: Disconnect unpairs the machine.
+    const ownComputer = (connection) => isComputer && connection.owner_type === 'member';
+    const renderRow = (connection) => (_jsx(ConnectionRow, { connection: connection, viewerId: viewerId, isMine: connection.owner_type === 'member', canManage: canManageConnections, pending: pendingConnectionId === connection.connection_id, disabled: disabled, onSetDefault: () => setDefault.mutate(connection.connection_id), onDisconnect: () => setConfirmDisconnect(connection), onRename: () => openRename(connection), onStartSession: onStartSession ? () => onStartSession(connection) : undefined, onSetCredential: setCredential ? () => setCredential(connection) : undefined, onConnect: onConnect ? () => onConnect(connection) : undefined, needsSignIn: accountNeedsSignIn(connection, connector), onShare: accountId
+            ? () => {
+                setShareTarget(connection);
+                setShareOpen(true);
+            }
+            : undefined }, connection.connection_id));
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [titleAddon ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Label, { children: tSharing('accountsTitle') }), titleAddon] })) : (_jsx(Label, { children: tSharing('accountsTitle') })), isComputer ? (_jsxs(Button, { size: "sm", variant: addVariant, onClick: () => setComputerOpen(true), disabled: disabled, children: [_jsx(Plus, { className: "size-4" }), tSharing('addAccount')] })) : (_jsxs(Button, { size: "sm", variant: addVariant, onClick: openAdd, disabled: disabled, children: [_jsx(Plus, { className: "size-4" }), tSharing('addAccount')] }))] }), connectionsQuery.isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-14 rounded-md" }), _jsx(Skeleton, { className: "h-14 rounded-md" })] })) : rows.length === 0 ? (_jsx(EmptyState, { size: "sm", icon: Plug, title: tSharing('noAccountsTitle'), description: tSharing('noAccountsDescription', { connector: displayName }) })) : (_jsx("ul", { className: "bg-popover divide-border divide-y rounded-md border", children: rows.map(renderRow) }))] }), accountId && shareTarget ? (_jsx(AccessDialog, { open: shareOpen, onOpenChange: setShareOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: {
+                    kind: 'share',
+                    object: {
+                        type: 'connection',
+                        id: shareTarget.connection_id,
+                        label: shareTarget.label,
+                        // Your own private account: sharing makes it a shared one.
+                        ...(shareTarget.owner_type === 'member' && viewerId
+                            ? { privateOwner: { userId: viewerId, label: user?.email ?? tSharing('onlyYou') } }
+                            : {}),
+                    },
+                    current: connectionsQuery.data?.connections.find((connection) => connection.connection_id === shareTarget.connection_id)?.shared_with ?? [],
+                }, onDone: refresh }, shareTarget.connection_id)) : null, _jsx(Modal, { open: addOpen, onOpenChange: (open) => {
+                    if (!open && !adding)
+                        closeAdd();
+                }, children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tSharing('addAccountTitle', { connector: displayName }) }), _jsx(ModalDescription, { children: tSharing('addAccountDescription') })] }), _jsxs("form", { onSubmit: (e) => {
+                                e.preventDefault();
+                                submitAdd();
+                            }, children: [_jsx(ModalBody, { className: "max-h-[60vh] space-y-4 overflow-y-auto", children: _jsx(AddAccountFields, { projectId: projectId, value: draft, onChange: (next) => {
+                                            if (next.label !== draft.label)
+                                                setLabelEdited(true);
+                                            setDraft(next);
+                                        }, labelTaken: labelTaken, canManageConnections: canManageConnections, accountId: accountId, everyoneLabel: everyoneLabel, hint: tI18nComplete.raw('text99953938d987'), disabled: adding || disabled, autoFocus: true }) }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: closeAdd, disabled: adding, children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { type: "submit", disabled: !canSubmitAdd, children: [adding ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text31fbef162594')] })] })] })] }) }), _jsx(Modal, { open: renameTarget !== null, onOpenChange: (open) => {
+                    if (!open && !rename.isPending)
+                        setRenameTarget(null);
+                }, children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete('textbb7a240d3660', { value0: renameTarget?.label ?? '' }) }), _jsx(ModalDescription, { children: tI18nComplete.raw('text64f07c825803') })] }), _jsxs("form", { onSubmit: (e) => {
+                                e.preventDefault();
+                                submitRename();
+                            }, children: [_jsx(ModalBody, { children: _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connection-rename-label", children: tI18nComplete.raw('textdcd1d5223f73') }), _jsx(Input, { id: "connection-rename-label", value: renameDraft, onChange: (e) => setRenameDraft(e.target.value), maxLength: 255, autoFocus: true, disabled: rename.isPending || disabled }), renameTarget?.connected_as ? (_jsx(FieldDescription, { children: tI18nComplete('texte9e0b20cf289', { value0: renameTarget.connected_as }) })) : null] }) }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: () => setRenameTarget(null), disabled: rename.isPending, children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { type: "submit", disabled: rename.isPending || disabled || !renameDraft.trim(), children: [rename.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241')] })] })] })] }) }), _jsx(ConfirmDialog, { open: confirmDisconnect !== null, onOpenChange: (open) => !open && setConfirmDisconnect(null), title: tI18nComplete('text13716a578591', { value0: confirmDisconnect?.label ?? '' }), description: confirmDisconnect && ownComputer(confirmDisconnect)
+                    ? tComputers('unpairDescription')
+                    : confirmDisconnect?.owner_type === 'project'
+                        ? tI18nComplete.raw('texte2cbafcec553')
+                        : tI18nComplete.raw('text64db32d83da9'), confirmLabel: tI18nComplete.raw('textacfc5be785a9'), confirmVariant: "destructive", isPending: disconnect.isPending || unpairComputer.isPending, onConfirm: () => {
+                    if (!confirmDisconnect)
+                        return;
+                    if (ownComputer(confirmDisconnect) && confirmDisconnect.tunnel_id) {
+                        unpairComputer.mutate(confirmDisconnect.tunnel_id, {
+                            onSuccess: () => {
+                                successToast(tComputers('disconnected'));
+                                setConfirmDisconnect(null);
+                                refresh();
+                            },
+                            onError: (e) => errorToast(e.message || tComputers('disconnectFailed')),
+                        });
+                        return;
+                    }
+                    disconnect.mutate(confirmDisconnect.connection_id);
+                } }), isComputer ? (_jsx(ComputerConnectModal, { projectId: projectId, open: computerOpen, onOpenChange: setComputerOpen, onConnected: refresh })) : null, isDirectProvider && !onSetCredential ? (_jsx(SetCredentialModal, { projectId: projectId, connector: credentialTarget ? connector : null, connectionId: credentialTarget?.connectionId ?? null, owner: credentialTarget?.owner ?? 'me', open: credentialTarget !== null, onOpenChange: (open) => {
+                    if (!open)
+                        setCredentialTarget(null);
+                }, onSaved: () => {
+                    setCredentialTarget(null);
+                    refresh();
+                } })) : null] }));
+}
+function RosterStatusBadge({ status }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    if (status === 'active') {
+        return (_jsx(Badge, { variant: "outline", size: "sm", className: "text-kortix-green", children: tI18nComplete.raw('text22965568d22a') }));
+    }
+    return (_jsx(Badge, { variant: "outline", size: "sm", className: "text-muted-foreground", children: status === 'revoked' ? 'Disconnected' : 'Error' }));
+}
+/**
+ * Owner/admin read-only roster: which project members have connected their OWN
+ * account for this connector, and its status. Manage-gated at the API; never
+ * shows credentials (only existence + status + owner). Read-only.
+ */
+export function ConnectionRoster({ projectId, connectorSlug, displayName, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const connectionsQuery = useQuery({
+        queryKey: ['connections-all', projectId],
+        queryFn: () => listAllConnections(projectId),
+        staleTime: 30_000,
+    });
+    const accessQuery = useQuery({
+        queryKey: qk.project.access(projectId),
+        queryFn: () => listProjectAccess(projectId),
+        ...contract('inventory'),
+    });
+    const emailByUser = useMemo(() => {
+        const map = new Map();
+        for (const member of accessQuery.data?.members ?? []) {
+            if (member.email)
+                map.set(member.user_id, member.email);
+        }
+        return map;
+    }, [accessQuery.data]);
+    const rows = (connectionsQuery.data?.connections ?? []).filter((connection) => connection.connector_alias === connectorSlug && connection.owner_type === 'member');
+    return (_jsxs("div", { className: "overflow-hidden rounded-md border", children: [_jsxs("div", { className: "text-muted-foreground border-b px-4 py-2.5 text-xs font-medium", children: [tI18nComplete.raw('texta2d64eeafcb9'), " ", displayName, ' ', tI18nComplete.raw('text1e5fac867454')] }), connectionsQuery.isLoading ? (_jsx("div", { className: "text-muted-foreground px-4 py-3 text-sm", children: tI18nComplete.raw('textba3bbbe10d8b') })) : rows.length === 0 ? (_jsxs("div", { className: "text-muted-foreground px-4 py-3 text-sm", children: [tI18nComplete.raw('text56e264eb39f6'), " ", displayName, ' ', tI18nComplete.raw('textf55f49c47f7f')] })) : (_jsx("ul", { className: "divide-y", children: rows.map((connection) => (_jsxs("li", { className: "flex items-center justify-between gap-3 px-4 py-2.5", children: [_jsx("span", { className: "min-w-0 truncate text-sm", children: emailByUser.get(connection.owner_id ?? '') ??
+                                connection.owner_id ??
+                                tI18nComplete.raw('text29824c5acaf8') }), _jsx(RosterStatusBadge, { status: connection.status })] }, connection.connection_id))) }))] }));
+}
+function connectorPlatform(connector) {
+    if (connector.platform === 'slack' || connector.platform === 'email') {
+        return connector.platform;
+    }
+    if (connector.slug === 'kortix_slack')
+        return 'slack';
+    if (connector.slug === 'kortix_email')
+        return 'email';
+    if (connector.slug.startsWith('email_'))
+        return 'email';
+    return null;
+}
+export function ChannelConnectionSection({ projectId, connector, onChanged, onRemoved, canWrite = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const platform = connectorPlatform(connector);
+    if (platform === 'email') {
+        return (_jsx(EmailChannelConnection, { projectId: projectId, connector: connector, onChanged: onChanged, onRemoved: onRemoved, canWrite: canWrite }));
+    }
+    if (platform === 'slack') {
+        return (_jsx(SlackChannelConnection, { projectId: projectId, onChanged: onChanged, onRemoved: onRemoved, canWrite: canWrite }));
+    }
+    return (_jsxs("section", { className: "space-y-4", children: [_jsx(Label, { children: tI18nComplete.raw('text639a40e82b9a') }), _jsx("div", { className: "bg-popover rounded-md border px-4 py-3", children: _jsx(InfoBanner, { tone: "warning", children: tI18nComplete.raw('text53f76274b923') }) })] }));
+}
+function EmailChannelConnection({ projectId, connector, onChanged, onRemoved, canWrite = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const install = useEmailInstall(projectId, connector.slug);
+    return (_jsxs("section", { className: "space-y-4", children: [_jsx(Label, { children: tI18nComplete.raw('text7033ce3d1e7a') }), _jsx("p", { className: "text-muted-foreground -mt-2 text-xs", children: tI18nComplete.raw('text28d1c949e5e6') }), _jsx("div", { className: "bg-popover rounded-md border px-4 py-3", children: install.isLoading ? (_jsx(Skeleton, { className: "h-24 w-full rounded-md" })) : install.data ? (_jsx(ConnectedEmailConnection, { projectId: projectId, connectorSlug: connector.slug, installation: install.data, onRemoved: onRemoved, canWrite: canWrite })) : canWrite ? (_jsx(EmailConnectForm, { projectId: projectId, connectorSlug: connector.slug, onConnected: onChanged })) : (_jsx(InfoBanner, { tone: "neutral", icon: Mail, title: tI18nComplete.raw('textf0aea4d97b8e'), children: tI18nComplete.raw('text2dec6c273b47') })) })] }));
+}
+function ConnectedEmailConnection({ projectId, connectorSlug, installation, onRemoved, canWrite = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const disconnect = useDisconnectEmail();
+    const [confirming, setConfirming] = useState(false);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs(InfoBanner, { tone: "success", icon: Check, title: tI18nComplete.raw('textc23cc1f72afe'), children: [tI18nComplete.raw('text56ef8f20955f'), ' ', _jsx("code", { className: "font-mono", children: installation.email }), ' · ', tI18nComplete.raw('text94835ea2fcf7'), ' ', _jsx("code", { className: "font-mono", children: installation.inboxId }), installation.webhookId ? (_jsxs(_Fragment, { children: [' · ', tI18nComplete.raw('text4814f62c108d'), ' ', _jsx("code", { className: "font-mono", children: installation.webhookId })] })) : null] }), _jsx(EmailSenderPolicyEditor, { projectId: projectId, connectorSlug: connectorSlug, policy: installation.senderPolicy, canWrite: canWrite }), canWrite && (_jsx("div", { className: "flex items-center justify-end gap-2", children: confirming ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground mr-auto text-xs", children: tI18nComplete.raw('text2a528ae2d4ae') }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirming(false), children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { variant: "destructive", size: "sm", disabled: disconnect.isPending, onClick: () => disconnect.mutate({ projectId, connectorSlug }, {
+                                onSuccess: () => {
+                                    setConfirming(false);
+                                    onRemoved();
+                                },
+                            }), children: [disconnect.isPending ? _jsx(Loading, { className: "mr-2 size-3.5 shrink-0" }) : null, tI18nComplete.raw('textacfc5be785a9')] })] })) : (_jsx(Button, { variant: "outline", size: "sm", onClick: () => setConfirming(true), children: tI18nComplete.raw('textacfc5be785a9') })) }))] }));
+}
+function splitPolicyList(value) {
+    return Array.from(new Set(value
+        .split(/[\n,]+/)
+        .map((item) => item.trim().toLowerCase())
+        .filter(Boolean)));
+}
+function normalizeEmailSenderPolicy(policy) {
+    return {
+        mode: policy?.mode === 'restricted' ? 'restricted' : 'allow_all',
+        allowedEmails: policy?.allowedEmails ?? [],
+        allowedDomains: policy?.allowedDomains ?? [],
+        allowedRegex: policy?.allowedRegex ?? null,
+    };
+}
+function EmailSenderPolicyEditor({ projectId, connectorSlug, policy, canWrite = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const update = useUpdateEmailPolicy();
+    const initial = normalizeEmailSenderPolicy(policy);
+    const [restricted, setRestricted] = useState(initial.mode === 'restricted');
+    const [emails, setEmails] = useState(() => initial.allowedEmails.join('\n'));
+    const [domains, setDomains] = useState(() => initial.allowedDomains.join('\n'));
+    const [regex, setRegex] = useState(initial.allowedRegex ?? '');
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const next = normalizeEmailSenderPolicy(policy);
+        setRestricted(next.mode === 'restricted');
+        setEmails(next.allowedEmails.join('\n'));
+        setDomains(next.allowedDomains.join('\n'));
+        setRegex(next.allowedRegex ?? '');
+        setError(null);
+    }, [policy]);
+    const nextPolicy = () => ({
+        mode: restricted ? 'restricted' : 'allow_all',
+        allowedEmails: splitPolicyList(emails),
+        allowedDomains: splitPolicyList(domains).map((domain) => domain.replace(/^@+/, '')),
+        allowedRegex: regex.trim() || null,
+    });
+    const save = () => {
+        setError(null);
+        const sender_policy = nextPolicy();
+        if (sender_policy.allowedRegex) {
+            try {
+                new RegExp(sender_policy.allowedRegex);
+            }
+            catch {
+                setError('Regex is invalid');
+                return;
+            }
+        }
+        update.mutate({ projectId, connectorSlug, sender_policy }, { onError: (e) => setError(e.message) });
+    };
+    const dirty = restricted !== (initial.mode === 'restricted') ||
+        emails !== initial.allowedEmails.join('\n') ||
+        domains !== initial.allowedDomains.join('\n') ||
+        regex !== (initial.allowedRegex ?? '');
+    return (_jsx("div", { className: "border-border/60 bg-card rounded-md border p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Checkbox, { id: "email-sender-restricted", checked: restricted, onCheckedChange: (checked) => setRestricted(Boolean(checked)), className: "mt-0.5", disabled: !canWrite }), _jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "email-sender-restricted", children: tI18nComplete.raw('texta48c89f63885') }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: tI18nComplete.raw('text8c67b476d59b') })] }), restricted ? (_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(Field, { children: _jsx(Input, { value: emails, onChange: (e) => setEmails(e.target.value), placeholder: tI18nComplete.raw('text542d24012988'), disabled: !canWrite }) }), _jsx(Field, { children: _jsx(Input, { value: domains, onChange: (e) => setDomains(e.target.value), placeholder: tI18nComplete.raw('texta379a6f6eeaf'), disabled: !canWrite }) }), _jsx("div", { className: "sm:col-span-2", children: _jsx(Field, { children: _jsx(Input, { value: regex, onChange: (e) => setRegex(e.target.value), placeholder: tI18nComplete.raw('text8b21058f3253'), spellCheck: false, disabled: !canWrite }) }) })] })) : null, error ? _jsx(InfoBanner, { tone: "destructive", children: error }) : null, canWrite && (_jsx(SaveBar, { dirty: dirty, saving: update.isPending, onSave: save, onReset: () => {
+                                setRestricted(initial.mode === 'restricted');
+                                setEmails(initial.allowedEmails.join('\n'));
+                                setDomains(initial.allowedDomains.join('\n'));
+                                setRegex(initial.allowedRegex ?? '');
+                            }, label: tI18nComplete.raw('text57ee14ce1425') }))] })] }) }));
+}
+export function EmailConnectForm({ projectId, connectorSlug, onConnected, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const mode = useEmailMode(projectId);
+    const connect = useConnectEmail();
+    const [displayName, setDisplayName] = useState('Kortix Agent');
+    const [username, setUsername] = useState(() => connectorSlug
+        .replace(/^email_/, '')
+        .replace(/_[a-z0-9]{4}$/i, '')
+        .replace(/_/g, '-'));
+    const [attachExisting, setAttachExisting] = useState(false);
+    const [existingInboxId, setExistingInboxId] = useState('');
+    const [existingEmail, setExistingEmail] = useState('');
+    const [apiKey, setApiKey] = useState('');
+    const [customKeyOpen, setCustomKeyOpen] = useState(false);
+    const [restricted, setRestricted] = useState(false);
+    const [emails, setEmails] = useState('');
+    const [domains, setDomains] = useState('');
+    const [regex, setRegex] = useState('');
+    const [error, setError] = useState(null);
+    const managedAvailable = mode.data?.managed_available === true;
+    const useCustomKey = customKeyOpen && apiKey.trim();
+    const canCreate = managedAvailable || Boolean(useCustomKey);
+    const submit = () => {
+        setError(null);
+        if (!canCreate) {
+            setCustomKeyOpen(true);
+            setError('Managed Email is not configured on this deployment. Use a custom AgentMail key to continue.');
+            return;
+        }
+        if (attachExisting && (!existingInboxId.trim() || !existingEmail.trim())) {
+            setError('Existing AgentMail inbox requires both inbox ID and email address.');
+            return;
+        }
+        const sender_policy = {
+            mode: restricted ? 'restricted' : 'allow_all',
+            allowedEmails: splitPolicyList(emails),
+            allowedDomains: splitPolicyList(domains).map((domain) => domain.replace(/^@+/, '')),
+            allowedRegex: regex.trim() || null,
+        };
+        if (sender_policy.allowedRegex) {
+            try {
+                new RegExp(sender_policy.allowedRegex);
+            }
+            catch {
+                setError('Regex is invalid');
+                return;
+            }
+        }
+        connect.mutate({
+            projectId,
+            connector_slug: connectorSlug,
+            api_key: useCustomKey ? apiKey.trim() : undefined,
+            display_name: displayName.trim() || undefined,
+            username: attachExisting ? undefined : username.trim() || undefined,
+            inbox_id: attachExisting ? existingInboxId.trim() : undefined,
+            email: attachExisting ? existingEmail.trim() : undefined,
+            sender_policy,
+        }, {
+            onSuccess: onConnected,
+            onError: (e) => setError(e.message),
+        });
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(InfoBanner, { tone: managedAvailable ? 'info' : 'warning', icon: Mail, title: managedAvailable
+                    ? tI18nComplete.raw('texte654b63c8098')
+                    : tI18nComplete.raw('textafe9444782eb'), children: managedAvailable
+                    ? tI18nComplete.raw('textec9ace8d8ff6')
+                    : tI18nComplete.raw('text608977655d2d') }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(Field, { children: _jsx(Input, { id: "email-channel-display-name", name: "email-channel-display-name", "aria-label": tI18nComplete.raw('textf912567c97f2'), value: displayName, onChange: (e) => setDisplayName(e.target.value), placeholder: tI18nComplete.raw('text952144fe1418') }) }), attachExisting ? (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "email-channel-existing-email", children: tI18nComplete.raw('text2fcfd290b610') }), _jsx(Input, { id: "email-channel-existing-email", name: "email-channel-existing-email", "aria-label": tI18nComplete.raw('textaa042b472947'), value: existingEmail, onChange: (e) => setExistingEmail(e.target.value.trim().toLowerCase()), placeholder: tI18nComplete.raw('textbca888f9f9fd'), autoComplete: "off", spellCheck: false })] })) : (_jsxs(Field, { children: [_jsx(Input, { id: "email-channel-username", name: "email-channel-username", "aria-label": tI18nComplete.raw('textcbf297bfb5e6'), value: username, onChange: (e) => setUsername(e.target.value.toLowerCase().replace(/[^a-z0-9._-]/g, '')), placeholder: tI18nComplete.raw('texta18603086e5b'), autoComplete: "off", spellCheck: false }), _jsxs("p", { className: "text-muted-foreground text-xs", children: [tI18nComplete.raw('textf0a216500b54'), " ", username || 'support', tI18nComplete.raw('text39e4dae21daa')] })] }))] }), _jsx("div", { className: "border-border/60 border-t pt-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Checkbox, { id: "email-channel-existing-inbox", checked: attachExisting, onCheckedChange: (checked) => setAttachExisting(Boolean(checked)), className: "mt-0.5" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "email-channel-existing-inbox", children: tI18nComplete.raw('textd7cc97510eb3') }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: tI18nComplete.raw('text3bb2e4fa1c03') })] }), attachExisting ? (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "email-channel-existing-inbox-id", children: tI18nComplete.raw('texta35f4f3f0587') }), _jsx(Input, { id: "email-channel-existing-inbox-id", name: "email-channel-existing-inbox-id", "aria-label": tI18nComplete.raw('textdc5376ca47b4'), value: existingInboxId, onChange: (e) => setExistingInboxId(e.target.value.trim()), placeholder: tI18nComplete.raw('textbca888f9f9fd'), autoComplete: "off", spellCheck: false })] })) : null] })] }) }), _jsxs("div", { className: "space-y-3", children: [_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1.5 px-0", onClick: () => setCustomKeyOpen((open) => !open), children: [_jsx(ChevronDown, { className: cn('h-3.5 w-3.5 transition-transform', customKeyOpen && 'rotate-180') }), tI18nComplete.raw('text1bb320d9db5d')] }), customKeyOpen ? (_jsxs(Field, { children: [_jsx(Input, { id: "email-channel-agentmail-api-key", name: "email-channel-agentmail-api-key", "aria-label": tI18nComplete.raw('text87b0e5101fd8'), type: "password", value: apiKey, onChange: (e) => setApiKey(e.target.value), placeholder: tI18nComplete.raw('text3ce8275b54eb'), autoComplete: "off", spellCheck: false }), _jsx("p", { className: "text-muted-foreground text-xs", children: tI18nComplete.raw('text0ec2e7ccbd17') })] })) : null] }), _jsx("div", { className: "border-border/60 bg-card rounded-md border p-4", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Checkbox, { id: "email-channel-restrict-senders", checked: restricted, onCheckedChange: (checked) => setRestricted(Boolean(checked)), className: "mt-0.5" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "email-channel-restrict-senders", children: tI18nComplete.raw('textb1fb183269ba') }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: tI18nComplete.raw('text5284184cef68') })] }), restricted ? (_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(Field, { children: _jsx(Input, { value: emails, onChange: (e) => setEmails(e.target.value), placeholder: tI18nComplete.raw('text542d24012988'), spellCheck: false }) }), _jsx(Field, { children: _jsx(Input, { value: domains, onChange: (e) => setDomains(e.target.value), placeholder: tI18nComplete.raw('texta379a6f6eeaf'), spellCheck: false }) }), _jsx("div", { className: "sm:col-span-2", children: _jsx(Field, { children: _jsx(Input, { value: regex, onChange: (e) => setRegex(e.target.value), placeholder: tI18nComplete.raw('text8b21058f3253'), spellCheck: false }) }) })] })) : null] })] }) }), error ? _jsx(InfoBanner, { tone: "destructive", children: error }) : null, _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { size: "sm", onClick: submit, disabled: connect.isPending || mode.isLoading, children: [connect.isPending ? _jsx(Loading, { className: "mr-2 size-3.5 shrink-0" }) : null, tI18nComplete.raw('text72d9ee78a15c')] }) })] }));
+}
+function SlackChannelConnection({ projectId, onChanged, onRemoved, canWrite = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const install = useSlackInstall(projectId);
+    return (_jsxs("section", { className: "space-y-4", children: [_jsx(Label, { children: tI18nComplete.raw('text51b3bfca2e8c') }), _jsx("p", { className: "text-muted-foreground -mt-2 text-xs", children: tI18nComplete.raw('textff5091ba4fe1') }), _jsx("div", { className: "bg-popover rounded-md border px-4 py-3", children: install.isLoading ? (_jsx(Skeleton, { className: "h-24 w-full rounded-md" })) : install.data ? (_jsx(ConnectedSlackConnection, { projectId: projectId, installation: install.data, onRemoved: onRemoved, canWrite: canWrite })) : canWrite ? (_jsx(SlackConnectForm, { projectId: projectId, onConnected: onChanged })) : (_jsx(InfoBanner, { tone: "neutral", icon: _jsx(SlackLogo, {}), title: tI18nComplete.raw('textb36d622566f6'), children: tI18nComplete.raw('text98d27bdc2fa7') })) })] }));
+}
+function ConnectedSlackConnection({ projectId, installation, onRemoved, canWrite = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const disconnect = useDisconnectSlack();
+    const [confirming, setConfirming] = useState(false);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs(InfoBanner, { tone: "success", icon: Check, title: tI18nComplete.raw('text4fce550efde4'), children: [tI18nComplete.raw('text87bb59ba2f92'), ' ', _jsx("code", { className: "font-mono", children: installation.workspaceName || installation.workspaceId })] }), canWrite && (_jsx("div", { className: "flex items-center justify-end gap-2", children: confirming ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground mr-auto text-xs", children: tI18nComplete.raw('text73b407259d54') }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirming(false), children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { variant: "destructive", size: "sm", disabled: disconnect.isPending, onClick: () => disconnect.mutate(projectId, {
+                                onSuccess: () => {
+                                    setConfirming(false);
+                                    onRemoved();
+                                },
+                            }), children: [disconnect.isPending ? _jsx(Loading, { className: "mr-2 size-3.5 shrink-0" }) : null, tI18nComplete.raw('textacfc5be785a9')] })] })) : (_jsx(Button, { variant: "outline", size: "sm", onClick: () => setConfirming(true), children: tI18nComplete.raw('textacfc5be785a9') })) }))] }));
+}
+export function SlackConnectForm({ projectId, onConnected, customOnly = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const mode = useSlackMode(projectId);
+    const manifest = useSlackManifest(projectId);
+    const connect = useConnectSlack();
+    const [botToken, setBotToken] = useState('');
+    const [signingSecret, setSigningSecret] = useState('');
+    const [customOpen, setCustomOpen] = useState(false);
+    const [copiedManifest, setCopiedManifest] = useState(false);
+    const [error, setError] = useState(null);
+    const installUrl = mode.data?.oauth_available ? mode.data.install_url : null;
+    const showCustom = customOnly || customOpen || (!mode.isLoading && !installUrl);
+    const submit = () => {
+        setError(null);
+        connect.mutate({ projectId, bot_token: botToken.trim(), signing_secret: signingSecret.trim() }, {
+            onSuccess: onConnected,
+            onError: (e) => setError(e.message),
+        });
+    };
+    const copyManifest = async () => {
+        if (!manifest.data)
+            return;
+        try {
+            await navigator.clipboard.writeText(manifest.data);
+            setCopiedManifest(true);
+            successToast(tI18nComplete.raw('text1f1228d5e972'));
+            setTimeout(() => setCopiedManifest(false), 1500);
+        }
+        catch {
+            errorToast(tI18nComplete.raw('text1801bed8cea5'));
+        }
+    };
+    return (_jsxs("div", { className: "space-y-4", children: [!customOnly &&
+                (mode.isLoading ? (_jsx(Skeleton, { className: "h-24 w-full rounded-md" })) : installUrl ? (_jsx(InfoBanner, { tone: "info", icon: _jsx(SlackLogo, {}), title: tI18nComplete.raw('text0e671041e03f'), action: _jsx(Button, { size: "sm", className: "shrink-0 gap-1.5", asChild: true, children: _jsxs("a", { href: installUrl, children: [tI18nComplete.raw('text3357cd3d0cee'), _jsx(ChevronRight, { className: "h-4 w-4" })] }) }), children: tI18nComplete.raw('text8b3305c40176') })) : (_jsx(InfoBanner, { tone: "warning", icon: _jsx(SlackLogo, {}), title: tI18nComplete.raw('text36e7df856716'), children: tI18nComplete.raw('text51e0d22747d7') }))), _jsxs("div", { className: cn(!customOnly && 'space-y-3'), children: [!customOnly && (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 gap-1.5 px-0", onClick: () => setCustomOpen((open) => !open), children: [_jsx(ChevronDown, { className: cn('h-3.5 w-3.5 transition-transform', showCustom && 'rotate-180') }), tI18nComplete.raw('textaed3545ea8e4')] })), showCustom ? (_jsxs("div", { className: cn('space-y-5', !customOnly && 'border-border/60 bg-card rounded-md border p-4'), children: [!customOnly && (_jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "text-foreground text-base font-semibold", children: tI18nComplete.raw('text6e3fcca472c5') }), _jsx("p", { className: "text-muted-foreground text-sm", children: tI18nComplete.raw('text0881271239f3') })] })), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: cn('flex flex-col gap-3', !customOnly && 'sm:flex-row sm:items-end sm:justify-between'), children: [_jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('text8cd1f7bcdc71') }), _jsx("div", { className: "text-muted-foreground text-xs font-medium", children: tI18nComplete.raw('textcc6e921330d3') })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1.5", onClick: copyManifest, disabled: !manifest.data, children: [copiedManifest ? (_jsx(Check, { className: "h-3.5 w-3.5" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })), copiedManifest ? 'Copied' : 'Copy'] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1.5", asChild: true, children: _jsxs("a", { href: "https://api.slack.com/apps?new_app=1", target: "_blank", rel: "noreferrer", children: [tI18nComplete.raw('text4ddf02a36df5'), _jsx(ExternalLink, { className: "h-3.5 w-3.5" })] }) })] })] }), manifest.isLoading ? (_jsx(Skeleton, { className: cn('h-52 w-full', !customOnly && 'rounded-md') })) : manifest.isError ? (_jsx(InfoBanner, { tone: "destructive", children: manifest.error?.message || tI18nComplete.raw('text65a8ec4a4a48') })) : manifest.data ? (_jsx("div", { className: cn('max-h-[26rem] overflow-auto', !customOnly && 'rounded-md'), children: _jsx(CodeSnippet, { code: manifest.data, language: "json" }) })) : null, _jsx("ol", { className: "space-y-2", children: [
+                                            tI18nComplete.raw('texta89d28175307'),
+                                            tI18nComplete.raw('text690ee10ca19e'),
+                                            tI18nComplete.raw('text2cf7a6e21f7e'),
+                                        ].map((step, index) => (_jsxs("li", { className: "text-muted-foreground flex gap-2 text-xs", children: [_jsx("span", { className: "border-border/60 bg-muted/40 text-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full border text-xs font-medium", children: index + 1 }), _jsx("span", { className: "pt-0.5", children: step })] }, step))) })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('textf00ff63fb851') }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: tI18nComplete.raw('texte5974d3936df') })] }), _jsxs("div", { className: cn('grid gap-3', !customOnly && 'sm:grid-cols-2'), children: [_jsx(Field, { children: _jsx(Input, { id: "slack-channel-bot-token", name: "slack-channel-bot-token", "aria-label": tI18nComplete.raw('textc297a4c9177d'), type: "password", value: botToken, onChange: (e) => setBotToken(e.target.value), placeholder: tI18nComplete.raw('textdf964376e432'), autoComplete: "off", spellCheck: false }) }), _jsx(Field, { children: _jsx(Input, { id: "slack-channel-signing-secret", name: "slack-channel-signing-secret", "aria-label": tI18nComplete.raw('text52594f72e6fc'), type: "password", value: signingSecret, onChange: (e) => setSigningSecret(e.target.value), placeholder: tI18nComplete.raw('text52594f72e6fc'), autoComplete: "off", spellCheck: false }) })] }), error ? _jsx(InfoBanner, { tone: "destructive", children: error }) : null, _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { size: "sm", onClick: submit, disabled: connect.isPending || !botToken.trim() || !signingSecret.trim(), children: [connect.isPending ? _jsx(Loading, { className: "mr-2 size-3.5 shrink-0" }) : null, tI18nComplete.raw('text75b86fa11745')] }) })] })] })) : null] })] }));
+}
+function configToDraft(cfg) {
+    return {
+        slug: cfg.slug,
+        provider: cfg.provider,
+        platform: cfg.platform ?? undefined,
+        url: cfg.url ?? undefined,
+        transport: cfg.transport ?? undefined,
+        endpoint: cfg.endpoint ?? undefined,
+        baseUrl: cfg.baseUrl ?? undefined,
+        spec: cfg.spec ?? undefined,
+        auth: {
+            type: cfg.auth.type,
+            in: cfg.auth.in,
+            name: cfg.auth.name ?? undefined,
+            prefix: cfg.auth.prefix ?? undefined,
+        },
+        headers: cfg.headers ?? {},
+    };
+}
+function connectionSig(d) {
+    return JSON.stringify({
+        provider: d.provider,
+        platform: d.platform ?? '',
+        url: d.url ?? '',
+        transport: d.transport ?? '',
+        endpoint: d.endpoint ?? '',
+        baseUrl: d.baseUrl ?? '',
+        spec: d.spec ?? '',
+        auth: {
+            type: d.auth?.type ?? 'none',
+            in: d.auth?.in ?? 'header',
+            name: d.auth?.name ?? '',
+            prefix: d.auth?.prefix ?? '',
+        },
+        // Order matters: reordering headers IS an edit worth saving.
+        headers: Object.entries(d.headers ?? {}),
+    });
+}
+export function ConnectionSection({ projectId, connector, onChanged, canWrite = false, onSetCredential, }) {
+    const tI18nHardcoded = useTranslations('hardcodedUi');
+    const queryClient = useQueryClient();
+    const configQuery = useQuery({
+        queryKey: qk.project.connectorConfig(projectId, connector.slug),
+        queryFn: () => getConnectorConfig(projectId, connector.slug),
+        ...contract('config'),
+        enabled: canWrite,
+    });
+    const [draft, setDraft] = useState(null);
+    const [savedSig, setSavedSig] = useState('');
+    useEffect(() => {
+        if (!configQuery.data)
+            return;
+        const d = configToDraft(configQuery.data);
+        setDraft(d);
+        setSavedSig(connectionSig(d));
+    }, [configQuery.data]);
+    const dirty = !!draft && connectionSig(draft) !== savedSig;
+    const reset = () => {
+        if (configQuery.data)
+            setDraft(configToDraft(configQuery.data));
+    };
+    const save = useMutation({
+        mutationFn: () => createConnector(projectId, {
+            ...draft,
+            slug: connector.slug,
+        }),
+        onSuccess: () => {
+            successToast(tI18nHardcoded.raw('i18nComplete.text23922935b1f8'));
+            queryClient.invalidateQueries({
+                queryKey: qk.project.connectorConfig(projectId, connector.slug),
+            });
+            onChanged();
+        },
+        onError: (e) => errorToast(e.message || tI18nHardcoded.raw('i18nComplete.textf9581c8d3b47')),
+    });
+    return (_jsxs("section", { className: "space-y-4", children: [_jsx(Label, { children: tI18nHardcoded.raw('i18nComplete.text639a40e82b9a') }), _jsx("p", { className: "text-muted-foreground -mt-2 text-xs", children: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrDescriptionHowa31daf50') }), _jsx("div", { className: "bg-popover rounded-md border px-4 py-3", children: configQuery.isError ? (_jsx(InfoBanner, { tone: "destructive", title: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrTitleCouldn277b73a0'), action: _jsx(Button, { size: "sm", variant: "outline", onClick: () => configQuery.refetch(), children: tI18nHardcoded.raw('i18nComplete.text942087cc2d41') }), children: configQuery.error?.message ??
+                        tI18nHardcoded.raw('i18nComplete.text27c2ccd962c2') })) : configQuery.isLoading || !draft ? (_jsxs("div", { className: "space-y-3", children: [_jsx(Skeleton, { className: "h-9 w-full rounded-md" }), _jsx(Skeleton, { className: "h-9 w-2/3 rounded-md" }), _jsx(Skeleton, { className: "h-9 w-full rounded-md" })] })) : (_jsxs("div", { className: "space-y-4", children: [_jsx(ConnectorConfigFields, { draft: draft, onChange: setDraft, readOnly: !canWrite }), connector.authorizationStrategy === 'project' &&
+                            connector.authSecret &&
+                            onSetCredential && (_jsxs("div", { className: "border-border/60 flex flex-wrap items-center justify-between gap-3 border-t pt-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium", children: tI18nHardcoded.raw('i18nComplete.textb1c42b3ce118') }), _jsx("p", { className: "text-muted-foreground text-xs", children: connector.secretSet
+                                                ? tI18nHardcoded.raw('i18nComplete.text0b7bd1b43899')
+                                                : tI18nHardcoded.raw('i18nComplete.text44160e26b787') })] }), _jsx(Badge, { variant: connector.secretSet ? 'secondary' : 'outline', children: connector.secretSet
+                                        ? 'Connected'
+                                        : tI18nHardcoded.raw('i18nComplete.text0303e1824670') })] })), canWrite && (_jsx(SaveBar, { dirty: dirty, saving: save.isPending, disabled: !connectionValid(draft), onSave: () => save.mutate(), onReset: reset, label: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrLabelSave8c6f945f') }))] })) })] }));
+}
+export function AddAppPanel({ projectId, emailChannelEnabled, discoverEnabled, existingSlugs, onAdded, canWrite = false, }) {
+    const tI18nHardcoded = useTranslations('hardcodedUi');
+    // Self-host without Pipedream configured (KORTIX_PUBLIC_CONNECTORS_ENABLED
+    // false) — hide Easy Connect while leaving Discover/direct sources available.
+    const { connectorsEnabled } = useUiHostConfig();
+    const connectStatus = useQuery({
+        queryKey: ['connect-status'],
+        queryFn: getConnectStatus,
+        staleTime: 5 * 60_000,
+        enabled: connectorsEnabled,
+    });
+    if (!canWrite) {
+        return (_jsx("div", { className: "mx-auto w-full max-w-2xl space-y-8", children: _jsx(EmptyState, { icon: Plug, title: tI18nHardcoded.raw('i18nComplete.text51ae0a7e3783'), description: tI18nHardcoded.raw('i18nComplete.text0bf59aef2b27') }) }));
+    }
+    const easyConnectHidden = !connectorsEnabled;
+    const easyConnectDisabled = easyConnectHidden || connectStatus.data?.configured === false;
+    const easyConnectLabel = tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextEasyConnect19ca1c01');
+    const defaultTab = !easyConnectDisabled ? 'apps' : discoverEnabled ? 'discover' : 'channels';
+    return (_jsxs("div", { className: "mx-auto w-full max-w-4xl space-y-6 p-4", children: [_jsx("header", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: _jsx("h2", { className: "text-foreground text-xl font-medium", children: tI18nHardcoded.raw('i18nComplete.text3a06bf051e48') }) }), _jsxs(Tabs, { defaultValue: defaultTab, children: [_jsxs(TabsList, { type: "underline", children: [easyConnectHidden ? null : easyConnectDisabled ? (_jsx(Hint, { label: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextEasyConnectc07266e0'), children: _jsx(TabsTrigger, { value: "apps", disabled: true, children: easyConnectLabel }) })) : (_jsx(TabsTrigger, { value: "apps", children: easyConnectLabel })), discoverEnabled && (_jsx(TabsTrigger, { value: "discover", children: tI18nHardcoded.raw('i18nComplete.textd4a33d5b78bc') })), _jsx(TabsTrigger, { value: "channels", children: tI18nHardcoded.raw('i18nComplete.text4c8906cf76f5') }), _jsx(TabsTrigger, { value: "custom", children: tI18nHardcoded.raw('i18nComplete.text494ca78f7374') })] }), !easyConnectDisabled && (_jsx(TabsContent, { value: "apps", className: "mt-4", children: _jsx(AppCatalogue, { projectId: projectId, existingSlugs: existingSlugs, onAdded: onAdded }) })), discoverEnabled && (_jsx(TabsContent, { value: "discover", className: "mt-4", children: _jsx(DiscoverCatalogue, { projectId: projectId, existingSlugs: existingSlugs, onAdded: onAdded }) })), _jsx(TabsContent, { value: "channels", className: "mt-4", children: _jsx(ChannelCatalogue, { projectId: projectId, emailChannelEnabled: emailChannelEnabled, onAdded: onAdded }) }), _jsx(TabsContent, { value: "custom", className: "mt-4", children: _jsx(CustomConnectorForm, { projectId: projectId, emailChannelEnabled: emailChannelEnabled, onAdded: onAdded }) })] })] }));
+}
+function ChannelCatalogue({ projectId, emailChannelEnabled, onAdded, }) {
+    return (_jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [emailChannelEnabled && _jsx(AddEmailConnectionCard, { projectId: projectId, onAdded: onAdded }), _jsx(AddSlackConnectionCard, { projectId: projectId, onAdded: onAdded })] }));
+}
+/**
+ * The real Slack logo — the single Slack mark used everywhere across the
+ * connectors + channels surface (catalogue cards, channel cards, connect flow),
+ * so Slack always reads as Slack and never as a generic glyph. Sized by
+ * `className`; defaults to `size-4`. It is the built-in four-color `Slack`
+ * icon: this used to fetch Slack's favicon from Google on every view, a blank
+ * tile on an install without internet.
+ */
+export function SlackLogo({ className }) {
+    return _jsx(Slack, { className: cn('size-4 shrink-0', className) });
+}
+function SlackIconTile() {
+    return (_jsx("span", { className: "border-border/60 bg-card relative flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-sm border", children: _jsx(SlackLogo, { className: "size-3.5" }) }));
+}
+const CHANNEL_CATALOGUE_CARD_CLASS = 'group bg-popover hover:bg-muted/80 focus-visible:ring-primary/50 flex flex-col rounded-md border p-3.5 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none';
+function AddEmailConnectionCard({ projectId, onAdded, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [open, setOpen] = useState(false);
+    const [name, setName] = useState('Email inbox');
+    const [username, setUsername] = useState('');
+    const add = useMutation({
+        mutationFn: async () => {
+            const slug = buildEmailConnectorConnectionSlug(username || name, randomUUID());
+            const result = await createConnector(projectId, createOnlyConnectorDraft({
+                slug,
+                name: name.trim() || 'Email inbox',
+                provider: 'channel',
+                platform: 'email',
+                credential: 'shared',
+            }));
+            return { slug, syncError: connectorSyncErrorForSlug(result, slug) };
+        },
+        onSuccess: ({ slug, syncError }) => {
+            setOpen(false);
+            if (syncError) {
+                warningToast(tI18nComplete('text4e12058e58c1', { value0: syncError }));
+                onAdded();
+                return;
+            }
+            successToast(tI18nComplete.raw('textd1dcd7a7bbec'));
+            onAdded(slug);
+        },
+        onError: (err) => errorToast(err.message || tI18nComplete.raw('text3df88e8f7ea6')),
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => setOpen(true), className: CHANNEL_CATALOGUE_CARD_CLASS, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(EntityAvatar, { icon: Mail, size: "sm" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-foreground truncate text-sm font-medium", children: tI18nComplete.raw('textf00606184e4d') }), _jsx("div", { className: "text-muted-foreground truncate text-xs", children: tI18nComplete.raw('text2283269ca150') })] })] }), _jsx("p", { className: "text-muted-foreground mt-2 line-clamp-2 min-h-[2rem] text-xs leading-relaxed", children: tI18nComplete.raw('text3b61c181f516') })] }), _jsx(Modal, { open: open, onOpenChange: (next) => !add.isPending && setOpen(next), children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text2b47dcc33a2a') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text630694bd2dec') })] }), _jsxs(ModalBody, { className: "max-h-[60vh] space-y-4 overflow-y-auto", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "email-connection-name", children: tI18nComplete.raw('text2b7f6a84de91') }), _jsx(Input, { id: "email-connection-name", name: "email-connection-name", value: name, onChange: (e) => setName(e.target.value), placeholder: tI18nComplete.raw('text945ce03ec79f') })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "email-connection-prefix", children: tI18nComplete.raw('text4e6946711ca8') }), _jsx(Input, { id: "email-connection-prefix", name: "email-connection-prefix", value: username, onChange: (e) => setUsername(e.target.value.toLowerCase().replace(/[^a-z0-9._-]/g, '')), placeholder: tI18nComplete.raw('texta18603086e5b'), autoComplete: "off", spellCheck: false }), _jsx("p", { className: "text-muted-foreground text-xs", children: tI18nComplete.raw('text2549e14d07c9') })] })] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { variant: "outline-ghost", onClick: () => setOpen(false), disabled: add.isPending, children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { onClick: () => add.mutate(), disabled: add.isPending, className: "gap-1.5", children: [add.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text8dff8c0800fd')] })] })] }) })] }));
+}
+function AddSlackConnectionCard({ projectId, onAdded, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [open, setOpen] = useState(false);
+    const handleConnected = () => {
+        successToast(tI18nComplete.raw('text1bfa15228ca8'));
+        setOpen(false);
+        onAdded('kortix_slack');
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => setOpen(true), className: CHANNEL_CATALOGUE_CARD_CLASS, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(SlackIconTile, {}), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-foreground truncate text-sm font-medium", children: tI18nComplete.raw('textb27fb38ba323') }), _jsx("div", { className: "text-muted-foreground truncate text-xs", children: tI18nComplete.raw('textbbbf43b8819c') })] })] }), _jsx("p", { className: "text-muted-foreground mt-2 line-clamp-2 min-h-[2rem] text-xs leading-relaxed", children: tI18nComplete.raw('text43b4b568012f') })] }), _jsx(Modal, { open: open, onOpenChange: setOpen, children: _jsxs(ModalContent, { className: "lg:max-w-2xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text62da6a2b1758') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text8b5b9b72f2ec') })] }), _jsx(ModalBody, { className: "max-h-[60vh] overflow-y-auto", children: _jsx(SlackConnectForm, { projectId: projectId, onConnected: handleConnected }) })] }) })] }));
+}
+/** Easy-connect app catalogue — searchable card grid with "Load more". */
+function AppCatalogue({ projectId, existingSlugs, onAdded, }) {
+    const tI18nHardcoded = useTranslations('hardcodedUi');
+    const [q, setQ] = useState('');
+    const [selectedApp, setSelectedApp] = useState(null);
+    const appsQuery = useInfiniteQuery({
+        queryKey: ['easy-connect-apps', projectId, q],
+        queryFn: ({ pageParam }) => listPipedreamApps(projectId, q || undefined, pageParam),
+        initialPageParam: undefined,
+        getNextPageParam: (last) => (last.hasMore ? last.nextCursor : undefined),
+        staleTime: 60_000,
+    });
+    const apps = (appsQuery.data?.pages ?? []).flatMap((p) => p.apps);
+    const visibleApps = apps.filter((app) => !BUILT_IN_CHANNEL_APP_SLUGS.has(app.slug));
+    const notConfigured = appsQuery.isError && /501|not configured/i.test(appsQuery.error?.message ?? '');
+    const addApp = useMutation({
+        mutationFn: async (connector) => {
+            if (!selectedApp)
+                throw new Error('Select an app');
+            const draft = buildEasyConnectConnectorDraft(selectedApp, connector);
+            const result = await createConnector(projectId, draft);
+            return {
+                name: draft.name ?? selectedApp.name,
+                slug: draft.slug,
+                syncError: connectorSyncErrorForSlug(result, draft.slug),
+            };
+        },
+        onSuccess: (connector) => {
+            setSelectedApp(null);
+            if (connector.syncError) {
+                warningToast(tI18nHardcoded('i18nComplete.textd6a135de3872', {
+                    value0: connector.name,
+                    value1: connector.syncError,
+                }));
+                onAdded();
+                return;
+            }
+            successToast(tI18nHardcoded('i18nComplete.text590d36262e11', { value0: connector.name }));
+            onAdded(connector.slug);
+        },
+        onError: (err) => errorToast(err.message || tI18nHardcoded.raw('i18nComplete.texta34a2714da91')),
+    });
+    return (_jsxs("div", { children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" }), _jsx(Input, { value: q, onChange: (e) => setQ(e.target.value), placeholder: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrPlaceholderSearch9d26aaaa'), variant: "popover", className: "pl-9" })] }), _jsx("div", { className: "overflow-y-auto py-4", children: notConfigured ? (_jsx(InfoBanner, { tone: "neutral", title: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrTitleEasy58e9c7b1'), children: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextEasyConnectc07266e0') })) : appsQuery.isLoading ? (_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: 12 }).map((_, i) => (_jsx(Skeleton, { className: "h-[104px] w-full rounded-md" }, i))) })) : visibleApps.length === 0 ? (_jsx(EmptyState, { icon: Search, title: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrTitleNof8067eda'), description: q
+                        ? tI18nHardcoded('i18nComplete.text3e71adfa7d54', { value0: q })
+                        : tI18nHardcoded.raw('i18nComplete.textecbd276ebec2') })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4", children: visibleApps.map((app) => (_jsxs("button", { type: "button", disabled: addApp.isPending, onClick: () => setSelectedApp(app), className: "group bg-popover hover:bg-muted/80 focus-visible:ring-primary/50 flex flex-col rounded-md border p-3.5 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60", children: [_jsxs("div", { className: "flex items-center gap-3", children: [app.imgSrc ? (_jsx(Image, { src: app.imgSrc, alt: "", width: 36, height: 36, className: "size-8 shrink-0 rounded-md object-contain", referrerPolicy: "no-referrer", unoptimized: true })) : (_jsx(EntityAvatar, { icon: Zap, size: "sm" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-foreground truncate text-sm font-medium", children: app.name }), app.categories?.[0] && (_jsx("div", { className: "text-muted-foreground truncate text-xs", children: app.categories[0] }))] }), _jsx(Plus, { className: "text-muted-foreground group-hover:text-primary size-4 shrink-0 transition-colors" })] }), _jsx("p", { className: "text-muted-foreground mt-2 line-clamp-2 min-h-[2rem] text-xs leading-relaxed", children: app.description ?? ' ' })] }, app.slug))) }), appsQuery.hasNextPage && (_jsx("div", { className: "flex justify-center pt-5", children: _jsx(Button, { variant: "outline", size: "sm", onClick: () => appsQuery.fetchNextPage(), disabled: appsQuery.isFetchingNextPage, className: "h-9 px-8", children: appsQuery.isFetchingNextPage ? (_jsxs(_Fragment, { children: [_jsx(Loading, { className: "size-4 shrink-0" }), tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextLoading7131cc18')] })) : (tI18nHardcoded.raw('i18nComplete.textac8991ef0101')) }) }))] })) }), _jsx(ConnectorConnectionModal, { open: selectedApp !== null, idPrefix: "easy-connect-connector", title: `Add ${selectedApp?.name ?? 'app'}`, description: tI18nHardcoded.raw('i18nComplete.text6acbef3d00c7'), initialName: selectedApp?.name ?? '', initialSlug: selectedApp ? proposeConnectorConnectionSlug(selectedApp.name, existingSlugs) : '', existingSlugs: existingSlugs, pending: addApp.isPending, onOpenChange: (open) => !open && setSelectedApp(null), onSubmit: (connector) => addApp.mutate(connector) })] }));
+}
+/**
+ * Slugify the source document's own name — OpenAPI `info.title`, Postman
+ * `info.name` — so adding a spec proposes the slug the API calls itself
+ * ("Kortix WhatsApp Gateway" → `kortix-whatsapp-gateway`). Derived from the
+ * document rather than its URL: a hostname is a guess, a title is a statement.
+ */
+function slugFromTitle(title) {
+    return (title ?? '')
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .slice(0, 64)
+        .replace(/-+$/g, '');
+}
+/**
+ * Postman-style static header table. Any header, any value, sent on every call
+ * this connector makes. Kept as ordered rows (not an object) while editing so a
+ * half-typed or duplicate name doesn't silently drop a row out from under the
+ * user — the object is only rebuilt on the way out.
+ */
+function HeadersEditor({ value, onChange, readOnly, authHeaderName, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [rows, setRows] = useState(() => Object.entries(value));
+    // Re-seed only when the saved value genuinely differs from what we're showing,
+    // so a refetch can't wipe a row the user is mid-way through typing.
+    const [initialSeed] = useState(() => JSON.stringify(Object.entries(value)));
+    const seeded = useRef(initialSeed);
+    useEffect(() => {
+        const incoming = JSON.stringify(Object.entries(value));
+        if (incoming !== seeded.current && incoming !== JSON.stringify(rows)) {
+            seeded.current = incoming;
+            setRows(Object.entries(value));
+        }
+    }, [value, rows]);
+    const commit = (next) => {
+        setRows(next);
+        const out = {};
+        for (const [k, v] of next) {
+            const name = k.trim();
+            if (name)
+                out[name] = v;
+        }
+        seeded.current = JSON.stringify(Object.entries(out));
+        onChange(out);
+    };
+    const nameError = (name, index) => {
+        const trimmed = name.trim();
+        if (!trimmed)
+            return null;
+        if (!/^[A-Za-z0-9!#$%&'*+.^_`|~-]+$/.test(trimmed))
+            return 'Not a valid header name';
+        if (trimmed.length > 128)
+            return 'Too long (max 128)';
+        if (authHeaderName && trimmed.toLowerCase() === authHeaderName.toLowerCase()) {
+            return 'Reserved for the credential — the auth header always wins';
+        }
+        const dupe = rows.some(([other], i) => i !== index && other.trim().toLowerCase() === trimmed.toLowerCase());
+        return dupe ? 'Duplicate header name' : null;
+    };
+    return (_jsxs(Field, { children: [_jsx(FieldLabel, { children: tI18nComplete.raw('text194e9fe656a1') }), _jsxs("div", { className: "space-y-2", children: [rows.map(([name, val], i) => {
+                        const err = nameError(name, i);
+                        return (
+                        // Rows are positional and freely reorderable, so the index IS the identity.
+                        // biome-ignore lint/suspicious/noArrayIndexKey: positional rows
+                        _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: name, onChange: (e) => commit(rows.map((r, j) => (j === i ? [e.target.value, r[1]] : r))), placeholder: tI18nComplete.raw('text1447557b9c1e'), className: "font-mono text-xs", variant: "popover", disabled: readOnly, "aria-invalid": !!err }), _jsx(Input, { value: val, onChange: (e) => commit(rows.map((r, j) => (j === i ? [r[0], e.target.value] : r))), placeholder: tI18nComplete.raw('text822b33ad87c1'), className: "font-mono text-xs", variant: "popover", disabled: readOnly }), !readOnly && (_jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "shrink-0", "aria-label": tI18nComplete.raw('texte42db5eb1789'), onClick: () => commit(rows.filter((_, j) => j !== i)), children: _jsx(X, { className: "size-4" }) }))] }), err && _jsx("p", { className: "text-destructive text-xs", children: err })] }, i));
+                    }), !readOnly && rows.length < 32 && (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "gap-1.5", onClick: () => setRows([...rows, ['', '']]), children: [_jsx(Plus, { className: "size-3.5" }), " ", tI18nComplete.raw('text1192c90dd497')] }))] }), _jsx(FieldDescription, { children: tI18nComplete.raw('text3ca228539c82') })] }));
+}
+function ConnectorConfigFields({ draft, onChange, slugEditable, emailChannelEnabled = true, readOnly = false, detectedAuth = null, detectedTitle = null, oauth2Selected = false, onOAuth2SelectedChange, }) {
+    const tI18nHardcoded = useTranslations('hardcodedUi');
+    // Once the slug is typed in by hand, never overwrite it from the source again.
+    const slugTouched = useRef(false);
+    // An MCP server answers 401 before it names itself: fall back to the
+    // URL's domain (`https://api.acme.ai/mcp` → `acme`).
+    const sourceUrl = draft.url ?? draft.endpoint ?? draft.baseUrl ?? draft.spec ?? '';
+    const suggestedSlug = slugFromTitle(detectedTitle) || (sourceUrl ? (mcpServerIdentity(sourceUrl, [])?.slug ?? '') : '');
+    useEffect(() => {
+        // Follows the source until the user types a slug. Editing an existing
+        // connector (slugEditable false) is never touched.
+        if (!slugEditable || readOnly || slugTouched.current)
+            return;
+        if (!suggestedSlug || draft.slug === suggestedSlug)
+            return;
+        onChange({ ...draft, slug: suggestedSlug });
+    }, [suggestedSlug, slugEditable, readOnly, draft, onChange]);
+    const set = (patch) => onChange({ ...draft, ...patch });
+    const setAuth = (patch) => onChange({ ...draft, auth: { ...draft.auth, ...patch } });
+    const p = draft.provider;
+    const needsAuth = p !== 'pipedream' && p !== 'channel' && p !== 'computer';
+    return (_jsxs(FieldGroup, { className: "gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-slug", children: tI18nHardcoded.raw('i18nComplete.textd15387ecc6c5') }), _jsx(Input, { id: "connector-slug", value: draft.slug, onChange: (e) => {
+                                    slugTouched.current = true;
+                                    set({ slug: e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, '-') });
+                                }, placeholder: tI18nHardcoded.raw('i18nComplete.text9696f2b4e020'), className: "font-mono text-xs", variant: "popover", disabled: !slugEditable || readOnly, required: true })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-provider", children: tI18nHardcoded.raw('i18nComplete.text472590ae974d') }), _jsxs(Select, { value: p, disabled: readOnly, onValueChange: (v) => {
+                                    const provider = v;
+                                    set({
+                                        provider,
+                                        platform: provider === 'channel'
+                                            ? draft.platform === 'email' && !emailChannelEnabled
+                                                ? 'slack'
+                                                : (draft.platform ?? (emailChannelEnabled ? 'email' : 'slack'))
+                                            : undefined,
+                                        auth: provider === 'channel'
+                                            ? { type: 'none' }
+                                            : p === 'channel'
+                                                ? undefined
+                                                : draft.auth,
+                                    });
+                                }, children: [_jsx(SelectTrigger, { id: "connector-provider", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "openapi", children: tI18nHardcoded.raw('i18nComplete.textcf2c9e218033') }), _jsx(SelectItem, { value: "postman", children: tI18nHardcoded.raw('i18nComplete.text213985e12832') }), _jsx(SelectItem, { value: "graphql", children: tI18nHardcoded.raw('i18nComplete.textee27322554e4') }), _jsx(SelectItem, { value: "mcp", children: "MCP" }), _jsx(SelectItem, { value: "http", children: "HTTP" }), _jsx(SelectItem, { value: "channel", children: tI18nHardcoded.raw('i18nComplete.textce4683e7013a') })] })] })] })] }), p === 'channel' && (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: tI18nHardcoded.raw('i18nComplete.textce4683e7013a') }), _jsxs(Select, { value: draft.platform === 'email' && !emailChannelEnabled
+                            ? 'slack'
+                            : (draft.platform ?? (emailChannelEnabled ? 'email' : 'slack')), disabled: readOnly, onValueChange: (v) => set({ platform: v, auth: { type: 'none' } }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [emailChannelEnabled && (_jsx(SelectItem, { value: "email", children: tI18nHardcoded.raw('i18nComplete.text969ccbd3cf63') })), _jsx(SelectItem, { value: "slack", children: tI18nHardcoded.raw('i18nComplete.textb27fb38ba323') })] })] })] })), (p === 'openapi' || p === 'postman') && (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-spec", children: p === 'postman'
+                            ? tI18nHardcoded.raw('i18nComplete.textcd8dd219cc48')
+                            : tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrLabelSpec4235864d') }), _jsx(Input, { id: "connector-spec", value: draft.spec ?? '', onChange: (e) => set({ spec: e.target.value }), placeholder: p === 'postman' ? 'https://github.com/… or collection.json' : 'https://…/openapi.json', variant: "popover", disabled: readOnly, required: true }), p === 'postman' ? (_jsx(FieldDescription, { children: tI18nHardcoded.raw('i18nComplete.textc26ca4369200') })) : null] })), p === 'graphql' && (_jsxs(_Fragment, { children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-endpoint", children: tI18nHardcoded.raw('i18nComplete.text3df9726c68ba') }), _jsx(Input, { id: "connector-endpoint", value: draft.endpoint ?? '', onChange: (e) => set({ endpoint: e.target.value }), placeholder: "https://api/graphql", variant: "popover", disabled: readOnly, required: true })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-sdl", children: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrLabelSDL2325b707') }), _jsx(Input, { id: "connector-sdl", value: draft.spec ?? '', onChange: (e) => set({ spec: e.target.value }), placeholder: tI18nHardcoded.raw('i18nComplete.textecccd43d1878'), variant: "popover", disabled: readOnly })] })] })), p === 'mcp' && (_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-url", children: "URL" }), _jsx(Input, { id: "connector-url", value: draft.url ?? '', onChange: (e) => set({ url: e.target.value }), placeholder: "https://mcp\u2026/mcp", variant: "popover", disabled: readOnly, required: true })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-transport", children: tI18nHardcoded.raw('i18nComplete.textaaead4abf5d0') }), _jsxs(Select, { value: draft.transport ?? 'http', disabled: readOnly, onValueChange: (v) => set({ transport: v }), children: [_jsx(SelectTrigger, { id: "connector-transport", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "http", children: tI18nHardcoded.raw('i18nComplete.texte0603c499aae') }), _jsx(SelectItem, { value: "sse", children: tI18nHardcoded.raw('i18nComplete.textfe3811fe21af') })] })] })] })] })), p === 'http' && (_jsxs(_Fragment, { children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-base-url", children: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrLabelBase744ecef9') }), _jsx(Input, { id: "connector-base-url", value: draft.baseUrl ?? '', onChange: (e) => set({ baseUrl: e.target.value }), placeholder: "https://api.internal", variant: "popover", disabled: readOnly, required: true })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-routes", children: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxAttrLabelRoutes38b14436') }), _jsx(Input, { id: "connector-routes", value: draft.spec ?? '', onChange: (e) => set({ spec: e.target.value }), placeholder: tI18nHardcoded.raw('i18nComplete.textb2c293b68745'), variant: "popover", disabled: readOnly })] })] })), needsAuth && (_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-auth", children: tI18nHardcoded.raw('i18nComplete.text8eb3ea9bbde6') }), _jsxs(Select, { value: oauth2Selected ? 'oauth2_client_credentials' : (draft.auth?.type ?? 'auto'), disabled: readOnly, onValueChange: (v) => {
+                                    if (v === 'oauth2_client_credentials') {
+                                        onOAuth2SelectedChange?.(true);
+                                        set({ auth: { type: 'bearer' } });
+                                        return;
+                                    }
+                                    onOAuth2SelectedChange?.(false);
+                                    if (v === 'auto')
+                                        set({ auth: undefined });
+                                    else
+                                        setAuth({ type: v });
+                                }, children: [_jsx(SelectTrigger, { id: "connector-auth", className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "auto", children: tI18nHardcoded.raw('i18nComplete.text89ebfb7a88ca') }), _jsx(SelectItem, { value: "none", children: tI18nHardcoded.raw('i18nComplete.textdc937b598926') }), _jsx(SelectItem, { value: "bearer", children: tI18nHardcoded.raw('i18nComplete.text710e0dbdd422') }), _jsx(SelectItem, { value: "basic", children: tI18nHardcoded.raw('i18nComplete.text0e35f6e9742e') }), _jsx(SelectItem, { value: "api_key", children: tI18nHardcoded.raw('i18nComplete.text16f0ee47f993') }), onOAuth2SelectedChange && (_jsx(SelectItem, { value: "oauth2_client_credentials", children: tI18nHardcoded.raw('i18nComplete.textaebabad39063') })), _jsx(SelectItem, { value: "oauth1", children: tI18nHardcoded.raw('i18nComplete.textf461c90d16f6') }), _jsx(SelectItem, { value: "hmac", children: tI18nHardcoded.raw('i18nComplete.textf9a4ecea0836') }), _jsx(SelectItem, { value: "aws_sigv4", children: tI18nHardcoded.raw('i18nComplete.text1746a52157af') }), _jsx(SelectItem, { value: "mtls", children: tI18nHardcoded.raw('i18nComplete.textd0dd76e23558') }), _jsx(SelectItem, { value: "custom", children: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextCustomHeader1e0e82ed') })] })] }), _jsx(FieldDescription, { children: oauth2Selected ? (tI18nHardcoded.raw('i18nComplete.text80770d26537b')) : draft.auth === undefined && detectedAuth ? (_jsxs(_Fragment, { children: [tI18nHardcoded.raw('i18nComplete.text756a8ba97dce'), ' ', _jsx("span", { className: "font-medium", children: detectedAuth.type }), detectedAuth.parameterName ? (_jsxs(_Fragment, { children: [' ', tI18nHardcoded.raw('i18nComplete.text4d327af41f96'), ' ', _jsx("code", { className: "bg-muted rounded-sm px-1 py-0.5 font-mono text-xs", children: detectedAuth.parameterName })] })) : null, tI18nHardcoded.raw('i18nComplete.text5c48a6568d59')] })) : (tI18nHardcoded.raw('i18nComplete.text566a18d73a39')) })] }), draft.auth === undefined && detectedAuth?.parameterName && (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-auth-detected", children: tI18nHardcoded.raw('i18nComplete.textc1dcc8fb31f6') }), _jsx(Input, { id: "connector-auth-detected", value: detectedAuth.parameterName, readOnly: true, variant: "popover", className: "font-mono text-xs" }), _jsx(FieldDescription, { children: tI18nHardcoded.raw('i18nComplete.text46c6aec94116') })] })), (draft.auth?.type === 'custom' || draft.auth?.type === 'api_key') && (_jsxs(_Fragment, { children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-auth-name", children: tI18nHardcoded.raw('i18nComplete.textd7cb455aa690') }), _jsx(Input, { id: "connector-auth-name", value: draft.auth?.name ?? '', onChange: (e) => setAuth({ name: e.target.value }), placeholder: tI18nHardcoded.raw('i18nComplete.text6f9f03f95e78'), variant: "popover", disabled: readOnly, required: true })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-auth-placement", children: tI18nHardcoded.raw('i18nComplete.text4df9939944a7') }), _jsxs(Select, { value: draft.auth?.in ?? 'header', disabled: readOnly, onValueChange: (placement) => setAuth({ in: placement }), children: [_jsx(SelectTrigger, { id: "connector-auth-placement", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "header", children: tI18nHardcoded.raw('i18nComplete.textba5caa4285a8') }), _jsx(SelectItem, { value: "query", children: tI18nHardcoded.raw('i18nComplete.textb80a37564fbb') }), _jsx(SelectItem, { value: "cookie", children: tI18nHardcoded.raw('i18nComplete.text45823eaac0c8') })] })] })] })] }))] })), needsAuth && (_jsx(HeadersEditor, { value: draft.headers ?? {}, onChange: (headers) => set({ headers }), readOnly: readOnly, authHeaderName: draft.auth?.type === 'custom' ? draft.auth?.name : detectedAuth?.parameterName }))] }));
+}
+function connectionValid(d, emailChannelEnabled = true) {
+    if ((d.auth?.type === 'custom' || d.auth?.type === 'api_key') && !d.auth.name?.trim()) {
+        return false;
+    }
+    if (d.provider === 'mcp')
+        return !!d.url?.trim();
+    if (d.provider === 'openapi')
+        return !!d.spec?.trim();
+    if (d.provider === 'postman')
+        return !!d.spec?.trim();
+    if (d.provider === 'graphql')
+        return !!d.endpoint?.trim();
+    if (d.provider === 'http')
+        return !!d.baseUrl?.trim();
+    if (d.provider === 'channel') {
+        return d.platform === 'slack' || (emailChannelEnabled && d.platform === 'email');
+    }
+    return true;
+}
+export function CustomConnectorForm({ projectId, emailChannelEnabled, onAdded, }) {
+    const tI18nHardcoded = useTranslations('hardcodedUi');
+    const [draft, setDraft] = useState({
+        slug: '',
+        provider: 'openapi',
+    });
+    const [oauth2Selected, setOauth2Selected] = useState(false);
+    const [oauth2, setOauth2] = useState(EMPTY_OAUTH2_CREDENTIAL_FORM);
+    const [discoveryDraft, setDiscoveryDraft] = useState(draft);
+    useEffect(() => {
+        const timer = window.setTimeout(() => setDiscoveryDraft(draft), 400);
+        return () => window.clearTimeout(timer);
+    }, [draft]);
+    useEffect(() => {
+        if (!emailChannelEnabled && draft.provider === 'channel' && draft.platform === 'email') {
+            setDraft((current) => ({ ...current, platform: 'slack' }));
+        }
+    }, [draft.platform, draft.provider, emailChannelEnabled]);
+    useEffect(() => {
+        // Channel connectors have no OAuth2-at-creation offer.
+        if (draft.provider === 'channel' && oauth2Selected) {
+            setOauth2Selected(false);
+        }
+    }, [draft.provider, oauth2Selected]);
+    const save = useCreateCustomConnector(projectId, onAdded);
+    const discovery = useQuery({
+        queryKey: ['connector-auth-discovery', projectId, discoveryDraft],
+        queryFn: () => discoverConnectorAuth(projectId, discoveryDraft),
+        enabled: discoveryDraft.auth === undefined &&
+            connectionValid(discoveryDraft, emailChannelEnabled) &&
+            discoveryDraft.provider !== 'channel' &&
+            discoveryDraft.provider !== 'pipedream' &&
+            discoveryDraft.provider !== 'computer',
+        retry: false,
+    });
+    const authActive = !!draft.auth?.type && draft.auth.type !== 'none';
+    return (_jsx("section", { className: "space-y-4", children: _jsx("form", { onSubmit: (e) => {
+                e.preventDefault();
+                if (oauth2Selected && !oauth2CredentialFormValid(oauth2))
+                    return;
+                save.mutate({ draft, oauth2: oauth2Selected ? oauth2 : null });
+            }, children: _jsxs("div", { className: "space-y-5", children: [_jsx(ConnectorConfigFields, { draft: draft, onChange: setDraft, slugEditable: true, emailChannelEnabled: emailChannelEnabled, detectedAuth: discovery.data?.recommended
+                            ? {
+                                type: discovery.data.recommended.type,
+                                parameterName: discovery.data.candidates[0]?.parameterName ?? null,
+                            }
+                            : null, detectedTitle: discovery.data?.title ?? null, oauth2Selected: oauth2Selected, onOAuth2SelectedChange: setOauth2Selected }), oauth2Selected && (_jsxs("div", { className: "space-y-4", children: [_jsx(InfoBanner, { tone: "info", title: tI18nHardcoded.raw('i18nComplete.textc2a08c85f9d8'), children: tI18nHardcoded.raw('i18nComplete.text9dedee588b5e') }), _jsx(OAuth2CredentialFields, { value: oauth2, onChange: setOauth2, idPrefix: "new-connector-oauth2" })] })), draft.auth === undefined && discovery.isFetching && (_jsx(InfoBanner, { tone: "info", children: tI18nHardcoded.raw('i18nComplete.text0fc5f970755c') })), draft.auth === undefined && discovery.data?.status === 'none' && (_jsx(InfoBanner, { tone: "neutral", children: tI18nHardcoded.raw('i18nComplete.textcec52b040075') })), draft.auth === undefined && discovery.data?.status === 'unsupported' && (_jsx(InfoBanner, { tone: "warning", children: tI18nHardcoded.raw('i18nComplete.text028f0773776c') })), draft.auth === undefined && discovery.error && (_jsxs(InfoBanner, { tone: "warning", children: [tI18nHardcoded.raw('i18nComplete.textf26a5845c994'), ' ', discovery.error.message] })), authActive && !oauth2Selected && (_jsx(InfoBanner, { tone: "info", children: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextYouLle5def626') })), _jsx("div", { className: "border-border/60 flex justify-end border-t pt-5", children: _jsxs(Button, { type: "submit", size: "sm", disabled: !draft.slug ||
+                                save.isPending ||
+                                !connectionValid(draft, emailChannelEnabled) ||
+                                (oauth2Selected && !oauth2CredentialFormValid(oauth2)), className: "gap-1.5", children: [save.isPending && _jsx(Loading, { className: "size-4 shrink-0" }), tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextAddConnectore01e22fc')] }) })] }) }) }));
+}
+export function SetCredentialModal({ projectId, connector, connectionId, owner, open, onOpenChange, onSaved, shell = 'modal', }) {
+    const tI18nHardcoded = useTranslations('hardcodedUi');
+    /**
+     * `null` until the user picks a tab. The effective tab is then derived from
+     * discovery, so a server that supports one-click OAuth opens on OAuth and a
+     * plain API needs no detour through a grant selector.
+     */
+    const [credentialTypeChoice, setCredentialTypeChoice] = useState(null);
+    const [value, setValue] = useState('');
+    const [oauth2, setOauth2] = useState(EMPTY_OAUTH2_CREDENTIAL_FORM);
+    const [application, setApplication] = useState(EMPTY_OAUTH2_APPLICATION_FORM);
+    const configQuery = useQuery({
+        queryKey: qk.project.connectorConfig(projectId, connector?.slug ?? ''),
+        queryFn: () => getConnectorConfig(projectId, connector.slug),
+        enabled: open && Boolean(connector) && owner === 'project',
+        ...contract('config'),
+    });
+    const requestAuth = owner === 'me' ? connector?.requestAuthType : configQuery.data?.auth.type;
+    const objectCredential = ['oauth1', 'hmac', 'aws_sigv4', 'mtls'].includes(requestAuth ?? '');
+    const credentialExample = requestAuth === 'oauth1'
+        ? '{"consumer_key":"","consumer_secret":"","token":"","token_secret":""}'
+        : requestAuth === 'hmac'
+            ? '{"secret":"","key_id":""}'
+            : requestAuth === 'aws_sigv4'
+                ? '{"access_key_id":"","secret_access_key":"","region":"","service":"","session_token":""}'
+                : requestAuth === 'mtls'
+                    ? '{"certificate":"-----BEGIN CERTIFICATE-----\\n...","private_key":"-----BEGIN PRIVATE KEY-----\\n...","ca":""}'
+                    : '••••••••';
+    const staticValid = (() => {
+        if (!value)
+            return false;
+        if (!objectCredential)
+            return true;
+        try {
+            const parsed = JSON.parse(value);
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
+                return false;
+            const hasStrings = (...keys) => keys.every((key) => typeof parsed[key] === 'string' && Boolean(parsed[key]));
+            if (requestAuth === 'oauth1') {
+                return hasStrings('consumer_key', 'consumer_secret', 'token', 'token_secret');
+            }
+            if (requestAuth === 'hmac')
+                return hasStrings('secret');
+            if (requestAuth === 'aws_sigv4') {
+                return hasStrings('access_key_id', 'secret_access_key', 'region', 'service');
+            }
+            if (requestAuth === 'mtls')
+                return hasStrings('certificate', 'private_key');
+            return false;
+        }
+        catch {
+            return false;
+        }
+    })();
+    const [device, setDevice] = useState(null);
+    const [deviceConnectionId, setDeviceConnectionId] = useState(null);
+    const [manualSetup, setManualSetup] = useState(false);
+    useEffect(() => {
+        if (!device || !deviceConnectionId)
+            return;
+        let stopped = false;
+        const poll = async () => {
+            try {
+                const status = await pollConnectionOAuth2DeviceAuthorization(projectId, deviceConnectionId, device.session_id);
+                if (stopped || status.status === 'pending')
+                    return;
+                stopped = true;
+                if (status.status === 'active') {
+                    successToast(tI18nHardcoded.raw('i18nComplete.textc2a5f8398f12'));
+                    onSaved();
+                    onOpenChange(false);
+                }
+                else {
+                    errorToast(status.error_code || tI18nHardcoded.raw('i18nComplete.text911a1cde90bc'));
+                }
+            }
+            catch (error) {
+                if (!stopped)
+                    errorToast(error instanceof Error
+                        ? error.message
+                        : tI18nHardcoded.raw('i18nComplete.textfa23c868781d'));
+            }
+        };
+        void poll();
+        const timer = window.setInterval(() => void poll(), device.interval_seconds * 1000);
+        const expiryTimer = window.setTimeout(() => {
+            stopped = true;
+            errorToast(tI18nHardcoded.raw('i18nComplete.text02c1d7b545ea'));
+        }, Math.max(0, new Date(device.expires_at).getTime() - Date.now()));
+        return () => {
+            stopped = true;
+            window.clearInterval(timer);
+            window.clearTimeout(expiryTimer);
+        };
+    }, [device, deviceConnectionId, onOpenChange, onSaved, projectId, tI18nHardcoded]);
+    const resolveConnectionId = async () => {
+        if (connectionId)
+            return connectionId;
+        if (owner === 'me') {
+            const connection = await reconcileMemberConnection(projectId, {
+                connector_alias: connector.slug,
+                label: connector.name.trim() || connector.slug,
+            });
+            return connection.connection_id;
+        }
+        return (await ensureProjectConnectorConnection(projectId, connector.slug)).connection_id;
+    };
+    /**
+     * The MCP authorization chain — `WWW-Authenticate` → protected resource
+     * metadata → authorization server metadata → registration endpoint. Run once
+     * when the OAuth 2.0 tab opens so a server that publishes its own metadata
+     * needs one click and zero fields. Discovery is connection-scoped, so this
+     * resolves (or creates) the connection first.
+     */
+    const discoveryQuery = useQuery({
+        queryKey: qk.project.connectorOAuth2Discovery(projectId, connector?.slug ?? '', oauth2DiscoveryConnectionKey(owner, connectionId)),
+        queryFn: async () => {
+            const activeConnectionId = await resolveConnectionId();
+            const result = await discoverConnectionOAuth2Resource(projectId, activeConnectionId);
+            return { connectionId: activeConnectionId, discovery: result.discovery };
+        },
+        // Runs as soon as the modal OPENS, not when the OAuth tab is clicked: the
+        // answer decides which tab the user should land on, so it has to be known
+        // before they choose. A connector with no server URL 400s here and simply
+        // leaves the modal on its static-credential default.
+        enabled: open && Boolean(connector),
+        retry: false,
+        // Same tier as the connector config it sits beside: provider metadata
+        // changes on the provider's schedule, not on ours (FRESHNESS
+        // .connectorOAuth2Discovery).
+        ...contract('config'),
+    });
+    const discovery = discoveryQuery.data?.discovery ?? null;
+    const discoveryError = discoveryQuery.isError
+        ? (discoveryQuery.error?.message ?? 'Discovery failed')
+        : null;
+    const discoveryPending = discoveryQuery.isFetching && !discovery;
+    const plan = autoConnectPlan(discovery);
+    /**
+     * Discovery prefills the manual form at render time rather than through a
+     * setState: the merge keeps anything the user typed, so applying it on every
+     * render is idempotent and there is no effect to keep in sync.
+     */
+    const effectiveApplication = discovery
+        ? mergeResourceDiscoveryIntoForm(application, discovery)
+        : application;
+    /**
+     * The endpoint/client fields only appear when automatic setup cannot finish
+     * the job: the user asked for their own app, or the server publishes nothing
+     * Kortix can act on. `unknown` (discovery still running or not started) keeps
+     * them visible so the modal is never empty.
+     */
+    /**
+     * The tab the user is on. Discovery decides the default: a server that
+     * publishes OAuth metadata opens on OAuth 2.0, everything else on the static
+     * credential. An explicit tab click always wins.
+     */
+    const credentialType = credentialTypeChoice ??
+        (plan.kind === 'register' || plan.kind === 'client_id_required' ? 'oauth2' : 'static');
+    const showManualOAuth2Fields = manualSetup || plan.kind === 'unknown' || plan.kind === 'client_id_required';
+    const oauth2Valid = application.grant === 'client_credentials'
+        ? oauth2CredentialFormValid(oauth2)
+        : oauth2ApplicationFormValid(effectiveApplication);
+    /**
+     * One click: register Kortix with the authorization server (RFC 7591), then
+     * start Authorization Code + PKCE. No client id, no secret, no endpoints.
+     */
+    const autoConnect = useMutation({
+        mutationFn: async () => {
+            if (!discovery)
+                throw new Error('Discovery has not completed');
+            const activeConnectionId = discoveryQuery.data?.connectionId ?? (await resolveConnectionId());
+            const redirect = new URL(window.location.href);
+            redirect.searchParams.delete('oauth2');
+            redirect.searchParams.delete('oauth2_error');
+            const authorizationUrl = await startOAuth2SignIn(projectId, activeConnectionId, discovery, redirect.toString());
+            window.location.assign(authorizationUrl);
+        },
+        onError: (err) => errorToast(err.message || tI18nHardcoded.raw('i18nComplete.text46c9f3b7520f')),
+    });
+    /** Write a static or `client_credentials` credential to the selected account. */
+    const writeCredential = async (input) => {
+        const target = credentialWriteTarget(owner, connectionId);
+        if (target.kind === 'connector-default') {
+            return setConnectorCredential(projectId, connector.slug, input);
+        }
+        const targetConnectionId = target.kind === 'connection' ? target.connectionId : await resolveConnectionId();
+        return updateConnectionCredential(projectId, targetConnectionId, input);
+    };
+    const save = useMutation({
+        mutationFn: async () => {
+            if (credentialType === 'static') {
+                return writeCredential({ value });
+            }
+            if (application.grant === 'client_credentials') {
+                return writeCredential(buildOAuth2CredentialInput(oauth2));
+            }
+            const activeConnectionId = await resolveConnectionId();
+            const resolvedApplication = effectiveApplication.discoveryUrl
+                ? mergeOAuth2DiscoveryMetadata(effectiveApplication, (await discoverConnectionOAuth2(projectId, activeConnectionId, {
+                    discovery_url: effectiveApplication.discoveryUrl,
+                })).metadata)
+                : effectiveApplication;
+            await putConnectionOAuth2Application(projectId, activeConnectionId, buildOAuth2ApplicationInput(resolvedApplication));
+            const scopes = resolvedApplication.scopes.split(/\s+/).filter(Boolean);
+            if (application.grant === 'authorization_code') {
+                const redirect = new URL(window.location.href);
+                redirect.searchParams.delete('oauth2');
+                redirect.searchParams.delete('oauth2_error');
+                const result = await startConnectionOAuth2Authorization(projectId, activeConnectionId, {
+                    scopes: scopes.length ? scopes : undefined,
+                    success_redirect_uri: redirect.toString(),
+                    error_redirect_uri: redirect.toString(),
+                });
+                window.location.assign(result.authorization_url);
+                return result;
+            }
+            const result = await startConnectionOAuth2DeviceAuthorization(projectId, activeConnectionId, {
+                scopes: scopes.length ? scopes : undefined,
+            });
+            setDeviceConnectionId(activeConnectionId);
+            setDevice(result);
+            return result;
+        },
+        onSuccess: () => {
+            if (credentialType === 'oauth2' && application.grant !== 'client_credentials')
+                return;
+            successToast(credentialType === tI18nHardcoded.raw('i18nComplete.textd8ad572d2fb1')
+                ? tI18nHardcoded.raw('i18nComplete.text6984a3c945fa')
+                : tI18nHardcoded.raw('i18nComplete.textf0341f8dbcc5'));
+            setValue('');
+            setOauth2(EMPTY_OAUTH2_CREDENTIAL_FORM);
+            setApplication(EMPTY_OAUTH2_APPLICATION_FORM);
+            onSaved();
+            onOpenChange(false);
+        },
+        onError: (err) => errorToast(err.message || tI18nHardcoded.raw('i18nComplete.text2c07997249ab')),
+    });
+    const handleOpenChange = (o) => {
+        if (save.isPending)
+            return;
+        if (!o) {
+            setManualSetup(false);
+            setCredentialTypeChoice(null);
+        }
+        onOpenChange(o);
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if ((credentialType === 'static' && staticValid) ||
+            (credentialType === 'oauth2' && oauth2Valid)) {
+            save.mutate();
+        }
+    };
+    const title = `${tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextSetCredential5e9704a8')} ${connector ? connectorDisplayName(connector) : ''}`;
+    const description = tI18nHardcoded.raw('i18nComplete.text8e5a984b8a84');
+    const fields = (_jsxs(Tabs, { value: credentialType, onValueChange: (next) => setCredentialTypeChoice(next), className: "gap-4", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "static", children: tI18nHardcoded.raw('i18nComplete.text8f0b0d462a16') }), _jsx(TabsTrigger, { value: "oauth2", children: tI18nHardcoded.raw('i18nComplete.textaebabad39063') })] }), _jsx(TabsContent, { value: "static", children: _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-static-credential", children: objectCredential ? tI18nHardcoded.raw('i18nComplete.textb8ce566177f1') : 'Value' }), objectCredential ? (_jsx(Textarea, { id: "connector-static-credential", value: value, onChange: (e) => setValue(e.target.value), placeholder: credentialExample, className: "min-h-28 font-mono text-xs", autoFocus: true })) : (_jsx(Input, { id: "connector-static-credential", type: "password", value: value, onChange: (e) => setValue(e.target.value), placeholder: credentialExample, className: "font-mono", autoFocus: true })), objectCredential && (_jsxs(FieldDescription, { children: [tI18nHardcoded.raw('i18nComplete.textfdf7bc860f55'), " ", requestAuth, ' ', tI18nHardcoded.raw('i18nComplete.text41a01f64505d')] }))] }) }), _jsxs(TabsContent, { value: "oauth2", className: "space-y-4", children: [discoveryPending ? (_jsx(InfoBanner, { tone: "neutral", title: tI18nHardcoded.raw('i18nComplete.text1ead5326bbb8'), children: tI18nHardcoded.raw('i18nComplete.textc9b1c409642d') })) : plan.kind === 'no_authorization' ? (_jsx(InfoBanner, { tone: "neutral", title: tI18nHardcoded.raw('i18nComplete.text24f46f717cfa'), children: tI18nHardcoded.raw('i18nComplete.text93bc06df8dd8') })) : plan.kind === 'register' && !manualSetup ? (_jsxs("div", { className: "space-y-3", children: [_jsxs(InfoBanner, { tone: "neutral", title: tI18nHardcoded.raw('i18nComplete.text477d50f7ddbf'), children: [tI18nHardcoded.raw('i18nComplete.text07fdd059f8a1'), plan.scopes.length
+                                        ? tI18nHardcoded('i18nComplete.text1d42883b00c1', {
+                                            value0: plan.scopes.join(', '),
+                                        })
+                                        : ''] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { type: "button", size: "sm", className: "gap-1.5", disabled: autoConnect.isPending, onClick: () => autoConnect.mutate(), children: [autoConnect.isPending && _jsx(Loading, { className: "size-4 shrink-0" }), plan.label] }), _jsx(Button, { type: "button", size: "sm", variant: "outline-ghost", onClick: () => setManualSetup(true), children: tI18nHardcoded.raw('i18nComplete.texte67a6ef2363e') })] })] })) : plan.kind === 'client_id_required' ? (_jsx(InfoBanner, { tone: "neutral", title: tI18nHardcoded.raw('i18nComplete.textcb7c06207756'), children: tI18nHardcoded.raw('i18nComplete.text0dbb23e7febb') })) : plan.kind === 'manual' && !manualSetup ? (_jsx(InfoBanner, { tone: "neutral", title: tI18nHardcoded.raw('i18nComplete.texteb99bb9a22f3'), action: _jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: () => setManualSetup(true), children: tI18nHardcoded.raw('i18nComplete.textb1d877ab2f51') }), children: plan.reason })) : (_jsx(InfoBanner, { tone: "info", children: tI18nHardcoded.raw('i18nComplete.text67dc9c4395f1') })), discoveryError && (_jsx(InfoBanner, { tone: "neutral", title: tI18nHardcoded.raw('i18nComplete.textdc258e9a953b'), children: discoveryError })), showManualOAuth2Fields && (_jsxs(_Fragment, { children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "connector-oauth2-grant", children: tI18nHardcoded.raw('i18nComplete.text78b7d0379d5e') }), _jsxs(Select, { value: application.grant, onValueChange: (grant) => {
+                                            setDevice(null);
+                                            setApplication({
+                                                ...application,
+                                                grant: grant,
+                                            });
+                                        }, children: [_jsx(SelectTrigger, { id: "connector-oauth2-grant", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "client_credentials", children: tI18nHardcoded.raw('i18nComplete.text23c446ef2187') }), _jsx(SelectItem, { value: "authorization_code", children: tI18nHardcoded.raw('i18nComplete.textac806359529b') }), _jsx(SelectItem, { value: "device_authorization", children: tI18nHardcoded.raw('i18nComplete.text197da3e17a78') })] })] })] }), application.grant === 'client_credentials' ? (_jsx(OAuth2CredentialFields, { value: oauth2, onChange: setOauth2, idPrefix: "connector-oauth2" })) : (_jsx(OAuth2ApplicationFields, { value: effectiveApplication, onChange: setApplication, idPrefix: "connector-oauth2-application" }))] })), device && (_jsxs(InfoBanner, { tone: "neutral", title: tI18nHardcoded('i18nComplete.textbfd271fe6ead', {
+                            value0: device.user_code,
+                        }), action: _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: () => window.open(device.verification_uri_complete ?? device.verification_uri, '_blank', 'noopener,noreferrer'), children: [_jsx(ExternalLink, { className: "size-4" }), tI18nHardcoded.raw('i18nComplete.text97fc3d60fab5')] }), children: [tI18nHardcoded.raw('i18nComplete.text9c67cc26222a'), " ", device.interval_seconds, ' ', tI18nHardcoded.raw('i18nComplete.text4616b90a6d94'), ' ', new Date(device.expires_at).toLocaleTimeString(), "."] }))] })] }));
+    const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "outline-ghost", size: "sm", onClick: () => handleOpenChange(false), disabled: save.isPending, children: tI18nHardcoded.raw('i18nComplete.text19766ed6ccb2') }), _jsxs(Button, { type: "submit", size: "sm", disabled: save.isPending || (credentialType === 'static' ? !staticValid : !oauth2Valid), className: "gap-1.5", children: [save.isPending && _jsx(Loading, { className: "size-4 shrink-0" }), credentialType === 'oauth2' && application.grant === 'authorization_code'
+                        ? tI18nHardcoded.raw('i18nComplete.text0c814b60fca5')
+                        : credentialType === 'oauth2' && application.grant === 'device_authorization'
+                            ? tI18nHardcoded.raw('i18nComplete.text55e970c35216')
+                            : 'Save'] })] }));
+    if (shell === 'split') {
+        return (_jsxs(SplitSheetContent, { children: [_jsxs(SplitSheetHeader, { children: [_jsx(SplitSheetTitle, { children: title }), _jsx(SplitSheetDescription, { children: description })] }), _jsxs("form", { onSubmit: handleSubmit, className: "flex min-h-0 flex-1 flex-col", children: [_jsx(SplitSheetBody, { children: fields }), _jsx(SplitSheetFooter, { className: "justify-between", children: actions })] })] }));
+    }
+    return (_jsx(Modal, { open: open, onOpenChange: handleOpenChange, children: _jsxs(ModalContent, { className: "lg:max-w-3xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: title }), _jsx(ModalDescription, { children: description })] }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(ModalBody, { children: fields }), _jsx(ModalFooter, { className: "sm:justify-between", children: actions })] })] }) }));
+}