@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,224 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ConnectorAdvancedTools } from './connector-advanced-tools.js';
+import { useLocalizedUiCatalog } from '../../../i18n/ui-catalog/use-localized-ui-catalog.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { getConnectorPolicies, setConnectorPolicies, setConnectorSensitive, } from '@kortix/sdk';
+import { CaretDownIcon, CaretRightIcon, LockIcon, MagnifyingGlassIcon, WrenchIcon, } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { Button } from '../../../primitives/button.js';
+import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
+import { CountBadge } from '../../../primitives/count-badge.js';
+import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../../primitives/disclosure.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../../primitives/dropdown-menu.js';
+import { InfoBanner } from '../../../primitives/info-banner.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../../primitives/input-group.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { EmptyState } from '../../../primitives/empty-state.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { filterActions, groupToolsByRisk, toolRowText, } from '../tools/tool-groups.js';
+import { applyBulkPolicy, isLockedByProject, isPatternRule, orderPolicyRules, previewEffective, toolChoice, } from '../tools/tool-policy.js';
+import { ToolPolicyControl } from '../tools/tool-policy-control.js';
+import { POLICY_CHOICE_LABEL, POLICY_SEGMENTS, } from '../tools/tool-policy-labels.js';
+import { CatalogNoMatch } from '../../shared/catalog/catalog-empty-state.js';
+/** Below this many tools the search field is clutter; above it the list is
+ *  unusable without one. */
+const SEARCH_THRESHOLD = 6;
+const POLICY_QUERY_STALE_MS = 5_000;
+const LOCKED_REASON = 'A project rule already decides this tool. Change it under Global rules on the Connectors page.';
+/**
+ * Tools — what this connector is allowed to do, as a per-tool decision instead
+ * of a dropdown and a save button.
+ *
+ * Three things make this readable to someone who is not going to study a
+ * policy engine:
+ *
+ * 1. **Two groups, not three.** `groupToolsByRisk` folds `destructive` into
+ *    writes. The only question a reader is equipped to answer before granting
+ *    access is "can this look at my data, or change it".
+ * 2. **Default is a state, not a value.** A tool the platform allows by
+ *    default renders with NO segment lit and a `Hint` naming the default.
+ *    Lighting Allow would claim a choice nobody made.
+ * 3. **A project rule is not editable here.** Project scope is evaluated first
+ *    and wins (`resolveEffectiveAction`, connectors/policy.ts:342), so those rows
+ *    are disabled and say where the rule actually lives.
+ *
+ * Everything else — the `sensitive` toggle and the pattern-rule editor — is
+ * folded into **Advanced**. Both are real capabilities carried over from the
+ * shipped panel; they are just not the common case.
+ *
+ * A connector that has reported no tools shows one empty state and nothing
+ * else: there is nothing to decide about tools that do not exist yet. Each
+ * group is a disclosure, open by default, so a long write list can be folded
+ * away while the read list is being set.
+ */
+export function ConnectorTools({ projectId, connector, displayName, canWrite, onChanged, }) {
+    const t = useTranslations('connectorPages');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const policySegments = useLocalizedUiCatalog(POLICY_SEGMENTS);
+    const queryClient = useQueryClient();
+    const slug = connector.slug;
+    const queryKey = useMemo(() => ['connector-policies', projectId, slug], [projectId, slug]);
+    // Reading policies is admin-gated on the server (`resolveAdmin`,
+    // connectors/router.ts:1193), so a reader would get a 403 and a permanent
+    // skeleton. `connectorTabs` already hides this tab from them; the guard
+    // below keeps that true if it ever stops doing so.
+    const policiesQuery = useQuery({
+        queryKey,
+        queryFn: () => getConnectorPolicies(projectId, slug),
+        staleTime: POLICY_QUERY_STALE_MS,
+        enabled: canWrite,
+    });
+    const policies = useMemo(() => policiesQuery.data?.policies ?? [], [policiesQuery.data]);
+    const effective = useMemo(() => policiesQuery.data?.effective ?? [], [policiesQuery.data]);
+    const toolPaths = useMemo(() => new Set(connector.actions.map((action) => action.path)), [connector.actions]);
+    // A rule is a per-tool decision only if it names one live tool exactly.
+    // Everything else — globs, regexes, and rules left behind by a tool the
+    // connector no longer reports — belongs to the Advanced editor, where it
+    // stays visible and editable instead of being silently dropped on the next
+    // save.
+    const toolRules = useMemo(() => policies.filter((rule) => !isPatternRule(rule.match) && toolPaths.has(rule.match)), [policies, toolPaths]);
+    const advancedRules = useMemo(() => policies.filter((rule) => isPatternRule(rule.match) || !toolPaths.has(rule.match)), [policies, toolPaths]);
+    const [query, setQuery] = useState('');
+    const matches = useMemo(() => filterActions(connector.actions, query), [connector.actions, query]);
+    const groups = useMemo(() => groupToolsByRisk(matches, tI18nComplete), [matches, tI18nComplete]);
+    const projectLockedCount = useMemo(() => effective.filter((entry) => entry.source === 'project').length, [effective]);
+    const writePolicies = useMutation({
+        mutationFn: (write) => setConnectorPolicies(projectId, slug, orderPolicyRules(write.rules)),
+        onMutate: async (write) => {
+            await queryClient.cancelQueries({ queryKey });
+            const previous = queryClient.getQueryData(queryKey);
+            queryClient.setQueryData(queryKey, (old) => old
+                ? {
+                    ...old,
+                    policies: orderPolicyRules(write.rules),
+                    effective: write.paths && write.choice
+                        ? previewEffective(old.effective ?? [], write.paths, write.choice)
+                        : old.effective,
+                }
+                : old);
+            return { previous };
+        },
+        onError: (error, _write, context) => {
+            if (context?.previous)
+                queryClient.setQueryData(queryKey, context.previous);
+            errorToast(error.message || tI18nComplete.raw('text2b52d8b009f9'));
+        },
+        onSettled: () => {
+            void queryClient.invalidateQueries({ queryKey });
+        },
+    });
+    const sensitiveMutation = useMutation({
+        mutationFn: (next) => setConnectorSensitive(projectId, slug, next),
+        onSuccess: (_result, next) => {
+            successToast(next ? tI18nComplete.raw('text8aa6061345d9') : tI18nComplete.raw('text02a865a79c8b'));
+            void queryClient.invalidateQueries({ queryKey });
+            onChanged();
+        },
+        onError: (error) => errorToast(error.message || tI18nComplete.raw('text8eb4917bbe54')),
+    });
+    const busy = writePolicies.isPending || sensitiveMutation.isPending;
+    const frozen = !canWrite;
+    const setToolPolicy = (path, choice) => writePolicies.mutate({
+        rules: applyBulkPolicy(policies, [path], choice),
+        paths: [path],
+        choice,
+    });
+    // ── Bulk apply ──────────────────────────────────────────────────────────
+    // One click that rewrites every row in a group is the one whose blast radius
+    // is not visible from the control, so it goes through ConfirmDialog with the
+    // exact count. Project-locked paths are excluded: writing a connector rule
+    // under a project rule changes nothing.
+    const [bulk, setBulk] = useState(null);
+    const bulkPathsFor = (group) => {
+        const paths = [];
+        for (const action of group.actions) {
+            if (!isLockedByProject(action.path, effective))
+                paths.push(action.path);
+        }
+        return paths;
+    };
+    const bulkPaths = bulk ? bulkPathsFor(bulk.group) : [];
+    if (!canWrite) {
+        return (_jsxs("p", { className: "text-muted-foreground text-sm text-pretty", children: [tI18nComplete.raw('textdb7d057a2f68'), " ", displayName, ' ', tI18nComplete.raw('text24984f203fd7')] }));
+    }
+    const hasTools = connector.actions.length > 0;
+    return (_jsxs("div", { className: "space-y-5", children: [hasTools ? (_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("p", { className: "text-muted-foreground min-w-0 text-sm text-pretty", children: describeDefault(connector.sensitive === true, policiesQuery.data?.default_mode) }), connector.actions.length > SEARCH_THRESHOLD ? (_jsxs(InputGroupSearch, { className: "w-full sm:max-w-64", children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { placeholder: tI18nComplete.raw('textfbd165231fa1'), value: query, onChange: (event) => setQuery(event.target.value), variant: "popover", size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] })) : null] })) : null, projectLockedCount > 0 ? (_jsx(InfoBanner, { tone: "warning", icon: LockIcon, title: tI18nComplete('textd3d900c89bd0', {
+                    value0: projectLockedCount,
+                    value1: projectLockedCount === 1
+                        ? tI18nComplete.raw('text86ca67d2851a')
+                        : tI18nComplete.raw('textd50ab26e1621'),
+                }), children: tI18nComplete.raw('textf7d6d7f585c5') })) : null, policiesQuery.isPending ? (_jsx("div", { className: "space-y-2", children: [0, 1, 2].map((row) => (_jsx(Skeleton, { className: "h-14 rounded-md" }, row))) })) : policiesQuery.isError ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('textff6065190563'), description: policiesQuery.error instanceof Error
+                    ? policiesQuery.error.message
+                    : tI18nComplete.raw('texta47c08d35337'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => void policiesQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) })) : !hasTools ? (
+            // The connector exists but has reported no tools — a failed or pending
+            // sync. That is a different statement from "nothing matched your
+            // search", and it must not render as a blank panel.
+            _jsx(EmptyState, { icon: WrenchIcon, size: "sm", title: tI18nComplete.raw('text99dd86336467'), description: t('toolsEmptyBody', { name: displayName }) })) : groups.length === 0 ? (
+            // The same line the four catalogs render, from the same component.
+            // What was searched is unambiguous here — the box above says "Search
+            // 19 tools" — so a second wording for one outcome bought nothing.
+            _jsx(CatalogNoMatch, { query: query })) : (_jsx("div", { className: "space-y-2", children: groups.map((group) => (_jsxs(Disclosure, { variant: "outline", className: "overflow-hidden", defaultOpen: true, children: [_jsxs("div", { className: "flex items-center gap-2 pr-2", children: [_jsx(DisclosureTrigger, { variant: "outline", children: _jsxs(Button, { variant: "popover", className: "flex min-w-0 flex-1 items-center justify-start rounded-none", children: [_jsx(CaretRightIcon, { className: "text-muted-foreground size-3.5 shrink-0 transition-transform duration-(--duration-normal) ease-out group-data-[state=open]:rotate-90 motion-reduce:transition-none" }), _jsx("span", { className: "truncate text-sm font-medium", children: group.label }), _jsx(CountBadge, { count: group.actions.length })] }) }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", variant: "ghost", className: "shrink-0", disabled: frozen || busy || bulkPathsFor(group).length === 0, children: [tI18nComplete.raw('textd9d0b4384a58'), _jsx(CaretDownIcon, { className: "size-3.5 shrink-0" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-32", children: policySegments.map((segment) => (_jsx(DropdownMenuItem, { onSelect: () => setBulk({ group, choice: segment.choice }), children: segment.label }, segment.choice))) })] })] }), _jsx(DisclosureContent, { variant: "outline", contentClassName: "border-border border-t", children: _jsx("ul", { className: "divide-border/60 divide-y px-4", children: group.actions.map((action) => {
+                                    const locked = isLockedByProject(action.path, effective);
+                                    const row = toolRowText(action);
+                                    return (_jsxs("li", { className: "flex flex-wrap items-start gap-x-4 gap-y-2 py-3", children: [_jsxs("div", { className: "min-w-0 flex-1 basis-48 space-y-0.5", children: [_jsx("p", { className: "text-foreground text-sm font-medium wrap-break-word", children: row.title }), row.description ? (_jsx("p", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: row.description })) : null] }), _jsx(ToolPolicyControl, { label: tI18nComplete('textb34f1e3c1569', {
+                                                    value0: row.path ?? row.title,
+                                                }), value: toolChoice(action.path, policies, effective), onChange: (next) => setToolPolicy(action.path, next), disabled: frozen || busy, lockedReason: locked ? LOCKED_REASON : undefined, defaultHint: describeToolDefault(connector.sensitive === true, policiesQuery.data?.default_mode, action.risk) })] }, action.path));
+                                }) }) })] }, group.key))) })), _jsx(ConnectorAdvancedTools, { connector: connector, advancedRules: advancedRules, toolRules: toolRules, loaded: !!policiesQuery.data, frozen: frozen, busy: busy, saving: writePolicies.isPending, sensitivePending: sensitiveMutation.isPending, onSave: (rules) => writePolicies.mutate({ rules }), onSensitive: (next) => sensitiveMutation.mutate(next) }), _jsx(ConfirmDialog, { open: bulk !== null, onOpenChange: (open) => {
+                    if (!open)
+                        setBulk(null);
+                }, title: bulk ? bulkConfirmTitle(bulkPaths.length, bulk.choice) : '', description: bulk ? bulkConfirmDescription(bulk.group.label, bulk.choice) : '', confirmLabel: bulk
+                    ? bulk.choice === 'default'
+                        ? tI18nComplete.raw('text1707565fd3f0')
+                        : tI18nComplete('text41ffc5e14073', { value0: POLICY_CHOICE_LABEL[bulk.choice] })
+                    : 'Confirm', isPending: writePolicies.isPending, onConfirm: () => {
+                    if (!bulk)
+                        return;
+                    writePolicies.mutate({
+                        rules: applyBulkPolicy(policies, bulkPaths, bulk.choice),
+                        paths: bulkPaths,
+                        choice: bulk.choice,
+                    });
+                    setBulk(null);
+                } })] }));
+}
+/** "Set 10 tools to Block?" does not describe clearing them, so Default gets
+ *  its own sentence rather than a label substituted into the wrong verb. */
+function bulkConfirmTitle(count, choice) {
+    const tools = `${count} ${count === 1 ? 'tool' : 'tools'}`;
+    return choice === 'default'
+        ? `Return ${tools} to the connector default?`
+        : `Set ${tools} to ${POLICY_CHOICE_LABEL[choice]}?`;
+}
+function bulkConfirmDescription(groupLabel, choice) {
+    const tail = 'Pattern rules are left alone, and you can change any tool individually afterwards.';
+    return choice === 'default'
+        ? `Deletes the per-tool rule for every tool listed under ${groupLabel} right now, so each one follows the connector default again. ${tail}`
+        : `Every tool listed under ${groupLabel} right now is set to ${POLICY_CHOICE_LABEL[choice]}. ${tail}`;
+}
+/**
+ * What happens to a tool nobody has decided on — read off the server's own
+ * answer, never guessed. `sensitive` beats `default_mode` at the gate
+ * (`resolveEffectiveAction`, connectors/policy.ts:362), so it is stated first.
+ */
+function describeDefault(sensitive, defaultMode) {
+    if (sensitive) {
+        return 'Every tool asks for approval before it runs, including reads. Set a tool below to change that.';
+    }
+    if (defaultMode === 'allow_all') {
+        return 'Every tool runs without asking unless you decide otherwise below.';
+    }
+    return 'Reads run without asking; writes and deletes ask first. Decide any tool below.';
+}
+/** The same answer for one row, so an unlit control still says what it does. */
+function describeToolDefault(sensitive, defaultMode, risk) {
+    if (sensitive)
+        return 'Following the connector default — asks before it runs.';
+    if (defaultMode === 'allow_all')
+        return 'Following the connector default — runs without asking.';
+    return risk === 'read'
+        ? 'Following the connector default — runs without asking.'
+        : 'Following the connector default — asks before it runs.';
+}

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

@@ -0,0 +1,24 @@
+import type { AdminConnector } from '@kortix/sdk';
+/**
+ * Whether the connector's app has events, and the project's event triggers on it.
+ * Shared by the tab and its count. With the project flag `event_triggers` off,
+ * the connector has no events: the tab is absent and no event data is requested.
+ */
+export declare function useConnectorEventTriggers(projectId: string, connector: AdminConnector): {
+    hasEvents: boolean;
+    apps: import("@kortix/sdk").ProjectTriggerEventApp[] | undefined;
+    rows: import("@kortix/sdk").ProjectTrigger[];
+    isLoading: boolean;
+    isError: boolean;
+};
+/**
+ * App event triggers on this connector: the project's `type: event` triggers
+ * whose connector is this one, each with its status and account, plus
+ * "New app event" with this connector already picked. It is the body of the
+ * connector modal's Triggers tab, which shows only for an app with events.
+ */
+export declare function ConnectorTriggers({ projectId, connector, displayName, }: {
+    projectId: string;
+    connector: AdminConnector;
+    displayName: string;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { customizePath } from '../../../lib/routes.js';
+import { useProjectTriggerEventApps, useProjectTriggers } from '@kortix/sdk/react';
+import { PlusIcon } from '@phosphor-icons/react';
+import { UiLink as Link } from '../../../providers/ui-provider.js';
+import { useState } from 'react';
+import { appConnectors, describeEventSource, eventTriggersOn, indexEventApps, } from '../../triggers/schedule/event-trigger-copy.js';
+import { describeWhen, triggerName } from '../../triggers/schedule/schedule-copy.js';
+import { TriggerComposer } from '../../triggers/schedule/trigger-composer.js';
+import { useTriggerControls } from '../../triggers/schedule/trigger-controls.js';
+import { TriggerStatusBadge } from '../../triggers/schedule/trigger-status-badge.js';
+import { TriggerTile } from '../../triggers/schedule/trigger-tile.js';
+import { useEventTitles } from '../../triggers/schedule/use-event-titles.js';
+import { Button } from '../../../primitives/button.js';
+import { Label } from '../../../primitives/label.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { useProjectFeatureFlags } from '../../../internal/lib/use-project-feature-flags.js';
+/**
+ * Whether the connector's app has events, and the project's event triggers on it.
+ * Shared by the tab and its count. With the project flag `event_triggers` off,
+ * the connector has no events: the tab is absent and no event data is requested.
+ */
+export function useConnectorEventTriggers(projectId, connector) {
+    const eventsOn = useProjectFeatureFlags(projectId).flags.event_triggers === true;
+    const apps = useProjectTriggerEventApps(eventsOn ? projectId : null);
+    const triggers = useProjectTriggers(projectId);
+    const hasEvents = eventsOn &&
+        (apps.data?.apps ?? []).some((app) => appConnectors(app).some((c) => c.slug === connector.slug));
+    return {
+        hasEvents,
+        apps: apps.data?.apps,
+        rows: eventTriggersOn(triggers.data?.triggers ?? [], connector.slug),
+        isLoading: triggers.isLoading,
+        isError: triggers.isError,
+    };
+}
+/**
+ * App event triggers on this connector: the project's `type: event` triggers
+ * whose connector is this one, each with its status and account, plus
+ * "New app event" with this connector already picked. It is the body of the
+ * connector modal's Triggers tab, which shows only for an app with events.
+ */
+export function ConnectorTriggers({ projectId, connector, displayName, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const { rows, apps, isLoading, isError } = useConnectorEventTriggers(projectId, connector);
+    const appIndex = indexEventApps(apps);
+    const eventNames = useEventTitles(projectId, rows, true, apps);
+    const controls = useTriggerControls(projectId);
+    const [creating, setCreating] = useState(false);
+    if (isError)
+        return null;
+    return (_jsxs("section", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { children: tI18nComplete.raw('textea56119b98e2') }), controls.canCreate ? (_jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5", onClick: () => setCreating(true), children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tI18nComplete.raw('text1ee2cf623464')] })) : null] }), isLoading ? (_jsx(Skeleton, { className: "h-14 rounded-md" })) : rows.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: tI18nComplete('text974e43358191', {
+                    name: displayName,
+                }) })) : (_jsx("ul", { className: "space-y-2", children: rows.map((trigger) => (_jsxs("li", { className: "bg-popover flex items-center gap-3 rounded-md border px-4 py-2", children: [_jsx(TriggerTile, { trigger: trigger, surface: "bg-popover" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Link, { href: customizePath(projectId, `triggers?id=${encodeURIComponent(trigger.slug)}`), className: "min-w-0 truncate text-sm font-medium hover:underline", children: triggerName(trigger) }), _jsx(TriggerStatusBadge, { trigger: trigger })] }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: describeWhen(trigger, eventNames) }), trigger.event ? (_jsx("span", { className: "text-muted-foreground block truncate text-xs", children: describeEventSource(trigger.event, tI18nComplete, appIndex) })) : null] })] }, trigger.slug))) })), _jsx(TriggerComposer, { projectId: projectId, open: creating, onOpenChange: setCreating, onCreated: () => setCreating(false), initialKind: "event", initialConnector: { slug: connector.slug, name: displayName } })] }));
+}

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

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export declare const DETAIL_PAGE_COLUMN = "mx-auto w-full max-w-5xl space-y-6 px-4 py-10 pb-20 lg:py-14";
+export declare function DetailPageShell({ children, busy }: {
+    children: ReactNode;
+    busy?: boolean;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DETAIL_PAGE_COLUMN = 'mx-auto w-full max-w-5xl space-y-6 px-4 py-10 pb-20 lg:py-14';
+export function DetailPageShell({ children, busy }) {
+    return (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", "aria-busy": busy || undefined, children: _jsx("div", { className: DETAIL_PAGE_COLUMN, children: children }) }));
+}

package/dist/customize/connectors/detail/find-easy-connect-app.d.ts

@@ -0,0 +1,29 @@
+/** One page of the managed catalogue, as `listConnectCatalogPage` returns it. */
+type ListApps<A> = (input: {
+    projectId: string;
+    provider: 'composio' | 'pipedream';
+    q: string;
+    limit: number;
+}) => Promise<{
+    apps: A[];
+}>;
+/**
+ * Resolve one managed (Composio or Pipedream) app from its slug.
+ *
+ * The catalogue has no by-slug route, so this searches and keeps the exact
+ * slug match. The second query spells the slug as words, for a catalogue whose
+ * search matches names and not slugs (`google_sheets` → "google sheets").
+ *
+ * `list` is passed in so this module stays free of the catalogue hook's
+ * imports and can be tested with a fake.
+ */
+export declare function findEasyConnectApp<A extends {
+    slug: string;
+}>(list: ListApps<A>, input: {
+    projectId: string;
+    provider: 'composio' | 'pipedream';
+    slug: string;
+}): Promise<(A & {
+    provider: 'composio' | 'pipedream';
+}) | null>;
+export {};

package/dist/customize/connectors/detail/find-easy-connect-app.js

@@ -0,0 +1,22 @@
+/**
+ * Resolve one managed (Composio or Pipedream) app from its slug.
+ *
+ * The catalogue has no by-slug route, so this searches and keeps the exact
+ * slug match. The second query spells the slug as words, for a catalogue whose
+ * search matches names and not slugs (`google_sheets` → "google sheets").
+ *
+ * `list` is passed in so this module stays free of the catalogue hook's
+ * imports and can be tested with a fake.
+ */
+export async function findEasyConnectApp(list, input) {
+    const words = input.slug.replace(/[_-]+/g, ' ');
+    for (const q of words === input.slug ? [input.slug] : [input.slug, words]) {
+        // ponytail: one page of 48 per query; an exact slug ranked below 48 results
+        // reads as not found. Add a by-slug API route if that happens.
+        const page = await list({ projectId: input.projectId, provider: input.provider, q, limit: 48 });
+        const app = page.apps.find((candidate) => candidate.slug === input.slug);
+        if (app)
+            return { ...app, provider: input.provider };
+    }
+    return null;
+}

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

@@ -0,0 +1,14 @@
+/** The Provider value: Kortix for a managed app, 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.
+ *
+ * Managed (Composio, Pipedream): Kortix holds the login through the provider,
+ * and the app runs the actions. Direct (MCP, OpenAPI, …): agents call the app
+ * itself, and Kortix attaches the stored credential to each call.
+ */
+export declare function ProviderInfo({ appName, managedBy, }: {
+    appName: string;
+    /** The managed provider's name ("Composio"), or `null` for a direct app. */
+    managedBy: string | null;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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. */
+export function providerName(appName, managedBy) {
+    return managedBy ? 'Kortix' : appName;
+}
+/**
+ * The info button on the Provider label that explains who manages what.
+ *
+ * Managed (Composio, Pipedream): Kortix holds the login through the provider,
+ * and the app runs the actions. Direct (MCP, OpenAPI, …): agents call the app
+ * itself, and Kortix attaches the stored credential to each call.
+ */
+export function ProviderInfo({ appName, managedBy, }) {
+    const t = useTranslations('connectorPages');
+    const rows = managedBy
+        ? [
+            [t('providerInfoLogin'), t('providerInfoLoginManaged', { provider: managedBy })],
+            [t('providerInfoActions'), t('providerInfoActionsApp', { name: appName })],
+            [t('providerInfoSecrets'), t('providerInfoSecretsManaged')],
+        ]
+        : [
+            [t('providerInfoLogin'), t('providerInfoLoginDirect')],
+            [t('providerInfoActions'), t('providerInfoActionsApp', { name: appName })],
+            [t('providerInfoSecrets'), t('providerInfoSecretsDirect')],
+        ];
+    return (_jsxs(HoverCard, { openDelay: 150, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", className: "text-muted-foreground", "aria-label": t('providerInfoLabel'), children: _jsx(InfoIcon, { className: "size-3.5" }) }) }), _jsxs(HoverCardContent, { align: "start", className: "w-72 space-y-3 p-4", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: t('providerInfoTitle') }), _jsx("dl", { className: "space-y-2", children: rows.map(([label, value]) => (_jsxs("div", { className: "space-y-0.5", children: [_jsx("dt", { className: "text-foreground text-xs font-medium", children: label }), _jsx("dd", { className: "text-muted-foreground text-xs text-pretty", children: value })] }, label))) })] })] }));
+}

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

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

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../../../primitives/badge.js';
+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',
+    error: 'destructive',
+    setup: 'warning',
+};
+/** A connector's state as a Badge with its dot: Working, Error, or Needs setup. */
+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])] }));
+}

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

@@ -0,0 +1,37 @@
+import { type AdminConnector, type Connection } from '@kortix/sdk';
+export type CredentialTarget = {
+    connectionId: string;
+    owner: 'project' | 'me';
+};
+/**
+ * One connector's account picture and the actions its header offers. Shared by
+ * the connector page and `ConnectorModal`, so the two cannot disagree.
+ */
+export declare function useConnectorDetail({ projectId, connector, canWrite, onChanged, }: {
+    projectId: string;
+    connector: AdminConnector;
+    canWrite: boolean;
+    /** Refetch every authorization-derived query. */
+    onChanged: () => void;
+}): {
+    displayName: string;
+    isManagedProvider: boolean;
+    isChannel: boolean;
+    isComputer: boolean;
+    connectionsQuery: import("@tanstack/react-query").UseQueryResult<{
+        connections: Connection[];
+    }, Error>;
+    accounts: Connection[];
+    connected: boolean;
+    canManageConnections: boolean;
+    headerCta: import("./connector-header-cta.js").ConnectorHeaderCta;
+    connectPending: boolean;
+    refreshAccounts: () => void;
+    replaceSoleAccount: () => void;
+    startPrivateSession: (connection?: Connection) => void;
+    reconnectAccount: (account: Connection) => void;
+    credentialTarget: CredentialTarget | null;
+    setCredentialTarget: import("react").Dispatch<import("react").SetStateAction<CredentialTarget | null>>;
+    computerOpen: boolean;
+    setComputerOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};

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

@@ -0,0 +1,134 @@
+'use client';
+import { listConnections } from '@kortix/sdk';
+import { useProjectAccountId } from '@kortix/sdk/react';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { connectorDisplayName } from '../connector-filter.js';
+import { isManagedConnectorProvider } from '../provider-label.js';
+import { connectorSetupStatus } from '../../sections/connector-connection-form.js';
+import { connectorConnectionRows } from '../../sections/view/connector-connections.js';
+import { emptyProjectSlot } from '../../../internal/hooks/connectors/use-add-account.js';
+import { usePipedreamConnectMember } from '../../../internal/hooks/connectors/use-pipedream-connect-member.js';
+import { usePipedreamConnectProject } from '../../../internal/hooks/connectors/use-pipedream-connect-project.js';
+import { useNewProjectSession } from '../../../internal/hooks/projects/use-new-project-session.js';
+import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../../internal/lib/use-project-can.js';
+import { connectorHeaderCta } from './connector-header-cta.js';
+import { connectorUsable } from './connector-status.js';
+/**
+ * One connector's account picture and the actions its header offers. Shared by
+ * the connector page and `ConnectorModal`, so the two cannot disagree.
+ */
+export function useConnectorDetail({ projectId, connector, canWrite, onChanged, }) {
+    const isManagedProvider = isManagedConnectorProvider(connector.provider);
+    const isChannel = connector.provider === 'channel';
+    const isComputer = connector.provider === 'computer';
+    const displayName = connectorDisplayName(connector);
+    const [credentialTarget, setCredentialTarget] = useState(null);
+    const [computerOpen, setComputerOpen] = useState(false);
+    const connectionsQuery = useQuery({
+        queryKey: ['connections', projectId],
+        queryFn: () => listConnections(projectId),
+        staleTime: 30_000,
+        enabled: !isChannel,
+    });
+    // Every account this caller can reach on the connector: the project's shared
+    // rows plus the caller's own private ones. A connector is not an account —
+    // the header must never pick "the" connection, because there may be several
+    // (Work + Personal) or none.
+    // A revoked row is history, not an account: it must not turn "connect the
+    // first account" into "finish setting up" (found 2026-09-17 on a connector
+    // 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 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.
+    const setupStatus = connectorSetupStatus(connector);
+    const connected = connectorUsable(setupStatus, accounts.length);
+    const refreshAccounts = () => {
+        void connectionsQuery.refetch();
+        onChanged();
+    };
+    const connectShared = usePipedreamConnectProject(projectId, connector.slug, refreshAccounts);
+    const connectMine = usePipedreamConnectMember(projectId, connector.slug, refreshAccounts);
+    // `accountId` rides the qk.project.detail(id) cache the connectors page
+    // already filled, so the connections probe resolves on the first render
+    // instead of after its own getProject round-trip.
+    const accountId = useProjectAccountId(projectId);
+    const canManageConnections = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_CONNECTOR_CONNECTIONS_MANAGE, { accountId })
+        .allowed === true;
+    const newSession = useNewProjectSession(projectId);
+    /**
+     * Start a new session. Given a connection, bind it to THIS connector so the
+     * session runs as that exact account — `inherit_unbound` keeps the project
+     * default for every OTHER connector, so binding just this one doesn't null
+     * the rest. Sessions are private by default, which is what lets a
+     * member-owned binding resolve.
+     *
+     * No connection (the "not connected yet" banner) just opens a fresh private
+     * session — there is no more session-level connector requirement to carry;
+     * connecting an account already has its own direct flow on this tab.
+     */
+    const startPrivateSession = (connection) => {
+        newSession({
+            create: connection
+                ? {
+                    connector_bindings: { [connector.slug]: { connection_id: connection.connection_id } },
+                    inherit_unbound: true,
+                }
+                : {},
+        });
+    };
+    // `accounts` holds only the computers the caller can use (their own or a
+    // project-shared one).
+    const headerCta = connectorHeaderCta({
+        provider: connector.provider,
+        canWrite,
+        hasAuth: isManagedProvider || Boolean(connector.authSecret),
+        connected,
+        accountCount: accounts.length,
+        hasComputer: accounts.some((account) => Boolean(account.tunnel_id)),
+    });
+    /** Re-authorize one account: the provider window for a managed one,
+     *  credential entry for a direct one. */
+    const reconnectAccount = (account) => {
+        const owner = account.owner_type === 'project' ? 'project' : 'me';
+        if (isManagedProvider) {
+            // Reconciling the SAME label re-points this row, never a second account.
+            if (owner === 'project')
+                connectShared.mutate({ label: account.label });
+            else
+                connectMine.mutate({ label: account.label });
+            return;
+        }
+        setCredentialTarget({ connectionId: account.connection_id, owner });
+    };
+    const replaceSoleAccount = () => {
+        if (soleAccount)
+            reconnectAccount(soleAccount);
+    };
+    return {
+        displayName,
+        isManagedProvider,
+        isChannel,
+        isComputer,
+        connectionsQuery,
+        accounts,
+        connected,
+        canManageConnections,
+        headerCta,
+        connectPending: connectShared.isPending || connectMine.isPending,
+        refreshAccounts,
+        replaceSoleAccount,
+        startPrivateSession,
+        reconnectAccount,
+        credentialTarget,
+        setCredentialTarget,
+        computerOpen,
+        setComputerOpen,
+    };
+}