@kortix/ui 0.14.8 → 0.14.9

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

@@ -4,8 +4,8 @@ import { NewEntityMenu } from '../shared/new-entity-menu.js';
 import { newConfigPrompt, useConfigureThread, } from '../use-configure-thread.js';
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 import { getProjectDetail, listConnectors } from '@kortix/sdk';
-import { contract, FRESHNESS, qk, useFeatureFlag, useProjectAccountId } from '@kortix/sdk/react';
-import { MagnifyingGlassIcon, PlugIcon, PlugsConnectedIcon } from '@phosphor-icons/react';
+import { contract, FRESHNESS, qk, useProjectAccountId } from '@kortix/sdk/react';
+import { CaretDownIcon, MagnifyingGlassIcon, PlugIcon, PlugsConnectedIcon } from '@phosphor-icons/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { lazyClient } from '../../lib/lazy-client.js';
 import { useUiPathname, useUiRouter, useUiSearchParams, useUiShallowNavigate, } from '../../providers/ui-provider.js';
@@ -13,6 +13,9 @@ import { useDebounce } from '../../hooks/use-debounce.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PoliciesPanel } from '../../workspace/projects/policies-panel.js';
 import { Button } from '../../primitives/button.js';
+import { Switch } from '../../primitives/switch.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import { cn } from '../../lib/utils.js';
 import { InputGroupSearch, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
 import Loading from '../../primitives/loading.js';
 import { Modal, ModalBody, ModalContent, ModalDescription, ModalHeader, ModalTitle, } from '../../primitives/modal.js';
@@ -23,12 +26,13 @@ import { EmptyState } from '../../primitives/empty-state.js';
 import { connectorConnectionQueryKeys, connectorSetupStatus, } from '../sections/connector-connection-form.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
 import { useProjectCan } from '../../internal/lib/use-project-can.js';
-import { ConnectorAppIcon, ConnectorConnectedMark, ConnectorStatusBadge, } from './connector-identity.js';
+import { ConnectorConnectedMark, ConnectorStatusBadge } from './connector-identity.js';
+import { ConnectorLogo } from '../../internal/connector-logo/connector-logo.js';
+import { installedConnectorLogoSource } from '../../internal/connector-logo/connector-logo-source.js';
 import { providerLabel } from './provider-label.js';
-import { ComputerConnectModal } from '../../internal/tunnel/computer-connect.js';
 import { connectedCatalogKeys, } from './catalog/catalog-entry.js';
 import { ConnectorBrowse } from './catalog/connector-browse.js';
-import { useCatalog, useConnectProviderStatus, } from './catalog/use-catalog.js';
+import { useCatalog } from './catalog/use-catalog.js';
 import { CapabilityPageShell } from '../shared/capability-page-shell.js';
 import { CatalogCard } from '../shared/catalog/catalog-card.js';
 import { catalogEmptyKind } from '../shared/catalog/catalog-empty.js';
@@ -40,13 +44,24 @@ import { connectorDisplayName, connectorSummary, filterConnectors, } from './con
 import { ConnectorMovesBanner } from './connector-moves-banner.js';
 import { appHref, appRefFromEntry, connectorHref, connectorSearchFromParams, legacyDetailRedirect, withConnectorSearch, } from './connector-routes.js';
 import { useInstall } from './install/use-install.js';
+import { InstallDialog } from './install/install-dialog.js';
+import { wayKindLabel } from './install/way-kind.js';
+/** The catalogue's type filter: every app, or the apps that
+ *  connect one way. REST covers OpenAPI documents. */
+const CATALOG_KIND_FILTERS = {
+    all: [],
+    mcp: ['mcp'],
+    composio: ['composio'],
+    openapi: ['openapi'],
+    graphql: ['graphql'],
+    kortix: ['kortix'],
+};
 /**
  * The click-gated Add form, split out of this route's initial chunk.
  *
  * It lives in `customize/sections/connectors-view.tsx` — 5,075 lines whose own
- * import list pulls `@pipedream/sdk/browser`, `HighlightedCode` (shiki),
- * `PoliciesPanel`, `DiscoverCatalogue` and `ConnectorConnectionModal`. An ES
- * module is all-or-nothing to the bundler, so one `import` line puts that
+ * import list pulls `@pipedream/sdk/browser`, `HighlightedCode` (shiki) and
+ * `PoliciesPanel`. An ES module is all-or-nothing to the bundler, so one `import` line puts that
  * entire graph in front of a page that paints a grid of cards.
  * `connector-identity.tsx` was lifted out of that file for exactly this
  * reason; a static import here is the edge that puts it straight back.
@@ -97,17 +112,13 @@ function ChannelsFallback() {
  * Channels sits LAST and outside that reasoning, because it is not a narrower
  * view of the same list — it is the other direction of the same job (who can
  * reach the agent, rather than what the agent can reach).
- *
- * All is dropped entirely on a deployment with no catalogue — see
- * `catalogueAvailable`. Without `connectors_api_discover` the catalogue is the
- * managed provider's, which answers `501` on every request unless it is
- * configured. The tab is removed rather than disabled: a disabled tab still
- * asserts that the feature exists. Connected and Channels stay either way.
  */
 const SCOPES = ['all', 'connected', 'channels'];
 const SCOPE_LABEL = {
     all: 'All',
     connected: 'Connected',
+    // The tab holds everything Kortix built (Slack, Teams, Email, Telegram and
+    // the computer). People call those channels; the catalog type stays "Kortix".
     channels: 'Channels',
 };
 /**
@@ -119,7 +130,7 @@ const SCOPE_LABEL = {
 const SCOPE_DESCRIPTION = {
     all: 'Give agents access to outside tools and data.',
     connected: 'Give agents access to outside tools and data.',
-    channels: 'Talk to your agents from the apps your team uses.',
+    channels: 'Talk to your agents from the apps your team uses, and let them work on your computer.',
 };
 /** `?scope=` is user-editable text; anything that is not a scope is All. */
 function parseScope(value) {
@@ -182,7 +193,10 @@ export function ConnectorsPage({ projectId }) {
     // The catalogue app whose own MCP server the MCP dialog connects. Null for
     // a server the user pastes (New → MCP server).
     const [mcpApp, setMcpApp] = useState(null);
-    const [computerOpen, setComputerOpen] = useState(false);
+    // The catalogue opens on the apps that connect in one click.
+    const [oneClick, setOneClick] = useState(true);
+    const [kindFilter, setKindFilter] = useState('all');
+    const kinds = useMemo(() => CATALOG_KIND_FILTERS[kindFilter], [kindFilter]);
     const tSharing = useI18nTranslations('accessSharing');
     const tPages = useI18nTranslations('connectorPages');
     const connectorsQuery = useQuery({
@@ -197,7 +211,7 @@ export function ConnectorsPage({ projectId }) {
     });
     const connectors = useMemo(() => connectorsQuery.data?.connectors ?? [], [connectorsQuery.data]);
     const connectedKeys = useMemo(() => connectedCatalogKeys(connectors), [connectors]);
-    const { installEntry, pendingKey } = useInstall(projectId, {
+    const { installEntry, pendingKey, request: installRequest, setRequest: setInstallRequest, confirm: confirmInstall } = useInstall(projectId, {
         onMcpServer: (server) => {
             setMcpApp(server);
             setPanel('mcp');
@@ -214,19 +228,6 @@ export function ConnectorsPage({ projectId }) {
     // What the card actually shows, handed to the search so typing a word the
     // user can read on screen matches the card carrying it.
     const describeConnector = useCallback((connector) => connectorSummary(connector, providerLabel(connector.provider)), []);
-    // The one gating primitive. `useFeatureFlag` reads the SAME
-    // `qk.project.detail(projectId)` entry `projectQuery` above holds, so this is
-    // the same fetch and the same fail-closed semantics — `projectQuery` stays
-    // only to surface a load FAILURE and drive Retry (see `isError`/`retry`).
-    // `connectors_v2`: the catalogue is Kortix's own MCP apps, on the Discover routes.
-    const mcpApps = useFeatureFlag(projectId, 'connectors_v2').enabled;
-    const discoverEnabled = useFeatureFlag(projectId, 'connectors_api_discover').enabled || mcpApps;
-    const emailChannelEnabled = useFeatureFlag(projectId, 'agentmail_email').enabled;
-    // One catalogue: managed apps for browsing, plus API/MCP apps in search
-    // (`useCatalog`). The probe is independent of the active scope so an absent
-    // provider cannot oscillate the catalogue between enabled and disabled.
-    const connectStatus = useConnectProviderStatus(true);
-    const catalogueAvailable = discoverEnabled || connectStatus.state !== 'absent';
     const authorizationQueryKeys = useMemo(() => connectorConnectionQueryKeys(projectId), [projectId]);
     const invalidate = useCallback(() => {
         for (const key of authorizationQueryKeys) {
@@ -236,9 +237,6 @@ export function ConnectorsPage({ projectId }) {
     // Both queries gate what this page can offer, so both have to be able to
     // report a failure and both have to be retried.
     //
-    // `projectQuery` is the SAME cache entry `useFeatureFlag` reads, and every
-    // flag read off it FAILS CLOSED: a 500 leaves `discoverEnabled` and
-    // `emailChannelEnabled` false.
     // `settled` does not save us — react-query drops `isLoading` once a query
     // has exhausted its retries, so on failure the page rendered as fully loaded
     // with capabilities silently gone. Naming only `connectorsQuery` here also
@@ -263,17 +261,7 @@ export function ConnectorsPage({ projectId }) {
     // connector than reading the ones already there, and the ones already there
     // are one click away. It also made the landing tab depend on a query, so the
     // page could settle onto a different tab than it first rendered.
-    //
-    // Unless the requested scope needs a catalogue that is not there: `?scope=`
-    // outlives the answer it was read under (a bookmark, a shared link).
-    // Reading it blindly would strand the user on a tab the strip no longer
-    // renders.
-    // Connected and Channels never need the catalogue, so they are honored
-    // either way.
-    const requestedScope = parseScope(search?.get('scope') ?? null) ?? 'all';
-    const scope = catalogueAvailable || requestedScope === 'connected' || requestedScope === 'channels'
-        ? requestedScope
-        : 'connected';
+    const scope = parseScope(search?.get('scope') ?? null) ?? 'all';
     const catalogActive = scope === 'all';
     // Channels replaces the connector list rather than narrowing it, so the
     // controls that only make sense over that list come off with it: the search
@@ -282,19 +270,14 @@ export function ConnectorsPage({ projectId }) {
     // it — so it needs neither, and leaving them on screen would offer to search
     // a list that is not there.
     const channelsActive = scope === 'channels';
-    // The scopes the strip actually offers. Filters out All when
-    // there is no catalogue to browse — see `catalogueAvailable` above and this
-    // component's header comment. Connected and Channels are never filtered:
-    // every deployment has its own connectors and its own inbound channels.
-    const visibleScopes = catalogueAvailable ? SCOPES : SCOPES.filter((s) => s !== 'all');
     // The machine list answers 503 on a deployment with computers disabled, so
     // the Computer card shows only where a computer can be connected.
     const computersEnabled = useTunnelConnections({ refetchInterval: false }).isSuccess;
     const catalog = useCatalog(projectId, query, {
         enabled: catalogActive,
-        discoverEnabled,
-        mcpApps,
         computers: computersEnabled,
+        oneClick,
+        kinds,
     });
     const filtered = useMemo(() => filterConnectors(connectors, { query, describe: describeConnector }), [connectors, query, describeConnector]);
     // The All tab shows the project's own connectors too (KRTX-2531): a
@@ -306,19 +289,22 @@ export function ConnectorsPage({ projectId }) {
     const emptyKind = catalogEmptyKind(connectors.length, filtered.length);
     // One card shape for the project's own connectors: the Connected tab's grid
     // and the All tab's "Your connectors" section (KRTX-2531) render it alike.
-    const ownConnectorCard = (connector) => (_jsx(CatalogCard, { variant: "plain", leading: _jsx(ConnectorAppIcon, { connector: connector, size: "lg" }), title: connectorDisplayName(connector), subtitle: _jsx("span", { className: "text-muted-foreground text-xs", children: describeConnector(connector) }), badges: _jsx(ConnectorStatusBadge, { connector: connector }), trailing: connectorSetupStatus(connector) === 'connected' ? _jsx(ConnectorConnectedMark, {}) : undefined, href: connectorHref(projectId, connector.slug) }, connector.slug));
-    // The Computer card opens the existing computer connector once there is
-    // one: adding a computer is adding an account to it.
-    const computerConnector = connectors.find((connector) => connector.provider === 'computer');
-    const catalogHref = useCallback((entry) => {
-        const app = appRefFromEntry(entry);
-        if (app)
-            return appHref(projectId, app);
-        return computerConnector ? connectorHref(projectId, computerConnector.slug) : null;
-    }, [computerConnector, projectId]);
-    // Stable, like `catalogHref`: the browse cards are `memo`'d, and an inline
-    // arrow here would re-render every one of them on each page render.
-    const openComputer = useCallback(() => setComputerOpen(true), []);
+    const ownConnectorCard = (connector) => (_jsx(CatalogCard, { variant: "plain", leading: _jsx(ConnectorLogo, { source: installedConnectorLogoSource(connector), size: "lg" }), title: connectorDisplayName(connector), subtitle: _jsx("span", { className: "text-muted-foreground text-xs", children: describeConnector(connector) }), badges: _jsx(ConnectorStatusBadge, { connector: connector }), trailing: connectorSetupStatus(connector) === 'connected' ? _jsx(ConnectorConnectedMark, {}) : undefined, href: connectorHref(projectId, connector.slug) }, connector.slug));
+    // Quiet on purpose: a filter, not a second tab strip.
+    const catalogFilters = (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "text", size: "sm", className: cn('gap-1 px-0 transition-colors', kindFilter !== 'all' && 'text-foreground'), "aria-label": tPages('typeFilterLabel'), children: [kindFilter === 'all'
+                                    ? tPages('typeFilterAll')
+                                    : kindFilter === 'kortix'
+                                        ? tPages('typeFilterKortix')
+                                        : wayKindLabel(kindFilter), _jsx(CaretDownIcon, { className: "size-3 shrink-0" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-40", 
+                        // A pointer pick returns no focus ring to the quiet trigger.
+                        onCloseAutoFocus: (event) => event.preventDefault(), children: _jsx(DropdownMenuRadioGroup, { value: kindFilter, onValueChange: (next) => setKindFilter(next), children: Object.keys(CATALOG_KIND_FILTERS).map((value) => (_jsx(DropdownMenuRadioItem, { value: value, children: value === 'all'
+                                    ? tPages('typeFilterAll')
+                                    : value === 'kortix'
+                                        ? tPages('typeFilterKortix')
+                                        : wayKindLabel(value) }, value))) }) })] }), _jsx(Switch, { label: tPages('oneClickOnly'), checked: oneClick, onCheckedChange: setOneClick, className: "px-0 py-0" })] }));
+    // Stable: the browse cards are `memo`'d, and an inline arrow here would
+    // re-render every one of them on each page render.
+    const catalogHref = useCallback((entry) => appHref(projectId, appRefFromEntry(entry)), [projectId]);
     // The search field is the page's main control: focused on arrival, and "/"
     // jumps back to it (`useSlashFocus`).
     const searchRef = useRef(null);
@@ -347,32 +333,17 @@ export function ConnectorsPage({ projectId }) {
                             label: tI18nComplete.raw('text90ccaee30bdc'),
                             description: tI18nComplete.raw('textb0fbe9dc1fcc'),
                             onSelect: () => setPanel('custom'),
-                        } })) : undefined, filters: 
-                    // A strip of one tab is not a choice, so it collapses to no strip at
-                    // all when only one scope is reachable — `CapabilityPageShell` drops
-                    // the whole row when this is `undefined`, which is why it must not be
-                    // a bare fragment. With Channels in the mix a catalogue-less
-                    // deployment still has two real destinations (Connected, Channels),
-                    // so the strip survives losing All; it only disappears
-                    // entirely for the narrower case of neither existing.
-                    visibleScopes.length > 1 ? (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: scope, onValueChange: (value) => setScope(value), children: _jsx(TabsList, { children: visibleScopes.map((value) => (_jsx(TabsTrigger, { value: value, children: SCOPE_LABEL[value] }, value))) }) }), _jsx(Button, { type: "button", variant: "text", size: "sm", onClick: () => setRulesOpen(true), className: "ml-auto px-0 transition-colors", children: tI18nComplete.raw('text1d59a5e09714') })] })) : undefined, children: [channelsActive ? (
+                        } })) : undefined, filters: (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: scope, onValueChange: (value) => setScope(value), children: _jsx(TabsList, { children: SCOPES.map((value) => (_jsx(TabsTrigger, { value: value, children: SCOPE_LABEL[value] }, value))) }) }), _jsx(Button, { type: "button", variant: "text", size: "sm", onClick: () => setRulesOpen(true), className: "ml-auto px-0 transition-colors", children: tI18nComplete.raw('text1d59a5e09714') })] })), children: [channelsActive ? (
                         /* The whole of what used to be `/projects/<id>/channels`, minus the
                        shell it used to bring — this page's `CapabilityPageShell` is the
                        one column, the one heading and the one scroll container now. */
-                        _jsx(ChannelsSection, { projectId: projectId })) : catalogActive ? (_jsxs(_Fragment, { children: [ownMatches.length > 0 ? (_jsxs("div", { className: "space-y-3", children: [_jsx("h2", { className: "text-sm font-medium", children: tPages('yourConnectors') }), _jsx(CatalogGrid, { dense: true, isLoading: false, isError: false, onRetry: retry, isEmpty: false, empty: null, children: ownMatches.map(ownConnectorCard) })] })) : null, _jsx(ConnectorBrowse, { state: catalog, connectedKeys: connectedKeys, hrefFor: catalogHref, onOpen: openComputer, install: catalogInstall, emptyTitle: tI18nComplete.raw('text3a63271cafc1'), emptyDescription: tI18nComplete.raw('textf652a621153e'), 
+                        _jsx(ChannelsSection, { projectId: projectId })) : catalogActive ? (_jsxs(_Fragment, { children: [ownMatches.length > 0 ? (_jsxs("div", { className: "space-y-3", children: [_jsx("h2", { className: "text-sm font-medium", children: tPages('yourConnectors') }), _jsx(CatalogGrid, { dense: true, isLoading: false, isError: false, onRetry: retry, isEmpty: false, empty: null, children: ownMatches.map(ownConnectorCard) })] })) : null, _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [_jsx("h2", { className: "text-sm font-medium", children: tPages('allApps') }), catalogFilters] }), _jsx(ConnectorBrowse, { state: catalog, connectedKeys: connectedKeys, hrefFor: catalogHref, install: catalogInstall, emptyTitle: tI18nComplete.raw('text3a63271cafc1'), emptyDescription: tI18nComplete.raw('textf652a621153e'), 
                                     // A slug search that only the project's own connector answers
                                     // must not ALSO read "No matches" under its card (KRTX-2531).
                                     suppressNoMatch: ownMatches.length > 0 })] })) : (_jsxs(_Fragment, { children: [_jsx(ConnectorMovesBanner, { projectId: projectId }), _jsx(CatalogGrid, { dense: true, 
                                     // `!settled`, not `connectorsQuery.isLoading`: the empty state's
                                     // wording depends on `projectQuery` too. Same gate as the filter row.
-                                    isLoading: !settled, isError: isError, error: connectorsQuery.error ?? projectQuery.error, onRetry: retry, isEmpty: emptyKind !== null, empty: emptyKind === 'no-match' ? (_jsx(CatalogNoMatch, { query: query })) : (_jsx(EmptyState, { icon: PlugIcon, size: "sm", title: tI18nComplete.raw('text51ae0a7e3783'), description: tI18nComplete.raw('texta3487dfc2132'), 
-                                        // The CTA goes with the tab it opens. With no catalogue on this
-                                        // deployment it would be a button to a tab that is not there;
-                                        // `+` is the remaining way in, and it is already in the header.
-                                        action: catalogueAvailable ? (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setScope('all'), children: tI18nComplete.raw('text45bfe4f17af7') })) : undefined })), children: filtered.map(ownConnectorCard) })] })), _jsx(ComputerConnectModal, { projectId: projectId, open: computerOpen, onOpenChange: setComputerOpen, onConnected: (connection) => {
-                                invalidate();
-                                router.push(connectorHref(projectId, connection.connector_alias));
-                            } }), _jsx(AddMcpServerDialog, { projectId: projectId, app: mcpApp, open: panel === 'mcp', onOpenChange: (open) => setPanel(open ? 'mcp' : null), takenSlugs: connectors.map((connector) => connector.slug), onAdded: invalidate }, mcpApp?.url ?? 'paste'), _jsx(Modal, { open: panel === 'custom', onOpenChange: (open) => !open && setPanel(null), children: _jsxs(ModalContent, { className: "lg:max-w-3xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text90ccaee30bdc') }), _jsx(ModalDescription, { children: tI18nComplete.raw('textd2f3be0047c4') })] }), _jsx(ModalBody, { className: "max-h-[75vh] overflow-y-auto", children: _jsx(CustomConnectorForm, { projectId: projectId, emailChannelEnabled: emailChannelEnabled, onAdded: (slug, { addAccount }) => {
+                                    isLoading: !settled, isError: isError, error: connectorsQuery.error ?? projectQuery.error, onRetry: retry, isEmpty: emptyKind !== null, empty: emptyKind === 'no-match' ? (_jsx(CatalogNoMatch, { query: query })) : (_jsx(EmptyState, { icon: PlugIcon, size: "sm", title: tI18nComplete.raw('text51ae0a7e3783'), description: tI18nComplete.raw('texta3487dfc2132'), action: _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setScope('all'), children: tI18nComplete.raw('text45bfe4f17af7') }) })), children: filtered.map(ownConnectorCard) })] })), _jsx(AddMcpServerDialog, { projectId: projectId, app: mcpApp, open: panel === 'mcp', onOpenChange: (open) => setPanel(open ? 'mcp' : null), takenSlugs: connectors.map((connector) => connector.slug), onAdded: invalidate }, mcpApp?.url ?? 'paste'), installRequest ? (_jsx(InstallDialog, { appName: installRequest.target.appName, way: installRequest.way, open: true, pending: false, onOpenChange: (open) => !open && setInstallRequest(null), onConfirm: confirmInstall }, installRequest.target.appName)) : null, _jsx(Modal, { open: panel === 'custom', onOpenChange: (open) => !open && setPanel(null), children: _jsxs(ModalContent, { className: "lg:max-w-3xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text90ccaee30bdc') }), _jsx(ModalDescription, { children: tI18nComplete.raw('textd2f3be0047c4') })] }), _jsx(ModalBody, { className: "max-h-[75vh] overflow-y-auto", children: _jsx(CustomConnectorForm, { projectId: projectId, onAdded: (slug, { addAccount }) => {
                                                 invalidate();
                                                 setPanel(null);
                                                 router.push(connectorHref(projectId, slug, { addAccount }));