Fix: fixed state reset bug and enforce sticky horizontal header layout

app.py

@@ -33,6 +33,23 @@ class LifeFlowAI:
     def __init__(self):
         self.service = PlannerService()
 
+    def _check_api_status(self, session: UserSession) -> str:
+        """檢查 API Key 狀態並回傳對應的 Status 文字"""
+        # 1. 檢查 Session 中的自定義設定
+        has_gemini = bool(session.custom_settings.get("gemini_api_key"))
+        has_google = bool(session.custom_settings.get("google_maps_api_key"))
+
+        # 2. 如果沒有自定義，也可以檢查系統預設 (可選)
+        # 這裡假設我們強制要求用戶輸入或確認
+
+        if has_gemini and has_google:
+            return "✅ System Ready - Waiting for input..."
+        else:
+            missing = []
+            if not has_gemini: missing.append("Gemini Key")
+            if not has_google: missing.append("Google Maps Key")
+            return f"⚠️ Missing Keys: {', '.join(missing)} - Please configure Settings ↗"
+
     def _get_agent_outputs(self, active_agent: str = None, status: str = "idle", message: str = "Waiting") -> List[str]:
         """
         輔助函數：生成 6 個 Agent 卡片的 HTML 列表
@@ -199,9 +216,40 @@ class LifeFlowAI:
         session.custom_settings['openweather_api_key'] = weather_key
         session.custom_settings['gemini_api_key'] = gemini_key
         session.custom_settings['model'] = model
-        return "✅ Settings saved locally!", session.to_dict()
+
+        new_status = self._check_api_status(session)
+
+        return "✅ Settings saved locally!", session.to_dict(), new_status
 
     def build_interface(self):
+        def reset_app(old_session_data):
+            # 1. 讀取舊 Session
+            old_session = UserSession.from_dict(old_session_data)
+
+            # 2. 創建新 Session (數據歸零)
+            new_session = UserSession()
+
+            # 3. 🔥 關鍵：繼承舊的設定 (API Keys, Model)
+            new_session.custom_settings = old_session.custom_settings
+
+            status_msg = self._check_api_status(new_session)
+
+            # 4. 回傳重置後的 UI 狀態
+            return (
+                gr.update(visible=True), gr.update(visible=False),  # Input Show, Confirm Hide
+                gr.update(visible=False), gr.update(visible=False),  # Chat Hide, Result Hide
+                gr.update(visible=False), gr.update(visible=False),  # Team Hide, Report Hide
+                gr.update(visible=False), "",  # Map Hide, Textbox Clear
+                create_agent_stream_output(),
+                status_msg,
+                new_session.to_dict()  # Reset Session but keep keys
+            )
+
+        def initial_check(session_data):
+            s = UserSession.from_dict(session_data)
+            # 如果環境變數有值，可以在這裡預先填入 custom_settings (視需求而定)
+            return self._check_api_status(s)
+
         with gr.Blocks(title=APP_TITLE) as demo:
             gr.HTML(get_enhanced_css())
             #create_header()
@@ -211,6 +259,7 @@ class LifeFlowAI:
             # State
             session_state = gr.State(value=UserSession().to_dict())
 
+
             with gr.Row():
                 # Left Column
                 with gr.Column(scale=2, min_width=400):
@@ -231,7 +280,9 @@ class LifeFlowAI:
 
                 # Right Column
                 with gr.Column(scale=3, min_width=500):
-                    status_bar = gr.Textbox(label="📊 Status", value="Waiting for input...", interactive=False,
+                    status_bar = gr.Textbox(label="📊 Status",
+                                            value="⚠️ Checking System Status...",
+                                            interactive=False,
                                             max_lines=1)
                     (tabs, report_tab, map_tab, report_output, map_output, reasoning_output,
                      chat_input_area, chat_history_output, chat_input, chat_send) = create_tabs(
@@ -245,28 +296,6 @@ class LifeFlowAI:
             doc_modal, close_doc_btn = create_doc_modal()
 
             # ===== Event Binding =====
-            def reset_app(old_session_data):
-                # 1. 讀取舊 Session
-                old_session = UserSession.from_dict(old_session_data)
-
-                # 2. 創建新 Session (數據歸零)
-                new_session = UserSession()
-
-                # 3. 🔥 關鍵：繼承舊的設定 (API Keys, Model)
-                new_session.custom_settings = old_session.custom_settings
-
-                # 4. 回傳重置後的 UI 狀態
-                return (
-                    gr.update(visible=True), gr.update(visible=False),  # Input Show, Confirm Hide
-                    gr.update(visible=False), gr.update(visible=False),  # Chat Hide, Result Hide
-                    gr.update(visible=False), gr.update(visible=False),  # Team Hide, Report Hide
-                    gr.update(visible=False), "",  # Map Hide, Textbox Clear
-                    create_agent_stream_output(),
-                    "Ready...",
-                    new_session.to_dict()  # Reset Session but keep keys
-                )
-
-
             auto_location.change(fn=toggle_location_inputs, inputs=[auto_location], outputs=[location_inputs])
 
             # Step 1: Analyze
@@ -290,17 +319,18 @@ class LifeFlowAI:
                 outputs=[chat_history_output, task_list_display, session_state]
             ).then(fn=lambda: "", outputs=[chat_input])
 
+            # 更新 Home 鍵綁定
             home_btn.click(
                 fn=reset_app,
                 inputs=[session_state],
                 outputs=[
                     input_area, task_confirm_area, chat_input_area, result_area,
                     team_area, report_tab, map_tab, user_input,
-                    agent_stream_output, status_bar, session_state
+                    agent_stream_output, status_bar, session_state  # 確保 status_bar 在列表裡
                 ]
             )
 
-            # 綁定原有的 Exit 按鈕 (加入 inputs)
+            # 更新 Exit 鍵綁定 (同上)
             exit_btn_inline.click(
                 fn=reset_app,
                 inputs=[session_state],
@@ -311,6 +341,8 @@ class LifeFlowAI:
                 ]
             )
 
+
+
             # Step 2, 3, 4 Sequence
             ready_plan_btn.click(
                 fn=lambda: (gr.update(visible=False), gr.update(visible=False),
@@ -339,10 +371,11 @@ class LifeFlowAI:
             # Settings & Docs Handlers
             settings_btn.click(fn=lambda: gr.update(visible=True), outputs=[settings_modal])
             close_settings_btn.click(fn=lambda: gr.update(visible=False), outputs=[settings_modal])
+
             save_settings_btn.click(
                 fn=self.save_settings,
                 inputs=[google_maps_key, openweather_key, gemini_api_key, model_choice, session_state],
-                outputs=[settings_status, session_state]
+                outputs=[settings_status, session_state, status_bar]  # 增加 status_bar
             )
 
             theme_btn.click(fn=None, js="""
@@ -359,6 +392,9 @@ class LifeFlowAI:
             doc_btn.click(fn=lambda: gr.update(visible=True), outputs=[doc_modal])
             close_doc_btn.click(fn=lambda: gr.update(visible=False), outputs=[doc_modal])
 
+            demo.load(fn=initial_check,
+                      inputs=[session_state],
+                      outputs=[status_bar])
         return demo
 
 

ui/components/header.py

@@ -1,16 +1,25 @@
 """
-LifeFlow AI - Header Component (Layout Improved)
+LifeFlow AI - Header Component (Fixed Layout - Simplified)
 """
 import gradio as gr
 
 def create_header():
     """
-    創建整合式 Header：左側標題，右側控制區
-    回傳按鈕物件供 app.py 綁定事件
+    創建 Header：
+    1. 功能鍵區 (懸浮固定 - 使用 elem_id 強制定位)
+    2. 標題區 (普通流式佈局)
     """
-    with gr.Row(elem_classes="header-row", elem_id="header-container"):
-        # 左側：標題區
-        with gr.Column(scale=6, min_width=200):
+    # 1. 功能按鈕區
+    # 🔥 重點：移除內部的 gr.Row，只用 gr.Group，並給它一個唯一的 elem_id
+    with gr.Group(elem_id="floating-menu"):
+        home_btn = gr.Button("🏠", elem_classes="dock-btn")
+        theme_btn = gr.Button("🌓", elem_classes="dock-btn")
+        settings_btn = gr.Button("⚙️", elem_classes="dock-btn")
+        doc_btn = gr.Button("📖", elem_classes="dock-btn")
+
+    # 2. 左側標題區
+    with gr.Row(elem_classes="header-row"):
+        with gr.Column(scale=1):
             gr.HTML("""
             <div class="app-header-left">
                 <h1 style="margin: 0; font-size: 1.8rem;">✨ LifeFlow AI</h1>
@@ -18,13 +27,4 @@ def create_header():
             </div>
             """)
 
-        # 右側：功能按鈕區 (包含 Home 鍵)
-        with gr.Column(scale=2, min_width=200):
-            with gr.Row(elem_classes="header-controls"):
-                # 移除 tooltip 參數，保留其他設定
-                home_btn = gr.Button("🏠", size="sm", min_width=40, elem_classes="icon-btn")
-                theme_btn = gr.Button("🌓", size="sm", min_width=40, elem_classes="icon-btn")
-                settings_btn = gr.Button("⚙️", size="sm", min_width=40, elem_classes="icon-btn")
-                doc_btn = gr.Button("📖", size="sm", min_width=40, elem_classes="icon-btn")
-
-    return home_btn, theme_btn, settings_btn, doc_btn
+    return home_btn, theme_btn, settings_btn, doc_btn

ui/theme.py

@@ -83,6 +83,101 @@ def get_enhanced_css() -> str:
         background: #f1f5f9 !important;
         border-color: #cbd5e1 !important;
     }
+    
+    /* ============= 懸浮功能選單 (Fixed Top-Right) ============= */
+    #floating-menu {
+        position: fixed !important;
+        top: 20px !important;
+        right: 20px !important;
+        z-index: 99999 !important;
+        
+        /* 外觀 */
+        background: rgba(255, 255, 255, 0.95) !important;
+        backdrop-filter: blur(12px);
+        border: 1px solid rgba(255, 255, 255, 0.8);
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        border-radius: 50px !important;
+        padding: 5px 10px !important;
+        
+        /* 🔥 核彈級排版修正：使用 Grid 🔥 */
+        display: grid !important;
+        /* 強制分為 4 個欄位，每個欄位寬度自動 */
+        grid-template-columns: auto auto auto auto !important;
+        gap: 8px !important;
+        
+        /* 強制重置寬度，不讓它佔滿 */
+        width: fit-content !important;
+        min-width: auto !important;
+    }
+
+    /* 2. 強制重置 Gradio 內部的 Layout 容器 */
+    #floating-menu > * {
+        display: contents !important; /* 忽略中間層的 div，直接讓按鈕參與 Grid 排列 */
+    }
+
+    /* 3. 按鈕本體設定 */
+    .dock-btn {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        
+        width: 40px !important;
+        height: 40px !important;
+        border-radius: 50% !important;
+        
+        background: transparent !important;
+        border: none !important;
+        box-shadow: none !important;
+        
+        margin: 0 !important;
+        padding: 0 !important;
+        font-size: 1.2rem !important;
+    }
+    
+    .dock-btn:hover {
+        background: #f1f5f9 !important;
+        transform: translateY(-2px);
+        transition: all 0.2s ease;
+    }
+
+    /* 🔥 強制重置 Gradio 內部包裝層 🔥 */
+    /* 這是造成垂直排列的主因，Gradio 預設會把元件包在 width:100% 的 div 裡 */
+    .header-controls > * {
+        min-width: auto !important;
+        width: auto !important;
+        flex: 0 0 auto !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        border: none !important;
+        background: transparent !important;
+    }
+
+    /* 按鈕本體樣式優化 */
+    .header-controls button {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        
+        width: 38px !important;   /* 固定按鈕大小 */
+        height: 38px !important;
+        border-radius: 50% !important;
+        
+        background: transparent !important;
+        border: 1px solid transparent !important;
+        box-shadow: none !important;
+        padding: 0 !important;
+        font-size: 1.2rem !important;
+        line-height: 1 !important;
+        color: #64748b !important;
+    }
+    
+    .header-controls button:hover {
+        background: #f1f5f9 !important;
+        color: #6366f1 !important;
+        transform: translateY(-1px);
+        transition: all 0.2s ease;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
+    }
 
     /* ============= Agent 呼吸動畫 (關鍵修改) ============= */
     @keyframes breathing-glow {