@kortix/ui 0.0.0-stage → 0.14.4

package/dist/customize/connectors/detail/connector-page.js

@@ -0,0 +1,343 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { connectorConnectionQueryKeys } from '../../sections/connector-connection-form.js';
+import { invalidateConnections } from '../invalidate-connections.js';
+import { ConnectorNoticeRow, NOTICE_BODY, NOTICE_TITLE, NoticeLogLine, } from './connector-notice-view.js';
+import { DetailPageShell, DETAIL_PAGE_COLUMN as PAGE_COLUMN } from './detail-page-shell.js';
+import { getProjectDetail, listConnectors, syncConnectors } from '@kortix/sdk';
+import { contract, FRESHNESS, qk, useProjectAccountId } from '@kortix/sdk/react';
+import { CaretLeftIcon, PlugIcon, PlusIcon } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { UiLink as Link, useUiPathname, useUiRouter, useUiSearchParams } from '../../../providers/ui-provider.js';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { SessionDotMatrix } from '../../../primitives/dot-matrix/session-dot-matrix.js';
+import Loading from '../../../primitives/loading.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { SplitSheet, SplitSheetMain } from '../../../primitives/split-sheet.js';
+import { Tabs, TabsList, TabsTrigger } from '../../../primitives/tabs.js';
+import { errorToast } from '../../../primitives/toast.js';
+import { EmptyState } from '../../../primitives/empty-state.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { ComputerConnectModal } from '../../../internal/tunnel/computer-connect.js';
+import { ConnectorAppIcon } from '../connector-identity.js';
+import { appHref, appRefFromLocation, connectorsHref, } from '../connector-routes.js';
+import { startDiscoveredSignIn } from '../../sections/connector-oauth2-start.js';
+import { SetCredentialModal } from '../../sections/connectors-view.js';
+import { useOauth2Return } from '../../../internal/hooks/connectors/use-oauth2-return.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../../internal/lib/use-project-can.js';
+import { isManagedConnectorProvider } from '../provider-label.js';
+import { ConnectorDetailTabs } from './connector-detail-tabs.js';
+import { ConnectorMoveRow, useConnectorMove } from './connector-move-row.js';
+import { connectorNotice, noticeButton, noticeTarget } from './connector-notice.js';
+import { connectHandoff, connectorPageState } from './connector-page-state.js';
+import { connectorRunsOver, connectorStatusTone } from './connector-status.js';
+import { CONNECTOR_TAB_LABEL_KEY, connectorTabs } from './connector-tabs.js';
+import { useConnectorEventTriggers } from './connector-triggers.js';
+import { ProviderInfo, providerName } from './provider-info.js';
+import { ConnectorStatusBadge } from './status-badge.js';
+import { useConnectorDetail } from './use-connector-detail.js';
+/** The column `CapabilityPageShell` gives the list page beside this one. */
+/**
+ * `/projects/<id>/customize/connectors/<app>/<connector>` — one connector, as
+ * a page: its accounts, its tools, its settings.
+ *
+ * `appSegment` is navigation context only. It decides where Back goes: the
+ * app's page, or the Connected tab when the connector was reached without an
+ * app (`connected`).
+ */
+export function ConnectorPage({ projectId, appSegment, connectorSlug, }) {
+    const t = useTranslations('connectorPages');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const search = useUiSearchParams();
+    const queryClient = useQueryClient();
+    const accountId = useProjectAccountId(projectId);
+    const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_CONNECTOR_WRITE, { accountId }).allowed ===
+        true;
+    const connectorsQuery = useQuery({
+        queryKey: qk.project.connectors(projectId),
+        queryFn: () => listConnectors(projectId, { includeSchemas: false }),
+        ...contract(FRESHNESS.connectors),
+    });
+    const connector = connectorsQuery.data?.connectors.find((candidate) => candidate.slug === connectorSlug) ?? null;
+    const invalidate = useCallback(() => {
+        void invalidateConnections(queryClient, projectId);
+    }, [projectId, queryClient]);
+    // After a remove, the deleted slug's own queries (its config) stay out of
+    // the refetch: they would 404 and toast "connector not found".
+    const invalidateAfterRemove = useCallback(() => {
+        const removed = qk.project.connectorConfig(projectId, connectorSlug);
+        for (const key of connectorConnectionQueryKeys(projectId)) {
+            void queryClient.invalidateQueries({
+                queryKey: key,
+                predicate: (query) => !removed.every((part, index) => query.queryKey[index] === part),
+            });
+        }
+    }, [connectorSlug, projectId, queryClient]);
+    useOauth2Return(invalidate);
+    const app = appRefFromLocation(appSegment, search);
+    const backHref = app ? appHref(projectId, app) : connectorsHref(projectId, 'connected');
+    const state = connectorPageState({
+        found: connector !== null,
+        isPending: connectorsQuery.isPending,
+        isFetching: connectorsQuery.isFetching,
+        isError: connectorsQuery.isError,
+    });
+    if (state === 'loading') {
+        return (_jsxs(DetailPageShell, { busy: true, children: [_jsx(Skeleton, { className: "h-4 w-24 rounded-sm py-0" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 py-0" }), _jsx(Skeleton, { className: "h-6 w-48 rounded-sm py-0" })] }), _jsx(Skeleton, { className: "h-8 w-64 py-0" }), _jsx(Skeleton, { className: "h-20 w-full py-0" }), _jsx(Skeleton, { className: "h-20 w-full py-0" })] }));
+    }
+    if (state === 'error') {
+        return (_jsx(DetailPageShell, { children: _jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('textbda9de7688c0'), description: connectorsQuery.error instanceof Error
+                    ? connectorsQuery.error.message
+                    : tI18nComplete.raw('textd8eda34a089a'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void connectorsQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) }) }));
+    }
+    if (!connector) {
+        return (_jsx(DetailPageShell, { children: _jsx(EmptyState, { icon: PlugIcon, size: "sm", title: t('notFoundTitle'), description: t('notFoundDescription'), action: _jsx(Button, { asChild: true, size: "sm", variant: "secondary", children: _jsx(Link, { href: connectorsHref(projectId, 'connected'), children: t('backToConnectors') }) }) }) }));
+    }
+    return (_jsx(ConnectorPageBody, { projectId: projectId, connector: connector, canWrite: canWrite, backHref: backHref, onChanged: invalidate, onRemoved: invalidateAfterRemove }, connector.slug));
+}
+function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged, onRemoved, }) {
+    const t = useTranslations('connectorPages');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tSharing = useTranslations('accessSharing');
+    const search = useUiSearchParams();
+    const router = useUiRouter();
+    const pathname = useUiPathname();
+    const { displayName, isManagedProvider, isChannel, isComputer, connectionsQuery, accounts, connected, canManageConnections, headerCta, connectPending, refreshAccounts, startPrivateSession, reconnectAccount, credentialTarget, setCredentialTarget, computerOpen, setComputerOpen, } = useConnectorDetail({ projectId, connector, canWrite, onChanged });
+    const replaceParams = useCallback((mutate) => {
+        const params = new URLSearchParams(search?.toString() ?? '');
+        mutate(params);
+        const suffix = params.toString();
+        router.replace(suffix ? `${pathname}?${suffix}` : pathname, { scroll: false });
+    }, [pathname, router, search]);
+    // The tab is in the URL, so a link opens the right one.
+    const eventTriggers = useConnectorEventTriggers(projectId, connector);
+    const tabs = connectorTabs(connector, { canWrite, hasEvents: eventTriggers.hasEvents });
+    const requestedTab = search?.get('tab');
+    const tab = tabs.find((value) => value === requestedTab) ?? tabs[0] ?? 'accounts';
+    const setTab = (next) => replaceParams((params) => {
+        if (next === 'accounts')
+            params.delete('tab');
+        else
+            params.set('tab', next);
+    });
+    // The install hand-off: `?connect=<connection id>` opens credential entry
+    // for that account once, then leaves the URL. The id is untrusted, so
+    // `connectHandoff` opens only one of THIS connector's accounts and takes the
+    // owner from the row; the URL's `owner` param is stripped, never read.
+    const connectId = search?.get('connect') ?? null;
+    // Same cache entry as the probe in `useConnectorDetail`; read here for its
+    // loading state, so a shared account is not refused before the answer lands.
+    const accountId = useProjectAccountId(projectId);
+    const manageProbeLoading = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_CONNECTOR_CONNECTIONS_MANAGE, { accountId }).isLoading;
+    // The id whose account list has been refetched. Set when that refetch ends.
+    const [refetchedFor, setRefetchedFor] = useState(null);
+    // The id a refetch was started for, so it starts once.
+    const refetchStartedFor = useRef(null);
+    const handoff = connectHandoff({
+        connectId,
+        accounts,
+        settled: !connectionsQuery.isFetching && !manageProbeLoading,
+        refetched: refetchedFor === connectId,
+        canManageConnections,
+        direct: !isManagedProvider && !isComputer && !isChannel,
+    });
+    const handoffAction = handoff.action;
+    const handoffConnectionId = handoff.action === 'open' ? handoff.connectionId : null;
+    const handoffOwner = handoff.action === 'open' ? handoff.owner : null;
+    const refetchConnections = connectionsQuery.refetch;
+    useEffect(() => {
+        if (handoffAction === 'none' || handoffAction === 'wait')
+            return;
+        if (handoffAction === 'refetch') {
+            if (refetchStartedFor.current === connectId)
+                return;
+            refetchStartedFor.current = connectId;
+            void refetchConnections().finally(() => setRefetchedFor(connectId));
+            return;
+        }
+        if (handoffConnectionId && handoffOwner) {
+            setCredentialTarget({ connectionId: handoffConnectionId, owner: handoffOwner });
+        }
+        replaceParams((params) => {
+            params.delete('connect');
+            params.delete('owner');
+        });
+    }, [
+        connectId,
+        handoffAction,
+        handoffConnectionId,
+        handoffOwner,
+        refetchConnections,
+        replaceParams,
+        setCredentialTarget,
+    ]);
+    // `SplitSheet` returns focus only to its own trigger, and this sheet opens
+    // from state. When it closes with focus left on nothing, put it on the
+    // heading so a keyboard user keeps their place. Never on first mount.
+    const headingRef = useRef(null);
+    const sheetOpen = credentialTarget !== null;
+    const sheetWasOpen = useRef(false);
+    useEffect(() => {
+        if (sheetWasOpen.current && !sheetOpen && document.activeElement === document.body) {
+            headingRef.current?.focus();
+        }
+        sheetWasOpen.current = sheetOpen;
+    }, [sheetOpen]);
+    // Opens the account list's "Add account" dialog: name and who may use it.
+    const [addRequest, setAddRequest] = useState(0);
+    const requestAdd = () => {
+        setTab('accounts');
+        setAddRequest((n) => n + 1);
+    };
+    // Right after Install (`?add=1`): ask for the first account once, then
+    // leave the URL. Adjusted during render, not in an effect.
+    const addParam = search?.get('add') === '1';
+    const [addHandled, setAddHandled] = useState(false);
+    if (addParam && !addHandled && canWrite && !isChannel) {
+        setAddHandled(true);
+        setAddRequest((n) => n + 1);
+    }
+    useEffect(() => {
+        if (addParam && addHandled)
+            replaceParams((params) => params.delete('add'));
+    }, [addParam, addHandled, replaceParams]);
+    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');
+    // One banner says what is wrong and carries the button that fixes it.
+    const notice = connectorNotice({
+        provider: connector.provider,
+        status: connector.status,
+        lastError: connector.lastError,
+        connected,
+        hasAuth: isManagedProvider || Boolean(connector.authSecret),
+        credentialSet: connector.secretSet,
+        managed: isManagedProvider,
+        accountCount: accounts.length,
+        accountsLoaded: connectionsQuery.isSuccess,
+    });
+    // Re-read the connector's tools. The list refetch that follows shows the
+    // new status, or the same error with its reason.
+    const retry = useMutation({
+        mutationFn: () => syncConnectors(projectId),
+        onError: (error) => errorToast(error.message),
+        onSettled: onChanged,
+    });
+    // Finish an MCP account's OAuth sign-in: the same start Install runs. A
+    // server without one-click OAuth opens credential entry instead.
+    const signIn = useMutation({
+        mutationFn: async (account) => {
+            const url = await startDiscoveredSignIn(projectId, account.connection_id, window.location.href);
+            if (url)
+                window.location.assign(url);
+            else
+                setCredentialTarget({
+                    connectionId: account.connection_id,
+                    owner: account.owner_type === 'project' ? 'project' : 'me',
+                });
+        },
+        onError: (error) => errorToast(error.message),
+    });
+    // The banner's button fixes one of the caller's own accounts. With none it
+    // opens "Add account" ("Only you" preselected), never the project's shared
+    // account: a shared account is signed in from its own row.
+    // A Pipedream connector that can move: the move is the fix. A new Pipedream
+    // account would only have to sign in again after the move.
+    const move = useConnectorMove(projectId, connector);
+    const fix = move?.to ? null : noticeButton(notice, noticeTarget(accounts), isManagedProvider);
+    const runFix = () => {
+        if (fix?.run === 'add')
+            requestAdd();
+        else if (fix?.run === 'sign_in' && fix.account)
+            signIn.mutate(fix.account);
+        else if (fix?.account)
+            reconnectAccount(fix.account);
+    };
+    // Connect on an account row: the same sign-in the notice runs. A managed
+    // account reconnects through its provider window.
+    const needsSignIn = isManagedProvider || Boolean(connector.authSecret);
+    const connectAccount = (account) => isManagedProvider ? reconnectAccount(account) : signIn.mutate(account);
+    const tone = connectorStatusTone(connector);
+    const providerManagedBy = isManagedConnectorProvider(connector.provider)
+        ? connectorRunsOver(connector.provider)
+        : null;
+    const stripCells = [
+        {
+            key: 'status',
+            label: t('stripStatus'),
+            value: _jsx(ConnectorStatusBadge, { tone: tone }),
+        },
+        {
+            key: 'provider',
+            // Who holds the login and who runs the actions; the info button explains it.
+            label: t('infoRunsThrough'),
+            labelAddon: _jsx(ProviderInfo, { appName: displayName, managedBy: providerManagedBy }),
+            value: providerName(displayName, providerManagedBy),
+        },
+        ...(isManagedConnectorProvider(connector.provider)
+            ? []
+            : [{ key: 'runs', label: t('infoRunsOver'), value: connectorRunsOver(connector.provider) }]),
+    ];
+    // The Accounts tab's own query; a channel has none, and the cell waits for it.
+    if (!isChannel && connectionsQuery.isSuccess)
+        stripCells.push({ key: 'accounts', label: t('stripAccounts'), value: String(accounts.length) });
+    stripCells.push({
+        key: 'tools',
+        label: t('stripTools'),
+        value: String(connector.actions.length),
+    });
+    const closeCredential = (open) => {
+        if (!open)
+            setCredentialTarget(null);
+    };
+    const addAccountControl = isComputer ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: () => setComputerOpen(true), children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tI18nComplete.raw('text1a2303ede074')] })) : (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: requestAdd, disabled: connectPending, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tSharing('addAccount')] }));
+    return (_jsxs(SplitSheet, { open: sheetOpen, onOpenChange: closeCredential, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs("div", { className: PAGE_COLUMN, children: [_jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: backHref, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3d2e79ebdd0')] }) }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ConnectorAppIcon, { connector: connector, size: "lg" }), _jsx("h1", { ref: headingRef, tabIndex: -1, className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: displayName })] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [isComputer && headerCta === 'connect' ? addAccountControl : null, connected ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => startPrivateSession(), children: t('newSession') })) : null] })] }), _jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [_jsx("dl", { className: "divide-border flex divide-x", children: stripCells.map((cell) => (_jsxs("div", { className: "min-w-0 flex-1 space-y-0.5 px-4 py-2.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "truncate", children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground flex min-w-0 items-center gap-1.5 truncate text-sm font-medium", children: cell.value })] }, cell.key))) }), notice.kind !== 'none' ? (_jsxs(ConnectorNoticeRow, { title: t(NOTICE_TITLE[notice.kind], { name: displayName }), detail: notice.kind === 'error' && notice.reason ? (_jsx(NoticeLogLine, { reason: notice.reason })) : (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t(notice.kind === 'needs_credential' && isManagedProvider
+                                            ? 'noticeReconnectBody'
+                                            : NOTICE_BODY[notice.kind], { name: displayName }) })), children: [notice.kind === 'error' && canWrite ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "gap-1.5", onClick: () => retry.mutate(), disabled: retry.isPending, children: [retry.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text942087cc2d41')] })) : null, fix?.kind === 'add_account' ? (addAccountControl) : fix?.kind === 'sign_in' ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: runFix, disabled: signIn.isPending, children: [signIn.isPending ? _jsx(SessionDotMatrix, { size: 14, className: "shrink-0" }) : null, t('noticeSignInAction')] })) : fix ? (
+                                        // Fix it here: credential entry for a direct account, the
+                                        // provider window for a managed one, or "Add account" for
+                                        // a caller with no account of their own.
+                                        _jsxs(Button, { size: "sm", className: "gap-1.5", onClick: runFix, disabled: connectPending, children: [connectPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, fix.kind === 'connect'
+                                                    ? t('connectAccount')
+                                                    : fix.kind === 'reconnect'
+                                                        ? tI18nComplete.raw('textbf8a9eab9e7e')
+                                                        : tI18nComplete.raw('text3d6627454174')] })) : null] })) : null, _jsx(ConnectorMoveRow, { projectId: projectId, connector: connector, displayName: displayName, canWrite: canWrite, onMoved: onChanged })] }), _jsxs(Tabs, { value: tab, onValueChange: (next) => setTab(next), className: "gap-6", children: [_jsx(TabsList, { "aria-label": t('sections', { name: displayName }), children: tabs.map((value) => (_jsxs(TabsTrigger, { value: value, className: "w-fit flex-none", children: [tI18nComplete.raw(CONNECTOR_TAB_LABEL_KEY[value]), value === 'triggers' ? (_jsx(Badge, { variant: "secondary", size: "sm", children: eventTriggers.rows.length })) : null] }, value))) }), _jsx(ConnectorDetailTabs, { connectionsQuery: connectionsQuery, accounts: {
+                                        projectId,
+                                        connector,
+                                        displayName,
+                                        canWrite,
+                                        canManageConnections,
+                                        onChanged,
+                                        onStartSession: startPrivateSession,
+                                        addRequest,
+                                        onAddRequestHandled: () => setAddRequest(0),
+                                        onRemoved: () => router.push(connectorsHref(projectId, 'connected')),
+                                        onSetCredential: setCredentialTarget,
+                                        onConnect: needsSignIn ? connectAccount : undefined,
+                                        showAccountInfo: true,
+                                    }, settings: {
+                                        projectId: projectId,
+                                        connector: connector,
+                                        displayName: displayName,
+                                        onChanged: onChanged,
+                                        onRemoved: () => {
+                                            router.push(connectorsHref(projectId, 'connected'));
+                                            onRemoved();
+                                        },
+                                    } })] })] }) }), credentialTarget ? (
+            // Keyed: the sheet is non-modal, so the target can change under a typed secret.
+            _jsx(SetCredentialModal, { shell: "split", projectId: projectId, connector: connector, connectionId: credentialTarget.connectionId, owner: credentialTarget.owner, open: true, onOpenChange: closeCredential, onSaved: () => {
+                    setCredentialTarget(null);
+                    refreshAccounts();
+                } }, credentialTarget.connectionId)) : null, isComputer ? (_jsx(ComputerConnectModal, { projectId: projectId, open: computerOpen, onOpenChange: setComputerOpen, onConnected: refreshAccounts })) : null] }));
+}

package/dist/customize/connectors/detail/connector-settings.d.ts

@@ -0,0 +1,36 @@
+import { type AdminConnector } from '@kortix/sdk';
+interface ConnectorSettingsProps {
+    projectId: string;
+    connector: AdminConnector;
+    displayName: string;
+    onChanged: () => void;
+    onRemoved: () => void;
+}
+/**
+ * Settings — the connector's name, the transport config for a direct
+ * provider, then removing the connector.
+ *
+ * `connectorTabs` already restricts this tab to writers.
+ *
+ * `ConnectionSection` (slug/provider/spec/auth/headers) used to sit on the
+ * Accounts tab, gated on `canWrite` with a reader-only banner in its place.
+ * It moved HERE — connector-credentials rework follow-up (the live defect an
+ * openapi/http/mcp/graphql connector's Accounts tab rendered this transport
+ * form instead of its account list). Accounts now always shows
+ * `ConnectionsList` for a direct provider, same as a managed one, so this is
+ * the only mount left — showing it on both tabs would print the same form
+ * twice. A managed
+ * (Composio/Pipedream), channel, or computer connector has no transport
+ * config to edit, so it is skipped here.
+ *
+ * The "Connects as" row is gone. `connectors.authorization_strategy` was a
+ * connector-level MODE that made shared and private accounts mutually
+ * exclusive, and it is the direct cause of the connector-credentials incident:
+ * a `user`-mode connector had no connect flow anywhere. Ownership is now a
+ * property of each account — see the Accounts tab.
+ *
+ * The name is edited here, in a field with a Save button. It used to be a
+ * pencil beside the title, which made the heading itself an input.
+ */
+export declare function ConnectorSettings({ projectId, connector, displayName, onChanged, onRemoved, }: ConnectorSettingsProps): import("react").JSX.Element;
+export {};

package/dist/customize/connectors/detail/connector-settings.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { deleteConnector, setConnectorName } from '@kortix/sdk';
+import { TrashIcon } from '@phosphor-icons/react';
+import { useMutation } from '@tanstack/react-query';
+import { useId, useState } from 'react';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
+import { Input } from '../../../primitives/input.js';
+import { Label } from '../../../primitives/label.js';
+import Loading from '../../../primitives/loading.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { ConnectionSection } from '../../sections/connectors-view.js';
+import { isManagedConnectorProvider } from '../provider-label.js';
+import { connectorRunsOver } from './connector-status.js';
+/**
+ * Settings — the connector's name, the transport config for a direct
+ * provider, then removing the connector.
+ *
+ * `connectorTabs` already restricts this tab to writers.
+ *
+ * `ConnectionSection` (slug/provider/spec/auth/headers) used to sit on the
+ * Accounts tab, gated on `canWrite` with a reader-only banner in its place.
+ * It moved HERE — connector-credentials rework follow-up (the live defect an
+ * openapi/http/mcp/graphql connector's Accounts tab rendered this transport
+ * form instead of its account list). Accounts now always shows
+ * `ConnectionsList` for a direct provider, same as a managed one, so this is
+ * the only mount left — showing it on both tabs would print the same form
+ * twice. A managed
+ * (Composio/Pipedream), channel, or computer connector has no transport
+ * config to edit, so it is skipped here.
+ *
+ * The "Connects as" row is gone. `connectors.authorization_strategy` was a
+ * connector-level MODE that made shared and private accounts mutually
+ * exclusive, and it is the direct cause of the connector-credentials incident:
+ * a `user`-mode connector had no connect flow anywhere. Ownership is now a
+ * property of each account — see the Accounts tab.
+ *
+ * The name is edited here, in a field with a Save button. It used to be a
+ * pencil beside the title, which made the heading itself an input.
+ */
+export function ConnectorSettings({ projectId, connector, displayName, onChanged, onRemoved, }) {
+    const t = useTranslations('connectorPages');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const isChannel = connector.provider === 'channel';
+    const managed = isManagedConnectorProvider(connector.provider);
+    const isComputer = connector.provider === 'computer';
+    const isDirectProvider = !isManagedConnectorProvider(connector.provider) && !isChannel && !isComputer;
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const remove = useMutation({
+        mutationFn: () => deleteConnector(projectId, connector.slug),
+        onSuccess: () => {
+            successToast(tI18nComplete('textffd34ade9168', { value0: displayName }));
+            onRemoved();
+        },
+        onError: (e) => errorToast(e.message || tI18nComplete.raw('text1d0486014da5')),
+    });
+    const nameId = useId();
+    // `null` until the user types, so the field follows a rename made elsewhere.
+    const [nameDraft, setNameDraft] = useState(null);
+    const name = nameDraft ?? displayName;
+    const nameChanged = name.trim().length > 0 && name.trim() !== displayName;
+    const rename = useMutation({
+        mutationFn: () => setConnectorName(projectId, connector.slug, name.trim()),
+        onSuccess: () => {
+            successToast(tI18nComplete.raw('text05487af3f074'));
+            setNameDraft(null);
+            onChanged();
+        },
+        onError: (e) => errorToast(e.message || tI18nComplete.raw('text8fcf8ce07dcf')),
+    });
+    return (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "bg-popover divide-y rounded-md border", children: [_jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx(Label, { htmlFor: nameId, className: "text-sm font-medium", children: t('nameLabel') }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: t('nameHelp') })] }), _jsxs("form", { className: "flex w-56 shrink-0 items-center gap-2", onSubmit: (event) => {
+                                    event.preventDefault();
+                                    if (nameChanged)
+                                        rename.mutate();
+                                }, children: [_jsx(Input, { id: nameId, value: name, onChange: (event) => setNameDraft(event.target.value), variant: "popover", maxLength: 255, className: "min-w-0 flex-1", disabled: rename.isPending }), _jsxs(Button, { type: "submit", size: "sm", variant: "secondary", className: "shrink-0 gap-1.5", disabled: !nameChanged || rename.isPending, children: [rename.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241')] })] })] }), _jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: managed ? t('signInLabel') : t('infoRunsOver') }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: managed
+                                            ? t('signInManagedHelp', { provider: connectorRunsOver(connector.provider) })
+                                            : t('runsOverDirectHelp', { name: displayName }) })] }), _jsx(Badge, { variant: "outline", size: "sm", className: "shrink-0", children: connectorRunsOver(connector.provider) })] })] }), isDirectProvider ? (_jsx(ConnectionSection, { projectId: projectId, connector: connector, onChanged: onChanged, canWrite: true })) : null, !isChannel && !isComputer ? (_jsx("div", { className: "bg-popover rounded-md border px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: t('removeTitle', { name: displayName }) }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: t('removeHelp') })] }), _jsxs(Button, { size: "sm", variant: "outline", className: "shrink-0 gap-1.5 active:scale-[0.96]", onClick: () => setConfirmDelete(true), children: [_jsx(TrashIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3812fc4acb8')] })] }) })) : null, _jsx(ConfirmDialog, { open: confirmDelete, onOpenChange: setConfirmDelete, title: tI18nComplete('textbc43ab815937', { value0: displayName }), description: _jsxs(_Fragment, { children: [tI18nComplete.raw('text0c044575853f'), ' ', _jsx("code", { className: "font-mono", children: connector.slug }), tI18nComplete.raw('text9627c3d54219')] }), confirmLabel: tI18nComplete.raw('textbf30cc3b0697'), confirmVariant: "destructive", confirmIcon: _jsx(TrashIcon, { className: "size-4 shrink-0" }), isPending: remove.isPending, onConfirm: () => remove.mutate() })] }));
+}

package/dist/customize/connectors/detail/connector-status.d.ts

@@ -0,0 +1,20 @@
+import type { AdminConnector } from '@kortix/sdk';
+import { type ConnectorSetupStatus } from '../../sections/connector-connection-form.js';
+/** The four states a connector shows as a dot + word, on both detail pages. */
+export type ConnectorStatusTone = 'working' | 'pending' | 'error' | 'setup';
+export declare const STATUS_DOT: Record<ConnectorStatusTone, string>;
+/** The `connectorPages` key of each state's word. */
+export declare const STATUS_WORD: {
+    readonly working: "statusWorking";
+    readonly pending: "statusPending";
+    readonly error: "statusError";
+    readonly setup: "statusNeedsSetup";
+};
+export declare function connectorStatusTone(connector: Pick<AdminConnector, 'authorizationStrategy' | 'authSecret' | 'secretSet' | 'status'> & Partial<Pick<AdminConnector, 'provider' | 'lastError'>>): ConnectorStatusTone;
+/**
+ * Agents can use the connector now: it is signed in, it runs on per-person
+ * accounts, or it needs no sign-in and has an account to run as.
+ */
+export declare function connectorUsable(status: ConnectorSetupStatus, accountCount: number): boolean;
+/** What the connector runs over: its provider, named the way a person says it. */
+export declare function connectorRunsOver(provider: AdminConnector['provider']): string;

package/dist/customize/connectors/detail/connector-status.js

@@ -0,0 +1,42 @@
+import { connectorSetupStatus, } from '../../sections/connector-connection-form.js';
+import { providerLabel } from '../provider-label.js';
+export const STATUS_DOT = {
+    working: 'bg-kortix-green',
+    pending: 'bg-kortix-blue',
+    error: 'bg-kortix-red',
+    setup: 'bg-kortix-orange',
+};
+/** The `connectorPages` key of each state's word. */
+export const STATUS_WORD = {
+    working: 'statusWorking',
+    pending: 'statusPending',
+    error: 'statusError',
+    setup: 'statusNeedsSetup',
+};
+export function connectorStatusTone(connector) {
+    const status = connectorSetupStatus(connector);
+    if (status === 'pending')
+        return 'pending';
+    return status === 'error' ? 'error' : status === 'needs_setup' ? 'setup' : 'working';
+}
+/**
+ * Agents can use the connector now: it is signed in, it runs on per-person
+ * accounts, or it needs no sign-in and has an account to run as.
+ */
+export function connectorUsable(status, accountCount) {
+    if (status === 'connected')
+        return true;
+    return status === 'no_auth' && accountCount > 0;
+}
+/** What the connector runs over: its provider, named the way a person says it. */
+export function connectorRunsOver(provider) {
+    if (provider === 'composio')
+        return 'Composio';
+    if (provider === 'pipedream')
+        return 'Pipedream';
+    if (provider === 'openapi')
+        return 'OpenAPI';
+    if (provider === 'graphql')
+        return 'GraphQL';
+    return providerLabel(provider);
+}

package/dist/customize/connectors/detail/connector-tabs.d.ts

@@ -0,0 +1,29 @@
+import type { AdminConnector } from '@kortix/sdk';
+export type ConnectorTab = 'accounts' | 'tools' | 'triggers' | 'settings';
+/**
+ * Tab order never changes. A tab that does not apply is absent; the ones that
+ * remain keep their positions, so the surface does not reshape per connector.
+ */
+export declare const CONNECTOR_TABS: readonly ConnectorTab[];
+/** `hardcodedUi.i18nComplete` key of each tab's label. */
+export declare const CONNECTOR_TAB_LABEL_KEY: Record<ConnectorTab, string>;
+/**
+ * Which tabs a connector shows.
+ *
+ * - The name, icon, status and connect action live in the modal header, above
+ *   every tab — so there is no separate Overview tab.
+ * - Every connector has Accounts. For the computer connector, each account is
+ *   one paired machine.
+ * - Tools and Settings mutate project state, so they are writer-only. Accounts
+ *   stays for readers: it is how they see whether the connector works, and how
+ *   they connect their own account.
+ * - Triggers lists the app event triggers on this connector. It shows only when
+ *   the connector's app has events (`hasEvents`), and for readers too: it is a
+ *   list, and its New button is gated on its own permission.
+ * - The computer connector is built in: nothing to configure and it cannot be
+ *   removed, so it has no Settings.
+ */
+export declare function connectorTabs(connector: AdminConnector, caps: {
+    canWrite: boolean;
+    hasEvents?: boolean;
+}): ConnectorTab[];

package/dist/customize/connectors/detail/connector-tabs.js

@@ -0,0 +1,39 @@
+/**
+ * Tab order never changes. A tab that does not apply is absent; the ones that
+ * remain keep their positions, so the surface does not reshape per connector.
+ */
+export const CONNECTOR_TABS = ['accounts', 'tools', 'triggers', 'settings'];
+/** `hardcodedUi.i18nComplete` key of each tab's label. */
+export const CONNECTOR_TAB_LABEL_KEY = {
+    accounts: 'text8a7c8b67fe8b',
+    tools: 'textea93d6a262ec',
+    triggers: 'texte62f2148a64d',
+    settings: 'text74a883a037bc',
+};
+/**
+ * Which tabs a connector shows.
+ *
+ * - The name, icon, status and connect action live in the modal header, above
+ *   every tab — so there is no separate Overview tab.
+ * - Every connector has Accounts. For the computer connector, each account is
+ *   one paired machine.
+ * - Tools and Settings mutate project state, so they are writer-only. Accounts
+ *   stays for readers: it is how they see whether the connector works, and how
+ *   they connect their own account.
+ * - Triggers lists the app event triggers on this connector. It shows only when
+ *   the connector's app has events (`hasEvents`), and for readers too: it is a
+ *   list, and its New button is gated on its own permission.
+ * - The computer connector is built in: nothing to configure and it cannot be
+ *   removed, so it has no Settings.
+ */
+export function connectorTabs(connector, caps) {
+    const present = new Set();
+    present.add('accounts');
+    if (caps.canWrite)
+        present.add('tools');
+    if (caps.hasEvents)
+        present.add('triggers');
+    if (caps.canWrite && connector.provider !== 'computer')
+        present.add('settings');
+    return CONNECTOR_TABS.filter((tab) => present.has(tab));
+}

package/dist/customize/connectors/detail/connector-tools.d.ts

@@ -0,0 +1,37 @@
+import { type AdminConnector } from '@kortix/sdk';
+interface ConnectorToolsProps {
+    projectId: string;
+    connector: AdminConnector;
+    displayName: string;
+    canWrite: boolean;
+    /** Refetch the connector record: `sensitive` lives on it. */
+    onChanged: () => void;
+}
+/**
+ * Tools — what this connector is allowed to do, as a per-tool decision instead
+ * of a dropdown and a save button.
+ *
+ * Three things make this readable to someone who is not going to study a
+ * policy engine:
+ *
+ * 1. **Two groups, not three.** `groupToolsByRisk` folds `destructive` into
+ *    writes. The only question a reader is equipped to answer before granting
+ *    access is "can this look at my data, or change it".
+ * 2. **Default is a state, not a value.** A tool the platform allows by
+ *    default renders with NO segment lit and a `Hint` naming the default.
+ *    Lighting Allow would claim a choice nobody made.
+ * 3. **A project rule is not editable here.** Project scope is evaluated first
+ *    and wins (`resolveEffectiveAction`, connectors/policy.ts:342), so those rows
+ *    are disabled and say where the rule actually lives.
+ *
+ * Everything else — the `sensitive` toggle and the pattern-rule editor — is
+ * folded into **Advanced**. Both are real capabilities carried over from the
+ * shipped panel; they are just not the common case.
+ *
+ * A connector that has reported no tools shows one empty state and nothing
+ * else: there is nothing to decide about tools that do not exist yet. Each
+ * group is a disclosure, open by default, so a long write list can be folded
+ * away while the read list is being set.
+ */
+export declare function ConnectorTools({ projectId, connector, displayName, canWrite, onChanged, }: ConnectorToolsProps): import("react").JSX.Element;
+export {};