Ref: Refactor architecture to decouple UI from logic, implement server-side session persistence for agents, and restore full map/metrics visualizations.

app.py

@@ -1,911 +1,217 @@
 """
-LifeFlow AI - Multi-User Safe with Real Streaming
-支持多用戶並發 + 真正的串流輸出 + 安全的設定隔離
+LifeFlow AI - Main Application (Refactored)
+Controller Layer: 負責 UI 佈局與 Service 連接
 """
 
-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 typing import List
 
-# ===== 導入配置 =====
-from config import DEFAULT_SETTINGS, APP_TITLE
+# ===== Core & Data Models =====
+from core.session import UserSession
+from services.planner_service import PlannerService
 
-# ===== 導入 UI 組件 =====
+# ===== UI & Config =====
+from config import APP_TITLE, DEFAULT_SETTINGS
 from ui.theme import get_enhanced_css
+from ui.renderers import (
+    create_agent_stream_output,
+    create_agent_card_enhanced,
+    get_reasoning_html_reversed,
+    generate_chat_history_html_bubble
+)
+from core.visualizers import create_animated_map
+
+# ===== UI Components =====
 from ui.components.header import create_header, create_top_controls
 from ui.components.input_form import create_input_form, toggle_location_inputs
-from ui.components.confirmation import create_confirmation_area, create_exit_button
+from ui.components.confirmation import create_confirmation_area
 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,
-    get_reasoning_html_reversed, create_celebration_animation,
-    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 - Multi-User Safe Version"""
-
     def __init__(self):
-        # [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 = 'gemini-2.5-flash' #session.custom_settings.get('model', 'gemini-2.5-flash')
-
-        # [Security Fix] 優先使用用戶提供的 API Key (這裡以 Gemini 為例，若支援其他模型需擴充邏輯)
-        gemini_api_key =  session.custom_settings.get("gemini_api_key", "")
-        google_maps_api_key = session.custom_settings.get("google_maps_api_key", "")
-        openweather_api_key = session.custom_settings.get("openweather_api_key", "")
-
-        # 初始化模型 (應用設定)
-        planner_model = Gemini(
-            id=selected_model_id,
-            thinking_budget=2048,
-            api_key=gemini_api_key
-        )
-
-        main_model = Gemini(
-            id=selected_model_id,
-            thinking_budget=1024,
-            api_key=gemini_api_key
-        )
-
-        lite_model = Gemini(
-            id="gemini-2.5-flash-lite",  # 輕量級模型通常固定或由次要選項決定
-            api_key=gemini_api_key
-        )
-
-        # 配置模型和工具
-        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(google_maps_api_key)],
-            "optimizer": [OptimizationToolkit(google_maps_api_key)],
-            "navigator": [NavigationToolkit(google_maps_api_key)],
-            "weatherman": [WeatherToolkit(openweather_api_key)],
-            "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
-        )
-
-        session.core_team = create_core_team(
-            models_dict,
-            team_kwargs,
-            tools_dict,
-            session_id=session.session_id
-        )
-
-        logger.info(f"✅ Agents initialized for session {session.session_id} using model {selected_model_id}")
-
-    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
-
-        if auto_location:
-            lat, lon = 25.033, 121.565
-
-        try:
-            self._initialize_agents(session, lat, lon)
-
-            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...")
-            )
+        self.service = PlannerService()
 
-            time_module.sleep(0.3)
-
-            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...")
-            )
-
-            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():
-            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
-
-        session.chat_history.append({
-            "role": "user",
-            "message": user_message,
-            "time": datetime.now().strftime("%H:%M:%S")
-        })
-
-        yield (
-            self._generate_chat_history_html(session),
-            self._generate_task_list_html(session),
-            session.to_dict()
-        )
-
-        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()
-            )
-
-            planner_stream = session.planner_agent.run(
-                f"help user to update the task_list, user's message: {user_message}",
-                stream=True,
-                stream_events=True
-            )
-
-            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}
-            )
-
-            task_list_data = json.loads(json_data)
-            session.task_list = self._convert_task_list_to_ui_format(task_list_data)
+    def _get_agent_outputs(self, active_agent: str = None, status: str = "idle", message: str = "Waiting") -> List[str]:
+        """
+        輔助函數：生成 6 個 Agent 卡片的 HTML 列表
+        用於在 Gradio 中更新 agent_displays
+        """
+        agents = ['planner', 'scout', 'optimizer', 'validator', 'weather', 'traffic']
+        outputs = []
+        for agent in agents:
+            if agent == active_agent:
+                outputs.append(create_agent_card_enhanced(agent, status, message))
+            else:
+                # 簡單處理：非活動 Agent 顯示 Idle 或保持原狀 (這裡簡化為 Idle，可根據需求優化)
+                outputs.append(create_agent_card_enhanced(agent, "idle", "On standby"))
+        return outputs
 
-            session.chat_history[-1] = {
-                "role": "assistant",
-                "message": "✅ Tasks updated based on your request",
-                "time": datetime.now().strftime("%H:%M:%S")
-            }
+    def analyze_wrapper(self, user_input, auto_loc, lat, lon, session_data):
+        """Step 1: 呼叫 Service 並將結果轉換為 Gradio Updates"""
+        session = UserSession.from_dict(session_data)
 
-            self._add_reasoning(session, "planner", f"Updated: {user_message[:30]}...")
+        # 呼叫 Service Generator
+        iterator = self.service.run_step1_analysis(user_input, auto_loc, lat, lon, session)
+
+        for event in iterator:
+            evt_type = event.get("type")
+
+            # 準備 Agent 狀態
+            agent_status = event.get("agent_status", ("planner", "idle", "Waiting"))
+            agent_outputs = self._get_agent_outputs(*agent_status)
+
+            # 獲取推理過程 HTML
+            # 注意：event 中可能已更新 session，從 session 獲取最新 reasoning
+            current_session = event.get("session", session)
+            reasoning_html = get_reasoning_html_reversed(current_session.reasoning_messages)
+
+            if evt_type == "stream":
+                yield (
+                    create_agent_stream_output().replace("Ready to analyze...", event.get("stream_text", "")),
+                    gr.HTML(),  # Task Summary (Empty)
+                    gr.HTML(),  # Task List (Empty)
+                    reasoning_html,
+                    gr.update(visible=False),  # Confirm Area
+                    gr.update(visible=False),  # Chat Input
+                    gr.HTML(),  # Chat History
+                    f"Processing: {agent_status[2]}",  # Status Bar
+                    *agent_outputs,
+                    current_session.to_dict()
+                )
+
+            elif evt_type == "complete":
+                # 完成時生成 Task List HTML
+                task_html = self.service.generate_task_list_html(current_session)
+                # 生成 Summary HTML (這裡簡化調用，實際可從 service 獲取)
+                summary_html = f"<div class='summary-card'>Found {len(current_session.task_list)} tasks</div>"
+
+                # 更新所有 Agent 為完成
+                final_agents = self._get_agent_outputs("planner", "complete", "Tasks ready")
+
+                yield (
+                    create_agent_stream_output().replace("Ready...", event.get("stream_text", "")),
+                    gr.HTML(value=summary_html),
+                    gr.HTML(value=task_html),
+                    reasoning_html,
+                    gr.update(visible=True),  # Confirm Area Show
+                    gr.update(visible=False),
+                    generate_chat_history_html_bubble(current_session),
+                    "✓ Tasks extracted",
+                    *final_agents,
+                    current_session.to_dict()
+                )
+
+            elif evt_type == "error":
+                err_msg = event.get("message", "Unknown error")
+                error_agents = self._get_agent_outputs("planner", "idle", "Error")
+                yield (
+                    f"<div style='color:red'>Error: {err_msg}</div>",
+                    gr.HTML(), gr.HTML(), reasoning_html,
+                    gr.update(visible=False), gr.update(visible=False), gr.HTML(),
+                    f"Error: {err_msg}",
+                    *error_agents,
+                    current_session.to_dict()
+                )
+
+    def chat_wrapper(self, msg, session_data):
+        """Chat Logic Wrapper"""
+        session = UserSession.from_dict(session_data)
+        iterator = self.service.modify_task_chat(msg, session)
 
-            yield (
-                self._generate_chat_history_html(session),
-                self._generate_task_list_html(session),
-                session.to_dict()
-            )
+        for event in iterator:
+            current_session = event.get("session", session)
+            chat_html = generate_chat_history_html_bubble(current_session)
+            task_html = self.service.generate_task_list_html(current_session)
 
-        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()
+                chat_html,
+                task_html,
+                current_session.to_dict()
             )
 
-    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...")
+    def step2_wrapper(self, session_data):
+        """Step 2 Wrapper"""
+        session = UserSession.from_dict(session_data)
+        result = self.service.run_step2_search(session)
+        current_session = result.get("session", session)
 
-        agent_updates = [
-            create_agent_card_enhanced("planner", "complete", "Tasks ready"),
-            create_agent_card_enhanced("scout", "working", "Searching..."),
-            *[create_agent_card_enhanced(k, "idle", "On standby")
-              for k in ["optimizer", "validator", "weather", "traffic"]]
-        ]
+        reasoning_html = get_reasoning_html_reversed(current_session.reasoning_messages)
+        agent_outputs = self._get_agent_outputs("scout", "working", "Searching POIs...")
 
         return (
-            get_reasoning_html_reversed(session.reasoning_messages),
+            reasoning_html,
             "🗺️ Scout is searching...",
-            *agent_updates,
-            session.to_dict()
+            *agent_outputs,
+            current_session.to_dict()
         )
 
-    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")
-
-            set_session_id(session.session_id)
-            task_list_input = session.planner_agent.get_session_state().get("task_list")
-
-            if not task_list_input:
-                raise ValueError("No task list available")
-
-            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)
-
-            self._add_reasoning(session, "team", "🎯 Multi-agent collaboration started")
-
-            team_stream = session.core_team.run(
-                f"Plan this trip: {task_list_str}",
-                stream=True,
-                stream_events=True,
-                session_id=session.session_id
-            )
-
-            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
+    def step3_wrapper(self, session_data):
+        """Step 3 Wrapper"""
+        session = UserSession.from_dict(session_data)
+        iterator = self.service.run_step3_team(session)
+
+        for event in iterator:
+            current_session = event.get("session", session)
+            if event["type"] == "complete":
+                yield (event.get("report_html", ""), current_session.to_dict())
+            elif event["type"] == "error":
+                yield (f"Error: {event.get('message')}", current_session.to_dict())
+            # 可以根據需要處理中間狀態更新
+
+    def step4_wrapper(self, session_data):
+        """Step 4 Wrapper"""
+        session = UserSession.from_dict(session_data)
+        result = self.service.run_step4_finalize(session)
+        current_session = result.get("session", session)
 
+        if result["type"] == "success":
+            agent_outputs = self._get_agent_outputs("team", "complete", "Done")
             return (
-                timeline_html, metrics_html, result_viz, map_fig,
-                gr.update(visible=True), gr.update(visible=False),
+                result["timeline_html"],
+                result["metrics_html"],
+                result["result_html"],
+                result["map_fig"],
+                gr.update(visible=True),  # Show Map Tab
+                gr.update(visible=False),  # Hide Team Area
                 "🎉 Planning completed!",
-                *agent_updates,
-                session.to_dict()
+                *agent_outputs,
+                current_session.to_dict()
             )
-
-        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>"
+        else:
+            # Error handling
             default_map = create_animated_map()
-            agent_updates = [
-                create_agent_card_enhanced(k, "idle", "Waiting...")
-                for k in ["planner", "scout", "optimizer", "validator", "weather", "traffic"]
-            ]
+            agent_outputs = self._get_agent_outputs("team", "idle", "Error")
+            err = result.get("message", "Error")
             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()
+                f"Error: {err}", "", "", default_map,
+                gr.update(), gr.update(),
+                f"Error: {err}",
+                *agent_outputs,
+                current_session.to_dict()
             )
 
-    # ===== 輔助方法 =====
-
-    # [Security Fix] 新增：保存設定到 User Session
     def save_settings(self, google_key, weather_key, gemini_key, model, session_data):
-        """保存設定到用戶 Session"""
+        """Settings Save Wrapper"""
         session = UserSession.from_dict(session_data)
-
         session.custom_settings['google_maps_api_key'] = google_key
         session.custom_settings['openweather_api_key'] = weather_key
         session.custom_settings['gemini_api_key'] = gemini_key
         session.custom_settings['model'] = model
         return "✅ Settings saved locally!", session.to_dict()
 
-    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 (
-            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 _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 _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 _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 _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 session.task_list:
-            html += create_task_card(
-                task["id"], task["title"], task["priority"],
-                task["time"], task["duration"], task["location"],
-                task.get("icon", "📋")
-            )
-        return html
-
-    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 class="chat-welcome">
-            <h3>💬 Chat with LifeFlow AI</h3>
-            <p>Modify your tasks by chatting here.</p>
-        </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 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 _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):
         with gr.Blocks(title=APP_TITLE) as demo:
             gr.HTML(get_enhanced_css())
             create_header()
-
             theme_btn, settings_btn, doc_btn = create_top_controls()
 
-            # 🔥 每個 Browser Tab 都有獨立的 UserSession
+            # State
             session_state = gr.State(value=UserSession().to_dict())
 
             with gr.Row():
+                # Left Column
                 with gr.Column(scale=2, min_width=400):
                     (input_area, agent_stream_output, user_input, auto_location,
                      location_inputs, lat_input, lon_input, analyze_btn) = create_input_form(
@@ -915,10 +221,14 @@ class LifeFlowAI:
                     (task_confirm_area, task_summary_display,
                      task_list_display, exit_btn_inline, ready_plan_btn) = create_confirmation_area()
 
+                    # Team Area
                     team_area, agent_displays = create_team_area(create_agent_card_enhanced)
+
+                    # Result Area
                     (result_area, result_display, timeline_display, metrics_display) = create_result_area(
                         create_animated_map)
 
+                # Right Column
                 with gr.Column(scale=3, min_width=500):
                     status_bar = gr.Textbox(label="📊 Status", value="Waiting for input...", interactive=False,
                                             max_lines=1)
@@ -927,22 +237,19 @@ class LifeFlowAI:
                         create_animated_map, get_reasoning_html_reversed()
                     )
 
+            # Modals
             (settings_modal, google_maps_key, openweather_key, gemini_api_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 Binding =====
 
             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
             analyze_btn.click(
-                fn=analyze_wrapper,
+                fn=self.analyze_wrapper,
                 inputs=[user_input, auto_location, lat_input, lon_input, session_state],
                 outputs=[
                     agent_stream_output, task_summary_display, task_list_display,
@@ -954,16 +261,14 @@ class LifeFlowAI:
                 outputs=[input_area, task_confirm_area, chat_input_area]
             )
 
-            def chat_wrapper(msg, s):
-                session = UserSession.from_dict(s)
-                yield from self.modify_task_chat(msg, session)
-
+            # Chat
             chat_send.click(
-                fn=chat_wrapper,
+                fn=self.chat_wrapper,
                 inputs=[chat_input, session_state],
                 outputs=[chat_history_output, task_list_display, session_state]
             ).then(fn=lambda: "", outputs=[chat_input])
 
+            # Exit
             exit_btn_inline.click(
                 fn=lambda: (
                     gr.update(visible=True), gr.update(visible=False),
@@ -971,34 +276,34 @@ class LifeFlowAI:
                     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, session_state
+                    agent_stream_output, status_bar, session_state
                 ]
             )
 
+            # Step 2, 3, 4 Sequence
             ready_plan_btn.click(
                 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(
-                fn=lambda s: self.step2_search_pois(UserSession.from_dict(s)),
+                fn=self.step2_wrapper,
                 inputs=[session_state],
                 outputs=[reasoning_output, status_bar, *agent_displays, session_state]
             ).then(
-                fn=lambda s: self.step3_run_core_team(UserSession.from_dict(s)),
+                fn=self.step3_wrapper,
                 inputs=[session_state],
                 outputs=[report_output, session_state]
             ).then(
                 fn=lambda: (gr.update(visible=True), gr.update(visible=True), gr.update(selected="report_tab")),
                 outputs=[report_tab, map_tab, tabs]
             ).then(
-                fn=lambda s: self.step4_finalize(UserSession.from_dict(s)),
+                fn=self.step4_wrapper,
                 inputs=[session_state],
                 outputs=[
                     timeline_display, metrics_display, result_display,
@@ -1006,18 +311,15 @@ class LifeFlowAI:
                 ]
             ).then(fn=lambda: gr.update(visible=True), outputs=[result_area])
 
-            # Settings
+            # Settings & Docs Handlers
             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, gemini_api_key, model_choice, session_state],
                 outputs=[settings_status, session_state]
             )
 
-            # Theme
             theme_btn.click(fn=None, js="""
                 () => {
                     const container = document.querySelector('.gradio-container');

core/helpers.py

@@ -0,0 +1,34 @@
+"""
+LifeFlow AI - Core Helpers
+純資料處理工具，無 UI 依賴
+"""
+
+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

core/session.py

@@ -0,0 +1,65 @@
+"""
+LifeFlow AI - Session Management
+負責定義用戶會話的數據結構 (Model)
+"""
+import uuid
+from typing import Dict, Any, Optional
+from src.agent.base import UserState, Location
+from src.infra.context import set_session_id
+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,
+            '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')
+        session.custom_settings = data.get('custom_settings', {})
+        return session

core/visualizers.py

@@ -0,0 +1,128 @@
+"""
+LifeFlow AI - Visualizers
+負責生成 Plotly 圖表物件 (完整版)
+"""
+import plotly.graph_objects as go
+from core.helpers import decode_polyline
+from src.infra.logger import get_logger
+
+logger = get_logger(__name__)
+
+def create_animated_map(structured_data=None):
+    """
+    生成 Plotly 地圖，包含真實道路軌跡 (Polyline)
+    :param structured_data: 從資料庫載入的完整行程資料
+    """
+    fig = go.Figure()
+
+    # 如果沒有數據，回傳預設地圖 (台北101周邊)
+    if not structured_data:
+        default_lats = [25.033, 25.038]
+        default_lons = [121.565, 121.560]
+        fig.add_trace(go.Scattermapbox(
+            lat=default_lats, lon=default_lons,
+            mode='markers', marker=dict(size=10, color='#999'),
+            text=['No Data'], hoverinfo='text'
+        ))
+        center_lat, center_lon = 25.033, 121.565
+    else:
+        try:
+            timeline = structured_data.get("timeline", [])
+            precise_result = structured_data.get("precise_traffic_result", {})
+            legs = precise_result.get("legs", [])
+
+            # 1. 繪製路線 (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]
+
+                    # 插入 None 來斷開不同路段 (如果你希望路段分開)
+                    # 或者直接串接 (視覺上較連續)
+                    route_lats.extend(leg_lats)
+                    route_lons.extend(leg_lons)
+                    route_lats.append(None) # 斷開不同路段，避免直線飛越
+                    route_lons.append(None)
+
+            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'
+                ))
+
+            # 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_str = stop.get("time", "")
+                    weather = stop.get("weather", "")
+                    text = f"<b>{i}. {name}</b><br>🕒 {time_str}<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
+
+        except Exception as e:
+            logger.error(f"Error generating map data: {e}", exc_info=True)
+            center_lat, center_lon = 25.033, 121.565
+
+    # 設定地圖樣式
+    fig.update_layout(
+        mapbox=dict(
+            style='open-street-map',
+            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

services/planner_service.py

@@ -0,0 +1,449 @@
+"""
+LifeFlow AI - Planner Service (Fixed: Session Persistence)
+核心業務邏輯層：負責協調 Agent 運作、狀態更新與資料處理。
+"""
+import json
+import time
+import uuid
+from datetime import datetime
+from typing import Generator, Dict, Any, Tuple, Optional
+
+# 導入 Core & UI 模組
+from core.session import UserSession
+from ui.renderers import (
+    create_agent_stream_output,
+    create_agent_card_enhanced,
+    create_task_card,
+    create_summary_card,
+    create_timeline_html_enhanced,
+    generate_chat_history_html_bubble,
+    get_reasoning_html_reversed,
+    create_result_visualization,
+    create_metrics_cards
+)
+from core.visualizers import create_animated_map
+
+# 導入 Config
+from config import AGENTS_INFO
+
+# 導入 Agent 系統
+from agno.models.google import Gemini
+from agno.agent import RunEvent
+from agno.run.team import TeamRunEvent
+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
+from src.infra.poi_repository import poi_repo
+from src.tools import (
+    ScoutToolkit, OptimizationToolkit,
+    NavigationToolkit, WeatherToolkit, ReaderToolkit
+)
+from src.infra.logger import get_logger
+
+logger = get_logger(__name__)
+
+class PlannerService:
+    """
+    PlannerService 封裝了所有的業務流程 (Step 1-4)。
+    修正：使用 class level dictionary 來保存活著的 session 物件，防止 Agent 丟失。
+    """
+
+    # 🌟 [Fix] In-Memory Store: 保存包含 Agent 實例的完整 Session 物件
+    _active_sessions: Dict[str, UserSession] = {}
+
+    def _get_live_session(self, incoming_session: UserSession) -> UserSession:
+        """
+        [Fix] 輔助方法：
+        從 Gradio 傳來的 incoming_session 只有數據 (Agent 為 None)。
+        我們需要從 _active_sessions 取回包含 Agent 的真實 Session。
+        """
+        sid = incoming_session.session_id
+
+        # 如果這個 Session ID 已經在內存中，取出它並同步數據
+        if sid and sid in self._active_sessions:
+            live_session = self._active_sessions[sid]
+            # 同步前端可能修改過的數據到 Live Session
+            live_session.lat = incoming_session.lat
+            live_session.lng = incoming_session.lng
+            # 注意：這裡不覆蓋 task_list，除非我們確定前端有修改權限
+            # 這裡簡單假設前端傳來的 chat history 是最新的
+            if len(incoming_session.chat_history) > len(live_session.chat_history):
+                live_session.chat_history = incoming_session.chat_history
+            return live_session
+
+        # 如果是新的 Session，或者內存中沒有，則註冊它
+        if sid:
+            self._active_sessions[sid] = incoming_session
+        return incoming_session
+
+    def initialize_agents(self, session: UserSession, lat: float, lng: float) -> UserSession:
+        """初始化 Agents 並保存到內存"""
+        # 1. 確保我們操作的是 Live Session
+        session = self._get_live_session(session)
+
+        session.lat = lat
+        session.lng = lng
+
+        if session.planner_agent is not None:
+            return session
+
+        # 生成或恢復 Session ID
+        if session.session_id is None:
+            session.session_id = str(uuid.uuid4())
+            # 註冊到內存
+            self._active_sessions[session.session_id] = session
+            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))
+
+        # 讀取設定
+        selected_model_id = 'gemini-2.5-flash'
+        gemini_api_key = session.custom_settings.get("gemini_api_key", "")
+        google_maps_api_key = session.custom_settings.get("google_maps_api_key", "")
+        openweather_api_key = session.custom_settings.get("openweather_api_key", "")
+
+        # 初始化模型
+        planner_model = Gemini(id=selected_model_id, thinking_budget=2048, api_key=gemini_api_key)
+        main_model = Gemini(id=selected_model_id, thinking_budget=1024, api_key=gemini_api_key)
+        lite_model = Gemini(id="gemini-2.5-flash-lite", api_key=gemini_api_key)
+
+        models_dict = {
+            "team": main_model, "scout": main_model, "optimizer": lite_model,
+            "navigator": lite_model, "weatherman": lite_model, "presenter": main_model,
+        }
+
+        tools_dict = {
+            "scout": [ScoutToolkit(google_maps_api_key)],
+            "optimizer": [OptimizationToolkit(google_maps_api_key)],
+            "navigator": [NavigationToolkit(google_maps_api_key)],
+            "weatherman": [WeatherToolkit(openweather_api_key)],
+            "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)
+        session.core_team = create_core_team(models_dict, team_kwargs, tools_dict, session_id=session.session_id)
+
+        logger.info(f"✅ Agents initialized for session {session.session_id}")
+        return session
+
+    # ================= Step 1: Analyze Tasks =================
+
+    def run_step1_analysis(self, user_input: str, auto_location: bool,
+                          lat: float, lon: float, session: UserSession) -> Generator[Dict[str, Any], None, None]:
+        if not user_input.strip():
+            yield {"type": "empty"}
+            return
+
+        if auto_location:
+            lat, lon = 25.033, 121.565
+
+        try:
+            # 🌟 [Fix] 使用 Live Session
+            session = self.initialize_agents(session, lat, lon)
+
+            # 階段 1: 初始化
+            self._add_reasoning(session, "planner", "🚀 Starting analysis...")
+            yield {
+                "type": "stream",
+                "stream_text": "🤔 Analyzing your request with AI...",
+                "agent_status": ("planner", "working", "Initializing..."),
+                "session": session
+            }
+            time.sleep(0.3)
+
+            # 階段 2: 提取任務
+            self._add_reasoning(session, "planner", f"Processing: {user_input[:50]}...")
+            current_text = "🤔 Analyzing your request with AI...\n📋 AI is extracting tasks..."
+            yield {
+                "type": "stream",
+                "stream_text": current_text,
+                "agent_status": ("planner", "working", "Extracting tasks..."),
+                "session": session
+            }
+
+            # 呼叫 Agent (Stream)
+            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 = current_text + "\n\n"
+
+            for chunk in planner_stream:
+                if chunk.event == RunEvent.run_content:
+                    content = chunk.content
+                    accumulated_response += content
+                    if "@@@" not in accumulated_response:
+                        displayed_text += content
+                        yield {
+                            "type": "stream",
+                            "stream_text": displayed_text,
+                            "agent_status": ("planner", "working", "Processing..."),
+                            "session": session
+                        }
+
+            # 解析 JSON 結果
+            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 Exception 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"))
+
+            yield {
+                "type": "complete",
+                "stream_text": displayed_text + f"\n✅ Analysis complete! Found {len(session.task_list)} tasks.",
+                "high_priority": high_priority,
+                "total_time": total_time,
+                "session": session
+            }
+
+        except Exception as e:
+            logger.error(f"Error in step1: {e}", exc_info=True)
+            yield {"type": "error", "message": str(e), "session": session}
+
+    # ================= Task Modification (Chat) =================
+
+    def modify_task_chat(self, user_message: str, session: UserSession) -> Generator[Dict[str, Any], None, None]:
+        if not user_message.strip():
+            yield {"type": "no_change", "session": session}
+            return
+
+        # 🌟 [Fix] 獲取 Live Session
+        session = self._get_live_session(session)
+
+        session.chat_history.append({
+            "role": "user", "message": user_message, "time": datetime.now().strftime("%H:%M:%S")
+        })
+        yield {"type": "update_history", "session": session}
+
+        try:
+            if session.planner_agent is None:
+                # 嘗試重新初始化 (如果遺失)
+                if session.lat and session.lng:
+                    session = self.initialize_agents(session, session.lat, session.lng)
+                else:
+                    yield {"type": "error", "message": "Session lost. Please restart.", "session": session}
+                    return
+
+            session.chat_history.append({
+                "role": "assistant", "message": "🤔 AI is thinking...", "time": datetime.now().strftime("%H:%M:%S")
+            })
+            yield {"type": "update_history", "session": session}
+
+            planner_stream = session.planner_agent.run(
+                f"help user to update the task_list, user's message: {user_message}",
+                stream=True, stream_events=True
+            )
+
+            accumulated_response = ""
+            for chunk in planner_stream:
+                if chunk.event == RunEvent.run_content:
+                    content = chunk.content
+                    accumulated_response += content
+
+            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}
+            )
+
+            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 {"type": "complete", "session": session}
+
+        except Exception as e:
+            logger.error(f"Chat error: {e}")
+            session.chat_history.append({
+                "role": "assistant", "message": f"❌ Error: {str(e)}", "time": datetime.now().strftime("%H:%M:%S")
+            })
+            yield {"type": "error", "session": session}
+
+    # ================= Step 2: Search POIs =================
+
+    def run_step2_search(self, session: UserSession) -> Dict[str, Any]:
+        # 🌟 [Fix] 獲取 Live Session
+        session = self._get_live_session(session)
+
+        self._add_reasoning(session, "team", "🚀 Core Team activated")
+        self._add_reasoning(session, "scout", "Searching for POIs...")
+        return {"session": session}
+
+    # ================= Step 3: Run Core Team =================
+
+    def run_step3_team(self, session: UserSession) -> Generator[Dict[str, Any], None, None]:
+        try:
+            # 🌟 [Fix] 獲取 Live Session (關鍵：這裡才有 Agent)
+            session = self._get_live_session(session)
+
+            if session.planner_agent is None:
+                raise ValueError("Agents not initialized. Please run Step 1 first.")
+
+            set_session_id(session.session_id)
+
+            # 從 Planner Agent 的 Memory 中獲取 Task List
+            task_list_input = session.planner_agent.get_session_state().get("task_list")
+
+            if isinstance(task_list_input, dict) or isinstance(task_list_input, list):
+                task_list_str = json.dumps(task_list_input, indent=2, ensure_ascii=False)
+            else:
+                task_list_str = str(task_list_input)
+
+            self._add_reasoning(session, "team", "🎯 Multi-agent collaboration started")
+            yield {"type": "start", "session": session}
+
+            # 執行 Team Run
+            team_stream = session.core_team.run(
+                f"Plan this trip: {task_list_str}",
+                stream=True, stream_events=True, session_id=session.session_id
+            )
+
+            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}")
+                    yield {"type": "reasoning_update", "session": session}
+                elif event.event == TeamRunEvent.run_completed:
+                    self._add_reasoning(session, "team", "🎉 Completed")
+
+            report_html = f"## 🎯 Planning Complete\n\n{report_content}"
+            yield {"type": "complete", "report_html": report_html, "session": session}
+
+        except Exception as e:
+            logger.error(f"Team run error: {e}", exc_info=True)
+            yield {"type": "error", "message": str(e), "session": session}
+
+    # ================= Step 4: Finalize =================
+
+    def run_step4_finalize(self, session: UserSession) -> Dict[str, Any]:
+        try:
+            session = self._get_live_session(session)
+
+            final_ref_id = poi_repo.get_last_id_by_session(session.session_id)
+            if not final_ref_id:
+                raise ValueError("No final result found")
+
+            structured_data = poi_repo.load(final_ref_id)
+
+            # 1. Timeline (右側 Tab)
+            timeline_html = create_timeline_html_enhanced(structured_data.get("timeline", []))
+
+            # 2. Metrics Cards (左側簡單指標) -> 使用新恢復的函數
+            metrics = structured_data.get("metrics", {})
+            traffic = structured_data.get("traffic_summary", {})
+            metrics_html = create_metrics_cards(metrics, traffic)
+
+            # 3. Detailed Visualization (中間結果區) -> 使用完整版函數
+            result_viz = create_result_visualization(session.task_list, structured_data)
+
+            # 4. Real Map (地圖 Tab) -> 傳入 structured_data
+            map_fig = create_animated_map(structured_data)
+
+            self._add_reasoning(session, "team", "🎉 All completed")
+            session.planning_completed = True
+
+            return {
+                "type": "success",
+                "timeline_html": timeline_html,
+                "metrics_html": metrics_html,
+                "result_html": result_viz,
+                "map_fig": map_fig,
+                "session": session
+            }
+
+        except Exception as e:
+            logger.error(f"Finalize error: {e}", exc_info=True)
+            return {"type": "error", "message": str(e), "session": session}
+
+    # ================= Helpers =================
+
+    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 _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 session.task_list:
+            html += create_task_card(
+                task["id"], task["title"], task["priority"],
+                task["time"], task["duration"], task["location"],
+                task.get("icon", "📋")
+            )
+        return html

ui/components/header.py

@@ -1,5 +1,6 @@
+
 """
-LifeFlow AI - Header Component
+LifeFlow AI - Header Component (Clean Style)
 """
 import gradio as gr
 
@@ -12,12 +13,11 @@ def create_header():
     """)
 
 def create_top_controls():
-    """
-    創建右上角懸浮按鈕
-    """
-    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")
+    with gr.Group(elem_id="top-controls"):
+        # 按鈕本身樣式由 CSS 控制，這裡保持結構簡單
+        with gr.Row():
+            theme_btn = gr.Button("🌓", size="sm", min_width=40)
+            settings_btn = gr.Button("⚙️", size="sm", min_width=40)
+            doc_btn = gr.Button("📖", size="sm", min_width=40)
 
     return theme_btn, settings_btn, doc_btn

ui/components/input_form.py

@@ -1,38 +1,51 @@
 """
-LifeFlow AI - Input Form Component
+LifeFlow AI - Input Form Component (UX Improved)
 """
 import gradio as gr
 
 def create_input_form(agent_stream_html):
-    """創建輸入表單"""
-    with gr.Group(visible=True) as input_area:
-        gr.Markdown("### 📝 Tell us your plans")
-        agent_stream_output = gr.HTML(value=agent_stream_html)
+    """創建優化後的輸入表單"""
+
+    with gr.Group(elem_classes="glass-card") as input_area:
+        gr.Markdown("### 📝 What's your plan today?")
+
+        # 1. Agent 狀態區 (改為較小的視覺)
+        agent_stream_output = gr.HTML(value=agent_stream_html, label="Agent Status")
+
+        # 2. 主要輸入區
         user_input = gr.Textbox(
-            label="What do you need to do?",
-            placeholder="e.g., Visit hospital tomorrow morning, buy groceries, mail package before 3pm",
-            lines=3
+            label="Describe your tasks",
+            placeholder="e.g., I need to visit the dentist at 10am, then buy groceries from Costco, and pick up a package...",
+            lines=3,
+            elem_id="main-input"
         )
-        gr.Markdown("---")
 
-        # Auto-location toggle
-        auto_location = gr.Checkbox(label="📍 Auto-detect my location (Simulated)", value=False)
+        # 3. 快速範例 (Quick Prompts) - UX 大加分
+        gr.Examples(
+            examples=[
+                ["Plan a trip to visit Taipei 101, then have lunch at Din Tai Fung, and go to the National Palace Museum."],
+                ["I need to go to the hospital for a checkup at 9 AM, then buy some flowers, and meet a friend for coffee at 2 PM."],
+                ["Errands run: Post office, bank, and supermarket. Start at 10 AM, finish by 1 PM."]
+            ],
+            inputs=user_input,
+            label="Quick Start Examples"
+        )
+
+        gr.Markdown("---")
 
-        # 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)
-                lon_input = gr.Number(label="Longitude", value=121.565, precision=6)
+        # 4. 位置設定 (使用 Accordion 收納次要資訊)
+        with gr.Accordion("📍 Location Settings", open=False):
+            auto_location = gr.Checkbox(label="Auto-detect my location (Simulated)", value=False)
+            with gr.Group(visible=True) as location_inputs:
+                with gr.Row():
+                    lat_input = gr.Number(label="Latitude", value=25.033, precision=6, scale=1)
+                    lon_input = gr.Number(label="Longitude", value=121.565, precision=6, scale=1)
 
-        analyze_btn = gr.Button("🚀 Analyze & Plan", variant="primary", size="lg")
+        # 5. 主按鈕
+        analyze_btn = gr.Button("🚀 Analyze & Plan Trip", variant="primary", size="lg")
 
     return (input_area, agent_stream_output, user_input, auto_location,
             location_inputs, lat_input, lon_input, analyze_btn)
 
 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/results.py

@@ -5,14 +5,33 @@ LifeFlow AI - Results Component
 """
 import gradio as gr
 
+import gradio as gr
+
+
 def create_team_area(create_agent_card_func):
-    """創建 AI Team 展示區域"""
+    """創建 AI Team 展示區域 (改為 Grid)"""
     with gr.Group(visible=False) as team_area:
-        gr.Markdown("### 🤖 AI Expert Team")
-        agent_displays = []
-        for agent_key in ['planner', 'scout', 'optimizer', 'validator', 'weather', 'traffic']:
-            agent_card = gr.HTML(value=create_agent_card_func(agent_key, "idle", "On standby"))
-            agent_displays.append(agent_card)
+        gr.Markdown("### 🤖 Agent Status")
+        # 使用自定義 CSS grid wrapper
+        with gr.Column():
+            # 這裡我們需要一個容器來放入所有的 HTML 卡片，或者將它們合併為一個 HTML 輸出
+            # 為了簡單起見，我們將 agent_displays 保持為 list，但在前端用 flex/grid 呈現
+            # 注意：為了達到最佳 grid 效果，建議在 app.py 中將 agent updates 合併為一個 HTML string
+            # 但為了不改動邏輯，我們這裡運用 CSS (.agent-grid) 包裹
+
+            agent_container_start = gr.HTML('<div class="agent-grid">')
+            agent_displays = []
+            # 這裡對應 app.py 的邏輯，會生成多個 HTML 組件
+            for agent_key in ['planner', 'scout', 'optimizer', 'validator', 'weather', 'traffic']:
+                # 初始狀態
+                card_html = create_agent_card_func(agent_key, "idle", "Waiting")
+                agent_displays.append(gr.HTML(value=card_html, show_label=False))
+
+            agent_container_end = gr.HTML('</div>')
+
+
+            for display in agent_displays:
+                display.elem_classes = ["agent-grid-item"]
 
     return team_area, agent_displays
 

core/utils.py → ui/renderers.py

@@ -1,11 +1,9 @@
 """
-LifeFlow AI - Core Utilities
+LifeFlow AI - UI Renderers
+負責生成 HTML 字串與前端展示元件
 """
-
-import plotly.graph_objects as go
-from config import AGENTS_INFO
 from datetime import datetime
-
+from config import AGENTS_INFO
 
 def create_agent_stream_output() -> str:
     """創建 Agent 串流輸出 HTML"""
@@ -15,74 +13,116 @@ def create_agent_stream_output() -> str:
     </div>
     """
 
-
 def create_agent_card_enhanced(agent_key: str, status: str = "idle", message: str = "") -> str:
-    """
-    創建增強的 Agent 卡片
-
-    Args:
-        agent_key: Agent 標識符
-        status: 狀態 (idle/working/complete)
-        message: 顯示訊息
-    """
     agent = AGENTS_INFO.get(agent_key, {})
-    avatar = agent.get("avatar", "🤖")
-    name = agent.get("name", "Agent")
-    role = agent.get("role", "")
-    color = agent.get("color", "#4A90E2")
-    glow = agent.get("glow", "rgba(74, 144, 226, 0.3)")
-
-    status_class = f"status-{status}"
-    card_class = "agent-card active" if status == "working" else "agent-card"
+    color = agent.get("color", "#6366f1")
 
-    status_text = {
-        "idle": "On Standby",
-        "working": "Working...",
-        "complete": "Complete ✓"
-    }.get(status, "Unknown")
+    status_color = "#94a3b8"  # gray
+    if status == "working": status_color = "#f59e0b"  # orange
+    if status == "complete": status_color = "#10b981"  # green
 
-    message_html = f'<div class="agent-message">{message}</div>' if message else ""
+    active_class = "active" if status == "working" else ""
 
     return f"""
-    <div class="{card_class}" style="--agent-color: {color}; --agent-glow: {glow};">
-        <div class="agent-header">
-            <div class="agent-avatar">{avatar}</div>
-            <div class="agent-info">
-                <h3>{name}</h3>
-                <div class="agent-role">{role}</div>
-            </div>
-        </div>
-        <span class="agent-status {status_class}">{status_text}</span>
-        {message_html}
+    <div class="agent-card-mini {active_class}" style="border-top: 3px solid {color}">
+        <div class="agent-avatar-mini">{agent.get("avatar", "🤖")}</div>
+        <div class="agent-name-mini">{agent.get("name", "Agent")}</div>
+        <span class="agent-status-dot" style="background-color: {status_color}"></span>
+        <div style="font-size: 10px; color: #64748b; margin-top: 4px;">{status}</div>
     </div>
     """
 
+def generate_chat_history_html_bubble(session) -> str:
+    """生成對話氣泡 HTML (使用 session 物件)"""
+    # 注意：這裡依賴 session 物件的 chat_history 屬性
+    if not session.chat_history:
+        return """
+        <div style="text-align: center; padding: 40px; color: #94a3b8;">
+            <div style="font-size: 40px; margin-bottom: 10px;">👋</div>
+            <p>Hi! I'm LifeFlow. Tell me your plans, or ask me to modify the tasks above.</p>
+        </div>
+        """
+
+    html = '<div class="chat-history-container">'
+    for msg in session.chat_history:
+        role = msg["role"]  # user or assistant
+        role_class = "user" if role == "user" else "assistant"
+
+        html += f"""
+        <div class="chat-message {role_class}">
+            <div class="chat-bubble">
+                {msg["message"]}
+                <div class="chat-time">{msg["time"]}</div>
+            </div>
+        </div>
+        """
+    html += '</div>'
+    return html
+
+def create_timeline_html_enhanced(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", "--:--")
+        location = stop.get("location", "Unknown")
+        weather = stop.get("weather", "")
+
+        icon = "📍"
+        if i == 0:
+            icon = "🏠"
+        elif i == len(timeline) - 1:
+            icon = "🏁"
+        elif "food" in location.lower():
+            icon = "🍽️"
+        elif "hospital" in location.lower():
+            icon = "🏥"
+
+        html += f"""
+        <div class="timeline-item">
+            <div class="timeline-left">
+                <div class="timeline-icon-box">{icon}</div>
+            </div>
+            <div class="timeline-content-card">
+                <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
+                    <span style="font-weight:bold; color:#334155; font-size:1.1rem;">{location}</span>
+                    <span style="background:#eff6ff; color:#3b82f6; padding:2px 8px; border-radius:12px; font-size:0.8rem; font-weight:600;">{time}</span>
+                </div>
+                <div style="font-size:0.9rem; color:#64748b;">
+                    {f'🌤️ {weather}' if weather else ''}
+                </div>
+            </div>
+        </div>
+        """
+    html += '</div>'
+    return html
 
 def create_task_card(task_num: int, task_title: str, priority: 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):
+    # 處理 time_window 邏輯
+    display_time = "Anytime"
+    if 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}"
+        start_str = datetime.fromisoformat(start).strftime("%H:%M") if start else "Before"
+        end_str = datetime.fromisoformat(end).strftime("%H:%M") if end else "After"
+
+        if start_str == "Before" and end_str == "After":
+            display_time = "Anytime"
+        elif start_str == "After":
+            display_time = f"After {end_str}"
+        elif end_str == "Before":
+            display_time = f"Before {start_str}"
         else:
-            time_window = f"{start} - {end}"
+            display_time = f"{start_str} - {end_str}"
+    elif time_window:
+        display_time = str(time_window)
 
     priority_class = f"priority-{priority.lower()}"
     task_color = priority_color_map.get(priority, "#999")
@@ -99,7 +139,7 @@ def create_task_card(task_num: int, task_title: str, priority: str,
         <div class="task-details">
             <div class="task-detail-item">
                 <span>🕐</span>
-                <span>{time_window}</span>
+                <span>{display_time}</span>
             </div>
             <div class="task-detail-item">
                 <span>⏱️</span>
@@ -113,9 +153,7 @@ def create_task_card(task_num: int, task_title: str, priority: str,
     </div>
     """
 
-
 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>
@@ -136,45 +174,13 @@ def create_summary_card(total_tasks: int, high_priority: int, total_time: int) -
     </div>
     """
 
-
-def create_animated_map():
-    """創建動畫地圖（模擬）"""
-    fig = go.Figure()
-
-    # 模擬路線點
-    lats = [25.033, 25.045, 25.055, 25.040]
-    lons = [121.565, 121.575, 121.585, 121.570]
-
-    fig.add_trace(go.Scattermapbox(
-        lat=lats,
-        lon=lons,
-        mode='markers+lines',
-        marker=dict(size=12, color='#4A90E2'),
-        line=dict(width=3, color='#50C878'),
-        text=['Start', 'Task 1', 'Task 2', 'End'],
-        hoverinfo='text'
-    ))
-
-    fig.update_layout(
-        mapbox=dict(
-            style='open-street-map',
-            center=dict(lat=25.043, lon=121.575),
-            zoom=12
-        ),
-        margin=dict(l=0, r=0, t=0, b=0),
-        height=500
-    )
-
-    return fig
-
-
 def get_reasoning_html_reversed(reasoning_messages: list = None) -> str:
     """獲取推理過程 HTML（反向排序，最新在上）"""
     if not reasoning_messages:
         return '<div class="reasoning-timeline"><p style="text-align: center; opacity: 0.6;">No reasoning messages yet...</p></div>'
 
     items_html = ""
-    for msg in reversed(reasoning_messages[-20:]):  # 只顯示最近20條，反向
+    for msg in reversed(reasoning_messages[-20:]):
         agent_info = AGENTS_INFO.get(msg.get('agent', 'planner'), {})
         color = agent_info.get('color', '#4A90E2')
         avatar = agent_info.get('avatar', '🤖')
@@ -192,12 +198,9 @@ def get_reasoning_html_reversed(reasoning_messages: list = None) -> str:
 
     return f'<div class="reasoning-timeline">{items_html}</div>'
 
-
 def create_celebration_animation() -> str:
-    """創建慶祝動畫（純 CSS 撒花效果）- Gradio 兼容版本"""
+    """創建慶祝動畫（純 CSS 撒花效果）"""
     import random
-
-    # 生成 100 個隨機位置和動畫的撒花元素
     confetti_html = ""
     colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2']
 
@@ -225,107 +228,125 @@ def create_celebration_animation() -> str:
     <div class="celebration-overlay">
         {confetti_html}
     </div>
-
     <style>
     @keyframes confetti-fall {{
-        0% {{
-            transform: translateY(-100vh) rotate(0deg);
-            opacity: 1;
-        }}
-        100% {{
-            transform: translateY(100vh) rotate(720deg);
-            opacity: 0;
-        }}
+        0% {{ transform: translateY(-100vh) rotate(0deg); opacity: 1; }}
+        100% {{ transform: translateY(100vh) rotate(720deg); opacity: 0; }}
     }}
-
     @keyframes celebration-fade {{
         0% {{ opacity: 1; }}
         80% {{ opacity: 1; }}
         100% {{ opacity: 0; }}
     }}
-
     .celebration-overlay {{
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        z-index: 9999;
-        overflow: hidden;
+        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+        pointer-events: none; z-index: 9999; overflow: hidden;
         animation: celebration-fade 6s forwards;
     }}
-
     .confetti {{
-        position: absolute;
-        top: -20px;
-        animation: confetti-fall linear infinite;
-        opacity: 0.9;
+        position: absolute; top: -20px;
+        animation: confetti-fall linear infinite; opacity: 0.9;
     }}
     </style>
     """
 
+def create_result_visualization(task_list: list, structured_data: dict) -> str:
+    """創建詳細的結果視覺化卡片"""
+    metrics = structured_data.get("metrics", {})
+    traffic = structured_data.get("traffic_summary", {})
+    timeline = structured_data.get("timeline", [])
+
+    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)
+
+    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"
 
-def decode_polyline(polyline_str):
+    efficiency = metrics.get("route_efficiency_pct", 90)
+    time_saved_val = metrics.get("time_saved_min", 0)
+    dist_saved_val_km = metrics.get("distance_saved_m", 0) / 1000
+
+    # ... (為簡潔起見，這裡保留原有的 HTML 拼接邏輯，只是函數位置改變)
+    # 這裡的代碼與原 utils.py 中的邏輯完全一致，只是為了空間我縮略了中間的 HTML string
+    # 在實際實施時，請複製原 utils.py 中完整的 HTML 模板代碼
+
+    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;">Optimized based on real-time traffic & weather</p>
+        </div>
+        <div class="quick-summary" style="margin-top: 25px;">
+             <div class="metric-value">{completed_tasks} / {total_tasks}</div>
+        </div>
+    </div>
     """
-    解碼 Google Maps Polyline 字符串為 (lat, lng) 列表
-    純 Python 實現，無需額外依賴
+    # 注意：請確保將完整的 HTML 邏輯搬移過來
+
+    # 為了確保功能正常，這裡是一個簡化的佔位符，請使用原來的完整代碼替換這裡
+    # 實作時，請將原 utils.py 中 create_result_visualization 的完整內容複製到這裡
+    return html # 替換為完整 HTML
+
+
+def create_metrics_cards(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>
     """
-    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
 
 
+# 🔥 [Full Restoration] 恢復完整的結果視覺化
 def create_result_visualization(task_list: list, structured_data: dict) -> str:
-    """
-    創建詳細的結果視覺化卡片 (綁定真實數據)
-    """
-    # 提取數據
+    """創建詳細的結果視覺化卡片"""
     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
     html = f"""
     <div class="result-visualization">
         <div class="result-header">
@@ -363,7 +384,7 @@ def create_result_visualization(task_list: list, structured_data: dict) -> str:
                 <div class="summary-metric success">
                     <div class="metric-icon">⚡</div>
                     <div class="metric-content">
-                        <div class="metric-value">{efficiency}%</div>
+                        <div class="metric-value">{efficiency:.0f}%</div>
                         <div class="metric-label">Efficiency Score</div>
                     </div>
                 </div>
@@ -376,14 +397,11 @@ def create_result_visualization(task_list: list, structured_data: dict) -> str:
     """
 
     # 綁定時間線數據
-    # 跳過 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"""
@@ -400,7 +418,6 @@ def create_result_visualization(task_list: list, structured_data: dict) -> str:
                 </div>
         """
 
-        # 添加交通時間 (如果不是最後一個)
         if i < len(timeline) - 1:
             next_travel = timeline[i + 1].get("travel_time_from_prev", "0 mins")
             html += f"""
@@ -419,7 +436,6 @@ def create_result_visualization(task_list: list, structured_data: dict) -> str:
             <div class="metrics-grid">
     """
 
-    # 綁定指標數據
     viz_metrics = [
         ("Route Efficiency", efficiency, "#50C878"),
         ("Time Saved", time_saved_pct, "#4A90E2"),
@@ -427,7 +443,7 @@ def create_result_visualization(task_list: list, structured_data: dict) -> str:
     ]
 
     for label, value, color in viz_metrics:
-        # 限制 value 在 0-100 之間顯示
+        if value is None: value = 0
         display_val = min(max(value, 0), 100)
         html += f"""
                 <div class="metric-bar">
@@ -455,11 +471,5 @@ def create_result_visualization(task_list: list, structured_data: dict) -> str:
             </div>
         </div>
     </div>
-
-    <style>
-    /* ... 保留原本的 CSS ... */
-    .timeline-info {{display: flex; flex-direction: column; }}
-    .timeline-meta {{font - size: 11px; color: #666; margin-top: 2px; }}
-    </style>
     """
     return html

ui/theme.py

@@ -1,593 +1,245 @@
 """
 LifeFlow AI - Theme System
-提供完整的主題和樣式管理，支援動態主題切換
+提供現代化、毛玻璃風格的主題和樣式管理
 """
 
-
 def get_enhanced_css() -> str:
-    """
-    改進的 CSS 系統：
-    1. ✅ 修復色調功能 - 確保主題顏色正確應用
-    2. ✅ 完整支援深淺模式切換
-    3. ✅ 修復 Exit 按鈕樣式（Step 2）
-    4. ✅ 調整 Setting 和 Doc 按鈕位置和大小
-    """
     return """
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
     <style>
     :root {
-        /* 品牌色 - 固定不變，保持品牌識別度 */
-        --primary-color: #4A90E2;
-        --secondary-color: #50C878;
-        --accent-color: #F5A623;
-        --primary-glow: rgba(74, 144, 226, 0.3);
-
-        /* 功能色 */
-        --success-color: #7ED321;
-        --warning-color: #F5A623;
-        --danger-color: #FF6B6B;
-    }
-
-    /* ============= 動畫效果 ============= */
-    @keyframes pulse {
-        0%, 100% { transform: scale(1); }
-        50% { transform: scale(1.05); }
-    }
-    @keyframes breathing {
-        0%, 100% { box-shadow: 0 0 10px var(--agent-glow, rgba(74, 144, 226, 0.3)); }
-        50% { box-shadow: 0 0 25px var(--agent-glow, rgba(74, 144, 226, 0.6)), 0 0 40px var(--agent-glow, rgba(74, 144, 226, 0.3)); }
-    }
-    @keyframes slide-in-left {
-        from { transform: translateX(-100%); opacity: 0; }
-        to { transform: translateX(0); opacity: 1; }
-    }
-    @keyframes fade-in {
-        from { opacity: 0; }
-        to { opacity: 1; }
-    }
-    @keyframes blink {
-        0%, 49% { opacity: 1; }
-        50%, 100% { opacity: 0; }
-    }
-
-    /* ============= 全域設定 ============= */
-    .gradio-container {
-        background: var(--background-fill-primary) !important;
-    }
-
-    /* ============= 🔧 修復：Header 標題 ============= */
+        --primary-color: #6366f1; /* Indigo */
+        --primary-dark: #4f46e5;
+        --secondary-color: #10b981; /* Emerald */
+        --accent-color: #f59e0b; /* Amber */
+        --background-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        --glass-bg: rgba(255, 255, 255, 0.7);
+        --glass-border: 1px solid rgba(255, 255, 255, 0.5);
+        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        --radius-lg: 16px;
+        --radius-md: 12px;
+        --font-main: 'Inter', sans-serif;
+    }
+
+    body, .gradio-container {
+        font-family: var(--font-main) !important;
+        background: #f8fafc !important; 
+    }
+
+    /* ============= 毛玻璃卡片風格 ============= */
+    .glass-card {
+        background: var(--glass-bg);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        border: var(--glass-border);
+        border-radius: var(--radius-lg);
+        box-shadow: var(--shadow-lg);
+    }
+
+    /* ============= 標題優化 ============= */
     .app-header {
         text-align: center;
-        padding: 40px 20px 30px 20px;
-        position: relative;
+        padding: 40px 0 20px;
+        animation: fade-in 0.8s ease-out;
     }
-
     .app-header h1 {
-        font-size: 64px !important;
-        margin: 0 !important;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        font-size: 3.5rem !important;
+        font-weight: 800 !important;
+        background: linear-gradient(to right, #6366f1, #ec4899);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        background-clip: text;
-        font-weight: 700 !important;
+        margin-bottom: 0.5rem !important;
+        letter-spacing: -0.02em;
     }
-
     .app-header p {
-        font-size: 20px !important;
-        color: var(--body-text-color);
-        opacity: 0.8;
-        margin-top: 10px !important;
+        font-size: 1.2rem !important;
+        color: #64748b;
+        font-weight: 400;
     }
 
-    /* ============= 🔧 修復：主題切換按鈕 ============= */
-    #theme-toggle {
-        position: fixed !important;
-        top: 20px !important;
-        right: 110px !important;
-        z-index: 1000 !important;
-        width: 40px !important;
-        height: 40px !important;
-        min-width: 40px !important;
-        max-width: 40px !important;
-        padding: 0 !important;
-        font-size: 18px !important;
-        border-radius: 10px !important;
-        background: var(--background-fill-secondary) !important;
-        border: 1.5px solid var(--border-color-primary) !important;
-        box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
-        transition: all 0.3s ease !important;
-        cursor: pointer !important;
-    }
-
-    #theme-toggle:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 4px 10px rgba(245, 166, 35, 0.3) !important;
-        background: var(--accent-color) !important;
-        color: white !important;
-    }
-
-    /* ============= 🔧 修復��Settings 按鈕 ============= */
-    #settings-btn {
-        position: fixed !important;
-        top: 20px !important;
-        right: 60px !important;
-        z-index: 1000 !important;
-        width: 40px !important;
-        height: 40px !important;
-        min-width: 40px !important;
-        max-width: 40px !important;
-        padding: 0 !important;
-        font-size: 18px !important;
-        border-radius: 10px !important;
-        background: var(--background-fill-secondary) !important;
-        border: 1.5px solid var(--border-color-primary) !important;
-        box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
-        transition: all 0.3s ease !important;
-        cursor: pointer !important;
-    }
-
-    #settings-btn:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3) !important;
-        background: var(--primary-color) !important;
-        color: white !important;
-    }
-
-    /* ============= 🔧 修復：Doc 按鈕 ============= */
-    #doc-btn {
-        position: fixed !important;
-        top: 20px !important;
-        right: 10px !important;
-        z-index: 1000 !important;
-        width: 40px !important;
-        height: 40px !important;
-        min-width: 40px !important;
-        max-width: 40px !important;
-        padding: 0 !important;
-        font-size: 18px !important;
-        border-radius: 10px !important;
-        background: var(--background-fill-secondary) !important;
-        border: 1.5px solid var(--border-color-primary) !important;
-        box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
-        transition: all 0.3s ease !important;
-        cursor: pointer !important;
-    }
-
-    #doc-btn:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3) !important;
-        background: var(--primary-color) !important;
-        color: white !important;
-    }
-
-    /* ============= 🔧 修復：Exit 按鈕樣式 (Step 2 - 頂部獨立) ============= */
-    #exit-button {
-        width: 100% !important;
-        height: 50px !important;
-        font-size: 16px !important;
-        font-weight: 600 !important;
-        border-radius: 10px !important;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-        color: white !important;
+    /* ============= 按鈕優化 ============= */
+    button.primary {
+        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
         border: none !important;
-        box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3) !important;
-        transition: all 0.3s ease !important;
-        margin-bottom: 15px !important;
-        cursor: pointer;
+        box-shadow: 0 4px 6px rgba(99, 102, 241, 0.3) !important;
+        transition: all 0.2s ease !important;
     }
-
-    #exit-button:hover {
+    button.primary:hover {
         transform: translateY(-2px);
-        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.5) !important;
+        box-shadow: 0 8px 12px rgba(99, 102, 241, 0.4) !important;
     }
 
-    /* ============= 🔧 新增：Exit 按鈕樣式 (內聯版本 - 與 Ready to plan 並排) ============= */
-    #exit-button-inline {
-        height: 50px !important;
-        font-size: 15px !important;
-        font-weight: 600 !important;
-        border-radius: 10px !important;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
-        color: white !important;
-        border: none !important;
-        box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3) !important;
-        transition: all 0.3s ease !important;
-        cursor: pointer;
-    }
-
-    #exit-button-inline:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.5) !important;
-    }
-
-    /* ============= 串流輸出框 ============= */
-    .stream-container {
-        background: var(--background-fill-secondary);
-        border-radius: 10px;
-        padding: 15px;
-        min-height: 150px;
-        max-height: 300px;
-        overflow-y: auto;
-        margin: 15px 0;
-        border: 1px solid var(--border-color-primary);
-        font-family: 'Monaco', 'Courier New', monospace;
-        font-size: 13px;
-        line-height: 1.6;
-    }
-    .stream-text {
-        color: var(--body-text-color);
-        white-space: pre-wrap;
-        word-wrap: break-word;
-    }
-    .stream-cursor {
-        display: inline-block;
-        width: 8px;
-        height: 16px;
-        background: var(--primary-color);
-        animation: blink 1s infinite;
-        margin-left: 2px;
-    }
-
-    /* ============= Agent 卡片 ============= */
-    .agent-card {
-        background: var(--background-fill-secondary);
-        border-radius: 12px;
-        padding: 15px;
-        margin: 10px 0;
-        border-left: 4px solid var(--agent-color, var(--primary-color));
-        transition: all 0.3s ease;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    }
-    .agent-card:hover {
-        transform: translateX(5px);
-        box-shadow: 0 4px 12px var(--agent-glow, rgba(74, 144, 226, 0.2));
-    }
-    .agent-card.active {
-        animation: breathing 2s infinite;
-        border-left-width: 6px;
+    /* ============= Agent 狀態卡片 (Grid Layout) ============= */
+    .agent-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: 12px;
+        margin-top: 10px;
     }
-    .agent-header {
+    .agent-card-mini {
+        background: white;
+        padding: 10px;
+        border-radius: var(--radius-md);
+        border: 1px solid #e2e8f0;
         display: flex;
+        flex-direction: column;
         align-items: center;
-        gap: 10px;
-        margin-bottom: 8px;
-    }
-    .agent-avatar {
-        font-size: 28px;
-        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+        text-align: center;
+        transition: all 0.3s ease;
     }
-    .agent-info h3 {
-        margin: 0;
-        font-size: 16px;
-        color: var(--body-text-color);
+    .agent-card-mini.active {
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+        transform: scale(1.02);
     }
-    .agent-role {
-        font-size: 12px;
-        color: var(--body-text-color);
-        opacity: 0.7;
-    }
-    .agent-status {
-        display: inline-block;
-        padding: 4px 12px;
-        border-radius: 12px;
-        font-size: 11px;
-        font-weight: 600;
-        margin-top: 8px;
-    }
-    .status-idle {
-        background: rgba(128, 128, 128, 0.2);
-        color: var(--body-text-color);
-    }
-    .status-working {
-        background: var(--primary-glow);
-        color: var(--primary-color);
-        animation: pulse 1.5s infinite;
-    }
-    .status-complete {
-        background: rgba(126, 211, 33, 0.2);
-        color: var(--success-color);
-    }
-    .agent-message {
-        margin-top: 8px;
-        padding: 8px;
-        background: var(--background-fill-primary);
-        border-radius: 6px;
-        font-size: 13px;
-        color: var(--body-text-color);
-        opacity: 0.9;
+    .agent-avatar-mini { font-size: 24px; margin-bottom: 4px; }
+    .agent-name-mini { font-weight: 600; font-size: 0.85rem; color: #1e293b; }
+    .agent-status-dot {
+        height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-top: 4px;
     }
 
-    /* ============= Task 卡片 ============= */
-    .task-card {
-        background: var(--background-fill-secondary);
-        border-radius: 10px;
-        padding: 16px;
-        margin: 12px 0;
-        border-left: 4px solid var(--task-priority-color, #999);
-        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
-        transition: all 0.3s ease;
-    }
-    .task-card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
-    }
-    .task-header {
+    /* ============= 對話框樣式 (Chat Bubbles) ============= */
+    .chat-history {
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 10px;
+        flex-direction: column;
+        gap: 16px;
+        padding: 20px;
+        background: #fff;
+        border-radius: var(--radius-lg);
+        border: 1px solid #e2e8f0;
+        max-height: 500px;
+        overflow-y: auto;
     }
-    .task-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: var(--body-text-color);
+    .chat-message {
         display: flex;
-        align-items: center;
+        align-items: flex-end;
         gap: 10px;
+        max-width: 85%;
     }
-    .task-icon {
-        font-size: 24px;
+    .chat-message.user {
+        align-self: flex-end;
+        flex-direction: row-reverse;
     }
-    .priority-badge {
-        padding: 4px 12px;
-        border-radius: 12px;
-        font-size: 11px;
-        font-weight: 700;
-        text-transform: uppercase;
-    }
-    .priority-high {
-        background: rgba(255, 107, 107, 0.2);
-        color: #FF6B6B;
-    }
-    .priority-medium {
-        background: rgba(245, 166, 35, 0.2);
-        color: #F5A623;
-    }
-    .priority-low {
-        background: rgba(126, 211, 33, 0.2);
-        color: #7ED321;
-    }
-    .task-details {
-        display: flex;
-        gap: 20px;
-        font-size: 13px;
-        color: var(--body-text-color);
-        opacity: 0.8;
-        margin-top: 10px;
+    .chat-message.assistant {
+        align-self: flex-start;
     }
-    .task-detail-item {
-        display: flex;
-        align-items: center;
-        gap: 6px;
+    .chat-bubble {
+        padding: 12px 16px;
+        border-radius: 18px;
+        font-size: 0.95rem;
+        line-height: 1.5;
+        position: relative;
     }
-
-    /* ============= Summary Card ============= */
-    .summary-card {
-        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-        border-radius: 12px;
-        padding: 20px;
+    .chat-message.user .chat-bubble {
+        background: var(--primary-color);
         color: white;
-        margin: 15px 0;
-        box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
-    }
-    .summary-stats {
-        display: flex;
-        justify-content: space-around;
-        margin-top: 15px;
-    }
-    .stat-item {
-        text-align: center;
-    }
-    .stat-value {
-        font-size: 28px;
-        font-weight: bold;
-        display: block;
+        border-bottom-right-radius: 4px;
     }
-    .stat-label {
-        font-size: 12px;
-        opacity: 0.9;
-        margin-top: 5px;
+    .chat-message.assistant .chat-bubble {
+        background: #f1f5f9;
+        color: #334155;
+        border-bottom-left-radius: 4px;
     }
-
-    /* ============= 🔧 優化：Ready to Plan 按鈕樣式（內聯佈局） ============= */
-    .ready-plan-button {
-        height: 50px !important;
-        font-size: 16px !important;
-        font-weight: 700 !important;
-        border-radius: 10px !important;
-        background: linear-gradient(135deg, #50C878 0%, #7ED321 100%) !important;
-        color: white !important;
-        border: none !important;
-        box-shadow: 0 3px 12px rgba(80, 200, 120, 0.4) !important;
-        transition: all 0.3s ease !important;
-        cursor: pointer;
-    }
-
-    .ready-plan-button:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 5px 20px rgba(80, 200, 120, 0.6) !important;
-        background: linear-gradient(135deg, #5DD68D 0%, #8FE63F 100%) !important;
-    }
-
-    .ready-plan-button:active {
-        transform: translateY(0);
+    .chat-time {
+        font-size: 0.7rem;
+        opacity: 0.7;
+        margin-top: 4px;
+        text-align: right;
     }
 
-    /* ============= Reasoning Timeline ============= */
-    .reasoning-timeline {
+    /* ============= Timeline 優化 ============= */
+    .timeline-container {
+        position: relative;
         padding: 20px 0;
     }
-    .reasoning-item {
-        padding: 15px;
-        margin: 10px 0;
-        border-radius: 8px;
-        background: var(--background-fill-secondary);
-        border-left: 3px solid var(--agent-color, var(--primary-color));
-        animation: fade-in 0.5s ease;
+    .timeline-container::before {
+        content: '';
+        position: absolute;
+        left: 24px;
+        top: 30px;
+        bottom: 30px;
+        width: 2px;
+        background: #e2e8f0;
+        z-index: 0;
+    }
+    .timeline-item {
+        position: relative;
+        display: flex;
+        gap: 20px;
+        margin-bottom: 24px;
+        z-index: 1;
     }
-    .reasoning-header {
+    .timeline-left {
+        min-width: 50px;
         display: flex;
+        flex-direction: column;
         align-items: center;
-        gap: 10px;
-        margin-bottom: 8px;
-    }
-    .reasoning-agent {
-        font-weight: 600;
-        color: var(--agent-color, var(--primary-color));
     }
-    .reasoning-time {
-        font-size: 11px;
-        opacity: 0.6;
-        margin-left: auto;
-    }
-    .reasoning-content {
-        color: var(--body-text-color);
-        opacity: 0.9;
-        line-height: 1.6;
-    }
-
-    /* ============= Modal 樣式 ============= */
-    .modal-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: rgba(0, 0, 0, 0.5);
-        z-index: 1000;
+    .timeline-icon-box {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background: white;
+        border: 2px solid var(--primary-color);
         display: flex;
         align-items: center;
         justify-content: center;
+        font-size: 20px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
     }
-    .modal-content {
-        background: var(--background-fill-primary);
-        border-radius: 16px;
-        padding: 30px;
-        max-width: 600px;
-        width: 90%;
-        max-height: 80vh;
-        overflow-y: auto;
-        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
-    }
-
-    /* ============= Responsive ============= */
-    @media (max-width: 768px) {
-        #top-controls {
-            top: 10px;
-            right: 10px;
-        }
-        #top-controls button {
-            width: 40px !important;
-            height: 40px !important;
-            font-size: 18px !important;
-        }
-        .agent-card {
-            padding: 12px;
-        }
-        .task-card {
-            padding: 12px;
-        }
-    }
-
-    /* ============= 滾動條美化 ============= */
-    ::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
-    ::-webkit-scrollbar-track {
-        background: var(--background-fill-secondary);
-    }
-    ::-webkit-scrollbar-thumb {
-        background: var(--primary-color);
-        border-radius: 4px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-        background: var(--secondary-color);
+    .timeline-content-card {
+        flex: 1;
+        background: white;
+        padding: 16px;
+        border-radius: var(--radius-md);
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+        transition: transform 0.2s;
     }
-    /* ============= 🔧 主題切換 - 深色模式樣式 ============= */
-    .theme-dark {
-        background: #1a1a1a !important;
+    .timeline-content-card:hover {
+        transform: translateX(4px);
+        border-color: var(--primary-color);
     }
 
-    .theme-dark .gradio-container {
-        background: #1a1a1a !important;
+    /* ============= Metric Cards ============= */
+    .metrics-container {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 15px;
+        margin-bottom: 20px;
     }
-
-    .theme-dark [data-testid="block"] {
-        background: #2d2d2d !important;
+    .metric-card {
+        background: white;
+        padding: 15px;
+        border-radius: var(--radius-md);
+        text-align: center;
+        border: 1px solid #e2e8f0;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
     }
-
-    .theme-dark .gr-box,
-    .theme-dark .gr-form,
-    .theme-dark .gr-input,
-    .theme-dark .gr-group {
-        background: #2d2d2d !important;
-        border-color: #444444 !important;
+    .metric-value {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: #1e293b;
+        margin: 5px 0;
     }
 
-    .theme-dark p,
-    .theme-dark label,
-    .theme-dark span,
-    .theme-dark h1,
-    .theme-dark h2,
-    .theme-dark h3 {
-        color: #e0e0e0 !important;
-    }
+    /* ============= 動畫定義 ============= */
+    @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } }
 
-    .theme-dark input,
-    .theme-dark textarea {
-        background: #3a3a3a !important;
-        color: #e0e0e0 !important;
-        border-color: #555555 !important;
+    /* Dark Mode Overrides (Minimal) */
+    .theme-dark body { background: #0f172a !important; }
+    .theme-dark .chat-history, .theme-dark .timeline-content-card, .theme-dark .metric-card, .theme-dark .agent-card-mini {
+        background: #1e293b;
+        border-color: #334155;
+        color: #e2e8f0;
     }
-
-    .theme-dark button {
-        background: #3a3a3a !important;
-        color: #e0e0e0 !important;
-        border-color: #555555 !important;
+    .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark p, .theme-dark span {
+        color: #e2e8f0 !important;
     }
-
-    /* 保持品牌色按鈕的顏色 */
-    .theme-dark #exit-button,
-    .theme-dark #exit-button-inline,
-    .theme-dark .ready-plan-button,
-    .theme-dark #theme-toggle,
-    .theme-dark #settings-btn,
-    .theme-dark #doc-btn {
-        /* 保持原有的漸變色 */
-        filter: brightness(0.9);
+    .theme-dark .chat-message.assistant .chat-bubble {
+        background: #334155;
+        color: #e2e8f0;
     }
     </style>
-
-    <script>
-    // 主題切換功能 - 頁面載入時執行
-    (function() {
-        // 等待 Gradio 完全載入
-        function initTheme() {
-            const savedTheme = localStorage.getItem('lifeflow-theme');
-            console.log('Initializing theme, saved:', savedTheme);
-
-            if (savedTheme === 'dark') {
-                const container = document.querySelector('.gradio-container');
-                if (container) {
-                    container.classList.add('theme-dark');
-                    document.body.classList.add('theme-dark');
-                    console.log('Dark theme applied on load');
-                } else {
-                    // 如果還沒找到容器，稍後再試
-                    setTimeout(initTheme, 100);
-                }
-            }
-        }
-
-        // 頁面載入完成後執行
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', initTheme);
-        } else {
-            initTheme();
-        }
-
-        // 也在 window load 時再次檢查
-        window.addEventListener('load', initTheme);
-    })();
-    </script>
     """