@jini-ai/ui 0.5.5 → 0.5.6

package/dist/features/browser-chrome/rules.js

@@ -2,27 +2,26 @@ import { DEFAULT_HOME_NAVIGATION_ENTRY, EMPTY_URL, HISTORY_LIMIT } from './const
 function escapeRegExp(value) {
     return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
+/** Resolves a `/`-rooted address: against `appOrigin` when it matches a configured app-route prefix, else as a local `file://` path. */
+function resolveAbsolutePath(value, options) {
+    const { appRoutePrefixes = [], appOrigin } = options;
+    if (appOrigin && appRoutePrefixes.length > 0) {
+        const prefixPattern = new RegExp(`^/(${appRoutePrefixes.map(escapeRegExp).join('|')})(/|$)`);
+        if (prefixPattern.test(value))
+            return new URL(value, appOrigin).toString();
+    }
+    return `file://${encodeURI(value)}`;
+}
 export function normalizeBrowserAddress(rawAddress, options = {}) {
     const value = rawAddress.trim();
-    if (!value)
-        return EMPTY_URL;
-    if (value === EMPTY_URL)
+    if (!value || value === EMPTY_URL)
         return EMPTY_URL;
     if (/^(https?|file):\/\//i.test(value))
         return value;
-    if (/^localhost(:\d+)?(\/.*)?$/i.test(value))
+    if (/^(localhost|127\.0\.0\.1|0\.0\.0\.0)(:\d+)?(\/.*)?$/i.test(value))
         return `http://${value}`;
-    if (/^(127\.0\.0\.1|0\.0\.0\.0)(:\d+)?(\/.*)?$/i.test(value))
-        return `http://${value}`;
-    if (value.startsWith('/')) {
-        const { appRoutePrefixes = [], appOrigin } = options;
-        if (appOrigin && appRoutePrefixes.length > 0) {
-            const prefixPattern = new RegExp(`^/(${appRoutePrefixes.map(escapeRegExp).join('|')})(/|$)`);
-            if (prefixPattern.test(value))
-                return new URL(value, appOrigin).toString();
-        }
-        return `file://${encodeURI(value)}`;
-    }
+    if (value.startsWith('/'))
+        return resolveAbsolutePath(value, options);
     if (/^[\w.-]+\.[a-z]{2,}(:\d+)?(\/.*)?$/i.test(value))
         return `https://${value}`;
     return `https://www.google.com/search?q=${encodeURIComponent(value)}`;
@@ -137,37 +136,37 @@ export function mergeHistoryEntry(history, url, meta = {}, options = {}, now = D
     if (!isHistoryUrl(url))
         return history;
     const existing = history.find((entry) => sameUrl(entry.url, url));
-    // `isHistoryUrl` above already excludes `EMPTY_URL`, so `labelFromUrl`'s
-    // home-label branch can never trigger here — no `homeLabel` option to pass.
-    const nextTitle = meta.title && meta.title.trim()
-        ? meta.title.trim()
-        : existing?.title || labelFromUrl(url);
-    const nextIconUrl = cleanIconUrl(meta.iconUrl) || existing?.iconUrl || faviconUrl(url);
-    const visitIncrement = options.countVisit === false ? 0 : 1;
-    const entry = existing
-        ? {
-            ...existing,
-            ...(nextIconUrl !== undefined ? { iconUrl: nextIconUrl } : {}),
-            title: nextTitle,
-            lastVisitedAt: visitIncrement > 0 ? now : existing.lastVisitedAt,
-            visitCount: existing.visitCount + visitIncrement,
-        }
-        : {
-            ...(nextIconUrl !== undefined ? { iconUrl: nextIconUrl } : {}),
-            title: nextTitle,
-            url,
-            lastVisitedAt: now,
-            visitCount: 1,
-        };
-    if (existing
-        && existing.title === entry.title
-        && existing.iconUrl === entry.iconUrl
-        && existing.lastVisitedAt === entry.lastVisitedAt
-        && existing.visitCount === entry.visitCount) {
+    const entry = buildHistoryEntry({ url, meta, now, countVisit: options.countVisit !== false }, { existing });
+    if (existing && sameHistoryEntryState(existing, entry))
         return history;
-    }
     return [entry, ...history.filter((item) => !sameUrl(item.url, url))].slice(0, HISTORY_LIMIT);
 }
+/** Builds the merged entry for `url`: an update of `existing` when present, otherwise a fresh first-visit entry. */
+function buildHistoryEntry({ url, meta, now, countVisit }, { existing }) {
+    const resolved = resolveHistoryMeta({ url, meta }, { existing });
+    if (!existing)
+        return { ...resolved, url, lastVisitedAt: now, visitCount: 1 };
+    return {
+        ...existing,
+        ...resolved,
+        lastVisitedAt: countVisit ? now : existing.lastVisitedAt,
+        visitCount: existing.visitCount + (countVisit ? 1 : 0),
+    };
+}
+/** Title and icon for a merged entry: the caller's meta wins, then the existing entry's, then values derived from `url`. */
+function resolveHistoryMeta({ url, meta }, { existing }) {
+    // `isHistoryUrl` above already excludes `EMPTY_URL`, so `labelFromUrl`'s
+    // home-label branch can never trigger here — no `homeLabel` option to pass.
+    const title = meta.title?.trim() || existing?.title || labelFromUrl(url);
+    const iconUrl = cleanIconUrl(meta.iconUrl) || existing?.iconUrl || faviconUrl(url);
+    return iconUrl !== undefined ? { iconUrl, title } : { title };
+}
+function sameHistoryEntryState(left, right) {
+    return (left.title === right.title
+        && left.iconUrl === right.iconUrl
+        && left.lastVisitedAt === right.lastVisitedAt
+        && left.visitCount === right.visitCount);
+}
 // ---------------------------------------------------------------------------
 // Navigation stack
 // ---------------------------------------------------------------------------
@@ -201,6 +200,20 @@ export function recordNavigation(state, url, title, options = {}) {
     if (url !== EMPTY_URL && !isHistoryUrl(url))
         return state;
     const { navigationStack: stack, navigationIndex: index } = state;
+    const nextTitle = navigationTitle({ url }, { title, homeLabel: options.homeLabel });
+    const rejoin = findRejoinTarget({ state, url }, options);
+    if (rejoin) {
+        const next = stack.slice();
+        // `nextTitle` is only ever '' for EMPTY_URL with an explicit '' homeLabel;
+        // keep the rejoined entry's own title rather than blanking it.
+        next[rejoin.index] = { title: nextTitle || rejoin.entry.title, url };
+        return { navigationStack: next, navigationIndex: rejoin.index };
+    }
+    const base = index >= 0 ? stack.slice(0, index + 1) : [];
+    const nextStack = [...base, { title: nextTitle, url }].slice(-HISTORY_LIMIT);
+    return { navigationStack: nextStack, navigationIndex: nextStack.length - 1 };
+}
+function navigationTitle({ url }, { title, homeLabel }) {
     // Bug fix: this used to hardcode DEFAULT_HOME_NAVIGATION_ENTRY.title here,
     // ignoring a caller-supplied `options.homeLabel` — so a host configuring a
     // custom `homeEntry` (via useBrowserNavigationStack) would see the entry's
@@ -208,34 +221,25 @@ export function recordNavigation(state, url, title, options = {}) {
     // even though `initialNavigationState`/`labelFromUrl` both honor the
     // custom label correctly. Falls back to the generic default only when no
     // homeLabel is supplied.
-    const nextTitle = url === EMPTY_URL
-        ? (options.homeLabel ?? DEFAULT_HOME_NAVIGATION_ENTRY.title)
-        : title && title.trim()
-            ? title.trim()
-            : labelFromUrl(url, options.homeLabel);
-    const nextEntry = { title: nextTitle, url };
-    const updateEntry = (entries, entryIndex) => {
-        const existing = entries[entryIndex];
-        const next = entries.slice();
-        next[entryIndex] = { title: nextTitle || existing?.title || labelFromUrl(url, options.homeLabel), url };
-        return next;
-    };
-    const currentEntry = index >= 0 ? stack[index] : undefined;
-    const shouldReplacePending = Boolean(options.replacePendingTarget && options.pendingTarget && currentEntry && sameUrl(currentEntry.url, options.pendingTarget));
-    if (currentEntry && (sameUrl(currentEntry.url, url) || shouldReplacePending)) {
-        return { navigationStack: updateEntry(stack, index), navigationIndex: index };
-    }
-    const previousIndex = index - 1;
-    if (previousIndex >= 0 && sameUrl(stack[previousIndex]?.url ?? '', url)) {
-        return { navigationStack: updateEntry(stack, previousIndex), navigationIndex: previousIndex };
-    }
-    const nextIndex = index + 1;
-    if (nextIndex < stack.length && sameUrl(stack[nextIndex]?.url ?? '', url)) {
-        return { navigationStack: updateEntry(stack, nextIndex), navigationIndex: nextIndex };
+    if (url === EMPTY_URL)
+        return homeLabel ?? DEFAULT_HOME_NAVIGATION_ENTRY.title;
+    return title?.trim() || labelFromUrl(url, homeLabel);
+}
+/**
+ * The stack entry `url` should update in place instead of appending: the
+ * current entry (same url, or the pending-load target being replaced), else
+ * the adjacent back entry, else the adjacent forward entry. An out-of-range
+ * index reads as `undefined`, which never matches.
+ */
+function findRejoinTarget({ state, url }, { replacePendingTarget, pendingTarget }) {
+    const { navigationStack: stack, navigationIndex: index } = state;
+    const current = stack[index];
+    if (current && (sameUrl(current.url, url) || (replacePendingTarget && pendingTarget && sameUrl(current.url, pendingTarget)))) {
+        return { index, entry: current };
     }
-    const base = index >= 0 ? stack.slice(0, index + 1) : [];
-    const nextStack = [...base, nextEntry].slice(-HISTORY_LIMIT);
-    return { navigationStack: nextStack, navigationIndex: nextStack.length - 1 };
+    return [index - 1, index + 1]
+        .map((candidate) => ({ index: candidate, entry: stack[candidate] }))
+        .find((target) => target.entry !== undefined && sameUrl(target.entry.url, url));
 }
 export function updateCurrentNavigationTitle(state, title) {
     const trimmedTitle = title?.trim();

package/dist/features/charts/browser.js

@@ -59,6 +59,12 @@ export function mountChart({ element, spec, registry }, options = {}) {
     function candidates() {
         return selectChartProviders({ registry, spec: input.spec }, { siteProvider: options.siteProvider }).filter(({ id }) => !failed.has(id));
     }
+    function isStaleMount({ token }, _options = {}) {
+        return destroyed || token !== generation;
+    }
+    function isCurrentUpdate({ current, updateRevision }, _options = {}) {
+        return !destroyed && active === current && updateRevision === revision;
+    }
     /** Async renderer errors arrive after mount; defer teardown outside the provider's commit. */
     function renderError(entry, error, token) {
         queueMicrotask(() => {
@@ -76,7 +82,7 @@ export function mountChart({ element, spec, registry }, options = {}) {
             let renderRevision = revision;
             try {
                 const provider = await entry.load({});
-                if (destroyed || token !== generation)
+                if (isStaleMount({ token }))
                     return;
                 const frame = element.ownerDocument.createElement('div');
                 renderer.replaceChildren(frame);
@@ -84,13 +90,13 @@ export function mountChart({ element, spec, registry }, options = {}) {
                 const instance = provider.mount({ element: frame, ...input }, { onError: (error) => renderError(entry, error, token) });
                 active = { entry, instance };
                 await instance.ready;
-                if (destroyed || token !== generation || renderRevision !== revision)
+                if (isStaleMount({ token }) || renderRevision !== revision)
                     return;
                 fallback.hidden = true;
                 return;
             }
             catch (error) {
-                if (destroyed || token !== generation || renderRevision !== revision)
+                if (isStaleMount({ token }) || renderRevision !== revision)
                     return;
                 failed.add(entry.id);
                 report(entry, error);
@@ -113,12 +119,12 @@ export function mountChart({ element, spec, registry }, options = {}) {
                 const current = active;
                 try {
                     await current.instance.update(input);
-                    if (!destroyed && active === current && updateRevision === revision)
+                    if (isCurrentUpdate({ current, updateRevision }))
                         fallback.hidden = true;
                     return;
                 }
                 catch (error) {
-                    if (destroyed || active !== current || updateRevision !== revision)
+                    if (!isCurrentUpdate({ current, updateRevision }))
                         return;
                     failed.add(current.entry.id);
                     report(current.entry, error);

package/dist/features/charts/react.js

@@ -13,8 +13,8 @@ export function ChartHost({ spec, registry, theme = DEFAULT_CHART_THEME, sitePro
     const instance = useRef(undefined);
     const previous = useRef({ spec, theme });
     useEffect(() => {
-        if (!element.current)
-            return;
+        // The container `<div>` below is rendered unconditionally, so React has always attached the ref
+        // by the time this effect runs; the old `if (!element.current) return` could never fire.
         const mounted = mountChart({ element: element.current, spec, registry }, {
             theme, siteProvider, ...(onProviderError ? { onProviderError } : {}),
         });

package/dist/features/charts/table.js

@@ -41,8 +41,8 @@ export function renderChartTable({ element, spec }, _options = {}) {
         const tr = body.insertRow();
         for (const { key } of columns) {
             const cell = tr.insertCell();
-            const value = row[key];
-            cell.textContent = value == null ? '' : typeof value === 'object' ? JSON.stringify(value) : String(value);
+            const value = row[key] ?? '';
+            cell.textContent = typeof value === 'object' ? JSON.stringify(value) : String(value);
             cell.dataset.numeric = String(numeric.has(key));
         }
     }

package/dist/features/command-palette/react/hooks/useCommandPalette.js

@@ -30,18 +30,12 @@ export function useCommandPalette(options, dependencies) {
             onClose();
             return;
         }
-        if (event.key === 'ArrowDown') {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
             event.preventDefault();
             if (results.length === 0)
                 return;
-            setCursor((current) => nextCursor(current, results.length, 1));
-            return;
-        }
-        if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            if (results.length === 0)
-                return;
-            setCursor((current) => nextCursor(current, results.length, -1));
+            const direction = event.key === 'ArrowDown' ? 1 : -1;
+            setCursor((current) => nextCursor(current, results.length, direction));
             return;
         }
         if (event.key === 'Enter') {

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

@@ -1,8 +1,8 @@
 import type { ConnectorsDependencies } from './ports.js';
 import type { Connector, ConnectorAuthResultEvent, ProviderTab } from './types.js';
-import { useConnectorCatalog } from './hooks/useConnectorCatalog.js';
-import { useConnectorAuthorization } from './hooks/useConnectorAuthorization.js';
-import { useConnectorDetail } from './hooks/useConnectorDetail.js';
+import type { useConnectorCatalog } from './hooks/useConnectorCatalog.js';
+import type { useConnectorAuthorization } from './hooks/useConnectorAuthorization.js';
+import type { useConnectorDetail } from './hooks/useConnectorDetail.js';
 import type { ConnectorGateProps } from './components/ConnectorGate.js';
 export interface ConnectorsBrowserProps {
     /** Whether the host's provider is configured (e.g. an API key is saved) — gates enrichment + unmasks the grid. */
@@ -36,5 +36,5 @@ export interface ConnectorsBrowserProps {
  * messages. Ported from OD's `ConnectorsBrowser.tsx` — see
  * `packages/ui/source-map.md` for full provenance.
  */
-export declare function ConnectorsBrowser({ unlocked, providerTabs, catalogRefreshKey, dependencies, getCategoryLabel, getDisplayableAccountLabel, gate, onProviderTabClick, onConnectorAuthResult, onConnectorsChanged, useConnectorCatalog: useConnectorCatalogHook, useConnectorAuthorization: useConnectorAuthorizationHook, useConnectorDetail: useConnectorDetailHook, agentHandle, }: ConnectorsBrowserProps): import("react").JSX.Element;
+export declare function ConnectorsBrowser({ unlocked, providerTabs, catalogRefreshKey, dependencies, getCategoryLabel, getDisplayableAccountLabel, gate, onProviderTabClick, onConnectorAuthResult, onConnectorsChanged, useConnectorCatalog, useConnectorAuthorization, useConnectorDetail, agentHandle, }: ConnectorsBrowserProps): import("react").JSX.Element;
 //# sourceMappingURL=ConnectorsBrowser.d.ts.map

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