@kortix/ui 0.0.0-stage → 0.14.4

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

@@ -0,0 +1,611 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../../i18n/index.js';
+import { useLocalizedUiCatalog } from '../../../i18n/ui-catalog/use-localized-ui-catalog.js';
+/**
+ * Channels — where a project's agent becomes reachable from Slack, Email, and
+ * Microsoft Teams.
+ *
+ * ## Where this renders (it is a section, not a page)
+ *
+ * This exports `ChannelsSection`: the channels CONTENT and nothing else — no
+ * heading, no column, no scroll container. Its one mount is the Channels scope
+ * of `/projects/<id>/connectors` (`connectors-page.tsx`), which owns the
+ * `CapabilityPageShell` around it.
+ *
+ * Channels was briefly its own top-level Customize tab and rendered its own
+ * shell here. It is not any more, and the reason is a product call, not a
+ * layout one: a person who wants their agent reachable from Slack is doing the
+ * same job as a person wiring up any other outside tool, and asking them to
+ * know that one lives under "Channels" and the other under "Connectors" is
+ * asking them to know our table layout. The two are still different backend
+ * resources — `/projects/{id}/channels/*` (inbound: installations, chat
+ * identity, per-channel bindings) versus `/projects/{id}/connectors/*`
+ * (outbound: tool and OAuth access) — and nothing here merges them. Only the
+ * navigation merged.
+ *
+ * Nesting a second `CapabilityPageShell` inside the page's would print a
+ * second `<h1>` and a second `overflow-y-auto` inside the layout's one bounded
+ * column, so this file must not reintroduce one.
+ *
+ * ## The redesign (this file's shape changed; the data layer did not)
+ *
+ * Every query, mutation, feature flag, and permission check below is the same
+ * one this view used before. What changed is the FORM the state is rendered
+ * in, because the old form had a specific failure: it presented a
+ * four-column `<Table>` (Platform / Status / Workspace / Actions) as the
+ * primary install surface. In the state every new workspace starts in —
+ * nothing connected — column two read "Not connected" on every row and column
+ * three was an em dash on every row. A table exists so you can compare values
+ * down a column; there were none. It was a grid drawn around three buttons.
+ *
+ * **The form now follows the state:**
+ *
+ * | State | Form | Why |
+ * | --- | --- | --- |
+ * | Slack not connected | Hero panel with a preview of the agent answering in a thread (`slack-connect-card.tsx`) | The decision needs the payoff in front of it, not after |
+ * | Slack connected | One compact entity row + the bindings table | Now there is real data, so the table earns its place |
+ * | Email / Teams | Compact entity rows (`channel-row.tsx`), always | Second line says what the channel DOES when off, what it's bound to when on — never an em dash |
+ *
+ * **Other fixes carried by this rewrite:**
+ *
+ * - **One primary CTA.** The section header used to render "Add to Slack"
+ *   while the Slack table row rendered "Install" — two buttons firing the same
+ *   OAuth redirect. The header action is gone; the hero owns the CTA.
+ * - **The payoff moved in front of the commitment.** "Invite the bot to any
+ *   channel and @mention it" used to render only when `install` was truthy, so
+ *   the explanation of the feature arrived strictly after you had authorised
+ *   it. It is now hero copy, and its post-connect form is a next-step hint
+ *   that retires itself once a channel is actually bound (`bindings.length`),
+ *   instead of a permanent banner restating what you already did.
+ * - **Bring-your-own-Slack is a wizard, not a JSON dump.** The old inline
+ *   `Disclosure` opened onto a raw manifest `<pre>`, a prose step counter, and
+ *   two fields named after Slack's API. It is now a three-step `Stepper` in a
+ *   Modal with the JSON opt-in — see `slack-byo-wizard.tsx` for the full
+ *   rationale.
+ * - **Self-hosted is a path, not an empty state.** No managed Slack app
+ *   (`mode.oauth_available === false`) used to render `EmptyState` — the
+ *   component for "there is nothing here" — framing a supported route as a
+ *   dead end. It gets the same hero, with the wizard behind its button.
+ * - **`ConnectedDetails` deleted.** It was defined and never referenced; the
+ *   identical JSX was inlined at the call site.
+ */
+import { Badge } from '../../../primitives/badge.js';
+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 { TelegramChannelRow } from '../component/telegram-channel-row.js';
+import { SlackConnectCard } from '../component/slack-connect-card.js';
+import { EmailConnectForm } from '../connectors-view.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 { 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 { 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 }) {
+    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).
+    const { data: teamsInstall } = useTeamsInstall(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);
+    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
+    // the bindings dialog on that platform's tab. A new `session` per opening
+    // remounts the dialog, so its tab, search and selection start fresh.
+    const bindingsQuery = useChannelBindings(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;
+    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)] })) }));
+}
+/** Slack as a peer row, once it is connected. */
+function SlackChannelRow({ projectId, installation, canWrite, channelCount, onOpenChannels, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    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, {
+                        onSuccess: () => {
+                            done();
+                            successToast(tI18nComplete.raw('textd948c285986a'));
+                        },
+                    }) })) : null] }) }));
+}
+/** "12 channels" on a connected platform's row: opens the bindings dialog on its tab. */
+function ChannelsButton({ count, onOpen }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1", onClick: onOpen, children: [tI18nComplete('text5dae52a3f448', { count }), _jsx(CaretRightIcon, { className: "size-3.5 shrink-0" })] }));
+}
+/**
+ * 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,
+ * and from then on the Slack row's "N channels" opens the bindings dialog.
+ */
+function SlackFollowUp({ projectId }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const bindingsQuery = useChannelBindings(projectId);
+    const bindings = bindingsQuery.data?.bindings ?? [];
+    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;
+}
+/**
+ * Per-conversation agent/model/join-policy overrides — the web management
+ * surface for `chat_channel_bindings` (spec §2.5 "Channels become
+ * manageable"). The in-chat `/kortix agent|model|policy` commands edit the
+ * same row; this edits it through `PATCH …/channels/bindings/:id`.
+ *
+ * One dialog with a tab per platform, opened from each platform's row. It
+ * shows either the list or one channel's settings: a row swaps the content,
+ * and Back or Save returns to the list. It replaced a table of every Slack and
+ * Teams conversation on the page, which grew with each channel and DM; a list
+ * dialog that opened a second dialog would stack two modals.
+ *
+ * The list is read-only. It used to carry three live pickers per row: with ~30
+ * conversations (a real project's count) that was ~90 controls.
+ */
+function ChannelBindingsDialog({ projectId, canWrite, platform, open, onOpenChange, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const conversationPolicies = useLocalizedUiCatalog(CONVERSATION_POLICIES);
+    const bindingsQuery = useChannelBindings(projectId);
+    const projectDefaultAgent = bindingsQuery.data?.projectDefaultAgent ?? null;
+    const [tab, setTab] = useState(platform);
+    const [query, setQuery] = useState('');
+    const [selectedId, setSelectedId] = useState(null);
+    const rows = useMemo(() => (bindingsQuery.data?.bindings ?? [])
+        .map((binding) => ({
+        binding,
+        name: bindingName(binding, tI18nComplete),
+        scope: bindingScope(binding, tI18nComplete),
+    }))
+        // Threads of one Teams channel share a name; their titles order them.
+        .sort((a, b) => a.name.localeCompare(b.name, undefined, { numeric: true }) ||
+        a.scope.localeCompare(b.scope, undefined, { numeric: true })), [bindingsQuery.data, tI18nComplete]);
+    const tabs = bindingTabs(rows.map((row) => row.binding));
+    // The tab it was opened on, unless that platform has nothing bound.
+    const active = tabs.some((t) => t.platform === tab) ? tab : (tabs[0]?.platform ?? tab);
+    const inTab = rows.filter((row) => row.binding.platform === active);
+    const needle = query.trim().toLowerCase();
+    const visible = needle
+        ? inTab.filter(({ binding, name, scope }) => [name, scope, binding.agentName ?? '', binding.opencodeModel ?? '']
+            .join(' ')
+            .toLowerCase()
+            .includes(needle))
+        : inTab;
+    // `selected` goes null when the conversation was removed while open.
+    const selected = rows.find((row) => row.binding.bindingId === selectedId) ?? null;
+    const back = () => setSelectedId(null);
+    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') })) : (
+                        // 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,
+                        // where this modal is a bottom sheet.
+                        _jsx("ul", { className: "max-h-[min(45vh,calc(100dvh-21rem))] space-y-2 overflow-y-auto", children: visible.map(({ binding, name, scope }) => (
+                            // The overrides ride the meta line: AccessRow's trailing slot
+                            // stops clicks for its kebab, which would leave a dead zone.
+                            _jsx(AccessRow, { title: _jsx("span", { title: binding.channelId, children: name }), metaParts: [
+                                    scope,
+                                    _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');
+    const modelUnavailable = binding.opencodeModel !== null && binding.effectiveModel.source !== 'explicit';
+    const overrides = [
+        binding.agentName,
+        binding.opencodeModel ? stripGatewayNamespace(binding.opencodeModel) : null,
+        binding.conversationPolicy === 'project_open'
+            ? null
+            : (policies.find((p) => p.value === binding.conversationPolicy)?.label ?? binding.conversationPolicy),
+    ]
+        .filter(Boolean)
+        .join(' · ');
+    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 = [
+    { value: 'project_open', label: 'Project members can join' },
+    { value: 'owner_only', label: 'Owner only' },
+    { value: 'owner_approval', label: 'Owner approval' },
+];
+/** What a join policy does, under the picker (channels/teams/participants.ts). */
+function policyDescription(policy, tI18nComplete) {
+    if (policy === 'project_open')
+        return tI18nComplete.raw('texte83e9ba50357');
+    if (policy === 'owner_only')
+        return tI18nComplete.raw('text4540af5229a8');
+    return tI18nComplete.raw('textda4bd8bdfe42');
+}
+/** Label for the synthetic agent-picker entry meaning "inherit the project's default agent". */
+function agentDefaultLabel(projectDefaultAgent) {
+    return projectDefaultAgent ? `Project default (${projectDefaultAgent})` : 'Project default';
+}
+/** Bare model id → the compact form callers below already assume (`kortix/x` → `x`). */
+function stripGatewayNamespace(model) {
+    return model.startsWith('kortix/') ? model.slice('kortix/'.length) : model;
+}
+/**
+ * Honest one-line summary of what a channel's model binding will actually
+ * run — including the case an explicit pin silently degrades because it's no
+ * longer servable (BYOK key disconnected, managed model retired), which
+ * `effectiveModel.source` surfaces as something other than `'explicit'`.
+ */
+function describeEffectiveModel(binding) {
+    if (binding.opencodeModel) {
+        const label = stripGatewayNamespace(binding.opencodeModel);
+        return binding.effectiveModel.source === 'explicit'
+            ? label
+            : `${label} (unavailable — using default)`;
+    }
+    const resolved = binding.effectiveModel.model;
+    return resolved ? `Project default (${stripGatewayNamespace(resolved)})` : 'Project default';
+}
+function BindingBrandMark({ platform }) {
+    if (platform !== 'teams' && platform !== 'slack')
+        return null;
+    return _jsx(ChannelBrandMark, { platform: platform === 'teams' ? 'Teams' : 'Slack' });
+}
+/**
+ * One conversation's settings. A field holds `undefined` until it is touched,
+ * so it shows the live binding; Save sends only the fields that differ from
+ * it, in one PATCH. The route applies agent, model, then policy, so a refused
+ * model keeps an agent change — the list refetches either way
+ * (`useUpdateChannelBinding`), and the next Save sends what is still different.
+ */
+function ChannelSettingsModalContent({ projectId, binding, name, scope, projectDefaultAgent, canWrite, onBack, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const conversationPolicies = useLocalizedUiCatalog(CONVERSATION_POLICIES);
+    const defaultAgentLabel = agentDefaultLabel(projectDefaultAgent);
+    // Same agent source as the chat input / schedules pickers (spec: "use the
+    // same component everywhere"). `projectId` does a server-side fetch of the
+    // declared manifest agents — no live sandbox/session required, so it works
+    // on a settings page with nothing running.
+    const visibleAgents = useVisibleAgents({ projectId });
+    const agents = useMemo(() => {
+        const defaultEntry = {
+            name: defaultAgentLabel,
+            description: tI18nComplete.raw('text12dc6dbd8fc8'),
+            mode: 'primary',
+            permission: {},
+            options: {},
+        };
+        const names = new Set(visibleAgents.map((a) => a.name));
+        // Keep a currently-bound name in the list even if it was since renamed/
+        // removed, so the picker never renders a value it can't display.
+        const missingCurrent = binding.agentName && !names.has(binding.agentName)
+            ? [
+                {
+                    name: binding.agentName,
+                    mode: 'primary',
+                    permission: {},
+                    options: {},
+                },
+            ]
+            : [];
+        return [defaultEntry, ...visibleAgents, ...missingCurrent];
+    }, [defaultAgentLabel, tI18nComplete, visibleAgents, binding.agentName]);
+    const { data: providers } = useRuntimeProviders();
+    const models = useMemo(() => flattenModels(providers, { providerMode: modelProviderMode(providers) }), [providers]);
+    const boundModel = binding.opencodeModel
+        ? modelRefToKey(binding.opencodeModel)
+        : null;
+    const [agentDraft, setAgentDraft] = useState(undefined);
+    const [modelDraft, setModelDraft] = useState(undefined);
+    const [policyDraft, setPolicyDraft] = useState(undefined);
+    const agentName = agentDraft === undefined ? binding.agentName : agentDraft;
+    const model = modelDraft === undefined ? boundModel : modelDraft;
+    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();
+        if (!dirty)
+            return;
+        update.mutate({ projectId, bindingId: binding.bindingId, ...patch }, {
+            onSuccess: () => {
+                successToast(tI18nComplete.raw('text255e5c59ef00'));
+                onBack();
+            },
+            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 &&
+                                                        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] })] })] }));
+}
+/** A conversation's display name: the Slack or Teams name, else its kind. */
+function bindingName(binding, tI18nComplete) {
+    if (binding.platform === 'slack')
+        return slackBindingName(binding, tI18nComplete);
+    return binding.channelName ?? bindingFallbackName(binding, tI18nComplete);
+}
+/** The line under the name: the conversation's kind, or a Teams channel thread's title. */
+function bindingScope(binding, tI18nComplete) {
+    if (binding.platform === 'teams') {
+        // Every thread of a channel is its own binding named `Team › Channel`;
+        // its session title tells them apart.
+        if (binding.threadTitle)
+            return tI18nComplete('text5097881a690f', { title: binding.threadTitle });
+        return bindingScopeLabel(binding.channelType, tI18nComplete);
+    }
+    if (binding.platform === 'slack')
+        return slackScopeLabel(binding, tI18nComplete);
+    return binding.workspaceId;
+}
+/**
+ * A binding with no captured name.
+ *
+ * Teams conversation ids are ~100 characters
+ * (`19:…@thread.tacv2;messageid=…`), so falling back to the raw id filled the
+ * name column with an opaque string that told a reader nothing — seen on dev
+ * for channels bound before the name was read off the activity. The scope
+ * reads better, and the full id is still on the row's `title`.
+ */
+function bindingFallbackName(binding, tI18nComplete) {
+    if (binding.platform !== 'teams')
+        return binding.channelId;
+    // A thread bound before its kind was read has none stored; its id says it.
+    if (binding.channelType === 'channel' || binding.channelId.includes(';messageid='))
+        return tI18nComplete.raw('text5cb103d6008c');
+    return tI18nComplete.raw('text31d248c44579');
+}
+/**
+ * A Slack row reads `#general`, a person's name for a DM, or the members of a
+ * group DM: the name the API stores after asking Slack. Until then, or when
+ * Slack no longer has the conversation, the kind says what it is and the id
+ * stays on the row's `title`.
+ */
+function slackBindingName(binding, tI18nComplete) {
+    const name = slackConversationName(binding);
+    if (name)
+        return name;
+    if (binding.channelUnavailable)
+        return tI18nComplete.raw('textf5738ddc651d');
+    if (binding.channelType === 'im')
+        return tI18nComplete.raw('textcd3e16057d09');
+    if (binding.channelType === 'mpim')
+        return tI18nComplete.raw('textcbe7c5d45160');
+    return binding.channelId;
+}
+/** Slack rows: the conversation's kind, not the workspace id every row shared. */
+function slackScopeLabel(binding, tI18nComplete) {
+    // A deleted channel has no kind left to show; its id is what identifies it.
+    if (binding.channelUnavailable)
+        return binding.channelId;
+    switch (binding.channelType) {
+        case 'private_channel':
+            return tI18nComplete.raw('text87f9f3ba9b60');
+        case 'im':
+            return tI18nComplete.raw('textcd3e16057d09');
+        case 'mpim':
+            return tI18nComplete.raw('textcbe7c5d45160');
+        case 'channel':
+            return tI18nComplete.raw('textce4683e7013a');
+        default:
+            return tI18nComplete.raw('textda7d161a2777');
+    }
+}
+/** Teams rows: the conversation scope reads better than a tenant GUID underneath the name. */
+function bindingScopeLabel(channelType, tI18nComplete) {
+    if (channelType === 'personal')
+        return tI18nComplete.raw('text895ce927db2e');
+    if (channelType === 'groupChat')
+        return tI18nComplete.raw('text28c7d3f8b75d');
+    return tI18nComplete.raw('textce4683e7013a');
+}
+function errorToastFallback(error, tI18nComplete) {
+    errorToast(error instanceof Error ? error.message : tI18nComplete.raw('textf8bc408a8d81'));
+}
+/**
+ * The API's one-click install callback lands here with `?teams=<status>`.
+ * Turn it into a toast once and strip it from the URL so a reload does not
+ * repeat it. The install row itself renders the PERSISTED outcome
+ * (`publishState`), so this is only the announcement — a `publishing` status
+ * keeps the row live through the SDK hook's polling.
+ */
+function useTeamsInstallReturnToast() {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const searchParams = useUiSearchParams();
+    const router = useUiRouter();
+    const pathname = useUiPathname();
+    const status = searchParams?.get('teams') ?? null;
+    useEffect(() => {
+        if (!status)
+            return;
+        switch (status) {
+            case 'connected':
+                successToast(tI18nComplete.raw('textbfd886d0029b'));
+                break;
+            case 'review':
+                infoToast(tI18nComplete.raw('text65228e6e414d'));
+                break;
+            case 'failed':
+                errorToast(tI18nComplete.raw('textf5262c55d1be'));
+                break;
+            case 'publishing':
+                infoToast(tI18nComplete.raw('text76930360e909'));
+                break;
+            case 'declined':
+                warningToast(tI18nComplete.raw('textb8d155eea2ab'));
+                break;
+            case 'unconfigured':
+                warningToast(tI18nComplete.raw('text57ef9e5e8110'));
+                break;
+            default:
+                break;
+        }
+        const next = new URLSearchParams(searchParams?.toString() ?? '');
+        next.delete('teams');
+        const query = next.toString();
+        router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    }, [status, searchParams, router, pathname, tI18nComplete]);
+}
+/**
+ * The org-catalog publish outcome, as a badge beside the row name. Null when
+ * there is nothing to say: a manual/BYO install never publishes, and a
+ * published app already shows its "Open in Teams" action.
+ */
+function TeamsPublishBadge({ install, tI18nComplete, }) {
+    switch (install.publishState) {
+        case 'publishing':
+            return (_jsxs(Badge, { variant: "muted", children: [_jsx(Loading, { className: "size-3" }), tI18nComplete.raw('text36f6474748b3')] }));
+        case 'review':
+            return _jsx(Badge, { variant: "warning", children: tI18nComplete.raw('text45b9df5730ac') });
+        case 'failed':
+            return (_jsx(Badge, { variant: "destructive", title: install.publishError ?? undefined, children: tI18nComplete.raw('textdf5e72815836') }));
+        default:
+            return null;
+    }
+}
+/**
+ * The org catalog serves an older Kortix app than this deployment publishes.
+ * On 1.0.0 (no permission to read channel messages) every thread read in a
+ * team fails. Two people fix it, in order: a Teams admin publishes the update
+ * (the Teams row's button), then a team owner accepts it in each team where
+ * Teams offers it. Teams never installs an update that adds a permission or a
+ * message action on its own, and that second step is the one nobody guesses,
+ * so the notice names it. The server decides when to show it.
+ */
+function TeamsAppUpdateNotice({ install, tI18nComplete, }) {
+    const latest = install.latestAppVersion ?? '';
+    return (_jsx(InfoBanner, { tone: "warning", title: tI18nComplete.raw('text80043b03898d'), children: install.appVersion
+            ? tI18nComplete('textdf757dbe33eb', { value0: install.appVersion, value1: latest })
+            : tI18nComplete('textcd2c4b26eedd', { value0: latest }) }));
+}
+function TeamsChannelRow({ projectId, canWrite, channelCount, onOpenChannels, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const { data: install } = useTeamsInstall(projectId);
+    const { data: mode } = useTeamsMode(projectId);
+    const disconnect = useDisconnectTeams();
+    const connected = Boolean(install);
+    const installUrl = mode?.orgConsentUrl ?? null;
+    const deepLinkUrl = install?.orgInstalled ? (mode?.deepLinkUrl ?? null) : null;
+    // The consent URL doubles as the retry AND the upgrade: consenting again
+    // re-runs the publish against the tenant that is already bound, and for an
+    // app already in the catalog the API submits this manifest version as a new
+    // app definition. Hidden only while a publish is in flight or awaiting
+    // review; a BYO install has no consent URL, so it never shows.
+    const publishInFlight = install?.publishState === 'publishing' || install?.publishState === 'review';
+    const retryUrl = install && !publishInFlight ? installUrl : null;
+    const retryLabel = install?.publishState === 'failed'
+        ? tI18nComplete.raw('text942087cc2d41')
+        : install?.appUpdateAvailable
+            ? tI18nComplete.raw('texte15f213fa506')
+            : tI18nComplete.raw('text8ccfe10f2f2d');
+    // The Graph reason, verbatim, under the row: a tooltip on the badge is not
+    // discoverable enough for the one line that says what to fix.
+    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, {
+                                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'));
+                                } }) })] }) })] }));
+}