@kortix/ui 0.14.12 → 0.14.14

package/dist/customize/agents/create-agent-modal.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * New agent. Three ways to start, the agent-first one first: describe the
+ * work to My Kortix (it drafts the agent with only the access the work
+ * needs), start blank, or copy another agent. Each one opens a session of My
+ * Kortix that writes `agents.<name>` and opens a change request: there is no
+ * write path that skips review, so the modal never claims one.
+ *
+ * From `lg` the modal has two panes: the form, and a live preview of the
+ * agent it makes (its mark, name, `agents.<name>` key, description, and what
+ * it starts with). Below `lg` it is a bottom sheet capped at 90% of the
+ * window, form only. Its body scrolls and its footer stays pinned, so Create
+ * agent is reachable at 720×480.
+ */
+import { slugifySlug } from '../../_vendor/kortix-shared.js';
+import { isMyKortixAgentName } from '../../_vendor/kortix-shared.js';
+import { useState } from 'react';
+import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
+import { AgentMark, agentDisplayName } from '../../internal/components/agent-mark.js';
+import { cn } from '../../internal/lib/utils.js';
+import { Button } from '../../primitives/button.js';
+import { Input } from '../../primitives/input.js';
+import { Label } from '../../primitives/label.js';
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalTitle, } from '../../primitives/modal.js';
+import { RadioGroup, RadioGroupItem } from '../../primitives/radio-group.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select.js';
+import { StatusDot } from '../../primitives/status.js';
+import { Textarea } from '../../primitives/textarea.js';
+import { useConfigureThread } from '../use-configure-thread.js';
+/** A phone's footer clears the home indicator: the device inset, at least the footer's own py-3. */
+const FOOTER_SAFE_AREA = 'max-lg:pb-[max(0.75rem,env(safe-area-inset-bottom))]'; // audit:allow device safe-area inset, not a spacing step
+/** The request My Kortix receives. English, like every configure prompt. */
+export function createAgentPrompt(input) {
+    const review = 'Then open a change request so I can review and merge it.';
+    const desc = input.description.trim();
+    if (input.start === 'duplicate' && input.from) {
+        return (`Create a new agent named "${input.name}" in kortix.yaml as a copy of the "${input.from.name}" agent ` +
+            `(its config lives at \`${input.from.path}\`)${desc ? `, with the description "${desc}"` : ''}. ${review}`);
+    }
+    if (input.start === 'blank') {
+        return (`Create a new agent named "${input.name}" in kortix.yaml${desc ? ` with the description "${desc}"` : ''}, ` +
+            `no grants (write \`tools: none\`) and empty instructions. ${review}`);
+    }
+    return (`Create a new agent named "${input.name}" in kortix.yaml. What it does: ${desc || 'ask me.'} ` +
+        `Write its instructions and give it only the tools, skills, connectors, secrets and permissions this work needs. ` +
+        `Always write its \`tools:\` key: a list of the tools it needs, or \`all\`. ${review}`);
+}
+/** One fact of the preview: a label left, its value right. */
+function PreviewFact({ label, children }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { className: "text-foreground flex min-w-0 items-center gap-1.5 truncate", children: children })] }));
+}
+export function CreateAgentModal({ open, onOpenChange, projectId, config, }) {
+    const t = useI18nTranslations('agentEditor.tabs');
+    const tPage = useI18nTranslations('agentEditor.page');
+    const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const configure = useConfigureThread(projectId);
+    const agents = (config?.agents ?? []).filter((a) => !a.platform);
+    const [start, setStart] = useState('describe');
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [from, setFrom] = useState('');
+    const slug = name.trim() ? slugifySlug(name, '') : '';
+    // Every declared agent and the built-in ones: a new agent can never take a
+    // platform agent's key. `agents` (the Duplicate sources) leaves them out.
+    const taken = (config?.agents ?? []).some((a) => a.name === slug) || isMyKortixAgentName(slug);
+    const source = agents.find((a) => a.name === from);
+    const ready = slug.length > 0 && !taken && (start !== 'duplicate' || source !== undefined);
+    const submit = () => {
+        if (!ready || configure.pending)
+            return;
+        configure.start(createAgentPrompt({
+            start,
+            name: slug,
+            description,
+            from: source ? { name: source.name, path: source.path } : undefined,
+        }));
+    };
+    const choices = [
+        { key: 'describe', title: t('startDescribe'), help: t('startDescribeHelp') },
+        { key: 'blank', title: t('startBlank'), help: t('startBlankHelp') },
+        { key: 'duplicate', title: t('startDuplicate'), help: t('startDuplicateHelp') },
+    ];
+    // What the new agent starts with, per way to start.
+    const startsWith = {
+        describe: { instructions: t('previewDrafted'), access: t('previewAccessScoped') },
+        blank: { instructions: t('previewEmpty'), access: t('previewAccessNone') },
+        duplicate: { instructions: t('previewCopied'), access: t('previewCopied') },
+    }[start];
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "flex flex-col space-y-0 overflow-hidden lg:max-w-4xl", children: _jsxs("form", { className: "flex min-h-0 flex-1 flex-col", onSubmit: (event) => {
+                    event.preventDefault();
+                    submit();
+                }, children: [_jsxs("div", { className: "flex min-h-0 flex-1", children: [_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsx(ModalHeader, { className: "shrink-0 pb-4", children: _jsx(ModalTitle, { children: t('newAgent') }) }), _jsxs(ModalBody, { className: "min-h-0 overflow-y-auto", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "new-agent-name", children: t('name') }), _jsx(Input, { id: "new-agent-name", value: name, placeholder: t('namePlaceholder'), onChange: (e) => setName(e.target.value), autoFocus: true }), taken ? (_jsxs("p", { className: "text-foreground flex items-center gap-1.5 text-xs", children: [_jsx(StatusDot, { tone: "destructive" }), t('nameTaken')] })) : null] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: t('howToStart') }), _jsx(RadioGroup, { "aria-label": t('howToStart'), value: start, onValueChange: (next) => setStart(next), className: "gap-1", children: choices.map((choice) => (_jsx(RadioGroupItem, { value: choice.key, label: choice.title, description: choice.help, size: "lg" }, choice.key))) })] }), start === 'duplicate' ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { children: t('copyOf') }), _jsxs(Select, { value: from, onValueChange: setFrom, children: [_jsx(SelectTrigger, { "aria-label": t('copyOf'), className: "w-full", children: _jsx(SelectValue, { placeholder: t('pickAgent') }) }), _jsx(SelectContent, { children: agents.map((agent) => (_jsx(SelectItem, { value: agent.name, children: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(AgentMark, { slug: agent.name }), _jsx("span", { className: "truncate", children: agentDisplayName(agent.name) })] }) }, agent.name))) })] })] })) : null, _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "new-agent-description", children: start === 'describe' ? t('whatItDoes') : tI18nComplete.raw('text526e0087cc3f') }), _jsx(Textarea, { id: "new-agent-description", value: description, placeholder: start === 'describe' ? t('whatItDoesPlaceholder') : t('descriptionPlaceholderShort'), onChange: (e) => setDescription(e.target.value), minHeight: start === 'describe' ? 90 : 52 })] })] })] }), _jsxs("aside", { "aria-label": t('preview'), className: "bg-background hidden w-96 shrink-0 flex-col gap-4 overflow-y-auto border-l p-5 lg:flex", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t('preview') }), _jsxs("div", { className: "space-y-1", children: [_jsx("div", { className: "pb-3", children: _jsx(AgentMark, { slug: slug || 'new-agent', size: 42 }) }), _jsx("p", { className: cn('truncate text-lg font-medium', slug ? 'text-foreground' : 'text-muted-foreground'), children: agentDisplayName(slug || t('namePlaceholder')) }), _jsx("p", { className: "text-muted-foreground truncate font-mono text-xs", children: `agents.${slug || t('namePlaceholder')}` }), description.trim() ? (_jsx("p", { className: "text-foreground line-clamp-3 pt-1 text-sm text-pretty", children: description.trim() })) : null] }), _jsxs("div", { className: "space-y-2.5 border-t pt-4", children: [start === 'duplicate' && source ? (_jsxs(PreviewFact, { label: t('copyOf'), children: [_jsx(AgentMark, { slug: source.name }), _jsx("span", { className: "truncate", children: agentDisplayName(source.name) })] })) : null, _jsx(PreviewFact, { label: tPage('instructions'), children: startsWith.instructions }), _jsx(PreviewFact, { label: t('tabAccess'), children: startsWith.access })] })] })] }), _jsxs(ModalFooter, { className: cn('shrink-0 border-t py-3', FOOTER_SAFE_AREA), children: [_jsx("p", { className: "text-muted-foreground mr-auto hidden text-xs sm:block", children: t('composerNote') }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full sm:w-auto", onClick: () => onOpenChange(false), children: tI18nComplete.raw('text19766ed6ccb2') }), _jsx(Button, { type: "submit", size: "sm", className: "w-full sm:w-auto", disabled: !ready || configure.pending, "aria-busy": configure.pending || undefined, children: t('createAgent') })] })] }) }) }));
+}

package/dist/customize/connectors/agent-access.d.ts

@@ -1,7 +1,7 @@
 import type { AgentGrantSet } from '@kortix/sdk';
 /**
  * Which agents can use which connector, and with which rule set, read from
- * the root kortix.yaml (v2/v3): `agents.<a>.connectors` is the grant and
+ * the root kortix.yaml: `agents.<a>.connectors` is the grant and
  * `agents.<a>.policy_sets.<slug>` the set. The connector page's Agents tab and
  * the Rules matrix both read this, and both write through `setAgentScope`.
  *
@@ -14,12 +14,12 @@ export interface AgentConnectorAccess {
     policySet: string | null;
 }
 export interface AgentGrants {
-    /** `all`, or the granted slugs. An absent grant is none (v2 denies by default). */
+    /** `all`, or the granted slugs. An absent grant is none (deny by default). */
     connectors: 'all' | string[];
     policySets: Record<string, string>;
 }
-/** Every declared agent's connector grant and sets, by agent name. Null when the manifest is not v2/v3 YAML. */
-export declare function manifestAgentGrants(manifestRaw: string | null | undefined): Record<string, AgentGrants> | null;
+/** Every declared agent's connector grant and sets, by agent name. Empty when there is no manifest or it does not parse. */
+export declare function manifestAgentGrants(manifestRaw: string | null | undefined): Record<string, AgentGrants>;
 export declare function agentConnectorAccess(grants: AgentGrants | undefined, slug: string): AgentConnectorAccess;
 /**
  * The agent's connector grant after giving or taking one connector. Taking one

package/dist/customize/connectors/agent-access.js

@@ -1,19 +1,16 @@
 import { parseManifestText } from '../../_vendor/kortix-shared.js';
-/** Every declared agent's connector grant and sets, by agent name. Null when the manifest is not v2/v3 YAML. */
+/** Every declared agent's connector grant and sets, by agent name. Empty when there is no manifest or it does not parse. */
 export function manifestAgentGrants(manifestRaw) {
     if (!manifestRaw)
-        return null;
+        return {};
     let manifest;
     try {
-        manifest = parseManifestText(manifestRaw, 'yaml');
+        manifest = parseManifestText(manifestRaw);
     }
     catch {
-        return null;
+        return {};
     }
-    const version = Number(manifest.kortix_version);
     const agents = manifest.agents;
-    if (!(version >= 2))
-        return null;
     if (!agents || typeof agents !== 'object' || Array.isArray(agents))
         return {};
     const out = Object.create(null);
@@ -53,12 +50,12 @@ export function withConnectorGrant(grants, slug, on, allSlugs) {
 }
 /** Each connector's rule sets (`connectors[].policy_sets`) with their agent count, by slug. */
 export function connectorRuleSetUsage(manifestRaw) {
-    const grants = manifestAgentGrants(manifestRaw);
-    if (!grants || !manifestRaw)
+    if (!manifestRaw)
         return {};
+    const grants = manifestAgentGrants(manifestRaw);
     let manifest;
     try {
-        manifest = parseManifestText(manifestRaw, 'yaml');
+        manifest = parseManifestText(manifestRaw);
     }
     catch {
         return {};

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

@@ -1,4 +1,5 @@
 import type { AdminConnector } from '@kortix/sdk';
+import type { ConnectorLogoSource } from '../../internal/connector-logo/connector-logo-source.js';
 /**
  * How a connector presents its status — the connected mark and the status
  * pill. Its logo is `ConnectorLogo` (`connector-logo.tsx`), shared by every
@@ -31,3 +32,14 @@ export declare function ConnectorStatusBadge({ connector, accountCount, }: {
     connector: AdminConnector;
     accountCount?: number;
 }): import("react").JSX.Element | null;
+/**
+ * A project connector's logo with its state on it, the way a Slack or Teams
+ * app tile shows one: a dot on the bottom-right corner (green Connected,
+ * orange Needs account, red Error). The word is for screen readers; the dot
+ * carries it on screen.
+ */
+export declare function ConnectorStatusLogo({ connector, source, accountCount, }: {
+    connector: AdminConnector;
+    source: ConnectorLogoSource;
+    accountCount?: number;
+}): import("react").JSX.Element;

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

@@ -1,7 +1,9 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckIcon, } from '@phosphor-icons/react';
-import { connectorStatusTone } from './detail/connector-status.js';
+import { useTranslations } from '../../i18n/index.js';
+import { ConnectorLogo } from '../../internal/connector-logo/connector-logo.js';
+import { STATUS_DOT, STATUS_WORD, connectorStatusTone } from './detail/connector-status.js';
 import { ConnectorStatusBadge as ToneBadge } from './detail/status-badge.js';
 import { cn } from '../../internal/lib/utils.js';
 /**
@@ -36,3 +38,14 @@ export function ConnectorStatusBadge({ connector, accountCount, }) {
     const tone = connectorStatusTone(connector, accountCount);
     return tone === 'connected' ? null : _jsx(ToneBadge, { tone: tone });
 }
+/**
+ * A project connector's logo with its state on it, the way a Slack or Teams
+ * app tile shows one: a dot on the bottom-right corner (green Connected,
+ * orange Needs account, red Error). The word is for screen readers; the dot
+ * carries it on screen.
+ */
+export function ConnectorStatusLogo({ connector, source, accountCount, }) {
+    const t = useTranslations('connectorPages');
+    const tone = connectorStatusTone(connector, accountCount);
+    return (_jsxs("span", { className: "relative flex shrink-0", children: [_jsx(ConnectorLogo, { source: source, size: "lg" }), _jsx("span", { "aria-hidden": true, className: "bg-background absolute -right-1 -bottom-1 flex size-3 items-center justify-center rounded-full", children: _jsx("span", { className: cn('size-2 rounded-full', STATUS_DOT[tone]) }) }), _jsx("span", { className: "sr-only", children: t(STATUS_WORD[tone]) })] }));
+}

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

@@ -1,4 +1,4 @@
-import { customizePath } from '../../lib/routes.js';
+import { adminPath } from '../../lib/routes.js';
 /**
  * The app segment of a connector reached without an app: the Connected tab, a
  * custom connector, a computer. Its back link goes to the Connected tab.
@@ -7,7 +7,7 @@ export const CONNECTED_APP_SEGMENT = 'connected';
 /** The id of the native Computer entry: it has its own page (`ComputerAppPage`). */
 export const COMPUTER_APP_ID = 'native:computer';
 function base(projectId) {
-    return customizePath(encodeURIComponent(projectId), 'connectors');
+    return adminPath(encodeURIComponent(projectId), 'connectors');
 }
 function withQuery(path, params) {
     const query = params.toString();

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

@@ -1,3 +1,5 @@
+import { type ReactNode } from 'react';
+import { type AgentGrant, type ResourceScope } from '../shared/agent-resource-scope.js';
 /**
  * /projects/[id]/connectors — the standalone Connectors catalogue.
  *
@@ -35,6 +37,17 @@
  * `legacyDetailRedirect` forwards it, so an OAuth grant that started before
  * the change still lands on the right connector.
  */
-export declare function ConnectorsPage({ projectId }: {
+export declare function ConnectorsPage({ projectId, surface, grant, agentPanel, rowControl, }: {
     projectId: string;
+    /** `global` (default) is the project catalogue; `agent` scopes the same page
+     *  to one agent and turns each connector card into a grant control. */
+    surface?: ResourceScope;
+    /** Required in `agent` scope: the agent's `connectors` grant, driven by the
+     *  page's draft. Ignored in `global` scope. */
+    grant?: AgentGrant;
+    /** Agent scope only: agent settings that belong with its connectors (the
+     *  per-connector policy sets), shown above the catalogue. */
+    agentPanel?: ReactNode;
+    /** Agent scope only: a granted connector's own rule control (its policy-set picker), in its row. */
+    rowControl?: (slug: string) => ReactNode | undefined;
 }): import("react").JSX.Element;

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

@@ -5,7 +5,7 @@ import { newConfigPrompt, useConfigureThread, } from '../use-configure-thread.js
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
 import { getProjectDetail, listConnectors } from '@kortix/sdk';
 import { contract, FRESHNESS, qk, useProjectAccountId } from '@kortix/sdk/react';
-import { CaretDownIcon, MagnifyingGlassIcon, PlugIcon, PlugsConnectedIcon } from '@phosphor-icons/react';
+import { CaretDownIcon, MagnifyingGlassIcon, PlugsConnectedIcon, ShieldIcon } from '@phosphor-icons/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { lazyClient } from '../../lib/lazy-client.js';
 import { useUiPathname, useUiRouter, useUiSearchParams, useUiShallowNavigate, } from '../../providers/ui-provider.js';
@@ -23,21 +23,26 @@ import { Skeleton } from '../../primitives/skeleton.js';
 import { SplitSheet, SplitSheetBody, SplitSheetContent, SplitSheetDescription, SplitSheetHeader, SplitSheetMain, SplitSheetTitle, } from '../../primitives/split-sheet.js';
 import { Tabs, TabsList, TabsTrigger } from '../../primitives/tabs.js';
 import { EmptyState } from '../../primitives/empty-state.js';
-import { connectorConnectionQueryKeys, connectorSetupStatus, } from '../sections/connector-connection-form.js';
+import { connectorConnectionQueryKeys, } from '../sections/connector-connection-form.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
 import { useProjectCan } from '../../internal/lib/use-project-can.js';
-import { ConnectorConnectedMark, ConnectorStatusBadge } from './connector-identity.js';
+import { ConnectorStatusBadge, ConnectorStatusLogo } from './connector-identity.js';
+import { CatalogCard } from '../shared/catalog/catalog-card.js';
+import { DENSE_GRID_CLASSNAME, DENSE_GRID_CONTAINER_CLASSNAME } from '../shared/catalog/catalog-grid-tokens.js';
 import { ConnectorLogo } from '../../internal/connector-logo/connector-logo.js';
 import { installedConnectorLogoSource } from '../../internal/connector-logo/connector-logo-source.js';
 import { providerLabel } from './provider-label.js';
 import { connectedCatalogKeys, } from './catalog/catalog-entry.js';
 import { ConnectorBrowse } from './catalog/connector-browse.js';
 import { useCatalog } from './catalog/use-catalog.js';
-import { CapabilityPageShell } from '../shared/capability-page-shell.js';
-import { CatalogCard } from '../shared/catalog/catalog-card.js';
+import { GrantModeTabs, withCatalog } from '../shared/agent-resource-scope.js';
+import { CapabilityPageShell, useCapabilityShellEmbed } from '../shared/capability-page-shell.js';
+import { plainGrantSwitch } from '../shared/access-list.js';
+import { EditorList } from '../sections/view/agent-editor-primitives.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { EmptyArt } from '../../primitives/empty-art.js';
 import { catalogEmptyKind } from '../shared/catalog/catalog-empty.js';
 import { CatalogNoMatch } from '../shared/catalog/catalog-empty-state.js';
-import { CatalogGrid } from '../shared/catalog/catalog-grid.js';
 import { useTunnelConnections } from '@kortix/sdk/react';
 import { useSlashFocus } from '../../internal/hooks/index.js';
 import { connectorDisplayName, connectorSummary, filterConnectors, } from './connector-filter.js';
@@ -173,8 +178,14 @@ function parseScope(value) {
  * `legacyDetailRedirect` forwards it, so an OAuth grant that started before
  * the change still lands on the right connector.
  */
-export function ConnectorsPage({ projectId }) {
+export function ConnectorsPage({ projectId, surface = { kind: 'global' }, grant, agentPanel, rowControl, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
+    const tAgentScope = useI18nTranslations('agentScope');
+    const tTabs = useI18nTranslations('agentEditor.tabs');
+    const agentScoped = surface.kind === 'agent' && grant !== undefined;
+    // The agent page's rail layout: Add sits in the footer card, not the header.
+    const embed = useCapabilityShellEmbed();
+    const railLayout = agentScoped && embed?.titled === true;
     // `accountId` comes off the detail this page already loads. Without it
     // `useProjectCan` fetches the project a second time under its own key AND
     // holds the IAM probe disabled until that lands — so Add and every write
@@ -269,7 +280,11 @@ export function ConnectorsPage({ projectId }) {
     // form. Channels has its own primary action already — the Slack hero owns
     // it — so it needs neither, and leaving them on screen would offer to search
     // a list that is not there.
-    const channelsActive = scope === 'channels';
+    // Channels is the inbound side (who can reach the agent), not a connector
+    // the agent is granted — so it is not part of the agent-scoped view.
+    const channelsActive = scope === 'channels' && !agentScoped;
+    // Channels is a project-wide inbound surface, so an agent's page leaves it out.
+    const visibleScopes = SCOPES.filter((s) => !agentScoped || s !== 'channels');
     // The machine list answers 503 on a deployment with computers disabled, so
     // the Computer card shows only where a computer can be connected.
     const computersEnabled = useTunnelConnections({ refetchInterval: false }).isSuccess;
@@ -287,9 +302,38 @@ export function ConnectorsPage({ projectId }) {
     // already carries them (and a machineless one is not in `connectors`).
     const ownMatches = useMemo(() => filtered.filter((connector) => connector.provider !== 'computer'), [filtered]);
     const emptyKind = catalogEmptyKind(connectors.length, filtered.length);
-    // One card shape for the project's own connectors: the Connected tab's grid
-    // and the All tab's "Your connectors" section (KRTX-2531) render it alike.
-    const ownConnectorCard = (connector) => (_jsx(CatalogCard, { variant: "plain", leading: _jsx(ConnectorLogo, { source: installedConnectorLogoSource(connector), size: "lg" }), title: connectorDisplayName(connector), subtitle: _jsx("span", { className: "text-muted-foreground text-xs", children: describeConnector(connector) }), badges: _jsx(ConnectorStatusBadge, { connector: connector }), trailing: connectorSetupStatus(connector) === 'connected' ? _jsx(ConnectorConnectedMark, {}) : undefined, href: connectorHref(projectId, connector.slug) }, connector.slug));
+    // One row shape for the project's connectors in both modes (the shared
+    // Access row): logo, name, what it is, the exception mark, and in agent
+    // mode the switch that grants it. The name opens the connector's page.
+    const connectorRows = (list) => {
+        const slugs = connectors.map((connector) => connector.slug);
+        const toggle = agentScoped && grant?.set ? plainGrantSwitch(grant.value, slugs, grant.set) : null;
+        return list.map((connector) => {
+            const switched = toggle ? toggle(connector.slug) : {};
+            return {
+                id: connector.slug,
+                title: connectorDisplayName(connector),
+                leading: _jsx(ConnectorLogo, { source: installedConnectorLogoSource(connector), size: "sm" }),
+                description: describeConnector(connector),
+                status: _jsx(ConnectorStatusBadge, { connector: connector }),
+                onOpen: () => router.push(connectorHref(projectId, connector.slug)),
+                ...switched,
+                ...(rowControl ? { control: (switched.checked && rowControl(connector.slug)) || '—' } : {}),
+            };
+        });
+    };
+    // The project's own connectors, the way All apps shows the catalogue: logo
+    // tiles in a grid, the state as a dot on the logo (`ConnectorStatusLogo`)
+    // instead of a pill. In an agent's view each tile also carries the grant
+    // switch and, while granted, its policy set, beside the link.
+    const ownConnectors = (list) => {
+        const rows = new Map(connectorRows(list).map((row) => [row.id, row]));
+        return (_jsx("div", { className: DENSE_GRID_CONTAINER_CLASSNAME, children: _jsx("div", { className: DENSE_GRID_CLASSNAME, children: list.map((connector) => {
+                    const row = rows.get(connector.slug);
+                    const toggle = agentScoped && row?.onCheckedChange ? (_jsxs("span", { className: "flex items-center gap-2", children: [row.checked && row.control && row.control !== '—' ? row.control : null, _jsx(Switch, { "aria-label": connectorDisplayName(connector), checked: row.checked === true, onCheckedChange: row.onCheckedChange, disabled: row.disabled })] })) : undefined;
+                    return (_jsx(CatalogCard, { variant: "plain", href: connectorHref(projectId, connector.slug), leading: _jsx(ConnectorStatusLogo, { connector: connector, source: installedConnectorLogoSource(connector) }), title: connectorDisplayName(connector), subtitle: _jsx("span", { className: "text-muted-foreground truncate text-xs", children: describeConnector(connector) }), trailing: toggle, trailingInteractive: toggle !== undefined, className: cn(agentScoped && row?.checked === false && 'opacity-60 hover:opacity-100') }, connector.slug));
+                }) }) }));
+    };
     // Quiet on purpose: a filter, not a second tab strip.
     const catalogFilters = (_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "text", size: "sm", className: cn('gap-1 px-0 transition-colors', kindFilter !== 'all' && 'text-foreground'), "aria-label": tPages('typeFilterLabel'), children: [kindFilter === 'all'
                                     ? tPages('typeFilterAll')
@@ -309,11 +353,50 @@ export function ConnectorsPage({ projectId }) {
     // jumps back to it (`useSlashFocus`).
     const searchRef = useRef(null);
     useSlashFocus(searchRef, !channelsActive && !rulesOpen);
+    // The catalogue scope strip. Rendered immediately, not behind `settled`:
+    // static labels over a scope read out of the URL have nothing to wait for.
+    // Project scope shows it in the filter row; agent scope shows it on the
+    // heading of the list it narrows, below the grant sentence.
+    const scopeTabs = visibleScopes.length > 1 ? (_jsx(Tabs, { value: scope, onValueChange: (value) => setScope(value), children: _jsx(TabsList, { children: visibleScopes.map((value) => (_jsx(TabsTrigger, { value: value, children: SCOPE_LABEL[value] }, value))) }) })) : null;
+    // The project's connectors as rows, with the page-level states: loading,
+    // a failed load, nothing yet, nothing matching.
+    const listBody = (list) => {
+        if (!settled) {
+            return (_jsx(EditorList, { children: [0, 1, 2].map((i) => (_jsxs("li", { className: "flex min-h-12 items-center gap-3 px-4 py-2", children: [_jsx(Skeleton, { className: "size-6 rounded-sm" }), _jsx(Skeleton, { className: "h-4 w-40 rounded-sm" })] }, i))) }));
+        }
+        if (isError) {
+            return (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('text51ae0a7e3783'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: retry, children: tPages('retry') }) }));
+        }
+        if (list.length > 0)
+            return ownConnectors(list);
+        if (query.trim())
+            return _jsx(CatalogNoMatch, { query: query });
+        return (_jsx(EmptyState, { media: _jsx(EmptyArt, { icon: PlugsConnectedIcon }), title: tI18nComplete.raw('text51ae0a7e3783'), description: tI18nComplete.raw('texta3487dfc2132') }));
+    };
+    // The project's connectors over the whole catalogue: the All tab in
+    // project mode, and the agent view in agent mode (rows carry its switch).
+    const catalogSection = (_jsxs(_Fragment, { children: [ownMatches.length > 0 ? (_jsxs("div", { className: "space-y-3", children: [_jsx("h2", { className: "text-sm font-medium", children: tPages('yourConnectors') }), ownConnectors(ownMatches)] })) : null, _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [_jsx("h2", { className: "text-sm font-medium", children: tPages('allApps') }), _jsx("div", { className: "flex flex-wrap items-center gap-4", children: catalogFilters })] }), _jsx(ConnectorBrowse, { state: catalog, connectedKeys: connectedKeys, hrefFor: catalogHref, install: catalogInstall, emptyTitle: tI18nComplete.raw('text3a63271cafc1'), emptyDescription: tI18nComplete.raw('textf652a621153e'), 
+                // A slug search that only the project's own connector answers
+                // must not ALSO read "No matches" under its card (KRTX-2531).
+                suppressNoMatch: ownMatches.length > 0 })] }));
+    const addMenu = canWrite && !channelsActive ? (_jsx(NewEntityMenu, { label: railLayout ? tTabs('addConnector') : tI18nComplete.raw('text18fdd549b2ed'), pending: configure.pending, onChat: () => configure.start(newConfigPrompt('connector')), quick: {
+            icon: PlugsConnectedIcon,
+            label: tPages('addMcpMenu'),
+            description: tPages('addMcpMenuHint'),
+            onSelect: () => {
+                setMcpApp(null);
+                setPanel('mcp');
+            },
+        }, manual: {
+            label: tI18nComplete.raw('text90ccaee30bdc'),
+            description: tI18nComplete.raw('textb0fbe9dc1fcc'),
+            onSelect: () => setPanel('custom'),
+        } })) : undefined;
     return (
     // Global rules open in a SplitSheet: the page narrows to make room instead
     // of being covered. `PoliciesPanel` is a long CRUD list whose save bar
     // sticks to the body's bottom edge, so the body is the only scroller.
-    _jsxs(SplitSheet, { open: rulesOpen, onOpenChange: setRulesOpen, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs(CapabilityPageShell, { title: tI18nComplete.raw('textc3d2e79ebdd0'), description: SCOPE_DESCRIPTION[scope], search: channelsActive ? undefined : (_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { ref: searchRef, placeholder: tI18nComplete.raw('textc386cb852691'), value: query, onChange: (event) => setQuery(event.target.value), variant: "popover", size: "sm" })] })), action: 
+    _jsxs(SplitSheet, { open: rulesOpen, onOpenChange: setRulesOpen, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs(CapabilityPageShell, { title: tI18nComplete.raw('textc3d2e79ebdd0'), description: agentScoped ? tAgentScope('connectorsDescription') : SCOPE_DESCRIPTION[scope], search: channelsActive ? undefined : (_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { ref: searchRef, placeholder: agentScoped ? tAgentScope('connectorsSearch') : tI18nComplete.raw('textc386cb852691'), value: query, onChange: (event) => setQuery(event.target.value), variant: "popover", size: "sm" })] })), action: 
                     /* The page's one header action, and it carries its label: a bare `+`
                    square made the reader guess, and what it opens — a custom-connector
                    form, not the catalogue — is not guessable from a glyph. Default
@@ -321,29 +404,15 @@ export function ConnectorsPage({ projectId }) {
                    lines up with the search field beside it. `aria-label` keeps the
                    full sentence for screen readers; it opens with the visible "Add",
                    so the accessible name still contains the visible label. */
-                    canWrite && !channelsActive ? (_jsx(NewEntityMenu, { label: tI18nComplete.raw('text18fdd549b2ed'), pending: configure.pending, onChat: () => configure.start(newConfigPrompt('connector')), quick: {
-                            icon: PlugsConnectedIcon,
-                            label: tPages('addMcpMenu'),
-                            description: tPages('addMcpMenuHint'),
-                            onSelect: () => {
-                                setMcpApp(null);
-                                setPanel('mcp');
-                            },
-                        }, manual: {
-                            label: tI18nComplete.raw('text90ccaee30bdc'),
-                            description: tI18nComplete.raw('textb0fbe9dc1fcc'),
-                            onSelect: () => setPanel('custom'),
-                        } })) : undefined, filters: (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: scope, onValueChange: (value) => setScope(value), children: _jsx(TabsList, { children: SCOPES.map((value) => (_jsx(TabsTrigger, { value: value, children: SCOPE_LABEL[value] }, value))) }) }), _jsx(Button, { type: "button", variant: "text", size: "sm", onClick: () => setRulesOpen(true), className: "ml-auto px-0 transition-colors", children: tI18nComplete.raw('text1d59a5e09714') })] })), children: [channelsActive ? (
+                    railLayout ? undefined : addMenu, filters: agentScoped && grant ? (_jsx(GrantModeTabs, { grant: withCatalog(grant, connectors.map((c) => c.slug)), label: tAgentScope('connectorsAccess') })) : visibleScopes.length > 1 ? (_jsxs(_Fragment, { children: [scopeTabs, _jsx(Button, { type: "button", variant: "text", size: "sm", onClick: () => setRulesOpen(true), className: "ml-auto px-0 transition-colors", children: tI18nComplete.raw('text1d59a5e09714') })] })) : undefined, children: [agentScoped ? (
+                        /* Agent mode: the same catalogue as project mode (the project's
+                           connectors, one switch each, then every app), then the agent's
+                           rule sets. One library, two modes (Marko, 2026-10-28). */
+                        _jsxs("div", { className: "space-y-6", children: [settled && !isError ? catalogSection : listBody(ownMatches), agentPanel, railLayout ? (_jsxs("div", { className: "bg-popover flex items-center gap-3 rounded-lg px-4 py-3", children: [_jsx(ShieldIcon, { className: "text-muted-foreground size-4 shrink-0" }), _jsx("p", { className: "text-muted-foreground min-w-0 flex-1 text-xs text-pretty", children: tTabs.rich('policySetsNote', { file: () => _jsx("code", { className: "text-foreground font-mono", children: "kortix.yaml" }) }) }), addMenu] })) : null] })) : channelsActive ? (
                         /* The whole of what used to be `/projects/<id>/channels`, minus the
                        shell it used to bring — this page's `CapabilityPageShell` is the
                        one column, the one heading and the one scroll container now. */
-                        _jsx(ChannelsSection, { projectId: projectId })) : catalogActive ? (_jsxs(_Fragment, { children: [ownMatches.length > 0 ? (_jsxs("div", { className: "space-y-3", children: [_jsx("h2", { className: "text-sm font-medium", children: tPages('yourConnectors') }), _jsx(CatalogGrid, { dense: true, isLoading: false, isError: false, onRetry: retry, isEmpty: false, empty: null, children: ownMatches.map(ownConnectorCard) })] })) : null, _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [_jsx("h2", { className: "text-sm font-medium", children: tPages('allApps') }), catalogFilters] }), _jsx(ConnectorBrowse, { state: catalog, connectedKeys: connectedKeys, hrefFor: catalogHref, install: catalogInstall, emptyTitle: tI18nComplete.raw('text3a63271cafc1'), emptyDescription: tI18nComplete.raw('textf652a621153e'), 
-                                    // A slug search that only the project's own connector answers
-                                    // must not ALSO read "No matches" under its card (KRTX-2531).
-                                    suppressNoMatch: ownMatches.length > 0 })] })) : (_jsxs(_Fragment, { children: [_jsx(ConnectorMovesBanner, { projectId: projectId }), _jsx(CatalogGrid, { dense: true, 
-                                    // `!settled`, not `connectorsQuery.isLoading`: the empty state's
-                                    // wording depends on `projectQuery` too. Same gate as the filter row.
-                                    isLoading: !settled, isError: isError, error: connectorsQuery.error ?? projectQuery.error, onRetry: retry, isEmpty: emptyKind !== null, empty: emptyKind === 'no-match' ? (_jsx(CatalogNoMatch, { query: query })) : (_jsx(EmptyState, { icon: PlugIcon, size: "sm", title: tI18nComplete.raw('text51ae0a7e3783'), description: tI18nComplete.raw('texta3487dfc2132'), action: _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setScope('all'), children: tI18nComplete.raw('text45bfe4f17af7') }) })), children: filtered.map(ownConnectorCard) })] })), _jsx(AddMcpServerDialog, { projectId: projectId, app: mcpApp, open: panel === 'mcp', onOpenChange: (open) => setPanel(open ? 'mcp' : null), takenSlugs: connectors.map((connector) => connector.slug), onAdded: invalidate }, mcpApp?.url ?? 'paste'), installRequest ? (_jsx(InstallDialog, { appName: installRequest.target.appName, way: installRequest.way, open: true, pending: false, onOpenChange: (open) => !open && setInstallRequest(null), onConfirm: confirmInstall }, installRequest.target.appName)) : null, _jsx(Modal, { open: panel === 'custom', onOpenChange: (open) => !open && setPanel(null), children: _jsxs(ModalContent, { className: "lg:max-w-3xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text90ccaee30bdc') }), _jsx(ModalDescription, { children: tI18nComplete.raw('textd2f3be0047c4') })] }), _jsx(ModalBody, { className: "max-h-[75vh] overflow-y-auto", children: _jsx(CustomConnectorForm, { projectId: projectId, onAdded: (slug, { addAccount }) => {
+                        _jsx(ChannelsSection, { projectId: projectId })) : catalogActive ? (catalogSection) : (_jsxs(_Fragment, { children: [_jsx(ConnectorMovesBanner, { projectId: projectId }), listBody(filtered)] })), _jsx(AddMcpServerDialog, { projectId: projectId, app: mcpApp, open: panel === 'mcp', onOpenChange: (open) => setPanel(open ? 'mcp' : null), takenSlugs: connectors.map((connector) => connector.slug), onAdded: invalidate }, mcpApp?.url ?? 'paste'), installRequest ? (_jsx(InstallDialog, { appName: installRequest.target.appName, way: installRequest.way, open: true, pending: false, onOpenChange: (open) => !open && setInstallRequest(null), onConfirm: confirmInstall }, installRequest.target.appName)) : null, _jsx(Modal, { open: panel === 'custom', onOpenChange: (open) => !open && setPanel(null), children: _jsxs(ModalContent, { className: "lg:max-w-3xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text90ccaee30bdc') }), _jsx(ModalDescription, { children: tI18nComplete.raw('textd2f3be0047c4') })] }), _jsx(ModalBody, { className: "max-h-[75vh] overflow-y-auto", children: _jsx(CustomConnectorForm, { projectId: projectId, onAdded: (slug, { addAccount }) => {
                                                 invalidate();
                                                 setPanel(null);
                                                 router.push(connectorHref(projectId, slug, { addAccount }));

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

@@ -47,7 +47,7 @@ const surfaceLabel = (kind) => wayKindLabel(kind);
 /** Tools shown before "Show all". */
 const TOOLS_PREVIEW = 40;
 /**
- * `/projects/<id>/customize/connectors/<app>` — one catalogue app: what it is,
+ * `/projects/<id>/admin/connectors/<app>` — one catalogue app: what it is,
  * the one Install button, the connectors this project already has for it, and
  * the other ways to connect it.
  *

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

@@ -51,9 +51,6 @@ export function ConnectorAgents({ projectId, connector }) {
     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') });
     }

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

@@ -3,7 +3,7 @@ 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
+ * `/projects/<id>/admin/connectors/<app>/<connector>` — one connector, as
  * a page: its accounts, its tools, its settings.
  *
  * `appSegment` is navigation context only. It decides where Back goes: the

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

@@ -43,7 +43,7 @@ import { ConnectorStatusBadge } from './status-badge.js';
 import { useConnectorDetail } from './use-connector-detail.js';
 /** The column `CapabilityPageShell` gives the list page beside this one. */
 /**
- * `/projects/<id>/customize/connectors/<app>/<connector>` — one connector, as
+ * `/projects/<id>/admin/connectors/<app>/<connector>` — one connector, as
  * a page: its accounts, its tools, its settings.
  *
  * `appSegment` is navigation context only. It decides where Back goes: the
@@ -89,7 +89,10 @@ export function ConnectorPage({ projectId, appSegment, connectorSlug, }) {
         isError: connectorsQuery.isError,
     });
     if (state === 'loading') {
-        return (_jsxs(DetailPageShell, { busy: true, children: [_jsx(Skeleton, { className: "h-4 w-24 rounded-sm py-0" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 py-0" }), _jsx(Skeleton, { className: "h-6 w-48 rounded-sm py-0" })] }), _jsx(Skeleton, { className: "h-8 w-64 py-0" }), _jsx(Skeleton, { className: "h-20 w-full py-0" }), _jsx(Skeleton, { className: "h-20 w-full py-0" })] }));
+        return (
+        // Grouped, in the loaded page's order: back link, name, the status card,
+        // the tab row, the tab body. One block per group, no line per field.
+        _jsxs(DetailPageShell, { busy: true, children: [_jsx(Skeleton, { className: "h-4 w-24 rounded-sm py-0" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-10 shrink-0 rounded-md py-0" }), _jsx(Skeleton, { className: "h-6 w-40 rounded-sm py-0" })] }), _jsx(Skeleton, { className: "h-36 w-full rounded-md py-0" }), _jsx(Skeleton, { className: "h-10 w-96 max-w-full rounded-lg py-0" }), _jsx(Skeleton, { className: "h-48 w-full rounded-md py-0" })] }));
     }
     if (state === 'error') {
         return (_jsx(DetailPageShell, { children: _jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('textbda9de7688c0'), description: connectorsQuery.error instanceof Error

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

@@ -118,7 +118,7 @@ export function ConnectorPolicySetBar({ projectId, slug, canWrite, value, onChan
     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) => {
+    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.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)

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { customizePath } from '../../../lib/routes.js';
+import { adminPath } 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';
@@ -53,5 +53,5 @@ export function ConnectorTriggers({ projectId, connector, displayName, }) {
         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 } })] }));
+                }) })) : (_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: adminPath(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 } })] }));
 }