@jini-ai/ui 0.5.5 → 0.6.10

package/dist/features/connectors/ConnectorsBrowser.js

@@ -4,9 +4,6 @@ import { agentSubHandle } from '@jini-ai/agentic';
 import { useT } from '../i18n/index.js';
 import { AUTHORIZATION_CANCEL_FAILED_MESSAGE, DEFAULT_PROVIDER_TAB_ID, DEFAULT_PROVIDER_TABS, } from './constants.js';
 import { connectorPanelAlerts, scopeConnectorsToProvider, sortConnectorsForSearch, } from './rules.js';
-import { useConnectorCatalog } from './hooks/useConnectorCatalog.js';
-import { useConnectorAuthorization } from './hooks/useConnectorAuthorization.js';
-import { useConnectorDetail } from './hooks/useConnectorDetail.js';
 import { useWiredConnectorsBrowser } from './hooks/useWiredConnectorsBrowser.js';
 import { CenteredLoader } from '../../react/components/Loading.js';
 import { ProviderTabBar } from './components/ProviderTabBar.js';
@@ -14,6 +11,18 @@ import { ConnectorSearchBar } from './components/ConnectorSearchBar.js';
 import { ConnectorAlertList } from './components/ConnectorAlertList.js';
 import { ConnectorGrid } from './components/ConnectorGrid.js';
 import { ConnectorDetailDrawer } from './components/ConnectorDetailDrawer.js';
+/** `{ agentHandle }` for a child derived from the browser's own handle, or `{}` when the host published none. */
+function subHandleProp({ base, action }) {
+    return base ? { agentHandle: agentSubHandle({ base, action }) } : {};
+}
+/** The detail drawer for the connector currently opened, or nothing when none is. */
+function ConnectorsDetailPane({ detail, authorization, unlocked, actions, getCategoryLabel, getDisplayableAccountLabel, agentHandle, }) {
+    const connector = detail.detailConnector;
+    if (!connector)
+        return null;
+    const { pendingConnectorAction } = authorization;
+    return (_jsx(ConnectorDetailDrawer, { connector: connector, disabled: !unlocked, pendingAction: pendingConnectorAction?.connectorId === connector.id ? pendingConnectorAction.action : null, authorizationPending: authorization.pending[connector.id], authorizationCancelFailed: authorization.cancelFailed[connector.id] === true, authorizationError: authorization.authError[connector.id] ?? null, toolsPreviewLoading: detail.toolPreviewLoading, toolsLoaded: detail.toolsLoaded, onClose: detail.closeDetails, ...actions, onLoadMoreTools: (connectorId, cursor) => void detail.loadMoreTools(connectorId, cursor), ...(getCategoryLabel ? { getCategoryLabel } : {}), ...(getDisplayableAccountLabel ? { getDisplayableAccountLabel } : {}), ...subHandleProp({ base: agentHandle, action: 'detail' }) }));
+}
 /**
  * Connector cards + search — an OAuth integration marketplace UI. Owns its
  * own data lifecycle: fetches the catalog on mount, lazily enriches once
@@ -21,7 +30,7 @@ import { ConnectorDetailDrawer } from './components/ConnectorDetailDrawer.js';
  * messages. Ported from OD's `ConnectorsBrowser.tsx` — see
  * `packages/ui/source-map.md` for full provenance.
  */
-export function ConnectorsBrowser({ unlocked, providerTabs = DEFAULT_PROVIDER_TABS, catalogRefreshKey = 0, dependencies, getCategoryLabel, getDisplayableAccountLabel, gate, onProviderTabClick, onConnectorAuthResult, onConnectorsChanged, useConnectorCatalog: useConnectorCatalogHook = useConnectorCatalog, useConnectorAuthorization: useConnectorAuthorizationHook = useConnectorAuthorization, useConnectorDetail: useConnectorDetailHook = useConnectorDetail, agentHandle, }) {
+export function ConnectorsBrowser({ unlocked, providerTabs = DEFAULT_PROVIDER_TABS, catalogRefreshKey, dependencies, getCategoryLabel, getDisplayableAccountLabel, gate, onProviderTabClick, onConnectorAuthResult, onConnectorsChanged, useConnectorCatalog, useConnectorAuthorization, useConnectorDetail, agentHandle, }) {
     const t = useT();
     const [filter, setFilter] = useState('');
     const [selectedProvider, setSelectedProvider] = useState(providerTabs[0]?.id ?? DEFAULT_PROVIDER_TAB_ID);
@@ -34,16 +43,15 @@ export function ConnectorsBrowser({ unlocked, providerTabs = DEFAULT_PROVIDER_TA
         dependencies,
         unlocked,
         catalogRefreshKey,
-        ...(onConnectorsChanged ? { onConnectorsChanged } : {}),
-        ...(onConnectorAuthResult ? { onConnectorAuthResult } : {}),
-        useConnectorCatalog: useConnectorCatalogHook,
-        useConnectorAuthorization: useConnectorAuthorizationHook,
-        useConnectorDetail: useConnectorDetailHook,
+        onConnectorsChanged,
+        onConnectorAuthResult,
+        useConnectorCatalog,
+        useConnectorAuthorization,
+        useConnectorDetail,
     });
     const providerScopedConnectors = useMemo(() => scopeConnectorsToProvider(catalog.connectors, providerTabs, selectedProvider), [catalog.connectors, providerTabs, selectedProvider]);
     const filteredConnectors = useMemo(() => sortConnectorsForSearch(providerScopedConnectors, filter), [providerScopedConnectors, filter]);
-    const hasQuery = filter.trim().length > 0;
-    const hasNoResults = hasQuery && filteredConnectors.length === 0;
+    const hasNoResults = filter.trim().length > 0 && filteredConnectors.length === 0;
     const alerts = useMemo(() => connectorPanelAlerts(catalog.connectors, detail.detailConnectorId, authorization.authError, authorization.cancelFailed, t(AUTHORIZATION_CANCEL_FAILED_MESSAGE)), [catalog.connectors, detail.detailConnectorId, authorization.authError, authorization.cancelFailed, t]);
     const handleProviderTabSelect = useCallback((id) => {
         onProviderTabClick?.('provider_chip');
@@ -53,8 +61,12 @@ export function ConnectorsBrowser({ unlocked, providerTabs = DEFAULT_PROVIDER_TA
         onProviderTabClick?.('gate_card');
         gate?.onClick?.();
     }, [onProviderTabClick, gate]);
-    return (_jsxs("div", { className: "tab-panel connectors-panel connectors-panel-embedded", children: [_jsxs("div", { className: "tab-panel-toolbar", children: [_jsx("div", { className: "toolbar-left connectors-heading", children: _jsxs("div", { children: [_jsx("h2", { children: t('Connectors') }), _jsx("p", { children: t('Connect third-party tools and services.') })] }) }), _jsxs("div", { className: "toolbar-right", children: [_jsx(ProviderTabBar, { tabs: providerTabs, selectedId: selectedProvider, onSelect: handleProviderTabSelect, ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'provider' }) } : {}) }), _jsx(ConnectorSearchBar, { value: filter, onChange: setFilter, disabled: !unlocked, onFocus: () => onProviderTabClick?.('search_connectors'), ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'search' }) } : {}) })] })] }), _jsx(ConnectorAlertList, { alerts: alerts, onOpenDetails: detail.openDetails }), catalog.loading ? (_jsx(CenteredLoader, { label: t('Loading…') })) : (_jsx(ConnectorGrid, { connectors: filteredConnectors, locked: !unlocked, hasNoResults: hasNoResults, searchQuery: filter, pendingConnectorAction: authorization.pendingConnectorAction, authorizationPending: authorization.pending, authorizationCancelFailed: authorization.cancelFailed, toolsLoaded: catalog.enriched, onConnect: (connectorId) => void authorization.runConnectorAction(connectorId, 'connect'), onDisconnect: (connectorId) => void authorization.runConnectorAction(connectorId, 'disconnect'), onCancelAuthorization: (connectorId) => void authorization.cancelAuthorization(connectorId), onOpenDetails: detail.openDetails, onOpenExternalUrl: (url) => void deps.data.openExternalUrl(url), ...(getCategoryLabel ? { getCategoryLabel } : {}), onClearSearch: () => setFilter(''), ...(gate ? { gate: { ...gate, onClick: handleGateClick } } : {}), ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'connector' }) } : {}) })), detail.detailConnector ? (_jsx(ConnectorDetailDrawer, { connector: detail.detailConnector, disabled: !unlocked, pendingAction: authorization.pendingConnectorAction?.connectorId === detail.detailConnector.id
-                    ? authorization.pendingConnectorAction.action
-                    : null, authorizationPending: authorization.pending[detail.detailConnector.id], authorizationCancelFailed: authorization.cancelFailed[detail.detailConnector.id] === true, authorizationError: authorization.authError[detail.detailConnector.id] ?? null, toolsPreviewLoading: detail.toolPreviewLoading, toolsLoaded: detail.toolsLoaded, onClose: detail.closeDetails, onConnect: (connectorId) => void authorization.runConnectorAction(connectorId, 'connect'), onDisconnect: (connectorId) => void authorization.runConnectorAction(connectorId, 'disconnect'), onCancelAuthorization: (connectorId) => void authorization.cancelAuthorization(connectorId), onLoadMoreTools: (connectorId, cursor) => void detail.loadMoreTools(connectorId, cursor), onOpenExternalUrl: (url) => void deps.data.openExternalUrl(url), ...(getCategoryLabel ? { getCategoryLabel } : {}), ...(getDisplayableAccountLabel ? { getDisplayableAccountLabel } : {}), ...(agentHandle ? { agentHandle: agentSubHandle({ base: agentHandle, action: 'detail' }) } : {}) })) : null] }));
+    const actions = {
+        onConnect: (connectorId) => void authorization.runConnectorAction(connectorId, 'connect'),
+        onDisconnect: (connectorId) => void authorization.runConnectorAction(connectorId, 'disconnect'),
+        onCancelAuthorization: (connectorId) => void authorization.cancelAuthorization(connectorId),
+        onOpenExternalUrl: (url) => void deps.data.openExternalUrl(url),
+    };
+    return (_jsxs("div", { className: "tab-panel connectors-panel connectors-panel-embedded", children: [_jsxs("div", { className: "tab-panel-toolbar", children: [_jsx("div", { className: "toolbar-left connectors-heading", children: _jsxs("div", { children: [_jsx("h2", { children: t('Connectors') }), _jsx("p", { children: t('Connect third-party tools and services.') })] }) }), _jsxs("div", { className: "toolbar-right", children: [_jsx(ProviderTabBar, { tabs: providerTabs, selectedId: selectedProvider, onSelect: handleProviderTabSelect, ...subHandleProp({ base: agentHandle, action: 'provider' }) }), _jsx(ConnectorSearchBar, { value: filter, onChange: setFilter, disabled: !unlocked, onFocus: () => onProviderTabClick?.('search_connectors'), ...subHandleProp({ base: agentHandle, action: 'search' }) })] })] }), _jsx(ConnectorAlertList, { alerts: alerts, onOpenDetails: detail.openDetails }), catalog.loading ? (_jsx(CenteredLoader, { label: t('Loading…') })) : (_jsx(ConnectorGrid, { connectors: filteredConnectors, locked: !unlocked, hasNoResults: hasNoResults, searchQuery: filter, pendingConnectorAction: authorization.pendingConnectorAction, authorizationPending: authorization.pending, authorizationCancelFailed: authorization.cancelFailed, toolsLoaded: catalog.enriched, ...actions, onOpenDetails: detail.openDetails, ...(getCategoryLabel ? { getCategoryLabel } : {}), onClearSearch: () => setFilter(''), ...(gate ? { gate: { ...gate, onClick: handleGateClick } } : {}), ...subHandleProp({ base: agentHandle, action: 'connector' }) })), _jsx(ConnectorsDetailPane, { detail: detail, authorization: authorization, unlocked: unlocked, actions: actions, getCategoryLabel: getCategoryLabel, getDisplayableAccountLabel: getDisplayableAccountLabel, agentHandle: agentHandle })] }));
 }
 //# sourceMappingURL=ConnectorsBrowser.js.map

package/dist/features/connectors/components/ConnectorCard.js

@@ -1,25 +1,77 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { agentHandleProps } from '@jini-ai/agentic';
 import { useT } from '../../i18n/index.js';
-import { getConnectorDisplayToolCount, statusLabel, toolsBadgeTranslation } from '../rules.js';
+import { connectorActionFlags, getConnectorDisplayToolCount, statusLabel, toolsBadgeTranslation } from '../rules.js';
 import { Icon } from '../../../react/components/Icon.js';
 import { ConnectorLogo } from './ConnectorLogo.js';
-export function ConnectorCard({ connector, disabled = false, pendingAction, authorizationPending, authorizationCancelFailed, toolsLoaded, onConnect, onDisconnect, onCancelAuthorization, onOpenDetails, getCategoryLabel = (category) => category, cancelFailedMessage, continueInBrowserLabel, onOpenExternalUrl, agentHandle, }) {
+function stopPropagation(event) {
+    event.stopPropagation();
+}
+/** Click handler for a card action: stops the click from also opening the card's details, then acts. */
+function stopThen(onActivate) {
+    return (event) => {
+        stopPropagation(event);
+        onActivate();
+    };
+}
+function ConnectorCardTitleDot({ status, isAuthorizationPending }) {
+    const t = useT();
+    if (status === 'connected') {
+        return (_jsx("span", { className: `connector-status-dot connector-card-title-dot status-${status}`, "aria-label": t(statusLabel(status)), title: t(statusLabel(status)), role: "img" }));
+    }
+    if (!isAuthorizationPending)
+        return null;
+    return (_jsx("span", { className: "connector-status-dot connector-card-title-dot status-pending", "aria-label": t('Authorization pending'), title: t('Authorization pending'), role: "img" }));
+}
+function ConnectorCardToolsBadge({ connector, toolsLoaded }) {
     const t = useT();
-    const resolvedCancelFailedMessage = cancelFailedMessage ?? t("Couldn't cancel authorization. Try again.");
-    const resolvedContinueInBrowserLabel = continueInBrowserLabel ?? t('Continue in browser');
-    const isConnecting = pendingAction === 'connect';
-    const isDisconnecting = pendingAction === 'disconnect';
-    const isConnected = connector.status === 'connected';
-    const isAuthorizationPending = !isConnected && authorizationPending !== undefined;
-    const isPending = pendingAction !== null || isAuthorizationPending;
-    const canConnect = !disabled && !isPending && connector.status === 'available';
-    const canDisconnect = !disabled && !isPending && isConnected;
-    const toolCount = getConnectorDisplayToolCount(connector);
     const showToolsBadge = connector.toolCount !== undefined || connector.tools.length > 0 || toolsLoaded;
-    const toolsBadge = toolsBadgeTranslation(toolCount);
+    const toolsBadge = toolsBadgeTranslation(getConnectorDisplayToolCount(connector));
     const toolsBadgeLabel = t(toolsBadge.key, toolsBadge.vars);
+    return (_jsx("span", { className: "connector-meta-tools", "aria-hidden": !showToolsBadge, children: showToolsBadge ? (_jsx("span", { className: "connector-tools-badge is-ready", title: toolsBadgeLabel, children: _jsx("span", { children: toolsBadgeLabel }) })) : null }));
+}
+function ConnectorDisconnectButton({ flags, disabled, agentHandle, onActivate }) {
+    const t = useT();
+    const { isDisconnecting } = flags;
+    return (_jsx("button", { type: "button", className: `icon-only connector-action is-disconnect${isDisconnecting ? ' is-loading' : ''}`, disabled: !flags.canDisconnect, "aria-busy": isDisconnecting || undefined, "aria-label": t('Disconnect'), title: t('Disconnect'), tabIndex: disabled ? -1 : undefined, onMouseDown: stopPropagation, onKeyDown: stopPropagation, onClick: stopThen(onActivate), ...agentHandleProps({}, { base: agentHandle, action: 'disconnect', role: 'button', label: t('Disconnect') }), children: _jsx(Icon, { name: isDisconnecting ? 'spinner' : 'close', size: 12 }) }));
+}
+function ConnectorConnectButton({ flags, disabled, agentHandle, onActivate }) {
+    const t = useT();
+    const { isAuthorizationPending } = flags;
+    const isBusy = flags.isConnecting || isAuthorizationPending;
+    return (_jsx("button", { type: "button", className: `icon-only connector-action is-connect${isBusy ? ' is-loading' : ''}`, disabled: !flags.canConnect, "aria-busy": isBusy || undefined, "aria-label": isAuthorizationPending ? t('Authorization pending') : t('Connect'), title: isAuthorizationPending ? t('Authorization in progress') : t('Connect'), tabIndex: disabled ? -1 : undefined, onMouseDown: stopPropagation, onKeyDown: stopPropagation, onClick: stopThen(onActivate), ...agentHandleProps({}, { base: agentHandle, action: 'connect', role: 'button', label: t('Connect') }), children: _jsx(Icon, { name: isBusy ? 'spinner' : 'plus', size: 12 }) }));
+}
+function ConnectorCancelAuthorizationButton({ onActivate }) {
+    const t = useT();
+    return (_jsx("button", { type: "button", className: "icon-only connector-action is-cancel-authorization", "aria-label": t('Cancel authorization'), title: t('Cancel authorization'), onMouseDown: stopPropagation, onKeyDown: stopPropagation, onClick: stopThen(onActivate), children: _jsx(Icon, { name: "close", size: 12 }) }));
+}
+function ConnectorStatusPill({ status }) {
+    const t = useT();
+    if (status !== 'error' && status !== 'disabled')
+        return null;
+    return _jsx("span", { className: `connector-status-pill status-${status}`, children: t(statusLabel(status)) });
+}
+/** The cancel-failed alert and the continue-in-browser link under the card body. */
+function ConnectorCardHints({ authorizationCancelFailed, redirectUrl, cancelFailedMessage, continueInBrowserLabel, onOpenExternalUrl, }) {
+    const t = useT();
+    function continueAuthorization(event) {
+        stopPropagation(event);
+        // `continueAuthorization`'s only call site (the "continue in browser"
+        // button below) only ever renders while
+        // `isAuthorizationPending && authorizationPending.redirectUrl` already
+        // holds in that same render, and React re-binds this closure fresh on
+        // every render — so a re-check here was dead code for every real
+        // click, removed rather than tested around (see
+        // packages/ui/source-map.md's 2026-07-22 dated entry).
+        onOpenExternalUrl?.(redirectUrl);
+    }
+    return (_jsxs(_Fragment, { children: [authorizationCancelFailed ? (_jsx("p", { className: "connector-authorization-hint connector-authorization-error", role: "alert", children: cancelFailedMessage ?? t("Couldn't cancel authorization. Try again.") })) : null, redirectUrl ? (_jsx("button", { type: "button", className: "connector-authorization-link", title: t('Authorization in progress'), onClick: continueAuthorization, children: continueInBrowserLabel ?? t('Continue in browser') })) : null] }));
+}
+export function ConnectorCard({ connector, disabled = false, pendingAction, authorizationPending, authorizationCancelFailed, toolsLoaded, onConnect, onDisconnect, onCancelAuthorization, onOpenDetails, getCategoryLabel = (category) => category, cancelFailedMessage, continueInBrowserLabel, onOpenExternalUrl, agentHandle, }) {
+    const t = useT();
+    const flags = connectorActionFlags({ connector, pendingAction, authorizationPending, disabled });
     const categoryLabel = getCategoryLabel(connector.category);
+    const actionProps = { flags, disabled, agentHandle };
     function openDetails() {
         if (disabled)
             return;
@@ -33,29 +85,6 @@ export function ConnectorCard({ connector, disabled = false, pendingAction, auth
         event.preventDefault();
         openDetails();
     }
-    function stop(event) {
-        event.stopPropagation();
-    }
-    function continueAuthorization(event) {
-        stop(event);
-        // `continueAuthorization`'s only call site (the "continue in browser"
-        // button below) only ever renders while
-        // `isAuthorizationPending && authorizationPending.redirectUrl` already
-        // holds in that same render, and React re-binds this closure fresh on
-        // every render — so a re-check here was dead code for every real
-        // click, removed rather than tested around (see
-        // packages/ui/source-map.md's 2026-07-22 dated entry).
-        onOpenExternalUrl?.(authorizationPending.redirectUrl);
-    }
-    return (_jsxs("article", { className: `connector-card status-${connector.status}${disabled ? ' is-locked' : ''}`, "data-connector-id": connector.id, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, "aria-label": t('Open details for {name}', { name: connector.name }), onClick: openDetails, onKeyDown: onKeyActivate, ...agentHandleProps({}, { base: agentHandle, ...({ role: 'button', label: connector.name }) }), children: [_jsxs("div", { className: "connector-card-top", children: [_jsx(ConnectorLogo, { connectorId: connector.id, connectorName: connector.name, logoUrl: connector.logoUrl, size: "sm" }), _jsxs("div", { className: "connector-card-head", children: [_jsxs("h3", { className: "connector-card-title", children: [_jsx("span", { className: "connector-card-title-name", children: connector.name }), isConnected ? (_jsx("span", { className: `connector-status-dot connector-card-title-dot status-${connector.status}`, "aria-label": t(statusLabel(connector.status)), title: t(statusLabel(connector.status)), role: "img" })) : isAuthorizationPending ? (_jsx("span", { className: "connector-status-dot connector-card-title-dot status-pending", "aria-label": t('Authorization pending'), title: t('Authorization pending'), role: "img" })) : null] }), _jsxs("div", { className: "connector-meta", children: [_jsx("span", { className: "connector-meta-item connector-meta-category", title: categoryLabel, children: categoryLabel }), _jsx("span", { className: "connector-meta-tools", "aria-hidden": !showToolsBadge, children: showToolsBadge ? (_jsx("span", { className: "connector-tools-badge is-ready", title: toolsBadgeLabel, children: _jsx("span", { children: toolsBadgeLabel }) })) : null })] })] }), _jsxs("div", { className: "connector-card-actions", children: [isConnected ? (_jsx("button", { type: "button", className: `icon-only connector-action is-disconnect${isDisconnecting ? ' is-loading' : ''}`, disabled: !canDisconnect, "aria-busy": isDisconnecting || undefined, "aria-label": t('Disconnect'), title: t('Disconnect'), tabIndex: disabled ? -1 : undefined, onMouseDown: stop, onKeyDown: stop, onClick: (e) => {
-                                    stop(e);
-                                    onDisconnect(connector.id);
-                                }, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'disconnect', role: 'button', label: t('Disconnect') }) }), children: _jsx(Icon, { name: isDisconnecting ? 'spinner' : 'close', size: 12 }) })) : (_jsx("button", { type: "button", className: `icon-only connector-action is-connect${isConnecting || isAuthorizationPending ? ' is-loading' : ''}`, disabled: !canConnect, "aria-busy": isConnecting || isAuthorizationPending || undefined, "aria-label": isAuthorizationPending ? t('Authorization pending') : t('Connect'), title: isAuthorizationPending ? t('Authorization in progress') : t('Connect'), tabIndex: disabled ? -1 : undefined, onMouseDown: stop, onKeyDown: stop, onClick: (e) => {
-                                    stop(e);
-                                    onConnect(connector.id);
-                                }, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'connect', role: 'button', label: t('Connect') }) }), children: _jsx(Icon, { name: isConnecting || isAuthorizationPending ? 'spinner' : 'plus', size: 12 }) })), isAuthorizationPending ? (_jsx("button", { type: "button", className: "icon-only connector-action is-cancel-authorization", "aria-label": t('Cancel authorization'), title: t('Cancel authorization'), onMouseDown: stop, onKeyDown: stop, onClick: (e) => {
-                                    stop(e);
-                                    onCancelAuthorization(connector.id);
-                                }, children: _jsx(Icon, { name: "close", size: 12 }) })) : null, connector.status === 'error' || connector.status === 'disabled' ? (_jsx("span", { className: `connector-status-pill status-${connector.status}`, children: t(statusLabel(connector.status)) })) : null] })] }), authorizationCancelFailed ? (_jsx("p", { className: "connector-authorization-hint connector-authorization-error", role: "alert", children: resolvedCancelFailedMessage })) : null, isAuthorizationPending && authorizationPending.redirectUrl ? (_jsx("button", { type: "button", className: "connector-authorization-link", title: t('Authorization in progress'), onClick: continueAuthorization, children: resolvedContinueInBrowserLabel })) : null] }));
+    return (_jsxs("article", { className: `connector-card status-${connector.status}${disabled ? ' is-locked' : ''}`, "data-connector-id": connector.id, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, "aria-label": t('Open details for {name}', { name: connector.name }), onClick: openDetails, onKeyDown: onKeyActivate, ...agentHandleProps({}, { base: agentHandle, role: 'button', label: connector.name }), children: [_jsxs("div", { className: "connector-card-top", children: [_jsx(ConnectorLogo, { connectorId: connector.id, connectorName: connector.name, logoUrl: connector.logoUrl, size: "sm" }), _jsxs("div", { className: "connector-card-head", children: [_jsxs("h3", { className: "connector-card-title", children: [_jsx("span", { className: "connector-card-title-name", children: connector.name }), _jsx(ConnectorCardTitleDot, { status: connector.status, isAuthorizationPending: flags.isAuthorizationPending })] }), _jsxs("div", { className: "connector-meta", children: [_jsx("span", { className: "connector-meta-item connector-meta-category", title: categoryLabel, children: categoryLabel }), _jsx(ConnectorCardToolsBadge, { connector: connector, toolsLoaded: toolsLoaded })] })] }), _jsxs("div", { className: "connector-card-actions", children: [flags.isConnected ? (_jsx(ConnectorDisconnectButton, { ...actionProps, onActivate: () => onDisconnect(connector.id) })) : (_jsx(ConnectorConnectButton, { ...actionProps, onActivate: () => onConnect(connector.id) })), flags.isAuthorizationPending ? (_jsx(ConnectorCancelAuthorizationButton, { onActivate: () => onCancelAuthorization(connector.id) })) : null, _jsx(ConnectorStatusPill, { status: connector.status })] })] }), _jsx(ConnectorCardHints, { authorizationCancelFailed: authorizationCancelFailed, redirectUrl: flags.redirectUrl, cancelFailedMessage: cancelFailedMessage, continueInBrowserLabel: continueInBrowserLabel, onOpenExternalUrl: onOpenExternalUrl })] }));
 }
 //# sourceMappingURL=ConnectorCard.js.map

package/dist/features/connectors/components/ConnectorDetailDrawer.js

@@ -2,38 +2,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef } from 'react';
 import { agentHandleProps } from '@jini-ai/agentic';
 import { useT } from '../../i18n/index.js';
-import { getConnectorDisplayToolCount, getDisplayableConnectorAccountLabel, statusLabel, toolsBadgeTranslation, } from '../rules.js';
+import { connectorActionFlags, getConnectorDisplayToolCount, getDisplayableConnectorAccountLabel, statusLabel, toolsBadgeTranslation, } from '../rules.js';
 import { Icon } from '../../../react/components/Icon.js';
 import { ConnectorLogo } from './ConnectorLogo.js';
-/**
- * Modal detail drawer with a paginated tool list. Keeps its own
- * escape-key-to-close and body-scroll-lock behavior inline (standard modal
- * a11y idioms, not business/transport logic) — see
- * `packages/ui/source-map.md`'s purity-check note for why these two
- * `document`/`window` touches were kept here rather than routed through
- * `dependencies.ts`.
- */
-export function ConnectorDetailDrawer({ connector, disabled, pendingAction, authorizationPending, authorizationCancelFailed, authorizationError, toolsPreviewLoading, toolsLoaded, onClose, onConnect, onDisconnect, onCancelAuthorization, onLoadMoreTools, onOpenExternalUrl, getCategoryLabel = (category) => category, getDisplayableAccountLabel = getDisplayableConnectorAccountLabel, cancelFailedMessage, continueInBrowserLabel, agentHandle, }) {
+function ConnectorDrawerHead({ connector, categoryLabel, isAuthorizationPending, toolsLoaded, closeBtnRef, onClose, agentHandle, }) {
     const t = useT();
-    const resolvedCancelFailedMessage = cancelFailedMessage ?? t("Couldn't cancel authorization. Try again.");
-    const resolvedContinueInBrowserLabel = continueInBrowserLabel ?? t('Continue in browser');
-    const isConnected = connector.status === 'connected';
-    const isConnecting = pendingAction === 'connect';
-    const isDisconnecting = pendingAction === 'disconnect';
-    const isAuthorizationPending = !isConnected && authorizationPending !== undefined;
-    const isPending = pendingAction !== null || isAuthorizationPending;
-    const canConnect = !disabled && !isPending && connector.status === 'available';
-    const canDisconnect = !disabled && !isPending && isConnected;
-    const accountLabel = getDisplayableAccountLabel(connector);
-    const actualToolCount = connector.tools.length;
-    const toolCount = getConnectorDisplayToolCount(connector);
-    const isLoadingTools = toolsPreviewLoading || !toolsLoaded;
-    const toolDetailsUnavailable = toolsLoaded && actualToolCount === 0 && toolCount > 0;
-    const showToolsBadge = connector.toolCount !== undefined || actualToolCount > 0 || toolsLoaded;
-    const closeBtnRef = useRef(null);
-    const categoryLabel = getCategoryLabel(connector.category);
-    const toolsBadge = toolsBadgeTranslation(toolCount);
+    const showToolsBadge = connector.toolCount !== undefined || connector.tools.length > 0 || toolsLoaded;
+    const toolsBadge = toolsBadgeTranslation(getConnectorDisplayToolCount(connector));
     const toolsBadgeLabel = t(toolsBadge.key, toolsBadge.vars);
+    const statusTone = isAuthorizationPending ? 'pending' : connector.status;
+    return (_jsxs("header", { className: "connector-drawer-head", children: [_jsx(ConnectorLogo, { connectorId: connector.id, connectorName: connector.name, logoUrl: connector.logoUrl, size: "lg" }), _jsxs("div", { className: "connector-drawer-titles", children: [_jsxs("div", { className: "connector-drawer-eyebrow", children: [_jsx("span", { children: categoryLabel }), _jsx("span", { className: "connector-meta-dot", "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: connector.provider })] }), _jsx("h2", { id: "connector-drawer-title", children: connector.name }), _jsxs("div", { className: "connector-drawer-status", children: [_jsxs("span", { className: `connector-status-pill status-${statusTone}`, children: [_jsx("span", { className: "connector-status-dot", "aria-hidden": true }), isAuthorizationPending ? t('Authorization pending') : t(statusLabel(connector.status))] }), showToolsBadge ? (_jsx("span", { className: "connector-drawer-tool-count-chip", title: toolsBadgeLabel, children: _jsx("span", { children: toolsBadgeLabel }) })) : null] })] }), _jsx("button", { ref: closeBtnRef, type: "button", className: "ghost connector-drawer-close", onClick: onClose, "aria-label": t('Close'), "data-testid": "connector-drawer-close", ...agentHandleProps({}, { base: agentHandle, action: 'close', role: 'button', label: t('Close') }), children: _jsx(Icon, { name: "close", size: 14 }) })] }));
+}
+function ConnectorDrawerAbout({ description, isAuthorizationPending, redirectUrl, continueInBrowserLabel, onOpenExternalUrl, }) {
+    const t = useT();
     function continueAuthorization(event) {
         event.stopPropagation();
         // `continueAuthorization`'s only call site (the "continue in browser"
@@ -43,8 +24,44 @@ export function ConnectorDetailDrawer({ connector, disabled, pendingAction, auth
         // re-check here was dead code for every real click, removed rather
         // than tested around (same pattern as this package's `ConnectorCard.tsx`
         // precedent; see packages/ui/source-map.md's 2026-07-22 dated entry).
-        onOpenExternalUrl?.(authorizationPending.redirectUrl);
+        onOpenExternalUrl?.(redirectUrl);
     }
+    return (_jsxs("section", { className: "connector-drawer-section", children: [_jsx("h3", { className: "connector-drawer-section-title", children: t('About') }), _jsx("p", { className: "connector-drawer-description", children: description }), isAuthorizationPending ? (_jsxs("div", { className: "connector-authorization-block", role: "status", children: [_jsx("p", { className: "connector-authorization-hint", children: t('Authorization in progress. It should finish shortly.') }), redirectUrl ? (_jsx("button", { type: "button", className: "connector-authorization-link", onClick: continueAuthorization, children: continueInBrowserLabel ?? t('Continue in browser') })) : null] })) : null] }));
+}
+function ConnectorDrawerAlert({ message }) {
+    return (_jsx("p", { className: "connector-authorization-hint connector-authorization-error", role: "alert", children: message }));
+}
+function ConnectorDrawerDetails({ connector, categoryLabel, accountLabel, flags, onDisconnect, agentHandle }) {
+    const t = useT();
+    const { isDisconnecting } = flags;
+    return (_jsxs("section", { className: "connector-drawer-section", children: [_jsxs("div", { className: "connector-drawer-section-head", children: [_jsx("h3", { className: "connector-drawer-section-title", children: t('Details') }), flags.isConnected ? (_jsxs("button", { type: "button", className: `ghost connector-drawer-inline-action connector-action is-disconnect${isDisconnecting ? ' is-loading' : ''}`, disabled: !flags.canDisconnect, "aria-busy": isDisconnecting || undefined, onClick: () => onDisconnect(connector.id), ...agentHandleProps({}, { base: agentHandle, action: 'disconnect', role: 'button', label: t('Disconnect') }), children: [isDisconnecting ? _jsx(Icon, { name: "spinner", size: 12 }) : null, _jsx("span", { children: t('Disconnect') })] })) : null] }), _jsxs("dl", { className: "connector-drawer-details", children: [_jsxs("div", { children: [_jsx("dt", { children: t('Status') }), _jsx("dd", { children: t(statusLabel(connector.status)) })] }), _jsxs("div", { children: [_jsx("dt", { children: t('Category') }), _jsx("dd", { children: categoryLabel })] }), _jsxs("div", { children: [_jsx("dt", { children: t('Provider') }), _jsx("dd", { children: connector.provider })] }), accountLabel ? (_jsxs("div", { children: [_jsx("dt", { children: t('Account') }), _jsx("dd", { children: accountLabel })] })) : null, connector.lastError ? (_jsxs("div", { className: "connector-drawer-details-error", children: [_jsx("dt", { children: t('Error') }), _jsx("dd", { children: connector.lastError })] })) : null] })] }));
+}
+function ConnectorDrawerTool({ tool }) {
+    return (_jsxs("li", { className: "connector-drawer-tool", children: [_jsxs("div", { className: "connector-drawer-tool-head", children: [_jsx("span", { className: "connector-drawer-tool-title", children: tool.title || tool.name }), _jsx("span", { className: `connector-drawer-tool-badge side-${tool.safety.sideEffect}`, title: tool.safety.reason, children: tool.safety.sideEffect })] }), tool.description ? _jsx("p", { className: "connector-drawer-tool-desc", children: tool.description }) : null, _jsx("code", { className: "connector-drawer-tool-name", children: tool.name })] }));
+}
+/** The tools section body: loading, unavailable, empty, or the list with an optional load-more. */
+function ConnectorDrawerToolsBody({ connector, toolsPreviewLoading, toolsLoaded, onLoadMoreTools }) {
+    const t = useT();
+    const actualToolCount = connector.tools.length;
+    const toolCount = getConnectorDisplayToolCount(connector);
+    if (toolsPreviewLoading || !toolsLoaded) {
+        return (_jsxs("p", { className: "connector-drawer-empty", children: [_jsx(Icon, { name: "spinner", size: 12 }), " ", t('Loading tools…')] }));
+    }
+    if (actualToolCount === 0 && toolCount > 0) {
+        return _jsx("p", { className: "connector-drawer-empty", children: t('Tool details unavailable ({count})', { count: toolCount }) });
+    }
+    if (actualToolCount === 0)
+        return _jsx("p", { className: "connector-drawer-empty", children: t('No tools available') });
+    return (_jsxs(_Fragment, { children: [_jsx("ul", { className: "connector-drawer-tools", children: connector.tools.map((tool) => (_jsx(ConnectorDrawerTool, { tool: tool }, tool.name))) }), connector.toolsNextCursor ? (_jsx("button", { type: "button", className: "ghost connector-drawer-load-more", disabled: toolsPreviewLoading, onClick: () => onLoadMoreTools(connector.id, connector.toolsNextCursor), children: _jsx("span", { children: t('Load more tools') }) })) : null] }));
+}
+function ConnectorDrawerFoot({ connectorId, flags, onConnect, onCancelAuthorization, agentHandle }) {
+    const t = useT();
+    const { isAuthorizationPending } = flags;
+    const isBusy = flags.isConnecting || isAuthorizationPending;
+    return (_jsxs("footer", { className: "connector-drawer-foot", children: [_jsxs("button", { type: "button", className: `primary connector-action is-connect${isBusy ? ' is-loading' : ''}`, disabled: !flags.canConnect, "aria-busy": isBusy || undefined, onClick: () => onConnect(connectorId), ...agentHandleProps({}, { base: agentHandle, action: 'connect', role: 'button', label: t('Connect') }), children: [isBusy ? _jsx(Icon, { name: "spinner", size: 12 }) : null, _jsx("span", { children: isAuthorizationPending ? t('Authorization pending') : t('Connect') })] }), isAuthorizationPending ? (_jsx("button", { type: "button", className: "ghost connector-action is-cancel-authorization", onClick: () => onCancelAuthorization(connectorId), ...agentHandleProps({}, { base: agentHandle, action: 'cancel-authorization', role: 'button', label: t('Cancel authorization') }), children: _jsx("span", { children: t('Cancel authorization') }) })) : null] }));
+}
+/** Escape-to-close, initial focus on the close button, and body-scroll lock for the drawer's lifetime. */
+function useDrawerModalBehavior({ onClose, closeBtnRef, }) {
     useEffect(() => {
         function onKey(e) {
             if (e.key === 'Escape') {
@@ -61,10 +78,24 @@ export function ConnectorDetailDrawer({ connector, disabled, pendingAction, auth
             document.body.style.overflow = previousOverflow;
         };
     }, [onClose]);
-    const statusTone = isAuthorizationPending ? 'pending' : connector.status;
+}
+/**
+ * Modal detail drawer with a paginated tool list. Keeps its own
+ * escape-key-to-close and body-scroll-lock behavior inline (standard modal
+ * a11y idioms, not business/transport logic) — see
+ * `packages/ui/source-map.md`'s purity-check note for why these two
+ * `document`/`window` touches were kept here rather than routed through
+ * `dependencies.ts`.
+ */
+export function ConnectorDetailDrawer({ connector, disabled, pendingAction, authorizationPending, authorizationCancelFailed, authorizationError, toolsPreviewLoading, toolsLoaded, onClose, onConnect, onDisconnect, onCancelAuthorization, onLoadMoreTools, onOpenExternalUrl, getCategoryLabel = (category) => category, getDisplayableAccountLabel = getDisplayableConnectorAccountLabel, cancelFailedMessage, continueInBrowserLabel, agentHandle, }) {
+    const t = useT();
+    const flags = connectorActionFlags({ connector, pendingAction, authorizationPending, disabled });
+    const closeBtnRef = useRef(null);
+    const categoryLabel = getCategoryLabel(connector.category);
+    useDrawerModalBehavior({ onClose, closeBtnRef });
     return (_jsx("div", { className: "connector-drawer-backdrop", role: "presentation", onMouseDown: (e) => {
             if (e.target === e.currentTarget)
                 onClose();
-        }, children: _jsxs("aside", { className: "connector-drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "connector-drawer-title", "data-testid": "connector-drawer", onClick: (e) => e.stopPropagation(), ...agentHandleProps({}, { base: agentHandle, ...({ role: 'region', label: connector.name }) }), children: [_jsxs("header", { className: "connector-drawer-head", children: [_jsx(ConnectorLogo, { connectorId: connector.id, connectorName: connector.name, logoUrl: connector.logoUrl, size: "lg" }), _jsxs("div", { className: "connector-drawer-titles", children: [_jsxs("div", { className: "connector-drawer-eyebrow", children: [_jsx("span", { children: categoryLabel }), _jsx("span", { className: "connector-meta-dot", "aria-hidden": true, children: "\u00B7" }), _jsx("span", { children: connector.provider })] }), _jsx("h2", { id: "connector-drawer-title", children: connector.name }), _jsxs("div", { className: "connector-drawer-status", children: [_jsxs("span", { className: `connector-status-pill status-${statusTone}`, children: [_jsx("span", { className: "connector-status-dot", "aria-hidden": true }), isAuthorizationPending ? t('Authorization pending') : t(statusLabel(connector.status))] }), showToolsBadge ? (_jsx("span", { className: "connector-drawer-tool-count-chip", title: toolsBadgeLabel, children: _jsx("span", { children: toolsBadgeLabel }) })) : null] })] }), _jsx("button", { ref: closeBtnRef, type: "button", className: "ghost connector-drawer-close", onClick: onClose, "aria-label": t('Close'), "data-testid": "connector-drawer-close", ...agentHandleProps({}, { base: agentHandle, ...({ action: 'close', role: 'button', label: t('Close') }) }), children: _jsx(Icon, { name: "close", size: 14 }) })] }), _jsxs("div", { className: "connector-drawer-body", children: [connector.description ? (_jsxs("section", { className: "connector-drawer-section", children: [_jsx("h3", { className: "connector-drawer-section-title", children: t('About') }), _jsx("p", { className: "connector-drawer-description", children: connector.description }), isAuthorizationPending ? (_jsxs("div", { className: "connector-authorization-block", role: "status", children: [_jsx("p", { className: "connector-authorization-hint", children: t('Authorization in progress. It should finish shortly.') }), authorizationPending.redirectUrl ? (_jsx("button", { type: "button", className: "connector-authorization-link", onClick: continueAuthorization, children: resolvedContinueInBrowserLabel })) : null] })) : null] })) : null, authorizationError ? (_jsx("p", { className: "connector-authorization-hint connector-authorization-error", role: "alert", children: authorizationError })) : null, authorizationCancelFailed ? (_jsx("p", { className: "connector-authorization-hint connector-authorization-error", role: "alert", children: resolvedCancelFailedMessage })) : null, _jsxs("section", { className: "connector-drawer-section", children: [_jsxs("div", { className: "connector-drawer-section-head", children: [_jsx("h3", { className: "connector-drawer-section-title", children: t('Details') }), isConnected ? (_jsxs("button", { type: "button", className: `ghost connector-drawer-inline-action connector-action is-disconnect${isDisconnecting ? ' is-loading' : ''}`, disabled: !canDisconnect, "aria-busy": isDisconnecting || undefined, onClick: () => onDisconnect(connector.id), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'disconnect', role: 'button', label: t('Disconnect') }) }), children: [isDisconnecting ? _jsx(Icon, { name: "spinner", size: 12 }) : null, _jsx("span", { children: t('Disconnect') })] })) : null] }), _jsxs("dl", { className: "connector-drawer-details", children: [_jsxs("div", { children: [_jsx("dt", { children: t('Status') }), _jsx("dd", { children: t(statusLabel(connector.status)) })] }), _jsxs("div", { children: [_jsx("dt", { children: t('Category') }), _jsx("dd", { children: categoryLabel })] }), _jsxs("div", { children: [_jsx("dt", { children: t('Provider') }), _jsx("dd", { children: connector.provider })] }), accountLabel ? (_jsxs("div", { children: [_jsx("dt", { children: t('Account') }), _jsx("dd", { children: accountLabel })] })) : null, connector.lastError ? (_jsxs("div", { className: "connector-drawer-details-error", children: [_jsx("dt", { children: t('Error') }), _jsx("dd", { children: connector.lastError })] })) : null] })] }), _jsxs("section", { className: "connector-drawer-section", children: [_jsxs("h3", { className: "connector-drawer-section-title", children: [t('Tools'), " ", _jsx("span", { className: "connector-drawer-count", children: toolCount })] }), isLoadingTools ? (_jsxs("p", { className: "connector-drawer-empty", children: [_jsx(Icon, { name: "spinner", size: 12 }), " ", t('Loading tools…')] })) : toolDetailsUnavailable ? (_jsx("p", { className: "connector-drawer-empty", children: t('Tool details unavailable ({count})', { count: toolCount }) })) : actualToolCount === 0 ? (_jsx("p", { className: "connector-drawer-empty", children: t('No tools available') })) : (_jsxs(_Fragment, { children: [_jsx("ul", { className: "connector-drawer-tools", children: connector.tools.map((tool) => (_jsxs("li", { className: "connector-drawer-tool", children: [_jsxs("div", { className: "connector-drawer-tool-head", children: [_jsx("span", { className: "connector-drawer-tool-title", children: tool.title || tool.name }), _jsx("span", { className: `connector-drawer-tool-badge side-${tool.safety.sideEffect}`, title: tool.safety.reason, children: tool.safety.sideEffect })] }), tool.description ? _jsx("p", { className: "connector-drawer-tool-desc", children: tool.description }) : null, _jsx("code", { className: "connector-drawer-tool-name", children: tool.name })] }, tool.name))) }), connector.toolsNextCursor ? (_jsx("button", { type: "button", className: "ghost connector-drawer-load-more", disabled: toolsPreviewLoading, onClick: () => onLoadMoreTools(connector.id, connector.toolsNextCursor), children: _jsx("span", { children: t('Load more tools') }) })) : null] }))] })] }), !isConnected ? (_jsxs("footer", { className: "connector-drawer-foot", children: [_jsxs("button", { type: "button", className: `primary connector-action is-connect${isConnecting || isAuthorizationPending ? ' is-loading' : ''}`, disabled: !canConnect, "aria-busy": isConnecting || isAuthorizationPending || undefined, onClick: () => onConnect(connector.id), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'connect', role: 'button', label: t('Connect') }) }), children: [isConnecting || isAuthorizationPending ? _jsx(Icon, { name: "spinner", size: 12 }) : null, _jsx("span", { children: isAuthorizationPending ? t('Authorization pending') : t('Connect') })] }), isAuthorizationPending ? (_jsx("button", { type: "button", className: "ghost connector-action is-cancel-authorization", onClick: () => onCancelAuthorization(connector.id), ...agentHandleProps({}, { base: agentHandle, ...({ action: 'cancel-authorization', role: 'button', label: t('Cancel authorization') }) }), children: _jsx("span", { children: t('Cancel authorization') }) })) : null] })) : null] }) }));
+        }, children: _jsxs("aside", { className: "connector-drawer", role: "dialog", "aria-modal": "true", "aria-labelledby": "connector-drawer-title", "data-testid": "connector-drawer", onClick: (e) => e.stopPropagation(), ...agentHandleProps({}, { base: agentHandle, role: 'region', label: connector.name }), children: [_jsx(ConnectorDrawerHead, { connector: connector, categoryLabel: categoryLabel, isAuthorizationPending: flags.isAuthorizationPending, toolsLoaded: toolsLoaded, closeBtnRef: closeBtnRef, onClose: onClose, agentHandle: agentHandle }), _jsxs("div", { className: "connector-drawer-body", children: [connector.description ? (_jsx(ConnectorDrawerAbout, { description: connector.description, isAuthorizationPending: flags.isAuthorizationPending, redirectUrl: flags.redirectUrl, continueInBrowserLabel: continueInBrowserLabel, onOpenExternalUrl: onOpenExternalUrl })) : null, authorizationError ? _jsx(ConnectorDrawerAlert, { message: authorizationError }) : null, authorizationCancelFailed ? (_jsx(ConnectorDrawerAlert, { message: cancelFailedMessage ?? t("Couldn't cancel authorization. Try again.") })) : null, _jsx(ConnectorDrawerDetails, { connector: connector, categoryLabel: categoryLabel, accountLabel: getDisplayableAccountLabel(connector), flags: flags, onDisconnect: onDisconnect, agentHandle: agentHandle }), _jsxs("section", { className: "connector-drawer-section", children: [_jsxs("h3", { className: "connector-drawer-section-title", children: [t('Tools'), " ", _jsx("span", { className: "connector-drawer-count", children: getConnectorDisplayToolCount(connector) })] }), _jsx(ConnectorDrawerToolsBody, { connector: connector, toolsPreviewLoading: toolsPreviewLoading, toolsLoaded: toolsLoaded, onLoadMoreTools: onLoadMoreTools })] })] }), !flags.isConnected ? (_jsx(ConnectorDrawerFoot, { connectorId: connector.id, flags: flags, onConnect: onConnect, onCancelAuthorization: onCancelAuthorization, agentHandle: agentHandle })) : null] }) }));
 }
 //# sourceMappingURL=ConnectorDetailDrawer.js.map

package/dist/features/connectors/components/ConnectorGrid.js

@@ -3,13 +3,18 @@ import { agentHandleProps, buildAgentListHandles } from '@jini-ai/agentic';
 import { useT } from '../../i18n/index.js';
 import { ConnectorCard } from './ConnectorCard.js';
 import { ConnectorGate } from './ConnectorGate.js';
+/** Search-empty state: the no-match title/body and a clear-search action, each copy line host-overridable. */
+function ConnectorGridEmpty({ searchQuery, onClearSearch, emptyNoMatchTitle, emptyNoMatchBody, emptyNoMatchAction, agentHandle, }) {
+    const t = useT();
+    const title = emptyNoMatchTitle
+        ? emptyNoMatchTitle(searchQuery.trim())
+        : t('No connectors match "{query}"', { query: searchQuery.trim() });
+    const action = emptyNoMatchAction ?? t('Clear search');
+    return (_jsxs("div", { className: "tab-empty connectors-empty", role: "status", "aria-live": "polite", "data-testid": "connectors-empty", children: [_jsx("p", { className: "connectors-empty-title", children: title }), _jsx("p", { className: "connectors-empty-body", children: emptyNoMatchBody ?? t('Try a different search term.') }), _jsx("button", { type: "button", className: "ghost connectors-empty-action", onClick: onClearSearch, ...agentHandleProps({}, { base: agentHandle, action: 'clear-search', role: 'button', label: action }), children: action })] }));
+}
 /** Card grid + the search-empty-state and locked-gate overlays. */
 export function ConnectorGrid({ connectors, locked, hasNoResults, searchQuery, pendingConnectorAction, authorizationPending, authorizationCancelFailed, toolsLoaded, onConnect, onDisconnect, onCancelAuthorization, onOpenDetails, onOpenExternalUrl, getCategoryLabel, onClearSearch, gate, emptyNoMatchTitle, emptyNoMatchBody, emptyNoMatchAction, agentHandle, }) {
-    const t = useT();
-    const resolvedEmptyNoMatchTitle = emptyNoMatchTitle ?? ((query) => t('No connectors match "{query}"', { query }));
-    const resolvedEmptyNoMatchBody = emptyNoMatchBody ?? t('Try a different search term.');
-    const resolvedEmptyNoMatchAction = emptyNoMatchAction ?? t('Clear search');
-    const cardHandles = agentHandle ? buildAgentListHandles({ prefix: agentHandle, ids: connectors.map((c) => c.id) }) : undefined;
-    return (_jsxs("div", { className: `connector-grid-wrap${locked ? ' is-masked' : ''}`, "data-testid": "connector-grid-wrap", children: [hasNoResults && !locked ? (_jsxs("div", { className: "tab-empty connectors-empty", role: "status", "aria-live": "polite", "data-testid": "connectors-empty", children: [_jsx("p", { className: "connectors-empty-title", children: resolvedEmptyNoMatchTitle(searchQuery.trim()) }), _jsx("p", { className: "connectors-empty-body", children: resolvedEmptyNoMatchBody }), _jsx("button", { type: "button", className: "ghost connectors-empty-action", onClick: onClearSearch, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'clear-search', role: 'button', label: resolvedEmptyNoMatchAction }) }), children: resolvedEmptyNoMatchAction })] })) : (_jsx("div", { className: "connector-grid", "aria-hidden": locked || undefined, children: connectors.map((connector, index) => (_jsx(ConnectorCard, { connector: connector, disabled: locked, pendingAction: pendingConnectorAction?.connectorId === connector.id ? pendingConnectorAction.action : null, authorizationPending: authorizationPending[connector.id], authorizationCancelFailed: authorizationCancelFailed[connector.id] === true, toolsLoaded: toolsLoaded, onConnect: onConnect, onDisconnect: onDisconnect, onCancelAuthorization: onCancelAuthorization, onOpenDetails: onOpenDetails, ...(getCategoryLabel ? { getCategoryLabel } : {}), ...(onOpenExternalUrl ? { onOpenExternalUrl } : {}), ...(cardHandles?.[index] ? { agentHandle: cardHandles[index] } : {}) }, connector.id))) })), locked && gate ? _jsx(ConnectorGate, { ...gate }) : null] }));
+    const cardHandles = agentHandle ? buildAgentListHandles({ prefix: agentHandle, ids: connectors.map((c) => c.id) }) : [];
+    return (_jsxs("div", { className: `connector-grid-wrap${locked ? ' is-masked' : ''}`, "data-testid": "connector-grid-wrap", children: [hasNoResults && !locked ? (_jsx(ConnectorGridEmpty, { searchQuery: searchQuery, onClearSearch: onClearSearch, emptyNoMatchTitle: emptyNoMatchTitle, emptyNoMatchBody: emptyNoMatchBody, emptyNoMatchAction: emptyNoMatchAction, agentHandle: agentHandle })) : (_jsx("div", { className: "connector-grid", "aria-hidden": locked || undefined, children: connectors.map((connector, index) => (_jsx(ConnectorCard, { connector: connector, disabled: locked, pendingAction: pendingConnectorAction?.connectorId === connector.id ? pendingConnectorAction.action : null, authorizationPending: authorizationPending[connector.id], authorizationCancelFailed: authorizationCancelFailed[connector.id] === true, toolsLoaded: toolsLoaded, onConnect: onConnect, onDisconnect: onDisconnect, onCancelAuthorization: onCancelAuthorization, onOpenDetails: onOpenDetails, ...(getCategoryLabel ? { getCategoryLabel } : {}), ...(onOpenExternalUrl ? { onOpenExternalUrl } : {}), ...(cardHandles[index] ? { agentHandle: cardHandles[index] } : {}) }, connector.id))) })), locked && gate ? _jsx(ConnectorGate, { ...gate }) : null] }));
 }
 //# sourceMappingURL=ConnectorGrid.js.map

package/dist/features/connectors/hooks/useConnectorAuthorization.js

@@ -152,6 +152,12 @@ export function useConnectorAuthorization(port, authPendingStorage, authBridge,
             // (not stripped) as a guard against a future refactor breaking
             // that invariant — see packages/ui/archived provenance ledger's 2026-07-22
             // dated entry for the full proof.
+            // Correction (2026-10-21 coverage pass): the proof above misses one interleaving. While this
+            // sweep's `cancelConnectorAuthorization` call is still awaiting, a `runConnectorAction(id,
+            // 'connect')` that resolves with `{ error }` sets `authError[id]`; the cancel then succeeds and
+            // this clear removes that NEWER error. Reproduced in
+            // `__tests__/hooks/useConnectorAuthorization.stale-race.test.ts`; flagged for an owner decision
+            // on whether the sweep should leave a fresher error alone.
             setAuthError((curr) => {
                 if (curr[connectorId] === undefined)
                     return curr;

package/dist/features/connectors/hooks/useConnectorCatalog.d.ts

@@ -19,6 +19,8 @@ export interface ConnectorCatalogController {
  * fetch (so already-configured connectors render immediately), then a lazy
  * enrichment pass gated on `unlocked` — heavier, only worth it once the
  * host's provider is actually configured.
+ * Failed reads retain the current catalog, settle their loading state and
+ * report a fixed diagnostic; host/provider errors may contain credentials.
  */
 export declare function useConnectorCatalog(port: ConnectorsPort, options: ConnectorCatalogOptions): ConnectorCatalogController;
 //# sourceMappingURL=useConnectorCatalog.d.ts.map

package/dist/features/connectors/hooks/useConnectorCatalog.js

@@ -5,6 +5,8 @@ import { mergeConnectors } from '../rules.js';
  * fetch (so already-configured connectors render immediately), then a lazy
  * enrichment pass gated on `unlocked` — heavier, only worth it once the
  * host's provider is actually configured.
+ * Failed reads retain the current catalog, settle their loading state and
+ * report a fixed diagnostic; host/provider errors may contain credentials.
  */
 export function useConnectorCatalog(port, options) {
     const { unlocked, refreshKey = 0 } = options;
@@ -16,12 +18,20 @@ export function useConnectorCatalog(port, options) {
         let cancelled = false;
         setLoading(true);
         setEnriched(false);
-        (async () => {
-            const next = await port.fetchConnectors();
-            if (cancelled)
-                return;
-            setConnectors((curr) => mergeConnectors(curr, next));
-            setLoading(false);
+        void (async () => {
+            try {
+                const next = await port.fetchConnectors();
+                if (!cancelled)
+                    setConnectors((curr) => mergeConnectors(curr, next));
+            }
+            catch {
+                if (!cancelled)
+                    console.error('[connectors] Catalog load failed.');
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
         })();
         return () => {
             cancelled = true;
@@ -38,13 +48,22 @@ export function useConnectorCatalog(port, options) {
             return;
         let cancelled = false;
         setEnriching(true);
-        (async () => {
-            const next = await port.fetchConnectorEnrichment({ refresh: true });
-            if (cancelled)
-                return;
-            setConnectors((curr) => mergeConnectors(curr, next));
-            setEnriched(true);
-            setEnriching(false);
+        void (async () => {
+            try {
+                const next = await port.fetchConnectorEnrichment({ refresh: true });
+                if (cancelled)
+                    return;
+                setConnectors((curr) => mergeConnectors(curr, next));
+                setEnriched(true);
+            }
+            catch {
+                if (!cancelled)
+                    console.error('[connectors] Catalog enrichment failed.');
+            }
+            finally {
+                if (!cancelled)
+                    setEnriching(false);
+            }
         })();
         return () => {
             cancelled = true;

package/dist/features/connectors/hooks/useWiredConnectorsBrowser.d.ts

@@ -11,9 +11,9 @@ export interface UseWiredConnectorsBrowserParams {
     onConnectorsChanged?: (() => void) | undefined;
     onConnectorAuthResult?: ((event: ConnectorAuthResultEvent) => void) | undefined;
     /** Custom hook overrides for dependency injection / testing — mirrors `ConnectorsBrowserProps`. */
-    useConnectorCatalog?: typeof useConnectorCatalog;
-    useConnectorAuthorization?: typeof useConnectorAuthorization;
-    useConnectorDetail?: typeof useConnectorDetail;
+    useConnectorCatalog?: typeof useConnectorCatalog | undefined;
+    useConnectorAuthorization?: typeof useConnectorAuthorization | undefined;
+    useConnectorDetail?: typeof useConnectorDetail | undefined;
 }
 export interface WiredConnectorsBrowserController {
     /** The resolved dependency bundle (host-supplied, or the package's fake) — still needed by the host

package/dist/features/connectors/rules.d.ts

@@ -1,10 +1,17 @@
 /** Connector callback-origin validation and search/display sorting; no React, transport or DOM. */
-import type { Connector, ConnectorAuthorizationPendingState, ConnectorActionResult, ConnectorStatusMap, ConnectorPanelAlert, ConnectorStatus, ProviderTab } from './types.js';
+import type { Connector, ConnectorAction, ConnectorActionFlags, ConnectorAuthorizationPending, ConnectorAuthorizationPendingState, ConnectorActionResult, ConnectorStatusMap, ConnectorPanelAlert, ConnectorStatus, ProviderTab } from './types.js';
 /** Restricts the catalog to a single provider tab's `match` predicate, defaulting to the first tab. */
 export declare function scopeConnectorsToProvider(connectors: Connector[], providerTabs: readonly ProviderTab[], selectedProviderId: string): Connector[];
 export declare function mergeConnectors(current: Connector[], incoming: Connector[]): Connector[];
 export declare function pruneConnectorAuthorizationPending(pending: ConnectorAuthorizationPendingState, nowMs: number): ConnectorAuthorizationPendingState;
 export declare function parseConnectorAuthorizationPendingState(raw: string): ConnectorAuthorizationPendingState;
+/** Derives the connect/disconnect/authorization-pending flags a card or drawer renders its actions from. */
+export declare function connectorActionFlags({ connector, pendingAction, authorizationPending, disabled, }: {
+    connector: Connector;
+    pendingAction: ConnectorAction | null;
+    authorizationPending: ConnectorAuthorizationPending | undefined;
+    disabled: boolean;
+}): ConnectorActionFlags;
 export declare function updateConnectorAuthorizationPendingFromConnectResponse(pending: ConnectorAuthorizationPendingState, response: ConnectorActionResult, nowMs: number): ConnectorAuthorizationPendingState;
 export declare function updateConnectorAuthorizationPendingFromStatuses(pending: ConnectorAuthorizationPendingState, statuses: ConnectorStatusMap, nowMs: number): ConnectorAuthorizationPendingState;
 export declare function clearConnectorAuthorizationErrorsForConnected(errors: Record<string, string>, statuses: ConnectorStatusMap): Record<string, string>;

package/dist/features/connectors/rules.js

@@ -45,32 +45,54 @@ export function pruneConnectorAuthorizationPending(pending, nowMs) {
     }
     return next;
 }
+function isPlainRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+function isNonBlankString(value) {
+    return typeof value === 'string' && !!value.trim();
+}
+function parsePendingEntry(state) {
+    if (!isPlainRecord(state))
+        return {};
+    const { expiresAt, redirectUrl } = state;
+    return {
+        ...(isNonBlankString(expiresAt) ? { expiresAt } : {}),
+        ...(isNonBlankString(redirectUrl) ? { redirectUrl } : {}),
+    };
+}
 export function parseConnectorAuthorizationPendingState(raw) {
+    let parsed;
     try {
-        const parsed = JSON.parse(raw);
-        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
-            return {};
-        const pending = {};
-        for (const [connectorId, state] of Object.entries(parsed)) {
-            if (!connectorId)
-                continue;
-            if (state && typeof state === 'object' && !Array.isArray(state)) {
-                const expiresAt = state.expiresAt;
-                const redirectUrl = state.redirectUrl;
-                pending[connectorId] = {
-                    ...(typeof expiresAt === 'string' && expiresAt.trim() ? { expiresAt } : {}),
-                    ...(typeof redirectUrl === 'string' && redirectUrl.trim() ? { redirectUrl } : {}),
-                };
-            }
-            else {
-                pending[connectorId] = {};
-            }
-        }
-        return pending;
+        parsed = JSON.parse(raw);
     }
     catch {
         return {};
     }
+    if (!isPlainRecord(parsed))
+        return {};
+    const pending = {};
+    for (const [connectorId, state] of Object.entries(parsed)) {
+        if (!connectorId)
+            continue;
+        pending[connectorId] = parsePendingEntry(state);
+    }
+    return pending;
+}
+/** Derives the connect/disconnect/authorization-pending flags a card or drawer renders its actions from. */
+export function connectorActionFlags({ connector, pendingAction, authorizationPending, disabled, }) {
+    const isConnected = connector.status === 'connected';
+    const isAuthorizationPending = !isConnected && authorizationPending !== undefined;
+    const isPending = pendingAction !== null || isAuthorizationPending;
+    const canAct = !disabled && !isPending;
+    return {
+        isConnecting: pendingAction === 'connect',
+        isDisconnecting: pendingAction === 'disconnect',
+        isConnected,
+        isAuthorizationPending,
+        canConnect: canAct && connector.status === 'available',
+        canDisconnect: canAct && isConnected,
+        redirectUrl: isAuthorizationPending ? authorizationPending.redirectUrl : undefined,
+    };
 }
 export function updateConnectorAuthorizationPendingFromConnectResponse(pending, response, nowMs) {
     if (!response.connector)