feat: Complete UI/UX redesign and fix critical workflow bugs

app.py

@@ -1,475 +1,355 @@
 """
-LifeFlow AI - Main Application (Refactored)
-Controller Layer: 負責 UI 佈局與 Service 連接
+LifeFlow AI - Main Application (Fixed Output Mismatch)
+✅ 修復 Step 4 回傳值數量不匹配導致的 AttributeError
+✅ 確保 outputs 清單包含所有 7 個元件
 """
 
 import gradio as gr
-from typing import List
-
-# ===== Core & Data Models =====
-from core.session import UserSession
-from services.planner_service import PlannerService
-
-# ===== UI & Config =====
-from config import APP_TITLE, DEFAULT_SETTINGS
+import inspect
+from datetime import datetime
 from ui.theme import get_enhanced_css
+from ui.components.header import create_header
+from ui.components.progress_stepper import create_progress_stepper, update_stepper
+from ui.components.input_form import create_input_form, toggle_location_inputs
+from ui.components.modals import create_settings_modal, create_doc_modal
 from ui.renderers import (
-    create_agent_stream_output,
+    create_agent_dashboard,
     create_summary_card,
-    create_agent_card_enhanced,
-    get_reasoning_html_reversed,
-    generate_chat_history_html_bubble
+    create_task_card
 )
+from core.session import UserSession
+from services.planner_service import PlannerService
 from core.visualizers import create_animated_map
 
-# ===== UI Components =====
-from ui.components.header import create_header
-from ui.components.input_form import create_input_form, toggle_location_inputs
-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
-
-
 class LifeFlowAI:
     def __init__(self):
         self.service = PlannerService()
 
-    def _check_api_status(self, session: UserSession) -> str:
-        """檢查 API Key 狀態"""
+    def _get_dashboard_html(self, active_agent: str = None, status: str = "idle", message: str = "Waiting") -> str:
+        agents = ['team', 'scout', 'optimizer', 'navigator', 'weatherman', 'presenter']
+        status_dict = {a: {'status': 'idle', 'message': 'Standby'} for a in agents}
+        if active_agent in status_dict:
+            status_dict[active_agent] = {'status': status, 'message': message}
+            if active_agent != 'team' and status == 'working':
+                status_dict['team'] = {'status': 'working', 'message': f'Monitoring {active_agent}...'}
+        return create_agent_dashboard(status_dict)
+
+    def _check_api_status(self, session_data):
+        session = UserSession.from_dict(session_data)
         has_gemini = bool(session.custom_settings.get("gemini_api_key"))
         has_google = bool(session.custom_settings.get("google_maps_api_key"))
+        msg = "✅ System Ready" if (has_gemini and has_google) else "⚠️ Missing API Keys"
+        return msg
 
-        if has_gemini and has_google:
-            return "✅ System Ready - Waiting for input..."
-        else:
-            missing = []
-            if not has_gemini: missing.append("Gemini Key")
-            if not has_google: missing.append("Google Maps Key")
-            return f"⚠️ Missing Keys: {', '.join(missing)} - Please configure Settings ↗"
+    def _get_gradio_chat_history(self, session):
+        history = []
+        for msg in session.chat_history:
+            history.append({"role": msg["role"], "content": msg["message"]})
+        return history
 
-    def _get_agent_outputs(self, active_agent: str = None, status: str = "idle", message: str = "Waiting") -> List[str]:
-        """輔助函數：生成 Agent 卡片 HTML"""
+    # ================= Event Wrappers =================
 
-        # 🔥 [關鍵修正] 更新為你的新 Agent 名單 (共 5 個)
-        # 必須與 create_team_area 中的順序完全一致！
-        agents = ['team', 'scout', 'optimizer', 'navigator', 'weatherman', 'presenter']
-
-        outputs = []
-        for agent in agents:
-            if agent == active_agent:
-                outputs.append(create_agent_card_enhanced(agent, status, message))
-            else:
-                outputs.append(create_agent_card_enhanced(agent, "idle", "On standby"))
-
-        return outputs
-
-    def _update_task_summary(self, session: UserSession) -> str:
-        """統一計算並回傳 Summary Card HTML"""
-        tasks = session.task_list
-        if not tasks:
-            return create_summary_card(0, 0, 0)
-
-        high_priority = sum(1 for t in tasks if t.get("priority", "").upper() == "HIGH")
-
-        total_time = 0
-        for t in tasks:
-            dur_str = str(t.get("duration", "0"))
-            try:
-                val = int(dur_str.split()[0])
-                total_time += val
-            except (ValueError, IndexError):
-                pass
-
-        return create_summary_card(len(tasks), high_priority, total_time)
-
-    # -------------------------------------------------------------------------
-    # Step 1: Analyze (分析任務)
-    # -------------------------------------------------------------------------
     def analyze_wrapper(self, user_input, auto_loc, lat, lon, session_data):
         session = UserSession.from_dict(session_data)
-
-        # 1. 輸入驗證
-        if not user_input or not user_input.strip():
-            agent_outputs = self._get_agent_outputs("team", "idle", "Waiting")
-            yield (
-                "<div style='color: #ef4444; font-weight: bold; padding: 5px;'>⚠️ Please describe your plans first!</div>",
-                gr.HTML(), gr.HTML(),
-                get_reasoning_html_reversed(session.reasoning_messages),
-                gr.update(visible=False), gr.update(visible=False), gr.HTML(),
-                "⚠️ Input Required", gr.update(visible=True), *agent_outputs, session.to_dict()
-            )
-            return
-
-        # 2. 執行分析
         iterator = self.service.run_step1_analysis(user_input, auto_loc, lat, lon, session)
-
         for event in iterator:
             evt_type = event.get("type")
-            agent_status = event.get("agent_status", ("team", "idle", "Waiting"))
-            agent_outputs = self._get_agent_outputs(*agent_status)
             current_session = event.get("session", session)
-            reasoning_html = get_reasoning_html_reversed(current_session.reasoning_messages)
-
-            if evt_type == "stream":
-                html_output = create_agent_stream_output(event.get("stream_text", ""))
+            if evt_type == "error":
                 yield (
-                    html_output,
-                    gr.HTML(), gr.HTML(), reasoning_html,
-                    gr.update(visible=False), gr.update(visible=False), gr.HTML(),
-                    f"Processing: {agent_status[2]}", gr.update(visible=True), *agent_outputs, current_session.to_dict()
+                    gr.update(),  # step1
+                    gr.update(),  # step2
+                    gr.update(),  # step3
+                    gr.HTML(f"<div style='color:red'>{event.get('message')}</div>"),  # s1_stream
+                    gr.update(),  # task_list
+                    gr.update(),  # task_summary
+                    gr.update(),  # chatbot
+                    current_session.to_dict()  # state
                 )
-            elif evt_type == "complete":
-                summary_html = self._update_task_summary(current_session)
-
-                task_html = self.service.generate_task_list_html(current_session)
-
-                final_text = event.get("stream_text", "Analysis complete!")
-                html_output = create_agent_stream_output(final_text)
-
-                final_agents = self._get_agent_outputs("team", "complete", "Tasks ready")
+                return
 
+            if evt_type == "stream":
                 yield (
-                    html_output,
-                    gr.HTML(value=summary_html), # ✅ 更新 Summary Component
-                    gr.HTML(value=task_html),
-                    reasoning_html,
-                    gr.update(visible=True), gr.update(visible=True),
-                    generate_chat_history_html_bubble(current_session),
-                    "✓ Tasks extracted", gr.update(visible=False), *final_agents, current_session.to_dict()
+                    gr.update(visible=True),
+                    gr.update(visible=False),
+                    gr.update(visible=False),
+                    event.get("stream_text", ""),
+                    gr.update(),
+                    gr.update(),
+                    gr.update(),
+                    current_session.to_dict()
                 )
 
-            elif evt_type == "error":
-                err_msg = event.get("message", "Unknown error")
-                error_agents = self._get_agent_outputs("team", "idle", "Error")
+            elif evt_type == "complete":
+                tasks_html = self.service.generate_task_list_html(current_session)
+                date_str = datetime.now().strftime("%Y-%m-%d")
+                loc_str = "Selected Location"
+                if current_session.lat and current_session.lng:
+                    loc_str = f"{current_session.lat:.2f}, {current_session.lng:.2f}"
+
+                summary_html = create_summary_card(len(current_session.task_list), event.get("high_priority", 0), event.get("total_time", 0), location=loc_str, date=date_str)
+                chat_history = self._get_gradio_chat_history(current_session)
+                if not chat_history:
+                    chat_history = [
+                        {"role": "assistant", "content": event.get('stream_text', "")},
+                        {"role": "assistant", "content": "Hi! I'm LifeFlow. Tell me if you want to change priorities, add stops, or adjust times."}]
+                    current_session.chat_history.append({"role": "assistant", "message": "Hi! I'm LifeFlow...", "time": ""})
 
                 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}", gr.update(visible=True), *error_agents, current_session.to_dict()
+                    gr.update(visible=False),  # Hide S1
+                    gr.update(visible=True),  # Show S2
+                    gr.update(visible=False),  # Hide S3
+                    "",  # Clear Stream
+                    gr.HTML(tasks_html),
+                    gr.HTML(summary_html),
+                    chat_history,
+                    current_session.to_dict()
                 )
 
-
-    # -------------------------------------------------------------------------
-    # Chat Modification (修改任務)
-    # -------------------------------------------------------------------------
     def chat_wrapper(self, msg, session_data):
         session = UserSession.from_dict(session_data)
         iterator = self.service.modify_task_chat(msg, session)
-
         for event in iterator:
-            current_session = event.get("session", session)
-
-            # 🔥 [Update 2] Step 2 Modify: 每次對話更新後，重新計算 Summary
-            new_summary_html = self._update_task_summary(current_session)
-
-            yield (
-                generate_chat_history_html_bubble(current_session),  # Output 1: Chat History
-                self.service.generate_task_list_html(current_session),  # Output 2: Task List
-                new_summary_html,  # Output 3: ✅ Summary Card (新增這個)
-                current_session.to_dict()  # Output 4: Session State
-            )
+            sess = event.get("session", session)
+            tasks_html = self.service.generate_task_list_html(sess)
+            summary_html = event.get("summary_html", gr.HTML())
+            gradio_history = self._get_gradio_chat_history(sess)
+            yield (gradio_history, tasks_html, summary_html, sess.to_dict())
 
-    # -------------------------------------------------------------------------
-    # Step 2 -> 3 Transition (驗證與過渡)
-    # -------------------------------------------------------------------------
-    def transition_to_planning(self, session_data):
+    def step3_wrapper(self, session_data):
         session = UserSession.from_dict(session_data)
 
-        # 1. 🛑 防呆檢查
-        if not session.task_list or len(session.task_list) == 0:
-            agent_outputs = self._get_agent_outputs("team", "idle", "No tasks")
-            reasoning = get_reasoning_html_reversed(session.reasoning_messages)
+        # Init variables
+        log_content = ""
+        report_content = ""
 
-            return (
-                gr.update(visible=True),  # task_confirm_area
-                gr.update(visible=True),  # chat_input_area
-                gr.update(visible=False), # team_area
-                gr.update(),              # tabs
-                gr.update(),              # 🔥 [新增] report_tab (維持現狀)
-                gr.update(),              # 🔥 [新增] map_tab (維持現狀)
-                reasoning,
-                "⚠️ Error: No tasks to plan! Please add tasks.",
-                *agent_outputs,
-                session.to_dict()
-            )
+        tasks_html = self.service.generate_task_list_html(session)
+        init_dashboard = self._get_dashboard_html('team', 'working', 'Initializing...')
 
-        # 2. ✅ 執行 Step 2 (Scout Search)
-        result = self.service.run_step2_search(session)
-        current_session = result.get("session", session)
-
-        reasoning_html = get_reasoning_html_reversed(current_session.reasoning_messages)
-        agent_outputs = self._get_agent_outputs("scout", "working", "Searching POIs...")
-
-        return (
-            gr.update(visible=False),          # task_confirm_area
-            gr.update(visible=False),          # chat_input_area
-            gr.update(visible=True),           # team_area
-            gr.update(selected="report_tab"), # tabs (預設看 Log)
-            gr.update(visible=True),           # 🔥 [關鍵修改] report_tab 設為可見！
-            gr.update(visible=False),           # 🔥 [關鍵修改] map_tab 設為可見！
-            reasoning_html,
-            "🗺️ Scout is searching locations...",
-            *agent_outputs,
-            current_session.to_dict()
-        )
-
-    # -------------------------------------------------------------------------
-    # Step 3 Wrapper (Team Analysis)
-    # -------------------------------------------------------------------------
-    def step3_wrapper(self, session_data):
-        session = UserSession.from_dict(session_data)
+        # HTML Content (No Indentation)
+        loading_html = inspect.cleandoc("""
+        <div style="text-align: center; padding: 60px 20px; color: #64748b;">
+            <div style="font-size: 48px; margin-bottom: 20px; animation: pulse 1.5s infinite;">🧠</div>
+            <div style="font-size: 1.2rem; font-weight: 600; color: #334155;">AI Team is analyzing your request...</div>
+            <div style="font-size: 0.9rem; margin-top: 8px;">Checking routes, weather, and optimizing schedule.</div>
+        </div>
+        <style>@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } }</style>
+        """)
+
+        init_log = '<div style="padding: 10px; color: #94a3b8; font-style: italic;">Waiting for agents...</div>'
 
-        # 1. 防呆回傳 (9個值)
-        if not session.task_list:
-            agent_outputs = self._get_agent_outputs("team", "idle", "No tasks")
-            # yield 順序: Report, Reasoning, Agents(6個), Session
-            yield ("", "", *agent_outputs, session.to_dict())
-            return
+        yield (init_dashboard, init_log, loading_html, tasks_html, session.to_dict())
 
         iterator = self.service.run_step3_team(session)
-        current_report = "⏳ Generating plan..."
 
         for event in iterator:
+            sess = event.get("session", session)
             evt_type = event.get("type")
-            current_session = event.get("session", session)
-
-            # 準備 UI Data
-            reasoning_html = get_reasoning_html_reversed(current_session.reasoning_messages)
-            agent_status = event.get("agent_status", ("team", "working", "Processing..."))
-            agent_outputs = self._get_agent_outputs(*agent_status)
 
-            # 更新 Report 暫存
             if evt_type == "report_stream":
-                current_report = event.get("content", current_report)
-
-            # 🔥 統一回傳 (確保任何事件都更新所有 UI)
-            # 必須是 9 個值：Report, Reasoning, Agent1...6, Session
-            yield (
-                current_report,
-                reasoning_html,
-                *agent_outputs,
-                current_session.to_dict()
-            )
+                report_content = event.get("content", "")
+
+            if evt_type == "reasoning_update":
+                agent, status, msg = event.get("agent_status")
+                time_str = datetime.now().strftime('%H:%M:%S')
+                log_entry = f"""
+                <div style="margin-bottom: 8px; border-left: 3px solid #6366f1; padding-left: 10px;">
+                    <div style="font-size: 0.75rem; color: #94a3b8;">{time_str} • {agent.upper()}</div>
+                    <div style="color: #334155; font-size: 0.9rem;">{msg}</div>
+                </div>
+                """
+                log_content = log_entry + log_content
+                dashboard_html = self._get_dashboard_html(agent, status, msg)
+                log_html = f'<div style="height: 500px; overflow-y: auto; padding: 10px; background: #fff;">{log_content}</div>'
+                current_report = report_content + "\n\n" if report_content else loading_html
+
+                yield (dashboard_html, log_html, current_report, tasks_html, sess.to_dict())
+
+            if evt_type == "complete":
+                final_report = event.get("report_html", report_content)
+                final_log = f"""
+                <div style="margin-bottom: 8px; border-left: 3px solid #10b981; padding-left: 10px; background: #ecfdf5; padding: 10px;">
+                    <div style="font-weight: bold; color: #059669;">✅ Planning Completed</div>
+                </div>
+                {log_content}
+                """
+                final_log_html = f'<div style="height: 500px; overflow-y: auto; padding: 10px; background: #fff;">{final_log}</div>'
+
+                yield (
+                    self._get_dashboard_html('team', 'complete', 'Planning Finished'),
+                    final_log_html,
+                    final_report,
+                    tasks_html,
+                    sess.to_dict()
+                )
 
-    # -------------------------------------------------------------------------
-    # Step 4 Wrapper (Optimization & Results)
-    # -------------------------------------------------------------------------
     def step4_wrapper(self, session_data):
         session = UserSession.from_dict(session_data)
-        if not session.task_list:  # 二次防呆
-            default_map = create_animated_map()
-            agent_outputs = self._get_agent_outputs("team", "idle", "No tasks")
-            return (
-                "", "", "", default_map,
-                gr.update(), gr.update(), "⚠️ Planning aborted",
-                *agent_outputs, session.to_dict()
-            )
-
         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")
+        # 🔥 Wrapper 回傳 7 個值
+        if result['type'] == 'success':
             return (
-                result["timeline_html"], result["metrics_html"], result["result_html"], result["map_fig"],
-                gr.update(visible=True), gr.update(visible=False), "🎉 Planning completed!",
-                *agent_outputs, current_session.to_dict()
+                gr.update(visible=False), # 1. Step 3 Hide
+                gr.update(visible=True),  # 2. Step 4 Show
+                result['summary_tab_html'], # 3. Summary Tab HTML
+                result['report_md'],        # 4. Report Tab Markdown
+                result['task_list_html'],   # 5. Task List HTML
+                result['map_fig'],          # 6. Map Plot
+                session.to_dict()           # 7. Session State
             )
         else:
-            default_map = create_animated_map()
-            agent_outputs = self._get_agent_outputs("team", "idle", "Error")
-            err = result.get("message", "Error")
-            return (
-                f"Error: {err}", "", "", default_map,
-                gr.update(), gr.update(), f"Error: {err}",
-                *agent_outputs, current_session.to_dict()
-            )
-
-    def save_settings(self, google_key, weather_key, gemini_key, model, session_data):
-        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
-        new_status = self._check_api_status(session)
-        return "✅ Settings saved locally!", session.to_dict(), new_status
-
-    # -------------------------------------------------------------------------
-    # UI Builder
-    # -------------------------------------------------------------------------
-    def build_interface(self):
-        def reset_app(old_session_data):
-            old_session = UserSession.from_dict(old_session_data)
-            new_session = UserSession()
-            new_session.custom_settings = old_session.custom_settings
-            status_msg = self._check_api_status(new_session)
             return (
                 gr.update(visible=True), gr.update(visible=False),
-                gr.update(visible=False), gr.update(visible=False),
-                gr.update(visible=False), gr.update(visible=False),
-                gr.update(visible=False), "",
-                create_agent_stream_output(),
-                status_msg,
-                "", "", "",
-                new_session.to_dict()
+                "", "", "", None,
+                session.to_dict()
             )
 
-        def initial_check(session_data):
-            s = UserSession.from_dict(session_data)
-            return self._check_api_status(s)
+    # ================= Main UI Builder =================
 
-        with gr.Blocks(title=APP_TITLE) as demo:
+    def build_interface(self):
+        with gr.Blocks(title="LifeFlow AI", css=".gradio-container {max-width: 100% !important; padding: 0;}") as demo:
             gr.HTML(get_enhanced_css())
-            home_btn, theme_btn, settings_btn, doc_btn = create_header()
-            session_state = gr.State(value=UserSession().to_dict())
-
-            with gr.Row():
-                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(
-                        create_agent_stream_output()
-                    )
-                    (task_confirm_area, task_summary_display,
-                     task_list_display, exit_btn_inline, ready_plan_btn) = create_confirmation_area()
-                    team_area, agent_displays = create_team_area(create_agent_card_enhanced)
-                    (result_area, result_display, timeline_display, metrics_display) = create_result_area(
-                        create_animated_map)
-
-                with gr.Column(scale=3, min_width=500):
-                    status_bar = gr.Textbox(label="📊 Status", value="⚠️ Checking System Status...", interactive=False,
-                                            max_lines=1)
-                    (tabs, report_tab, map_tab, report_output, map_output, reasoning_output,
-                     chat_input_area, chat_history_output, chat_input, chat_send) = create_tabs(
-                        create_animated_map, get_reasoning_html_reversed()
-                    )
-
-            # Modals
-            (settings_modal, google_maps_key, openweather_key, gemini_api_key,
-             model_choice, close_settings_btn, save_settings_btn, settings_status) = create_settings_modal()
+
+            session_state = gr.State(UserSession().to_dict())
+
+            with gr.Column(elem_classes="step-container"):
+                home_btn, theme_btn, settings_btn, doc_btn = create_header()
+                stepper = create_progress_stepper(1)
+                status_bar = gr.Markdown("Ready", visible=False)
+
+            # STEP 1
+            with gr.Group(visible=True, elem_classes="step-container centered-input-container") as step1_container:
+                (input_area, s1_stream_output, user_input, auto_loc, loc_group, lat_in, lon_in, analyze_btn) = create_input_form("")
+
+            # STEP 2
+            with gr.Group(visible=False, elem_classes="step-container") as step2_container:
+                gr.Markdown("### ✅ Review & Refine Tasks")
+                with gr.Row(elem_classes="step2-split-view"):
+                    with gr.Column(scale=1):
+                        with gr.Group(elem_classes="panel-container"):
+                            gr.HTML('<div class="panel-header">📋 Your Tasks</div>')
+                            with gr.Group(elem_classes="scrollable-content"):
+                                task_summary_box = gr.HTML()
+                                task_list_box = gr.HTML()
+                    with gr.Column(scale=1):
+                        with gr.Group(elem_classes="panel-container chat-panel-native"):
+                            chatbot = gr.Chatbot(label="AI Assistant", type="messages", height=540, elem_classes="native-chatbot", bubble_full_width=False)
+                            with gr.Row(elem_classes="chat-input-row"):
+                                chat_input = gr.Textbox(show_label=False, placeholder="Type to modify tasks...", container=False, scale=5, autofocus=True)
+                                chat_send = gr.Button("➤", variant="primary", scale=1, min_width=50)
+                with gr.Row(elem_classes="action-footer"):
+                    back_btn = gr.Button("← Back", variant="secondary", scale=1)
+                    plan_btn = gr.Button("🚀 Start Planning", variant="primary", scale=2)
+
+            # STEP 3
+            with gr.Group(visible=False, elem_classes="step-container") as step3_container:
+                gr.Markdown("### 🤖 AI Team Operations")
+                with gr.Group(elem_classes="agent-dashboard-container"):
+                    agent_dashboard = gr.HTML(value=self._get_dashboard_html())
+
+                with gr.Row():
+                    with gr.Column(scale=2):
+                        with gr.Tabs():
+                            with gr.Tab("📝 Full Report"):
+                                with gr.Group(elem_classes="live-report-wrapper"):
+                                    live_report_md = gr.Markdown()
+                            with gr.Tab("📋 Task List"):
+                                with gr.Group(elem_classes="panel-container"):
+                                    with gr.Group(elem_classes="scrollable-content"):
+                                        task_list_s3 = gr.HTML()
+                    with gr.Column(scale=1):
+                        gr.Markdown("### ⚡ Activity Log")
+                        with gr.Group(elem_classes="panel-container"):
+                            planning_log = gr.HTML(value="Waiting...")
+
+            # STEP 4
+            with gr.Group(visible=False, elem_classes="step-container") as step4_container:
+                with gr.Row():
+                    # Left: Tabs (Summary / Report / Tasks)
+                    with gr.Column(scale=1, elem_classes="split-left-panel"):
+                        with gr.Tabs():
+                            with gr.Tab("📊 Summary"):
+                                summary_tab_output = gr.HTML()
+
+                            with gr.Tab("📝 Full Report"):
+                                report_tab_output = gr.Markdown()
+
+                            with gr.Tab("📋 Task List"):
+                                task_list_tab_output = gr.HTML()
+
+                    # Right: Hero Map
+                    with gr.Column(scale=2, elem_classes="split-right-panel"):
+                        map_view = gr.Plot(label="Route Map", show_label=False)
+
+            # Modals & Events
+            (settings_modal, g_key, w_key, gem_key, model_sel, close_set, save_set, set_stat) = create_settings_modal()
             doc_modal, close_doc_btn = create_doc_modal()
 
-            auto_location.change(fn=toggle_location_inputs, inputs=[auto_location], outputs=[location_inputs])
+            settings_btn.click(fn=lambda: gr.update(visible=True), outputs=[settings_modal])
+            close_set.click(fn=lambda: gr.update(visible=False), outputs=[settings_modal])
+            doc_btn.click(fn=lambda: gr.update(visible=True), outputs=[doc_modal])
+            close_doc_btn.click(fn=lambda: gr.update(visible=False), outputs=[doc_modal])
+            theme_btn.click(fn=None, js="() => { document.querySelector('.gradio-container').classList.toggle('theme-dark'); }")
 
-            # ---------------------------------------------------------------------
-            # Event 1: Analyze (Step 1)
-            # ---------------------------------------------------------------------
             analyze_event = analyze_btn.click(
                 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,
-                    reasoning_output, task_confirm_area, chat_input_area,
-                    chat_history_output, status_bar, input_area,
-                    *agent_displays, session_state
-                ]
-            )
+                inputs=[user_input, auto_loc, lat_in, lon_in, session_state],
+                outputs=[step1_container, step2_container, step3_container, s1_stream_output, task_list_box, task_summary_box, chatbot, session_state]
+            ).then(fn=lambda: update_stepper(2), outputs=[stepper])
 
-            # ---------------------------------------------------------------------
-            # Event 2: Chat
-            # ---------------------------------------------------------------------
-            chat_event = chat_send.click(
-                fn=self.chat_wrapper,
-                inputs=[chat_input, session_state],
-                outputs=[
-                    chat_history_output,  # 1. 對話框
-                    task_list_display,  # 2. 任務列表
-                    task_summary_display,  # 🔥 [Critical Fix] 3. 摘要卡片 (必須加這行!)
-                    session_state  # 4. Session
-                ]
-            ).then(fn=lambda: "", outputs=[chat_input])
-
-            # ---------------------------------------------------------------------
-            # Event 3: Planning Chain (Step 2 -> 3 -> 4)
-            # 使用 transition_to_planning 進行驗證，如果沒任務會自動停止
-            # ---------------------------------------------------------------------
-            step2_event = ready_plan_btn.click(
-                fn=self.transition_to_planning,
-                inputs=[session_state],
-                outputs=[
-                    task_confirm_area,
-                    chat_input_area,
-                    team_area,
-                    tabs,
-                    report_tab,  # 🔥 [新增] 這裡要接 report_tab
-                    map_tab,  # 🔥 [新增] 這裡要接 map_tab
-                    reasoning_output,
-                    status_bar,
-                    *agent_displays,
-                    session_state
-                ]
-            )
+            chat_send.click(fn=self.chat_wrapper, inputs=[chat_input, session_state], outputs=[chatbot, task_list_box, task_summary_box, session_state]).then(fn=lambda: "", outputs=[chat_input])
+            chat_input.submit(fn=self.chat_wrapper, inputs=[chat_input, session_state], outputs=[chatbot, task_list_box, task_summary_box, session_state]).then(fn=lambda: "", outputs=[chat_input])
 
-            step3_event = step2_event.then(
+            step3_start = plan_btn.click(
+                fn=lambda: (gr.update(visible=False), gr.update(visible=True), update_stepper(3)),
+                outputs=[step2_container, step3_container, stepper]
+            ).then(
                 fn=self.step3_wrapper,
                 inputs=[session_state],
-                outputs=[
-                    report_output,  # 1. 報告 Tab
-                    reasoning_output,  # 2. AI Conversation Log (這裡漏掉了!)
-                    *agent_displays,  # 3-8. Agent Grid (這裡也漏掉了!)
-                    session_state  # 9. Session
-                ]
-            )
-
-            step3_ui_update = step3_event.then(
-                fn=lambda: (gr.update(visible=True), gr.update(visible=True), gr.update(selected="report_tab")),
-                outputs=[report_tab, map_tab, tabs]
+                outputs=[agent_dashboard, planning_log, live_report_md, task_list_s3, session_state],
+                show_progress="hidden"
             )
 
-            step4_event = step3_ui_update.then(
+            step3_start.then(
                 fn=self.step4_wrapper,
                 inputs=[session_state],
+                # 🔥🔥🔥 關鍵修正：這裡列出了 7 個 Outputs，必須對應 Wrapper 回傳的 7 個值
                 outputs=[
-                    timeline_display, metrics_display, result_display,
-                    map_output, map_tab, team_area, status_bar, *agent_displays, session_state
+                    step3_container,      # 1. Hide Step 3
+                    step4_container,      # 2. Show Step 4
+                    summary_tab_output,   # 3. Summary Tab
+                    report_tab_output,    # 4. Report Tab
+                    task_list_tab_output, # 5. Task List Tab
+                    map_view,             # 6. Map
+                    session_state         # 7. State
                 ]
-            ).then(fn=lambda: gr.update(visible=True), outputs=[result_area])
-
-            # ---------------------------------------------------------------------
-            # Reset & Cancels
-            # ---------------------------------------------------------------------
-            reset_outputs = [
-                input_area, task_confirm_area, chat_input_area, result_area,
-                team_area, report_tab, map_tab, user_input,
-                agent_stream_output, status_bar,
-                task_summary_display, task_list_display, chat_history_output,
-                session_state
-            ]
-
-            home_btn.click(
-                fn=reset_app,
-                inputs=[session_state],
-                outputs=reset_outputs,
-                cancels=[analyze_event, step4_event, chat_event]
-            )
+            ).then(fn=lambda: update_stepper(4), outputs=[stepper])
 
-            exit_btn_inline.click(
-                fn=reset_app,
-                inputs=[session_state],
-                outputs=reset_outputs,
-                cancels=[analyze_event, step4_event, chat_event]
-            )
+            def reset_all(session_data):
+                old_session = UserSession.from_dict(session_data)
+                new_session = UserSession()
+                new_session.custom_settings = old_session.custom_settings
+                return (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), update_stepper(1), new_session.to_dict(), "")
+
+            home_btn.click(fn=reset_all, inputs=[session_state], outputs=[step1_container, step2_container, step3_container, step4_container, stepper, session_state, user_input])
+            back_btn.click(fn=reset_all, inputs=[session_state], outputs=[step1_container, step2_container, step3_container, step4_container, stepper, session_state, user_input])
+
+            save_set.click(fn=self.save_settings, inputs=[g_key, w_key, gem_key, model_sel, session_state], outputs=[set_stat, session_state, status_bar])
+            auto_loc.change(fn=toggle_location_inputs, inputs=auto_loc, outputs=loc_group)
+            demo.load(fn=self._check_api_status, inputs=[session_state], outputs=[status_bar])
 
-            # Others
-            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, gemini_api_key, model_choice, session_state],
-                outputs=[settings_status, session_state, status_bar]
-            )
-            theme_btn.click(fn=None,
-                            js="() => { document.querySelector('.gradio-container').classList.toggle('theme-dark'); }")
-            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])
-            demo.load(fn=initial_check, inputs=[session_state], outputs=[status_bar])
         return demo
 
+    def save_settings(self, g, w, gem, m, s_data):
+        sess = UserSession.from_dict(s_data)
+        sess.custom_settings.update({'google_maps_api_key': g, 'openweather_api_key': w, 'gemini_api_key': gem, 'model': m})
+        return "✅ Saved", sess.to_dict(), "Settings Updated"
 
 def main():
     app = LifeFlowAI()
     demo = app.build_interface()
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=True, show_error=True)
-
+    demo.launch(server_name="0.0.0.0", server_port=8080, share=True, show_error=True)
 
 if __name__ == "__main__":
     main()

core/session.py

@@ -1,22 +1,13 @@
 """
 LifeFlow AI - Session Management
-負責定義用戶會話的數據結構 (Model)
+✅ 新增 final_report 欄位，用於在 Step 3 和 Step 4 之間傳遞報告內容
 """
 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.agent.base import UserState
 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
@@ -27,24 +18,22 @@ class UserSession:
         self.chat_history: list = []
         self.planning_completed: bool = False
 
-        # 存儲位置信息（用於重新初始化 Agent）
+        # 🔥 新增：儲存 Step 3 生成的完整報告
+        self.final_report: str = ""
+
         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,
+            'final_report': self.final_report, # 🔥 序列化
             'lat': self.lat,
             'lng': self.lng,
             'custom_settings': self.custom_settings
@@ -52,13 +41,13 @@ class UserSession:
 
     @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.final_report = data.get('final_report', "") # 🔥 反序列化
         session.lat = data.get('lat')
         session.lng = data.get('lng')
         session.custom_settings = data.get('custom_settings', {})

core/visualizers.py

@@ -1,6 +1,7 @@
 """
-LifeFlow AI - Visualizers
-負責生成 Plotly 圖表物件 (完整版)
+LifeFlow AI - Visualizers (Fixed)
+✅ 確保 create_animated_map 永遠回傳 go.Figure 物件
+✅ 防止回傳字串導致 Gradio 崩潰
 """
 import plotly.graph_objects as go
 from core.helpers import decode_polyline
@@ -10,57 +11,49 @@ logger = get_logger(__name__)
 
 def create_animated_map(structured_data=None):
     """
-    生成 Plotly 地圖，包含真實道路軌跡 (Polyline)
-    :param structured_data: 從資料庫載入的完整行程資料
+    生成地圖物件。
+    注意：必須回傳 go.Figure()，絕對不能回傳字串！
     """
+    # 1. 初始化一個空地圖 (預設值)
     fig = go.Figure()
 
-    # 如果沒有數據，回傳預設地圖 (台北101周邊)
+    # 設定預設中心點 (台北101)
+    center_lat, center_lon = 25.033, 121.565
+    zoom_level = 13
+
+    # 2. 如果沒有數據，直接回傳空地圖
     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'
+            lat=[center_lat], lon=[center_lon],
+            mode='markers', marker=dict(size=0, opacity=0)
         ))
-        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 = []
-
+            # --- 繪製路線 (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_lats.extend([c[0] for c in decoded])
+                    route_lons.extend([c[1] for c in decoded])
+                    # 斷開不同路段
+                    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'
+                    lat=route_lats, lon=route_lons, mode='lines',
+                    line=dict(width=5, color='#6366f1'), # Primary Purple
+                    name='Route', hoverinfo='none'
                 ))
 
-            # 2. 繪製站點 (Markers)
+            # --- 繪製站點 (Markers) ---
             lats, lons, hover_texts, colors, sizes = [], [], [], [], []
 
             for i, stop in enumerate(timeline):
@@ -72,56 +65,48 @@ def create_animated_map(structured_data=None):
                     lats.append(lat)
                     lons.append(lng)
 
-                    # 構建 Hover Text
-                    name = stop.get("location", "Stop")
-                    time_str = stop.get("time", "")
+                    name = stop.get("location", f"Stop {i}")
+                    time = stop.get("time", "")
                     weather = stop.get("weather", "")
-                    text = f"<b>{i}. {name}</b><br>🕒 {time_str}<br>🌤️ {weather}"
+
+                    text = f"<b>{i+1}. {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)
+                        colors.append('#10b981'); sizes.append(20)
+                    elif i == len(timeline)-1:
+                        colors.append('#ef4444'); sizes.append(20)
                     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'
-            ))
-
-            # 計算中心點
+                        colors.append('#f59e0b'); sizes.append(15)
+
             if lats:
+                fig.add_trace(go.Scattermapbox(
+                    lat=lats, lon=lons, mode='markers+text',
+                    marker=dict(size=sizes, color=colors, allowoverlap=True),
+                    text=[str(i+1) 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'
+                ))
+
+                # 更新中心點為路徑中心
                 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
+            logger.error(f"Map generation error: {e}", exc_info=True)
+            # 發生錯誤時，保持回傳預設的 fig，不要讓程式崩潰
 
-    # 設定地圖樣式
+    # 3. 設定地圖樣式
     fig.update_layout(
         mapbox=dict(
             style='open-street-map',
             center=dict(lat=center_lat, lon=center_lon),
-            zoom=12
+            zoom=zoom_level
         ),
         margin=dict(l=0, r=0, t=0, b=0),
-        height=500,
+        height=700, # 地圖高度
         showlegend=False
     )
 

services/planner_service.py

@@ -12,15 +12,10 @@ from contextlib import contextmanager
 # 導入 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
 
@@ -422,10 +417,15 @@ class PlannerService:
             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"))
             summary_html = create_summary_card(len(session.task_list), high_priority, total_time)
+#
+
+            done_message = session.chat_history[-1]["message"].replace(
+                "🤔 AI is thinking...",
+                "✅ Tasks updated based on your request")
 
             session.chat_history[-1] = {
                 "role": "assistant",
-                "message": "✅ Tasks updated based on your request",
+                "message": done_message,
                 "time": datetime.now().strftime("%H:%M:%S")
             }
             self._add_reasoning(session, "planner", f"Updated: {user_message[:30]}...")
@@ -554,7 +554,8 @@ class PlannerService:
                 logger.info(f"Run time (s): {time.perf_counter() - start_time}")
 
             # 迴圈結束
-            report_html = f"## 🎯 Planning Complete\n\n{report_content}"
+            session.final_report = report_html = f"## 🎯 Planning Complete\n\n{report_content}"
+
             yield {
                 "type": "complete",
                 "report_html": report_html,
@@ -571,36 +572,105 @@ class PlannerService:
     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(f"No final result found , {session.session_id}")
+            if not final_ref_id: raise ValueError(f"No results found")
 
             structured_data = poi_repo.load(final_ref_id)
 
-            # 1. Timeline (右側 Tab)
+            # 1. Timeline
             timeline_html = create_timeline_html_enhanced(structured_data.get("timeline", []))
 
-            # 2. Metrics Cards (左側簡單指標) -> 使用新恢復的函數
+            # 2. Summary Card & Metrics (快樂表)
             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
+            print("metrics\n", metrics)
+
+            # 🔥 組合 Summary Tab 的內容
+            # 包含: 總結卡片 + 演算法快樂表 + 時間軸
+            task_count = len(session.task_list)
+            high_prio = sum(1 for t in session.task_list if t.get("priority") == "HIGH")
+            total_time = traffic.get("total_duration_min", 0)
+
+            summary_card = create_summary_card(task_count, high_prio, int(total_time))
+            metrics_viz = create_result_visualization(session.task_list, structured_data)
+
+            # 將三個元件合併為一個 HTML (用於 Summary Tab)
+            # 順序: Card -> Viz -> Timeline
+            full_summary_html = f"{summary_card}<br/>{metrics_viz}<br/><h3>📍 Timeline</h3>{timeline_html}"
+
+            task_count = len(session.task_list)
+            high_prio = sum(1 for t in session.task_list if t.get("priority") == "HIGH")
+
+            # 時間 (優先使用優化後的時間，如果沒有則用交通總時間)
+            total_time = metrics.get("optimized_duration_min", traffic.get("total_duration_min", 0))
+
+            # 距離 (公尺轉公里)
+            dist_m = metrics.get("optimized_distance_m", 0)
+            total_dist_km = dist_m / 1000.0
+
+            # 效率與節省 (用於快樂表)
+            efficiency = metrics.get("route_efficiency_pct", 0)
+            saved_dist_m = metrics.get("distance_saved_m", 0)
+            saved_time_min = metrics.get("time_saved_min", 0)
+
+            summary_card = create_summary_card(task_count, high_prio, int(total_time))
+
+            # B. 進階數據快樂表 (AI Efficiency & Distance)
+            # 根據效率分數改變顏色 (高於 80% 綠色，否則橘色)
+            eff_color = "#047857" if efficiency >= 80 else "#d97706"
+            eff_bg = "#ecfdf5" if efficiency >= 80 else "#fffbeb"
+            eff_border = "#a7f3d0" if efficiency >= 80 else "#fde68a"
+
+            ai_stats_html = f"""
+                        <div style="display: flex; gap: 12px; margin-bottom: 20px;">
+                            <div style="flex: 1; background: {eff_bg}; padding: 16px; border-radius: 12px; border: 1px solid {eff_border};">
+                                <div style="font-size: 0.8rem; color: {eff_color}; font-weight: 600; display: flex; align-items: center; gap: 4px;">
+                                    <span>🚀 AI EFFICIENCY</span>
+                                </div>
+                                <div style="font-size: 1.8rem; font-weight: 800; color: {eff_color}; line-height: 1.2;">
+                                    {efficiency:.1f}%
+                                </div>
+                                <div style="font-size: 0.75rem; color: {eff_color}; opacity: 0.9; margin-top: 4px;">
+                                    ⚡ Saved {saved_time_min:.0f} mins
+                                </div>
+                            </div>
+
+                            <div style="flex: 1; background: #eff6ff; padding: 16px; border-radius: 12px; border: 1px solid #bfdbfe;">
+                                <div style="font-size: 0.8rem; color: #2563eb; font-weight: 600;">🚗 TOTAL DISTANCE</div>
+                                <div style="font-size: 1.8rem; font-weight: 800; color: #1d4ed8; line-height: 1.2;">
+                                    {total_dist_km:.2f} <span style="font-size: 1rem;">km</span>
+                                </div>
+                                <div style="font-size: 0.75rem; color: #2563eb; opacity: 0.9; margin-top: 4px;">
+                                    📉 Reduced {saved_dist_m} m
+                                </div>
+                            </div>
+                        </div>
+                        """
+
+            full_summary_html = f"{summary_card}{ai_stats_html}<h3>📍 Itinerary Timeline</h3>{timeline_html}"
+
+            # C. 其他 Tab 內容
+            task_list_html = self.generate_task_list_html(session)
+
+            # 3. Map
             map_fig = create_animated_map(structured_data)
+            if isinstance(map_fig, str):
+                logger.error(f"CRITICAL: map_fig is a string ('{map_fig}'). Creating default map.")
+                from core.visualizers import create_animated_map as default_map_gen
+                map_fig = default_map_gen(None)
+
+            # 4. Task List
+            task_list_html = self.generate_task_list_html(session)
 
-            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,
+                "summary_tab_html": full_summary_html,  # 快樂表
+                "report_md": session.final_report,  # Full Report
+                "task_list_html": task_list_html,  # Task List
+                "map_fig": map_fig,  # Map
                 "session": session
             }
 

ui/components/header.py

@@ -1,30 +1,40 @@
 """
-LifeFlow AI - Header Component (Fixed Layout - Simplified)
+LifeFlow AI - Header Component (Optimized)
+✅ 修復佈局問題，使用 Row/Column 避免 fixed positioning
+✅ 響應式友好設計
 """
 import gradio as gr
 
 def create_header():
     """
-    創建 Header：
-    1. 功能鍵區 (懸浮固定 - 使用 elem_id 強制定位)
-    2. 標題區 (普通流式佈局)
+    創建優化後的 Header：
+    - 使用 Row/Column 佈局避免 fixed positioning 問題
+    - 響應式設計友好
+    - 按鈕水平排列
     """
-    # 1. 功能按鈕區
-    # 🔥 重點：移除內部的 gr.Row，只用 gr.Group，並給它一個唯一的 elem_id
-    with gr.Group(elem_id="floating-menu"):
-        home_btn = gr.Button("🏠", elem_classes="dock-btn")
-        theme_btn = gr.Button("🌓", elem_classes="dock-btn")
-        settings_btn = gr.Button("⚙️", elem_classes="dock-btn")
-        doc_btn = gr.Button("📖", elem_classes="dock-btn")
-
-    # 2. 左側標題區
-    with gr.Row(elem_classes="header-row"):
-        with gr.Column(scale=1):
+    with gr.Row(elem_classes="app-header-container"):
+        # 左側：Logo 和標題
+        with gr.Column(scale=4, min_width=300):
             gr.HTML("""
             <div class="app-header-left">
-                <h1 style="margin: 0; font-size: 1.8rem;">✨ LifeFlow AI</h1>
-                <p style="margin: 0; color: #64748b; font-size: 0.9rem;">Intelligent Trip Planner</p>
+                <h1 style="margin: 0; font-size: 2rem; font-weight: 800; 
+                    background: linear-gradient(to right, #6366f1, #ec4899);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;">
+                    ✨ LifeFlow AI
+                </h1>
+                <p style="margin: 5px 0 0 0; color: #64748b; font-size: 0.95rem;">
+                    Intelligent Trip Planner
+                </p>
             </div>
             """)
 
+        # 右側：功能按鈕
+        with gr.Column(scale=1, min_width=200):
+            with gr.Row(elem_classes="header-controls"):
+                home_btn = gr.Button("🏠", size="sm", elem_classes="header-btn")
+                theme_btn = gr.Button("🌓", size="sm", elem_classes="header-btn")
+                settings_btn = gr.Button("⚙️", size="sm", elem_classes="header-btn")
+                doc_btn = gr.Button("📖", size="sm", elem_classes="header-btn")
+
     return home_btn, theme_btn, settings_btn, doc_btn

ui/components/input_form.py

@@ -1,5 +1,6 @@
 """
-LifeFlow AI - Input Form Component (UX Improved)
+LifeFlow AI - Input Form Component (Fixed Layout)
+✅ 強制將 AI 狀態欄位移至按鈕上方
 """
 import gradio as gr
 
@@ -9,10 +10,18 @@ def create_input_form(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. 主要輸入區
+        # 這裡的 HTML 元件會顯示串流文字
+        agent_stream_output = gr.HTML(
+            value=agent_stream_html,
+            label="Agent Status",
+            elem_classes="agent-stream-box-step1",
+            visible=True  # 確保預設可見（即使是空的），佔據空間
+        )
+
+        gr.Markdown("---")
+
+        # 1. 主要輸入區
         user_input = gr.Textbox(
             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...",
@@ -20,26 +29,24 @@ def create_input_form(agent_stream_html):
             elem_id="main-input"
         )
 
-        # 3. 快速範例 (Quick Prompts) - UX 大加分
+        # 2. 位置設定
+        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)
+
+        # 3. 快速範例
         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."],
+                ["Plan a trip to visit Taipei 101, then have lunch at Din Tai Fung."],
                 ["Errands run: Post office, bank, and supermarket. Start at 10 AM, finish by 1 PM."]
             ],
             inputs=user_input,
             label="Quick Start Examples"
         )
 
-        gr.Markdown("---")
-
-        # 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)
 
         # 5. 主按鈕
         analyze_btn = gr.Button("🚀 Analyze & Plan Trip", variant="primary", size="lg")

ui/components/progress_stepper.py

@@ -0,0 +1,217 @@
+"""
+LifeFlow AI - Progress Stepper Component
+✅ 顯示用戶當前所在步驟
+✅ 視覺化流程進度
+"""
+import gradio as gr
+
+
+def create_progress_stepper(current_step: int = 1):
+    """
+    創建流程進度條
+
+    Args:
+        current_step: 當前步驟 (1-4)
+            1: Analyze
+            2: Confirm
+            3: Optimize
+            4: Review
+
+    Returns:
+        HTML 組件
+    """
+    steps = [
+        {'num': 1, 'label': 'Analyze', 'icon': '📋', 'desc': 'Extract tasks'},
+        {'num': 2, 'label': 'Confirm', 'icon': '✅', 'desc': 'Review & modify'},
+        {'num': 3, 'label': 'Optimize', 'icon': '⚡', 'desc': 'Route planning'},
+        {'num': 4, 'label': 'Review', 'icon': '🎉', 'desc': 'Check results'}
+    ]
+
+    html = '<div class="progress-stepper">'
+
+    for i, step in enumerate(steps):
+        is_active = step['num'] == current_step
+        is_complete = step['num'] < current_step
+
+        state_class = ''
+        if is_complete:
+            state_class = 'complete'
+        elif is_active:
+            state_class = 'active'
+
+        html += f"""
+        <div class="step {state_class}">
+            <div class="step-number">{step['icon']}</div>
+            <div class="step-label">{step['label']}</div>
+            <div class="step-desc">{step['desc']}</div>
+        </div>
+        """
+
+        # 添加連接線
+        if i < len(steps) - 1:
+            connector_class = 'complete' if is_complete else ''
+            html += f'<div class="step-connector {connector_class}"></div>'
+
+    html += '</div>'
+
+    # 內嵌樣式
+    css = """
+    <style>
+    .progress-stepper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px;
+        background: white;
+        border-radius: 16px;
+        margin-bottom: 24px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    .step {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        flex: 1;
+        min-width: 80px;
+    }
+
+    .step-number {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: #e2e8f0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        margin-bottom: 8px;
+    }
+
+    .step.active .step-number {
+        background: linear-gradient(135deg, #6366f1, #8b5cf6);
+        color: white;
+        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 4px 8px rgba(0, 0, 0, 0.15);
+        transform: scale(1.1);
+        animation: pulse-ring 2s infinite;
+    }
+
+    .step.complete .step-number {
+        background: #10b981;
+        color: white;
+        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+    }
+
+    .step-label {
+        margin-top: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: #64748b;
+        transition: color 0.3s;
+    }
+
+    .step.active .step-label {
+        color: #6366f1;
+        font-weight: 700;
+    }
+
+    .step.complete .step-label {
+        color: #10b981;
+    }
+
+    .step-desc {
+        font-size: 11px;
+        color: #94a3b8;
+        margin-top: 4px;
+        text-align: center;
+    }
+
+    .step-connector {
+        flex: 1;
+        height: 3px;
+        background: #e2e8f0;
+        margin: 0 8px;
+        transition: background 0.3s;
+        position: relative;
+        top: -20px;
+    }
+
+    .step-connector.complete {
+        background: #10b981;
+    }
+
+    @keyframes pulse-ring {
+        0% {
+            box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7), 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+        50% {
+            box-shadow: 0 0 0 8px rgba(99, 102, 241, 0), 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+        100% {
+            box-shadow: 0 0 0 0 rgba(99, 102, 241, 0), 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+    }
+
+    /* 響應式 */
+    @media (max-width: 768px) {
+        .progress-stepper {
+            padding: 16px 8px;
+        }
+
+        .step {
+            min-width: 60px;
+        }
+
+        .step-number {
+            width: 44px;
+            height: 44px;
+            font-size: 18px;
+        }
+
+        .step-label {
+            font-size: 12px;
+        }
+
+        .step-desc {
+            display: none;
+        }
+
+        .step-connector {
+            margin: 0 4px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .progress-stepper {
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+
+        .step-connector {
+            display: none;
+        }
+
+        .step {
+            flex-direction: row;
+            gap: 8px;
+            width: calc(50% - 6px);
+        }
+
+        .step-number {
+            width: 36px;
+            height: 36px;
+            font-size: 16px;
+        }
+    }
+    </style>
+    """
+
+    return gr.HTML(css + html)
+
+
+def update_stepper(step_number: int):
+    """更新進度條到指定步驟"""
+    return create_progress_stepper(step_number)

ui/renderers.py

@@ -1,508 +1,169 @@
-"""
-LifeFlow AI - UI Renderers
-負責生成 HTML 字串與前端展示元件
-"""
+# ui/renderers.py
 from datetime import datetime
 from config import AGENTS_INFO
 
 
-# ui/renderers.py
-
-def create_agent_stream_output(text: str = None) -> str:
-    """創建 Agent 串流輸出 HTML (支援動態傳入文字)"""
-
-    # 如果沒有傳入文字，顯示預設值
-    if not text:
-        display_content = 'Ready to analyze your tasks...<span class="stream-cursor"></span>'
-    else:
-        # 這裡直接使用傳入的 text
-        display_content = f'{text}<span class="stream-cursor"></span>'
-
-    return f"""
-    <div class="stream-container">
-        <div class="stream-text" style="white-space: pre-wrap; line-height: 1.6; min-height: 60px;">{display_content}</div>
-    </div>
-    <style>
-        .stream-text {{
-            font-family: 'Inter', sans-serif;
-            color: #334155;
-            font-size: 1.05rem;
-        }}
-        .stream-cursor {{
-            display: inline-block;
-            width: 8px;
-            height: 18px;
-            background-color: #6366f1;
-            margin-left: 5px;
-            animation: blink 1s infinite;
-            vertical-align: sub;
-        }}
-        @keyframes blink {{ 0%, 100% {{ opacity: 1; }} 50% {{ opacity: 0; }} }}
-    </style>
-    """
-
-
-def create_agent_card_enhanced(agent_key: str, status: str = "idle", message: str = "") -> str:
-    agent = AGENTS_INFO.get(agent_key, {})
-    color = agent.get("color", "#6366f1")
-
-    status_color = "#94a3b8"  # gray
-    active_class = ""
-
-    if status == "working":
-        status_color = "#f59e0b"  # orange
-        active_class = "working"  # 🔥 這裡對應 CSS 的動畫 class
-    elif status == "complete":
-        status_color = "#10b981"  # green
-
-    # 確保 active_class 被加入 div class 列表
-    return f"""
-    <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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">{message}</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>
-        """
+def _format_iso_time(iso_str: str) -> str:
+    if not iso_str or iso_str == "N/A": return ""
+    try:
+        dt = datetime.fromisoformat(iso_str)
+        return dt.strftime("%H:%M")
+    except Exception:
+        if "T" in iso_str: return iso_str.split("T")[1][:5]
+        return iso_str
 
-    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>
+def create_agent_stream_output(text: str = None) -> str:
+    return f'<div style="font-family: monospace; color: #334155;">{text}</div>'
+
+
+def create_agent_dashboard(status_dict: dict) -> str:
+    leader_key = 'team'
+    member_keys = ['scout', 'weatherman', 'optimizer', 'navigator', 'presenter']
+
+    def _render_card(key):
+        info = AGENTS_INFO.get(key, {})
+        state = status_dict.get(key, {})
+        status = state.get('status', 'idle')
+        msg = state.get('message', 'Standby')
+        active_class = "working" if status == "working" else ""
+        icon = info.get('icon', '🤖')
+        name = info.get('name', key.title())
+        role = info.get('role', 'Agent')
+        color = info.get('color', '#6366f1')
+
+        return f"""
+        <div class="agent-card-wrap {active_class}">
+            <div class="agent-card-inner" style="border-top: 3px solid {color}">
+                <div class="agent-avatar">{icon}</div>
+                <div class="agent-name">{name}</div>
+                <div class="agent-role">{role}</div>
+                <div class="status-badge">{msg}</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>
+    html = f"""
+    <div class="agent-war-room">
+        <div class="org-chart">
+            <div class="org-level">
+                {_render_card(leader_key)}
             </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 class="connector-line"></div>
+            <div class="connector-horizontal"></div>
+            <div class="org-level">
+                {''.join([_render_card(k) for k in member_keys])}
             </div>
         </div>
-        """
-    html += '</div>'
+    </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"
-    }
-
-    # 處理 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_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:
-            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")
 
+def create_summary_card(total_tasks: int, high_priority: int, total_time: int, location: str = "Taipei City",
+                        date: str = "Today") -> str:
     return f"""
-    <div class="task-card" style="--task-priority-color: {task_color};">
-        <div class="task-header">
-            <div class="task-title">
-                <span class="task-icon">{icon}</span>
-                <span>#{task_num}: {task_title}</span>
-            </div>
-            <span class="priority-badge {priority_class}">{priority}</span>
-        </div>
-        <div class="task-details">
-            <div class="task-detail-item">
-                <span>🕐</span>
-                <span>{display_time}</span>
-            </div>
-            <div class="task-detail-item">
-                <span>⏱️</span>
-                <span>{duration}</span>
+    <div style="background: #f8fafc; border-radius: 12px; padding: 16px; margin-bottom: 20px; border: 1px solid #e2e8f0;">
+        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px;">
+            <div>
+                <div style="font-size: 0.8rem; color: #64748b; font-weight: 600;">TRIP SUMMARY</div>
+                <div style="font-size: 1.1rem; font-weight: 700; color: #1e293b;">{location}</div>
+                <div style="font-size: 0.9rem; color: #6366f1;">📅 {date}</div>
             </div>
-            <div class="task-detail-item">
-                <span>📍</span>
-                <span>{location}</span>
+            <div style="text-align: right;">
+                <div style="font-size: 2rem; font-weight: 800; color: #6366f1; line-height: 1;">{total_tasks}</div>
+                <div style="font-size: 0.8rem; color: #64748b;">Tasks</div>
             </div>
         </div>
-    </div>
-    """
-
-def create_summary_card(total_tasks: int, high_priority: int, total_time: int) -> str:
-    return f"""
-    <div class="summary-card">
-        <h3 style="margin: 0 0 15px 0; font-size: 20px;">📋 Task Summary</h3>
-        <div class="summary-stats">
-            <div class="stat-item">
-                <span class="stat-value">{total_tasks}</span>
-                <span class="stat-label">Tasks</span>
-            </div>
-            <div class="stat-item">
-                <span class="stat-value">{high_priority}</span> 
-                <span class="stat-label">High Priority</span>
-            </div>
-            <div class="stat-item">
-                <span class="stat-value">{total_time}</span>
-                <span class="stat-label">min total</span>
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
+            <div style="background: white; padding: 8px; border-radius: 8px; text-align: center; border: 1px solid #e2e8f0;">
+                <div style="font-size: 0.8rem; color: #64748b;">Duration</div>
+                <div style="font-weight: 600; color: #334155;">{total_time} min</div>
             </div>
-        </div>
-    </div>
-    """
-
-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:]):
-        agent_info = AGENTS_INFO.get(msg.get('agent', 'planner'), {})
-        color = agent_info.get('color', '#4A90E2')
-        avatar = agent_info.get('avatar', '🤖')
-
-        items_html += f"""
-        <div class="reasoning-item" style="--agent-color: {color};">
-            <div class="reasoning-header">
-                <span>{avatar}</span>
-                <span class="reasoning-agent">{msg.get('agent', 'Agent')}</span>
-                <span class="reasoning-time">{msg.get('time', '')}</span>
+            <div style="background: white; padding: 8px; border-radius: 8px; text-align: center; border: 1px solid #e2e8f0;">
+                <div style="font-size: 0.8rem; color: #64748b;">High Prio</div>
+                <div style="font-weight: 600; color: #ef4444;">{high_priority}</div>
             </div>
-            <div class="reasoning-content">{msg.get('message', '')}</div>
-        </div>
-        """
-
-    return f'<div class="reasoning-timeline">{items_html}</div>'
-
-def create_celebration_animation() -> str:
-    """創建慶祝動畫（純 CSS 撒花效果）"""
-    import random
-    confetti_html = ""
-    colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2']
-
-    for i in range(100):
-        left = random.randint(0, 100)
-        delay = random.uniform(0, 2)
-        duration = random.uniform(3, 6)
-        rotation = random.randint(0, 360)
-        color = random.choice(colors)
-        size = random.randint(8, 15)
-
-        confetti_html += f"""
-        <div class="confetti" style="
-            left: {left}%;
-            animation-delay: {delay}s;
-            animation-duration: {duration}s;
-            background-color: {color};
-            width: {size}px;
-            height: {size}px;
-            transform: rotate({rotation}deg);
-        "></div>
-        """
-
-    return f"""
-    <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; }}
-    }}
-    @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;
-        animation: celebration-fade 6s forwards;
-    }}
-    .confetti {{
-        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"
-
-    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>
     """
-    # 注意：請確保將完整的 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 = {}
+def create_task_card(task_num: int, task_title: str, priority: str, time_window: dict, duration: str, location: str,
+                     icon: str = "📋") -> str:
+    p_color = {"HIGH": "#ef4444", "MEDIUM": "#f59e0b", "LOW": "#10b981"}.get(priority.upper(), "#94a3b8")
 
-    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"
+    display_time = "Anytime"
+    if isinstance(time_window, dict):
+        s_clean = _format_iso_time(time_window.get('earliest_time', ''))
+        e_clean = _format_iso_time(time_window.get('latest_time', ''))
+        if s_clean and e_clean:
+            display_time = f"{s_clean} - {e_clean}"
+        elif s_clean:
+            display_time = f"After {s_clean}"
+    elif time_window:
+        display_time = str(time_window)
 
     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 class="task-card-item" style="border-left: 4px solid {p_color};">
+        <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+            <div style="font-weight: 700; color: #334155; display: flex; align-items: center; gap: 8px;">
+                <span style="background:#f1f5f9; padding:4px; border-radius:6px;">{icon}</span> 
+                {task_title}
+            </div>
+            <span style="font-size: 0.7rem; font-weight: 700; color: {p_color}; background: {p_color}15; padding: 2px 8px; border-radius: 12px; height: fit-content;">{priority}</span>
         </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 style="font-size: 0.85rem; color: #64748b; display: flex; flex-direction: column; gap: 4px;">
+            <div style="display: flex; align-items: center; gap: 6px;"><span>📍</span> {location}</div>
+            <div style="display: flex; align-items: center; gap: 6px;"><span>🕒</span> {display_time} <span style="color:#cbd5e1">|</span> ⏳ {duration}</div>
         </div>
     </div>
     """
 
 
-# 🔥 [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", [])
-
-    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"
-
-    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">
-            <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;">
-            <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">📊 Quick Summary</h3>
-            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
-                <div class="summary-metric">
-                    <div class="metric-icon">🎯</div>
-                    <div class="metric-content">
-                        <div class="metric-value">{completed_tasks} / {total_tasks}</div>
-                        <div class="metric-label">Tasks Completed</div>
-                    </div>
-                </div>
-                <div class="summary-metric">
-                    <div class="metric-icon">⏱️</div>
-                    <div class="metric-content">
-                        <div class="metric-value">{time_str}</div>
-                        <div class="metric-label">Total Duration</div>
-                    </div>
-                </div>
-                <div class="summary-metric">
-                    <div class="metric-icon">🚗</div>
-                    <div class="metric-content">
-                        <div class="metric-value">{total_dist_km:.1f} km</div>
-                        <div class="metric-label">Total Distance</div>
-                    </div>
-                </div>
-                <div class="summary-metric success">
-                    <div class="metric-icon">⚡</div>
-                    <div class="metric-content">
-                        <div class="metric-value">{efficiency:.0f}%</div>
-                        <div class="metric-label">Efficiency Score</div>
-                    </div>
-                </div>
-            </div>
+# 🔥🔥🔥 Updated Timeline Function
+def create_timeline_html_enhanced(timeline):
+    if not timeline:
+        return """
+        <div style="text-align: center; padding: 20px; color: #94a3b8;">
+            No timeline data available yet.
         </div>
+        """
 
-        <div class="timeline-preview" style="margin-top: 25px;">
-            <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">🗓️ Timeline Preview</h3>
-            <div class="timeline-container">
-    """
-
-    # 綁定時間線數據
+    html = '<div class="timeline-container">'
     for i, stop in enumerate(timeline):
-        time = stop.get("time", "")
-        loc_name = stop.get("location", "")
-        weather = stop.get("weather", "")
+        location = stop.get('location', 'Unknown')
+        time_str = stop.get('time', '')
+        if not time_str or time_str == "N/A": time_str = "Flexible Time"
 
-        icon = "🏁" if i == 0 else ("🔚" if i == len(timeline) - 1 else "📍")
+        weather_str = stop.get('weather', '')
+        weather_html = ""
+        if weather_str and weather_str != "N/A":
+            weather_html = f'<div class="timeline-meta">🌤️ {weather_str}</div>'
 
         html += f"""
-                <div class="timeline-item">
-                    <div class="timeline-time">{time}</div>
-                    <div class="timeline-connector">━━</div>
-                    <div class="timeline-task">
-                        <span class="timeline-icon">{icon}</span>
-                        <div class="timeline-info">
-                            <span class="timeline-title">{loc_name}</span>
-                            <span class="timeline-meta">{weather}</span>
-                        </div>
-                    </div>
+        <div class="timeline-stop">
+            <div class="timeline-left">
+                <div class="timeline-marker"></div>
+            </div>
+            <div class="timeline-card">
+                <div class="timeline-header">
+                    <div class="timeline-location">{location}</div>
+                    <div class="timeline-time-badge">🕒 {time_str}</div>
                 </div>
+                {weather_html}
+            </div>
+        </div>
         """
+    html += '</div>'
+    return html
 
-        if i < len(timeline) - 1:
-            next_travel = timeline[i + 1].get("travel_time_from_prev", "0 mins")
-            html += f"""
-                <div class="timeline-travel">
-                    <div class="travel-arrow">↓</div>
-                    <div class="travel-time">Drive: {next_travel}</div>
-                </div>
-            """
 
-    html += """
-            </div>
-        </div>
+# Empty Placeholders
+def create_metrics_cards(metrics, traffic): return ""
 
-        <div class="optimization-metrics" style="margin-top: 25px;">
-            <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">📈 Optimization Metrics</h3>
-            <div class="metrics-grid">
-    """
 
-    viz_metrics = [
-        ("Route Efficiency", efficiency, "#50C878"),
-        ("Time Saved", time_saved_pct, "#4A90E2"),
-        ("Distance Reduced", dist_saved_pct, "#F5A623")
-    ]
+def create_result_visualization(tasks, data): return ""
 
-    for label, value, color in viz_metrics:
-        if value is None: value = 0
-        display_val = min(max(value, 0), 100)
-        html += f"""
-                <div class="metric-bar">
-                    <div class="metric-bar-header">
-                        <span class="metric-bar-label">{label}</span>
-                        <span class="metric-bar-value">{value:.1f}%</span>
-                    </div>
-                    <div class="metric-bar-track">
-                        <div class="metric-bar-fill" style="width: {display_val}%; background: {color};"></div>
-                    </div>
-                </div>
-        """
 
-    html += f"""
-            </div>
-            <div class="optimization-stats" style="margin-top: 15px; display: flex; gap: 20px; flex-wrap: wrap;">
-                <div class="stat-badge">
-                    <span class="stat-badge-icon">⏱️</span>
-                    <span class="stat-badge-text">Saved: <strong>{time_saved_val} min</strong></span>
-                </div>
-                <div class="stat-badge">
-                    <span class="stat-badge-icon">📏</span>
-                    <span class="stat-badge-text">Reduced: <strong>{dist_saved_val_km:.1f} km</strong></span>
-                </div>
-            </div>
-        </div>
-    </div>
-    """
-    return html
+def generate_chat_history_html_bubble(session): return ""

ui/theme.py

@@ -1,391 +1,354 @@
-"""
-LifeFlow AI - Theme System
-提供現代化、毛玻璃風格的主題和樣式管理
-"""
+# ui/theme.py
+# ui/theme.py
 
 def get_enhanced_css() -> str:
     return """
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <style>
+    /* ============= CSS Variables ============= */
     :root {
-        --primary-color: #6366f1; /* Indigo */
+        --primary-color: #6366f1;
         --primary-dark: #4f46e5;
-        --secondary-color: #10b981; /* Emerald */
-        --accent-color: #f59e0b; /* Amber */
-        --background-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        --secondary-color: #10b981;
+        --accent-color: #f59e0b;
+        --danger-color: #ef4444;
         --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;
+        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+        --radius-sm: 8px;
         --radius-md: 12px;
+        --radius-lg: 16px;
+        --radius-xl: 20px;
         --font-main: 'Inter', sans-serif;
     }
 
+    /* ============= Base Styles ============= */
     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);
+        background: #f8fafc !important;
     }
 
-    /* ============= 標題優化 ============= */
-    .app-header {
-        text-align: center;
-        padding: 40px 0 20px;
-        animation: fade-in 0.8s ease-out;
-    }
-    .app-header h1 {
-        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;
-        margin-bottom: 0.5rem !important;
-        letter-spacing: -0.02em;
-    }
-    .app-header p {
-        font-size: 1.2rem !important;
-        color: #64748b;
-        font-weight: 400;
-    }
-    
-    /* ============= Header 優化 (Flex Layout) ============= */
-    .header-row {
+    * { box-sizing: border-box; }
+
+    /* ============= 1. Header (保留 Backup 樣式) ============= */
+    .app-header-container {
         align-items: center !important;
-        margin-bottom: 20px !important;
-        padding: 10px 20px !important;
-        background: rgba(255, 255, 255, 0.5);
-        backdrop-filter: blur(10px);
-        border-radius: 16px;
-        border: 1px solid rgba(255, 255, 255, 0.5);
-    }
-    .app-header-left h1 {
-        background: linear-gradient(to right, #6366f1, #ec4899);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
-    
-    /* 按鈕微調 */
-    .icon-btn {
-        background: transparent !important;
-        border: 1px solid #e2e8f0 !important;
-        box-shadow: none !important;
-    }
-    .icon-btn:hover {
-        background: #f1f5f9 !important;
-        border-color: #cbd5e1 !important;
-    }
-    
-    /* ============= 懸浮功能選單 (Fixed Top-Right) ============= */
-    #floating-menu {
-        position: fixed !important;
-        top: 20px !important;
-        right: 20px !important;
-        z-index: 99999 !important;
-        
-        /* 外觀 */
-        background: rgba(255, 255, 255, 0.95) !important;
-        backdrop-filter: blur(12px);
-        border: 1px solid rgba(255, 255, 255, 0.8);
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-        border-radius: 50px !important;
-        padding: 5px 10px !important;
-        
-        /* 🔥 核彈級排版修正：使用 Grid 🔥 */
-        display: grid !important;
-        /* 強制分為 4 個欄位，每個欄位寬度自動 */
-        grid-template-columns: auto auto auto auto !important;
-        gap: 8px !important;
-        
-        /* 強制重置寬度，不讓它佔滿 */
-        width: fit-content !important;
-        min-width: auto !important;
+        margin-bottom: 24px !important;
+        padding: 16px 24px !important;
+        background: rgba(255, 255, 255, 0.8) !important;
+        backdrop-filter: blur(12px) !important;
+        -webkit-backdrop-filter: blur(12px) !important;
+        border-radius: var(--radius-lg) !important;
+        border: 1px solid rgba(255, 255, 255, 0.5) !important;
+        box-shadow: var(--shadow-md) !important;
     }
 
-    /* 2. 強制重置 Gradio 內部的 Layout 容器 */
-    #floating-menu > * {
-        display: contents !important; /* 忽略中間層的 div，直接讓按鈕參與 Grid 排列 */
+    .app-header-left {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
     }
 
-    /* 3. 按鈕本體設定 */
-    .dock-btn {
+    .header-controls {
         display: flex !important;
+        gap: 8px !important;
+        justify-content: flex-end !important;
         align-items: center !important;
-        justify-content: center !important;
-        
-        width: 40px !important;
-        height: 40px !important;
-        border-radius: 50% !important;
-        
-        background: transparent !important;
-        border: none !important;
-        box-shadow: none !important;
-        
-        margin: 0 !important;
-        padding: 0 !important;
-        font-size: 1.2rem !important;
-    }
-    
-    .dock-btn:hover {
-        background: #f1f5f9 !important;
-        transform: translateY(-2px);
-        transition: all 0.2s ease;
+        width: 100%;
     }
 
-    /* 🔥 強制重置 Gradio 內部包裝層 🔥 */
-    /* 這是造成垂直排列的主因，Gradio 預設會把元件包在 width:100% 的 div 裡 */
-    .header-controls > * {
-        min-width: auto !important;
-        width: auto !important;
-        flex: 0 0 auto !important;
-        margin: 0 !important;
+    .header-btn {
+        min-width: 44px !important;
+        max-width: 44px !important;
+        height: 44px !important;
         padding: 0 !important;
-        border: none !important;
-        background: transparent !important;
-    }
-
-    /* 按鈕本體樣式優化 */
-    .header-controls button {
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        
-        width: 38px !important;   /* 固定按鈕大小 */
-        height: 38px !important;
         border-radius: 50% !important;
-        
         background: transparent !important;
-        border: 1px solid transparent !important;
+        border: 1px solid #e2e8f0 !important;
         box-shadow: none !important;
-        padding: 0 !important;
-        font-size: 1.2rem !important;
-        line-height: 1 !important;
+        font-size: 1.25rem !important;
         color: #64748b !important;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        cursor: pointer !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
     }
-    
-    .header-controls button:hover {
+
+    .header-btn:hover {
         background: #f1f5f9 !important;
-        color: #6366f1 !important;
-        transform: translateY(-1px);
-        transition: all 0.2s ease;
-        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
+        border-color: var(--primary-color) !important;
+        color: var(--primary-color) !important;
+        transform: translateY(-2px) !important;
+        box-shadow: var(--shadow-md) !important;
+    }
+
+    .header-btn:active {
+        transform: translateY(0) !important;
     }
 
-    /* ============= Agent 呼吸動畫 (關鍵修改) ============= */
+    /* ============= 2. Animations & Agent Cards (保留 Backup 樣式) ============= */
     @keyframes breathing-glow {
-        0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); border-color: #6366f1; }
-        70% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); border-color: #818cf8; }
-        100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); border-color: #6366f1; }
+        0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.6), 0 0 20px rgba(99, 102, 241, 0.3); border-color: #6366f1; }
+        50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0), 0 0 30px rgba(99, 102, 241, 0.5); border-color: #818cf8; }
+        100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0), 0 0 20px rgba(99, 102, 241, 0.3); border-color: #6366f1; }
     }
 
-    .agent-card-mini.working {
-        animation: breathing-glow 2s infinite;
-        background: linear-gradient(to bottom right, #fff, #eff6ff);
-        transform: scale(1.05); /* 稍微放大 */
-        z-index: 10;
-    }
-    
-    /* ============= AI Conversation 優化 ============= */
-    .reasoning-timeline {
-        max-height: 400px;
-        overflow-y: auto;
-        padding-right: 10px;
-        /* 讓最新的訊息看起來像是在終端機中彈出 */
-        display: flex; 
-        flex-direction: column-reverse; 
-    }
-
-    /* ============= 按鈕優化 ============= */
-    button.primary {
-        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
-        border: none !important;
-        box-shadow: 0 4px 6px rgba(99, 102, 241, 0.3) !important;
-        transition: all 0.2s ease !important;
-    }
-    button.primary:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 12px rgba(99, 102, 241, 0.4) !important;
+    @keyframes pulse-scale {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.03); }
     }
 
-    /* ============= Agent 狀態卡片 (Grid Layout) ============= */
+    /* Agent Grid (用於 Step 3 的 Agent 卡片基礎) */
     .agent-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
         gap: 12px;
         margin-top: 10px;
     }
+
     .agent-card-mini {
         background: white;
-        padding: 10px;
+        padding: 12px;
         border-radius: var(--radius-md);
-        border: 1px solid #e2e8f0;
+        border: 2px solid #e2e8f0;
         display: flex;
         flex-direction: column;
         align-items: center;
         text-align: center;
-        transition: all 0.3s ease;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        overflow: hidden;
     }
-    .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-card-mini.working {
+        animation: breathing-glow 2s ease-in-out infinite !important;
+        background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
+        border-width: 2px !important;
+        z-index: 10 !important;
+        position: relative !important;
     }
-    .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;
+
+    .agent-card-mini.working::before {
+        content: '';
+        position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
+        background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
+        animation: pulse-scale 2s ease-in-out infinite;
     }
 
-    /* ============= 對話框樣式 (Chat Bubbles) ============= */
+    .agent-card-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
+    .agent-avatar-mini { font-size: 28px; margin-bottom: 6px; position: relative; z-index: 1; }
+    .agent-name-mini { font-weight: 600; font-size: 0.85rem; color: #1e293b; position: relative; z-index: 1; }
+    .agent-status-dot { height: 8px; width: 8px; border-radius: 50%; display: inline-block; margin-top: 6px; position: relative; z-index: 1; }
+
+    /* ============= 3. Chat & Tasks (保留 Backup 樣式) ============= */
     .chat-history {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-        padding: 20px;
-        background: #fff;
-        border-radius: var(--radius-lg);
+        display: flex; flex-direction: column; gap: 16px; padding: 20px;
+        background: #fff; border-radius: var(--radius-lg); border: 1px solid #e2e8f0;
+        max-height: 500px; overflow-y: auto;
+    }
+    .chat-message { display: flex; align-items: flex-end; gap: 10px; max-width: 85%; animation: fade-in 0.3s ease-out; }
+    .chat-message.user { align-self: flex-end; flex-direction: row-reverse; }
+    .chat-message.assistant { align-self: flex-start; }
+    .chat-bubble { padding: 12px 16px; border-radius: 18px; font-size: 0.95rem; line-height: 1.5; position: relative; box-shadow: var(--shadow-sm); }
+    .chat-message.user .chat-bubble { background: var(--primary-color); color: white; border-bottom-right-radius: 4px; }
+    .chat-message.assistant .chat-bubble { background: #f1f5f9; color: #334155; border-bottom-left-radius: 4px; }
+    .chat-time { font-size: 0.7rem; opacity: 0.7; margin-top: 4px; text-align: right; }
+
+    /* Task Cards */
+    .task-card-item {
+        background: white;
         border: 1px solid #e2e8f0;
-        max-height: 500px;
-        overflow-y: auto;
-    }
-    .chat-message {
-        display: flex;
-        align-items: flex-end;
-        gap: 10px;
-        max-width: 85%;
-    }
-    .chat-message.user {
-        align-self: flex-end;
-        flex-direction: row-reverse;
-    }
-    .chat-message.assistant {
-        align-self: flex-start;
-    }
-    .chat-bubble {
-        padding: 12px 16px;
-        border-radius: 18px;
-        font-size: 0.95rem;
-        line-height: 1.5;
-        position: relative;
-    }
-    .chat-message.user .chat-bubble {
-        background: var(--primary-color);
-        color: white;
-        border-bottom-right-radius: 4px;
-    }
-    .chat-message.assistant .chat-bubble {
-        background: #f1f5f9;
-        color: #334155;
-        border-bottom-left-radius: 4px;
+        border-radius: 12px;
+        padding: 16px;
+        margin-bottom: 12px;
+        transition: transform 0.2s;
     }
-    .chat-time {
-        font-size: 0.7rem;
-        opacity: 0.7;
-        margin-top: 4px;
-        text-align: right;
+    .task-card-item:hover {
+        border-color: var(--primary-color);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     }
 
-    /* ============= Timeline 優化 ============= */
+    /* ============= 4. Timeline Redesign (Step 4 修正) ============= */
     .timeline-container {
         position: relative;
-        padding: 20px 0;
+        padding: 10px 0 10px 20px;
+        margin-top: 10px;
     }
+
+    /* 垂直連接線 */
     .timeline-container::before {
         content: '';
         position: absolute;
-        left: 24px;
-        top: 30px;
-        bottom: 30px;
+        left: 29px;
+        top: 20px;
+        bottom: 20px;
         width: 2px;
         background: #e2e8f0;
         z-index: 0;
     }
+
+    /* 時間軸項目 - 強制橫排 */
     .timeline-item {
         position: relative;
-        display: flex;
+        display: flex !important;
+        flex-direction: row !important;
         gap: 20px;
         margin-bottom: 24px;
         z-index: 1;
+        align-items: stretch;
     }
+
+    /* 左側圓點 */
     .timeline-left {
-        min-width: 50px;
         display: flex;
         flex-direction: column;
         align-items: center;
+        min-width: 20px;
+        padding-top: 4px;
     }
-    .timeline-icon-box {
-        width: 48px;
-        height: 48px;
+
+    .timeline-marker {
+        width: 20px;
+        height: 20px;
         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);
+        border: 4px solid var(--primary-color);
+        box-shadow: 0 0 0 4px #fff;
+        z-index: 2;
     }
-    .timeline-content-card {
+
+    /* 右側卡片 */
+    .timeline-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;
+        background: white !important;
+        border: 1px solid #e2e8f0 !important;
+        border-radius: 12px !important;
+        padding: 16px !important;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+        transition: transform 0.2s, box-shadow 0.2s;
+        display: block !important;
     }
-    .timeline-content-card:hover {
+
+    .timeline-card:hover {
         transform: translateX(4px);
-        border-color: var(--primary-color);
+        box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
+        border-color: var(--primary-color) !important;
     }
 
-    /* ============= Metric Cards ============= */
-    .metrics-container {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 15px;
-        margin-bottom: 20px;
+    .timeline-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 8px;
+        gap: 10px;
+    }
+
+    .timeline-location { font-size: 1rem; font-weight: 700; color: #1e293b; line-height: 1.3; }
+
+    .timeline-time-badge {
+        background: #f1f5f9; color: #64748b; font-size: 0.75rem; font-weight: 600;
+        padding: 4px 10px; border-radius: 20px; white-space: nowrap; display: flex; align-items: center; gap: 4px;
+    }
+
+    .timeline-meta {
+        display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #64748b;
+        background: #f8fafc; padding: 8px; border-radius: 8px; margin-top: 8px;
     }
-    .metric-card {
+
+    .timeline-item:first-child .timeline-marker { border-color: #10b981 !important; }
+    .timeline-item:last-child .timeline-marker { border-color: #ef4444 !important; }
+
+    /* ============= 5. Step 3 War Room (新樣式) ============= */
+    .live-report-wrapper {
+        flex: 1;
         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);
-    }
-    .metric-value {
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: #1e293b;
-        margin: 5px 0;
+        border-radius: 16px;
+        padding: 30px;
+        min-height: 600px;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
     }
 
-    /* ============= 動畫定義 ============= */
-    @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); } }
+    .report-title {
+        font-size: 1.2rem; font-weight: 700; color: #1e293b;
+        margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
+        border-bottom: 2px solid #f1f5f9; padding-bottom: 12px;
+    }
 
-    /* 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;
+    .war-room-wrapper {
+        width: 450px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 20px;
     }
-    .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark p, .theme-dark span {
-        color: #e2e8f0 !important;
+
+    .agent-war-room {
+        background: white; border-radius: 16px; border: 1px solid #e2e8f0; padding: 24px;
+        display: flex; flex-direction: column; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05);
     }
-    .theme-dark .chat-message.assistant .chat-bubble {
-        background: #334155;
-        color: #e2e8f0;
+
+    .org-chart { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; }
+    .org-level { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; z-index: 2; }
+    .connector-line { width: 2px; height: 20px; background: #cbd5e1; }
+    .connector-horizontal { height: 2px; width: 80%; background: #cbd5e1; margin-top: -20px; margin-bottom: 10px; }
+
+    /* Step 3 的 Agent Card (複用 mini card 但調整寬度) */
+    .agent-card-wrap { width: 110px; text-align: center; display: flex; flex-direction: column; align-items: center; }
+    .agent-card-inner {
+        background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px;
+        display: flex; flex-direction: column; align-items: center; width: 100%; transition: transform 0.2s;
+    }
+    .agent-card-wrap.working .agent-card-inner {
+        background: white; border-color: #6366f1;
+        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15); animation: pulse 2s infinite;
+    }
+    .agent-avatar { font-size: 24px; margin-bottom: 4px; }
+    .agent-name { font-weight: 700; font-size: 0.8rem; color: #1e293b; }
+    .agent-role { font-size: 0.65rem; color: #64748b; text-transform: uppercase; }
+    .status-badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 8px; background: #e2e8f0; color: #64748b; margin-top: 4px; }
+    .agent-card-wrap.working .status-badge { background: #e0e7ff; color: #6366f1; }
+
+    /* ============= 6. Utils & Layouts ============= */
+    .step-container { max-width: 1400px; margin: 0 auto; padding: 0 16px; animation: fade-in 0.4s ease-out; }
+    .centered-input-container { max-width: 1000px !important; margin: 0 auto; padding: 40px 0; }
+
+    .panel-container { background: white; border: 1px solid #e2e8f0; border-radius: 16px; height: 650px !important; display: flex !important; flex-direction: column !important; overflow: hidden; }
+    .panel-header { padding: 16px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-weight: 700; color: var(--text-main); flex-shrink: 0; }
+    .scrollable-content { flex: 1; overflow-y: auto !important; padding: 20px; background: #fff; }
+
+    .chat-input-row { padding: 12px !important; border-top: 1px solid #e2e8f0; background: white; align-items: center !important; }
+
+    .split-view-container { display: flex; gap: 24px; height: calc(100vh - 140px); min-height: 600px; }
+    .split-left-panel { flex: 1; overflow-y: auto; }
+    .split-right-panel { flex: 2; position: sticky; top: 100px; height: 100%; }
+
+    /* Animations */
+    @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes slide-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
+    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
+
+    /* Scrollbar */
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+
+    /* Dark Mode Support */
+    .theme-dark body, .theme-dark .gradio-container { background: #0f172a !important; }
+    .theme-dark .app-header-container, .theme-dark .chat-history, .theme-dark .timeline-card, .theme-dark .metric-card, .theme-dark .agent-card-mini, .theme-dark .agent-card-inner, .theme-dark .live-report-wrapper, .theme-dark .agent-war-room, .theme-dark .task-card-item {
+        background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important;
+    }
+    .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark p, .theme-dark span, .theme-dark .agent-name { color: #e2e8f0 !important; }
+    .theme-dark .chat-message.assistant .chat-bubble { background: #334155 !important; color: #e2e8f0 !important; }
+    .theme-dark .agent-name-mini, .theme-dark .metric-card h3 { color: #cbd5e1 !important; }
+
+    /* Step 1 Log */
+    .agent-stream-box-step1 {
+        background: #f8fafc; border-radius: 8px; padding: 12px; border: 1px solid #e2e8f0;
+        min-height: 60px; max-height: 150px; overflow-y: auto; font-family: monospace; font-size: 0.9rem;
+        margin-bottom: 16px; margin-top: 10px;
     }
     </style>
     """