buildup gradio app

app.py

@@ -1,19 +1,21 @@
 """
-LifeFlow AI - Main Application v3.1
+LifeFlow AI - Multi-User Safe with Real Streaming
+支持多用戶並發 + 真正的串流輸出 + 安全的設定隔離
 """
 
 import sys
 from pathlib import Path
-
-
 import gradio as gr
 from datetime import datetime
 import time as time_module
+import json
+import uuid
+from typing import Dict, Any, Optional
 
-# 導入配置
-from config import  DEFAULT_SETTINGS, APP_TITLE
+# ===== 導入配置 =====
+from config import DEFAULT_SETTINGS, APP_TITLE
 
-# 導入 UI 組件
+# ===== 導入 UI 組件 =====
 from ui.theme import get_enhanced_css
 from ui.components.header import create_header, create_top_controls
 from ui.components.input_form import create_input_form, toggle_location_inputs
@@ -21,7 +23,7 @@ from ui.components.confirmation import create_confirmation_area, create_exit_but
 from ui.components.results import create_team_area, create_result_area, create_tabs
 from ui.components.modals import create_settings_modal, create_doc_modal
 
-# 導入核心工具
+# ===== 導入核心工具 =====
 from core.utils import (
     create_agent_stream_output, create_agent_card_enhanced,
     create_task_card, create_summary_card, create_animated_map,
@@ -29,496 +31,1006 @@ from core.utils import (
     create_result_visualization
 )
 
+# ===== 導入 Agno Agent 組件 =====
+from agno.models.google import Gemini
+from agno.agent import RunEvent
+from agno.run.team import TeamRunEvent
+
+# ===== 導入 Agent 系統 =====
+from src.agent.base import UserState, Location, get_context
+from src.agent.planner import create_planner_agent
+from src.agent.core_team import create_core_team
+from src.infra.context import set_session_id, get_session_id
+from src.infra.poi_repository import poi_repo
+from src.tools import (
+    ScoutToolkit, OptimizationToolkit,
+    NavigationToolkit, WeatherToolkit, ReaderToolkit
+)
+from src.infra.config import get_settings
+from src.infra.logger import get_logger
+
+logger = get_logger(__name__)
+
+
+class UserSession:
+    """
+    單個用戶的會話數據
+    每個用戶有獨立的實例，確保資料隔離
+    """
+
+    def __init__(self):
+        self.session_id: Optional[str] = None
+        self.planner_agent = None
+        self.core_team = None
+        self.user_state: Optional[UserState] = None
+        self.task_list: list = []
+        self.reasoning_messages: list = []
+        self.chat_history: list = []
+        self.planning_completed: bool = False
+
+        # 存儲位置信息（用於重新初始化 Agent）
+        self.lat: Optional[float] = None
+        self.lng: Optional[float] = None
+
+        # [Security Fix] 用戶個人的自定義設定 (API Keys, Model Choice)
+        self.custom_settings: Dict[str, Any] = {}
+
+        # 系統預設設定 (從環境變數讀取)
+        self.agno_settings = get_settings()
+
+    def to_dict(self) -> Dict[str, Any]:
+        """序列化為字典（用於 Gradio State）"""
+        return {
+            'session_id': self.session_id,
+            'task_list': self.task_list,
+            'reasoning_messages': self.reasoning_messages,
+            'chat_history': self.chat_history,
+            'planning_completed': self.planning_completed,
+            'lat': self.lat,
+            'lng': self.lng,
+            # [Security Fix] 保存用戶自定義設定
+            'custom_settings': self.custom_settings
+        }
+
+    @classmethod
+    def from_dict(cls, data: Dict[str, Any]) -> 'UserSession':
+        """從字典恢復（用於 Gradio State）"""
+        session = cls()
+        session.session_id = data.get('session_id')
+        session.task_list = data.get('task_list', [])
+        session.reasoning_messages = data.get('reasoning_messages', [])
+        session.chat_history = data.get('chat_history', [])
+        session.planning_completed = data.get('planning_completed', False)
+        session.lat = data.get('lat')
+        session.lng = data.get('lng')
+        # [Security Fix] 恢復用戶自定義設定
+        session.custom_settings = data.get('custom_settings', {})
+        return session
+
 
 class LifeFlowAI:
-    """LifeFlow AI - v3.1 主類"""
+    """LifeFlow AI - Multi-User Safe Version"""
 
     def __init__(self):
-        self.settings = DEFAULT_SETTINGS.copy()
-        self.task_list = []
-        self.reasoning_messages = []
-        self.planning_completed = False
-        self.chat_history = []
+        # [Security Fix] 移除全域 settings，避免用戶間資料汙染
+        pass
+
+    def _initialize_agents(self, session: UserSession, lat: float, lng: float):
+        """初始化 Agents（每個用戶獨立，並應用用戶設定）"""
+        session.lat = lat
+        session.lng = lng
+
+        if session.planner_agent is not None:
+            logger.debug(f"Agents already initialized for session {session.session_id}")
+            return
+
+        # 生成 Session ID
+        if session.session_id is None:
+            session.session_id = str(uuid.uuid4())
+            token = set_session_id(session.session_id)
+            logger.info(f"🆔 New Session: {session.session_id}")
+        else:
+            set_session_id(session.session_id)
+            logger.info(f"🔄 Restoring Session: {session.session_id}")
+
+        # 設定用戶狀態
+        session.user_state = UserState(location=Location(lat=lat, lng=lng))
+
+        # [Security Fix] 讀取用戶選擇的模型，如果沒有則使用預設
+        selected_model_id = session.custom_settings.get('model', 'gemini-2.5-flash')
+
+        # [Security Fix] 優先使用用戶提供的 API Key (這裡以 Gemini 為例，若支援其他模型需擴充邏輯)
+        # 注意：實際應用中需根據選擇的 Model ID (Claude/Gemini) 來決定使用哪個 Key
+        gemini_key = session.custom_settings.get('gemini_api_key') or session.agno_settings.gemini_api_key
+
+        # 初始化模型 (應用設定)
+        planner_model = Gemini(
+            id=selected_model_id,
+            thinking_budget=2048,
+            api_key=gemini_key
+        )
 
-    def step1_analyze_tasks(self, user_input, auto_location, lat, lon):
-        """
-        Step 1: 分析任務 - 帶串流輸出
-        完成後進入 Step 2 (Confirmation)
-        """
-        if not user_input.strip():
-            return self._empty_step1_outputs()
+        main_model = Gemini(
+            id=selected_model_id,
+            thinking_budget=1024,
+            api_key=gemini_key
+        )
 
-        # 🔧 串流輸出 1: 開始分析
-        stream_str = "🤔 Analyzing your request..."
-        stream_html = self._create_stream_html(stream_str)
-        yield (
-            stream_html, "", "", get_reasoning_html_reversed(),
-            gr.update(visible=False), gr.update(visible=False),
-            "",  # chat_history_output
-            "Starting analysis...",
-            *[create_agent_card_enhanced("planner", "working", "Analyzing..."),
-              *[create_agent_card_enhanced(k, "idle", "On standby")
-                for k in ["scout", "optimizer", "validator", "weather", "traffic"]]]
+        lite_model = Gemini(
+            id="gemini-2.5-flash-lite",  # 輕量級模型通常固定或由次要選項決定
+            api_key=gemini_key
         )
 
-        time_module.sleep(0.5)
+        # 配置模型和工具
+        models_dict = {
+            "team": main_model,
+            "scout": main_model,
+            "optimizer": lite_model,
+            "navigator": lite_model,
+            "weatherman": lite_model,
+            "presenter": main_model,
+        }
+
+        # [Note] 如果 Toolkit 支援傳入 API Key，應在此處從 session.custom_settings 傳入
+        tools_dict = {
+            "scout": [ScoutToolkit()],
+            "optimizer": [OptimizationToolkit()],
+            "navigator": [NavigationToolkit()],
+            "weatherman": [WeatherToolkit()],
+            "presenter": [ReaderToolkit()],
+        }
+
+        planner_kwargs = {
+            "additional_context": get_context(session.user_state),
+            "timezone_identifier": session.user_state.utc_offset,
+            "debug_mode": False,
+        }
+
+        team_kwargs = {
+            "timezone_identifier": session.user_state.utc_offset,
+        }
+
+        # 創建 Agents
+        session.planner_agent = create_planner_agent(
+            planner_model,
+            planner_kwargs,
+            session_id=session.session_id
+        )
 
-        stream_str += "\n📋 Extracting tasks from your input..."
-        # 🔧 串流輸出 2: 提取任務
-        stream_html = self._create_stream_html(stream_str)
-        yield (
-            stream_html, "", "", get_reasoning_html_reversed(),
-            gr.update(visible=False), gr.update(visible=False),
-            "",  # chat_history_output
-            "Extracting tasks...",
-            *[create_agent_card_enhanced("planner", "working", "Extracting tasks..."),
-              *[create_agent_card_enhanced(k, "idle", "On standby")
-                for k in ["scout", "optimizer", "validator", "weather", "traffic"]]]
+        session.core_team = create_core_team(
+            models_dict,
+            team_kwargs,
+            tools_dict,
+            session_id=session.session_id
         )
 
-        time_module.sleep(0.5)
+        logger.info(f"✅ Agents initialized for session {session.session_id} using model {selected_model_id}")
 
-        # 模擬提取的任務
-        self.task_list = [
-            {"id": 1, "title": "Visit hospital", "priority": "HIGH",
-             "time": "08:00-12:00", "duration": "45 minutes", "location": "Hospital nearby", "icon": "🏥"},
-            {"id": 2, "title": "Buy groceries", "priority": "MEDIUM",
-             "time": "Anytime", "duration": "30 minutes", "location": "Supermarket", "icon": "🛒"},
-            {"id": 3, "title": "Mail package", "priority": "HIGH",
-             "time": "Before 15:00", "duration": "20 minutes", "location": "Post office", "icon": "📮"}
-        ]
+    def step1_analyze_tasks(self, user_input: str, auto_location: bool,
+                            lat: float, lon: float, session: UserSession):
+        """Step 1: 真正的串流分析"""
+        if not user_input.strip():
+            yield from self._empty_step1_outputs(session)
+            return
 
-        # 添加推理訊息
-        self._add_reasoning("planner", "Analyzing input tasks...")
-        self._add_reasoning("planner", f"Extracted {len(self.task_list)} tasks")
+        if auto_location:
+            lat, lon = 25.033, 121.565
 
-        # 生成摘要和任務卡片
-        high_priority = sum(1 for t in self.task_list if t["priority"] == "HIGH")
-        total_time = sum(int(t["duration"].split()[0]) for t in self.task_list)
+        try:
+            self._initialize_agents(session, lat, lon)
 
-        summary_html = create_summary_card(len(self.task_list), high_priority, total_time)
-        task_list_html = self._generate_task_list_html()
+            self._add_reasoning(session, "planner", "🚀 Starting analysis...")
+            yield self._create_step1_outputs(
+                stream_text="🤔 Analyzing your request with AI...",
+                session=session,
+                agent_status=("planner", "working", "Initializing...")
+            )
 
-        stream_str += "\n✅ Analysis complete! Please review your tasks."
-        stream_html = self._create_stream_html(stream_str)
+            time_module.sleep(0.3)
 
-        # Step 1 完成，準備進入 Step 2
-        yield (
-            stream_html, summary_html, task_list_html,
-            get_reasoning_html_reversed(self.reasoning_messages),
-            gr.update(visible=True),  # task_confirm_area
-            gr.update(visible=False),  # chat_input_area (先隱藏)
-            self._generate_chat_welcome_html(),  # chat_history_output
-            "Tasks extracted successfully ✓",
-            *[create_agent_card_enhanced("planner", "complete", "Tasks extracted"),
-              *[create_agent_card_enhanced(k, "idle", "On standby")
-                for k in ["scout", "optimizer", "validator", "weather", "traffic"]]]
-        )
+            self._add_reasoning(session, "planner", f"Processing: {user_input[:50]}...")
+            yield self._create_step1_outputs(
+                stream_text="🤔 Analyzing your request with AI...\n📋 AI is extracting tasks...",
+                session=session,
+                agent_status=("planner", "working", "Extracting tasks...")
+            )
 
-    def modify_task_chat(self, user_message):
-        """
-        處理用戶在 Chat with LifeFlow Tab 中的修改請求
-        這在 Step 2 時可用
-        """
+            planner_stream = session.planner_agent.run(
+                f"help user to update the task_list, user's message: {user_input}",
+                stream=True,
+                stream_events=True
+            )
+
+            accumulated_response = ""
+            displayed_text = "🤔 Analyzing your request with AI...\n📋 AI is extracting tasks...\n\n"
+            show_content = True
+
+            for chunk in planner_stream:
+                if chunk.event == RunEvent.run_content:
+                    content = chunk.content
+                    accumulated_response += content
+
+                    if show_content:
+                        if "@@@" in accumulated_response:
+                            show_content = False
+                            remaining = content.split("@@@")[0]
+                            if remaining:
+                                displayed_text += remaining
+                        else:
+                            displayed_text += content
+
+                        yield self._create_step1_outputs(
+                            stream_text=displayed_text,
+                            session=session,
+                            agent_status=("planner", "working", "Processing...")
+                        )
+
+            json_data = "{" + accumulated_response.split("{", maxsplit=1)[-1]
+            json_data = json_data.replace("`", "").replace("@", "").replace("\\", " ").replace("\n", " ")
+
+            session.planner_agent.update_session_state(
+                session_id=session.session_id,
+                session_state_updates={"task_list": json_data}
+            )
+
+            try:
+                task_list_data = json.loads(json_data)
+                session.task_list = self._convert_task_list_to_ui_format(task_list_data)
+            except json.JSONDecodeError as e:
+                logger.error(f"Failed to parse task_list: {e}")
+                session.task_list = []
+
+            self._add_reasoning(session, "planner", f"✅ Extracted {len(session.task_list)} tasks")
+
+            high_priority = sum(1 for t in session.task_list if t.get("priority") == "HIGH")
+            total_time = sum(
+                int(t.get("duration", "0").split()[0])
+                for t in session.task_list
+                if t.get("duration")
+            )
+
+            final_text = displayed_text + f"\n✅ Analysis complete! Found {len(session.task_list)} tasks."
+
+            yield self._create_step1_complete_outputs(
+                stream_text=final_text,
+                session=session,
+                high_priority=high_priority,
+                total_time=total_time
+            )
+
+        except Exception as e:
+            logger.error(f"Error in step1: {e}", exc_info=True)
+            yield self._create_error_outputs(str(e), session)
+
+    def modify_task_chat(self, user_message: str, session: UserSession):
+        """修改任務（帶真正的串流）"""
         if not user_message.strip():
-            return self._generate_chat_history_html(), self._generate_task_list_html()
+            chat_html = self._generate_chat_history_html(session)
+            task_html = self._generate_task_list_html(session)
+            yield chat_html, task_html, session.to_dict()
+            return
 
-        # 添加用戶消息
-        self.chat_history.append({
+        session.chat_history.append({
             "role": "user",
             "message": user_message,
             "time": datetime.now().strftime("%H:%M:%S")
         })
 
-        # 模擬 AI 回應
-        time_module.sleep(0.3)
-        ai_response = f"✅ I've updated your tasks based on your request: '{user_message}'"
+        yield (
+            self._generate_chat_history_html(session),
+            self._generate_task_list_html(session),
+            session.to_dict()
+        )
 
-        self.chat_history.append({
-            "role": "assistant",
-            "message": ai_response,
-            "time": datetime.now().strftime("%H:%M:%S")
-        })
+        try:
+            if session.planner_agent is None:
+                if session.lat is not None and session.lng is not None:
+                    session.chat_history.append({
+                        "role": "assistant",
+                        "message": "🔄 Restoring AI system...",
+                        "time": datetime.now().strftime("%H:%M:%S")
+                    })
+                    yield (
+                        self._generate_chat_history_html(session),
+                        self._generate_task_list_html(session),
+                        session.to_dict()
+                    )
+                    self._initialize_agents(session, session.lat, session.lng)
+                    session.chat_history.pop()
+                else:
+                    session.chat_history.append({
+                        "role": "assistant",
+                        "message": "❌ Error: Please restart the planning process.",
+                        "time": datetime.now().strftime("%H:%M:%S")
+                    })
+                    yield (
+                        self._generate_chat_history_html(session),
+                        self._generate_task_list_html(session),
+                        session.to_dict()
+                    )
+                    return
+
+            session.chat_history.append({
+                "role": "assistant",
+                "message": "🤔 AI is thinking...",
+                "time": datetime.now().strftime("%H:%M:%S")
+            })
+            yield (
+                self._generate_chat_history_html(session),
+                self._generate_task_list_html(session),
+                session.to_dict()
+            )
 
-        # 更新 reasoning
-        self._add_reasoning("planner", f"User requested: {user_message}")
+            planner_stream = session.planner_agent.run(
+                f"help user to update the task_list, user's message: {user_message}",
+                stream=True,
+                stream_events=True
+            )
 
-        # 返回更新的聊天歷史和任務列表
-        return self._generate_chat_history_html(), self._generate_task_list_html()
+            accumulated_response = ""
+            displayed_thinking = "🤔 AI is thinking...\n\n"
+            show_content = True
+
+            for chunk in planner_stream:
+                if chunk.event == RunEvent.run_content:
+                    content = chunk.content
+                    accumulated_response += content
+
+                    if show_content:
+                        if "@@@" in accumulated_response:
+                            show_content = False
+                            content = content.split("@@@")[0]
+
+                        if content:
+                            displayed_thinking += content
+                            session.chat_history[-1] = {
+                                "role": "assistant",
+                                "message": displayed_thinking,
+                                "time": datetime.now().strftime("%H:%M:%S")
+                            }
+                            yield (
+                                self._generate_chat_history_html(session),
+                                self._generate_task_list_html(session),
+                                session.to_dict()
+                            )
+
+            json_data = "{" + accumulated_response.split("{", maxsplit=1)[-1]
+            json_data = json_data.replace("`", "").replace("@", "").replace("\\", " ").replace("\n", " ")
+
+            session.planner_agent.update_session_state(
+                session_id=session.session_id,
+                session_state_updates={"task_list": json_data}
+            )
 
-    def step2_search_pois(self):
-        """
-        Step 2.5: 搜索 POI - 專家團隊開始工作
-        Scout Agent 開始工作
-        """
-        time_module.sleep(1)
-        self._add_reasoning("scout", "Searching for POIs...")
-        self._add_reasoning("scout", "Found hospital: NTU Hospital (800m, 4.8★)")
-        self._add_reasoning("scout", "Found supermarket: PX Mart (1.2km)")
+            task_list_data = json.loads(json_data)
+            session.task_list = self._convert_task_list_to_ui_format(task_list_data)
+
+            session.chat_history[-1] = {
+                "role": "assistant",
+                "message": "✅ Tasks updated based on your request",
+                "time": datetime.now().strftime("%H:%M:%S")
+            }
+
+            self._add_reasoning(session, "planner", f"Updated: {user_message[:30]}...")
+
+            yield (
+                self._generate_chat_history_html(session),
+                self._generate_task_list_html(session),
+                session.to_dict()
+            )
+
+        except Exception as e:
+            logger.error(f"Error in modify_task_chat: {e}", exc_info=True)
+            if session.chat_history and "thinking" in session.chat_history[-1].get("message", "").lower():
+                session.chat_history.pop()
+            session.chat_history.append({
+                "role": "assistant",
+                "message": f"❌ Error: {str(e)}",
+                "time": datetime.now().strftime("%H:%M:%S")
+            })
+            yield (
+                self._generate_chat_history_html(session),
+                self._generate_task_list_html(session),
+                session.to_dict()
+            )
 
-        reasoning_html = get_reasoning_html_reversed(self.reasoning_messages)
+    def step2_search_pois(self, session: UserSession):
+        """Step 2: Scout 開始工作"""
+        self._add_reasoning(session, "team", "🚀 Core Team activated")
+        self._add_reasoning(session, "scout", "Searching for POIs...")
 
         agent_updates = [
             create_agent_card_enhanced("planner", "complete", "Tasks ready"),
-            create_agent_card_enhanced("scout", "working", "Searching POIs..."),
+            create_agent_card_enhanced("scout", "working", "Searching..."),
             *[create_agent_card_enhanced(k, "idle", "On standby")
               for k in ["optimizer", "validator", "weather", "traffic"]]
         ]
 
-        return reasoning_html, "🗺️ Searching for locations...", *agent_updates
+        return (
+            get_reasoning_html_reversed(session.reasoning_messages),
+            "🗺️ Scout is searching...",
+            *agent_updates,
+            session.to_dict()
+        )
 
-    def step3_optimize_route(self):
-        """Step 3: 優化路線 - Optimizer 開始工作"""
-        time_module.sleep(1)
-        self._add_reasoning("optimizer", "Running TSPTW solver...")
-        self._add_reasoning("optimizer", "Optimized route: Hospital → Supermarket → Post Office")
+    def step3_run_core_team(self, session: UserSession):
+        """Step 3: 運行 Core Team（帶串流）"""
+        try:
+            if session.core_team is None or session.planner_agent is None:
+                if session.lat is not None and session.lng is not None:
+                    self._initialize_agents(session, session.lat, session.lng)
+                else:
+                    raise ValueError("Cannot restore agents: location not available")
 
-        report = """
-## 🎯 Optimization Complete
+            set_session_id(session.session_id)
+            task_list_input = session.planner_agent.get_session_state().get("task_list")
 
-### Route Details:
-1. **🏥 Hospital** (09:00 - 10:00)
-2. **🛒 Supermarket** (10:15 - 10:45)
-3. **📮 Post Office** (11:05 - 11:25)
+            if not task_list_input:
+                raise ValueError("No task list available")
 
-### Metrics:
-- ✅ Total distance: 2.8 km
-- ✅ Total time: 95 minutes
-- ✅ All deadlines met
-- ✅ Minimal travel distance
-- ✅ Weather conditions favorable
-"""
+            if isinstance(task_list_input, str):
+                task_list_str = task_list_input
+            else:
+                task_list_str = json.dumps(task_list_input, indent=2, ensure_ascii=False)
 
-        agent_updates = [
-            create_agent_card_enhanced("planner", "complete", "Analysis done"),
-            create_agent_card_enhanced("scout", "complete", "POI search done"),
-            create_agent_card_enhanced("optimizer", "working", "Optimizing route..."),
-            *[create_agent_card_enhanced(k, "idle", "On standby")
-              for k in ["validator", "weather", "traffic"]]
-        ]
+            self._add_reasoning(session, "team", "🎯 Multi-agent collaboration started")
 
-        reasoning_html = get_reasoning_html_reversed(self.reasoning_messages)
-        return reasoning_html, report, "🎯 Optimizing route...", *agent_updates
+            team_stream = session.core_team.run(
+                f"Plan this trip: {task_list_str}",
+                stream=True,
+                stream_events=True,
+                session_id=session.session_id
+            )
 
-    def step4_finalize(self):
-        """Step 4: 完成並生成報告（含慶祝動畫和增強視覺化）"""
-        time_module.sleep(1)
-        self._add_reasoning("validator", "Validating route quality...")
-        self._add_reasoning("weather", "Checking weather conditions...")
-        self._add_reasoning("traffic", "Analyzing traffic patterns...")
+            report_content = ""
+
+            for event in team_stream:
+                if event.event in [TeamRunEvent.run_content]:
+                    report_content += event.content
+                elif event.event == "tool_call":
+                    tool_name = event.tool_call.get('function', {}).get('name', 'unknown')
+                    self._add_reasoning(session, "team", f"🔧 Tool: {tool_name}")
+                elif event.event == TeamRunEvent.run_completed:
+                    self._add_reasoning(session, "team", "🎉 Completed")
+
+            report_html = f"## 🎯 Planning Complete\n\n{report_content}..."
+            return report_html, session.to_dict()
+
+        except Exception as e:
+            logger.error(f"Error in step3: {e}")
+            return f"## ❌ Error\n\n{str(e)}", session.to_dict()
+
+    def step4_finalize(self, session: UserSession):
+        """Step 4: 完成"""
+        try:
+            final_ref_id = poi_repo.get_last_id_by_session(session.session_id)
+            if not final_ref_id:
+                raise ValueError(f"No final result found for session {session.session_id}")
+
+            structured_data = poi_repo.load(final_ref_id)
+            timeline = structured_data.get("timeline", [])
+            metrics = structured_data.get("metrics", {})
+            traffic_summary = structured_data.get("traffic_summary", {})
+
+            timeline_html = self._generate_timeline_html(timeline)
+            metrics_html = self._generate_metrics_html(metrics, traffic_summary)
+
+            safe_task_list = session.task_list if session.task_list else []
+            result_viz = create_result_visualization(safe_task_list, structured_data)
+            map_fig = self._generate_map_from_data(structured_data)
+
+            agent_updates = [
+                create_agent_card_enhanced(k, "complete", "✓ Complete")
+                for k in ["planner", "scout", "optimizer", "validator", "weather", "traffic"]
+            ]
+
+            self._add_reasoning(session, "team", "🎉 All completed")
+            session.planning_completed = True
+
+            return (
+                timeline_html, metrics_html, result_viz, map_fig,
+                gr.update(visible=True), gr.update(visible=False),
+                "🎉 Planning completed!",
+                *agent_updates,
+                session.to_dict()
+            )
 
-        self.planning_completed = True
+        except Exception as e:
+            logger.error(f"Error in step4: {e}", exc_info=True)
+            error_html = f"<div style='color:red'>Error: {str(e)}</div>"
+            default_map = create_animated_map()
+            agent_updates = [
+                create_agent_card_enhanced(k, "idle", "Waiting...")
+                for k in ["planner", "scout", "optimizer", "validator", "weather", "traffic"]
+            ]
+            return (
+                error_html, error_html, error_html, default_map,
+                gr.update(visible=True), gr.update(visible=False),
+                f"Error: {str(e)}",
+                *agent_updates,
+                session.to_dict()
+            )
 
-        # 生成慶祝動畫
-        celebration_html = create_celebration_animation()
+    # ===== 輔助方法 =====
 
-        # 生成詳細的結果視覺化
-        result_html = create_result_visualization(self.task_list) + celebration_html
+    # [Security Fix] 新增：保存設定到 User Session
+    def save_settings(self, google_key, weather_key, anthropic_key, model, session_data):
+        """保存設定到用戶 Session"""
+        session = UserSession.from_dict(session_data)
 
-        # 簡化的 timeline 和 metrics（保留兼容性，但現在主要信息在 result_html 中）
-        timeline_html = "<h3>🗓️ Detailed Timeline</h3><p>See the complete timeline in the result panel</p>"
-        metrics_html = "<h3>📈 Performance Metrics</h3><p>All optimization metrics are displayed above</p>"
+        session.custom_settings['google_maps_api_key'] = google_key
+        session.custom_settings['openweather_api_key'] = weather_key
+        session.custom_settings['anthropic_api_key'] = anthropic_key
+        session.custom_settings['model'] = model
 
-        map_fig = create_animated_map()
+        return "✅ Settings saved locally!", session.to_dict()
 
-        agent_updates = [
-            create_agent_card_enhanced(k, "complete", "Task complete")
-            for k in ["planner", "scout", "optimizer", "validator", "weather", "traffic"]
-        ]
+    def _add_reasoning(self, session: UserSession, agent: str, message: str):
+        session.reasoning_messages.append({
+            "agent": agent,
+            "message": message,
+            "time": datetime.now().strftime("%H:%M:%S")
+        })
 
+    def _create_step1_outputs(self, stream_text: str, session: UserSession, agent_status: tuple):
+        agent_key, status, message = agent_status
         return (
-            timeline_html, metrics_html, result_html, map_fig,
-            gr.update(visible=True),  # map_tab
-            gr.update(visible=False),  # team_area (隱藏，任務完成)
-            "🎉 Planning complete! Review your optimized route.",
-            *agent_updates
+            self._create_stream_html(stream_text), "", "",
+            get_reasoning_html_reversed(session.reasoning_messages),
+            gr.update(visible=False), gr.update(visible=False), "", message,
+            create_agent_card_enhanced(agent_key, status, message),
+            create_agent_card_enhanced("scout", "idle", "On standby"),
+            create_agent_card_enhanced("optimizer", "idle", "On standby"),
+            create_agent_card_enhanced("validator", "idle", "On standby"),
+            create_agent_card_enhanced("weather", "idle", "On standby"),
+            create_agent_card_enhanced("traffic", "idle", "On standby"),
+            session.to_dict()
         )
 
-    def save_settings(self, google_key, weather_key, anthropic_key, model):
-        """保存設定"""
-        self.settings['google_maps_api_key'] = google_key
-        self.settings['openweather_api_key'] = weather_key
-        self.settings['anthropic_api_key'] = anthropic_key
-        self.settings['model'] = model
-        return "✅ Settings saved successfully!"
+    def _create_step1_complete_outputs(self, stream_text: str, session: UserSession,
+                                       high_priority: int, total_time: int):
+        summary_html = create_summary_card(len(session.task_list), high_priority, total_time)
+        task_html = self._generate_task_list_html(session)
+        return (
+            self._create_stream_html(stream_text), summary_html, task_html,
+            get_reasoning_html_reversed(session.reasoning_messages),
+            gr.update(visible=True), gr.update(visible=False),
+            self._generate_chat_welcome_html(), "✓ Tasks extracted",
+            create_agent_card_enhanced("planner", "complete", "Tasks ready"),
+            create_agent_card_enhanced("scout", "idle", "On standby"),
+            create_agent_card_enhanced("optimizer", "idle", "On standby"),
+            create_agent_card_enhanced("validator", "idle", "On standby"),
+            create_agent_card_enhanced("weather", "idle", "On standby"),
+            create_agent_card_enhanced("traffic", "idle", "On standby"),
+            session.to_dict()
+        )
 
-    def _create_stream_html(self, message):
-        """創建串流輸出 HTML"""
-        return f"""
-        <div class="stream-container">
-            <div class="stream-text">{message}<span class="stream-cursor"></span></div>
-        </div>
-        """
+    def _empty_step1_outputs(self, session: UserSession):
+        yield (
+            create_agent_stream_output(), "", "",
+            get_reasoning_html_reversed(),
+            gr.update(visible=False), gr.update(visible=False), "",
+            "Waiting for input...",
+            create_agent_card_enhanced("planner", "idle", "On standby"),
+            create_agent_card_enhanced("scout", "idle", "On standby"),
+            create_agent_card_enhanced("optimizer", "idle", "On standby"),
+            create_agent_card_enhanced("validator", "idle", "On standby"),
+            create_agent_card_enhanced("weather", "idle", "On standby"),
+            create_agent_card_enhanced("traffic", "idle", "On standby"),
+            session.to_dict()
+        )
 
-    def _add_reasoning(self, agent, message):
-        """添加推理訊息"""
-        self.reasoning_messages.append({
-            'agent': agent,
-            'message': message,
-            'time': datetime.now().strftime("%H:%M:%S")
-        })
+    def _create_error_outputs(self, error: str, session: UserSession):
+        return (
+            self._create_stream_html(f"❌ Error: {error}"), "", "",
+            get_reasoning_html_reversed(session.reasoning_messages),
+            gr.update(visible=False), gr.update(visible=False), "",
+            f"Error: {error}",
+            create_agent_card_enhanced("planner", "idle", "Error occurred"),
+            create_agent_card_enhanced("scout", "idle", "On standby"),
+            create_agent_card_enhanced("optimizer", "idle", "On standby"),
+            create_agent_card_enhanced("validator", "idle", "On standby"),
+            create_agent_card_enhanced("weather", "idle", "On standby"),
+            create_agent_card_enhanced("traffic", "idle", "On standby"),
+            session.to_dict()
+        )
 
-    def _generate_task_list_html(self):
-        """生成任務列表 HTML"""
+    def _create_stream_html(self, text: str) -> str:
+        return f"""<div class="stream-container"><div class="stream-text">{text}<span class="stream-cursor"></span></div></div>"""
+
+    def _convert_task_list_to_ui_format(self, task_list_data):
+        ui_tasks = []
+        if isinstance(task_list_data, dict):
+            tasks = task_list_data.get("tasks", [])
+        elif isinstance(task_list_data, list):
+            tasks = task_list_data
+        else:
+            return []
+
+        for i, task in enumerate(tasks, 1):
+            ui_task = {
+                "id": i,
+                "title": task.get("description", "Task"),
+                "priority": task.get("priority", "MEDIUM"),
+                "time": task.get("time_window", "Anytime"),
+                "duration": f"{task.get('duration_minutes', 30)} minutes",
+                "location": task.get("location_hint", "To be determined"),
+                "icon": self._get_task_icon(task.get("category", "other"))
+            }
+            ui_tasks.append(ui_task)
+        return ui_tasks
+
+    def _get_task_icon(self, category: str) -> str:
+        icons = {
+            "medical": "🏥", "shopping": "🛒", "postal": "📮",
+            "food": "🍽️", "entertainment": "🎭", "transportation": "🚗",
+            "other": "📋"
+        }
+        return icons.get(category.lower(), "📋")
+
+    def _generate_task_list_html(self, session: UserSession) -> str:
+        if not session.task_list:
+            return "<p>No tasks available</p>"
         html = ""
-        for task in self.task_list:
+        for task in session.task_list:
             html += create_task_card(
                 task["id"], task["title"], task["priority"],
-                task["time"], task["duration"], task["location"], task["icon"]
+                task["time"], task["duration"], task["location"],
+                task.get("icon", "📋")
             )
         return html
 
-    def _generate_chat_welcome_html(self):
-        """生成 Chat 歡迎訊息"""
+    def _generate_chat_history_html(self, session: UserSession) -> str:
+        if not session.chat_history:
+            return self._generate_chat_welcome_html()
+        html = '<div class="chat-history">'
+        for msg in session.chat_history:
+            role_class = "user" if msg["role"] == "user" else "assistant"
+            icon = "👤" if msg["role"] == "user" else "🤖"
+            html += f"""
+            <div class="chat-message {role_class}">
+                <span class="chat-icon">{icon}</span>
+                <div class="chat-content">
+                    <div class="chat-text">{msg["message"]}</div>
+                    <div class="chat-time">{msg["time"]}</div>
+                </div>
+            </div>
+            """
+        html += '</div>'
+        return html
+
+    def _generate_chat_welcome_html(self) -> str:
         return """
-        <div style="padding: 20px; text-align: center;">
-            <h3 style="color: #4A90E2; margin-bottom: 10px;">💬 Chat with LifeFlow</h3>
-            <p style="opacity: 0.8;">You can now modify your tasks by chatting with me!</p>
-            <p style="opacity: 0.6; font-size: 0.9em;">Try: "Change task 2 to high priority" or "Add a new task"</p>
+        <div class="chat-welcome">
+            <h3>💬 Chat with LifeFlow AI</h3>
+            <p>Modify your tasks by chatting here.</p>
         </div>
         """
 
-    def _generate_chat_history_html(self):
-        """生成聊天歷史 HTML"""
-        if not self.chat_history:
-            return self._generate_chat_welcome_html()
-
-        html = '<div class="chat-history-container" style="max-height: 400px; overflow-y: auto;">'
-
-        for msg in self.chat_history:
-            role = msg["role"]
-            message = msg["message"]
-            time = msg["time"]
-
-            if role == "user":
-                html += f'''
-                <div style="margin-bottom: 15px; text-align: right;">
-                    <div style="display: inline-block; max-width: 70%; background: #E3F2FD; padding: 10px 15px; border-radius: 15px 15px 0 15px;">
-                        <div style="font-size: 0.9em; font-weight: 500;">{message}</div>
-                        <div style="font-size: 0.75em; opacity: 0.6; margin-top: 5px;">{time}</div>
+    def _generate_timeline_html(self, timeline):
+        """
+        生成右側 Timeline Tab 的 HTML
+        使用 structured_data['timeline'] 中的豐富數據
+        """
+        if not timeline:
+            return "<div>No timeline data</div>"
+
+        html = '<div class="timeline-container">'
+        for i, stop in enumerate(timeline):
+            time = stop.get("time", "N/A")
+            location = stop.get("location", "Unknown Location")
+            weather = stop.get("weather", "")
+            aqi = stop.get("aqi", {}).get("label", "")
+            travel_time = stop.get("travel_time_from_prev", "")
+
+            # 決定標記樣式
+            marker_class = "start" if i == 0 else "stop"
+
+            html += f"""
+            <div class="timeline-item">
+                <div class="timeline-marker {marker_class}">{i}</div>
+                <div class="timeline-content">
+                    <div class="timeline-header">
+                        <span class="time-badge">{time}</span>
+                        <h4>{location}</h4>
                     </div>
-                </div>
-                '''
-            else:
-                html += f'''
-                <div style="margin-bottom: 15px; text-align: left;">
-                    <div style="display: inline-block; max-width: 70%; background: #F5F5F5; padding: 10px 15px; border-radius: 15px 15px 15px 0;">
-                        <div style="font-size: 0.85em; color: #4A90E2; font-weight: 600; margin-bottom: 5px;">🤖 LifeFlow AI</div>
-                        <div style="font-size: 0.9em;">{message}</div>
-                        <div style="font-size: 0.75em; opacity: 0.6; margin-top: 5px;">{time}</div>
+                    <div class="timeline-details">
+                        {f'<span class="weather-tag">🌤️ {weather}</span>' if weather else ''}
+                        {f'<span class="aqi-tag">{aqi}</span>' if aqi else ''}
                     </div>
+                    {f'<p class="travel-info">🚗 Drive: {travel_time}</p>' if i > 0 else ''}
                 </div>
-                '''
-
+            </div>
+            """
         html += '</div>'
+
+        # 補充少許 CSS 以確保美觀
+        html += """
+        <style>
+        .timeline-header { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
+        .time-badge { background: #e3f2fd; color: #1976d2; padding: 2px 8px; border-radius: 4px; font-weight: bold; font-size: 12px; }
+        .timeline-details { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
+        .weather-tag, .aqi-tag { font-size: 11px; padding: 2px 6px; background: #f5f5f5; border-radius: 4px; border: 1px solid #e0e0e0; }
+        .travel-info { font-size: 12px; color: #666; margin: 0; display: flex; align-items: center; gap: 5px; }
+        </style>
+        """
         return html
 
-    def _empty_step1_outputs(self):
-        """返回空的 Step 1 輸出"""
-        return (
-            create_agent_stream_output(),
-            "", "", get_reasoning_html_reversed(),
-            gr.update(visible=False),
-            gr.update(visible=False),
-            self._generate_chat_welcome_html(),
-            "Please enter your tasks",
-            *[create_agent_card_enhanced(k, "idle", "On standby")
-              for k in ["planner", "scout", "optimizer", "validator", "weather", "traffic"]]
-        )
+    def _generate_metrics_html(self, metrics, traffic_summary):
+        """生成左側的簡單 Metrics"""
+        if traffic_summary is None: traffic_summary = {}
+        if metrics is None: metrics = {}
+
+        total_distance = traffic_summary.get("total_distance_km", 0)
+        total_duration = traffic_summary.get("total_duration_min", 0)
+        efficiency = metrics.get("route_efficiency_pct", 90)
+
+        # 根據效率改變顏色
+        eff_color = "#50C878" if efficiency >= 80 else "#F5A623"
+
+        return f"""
+        <div class="metrics-container">
+            <div class="metric-card">
+                <h3>📏 Distance</h3>
+                <p class="metric-value">{total_distance:.1f} km</p>
+            </div>
+            <div class="metric-card">
+                <h3>⏱️ Duration</h3>
+                <p class="metric-value">{total_duration:.0f} min</p>
+            </div>
+            <div class="metric-card" style="border-bottom: 3px solid {eff_color}">
+                <h3>⚡ Efficiency</h3>
+                <p class="metric-value" style="color: {eff_color}">{efficiency:.0f}%</p>
+            </div>
+        </div>
+        """
+
+    def _generate_map_from_data(self, structured_data):
+        """
+        生成 Plotly 地圖，包含真實道路軌跡 (Polyline)
+        """
+        import plotly.graph_objects as go
+        from core.utils import decode_polyline  # 確保導入了解碼函數
+
+        try:
+            timeline = structured_data.get("timeline", [])
+            precise_result = structured_data.get("precise_traffic_result", {})
+            legs = precise_result.get("legs", [])
+
+            if not timeline:
+                return create_animated_map()
+
+            fig = go.Figure()
+
+            # 1. 繪製路線 (Polyline) - 藍色路徑
+            # 從 legs 中提取 polyline 並解碼
+            route_lats = []
+            route_lons = []
+
+            for leg in legs:
+                poly_str = leg.get("polyline")
+                if poly_str:
+                    decoded = decode_polyline(poly_str)
+                    # 解碼後是 list of (lat, lng)
+                    leg_lats = [coord[0] for coord in decoded]
+                    leg_lons = [coord[1] for coord in decoded]
+
+                    # 為了讓線段連續，我們可以��其串接 (plotly 支援 nan 分隔，或直接單一 trace)
+                    # 這裡簡單起見，我們將每個 leg 分開加，或者合併。合併效能較好。
+                    route_lats.extend(leg_lats)
+                    route_lons.extend(leg_lons)
+
+            if route_lats:
+                fig.add_trace(go.Scattermapbox(
+                    lat=route_lats,
+                    lon=route_lons,
+                    mode='lines',
+                    line=dict(width=4, color='#4A90E2'),
+                    name='Route',
+                    hoverinfo='none'  # 路徑本身不需 hover
+                ))
+
+            # 2. 繪製站點 (Markers)
+            lats, lons, hover_texts, colors, sizes = [], [], [], [], []
+
+            for i, stop in enumerate(timeline):
+                coords = stop.get("coordinates", {})
+                lat = coords.get("lat")
+                lng = coords.get("lng")
+
+                if lat and lng:
+                    lats.append(lat)
+                    lons.append(lng)
+
+                    # 構建 Hover Text
+                    name = stop.get("location", "Stop")
+                    time = stop.get("time", "")
+                    weather = stop.get("weather", "")
+                    text = f"<b>{i}. {name}</b><br>🕒 {time}<br>🌤️ {weather}"
+                    hover_texts.append(text)
+
+                    # 樣式：起點綠色，終點紅色，中間藍色
+                    if i == 0:
+                        colors.append('#50C878')  # Start
+                        sizes.append(15)
+                    elif i == len(timeline) - 1:
+                        colors.append('#FF6B6B')  # End
+                        sizes.append(15)
+                    else:
+                        colors.append('#F5A623')  # Middle
+                        sizes.append(12)
+
+            fig.add_trace(go.Scattermapbox(
+                lat=lats, lon=lons,
+                mode='markers+text',
+                marker=dict(size=sizes, color=colors, allowoverlap=True),
+                text=[str(i) for i in range(len(lats))],  # 顯示序號
+                textposition="top center",
+                textfont=dict(size=14, color='black', family="Arial Black"),
+                hovertext=hover_texts,
+                hoverinfo='text',
+                name='Stops'
+            ))
+
+            # 設定地圖中心與縮放
+            if lats:
+                center_lat = sum(lats) / len(lats)
+                center_lon = sum(lons) / len(lons)
+            else:
+                center_lat, center_lon = 25.033, 121.565
+
+            fig.update_layout(
+                mapbox=dict(
+                    style='open-street-map',  # 或 'carto-positron' 看起來更乾淨
+                    center=dict(lat=center_lat, lon=center_lon),
+                    zoom=12
+                ),
+                margin=dict(l=0, r=0, t=0, b=0),
+                height=500,
+                showlegend=False
+            )
+
+            return fig
+        except Exception as e:
+            logger.error(f"Error generating map: {e}", exc_info=True)
+            return create_animated_map()
 
     def build_interface(self):
-        """構建 Gradio 界面"""
         with gr.Blocks(title=APP_TITLE) as demo:
-            # 注入 CSS 樣式
             gr.HTML(get_enhanced_css())
-            # Header
             create_header()
 
-            # Top Controls (Theme, Settings & Doc)
             theme_btn, settings_btn, doc_btn = create_top_controls()
 
-            # Main Layout
+            # 🔥 每個 Browser Tab 都有獨立的 UserSession
+            session_state = gr.State(value=UserSession().to_dict())
+
             with gr.Row():
-                # ========== Left Column (主操作區) ==========
                 with gr.Column(scale=2, min_width=400):
-                    # Step 1: Input Form
                     (input_area, agent_stream_output, user_input, auto_location,
                      location_inputs, lat_input, lon_input, analyze_btn) = create_input_form(
                         create_agent_stream_output()
                     )
 
-                    # Step 2: Confirmation Area (包含 Exit 和 Ready to plan 按鈕)
                     (task_confirm_area, task_summary_display,
                      task_list_display, exit_btn_inline, ready_plan_btn) = create_confirmation_area()
 
-                    # Step 2.5/3: Team Area (取代 Confirmation Area)
                     team_area, agent_displays = create_team_area(create_agent_card_enhanced)
+                    (result_area, result_display, timeline_display, metrics_display) = create_result_area(
+                        create_animated_map)
 
-                    # Step 3: Result Area (最終結果展示)
-                    (result_area, result_display,
-                     timeline_display, metrics_display) = create_result_area(create_animated_map)
-
-                # ========== Right Column (狀態 + Tabs) ==========
                 with gr.Column(scale=3, min_width=500):
-                    status_bar = gr.Textbox(
-                        label="📊 Status",
-                        value="Waiting for input...",
-                        interactive=False,
-                        max_lines=1
-                    )
-
-                    # Tabs (包含新的 Chat with LifeFlow Tab)
+                    status_bar = gr.Textbox(label="📊 Status", value="Waiting for input...", interactive=False,
+                                            max_lines=1)
                     (tabs, report_tab, map_tab, report_output, map_output, reasoning_output,
                      chat_input_area, chat_history_output, chat_input, chat_send) = create_tabs(
-                        create_animated_map,
-                        get_reasoning_html_reversed()
+                        create_animated_map, get_reasoning_html_reversed()
                     )
 
-            # Modals
             (settings_modal, google_maps_key, openweather_key, anthropic_key,
              model_choice, close_settings_btn, save_settings_btn,
              settings_status) = create_settings_modal()
 
             doc_modal, close_doc_btn = create_doc_modal()
 
-            # ============= Event Handlers =============
+            # ===== Event Handlers =====
 
-            # Auto location toggle
-            auto_location.change(
-                fn=toggle_location_inputs,
-                inputs=[auto_location],
-                outputs=[location_inputs]
-            )
+            auto_location.change(fn=toggle_location_inputs, inputs=[auto_location], outputs=[location_inputs])
+
+            def analyze_wrapper(ui, al, lat, lon, s):
+                session = UserSession.from_dict(s)
+                yield from self.step1_analyze_tasks(ui, al, lat, lon, session)
 
-            # ====== Step 1: Analyze button ======
             analyze_btn.click(
-                fn=self.step1_analyze_tasks,
-                inputs=[user_input, auto_location, lat_input, lon_input],
+                fn=analyze_wrapper,
+                inputs=[user_input, auto_location, lat_input, lon_input, session_state],
                 outputs=[
                     agent_stream_output, task_summary_display, task_list_display,
                     reasoning_output, task_confirm_area, chat_input_area,
-                    chat_history_output, status_bar, *agent_displays
+                    chat_history_output, status_bar, *agent_displays, session_state
                 ]
             ).then(
-                # Step 1 → Step 2: 隱藏輸入區，顯示確認區 + 開啟 Chat 輸入框
-                fn=lambda: (
-                    gr.update(visible=False),  # input_area
-                    gr.update(visible=True),   # task_confirm_area
-                    gr.update(visible=True)    # chat_input_area (開啟聊天功能)
-                ),
+                fn=lambda: (gr.update(visible=False), gr.update(visible=True), gr.update(visible=True)),
                 outputs=[input_area, task_confirm_area, chat_input_area]
             )
 
-            # ====== Step 2: Chat with LifeFlow (任務修改) ======
+            def chat_wrapper(msg, s):
+                session = UserSession.from_dict(s)
+                yield from self.modify_task_chat(msg, session)
+
             chat_send.click(
-                fn=self.modify_task_chat,
-                inputs=[chat_input],
-                outputs=[chat_history_output, task_list_display]
-            ).then(
-                fn=lambda: "",  # 清空輸入框
-                outputs=[chat_input]
-            )
+                fn=chat_wrapper,
+                inputs=[chat_input, session_state],
+                outputs=[chat_history_output, task_list_display, session_state]
+            ).then(fn=lambda: "", outputs=[chat_input])
 
-            # ====== Step 2: Exit button ======
             exit_btn_inline.click(
                 fn=lambda: (
-                    gr.update(visible=True),   # input_area
-                    gr.update(visible=False),  # task_confirm_area
-                    gr.update(visible=False),  # chat_input_area (關閉聊天)
-                    gr.update(visible=False),  # result_area
-                    gr.update(visible=False),  # team_area
-                    gr.update(visible=False),  # report_tab
-                    gr.update(visible=False),  # map_tab
-                    "",  # user_input
-                    create_agent_stream_output(),  # agent_stream_output
-                    self._generate_chat_welcome_html(),  # chat_history_output (重置)
-                    "Ready to start planning..."  # status_bar
+                    gr.update(visible=True), gr.update(visible=False),
+                    gr.update(visible=False), gr.update(visible=False),
+                    gr.update(visible=False), gr.update(visible=False),
+                    gr.update(visible=False), "",
+                    create_agent_stream_output(),
+                    self._generate_chat_welcome_html(),
+                    "Ready...",
+                    UserSession().to_dict()
                 ),
                 outputs=[
                     input_area, task_confirm_area, chat_input_area, result_area,
                     team_area, report_tab, map_tab, user_input,
-                    agent_stream_output, chat_history_output, status_bar
+                    agent_stream_output, chat_history_output, status_bar, session_state
                 ]
             )
 
-            # ====== Step 2 → Step 2.5: Ready to Plan button ======
             ready_plan_btn.click(
-                # 隱藏確認區和聊天輸入，顯示專家團隊，切換到 AI Conversation Tab
-                fn=lambda: (
-                    gr.update(visible=False),  # task_confirm_area
-                    gr.update(visible=False),  # chat_input_area (關閉聊天輸入)
-                    gr.update(visible=True),   # team_area (顯示專家團隊)
-                    gr.update(selected="ai_conversation_tab")  # 切換到 AI Conversation Tab
-                ),
+                fn=lambda: (gr.update(visible=False), gr.update(visible=False),
+                            gr.update(visible=True), gr.update(selected="ai_conversation_tab")),
                 outputs=[task_confirm_area, chat_input_area, team_area, tabs]
             ).then(
-                # Step 2.5: Scout 開始工作
-                fn=self.step2_search_pois,
-                outputs=[reasoning_output, status_bar, *agent_displays]
+                fn=lambda s: self.step2_search_pois(UserSession.from_dict(s)),
+                inputs=[session_state],
+                outputs=[reasoning_output, status_bar, *agent_displays, session_state]
             ).then(
-                # Step 3: Optimizer 開始工作，切換到 Full Report Tab
-                fn=self.step3_optimize_route,
-                outputs=[reasoning_output, report_output, status_bar, *agent_displays]
+                fn=lambda s: self.step3_run_core_team(UserSession.from_dict(s)),
+                inputs=[session_state],
+                outputs=[report_output, session_state]
             ).then(
-                # 顯示 Report 和 Map Tabs，並切換到 Full Report
-                fn=lambda: (
-                    gr.update(visible=True),  # report_tab
-                    gr.update(visible=True),  # map_tab
-                    gr.update(selected="report_tab")  # 切換到 Full Report Tab
-                ),
+                fn=lambda: (gr.update(visible=True), gr.update(visible=True), gr.update(selected="report_tab")),
                 outputs=[report_tab, map_tab, tabs]
             ).then(
-                # Step 4: 完成規劃
-                fn=self.step4_finalize,
+                fn=lambda s: self.step4_finalize(UserSession.from_dict(s)),
+                inputs=[session_state],
                 outputs=[
                     timeline_display, metrics_display, result_display,
-                    map_output, map_tab, team_area, status_bar, *agent_displays
+                    map_output, map_tab, team_area, status_bar, *agent_displays, session_state
                 ]
-            ).then(
-                fn=lambda: gr.update(visible=True),
-                outputs=[result_area]
-            )
+            ).then(fn=lambda: gr.update(visible=True), outputs=[result_area])
 
-            # ====== Settings ======
-            settings_btn.click(
-                fn=lambda: gr.update(visible=True),
-                outputs=[settings_modal]
-            )
-            close_settings_btn.click(
-                fn=lambda: gr.update(visible=False),
-                outputs=[settings_modal]
-            )
+            # Settings
+            settings_btn.click(fn=lambda: gr.update(visible=True), outputs=[settings_modal])
+            close_settings_btn.click(fn=lambda: gr.update(visible=False), outputs=[settings_modal])
+
+            # [Security Fix] 儲存設定到 session_state
             save_settings_btn.click(
                 fn=self.save_settings,
-                inputs=[google_maps_key, openweather_key, anthropic_key, model_choice],
-                outputs=[settings_status]
+                inputs=[google_maps_key, openweather_key, anthropic_key, model_choice, session_state],
+                outputs=[settings_status, session_state]
             )
 
-            # ====== Theme Toggle ======
-            theme_btn.click(
-                fn=None,
-                js="""
+            # Theme
+            theme_btn.click(fn=None, js="""
                 () => {
                     const container = document.querySelector('.gradio-container');
                     if (container) {
                         container.classList.toggle('theme-dark');
                         const isDark = container.classList.contains('theme-dark');
                         localStorage.setItem('lifeflow-theme', isDark ? 'dark' : 'light');
-                        console.log('Theme toggled:', isDark ? 'dark' : 'light');
                     }
                 }
-                """
-            )
+            """)
 
-            # ====== Documentation ======
-            doc_btn.click(
-                fn=lambda: gr.update(visible=True),
-                outputs=[doc_modal]
-            )
-            close_doc_btn.click(
-                fn=lambda: gr.update(visible=False),
-                outputs=[doc_modal]
-            )
+            doc_btn.click(fn=lambda: gr.update(visible=True), outputs=[doc_modal])
+            close_doc_btn.click(fn=lambda: gr.update(visible=False), outputs=[doc_modal])
 
         return demo
 
@@ -526,7 +1038,8 @@ class LifeFlowAI:
 def main():
     app = LifeFlowAI()
     demo = app.build_interface()
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=False, show_error=True)
+    demo.launch(server_name="0.0.0.0", server_port=7860, share=True, show_error=True)
+
 
 if __name__ == "__main__":
     main()

config.py

@@ -1,58 +1,335 @@
 """
 LifeFlow AI - Configuration
+整合 Agno Agent 系統配置
 """
 
+import os
+from pathlib import Path
+
+# ===== 應用配置 =====
 APP_TITLE = "LifeFlow AI - Intelligent Daily Trip Planner"
 
+# ===== Agent 資訊配置 (前端顯示用) =====
 AGENTS_INFO = {
     'planner': {
         'name': 'Planner',
         'role': 'Task Analyzer',
         'icon': '📋',
-        'color': '#f093fb'
+        'avatar': '📋',
+        'color': '#f093fb',
+        'glow': 'rgba(240, 147, 251, 0.3)'
     },
     'scout': {
         'name': 'Scout',
         'role': 'POI Searcher',
         'icon': '🗺️',
-        'color': '#4facfe'
+        'avatar': '🗺️',
+        'color': '#4facfe',
+        'glow': 'rgba(79, 172, 254, 0.3)'
     },
     'optimizer': {
         'name': 'Optimizer',
         'role': 'Route Optimizer',
         'icon': '⚡',
-        'color': '#43e97b'
+        'avatar': '⚡',
+        'color': '#43e97b',
+        'glow': 'rgba(67, 233, 123, 0.3)'
     },
     'validator': {
         'name': 'Validator',
         'role': 'Feasibility Checker',
         'icon': '✅',
-        'color': '#fa709a'
+        'avatar': '✅',
+        'color': '#fa709a',
+        'glow': 'rgba(250, 112, 154, 0.3)'
     },
     'weather': {
         'name': 'Weather',
         'role': 'Weather Advisor',
         'icon': '🌤️',
-        'color': '#feca57'
+        'avatar': '🌤️',
+        'color': '#feca57',
+        'glow': 'rgba(254, 202, 87, 0.3)'
     },
     'traffic': {
         'name': 'Traffic',
         'role': 'Traffic Analyzer',
         'icon': '🚗',
-        'color': '#ff6348'
+        'avatar': '🚗',
+        'color': '#ff6348',
+        'glow': 'rgba(255, 99, 72, 0.3)'
+    },
+    'navigator': {
+        'name': 'Navigator',
+        'role': 'Route Navigator',
+        'icon': '🧭',
+        'avatar': '🧭',
+        'color': '#5f27cd',
+        'glow': 'rgba(95, 39, 205, 0.3)'
+    },
+    'weatherman': {
+        'name': 'Weatherman',
+        'role': 'Weather Forecaster',
+        'icon': '⛅',
+        'avatar': '⛅',
+        'color': '#00d2d3',
+        'glow': 'rgba(0, 210, 211, 0.3)'
+    },
+    'presenter': {
+        'name': 'Presenter',
+        'role': 'Report Generator',
+        'icon': '📊',
+        'avatar': '📊',
+        'color': '#ee5a6f',
+        'glow': 'rgba(238, 90, 111, 0.3)'
+    },
+    'team': {
+        'name': 'Team Leader',
+        'role': 'Orchestrator',
+        'icon': '👨‍✈️',
+        'avatar': '👨‍✈️',
+        'color': '#0abde3',
+        'glow': 'rgba(10, 189, 227, 0.3)'
     }
 }
 
+# ===== API Keys (從環境變數讀取) =====
 DEFAULT_SETTINGS = {
-    'google_maps_api_key': '',
-    'openweather_api_key': '',
-    'anthropic_api_key': '',
-    'model': 'claude-sonnet-4-20250514'
+    'google_maps_api_key': os.getenv('GOOGLE_MAPS_API_KEY', ''),
+    'openweather_api_key': os.getenv('OPENWEATHER_API_KEY', ''),
+    'anthropic_api_key': os.getenv('ANTHROPIC_API_KEY', ''),
+    'gemini_api_key': os.getenv('GEMINI_API_KEY', ''),
+    'model': 'gemini-2.5-flash'
 }
 
+# ===== LLM 模型選擇 =====
 MODEL_CHOICES = [
+    'gemini-2.5-flash',
+    'gemini-2.5-flash-lite',
     'claude-sonnet-4-20250514',
     'claude-sonnet-3-5-20241022',
     'gpt-4-turbo',
-    'gemini-pro'
-]
+    'gpt-4o'
+]
+
+# ===== Agno Agent 配置 =====
+AGENT_CONFIG = {
+    # Planner Agent 配置
+    'planner': {
+        'model': 'gemini-2.5-flash',
+        'thinking_budget': 2048,
+        'temperature': 0.7,
+        'debug_mode': False
+    },
+
+    # Core Team 配置
+    'team': {
+        'model': 'gemini-2.5-flash',
+        'thinking_budget': 1024,
+        'temperature': 0.7,
+        'debug_mode': False,
+        'debug_level': 1
+    },
+
+    # Member Agents 配置
+    'scout': {
+        'model': 'gemini-2.5-flash',
+        'temperature': 0.5
+    },
+
+    'optimizer': {
+        'model': 'gemini-2.5-flash-lite',
+        'temperature': 0.3
+    },
+
+    'navigator': {
+        'model': 'gemini-2.5-flash-lite',
+        'temperature': 0.3
+    },
+
+    'weatherman': {
+        'model': 'gemini-2.5-flash-lite',
+        'temperature': 0.5
+    },
+
+    'presenter': {
+        'model': 'gemini-2.5-flash',
+        'temperature': 0.7
+    }
+}
+
+# ===== 資料庫配置 =====
+DATABASE_CONFIG = {
+    'planner_db': 'tmp/planner.db',
+    'team_db': 'tmp/team.db',
+    'poi_db': 'storage/lifeflow_payloads.db',
+    'offload_db': 'storage/offloaded_data.db'
+}
+
+# ===== 路徑配置 =====
+BASE_DIR = Path(__file__).parent
+STORAGE_DIR = BASE_DIR / 'storage'
+TMP_DIR = BASE_DIR / 'tmp'
+LOGS_DIR = BASE_DIR / 'logs'
+
+# 確保目錄存在
+for dir_path in [STORAGE_DIR, TMP_DIR, LOGS_DIR]:
+    dir_path.mkdir(parents=True, exist_ok=True)
+
+# ===== 日誌配置 =====
+LOGGING_CONFIG = {
+    'version': 1,
+    'disable_existing_loggers': False,
+    'formatters': {
+        'default': {
+            'format': '%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+        },
+        'detailed': {
+            'format': '%(asctime)s - %(name)s - %(levelname)s - [%(filename)s:%(lineno)d] - %(message)s'
+        }
+    },
+    'handlers': {
+        'console': {
+            'class': 'logging.StreamHandler',
+            'level': 'INFO',
+            'formatter': 'default',
+            'stream': 'ext://sys.stdout'
+        },
+        'file': {
+            'class': 'logging.handlers.RotatingFileHandler',
+            'level': 'DEBUG',
+            'formatter': 'detailed',
+            'filename': str(LOGS_DIR / 'lifeflow.log'),
+            'maxBytes': 10485760,  # 10MB
+            'backupCount': 5
+        }
+    },
+    'root': {
+        'level': 'INFO',
+        'handlers': ['console', 'file']
+    }
+}
+
+# ===== Gradio UI 配置 =====
+GRADIO_CONFIG = {
+    'server_name': '0.0.0.0',
+    'server_port': 7860,
+    'share': False,
+    'show_error': True,
+    'quiet': False
+}
+
+# ===== 預設位置 (台北101) =====
+DEFAULT_LOCATION = {
+    'lat': 25.033,
+    'lng': 121.565,
+    'name': 'Taipei 101'
+}
+
+# ===== Tool 配置 =====
+TOOL_CONFIG = {
+    'scout': {
+        'search_radius': 5000,  # 米
+        'max_results': 10,
+        'min_rating': 3.5
+    },
+    'optimizer': {
+        'algorithm': 'ortools_tsptw',
+        'max_iterations': 1000,
+        'time_limit_seconds': 30
+    },
+    'navigator': {
+        'travel_mode': 'driving',
+        'avoid_highways': False,
+        'avoid_tolls': False
+    },
+    'weather': {
+        'forecast_hours': 24,
+        'update_interval_minutes': 60
+    }
+}
+
+# ===== 功能開關 =====
+FEATURE_FLAGS = {
+    'enable_weather': True,
+    'enable_traffic': True,
+    'enable_chat': True,
+    'enable_map_visualization': True,
+    'enable_reasoning_display': True,
+    'enable_celebration_animation': True,
+    'enable_stream_output': True
+}
+
+# ===== 性能配置 =====
+PERFORMANCE_CONFIG = {
+    'max_concurrent_requests': 10,
+    'request_timeout_seconds': 120,
+    'cache_ttl_seconds': 3600,
+    'enable_caching': True
+}
+
+# ===== 安全配置 =====
+SECURITY_CONFIG = {
+    'max_input_length': 1000,
+    'max_tasks_per_request': 20,
+    'rate_limit_per_minute': 60,
+    'enable_input_validation': True
+}
+
+
+# ===== 導出配置函數 =====
+def get_agent_config(agent_name: str) -> dict:
+    """獲取指定 Agent 的配置"""
+    return AGENT_CONFIG.get(agent_name, {})
+
+
+def get_tool_config(tool_name: str) -> dict:
+    """獲取指定 Tool 的配置"""
+    return TOOL_CONFIG.get(tool_name, {})
+
+
+def is_feature_enabled(feature_name: str) -> bool:
+    """檢查功能是否啟用"""
+    return FEATURE_FLAGS.get(feature_name, False)
+
+
+def get_database_path(db_name: str) -> str:
+    """獲取資料庫路徑"""
+    return DATABASE_CONFIG.get(db_name, '')
+
+
+# ===== 環境檢查 =====
+def check_environment():
+    """檢查環境配置是否完整"""
+    missing_keys = []
+
+    required_keys = ['GEMINI_API_KEY', 'GOOGLE_MAPS_API_KEY']
+
+    for key in required_keys:
+        if not os.getenv(key):
+            missing_keys.append(key)
+
+    if missing_keys:
+        print(f"⚠️  Warning: Missing environment variables: {', '.join(missing_keys)}")
+        print("Please set them in your .env file or environment")
+        return False
+
+    return True
+
+
+# ===== 初始化配置 =====
+def initialize_config():
+    """初始化配置"""
+    # 檢查環境
+    check_environment()
+
+    # 創建必要的目錄
+    for dir_path in [STORAGE_DIR, TMP_DIR, LOGS_DIR]:
+        dir_path.mkdir(parents=True, exist_ok=True)
+
+    print("✅ Configuration initialized successfully")
+
+
+# 自動初始化
+if __name__ != "__main__":
+    initialize_config()

core/utils.py

@@ -4,6 +4,7 @@ LifeFlow AI - Core Utilities
 
 import plotly.graph_objects as go
 from config import AGENTS_INFO
+from datetime import datetime
 
 
 def create_agent_stream_output() -> str:
@@ -58,13 +59,30 @@ def create_agent_card_enhanced(agent_key: str, status: str = "idle", message: st
 
 
 def create_task_card(task_num: int, task_title: str, priority: str,
-                     time_window: str, duration: str, location: str, icon: str = "📋") -> str:
+                     time_window: dict, duration: str, location: str, icon: str = "📋") -> str:
     """創建任務卡片"""
     priority_color_map = {
         "HIGH": "#FF6B6B",
         "MEDIUM": "#F5A623",
         "LOW": "#7ED321"
     }
+    if time_window is None:
+        time_window = "Anytime"
+
+    elif isinstance(time_window, dict):
+        start = time_window.get('earliest_time', None)
+        end = time_window.get('latest_time', None)
+        start = datetime.fromisoformat(start).strftime("%H:%M") if start else "Before"
+        end = datetime.fromisoformat(end).strftime("%H:%M") if end else "After"
+
+        if start == "Before" and end == "After":
+            time_window = "Anytime"
+        elif start == "After":
+            time_window = f"After {end}"
+        elif end == "Before":
+            time_window = f"Before {start}"
+        else:
+            time_window = f"{start} - {end}"
 
     priority_class = f"priority-{priority.lower()}"
     task_color = priority_color_map.get(priority, "#999")
@@ -97,7 +115,7 @@ def create_task_card(task_num: int, task_title: str, priority: str,
 
 
 def create_summary_card(total_tasks: int, high_priority: int, total_time: int) -> str:
-    """創建摘要卡片"""
+    """創建摘要卡片""" #style="color: #FF6B6B;
     return f"""
     <div class="summary-card">
         <h3 style="margin: 0 0 15px 0; font-size: 20px;">📋 Task Summary</h3>
@@ -107,7 +125,7 @@ def create_summary_card(total_tasks: int, high_priority: int, total_time: int) -
                 <span class="stat-label">Tasks</span>
             </div>
             <div class="stat-item">
-                <span class="stat-value" style="color: #FF6B6B;">{high_priority}</span>
+                <span class="stat-value">{high_priority}</span> 
                 <span class="stat-label">High Priority</span>
             </div>
             <div class="stat-item">
@@ -248,373 +266,200 @@ def create_celebration_animation() -> str:
     """
 
 
-def create_result_visualization(task_list: list) -> str:
+def decode_polyline(polyline_str):
+    """
+    解碼 Google Maps Polyline 字符串為 (lat, lng) 列表
+    純 Python 實現，無需額外依賴
+    """
+    index, lat, lng = 0, 0, 0
+    coordinates = []
+    changes = {'latitude': 0, 'longitude': 0}
+
+    while index < len(polyline_str):
+        for unit in ['latitude', 'longitude']:
+            shift, result = 0, 0
+            while True:
+                byte = ord(polyline_str[index]) - 63
+                index += 1
+                result |= (byte & 0x1f) << shift
+                shift += 5
+                if not byte >= 0x20:
+                    break
+            if (result & 1):
+                changes[unit] = ~(result >> 1)
+            else:
+                changes[unit] = (result >> 1)
+
+        lat += changes['latitude']
+        lng += changes['longitude']
+        coordinates.append((lat / 100000.0, lng / 100000.0))
+
+    return coordinates
+
+
+def create_result_visualization(task_list: list, structured_data: dict) -> str:
     """
-    創建詳細的結果視覺化卡片
-    包含：快速摘要、時間線預覽、優化指標、關鍵亮點
+    創建詳細的結果視覺化卡片 (綁定真實數據)
     """
-    # 計算統計數據
-    total_tasks = len(task_list)
-    total_time_min = sum(int(t.get('duration', '0').split()[0]) for t in task_list)
-    total_time_hours = total_time_min // 60
-    total_time_remain = total_time_min % 60
-    time_str = f"{total_time_hours}h {total_time_remain}min" if total_time_hours > 0 else f"{total_time_min}min"
-
-    # 模擬數據（實際應該從優化結果獲取）
-    total_distance = 2.8
-    efficiency = 95
-    time_saved = 25
-    distance_reduced = 12
-
-    # 構建 HTML
+    # 提取數據
+    metrics = structured_data.get("metrics", {})
+    traffic = structured_data.get("traffic_summary", {})
+    timeline = structured_data.get("timeline", [])
+
+    # 1. 計算摘要數據
+    completed_tasks = metrics.get("completed_tasks", 0)
+    total_tasks = metrics.get("total_tasks", 0)
+
+    total_dist_km = traffic.get("total_distance_km", 0)
+    total_dur_min = traffic.get("total_duration_min", 0)
+
+    # 格式化時間 (例如 85 min -> 1h 25min)
+    hours = int(total_dur_min // 60)
+    mins = int(total_dur_min % 60)
+    time_str = f"{hours}h {mins}m" if hours > 0 else f"{mins}min"
+
+    # 2. 優化指標
+    efficiency = metrics.get("route_efficiency_pct", 90)
+    time_saved_pct = metrics.get("time_improvement_pct", 0)
+    dist_saved_pct = metrics.get("distance_improvement_pct", 0)
+
+    time_saved_val = metrics.get("time_saved_min", 0)
+    dist_saved_val_km = metrics.get("distance_saved_m", 0) / 1000
+
     html = f"""
     <div class="result-visualization">
-        <!-- 標題 -->
         <div class="result-header">
             <h2 style="color: #50C878; margin: 0; font-size: 28px; display: flex; align-items: center; gap: 10px;">
                 <span class="celebration-icon" style="font-size: 36px; animation: bounce 1s infinite;">🎉</span>
                 <span>Planning Complete!</span>
             </h2>
-            <p style="margin: 10px 0 0 0; opacity: 0.8; font-size: 14px;">Your optimized route is ready</p>
+            <p style="margin: 10px 0 0 0; opacity: 0.8; font-size: 14px;">Optimized based on real-time traffic & weather</p>
         </div>
 
-        <!-- 快速摘要 -->
         <div class="quick-summary" style="margin-top: 25px;">
             <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">📊 Quick Summary</h3>
             <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
                 <div class="summary-metric">
                     <div class="metric-icon">🎯</div>
                     <div class="metric-content">
-                        <div class="metric-value">{total_tasks}</div>
-                        <div class="metric-label">Total Tasks</div>
+                        <div class="metric-value">{completed_tasks} / {total_tasks}</div>
+                        <div class="metric-label">Tasks Completed</div>
                     </div>
                 </div>
                 <div class="summary-metric">
                     <div class="metric-icon">⏱️</div>
                     <div class="metric-content">
                         <div class="metric-value">{time_str}</div>
-                        <div class="metric-label">Total Time</div>
+                        <div class="metric-label">Total Duration</div>
                     </div>
                 </div>
                 <div class="summary-metric">
                     <div class="metric-icon">🚗</div>
                     <div class="metric-content">
-                        <div class="metric-value">{total_distance}km</div>
+                        <div class="metric-value">{total_dist_km:.1f} km</div>
                         <div class="metric-label">Total Distance</div>
                     </div>
                 </div>
                 <div class="summary-metric success">
-                    <div class="metric-icon">✅</div>
+                    <div class="metric-icon">⚡</div>
                     <div class="metric-content">
-                        <div class="metric-value">All Met</div>
-                        <div class="metric-label">Deadlines</div>
+                        <div class="metric-value">{efficiency}%</div>
+                        <div class="metric-label">Efficiency Score</div>
                     </div>
                 </div>
             </div>
         </div>
 
-        <!-- 時間線預覽 -->
         <div class="timeline-preview" style="margin-top: 25px;">
             <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">🗓️ Timeline Preview</h3>
             <div class="timeline-container">
-"""
+    """
 
-    # 添加時間線項目
-    for i, task in enumerate(task_list):
-        task_time = task.get('time', 'Anytime')
-        task_title = task.get('title', 'Task')
-        task_icon = task.get('icon', '📋')
-
-        # 解析時間（簡化示例）
-        if '-' in task_time:
-            times = task_time.split('-')
-            start = times[0].strip()
-            end = times[1].strip()
-        else:
-            start = '10:00'
-            end = '10:30'
+    # 綁定時間線數據
+    # 跳過 start point (index 0) 如果不需要顯示，或者全部顯示
+    for i, stop in enumerate(timeline):
+        time = stop.get("time", "")
+        loc_name = stop.get("location", "")
+        weather = stop.get("weather", "")
+        travel_time = stop.get("travel_time_from_prev", "")
+
+        # 簡單的圖標邏輯
+        icon = "🏁" if i == 0 else ("🔚" if i == len(timeline) - 1 else "📍")
 
         html += f"""
                 <div class="timeline-item">
-                    <div class="timeline-time">{start}</div>
-                    <div class="timeline-connector">━━━</div>
+                    <div class="timeline-time">{time}</div>
+                    <div class="timeline-connector">━━</div>
                     <div class="timeline-task">
-                        <span class="timeline-icon">{task_icon}</span>
-                        <span class="timeline-title">{task_title}</span>
+                        <span class="timeline-icon">{icon}</span>
+                        <div class="timeline-info">
+                            <span class="timeline-title">{loc_name}</span>
+                            <span class="timeline-meta">{weather}</span>
+                        </div>
                     </div>
-                    <div class="timeline-connector">���━━</div>
-                    <div class="timeline-time">{end}</div>
                 </div>
-"""
+        """
 
-        # 添加旅行時間（除了最後一個任務）
-        if i < len(task_list) - 1:
-            travel_time = ['15min', '20min', '10min'][i] if i < 3 else '15min'
+        # 添加交通時間 (如果不是最後一個)
+        if i < len(timeline) - 1:
+            next_travel = timeline[i + 1].get("travel_time_from_prev", "0 mins")
             html += f"""
                 <div class="timeline-travel">
                     <div class="travel-arrow">↓</div>
-                    <div class="travel-time">{travel_time}</div>
+                    <div class="travel-time">Drive: {next_travel}</div>
                 </div>
-"""
+            """
 
     html += """
             </div>
         </div>
 
-        <!-- 優化指標 -->
         <div class="optimization-metrics" style="margin-top: 25px;">
             <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">📈 Optimization Metrics</h3>
             <div class="metrics-grid">
-"""
+    """
 
-    # 添加進度條指標
-    metrics = [
+    # 綁定指標數據
+    viz_metrics = [
         ("Route Efficiency", efficiency, "#50C878"),
-        ("Time Optimization", 100 - (time_saved / 60 * 100), "#4A90E2"),
-        ("Distance Reduction", distance_reduced, "#F5A623")
+        ("Time Saved", time_saved_pct, "#4A90E2"),
+        ("Distance Reduced", dist_saved_pct, "#F5A623")
     ]
 
-    for label, value, color in metrics:
+    for label, value, color in viz_metrics:
+        # 限制 value 在 0-100 之間顯示
+        display_val = min(max(value, 0), 100)
         html += f"""
                 <div class="metric-bar">
                     <div class="metric-bar-header">
                         <span class="metric-bar-label">{label}</span>
-                        <span class="metric-bar-value">{int(value)}%</span>
+                        <span class="metric-bar-value">{value:.1f}%</span>
                     </div>
                     <div class="metric-bar-track">
-                        <div class="metric-bar-fill" style="width: {value}%; background: {color};"></div>
+                        <div class="metric-bar-fill" style="width: {display_val}%; background: {color};"></div>
                     </div>
                 </div>
-"""
+        """
 
-    html += """
+    html += f"""
             </div>
             <div class="optimization-stats" style="margin-top: 15px; display: flex; gap: 20px; flex-wrap: wrap;">
                 <div class="stat-badge">
-                    <span class="stat-badge-icon">⚡</span>
-                    <span class="stat-badge-text">Time Saved: <strong>25 min</strong></span>
+                    <span class="stat-badge-icon">⏱️</span>
+                    <span class="stat-badge-text">Saved: <strong>{time_saved_val} min</strong></span>
                 </div>
                 <div class="stat-badge">
                     <span class="stat-badge-icon">📏</span>
-                    <span class="stat-badge-text">Distance Reduced: <strong>12%</strong></span>
-                </div>
-            </div>
-        </div>
-
-        <!-- 關鍵亮點 -->
-        <div class="key-highlights" style="margin-top: 25px;">
-            <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">⚡ Key Highlights</h3>
-            <div class="highlights-list">
-                <div class="highlight-item success">
-                    <span class="highlight-icon">✓</span>
-                    <span class="highlight-text">No traffic delays expected</span>
-                </div>
-                <div class="highlight-item success">
-                    <span class="highlight-icon">✓</span>
-                    <span class="highlight-text">All locations open during visit</span>
-                </div>
-                <div class="highlight-item success">
-                    <span class="highlight-icon">✓</span>
-                    <span class="highlight-text">Weather conditions: Favorable</span>
-                </div>
-                <div class="highlight-item info">
-                    <span class="highlight-icon">ℹ</span>
-                    <span class="highlight-text">Recommended departure: 08:45 AM</span>
+                    <span class="stat-badge-text">Reduced: <strong>{dist_saved_val_km:.1f} km</strong></span>
                 </div>
             </div>
         </div>
     </div>
 
     <style>
-    @keyframes bounce {
-        0%, 100% { transform: translateY(0); }
-        50% { transform: translateY(-10px); }
-    }
-
-    .result-visualization {
-        padding: 25px;
-        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        border-radius: 15px;
-        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-    }
-
-    .quick-summary .summary-metric {
-        background: white;
-        padding: 15px;
-        border-radius: 12px;
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-        transition: transform 0.2s;
-    }
-
-    .quick-summary .summary-metric:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    }
-
-    .quick-summary .summary-metric.success {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-    }
-
-    .metric-icon {
-        font-size: 28px;
-    }
-
-    .metric-value {
-        font-size: 20px;
-        font-weight: bold;
-        line-height: 1.2;
-    }
-
-    .metric-label {
-        font-size: 12px;
-        opacity: 0.8;
-    }
-
-    .timeline-preview {
-        background: white;
-        padding: 20px;
-        border-radius: 12px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-    }
-
-    .timeline-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin: 8px 0;
-        font-size: 14px;
-    }
-
-    .timeline-time {
-        font-weight: 600;
-        color: #4A90E2;
-        min-width: 50px;
-    }
-
-    .timeline-connector {
-        color: #ddd;
-        font-weight: bold;
-    }
-
-    .timeline-task {
-        background: #f0f4f8;
-        padding: 8px 12px;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        flex: 1;
-    }
-
-    .timeline-travel {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        margin-left: 60px;
-        font-size: 13px;
-        color: #666;
-    }
-
-    .travel-arrow {
-        color: #4A90E2;
-        font-weight: bold;
-    }
-
-    .optimization-metrics {
-        background: white;
-        padding: 20px;
-        border-radius: 12px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-    }
-
-    .metric-bar {
-        margin-bottom: 15px;
-    }
-
-    .metric-bar-header {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 6px;
-        font-size: 13px;
-    }
-
-    .metric-bar-label {
-        font-weight: 500;
-    }
-
-    .metric-bar-value {
-        font-weight: 600;
-        color: #50C878;
-    }
-
-    .metric-bar-track {
-        height: 8px;
-        background: #e0e0e0;
-        border-radius: 4px;
-        overflow: hidden;
-    }
-
-    .metric-bar-fill {
-        height: 100%;
-        border-radius: 4px;
-        transition: width 1s ease-out;
-    }
-
-    .stat-badge {
-        background: #f0f4f8;
-        padding: 8px 15px;
-        border-radius: 20px;
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 13px;
-    }
-
-    .stat-badge-icon {
-        font-size: 16px;
-    }
-
-    .key-highlights {
-        background: white;
-        padding: 20px;
-        border-radius: 12px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-    }
-
-    .highlight-item {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        padding: 10px;
-        margin: 6px 0;
-        border-radius: 8px;
-        font-size: 14px;
-    }
-
-    .highlight-item.success {
-        background: #e8f5e9;
-    }
-
-    .highlight-item.info {
-        background: #e3f2fd;
-    }
-
-    .highlight-icon {
-        font-size: 18px;
-        font-weight: bold;
-    }
-
-    .highlight-item.success .highlight-icon {
-        color: #4CAF50;
-    }
-
-    .highlight-item.info .highlight-icon {
-        color: #2196F3;
-    }
+    /* ... 保留原本的 CSS ... */
+    .timeline-info {{display: flex; flex-direction: column; }}
+    .timeline-meta {{font - size: 11px; color: #666; margin-top: 2px; }}
     </style>
     """
     return html

ui/components/header.py

@@ -1,26 +1,23 @@
 """
 LifeFlow AI - Header Component
-應用標題和頂部控制按鈕
 """
 import gradio as gr
 
-
 def create_header():
-    """創建應用 Header - 更大的標題"""
-    header_html = """
+    return gr.HTML("""
     <div class="app-header">
         <h1>✨ LifeFlow AI</h1>
         <p>Your Intelligent Daily Trip Planning Assistant</p>
     </div>
-    """
-    return gr.HTML(header_html)
-
+    """)
 
 def create_top_controls():
-    """創建頂部控制按鈕（Theme Toggle, Settings & Doc）- 使用絕對定位"""
-    # 不使用 gr.Row，直接創建獨立按鈕
-    theme_btn = gr.Button("🌓", elem_id="theme-toggle", size="sm")
-    settings_btn = gr.Button("⚙️", elem_id="settings-btn", size="sm")
-    doc_btn = gr.Button("📖", elem_id="doc-btn", size="sm")
+    """
+    創建右上角懸浮按鈕
+    """
+    with gr.Group(elem_id="top-controls-container"):
+        theme_btn = gr.Button("🌓", elem_classes="control-btn", size="sm")
+        settings_btn = gr.Button("⚙️", elem_classes="control-btn", size="sm")
+        doc_btn = gr.Button("📖", elem_classes="control-btn", size="sm")
 
     return theme_btn, settings_btn, doc_btn

ui/components/input_form.py

@@ -1,10 +1,8 @@
 """
 LifeFlow AI - Input Form Component
-Step 1: 用戶輸入表單
 """
 import gradio as gr
 
-
 def create_input_form(agent_stream_html):
     """創建輸入表單"""
     with gr.Group(visible=True) as input_area:
@@ -16,8 +14,11 @@ def create_input_form(agent_stream_html):
             lines=3
         )
         gr.Markdown("---")
-        auto_location = gr.Checkbox(label="📍 Auto-detect my location", value=False)
 
+        # Auto-location toggle
+        auto_location = gr.Checkbox(label="📍 Auto-detect my location (Simulated)", value=False)
+
+        # Manual Location Inputs (Group)
         with gr.Group(visible=True) as location_inputs:
             with gr.Row():
                 lat_input = gr.Number(label="Latitude", value=25.033, precision=6)
@@ -28,7 +29,10 @@ def create_input_form(agent_stream_html):
     return (input_area, agent_stream_output, user_input, auto_location,
             location_inputs, lat_input, lon_input, analyze_btn)
 
-
-def toggle_location_inputs(auto_location):
-    """切換位置輸入顯示"""
-    return gr.update(visible=not auto_location)
+def toggle_location_inputs(auto_loc):
+    """
+    Visibility Toggle Logic:
+    If Auto-detect is ON (True) -> Hide Manual Inputs (False)
+    If Auto-detect is OFF (False) -> Show Manual Inputs (True)
+    """
+    return gr.update(visible=not auto_loc)

ui/components/modals.py

@@ -1,12 +1,6 @@
 """
 LifeFlow AI - Settings & Documentation Modals
-設定和文檔模態框
 """
-import sys
-from pathlib import Path
-
-current_dir = Path(__file__).parent.parent.parent
-sys.path.insert(0, str(current_dir))
 
 import gradio as gr
 from config import MODEL_CHOICES

ui/components/results.py

@@ -1,18 +1,9 @@
 """
 LifeFlow AI - Results Component
-Step 3: 結果展示
 ✅ 新增 Chat with LifeFlow Tab
 ✅ 支援任務修改對話
 """
-import sys
-from pathlib import Path
-
-current_dir = Path(__file__).parent.parent.parent
-sys.path.insert(0, str(current_dir))
-
 import gradio as gr
-from config import AGENTS_INFO
-
 
 def create_team_area(create_agent_card_func):
     """創建 AI Team 展示區域"""