@kortix/ui 0.14.7 → 0.14.9

package/dist/customize/sections/view/agent-editor-catalog.js

@@ -231,4 +231,9 @@ export const KORTIX_PERMISSIONS_CATALOG = [
         actions: ['project.room.read', 'project.room.write'],
         featureFlag: 'agent_rooms',
     },
+    {
+        group: 'Artifacts',
+        actions: ['project.artifact.read', 'project.artifact.write', 'project.artifact.manage', 'project.artifact.public'],
+        featureFlag: 'artifacts',
+    },
 ];

package/dist/customize/sections/view/channels-view.d.ts

@@ -1,3 +1,7 @@
-export declare function ChannelsSection({ projectId }: {
+/** Reserved slug for the built-in Email channel (see api connectors.ts). */
+/** A Kortix channel's own page (`platform`), or every channel (the Channels page). */
+export type ChannelPlatform = 'slack' | 'teams' | 'email' | 'telegram';
+export declare function ChannelsSection({ projectId, platform }: {
     projectId: string;
+    platform?: ChannelPlatform;
 }): import("react").JSX.Element;

package/dist/customize/sections/view/channels-view.js

@@ -75,64 +75,42 @@ import { Button } from '../../../primitives/button.js';
 import { Field, FieldDescription, FieldGroup, FieldTitle } from '../../../primitives/field.js';
 import { InfoBanner } from '../../../primitives/info-banner.js';
 import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../../primitives/input-group.js';
-import { Label } from '../../../primitives/label.js';
 import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../primitives/select.js';
 import { Skeleton } from '../../../primitives/skeleton.js';
 import { Tabs, TabsListCompact, TabsTriggerCompact } from '../../../primitives/tabs.js';
 import Loading from '../../../primitives/loading.js';
 import { errorToast, infoToast, successToast, warningToast } from '../../../primitives/toast.js';
-import { MicrosoftTeams } from '../../../internal/icons/microsoft-teams.js';
-import { Slack } from '../../../internal/icons/slack.js';
 import { ModelSelector } from '../../../session/models/model-selector.js';
 import { AgentSelector } from '../../../session/composer/session-chat-input.js';
 import { ChannelDisconnectButton, ChannelRow, } from '../component/channel-row.js';
-import { TeamsConnectCard } from '../component/teams-connect-card.js';
+import { TeamsChannelMock, TeamsConnectCard } from '../component/teams-connect-card.js';
 import { TelegramChannelRow } from '../component/telegram-channel-row.js';
-import { SlackConnectCard } from '../component/slack-connect-card.js';
-import { EmailConnectForm } from '../connectors-view.js';
+import { SlackChannelMock, SlackConnectCard } from '../component/slack-connect-card.js';
+import { ChannelHeroLayoutProvider } from '../component/channel-hero-frame.js';
+import { EmailHero } from '../../connectors/detail/email-inboxes.js';
 import { ChannelBrandMark } from '../../../session/turn/channel-brand.js';
 import { channelSettingsPatch, } from './channel-settings-patch.js';
 import { slackConversationName } from '../../../session/turn/channel-message.js';
 import { bindingTabs } from './channel-binding-tabs.js';
-import { projectSettingsSectionHref } from '../../project-settings/project-settings-sections.js';
 import { AccessRow } from '../../../access/access/access-row.js';
 import { useChannelBindings, useUpdateChannelBinding, } from '../../../internal/hooks/use-channel-bindings.js';
-import { useDisconnectEmail, useDisconnectSlack, useEmailInstall, useSlackInstall, useSlackMode, } from '../../../internal/hooks/channels/use-channels-installations.js';
+import { useDisconnectSlack, useSlackInstall, useSlackMode, } from '../../../internal/hooks/channels/use-channels-installations.js';
 import { useDisconnectTeams, useTeamsInstall, useTeamsMode, } from '@kortix/sdk/react';
 import { modelRefToKey } from '@kortix/sdk';
 import { PROJECT_ACTIONS } from '../../../internal/lib/project-actions.js';
 import { useProjectCan } from '../../../internal/lib/use-project-can.js';
 import { cn } from '../../../internal/lib/utils.js';
 import { flattenModels, modelProviderMode, useFeatureFlag, useRuntimeProviders, useVisibleAgents, } from '@kortix/sdk/react';
-import { AtIcon, CaretLeftIcon, CaretRightIcon, EnvelopeIcon, MagnifyingGlassIcon, WarningCircleIcon, } from '@phosphor-icons/react';
+import { AtIcon, CaretLeftIcon, CaretRightIcon, MagnifyingGlassIcon, WarningCircleIcon, } from '@phosphor-icons/react';
 import { UiLink as Link, useUiPathname, useUiRouter, useUiSearchParams } from '../../../providers/ui-provider.js';
 import { useEffect, useMemo, useState } from 'react';
-/** Reserved slug for the built-in Email channel (see api connectors.ts). */
-const EMAIL_CONNECTOR_SLUG = 'kortix_email';
-/**
- * Skeleton shapes match what replaces them: one tall hero panel, then two
- * short rows. Matching the shape is the point — a placeholder that settles
- * into a different geometry reads as a layout jump, not as loading.
- */
-const CHANNEL_LOADING_ROWS = ['channel-loading-1', 'channel-loading-2'];
-export function ChannelsSection({ projectId }) {
+import { useTunnelConnections } from '@kortix/sdk/react';
+import { ComputerHero } from '../../connectors/detail/computer-app-page.js';
+import { FeatureGateScreen } from '../../shared/feature-gate-screen.js';
+export function ChannelsSection({ projectId, platform }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     useTeamsInstallReturnToast();
-    // This view used to read the flags off the project SUMMARY query
-    // (`qk.project.summary` / `getProject`, whose payload nests them one level
-    // shallower). It now reads the one gating primitive, which is backed by
-    // `qk.project.detail` — the entry the Customize panel that hosts this view
-    // already holds, so the switch removes a fetch rather than adding one.
-    //
-    // The LOADING semantics are preserved deliberately: unlike its siblings, this
-    // surface WAITS on the flag before painting (`emailFlag.isLoading` feeds
-    // `loading` below), so the header action cannot flash the wrong state, and
-    // `useEmailInstall` stays unfired until the flag resolves.
-    const emailFlag = useFeatureFlag(projectId, 'agentmail_email');
-    const emailChannelEnabled = emailFlag.enabled;
-    // Telegram is a channel connector behind connectors_v2; off, it is not listed.
-    const telegramEnabled = useFeatureFlag(projectId, 'connectors_v2').enabled;
     const { data: install, isLoading: loadingInstall } = useSlackInstall(projectId);
     const { data: mode, isLoading: loadingMode } = useSlackMode(projectId);
     // Teams is on for every project (its feature flag graduated on 2026-10-01).
@@ -140,11 +118,12 @@ export function ChannelsSection({ projectId }) {
     const { data: teamsMode } = useTeamsMode(projectId);
     // Not connected, Teams gets the same hero as Slack; connected, it is a row.
     const teamsHero = !teamsInstall && Boolean(teamsMode?.enabled);
-    const { data: emailInstall, isLoading: loadingEmail } = useEmailInstall(emailChannelEnabled ? projectId : null, EMAIL_CONNECTOR_SLUG);
-    const loading = loadingInstall ||
-        loadingMode ||
-        emailFlag.isLoading ||
-        (emailChannelEnabled && loadingEmail);
+    // Email (Resend Inboxes) is experimental behind `email_channel`. Off, it is on
+    // no surface, and its inboxes are never read (EmailHero is not mounted).
+    const emailFlag = useFeatureFlag(projectId, 'email_channel');
+    const emailEnabled = emailFlag.enabled;
+    const loading = loadingInstall || loadingMode || emailFlag.isLoading;
+    const tPages = useTranslations('connectorPages');
     const oauthInstallUrl = mode?.oauth_available ? mode.install_url : null;
     const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_CONNECTOR_WRITE).allowed === true;
     // Each platform's row shows how many conversations it has bound and opens
@@ -154,29 +133,50 @@ export function ChannelsSection({ projectId }) {
     const channelCounts = new Map(bindingTabs(bindingsQuery.data?.bindings ?? []).map((tab) => [tab.platform, tab.count]));
     const [channelsDialog, setChannelsDialog] = useState({ open: false, platform: 'slack', session: 0 });
     const openChannels = (platform) => setChannelsDialog((dialog) => ({ open: true, platform, session: dialog.session + 1 }));
-    // Once Slack is connected it stops being the headline and becomes a peer of
-    // Email and Teams — same row, same list. So the "More channels" label only
-    // earns its place while the hero is above it; with Slack in the list, the
-    // rows ARE the channel list and the section header already says "Channels".
-    // The list always has the Teams row.
-    const slackRow = Boolean(install);
-    const showMoreLabel = !slackRow;
+    // Every channel draws as a hero, connected or not: its own page shows one
+    // platform, the Channels tab every platform, one under the other.
+    const platforms = platform
+        ? [platform]
+        : ['slack', 'teams', ...(emailEnabled ? ['email'] : []), 'telegram'];
+    // The Kortix tab also holds the computer, where this deployment can pair one
+    // (the machine list answers 503 where computers are off).
+    const computersEnabled = useTunnelConnections({ refetchInterval: false }).isSuccess;
+    const showComputer = !platform && computersEnabled;
+    const hero = (pf) => {
+        switch (pf) {
+            case 'slack':
+                return install ? (_jsxs(_Fragment, { children: [_jsx(SlackChannelRow, { projectId: projectId, installation: install, canWrite: canWrite, channelCount: channelCounts.get('slack') ?? 0, onOpenChannels: () => openChannels('slack') }), _jsx(SlackFollowUp, { projectId: projectId })] })) : (_jsx(SlackConnectCard, { projectId: projectId, oauthInstallUrl: oauthInstallUrl, canWrite: canWrite }));
+            case 'teams':
+                return teamsHero && teamsMode ? (_jsx(TeamsConnectCard, { projectId: projectId, mode: teamsMode, canWrite: canWrite })) : (_jsxs(_Fragment, { children: [_jsx(TeamsChannelRow, { projectId: projectId, canWrite: canWrite, channelCount: channelCounts.get('teams') ?? 0, onOpenChannels: () => openChannels('teams') }), teamsInstall?.appUpdateAvailable ? (_jsx(TeamsAppUpdateNotice, { install: teamsInstall, tI18nComplete: tI18nComplete })) : null] }));
+            case 'email':
+                // Each inbox is an account on `kortix_email`: the hero counts them, Manage lists them.
+                return _jsx(EmailHero, { projectId: projectId, canWrite: canWrite });
+            case 'telegram':
+                return _jsx(TelegramChannelRow, { projectId: projectId, canWrite: canWrite });
+        }
+    };
+    // The Email page with the flag off: the standard flag-off screen, with its enable action.
+    if (platform === 'email' && !emailFlag.isLoading && !emailEnabled) {
+        return (_jsx(FeatureGateScreen, { featureKey: "email_channel", featureName: tPages('emailGateName'), description: tPages('emailGateDescription') }));
+    }
     return (
-    /* Full width of the Connectors shell, like the All and Connected scopes
-       beside it: the connect heroes are split cards whose chat preview needs
-       the room, and a capped column left a dead band to the right of the
-       scope tabs.
-
-       No heading and no scroll container here. Both belong to the
-       `CapabilityPageShell` in `connectors-page.tsx`; a second of either would
-       print a second `<h1>` and scroll the wrong box. */
-    _jsx("div", { className: "w-full space-y-6", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-64 rounded-md" }), _jsx("div", { className: "space-y-2", children: CHANNEL_LOADING_ROWS.map((key) => (_jsx(Skeleton, { className: "h-14 rounded-md" }, key))) })] })) : (_jsxs(_Fragment, { children: [install ? null : (_jsx(SlackConnectCard, { projectId: projectId, oauthInstallUrl: oauthInstallUrl, canWrite: canWrite })), teamsHero && teamsMode ? (_jsx(TeamsConnectCard, { projectId: projectId, mode: teamsMode, canWrite: canWrite })) : null, _jsxs("section", { className: "space-y-2", children: [showMoreLabel ? _jsx(Label, { children: tI18nComplete.raw('text28647129955c') }) : null, _jsxs("ul", { className: "space-y-2", children: [install ? (_jsx(SlackChannelRow, { projectId: projectId, installation: install, canWrite: canWrite, channelCount: channelCounts.get('slack') ?? 0, onOpenChannels: () => openChannels('slack') })) : null, _jsx(EmailChannelRow, { projectId: projectId, enabled: emailChannelEnabled, installation: emailInstall ?? null, canWrite: canWrite }), telegramEnabled ? _jsx(TelegramChannelRow, { projectId: projectId, canWrite: canWrite }) : null, teamsHero ? null : (_jsx(TeamsChannelRow, { projectId: projectId, canWrite: canWrite, channelCount: channelCounts.get('teams') ?? 0, onOpenChannels: () => openChannels('teams') }))] }), teamsInstall?.appUpdateAvailable ? (_jsx(TeamsAppUpdateNotice, { install: teamsInstall, tI18nComplete: tI18nComplete })) : null] }), install ? _jsx(SlackFollowUp, { projectId: projectId }) : null, _jsx(ChannelBindingsDialog, { projectId: projectId, canWrite: canWrite, platform: channelsDialog.platform, open: channelsDialog.open, onOpenChange: (open) => setChannelsDialog((dialog) => ({ ...dialog, open })) }, channelsDialog.session)] })) }));
+    /* Full width of the Connectors shell: the heroes are split cards whose
+       chat preview needs the room. No heading and no scroll container here;
+       both belong to the `CapabilityPageShell` in `connectors-page.tsx`. */
+    _jsx(ChannelHeroLayoutProvider, { children: _jsxs("div", { className: "w-full space-y-6", children: [loading
+                    ? platforms.map((pf) => _jsx(Skeleton, { className: "h-72 w-full rounded-lg" }, pf))
+                    : platforms.map((pf) => (_jsx("div", { className: "space-y-4", children: hero(pf) }, pf))), showComputer && !loading ? _jsx(ComputerHero, { projectId: projectId }) : null, _jsx(ChannelBindingsDialog, { projectId: projectId, canWrite: canWrite, platform: channelsDialog.platform, open: channelsDialog.open, onOpenChange: (open) => setChannelsDialog((dialog) => ({ ...dialog, open })) }, channelsDialog.session)] }) }));
 }
 /** Slack as a peer row, once it is connected. */
 function SlackChannelRow({ projectId, installation, canWrite, channelCount, onOpenChannels, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tPages = useTranslations('connectorPages');
     const disconnect = useDisconnectSlack();
-    return (_jsx(ChannelRow, { icon: _jsx(Slack, { className: "size-5 shrink-0" }), name: "Slack", connected: true, detail: installation.workspaceName ?? installation.workspaceId, pitch: tI18nComplete.raw('text9bd1c37ed121'), actions: _jsxs(_Fragment, { children: [channelCount > 0 ? _jsx(ChannelsButton, { count: channelCount, onOpen: onOpenChannels }) : null, canWrite ? (_jsx(ChannelDisconnectButton, { pending: disconnect.isPending, onConfirm: (done) => disconnect.mutate(projectId, {
+    return (_jsx(ChannelRow, { app: "slack", name: "Slack", connected: true, detail: installation.workspaceName ?? installation.workspaceId, pitch: tI18nComplete.raw('text9bd1c37ed121'), hero: {
+            title: tI18nComplete.raw('text89e9e20668f3'),
+            connectedTitle: tPages('channelConnectedTitle', { name: 'Slack' }),
+            preview: _jsx(SlackChannelMock, {}),
+        }, actions: _jsxs(_Fragment, { children: [channelCount > 0 ? _jsx(ChannelsButton, { count: channelCount, onOpen: onOpenChannels }) : null, canWrite ? (_jsx(ChannelDisconnectButton, { pending: disconnect.isPending, onConfirm: (done) => disconnect.mutate(projectId, {
                         onSuccess: () => {
                             done();
                             successToast(tI18nComplete.raw('textd948c285986a'));
@@ -280,7 +280,6 @@ function BindingOverrides({ binding, policies, }) {
     return (_jsxs("span", { title: describeEffectiveModel(binding), className: cn('inline-flex items-center gap-1', overrides && 'text-foreground'), children: [modelUnavailable ? (_jsx(WarningCircleIcon, { weight: "fill", className: "text-kortix-orange size-3.5 shrink-0" })) : null, overrides || tI18nComplete.raw('texte8cb80e5c5cb')] }));
 }
 /** The schedule modal's field frame, around each picker in the settings dialog. */
-const FIELD_FRAME = 'bg-popover flex w-full items-center rounded-md border px-2 py-1.5';
 /** Rows before the list grows a search field — the `AgentSelector` rule (7). */
 const BINDING_SEARCH_MIN = 7;
 const CONVERSATION_POLICIES = [
@@ -377,9 +376,6 @@ function ChannelSettingsModalContent({ projectId, binding, name, scope, projectD
     const policy = policyDraft ?? binding.conversationPolicy;
     const patch = channelSettingsPatch({ agentName: binding.agentName, model: boundModel, conversationPolicy: binding.conversationPolicy }, { agentName, model, conversationPolicy: policy });
     const dirty = Object.keys(patch).length > 0;
-    // The pickers refuse to open when disabled but do not dim; dim them like the
-    // disabled Select, which dims itself.
-    const pickerFrame = cn(FIELD_FRAME, !canWrite && 'opacity-50');
     const update = useUpdateChannelBinding();
     const save = (e) => {
         e.preventDefault();
@@ -393,11 +389,11 @@ function ChannelSettingsModalContent({ projectId, binding, name, scope, projectD
             onError: (error) => errorToastFallback(error, tI18nComplete),
         });
     };
-    return (_jsxs(ModalContent, { className: "lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('textafc219f2a1e7') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text95112f275fba') })] }), _jsxs("form", { onSubmit: save, children: [_jsxs(ModalBody, { className: "max-h-[calc(100dvh-15rem)] space-y-5 overflow-y-auto pt-4", children: [_jsxs("div", { className: "bg-popover flex min-w-0 items-center gap-3 rounded-md border px-3 py-2.5", children: [_jsx(BindingBrandMark, { platform: binding.platform }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", title: binding.channelId, children: name }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: scope })] })] }), _jsxs(FieldGroup, { className: "gap-5", children: [_jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('text11b39c93777e') }), _jsx("div", { className: pickerFrame, children: _jsx(AgentSelector, { agents: agents, selectedAgent: agentName ?? defaultAgentLabel, onSelect: (v) => setAgentDraft(!v || v === defaultAgentLabel ? null : v), disabled: !canWrite }) }), _jsx(FieldDescription, { className: "text-xs", children: tI18nComplete.raw('text12dc6dbd8fc8') })] }), _jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('text5e2c614c23f0') }), _jsx("div", { className: pickerFrame, children: _jsx(ModelSelector, { models: models, providers: providers, selectedModel: model, unsetLabel: tI18nComplete.raw('texte8cb80e5c5cb'), onSelect: setModelDraft, disabled: !canWrite }) }), _jsxs(FieldDescription, { className: "text-xs", children: [modelDraft === undefined &&
+    return (_jsxs(ModalContent, { className: "lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('textafc219f2a1e7') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text95112f275fba') })] }), _jsxs("form", { onSubmit: save, children: [_jsxs(ModalBody, { className: "max-h-[calc(100dvh-15rem)] space-y-5 overflow-y-auto pt-4", children: [_jsxs("div", { className: "bg-popover flex min-w-0 items-center gap-3 rounded-md border px-3 py-2.5", children: [_jsx(BindingBrandMark, { platform: binding.platform }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-sm font-medium", title: binding.channelId, children: name }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: scope })] })] }), _jsxs(FieldGroup, { className: "gap-5", children: [_jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('text11b39c93777e') }), _jsx(AgentSelector, { agents: agents, selectedAgent: agentName ?? defaultAgentLabel, onSelect: (v) => setAgentDraft(!v || v === defaultAgentLabel ? null : v), disabled: !canWrite, appearance: "field" }), _jsx(FieldDescription, { className: "text-xs", children: tI18nComplete.raw('text12dc6dbd8fc8') })] }), _jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('text5e2c614c23f0') }), _jsx(ModelSelector, { models: models, providers: providers, selectedModel: model, unsetLabel: tI18nComplete.raw('texte8cb80e5c5cb'), onSelect: setModelDraft, disabled: !canWrite, appearance: "field" }), _jsxs(FieldDescription, { className: "text-xs", children: [modelDraft === undefined &&
                                                         binding.effectiveModel.source !== 'explicit' &&
                                                         (binding.opencodeModel || binding.effectiveModel.model)
                                                         ? `${describeEffectiveModel(binding)}. `
-                                                        : null, tI18nComplete.raw('text9116af1ce384')] })] }), _jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('textb1ca871c6696') }), _jsx("div", { className: FIELD_FRAME, children: _jsxs(Select, { value: policy, onValueChange: (v) => setPolicyDraft(v), disabled: !canWrite, children: [_jsx(SelectTrigger, { variant: "transparent", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: conversationPolicies.map((p) => (_jsx(SelectItem, { value: p.value, children: p.label }, p.value))) })] }) }), _jsx(FieldDescription, { className: "text-xs", children: policyDescription(policy, tI18nComplete) })] })] })] }), _jsxs(ModalFooter, { className: "pt-2 pb-5 sm:justify-between", children: [_jsxs(Button, { type: "button", variant: "outline-ghost", className: "gap-1", onClick: onBack, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text76900f1bfd16')] }), canWrite ? (_jsxs(Button, { type: "submit", disabled: !dirty || update.isPending, children: [update.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241')] })) : null] })] })] }));
+                                                        : null, tI18nComplete.raw('text9116af1ce384')] })] }), _jsxs(Field, { "data-disabled": !canWrite, children: [_jsx(FieldTitle, { children: tI18nComplete.raw('textb1ca871c6696') }), _jsxs(Select, { value: policy, onValueChange: (v) => setPolicyDraft(v), disabled: !canWrite, children: [_jsx(SelectTrigger, { className: "h-9 w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: conversationPolicies.map((p) => (_jsx(SelectItem, { value: p.value, children: p.label }, p.value))) })] }), _jsx(FieldDescription, { className: "text-xs", children: policyDescription(policy, tI18nComplete) })] })] })] }), _jsxs(ModalFooter, { className: "pt-2 pb-5 sm:justify-between", children: [_jsxs(Button, { type: "button", variant: "outline-ghost", className: "gap-1", onClick: onBack, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('text76900f1bfd16')] }), canWrite ? (_jsxs(Button, { type: "submit", disabled: !dirty || update.isPending, children: [update.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text1509f561f241')] })) : null] })] })] }));
 }
 /** A conversation's display name: the Slack or Teams name, else its kind. */
 function bindingName(binding, tI18nComplete) {
@@ -560,6 +556,7 @@ function TeamsAppUpdateNotice({ install, tI18nComplete, }) {
 }
 function TeamsChannelRow({ projectId, canWrite, channelCount, onOpenChannels, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tPages = useTranslations('connectorPages');
     const { data: install } = useTeamsInstall(projectId);
     const { data: mode } = useTeamsMode(projectId);
     const disconnect = useDisconnectTeams();
@@ -583,29 +580,14 @@ function TeamsChannelRow({ projectId, canWrite, channelCount, onOpenChannels, })
     const detail = install?.publishState === 'failed' && install.publishError
         ? `${install.teamName ?? install.tenantId} · ${install.publishError}`
         : (install?.teamName ?? install?.tenantId ?? null);
-    return (_jsx(ChannelRow, { icon: _jsx(MicrosoftTeams, { className: "size-5 shrink-0" }), name: "Microsoft Teams", connected: connected, detail: detail, pitch: tI18nComplete.raw('text9225e456b795'), badge: install ? _jsx(TeamsPublishBadge, { install: install, tI18nComplete: tI18nComplete }) : null, actions: _jsxs(_Fragment, { children: [connected && channelCount > 0 ? (_jsx(ChannelsButton, { count: channelCount, onOpen: onOpenChannels })) : null, !canWrite ? null : connected ? (_jsxs(_Fragment, { children: [deepLinkUrl ? (_jsx(Button, { size: "sm", variant: "secondary", asChild: true, children: _jsx(Link, { href: deepLinkUrl, target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text1fece1858ee9') }) })) : null, retryUrl ? (_jsx(Button, { size: "sm", variant: "secondary", asChild: true, children: _jsx(Link, { href: retryUrl, target: "_blank", rel: "noopener noreferrer", children: retryLabel }) })) : null, _jsx(ChannelDisconnectButton, { pending: disconnect.isPending, onConfirm: (done) => disconnect.mutate(projectId, {
+    return (_jsx(ChannelRow, { app: "teams", name: "Microsoft Teams", connected: connected, detail: detail, pitch: tI18nComplete.raw('text9225e456b795'), hero: {
+            title: tI18nComplete.raw('textc1bd5ca19f5f'),
+            connectedTitle: tPages('channelConnectedTitle', { name: 'Microsoft Teams' }),
+            preview: _jsx(TeamsChannelMock, {}),
+        }, badge: install ? _jsx(TeamsPublishBadge, { install: install, tI18nComplete: tI18nComplete }) : null, actions: _jsxs(_Fragment, { children: [connected && channelCount > 0 ? (_jsx(ChannelsButton, { count: channelCount, onOpen: onOpenChannels })) : null, !canWrite ? null : connected ? (_jsxs(_Fragment, { children: [deepLinkUrl ? (_jsx(Button, { size: "sm", variant: "secondary", asChild: true, children: _jsx(Link, { href: deepLinkUrl, target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text1fece1858ee9') }) })) : null, retryUrl ? (_jsx(Button, { size: "sm", variant: "secondary", asChild: true, children: _jsx(Link, { href: retryUrl, target: "_blank", rel: "noopener noreferrer", children: retryLabel }) })) : null, _jsx(ChannelDisconnectButton, { pending: disconnect.isPending, onConfirm: (done) => disconnect.mutate(projectId, {
                                 onSuccess: () => {
                                     done();
                                     successToast(tI18nComplete.raw('textf2e69a5e24ba'));
                                 },
-                            }) })] })) : installUrl ? (_jsx(Button, { size: "sm", variant: "secondary", asChild: true, children: _jsx(Link, { href: installUrl, target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text1a2303ede074') }) })) : null] }) }));
-}
-function EmailChannelRow({ projectId, enabled, installation, canWrite, }) {
-    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    const disconnect = useDisconnectEmail();
-    const [connectOpen, setConnectOpen] = useState(false);
-    const connected = Boolean(installation);
-    return (_jsxs(_Fragment, { children: [_jsx(ChannelRow, { icon: _jsx(EnvelopeIcon, { className: "text-muted-foreground size-5 shrink-0" }), name: "Email", connected: connected, detail: installation?.email ?? null, pitch: enabled
-                    ? tI18nComplete.raw('text27ba4ec98716')
-                    : // `FeatureGateScreen`'s exact words for a flag that is off, with
-                        // the name the Feature flags section lists the flag under.
-                        `AgentMail Email ${tI18nComplete.raw('text26965989cce5')}`, actions: !enabled ? (_jsx(Button, { size: "sm", variant: "secondary", asChild: true, children: _jsx(Link, { href: projectSettingsSectionHref(projectId, 'feature-flags'), children: tI18nComplete.raw('text20a2e59ba129') }) })) : !canWrite ? null : connected ? (_jsx(ChannelDisconnectButton, { pending: disconnect.isPending, onConfirm: (done) => disconnect.mutate({ projectId, connectorSlug: EMAIL_CONNECTOR_SLUG }, {
-                        onSuccess: () => {
-                            done();
-                            successToast(tI18nComplete.raw('text958c8e06d3e7'));
-                        },
-                    }) })) : (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setConnectOpen(true), children: tI18nComplete.raw('text1a2303ede074') })) }), _jsx(Modal, { open: connectOpen, onOpenChange: setConnectOpen, children: _jsxs(ModalContent, { className: "lg:max-w-2xl", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text3de5e2a29bbc') }), _jsx(ModalDescription, { children: tI18nComplete.raw('texte13e04973080') })] }), _jsx(ModalBody, { className: "max-h-[75vh] overflow-y-auto", children: _jsx(EmailConnectForm, { projectId: projectId, connectorSlug: EMAIL_CONNECTOR_SLUG, onConnected: () => {
-                                    setConnectOpen(false);
-                                    successToast(tI18nComplete.raw('text62c381e56f37'));
-                                } }) })] }) })] }));
+                            }) })] })) : installUrl ? (_jsx(Button, { className: "transition-transform active:scale-96", asChild: true, children: _jsx(Link, { href: installUrl, target: "_blank", rel: "noopener noreferrer", children: tI18nComplete.raw('text1a2303ede074') }) })) : null] }) }));
 }

package/dist/customize/sections/view/gateway/gateway-overview.js

@@ -11,6 +11,8 @@ import { cn } from '../../../../internal/lib/utils.js';
 import { CostPanel, CostSection, MetricTab, RangeSelector, ShareBar, UsageChart, fmtCompact, fmtCredits, fmtMs, weightedP50, } from './_metrics.js';
 import { displayModel } from './_shared.js';
 import { GatewayBudgetSection } from './gateway-budgets.js';
+/** An LLM usage estimate in US dollars, to 4 decimals. */
+const usd4 = (value) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 4, maximumFractionDigits: 4 }).format(value);
 const METRICS = [
     // Spend reads in credits; the tooltip appends the unit in the component.
     { key: 'cost', label: 'Spend', keys: ['cost'], fmt: (v) => fmtCredits(v) },
@@ -144,11 +146,17 @@ export function GatewayOverview({ projectId, canWrite = false, }) {
     // No scroller and no padding of its own: this is a tab of
     // `/projects/[id]/models`, and `CapabilityPageShell` owns the page's one
     // scroll container and its column.
-    _jsx("div", { className: "flex flex-col", children: _jsxs("div", { className: "w-full space-y-12", children: [_jsxs("section", { className: "border-border bg-surface overflow-hidden rounded-xl border", children: [_jsxs("div", { className: "border-border flex flex-col border-b sm:flex-row", children: [_jsx("div", { role: "tablist", "aria-label": tI18nComplete.raw('text9e217716c4e0'), className: "flex min-w-0 flex-1", children: tabs.map((m) => (_jsx(MetricTab, { label: tab(m.key), value: m.value, unit: m.unit, selected: metric === m.key, onSelect: () => setMetric(m.key) }, m.key))) }), _jsx("div", { className: "border-border flex items-center border-t px-4 py-3 sm:border-t-0 sm:border-l sm:py-0", children: _jsx(RangeSelector, { days: days, setDays: setDays }) })] }), _jsxs("div", { className: "space-y-2 px-5 pt-6 pb-4", children: [_jsx("p", { className: "text-muted-foreground text-xs tabular-nums", children: tabs.find((m) => m.key === metric)?.sub }), _jsx(UsageChart, { data: series, keys: activeMetric.keys, yFormatter: activeMetric.key === 'cost'
+    _jsx("div", { className: "flex flex-col", children: _jsxs("div", { className: "w-full space-y-12", children: [_jsxs("section", { className: "border-border bg-surface overflow-hidden rounded-xl border", children: [_jsxs("div", { className: "border-border flex flex-col border-b sm:flex-row", children: [_jsx("div", { role: "tablist", "aria-label": tI18nComplete.raw('text9e217716c4e0'), className: "flex min-w-0 flex-1", children: tabs.map((m) => (_jsx(MetricTab, { label: tab(m.key), value: m.value, unit: m.unit, selected: metric === m.key, onSelect: () => setMetric(m.key) }, m.key))) }), _jsx("div", { className: "border-border flex items-center border-t px-4 py-3 sm:border-t-0 sm:border-l sm:py-0", children: _jsx(RangeSelector, { days: days, setDays: setDays }) })] }), _jsxs("div", { className: "space-y-2 px-5 pt-6 pb-4", children: [_jsx("p", { className: "text-muted-foreground text-xs tabular-nums", children: tabs.find((m) => m.key === metric)?.sub }), _jsxs("p", { className: "text-muted-foreground text-xs tabular-nums", children: [t('estimatedUsageValueLabel'), ' ', overview?.estimated_usage_value == null
+                                            ? t('unknownValue')
+                                            : usd4(overview.estimated_usage_value), ' · ', t('pricedRequests', { count: overview?.priced_requests ?? 0 }), ' · ', t('unpricedRequests', { count: overview?.unpriced_requests ?? 0 })] }), _jsxs("p", { className: "text-muted-foreground text-xs", children: [overview?.valuation?.coverage ?? t('estimateCoverageUnavailable'), " ", t('estimatesSeparate'), ' ', overview?.valuation?.rate_version] }), _jsx(UsageChart, { data: series, keys: activeMetric.keys, yFormatter: activeMetric.key === 'cost'
                                         ? (v) => `${credits(v)} ${creditsUnit}`
                                         : activeMetric.fmt })] })] }), _jsx(GatewayBudgetSection, { projectId: projectId, canWrite: canWrite }), _jsxs("div", { className: "flex flex-col gap-4 lg:flex-row", children: [_jsx(CostSection, { title: t('mostSpend'), description: t('mostSpendHint'), children: _jsx(CostPanel, { children: spend.named.length === 0 ? (_jsx("p", { className: "text-muted-foreground flex h-10 items-center text-xs", children: tI18nComplete.raw('textea923f45a415') })) : (_jsxs(_Fragment, { children: [spend.named.map(({ model, share }) => (_jsx(SpendRow, { label: displayModel(model.model) || 'unknown', value: `${credits(model.cost)} ${creditsUnit} · ${share}%` }, `${model.provider}/${model.model}`))), spend.rest ? (_jsx(SpendRow, { label: t('everythingElse'), value: `${credits(spend.rest.cost)} ${creditsUnit} · ${spend.rest.share}%` })) : null] })) }) }), _jsx(CostSection, { title: tI18nComplete.raw('textfec78985c8f3'), description: t('sessionsHint'), children: _jsx(CostPanel, { children: sessions.length === 0 ? (_jsx("p", { className: "text-muted-foreground flex h-10 items-center text-xs", children: tI18nComplete.raw('text0e25da739ad6') })) : (sessions.map((s) => {
                                     const name = sessionNames.get(s.session_id);
-                                    return (_jsxs("div", { className: "border-border flex min-h-13 items-center gap-4 border-b py-2 last:border-b-0", "data-session-row": "", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: cn('text-foreground truncate text-xs', !name && 'font-mono'), children: name ?? s.session_id.slice(0, 8) }), _jsxs("span", { className: "text-muted-foreground truncate text-xs tabular-nums", children: [name ? _jsxs("span", { className: "font-mono", children: [s.session_id.slice(0, 8), " \u00B7 "] }) : null, t('sessionModel', { cost: credits(s.llm_cost) }), " \u00B7", ' ', t('sessionSandbox', { cost: credits(s.compute_cost) }), " \u00B7", ' ', s.requests.toLocaleString(), " ", tI18nComplete.raw('textc3f7bdf537c4')] })] }), _jsx(ShareBar, { className: "w-24", segments: [
+                                    return (_jsxs("div", { className: "border-border flex min-h-13 items-center gap-4 border-b py-2 last:border-b-0", "data-session-row": "", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: cn('text-foreground truncate text-xs', !name && 'font-mono'), children: name ?? s.session_id.slice(0, 8) }), _jsxs("span", { className: "text-muted-foreground truncate text-xs tabular-nums", children: [name ? (_jsxs("span", { className: "font-mono", children: [s.session_id.slice(0, 8), " \u00B7 "] })) : null, t('sessionModel', { cost: credits(s.llm_cost) }), " \u00B7", ' ', t('sessionSandbox', {
+                                                                cost: credits(s.compute_cost),
+                                                            }), ' ', "\u00B7 ", s.requests.toLocaleString(), " ", tI18nComplete.raw('textc3f7bdf537c4'), ' · ', t('llmEstimateLabel'), ' ', s.estimated_usage_value == null
+                                                                ? t('unknownValue')
+                                                                : usd4(s.estimated_usage_value)] })] }), _jsx(ShareBar, { className: "w-24", segments: [
                                                     { pct: (s.llm_cost / maxSessionCost) * 100, color: 'var(--kortix-blue)' },
                                                     {
                                                         pct: (s.compute_cost / maxSessionCost) * 100,

package/dist/customize/settings/tabs/experimental-tab.js

@@ -53,7 +53,7 @@ import { useTranslations as useI18nTranslations } from '../../../i18n/index.js';
  * hook only runs once this tab is actually mounted, which `SettingsTabPane`
  * in `settings-panel.tsx` guarantees happens only while this tab is active.
  */
-import { useMemo, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Button } from '../../../primitives/button.js';
 import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../../primitives/input-group.js';
 import Loading from '../../../primitives/loading.js';
@@ -70,6 +70,7 @@ import { getProject, updateFeatureFlag, } from '@kortix/sdk';
 import { contract, invalidateProject, qk } from '@kortix/sdk/react';
 import { FlagIcon, MagnifyingGlassIcon as Search } from '@phosphor-icons/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ChannelsSwitchDialog } from '../../shared/channels-switch-dialog.js';
 import { SettingsTabHeader } from '../settings-tab-header.js';
 export const DEFAULT_EXPERIMENTAL_COPY = {
     overridden: 'Overridden for this project',
@@ -256,22 +257,40 @@ export function ExperimentalTab({ projectId }) {
         ...f,
         enabled: pendingValues[f.key] ?? f.enabled,
     }));
-    const features = useMemo(() => filterFeatures(withPending, query), [withPending, query]);
-    const handleToggle = (key, next) => {
+    // the Channels switch changes the sidebar for everyone, so only a
+    // viewer who may flip it sees it (hidden while that answer loads).
+    const visible = canEdit ? withPending : withPending.filter((f) => f.key !== 'project_channels');
+    const features = filterFeatures(visible, query);
+    const apply = (key, next) => {
         setPendingValues((prev) => ({ ...prev, [key]: next }));
         toggleMutation.mutate({ key: key, next });
     };
-    return (_jsx(ExperimentalTabView, { isLoading: projectQuery.isLoading, isError: projectQuery.isError, errorMessage: projectQuery.error?.message ?? '', onRetry: () => projectQuery.refetch(), features: features, pendingKeys: Object.keys(pendingValues), canManage: canEdit, canManageOperatorOnly: isOperator, onToggle: handleToggle, showPermissionNotice: !canEdit && !writeCap.isLoading, query: query, onQueryChange: setQuery, copy: {
-            overridden: t('origin.overridden'),
-            managedByKortix: tI18nComplete.raw('texte9ec6c0ad396'),
-            defaultOn: t('origin.defaultOn'),
-            defaultOff: t('origin.defaultOff'),
-            search: t('search'),
-            loadFailed: t('loadFailed'),
-            retry: t('retry'),
-            noMatches: (value) => t('noMatches', { query: value }),
-            emptyTitle: t('emptyTitle'),
-            emptyDescription: t('emptyDescription'),
-            permission: t('permission'),
-        } }));
+    // Channels asks first: the dialog says what changes for everyone.
+    const [channelsTarget, setChannelsTarget] = useState(null);
+    const handleToggle = (key, next) => {
+        if (key === 'project_channels')
+            setChannelsTarget(next);
+        else
+            apply(key, next);
+    };
+    const drive = rawFeatures.find((f) => f.key === 'drives');
+    return (_jsxs(_Fragment, { children: [_jsx(ChannelsSwitchDialog, { open: channelsTarget !== null, onOpenChange: (open) => !open && setChannelsTarget(null), turningOn: channelsTarget === true, projectName: project?.name ?? '', driveOff: !!drive && !drive.enabled && drive.operator_only !== true, onConfirm: (alsoDrive) => {
+                    const target = channelsTarget === true;
+                    setChannelsTarget(null);
+                    apply('project_channels', target);
+                    if (alsoDrive)
+                        apply('drives', true);
+                } }), _jsx(ExperimentalTabView, { isLoading: projectQuery.isLoading, isError: projectQuery.isError, errorMessage: projectQuery.error?.message ?? '', onRetry: () => projectQuery.refetch(), features: features, pendingKeys: Object.keys(pendingValues), canManage: canEdit, canManageOperatorOnly: isOperator, onToggle: handleToggle, showPermissionNotice: !canEdit && !writeCap.isLoading, query: query, onQueryChange: setQuery, copy: {
+                    overridden: t('origin.overridden'),
+                    managedByKortix: tI18nComplete.raw('texte9ec6c0ad396'),
+                    defaultOn: t('origin.defaultOn'),
+                    defaultOff: t('origin.defaultOff'),
+                    search: t('search'),
+                    loadFailed: t('loadFailed'),
+                    retry: t('retry'),
+                    noMatches: (value) => t('noMatches', { query: value }),
+                    emptyTitle: t('emptyTitle'),
+                    emptyDescription: t('emptyDescription'),
+                    permission: t('permission'),
+                } })] }));
 }

package/dist/customize/shared/catalog/catalog-empty-state.d.ts

@@ -15,17 +15,6 @@ export declare function CatalogEmptyNote({ children }: {
  * spaces inside a monospace span, which reads as a rendering bug rather than as
  * a report of what was searched for.
  */
-export declare function CatalogNoMatch({ query, excludedNoActions, }: {
+export declare function CatalogNoMatch({ query }: {
     query: string;
-    /**
-     * Apps that matched but expose no actions, so the catalogue does not offer
-     * them.
-     *
-     * Without this the page reports a flat "No matches for SAP" — which is wrong
-     * twice, because `sap_s_4hana_cloud` and `sap_s_4hana_cloud_sandbox` both
-     * exist upstream and the reason they are absent is one we can state.
-     * Reporting a bare zero is what made the catalogue look broken rather than
-     * selective.
-     */
-    excludedNoActions?: number;
 }): import("react").JSX.Element;

package/dist/customize/shared/catalog/catalog-empty-state.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from '../../../i18n/index.js';
 /**
  * The "nothing here" line every catalog uses, so five hand-typed copies of one
@@ -16,7 +16,7 @@ export function CatalogEmptyNote({ children }) {
  * spaces inside a monospace span, which reads as a rendering bug rather than as
  * a report of what was searched for.
  */
-export function CatalogNoMatch({ query, excludedNoActions = 0, }) {
+export function CatalogNoMatch({ query }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    return (_jsxs(CatalogEmptyNote, { children: [tI18nComplete.raw('texta8897de42124'), ' ', _jsx("span", { className: "text-foreground font-mono", children: query.trim() }), ".", excludedNoActions > 0 ? (_jsxs(_Fragment, { children: [" ", tI18nComplete('catalogExcludedNoActions', { count: excludedNoActions })] })) : null] }));
+    return (_jsxs(CatalogEmptyNote, { children: [tI18nComplete.raw('texta8897de42124'), ' ', _jsx("span", { className: "text-foreground font-mono", children: query.trim() }), "."] }));
 }

package/dist/customize/shared/channels-switch-dialog.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The confirm step of the project's Channels switch (`project_channels`):
+ * what turning it on or off changes for everyone in the project. Turning it
+ * on while Drive is off offers to turn Drive on too (channels get Files).
+ * Every surface that flips the flag asks through this dialog.
+ */
+export declare function ChannelsSwitchDialog({ open, onOpenChange, turningOn, projectName, driveOff, pending, onConfirm, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The switch's target: on, or off. */
+    turningOn: boolean;
+    projectName: string;
+    /** Drive is off and the viewer could turn it on: offer it beside Channels. */
+    driveOff: boolean;
+    pending?: boolean;
+    /** `alsoDrive`: turn Drive on too. */
+    onConfirm: (alsoDrive: boolean) => void;
+}): import("react").JSX.Element;

package/dist/customize/shared/channels-switch-dialog.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import { Checkbox } from '../../primitives/checkbox.js';
+import Loading from '../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle } from '../../primitives/modal.js';
+/**
+ * The confirm step of the project's Channels switch (`project_channels`):
+ * what turning it on or off changes for everyone in the project. Turning it
+ * on while Drive is off offers to turn Drive on too (channels get Files).
+ * Every surface that flips the flag asks through this dialog.
+ */
+export function ChannelsSwitchDialog({ open, onOpenChange, turningOn, projectName, driveOff, pending = false, onConfirm, }) {
+    const t = useTranslations('settings.featureFlags.channelsSwitch');
+    const id = useId();
+    const [alsoDrive, setAlsoDrive] = useState(false);
+    const offerDrive = turningOn && driveOff;
+    return (_jsx(Modal, { open: open, onOpenChange: (next) => {
+            if (pending)
+                return;
+            if (!next)
+                setAlsoDrive(false);
+            onOpenChange(next);
+        }, children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: turningOn ? t('onTitle', { project: projectName }) : t('offTitle') }), _jsx(ModalDescription, { children: turningOn ? t('onBody') : t('offBody') })] }), offerDrive ? (_jsx(ModalBody, { children: _jsxs("div", { className: "flex items-center gap-2.5", children: [_jsx(Checkbox, { id: `${id}-drive`, checked: alsoDrive, onCheckedChange: (value) => setAlsoDrive(value === true) }), _jsx("label", { htmlFor: `${id}-drive`, className: "text-sm", children: t('drive') })] }) })) : null, _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", disabled: pending, onClick: () => onOpenChange(false), children: t('cancel') }), _jsxs(Button, { type: "button", disabled: pending, "aria-busy": pending || undefined, onClick: () => {
+                                onConfirm(offerDrive && alsoDrive);
+                                setAlsoDrive(false);
+                            }, children: [pending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, turningOn ? t('turnOn') : t('turnOff')] })] })] }) }));
+}

package/dist/customize/shared/feature-gate-screen.js

@@ -4,12 +4,13 @@ import { useTranslations } from '../../i18n/index.js';
 import { UiLink, useUiParams } from '../../providers/ui-provider.js';
 import { Button } from '../../primitives/button.js';
 import { projectSettingsSectionHref } from '../project-settings/project-settings-sections.js';
+import { ChannelsSwitchDialog } from './channels-switch-dialog.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
 import { useProjectCan } from '../../internal/lib/use-project-can.js';
-import { updateFeatureFlag } from '@kortix/sdk';
-import { invalidateProject, qk } from '@kortix/sdk/react';
+import { getProject, updateFeatureFlag } from '@kortix/sdk';
+import { contract, invalidateProject, qk } from '@kortix/sdk/react';
 import { FlagIcon } from '@phosphor-icons/react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
 /** A disabled surface keeps its enable action and settings link in place. */
 export function FeatureGateScreen({ featureKey, featureName, description, internalOnly = false, }) {
@@ -21,11 +22,12 @@ export function FeatureGateScreen({ featureKey, featureName, description, intern
     const permission = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_SETTINGS_WRITE);
     const [error, setError] = useState('');
     const enable = useMutation({
-        mutationFn: () => {
+        mutationFn: async (alsoDrive = false) => {
             if (!projectId || internalOnly || permission.isLoading || permission.allowed !== true) {
                 throw new Error('Feature activation is not permitted');
             }
-            return updateFeatureFlag(projectId, featureKey, true);
+            const updated = await updateFeatureFlag(projectId, featureKey, true);
+            return alsoDrive ? updateFeatureFlag(projectId, 'drives', true) : updated;
         },
         onSuccess: (updated) => {
             if (!projectId)
@@ -37,8 +39,24 @@ export function FeatureGateScreen({ featureKey, featureName, description, intern
         },
         onError: (cause) => setError(cause.message),
     });
-    return (_jsx("div", { className: "bg-popover rounded-md border px-4 py-5", children: _jsxs("div", { className: "flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [_jsx("span", { className: "bg-muted/50 flex size-9 shrink-0 items-center justify-center rounded-sm", children: _jsx(FlagIcon, { className: "text-muted-foreground size-5" }) }), _jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("p", { className: "text-foreground text-sm font-medium", children: [featureName, " ", tI18nComplete.raw('text26965989cce5')] }), _jsx("p", { className: "text-muted-foreground max-w-xl text-xs text-pretty", children: description }), internalOnly ? (_jsx("p", { className: "text-muted-foreground max-w-xl text-xs text-pretty", children: tI18nComplete.raw('text1c41abcc2fff') })) : null] })] }), error ? (_jsx("p", { role: "alert", className: "text-destructive text-xs", children: error })) : null, projectId && !internalOnly ? (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { size: "sm", disabled: permission.isLoading || permission.allowed !== true || enable.isPending, onClick: () => {
-                                setError('');
-                                enable.mutate();
-                            }, children: enable.isPending ? t('enabling') : t('enable', { name: featureName }) }), _jsx(Button, { asChild: true, size: "sm", variant: "secondary", className: "shrink-0", children: _jsx(UiLink, { href: projectSettingsSectionHref(projectId, 'feature-flags'), children: tI18nComplete.raw('text20a2e59ba129') }) })] })) : null] }) }));
+    const channels = featureKey === 'project_channels';
+    const [confirming, setConfirming] = useState(false);
+    const project = useQuery({
+        queryKey: qk.project.summary(projectId ?? ''),
+        queryFn: () => getProject(projectId),
+        enabled: channels && !!projectId,
+        ...contract('config'),
+    });
+    const drive = project.data?.experimental_features?.find((f) => f.key === 'drives' && f.available);
+    return (_jsxs("div", { className: "bg-popover rounded-md border px-4 py-5", children: [channels ? (_jsx(ChannelsSwitchDialog, { open: confirming, onOpenChange: setConfirming, turningOn: true, projectName: project.data?.name ?? '', driveOff: !!drive && !drive.enabled && drive.operator_only !== true, onConfirm: (alsoDrive) => {
+                    setConfirming(false);
+                    enable.mutate(alsoDrive);
+                } })) : null, _jsxs("div", { className: "flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [_jsx("span", { className: "bg-muted/50 flex size-9 shrink-0 items-center justify-center rounded-sm", children: _jsx(FlagIcon, { className: "text-muted-foreground size-5" }) }), _jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("p", { className: "text-foreground text-sm font-medium", children: [featureName, " ", tI18nComplete.raw('text26965989cce5')] }), _jsx("p", { className: "text-muted-foreground max-w-xl text-xs text-pretty", children: description }), internalOnly ? (_jsx("p", { className: "text-muted-foreground max-w-xl text-xs text-pretty", children: tI18nComplete.raw('text1c41abcc2fff') })) : null] })] }), error ? (_jsx("p", { role: "alert", className: "text-destructive text-xs", children: error })) : null, projectId && !internalOnly ? (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { size: "sm", disabled: permission.isLoading || permission.allowed !== true || enable.isPending, onClick: () => {
+                                    setError('');
+                                    // Channels changes the sidebar for everyone: it asks first.
+                                    if (channels)
+                                        setConfirming(true);
+                                    else
+                                        enable.mutate(false);
+                                }, children: enable.isPending ? t('enabling') : t('enable', { name: featureName }) }), _jsx(Button, { asChild: true, size: "sm", variant: "secondary", className: "shrink-0", children: _jsx(UiLink, { href: projectSettingsSectionHref(projectId, 'feature-flags'), children: tI18nComplete.raw('text20a2e59ba129') }) })] })) : null] })] }));
 }

package/dist/customize/shared/new-entity-menu.js

@@ -30,7 +30,10 @@ export function RichRowBody({ icon: Glyph, title, description, }) {
  * A tab with one common case that needs no form leads with it (`quick`):
  * Connectors → "MCP server" (KRTX-2185).
  */
-export function NewEntityMenu({ label = 'New', size = 'sm', variant = 'secondary', caret = true, pending = false, onChat, manual, quick, }) {
+export function NewEntityMenu({ label = 'New', 
+// `default` is `h-9`, the height of the `size="sm"` search input every
+// Customize header puts beside it. `sm` (`h-8`) left the pair 4px apart.
+size = 'default', variant = 'secondary', caret = true, pending = false, onChat, manual, quick, }) {
     const tI18nComplete = useI18nTranslations('hardcodedUi.i18nComplete');
     if (!manual) {
         return (_jsxs(Button, { variant: variant, size: size, className: "gap-1.5", disabled: pending, onClick: onChat, children: [pending ? _jsx(Loading, { className: "size-4 shrink-0" }) : _jsx(PlusIcon, { className: "size-4" }), label] }));

package/dist/customize/shared/use-customize-prefetch.d.ts

@@ -18,7 +18,7 @@
  *  - A longer `gcTime` keeps the entries through a long session on another
  *    route; the default five minutes would drop them before Customize opens.
  */
-import { getConnectStatus, getModelDefaults, getProject, getProjectModelPicker, listConnectors, listProjectBranches, listProjectResourceGrants, listProjectSandboxTemplates, listProjectSecrets, listProjectSnapshots, listProjectTriggers, listReviewItems } from '@kortix/sdk';
+import { getModelDefaults, getProject, getProjectModelPicker, listConnectors, listProjectBranches, listProjectResourceGrants, listProjectSandboxTemplates, listProjectSecrets, listProjectSnapshots, listProjectTriggers, listReviewItems } from '@kortix/sdk';
 import { type QueryClient } from '@tanstack/react-query';
 /** Keep prefetched Customize data for half an hour without an observer. */
 export declare const CUSTOMIZE_PREFETCH_GC_MS: number;
@@ -35,11 +35,10 @@ export interface CustomizePrefetchGates {
     reviewRead: boolean;
     membersManage: boolean;
 }
-type CatalogQueries = Pick<typeof import('../connectors/catalog/use-catalog.js'), 'catalogSectionsQuery' | 'connectStatusQuery'>;
+type CatalogQueries = Pick<typeof import('../connectors/catalog/use-catalog.js'), 'catalogSectionsQuery'>;
 /** The reads the prefetch issues. Injected in tests; the SDK in production. */
 export interface CustomizePrefetchApi {
     getProject: typeof getProject;
-    getConnectStatus: typeof getConnectStatus;
     getModelDefaults: typeof getModelDefaults;
     getProjectModelPicker: typeof getProjectModelPicker;
     listConnectors: typeof listConnectors;