@jini-ai/ui 0.5.5 → 0.5.6

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)

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

@@ -78,4 +78,15 @@ export interface ConnectorAuthResultEvent {
     result: 'success' | 'failed' | 'cancelled';
     errorCode?: string;
 }
+/** Derived connect/disconnect state shared by the connector card and detail drawer. */
+export interface ConnectorActionFlags {
+    isConnecting: boolean;
+    isDisconnecting: boolean;
+    isConnected: boolean;
+    isAuthorizationPending: boolean;
+    canConnect: boolean;
+    canDisconnect: boolean;
+    /** The pending authorization's redirect URL — only set while authorization is pending. */
+    redirectUrl: string | undefined;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/features/execution/constants.d.ts

@@ -1,6 +1,5 @@
 import type { AgentCliEnvFieldSpec, ApiProtocol, ProviderPreset } from './types.js';
-/** Fallback endpoint per protocol, used when a host supplies no preset and
- *  the operator has not typed a base URL. Origin: `DEFAULT_BASE_URL_BY_PROTOCOL`. */
+/** @deprecated Endpoints come from host presets. Blank means the operator must supply an endpoint. */
 export declare const DEFAULT_BASE_URL_BY_PROTOCOL: Readonly<Record<ApiProtocol, string>>;
 /** Display order and English labels for the protocol row. Values are i18n
  *  keys (this package's convention is "the English string is the key"). */
@@ -18,8 +17,8 @@ export declare const CUSTOM_MODEL_SENTINEL = "__custom__";
 /**
  * The shortest string `apiKeyFormatWarning` will let pass without remark.
  *
- * Chosen from evidence rather than taste. The shortest real key shape any preset in
- * {@link DEFAULT_PROVIDER_PRESETS} describes is Azure OpenAI's bare 32-character hex string;
+ * Chosen from evidence rather than taste. The shortest real key shape in the integrations
+ * starter presets is Azure OpenAI's bare 32-character hex string;
  * Google's is `AIza` + 35 = 39, OpenAI's `sk-` + 48 = 51, OpenRouter's `sk-or-v1-` + 64 = 73, and
  * Anthropic's longer again. 20 therefore sits 12 characters below that floor, so no credential this
  * catalog knows about can trip it, while it still catches the failure the check exists for: the
@@ -45,12 +44,7 @@ export declare const API_KEY_CROSS_VENDOR_WARNING = "This looks like an API key
 /** Shown when a key is shorter than {@link MIN_PLAUSIBLE_API_KEY_LENGTH}. Carries no placeholders:
  *  the length floor is global, so there is no vendor to name. */
 export declare const API_KEY_TOO_SHORT_WARNING = "This is shorter than any provider API key \u2014 check that the whole key was pasted. You can still save and test it.";
-/**
- * A small, vendor-shaped starting catalog. Deliberately NOT the origin's full
- * ~30-entry list: that list is hand-curated product content that goes stale,
- * and this package's rule for tables like this (see `LanguageTab`) is that the
- * host owns them. Pass your own `presets` to replace this wholesale.
- */
+/** @deprecated Supply host presets. The former starter set is exported by integrations/media-providers/catalog. */
 export declare const DEFAULT_PROVIDER_PRESETS: readonly ProviderPreset[];
 /**
  * One-line descriptions for the code-agent CLIs this package knows about,

package/dist/features/execution/constants.js

@@ -1,11 +1,9 @@
-import { VENDOR_API_BASE_URLS } from '@jini-ai/integrations/media-providers/catalog';
-/** Fallback endpoint per protocol, used when a host supplies no preset and
- *  the operator has not typed a base URL. Origin: `DEFAULT_BASE_URL_BY_PROTOCOL`. */
+/** @deprecated Endpoints come from host presets. Blank means the operator must supply an endpoint. */
 export const DEFAULT_BASE_URL_BY_PROTOCOL = {
-    anthropic: VENDOR_API_BASE_URLS.anthropic,
-    openai: VENDOR_API_BASE_URLS.openai,
-    azure: VENDOR_API_BASE_URLS.azure,
-    google: VENDOR_API_BASE_URLS.google,
+    anthropic: '',
+    openai: '',
+    azure: '',
+    google: '',
 };
 /** Display order and English labels for the protocol row. Values are i18n
  *  keys (this package's convention is "the English string is the key"). */
@@ -25,8 +23,8 @@ export const CUSTOM_MODEL_SENTINEL = '__custom__';
 /**
  * The shortest string `apiKeyFormatWarning` will let pass without remark.
  *
- * Chosen from evidence rather than taste. The shortest real key shape any preset in
- * {@link DEFAULT_PROVIDER_PRESETS} describes is Azure OpenAI's bare 32-character hex string;
+ * Chosen from evidence rather than taste. The shortest real key shape in the integrations
+ * starter presets is Azure OpenAI's bare 32-character hex string;
  * Google's is `AIza` + 35 = 39, OpenAI's `sk-` + 48 = 51, OpenRouter's `sk-or-v1-` + 64 = 73, and
  * Anthropic's longer again. 20 therefore sits 12 characters below that floor, so no credential this
  * catalog knows about can trip it, while it still catches the failure the check exists for: the
@@ -52,91 +50,8 @@ export const API_KEY_CROSS_VENDOR_WARNING = 'This looks like an API key for {ven
 /** Shown when a key is shorter than {@link MIN_PLAUSIBLE_API_KEY_LENGTH}. Carries no placeholders:
  *  the length floor is global, so there is no vendor to name. */
 export const API_KEY_TOO_SHORT_WARNING = 'This is shorter than any provider API key — check that the whole key was pasted. You can still save and test it.';
-/**
- * A small, vendor-shaped starting catalog. Deliberately NOT the origin's full
- * ~30-entry list: that list is hand-curated product content that goes stale,
- * and this package's rule for tables like this (see `LanguageTab`) is that the
- * host owns them. Pass your own `presets` to replace this wholesale.
- */
-export const DEFAULT_PROVIDER_PRESETS = [
-    {
-        id: 'anthropic',
-        title: 'Anthropic',
-        protocol: 'anthropic',
-        baseUrl: VENDOR_API_BASE_URLS.anthropic,
-        preferredModels: ['claude-sonnet-5', 'claude-opus-5', 'claude-haiku-4-5'],
-        kind: 'protocol',
-        apiKeyPrefix: 'sk-ant-',
-    },
-    {
-        id: 'openai',
-        title: 'OpenAI',
-        protocol: 'openai',
-        baseUrl: VENDOR_API_BASE_URLS.openai,
-        // `gpt-4o`/`gpt-4o-mini`/`o3`/`o4-mini` are stale: OpenAI's GPT-5.6 family
-        // (released 2026-07-09, per the API changelog) replaced the old
-        // flagship/mini/nano naming with named tiers — sol/terra/luna. `sol` is
-        // the one the changelog and pricing docs call out as "recommended for
-        // production API usage", so it leads (see `preferredModels[0]` default
-        // in `rules.ts`) rather than the newer, pricier `gpt-6-astra` flagship
-        // (released 2026-09-03) — picking that as the silent default would jump
-        // an existing user's cost without them choosing it.
-        preferredModels: ['gpt-5.6-sol', 'gpt-5.6-terra', 'gpt-5.6-luna'],
-        kind: 'protocol',
-        apiKeyPrefix: 'sk-',
-    },
-    {
-        id: 'azure-openai',
-        title: 'Azure OpenAI',
-        protocol: 'azure',
-        baseUrl: VENDOR_API_BASE_URLS.azure,
-        preferredModels: [],
-        kind: 'protocol',
-        // No `apiKeyPrefix` deliberately: an Azure OpenAI key is a bare hex string with no vendor
-        // prefix, so any value here would be a guess — and a wrong prefix claim does not merely stay
-        // silent, it lets some OTHER vendor's valid key be announced as Azure's. Its 32 hex characters
-        // are also the shortest real key shape in this catalog, which is what sets
-        // `MIN_PLAUSIBLE_API_KEY_LENGTH`.
-    },
-    {
-        id: 'google-gemini',
-        title: 'Google Gemini',
-        protocol: 'google',
-        baseUrl: VENDOR_API_BASE_URLS.google,
-        // Ordered newest-first: `rules.ts`'s `saved?.model ?? preset.preferredModels[0]` makes entry [0]
-        // the default for anyone who has never picked a model, so a stale head silently pins new users
-        // to an old generation. Reported live: the field defaulted to `gemini-2.5-flash` while the
-        // operator was actually running `gemini-3.6-flash`. This list is only a FALLBACK — the form
-        // prefers live `listModels` discovery and drops back here when that call fails.
-        preferredModels: ['gemini-3.6-flash', 'gemini-2.5-flash', 'gemini-2.5-pro'],
-        kind: 'protocol',
-        // `AIza` + 35 characters is the classic Google key shape, and it is recorded here so a key of
-        // this shape is recognised as GOOGLE'S when it turns up in some other provider's field.
-        // Emphatically not a test that a Google key must look like this: an operator pasted a real,
-        // working Gemini key in a newer shape and the old allowlist told them it was not a Google key.
-        apiKeyPrefix: 'AIza',
-    },
-    {
-        id: 'openrouter',
-        title: 'OpenRouter',
-        protocol: 'openai',
-        baseUrl: VENDOR_API_BASE_URLS.openrouter,
-        preferredModels: ['anthropic/claude-sonnet-5', 'google/gemini-2.5-pro', 'openai/gpt-5.6-sol'],
-        kind: 'gateway',
-        // Longer than OpenAI's `sk-`, and deliberately so: `apiKeyFormatWarning` resolves a key to the
-        // MOST specific prefix that claims it, so `sk-or-v1-…` is attributed here rather than to OpenAI.
-        apiKeyPrefix: 'sk-or-',
-    },
-    {
-        id: 'ollama',
-        title: 'Ollama',
-        protocol: 'openai',
-        baseUrl: VENDOR_API_BASE_URLS.ollama,
-        preferredModels: [],
-        kind: 'gateway',
-        requiresApiKey: false,
-    },
-];
+/** @deprecated Supply host presets. The former starter set is exported by integrations/media-providers/catalog. */
+export const DEFAULT_PROVIDER_PRESETS = [];
 /**
  * One-line descriptions for the code-agent CLIs this package knows about,
  * keyed by the agent id `ExecutionPort` reports. Origin:

package/dist/features/execution/react/components/ByokProviderForm.d.ts

@@ -10,10 +10,8 @@ export interface ByokProviderFormProps {
      * as ANOTHER row's, so `apiKeyFormatWarning` can say whose it looks like. Never used to validate
      * the selected preset's own key — see that function for why that direction is forbidden.
      *
-     * Defaults to `DEFAULT_PROVIDER_PRESETS`, matching `ExecutionTab`'s own default for the same
-     * prop, so a host rendering this card standalone still gets the shipped vendor prefixes rather
-     * than losing the check silently. A host with its own catalog should pass it, exactly as
-     * `ExecutionTab` does.
+     * Defaults to no presets. Hosts rendering this card standalone must pass their catalog
+     * to enable cross-provider prefix hints, exactly as `ExecutionTab` does.
      */
     presets?: readonly ProviderPreset[];
     /** Live model-discovery result. `'ok'` suggestions win over the preset's