@kortix/ui 0.14.7 → 0.14.9

package/dist/customize/connectors/connector-identity.js

@@ -1,44 +1,23 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTranslations } from '../../i18n/index.js';
-import { CheckIcon, ChatIcon as MessageSquare, MonitorIcon as Monitor, } from '@phosphor-icons/react';
-import { UiImage as Image } from '../../providers/ui-provider.js';
-import { useState } from 'react';
-import { Badge } from '../../primitives/badge.js';
-import { EntityAvatar } from '../../primitives/entity-avatar.js';
-import { connectorSetupStatus } from '../sections/connector-connection-form.js';
+import { CheckIcon, } from '@phosphor-icons/react';
+import { connectorStatusTone } from './detail/connector-status.js';
+import { ConnectorStatusBadge as ToneBadge } from './detail/status-badge.js';
 import { cn } from '../../internal/lib/utils.js';
 /**
- * How a connector presents itself — its icon tile and its status pill.
+ * How a connector presents its status — the connected mark and the status
+ * pill. Its logo is `ConnectorLogo` (`connector-logo.tsx`), shared by every
+ * connector surface.
  *
  * These two render once per card in the connectors grid, so they sit on the
  * hottest path of `/projects/[id]/connectors`. They used to live in
  * `customize/sections/connectors-view.tsx`, which is ~5,100 lines across 50
- * components and pulls `HighlightedCode`,
- * `PoliciesPanel`, `DiscoverCatalogue` and `ConnectorConnectionModal`. Importing
+ * components and pulls `HighlightedCode` and `PoliciesPanel`. Importing
  * two small components from there put that entire graph in this route's client
  * chunk — an ES module is all-or-nothing to the bundler.
  *
  * The tile-size helper came along because nothing else in the old file used it.
  */
-export function ConnectorAppIcon({ connector, size = 'lg', }) {
-    const [broken, setBroken] = useState(false);
-    const imgSrc = connector.iconUrl ?? null;
-    if (imgSrc && !broken) {
-        return (_jsx("span", { 
-            // The catalogue grid card's logo (`connector-browse.tsx`): the bare
-            // image, no tile, so an app looks the same on every connector surface.
-            className: cn('relative flex shrink-0 items-center justify-center overflow-hidden rounded-sm', size === 'lg' ? 'size-9' : 'size-6'), children: _jsx(Image, { src: imgSrc, alt: "", referrerPolicy: "no-referrer", fill: true, sizes: size === 'lg' ? '36px' : '24px', className: "object-contain", unoptimized: true, onError: () => setBroken(true) }) }));
-    }
-    // No logo: a channel or a computer keeps its own glyph, because that glyph
-    // says what it is. An app shows its first letter. A plug says only "some app".
-    const glyph = connector.provider === 'channel'
-        ? MessageSquare
-        : connector.provider === 'computer'
-            ? Monitor
-            : undefined;
-    return _jsx(EntityAvatar, { icon: glyph, size: size, label: connector.name });
-}
 /**
  * Green `✓` for a healthy project connector — same glyph Discovery/All use in
  * the catalogue card's `trailing` slot. Not a badge: problem states keep the
@@ -49,19 +28,11 @@ export function ConnectorConnectedMark({ className } = {}) {
     return (_jsx(CheckIcon, { "aria-hidden": true, weight: "bold", className: cn('text-kortix-green size-4 shrink-0', className), "data-testid": "catalog-connected" }));
 }
 /**
- * Problem / setup pills for a project connector. Deliberately returns `null`
- * when status is `connected` — put {@link ConnectorConnectedMark} in the card's
- * `trailing` slot instead so Connected matches Discovery's `✓` affordance.
+ * The state pill for a project connector: Needs account or Error. Connected
+ * returns `null`: put {@link ConnectorConnectedMark} in the card's `trailing`
+ * slot instead, the catalogue's `✓`.
  */
-export function ConnectorStatusBadge({ connector }) {
-    const tI18nHardcoded = useTranslations('hardcodedUi');
-    const tPages = useTranslations('connectorPages');
-    const status = connectorSetupStatus(connector);
-    if (status === 'pending')
-        return (_jsx(Badge, { variant: "info", size: "sm", children: tPages('statusPending') }));
-    if (status === 'error')
-        return (_jsx(Badge, { variant: "destructive", size: "sm", children: tI18nHardcoded.raw('i18nComplete.text54a0e8c17ebb') }));
-    if (status === 'needs_setup')
-        return (_jsx(Badge, { variant: "info", size: "sm", children: tI18nHardcoded.raw('autoComponentsProjectsCustomizeSectionsConnectorsViewJsxTextNeedsSetupbefdbc49') }));
-    return null;
+export function ConnectorStatusBadge({ connector, accountCount, }) {
+    const tone = connectorStatusTone(connector, accountCount);
+    return tone === 'connected' ? null : _jsx(ToneBadge, { tone: tone });
 }

package/dist/customize/connectors/connector-moves-banner.d.ts

@@ -1,4 +1,5 @@
-/** The Pipedream and Composio connectors a `connectors_v2` project can move to Kortix apps, each linked to its page. */
+/** The Pipedream connectors a project can move to Kortix apps, each linked to its page.
+ *  Composio is a supported way to connect, not a retired one: it never shows here. */
 export declare function ConnectorMovesBanner({ projectId }: {
     projectId: string;
 }): import("react").JSX.Element | null;

package/dist/customize/connectors/connector-moves-banner.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { listConnectorMoves } from '@kortix/sdk';
-import { useFeatureFlag } from '@kortix/sdk/react';
 import { useQuery } from '@tanstack/react-query';
 import { UiLink as Link } from '../../providers/ui-provider.js';
 import { Fragment } from 'react';
@@ -9,17 +8,16 @@ import { InfoBanner } from '../../primitives/info-banner.js';
 import { useTranslations } from '../../i18n/index.js';
 import { connectorHref } from './connector-routes.js';
 import { connectorMovesQueryKey } from './detail/connector-move-row.js';
-/** The Pipedream and Composio connectors a `connectors_v2` project can move to Kortix apps, each linked to its page. */
+/** The Pipedream connectors a project can move to Kortix apps, each linked to its page.
+ *  Composio is a supported way to connect, not a retired one: it never shows here. */
 export function ConnectorMovesBanner({ projectId }) {
     const t = useTranslations('connectorPages');
-    const enabled = useFeatureFlag(projectId, 'connectors_v2').enabled;
     const moves = useQuery({
         queryKey: connectorMovesQueryKey(projectId),
         queryFn: () => listConnectorMoves(projectId),
-        enabled,
     });
-    const movable = (moves.data ?? []).filter((move) => move.to);
-    if (!enabled || movable.length === 0)
+    const movable = (moves.data ?? []).filter((move) => move.to && move.provider === 'pipedream');
+    if (movable.length === 0)
         return null;
     return (_jsx(InfoBanner, { tone: "info", title: t('movesBannerTitle', { count: movable.length }), children: _jsxs("p", { className: "text-muted-foreground text-xs text-pretty", children: [t('movesBannerBody'), ' ', movable.map((move, index) => (_jsxs(Fragment, { children: [index > 0 ? ', ' : null, _jsx(Link, { href: connectorHref(projectId, move.slug), className: "text-foreground underline-offset-2 hover:underline", children: move.name })] }, move.slug)))] }) }));
 }

package/dist/customize/connectors/connector-routes.d.ts

@@ -1,28 +1,40 @@
 import type { CatalogEntry } from './catalog/catalog-entry.js';
+import type { ConnectorScope } from './connector-filter.js';
 /**
  * The app segment of a connector reached without an app: the Connected tab, a
  * custom connector, a computer. Its back link goes to the Connected tab.
  */
 export declare const CONNECTED_APP_SEGMENT = "connected";
+/** The id of the native Computer entry: it has its own page (`ComputerAppPage`). */
+export declare const COMPUTER_APP_ID = "native:computer";
 /**
- * Which catalogue app a page belongs to, as the URL carries it. A Discover app
- * is fetched by `id` (`getDiscoverConnector`), so the id rides in the query;
- * a managed app is looked up by slug.
+ * Which catalogue app a page belongs to, as the URL carries it. The app is
+ * fetched by `id` (`getDiscoverConnector`), so the id rides in the query.
  */
 export type AppRef = {
     source: 'discover';
     slug: string;
     id: string;
-} | {
-    source: 'easy-connect';
-    slug: string;
 };
-export declare function connectorsHref(projectId: string, scope?: 'all' | 'connected' | 'channels'): string;
+/** The Connectors page on one tab. */
+export declare function connectorsHref(projectId: string, scope?: ConnectorScope): string;
+/** The Connectors page with the project's approval rules open (`?rules=1`). */
+export declare function rulesHref(projectId: string): string;
 export declare function connectorSearchFromParams(search: Pick<URLSearchParams, 'get'> | null | undefined): string;
 /** Sets `?q=` to the trimmed query, or removes it when the query is empty. */
 export declare function withConnectorSearch(params: URLSearchParams, query: string): URLSearchParams;
-export declare function appRefFromEntry(entry: CatalogEntry): AppRef | null;
-export declare function appHref(projectId: string, app: AppRef): string;
+export declare function appRefFromEntry(entry: CatalogEntry): AppRef;
+/**
+ * An app's page. Once the project has the app it redirects to the connector
+ * page; `ways` keeps it open, to install the app as another profile.
+ */
+export declare function appHref(projectId: string, app: AppRef, options?: {
+    ways?: boolean;
+}): string;
+/** `?ways=1`: the app page stays open on an installed app, and Browse links there. */
+export declare function waysFromParams(search: Pick<URLSearchParams, 'get'> | null | undefined): boolean;
+/** Browse, searching for one app, with its cards opening the app page (`ways`). */
+export declare function browseForAnotherProfileHref(projectId: string, name: string): string;
 export declare function appRefFromLocation(appSegment: string, search: URLSearchParams | null): AppRef | null;
 export declare function connectorHref(projectId: string, connectorSlug: string, options?: {
     app?: AppRef | null;

package/dist/customize/connectors/connector-routes.js

@@ -4,6 +4,8 @@ import { customizePath } from '../../lib/routes.js';
  * custom connector, a computer. Its back link goes to the Connected tab.
  */
 export const CONNECTED_APP_SEGMENT = 'connected';
+/** The id of the native Computer entry: it has its own page (`ComputerAppPage`). */
+export const COMPUTER_APP_ID = 'native:computer';
 function base(projectId) {
     return customizePath(encodeURIComponent(projectId), 'connectors');
 }
@@ -12,17 +14,16 @@ function withQuery(path, params) {
     return query ? `${path}?${query}` : path;
 }
 function appParams(app) {
-    const params = new URLSearchParams();
-    if (app.source === 'discover')
-        params.set('id', app.id);
-    else
-        params.set('src', 'apps');
-    return params;
+    return new URLSearchParams({ id: app.id });
 }
+/** The Connectors page on one tab. */
 export function connectorsHref(projectId, scope) {
     return scope ? `${base(projectId)}?scope=${scope}` : base(projectId);
 }
-/** `null` for the computer entry: a computer has no app page. */
+/** The Connectors page with the project's approval rules open (`?rules=1`). */
+export function rulesHref(projectId) {
+    return `${base(projectId)}?rules=1`;
+}
 /**
  * The catalogue search, held in `?q=`. Opening a connector is a route change
  * that unmounts the catalogue; a search kept only in state was gone on browser
@@ -42,25 +43,33 @@ export function withConnectorSearch(params, query) {
     return params;
 }
 export function appRefFromEntry(entry) {
-    if (entry.source === 'discover') {
-        return { source: 'discover', slug: entry.slug, id: entry.connector.id };
-    }
-    if (entry.source === 'easy-connect')
-        return { source: 'easy-connect', slug: entry.slug };
-    return null;
+    return { source: 'discover', slug: entry.slug, id: entry.connector.id };
+}
+/**
+ * An app's page. Once the project has the app it redirects to the connector
+ * page; `ways` keeps it open, to install the app as another profile.
+ */
+export function appHref(projectId, app, options = {}) {
+    const params = appParams(app);
+    if (options.ways)
+        params.set(WAYS_PARAM, '1');
+    return withQuery(`${base(projectId)}/${encodeURIComponent(app.slug)}`, params);
+}
+const WAYS_PARAM = 'ways';
+/** `?ways=1`: the app page stays open on an installed app, and Browse links there. */
+export function waysFromParams(search) {
+    return search?.get(WAYS_PARAM) === '1';
 }
-export function appHref(projectId, app) {
-    return withQuery(`${base(projectId)}/${encodeURIComponent(app.slug)}`, appParams(app));
+/** Browse, searching for one app, with its cards opening the app page (`ways`). */
+export function browseForAnotherProfileHref(projectId, name) {
+    const params = withConnectorSearch(new URLSearchParams({ scope: 'all', [WAYS_PARAM]: '1' }), name);
+    return withQuery(base(projectId), params);
 }
 export function appRefFromLocation(appSegment, search) {
     if (appSegment === CONNECTED_APP_SEGMENT)
         return null;
     const id = search?.get('id');
-    if (id)
-        return { source: 'discover', slug: appSegment, id };
-    if (search?.get('src') === 'apps')
-        return { source: 'easy-connect', slug: appSegment };
-    return null;
+    return id ? { source: 'discover', slug: appSegment, id } : null;
 }
 export function connectorHref(projectId, connectorSlug, options = {}) {
     const segment = options.app ? options.app.slug : CONNECTED_APP_SEGMENT;

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 }));