@iblai/iblai-js 2.7.1 → 2.7.2

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

@@ -99502,18 +99502,47 @@ var llmTabLabels$3 = {
 		title: "LLM Configuration",
 		description: "Configure the language model settings for your agent."
 	},
+	infoBox: "This is the brain behind your agent — the AI model that powers every reply. Bigger models reason better on tricky questions; lighter ones are faster and cost less. Not sure? The default is a solid all-rounder.",
 	search: {
 		placeholder: "Search Providers"
 	},
+	providerLogoAlt: "{providerName} logo",
 	toasts: {
 		updateSuccess: "LLM updated successfully",
 		updateError: "Failed to update LLM"
 	},
 	providerModal: {
 		title: "LLM Selection",
-		description: "Select one of the models provided by this provider.",
+		description: "Select one of the agents provided by {providerName}",
 		searchPlaceholder: "Search",
-		helpText: "Choose your preferred LLM from the available provider to tailor your experience."
+		helpText: "Choose your preferred LLM from the available provider to tailor your experience.",
+		providerIconAlt: "{providerName} icon",
+		tooLargeTitle: "This model may be too large for your system",
+		tooLargeDescription: "{modelName} needs about {modelSize}. It may run very slowly or fail to load on this machine. Download anyway?",
+		cancel: "Cancel",
+		downloadAnyway: "Download anyway",
+		alreadyDownloadingTitle: "A model is already downloading",
+		unnamedModel: "A model",
+		alreadyDownloadingDescription: "{modelName} is being downloaded. Only one on-device model downloads at a time — wait for it to finish, or click {modelName} in the list to cancel it.",
+		gotIt: "Got it",
+		announceDownloaded: "{modelName} downloaded",
+		announceCancelled: "Download cancelled",
+		announceFailed: "Download failed",
+		announceStarted: "Started downloading {modelName}",
+		localModel: {
+			onDevice: "On-device",
+			starting: "Starting…",
+			cancel: "Cancel",
+			inUse: "In use",
+			downloadFailedRetry: "Download failed — retry",
+			ariaDownload: "Download {modelName}, {modelSize}, on-device model",
+			ariaStarting: "Starting download of {modelName}",
+			ariaDownloading: "Cancel download of {modelName}, {percent} percent",
+			ariaInstalled: "Use {modelName}, on-device model",
+			ariaSelected: "Selected {modelName}, on-device model, in use",
+			ariaError: "Retry download of {modelName}",
+			ariaErrorWithReason: "Retry download of {modelName}, {reason}"
+		}
 	}
 };
 var llmsTabCreateLlmModal$3 = {
@@ -101834,9 +101863,6 @@ var tabsHumanSupportTab$3 = {
 	ticketListLabel: "Support ticket list",
 	ticketDetailLabel: "Support ticket details"
 };
-var tabsLlmTab$3 = {
-	providerLogoAlt: "{name} logo"
-};
 var tabsPoliciestab$3 = {
 	searchPoliciesPlaceholder: "Search policies",
 	searchPoliciesLabel: "Search policies",
@@ -103745,7 +103771,6 @@ var en = {
 	tabsGroupstab: tabsGroupstab$3,
 	tabsHistoryTab: tabsHistoryTab$3,
 	tabsHumanSupportTab: tabsHumanSupportTab$3,
-	tabsLlmTab: tabsLlmTab$3,
 	tabsPoliciestab: tabsPoliciestab$3,
 	tabsPrivacyTab: tabsPrivacyTab$3,
 	tabsPromptsTab: tabsPromptsTab$3,
@@ -106640,18 +106665,47 @@ var llmTabLabels$2 = {
 		title: "Configuration LLM",
 		description: "Configurez les paramètres du modèle de langage pour votre agent."
 	},
+	infoBox: "C'est le cerveau de votre agent — le modèle d'IA qui alimente chaque réponse. Les modèles plus grands raisonnent mieux sur les questions complexes ; les plus légers sont plus rapides et moins coûteux. Pas sûr ? Le modèle par défaut est un excellent choix polyvalent.",
 	search: {
 		placeholder: "Rechercher des fournisseurs"
 	},
+	providerLogoAlt: "Logo {providerName}",
 	toasts: {
 		updateSuccess: "LLM mis à jour avec succès",
 		updateError: "Échec de la mise à jour du LLM"
 	},
 	providerModal: {
 		title: "Sélection du LLM",
-		description: "Sélectionnez l'un des modèles fournis par ce fournisseur.",
+		description: "Sélectionnez l'un des agents proposés par {providerName}",
 		searchPlaceholder: "Rechercher",
-		helpText: "Choisissez votre LLM préféré parmi les fournisseurs disponibles pour personnaliser votre expérience."
+		helpText: "Choisissez votre LLM préféré parmi les fournisseurs disponibles pour personnaliser votre expérience.",
+		providerIconAlt: "icône {providerName}",
+		tooLargeTitle: "Ce modèle est peut-être trop volumineux pour votre système",
+		tooLargeDescription: "{modelName} nécessite environ {modelSize}. Il peut être très lent ou ne pas se charger sur cette machine. Télécharger quand même ?",
+		cancel: "Annuler",
+		downloadAnyway: "Télécharger quand même",
+		alreadyDownloadingTitle: "Un modèle est déjà en cours de téléchargement",
+		unnamedModel: "Un modèle",
+		alreadyDownloadingDescription: "{modelName} est en cours de téléchargement. Un seul modèle sur l'appareil est téléchargé à la fois : attendez la fin ou cliquez sur {modelName} dans la liste pour l'annuler.",
+		gotIt: "Compris",
+		announceDownloaded: "{modelName} téléchargé",
+		announceCancelled: "Téléchargement annulé",
+		announceFailed: "Échec du téléchargement",
+		announceStarted: "Téléchargement de {modelName} démarré",
+		localModel: {
+			onDevice: "Sur l'appareil",
+			starting: "Démarrage…",
+			cancel: "Annuler",
+			inUse: "Utilisé",
+			downloadFailedRetry: "Échec du téléchargement — réessayer",
+			ariaDownload: "Télécharger {modelName}, {modelSize}, modèle sur l'appareil",
+			ariaStarting: "Démarrage du téléchargement de {modelName}",
+			ariaDownloading: "Annuler le téléchargement de {modelName}, {percent} pour cent",
+			ariaInstalled: "Utiliser {modelName}, modèle sur l'appareil",
+			ariaSelected: "{modelName} sélectionné, modèle sur l'appareil, utilisé",
+			ariaError: "Réessayer le téléchargement de {modelName}",
+			ariaErrorWithReason: "Réessayer le téléchargement de {modelName}, {reason}"
+		}
 	}
 };
 var llmsTabCreateLlmModal$2 = {
@@ -108972,9 +109026,6 @@ var tabsHumanSupportTab$2 = {
 	ticketListLabel: "Liste des tickets de support",
 	ticketDetailLabel: "Détails du ticket de support"
 };
-var tabsLlmTab$2 = {
-	providerLogoAlt: "Logo {name}"
-};
 var tabsPoliciestab$2 = {
 	searchPoliciesPlaceholder: "Rechercher des politiques",
 	searchPoliciesLabel: "Rechercher des politiques",
@@ -110718,7 +110769,6 @@ var fr = {
 	tabsGroupstab: tabsGroupstab$2,
 	tabsHistoryTab: tabsHistoryTab$2,
 	tabsHumanSupportTab: tabsHumanSupportTab$2,
-	tabsLlmTab: tabsLlmTab$2,
 	tabsPoliciestab: tabsPoliciestab$2,
 	tabsPrivacyTab: tabsPrivacyTab$2,
 	tabsPromptsTab: tabsPromptsTab$2,
@@ -113612,18 +113662,47 @@ var llmTabLabels$1 = {
 		title: "Configuración de LLM",
 		description: "Configure los ajustes del modelo de lenguaje para su agente."
 	},
+	infoBox: "Este es el cerebro de tu agente: el modelo de IA que impulsa cada respuesta. Los modelos más grandes razonan mejor las preguntas complejas; los más ligeros son más rápidos y cuestan menos. ¿No estás seguro? El predeterminado es una opción versátil y confiable.",
 	search: {
 		placeholder: "Buscar proveedores"
 	},
+	providerLogoAlt: "Logo de {providerName}",
 	toasts: {
 		updateSuccess: "LLM actualizado correctamente",
 		updateError: "Error al actualizar el LLM"
 	},
 	providerModal: {
 		title: "Selección de LLM",
-		description: "Seleccione uno de los modelos proporcionados por este proveedor.",
+		description: "Seleccione uno de los agentes proporcionados por {providerName}",
 		searchPlaceholder: "Buscar",
-		helpText: "Elija su LLM preferido entre los proveedores disponibles para personalizar su experiencia."
+		helpText: "Elija su LLM preferido entre los proveedores disponibles para personalizar su experiencia.",
+		providerIconAlt: "ícono de {providerName}",
+		tooLargeTitle: "Este modelo puede ser demasiado grande para su sistema",
+		tooLargeDescription: "{modelName} necesita aproximadamente {modelSize}. Puede funcionar muy lentamente o no cargarse en este equipo. ¿Descargar de todos modos?",
+		cancel: "Cancelar",
+		downloadAnyway: "Descargar de todos modos",
+		alreadyDownloadingTitle: "Ya se está descargando un modelo",
+		unnamedModel: "Un modelo",
+		alreadyDownloadingDescription: "{modelName} se está descargando. Solo se descarga un modelo en el dispositivo a la vez: espere a que termine o haga clic en {modelName} en la lista para cancelarlo.",
+		gotIt: "Entendido",
+		announceDownloaded: "{modelName} descargado",
+		announceCancelled: "Descarga cancelada",
+		announceFailed: "Error en la descarga",
+		announceStarted: "Descarga de {modelName} iniciada",
+		localModel: {
+			onDevice: "En el dispositivo",
+			starting: "Iniciando…",
+			cancel: "Cancelar",
+			inUse: "En uso",
+			downloadFailedRetry: "Error en la descarga: reintentar",
+			ariaDownload: "Descargar {modelName}, {modelSize}, modelo en el dispositivo",
+			ariaStarting: "Iniciando la descarga de {modelName}",
+			ariaDownloading: "Cancelar la descarga de {modelName}, {percent} por ciento",
+			ariaInstalled: "Usar {modelName}, modelo en el dispositivo",
+			ariaSelected: "{modelName} seleccionado, modelo en el dispositivo, en uso",
+			ariaError: "Reintentar la descarga de {modelName}",
+			ariaErrorWithReason: "Reintentar la descarga de {modelName}, {reason}"
+		}
 	}
 };
 var llmsTabCreateLlmModal$1 = {
@@ -115944,9 +116023,6 @@ var tabsHumanSupportTab$1 = {
 	ticketListLabel: "Lista de tickets de soporte",
 	ticketDetailLabel: "Detalles del ticket de soporte"
 };
-var tabsLlmTab$1 = {
-	providerLogoAlt: "Logo de {name}"
-};
 var tabsPoliciestab$1 = {
 	searchPoliciesPlaceholder: "Buscar políticas",
 	searchPoliciesLabel: "Buscar políticas",
@@ -117690,7 +117766,6 @@ var es = {
 	tabsGroupstab: tabsGroupstab$1,
 	tabsHistoryTab: tabsHistoryTab$1,
 	tabsHumanSupportTab: tabsHumanSupportTab$1,
-	tabsLlmTab: tabsLlmTab$1,
 	tabsPoliciestab: tabsPoliciestab$1,
 	tabsPrivacyTab: tabsPrivacyTab$1,
 	tabsPromptsTab: tabsPromptsTab$1,
@@ -120584,18 +120659,47 @@ var llmTabLabels = {
 		title: "LLM 配置",
 		description: "为您的智能体配置语言模型设置。"
 	},
+	infoBox: "这是您智能体的大脑——为每次回复提供动力的 AI 模型。更大的模型在处理复杂问题时推理能力更强；更轻量的模型则更快、成本更低。不确定？默认模型是可靠的全能之选。",
 	search: {
 		placeholder: "搜索提供商"
 	},
+	providerLogoAlt: "{providerName} 徽标",
 	toasts: {
 		updateSuccess: "LLM 更新成功",
 		updateError: "LLM 更新失败"
 	},
 	providerModal: {
 		title: "LLM 选择",
-		description: "从此提供商中选择一个模型。",
+		description: "从 {providerName} 提供的代理中选择一个",
 		searchPlaceholder: "搜索",
-		helpText: "从可用提供商中选择您偏好的 LLM，以定制您的使用体验。"
+		helpText: "从可用提供商中选择您偏好的 LLM，以定制您的使用体验。",
+		providerIconAlt: "{providerName} 图标",
+		tooLargeTitle: "该模型可能对您的系统而言过大",
+		tooLargeDescription: "{modelName} 约需 {modelSize}。它在此设备上可能运行非常缓慢或无法加载。仍要下载吗？",
+		cancel: "取消",
+		downloadAnyway: "仍要下载",
+		alreadyDownloadingTitle: "已有模型正在下载",
+		unnamedModel: "某个模型",
+		alreadyDownloadingDescription: "{modelName} 正在下载。一次只能下载一个设备端模型——请等待其完成，或点击列表中的 {modelName} 以取消下载。",
+		gotIt: "知道了",
+		announceDownloaded: "{modelName} 已下载",
+		announceCancelled: "下载已取消",
+		announceFailed: "下载失败",
+		announceStarted: "已开始下载 {modelName}",
+		localModel: {
+			onDevice: "设备端",
+			starting: "正在启动…",
+			cancel: "取消",
+			inUse: "使用中",
+			downloadFailedRetry: "下载失败——重试",
+			ariaDownload: "下载 {modelName}，{modelSize}，设备端模型",
+			ariaStarting: "正在开始下载 {modelName}",
+			ariaDownloading: "取消下载 {modelName}，{percent}%",
+			ariaInstalled: "使用 {modelName}，设备端模型",
+			ariaSelected: "已选择 {modelName}，设备端模型，使用中",
+			ariaError: "重试下载 {modelName}",
+			ariaErrorWithReason: "重试下载 {modelName}，{reason}"
+		}
 	}
 };
 var llmsTabCreateLlmModal = {
@@ -122916,9 +123020,6 @@ var tabsHumanSupportTab = {
 	ticketListLabel: "支持工单列表",
 	ticketDetailLabel: "支持工单详情"
 };
-var tabsLlmTab = {
-	providerLogoAlt: "{name} 标志"
-};
 var tabsPoliciestab = {
 	searchPoliciesPlaceholder: "搜索策略",
 	searchPoliciesLabel: "搜索策略",
@@ -124662,7 +124763,6 @@ var zh = {
 	tabsGroupstab: tabsGroupstab,
 	tabsHistoryTab: tabsHistoryTab,
 	tabsHumanSupportTab: tabsHumanSupportTab,
-	tabsLlmTab: tabsLlmTab,
 	tabsPoliciestab: tabsPoliciestab,
 	tabsPrivacyTab: tabsPrivacyTab,
 	tabsPromptsTab: tabsPromptsTab,
@@ -130883,6 +130983,7 @@ Progress.displayName = Root$9.displayName;
 
 const LOCAL_LLM_ENABLED_KEY = 'ibl_local_llm_enabled';
 const LOCAL_LLM_MODEL_KEY = 'ibl_local_llm_model';
+const LOCAL_LLM_TOOL_SUPPORT_KEY = 'ibl_local_llm_tool_support';
 /**
  * Curated catalog of small, on-device-friendly models from the Ollama library
  * (https://ollama.com/library). The model manager itself (Ollama) is not a
@@ -130940,6 +131041,12 @@ const LOCAL_MODELS = [
         tool_support: true,
     },
 ];
+/**
+ * Fraction of the machine's memory above which a model is treated as "too large"
+ * and a confirmation is required before downloading. TESTING VALUE — set low (1%)
+ * so the warning is easy to trigger; raise toward real capacity (e.g. 0.8) later.
+ */
+const MODEL_SIZE_WARN_FRACTION = 0.01;
 /** Multipliers for the size units used in the catalog (binary / 1024-based). */
 const SIZE_UNIT_BYTES = {
     B: 1,
@@ -130961,6 +131068,31 @@ function parseModelSizeBytes(size) {
         return null;
     return value * ((_a = SIZE_UNIT_BYTES[match[2].toUpperCase()]) !== null && _a !== void 0 ? _a : 1);
 }
+/**
+ * The memory a model can use on this machine: the larger of system RAM and GPU
+ * VRAM (a model runs in one or the other). Returns 0 when memory is unknown.
+ */
+function usableMemoryBytes(systemMemory) {
+    if (!systemMemory)
+        return 0;
+    return Math.max(systemMemory.ram_total, systemMemory.vram_total);
+}
+/**
+ * Whether `model` is large enough relative to this machine's memory to warrant a
+ * "might not run" confirmation. False when memory or the model size is unknown,
+ * so the download simply proceeds rather than warning on incomplete data.
+ */
+function modelExceedsCapacity(model, systemMemory) {
+    const capacity = usableMemoryBytes(systemMemory);
+    const modelBytes = parseModelSizeBytes(model.size);
+    if (modelBytes == null)
+        return false;
+    // Unknown memory (capacity 0) → don't warn; the download simply proceeds
+    // rather than blocking on incomplete data.
+    if (capacity <= 0)
+        return false;
+    return modelBytes > capacity * MODEL_SIZE_WARN_FRACTION;
+}
 /**
  * Default minimum model size (GB) that can use the Cowork
  * (GhostOS MCP/tools). Smaller models don't support tools/MCP well, so the
@@ -131008,6 +131140,33 @@ function getLocalLLMModel() {
         return null;
     return localStorage.getItem(LOCAL_LLM_MODEL_KEY);
 }
+/**
+ * Set the model the user has chosen to chat with (Ollama pull id).
+ */
+function setLocalLLMModel(modelId) {
+    if (typeof window === 'undefined')
+        return;
+    localStorage.setItem(LOCAL_LLM_MODEL_KEY, modelId);
+}
+/**
+ * Whether the model the user selected supports tools / function calling
+ * (persisted alongside the model id). The host (e.g. ghost-os) reads this to
+ * route chat to the MCP/tool proxy (:8000) vs plain Ollama (:11434). Defaults to
+ * false when unknown. See {@link LocalModel.tool_support}.
+ */
+function getLocalLLMToolSupport() {
+    if (typeof window === 'undefined')
+        return false;
+    return localStorage.getItem(LOCAL_LLM_TOOL_SUPPORT_KEY) === 'true';
+}
+/**
+ * Persist whether the selected model supports tools (set when a model is chosen).
+ */
+function setLocalLLMToolSupport(toolSupport) {
+    if (typeof window === 'undefined')
+        return;
+    localStorage.setItem(LOCAL_LLM_TOOL_SUPPORT_KEY, String(toolSupport));
+}
 function LocalLLMTab({ isAvailable, state, ollamaStatus, isUsingFoundry = false, foundryModels = [], selectedFoundryModel = null, foundryStatus, onInstallOllama, onStopManager, onInstallFoundry, onCheckStatus, onSelectFoundryModel, }) {
     var _a, _b, _c, _d, _e;
     const t = useT();
@@ -225279,62 +225438,215 @@ function CreateApiModal$1({ isOpen, onClose, tenantKey, username }) {
                                                 : t('apiTabLabels.createModal.submit') })) }) })] })] }) }), apiKey && jsx(ApiKeyModal$1, { 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;
+}
+/**
+ * Whether two Ollama model refs name the same model, comparing by base name and
+ * ignoring a trailing `:tag` (so "llama3.2" ≡ "llama3.2:latest", and
+ * "granite4.1:8b" ≡ "granite4.1"). The download state and Ollama's /api/tags may
+ * carry a tag suffix the catalog id doesn't (or vice-versa); an exact `===` then
+ * fails to recognize a row's own in-flight download — the row shows "Download"
+ * with no progress while the pull runs. Base-name matching is safe here because
+ * every catalog model has a unique base (llama3.2, qwen3, mistral, granite4.1,
+ * gpt-oss, gemma4), so it can never light up the wrong row.
+ */
+function sameModel(a, b) {
+    const base = (ref) => (ref !== null && ref !== void 0 ? ref : '').toLowerCase().split(':')[0];
+    const ba = base(a);
+    return ba.length > 0 && ba === base(b);
+}
+/**
+ * Whether a catalog model id (e.g. "granite4.1:8b") is among the installed
+ * Ollama tags (e.g. "granite4.1:latest").
+ *
+ * Deliberately NOT the profile tab's `isModelInstalled`, which matches an exact
+ * tag or the `<id>:` prefix: that is one-directional and misses a catalog id
+ * that itself carries a tag ("granite4.1:8b" against an installed
+ * "granite4.1:latest"). The picker needs the symmetric base-name comparison of
+ * {@link sameModel} so a pulled model is recognized whichever side wears the tag.
+ */
+function isLocalModelInstalled(modelId, installedTags) {
+    return !!(installedTags === null || installedTags === void 0 ? void 0 : installedTags.some((tag) => sameModel(tag, modelId)));
+}
+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));
+}
+/**
+ * Compares two raw provider names by the label the user actually sees on the
+ * card, not by the backend key — the two diverge often enough to matter
+ * (`bedrock` renders as "Amazon", `azure_openai` as "Microsoft", `iblai` as
+ * "ibl.ai"). Comparison is case-insensitive (`sensitivity: 'base'`) so casing
+ * never produces a surprising order. `getDetails` is the host-provided resolver
+ * the grid renders with, so the sort always matches what is on screen; unknown
+ * providers fall back to their raw name as the display name.
+ */
+function compareLLMProvidersByDisplayName(a, b, getDetails) {
+    return getDetails(a).name.localeCompare(getDetails(b).name, undefined, {
+        sensitivity: 'base',
+    });
+}
+/**
+ * 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(...)`.
+ */
+function canAccessProvider(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;
+}
+/**
+ * Orders LLM provider cards as two alphabetical groups: providers the user can
+ * actually use (see {@link canAccessProvider}) first, then the ones they can't —
+ * each group sorted alphabetically by display name.
+ *
+ * The grouping predicate is deliberately the same one the grid grays cards with,
+ * so the two always line up: group 1 renders normally, group 2 renders grayed.
+ * Grouping on credentials alone would let a provider that has a key but ships no
+ * chat models sort into the "usable" group while rendering grayed.
+ *
+ * Pure and non-mutating: RTK Query results are frozen, so the input is copied
+ * before sorting. `Array.prototype.sort` is stable, so providers that tie on
+ * both group and display name keep their original relative order.
+ */
+function sortLLMProvidersByCredentials(providers, getDetails) {
+    return [...providers].sort((a, b) => {
+        const aUsable = canAccessProvider(a);
+        const bUsable = canAccessProvider(b);
+        if (aUsable !== bUsable)
+            return aUsable ? -1 : 1;
+        return compareLLMProvidersByDisplayName(a.name, b.name, getDetails);
+    });
+}
+function extractErrorMessage$1(error, fallback) {
+    var _a, _b;
+    const apiError = error;
+    return ((_a = apiError === null || apiError === void 0 ? void 0 : apiError.data) === null || _a === void 0 ? void 0 : _a.error) || ((_b = apiError === null || apiError === void 0 ? void 0 : apiError.error) === null || _b === void 0 ? void 0 : _b.error) || fallback;
+}
+
+// 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) {
-    switch (llmProvider) {
-        case 'groq':
-            return { logo: '/llm-groq-provider.png', name: 'Groq' };
-        case 'azure_openai':
-            return { logo: '/llm-microsoft-provider.png', name: 'Microsoft' };
-        case 'openai':
-            if (llmName)
-                return { logo: '/llm-openai-provider.jpg', name: 'OpenAI' };
-            return { logo: '/llm-openai-provider-2.svg', name: 'OpenAI' };
-        case 'mistral':
-            return { logo: '/llm-mistral-provider.jpeg', name: 'Mistral' };
-        case 'google':
-            if (llmName)
-                return { logo: '/llm-gemini-provider.png', name: 'Google' };
-            return { logo: '/llm-google-provider.svg', name: 'Google' };
-        case 'llama':
-            return { logo: '/llm-llama-provider.jpeg', name: 'Meta' };
-        case 'perplexity':
-            return { logo: '/llm-perplexity-provider.webp', name: 'Perplexity' };
-        case 'deepseek':
-            return { logo: '/llm-deepseek-provider.png', name: 'DeepSeek' };
-        case 'xai':
-            return { logo: '/llm-xai-provider.jpg', name: 'xAI' };
-        case 'IBLChatAnthropic':
-        case 'anthropic':
-            return { logo: '/llm-claude-provider.png', name: 'Anthropic' };
-        case 'IBLChatNvidia':
-        case 'nvidia':
-            return { logo: '/llm-nvidia-provider.webp', name: 'NVIDIA' };
-        case 'bedrock':
-        case 'amazon-bedrock':
-        case 'amazon_bedrock':
-        case 'IBLChatBedrock':
-            return { logo: '/llm-amazon-provider.png', name: 'Amazon' };
-        // ibl.ai's own hosted provider. The backend key is `iblai` (NameEnum.IBLAI);
-        // the other cases cover the `IBLChat<Vendor>` house spelling and the
-        // dotted/dashed/underscored brand forms seen in labels and older payloads.
-        case 'iblai':
-        case 'IBLAI':
-        case 'ibl.ai':
-        case 'ibl_ai':
-        case 'ibl-ai':
-        case 'ibl':
-        case 'IBLChatIBL':
-        case 'IBLChatIBLAI':
-            return { logo: '/llm-iblai-provider.png', name: 'ibl.ai' };
-        default:
-            return { logo: '/llm-generic-provider.png', name: llmProvider };
-    }
+    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
@@ -262271,7 +262583,7 @@ const resourceTypes = [
  * rate limit.
  */
 const SPEND_CAP_EXCEEDED_ERROR_CODE = 'spend_cap_exceeded';
-const extractErrorMessage$1 = (error, fallback) => {
+const extractErrorMessage = (error, fallback) => {
     var _a, _b, _c;
     const apiError = error;
     if (((_a = apiError === null || apiError === void 0 ? void 0 : apiError.data) === null || _a === void 0 ? void 0 : _a.error_code) === SPEND_CAP_EXCEEDED_ERROR_CODE) {
@@ -262350,7 +262662,7 @@ function GithubFileUploadModal() {
         }
         catch (error) {
             console.error(JSON.stringify(error));
-            const errorMessage = extractErrorMessage$1(error, t('resourceModalGithubFileUploadModal.errorAddingDocument'));
+            const errorMessage = extractErrorMessage(error, t('resourceModalGithubFileUploadModal.errorAddingDocument'));
             toast.error(errorMessage);
             console.error(JSON.stringify({ tenant: tenantKey, error }));
         }
@@ -262417,7 +262729,7 @@ function LocalFileUploadModal({ resource, maxFileSizeMB = DEFAULT_MAX_FILE_SIZE_
         }
         catch (error) {
             console.error(JSON.stringify(error));
-            const errorMessage = extractErrorMessage$1(error, t('resourceModalLocalFileUploadModal.errorAddingDocument'));
+            const errorMessage = extractErrorMessage(error, t('resourceModalLocalFileUploadModal.errorAddingDocument'));
             toast.error(errorMessage);
             console.error(JSON.stringify({ tenant: tenantKey, error }));
         }
@@ -262520,7 +262832,7 @@ function UrlUploadModal({ resource }) {
         }
         catch (error) {
             console.error(JSON.stringify(error));
-            const errorMessage = extractErrorMessage$1(error, t('resourceModalUrlUploadModal.errorAddingTrainingDocument'));
+            const errorMessage = extractErrorMessage(error, t('resourceModalUrlUploadModal.errorAddingTrainingDocument'));
             toast.error(errorMessage);
             console.error(JSON.stringify({ tenant: tenantKey, error }));
         }
@@ -262608,7 +262920,7 @@ function useWebsiteCrawlerResource(resource) {
             }
             catch (error) {
                 console.error(JSON.stringify(error));
-                const errorMessage = extractErrorMessage$1(error, 'Error submitting web crawl data');
+                const errorMessage = extractErrorMessage(error, 'Error submitting web crawl data');
                 toast.error(errorMessage);
                 console.error(JSON.stringify({ tenant: tenantKey, error }));
             }
@@ -262798,7 +263110,7 @@ const useGoogleDrivePicker = ({ tenantKey, mentorId }) => {
             }
             catch (error) {
                 console.error(JSON.stringify(error));
-                const errorMessage = extractErrorMessage$1(error, 'Error adding training document');
+                const errorMessage = extractErrorMessage(error, 'Error adding training document');
                 toast.error(errorMessage);
                 console.error(JSON.stringify({ tenant: tenantKey, error }));
             }
@@ -263103,7 +263415,7 @@ const useDropboxPicker = ({ tenantKey, mentorId, cancel = () => { }, linkType =
         }
         catch (error) {
             console.error(JSON.stringify(error));
-            const errorMessage = extractErrorMessage$1(error, 'Error adding training document');
+            const errorMessage = extractErrorMessage(error, 'Error adding training document');
             toast.error(errorMessage);
             console.error(JSON.stringify({ tenant: tenantKey, error }));
         }
@@ -263328,7 +263640,7 @@ const useOneDrivePicker = ({ tenantKey, mentorId }) => {
         }
         catch (error) {
             console.error(JSON.stringify(error));
-            const errorMessage = extractErrorMessage$1(error, 'Error adding training document');
+            const errorMessage = extractErrorMessage(error, 'Error adding training document');
             toast.error(errorMessage);
             console.error(JSON.stringify({ tenant: tenantKey, error }));
         }
@@ -270320,86 +270632,51 @@ var copyMentorModal = /*#__PURE__*/Object.freeze({
 });
 
 /**
- * Small pure utilities colocated with the LLM tab.
- * Ported from standalone's `@/lib/utils` and `@/lib/error`.
- */
-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));
-}
-/**
- * Compares two raw provider names by the label the user actually sees on the
- * card, not by the backend key — the two diverge often enough to matter
- * (`bedrock` renders as "Amazon", `azure_openai` as "Microsoft", `iblai` as
- * "ibl.ai"). Comparison is case-insensitive (`sensitivity: 'base'`) so casing
- * never produces a surprising order. `getDetails` is the host-provided resolver
- * the grid renders with, so the sort always matches what is on screen; unknown
- * providers fall back to their raw name as the display name.
- */
-function compareLLMProvidersByDisplayName(a, b, getDetails) {
-    return getDetails(a).name.localeCompare(getDetails(b).name, undefined, {
-        sensitivity: 'base',
-    });
-}
-/**
- * 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(...)`.
+ * Window event any surface dispatches after changing the device-global
+ * on-device selection — a model pick in the LLM tab's provider modal, or the
+ * Local Models master toggle in Profile → Advanced. `storage` events only fire
+ * cross-tab, so this covers the same-tab case (e.g. a nav-bar badge that has to
+ * update the instant a model is picked in a modal above it).
  */
-function canAccessProvider(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;
-}
+const LOCAL_LLM_CHANGED_EVENT = 'ibl:local-llm-changed';
 /**
- * Orders LLM provider cards as two alphabetical groups: providers the user can
- * actually use (see {@link canAccessProvider}) first, then the ones they can't —
- * each group sorted alphabetically by display name.
- *
- * The grouping predicate is deliberately the same one the grid grays cards with,
- * so the two always line up: group 1 renders normally, group 2 renders grayed.
- * Grouping on credentials alone would let a provider that has a key but ships no
- * chat models sort into the "usable" group while rendering grayed.
- *
- * Pure and non-mutating: RTK Query results are frozen, so the input is copied
- * before sorting. `Array.prototype.sort` is stable, so providers that tie on
- * both group and display name keep their original relative order.
+ * Reactive view of the on-device model selection (`ibl_local_llm_enabled` +
+ * `ibl_local_llm_model` in localStorage). Reads on mount — so it is
+ * SSR/hydration-safe (nothing resolves until the client mounts) — and re-reads
+ * on cross-tab `storage` events and same-tab {@link LOCAL_LLM_CHANGED_EVENT}
+ * events.
  */
-function sortLLMProvidersByCredentials(providers, getDetails) {
-    return [...providers].sort((a, b) => {
-        const aUsable = canAccessProvider(a);
-        const bUsable = canAccessProvider(b);
-        if (aUsable !== bUsable)
-            return aUsable ? -1 : 1;
-        return compareLLMProvidersByDisplayName(a.name, b.name, getDetails);
+function useSelectedLocalModel() {
+    const [sel, setSel] = useState({
+        isLocal: false,
+        model: null,
+        modelId: null,
     });
-}
-function extractErrorMessage(error, fallback) {
-    var _a, _b;
-    const apiError = error;
-    return ((_a = apiError === null || apiError === void 0 ? void 0 : apiError.data) === null || _a === void 0 ? void 0 : _a.error) || ((_b = apiError === null || apiError === void 0 ? void 0 : apiError.error) === null || _b === void 0 ? void 0 : _b.error) || fallback;
+    useEffect(() => {
+        const read = () => {
+            var _a;
+            const enabled = isLocalLLMEnabled();
+            const id = getLocalLLMModel();
+            const model = id ? ((_a = LOCAL_MODELS.find((m) => m.id === id)) !== null && _a !== void 0 ? _a : null) : null;
+            // Self-heal the derived tool-support cache. Local chat routes on
+            // `ibl_local_llm_tool_support`, but an older selection may have left it
+            // stale/false — which makes streaming reject a genuinely tool-capable
+            // model. The catalog is the source of truth; reconcile here. Write only on
+            // a real mismatch so it can't loop.
+            if (enabled && model && getLocalLLMToolSupport() !== model.tool_support) {
+                setLocalLLMToolSupport(model.tool_support);
+            }
+            setSel({ isLocal: enabled && !!id, model, modelId: id });
+        };
+        read();
+        window.addEventListener('storage', read);
+        window.addEventListener(LOCAL_LLM_CHANGED_EVENT, read);
+        return () => {
+            window.removeEventListener('storage', read);
+            window.removeEventListener(LOCAL_LLM_CHANGED_EVENT, read);
+        };
+    }, []);
+    return sel;
 }
 
 const AGENT_LLM_TAB_LABELS = {
@@ -270407,18 +270684,47 @@ const AGENT_LLM_TAB_LABELS = {
         title: 'LLM Configuration',
         description: 'Configure the language model settings for your agent.',
     },
+    infoBox: 'This is the brain behind your agent — the AI model that powers every reply. Bigger models reason better on tricky questions; lighter ones are faster and cost less. Not sure? The default is a solid all-rounder.',
     search: {
         placeholder: 'Search Providers',
     },
+    providerLogoAlt: (providerName) => `${providerName} logo`,
     toasts: {
         updateSuccess: 'LLM updated successfully',
         updateError: 'Failed to update LLM',
     },
     providerModal: {
         title: 'LLM Selection',
-        description: 'Select one of the models provided by this provider.',
+        description: (providerName) => `Select one of the agents provided by ${providerName}`,
         searchPlaceholder: 'Search',
         helpText: 'Choose your preferred LLM from the available provider to tailor your experience.',
+        providerIconAlt: (providerName) => `${providerName} icon`,
+        tooLargeTitle: 'This model may be too large for your system',
+        tooLargeDescription: (modelName, modelSize) => `${modelName} needs about ${modelSize}. It may run very slowly or fail to load on this machine. Download anyway?`,
+        cancel: 'Cancel',
+        downloadAnyway: 'Download anyway',
+        alreadyDownloadingTitle: 'A model is already downloading',
+        unnamedModel: 'A model',
+        alreadyDownloadingDescription: (modelName) => `${modelName} is being downloaded. Only one on-device model downloads at a time — wait for it to finish, or click ${modelName} in the list to cancel it.`,
+        gotIt: 'Got it',
+        announceDownloaded: (modelName) => `${modelName} downloaded`,
+        announceCancelled: 'Download cancelled',
+        announceFailed: 'Download failed',
+        announceStarted: (modelName) => `Started downloading ${modelName}`,
+        localModel: {
+            onDevice: 'On-device',
+            starting: 'Starting…',
+            cancel: 'Cancel',
+            inUse: 'In use',
+            downloadFailedRetry: 'Download failed — retry',
+            ariaDownload: (modelName, modelSize) => `Download ${modelName}, ${modelSize}, on-device model`,
+            ariaStarting: (modelName) => `Starting download of ${modelName}`,
+            ariaDownloading: (modelName, percent) => `Cancel download of ${modelName}, ${percent} percent`,
+            ariaInstalled: (modelName) => `Use ${modelName}, on-device model`,
+            ariaSelected: (modelName) => `Selected ${modelName}, on-device model, in use`,
+            ariaError: (modelName) => `Retry download of ${modelName}`,
+            ariaErrorWithReason: (modelName, reason) => `Retry download of ${modelName}, ${reason}`,
+        },
     },
 };
 function buildLLMTabLabels(t) {
@@ -270427,18 +270733,47 @@ function buildLLMTabLabels(t) {
             title: t('llmTabLabels.header.title'),
             description: t('llmTabLabels.header.description'),
         },
+        infoBox: t('llmTabLabels.infoBox'),
         search: {
             placeholder: t('llmTabLabels.search.placeholder'),
         },
+        providerLogoAlt: (providerName) => t('llmTabLabels.providerLogoAlt', { providerName }),
         toasts: {
             updateSuccess: t('llmTabLabels.toasts.updateSuccess'),
             updateError: t('llmTabLabels.toasts.updateError'),
         },
         providerModal: {
             title: t('llmTabLabels.providerModal.title'),
-            description: t('llmTabLabels.providerModal.description'),
+            description: (providerName) => t('llmTabLabels.providerModal.description', { providerName }),
             searchPlaceholder: t('llmTabLabels.providerModal.searchPlaceholder'),
             helpText: t('llmTabLabels.providerModal.helpText'),
+            providerIconAlt: (providerName) => t('llmTabLabels.providerModal.providerIconAlt', { providerName }),
+            tooLargeTitle: t('llmTabLabels.providerModal.tooLargeTitle'),
+            tooLargeDescription: (modelName, modelSize) => t('llmTabLabels.providerModal.tooLargeDescription', { modelName, modelSize }),
+            cancel: t('llmTabLabels.providerModal.cancel'),
+            downloadAnyway: t('llmTabLabels.providerModal.downloadAnyway'),
+            alreadyDownloadingTitle: t('llmTabLabels.providerModal.alreadyDownloadingTitle'),
+            unnamedModel: t('llmTabLabels.providerModal.unnamedModel'),
+            alreadyDownloadingDescription: (modelName) => t('llmTabLabels.providerModal.alreadyDownloadingDescription', { modelName }),
+            gotIt: t('llmTabLabels.providerModal.gotIt'),
+            announceDownloaded: (modelName) => t('llmTabLabels.providerModal.announceDownloaded', { modelName }),
+            announceCancelled: t('llmTabLabels.providerModal.announceCancelled'),
+            announceFailed: t('llmTabLabels.providerModal.announceFailed'),
+            announceStarted: (modelName) => t('llmTabLabels.providerModal.announceStarted', { modelName }),
+            localModel: {
+                onDevice: t('llmTabLabels.providerModal.localModel.onDevice'),
+                starting: t('llmTabLabels.providerModal.localModel.starting'),
+                cancel: t('llmTabLabels.providerModal.localModel.cancel'),
+                inUse: t('llmTabLabels.providerModal.localModel.inUse'),
+                downloadFailedRetry: t('llmTabLabels.providerModal.localModel.downloadFailedRetry'),
+                ariaDownload: (modelName, modelSize) => t('llmTabLabels.providerModal.localModel.ariaDownload', { modelName, modelSize }),
+                ariaStarting: (modelName) => t('llmTabLabels.providerModal.localModel.ariaStarting', { modelName }),
+                ariaDownloading: (modelName, percent) => t('llmTabLabels.providerModal.localModel.ariaDownloading', { modelName, percent }),
+                ariaInstalled: (modelName) => t('llmTabLabels.providerModal.localModel.ariaInstalled', { modelName }),
+                ariaSelected: (modelName) => t('llmTabLabels.providerModal.localModel.ariaSelected', { modelName }),
+                ariaError: (modelName) => t('llmTabLabels.providerModal.localModel.ariaError', { modelName }),
+                ariaErrorWithReason: (modelName, reason) => t('llmTabLabels.providerModal.localModel.ariaErrorWithReason', { modelName, reason }),
+            },
         },
     };
 }
@@ -270450,38 +270785,287 @@ function resolveLLMTabLabels(override, t) {
     return deepMerge(base, override);
 }
 
-function LLMProviderModal({ isOpen, onClose, onSelect, llmProvider, isSelecting, mentorSettings, llms, getLLMProviderDetails, labels = AGENT_LLM_TAB_LABELS.providerModal, }) {
+/**
+ * A local (on-device) model presented in the same list as cloud models. It uses
+ * the same provider logo as the cloud rows; the model name gets its own line and
+ * the on-device badge, size, and download/status affordance sit on a subtitle
+ * line beneath it. One click toggles download ⇄ cancel; once installed a click
+ * selects it.
+ */
+function LocalModelRow({ name, size, logo, status, progress, disabled = false, disabledReason, errorMessage, onActivate, labels = AGENT_LLM_TAB_LABELS.providerModal.localModel, }) {
+    const selected = status === 'selected';
+    const downloading = status === 'downloading' || status === 'starting';
+    // A resting row (nothing downloading) can still be disabled when another
+    // model is pulling; a row that is itself downloading stays clickable (cancel).
+    const isBusyDisabled = disabled && !downloading && !selected;
+    const inert = isBusyDisabled || selected;
+    const pct = Math.round(Math.max(0, Math.min(100, progress)));
+    const ariaLabel = (() => {
+        switch (status) {
+            case 'not-installed':
+                return labels.ariaDownload(name, size);
+            case 'starting':
+                return labels.ariaStarting(name);
+            case 'downloading':
+                return labels.ariaDownloading(name, pct);
+            case 'installed':
+                return labels.ariaInstalled(name);
+            case 'selected':
+                return labels.ariaSelected(name);
+            case 'error':
+                return errorMessage
+                    ? labels.ariaErrorWithReason(name, errorMessage)
+                    : labels.ariaError(name);
+        }
+    })();
+    return (jsxs("button", { type: "button", "data-testid": "llm-local-model-row", "data-model": name, "data-status": status, disabled: inert, "aria-label": ariaLabel, title: isBusyDisabled ? disabledReason : ariaLabel, onClick: () => {
+            if (!inert)
+                onActivate();
+        }, className: cn(
+        // `isolate` makes the button its own stacking context so the absolute
+        // progress fill (z-0) layers above the button's background and below the
+        // content (z-10) — without it the fill can render behind the background.
+        'group relative isolate flex items-center gap-3 overflow-hidden rounded-lg border p-4 text-left transition-colors', selected
+            ? 'cursor-default border-blue-500 bg-blue-50'
+            : isBusyDisabled
+                ? 'cursor-not-allowed border-gray-200 opacity-60'
+                : 'cursor-pointer border-gray-200 hover:border-blue-500 hover:bg-blue-50'), children: [downloading && (jsx("span", { "aria-hidden": "true", "data-testid": "llm-local-model-progress", className: "pointer-events-none absolute inset-y-0 left-0 z-0 bg-blue-500/40 motion-safe:transition-[width] motion-safe:duration-300", 
+                // Minimum width so the bar is visible the moment a download starts
+                // (progress 0 / "starting"), then tracks real progress.
+                style: { width: `${status === 'starting' ? 6 : Math.max(pct, 6)}%` } })), jsx("span", { className: "relative z-10 flex h-8 w-8 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg", children: jsx(Image$4, { src: logo, alt: "", "aria-hidden": "true", width: 32, height: 32, className: cn('h-full w-full object-contain', {
+                        grayscale: isBusyDisabled,
+                    }), loading: "lazy" }) }), jsxs("span", { className: "relative z-10 flex min-w-0 flex-1 flex-col gap-1.5", children: [jsx("span", { className: "truncate text-sm font-medium text-[#646464] lowercase", children: name }), jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-sm text-gray-500", children: [jsx("span", { className: "flex-shrink-0 rounded bg-gray-100 px-2 py-0.5 text-sm font-medium text-gray-500", children: labels.onDevice }), status === 'not-installed' && (jsxs(Fragment$1, { children: [jsx("span", { "aria-hidden": "true", children: "\u00B7" }), jsx("span", { children: size }), jsx(Download, { className: "h-4 w-4", "aria-hidden": "true" })] })), status === 'starting' && (jsxs(Fragment$1, { children: [jsx("span", { "aria-hidden": "true", children: "\u00B7" }), jsx("span", { children: labels.starting })] })), status === 'downloading' && (jsxs(Fragment$1, { children: [jsx("span", { "aria-hidden": "true", children: "\u00B7" }), jsxs("span", { className: "tabular-nums group-hover:hidden group-focus-visible:hidden", children: [pct, "%"] }), jsxs("span", { className: "hidden items-center gap-1 text-blue-600 group-hover:flex group-focus-visible:flex", children: [jsx(X$2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), labels.cancel] })] })), status === 'selected' && (jsxs("span", { className: "flex items-center gap-1 text-blue-600", children: [jsx(Check, { className: "h-4 w-4", "aria-hidden": "true" }), labels.inUse] })), status === 'error' && (jsxs(Fragment$1, { children: [jsx("span", { "aria-hidden": "true", children: "\u00B7" }), jsx("span", { className: "truncate text-red-500", children: errorMessage || labels.downloadFailedRetry }), jsx(RotateCcw, { className: "h-4 w-4 flex-shrink-0 text-red-500", "aria-hidden": "true" })] }))] })] })] }));
+}
+
+function LLMProviderModal({ isOpen, onClose, onSelect, llmProvider, isSelecting, mentorSettings, llms, getLLMProviderDetails: getLLMProviderDetails$1 = getLLMProviderDetails, labels = AGENT_LLM_TAB_LABELS.providerModal, }) {
+    var _a, _b;
     const [searchQuery, setSearchQuery] = React__default.useState('');
+    // On-device model download state (Tauri desktop only; `isAvailable` is false
+    // on web, which hides every local row below).
+    const { isAvailable, state: downloadState, ollamaStatus, systemMemory, startDownload, cancelDownload, } = useModelDownload();
+    // Mirror the device-global local selection so picks re-render immediately.
+    const [localSel, setLocalSel] = React__default.useState(() => ({
+        enabled: isLocalLLMEnabled(),
+        model: getLocalLLMModel(),
+    }));
+    // Model awaiting the "may be too large" confirmation before its download
+    // starts; null when no confirmation is pending.
+    const [pendingModel, setPendingModel] = React__default.useState(null);
+    // Name of the model currently downloading, shown in an info dialog when the
+    // user clicks a DIFFERENT model (one on-device download at a time). Null when
+    // no such notice is showing.
+    const [busyDownloadName, setBusyDownloadName] = React__default.useState(null);
+    // The model THIS picker asked to download. Modal-local (not the shared, churny
+    // download state) so it survives the hook's once-per-load reset / remounts /
+    // reloads that wipe `downloadState.activeModel` — the pull's progress events
+    // carry no model id, so once `activeModel` is lost nothing restores it and the
+    // row can't recognize its own in-flight download (bar advances, row still says
+    // "Download"). Cleared only on a terminal status, so the reset's transient
+    // `idle` doesn't drop it mid-pull.
+    const [requestedModel, setRequestedModel] = React__default.useState(null);
+    React__default.useEffect(() => {
+        if (downloadState.status === 'completed' ||
+            downloadState.status === 'cancelled' ||
+            downloadState.status === 'error') {
+            setRequestedModel(null);
+        }
+    }, [downloadState.status]);
+    // Which on-device model is downloading right now: prefer this picker's own
+    // request, fall back to the shared state's id when present.
+    const downloadingModel = requestedModel !== null && requestedModel !== void 0 ? requestedModel : downloadState.activeModel;
+    // The last on-device model whose download reported `completed`. Held sticky so
+    // its row shows "installed" straight through the gap between the terminal
+    // `completed` event and the /api/tags refresh landing — otherwise the completed
+    // handler's checkStatus churns downloadState.status (completed → checking →
+    // idle) first and the row flickers back to a "Download" button.
+    const [lastCompleted, setLastCompleted] = React__default.useState(null);
+    React__default.useEffect(() => {
+        if (downloadState.status === 'completed' && downloadingModel) {
+            setLastCompleted(downloadingModel);
+        }
+    }, [downloadState.status, downloadingModel]);
     const filteredLLMs = React__default.useMemo(() => {
-        return llmProvider === null || llmProvider === void 0 ? void 0 : llmProvider.chat_models.filter((llm) => llm.llm_name.toLowerCase().includes(searchQuery.toLowerCase()));
+        var _a, _b;
+        // Guard `chat_models` (not just `llmProvider`): a provider can come back from
+        // the API without a models array, and an undefined `.filter` here throws in
+        // render and unmounts the whole dialog. Coalesce so the `.map` consumer below
+        // always gets an array.
+        return ((_b = (_a = llmProvider === null || llmProvider === void 0 ? void 0 : llmProvider.chat_models) === null || _a === void 0 ? void 0 : _a.filter((llm) => {
+            var _a;
+            const query = searchQuery.toLowerCase();
+            // Match either label: rows are shown by `display_name`, so searching
+            // what you can read has to work, but the raw key stays searchable for
+            // anyone who knows it (e.g. "gpt-4.1" or "amazon.nova").
+            return (llm.llm_name.toLowerCase().includes(query) ||
+                ((_a = llm.display_name) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(query));
+        })) !== null && _b !== void 0 ? _b : []);
     }, [searchQuery, llmProvider]);
+    // Local models belonging to THIS provider (merged into the same list).
+    const localModels = React__default.useMemo(() => {
+        if (!isAvailable)
+            return [];
+        const key = getProviderName(llmProvider.name);
+        return LOCAL_MODELS.filter((m) => getProviderName(m.provider) === key &&
+            m.name.toLowerCase().includes(searchQuery.toLowerCase()));
+    }, [isAvailable, llmProvider.name, searchQuery]);
     const switchLLMAllowed = canSwitchLLm(llmProvider);
     const switchProviderAllowed = canSwitchProvider(llms, llmProvider.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 }), 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: "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);
-                            }, 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
-                                // card, faded logo, full-strength label.
-                                'cursor-not-allowed border-gray-100 bg-gray-50': isDisabled && !isActive,
-                                '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(Image$4, { src: providerDetails.logo, alt: `${providerDetails.name} icon`, className: cn('h-full w-full object-contain', {
-                                            // `grayscale` alone is a no-op on already-black marks,
-                                            // so fade them as well — same rule as the provider grid.
-                                            'opacity-40 grayscale': isDisabled && !isActive,
-                                        }), width: 32, height: 32, loading: "lazy" }) }), jsx("span", { className: "text-left text-sm font-medium text-gray-900", children: llm.llm_name })] }, llm.llm_name));
-                    }) })] }) }));
-}
-
-function AgentLLMTab({ showConfigurationHeader = true, getLLMProviderDetails, labels: labelsOverride, }) {
+    // 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
+    // status is re-checked.
+    const busyDownloading = downloadState.status === 'downloading';
+    const statusFor = (m) => {
+        if (localSel.enabled && localSel.model === m.id)
+            return 'selected';
+        const active = sameModel(downloadingModel, m.id);
+        if (active && downloadState.status === 'error')
+            return 'error';
+        if (active && busyDownloading)
+            return downloadState.progress > 0 ? 'downloading' : 'starting';
+        // `lastCompleted` bridges the just-finished → tags-refreshed gap so the row
+        // stays "installed" instead of flickering back to "Download".
+        if (sameModel(lastCompleted, m.id) ||
+            isLocalModelInstalled(m.id, ollamaStatus === null || ollamaStatus === void 0 ? void 0 : ollamaStatus.installed_models))
+            return 'installed';
+        return 'not-installed';
+    };
+    // A cloud model is "in use" when it's the mentor's selected LLM and local mode
+    // is off.
+    const isCloudActive = (llm) => (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 &&
+        !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
+    // 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 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) })),
+        ...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
+    // the confirmation AlertDialog below (layered on top of the picker), rather
+    // than a toast. `modelExceedsCapacity` compares the model's size to this
+    // machine's RAM/VRAM; when memory is unknown it returns false, so the download
+    // simply proceeds rather than blocking on incomplete data.
+    const startLocalDownload = (m) => {
+        if (modelExceedsCapacity(m, systemMemory)) {
+            setPendingModel(m);
+            return;
+        }
+        setRequestedModel(m.id);
+        startDownload(m.id);
+    };
+    const activateLocal = (m, status) => {
+        var _a;
+        switch (status) {
+            case 'not-installed':
+            case 'error':
+                // Only one on-device model downloads at a time. If ANY pull is already
+                // running, don't start another — starting concurrent pulls floods every
+                // useModelDownload instance with progress events and can hang the app.
+                // Block even when the running model is unknown (activeModel wiped); the
+                // user cancels by clicking the downloading row itself. Selecting an
+                // already-installed model is unaffected (it starts no pull).
+                if (busyDownloading && !sameModel(downloadingModel, m.id)) {
+                    const dl = LOCAL_MODELS.find((x) => sameModel(x.id, downloadingModel));
+                    setBusyDownloadName((_a = dl === null || dl === void 0 ? void 0 : dl.name) !== null && _a !== void 0 ? _a : labels.unnamedModel);
+                    return;
+                }
+                startLocalDownload(m);
+                break;
+            case 'starting':
+            case 'downloading':
+                cancelDownload();
+                break;
+            case 'installed':
+                // Use this on-device model — device-global, mutually exclusive with cloud.
+                setLocalLLMModel(m.id);
+                setLocalLLMEnabled(true);
+                // Persist tool-calling support so local chat routes to the MCP/tool
+                // bridge. Without this the flag stays at its default (false) and
+                // streaming chat rejects the model with "tool_support=false" even though
+                // the catalog marks it tool-capable.
+                setLocalLLMToolSupport(m.tool_support);
+                setLocalSel({ enabled: true, model: m.id });
+                // Notify same-tab listeners (e.g. a nav-bar on-device badge).
+                window.dispatchEvent(new Event(LOCAL_LLM_CHANGED_EVENT));
+                break;
+        }
+    };
+    const selectCloud = (llmName) => {
+        // Picking a cloud model turns local mode off so routing uses the cloud LLM.
+        if (localSel.enabled) {
+            setLocalLLMEnabled(false);
+            setLocalSel((prev) => ({ ...prev, enabled: false }));
+            window.dispatchEvent(new Event(LOCAL_LLM_CHANGED_EVENT));
+        }
+        onSelect(llmProvider.name, llmName);
+    };
+    // Announce download lifecycle changes once (not every %) for screen readers.
+    const activeLocal = LOCAL_MODELS.find((m) => sameModel(m.id, downloadingModel));
+    const liveMessage = !activeLocal
+        ? ''
+        : downloadState.status === 'completed'
+            ? labels.announceDownloaded(activeLocal.name)
+            : downloadState.status === 'cancelled'
+                ? labels.announceCancelled
+                : downloadState.status === 'error'
+                    ? labels.announceFailed
+                    : downloadState.status === 'checking' ||
+                        (downloadState.status === 'downloading' && downloadState.progress === 0)
+                        ? 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) => {
+                        if (item.kind === 'cloud') {
+                            const llm = item.llm;
+                            const isActive = isCloudActive(llm);
+                            const providerDetails = getLLMProviderDetails$1(llmProvider.name, llm.llm_name);
+                            const isDisabled = !switchLLMAllowed || isSelecting || isActive || !switchProviderAllowed;
+                            return (jsxs("button", { "data-model": llm.llm_name, 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
+                                    // card, faded logo, full-strength label.
+                                    'cursor-not-allowed border-gray-100 bg-gray-50': isDisabled && !isActive,
+                                    '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(Image$4, { src: providerDetails.logo, alt: labels.providerIconAlt(providerDetails.name), className: cn('h-full w-full object-contain', {
+                                                // `grayscale` alone is a no-op on already-black marks,
+                                                // so fade them as well — same rule as the provider grid.
+                                                'opacity-40 grayscale': isDisabled && !isActive,
+                                            }), width: 32, height: 32, loading: "lazy" }) }), jsx("span", { className: "text-left text-sm font-medium text-gray-900", children: llm.display_name || llm.llm_name })] }, `cloud-${llm.llm_name}`));
+                        }
+                        const m = item.model;
+                        const status = statusFor(m);
+                        return (jsx(LocalModelRow, { name: m.name, size: m.size, logo: getLLMProviderDetails$1(llmProvider.name, m.name).logo, status: status, progress: sameModel(downloadingModel, m.id) ? downloadState.progress : 0, onActivate: () => activateLocal(m, status), labels: labels.localModel }, `local-${m.id}`));
+                    }) }), jsx(AlertDialog, { open: !!pendingModel, onOpenChange: (open) => {
+                        if (!open)
+                            setPendingModel(null);
+                    }, children: jsxs(AlertDialogContent, { children: [jsxs(AlertDialogHeader, { children: [jsx(AlertDialogTitle, { children: labels.tooLargeTitle }), jsx(AlertDialogDescription, { children: labels.tooLargeDescription((_a = pendingModel === null || pendingModel === void 0 ? void 0 : pendingModel.name) !== null && _a !== void 0 ? _a : '', (_b = pendingModel === null || pendingModel === void 0 ? void 0 : pendingModel.size) !== null && _b !== void 0 ? _b : '') })] }), jsxs(AlertDialogFooter, { children: [jsx(AlertDialogCancel, { onClick: () => setPendingModel(null), children: labels.cancel }), jsx(AlertDialogAction, { onClick: () => {
+                                            if (pendingModel) {
+                                                setRequestedModel(pendingModel.id);
+                                                startDownload(pendingModel.id);
+                                            }
+                                            setPendingModel(null);
+                                        }, children: labels.downloadAnyway })] })] }) }), jsx(AlertDialog, { open: !!busyDownloadName, onOpenChange: (open) => {
+                        if (!open)
+                            setBusyDownloadName(null);
+                    }, children: jsxs(AlertDialogContent, { children: [jsxs(AlertDialogHeader, { children: [jsx(AlertDialogTitle, { children: labels.alreadyDownloadingTitle }), jsx(AlertDialogDescription, { children: labels.alreadyDownloadingDescription(busyDownloadName !== null && busyDownloadName !== void 0 ? busyDownloadName : '') })] }), jsx(AlertDialogFooter, { children: jsx(AlertDialogAction, { onClick: () => setBusyDownloadName(null), children: labels.gotIt }) })] }) })] }) }));
+}
+
+function AgentLLMTab({ showConfigurationHeader = true, mentorId: mentorIdOverride, getLLMProviderDetails: getLLMProviderDetails$1 = getLLMProviderDetails, labels: labelsOverride, }) {
     var _a;
     const t = useT();
-    const { tenantKey, mentorId, username, enableRBAC } = useAgentSettings();
+    const { tenantKey, mentorId: contextMentorId, username, enableRBAC } = useAgentSettings();
+    const mentorId = mentorIdOverride || contextMentorId;
     const labels = React__default.useMemo(() => resolveLLMTabLabels(labelsOverride, t), [labelsOverride, t]);
     const [searchQuery, setSearchQuery] = React__default.useState('');
     const [selectedLLMProvider, setSelectedLLMProvider] = React__default.useState(null);
@@ -270499,13 +271083,44 @@ function AgentLLMTab({ showConfigurationHeader = true, getLLMProviderDetails, la
     }, {
         skip: !tenantKey || !username,
     });
+    // Providers that only offer on-device (local) models — surfaced as grid cards
+    // (Tauri desktop only) so their downloadable models are reachable even when the
+    // backend LLM list has no matching cloud provider.
+    const localOnlyProviders = React__default.useMemo(() => {
+        if (!isTauriApp$1())
+            return [];
+        const cloudKeys = new Set((llmProviders !== null && llmProviders !== void 0 ? llmProviders : []).map((p) => getProviderName(p.name)));
+        const seen = new Set();
+        const result = [];
+        for (const model of LOCAL_MODELS) {
+            const key = getProviderName(model.provider);
+            if (cloudKeys.has(key) || seen.has(key))
+                continue;
+            seen.add(key);
+            result.push({ key, provider: model.provider });
+        }
+        // Alphabetical among themselves; the whole local-only block still renders
+        // after the API providers.
+        return result.sort((a, b) => compareLLMProvidersByDisplayName(a.provider, b.provider, getLLMProviderDetails$1));
+    }, [llmProviders, getLLMProviderDetails$1]);
     // Two alphabetical groups: providers we have a usable LLM key for first, then
     // the ones we don't. Ordering is independent of the search filter below, so it
     // holds for whatever the filter leaves.
-    const sortedLLMProviders = React__default.useMemo(() => sortLLMProvidersByCredentials(llmProviders !== null && llmProviders !== void 0 ? llmProviders : [], getLLMProviderDetails), [llmProviders, getLLMProviderDetails]);
+    const sortedLLMProviders = React__default.useMemo(() => sortLLMProvidersByCredentials(llmProviders !== null && llmProviders !== void 0 ? llmProviders : [], getLLMProviderDetails$1), [llmProviders, getLLMProviderDetails$1]);
     const [editMentor, { isLoading: isEditingMentor }] = useEditMentorMutation();
     const isDisabled = isMentorSettingsLoading || isLoadingLLMProviders || isEditingMentor;
     const isLoading = isMentorSettingsLoading || isLoadingLLMProviders;
+    // The highlighted (selected) provider card must reflect the model chat
+    // actually uses. When on-device mode is on, that's the selected local model's
+    // provider (e.g. Llama 3.2 → Meta) — NOT the agent's stale cloud
+    // `llm_provider` (which stays e.g. OpenAI). Falls back to the cloud provider
+    // when local mode is off. Reactive so it updates the instant a model is picked.
+    const selectedLocal = useSelectedLocalModel();
+    const activeProviderKey = selectedLocal.isLocal && selectedLocal.model
+        ? getProviderName(selectedLocal.model.provider)
+        : (mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.llm_provider)
+            ? getProviderName(mentorSettings.llm_provider)
+            : '';
     async function updateMentorLLM(llmProvider, llmName) {
         try {
             await editMentor({
@@ -270522,57 +271137,70 @@ function AgentLLMTab({ showConfigurationHeader = true, getLLMProviderDetails, la
         }
         catch (error) {
             console.error(JSON.stringify(error));
-            const errorMessage = extractErrorMessage(error, labels.toasts.updateError);
+            const errorMessage = extractErrorMessage$1(error, labels.toasts.updateError);
             toast.error(errorMessage);
             console.error(JSON.stringify({ tenant: tenantKey, error }));
         }
     }
-    return (jsxs(Fragment$1, { children: [showConfigurationHeader && (jsx("div", { className: "flex hidden h-[73px] flex-shrink-0 items-center border-b border-gray-200 bg-white p-4 lg:block", children: jsxs("div", { children: [jsx("h3", { className: "mb-1 text-base font-medium text-gray-900", children: labels.header.title }), jsx("p", { className: "text-xs text-gray-700", children: labels.header.description })] }) })), jsx("div", { className: cn('flex-1 space-y-4 pt-3 pb-3 lg:pt-4 lg:pb-4', showConfigurationHeader ? 'px-3 lg:px-4' : 'px-0 lg:px-0'), style: {
+    return (jsxs(Fragment$1, { children: [showConfigurationHeader && (jsx("div", { className: "flex hidden h-[73px] flex-shrink-0 items-center border-b border-gray-200 bg-white p-4 lg:block", children: jsxs("div", { children: [jsx("h3", { className: "mb-1 text-base font-medium text-gray-900", children: labels.header.title }), jsx("p", { className: "text-xs text-gray-700", children: labels.header.description })] }) })), jsxs("div", { className: cn('flex-1 space-y-4 pt-3 pb-3 lg:pt-4 lg:pb-4', showConfigurationHeader ? 'px-3 lg:px-4' : 'px-0 lg:px-0'), style: {
                     overflowY: 'auto',
                     overflowX: 'hidden',
-                }, children: jsxs("div", { className: "space-y-6", 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, { type: "search", placeholder: labels.search.placeholder, className: "w-full py-6 pl-9 md:w-1/2", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), disabled: isDisabled })] }), isLoading ? (jsx("div", { className: "flex items-center justify-center py-10", children: jsx(Spinner, {}) })) : (jsx(WithFormPermissions, { name: "llm_provider", 
-                            // @ts-ignore
-                            permissions: (_a = mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.permissions) === null || _a === void 0 ? void 0 : _a.field, enableRBAC: enableRBAC, children: ({ disabled }) => (jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: sortedLLMProviders
-                                    .filter((model) => model.name.toLowerCase().includes(searchQuery.toLowerCase()))
-                                    .map((model) => {
-                                    const providerDetails = getLLMProviderDetails(model.name);
-                                    const isActive = (mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.llm_provider) === model.name;
-                                    // 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,
-                                            // Tint the whole card too: desaturating a logo that
-                                            // is already black changes nothing, so the card
-                                            // itself has to carry some of the inactive signal.
-                                            'border-gray-100 bg-gray-50': isGrayed,
-                                        }), onClick: () => {
-                                            if (isDisabled || disabled)
-                                                return;
-                                            setSelectedLLMProvider({
-                                                id: model.id,
-                                                name: model.name,
-                                                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(Image$4, { src: providerDetails.logo, alt: t('tabsLlmTab.providerLogoAlt', { name: providerDetails.name }), className: cn('h-full w-full object-contain', {
-                                                        // `grayscale` only desaturates, so already-black
-                                                        // marks (OpenAI, xAI) looked untouched. Fading is
-                                                        // what actually reads as inactive at any hue.
-                                                        'opacity-40 grayscale': isGrayed,
-                                                    }), width: 32, height: 32, loading: "lazy" }) }), jsx("span", { className: "text-sm font-medium text-gray-900", children: providerDetails.name })] }, model.id));
-                                }) })) })), selectedLLMProvider && mentorSettings && (jsx(LLMProviderModal, { isOpen: true, onClose: () => setSelectedLLMProvider(null), onSelect: updateMentorLLM, llmProvider: selectedLLMProvider, isSelecting: isEditingMentor, mentorSettings: {
-                                llm_name: mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.llm_name,
-                                llm_provider: mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.llm_provider,
-                            }, llms: (llmProviders !== null && llmProviders !== void 0 ? llmProviders : []), getLLMProviderDetails: getLLMProviderDetails, labels: labels.providerModal }))] }) })] }));
+                }, children: [jsx("div", { className: "rounded-md border border-gray-200 bg-gray-50 p-3 text-xs text-gray-600", "data-testid": "llm-info-box", children: labels.infoBox }), jsxs("div", { className: "space-y-6", 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, { type: "search", placeholder: labels.search.placeholder, className: "w-full py-6 pl-9 md:w-1/2", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), disabled: isDisabled })] }), isLoading ? (jsx("div", { className: "flex items-center justify-center py-10", children: jsx(Spinner, {}) })) : (jsx(WithFormPermissions, { name: "llm_provider", 
+                                // @ts-ignore
+                                permissions: (_a = mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.permissions) === null || _a === void 0 ? void 0 : _a.field, enableRBAC: enableRBAC, children: ({ disabled }) => (jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: [sortedLLMProviders
+                                            .filter((model) => model.name.toLowerCase().includes(searchQuery.toLowerCase()))
+                                            .map((model) => {
+                                            const providerDetails = getLLMProviderDetails$1(model.name);
+                                            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,
+                                                    // Tint the whole card too: desaturating a logo that
+                                                    // is already black changes nothing, so the card
+                                                    // itself has to carry some of the inactive signal.
+                                                    'border-gray-100 bg-gray-50': isGrayed,
+                                                }), onClick: () => {
+                                                    if (isDisabled || disabled)
+                                                        return;
+                                                    setSelectedLLMProvider({
+                                                        id: model.id,
+                                                        name: model.name,
+                                                        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(Image$4, { src: providerDetails.logo, alt: labels.providerLogoAlt(providerDetails.name), className: cn('h-full w-full object-contain', {
+                                                                // `grayscale` only desaturates, so already-black
+                                                                // marks (OpenAI, xAI) looked untouched. Fading is
+                                                                // what actually reads as inactive at any hue.
+                                                                'opacity-40 grayscale': isGrayed,
+                                                            }), width: 32, height: 32, loading: "lazy" }) }), jsx("span", { className: "text-sm font-medium text-gray-900", children: providerDetails.name })] }, model.id));
+                                        }), localOnlyProviders.map((lp) => {
+                                            const details = getLLMProviderDetails$1(lp.provider);
+                                            return (jsxs("div", { "data-testid": "llm-provider-card", "data-provider": lp.provider, "data-disabled": "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': lp.key === activeProviderKey }), onClick: () => {
+                                                    if (isDisabled || disabled)
+                                                        return;
+                                                    setSelectedLLMProvider({
+                                                        id: -1,
+                                                        name: lp.provider,
+                                                        logo: details.logo,
+                                                        description: null,
+                                                        chat_models: [],
+                                                    });
+                                                }, children: [jsx("div", { className: "h-8 w-8 flex-shrink-0", children: jsx(Image$4, { src: details.logo, alt: labels.providerLogoAlt(details.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: details.name })] }, `local-${lp.key}`));
+                                        })] })) })), selectedLLMProvider && mentorSettings && (jsx(LLMProviderModal, { isOpen: true, onClose: () => setSelectedLLMProvider(null), onSelect: updateMentorLLM, llmProvider: selectedLLMProvider, isSelecting: isEditingMentor, mentorSettings: {
+                                    llm_name: mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.llm_name,
+                                    llm_provider: mentorSettings === null || mentorSettings === void 0 ? void 0 : mentorSettings.llm_provider,
+                                }, llms: (llmProviders !== null && llmProviders !== void 0 ? llmProviders : []), getLLMProviderDetails: getLLMProviderDetails$1, labels: labels.providerModal }))] })] })] }));
 }
 
 function useTools({ labels }) {
@@ -337443,5 +338071,5 @@ var index_es = /*#__PURE__*/Object.freeze({
     vectorsRatio: vectorsRatio
 });
 
-export { AGENT_ACCESS_TAB_LABELS, AGENT_ANALYTICS_TAB_LABELS, AGENT_API_TAB_LABELS, AGENT_DATASETS_TAB_LABELS, AGENT_DISCLAIMERS_TAB_LABELS, AGENT_EMBED_TAB_LABELS, AGENT_EVALUATION_TAB_LABELS, AGENT_GRADER_TAB_LABELS, AGENT_HISTORY_TAB_LABELS, AGENT_HUMAN_SUPPORT_TAB_LABELS, AGENT_LLM_TAB_LABELS, AGENT_LTI_TAB_LABELS, AGENT_MEMORY_TAB_LABELS, AGENT_PICKER_LABELS, AGENT_PRIVACY_TAB_LABELS, AGENT_PROMPTS_TAB_LABELS, AGENT_SAFETY_TAB_LABELS, AGENT_SCREENSHARE_TAB_LABELS, AGENT_SEARCH_LABELS, AGENT_SETTINGS_TAB_LABELS, AGENT_SKILLS_TAB_LABELS, AGENT_SPEND_CAPS_TAB_LABELS, AGENT_TASKS_TAB_LABELS, AGENT_TOOLS_TAB_LABELS, AGENT_VOICE_TAB_LABELS, Account, AgentAccessTab, AgentAnalyticsTab, AgentApiTab, AgentCard, AgentDatasetsTab, AgentDisclaimersTab, AgentEmbedTab, AgentEmptyState, AgentEvaluationTab, AgentGraderTab, AgentHistoryTab, AgentHumanSupportTab, AgentLLMTab, AgentLtiTab, AgentMemoryTab, AgentPrivacyTab, AgentPromptsTab, AgentSafetyTab, AgentScreenShareTab, AgentSearch, AgentSearchFilters, AgentSearchInput, AgentSettingsProvider, AgentSettingsTab, AgentSkillsTab, AgentSpendCapsTab, AgentTasksTab, AgentToolsTab, AgentVoiceTab, AppSidebar, CATALOGS, Chat, ClientErrorPage, ConversationStarters$1 as ConversationStarters, CopyButton, CopyMentorModal, CourseBox, CourseContentLayout, CourseContentTabPage, CreatePathwayModal, CredentialDetailModal, CredentialMiniBox, DEFAULT_ANALYTICS_HUB_TABS, DEFAULT_LOCALE, DeleteMentorModal, EMPTY_PROGRAM_SETTINGS_FORM, EdxIframe, ErrorPage, GRADING_TOOL_NAME, GreetingMethod, McpTab, MediaBox, MentorSelectionGrid, NavBar, OrganizationTab, PLATFORM_SIDEBAR_FLYOUT_ITEM_COLOR, PLATFORM_SIDEBAR_FLYOUT_TITLE_COLOR, PLATFORM_SIDEBAR_NAV_ACTIVE_BG_OPEN, PLATFORM_SIDEBAR_NAV_MUTED, PathwayDetailModal, PlatformAccountSheet, PlatformSidebar, PlatformSidebarCollapsedLabelFlyout, PlatformSidebarCollapsedNavFlyout, PlatformSidebarFooter, PlatformSidebarNavDivider, PlatformSidebarNavSection, PlatformSidebarSubNavItem, ProfileInfoCards, ProfileTabs, ProgramDetailModal, ProjectsSidebarDropdown, SPEND_CAPS_SUB_TABS, SUPPORTED_LOCALES, SidebarInset, SidebarProvider, SidebarTrigger, SpendCapUsage, SsoLogin, StarButton, UserProfileDropdown, UserProfileModal, WebContainersI18nProvider, formatDateString, getCatalog, getLLMProviderDetails, initializeLocalStorageWithObject, isValidLocale, resolveAgentPickerLabels, resolveAgentSearchLabels, resolveSettingsTabLabels, useAgentSearch, useAgentSearchWithPagination, useAgentSettings, useAgentStar, useGetChatDetails, usePlatformSidebarFooterActions, usePlatformSidebarNavCallback, useSidebar, useT, useTimeTracker, useWebContainersI18n, useWebContainersLocale };
+export { AGENT_ACCESS_TAB_LABELS, AGENT_ANALYTICS_TAB_LABELS, AGENT_API_TAB_LABELS, AGENT_DATASETS_TAB_LABELS, AGENT_DISCLAIMERS_TAB_LABELS, AGENT_EMBED_TAB_LABELS, AGENT_EVALUATION_TAB_LABELS, AGENT_GRADER_TAB_LABELS, AGENT_HISTORY_TAB_LABELS, AGENT_HUMAN_SUPPORT_TAB_LABELS, AGENT_LLM_TAB_LABELS, AGENT_LTI_TAB_LABELS, AGENT_MEMORY_TAB_LABELS, AGENT_PICKER_LABELS, AGENT_PRIVACY_TAB_LABELS, AGENT_PROMPTS_TAB_LABELS, AGENT_SAFETY_TAB_LABELS, AGENT_SCREENSHARE_TAB_LABELS, AGENT_SEARCH_LABELS, AGENT_SETTINGS_TAB_LABELS, AGENT_SKILLS_TAB_LABELS, AGENT_SPEND_CAPS_TAB_LABELS, AGENT_TASKS_TAB_LABELS, AGENT_TOOLS_TAB_LABELS, AGENT_VOICE_TAB_LABELS, Account, AgentAccessTab, AgentAnalyticsTab, AgentApiTab, AgentCard, AgentDatasetsTab, AgentDisclaimersTab, AgentEmbedTab, AgentEmptyState, AgentEvaluationTab, AgentGraderTab, AgentHistoryTab, AgentHumanSupportTab, AgentLLMTab, AgentLtiTab, AgentMemoryTab, AgentPrivacyTab, AgentPromptsTab, AgentSafetyTab, AgentScreenShareTab, AgentSearch, AgentSearchFilters, AgentSearchInput, AgentSettingsProvider, AgentSettingsTab, AgentSkillsTab, AgentSpendCapsTab, AgentTasksTab, AgentToolsTab, AgentVoiceTab, AppSidebar, CATALOGS, Chat, ClientErrorPage, ConversationStarters$1 as ConversationStarters, CopyButton, CopyMentorModal, CourseBox, CourseContentLayout, CourseContentTabPage, CreatePathwayModal, CredentialDetailModal, CredentialMiniBox, DEFAULT_ANALYTICS_HUB_TABS, DEFAULT_LOCALE, DeleteMentorModal, EMPTY_PROGRAM_SETTINGS_FORM, EdxIframe, ErrorPage, GRADING_TOOL_NAME, GreetingMethod, LLMProviderModal, LocalModelRow, McpTab, MediaBox, MentorSelectionGrid, NavBar, OrganizationTab, PLATFORM_SIDEBAR_FLYOUT_ITEM_COLOR, PLATFORM_SIDEBAR_FLYOUT_TITLE_COLOR, PLATFORM_SIDEBAR_NAV_ACTIVE_BG_OPEN, PLATFORM_SIDEBAR_NAV_MUTED, PathwayDetailModal, PlatformAccountSheet, PlatformSidebar, PlatformSidebarCollapsedLabelFlyout, PlatformSidebarCollapsedNavFlyout, PlatformSidebarFooter, PlatformSidebarNavDivider, PlatformSidebarNavSection, PlatformSidebarSubNavItem, ProfileInfoCards, ProfileTabs, ProgramDetailModal, ProjectsSidebarDropdown, SPEND_CAPS_SUB_TABS, SUPPORTED_LOCALES, SidebarInset, SidebarProvider, SidebarTrigger, SpendCapUsage, SsoLogin, StarButton, UserProfileDropdown, UserProfileModal, WebContainersI18nProvider, formatDateString, getCatalog, getLLMProviderDetails, getProviderName, initializeLocalStorageWithObject, isValidLocale, resolveAgentPickerLabels, resolveAgentSearchLabels, resolveLLMTabLabels, resolveSettingsTabLabels, useAgentSearch, useAgentSearchWithPagination, useAgentSettings, useAgentStar, useGetChatDetails, usePlatformSidebarFooterActions, usePlatformSidebarNavCallback, useSidebar, useT, useTimeTracker, useWebContainersI18n, useWebContainersLocale };
 //# sourceMappingURL=index.esm.js.map