From 24582cefa44bd1d87f1e9e380d3cd85f734ac107 Mon Sep 17 00:00:00 2001
From: bowen628 <bowen628@noreply.gitcode.com>
Date: Sat, 14 Mar 2026 16:55:05 +0800
Subject: [PATCH 1/2] feat(mobile-web): update uiux

---
 src/mobile-web/index.html                          |  2 ++
 src/mobile-web/src/i18n/messages.ts                | 10 +++++-----
 src/mobile-web/src/styles/components/sessions.scss |  4 +++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/mobile-web/index.html b/src/mobile-web/index.html
index 85ac8ac0..3dfd18e7 100644
--- a/src/mobile-web/index.html
+++ b/src/mobile-web/index.html
@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
   <meta name="theme-color" content="#121214" />
   <meta name="color-scheme" content="dark light" />
+  <link rel="icon" type="image/png" href="./src/assets/Logo-ICON.png" />
+  <link rel="apple-touch-icon" href="./src/assets/Logo-ICON.png" />
   <title>BitFun Remote</title>
   <script>
     (function() {
diff --git a/src/mobile-web/src/i18n/messages.ts b/src/mobile-web/src/i18n/messages.ts
index 6e486b9e..2b244e18 100644
--- a/src/mobile-web/src/i18n/messages.ts
+++ b/src/mobile-web/src/i18n/messages.ts
@@ -195,8 +195,8 @@ export const messages: Record<MobileLanguage, MessageTree> = {
       loadingMore: '正在加载更多...',
       remoteCodeSession: '远程代码会话',
       remoteCoworkSession: '远程协作会话',
-      agentCode: '代码',
-      agentCowork: '协作',
+      agentCode: 'Code',
+      agentCowork: 'Cowork',
       agentDefault: '默认',
       pullToRefresh: '下拉刷新',
     },
@@ -225,9 +225,9 @@ export const messages: Record<MobileLanguage, MessageTree> = {
       imageAttachmentFallback: '（见附带图片）',
       askQuestionCount: '{count} 个问题',
       waiting: '等待中',
-      modeAgentic: '智能代理',
-      modePlan: '规划',
-      modeDebug: '调试',
+      modeAgentic: 'Agentic',
+      modePlan: 'Plan',
+      modeDebug: 'Debug',
       thinking: '思考中...',
       allTasksCompleted: '所有任务已完成',
       task: '任务',
diff --git a/src/mobile-web/src/styles/components/sessions.scss b/src/mobile-web/src/styles/components/sessions.scss
index 8ddf613e..89146cf5 100644
--- a/src/mobile-web/src/styles/components/sessions.scss
+++ b/src/mobile-web/src/styles/components/sessions.scss
@@ -45,15 +45,17 @@
     font-weight: var(--font-weight-semibold);
     color: var(--color-text-primary);
     letter-spacing: 0.01em;
+    width: fit-content;
   }
 }
 
 .session-list__header-kicker {
   font-size: 10px;
   font-weight: var(--font-weight-semibold);
-  letter-spacing: 0.18em;
+  letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--color-accent-500);
+  width: fit-content;
 }
 
 .session-list__logo {

From c9d84c75d8c2997184ee5d32130aedd4a08cf70d Mon Sep 17 00:00:00 2001
From: bowen628 <bowen628@noreply.gitcode.com>
Date: Sat, 14 Mar 2026 20:03:59 +0800
Subject: [PATCH 2/2] feat(remote): sync model config and session model
 selection

Keep desktop, web, and mobile model behavior aligned so config changes apply immediately and remote sessions can safely choose valid models.

Made-with: Cursor
---
 src/apps/desktop/src/api/config_api.rs        |  29 ++
 .../src/agentic/execution/execution_engine.rs |  48 +-
 .../service/remote_connect/remote_server.rs   | 245 ++++++++++-
 src/mobile-web/src/i18n/messages.ts           |  18 +-
 src/mobile-web/src/pages/ChatPage.tsx         | 413 +++++++++++++++++-
 .../src/services/RemoteSessionManager.ts      |  63 +++
 .../src/styles/components/chat-input.scss     | 214 ++++++++-
 .../flow_chat/components/ModelSelector.tsx    |  48 +-
 .../src/flow_chat/hooks/useMessageSender.ts   |  29 +-
 .../config/components/AIModelConfig.tsx       |  29 ++
 10 files changed, 1089 insertions(+), 47 deletions(-)

diff --git a/src/apps/desktop/src/api/config_api.rs b/src/apps/desktop/src/api/config_api.rs
index db247b2b..b28ab169 100644
--- a/src/apps/desktop/src/api/config_api.rs
+++ b/src/apps/desktop/src/api/config_api.rs
@@ -60,6 +60,18 @@ pub async fn set_config(
         .await
     {
         Ok(_) => {
+            if let Err(e) = bitfun_core::service::config::reload_global_config().await {
+                warn!(
+                    "Failed to sync global config after set_config: path={}, error={}",
+                    request.path, e
+                );
+            } else {
+                info!(
+                    "Global config synced after set_config: path={}",
+                    request.path
+                );
+            }
+
             if request.path.starts_with("ai.models")
                 || request.path.starts_with("ai.default_models")
                 || request.path.starts_with("ai.agent_models")
@@ -90,6 +102,18 @@ pub async fn reset_config(
 
     match config_service.reset_config(request.path.as_deref()).await {
         Ok(_) => {
+            if let Err(e) = bitfun_core::service::config::reload_global_config().await {
+                warn!(
+                    "Failed to sync global config after reset_config: path={:?}, error={}",
+                    request.path, e
+                );
+            } else {
+                info!(
+                    "Global config synced after reset_config: path={:?}",
+                    request.path
+                );
+            }
+
             let message = if let Some(path) = &request.path {
                 format!("Configuration '{}' reset successfully", path)
             } else {
@@ -142,6 +166,11 @@ pub async fn import_config(state: State<'_, AppState>, config: Value) -> Result<
 
     match config_service.import_config(export_data).await {
         Ok(result) => {
+            if let Err(e) = bitfun_core::service::config::reload_global_config().await {
+                warn!("Failed to sync global config after import_config: {}", e);
+            } else {
+                info!("Global config synced after import_config");
+            }
             state.ai_client_factory.invalidate_cache();
             info!("Config imported, AI client cache invalidated");
             Ok(to_json_value(result, "import config result")?)
diff --git a/src/crates/core/src/agentic/execution/execution_engine.rs b/src/crates/core/src/agentic/execution/execution_engine.rs
index 3e280365..7d0ba63f 100644
--- a/src/crates/core/src/agentic/execution/execution_engine.rs
+++ b/src/crates/core/src/agentic/execution/execution_engine.rs
@@ -135,9 +135,13 @@ impl ExecutionEngine {
         ai_config: &crate::service::config::types::AIConfig,
         model_id: &str,
     ) -> String {
+        let trimmed = model_id.trim();
+        if trimmed.is_empty() || trimmed == "auto" || trimmed == "default" {
+            return "auto".to_string();
+        }
         ai_config
-            .resolve_model_selection(model_id)
-            .unwrap_or_else(|| model_id.to_string())
+            .resolve_model_selection(trimmed)
+            .unwrap_or_else(|| "auto".to_string())
     }
 
     fn resolve_locked_auto_model_id(
@@ -435,8 +439,9 @@ impl ExecutionEngine {
             })?;
 
         // 2. Get AI client
-        // Get model ID from AgentRegistry
-        let configured_model_id = agent_registry
+        // Prefer the session-level selection when present; otherwise fall back
+        // to the global mode mapping from the agent registry.
+        let fallback_model_id = agent_registry
             .get_model_id_for_agent(
                 &agent_type,
                 context
@@ -446,17 +451,28 @@ impl ExecutionEngine {
             )
             .await
             .map_err(|e| BitFunError::AIClient(format!("Failed to get model ID: {}", e)))?;
-        let model_id = if configured_model_id == "auto" {
-            let config_service = get_global_config_service().await.map_err(|e| {
-                BitFunError::AIClient(format!(
-                    "Failed to get config service for auto model resolution: {}",
-                    e
-                ))
-            })?;
-            let ai_config: crate::service::config::types::AIConfig = config_service
-                .get_config(Some("ai"))
-                .await
-                .unwrap_or_default();
+        let config_service = get_global_config_service().await.map_err(|e| {
+            BitFunError::AIClient(format!(
+                "Failed to get config service for model resolution: {}",
+                e
+            ))
+        })?;
+        let ai_config: crate::service::config::types::AIConfig = config_service
+            .get_config(Some("ai"))
+            .await
+            .unwrap_or_default();
+        let configured_model_id = session
+            .config
+            .model_id
+            .as_ref()
+            .map(|model_id| model_id.trim())
+            .filter(|model_id| !model_id.is_empty())
+            .map(str::to_string)
+            .unwrap_or(fallback_model_id);
+        let resolved_configured_model_id =
+            Self::resolve_configured_model_id(&ai_config, &configured_model_id);
+
+        let model_id = if configured_model_id == "auto" || resolved_configured_model_id == "auto" {
 
             let locked_model_id =
                 Self::resolve_locked_auto_model_id(&ai_config, session.config.model_id.as_ref());
@@ -509,7 +525,7 @@ impl ExecutionEngine {
                 }
             }
         } else {
-            configured_model_id.clone()
+            resolved_configured_model_id
         };
         info!(
             "Agent using model: agent={}, configured_model_id={}, resolved_model_id={}",
diff --git a/src/crates/core/src/service/remote_connect/remote_server.rs b/src/crates/core/src/service/remote_connect/remote_server.rs
index 037681b2..60fbd101 100644
--- a/src/crates/core/src/service/remote_connect/remote_server.rs
+++ b/src/crates/core/src/service/remote_connect/remote_server.rs
@@ -101,6 +101,131 @@ async fn resolve_file_workspace_root(session_id: Option<&str>) -> Option<std::pa
     current_workspace_path()
 }
 
+async fn resolve_session_model_id(session_id: &str) -> Option<String> {
+    use crate::agentic::coordination::get_global_coordinator;
+
+    let coordinator = get_global_coordinator()?;
+    let session_manager = coordinator.get_session_manager();
+
+    let normalize = |model_id: Option<String>| match model_id {
+        Some(value) => {
+            let trimmed = value.trim();
+            if trimmed.is_empty() || trimmed == "default" {
+                Some("auto".to_string())
+            } else {
+                Some(trimmed.to_string())
+            }
+        }
+        None => Some("auto".to_string()),
+    };
+
+    if let Some(session) = session_manager.get_session(session_id) {
+        return normalize(session.config.model_id.clone());
+    }
+
+    let workspace_path = resolve_session_workspace_path(session_id).await?;
+    coordinator
+        .restore_session(&workspace_path, session_id)
+        .await
+        .ok()
+        .and_then(|session| normalize(session.config.model_id.clone()))
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct RemoteModelConfig {
+    pub id: String,
+    pub name: String,
+    pub provider: String,
+    pub base_url: String,
+    pub model_name: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub context_window: Option<u32>,
+    pub enabled: bool,
+    pub capabilities: Vec<String>,
+    pub enable_thinking_process: bool,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub reasoning_effort: Option<String>,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct RemoteModelCatalog {
+    pub version: u64,
+    pub models: Vec<RemoteModelConfig>,
+    pub default_models: crate::service::config::types::DefaultModelsConfig,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub session_model_id: Option<String>,
+}
+
+async fn load_remote_model_catalog(
+    session_id: Option<&str>,
+) -> std::result::Result<RemoteModelCatalog, String> {
+    use crate::service::config::{
+        get_global_config_service,
+        types::{AIConfig, GlobalConfig},
+    };
+
+    let config_service = get_global_config_service()
+        .await
+        .map_err(|e| format!("Config service not available: {e}"))?;
+    let global_config: GlobalConfig = config_service
+        .get_config(None)
+        .await
+        .map_err(|e| format!("Failed to load global config: {e}"))?;
+    let ai_config: AIConfig = global_config.ai;
+
+    let models: Vec<RemoteModelConfig> = ai_config
+        .models
+        .into_iter()
+        .map(|model| RemoteModelConfig {
+            id: model.id,
+            name: model.name,
+            provider: model.provider,
+            base_url: model.base_url,
+            model_name: model.model_name,
+            context_window: model.context_window,
+            enabled: model.enabled,
+            capabilities: model
+                .capabilities
+                .into_iter()
+                .map(|capability| match capability {
+                    crate::service::config::types::ModelCapability::TextChat => "text_chat",
+                    crate::service::config::types::ModelCapability::ImageUnderstanding => {
+                        "image_understanding"
+                    }
+                    crate::service::config::types::ModelCapability::ImageGeneration => {
+                        "image_generation"
+                    }
+                    crate::service::config::types::ModelCapability::Embedding => "embedding",
+                    crate::service::config::types::ModelCapability::Search => "search",
+                    crate::service::config::types::ModelCapability::CodeSpecialized => {
+                        "code_specialized"
+                    }
+                    crate::service::config::types::ModelCapability::FunctionCalling => {
+                        "function_calling"
+                    }
+                    crate::service::config::types::ModelCapability::SpeechRecognition => {
+                        "speech_recognition"
+                    }
+                }.to_string())
+                .collect(),
+            enable_thinking_process: model.enable_thinking_process,
+            reasoning_effort: model.reasoning_effort,
+        })
+        .collect();
+
+    let session_model_id = if let Some(session_id) = session_id {
+        resolve_session_model_id(session_id).await
+    } else {
+        None
+    };
+    Ok(RemoteModelCatalog {
+        version: global_config.last_modified.timestamp_millis().max(0) as u64,
+        models,
+        default_models: ai_config.default_models,
+        session_model_id,
+    })
+}
+
 /// Image sent from mobile as a base64 data-URL.
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ImageAttachment {
@@ -127,6 +252,13 @@ pub enum RemoteCommand {
         session_name: Option<String>,
         workspace_path: Option<String>,
     },
+    GetModelCatalog {
+        session_id: Option<String>,
+    },
+    SetSessionModel {
+        session_id: String,
+        model_id: String,
+    },
     GetSessionMessages {
         session_id: String,
         limit: Option<usize>,
@@ -168,6 +300,7 @@ pub enum RemoteCommand {
         session_id: String,
         since_version: u64,
         known_msg_count: usize,
+        known_model_catalog_version: Option<u64>,
     },
     /// Read a workspace file and return its base64-encoded content.
     ///
@@ -224,6 +357,13 @@ pub enum RemoteResponse {
     SessionCreated {
         session_id: String,
     },
+    ModelCatalog {
+        catalog: RemoteModelCatalog,
+    },
+    SessionModelUpdated {
+        session_id: String,
+        model_id: String,
+    },
     Messages {
         session_id: String,
         messages: Vec<ChatMessage>,
@@ -267,6 +407,8 @@ pub enum RemoteResponse {
         total_msg_count: Option<usize>,
         #[serde(skip_serializing_if = "Option::is_none")]
         active_turn: Option<ActiveTurnSnapshot>,
+        #[serde(skip_serializing_if = "Option::is_none")]
+        model_catalog: Option<RemoteModelCatalog>,
     },
     AnswerAccepted,
     InteractionAccepted {
@@ -1665,6 +1807,8 @@ impl RemoteServer {
 
             RemoteCommand::ListSessions { .. }
             | RemoteCommand::CreateSession { .. }
+            | RemoteCommand::GetModelCatalog { .. }
+            | RemoteCommand::SetSessionModel { .. }
             | RemoteCommand::GetSessionMessages { .. }
             | RemoteCommand::DeleteSession { .. } => self.handle_session_command(cmd).await,
 
@@ -1775,6 +1919,7 @@ impl RemoteServer {
             session_id,
             since_version,
             known_msg_count,
+            known_model_catalog_version,
         } = cmd
         else {
             return RemoteResponse::Error {
@@ -1784,8 +1929,16 @@ impl RemoteServer {
 
         let tracker = self.ensure_tracker(session_id);
         let current_version = tracker.version();
+        let current_model_catalog = load_remote_model_catalog(Some(session_id)).await.ok();
+        let current_model_catalog_version = current_model_catalog
+            .as_ref()
+            .map(|catalog| catalog.version)
+            .unwrap_or(0);
+        let requested_model_catalog_version = known_model_catalog_version.unwrap_or(0);
+        let should_send_model_catalog =
+            requested_model_catalog_version != current_model_catalog_version;
 
-        if *since_version == current_version && *since_version > 0 {
+        if *since_version == current_version && *since_version > 0 && !should_send_model_catalog {
             return RemoteResponse::SessionPoll {
                 version: current_version,
                 changed: false,
@@ -1794,6 +1947,7 @@ impl RemoteServer {
                 new_messages: None,
                 total_msg_count: None,
                 active_turn: None,
+                model_catalog: None,
             };
         }
 
@@ -1814,6 +1968,11 @@ impl RemoteServer {
                 new_messages: None,
                 total_msg_count: None,
                 active_turn,
+                model_catalog: if should_send_model_catalog {
+                    current_model_catalog
+                } else {
+                    None
+                },
             };
         }
 
@@ -1871,6 +2030,11 @@ impl RemoteServer {
             new_messages: send_msgs,
             total_msg_count: send_total,
             active_turn,
+            model_catalog: if should_send_model_catalog {
+                current_model_catalog
+            } else {
+                None
+            },
         }
     }
 
@@ -2259,6 +2423,85 @@ impl RemoteServer {
                     },
                 }
             }
+            RemoteCommand::GetModelCatalog { session_id } => {
+                match load_remote_model_catalog(session_id.as_deref()).await {
+                    Ok(catalog) => RemoteResponse::ModelCatalog { catalog },
+                    Err(message) => RemoteResponse::Error { message },
+                }
+            }
+            RemoteCommand::SetSessionModel {
+                session_id,
+                model_id,
+            } => {
+                use crate::service::config::{get_global_config_service, types::AIConfig};
+
+                let requested_model_id = model_id.trim();
+                if requested_model_id.is_empty() {
+                    return RemoteResponse::Error {
+                        message: "model_id is required".to_string(),
+                    };
+                }
+
+                let normalized_model_id = if matches!(requested_model_id, "auto" | "default" | "primary" | "fast") {
+                    if requested_model_id == "default" {
+                        "auto".to_string()
+                    } else {
+                        requested_model_id.to_string()
+                    }
+                } else {
+                    let Ok(config_service) = get_global_config_service().await else {
+                        return RemoteResponse::Error {
+                            message: "Config service not available".to_string(),
+                        };
+                    };
+                    let ai_config: AIConfig = match config_service.get_config(Some("ai")).await {
+                        Ok(config) => config,
+                        Err(e) => {
+                            return RemoteResponse::Error {
+                                message: format!("Failed to load AI config: {e}"),
+                            }
+                        }
+                    };
+                    match ai_config.resolve_model_reference(requested_model_id) {
+                        Some(resolved) => resolved,
+                        None => {
+                            return RemoteResponse::Error {
+                                message: format!("Unknown model selection: {requested_model_id}"),
+                            }
+                        }
+                    }
+                };
+
+                if coordinator.get_session_manager().get_session(session_id).is_none() {
+                    let Some(workspace_path) = resolve_session_workspace_path(session_id).await else {
+                        return RemoteResponse::Error {
+                            message: format!(
+                                "Workspace path not available for session: {}",
+                                session_id
+                            ),
+                        };
+                    };
+                    if let Err(e) = coordinator.restore_session(&workspace_path, session_id).await {
+                        return RemoteResponse::Error {
+                            message: format!("Failed to restore session: {e}"),
+                        };
+                    }
+                }
+
+                match coordinator
+                    .get_session_manager()
+                    .update_session_model_id(session_id, &normalized_model_id)
+                    .await
+                {
+                    Ok(()) => RemoteResponse::SessionModelUpdated {
+                        session_id: session_id.clone(),
+                        model_id: normalized_model_id,
+                    },
+                    Err(e) => RemoteResponse::Error {
+                        message: e.to_string(),
+                    },
+                }
+            }
             RemoteCommand::GetSessionMessages {
                 session_id,
                 limit: _,
diff --git a/src/mobile-web/src/i18n/messages.ts b/src/mobile-web/src/i18n/messages.ts
index 2b244e18..1f25b085 100644
--- a/src/mobile-web/src/i18n/messages.ts
+++ b/src/mobile-web/src/i18n/messages.ts
@@ -96,6 +96,12 @@ export const messages: Record<MobileLanguage, MessageTree> = {
       workingPlaceholder: 'BitFun is working...',
       imageAnalyzingPlaceholder: 'Analyzing image...',
       imageAttachmentFallback: '(see attached images)',
+      modelSelection: 'Select model',
+      modelAuto: 'Auto',
+      modelAutoDesc: 'Automatically route to the best model',
+      modelPrimary: 'Primary Model',
+      modelFast: 'Fast Model',
+      modelNotConfigured: 'Model not configured',
       askQuestionCount: '{count} question{suffix}',
       waiting: 'Waiting',
       modeAgentic: 'Agentic',
@@ -216,13 +222,19 @@ export const messages: Record<MobileLanguage, MessageTree> = {
     chat: {
       session: '会话',
       loadingOlderMessages: '正在加载更早的消息...',
-      showResponse: '展开回复',
-      hideResponse: '收起回复',
+      showResponse: 'Show response',
+      hideResponse: 'Hide response',
       analyzingImage: '正在使用图像理解模型分析图片...',
-      inputPlaceholder: '我可以帮你做什么...',
+      inputPlaceholder: '有什么可以帮您...',
       workingPlaceholder: 'BitFun 正在处理中...',
       imageAnalyzingPlaceholder: '正在分析图片...',
       imageAttachmentFallback: '（见附带图片）',
+      modelSelection: '选择模型',
+      modelAuto: 'Auto',
+      modelAutoDesc: '自动路由到最合适的模型',
+      modelPrimary: 'Primary 模型',
+      modelFast: 'Fast 模型',
+      modelNotConfigured: '模型未配置',
       askQuestionCount: '{count} 个问题',
       waiting: '等待中',
       modeAgentic: 'Agentic',
diff --git a/src/mobile-web/src/pages/ChatPage.tsx b/src/mobile-web/src/pages/ChatPage.tsx
index df27b381..9785dd99 100644
--- a/src/mobile-web/src/pages/ChatPage.tsx
+++ b/src/mobile-web/src/pages/ChatPage.tsx
@@ -12,6 +12,8 @@ import {
   type RemoteToolStatus,
   type ChatMessage,
   type ChatMessageItem,
+  type RemoteModelCatalog,
+  type RemoteModelConfig,
 } from '../services/RemoteSessionManager';
 import { useMobileStore } from '../services/store';
 import { useTheme } from '../theme';
@@ -91,6 +93,7 @@ const CopyButton: React.FC<{ code: string }> = ({ code }) => {
 const COMPUTER_LINK_PREFIX = 'computer://';
 const FILE_LINK_PREFIX = 'file://';
 const WORKSPACE_FOLDER_PLACEHOLDER = '{{workspaceFolder}}';
+const MOBILE_LAST_SELECTED_MODEL_ID_KEY = 'bitfun.mobile.last_selected_model_id';
 
 const CODE_FILE_EXTENSIONS = new Set([
   'js', 'jsx', 'ts', 'tsx', 'mjs', 'cjs', 'mts', 'cts',
@@ -1567,6 +1570,332 @@ const ThemeToggleIcon: React.FC<{ isDark: boolean }> = ({ isDark }) => (
   </svg>
 );
 
+const SparklesIcon: React.FC<{ className?: string; size?: number }> = ({ className, size = 10 }) => (
+  <svg
+    className={className}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.937A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z" />
+    <path d="M20 3v4" />
+    <path d="M22 5h-4" />
+    <path d="M4 17v2" />
+    <path d="M5 18H3" />
+  </svg>
+);
+
+type ModelSelectionValue = 'auto' | 'primary' | 'fast' | string;
+
+function formatProviderName(provider: string): string {
+  const normalized = provider.trim();
+  if (!normalized) return 'Unknown';
+  return normalized.charAt(0).toUpperCase() + normalized.slice(1);
+}
+
+function getModelProviderLabel(model: RemoteModelConfig): string {
+  const configuredName = model.name?.trim();
+  if (configuredName) return configuredName;
+  return formatProviderName(model.provider);
+}
+
+function formatContextWindow(contextWindow?: number): string | null {
+  if (!contextWindow) return null;
+  return `${Math.round(contextWindow / 1000)}k`;
+}
+
+function isChatCapableModel(model: RemoteModelConfig): boolean {
+  return model.enabled && Array.isArray(model.capabilities) && model.capabilities.includes('text_chat');
+}
+
+function normalizeSelectedModelId(
+  selectedModelId: string | null | undefined,
+  catalog: RemoteModelCatalog | null,
+): string {
+  const value = selectedModelId?.trim();
+  if (!value || value === 'auto' || value === 'default') return 'auto';
+  if (value === 'primary' || value === 'fast') {
+    const defaultId = value === 'primary'
+      ? catalog?.default_models?.primary
+      : catalog?.default_models?.fast;
+    return defaultId && resolveModelSelection(defaultId, catalog) ? value : 'auto';
+  }
+  return resolveModelSelection(value, catalog) ? value : 'auto';
+}
+
+function loadLastSelectedModelId(): string | null {
+  if (typeof window === 'undefined') return null;
+  const value = window.localStorage.getItem(MOBILE_LAST_SELECTED_MODEL_ID_KEY)?.trim();
+  return value || null;
+}
+
+function persistLastSelectedModelId(modelId: string): void {
+  if (typeof window === 'undefined') return;
+  const value = modelId.trim();
+  if (!value) {
+    window.localStorage.removeItem(MOBILE_LAST_SELECTED_MODEL_ID_KEY);
+    return;
+  }
+  window.localStorage.setItem(MOBILE_LAST_SELECTED_MODEL_ID_KEY, value);
+}
+
+function resolvePreferredModelSelection(
+  preferredModelId: string | null,
+  catalog: RemoteModelCatalog | null,
+): { modelId: string | null; fellBackToAuto: boolean } {
+  const value = preferredModelId?.trim();
+  if (!value) {
+    return { modelId: null, fellBackToAuto: false };
+  }
+
+  const normalizedModelId = normalizeSelectedModelId(value, catalog);
+  const fellBackToAuto = normalizedModelId === 'auto' && value !== 'auto' && value !== 'default';
+  return {
+    modelId: normalizedModelId,
+    fellBackToAuto,
+  };
+}
+
+function resolveModelSelection(
+  modelId: string,
+  catalog: RemoteModelCatalog | null,
+): RemoteModelConfig | null {
+  if (!catalog) return null;
+  return catalog.models.find(model => model.id === modelId) || null;
+}
+
+function buildModelProviderMeta(model: RemoteModelConfig | null): string | null {
+  if (!model) return null;
+  const parts = [getModelProviderLabel(model)];
+  const context = formatContextWindow(model.context_window);
+  if (context) parts.push(context);
+  return parts.join(' · ');
+}
+
+function getModelDisplayName(model: RemoteModelConfig | null): string {
+  if (!model) return '';
+  return model.model_name || model.name || '';
+}
+
+function getSelectedModelInfo(
+  selectedModelId: string,
+  catalog: RemoteModelCatalog | null,
+  t: (key: string, params?: Record<string, string | number>) => string,
+): {
+  label: string;
+  meta: string | null;
+  enableThinking: boolean;
+  reasoningEffort?: string;
+} {
+  if (selectedModelId === 'auto') {
+    return {
+      label: t('chat.modelAuto'),
+      meta: t('chat.modelAutoDesc'),
+      enableThinking: false,
+    };
+  }
+
+  if (selectedModelId === 'primary' || selectedModelId === 'fast') {
+    const defaultId = selectedModelId === 'primary'
+      ? catalog?.default_models?.primary
+      : catalog?.default_models?.fast;
+    const resolved = defaultId ? resolveModelSelection(defaultId, catalog) : null;
+    return {
+      label: resolved
+        ? (selectedModelId === 'primary' ? t('chat.modelPrimary') : t('chat.modelFast'))
+        : t('chat.modelAuto'),
+      meta: buildModelProviderMeta(resolved) || t('chat.modelAutoDesc'),
+      enableThinking: !!resolved?.enable_thinking_process,
+      reasoningEffort: resolved?.reasoning_effort,
+    };
+  }
+
+  const resolved = resolveModelSelection(selectedModelId, catalog);
+  if (!resolved) {
+    return {
+      label: t('chat.modelAuto'),
+      meta: t('chat.modelAutoDesc'),
+      enableThinking: false,
+    };
+  }
+
+  return {
+    label: getModelDisplayName(resolved),
+    meta: buildModelProviderMeta(resolved),
+    enableThinking: resolved.enable_thinking_process,
+    reasoningEffort: resolved.reasoning_effort,
+  };
+}
+
+const ModelSelectorPill: React.FC<{
+  catalog: RemoteModelCatalog | null;
+  selectedModelId: string;
+  disabled?: boolean;
+  onSelect: (modelId: string) => void | Promise<void>;
+}> = ({ catalog, selectedModelId, disabled, onSelect }) => {
+  const { t } = useI18n();
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const normalizedSelectedModelId = useMemo(
+    () => normalizeSelectedModelId(selectedModelId, catalog),
+    [catalog, selectedModelId],
+  );
+
+  const availableModels = useMemo(
+    () => (catalog?.models || []).filter(isChatCapableModel),
+    [catalog],
+  );
+  const resolvedPrimaryModel = useMemo(
+    () => resolveModelSelection(catalog?.default_models?.primary || '', catalog),
+    [catalog],
+  );
+  const resolvedFastModel = useMemo(
+    () => resolveModelSelection(catalog?.default_models?.fast || '', catalog),
+    [catalog],
+  );
+  const selectedInfo = useMemo(
+    () => getSelectedModelInfo(normalizedSelectedModelId, catalog, t),
+    [catalog, normalizedSelectedModelId, t],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    const handleOutside = (event: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleOutside);
+    return () => document.removeEventListener('mousedown', handleOutside);
+  }, [open]);
+
+  if (!catalog) return null;
+
+  const handleSelect = async (modelId: string) => {
+    await onSelect(modelId);
+    setOpen(false);
+  };
+
+  return (
+    <div className="chat-model-selector" ref={rootRef}>
+      <button
+        className={`chat-model-selector__trigger${open ? ' chat-model-selector__trigger--open' : ''}`}
+        type="button"
+        onClick={() => setOpen(prev => !prev)}
+        disabled={disabled}
+        aria-label={t('chat.modelSelection')}
+      >
+        <span className="chat-model-selector__icon" aria-hidden="true">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none">
+            <rect x="4" y="4" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="1.7" />
+            <rect x="14" y="4" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="1.7" />
+            <rect x="9" y="14" width="6" height="6" rx="1.5" stroke="currentColor" strokeWidth="1.7" />
+            <path d="M10 7h4M12 10v4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" />
+          </svg>
+        </span>
+        <span className="chat-model-selector__name">
+          <span className="chat-model-selector__name-text">{selectedInfo.label}</span>
+          {selectedInfo.enableThinking && (
+            <SparklesIcon className="chat-model-selector__thinking" size={9} />
+          )}
+        </span>
+        {selectedInfo.reasoningEffort && (
+          <span className="chat-model-selector__effort">{selectedInfo.reasoningEffort}</span>
+        )}
+        <span className="chat-model-selector__chevron" aria-hidden="true">
+          <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
+            <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </span>
+      </button>
+
+      {open && (
+        <div className="chat-model-selector__dropdown">
+          <div className="chat-model-selector__header">{t('chat.modelSelection')}</div>
+          <button
+            className={`chat-model-selector__option${normalizedSelectedModelId === 'auto' ? ' is-selected' : ''}`}
+            type="button"
+            onClick={() => void handleSelect('auto')}
+          >
+            <span className="chat-model-selector__option-main">
+              <span className="chat-model-selector__option-name">{t('chat.modelAuto')}</span>
+              <span className="chat-model-selector__option-meta">{t('chat.modelAutoDesc')}</span>
+            </span>
+          </button>
+          <button
+            className={`chat-model-selector__option${normalizedSelectedModelId === 'primary' ? ' is-selected' : ''}`}
+            type="button"
+            onClick={() => void handleSelect('primary')}
+          >
+            <span className="chat-model-selector__option-main">
+              <span className="chat-model-selector__option-name">{t('chat.modelPrimary')}</span>
+              <span className="chat-model-selector__option-meta chat-model-selector__option-meta--stacked">
+                <span className="chat-model-selector__option-meta-line">
+                  {getModelDisplayName(resolvedPrimaryModel) || t('chat.modelAuto')}
+                </span>
+                <span className="chat-model-selector__option-meta-line">
+                  {buildModelProviderMeta(resolvedPrimaryModel) || t('chat.modelAutoDesc')}
+                </span>
+              </span>
+            </span>
+          </button>
+          <button
+            className={`chat-model-selector__option${normalizedSelectedModelId === 'fast' ? ' is-selected' : ''}`}
+            type="button"
+            onClick={() => void handleSelect('fast')}
+          >
+            <span className="chat-model-selector__option-main">
+              <span className="chat-model-selector__option-name">{t('chat.modelFast')}</span>
+              <span className="chat-model-selector__option-meta chat-model-selector__option-meta--stacked">
+                <span className="chat-model-selector__option-meta-line">
+                  {getModelDisplayName(resolvedFastModel) || t('chat.modelAuto')}
+                </span>
+                <span className="chat-model-selector__option-meta-line">
+                  {buildModelProviderMeta(resolvedFastModel) || t('chat.modelAutoDesc')}
+                </span>
+              </span>
+            </span>
+          </button>
+          <div className="chat-model-selector__divider" />
+          <div className="chat-model-selector__list">
+            {availableModels.map(model => {
+              const isSelected = normalizedSelectedModelId === model.id;
+              return (
+                <button
+                  key={model.id}
+                  className={`chat-model-selector__option${isSelected ? ' is-selected' : ''}`}
+                  type="button"
+                  onClick={() => void handleSelect(model.id)}
+                >
+                  <span className="chat-model-selector__option-main">
+                    <span className="chat-model-selector__option-name">
+                      <span className="chat-model-selector__option-name-text">
+                        {getModelDisplayName(model)}
+                      </span>
+                      {model.enable_thinking_process && (
+                        <SparklesIcon className="chat-model-selector__option-thinking" size={10} />
+                      )}
+                    </span>
+                    <span className="chat-model-selector__option-meta">
+                      {buildModelProviderMeta(model) || formatProviderName(model.provider)}
+                    </span>
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
 // ─── Agent Mode ─────────────────────────────────────────────────────────────
 
 type AgentMode = 'agentic' | 'Plan' | 'debug';
@@ -1597,6 +1926,9 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
   const [input, setInput] = useState('');
   const [agentMode, setAgentMode] = useState<AgentMode>('agentic');
   const [liveTitle, setLiveTitle] = useState(sessionName);
+  const [modelCatalog, setModelCatalog] = useState<RemoteModelCatalog | null>(null);
+  const [selectedModelId, setSelectedModelId] = useState<string>('auto');
+  const [modelUpdating, setModelUpdating] = useState(false);
   const [pendingImages, setPendingImages] = useState<{ name: string; dataUrl: string }[]>([]);
   const [imageAnalyzing, setImageAnalyzing] = useState(false);
   const [optimisticMsg, setOptimisticMsg] = useState<{
@@ -1610,6 +1942,9 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
 
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [hasMore, setHasMore] = useState(true);
+  const isLoadingMoreRef = useRef(false);
+  const hasMoreRef = useRef(true);
+  const modelSelectionInitializedRef = useRef(false);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const messagesContainerRef = useRef<HTMLDivElement>(null);
   const [expandedMsgIds, setExpandedMsgIds] = useState<Set<string>>(new Set());
@@ -1664,6 +1999,50 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
     }
   }, [sessionId, sessionMgr, setError]);
 
+  const loadModelCatalog = useCallback(async () => {
+    try {
+      const catalog = await sessionMgr.getModelCatalog(sessionId);
+      setModelCatalog(catalog);
+      if (!modelSelectionInitializedRef.current) {
+        const preferredSelection = resolvePreferredModelSelection(loadLastSelectedModelId(), catalog);
+        const sessionModelId = normalizeSelectedModelId(catalog.session_model_id || 'auto', catalog);
+        const nextModelId = preferredSelection.modelId || sessionModelId;
+
+        if (preferredSelection.modelId && preferredSelection.modelId !== sessionModelId) {
+          const normalizedModelId = await sessionMgr.setSessionModel(sessionId, preferredSelection.modelId);
+          setSelectedModelId(normalizedModelId || 'auto');
+          if (preferredSelection.fellBackToAuto && (!normalizedModelId || normalizedModelId === 'auto')) {
+            persistLastSelectedModelId('auto');
+          }
+        } else {
+          setSelectedModelId(nextModelId || 'auto');
+          if (preferredSelection.fellBackToAuto && nextModelId === 'auto') {
+            persistLastSelectedModelId('auto');
+          }
+        }
+        modelSelectionInitializedRef.current = true;
+      }
+      return catalog;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      return null;
+    }
+  }, [sessionId, sessionMgr, setError]);
+
+  const handleSelectModel = useCallback(async (modelId: string) => {
+    if (modelUpdating || isStreaming || imageAnalyzing) return;
+    setModelUpdating(true);
+    try {
+      const normalizedModelId = await sessionMgr.setSessionModel(sessionId, modelId);
+      setSelectedModelId(normalizedModelId || 'auto');
+      persistLastSelectedModelId(normalizedModelId || 'auto');
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setModelUpdating(false);
+    }
+  }, [imageAnalyzing, isStreaming, modelUpdating, sessionId, sessionMgr, setError]);
+
   useEffect(() => {
     if (!isStreaming) return;
     const timer = setInterval(() => setNow(Date.now()), 500);
@@ -1677,8 +2056,9 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
   }, [error, setError]);
 
   const loadMessages = useCallback(async (beforeId?: string) => {
-    if (isLoadingMore || (!hasMore && beforeId)) return;
+    if (isLoadingMoreRef.current || (!hasMoreRef.current && beforeId)) return;
     try {
+      isLoadingMoreRef.current = true;
       setIsLoadingMore(true);
       const resp = await sessionMgr.getSessionMessages(sessionId, 50, beforeId);
       if (beforeId) {
@@ -1688,12 +2068,14 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
         setMessages(sessionId, resp.messages);
       }
       setHasMore(resp.has_more);
+      hasMoreRef.current = resp.has_more;
     } catch (e: any) {
       setError(e.message);
     } finally {
+      isLoadingMoreRef.current = false;
       setIsLoadingMore(false);
     }
-  }, [sessionMgr, sessionId, setMessages, setError, getMessages, isLoadingMore, hasMore]);
+  }, [sessionMgr, sessionId, setMessages, setError, getMessages]);
 
   const isNearBottomRef = useRef(true);
   const BOTTOM_THRESHOLD = 80;
@@ -1714,10 +2096,20 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
   // Initial load + start poller
   const initialScrollDone = useRef(false);
   const pendingInitialScroll = useRef(false);
+  useEffect(() => {
+    modelSelectionInitializedRef.current = false;
+    hasMoreRef.current = true;
+    isLoadingMoreRef.current = false;
+    setHasMore(true);
+    setIsLoadingMore(false);
+    setModelCatalog(null);
+    setSelectedModelId('auto');
+  }, [sessionId]);
+
   useEffect(() => {
     initialScrollDone.current = false;
     pendingInitialScroll.current = false;
-    loadMessages().then(() => {
+    Promise.all([loadMessages(), loadModelCatalog()]).then(([_, initialCatalog]) => {
       const initialMsgCount = useMobileStore.getState().getMessages(sessionId).length;
       pendingInitialScroll.current = true;
 
@@ -1742,8 +2134,11 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
           setLiveTitle(resp.title);
           updateSessionName(sessionId, resp.title);
         }
+        if (resp.model_catalog) {
+          setModelCatalog(resp.model_catalog);
+        }
         setActiveTurn(resp.active_turn ?? null);
-      });
+      }, initialCatalog?.version || 0);
 
       poller.start(initialMsgCount);
       pollerRef.current = poller;
@@ -1754,7 +2149,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
       pollerRef.current = null;
       setActiveTurn(null);
     };
-  }, [sessionId, sessionMgr]);
+  }, [sessionId, sessionMgr, loadMessages, loadModelCatalog, appendNewMessages, setActiveTurn, updateSessionName]);
 
   const prevMsgCountRef = useRef(0);
 
@@ -2258,6 +2653,14 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
           {/* Actions bar */}
           <div className="chat-page__input-actions">
             <div className="chat-page__input-actions-left">
+                {inputExpanded && (
+                  <ModelSelectorPill
+                    catalog={modelCatalog}
+                    selectedModelId={selectedModelId}
+                    disabled={isStreaming || imageAnalyzing || modelUpdating}
+                    onSelect={handleSelectModel}
+                  />
+                )}
               {inputExpanded && pendingImages.length > 0 && (
                 <div className="chat-page__image-preview-row">
                   {pendingImages.map((img, idx) => (
diff --git a/src/mobile-web/src/services/RemoteSessionManager.ts b/src/mobile-web/src/services/RemoteSessionManager.ts
index 18fef4fd..7c1780a1 100644
--- a/src/mobile-web/src/services/RemoteSessionManager.ts
+++ b/src/mobile-web/src/services/RemoteSessionManager.ts
@@ -34,6 +34,31 @@ export interface SessionInfo {
   workspace_name?: string;
 }
 
+export interface RemoteModelConfig {
+  id: string;
+  name: string;
+  provider: string;
+  base_url: string;
+  model_name: string;
+  context_window?: number;
+  enabled: boolean;
+  capabilities: string[];
+  enable_thinking_process: boolean;
+  reasoning_effort?: string;
+}
+
+export interface RemoteDefaultModels {
+  primary?: string | null;
+  fast?: string | null;
+}
+
+export interface RemoteModelCatalog {
+  version: number;
+  models: RemoteModelConfig[];
+  default_models: RemoteDefaultModels;
+  session_model_id?: string | null;
+}
+
 export interface ChatMessageItem {
   type: 'text' | 'tool' | 'thinking';
   content?: string;
@@ -88,6 +113,7 @@ export interface PollResponse {
   new_messages?: ChatMessage[];
   total_msg_count?: number;
   active_turn?: ActiveTurnSnapshot | null;
+  model_catalog?: RemoteModelCatalog;
 }
 
 export interface InitialSyncData {
@@ -205,6 +231,30 @@ export class RemoteSessionManager {
     };
   }
 
+  async getModelCatalog(sessionId?: string): Promise<RemoteModelCatalog> {
+    const resp = await this.request<{
+      resp: string;
+      catalog: RemoteModelCatalog;
+    }>({
+      cmd: 'get_model_catalog',
+      session_id: sessionId ?? undefined,
+    });
+    return resp.catalog;
+  }
+
+  async setSessionModel(sessionId: string, modelId: string): Promise<string> {
+    const resp = await this.request<{
+      resp: string;
+      session_id: string;
+      model_id: string;
+    }>({
+      cmd: 'set_session_model',
+      session_id: sessionId,
+      model_id: modelId,
+    });
+    return resp.model_id;
+  }
+
   async sendMessage(
     sessionId: string,
     content: string,
@@ -255,12 +305,14 @@ export class RemoteSessionManager {
     sessionId: string,
     sinceVersion: number,
     knownMsgCount: number,
+    knownModelCatalogVersion = 0,
   ): Promise<PollResponse> {
     return this.request<PollResponse>({
       cmd: 'poll_session',
       session_id: sessionId,
       since_version: sinceVersion,
       known_msg_count: knownMsgCount,
+      known_model_catalog_version: knownModelCatalogVersion,
     });
   }
 
@@ -367,15 +419,18 @@ export class SessionPoller {
   private polling = false;
   private stopped = false;
   private hasActiveTurn = false;
+  private knownModelCatalogVersion = 0;
 
   constructor(
     sessionMgr: RemoteSessionManager,
     sessionId: string,
     onUpdate: (state: PollResponse) => void,
+    initialModelCatalogVersion = 0,
   ) {
     this.sessionMgr = sessionMgr;
     this.sessionId = sessionId;
     this.onUpdate = onUpdate;
+    this.knownModelCatalogVersion = initialModelCatalogVersion;
   }
 
   start(initialMsgCount = 0) {
@@ -399,6 +454,10 @@ export class SessionPoller {
     this.knownMsgCount = 0;
   }
 
+  setKnownModelCatalogVersion(version: number) {
+    this.knownModelCatalogVersion = version;
+  }
+
   /** Call after sending a message to immediately switch to fast polling. */
   nudge() {
     this.hasActiveTurn = true;
@@ -438,6 +497,7 @@ export class SessionPoller {
         this.sessionId,
         this.sinceVersion,
         this.knownMsgCount,
+        this.knownModelCatalogVersion,
       );
       // Only update hasActiveTurn from responses that carry actual data.
       // When changed=false the backend omits active_turn, so we must
@@ -450,6 +510,9 @@ export class SessionPoller {
         if (resp.total_msg_count != null) {
           this.knownMsgCount = resp.total_msg_count;
         }
+        if (resp.model_catalog?.version != null) {
+          this.knownModelCatalogVersion = resp.model_catalog.version;
+        }
         this.onUpdate(resp);
       }
     } catch (e) {
diff --git a/src/mobile-web/src/styles/components/chat-input.scss b/src/mobile-web/src/styles/components/chat-input.scss
index b1c73b23..e1f44626 100644
--- a/src/mobile-web/src/styles/components/chat-input.scss
+++ b/src/mobile-web/src/styles/components/chat-input.scss
@@ -135,13 +135,13 @@
   justify-content: space-between;
   gap: 8px;
   min-height: 24px;
-  padding: 0 0 12px;
+  padding: 0 0 7px;
 }
 
 .chat-page__input-actions-left {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 8px;
   flex: 1;
   min-width: 0;
 }
@@ -155,6 +155,216 @@
 
 // ── Mode pill button (desktop style) ─────────────────────────────────────────
 
+.chat-model-selector {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.chat-model-selector__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  height: 24px;
+  padding: 0 8px;
+  border: none;
+  border-radius: 12px;
+  background: var(--element-bg-subtle);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:active:not(:disabled),
+  &--open {
+    background: rgba(100, 140, 255, 0.15);
+    color: var(--color-text-primary);
+  }
+
+  &:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.chat-model-selector__icon,
+.chat-model-selector__thinking,
+.chat-model-selector__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.chat-model-selector__icon,
+.chat-model-selector__chevron {
+  color: var(--color-text-tertiary);
+}
+
+.chat-model-selector__thinking {
+  color: var(--color-purple-500);
+}
+
+.chat-model-selector__name {
+  max-width: 96px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.chat-model-selector__name-text {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 9px;
+  letter-spacing: 0.3px;
+}
+
+.chat-model-selector__effort {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: rgba(100, 200, 160, 0.15);
+  color: rgba(100, 200, 160, 0.95);
+  font-size: 7px;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.chat-model-selector__dropdown {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  width: 180px;
+  max-width: 180px;
+  max-height: min(345px, calc(100vh - 160px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-xl);
+  backdrop-filter: blur(18px) saturate(1.15);
+  -webkit-backdrop-filter: blur(18px) saturate(1.15);
+  z-index: 30;
+}
+
+.chat-model-selector__header {
+  padding: 10px 12px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.chat-model-selector__divider {
+  height: 1px;
+  margin: 4px 12px;
+  background: var(--border-subtle);
+}
+
+.chat-model-selector__list {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+.chat-model-selector__option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:active,
+  &.is-selected {
+    background: var(--element-bg-subtle);
+  }
+}
+
+.chat-model-selector__option-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+}
+
+.chat-model-selector__option-name {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.chat-model-selector__option-name-text {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-model-selector__option-thinking {
+  color: var(--color-purple-500);
+  font-size: 9px;
+  flex-shrink: 0;
+}
+
+.chat-model-selector__option-meta {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 9px;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-model-selector__option-meta--stacked {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  white-space: normal;
+}
+
+.chat-model-selector__option-meta-line {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .chat-page__mode-pill {
   height: 24px;
   padding: 0 10px;
diff --git a/src/web-ui/src/flow_chat/components/ModelSelector.tsx b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
index b0c6beb6..8aa2e074 100644
--- a/src/web-ui/src/flow_chat/components/ModelSelector.tsx
+++ b/src/web-ui/src/flow_chat/components/ModelSelector.tsx
@@ -98,6 +98,16 @@ const getModelTooltipText = (model: ModelInfo | null, fallback: string): string
   return buildModelMetaText(model);
 };
 
+const buildAutoModelInfo = (
+  t: (key: string) => string,
+): ModelInfo => ({
+  id: 'auto',
+  configName: t('modelSelector.autoModel'),
+  modelName: t('modelSelector.autoModel'),
+  providerName: t('modelSelector.autoModelDesc'),
+  provider: 'auto',
+});
+
 export const ModelSelector: React.FC<ModelSelectorProps> = ({
   currentMode,
   className = '',
@@ -172,28 +182,30 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
   }, [dropdownOpen]);
   
   const getCurrentModelId = useCallback((): string => {
-    return agentModels[currentMode] || 'auto';
-  }, [currentMode, agentModels]);
+    const configuredModelId = agentModels[currentMode] || 'auto';
+    if (configuredModelId === 'auto') return 'auto';
+    if (configuredModelId === 'primary' || configuredModelId === 'fast') {
+      const actualModelId = defaultModels[configuredModelId];
+      const model = allModels.find(m => m.id === actualModelId);
+      return model ? configuredModelId : 'auto';
+    }
+    const model = allModels.find(m => m.id === configuredModelId);
+    return model ? configuredModelId : 'auto';
+  }, [allModels, currentMode, agentModels, defaultModels]);
 
   const currentModel = useMemo((): ModelInfo | null => {
     const modelId = getCurrentModelId();
 
     if (modelId === 'auto') {
-      return {
-        id: 'auto',
-        configName: t('modelSelector.autoModel'),
-        modelName: t('modelSelector.autoModel'),
-        providerName: t('modelSelector.autoModelDesc'),
-        provider: 'auto',
-      };
+      return buildAutoModelInfo(t);
     }
 
     if (isSpecialModel(modelId)) {
       const actualModelId = defaultModels[modelId];
-      if (!actualModelId) return null;
+      if (!actualModelId) return buildAutoModelInfo(t);
 
       const model = allModels.find(m => m.id === actualModelId);
-      if (!model) return null;
+      if (!model) return buildAutoModelInfo(t);
 
       return {
         id: modelId,
@@ -208,7 +220,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     }
 
     const model = allModels.find(m => m.id === modelId);
-    if (!model) return null;
+    if (!model) return buildAutoModelInfo(t);
 
     return {
       id: model.id || '',
@@ -279,7 +291,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
       ref={dropdownRef}
       className={`bitfun-model-selector ${className}`}
     >
-      <Tooltip content={getModelTooltipText(currentModel, t('modelSelector.modelNotConfigured'))}>
+      <Tooltip content={getModelTooltipText(currentModel, t('modelSelector.autoModelDesc'))}>
         <button
           className={`bitfun-model-selector__trigger ${dropdownOpen ? 'bitfun-model-selector__trigger--open' : ''}`}
           onClick={() => setDropdownOpen(!dropdownOpen)}
@@ -287,7 +299,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
         >
           <Cpu size={10} className="bitfun-model-selector__icon" />
           <span className="bitfun-model-selector__name">
-            {getModelDisplayLabel(currentModel, t('modelSelector.modelNotConfigured'))}
+            {getModelDisplayLabel(currentModel, t('modelSelector.autoModel'))}
           </span>
           {currentModel?.enableThinking && (
             <Sparkles size={9} className="bitfun-model-selector__thinking-icon" />
@@ -330,8 +342,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               ? buildResolvedModelTooltipText(primaryModel.model_name, {
                 providerName: getProviderDisplayName(primaryModel),
                 contextWindow: primaryModel.context_window
-              }, t('modelSelector.modelNotConfigured'))
-              : t('modelSelector.modelNotConfigured');
+              }, t('modelSelector.autoModelDesc'))
+              : t('modelSelector.autoModelDesc');
             return (
               <Tooltip content={primaryTooltip} placement="right">
                 <div
@@ -355,8 +367,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
               ? buildResolvedModelTooltipText(fastModel.model_name, {
                 providerName: getProviderDisplayName(fastModel),
                 contextWindow: fastModel.context_window
-              }, t('modelSelector.modelNotConfigured'))
-              : t('modelSelector.modelNotConfigured');
+              }, t('modelSelector.autoModelDesc'))
+              : t('modelSelector.autoModelDesc');
             return (
               <Tooltip content={fastTooltip} placement="right">
                 <div
diff --git a/src/web-ui/src/flow_chat/hooks/useMessageSender.ts b/src/web-ui/src/flow_chat/hooks/useMessageSender.ts
index 4bc63180..44504739 100644
--- a/src/web-ui/src/flow_chat/hooks/useMessageSender.ts
+++ b/src/web-ui/src/flow_chat/hooks/useMessageSender.ts
@@ -12,10 +12,31 @@ import { useCallback } from 'react';
 import { FlowChatManager } from '../services/FlowChatManager';
 import { notificationService } from '@/shared/notification-system';
 import type { ContextItem, ImageContext } from '@/shared/types/context';
+import type { AIModelConfig, DefaultModelsConfig } from '@/infrastructure/config/types';
 import { createLogger } from '@/shared/utils/logger';
 
 const log = createLogger('FlowChat');
 
+function normalizeModelSelection(
+  modelId: string | undefined,
+  models: AIModelConfig[],
+  defaultModels: DefaultModelsConfig,
+): string {
+  const value = modelId?.trim();
+  if (!value || value === 'auto') return 'auto';
+
+  if (value === 'primary' || value === 'fast') {
+    const resolvedDefaultId = value === 'primary' ? defaultModels.primary : defaultModels.fast;
+    const matchedModel = models.find(model => model.id === resolvedDefaultId);
+    return matchedModel ? value : 'auto';
+  }
+
+  const matchedModel = models.find(model =>
+    model.id === value || model.name === value || model.model_name === value,
+  );
+  return matchedModel ? value : 'auto';
+}
+
 interface UseMessageSenderProps {
   /** Current session ID */
   currentSessionId?: string;
@@ -77,9 +98,13 @@ export function useMessageSender(props: UseMessageSenderProps): UseMessageSender
 
       if (!sessionId) {
         const { configManager } = await import('@/infrastructure/config/services/ConfigManager');
-        const agentModels = await configManager.getConfig<Record<string, string>>('ai.agent_models') || {};
+        const [agentModels, allModels, defaultModels] = await Promise.all([
+          configManager.getConfig<Record<string, string>>('ai.agent_models') || {},
+          configManager.getConfig<AIModelConfig[]>('ai.models') || [],
+          configManager.getConfig<DefaultModelsConfig>('ai.default_models') || {},
+        ]);
         const agentType = currentAgentType || 'agentic';
-        const modelId = agentModels[agentType] || 'auto';
+        const modelId = normalizeModelSelection(agentModels[agentType], allModels, defaultModels);
 
         sessionId = await flowChatManager.createChatSession({
           modelName: modelId || undefined
diff --git a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
index 73c505d9..ccacd663 100644
--- a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
@@ -156,6 +156,8 @@ const AIModelConfig: React.FC = () => {
   const [hasAttemptedRemoteFetch, setHasAttemptedRemoteFetch] = useState(false);
   const [selectedModelDrafts, setSelectedModelDrafts] = useState<SelectedModelDraft[]>([]);
   const [manualModelInput, setManualModelInput] = useState('');
+  const lastRemoteFetchSignatureRef = React.useRef<string | null>(null);
+  const activeRemoteFetchSignatureRef = React.useRef<string | null>(null);
 
   const requestFormatOptions = useMemo(
     () => [
@@ -288,6 +290,8 @@ const AIModelConfig: React.FC = () => {
     setIsFetchingRemoteModels(false);
     setRemoteModelsError(null);
     setHasAttemptedRemoteFetch(false);
+    lastRemoteFetchSignatureRef.current = null;
+    activeRemoteFetchSignatureRef.current = null;
   };
 
   const syncSelectedModelDrafts = (
@@ -416,6 +420,17 @@ const AIModelConfig: React.FC = () => {
     };
   };
 
+  const buildModelDiscoverySignature = (config: AIModelConfigType): string => JSON.stringify({
+    provider: config.provider,
+    base_url: config.base_url,
+    api_key: config.api_key,
+    model_name: config.model_name,
+    skip_ssl_verify: config.skip_ssl_verify ?? false,
+    custom_headers_mode: config.custom_headers_mode || null,
+    custom_headers: config.custom_headers || null,
+    custom_request_body: config.custom_request_body || null,
+  });
+
   const fetchRemoteModels = async (config: Partial<AIModelConfigType> | null) => {
     if (!config) return;
 
@@ -427,9 +442,19 @@ const AIModelConfig: React.FC = () => {
       return;
     }
 
+    const requestSignature = buildModelDiscoverySignature(discoveryConfig);
+    if (activeRemoteFetchSignatureRef.current === requestSignature) {
+      return;
+    }
+    if (lastRemoteFetchSignatureRef.current === requestSignature) {
+      return;
+    }
+
     setIsFetchingRemoteModels(true);
     setRemoteModelsError(null);
     setHasAttemptedRemoteFetch(true);
+    lastRemoteFetchSignatureRef.current = requestSignature;
+    activeRemoteFetchSignatureRef.current = requestSignature;
 
     try {
       const remoteModels = await aiApi.listModelsByConfig(discoveryConfig);
@@ -451,12 +476,16 @@ const AIModelConfig: React.FC = () => {
       setRemoteModelsError(t('providerSelection.fetchFailedFallback'));
     } finally {
       setIsFetchingRemoteModels(false);
+      if (activeRemoteFetchSignatureRef.current === requestSignature) {
+        activeRemoteFetchSignatureRef.current = null;
+      }
     }
   };
 
   const handleModelSelectionOpenChange = (isOpen: boolean) => {
     if (!isOpen || !editingConfig || isFetchingRemoteModels) return;
     if (!editingConfig.api_key?.trim()) return;
+    if (hasAttemptedRemoteFetch) return;
     if (remoteModelOptions.length > 0) return;
     void fetchRemoteModels(editingConfig);
   };