@iblai/iblai-js 2.29.1 → 2.30.0

package/dist/web-containers/source/index.esm.js

@@ -269000,6 +269000,43 @@ function llmProviderLabel(provider) {
 function llmModelLabel(model) {
     return model.display_name || model.llm_name;
 }
+function canSwitchProvider(providers, name) {
+    const provider = providers.find((p) => p.name === name);
+    return !!(provider === null || provider === void 0 ? void 0 : provider.chat_models) && provider.chat_models.length > 0;
+}
+/**
+ * Whether we hold a usable LLM key for this provider — its own credentials, or
+ * the tenant's main keys when it is allowed to borrow them. An *absent*
+ * `main_has_credentials` means the backend did not report on the main keys and
+ * is treated as available (matching standalone's `@/lib/utils` and
+ * `claw-sandbox`'s copy); only an explicit `false` rules the main keys out.
+ */
+function canSwitchLLm(llm) {
+    if (llm === null || llm === void 0 ? void 0 : llm.has_credentials) {
+        return true;
+    }
+    return ((llm === null || llm === void 0 ? void 0 : llm.can_use_main_keys) &&
+        ((llm === null || llm === void 0 ? void 0 : llm.main_has_credentials) === true || (llm === null || llm === void 0 ? void 0 : llm.main_has_credentials) === undefined));
+}
+/**
+ * Whether one chat model is selectable. A provider can hold a key that covers
+ * only some of its models (e.g. an Azure deployment per model), so provider
+ * flags alone over- or under-grant.
+ */
+function isModelAvailable(model, provider) {
+    var _a, _b;
+    if (model === null || model === void 0 ? void 0 : model.availability)
+        return !model.availability.requires_credential;
+    return Boolean(canSwitchLLm({
+        has_credentials: (_a = model === null || model === void 0 ? void 0 : model.has_credentials) !== null && _a !== void 0 ? _a : provider === null || provider === void 0 ? void 0 : provider.has_credentials,
+        main_has_credentials: (_b = model === null || model === void 0 ? void 0 : model.main_has_credentials) !== null && _b !== void 0 ? _b : provider === null || provider === void 0 ? void 0 : provider.main_has_credentials,
+        can_use_main_keys: provider === null || provider === void 0 ? void 0 : provider.can_use_main_keys,
+    }));
+}
+function modelUnavailableReason(model) {
+    var _a, _b;
+    return (_b = (_a = model === null || model === void 0 ? void 0 : model.availability) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : undefined;
+}
 
 function OverlayModal({ open, onClose, title, description, className, children, }) {
     const t = useT();
@@ -269021,18 +269058,6 @@ function OverlayModal({ open, onClose, title, description, className, children,
     return (jsx(DialogPrimitive.Root, { open: open, onOpenChange: handleOpenChange, modal: true, children: jsxs(DialogPrimitive.Portal, { container: document.body, children: [jsx(DialogPrimitive.Overlay, { "data-iblai-dialog-interaction-layer": true, className: cn('pointer-events-auto fixed inset-0 z-[100] bg-black/60', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0') }), jsx(DialogPrimitive.Content, { ref: setDialogPanel, "data-iblai-dialog-interaction-layer": true, ...(!description ? { 'aria-describedby': undefined } : {}), className: cn('pointer-events-auto fixed left-[50%] top-[50%] z-[100] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200', 'max-h-[min(90dvh,calc(100dvh-2rem))] max-w-[calc(100vw-2rem)] overflow-y-auto overscroll-contain rounded-lg p-6 sm:rounded-lg', 'pt-[max(1.5rem,env(safe-area-inset-top))] pb-[max(1.5rem,env(safe-area-inset-bottom))]', 'pl-[max(1.5rem,env(safe-area-inset-left))] pr-[max(1.5rem,env(safe-area-inset-right))]', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', className), children: jsxs(FloatingPortalContainerContext.Provider, { value: dialogPanel, children: [jsx(DialogPrimitive.Close, { type: "button", className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "aria-label": t('clawSandboxOverlayModal.close'), children: jsx(X$1, { className: "h-4 w-4" }) }), jsxs("div", { className: "space-y-4", children: [jsxs("div", { className: "flex flex-col space-y-1.5 pr-8 text-center sm:text-left", children: [jsx(DialogPrimitive.Title, { className: "text-lg font-semibold leading-none tracking-tight", children: title }), description ? (jsx(DialogPrimitive.Description, { className: "text-sm text-muted-foreground", children: description })) : null] }), children] })] }) })] }) }));
 }
 
-// ── Helpers ──────────────────────────────────────────────────────────────────
-const canSwitchLLm = (llm) => {
-    if (llm === null || llm === void 0 ? void 0 : llm.has_credentials) {
-        return true;
-    }
-    return ((llm === null || llm === void 0 ? void 0 : llm.can_use_main_keys) &&
-        ((llm === null || llm === void 0 ? void 0 : llm.main_has_credentials) === true || (llm === null || llm === void 0 ? void 0 : llm.main_has_credentials) === undefined));
-};
-function canSwitchProvider(providers, name) {
-    const provider = providers.find((provider) => provider.name === name);
-    return !!(provider === null || provider === void 0 ? void 0 : provider.chat_models) && provider.chat_models.length > 0;
-}
 function LLMProviderModal({ isOpen, onClose, onSelect, llmProvider, isSelecting, mentorSettings, llms, }) {
     const t = useT();
     const [searchQuery, setSearchQuery] = useState('');
@@ -269047,13 +269072,15 @@ function LLMProviderModal({ isOpen, onClose, onSelect, llmProvider, isSelecting,
                 ((_a = llm.display_name) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(query);
         });
     }, [searchQuery, llmProvider]);
-    const switchLLMAllowed = canSwitchLLm(llmProvider);
     const switchProviderAllowed = canSwitchProvider(llms, llmProvider.name);
     return (jsxs(OverlayModal, { open: isOpen, onClose: onClose, title: t('clawSandboxLlmProviderModal.title'), description: t('clawSandboxLlmProviderModal.description', { providerName: llmProvider.name }), className: "max-w-4xl", children: [jsx("p", { className: "text-sm text-gray-600", children: t('clawSandboxLlmProviderModal.chooseLlmHint') }), jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" }), jsx(Input, { placeholder: t('clawSandboxLlmProviderModal.searchPlaceholder'), className: "py-6 pl-9", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), autoComplete: "off", disabled: isSelecting })] }), jsx("div", { className: "grid max-h-[60vh] grid-cols-1 gap-4 overflow-y-auto pr-2 sm:grid-cols-2 lg:grid-cols-3", children: filteredLLMs.map((llm) => {
+                    var _a;
                     const isActive = (mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.llm_name) === llm.llm_name &&
                         (mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.llm_provider) === llmProvider.name;
-                    const isDisabled = !switchLLMAllowed || isSelecting || isActive || !switchProviderAllowed;
-                    return (jsxs("button", { disabled: isDisabled, onClick: () => {
+                    const modelAvailable = isModelAvailable(llm, llmProvider);
+                    const unavailableReason = modelAvailable ? undefined : modelUnavailableReason(llm);
+                    const isDisabled = !modelAvailable || isSelecting || isActive || !switchProviderAllowed;
+                    return (jsxs("button", { "data-model": llm.llm_name, "data-unavailable": modelAvailable ? 'false' : 'true', "data-availability-status": (_a = llm.availability) === null || _a === void 0 ? void 0 : _a.status, title: unavailableReason, disabled: isDisabled, onClick: () => {
                             onSelect(llmProvider.name, llm.llm_name);
                         }, className: cn('flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-4 transition-colors', {
                             'cursor-not-allowed border-gray-200 bg-white': isDisabled,

package/dist/web-containers/source/next/index.esm.js

@@ -290436,22 +290436,34 @@ function compareLLMProvidersByDisplayName(a, b) {
     });
 }
 /**
- * Whether the user can reach *any* model of this provider.
- *
- * This is exactly the provider-level half of the per-model `isDisabled` rule in
- * `llm-tab/llm-provider-modal.tsx`: a model row there is disabled when
- * `!canSwitchLLm(provider) || !canSwitchProvider(llms, provider.name)`, and both
- * of those depend only on the provider — so when either fails, *every* model row
- * of that provider is disabled. `canSwitchProvider` is just "has at least one
- * `chat_models` entry", which is checked inline here to keep the helper pure and
- * free of the surrounding provider list.
- *
- * `canSwitchLLm` can return `undefined` (its `can_use_main_keys` branch), hence
- * the explicit `Boolean(...)`.
+ * Whether one chat model is selectable. A provider can hold a key that covers
+ * only some of its models (e.g. an Azure deployment per model), so provider
+ * flags alone over- or under-grant.
  */
-function canAccessProvider(provider) {
+function isModelAvailable(model, provider) {
     var _a, _b;
-    return Boolean(canSwitchLLm(provider !== null && provider !== void 0 ? provider : {})) && ((_b = (_a = provider === null || provider === void 0 ? void 0 : provider.chat_models) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+    if (model === null || model === void 0 ? void 0 : model.availability)
+        return !model.availability.requires_credential;
+    return Boolean(canSwitchLLm({
+        has_credentials: (_a = model === null || model === void 0 ? void 0 : model.has_credentials) !== null && _a !== void 0 ? _a : provider === null || provider === void 0 ? void 0 : provider.has_credentials,
+        main_has_credentials: (_b = model === null || model === void 0 ? void 0 : model.main_has_credentials) !== null && _b !== void 0 ? _b : provider === null || provider === void 0 ? void 0 : provider.main_has_credentials,
+        can_use_main_keys: provider === null || provider === void 0 ? void 0 : provider.can_use_main_keys,
+    }));
+}
+function modelUnavailableReason(model) {
+    var _a, _b;
+    return (_b = (_a = model === null || model === void 0 ? void 0 : model.availability) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : undefined;
+}
+/**
+ * Whether the user can reach *any* model of this provider — the grid grays a
+ * card only when every one of its models is unavailable (see
+ * {@link isModelAvailable}, the same per-model rule the picker disables rows
+ * with). Models without per-model fields inherit the provider flags, so older
+ * responses gray all-or-nothing exactly as before.
+ */
+function canAccessProvider(provider) {
+    var _a;
+    return ((_a = provider === null || provider === void 0 ? void 0 : provider.chat_models) !== null && _a !== void 0 ? _a : []).some((model) => isModelAvailable(model, provider));
 }
 /**
  * Orders LLM provider cards as two alphabetical groups: providers the user can
@@ -302311,7 +302323,6 @@ function LLMProviderModal({ isOpen, onClose, onSelect, llmProvider, isSelecting,
         return localModelsForThisDevice().filter((m) => getProviderName(m.provider) === key &&
             m.name.toLowerCase().includes(searchQuery.toLowerCase()));
     }, [cloudOnly, isAvailable, llmProvider.name, searchQuery]);
-    const switchLLMAllowed = canSwitchLLm(llmProvider);
     const switchProviderAllowed = canSwitchProvider(llms, llmProvider.name);
     // Only an actual pull counts as "busy". A status refresh ('checking') must NOT
     // — otherwise a stale `activeModel` makes a row flash a progress bar every time
@@ -302339,18 +302350,21 @@ function LLMProviderModal({ isOpen, onClose, onSelect, llmProvider, isSelecting,
         (cloudOnly || !localSel.enabled);
     // Order the WHOLE list — cloud + local — available (usable now) first,
     // unavailable last, with the in-use model leading. "Available" for a cloud
-    // model means the provider is switchable (has credentials + models); for a
-    // local model it's the install state. So an installed on-device model outranks
-    // cloud models whose provider has no credentials. Ranked by state, not the
+    // model means it is usable (see isModelAvailable) and its provider ships
+    // models; for a local model it's the install state. So an installed on-device
+    // model outranks cloud models that need a key. Ranked by state, not the
     // transient download status, so rows don't jump mid-pull; a stable sort keeps
     // the original (catalog) order within each rank.
-    const cloudRank = (llm) => isCloudActive(llm) ? 0 : switchLLMAllowed && switchProviderAllowed ? 1 : 2;
+    const cloudRank = (llm, available) => isCloudActive(llm) ? 0 : available && switchProviderAllowed ? 1 : 2;
     const localRank = (m) => {
         const s = statusFor(m);
         return s === 'selected' ? 0 : s === 'installed' ? 1 : 2;
     };
     const sortedModels = [
-        ...filteredLLMs.map((llm) => ({ kind: 'cloud', llm, rank: cloudRank(llm) })),
+        ...filteredLLMs.map((llm) => {
+            const available = isModelAvailable(llm, llmProvider);
+            return { kind: 'cloud', llm, available, rank: cloudRank(llm, available) };
+        }),
         ...localModels.map((model) => ({ kind: 'local', model, rank: localRank(model) })),
     ].sort((a, b) => a.rank - b.rank);
     // Preserve the "model may be too large" prompt before a download starts. Opens
@@ -302427,11 +302441,13 @@ function LLMProviderModal({ isOpen, onClose, onSelect, llmProvider, isSelecting,
                         ? labels.announceStarted(activeLocal.name)
                         : '';
     return (jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: jsxs(DialogContent, { className: "max-w-4xl space-y-6 p-4", children: [jsx(DialogDescription, { className: "sr-only", children: labels.description(llmProvider.name) }), jsx(DialogHeader, { children: jsx(DialogTitle, { className: "ibl-dialog-title", children: labels.title }) }), jsx("p", { className: "text-sm text-gray-600", children: labels.helpText }), jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" }), jsx(Input, { placeholder: labels.searchPlaceholder, className: "py-6 pl-9", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), autoComplete: "off", disabled: isSelecting })] }), jsx("div", { className: "sr-only", "aria-live": "polite", role: "status", children: liveMessage }), jsx("div", { className: "grid max-h-[60vh] grid-cols-1 gap-4 overflow-y-auto pr-2 sm:grid-cols-2 lg:grid-cols-3", children: sortedModels.map((item) => {
+                        var _a;
                         if (item.kind === 'cloud') {
-                            const llm = item.llm;
+                            const { llm, available: modelAvailable } = item;
                             const isActive = isCloudActive(llm);
-                            const isDisabled = !switchLLMAllowed || isSelecting || isActive || !switchProviderAllowed;
-                            return (jsxs("button", { "data-model": llm.llm_name, disabled: isDisabled, onClick: () => {
+                            const unavailableReason = modelAvailable ? undefined : modelUnavailableReason(llm);
+                            const isDisabled = !modelAvailable || isSelecting || isActive || !switchProviderAllowed;
+                            return (jsxs("button", { "data-model": llm.llm_name, "data-unavailable": modelAvailable ? 'false' : 'true', "data-availability-status": (_a = llm.availability) === null || _a === void 0 ? void 0 : _a.status, title: unavailableReason, disabled: isDisabled, onClick: () => {
                                     selectCloud(llm.llm_name);
                                 }, className: cn('flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 p-4 transition-colors', {
                                     // Matches the provider grid's inactive treatment: tinted
@@ -302477,7 +302493,7 @@ function AgentLLMTab({ showConfigurationHeader = true, mentorId: mentorIdOverrid
         // @ts-ignore
         userId: username !== null && username !== void 0 ? username : '',
     }, { skip: !username || !mentorId || !tenantKey });
-    const { data: llmProviders, isLoading: isLoadingLLMProviders } = useGetLlmsQuery({
+    const { data: llmProvidersData, isLoading: isLoadingLLMProviders } = useGetLlmsQuery({
         org: tenantKey,
         // @ts-ignore
         userId: username !== null && username !== void 0 ? username : '',
@@ -302485,6 +302501,8 @@ function AgentLLMTab({ showConfigurationHeader = true, mentorId: mentorIdOverrid
     }, {
         skip: !tenantKey || !username,
     });
+    // The generated LLMResponse type omits the credential flags the backend sends.
+    const llmProviders = llmProvidersData;
     // Providers that only offer on-device (local) models — surfaced as grid cards
     // (Tauri only) so their downloadable models are reachable even when the
     // backend LLM list has no matching cloud provider. Built from THIS device's
@@ -302578,9 +302596,6 @@ function AgentLLMTab({ showConfigurationHeader = true, mentorId: mentorIdOverrid
                                             .map((model) => {
                                             const providerLabel = llmProviderLabel(model);
                                             const isActive = !!activeProviderKey && getProviderName(model.name) === activeProviderKey;
-                                            // The generated LLM response type doesn't declare the
-                                            // credential flags the backend actually sends, so read them
-                                            // through the access-shaped view the helper expects.
                                             const isGrayed = !canAccessProvider(model) && !isActive;
                                             return (jsxs("div", { "data-testid": "llm-provider-card", "data-provider": model.name, "data-disabled": isGrayed ? 'true' : 'false', className: cn('flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md', {
                                                     'border-blue-500': isActive,
@@ -302597,11 +302612,8 @@ function AgentLLMTab({ showConfigurationHeader = true, mentorId: mentorIdOverrid
                                                         logo: model.logo,
                                                         description: model.description,
                                                         chat_models: model.chat_models,
-                                                        // @ts-ignore - has_credentials property does not exist on LLMResponse type
                                                         has_credentials: model === null || model === void 0 ? void 0 : model.has_credentials,
-                                                        // @ts-ignore - main_has_credentials property does not exist on LLMResponse type
                                                         main_has_credentials: model === null || model === void 0 ? void 0 : model.main_has_credentials,
-                                                        // @ts-ignore - can_use_main_keys property does not exist on LLMResponse type
                                                         can_use_main_keys: model === null || model === void 0 ? void 0 : model.can_use_main_keys,
                                                     });
                                                 }, children: [jsx("div", { className: "h-8 w-8 flex-shrink-0", children: jsx(LLMProviderLogo, { logo: model.logo, label: providerLabel, alt: labels.providerLogoAlt(providerLabel), className: cn({
@@ -312549,12 +312561,14 @@ function EvaluateLlmPicker({ tenantKey, username, mentorId, value, onChange, pla
     const [showProviders, setShowProviders] = React__default.useState(false);
     const [selectedProvider, setSelectedProvider] = React__default.useState(null);
     const [providerSearch, setProviderSearch] = React__default.useState('');
-    const { data: llmProviders, isLoading } = useGetLlmsQuery({
+    const { data, isLoading } = useGetLlmsQuery({
         org: tenantKey,
         // @ts-ignore - userId not on generated signature
         userId: username,
         mentorId,
     }, { skip: !tenantKey || !username || !mentorId });
+    // The generated LLMResponse type omits the credential flags the backend sends.
+    const llmProviders = data;
     const filteredProviders = React__default.useMemo(() => (llmProviders !== null && llmProviders !== void 0 ? llmProviders : []).filter((model) => model.name.toLowerCase().includes(providerSearch.toLowerCase())), [llmProviders, providerSearch]);
     // The selected provider's backend row, for its logo and label; `undefined`
     // until the catalogue loads or when the stored key no longer matches one.
@@ -312571,11 +312585,8 @@ function EvaluateLlmPicker({ tenantKey, username, mentorId, value, onChange, pla
             logo: model.logo,
             description: model.description,
             chat_models: model.chat_models,
-            // @ts-ignore - has_credentials not on LLMResponse type
             has_credentials: model === null || model === void 0 ? void 0 : model.has_credentials,
-            // @ts-ignore - main_has_credentials not on LLMResponse type
             main_has_credentials: model === null || model === void 0 ? void 0 : model.main_has_credentials,
-            // @ts-ignore - can_use_main_keys not on LLMResponse type
             can_use_main_keys: model === null || model === void 0 ? void 0 : model.can_use_main_keys,
         });
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iblai/iblai-js",
-  "version": "2.29.1",
+  "version": "2.30.0",
   "description": "Unified JavaScript SDK for IBL.ai — re-exports data-layer, web-containers, and web-utils under a single package",
   "type": "module",
   "engines": {
@@ -76,9 +76,9 @@
     "axios": "1.13.6",
     "dotenv": "16.6.1",
     "winston": "3.19.0",
-    "@iblai/data-layer": "1.26.0",
-    "@iblai/mcp": "1.24.1",
-    "@iblai/web-containers": "1.35.0",
+    "@iblai/data-layer": "1.27.0",
+    "@iblai/mcp": "1.25.0",
+    "@iblai/web-containers": "1.35.1",
     "@iblai/web-utils": "2.6.1"
   },
   "peerDependencies": {