@kortix/ui 0.14.8 → 0.14.9

package/dist/customize/connectors/catalog/use-catalog.js

@@ -1,16 +1,12 @@
 'use client';
-import { getConnectStatus, listConnectSections, listConnectToolkits, listDiscoverConnectors, listDiscoverSections, listPipedreamApps, listPipedreamSections, } from '@kortix/sdk';
+import { getConnectStatus, listConnectToolkits, listDiscoverConnectors, listDiscoverSections, listPipedreamApps, } from '@kortix/sdk';
 import { keepPreviousData, useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useCallback, useMemo } from 'react';
 import { useDebounce } from '../../../hooks/use-debounce.js';
 import { useTranslations } from '../../../i18n/index.js';
-import { browseSections, connectToolkitApp, sectionsPageFromConnect, sectionsPageFromDiscover, sectionsPageFromPipedream, } from './browse-sections.js';
-import { catalogEntryFromDiscover, catalogEntryFromEasyConnect, computersCatalogEntry, } from './catalog-entry.js';
+import { browseSections, sectionsPageFromDiscover } from './browse-sections.js';
+import { catalogEntryFromDiscover, connectToolkitApp } from './catalog-entry.js';
 import { CATEGORY_ROW_CAP, localizedSectionTitle } from './connector-categories.js';
-import { mergeSearchEntries } from './merge-search.js';
-/** Apps per request. One page fills several rows of the widest grid, so a
- *  scroll-triggered fetch is felt as the grid growing rather than as a jump. */
-const CATALOG_PAGE_SIZE = 48;
 /** Cards per section on the browse page, and how many sections it shows.
  *  `CATEGORY_ROW_CAP` is two rows of `xl:grid-cols-3`; 12 sections is a browse
  *  page you can scan without it becoming a directory of headings. */
@@ -76,25 +72,22 @@ export const connectStatusQuery = {
     queryFn: getConnectStatus,
 };
 /**
- * The browse page's one request, keyed per catalogue. Exported so the
- * Customize prefetch (`use-customize-prefetch.ts`) fills the exact cache entry
- * the Discover landing reads.
+ * The browse page's one request. Exported so the Customize prefetch
+ * (`use-customize-prefetch.ts`) fills the exact cache entry the landing reads.
  */
-export function catalogSectionsQuery(projectId, catalogue) {
+export function catalogSectionsQuery(projectId, 
+/** Just the apps that connect with nothing to set up. */
+oneClick = false, 
+/** Just the apps that connect these ways. */
+kinds = []) {
     return {
-        queryKey: ['catalog-sections', projectId, catalogue],
-        queryFn: async () => {
-            const limits = { perCategory: SECTION_CARD_COUNT, maxCategories: SECTION_COUNT };
-            // `kortix` is the same Discover route: the API serves Kortix's own MCP
-            // apps to a `connectors_v2` project (apps/api/src/connectors/mcp-apps.ts).
-            if (catalogue === 'discover' || catalogue === 'kortix') {
-                return sectionsPageFromDiscover(await listDiscoverSections(projectId, limits));
-            }
-            if (catalogue === 'pipedream') {
-                return sectionsPageFromPipedream(await listPipedreamSections(projectId, limits));
-            }
-            return sectionsPageFromConnect(await listConnectSections(projectId, limits));
-        },
+        queryKey: ['catalog-sections', projectId, 'kortix', ...(oneClick ? ['one-click'] : []), ...kinds],
+        queryFn: async () => sectionsPageFromDiscover(await listDiscoverSections(projectId, {
+            perCategory: SECTION_CARD_COUNT,
+            maxCategories: SECTION_COUNT,
+            ...(oneClick ? { oneClick } : {}),
+            ...(kinds.length ? { kinds: [...kinds] } : {}),
+        })),
         staleTime: 5 * 60_000,
     };
 }
@@ -119,129 +112,43 @@ export async function listConnectCatalogPage(input) {
     };
 }
 /**
- * The catalogue behind the All tab, from whichever of the two
- * sources this project actually has.
- *
- * **Why two sources.** `connectors_api_discover` resolves to `false` by
- * default (`apps/api/src/experimental/features.ts:83`), so the Discover
- * catalogue is unavailable to most projects. Easy Connect (Pipedream) is not
- * flagged. Falling back keeps the page populated for every project.
- *
- * **Why not merge them.** The two publish overlapping apps under different
- * slugs and different `id` namespaces, and each has its own add flow. A merged
- * list would need a cross-catalogue identity that neither API provides.
+ * The catalogue behind the All tab: Kortix's apps, every integrations.sh
+ * server and API, and the Composio apps, each app once by its best way in
+ * (`apps/api/src/connectors/mcp-apps.ts`). One source, the Discover routes.
  *
  * **One paging mechanism.** A scroll or a click on "Load more" fetches the next
- * page. That is all. This replaces a three-layer arrangement — eager initial
- * pages, a per-category auto-deepening effect chain, and a client-side reveal
- * window over the top — that existed only because the client had to accumulate
- * enough pages to fake a category filter. The server filters by category now
- * (`pipedreamCatalogPage`), so the client asks for exactly the page it renders.
- *
- * **Filtering happens server-side, over the whole catalogue.** Both `q` and
- * `category` are query keys, so changing either starts a new list rather than
- * re-slicing an accumulated one. Pipedream's own API cannot filter by category
- * at all — see `apps/api/src/connectors/pipedream-index.ts`.
- *
- * **Easy Connect waits for the deployment probe.** No Pipedream request is sent
- * until `usePipedreamStatus` has ruled out `absent`, because on a deployment
- * without Pipedream credentials every one of them is a `501` — and one landing
- * before the probe would paint the error card the probe exists to prevent. The
- * cost is one round trip on the first load of the session, spent on a route that
- * only reads env vars, and the wait is reported as `isLoading` so the grid holds
- * its skeletons instead of flashing an empty result.
+ * page. `q`, `oneClick` and `kinds` are query keys, so changing any of them
+ * starts a new list rather than re-slicing an accumulated one.
  */
 export function useCatalog(projectId, query, opts) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const { debouncedValue: activeQuery } = useDebounce(query.trim(), 300);
-    const computers = opts.computers === true;
+    const hideComputerRecord = opts.computers !== true;
     const searching = activeQuery.length > 0;
-    // Always probed, whether or not the catalogue is `enabled`: the answer picks
-    // the source, and `ConnectorsPage` turns the All tab OFF when it is `absent`
-    // with no API/MCP catalogue either. It is one cached request.
-    const connectStatus = useConnectProviderStatus(true);
-    // One catalogue, no source toggle. Managed apps drive browsing; a search also
-    // asks the API/MCP catalogue (below). With no managed provider on this
-    // deployment, the API/MCP catalogue is the whole catalogue.
-    // `unknown` (the probe failed) falls back to the API/MCP catalogue too, as
-    // before the merge of the two.
-    const mcpApps = opts.mcpApps === true;
-    const source = mcpApps ||
-        (opts.discoverEnabled && (connectStatus.state === 'absent' || connectStatus.state === 'unknown'))
-        ? 'discover'
-        : 'easy-connect';
-    const searchDirect = opts.discoverEnabled && source === 'easy-connect' && searching;
-    // Keys the Discover cache by the catalogue the API answers with.
-    const discoverCatalogue = mcpApps ? 'kortix' : 'discover';
-    // `unknown` proceeds: the probe failed, and refusing to load a catalogue that
-    // may well exist is the worse of the two mistakes.
-    const easyConnectRunnable = source === 'easy-connect' &&
-        (connectStatus.state === 'configured' || connectStatus.state === 'unknown');
-    const easyConnectProvider = connectStatus.provider ?? 'composio';
+    const oneClick = opts.oneClick === true;
+    const kinds = useMemo(() => [...(opts.kinds ?? [])], [opts.kinds]);
     const discoverQuery = useInfiniteQuery({
-        // An open category is a server-side filter, so it is part of the key. The
-        // unfiltered key stays exactly the one `discover-catalogue.tsx` shares.
-        queryKey: mcpApps
-            ? ['discover-connectors', projectId, activeQuery, 'kortix']
-            : ['discover-connectors', projectId, activeQuery],
+        queryKey: ['discover-connectors', projectId, activeQuery, 'kortix', oneClick, ...kinds],
         queryFn: ({ pageParam }) => listDiscoverConnectors(projectId, {
             q: activeQuery || undefined,
             cursor: pageParam,
+            ...(oneClick ? { oneClick } : {}),
+            ...(kinds.length ? { kinds } : {}),
         }),
         initialPageParam: undefined,
         getNextPageParam: (last) => (last.hasMore ? last.nextCursor : undefined),
         staleTime: 5 * 60_000,
-        enabled: opts.enabled && (source === 'discover' || searchDirect),
-        placeholderData: keepPreviousData,
-    });
-    const easyConnectQuery = useInfiniteQuery({
-        queryKey: ['easy-connect-apps', projectId, activeQuery, null],
-        queryFn: ({ pageParam }) => listConnectCatalogPage({
-            projectId,
-            provider: easyConnectProvider,
-            q: activeQuery || undefined,
-            cursor: pageParam,
-            limit: CATALOG_PAGE_SIZE,
-        }),
-        initialPageParam: undefined,
-        getNextPageParam: (last) => (last.hasMore ? last.nextCursor : undefined),
-        staleTime: 60_000,
-        enabled: opts.enabled && easyConnectRunnable,
+        enabled: opts.enabled,
         placeholderData: keepPreviousData,
     });
-    // The browse page, in one request, from whichever catalogue this project
-    // uses. Every one answers with each category's TRUE size, so a heading never
-    // reports how many cards one loaded page happened to hold.
-    //
-    // Fetched while browsing. Discover and Composio also keep it while a category
-    // is open: their paged endpoints publish no category facet, and this
-    // response's facet is what lets the open category's header state its name
-    // and size. Same key, so opening a category from the browse page costs no
-    // request. Pipedream's paged endpoint carries its own facet.
-    const sectionsCatalogue = source === 'discover' ? discoverCatalogue : easyConnectProvider;
+    // The browse page, in one request. It answers with each category's TRUE
+    // size, so a heading never reports how many cards one loaded page held.
     const sectionsQuery = useQuery({
-        ...catalogSectionsQuery(projectId, sectionsCatalogue),
-        enabled: opts.enabled && (source === 'discover' || easyConnectRunnable) && !searching,
+        ...catalogSectionsQuery(projectId, oneClick, kinds),
+        enabled: opts.enabled && !searching,
     });
-    const active = source === 'discover' ? discoverQuery : easyConnectQuery;
-    const entries = useMemo(() => assembleCatalogEntries({
-        source,
-        computers,
-        activeQuery,
-        searchDirect,
-        tI18nComplete,
-        discoverPages: discoverQuery.data?.pages,
-        managedPages: easyConnectQuery.data?.pages,
-    }), [
-        searchDirect,
-        tI18nComplete,
-        computers,
-        activeQuery,
-        source,
-        easyConnectQuery.data?.pages,
-        discoverQuery.data?.pages,
-    ]);
-    const { fetchNextPage, hasNextPage, isFetchingNextPage, isPlaceholderData, refetch: activeRefetch, } = active;
+    const entries = useMemo(() => withoutComputerRecord(hideComputerRecord, (discoverQuery.data?.pages ?? []).flatMap((page) => page.items.map(catalogEntryFromDiscover))), [hideComputerRecord, discoverQuery.data?.pages]);
+    const { fetchNextPage, hasNextPage, isFetchingNextPage, isPlaceholderData, refetch: activeRefetch, } = discoverQuery;
     // Stable identity: `useCatalogAutoload` lists this in its observer effect's
     // deps, and a new function every render would tear down and rebuild the
     // `IntersectionObserver` on each one.
@@ -261,27 +168,20 @@ export function useCatalog(projectId, query, opts) {
             void sectionsRefetch();
     }, [activeRefetch, sectionsRefetch, showingSections]);
     /**
-     * The browse sections, normalised across every catalogue so `ConnectorBrowse`
-     * renders one shape.
-     *
-     * All of them come from the server, complete and fixed, with each section's
-     * true total. A section key is exactly what the catalogue's category filter
-     * accepts, so "View all" asks the server for the set the heading counted.
+     * The browse sections. They come from the server, complete and fixed, with
+     * each section's true total. A section key is exactly what the catalogue's
+     * category filter accepts, so "View all" asks for the set the heading counted.
      */
     const sections = useMemo(() => {
         if (searching || !sectionsQuery.data)
             return [];
         return browseSections(sectionsQuery.data, {
-            native: computers ? computersCatalogEntry(tI18nComplete) : null,
             cardCount: SECTION_CARD_COUNT,
             title: (label) => localizedSectionTitle(label, tI18nComplete),
-        });
-    }, [searching, sectionsQuery.data, tI18nComplete, computers]);
-    const easyConnectPage = easyConnectQuery.data?.pages[0];
-    const excludedNoActions = easyConnectPage?.excludedNoActions ?? 0;
-    const reportedTotal = source === 'discover' ? discoverQuery.data?.pages[0]?.total : easyConnectPage?.total;
-    const nativeCount = entries.some((entry) => entry.source === 'computer') ? 1 : 0;
-    const total = typeof reportedTotal === 'number' ? reportedTotal + nativeCount : entries.length;
+        }).map((section) => ({ ...section, items: withoutComputerRecord(hideComputerRecord, section.items) }));
+    }, [searching, sectionsQuery.data, tI18nComplete, hideComputerRecord]);
+    const reportedTotal = discoverQuery.data?.pages[0]?.total;
+    const total = typeof reportedTotal === 'number' ? reportedTotal : entries.length;
     // A failed sections request on the browse page is an error, not an empty
     // catalogue — without this the grid would say "no connectors" over an outage.
     const sectionsFailed = showingSections && sectionsQuery.isError;
@@ -289,48 +189,21 @@ export function useCatalog(projectId, query, opts) {
         entries,
         total,
         activeQuery,
-        source,
-        excludedNoActions,
         sections,
         // `isLoading` is the COLD state only — no cards on screen at all. A search
         // over a populated catalogue keeps its results and reports `isRefreshing`,
         // so the grid dims instead of blanking to skeletons.
-        //
-        // `asking` counts as loading: the Easy Connect queries are held disabled
-        // until the deployment probe answers, and a disabled query reports neither
-        // loading nor data — without this the grid would render "no results" for a
-        // round trip before the real request had started.
-        isLoading: opts.enabled &&
-            (connectStatus.state === 'asking' ||
-                active.isLoading ||
-                (showingSections && sectionsQuery.isLoading)),
+        isLoading: opts.enabled && (discoverQuery.isLoading || (showingSections && sectionsQuery.isLoading)),
         isRefreshing: opts.enabled && isPlaceholderData,
-        isError: active.isError || sectionsFailed,
-        error: active.isError ? active.error : sectionsFailed ? sectionsQuery.error : null,
+        isError: discoverQuery.isError || sectionsFailed,
+        error: discoverQuery.isError ? discoverQuery.error : sectionsFailed ? sectionsQuery.error : null,
         hasMore: opts.enabled && hasNextPage && !isPlaceholderData,
         isLoadingMore: isFetchingNextPage,
         loadMore,
         refetch,
     };
 }
-export function assembleCatalogEntries({ source, computers, activeQuery, searchDirect, tI18nComplete, discoverPages, managedPages, }) {
-    const native = computersCatalogEntry(tI18nComplete);
-    // The native Computers card is ours, not the catalogue's, so it is matched
-    // locally and hidden inside a category it does not claim.
-    const includeComputers = computers &&
-        (!activeQuery ||
-            `${native.name} ${native.description ?? ''}`
-                .toLowerCase()
-                .includes(activeQuery.toLowerCase()));
-    const nativeEntries = includeComputers ? [native] : [];
-    if (source === 'discover') {
-        return nativeEntries.concat((discoverPages ?? []).flatMap((page) => page.items.map(catalogEntryFromDiscover)));
-    }
-    const managed = (managedPages ?? []).flatMap((page) => page.apps.map(catalogEntryFromEasyConnect));
-    if (!searchDirect)
-        return nativeEntries.concat(managed);
-    // ponytail: only the API/MCP catalogue's first page joins a search; its
-    // ranking puts the matches there. Page it too if users miss results.
-    const direct = (discoverPages?.[0]?.items ?? []).map(catalogEntryFromDiscover);
-    return nativeEntries.concat(mergeSearchEntries(managed, direct));
+/** The catalogue's Computer record (`native:computer`), dropped where no computer can be paired. */
+function withoutComputerRecord(hide, entries) {
+    return hide ? entries.filter((entry) => entry.key !== 'discover:native:computer') : entries;
 }

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

@@ -1,21 +1,18 @@
 import type { AdminConnector } from '@kortix/sdk';
 /**
- * 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 declare function ConnectorAppIcon({ connector, size, }: {
-    connector: AdminConnector;
-    size?: 'sm' | 'lg';
-}): import("react").JSX.Element;
 /**
  * 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
@@ -26,10 +23,11 @@ export declare function ConnectorConnectedMark({ className }?: {
     className?: string;
 }): import("react").JSX.Element;
 /**
- * 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 declare function ConnectorStatusBadge({ connector }: {
+export declare function ConnectorStatusBadge({ connector, accountCount, }: {
     connector: AdminConnector;
+    accountCount?: number;
 }): import("react").JSX.Element | null;

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;