Release v1.0.0: Hybrid AI Architecture, Modern UI Overhaul, and Performance Optimizations

# 🚀 Major Features: Hybrid AI Architecture
- **Dual-Brain System**: Implemented "Primary Brain" (GPT-4o/Gemini) for complex reasoning and "Acceleration Layer" (Groq/Llama-3) for fast tool execution.
- **Model Allowlist**: Integrated `MODEL_OPTIONS` in `config.py` with tiered selection (Efficiency vs. Flagship).
- **Fast Mode**: Added toggle to offload heavy tasks (Scout/Navigator) to Groq/Llama-3-70B, reducing costs and latency.

# 🎨 UI/UX: Modern Redesign & Workflow
- **Settings Modal Revamp**:
- Redesigned with a "Purple/Gradient" theme for a professional look.
- Split configuration into "Services", "Primary Brain", and "Acceleration" tabs.
- Implemented **Passive Validation**: API keys are validated instantly on blur (Zero-cost check).
- Dynamic visibility: Automatically hides redundant keys based on provider selection.
- **Dashboard Layout**:
- Vertical control bar in the header for better space utilization.
- Repositioned "Stop & Back" button to the right column for better accessibility.
- Enforced white-card styling (`live-report-wrapper`) for Full Reports in Step 3 & 4.
- **Interactive Map**: Updated visualizers to use generic markers for waypoints and collapsed layer controls by default.

# ⚡ Logic & Performance
- **Zero-Cost Validation**: Refactored `validator.py` to use `list_models()` and Google Maps `Essentials (ID Only)` to prevent billing during tests.
- **Graceful Cancellation**: Implemented session-based cancellation to terminate background agents immediately upon user request.
- **Agent State Optimization**: Fixed Step 3 event loop to ensure Team Leader remains active during member handovers (eliminated "idle gap").
- **Safety Filter Handling**: Added `BLOCK_NONE` settings for Gemini to prevent silent failures on harmless prompts.

# 🐛 Fixes
- Fixed layout issues in Settings Modal where the footer was overlapping.
- Corrected Task ID display logic in the map visualizer (now shows Stop Sequence).
- Resolved issue where Groq models would occasionally output malformed JSON.

app.py

@@ -19,12 +19,19 @@ from ui.renderers import (
 )
 from core.session import UserSession
 from services.planner_service import PlannerService
-from core.visualizers import create_animated_map
+from services.validator import APIValidator # 記得 import
+from config import MODEL_OPTIONS
 
 class LifeFlowAI:
     def __init__(self):
         self.service = PlannerService()
 
+    def cancel_wrapper(self, session_data):
+        session = UserSession.from_dict(session_data)
+        if session.session_id:
+            self.service.cancel_session(session.session_id)
+        # 不需要回傳任何東西，這只是一個副作用 (Side Effect) 函數
+
     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}
@@ -57,10 +64,11 @@ class LifeFlowAI:
             evt_type = event.get("type")
             current_session = event.get("session", session)
             if evt_type == "error":
+                gr.Warning(event.get('message'))
                 yield (
-                    gr.update(),  # step1
-                    gr.update(),  # step2
-                    gr.update(),  # step3
+                    gr.update(visible=True),  # Step 1 Container: 保持顯示
+                    gr.update(visible=False),  # Step 2 Container: 保持隱藏
+                    gr.update(visible=False),  # Step 3 Container
                     gr.HTML(f"<div style='color:red'>{event.get('message')}</div>"),  # s1_stream
                     gr.update(),  # task_list
                     gr.update(),  # task_summary
@@ -146,48 +154,83 @@ class LifeFlowAI:
 
         yield (init_dashboard, init_log, loading_html, tasks_html, session.to_dict())
 
-        iterator = self.service.run_step3_team(session)
-
-        for event in iterator:
-            sess = event.get("session", session)
-            evt_type = event.get("type")
-
-            if evt_type == "report_stream":
-                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()
-                )
+        try:
+            iterator = self.service.run_step3_team(session)
+
+            for event in iterator:
+                sess = event.get("session", session)
+                evt_type = event.get("type")
+
+                if evt_type == "error":
+                    raise Exception(event.get("message"))
+
+                if evt_type == "report_stream":
+                    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 in ["report_stream", "reasoning_update"]:
+                    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()
+                    )
+
+        except Exception as e:
+            error_msg = str(e)
+            gr.Warning(f"⚠️ Planning Interrupted: {error_msg}")
+
+            # 這裡我們做一個特殊的 UI 操作：
+            # 雖然這個 Wrapper 的 outputs 綁定的是 Step 3 的內部元件
+            # 但我們可以透過修改 Step 3 的 "Log" 或 "Report" 區域來顯示「重試按鈕」
+            # 或者 (更進階做法) 在 app.py 綁定 outputs 時，就把 Step 2 container 也包進來。
+
+            # 💡 最簡單不改動 outputs 結構的做法：
+            # 在 Log 區域顯示紅色錯誤，並提示用戶手動點擊 "Back"
+
+            error_html = f"""
+                    <div style="padding: 20px; background: #fee2e2; border: 1px solid #ef4444; border-radius: 8px; color: #b91c1c;">
+                        <strong>❌ Error Occurred:</strong><br>{error_msg}<br><br>
+                        Please check your API keys or modify tasks, then try again.
+                    </div>
+                    """
+
+            # 回傳錯誤訊息到 UI，讓使用者知道發生了什麼
+            yield (
+                self._get_dashboard_html('team', 'error', 'Failed'),  # Dashboard 變紅
+                error_html,  # Log 顯示錯誤
+                "",
+                tasks_html,
+                session.to_dict()
+            )
 
     def step4_wrapper(self, session_data):
         session = UserSession.from_dict(session_data)
@@ -211,6 +254,20 @@ class LifeFlowAI:
                 session.to_dict()
             )
 
+    def save_settings(self, g, w, prov, m_key, m_sel, fast, g_key_in, s_data):
+        sess = UserSession.from_dict(s_data)
+
+                # 存入 Session
+        sess.custom_settings.update({
+                    'google_maps_api_key': g,
+                    'openweather_api_key': w,
+                    'llm_provider': prov,
+                    'model_api_key': m_key,     # 主模型 Key
+                    'model': m_sel,             # 主模型 ID
+                    'enable_fast_mode': fast,   # 🔥 Fast Mode 開關
+                    'groq_api_key': g_key_in    # 🔥 獨立 Groq Key
+        })
+        return gr.update(visible=False), sess.to_dict(), "✅ Configuration Saved"
     # ================= Main UI Builder =================
 
     def build_interface(self):
@@ -229,7 +286,7 @@ class LifeFlowAI:
             session_state = gr.State(UserSession().to_dict())
 
             with gr.Column(elem_classes="step-container"):
-                home_btn, theme_btn, settings_btn, doc_btn = create_header()
+                home_btn, settings_btn, doc_btn = create_header() #theme_btn
 
                 stepper = create_progress_stepper(1)
                 status_bar = gr.Markdown("Ready", visible=False)
@@ -261,20 +318,32 @@ class LifeFlowAI:
             # STEP 3
             with gr.Group(visible=False, elem_classes="step-container") as step3_container:
                 gr.Markdown("### 🤖 AI Team Operations")
+
+                # 1. Agent Dashboard (保持不變)
                 with gr.Group(elem_classes="agent-dashboard-container"):
                     agent_dashboard = gr.HTML(value=self._get_dashboard_html())
 
+                # 2. 主要內容區 (左右分欄)
                 with gr.Row():
-                    with gr.Column(scale=2):
+                    # 🔥 左側：主要報告顯示區 (佔 3/4 寬度)
+                    with gr.Column(scale=3):
                         with gr.Tabs():
                             with gr.Tab("📝 Full Report"):
+                                # 🔥 修正 2: 加入白底容器 (live-report-wrapper)
                                 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()
+
+                    # 🔥 右側：控制區與日誌 (佔 1/4 寬度)
                     with gr.Column(scale=1):
+                        # 🔥 修正 1: 將停止按鈕移到這裡 (右側欄位頂部)
+                        # variant="stop" 會呈現紅色，更符合 "緊急停止" 的語意
+                        cancel_plan_btn = gr.Button("🛑 Stop & Back to Edit", variant="stop")
+
                         gr.Markdown("### ⚡ Activity Log")
                         with gr.Group(elem_classes="panel-container"):
                             planning_log = gr.HTML(value="Waiting...")
@@ -289,19 +358,134 @@ class LifeFlowAI:
                                 summary_tab_output = gr.HTML()
 
                             with gr.Tab("📝 Full Report"):
-                                report_tab_output = gr.Markdown()
+                                with gr.Group(elem_classes="live-report-wrapper"):
+                                    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)
                         map_view = gr.HTML(label="Route Map")
 
             # Modals & Events
-            (settings_modal, g_key, w_key, llm_provider,
-             model_key, model_sel, close_set, save_set, set_stat) = create_settings_modal()
+            (settings_modal,
+             g_key, g_stat,
+             w_key, w_stat,
+             llm_provider, main_key, main_stat, model_sel,
+             fast_mode_chk, groq_model_sel, groq_key, groq_stat,
+             close_set, save_set, set_stat) = create_settings_modal()
+
+            # 2. 綁定 Google Maps 測試
+            g_key.blur(
+                fn=lambda k: "⏳ Checking..." if k else "",  # 先顯示 checking
+                inputs=[g_key], outputs=[g_stat]
+            ).then(
+                fn=APIValidator.test_google_maps,
+                inputs=[g_key],
+                outputs=[g_stat]
+            )
+
+            # 3. OpenWeather 自動驗證
+            w_key.blur(
+                fn=lambda k: "⏳ Checking..." if k else "",
+                inputs=[w_key], outputs=[w_stat]
+            ).then(
+                fn=APIValidator.test_openweather,
+                inputs=[w_key],
+                outputs=[w_stat]
+            )
+
+            # 4. 綁定 Main Brain 測試
+            main_key.blur(
+                fn=lambda k: "⏳ Checking..." if k else "",
+                inputs=[main_key], outputs=[main_stat]
+            ).then(
+                fn=APIValidator.test_llm,
+                inputs=[llm_provider, main_key, model_sel],
+                outputs=[main_stat]
+            )
+
+            # 5. Groq 自動驗證
+            groq_key.blur(
+                fn=lambda k: "⏳ Checking..." if k else "",
+                inputs=[groq_key], outputs=[groq_stat]
+            ).then(
+                fn=lambda k, m: APIValidator.test_llm("Groq", k, m),
+                inputs=[groq_key, groq_model_sel],
+                outputs=[groq_stat]
+            )
+
+            def resolve_groq_visibility(fast_mode, provider):
+                """
+                綜合判斷 Groq 相關欄位是否該顯示
+                回傳: (Model選單狀態, Key輸入框狀態, 狀態訊息狀態)
+                """
+                # 1. 如果沒開 Fast Mode -> 全部隱藏 + 清空狀態
+                if not fast_mode:
+                    return (
+                        gr.update(visible=False),
+                        gr.update(visible=False),
+                        gr.update(visible=False)  # 🔥 清空狀態
+                    )
+
+                # 2. 如果開了 Fast Mode
+                model_vis = gr.update(visible=True)
+
+                # 3. 判斷 Key 是否需要顯示
+                is_main_groq = (provider == "Groq")
+
+                if is_main_groq:
+                    # 如果主 Provider 是 Groq，隱藏 Key 並清空狀態 (避免誤導)
+                    return (
+                        model_vis,
+                        gr.update(visible=False),
+                        gr.update(visible=False)  # 🔥 清空狀態
+                    )
+                else:
+                    # 否則顯示 Key，狀態保持原樣 (不更動)
+                    return (
+                        model_vis,
+                        gr.update(visible=True),
+                        gr.update(visible=True)  # 保持原樣
+                    )
+
+            fast_mode_chk.change(
+                fn=resolve_groq_visibility,
+                inputs=[fast_mode_chk, llm_provider],
+                outputs=[groq_model_sel, groq_key, groq_stat]  # 🔥 新增 groq_stat
+            )
+
+            # --- 事件 B: 當 "Main Provider" 改變時 ---
+            def on_provider_change(provider, fast_mode):
+                # 1. 更新 Model 下拉選單 (原有邏輯)
+                new_choices = MODEL_OPTIONS.get(provider, [])
+                default_val = new_choices[0][1] if new_choices else ""
+                model_update = gr.Dropdown(choices=new_choices, value=default_val)
+
+                # 2. 清空 Main API Key (原有邏輯)
+                key_clear = gr.Textbox(value="")
+                stat_clear = gr.Markdown(value="")
+
+                # 3. 重算 Groq 欄位可見性 (包含狀態清空)
+                g_model_vis, g_key_vis, g_stat_vis = resolve_groq_visibility(fast_mode, provider)
+
+                # 回傳順序要對應下面的 outputs
+                return (
+                    model_update,  # model_sel
+                    key_clear,  # main_key
+                    stat_clear,  # main_stat
+                    g_model_vis,  # groq_model_sel
+                    g_key_vis,  # groq_key
+                    g_stat_vis  # groq_stat (新)
+                )
+
+            llm_provider.change(
+                fn=on_provider_change,
+                inputs=[llm_provider, fast_mode_chk],
+                # 🔥 outputs 增加到 6 個，確保所有狀態都被重置
+                outputs=[model_sel, main_key, main_stat, groq_model_sel, groq_key, groq_stat]
+            )
 
             doc_modal, close_doc_btn = create_doc_modal()
 
@@ -309,11 +493,11 @@ class LifeFlowAI:
             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'); }")
+            #theme_btn.click(fn=None, js="() => { document.querySelector('.gradio-container').classList.toggle('theme-dark'); }")
 
             analyze_btn.click(
                 fn=self.analyze_wrapper,
-                inputs=[user_input, auto_loc, lat_in, lon_in, 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])
 
@@ -330,6 +514,16 @@ class LifeFlowAI:
                 show_progress="hidden"
             )
 
+            cancel_plan_btn.click(
+                fn=self.cancel_wrapper,  # 1. 先執行取消
+                inputs=[session_state],
+                outputs=None
+            ).then(
+                fn=lambda: (gr.update(visible=True), gr.update(visible=False), update_stepper(2)),  # 2. 再切換 UI
+                inputs=None,
+                outputs=[step2_container, step3_container, stepper]
+            )
+
             step3_start.then(
                 fn=self.step4_wrapper,
                 inputs=[session_state],
@@ -351,37 +545,46 @@ class LifeFlowAI:
                 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])
+            home_btn.click(
+                fn=self.cancel_wrapper,  # 1. 先執行取消 (防止後台繼續跑)
+                inputs=[session_state],
+                outputs=None
+            ).then(
+                fn=reset_all,  # 2. 再重置 UI
+                inputs=[session_state],
+                outputs=[step1_container, step2_container, step3_container, step4_container, stepper, session_state,
+                         user_input]
+            )
+
+            back_btn.click(
+                fn=self.cancel_wrapper,
+                inputs=[session_state],
+                outputs=None
+            ).then(
+                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,
+                # 輸入參數對應上面的 create_settings_modal 回傳順序
+                inputs=[g_key, w_key, llm_provider, main_key, model_sel, fast_mode_chk, groq_key, session_state],
+                outputs=[settings_modal, session_state, status_bar]
+            )
+
 
-            save_set.click(fn=self.save_settings,
-                           inputs=[g_key, w_key, llm_provider, model_key, model_sel, session_state],
-                           outputs=[set_stat, session_state, status_bar]
-                           ).then(fn=lambda: gr.update(visible=False), outputs=[settings_modal])
 
             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])
 
         return demo
 
-    # 接收參數中加入了 prov (對應 UI 上的 llm_provider)
-    def save_settings(self, g, w, prov, model_api, m, s_data):
-        sess = UserSession.from_dict(s_data)
-
-        # 更新設定字典，加入 provider
-        sess.custom_settings.update({
-            'google_maps_api_key': g,
-            'openweather_api_key': w,
-            'llm_provider': prov,  # ✅ 新增這行：儲存供應商
-            'model_api_key': model_api,
-            'model': m
-        })
-        return gr.update(visible=False), 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)
     #7860
 if __name__ == "__main__":
     main()

config.py

@@ -6,9 +6,40 @@ LifeFlow AI - Configuration
 import os
 from pathlib import Path
 
+# ===== 系統預設值 =====
+DEFAULT_PROVIDER = "Gemini"
+DEFAULT_MODEL = "gemini-2.5-flash"
+
 # ===== 應用配置 =====
 APP_TITLE = "LifeFlow AI - Intelligent Daily Trip Planner"
 
+# ===== 模型白名單配置 (Model Allowlist) =====
+# 格式: Key 是 Provider 名稱, Value 是 (顯示名稱, API Model ID) 的列表
+MODEL_OPTIONS = {
+    "Gemini": [
+        # 平衡型 (預設)
+        ("Gemini 2.5 Flash (🔥 Best Value)", "gemini-2.5-flash"),
+        # 速度型 (舊版 Flash 其實不用列，除非它有特殊用途，不然建議隱藏)
+        ("Gemini 2.0 Flash (⚡ High Speed)", "gemini-2.0-flash"),
+        # 智力型
+        ("Gemini 2.5 Pro (🧠 Max Intelligence)", "gemini-2.5-pro"),
+    ],
+    "OpenAI": [
+        ("GPT-5 Mini (⚖️ Smart & Fast)", "gpt-5-mini"),
+
+        ("GPT-4o Mini (💰 Cost Saver)", "gpt-4o-mini"),
+        # 旗艦型
+        ("GPT-5 (🌟 Ultimate Quality)", "gpt-5"),
+    ],
+    "Groq": [
+        ("Llama 3.3 70B (🚀 Ultra Fast [Alpha])", "llama-3.3-70b-versatile"),
+
+        ("GPT-OSS 120B (💪 Reasoning Powerhouse [Alpha])", "openai/gpt-oss-120b"),
+
+        ("Kimi K2 (💪 Long Context Expert [Alpha])", "moonshotai/kimi-k2-instruct-0905"),
+    ]
+}
+
 # ===== Agent 資訊配置 (前端顯示用) =====
 AGENTS_INFO = {
     'planner': {

core/visualizers.py

@@ -5,7 +5,6 @@ from src.infra.logger import get_logger
 
 logger = get_logger(__name__)
 
-# --- CSS 樣式：讓 Popup 變成漂亮的資訊卡片 ---
 CSS_STYLE = """
 <style>
     .map-card {
@@ -84,19 +83,17 @@ def create_popup_html(title, subtitle, color, metrics, is_alternative=False):
     """
     產生漂亮的 HTML 卡片字串
     """
-    # 定義顏色代碼
     bg_color = {
-        'green': '#2ecc71',  # Stop 1 (Start)
-        'blue': '#3498db',  # Waypoints
-        'red': '#e74c3c',  # Stop N (End)
-        'gray': '#7f8c8d',  # Alternative
-        'route': '#4285F4'  # Route Leg
+        'green': '#2ecc71',
+        'blue': '#3498db',
+        'red': '#e74c3c',
+        'gray': '#7f8c8d',
+        'route': '#4285F4'
     }.get(color, '#34495e')
 
-    # 構建數據網格
     grid_html = ""
     for label, value in metrics.items():
-        if value:  # 只顯示有值的欄位
+        if value:
             grid_html += f"""
             <div class="info-item">
                 <div class="info-label">{label}</div>
@@ -104,11 +101,10 @@ def create_popup_html(title, subtitle, color, metrics, is_alternative=False):
             </div>
             """
 
-    # 備用方案的額外標示
     extra_html = ""
     if is_alternative:
         extra_html = """
-        <div class="cost-badge">⚠️ 替代方案 (Alternative Option)</div>
+        <div class="cost-badge">⚠️ Alternative Option</div>
         """
 
     html = f"""
@@ -132,16 +128,14 @@ def create_popup_html(title, subtitle, color, metrics, is_alternative=False):
 def create_animated_map(structured_data=None):
     """
     LifeFlow AI - Interactive Map Generator
-    產生包含完整資訊、圖層控制與美化 UI 的 HTML 地圖。
     """
-    # 1. 初始化地圖 (預設台北)
+    # 1. 初始化地圖
     center_lat, center_lon = 25.033, 121.565
     m = folium.Map(location=[center_lat, center_lon], zoom_start=13, tiles="OpenStreetMap",
-                   height="100%",  # 這裡！設定高度 (單位是像素 px，也可以用 "100%" 但在 Gradio 有時會無效)
+                   height=520,
                    width="100%"
                    )
 
-    # 注入 CSS 樣式
     m.get_root().html.add_child(folium.Element(CSS_STYLE))
 
     if not structured_data:
@@ -154,32 +148,36 @@ def create_animated_map(structured_data=None):
         legs = precise_result.get("legs", [])
         tasks_detail = structured_data.get("tasks_detail", [])
         raw_tasks = structured_data.get("tasks", [])
+        route_info = structured_data.get("route", [])
 
-        # 建立查找表 (Lookup Maps)
-        # Stop Index -> Location Name (用於路線顯示)
+        # 建立查找表
         index_to_name = {stop.get("stop_index"): stop.get("location") for stop in timeline}
 
-        # POI ID -> Name (用於替代點顯示，解決只有 ID 沒有名字的問題)
         poi_id_to_name = {}
         for t in raw_tasks:
             for cand in t.get("candidates", []):
                 if cand.get("poi_id"):
                     poi_id_to_name[cand["poi_id"]] = cand.get("name")
 
+        # 🔥 新增：Task ID 對應到 Stop Sequence (第幾站)
+        # 用來顯示 "Stop 1", "Stop 2" 而不是 "Task 123"
+        task_id_to_seq = {}
+        for r in route_info:
+            if r.get("task_id"):
+                task_id_to_seq[r["task_id"]] = r.get("step", 0)
+
         bounds = []
 
-        # 定義主題色輪替
         THEMES = [
-            ('#2ecc71', 'green'),  # Stop 1
-            ('#3498db', 'blue'),  # Stop 2
-            ('#e74c3c', 'red'),  # Stop 3
-            ('#f39c12', 'orange')  # Others
+            ('#2ecc71', 'green'),
+            ('#3498db', 'blue'),
+            ('#e74c3c', 'red'),
+            ('#f39c12', 'orange')
         ]
 
-        # --- Layer 1: 路線 (Route) ---
+        # --- Layer 1: 路線 ---
         route_group = folium.FeatureGroup(name="🚗 Main Route", show=True)
 
-        # 1.1 背景特效 (AntPath)
         all_coords = []
         for leg in legs:
             if leg.get("polyline"):
@@ -191,15 +189,11 @@ def create_animated_map(structured_data=None):
                 opacity=0.2, pulse_color='#FFFFFF', hardware_acceleration=True
             ).add_to(route_group)
 
-        # 1.2 前景互動線 (PolyLine)
         for i, leg in enumerate(legs):
             poly_str = leg.get("polyline")
             if not poly_str: continue
-
             decoded = decode_polyline(poly_str)
             bounds.extend(decoded)
-
-            # 準備數據
             dist = leg.get("distance_meters", 0)
             dur = leg.get("duration_seconds", 0) // 60
             from_idx = leg.get("from_index")
@@ -211,12 +205,8 @@ def create_animated_map(structured_data=None):
                 title=f"LEG {i + 1} ROUTE",
                 subtitle=f"{from_n} ➔ {to_n}",
                 color="route",
-                metrics={
-                    "Duration": f"{dur} min",
-                    "Distance": f"{dist / 1000:.1f} km"
-                }
+                metrics={"Duration": f"{dur} min", "Distance": f"{dist / 1000:.1f} km"}
             )
-
             folium.PolyLine(
                 locations=decoded, color="#4285F4", weight=6, opacity=0.9,
                 tooltip=f"Leg {i + 1}: {dur} min",
@@ -226,13 +216,20 @@ def create_animated_map(structured_data=None):
         route_group.add_to(m)
 
         # --- Layer 2: 備用方案 (Alternatives) ---
-        # 依據 Task 分組，讓使用者可以開關特定站點的備用方案
         for idx, task in enumerate(tasks_detail):
-            # 決定顏色主題 (跳過起點，對應到中間站點)
             theme_idx = (idx + 1) % len(THEMES)
             theme_color, theme_name = THEMES[theme_idx]
 
-            group_name = f"🔹 Task {idx + 1} Alternatives ({theme_name.upper()})"
+            # 🔥 優化 Group Name: 使用 Stop 順序和地點名稱
+            tid = task.get("task_id")
+            seq_num = task_id_to_seq.get(tid, "?")  # 獲取順序 (如: 1, 2)
+
+            chosen_pid = task.get("chosen_poi", {}).get("poi_id")
+            loc_name = poi_id_to_name.get(chosen_pid, f"Place")  # 獲取地點名稱
+
+            # 顯示格式: "🔹 Stop 1 Alt: Taipei 101"
+            group_name = f"🔹 Stop {seq_num} Alt: {loc_name}"
+
             alt_group = folium.FeatureGroup(name=group_name, show=True)
 
             chosen = task.get("chosen_poi", {})
@@ -243,14 +240,11 @@ def create_animated_map(structured_data=None):
                     alat, alng = alt.get("lat"), alt.get("lng")
                     if alat and alng:
                         bounds.append([alat, alng])
-
-                        # A. 虛線連接 (主站點 -> 備用點)
                         folium.PolyLine(
                             locations=[[center_lat, center_lng], [alat, alng]],
                             color=theme_color, weight=2, dash_array='5, 5', opacity=0.6
                         ).add_to(alt_group)
 
-                        # B. 備用點 Marker
                         poi_name = poi_id_to_name.get(alt.get("poi_id"), "Alternative Option")
                         extra_min = alt.get("delta_travel_time_min", 0)
                         extra_dist = alt.get("delta_travel_distance_m", 0)
@@ -275,41 +269,31 @@ def create_animated_map(structured_data=None):
 
             alt_group.add_to(m)
 
-        # --- Layer 3: 主要站點 (Main Stops) ---
+        # --- Layer 3: 主要站點 ---
         stops_group = folium.FeatureGroup(name="📍 Main travel stops", show=True)
-
         for i, stop in enumerate(timeline):
             coords = stop.get("coordinates", {})
             lat, lng = coords.get("lat"), coords.get("lng")
-
             if lat and lng:
                 bounds.append([lat, lng])
-
-                # 決定顏色
                 if i == 0:
-                    color_code, theme_name = THEMES[0]  # Green
+                    color_code, theme_name = THEMES[0]
                 elif i == len(timeline) - 1:
-                    color_code, theme_name = THEMES[2]  # Red
+                    color_code, theme_name = THEMES[2]
                 else:
-                    color_code, theme_name = THEMES[1]  # Blue
+                    color_code, theme_name = THEMES[1]
 
                 loc_name = stop.get("location", "")
-
                 popup_html = create_popup_html(
-                    title=f"STOP {i + 1}",
-                    subtitle=loc_name,
-                    color=theme_name,
+                    title=f"STOP {i + 1}", subtitle=loc_name, color=theme_name,
                     metrics={
                         "Arrival time": stop.get("time", ""),
                         "Weather": stop.get("weather", ""),
                         "Air quality": stop.get("aqi", {}).get("label", "")
                     }
                 )
-
-                # Icon 設定
-                icon_type = 'flag-checkered' if i == len(timeline) - 1 else ('play' if i == 0 else 'utensils')
+                icon_type = 'flag-checkered' if i == len(timeline) - 1 else ('play' if i == 0 else 'map-marker')
                 icon = folium.Icon(color=theme_name, icon=icon_type, prefix='fa')
-
                 folium.Marker(
                     location=[lat, lng], icon=icon,
                     popup=folium.Popup(popup_html, max_width=320),
@@ -319,17 +303,19 @@ def create_animated_map(structured_data=None):
         stops_group.add_to(m)
 
         # --- 控制元件 ---
-        folium.LayerControl(collapsed=False).add_to(m)
+        # 🔥 修改: collapsed=True 預設收合
+        folium.LayerControl(collapsed=True).add_to(m)
 
         if bounds:
             m.fit_bounds(bounds, padding=(50, 50))
 
+
     except Exception as e:
         logger.error(f"Folium map error: {e}", exc_info=True)
         return m._repr_html_()
-
     return m._repr_html_()
 
+
 if __name__ == "__main__":
     test_data =  {'status': 'OK', 'total_travel_time_min': 19, 'total_travel_distance_m': 7567, 'metrics': {'total_tasks': 2, 'completed_tasks': 2, 'completion_rate_pct': 100.0, 'original_distance_m': 15478, 'optimized_distance_m': 7567, 'distance_saved_m': 7911, 'distance_improvement_pct': 51.1, 'original_duration_min': 249, 'optimized_duration_min': 229, 'time_saved_min': 20, 'time_improvement_pct': 8.4, 'route_efficiency_pct': 91.7}, 'route': [{'step': 0, 'node_index': 0, 'arrival_time': '2025-11-27T10:00:00+08:00', 'departure_time': '2025-11-27T10:00:00+08:00', 'type': 'depot', 'task_id': None, 'poi_id': None, 'service_duration_min': 0}, {'step': 1, 'node_index': 1, 'arrival_time': '2025-11-27T10:17:57+08:00', 'departure_time': '2025-11-27T12:17:57+08:00', 'type': 'task_poi', 'task_id': '1', 'poi_id': 'ChIJH56c2rarQjQRphD9gvC8BhI', 'service_duration_min': 120}, {'step': 2, 'node_index': 7, 'arrival_time': '2025-11-27T12:19:05+08:00', 'departure_time': '2025-11-27T13:49:05+08:00', 'type': 'task_poi', 'task_id': '2', 'poi_id': 'ChIJQXcl6LarQjQRGUMnQ18F0lE', 'service_duration_min': 90}], 'visited_tasks': ['1', '2'], 'skipped_tasks': [], 'tasks_detail': [{'task_id': '1', 'priority': 'HIGH', 'visited': True, 'chosen_poi': {'node_index': 1, 'poi_id': 'ChIJH56c2rarQjQRphD9gvC8BhI', 'lat': 25.033976, 'lng': 121.56453889999999, 'interval_idx': 0}, 'alternative_pois': []}, {'task_id': '2', 'priority': 'HIGH', 'visited': True, 'chosen_poi': {'node_index': 7, 'poi_id': 'ChIJQXcl6LarQjQRGUMnQ18F0lE', 'lat': 25.033337099999997, 'lng': 121.56465960000001, 'interval_idx': 0}, 'alternative_pois': [{'node_index': 10, 'poi_id': 'ChIJwQWwVe6rQjQRRGA4WzYdO2U', 'lat': 25.036873699999997, 'lng': 121.5679503, 'interval_idx': 0, 'delta_travel_time_min': 7, 'delta_travel_distance_m': 2003}, {'node_index': 6, 'poi_id': 'ChIJ01XRzrurQjQRnp5ZsHbAAuE', 'lat': 25.039739800000003, 'lng': 121.5665985, 'interval_idx': 0, 'delta_travel_time_min': 9, 'delta_travel_distance_m': 2145}, {'node_index': 5, 'poi_id': 'ChIJaeY0sNCrQjQRBmpF8-RmywQ', 'lat': 25.0409656, 'lng': 121.5429975, 'interval_idx': 0, 'delta_travel_time_min': 24, 'delta_travel_distance_m': 6549}]}], 'tasks': [{'task_id': '1', 'priority': 'HIGH', 'service_duration_min': 120, 'time_window': {'earliest_time': '2025-11-27T10:00:00+08:00', 'latest_time': '2025-11-27T22:00:00+08:00'}, 'candidates': [{'poi_id': 'ChIJH56c2rarQjQRphD9gvC8BhI', 'name': 'Taipei 101', 'lat': 25.033976, 'lng': 121.56453889999999, 'rating': None, 'time_window': None}]}, {'task_id': '2', 'priority': 'HIGH', 'service_duration_min': 90, 'time_window': {'earliest_time': '2025-11-27T11:30:00+08:00', 'latest_time': '2025-11-27T14:30:00+08:00'}, 'candidates': [{'poi_id': 'ChIJbbvUtW6pQjQRLvK71hSUXN8', 'name': 'Din Tai Fung Mitsukoshi Nanxi Restaurant', 'lat': 25.0523074, 'lng': 121.5211037, 'rating': 4.4, 'time_window': None}, {'poi_id': 'ChIJA-U6X-epQjQR-T9BLmEfUlc', 'name': 'Din Tai Fung Xinsheng Branch', 'lat': 25.033889, 'lng': 121.5321338, 'rating': 4.6, 'time_window': None}, {'poi_id': 'ChIJbTKSE4KpQjQRXDZZI57v-pM', 'name': 'Din Tai Fung Xinyi Branch', 'lat': 25.0335035, 'lng': 121.53011799999999, 'rating': 4.4, 'time_window': None}, {'poi_id': 'ChIJaeY0sNCrQjQRBmpF8-RmywQ', 'name': 'Din Tai Fung Fuxing Restaurant', 'lat': 25.0409656, 'lng': 121.5429975, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJ01XRzrurQjQRnp5ZsHbAAuE', 'name': 'Din Tai Fung A4 Branch', 'lat': 25.039739800000003, 'lng': 121.5665985, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJQXcl6LarQjQRGUMnQ18F0lE', 'name': 'Din Tai Fung 101', 'lat': 25.033337099999997, 'lng': 121.56465960000001, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJ7y2qTJeuQjQRbpDcQImxLO0', 'name': 'Din Tai Fung Tianmu Restaurant', 'lat': 25.105072000000003, 'lng': 121.52447500000001, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJxRJqSBmoQjQR3gtSHvJgkZk', 'name': 'Din Tai Fung Mega City Restaurant', 'lat': 25.0135467, 'lng': 121.46675080000001, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJwQWwVe6rQjQRRGA4WzYdO2U', 'name': 'Din Tai Fung A13 Branch', 'lat': 25.036873699999997, 'lng': 121.5679503, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJ34CbayyoQjQRDbCGQgDk_RY', 'name': 'Ding Tai Feng', 'lat': 25.0059716, 'lng': 121.48668440000002, 'rating': 3.6, 'time_window': None}]}], 'global_info': {'language': 'en-US', 'plan_type': 'TRIP', 'departure_time': '2025-11-27T10:00:00+08:00', 'start_location': {'name': 'Taipei Main Station', 'lat': 25.0474428, 'lng': 121.5170955}}, 'traffic_summary': {'total_distance_km': 7.567, 'total_duration_min': 15}, 'precise_traffic_result': {'total_distance_meters': 7567, 'total_duration_seconds': 925, 'total_residence_time_minutes': 210, 'total_time_seconds': 13525, 'start_time': '2025-11-27 10:00:00+08:00', 'end_time': '2025-11-27 05:45:25+00:00', 'stops': [{'lat': 25.0474428, 'lng': 121.5170955}, {'lat': 25.033976, 'lng': 121.56453889999999}, {'lat': 25.033337099999997, 'lng': 121.56465960000001}], 'legs': [{'from_index': 0, 'to_index': 1, 'travel_mode': 'DRIVE', 'distance_meters': 7366, 'duration_seconds': 857, 'departure_time': '2025-11-27T02:00:00+00:00', 'polyline': 'm_{wCqttdVQbAu@KwDe@ELMTKl@C\\@LC^@PLPRJdC\\LLe@bEIj@_@|@I\\?P}EGMERqAAyAf@iD\\sC`AqKTmDJYXoDn@oFH{A`@{PNoB\\wChAyFfCaLrAcHnAyH|BeMZcCRmCNoGVcJPoI@{CIwBc@mHw@aNGeCD}BpBm^Ak@LyDB_@KmD]qDu@iGNs@SuASsBdUPZ@FcNP{ODcItBfANBxClA^D`A@As@D{@HyGpFBtD?pADlKB?|@FD`@@lAE'}, {'from_index': 1, 'to_index': 2, 'travel_mode': 'DRIVE', 'distance_meters': 201, 'duration_seconds': 68, 'departure_time': '2025-11-27T04:14:17+00:00', 'polyline': 'mmxwC}d~dVfBAXGJON]l@?CrC'}]}, 'solved_waypoints': [{'lat': 25.0474428, 'lng': 121.5170955}, {'lat': 25.033976, 'lng': 121.56453889999999}, {'lat': 25.033337099999997, 'lng': 121.56465960000001}], 'timeline': [{'stop_index': 0, 'time': '10:00', 'location': 'start point', 'address': '', 'weather': 'Rain, 20.76°C', 'aqi': {'aqi': 2, 'label': 'AQI 2 🟡'}, 'travel_time_from_prev': '0 mins', 'coordinates': {'lat': 25.0474428, 'lng': 121.5170955}}, {'stop_index': 1, 'time': '10:14', 'location': 'Taipei 101', 'address': '', 'weather': 'Rain, 20.75°C', 'aqi': {'aqi': 2, 'label': 'AQI 2 🟡'}, 'travel_time_from_prev': '14 mins', 'coordinates': {'lat': 25.033976, 'lng': 121.56453889999999}}, {'stop_index': 2, 'time': '12:15', 'location': 'Din Tai Fung Mitsukoshi Nanxi Restaurant', 'address': '', 'weather': 'Rain, 20.75°C', 'aqi': {'aqi': 2, 'label': 'AQI 2 🟡'}, 'travel_time_from_prev': '1 mins', 'coordinates': {'lat': 25.033337099999997, 'lng': 121.56465960000001}}]}
 

services/planner_service.py

@@ -22,8 +22,13 @@ from core.visualizers import create_animated_map
 # 導入 Config
 from config import AGENTS_INFO
 
-# 導入 Agent 系統
+# 導入 Model API
 from agno.models.google import Gemini
+from agno.models.openai import OpenAIChat
+from agno.models.groq import Groq
+
+# 導入 Agent 系統
+
 from agno.agent import RunEvent
 from agno.run.team import TeamRunEvent
 from src.agent.base import UserState, Location, get_context
@@ -38,6 +43,7 @@ from src.tools import (
 from src.infra.logger import get_logger
 
 logger = get_logger(__name__)
+max_retries = 3
 
 
 @contextmanager
@@ -85,6 +91,13 @@ class PlannerService:
 
     # 🌟 [Fix] In-Memory Store: 保存包含 Agent 實例的完整 Session 物件
     _active_sessions: Dict[str, UserSession] = {}
+    _cancelled_sessions: set = set()
+
+    def cancel_session(self, session_id: str):
+        """標記 Session 為取消狀態"""
+        if session_id:
+            logger.info(f"🛑 Requesting cancellation for session: {session_id}")
+            self._cancelled_sessions.add(session_id)
 
     def _get_live_session(self, incoming_session: UserSession) -> UserSession:
         """
@@ -148,8 +161,6 @@ class PlannerService:
 
                 setattr(tool_instance, attr_name, create_wrapper(attr, session_id))
 
-
-
     def initialize_agents(self, session: UserSession, lat: float, lng: float) -> UserSession:
         if not session.session_id:
             session.session_id = str(uuid.uuid4())
@@ -169,37 +180,76 @@ class PlannerService:
             logger.info(f"♻️ Agents already initialized for {session.session_id}")
             return session
 
-        # 1. API Key 檢查
-        google_key = session.custom_settings.get("google_maps_api_key")
-        weather_key = session.custom_settings.get("openweather_api_key")
-
-        provider = session.custom_settings.get("llm_provider")
-        model_api_key = session.custom_settings.get("model_api_key")
+            # 1. 讀取設定
+        settings = session.custom_settings
+        provider = settings.get("llm_provider", "Gemini")
+        main_api_key = settings.get("model_api_key")
+        selected_model_id = settings.get("model", "gemini-2.5-flash")
+        google_map_key = settings.get("google_maps_api_key")
+        weather_map_key = settings.get("openweather_api_key")
 
-        import os
-        if not google_key:
-            google_key = os.getenv("GOOGLE_MAPS_API_KEY", "")
-        if not weather_key:
-            weather_key = os.getenv("OPENWEATHER_API_KEY", "")
+            # 🔥 讀取 Fast Mode 設定
+        enable_fast_mode = settings.get("enable_fast_mode", False)
+        groq_api_key = settings.get("groq_api_key", "")
 
-        if not model_api_key:
-            raise ValueError("🔑 Missing Gemini API Key. Please configure Settings.")
+        model_logger = {"main_provider": provider, "main_model": selected_model_id, "sub_model": None,
+                            "fast_mode": enable_fast_mode}
 
+        # 2. 初始化 "主模型 (Brain)" - 負責 Planner, Leader, Presenter
         if provider.lower() == "gemini":
-            planner_model = Gemini(id='gemini-2.5-flash', thinking_budget=1024, api_key=model_api_key)
-            main_model = Gemini(id='gemini-2.5-flash', thinking_budget=1024, api_key=model_api_key)
-            lite_model = Gemini(id="gemini-2.5-flash-lite", api_key=model_api_key)
-
+            main_brain = Gemini(id=selected_model_id, api_key=main_api_key, thinking_budget=1024)
+        elif provider.lower() == "openai":
+            main_brain = OpenAIChat(id=selected_model_id, api_key=main_api_key, reasoning_effort="low")
+        elif provider.lower() == "groq":
+            main_brain = Groq(id=selected_model_id, api_key=main_api_key, temperature=0.1)
+        else:
+            main_brain = Gemini(id='gemini-2.5-flash', api_key=main_api_key, thinking_budget=1024)
+
+        # 3. 初始化 "輔助模型 (Muscle)" - 負責 Scout, Optimizer, Navigator
+        helper_model = None
+
+        # 🔥 判斷是否啟用 Fast Mode
+        if enable_fast_mode and groq_api_key:
+            model_logger["sub_model"] = "llama-3.1-70b-versatile"
+            logger.info("⚡ Fast Mode ENABLED: Using Groq (Llama-3) for helpers.")
+            # 強制使用 Llama 3 70B，並壓低 Temperature
+            helper_model = Groq(
+                    id="llama-3.1-8b-instant",
+                    api_key=groq_api_key,
+                    temperature=0.1
+                )
+        else:
+                # 如果沒開 Fast Mode，或者沒填 Groq Key，就使用主模型 (或其 Lite 版本)
+            logger.info("🐢 Fast Mode DISABLED: Helpers using Main Provider.")
+            if provider.lower() == "gemini":
+                model_logger["sub_model"] = "gemini-2.5-flash-lite"
+                helper_model = Gemini(id="gemini-2.5-flash-lite", api_key=main_api_key)
+            elif provider.lower() == "openai":
+                model_logger["sub_model"] = "gpt-4o-mini"
+                helper_model = OpenAIChat(id="gpt-4o-mini", api_key=main_api_key)
+            else:
+                model_logger["sub_model"] = model_logger["main_model"]
+                helper_model = main_brain
+
+            # 4. 分配模型給 Agents
+            # 🧠 大腦組：需要高智商
         models_dict = {
-            "team": main_model, "scout": main_model, "optimizer": lite_model,
-            "navigator": lite_model, "weatherman": lite_model, "presenter": main_model,
+                "team": main_brain,  # Leader: 指揮需要聰明
+                "presenter": main_brain,  # Presenter: 寫作需要文筆
+                # 💪 肌肉組：需要速度 (若 Fast Mode 開啟，這裡就是 Groq)
+                "scout": helper_model,
+                "optimizer": helper_model,
+                "navigator": helper_model,
+                "weatherman": helper_model
         }
 
+        planner_model = main_brain
+
         # 3. 準備 Tools (先實例化，還不要給 Agent)
-        scout_tool = ScoutToolkit(google_key)
-        optimizer_tool = OptimizationToolkit(google_key)
-        navigator_tool = NavigationToolkit(google_key)
-        weather_tool = WeatherToolkit(weather_key)
+        scout_tool = ScoutToolkit(google_map_key)
+        optimizer_tool = OptimizationToolkit()
+        navigator_tool = NavigationToolkit(google_map_key)
+        weather_tool = WeatherToolkit(weather_map_key)
         reader_tool = ReaderToolkit()
 
         # 4. 🔥 執行注入！確保所有 Agent 的 Tools 都帶有 Session ID
@@ -481,8 +531,15 @@ class PlannerService:
     # ================= Step 3: Run Core Team =================
 
     def run_step3_team(self, session: UserSession) -> Generator[Dict[str, Any], None, None]:
+
+        attempt = 0
+        success = False
         try:
             session = self._get_live_session(session)
+            sid = session.session_id
+
+            if sid in self._cancelled_sessions:
+                self._cancelled_sessions.remove(sid)
 
             if session.session_id:
                 set_session_id(session.session_id)
@@ -493,7 +550,7 @@ class PlannerService:
                 return
 
             # 準備 Task List String
-            task_list_input = session.planner_agent.get_session_state().get("task_list")
+            task_list_input = session.planner_agent.get_session_state()["task_list"]
             task_list_str = json.dumps(task_list_input, indent=2, ensure_ascii=False) if isinstance(task_list_input, (
             dict, list)) else str(task_list_input)
 
@@ -506,76 +563,175 @@ class PlannerService:
                 "agent_status": ("team", "working", "Analyzing tasks...")
             }
 
-            # 🔥 [CRITICAL FIX] 使用 Patch Context 包裹執行區塊
-            with patch_repo_context(session.session_id):
-
-                team_stream = session.core_team.run(
-                    f"Plan this trip: {task_list_str}",
-                    stream=True, stream_events=True, session_id=session.session_id
-                )
-
-
-                start_time = time.perf_counter()
-                report_content = ""
-                # 🔥 Event Loop: 捕捉事件並 yield 給 UI
-                for event in team_stream:
-
-                    # 1. 報告內容 stream
-                    if event.event == RunEvent.run_content and event.agent_id == "presenter":
-                        report_content += event.content
-                        yield {
-                            "type": "report_stream",
-                            "content": report_content,
-                            "session": session
-                        }
-
-                    # 2. Team Delegate (分派任務)
-                    if event.event == TeamRunEvent.tool_call_started:
-                        tool_name = event.tool.tool_name
-                        if "delegate_task_to_member" in tool_name:
-                            member_id = event.tool.tool_args.get("member_id", "unknown")
-                            msg = f"Delegating to {member_id}..."
-                            self._add_reasoning(session, "team", f"👉 {msg}")
-
-                            yield {
-                                "type": "reasoning_update",
-                                "session": session,
-                                "agent_status": ("team", "working", msg)
-                            }
-                        else:
-                            self._add_reasoning(session, "team", f"🔧 Tool: {tool_name}")
-
-                    # 3. Member Tool Start (成員開始工作)
-                    elif event.event == RunEvent.tool_call_started:
-                        member_id = event.agent_id
-                        tool_name = event.tool.tool_name
-                        self._add_reasoning(session, member_id, f"Using tool: {tool_name}...")
-
-                        yield {
-                            "type": "reasoning_update",
-                            "session": session,
-                            "agent_status": (member_id, "working", f"Running {tool_name}...")
-                        }
-
-                    # 4. Member Tool End (成員工作結束)
-                    elif event.event == RunEvent.tool_call_completed:
-                        member_id = event.agent_id
-                        self._add_reasoning(session, member_id, "✅ Task completed")
-
-                        yield {
-                            "type": "reasoning_update",
-                            "session": session,
-                            "agent_status": (member_id, "idle", "Done")
-                        }
-
-                    # 5. Team Complete
-                    elif event.event == TeamRunEvent.run_completed:
-                        self._add_reasoning(session, "team", "🎉 Planning process finished")
+            #print(f"task_list_input: {task_list_str}")
+
+            message = f"Plan this trip: {task_list_str}"
+
+            while attempt < max_retries and not success:
+                attempt += 1
+
+                # 如果是第 2 次以上嘗試，發個 log
+                if attempt > 1:
+                    logger.warning(f"🔄 Retry attempt {attempt}/{max_retries} for Session {session.session_id}")
+                    # 可以選擇在這裡 yield 一個 "Retrying..." 的狀態給 UI (選用)
+
+                try:
+                    # 🔥 [CRITICAL FIX] 使用 Patch Context 包裹執行區塊
+                    with patch_repo_context(session.session_id):
+                        active_agents = set()
+                        team_stream = session.core_team.run(
+                            message,
+                            stream=True, stream_events=True, session_id=session.session_id
+                        )
+
+
+                        start_time = time.perf_counter()
+                        report_content = ""
+
+                        has_content = False
+                        # 🔥 Event Loop: 捕捉事件並 yield 給 UI
+                        for event in team_stream:
+                            if event.event in [RunEvent.run_content, RunEvent.tool_call_started]:
+                                has_content = True
+                                success = True  # 標記成功
+
+                            if sid in self._cancelled_sessions:
+                                logger.warning(f"🛑 Execution terminated by user for session {sid}")
+                                self._cancelled_sessions.remove(sid)  # 清理標記
+                                yield {"type": "error", "message": "Plan cancelled by user."}
+                                return
+
+                            # 1. 捕捉 Agent "開始工作"
+                            if event.event == RunEvent.run_started:
+                                agent_id = event.agent_id or "team"
+                                if not event.agent_id: agent_id = "team"
+
+                                active_agents.add(agent_id)
+                                yield {
+                                    "type": "reasoning_update",
+                                    "session": session,
+                                    "agent_status": (agent_id, "working", "Thinking...")
+                                }
+
+                            # 2. 捕捉 Agent "完成工作" (⭐⭐ 修正重點 ⭐⭐)
+                            elif event.event == RunEvent.run_completed:
+                                agent_id = event.agent_id or "team"
+                                if not event.agent_id: agent_id = "team"
+
+                                # A. 如果是 Leader：絕對不准休息！
+                                if agent_id == "team":
+                                    yield {
+                                        "type": "reasoning_update",
+                                        "session": session,
+                                        "agent_status": ("team", "working", "Processing...")
+                                    }
+                                    continue  # 跳過設為 Idle 的步驟
+
+                                # B. 如果是 Member：做完工作了
+                                if agent_id in active_agents:
+                                    active_agents.remove(agent_id)
+
+                                # B-1. 成員變灰 (下班)
+                                yield {
+                                    "type": "reasoning_update",
+                                    "session": session,
+                                    "agent_status": (agent_id, "idle", "Standby")
+                                }
+
+                                # 🔥🔥 B-2. (關鍵新增) Leader 立刻接手 (上班) 🔥🔥
+                                # 這消除了成員做完 -> Leader 分派下一個任務之間的空窗期
+                                yield {
+                                    "type": "reasoning_update",
+                                    "session": session,
+                                    "agent_status": ("team", "working", "Reviewing results...")
+                                }
+
+                            # 3. 捕捉 Report 內容
+                            elif event.event == RunEvent.run_content and event.agent_id == "presenter":
+                                report_content += event.content
+                                yield {
+                                    "type": "report_stream",
+                                    "content": report_content,
+                                    "session": session
+                                }
+
+                            # 4. Team Delegate (分派任務)
+                            elif event.event == TeamRunEvent.tool_call_started:
+                                tool_name = event.tool.tool_name
+
+                                # Leader 顯示正在指揮
+                                yield {
+                                    "type": "reasoning_update",
+                                    "session": session,
+                                    "agent_status": ("team", "working", "Orchestrating...")
+                                }
+
+                                if "delegate_task_to_member" in tool_name:
+                                    member_id = event.tool.tool_args.get("member_id", "unknown")
+                                    msg = f"Delegating to {member_id}..."
+                                    self._add_reasoning(session, "team", f"👉 {msg}")
+
+                                    # 成員亮燈 (接單)
+                                    yield {
+                                        "type": "reasoning_update",
+                                        "session": session,
+                                        "agent_status": (member_id, "working", "Receiving Task...")
+                                    }
+                                else:
+                                    self._add_reasoning(session, "team", f"🔧 Tool: {tool_name}")
+
+                            # 5. Member Tool Start
+                            elif event.event == RunEvent.tool_call_started:
+                                member_id = event.agent_id
+                                tool_name = event.tool.tool_name
+
+                                # 雙重保險：Member 在用工具時，Leader 也是亮著的 (Monitoring)
+                                yield {
+                                    "type": "reasoning_update",
+                                    "session": session,
+                                    "agent_status": ("team", "working", f"Monitoring {member_id}...")
+                                }
+
+                                self._add_reasoning(session, member_id, f"Using tool: {tool_name}...")
+                                yield {
+                                    "type": "reasoning_update",
+                                    "session": session,
+                                    "agent_status": (member_id, "working", f"Running Tool...")
+                                }
+
+                            # 6. Team Complete
+                            elif event.event == TeamRunEvent.run_completed:
+                                self._add_reasoning(session, "team", "🎉 Planning process finished")
+
+
+                        if not has_content:
+                            logger.error(f"⚠️ Attempt {attempt}: Agent returned NO content (Silent Failure).")
+                            if attempt < max_retries:
+                                continue  # 重試 while loop
+                            else:
+                                raise ValueError("Agent failed to generate output after retries.")
+
+                        break
+
+                finally:
+                    logger.info(f"Total tokens: {event.metrics.total_tokens}")
+                    logger.info(f"Input tokens: {event.metrics.input_tokens}")
+                    logger.info(f"Output tokens: {event.metrics.output_tokens}")
+                    logger.info(f"Run time (s): {time.perf_counter() - start_time}")
+
+            for agent in ["scout", "optimizer", "navigator", "weatherman", "presenter"]:
+                yield {
+                    "type": "reasoning_update",
+                    "session": session,
+                    "agent_status": (agent, "idle", "Standby")
+                }
 
-                logger.info(f"Total tokens: {event.metrics.total_tokens}")
-                logger.info(f"Input tokens: {event.metrics.input_tokens}")
-                logger.info(f"Output tokens: {event.metrics.output_tokens}")
-                logger.info(f"Run time (s): {time.perf_counter() - start_time}")
+                # Leader 顯示完成
+            yield {
+                "type": "reasoning_update",
+                "session": session,
+                "agent_status": ("team", "complete", "All Done!")
+            }
 
             # 迴圈結束
             session.final_report = report_html = f"## 🎯 Planning Complete\n\n{report_content}"
@@ -587,6 +743,12 @@ class PlannerService:
                 "agent_status": ("team", "complete", "Finished")
             }
 
+        except Exception as e:
+            logger.error(f"Error in attempt {attempt}: {e}")
+            if attempt >= max_retries:
+                yield {"type": "error", "message": str(e), "session": session}
+                return
+
         except Exception as e:
             logger.error(f"Team run error: {e}", exc_info=True)
             yield {"type": "error", "message": str(e), "session": session}

src/__init__.py

@@ -0,0 +1 @@
+__version__ = "1.0.0"

src/agent/setting/planner.py

@@ -32,7 +32,7 @@ instructions = """
 
         ### 2. Global Info Strategy (CRITICAL: Start Location)
         - **language**: Match user's language (e.g., `en-US`, `zh-TW`).
-        - **plan_type**: Detect intent. Returns `TRIP` (Fun) or `SCHEDULE` (Errands).
+        - **plan_type**: Detect intent. Returns `TRIP` (Fun/Inter-city) or `SCHEDULE` (Errands/Local).
         - **departure_time**: See "Smart Start Logic" above.
         - **start_location Logic**:
           1. **User Specified**: If user explicitly names a start point (e.g., "From Grand Hyatt"), use that.
@@ -42,16 +42,26 @@ instructions = """
 
 ---
 
-        ### 3. Task Generation & Duration Rules
+        ### 3. Task Generation & Geographical Consistency (CRITICAL)
         - **task_id**: Unique integer starting from 1.
         - **description**: Short, clear task name.
         - **priority**: `HIGH`, `MEDIUM`, `LOW`.
-        - **location_hint**: Specific POI name searchable on Google Maps.
+        - **category**: `MEDICAL`, `SHOPPING`, `MEAL`, `LEISURE`, `ERRAND`.
+
+        🔥🔥 **location_hint RULES (Prevent Hallucinations)** 🔥🔥:
+        1. **Specific POI**: If user says "Taipei 101", use "Taipei 101".
+        2. **Generic POI (e.g., "Post Office", "7-11", "Park")**:
+           - **IF plan_type == TRIP**: Append the **Destination City** name (e.g., "Post Office Kyoto").
+           - **IF plan_type == SCHEDULE (Local)**: 
+             - You MUST NOT append a random city name.
+             - Keep it generic (e.g., just "Post Office") OR append the **User's Current City** from context.
+             - **FORBIDDEN**: Do not generate "Kaohsiung Post Office" if the user is in "Tainan".
+        3. **Searchability**: The hint must be a valid Google Maps search query.
+
         - **service_duration_min**:
           - Sightseeing: **90-120m**
           - Meal: **60-90m**
           - Errands: **15-45m**
-        - **category**: `MEDICAL`, `SHOPPING`, `MEAL`, `LEISURE`, `ERRAND`.
 
 ---
 
@@ -69,6 +79,28 @@ instructions = """
           - `time_window`: `{"earliest_time": "...", "latest_time": "..."}`
           - Use `null` if absolutely no time constraint exists.
 
+---
+
+        ### 5. JSON Output Format
+        Output ONLY valid JSON inside `@@@@@` delimiters.
+        Example:
+        @@@@@
+        {
+          "global_info": { ... },
+          "tasks": [ ... ]
+        }
+        - **General Tasks (Max Flexibility)**:
+          - Unless specified, use the POI's full operating hours.
+          - Make the window as **wide** as possible to allow the solver to optimize the route.
+        - **Meal Tasks (Fixed Logic)**:
+          - Meals act as anchors. Do NOT use infinite windows. Use logical meal times:
+          - **Breakfast**: ~ `07:00` to `10:00`
+          - **Lunch**: ~ `11:30` to `14:30`
+          - **Dinner**: ~ `17:30` to `20:30`
+        - **Format**:
+          - `time_window`: `{"earliest_time": "...", "latest_time": "..."}`
+          - Use `null` if absolutely no time constraint exists.
+
 ---
 
         ### 5. JSON Output Format

src/optimization/tsptw_solver.py

@@ -76,7 +76,7 @@ class TSPTWSolver:
             deadline: datetime,
             tasks: List[Dict[str, Any]] = None,
             travel_mode="DRIVE",
-            max_wait_time_min: int = 30,
+            max_wait_time_min: int = 10,
             alt_k: int = 3,
             return_to_start: bool = True,
     ) -> Dict[str, Any]:

src/tools/optimizer_toolkit.py

@@ -18,6 +18,7 @@ class OptimizationToolkit(Toolkit):
 
     def optimize_from_ref(self, ref_id: str) -> str:
         """
+
         從 Ref ID 載入資料並執行路徑優化。
         """
         print(f"🧮 Optimizer: Fetching data for {ref_id}...")
@@ -74,6 +75,7 @@ class OptimizationToolkit(Toolkit):
                 start_time=start_time,
                 deadline=deadline,
                 tasks=tasks,
+                max_wait_time_min=0,
                 return_to_start=False
             )
         except Exception as e:

ui/__init__.py

@@ -0,0 +1 @@
+__version__ = "1.0.0"

ui/components/header.py

@@ -8,12 +8,11 @@ import gradio as gr
 def create_header():
     """
     創建優化後的 Header：
-    - Logo 區塊保留在原有容器中
-    - 按鈕區塊移出 app-header-container，避免被父級的 backdrop-filter 捕獲
+    - Logo 保留
+    - 按鈕改為垂直排列 (使用 gr.Column)
     """
     # 1. Header 容器 (只放 Logo)
     with gr.Row(elem_classes="app-header-container"):
-        # 左側：Logo 和標題 (佔滿寬度，因為按鈕已經飛出去了)
         with gr.Column(scale=1):
             gr.HTML("""
             <div class="app-header-left">
@@ -29,12 +28,13 @@ def create_header():
             </div>
             """)
 
-    # 2. 功能按鈕 (移出上面的 Row，獨立存在)
-    # 因為 CSS 設定了 position: fixed，它們會自動飛到右上角，不受文檔流影響
-    with gr.Row(elem_classes="header-controls"):
+    # 2. 功能按鈕 (垂直懸浮)
+    # 🔥 修改：改用 gr.Column 讓它在結構上就是垂直的
+    with gr.Column(elem_classes="header-controls"):
         home_btn = gr.Button("🏠", size="sm", elem_classes="header-btn")
-        theme_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
+    # 注意 return 的數量要跟上面定義的一致
+    return home_btn, settings_btn, doc_btn #, theme_btn

ui/components/modals.py

@@ -1,69 +1,108 @@
+# ui/components/modals.py
 import gradio as gr
-
-import gradio as gr
+from config import MODEL_OPTIONS, DEFAULT_PROVIDER, DEFAULT_MODEL
 
 
-def create_settings_modal():
+def create_validated_input(label, placeholder, type="password"):
     """
-    創建設定彈窗 (Modal) - 雙欄佈局優化版
-    回傳 9 個元件 (新增了 llm_provider)
+    Helper: 創建自動驗證的輸入框組件 (無按鈕版)
+    回傳: (textbox, status_markdown)
     """
+    with gr.Group():
+        key_input = gr.Textbox(
+            label=label,
+            placeholder=placeholder,
+            type=type,
+            elem_classes="modern-input"
+        )
+        # 狀態訊息預設為空，驗證後顯示
+        status_output = gr.Markdown(value="", elem_classes="api-status-msg")
+
+    return key_input, status_output
+
+
+def create_settings_modal():
     with gr.Group(visible=False, elem_classes="modal-overlay", elem_id="settings-modal") as modal:
         with gr.Group(elem_classes="modal-box"):
             with gr.Row(elem_classes="modal-header"):
-                gr.Markdown("### ⚙️ System Configuration", elem_classes="modal-title")
+                gr.Markdown("### ⚙️ Hybrid System Configuration", elem_classes="modal-title")
 
             with gr.Column(elem_classes="modal-content"):
                 with gr.Tabs():
-                    # === 分頁 1: API Keys ===
-                    with gr.TabItem("🔑 API Keys"):
-                        gr.Markdown("Configure your service credentials below.", elem_classes="tab-desc")
-
-                        g_key = gr.Textbox(label="Google Maps Platform Key", placeholder="AIza...", type="password")
-                        w_key = gr.Textbox(label="OpenWeatherMap Key", placeholder="Enter key...",
-                                           type="password")
-
-                        # ⭐ 修改開始：將原本單獨的 gem_key 改為左右佈局 ⭐
-                        with gr.Row(equal_height=True):  # 確保高度對齊
-                            # 左側：供應商選擇 (短)
-                            with gr.Column(scale=1, min_width=100):
-                                llm_provider = gr.Dropdown(
-                                    choices=["Gemini"], #, "OpenAI", "Anthropic"
-                                    value="Gemini",
-                                    label="Provider",
-                                    interactive=True,
-                                    elem_id="provider-dropdown"  # 方便 CSS 微調
-                                )
-
-                            # 右側：API Key 輸入 (長)
-                            with gr.Column(scale=3):
-                                gem_key = gr.Textbox(
-                                    label="Model API Key",
-                                    placeholder="sk-...",
-                                    type="password"
-                                )
-                        # ⭐ 修改結束 ⭐
-
-                    # === 分頁 2: Model Settings ===
-                    with gr.TabItem("🤖 Model Settings"):
-                        gr.Markdown("Select the AI model engine for trip planning.", elem_classes="tab-desc")
+                    # === 1. Services ===
+                    with gr.TabItem("🌍 Services"):
+                        gr.Markdown("External services for maps and weather.", elem_classes="tab-desc")
+
+                        # 🔥 使用新 Helper (沒有按鈕了)
+                        g_key, g_stat = create_validated_input("Google Maps Key", "AIza...")
+                        w_key, w_stat = create_validated_input("OpenWeather Key", "Enter key...")
+
+                    # === 2. Primary Brain ===
+                    with gr.TabItem("🧠 Primary Brain"):
+                        gr.Markdown("Select the main intelligence.", elem_classes="tab-desc")
+
+                        # 這裡佈局稍微調整，把 Key 單獨放一行，比較乾淨
+                        llm_provider = gr.Dropdown(
+                            choices=list(MODEL_OPTIONS.keys()),
+                            value=DEFAULT_PROVIDER,
+                            label="Main Provider",
+                            interactive=True,
+                            elem_classes="modern-dropdown"
+                        )
+
+                        # 主模型 Key
+                        main_key, main_stat = create_validated_input("Main Model API Key", "sk-...")
+
                         model_sel = gr.Dropdown(
-                            choices=["gemini-2.5-flash"], #, "gemini-1.5-flash", "gpt-4o"
-                            value="gemini-2.5-flash",
-                            label="AI Model",
+                            choices=MODEL_OPTIONS[DEFAULT_PROVIDER],
+                            value=DEFAULT_MODEL,
+                            label="Main Model",
                             interactive=True,
-                            info="Only support 2.5-flash"
-                            # "Only models supported by your selected provider will be shown."
+                            elem_classes="modern-dropdown"
                         )
 
+                    # === 3. Acceleration ===
+                    with gr.TabItem("⚡ Acceleration"):
+                        gr.Markdown("Configure Groq for speed.", elem_classes="tab-desc")
+
+                        fast_mode_chk = gr.Checkbox(
+                            label="Enable Fast Mode",
+                            value=False,
+                            elem_classes="modern-checkbox"
+                        )
+
+                        groq_model_sel = gr.Dropdown(
+                            choices=[
+                                     ("Llama 3.1 8B", "llama-3.1-8b-instant"),
+                                     ("GPT-OSS 20B", "openai/gpt-oss-20b"),
+                                     ("Llama 4 scout", "llama-4-scout-17b-16e-instructe")
+                                     ],
+                            value="llama-3.1-8b-instant",
+                            label="Model",
+                            elem_classes="modern-dropdown",
+                            visible = False  # <--- 預設隱藏
+                        )
+
+                        # Groq Key
+                        groq_key, groq_stat = create_validated_input("Groq API Key", "gsk_...")
+
+                        # 手動設定初始狀態為隱藏 (Gradio 小技巧: 定義後再 update)
+                        groq_key.visible = False
+
+                # 全局狀態
                 set_stat = gr.Markdown(value="", visible=True)
 
             with gr.Row(elem_classes="modal-footer"):
-                close_btn = gr.Button("Cancel", variant="secondary")
-                save_btn = gr.Button("💾 Save Configuration", variant="primary")
-
-    # 🔥 重要：這裡現在回傳 9 個變數 (新增了 llm_provider)
-    return modal, g_key, w_key, llm_provider, gem_key, model_sel, close_btn, save_btn, set_stat
+                close_btn = gr.Button("Cancel", variant="secondary", elem_classes="btn-cancel")
+                save_btn = gr.Button("💾 Save", variant="primary", elem_id="btn-save-config")
+
+    # 🔥 回傳清單變短了 (少了 4 個按鈕)
+    return (modal,
+            g_key, g_stat,
+            w_key, w_stat,
+            llm_provider, main_key, main_stat, model_sel,
+            fast_mode_chk, groq_model_sel, groq_key, groq_stat,
+            close_btn, save_btn, set_stat)
 
 
 def create_doc_modal():

ui/theme.py

@@ -56,44 +56,36 @@ def get_enhanced_css() -> str:
     }
 
     .header-controls {
-        position: fixed !important;       /* 關鍵：脫離文檔流，固定在視窗 */
-        top: 25px !important;             /* 距離視窗頂部 25px */
-        right: 25px !important;           /* 距離視窗右側 25px */
-        z-index: 99999 !important;        /* 關鍵：設得夠大，確保浮在所有內容最上面 */
+        position: fixed !important;       /* 固定定位 */
+        top: 30px !important;             /* 距離頂部 */
+        right: 30px !important;           /* 距離右側 */
+        z-index: 99999 !important;        /* 最上層 */
         
         display: flex !important;
-        flex-direction: row !important;
-        gap: 10px !important;
-        align-items: center !important;
+        flex-direction: column !important; /* 🔥 關鍵：改為垂直排列 */
+        gap: 12px !important;             /* 按鈕間距 */
+        align-items: center !important;   /* 水平置中 */
         
-        /* 視覺優化：半透明毛玻璃膠囊背景 */
-        background: rgba(255, 255, 255, 0.85) !important;
-        backdrop-filter: blur(12px) !important; /* 背景模糊效果 */
-        padding: 8px 16px !important;
-        border-radius: 99px !important;   /* 圓形膠囊狀 */
+        /* 視覺優化：垂直膠囊 */
+        background: rgba(255, 255, 255, 0.9) !important;
+        backdrop-filter: blur(12px) !important;
+        padding: 12px 8px !important;     /* 上下寬鬆，左右緊湊 */
+        border-radius: 50px !important;   /* 大圓角 */
         border: 1px solid rgba(255, 255, 255, 0.6) !important;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
         
-        width: auto !important;           /* 讓寬度隨按鈕數量自動縮放，不要佔滿整行 */
+        width: auto !important;
         min-width: 0 !important;
+        height: auto !important;
     }
 
+    /* 按鈕微調 (確保按鈕是圓的) */
     .header-btn {
-        min-width: 44px !important;
-        max-width: 44px !important;
-        height: 44px !important;
-        padding: 0 !important;
-        border-radius: 50% !important;
-        background: transparent !important;
-        border: 1px solid #e2e8f0 !important;
-        box-shadow: none !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;
+        min-width: 40px !important;
+        max-width: 40px !important;
+        height: 40px !important;
+        font-size: 1.1rem !important;
+        margin: 0 !important;
     }
 
     .header-btn:hover {
@@ -420,42 +412,148 @@ def get_enhanced_css() -> str:
     /* 2. 彈窗本體 (Modal Box) */
     .modal-box {
         background: white !important;
-        width: 100% !important;
-        max-width: 500px !important;    /* 限制最大寬度 */
-        border-radius: 16px !important;
+        border-radius: 24px !important;
         box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-        border: 1px solid rgba(255, 255, 255, 0.3) !important;
+        border: 1px solid rgba(255, 255, 255, 0.6) !important;
         overflow: hidden !important;
-        padding: 0 !important;          /* 移除 Gradio 預設內距 */
-        position: relative !important;
-        animation: modal-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+        
+        /* 🔥 寬度加大，讓橫向空間更舒服 */
+        max-width: 600px !important; 
+        width: 100% !important;
+        
+        display: flex !important;
+        flex-direction: column !important;
+        max-height: 90vh !important; /* 最大高度放寬到 90% 視窗高度 */
     }
 
-    /* 3. 彈窗內部佈局微調 */
-    .modal-header {
-        padding: 20px 24px 0 24px !important;
-        background: white !important;
+    /* 2. 內容區域 */
+    .modal-content {
+        padding: 0 24px 10px 24px !important;
+        overflow-y: auto !important;
+        flex-grow: 1 !important;
+        
+        /* 🔥🔥🔥 關鍵修正：最小高度加大 🔥🔥🔥 */
+        /* 原本 300px -> 改為 500px，確保所有欄位都能直接顯示不用捲動 */
+        min-height: 500px !important; 
+    }
+
+    /* 3. Footer (保持不變) */
+    .modal-footer {
+        background: #f8fafc !important;
+        padding: 20px 24px !important;
+        border-top: 1px solid #f1f5f9 !important;
+        gap: 12px !important;
+        flex-shrink: 0 !important;
+        height: auto !important;
+        display: flex !important;
+        align-items: center !important;
     }
     
     .modal-title h3 {
-        margin: 0 !important;
         font-size: 1.5rem !important;
-        color: #1e293b !important;
+        font-weight: 800 !important;
+        background: linear-gradient(135deg, #4f46e5, #9333ea); /* 藍紫漸層 */
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-bottom: 4px !important;
+    }
+    
+    .tab-desc p {
+        font-size: 0.9rem !important;
+        color: #64748b !important;
+        margin-bottom: 16px !important;
+    }
+    
+    /* 3. 輸入框美化 (移除預設的生硬邊框) */
+    .modern-input textarea, .modern-input input {
+        background-color: #f8fafc !important;
+        border: 1px solid #e2e8f0 !important;
+        border-radius: 12px !important;
+        padding: 10px 14px !important;
+        transition: all 0.2s ease;
+        font-size: 0.95rem !important;
+    }
+
+    .modern-input textarea:focus, .modern-input input:focus {
+        background-color: white !important;
+        border-color: #6366f1 !important;
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
+    }
+    
+    /* 4. Dropdown 美化 & 修復寬度問題 */
+    .modern-dropdown .wrap-inner {
+        background-color: #f8fafc !important;
+        border-radius: 12px !important;
+        border: 1px solid #e2e8f0 !important;
+    }
+    
+    /* 修復文字被切斷的問題 */
+    #provider-dropdown {
+        min-width: 150px !important; /* 強制最小寬度 */
+    }
+    
+    /* 5. 按鈕美化 */
+    .modal-footer {
+        background: #f8fafc !important;
+        padding: 20px 24px !important;
+        border-top: 1px solid #f1f5f9 !important;
+        gap: 12px !important;
+    }
+
+    /* Cancel 按鈕：柔和灰 */
+    .btn-cancel {
+        background: white !important;
+        border: 1px solid #e2e8f0 !important;
+        color: #64748b !important;
+        border-radius: 10px !important;
+        font-weight: 500 !important;
+    }
+    .btn-cancel:hover {
+        background: #f1f5f9 !important;
+        color: #334155 !important;
+    }
+
+    /* Save 按鈕：品牌漸層紫 (取代橘色) */
+    #btn-save-config {
+        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
+        border: none !important;
+        color: white !important;
+        border-radius: 10px !important;
+        font-weight: 600 !important;
+        box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3) !important;
+        transition: transform 0.1s !important;
+    }
+
+    #btn-save-config:hover {
+        opacity: 0.95 !important;
+        box-shadow: 0 6px 10px -1px rgba(99, 102, 241, 0.4) !important;
+        transform: translateY(-1px) !important;
+    }
+    
+    #btn-save-config:active {
+        transform: translateY(0) !important;
     }
 
+    /* 2. 內容區域：設定最小高度，並讓它吃掉剩餘空間 */
     .modal-content {
         padding: 0 24px 10px 24px !important;
-        max-height: 60vh !important;
-        overflow-y: auto !important; /* 內容太長時可捲動 */
+        overflow-y: auto !important;
+        flex-grow: 1 !important;     /* 🔥 關鍵：佔據剩餘空間 */
+        min-height: 300px !important; /* 🔥 關鍵：設定最小高度，防止內容太少時視窗縮成一團 */
     }
 
+    /* 3. Footer：固定高度，不要拉伸 */
     .modal-footer {
-        padding: 16px 24px 24px 24px !important;
         background: #f8fafc !important;
-        border-top: 1px solid #e2e8f0 !important;
+        padding: 20px 24px !important;
+        border-top: 1px solid #f1f5f9 !important;
+        gap: 12px !important;
+        
+        /* 🔥 關鍵：防止 Footer 被拉高 */
+        flex-shrink: 0 !important; 
+        height: auto !important;
         display: flex !important;
-        justify-content: flex-end !important;
-        gap: 10px !important;
+        align-items: center !important; /* 垂直置中，防止按鈕變形 */
     }
 
     /* 彈出動畫 */
@@ -546,5 +644,33 @@ def get_enhanced_css() -> str:
         background: #94a3b8 !important; /* 加深灰色 */
         opacity: 0.6 !important;
     }
+    
+    .tabs > .tab-nav > button {
+        color: #64748b !important;
+        font-weight: 500 !important;
+    }
+
+    /* 選中的 Tab：品牌紫色 + 紫色底線 */
+    .tabs > .tab-nav > button.selected {
+        color: #6366f1 !important;           /* 文字變紫 */
+        border-bottom-color: #6366f1 !important; /* 底線變紫 */
+        border-bottom-width: 2px !important;
+        font-weight: 700 !important;
+    }
+    
+    .api-status-msg p {
+        font-size: 0.8rem !important;
+        margin-top: 6px !important;
+        margin-left: 8px !important;
+        font-weight: 600 !important;
+        font-family: 'Inter', sans-serif !important;
+        color: #64748b; /* 預設灰色 */
+    }
+    
+    /* 讓輸入框和狀態訊息之間更緊湊 */
+    .api-status-msg {
+        min-height: 20px !important; /* 預留高度防止跳動 */
+    }
+    
     </style>
     """