@kortix/ui 0.14.8 → 0.14.10

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

@@ -231,4 +231,14 @@ 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',
+    },
+    {
+        group: 'Artifact comments',
+        actions: ['project.artifact.comment'],
+        featureFlag: 'artifact_comments',
+    },
 ];

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

@@ -1,3 +1,8 @@
-export declare function ChannelsSection({ projectId }: {
+import { type ChannelPlatformId } from '../../../_vendor/shared/channel-descriptors.js';
+/** 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 = ChannelPlatformId;
+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,43 @@ 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';
+import { CHANNEL_PLATFORM_IDS, CHANNELS, isChannelPlatform, } from '../../../_vendor/kortix-shared.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 +119,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 +134,55 @@ 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]
+        : CHANNEL_PLATFORM_IDS.filter((pf) => pf !== 'email' || emailEnabled);
+    // 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 });
+            default: {
+                // A new channel id fails here until it has a hero.
+                const _exhaustive = pf;
+                return _exhaustive;
+            }
+        }
+    };
+    // 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'));
@@ -190,14 +196,15 @@ function ChannelsButton({ count, onOpen }) {
 }
 /**
  * What follows a connected Slack before its first channel: the one-time "now
- * do this in Slack" nudge. It retires itself as soon as `bindings.length > 0`:
- * a bound channel is proof the user already invited the bot and mentioned it,
+ * do this in Slack" nudge. It retires itself as soon as a Slack channel is
+ * bound: that is proof the user already invited the bot and mentioned it,
  * and from then on the Slack row's "N channels" opens the bindings dialog.
+ * Another platform's row (a Telegram chat's `/model`) proves nothing about Slack.
  */
 function SlackFollowUp({ projectId }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const bindingsQuery = useChannelBindings(projectId);
-    const bindings = bindingsQuery.data?.bindings ?? [];
+    const bindings = (bindingsQuery.data?.bindings ?? []).filter((b) => b.platform === 'slack');
     return bindings.length === 0 && !bindingsQuery.isLoading ? (_jsxs(InfoBanner, { tone: "neutral", icon: AtIcon, title: tI18nComplete.raw('textd63af8edd3d6'), children: [tI18nComplete.raw('text1fd9ae1607aa'), ' ', _jsx("span", { className: "text-foreground font-medium", children: tI18nComplete.raw('text476b90bdc143') }), ' ', tI18nComplete.raw('textb81b729b4538')] })) : null;
 }
 /**
@@ -249,7 +256,7 @@ function ChannelBindingsDialog({ projectId, canWrite, platform, open, onOpenChan
     return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: selected ? (_jsx(ChannelSettingsModalContent, { projectId: projectId, binding: selected.binding, name: selected.name, scope: selected.scope, projectDefaultAgent: projectDefaultAgent, canWrite: canWrite, onBack: back })) : (_jsxs(ModalContent, { className: "lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text5f61b63c2c4a') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text1f2550ed44dc') })] }), _jsxs(ModalBody, { className: "space-y-3 pt-4", children: [tabs.length > 1 ? (_jsx(Tabs, { value: active, onValueChange: (value) => {
                                 setTab(value);
                                 setQuery('');
-                            }, children: _jsx(TabsListCompact, { children: tabs.map((t) => (_jsxs(TabsTriggerCompact, { value: t.platform, className: "gap-1.5", children: [PLATFORM_NAMES[t.platform] ?? t.platform, _jsx("span", { className: "text-muted-foreground tabular-nums", children: t.count })] }, t.platform))) }) })) : null, inTab.length >= BINDING_SEARCH_MIN ? (_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { placeholder: tI18nComplete.raw('text49c266baaaa7'), value: query, onChange: (e) => setQuery(e.target.value), size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] })) : null, bindingsQuery.isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-12 rounded-md" }), _jsx(Skeleton, { className: "h-12 rounded-md" })] })) : visible.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: tI18nComplete.raw('texte8dd87902b91') })) : (
+                            }, children: _jsx(TabsListCompact, { children: tabs.map((t) => (_jsxs(TabsTriggerCompact, { value: t.platform, className: "gap-1.5", children: [isChannelPlatform(t.platform) ? CHANNELS[t.platform].label : t.platform, _jsx("span", { className: "text-muted-foreground tabular-nums", children: t.count })] }, t.platform))) }) })) : null, inTab.length >= BINDING_SEARCH_MIN ? (_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { placeholder: tI18nComplete.raw('text49c266baaaa7'), value: query, onChange: (e) => setQuery(e.target.value), size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] })) : null, bindingsQuery.isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-12 rounded-md" }), _jsx(Skeleton, { className: "h-12 rounded-md" })] })) : visible.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: tI18nComplete.raw('texte8dd87902b91') })) : (
                         // The list scrolls; the tabs and search above it stay put. Capped at
                         // the viewport less ~21rem of header, tabs, search and footer, so
                         // the footer stays on screen at the 720 × 480 desktop minimum,
@@ -262,8 +269,6 @@ function ChannelBindingsDialog({ projectId, canWrite, platform, open, onOpenChan
                                     _jsx(BindingOverrides, { binding: binding, policies: conversationPolicies }, "overrides"),
                                 ], onClick: () => setSelectedId(binding.bindingId) }, binding.bindingId))) }))] }), _jsx(ModalFooter, { className: "pt-2 pb-5", children: _jsx(Button, { type: "button", variant: "outline-ghost", onClick: () => onOpenChange(false), children: tI18nComplete.raw('text11a6767d5674') }) })] })) }));
 }
-/** Brand names, as the platform rows spell them. */
-const PLATFORM_NAMES = { slack: 'Slack', teams: 'Microsoft Teams' };
 /** A row's settings at a glance: only what overrides the project, else "Project default". */
 function BindingOverrides({ binding, policies, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
@@ -556,6 +561,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();
@@ -579,29 +585,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/rail.js

@@ -1,5 +1,6 @@
 import { ArrowCircleUpIcon as ArrowUpCircle, ChatCircleIcon as ChatCircle, CoinsIcon as Coins, ShippingContainerIcon as Container, CreditCardIcon as CreditCard, FlaskIcon as Flask, KeyIcon as Key, LaptopIcon as Laptop, LinkIcon as Link, PaletteIcon as Palette, ShieldCheckIcon as ShieldCheck, SlidersHorizontalIcon as SlidersHorizontal, SquaresFourIcon as SquaresFour, UserIcon as User, } from '@phosphor-icons/react';
 import { Mcp } from '../../internal/icons/mcp.js';
+import { ChromeRailIcon } from '../../internal/chrome/browser-icon.js';
 /**
  * Whether a rail item is the active one for the current settings tab.
  *
@@ -64,6 +65,14 @@ const STATIC_GROUPS = [
                 description: 'Language and keyboard shortcuts.',
                 icon: SlidersHorizontal,
             },
+            {
+                tab: 'chrome',
+                label: 'Kortix in Chrome',
+                description: 'Your sessions use Chrome with your logins. You see every step.',
+                docsHref: '/docs/connect/chrome',
+                // Monochrome like its neighbours; `ChromeRailIcon` takes only `className`.
+                icon: ChromeRailIcon,
+            },
             // Labelled "API keys", routed at `/settings/tokens`. The id has to be
             // `tokens` — it is the URL segment, and the account page already spends
             // `api-keys` on a legacy redirect (`RENAMED` in `settings-tabs.ts`) —

package/dist/customize/settings/settings-tabs.d.ts

@@ -1,4 +1,4 @@
-export type SettingsTab = 'profile' | 'security' | 'appearance' | 'sessions' | 'preferences' | 'connected' | 'tokens' | 'plan' | 'credits' | 'workspace' | 'sandbox' | 'feature-flags' | 'upgrades' | 'mcp' | 'computer';
+export type SettingsTab = 'profile' | 'security' | 'appearance' | 'sessions' | 'preferences' | 'connected' | 'chrome' | 'tokens' | 'plan' | 'credits' | 'workspace' | 'sandbox' | 'feature-flags' | 'upgrades' | 'mcp' | 'computer';
 /**
  * The default must be a tab that survives every gate, or the overlay opens on
  * nothing. It was `general` until project configuration moved to

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

@@ -54,6 +54,7 @@ export const SETTINGS_TABS = [
     'appearance',
     'sessions',
     'preferences',
+    'chrome',
     'tokens',
     'mcp',
     'computer',

package/dist/customize/settings/tabs/chrome-connections-tab.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Settings → Kortix in Chrome: the browsers this person connected with the
+ * Kortix extension. With none, the three connect steps stand inline and the
+ * connect action sits in the page header.
+ */
+export declare function ChromeConnectionsTab(): import("react").JSX.Element;

package/dist/customize/settings/tabs/chrome-connections-tab.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useChromeConnections, useDeleteChromeConnection, useUpdateChromeConnection } from '@kortix/sdk/react';
+import { PencilSimpleIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { Button } from '../../../primitives/button.js';
+import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
+import { InlineMeta } from '../../../primitives/inline-meta.js';
+import { Input } from '../../../primitives/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../primitives/select.js';
+import { SettingsRow, SettingsRowGroup } from '../../../primitives/settings-row.js';
+import { SettingsSubsectionHeader } from '../../../primitives/settings-subsection-header.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { SettingsTabHeader } from '../settings-tab-header.js';
+import { useLocale, useTranslations } from '../../../i18n/index.js';
+import { relativeTime } from '../../../internal/lib/relative-time.js';
+import { ChromeButtonMark, ChromeConnectModal, ChromeConnectSteps, ChromeCopyLink, ChromeInstallActions, ChromeOnlineDot, useChromeConnect, } from '../../../internal/chrome/chrome-connect.js';
+import { BrowserLogoTile } from '../../../internal/chrome/browser-icon.js';
+import { chromeDisplayNames, offlineLongerThan } from '../../../internal/chrome/chrome-names.js';
+import { ChromeMock } from '../../../internal/chrome/chrome-mock.js';
+const ACCESS_MODES = ['always', 'ask', 'off'];
+// `all` first: it is the recommended default.
+const TAB_SCOPES = ['all', 'own'];
+/** Offline longer than this shows when the browser was last seen. Shorter is just "Offline". */
+const LAST_SEEN_AFTER_MS = 10 * 60_000;
+/**
+ * Settings → Kortix in Chrome: the browsers this person connected with the
+ * Kortix extension. With none, the three connect steps stand inline and the
+ * connect action sits in the page header.
+ */
+export function ChromeConnectionsTab() {
+    const t = useTranslations('chrome');
+    const connections = useChromeConnections();
+    const [connectOpen, setConnectOpen] = useState(false);
+    const list = connections.data ?? [];
+    if (connections.isSuccess && list.length === 0)
+        return _jsx(ChromeEmptyTab, {});
+    const names = chromeDisplayNames(list);
+    return (
+    // `max-w-2xl`: the form tier every person-scoped pane in this dialog uses.
+    _jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-5", children: [_jsx(SettingsTabHeader, { tab: "chrome", action: list.length > 0 ? (_jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5", onClick: () => setConnectOpen(true), children: [_jsx(ChromeButtonMark, {}), t('connectAnother')] })) : undefined }), connections.isPending ? (_jsx("div", { className: "space-y-2", children: _jsx(Skeleton, { className: "h-24 rounded-md" }) })) : connections.isError ? (_jsx(ErrorState, { size: "sm", title: t('loadFailed'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => connections.refetch(), children: t('retry') }) })) : (_jsxs(_Fragment, { children: [_jsxs("section", { className: "space-y-3", children: [_jsx(SettingsSubsectionHeader, { title: t('listTitle') }), _jsx("ul", { className: "space-y-3", children: list.map((chrome) => (_jsx(ChromeRow, { chrome: chrome, displayName: names.get(chrome.id) ?? chrome.name }, chrome.id))) })] }), _jsxs("section", { className: "space-y-2", children: [_jsx(SettingsSubsectionHeader, { title: t('how.title') }), _jsxs("ul", { className: "text-muted-foreground list-disc space-y-1 pl-5 text-sm text-pretty", children: [_jsx("li", { children: t('how.group') }), _jsx("li", { children: t('how.control') }), _jsx("li", { children: t('how.own') })] })] })] })), _jsx(ChromeConnectModal, { open: connectOpen, onOpenChange: setConnectOpen, fresh: true })] }));
+}
+/** No browser yet: the steps stand inline, the one action is in the header. */
+function ChromeEmptyTab() {
+    const state = useChromeConnect();
+    return (_jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-5", children: [_jsx(SettingsTabHeader, { tab: "chrome", action: state.environment === 'unsupported' ? (_jsx(ChromeCopyLink, {})) : (_jsx(ChromeInstallActions, { state: state, showGuide: false })) }), _jsxs("div", { className: "space-y-4", children: [_jsx(ChromeMock, { className: "mx-auto max-w-md" }), _jsx("div", { className: "bg-popover flex flex-col gap-5 rounded-md border px-4 py-5", children: _jsx(ChromeConnectSteps, { state: state, showActions: false }) })] })] }));
+}
+/** "Chromium on macOS · Work · v1.0.0": what tells two browsers apart. The name is not repeated. */
+function chromeMeta(chrome, displayName) {
+    // The profile label already sits in the display name of a duplicate: say it once.
+    const profile = chrome.profileLabel && !displayName.includes(chrome.profileLabel) ? chrome.profileLabel : null;
+    return [profile, chrome.extensionVersion ? `v${chrome.extensionVersion}` : null].filter((part) => Boolean(part));
+}
+function ChromeRow({ chrome, displayName }) {
+    const t = useTranslations('chrome');
+    const locale = useLocale();
+    const update = useUpdateChromeConnection();
+    const remove = useDeleteChromeConnection();
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [draft, setDraft] = useState(null);
+    const save = (change) => update.mutate({ id: chrome.id, ...change }, { onError: () => errorToast(t('updateFailed')) });
+    const commitName = () => {
+        const name = draft?.trim();
+        // An empty name is not a name: keep the field open and flag it. Blur reverts.
+        if (!name)
+            return false;
+        setDraft(null);
+        if (name !== chrome.name)
+            save({ name });
+        return true;
+    };
+    const sessions = chrome.activeSessions.length;
+    // "Last seen just now" beside "Offline" contradicts itself: say it only once it is a while ago.
+    const longOffline = !chrome.online && offlineLongerThan(chrome.lastSeenAt, LAST_SEEN_AFTER_MS);
+    const status = chrome.online
+        ? t('online')
+        : longOffline
+            ? t('lastSeen', { time: relativeTime(chrome.lastSeenAt, locale) })
+            : t('offline');
+    const meta = [...chromeMeta(chrome, displayName), status];
+    return (_jsxs("li", { children: [_jsxs(SettingsRowGroup, { children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx(BrowserLogoTile, { brand: chrome.brand }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ChromeOnlineDot, { online: chrome.online }), draft === null ? (_jsxs("button", { type: "button", "aria-label": t('rename', { name: displayName }), title: displayName, className: "focus-visible:ring-ring/50 -mx-1 flex min-w-0 items-center gap-1.5 rounded-sm px-1 text-left outline-none focus-visible:ring-3", onClick: () => setDraft(chrome.name), children: [_jsx("span", { className: "truncate text-sm font-medium", children: displayName }), _jsx(PencilSimpleIcon, { className: "text-muted-foreground size-3.5 shrink-0" })] })) : (_jsx(Input, { autoFocus: true, value: draft, maxLength: 255, "aria-label": t('renameLabel'), className: "h-6 py-0", "aria-invalid": draft.trim() === '' ? true : undefined, onChange: (event) => setDraft(event.target.value), onBlur: () => {
+                                                    if (!commitName())
+                                                        setDraft(null);
+                                                }, onKeyDown: (event) => {
+                                                    if (event.key === 'Enter')
+                                                        commitName();
+                                                    // Closes the field only. The settings dialog ignores Escape from a text field.
+                                                    if (event.key === 'Escape')
+                                                        setDraft(null);
+                                                } }))] }), _jsxs(InlineMeta, { children: [meta, sessions > 0 ? t('usedBy', { count: sessions }) : ''] })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(true), children: t('disconnect') })] }), _jsx(SettingsRow, { label: t('access.label'), description: t('access.description'), children: _jsxs(Select, { value: chrome.accessMode, disabled: update.isPending, onValueChange: (value) => save({ accessMode: value }), children: [_jsx(SelectTrigger, { size: "sm", className: "w-44", "aria-label": t('access.label'), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ACCESS_MODES.map((mode) => (_jsx(SelectItem, { value: mode, children: t(`access.${mode}`) }, mode))) })] }) }), _jsx(SettingsRow, { label: t('scope.label'), description: t('scope.description'), children: _jsxs(Select, { value: chrome.tabScope, disabled: update.isPending, onValueChange: (value) => save({ tabScope: value }), children: [_jsx(SelectTrigger, { size: "sm", className: "w-44", "aria-label": t('scope.label'), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: TAB_SCOPES.map((scope) => (_jsx(SelectItem, { value: scope, children: t(`scope.${scope}`) }, scope))) })] }) })] }), _jsx(ConfirmDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, title: t('disconnectTitle', { name: displayName }), description: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground mb-2 block text-xs", children: meta.join(' · ') }), t('disconnectDescription')] }), confirmLabel: t('disconnect'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => remove.mutate(chrome.id, {
+                    onSuccess: () => {
+                        setConfirmOpen(false);
+                        successToast(t('disconnected'));
+                    },
+                    onError: () => errorToast(t('disconnectFailed')),
+                }) })] }));
+}

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

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 /**
- * The "nothing here" line every catalog uses, so five hand-typed copies of one
- * class string cannot drift into five different-looking messages. `CatalogGrid`
- * owns loading/error/empty; this is what callers put IN the empty slot when the
+ * The "nothing here" state every catalog uses: the shared `EmptyState`, so a
+ * catalog's empty slot looks like every other empty view. `CatalogGrid` owns
+ * loading/error/empty; this is what callers put IN the empty slot when the
  * cause is the search box rather than an empty project.
  */
 export declare function CatalogEmptyNote({ children }: {
@@ -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;