@kortix/ui 0.14.7 → 0.14.9

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

@@ -1,25 +1,33 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DetailPageShell } from './detail-page-shell.js';
-import { getDiscoverConnector, getProjectDetail, listConnectors } from '@kortix/sdk';
+import { ConnectorLogo } from '../../../internal/connector-logo/connector-logo.js';
+import { ChannelHeroLogoInHeader } from '../../sections/component/channel-hero-frame.js';
+import { discoverLogoSource } from '../../../internal/connector-logo/connector-logo-source.js';
+import { ComputerAppPage } from './computer-app-page.js';
+import { getDiscoverConnector, getDiscoverConnectorTools, getProjectDetail, listConnections, listConnectors, } from '@kortix/sdk';
 import { contract, FRESHNESS, qk, useProjectAccountId } from '@kortix/sdk/react';
-import { ArrowSquareOutIcon, CaretLeftIcon, CaretRightIcon, GlobeIcon, PlugIcon, } from '@phosphor-icons/react';
+import { ArrowSquareOutIcon, CaretLeftIcon, CaretRightIcon, DotsThreeIcon, 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 { UiLink as Link, useUiRouter, useUiSearchParams } from '../../../providers/ui-provider.js';
+import { Fragment, useEffect, useState } from 'react';
 import { Badge } from '../../../primitives/badge.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../../primitives/dropdown-menu.js';
+import { humanizeToolName, toolBucket } from '../tools/tool-groups.js';
+import { connectorAccounts } from './use-connector-detail.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, discoverEntryIcon, } from '../catalog/catalog-entry.js';
+import { appNameKey, catalogEntryConnectors, connectToolkitApp, } 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 { COMPUTER_APP_ID, appHref, appRefFromLocation, connectorHref, connectorsHref, waysFromParams, } from '../connector-routes.js';
 import { discoverInstallTarget, easyConnectInstallTarget, } from '../install/install.js';
 import { InstallButton } from '../install/install-menu.js';
+import { InstallDialog, wayDescription } from '../install/install-dialog.js';
+import { wayKindLabel } from '../install/way-kind.js';
 import { installableVariants, surfaceInstallName, } from '../install/pick-surface.js';
 import { mcpServerFor } from '../install/mcp-first.js';
 import { useInstall } from '../install/use-install.js';
@@ -28,7 +36,6 @@ 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`). */
@@ -36,23 +43,9 @@ import { ConnectorStatusBadge } from './status-badge.js';
 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());
-/**
- * The app page's icon tile (`ConnectorAppIcon`, size `lg`): the resolved
- * favicon, or the glyph tile when the record has none — and the same glyph
- * tile when the URL fails to load, which used to render the browser's
- * broken-image glyph beside the title. Mirrors the catalogue card's
- * `ConnectorIcon`. The latch is per URL (`failedUrl`), so the late-arriving
- * managed logo — which swaps the URL — gets a fresh try without a call-site
- * key.
- */
-function AppIcon({ icon, name }) {
-    const [failedUrl, setFailedUrl] = useState(null);
-    if (!icon || failedUrl === icon) {
-        return _jsx(EntityAvatar, { icon: GlobeIcon, size: "lg", label: name });
-    }
-    return (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-sm", children: _jsx("img", { src: icon, alt: "", width: 36, height: 36, referrerPolicy: "no-referrer", className: "size-9 object-contain", onError: () => setFailedUrl(icon) }) }));
-}
+const surfaceLabel = (kind) => wayKindLabel(kind);
+/** Tools shown before "Show all". */
+const TOOLS_PREVIEW = 40;
 /**
  * `/projects/<id>/customize/connectors/<app>` — one catalogue app: what it is,
  * the one Install button, the connectors this project already has for it, and
@@ -61,13 +54,23 @@ function AppIcon({ icon, name }) {
  * It replaces the surface-picker modal. A non-default surface is chosen only
  * here, under "Ways to connect".
  */
+const ChannelsSection = lazyClient(() => import('../../sections/view/channels-view.js').then((m) => m.ChannelsSection));
 const AddMcpServerDialog = lazyClient(() => import('../add-mcp/add-mcp-server-dialog.js').then((m) => m.AddMcpServerDialog));
 export function AppPage({ projectId, appSegment }) {
+    const search = useUiSearchParams();
+    if (search?.get('id') === COMPUTER_APP_ID)
+        return _jsx(ComputerAppPage, { projectId: projectId });
+    return _jsx(CatalogAppPage, { projectId: projectId, appSegment: appSegment });
+}
+function CatalogAppPage({ projectId, appSegment }) {
     const t = useTranslations('connectorPages');
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const tSharing = useTranslations('accessSharing');
     const search = useUiSearchParams();
+    const router = useUiRouter();
     const app = appRefFromLocation(appSegment, search);
+    // `?ways=1`: stay on this page for an installed app (another profile).
+    const ways = waysFromParams(search);
     const accountId = useProjectAccountId(projectId);
     const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_CONNECTOR_WRITE, { accountId }).allowed ===
         true;
@@ -76,6 +79,12 @@ export function AppPage({ projectId, appSegment }) {
         queryFn: () => listConnectors(projectId, { includeSchemas: false }),
         ...contract(FRESHNESS.connectors),
     });
+    // Same key and fetcher as the Accounts tab: the "Installed" rows count accounts like it.
+    const connectionsQuery = useQuery({
+        queryKey: ['connections', projectId],
+        queryFn: () => listConnections(projectId),
+        staleTime: 30_000,
+    });
     const projectQuery = useQuery({
         queryKey: qk.project.detail(projectId),
         queryFn: () => getProjectDetail(projectId),
@@ -85,18 +94,46 @@ export function AppPage({ projectId, appSegment }) {
     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);
+    // Which way's tools the Tools section lists: the recommended one until the
+    // user picks another under "Ways to connect".
+    const [toolsWay, setToolsWay] = useState(null);
+    const [allTools, setAllTools] = useState(false);
+    const { appQuery, resolved, managed, detail, provider } = useAppData(projectId, app);
+    const shownWay = resolved?.surfaces.find((surface) => surface.variantId !== null && surface.variantId === toolsWay) ??
+        resolved?.surfaces.find((surface) => surface.variantId !== null) ??
+        null;
+    const toolsQuery = useQuery({
+        queryKey: ['discover-connector-tools', projectId, detail?.item.id ?? null, shownWay?.variantId ?? null],
+        queryFn: () => getDiscoverConnectorTools(projectId, detail?.item.id ?? '', shownWay?.variantId ?? undefined),
+        enabled: Boolean(detail && shownWay?.variantId),
+        staleTime: 15 * 60_000,
+        retry: false,
+    });
+    const { install, ask, confirm, request, setRequest, 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);
+    // One page per app: once the project has exactly one profile of it, the
+    // app's page is that connector's page. A Kortix channel keeps its own page.
+    const installedOnce = app && resolved && detail?.item.kind !== 'kortix' && !ways
+        ? catalogEntryConnectors(connectorsQuery.data?.connectors ?? [], {
+            source: app.source,
+            slug: app.slug,
+            name: resolved.name,
+        })
+        : [];
+    const redirectTo = installedOnce.length === 1 && app ? connectorHref(projectId, installedOnce[0].slug, { app }) : null;
+    useEffect(() => {
+        if (redirectTo)
+            router.replace(redirectTo);
+    }, [redirectTo, router]);
     // 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))) {
+    if (redirectTo || (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.
@@ -113,32 +150,68 @@ export function AppPage({ projectId, appSegment }) {
     // `catalogEntryConnectors` reads only `source`, `slug`, and `name`.
     const entry = { source: app.source, slug: app.slug, name: resolved.name };
     const inProject = catalogEntryConnectors(connectors, entry);
+    // `GMAIL_SEND_EMAIL` reads "Send email" on the Gmail page, as on the Tools tab.
+    const appNames = [app.slug, resolved.name];
     const installing = pendingKey === app.slug;
+    /** Install one way: a one-click MCP server opens the MCP dialog, which
+     *  names the profile; every other way asks for the name first. */
+    const startInstall = (key, surface, name, asNewProfile = false) => {
+        const target = surface.target;
+        if (!target)
+            return;
+        setPendingControl(key);
+        // The way the user picked is the way installed.
+        const mcpUrl = surface.kind === 'mcp' && surface.oneClick ? surface.url : null;
+        const askName = () => ask({ target, way: { kind: surface.kind, oneClick: surface.oneClick }, connectors, app, asNewProfile });
+        if (!mcpUrl) {
+            askName();
+            return;
+        }
+        setPendingKey(app.slug);
+        void mcpServerFor(projectId, { name, directMcpUrl: mcpUrl }).then((server) => {
+            setPendingKey(null);
+            if (server)
+                setMcpApp(server);
+            else
+                askName();
+        });
+    };
     /** `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;
+    // The profile this way already installed, if any: its action is Add
+    // account on that profile, never a second profile.
+    const installedFor = (surface) => surface.target ? inProject.find((connector) => connector.provider === surface.target?.provider) ?? null : null;
+    const installMenu = (key, surface, variant, name) => {
+        const installed = installedFor(surface);
+        if (installed && !surface.setupHref) {
+            const addAccount = (_jsx(Button, { asChild: true, size: "sm", variant: variant, className: "shrink-0", children: _jsx(Link, { href: connectorHref(projectId, installed.slug, { app, addAccount: true }), "aria-label": t('addAccountNamed', { name: connectorDisplayName(installed) }), children: tSharing('addAccount') }) }));
+            // The header holds one action. A second profile of an installed way is
+            // rare and quiet: the row's overflow menu, never a button beside Add account.
+            if (key === 'header' || !canWrite)
+                return addAccount;
+            return (_jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [addAccount, _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "icon-sm", variant: "ghost", "aria-label": t('wayMoreNamed', { name }), disabled: installing, children: _jsx(DotsThreeIcon, { className: "size-4 shrink-0" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: _jsx(DropdownMenuItem, { onSelect: () => startInstall(key, surface, name, true), children: t('anotherProfileTitle') }) })] })] }));
+        }
+        return surface.setupHref ? (_jsx(Button, { asChild: true, size: "sm", variant: variant, className: "shrink-0", children: _jsx(Link, { href: surface.setupHref, "aria-label": t('setUpNamed', { name }), children: t('waySetUp') }) })) : canWrite ? (_jsx(InstallButton, { label: t('install'), "aria-label": t('installNamed', { name }), variant: variant, onInstall: () => startInstall(key, surface, name), pending: installing && pendingControl === key, disabled: installing })) : null;
+    };
     const primary = resolved.surfaces[0] ?? null;
-    const waysCount = resolved.surfaces.length + resolved.references.length;
+    // A Kortix channel's own page draws the channel as its hero; the ways list
+    // keeps only the other ways (the vendor's MCP server, Composio, the API).
+    // Computer has a page of its own (`ComputerAppPage`).
+    const kortixApp = detail?.item.kind === 'kortix' ? (detail.item.kortix?.app ?? null) : null;
+    const channelPlatform = kortixApp && kortixApp !== 'computer' ? kortixApp : null;
+    const waySurfaces = channelPlatform
+        ? resolved.surfaces.filter((surface) => surface.kind !== 'kortix')
+        : resolved.surfaces;
     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;
+    // its API/MCP server, the partner for a managed way.
+    const managedBy = primary?.kind === 'composio'
+        ? 'Composio'
+        : primary?.kind === 'kortix'
+            ? 'Kortix'
+            : primary?.kind === 'pipedream'
+                ? connectorRunsOver(provider)
+                : null;
     if (primary)
         infoCells.push({
             key: 'provider',
@@ -161,13 +234,38 @@ export function AppPage({ projectId, appSegment }) {
             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: [_jsx(AppIcon, { icon: resolved.icon, name: 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);
+        infoCells.push({ key: 'runs', label: t('infoRunsOver'), value: wayKindLabel(primary.kind) });
+    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: [_jsx(ConnectorLogo, { source: resolved.logo, size: "lg" }), _jsx("h1", { className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: resolved.name })] }), primary && !channelPlatform ? (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [resolved.surfaces.length > 1 && !installedFor(primary) ? (_jsx("span", { className: "text-muted-foreground text-xs", children: primary.kind === 'kortix'
+                                    ? t('setUpWhere')
+                                    : t('installsWay', { kind: wayKindLabel(primary.kind) }) })) : null, installMenu('header', primary, 'default', resolved.name) ?? (
+                            // A member without connector write: say who can, not nothing.
+                            _jsx("span", { className: "text-muted-foreground text-xs", children: t('askAdminToInstall') }))] })) : null] }), channelPlatform ? (
+            // The header above shows the app's logo: the hero below does not repeat it.
+            _jsx(ChannelHeroLogoInHeader, { children: _jsx(ChannelsSection, { projectId: projectId, platform: channelPlatform }) })) : null, !channelPlatform && (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: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: projectName ? t('installedIn', { project: projectName }) : t('installedHere') }), _jsx("ul", { className: ROW_GROUP, children: inProject.map((connector) => {
+                            const tone = connectorStatusTone(connector, connectionsQuery.data ? connectorAccounts(connectionsQuery.data.connections, connector).length : undefined);
                             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] }));
+                        }) })] })) : null, resolved.surfaces.length === 0 && resolved.references.length === 0 ? (_jsx(EmptyState, { icon: GlobeIcon, size: "sm", title: tI18nComplete.raw('text363579e1d66b'), description: tI18nComplete.raw('text4d286e47d580') })) : null, waySurfaces.length > (channelPlatform ? 0 : 1) || resolved.references.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: channelPlatform ? t('otherWaysToConnect') : t('waysToConnect') }), waySurfaces.length > 0 ? (_jsx("ul", { className: ROW_GROUP, children: waySurfaces.map((surface) => (_jsxs("li", { className: SURFACE_ROW, children: [_jsxs("span", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: surface.label }), _jsx(Badge, { variant: "muted", size: "xs", children: wayKindLabel(surface.kind) }), surface.oneClick ? (_jsx(Badge, { variant: "secondary", size: "xs", children: t('wayOneClick') })) : null, surface.recommended ? (_jsx(Badge, { variant: "success", size: "xs", children: t('wayRecommended') })) : null] }), _jsx("span", { className: "text-muted-foreground block text-xs text-pretty", children: wayDescription(t, { kind: surface.kind, oneClick: surface.oneClick }, resolved.name) })] }), surface.variantId && detail ? (_jsx(Button, { type: "button", variant: shownWay?.variantId === surface.variantId ? 'secondary' : 'outline-ghost', size: "sm", "aria-pressed": shownWay?.variantId === surface.variantId, onClick: () => {
+                                        setToolsWay(surface.variantId);
+                                        setAllTools(false);
+                                    }, children: t('wayTools') })) : null, installMenu(surface.key, surface, 'secondary', surface.label)] }, surface.key))) })) : null, resolved.references.length > 0 ? (_jsxs("p", { className: "text-muted-foreground text-xs text-pretty", children: [t('otherWaysLead'), ' ', resolved.references.map((reference, index) => (_jsxs(Fragment, { children: [index > 0 ? ', ' : null, reference.href ? (_jsxs("a", { href: reference.href, target: "_blank", rel: "noreferrer", className: "text-foreground inline-flex items-center gap-0.5 underline-offset-4 hover:underline", children: [reference.label, _jsx(ArrowSquareOutIcon, { "aria-hidden": true, className: "size-3 shrink-0" })] })) : (reference.label)] }, reference.key)))] })) : null] })) : null, shownWay ? (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: t('toolsOf', { kind: wayKindLabel(shownWay.kind) }) }), toolsQuery.data ? (_jsx("span", { className: "text-muted-foreground text-xs tabular-nums", children: t('toolsCount', { count: toolsQuery.data.total }) })) : null] }), toolsQuery.isPending ? (_jsx(Skeleton, { className: "h-24 w-full py-0" })) : toolsQuery.isError ? (_jsx("p", { className: "text-muted-foreground text-sm", children: t('toolsUnavailable') })) : toolsQuery.data && toolsQuery.data.tools.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-muted-foreground text-xs", children: t(`toolsSource_${toolsQuery.data.source}`) }), groupAppTools(allTools ? toolsQuery.data.tools : toolsQuery.data.tools.slice(0, TOOLS_PREVIEW), appNames).map((group) => (_jsxs("div", { className: "space-y-2", children: [_jsxs("h3", { className: "text-muted-foreground text-xs", children: [tI18nComplete.raw(TOOL_GROUP_LABEL[group.key]), " \u00B7 ", group.tools.length] }), _jsx("ul", { className: ROW_GROUP, children: group.tools.map((tool) => {
+                                            const title = humanizeToolName(tool.name, appNames);
+                                            return (_jsxs("li", { className: "min-w-0 px-4 py-2.5", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: title }), title !== tool.name ? (_jsx("code", { className: "text-muted-foreground max-w-full truncate font-mono text-xs", children: tool.name })) : null] }), tool.description ? (_jsx("span", { className: "text-muted-foreground block truncate text-xs", title: tool.description, children: tool.description })) : null] }, tool.name));
+                                        }) })] }, group.key))), !allTools && toolsQuery.data.tools.length > TOOLS_PREVIEW ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setAllTools(true), children: t('toolsShowAll', { count: toolsQuery.data.tools.length }) })) : null] })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: t('toolsAfterInstall', { kind: wayKindLabel(shownWay.kind) }) }))] })) : null, request ? (_jsx(InstallDialog, { appName: request.target.appName, way: request.way, open: true, pending: false, onOpenChange: (open) => !open && setRequest(null), onConfirm: confirm }, request.target.appName)) : 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] }));
+}
+const TOOL_GROUP_LABEL = {
+    read: 'textdd28b5cb26fd',
+    write: 'texted26c1af81cf',
+    unclassified: 'text7c0a91e5b3d2',
+};
+/** A catalogue way's tools in the Tools tab's buckets, by the same rule. */
+function groupAppTools(tools, appNames) {
+    const groups = { read: [], write: [], unclassified: [] };
+    for (const tool of tools) {
+        groups[toolBucket({ path: tool.name, name: tool.name, risk: tool.risk ?? 'unknown' }, appNames)].push(tool);
+    }
+    return ['read', 'write', 'unclassified']
+        .filter((key) => groups[key].length > 0)
+        .map((key) => ({ key, tools: groups[key] }));
 }
 /** The managed catalogue's `authType` as a `connectorPages` key. */
 function managedSignIn(authType) {
@@ -185,31 +283,19 @@ function readableCategory(key) {
     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);
+    // Same key as the install hook: one fetch.
+    const discoverId = app?.id ?? 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;
+    // The managed (Composio) twin found by name: it adds the sign-in, category
+    // and app-event facts, and is a way to connect when the record lists none.
+    const twinName = discoverQuery.data?.item.name ?? null;
     const managedTwinQuery = useQuery({
         queryKey: ['easy-connect-twin', projectId, provider, twinName],
         queryFn: async () => {
@@ -227,36 +313,86 @@ function useAppData(projectId, app) {
         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 appQuery = app ? discoverQuery : null;
     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
+    const managed = managedTwinQuery.data ?? undefined;
+    // The managed app as one more way to connect, after the API/MCP surfaces,
+    // unless the catalogue already lists it (it ranks every way).
+    const listsComposio = detail?.variants.some((variant) => variant.kind === 'composio') === true;
+    const managedSurface = managed && !listsComposio
         ? {
             key: `managed:${managed.slug}`,
-            label: t('managedSurfaceLabel', { name: managed.name }),
-            kind: 'App',
+            label: managed.name,
+            kind: (provider === 'pipedream' ? 'pipedream' : 'composio'),
             target: easyConnectInstallTarget(managed),
+            oneClick: true,
+            recommended: false,
+            variantId: null,
+            url: null,
         }
         : null;
+    const installable = detail ? installableVariants(detail.variants) : [];
     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 ?? discoverEntryIcon(detail.item),
+            // The catalogue card's source, so the page and the card show one logo.
+            logo: discoverLogoSource(detail.item),
+            // Server order: best way first, the recommended one marked.
             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),
-                })),
+                ...detail.variants.flatMap((variant) => {
+                    if (variant.kind === 'kortix') {
+                        return [
+                            {
+                                key: `kortix:${variant.id}`,
+                                label: variant.name,
+                                kind: 'kortix',
+                                target: null,
+                                setupHref: appHref(projectId, { source: 'discover', slug: variant.kortix?.app ?? 'kortix', id: variant.id }),
+                                oneClick: true,
+                                recommended: variant.recommended === true,
+                                variantId: null,
+                                url: null,
+                            },
+                        ];
+                    }
+                    if (variant.kind === 'composio') {
+                        return variant.composio
+                            ? [
+                                {
+                                    key: `composio:${variant.id}`,
+                                    label: variant.name,
+                                    kind: 'composio',
+                                    target: easyConnectInstallTarget(connectToolkitApp(variant.composio)),
+                                    oneClick: true,
+                                    recommended: variant.recommended === true,
+                                    variantId: variant.id,
+                                    url: null,
+                                },
+                            ]
+                            : [];
+                    }
+                    const index = installable.findIndex((candidate) => candidate.id === variant.id);
+                    const usable = installable[index];
+                    if (!usable)
+                        return [];
+                    return [
+                        {
+                            key: `${variant.kind}:${variant.id}`,
+                            label: variant.name,
+                            kind: variant.kind,
+                            target: discoverInstallTarget(surfaceInstallName(detail.item.name, usable, index), usable),
+                            oneClick: variant.oneClick === true,
+                            recommended: variant.recommended === true,
+                            variantId: variant.id,
+                            url: variant.url,
+                        },
+                    ];
+                }),
                 ...(managedSurface ? [managedSurface] : []),
             ],
             references: detail.variants
-                .filter((variant) => !variant.connector)
+                .filter((variant) => !variant.connector && variant.kind !== 'composio' && variant.kind !== 'kortix')
                 .map((variant) => ({
                 key: `${variant.kind}:${variant.id}`,
                 label: variant.name,
@@ -264,14 +400,6 @@ function useAppData(projectId, app) {
                 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 };
+        : null;
+    return { appQuery, resolved, managed, detail, provider };
 }

package/dist/customize/connectors/detail/computer-app-page.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The Computer hero, the same frame as every Kortix channel's: not connected,
+ * it pairs this machine (the sidebar's "Connect your computer" flow);
+ * connected, it names the machines and opens them. On the Computer page and in
+ * the Kortix tab of Connectors.
+ */
+export declare function ComputerHero({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;
+/**
+ * `…/connectors/computer?id=native:computer`: the Computer card's page, drawn
+ * like a Kortix channel's: the hero, then how it works and what agents may do.
+ */
+export declare function ComputerAppPage({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useTranslations } from '../../../i18n/index.js';
+import { ComputerCapabilities, ComputerConnectModal, useProjectComputerAccounts } from '../../../internal/tunnel/computer-connect.js';
+import { Button } from '../../../primitives/button.js';
+import { UiLink as Link } from '../../../providers/ui-provider.js';
+import { ChannelHeroFrame, ChannelHeroStatus } from '../../sections/component/channel-hero-frame.js';
+import { ComputerTerminalMock } from '../../sections/component/channel-mocks.js';
+import { connectorHref, connectorsHref } from '../connector-routes.js';
+import { DetailPageShell } from './detail-page-shell.js';
+/** The facts on how a computer connection works, in the order a person asks them. */
+const HOW_IT_WORKS = ['computerHow1', 'computerHow2', 'computerHow3', 'computerHow4'];
+/**
+ * The Computer hero, the same frame as every Kortix channel's: not connected,
+ * it pairs this machine (the sidebar's "Connect your computer" flow);
+ * connected, it names the machines and opens them. On the Computer page and in
+ * the Kortix tab of Connectors.
+ */
+export function ComputerHero({ projectId }) {
+    const t = useTranslations('connectorPages');
+    const tComputers = useTranslations('computers');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [connectOpen, setConnectOpen] = useState(false);
+    const { accounts, connectorAlias } = useProjectComputerAccounts(projectId, { refetchInterval: 15_000 });
+    const connected = accounts.length > 0;
+    const names = accounts.map((account) => account.label?.trim()).filter(Boolean).join(', ');
+    return (_jsxs(_Fragment, { children: [_jsx(ChannelHeroFrame, { app: "computer", title: connected ? t('computerConnectedTitle', { count: accounts.length }) : t('computerHeroTitle'), lede: t('computerHeroLede'), status: connected ? _jsx(ChannelHeroStatus, { label: tI18nComplete.raw('text22965568d22a'), detail: names || null }) : undefined, actions: connected ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", asChild: true, children: _jsxs(Link, { href: connectorHref(projectId, connectorAlias), children: [t('computerManage'), _jsx(CaretRightIcon, { className: "size-3.5 shrink-0" })] }) }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setConnectOpen(true), children: t('computerAddAnother') })] })) : (_jsx(Button, { className: "transition-transform active:scale-96", onClick: () => setConnectOpen(true), children: tComputers('connectYourComputer') })), preview: _jsx(ComputerTerminalMock, {}) }), _jsx(ComputerConnectModal, { projectId: projectId, open: connectOpen, onOpenChange: setConnectOpen })] }));
+}
+/**
+ * `…/connectors/computer?id=native:computer`: the Computer card's page, drawn
+ * like a Kortix channel's: the hero, then how it works and what agents may do.
+ */
+export function ComputerAppPage({ projectId }) {
+    const t = useTranslations('connectorPages');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    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')] }) }), _jsx(ComputerHero, { projectId: projectId }), _jsxs("section", { className: "space-y-3", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: t('computerHowTitle') }), _jsx("ol", { className: "bg-popover divide-y overflow-hidden rounded-md border", children: HOW_IT_WORKS.map((key, index) => (_jsxs("li", { className: "flex gap-3 px-4 py-3", children: [_jsx("span", { className: "text-muted-foreground w-4 shrink-0 text-sm tabular-nums", children: index + 1 }), _jsx("p", { className: "text-foreground text-sm text-pretty", children: t(key) })] }, key))) })] }), _jsxs("section", { className: "space-y-3", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: t('computerCanDoTitle') }), _jsx("div", { className: "bg-popover rounded-md border px-4", children: _jsx(ComputerCapabilities, {}) })] })] }));
+}

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

@@ -33,7 +33,9 @@ import { AccountInfo } from './account-info.js';
 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';
+    // Email's accounts are inboxes (ConnectionsList's `isEmail` branch); Slack and
+    // Teams are one install each.
+    const isChannel = connector.provider === 'channel' && connector.platform !== 'email';
     const showRoster = isManagedProvider && canManageConnections && connector.authorizationStrategy === 'user';
     if (isChannel) {
         return (_jsx(ChannelConnectionSection, { projectId: projectId, connector: connector, onChanged: onChanged, onRemoved: onRemoved, canWrite: canWrite }));

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

@@ -1,6 +1,9 @@
 import { type AdminConnector, type ConnectorPolicyRule } from '@kortix/sdk';
-export declare function ConnectorAdvancedTools({ connector, advancedRules, toolRules, loaded, frozen, busy, saving, sensitivePending, onSave, onSensitive, }: {
+export declare function ConnectorAdvancedTools({ connector, advancedRules, toolRules, loaded, frozen, busy, saving, sensitivePending, onSave, onSensitive, showSensitive, }: {
     connector: AdminConnector;
+    /** The `sensitive` flag belongs to the connector, not to a policy set, so
+     *  the set view leaves it out. */
+    showSensitive?: boolean;
     advancedRules: ConnectorPolicyRule[];
     toolRules: ConnectorPolicyRule[];
     loaded: boolean;

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

@@ -18,7 +18,7 @@ let patternRowSequence = 0;
 function nextPatternRowId() {
     return `pattern:${++patternRowSequence}`;
 }
-export function ConnectorAdvancedTools({ connector, advancedRules, toolRules, loaded, frozen, busy, saving, sensitivePending, onSave, onSensitive, }) {
+export function ConnectorAdvancedTools({ connector, advancedRules, toolRules, loaded, frozen, busy, saving, sensitivePending, onSave, onSensitive, showSensitive = true, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const hasTools = connector.actions.length > 0;
     // ── Advanced: pattern rules ─────────────────────────────────────────────
@@ -55,7 +55,7 @@ export function ConnectorAdvancedTools({ connector, advancedRules, toolRules, lo
         setAdvancedOpen(true);
     }
     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
+    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: [showSensitive ? (_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') })] })] })) : null, _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
                                                     ? {

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

@@ -0,0 +1,14 @@
+import { type AdminConnector } from '@kortix/sdk';
+/**
+ * Agents — which agents can use this connector, and with which rule set. One
+ * row per agent: a switch gives or takes the connector, and a picker chooses
+ * the rule set (Base rules or one of the connector's sets). Each change
+ * commits kortix.yaml (`PUT …/agents/{name}/scope`).
+ *
+ * Read-only for a caller without both `project.agent.write` and
+ * `project.connector.write`: the rows still say who has access.
+ */
+export declare function ConnectorAgents({ projectId, connector }: {
+    projectId: string;
+    connector: AdminConnector;
+}): import("react").JSX.Element;