@iblai/iblai-js 2.11.0 → 2.11.2

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

@@ -2132,7 +2132,7 @@ var analyticsAnalyticsOverview$3 = {
 	topicsChartDescription: "The most discussed topics, ranked by how many messages each one generated.",
 	activeUsersChartDescription: "Unique active users per day, showing how engagement changes over time.",
 	llmSpend: "LLM spend",
-	llmSpendDescription: "Raw cost of every traced LLM call in the selected period, from the trace store. Billing totals live on the Cost & LLM tab.",
+	llmSpendDescription: "Raw cost of every traced LLM call in the selected period, from the trace store. Billing totals live on the Cost tab.",
 	allTopics: "All topics",
 	topicsRankedFooter: "{shown} of {total} topics · ranked by message volume"
 };
@@ -8089,7 +8089,7 @@ var analyticsChartCard$3 = {
 	adjustRangeHint: "This card only — the page range stays where it is."
 };
 var analyticsCostTabs$3 = {
-	ariaLabel: "Cost & LLM sections",
+	ariaLabel: "Cost sections",
 	spend: "Spend",
 	usage: "Usage & latency",
 	traces: "Traces"
@@ -9280,7 +9280,7 @@ var analyticsAnalyticsOverview$2 = {
 	topicsChartDescription: "Les sujets les plus abordés, classés selon le nombre de messages générés.",
 	activeUsersChartDescription: "Utilisateurs actifs uniques par jour, pour suivre l’évolution de l’engagement.",
 	llmSpend: "Dépenses LLM",
-	llmSpendDescription: "Coût brut de chaque appel LLM tracé sur la période sélectionnée, issu du magasin de traces. Les totaux de facturation sont dans l'onglet Coûts et LLM.",
+	llmSpendDescription: "Coût brut de chaque appel LLM tracé sur la période sélectionnée, issu du magasin de traces. Les totaux de facturation sont dans l'onglet Coûts.",
 	allTopics: "Tous les sujets",
 	topicsRankedFooter: "{shown} sur {total} sujets · classés par volume de messages"
 };
@@ -15237,7 +15237,7 @@ var analyticsChartCard$2 = {
 	adjustRangeHint: "Cette carte uniquement — la plage de la page reste inchangée."
 };
 var analyticsCostTabs$2 = {
-	ariaLabel: "Sections Coûts et LLM",
+	ariaLabel: "Sections Coûts",
 	spend: "Dépenses",
 	usage: "Utilisation et latence",
 	traces: "Traces"
@@ -16428,7 +16428,7 @@ var analyticsAnalyticsOverview$1 = {
 	topicsChartDescription: "Los temas más tratados, ordenados por la cantidad de mensajes que generó cada uno.",
 	activeUsersChartDescription: "Usuarios activos únicos por día, para ver cómo cambia la participación con el tiempo.",
 	llmSpend: "Gasto LLM",
-	llmSpendDescription: "Costo bruto de cada llamada LLM trazada en el período seleccionado, del almacén de trazas. Los totales de facturación están en la pestaña Costos y LLM.",
+	llmSpendDescription: "Costo bruto de cada llamada LLM trazada en el período seleccionado, del almacén de trazas. Los totales de facturación están en la pestaña Costos.",
 	allTopics: "Todos los temas",
 	topicsRankedFooter: "{shown} de {total} temas · ordenados por volumen de mensajes"
 };
@@ -22385,7 +22385,7 @@ var analyticsChartCard$1 = {
 	adjustRangeHint: "Solo esta tarjeta — el rango de la página no cambia."
 };
 var analyticsCostTabs$1 = {
-	ariaLabel: "Secciones de Costos y LLM",
+	ariaLabel: "Secciones de Costos",
 	spend: "Gasto",
 	usage: "Uso y latencia",
 	traces: "Trazas"
@@ -23576,7 +23576,7 @@ var analyticsAnalyticsOverview = {
 	topicsChartDescription: "讨论最多的主题，按各自产生的消息数排序。",
 	activeUsersChartDescription: "每日独立活跃用户数，展示参与度随时间的变化。",
 	llmSpend: "LLM 支出",
-	llmSpendDescription: "所选时段内每次被追踪的 LLM 调用的原始成本，来自追踪存储。计费总额在成本与 LLM 页。",
+	llmSpendDescription: "所选时段内每次被追踪的 LLM 调用的原始成本，来自追踪存储。计费总额在成本页。",
 	allTopics: "所有主题",
 	topicsRankedFooter: "共 {total} 个主题，显示 {shown} 个 · 按消息量排序"
 };
@@ -29533,7 +29533,7 @@ var analyticsChartCard = {
 	adjustRangeHint: "仅此卡片 — 页面范围保持不变。"
 };
 var analyticsCostTabs = {
-	ariaLabel: "成本与 LLM 分区",
+	ariaLabel: "成本分区",
 	spend: "支出",
 	usage: "用量与延迟",
 	traces: "追踪"
@@ -192840,111 +192840,6 @@ function CreateApiModal({ isOpen, onClose, tenantKey, username }) {
                                                 : t('apiTabLabels.createModal.submit') })) }) })] })] }) }), apiKey && jsx(ApiKeyModal, { isOpen: true, onClose: () => setApiKey(null), apiKey: apiKey })] }));
 }
 
-/**
- * Small pure utilities colocated with the LLM tab.
- * Ported from standalone's `@/lib/utils` and `@/lib/error`.
- */
-// Canonical provider name for any label — a backend key ("azure_openai"), a
-// human label ("Microsoft"), or a local model's provider ("Meta"). Folds every
-// alias onto one identity so the same provider from different sources compares
-// equal. See getProviderName.
-const PROVIDER_NAME_BY_ALIAS = {
-    microsoft: 'azure_openai',
-    azureopenai: 'azure_openai',
-    openai: 'openai',
-    google: 'google',
-    gemini: 'google',
-    meta: 'llama',
-    metallama: 'llama',
-    llama: 'llama',
-    mistral: 'mistral',
-    mistralai: 'mistral',
-    nvidia: 'nvidia',
-    iblchatnvidia: 'nvidia',
-    deepseek: 'deepseek',
-    anthropic: 'anthropic',
-    iblchatanthropic: 'anthropic',
-    claude: 'anthropic',
-    groq: 'groq',
-    perplexity: 'perplexity',
-    xai: 'xai',
-    bedrock: 'bedrock',
-    amazonbedrock: 'bedrock',
-    amazon: 'bedrock',
-    iblchatbedrock: 'bedrock',
-    alibaba: 'alibaba',
-    qwen: 'alibaba',
-    ibm: 'ibm',
-    granite: 'ibm',
-    // ibl.ai's own hosted provider. The backend key is `iblai` (NameEnum.IBLAI);
-    // the extra aliases cover the `IBLChat<Vendor>` house spelling and the
-    // dotted/spaced brand forms, which all normalize to one of these.
-    iblai: 'iblai',
-    ibl: 'iblai',
-    iblchatibl: 'iblai',
-    iblchatiblai: 'iblai',
-};
-/**
- * Canonical provider name for any label, case- and punctuation-insensitive.
- * Folds backend keys and human/display labels onto one identity — e.g.
- * `getProviderName('Microsoft') === 'azure_openai'`,
- * `getProviderName('Meta') === 'llama'`, `getProviderName('Google') === 'google'`.
- * Unknown providers return their normalized (lowercased, alphanumeric-only) form.
- *
- * This is the single source of truth for provider identity, which matters as
- * soon as on-device models enter the picture: the local catalog labels its
- * providers the human way ("Meta", "Microsoft", "Alibaba") while the backend LLM
- * list uses wire keys ("llama", "azure_openai"). Comparing the two raw would
- * render a duplicate card for the same vendor.
- */
-function getProviderName(llmProvider) {
-    var _a;
-    const normalized = (llmProvider !== null && llmProvider !== void 0 ? llmProvider : '').toLowerCase().replace(/[^a-z0-9]/g, '');
-    return (_a = PROVIDER_NAME_BY_ALIAS[normalized]) !== null && _a !== void 0 ? _a : normalized;
-}
-
-// Logo + display name keyed by canonical provider name (see getProviderName).
-const PROVIDER_DETAILS_BY_NAME = {
-    groq: { logo: '/llm-groq-provider.png', name: 'Groq' },
-    nvidia: { logo: '/llm-nvidia-provider.webp', name: 'NVIDIA' },
-    azure_openai: { logo: '/llm-microsoft-provider.png', name: 'Microsoft' },
-    openai: { logo: '/llm-openai-provider-2.svg', name: 'OpenAI' },
-    mistral: { logo: '/llm-mistral-provider.jpeg', name: 'Mistral' },
-    google: { logo: '/llm-google-provider.svg', name: 'Google' },
-    llama: { logo: '/llm-llama-provider.jpeg', name: 'Meta' },
-    anthropic: { logo: '/llm-claude-provider.png', name: 'Anthropic' },
-    perplexity: { logo: '/llm-perplexity-provider.webp', name: 'Perplexity' },
-    deepseek: { logo: '/llm-deepseek-provider.png', name: 'DeepSeek' },
-    xai: { logo: '/llm-xai-provider.jpg', name: 'xAI' },
-    bedrock: { logo: '/llm-amazon-provider.png', name: 'Amazon' },
-    alibaba: { logo: '/llm-alibaba-provider.png', name: 'Alibaba' },
-    ibm: { logo: '/llm-ibm-provider.png', name: 'IBM' },
-    iblai: { logo: '/llm-iblai-provider.png', name: 'ibl.ai' },
-};
-/**
- * Returns the canonical logo path and display name for an LLM provider.
- *
- * Resolution goes through {@link getProviderName}, so a backend wire key
- * (`azure_openai`), a human label (`Microsoft`) and an on-device catalog's
- * provider string (`Meta`, `Alibaba`) all land on the same entry — the provider
- * grid merges cloud and on-device providers into one list, so the two spellings
- * have to agree.
- *
- * `logo` is a static-root path (e.g. `/llm-amazon-provider.png`); the package
- * ships the canonical assets under `@iblai/web-containers/public/` — copy them
- * into your app's static-root (`public/` for Next.js) so the paths resolve.
- */
-function getLLMProviderDetails(llmProvider, llmName) {
-    var _a;
-    const name = getProviderName(llmProvider);
-    // OpenAI and Google use a model-specific logo when a concrete model is named.
-    if (name === 'openai' && llmName)
-        return { logo: '/llm-openai-provider.jpg', name: 'OpenAI' };
-    if (name === 'google' && llmName)
-        return { logo: '/llm-gemini-provider.png', name: 'Google' };
-    return (_a = PROVIDER_DETAILS_BY_NAME[name]) !== null && _a !== void 0 ? _a : { logo: '/llm-generic-provider.png', name: llmProvider };
-}
-
 // Dynamic schema based on selected provider
 const createDynamicSchema$1 = (schemaFields) => {
     const schemaObj = {
@@ -193173,14 +193068,9 @@ function CreateLLMModal({ isOpen, onClose, tenantKey, onSuccess }) {
                                                 }
                                             }, children: [jsx(SelectTrigger, { children: jsx(SelectValue, { placeholder: t('llmsTabCreateLlmModal.selectProviderPlaceholder') }) }), jsx(SelectContent, { children: availableProviders.map((provider) => {
                                                         var _a, _b;
-                                                        // Prefer the logo the API ships; fall back to the
-                                                        // bundled provider artwork so known providers (ibl.ai
-                                                        // included) never degrade to a generic key emoji.
-                                                        const providerLogo = ((_a = provider === null || provider === void 0 ? void 0 : provider.service_info) === null || _a === void 0 ? void 0 : _a.logo) ||
-                                                            getLLMProviderDetails(provider.name).logo;
-                                                        const providerName = ((_b = provider === null || provider === void 0 ? void 0 : provider.service_info) === null || _b === void 0 ? void 0 : _b.display_name) ||
-                                                            provider.name;
-                                                        return (jsx(SelectItem, { value: provider.name, children: jsxs("div", { className: "flex items-center gap-2", children: [jsx("img", { src: providerLogo, alt: provider.name, className: "w-4 h-4 rounded-sm object-contain" }), providerName || provider.name] }) }, provider.name));
+                                                        const providerLogo = (_a = provider.service_info) === null || _a === void 0 ? void 0 : _a.logo;
+                                                        const providerName = ((_b = provider.service_info) === null || _b === void 0 ? void 0 : _b.display_name) || provider.name;
+                                                        return (jsx(SelectItem, { value: provider.name, children: jsxs("div", { className: "flex items-center gap-2", children: [providerLogo ? (jsx("img", { src: providerLogo, alt: providerName, className: "w-4 h-4 rounded-sm object-contain" })) : (jsx("span", { children: "\uD83D\uDD11" })), providerName] }) }, provider.name));
                                                     }) })] }), shouldShowError && (jsx("p", { className: "text-red-500 text-xs", children: (_b = field.state.meta.errors[0]) === null || _b === void 0 ? void 0 : _b.message }))] }));
                             } })), isCredentialsSchemaLoading && (jsxs("div", { className: "flex items-center justify-center py-4", children: [jsx(LoaderCircle, { className: "h-4 w-4 animate-spin mr-2" }), jsx("span", { className: "text-sm text-gray-600", children: t('llmsTabCreateLlmModal.loadingProviderConfigurations') })] })), showProviderForm && !isCredentialsSchemaLoading && !isAzureOpenAI && (jsx(Fragment$1, { children: schemaFields.map((fieldName) => (jsx(form.Field, { name: fieldName, children: (field) => {
                                     var _a, _b;
@@ -193267,26 +193157,18 @@ function IntegrationLLMsTab({ tenantKey }) {
         }
     };
     return (jsxs("div", { className: "space-y-4", children: [jsx(InfoBanner, { icon: jsx(Bot, { className: "w-5 h-5" }), children: t('llmsTabIntegrationLlmsTab.infoBannerText') }), jsx("div", { className: "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-x-auto", children: jsxs("table", { className: "w-full text-sm min-w-[600px]", children: [jsx("thead", { className: "bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600", children: jsxs("tr", { children: [jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: t('llmsTabIntegrationLlmsTab.colName') }), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400", children: t('llmsTabIntegrationLlmsTab.colKey') }), jsx("th", { className: "px-6 py-3 text-left font-medium text-gray-500 dark:text-gray-400 w-[50px]" })] }) }), jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-600", children: isMaskedCredentialsLoading ? (jsx("tr", { children: jsx("td", { colSpan: 3, className: "px-6 py-8 text-center text-sm text-gray-500", children: t('llmsTabIntegrationLlmsTab.loading') }) })) : maskedCredentials.length === 0 ? (jsx("tr", { children: jsx("td", { colSpan: 3, className: "px-6 py-8 text-center text-sm text-gray-500", children: t('llmsTabIntegrationLlmsTab.noLlmKeysFound') }) })) : (maskedCredentials.map((cred, idx) => {
-                                var _a, _b, _c;
+                                var _a, _b, _c, _d, _e;
                                 const provider = ((_a = cred.service_info) === null || _a === void 0 ? void 0 : _a.display_name) || cred.name;
-                                // Prefer the logo the API ships; fall back to the bundled
-                                // provider artwork so known providers (ibl.ai included) never
-                                // degrade to a generic key emoji.
-                                let logoUrl;
-                                let logoAlt;
-                                if ((_b = cred.service_info) === null || _b === void 0 ? void 0 : _b.logo) {
-                                    logoUrl = cred.service_info.logo;
-                                    logoAlt = cred.service_info.display_name || cred.service_info.name;
-                                }
-                                else {
-                                    logoUrl = getLLMProviderDetails(cred.name).logo;
-                                }
+                                // Logos are backend-owned (`service_info.logo`); no bundled fallback.
+                                const logoUrl = (_b = cred.service_info) === null || _b === void 0 ? void 0 : _b.logo;
                                 const isAzure = isAzureOpenAI(cred);
                                 const azureModels = isAzure ? getAzureModels(cred) : [];
                                 const isExpanded = expandedRows.has(cred.name);
-                                return (jsxs(React__default.Fragment, { children: [jsxs("tr", { children: [jsx("td", { className: "px-6 py-4", children: jsxs("div", { className: "flex items-center gap-2", children: [jsx("img", { src: logoUrl, alt: logoAlt || provider || cred.name, className: "w-6 h-6 rounded-sm object-contain" }), jsx("span", { className: "font-normal text-gray-900 dark:text-gray-100", children: provider || cred.name }), isAzure && azureModels.length > 0 && (jsx("button", { type: "button", onClick: () => toggleRowExpansion(cred.name), className: "p-0.5 hover:bg-gray-100 rounded", children: isExpanded ? (jsx(ChevronUp, { className: "h-4 w-4 text-gray-500" })) : (jsx(ChevronDown, { className: "h-4 w-4 text-gray-500" })) }))] }) }), jsx("td", { className: "px-6 py-4 font-mono text-sm text-gray-900 dark:text-gray-100", children: isAzure ? (jsx("span", { className: "text-xs text-gray-500", children: t('llmsTabIntegrationLlmsTab.azureModelCount', {
+                                return (jsxs(React__default.Fragment, { children: [jsxs("tr", { children: [jsx("td", { className: "px-6 py-4", children: jsxs("div", { className: "flex items-center gap-2", children: [logoUrl ? (jsx("img", { src: logoUrl, alt: ((_c = cred.service_info) === null || _c === void 0 ? void 0 : _c.display_name) ||
+                                                                    ((_d = cred.service_info) === null || _d === void 0 ? void 0 : _d.name) ||
+                                                                    cred.name, className: "w-6 h-6 rounded-sm object-contain" })) : (jsx("span", { className: "text-lg", children: '🔑' })), jsx("span", { className: "font-normal text-gray-900 dark:text-gray-100", children: provider || cred.name }), isAzure && azureModels.length > 0 && (jsx("button", { type: "button", onClick: () => toggleRowExpansion(cred.name), className: "p-0.5 hover:bg-gray-100 rounded", children: isExpanded ? (jsx(ChevronUp, { className: "h-4 w-4 text-gray-500" })) : (jsx(ChevronDown, { className: "h-4 w-4 text-gray-500" })) }))] }) }), jsx("td", { className: "px-6 py-4 font-mono text-sm text-gray-900 dark:text-gray-100", children: isAzure ? (jsx("span", { className: "text-xs text-gray-500", children: t('llmsTabIntegrationLlmsTab.azureModelCount', {
                                                             count: azureModels.length,
-                                                        }) })) : (String((_c = cred === null || cred === void 0 ? void 0 : cred.value) === null || _c === void 0 ? void 0 : _c.key).slice(0, 15) || '') }), jsx("td", { className: "px-6 py-4", children: jsx(Button$1, { variant: "ghost", size: "sm", className: "cursor-pointer mr-2", disabled: isDeletingIntegration || isDeletingCredential, onClick: () => handleDeleteCredential(cred.name, cred.platform, false), children: jsx(Trash, { className: "h-4 w-4" }) }) })] }), isAzure &&
+                                                        }) })) : (String((_e = cred === null || cred === void 0 ? void 0 : cred.value) === null || _e === void 0 ? void 0 : _e.key).slice(0, 15) || '') }), jsx("td", { className: "px-6 py-4", children: jsx(Button$1, { variant: "ghost", size: "sm", className: "cursor-pointer mr-2", disabled: isDeletingIntegration || isDeletingCredential, onClick: () => handleDeleteCredential(cred.name, cred.platform, false), children: jsx(Trash, { className: "h-4 w-4" }) }) })] }), isAzure &&
                                             isExpanded &&
                                             azureModels.map((model, modelIdx) => (jsxs("tr", { children: [jsx("td", { className: "px-6 py-4 pl-12", children: jsx("span", { className: "text-sm text-gray-700", children: model.modelName.toLowerCase() }) }), jsx("td", { className: "px-6 py-4 font-mono text-sm text-gray-600", children: model.maskedKey.slice(0, 15) || '' }), jsx("td", { className: "px-6 py-4", children: jsx(Button$1, { variant: "ghost", size: "sm", className: "cursor-pointer", disabled: isDeletingIntegration || isDeletingCredential, onClick: () => handleDeleteCredential(cred.name, cred.platform, false, model.modelName), children: jsx(Trash, { className: "h-4 w-4" }) }) })] }, `${cred.name}-${model.modelName}-${modelIdx}`)))] }, cred.name + idx));
                             })) })] }) })] }));
@@ -229549,7 +229431,7 @@ const useOverview = ({ tenantKey, mentorId, usergroupIds, }) => {
         ...((usergroupIds === null || usergroupIds === void 0 ? void 0 : usergroupIds.length) ? { usergroup_ids: usergroupIds } : {}),
     });
     // LLM spend joins the KPI row so cost is visible before anyone opens the
-    // Cost & LLM tab. It follows the page range; unavailable renders as an
+    // Cost tab. It follows the page range; unavailable renders as an
     // em-dash, never $0.00.
     const globalFilters = (_o = useAnalyticsGlobalFilters()) === null || _o === void 0 ? void 0 : _o.filters;
     const { data: llmSpendData, isLoading: isLoadingLlmSpend, error: llmSpendError, } = useGetLlmUsageMetricsQuery({
@@ -229959,7 +229841,7 @@ const defaultTabs = [
     },
     {
         // The unified cost surface: ClickHouse billing + Langfuse LLM usage.
-        label: 'Cost & LLM',
+        label: 'Cost',
         value: 'financial',
     },
     {
@@ -230507,7 +230389,7 @@ const byProvider = (models) => {
         .sort((a, b) => b.total_cost - a.total_cost);
 };
 /**
- * Spend view-model for the Cost & LLM tab, backed by the ClickHouse
+ * Spend view-model for the Cost tab, backed by the ClickHouse
  * `/api/ai-analytics/` cost endpoints (KPIs, per-model, per-user) and the
  * Langfuse `llm-usage` metrics resource (the daily spend series). The
  * deprecated `/api/analytics/financial/` family is gone; the return shape is
@@ -230716,7 +230598,7 @@ const formatCompactNumber = (value) => {
 const formatLatencySeconds = (value) => `${value.toFixed(2)}s`;
 const UNAVAILABLE = '—';
 /**
- * The Langfuse side of the Cost & LLM tab: tokens, calls, latency percentiles
+ * The Langfuse side of the Cost tab: tokens, calls, latency percentiles
  * and spend breakdowns per service and model. Ranked per-user/per-session
  * totals live on the Spend sub-tab (ClickHouse) — Langfuse cannot group by
  * those dimensions.
@@ -230788,7 +230670,7 @@ function useDebouncedValue(value, delay) {
 }
 /**
  * Tenant user picker for the analytics filter rows — memory, transcripts and
- * the Cost & LLM traces list.
+ * the Cost traces list.
  * Both endpoints behind it do the searching, so the dropdown only pages in the
  * first {@link USERS_PAGE_SIZE} matches for whatever is typed rather than
  * filtering client-side.
@@ -231105,7 +230987,7 @@ function SpendTab({ tenantKey, mentorId: currentMentorId, userId, onOpenUserTrac
                                         }) }), jsxs("div", { className: "flex items-center space-x-2", children: [jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handleFirstPage, disabled: costPerUserPage === 1, children: [jsx("span", { className: "sr-only", children: t('analyticsAnalyticsFinancialStats.goToFirstPage') }), jsx(ChevronsLeft, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handlePreviousPage, disabled: costPerUserPage === 1, children: [jsx("span", { className: "sr-only", children: t('analyticsAnalyticsFinancialStats.goToPreviousPage') }), jsx(ChevronLeft, { className: "h-4 w-4" })] }), generatePageNumbers().map((page, index) => (jsx(React__default.Fragment, { children: page === '...' ? (jsx("span", { className: "px-2 text-gray-500", children: "..." })) : (jsx(Button$1, { variant: costPerUserPage === page ? 'default' : 'outline', size: "sm", className: `h-8 p-3 !w-auto !inline-flex ${costPerUserPage === page ? 'bg-blue-50 text-blue-600' : 'bg-transparent'}`, onClick: () => setCostPerUserPage(page), children: page })) }, index))), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handleNextPage, disabled: costPerUserPage === detailedCostPerUserData.total_pages, children: [jsx("span", { className: "sr-only", children: t('analyticsAnalyticsFinancialStats.goToNextPage') }), jsx(ChevronRight, { className: "h-4 w-4" })] }), jsxs(Button$1, { variant: "outline", size: "sm", className: "h-8 p-2 !w-auto !inline-flex bg-transparent", onClick: handleLastPage, disabled: costPerUserPage === detailedCostPerUserData.total_pages, children: [jsx("span", { className: "sr-only", children: t('analyticsAnalyticsFinancialStats.goToLastPage') }), jsx(ChevronsRight, { className: "h-4 w-4" })] })] })] }))] }) }) })] }));
 }
 /**
- * The Cost & LLM tab: one surface over two backends, split where the backends
+ * The Cost tab: one surface over two backends, split where the backends
  * actually split. Spend is ClickHouse (billing truth: marked-up USD, ranked
  * per-user history); Usage & latency and Traces are the Langfuse proxy
  * (tokens, latency percentiles, per-call drill-down). Every card names its
@@ -237407,6 +237289,41 @@ function SignupButton({ authUrl, tenantKey, redirectTo, label = 'Sign Up', onCli
 }
 SignupButton.displayName = 'SignupButton';
 
+/**
+ * A provider's logo as the backend serves it. Provider naming and artwork are
+ * owned by the API (`LLMResponse.logo`, `ExternalServiceInfo.logo`), so there
+ * is no bundled fallback image: a provider without a logo renders a neutral
+ * initial instead, keeping the card layout intact.
+ */
+function LLMProviderLogo({ logo, label, alt = label, size = 32, className, }) {
+    if (logo) {
+        return (jsx(Image$4, { src: logo, alt: alt, className: cn('h-full w-full object-contain', className), width: size, height: size, loading: "lazy" }));
+    }
+    return (jsx("span", { role: "img", "aria-label": alt, "data-testid": "llm-provider-logo-placeholder", className: cn('flex h-full w-full items-center justify-center rounded bg-gray-100 text-xs font-semibold text-gray-500 uppercase', className), children: label.charAt(0) }));
+}
+
+/**
+ * Small pure utilities colocated with the LLM tab.
+ * Ported from standalone's `@/lib/utils` and `@/lib/error`.
+ */
+/**
+ * The label a provider renders with: the backend's `display_name` when it
+ * ships one, else its raw `name`. There is deliberately no frontend map behind
+ * this — naming (and the logo next to it) is owned by the backend.
+ */
+function llmProviderLabel(provider) {
+    return provider.display_name || provider.name;
+}
+/**
+ * The label a chat model renders with: the backend's `display_name` (`GPT-4.1
+ * Mini`) when it ships one, else the raw wire key (`gpt-4.1-mini`). Same rule
+ * as {@link llmProviderLabel}; every model list (LLM tab, sandbox) goes through
+ * here so they never drift apart.
+ */
+function llmModelLabel(model) {
+    return model.display_name || model.llm_name;
+}
+
 function OverlayModal({ open, onClose, title, description, className, children, }) {
     const t = useT();
     const [mounted, setMounted] = useState(false);
@@ -237442,15 +237359,22 @@ function canSwitchProvider(providers, name) {
 function LLMProviderModal({ isOpen, onClose, onSelect, llmProvider, isSelecting, mentorSettings, llms, }) {
     const t = useT();
     const [searchQuery, setSearchQuery] = useState('');
+    const providerLabel = llmProviderLabel(llmProvider);
     const filteredLLMs = useMemo(() => {
-        return llmProvider === null || llmProvider === void 0 ? void 0 : llmProvider.chat_models.filter((llm) => llm.llm_name.toLowerCase().includes(searchQuery.toLowerCase()));
+        const query = searchQuery.toLowerCase();
+        // Match either label, same as the LLM tab's picker: rows show
+        // `display_name`, but the raw key stays searchable.
+        return llmProvider === null || llmProvider === void 0 ? void 0 : llmProvider.chat_models.filter((llm) => {
+            var _a;
+            return llm.llm_name.toLowerCase().includes(query) ||
+                ((_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) => {
                     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 providerDetails = getLLMProviderDetails(llmProvider.name, llm.llm_name);
                     const isDisabled = !switchLLMAllowed || isSelecting || isActive || !switchProviderAllowed;
                     return (jsxs("button", { disabled: isDisabled, onClick: () => {
                             onSelect(llmProvider.name, llm.llm_name);
@@ -237458,11 +237382,9 @@ function LLMProviderModal({ isOpen, onClose, onSelect, llmProvider, isSelecting,
                             'cursor-not-allowed border-gray-200 bg-white': isDisabled,
                             'hover:border-blue-500 hover:bg-blue-50': !isDisabled,
                             'cursor-not-allowed border-blue-500 bg-blue-50': isActive,
-                        }), children: [jsx("span", { className: "flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg", children: jsx("img", { src: providerDetails.logo, alt: t('clawSandboxLlmProviderModal.providerIconAlt', {
-                                        providerName: providerDetails.name,
-                                    }), className: cn('h-full w-full object-contain', {
-                                        grayscale: isDisabled && !isActive,
-                                    }), width: 32, height: 32, loading: "lazy" }) }), jsx("span", { className: "text-left text-sm font-medium text-[#646464]", children: llm.llm_name })] }, llm.llm_name));
+                        }), children: [jsx("span", { className: "flex h-8 w-8 items-center justify-center overflow-hidden rounded-lg", children: jsx(LLMProviderLogo, { logo: llmProvider.logo, label: providerLabel, alt: t('clawSandboxLlmProviderModal.providerIconAlt', {
+                                        providerName: providerLabel,
+                                    }), className: cn({ grayscale: isDisabled && !isActive }) }) }), jsx("span", { className: "text-left text-sm font-medium text-[#646464]", children: llmModelLabel(llm) })] }, llm.llm_name));
                 }) })] }));
 }
 
@@ -237633,6 +237555,13 @@ function SandboxConfig({ platformKey, mentorUniqueId, username }) {
     const availableLLMProviders = useMemo(() => (llmProviders !== null && llmProviders !== void 0 ? llmProviders : []), [llmProviders]);
     const filteredLLMProviders = useMemo(() => availableLLMProviders.filter((provider) => provider.name.toLowerCase().includes(llmSearchQuery.toLowerCase())), [availableLLMProviders, llmSearchQuery]);
     const currentModel = parseModelIdentifier(agentConfig === null || agentConfig === void 0 ? void 0 : agentConfig.model);
+    const currentModelProvider = availableLLMProviders.find((provider) => provider.name === currentModel.provider);
+    // Same backend `display_name` the pickers render, so the trigger reads
+    // `GPT-4.1 Mini` rather than the `gpt-4.1-mini` wire key stored in `model`.
+    const currentChatModel = currentModelProvider === null || currentModelProvider === void 0 ? void 0 : currentModelProvider.chat_models.find((llm) => llm.llm_name === currentModel.llmName);
+    const currentModelLabel = currentChatModel
+        ? llmModelLabel(currentChatModel)
+        : currentModel.llmName || (agentConfig === null || agentConfig === void 0 ? void 0 : agentConfig.model);
     const isUpdatingLLM = isUpdatingAgent;
     // Push fails server-side with "No configuration to push" when every AgentConfig
     // field is empty. Detect that locally so we can deny the click and tell the user
@@ -237920,17 +237849,17 @@ function SandboxConfig({ platformKey, mentorUniqueId, username }) {
                                                 }), children: ((_f = mentorConfig === null || mentorConfig === void 0 ? void 0 : mentorConfig.last_config_push_status) === null || _f === void 0 ? void 0 : _f.toLocaleLowerCase()) === 'success' ? (jsx(CircleCheck, { className: "h-4 w-4 text-green-600" })) : (jsx(CircleX, { className: "h-4 w-4 text-red-600" })) }) }), jsx(TooltipContent, { className: "ibl-tooltip-content", children: jsx("p", { className: "capitalize", children: mentorConfig.last_config_push_status }) })] }) }))] }), jsx(TooltipProvider, { children: jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { className: "inline-flex", children: jsxs(Button$1, { variant: "outline", size: "sm", onClick: handlePush, disabled: isPushing || !hasAgentConfiguration, "aria-disabled": isPushing || !hasAgentConfiguration, children: [isPushing ? (jsx(LoaderCircle, { className: "h-4 w-4 animate-spin mr-2" })) : (jsx(RefreshCw, { className: "h-4 w-4 mr-2" })), t('clawSandboxSandboxConfig.push')] }) }) }), !hasAgentConfiguration && (jsx(TooltipContent, { className: "ibl-tooltip-content", children: jsx("p", { children: t('clawSandboxSandboxConfig.setAgentConfigBeforePushing') }) }))] }) })] }), jsxs("div", { className: "flex items-center justify-between rounded-lg border p-6", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm font-medium text-gray-700", children: t('clawSandboxSandboxConfig.model') }), jsx(TooltipProvider, { children: jsxs(Tooltip$1, { children: [jsx(TooltipTrigger, { "aria-label": t('clawSandboxSandboxConfig.modelInfoAriaLabel'), children: jsx(Info$3, { className: "h-4 w-4 text-gray-400" }) }), jsx(TooltipContent, { className: "ibl-tooltip-content", children: jsx("p", { children: t('clawSandboxSandboxConfig.modelTooltip') }) })] }) })] }), jsx("div", { className: "flex items-center gap-3", children: (agentConfig === null || agentConfig === void 0 ? void 0 : agentConfig.model) ? (jsxs("button", { type: "button", className: "flex items-center gap-2 text-sm font-medium text-[#646464] transition-colors hover:text-[#484848] disabled:opacity-50", onClick: () => {
                                 setLlmSearchQuery('');
                                 setShowLLMPicker(true);
-                            }, disabled: isUpdatingLLM, "aria-label": t('clawSandboxSandboxConfig.changeModel'), children: [jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-white border", children: jsx("img", { src: getLLMProviderDetails(currentModel.provider, currentModel.llmName).logo, alt: t('clawSandboxSandboxConfig.providerLogoAlt', {
+                            }, disabled: isUpdatingLLM, "aria-label": t('clawSandboxSandboxConfig.changeModel'), children: [jsx("span", { className: "flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-white border", children: jsx(LLMProviderLogo, { logo: currentModelProvider === null || currentModelProvider === void 0 ? void 0 : currentModelProvider.logo, label: currentModel.llmName || currentModel.provider, alt: t('clawSandboxSandboxConfig.providerLogoAlt', {
                                             name: currentModel.llmName || currentModel.provider,
-                                        }), className: "h-5 w-5 object-contain", width: 20, height: 20, loading: "lazy" }) }), jsx("span", { className: "max-w-[200px] truncate", children: currentModel.llmName || agentConfig.model }), jsx(ChevronDown, { className: "h-4 w-4 text-gray-500" })] })) : (jsx(Button$1, { variant: "outline", size: "sm", onClick: () => {
+                                        }), size: 20, className: "h-5 w-5" }) }), jsx("span", { className: "max-w-[200px] truncate", children: currentModelLabel }), jsx(ChevronDown, { className: "h-4 w-4 text-gray-500" })] })) : (jsx(Button$1, { variant: "outline", size: "sm", onClick: () => {
                                 setLlmSearchQuery('');
                                 setShowLLMPicker(true);
                             }, disabled: isUpdatingLLM, children: t('clawSandboxSandboxConfig.selectModel') })) })] }), jsxs(OverlayModal, { open: showDisconnectConfirm, onClose: () => setShowDisconnectConfirm(false), title: t('clawSandboxSandboxConfig.disconnectInstanceTitle'), className: "max-w-md", children: [jsx("p", { className: "text-sm text-gray-600", children: t('clawSandboxSandboxConfig.disconnectInstanceConfirm', {
                             name: (_g = connectedInstance === null || connectedInstance === void 0 ? void 0 : connectedInstance.name) !== null && _g !== void 0 ? _g : mentorConfig.server_name,
                         }) }), jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [jsx(Button$1, { variant: "outline", onClick: () => setShowDisconnectConfirm(false), children: t('clawSandboxSandboxConfig.cancel') }), jsx(Button$1, { onClick: handleDisconnect, disabled: isDeleting, className: "bg-red-600 text-white hover:bg-red-700", children: isDeleting
                                     ? t('clawSandboxSandboxConfig.disconnecting')
-                                    : t('clawSandboxSandboxConfig.disconnect') })] })] }), showLLMPicker && !selectedLLMProvider && (jsx(OverlayModal, { open: !selectedLLMProvider, onClose: closeLLMPicker, title: t('clawSandboxSandboxConfig.selectProviderTitle'), description: t('clawSandboxSandboxConfig.selectProviderDescription'), className: "max-w-3xl", children: !resolvedUsername ? (jsx("p", { className: "py-6 text-center text-sm text-gray-500", children: t('clawSandboxSandboxConfig.noUsernameForProviders') })) : (jsxs(Fragment$1, { children: [jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-500" }), jsx(Input, { id: "llm-search", name: "llm-search", type: "search", placeholder: t('clawSandboxSandboxConfig.searchProvidersPlaceholder'), className: "w-full py-6 pl-9", value: llmSearchQuery, onChange: (e) => setLlmSearchQuery(e.target.value) })] }), isLoadingLLMProviders ? (jsx("div", { className: "flex items-center justify-center py-10", children: jsx(LoaderCircle, { className: "h-5 w-5 animate-spin text-blue-500" }) })) : isLLMProvidersError ? (jsx("p", { className: "py-6 text-center text-sm text-red-500", children: t('clawSandboxSandboxConfig.failedToLoadProviders') })) : filteredLLMProviders.length === 0 ? (jsx("p", { className: "py-6 text-center text-sm text-gray-500", children: t('clawSandboxSandboxConfig.noProvidersAvailable') })) : (jsx("div", { className: "mt-2 grid max-h-[50vh] grid-cols-1 gap-4 overflow-y-auto pr-2 sm:grid-cols-2 lg:grid-cols-3", children: filteredLLMProviders.map((provider) => {
-                                const providerDetails = getLLMProviderDetails(provider.name);
+                                    : t('clawSandboxSandboxConfig.disconnect') })] })] }), showLLMPicker && (jsx(OverlayModal, { open: true, onClose: closeLLMPicker, title: t('clawSandboxSandboxConfig.selectProviderTitle'), description: t('clawSandboxSandboxConfig.selectProviderDescription'), className: "max-w-3xl", children: !resolvedUsername ? (jsx("p", { className: "py-6 text-center text-sm text-gray-500", children: t('clawSandboxSandboxConfig.noUsernameForProviders') })) : (jsxs(Fragment$1, { children: [jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-500" }), jsx(Input, { id: "llm-search", name: "llm-search", type: "search", placeholder: t('clawSandboxSandboxConfig.searchProvidersPlaceholder'), className: "w-full py-6 pl-9", value: llmSearchQuery, onChange: (e) => setLlmSearchQuery(e.target.value) })] }), isLoadingLLMProviders ? (jsx("div", { className: "flex items-center justify-center py-10", children: jsx(LoaderCircle, { className: "h-5 w-5 animate-spin text-blue-500" }) })) : isLLMProvidersError ? (jsx("p", { className: "py-6 text-center text-sm text-red-500", children: t('clawSandboxSandboxConfig.failedToLoadProviders') })) : filteredLLMProviders.length === 0 ? (jsx("p", { className: "py-6 text-center text-sm text-gray-500", children: t('clawSandboxSandboxConfig.noProvidersAvailable') })) : (jsx("div", { className: "mt-2 grid max-h-[50vh] grid-cols-1 gap-4 overflow-y-auto pr-2 sm:grid-cols-2 lg:grid-cols-3", children: filteredLLMProviders.map((provider) => {
+                                const providerLabel = llmProviderLabel(provider);
                                 const isSelected = currentModel.provider === provider.name;
                                 return (jsxs("button", { type: "button", className: cn('flex cursor-pointer items-center gap-3 rounded-lg border border-gray-200 bg-white p-4 text-left shadow-sm transition-shadow hover:shadow-md', { 'border-blue-500': isSelected }), onClick: () => {
                                         setSelectedLLMProvider({
@@ -237943,10 +237872,10 @@ function SandboxConfig({ platformKey, mentorUniqueId, username }) {
                                             main_has_credentials: provider.main_has_credentials,
                                             can_use_main_keys: provider.can_use_main_keys,
                                         });
-                                    }, children: [jsx("div", { className: "h-8 w-8 flex-shrink-0", children: jsx("img", { src: providerDetails.logo, alt: t('clawSandboxSandboxConfig.providerLogoAlt', {
-                                                    name: providerDetails.name,
-                                                }), className: "h-full w-full object-contain", width: 32, height: 32, loading: "lazy" }) }), jsx("span", { className: "text-sm font-medium text-gray-900", children: providerDetails.name })] }, provider.id));
-                            }) }))] })) })), selectedLLMProvider && (jsx(LLMProviderModal, { isOpen: true, onClose: closeLLMPicker, onSelect: handleSelectLLM, llmProvider: selectedLLMProvider, isSelecting: isUpdatingLLM, mentorSettings: {
+                                    }, children: [jsx("div", { className: "h-8 w-8 flex-shrink-0", children: jsx(LLMProviderLogo, { logo: provider.logo, label: providerLabel, alt: t('clawSandboxSandboxConfig.providerLogoAlt', {
+                                                    name: providerLabel,
+                                                }) }) }), jsx("span", { className: "text-sm font-medium text-gray-900", children: providerLabel })] }, provider.id));
+                            }) }))] })) })), selectedLLMProvider && (jsx(LLMProviderModal, { isOpen: true, onClose: () => setSelectedLLMProvider(null), onSelect: handleSelectLLM, llmProvider: selectedLLMProvider, isSelecting: isUpdatingLLM, mentorSettings: {
                     llm_name: currentModel.llmName,
                     llm_provider: currentModel.provider,
                 }, llms: availableLLMProviders }))] })) : null;