@kortix/ui 0.14.8 → 0.14.10

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

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listConnectorPolicySets, listConnectors } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { RobotIcon } from '@phosphor-icons/react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslations } from '../../../i18n/index.js';
+import { Button } from '../../../primitives/button.js';
+import { EmptyState } from '../../../primitives/empty-state.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../primitives/select.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { Switch } from '../../../primitives/switch.js';
+import { agentHref } from '../../../internal/lib/capability-tab-routes.js';
+import { UiLink as Link } from '../../../providers/ui-provider.js';
+import { agentConnectorAccess } from '../agent-access.js';
+import { humanizeToolName as policySetLabel } from '../tools/tool-groups.js';
+import { connectorPolicySetsKey, supportsPolicySets } from '../tools/policy-sets.js';
+import { useAgentAccess } from '../use-agent-access.js';
+const BASE_VALUE = '__base';
+/**
+ * Agents — which agents can use this connector, and with which rule set. One
+ * row per agent: a switch gives or takes the connector, and a picker chooses
+ * the rule set (Base rules or one of the connector's sets). Each change
+ * commits kortix.yaml (`PUT …/agents/{name}/scope`).
+ *
+ * Read-only for a caller without both `project.agent.write` and
+ * `project.connector.write`: the rows still say who has access.
+ */
+export function ConnectorAgents({ projectId, connector }) {
+    const t = useTranslations('connectorPages');
+    const tSets = useTranslations('connectorPolicySets');
+    const access = useAgentAccess(projectId);
+    const slug = connector.slug;
+    const showSets = supportsPolicySets(connector.provider);
+    const setsQuery = useQuery({
+        queryKey: connectorPolicySetsKey(projectId, slug),
+        queryFn: () => listConnectorPolicySets(projectId, slug),
+        enabled: showSets && access.canEdit,
+    });
+    const connectorsQuery = useQuery({
+        queryKey: qk.project.connectors(projectId),
+        queryFn: () => listConnectors(projectId, { includeSchemas: false }),
+        ...contract('config'),
+    });
+    const allSlugs = (connectorsQuery.data?.connectors ?? []).map((item) => item.slug);
+    const sets = setsQuery.data?.sets ?? [];
+    if (access.isPending) {
+        return (_jsx("div", { className: "space-y-2", children: [0, 1].map((row) => (_jsx(Skeleton, { className: "h-13 rounded-md" }, row))) }));
+    }
+    if (access.isError) {
+        return (_jsx(ErrorState, { size: "sm", title: t('agentsLoadFailed'), description: access.error instanceof Error ? access.error.message : undefined, action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void access.refetch(), children: tSets('retry') }) }));
+    }
+    if (!access.supported) {
+        return _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t('agentsNeedsV2') });
+    }
+    if (access.agents.length === 0) {
+        return _jsx(EmptyState, { icon: RobotIcon, size: "sm", title: t('agentsEmpty') });
+    }
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: access.canEdit ? t('agentsIntro') : t('agentsReadOnly') }), _jsx("ul", { className: "bg-popover divide-y overflow-hidden rounded-md border", children: access.agents.map((agent) => {
+                    const row = agentConnectorAccess(access.grantsOf(agent), slug);
+                    const busy = access.pending === agent;
+                    // Also covers a reader, who cannot list the sets: the value still shows.
+                    const missing = row.policySet !== null && !sets.some((set) => set.name === row.policySet);
+                    return (_jsxs("li", { className: "flex min-h-13 flex-wrap items-center gap-x-3 gap-y-2 px-4 py-2", children: [_jsx(Link, { href: `${agentHref(projectId, agent)}?section=connectors`, className: "text-foreground min-w-0 flex-1 truncate text-sm font-medium underline-offset-4 hover:underline", children: agent }), showSets && row.granted ? (_jsxs(Select, { value: row.policySet ?? BASE_VALUE, disabled: !access.canEdit || busy, onValueChange: (next) => void access
+                                    .setPolicySet(agent, slug, next === BASE_VALUE ? null : next, allSlugs)
+                                    .catch(() => undefined), children: [_jsx(SelectTrigger, { size: "sm", className: "w-40 shrink-0", "aria-label": tSets('agentSelectLabel', { name: agent }), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { align: "end", children: [_jsx(SelectItem, { value: BASE_VALUE, children: tSets('baseRules') }), sets.map((set) => (_jsx(SelectItem, { value: set.name, description: set.description ?? undefined, children: policySetLabel(set.name) }, set.name))), missing && row.policySet ? (_jsx(SelectItem, { value: row.policySet, children: policySetLabel(row.policySet) })) : null] })] })) : null, _jsx(Switch, { label: t('agentsCanUse'), "aria-label": t('agentsCanUseNamed', { name: agent }), checked: row.granted, disabled: !access.canEdit || busy, onCheckedChange: (on) => void access.setGrant(agent, slug, on, allSlugs).catch(() => undefined), className: "shrink-0 px-0 py-0" })] }, agent));
+                }) })] }));
+}

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

@@ -5,6 +5,7 @@ import { TabsContent } from '../../../primitives/tabs.js';
 import { ErrorState } from '../../../primitives/error-state.js';
 import { useTranslations } from '../../../i18n/index.js';
 import { ConnectorAccounts } from './connector-accounts.js';
+import { ConnectorAgents } from './connector-agents.js';
 import { ConnectorSettings } from './connector-settings.js';
 import { ConnectorTools } from './connector-tools.js';
 import { ConnectorTriggers } from './connector-triggers.js';
@@ -14,5 +15,5 @@ export function ConnectorDetailTabs({ accounts, settings, connectionsQuery, }) {
     const { projectId, connector, displayName, canWrite, onChanged } = accounts;
     return (_jsxs(_Fragment, { children: [_jsx(TabsContent, { value: "accounts", children: connectionsQuery.isError ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('textbda9de7688c0'), description: connectionsQuery.error instanceof Error
                         ? connectionsQuery.error.message
-                        : tI18nComplete.raw('textd8eda34a089a'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void connectionsQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) })) : (_jsx(ConnectorAccounts, { ...accounts })) }), _jsx(TabsContent, { value: "tools", children: _jsx(ConnectorTools, { projectId: projectId, connector: connector, displayName: displayName, canWrite: canWrite, onChanged: onChanged }) }), _jsx(TabsContent, { value: "triggers", children: _jsx(ConnectorTriggers, { projectId: projectId, connector: connector, displayName: displayName }) }), _jsx(TabsContent, { value: "settings", children: _jsx(ConnectorSettings, { ...settings }) })] }));
+                        : tI18nComplete.raw('textd8eda34a089a'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void connectionsQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) })) : (_jsx(ConnectorAccounts, { ...accounts })) }), _jsx(TabsContent, { value: "tools", children: _jsx(ConnectorTools, { projectId: projectId, connector: connector, displayName: displayName, canWrite: canWrite, onChanged: onChanged }) }), _jsx(TabsContent, { value: "agents", children: _jsx(ConnectorAgents, { projectId: projectId, connector: connector }) }), _jsx(TabsContent, { value: "triggers", children: _jsx(ConnectorTriggers, { projectId: projectId, connector: connector, displayName: displayName }) }), _jsx(TabsContent, { value: "settings", children: _jsx(ConnectorSettings, { ...settings }) })] }));
 }

package/dist/customize/connectors/detail/connector-move-row.d.ts

@@ -1,12 +1,15 @@
 import { type AdminConnector } from '@kortix/sdk';
 export declare const connectorMovesQueryKey: (projectId: string) => readonly ["connector-moves", string];
-/** The move of a Pipedream or Composio connector in a `connectors_v2` project, or undefined. */
+/** The move of a Pipedream or Composio connector, or undefined. */
 export declare function useConnectorMove(projectId: string, connector: AdminConnector): import("@kortix/sdk").ConnectorMove | undefined;
 /**
- * A Pipedream or Composio connector in a `connectors_v2` project: Kortix retires
- * both. With a Kortix app for it, the row moves the connector there: the person
- * signs in once, and the connector switches when the sign-in completes (it keeps
- * its slug). Without one, it says the connector stays on its provider.
+ * A Pipedream connector: Kortix retires Pipedream.
+ * With a Kortix app for it, the row moves the connector there: the person signs
+ * in once, and the connector switches when the sign-in completes (it keeps its
+ * slug). Without one, it says the connector stays on Pipedream.
+ *
+ * A Composio connector is a supported way to connect. Its row appears only when
+ * the app also has its own MCP server, and offers the switch as an option.
  */
 export declare function ConnectorMoveRow({ projectId, connector, displayName, canWrite, onMoved, }: {
     projectId: string;

package/dist/customize/connectors/detail/connector-move-row.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { listConnectorMoves, moveConnector } from '@kortix/sdk';
-import { useFeatureFlag } from '@kortix/sdk/react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { Button } from '../../../primitives/button.js';
@@ -12,10 +11,9 @@ import { startDiscoveredSignIn } from '../../sections/connector-oauth2-start.js'
 import { useTranslations } from '../../../i18n/index.js';
 import { ConnectorNoticeRow } from './connector-notice-view.js';
 export const connectorMovesQueryKey = (projectId) => ['connector-moves', projectId];
-/** The move of a Pipedream or Composio connector in a `connectors_v2` project, or undefined. */
+/** The move of a Pipedream or Composio connector, or undefined. */
 export function useConnectorMove(projectId, connector) {
-    const enabled = useFeatureFlag(projectId, 'connectors_v2').enabled &&
-        (connector.provider === 'pipedream' || connector.provider === 'composio');
+    const enabled = connector.provider === 'pipedream' || connector.provider === 'composio';
     const moves = useQuery({
         queryKey: connectorMovesQueryKey(projectId),
         queryFn: () => listConnectorMoves(projectId),
@@ -24,10 +22,13 @@ export function useConnectorMove(projectId, connector) {
     return enabled ? moves.data?.find((candidate) => candidate.slug === connector.slug) : undefined;
 }
 /**
- * A Pipedream or Composio connector in a `connectors_v2` project: Kortix retires
- * both. With a Kortix app for it, the row moves the connector there: the person
- * signs in once, and the connector switches when the sign-in completes (it keeps
- * its slug). Without one, it says the connector stays on its provider.
+ * A Pipedream connector: Kortix retires Pipedream.
+ * With a Kortix app for it, the row moves the connector there: the person signs
+ * in once, and the connector switches when the sign-in completes (it keeps its
+ * slug). Without one, it says the connector stays on Pipedream.
+ *
+ * A Composio connector is a supported way to connect. Its row appears only when
+ * the app also has its own MCP server, and offers the switch as an option.
  */
 export function ConnectorMoveRow({ projectId, connector, displayName, canWrite, onMoved, }) {
     const t = useTranslations('connectorPages');
@@ -58,15 +59,23 @@ export function ConnectorMoveRow({ projectId, connector, displayName, canWrite,
     });
     if (!move)
         return null;
-    const provider = move.provider === 'composio' ? 'Composio' : 'Pipedream';
+    const composio = move.provider === 'composio';
+    // A Composio connector with no MCP server of its own: nothing to offer.
+    if (composio && !move.to)
+        return null;
+    const provider = composio ? 'Composio' : 'Pipedream';
     // The other accounts hold logins of the old provider, which no Kortix app accepts.
     const others = Math.max(0, move.accounts - 1);
     const start = () => (others > 0 ? setConfirming(true) : run.mutate());
-    return (_jsxs(_Fragment, { children: [_jsx(ConnectorNoticeRow, { title: move.to
-                    ? t('moveTitle', { app: move.to.name, provider })
-                    : t('moveNoneTitle', { name: displayName, provider }), detail: _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: move.to
-                        ? t('moveBody', { app: move.to.name, slug: connector.slug, provider })
-                        : t('moveNoneBody', { name: displayName, provider }) }), children: move.to && canWrite ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: start, disabled: run.isPending, children: [run.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, move.signed_in ? t('moveFinishAction') : t('moveAction')] })) : null }), _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, title: t('moveConfirmTitle', { app: move.to?.name ?? displayName }), description: t('moveConfirmBody', { count: others, provider }), confirmLabel: t('moveAction'), isPending: run.isPending, onConfirm: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(ConnectorNoticeRow, { title: composio && move.to
+                    ? t('moveComposioTitle', { app: move.to.name })
+                    : move.to
+                        ? t('moveTitle', { app: move.to.name, provider })
+                        : t('moveNoneTitle', { name: displayName, provider }), detail: _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: composio && move.to
+                        ? t('moveComposioBody', { app: move.to.name, slug: connector.slug })
+                        : move.to
+                            ? t('moveBody', { app: move.to.name, slug: connector.slug, provider })
+                            : t('moveNoneBody', { name: displayName, provider }) }), children: move.to && canWrite ? (_jsxs(Button, { size: "sm", variant: composio ? 'secondary' : 'default', className: "gap-1.5", onClick: start, disabled: run.isPending, children: [run.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, move.signed_in ? t('moveFinishAction') : composio ? t('moveComposioAction') : t('moveAction')] })) : null }), _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, title: t('moveConfirmTitle', { app: move.to?.name ?? displayName }), description: t('moveConfirmBody', { count: others, provider }), confirmLabel: t('moveAction'), isPending: run.isPending, onConfirm: () => {
                     setConfirming(false);
                     run.mutate();
                 } })] }));

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

@@ -1,5 +1,6 @@
 import { type AdminConnector } from '@kortix/sdk';
 import { type ReactNode } from 'react';
+import { type AppRef } from '../connector-routes.js';
 /** The column `CapabilityPageShell` gives the list page beside this one. */
 /**
  * `/projects/<id>/customize/connectors/<app>/<connector>` — one connector, as
@@ -30,6 +31,8 @@ export interface ConnectorDetailViewProps {
     /** The view's own connector is gone: leave it (the page routes back, the
      *  modal closes). */
     onLeave: () => void;
+    /** The catalogue app the URL names, when it names one: Settings links to its page. */
+    app?: AppRef | null;
     /** The tab and the install hand-offs live in the URL on the page. The modal
      *  keeps its tab in state, so it never rewrites its host page's URL. */
     urlState?: boolean;
@@ -41,7 +44,7 @@ export interface ConnectorDetailViewProps {
  * tabs. The page (`/connectors/<app>/<connector>`) and the agent editor's
  * connector modal render this same view, so the two cannot drift.
  */
-export declare function ConnectorDetailView({ projectId, connector, canWrite, onChanged, onRemoved, back, headerEnd, wrapTitle, onLeave, urlState, columnClassName, }: ConnectorDetailViewProps): import("react").JSX.Element;
+export declare function ConnectorDetailView({ projectId, connector, canWrite, onChanged, onRemoved, back, headerEnd, wrapTitle, onLeave, urlState, columnClassName, app, }: ConnectorDetailViewProps): import("react").JSX.Element;
 /**
  * The strip's bottom row when something is wrong: a one-line title, the raw
  * failure as a quiet log line, and the buttons that fix it. No icon tile; the

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

@@ -21,8 +21,9 @@ import { errorToast } from '../../../primitives/toast.js';
 import { EmptyState } from '../../../primitives/empty-state.js';
 import { ErrorState } from '../../../primitives/error-state.js';
 import { ComputerConnectModal } from '../../../internal/tunnel/computer-connect.js';
-import { ConnectorAppIcon } from '../connector-identity.js';
-import { appHref, appRefFromLocation, connectorsHref, } from '../connector-routes.js';
+import { ConnectorLogo } from '../../../internal/connector-logo/connector-logo.js';
+import { installedConnectorLogoSource } from '../../../internal/connector-logo/connector-logo-source.js';
+import { appRefFromLocation, connectorsHref } from '../connector-routes.js';
 import { startDiscoveredSignIn } from '../../sections/connector-oauth2-start.js';
 import { SetCredentialModal } from '../../sections/connectors-view.js';
 import { useOauth2Return } from '../../../internal/hooks/connectors/use-oauth2-return.js';
@@ -78,8 +79,9 @@ export function ConnectorPage({ projectId, appSegment, connectorSlug, }) {
         }
     }, [connectorSlug, projectId, queryClient]);
     useOauth2Return(invalidate);
+    // Back goes to the list: an installed app's page only redirects here.
     const app = appRefFromLocation(appSegment, search);
-    const backHref = app ? appHref(projectId, app) : connectorsHref(projectId, 'connected');
+    const backHref = connectorsHref(projectId);
     const state = connectorPageState({
         found: connector !== null,
         isPending: connectorsQuery.isPending,
@@ -95,21 +97,21 @@ export function ConnectorPage({ projectId, appSegment, connectorSlug, }) {
                     : tI18nComplete.raw('textd8eda34a089a'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void connectorsQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) }) }));
     }
     if (!connector) {
-        return (_jsx(DetailPageShell, { children: _jsx(EmptyState, { icon: PlugIcon, size: "sm", title: t('notFoundTitle'), description: t('notFoundDescription'), action: _jsx(Button, { asChild: true, size: "sm", variant: "secondary", children: _jsx(Link, { href: connectorsHref(projectId, 'connected'), children: t('backToConnectors') }) }) }) }));
+        return (_jsx(DetailPageShell, { children: _jsx(EmptyState, { icon: PlugIcon, size: "sm", title: t('notFoundTitle'), description: t('notFoundDescription'), action: _jsx(Button, { asChild: true, size: "sm", variant: "secondary", children: _jsx(Link, { href: connectorsHref(projectId), children: t('backToConnectors') }) }) }) }));
     }
-    return (_jsx(ConnectorPageBody, { projectId: projectId, connector: connector, canWrite: canWrite, backHref: backHref, onChanged: invalidate, onRemoved: invalidateAfterRemove }, connector.slug));
+    return (_jsx(ConnectorPageBody, { projectId: projectId, connector: connector, canWrite: canWrite, backHref: backHref, app: app, onChanged: invalidate, onRemoved: invalidateAfterRemove }, connector.slug));
 }
 function ConnectorPageBody({ backHref, ...props }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const router = useUiRouter();
-    return (_jsx(ConnectorDetailView, { ...props, back: _jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: backHref, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3d2e79ebdd0')] }) }), onLeave: () => router.push(connectorsHref(props.projectId, 'connected')) }));
+    return (_jsx(ConnectorDetailView, { ...props, back: _jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: backHref, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3d2e79ebdd0')] }) }), onLeave: () => router.push(connectorsHref(props.projectId)) }));
 }
 /**
  * One connector — the strip, its notice, and the Accounts / Tools / Settings
  * tabs. The page (`/connectors/<app>/<connector>`) and the agent editor's
  * connector modal render this same view, so the two cannot drift.
  */
-export function ConnectorDetailView({ projectId, connector, canWrite, onChanged, onRemoved, back, headerEnd, wrapTitle = (title) => title, onLeave, urlState = true, columnClassName = PAGE_COLUMN, }) {
+export function ConnectorDetailView({ projectId, connector, canWrite, onChanged, onRemoved, back, headerEnd, wrapTitle = (title) => title, onLeave, urlState = true, columnClassName = PAGE_COLUMN, app = null, }) {
     const t = useTranslations('connectorPages');
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const tSharing = useTranslations('accessSharing');
@@ -156,7 +158,8 @@ export function ConnectorDetailView({ projectId, connector, canWrite, onChanged,
         settled: !connectionsQuery.isFetching && !manageProbeLoading,
         refetched: refetchedFor === connectId,
         canManageConnections,
-        direct: !isManagedProvider && !isComputer && !isChannel,
+        // An inbox account has no credential to open: it is made by Add inbox.
+        direct: !isManagedProvider && !isComputer && connector.provider !== 'channel',
     });
     const handoffAction = handoff.action;
     const handoffConnectionId = handoff.action === 'open' ? handoff.connectionId : null;
@@ -280,7 +283,7 @@ export function ConnectorDetailView({ projectId, connector, canWrite, onChanged,
     // account reconnects through its provider window.
     const needsSignIn = isManagedProvider || Boolean(connector.authSecret);
     const connectAccount = (account) => isManagedProvider ? reconnectAccount(account) : signIn.mutate(account);
-    const tone = connectorStatusTone(connector);
+    const tone = connectorStatusTone(connector, connectionsQuery.isSuccess ? accounts.length : undefined);
     const providerManagedBy = isManagedConnectorProvider(connector.provider)
         ? connectorRunsOver(connector.provider)
         : null;
@@ -314,7 +317,7 @@ export function ConnectorDetailView({ projectId, connector, canWrite, onChanged,
             setCredentialTarget(null);
     };
     const addAccountControl = isComputer ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: () => setComputerOpen(true), children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tI18nComplete.raw('text1a2303ede074')] })) : (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: requestAdd, disabled: connectPending, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tSharing('addAccount')] }));
-    return (_jsxs(SplitSheet, { open: sheetOpen, onOpenChange: closeCredential, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs("div", { className: columnClassName, children: [back, _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ConnectorAppIcon, { connector: connector, size: "lg" }), wrapTitle(_jsx("h1", { ref: headingRef, tabIndex: -1, className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: displayName }))] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [isComputer && headerCta === 'connect' ? addAccountControl : null, connected ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => startPrivateSession(), children: t('newSession') })) : null, headerEnd] })] }), _jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [_jsx("dl", { className: "divide-border flex divide-x", children: stripCells.map((cell) => (_jsxs("div", { className: "min-w-0 flex-1 space-y-0.5 px-4 py-2.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "truncate", children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground flex min-w-0 items-center gap-1.5 truncate text-sm font-medium", children: cell.value })] }, cell.key))) }), notice.kind !== 'none' ? (_jsxs(ConnectorNoticeRow, { title: t(NOTICE_TITLE[notice.kind], { name: displayName }), detail: notice.kind === 'error' && notice.reason ? (_jsx(NoticeLogLine, { reason: notice.reason })) : (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t(notice.kind === 'needs_credential' && isManagedProvider
+    return (_jsxs(SplitSheet, { open: sheetOpen, onOpenChange: closeCredential, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs("div", { className: columnClassName, children: [back, _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ConnectorLogo, { source: installedConnectorLogoSource(connector), size: "lg" }), wrapTitle(_jsx("h1", { ref: headingRef, tabIndex: -1, className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: displayName }))] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [isComputer && headerCta === 'connect' ? addAccountControl : null, connected ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => startPrivateSession(), children: t('newSession') })) : null, headerEnd] })] }), _jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [_jsx("dl", { className: "divide-border flex divide-x", children: stripCells.map((cell) => (_jsxs("div", { className: "min-w-0 flex-1 space-y-0.5 px-4 py-2.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "truncate", children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground flex min-w-0 items-center gap-1.5 truncate text-sm font-medium", children: cell.value })] }, cell.key))) }), notice.kind !== 'none' && !(notice.kind === 'no_account' && tab === 'accounts') ? (_jsxs(ConnectorNoticeRow, { title: t(NOTICE_TITLE[notice.kind], { name: displayName }), detail: notice.kind === 'error' && notice.reason ? (_jsx(NoticeLogLine, { reason: notice.reason })) : (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t(notice.kind === 'needs_credential' && isManagedProvider
                                             ? 'noticeReconnectBody'
                                             : NOTICE_BODY[notice.kind], { name: displayName }) })), children: [notice.kind === 'error' && canWrite ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "gap-1.5", onClick: () => retry.mutate(), disabled: retry.isPending, children: [retry.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text942087cc2d41')] })) : null, fix?.kind === 'add_account' ? (addAccountControl) : fix?.kind === 'sign_in' ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: runFix, disabled: signIn.isPending, children: [signIn.isPending ? _jsx(SessionDotMatrix, { size: 14, className: "shrink-0" }) : null, t('noticeSignInAction')] })) : fix ? (
                                         // Fix it here: credential entry for a direct account, the
@@ -342,6 +345,7 @@ export function ConnectorDetailView({ projectId, connector, canWrite, onChanged,
                                         projectId: projectId,
                                         connector: connector,
                                         displayName: displayName,
+                                        app,
                                         onChanged: onChanged,
                                         onRemoved: () => {
                                             onLeave();

package/dist/customize/connectors/detail/connector-policy-sets.d.ts

@@ -0,0 +1,28 @@
+/** `read_only` reads "Read only" on screen; the name itself is in the tooltip and in kortix.yaml. */
+export declare function policySetLabel(name: string): string;
+/**
+ * The rule-list strip above the Tools tab: "Base rules", each policy set,
+ * then "New rule set". A set gives the agents it is assigned to different
+ * rules on this connector, with the same accounts. Each tab counts the rules
+ * its list holds. Past about six sets the strip scrolls sideways.
+ *
+ * Under the strip, one line says who the selected list applies to: every
+ * agent without a set, or the agents that use this set (each a link to that
+ * agent's Connectors page).
+ *
+ * The bar owns create, edit (rename + description) and delete. The rules of
+ * the selected set are edited by the Tools list below, through the one rule
+ * writer (`PUT .../policies?policy_set=<name>`).
+ *
+ * Delete is refused while an agent uses the set: the button is disabled with
+ * that reason, and a 409 from a concurrent assignment surfaces the server's
+ * message naming the agents.
+ */
+export declare function ConnectorPolicySetBar({ projectId, slug, canWrite, value, onChange, }: {
+    projectId: string;
+    slug: string;
+    canWrite: boolean;
+    /** The selected set, or null for the base rules. */
+    value: string | null;
+    onChange: (next: string | null) => void;
+}): import("react").JSX.Element | null;

package/dist/customize/connectors/detail/connector-policy-sets.js

@@ -0,0 +1,203 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { deleteConnectorPolicySet, getConnectorPolicies, listConnectorPolicySets, listConnectors, renameConnectorPolicySet, upsertConnectorPolicySet, } from '@kortix/sdk';
+import { contract, qk } from '@kortix/sdk/react';
+import { CaretDownIcon, PlusIcon } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Fragment, useEffect, useId, useState } from 'react';
+import { Button } from '../../../primitives/button.js';
+import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from '../../../primitives/dropdown-menu.js';
+import { RadioGroup, RadioGroupItem } from '../../../primitives/radio-group.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { Field, FieldDescription, FieldGroup, FieldLabel } from '../../../primitives/field.js';
+import Hint from '../../../primitives/hint.js';
+import { Input } from '../../../primitives/input.js';
+import Loading from '../../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { Tabs, TabsListCompact, TabsTriggerCompact } from '../../../primitives/tabs.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { agentHref, capabilityTabHref } from '../../../internal/lib/capability-tab-routes.js';
+import { UiLink as Link } from '../../../providers/ui-provider.js';
+import { connectorPoliciesKey, connectorPolicySetsKey, POLICY_SET_TEMPLATES, policySetNameProblem, TEMPLATE_NAME, } from '../tools/policy-sets.js';
+import { humanizeToolName } from '../tools/tool-groups.js';
+import { agentConnectorAccess } from '../agent-access.js';
+import { useAgentAccess } from '../use-agent-access.js';
+/** `read_only` reads "Read only" on screen; the name itself is in the tooltip and in kortix.yaml. */
+export function policySetLabel(name) {
+    return humanizeToolName(name);
+}
+/** The tab value of the base rules. A set name starts with [a-z0-9]. */
+const BASE_VALUE = '__base';
+/**
+ * The rule-list strip above the Tools tab: "Base rules", each policy set,
+ * then "New rule set". A set gives the agents it is assigned to different
+ * rules on this connector, with the same accounts. Each tab counts the rules
+ * its list holds. Past about six sets the strip scrolls sideways.
+ *
+ * Under the strip, one line says who the selected list applies to: every
+ * agent without a set, or the agents that use this set (each a link to that
+ * agent's Connectors page).
+ *
+ * The bar owns create, edit (rename + description) and delete. The rules of
+ * the selected set are edited by the Tools list below, through the one rule
+ * writer (`PUT .../policies?policy_set=<name>`).
+ *
+ * Delete is refused while an agent uses the set: the button is disabled with
+ * that reason, and a 409 from a concurrent assignment surfaces the server's
+ * message naming the agents.
+ */
+export function ConnectorPolicySetBar({ projectId, slug, canWrite, value, onChange, }) {
+    const t = useTranslations('connectorPolicySets');
+    const access = useAgentAccess(projectId);
+    const connectorsQuery = useQuery({
+        queryKey: qk.project.connectors(projectId),
+        queryFn: () => listConnectors(projectId, { includeSchemas: false }),
+        ...contract('config'),
+    });
+    const allSlugs = (connectorsQuery.data?.connectors ?? []).map((item) => item.slug);
+    const queryClient = useQueryClient();
+    const queryKey = connectorPolicySetsKey(projectId, slug);
+    const setsQuery = useQuery({
+        queryKey,
+        queryFn: () => listConnectorPolicySets(projectId, slug),
+        enabled: canWrite,
+    });
+    // The same key and fetch as the Tools list's base query, so this is the
+    // one cached request, not a second one.
+    const baseQuery = useQuery({
+        queryKey: connectorPoliciesKey(projectId, slug, null),
+        queryFn: () => getConnectorPolicies(projectId, slug, { policySet: undefined }),
+        staleTime: 5_000,
+        enabled: canWrite,
+    });
+    const sets = setsQuery.data?.sets ?? [];
+    const selected = value ? sets.find((set) => set.name === value) : undefined;
+    // A set deleted or renamed elsewhere: fall back to the base rules instead of
+    // editing a list that no longer exists.
+    useEffect(() => {
+        // Not while the list refetches: a set created or renamed a moment ago is
+        // not in the stale list yet.
+        if (value && setsQuery.isSuccess && !setsQuery.isFetching && !selected)
+            onChange(null);
+    }, [value, setsQuery.isSuccess, setsQuery.isFetching, selected, onChange]);
+    const [editor, setEditor] = useState(null);
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const invalidate = () => {
+        void queryClient.invalidateQueries({ queryKey });
+        void queryClient.invalidateQueries({ queryKey: ['connector-policies', projectId, slug] });
+        // Rename and delete rewrite agent references in kortix.yaml.
+        void queryClient.invalidateQueries({ queryKey: qk.project.detail(projectId) });
+    };
+    const remove = useMutation({
+        mutationFn: (name) => deleteConnectorPolicySet(projectId, slug, name),
+        onSuccess: (_result, name) => {
+            successToast(t('deleted', { name }));
+            onChange(null);
+            setConfirmDelete(false);
+            invalidate();
+        },
+        // 409 `policy_set_in_use`: the server's message names the agents.
+        onError: (error) => {
+            setConfirmDelete(false);
+            errorToast(error.message);
+            invalidate();
+        },
+    });
+    if (!canWrite)
+        return null;
+    if (setsQuery.isPending)
+        return _jsx(Skeleton, { className: "h-7 w-56 rounded-md" });
+    if (setsQuery.isError) {
+        return (_jsx(ErrorState, { size: "sm", title: t('loadFailed'), description: setsQuery.error instanceof Error ? setsQuery.error.message : undefined, action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void setsQuery.refetch(), children: t('retry') }) }));
+    }
+    const agents = selected?.agents ?? [];
+    const agentList = agents.join(', ');
+    const ruleTotal = selected ? selected.policies.length : (baseQuery.data?.policies.length ?? 0);
+    // Agents that can take this set: every agent not on it yet.
+    const giveTo = selected ? access.agents.filter((agent) => !agents.includes(agent)) : [];
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("div", { className: "min-w-0 overflow-x-auto", children: _jsx(Tabs, { value: value ?? BASE_VALUE, onValueChange: (next) => onChange(next === BASE_VALUE ? null : next), children: _jsxs(TabsListCompact, { "aria-label": t('rulesFor'), children: [_jsx(TabsTriggerCompact, { value: BASE_VALUE, children: t('baseRules') }), sets.map((set) => (_jsxs(TabsTriggerCompact, { value: set.name, title: set.name, children: [policySetLabel(set.name), _jsxs("span", { className: "text-muted-foreground", children: [' · ', t('agentCount', { count: set.agents.length })] })] }, set.name)))] }) }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "shrink-0", onClick: () => setEditor({ mode: 'create' }), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), t('createTitle')] })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-1", children: [_jsxs("p", { className: "text-muted-foreground min-w-0 text-xs text-pretty", children: [selected ? (_jsxs(_Fragment, { children: [selected.description ? `${selected.description} · ` : null, agents.length > 0 ? (_jsxs(_Fragment, { children: [t('usedByLead'), ' ', agents.map((agent, index) => (_jsxs(Fragment, { children: [index > 0 ? ', ' : null, _jsx(Link, { href: `${agentHref(projectId, agent)}?section=connectors`, className: "text-foreground underline-offset-4 hover:underline", children: agent })] }, agent)))] })) : (_jsxs(_Fragment, { children: [t('unusedLead'), ' ', _jsx(Link, { href: capabilityTabHref(projectId, 'agent'), className: "text-foreground underline-offset-4 hover:underline", children: t('unusedLink') })] }))] })) : (t('baseContext')), ' · ', t('ruleCount', { count: ruleTotal })] }), selected ? (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [access.supported && access.canEdit && giveTo.length > 0 ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "xs", disabled: access.pending !== null, children: [t('giveToAgent'), _jsx(CaretDownIcon, { className: "size-3 shrink-0" })] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "min-w-48", children: [_jsx(DropdownMenuLabel, { children: t('giveToAgentLabel', { name: policySetLabel(selected.name) }) }), giveTo.map((agent) => {
+                                                const current = agentConnectorAccess(access.grantsOf(agent), slug);
+                                                return (_jsxs(DropdownMenuItem, { onSelect: () => void access
+                                                        .setPolicySet(agent, slug, selected.name, allSlugs)
+                                                        .then(() => successToast(t('givenToAgent', { agent, name: policySetLabel(selected.name) })))
+                                                        .catch(() => undefined), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: agent }), !current.granted || current.policySet ? (_jsx("span", { className: "text-muted-foreground shrink-0 text-xs", children: !current.granted
+                                                                ? t('giveToAgentGrants')
+                                                                : t('giveToAgentReplaces', { name: policySetLabel(current.policySet) }) })) : null] }, agent));
+                                            })] })] })) : null, _jsx(Button, { variant: "ghost", size: "xs", "aria-label": t('edit'), onClick: () => setEditor({ mode: 'edit', set: selected }), children: t('editShort') }), _jsx(Hint, { label: agents.length > 0 ? t('deleteInUse', { agents: agentList }) : t('delete'), side: "bottom", children: _jsx("span", { className: "inline-flex", children: _jsx(Button, { variant: "ghost", size: "xs", "aria-label": t('delete'), disabled: agents.length > 0 || remove.isPending, "aria-busy": remove.isPending || undefined, onClick: () => setConfirmDelete(true), children: t('deleteConfirm') }) }) })] })) : null] }), _jsx(PolicySetEditor, { projectId: projectId, slug: slug, state: editor, existing: sets.map((set) => set.name), onOpenChange: (open) => !open && setEditor(null), onSaved: (name, rules = []) => {
+                    // Put the saved set in the cached list before selecting it, so the
+                    // stale-selection fallback above never sees it missing.
+                    const previous = editor?.mode === 'edit' ? editor.set : null;
+                    queryClient.setQueryData(queryKey, (current) => {
+                        const list = (current?.sets ?? []).filter((set) => set.name !== name && set.name !== previous?.name);
+                        const saved = previous
+                            ? { ...previous, name }
+                            : { name, description: null, policies: rules, agents: [] };
+                        return { sets: [...list, saved] };
+                    });
+                    setEditor(null);
+                    onChange(name);
+                    invalidate();
+                } }, editor ? (editor.mode === 'edit' ? `edit:${editor.set.name}` : 'create') : 'closed'), _jsx(ConfirmDialog, { open: confirmDelete, onOpenChange: setConfirmDelete, title: selected ? t('deleteTitle', { name: selected.name }) : '', description: t('deleteBody'), confirmLabel: t('deleteConfirm'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => selected && remove.mutate(selected.name) })] }));
+}
+/**
+ * Create a set, or rename it and change its description. A rename rewrites
+ * every agent reference in the same kortix.yaml commit (server side), so an
+ * agent never points at a missing set in between.
+ */
+function PolicySetEditor({ projectId, slug, state, existing, onOpenChange, onSaved, }) {
+    const t = useTranslations('connectorPolicySets');
+    const id = useId();
+    const current = state?.mode === 'edit' ? state.set : null;
+    const [template, setTemplate] = useState('read_only');
+    const [name, setName] = useState(current?.name ?? (existing.includes('read_only') ? '' : 'read_only'));
+    // The name follows the template until the user types one.
+    const [nameEdited, setNameEdited] = useState(false);
+    const pickTemplate = (next) => {
+        setTemplate(next);
+        if (!nameEdited)
+            setName(existing.includes(TEMPLATE_NAME[next]) ? '' : TEMPLATE_NAME[next]);
+    };
+    const [description, setDescription] = useState(current?.description ?? '');
+    const trimmed = name.trim();
+    const problem = trimmed ? policySetNameProblem(trimmed, existing, current?.name ?? null) : null;
+    const save = useMutation({
+        mutationFn: async () => {
+            const nextDescription = description.trim() || null;
+            if (!current) {
+                // A template's set and its rules land in one kortix.yaml commit.
+                const description = nextDescription ?? (template === 'empty' ? null : t(`template_${template}_description`));
+                await upsertConnectorPolicySet(projectId, slug, trimmed, {
+                    description,
+                    ...(template === 'empty' ? {} : { template }),
+                });
+                // The answer counts the rules written; the set's list refetches them.
+                return { name: trimmed, created: true, rules: [] };
+            }
+            if (trimmed !== current.name) {
+                await renameConnectorPolicySet(projectId, slug, current.name, trimmed);
+            }
+            if (nextDescription !== (current.description ?? null)) {
+                await upsertConnectorPolicySet(projectId, slug, trimmed, { description: nextDescription });
+            }
+            return { name: trimmed, created: false, rules: undefined };
+        },
+        onSuccess: (result) => {
+            successToast(result.created ? t('created', { name: policySetLabel(result.name) }) : t('saved'));
+            onSaved(result.name, result.rules);
+        },
+        onError: (error) => errorToast(error.message),
+    });
+    const pending = save.isPending;
+    const valid = trimmed !== '' && problem === null;
+    return (_jsx(Modal, { open: state !== null, onOpenChange: (next) => !pending && onOpenChange(next), children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: current ? t('editTitle') : t('createTitle') }), _jsx(ModalDescription, { children: current ? t('editBody') : t('createBody') })] }), _jsxs("form", { onSubmit: (event) => {
+                        event.preventDefault();
+                        if (valid && !pending)
+                            save.mutate();
+                    }, children: [_jsx(ModalBody, { children: _jsxs(FieldGroup, { children: [current ? null : (_jsxs(Field, { children: [_jsx(FieldLabel, { children: t('templateLabel') }), _jsx(RadioGroup, { value: template, onValueChange: (next) => pickTemplate(next), disabled: pending, className: "gap-2", children: POLICY_SET_TEMPLATES.map((option) => (_jsx(RadioGroupItem, { value: option, variant: "outline", size: "lg", label: t(`template_${option}`), description: t(`template_${option}_description`) }, option))) })] })), _jsxs(Field, { "data-invalid": problem ? true : undefined, children: [_jsx(FieldLabel, { htmlFor: `${id}-name`, children: t('nameLabel') }), _jsx(Input, { id: `${id}-name`, value: name, onChange: (event) => {
+                                                    setNameEdited(true);
+                                                    setName(event.target.value);
+                                                }, placeholder: "read_only", autoComplete: "off", spellCheck: false, className: "font-mono", "aria-invalid": problem ? true : undefined, disabled: pending, autoFocus: current !== null }), _jsx(FieldDescription, { className: problem ? 'text-destructive' : undefined, children: problem === 'taken' ? t('nameTaken') : t('nameHelp') })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: `${id}-description`, children: t('descriptionLabel') }), _jsx(Input, { id: `${id}-description`, value: description, onChange: (event) => setDescription(event.target.value), placeholder: t('descriptionPlaceholder'), autoComplete: "off", disabled: pending })] })] }) }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: () => onOpenChange(false), disabled: pending, children: t('cancel') }), _jsxs(Button, { type: "submit", disabled: !valid || pending, children: [pending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, current ? t('save') : t('create')] })] })] })] }) }));
+}

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

@@ -1,10 +1,13 @@
 import { type AdminConnector } from '@kortix/sdk';
+import { type AppRef } from '../connector-routes.js';
 interface ConnectorSettingsProps {
     projectId: string;
     connector: AdminConnector;
     displayName: string;
     onChanged: () => void;
     onRemoved: () => void;
+    /** The catalogue app, when the URL names it: "Install as another profile" opens its page. */
+    app?: AppRef | null;
 }
 /**
  * Settings — the connector's name, the transport config for a direct
@@ -32,5 +35,5 @@ interface ConnectorSettingsProps {
  * The name is edited here, in a field with a Save button. It used to be a
  * pencil beside the title, which made the heading itself an input.
  */
-export declare function ConnectorSettings({ projectId, connector, displayName, onChanged, onRemoved, }: ConnectorSettingsProps): import("react").JSX.Element;
+export declare function ConnectorSettings({ projectId, connector, displayName, onChanged, onRemoved, app, }: ConnectorSettingsProps): import("react").JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTranslations } from '../../../i18n/index.js';
 import { deleteConnector, setConnectorName } from '@kortix/sdk';
-import { TrashIcon } from '@phosphor-icons/react';
+import { ArrowRightIcon, TrashIcon } from '@phosphor-icons/react';
 import { useMutation } from '@tanstack/react-query';
 import { useId, useState } from 'react';
 import { Badge } from '../../../primitives/badge.js';
@@ -14,6 +14,8 @@ import Loading from '../../../primitives/loading.js';
 import { errorToast, successToast } from '../../../primitives/toast.js';
 import { ConnectionSection } from '../../sections/connectors-view.js';
 import { isManagedConnectorProvider } from '../provider-label.js';
+import { appHref, browseForAnotherProfileHref } from '../connector-routes.js';
+import { UiLink as Link } from '../../../providers/ui-provider.js';
 import { connectorRunsOver } from './connector-status.js';
 /**
  * Settings — the connector's name, the transport config for a direct
@@ -41,7 +43,7 @@ import { connectorRunsOver } from './connector-status.js';
  * The name is edited here, in a field with a Save button. It used to be a
  * pencil beside the title, which made the heading itself an input.
  */
-export function ConnectorSettings({ projectId, connector, displayName, onChanged, onRemoved, }) {
+export function ConnectorSettings({ projectId, connector, displayName, onChanged, onRemoved, app = null, }) {
     const t = useTranslations('connectorPages');
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const isChannel = connector.provider === 'channel';
@@ -77,5 +79,7 @@ export function ConnectorSettings({ projectId, connector, displayName, onChanged
                                         rename.mutate();
                                 }, children: [_jsx(Input, { id: nameId, value: name, onChange: (event) => setNameDraft(event.target.value), variant: "popover", maxLength: 255, className: "min-w-0 flex-1", disabled: rename.isPending }), _jsxs(Button, { type: "submit", size: "sm", variant: "secondary", className: "shrink-0 gap-1.5", disabled: !nameChanged || rename.isPending, children: [rename.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241')] })] })] }), _jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: managed ? t('signInLabel') : t('infoRunsOver') }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: managed
                                             ? t('signInManagedHelp', { provider: connectorRunsOver(connector.provider) })
-                                            : t('runsOverDirectHelp', { name: displayName }) })] }), _jsx(Badge, { variant: "outline", size: "sm", className: "shrink-0", children: connectorRunsOver(connector.provider) })] })] }), isDirectProvider ? (_jsx(ConnectionSection, { projectId: projectId, connector: connector, onChanged: onChanged, canWrite: true })) : null, !isChannel && !isComputer ? (_jsx("div", { className: "bg-popover rounded-md border px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: t('removeTitle', { name: displayName }) }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: t('removeHelp') })] }), _jsxs(Button, { size: "sm", variant: "outline", className: "shrink-0 gap-1.5 active:scale-[0.96]", onClick: () => setConfirmDelete(true), children: [_jsx(TrashIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3812fc4acb8')] })] }) })) : null, _jsx(ConfirmDialog, { open: confirmDelete, onOpenChange: setConfirmDelete, title: tI18nComplete('textbc43ab815937', { value0: displayName }), description: _jsxs(_Fragment, { children: [tI18nComplete.raw('text0c044575853f'), ' ', _jsx("code", { className: "font-mono", children: connector.slug }), tI18nComplete.raw('text9627c3d54219')] }), confirmLabel: tI18nComplete.raw('textbf30cc3b0697'), confirmVariant: "destructive", confirmIcon: _jsx(TrashIcon, { className: "size-4 shrink-0" }), isPending: remove.isPending, onConfirm: () => remove.mutate() })] }));
+                                            : t('runsOverDirectHelp', { name: displayName }) })] }), _jsx(Badge, { variant: "outline", size: "sm", className: "shrink-0", children: connectorRunsOver(connector.provider) })] })] }), isDirectProvider ? (_jsx(ConnectionSection, { projectId: projectId, connector: connector, onChanged: onChanged, canWrite: true })) : null, !isChannel && !isComputer ? (_jsx("div", { className: "bg-popover rounded-md border px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: t('anotherProfileTitle') }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: t('anotherProfileHelp', { name: displayName }) })] }), _jsx(Button, { asChild: true, size: "sm", variant: "outline", className: "shrink-0 gap-1.5", children: _jsxs(Link, { href: app
+                                    ? appHref(projectId, app, { ways: true })
+                                    : browseForAnotherProfileHref(projectId, displayName), children: [t('anotherProfileAction'), _jsx(ArrowRightIcon, { className: "size-3.5 shrink-0" })] }) })] }) })) : null, !isChannel && !isComputer ? (_jsx("div", { className: "bg-popover rounded-md border px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: t('removeTitle', { name: displayName }) }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: t('removeHelp') })] }), _jsxs(Button, { size: "sm", variant: "outline", className: "shrink-0 gap-1.5 active:scale-[0.96]", onClick: () => setConfirmDelete(true), children: [_jsx(TrashIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3812fc4acb8')] })] }) })) : null, _jsx(ConfirmDialog, { open: confirmDelete, onOpenChange: setConfirmDelete, title: tI18nComplete('textbc43ab815937', { value0: displayName }), description: _jsxs(_Fragment, { children: [tI18nComplete.raw('text0c044575853f'), ' ', _jsx("code", { className: "font-mono", children: connector.slug }), tI18nComplete.raw('text9627c3d54219')] }), confirmLabel: tI18nComplete.raw('textbf30cc3b0697'), confirmVariant: "destructive", confirmIcon: _jsx(TrashIcon, { className: "size-4 shrink-0" }), isPending: remove.isPending, onConfirm: () => remove.mutate() })] }));
 }