rebuild app.py

app.py

@@ -1,1072 +1,532 @@
 """
-LifeFlow AI - v11 English + Compact Layout
-✅ English version
-✅ Compact layout (horizontal on widescreen)
-✅ Responsive design
-✅ Optimized for HuggingFace Spaces
+LifeFlow AI - Main Application v3.1
 """
 
+import sys
+from pathlib import Path
+
+
 import gradio as gr
-import plotly.graph_objects as go
-from datetime import datetime, time
-import json
-from typing import Dict, List, Optional, Tuple
+from datetime import datetime
 import time as time_module
 
+# 導入配置
+from config import  DEFAULT_SETTINGS, APP_TITLE
+
+# 導入 UI 組件
+from ui.theme import get_enhanced_css
+from ui.components.header import create_header, create_top_controls
+from ui.components.input_form import create_input_form, toggle_location_inputs
+from ui.components.confirmation import create_confirmation_area, create_exit_button
+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
+)
+
 
-class LifeFlowInteractive:
-    """LifeFlow AI Interactive Demo v11"""
+class LifeFlowAI:
+    """LifeFlow AI - v3.1 主類"""
 
     def __init__(self):
-        self.team = None
-        self.current_step = 0
+        self.settings = DEFAULT_SETTINGS.copy()
         self.task_list = []
-        self.poi_results = []
-        self.chat_history = []
         self.reasoning_messages = []
         self.planning_completed = False
-        self.agent_raw_output = ""
-
-        # Settings
-        self.settings = {
-            'google_maps_api_key': '',
-            'openweather_api_key': '',
-            'anthropic_api_key': '',
-            'model': 'claude-sonnet-4-20250514'
-        }
-
-        # Agent info
-        self.agents_info = {
-            "planner": {
-                "name": "Planner",
-                "avatar": "👔",
-                "role": "Chief Planning Officer",
-                "color": "#4A90E2"
-            },
-            "scout": {
-                "name": "Scout",
-                "avatar": "🕵️",
-                "role": "Location Scout Expert",
-                "color": "#50C878"
-            },
-            "optimizer": {
-                "name": "Optimizer",
-                "avatar": "🤖",
-                "role": "AI Optimization Engine",
-                "color": "#F5A623"
-            },
-            "validator": {
-                "name": "Validator",
-                "avatar": "🛡️",
-                "role": "Quality Assurance Expert",
-                "color": "#7ED321"
-            },
-            "weather": {
-                "name": "Weather",
-                "avatar": "🌈",
-                "role": "Weather Analyst",
-                "color": "#50E3C2"
-            },
-            "traffic": {
-                "name": "Traffic",
-                "avatar": "🚗",
-                "role": "Traffic Planner",
-                "color": "#FF6B6B"
-            }
-        }
-
-    def create_agent_card(self, agent_key: str, status: str = "idle", message: str = ""):
-        """Create Agent card (compact version)"""
-        agent = self.agents_info[agent_key]
-
-        status_icons = {
-            "idle": "⚪",
-            "thinking": "💭",
-            "using_tool": "🔧",
-            "working": "⚙️",
-            "completed": "✅",
-            "waiting": "⏸️",
-            "error": "❌"
-        }
-
-        icon = status_icons.get(status, "⚪")
-        breathing_class = "breathing" if status in ["working", "using_tool"] else ""
-
-        return f"""
-        <div class="{breathing_class}" style="
-            background: var(--background-fill-secondary);
-            border-left: 3px solid {agent['color']};
-            border-radius: 6px;
-            padding: 10px;
-            margin: 6px 0;
-        ">
-            <div style="display: flex; align-items: center; gap: 8px;">
-                <div style="font-size: 24px;">{agent['avatar']}</div>
-                <div style="flex-grow: 1;">
-                    <div style="display: flex; justify-content: space-between; align-items: center;">
-                        <strong style="color: var(--body-text-color); font-size: 14px;">
-                            {agent['name']}
-                        </strong>
-                        <span style="font-size: 16px;">{icon}</span>
-                    </div>
-                    {f'<div style="color: var(--body-text-color); opacity: 0.7; font-size: 12px; margin-top: 4px;">{message}</div>' if message else ''}
-                </div>
-            </div>
-        </div>
-        """
-
-    def add_reasoning_message(self, agent: str, message: str, msg_type: str = "info"):
-        """Add reasoning message"""
-        icon_map = {
-            "thinking": "💭",
-            "tool": "����",
-            "success": "✅",
-            "info": "ℹ️",
-            "warning": "⚠️",
-            "error": "❌"
-        }
-        icon = icon_map.get(msg_type, "ℹ️")
-
-        agent_name = self.agents_info.get(agent, {}).get("name", agent)
-
-        self.reasoning_messages.append({
-            "agent": agent_name,
-            "message": message,
-            "icon": icon,
-            "timestamp": datetime.now().strftime("%H:%M:%S")
-        })
-
-    def get_reasoning_html(self) -> str:
-        """Generate reasoning HTML (compact scrollable)"""
-        if not self.reasoning_messages:
-            return """
-            <div style="
-                padding: 15px; 
-                text-align: center; 
-                color: var(--body-text-color); 
-                opacity: 0.6;
-                background: var(--background-fill-secondary);
-                border-radius: 6px;
-            ">
-                💬 AI conversation log will appear here
-            </div>
-            """
-
-        messages_html = ""
-        for msg in self.reasoning_messages:
-            messages_html += f"""
-            <div style="
-                padding: 8px;
-                margin: 6px 0;
-                background: var(--background-fill-secondary);
-                border-radius: 6px;
-                border-left: 2px solid #4A90E2;
-            ">
-                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
-                    <span style="font-size: 14px;">{msg['icon']}</span>
-                    <strong style="color: var(--body-text-color); font-size: 13px;">{msg['agent']}</strong>
-                    <span style="color: var(--body-text-color); opacity: 0.5; font-size: 11px; margin-left: auto;">
-                        {msg['timestamp']}
-                    </span>
-                </div>
-                <div style="color: var(--body-text-color); opacity: 0.85; padding-left: 20px; font-size: 12px;">
-                    {msg['message']}
-                </div>
-            </div>
-            """
+        self.chat_history = []
 
-        return f"""
-        <div style="
-            max-height: 400px;
-            overflow-y: auto;
-            padding: 10px;
-            background: var(--background-fill-primary);
-            border-radius: 6px;
-            border: 1px solid var(--border-color-primary);
-        ">
-            {messages_html}
-        </div>
+    def step1_analyze_tasks(self, user_input, auto_location, lat, lon):
         """
-
-    def create_task_list_ui(self, tasks: List[Dict]) -> str:
-        """Create task list UI (compact)"""
-        if not tasks:
-            return "<div style='color: var(--body-text-color);'>No tasks yet</div>"
-
-        priority_colors = {
-            "HIGH": "#FF6B6B",
-            "MEDIUM": "#F5A623",
-            "LOW": "#7ED321"
-        }
-
-        category_icons = {
-            "medical": "🏥",
-            "shopping": "🛒",
-            "postal": "📮",
-            "dining": "🍽️",
-            "financial": "🏦",
-            "other": "📋"
-        }
-
-        html = "<div style='display: flex; flex-direction: column; gap: 8px;'>"
-
-        for i, task in enumerate(tasks, 1):
-            priority = task.get('priority', 'MEDIUM')
-            category = task.get('category', 'other')
-            icon = category_icons.get(category, "📋")
-            color = priority_colors.get(priority, "#7ED321")
-            time_window = task.get('time_window', 'Anytime')
-
-            html += f"""
-            <div style="
-                background: var(--background-fill-secondary);
-                border-left: 3px solid {color};
-                border-radius: 6px;
-                padding: 10px;
-            ">
-                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
-                    <span style="font-size: 20px;">{icon}</span>
-                    <strong style="color: var(--body-text-color); font-size: 13px;">
-                        Task {i}: {task['description']}
-                    </strong>
-                </div>
-                <div style="color: var(--body-text-color); opacity: 0.7; font-size: 11px;">
-                    <span style="background: {color}; color: white; padding: 2px 6px; border-radius: 3px; margin-right: 6px;">
-                        {priority}
-                    </span>
-                    <span>⏰ {time_window}</span>
-                </div>
-            </div>
-            """
-
-        html += "</div>"
-        return html
-
-    def create_task_summary(self, tasks: List[Dict]) -> str:
-        """Create task summary (compact)"""
-        high_count = sum(1 for t in tasks if t.get('priority') == 'HIGH')
-        medium_count = sum(1 for t in tasks if t.get('priority') == 'MEDIUM')
-        low_count = sum(1 for t in tasks if t.get('priority') == 'LOW')
-
-        return f"""
-        <div style="
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            padding: 15px;
-            border-radius: 6px;
-            color: white;
-            margin-top: 10px;
-        ">
-            <h4 style="margin: 0 0 10px 0; font-size: 14px;">📊 Task Summary</h4>
-            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
-                <div style="text-align: center;">
-                    <div style="font-size: 24px; font-weight: bold;">{len(tasks)}</div>
-                    <div style="opacity: 0.9; font-size: 11px;">Total</div>
-                </div>
-                <div style="text-align: center;">
-                    <div style="font-size: 24px; font-weight: bold;">{high_count}</div>
-                    <div style="opacity: 0.9; font-size: 11px;">High Priority</div>
-                </div>
-                <div style="text-align: center;">
-                    <div style="font-size: 24px; font-weight: bold;">{medium_count + low_count}</div>
-                    <div style="opacity: 0.9; font-size: 11px;">Med/Low</div>
-                </div>
-            </div>
-        </div>
+        Step 1: 分析任務 - 帶串流輸出
+        完成後進入 Step 2 (Confirmation)
         """
+        if not user_input.strip():
+            return self._empty_step1_outputs()
 
-    def create_trip_result_summary(self, result: Dict) -> str:
-        """Create trip result summary (compact, left side)"""
-        stops = result.get('route', {}).get('stops', [])
-
-        return f"""
-        <div style="
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            padding: 20px;
-            border-radius: 8px;
-            color: white;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        ">
-            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px;">
-                <span style="font-size: 36px;">🎉</span>
-                <div>
-                    <h3 style="margin: 0; font-size: 18px;">Trip Planning Complete!</h3>
-                    <p style="margin: 5px 0 0 0; opacity: 0.9; font-size: 12px;">Optimized {len(stops)} stops</p>
-                </div>
-            </div>
-
-            <div style="background: rgba(255,255,255,0.15); padding: 12px; border-radius: 6px; margin-bottom: 12px;">
-                <h4 style="margin: 0 0 8px 0; font-size: 13px;">⏰ Schedule</h4>
-                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 11px;">
-                    <div>• Start: <strong>08:30</strong></div>
-                    <div>• Finish: <strong>11:25</strong> ✅</div>
-                    <div>• Deadline: <strong>15:00</strong></div>
-                    <div>• Buffer: <strong>3h 35m</strong> 🎯</div>
-                </div>
-            </div>
-
-            <div style="background: rgba(255,255,255,0.15); padding: 12px; border-radius: 6px;">
-                <h4 style="margin: 0 0 8px 0; font-size: 13px;">📍 Route</h4>
-                <div style="font-size: 11px; line-height: 1.6;">
-                    {' → '.join([stop['name'] for stop in stops])}
-                </div>
-            </div>
-
-            <div style="margin-top: 12px; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 6px; font-size: 11px;">
-                💡 Check the <strong>Full Report</strong> tab for detailed analysis
-            </div>
-        </div>
-        """
-
-    def create_agent_text_output(self, result: Dict) -> str:
-        """Create Agent text output (for right side tab)"""
-        stops = result.get('route', {}).get('stops', [])
-
-        output = "=" * 80 + "\n"
-        output += "LIFEFLOW AI - COMPLETE TRIP PLANNING REPORT\n"
-        output += "=" * 80 + "\n\n"
-
-        output += "【PLANNING SUMMARY】\n"
-        output += f"Total Stops: {len(stops)}\n"
-        output += f"Start Time: 08:30\n"
-        output += f"Estimated Completion: 11:25\n"
-        output += f"Deadline: 15:00\n"
-        output += f"Buffer Time: 3h 35m\n\n"
-
-        output += "=" * 80 + "\n"
-        output += "【PLANNER AGENT ANALYSIS】\n"
-        output += "=" * 80 + "\n"
-        output += "✓ Identified 3 tasks\n"
-        output += "✓ Task 1: Visit hospital (Medical - HIGH)\n"
-        output += "  - Time window: 08:00-12:00\n"
-        output += "  - Duration: 45 minutes\n"
-        output += "✓ Task 2: Buy groceries (Shopping - MEDIUM)\n"
-        output += "  - Time window: Anytime\n"
-        output += "  - Duration: 30 minutes\n"
-        output += "✓ Task 3: Mail package (Postal - HIGH)\n"
-        output += "  - Time window: 09:00-15:00\n"
-        output += "  - Duration: 20 minutes\n\n"
-
-        output += "【TIME CONSTRAINT ANALYSIS】\n"
-        output += "- Hospital time window is tight, must prioritize\n"
-        output += "- Post office deadline is 15:00, must complete on time\n"
-        output += "- Supermarket time is flexible, can be used as buffer\n\n"
-
-        output += "=" * 80 + "\n"
-        output += "【SCOUT AGENT SEARCH RESULTS】\n"
-        output += "=" * 80 + "\n"
-        output += "✓ POI search complete\n\n"
-
-        for i, stop in enumerate(stops, 1):
-            output += f"Stop {i}: {stop['name']}\n"
-            output += f"  Address: {stop['address']}\n"
-            output += f"  Phone: {stop['phone']}\n"
-            output += f"  Rating: {stop['rating']} ⭐\n"
-            output += f"  Distance: {'Start' if i == 1 else f'{0.5 * i}km'}\n\n"
-
-        output += "【DISTANCE MATRIX】\n"
-        output += "- Start → NTU Hospital: 0.8km (15 min)\n"
-        output += "- Hospital → PX Mart: 0.6km (12 min)\n"
-        output += "- PX Mart → Post Office: 0.8km (15 min)\n\n"
-
-        output += "=" * 80 + "\n"
-        output += "【OPTIMIZER AGENT ROUTE OPTIMIZATION】\n"
-        output += "=" * 80 + "\n"
-        output += "✓ Using OR-Tools TSPTW solver\n\n"
-
-        output += "【OPTIMIZATION PROCESS】\n"
-        output += "Phase 1: Greedy Construction\n"
-        output += "  - Initial route: Hospital → Supermarket → Post Office\n"
-        output += "  - Total distance: 2.2km\n"
-        output += "  - Total time: 95 minutes\n\n"
-
-        output += "Phase 2: 2-opt Improvement\n"
-        output += "  - Attempting order swap...\n"
-        output += "  - Current order is optimal\n"
-        output += "  - No improvement needed\n\n"
-
-        output += "Phase 3: Time Window Validation\n"
-        output += "  - Hospital: 09:00 ∈ [08:00, 12:00] ✓\n"
-        output += "  - Supermarket: 10:15 ∈ [Anytime] ✓\n"
-        output += "  - Post Office: 11:05 ∈ [09:00, 15:00] ✓\n\n"
-
-        output += "【OPTIMAL ROUTE】\n"
-        output += "Stop Order: Hospital → Supermarket → Post Office\n"
-        output += "Total Distance: 2.2km\n"
-        output += "Total Time: 95 minutes (travel + stops)\n"
-        output += "Completion: 11:25\n"
-        output += "Deadline Met: ✓ (3h 35m early)\n\n"
-
-        output += "=" * 80 + "\n"
-        output += "【VALIDATOR AGENT FEASIBILITY CHECK】\n"
-        output += "=" * 80 + "\n"
-        output += "✓ Comprehensive feasibility check passed\n\n"
-
-        output += "【CHECK ITEMS】\n"
-        output += "✓ Time window constraints: All satisfied\n"
-        output += "✓ Deadline constraint: Met (11:25 < 15:00)\n"
-        output += "✓ Priority handling: All HIGH tasks completed\n"
-        output += "✓ Business hours: All POIs open during visit\n"
-        output += "✓ Route continuity: No backtracking\n\n"
-
-        output += "【RISK ASSESSMENT】\n"
-        output += "- Risk Level: LOW\n"
-        output += "- Sufficient buffer for unexpected delays\n"
-        output += "- Hospital may have wait time, buffer allocated\n\n"
-
-        output += "【SCORE】\n"
-        output += "Overall Score: 98/100 (Excellent)\n"
-        output += "  - Time Efficiency: 95/100\n"
-        output += "  - Route Optimization: 100/100\n"
-        output += "  - Constraint Satisfaction: 100/100\n"
-        output += "  - Practicality: 95/100\n\n"
-
-        output += "=" * 80 + "\n"
-        output += "【WEATHER AGENT ANALYSIS】\n"
-        output += "=" * 80 + "\n"
-        output += "✓ Weather data obtained\n\n"
-        output += "【CURRENT WEATHER】\n"
-        output += "- Condition: Sunny ☀️\n"
-        output += "- Temperature: 23°C\n"
-        output += "- Precipitation: 10%\n"
-        output += "- Wind: 5 m/s\n\n"
-        output += "【WEATHER IMPACT】\n"
-        output += "- Impact on trip: None\n"
-        output += "- Recommendation: Good weather for travel\n\n"
-
-        output += "=" * 80 + "\n"
-        output += "【TRAFFIC AGENT ANALYSIS】\n"
-        output += "=" * 80 + "\n"
-        output += "✓ Traffic data analyzed\n\n"
-        output += "【TRAFFIC FORECAST】\n"
-        output += "- 08:30-09:00: Light congestion (morning rush)\n"
-        output += "- 09:00-11:00: Good conditions\n"
-        output += "- 11:00-11:30: Good conditions\n\n"
-        output += "【RECOMMENDED DEPARTURE】\n"
-        output += "- Recommended: 08:30 (as planned)\n"
-        output += "- Alternative: 08:15 (avoid some congestion)\n\n"
-        output += "【ESTIMATED TRAVEL TIME】\n"
-        output += "- Start → Hospital: 18 min (with congestion)\n"
-        output += "- Hospital → Supermarket: 12 min\n"
-        output += "- Supermarket → Post Office: 15 min\n"
-        output += "- Total Travel: 45 minutes\n\n"
-
-        output += "=" * 80 + "\n"
-        output += "【TEAM MODEL FINAL DECISION】\n"
-        output += "=" * 80 + "\n"
-        output += "✓ All agent reports synthesized\n\n"
-
-        output += "【DECISION RATIONALE】\n"
-        output += "1. Planner identified 3 tasks with clear time constraints\n"
-        output += "2. Scout found high-quality POIs (all rated 4.3+)\n"
-        output += "3. Optimizer confirmed current order is optimal\n"
-        output += "4. Validator verified all constraints satisfied\n"
-        output += "5. Weather shows good conditions, no adjustments\n"
-        output += "6. Traffic shows acceptable conditions, proceed as planned\n\n"
-
-        output += "【FINAL PLAN】\n"
-        output += "Adopt Optimizer's route order\n"
-        output += "Recommend departure at 08:30\n"
-        output += "Expected completion at 11:25\n"
-        output += "Safety margin: 3h 35m\n\n"
-
-        output += "【RECOMMENDATIONS】\n"
-        output += "1. Depart at 08:30 to ensure completion of all tasks\n"
-        output += "2. Hospital visit may take longer, buffer allocated\n"
-        output += "3. After post office, can have lunch nearby\n"
-        output += "4. If delayed, can skip supermarket (MEDIUM priority)\n\n"
-
-        output += "=" * 80 + "\n"
-        output += "Planning completed: " + datetime.now().strftime("%Y-%m-%d %H:%M:%S") + "\n"
-        output += "=" * 80 + "\n"
-
-        return output
-
-    def create_map(self, result: Optional[Dict] = None) -> go.Figure:
-        """Create map"""
-        if not result:
-            fig = go.Figure()
-            fig.update_layout(
-                title="Map will appear after planning",
-                height=500,
-                template="plotly_dark"
-            )
-            return fig
-
-        stops = [
-            {"name": "Start", "lat": 25.0330, "lng": 121.5654},
-            {"name": "NTU Hospital", "lat": 25.0408, "lng": 121.5318},
-            {"name": "PX Mart", "lat": 25.0428, "lng": 121.5298},
-            {"name": "Post Office", "lat": 25.0468, "lng": 121.5358}
-        ]
-
-        fig = go.Figure()
-
-        lats = [stop['lat'] for stop in stops]
-        lngs = [stop['lng'] for stop in stops]
-
-        fig.add_trace(go.Scattermapbox(
-            lat=lats,
-            lon=lngs,
-            mode='lines+markers',
-            marker=dict(size=15, color='red'),
-            line=dict(width=3, color='blue'),
-            text=[stop['name'] for stop in stops],
-            hoverinfo='text'
-        ))
-
-        fig.update_layout(
-            mapbox=dict(
-                style='open-street-map',
-                center=dict(lat=25.04, lon=121.53),
-                zoom=13
-            ),
-            height=500,
-            margin=dict(l=0, r=0, t=0, b=0)
+        # 🔧 串流輸出 1: 開始分析
+        stream_str = "🤔 Analyzing your request..."
+        stream_html = self._create_stream_html(stream_str)
+        yield (
+            stream_html, "", "", get_reasoning_html_reversed(),
+            gr.update(visible=False), gr.update(visible=False),
+            "",  # chat_history_output
+            "Starting analysis...",
+            *[create_agent_card_enhanced("planner", "working", "Analyzing..."),
+              *[create_agent_card_enhanced(k, "idle", "On standby")
+                for k in ["scout", "optimizer", "validator", "weather", "traffic"]]]
         )
 
-        return fig
-
-    def step1_analyze_tasks(self, user_input: str):
-        """Step 1: Analyze tasks"""
-        self.reasoning_messages = []
-
-        self.add_reasoning_message("planner", "Analyzing user requirements...", "thinking")
         time_module.sleep(0.5)
 
-        self.add_reasoning_message("planner", "Using tool: parse_requirements()", "tool")
-        time_module.sleep(0.5)
-
-        self.add_reasoning_message("planner", "✅ Identified 3 tasks: hospital, supermarket, post office", "success")
+        stream_str += "\n📋 Extracting tasks from your input..."
+        # 🔧 串流輸出 2: 提取任務
+        stream_html = self._create_stream_html(stream_str)
+        yield (
+            stream_html, "", "", get_reasoning_html_reversed(),
+            gr.update(visible=False), gr.update(visible=False),
+            "",  # chat_history_output
+            "Extracting tasks...",
+            *[create_agent_card_enhanced("planner", "working", "Extracting tasks..."),
+              *[create_agent_card_enhanced(k, "idle", "On standby")
+                for k in ["scout", "optimizer", "validator", "weather", "traffic"]]]
+        )
 
-        self.add_reasoning_message("planner", "Using tool: extract_time_windows()", "tool")
         time_module.sleep(0.5)
 
-        self.add_reasoning_message("planner", "✅ Time windows extracted", "success")
-
+        # 模擬提取的任務
         self.task_list = [
-            {
-                "description": "Visit NTU Hospital",
-                "category": "medical",
-                "priority": "HIGH",
-                "time_window": "08:00-12:00"
-            },
-            {
-                "description": "Buy groceries at PX Mart",
-                "category": "shopping",
-                "priority": "MEDIUM",
-                "time_window": "Anytime"
-            },
-            {
-                "description": "Mail package at post office",
-                "category": "postal",
-                "priority": "HIGH",
-                "time_window": "09:00-15:00"
-            }
+            {"id": 1, "title": "Visit hospital", "priority": "HIGH",
+             "time": "08:00-12:00", "duration": "45 minutes", "location": "Hospital nearby", "icon": "🏥"},
+            {"id": 2, "title": "Buy groceries", "priority": "MEDIUM",
+             "time": "Anytime", "duration": "30 minutes", "location": "Supermarket", "icon": "🛒"},
+            {"id": 3, "title": "Mail package", "priority": "HIGH",
+             "time": "Before 15:00", "duration": "20 minutes", "location": "Post office", "icon": "📮"}
         ]
 
-        agent_updates = [
-            self.create_agent_card("planner", "completed", "✅ Analysis complete"),
-            self.create_agent_card("scout", "idle", "On standby"),
-            self.create_agent_card("optimizer", "idle", "On standby"),
-            self.create_agent_card("validator", "idle", "On standby"),
-            self.create_agent_card("weather", "idle", "On standby"),
-            self.create_agent_card("traffic", "idle", "On standby")
-        ]
-
-        task_list_ui = self.create_task_list_ui(self.task_list)
-        task_summary = self.create_task_summary(self.task_list)
-
-        return (
-            *agent_updates,
-            self.get_reasoning_html(),
-            task_list_ui,
-            task_summary,
-            gr.update(visible=True),
-            gr.update(visible=True),
-            [],
-            "✅ Task analysis complete"
-        )
+        # 添加推理訊息
+        self._add_reasoning("planner", "Analyzing input tasks...")
+        self._add_reasoning("planner", f"Extracted {len(self.task_list)} tasks")
 
-    def step2_search_pois(self):
-        """Step 2: Search POIs"""
-        self.add_reasoning_message("scout", "Starting POI search...", "thinking")
-        time_module.sleep(0.5)
+        # 生成摘要和任務卡片
+        high_priority = sum(1 for t in self.task_list if t["priority"] == "HIGH")
+        total_time = sum(int(t["duration"].split()[0]) for t in self.task_list)
 
-        agent_updates = [
-            self.create_agent_card("planner", "completed", "✅ Complete"),
-            self.create_agent_card("scout", "working", "🔧 Searching POIs..."),
-            self.create_agent_card("optimizer", "waiting", "⏸️ Waiting"),
-            self.create_agent_card("validator", "waiting", "⏸️ Waiting"),
-            self.create_agent_card("weather", "waiting", "⏸️ Waiting"),
-            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
-        ]
+        summary_html = create_summary_card(len(self.task_list), high_priority, total_time)
+        task_list_html = self._generate_task_list_html()
 
-        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
-               "🔍 Searching locations...")
+        stream_str += "\n✅ Analysis complete! Please review your tasks."
+        stream_html = self._create_stream_html(stream_str)
 
-        self.add_reasoning_message("scout", "Using tool: search_poi(query='hospital')", "tool")
-        time_module.sleep(0.8)
+        # Step 1 完成，準備進入 Step 2
+        yield (
+            stream_html, summary_html, task_list_html,
+            get_reasoning_html_reversed(self.reasoning_messages),
+            gr.update(visible=True),  # task_confirm_area
+            gr.update(visible=False),  # chat_input_area (先隱藏)
+            self._generate_chat_welcome_html(),  # chat_history_output
+            "Tasks extracted successfully ✓",
+            *[create_agent_card_enhanced("planner", "complete", "Tasks extracted"),
+              *[create_agent_card_enhanced(k, "idle", "On standby")
+                for k in ["scout", "optimizer", "validator", "weather", "traffic"]]]
+        )
 
-        self.add_reasoning_message("scout", "✅ Found NTU Hospital (0.8km, 4.8★)", "success")
+    def modify_task_chat(self, user_message):
+        """
+        處理用戶在 Chat with LifeFlow Tab 中的修改請求
+        這在 Step 2 時可用
+        """
+        if not user_message.strip():
+            return self._generate_chat_history_html(), self._generate_task_list_html()
+
+        # 添加用戶消息
+        self.chat_history.append({
+            "role": "user",
+            "message": user_message,
+            "time": datetime.now().strftime("%H:%M:%S")
+        })
 
-        self.add_reasoning_message("scout", "Using tool: search_poi(query='supermarket')", "tool")
-        time_module.sleep(0.8)
+        # 模擬 AI 回應
+        time_module.sleep(0.3)
+        ai_response = f"✅ I've updated your tasks based on your request: '{user_message}'"
 
-        self.add_reasoning_message("scout", "✅ Found PX Mart (1.2km, 24/7)", "success")
+        self.chat_history.append({
+            "role": "assistant",
+            "message": ai_response,
+            "time": datetime.now().strftime("%H:%M:%S")
+        })
 
-        self.add_reasoning_message("scout", "Using tool: search_poi(query='post office')", "tool")
-        time_module.sleep(0.8)
+        # 更新 reasoning
+        self._add_reasoning("planner", f"User requested: {user_message}")
 
-        self.add_reasoning_message("scout", "✅ Found Post Office (1.8km, until 17:30)", "success")
+        # 返回更新的聊天歷史和任務列表
+        return self._generate_chat_history_html(), self._generate_task_list_html()
 
-        self.add_reasoning_message("scout", "Using tool: calculate_distance_matrix()", "tool")
-        time_module.sleep(0.5)
+    def step2_search_pois(self):
+        """
+        Step 2.5: 搜索 POI - 專家團隊開始工作
+        Scout Agent 開始工作
+        """
+        time_module.sleep(1)
+        self._add_reasoning("scout", "Searching for POIs...")
+        self._add_reasoning("scout", "Found hospital: NTU Hospital (800m, 4.8★)")
+        self._add_reasoning("scout", "Found supermarket: PX Mart (1.2km)")
 
-        self.add_reasoning_message("scout", "✅ Distance matrix calculated", "success")
+        reasoning_html = get_reasoning_html_reversed(self.reasoning_messages)
 
         agent_updates = [
-            self.create_agent_card("planner", "completed", "✅ Complete"),
-            self.create_agent_card("scout", "completed", "✅ POI search complete"),
-            self.create_agent_card("optimizer", "waiting", "⏸️ Waiting"),
-            self.create_agent_card("validator", "waiting", "⏸️ Waiting"),
-            self.create_agent_card("weather", "waiting", "⏸️ Waiting"),
-            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
+            create_agent_card_enhanced("planner", "complete", "Tasks ready"),
+            create_agent_card_enhanced("scout", "working", "Searching POIs..."),
+            *[create_agent_card_enhanced(k, "idle", "On standby")
+              for k in ["optimizer", "validator", "weather", "traffic"]]
         ]
 
-        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
-               "✅ POI search complete")
+        return reasoning_html, "🗺️ Searching for locations...", *agent_updates
 
     def step3_optimize_route(self):
-        """Step 3: Optimize route"""
-        self.add_reasoning_message("optimizer", "Starting route optimization...", "thinking")
-        time_module.sleep(0.5)
+        """Step 3: 優化路線 - Optimizer 開始工作"""
+        time_module.sleep(1)
+        self._add_reasoning("optimizer", "Running TSPTW solver...")
+        self._add_reasoning("optimizer", "Optimized route: Hospital → Supermarket → Post Office")
+
+        report = """
+## 🎯 Optimization Complete
+
+### Route Details:
+1. **🏥 Hospital** (09:00 - 10:00)
+2. **🛒 Supermarket** (10:15 - 10:45)
+3. **📮 Post Office** (11:05 - 11:25)
+
+### Metrics:
+- ✅ Total distance: 2.8 km
+- ✅ Total time: 95 minutes
+- ✅ All deadlines met
+- ✅ Minimal travel distance
+- ✅ Weather conditions favorable
+"""
 
         agent_updates = [
-            self.create_agent_card("planner", "completed", "✅ Complete"),
-            self.create_agent_card("scout", "completed", "✅ Complete"),
-            self.create_agent_card("optimizer", "working", "⚙️ Optimizing..."),
-            self.create_agent_card("validator", "waiting", "⏸️ Waiting"),
-            self.create_agent_card("weather", "waiting", "⏸️ Waiting"),
-            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
+            create_agent_card_enhanced("planner", "complete", "Analysis done"),
+            create_agent_card_enhanced("scout", "complete", "POI search done"),
+            create_agent_card_enhanced("optimizer", "working", "Optimizing route..."),
+            *[create_agent_card_enhanced(k, "idle", "On standby")
+              for k in ["validator", "weather", "traffic"]]
         ]
 
-        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
-               "⚙️ Optimizing route...")
-
-        self.add_reasoning_message("optimizer", "Using tool: optimize_with_ortools()", "tool")
-        time_module.sleep(1.0)
-
-        self.add_reasoning_message("optimizer", "✅ TSPTW solved, improved 15%", "success")
+        reasoning_html = get_reasoning_html_reversed(self.reasoning_messages)
+        return reasoning_html, report, "🎯 Optimizing route...", *agent_updates
 
-        self.add_reasoning_message("validator", "Validating feasibility...", "thinking")
-        time_module.sleep(0.5)
+    def step4_finalize(self):
+        """Step 4: 完成並生成報告（含慶祝動畫和增強視覺化）"""
+        time_module.sleep(1)
+        self._add_reasoning("validator", "Validating route quality...")
+        self._add_reasoning("weather", "Checking weather conditions...")
+        self._add_reasoning("traffic", "Analyzing traffic patterns...")
 
-        agent_updates = [
-            self.create_agent_card("planner", "completed", "✅ Complete"),
-            self.create_agent_card("scout", "completed", "✅ Complete"),
-            self.create_agent_card("optimizer", "completed", "✅ Optimized"),
-            self.create_agent_card("validator", "working", "🛡️ Validating..."),
-            self.create_agent_card("weather", "waiting", "⏸️ Waiting"),
-            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
-        ]
+        self.planning_completed = True
 
-        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
-               "🛡️ Validating...")
+        # 生成慶祝動畫
+        celebration_html = create_celebration_animation()
 
-        self.add_reasoning_message("validator", "Using tool: validate_time_windows()", "tool")
-        time_module.sleep(0.8)
+        # 生成詳細的結果視覺化
+        result_html = create_result_visualization(self.task_list) + celebration_html
 
-        self.add_reasoning_message("validator", "✅ All time windows satisfied", "success")
+        # 簡化的 timeline 和 metrics（保留兼容性，但現在主要信息在 result_html 中）
+        timeline_html = "<h3>🗓️ Detailed Timeline</h3><p>See the complete timeline in the result panel</p>"
+        metrics_html = "<h3>📈 Performance Metrics</h3><p>All optimization metrics are displayed above</p>"
 
-        self.add_reasoning_message("validator", "Using tool: check_deadline()", "tool")
-        time_module.sleep(0.8)
-
-        self.add_reasoning_message("validator", "✅ Deadline check passed (3h35m buffer)", "success")
-
-        self.add_reasoning_message("weather", "Checking weather...", "thinking")
-        time_module.sleep(0.5)
+        map_fig = create_animated_map()
 
         agent_updates = [
-            self.create_agent_card("planner", "completed", "✅ Complete"),
-            self.create_agent_card("scout", "completed", "✅ Complete"),
-            self.create_agent_card("optimizer", "completed", "✅ Complete"),
-            self.create_agent_card("validator", "completed", "✅ Validated"),
-            self.create_agent_card("weather", "working", "🌈 Checking..."),
-            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
+            create_agent_card_enhanced(k, "complete", "Task complete")
+            for k in ["planner", "scout", "optimizer", "validator", "weather", "traffic"]
         ]
 
-        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
-               "🌈 Checking weather...")
+        return (
+            timeline_html, metrics_html, result_html, map_fig,
+            gr.update(visible=True),  # map_tab
+            gr.update(visible=False),  # team_area (隱藏，任務完成)
+            "🎉 Planning complete! Review your optimized route.",
+            *agent_updates
+        )
 
-        self.add_reasoning_message("weather", "Using tool: check_weather()", "tool")
-        time_module.sleep(0.8)
+    def save_settings(self, google_key, weather_key, anthropic_key, model):
+        """保存設定"""
+        self.settings['google_maps_api_key'] = google_key
+        self.settings['openweather_api_key'] = weather_key
+        self.settings['anthropic_api_key'] = anthropic_key
+        self.settings['model'] = model
+        return "✅ Settings saved successfully!"
 
-        self.add_reasoning_message("weather", "✅ Sunny, 23°C, perfect for travel", "success")
+    def _create_stream_html(self, message):
+        """創建串流輸出 HTML"""
+        return f"""
+        <div class="stream-container">
+            <div class="stream-text">{message}<span class="stream-cursor"></span></div>
+        </div>
+        """
 
-        self.add_reasoning_message("traffic", "Checking traffic...", "thinking")
-        time_module.sleep(0.5)
+    def _add_reasoning(self, agent, message):
+        """添加推理訊息"""
+        self.reasoning_messages.append({
+            'agent': agent,
+            'message': message,
+            'time': datetime.now().strftime("%H:%M:%S")
+        })
 
-        agent_updates = [
-            self.create_agent_card("planner", "completed", "✅ Complete"),
-            self.create_agent_card("scout", "completed", "✅ Complete"),
-            self.create_agent_card("optimizer", "completed", "✅ Complete"),
-            self.create_agent_card("validator", "completed", "✅ Complete"),
-            self.create_agent_card("weather", "completed", "✅ Good weather"),
-            self.create_agent_card("traffic", "working", "🚗 Checking...")
-        ]
+    def _generate_task_list_html(self):
+        """生成任務列表 HTML"""
+        html = ""
+        for task in self.task_list:
+            html += create_task_card(
+                task["id"], task["title"], task["priority"],
+                task["time"], task["duration"], task["location"], task["icon"]
+            )
+        return html
 
-        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
-               "🚗 Checking traffic...")
+    def _generate_chat_welcome_html(self):
+        """生成 Chat 歡迎訊息"""
+        return """
+        <div style="padding: 20px; text-align: center;">
+            <h3 style="color: #4A90E2; margin-bottom: 10px;">💬 Chat with LifeFlow</h3>
+            <p style="opacity: 0.8;">You can now modify your tasks by chatting with me!</p>
+            <p style="opacity: 0.6; font-size: 0.9em;">Try: "Change task 2 to high priority" or "Add a new task"</p>
+        </div>
+        """
 
-        self.add_reasoning_message("traffic", "Using tool: check_traffic()", "tool")
-        time_module.sleep(0.8)
+    def _generate_chat_history_html(self):
+        """生成聊天歷史 HTML"""
+        if not self.chat_history:
+            return self._generate_chat_welcome_html()
 
-        self.add_reasoning_message("traffic", "✅ Good road conditions", "success")
+        html = '<div class="chat-history-container" style="max-height: 400px; overflow-y: auto;">'
 
-        agent_updates = [
-            self.create_agent_card("planner", "completed", "✅ Complete"),
-            self.create_agent_card("scout", "completed", "✅ Complete"),
-            self.create_agent_card("optimizer", "completed", "✅ Complete"),
-            self.create_agent_card("validator", "completed", "✅ Complete"),
-            self.create_agent_card("weather", "completed", "✅ Complete"),
-            self.create_agent_card("traffic", "completed", "✅ Complete")
-        ]
+        for msg in self.chat_history:
+            role = msg["role"]
+            message = msg["message"]
+            time = msg["time"]
 
-        result = {
-            'route': {
-                'stops': [
-                    {'name': 'NTU Hospital', 'address': 'No. 1, Changde St., Taipei', 'arrival_time': '09:00',
-                     'duration': '45',
-                     'rating': '4.8', 'phone': '02-2312-3456'},
-                    {'name': 'PX Mart', 'address': 'Roosevelt Rd. Sec. 3, Taipei', 'arrival_time': '10:15',
-                     'duration': '30', 'rating': '4.5', 'phone': '02-2362-7890'},
-                    {'name': 'Main Post Office', 'address': 'Zhongxiao W. Rd. Sec. 1, Taipei', 'arrival_time': '11:05',
-                     'duration': '20', 'rating': '4.3', 'phone': '02-2311-1234'}
-                ]
-            }
-        }
+            if role == "user":
+                html += f'''
+                <div style="margin-bottom: 15px; text-align: right;">
+                    <div style="display: inline-block; max-width: 70%; background: #E3F2FD; padding: 10px 15px; border-radius: 15px 15px 0 15px;">
+                        <div style="font-size: 0.9em; font-weight: 500;">{message}</div>
+                        <div style="font-size: 0.75em; opacity: 0.6; margin-top: 5px;">{time}</div>
+                    </div>
+                </div>
+                '''
+            else:
+                html += f'''
+                <div style="margin-bottom: 15px; text-align: left;">
+                    <div style="display: inline-block; max-width: 70%; background: #F5F5F5; padding: 10px 15px; border-radius: 15px 15px 15px 0;">
+                        <div style="font-size: 0.85em; color: #4A90E2; font-weight: 600; margin-bottom: 5px;">🤖 LifeFlow AI</div>
+                        <div style="font-size: 0.9em;">{message}</div>
+                        <div style="font-size: 0.75em; opacity: 0.6; margin-top: 5px;">{time}</div>
+                    </div>
+                </div>
+                '''
 
-        trip_result = self.create_trip_result_summary(result)
-        agent_text = self.create_agent_text_output(result)
-        map_fig = self.create_map(result)
+        html += '</div>'
+        return html
 
-        yield (
-            *agent_updates,
-            self.get_reasoning_html(),
-            trip_result,
-            agent_text,
-            map_fig,
-            gr.update(visible=True),
-            gr.update(visible=True),
-            "🎉 Planning complete!"
+    def _empty_step1_outputs(self):
+        """返回空的 Step 1 輸出"""
+        return (
+            create_agent_stream_output(),
+            "", "", get_reasoning_html_reversed(),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            self._generate_chat_welcome_html(),
+            "Please enter your tasks",
+            *[create_agent_card_enhanced(k, "idle", "On standby")
+              for k in ["planner", "scout", "optimizer", "validator", "weather", "traffic"]]
         )
 
-    def modify_task_chat(self, message: str, history: List):
-        """Modify tasks via chat"""
-        if not message:
-            return history, self.create_task_list_ui(self.task_list)
-
-        history.append({"role": "user", "content": message})
-        history.append({"role": "assistant", "content": "Noted. I've recorded your request."})
-        return history, self.create_task_list_ui(self.task_list)
-
-    def save_settings(self, google_key: str, weather_key: str, anthropic_key: str, model: str):
-        """Save settings"""
-        self.settings['google_maps_api_key'] = google_key
-        self.settings['openweather_api_key'] = weather_key
-        self.settings['anthropic_api_key'] = anthropic_key
-        self.settings['model'] = model
-        return "✅ Settings saved"
-
     def build_interface(self):
-        """Build Gradio interface (compact layout)"""
-        with gr.Blocks(
-                theme=gr.themes.Soft(
-                    primary_hue="blue",
-                    secondary_hue="green",
-                    neutral_hue="slate",
-                    font=gr.themes.GoogleFont("Inter"),
-                    font_mono=gr.themes.GoogleFont("IBM Plex Mono")
-                ),
-                css="""
-                .breathing {
-                    animation: breathing 2s ease-in-out infinite;
-                }
-                @keyframes breathing {
-                    0%, 100% { opacity: 1; transform: scale(1); }
-                    50% { opacity: 0.9; transform: scale(1.02); }
-                }
-                .compact-container {
-                    max-width: 1400px;
-                    margin: 0 auto;
-                }
-                """,
-                title="LifeFlow AI - Intelligent Trip Planning"
-        ) as demo:
-            gr.Markdown("""
-            # 🚀 LifeFlow AI - Intelligent Trip Planning System
-
-            **Multi-Agent AI System** for optimizing daily errands and activities
-            """)
-
-            with gr.Row(elem_classes="compact-container"):
-                # Left: Input + Tasks + Agents + Results (narrower)
-                with gr.Column(scale=2, min_width=350):
-                    # Input area
-                    with gr.Group(visible=True) as input_area:
-                        gr.Markdown("### 📝 Describe Your Needs")
-
-                        user_input = gr.Textbox(
-                            label="Requirements",
-                            placeholder="e.g., Visit hospital tomorrow morning, buy groceries, mail package before 3pm",
-                            lines=3
-                        )
-
-                        with gr.Row():
-                            start_location = gr.Textbox(
-                                label="Start",
-                                placeholder="Taipei",
-                                scale=2
-                            )
-                            start_time = gr.Textbox(
-                                label="Time",
-                                placeholder="08:30",
-                                scale=1
-                            )
-
-                        deadline = gr.Textbox(
-                            label="Deadline (optional)",
-                            placeholder="e.g., 15:00"
-                        )
-
-                        analyze_btn = gr.Button("🚀 Start AI Analysis", variant="primary", size="lg")
-
-                    # Task confirmation
-                    with gr.Group(visible=False) as task_confirm_area:
-                        gr.Markdown("### ✅ Confirm Tasks")
-
-                        task_list_display = gr.HTML()
-                        task_summary_display = gr.HTML()
-
-                        with gr.Row():
-                            back_btn = gr.Button("⬅️ Back", variant="secondary", scale=1)
-                            confirm_btn = gr.Button("✅ Confirm & Plan", variant="primary", scale=2)
-
-                    # Trip result summary
-                    with gr.Group(visible=False) as trip_result_area:
-                        trip_result_display = gr.HTML()
-
-                    # AI Team
-                    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=self.create_agent_card(agent_key, "idle", "On standby"))
-                            agent_displays.append(agent_card)
-
-                # Right: Status + Chat + Tabs (wider)
+        """構建 Gradio 界面"""
+        with gr.Blocks(title=APP_TITLE) as demo:
+            # 注入 CSS 樣式
+            gr.HTML(get_enhanced_css())
+            # Header
+            create_header()
+
+            # Top Controls (Theme, Settings & Doc)
+            theme_btn, settings_btn, doc_btn = create_top_controls()
+
+            # Main Layout
+            with gr.Row():
+                # ========== Left Column (主操作區) ==========
+                with gr.Column(scale=2, min_width=400):
+                    # Step 1: Input Form
+                    (input_area, agent_stream_output, user_input, auto_location,
+                     location_inputs, lat_input, lon_input, analyze_btn) = create_input_form(
+                        create_agent_stream_output()
+                    )
+
+                    # Step 2: Confirmation Area (包含 Exit 和 Ready to plan 按鈕)
+                    (task_confirm_area, task_summary_display,
+                     task_list_display, exit_btn_inline, ready_plan_btn) = create_confirmation_area()
+
+                    # Step 2.5/3: Team Area (取代 Confirmation Area)
+                    team_area, agent_displays = create_team_area(create_agent_card_enhanced)
+
+                    # Step 3: Result Area (最終結果展示)
+                    (result_area, result_display,
+                     timeline_display, metrics_display) = create_result_area(create_animated_map)
+
+                # ========== Right Column (狀態 + Tabs) ==========
                 with gr.Column(scale=3, min_width=500):
-                    # Status bar
-                    with gr.Group():
-                        status_bar = gr.Textbox(
-                            label="📊 Status",
-                            value="Waiting for input...",
-                            interactive=False,
-                            max_lines=1
-                        )
-
-                        # Chat modification
-                        with gr.Group(visible=False) as chat_modify_area:
-                            gr.Markdown("### 💬 Modify Tasks")
-
-                            chatbot = gr.Chatbot(
-                                type='messages',
-                                value=[],
-                                height=120,
-                                show_label=False
-                            )
-
-                            with gr.Row():
-                                chat_input = gr.Textbox(
-                                    placeholder="e.g., Change task 2 to high priority",
-                                    show_label=False,
-                                    scale=4
-                                )
-                                chat_send = gr.Button("Send", variant="primary", scale=1)
-
-                    # Tabs
-                    with gr.Tabs() as tabs:
-                        # Tab 1: AI Conversation
-                        with gr.Tab("💬 AI Conversation", id="chat_tab"):
-                            reasoning_output = gr.HTML(
-                                value=self.get_reasoning_html()
-                            )
-
-                        # Tab 2: Full Report
-                        with gr.Tab("📊 Full Report", id="summary_tab", visible=False) as summary_tab:
-                            gr.Markdown("*Team Agent complete analysis (plain text)*")
-                            complete_summary_output = gr.Textbox(
-                                show_label=False,
-                                lines=20,
-                                max_lines=25,
-                                interactive=False
-                            )
-
-                        # Tab 3: Map
-                        with gr.Tab("🗺️ Route Map", id="map_tab", visible=False) as map_tab:
-                            map_output = gr.Plot(value=self.create_map(), show_label=False)
-
-                        # Tab 4: Settings
-                        with gr.Tab("⚙️ Settings", id="settings_tab"):
-                            gr.Markdown("### 🔑 API Keys")
-
-                            google_maps_key = gr.Textbox(
-                                label="Google Maps API Key",
-                                placeholder="AIzaSy...",
-                                type="password"
-                            )
-
-                            openweather_key = gr.Textbox(
-                                label="OpenWeather API Key",
-                                type="password"
-                            )
-
-                            anthropic_key = gr.Textbox(
-                                label="Anthropic API Key",
-                                placeholder="sk-ant-...",
-                                type="password"
-                            )
-
-                            gr.Markdown("### 🤖 Model")
-
-                            model_choice = gr.Dropdown(
-                                label="Select Model",
-                                choices=[
-                                    "claude-sonnet-4-20250514",
-                                    "claude-opus-4-20250514",
-                                    "gpt-4o",
-                                    "gemini-pro"
-                                ],
-                                value="claude-sonnet-4-20250514"
-                            )
-
-                            save_settings_btn = gr.Button("💾 Save", variant="primary")
-                            settings_status = gr.Textbox(label="Status", value="", interactive=False)
-
-            # Examples
-            gr.Examples(
-                examples=[
-                    ["Visit hospital tomorrow morning, buy groceries, mail package before 3pm", "Taipei", "08:30",
-                     "15:00"]
-                ],
-                inputs=[user_input, start_location, start_time, deadline]
+                    status_bar = gr.Textbox(
+                        label="📊 Status",
+                        value="Waiting for input...",
+                        interactive=False,
+                        max_lines=1
+                    )
+
+                    # Tabs (包含新的 Chat with LifeFlow Tab)
+                    (tabs, report_tab, map_tab, report_output, map_output, reasoning_output,
+                     chat_input_area, chat_history_output, chat_input, chat_send) = create_tabs(
+                        create_animated_map,
+                        get_reasoning_html_reversed()
+                    )
+
+            # Modals
+            (settings_modal, google_maps_key, openweather_key, anthropic_key,
+             model_choice, close_settings_btn, save_settings_btn,
+             settings_status) = create_settings_modal()
+
+            doc_modal, close_doc_btn = create_doc_modal()
+
+            # ============= Event Handlers =============
+
+            # Auto location toggle
+            auto_location.change(
+                fn=toggle_location_inputs,
+                inputs=[auto_location],
+                outputs=[location_inputs]
             )
 
-            # Event bindings
+            # ====== Step 1: Analyze button ======
             analyze_btn.click(
                 fn=self.step1_analyze_tasks,
-                inputs=[user_input],
+                inputs=[user_input, auto_location, lat_input, lon_input],
                 outputs=[
-                    *agent_displays,
-                    reasoning_output,
-                    task_list_display,
-                    task_summary_display,
-                    task_confirm_area,
-                    chat_modify_area,
-                    chatbot,
-                    status_bar
+                    agent_stream_output, task_summary_display, task_list_display,
+                    reasoning_output, task_confirm_area, chat_input_area,
+                    chat_history_output, status_bar, *agent_displays
                 ]
             ).then(
-                fn=lambda: (gr.update(visible=False), gr.update(visible=True)),
-                outputs=[input_area, task_confirm_area]
-            )
-
-            back_btn.click(
+                # Step 1 → Step 2: 隱藏輸入區，顯示確認區 + 開啟 Chat 輸入框
                 fn=lambda: (
-                    gr.update(visible=True),
-                    gr.update(visible=False),
-                    gr.update(visible=False),
-                    "Waiting for input..."
+                    gr.update(visible=False),  # input_area
+                    gr.update(visible=True),   # task_confirm_area
+                    gr.update(visible=True)    # chat_input_area (開啟聊天功能)
                 ),
-                outputs=[input_area, task_confirm_area, chat_modify_area, status_bar]
+                outputs=[input_area, task_confirm_area, chat_input_area]
             )
 
+            # ====== Step 2: Chat with LifeFlow (任務修改) ======
             chat_send.click(
                 fn=self.modify_task_chat,
-                inputs=[chat_input, chatbot],
-                outputs=[chatbot, task_list_display]
+                inputs=[chat_input],
+                outputs=[chat_history_output, task_list_display]
             ).then(
-                fn=lambda: "",
+                fn=lambda: "",  # 清空輸入框
                 outputs=[chat_input]
             )
 
-            chat_input.submit(
-                fn=self.modify_task_chat,
-                inputs=[chat_input, chatbot],
-                outputs=[chatbot, task_list_display]
-            ).then(
-                fn=lambda: "",
-                outputs=[chat_input]
+            # ====== Step 2: Exit button ======
+            exit_btn_inline.click(
+                fn=lambda: (
+                    gr.update(visible=True),   # input_area
+                    gr.update(visible=False),  # task_confirm_area
+                    gr.update(visible=False),  # chat_input_area (關閉聊天)
+                    gr.update(visible=False),  # result_area
+                    gr.update(visible=False),  # team_area
+                    gr.update(visible=False),  # report_tab
+                    gr.update(visible=False),  # map_tab
+                    "",  # user_input
+                    create_agent_stream_output(),  # agent_stream_output
+                    self._generate_chat_welcome_html(),  # chat_history_output (重置)
+                    "Ready to start planning..."  # status_bar
+                ),
+                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
+                ]
             )
 
-            confirm_btn.click(
+            # ====== Step 2 → Step 2.5: Ready to Plan button ======
+            ready_plan_btn.click(
+                # 隱藏確認區和聊天輸入，顯示專家團隊，切換到 AI Conversation Tab
                 fn=lambda: (
-                    gr.update(visible=False),
-                    gr.update(visible=False),
-                    gr.update(visible=True)
+                    gr.update(visible=False),  # task_confirm_area
+                    gr.update(visible=False),  # chat_input_area (關閉聊天輸入)
+                    gr.update(visible=True),   # team_area (顯示專家團隊)
+                    gr.update(selected="ai_conversation_tab")  # 切換到 AI Conversation Tab
                 ),
-                outputs=[task_confirm_area, chat_modify_area, team_area]
+                outputs=[task_confirm_area, chat_input_area, team_area, tabs]
             ).then(
+                # Step 2.5: Scout 開始工作
                 fn=self.step2_search_pois,
-                outputs=[
-                    *agent_displays,
-                    reasoning_output,
-                    trip_result_display,
-                    complete_summary_output,
-                    map_output,
-                    map_tab,
-                    summary_tab,
-                    status_bar
-                ]
+                outputs=[reasoning_output, status_bar, *agent_displays]
             ).then(
+                # Step 3: Optimizer 開始工作，切換到 Full Report Tab
                 fn=self.step3_optimize_route,
-                outputs=[
-                    *agent_displays,
-                    reasoning_output,
-                    trip_result_display,
-                    complete_summary_output,
-                    map_output,
-                    map_tab,
-                    summary_tab,
-                    status_bar
-                ]
+                outputs=[reasoning_output, report_output, status_bar, *agent_displays]
             ).then(
+                # 顯示 Report 和 Map Tabs，並切換到 Full Report
                 fn=lambda: (
-                    gr.update(visible=True),
-                    gr.update(selected="summary_tab")
+                    gr.update(visible=True),  # report_tab
+                    gr.update(visible=True),  # map_tab
+                    gr.update(selected="report_tab")  # 切換到 Full Report Tab
                 ),
-                outputs=[trip_result_area, tabs]
+                outputs=[report_tab, map_tab, tabs]
+            ).then(
+                # Step 4: 完成規劃
+                fn=self.step4_finalize,
+                outputs=[
+                    timeline_display, metrics_display, result_display,
+                    map_output, map_tab, team_area, status_bar, *agent_displays
+                ]
+            ).then(
+                fn=lambda: gr.update(visible=True),
+                outputs=[result_area]
             )
 
+            # ====== Settings ======
+            settings_btn.click(
+                fn=lambda: gr.update(visible=True),
+                outputs=[settings_modal]
+            )
+            close_settings_btn.click(
+                fn=lambda: gr.update(visible=False),
+                outputs=[settings_modal]
+            )
             save_settings_btn.click(
                 fn=self.save_settings,
                 inputs=[google_maps_key, openweather_key, anthropic_key, model_choice],
                 outputs=[settings_status]
             )
 
+            # ====== Theme Toggle ======
+            theme_btn.click(
+                fn=None,
+                js="""
+                () => {
+                    const container = document.querySelector('.gradio-container');
+                    if (container) {
+                        container.classList.toggle('theme-dark');
+                        const isDark = container.classList.contains('theme-dark');
+                        localStorage.setItem('lifeflow-theme', isDark ? 'dark' : 'light');
+                        console.log('Theme toggled:', isDark ? 'dark' : 'light');
+                    }
+                }
+                """
+            )
+
+            # ====== Documentation ======
+            doc_btn.click(
+                fn=lambda: gr.update(visible=True),
+                outputs=[doc_modal]
+            )
+            close_doc_btn.click(
+                fn=lambda: gr.update(visible=False),
+                outputs=[doc_modal]
+            )
+
         return demo
 
 
 def main():
-    app = LifeFlowInteractive()
+    app = LifeFlowAI()
     demo = app.build_interface()
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,  # HuggingFace default 7860
-        share=False,
-        show_error=True
-    )
-
+    demo.launch(server_name="0.0.0.0", server_port=7860, share=False, show_error=True)
 
 if __name__ == "__main__":
     main()

config.py

@@ -0,0 +1,58 @@
+"""
+LifeFlow AI - Configuration
+"""
+
+APP_TITLE = "LifeFlow AI - Intelligent Daily Trip Planner"
+
+AGENTS_INFO = {
+    'planner': {
+        'name': 'Planner',
+        'role': 'Task Analyzer',
+        'icon': '📋',
+        'color': '#f093fb'
+    },
+    'scout': {
+        'name': 'Scout',
+        'role': 'POI Searcher',
+        'icon': '🗺️',
+        'color': '#4facfe'
+    },
+    'optimizer': {
+        'name': 'Optimizer',
+        'role': 'Route Optimizer',
+        'icon': '⚡',
+        'color': '#43e97b'
+    },
+    'validator': {
+        'name': 'Validator',
+        'role': 'Feasibility Checker',
+        'icon': '✅',
+        'color': '#fa709a'
+    },
+    'weather': {
+        'name': 'Weather',
+        'role': 'Weather Advisor',
+        'icon': '🌤️',
+        'color': '#feca57'
+    },
+    'traffic': {
+        'name': 'Traffic',
+        'role': 'Traffic Analyzer',
+        'icon': '🚗',
+        'color': '#ff6348'
+    }
+}
+
+DEFAULT_SETTINGS = {
+    'google_maps_api_key': '',
+    'openweather_api_key': '',
+    'anthropic_api_key': '',
+    'model': 'claude-sonnet-4-20250514'
+}
+
+MODEL_CHOICES = [
+    'claude-sonnet-4-20250514',
+    'claude-sonnet-3-5-20241022',
+    'gpt-4-turbo',
+    'gemini-pro'
+]

ui/components/confirmation.py

@@ -0,0 +1,48 @@
+"""
+LifeFlow AI - Confirmation Component
+Step 2: 任務確認區域
+✅ 移除獨立的 chat_modify_area (已整合到 Tab 中)
+"""
+import gradio as gr
+
+
+def create_confirmation_area():
+    """
+    創建任務確認區域
+    ✅ Exit 和 Ready to plan 並排
+    """
+    with gr.Group(visible=False) as task_confirm_area:
+        gr.Markdown("### ✅ Confirm Your Tasks")
+        task_summary_display = gr.HTML()
+        task_list_display = gr.HTML()
+
+        # 按鈕並排顯示（Exit 左邊，Ready to plan 右邊）
+        with gr.Row():
+            exit_btn = gr.Button(
+                "🏠 Exit",
+                size="lg",
+                scale=1,
+                elem_id="exit-button-inline"
+            )
+            ready_plan_btn = gr.Button(
+                "✅ Ready to plan",
+                variant="primary",
+                size="lg",
+                scale=2,
+                elem_classes="ready-plan-button"
+            )
+
+    return task_confirm_area, task_summary_display, task_list_display, exit_btn, ready_plan_btn
+
+
+def create_exit_button():
+    """
+    創建獨立的 Exit 按鈕（用於其他地方）
+    """
+    exit_btn = gr.Button(
+        "🏠 Exit",
+        size="lg",
+        visible=False,
+        elem_id="exit-button"
+    )
+    return exit_btn

ui/components/header.py

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

ui/components/input_form.py

@@ -0,0 +1,34 @@
+"""
+LifeFlow AI - Input Form Component
+Step 1: 用戶輸入表單
+"""
+import gradio as gr
+
+
+def create_input_form(agent_stream_html):
+    """創建輸入表單"""
+    with gr.Group(visible=True) as input_area:
+        gr.Markdown("### 📝 Tell us your plans")
+        agent_stream_output = gr.HTML(value=agent_stream_html)
+        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
+        )
+        gr.Markdown("---")
+        auto_location = gr.Checkbox(label="📍 Auto-detect my location", value=False)
+
+        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)
+
+        analyze_btn = gr.Button("🚀 Analyze & Plan", 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_location):
+    """切換位置輸入顯示"""
+    return gr.update(visible=not auto_location)

ui/components/modals.py

@@ -0,0 +1,82 @@
+"""
+LifeFlow AI - Settings & Documentation Modals
+設定和文檔模態框
+"""
+import sys
+from pathlib import Path
+
+current_dir = Path(__file__).parent.parent.parent
+sys.path.insert(0, str(current_dir))
+
+import gradio as gr
+from config import MODEL_CHOICES
+
+
+def create_settings_modal():
+    """創建設定模態框"""
+    with gr.Group(visible=False) as settings_modal:
+        gr.Markdown("## ⚙️ Settings")
+        gr.Markdown("### 🔑 API Keys")
+        google_maps_key = gr.Textbox(label="Google Maps API Key", type="password")
+        openweather_key = gr.Textbox(label="OpenWeather API Key", type="password")
+        anthropic_key = gr.Textbox(label="Anthropic API Key", type="password")
+
+        gr.Markdown("### 🤖 Model")
+        model_choice = gr.Dropdown(
+            choices=MODEL_CHOICES,
+            value=MODEL_CHOICES[0],
+            label="Select Model"
+        )
+
+        with gr.Row():
+            close_settings_btn = gr.Button("❌ Close", scale=1)
+            save_settings_btn = gr.Button("💾 Save", variant="primary", scale=2)
+
+        settings_status = gr.Textbox(label="Status", value="")
+
+    return (settings_modal, google_maps_key, openweather_key, anthropic_key,
+            model_choice, close_settings_btn, save_settings_btn, settings_status)
+
+
+def create_doc_modal():
+    """創建文檔模態框"""
+    doc_content = """
+## 📖 Documentation
+
+### How to Use LifeFlow AI
+
+#### Step 1: Input Your Tasks
+1. Describe what you need to do today
+2. Choose whether to auto-detect location or enter manually
+3. Click "🚀 Analyze & Plan"
+
+#### Step 2: Review & Confirm
+1. Check the extracted tasks
+2. Modify if needed using the chat
+3. Click "✅ Ready to plan" to start optimization
+
+#### Step 3: Get Your Plan
+1. Watch the AI agents work together
+2. View the optimized route on the map
+3. Read the full report
+
+### Features
+- 🤖 **Multi-Agent AI**: 6 specialized agents work together
+- 🗺️ **Smart Routing**: Optimizes for distance and time
+- ⚡ **Real-time Updates**: See AI reasoning process
+- 🎨 **Responsive Design**: Works on all devices
+
+### Tips
+- Be specific about time constraints
+- Mention priorities (urgent, important, etc.)
+- Include any special requirements
+
+### Support
+For issues or questions, contact: support@lifeflow.ai
+"""
+
+    with gr.Group(visible=False) as doc_modal:
+        gr.Markdown(doc_content)
+        close_doc_btn = gr.Button("❌ Close")
+
+    return doc_modal, close_doc_btn

ui/components/results.py

@@ -0,0 +1,81 @@
+"""
+LifeFlow AI - Results Component
+Step 3: 結果展示
+✅ 新增 Chat with LifeFlow Tab
+✅ 支援任務修改對話
+"""
+import sys
+from pathlib import Path
+
+current_dir = Path(__file__).parent.parent.parent
+sys.path.insert(0, str(current_dir))
+
+import gradio as gr
+from config import AGENTS_INFO
+
+
+def create_team_area(create_agent_card_func):
+    """創建 AI Team 展示區域"""
+    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)
+
+    return team_area, agent_displays
+
+
+def create_result_area(create_animated_map_func):
+    """創建結果展示區域"""
+    with gr.Group(visible=False) as result_area:
+        result_display = gr.HTML()
+        timeline_display = gr.HTML()
+        metrics_display = gr.HTML()
+
+    return result_area, result_display, timeline_display, metrics_display
+
+
+def create_tabs(create_animated_map_func, reasoning_html):
+    """
+    創建標籤頁
+    Tab 順序: Chat with LifeFlow (default) → Full Report → Route Map → AI Conversation
+    """
+    with gr.Tabs(selected="chat_lifeflow_tab") as tabs:
+        # 🆕 Tab 1: Chat with LifeFlow (用於任務修改，Step 1 默認選擇)
+        with gr.Tab("💬 Chat with LifeFlow", id="chat_lifeflow_tab"):
+            gr.Markdown("*Ask me to modify your tasks*", elem_classes="tab-subtitle")
+
+            # Chat 輸出區域（顯示對話歷史）
+            chat_history_output = gr.HTML(
+                value='<div style="padding: 20px; text-align: center; opacity: 0.6;">Chat will be available after task analysis...</div>',
+                elem_classes="chat-history"
+            )
+
+            # Chat 輸入區域（Step 1 時隱藏，Step 2 時顯示）
+            with gr.Group(visible=False, elem_classes="chat-input-group") as chat_input_area:
+                with gr.Row():
+                    chat_input = gr.Textbox(
+                        placeholder="e.g., Change task 2 to high priority, or add a new task...",
+                        show_label=False,
+                        scale=4,
+                        elem_classes="chat-input"
+                    )
+                    chat_send = gr.Button("Send", variant="primary", scale=1)
+
+        # Tab 2: Full Report (專家推理過程，Step 3 時變為默認)
+        with gr.Tab("📊 Full Report", id="report_tab", visible=False) as report_tab:
+            gr.Markdown("*AI Expert Team Reasoning Process*", elem_classes="tab-subtitle")
+            report_output = gr.Markdown()
+
+        # Tab 3: Route Map
+        with gr.Tab("🗺️ Route Map", id="map_tab", visible=False) as map_tab:
+            map_output = gr.Plot(value=create_animated_map_func(), show_label=False)
+
+        # Tab 4: AI Conversation (原有的 reasoning stream)
+        with gr.Tab("🔍 AI Conversation", id="ai_conversation_tab"):
+            gr.Markdown("*Real-time AI reasoning*", elem_classes="tab-subtitle")
+            reasoning_output = gr.HTML(value=reasoning_html)
+
+    return (tabs, report_tab, map_tab, report_output, map_output, reasoning_output,
+            chat_input_area, chat_history_output, chat_input, chat_send)

ui/theme.py

@@ -0,0 +1,593 @@
+"""
+LifeFlow AI - Theme System
+提供完整的主題和樣式管理，支援動態主題切換
+"""
+
+
+def get_enhanced_css() -> str:
+    """
+    改進的 CSS 系統：
+    1. ✅ 修復色調功能 - 確保主題顏色正確應用
+    2. ✅ 完整支援深淺模式切換
+    3. ✅ 修復 Exit 按鈕樣式（Step 2）
+    4. ✅ 調整 Setting 和 Doc 按鈕位置和大小
+    """
+    return """
+    <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 標題 ============= */
+    .app-header {
+        text-align: center;
+        padding: 40px 20px 30px 20px;
+        position: relative;
+    }
+
+    .app-header h1 {
+        font-size: 64px !important;
+        margin: 0 !important;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-weight: 700 !important;
+    }
+
+    .app-header p {
+        font-size: 20px !important;
+        color: var(--body-text-color);
+        opacity: 0.8;
+        margin-top: 10px !important;
+    }
+
+    /* ============= 🔧 修復：主題切換按鈕 ============= */
+    #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;
+        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;
+    }
+
+    #exit-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.5) !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-header {
+        display: flex;
+        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));
+    }
+    .agent-info h3 {
+        margin: 0;
+        font-size: 16px;
+        color: var(--body-text-color);
+    }
+    .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;
+    }
+
+    /* ============= 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 {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+    .task-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--body-text-color);
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+    .task-icon {
+        font-size: 24px;
+    }
+    .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;
+    }
+    .task-detail-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    /* ============= Summary Card ============= */
+    .summary-card {
+        background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+        border-radius: 12px;
+        padding: 20px;
+        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;
+    }
+    .stat-label {
+        font-size: 12px;
+        opacity: 0.9;
+        margin-top: 5px;
+    }
+
+    /* ============= 🔧 優化：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);
+    }
+
+    /* ============= Reasoning Timeline ============= */
+    .reasoning-timeline {
+        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;
+    }
+    .reasoning-header {
+        display: flex;
+        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;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .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);
+    }
+    /* ============= 🔧 主題切換 - 深色模式樣式 ============= */
+    .theme-dark {
+        background: #1a1a1a !important;
+    }
+
+    .theme-dark .gradio-container {
+        background: #1a1a1a !important;
+    }
+
+    .theme-dark [data-testid="block"] {
+        background: #2d2d2d !important;
+    }
+
+    .theme-dark .gr-box,
+    .theme-dark .gr-form,
+    .theme-dark .gr-input,
+    .theme-dark .gr-group {
+        background: #2d2d2d !important;
+        border-color: #444444 !important;
+    }
+
+    .theme-dark p,
+    .theme-dark label,
+    .theme-dark span,
+    .theme-dark h1,
+    .theme-dark h2,
+    .theme-dark h3 {
+        color: #e0e0e0 !important;
+    }
+
+    .theme-dark input,
+    .theme-dark textarea {
+        background: #3a3a3a !important;
+        color: #e0e0e0 !important;
+        border-color: #555555 !important;
+    }
+
+    .theme-dark button {
+        background: #3a3a3a !important;
+        color: #e0e0e0 !important;
+        border-color: #555555 !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);
+    }
+    </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>
+    """