@kortix/ui 0.14.8 → 0.14.10

package/dist/customize/connectors/detail/email-inboxes.js

@@ -0,0 +1,184 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Email inboxes as ACCOUNTS on the `kortix_email` connector profile. One
+ * profile, many inboxes: each Resend inbox is an account with a name, an owner
+ * (you only, or shared) and a default, like every other connector's accounts.
+ * What only email adds lives here: the "Add inbox" dialog (the standard
+ * account fields, then where the inbox lives and its address), who may email
+ * an inbox, and the Email hero that counts the inboxes.
+ */
+import { CaretRightIcon } from '@phosphor-icons/react';
+import { getProjectDetail } from '@kortix/sdk';
+import { contract, qk, useProjectAccountId } from '@kortix/sdk/react';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { grantConnectionAccess } from '../../../access/access/access-dialog-share.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { useEmailInboxes, useUpdateEmailInbox, } from '../../../internal/hooks/channels/use-email-inboxes.js';
+import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../../internal/lib/use-project-can.js';
+import { Button } from '../../../primitives/button.js';
+import { Checkbox } from '../../../primitives/checkbox.js';
+import { Field } from '../../../primitives/field.js';
+import { InfoBanner } from '../../../primitives/info-banner.js';
+import { Input } from '../../../primitives/input.js';
+import { Label } from '../../../primitives/label.js';
+import Loading from '../../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { UiLink as Link } from '../../../providers/ui-provider.js';
+import { AddAccountFields } from '../../sections/add-account-fields.js';
+import { ChannelHeroFrame, ChannelHeroStatus } from '../../sections/component/channel-hero-frame.js';
+import { EmailThreadMock } from '../../sections/component/channel-mocks.js';
+import { EmailConnectForm } from '../../sections/component/email-connect-form.js';
+import { newAccountGrantees, newAccountLabelTaken, } from '../../sections/view/connector-connections.js';
+import { proposeAccountLabel } from '../install/install.js';
+import { connectorHref } from '../connector-routes.js';
+/** The one connector profile every inbox is an account on. */
+export const EMAIL_CONNECTOR_SLUG = 'kortix_email';
+/** "Kortix managed" or "Your Resend account": where an inbox lives. */
+export function EmailInboxHome({ inbox }) {
+    const t = useTranslations('emailInboxes');
+    return _jsx("span", { children: inbox.managed ? t('homeManaged') : t('homeOwn') });
+}
+/** The sender policy in the editor's shape, whatever casing the wire used. */
+export function inboxSenderPolicy(inbox) {
+    const raw = (inbox?.sender_policy ?? {});
+    const list = (camel, snake) => {
+        const value = raw[camel] ?? raw[snake];
+        return Array.isArray(value) ? value.map(String) : [];
+    };
+    const regex = raw.allowedRegex ?? raw.allowed_regex;
+    return {
+        mode: raw.mode === 'restricted' ? 'restricted' : 'allow_all',
+        allowedEmails: list('allowedEmails', 'allowed_emails'),
+        allowedDomains: list('allowedDomains', 'allowed_domains'),
+        allowedRegex: typeof regex === 'string' && regex ? regex : null,
+    };
+}
+/** What the account half of "Add inbox" needs: may the viewer share, and "Everyone in {project}". */
+function useInboxAccountAccess(projectId) {
+    const tSharing = useTranslations('accessSharing');
+    const accountId = useProjectAccountId(projectId);
+    const canManageConnections = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_CONNECTOR_CONNECTIONS_MANAGE, { accountId }).allowed === true;
+    const projectQuery = useQuery({
+        queryKey: qk.project.detail(projectId),
+        queryFn: () => getProjectDetail(projectId),
+        ...contract('config'),
+    });
+    const projectName = projectQuery.data?.project?.name ?? '';
+    const everyoneLabel = projectName ? tSharing('everyone', { project: projectName }) : tSharing('visibilityEveryone');
+    return { accountId, canManageConnections, everyoneLabel };
+}
+const EMPTY_DRAFT = { label: '', audience: 'project', picked: { memberIds: [], groupIds: [] } };
+/**
+ * "Add inbox": the account's name and who can use it (`AddAccountFields`, the
+ * same fields every connector's Add account asks), then the inbox itself
+ * (`EmailConnectForm`). Picked people get the account shared with them after
+ * it exists, exactly like `useAddAccount`.
+ */
+export function AddEmailInboxDialog({ projectId, open, onOpenChange, existing, onAdded, }) {
+    const t = useTranslations('emailInboxes');
+    const { accountId, canManageConnections, everyoneLabel } = useInboxAccountAccess(projectId);
+    const [draft, setDraft] = useState(EMPTY_DRAFT);
+    const [opened, setOpened] = useState(false);
+    // Each opening starts from a free name; a shared account needs the right to share.
+    if (open && !opened) {
+        setOpened(true);
+        setDraft({
+            ...EMPTY_DRAFT,
+            audience: canManageConnections ? 'project' : 'private',
+            label: proposeAccountLabel(t('defaultLabel'), existing.map((row) => row.label)),
+        });
+    }
+    if (!open && opened)
+        setOpened(false);
+    const labelTaken = newAccountLabelTaken(draft, existing);
+    const share = draft.audience === 'private' ? 'me' : 'project';
+    const ready = draft.label.trim().length > 0 &&
+        !labelTaken &&
+        (draft.audience !== 'members' || draft.picked.memberIds.length + draft.picked.groupIds.length > 0);
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsxs(ModalContent, { className: "lg:max-w-2xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('addTitle') }), _jsx(ModalDescription, { children: t('addDescription') })] }), _jsxs(ModalBody, { className: "max-h-[75vh] space-y-6 overflow-y-auto", children: [_jsx("section", { className: "space-y-4", children: _jsx(AddAccountFields, { projectId: projectId, value: draft, onChange: setDraft, labelTaken: labelTaken, canManageConnections: canManageConnections, accountId: accountId, everyoneLabel: everyoneLabel, hint: t('labelHint'), autoFocus: true }) }), ready ? (_jsx(EmailConnectForm, { projectId: projectId, account: { label: draft.label, share }, onConnected: async (inbox) => {
+                                if (draft.audience === 'members' && accountId) {
+                                    await grantConnectionAccess(accountId, projectId, inbox.connection_id, newAccountGrantees(draft.picked)).catch((e) => errorToast(e.message));
+                                }
+                                successToast(t('added', { address: inbox.email }));
+                                onAdded(inbox);
+                                onOpenChange(false);
+                            } })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: t('nameFirst') }))] })] }) }));
+}
+function splitPolicyList(value) {
+    return Array.from(new Set(value
+        .split(/[\n,]+/)
+        .map((item) => item.trim().toLowerCase())
+        .filter(Boolean)));
+}
+/** "Who can email" for one inbox: anyone, or only the listed senders. */
+export function EmailSenderPolicyDialog({ projectId, inbox, open, onOpenChange, }) {
+    const t = useTranslations('emailInboxes');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const update = useUpdateEmailInbox();
+    const initial = inboxSenderPolicy(inbox);
+    const [restricted, setRestricted] = useState(initial.mode === 'restricted');
+    const [emails, setEmails] = useState(initial.allowedEmails.join('\n'));
+    const [domains, setDomains] = useState(initial.allowedDomains.join('\n'));
+    const [regex, setRegex] = useState(initial.allowedRegex ?? '');
+    const [error, setError] = useState(null);
+    // Each inbox opened starts from its own saved policy.
+    const [syncedId, setSyncedId] = useState(null);
+    if (inbox && open && inbox.connection_id !== syncedId) {
+        setSyncedId(inbox.connection_id);
+        setRestricted(initial.mode === 'restricted');
+        setEmails(initial.allowedEmails.join('\n'));
+        setDomains(initial.allowedDomains.join('\n'));
+        setRegex(initial.allowedRegex ?? '');
+        setError(null);
+    }
+    if (!open && syncedId)
+        setSyncedId(null);
+    const save = () => {
+        if (!inbox)
+            return;
+        setError(null);
+        const sender_policy = {
+            mode: restricted ? 'restricted' : 'allow_all',
+            allowedEmails: splitPolicyList(emails),
+            allowedDomains: splitPolicyList(domains).map((domain) => domain.replace(/^@+/, '')),
+            allowedRegex: regex.trim() || null,
+        };
+        if (sender_policy.allowedRegex) {
+            try {
+                new RegExp(sender_policy.allowedRegex);
+            }
+            catch {
+                setError(t('regexInvalid'));
+                return;
+            }
+        }
+        update.mutate({ projectId, connectionId: inbox.connection_id, sender_policy }, {
+            onSuccess: () => {
+                successToast(t('policySaved'));
+                onOpenChange(false);
+            },
+            onError: (e) => setError(e.message),
+        });
+    };
+    return (_jsx(Modal, { open: open, onOpenChange: (next) => !update.isPending && onOpenChange(next), children: _jsxs(ModalContent, { className: "lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('policyTitle', { address: inbox?.email ?? '' }) }), _jsx(ModalDescription, { children: t('policyDescription') })] }), _jsx(ModalBody, { className: "space-y-3", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Checkbox, { id: "email-inbox-restricted", checked: restricted, onCheckedChange: (checked) => setRestricted(Boolean(checked)), className: "mt-0.5" }), _jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [_jsxs("div", { children: [_jsx(Label, { htmlFor: "email-inbox-restricted", children: tI18nComplete.raw('texta48c89f63885') }), _jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: tI18nComplete.raw('text8c67b476d59b') })] }), restricted ? (_jsxs("div", { className: "grid gap-3", children: [_jsx(Field, { children: _jsx(Input, { value: emails, onChange: (e) => setEmails(e.target.value), placeholder: tI18nComplete.raw('text542d24012988') }) }), _jsx(Field, { children: _jsx(Input, { value: domains, onChange: (e) => setDomains(e.target.value), placeholder: tI18nComplete.raw('texta379a6f6eeaf') }) }), _jsx(Field, { children: _jsx(Input, { value: regex, onChange: (e) => setRegex(e.target.value), placeholder: tI18nComplete.raw('text8b21058f3253'), spellCheck: false }) })] })) : null, error ? _jsx(InfoBanner, { tone: "destructive", children: error }) : null] })] }) }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { variant: "outline-ghost", onClick: () => onOpenChange(false), disabled: update.isPending, children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { onClick: save, disabled: update.isPending, children: [update.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241')] })] })] }) }));
+}
+/**
+ * The Email hero (Channels tab, the Email page): the pitch until a first inbox
+ * exists, then how many inboxes there are, their addresses, and Manage (the
+ * connector page with the account list) or Add another inbox. Like ComputerHero.
+ */
+export function EmailHero({ projectId, canWrite }) {
+    const t = useTranslations('emailInboxes');
+    const tPages = useTranslations('connectorPages');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const inboxes = useEmailInboxes(projectId);
+    const [addOpen, setAddOpen] = useState(false);
+    const list = inboxes.data ?? [];
+    const connected = list.length > 0;
+    const addresses = list.map((inbox) => inbox.email).join(', ');
+    return (_jsxs(_Fragment, { children: [_jsx(ChannelHeroFrame, { app: "email", title: connected ? t('heroCount', { count: list.length }) : tPages('emailHeroTitle'), lede: tPages('emailHeroLede'), status: connected ? (_jsx(ChannelHeroStatus, { label: tI18nComplete.raw('text22965568d22a'), detail: addresses || null })) : undefined, actions: connected ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", asChild: true, children: _jsxs(Link, { href: connectorHref(projectId, EMAIL_CONNECTOR_SLUG), children: [t('heroManage'), _jsx(CaretRightIcon, { className: "size-3.5 shrink-0" })] }) }), canWrite ? (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setAddOpen(true), children: t('heroAddAnother') })) : null] })) : canWrite ? (_jsx(Button, { className: "transition-transform active:scale-96", onClick: () => setAddOpen(true), children: t('heroAdd') })) : null, preview: _jsx(EmailThreadMock, {}) }), _jsx(AddEmailInboxDialog, { projectId: projectId, open: addOpen, onOpenChange: setAddOpen, existing: list.map((inbox) => ({ label: inbox.label, owner_type: inbox.owner_type })), onAdded: () => void inboxes.refetch() })] }));
+}

package/dist/customize/connectors/detail/provider-info.d.ts

@@ -1,4 +1,4 @@
-/** The Provider value: Kortix for a managed app, else the app itself. */
+/** The Provider value: the managed partner (Composio), else the app itself. */
 export declare function providerName(appName: string, managedBy: string | null): string;
 /**
  * The info button on the Provider label that explains who manages what.

package/dist/customize/connectors/detail/provider-info.js

@@ -4,9 +4,9 @@ import { InfoIcon } from '@phosphor-icons/react';
 import { Button } from '../../../primitives/button.js';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../../primitives/hover-card.js';
 import { useTranslations } from '../../../i18n/index.js';
-/** The Provider value: Kortix for a managed app, else the app itself. */
+/** The Provider value: the managed partner (Composio), else the app itself. */
 export function providerName(appName, managedBy) {
-    return managedBy ? 'Kortix' : appName;
+    return managedBy ?? appName;
 }
 /**
  * The info button on the Provider label that explains who manages what.

package/dist/customize/connectors/detail/status-badge.d.ts

@@ -1,5 +1,5 @@
 import { type ConnectorStatusTone } from './connector-status.js';
-/** A connector's state as a Badge with its dot: Working, Error, or Needs setup. */
+/** A connector's state as a Badge with its dot: Connected, Needs account or Error. */
 export declare function ConnectorStatusBadge({ tone }: {
     tone: ConnectorStatusTone;
 }): import("react").JSX.Element;

package/dist/customize/connectors/detail/status-badge.js

@@ -4,13 +4,12 @@ import { useTranslations } from '../../../i18n/index.js';
 import { cn } from '../../../internal/lib/utils.js';
 import { STATUS_DOT, STATUS_WORD } from './connector-status.js';
 const STATUS_BADGE = {
-    working: 'success',
-    pending: 'info',
+    connected: 'success',
+    account: 'warning',
     error: 'destructive',
-    setup: 'warning',
 };
-/** A connector's state as a Badge with its dot: Working, Error, or Needs setup. */
+/** A connector's state as a Badge with its dot: Connected, Needs account or Error. */
 export function ConnectorStatusBadge({ tone }) {
     const t = useTranslations('connectorPages');
-    return (_jsxs(Badge, { variant: STATUS_BADGE[tone], size: "sm", children: [_jsx("span", { "data-slot": "status-dot", "aria-hidden": true, className: cn('rounded', STATUS_DOT[tone]) }), t(STATUS_WORD[tone])] }));
+    return (_jsxs(Badge, { variant: STATUS_BADGE[tone], size: "sm", children: [_jsx("span", { "data-slot": "status-dot", "aria-hidden": true, className: cn('rounded-full', STATUS_DOT[tone]) }), t(STATUS_WORD[tone])] }));
 }

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

@@ -35,3 +35,9 @@ export declare function useConnectorDetail({ projectId, connector, canWrite, onC
     computerOpen: boolean;
     setComputerOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };
+/**
+ * A connector's accounts in a project's connection list: its rows minus
+ * revoked ones and the server's empty shared slot. The Accounts tab, the
+ * header and the Connectors list all count these, so they agree.
+ */
+export declare function connectorAccounts(connections: readonly Connection[] | undefined, connector: AdminConnector): Connection[];

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

@@ -21,7 +21,9 @@ import { connectorUsable } from './connector-status.js';
  */
 export function useConnectorDetail({ projectId, connector, canWrite, onChanged, }) {
     const isManagedProvider = isManagedConnectorProvider(connector.provider);
-    const isChannel = connector.provider === 'channel';
+    // Email is a channel whose accounts are inboxes: it lists and adds accounts
+    // like any connector, so only the single-install channels count here.
+    const isChannel = connector.provider === 'channel' && connector.platform !== 'email';
     const isComputer = connector.provider === 'computer';
     const displayName = connectorDisplayName(connector);
     const [credentialTarget, setCredentialTarget] = useState(null);
@@ -41,9 +43,7 @@ export function useConnectorDetail({ projectId, connector, canWrite, onChanged,
     // whose only shared account had just been disconnected).
     // The server's empty shared slot is a placeholder, not an account: it is
     // not listed or counted (see `emptyProjectSlot`).
-    const rows = connectorConnectionRows(connectionsQuery.data?.connections, connector.slug);
-    const slot = emptyProjectSlot(connector, rows);
-    const accounts = rows.filter((connection) => connection !== slot && connection.status !== 'revoked');
+    const accounts = connectorAccounts(connectionsQuery.data?.connections, connector);
     const soleAccount = accounts.length === 1 ? accounts[0] : null;
     // Server-computed and account-aware: `needs_auth` means no reachable account
     // holds a usable credential, whatever the owner type.
@@ -132,3 +132,13 @@ export function useConnectorDetail({ projectId, connector, canWrite, onChanged,
         setComputerOpen,
     };
 }
+/**
+ * A connector's accounts in a project's connection list: its rows minus
+ * revoked ones and the server's empty shared slot. The Accounts tab, the
+ * header and the Connectors list all count these, so they agree.
+ */
+export function connectorAccounts(connections, connector) {
+    const rows = connectorConnectionRows(connections, connector.slug);
+    const slot = emptyProjectSlot(connector, rows);
+    return rows.filter((connection) => connection !== slot && connection.status !== 'revoked');
+}

package/dist/customize/connectors/install/install-dialog.d.ts

@@ -0,0 +1,23 @@
+import { useTranslations } from '../../../i18n/index.js';
+import { type WayKind } from './way-kind.js';
+/** One way to connect, as the Install dialog describes it. */
+export interface InstallWay {
+    kind: WayKind;
+    oneClick: boolean;
+}
+/**
+ * Install → this dialog → the connector. The text says which way it
+ * connects, so a Composio app or an API key never comes as a surprise. The
+ * name is the app's; Rename opens the field for the rare second install.
+ * Who may use an account is chosen next, in Add account.
+ */
+export declare function InstallDialog({ appName, way, open, pending, onOpenChange, onConfirm, }: {
+    appName: string;
+    way: InstallWay;
+    open: boolean;
+    pending: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: (name: string) => void;
+}): import("react").JSX.Element;
+/** What connecting this way means for the user, in one or two sentences. */
+export declare function wayDescription(t: ReturnType<typeof useTranslations>, way: InstallWay, appName: string): string;

package/dist/customize/connectors/install/install-dialog.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { Badge } from '../../../primitives/badge.js';
+import { Button } from '../../../primitives/button.js';
+import { Field, FieldDescription, FieldLabel } from '../../../primitives/field.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 { useTranslations } from '../../../i18n/index.js';
+import { wayKindLabel } from './way-kind.js';
+/**
+ * Install → this dialog → the connector. The text says which way it
+ * connects, so a Composio app or an API key never comes as a surprise. The
+ * name is the app's; Rename opens the field for the rare second install.
+ * Who may use an account is chosen next, in Add account.
+ */
+export function InstallDialog({ appName, way, open, pending, onOpenChange, onConfirm, }) {
+    const t = useTranslations('connectorPages');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const id = useId();
+    const [name, setName] = useState(appName);
+    const [renaming, setRenaming] = useState(false);
+    const valid = /[a-z0-9]/i.test(name);
+    return (_jsx(Modal, { open: open, onOpenChange: (next) => !pending && onOpenChange(next), children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsxs(ModalTitle, { className: "flex items-center gap-2", children: [t('installTitle', { name: appName }), _jsx(Badge, { variant: "muted", size: "xs", children: wayKindLabel(way.kind) })] }), _jsx(ModalDescription, { children: wayDescription(t, way, appName) })] }), _jsxs("form", { onSubmit: (event) => {
+                        event.preventDefault();
+                        if (valid && !pending)
+                            onConfirm(name.trim());
+                    }, children: [_jsx(ModalBody, { className: "space-y-4", children: renaming ? (_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: `${id}-name`, children: t('installNameLabel') }), _jsx(Input, { id: `${id}-name`, value: name, onChange: (event) => setName(event.target.value), autoComplete: "off", disabled: pending, autoFocus: true }), _jsx(FieldDescription, { children: t('installProfileHint') })] })) : (_jsxs("p", { className: "text-muted-foreground flex flex-wrap items-center gap-x-2 text-sm text-pretty", children: [t('installNextStep', { name: appName }), _jsx(Button, { type: "button", variant: "text", size: "sm", className: "h-auto px-0", onClick: () => setRenaming(true), disabled: pending, children: t('installRename') })] })) }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: () => onOpenChange(false), disabled: pending, children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { type: "submit", disabled: !valid || pending, children: [pending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, t('install')] })] })] })] }) }));
+}
+/** What connecting this way means for the user, in one or two sentences. */
+export function wayDescription(t, way, appName) {
+    if (way.kind === 'composio')
+        return t('wayComposio', { name: appName });
+    if (way.kind === 'kortix')
+        return t('wayChannel', { name: appName });
+    if (way.kind === 'mcp')
+        return way.oneClick ? t('wayMcpOneClick', { name: appName }) : t('wayMcpSetup', { name: appName });
+    return t('wayApi', { name: appName, kind: wayKindLabel(way.kind) });
+}

package/dist/customize/connectors/install/install.d.ts

@@ -41,13 +41,18 @@ export declare function proposeAccountLabel(appName: string, taken: readonly str
 export interface InstallDeps {
     createConnector(projectId: string, draft: ConnectorDraftInput): Promise<{
         sync?: ConnectorSyncResult;
+        existing?: boolean;
+        slug?: string;
     }>;
     /** Slug suffix source; injectable so tests are deterministic. */
     random?: () => string;
 }
-export type InstallResult = {
+export type InstallResult = 
+/** `existing`: the project already had this profile, and Install opened it. */
+{
     status: 'installed';
     slug: string;
+    existing?: boolean;
 }
 /** The profile exists; its page shows the error and Retry. */
  | {
@@ -62,10 +67,16 @@ export type InstallResult = {
  * A profile is always the project's: the app, its config and its rules (a
  * `kortix.yaml` entry). Who may use it is a property of each ACCOUNT, chosen
  * when one is added (`useAddAccount`), never here. When the project already
- * has a profile for this app and surface, Install reuses it.
+ * has a profile for this app and surface, Install reuses it, unless the user
+ * asked for another profile (`asNewProfile`). A server that finds the profile
+ * itself answers `existing: true` with its slug.
  */
 export declare function runInstall(deps: InstallDeps, input: {
     projectId: string;
     target: InstallTarget;
     connectors: readonly Pick<AdminConnector, 'slug' | 'provider' | 'name'>[];
+    /** The profile's name, as the user chose it. Default: the app's name. */
+    name?: string;
+    /** Add a second profile of the same app and way (Settings → Install as another profile). */
+    asNewProfile?: boolean;
 }): Promise<InstallResult>;

package/dist/customize/connectors/install/install.js

@@ -76,17 +76,22 @@ export function proposeAccountLabel(appName, taken) {
  * A profile is always the project's: the app, its config and its rules (a
  * `kortix.yaml` entry). Who may use it is a property of each ACCOUNT, chosen
  * when one is added (`useAddAccount`), never here. When the project already
- * has a profile for this app and surface, Install reuses it.
+ * has a profile for this app and surface, Install reuses it, unless the user
+ * asked for another profile (`asNewProfile`). A server that finds the profile
+ * itself answers `existing: true` with its slug.
  */
 export async function runInstall(deps, input) {
-    const { projectId, target, connectors } = input;
+    const { projectId, connectors } = input;
+    const target = input.name?.trim() ? { ...input.target, appName: input.name.trim() } : input.target;
     const existing = connectors.find((connector) => connectorInstalledFrom(connector, target.appName, target.provider));
-    if (existing)
-        return { status: 'installed', slug: existing.slug };
+    if (existing && !input.asNewProfile)
+        return { status: 'installed', slug: existing.slug, existing: true };
     const slugs = connectors.map((connector) => connector.slug);
     const slug = proposeConnectorConnectionSlug(target.appName, slugs, deps.random);
     const name = proposeConnectorConnectionName(target.appName, slugs);
     const result = await deps.createConnector(projectId, target.buildDraft({ slug, name }));
+    if (result.existing && result.slug)
+        return { status: 'installed', slug: result.slug, existing: true };
     const syncError = connectorSyncErrorForSlug(result, slug);
     // An MCP server that signs in with OAuth answers its first tools/list with
     // 401 or 403: that is the sign-in still to do, not a broken install.

package/dist/customize/connectors/install/use-install.d.ts

@@ -1,8 +1,18 @@
 import { type AdminConnector } from '@kortix/sdk';
-import type { CatalogEntry } from '../catalog/catalog-entry.js';
+import { type CatalogEntry } from '../catalog/catalog-entry.js';
 import { type AppRef } from '../connector-routes.js';
 import { type InstallTarget } from './install.js';
-import { type McpServerApp } from './mcp-first.js';
+import type { InstallWay } from './install-dialog.js';
+import type { McpServerApp } from './mcp-first.js';
+/** An Install waiting for the user to name the profile (`InstallDialog`). */
+export interface InstallRequest {
+    target: InstallTarget;
+    way: InstallWay;
+    connectors: readonly AdminConnector[];
+    app: AppRef | null;
+    addAccount?: boolean;
+    asNewProfile?: boolean;
+}
 /**
  * Install one app: add its connector profile to the project, then open the
  * connector page with "Add account" showing. Who may use an account is chosen
@@ -21,8 +31,15 @@ export declare function useInstall(projectId: string, options?: {
         /** Open "Add account" on the connector page. False for a server with
          *  nothing to sign in to: its project account is the connection. */
         addAccount?: boolean;
+        /** The profile's name, as the user chose it. */
+        name?: string;
+        asNewProfile?: boolean;
     }) => void;
     installEntry: (entry: CatalogEntry, connectors: readonly AdminConnector[]) => void;
+    ask: (next: InstallRequest) => void;
+    confirm: (name: string) => void;
+    request: InstallRequest | null;
+    setRequest: import("react").Dispatch<import("react").SetStateAction<InstallRequest | null>>;
     pendingKey: string | null;
     setPendingKey: import("react").Dispatch<import("react").SetStateAction<string | null>>;
 };

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

@@ -5,10 +5,10 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useUiRouter } from '../../../providers/ui-provider.js';
 import { useCallback, useState } from 'react';
 import { errorToast, successToast, warningToast } from '../../../primitives/toast.js';
+import { connectToolkitApp } from '../catalog/catalog-entry.js';
 import { appHref, appRefFromEntry, connectorHref, } from '../connector-routes.js';
 import { useTranslations } from '../../../i18n/index.js';
 import { discoverInstallTarget, easyConnectInstallTarget, runInstall, } from './install.js';
-import { mcpServerFor } from './mcp-first.js';
 import { pickSurface } from './pick-surface.js';
 const sdkInstallDeps = { createConnector };
 /**
@@ -27,11 +27,18 @@ export function useInstall(projectId, options = {}) {
     const router = useUiRouter();
     const queryClient = useQueryClient();
     const [pendingKey, setPendingKey] = useState(null);
+    const [request, setRequest] = useState(null);
     const install = useCallback((target, options) => {
         /** Settles when every invalidated query has refetched. Never rejects. */
         const refresh = () => invalidateConnections(queryClient, projectId);
         setPendingKey(options.app?.slug ?? target.appName);
-        void runInstall(sdkInstallDeps, { projectId, target, connectors: options.connectors })
+        void runInstall(sdkInstallDeps, {
+            projectId,
+            target,
+            connectors: options.connectors,
+            name: options.name,
+            asNewProfile: options.asNewProfile,
+        })
             .then(async (result) => {
             // Before the navigation: the connector page reads the fresh list.
             await refresh();
@@ -41,8 +48,11 @@ export function useInstall(projectId, options = {}) {
             if (failed) {
                 warningToast(t('installedSyncFailed', { name: result.name, error: result.error }));
             }
+            else if (result.existing) {
+                successToast(t('installedAlready', { name: options.name?.trim() || target.appName }));
+            }
             else {
-                successToast(t('installed', { name: target.appName }));
+                successToast(t('installed', { name: options.name?.trim() || target.appName }));
             }
             router.push(connectorHref(projectId, result.slug, {
                 app: options.app,
@@ -58,30 +68,35 @@ export function useInstall(projectId, options = {}) {
         })
             .finally(() => setPendingKey(null));
     }, [projectId, queryClient, router, t, tI18nComplete]);
-    /** Install straight from a catalogue card. */
+    /** Ask for the profile's name, then install (`confirm`). */
+    const ask = useCallback((next) => {
+        setPendingKey(null);
+        setRequest(next);
+    }, []);
+    /** The user named the profile in `InstallDialog`: install it. */
+    const confirm = useCallback((name) => {
+        if (!request)
+            return;
+        setRequest(null);
+        install(request.target, {
+            connectors: request.connectors,
+            app: request.app,
+            addAccount: request.addAccount,
+            asNewProfile: request.asNewProfile,
+            name,
+        });
+    }, [install, request]);
+    /** Install straight from a catalogue card: its recommended way, after the
+     *  user names the profile. A one-click MCP server opens the MCP dialog. */
     const installEntry = useCallback((entry, connectors) => {
         const app = appRefFromEntry(entry);
-        if (entry.source === 'easy-connect') {
-            if (!onMcpServer || !entry.app.directMcpUrl) {
-                install(easyConnectInstallTarget(entry.app), { connectors, app });
-                return;
-            }
-            setPendingKey(app?.slug ?? entry.app.name);
-            void mcpServerFor(projectId, entry.app).then((server) => {
-                if (server) {
-                    setPendingKey(null);
-                    onMcpServer(server);
-                }
-                else {
-                    install(easyConnectInstallTarget(entry.app), { connectors, app });
-                }
-            });
+        // What Kortix built is set up on its own page, not installed.
+        if (entry.connector.kind === 'kortix') {
+            router.push(appHref(projectId, app));
             return;
         }
-        if (entry.source !== 'discover' || !app)
-            return;
-        // A Discover card does not carry its surfaces; the detail does. Direct
-        // providers open no provider window, so this fetch costs no click.
+        // A Discover card does not carry its ways to connect; the detail does,
+        // best first, with the recommended one marked.
         setPendingKey(app.slug);
         void queryClient
             .fetchQuery({
@@ -90,7 +105,17 @@ export function useInstall(projectId, options = {}) {
             staleTime: 15 * 60_000,
         })
             .then(async (detail) => {
-            const variant = pickSurface(detail.variants);
+            const recommended = detail.variants.find((variant) => variant.recommended);
+            if (recommended?.kind === 'composio' && recommended.composio) {
+                ask({
+                    target: easyConnectInstallTarget(connectToolkitApp(recommended.composio)),
+                    way: { kind: 'composio', oneClick: true },
+                    connectors,
+                    app,
+                });
+                return;
+            }
+            const variant = pickSurface(recommended ? [recommended] : detail.variants);
             if (!variant) {
                 // Nothing installable from here: the app page shows its surfaces.
                 setPendingKey(null);
@@ -98,29 +123,32 @@ export function useInstall(projectId, options = {}) {
                 return;
             }
             const mcpUrl = variant.kind === 'mcp' ? variant.template.url : undefined;
-            // A Kortix catalogue app (connectors_v2) is its vendor's MCP server:
-            // a one-click sign-in opens the one-step MCP dialog, a public server
-            // installs with no account to add, anything else installs as before.
-            if (entry.connector.feeds.includes('kortix') && mcpUrl && onMcpServer) {
+            // A Kortix catalogue app or a one-click server is the vendor's MCP
+            // server: a one-click sign-in opens the one-step MCP dialog (which
+            // names the profile too); anything else asks for the name first.
+            const oneClickServer = entry.connector.feeds.includes('kortix') || recommended?.oneClick === true || entry.connector.oneClick === true;
+            let addAccount;
+            if (oneClickServer && mcpUrl && onMcpServer) {
                 const check = await checkMcpServerSignIn(projectId, mcpUrl).catch(() => null);
                 if (check?.one_click) {
                     setPendingKey(null);
                     onMcpServer({ name: entry.name, url: mcpUrl });
                     return;
                 }
-                install(discoverInstallTarget(entry.name, variant), {
-                    connectors,
-                    app,
-                    addAccount: check?.requires_sign_in !== false,
-                });
-                return;
+                addAccount = check?.requires_sign_in !== false;
             }
-            install(discoverInstallTarget(entry.name, variant), { connectors, app });
+            ask({
+                target: discoverInstallTarget(entry.name, variant),
+                way: { kind: variant.kind, oneClick: recommended?.oneClick === true },
+                connectors,
+                app,
+                ...(addAccount !== undefined ? { addAccount } : {}),
+            });
         })
             .catch((error) => {
             setPendingKey(null);
             errorToast(error.message || tI18nComplete.raw('texta34a2714da91'));
         });
-    }, [install, onMcpServer, projectId, queryClient, router, tI18nComplete]);
-    return { install, installEntry, pendingKey, setPendingKey };
+    }, [ask, onMcpServer, projectId, queryClient, router, tI18nComplete]);
+    return { install, installEntry, ask, confirm, request, setRequest, pendingKey, setPendingKey };
 }

package/dist/customize/connectors/install/way-kind.d.ts

@@ -0,0 +1,5 @@
+import type { DiscoverConnectorVariant } from '@kortix/sdk';
+/** How one way to connect an app works: its catalogue kind, or the managed partner. */
+export type WayKind = DiscoverConnectorVariant['kind'] | 'pipedream';
+/** The badge a way to connect carries everywhere: cards, the app page, Install. */
+export declare function wayKindLabel(kind: WayKind): string;