diff --git a/src/apps/desktop/src/api/app_state.rs b/src/apps/desktop/src/api/app_state.rs
index c873d5bb..af685d48 100644
--- a/src/apps/desktop/src/api/app_state.rs
+++ b/src/apps/desktop/src/api/app_state.rs
@@ -115,6 +115,7 @@ impl AppState {
             .map(|workspace| workspace.root_path);
 
         if let Some(workspace_path) = initial_workspace_path.clone() {
+            bitfun_core::infrastructure::set_workspace_path(Some(workspace_path.clone()));
             miniapp_manager
                 .set_workspace_path(Some(workspace_path.clone()))
                 .await;
diff --git a/src/apps/desktop/src/lib.rs b/src/apps/desktop/src/lib.rs
index bda8ff6d..d1fdbc5e 100644
--- a/src/apps/desktop/src/lib.rs
+++ b/src/apps/desktop/src/lib.rs
@@ -766,13 +766,11 @@ fn start_event_loop_with_transport(
 
             if !batch.is_empty() {
                 for envelope in batch {
-                    let router = event_router.clone();
-                    let env_clone = envelope.clone();
-                    tokio::spawn(async move {
-                        if let Err(e) = router.route(env_clone).await {
-                            log::warn!("Internal event routing failed: {:?}", e);
-                        }
-                    });
+                    // Route to internal subscribers (e.g. RemoteSessionStateTracker)
+                    // sequentially so that text chunks are appended in order.
+                    if let Err(e) = event_router.route(envelope.clone()).await {
+                        log::warn!("Internal event routing failed: {:?}", e);
+                    }
 
                     if let Err(e) = transport.emit_event("", envelope.event).await {
                         log::error!("Failed to emit event: {:?}", e);
diff --git a/src/apps/relay-server/README.md b/src/apps/relay-server/README.md
index 73750750..2e1698e3 100644
--- a/src/apps/relay-server/README.md
+++ b/src/apps/relay-server/README.md
@@ -18,9 +18,6 @@ WebSocket relay server for BitFun Remote Connect. Bridges desktop (WebSocket) an
 ```bash
 # One-click deploy
 bash deploy.sh
-
-# With mobile web client rebuild
-bash deploy.sh --build-mobile
 ```
 
 ### What URL should I fill in BitFun Desktop?
@@ -123,7 +120,7 @@ Only desktop clients connect via WebSocket. Mobile clients use the HTTP endpoint
 
 1. Clone the repository
 2. Navigate to `src/apps/relay-server/`
-3. Run `bash deploy.sh --build-mobile`
+3. Run `bash deploy.sh`
 4. Configure DNS/firewall as needed
 5. In BitFun desktop, select "Custom Server" and enter your server URL
 
diff --git a/src/apps/relay-server/deploy.sh b/src/apps/relay-server/deploy.sh
index 8786b934..48b81a30 100755
--- a/src/apps/relay-server/deploy.sh
+++ b/src/apps/relay-server/deploy.sh
@@ -1,15 +1,13 @@
 #!/usr/bin/env bash
 # BitFun Relay Server — one-click deploy script.
-# Usage:  bash deploy.sh [--build-mobile] [--skip-build] [--skip-health-check]
+# Usage:  bash deploy.sh [--skip-build] [--skip-health-check]
 #
 # Prerequisites: Docker, Docker Compose
 
 set -euo pipefail
 
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-PROJECT_ROOT="$(cd "$SCRIPT_DIR/../../.." && pwd)"
 
-BUILD_MOBILE=false
 SKIP_BUILD=false
 SKIP_HEALTH_CHECK=false
 
@@ -21,7 +19,6 @@ Usage:
   bash deploy.sh [options]
 
 Options:
-  --build-mobile       Build mobile-web static files before deploy
   --skip-build         Skip docker compose build, only restart services
   --skip-health-check  Skip post-deploy health check
   -h, --help           Show this help message
@@ -46,7 +43,6 @@ check_docker_compose() {
 
 for arg in "$@"; do
   case "$arg" in
-    --build-mobile) BUILD_MOBILE=true ;;
     --skip-build) SKIP_BUILD=true ;;
     --skip-health-check) SKIP_HEALTH_CHECK=true ;;
     -h|--help)
@@ -65,31 +61,16 @@ echo "=== BitFun Relay Server Deploy ==="
 check_command docker
 check_docker_compose
 
-# Build mobile web static files if requested
-if [ "$BUILD_MOBILE" = true ] && [ -d "$PROJECT_ROOT/src/mobile-web" ]; then
-  check_command npm
-  echo "[1/3] Building mobile web client..."
-  cd "$PROJECT_ROOT/src/mobile-web"
-  npm ci
-  npm run build
-  mkdir -p "$SCRIPT_DIR/static"
-  cp -r dist/* "$SCRIPT_DIR/static/"
-  cd "$SCRIPT_DIR"
-  echo "  Mobile web built → $SCRIPT_DIR/static/"
-else
-  echo "[1/3] Skipping mobile web build (use --build-mobile to include)"
-fi
-
 # Build and start containers
 cd "$SCRIPT_DIR"
 if [ "$SKIP_BUILD" = true ]; then
-  echo "[2/3] Skipping Docker build (--skip-build)"
+  echo "[1/2] Skipping Docker build (--skip-build)"
 else
-  echo "[2/3] Building Docker images..."
+  echo "[1/2] Building Docker images..."
   docker compose build
 fi
 
-echo "[3/3] Starting services..."
+echo "[2/2] Starting services..."
 docker compose up -d
 
 if [ "$SKIP_HEALTH_CHECK" = false ]; then
diff --git a/src/apps/relay-server/src/lib.rs b/src/apps/relay-server/src/lib.rs
index e133f5b5..3be16d62 100644
--- a/src/apps/relay-server/src/lib.rs
+++ b/src/apps/relay-server/src/lib.rs
@@ -247,7 +247,10 @@ pub fn build_relay_router(
         .route("/health", get(routes::api::health_check))
         .route("/api/info", get(routes::api::server_info))
         .route("/api/rooms/:room_id/pair", post(routes::api::pair))
-        .route("/api/rooms/:room_id/command", post(routes::api::command))
+        .route(
+            "/api/rooms/:room_id/command",
+            post(routes::api::command).layer(DefaultBodyLimit::max(10 * 1024 * 1024)),
+        )
         .route(
             "/api/rooms/:room_id/upload-web",
             post(routes::api::upload_web).layer(DefaultBodyLimit::max(10 * 1024 * 1024)),
diff --git a/src/apps/relay-server/src/routes/websocket.rs b/src/apps/relay-server/src/routes/websocket.rs
index f323213c..ca264d16 100644
--- a/src/apps/relay-server/src/routes/websocket.rs
+++ b/src/apps/relay-server/src/routes/websocket.rs
@@ -70,7 +70,8 @@ pub async fn websocket_handler(
     ws: WebSocketUpgrade,
     State(state): State<AppState>,
 ) -> Response {
-    ws.on_upgrade(move |socket| handle_socket(socket, state))
+    ws.max_message_size(64 * 1024 * 1024)
+        .on_upgrade(move |socket| handle_socket(socket, state))
 }
 
 async fn handle_socket(socket: WebSocket, state: AppState) {
diff --git a/src/crates/core/src/agentic/coordination/coordinator.rs b/src/crates/core/src/agentic/coordination/coordinator.rs
index bbe6f541..639e8a48 100644
--- a/src/crates/core/src/agentic/coordination/coordinator.rs
+++ b/src/crates/core/src/agentic/coordination/coordinator.rs
@@ -269,6 +269,78 @@ impl ConversationCoordinator {
         }
     }
 
+    /// Ensure the completed/failed/cancelled turn is persisted to the workspace
+    /// conversation storage.  If the frontend already saved a richer version
+    /// during streaming, we only update the final status; otherwise we create
+    /// a minimal record with the user message so the turn is never lost.
+    /// Safety-net persistence: only creates a minimal record when the frontend
+    /// has not saved anything yet.  The frontend's PersistenceModule is the
+    /// authoritative writer for turn content (model rounds, text, tools, etc.)
+    /// and final status.  This function must NOT overwrite frontend-managed
+    /// data, because the spawned task always runs before the frontend receives
+    /// the DialogTurnCompleted event via the transport layer, and the existing
+    /// disk data from debounced saves may have incomplete model rounds.
+    async fn finalize_turn_in_workspace(
+        session_id: &str,
+        turn_id: &str,
+        turn_index: usize,
+        user_input: &str,
+        workspace_path: &str,
+        status: crate::service::conversation::TurnStatus,
+        user_message_metadata: Option<serde_json::Value>,
+    ) {
+        use crate::infrastructure::PathManager;
+        use crate::service::conversation::{
+            ConversationPersistenceManager, DialogTurnData, UserMessageData,
+        };
+
+        let path_manager = match PathManager::new() {
+            Ok(pm) => std::sync::Arc::new(pm),
+            Err(_) => return,
+        };
+
+        let conv_mgr = match ConversationPersistenceManager::new(
+            path_manager,
+            std::path::PathBuf::from(workspace_path),
+        )
+        .await
+        {
+            Ok(mgr) => mgr,
+            Err(_) => return,
+        };
+
+        if let Ok(Some(_existing)) = conv_mgr.load_dialog_turn(session_id, turn_index).await {
+            return;
+        }
+
+        let now_ms = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .unwrap_or_default()
+            .as_millis() as u64;
+
+        let mut turn_data = DialogTurnData::new(
+            turn_id.to_string(),
+            turn_index,
+            session_id.to_string(),
+            UserMessageData {
+                id: format!("{}-user", turn_id),
+                content: user_input.to_string(),
+                timestamp: now_ms,
+                metadata: user_message_metadata,
+            },
+        );
+        turn_data.status = status;
+        turn_data.end_time = Some(now_ms);
+        turn_data.duration_ms = Some(now_ms.saturating_sub(turn_data.start_time));
+
+        if let Err(e) = conv_mgr.save_dialog_turn(&turn_data).await {
+            warn!(
+                "Failed to finalize turn in workspace: session_id={}, turn_index={}, error={}",
+                session_id, turn_index, e
+            );
+        }
+    }
+
     /// Create a subagent session for internal AI execution.
     /// Unlike `create_session`, this does NOT emit `SessionCreated` to the transport layer,
     /// because subagent sessions are internal implementation details of the execution engine
@@ -342,6 +414,130 @@ impl ConversationCoordinator {
         .await
     }
 
+    /// Pre-analyze images using the configured vision model.
+    ///
+    /// Strategy:
+    /// 1. Vision model configured → analyze images → enhance user message with text descriptions → clear image_contexts
+    /// 2. No vision model → reject with a user-friendly message
+    async fn pre_analyze_images_if_needed(
+        &self,
+        user_input: String,
+        image_contexts: Option<Vec<ImageContextData>>,
+        session_id: &str,
+        image_metadata: Option<serde_json::Value>,
+    ) -> BitFunResult<(String, Option<Vec<ImageContextData>>)> {
+        let images = match &image_contexts {
+            Some(imgs) if !imgs.is_empty() => imgs,
+            _ => return Ok((user_input, image_contexts)),
+        };
+
+        use crate::agentic::image_analysis::{
+            resolve_vision_model_from_global_config, AnalyzeImagesRequest, ImageAnalyzer,
+            MessageEnhancer,
+        };
+        use crate::infrastructure::ai::get_global_ai_client_factory;
+
+        let vision_model = match resolve_vision_model_from_global_config().await {
+            Ok(m) => m,
+            Err(_e) => {
+                let is_chinese = Self::is_chinese_locale().await;
+                let msg = if is_chinese {
+                    "请先在桌面端「设置 → AI 模型」中配置图片理解模型，然后再发送图片。"
+                } else {
+                    "Please configure an Image Understanding Model in Settings → AI Models on the desktop app before sending images."
+                };
+                return Err(BitFunError::service(msg));
+            }
+        };
+
+        let factory = match get_global_ai_client_factory().await {
+            Ok(f) => f,
+            Err(e) => {
+                warn!("Failed to get AI client factory for vision: {}", e);
+                return Ok((user_input, image_contexts));
+            }
+        };
+
+        let vision_client = match factory.get_client_by_id(&vision_model.id).await {
+            Ok(c) => c,
+            Err(e) => {
+                warn!("Failed to create vision AI client: {}", e);
+                return Ok((user_input, image_contexts));
+            }
+        };
+
+        let workspace_path = crate::infrastructure::get_workspace_path();
+        let analyzer = ImageAnalyzer::new(workspace_path, vision_client);
+        let request = AnalyzeImagesRequest {
+            images: images.clone(),
+            user_message: Some(user_input.clone()),
+            session_id: session_id.to_string(),
+        };
+
+        self.emit_event(AgenticEvent::ImageAnalysisStarted {
+            session_id: session_id.to_string(),
+            image_count: images.len(),
+            user_input: user_input.clone(),
+            image_metadata: image_metadata.clone(),
+        })
+        .await;
+
+        let analysis_start = std::time::Instant::now();
+
+        match analyzer.analyze_images(request, &vision_model).await {
+            Ok(results) => {
+                let duration_ms = analysis_start.elapsed().as_millis() as u64;
+
+                self.emit_event(AgenticEvent::ImageAnalysisCompleted {
+                    session_id: session_id.to_string(),
+                    success: true,
+                    duration_ms,
+                })
+                .await;
+
+                info!(
+                    "Vision pre-analysis completed: session={}, images={}, results={}, duration={}ms",
+                    session_id,
+                    images.len(),
+                    results.len(),
+                    duration_ms
+                );
+                let enhanced =
+                    MessageEnhancer::enhance_with_image_analysis(&user_input, &results, &[]);
+                Ok((enhanced, None))
+            }
+            Err(e) => {
+                let duration_ms = analysis_start.elapsed().as_millis() as u64;
+
+                self.emit_event(AgenticEvent::ImageAnalysisCompleted {
+                    session_id: session_id.to_string(),
+                    success: false,
+                    duration_ms,
+                })
+                .await;
+
+                warn!(
+                    "Vision pre-analysis failed, falling back to multimodal: session={}, error={}",
+                    session_id, e
+                );
+                Ok((user_input, image_contexts))
+            }
+        }
+    }
+
+    async fn is_chinese_locale() -> bool {
+        use crate::service::config::get_global_config_service;
+        use crate::service::config::types::AppConfig;
+        let Ok(config_service) = get_global_config_service().await else {
+            return true;
+        };
+        let app: AppConfig = config_service
+            .get_config(Some("app"))
+            .await
+            .unwrap_or_default();
+        app.language.starts_with("zh")
+    }
+
     async fn start_dialog_turn_internal(
         &self,
         session_id: String,
@@ -472,6 +668,50 @@ impl ConversationCoordinator {
         }
 
         let original_user_input = user_input.clone();
+
+        // Build image metadata for ConversationPersistenceManager (before image_contexts is consumed)
+        // Also stores original_text so the UI can display the user's actual input
+        // instead of the vision-enhanced text.
+        let user_message_metadata: Option<serde_json::Value> = image_contexts
+            .as_ref()
+            .filter(|imgs| !imgs.is_empty())
+            .map(|imgs| {
+                let image_meta: Vec<serde_json::Value> = imgs
+                    .iter()
+                    .map(|img| {
+                        let name = img
+                            .metadata
+                            .as_ref()
+                            .and_then(|m| m.get("name"))
+                            .and_then(|v| v.as_str())
+                            .unwrap_or("image.png");
+                        let mut meta = serde_json::json!({
+                            "id": &img.id,
+                            "name": name,
+                            "mime_type": &img.mime_type,
+                        });
+                        if let Some(url) = &img.data_url {
+                            meta["data_url"] = serde_json::json!(url);
+                        }
+                        if let Some(path) = &img.image_path {
+                            meta["image_path"] = serde_json::json!(path);
+                        }
+                        meta
+                    })
+                    .collect();
+                serde_json::json!({
+                    "images": image_meta,
+                    "original_text": &original_user_input,
+                })
+            });
+
+        // Auto vision pre-analysis: when images are present, try to use the configured
+        // vision model to pre-analyze them, then enhance the user message with text descriptions.
+        // This is the single authoritative code path for all image handling (desktop, remote, bot).
+        // If no vision model is configured, the request is rejected with a user-friendly message.
+        let (user_input, image_contexts) =
+            self.pre_analyze_images_if_needed(user_input, image_contexts, &session_id, user_message_metadata.clone()).await?;
+
         let wrapped_user_input = self
             .wrap_user_input(&effective_agent_type, user_input)
             .await?;
@@ -489,12 +729,20 @@ impl ConversationCoordinator {
             )
             .await?;
 
-        // Send dialog turn started event
+        // Send dialog turn started event with original input and image metadata
+        // so all frontends (desktop, mobile, bot) can display correctly.
+        let has_images = user_message_metadata.is_some();
         self.emit_event(AgenticEvent::DialogTurnStarted {
             session_id: session_id.clone(),
             turn_id: turn_id.clone(),
             turn_index,
             user_input: wrapped_user_input.clone(),
+            original_user_input: if has_images {
+                Some(original_user_input.clone())
+            } else {
+                None
+            },
+            user_message_metadata: user_message_metadata.clone(),
             subagent_parent_info: None,
         })
         .await;
@@ -583,7 +831,9 @@ impl ConversationCoordinator {
         let session_id_clone = session_id.clone();
         let turn_id_clone = turn_id.clone();
         let session_workspace_path = session.config.workspace_path.clone();
+        let user_input_for_workspace = wrapped_user_input.clone();
         let effective_agent_type_clone = effective_agent_type.clone();
+        let user_message_metadata_clone = user_message_metadata;
         let scheduler_notify_tx = self.scheduler_notify_tx.get().cloned();
 
         tokio::spawn(async move {
@@ -591,7 +841,7 @@ impl ConversationCoordinator {
             // Cancel token is created in execute_dialog_turn -> execute_round
             // execute_dialog_turn has proper cancellation checks internally
 
-            if let Some(workspace_path) = session_workspace_path {
+            if let Some(ref workspace_path) = session_workspace_path {
                 use crate::infrastructure::{get_workspace_path, set_workspace_path};
 
                 let current = get_workspace_path().map(|p| p.to_string_lossy().to_string());
@@ -614,7 +864,7 @@ impl ConversationCoordinator {
                 )
                 .await;
 
-            match execution_engine
+            let workspace_turn_status = match execution_engine
                 .execute_dialog_turn(effective_agent_type_clone, messages, execution_context)
                 .await
             {
@@ -649,13 +899,46 @@ impl ConversationCoordinator {
                     if let Some(tx) = &scheduler_notify_tx {
                         let _ = tx.try_send((session_id_clone.clone(), TurnOutcome::Completed));
                     }
+
+                    Some(crate::service::conversation::TurnStatus::Completed)
                 }
                 Err(e) => {
                     let is_cancellation = matches!(&e, BitFunError::Cancelled(_));
 
                     if is_cancellation {
-                        // DialogTurnCancelled already sent in execution_engine
-                        debug!("Dialog turn cancelled: {}", e);
+                        info!("Dialog turn cancelled: session={}, turn={}", session_id_clone, turn_id_clone);
+
+                        // The execution engine only emits DialogTurnCancelled when
+                        // cancellation is detected between rounds.  If cancellation
+                        // interrupted streaming mid-round, no event was emitted.
+                        // Emit it here unconditionally (duplicates are harmless).
+                        let _ = event_queue
+                            .enqueue(
+                                AgenticEvent::DialogTurnCancelled {
+                                    session_id: session_id_clone.clone(),
+                                    turn_id: turn_id_clone.clone(),
+                                    subagent_parent_info: None,
+                                },
+                                Some(EventPriority::Critical),
+                            )
+                            .await;
+
+                        // Mark the turn as completed in persistence so its partial
+                        // content appears in historical messages (turns_to_chat_messages
+                        // skips InProgress turns).
+                        let _ = session_manager
+                            .complete_dialog_turn(
+                                &session_id_clone,
+                                &turn_id_clone,
+                                String::new(),
+                                TurnStats {
+                                    total_rounds: 0,
+                                    total_tools: 0,
+                                    total_tokens: 0,
+                                    duration_ms: 0,
+                                },
+                            )
+                            .await;
 
                         let _ = session_manager
                             .update_session_state(&session_id_clone, SessionState::Idle)
@@ -664,6 +947,8 @@ impl ConversationCoordinator {
                         if let Some(tx) = &scheduler_notify_tx {
                             let _ = tx.try_send((session_id_clone.clone(), TurnOutcome::Cancelled));
                         }
+
+                        Some(crate::service::conversation::TurnStatus::Cancelled)
                     } else {
                         error!("Dialog turn execution failed: {}", e);
 
@@ -682,6 +967,14 @@ impl ConversationCoordinator {
                             )
                             .await;
 
+                        let _ = session_manager
+                            .fail_dialog_turn(
+                                &session_id_clone,
+                                &turn_id_clone,
+                                e.to_string(),
+                            )
+                            .await;
+
                         let _ = session_manager
                             .update_session_state(
                                 &session_id_clone,
@@ -695,8 +988,23 @@ impl ConversationCoordinator {
                         if let Some(tx) = &scheduler_notify_tx {
                             let _ = tx.try_send((session_id_clone.clone(), TurnOutcome::Failed));
                         }
+
+                        Some(crate::service::conversation::TurnStatus::Error)
                     }
                 }
+            };
+
+            if let (Some(ref wp), Some(status)) = (&session_workspace_path, workspace_turn_status) {
+                Self::finalize_turn_in_workspace(
+                    &session_id_clone,
+                    &turn_id_clone,
+                    turn_index,
+                    &user_input_for_workspace,
+                    wp,
+                    status,
+                    user_message_metadata_clone,
+                )
+                .await;
             }
         });
 
diff --git a/src/crates/core/src/agentic/execution/execution_engine.rs b/src/crates/core/src/agentic/execution/execution_engine.rs
index 61adeb16..26d50b11 100644
--- a/src/crates/core/src/agentic/execution/execution_engine.rs
+++ b/src/crates/core/src/agentic/execution/execution_engine.rs
@@ -182,8 +182,6 @@ impl ExecutionEngine {
                                 &err,
                                 is_current_turn_message,
                             ) {
-                                // Degrade only for historical multimodal messages. Current-turn
-                                // image failures should still surface to users.
                                 warn!(
                                     "Failed to rebuild multimodal payload, falling back to text-only message: message_id={}, provider={}, turn_id={:?}, current_turn_id={}, error={}",
                                     msg.id, provider, msg.metadata.turn_id, current_turn_id, err
diff --git a/src/crates/core/src/agentic/image_analysis/enhancer.rs b/src/crates/core/src/agentic/image_analysis/enhancer.rs
index 767fef3f..93b38876 100644
--- a/src/crates/core/src/agentic/image_analysis/enhancer.rs
+++ b/src/crates/core/src/agentic/image_analysis/enhancer.rs
@@ -57,6 +57,8 @@ impl MessageEnhancer {
             enhanced.push_str("\n");
         }
 
+        enhanced.push_str("The above image analysis has already been performed. Do NOT suggest the user to view or re-analyze the image. Respond directly to the user's question based on the analysis.\n\n");
+
         // 3. Separator
         enhanced.push_str("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\n");
 
diff --git a/src/crates/core/src/agentic/image_analysis/image_processing.rs b/src/crates/core/src/agentic/image_analysis/image_processing.rs
index d4cd763e..d5c5bbea 100644
--- a/src/crates/core/src/agentic/image_analysis/image_processing.rs
+++ b/src/crates/core/src/agentic/image_analysis/image_processing.rs
@@ -152,8 +152,24 @@ pub fn optimize_image_for_provider(
     image_data: Vec<u8>,
     provider: &str,
     fallback_mime: Option<&str>,
+) -> BitFunResult<ProcessedImage> {
+    optimize_image_with_size_limit(image_data, provider, fallback_mime, None)
+}
+
+/// Like `optimize_image_for_provider` but allows an explicit size cap.
+/// When `max_output_size` is `Some(n)`, the effective limit is
+/// `min(provider_limit, n)`.
+pub fn optimize_image_with_size_limit(
+    image_data: Vec<u8>,
+    provider: &str,
+    fallback_mime: Option<&str>,
+    max_output_size: Option<usize>,
 ) -> BitFunResult<ProcessedImage> {
     let limits = ImageLimits::for_provider(provider);
+    let effective_max = match max_output_size {
+        Some(cap) => cap.min(limits.max_size),
+        None => limits.max_size,
+    };
 
     let guessed_format = image::guess_format(&image_data).ok();
     let dynamic = image::load_from_memory(&image_data)
@@ -162,7 +178,7 @@ pub fn optimize_image_for_provider(
     let (orig_width, orig_height) = (dynamic.width(), dynamic.height());
     let needs_resize = orig_width > limits.max_width || orig_height > limits.max_height;
 
-    if !needs_resize && image_data.len() <= limits.max_size {
+    if !needs_resize && image_data.len() <= effective_max {
         let mime_type = detect_mime_type_from_bytes(&image_data, fallback_mime)?;
         return Ok(ProcessedImage {
             data: image_data,
@@ -185,33 +201,33 @@ pub fn optimize_image_for_provider(
 
     let mut encoded = encode_dynamic_image(&working, preferred_format, 85)?;
 
-    if encoded.0.len() > limits.max_size {
+    if encoded.0.len() > effective_max {
         for quality in [80u8, 65, 50, 35] {
             encoded = encode_dynamic_image(&working, ImageFormat::Jpeg, quality)?;
-            if encoded.0.len() <= limits.max_size {
+            if encoded.0.len() <= effective_max {
                 break;
             }
         }
     }
 
-    if encoded.0.len() > limits.max_size {
-        for _ in 0..3 {
-            let next_w = ((working.width() as f32) * 0.85).round().max(64.0) as u32;
-            let next_h = ((working.height() as f32) * 0.85).round().max(64.0) as u32;
+    if encoded.0.len() > effective_max {
+        for _ in 0..5 {
+            let next_w = ((working.width() as f32) * 0.75).round().max(64.0) as u32;
+            let next_h = ((working.height() as f32) * 0.75).round().max(64.0) as u32;
             if next_w == working.width() && next_h == working.height() {
                 break;
             }
 
             working = working.resize(next_w, next_h, FilterType::Triangle);
 
-            for quality in [70u8, 55, 40] {
+            for quality in [70u8, 55, 40, 25] {
                 encoded = encode_dynamic_image(&working, ImageFormat::Jpeg, quality)?;
-                if encoded.0.len() <= limits.max_size {
+                if encoded.0.len() <= effective_max {
                     break;
                 }
             }
 
-            if encoded.0.len() <= limits.max_size {
+            if encoded.0.len() <= effective_max {
                 break;
             }
         }
diff --git a/src/crates/core/src/agentic/image_analysis/mod.rs b/src/crates/core/src/agentic/image_analysis/mod.rs
index 4ba156f8..0778eb2a 100644
--- a/src/crates/core/src/agentic/image_analysis/mod.rs
+++ b/src/crates/core/src/agentic/image_analysis/mod.rs
@@ -10,7 +10,8 @@ pub mod types;
 pub use enhancer::MessageEnhancer;
 pub use image_processing::{
     build_multimodal_message, decode_data_url, detect_mime_type_from_bytes, load_image_from_path,
-    optimize_image_for_provider, process_image_contexts_for_provider, resolve_image_path,
+    optimize_image_for_provider, optimize_image_with_size_limit,
+    process_image_contexts_for_provider, resolve_image_path,
     resolve_vision_model_from_ai_config, resolve_vision_model_from_global_config,
     build_multimodal_message_with_images, ProcessedImage,
 };
diff --git a/src/crates/core/src/agentic/image_analysis/processor.rs b/src/crates/core/src/agentic/image_analysis/processor.rs
index 2363738d..33fc6276 100644
--- a/src/crates/core/src/agentic/image_analysis/processor.rs
+++ b/src/crates/core/src/agentic/image_analysis/processor.rs
@@ -4,7 +4,7 @@
 
 use super::image_processing::{
     build_multimodal_message, decode_data_url, detect_mime_type_from_bytes, load_image_from_path,
-    optimize_image_for_provider, resolve_image_path,
+    optimize_image_with_size_limit, resolve_image_path,
 };
 use super::types::{AnalyzeImagesRequest, ImageAnalysisResult, ImageContextData};
 use crate::infrastructure::ai::AIClient;
@@ -94,8 +94,13 @@ impl ImageAnalyzer {
         let (image_data, fallback_mime) =
             Self::load_image_from_context(&image_ctx, workspace_path.as_deref()).await?;
 
-        let processed =
-            optimize_image_for_provider(image_data, &model.provider, fallback_mime.as_deref())?;
+        const IMAGE_ANALYSIS_MAX_BYTES: usize = 1024 * 1024;
+        let processed = optimize_image_with_size_limit(
+            image_data,
+            &model.provider,
+            fallback_mime.as_deref(),
+            Some(IMAGE_ANALYSIS_MAX_BYTES),
+        )?;
 
         debug!(
             "Image processing completed: mime={}, size={}KB, dimensions={}x{}",
diff --git a/src/crates/core/src/agentic/session/session_manager.rs b/src/crates/core/src/agentic/session/session_manager.rs
index db282dae..373c2cbc 100644
--- a/src/crates/core/src/agentic/session/session_manager.rs
+++ b/src/crates/core/src/agentic/session/session_manager.rs
@@ -641,6 +641,58 @@ impl SessionManager {
         Ok(())
     }
 
+    /// Mark a dialog turn as failed and persist it.
+    /// Unlike `complete_dialog_turn`, this sets the state to `Failed` with an error message.
+    pub async fn fail_dialog_turn(
+        &self,
+        session_id: &str,
+        turn_id: &str,
+        error: String,
+    ) -> BitFunResult<()> {
+        let mut turn = self
+            .persistence_manager
+            .load_dialog_turn(session_id, turn_id)
+            .await?;
+
+        turn.state = DialogTurnState::Failed { error };
+        turn.completed_at = Some(SystemTime::now());
+
+        if self.config.enable_persistence {
+            match self.get_context_messages(session_id).await {
+                Ok(context_messages) => {
+                    if let Err(err) = self
+                        .persistence_manager
+                        .save_turn_context_snapshot(
+                            session_id,
+                            turn.turn_index,
+                            &context_messages,
+                        )
+                        .await
+                    {
+                        warn!(
+                            "failed to save turn context snapshot on failure: session_id={}, turn_index={}, err={}",
+                            session_id, turn.turn_index, err
+                        );
+                    }
+                }
+                Err(err) => {
+                    warn!(
+                        "failed to build context messages for snapshot on failure: session_id={}, turn_index={}, err={}",
+                        session_id, turn.turn_index, err
+                    );
+                }
+            }
+            self.persistence_manager.save_dialog_turn(&turn).await?;
+        }
+
+        debug!(
+            "Dialog turn marked as failed: turn_id={}, turn_index={}",
+            turn_id, turn.turn_index
+        );
+
+        Ok(())
+    }
+
     // ============ Helper Methods ============
 
     /// Get session's message history (complete)
diff --git a/src/crates/core/src/agentic/tools/image_context.rs b/src/crates/core/src/agentic/tools/image_context.rs
index 3b1ba885..35dda919 100644
--- a/src/crates/core/src/agentic/tools/image_context.rs
+++ b/src/crates/core/src/agentic/tools/image_context.rs
@@ -73,13 +73,13 @@ pub fn format_image_context_reference(image: &ImageContextData) -> String {
 
     if let Some(image_path) = &image.image_path {
         format!(
-            "[Image: {}{}]\nPath: {}\nTip: You can use the AnalyzeImage tool with the image_path parameter.",
+            "[Image: {}{}]\nPath: {}",
             image.image_name, size_label, image_path
         )
     } else {
         format!(
-            "[Image: {}{} (from clipboard)]\nImage ID: {}\nTip: You can use the AnalyzeImage tool.\nParameter: image_id=\"{}\"",
-            image.image_name, size_label, image.id, image.id
+            "[Image: {}{} (from clipboard)]\nImage ID: {}",
+            image.image_name, size_label, image.id
         )
     }
 }
diff --git a/src/crates/core/src/agentic/tools/implementations/ask_user_question_tool.rs b/src/crates/core/src/agentic/tools/implementations/ask_user_question_tool.rs
index a7ac71f2..75b0b286 100644
--- a/src/crates/core/src/agentic/tools/implementations/ask_user_question_tool.rs
+++ b/src/crates/core/src/agentic/tools/implementations/ask_user_question_tool.rs
@@ -76,8 +76,8 @@ impl AskUserQuestionTool {
             }
 
             // Validate options
-            if question.options.len() < 2 || question.options.len() > 5 {
-                return Err(format!("Question {} must have 2-5 options", q_num));
+            if question.options.len() < 2 || question.options.len() > 10 {
+                return Err(format!("Question {} must have 2-10 options", q_num));
             }
 
             for (opt_idx, opt) in question.options.iter().enumerate() {
@@ -215,8 +215,8 @@ Usage notes:
                                     "additionalProperties": false
                                 },
                                 "minItems": 2,
-                                "maxItems": 5,
-                                "description": "The available choices for this question. Must have 2-5 options. Each option should be a distinct, mutually exclusive choice (unless multiSelect is enabled). There should be no 'Other' option, that will be provided automatically."
+                                "maxItems": 10,
+                                "description": "The available choices for this question. Must have 2-10 options. Each option should be a distinct, mutually exclusive choice (unless multiSelect is enabled). There should be no 'Other' option, that will be provided automatically."
                             },
                             "multiSelect": {
                                 "type": "boolean",
diff --git a/src/crates/core/src/service/conversation/persistence_manager.rs b/src/crates/core/src/service/conversation/persistence_manager.rs
index 9a26d89c..f234b941 100644
--- a/src/crates/core/src/service/conversation/persistence_manager.rs
+++ b/src/crates/core/src/service/conversation/persistence_manager.rs
@@ -184,7 +184,7 @@ impl ConversationPersistenceManager {
                 if let Some(turn) = self.load_dialog_turn(session_id, i).await? {
                     turns.push(turn);
                 } else {
-                    warn!("Missing dialog turn: session={}, turn={}", session_id, i);
+                    debug!("Missing dialog turn: session={}, turn={}", session_id, i);
                 }
             }
 
diff --git a/src/crates/core/src/service/remote_connect/bot/command_router.rs b/src/crates/core/src/service/remote_connect/bot/command_router.rs
index c9585153..c7d52d00 100644
--- a/src/crates/core/src/service/remote_connect/bot/command_router.rs
+++ b/src/crates/core/src/service/remote_connect/bot/command_router.rs
@@ -100,6 +100,7 @@ pub struct ForwardRequest {
     pub content: String,
     pub agent_type: String,
     pub turn_id: String,
+    pub image_contexts: Vec<crate::agentic::image_analysis::ImageContextData>,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -248,7 +249,15 @@ fn cancel_task_actions(command: impl Into<String>) -> Vec<BotAction> {
 
 // ── Main dispatch ───────────────────────────────────────────────────
 
-pub async fn handle_command(state: &mut BotChatState, cmd: BotCommand) -> HandleResult {
+pub async fn handle_command(
+    state: &mut BotChatState,
+    cmd: BotCommand,
+    images: Vec<super::super::remote_server::ImageAttachment>,
+) -> HandleResult {
+    let image_contexts: Vec<crate::agentic::image_analysis::ImageContextData> =
+        super::super::remote_server::images_to_contexts(
+            if images.is_empty() { None } else { Some(&images) },
+        );
     match cmd {
         BotCommand::Start | BotCommand::Help => {
             if state.paired {
@@ -327,7 +336,7 @@ pub async fn handle_command(state: &mut BotChatState, cmd: BotCommand) -> Handle
             if !state.paired {
                 return not_paired();
             }
-            handle_chat_message(state, &msg).await
+            handle_chat_message(state, &msg, image_contexts).await
         }
     }
 }
@@ -663,9 +672,9 @@ async fn handle_new_session(state: &mut BotChatState, agent_type: &str) -> Handl
             let workspace = ws_path.as_deref().unwrap_or("(unknown)");
             HandleResult {
                 reply: format!(
-                    "Created new {} session: {}\nSession ID: {}\nWorkspace: {}\n\n\
+                    "Created new {} session: {}\nWorkspace: {}\n\n\
                      You can now send messages to interact with the AI agent.",
-                    label, session_name, session_id, workspace
+                    label, session_name, workspace
                 ),
                 actions: vec![],
                 forward_to_session: None,
@@ -737,7 +746,7 @@ async fn handle_number_selection(state: &mut BotChatState, n: usize) -> HandleRe
             )
             .await
         }
-        None => handle_chat_message(state, &n.to_string()).await,
+        None => handle_chat_message(state, &n.to_string(), vec![]).await,
     }
 }
 
@@ -1233,11 +1242,15 @@ async fn handle_next_page(state: &mut BotChatState) -> HandleResult {
                 forward_to_session: None,
             }
         }
-        None => handle_chat_message(state, "0").await,
+        None => handle_chat_message(state, "0", vec![]).await,
     }
 }
 
-async fn handle_chat_message(state: &mut BotChatState, message: &str) -> HandleResult {
+async fn handle_chat_message(
+    state: &mut BotChatState,
+    message: &str,
+    image_contexts: Vec<crate::agentic::image_analysis::ImageContextData>,
+) -> HandleResult {
     if let Some(PendingAction::AskUserQuestion {
         tool_id,
         questions,
@@ -1310,6 +1323,7 @@ async fn handle_chat_message(state: &mut BotChatState, message: &str) -> HandleR
             content: message.to_string(),
             agent_type: "agentic".to_string(),
             turn_id,
+            image_contexts,
         }),
     }
 }
@@ -1345,7 +1359,7 @@ pub async fn execute_forwarded_turn(
             &forward.session_id,
             forward.content,
             Some(&forward.agent_type),
-            None,
+            forward.image_contexts,
             DialogTriggerSource::Bot,
             Some(forward.turn_id),
         )
@@ -1419,7 +1433,11 @@ pub async fn execute_forwarded_turn(
         Ok(mut text) => {
             const MAX_BOT_MSG_LEN: usize = 4000;
             if text.len() > MAX_BOT_MSG_LEN {
-                text.truncate(MAX_BOT_MSG_LEN);
+                let mut end = MAX_BOT_MSG_LEN;
+                while !text.is_char_boundary(end) {
+                    end -= 1;
+                }
+                text.truncate(end);
                 text.push_str("\n\n... (truncated)");
             }
             text
diff --git a/src/crates/core/src/service/remote_connect/bot/feishu.rs b/src/crates/core/src/service/remote_connect/bot/feishu.rs
index 3ad860fe..4260c8a5 100644
--- a/src/crates/core/src/service/remote_connect/bot/feishu.rs
+++ b/src/crates/core/src/service/remote_connect/bot/feishu.rs
@@ -228,6 +228,13 @@ struct PendingPairing {
     created_at: i64,
 }
 
+struct ParsedMessage {
+    chat_id: String,
+    message_id: String,
+    text: String,
+    image_keys: Vec<String>,
+}
+
 impl FeishuBot {
     pub fn new(config: FeishuConfig) -> Self {
         Self {
@@ -307,6 +314,97 @@ impl FeishuBot {
         Ok(())
     }
 
+    /// Download a user-sent image from a Feishu message using the message resources API.
+    /// The returned data-URL is compressed to at most 1 MB.
+    async fn download_image_as_data_url(&self, message_id: &str, file_key: &str) -> Result<String> {
+        use base64::{engine::general_purpose::STANDARD as B64, Engine};
+
+        let token = match self.get_access_token().await {
+            Ok(t) => t,
+            Err(e) => {
+                return Err(e);
+            }
+        };
+        let client = reqwest::Client::new();
+        let url = format!(
+            "https://open.feishu.cn/open-apis/im/v1/messages/{}/resources/{}?type=image",
+            message_id, file_key
+        );
+        let resp = client
+            .get(&url)
+            .bearer_auth(&token)
+            .send()
+            .await
+            .map_err(|e| {
+                anyhow!("feishu download image: {e}")
+            })?;
+
+        let status = resp.status();
+        if !status.is_success() {
+            let body = resp.text().await.unwrap_or_default();
+            return Err(anyhow!("feishu image download failed: HTTP {status} — {body}"));
+        }
+
+        let content_type = resp
+            .headers()
+            .get("content-type")
+            .and_then(|v| v.to_str().ok())
+            .unwrap_or("image/png")
+            .to_string();
+        let raw_bytes = resp.bytes().await?;
+
+        const MAX_BYTES: usize = 1024 * 1024;
+        if raw_bytes.len() <= MAX_BYTES {
+            let b64 = B64.encode(&raw_bytes);
+            return Ok(format!("data:{};base64,{}", content_type, b64));
+        }
+
+        log::info!(
+            "Feishu image exceeds {}KB ({}KB), compressing",
+            MAX_BYTES / 1024,
+            raw_bytes.len() / 1024
+        );
+        match crate::agentic::image_analysis::optimize_image_with_size_limit(
+            raw_bytes.to_vec(),
+            "openai",
+            Some(&content_type),
+            Some(MAX_BYTES),
+        ) {
+            Ok(processed) => {
+                let b64 = B64.encode(&processed.data);
+                Ok(format!("data:{};base64,{}", processed.mime_type, b64))
+            }
+            Err(e) => {
+                log::warn!("Feishu image compression failed, using original: {e}");
+                let b64 = B64.encode(&raw_bytes);
+                Ok(format!("data:{};base64,{}", content_type, b64))
+            }
+        }
+    }
+
+    /// Download multiple images and convert to ImageAttachment list.
+    async fn download_images(
+        &self,
+        message_id: &str,
+        image_keys: &[String],
+    ) -> Vec<super::super::remote_server::ImageAttachment> {
+        let mut attachments = Vec::new();
+        for (i, key) in image_keys.iter().enumerate() {
+            match self.download_image_as_data_url(message_id, key).await {
+                Ok(data_url) => {
+                    attachments.push(super::super::remote_server::ImageAttachment {
+                        name: format!("image_{}.png", i + 1),
+                        data_url,
+                    });
+                }
+                Err(e) => {
+                    warn!("Failed to download Feishu image {key}: {e}");
+                }
+            }
+        }
+        attachments
+    }
+
     pub async fn send_action_card(
         &self,
         chat_id: &str,
@@ -498,8 +596,9 @@ impl FeishuBot {
         Ok((url, client_config))
     }
 
-    /// Extract (chat_id, text) from a Feishu text message event.
-    fn parse_message_event(event: &serde_json::Value) -> Option<(String, String)> {
+    /// Parse a Feishu message event into text + image keys.
+    /// Supports `text`, `post` (rich text with images), and `image` message types.
+    fn parse_message_event_full(event: &serde_json::Value) -> Option<ParsedMessage> {
         let event_type = event
             .pointer("/header/event_type")
             .and_then(|v| v.as_str())?;
@@ -507,23 +606,105 @@ impl FeishuBot {
             return None;
         }
 
-        let msg_type = event
-            .pointer("/event/message/message_type")
-            .and_then(|v| v.as_str())?;
-        if msg_type != "text" {
-            return None;
-        }
-
         let chat_id = event
             .pointer("/event/message/chat_id")
             .and_then(|v| v.as_str())?
             .to_string();
+        let message_id = event
+            .pointer("/event/message/message_id")
+            .and_then(|v| v.as_str())
+            .unwrap_or("")
+            .to_string();
+        let msg_type = event
+            .pointer("/event/message/message_type")
+            .and_then(|v| v.as_str())?;
         let content_str = event
             .pointer("/event/message/content")
             .and_then(|v| v.as_str())?;
         let content: serde_json::Value = serde_json::from_str(content_str).ok()?;
-        let text = content["text"].as_str()?.trim().to_string();
-        Some((chat_id, text))
+
+        match msg_type {
+            "text" => {
+                let text = content["text"].as_str()?.trim().to_string();
+                if text.is_empty() { return None; }
+                Some(ParsedMessage { chat_id, message_id, text, image_keys: vec![] })
+            }
+            "post" => {
+                let (text, image_keys) = Self::extract_from_post(&content);
+                if text.is_empty() && image_keys.is_empty() { return None; }
+                Some(ParsedMessage { chat_id, message_id, text, image_keys })
+            }
+            "image" => {
+                let image_key = content["image_key"].as_str()?.to_string();
+                Some(ParsedMessage {
+                    chat_id,
+                    message_id,
+                    text: String::new(),
+                    image_keys: vec![image_key],
+                })
+            }
+            _ => None,
+        }
+    }
+
+    /// Backward-compatible wrapper: returns (chat_id, text) only for text/post with text content.
+    fn parse_message_event(event: &serde_json::Value) -> Option<(String, String)> {
+        let parsed = Self::parse_message_event_full(event)?;
+        if parsed.text.is_empty() { return None; }
+        Some((parsed.chat_id, parsed.text))
+    }
+
+    /// Extract text and image keys from a Feishu `post` (rich-text) message.
+    fn extract_from_post(content: &serde_json::Value) -> (String, Vec<String>) {
+        let root = if content["content"].is_array() {
+            content
+        } else {
+            content
+                .get("zh_cn")
+                .or_else(|| content.get("en_us"))
+                .or_else(|| content.as_object().and_then(|obj| obj.values().next()))
+                .unwrap_or(content)
+        };
+
+        let paragraphs = match root["content"].as_array() {
+            Some(p) => p,
+            None => return (String::new(), vec![]),
+        };
+
+        let mut text_parts: Vec<String> = Vec::new();
+        let mut image_keys: Vec<String> = Vec::new();
+
+        for para in paragraphs {
+            if let Some(elements) = para.as_array() {
+                for elem in elements {
+                    match elem["tag"].as_str().unwrap_or("") {
+                        "text" | "a" => {
+                            if let Some(t) = elem["text"].as_str() {
+                                let trimmed = t.trim();
+                                if !trimmed.is_empty() {
+                                    text_parts.push(trimmed.to_string());
+                                }
+                            }
+                        }
+                        "img" => {
+                            if let Some(key) = elem["image_key"].as_str() {
+                                if !key.is_empty() {
+                                    image_keys.push(key.to_string());
+                                }
+                            }
+                        }
+                        _ => {}
+                    }
+                }
+            }
+        }
+
+        let title = root["title"].as_str().unwrap_or("").trim();
+        if !title.is_empty() {
+            text_parts.insert(0, title.to_string());
+        }
+
+        (text_parts.join(" "), image_keys)
     }
 
     /// Extract (chat_id, command) from a Feishu card action callback.
@@ -552,10 +733,23 @@ impl FeishuBot {
         Some((chat_id, command))
     }
 
+    #[cfg(test)]
     fn parse_ws_event(event: &serde_json::Value) -> Option<(String, String)> {
         Self::parse_message_event(event).or_else(|| Self::parse_card_action_event(event))
     }
 
+    /// Extract chat_id from any im.message.receive_v1 event (regardless of msg_type).
+    fn extract_message_chat_id(event: &serde_json::Value) -> Option<String> {
+        let event_type = event.pointer("/header/event_type").and_then(|v| v.as_str())?;
+        if event_type != "im.message.receive_v1" {
+            return None;
+        }
+        event
+            .pointer("/event/message/chat_id")
+            .and_then(|v| v.as_str())
+            .map(String::from)
+    }
+
     /// Handle a single incoming protobuf data frame.
     /// Returns Some(chat_id) if pairing succeeded, None to continue waiting.
     async fn handle_data_frame_for_pairing(
@@ -609,6 +803,11 @@ impl FeishuBot {
                 self.send_message(&chat_id, "Please enter the 6-digit pairing code from BitFun Desktop.")
                     .await.ok();
             }
+        } else if let Some(chat_id) = Self::extract_message_chat_id(&event) {
+            self.send_message(
+                &chat_id,
+                "Only text messages are supported. Please send the 6-digit pairing code as text.",
+            ).await.ok();
         }
         None
     }
@@ -766,10 +965,48 @@ impl FeishuBot {
                                                 let resp = pb::Frame::new_response(&frame, 200);
                                                 let _ = write.write().await.send(WsMessage::Binary(pb::encode_frame(&resp))).await;
 
-                                                if let Some((chat_id, msg_text)) = Self::parse_ws_event(&event) {
+                                                if let Some(parsed) = Self::parse_message_event_full(&event) {
+                                                    let bot = self.clone();
+                                                    tokio::spawn(async move {
+                                                        const MAX_IMAGES: usize = 5;
+                                                        let truncated = parsed.image_keys.len() > MAX_IMAGES;
+                                                        let keys_to_use = if truncated {
+                                                            &parsed.image_keys[..MAX_IMAGES]
+                                                        } else {
+                                                            &parsed.image_keys
+                                                        };
+                                                        let images = if keys_to_use.is_empty() {
+                                                            vec![]
+                                                        } else {
+                                                            bot.download_images(&parsed.message_id, keys_to_use).await
+                                                        };
+                                                        if truncated {
+                                                            let msg = format!(
+                                                                "⚠️ Only the first {} images will be processed; the remaining {} were discarded.",
+                                                                MAX_IMAGES,
+                                                                parsed.image_keys.len() - MAX_IMAGES,
+                                                            );
+                                                            bot.send_message(&parsed.chat_id, &msg).await.ok();
+                                                        }
+                                                        let text = if parsed.text.is_empty() && !images.is_empty() {
+                                                            "[User sent an image]".to_string()
+                                                        } else {
+                                                            parsed.text
+                                                        };
+                                                        bot.handle_incoming_message(&parsed.chat_id, &text, images).await;
+                                                    });
+                                                } else if let Some((chat_id, cmd)) = Self::parse_card_action_event(&event) {
                                                     let bot = self.clone();
                                                     tokio::spawn(async move {
-                                                        bot.handle_incoming_message(&chat_id, &msg_text).await;
+                                                        bot.handle_incoming_message(&chat_id, &cmd, vec![]).await;
+                                                    });
+                                                } else if let Some(chat_id) = Self::extract_message_chat_id(&event) {
+                                                    let bot = self.clone();
+                                                    tokio::spawn(async move {
+                                                        bot.send_message(
+                                                            &chat_id,
+                                                            "This message type is not supported. Please send text or images.",
+                                                        ).await.ok();
                                                     });
                                                 }
                                             }
@@ -810,7 +1047,12 @@ impl FeishuBot {
         }
     }
 
-    async fn handle_incoming_message(self: &Arc<Self>, chat_id: &str, text: &str) {
+    async fn handle_incoming_message(
+        self: &Arc<Self>,
+        chat_id: &str,
+        text: &str,
+        images: Vec<super::super::remote_server::ImageAttachment>,
+    ) {
         let mut states = self.chat_states.write().await;
         let state = states
             .entry(chat_id.to_string())
@@ -857,7 +1099,7 @@ impl FeishuBot {
         }
 
         let cmd = parse_command(text);
-        let result = handle_command(state, cmd).await;
+        let result = handle_command(state, cmd, images).await;
 
         self.persist_chat_state(chat_id, state).await;
         drop(states);
diff --git a/src/crates/core/src/service/remote_connect/bot/telegram.rs b/src/crates/core/src/service/remote_connect/bot/telegram.rs
index 5047acb7..fa7b7eff 100644
--- a/src/crates/core/src/service/remote_connect/bot/telegram.rs
+++ b/src/crates/core/src/service/remote_connect/bot/telegram.rs
@@ -292,7 +292,7 @@ impl TelegramBot {
         }
 
         let cmd = parse_command(text);
-        let result = handle_command(state, cmd).await;
+        let result = handle_command(state, cmd, vec![]).await;
 
         self.persist_chat_state(chat_id, state).await;
         drop(states);
diff --git a/src/crates/core/src/service/remote_connect/mod.rs b/src/crates/core/src/service/remote_connect/mod.rs
index 3cd6821a..dc5b9d09 100644
--- a/src/crates/core/src/service/remote_connect/mod.rs
+++ b/src/crates/core/src/service/remote_connect/mod.rs
@@ -27,7 +27,7 @@ pub use relay_client::RelayClient;
 pub use remote_server::RemoteServer;
 
 use anyhow::Result;
-use log::{error, info};
+use log::{debug, error, info, warn};
 use serde::{Deserialize, Serialize};
 use std::sync::Arc;
 use tokio::sync::RwLock;
@@ -362,7 +362,7 @@ impl RemoteConnectService {
                             if let Some(ref server) = *server_guard {
                                 match server.decrypt_command(&encrypted_data, &nonce) {
                                     Ok((cmd, request_id)) => {
-                                        info!("Remote command: {cmd:?}");
+                                        debug!("Remote command: {cmd:?}");
                                         let response = server.dispatch(&cmd).await;
                                         match server
                                             .encrypt_response(&response, request_id.as_deref())
@@ -385,7 +385,7 @@ impl RemoteConnectService {
                                             }
                                         }
                                     }
-                                    Err(e) => error!("Failed to decrypt command: {e}"),
+                                    Err(e) => debug!("Ignoring undecryptable command (likely stale mobile session): {e}"),
                                 }
                             }
                         } else {
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 a9a370f0..f1b8bedd 100644
--- a/src/crates/core/src/service/remote_connect/remote_server.rs
+++ b/src/crates/core/src/service/remote_connect/remote_server.rs
@@ -54,6 +54,7 @@ pub enum RemoteCommand {
         content: String,
         agent_type: Option<String>,
         images: Option<Vec<ImageAttachment>>,
+        image_contexts: Option<Vec<crate::agentic::image_analysis::ImageContextData>>,
     },
     CancelTask {
         session_id: String,
@@ -181,6 +182,12 @@ pub struct SessionInfo {
     pub workspace_name: Option<String>,
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ChatImageAttachment {
+    pub name: String,
+    pub data_url: String,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct ChatMessage {
     pub id: String,
@@ -195,6 +202,8 @@ pub struct ChatMessage {
     /// Ordered items preserving the interleaved display order from the desktop.
     #[serde(skip_serializing_if = "Option::is_none")]
     pub items: Option<Vec<ChatMessageItem>>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub images: Option<Vec<ChatImageAttachment>>,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -205,6 +214,8 @@ pub struct ChatMessageItem {
     pub content: Option<String>,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub tool: Option<RemoteToolStatus>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub is_subagent: Option<bool>,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -244,30 +255,150 @@ pub struct RemoteToolStatus {
 
 pub type EncryptedPayload = (String, String);
 
+/// Build a slim version of tool params for mobile preview.
+/// Strips large string values (file content, diffs, etc.) to keep payload small,
+/// while preserving all short fields so the frontend can parse and display them.
+fn make_slim_params(params: &serde_json::Value) -> Option<String> {
+    match params {
+        serde_json::Value::Object(obj) => {
+            let slim: serde_json::Map<String, serde_json::Value> = obj
+                .iter()
+                .filter_map(|(k, v)| match v {
+                    serde_json::Value::String(s) if s.len() > 200 => None,
+                    _ => Some((k.clone(), v.clone())),
+                })
+                .collect();
+            if slim.is_empty() {
+                return None;
+            }
+            serde_json::to_string(&serde_json::Value::Object(slim)).ok()
+        }
+        serde_json::Value::String(s) => Some(s.chars().take(200).collect()),
+        _ => None,
+    }
+}
+
+/// Compress a base64 data-URL image to a small thumbnail for mobile display.
+/// Falls back to the original if decoding/compression fails or the image is
+/// already within `max_bytes`.
+fn compress_data_url_for_mobile(data_url: &str, max_bytes: usize) -> String {
+    use base64::engine::general_purpose::STANDARD as BASE64;
+    use base64::Engine;
+    use image::imageops::FilterType;
+
+    const MAX_THUMBNAIL_DIM: u32 = 400;
+
+    let Some(comma_pos) = data_url.find(',') else {
+        return data_url.to_string();
+    };
+    let b64_data = &data_url[comma_pos + 1..];
+
+    if b64_data.len() * 3 / 4 <= max_bytes {
+        return data_url.to_string();
+    }
+
+    let Ok(raw_bytes) = BASE64.decode(b64_data) else {
+        return data_url.to_string();
+    };
+
+    let Ok(img) = image::load_from_memory(&raw_bytes) else {
+        return data_url.to_string();
+    };
+
+    let resized = if img.width() > MAX_THUMBNAIL_DIM || img.height() > MAX_THUMBNAIL_DIM {
+        img.resize(MAX_THUMBNAIL_DIM, MAX_THUMBNAIL_DIM, FilterType::Triangle)
+    } else {
+        img
+    };
+
+    fn encode_jpeg(img: &image::DynamicImage, quality: u8) -> Option<Vec<u8>> {
+        let mut buf = Vec::new();
+        let encoder = image::codecs::jpeg::JpegEncoder::new_with_quality(&mut buf, quality);
+        img.write_with_encoder(encoder).ok()?;
+        Some(buf)
+    }
+
+    for quality in [75u8, 60, 45, 30] {
+        if let Some(buf) = encode_jpeg(&resized, quality) {
+            if buf.len() <= max_bytes || quality == 30 {
+                let b64 = BASE64.encode(&buf);
+                return format!("data:image/jpeg;base64,{b64}");
+            }
+        }
+    }
+
+    data_url.to_string()
+}
+
+/// Max thumbnail size per image sent to mobile (100 KB).
+const MOBILE_IMAGE_MAX_BYTES: usize = 100 * 1024;
+
 /// Convert ConversationPersistenceManager turns into mobile ChatMessages.
 /// This is the same data source the desktop frontend uses.
 fn turns_to_chat_messages(
     turns: &[crate::service::conversation::DialogTurnData],
 ) -> Vec<ChatMessage> {
+    use crate::service::conversation::TurnStatus;
+
     let mut result = Vec::new();
 
     for turn in turns {
+        let images = turn
+            .user_message
+            .metadata
+            .as_ref()
+            .and_then(|m| m.get("images"))
+            .and_then(|v| v.as_array())
+            .map(|arr| {
+                arr.iter()
+                    .filter_map(|v| {
+                        let name = v.get("name")?.as_str()?.to_string();
+                        let raw_url = v.get("data_url")?.as_str()?;
+                        let data_url =
+                            compress_data_url_for_mobile(raw_url, MOBILE_IMAGE_MAX_BYTES);
+                        Some(ChatImageAttachment { name, data_url })
+                    })
+                    .collect::<Vec<_>>()
+            })
+            .filter(|v| !v.is_empty());
+
+        // Prefer original_text from metadata (pre-enhancement) for display
+        let display_content = turn
+            .user_message
+            .metadata
+            .as_ref()
+            .and_then(|m| m.get("original_text"))
+            .and_then(|v| v.as_str())
+            .map(|s| s.to_string())
+            .unwrap_or_else(|| strip_user_input_tags(&turn.user_message.content));
+
         result.push(ChatMessage {
             id: turn.user_message.id.clone(),
             role: "user".to_string(),
-            content: strip_user_input_tags(&turn.user_message.content),
+            content: display_content,
             timestamp: (turn.user_message.timestamp / 1000).to_string(),
             metadata: None,
             tools: None,
             thinking: None,
             items: None,
+            images,
         });
 
+        // Skip assistant message for in-progress turns.  The active turn's
+        // content is delivered via the real-time overlay, not the historical
+        // list.  Including an empty / partial assistant message here would
+        // "consume" a slot in the count-based skip cursor and prevent the
+        // final version from ever being delivered.
+        if turn.status == TurnStatus::InProgress {
+            continue;
+        }
+
         // Collect ordered items across all rounds, preserving interleaved order
         struct OrderedEntry {
             order_index: Option<usize>,
             timestamp: u64,
             sequence: usize,
+            round_idx: usize,
             item: ChatMessageItem,
         }
         let mut ordered: Vec<OrderedEntry> = Vec::new();
@@ -276,40 +407,48 @@ fn turns_to_chat_messages(
         let mut text_parts = Vec::new();
         let mut sequence = 0usize;
 
-        for round in &turn.model_rounds {
-            for t in &round.text_items {
+        for (round_idx, round) in turn.model_rounds.iter().enumerate() {
+            // Iterate in streaming order: thinking → text → tools.
+            // The model first thinks, then outputs text (which may reference
+            // tool calls), and finally the tools are detected and executed.
+            // This matches the real-time display order on the tracker.
+            for t in &round.thinking_items {
                 if t.is_subagent_item.unwrap_or(false) {
                     continue;
                 }
                 if !t.content.is_empty() {
-                    text_parts.push(t.content.clone());
+                    thinking_parts.push(t.content.clone());
                     ordered.push(OrderedEntry {
                         order_index: t.order_index,
                         timestamp: t.timestamp,
                         sequence,
+                        round_idx,
                         item: ChatMessageItem {
-                            item_type: "text".to_string(),
+                            item_type: "thinking".to_string(),
                             content: Some(t.content.clone()),
                             tool: None,
+                            is_subagent: None,
                         },
                     });
                     sequence += 1;
                 }
             }
-            for t in &round.thinking_items {
+            for t in &round.text_items {
                 if t.is_subagent_item.unwrap_or(false) {
                     continue;
                 }
                 if !t.content.is_empty() {
-                    thinking_parts.push(t.content.clone());
+                    text_parts.push(t.content.clone());
                     ordered.push(OrderedEntry {
                         order_index: t.order_index,
                         timestamp: t.timestamp,
                         sequence,
+                        round_idx,
                         item: ChatMessageItem {
-                            item_type: "thinking".to_string(),
+                            item_type: "text".to_string(),
                             content: Some(t.content.clone()),
                             tool: None,
+                            is_subagent: None,
                         },
                     });
                     sequence += 1;
@@ -332,8 +471,11 @@ fn turns_to_chat_messages(
                     status: status_str.to_string(),
                     duration_ms: t.duration_ms,
                     start_ms: Some(t.start_time),
-                    input_preview: None,
-                    tool_input: if t.tool_name == "AskUserQuestion" {
+                    input_preview: make_slim_params(&t.tool_call.input),
+                    tool_input: if t.tool_name == "AskUserQuestion"
+                        || t.tool_name == "Task"
+                        || t.tool_name == "TodoWrite"
+                    {
                         Some(t.tool_call.input.clone())
                     } else {
                         None
@@ -342,29 +484,34 @@ fn turns_to_chat_messages(
                 tools_flat.push(tool_status.clone());
                 ordered.push(OrderedEntry {
                     order_index: t.order_index,
-                    timestamp: t.start_time,
+                    timestamp: round.start_time,
                     sequence,
+                    round_idx,
                     item: ChatMessageItem {
                         item_type: "tool".to_string(),
                         content: None,
                         tool: Some(tool_status),
+                        is_subagent: None,
                     },
                 });
                 sequence += 1;
             }
         }
 
-        ordered.sort_by(|a, b| match (a.order_index, b.order_index) {
-            (Some(a_idx), Some(b_idx)) => a_idx
-                .cmp(&b_idx)
-                .then_with(|| a.timestamp.cmp(&b.timestamp))
-                .then_with(|| a.sequence.cmp(&b.sequence)),
-            (Some(_), None) => std::cmp::Ordering::Less,
-            (None, Some(_)) => std::cmp::Ordering::Greater,
-            (None, None) => a
-                .timestamp
-                .cmp(&b.timestamp)
-                .then_with(|| a.sequence.cmp(&b.sequence)),
+        // Sort by round first (rounds are strictly sequential), then by
+        // order_index within each round.  order_index is per-round (resets
+        // to 0 each round), so it must NOT be compared across rounds.
+        ordered.sort_by(|a, b| {
+            let round_cmp = a.round_idx.cmp(&b.round_idx);
+            if round_cmp != std::cmp::Ordering::Equal {
+                return round_cmp;
+            }
+            match (a.order_index, b.order_index) {
+                (Some(a_idx), Some(b_idx)) => a_idx.cmp(&b_idx),
+                (Some(_), None) => std::cmp::Ordering::Less,
+                (None, Some(_)) => std::cmp::Ordering::Greater,
+                (None, None) => a.sequence.cmp(&b.sequence),
+            }
         });
         let items: Vec<ChatMessageItem> = ordered.into_iter().map(|e| e.item).collect();
 
@@ -387,6 +534,7 @@ fn turns_to_chat_messages(
                 Some(thinking_parts.join("\n\n"))
             },
             items: if items.is_empty() { None } else { Some(items) },
+            images: None,
         });
     }
 
@@ -428,6 +576,12 @@ fn strip_user_input_tags(content: &str) -> String {
     if let Some(pos) = s.find("<system_reminder>") {
         return s[..pos].trim().to_string();
     }
+    // Extract original question from enhancer-wrapped content
+    if s.starts_with("User uploaded") {
+        if let Some(pos) = s.find("User's question:\n") {
+            return s[pos + "User's question:\n".len()..].trim().to_string();
+        }
+    }
     s.to_string()
 }
 
@@ -441,6 +595,40 @@ fn resolve_agent_type(mobile_type: Option<&str>) -> &'static str {
     }
 }
 
+/// Convert legacy `ImageAttachment` to unified `ImageContextData`.
+pub fn images_to_contexts(
+    images: Option<&Vec<ImageAttachment>>,
+) -> Vec<crate::agentic::image_analysis::ImageContextData> {
+    let Some(imgs) = images.filter(|v| !v.is_empty()) else {
+        return Vec::new();
+    };
+    imgs.iter()
+        .map(|img| {
+            let mime_type = img
+                .data_url
+                .split_once(',')
+                .and_then(|(header, _)| {
+                    header
+                        .strip_prefix("data:")
+                        .and_then(|rest| rest.split(';').next())
+                })
+                .unwrap_or("image/png")
+                .to_string();
+
+            crate::agentic::image_analysis::ImageContextData {
+                id: format!("remote_img_{}", uuid::Uuid::new_v4()),
+                image_path: None,
+                data_url: Some(img.data_url.clone()),
+                mime_type,
+                metadata: Some(serde_json::json!({
+                    "name": img.name,
+                    "source": "remote"
+                })),
+            }
+        })
+        .collect()
+}
+
 fn build_message_with_remote_images(content: &str, images: &[ImageAttachment]) -> String {
     use crate::agentic::tools::image_context::{
         format_image_context_reference, store_image_context, ImageContextData,
@@ -500,6 +688,10 @@ struct TrackerState {
     round_index: usize,
     /// Ordered items preserving the interleaved arrival order for real-time display.
     active_items: Vec<ChatMessageItem>,
+    /// Set on structural events (turn start/complete) that change persisted
+    /// messages.  Cleared after the poll handler loads persistence.  Allows
+    /// skipping the expensive disk read during streaming.
+    persistence_dirty: bool,
 }
 
 /// Lightweight event broadcast by the tracker for real-time consumers (e.g. bots).
@@ -544,6 +736,7 @@ impl RemoteSessionStateTracker {
                 active_tools: Vec::new(),
                 round_index: 0,
                 active_items: Vec::new(),
+                persistence_dirty: true,
             }),
             event_tx,
         }
@@ -564,14 +757,17 @@ impl RemoteSessionStateTracker {
 
     pub fn snapshot_active_turn(&self) -> Option<ActiveTurnSnapshot> {
         let s = self.state.read().unwrap();
+        let has_items = !s.active_items.is_empty();
         s.turn_id.as_ref().map(|tid| ActiveTurnSnapshot {
             turn_id: tid.clone(),
             status: s.turn_status.clone(),
-            text: s.accumulated_text.clone(),
-            thinking: s.accumulated_thinking.clone(),
+            // When items exist they already contain the text/thinking content.
+            // Skip the duplicate top-level fields to halve the payload.
+            text: if has_items { String::new() } else { s.accumulated_text.clone() },
+            thinking: if has_items { String::new() } else { s.accumulated_thinking.clone() },
             tools: s.active_tools.clone(),
             round_index: s.round_index,
-            items: if s.active_items.is_empty() { None } else { Some(s.active_items.clone()) },
+            items: if has_items { Some(s.active_items.clone()) } else { None },
         })
     }
 
@@ -583,6 +779,67 @@ impl RemoteSessionStateTracker {
         self.state.read().unwrap().title.clone()
     }
 
+    pub fn turn_status(&self) -> String {
+        self.state.read().unwrap().turn_status.clone()
+    }
+
+    /// Returns true if the turn has ended (completed/failed/cancelled) but
+    /// the tracker state hasn't been cleaned up yet (waiting for persistence).
+    pub fn is_turn_finished(&self) -> bool {
+        let s = self.state.read().unwrap();
+        s.turn_id.is_some()
+            && matches!(
+                s.turn_status.as_str(),
+                "completed" | "failed" | "cancelled"
+            )
+    }
+
+    /// Clear tracker state after the persisted historical message is confirmed
+    /// available. Called by the poll handler to complete the atomic transition.
+    pub fn finalize_completed_turn(&self) {
+        let mut s = self.state.write().unwrap();
+        if matches!(s.turn_status.as_str(), "completed" | "failed" | "cancelled") {
+            s.turn_id = None;
+            s.accumulated_text.clear();
+            s.accumulated_thinking.clear();
+            s.active_tools.clear();
+            s.active_items.clear();
+        }
+    }
+
+    /// Whether the persisted message list may have changed since the last
+    /// poll.  Structural events (turn start / complete) set this flag;
+    /// streaming events (text / thinking chunks) do not.
+    pub fn is_persistence_dirty(&self) -> bool {
+        self.state.read().unwrap().persistence_dirty
+    }
+
+    pub fn mark_persistence_clean(&self) {
+        self.state.write().unwrap().persistence_dirty = false;
+    }
+
+    /// Find the last item of `target_type` with matching `subagent_marker` that
+    /// can be extended, skipping over the complementary text/thinking type.
+    /// Tool items act as boundaries — we never merge across tool items.
+    /// This mirrors the desktop's EventBatcher behaviour where text and thinking
+    /// accumulate independently within a single ModelRound.
+    fn find_mergeable_item(
+        items: &[ChatMessageItem],
+        target_type: &str,
+        subagent_marker: &Option<bool>,
+    ) -> Option<usize> {
+        for i in (0..items.len()).rev() {
+            let item = &items[i];
+            if item.item_type == "tool" {
+                return None;
+            }
+            if item.item_type == target_type && &item.is_subagent == subagent_marker {
+                return Some(i);
+            }
+        }
+        None
+    }
+
     fn upsert_active_tool(
         state: &mut TrackerState,
         tool_id: &str,
@@ -590,6 +847,7 @@ impl RemoteSessionStateTracker {
         status: &str,
         input_preview: Option<String>,
         tool_input: Option<serde_json::Value>,
+        is_subagent: bool,
     ) {
         let resolved_id = if tool_id.is_empty() {
             format!("{}-{}", tool_name, state.active_tools.len())
@@ -597,6 +855,7 @@ impl RemoteSessionStateTracker {
             tool_id.to_string()
         };
         let allow_name_fallback = tool_id.is_empty() && !tool_name.is_empty();
+        let subagent_marker = if is_subagent { Some(true) } else { None };
 
         if let Some(tool) = state
             .active_tools
@@ -631,6 +890,7 @@ impl RemoteSessionStateTracker {
                 item_type: "tool".to_string(),
                 content: None,
                 tool: Some(tool_status),
+                is_subagent: subagent_marker,
             });
             return;
         }
@@ -678,24 +938,22 @@ impl RemoteSessionStateTracker {
 
         match event {
             AE::TextChunk { text, .. } => {
+                let subagent_marker = if is_subagent { Some(true) } else { None };
                 let mut s = self.state.write().unwrap();
-                s.accumulated_text.push_str(text);
-                if let Some(last) = s.active_items.last_mut() {
-                    if last.item_type == "text" {
-                        let c = last.content.get_or_insert_with(String::new);
-                        c.push_str(text);
-                    } else {
-                        s.active_items.push(ChatMessageItem {
-                            item_type: "text".to_string(),
-                            content: Some(text.clone()),
-                            tool: None,
-                        });
-                    }
+                if !is_subagent {
+                    s.accumulated_text.push_str(text);
+                }
+                let extend_idx = Self::find_mergeable_item(&s.active_items, "text", &subagent_marker);
+                if let Some(idx) = extend_idx {
+                    let item = &mut s.active_items[idx];
+                    let c = item.content.get_or_insert_with(String::new);
+                    c.push_str(text);
                 } else {
                     s.active_items.push(ChatMessageItem {
                         item_type: "text".to_string(),
                         content: Some(text.clone()),
                         tool: None,
+                        is_subagent: subagent_marker,
                     });
                 }
                 drop(s);
@@ -707,24 +965,22 @@ impl RemoteSessionStateTracker {
                     .replace("<thinking_end>", "")
                     .replace("</thinking>", "")
                     .replace("<thinking>", "");
+                let subagent_marker = if is_subagent { Some(true) } else { None };
                 let mut s = self.state.write().unwrap();
-                s.accumulated_thinking.push_str(&clean);
-                if let Some(last) = s.active_items.last_mut() {
-                    if last.item_type == "thinking" {
-                        let c = last.content.get_or_insert_with(String::new);
-                        c.push_str(&clean);
-                    } else {
-                        s.active_items.push(ChatMessageItem {
-                            item_type: "thinking".to_string(),
-                            content: Some(clean),
-                            tool: None,
-                        });
-                    }
+                if !is_subagent {
+                    s.accumulated_thinking.push_str(&clean);
+                }
+                let extend_idx = Self::find_mergeable_item(&s.active_items, "thinking", &subagent_marker);
+                if let Some(idx) = extend_idx {
+                    let item = &mut s.active_items[idx];
+                    let c = item.content.get_or_insert_with(String::new);
+                    c.push_str(&clean);
                 } else {
                     s.active_items.push(ChatMessageItem {
                         item_type: "thinking".to_string(),
                         content: Some(clean),
                         tool: None,
+                        is_subagent: subagent_marker,
                     });
                 }
                 drop(s);
@@ -763,18 +1019,14 @@ impl RemoteSessionStateTracker {
                                 "preparing",
                                 None,
                                 None,
+                                is_subagent,
                             );
                         }
                         "ConfirmationNeeded" => {
                             let params = val.get("params").cloned();
-                            let input_preview = params.as_ref().map(|v| {
-                                let text = if v.is_string() {
-                                    v.as_str().unwrap_or_default().to_string()
-                                } else {
-                                    serde_json::to_string(v).unwrap_or_default()
-                                };
-                                text.chars().take(160).collect()
-                            });
+                            let input_preview = params
+                                .as_ref()
+                                .and_then(|v| make_slim_params(v));
                             Self::upsert_active_tool(
                                 &mut s,
                                 &tool_id,
@@ -782,19 +1034,18 @@ impl RemoteSessionStateTracker {
                                 "pending_confirmation",
                                 input_preview,
                                 params,
+                                is_subagent,
                             );
                         }
                         "Started" => {
                             let params = val.get("params").cloned();
-                            let input_preview = params.as_ref().map(|v| {
-                                let text = if v.is_string() {
-                                    v.as_str().unwrap_or_default().to_string()
-                                } else {
-                                    serde_json::to_string(v).unwrap_or_default()
-                                };
-                                text.chars().take(160).collect()
-                            });
-                            let tool_input = if tool_name == "AskUserQuestion" {
+                            let input_preview = params
+                                .as_ref()
+                                .and_then(|v| make_slim_params(v));
+                            let tool_input = if tool_name == "AskUserQuestion"
+                                || tool_name == "Task"
+                                || tool_name == "TodoWrite"
+                            {
                                 params.clone()
                             } else {
                                 None
@@ -806,6 +1057,7 @@ impl RemoteSessionStateTracker {
                                 "running",
                                 input_preview,
                                 tool_input,
+                                is_subagent,
                             );
                             let _ = self.event_tx.send(TrackerEvent::ToolStarted {
                                 tool_id: tool_id.clone(),
@@ -821,6 +1073,7 @@ impl RemoteSessionStateTracker {
                                 "confirmed",
                                 None,
                                 None,
+                                is_subagent,
                             );
                         }
                         "Rejected" => {
@@ -831,6 +1084,7 @@ impl RemoteSessionStateTracker {
                                 "rejected",
                                 None,
                                 None,
+                                is_subagent,
                             );
                         }
                         "Completed" | "Succeeded" => {
@@ -923,18 +1177,15 @@ impl RemoteSessionStateTracker {
                 s.active_items.clear();
                 s.round_index = 0;
                 s.session_state = "running".to_string();
+                s.persistence_dirty = true;
                 drop(s);
                 self.bump_version();
             }
             AE::DialogTurnCompleted { .. } if is_direct => {
                 let mut s = self.state.write().unwrap();
                 s.turn_status = "completed".to_string();
-                s.turn_id = None;
-                s.accumulated_text.clear();
-                s.accumulated_thinking.clear();
-                s.active_tools.clear();
-                s.active_items.clear();
                 s.session_state = "idle".to_string();
+                s.persistence_dirty = true;
                 drop(s);
                 self.bump_version();
                 let _ = self.event_tx.send(TrackerEvent::TurnCompleted);
@@ -942,8 +1193,8 @@ impl RemoteSessionStateTracker {
             AE::DialogTurnFailed { error, .. } if is_direct => {
                 let mut s = self.state.write().unwrap();
                 s.turn_status = "failed".to_string();
-                s.turn_id = None;
                 s.session_state = "idle".to_string();
+                s.persistence_dirty = true;
                 drop(s);
                 self.bump_version();
                 let _ = self.event_tx.send(TrackerEvent::TurnFailed(error.clone()));
@@ -951,8 +1202,8 @@ impl RemoteSessionStateTracker {
             AE::DialogTurnCancelled { .. } if is_direct => {
                 let mut s = self.state.write().unwrap();
                 s.turn_status = "cancelled".to_string();
-                s.turn_id = None;
                 s.session_state = "idle".to_string();
+                s.persistence_dirty = true;
                 drop(s);
                 self.bump_version();
                 let _ = self.event_tx.send(TrackerEvent::TurnCancelled);
@@ -1052,12 +1303,14 @@ impl RemoteExecutionDispatcher {
     /// Dispatch a SendMessage command: ensure tracker, restore session, start dialog turn.
     /// Returns `(session_id, turn_id)` on success.
     /// If `turn_id` is `None`, one is auto-generated.
+    ///
+    /// All platforms (desktop, mobile, bot) use the same `ImageContextData` format.
     pub async fn send_message(
         &self,
         session_id: &str,
         content: String,
         agent_type: Option<&str>,
-        images: Option<&Vec<ImageAttachment>>,
+        image_contexts: Vec<crate::agentic::image_analysis::ImageContextData>,
         trigger_source: crate::agentic::coordination::DialogTriggerSource,
         turn_id: Option<String>,
     ) -> std::result::Result<(String, String), String> {
@@ -1078,22 +1331,33 @@ impl RemoteExecutionDispatcher {
             .map(|t| resolve_agent_type(Some(t)).to_string())
             .unwrap_or_else(|| "agentic".to_string());
 
-        let full_content = images
-            .map(|imgs| build_message_with_remote_images(&content, imgs))
-            .unwrap_or_else(|| content.clone());
-
         let turn_id =
             turn_id.unwrap_or_else(|| format!("turn_{}", chrono::Utc::now().timestamp_millis()));
-        coordinator
-            .start_dialog_turn(
-                session_id.to_string(),
-                full_content,
-                Some(turn_id.clone()),
-                resolved_agent_type,
-                trigger_source,
-            )
-            .await
-            .map_err(|e| e.to_string())?;
+
+        if image_contexts.is_empty() {
+            coordinator
+                .start_dialog_turn(
+                    session_id.to_string(),
+                    content.clone(),
+                    Some(turn_id.clone()),
+                    resolved_agent_type,
+                    trigger_source,
+                )
+                .await
+                .map_err(|e| e.to_string())?;
+        } else {
+            coordinator
+                .start_dialog_turn_with_image_contexts(
+                    session_id.to_string(),
+                    content.clone(),
+                    image_contexts,
+                    Some(turn_id.clone()),
+                    resolved_agent_type,
+                    trigger_source,
+                )
+                .await
+                .map_err(|e| e.to_string())?;
+        }
 
         Ok((session_id.to_string(), turn_id))
     }
@@ -1314,6 +1578,26 @@ impl RemoteServer {
             };
         }
 
+        // Fast path: during active streaming, only the real-time snapshot
+        // changes — persisted messages stay the same.  Skip the expensive
+        // disk read and return just the snapshot.
+        let needs_persistence = *since_version == 0 || tracker.is_persistence_dirty();
+
+        if !needs_persistence {
+            let active_turn = tracker.snapshot_active_turn();
+            let sess_state = tracker.session_state();
+            let title = tracker.title();
+            return RemoteResponse::SessionPoll {
+                version: current_version,
+                changed: true,
+                session_state: Some(sess_state),
+                title: if title.is_empty() { None } else { Some(title) },
+                new_messages: None,
+                total_msg_count: None,
+                active_turn,
+            };
+        }
+
         let (all_chat_msgs, _) =
             load_chat_messages_from_conversation_persistence(session_id).await;
         let total_msg_count = all_chat_msgs.len();
@@ -1321,35 +1605,48 @@ impl RemoteServer {
         let new_messages: Vec<ChatMessage> =
             all_chat_msgs.into_iter().skip(skip).collect();
 
-        let active_turn = tracker.snapshot_active_turn();
+        let turn_finished = tracker.is_turn_finished();
+        let has_assistant_msg = new_messages.iter().any(|m| m.role == "assistant");
+
+        let active_turn = if turn_finished && has_assistant_msg {
+            tracker.finalize_completed_turn();
+            None
+        } else if turn_finished {
+            let ts = tracker.turn_status();
+            if ts == "completed" {
+                tracker.snapshot_active_turn()
+            } else {
+                tracker.finalize_completed_turn();
+                tracker.mark_persistence_clean();
+                None
+            }
+        } else {
+            tracker.snapshot_active_turn()
+        };
+
+        let (send_msgs, send_total) = if turn_finished && !has_assistant_msg {
+            // Turn is finished but disk doesn't have the completed assistant
+            // message yet — the frontend's immediateSaveDialogTurn hasn't
+            // landed.  Don't send partial data; the snapshot overlay keeps the
+            // user informed.  Next poll will re-read from disk.
+            (None, None)
+        } else {
+            if !new_messages.is_empty() {
+                tracker.mark_persistence_clean();
+            }
+            (Some(new_messages), Some(total_msg_count))
+        };
+
         let sess_state = tracker.session_state();
         let title = tracker.title();
 
-        let active_turn_ask_tool_ids = active_turn
-            .as_ref()
-            .map(|turn| {
-                turn.tools
-                    .iter()
-                    .filter(|tool| tool.name == "AskUserQuestion")
-                    .map(|tool| tool.id.clone())
-                    .collect::<Vec<_>>()
-            })
-            .unwrap_or_default();
-        let new_message_ask_tool_ids = new_messages
-            .iter()
-            .flat_map(|message| message.items.iter().flatten())
-            .filter_map(|item| item.tool.as_ref())
-            .filter(|tool| tool.name == "AskUserQuestion")
-            .map(|tool| tool.id.clone())
-            .collect::<Vec<_>>();
-
         RemoteResponse::SessionPoll {
             version: current_version,
             changed: true,
             session_state: Some(sess_state),
             title: if title.is_empty() { None } else { Some(title) },
-            new_messages: Some(new_messages),
-            total_msg_count: Some(total_msg_count),
+            new_messages: send_msgs,
+            total_msg_count: send_total,
             active_turn,
         }
     }
@@ -1664,18 +1961,23 @@ impl RemoteServer {
                 content,
                 agent_type: requested_agent_type,
                 images,
+                image_contexts,
             } => {
+                // Unified: prefer image_contexts (new format), fall back to legacy images
+                let resolved_contexts = image_contexts.clone().unwrap_or_else(|| {
+                    images_to_contexts(images.as_ref())
+                });
                 info!(
-                    "Remote send_message: session={session_id}, agent_type={}, images={}",
+                    "Remote send_message: session={session_id}, agent_type={}, image_contexts={}",
                     requested_agent_type.as_deref().unwrap_or("agentic"),
-                    images.as_ref().map_or(0, |v| v.len())
+                    resolved_contexts.len()
                 );
                 match dispatcher
                     .send_message(
                         session_id,
                         content.clone(),
                         requested_agent_type.as_deref(),
-                        images.as_ref(),
+                        resolved_contexts,
                         DialogTriggerSource::RemoteRelay,
                         None,
                     )
diff --git a/src/crates/events/src/agentic.rs b/src/crates/events/src/agentic.rs
index fda73528..0bbf88c3 100644
--- a/src/crates/events/src/agentic.rs
+++ b/src/crates/events/src/agentic.rs
@@ -46,11 +46,29 @@ pub enum AgenticEvent {
         title: String,
         method: String,
     },
+    ImageAnalysisStarted {
+        session_id: String,
+        image_count: usize,
+        user_input: String,
+        /// Image metadata JSON for UI rendering (same as DialogTurnStarted)
+        image_metadata: Option<serde_json::Value>,
+    },
+
+    ImageAnalysisCompleted {
+        session_id: String,
+        success: bool,
+        duration_ms: u64,
+    },
+
     DialogTurnStarted {
         session_id: String,
         turn_id: String,
         turn_index: usize,
         user_input: String,
+        /// Original user input before vision enhancement (for display on all clients)
+        original_user_input: Option<String>,
+        /// Image metadata JSON for UI rendering (id, name, data_url, mime_type, image_path)
+        user_message_metadata: Option<serde_json::Value>,
         subagent_parent_info: Option<SubagentParentInfo>,
     },
 
@@ -287,6 +305,8 @@ impl AgenticEvent {
             | Self::SessionStateChanged { session_id, .. }
             | Self::SessionDeleted { session_id }
             | Self::SessionTitleGenerated { session_id, .. }
+            | Self::ImageAnalysisStarted { session_id, .. }
+            | Self::ImageAnalysisCompleted { session_id, .. }
             | Self::DialogTurnStarted { session_id, .. }
             | Self::DialogTurnCompleted { session_id, .. }
             | Self::TokenUsageUpdated { session_id, .. }
@@ -316,7 +336,9 @@ impl AgenticEvent {
             | Self::DialogTurnCompleted { .. }
             | Self::ContextCompressionFailed { .. } => AgenticEventPriority::High,
 
-            Self::TextChunk { .. }
+            Self::ImageAnalysisStarted { .. }
+            | Self::ImageAnalysisCompleted { .. }
+            | Self::TextChunk { .. }
             | Self::ThinkingChunk { .. }
             | Self::ToolEvent { .. }
             | Self::ModelRoundStarted { .. }
diff --git a/src/crates/transport/src/adapters/tauri.rs b/src/crates/transport/src/adapters/tauri.rs
index d297032f..d742f68e 100644
--- a/src/crates/transport/src/adapters/tauri.rs
+++ b/src/crates/transport/src/adapters/tauri.rs
@@ -54,12 +54,29 @@ impl TransportAdapter for TauriTransportAdapter {
                     "sessionId": session_id,
                 }))?;
             }
-            AgenticEvent::DialogTurnStarted { session_id, turn_id, turn_index, user_input, subagent_parent_info } => {
+            AgenticEvent::ImageAnalysisStarted { session_id, image_count, user_input, image_metadata } => {
+                self.app_handle.emit("agentic://image-analysis-started", json!({
+                    "sessionId": session_id,
+                    "imageCount": image_count,
+                    "userInput": user_input,
+                    "imageMetadata": image_metadata,
+                }))?;
+            }
+            AgenticEvent::ImageAnalysisCompleted { session_id, success, duration_ms } => {
+                self.app_handle.emit("agentic://image-analysis-completed", json!({
+                    "sessionId": session_id,
+                    "success": success,
+                    "durationMs": duration_ms,
+                }))?;
+            }
+            AgenticEvent::DialogTurnStarted { session_id, turn_id, turn_index, user_input, original_user_input, user_message_metadata, subagent_parent_info } => {
                 self.app_handle.emit("agentic://dialog-turn-started", json!({
                     "sessionId": session_id,
                     "turnId": turn_id,
                     "turnIndex": turn_index,
                     "userInput": user_input,
+                    "originalUserInput": original_user_input,
+                    "userMessageMetadata": user_message_metadata,
                     "subagentParentInfo": subagent_parent_info,
                 }))?;
             }
diff --git a/src/crates/transport/src/adapters/websocket.rs b/src/crates/transport/src/adapters/websocket.rs
index a3723dc5..892afb0c 100644
--- a/src/crates/transport/src/adapters/websocket.rs
+++ b/src/crates/transport/src/adapters/websocket.rs
@@ -51,12 +51,31 @@ impl fmt::Debug for WebSocketTransportAdapter {
 impl TransportAdapter for WebSocketTransportAdapter {
     async fn emit_event(&self, _session_id: &str, event: AgenticEvent) -> anyhow::Result<()> {
         let message = match event {
-            AgenticEvent::DialogTurnStarted { session_id, turn_id, turn_index, .. } => {
+            AgenticEvent::ImageAnalysisStarted { session_id, image_count, user_input, image_metadata } => {
+                json!({
+                    "type": "image-analysis-started",
+                    "sessionId": session_id,
+                    "imageCount": image_count,
+                    "userInput": user_input,
+                    "imageMetadata": image_metadata,
+                })
+            }
+            AgenticEvent::ImageAnalysisCompleted { session_id, success, duration_ms } => {
+                json!({
+                    "type": "image-analysis-completed",
+                    "sessionId": session_id,
+                    "success": success,
+                    "durationMs": duration_ms,
+                })
+            }
+            AgenticEvent::DialogTurnStarted { session_id, turn_id, turn_index, original_user_input, user_message_metadata, .. } => {
                 json!({
                     "type": "dialog-turn-started",
                     "sessionId": session_id,
                     "turnId": turn_id,
                     "turnIndex": turn_index,
+                    "originalUserInput": original_user_input,
+                    "userMessageMetadata": user_message_metadata,
                 })
             }
             AgenticEvent::ModelRoundStarted { session_id, turn_id, round_id, .. } => {
diff --git a/src/mobile-web/index.html b/src/mobile-web/index.html
index ca443af8..c3d9099e 100644
--- a/src/mobile-web/index.html
+++ b/src/mobile-web/index.html
@@ -4,10 +4,16 @@
   <meta charset="UTF-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" />
   <title>BitFun Remote</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #121214; color: #e8e8e8; }
+    html { color-scheme: dark; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #121214; color: #e8e8e8; }
+    @media (prefers-color-scheme: light) {
+      html { color-scheme: light; }
+      body { background-color: #f2f2f7; color: #1c1c1e; }
+    }
   </style>
 </head>
 <body>
diff --git a/src/mobile-web/src/App.tsx b/src/mobile-web/src/App.tsx
index b4b893c1..5a596cd0 100644
--- a/src/mobile-web/src/App.tsx
+++ b/src/mobile-web/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import PairingPage from './pages/PairingPage';
 import WorkspacePage from './pages/WorkspacePage';
 import SessionListPage from './pages/SessionListPage';
@@ -9,14 +9,53 @@ import { ThemeProvider } from './theme';
 import './styles/index.scss';
 
 type Page = 'pairing' | 'workspace' | 'sessions' | 'chat';
+type NavDirection = 'push' | 'pop' | null;
+
+const NAV_PUSH_DURATION = 350;
+const NAV_POP_DURATION = 250;
+
+function getNavClass(
+  targetPage: Page,
+  currentPage: Page,
+  navDir: NavDirection,
+  isAnimating: boolean,
+): string {
+  if (!isAnimating) return '';
+  const isEntering = currentPage === targetPage;
+  if (isEntering) {
+    return navDir === 'push' ? 'nav-push-enter' : 'nav-pop-enter';
+  }
+  return navDir === 'push' ? 'nav-push-exit' : 'nav-pop-exit';
+}
 
 const AppContent: React.FC = () => {
   const [page, setPage] = useState<Page>('pairing');
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
   const [activeSessionName, setActiveSessionName] = useState<string>('Session');
+  const [chatAutoFocus, setChatAutoFocus] = useState(false);
   const clientRef = useRef<RelayHttpClient | null>(null);
   const sessionMgrRef = useRef<RemoteSessionManager | null>(null);
 
+  const [navDir, setNavDir] = useState<NavDirection>(null);
+  const [prevPage, setPrevPage] = useState<Page | null>(null);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const navigateTo = useCallback((target: Page, direction: NavDirection) => {
+    setPage(prev => {
+      setPrevPage(prev);
+      return target;
+    });
+    setNavDir(direction);
+    clearTimeout(timerRef.current);
+    const duration = direction === 'pop' ? NAV_POP_DURATION : NAV_PUSH_DURATION;
+    timerRef.current = setTimeout(() => {
+      setPrevPage(null);
+      setNavDir(null);
+    }, duration);
+  }, []);
+
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+
   const handlePaired = useCallback(
     (client: RelayHttpClient, sessionMgr: RemoteSessionManager) => {
       clientRef.current = client;
@@ -27,47 +66,60 @@ const AppContent: React.FC = () => {
   );
 
   const handleOpenWorkspace = useCallback(() => {
-    setPage('workspace');
-  }, []);
+    navigateTo('workspace', 'push');
+  }, [navigateTo]);
 
   const handleWorkspaceReady = useCallback(() => {
-    setPage('sessions');
-  }, []);
+    navigateTo('sessions', 'pop');
+  }, [navigateTo]);
 
-  const handleSelectSession = useCallback((sessionId: string, sessionName?: string) => {
+  const handleSelectSession = useCallback((sessionId: string, sessionName?: string, isNew?: boolean) => {
     setActiveSessionId(sessionId);
     setActiveSessionName(sessionName || 'Session');
-    setPage('chat');
-  }, []);
+    setChatAutoFocus(!!isNew);
+    navigateTo('chat', 'push');
+  }, [navigateTo]);
 
   const handleBackToSessions = useCallback(() => {
-    setActiveSessionId(null);
-    setPage('sessions');
-  }, []);
+    navigateTo('sessions', 'pop');
+    setTimeout(() => setActiveSessionId(null), NAV_POP_DURATION);
+  }, [navigateTo]);
+
+  const isAnimating = navDir !== null;
+  const currentPage: Page = page;
+
+  const shouldShow = (p: Page) => currentPage === p || (isAnimating && prevPage === p);
 
   return (
     <div className="mobile-app">
       {page === 'pairing' && <PairingPage onPaired={handlePaired} />}
-      {page === 'workspace' && sessionMgrRef.current && (
-        <WorkspacePage
-          sessionMgr={sessionMgrRef.current}
-          onReady={handleWorkspaceReady}
-        />
+      {shouldShow('workspace') && sessionMgrRef.current && (
+        <div className={`nav-page ${getNavClass('workspace', currentPage, navDir, isAnimating)}`}>
+          <WorkspacePage
+            sessionMgr={sessionMgrRef.current}
+            onReady={handleWorkspaceReady}
+          />
+        </div>
       )}
-      {page === 'sessions' && sessionMgrRef.current && (
-        <SessionListPage
-          sessionMgr={sessionMgrRef.current}
-          onSelectSession={handleSelectSession}
-          onOpenWorkspace={handleOpenWorkspace}
-        />
+      {shouldShow('sessions') && sessionMgrRef.current && (
+        <div className={`nav-page ${getNavClass('sessions', currentPage, navDir, isAnimating)}`}>
+          <SessionListPage
+            sessionMgr={sessionMgrRef.current}
+            onSelectSession={handleSelectSession}
+            onOpenWorkspace={handleOpenWorkspace}
+          />
+        </div>
       )}
-      {page === 'chat' && sessionMgrRef.current && activeSessionId && (
-        <ChatPage
-          sessionMgr={sessionMgrRef.current}
-          sessionId={activeSessionId}
-          sessionName={activeSessionName}
-          onBack={handleBackToSessions}
-        />
+      {shouldShow('chat') && sessionMgrRef.current && activeSessionId && (
+        <div className={`nav-page ${getNavClass('chat', currentPage, navDir, isAnimating)}`}>
+          <ChatPage
+            sessionMgr={sessionMgrRef.current}
+            sessionId={activeSessionId}
+            sessionName={activeSessionName}
+            onBack={handleBackToSessions}
+            autoFocus={chatAutoFocus}
+          />
+        </div>
       )}
     </div>
   );
diff --git a/src/mobile-web/src/assets/Logo-ICON.png b/src/mobile-web/src/assets/Logo-ICON.png
new file mode 100644
index 00000000..e250ea97
Binary files /dev/null and b/src/mobile-web/src/assets/Logo-ICON.png differ
diff --git a/src/mobile-web/src/pages/ChatPage.tsx b/src/mobile-web/src/pages/ChatPage.tsx
index bfd1824d..eaae6b63 100644
--- a/src/mobile-web/src/pages/ChatPage.tsx
+++ b/src/mobile-web/src/pages/ChatPage.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { vscDarkPlus, vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import {
   RemoteSessionManager,
   SessionPoller,
@@ -20,32 +20,143 @@ interface ChatPageProps {
   sessionId: string;
   sessionName?: string;
   onBack: () => void;
+  autoFocus?: boolean;
 }
 
 // ─── Markdown ───────────────────────────────────────────────────────────────
 
-const MarkdownContent: React.FC<{ content: string }> = ({ content }) => (
-  <ReactMarkdown
-    remarkPlugins={[remarkGfm]}
-    components={{
-      code({ className, children, ...props }) {
-        const match = /language-(\w+)/.exec(className || '');
-        const codeStr = String(children).replace(/\n$/, '');
-        return match ? (
-          <SyntaxHighlighter style={oneDark} language={match[1]} PreTag="div">
-            {codeStr}
-          </SyntaxHighlighter>
-        ) : (
-          <code className={className} {...props}>
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function truncateMiddle(str: string, maxLen: number): string {
+  if (!str || str.length <= maxLen) return str;
+  const keep = maxLen - 3;
+  const head = Math.ceil(keep * 0.6);
+  const tail = keep - head;
+  return str.slice(0, head) + '...' + str.slice(-tail);
+}
+
+function copyToClipboard(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    return navigator.clipboard.writeText(text);
+  }
+  // Fallback for insecure contexts (HTTP)
+  const ta = document.createElement('textarea');
+  ta.value = text;
+  ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px;opacity:0';
+  document.body.appendChild(ta);
+  ta.select();
+  try {
+    document.execCommand('copy');
+  } finally {
+    document.body.removeChild(ta);
+  }
+  return Promise.resolve();
+}
+
+const CopyButton: React.FC<{ code: string }> = ({ code }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await copyToClipboard(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch { /* ignore */ }
+  };
+
+  return (
+    <button
+      className={`copy-button${copied ? ' copy-success' : ''}`}
+      onClick={handleCopy}
+      type="button"
+    >
+      {copied ? (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      ) : (
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+      )}
+    </button>
+  );
+};
+
+const MarkdownContent: React.FC<{ content: string }> = ({ content }) => {
+  const { isDark } = useTheme();
+  const syntaxTheme = isDark ? vscDarkPlus : vs;
+
+  const components: React.ComponentProps<typeof ReactMarkdown>['components'] = useMemo(() => ({
+    code({ className, children, ...props }: any) {
+      const match = /language-(\w+)/.exec(className || '');
+      const codeStr = String(children).replace(/\n$/, '');
+      const hasMultipleLines = codeStr.includes('\n');
+      const isCodeBlock = className?.startsWith('language-') || hasMultipleLines;
+
+      if (!isCodeBlock) {
+        return (
+          <code className="inline-code" {...props}>
             {children}
           </code>
         );
-      },
-    }}
-  >
-    {content}
-  </ReactMarkdown>
-);
+      }
+
+      return (
+        <div className="code-block-wrapper">
+          <CopyButton code={codeStr} />
+          <SyntaxHighlighter
+            language={match?.[1] || 'text'}
+            style={syntaxTheme}
+            showLineNumbers={true}
+            customStyle={{
+              margin: 0,
+              borderRadius: '8px',
+              fontSize: '0.8rem',
+              lineHeight: '1.5',
+            }}
+            codeTagProps={{
+              style: {
+                fontFamily: 'var(--font-family-mono)',
+              },
+            }}
+            lineNumberStyle={{
+              color: isDark ? '#666' : '#999',
+              paddingRight: '1em',
+              textAlign: 'right' as const,
+              userSelect: 'none' as const,
+              minWidth: '2.5em',
+            }}
+          >
+            {codeStr}
+          </SyntaxHighlighter>
+        </div>
+      );
+    },
+
+    table({ children }: any) {
+      return (
+        <div className="table-wrapper">
+          <table>{children}</table>
+        </div>
+      );
+    },
+
+    blockquote({ children }: any) {
+      return <blockquote className="custom-blockquote">{children}</blockquote>;
+    },
+  }), [syntaxTheme, isDark]);
+
+  return (
+    <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+      {content}
+    </ReactMarkdown>
+  );
+};
 
 // ─── Thinking (ModelThinkingDisplay-style) ───────────────────────────────────
 
@@ -68,7 +179,7 @@ const ThinkingBlock: React.FC<{ thinking: string; streaming?: boolean }> = ({ th
   const charCount = thinking.length;
   const label = streaming && charCount === 0
     ? 'Thinking...'
-    : `Thought for ${charCount} characters`;
+    : `Thought ${charCount} characters`;
 
   return (
     <div className={`chat-thinking ${streaming ? 'chat-thinking--streaming' : ''}`}>
@@ -112,12 +223,312 @@ const TOOL_TYPE_MAP: Record<string, string> = {
   grep: 'Grep',
   create_file: 'Write',
   delete_file: 'Delete',
-  execute_subagent: 'Task',
+  Task: 'Task',
   search: 'Search',
   edit_file: 'Edit',
   web_search: 'Web',
+  TodoWrite: 'Todo',
+};
+
+// ─── TodoWrite card ─────────────────────────────────────────────────────────
+
+const TodoCard: React.FC<{ tool: RemoteToolStatus }> = ({ tool }) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const todos: { id?: string; content: string; status: string }[] = useMemo(() => {
+    const src = tool.tool_input;
+    if (!src) return [];
+    const arr = src.todos || src.result?.todos;
+    return Array.isArray(arr) ? arr : [];
+  }, [tool.tool_input]);
+
+  if (todos.length === 0) return null;
+
+  const completed = todos.filter(t => t.status === 'completed').length;
+  const allDone = completed === todos.length;
+  const inProgress = todos.find(t => t.status === 'in_progress');
+
+  const statusIcon = (s: string) => {
+    switch (s) {
+      case 'completed':
+        return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--color-success)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>;
+      case 'in_progress':
+        return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent-500)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8" fill="var(--color-accent-500)"/></svg>;
+      case 'cancelled':
+        return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--color-error)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>;
+      default:
+        return <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-muted)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/></svg>;
+    }
+  };
+
+  return (
+    <div className="chat-todo-card">
+      <div className="chat-todo-card__header" onClick={() => setExpanded(!expanded)}>
+        <span className="chat-todo-card__icon">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="5" width="6" height="6" rx="1"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/>
+          </svg>
+        </span>
+        {allDone && !expanded ? (
+          <span className="chat-todo-card__current chat-todo-card__current--done">All tasks completed</span>
+        ) : inProgress && !expanded ? (
+          <span className="chat-todo-card__current">{inProgress.content}</span>
+        ) : null}
+        <span className="chat-todo-card__right">
+          <span className="chat-todo-card__dots">
+            {todos.map((t, i) => (
+              <span key={t.id || i} className={`chat-todo-card__dot chat-todo-card__dot--${t.status}`} />
+            ))}
+          </span>
+          <span className="chat-todo-card__stats">{completed}/{todos.length}</span>
+        </span>
+        <span className={`chat-todo-card__chevron ${expanded ? 'is-expanded' : ''}`}>
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+        </span>
+      </div>
+      {expanded && (
+        <div className="chat-todo-card__list">
+          {todos.map((t, i) => (
+            <div key={t.id || i} className={`chat-todo-card__item chat-todo-card__item--${t.status}`}>
+              {statusIcon(t.status)}
+              <span className="chat-todo-card__item-text">{t.content}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Extract task description and agent type from execute_subagent tool data.
+ * Prefers tool_input (full JSON from backend), falls back to input_preview (truncated).
+ */
+function parseTaskInfo(tool: RemoteToolStatus): { description?: string; agentType?: string } | null {
+  const source = tool.tool_input ?? (() => {
+    try { return JSON.parse(tool.input_preview || ''); } catch { return null; }
+  })();
+  if (!source) return null;
+  return {
+    description: source.description,
+    agentType: source.subagent_type,
+  };
+}
+
+/**
+ * Summarize a subItem for display inside a Task card.
+ */
+function subItemLabel(item: ChatMessageItem): string {
+  if (item.type === 'thinking') {
+    const len = (item.content || '').length;
+    return `Thought ${len} characters`;
+  }
+  if (item.type === 'tool' && item.tool) {
+    const t = item.tool;
+    const preview = t.input_preview ? `: ${t.input_preview}` : '';
+    return `${t.name}${preview}`;
+  }
+  if (item.type === 'text') {
+    const len = (item.content || '').length;
+    return `Text ${len} characters`;
+  }
+  return '';
+}
+
+const TaskToolCard: React.FC<{
+  tool: RemoteToolStatus;
+  now: number;
+  subItems?: ChatMessageItem[];
+  onCancelTool?: (toolId: string) => void;
+}> = ({ tool, now, subItems = [], onCancelTool }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const prevCountRef = useRef(0);
+  const [stepsExpanded, setStepsExpanded] = useState(false);
+  const isRunning = tool.status === 'running';
+  const isCompleted = tool.status === 'completed';
+  const isError = tool.status === 'failed' || tool.status === 'error';
+  const showCancel = isRunning && !!onCancelTool;
+  const taskInfo = parseTaskInfo(tool);
+
+  const durationLabel = isCompleted && tool.duration_ms != null
+    ? formatDuration(tool.duration_ms)
+    : isRunning && tool.start_ms
+    ? formatDuration(now - tool.start_ms)
+    : '';
+
+  const statusClass = isRunning ? 'running' : isCompleted ? 'done' : isError ? 'error' : 'pending';
+
+  const subTools = subItems.filter(i => i.type === 'tool' && i.tool);
+  const subToolsDone = subTools.filter(i => i.tool!.status === 'completed').length;
+  const subToolsRunning = subTools.filter(i => i.tool!.status === 'running').length;
+
+  useEffect(() => {
+    if (stepsExpanded && subItems.length > prevCountRef.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+    prevCountRef.current = subItems.length;
+  }, [subItems.length, stepsExpanded]);
+
+  return (
+    <div className={`chat-task-card chat-task-card--${statusClass}`}>
+      <div className="chat-task-card__header">
+        <span className="chat-tool-card__icon">
+          {isRunning ? (
+            <span className="chat-tool-card__spinner" />
+          ) : isCompleted ? (
+            <span className="chat-tool-card__check">
+              <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 8.5L6.5 12L13 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
+            </span>
+          ) : isError ? (
+            <span className="chat-tool-card__error-icon">
+              <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M4 4L12 12M12 4L4 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
+            </span>
+          ) : (
+            <span className="chat-tool-card__spinner" />
+          )}
+        </span>
+        <span className="chat-tool-card__name">
+          {taskInfo?.description || 'Task'}
+        </span>
+        {taskInfo?.agentType && (
+          <span className="chat-tool-card__type">{taskInfo.agentType}</span>
+        )}
+        {durationLabel && (
+          <span className="chat-tool-card__duration">{durationLabel}</span>
+        )}
+        {showCancel && (
+          <button
+            className="chat-tool-card__cancel"
+            onClick={(e) => { e.stopPropagation(); onCancelTool?.(tool.id); }}
+            aria-label="Cancel"
+          >
+            <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
+              <rect x="3" y="3" width="10" height="10" rx="2" fill="currentColor"/>
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {subItems.length > 0 && (
+        <>
+          <div className="chat-task-card__summary" onClick={() => setStepsExpanded(e => !e)}>
+            <span className="chat-task-card__stat">
+              {subTools.length} tool call{subTools.length === 1 ? '' : 's'}
+            </span>
+            <span className="chat-task-card__stat-right">
+              <span className="chat-task-card__stat--done">{subToolsDone} done</span>
+              {subToolsRunning > 0 && <span className="chat-task-card__stat--running">{subToolsRunning} running</span>}
+            </span>
+            <span className={`chat-task-card__chevron ${stepsExpanded ? 'is-expanded' : ''}`}>
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+            </span>
+          </div>
+          {stepsExpanded && (
+            <div className="chat-task-card__steps" ref={scrollRef}>
+              {subItems.map((item, idx) => {
+                if (item.type === 'thinking') {
+                  return (
+                    <div key={`sub-think-${idx}`} className="chat-task-card__step chat-task-card__step--thinking">
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                      <span>{subItemLabel(item)}</span>
+                    </div>
+                  );
+                }
+                if (item.type === 'tool' && item.tool) {
+                  const t = item.tool;
+                  const isDone = t.status === 'completed';
+                  const isErr = t.status === 'failed' || t.status === 'error';
+                  return (
+                    <div key={`sub-tool-${t.id}-${idx}`} className={`chat-task-card__step chat-task-card__step--tool ${isDone ? 'is-done' : isErr ? 'is-error' : 'is-running'}`}>
+                      {isDone ? (
+                        <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M3 8.5L6.5 12L13 4" stroke="var(--color-success)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
+                      ) : isErr ? (
+                        <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><path d="M4 4L12 12M12 4L4 12" stroke="var(--color-error)" strokeWidth="2" strokeLinecap="round"/></svg>
+                      ) : (
+                        <span className="chat-task-card__step-spinner" />
+                      )}
+                      <span className="chat-task-card__step-name">{t.name}</span>
+                    {(() => {
+                      const p = getToolPreview(t);
+                      return p ? <span className="chat-task-card__step-preview">{p}</span> : null;
+                    })()}
+                      {isDone && t.duration_ms != null && (
+                        <span className="chat-task-card__step-duration">{formatDuration(t.duration_ms)}</span>
+                      )}
+                    </div>
+                  );
+                }
+                return null;
+              })}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
 };
 
+/**
+ * Parse tool input_preview (slim JSON from backend) and extract a concise display text.
+ * Backend sends valid JSON with large fields stripped; frontend extracts the key field
+ * and truncates the resulting plain text.
+ */
+function getToolPreview(tool: RemoteToolStatus): string | null {
+  if (!tool.input_preview) return null;
+  try {
+    const params = JSON.parse(tool.input_preview);
+    if (!params || typeof params !== 'object') return null;
+
+    const lastSegment = (p: string) => {
+      const parts = p.replace(/\\/g, '/').split('/');
+      return parts[parts.length - 1] || p;
+    };
+
+    let result: string | null = null;
+
+    const pathVal = params.file_path || params.path;
+    switch (tool.name) {
+      case 'Read':
+      case 'Write':
+      case 'Edit':
+      case 'LS':
+      case 'StrReplace':
+      case 'delete_file':
+        result = pathVal ? lastSegment(pathVal) : null;
+        break;
+      case 'Glob':
+      case 'Grep':
+        result = params.pattern || null;
+        break;
+      case 'Bash':
+      case 'Shell':
+        result = params.description || params.command || null;
+        break;
+      case 'web_search':
+      case 'WebSearch':
+        result = params.search_term || params.query || null;
+        break;
+      case 'WebFetch':
+        result = params.url || null;
+        break;
+      case 'SemanticSearch':
+        result = params.query || null;
+        break;
+      default: {
+        const first = Object.values(params).find(
+          (v): v is string => typeof v === 'string' && v.length > 0 && v.length < 80,
+        );
+        result = first || null;
+      }
+    }
+
+    if (!result) return null;
+    return result.length > 60 ? result.slice(0, 60) + '…' : result;
+  } catch {
+    return null;
+  }
+}
+
 const ToolCard: React.FC<{
   tool: RemoteToolStatus;
   now: number;
@@ -127,15 +538,17 @@ const ToolCard: React.FC<{
   const typeLabel = TOOL_TYPE_MAP[toolKey] || TOOL_TYPE_MAP[tool.name] || 'Tool';
   const isRunning = tool.status === 'running';
   const isCompleted = tool.status === 'completed';
+  const isError = tool.status === 'failed' || tool.status === 'error';
   const showCancel = isRunning && !!onCancelTool;
+  const preview = getToolPreview(tool);
 
   const durationLabel = isCompleted && tool.duration_ms != null
-    ? `${(tool.duration_ms / 1000).toFixed(1)}s`
+    ? formatDuration(tool.duration_ms)
     : isRunning && tool.start_ms
-    ? `${((now - tool.start_ms) / 1000).toFixed(1)}s`
+    ? formatDuration(now - tool.start_ms)
     : '';
 
-  const statusClass = isRunning ? 'running' : isCompleted ? 'done' : 'error';
+  const statusClass = isRunning ? 'running' : isCompleted ? 'done' : isError ? 'error' : 'pending';
 
   return (
     <div className={`chat-tool-card chat-tool-card--${statusClass}`}>
@@ -147,21 +560,72 @@ const ToolCard: React.FC<{
             <span className="chat-tool-card__check">
               <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 8.5L6.5 12L13 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
             </span>
-          ) : (
+          ) : isError ? (
             <span className="chat-tool-card__error-icon">
               <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M4 4L12 12M12 4L4 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
             </span>
+          ) : (
+            <span className="chat-tool-card__spinner" />
           )}
         </span>
-        <span className="chat-tool-card__name">{tool.name}</span>
+        <span className="chat-tool-card__name">
+          {tool.name}
+          {preview && <span className="chat-tool-card__preview"> {preview}</span>}
+        </span>
         <span className="chat-tool-card__type">{typeLabel}</span>
         {durationLabel && (
           <span className="chat-tool-card__duration">{durationLabel}</span>
         )}
+        {showCancel && (
+          <button
+            className="chat-tool-card__cancel"
+            onClick={(e) => { e.stopPropagation(); onCancelTool?.(tool.id); }}
+            aria-label="Cancel"
+          >
+            <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
+              <rect x="3" y="3" width="10" height="10" rx="2" fill="currentColor"/>
+            </svg>
+          </button>
+        )}
       </div>
-      {showCancel && (
-        <div style={{ marginTop: 8, display: 'flex', justifyContent: 'flex-end' }}>
-          <button className="chat-ask-card__submit" onClick={() => onCancelTool?.(tool.id)}>Cancel tool</button>
+    </div>
+  );
+};
+
+const READ_LIKE_TOOLS = new Set(['Read', 'Grep', 'Glob', 'SemanticSearch']);
+
+const ReadFilesToggle: React.FC<{ tools: RemoteToolStatus[] }> = ({ tools }) => {
+  const [open, setOpen] = useState(false);
+  if (tools.length === 0) return null;
+
+  const doneCount = tools.filter(t => t.status === 'completed').length;
+  const allDone = doneCount === tools.length;
+  const label = allDone
+    ? `Read ${tools.length} file${tools.length === 1 ? '' : 's'}`
+    : `Reading ${tools.length} file${tools.length === 1 ? '' : 's'} (${doneCount} done)`;
+
+  return (
+    <div className={`chat-thinking ${allDone ? '' : 'chat-thinking--streaming'}`}>
+      <button className="chat-thinking__toggle" onClick={() => setOpen(o => !o)}>
+        <span className={`chat-thinking__chevron ${open ? 'is-open' : ''}`}>
+          <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
+            <path d="M6 4L10 8L6 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+        </span>
+        <span className="chat-thinking__label">{label}</span>
+      </button>
+      {open && (
+        <div className="chat-thinking__content-wrapper at-top at-bottom">
+          <div className="chat-thinking__content">
+            {tools.map(t => {
+              const preview = t.input_preview || '';
+              return (
+                <div key={t.id} style={{ fontSize: '12px', padding: '2px 0', opacity: 0.8 }}>
+                  {t.status === 'completed' ? '✓' : '⋯'} {t.name} {preview}
+                </div>
+              );
+            })}
+          </div>
         </div>
       )}
     </div>
@@ -177,13 +641,14 @@ const ToolList: React.FC<{
 }> = ({ tools, now, onCancelTool }) => {
   const scrollRef = useRef<HTMLDivElement>(null);
   const prevCountRef = useRef(0);
+  const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
-    if (tools.length > prevCountRef.current && scrollRef.current) {
+    if (expanded && tools.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
     prevCountRef.current = tools.length;
-  }, [tools.length]);
+  }, [tools.length, expanded]);
 
   if (!tools || tools.length === 0) return null;
 
@@ -202,18 +667,23 @@ const ToolList: React.FC<{
 
   return (
     <div className="chat-tool-list chat-tool-list--collapsed">
-      <div className="chat-tool-list__header">
-        <span className="chat-tool-list__count">{tools.length} tool calls</span>
+      <div className="chat-tool-list__header" onClick={() => setExpanded(e => !e)}>
+        <span className="chat-tool-list__count">{tools.length} tool call{tools.length === 1 ? '' : 's'}</span>
         <span className="chat-tool-list__stats">
           {doneCount > 0 && <span className="chat-tool-list__stat chat-tool-list__stat--done">{doneCount} done</span>}
           {runningCount > 0 && <span className="chat-tool-list__stat chat-tool-list__stat--running">{runningCount} running</span>}
         </span>
+        <span className={`chat-tool-list__chevron ${expanded ? 'is-expanded' : ''}`}>
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+        </span>
       </div>
-      <div className="chat-tool-list__scroll" ref={scrollRef}>
-        {tools.map((tc) => (
-          <ToolCard key={tc.id} tool={tc} now={now} onCancelTool={onCancelTool} />
-        ))}
-      </div>
+      {expanded && (
+        <div className="chat-tool-list__scroll" ref={scrollRef}>
+          {tools.map((tc) => (
+            <ToolCard key={tc.id} tool={tc} now={now} onCancelTool={onCancelTool} />
+          ))}
+        </div>
+      )}
     </div>
   );
 };
@@ -226,6 +696,75 @@ const TypingDots: React.FC = () => (
   </span>
 );
 
+// ─── Typewriter effect (pseudo-streaming) ──────────────────────────────────
+
+function useTypewriter(targetText: string, animate: boolean): string {
+  const [displayText, setDisplayText] = useState(animate ? '' : targetText);
+  const revealedRef = useRef(animate ? 0 : targetText.length);
+  const targetRef = useRef(targetText);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const speedRef = useRef(3);
+
+  useEffect(() => {
+    if (!animate) {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+      revealedRef.current = targetText.length;
+      targetRef.current = targetText;
+      setDisplayText(targetText);
+      return;
+    }
+
+    targetRef.current = targetText;
+
+    if (targetText.length < revealedRef.current) {
+      revealedRef.current = 0;
+    }
+
+    const delta = targetText.length - revealedRef.current;
+    if (delta > 0) {
+      const FRAME_INTERVAL = 30;
+      const REVEAL_DURATION = 800;
+      const totalFrames = REVEAL_DURATION / FRAME_INTERVAL;
+      speedRef.current = Math.max(Math.ceil(delta / totalFrames), 2);
+
+      if (!timerRef.current) {
+        timerRef.current = setInterval(() => {
+          const target = targetRef.current;
+          const cur = revealedRef.current;
+          if (cur >= target.length) {
+            if (timerRef.current) {
+              clearInterval(timerRef.current);
+              timerRef.current = null;
+            }
+            return;
+          }
+          const next = Math.min(cur + speedRef.current, target.length);
+          revealedRef.current = next;
+          setDisplayText(target.slice(0, next));
+        }, FRAME_INTERVAL);
+      }
+    }
+  }, [targetText, animate]);
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+      }
+    };
+  }, []);
+
+  return displayText;
+}
+
+const TypewriterText: React.FC<{ content: string }> = ({ content }) => {
+  const displayText = useTypewriter(content, true);
+  return <MarkdownContent content={displayText} />;
+};
+
 // ─── AskUserQuestion Card ─────────────────────────────────────────────────
 
 interface AskQuestionCardProps {
@@ -392,6 +931,43 @@ const AskQuestionCard: React.FC<AskQuestionCardProps> = ({ tool, onAnswer }) =>
   );
 };
 
+/**
+ * Collect subagent internal items into the Task item's subItems field.
+ * When a Task tool appears, all subsequent items until the next non-subagent
+ * item (or a completed Task) are its internal output. We attach them as
+ * subItems on the Task ChatMessageItem for nested rendering.
+ */
+function filterSubagentItems(items: ChatMessageItem[]): ChatMessageItem[] {
+  const result: ChatMessageItem[] = [];
+  let currentTaskItem: ChatMessageItem | null = null;
+
+  for (const item of items) {
+    if (item.type === 'tool' && item.tool?.name === 'Task') {
+      const taskCopy: ChatMessageItem = { ...item, subItems: [] };
+      result.push(taskCopy);
+      currentTaskItem = taskCopy;
+      continue;
+    }
+
+    if (item.is_subagent && currentTaskItem) {
+      currentTaskItem.subItems!.push(item);
+      continue;
+    }
+
+    if (item.is_subagent) {
+      continue;
+    }
+
+    // Don't reset currentTaskItem — when the agent calls tools in
+    // parallel (e.g. Explore + 3 Reads), direct tools interleave with
+    // the subagent's internal tools.  Keeping currentTaskItem alive
+    // ensures later is_subagent items still get grouped correctly.
+    result.push(item);
+  }
+
+  return result;
+}
+
 function groupChatItems(items: ChatMessageItem[]) {
   const groups: { type: string; entries: ChatMessageItem[] }[] = [];
   for (const item of items) {
@@ -425,6 +1001,7 @@ function renderStandardGroups(
   keyPrefix: string,
   now: number,
   onCancelTool?: (toolId: string) => void,
+  animate?: boolean,
 ) {
   return groups.map((g, gi) => {
     if (g.type === 'thinking') {
@@ -432,14 +1009,56 @@ function renderStandardGroups(
       return <ThinkingBlock key={`${keyPrefix}-thinking-${gi}`} thinking={text} />;
     }
     if (g.type === 'tool') {
-      const tools = g.entries.map(e => e.tool!).filter(Boolean);
-      return <ToolList key={`${keyPrefix}-tool-${gi}`} tools={tools} now={now} onCancelTool={onCancelTool} />;
+      const rendered: React.ReactNode[] = [];
+      let regularBuf: RemoteToolStatus[] = [];
+      let readBuf: RemoteToolStatus[] = [];
+
+      const flushRead = () => {
+        if (readBuf.length > 0) {
+          rendered.push(
+            <ReadFilesToggle key={`${keyPrefix}-read-${gi}-${rendered.length}`} tools={readBuf} />,
+          );
+          readBuf = [];
+        }
+      };
+
+      const flushRegular = () => {
+        if (regularBuf.length > 0) {
+          rendered.push(
+            <ToolList key={`${keyPrefix}-tl-${gi}-${rendered.length}`} tools={regularBuf} now={now} onCancelTool={onCancelTool} />,
+          );
+          regularBuf = [];
+        }
+      };
+
+      const flushAll = () => { flushRead(); flushRegular(); };
+
+      for (const entry of g.entries) {
+        if (entry.tool?.name === 'Task') {
+          flushAll();
+          rendered.push(
+            <TaskToolCard key={`${keyPrefix}-task-${gi}-${rendered.length}`} tool={entry.tool!} now={now} subItems={entry.subItems} onCancelTool={onCancelTool} />,
+          );
+        } else if (entry.tool?.name === 'TodoWrite') {
+          flushAll();
+          rendered.push(<TodoCard key={`${keyPrefix}-todo-${gi}-${rendered.length}`} tool={entry.tool!} />);
+        } else if (entry.tool && READ_LIKE_TOOLS.has(entry.tool.name)) {
+          flushRegular();
+          readBuf.push(entry.tool);
+        } else if (entry.tool) {
+          flushRead();
+          regularBuf.push(entry.tool);
+        }
+      }
+      flushAll();
+
+      return <React.Fragment key={`${keyPrefix}-tool-${gi}`}>{rendered}</React.Fragment>;
     }
     if (g.type === 'text') {
       const text = g.entries.map(e => e.content || '').join('');
       return text ? (
         <div key={`${keyPrefix}-text-${gi}`} className="chat-msg__assistant-content">
-          <MarkdownContent content={text} />
+          {animate ? <TypewriterText content={text} /> : <MarkdownContent content={text} />}
         </div>
       ) : null;
     }
@@ -450,11 +1069,12 @@ function renderStandardGroups(
 // ─── Ordered Items renderer ─────────────────────────────────────────────────
 
 function renderOrderedItems(
-  items: ChatMessageItem[],
+  rawItems: ChatMessageItem[],
   now: number,
   onCancelTool?: (toolId: string) => void,
   onAnswer?: (toolId: string, answers: any) => Promise<void>,
 ) {
+  const items = filterSubagentItems(rawItems);
   const askEntries = items.filter(item => isPendingAskUserQuestion(item.tool));
   if (askEntries.length === 0) {
     return renderStandardGroups(groupChatItems(items), 'ordered', now, onCancelTool);
@@ -485,19 +1105,20 @@ function renderOrderedItems(
 // ─── Active turn items renderer (with AskUserQuestion support) ─────────────
 
 function renderActiveTurnItems(
-  items: ChatMessageItem[],
+  rawItems: ChatMessageItem[],
   now: number,
   sessionMgr: RemoteSessionManager,
   setError: (e: string) => void,
   onAnswer: (toolId: string, answers: any) => Promise<void>,
 ) {
+  const items = filterSubagentItems(rawItems);
   const askEntries = items.filter(item => isPendingAskUserQuestion(item.tool));
   const onCancel = (toolId: string) => {
     sessionMgr.cancelTool(toolId, 'User cancelled').catch(err => { setError(String(err)); });
   };
 
   if (askEntries.length === 0) {
-    return renderStandardGroups(groupChatItems(items), 'active', now, onCancel);
+    return renderStandardGroups(groupChatItems(items), 'active', now, onCancel, true);
   }
 
   const beforeAskItems: ChatMessageItem[] = [];
@@ -515,9 +1136,9 @@ function renderActiveTurnItems(
 
   return (
     <>
-      {renderStandardGroups(groupChatItems(beforeAskItems), 'active-before', now, onCancel)}
+      {renderStandardGroups(groupChatItems(beforeAskItems), 'active-before', now, onCancel, true)}
       {renderQuestionEntries(askEntries, 'active', onAnswer)}
-      {renderStandardGroups(groupChatItems(afterAskItems), 'active-after', now, onCancel)}
+      {renderStandardGroups(groupChatItems(afterAskItems), 'active-after', now, onCancel, true)}
     </>
   );
 }
@@ -525,7 +1146,7 @@ function renderActiveTurnItems(
 // ─── Theme toggle icon ─────────────────────────────────────────────────────
 
 const ThemeToggleIcon: React.FC<{ isDark: boolean }> = ({ isDark }) => (
-  <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
     {isDark ? (
       <path d="M8 1.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM3 8a5 5 0 0 1 5-5v10a5 5 0 0 1-5-5Z" fill="currentColor"/>
     ) : (
@@ -546,13 +1167,14 @@ const MODE_OPTIONS: { id: AgentMode; label: string }[] = [
 
 // ─── ChatPage ───────────────────────────────────────────────────────────────
 
-const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName, onBack }) => {
+const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName, onBack, autoFocus }) => {
   const {
     getMessages,
     setMessages,
     appendNewMessages,
     activeTurn,
     setActiveTurn,
+    error,
     setError,
     currentWorkspace,
     updateSessionName,
@@ -564,15 +1186,21 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
   const [agentMode, setAgentMode] = useState<AgentMode>('agentic');
   const [liveTitle, setLiveTitle] = useState(sessionName);
   const [pendingImages, setPendingImages] = useState<{ name: string; dataUrl: string }[]>([]);
-  const [inputFocused, setInputFocused] = useState(false);
+  const [imageAnalyzing, setImageAnalyzing] = useState(false);
+  const [optimisticMsg, setOptimisticMsg] = useState<{
+    id: string; text: string; images: { name: string; data_url: string }[];
+  } | null>(null);
+  const [inputExpanded, setInputExpanded] = useState(!!autoFocus);
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const inputBarRef = useRef<HTMLDivElement>(null);
   const pollerRef = useRef<SessionPoller | null>(null);
 
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const [expandedMsgIds, setExpandedMsgIds] = useState<Set<string>>(new Set());
 
   const isStreaming = activeTurn != null && activeTurn.status === 'active';
 
@@ -592,6 +1220,12 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
     return () => clearInterval(timer);
   }, [isStreaming]);
 
+  useEffect(() => {
+    if (!error) return;
+    const t = setTimeout(() => setError(null), 5000);
+    return () => clearTimeout(t);
+  }, [error, setError]);
+
   const loadMessages = useCallback(async (beforeId?: string) => {
     if (isLoadingMore || (!hasMore && beforeId)) return;
     try {
@@ -621,14 +1255,39 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
   }, [hasMore, isLoadingMore, getMessages, sessionId, loadMessages]);
 
   // Initial load + start poller
+  const initialScrollDone = useRef(false);
   useEffect(() => {
+    initialScrollDone.current = false;
     loadMessages().then(() => {
       const initialMsgCount = useMobileStore.getState().getMessages(sessionId).length;
 
+      // Scroll to bottom after initial load — use rAF + setTimeout to ensure
+      // the DOM has finished laying out the newly rendered messages.
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          messagesEndRef.current?.scrollIntoView({ behavior: 'auto' });
+          initialScrollDone.current = true;
+          prevMsgCountRef.current = useMobileStore.getState().getMessages(sessionId).length;
+        }, 50);
+      });
+
       const poller = new SessionPoller(sessionMgr, sessionId, (resp: PollResponse) => {
         if (resp.new_messages && resp.new_messages.length > 0) {
           appendNewMessages(sessionId, resp.new_messages);
         }
+
+        // Detect count mismatch (messages inserted in the middle due to
+        // persistence race).  When the local count doesn't match the server
+        // total, do a full reload to pick up all messages.
+        if (resp.total_msg_count != null) {
+          const localCount = useMobileStore.getState().getMessages(sessionId).length;
+          if (localCount !== resp.total_msg_count) {
+            sessionMgr.getSessionMessages(sessionId, 200).then(fresh => {
+              useMobileStore.getState().setMessages(sessionId, fresh.messages);
+            }).catch(() => {});
+          }
+        }
+
         if (resp.title) {
           setLiveTitle(resp.title);
           updateSessionName(sessionId, resp.title);
@@ -647,37 +1306,80 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
     };
   }, [sessionId, sessionMgr]);
 
+  const prevMsgCountRef = useRef(0);
   useEffect(() => {
-    if (!isLoadingMore) {
-      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    if (!initialScrollDone.current) return;
+    if (messages.length !== prevMsgCountRef.current) {
+      const isNewAppend = messages.length > prevMsgCountRef.current;
+      prevMsgCountRef.current = messages.length;
+      if (isNewAppend && !isLoadingMore) {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+      }
     }
-  }, [messages, activeTurn, isLoadingMore]);
+  }, [messages.length, isLoadingMore]);
+
+  useEffect(() => {
+    if (!initialScrollDone.current || !isStreaming) return;
+    messagesEndRef.current?.scrollIntoView({ behavior: 'auto' });
+  }, [activeTurn, isStreaming]);
 
-  // Reload messages when a turn completes so the messages array
-  // contains the final persisted content instead of stale partial data.
-  const prevActiveTurnRef = useRef<ActiveTurnSnapshot | null>(null);
   useEffect(() => {
-    const prev = prevActiveTurnRef.current;
-    prevActiveTurnRef.current = activeTurn;
-    if (prev && !activeTurn) {
-      loadMessages();
+    if (optimisticMsg) {
+      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     }
-  }, [activeTurn, loadMessages]);
+  }, [optimisticMsg]);
+
+  useEffect(() => {
+    if (!initialScrollDone.current || !isStreaming) return;
+    const container = messagesContainerRef.current;
+    if (!container) return;
+    const tid = setInterval(() => {
+      const gap = container.scrollHeight - container.scrollTop - container.clientHeight;
+      if (gap > 10 && gap < 300) {
+        container.scrollTop = container.scrollHeight;
+      }
+    }, 200);
+    return () => clearInterval(tid);
+  }, [isStreaming]);
 
   const handleSend = useCallback(async () => {
     const text = input.trim();
     const imgs = pendingImages;
-    if ((!text && imgs.length === 0) || isStreaming) return;
+    if ((!text && imgs.length === 0) || isStreaming || imageAnalyzing) return;
     setInput('');
     setPendingImages([]);
+    setInputExpanded(false);
+
+    const hasImages = imgs.length > 0;
+    const imageContexts = hasImages
+      ? imgs.map((img, idx) => {
+          const mimeType = img.dataUrl.split(';')[0]?.replace('data:', '') || 'image/png';
+          return {
+            id: `mobile_img_${Date.now()}_${idx}`,
+            data_url: img.dataUrl,
+            mime_type: mimeType,
+            metadata: { name: img.name, source: 'remote' },
+          };
+        })
+      : undefined;
+
+    if (hasImages) {
+      setOptimisticMsg({
+        id: `opt_${Date.now()}`,
+        text: text || '',
+        images: imgs.map(i => ({ name: i.name, data_url: i.dataUrl })),
+      });
+      setImageAnalyzing(true);
+    }
 
     try {
-      const imagePayload = imgs.length > 0
-        ? imgs.map(i => ({ name: i.name, data_url: i.dataUrl }))
-        : undefined;
-      await sessionMgr.sendMessage(sessionId, text || '(see attached images)', agentMode, imagePayload);
+      await sessionMgr.sendMessage(sessionId, text || '(see attached images)', agentMode, imageContexts);
+      pollerRef.current?.nudge();
     } catch (e: any) {
       setError(e.message);
+    } finally {
+      setImageAnalyzing(false);
+      setOptimisticMsg(null);
     }
   }, [input, pendingImages, isStreaming, sessionId, sessionMgr, setError, agentMode]);
 
@@ -685,24 +1387,33 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
     fileInputRef.current?.click();
   }, []);
 
-  const handleFileChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files) return;
     const maxImages = 5;
     const remaining = maxImages - pendingImages.length;
     const toProcess = Array.from(files).slice(0, remaining);
 
-    toProcess.forEach((file) => {
-      const reader = new FileReader();
-      reader.onload = () => {
-        const dataUrl = reader.result as string;
+    const { compressImageFile } = await import('../services/imageCompressor');
+    for (const file of toProcess) {
+      try {
+        const compressed = await compressImageFile(file);
         setPendingImages((prev) => {
           if (prev.length >= maxImages) return prev;
-          return [...prev, { name: file.name, dataUrl }];
+          return [...prev, { name: compressed.name, dataUrl: compressed.dataUrl }];
         });
-      };
-      reader.readAsDataURL(file);
-    });
+      } catch {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const dataUrl = reader.result as string;
+          setPendingImages((prev) => {
+            if (prev.length >= maxImages) return prev;
+            return [...prev, { name: file.name, dataUrl }];
+          });
+        };
+        reader.readAsDataURL(file);
+      }
+    }
     e.target.value = '';
   }, [pendingImages.length]);
 
@@ -710,6 +1421,30 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
     setPendingImages((prev) => prev.filter((_, i) => i !== idx));
   }, []);
 
+  const expandInput = useCallback(() => {
+    setInputExpanded(true);
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, []);
+
+  useEffect(() => {
+    if (autoFocus) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [autoFocus]);
+
+  useEffect(() => {
+    if (!inputExpanded) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (inputBarRef.current && !inputBarRef.current.contains(e.target as Node)) {
+        if (!input.trim() && pendingImages.length === 0) {
+          setInputExpanded(false);
+        }
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [inputExpanded, input, pendingImages.length]);
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
@@ -730,7 +1465,7 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
   const displayName = liveTitle || sessionName || 'Session';
 
   return (
-    <div className="chat-page page-transition">
+    <div className="chat-page">
       {/* Header */}
       <div className="chat-page__header">
         <div className="chat-page__header-row">
@@ -741,6 +1476,17 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
           </button>
           <div className="chat-page__header-center">
             <span className="chat-page__title" title={displayName}>{displayName}</span>
+            {workspaceName && (
+              <div className="chat-page__header-workspace" title={currentWorkspace?.path}>
+                <span className="chat-page__workspace-name">{workspaceName}</span>
+                {gitBranch && (
+                  <span className="chat-page__workspace-branch" title={gitBranch}>
+                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
+                    {truncateMiddle(gitBranch, 28)}
+                  </span>
+                )}
+              </div>
+            )}
           </div>
           <div className="chat-page__header-right">
             <button className="chat-page__theme-btn" onClick={toggleTheme} aria-label="Toggle theme">
@@ -748,22 +1494,6 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
             </button>
           </div>
         </div>
-        {workspaceName && (
-          <div className="chat-page__header-workspace" title={currentWorkspace?.path}>
-            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
-              <path d="M2 4L8 2L14 4V12L8 14L2 12V4Z" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round"/>
-              <path d="M8 2V14" stroke="currentColor" strokeWidth="1.2"/>
-              <path d="M2 4L8 6L14 4" stroke="currentColor" strokeWidth="1.2"/>
-            </svg>
-            <span className="chat-page__workspace-name">{workspaceName}</span>
-            {gitBranch && (
-              <span className="chat-page__workspace-branch">
-                <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><circle cx="5" cy="4" r="2" stroke="currentColor" strokeWidth="1.3"/><circle cx="11" cy="4" r="2" stroke="currentColor" strokeWidth="1.3"/><circle cx="5" cy="12" r="2" stroke="currentColor" strokeWidth="1.3"/><path d="M5 6V10M11 6V8C11 9.1046 10.1046 10 9 10H5" stroke="currentColor" strokeWidth="1.3"/></svg>
-                {gitBranch}
-              </span>
-            )}
-          </div>
-        )}
       </div>
 
       {/* Messages */}
@@ -772,178 +1502,337 @@ const ChatPage: React.FC<ChatPageProps> = ({ sessionMgr, sessionId, sessionName,
           <div className="chat-page__load-more-indicator">Loading older messages…</div>
         )}
 
-        {messages.map((m, _idx) => {
-          if (m.role === 'system' || m.role === 'tool') return null;
+        {(() => {
+          // Find the last user message index to determine which assistant
+          // responses are "old" and can be collapsed.
+          const lastUserIdx = messages.reduceRight(
+            (found, m, i) => (found < 0 && m.role === 'user' ? i : found),
+            -1,
+          );
 
-          if (m.role === 'user') {
-            return (
-              <div key={m.id} className="chat-msg chat-msg--user">
-                <div className="chat-msg__user-card">
-                  <div className="chat-msg__user-avatar">U</div>
-                  <div className="chat-msg__user-content">{m.content}</div>
+          return messages.map((m, idx) => {
+            if (m.role === 'system' || m.role === 'tool') return null;
+
+            if (m.role === 'user') {
+              const userText = m.content
+                .replace(/#img:\S+\s*/g, '')
+                .replace(/\[Image:.*?\]\n(?:Path:.*?\n|Image ID:.*?\n)?/g, '')
+                .trim();
+              return (
+                <div key={m.id} className="chat-msg chat-msg--user">
+                  <div className="chat-msg__user-card">
+                    <div className="chat-msg__user-avatar">U</div>
+                    <div className="chat-msg__user-content">
+                      {userText}
+                      {m.images && m.images.length > 0 && (
+                        <div className="chat-msg__user-images">
+                          {m.images.map((img, imgIdx) => (
+                            <img
+                              key={imgIdx}
+                              src={img.data_url}
+                              alt={img.name}
+                              className="chat-msg__user-image"
+                            />
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
                 </div>
+              );
+            }
+
+            const hasItems = m.items && m.items.length > 0;
+            const hasContent = m.thinking || (m.tools && m.tools.length > 0) || m.content;
+            if (!hasItems && !hasContent) return null;
+
+            const isOldResponse = idx < lastUserIdx;
+            const isExpanded = expandedMsgIds.has(m.id);
+
+            if (isOldResponse && !isExpanded) {
+              return (
+                <div key={m.id} className="chat-msg chat-msg--assistant chat-msg--collapsed">
+                  <button
+                    className="chat-msg__response-toggle"
+                    onClick={() => setExpandedMsgIds(prev => {
+                      const next = new Set(prev);
+                      next.add(m.id);
+                      return next;
+                    })}
+                  >
+                    <span className="chat-msg__response-chevron">
+                      <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
+                        <path d="M6 4L10 8L6 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                      </svg>
+                    </span>
+                    <span className="chat-msg__response-label">Show response</span>
+                  </button>
+                </div>
+              );
+            }
+
+            return (
+              <div key={m.id} className="chat-msg chat-msg--assistant">
+                {isOldResponse && isExpanded && (
+                  <button
+                    className="chat-msg__response-toggle"
+                    onClick={() => setExpandedMsgIds(prev => {
+                      const next = new Set(prev);
+                      next.delete(m.id);
+                      return next;
+                    })}
+                  >
+                    <span className="chat-msg__response-chevron is-open">
+                      <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
+                        <path d="M6 4L10 8L6 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                      </svg>
+                    </span>
+                    <span className="chat-msg__response-label">Hide response</span>
+                  </button>
+                )}
+                {hasItems ? (
+                  renderOrderedItems(m.items!, now, undefined, handleAnswerQuestion)
+                ) : (
+                  <>
+                    {m.thinking && <ThinkingBlock thinking={m.thinking} />}
+                    {m.tools && m.tools.length > 0 && <ToolList tools={m.tools} now={now} />}
+                    {m.content && (
+                      <div className="chat-msg__assistant-content">
+                        <MarkdownContent content={m.content} />
+                      </div>
+                    )}
+                  </>
+                )}
               </div>
             );
-          }
-
-          return (
-            <div key={m.id} className="chat-msg chat-msg--assistant">
-              {m.items && m.items.length > 0 ? (
-                renderOrderedItems(m.items, now, undefined, handleAnswerQuestion)
-              ) : (
-                <>
-                  {m.thinking && <ThinkingBlock thinking={m.thinking} />}
-                  {m.tools && m.tools.length > 0 && <ToolList tools={m.tools} now={now} />}
-                  {m.content && (
-                    <div className="chat-msg__assistant-content">
-                      <MarkdownContent content={m.content} />
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
-          );
-        })}
+          });
+        })()}
 
-        {/* Active turn overlay (streaming content from poller) */}
+        {/* Active turn overlay (streaming or completed-pending-persist) */}
         {activeTurn && (() => {
-          if (activeTurn.items && activeTurn.items.length > 0) {
+          const turn = activeTurn;
+          const turnIsActive = turn.status === 'active';
+
+          if (turn.items && turn.items.length > 0) {
             return (
               <div className="chat-msg chat-msg--assistant">
-                {renderActiveTurnItems(activeTurn.items, now, sessionMgr, setError, handleAnswerQuestion)}
-                {activeTurn.status === 'active' && !activeTurn.thinking && !activeTurn.text && activeTurn.tools.length === 0 && (
+                {turnIsActive
+                  ? renderActiveTurnItems(turn.items, now, sessionMgr, setError, handleAnswerQuestion)
+                  : renderOrderedItems(turn.items, now)}
+                {turnIsActive && !turn.thinking && !turn.text && turn.tools.length === 0 && (
                   <div className="chat-msg__assistant-content"><TypingDots /></div>
                 )}
               </div>
             );
           }
 
-          const askTools = activeTurn.tools.filter(
+          const taskTools = turn.tools.filter(t => t.name === 'Task');
+          const hasRunningSubagent = taskTools.some(t => t.status === 'running');
+          const askTools = turn.tools.filter(
             t => t.name === 'AskUserQuestion' && t.status === 'running' && t.tool_input,
           );
           const askToolIds = new Set(askTools.map(t => t.id));
-          const regularTools = activeTurn.tools.filter(t => !askToolIds.has(t.id));
+          const regularTools = turn.tools.filter(t => t.name !== 'Task' && !askToolIds.has(t.id));
+          const subItemsForTask: ChatMessageItem[] = hasRunningSubagent
+            ? [
+                ...(turn.thinking ? [{ type: 'thinking' as const, content: turn.thinking }] : []),
+                ...regularTools.map(t => ({ type: 'tool' as const, tool: t })),
+              ]
+            : [];
+          const onCancel = (toolId: string) => {
+            sessionMgr.cancelTool(toolId, 'User cancelled').catch(err => { setError(String(err)); });
+          };
 
           return (
             <div className="chat-msg chat-msg--assistant">
-              {(activeTurn.thinking || activeTurn.status === 'active') && (
+              {!hasRunningSubagent && (turn.thinking || turnIsActive) && (
                 <ThinkingBlock
-                  thinking={activeTurn.thinking}
-                  streaming={activeTurn.status === 'active' && !activeTurn.thinking && !activeTurn.text}
+                  thinking={turn.thinking}
+                  streaming={turnIsActive && !turn.thinking && !turn.text}
                 />
               )}
-              <ToolList
-                tools={regularTools}
-                now={now}
-                onCancelTool={(toolId) => {
-                  sessionMgr.cancelTool(toolId, 'User cancelled').catch(err => { setError(String(err)); });
-                }}
-              />
-              {askTools.map(at => (
+              {taskTools.map(t => (
+                <TaskToolCard
+                  key={t.id}
+                  tool={t}
+                  now={now}
+                  subItems={t.status === 'running' ? subItemsForTask : undefined}
+                  onCancelTool={onCancel}
+                />
+              ))}
+              {!hasRunningSubagent && regularTools.length > 0 && (
+                <ToolList tools={regularTools} now={now} onCancelTool={onCancel} />
+              )}
+              {turnIsActive && askTools.map(at => (
                 <AskQuestionCard
                   key={at.id}
                   tool={at}
                   onAnswer={handleAnswerQuestion}
                 />
               ))}
-              {activeTurn.text ? (
+              {!hasRunningSubagent && turn.text ? (
                 <div className="chat-msg__assistant-content">
-                  <MarkdownContent content={activeTurn.text} />
+                  {turnIsActive ? <TypewriterText content={turn.text} /> : <MarkdownContent content={turn.text} />}
                 </div>
-              ) : activeTurn.status === 'active' && !activeTurn.thinking && activeTurn.tools.length === 0 ? (
+              ) : turnIsActive && !turn.thinking && turn.tools.length === 0 ? (
                 <div className="chat-msg__assistant-content"><TypingDots /></div>
               ) : null}
             </div>
           );
         })()}
 
-        <div ref={messagesEndRef} />
-      </div>
-
-      {/* Floating Input Bar */}
-      <div className={`chat-page__input-bar ${inputFocused ? 'is-focused' : ''}`}>
-        <div className="chat-page__input-toolbar">
-          <div className="chat-page__mode-selector">
-            {MODE_OPTIONS.map((opt) => (
-              <button
-                key={opt.id}
-                className={`chat-page__mode-btn${agentMode === opt.id ? ' is-active' : ''}`}
-                onClick={() => setAgentMode(opt.id)}
-                disabled={isStreaming}
-              >
-                {opt.label}
-              </button>
-            ))}
+        {/* Optimistic user message with images (shown immediately before server responds) */}
+        {optimisticMsg && (
+          <div className="chat-msg chat-msg--user">
+            <div className="chat-msg__user-card">
+              <div className="chat-msg__user-avatar">U</div>
+              <div className="chat-msg__user-content">
+                {optimisticMsg.text}
+                {optimisticMsg.images.length > 0 && (
+                  <div className="chat-msg__user-images">
+                    {optimisticMsg.images.map((img, i) => (
+                      <img key={i} src={img.data_url} alt={img.name} className="chat-msg__user-image" />
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
           </div>
-        </div>
+        )}
 
-        {pendingImages.length > 0 && (
-          <div className="chat-page__image-preview-row">
-            {pendingImages.map((img, idx) => (
-              <div key={idx} className="chat-page__image-thumb">
-                <img src={img.dataUrl} alt={img.name} />
-                <button className="chat-page__image-remove" onClick={() => removeImage(idx)}>×</button>
+        {/* Image analysis indicator */}
+        {imageAnalyzing && (
+          <div className="chat-msg chat-msg--assistant">
+            <div className="chat-msg__assistant-card">
+              <div className="chat-msg__image-analyzing">
+                <div className="chat-msg__image-analyzing-icon">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="12" cy="12" r="3"/>
+                    <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
+                  </svg>
+                </div>
+                <span>Analyzing image with image understanding model...</span>
+                <TypingDots />
               </div>
-            ))}
+            </div>
           </div>
         )}
 
-        <div className="chat-page__input-row">
-          <button
-            className="chat-page__attach-btn"
-            onClick={handleImageSelect}
-            disabled={isStreaming || pendingImages.length >= 5}
-            aria-label="Attach image"
-          >
-            <svg width="18" height="18" viewBox="0 0 20 20" fill="none">
-              <rect x="2" y="3" width="16" height="14" rx="2" stroke="currentColor" strokeWidth="1.5"/>
-              <circle cx="7" cy="8" r="1.5" stroke="currentColor" strokeWidth="1.2"/>
-              <path d="M2 14L6 10L9 13L13 9L18 14" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
-            </svg>
-          </button>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
-            multiple
-            style={{ display: 'none' }}
-            onChange={handleFileChange}
-          />
-          <textarea
-            ref={inputRef}
-            className="chat-page__input"
-            placeholder="Type a message..."
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            onFocus={() => setInputFocused(true)}
-            onBlur={() => setInputFocused(false)}
-            rows={1}
-            disabled={isStreaming}
-          />
-          {isStreaming ? (
-            <button
-              className="chat-page__send is-stop"
-              onClick={handleCancel}
-              aria-label="Stop"
-            >
-              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
-                <rect x="2" y="2" width="12" height="12" rx="2" fill="currentColor"/>
-              </svg>
-            </button>
-          ) : (
-            <button
-              className="chat-page__send"
-              onClick={handleSend}
-              disabled={!input.trim() && pendingImages.length === 0}
-            >
-              <svg width="16" height="16" viewBox="0 0 20 20" fill="none">
-                <path d="M3 10L17 3L10 17V10H3Z" fill="currentColor"/>
-              </svg>
-            </button>
-          )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Floating Input Bar — two-stage (matches desktop ChatInput) */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/png,image/jpeg,image/jpg,image/gif,image/webp"
+        multiple
+        style={{ display: 'none' }}
+        onChange={handleFileChange}
+      />
+      <div
+        className={`chat-page__input-wrap ${inputExpanded ? 'is-expanded' : ''}`}
+        ref={inputBarRef}
+      >
+        <div
+          className="chat-page__input-box"
+          onClick={!inputExpanded && !isStreaming ? expandInput : undefined}
+        >
+          {/* Input area */}
+          <div className="chat-page__input-area">
+            {inputExpanded ? (
+              <textarea
+                ref={inputRef}
+                className="chat-page__input"
+                placeholder="How can I help you..."
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                rows={1}
+                disabled={isStreaming || imageAnalyzing}
+              />
+            ) : (
+              <span className="chat-page__input-placeholder">
+                {imageAnalyzing ? 'Analyzing image...' : isStreaming ? 'BitFun is working...' : 'How can I help you...'}
+              </span>
+            )}
+          </div>
+
+          {/* Actions bar */}
+          <div className="chat-page__input-actions">
+            <div className="chat-page__input-actions-left">
+              {inputExpanded && pendingImages.length > 0 && (
+                <div className="chat-page__image-preview-row">
+                  {pendingImages.map((img, idx) => (
+                    <div key={idx} className="chat-page__image-thumb">
+                      <img src={img.dataUrl} alt={img.name} />
+                      <button className="chat-page__image-remove" onClick={() => removeImage(idx)}>×</button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className="chat-page__input-actions-right">
+              {inputExpanded && (
+                <>
+                  <button
+                    className={`chat-page__mode-pill${agentMode !== 'agentic' ? ` chat-page__mode-pill--${agentMode}` : ''}`}
+                    onClick={() => {
+                      const modes: AgentMode[] = ['agentic', 'Plan', 'debug'];
+                      const idx = modes.indexOf(agentMode);
+                      setAgentMode(modes[(idx + 1) % modes.length]);
+                    }}
+                    disabled={isStreaming}
+                  >
+                    {MODE_OPTIONS.find(m => m.id === agentMode)?.label}
+                  </button>
+                  <button
+                    className="chat-page__action-btn"
+                    onClick={handleImageSelect}
+                    disabled={isStreaming || pendingImages.length >= 5}
+                    aria-label="Attach image"
+                  >
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                      <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
+                      <circle cx="9" cy="9" r="2"/>
+                      <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
+                    </svg>
+                  </button>
+                </>
+              )}
+              {isStreaming || imageAnalyzing ? (
+                <button className="chat-page__send-btn is-stop" onClick={imageAnalyzing ? undefined : handleCancel} aria-label="Stop" disabled={imageAnalyzing}>
+                  {imageAnalyzing ? (
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ animation: 'analyzeSpin 2s linear infinite' }}>
+                      <circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2"/>
+                    </svg>
+                  ) : (
+                    <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
+                      <rect x="3" y="3" width="10" height="10" rx="2" fill="currentColor"/>
+                    </svg>
+                  )}
+                </button>
+              ) : (
+                <button
+                  className="chat-page__send-btn"
+                  onClick={inputExpanded ? handleSend : undefined}
+                  disabled={!input.trim() && pendingImages.length === 0}
+                >
+                  <svg width="12" height="12" viewBox="0 0 20 20" fill="none">
+                    <path d="M10 3L10 17M10 3L5 8M10 3L15 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </button>
+              )}
+            </div>
+          </div>
         </div>
       </div>
+
+      {error && (
+        <div className="chat-page__toast" onClick={() => setError(null)}>
+          {error}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/mobile-web/src/pages/SessionListPage.tsx b/src/mobile-web/src/pages/SessionListPage.tsx
index d9b26059..85e54590 100644
--- a/src/mobile-web/src/pages/SessionListPage.tsx
+++ b/src/mobile-web/src/pages/SessionListPage.tsx
@@ -2,12 +2,13 @@ import React, { useEffect, useRef, useCallback, useState } from 'react';
 import { RemoteSessionManager } from '../services/RemoteSessionManager';
 import { useMobileStore } from '../services/store';
 import { useTheme } from '../theme';
+import logoIcon from '../assets/Logo-ICON.png';
 
 const PAGE_SIZE = 30;
 
 interface SessionListPageProps {
   sessionMgr: RemoteSessionManager;
-  onSelectSession: (sessionId: string, sessionName?: string) => void;
+  onSelectSession: (sessionId: string, sessionName?: string, isNew?: boolean) => void;
   onOpenWorkspace: () => void;
 }
 
@@ -40,6 +41,37 @@ function agentLabel(agentType: string): string {
   }
 }
 
+function isCoworkAgent(agentType: string): boolean {
+  return agentType === 'cowork' || agentType === 'Cowork';
+}
+
+function truncateMiddle(str: string, maxLen: number): string {
+  if (!str || str.length <= maxLen) return str;
+  const keep = maxLen - 3;
+  const head = Math.ceil(keep * 0.6);
+  const tail = keep - head;
+  return str.slice(0, head) + '...' + str.slice(-tail);
+}
+
+function SessionTypeIcon({ agentType }: { agentType: string }) {
+  if (isCoworkAgent(agentType)) {
+    return (
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+        <circle cx="9" cy="7" r="4" />
+        <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
 const ThemeToggleIcon: React.FC<{ isDark: boolean }> = ({ isDark }) => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
     {isDark ? (
@@ -57,9 +89,13 @@ const SessionListPage: React.FC<SessionListPageProps> = ({ sessionMgr, onSelectS
   const [loading, setLoading] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [hasMore, setHasMore] = useState(false);
-  const [showNewMenu, setShowNewMenu] = useState(false);
+  
+  const [pullDistance, setPullDistance] = useState(0);
+  const [refreshing, setRefreshing] = useState(false);
   const offsetRef = useRef(0);
   const listRef = useRef<HTMLDivElement>(null);
+  const touchStartY = useRef(0);
+  const isPulling = useRef(false);
 
   const loadFirstPage = useCallback(async (workspacePath: string | undefined) => {
     setLoading(true);
@@ -109,6 +145,55 @@ const SessionListPage: React.FC<SessionListPageProps> = ({ sessionMgr, onSelectS
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const refreshData = useCallback(async () => {
+    try {
+      const info = await sessionMgr.getWorkspaceInfo();
+      const ws = info.has_workspace ? info : null;
+      setCurrentWorkspace(ws);
+      const resp = await sessionMgr.listSessions(ws?.path, PAGE_SIZE, 0);
+      setSessions(resp.sessions);
+      setHasMore(resp.has_more);
+      offsetRef.current = resp.sessions.length;
+    } catch { /* ignore */ }
+  }, [sessionMgr, setSessions, setCurrentWorkspace]);
+
+  useEffect(() => {
+    const poll = setInterval(refreshData, 10000);
+    return () => clearInterval(poll);
+  }, [refreshData]);
+
+  const PULL_THRESHOLD = 60;
+
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
+    const el = listRef.current;
+    if (!el || el.scrollTop > 0 || refreshing) return;
+    touchStartY.current = e.touches[0].clientY;
+    isPulling.current = true;
+  }, [refreshing]);
+
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
+    if (!isPulling.current) return;
+    const delta = e.touches[0].clientY - touchStartY.current;
+    if (delta > 0) {
+      setPullDistance(Math.min(delta * 0.5, 80));
+    } else {
+      isPulling.current = false;
+      setPullDistance(0);
+    }
+  }, []);
+
+  const handleTouchEnd = useCallback(async () => {
+    if (!isPulling.current) return;
+    isPulling.current = false;
+    if (pullDistance >= PULL_THRESHOLD) {
+      setRefreshing(true);
+      setPullDistance(PULL_THRESHOLD);
+      await refreshData();
+      setRefreshing(false);
+    }
+    setPullDistance(0);
+  }, [pullDistance, refreshData]);
+
   const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
     const el = e.currentTarget;
     if (el.scrollHeight - el.scrollTop - el.clientHeight < 150) {
@@ -116,26 +201,14 @@ const SessionListPage: React.FC<SessionListPageProps> = ({ sessionMgr, onSelectS
     }
   }, [currentWorkspace?.path, loadNextPage]);
 
-  const handleRefresh = async () => {
-    try {
-      const info = await sessionMgr.getWorkspaceInfo();
-      const ws = info.has_workspace ? info : null;
-      setCurrentWorkspace(ws);
-      await loadFirstPage(ws?.path);
-    } catch (e: any) {
-      setError(e.message);
-    }
-  };
-
   const handleCreate = async (agentType: string) => {
     if (creating) return;
     setCreating(true);
-    setShowNewMenu(false);
     try {
       const id = await sessionMgr.createSession(agentType, undefined, currentWorkspace?.path);
       await loadFirstPage(currentWorkspace?.path);
       const label = agentType === 'cowork' || agentType === 'Cowork' ? 'Remote Cowork Session' : 'Remote Code Session';
-      onSelectSession(id, label);
+      onSelectSession(id, label, true);
     } catch (e: any) {
       setError(e.message);
     } finally {
@@ -143,87 +216,155 @@ const SessionListPage: React.FC<SessionListPageProps> = ({ sessionMgr, onSelectS
     }
   };
 
+  const workspaceDisplayName = currentWorkspace?.project_name || 'No workspace selected';
   return (
-    <div className="session-list page-transition">
+    <div className="session-list">
       <div className="session-list__header">
-        <h1>BitFun Remote</h1>
+        <div className="session-list__header-brand">
+          <img src={logoIcon} alt="BitFun" className="session-list__logo" />
+          <div className="session-list__header-copy">
+            <span className="session-list__header-kicker">Remote cockpit</span>
+            <h1>BitFun Remote</h1>
+          </div>
+        </div>
         <div className="session-list__header-actions">
           <button className="session-list__theme-btn" onClick={toggleTheme} aria-label="Toggle theme">
             <ThemeToggleIcon isDark={isDark} />
           </button>
-          <div className="session-list__new-wrapper">
-            <button
-              className="session-list__new-btn"
-              onClick={() => setShowNewMenu(!showNewMenu)}
-              disabled={creating}
-              style={{ opacity: creating ? 0.5 : 1 }}
-            >
-              {creating ? '...' : '+ New'}
-            </button>
-            {showNewMenu && (
-              <div className="session-list__new-menu">
-                <button className="session-list__menu-item" onClick={() => handleCreate('code')}>
-                  <span className="session-list__menu-icon">{'</>'}</span>
-                  Code Session
-                </button>
-                <button className="session-list__menu-item" onClick={() => handleCreate('cowork')}>
-                  <span className="session-list__menu-icon">{'<>'}</span>
-                  Cowork Session
-                </button>
-              </div>
-            )}
-          </div>
         </div>
       </div>
 
       <div className="session-list__workspace-bar" onClick={onOpenWorkspace}>
         <span className="session-list__workspace-icon">
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 4V12C2 12.5523 2.44772 13 3 13H13C13.5523 13 14 12.5523 14 12V6C14 5.44772 13.5523 5 13 5H8L6.5 3H3C2.44772 3 2 3.44772 2 4Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/></svg>
-        </span>
-        <span className="session-list__workspace-name">
-          {currentWorkspace?.project_name || currentWorkspace?.path || 'No workspace'}
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+            <path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2"/>
+          </svg>
         </span>
+        <div className="session-list__workspace-copy">
+          <span className="session-list__workspace-label">Workspace</span>
+          <span className="session-list__workspace-name" title={workspaceDisplayName}>{truncateMiddle(workspaceDisplayName, 24)}</span>
+        </div>
         {currentWorkspace?.git_branch && (
           <span className="session-list__workspace-branch">
-            <svg width="10" height="10" viewBox="0 0 16 16" fill="none"><circle cx="5" cy="4" r="2" stroke="currentColor" strokeWidth="1.3"/><circle cx="11" cy="4" r="2" stroke="currentColor" strokeWidth="1.3"/><circle cx="5" cy="12" r="2" stroke="currentColor" strokeWidth="1.3"/><path d="M5 6V10M11 6V8C11 9.1046 10.1046 10 9 10H5" stroke="currentColor" strokeWidth="1.3"/></svg>
-            {currentWorkspace.git_branch}
+            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
+            {truncateMiddle(currentWorkspace.git_branch, 20)}
           </span>
         )}
-        <span className="session-list__workspace-switch">Switch ›</span>
+        <span className="session-list__workspace-switch" aria-label="Switch workspace">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+        </span>
       </div>
 
-      <div className="session-list__items" ref={listRef} onScroll={handleScroll}>
-        {loading && sessions.length === 0 && (
-          <div className="session-list__empty">Loading sessions...</div>
-        )}
-        {!loading && sessions.length === 0 && (
-          <div className="session-list__empty">No sessions yet. Create one to get started.</div>
-        )}
-        {sessions.map((s) => (
+      <div
+        className="session-list__items"
+        ref={listRef}
+        onScroll={handleScroll}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        {(pullDistance > 0 || refreshing) && (
           <div
-            key={s.session_id}
-            className="session-list__item"
-            onClick={() => onSelectSession(s.session_id, s.name)}
+            className="session-list__pull-indicator"
+            style={{ height: refreshing ? PULL_THRESHOLD : pullDistance }}
           >
-            <div className="session-list__item-top">
-              <div className="session-list__item-name">{s.name || 'Untitled Session'}</div>
-              <span className={`session-list__agent-badge session-list__agent-badge--${s.agent_type}`}>
-                {agentLabel(s.agent_type)}
-              </span>
-            </div>
-            <div className="session-list__item-meta">
-              <span className="session-list__item-time">{formatTime(s.updated_at)}</span>
+            <div className={`session-list__pull-spinner${refreshing || pullDistance >= PULL_THRESHOLD ? ' is-active' : ''}`}>
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
+                style={{ transform: `rotate(${pullDistance * 4}deg)`, transition: refreshing ? 'transform 0s' : undefined }}>
+                <path d="M9 2V5M9 13V16M2 9H5M13 9H16M4.22 4.22L6.34 6.34M11.66 11.66L13.78 13.78M13.78 4.22L11.66 6.34M6.34 11.66L4.22 13.78"
+                  stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+              </svg>
             </div>
           </div>
-        ))}
-        {loadingMore && (
-          <div className="session-list__load-more">Loading more...</div>
         )}
+        <section className="session-list__panel">
+          <div className="session-list__section-head">
+            <div>
+              <div className="session-list__section-kicker">Launch</div>
+              <div className="session-list__section-title">Start a new remote flow</div>
+            </div>
+          </div>
+          <div className="session-list__create-row">
+            <button
+              className="session-list__create-btn session-list__create-btn--code"
+              onClick={() => handleCreate('code')}
+              disabled={creating}
+            >
+              <div className="session-list__create-icon">
+                <SessionTypeIcon agentType="code" />
+              </div>
+              <div className="session-list__create-copy">
+                <span className="session-list__create-title">Code Session</span>
+                <span className="session-list__create-desc">For coding anywhere, anytime.</span>
+              </div>
+              <span className="session-list__create-arrow">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+              </span>
+            </button>
+            <button
+              className="session-list__create-btn session-list__create-btn--cowork"
+              onClick={() => handleCreate('cowork')}
+              disabled={creating}
+            >
+              <div className="session-list__create-icon">
+                <SessionTypeIcon agentType="cowork" />
+              </div>
+              <div className="session-list__create-copy">
+                <span className="session-list__create-title">Cowork Session</span>
+                <span className="session-list__create-desc">For assisting with everyday work.</span>
+              </div>
+              <span className="session-list__create-arrow">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+              </span>
+            </button>
+          </div>
+        </section>
+
+        <section className="session-list__panel session-list__panel--sessions">
+          <div className="session-list__section-head">
+            <div>
+              <div className="session-list__section-kicker">Recent</div>
+              <div className="session-list__section-title">Session history</div>
+            </div>
+            <div className="session-list__section-meta">{sessions.length} items</div>
+          </div>
+
+          {loading && sessions.length === 0 && (
+            <div className="session-list__empty">Loading sessions...</div>
+          )}
+          {!loading && sessions.length === 0 && (
+            <div className="session-list__empty">No sessions yet. Create one to get started.</div>
+          )}
+
+          <div className="session-list__cards">
+            {sessions.map((s) => (
+              <div
+                key={s.session_id}
+                className="session-list__item"
+                onClick={() => onSelectSession(s.session_id, s.name)}
+              >
+                <div className={`session-list__item-icon session-list__item-icon--${s.agent_type}`}>
+                  <SessionTypeIcon agentType={s.agent_type} />
+                </div>
+                <div className="session-list__item-body">
+                  <div className="session-list__item-top">
+                    <div className="session-list__item-name">{s.name || 'Untitled Session'}</div>
+                    <span className={`session-list__agent-badge session-list__agent-badge--${s.agent_type}`}>
+                      {agentLabel(s.agent_type)}
+                    </span>
+                  </div>
+                  <div className="session-list__item-time">{formatTime(s.updated_at)}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {loadingMore && (
+            <div className="session-list__load-more">Loading more...</div>
+          )}
+        </section>
       </div>
 
-      <button className="session-list__refresh" onClick={handleRefresh} disabled={loading || loadingMore}>
-        {loading ? 'Refreshing...' : 'Refresh'}
-      </button>
     </div>
   );
 };
diff --git a/src/mobile-web/src/pages/WorkspacePage.tsx b/src/mobile-web/src/pages/WorkspacePage.tsx
index dc072bff..2974eeab 100644
--- a/src/mobile-web/src/pages/WorkspacePage.tsx
+++ b/src/mobile-web/src/pages/WorkspacePage.tsx
@@ -68,7 +68,7 @@ const WorkspacePage: React.FC<WorkspacePageProps> = ({ sessionMgr, onReady }) =>
 
   if (loading) {
     return (
-      <div className="workspace-page page-transition">
+      <div className="workspace-page">
         <div className="workspace-page__loading">
           <div className="spinner" />
           <span>Loading workspace info...</span>
@@ -78,7 +78,7 @@ const WorkspacePage: React.FC<WorkspacePageProps> = ({ sessionMgr, onReady }) =>
   }
 
   return (
-    <div className="workspace-page page-transition">
+    <div className="workspace-page">
       <div className="workspace-page__header">
         <h1>Workspace</h1>
       </div>
diff --git a/src/mobile-web/src/services/RelayHttpClient.ts b/src/mobile-web/src/services/RelayHttpClient.ts
index 869d722a..860eca47 100644
--- a/src/mobile-web/src/services/RelayHttpClient.ts
+++ b/src/mobile-web/src/services/RelayHttpClient.ts
@@ -111,12 +111,14 @@ export class RelayHttpClient {
       plaintext,
     );
 
+    const body = JSON.stringify({ encrypted_data: encData, nonce: encNonce });
+
     const resp = await fetch(
       `${this.relayUrl}/api/rooms/${this.roomId}/command`,
       {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ encrypted_data: encData, nonce: encNonce }),
+        body,
       },
     );
 
diff --git a/src/mobile-web/src/services/RemoteSessionManager.ts b/src/mobile-web/src/services/RemoteSessionManager.ts
index f5e0f740..a4604754 100644
--- a/src/mobile-web/src/services/RemoteSessionManager.ts
+++ b/src/mobile-web/src/services/RemoteSessionManager.ts
@@ -38,6 +38,13 @@ export interface ChatMessageItem {
   type: 'text' | 'tool' | 'thinking';
   content?: string;
   tool?: RemoteToolStatus;
+  is_subagent?: boolean;
+  subItems?: ChatMessageItem[];
+}
+
+export interface ChatImageAttachment {
+  name: string;
+  data_url: string;
 }
 
 export interface ChatMessage {
@@ -49,6 +56,7 @@ export interface ChatMessage {
   tools?: RemoteToolStatus[];
   thinking?: string;
   items?: ChatMessageItem[];
+  images?: ChatImageAttachment[];
 }
 
 export interface ActiveTurnSnapshot {
@@ -200,14 +208,20 @@ export class RemoteSessionManager {
     sessionId: string,
     content: string,
     agentType?: string,
-    images?: { name: string; data_url: string }[],
+    imageContexts?: Array<{
+      id: string;
+      image_path?: string;
+      data_url?: string;
+      mime_type: string;
+      metadata?: Record<string, unknown>;
+    }>,
   ): Promise<string> {
     const resp = await this.request<{ resp: string; turn_id: string }>({
       cmd: 'send_message',
       session_id: sessionId,
       content,
       agent_type: agentType || undefined,
-      images: images && images.length > 0 ? images : undefined,
+      image_contexts: imageContexts && imageContexts.length > 0 ? imageContexts : undefined,
     });
     return resp.turn_id;
   }
@@ -265,6 +279,7 @@ export class SessionPoller {
   private onUpdate: (state: PollResponse) => void;
   private polling = false;
   private stopped = false;
+  private hasActiveTurn = false;
 
   constructor(
     sessionMgr: RemoteSessionManager,
@@ -279,7 +294,7 @@ export class SessionPoller {
   start(initialMsgCount = 0) {
     this.stopped = false;
     this.knownMsgCount = initialMsgCount;
-    this.scheduleNext();
+    this.tick();
     document.addEventListener('visibilitychange', this.onVisibilityChange);
   }
 
@@ -297,11 +312,22 @@ export class SessionPoller {
     this.knownMsgCount = 0;
   }
 
+  /** Call after sending a message to immediately switch to fast polling. */
+  nudge() {
+    this.hasActiveTurn = true;
+    if (this.intervalId !== null) clearTimeout(this.intervalId);
+    this.tick();
+  }
+
+  private getInterval(): number {
+    if (document.visibilityState !== 'visible') return 5000;
+    return this.hasActiveTurn ? 1000 : 10000;
+  }
+
   private scheduleNext() {
     if (this.stopped) return;
     if (this.intervalId !== null) clearTimeout(this.intervalId);
-    const interval = document.visibilityState === 'visible' ? 1000 : 5000;
-    this.intervalId = setTimeout(() => this.tick(), interval);
+    this.intervalId = setTimeout(() => this.tick(), this.getInterval());
   }
 
   private onVisibilityChange = () => {
@@ -326,6 +352,12 @@ export class SessionPoller {
         this.sinceVersion,
         this.knownMsgCount,
       );
+      // Only update hasActiveTurn from responses that carry actual data.
+      // When changed=false the backend omits active_turn, so we must
+      // preserve the previous value to keep 1-second fast polling alive.
+      if (resp.changed) {
+        this.hasActiveTurn = resp.active_turn != null && resp.active_turn.status === 'active';
+      }
       if (resp.changed) {
         this.sinceVersion = resp.version;
         if (resp.total_msg_count != null) {
diff --git a/src/mobile-web/src/services/imageCompressor.ts b/src/mobile-web/src/services/imageCompressor.ts
new file mode 100644
index 00000000..ce07eb50
--- /dev/null
+++ b/src/mobile-web/src/services/imageCompressor.ts
@@ -0,0 +1,81 @@
+const MAX_DIMENSION = 1920;
+const JPEG_QUALITY = 0.8;
+const MAX_OUTPUT_BYTES = 1024 * 1024;
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+function dataUrlByteSize(dataUrl: string): number {
+  const base64 = dataUrl.split(',')[1];
+  if (!base64) return 0;
+  return Math.ceil((base64.length * 3) / 4);
+}
+
+/**
+ * Compress an image data-URL so it stays within size/resolution limits.
+ * Returns a (possibly re-encoded) data-URL and the original file name.
+ */
+export async function compressImageDataUrl(
+  dataUrl: string,
+  fileName: string,
+): Promise<{ dataUrl: string; name: string }> {
+  if (dataUrlByteSize(dataUrl) <= MAX_OUTPUT_BYTES) {
+    return { dataUrl, name: fileName };
+  }
+
+  const img = await loadImage(dataUrl);
+  let { width, height } = img;
+
+  if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
+    const scale = MAX_DIMENSION / Math.max(width, height);
+    width = Math.round(width * scale);
+    height = Math.round(height * scale);
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d')!;
+  ctx.drawImage(img, 0, 0, width, height);
+
+  let quality = JPEG_QUALITY;
+  let result = canvas.toDataURL('image/jpeg', quality);
+
+  while (dataUrlByteSize(result) > MAX_OUTPUT_BYTES && quality > 0.3) {
+    quality -= 0.1;
+    result = canvas.toDataURL('image/jpeg', quality);
+  }
+
+  if (dataUrlByteSize(result) > MAX_OUTPUT_BYTES) {
+    const scale = 0.75;
+    canvas.width = Math.round(width * scale);
+    canvas.height = Math.round(height * scale);
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    result = canvas.toDataURL('image/jpeg', 0.6);
+  }
+
+  const ext = fileName.replace(/\.[^.]+$/, '');
+  return { dataUrl: result, name: `${ext}.jpg` };
+}
+
+/**
+ * Read a File as data-URL, compress if needed, return { name, dataUrl }.
+ */
+export async function compressImageFile(
+  file: File,
+): Promise<{ name: string; dataUrl: string }> {
+  const raw = await new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+
+  return compressImageDataUrl(raw, file.name);
+}
diff --git a/src/mobile-web/src/services/store.ts b/src/mobile-web/src/services/store.ts
index f136885c..9e0610b7 100644
--- a/src/mobile-web/src/services/store.ts
+++ b/src/mobile-web/src/services/store.ts
@@ -68,10 +68,13 @@ export const useMobileStore = create<MobileStore>((set, get) => ({
     set((s) => {
       if (messages.length === 0) return s;
       const prev = s.messagesBySession[sessionId] || [];
+      const existingIds = new Set(prev.map((m) => m.id));
+      const unique = messages.filter((m) => !existingIds.has(m.id));
+      if (unique.length === 0) return s;
       return {
         messagesBySession: {
           ...s.messagesBySession,
-          [sessionId]: [...prev, ...messages],
+          [sessionId]: [...prev, ...unique],
         },
       };
     }),
diff --git a/src/mobile-web/src/styles/components/chat-input.scss b/src/mobile-web/src/styles/components/chat-input.scss
index 72c5b47d..b1c73b23 100644
--- a/src/mobile-web/src/styles/components/chat-input.scss
+++ b/src/mobile-web/src/styles/components/chat-input.scss
@@ -1,99 +1,291 @@
-// Chat input — floating centered, glassmorphism, aligned with desktop ChatInput
-.chat-page__input-bar {
+// ── Chat input — matches desktop ChatInput visual language ───────────────────
+
+.chat-page__input-wrap {
   position: fixed;
-  bottom: var(--size-gap-4);
+  bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
-  width: calc(100vw - var(--size-gap-8));
+  width: 100%;
   max-width: 700px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-gap-1);
   z-index: 20;
+  display: flex;
+  justify-content: center;
+  padding: 0 8px;
+  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
-  background: color-mix(in srgb, var(--color-bg-elevated) 80%, transparent);
-  backdrop-filter: var(--blur-strong);
-  -webkit-backdrop-filter: var(--blur-strong);
-  border: 1px solid var(--border-base);
-  border-radius: var(--size-radius-lg);
-  padding: var(--size-gap-2) var(--size-gap-3);
-  box-shadow: var(--shadow-xl);
-  transition: border-color var(--motion-fast) var(--easing-standard),
-              box-shadow var(--motion-fast) var(--easing-standard);
+  &:not(.is-expanded) {
+    max-width: 480px;
+
+    .chat-page__input-box {
+      min-height: 42px;
+      max-height: 42px;
+      padding: 0 8px 0 20px;
+      border-radius: 21px;
+      border: 1px solid var(--border-subtle);
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      box-shadow: var(--shadow-lg);
+
+      &:active {
+        background: var(--color-bg-elevated);
+        box-shadow: var(--shadow-xl);
+        transform: translateY(-1px);
+      }
+    }
+
+    .chat-page__input-area {
+      flex: 1;
+      min-height: auto;
+    }
+
+    .chat-page__input-actions-left { display: none; }
+
+    .chat-page__input-actions {
+      flex-shrink: 0;
+      padding: 0;
+      height: auto;
+    }
+
+    .chat-page__action-btn { display: none; }
+    .chat-page__mode-pill { display: none; }
 
-  &.is-focused {
-    border-color: var(--color-accent-400);
-    box-shadow: var(--shadow-xl),
-      0 0 0 1px var(--color-accent-300);
+    .chat-page__send-btn {
+      width: 24px;
+      height: 24px;
+      opacity: 0.35;
+    }
   }
+
+  &.is-expanded {
+    .chat-page__input-box {
+      border-radius: 12px;
+      padding: 12px 8px 0;
+      border: 1px solid var(--border-base);
+      flex-direction: column;
+      gap: 0;
+    }
+  }
+}
+
+.chat-page__input-box {
+  position: relative;
+  width: 100%;
+  display: flex;
+  pointer-events: auto;
+  background: var(--color-bg-tertiary);
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+  transition: border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+              background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--shadow-xl);
 }
 
-// Mode selector toolbar
-.chat-page__input-toolbar {
+// ── Input area ───────────────────────────────────────────────────────────────
+
+.chat-page__input-area {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-height: 40px;
+}
+
+.chat-page__input {
+  width: 100%;
+  background: transparent;
+  border: none;
+  color: var(--color-text-primary);
+  font-size: 14px;
+  padding: 0;
+  padding-right: 28px;
+  resize: none;
+  min-height: 36px;
+  max-height: 120px;
+  outline: none;
+  font-family: var(--font-family-sans);
+  line-height: 1.5;
+
+  &::placeholder { color: var(--color-text-primary); opacity: 0.6; }
+  &:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
+}
+
+.chat-page__input-placeholder {
+  font-size: 14px;
+  color: var(--color-text-primary);
+  opacity: 0.6;
+  line-height: 24px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// ── Actions bar (bottom row) ─────────────────────────────────────────────────
+
+.chat-page__input-actions {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 24px;
+  padding: 0 0 12px;
+}
+
+.chat-page__input-actions-left {
   display: flex;
   align-items: center;
-  padding-bottom: var(--size-gap-1);
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
 }
 
-.chat-page__mode-selector {
+.chat-page__input-actions-right {
   display: flex;
-  background: var(--element-bg-subtle);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--size-radius-sm);
-  padding: 2px;
-  gap: 2px;
+  align-items: flex-end;
+  gap: 6px;
+  flex-shrink: 0;
 }
 
-.chat-page__mode-btn {
-  background: none;
+// ── Mode pill button (desktop style) ─────────────────────────────────────────
+
+.chat-page__mode-pill {
+  height: 24px;
+  padding: 0 10px;
+  border-radius: 12px;
   border: none;
-  border-radius: 4px;
-  padding: 3px var(--size-gap-2);
-  font-size: 11px;
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-muted);
+  background: var(--element-bg-subtle);
+  color: var(--color-text-secondary);
+  font-size: 9px;
+  font-weight: 400;
   cursor: pointer;
-  transition: all var(--motion-fast) var(--easing-standard);
+  transition: all 0.2s ease;
+  outline: none;
   white-space: nowrap;
+  letter-spacing: 0.3px;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
 
-  &.is-active {
-    background: var(--color-accent-500);
-    color: #fff;
+  &:active {
+    background: var(--element-bg-medium, var(--element-bg-soft));
+    color: var(--color-text-primary);
+  }
+
+  &:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  &--Plan {
+    background: rgba(6, 182, 212, 0.15);
+  }
+
+  &--debug {
+    background: rgba(249, 115, 22, 0.15);
   }
+}
+
+// ── Action buttons (image, etc.) — desktop circle style ──────────────────────
+
+.chat-page__action-btn {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
 
-  &:not(.is-active):active {
+  &:active:not(:disabled) {
     background: var(--element-bg-soft);
+    color: var(--color-text-primary);
+  }
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
+}
+
+// ── Send / Stop button ──────────────────────────────────────────────────────
+
+.chat-page__send-btn {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid var(--color-accent-300);
+  background: var(--color-accent-200);
+  color: var(--color-accent-300);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+
+  &:not(:disabled) {
+    background: var(--color-accent-500);
+    border: 1px solid var(--color-accent-600);
+    color: white;
+    box-shadow: var(--shadow-sm);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.92);
   }
 
   &:disabled {
-    opacity: var(--opacity-disabled);
-    cursor: not-allowed;
+    background: var(--color-accent-100);
+    border-color: var(--color-accent-200);
+    color: var(--color-accent-400);
+    opacity: 0.35;
+    cursor: default;
+    box-shadow: none;
+  }
+
+  &.is-stop {
+    background: var(--color-error) !important;
+    border-color: var(--color-error) !important;
+    color: white !important;
+    opacity: 1 !important;
+    box-shadow: var(--shadow-sm);
+
+    &:active { transform: scale(0.92); }
   }
 }
 
-// Image previews
+// ── Image previews ───────────────────────────────────────────────────────────
+
 .chat-page__image-preview-row {
   display: flex;
-  gap: var(--size-gap-2);
-  padding: var(--size-gap-1) 0;
+  gap: 8px;
+  padding: 0;
+  min-width: 0;
+  max-width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 .chat-page__image-thumb {
   position: relative;
-  width: 48px;
-  height: 48px;
-  border-radius: var(--size-radius-sm);
+  width: 46px;
+  height: 46px;
+  border-radius: 6px;
   overflow: hidden;
   flex-shrink: 0;
-  border: 1px solid var(--border-base);
+  border: 1px solid var(--border-subtle);
 
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+  img { width: 100%; height: 100%; object-fit: cover; }
 }
 
 .chat-page__image-remove {
@@ -115,89 +307,8 @@
   padding: 0;
 }
 
-// Input row
-.chat-page__input-row {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--size-gap-2);
-}
-
-.chat-page__attach-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
-  width: 32px;
-  height: 36px;
-  cursor: pointer;
-  flex-shrink: 0;
-  padding: 0;
-  transition: color var(--motion-fast) var(--easing-standard);
-  border-radius: var(--size-radius-sm);
-
-  &:active:not(:disabled) {
-    color: var(--color-accent-500);
-    background: var(--element-bg-subtle);
-  }
-  &:disabled { opacity: 0.4; cursor: not-allowed; }
-}
-
-.chat-page__input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-  padding: var(--size-gap-2) 0;
-  resize: none;
-  min-height: 36px;
-  max-height: 120px;
-  outline: none;
-  font-family: var(--font-family-sans);
-  line-height: var(--line-height-base);
-
-  &::placeholder {
-    color: var(--color-text-disabled);
-  }
-
-  &:disabled {
-    opacity: var(--opacity-disabled);
-    cursor: not-allowed;
-  }
-}
-
-.chat-page__send {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-accent-500);
-  color: #fff;
-  border: none;
-  border-radius: var(--size-radius-base);
-  width: 36px;
-  height: 36px;
-  cursor: pointer;
-  transition: all var(--motion-fast) var(--easing-standard);
-  flex-shrink: 0;
-
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-
-  &:active:not(:disabled) { opacity: 0.8; }
-
-  &.is-stop {
-    background: var(--color-error);
-    color: #fff;
-
-    &:active { opacity: 0.7; }
-  }
-}
+// ── Typing indicator dots ────────────────────────────────────────────────────
 
-// Typing indicator dots
 .chat-msg__typing {
   display: inline-flex;
   gap: 4px;
diff --git a/src/mobile-web/src/styles/components/chat.scss b/src/mobile-web/src/styles/components/chat.scss
index abc4a02b..6ece7a96 100644
--- a/src/mobile-web/src/styles/components/chat.scss
+++ b/src/mobile-web/src/styles/components/chat.scss
@@ -3,20 +3,19 @@
   flex-direction: column;
   height: 100%;
   background: var(--color-bg-flowchat);
-  animation: fadeIn var(--motion-base) var(--easing-decelerate);
 }
 
-// Header — glassmorphism
 .chat-page__header {
   display: flex;
-  flex-direction: column;
-  padding: var(--size-gap-2) var(--size-gap-3);
-  border-bottom: 1px dashed var(--border-base);
+  align-items: center;
+  gap: var(--size-gap-2);
+  padding: 0 var(--size-gap-5);
+  min-height: 56px;
+  border-bottom: 1px solid var(--border-subtle);
   flex-shrink: 0;
-  background: color-mix(in srgb, var(--color-bg-elevated) 45%, transparent);
-  backdrop-filter: var(--blur-base);
-  -webkit-backdrop-filter: var(--blur-base);
-  gap: 2px;
+  background: var(--color-bg-elevated);
+  backdrop-filter: var(--blur-medium);
+  -webkit-backdrop-filter: var(--blur-medium);
   position: relative;
   z-index: 10;
 }
@@ -25,20 +24,23 @@
   display: flex;
   align-items: center;
   gap: var(--size-gap-2);
-  min-height: 32px;
+  flex: 1;
+  min-width: 0;
 }
 
 .chat-page__back {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 32px;
+  height: 32px;
   background: none;
   border: none;
   color: var(--color-text-muted);
   cursor: pointer;
-  padding: var(--size-gap-1);
+  padding: 0;
   flex-shrink: 0;
-  border-radius: var(--size-radius-sm);
+  border-radius: 50%;
   transition: all var(--motion-fast) var(--easing-standard);
 
   &:active {
@@ -72,16 +74,17 @@
 }
 
 .chat-page__theme-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
   background: none;
   border: none;
   color: var(--color-text-muted);
   cursor: pointer;
-  border-radius: var(--size-radius-sm);
+  border-radius: 50%;
   transition: all var(--motion-fast) var(--easing-standard);
 
   &:active {
@@ -94,19 +97,12 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 0 var(--size-gap-1);
-  font-size: var(--font-size-xs);
+  font-size: 11px;
   color: var(--color-text-muted);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   justify-content: center;
-
-  svg {
-    flex-shrink: 0;
-    color: var(--color-accent-500);
-    opacity: 0.6;
-  }
 }
 
 .chat-page__workspace-name {
@@ -123,6 +119,9 @@
   font-weight: var(--font-weight-normal);
   flex-shrink: 0;
   font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
 }
 
 // Messages container
@@ -150,7 +149,7 @@
   width: 100%;
 }
 
-// User message — card style, left-aligned
+// User message — left-aligned with background
 .chat-msg--user {
   align-items: flex-start;
 }
@@ -158,31 +157,39 @@
 .chat-msg__user-card {
   display: flex;
   align-items: flex-start;
-  gap: var(--size-gap-2);
   width: 100%;
 }
 
 .chat-msg__user-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--size-radius-sm);
-  background: var(--color-accent-200);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--color-accent-500);
-  font-size: 11px;
-  font-weight: var(--font-weight-semibold);
+  display: none;
 }
 
 .chat-msg__user-content {
-  flex: 1;
+  width: 100%;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-relaxed);
   color: var(--color-text-primary);
   word-break: break-word;
-  padding-top: 2px;
+  white-space: pre-wrap;
+  padding: 8px 12px;
+  background: var(--element-bg-subtle);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--size-radius-base);
+}
+
+.chat-msg__user-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.chat-msg__user-image {
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+  object-fit: cover;
+  border: 1px solid var(--border-subtle);
 }
 
 // Assistant message — full width, no wrapper
@@ -190,3 +197,95 @@
   align-items: flex-start;
   gap: var(--size-gap-1);
 }
+
+// Collapsed older response — toggle styled like ThinkingBlock
+.chat-msg--collapsed {
+  padding: 0;
+}
+
+.chat-msg__response-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+  padding: 3px 0;
+  text-align: left;
+
+  &:active { opacity: 0.7; }
+}
+
+.chat-msg__response-chevron {
+  display: inline-flex;
+  align-items: center;
+  transition: transform var(--motion-fast) var(--easing-standard);
+
+  &.is-open {
+    transform: rotate(90deg);
+  }
+}
+
+.chat-msg__response-label {
+  color: var(--color-text-muted);
+  font-style: italic;
+  font-size: var(--font-size-xs);
+}
+
+// Image analysis indicator
+.chat-msg__image-analyzing {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  background: var(--color-bg-subtle);
+  border-radius: 10px;
+  animation: analyzeGlow 2s ease-in-out infinite;
+
+  span {
+    flex-shrink: 0;
+  }
+}
+
+.chat-msg__image-analyzing-icon {
+  display: flex;
+  align-items: center;
+  color: var(--color-primary);
+  animation: analyzeSpin 3s linear infinite;
+}
+
+@keyframes analyzeSpin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes analyzeGlow {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.chat-page__toast {
+  position: fixed;
+  top: 48px;
+  left: 16px;
+  right: 16px;
+  padding: 12px 16px;
+  border-radius: 10px;
+  background: rgba(220, 50, 50, 0.92);
+  color: #fff;
+  font-size: 13px;
+  line-height: 1.4;
+  z-index: 9999;
+  white-space: pre-line;
+  animation: toastSlideIn 0.25s ease-out;
+  backdrop-filter: blur(8px);
+}
+
+@keyframes toastSlideIn {
+  from { transform: translateY(-20px); opacity: 0; }
+  to   { transform: translateY(0);     opacity: 1; }
+}
diff --git a/src/mobile-web/src/styles/components/markdown.scss b/src/mobile-web/src/styles/components/markdown.scss
index 66864b2d..3b0633ac 100644
--- a/src/mobile-web/src/styles/components/markdown.scss
+++ b/src/mobile-web/src/styles/components/markdown.scss
@@ -1,28 +1,226 @@
-// Markdown content styling — aligned with desktop FlowChat
+// Markdown content styling — aligned with desktop Markdown.scss
 .chat-msg__assistant-content {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-relaxed);
   color: var(--color-text-primary);
-  word-break: break-word;
+  line-height: var(--line-height-relaxed);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  word-wrap: break-word;
   overflow-wrap: break-word;
+  max-width: 100%;
   width: 100%;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+
+  // ─── Spacing ────────────────────────────────────────────────────────────────
 
-  // Inline code
-  code {
+  > *:first-child { margin-top: 0 !important; }
+  > *:last-child { margin-bottom: 0 !important; }
+  > * + * { margin-top: 0.25rem; }
+
+  ul + *, ol + * { margin-top: 0.5rem; }
+  p + ul, p + ol { margin-top: 0.25rem; }
+  p + p { margin-top: 0.25rem; }
+  li + li { margin-top: 0.05rem; }
+  li > * { margin-top: 0; margin-bottom: 0.05rem; }
+  li > *:last-child { margin-bottom: 0; }
+
+  // ─── Paragraphs ─────────────────────────────────────────────────────────────
+
+  p {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    display: block;
+    line-height: 1.5;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-primary);
+    &:last-child { margin-bottom: 0; }
+
+    code { display: inline !important; }
+  }
+
+  // ─── Headings ───────────────────────────────────────────────────────────────
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family-sans);
+    color: var(--color-text-primary);
+    margin-top: 1.25rem;
+    margin-bottom: 0.6rem;
+    font-weight: var(--font-weight-semibold);
+    line-height: var(--line-height-tight);
+    letter-spacing: 0.015em;
+    &:first-child { margin-top: 0; }
+  }
+
+  h1 {
+    font-size: var(--font-size-xl);
+    margin: 1.25rem 0 0.75rem 0;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  h2 {
+    font-size: var(--font-size-lg);
+    margin: 1rem 0 0.6rem 0;
+    padding-bottom: 0.35rem;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  h3 {
+    font-size: var(--font-size-base);
+    margin: 0.85rem 0 0.5rem 0;
+  }
+
+  h4 { font-size: var(--font-size-sm); margin: 0.7rem 0 0.4rem 0; color: var(--color-text-secondary); }
+  h5 { font-size: var(--font-size-sm); margin: 0.6rem 0 0.4rem 0; color: var(--color-text-secondary); }
+  h6 { font-size: var(--font-size-xs); margin: 0.5rem 0 0.35rem 0; color: var(--color-text-muted); opacity: 0.85; }
+
+  // ─── Lists ──────────────────────────────────────────────────────────────────
+
+  ul, ol {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    padding-left: 1.5rem;
+    line-height: 1.5;
+    font-size: var(--font-size-sm);
+  }
+
+  li {
+    word-wrap: break-word;
+    margin-bottom: 0.1rem;
+    position: relative;
+    line-height: 1.5;
+    color: var(--color-text-primary);
+    &:last-child { margin-bottom: 0; }
+
+    p {
+      margin-top: 0;
+      margin-bottom: 0.1rem;
+      &:last-child { margin-bottom: 0; }
+    }
+  }
+
+  ul > li::marker { color: #888; font-size: 1.2em; font-weight: bold; }
+  ol > li::marker { color: #888; font-weight: bold; }
+
+  ul ul, ol ol, ul ol, ol ul {
+    margin-top: 0.1rem;
+    margin-bottom: 0;
+    padding-left: 1.2rem;
+  }
+
+  // ─── Inline code ────────────────────────────────────────────────────────────
+
+  .inline-code {
+    padding: 0.15em 0.35em;
+    margin: 0 0.05em;
+    font-size: 0.85em;
     background: var(--element-bg-base);
-    padding: 2px 5px;
+    border: 1px solid var(--border-subtle);
     border-radius: 4px;
-    font-size: var(--font-size-xs);
     font-family: var(--font-family-mono);
+    white-space: nowrap;
+    vertical-align: baseline;
+    line-height: 1.4;
+    color: var(--color-text-primary);
+    font-weight: 500;
   }
 
-  // Code blocks
-  pre {
-    margin: var(--size-gap-2) 0;
+  // ─── Code blocks ────────────────────────────────────────────────────────────
+
+  pre code,
+  pre > .inline-code {
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    font-size: inherit;
+    font-weight: inherit;
+    white-space: pre;
+    display: block;
+    color: inherit;
+  }
+
+  .code-block-wrapper {
+    margin: 0.5rem 0;
     border-radius: var(--size-radius-base);
+    background: var(--color-bg-primary);
+    border: 1px dashed var(--border-subtle);
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
+    position: relative;
+
+    pre[class*="language-"] {
+      margin: 0 !important;
+      border: none !important;
+      border-radius: var(--size-radius-base) !important;
+      padding: 1rem !important;
+      background: var(--color-bg-primary) !important;
+      box-shadow: none !important;
+      font-size: 0.75rem !important;
+    }
+
+    pre code {
+      font-family: var(--font-family-mono) !important;
+      background: var(--color-bg-primary) !important;
+      font-size: 0.75rem !important;
+    }
+
+    pre[style] {
+      background: var(--color-bg-primary) !important;
+      border: none !important;
+      box-shadow: none !important;
+    }
+
+    code[style] {
+      background: var(--color-bg-primary) !important;
+      border: none !important;
+    }
+  }
+
+  .copy-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    padding: 0.4rem;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    opacity: 0.6;
+    z-index: 10;
+    transition: all 0.2s ease;
+
+    &:active {
+      opacity: 1;
+      background: var(--element-bg-soft);
+    }
+
+    &.copy-success {
+      color: var(--color-success);
+      opacity: 1;
+    }
+  }
+
+  pre {
+    padding: 1rem;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    border: 1px solid var(--border-subtle);
+    font-size: 0.75rem;
+    line-height: 1.5;
+    background: var(--color-bg-primary);
+    border: 1px dashed var(--border-subtle);
+    border-radius: var(--size-radius-base);
+    margin: 0.5rem 0;
+    box-shadow: var(--shadow-sm);
+    position: relative;
 
     code {
       background: none;
@@ -31,41 +229,80 @@
     }
   }
 
-  p {
-    margin-bottom: var(--size-gap-2);
-    &:last-child { margin-bottom: 0; }
+  pre:has(.code-block-wrapper) {
+    padding: 0 !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    margin: 0.5rem 0 !important;
+    box-shadow: none !important;
+    position: static !important;
   }
 
-  ul, ol {
-    padding-left: 20px;
-    margin-bottom: var(--size-gap-2);
-    li { margin-bottom: var(--size-gap-1); }
+  // ─── Blockquote ─────────────────────────────────────────────────────────────
+
+  blockquote,
+  .custom-blockquote {
+    font-style: italic;
+    margin: 1rem 0;
+    padding: 0.75rem 1rem;
+    position: relative;
+    background: var(--color-accent-50);
+    border-left: 3px solid var(--color-accent-400);
+    border-radius: 0 var(--size-radius-sm) var(--size-radius-sm) 0;
+    color: var(--color-text-muted);
+
+    > :first-child { margin-top: 0; }
+    > :last-child { margin-bottom: 0; }
+    p { margin: 0.3rem 0; }
   }
 
-  h1, h2, h3, h4, h5, h6 {
-    color: var(--color-text-primary);
+  // ─── Tables ─────────────────────────────────────────────────────────────────
+
+  .table-wrapper {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin: 1rem 0;
+    border-radius: var(--size-radius-base);
+    border: 1px solid var(--border-subtle);
+    box-shadow: var(--shadow-sm);
+    background: var(--color-bg-primary);
+
+    table {
+      border-spacing: 0;
+      border-collapse: collapse;
+      width: 100%;
+      font-size: var(--font-size-xs);
+    }
+  }
+
+  .table-wrapper th,
+  .table-wrapper td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-subtle);
+    text-align: left;
+  }
+
+  .table-wrapper th {
     font-weight: var(--font-weight-semibold);
-    margin-top: var(--size-gap-3);
-    margin-bottom: var(--size-gap-2);
-    line-height: var(--line-height-tight);
-    &:first-child { margin-top: 0; }
+    background: var(--element-bg-subtle);
+    color: var(--color-text-primary);
+    white-space: nowrap;
   }
-  h1 { font-size: var(--font-size-xl); }
-  h2 { font-size: var(--font-size-lg); }
-  h3 { font-size: var(--font-size-base); }
-  h4, h5, h6 { font-size: var(--font-size-sm); }
 
-  blockquote {
-    border-left: 3px solid var(--color-accent-400);
-    margin: var(--size-gap-2) 0;
-    padding: var(--size-gap-2) var(--size-gap-3);
-    background: var(--color-accent-50);
-    border-radius: 0 var(--size-radius-sm) var(--size-radius-sm) 0;
-    color: var(--color-text-muted);
-    font-style: italic;
-    p { margin-bottom: 0; }
+  .table-wrapper td {
+    color: var(--color-text-primary);
   }
 
+  .table-wrapper th:first-child { border-radius: var(--size-radius-base) 0 0 0; }
+  .table-wrapper th:last-child { border-radius: 0 var(--size-radius-base) 0 0; }
+  .table-wrapper tr:last-child td:first-child { border-radius: 0 0 0 var(--size-radius-base); }
+  .table-wrapper tr:last-child td:last-child { border-radius: 0 0 var(--size-radius-base) 0; }
+  .table-wrapper tr:last-child td { border-bottom: none; }
+  .table-wrapper tbody tr:nth-child(2n) { background: var(--element-bg-subtle); }
+
+  // ─── Links ──────────────────────────────────────────────────────────────────
+
   a {
     color: var(--color-accent-500);
     text-decoration: none;
@@ -73,34 +310,38 @@
     &:active { text-decoration: underline; }
   }
 
+  // ─── Horizontal rule ───────────────────────────────────────────────────────
+
   hr {
-    border: none;
-    border-top: 1px solid var(--border-subtle);
-    margin: var(--size-gap-3) 0;
+    height: 1px;
+    padding: 0;
+    margin: 1.5rem 0;
+    background: var(--border-subtle);
+    border: 0;
+    border-radius: 1px;
   }
 
-  strong { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  em { font-style: italic; }
-  del { color: var(--color-text-muted); }
+  // ─── Typography ─────────────────────────────────────────────────────────────
 
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin: var(--size-gap-2) 0;
-    font-size: var(--font-size-xs);
-    display: block;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
+  strong {
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
   }
-  thead { background: var(--element-bg-subtle); }
-  th, td {
-    border: 1px solid var(--border-subtle);
-    padding: var(--size-gap-1) var(--size-gap-2);
-    text-align: left;
-    white-space: nowrap;
+
+  em {
+    font-style: italic;
+    color: var(--color-text-secondary);
+  }
+
+  del {
+    text-decoration: line-through;
+    color: var(--color-text-muted);
+  }
+
+  // ─── Checkbox ───────────────────────────────────────────────────────────────
+
+  input[type='checkbox'] {
+    margin-right: 6px;
+    accent-color: var(--color-accent-500);
   }
-  th { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
-  td { color: var(--color-text-primary); }
-  tbody tr:nth-child(even) { background: var(--element-bg-subtle); }
-  input[type='checkbox'] { margin-right: 6px; accent-color: var(--color-accent-500); }
 }
diff --git a/src/mobile-web/src/styles/components/sessions.scss b/src/mobile-web/src/styles/components/sessions.scss
index cfaa8ff7..6d3cfd81 100644
--- a/src/mobile-web/src/styles/components/sessions.scss
+++ b/src/mobile-web/src/styles/components/sessions.scss
@@ -1,147 +1,147 @@
+@mixin squircle($radius) {
+  border-radius: $radius;
+  corner-shape: squircle;
+}
+
 .session-list {
+  position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
-  animation: fadeIn var(--motion-base) var(--easing-decelerate);
+  background: var(--color-bg-primary);
+  overflow: hidden;
 }
 
 .session-list__header {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 var(--size-gap-5);
-  height: 44px;
-  min-height: 44px;
-  border-bottom: 1px dashed var(--border-base);
-  background: color-mix(in srgb, var(--color-bg-elevated) 50%, transparent);
-  backdrop-filter: var(--blur-base);
-  -webkit-backdrop-filter: var(--blur-base);
+  min-height: 56px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--color-bg-elevated);
+  backdrop-filter: var(--blur-medium);
+  -webkit-backdrop-filter: var(--blur-medium);
   flex-shrink: 0;
+}
+
+.session-list__header-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--size-gap-3);
+  min-width: 0;
+}
+
+.session-list__header-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 
   h1 {
+    margin: 0;
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-semibold);
     color: var(--color-text-primary);
+    letter-spacing: 0.01em;
   }
 }
 
+.session-list__header-kicker {
+  font-size: 10px;
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-accent-500);
+}
+
+.session-list__logo {
+  width: 26px;
+  height: 26px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
 .session-list__header-actions {
   display: flex;
   align-items: center;
-  gap: var(--size-gap-2);
 }
 
 .session-list__theme-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: none;
-  border: none;
-  color: var(--color-text-muted);
+  padding: 0;
+  border: 1px solid var(--border-subtle);
+  border-radius: 50%;
+  background: var(--element-bg-subtle);
+  color: var(--color-text-secondary);
   cursor: pointer;
-  border-radius: var(--size-radius-sm);
   transition: all var(--motion-fast) var(--easing-standard);
 
   &:active {
-    background: var(--element-bg-subtle);
+    transform: scale(0.96);
     color: var(--color-text-primary);
+    background: var(--element-bg-base);
   }
 }
 
-.session-list__new-wrapper {
+.session-list__workspace-bar {
   position: relative;
-}
-
-.session-list__new-btn {
-  background: var(--btn-primary-bg);
-  color: var(--btn-primary-color);
-  border: none;
-  border-radius: var(--size-radius-sm);
-  padding: var(--size-gap-1) var(--size-gap-3);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition: all var(--motion-fast) var(--easing-standard);
-
-  &:active {
-    background: var(--btn-primary-hover-bg);
-  }
-}
-
-.session-list__new-menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  background: var(--color-bg-elevated);
-  border: 1px solid var(--border-base);
-  border-radius: var(--size-radius-base);
-  overflow: hidden;
-  z-index: 10;
-  min-width: 180px;
-  box-shadow: var(--shadow-xl);
-  backdrop-filter: var(--blur-medium);
-  -webkit-backdrop-filter: var(--blur-medium);
-  animation: slideDown var(--motion-fast) var(--easing-decelerate);
-}
-
-.session-list__menu-item {
+  z-index: 1;
   display: flex;
   align-items: center;
-  gap: var(--size-gap-2);
-  width: 100%;
-  padding: var(--size-gap-3) var(--size-gap-4);
-  background: none;
-  border: none;
-  border-bottom: 1px solid var(--border-subtle);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
+  gap: 12px;
+  margin: var(--size-gap-3) var(--size-gap-4) 0;
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  @include squircle(20px);
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-sm);
   cursor: pointer;
-  text-align: left;
-
-  &:last-child { border-bottom: none; }
+  transition: transform var(--motion-fast) var(--easing-standard),
+    background var(--motion-fast) var(--easing-standard);
 
   &:active {
+    transform: translateY(1px);
     background: var(--element-bg-subtle);
   }
 }
 
-.session-list__menu-icon {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
+.session-list__workspace-icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  @include squircle(10px);
   color: var(--color-accent-500);
-  min-width: 24px;
-  text-align: center;
+  background: var(--color-accent-100);
 }
 
-// Workspace bar
-.session-list__workspace-bar {
+.session-list__workspace-copy {
   display: flex;
-  align-items: center;
-  gap: var(--size-gap-2);
-  padding: var(--size-gap-2) var(--size-gap-5);
-  background: var(--element-bg-subtle);
-  border-bottom: 1px solid var(--border-subtle);
-  cursor: pointer;
-  min-height: 36px;
-  transition: background var(--motion-fast) var(--easing-standard);
-
-  &:active {
-    background: var(--element-bg-soft);
-  }
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
 }
 
-.session-list__workspace-icon {
-  flex-shrink: 0;
+.session-list__workspace-label {
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
   color: var(--color-text-muted);
 }
 
 .session-list__workspace-name {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-accent-500);
-  flex: 1;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -150,126 +150,334 @@
 .session-list__workspace-branch {
   display: inline-flex;
   align-items: center;
-  gap: 3px;
-  font-size: 11px;
-  color: var(--color-accent-500);
+  gap: 4px;
+  padding: 3px 8px;
+  @include squircle(999px);
   background: var(--color-accent-100);
-  padding: 1px 6px;
-  border-radius: var(--size-radius-sm);
-  flex-shrink: 0;
-  max-width: 100px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color: var(--color-accent-500);
+  font-size: 11px;
+  flex-shrink: 1;
+  min-width: 0;
   white-space: nowrap;
 }
 
 .session-list__workspace-switch {
-  font-size: 11px;
-  color: var(--color-text-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   flex-shrink: 0;
+  color: var(--color-text-muted);
 }
 
-// Session items
 .session-list__items {
+  position: relative;
+  z-index: 1;
   flex: 1;
   overflow-y: auto;
-  padding: var(--size-gap-2) var(--size-gap-3);
+  padding: var(--size-gap-4);
   -webkit-overflow-scrolling: touch;
   display: flex;
   flex-direction: column;
-  gap: var(--size-gap-1);
+  gap: var(--size-gap-4);
 }
 
-.session-list__empty {
-  text-align: center;
+.session-list__panel {
+  position: relative;
+  padding: var(--size-gap-4);
+  border: 1px solid var(--border-subtle);
+  @include squircle(22px);
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-base);
+  overflow: visible;
+}
+
+.session-list__section-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--size-gap-3);
+  margin-bottom: var(--size-gap-4);
+}
+
+.session-list__section-kicker {
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-accent-500);
+}
+
+.session-list__section-title {
+  margin-top: 4px;
+  font-size: var(--font-size-lg);
+  line-height: 1.1;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  letter-spacing: -0.02em;
+}
+
+.session-list__section-meta {
+  font-size: 11px;
   color: var(--color-text-muted);
-  padding: var(--size-gap-12) var(--size-gap-5);
+  flex-shrink: 0;
+}
+
+.session-list__create-row {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.session-list__create-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px;
+  border: 1px solid var(--border-subtle);
+  @include squircle(18px);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  text-align: left;
+  transition: transform var(--motion-fast) var(--easing-standard),
+    background var(--motion-fast) var(--easing-standard);
+  animation: sessionItemIn var(--motion-base) var(--easing-decelerate) both;
+  box-shadow: var(--shadow-sm);
+
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+    background: var(--element-bg-subtle);
+  }
+
+  &:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  &--code {
+    border-color: var(--color-accent-200);
+  }
+
+  &--cowork {
+    border-color: var(--color-purple-200);
+  }
+}
+
+.session-list__create-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  @include squircle(10px);
+  flex-shrink: 0;
+  color: var(--color-accent-500);
+  background: var(--color-accent-100);
+}
+
+.session-list__create-btn--cowork .session-list__create-icon {
+  color: var(--color-purple-500);
+  background: var(--color-purple-100);
+}
+
+.session-list__create-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  flex: 1;
+}
+
+.session-list__create-title {
   font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  letter-spacing: -0.01em;
+}
+
+.session-list__create-desc {
+  font-size: 11px;
+  line-height: 1.35;
+  color: var(--color-text-secondary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.session-list__create-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.session-list__cards {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .session-list__item {
-  padding: var(--size-gap-3) var(--size-gap-4);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
   border: 1px solid var(--border-subtle);
-  border-radius: var(--size-radius-base);
+  @include squircle(18px);
+  background: var(--color-bg-secondary);
+  box-shadow: var(--shadow-xs);
   cursor: pointer;
-  transition: all var(--motion-fast) var(--easing-standard);
-  background: transparent;
+  transition: transform var(--motion-fast) var(--easing-standard),
+    background var(--motion-fast) var(--easing-standard);
+  animation: sessionItemIn var(--motion-base) var(--easing-decelerate) both;
+
+  @for $i from 1 through 20 {
+    &:nth-child(#{$i}) {
+      animation-delay: #{$i * 35}ms;
+    }
+  }
 
   &:active {
+    transform: translateY(1px);
     background: var(--element-bg-subtle);
-    border-color: var(--border-base);
   }
 }
 
+.session-list__item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  @include squircle(10px);
+  flex-shrink: 0;
+  color: var(--color-accent-500);
+  background: var(--color-accent-100);
+
+  &--cowork,
+  &--Cowork {
+    color: var(--color-purple-500);
+    background: var(--color-purple-100);
+  }
+}
+
+.session-list__item-body {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 .session-list__item-top {
   display: flex;
-  align-items: center;
-  gap: var(--size-gap-2);
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--size-gap-3);
 }
 
 .session-list__item-name {
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1.25;
+  color: var(--color-text-primary);
+  min-width: 0;
   flex: 1;
-  white-space: nowrap;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--color-text-primary);
+}
+
+.session-list__item-time {
+  font-size: 10px;
+  color: var(--color-text-muted);
+  margin-top: 2px;
 }
 
 .session-list__agent-badge {
   display: inline-flex;
   align-items: center;
-  padding: 2px var(--size-gap-2);
-  border-radius: var(--size-radius-sm);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  background: var(--element-bg-base);
+  min-height: 18px;
+  padding: 0 8px;
+  @include squircle(999px);
+  font-size: 10px;
+  font-weight: var(--font-weight-semibold);
+  border: 1px solid var(--border-subtle);
+  background: var(--element-bg-subtle);
   color: var(--color-text-secondary);
   flex-shrink: 0;
 
   &--code,
   &--agentic {
-    background: var(--color-accent-200);
+    background: var(--color-accent-100);
     color: var(--color-accent-500);
+    border-color: var(--color-accent-200);
   }
 
   &--cowork,
   &--Cowork {
-    background: var(--color-success-bg);
-    color: var(--color-success);
+    background: var(--color-purple-100);
+    color: var(--color-purple-500);
+    border-color: var(--color-purple-200);
   }
 }
 
-.session-list__item-meta {
-  margin-top: 3px;
+.session-list__empty {
+  padding: var(--size-gap-10) var(--size-gap-4);
+  text-align: center;
+  font-size: var(--font-size-sm);
+  line-height: 1.6;
+  color: var(--color-text-muted);
+  border: 1px solid var(--border-subtle);
+  @include squircle(18px);
+  background: var(--color-bg-secondary);
 }
 
-.session-list__item-time {
-  font-size: 11px;
+.session-list__pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.2s var(--easing-decelerate);
+}
+
+.session-list__pull-spinner {
   color: var(--color-text-muted);
+  transition: color var(--motion-fast);
+
+  &.is-active {
+    color: var(--color-accent-500);
+    animation: spin 0.8s linear infinite;
+  }
 }
 
 .session-list__load-more {
+  padding: var(--size-gap-3) 0 var(--size-gap-1);
   text-align: center;
-  font-size: var(--font-size-xs);
+  font-size: 12px;
   color: var(--color-text-muted);
-  padding: var(--size-gap-3) 0;
 }
 
-.session-list__refresh {
-  padding: var(--size-gap-3);
-  background: var(--element-bg-subtle);
-  color: var(--color-text-muted);
-  border: none;
-  border-top: 1px solid var(--border-subtle);
-  font-size: var(--font-size-xs);
-  cursor: pointer;
-  transition: all var(--motion-fast) var(--easing-standard);
-  flex-shrink: 0;
+@keyframes sessionItemIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 
-  &:active {
-    background: var(--element-bg-soft);
-    color: var(--color-text-primary);
+@media (prefers-reduced-motion: reduce) {
+  .session-list *,
+  .session-list *::before,
+  .session-list *::after {
+    animation: none !important;
+    transition: none !important;
   }
 }
diff --git a/src/mobile-web/src/styles/components/tool-card.scss b/src/mobile-web/src/styles/components/tool-card.scss
index 891ea707..e99110a9 100644
--- a/src/mobile-web/src/styles/components/tool-card.scss
+++ b/src/mobile-web/src/styles/components/tool-card.scss
@@ -17,10 +17,27 @@
 .chat-tool-list__header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: var(--size-gap-2);
   padding: var(--size-gap-2) var(--size-gap-3);
-  border-bottom: 1px solid var(--border-subtle);
   min-height: 32px;
+  cursor: pointer;
+  transition: background var(--motion-fast) var(--easing-standard);
+
+  &:active {
+    background: var(--element-bg-subtle);
+  }
+}
+
+.chat-tool-list__chevron {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-muted);
+  transition: transform var(--motion-fast) var(--easing-standard);
+  flex-shrink: 0;
+
+  &.is-expanded {
+    transform: rotate(180deg);
+  }
 }
 
 .chat-tool-list__count {
@@ -32,6 +49,7 @@
 .chat-tool-list__stats {
   display: flex;
   gap: var(--size-gap-2);
+  margin-left: auto;
 }
 
 .chat-tool-list__stat {
@@ -53,6 +71,7 @@
   gap: var(--size-gap-1);
   padding: var(--size-gap-2);
   max-height: 140px;
+  border-top: 1px solid var(--border-subtle);
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
@@ -113,6 +132,10 @@
   border-color: var(--color-error-border);
 }
 
+.chat-tool-card--pending {
+  border-color: var(--color-warning-border);
+}
+
 .chat-tool-card__row {
   display: flex;
   align-items: center;
@@ -153,6 +176,12 @@
   align-items: center;
 }
 
+.chat-tool-card__pending-icon {
+  color: var(--color-warning);
+  display: flex;
+  align-items: center;
+}
+
 .chat-tool-card__name {
   flex: 1;
   font-size: var(--font-size-xs);
@@ -161,6 +190,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: var(--font-weight-medium);
+  min-width: 0;
+}
+
+.chat-tool-card__preview {
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-muted);
 }
 
 .chat-tool-card__type {
@@ -183,6 +218,32 @@
   font-family: var(--font-family-mono);
 }
 
+.chat-tool-card__cancel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border-radius: var(--size-radius-sm);
+  border: none;
+  background: var(--color-error);
+  color: white;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all var(--motion-fast) var(--easing-standard);
+  margin-left: auto;
+  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.35);
+
+  &:active {
+    transform: scale(0.9);
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
 // Expanded content area
 .chat-tool-card__expanded {
   border-top: 1px solid var(--border-subtle);
@@ -197,6 +258,175 @@
   word-break: break-all;
 }
 
+// ─── Task card (subagent container) ────────────────────────────────────────
+
+.chat-task-card {
+  border-radius: var(--size-radius-lg);
+  border: 1px solid var(--border-base);
+  background: color-mix(in srgb, var(--color-bg-secondary) 60%, transparent);
+  backdrop-filter: var(--blur-base);
+  overflow: hidden;
+  width: 100%;
+
+  &--running {
+    border-color: var(--color-warning-border);
+  }
+
+  &--done {
+    border-color: var(--color-success-border);
+  }
+
+  &--error {
+    border-color: var(--color-error-border);
+  }
+
+  &--pending {
+    border-color: var(--color-warning-border);
+  }
+}
+
+.chat-task-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--size-gap-2);
+  padding: var(--size-gap-2) var(--size-gap-3);
+  min-height: 36px;
+}
+
+.chat-task-card__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--size-gap-2);
+  padding: 4px var(--size-gap-3);
+  border-top: 1px solid var(--border-subtle);
+  min-height: 24px;
+  cursor: pointer;
+  transition: background var(--motion-fast) var(--easing-standard);
+
+  &:active {
+    background: var(--element-bg-subtle);
+  }
+}
+
+.chat-task-card__chevron {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-muted);
+  transition: transform var(--motion-fast) var(--easing-standard);
+  flex-shrink: 0;
+
+  &.is-expanded {
+    transform: rotate(180deg);
+  }
+}
+
+.chat-task-card__stat {
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-muted);
+}
+
+.chat-task-card__stat-right {
+  display: flex;
+  gap: var(--size-gap-2);
+  margin-left: auto;
+}
+
+.chat-task-card__stat--done {
+  font-size: 11px;
+  color: var(--color-success);
+  font-variant-numeric: tabular-nums;
+}
+
+.chat-task-card__stat--running {
+  font-size: 11px;
+  color: var(--color-warning);
+  font-variant-numeric: tabular-nums;
+}
+
+.chat-task-card__steps {
+  border-top: 1px solid var(--border-subtle);
+  max-height: 140px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  padding: var(--size-gap-1) var(--size-gap-3);
+
+  mask-image: linear-gradient(to bottom, transparent 0px, black 8px, black 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 8px, black 100%);
+
+  &::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-text-muted);
+    border-radius: 2px;
+    opacity: 0.4;
+  }
+}
+
+.chat-task-card__step {
+  display: flex;
+  align-items: center;
+  gap: var(--size-gap-2);
+  padding: 3px 0;
+  font-size: 11px;
+  color: var(--color-text-muted);
+  min-height: 22px;
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  &--thinking {
+    color: var(--color-text-muted);
+    opacity: 0.7;
+
+    svg {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+.chat-task-card__step-spinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid var(--color-warning-border);
+  border-top-color: var(--color-warning);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+.chat-task-card__step-name {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+}
+
+.chat-task-card__step-preview {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-muted);
+}
+
+.chat-task-card__step-duration {
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--font-family-mono);
+  color: var(--color-text-muted);
+}
+
 // ─── AskUserQuestion card ───────────────────────────────────────────────────
 
 .chat-ask-card {
@@ -399,3 +629,154 @@
     opacity: 0.5;
   }
 }
+
+// ─── TodoWrite card ────────────────────────────────────────────────────────
+
+.chat-todo-card {
+  border-radius: var(--size-radius-base);
+  border: 1px solid var(--border-base);
+  background: var(--color-bg-flowchat);
+  overflow: hidden;
+  width: 100%;
+}
+
+.chat-todo-card__header {
+  display: flex;
+  align-items: center;
+  gap: var(--size-gap-2);
+  padding: var(--size-gap-2) var(--size-gap-3);
+  cursor: pointer;
+  min-height: 36px;
+  transition: background var(--motion-fast) var(--easing-standard);
+
+  &:active {
+    background: var(--element-bg-subtle);
+  }
+}
+
+.chat-todo-card__icon {
+  display: flex;
+  align-items: center;
+  color: var(--color-accent-500);
+  flex-shrink: 0;
+}
+
+.chat-todo-card__current {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &--done {
+    color: var(--color-success);
+    font-weight: var(--font-weight-medium);
+  }
+}
+
+.chat-todo-card__right {
+  display: flex;
+  align-items: center;
+  gap: var(--size-gap-2);
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.chat-todo-card__dots {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.chat-todo-card__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  transition: all var(--motion-fast) var(--easing-standard);
+
+  &--completed {
+    background: var(--color-success);
+  }
+
+  &--in_progress {
+    background: var(--color-accent-500);
+    animation: todoPulse 1.4s ease-in-out infinite;
+  }
+
+  &--pending {
+    background: var(--color-text-muted);
+    opacity: 0.3;
+  }
+
+  &--cancelled {
+    background: var(--color-error);
+    opacity: 0.5;
+  }
+}
+
+@keyframes todoPulse {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.3); }
+}
+
+.chat-todo-card__stats {
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-muted);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+.chat-todo-card__chevron {
+  display: flex;
+  align-items: center;
+  color: var(--color-text-muted);
+  transition: transform var(--motion-fast) var(--easing-standard);
+  flex-shrink: 0;
+
+  &.is-expanded {
+    transform: rotate(180deg);
+  }
+}
+
+.chat-todo-card__list {
+  border-top: 1px solid var(--border-subtle);
+  padding: var(--size-gap-2) var(--size-gap-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--size-gap-1);
+}
+
+.chat-todo-card__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-gap-2);
+  padding: 4px 0;
+
+  svg {
+    flex-shrink: 0;
+    margin-top: 1px;
+  }
+
+  &--completed {
+    opacity: 0.6;
+  }
+
+  &--cancelled {
+    opacity: 0.4;
+  }
+}
+
+.chat-todo-card__item-text {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-primary);
+  line-height: var(--line-height-normal);
+
+  .chat-todo-card__item--in_progress & {
+    color: var(--color-accent-500);
+    font-weight: var(--font-weight-medium);
+  }
+}
diff --git a/src/mobile-web/src/styles/components/workspace.scss b/src/mobile-web/src/styles/components/workspace.scss
index f44f9d51..552d55b9 100644
--- a/src/mobile-web/src/styles/components/workspace.scss
+++ b/src/mobile-web/src/styles/components/workspace.scss
@@ -1,32 +1,38 @@
+@mixin squircle($radius) {
+  border-radius: $radius;
+  corner-shape: squircle;
+}
+
 .workspace-page {
   display: flex;
   flex-direction: column;
   height: 100%;
-  animation: fadeIn var(--motion-base) var(--easing-decelerate);
+  background: var(--color-bg-primary);
 }
 
 .workspace-page__header {
   display: flex;
   align-items: center;
   padding: 0 var(--size-gap-5);
-  height: 44px;
-  min-height: 44px;
-  border-bottom: 1px dashed var(--border-base);
-  background: color-mix(in srgb, var(--color-bg-elevated) 50%, transparent);
-  backdrop-filter: var(--blur-base);
-  -webkit-backdrop-filter: var(--blur-base);
+  height: 56px;
+  min-height: 56px;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--color-bg-elevated);
+  backdrop-filter: var(--blur-medium);
+  -webkit-backdrop-filter: var(--blur-medium);
   flex-shrink: 0;
 
   h1 {
     font-size: var(--font-size-lg);
     font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
   }
 }
 
 .workspace-page__content {
   flex: 1;
   overflow-y: auto;
-  padding: var(--size-gap-5);
+  padding: var(--size-gap-4);
   -webkit-overflow-scrolling: touch;
 }
 
@@ -49,24 +55,26 @@
 
 .workspace-page__current-label,
 .workspace-page__recent-label {
-  font-size: var(--font-size-xs);
+  font-size: 9px;
   font-weight: var(--font-weight-semibold);
-  color: var(--color-text-muted);
+  color: var(--color-accent-500);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.14em;
 }
 
 .workspace-page__current-card {
-  border: 1px solid var(--border-base);
-  border-radius: var(--size-radius-base);
+  border: 1px solid var(--border-subtle);
+  @include squircle(18px);
   padding: var(--size-gap-4);
-  background: transparent;
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-sm);
   transition: all var(--motion-fast) var(--easing-standard);
 }
 
 .workspace-page__project-name {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
   margin-bottom: var(--size-gap-1);
 }
 
@@ -85,8 +93,9 @@
   font-size: var(--font-size-xs);
   color: var(--color-accent-500);
   background: var(--color-accent-100);
-  padding: 2px var(--size-gap-2);
-  border-radius: var(--size-radius-sm);
+  padding: 3px var(--size-gap-2);
+  @include squircle(8px);
+  word-break: break-all;
 }
 
 .workspace-page__actions {
@@ -98,28 +107,28 @@
   flex: 1;
   padding: var(--size-gap-3) var(--size-gap-4);
   border: none;
-  border-radius: var(--size-radius-base);
+  @include squircle(12px);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   transition: all var(--motion-fast) var(--easing-standard);
 
   &--primary {
-    background: var(--btn-primary-bg);
-    color: var(--btn-primary-color);
+    background: var(--color-accent-500);
+    color: #fff;
 
     &:active {
-      background: var(--btn-primary-hover-bg);
+      background: var(--color-accent-600);
     }
   }
 
   &--secondary {
-    background: var(--btn-default-bg);
+    background: var(--element-bg-subtle);
     color: var(--color-text-primary);
-    border: 1px solid var(--border-base);
+    border: 1px solid var(--border-subtle);
 
     &:active {
-      background: var(--btn-hover-bg);
+      background: var(--element-bg-base);
     }
   }
 
@@ -136,6 +145,10 @@
   text-align: center;
   padding: var(--size-gap-10) var(--size-gap-5);
   gap: var(--size-gap-3);
+  border: 1px solid var(--border-subtle);
+  @include squircle(22px);
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-base);
 }
 
 .workspace-page__no-workspace-icon {
@@ -146,6 +159,7 @@
 .workspace-page__no-workspace-text {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
 }
 
 .workspace-page__no-workspace-hint {
@@ -159,6 +173,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--size-gap-3);
+  animation: slideUp 0.3s var(--easing-decelerate) both;
 }
 
 .workspace-page__recent-empty {
@@ -178,18 +193,26 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  background: transparent;
+  background: var(--color-bg-secondary);
   border: 1px solid var(--border-subtle);
-  border-radius: var(--size-radius-base);
-  padding: var(--size-gap-3) var(--size-gap-4);
+  @include squircle(14px);
+  padding: 12px;
   cursor: pointer;
   text-align: left;
   color: var(--color-text-primary);
+  box-shadow: var(--shadow-xs);
   transition: all var(--motion-fast) var(--easing-standard);
+  animation: slideUp 0.3s var(--easing-decelerate) both;
+
+  @for $i from 1 through 20 {
+    &:nth-child(#{$i}) {
+      animation-delay: #{$i * 0.04}s;
+    }
+  }
 
   &:active {
+    transform: translateY(1px);
     background: var(--element-bg-subtle);
-    border-color: var(--border-base);
   }
 
   &:disabled {
@@ -201,6 +224,7 @@
 .workspace-page__recent-item-name {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
   margin-bottom: 2px;
 }
 
@@ -228,5 +252,5 @@
   text-align: center;
   padding: var(--size-gap-2) var(--size-gap-3);
   background: var(--color-error-bg);
-  border-radius: var(--size-radius-sm);
+  @include squircle(10px);
 }
diff --git a/src/mobile-web/src/styles/global.scss b/src/mobile-web/src/styles/global.scss
index 1060d623..67201ff8 100644
--- a/src/mobile-web/src/styles/global.scss
+++ b/src/mobile-web/src/styles/global.scss
@@ -29,6 +29,7 @@ body {
   display: flex;
   flex-direction: column;
   position: relative;
+  overflow: hidden;
 }
 
 // Scrollbar
@@ -96,6 +97,43 @@ body {
   animation: fadeIn var(--motion-base) var(--easing-decelerate);
 }
 
+// Nav-stack page transitions (iOS-style push/pop)
+.nav-page {
+  position: absolute;
+  inset: 0;
+  will-change: transform, opacity;
+}
+
+.nav-push-enter {
+  animation: navPushIn 0.35s var(--easing-decelerate) both;
+}
+.nav-push-exit {
+  animation: navPushOut 0.35s var(--easing-accelerate) both;
+}
+.nav-pop-enter {
+  animation: navPopIn 0.25s var(--easing-decelerate) both;
+}
+.nav-pop-exit {
+  animation: navPopOut 0.25s var(--easing-accelerate) both;
+}
+
+@keyframes navPushIn {
+  from { transform: translateX(30%); opacity: 0.4; }
+  to   { transform: translateX(0);   opacity: 1; }
+}
+@keyframes navPushOut {
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(-15%); opacity: 0.3; }
+}
+@keyframes navPopIn {
+  from { transform: translateX(-15%); opacity: 0.3; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+@keyframes navPopOut {
+  from { transform: translateX(0);   opacity: 1; }
+  to   { transform: translateX(30%); opacity: 0.4; }
+}
+
 // Spinner utility
 .spinner {
   width: 28px;
diff --git a/src/mobile-web/src/theme/ThemeProvider.tsx b/src/mobile-web/src/theme/ThemeProvider.tsx
index 38a4e2bf..e8971794 100644
--- a/src/mobile-web/src/theme/ThemeProvider.tsx
+++ b/src/mobile-web/src/theme/ThemeProvider.tsx
@@ -12,19 +12,101 @@ interface ThemeContextValue {
 }
 
 const STORAGE_KEY = 'bitfun-mobile-theme';
+const THEME_STYLE_ID = 'bitfun-theme-vars';
 
 const themeMap: Record<ThemeId, Record<string, string>> = {
   dark: darkTheme,
   light: lightTheme,
 };
 
-function applyTheme(id: ThemeId) {
+const themeColors: Record<ThemeId, string> = {
+  dark: '#121214',
+  light: '#f2f2f7',
+};
+
+const textColors: Record<ThemeId, string> = {
+  dark: '#e8e8e8',
+  light: '#1c1c1e',
+};
+
+let fadeTimer: ReturnType<typeof setTimeout> | undefined;
+let fadeRaf: number | undefined;
+
+/**
+ * Build a complete CSS stylesheet string that defines all theme variables
+ * on :root plus explicit background/color on html and body.
+ * Injecting a <style> element is far more reliable across mobile WebKit
+ * than calling setProperty() on each variable individually.
+ */
+function buildThemeCSS(id: ThemeId): string {
   const vars = themeMap[id];
-  const root = document.documentElement;
+  const bg = themeColors[id];
+  const fg = textColors[id];
+  const parts: string[] = [':root {'];
+
   for (const [key, value] of Object.entries(vars)) {
-    root.style.setProperty(key, value);
+    parts.push(`  ${key}: ${value};`);
   }
+  parts.push(`  color-scheme: ${id};`);
+  parts.push('}');
+  parts.push(`html, body { background-color: ${bg}; color: ${fg}; color-scheme: ${id}; }`);
+
+  return parts.join('\n');
+}
+
+function applyTheme(id: ThemeId) {
+  const root = document.documentElement;
+  const body = document.body;
+  const prevTheme = root.getAttribute('data-theme');
+  const isSwitch = prevTheme && prevTheme !== id;
+
+  // --- 1. Inject / update <style> with all CSS variables ---
+  let styleEl = document.getElementById(THEME_STYLE_ID) as HTMLStyleElement | null;
+  if (!styleEl) {
+    styleEl = document.createElement('style');
+    styleEl.id = THEME_STYLE_ID;
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent = buildThemeCSS(id);
+
+  // --- 2. data-theme attribute (for any CSS selectors that depend on it) ---
   root.setAttribute('data-theme', id);
+  root.setAttribute('data-theme-type', id);
+  body.setAttribute('data-theme', id);
+
+  // --- 3. Inline style fallbacks (highest specificity, belt-and-suspenders) ---
+  body.style.backgroundColor = themeColors[id];
+  body.style.color = textColors[id];
+
+  // --- 4. Update <meta name="theme-color"> ---
+  const meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) {
+    meta.setAttribute('content', themeColors[id]);
+    meta.removeAttribute('media');
+  }
+
+  // --- 5. Visual crossfade on switch (opacity only, most compatible) ---
+  if (isSwitch) {
+    if (fadeRaf != null) cancelAnimationFrame(fadeRaf);
+    clearTimeout(fadeTimer);
+
+    const app = document.querySelector('.mobile-app') as HTMLElement | null;
+    if (app) {
+      app.style.transition = 'none';
+      app.style.opacity = '0.55';
+
+      fadeRaf = requestAnimationFrame(() => {
+        fadeRaf = requestAnimationFrame(() => {
+          app.style.transition = 'opacity 0.28s ease-out';
+          app.style.opacity = '1';
+          fadeTimer = setTimeout(() => {
+            app.style.removeProperty('transition');
+            app.style.removeProperty('opacity');
+          }, 320);
+        });
+      });
+    }
+  }
 }
 
 function getInitialTheme(): ThemeId {
diff --git a/src/mobile-web/src/theme/presets/dark.ts b/src/mobile-web/src/theme/presets/dark.ts
index 7c3fb522..7c82f1f7 100644
--- a/src/mobile-web/src/theme/presets/dark.ts
+++ b/src/mobile-web/src/theme/presets/dark.ts
@@ -54,12 +54,20 @@ export const darkTheme: Record<string, string> = {
   '--color-info-bg': 'rgba(225, 171, 128, 0.1)',
   '--color-info-border': 'rgba(225, 171, 128, 0.3)',
 
+  '--color-highlight': '#d4a574',
+  '--color-highlight-bg': 'rgba(212, 165, 116, 0.15)',
+  '--color-overlay': 'rgba(0, 0, 0, 0.5)',
+
   '--border-subtle': 'rgba(255, 255, 255, 0.12)',
   '--border-base': 'rgba(255, 255, 255, 0.18)',
   '--border-medium': 'rgba(255, 255, 255, 0.24)',
   '--border-strong': 'rgba(255, 255, 255, 0.32)',
   '--border-prominent': 'rgba(225, 171, 128, 0.50)',
 
+  '--glow-blue': '0 12px 32px rgba(225, 171, 128, 0.25), 0 6px 16px rgba(225, 171, 128, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1)',
+  '--glow-purple': '0 12px 32px rgba(139, 92, 246, 0.25), 0 6px 16px rgba(124, 58, 237, 0.18), 0 3px 8px rgba(0, 0, 0, 0.1)',
+  '--glow-mixed': '0 12px 32px rgba(225, 171, 128, 0.2), 0 6px 16px rgba(139, 92, 246, 0.15), 0 3px 8px rgba(0, 0, 0, 0.1)',
+
   '--shadow-xs': '0 1px 2px rgba(0, 0, 0, 0.9)',
   '--shadow-sm': '0 2px 4px rgba(0, 0, 0, 0.8)',
   '--shadow-base': '0 4px 8px rgba(0, 0, 0, 0.7)',
@@ -104,7 +112,7 @@ export const darkTheme: Record<string, string> = {
   '--easing-smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
 
   '--font-family-sans': "'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, sans-serif",
-  '--font-family-mono': "'FiraCode', 'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace",
+  '--font-family-mono': "'Menlo', 'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', 'Courier New', 'Noto Sans Mono CJK SC', 'Noto Sans Mono', monospace",
   '--font-weight-normal': '400',
   '--font-weight-medium': '500',
   '--font-weight-semibold': '600',
@@ -124,6 +132,8 @@ export const darkTheme: Record<string, string> = {
 
   '--opacity-disabled': '0.6',
   '--opacity-hover': '0.8',
+  '--opacity-focus': '0.9',
+  '--opacity-overlay': '0.4',
 
   '--scrollbar-thumb': 'rgba(255, 255, 255, 0.15)',
   '--scrollbar-thumb-hover': 'rgba(255, 255, 255, 0.28)',
diff --git a/src/mobile-web/src/theme/presets/light.ts b/src/mobile-web/src/theme/presets/light.ts
index b522e823..3cee8758 100644
--- a/src/mobile-web/src/theme/presets/light.ts
+++ b/src/mobile-web/src/theme/presets/light.ts
@@ -1,77 +1,85 @@
 export const lightTheme: Record<string, string> = {
-  '--color-bg-primary': '#f7f8fa',
+  '--color-bg-primary': '#f2f2f7',
   '--color-bg-secondary': '#ffffff',
-  '--color-bg-tertiary': '#f3f5f8',
-  '--color-bg-quaternary': '#ebeef3',
+  '--color-bg-tertiary': '#f2f2f7',
+  '--color-bg-quaternary': '#e5e5ea',
   '--color-bg-elevated': '#ffffff',
-  '--color-bg-workbench': '#f7f8fa',
+  '--color-bg-workbench': '#f2f2f7',
   '--color-bg-scene': '#ffffff',
   '--color-bg-flowchat': '#ffffff',
   '--color-bg-tooltip': 'rgba(255, 255, 255, 0.98)',
 
-  '--color-text-primary': '#1e293b',
-  '--color-text-secondary': '#3d4f66',
-  '--color-text-muted': '#64748b',
-  '--color-text-disabled': '#94a3b8',
-
-  '--element-bg-subtle': 'rgba(71, 102, 143, 0.05)',
-  '--element-bg-soft': 'rgba(71, 102, 143, 0.08)',
-  '--element-bg-base': 'rgba(71, 102, 143, 0.11)',
-  '--element-bg-medium': 'rgba(71, 102, 143, 0.15)',
-  '--element-bg-strong': 'rgba(71, 102, 143, 0.20)',
-  '--element-bg-elevated': 'rgba(255, 255, 255, 0.92)',
-
-  '--color-accent-50': 'rgba(71, 102, 143, 0.04)',
-  '--color-accent-100': 'rgba(71, 102, 143, 0.08)',
-  '--color-accent-200': 'rgba(71, 102, 143, 0.14)',
-  '--color-accent-300': 'rgba(71, 102, 143, 0.22)',
-  '--color-accent-400': 'rgba(71, 102, 143, 0.36)',
-  '--color-accent-500': '#5a7bb2',
-  '--color-accent-600': '#4a6694',
-  '--color-accent-700': 'rgba(74, 102, 148, 0.8)',
-  '--color-accent-800': 'rgba(74, 102, 148, 0.9)',
-
-  '--color-purple-50': 'rgba(107, 90, 137, 0.04)',
-  '--color-purple-100': 'rgba(107, 90, 137, 0.08)',
-  '--color-purple-200': 'rgba(107, 90, 137, 0.14)',
-  '--color-purple-300': 'rgba(107, 90, 137, 0.22)',
-  '--color-purple-400': 'rgba(107, 90, 137, 0.36)',
-  '--color-purple-500': '#7c6b99',
-  '--color-purple-600': '#655680',
-  '--color-purple-700': 'rgba(101, 86, 128, 0.8)',
-  '--color-purple-800': 'rgba(101, 86, 128, 0.9)',
-
-  '--color-success': '#5b9a6f',
-  '--color-success-bg': 'rgba(91, 154, 111, 0.08)',
-  '--color-success-border': 'rgba(91, 154, 111, 0.25)',
-  '--color-warning': '#c08c42',
-  '--color-warning-bg': 'rgba(192, 140, 66, 0.08)',
-  '--color-warning-border': 'rgba(192, 140, 66, 0.25)',
-  '--color-error': '#c26565',
-  '--color-error-bg': 'rgba(194, 101, 101, 0.08)',
-  '--color-error-border': 'rgba(194, 101, 101, 0.25)',
-  '--color-info': '#5a7bb2',
-  '--color-info-bg': 'rgba(90, 123, 178, 0.08)',
-  '--color-info-border': 'rgba(90, 123, 178, 0.25)',
-
-  '--border-subtle': 'rgba(100, 116, 139, 0.15)',
-  '--border-base': 'rgba(100, 116, 139, 0.22)',
-  '--border-medium': 'rgba(100, 116, 139, 0.32)',
-  '--border-strong': 'rgba(100, 116, 139, 0.42)',
-  '--border-prominent': 'rgba(100, 116, 139, 0.52)',
-
-  '--shadow-xs': '0 1px 2px rgba(71, 85, 105, 0.06)',
-  '--shadow-sm': '0 2px 4px rgba(71, 85, 105, 0.08)',
-  '--shadow-base': '0 4px 8px rgba(71, 85, 105, 0.10)',
-  '--shadow-lg': '0 8px 16px rgba(71, 85, 105, 0.12)',
-  '--shadow-xl': '0 12px 24px rgba(71, 85, 105, 0.14)',
-  '--shadow-2xl': '0 16px 32px rgba(71, 85, 105, 0.16)',
-
-  '--blur-subtle': 'blur(4px) saturate(1.02)',
-  '--blur-base': 'blur(8px) saturate(1.05)',
-  '--blur-medium': 'blur(12px) saturate(1.08)',
-  '--blur-strong': 'blur(16px) saturate(1.10) brightness(1.02)',
-  '--blur-intense': 'blur(20px) saturate(1.12) brightness(1.03)',
+  '--color-text-primary': '#1c1c1e',
+  '--color-text-secondary': '#48484a',
+  '--color-text-muted': '#8e8e93',
+  '--color-text-disabled': '#aeaeb2',
+
+  '--element-bg-subtle': 'rgba(120, 120, 128, 0.04)',
+  '--element-bg-soft': 'rgba(120, 120, 128, 0.08)',
+  '--element-bg-base': 'rgba(120, 120, 128, 0.10)',
+  '--element-bg-medium': 'rgba(120, 120, 128, 0.14)',
+  '--element-bg-strong': 'rgba(120, 120, 128, 0.20)',
+  '--element-bg-elevated': 'rgba(255, 255, 255, 0.94)',
+
+  '--color-accent-50': 'rgba(0, 122, 255, 0.04)',
+  '--color-accent-100': 'rgba(0, 122, 255, 0.08)',
+  '--color-accent-200': 'rgba(0, 122, 255, 0.14)',
+  '--color-accent-300': 'rgba(0, 122, 255, 0.22)',
+  '--color-accent-400': 'rgba(0, 122, 255, 0.36)',
+  '--color-accent-500': '#007AFF',
+  '--color-accent-600': '#0066CC',
+  '--color-accent-700': 'rgba(0, 102, 204, 0.8)',
+  '--color-accent-800': 'rgba(0, 102, 204, 0.9)',
+
+  '--color-purple-50': 'rgba(175, 82, 222, 0.04)',
+  '--color-purple-100': 'rgba(175, 82, 222, 0.08)',
+  '--color-purple-200': 'rgba(175, 82, 222, 0.14)',
+  '--color-purple-300': 'rgba(175, 82, 222, 0.22)',
+  '--color-purple-400': 'rgba(175, 82, 222, 0.36)',
+  '--color-purple-500': '#AF52DE',
+  '--color-purple-600': '#9536CC',
+  '--color-purple-700': 'rgba(149, 54, 204, 0.8)',
+  '--color-purple-800': 'rgba(149, 54, 204, 0.9)',
+
+  '--color-success': '#34C759',
+  '--color-success-bg': 'rgba(52, 199, 89, 0.08)',
+  '--color-success-border': 'rgba(52, 199, 89, 0.25)',
+  '--color-warning': '#FF9500',
+  '--color-warning-bg': 'rgba(255, 149, 0, 0.08)',
+  '--color-warning-border': 'rgba(255, 149, 0, 0.25)',
+  '--color-error': '#FF3B30',
+  '--color-error-bg': 'rgba(255, 59, 48, 0.08)',
+  '--color-error-border': 'rgba(255, 59, 48, 0.25)',
+  '--color-info': '#007AFF',
+  '--color-info-bg': 'rgba(0, 122, 255, 0.08)',
+  '--color-info-border': 'rgba(0, 122, 255, 0.25)',
+
+  '--color-highlight': '#FF9500',
+  '--color-highlight-bg': 'rgba(255, 149, 0, 0.10)',
+  '--color-overlay': 'rgba(0, 0, 0, 0.3)',
+
+  '--border-subtle': 'rgba(60, 60, 67, 0.08)',
+  '--border-base': 'rgba(60, 60, 67, 0.14)',
+  '--border-medium': 'rgba(60, 60, 67, 0.22)',
+  '--border-strong': 'rgba(60, 60, 67, 0.30)',
+  '--border-prominent': 'rgba(60, 60, 67, 0.40)',
+
+  '--glow-blue': '0 2px 8px rgba(0, 122, 255, 0.08)',
+  '--glow-purple': '0 2px 8px rgba(175, 82, 222, 0.08)',
+  '--glow-mixed': '0 2px 8px rgba(0, 122, 255, 0.06), 0 2px 8px rgba(175, 82, 222, 0.04)',
+
+  '--shadow-xs': '0 1px 2px rgba(0, 0, 0, 0.04)',
+  '--shadow-sm': '0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)',
+  '--shadow-base': '0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04)',
+  '--shadow-lg': '0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04)',
+  '--shadow-xl': '0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04)',
+  '--shadow-2xl': '0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06)',
+
+  '--blur-subtle': 'blur(4px) saturate(1.2)',
+  '--blur-base': 'blur(8px) saturate(1.4)',
+  '--blur-medium': 'blur(12px) saturate(1.6)',
+  '--blur-strong': 'blur(16px) saturate(1.8)',
+  '--blur-intense': 'blur(20px) saturate(2.0)',
 
   '--size-radius-sm': '6px',
   '--size-radius-base': '8px',
@@ -104,7 +112,7 @@ export const lightTheme: Record<string, string> = {
   '--easing-smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
 
   '--font-family-sans': "'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, sans-serif",
-  '--font-family-mono': "'FiraCode', 'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace",
+  '--font-family-mono': "'Menlo', 'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', 'Courier New', 'Noto Sans Mono CJK SC', 'Noto Sans Mono', monospace",
   '--font-weight-normal': '400',
   '--font-weight-medium': '500',
   '--font-weight-semibold': '600',
@@ -124,18 +132,20 @@ export const lightTheme: Record<string, string> = {
 
   '--opacity-disabled': '0.55',
   '--opacity-hover': '0.75',
-
-  '--scrollbar-thumb': 'rgba(100, 116, 139, 0.2)',
-  '--scrollbar-thumb-hover': 'rgba(100, 116, 139, 0.35)',
-
-  '--btn-default-bg': 'rgba(71, 102, 143, 0.10)',
-  '--btn-default-color': '#475569',
-  '--btn-hover-bg': 'rgba(71, 102, 143, 0.16)',
-  '--btn-hover-color': '#3d4f66',
-  '--btn-primary-bg': 'rgba(90, 123, 178, 0.18)',
-  '--btn-primary-color': '#4a6694',
-  '--btn-primary-hover-bg': 'rgba(90, 123, 178, 0.28)',
+  '--opacity-focus': '0.9',
+  '--opacity-overlay': '0.35',
+
+  '--scrollbar-thumb': 'rgba(0, 0, 0, 0.15)',
+  '--scrollbar-thumb-hover': 'rgba(0, 0, 0, 0.25)',
+
+  '--btn-default-bg': 'rgba(120, 120, 128, 0.08)',
+  '--btn-default-color': '#48484a',
+  '--btn-hover-bg': 'rgba(120, 120, 128, 0.14)',
+  '--btn-hover-color': '#1c1c1e',
+  '--btn-primary-bg': '#007AFF',
+  '--btn-primary-color': '#ffffff',
+  '--btn-primary-hover-bg': '#0066CC',
   '--btn-ghost-bg': 'transparent',
-  '--btn-ghost-color': '#475569',
-  '--btn-ghost-hover-bg': 'rgba(71, 102, 143, 0.12)',
+  '--btn-ghost-color': '#48484a',
+  '--btn-ghost-hover-bg': 'rgba(120, 120, 128, 0.08)',
 };
diff --git a/src/mobile-web/src/vite-env.d.ts b/src/mobile-web/src/vite-env.d.ts
new file mode 100644
index 00000000..06d0cc45
--- /dev/null
+++ b/src/mobile-web/src/vite-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
index a795159d..a463a3a0 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.scss
@@ -169,6 +169,16 @@
   align-items: center;
   justify-content: center;
   padding: 8px;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  }
 
   svg {
     width: 100%;
@@ -211,6 +221,15 @@
   color: var(--color-text-secondary);
 }
 
+// ==================== Ngrok usage link ====================
+
+.bitfun-remote-connect__ngrok-usage-link {
+  text-align: center;
+  padding: 10px 0 2px;
+  margin: 0;
+  font-size: 12.5px;
+}
+
 // ==================== Connected ====================
 
 .bitfun-remote-connect__connected {
diff --git a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
index 45f6a550..df786a0b 100644
--- a/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
+++ b/src/web-ui/src/app/components/RemoteConnectDialog/RemoteConnectDialog.tsx
@@ -86,6 +86,7 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
   const [showDisclaimer, setShowDisclaimer] = useState(false);
   const [hasAgreedDisclaimer, setHasAgreedDisclaimer] = useState<boolean>(() => getRemoteConnectDisclaimerAgreed());
 
+  const [qrCopied, setQrCopied] = useState(false);
   const [customUrl, setCustomUrl] = useState('');
   const [tgToken, setTgToken] = useState('');
   const [feishuAppId, setFeishuAppId] = useState('');
@@ -315,7 +316,16 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
     return (
       <div className="bitfun-remote-connect__body">
         {connectionResult.qr_url && (
-          <div className="bitfun-remote-connect__qr-box">
+          <div
+            className="bitfun-remote-connect__qr-box"
+            style={{ cursor: 'pointer' }}
+            title="Click to copy URL"
+            onClick={() => {
+              navigator.clipboard.writeText(connectionResult.qr_url!);
+              setQrCopied(true);
+              setTimeout(() => setQrCopied(false), 2000);
+            }}
+          >
             <QRCodeSVG value={connectionResult.qr_url} size={180} level="M" includeMargin />
           </div>
         )}
@@ -327,10 +337,12 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
           </div>
         )}
         <div className="bitfun-remote-connect__status">
-          <Badge variant="warning">
-            {activeGroup === 'bot'
-              ? t('remoteConnect.stateWaitingBot')
-              : t('remoteConnect.stateWaiting')}
+          <Badge variant={qrCopied ? 'success' : 'warning'}>
+            {qrCopied
+              ? t('remoteConnect.urlCopied')
+              : activeGroup === 'bot'
+                ? t('remoteConnect.stateWaitingBot')
+                : t('remoteConnect.stateWaiting')}
           </Badge>
         </div>
         <p className="bitfun-remote-connect__hint">
@@ -345,11 +357,30 @@ export const RemoteConnectDialog: React.FC<RemoteConnectDialogProps> = ({
 
   // ── Network group content ────────────────────────────────────────
 
+  const NGROK_USAGE_URL = 'https://dashboard.ngrok.com/legacy/usage';
+
   const renderNetworkContent = () => {
     if (isRelayConnected && connectedNetworkTab === networkTab) {
-      return renderConnectedView(
-        status?.peer_device_name ?? t('remoteConnect.stateConnected'),
-        handleDisconnectRelay,
+      return (
+        <>
+          {networkTab === 'ngrok' && (
+            <p className="bitfun-remote-connect__ngrok-usage-link">
+              <span
+                className="bitfun-remote-connect__description-link"
+                role="link"
+                tabIndex={0}
+                onClick={() => systemAPI.openExternal(NGROK_USAGE_URL)}
+                onKeyDown={(e) => { if (e.key === 'Enter') systemAPI.openExternal(NGROK_USAGE_URL); }}
+              >
+                {t('remoteConnect.ngrokUsageLink')}
+              </span>
+            </p>
+          )}
+          {renderConnectedView(
+            status?.peer_device_name ?? t('remoteConnect.stateConnected'),
+            handleDisconnectRelay,
+          )}
+        </>
       );
     }
     if (connectionResult && activeGroup === 'network') {
diff --git a/src/web-ui/src/component-library/components/Markdown/Markdown.scss b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
index b5df30c8..ecc00133 100644
--- a/src/web-ui/src/component-library/components/Markdown/Markdown.scss
+++ b/src/web-ui/src/component-library/components/Markdown/Markdown.scss
@@ -391,7 +391,8 @@
 }
 
 
-.markdown-renderer pre code {
+.markdown-renderer pre code,
+.markdown-renderer pre > .inline-code {
   display: block;
   padding: 0;
   margin: 0;
@@ -406,6 +407,8 @@
   user-select: text !important;
   box-shadow: none;
   font-size: 0.7rem !important;
+  color: inherit;
+  font-weight: inherit;
 }
 
 .markdown-renderer pre code:hover {
diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
index cb99db8d..a61f943a 100644
--- a/src/web-ui/src/flow_chat/components/ChatInput.tsx
+++ b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -282,11 +282,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           dispatchInput({ type: 'SET_VALUE', payload: textContent });
         }
 
-        // Handle image attachments
+        // Handle image attachments (respect max image limit)
+        let imgCount = currentImageCount;
         for (const block of params.content) {
           if (block.type === 'image') {
+            if (imgCount >= CHAT_INPUT_CONFIG.image.maxCount) break;
             try {
-              // Convert base64 to File object
               const mimeType = block.mimeType || 'image/png';
               const binaryString = atob(block.data);
               const bytes = new Uint8Array(binaryString.length);
@@ -297,6 +298,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
               const file = new File([blob], `image.${mimeType.split('/')[1] || 'png'}`, { type: mimeType });
               const imageContext = await createImageContextFromClipboard(file);
               addContext(imageContext);
+              imgCount++;
             } catch (err) {
               log.error('Failed to add image from MCP App message', { err });
             }
@@ -328,7 +330,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     return () => {
       globalEventBus.off('mcp-app:message', handleMcpAppMessage);
     };
-  }, [inputState.value, addContext]);
+  }, [inputState.value, addContext, currentImageCount]);
 
   React.useEffect(() => {
     const handleInsertContextTag = (event: Event) => {
@@ -453,6 +455,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       const file = customEvent.detail?.file;
       
       if (!file) return;
+
+      if (currentImageCount >= CHAT_INPUT_CONFIG.image.maxCount) {
+        notificationService.warning(t('input.maxImagesWarning', { count: CHAT_INPUT_CONFIG.image.maxCount }), { duration: 3000 });
+        return;
+      }
       
       try {
         const imageContext = await createImageContextFromClipboard(file);
@@ -486,7 +493,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         inputElement.removeEventListener('imagePaste', handleImagePaste);
       }
     };
-  }, [addContext]);
+  }, [addContext, currentImageCount]);
 
   React.useEffect(() => {
     if (!currentSessionId || !workspacePath) {
@@ -747,7 +754,18 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     }
   }, [handleSendOrCancel, derivedState, transition, templateState.fillState, moveToNextPlaceholder, moveToPrevPlaceholder, exitTemplateMode, slashCommandState, getFilteredModes, selectSlashCommandMode, canSwitchModes]);
   
+  const currentImageCount = useMemo(
+    () => contexts.filter(c => c.type === 'image').length,
+    [contexts],
+  );
+
   const handleImageInput = useCallback(() => {
+    const remaining = CHAT_INPUT_CONFIG.image.maxCount - currentImageCount;
+    if (remaining <= 0) {
+      notificationService.warning(t('input.maxImagesWarning', { count: CHAT_INPUT_CONFIG.image.maxCount }), { duration: 3000 });
+      return;
+    }
+
     const input = document.createElement('input');
     input.type = 'file';
     input.accept = CHAT_INPUT_CONFIG.image.acceptedTypes.join(',');
@@ -757,12 +775,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       const files = (e.target as HTMLInputElement).files;
       if (!files || files.length === 0) return;
       
-      if (files.length > CHAT_INPUT_CONFIG.image.maxCount) {
+      const fileArray = Array.from(files).slice(0, remaining);
+      if (files.length > remaining) {
         notificationService.warning(t('input.maxImagesWarning', { count: CHAT_INPUT_CONFIG.image.maxCount }), { duration: 3000 });
-        return;
       }
       
-      const fileArray = Array.from(files);
       let successCount = 0;
       
       for (const file of fileArray) {
@@ -793,7 +810,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     };
     
     input.click();
-  }, [addContext]);
+  }, [addContext, currentImageCount]);
   
   const handleMermaidEditor = useCallback(() => {
     window.dispatchEvent(new CustomEvent('expand-right-panel'));
@@ -915,6 +932,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         acceptedTypes={['file', 'directory', 'image', 'code-snippet', 'mermaid-diagram']}
         className="bitfun-chat-input-drop-zone"
         onContextAdded={(context) => {
+          if (context.type === 'image' && currentImageCount >= CHAT_INPUT_CONFIG.image.maxCount) {
+            notificationService.warning(t('input.maxImagesWarning', { count: CHAT_INPUT_CONFIG.image.maxCount }), { duration: 3000 });
+            return;
+          }
           if (richTextInputRef.current && (richTextInputRef.current as any).insertTag) {
             (richTextInputRef.current as any).insertTag(context);
           }
diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
index 34dd3dad..2cd61d50 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.scss
@@ -211,6 +211,82 @@
   }
 }
 
+// Image thumbnails (WeChat-style).
+.user-message-item__images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.user-message-item__image-thumb {
+  width: 120px;
+  height: 120px;
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid var(--border-base, #333);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover {
+    transform: scale(1.03);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+// Lightbox overlay.
+.user-message-item__lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: lightboxFadeIn 0.2s ease;
+
+  img {
+    max-width: 90vw;
+    max-height: 85vh;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    object-fit: contain;
+  }
+}
+
+.user-message-item__lightbox-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: rgba(255, 255, 255, 0.15);
+  border: none;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+}
+
+@keyframes lightboxFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
 @keyframes slideInUp {
   from {
     opacity: 0;
diff --git a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
index 46125ad2..c6bf137e 100644
--- a/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/UserMessageItem.tsx
@@ -5,7 +5,7 @@
 
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Copy, Check, RotateCcw, Loader2, ArrowDownToLine } from 'lucide-react';
+import { Copy, Check, RotateCcw, Loader2, ArrowDownToLine, X } from 'lucide-react';
 import type { DialogTurn } from '../../types/flow-chat';
 import { useFlowChatContext } from './FlowChatContext';
 import { useActiveSession } from '../../store/modernFlowChatStore';
@@ -33,6 +33,7 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
     const [expanded, setExpanded] = useState(false);
     const [hasOverflow, setHasOverflow] = useState(false);
     const [isRollingBack, setIsRollingBack] = useState(false);
+    const [lightboxImage, setLightboxImage] = useState<string | null>(null);
     const containerRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
 
@@ -40,6 +41,7 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
     const dialogTurn = turnIndex >= 0 ? activeSession?.dialogTurns[turnIndex] : null;
     const isFailed = dialogTurn?.status === 'error';
     const canRollback = !!sessionId && turnIndex >= 0 && !isRollingBack;
+
     
     // Avoid zero-size errors by rendering a placeholder instead of null.
     if (!message) {
@@ -53,9 +55,17 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
       const reproductionMatch = reproductionRegex.exec(contentStr);
       const reproduction = reproductionMatch ? reproductionMatch[1].trim() : null;
 
-      const cleaned = contentStr.replace(reproductionRegex, '').trim();
+      let cleaned = contentStr.replace(reproductionRegex, '').trim();
+
+      // Strip [Image: ...] context lines when images are shown as thumbnails.
+      if (message.images && message.images.length > 0) {
+        cleaned = cleaned
+          .replace(/\[Image:.*?\]\n(?:Path:.*?\n|Image ID:.*?\n)?/g, '')
+          .trim();
+      }
+
       return { displayText: cleaned, reproductionSteps: reproduction };
-    }, [message.content]);
+    }, [message.content, message.images]);
     
     // Check whether content overflows.
     useEffect(() => {
@@ -210,11 +220,33 @@ export const UserMessageItem = React.memo<UserMessageItemProps>(
           </div>
         </div>
 
+        {message.images && message.images.length > 0 && (
+          <div className="user-message-item__images">
+            {message.images.map(img => {
+              const src = img.dataUrl || (img.imagePath ? `https://asset.localhost/${encodeURIComponent(img.imagePath)}` : undefined);
+              return src ? (
+                <div key={img.id} className="user-message-item__image-thumb" onClick={(e) => { e.stopPropagation(); setLightboxImage(src); }}>
+                  <img src={src} alt={img.name} />
+                </div>
+              ) : null;
+            })}
+          </div>
+        )}
+
         {reproductionSteps && (
           <div className="user-message-item__blocks">
             {reproductionSteps && <ReproductionStepsBlock steps={reproductionSteps} />}
           </div>
         )}
+
+        {lightboxImage && (
+          <div className="user-message-item__lightbox" onClick={() => setLightboxImage(null)}>
+            <button className="user-message-item__lightbox-close" onClick={() => setLightboxImage(null)}>
+              <X size={20} />
+            </button>
+            <img src={lightboxImage} alt="Preview" onClick={(e) => e.stopPropagation()} />
+          </div>
+        )}
       </div>
     );
   }
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
index cd18d687..c590a490 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.scss
@@ -5,20 +5,19 @@
 
 .virtual-item-wrapper {
   width: 100%;
-  max-width: 900px; /* A4-like max width. */
-  margin: 0 auto; /* Center horizontally. */
+  max-width: 900px;
+  margin: 0 auto;
   box-sizing: border-box;
-  min-height: 1px; /* Prevent zero-size errors in react-virtuoso. */
-  padding: 0; /* Spacing handled by children. */
+  min-height: 1px;
+  padding: 0;
   
-  // Responsive: medium screens.
   @media (max-width: 1200px) {
     max-width: 800px;
   }
   
-  // Responsive: small screens.
   @media (max-width: 768px) {
     max-width: 100%;
   }
 }
 
+
diff --git a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
index 83ace737..389590fe 100644
--- a/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
+++ b/src/web-ui/src/flow_chat/components/modern/VirtualItemRenderer.tsx
@@ -1,13 +1,15 @@
 /**
  * Virtual item renderer.
- * Renders user messages, model rounds, or explore groups by type.
+ * Renders user messages, model rounds, explore groups, or image-analyzing indicators by type.
  */
 
 import React from 'react';
+import { Loader2 } from 'lucide-react';
 import type { VirtualItem } from '../../store/modernFlowChatStore';
 import { UserMessageItem } from './UserMessageItem';
 import { ModelRoundItem } from './ModelRoundItem';
 import { ExploreGroupRenderer } from './ExploreGroupRenderer';
+import { CompactToolCard, CompactToolCardHeader } from '../../tool-cards/CompactToolCard';
 import './VirtualItemRenderer.scss';
 
 interface VirtualItemRendererProps {
@@ -38,9 +40,23 @@ export const VirtualItemRenderer = React.memo<VirtualItemRendererProps>(
               turnId={item.turnId}
             />
           );
+
+        case 'image-analyzing':
+          return (
+            <div className="model-round-item model-round-item--streaming">
+              <CompactToolCard
+                status="running"
+                header={
+                  <CompactToolCardHeader
+                    statusIcon={<Loader2 className="animate-spin" size={12} />}
+                    content="Analyzing image with image understanding model..."
+                  />
+                }
+              />
+            </div>
+          );
         
         default:
-          // Return a placeholder instead of null to avoid zero-size errors.
           return <div style={{ minHeight: '1px' }} />;
       }
     })();
diff --git a/src/web-ui/src/flow_chat/hooks/useMessageSender.ts b/src/web-ui/src/flow_chat/hooks/useMessageSender.ts
index dc74fe44..b2cc677d 100644
--- a/src/web-ui/src/flow_chat/hooks/useMessageSender.ts
+++ b/src/web-ui/src/flow_chat/hooks/useMessageSender.ts
@@ -1,6 +1,11 @@
 /**
  * Message sending hook.
  * Encapsulates session creation, image uploads, and message assembly.
+ *
+ * Image handling is fully delegated to the backend coordinator which
+ * decides whether to pre-analyse via a vision model or attach images
+ * directly.  The frontend only uploads clipboard images and passes
+ * ImageContextData[] through to the backend.
  */
 
 import { useCallback } from 'react';
@@ -33,162 +38,14 @@ interface UseMessageSenderReturn {
   isSending: boolean;
 }
 
-type ImageInputStrategy = 'vision-preanalysis' | 'direct-attach';
-
-interface StrategyDecision {
-  strategy: ImageInputStrategy;
-  modelId: string | null;
-  supportsImageUnderstanding: boolean;
-  reason: string;
-}
-
-interface ImageAnalysisResult {
-  image_id: string;
-  summary: string;
-  detailed_description: string;
-  detected_elements: string[];
-  confidence: number;
-  analysis_time_ms: number;
-}
-
-const ENABLE_DIRECT_ATTACH_WHEN_SUPPORTED = true;
-
-async function resolveSessionModelId(
-  flowChatManager: FlowChatManager,
-  sessionId: string | undefined,
-  agentType?: string
-): Promise<string | null> {
-  const state = flowChatManager.getFlowChatState();
-  const session = sessionId ? state.sessions.get(sessionId) : undefined;
-  const configuredModel = session?.config?.modelName || null;
-  const { configManager } = await import('@/infrastructure/config/services/ConfigManager');
-  const defaultModels = await configManager.getConfig<Record<string, string>>('ai.default_models') || {};
-  const agentModels = await configManager.getConfig<Record<string, string>>('ai.agent_models') || {};
-
-  const resolveAlias = (modelId: string | null): string | null => {
-    if (!modelId) return null;
-    if (modelId === 'primary') {
-      return defaultModels.primary || null;
-    }
-    if (modelId === 'fast') {
-      return defaultModels.fast || defaultModels.primary || null;
-    }
-    if (modelId === 'default') {
-      return defaultModels.primary || null;
-    }
-    return modelId;
-  };
-
-  const effectiveAgentType = (agentType || session?.mode || 'agentic').trim();
-  const configuredFromAgentModels = resolveAlias(
-    effectiveAgentType ? (agentModels[effectiveAgentType] ?? null) : null
-  );
-  if (configuredFromAgentModels) {
-    return configuredFromAgentModels;
-  }
-
-  // Backward-compatibility fallback for historical sessions.
-  const resolvedConfigured = resolveAlias(configuredModel);
-  if (resolvedConfigured) {
-    return resolvedConfigured;
-  }
-
-  const { getDefaultPrimaryModel } = await import('@/infrastructure/config/utils/modelConfigHelpers');
-  return getDefaultPrimaryModel();
-}
-
-async function modelSupportsImageUnderstanding(modelId: string | null): Promise<boolean> {
-  if (!modelId) return false;
-
-  const { configManager } = await import('@/infrastructure/config/services/ConfigManager');
-  const allModels = await configManager.getConfig<any[]>('ai.models') || [];
-  const model = allModels.find(
-    m => m.id === modelId || m.name === modelId || m.model_name === modelId
-  );
-  if (!model || model.enabled === false) return false;
-
-  const capabilities = Array.isArray(model?.capabilities) ? model.capabilities : [];
-  const category = typeof model?.category === 'string' ? model.category : '';
-  return capabilities.includes('image_understanding') || category === 'multimodal';
-}
-
-async function chooseImageInputStrategy(
-  flowChatManager: FlowChatManager,
-  sessionId: string | undefined,
-  agentType?: string
-): Promise<StrategyDecision> {
-  const modelId = await resolveSessionModelId(flowChatManager, sessionId, agentType);
-  const supportsImageUnderstanding = await modelSupportsImageUnderstanding(modelId);
-
-  if (supportsImageUnderstanding && ENABLE_DIRECT_ATTACH_WHEN_SUPPORTED) {
-    return {
-      strategy: 'direct-attach',
-      modelId,
-      supportsImageUnderstanding,
-      reason: 'model_supports_image_understanding',
-    };
-  }
-
-  return {
-    strategy: 'vision-preanalysis',
-    modelId,
-    supportsImageUnderstanding,
-    reason: supportsImageUnderstanding
-      ? 'direct_attach_disabled_by_feature_flag'
-      : 'primary_model_is_text_only',
-  };
-}
-
-async function analyzeImagesBeforeSend(
-  imageContexts: ImageContext[],
-  sessionId: string,
-  userMessage: string
-): Promise<ImageAnalysisResult[]> {
-  if (imageContexts.length === 0) return [];
-
-  const { imageAnalysisAPI } = await import('@/infrastructure/api/service-api/ImageAnalysisAPI');
-  return imageAnalysisAPI.analyzeImages({
-    session_id: sessionId,
-    user_message: userMessage,
-    images: imageContexts.map(ctx => ({
-      id: ctx.id,
-      image_path: ctx.isLocal ? ctx.imagePath : undefined,
-      data_url: !ctx.isLocal ? ctx.dataUrl : undefined,
-      mime_type: ctx.mimeType,
-      metadata: {
-        name: ctx.imageName,
-        width: ctx.width,
-        height: ctx.height,
-        file_size: ctx.fileSize,
-        source: ctx.source,
-      },
-    })),
-  });
-}
-
-function formatImageContextLine(
-  ctx: ImageContext,
-  analysis?: ImageAnalysisResult,
-  strategy?: ImageInputStrategy
-): string {
+function formatImageContextLine(ctx: ImageContext): string {
   const imgName = ctx.imageName || 'Untitled image';
   const imgSize = ctx.fileSize ? ` (${(ctx.fileSize / 1024).toFixed(1)}KB)` : '';
   const sourceLine = ctx.isLocal
     ? `Path: ${ctx.imagePath}`
     : `Image ID: ${ctx.id}`;
 
-  if (strategy === 'direct-attach') {
-    return `[Image: ${imgName}${imgSize}]\n${sourceLine}\nAttached as multimodal image input.`;
-  }
-
-  if (!analysis) {
-    return `[Image: ${imgName}${imgSize}]\n${sourceLine}\nTip: You can use the view_image tool (${ctx.isLocal ? 'image_path' : 'image_id'}).`;
-  }
-
-  const topElements = (analysis.detected_elements || []).slice(0, 5).join(', ');
-  const keyElementsLine = topElements ? `\nPre-analysis key elements: ${topElements}` : '';
-
-  return `[Image: ${imgName}${imgSize}]\n${sourceLine}\nPre-analysis summary: ${analysis.summary}${keyElementsLine}`;
+  return `[Image: ${imgName}${imgSize}]\n${sourceLine}`;
 }
 
 export function useMessageSender(props: UseMessageSenderProps): UseMessageSenderReturn {
@@ -267,59 +124,10 @@ export function useMessageSender(props: UseMessageSenderProps): UseMessageSender
         }
       }
 
-      let strategyDecision: StrategyDecision = {
-        strategy: 'vision-preanalysis',
-        modelId: null,
-        supportsImageUnderstanding: false,
-        reason: 'fallback_default_preanalysis',
-      };
-      try {
-        strategyDecision = await chooseImageInputStrategy(
-          flowChatManager,
-          sessionId,
-          currentAgentType || undefined
-        );
-      } catch (error) {
-        log.warn('Failed to resolve image input strategy, using pre-analysis fallback', {
-          sessionId,
-          error: (error as Error)?.message ?? 'unknown',
-        });
-      }
-
-      log.debug('Image input strategy selected', {
-        sessionId,
-        strategy: strategyDecision.strategy,
-        modelId: strategyDecision.modelId,
-        supportsImageUnderstanding: strategyDecision.supportsImageUnderstanding,
-        reason: strategyDecision.reason,
-      });
-
-      let imageAnalyses: ImageAnalysisResult[] = [];
-      if (imageContexts.length > 0) {
-        if (strategyDecision.strategy === 'vision-preanalysis') {
-          try {
-            imageAnalyses = await analyzeImagesBeforeSend(imageContexts, sessionId!, trimmedMessage);
-            log.debug('Image pre-analysis completed', {
-              sessionId,
-              imageCount: imageContexts.length,
-              analysisCount: imageAnalyses.length,
-            });
-          } catch (error) {
-            log.warn('Image pre-analysis failed, continuing with context hints only', {
-              sessionId,
-              imageCount: imageContexts.length,
-              error: (error as Error)?.message ?? 'unknown',
-            });
-          }
-        }
-      }
-
       let fullMessage = trimmedMessage;
       const displayMessage = trimmedMessage;
 
       if (contexts.length > 0) {
-        const analysisByImageId = new Map(imageAnalyses.map(result => [result.image_id, result]));
-
         const fullContextSection = contexts.map(ctx => {
           switch (ctx.type) {
             case 'file':
@@ -328,9 +136,8 @@ export function useMessageSender(props: UseMessageSenderProps): UseMessageSender
               return `[Directory: ${ctx.directoryPath}]`;
             case 'code-snippet':
               return `[Code Snippet: ${ctx.filePath}:${ctx.startLine}-${ctx.endLine}]`;
-            case 'image': {
-              return formatImageContextLine(ctx, analysisByImageId.get(ctx.id), strategyDecision.strategy);
-            }
+            case 'image':
+              return formatImageContextLine(ctx);
             case 'terminal-command':
               return `[Command: ${ctx.command}]`;
             case 'mermaid-node':
@@ -349,31 +156,40 @@ export function useMessageSender(props: UseMessageSenderProps): UseMessageSender
         fullMessage = `${fullContextSection}\n\n${trimmedMessage}`;
       }
 
+      // Always pass imageContexts to the backend; the coordinator decides
+      // whether to pre-analyse via a vision model or attach directly.
+      const imageContextsForBackend = imageContexts.length > 0
+        ? {
+            imageContexts: imageContexts.map(ctx => ({
+              id: ctx.id,
+              image_path: ctx.isLocal ? ctx.imagePath : undefined,
+              data_url: undefined,
+              mime_type: ctx.mimeType,
+              metadata: {
+                name: ctx.imageName,
+                width: ctx.width,
+                height: ctx.height,
+                file_size: ctx.fileSize,
+                source: ctx.source,
+              },
+            })),
+            imageDisplayData: imageContexts.map(ctx => ({
+              id: ctx.id,
+              name: ctx.imageName || 'Image',
+              dataUrl: ctx.dataUrl,
+              imagePath: ctx.isLocal ? ctx.imagePath : undefined,
+              mimeType: ctx.mimeType,
+            })),
+          }
+        : undefined;
+
       await flowChatManager.sendMessage(
         fullMessage,
         sessionId || undefined,
         displayMessage,
         currentAgentType || 'agentic',
         undefined,
-        strategyDecision.strategy === 'direct-attach'
-          ? {
-              imageContexts: imageContexts.map(ctx => ({
-                id: ctx.id,
-                image_path: ctx.isLocal ? ctx.imagePath : undefined,
-                // Clipboard images are uploaded first and referenced by image_id only
-                // to avoid sending large base64 payloads in the turn request.
-                data_url: undefined,
-                mime_type: ctx.mimeType,
-                metadata: {
-                  name: ctx.imageName,
-                  width: ctx.width,
-                  height: ctx.height,
-                  file_size: ctx.fileSize,
-                  source: ctx.source,
-                },
-              })),
-            }
-          : undefined
+        imageContextsForBackend
       );
 
       onClearContexts();
@@ -385,6 +201,7 @@ export function useMessageSender(props: UseMessageSenderProps): UseMessageSender
         sessionId,
         agentType: currentAgentType || 'agentic',
         contextCount: contexts.length,
+        imageCount: imageContexts.length,
       });
     } catch (error) {
       log.error('Failed to send message', {
diff --git a/src/web-ui/src/flow_chat/services/AgenticEventListener.ts b/src/web-ui/src/flow_chat/services/AgenticEventListener.ts
index 1af347d8..6a2dc239 100644
--- a/src/web-ui/src/flow_chat/services/AgenticEventListener.ts
+++ b/src/web-ui/src/flow_chat/services/AgenticEventListener.ts
@@ -8,7 +8,7 @@
  */
 
 import { agentAPI } from '@/infrastructure/api';
-import type { TextChunkEvent, ToolEvent, AgenticEvent, SessionTitleGeneratedEvent } from '@/infrastructure/api/service-api/AgentAPI';
+import type { TextChunkEvent, ToolEvent, AgenticEvent, SessionTitleGeneratedEvent, ImageAnalysisEvent } from '@/infrastructure/api/service-api/AgentAPI';
 import { createLogger } from '@/shared/utils/logger';
 
 type UnlistenFn = () => void;
@@ -19,6 +19,8 @@ export interface AgenticEventCallbacks {
   onSessionCreated?: (event: AgenticEvent) => void;
   onSessionDeleted?: (event: AgenticEvent) => void;
   onSessionStateChanged?: (event: AgenticEvent) => void;
+  onImageAnalysisStarted?: (event: ImageAnalysisEvent) => void;
+  onImageAnalysisCompleted?: (event: ImageAnalysisEvent) => void;
   onDialogTurnStarted?: (event: AgenticEvent) => void;
   onModelRoundStarted?: (event: AgenticEvent) => void;
   onTextChunk?: (event: TextChunkEvent) => void;
@@ -70,6 +72,22 @@ export class AgenticEventListener {
         this.unlistenFunctions.push(unlisten);
       }
 
+      if (callbacks.onImageAnalysisStarted) {
+        const unlisten = agentAPI.onImageAnalysisStarted((event) => {
+          logger.debug('Image analysis started:', event);
+          callbacks.onImageAnalysisStarted?.(event);
+        });
+        this.unlistenFunctions.push(unlisten);
+      }
+
+      if (callbacks.onImageAnalysisCompleted) {
+        const unlisten = agentAPI.onImageAnalysisCompleted((event) => {
+          logger.debug('Image analysis completed:', event);
+          callbacks.onImageAnalysisCompleted?.(event);
+        });
+        this.unlistenFunctions.push(unlisten);
+      }
+
       if (callbacks.onDialogTurnStarted) {
         const unlisten = agentAPI.onDialogTurnStarted((event) => {
           logger.debug('Dialog turn started:', event);
diff --git a/src/web-ui/src/flow_chat/services/FlowChatManager.ts b/src/web-ui/src/flow_chat/services/FlowChatManager.ts
index 8bd292db..80d5de76 100644
--- a/src/web-ui/src/flow_chat/services/FlowChatManager.ts
+++ b/src/web-ui/src/flow_chat/services/FlowChatManager.ts
@@ -158,6 +158,7 @@ export class FlowChatManager {
     switchToMode?: string,
     options?: {
       imageContexts?: import('@/infrastructure/api/service-api/ImageAnalysisAPI').ImageContextData[];
+      imageDisplayData?: Array<{ id: string; name: string; dataUrl?: string; imagePath?: string; mimeType?: string }>;
     }
   ): Promise<void> {
     const targetSessionId = sessionId || this.context.flowChatStore.getState().activeSessionId;
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/EventHandlerModule.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/EventHandlerModule.ts
index 8cbe5d63..5cf88baf 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/EventHandlerModule.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/EventHandlerModule.ts
@@ -17,7 +17,10 @@ import {
 import { notificationService } from '../../../shared/notification-system';
 import { createLogger } from '@/shared/utils/logger';
 import { globalAPI } from '@/infrastructure/api';
+import type { ImageAnalysisEvent } from '@/infrastructure/api/service-api/AgentAPI';
 import type { FlowChatContext, DialogTurn, ModelRound, FlowToolItem } from './types';
+
+const pendingImageAnalysisTurns = new Map<string, string>();
 import { 
   debouncedSaveDialogTurn, 
   immediateSaveDialogTurn, 
@@ -148,6 +151,12 @@ export async function initializeEventListeners(
     onSessionStateChanged: (event) => {
       handleSessionStateChanged(event);
     },
+    onImageAnalysisStarted: (event) => {
+      handleImageAnalysisStarted(context, event as ImageAnalysisEvent);
+    },
+    onImageAnalysisCompleted: (event) => {
+      handleImageAnalysisCompleted(context, event as ImageAnalysisEvent);
+    },
     onDialogTurnStarted: (event) => {
       handleDialogTurnStarted(context, event);
     },
@@ -256,8 +265,127 @@ function handleSessionStateChanged(event: any): void {
 }
 
 /**
- * Handle dialog turn started event
+ * Handle image analysis started event (backend vision pre-analysis).
+ *
+ * Two paths:
+ * - Desktop: MessageModule already created the turn locally → just update its status.
+ * - Remote (mobile/bot): No turn exists yet → create a temporary turn.
+ */
+function handleImageAnalysisStarted(context: FlowChatContext, event: ImageAnalysisEvent): void {
+  const { sessionId, imageCount, userInput, imageMetadata } = event as any;
+
+  const store = FlowChatStore.getInstance();
+  let session = store.getState().sessions.get(sessionId);
+
+  if (!session) {
+    store.addExternalSession(sessionId, 'Remote Session', 'agentic');
+    globalAPI.getCurrentWorkspacePath().then(workspacePath => {
+      if (workspacePath) {
+        store.setState(prev => {
+          const s = prev.sessions.get(sessionId);
+          if (!s || s.workspacePath) return prev;
+          const newSessions = new Map(prev.sessions);
+          newSessions.set(sessionId, { ...s, workspacePath });
+          return { ...prev, sessions: newSessions };
+        });
+      }
+    }).catch(() => {});
+    session = store.getState().sessions.get(sessionId);
+  }
+
+  // Desktop path: the turn was created by MessageModule before the backend call.
+  if (session) {
+    const lastTurn = session.dialogTurns[session.dialogTurns.length - 1];
+    if (lastTurn && (lastTurn.status === 'pending' || lastTurn.status === 'processing' || lastTurn.status === 'image_analyzing')) {
+      store.updateDialogTurn(sessionId, lastTurn.id, turn => ({
+        ...turn,
+        status: 'image_analyzing' as const,
+        userMessage: { ...turn.userMessage, hasImages: true },
+      }));
+      log.info('Image analysis started: updated existing turn', {
+        sessionId,
+        turnId: lastTurn.id,
+        imageCount,
+      });
+      return;
+    }
+  }
+
+  // Extract image display data from metadata (same logic as handleDialogTurnStarted)
+  const metaImages = imageMetadata?.images;
+  const hasMetaImages = Array.isArray(metaImages) && metaImages.length > 0;
+  const images = hasMetaImages
+    ? metaImages.map((img: any) => ({
+        id: img.id || img.name || `img-${Date.now()}`,
+        name: img.name || 'image',
+        dataUrl: img.data_url,
+        imagePath: img.image_path,
+        mimeType: img.mime_type,
+      }))
+    : undefined;
+  const displayInput = imageMetadata?.original_text
+    ? cleanRemoteUserInput(imageMetadata.original_text)
+    : cleanRemoteUserInput(userInput || '');
+
+  // Remote path: create a temporary turn so the desktop UI shows activity.
+  const tempTurnId = `_img_analysis_${sessionId}_${Date.now()}`;
+
+  const tempTurn: DialogTurn = {
+    id: tempTurnId,
+    sessionId,
+    userMessage: {
+      id: `user_img_${Date.now()}`,
+      content: displayInput,
+      timestamp: Date.now(),
+      hasImages: true,
+      images,
+    },
+    modelRounds: [],
+    status: 'image_analyzing',
+    startTime: Date.now(),
+  };
+
+  store.addDialogTurn(sessionId, tempTurn);
+  pendingImageAnalysisTurns.set(sessionId, tempTurnId);
+
+  context.contentBuffers.set(sessionId, new Map());
+  context.activeTextItems.set(sessionId, new Map());
+
+  stateMachineManager.transition(sessionId, SessionExecutionEvent.START, {
+    taskId: sessionId,
+    dialogTurnId: tempTurnId,
+  });
+
+  log.info('Image analysis started: created temp turn for remote', {
+    sessionId,
+    tempTurnId,
+    imageCount,
+  });
+}
+
+/**
+ * Handle image analysis completed event.
+ * Updates the turn status so the UI transitions from "analyzing" to "processing".
  */
+function handleImageAnalysisCompleted(_context: FlowChatContext, event: ImageAnalysisEvent): void {
+  const { sessionId, success, durationMs } = event;
+
+  const store = FlowChatStore.getInstance();
+  const session = store.getState().sessions.get(sessionId);
+
+  if (session) {
+    const lastTurn = session.dialogTurns[session.dialogTurns.length - 1];
+    if (lastTurn && lastTurn.status === 'image_analyzing') {
+      store.updateDialogTurn(sessionId, lastTurn.id, turn => ({
+        ...turn,
+        status: 'processing' as const,
+      }));
+    }
+  }
+
+  log.info('Image analysis completed', { sessionId, success, durationMs });
+}
+
 /**
  * Strip agent-internal XML wrapper tags from user input before displaying.
  * Handles: <user_query>...</user_query> and trailing <system_reminder>...</system_reminder>
@@ -278,13 +406,36 @@ function cleanRemoteUserInput(raw: string): string {
 }
 
 function handleDialogTurnStarted(context: FlowChatContext, event: any): void {
-  const { sessionId, turnId, turnIndex, userInput, subagentParentInfo } = event;
+  const { sessionId, turnId, turnIndex, userInput, originalUserInput, userMessageMetadata, subagentParentInfo } = event;
 
   if (subagentParentInfo) {
     return;
   }
 
   const store = FlowChatStore.getInstance();
+
+  // Clean up temp image analysis turn if one exists for this session
+  const tempTurnId = pendingImageAnalysisTurns.get(sessionId);
+  const hadTempTurn = !!tempTurnId;
+  if (tempTurnId) {
+    store.deleteDialogTurn(sessionId, tempTurnId);
+    pendingImageAnalysisTurns.delete(sessionId);
+
+    // State machine was already transitioned to PROCESSING by ImageAnalysisStarted.
+    // Update the context's dialogTurnId to the real turn ID.
+    const machine = stateMachineManager.get(sessionId);
+    if (machine) {
+      const ctx = machine.getContext();
+      ctx.currentDialogTurnId = turnId;
+    }
+
+    log.info('Replaced temp image analysis turn with real turn', {
+      sessionId,
+      tempTurnId,
+      realTurnId: turnId,
+    });
+  }
+
   const state = store.getState();
   const session = state.sessions.get(sessionId);
 
@@ -304,6 +455,22 @@ function handleDialogTurnStarted(context: FlowChatContext, event: any): void {
     }).catch(() => { /* ignore */ });
   }
 
+  // Extract image display data from metadata (sent by coordinator for all platforms)
+  const metaImages = userMessageMetadata?.images;
+  const hasImages = Array.isArray(metaImages) && metaImages.length > 0;
+  const images = hasImages
+    ? metaImages.map((img: any) => ({
+        id: img.id || img.name || `img-${Date.now()}`,
+        name: img.name || 'image',
+        dataUrl: img.data_url,
+        imagePath: img.image_path,
+        mimeType: img.mime_type,
+      }))
+    : undefined;
+  const displayContent = originalUserInput
+    ? cleanRemoteUserInput(originalUserInput)
+    : cleanRemoteUserInput(userInput || '');
+
   const freshSession = store.getState().sessions.get(sessionId);
   const dialogTurn = freshSession?.dialogTurns.find((turn: DialogTurn) => turn.id === turnId);
   if (!dialogTurn) {
@@ -312,8 +479,10 @@ function handleDialogTurnStarted(context: FlowChatContext, event: any): void {
       sessionId,
       userMessage: {
         id: `user_remote_${Date.now()}`,
-        content: cleanRemoteUserInput(userInput || ''),
-        timestamp: Date.now()
+        content: displayContent,
+        timestamp: Date.now(),
+        hasImages,
+        images,
       },
       modelRounds: [],
       status: 'pending',
@@ -325,11 +494,12 @@ function handleDialogTurnStarted(context: FlowChatContext, event: any): void {
     context.contentBuffers.set(sessionId, new Map());
     context.activeTextItems.set(sessionId, new Map());
 
-    // Transition state machine to PROCESSING so subsequent events are not filtered
-    stateMachineManager.transition(sessionId, SessionExecutionEvent.START, {
-      taskId: sessionId,
-      dialogTurnId: turnId,
-    });
+    if (!hadTempTurn) {
+      stateMachineManager.transition(sessionId, SessionExecutionEvent.START, {
+        taskId: sessionId,
+        dialogTurnId: turnId,
+      });
+    }
     return;
   }
 
@@ -964,6 +1134,15 @@ function handleDialogTurnCancelled(
   saveDialogTurnToDisk(context, sessionId, turnId).catch(err => {
     log.warn('Failed to save cancelled dialog turn', { sessionId, turnId, error: err });
   });
+
+  // Transition state machine to IDLE.  When the desktop's own stop button
+  // is used, USER_CANCEL is dispatched before DialogTurnCancelled arrives,
+  // so the machine is already IDLE.  When cancellation comes from an
+  // external source (mobile remote), the machine is still PROCESSING.
+  const currentState = stateMachineManager.getCurrentState(sessionId);
+  if (currentState === SessionExecutionState.PROCESSING) {
+    stateMachineManager.transition(sessionId, SessionExecutionEvent.STREAM_COMPLETE);
+  }
 }
 
 /**
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/MessageModule.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/MessageModule.ts
index a1d489d8..3bc0083b 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/MessageModule.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/MessageModule.ts
@@ -35,6 +35,7 @@ export async function sendMessage(
   switchToMode?: string,
   options?: {
     imageContexts?: ImageInputContextData[];
+    imageDisplayData?: Array<{ id: string; name: string; dataUrl?: string; imagePath?: string; mimeType?: string }>;
   }
 ): Promise<void> {
   const session = context.flowChatStore.getState().sessions.get(sessionId);
@@ -55,16 +56,20 @@ export async function sendMessage(
     
     const dialogTurnId = `dialog_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
     
+    const hasImages = (options?.imageContexts?.length ?? 0) > 0;
+
     const dialogTurn: DialogTurn = {
       id: dialogTurnId,
       sessionId: sessionId,
       userMessage: {
         id: `user_${Date.now()}`,
         content: displayMessage || message,
-        timestamp: Date.now()
+        timestamp: Date.now(),
+        hasImages,
+        images: options?.imageDisplayData,
       },
       modelRounds: [],
-      status: 'pending',
+      status: hasImages ? 'image_analyzing' : 'pending',
       startTime: Date.now()
     };
 
diff --git a/src/web-ui/src/flow_chat/services/flow-chat-manager/PersistenceModule.ts b/src/web-ui/src/flow_chat/services/flow-chat-manager/PersistenceModule.ts
index 4bfaa150..c0f7e022 100644
--- a/src/web-ui/src/flow_chat/services/flow-chat-manager/PersistenceModule.ts
+++ b/src/web-ui/src/flow_chat/services/flow-chat-manager/PersistenceModule.ts
@@ -229,6 +229,18 @@ export function convertDialogTurnToBackendFormat(dialogTurn: DialogTurn, turnInd
       id: dialogTurn.userMessage.id,
       content: dialogTurn.userMessage.content,
       timestamp: dialogTurn.userMessage.timestamp,
+      metadata: dialogTurn.userMessage.images?.length
+        ? {
+            images: dialogTurn.userMessage.images.map(img => ({
+              id: img.id,
+              name: img.name,
+              data_url: img.dataUrl,
+              image_path: img.imagePath,
+              mime_type: img.mimeType,
+            })),
+            original_text: dialogTurn.userMessage.content,
+          }
+        : undefined,
     },
     modelRounds: dialogTurn.modelRounds.map((round, roundIndex) => {
       return {
diff --git a/src/web-ui/src/flow_chat/store/FlowChatStore.ts b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
index a29cc097..f4353193 100644
--- a/src/web-ui/src/flow_chat/store/FlowChatStore.ts
+++ b/src/web-ui/src/flow_chat/store/FlowChatStore.ts
@@ -1230,14 +1230,34 @@ export class FlowChatStore {
    * Convert DialogTurnData to FlowChat DialogTurn format
    */
   private convertToDialogTurns(turns: any[]): DialogTurn[] {
-    return turns.map(turn => ({
+    return turns.map(turn => {
+      const metadata = turn.userMessage.metadata;
+      const metaImages = metadata?.images;
+      const hasImages = Array.isArray(metaImages) && metaImages.length > 0;
+      const images = hasImages
+        ? metaImages.map((img: any) => ({
+            id: img.id || img.name || `img-${Date.now()}`,
+            name: img.name || 'image',
+            dataUrl: img.data_url,
+            imagePath: img.image_path,
+            mimeType: img.mime_type,
+          }))
+        : undefined;
+
+      const displayContent = metadata?.original_text || turn.userMessage.content;
+
+
+
+      return {
       id: turn.turnId,
       sessionId: turn.sessionId,
       userMessage: {
         id: turn.userMessage.id,
         type: 'user' as const,
-        content: turn.userMessage.content,
+        content: displayContent,
         timestamp: turn.userMessage.timestamp,
+        hasImages,
+        images,
       },
       modelRounds: turn.modelRounds.map((round: any) => ({
         id: round.id,
@@ -1307,7 +1327,8 @@ export class FlowChatStore {
       status: turn.status,
       startTime: turn.startTime,
       backendTurnIndex: turn.turnIndex,
-    }));
+    };
+    });
   }
 
   public setDialogTurnTodos(sessionId: string, turnId: string, todos: import('../types/flow-chat').TodoItem[]): void {
diff --git a/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts b/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts
index ba9bdc82..f40f1041 100644
--- a/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts
+++ b/src/web-ui/src/flow_chat/store/modernFlowChatStore.ts
@@ -38,7 +38,8 @@ export interface ExploreGroupData {
 export type VirtualItem =
   | { type: 'user-message'; data: DialogTurn['userMessage']; turnId: string }
   | { type: 'model-round'; data: ModelRound; turnId: string; isLastRound: boolean }
-  | { type: 'explore-group'; data: ExploreGroupData; turnId: string };
+  | { type: 'explore-group'; data: ExploreGroupData; turnId: string }
+  | { type: 'image-analyzing'; turnId: string };
 
 /**
  * Currently visible turn information
@@ -150,6 +151,11 @@ function sessionToVirtualItems(session: Session | null): VirtualItem[] {
       });
     }
 
+    if (turn.status === 'image_analyzing' && turn.modelRounds.length === 0) {
+      items.push({ type: 'image-analyzing', turnId: turn.id });
+      return;
+    }
+
     const nonEmptyRounds = turn.modelRounds.filter(round => round.items && round.items.length > 0);
     
     interface TempExploreGroup {
diff --git a/src/web-ui/src/flow_chat/types/flow-chat.ts b/src/web-ui/src/flow_chat/types/flow-chat.ts
index 5a674542..7a41aad5 100644
--- a/src/web-ui/src/flow_chat/types/flow-chat.ts
+++ b/src/web-ui/src/flow_chat/types/flow-chat.ts
@@ -101,6 +101,13 @@ export interface DialogTurn {
     content: string;
     timestamp: number;
     hasImages?: boolean;
+    images?: Array<{
+      id: string;
+      name: string;
+      dataUrl?: string;
+      imagePath?: string;
+      mimeType?: string;
+    }>;
   };
   
   // Image analysis phase (only when images exist).
diff --git a/src/web-ui/src/flow_chat/utils/imageUtils.ts b/src/web-ui/src/flow_chat/utils/imageUtils.ts
index bec1abb4..92bac77a 100644
--- a/src/web-ui/src/flow_chat/utils/imageUtils.ts
+++ b/src/web-ui/src/flow_chat/utils/imageUtils.ts
@@ -8,6 +8,8 @@ import { createLogger } from '@/shared/utils/logger';
 
 const log = createLogger('imageUtils');
 
+let clipboardImageCounter = 0;
+
 /**
  * Generate image thumbnail
  * @param file Image file
@@ -277,7 +279,16 @@ export async function createImageContextFromClipboard(
     id: `img-clipboard-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
     type: 'image',
     imagePath: '', // Clipboard images do not have a path.
-    imageName: file.name || `clipboard-${Date.now()}.${file.type.split('/')[1]}`,
+    imageName: (() => {
+      const raw = file.name || '';
+      const ext = file.type.split('/')[1] || 'png';
+      const genericPattern = /^image\.\w+$/i;
+      if (!raw || genericPattern.test(raw)) {
+        clipboardImageCounter++;
+        return `image-${clipboardImageCounter}.${ext}`;
+      }
+      return raw;
+    })(),
     width: dimensions.width,
     height: dimensions.height,
     fileSize: file.size,
diff --git a/src/web-ui/src/infrastructure/api/service-api/AgentAPI.ts b/src/web-ui/src/infrastructure/api/service-api/AgentAPI.ts
index 5540f4a8..aca0b2bc 100644
--- a/src/web-ui/src/infrastructure/api/service-api/AgentAPI.ts
+++ b/src/web-ui/src/infrastructure/api/service-api/AgentAPI.ts
@@ -105,6 +105,13 @@ export interface ToolEvent extends AgenticEvent {
 }
 
  
+export interface ImageAnalysisEvent extends AgenticEvent {
+  imageCount?: number;
+  userInput?: string;
+  success?: boolean;
+  durationMs?: number;
+}
+
 export interface CompressionEvent extends AgenticEvent {
   compressionId: string;          
   
@@ -299,6 +306,14 @@ export class AgentAPI {
     return api.listen<CompressionEvent>('agentic://context-compression-failed', callback);
   }
 
+  onImageAnalysisStarted(callback: (event: ImageAnalysisEvent) => void): () => void {
+    return api.listen<ImageAnalysisEvent>('agentic://image-analysis-started', callback);
+  }
+
+  onImageAnalysisCompleted(callback: (event: ImageAnalysisEvent) => void): () => void {
+    return api.listen<ImageAnalysisEvent>('agentic://image-analysis-completed', callback);
+  }
+
    
   async getAvailableTools(): Promise<string[]> {
     try {
diff --git a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
index bb2fa81d..d1914065 100644
--- a/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AIModelConfig.tsx
@@ -582,7 +582,7 @@ const AIModelConfig: React.FC = () => {
 
         <div className="bitfun-ai-model-config__form bitfun-ai-model-config__form--modal">
           <ConfigPageSection
-            title={t('editSubtitle', { defaultValue: '基础模型参数配置' })}
+            title={t('editSubtitle')}
             className="bitfun-ai-model-config__edit-section"
           >
             {isFromTemplate ? (
@@ -842,14 +842,14 @@ const AIModelConfig: React.FC = () => {
 
       <ConfigPageContent className="bitfun-ai-model-config__content">
         <ConfigPageSection
-          title={tDefault('tabs.default', { defaultValue: '默认模型分配' })}
-          description={tDefault('subtitle', { defaultValue: '为不同能力场景指定默认模型。' })}
+          title={tDefault('tabs.default')}
+          description={tDefault('subtitle')}
         >
           <DefaultModelConfig />
         </ConfigPageSection>
 
         <ConfigPageSection
-          title={tDefault('tabs.models', { defaultValue: '已配置模型' })}
+          title={tDefault('tabs.models')}
           description={t('subtitle')}
           extra={(
             <IconButton
@@ -899,7 +899,7 @@ const AIModelConfig: React.FC = () => {
                   <div className="bitfun-ai-model-config__details">
                     <div className="bitfun-ai-model-config__details-section">
                       <div className="bitfun-ai-model-config__details-section-title">
-                        {t('details.basicInfo', { defaultValue: '基础信息' })}
+                        {t('details.basicInfo')}
                       </div>
                       <div className="bitfun-ai-model-config__details-grid">
                         <div className="bitfun-ai-model-config__details-item">
@@ -924,7 +924,7 @@ const AIModelConfig: React.FC = () => {
                         </div>
                         {config.capabilities && config.capabilities.length > 0 && (
                           <div className="bitfun-ai-model-config__details-item bitfun-ai-model-config__details-item--wide">
-                            <span className="bitfun-ai-model-config__details-label">{t('details.capabilities', { defaultValue: '能力' })}</span>
+                            <span className="bitfun-ai-model-config__details-label">{t('details.capabilities')}</span>
                             <div className="bitfun-ai-model-config__details-tags">
                               {config.capabilities.map(capability => (
                                 <span key={capability} className="bitfun-ai-model-config__details-tag">
@@ -1012,7 +1012,7 @@ const AIModelConfig: React.FC = () => {
         </ConfigPageSection>
 
         <ConfigPageSection
-          title={tDefault('tabs.proxy', { defaultValue: '网络代理' })}
+          title={tDefault('tabs.proxy')}
           description={t('proxy.enableHint')}
           extra={(
             <Button
diff --git a/src/web-ui/src/infrastructure/config/components/AIRulesMemoryConfig.tsx b/src/web-ui/src/infrastructure/config/components/AIRulesMemoryConfig.tsx
index 4cff2599..b538a43b 100644
--- a/src/web-ui/src/infrastructure/config/components/AIRulesMemoryConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/AIRulesMemoryConfig.tsx
@@ -465,8 +465,8 @@ function MemoryPanel() {
   return (
     <div className="bitfun-ai-rules-memory-config__memory-panel">
       <ConfigPageSection
-        title={t('section.knowledgeList.title', { defaultValue: '知识记忆列表' })}
-        description={t('section.knowledgeList.description', { defaultValue: '可新建与查看的知识记忆。' })}
+        title={t('section.memoryList.title')}
+        description={t('section.memoryList.description')}
         extra={scopeTab === 'user' ? addButtonUser : undefined}
       >
         <Tabs type="line" size="small" activeKey={scopeTab} onChange={(k) => setScopeTab(k as ScopeTab)} className="bitfun-ai-rules-memory-config__scope-tabs">
diff --git a/src/web-ui/src/infrastructure/config/components/LspConfig.tsx b/src/web-ui/src/infrastructure/config/components/LspConfig.tsx
index fe0acaa2..1d316503 100644
--- a/src/web-ui/src/infrastructure/config/components/LspConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/LspConfig.tsx
@@ -112,8 +112,8 @@ const LspConfig: React.FC = () => {
         )}
 
         <ConfigPageSection
-          title={t('section.settings.title', { defaultValue: '基础设置' })}
-          description={t('section.settings.description', { defaultValue: '语言服务的运行参数配置。' })}
+          title={t('section.settings.title')}
+          description={t('section.settings.description')}
           extra={saveActions}
         >
           <ConfigPageRow
@@ -129,8 +129,8 @@ const LspConfig: React.FC = () => {
         </ConfigPageSection>
 
         <ConfigPageSection
-          title={t('section.plugins.title', { defaultValue: '语言插件' })}
-          description={t('section.plugins.description', { defaultValue: '管理已安装的语言服务插件。' })}
+          title={t('section.plugins.title')}
+          description={t('section.plugins.description')}
           extra={
             <>
               <IconButton
diff --git a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
index 94e440f9..8bcb24a5 100644
--- a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.tsx
@@ -809,16 +809,12 @@ const McpToolsConfig: React.FC = () => {
 
       <ConfigPageContent>
         <ConfigPageSection
-          title={tTools('section.config.title', { defaultValue: '执行行为' })}
-          description={tTools('section.config.description', {
-            defaultValue: '控制工具调用时的确认与超时策略。',
-          })}
+          title={tTools('section.config.title')}
+          description={tTools('section.config.description')}
         >
           <ConfigPageRow
             label={tTools('config.autoExecute')}
-            description={tTools('config.autoExecuteDesc', {
-              defaultValue: '跳过工具执行前的用户确认步骤。',
-            })}
+            description={tTools('config.autoExecuteDesc')}
           >
             <Switch
               checked={skipToolConfirmation}
@@ -830,9 +826,7 @@ const McpToolsConfig: React.FC = () => {
 
           <ConfigPageRow
             label={tTools('config.confirmTimeout')}
-            description={tTools('config.confirmTimeoutDesc', {
-              defaultValue: '等待用户确认工具调用的最长时间（秒）。',
-            })}
+            description={tTools('config.confirmTimeoutDesc')}
           >
             <NumberInput
               value={confirmationTimeout === '' ? 0 : parseInt(confirmationTimeout, 10)}
@@ -850,9 +844,7 @@ const McpToolsConfig: React.FC = () => {
 
           <ConfigPageRow
             label={tTools('config.executionTimeout')}
-            description={tTools('config.executionTimeoutDesc', {
-              defaultValue: '工具执行的最长时间（秒）。',
-            })}
+            description={tTools('config.executionTimeoutDesc')}
           >
             <NumberInput
               value={executionTimeout === '' ? 0 : parseInt(executionTimeout, 10)}
@@ -869,10 +861,8 @@ const McpToolsConfig: React.FC = () => {
 
         {/* MCP section */}
         <ConfigPageSection
-          title={tMcp('section.knowledgeList.title', { defaultValue: 'MCP 服务列表' })}
-          description={tMcp('section.knowledgeList.description', {
-            defaultValue: '统一管理 MCP 服务状态与 JSON 配置。',
-          })}
+          title={tMcp('section.serverList.title')}
+          description={tMcp('section.serverList.description')}
           extra={mcpSectionExtra}
         >
           {showJsonEditor && (
@@ -960,10 +950,8 @@ const McpToolsConfig: React.FC = () => {
 
         {/* Tools section: list */}
         <ConfigPageSection
-          title={tTools('section.list.title', { defaultValue: '工具列表' })}
-          description={tTools('section.list.description', {
-            defaultValue: `共 ${tools.length} 个可用工具。`,
-          })}
+          title={tTools('section.list.title')}
+          description={tTools('section.list.description', { count: tools.length })}
         >
           {toolsLoading && (
             <div className="bitfun-collection-empty">
diff --git a/src/web-ui/src/infrastructure/config/components/PromptTemplateConfig.tsx b/src/web-ui/src/infrastructure/config/components/PromptTemplateConfig.tsx
index 16d836d0..e08f9463 100644
--- a/src/web-ui/src/infrastructure/config/components/PromptTemplateConfig.tsx
+++ b/src/web-ui/src/infrastructure/config/components/PromptTemplateConfig.tsx
@@ -199,10 +199,10 @@ export const PromptTemplateConfig: React.FC = () => {
 
       <ConfigPageContent>
         <ConfigPageSection
-          title={t('section.knowledgeList.title', { defaultValue: '提示词模板列表' })}
+          title={t('section.templateList.title')}
           description={
             <>
-              {t('section.knowledgeList.description', { defaultValue: '可创建、收藏与复用的提示词模板。' })}
+              {t('section.templateList.description')}
               {' '}
               {t('shortcuts.openPickerReminder')}
               <kbd className="prompt-template-config__shortcut-key">{globalShortcut}</kbd>
diff --git a/src/web-ui/src/locales/en-US/common.json b/src/web-ui/src/locales/en-US/common.json
index 46d0f8a8..72429645 100644
--- a/src/web-ui/src/locales/en-US/common.json
+++ b/src/web-ui/src/locales/en-US/common.json
@@ -236,13 +236,15 @@
     "scanHint": "Scan the QR code with your phone to connect",
     "botHint": "Send the pairing code to the bot to complete pairing",
     "connectedHint": "Mobile device connected. You can close this dialog.",
+    "ngrokUsageLink": "View ngrok tunnel usage & status.",
     "serverUrl": "Server URL",
     "currentIp": "Current IP",
     "gatewayIp": "Gateway IP",
     "feishu": "Feishu",
     "openBot": "Open Bot",
     "stateIdle": "Ready",
-    "stateWaiting": "Waiting for scan...",
+    "stateWaiting": "Waiting for connection...",
+    "urlCopied": "URL Copied",
     "stateWaitingBot": "Waiting for bot confirmation...",
     "stateHandshaking": "Handshaking...",
     "stateVerifying": "Verifying...",
diff --git a/src/web-ui/src/locales/en-US/flow-chat.json b/src/web-ui/src/locales/en-US/flow-chat.json
index 16e4194a..08e25009 100644
--- a/src/web-ui/src/locales/en-US/flow-chat.json
+++ b/src/web-ui/src/locales/en-US/flow-chat.json
@@ -305,9 +305,15 @@
     "toolCallLabel": "🔧 Tool call: {{name}}"
   },
   "exploreRegion": {
-    "readFiles": "Read {{count}} files",
-    "searchCount": "{{count}} searches",
-    "exploreCount": "{{count}} explorations",
+    "readFiles_one": "Read {{count}} file",
+    "readFiles_other": "Read {{count}} files",
+    "readFiles": "Read {{count}} file(s)",
+    "searchCount_one": "{{count}} search",
+    "searchCount_other": "{{count}} searches",
+    "searchCount": "{{count}} search(es)",
+    "exploreCount_one": "{{count}} exploration",
+    "exploreCount_other": "{{count}} explorations",
+    "exploreCount": "{{count}} exploration(s)",
     "separator": ", ",
     "collapse": "Collapse exploration"
   },
diff --git a/src/web-ui/src/locales/en-US/settings/agentic-tools.json b/src/web-ui/src/locales/en-US/settings/agentic-tools.json
index cc8895a4..f3fb9aa7 100644
--- a/src/web-ui/src/locales/en-US/settings/agentic-tools.json
+++ b/src/web-ui/src/locales/en-US/settings/agentic-tools.json
@@ -1,10 +1,23 @@
 {
   "title": "Tool Settings",
   "subtitle": "Tool execution configuration and available tool list",
+  "section": {
+    "config": {
+      "title": "Execution Behavior",
+      "description": "Control confirmation and timeout policies for tool calls."
+    },
+    "list": {
+      "title": "Tool List",
+      "description": "{{count}} tools available."
+    }
+  },
   "config": {
     "autoExecute": "Auto Execute",
+    "autoExecuteDesc": "Skip user confirmation before tool execution.",
     "confirmTimeout": "Confirm Timeout",
+    "confirmTimeoutDesc": "Maximum time (seconds) to wait for user confirmation of tool calls.",
     "executionTimeout": "Execution Timeout",
+    "executionTimeoutDesc": "Maximum time (seconds) for tool execution.",
     "seconds": "sec"
   },
   "filters": {
diff --git a/src/web-ui/src/locales/en-US/settings/ai-memory.json b/src/web-ui/src/locales/en-US/settings/ai-memory.json
index e087d0a0..6fe26b5f 100644
--- a/src/web-ui/src/locales/en-US/settings/ai-memory.json
+++ b/src/web-ui/src/locales/en-US/settings/ai-memory.json
@@ -1,6 +1,12 @@
 {
   "title": "Memory",
   "subtitle": "Manage AI memory",
+  "section": {
+    "memoryList": {
+      "title": "Memory List",
+      "description": "Create and view knowledge memories."
+    }
+  },
   "toolbar": {
     "searchPlaceholder": "Search memories...",
     "addTooltip": "Add memory"
diff --git a/src/web-ui/src/locales/en-US/settings/ai-model.json b/src/web-ui/src/locales/en-US/settings/ai-model.json
index a636a41e..ecace6a3 100644
--- a/src/web-ui/src/locales/en-US/settings/ai-model.json
+++ b/src/web-ui/src/locales/en-US/settings/ai-model.json
@@ -123,6 +123,7 @@
     "contextWindow": "Context Window",
     "maxOutput": "Max Output",
     "description": "Description",
+    "capabilities": "Capabilities",
     "tokens": "tokens"
   },
   "proxy": {
diff --git a/src/web-ui/src/locales/en-US/settings/lsp.json b/src/web-ui/src/locales/en-US/settings/lsp.json
index 6d2bfe0f..6b2ad6e0 100644
--- a/src/web-ui/src/locales/en-US/settings/lsp.json
+++ b/src/web-ui/src/locales/en-US/settings/lsp.json
@@ -1,6 +1,16 @@
 {
   "title": "LSP Plugin Management",
   "subtitle": "Manage Language Server Protocol plugins",
+  "section": {
+    "settings": {
+      "title": "Basic Settings",
+      "description": "Runtime configuration for language services."
+    },
+    "plugins": {
+      "title": "Language Plugins",
+      "description": "Manage installed language service plugins."
+    }
+  },
   "tabs": {
     "plugins": "Plugin Management",
     "settings": "Settings",
diff --git a/src/web-ui/src/locales/en-US/settings/mcp.json b/src/web-ui/src/locales/en-US/settings/mcp.json
index 1bea181d..1be5657a 100644
--- a/src/web-ui/src/locales/en-US/settings/mcp.json
+++ b/src/web-ui/src/locales/en-US/settings/mcp.json
@@ -1,6 +1,12 @@
 {
   "title": "MCP",
   "subtitle": "Manage MCP server connections",
+  "section": {
+    "serverList": {
+      "title": "MCP Server List",
+      "description": "Manage MCP server status and JSON configuration."
+    }
+  },
   "tabs": {
     "servers": "Servers",
     "add": "Add Server"
diff --git a/src/web-ui/src/locales/en-US/settings/prompt-templates.json b/src/web-ui/src/locales/en-US/settings/prompt-templates.json
index e7154e9f..f500a49d 100644
--- a/src/web-ui/src/locales/en-US/settings/prompt-templates.json
+++ b/src/web-ui/src/locales/en-US/settings/prompt-templates.json
@@ -24,6 +24,12 @@
     "copy": "Copy",
     "delete": "Delete"
   },
+  "section": {
+    "templateList": {
+      "title": "Template List",
+      "description": "Create, favorite, and reuse prompt templates."
+    }
+  },
   "shortcuts": {
     "openPickerReminder": "Open template picker: "
   },
diff --git a/src/web-ui/src/locales/zh-CN/common.json b/src/web-ui/src/locales/zh-CN/common.json
index eb5441f6..1be24fd2 100644
--- a/src/web-ui/src/locales/zh-CN/common.json
+++ b/src/web-ui/src/locales/zh-CN/common.json
@@ -236,13 +236,15 @@
     "scanHint": "使用手机扫描二维码进行连接",
     "botHint": "将配对码发送给机器人完成配对",
     "connectedHint": "移动设备已连接，可以关闭此对话框。",
+    "ngrokUsageLink": "查看 ngrok 隧道用量与状态。",
     "serverUrl": "服务器地址",
     "currentIp": "当前 IP",
     "gatewayIp": "网关 IP",
     "feishu": "飞书",
     "openBot": "打开机器人",
     "stateIdle": "就绪",
-    "stateWaiting": "等待扫码...",
+    "stateWaiting": "等待连接...",
+    "urlCopied": "已拷贝 URL",
     "stateWaitingBot": "等待机器人确认...",
     "stateHandshaking": "握手中...",
     "stateVerifying": "验证中...",
diff --git a/src/web-ui/src/locales/zh-CN/settings/agentic-tools.json b/src/web-ui/src/locales/zh-CN/settings/agentic-tools.json
index 53c80abc..fb3a7c93 100644
--- a/src/web-ui/src/locales/zh-CN/settings/agentic-tools.json
+++ b/src/web-ui/src/locales/zh-CN/settings/agentic-tools.json
@@ -1,10 +1,23 @@
 {
   "title": "工具设置",
   "subtitle": "工具执行配置与可用工具列表",
+  "section": {
+    "config": {
+      "title": "执行行为",
+      "description": "控制工具调用时的确认与超时策略。"
+    },
+    "list": {
+      "title": "工具列表",
+      "description": "共 {{count}} 个可用工具。"
+    }
+  },
   "config": {
     "autoExecute": "自动执行",
+    "autoExecuteDesc": "跳过工具执行前的用户确认步骤。",
     "confirmTimeout": "确认超时",
+    "confirmTimeoutDesc": "等待用户确认工具调用的最长时间（秒）。",
     "executionTimeout": "执行超时",
+    "executionTimeoutDesc": "工具执行的最长时间（秒）。",
     "seconds": "秒"
   },
   "filters": {
diff --git a/src/web-ui/src/locales/zh-CN/settings/ai-memory.json b/src/web-ui/src/locales/zh-CN/settings/ai-memory.json
index 39da4266..255c4919 100644
--- a/src/web-ui/src/locales/zh-CN/settings/ai-memory.json
+++ b/src/web-ui/src/locales/zh-CN/settings/ai-memory.json
@@ -1,6 +1,12 @@
 {
   "title": "记忆",
   "subtitle": "管理 AI 记忆",
+  "section": {
+    "memoryList": {
+      "title": "知识记忆列表",
+      "description": "可新建与查看的知识记忆。"
+    }
+  },
   "toolbar": {
     "searchPlaceholder": "搜索记忆...",
     "addTooltip": "添加记忆"
diff --git a/src/web-ui/src/locales/zh-CN/settings/ai-model.json b/src/web-ui/src/locales/zh-CN/settings/ai-model.json
index f402c789..9d162a27 100644
--- a/src/web-ui/src/locales/zh-CN/settings/ai-model.json
+++ b/src/web-ui/src/locales/zh-CN/settings/ai-model.json
@@ -123,6 +123,7 @@
     "contextWindow": "上下文窗口",
     "maxOutput": "最大输出",
     "description": "描述",
+    "capabilities": "能力",
     "tokens": "tokens"
   },
   "proxy": {
diff --git a/src/web-ui/src/locales/zh-CN/settings/lsp.json b/src/web-ui/src/locales/zh-CN/settings/lsp.json
index 12185da0..d78cda1e 100644
--- a/src/web-ui/src/locales/zh-CN/settings/lsp.json
+++ b/src/web-ui/src/locales/zh-CN/settings/lsp.json
@@ -1,6 +1,16 @@
 {
   "title": "LSP 插件管理",
   "subtitle": "管理语言服务器协议插件",
+  "section": {
+    "settings": {
+      "title": "基础设置",
+      "description": "语言服务的运行参数配置。"
+    },
+    "plugins": {
+      "title": "语言插件",
+      "description": "管理已安装的语言服务插件。"
+    }
+  },
   "tabs": {
     "plugins": "插件管理",
     "settings": "设置",
diff --git a/src/web-ui/src/locales/zh-CN/settings/mcp.json b/src/web-ui/src/locales/zh-CN/settings/mcp.json
index c8fae7fd..18be15aa 100644
--- a/src/web-ui/src/locales/zh-CN/settings/mcp.json
+++ b/src/web-ui/src/locales/zh-CN/settings/mcp.json
@@ -1,6 +1,12 @@
 {
   "title": "MCP",
   "subtitle": "管理 MCP 服务器连接",
+  "section": {
+    "serverList": {
+      "title": "MCP 服务列表",
+      "description": "统一管理 MCP 服务状态与 JSON 配置。"
+    }
+  },
   "tabs": {
     "servers": "服务器",
     "add": "添加服务器"
diff --git a/src/web-ui/src/locales/zh-CN/settings/prompt-templates.json b/src/web-ui/src/locales/zh-CN/settings/prompt-templates.json
index b2d1353f..55e4c18a 100644
--- a/src/web-ui/src/locales/zh-CN/settings/prompt-templates.json
+++ b/src/web-ui/src/locales/zh-CN/settings/prompt-templates.json
@@ -24,6 +24,12 @@
     "copy": "复制",
     "delete": "删除"
   },
+  "section": {
+    "templateList": {
+      "title": "提示词模板列表",
+      "description": "可创建、收藏与复用的提示词模板。"
+    }
+  },
   "shortcuts": {
     "openPickerReminder": "打开模板选择器："
   },