@kortix/ui 0.14.5 → 0.14.7

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

@@ -8,7 +8,8 @@ import { contract, FRESHNESS, qk, useFeatureFlag, useProjectAccountId } from '@k
 import { MagnifyingGlassIcon, PlugIcon, PlugsConnectedIcon } from '@phosphor-icons/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { lazyClient } from '../../lib/lazy-client.js';
-import { useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { useUiPathname, useUiRouter, useUiSearchParams, useUiShallowNavigate, } from '../../providers/ui-provider.js';
+import { useDebounce } from '../../hooks/use-debounce.js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PoliciesPanel } from '../../workspace/projects/policies-panel.js';
 import { Button } from '../../primitives/button.js';
@@ -37,7 +38,7 @@ import { useTunnelConnections } from '@kortix/sdk/react';
 import { useSlashFocus } from '../../internal/hooks/index.js';
 import { connectorDisplayName, connectorSummary, filterConnectors, } from './connector-filter.js';
 import { ConnectorMovesBanner } from './connector-moves-banner.js';
-import { appHref, appRefFromEntry, connectorHref, legacyDetailRedirect } from './connector-routes.js';
+import { appHref, appRefFromEntry, connectorHref, connectorSearchFromParams, legacyDetailRedirect, withConnectorSearch, } from './connector-routes.js';
 import { useInstall } from './install/use-install.js';
 /**
  * The click-gated Add form, split out of this route's initial chunk.
@@ -172,7 +173,11 @@ export function ConnectorsPage({ projectId }) {
     const canWrite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_CONNECTOR_WRITE, { accountId }).allowed ===
         true;
     const queryClient = useQueryClient();
-    const [query, setQuery] = useState('');
+    const { search, router, pathname, replaceParams, setScope, rulesOpen, setRulesOpen } = useConnectorNavigation(projectId);
+    // The search lives in `?q=`: opening a connector unmounts this page, and
+    // browser Back must bring the same results back (KRTX-3018).
+    const [query, setQuery] = useState(() => connectorSearchFromParams(search));
+    useSearchInUrl(query, search, pathname);
     const [panel, setPanel] = useState(null);
     // The catalogue app whose own MCP server the MCP dialog connects. Null for
     // a server the user pastes (New → MCP server).
@@ -180,7 +185,6 @@ export function ConnectorsPage({ projectId }) {
     const [computerOpen, setComputerOpen] = useState(false);
     const tSharing = useI18nTranslations('accessSharing');
     const tPages = useI18nTranslations('connectorPages');
-    const { search, router, pathname, replaceParams, setScope, rulesOpen, setRulesOpen } = useConnectorNavigation(projectId);
     const connectorsQuery = useQuery({
         queryKey: qk.project.connectors(projectId),
         queryFn: () => listConnectors(projectId, { includeSchemas: false }),
@@ -374,6 +378,21 @@ export function ConnectorsPage({ projectId }) {
                                                 router.push(connectorHref(projectId, slug, { addAccount }));
                                             } }) })] }) })] }) }), _jsxs(SplitSheetContent, { children: [_jsxs(SplitSheetHeader, { children: [_jsx(SplitSheetTitle, { children: tI18nComplete.raw('text1d59a5e09714') }), _jsx(SplitSheetDescription, { children: tI18nComplete.raw('text014d10bd3c64') })] }), _jsx(SplitSheetBody, { children: _jsx(PoliciesPanel, { projectId: projectId }) })] })] }));
 }
+/**
+ * Mirrors the settled search into `?q=` with a shallow replace: no history
+ * entry per keystroke, and no server round trip for a view already on screen.
+ */
+function useSearchInUrl(query, search, pathname) {
+    const shallowNavigate = useUiShallowNavigate();
+    const { debouncedValue } = useDebounce(query.trim(), 300);
+    useEffect(() => {
+        if (connectorSearchFromParams(search) === debouncedValue)
+            return;
+        const params = withConnectorSearch(new URLSearchParams(search?.toString() ?? ''), debouncedValue);
+        const suffix = params.toString();
+        shallowNavigate(suffix ? `${pathname}?${suffix}` : pathname, { replace: true });
+    }, [debouncedValue, search, pathname, shallowNavigate]);
+}
 function useConnectorNavigation(projectId) {
     const search = useUiSearchParams();
     const router = useUiRouter();

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

@@ -14,7 +14,7 @@ import { EntityAvatar } from '../../../primitives/entity-avatar.js';
 import { Skeleton } from '../../../primitives/skeleton.js';
 import { EmptyState } from '../../../primitives/empty-state.js';
 import { ErrorState } from '../../../primitives/error-state.js';
-import { appNameKey, catalogEntryConnectors, } from '../catalog/catalog-entry.js';
+import { appNameKey, catalogEntryConnectors, discoverEntryIcon, } from '../catalog/catalog-entry.js';
 import { listConnectCatalogPage, useConnectProviderStatus, } from '../catalog/use-catalog.js';
 import { connectorDisplayName, connectorSummary, } from '../connector-filter.js';
 import { appRefFromLocation, connectorHref, connectorsHref, } from '../connector-routes.js';
@@ -37,6 +37,22 @@ const SURFACE_ROW = 'flex items-center gap-3 px-4 py-3';
 /** One bordered group of rows, divided. Shared by both lists on the page. */
 const ROW_GROUP = 'bg-popover divide-y overflow-hidden rounded-md border';
 const surfaceLabel = (kind) => (kind === 'openapi' ? 'OpenAPI' : kind.toUpperCase());
+/**
+ * The app page's icon tile (`ConnectorAppIcon`, size `lg`): the resolved
+ * favicon, or the glyph tile when the record has none — and the same glyph
+ * tile when the URL fails to load, which used to render the browser's
+ * broken-image glyph beside the title. Mirrors the catalogue card's
+ * `ConnectorIcon`. The latch is per URL (`failedUrl`), so the late-arriving
+ * managed logo — which swaps the URL — gets a fresh try without a call-site
+ * key.
+ */
+function AppIcon({ icon, name }) {
+    const [failedUrl, setFailedUrl] = useState(null);
+    if (!icon || failedUrl === icon) {
+        return _jsx(EntityAvatar, { icon: GlobeIcon, size: "lg", label: name });
+    }
+    return (_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-sm", children: _jsx("img", { src: icon, alt: "", width: 36, height: 36, referrerPolicy: "no-referrer", className: "size-9 object-contain", onError: () => setFailedUrl(icon) }) }));
+}
 /**
  * `/projects/<id>/customize/connectors/<app>` — one catalogue app: what it is,
  * the one Install button, the connectors this project already has for it, and
@@ -148,9 +164,7 @@ export function AppPage({ projectId, appSegment }) {
         infoCells.push({ key: 'runs', label: t('infoRunsOver'), value: primary.kind });
     if (waysCount > 1)
         infoCells.push({ key: 'ways', label: t('waysToConnect'), value: String(waysCount) });
-    return (_jsxs(DetailPageShell, { children: [_jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: connectorsHref(projectId), children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3d2e79ebdd0')] }) }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [resolved.icon ? (
-                            // The connector page's icon tile (`ConnectorAppIcon`, size `lg`).
-                            _jsx("span", { className: "flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-sm", children: _jsx("img", { src: resolved.icon, alt: "", width: 36, height: 36, referrerPolicy: "no-referrer", className: "size-9 object-contain" }) })) : (_jsx(EntityAvatar, { icon: GlobeIcon, size: "lg", label: resolved.name })), _jsx("h1", { className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: resolved.name })] }), primary ? (_jsx("div", { className: "shrink-0", children: installMenu('header', primary.target, 'default', resolved.name) })) : null] }), infoCells.length > 0 || resolved.description ? (_jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [infoCells.length > 0 ? (_jsx("dl", { className: "flex flex-wrap gap-x-8 gap-y-3 px-4 py-3", children: infoCells.map((cell) => (_jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground truncate text-sm font-medium", children: cell.value })] }, cell.key))) })) : null, resolved.description ? (_jsxs("div", { className: "space-y-1.5 px-4 py-4", children: [_jsx("h2", { className: "text-muted-foreground text-xs", children: t('overview') }), _jsx("p", { className: "text-foreground text-sm text-pretty", children: resolved.description })] })) : null] })) : null, inProject.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: projectName ? t('installedIn', { project: projectName }) : t('installedHere') }), _jsx("p", { className: "text-muted-foreground text-xs", children: t('installedHint') })] }), _jsx("ul", { className: ROW_GROUP, children: inProject.map((connector) => {
+    return (_jsxs(DetailPageShell, { children: [_jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: connectorsHref(projectId), children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3d2e79ebdd0')] }) }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(AppIcon, { icon: resolved.icon, name: resolved.name }), _jsx("h1", { className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: resolved.name })] }), primary ? (_jsx("div", { className: "shrink-0", children: installMenu('header', primary.target, 'default', resolved.name) })) : null] }), infoCells.length > 0 || resolved.description ? (_jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [infoCells.length > 0 ? (_jsx("dl", { className: "flex flex-wrap gap-x-8 gap-y-3 px-4 py-3", children: infoCells.map((cell) => (_jsxs("div", { className: "min-w-0 space-y-0.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground truncate text-sm font-medium", children: cell.value })] }, cell.key))) })) : null, resolved.description ? (_jsxs("div", { className: "space-y-1.5 px-4 py-4", children: [_jsx("h2", { className: "text-muted-foreground text-xs", children: t('overview') }), _jsx("p", { className: "text-foreground text-sm text-pretty", children: resolved.description })] })) : null] })) : null, inProject.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: projectName ? t('installedIn', { project: projectName }) : t('installedHere') }), _jsx("p", { className: "text-muted-foreground text-xs", children: t('installedHint') })] }), _jsx("ul", { className: ROW_GROUP, children: inProject.map((connector) => {
                             const tone = connectorStatusTone(connector);
                             return (_jsx("li", { children: _jsxs(Link, { href: connectorHref(projectId, connector.slug, { app }), className: "hover:bg-muted/50 flex items-center gap-3 px-4 py-3 transition-colors", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "text-foreground block truncate text-sm font-medium", children: connectorDisplayName(connector) }), _jsx("span", { className: "text-muted-foreground block truncate text-xs", children: connectorSummary(connector, providerLabel(connector.provider)) })] }), _jsx("span", { className: "flex w-28 shrink-0 items-center", children: _jsx(ConnectorStatusBadge, { tone: tone }) }), _jsxs("span", { className: "text-muted-foreground flex w-16 shrink-0 items-center justify-end gap-1 text-xs", children: [t('open'), _jsx(CaretRightIcon, { "aria-hidden": true, className: "size-4" })] })] }) }, connector.slug));
                         }) })] })) : null, resolved.surfaces.length === 0 && resolved.references.length === 0 ? (_jsx(EmptyState, { icon: GlobeIcon, size: "sm", title: tI18nComplete.raw('text363579e1d66b'), description: tI18nComplete.raw('text4d286e47d580') })) : null, resolved.surfaces.length > 1 || resolved.references.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: t('waysToConnect') }), _jsxs("ul", { className: ROW_GROUP, children: [resolved.surfaces.map((surface) => (_jsxs("li", { className: SURFACE_ROW, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: surface.label }), surface.kind ? (_jsx(Badge, { variant: "muted", size: "xs", children: surface.kind })) : null] }), installMenu(surface.key, surface.target, 'secondary', surface.label)] }, surface.key))), resolved.references.map((reference) => (_jsxs("li", { className: SURFACE_ROW, children: [_jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [_jsx("span", { className: "text-foreground truncate text-sm font-medium", children: reference.label }), _jsx(Badge, { variant: "muted", size: "xs", children: reference.kind })] }), reference.href ? (_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "shrink-0", children: _jsxs("a", { href: reference.href, target: "_blank", rel: "noreferrer", children: [tI18nComplete.raw('text7af023c43013'), _jsx(ArrowSquareOutIcon, { className: "size-3.5 shrink-0" })] }) })) : (_jsx(Badge, { variant: "secondary", size: "sm", children: tI18nComplete.raw('textdf0453d185c4') }))] }, reference.key)))] })] })) : null, mcpApp ? (_jsx(AddMcpServerDialog, { projectId: projectId, app: mcpApp, open: true, onOpenChange: (open) => !open && setMcpApp(null), takenSlugs: connectors.map((connector) => connector.slug), onAdded: () => void connectorsQuery.refetch() }, mcpApp.url)) : null] }));
@@ -231,7 +245,7 @@ function useAppData(projectId, app) {
             name: managed?.name ?? detail.item.name,
             description: detail.item.description ?? managed?.description ?? null,
             // The managed logo is sharp where the catalogue's favicon is not.
-            icon: managed?.imgSrc ?? detail.item.icon,
+            icon: managed?.imgSrc ?? discoverEntryIcon(detail.item),
             surfaces: [
                 ...installableVariants(detail.variants).map((variant, index) => ({
                     key: `${variant.kind}:${variant.id}`,

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

@@ -49,13 +49,11 @@ export function ConnectorAdvancedTools({ connector, advancedRules, toolRules, lo
     // re-fired whenever a rule was added or removed, so the panel sprang back open
     // moments after the user collapsed it, which read as the disclosure opening by
     // itself. After the first reveal the panel is the user's to control.
-    const revealedExistingRules = useRef(false);
-    useEffect(() => {
-        if (revealedExistingRules.current || advancedRules.length === 0)
-            return;
-        revealedExistingRules.current = true;
+    const [revealedExistingRules, setRevealedExistingRules] = useState(false);
+    if (!revealedExistingRules && advancedRules.length > 0) {
+        setRevealedExistingRules(true);
         setAdvancedOpen(true);
-    }, [advancedRules.length]);
+    }
     const savePatternRules = () => onSave([...toolRules, ...draftToRules(draft)]);
     return (_jsx(_Fragment, { children: hasTools || advancedRules.length > 0 ? (_jsxs(Disclosure, { variant: "outline", className: "overflow-hidden", open: advancedOpen, onOpenChange: setAdvancedOpen, children: [_jsx(DisclosureTrigger, { variant: "outline", children: _jsxs(Button, { variant: "popover", children: [tI18nComplete.raw('text9f088dbebd6c'), advancedRules.length > 0 ? (_jsx(Badge, { variant: "secondary", size: "sm", children: advancedRules.length })) : null, _jsx("span", { className: "text-muted-foreground ml-auto text-xs font-normal", children: tI18nComplete.raw('text59da2efb2423') })] }) }), _jsx(DisclosureContent, { variant: "outline", contentClassName: "border-border border-t", children: _jsxs("div", { className: "space-y-5 px-4 py-5", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: tI18nComplete.raw('text594bdd4c19b2') }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs text-pretty", children: tI18nComplete.raw('textf900377c2048') })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [sensitivePending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, _jsx(Switch, { checked: connector.sensitive === true, onCheckedChange: onSensitive, disabled: frozen || sensitivePending, "aria-label": tI18nComplete.raw('text594bdd4c19b2') })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: tI18nComplete.raw('text380c0b05bcfc') }), _jsxs("p", { className: "text-muted-foreground text-xs text-pretty", children: [tI18nComplete.raw('textde00adeaf21b'), _jsx("code", { className: "font-mono", children: "delete_*" }), tI18nComplete.raw('text3a13855164e7'), _jsx("code", { className: "font-mono", children: "/^send/i" }), tI18nComplete.raw('texte45481e75a5e')] }), draft.map((row) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: row.match, placeholder: tI18nComplete.raw('text74ad536dca05'), variant: "popover", size: "xs", className: "flex-1 font-mono", "aria-label": tI18nComplete.raw('text5c9c672f4cd3'), disabled: frozen, onChange: (event) => setDraft((rows) => rows.map((candidate) => candidate.id === row.id
                                                     ? { ...candidate, match: event.target.value }

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

@@ -1,4 +1,4 @@
-import { type AdminConnector } from '@kortix/sdk';
+import type { AdminConnector } from '@kortix/sdk';
 interface ConnectorModalProps {
     projectId: string;
     /** The connector to show, or `null` when it has not resolved yet. `open` is
@@ -6,10 +6,8 @@ interface ConnectorModalProps {
     connector: AdminConnector | null;
     canWrite: boolean;
     open: boolean;
-    /** Open on a selection whose record is still loading — `?c=<slug>` on a cold
-     *  page, which is how every OAuth 2.0 return arrives. Renders the shell so
-     *  the modal is present from the first frame instead of appearing on its own
-     *  once the list lands. */
+    /** Open on a selection whose record is still loading. Renders the shell so
+     *  the modal is present from the first frame. */
     isResolving?: boolean;
     onOpenChange: (open: boolean) => void;
     /** Refetch every authorization-derived query. Every mutation below calls it. */
@@ -18,15 +16,14 @@ interface ConnectorModalProps {
     onRemoved: () => void;
 }
 /**
- * Connector detail — header identity + tab nav + content pane.
+ * One connector over the agent editor, without leaving it (a navigation would
+ * drop the agent's unsaved draft). The body IS the connector page
+ * (`ConnectorDetailView`): the same header, status strip, notice, tabs and
+ * split credential sheet, so the modal and the page cannot drift. The modal
+ * adds only a close button and keeps its tab in state instead of the URL.
  *
- * Header: icon, name, description, primary connect action.
- * Left: Accounts / Tools / Triggers / Settings nav.
- * Right: the active tab.
- *
- * `ConnectorModalBody` is keyed on `connector.slug` so picking a different card
- * while the modal stays open resets the active tab without remounting
- * `Modal`/`ModalContent` (which would replay the open animation).
+ * The view is keyed on `connector.slug` so picking a different connector while
+ * the modal stays open resets the tab without replaying the open animation.
  */
 export declare function ConnectorModal({ projectId, connector, canWrite, open, isResolving, onOpenChange, onChanged, onRemoved, }: ConnectorModalProps): import("react").JSX.Element;
 export {};

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

@@ -1,117 +1,34 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from '../../../i18n/index.js';
-import { listPipedreamApps } from '@kortix/sdk';
-import { KeyIcon, PlusIcon } from '@phosphor-icons/react';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
-import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
-import { Badge } from '../../../primitives/badge.js';
 import { Button } from '../../../primitives/button.js';
-import { InfoBanner } from '../../../primitives/info-banner.js';
-import Loading from '../../../primitives/loading.js';
-import { Modal, ModalBody, ModalClose, ModalContent, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
+import { Modal, ModalClose, ModalContent, ModalTitle } from '../../../primitives/modal.js';
 import { Skeleton } from '../../../primitives/skeleton.js';
-import { Tabs, TabsList, TabsTrigger } from '../../../primitives/tabs.js';
-import { ComputerConnectModal } from '../../../internal/tunnel/computer-connect.js';
-import { SetCredentialModal } from '../../sections/connectors-view.js';
-import { ConnectorAppIcon, ConnectorStatusBadge, } from '../connector-identity.js';
-import { cn } from '../../../internal/lib/utils.js';
-import { ButtonGroup } from '../../../primitives/button-group.js';
 import { Close } from '../../../icons/close.js';
-import { foldKey } from '../catalog/catalog-entry.js';
-import { ConnectorDetailTabs } from './connector-detail-tabs.js';
-import { CONNECTOR_TAB_LABEL_KEY, connectorTabs } from './connector-tabs.js';
-import { useConnectorEventTriggers } from './connector-triggers.js';
-import { useConnectorDetail } from './use-connector-detail.js';
+import { ConnectorDetailView } from './connector-page.js';
+/** The scroll column inside the modal: the page's column, tighter. */
+const MODAL_COLUMN = 'w-full space-y-6 px-6 py-6';
 /**
- * Connector detail — header identity + tab nav + content pane.
+ * One connector over the agent editor, without leaving it (a navigation would
+ * drop the agent's unsaved draft). The body IS the connector page
+ * (`ConnectorDetailView`): the same header, status strip, notice, tabs and
+ * split credential sheet, so the modal and the page cannot drift. The modal
+ * adds only a close button and keeps its tab in state instead of the URL.
  *
- * Header: icon, name, description, primary connect action.
- * Left: Accounts / Tools / Triggers / Settings nav.
- * Right: the active tab.
- *
- * `ConnectorModalBody` is keyed on `connector.slug` so picking a different card
- * while the modal stays open resets the active tab without remounting
- * `Modal`/`ModalContent` (which would replay the open animation).
+ * The view is keyed on `connector.slug` so picking a different connector while
+ * the modal stays open resets the tab without replaying the open animation.
  */
 export function ConnectorModal({ projectId, connector, canWrite, open, isResolving = false, onOpenChange, onChanged, onRemoved, }) {
-    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "bg-popover h-[80vh] space-y-0 lg:max-w-6xl", "aria-describedby": undefined, showCloseButton: false, children: connector ? (_jsx(ConnectorModalBody, { projectId: projectId, connector: connector, canWrite: canWrite, onChanged: onChanged, onRemoved: onRemoved }, connector.slug)) : isResolving ? (_jsx(ConnectorModalSkeleton, {})) : null }) }));
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "bg-background flex max-h-[92vh] min-h-[85vh] flex-col space-y-0 overflow-hidden p-0 lg:max-w-5xl", "aria-describedby": undefined, showCloseButton: false, children: connector ? (_jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsx(ConnectorDetailView, { projectId: projectId, connector: connector, canWrite: canWrite, onChanged: onChanged, onRemoved: onChanged, onLeave: onRemoved, urlState: false, columnClassName: MODAL_COLUMN, wrapTitle: (title) => _jsx(ModalTitle, { asChild: true, children: title }), headerEnd: _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon-sm", className: "shrink-0", "aria-label": tI18nComplete.raw('text7d9eb7acb13e'), children: _jsx(Close, { className: "text-foreground size-4 stroke-1" }) }) }) }, connector.slug) })) : isResolving ? (_jsx(ConnectorModalSkeleton, {})) : null }) }));
 }
 /**
- * The shell, while `?c=<slug>` is resolving against a list that has not
- * arrived. Shape-matched to `ConnectorModalBody` — same header height, same
- * left rail width — so the handover fills the placeholders in place instead of
- * relaying the modal out from under the pointer.
- *
- * The `ModalTitle` is real and visually hidden: Radix's Dialog needs an
- * accessible name at all times, and a screen reader announcing "Loading
- * connector" is the honest answer during this window.
+ * The shell while the selection resolves. Shape-matched to the view — icon and
+ * name, the strip, the tabs, two rows — so the handover fills it in place.
+ * The visually hidden title gives the dialog its accessible name meanwhile.
  */
 function ConnectorModalSkeleton() {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "flex-row items-start gap-2.5 border-b pb-4", children: [_jsx(VisuallyHidden, { children: _jsx(ModalTitle, { children: tI18nComplete.raw('text0c21b0363778') }) }), _jsx("span", { className: "p-1", children: _jsx(Skeleton, { className: "size-10 rounded-md" }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-2 pt-1", children: [_jsx(Skeleton, { className: "h-4 w-40 rounded-sm" }), _jsx(Skeleton, { className: "h-3 w-64 rounded-sm" })] })] }), _jsx(ModalBody, { className: "max-h-[70vh] overflow-hidden p-0", children: _jsxs("div", { className: "flex min-h-0 flex-col lg:h-[70vh] lg:flex-row", children: [_jsx("div", { className: "lg:border-border shrink-0 gap-1 p-3 lg:h-full lg:w-64 lg:border-r", children: _jsx("div", { className: "hidden space-y-1.5 lg:block", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { className: "h-9 w-full rounded-md" }, i))) }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-3 px-5 py-4 lg:px-6", children: [_jsx(Skeleton, { className: "h-5 w-32 rounded-sm" }), _jsx(Skeleton, { className: "h-20 w-full rounded-md" }), _jsx(Skeleton, { className: "h-20 w-full rounded-md" })] })] }) })] }));
-}
-function ConnectorModalBody({ projectId, connector, canWrite, onChanged, onRemoved, }) {
-    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    const { displayName, isManagedProvider, isChannel, isComputer, connectionsQuery, connected, canManageConnections, headerCta, connectPending, refreshAccounts, replaceSoleAccount, startPrivateSession, credentialTarget, setCredentialTarget, computerOpen, setComputerOpen, } = useConnectorDetail({ projectId, connector, canWrite, onChanged });
-    // Opens the account list's "Add account" dialog: name and who may use it.
-    const [addRequest, setAddRequest] = useState(0);
-    const tSharing = useTranslations('accessSharing');
-    const isPipedream = connector.provider === 'pipedream';
-    const eventTriggers = useConnectorEventTriggers(projectId, connector);
-    const tabs = connectorTabs(connector, { canWrite, hasEvents: eventTriggers.hasEvents });
-    const [selectedTab, setSelectedTab] = useState('accounts');
-    const tab = tabs.includes(selectedTab) ? selectedTab : (tabs[0] ?? 'accounts');
-    // Best-effort catalogue description. Never blocks first paint — the header
-    // renders without it, then fills in. That is the main open-latency fix:
-    // previously this query sat in the critical path of feeling "ready".
-    const appDescriptionQuery = useQuery({
-        queryKey: ['connector-app-description', projectId, connector.slug, displayName],
-        queryFn: async () => {
-            const result = await listPipedreamApps(projectId, displayName);
-            const match = result.apps.find((app) => foldKey(app.slug) === foldKey(connector.slug) ||
-                foldKey(app.name) === foldKey(displayName));
-            return match?.description ?? null;
-        },
-        enabled: isPipedream,
-        staleTime: 5 * 60_000,
-    });
-    const appDescription = isPipedream ? (appDescriptionQuery.data ?? null) : null;
-    const addAccountMenu = isComputer ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: () => setComputerOpen(true), children: [_jsx(PlusIcon, { className: "size-4 shrink-0", weight: "bold" }), tI18nComplete.raw('text1a2303ede074')] })) : (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: () => {
-            setSelectedTab('accounts');
-            setAddRequest((n) => n + 1);
-        }, disabled: connectPending, children: [_jsx(PlusIcon, { className: "size-4 shrink-0", weight: "bold" }), tSharing('addAccount')] }));
-    return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { className: "flex-row items-start gap-2.5 border-b pb-4", children: [_jsx("span", { className: "p-1", children: _jsx(ConnectorAppIcon, { connector: connector, size: "lg" }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [_jsx(ModalTitle, { className: "truncate text-lg font-semibold", children: displayName }), _jsx(ConnectorStatusBadge, { connector: connector })] }), appDescription ? (_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: appDescription })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(ButtonGroup, { className: "shrink-0", children: [headerCta === 'connect' ? addAccountMenu : null, headerCta === 'finish' ? (_jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5 active:scale-[0.96]", onClick: () => setSelectedTab('accounts'), children: [_jsx(KeyIcon, { className: "size-4 shrink-0" }), isManagedProvider
-                                                ? tI18nComplete.raw('text1a2303ede074')
-                                                : tI18nComplete.raw('text3d6627454174')] })) : null, headerCta === 'replace' ? (_jsxs(Button, { size: "sm", variant: "outline", className: "gap-1.5 active:scale-[0.96]", onClick: replaceSoleAccount, disabled: connectPending, children: [isManagedProvider ? (connectPending ? (_jsx(Loading, { className: "size-4 shrink-0" })) : null) : (_jsx(KeyIcon, { className: "size-4 shrink-0" })), isManagedProvider
-                                                ? tI18nComplete.raw('textbf8a9eab9e7e')
-                                                : tI18nComplete.raw('text54483ce856e0')] })) : null] }), _jsx(ModalClose, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "size-8 shrink-0 rounded-md", "aria-label": tI18nComplete.raw('text7d9eb7acb13e'), children: _jsx(Close, { className: "text-foreground size-4 stroke-1" }) }) })] })] }), _jsxs(ModalBody, { className: "flex max-h-[70vh] flex-col overflow-hidden p-0", children: [!connected && !isChannel && !isComputer && connectionsQuery.isSuccess ? (_jsx(InfoBanner, { tone: "warning", title: tI18nComplete('text6506d9ea4341', { value0: displayName }), className: "shrink-0 rounded-none border-x-0 border-t-0", action: headerCta === 'connect' ? (addAccountMenu) : headerCta === 'finish' ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => setSelectedTab('accounts'), children: isManagedProvider
-                                ? tI18nComplete.raw('text1a2303ede074')
-                                : tI18nComplete.raw('text3d6627454174') })) : undefined, children: canWrite
-                            ? tI18nComplete.raw('text929505ef815a')
-                            : tI18nComplete.raw('text6a05ddf8cca1') })) : null, _jsxs(Tabs, { value: tab, onValueChange: (next) => setSelectedTab(next), className: "flex min-h-0 flex-1 flex-col gap-0 overflow-y-auto lg:flex-row lg:overflow-hidden", children: [_jsx(TabsList, { type: "underline", underlineSize: "md", size: "sm", "aria-label": `${displayName} sections`, className: cn('h-auto w-full shrink-0 justify-start gap-1 rounded-none px-2', 'overflow-x-auto', 'lg:border-border lg:h-full lg:w-64 lg:flex-col lg:items-stretch lg:gap-0.5', 'lg:overflow-x-visible lg:overflow-y-auto lg:border-r lg:border-b-0 lg:p-3', 'lg:**:data-[slot=tabs-trigger]:after:hidden', 'lg:**:data-[slot=tabs-trigger]:h-auto lg:**:data-[slot=tabs-trigger]:w-full', 'lg:**:data-[slot=tabs-trigger]:justify-between lg:**:data-[slot=tabs-trigger]:rounded-md', 'lg:**:data-[slot=tabs-trigger]:px-3 lg:**:data-[slot=tabs-trigger]:py-2', 'lg:**:data-[slot=tabs-trigger]:data-[state=active]:bg-primary/6', 'lg:**:data-[slot=tabs-trigger]:data-[state=active]:font-medium', 'lg:**:data-[slot=tabs-trigger]:data-[state=inactive]:hover:bg-primary/3'), children: tabs.map((value) => (_jsxs(TabsTrigger, { value: value, className: "w-fit flex-none gap-2 px-3 py-2.5 active:scale-[0.98] lg:w-full", children: [tI18nComplete.raw(CONNECTOR_TAB_LABEL_KEY[value]), value === 'triggers' ? (_jsx(Badge, { variant: "secondary", size: "sm", children: eventTriggers.rows.length })) : null] }, value))) }), _jsx("div", { className: "bg-popover min-w-0 flex-1 overflow-hidden overflow-y-auto px-5 py-4 lg:px-6", children: _jsx(ConnectorDetailTabs, { connectionsQuery: connectionsQuery, accounts: {
-                                        projectId,
-                                        connector,
-                                        displayName,
-                                        canWrite,
-                                        canManageConnections,
-                                        onChanged,
-                                        onStartSession: startPrivateSession,
-                                        addRequest,
-                                        onAddRequestHandled: () => setAddRequest(0),
-                                        onRemoved,
-                                    }, settings: {
-                                        projectId: projectId,
-                                        connector: connector,
-                                        displayName: displayName,
-                                        onChanged: onChanged,
-                                        onRemoved: onRemoved,
-                                    } }) })] })] }), _jsx(SetCredentialModal, { projectId: projectId, connector: credentialTarget ? connector : null, connectionId: credentialTarget?.connectionId ?? null, owner: credentialTarget?.owner ?? 'me', open: credentialTarget !== null, onOpenChange: (open) => {
-                    if (!open)
-                        setCredentialTarget(null);
-                }, onSaved: () => {
-                    setCredentialTarget(null);
-                    refreshAccounts();
-                } }), isComputer ? (_jsx(ComputerConnectModal, { projectId: projectId, open: computerOpen, onOpenChange: setComputerOpen, onConnected: refreshAccounts })) : null] }));
+    return (_jsxs("div", { className: MODAL_COLUMN, "aria-busy": true, children: [_jsx(VisuallyHidden, { children: _jsx(ModalTitle, { children: tI18nComplete.raw('text0c21b0363778') }) }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Skeleton, { className: "size-9 rounded-md" }), _jsx(Skeleton, { className: "h-6 w-48 rounded-sm" })] }), _jsx(Skeleton, { className: "h-16 w-full rounded-md" }), _jsx(Skeleton, { className: "h-9 w-64 rounded-md" }), _jsx(Skeleton, { className: "h-20 w-full rounded-md" })] }));
 }

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

@@ -72,8 +72,12 @@ export function noticeButton(notice, target, managed) {
 }
 /** A failure line split for the log row: `MCP tools/list failed: HTTP 401` → `401` + `MCP tools/list failed`. */
 export function splitNoticeReason(reason) {
-    const match = /[:\s]*\bHTTP (\d{3})\b/.exec(reason);
+    const match = /\bHTTP (\d{3})\b/.exec(reason);
     if (!match)
         return { code: null, detail: reason };
-    return { code: match[1], detail: reason.replace(match[0], '').trim() };
+    // Drop the `: ` before the status with a loop: a `[:\s]*` regex prefix is quadratic on long whitespace runs.
+    let end = match.index;
+    while (end > 0 && /[:\s]/.test(reason[end - 1]))
+        end--;
+    return { code: match[1], detail: (reason.slice(0, end) + reason.slice(match.index + match[0].length)).trim() };
 }

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

@@ -1,3 +1,5 @@
+import { type AdminConnector } from '@kortix/sdk';
+import { type ReactNode } from 'react';
 /** The column `CapabilityPageShell` gives the list page beside this one. */
 /**
  * `/projects/<id>/customize/connectors/<app>/<connector>` — one connector, as
@@ -12,6 +14,34 @@ export declare function ConnectorPage({ projectId, appSegment, connectorSlug, }:
     appSegment: string;
     connectorSlug: string;
 }): import("react").JSX.Element;
+export interface ConnectorDetailViewProps {
+    projectId: string;
+    connector: AdminConnector;
+    canWrite: boolean;
+    onChanged: () => void;
+    /** The connector was deleted: refresh everything but its own queries. */
+    onRemoved: () => void;
+    /** Above the header: the page's Back link. */
+    back?: ReactNode;
+    /** At the header's right edge, after its actions: the modal's close button. */
+    headerEnd?: ReactNode;
+    /** Wraps the `h1`: the modal passes `ModalTitle asChild` for its accessible name. */
+    wrapTitle?: (title: ReactNode) => ReactNode;
+    /** The view's own connector is gone: leave it (the page routes back, the
+     *  modal closes). */
+    onLeave: () => void;
+    /** The tab and the install hand-offs live in the URL on the page. The modal
+     *  keeps its tab in state, so it never rewrites its host page's URL. */
+    urlState?: boolean;
+    /** The scroll column's classes; the modal uses tighter padding. */
+    columnClassName?: string;
+}
+/**
+ * One connector — the strip, its notice, and the Accounts / Tools / Settings
+ * tabs. The page (`/connectors/<app>/<connector>`) and the agent editor's
+ * connector modal render this same view, so the two cannot drift.
+ */
+export declare function ConnectorDetailView({ projectId, connector, canWrite, onChanged, onRemoved, back, headerEnd, wrapTitle, onLeave, urlState, columnClassName, }: ConnectorDetailViewProps): import("react").JSX.Element;
 /**
  * The strip's bottom row when something is wrong: a one-line title, the raw
  * failure as a quiet log line, and the buttons that fix it. No icon tile; the

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

@@ -99,7 +99,17 @@ export function ConnectorPage({ projectId, appSegment, connectorSlug, }) {
     }
     return (_jsx(ConnectorPageBody, { projectId: projectId, connector: connector, canWrite: canWrite, backHref: backHref, onChanged: invalidate, onRemoved: invalidateAfterRemove }, connector.slug));
 }
-function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged, onRemoved, }) {
+function ConnectorPageBody({ backHref, ...props }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const router = useUiRouter();
+    return (_jsx(ConnectorDetailView, { ...props, back: _jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: backHref, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3d2e79ebdd0')] }) }), onLeave: () => router.push(connectorsHref(props.projectId, 'connected')) }));
+}
+/**
+ * One connector — the strip, its notice, and the Accounts / Tools / Settings
+ * tabs. The page (`/connectors/<app>/<connector>`) and the agent editor's
+ * connector modal render this same view, so the two cannot drift.
+ */
+export function ConnectorDetailView({ projectId, connector, canWrite, onChanged, onRemoved, back, headerEnd, wrapTitle = (title) => title, onLeave, urlState = true, columnClassName = PAGE_COLUMN, }) {
     const t = useTranslations('connectorPages');
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const tSharing = useTranslations('accessSharing');
@@ -116,19 +126,22 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
     // The tab is in the URL, so a link opens the right one.
     const eventTriggers = useConnectorEventTriggers(projectId, connector);
     const tabs = connectorTabs(connector, { canWrite, hasEvents: eventTriggers.hasEvents });
-    const requestedTab = search?.get('tab');
+    const [localTab, setLocalTab] = useState('accounts');
+    const requestedTab = urlState ? search?.get('tab') : localTab;
     const tab = tabs.find((value) => value === requestedTab) ?? tabs[0] ?? 'accounts';
-    const setTab = (next) => replaceParams((params) => {
-        if (next === 'accounts')
-            params.delete('tab');
-        else
-            params.set('tab', next);
-    });
+    const setTab = (next) => urlState
+        ? replaceParams((params) => {
+            if (next === 'accounts')
+                params.delete('tab');
+            else
+                params.set('tab', next);
+        })
+        : setLocalTab(next);
     // The install hand-off: `?connect=<connection id>` opens credential entry
     // for that account once, then leaves the URL. The id is untrusted, so
     // `connectHandoff` opens only one of THIS connector's accounts and takes the
     // owner from the row; the URL's `owner` param is stripped, never read.
-    const connectId = search?.get('connect') ?? null;
+    const connectId = urlState ? (search?.get('connect') ?? null) : null;
     // Same cache entry as the probe in `useConnectorDetail`; read here for its
     // loading state, so a shared account is not refused before the answer lands.
     const accountId = useProjectAccountId(projectId);
@@ -195,7 +208,7 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
     };
     // Right after Install (`?add=1`): ask for the first account once, then
     // leave the URL. Adjusted during render, not in an effect.
-    const addParam = search?.get('add') === '1';
+    const addParam = urlState && search?.get('add') === '1';
     const [addHandled, setAddHandled] = useState(false);
     if (addParam && !addHandled && canWrite && !isChannel) {
         setAddHandled(true);
@@ -301,7 +314,7 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
             setCredentialTarget(null);
     };
     const addAccountControl = isComputer ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: () => setComputerOpen(true), children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tI18nComplete.raw('text1a2303ede074')] })) : (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: requestAdd, disabled: connectPending, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tSharing('addAccount')] }));
-    return (_jsxs(SplitSheet, { open: sheetOpen, onOpenChange: closeCredential, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs("div", { className: PAGE_COLUMN, children: [_jsx(Button, { asChild: true, variant: "text", size: "sm", className: "-ml-1 w-fit px-0 has-[>svg]:px-0", children: _jsxs(Link, { href: backHref, children: [_jsx(CaretLeftIcon, { className: "size-3.5 shrink-0" }), tI18nComplete.raw('textc3d2e79ebdd0')] }) }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ConnectorAppIcon, { connector: connector, size: "lg" }), _jsx("h1", { ref: headingRef, tabIndex: -1, className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: displayName })] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [isComputer && headerCta === 'connect' ? addAccountControl : null, connected ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => startPrivateSession(), children: t('newSession') })) : null] })] }), _jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [_jsx("dl", { className: "divide-border flex divide-x", children: stripCells.map((cell) => (_jsxs("div", { className: "min-w-0 flex-1 space-y-0.5 px-4 py-2.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "truncate", children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground flex min-w-0 items-center gap-1.5 truncate text-sm font-medium", children: cell.value })] }, cell.key))) }), notice.kind !== 'none' ? (_jsxs(ConnectorNoticeRow, { title: t(NOTICE_TITLE[notice.kind], { name: displayName }), detail: notice.kind === 'error' && notice.reason ? (_jsx(NoticeLogLine, { reason: notice.reason })) : (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t(notice.kind === 'needs_credential' && isManagedProvider
+    return (_jsxs(SplitSheet, { open: sheetOpen, onOpenChange: closeCredential, size: "lg", className: "flex-1", children: [_jsx(SplitSheetMain, { children: _jsxs("div", { className: columnClassName, children: [back, _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx(ConnectorAppIcon, { connector: connector, size: "lg" }), wrapTitle(_jsx("h1", { ref: headingRef, tabIndex: -1, className: "text-foreground min-w-0 text-xl font-medium text-balance wrap-break-word", children: displayName }))] }), _jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [isComputer && headerCta === 'connect' ? addAccountControl : null, connected ? (_jsx(Button, { size: "sm", variant: "outline", onClick: () => startPrivateSession(), children: t('newSession') })) : null, headerEnd] })] }), _jsxs("div", { className: "bg-popover divide-border divide-y overflow-hidden rounded-md border", children: [_jsx("dl", { className: "divide-border flex divide-x", children: stripCells.map((cell) => (_jsxs("div", { className: "min-w-0 flex-1 space-y-0.5 px-4 py-2.5", children: [_jsxs("dt", { className: "text-muted-foreground flex h-4 items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "truncate", children: cell.label }), cell.labelAddon] }), _jsx("dd", { className: "text-foreground flex min-w-0 items-center gap-1.5 truncate text-sm font-medium", children: cell.value })] }, cell.key))) }), notice.kind !== 'none' ? (_jsxs(ConnectorNoticeRow, { title: t(NOTICE_TITLE[notice.kind], { name: displayName }), detail: notice.kind === 'error' && notice.reason ? (_jsx(NoticeLogLine, { reason: notice.reason })) : (_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t(notice.kind === 'needs_credential' && isManagedProvider
                                             ? 'noticeReconnectBody'
                                             : NOTICE_BODY[notice.kind], { name: displayName }) })), children: [notice.kind === 'error' && canWrite ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "gap-1.5", onClick: () => retry.mutate(), disabled: retry.isPending, children: [retry.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text942087cc2d41')] })) : null, fix?.kind === 'add_account' ? (addAccountControl) : fix?.kind === 'sign_in' ? (_jsxs(Button, { size: "sm", className: "gap-1.5", onClick: runFix, disabled: signIn.isPending, children: [signIn.isPending ? _jsx(SessionDotMatrix, { size: 14, className: "shrink-0" }) : null, t('noticeSignInAction')] })) : fix ? (
                                         // Fix it here: credential entry for a direct account, the
@@ -321,7 +334,7 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
                                         onStartSession: startPrivateSession,
                                         addRequest,
                                         onAddRequestHandled: () => setAddRequest(0),
-                                        onRemoved: () => router.push(connectorsHref(projectId, 'connected')),
+                                        onRemoved: onLeave,
                                         onSetCredential: setCredentialTarget,
                                         onConnect: needsSignIn ? connectAccount : undefined,
                                         showAccountInfo: true,
@@ -331,7 +344,7 @@ function ConnectorPageBody({ projectId, connector, canWrite, backHref, onChanged
                                         displayName: displayName,
                                         onChanged: onChanged,
                                         onRemoved: () => {
-                                            router.push(connectorsHref(projectId, 'connected'));
+                                            onLeave();
                                             onRemoved();
                                         },
                                     } })] })] }) }), credentialTarget ? (

package/dist/customize/providers/provider-accordion.js

@@ -217,6 +217,7 @@ export function ProviderAccordion({ projectId, canWrite = false, enabled = true,
             connectedIds,
             search,
         });
+        const disabledProviders = new Set(access.data?.enforced === true ? access.data.disabledProviders : []);
         const rows = ordered.map((entry) => {
             const method = providerMethod(entry);
             return {
@@ -233,7 +234,7 @@ export function ProviderAccordion({ projectId, canWrite = false, enabled = true,
                         ? 'connected'
                         : 'none',
                 via: connectedVia(entry.id, connectedIds),
-                disabled: access.data?.enforced === true && access.data.disabledProviders.includes(entry.id),
+                disabled: disabledProviders.has(entry.id),
             };
         });
         return {

package/dist/customize/providers/provider-connect.js

@@ -235,6 +235,7 @@ export function ProviderConnect({ projectId, canWrite = false, enabled = true, s
             connectedIds,
             search,
         });
+        const disabledProviders = new Set(access.data?.enforced === true ? access.data.disabledProviders : []);
         const rows = ordered.map((entry) => {
             const method = providerMethod(entry);
             return {
@@ -252,7 +253,7 @@ export function ProviderConnect({ projectId, canWrite = false, enabled = true, s
                         ? 'connected'
                         : 'none',
                 via: connectedVia(entry.id, connectedIds),
-                disabled: access.data?.enforced === true && access.data.disabledProviders.includes(entry.id),
+                disabled: disabledProviders.has(entry.id),
             };
         });
         return {

package/dist/customize/sections/component/telegram-channel-row.js

@@ -56,7 +56,7 @@ function TelegramConnectForm({ projectId, onDone }) {
 function TelegramUsersForm({ projectId, initial, onDone, }) {
     const t = useTranslations('hardcodedUi.i18nComplete');
     const save = useSetTelegramAllowedUsers();
-    const [users, setUsers] = useState(initial.join(', '));
+    const [users, setUsers] = useState(() => initial.join(', '));
     const ids = parseTelegramUserIds(users);
     return (_jsxs("form", { className: "space-y-4", onSubmit: (event) => {
             event.preventDefault();

package/dist/customize/sections/connector-connection-modal.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations as useI18nTranslations } from '../../i18n/index.js';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Button } from '../../primitives/button.js';
 import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../primitives/disclosure.js';
 import { Field, FieldDescription, FieldGroup, FieldLabel } from '../../primitives/field.js';
@@ -35,14 +35,16 @@ export function ConnectorConnectionModal({ open, idPrefix, title, initialName, i
     const [slug, setSlug] = useState(initialSlug);
     const [slugEdited, setSlugEdited] = useState(false);
     const [optionsOpen, setOptionsOpen] = useState(false);
-    useEffect(() => {
-        if (!open)
-            return;
-        setName(proposedName);
-        setSlug(initialSlug);
-        setSlugEdited(false);
-        setOptionsOpen(false);
-    }, [proposedName, initialSlug, open]);
+    const [resetFor, setResetFor] = useState(null);
+    if (!resetFor || resetFor[0] !== proposedName || resetFor[1] !== initialSlug || resetFor[2] !== open) {
+        setResetFor([proposedName, initialSlug, open]);
+        if (open) {
+            setName(proposedName);
+            setSlug(initialSlug);
+            setSlugEdited(false);
+            setOptionsOpen(false);
+        }
+    }
     const slugAvailable = isConnectorConnectionSlugAvailable(slug, existingSlugs);
     const slugInvalid = slug.length > 0 && !slugAvailable;
     const slugDescriptionId = `${idPrefix}-slug-description`;