@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,263 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DetailPageShell } from './detail-page-shell.js';
+import { getDiscoverConnector, getProjectDetail, listConnectors } from '@kortix/sdk';
+import { contract, FRESHNESS, qk, useProjectAccountId } from '@kortix/sdk/react';
+import { ArrowSquareOutIcon, CaretLeftIcon, CaretRightIcon, GlobeIcon, PlugIcon, } from '@phosphor-icons/react';
+import { useQuery } from '@tanstack/react-query';
+import { lazyClient } from '../../../lib/lazy-client.js';
+import { UiLink as Link, useUiSearchParams } from '../../../providers/ui-provider.js';
+import { useState } from 'react';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { EntityAvatar } from '../../../primitives/entity-avatar.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { EmptyState } from '../../../primitives/empty-state.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { appNameKey, catalogEntryConnectors, } from '../catalog/catalog-entry.js';
+import { listConnectCatalogPage, useConnectProviderStatus, } from '../catalog/use-catalog.js';
+import { connectorDisplayName, connectorSummary, } from '../connector-filter.js';
+import { appRefFromLocation, connectorHref, connectorsHref, } from '../connector-routes.js';
+import { discoverInstallTarget, easyConnectInstallTarget, } from '../install/install.js';
+import { InstallButton } from '../install/install-menu.js';
+import { installableVariants, surfaceInstallName, } from '../install/pick-surface.js';
+import { mcpServerFor } from '../install/mcp-first.js';
+import { useInstall } from '../install/use-install.js';
+import { providerLabel } from '../provider-label.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 { connectorRunsOver, connectorStatusTone } from './connector-status.js';
+import { findEasyConnectApp } from './find-easy-connect-app.js';
+import { ProviderInfo, providerName } from './provider-info.js';
+import { ConnectorStatusBadge } from './status-badge.js';
+/** The same column as the connector page beside this one (`connector-page.tsx`). */
+/** A surface row under "Ways to connect". The surface modal's own row. */
+const SURFACE_ROW = 'flex items-center gap-3 px-4 py-3';
+/** One bordered group of rows, divided. Shared by both lists on the page. */
+const ROW_GROUP = 'bg-popover divide-y overflow-hidden rounded-md border';
+const surfaceLabel = (kind) => (kind === 'openapi' ? 'OpenAPI' : kind.toUpperCase());
+/**
+ * `/projects/<id>/customize/connectors/<app>` — one catalogue app: what it is,
+ * the one Install button, the connectors this project already has for it, and
+ * the other ways to connect it.
+ *
+ * It replaces the surface-picker modal. A non-default surface is chosen only
+ * here, under "Ways to connect".
+ */
+const AddMcpServerDialog = lazyClient(() => import('../add-mcp/add-mcp-server-dialog.js').then((m) => m.AddMcpServerDialog));
+export function AppPage({ projectId, appSegment }) {
+    const t = useTranslations('connectorPages');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tSharing = useTranslations('accessSharing');
+    const search = useUiSearchParams();
+    const app = appRefFromLocation(appSegment, search);
+    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 projectQuery = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        ...contract('config'),
+    });
+    const projectName = projectQuery.data?.project?.name ?? '';
+    const everyoneLabel = projectName
+        ? tSharing('everyone', { project: projectName })
+        : tSharing('visibilityEveryone');
+    const { appQuery, waiting, resolved, managed, detail, provider } = useAppData(projectId, app);
+    const { install, pendingKey, setPendingKey } = useInstall(projectId);
+    // The app's own MCP server, when Install connects through it (one-click
+    // sign-in): the MCP dialog opens for it instead of the managed app.
+    const [mcpApp, setMcpApp] = useState(null);
+    // Which of this page's Install controls started the running install, so only
+    // that one shows progress; the others are disabled until it ends.
+    const [pendingControl, setPendingControl] = useState(null);
+    // The connector list is part of the page, not a late addition: Install reads
+    // it to reuse the app's connector, and a list that is still empty would make
+    // it create a second one.
+    if (waiting || (appQuery && (appQuery.isPending || connectorsQuery.isPending))) {
+        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-16 w-full py-0" }), _jsx(Skeleton, { className: "h-16 w-full py-0" })] }));
+    }
+    // A failed background refetch keeps its data, and the page with it.
+    const failed = [appQuery, connectorsQuery].find((query) => query?.isError && query.data === undefined) ?? null;
+    if (appQuery && failed) {
+        return (_jsx(DetailPageShell, { children: _jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('text3f2d97c61a7e'), description: failed.error instanceof Error
+                    ? failed.error.message
+                    : tI18nComplete.raw('texta0c2cc1374d9'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void failed.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) }) }));
+    }
+    if (!app || !resolved) {
+        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), children: t('backToConnectors') }) }) }) }));
+    }
+    const connectors = connectorsQuery.data?.connectors ?? [];
+    // `catalogEntryConnectors` reads only `source`, `slug`, and `name`.
+    const entry = { source: app.source, slug: app.slug, name: resolved.name };
+    const inProject = catalogEntryConnectors(connectors, entry);
+    const installing = pendingKey === app.slug;
+    /** `name` tells the page's Install controls apart for assistive tech; `key`
+     *  tells them apart for the progress indicator. */
+    const installMenu = (key, target, variant, name) => canWrite ? (_jsx(InstallButton, { label: t('install'), "aria-label": t('installNamed', { name }), variant: variant, onInstall: () => {
+            setPendingControl(key);
+            const mcpUrl = target.managed ? managed?.directMcpUrl : null;
+            if (!mcpUrl) {
+                install(target, { connectors, app });
+                return;
+            }
+            setPendingKey(app.slug);
+            void mcpServerFor(projectId, { name: name, directMcpUrl: mcpUrl }).then((server) => {
+                setPendingKey(null);
+                if (server)
+                    setMcpApp(server);
+                else
+                    install(target, { connectors, app });
+            });
+        }, pending: installing && pendingControl === key, disabled: installing })) : null;
+    const primary = resolved.surfaces[0] ?? null;
+    const waysCount = resolved.surfaces.length + resolved.references.length;
+    const infoCells = [];
+    // The Provider cell follows the primary way to connect: the app itself for
+    // its API/MCP server, Kortix for a managed-only app.
+    const managedOnly = managed && !detail;
+    const managedBy = managedOnly ? connectorRunsOver(provider) : null;
+    if (primary)
+        infoCells.push({
+            key: 'provider',
+            label: t('infoRunsThrough'),
+            labelAddon: _jsx(ProviderInfo, { appName: resolved.name, managedBy: managedBy }),
+            value: providerName(resolved.name, managedBy),
+        });
+    if (managed) {
+        const signIn = managedSignIn(managed.authType);
+        if (signIn)
+            infoCells.push({ key: 'auth', label: t('infoSignsInWith'), value: t(signIn) });
+        const category = managed.categories[0];
+        if (category)
+            infoCells.push({
+                key: 'category',
+                label: t('infoCategory'),
+                value: readableCategory(category),
+            });
+        if (managed.hasTriggers)
+            infoCells.push({ key: 'events', label: t('infoAppEvents'), value: t('infoAppEventsYes') });
+    }
+    if (primary?.kind)
+        infoCells.push({ key: 'runs', label: t('infoRunsOver'), value: primary.kind });
+    if (waysCount > 1)
+        infoCells.push({ key: 'ways', label: t('waysToConnect'), value: String(waysCount) });
+    return (_jsxs(DetailPageShell, { children: [_jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: connectorsHref(projectId), 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: [resolved.icon ? (
+                            // The connector page's icon tile (`ConnectorAppIcon`, size `lg`).
+                            _jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-sm", children: _jsx("img", { src: resolved.icon, alt: "", width: 36, height: 36, referrerPolicy: "no-referrer", className: "size-9 object-contain" }) })) : (_jsx(EntityAvatar, { icon: GlobeIcon, size: "lg", label: resolved.name })), _jsx("h1", { className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: resolved.name })] }), primary ? (_jsx("div", { className: "shrink-0", children: installMenu('header', primary.target, 'default', resolved.name) })) : null] }), infoCells.length > 0 || resolved.description ? (_jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [infoCells.length > 0 ? (_jsx("dl", { className: "flex flex-wrap gap-x-8 gap-y-3 px-4 py-3", children: infoCells.map((cell) => (_jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground truncate text-sm font-medium", children: cell.value })] }, cell.key))) })) : null, resolved.description ? (_jsxs("div", { className: "space-y-1.5 px-4 py-4", children: [_jsx("h2", { className: "text-muted-foreground text-xs", children: t('overview') }), _jsx("p", { className: "text-foreground text-sm text-pretty", children: resolved.description })] })) : null] })) : null, inProject.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: projectName ? t('installedIn', { project: projectName }) : t('installedHere') }), _jsx("p", { className: "text-muted-foreground text-xs", children: t('installedHint') })] }), _jsx("ul", { className: ROW_GROUP, children: inProject.map((connector) => {
+                            const tone = connectorStatusTone(connector);
+                            return (_jsx("li", { children: _jsxs(Link, { href: connectorHref(projectId, connector.slug, { app }), className: "hover:bg-muted/50 flex items-center gap-3 px-4 py-3 transition-colors", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: connectorDisplayName(connector) }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: connectorSummary(connector, providerLabel(connector.provider)) })] }), _jsx("span", { className: "flex w-28 shrink-0 items-center", children: _jsx(ConnectorStatusBadge, { tone: tone }) }), _jsxs("span", { className: "text-muted-foreground flex w-16 shrink-0 items-center justify-end gap-1 text-xs", children: [t('open'), _jsx(CaretRightIcon, { "aria-hidden": true, className: "size-4" })] })] }) }, connector.slug));
+                        }) })] })) : null, resolved.surfaces.length === 0 && resolved.references.length === 0 ? (_jsx(EmptyState, { icon: GlobeIcon, size: "sm", title: tI18nComplete.raw('text363579e1d66b'), description: tI18nComplete.raw('text4d286e47d580') })) : null, resolved.surfaces.length > 1 || resolved.references.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: t('waysToConnect') }), _jsxs("ul", { className: ROW_GROUP, children: [resolved.surfaces.map((surface) => (_jsxs("li", { className: SURFACE_ROW, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: surface.label }), surface.kind ? (_jsx(Badge, { variant: "muted", size: "xs", children: surface.kind })) : null] }), installMenu(surface.key, surface.target, 'secondary', surface.label)] }, surface.key))), resolved.references.map((reference) => (_jsxs("li", { className: SURFACE_ROW, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: reference.label }), _jsx(Badge, { variant: "muted", size: "xs", children: reference.kind })] }), reference.href ? (_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "shrink-0", children: _jsxs("a", { href: reference.href, target: "_blank", rel: "noreferrer", children: [tI18nComplete.raw('text7af023c43013'), _jsx(ArrowSquareOutIcon, { className: "size-3.5 shrink-0" })] }) })) : (_jsx(Badge, { variant: "secondary", size: "sm", children: tI18nComplete.raw('textdf0453d185c4') }))] }, reference.key)))] })] })) : null, mcpApp ? (_jsx(AddMcpServerDialog, { projectId: projectId, app: mcpApp, open: true, onOpenChange: (open) => !open && setMcpApp(null), takenSlugs: connectors.map((connector) => connector.slug), onAdded: () => void connectorsQuery.refetch() }, mcpApp.url)) : null] }));
+}
+/** The managed catalogue's `authType` as a `connectorPages` key. */
+function managedSignIn(authType) {
+    if (authType === 'oauth')
+        return 'authOAuth';
+    if (authType === 'keys')
+        return 'authApiKey';
+    if (authType === 'none')
+        return 'authNone';
+    return null;
+}
+/** A catalogue category key as words: `images-&-design` → `Images & design`. */
+function readableCategory(key) {
+    const words = key.replace(/[-_]+/g, ' ').replace(/\s+/g, ' ').trim();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}
+function useAppData(projectId, app) {
+    const t = useTranslations('connectorPages');
+    const managedSlug = app?.source === 'easy-connect' ? app.slug : null;
+    const connectStatus = useConnectProviderStatus(true);
+    const provider = connectStatus.provider ?? 'composio';
+    // `absent`: this deployment has no managed provider, so the app cannot exist.
+    // `unknown` proceeds, as the catalogue does (`useCatalog`).
+    const managedRunnable = managedSlug !== null &&
+        (connectStatus.state === 'configured' || connectStatus.state === 'unknown');
+    const managedQuery = useQuery({
+        queryKey: ['easy-connect-app', projectId, provider, managedSlug],
+        queryFn: () => findEasyConnectApp(listConnectCatalogPage, { projectId, provider, slug: managedSlug ?? '' }),
+        enabled: managedRunnable,
+        staleTime: 5 * 60_000,
+    });
+    // One app, both ways to connect. A managed app names its API/MCP twin
+    // (`directId`); an API/MCP app finds its managed twin by name below.
+    // Same key as the install hook and the old surface modal: one fetch.
+    const discoverId = app?.source === 'discover' ? app.id : (managedQuery.data?.directId ?? null);
+    const discoverQuery = useQuery({
+        queryKey: ['discover-connector-detail', projectId, discoverId],
+        queryFn: () => getDiscoverConnector(projectId, discoverId ?? ''),
+        enabled: discoverId !== null,
+        staleTime: 15 * 60_000,
+    });
+    const twinName = app?.source === 'discover' ? (discoverQuery.data?.item.name ?? null) : null;
+    const managedTwinQuery = useQuery({
+        queryKey: ['easy-connect-twin', projectId, provider, twinName],
+        queryFn: async () => {
+            const page = await listConnectCatalogPage({
+                projectId,
+                provider,
+                q: twinName ?? '',
+                limit: 10,
+            });
+            const key = appNameKey(twinName ?? '');
+            return page.apps.find((candidate) => appNameKey(candidate.name) === key) ?? null;
+        },
+        enabled: twinName !== null &&
+            (connectStatus.state === 'configured' || connectStatus.state === 'unknown'),
+        staleTime: 5 * 60_000,
+    });
+    // The query that resolves this app, or `null` when nothing can.
+    const appQuery = app?.source === 'discover' ? discoverQuery : managedRunnable ? managedQuery : null;
+    const waiting = managedSlug !== null && connectStatus.state === 'asking';
+    const detail = discoverId !== null ? discoverQuery.data : undefined;
+    const managed = (managedRunnable ? managedQuery.data : managedTwinQuery.data) ?? undefined;
+    // The managed App as one more way to connect, after the API/MCP surfaces.
+    const managedSurface = managed
+        ? {
+            key: `managed:${managed.slug}`,
+            label: t('managedSurfaceLabel', { name: managed.name }),
+            kind: 'App',
+            target: easyConnectInstallTarget(managed),
+        }
+        : null;
+    const resolved = detail
+        ? {
+            name: managed?.name ?? detail.item.name,
+            description: detail.item.description ?? managed?.description ?? null,
+            // The managed logo is sharp where the catalogue's favicon is not.
+            icon: managed?.imgSrc ?? detail.item.icon,
+            surfaces: [
+                ...installableVariants(detail.variants).map((variant, index) => ({
+                    key: `${variant.kind}:${variant.id}`,
+                    label: variant.name,
+                    kind: surfaceLabel(variant.kind),
+                    target: discoverInstallTarget(surfaceInstallName(detail.item.name, variant, index), variant),
+                })),
+                ...(managedSurface ? [managedSurface] : []),
+            ],
+            references: detail.variants
+                .filter((variant) => !variant.connector)
+                .map((variant) => ({
+                key: `${variant.kind}:${variant.id}`,
+                label: variant.name,
+                kind: surfaceLabel(variant.kind),
+                href: variant.docs ?? variant.url,
+            })),
+        }
+        : managed
+            ? {
+                name: managed.name,
+                description: managed.description,
+                icon: managed.imgSrc,
+                surfaces: managedSurface ? [managedSurface] : [],
+                references: [],
+            }
+            : null;
+    return { appQuery, waiting, resolved, managed, detail, provider };
+}

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

@@ -0,0 +1,51 @@
+import type { AdminConnector, Connection } from '@kortix/sdk';
+interface ConnectorAccountsProps {
+    projectId: string;
+    connector: AdminConnector;
+    displayName: string;
+    canWrite: boolean;
+    canManageConnections: boolean;
+    onChanged: () => void;
+    onRemoved: () => void;
+    /** Start a session bound to this exact account. */
+    onStartSession: (connection: Connection) => void;
+    /** Where credential entry opens. Omitted = the list's own dialog. */
+    onSetCredential?: (target: {
+        connectionId: string;
+        owner: 'project' | 'me';
+    }) => void;
+    /** Show the ⓘ that explains accounts. The page sets it; the modal does not. */
+    showAccountInfo?: boolean;
+    /** Sign an unsigned account in (the row's Connect). */
+    onConnect?: (connection: Connection) => void;
+    /** Bumped to open "Add account" (a header button, or right after Install). */
+    addRequest?: number;
+    onAddRequestHandled?: () => void;
+}
+/**
+ * Accounts — which accounts this connector runs as.
+ *
+ * A connector is a declared capability with no identity; an account
+ * (`connector_connections` row) is an authorized identity on it, owned by the
+ * project (shared) or by one member — and BOTH can coexist on the very same
+ * connector, direct or managed alike. So every provider except Channel
+ * (`ChannelConnectionSection`, its own per-platform connect flow) gets the
+ * same one-list `ConnectionsList`:
+ *
+ * - Managed (Composio/Pipedream) — "Add" runs the hosted Connect Link OAuth
+ *   flow (`usePipedreamConnectProject` / `usePipedreamConnectMember`).
+ * - Direct (openapi/http/mcp/graphql/postman/…) — "Add" creates the account
+ *   then opens `SetCredentialModal` for it, wired inside `ConnectionsList`
+ *   itself. Every row also gets a "Set credential" action to re-enter it.
+ * - Computer — each account is one paired machine. "Add" opens
+ *   `ComputerConnectModal` (connect this machine, or download + npx) instead
+ *   of credential entry. Everything else — the row, Share, the menu — is the
+ *   same as every other connector.
+ *
+ * `ConnectionSection` (the transport config — slug/provider/spec/auth/
+ * headers) is NOT mounted here any more. It moved to the Settings tab
+ * (`connector-settings.tsx`) — see that file's docstring. Mounting it here
+ * too would print the same form twice.
+ */
+export declare function ConnectorAccounts({ projectId, connector, displayName, canWrite, canManageConnections, onChanged, onRemoved, onStartSession, onSetCredential, showAccountInfo, onConnect, addRequest, onAddRequestHandled, }: ConnectorAccountsProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { Label } from '../../../primitives/label.js';
+import { ChannelConnectionSection, ConnectionRoster, ConnectionsList, } from '../../sections/connectors-view.js';
+import { isManagedConnectorProvider } from '../provider-label.js';
+import { AccountInfo } from './account-info.js';
+/**
+ * Accounts — which accounts this connector runs as.
+ *
+ * A connector is a declared capability with no identity; an account
+ * (`connector_connections` row) is an authorized identity on it, owned by the
+ * project (shared) or by one member — and BOTH can coexist on the very same
+ * connector, direct or managed alike. So every provider except Channel
+ * (`ChannelConnectionSection`, its own per-platform connect flow) gets the
+ * same one-list `ConnectionsList`:
+ *
+ * - Managed (Composio/Pipedream) — "Add" runs the hosted Connect Link OAuth
+ *   flow (`usePipedreamConnectProject` / `usePipedreamConnectMember`).
+ * - Direct (openapi/http/mcp/graphql/postman/…) — "Add" creates the account
+ *   then opens `SetCredentialModal` for it, wired inside `ConnectionsList`
+ *   itself. Every row also gets a "Set credential" action to re-enter it.
+ * - Computer — each account is one paired machine. "Add" opens
+ *   `ComputerConnectModal` (connect this machine, or download + npx) instead
+ *   of credential entry. Everything else — the row, Share, the menu — is the
+ *   same as every other connector.
+ *
+ * `ConnectionSection` (the transport config — slug/provider/spec/auth/
+ * headers) is NOT mounted here any more. It moved to the Settings tab
+ * (`connector-settings.tsx`) — see that file's docstring. Mounting it here
+ * too would print the same form twice.
+ */
+export function ConnectorAccounts({ projectId, connector, displayName, canWrite, canManageConnections, onChanged, onRemoved, onStartSession, onSetCredential, showAccountInfo = false, onConnect, addRequest, onAddRequestHandled, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const isManagedProvider = isManagedConnectorProvider(connector.provider);
+    const isChannel = connector.provider === 'channel';
+    const showRoster = isManagedProvider && canManageConnections && connector.authorizationStrategy === 'user';
+    if (isChannel) {
+        return (_jsx(ChannelConnectionSection, { projectId: projectId, connector: connector, onChanged: onChanged, onRemoved: onRemoved, canWrite: canWrite }));
+    }
+    return (_jsxs("div", { className: "space-y-5", children: [_jsx(ConnectionsList, { projectId: projectId, connector: connector, displayName: displayName, canManageConnections: canManageConnections, onChanged: onChanged, onStartSession: onStartSession, onSetCredential: onSetCredential, onConnect: onConnect, addRequest: addRequest, onAddRequestHandled: onAddRequestHandled, addVariant: "default", titleAddon: showAccountInfo ? (_jsx(AccountInfo, { projectId: projectId, displayName: displayName })) : undefined }), showRoster ? (_jsxs("section", { className: "space-y-2", children: [_jsx(Label, { children: tI18nComplete.raw('text74156382383b') }), _jsx(ConnectionRoster, { projectId: projectId, connectorSlug: connector.slug, displayName: displayName })] })) : null] }));
+}

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

@@ -0,0 +1,13 @@
+import { type AdminConnector, type ConnectorPolicyRule } from '@kortix/sdk';
+export declare function ConnectorAdvancedTools({ connector, advancedRules, toolRules, loaded, frozen, busy, saving, sensitivePending, onSave, onSensitive, }: {
+    connector: AdminConnector;
+    advancedRules: ConnectorPolicyRule[];
+    toolRules: ConnectorPolicyRule[];
+    loaded: boolean;
+    frozen: boolean;
+    busy: boolean;
+    saving: boolean;
+    sensitivePending: boolean;
+    onSave: (rules: ConnectorPolicyRule[]) => void;
+    onSensitive: (next: boolean) => void;
+}): import("react").JSX.Element;

package/dist/customize/connectors/detail/connector-advanced-tools.js

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { PlusIcon, TrashIcon } from '@phosphor-icons/react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../../primitives/disclosure.js';
+import { Input } from '../../../primitives/input.js';
+import { Label } from '../../../primitives/label.js';
+import Loading from '../../../primitives/loading.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../primitives/select.js';
+import { Switch } from '../../../primitives/switch.js';
+import { draftToRules, seedPatternDraft, signPatternRules, } from '../tools/pattern-rule-draft.js';
+import { POLICY_CHOICE_LABEL } from '../tools/tool-policy-labels.js';
+const PATTERN_ACTIONS = ['block', 'require_approval', 'always_run'];
+let patternRowSequence = 0;
+function nextPatternRowId() {
+    return `pattern:${++patternRowSequence}`;
+}
+export function ConnectorAdvancedTools({ connector, advancedRules, toolRules, loaded, frozen, busy, saving, sensitivePending, onSave, onSensitive, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const hasTools = connector.actions.length > 0;
+    // ── Advanced: pattern rules ─────────────────────────────────────────────
+    const advancedSignature = useMemo(() => signPatternRules(advancedRules), [advancedRules]);
+    const [draft, setDraft] = useState([]);
+    // Reseed only when the SERVER's pattern set actually changes. A per-tool
+    // write invalidates the same query, and reseeding on every refetch would
+    // wipe a half-typed rule out from under the user.
+    //
+    // `signPatternRules` normalizes through `orderPolicyRules` before comparing,
+    // because the optimistic write at `onMutate` reorders the very array this
+    // guard reads. Without that, one click on any per-tool segment moved the
+    // rules, changed the signature, and reseeded — see `pattern-rule-draft.ts`.
+    const seededSignature = useRef(null);
+    useEffect(() => {
+        if (!loaded)
+            return;
+        if (seededSignature.current === advancedSignature)
+            return;
+        seededSignature.current = advancedSignature;
+        setDraft(seedPatternDraft(advancedRules, nextPatternRowId));
+    }, [loaded, advancedSignature, advancedRules]);
+    const draftSignature = signPatternRules(draftToRules(draft));
+    const advancedDirty = draftSignature !== advancedSignature;
+    const [advancedOpen, setAdvancedOpen] = useState(false);
+    // Reveal existing pattern rules ONCE, when they first arrive from the policies
+    // query — not on every change to their count. Keyed on the count alone, this
+    // re-fired whenever a rule was added or removed, so the panel sprang back open
+    // moments after the user collapsed it, which read as the disclosure opening by
+    // itself. After the first reveal the panel is the user's to control.
+    const revealedExistingRules = useRef(false);
+    useEffect(() => {
+        if (revealedExistingRules.current || advancedRules.length === 0)
+            return;
+        revealedExistingRules.current = true;
+        setAdvancedOpen(true);
+    }, [advancedRules.length]);
+    const savePatternRules = () => onSave([...toolRules, ...draftToRules(draft)]);
+    return (_jsx(_Fragment, { children: hasTools || advancedRules.length > 0 ? (_jsxs(Disclosure, { variant: "outline", className: "overflow-hidden", open: advancedOpen, onOpenChange: setAdvancedOpen, children: [_jsx(DisclosureTrigger, { variant: "outline", children: _jsxs(Button, { variant: "popover", children: [tI18nComplete.raw('text9f088dbebd6c'), advancedRules.length > 0 ? (_jsx(Badge, { variant: "secondary", size: "sm", children: advancedRules.length })) : null, _jsx("span", { className: "text-muted-foreground ml-auto text-xs font-normal", children: tI18nComplete.raw('text59da2efb2423') })] }) }), _jsx(DisclosureContent, { variant: "outline", contentClassName: "border-border border-t", children: _jsxs("div", { className: "space-y-5 px-4 py-5", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('text594bdd4c19b2') }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: tI18nComplete.raw('textf900377c2048') })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [sensitivePending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, _jsx(Switch, { checked: connector.sensitive === true, onCheckedChange: onSensitive, disabled: frozen || sensitivePending, "aria-label": tI18nComplete.raw('text594bdd4c19b2') })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: tI18nComplete.raw('text380c0b05bcfc') }), _jsxs("p", { className: "text-muted-foreground text-xs text-pretty", children: [tI18nComplete.raw('textde00adeaf21b'), _jsx("code", { className: "font-mono", children: "delete_*" }), tI18nComplete.raw('text3a13855164e7'), _jsx("code", { className: "font-mono", children: "/^send/i" }), tI18nComplete.raw('texte45481e75a5e')] }), draft.map((row) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: row.match, placeholder: tI18nComplete.raw('text74ad536dca05'), variant: "popover", size: "xs", className: "flex-1 font-mono", "aria-label": tI18nComplete.raw('text5c9c672f4cd3'), disabled: frozen, onChange: (event) => setDraft((rows) => rows.map((candidate) => candidate.id === row.id
+                                                    ? { ...candidate, match: event.target.value }
+                                                    : candidate)) }), _jsxs(Select, { value: row.action, disabled: frozen, onValueChange: (next) => setDraft((rows) => rows.map((candidate) => candidate.id === row.id
+                                                    ? {
+                                                        ...candidate,
+                                                        action: next === 'block' || next === 'always_run'
+                                                            ? next
+                                                            : 'require_approval',
+                                                    }
+                                                    : candidate)), children: [_jsx(SelectTrigger, { className: "h-8 w-[104px] shrink-0 text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { className: "rounded-lg", children: PATTERN_ACTIONS.map((action) => (_jsx(SelectItem, { value: action, className: "text-xs", children: POLICY_CHOICE_LABEL[action] }, action))) })] }), _jsx(Button, { size: "icon", variant: "ghost", className: "hover:text-destructive size-8 shrink-0", "aria-label": tI18nComplete('texte2cbd4618228', {
+                                                    value0: row.match || '(empty)',
+                                                }), disabled: frozen, onClick: () => setDraft((rows) => rows.filter((candidate) => candidate.id !== row.id)), children: _jsx(TrashIcon, { className: "size-3.5 shrink-0" }) })] }, row.id))), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { size: "sm", variant: "outline", className: "h-8 gap-1.5 text-xs", disabled: frozen, onClick: () => setDraft((rows) => [
+                                                    ...rows,
+                                                    { id: nextPatternRowId(), match: '', action: 'require_approval' },
+                                                ]), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('texta27cff51a2e0')] }), advancedDirty ? (_jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx(Button, { size: "sm", variant: "outline-ghost", className: "h-8 text-xs", disabled: busy, onClick: () => setDraft(seedPatternDraft(advancedRules, nextPatternRowId)), children: tI18nComplete.raw('texteb1a70e39274') }), _jsxs(Button, { size: "sm", className: "h-8 gap-1.5 text-xs", disabled: frozen || busy, onClick: savePatternRules, children: [saving ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, tI18nComplete.raw('texte5dbdffb8816')] })] })) : null] })] })] }) })] })) : null }));
+}

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

@@ -0,0 +1,10 @@
+import type { ComponentProps } from 'react';
+import { ConnectorAccounts } from './connector-accounts.js';
+import { ConnectorSettings } from './connector-settings.js';
+import { useConnectorDetail } from './use-connector-detail.js';
+/** Page and modal share tab content, while retaining their distinct account actions. */
+export declare function ConnectorDetailTabs({ accounts, settings, connectionsQuery, }: {
+    accounts: ComponentProps<typeof ConnectorAccounts>;
+    settings: ComponentProps<typeof ConnectorSettings>;
+    connectionsQuery: ReturnType<typeof useConnectorDetail>['connectionsQuery'];
+}): import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../primitives/button.js';
+import { TabsContent } from '../../../primitives/tabs.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { ConnectorAccounts } from './connector-accounts.js';
+import { ConnectorSettings } from './connector-settings.js';
+import { ConnectorTools } from './connector-tools.js';
+import { ConnectorTriggers } from './connector-triggers.js';
+/** Page and modal share tab content, while retaining their distinct account actions. */
+export function ConnectorDetailTabs({ accounts, settings, connectionsQuery, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const { projectId, connector, displayName, canWrite, onChanged } = accounts;
+    return (_jsxs(_Fragment, { children: [_jsx(TabsContent, { value: "accounts", children: connectionsQuery.isError ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('textbda9de7688c0'), description: connectionsQuery.error instanceof Error
+                        ? connectionsQuery.error.message
+                        : tI18nComplete.raw('textd8eda34a089a'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void connectionsQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) })) : (_jsx(ConnectorAccounts, { ...accounts })) }), _jsx(TabsContent, { value: "tools", children: _jsx(ConnectorTools, { projectId: projectId, connector: connector, displayName: displayName, canWrite: canWrite, onChanged: onChanged }) }), _jsx(TabsContent, { value: "triggers", children: _jsx(ConnectorTriggers, { projectId: projectId, connector: connector, displayName: displayName }) }), _jsx(TabsContent, { value: "settings", children: _jsx(ConnectorSettings, { ...settings }) })] }));
+}

package/dist/customize/connectors/detail/connector-header-cta.d.ts

@@ -0,0 +1,23 @@
+import type { AdminConnector } from '@kortix/sdk';
+/**
+ * The connector header carries ONE action, chosen by the account picture,
+ * never by an owner mode:
+ *   connect — no account yet;
+ *   finish  — accounts exist but none is usable (the fix is per row);
+ *   replace — connected with exactly one account: re-authorize THAT one.
+ * Two or more working accounts have their own row menus, so the header shows
+ * nothing.
+ *
+ * A computer is different: every member pairs their OWN machine, so it needs
+ * no write access and shows until the caller can use a computer here.
+ */
+export type ConnectorHeaderCta = 'connect' | 'finish' | 'replace' | null;
+export declare function connectorHeaderCta(input: {
+    provider: AdminConnector['provider'];
+    canWrite: boolean;
+    /** A managed provider, or a direct connector with an `authSecret`. */
+    hasAuth: boolean;
+    connected: boolean;
+    accountCount: number;
+    hasComputer: boolean;
+}): ConnectorHeaderCta;

package/dist/customize/connectors/detail/connector-header-cta.js

@@ -0,0 +1,9 @@
+export function connectorHeaderCta(input) {
+    if (input.provider === 'computer')
+        return input.hasComputer ? null : 'connect';
+    if (!input.canWrite || input.provider === 'channel' || !input.hasAuth)
+        return null;
+    if (!input.connected)
+        return input.accountCount === 0 ? 'connect' : 'finish';
+    return input.accountCount === 1 ? 'replace' : null;
+}

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

@@ -0,0 +1,32 @@
+import { type AdminConnector } from '@kortix/sdk';
+interface ConnectorModalProps {
+    projectId: string;
+    /** The connector to show, or `null` when it has not resolved yet. `open` is
+     *  driven by the SELECTION, not by this — see `shared/detail-selection.ts`. */
+    connector: AdminConnector | null;
+    canWrite: boolean;
+    open: boolean;
+    /** Open on a selection whose record is still loading — `?c=<slug>` on a cold
+     *  page, which is how every OAuth 2.0 return arrives. Renders the shell so
+     *  the modal is present from the first frame instead of appearing on its own
+     *  once the list lands. */
+    isResolving?: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Refetch every authorization-derived query. Every mutation below calls it. */
+    onChanged: () => void;
+    /** The connector no longer exists — clear the selection and close. */
+    onRemoved: () => void;
+}
+/**
+ * Connector detail — header identity + tab nav + content pane.
+ *
+ * Header: icon, name, description, primary connect action.
+ * Left: Accounts / Tools / Triggers / Settings nav.
+ * Right: the active tab.
+ *
+ * `ConnectorModalBody` is keyed on `connector.slug` so picking a different card
+ * while the modal stays open resets the active tab without remounting
+ * `Modal`/`ModalContent` (which would replay the open animation).
+ */
+export declare function ConnectorModal({ projectId, connector, canWrite, open, isResolving, onOpenChange, onChanged, onRemoved, }: ConnectorModalProps): import("react").JSX.Element;
+export {};