feat: improve UI/UX

feat: update README.md info

README.md

@@ -25,7 +25,7 @@ tags:
 
 ### Team Information:
 - **Man-Ho Li** - [@Marco310](https://huggingface.co/Marco310) - Lead Developer & AI Architect
-- ** ** - [@]() - Technical Consultant & Marketing Director
+- **Chen-Yang Yu** - [@LittleFish-Coder](https://huggingface.co/LittleFish-Coder) - Technical Consultant & Marketing Director
 
 
 ## 📺 Demo & Submission

app.py

@@ -321,8 +321,14 @@ class LifeFlowAI:
                                 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.Group(elem_classes="chat-panel-native"):
+                            chatbot = gr.Chatbot(
+                                label="AI Assistant",
+                                type="messages",
+                                height=575,
+                                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)
@@ -339,7 +345,8 @@ class LifeFlowAI:
                         with gr.Tabs():
                             with gr.Tab("📝 Full Report"):
                                 with gr.Group(elem_classes="live-report-wrapper"):
-                                    live_report_md = gr.Markdown()
+                                    live_report_md = gr.Markdown("🧠 Analyzing your tasks...")
+
                             with gr.Tab("📋 Task List"):
                                 with gr.Group(elem_classes="panel-container"):
                                     with gr.Group(elem_classes="scrollable-content"):
@@ -351,18 +358,53 @@ class LifeFlowAI:
                             planning_log = gr.HTML(value="Waiting...")
 
             with gr.Group(visible=False, elem_classes="step-container") as step4_container:
-                with gr.Row():
-                    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"):
-                                with gr.Group(elem_classes="live-report-wrapper"):
-                                    report_tab_output = gr.Markdown()
-                            with gr.Tab("📋 Task List"):
-                                task_list_tab_output = gr.HTML()
-                    with gr.Column(scale=2, elem_classes="split-right-panel"):
-                        map_view = gr.HTML(label="Route Map")
+                # 定義狀態：抽屜預設開啟
+                drawer_state = gr.State(True)
+
+                with gr.Tabs():
+                    # === Tab 1: 地圖 ===
+                    with gr.Tab("🗺️ Route Map", id="tab_map"):
+                        with gr.Group(elem_classes="map-container-relative"):
+                            # 1. 地圖 (HTML)
+                            # 注意：確保這裡是 map_view
+                            map_view = gr.HTML(label="Route Map")
+
+                            # 2. 浮動抽屜 (Overlay)
+                            with gr.Group(visible=True, elem_classes="map-overlay-drawer") as summary_drawer:
+                                with gr.Row(elem_classes="drawer-header"):
+                                    gr.Markdown("### 📊 Trip Summary", elem_classes="drawer-title")
+                                    close_drawer_btn = gr.Button("✕", elem_classes="drawer-close-btn", size="sm")
+
+                                with gr.Group(elem_classes="drawer-content"):
+                                    with gr.Tabs(elem_classes="drawer-tabs"):
+                                        with gr.Tab("Overview"):
+                                            summary_tab_output = gr.HTML()
+                                        with gr.Tab("Tasks"):
+                                            task_list_tab_output = gr.HTML()
+
+                            # 3. 開啟按鈕 (浮動，預設隱藏)
+                            # 加上 variant='primary' 確保它醒目
+                            open_drawer_btn = gr.Button("📊 Show Summary", visible=False, variant="primary",
+                                                        elem_classes="map-overlay-btn")
+
+                    # === Tab 2: 完整報告 ===
+                    with gr.Tab("📝 Full Report", id="tab_report"):
+                        # 使用 live-report-wrapper 確保有白紙背景效果
+                        with gr.Group(elem_classes="live-report-wrapper"):
+                            report_tab_output = gr.Markdown()
+
+                # === 事件綁定 (控制抽屜) ===
+                # 關閉：抽屜消失，按鈕出現
+                close_drawer_btn.click(
+                    fn=lambda: (gr.update(visible=False), gr.update(visible=True)),
+                    outputs=[summary_drawer, open_drawer_btn]
+                )
+
+                # 開啟：抽屜出現，按鈕消失
+                open_drawer_btn.click(
+                    fn=lambda: (gr.update(visible=True), gr.update(visible=False)),
+                    outputs=[summary_drawer, open_drawer_btn]
+                )
 
             # --- Modals & Events ---
             (settings_modal, g_key, g_stat, w_key, w_stat, llm_provider, main_key, main_stat, model_sel,
@@ -434,7 +476,7 @@ def main():
             demo = app.build_interface()
             demo.launch(
                 server_name="0.0.0.0",
-                server_port=8100,
+                server_port=8300,
                 share=True,
                 show_error=True,
                 prevent_thread_lock=True

config.py

@@ -5,6 +5,8 @@ LifeFlow AI - Configuration
 
 import os
 from pathlib import Path
+from dotenv import load_dotenv
+load_dotenv()  # 這行會自動尋找並讀取專案根目錄下的 .env 檔案
 
 # ===== 系統預設值 =====
 BASE_DIR = Path(__file__).parent
@@ -346,7 +348,7 @@ def check_environment():
     """檢查環境配置是否完整"""
     missing_keys = []
 
-    required_keys = ['GEMINI_API_KEY', 'GOOGLE_MAPS_API_KEY']
+    required_keys = ['GOOGLE_API_KEY', 'GOOGLE_MAPS_API_KEY', "OPENWEATHER_API_KEY", "GROQ_API_KEY"]
 
     for key in required_keys:
         if not os.getenv(key):

core/visualizers.py

@@ -1,13 +1,23 @@
 import folium
 from folium import plugins
-from folium.plugins import PolyLineTextPath  # <--- 新增這個 import
+from folium.plugins import PolyLineTextPath
 from core.helpers import decode_polyline
 from src.infra.logger import get_logger
 
 logger = get_logger(__name__)
 
+# 🔥 CSS 修正：加入 body/html 的重置，確保地圖填滿 iframe，不會有白邊
 CSS_STYLE = """
 <style>
+    html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+    .folium-map {
+        height: 100%;
+        width: 100%;
+    }
     .map-card {
         font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
         width: 300px;
@@ -94,7 +104,6 @@ def create_popup_html(title, subtitle, color, metrics, is_alternative=False):
         'route': '#4285F4'
     }.get(color, '#34495e')
 
-    # 如果是 Route 但傳入了 hex color，直接使用
     if color.startswith('#'):
         bg_color = color
 
@@ -134,19 +143,18 @@ def create_popup_html(title, subtitle, color, metrics, is_alternative=False):
 
 def create_animated_map(structured_data=None):
     """
-    LifeFlow AI - Interactive Map Generator with Directional Arrows
+    LifeFlow AI - Interactive Map Generator
     """
-    # 1. 初始化地圖
     center_lat, center_lon = 25.033, 121.565
 
-    # 嘗試從數據中獲取中心點，否則預設台北
     if structured_data and structured_data.get("global_info", {}).get("start_location"):
         sl = structured_data["global_info"]["start_location"]
         if "lat" in sl and "lng" in sl:
             center_lat, center_lon = sl["lat"], sl["lng"]
 
+    # 🔥 Map修正 1: height="100%" 讓它自動填滿父容器 (ui/theme.py 定義的 650px)
     m = folium.Map(location=[center_lat, center_lon], zoom_start=13, tiles="OpenStreetMap",
-                   height=520,
+                   height="100%",
                    width="100%"
                    )
 
@@ -156,7 +164,6 @@ def create_animated_map(structured_data=None):
         return m._repr_html_()
 
     try:
-        # --- 資料提取 ---
         timeline = structured_data.get("timeline", [])
         precise_result = structured_data.get("precise_traffic_result", {})
         legs = precise_result.get("legs", [])
@@ -164,7 +171,6 @@ def create_animated_map(structured_data=None):
         raw_tasks = structured_data.get("tasks", [])
         route_info = structured_data.get("route", [])
 
-        # 建立查找表
         index_to_name = {stop.get("stop_index"): stop.get("location") for stop in timeline}
 
         poi_id_to_name = {}
@@ -180,7 +186,6 @@ def create_animated_map(structured_data=None):
 
         bounds = []
 
-        # 定義顏色主題 (Green -> Blue -> Red -> Orange -> Purple)
         THEMES = [
             ('#2ecc71', 'green'),
             ('#3498db', 'blue'),
@@ -189,7 +194,7 @@ def create_animated_map(structured_data=None):
             ('#9b59b6', 'purple')
         ]
 
-        # --- Layer 1: 路線 (帶箭頭的彩色路段) ---
+        # --- Layer 1: 路線 ---
         route_group = folium.FeatureGroup(name="🚗 Route Path", show=True)
 
         for i, leg in enumerate(legs):
@@ -205,20 +210,16 @@ def create_animated_map(structured_data=None):
             from_n = index_to_name.get(from_idx, f"Point {from_idx}")
             to_n = index_to_name.get(to_idx, f"Point {to_idx}")
 
-            # 🔥 顏色邏輯：這段路的顏色 = 目的地的 Marker 顏色
-            # to_index 對應到 timeline 的 index
-            # 我們用 to_index 來決定顏色循環
             theme_idx = to_idx % len(THEMES)
             color_hex, color_name = THEMES[theme_idx]
 
             popup_html = create_popup_html(
                 title=f"LEG {i + 1}",
                 subtitle=f"{from_n} ➔ {to_n}",
-                color=color_hex,  # 直接傳入 HEX
+                color=color_hex,
                 metrics={"Duration": f"{dur} min", "Distance": f"{dist / 1000:.1f} km"}
             )
 
-            # 1. 畫實線
             line = folium.PolyLine(
                 locations=decoded,
                 color=color_hex,
@@ -229,71 +230,83 @@ def create_animated_map(structured_data=None):
             )
             line.add_to(route_group)
 
-            # 2. 🔥 加箭頭 (PolyLineTextPath)
-            # 使用 ' ➤ ' 符號，並設定 repeat=True 讓它沿路出現
             PolyLineTextPath(
                 line,
-                "      ➤      ",  # 空格是為了調整箭頭密度
+                "      ➤      ",
                 repeat=True,
-                offset=7,  # 讓箭頭在線的中間
-                attributes={
-                    'fill': color_hex,  # 箭頭顏色跟線一樣
-                    'font-weight': 'bold',
-                    'font-size': '18'
-                }
+                offset=7,
+                attributes={'fill': color_hex, 'font-weight': 'bold', 'font-size': '18'}
             ).add_to(route_group)
 
         route_group.add_to(m)
 
-        # --- Layer 2: 備用方案 (Alternatives) ---
-        alt_group = folium.FeatureGroup(name="🔹 Alternatives", show=True)  # 合併成一個 Layer 比較整潔
+        # --- Layer 2: 備用方案 (分組修正) ---
+        # 🔥 Map修正 2: 不再使用單一的 alt_group，而是為每個任務建立獨立的 FeatureGroup
 
         for idx, task in enumerate(tasks_detail):
             tid = task.get("task_id")
             step_seq = task_id_to_seq.get(tid, 0)
 
+            # 取得該任務的主題色
             theme_idx = step_seq % len(THEMES)
             theme_color, theme_name = THEMES[theme_idx]
 
             chosen = task.get("chosen_poi", {})
-            if chosen is None:
+            alternatives = task.get("alternative_pois", [])
+
+            # 如果沒有備選點，就跳過
+            if not chosen or not alternatives:
                 continue
 
             center_lat, center_lng = chosen.get("lat"), chosen.get("lng")
+            if not center_lat or not center_lng:
+                continue
 
-            if center_lat and center_lng:
-                for alt in task.get("alternative_pois", []):
-                    alat, alng = alt.get("lat"), alt.get("lng")
-                    if alat and alng:
-                        bounds.append([alat, alng])
-                        folium.PolyLine(
-                            locations=[[center_lat, center_lng], [alat, alng]],
-                            color=theme_color, weight=2, dash_array='5, 5', opacity=0.5
-                        ).add_to(alt_group)
-
-                        poi_name = poi_id_to_name.get(alt.get("poi_id"), "Alternative Option")
-                        extra_min = alt.get("delta_travel_time_min", 0)
-
-                        popup_html = create_popup_html(
-                            title="ALTERNATIVE",
-                            subtitle=poi_name,
-                            color="gray",
-                            metrics={
-                                "Add. Time": f"+{extra_min} min",
-                            },
-                            is_alternative=True
-                        )
-
-                        folium.CircleMarker(
-                            location=[alat, alng], radius=5,
-                            color=theme_color, fill=True, fill_color="white", fill_opacity=1,
-                            popup=folium.Popup(popup_html, max_width=320),
-                            tooltip=f"Alt: {poi_name}"
-                        ).add_to(alt_group)
-
-        alt_group.add_to(m)
-
-        # --- Layer 3: 主要站點 (Markers) ---
+            # 取得主地點名稱 (用於圖層標籤)
+            chosen_name = poi_id_to_name.get(chosen.get("poi_id"), f"Task {idx + 1}")
+
+            # 🔥 建立該任務專屬的 Group，並預設顯示 (show=True)
+            # 圖層名稱範例: "↳ Alt: Taipei 101"
+            specific_alt_group = folium.FeatureGroup(
+                name=f"↳ Alt: {chosen_name}",
+                show=True
+            )
+
+            for alt in alternatives:
+                alat, alng = alt.get("lat"), alt.get("lng")
+                if alat and alng:
+                    bounds.append([alat, alng])
+
+                    # 虛線連接
+                    folium.PolyLine(
+                        locations=[[center_lat, center_lng], [alat, alng]],
+                        color=theme_color, weight=2, dash_array='5, 5', opacity=0.5
+                    ).add_to(specific_alt_group)
+
+                    poi_name = poi_id_to_name.get(alt.get("poi_id"), "Alternative Option")
+                    extra_min = alt.get("delta_travel_time_min", 0)
+
+                    popup_html = create_popup_html(
+                        title="ALTERNATIVE",
+                        subtitle=poi_name,
+                        color="gray",
+                        metrics={
+                            "Add. Time": f"+{extra_min} min",
+                        },
+                        is_alternative=True
+                    )
+
+                    folium.CircleMarker(
+                        location=[alat, alng], radius=5,
+                        color=theme_color, fill=True, fill_color="white", fill_opacity=1,
+                        popup=folium.Popup(popup_html, max_width=320),
+                        tooltip=f"Alt: {poi_name}"
+                    ).add_to(specific_alt_group)
+
+            # 將這個任務的專屬 Group 加入地圖
+            specific_alt_group.add_to(m)
+
+        # --- Layer 3: 主要站點 ---
         stops_group = folium.FeatureGroup(name="📍 Stops", show=True)
 
         for i, stop in enumerate(timeline):
@@ -302,11 +315,8 @@ def create_animated_map(structured_data=None):
 
             if lat and lng:
                 bounds.append([lat, lng])
-
-                # 顏色邏輯：與 Leg 顏色保持一致 (index 決定)
                 theme_idx = i % len(THEMES)
                 color_code, theme_name = THEMES[theme_idx]
-
                 loc_name = stop.get("location", "")
 
                 popup_html = create_popup_html(
@@ -315,8 +325,8 @@ def create_animated_map(structured_data=None):
                     color=theme_name,
                     metrics={
                         "Arrival": stop.get("time", ""),
-                        "Weather": stop.get("weather", "").split(',')[0],  # 簡化顯示
-                        "AQI": stop.get("aqi", {}).get("label", "").split(' ')[-1]  # 只顯示 Emoji
+                        "Weather": stop.get("weather", "").split(',')[0],
+                        "AQI": stop.get("aqi", {}).get("label", "").split(' ')[-1]
                     }
                 )
 
@@ -327,7 +337,6 @@ def create_animated_map(structured_data=None):
                 else:
                     icon_type = 'map-marker'
 
-                # 使用 bevel 樣式讓 Marker 看起來更立體
                 icon = folium.Icon(color=theme_name, icon=icon_type, prefix='fa')
 
                 folium.Marker(
@@ -338,21 +347,13 @@ def create_animated_map(structured_data=None):
 
         stops_group.add_to(m)
 
-        # --- 控制元件 ---
         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}}]}
-
-    create_animated_map(structured_data=test_data)
+    return m._repr_html_()

services/planner_service.py

@@ -6,6 +6,7 @@ LifeFlow AI - Planner Service (Refactored for MCP Architecture)
 ✅ 保持業務邏輯不變
 """
 import json
+import os
 import time
 import uuid
 from datetime import datetime
@@ -145,7 +146,14 @@ class PlannerService:
         selected_model_id = settings.get("model", "gemini-2.5-flash")
         helper_model_id = settings.get("groq_fast_model", "openai/gpt-oss-20b")
         enable_fast_mode = settings.get("enable_fast_mode", False)
-        groq_api_key = settings.get("groq_api_key", "")
+
+        if main_api_key is None:
+            provider = "Gemini"
+            main_api_key = os.environ.get("GEMINI_API_KEY")
+            selected_model_id = "gemini-2.5-flash"
+            logger.warning("⚠️ Main API key not provided, defaulting to Gemini-2.5-flash with env var.")
+
+        groq_api_key = settings["groq_api_key"] if settings.get("groq_api_key") else os.environ.get("GROQ_API_KEY")
 
         # 初始化 Main Brain
         if provider.lower() == "gemini":

ui/renderers.py

@@ -2,7 +2,20 @@
 from typing import Union
 from datetime import datetime
 from config import AGENTS_INFO
-
+import json
+
+def _format_location(loc_data) -> str:
+    if isinstance(loc_data, dict):
+        return f"{loc_data.get('lat', 0):.4f}, {loc_data.get('lng', 0):.4f}"
+    if isinstance(loc_data, str) and "lat" in loc_data:
+        try:
+            # 嘗試把單引號換雙引號解析，解析失敗就回傳原字串
+            clean = loc_data.replace("'", '"')
+            data = json.loads(clean)
+            return f"{data.get('lat', 0):.2f}, {data.get('lng', 0):.2f}"
+        except:
+            pass
+    return str(loc_data)
 
 def _format_iso_time(iso_str: str) -> str:
     if not iso_str or iso_str == "N/A": return ""
@@ -19,31 +32,34 @@ def create_agent_stream_output(text: str = None) -> str:
 
 
 def create_agent_dashboard(status_dict: dict) -> str:
-    leader_key = 'team'
-    member_keys = ['scout', 'weatherman', 'optimizer', 'navigator', 'presenter']
+    # 定義順序
+    order = ['team', 'scout', 'weatherman', 'optimizer', 'navigator', 'presenter']
 
-    def _render_card(key):
+    cards_html = ""
+    for key in order:
         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 ""
+
+        is_working = status == 'working'
+        css_class = "working" if is_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>
+        # 簡單的卡片結構
+        cards_html += f"""
+        <div class="agent-status-card {css_class}">
+            <div class="agent-icon">{icon}</div>
+            <div class="agent-info">
                 <div class="agent-name">{name}</div>
-                <div class="agent-role">{role}</div>
-                <div class="status-badge">{msg}</div>
+                <div class="agent-msg">{msg}</div>
             </div>
         </div>
         """
 
+    return f'<div class="agent-status-row">{cards_html}</div>'
+
     html = f"""
     <div class="agent-war-room">
         <div class="org-chart">
@@ -61,40 +77,39 @@ def create_agent_dashboard(status_dict: dict) -> str:
     return html
 
 
-def create_summary_card(total_tasks: Union[str, int], high_priority: int, total_time: int, location: str = "Taipei City",
-                        date: str = "Today") -> str:
+def create_summary_card(total_tasks, high_priority, total_time, location="Taipei", date="Today") -> str:
+    clean_loc = _format_location(location)
+
+    # 這裡的 HTML 結構很單純，不會破壞佈局
     return f"""
-    <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 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 class="summary-card-modern">
+        <div class="summary-main">
+            <div class="summary-label">TRIP SUMMARY</div>
+            <div class="summary-loc">📍 {clean_loc}</div>
+            <div class="summary-date">📅 {date}</div>
         </div>
-        <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 class="summary-metrics">
+            <div class="metric-box">
+                <span class="m-val">{total_tasks}</span>
+                <span class="m-label">Tasks</span>
+            </div>
+            <div class="metric-box">
+                <span class="m-val">{total_time}<small>mins</small></span>
+                <span class="m-label">Duration</span>
             </div>
-            <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 class="metric-box alert">
+                <span class="m-val">{high_priority}</span>
+                <span class="m-label">High Prio</span>
             </div>
         </div>
     </div>
     """
 
 
-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")
+def create_task_card(task_num, task_title, priority, time_window, duration, location, icon="📋") -> str:
+    p_cls = priority.lower()  # high, medium, low
 
-    #print(f"{task_title}: {time_window}")
+    # --- 🔥 恢復 Time Window 邏輯 ---
     display_time = "Anytime"
     if isinstance(time_window, dict):
         s_clean = _format_iso_time(time_window.get('earliest_time', ''))
@@ -105,22 +120,23 @@ def create_task_card(task_num: int, task_title: str, priority: str, time_window:
             display_time = f"After {s_clean}"
         elif e_clean:
             display_time = f"Before {e_clean}"
-
     elif time_window:
         display_time = str(time_window)
+    # -------------------------------
 
     return f"""
-    <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 class="task-card-modern border-{p_cls}">
+        <div class="tc-header">
+            <span class="tc-title">{icon} {task_title}</span>
+            <span class="tc-badge badge-{p_cls}">{priority}</span>
         </div>
-        <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 class="tc-body">
+            <div class="tc-row">📍 {location}</div>
+            <div class="tc-row">
+                <span>🕒 {display_time}</span>
+                <span style="color: #cbd5e1; margin: 0 6px;">|</span>
+                <span>⏳ {duration}</span>
+            </div>
         </div>
     </div>
     """

ui/theme.py

@@ -232,22 +232,23 @@ def get_enhanced_css() -> str:
         z-index: 2;
     }
 
-    /* 右側卡片 */
+    /* Timeline 卡片：改為淺灰色背景，製造層次感 */
     .timeline-card {
-        flex: 1;
-        background: white !important;
+        background: #f8fafc !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;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
         transition: transform 0.2s, box-shadow 0.2s;
         display: block !important;
     }
 
+    /* Hover 效果：卡片變白並浮起 */
     .timeline-card:hover {
+        background: #ffffff !important;
         transform: translateX(4px);
-        box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
-        border-color: var(--primary-color) !important;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
+        border-color: var(--primary) !important;
     }
 
     .timeline-header {
@@ -266,8 +267,9 @@ def get_enhanced_css() -> str:
     }
 
     .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;
+        background: #f1f5f9; 
+        border: 1px solid #e2e8f0;
+        padding: 8px; border-radius: 8px; margin-top: 8px; color: #64748b;
     }
 
     .timeline-item:first-child .timeline-marker { border-color: #10b981 !important; }
@@ -331,7 +333,9 @@ def get_enhanced_css() -> str:
     .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; position: sticky; overflow-y: auto; }
+    .split-left-panel .panel-container, .split-left-panel .gradio-group {
+        background: white !important;
+    }
     .split-right-panel { flex: 2; position: sticky; top: 100px; height: 100%; }
 
     /* Animations */
@@ -344,6 +348,12 @@ def get_enhanced_css() -> str:
     ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
     ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
     ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+    
+    /* 修正 Scrollbar 樣式，讓它明顯一點但好看 */
+    .drawer-content::-webkit-scrollbar { width: 6px; }
+    .drawer-content::-webkit-scrollbar-track { background: transparent; }
+    .drawer-content::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+    .drawer-content::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
 
     /* Dark Mode Support */
     .theme-dark body, .theme-dark .gradio-container { background: #0f172a !important; }
@@ -672,5 +682,615 @@ def get_enhanced_css() -> str:
         min-height: 20px !important; /* 預留高度防止跳動 */
     }
     
+    /* === 1. Summary Card (儀表板) === */
+    .summary-card-modern {
+        /* 改為藍白漸層 */
+        background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
+        border: 1px solid #dbeafe !important;
+        
+        /* 🔥 修正：縮小內距與下邊距，防止撐出滾動條 */
+        border-radius: 16px;
+        padding: 14px 18px !important; /* 原本是 24px */
+        margin-bottom: 12px !important; /* 原本是 20px */
+        
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 15px;
+        
+        /* 消除 Gradio 預設可能帶入的額外高度 */
+        min-height: 0 !important;
+    }
+    
+    /* 讓 Summary 內的地點文字更跳 */
+    .summary-loc { 
+        font-size: 1.4rem; 
+        font-weight: 800; 
+        color: #312e81; /* 深靛藍 */
+        margin: 4px 0; 
+        text-shadow: 0 1px 0 rgba(255,255,255,0.8);
+    }
+    
+    .summary-label { font-size: 0.75rem; color: #94a3b8; font-weight: 700; letter-spacing: 0.5px; }
+    
+    .summary-date { font-size: 0.9rem; color: #6366f1; }
+    
+    .summary-metrics { display: flex; gap: 12px; }
+    .metric-box { 
+        background: rgba(255, 255, 255, 0.7); 
+        border: 1px solid #e2e8f0; 
+        padding: 8px 16px; 
+        border-radius: 12px; 
+        min-width: 80px;
+        backdrop-filter: blur(4px);
+        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+    }
+    .m-val { display: block; font-size: 1.2rem; font-weight: 800; color: #334155; line-height: 1; }
+    .m-val small { font-size: 0.7rem; margin-left: 2px; }
+    .m-label { font-size: 0.7rem; color: #64748b; }
+    .metric-box.alert .m-val { color: #ef4444; }
+
+    /* === 2. Agent Status Row (橫向狀態列) === */
+    .agent-status-row {
+        display: flex;
+        gap: 10px;
+        overflow-x: auto; /* 如果螢幕太窄，允許橫向捲動 */
+        padding-bottom: 5px;
+        margin-bottom: 15px;
+    }
+    .agent-status-card {
+        flex: 1;
+        min-width: 120px;
+        background: white;
+        border: 1px solid #e2e8f0;
+        border-radius: 10px;
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        transition: all 0.3s;
+    }
+    .agent-status-card.working {
+        border-color: #6366f1;
+        background: #eff6ff;
+        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+    }
+    .agent-name { font-size: 0.8rem; font-weight: 700; color: #1e293b; }
+    .agent-msg { font-size: 0.7rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .agent-status-card.working .agent-msg { color: #6366f1; font-weight: 600; }
+
+    /* === 3. Task Card Modern (任務卡片) === */
+    .task-card-modern {
+        background: white;
+        border: 1px solid #e2e8f0;
+        border-radius: 10px;
+        padding: 14px;
+        margin-bottom: 10px;
+        border-left-width: 4px;
+    }
+    .border-high { border-left-color: #ef4444; }
+    .border-medium { border-left-color: #f59e0b; }
+    .border-low { border-left-color: #10b981; }
+
+    .tc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+    .tc-title { font-weight: 600; color: #334155; font-size: 0.95rem; }
+    .tc-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 12px; font-weight: 700; text-transform: uppercase; }
+    
+    .badge-high { background: #fef2f2; color: #ef4444; }
+    .badge-medium { background: #fffbeb; color: #f59e0b; }
+    .badge-low { background: #ecfdf5; color: #10b981; }
+
+    .tc-body { font-size: 0.85rem; color: #64748b; display: flex; flex-direction: column; gap: 4px; }
+    
+    /* 1. 報告與任務列表的通用容器 */
+    .live-report-wrapper, .panel-container {
+        background: white !important;
+        border: 1px solid #e2e8f0 !important;
+        border-radius: 16px !important;
+        padding: 30px !important;
+        
+        /* 🔥 關鍵：給它一個最小高度，讓它看起來像一張完整的紙，不會因為內容少而縮成一團 */
+        min-height: 600px !important; 
+        
+        /* 增加立體感 */
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
+        
+        /* 讓內部的 Markdown 排版更舒適 */
+        line-height: 1.6 !important;
+        font-size: 1rem !important;
+        color: #334155 !important;
+    }
+
+    /* 2. 針對 Tab 內容的微調 */
+    /* 讓 Tab 下方的內容區塊與 Tab 標籤無縫銜接 (可選，視 Gradio 版本而定) */
+    .tabitem {
+        border: none !important;
+        background: transparent !important;
+    }
+    
+    /* 3. 優化 "Analyzing..." 載入文字 */
+    /* 讓它不要只是孤單地浮在左上角，而是置中並帶點呼吸感 */
+    .live-report-wrapper p:only-child, .panel-container p:only-child {
+        text-align: center !important;
+        margin-top: 100px !important;
+        color: #94a3b8 !important;
+        font-weight: 500 !important;
+        animation: pulse-text 2s infinite !important;
+    }
+    
+    @keyframes pulse-text {
+        0% { opacity: 0.6; }
+        50% { opacity: 1; }
+        100% { opacity: 0.6; }
+    }
+
+
+    /* 讓氣泡容器不要拉伸 (預設靠左) */
+    .message-wrap {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: flex-start !important; 
+        gap: 6px !important;
+    }
+    
+    
+    /* User 的氣泡改為靠右 */
+    .message-wrap.user-row {
+        align-items: flex-end !important;
+    }
+
+    /* 氣泡本體：寬度適應內容，不要繼承 100% */
+    .message-bubble {
+        width: fit-content !important;
+        max-width: 80% !important;
+        height: auto !important;
+        display: block !important;
+        white-space: pre-wrap !important;
+        padding: 10px 14px !important;
+    }
+    
+    /* ============= 3. 強化 Page 3 Agent 特效 (呼吸燈) ============= */
+    /* 定義強烈的脈衝動畫 */
+    @keyframes strong-pulse {
+        0% {
+            box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
+            border-color: #6366f1;
+            transform: scale(1);
+        }
+        50% {
+            box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); /* 擴散光圈 */
+            border-color: #818cf8;
+            transform: scale(1.02); /* 微微放大 */
+        }
+        100% {
+            box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
+            border-color: #6366f1;
+            transform: scale(1);
+        }
+    }
+    
+    /* Agent 容器基礎樣式 */
+    .agent-status-row {
+        display: flex; gap: 10px; overflow-x: auto; padding: 10px 5px; margin-bottom: 15px;
+    }
+    .agent-status-card {
+        flex: 1; min-width: 140px; background: white;
+        border: 1px solid #e2e8f0; border-radius: 12px;
+        padding: 12px; display: flex; align-items: center; gap: 10px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+    }
+
+    /* 🔥 關鍵：套用動畫到 Working 狀態 */
+    .agent-status-card.working {
+        animation: strong-pulse 2s infinite !important; /* 強制執行動畫 */
+        background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%) !important; /* 微藍背景 */
+        z-index: 10;
+    }
+    
+    /* 文字顏色也跟著變亮 */
+    .agent-status-card.working .agent-msg {
+        color: #4f46e5 !important;
+        font-weight: 700 !important;
+    }
+    
+    /* 靜態樣式補充 */
+    .agent-icon { font-size: 1.5rem; }
+    .agent-info { overflow: hidden; }
+    .agent-name { font-size: 0.85rem; font-weight: 700; color: #1e293b; }
+    .agent-msg { font-size: 0.75rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    
+    /* 強制修正氣泡變形與留白問題 */
+
+    .map-container-relative {
+        position: relative !important;
+        height: 650px !important;       /* 🔥 強制高度 */
+        width: 100% !important;
+        border-radius: 16px;
+        overflow: hidden !important;
+        border: 1px solid #e2e8f0;
+        background: white;
+    }
+    
+    /* 強制 iframe 填滿容器 */
+    .map-container-relative iframe {
+        width: 100% !important;
+        height: 100% !important;
+        border: none !important;
+    }
+
+    /* 2. 浮動抽屜本體 */
+    .map-overlay-drawer {
+        position: absolute !important;
+        top: 20px !important;
+        left: 20px !important;
+        bottom: 20px !important;
+        width: 380px !important;     /* 固定寬度，確保不會擋住太多地圖 */
+        height: 85% !important;
+        
+        background: rgba(255, 255, 255, 0.95) !important;
+        backdrop-filter: blur(12px) !important; /* 毛玻璃效果 */
+        border-radius: 16px !important;
+        border: 1px solid rgba(255, 255, 255, 0.6) !important;
+        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 10px -2px rgba(0, 0, 0, 0.1) !important;
+        
+        z-index: 500 !important;      /* 確保在地圖之上 (Leaflet 通常是 z-index 400) */
+        display: flex !important;
+        flex-direction: column !important;
+        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        /* 🔥 關鍵：讓內部元素可以用 Flex 排列 */
+        
+        display: flex !important; 
+        flex-direction: column !important;
+        overflow: hidden !important; /* 防止圓角被內容切掉 */
+    }
+
+    /* 3. 抽屜標頭 */
+    .drawer-header {
+        padding: 16px 20px !important;
+        border-bottom: 1px solid #e2e8f0 !important;
+        background: #f8fafc !important;
+        border-radius: 16px 16px 0 0 !important;
+        display: flex !important;
+        justify-content: space-between !important;
+        align-items: center !important;
+        flex-shrink: 0 !important;
+        height: 60px !important;
+    }
+    
+    .drawer-title p {
+        margin: 0 !important;
+        font-size: 1rem !important;
+        font-weight: 700 !important;
+        color: #334155 !important;
+    }
+
+    .drawer-tabs .tab-nav {
+        border-bottom: 1px solid #f1f5f9 !important;
+        margin: 0 !important;
+    }
+
+    /* 5. 關閉按鈕 (X) */
+    .drawer-close-btn {
+        background: transparent !important;
+        color: #94a3b8 !important;
+        border: none !important;
+        box-shadow: none !important;
+        font-size: 1.2rem !important;
+        padding: 4px !important;
+        width: 32px !important;
+        min-width: 32px !important;
+    }
+    .drawer-close-btn:hover {
+        color: #ef4444 !important;
+        background: #fef2f2 !important;
+        border-radius: 50% !important;
+    }
+
+    /* === 修復抽屜開關按鈕 === */
+    .map-overlay-btn {
+        position: absolute !important;
+        top: 10px !important;
+        left:60px !important;
+        
+        /* 🔥 關鍵：必須比 Leaflet 地圖 (400) 和 Drawer (500) 高 */
+        z-index: 1000 !important; 
+        
+        background: white !important;
+        color: #6366f1 !important;
+        border: 1px solid #cbd5e1 !important;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
+        font-weight: 600 !important;
+        padding: 8px 12px !important;
+    }
+    
+    .map-overlay-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 10px rgba(0,0,0,0.15) !important;
+    }
+    
+    /* 隱藏 Map 預設的 Label */
+    .map-container-relative .label-wrap {
+        display: none !important;
+    }
+
+    /* 顏色修正 (確保不被舊樣式覆蓋) */
+
+
+    /* --- 2. Page 4: Map Overlay Drawer (捲軸與排版修復) --- */
+
+    /* 抽屜容器：Flex Column 佈局 */
+    .map-overlay-drawer {
+        display: flex !important;
+        flex-direction: column !important;
+        max-height: calc(100% - 40px) !important; /* 防止超出地圖邊界 */
+        overflow: hidden !important; /* 外層隱藏溢出 */
+        background: rgba(255, 255, 255, 0.98) !important;
+        border: 1px solid rgba(226, 232, 240, 0.8) !important;
+        z-index: 5000 !important;
+        height: 85% !important; 
+    max-height: 600px !important;
+    }
+
+    /* Header：固定高度 */
+    .drawer-header {
+        flex-shrink: 0 !important;
+        height: auto !important;
+        border-bottom: 1px solid #e2e8f0 !important;
+        background: #f8fafc !important;
+    }
+
+/* 🔥 修正 Tab 跑版：移除負邊距，讓它自然排列 */
+    .drawer-tabs {
+        margin-top: 0 !important; /* 還原 margin */
+        display: flex !important;
+        flex-direction: column !important;
+        height: 100% !important;
+    }
+    
+    /* 讓 Tab 的內容區塊也能捲動 */
+    .drawer-tabs .tabitem {
+        overflow-y: visible !important; 
+        height: auto !important;
+    }
+
+    /* 美化捲軸 (Chrome/Safari) */
+    .drawer-content::-webkit-scrollbar {
+        width: 6px;
+    }
+    .drawer-content::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    .drawer-content::-webkit-scrollbar-thumb {
+        background: #cbd5e1;
+        border-radius: 3px;
+    }
+
+    /* --- 3. Summary Card Modern (漸層色補丁) --- */
+    .summary-card-modern {
+        background: linear-gradient(120deg, #ffffff 0%, #eff6ff 100%) !important;
+        border: 1px solid #dbeafe !important;
+        box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1) !important;
+    }
+    
+    
+    .header-controls {
+        position: fixed !important;
+        top: 24px !important;
+        right: 24px !important;
+        z-index: 99999 !important;
+        
+        display: flex !important;
+        flex-direction: column !important; /* 垂直排列 */
+        gap: 8px !important;
+        
+        /* 強制縮小寬度，防止佔滿橫條 */
+        width: auto !important;
+        min-width: 0 !important;
+        height: auto !important;
+        
+        /* 膠囊視覺還原 */
+        background: rgba(255, 255, 255, 0.9) !important;
+        backdrop-filter: blur(8px) !important;
+        padding: 8px !important;
+        border-radius: 50px !important;
+        border: 1px solid rgba(255, 255, 255, 0.6) !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+    }
+
+
+    /* 3. Page 4 Map 滾動條修復：強制高度與捲軸 */
+    .map-overlay-drawer {
+        display: flex !important;
+        flex-direction: column !important;
+        height: 85% !important; /* 🔥 必須給定高度，捲軸才會出現 */
+        overflow: hidden !important;
+    }
+
+    
+    /* 4. Page 4 Map 按鈕位移：把 Zoom 按鈕移到右邊 */
+    .leaflet-left {
+        left: auto !important;
+        right: 20px !important; 
+    }
+    .header-controls {
+        position: fixed !important; top: 24px !important; right: 24px !important; z-index: 99999 !important;
+        display: flex !important; flex-direction: column !important; gap: 8px !important;
+        width: auto !important; height: auto !important;
+        background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(8px) !important;
+        padding: 8px !important; border-radius: 50px !important;
+        border: 1px solid rgba(255, 255, 255, 0.6) !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+    }
+
+    /* 2. Page 4 Map Drawer: 強制內容區塊顯示 */
+    /* 這裡只做最基本的顯示，不搞複雜的捲軸邏輯，讓瀏覽器自己處理 */
+    .map-overlay-drawer {
+        display: flex !important;
+        flex-direction: column !important;
+        height: 80% !important;
+        overflow: hidden !important;
+    }
+    
+    .drawer-content {
+        flex: 1 !important;
+        overflow-y: auto !important;
+        background: white !important; /* 確保內容區是白色的 */
+        padding: 0 !important;
+        display: block !important;
+    }
+
+    /* 3. Page 4 Map 按鈕: 不要動它！ */
+    /* 刪除任何 .leaflet-left 的設定，讓它自己回到左邊 */
+    
+    /* 4. 修改 Show Summary 按鈕位置 (避開左邊的原生按鈕) */
+    .map-overlay-btn {
+        position: absolute !important;
+        top: 10px !important;
+        left: 60px !important; /* 強制往右移 60px */
+        z-index: 5000 !important;
+    }
+    
+    這確實讓人崩潰，那個 "321 / 31" 的斷行顯示 Gradio 內部的 Flex 容器寬度被壓縮到了極限，而藍色方塊依然巨大則是因為 垂直拉伸 (Stretch) 屬性 仍然存在。
+
+這表示即使我們拿掉了 height，Gradio 內部的 CSS 權重還是比我們的高，或者是某層 div 被我們之前的 CSS 誤傷導致寬度歸零。
+
+請執行這個 「最終純淨版」 修正。這一次，我們不再對抗 Gradio 的 Flex 機制，而是順著它的毛摸，但強制加上「最小寬度」保護，並殺死「垂直拉伸」。
+
+1. 確保 app.py 的 height 真的刪掉了
+（如果你剛剛已經刪了，這步請再次確認就好）
+
+Python
+
+chatbot = gr.Chatbot(
+    label="AI Assistant",
+    type="messages",
+    # height=540,  <-- 這行絕對不能有
+    elem_classes="native-chatbot",
+    bubble_full_width=False
+)
+2. 替換 ui/theme.py (純淨修復版)
+請全選刪除 ui/theme.py 裡 Chatbot 相關的 CSS，換成這段。這段代碼移除了所有復雜的絕對定位，回歸最單純的排版，但加強了對 寬度 (Width) 的保護。
+
+CSS
+
+    /* ============= 🛡️ LifeFlow Chatbot: 純淨修復版 🛡️ ============= */
+
+    /* 1. 外層容器：給定高度，讓它有捲軸 */
+    .chat-panel-native {
+        background: white !important;
+        border: 1px solid #e2e8f0 !important;
+        border-radius: 16px !important;
+        height: 600px !important;
+        overflow: hidden !important;
+        display: flex !important;
+        flex-direction: column !important;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
+    }
+
+    /* 2. Chatbot 本體：自然填滿剩餘空間 */
+    .native-chatbot {
+        background: white !important;
+        flex-grow: 1 !important;
+        overflow-y: auto !important;
+        padding: 20px !important;
+        border: none !important;
+    }
+
+    /* 3. 訊息行 (Row) */
+    .native-chatbot .message-row {
+        display: flex !important;
+        flex-direction: row !important;
+        width: 100% !important;
+        margin-bottom: 16px !important;
+        
+        /* 🔥 關鍵一：殺死垂直拉伸 (解決巨大方塊) */
+        align-items: flex-start !important; 
+        height: auto !important;
+        
+        /* 避免被壓縮 */
+        flex-shrink: 0 !important;
+    }
+
+    /* 4. 氣泡外殼 (Wrapper) - 這是解決 "321/31" 的關鍵 */
+    /* 之前的版本可能漏了這個，導致外殼寬度為 0 */
+    .native-chatbot .message-wrap {
+        display: flex !important;
+        flex-direction: column !important;
+        
+        /* 🔥 關鍵二：寬度自動，但不能小於內容 */
+        width: auto !important; 
+        min-width: 0 !important;
+        max-width: 85% !important;
+        
+        flex-shrink: 1 !important; /* 允許在極端狀況下縮小 */
+        flex-grow: 0 !important;   /* 禁止無故變寬 */
+    }
+
+    /* 5. 氣泡本體 (Bubble) */
+    .native-chatbot .message {
+        width: fit-content !important;
+        height: auto !important;
+        padding: 8px 12px !important;
+        font-size: 0.95rem !important;
+        line-height: 1.5 !important;
+        
+        /* 🔥 關鍵三：正確的斷字設定 */
+        white-space: pre-wrap !important;
+        word-break: break-word !important; 
+        overflow-wrap: break-word !important;
+    }
+
+    /* 6. Bot (靠左) */
+    .native-chatbot .message-row:not(.user-row) {
+        justify-content: flex-start !important;
+    }
+    
+    .native-chatbot .message.bot,
+    .native-chatbot .message.model,
+    .native-chatbot .message.assistant,
+    .native-chatbot .message-row:not(.user-row) .message {
+        background-color: #f1f5f9 !important;
+        color: #1e293b !important;
+        border: 1px solid #e2e8f0 !important;
+        border-radius: 4px 16px 16px 16px !important;
+    }
+    
+    .native-chatbot .message.bot *, .native-chatbot .message-row:not(.user-row) .message * {
+        color: #1e293b !important;
+    }
+
+    /* 7. User (靠右) */
+    .native-chatbot .message-row.user-row {
+        justify-content: flex-end !important;
+    }
+
+    .native-chatbot .message.user,
+    .native-chatbot .message-row.user-row .message {
+        background-color: #6366f1 !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 16px 4px 16px 16px !important;
+        text-align: left !important;
+    }
+    
+    .native-chatbot .message.user * {
+        color: white !important;
+    }
+
+    /* 8. 輸入框 */
+    .chat-input-row {
+        background: white !important;
+        border-top: 1px solid #e2e8f0 !important;
+        padding: 16px !important;
+        flex-shrink: 0 !important; /* 防止被壓扁 */
+    }
+
+    /* 9. 隱藏垃圾 */
+    .native-chatbot button,
+    .native-chatbot .avatar-container,
+    .native-chatbot .message-icon { display: none !important; }
+    
     </style>
     """