Feat: Add Home Button

app.py

@@ -22,7 +22,7 @@ from ui.renderers import (
 from core.visualizers import create_animated_map
 
 # ===== UI Components =====
-from ui.components.header import create_header, create_top_controls
+from ui.components.header import create_header
 from ui.components.input_form import create_input_form, toggle_location_inputs
 from ui.components.confirmation import create_confirmation_area
 from ui.components.results import create_team_area, create_result_area, create_tabs
@@ -204,8 +204,9 @@ class LifeFlowAI:
     def build_interface(self):
         with gr.Blocks(title=APP_TITLE) as demo:
             gr.HTML(get_enhanced_css())
-            create_header()
-            theme_btn, settings_btn, doc_btn = create_top_controls()
+            #create_header()
+            #theme_btn, settings_btn, doc_btn = create_top_controls()
+            home_btn, theme_btn, settings_btn, doc_btn = create_header()
 
             # State
             session_state = gr.State(value=UserSession().to_dict())
@@ -244,6 +245,27 @@ 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])
 
@@ -268,17 +290,20 @@ class LifeFlowAI:
                 outputs=[chat_history_output, task_list_display, session_state]
             ).then(fn=lambda: "", outputs=[chat_input])
 
-            # Exit
+            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
+                ]
+            )
+
+            # 綁定原有的 Exit 按鈕 (加入 inputs)
             exit_btn_inline.click(
-                fn=lambda: (
-                    gr.update(visible=True), gr.update(visible=False),
-                    gr.update(visible=False), gr.update(visible=False),
-                    gr.update(visible=False), gr.update(visible=False),
-                    gr.update(visible=False), "",
-                    create_agent_stream_output(),
-                    "Ready...",
-                    UserSession().to_dict()
-                ),
+                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,

ui/components/header.py

@@ -1,23 +1,30 @@
-
 """
-LifeFlow AI - Header Component (Clean Style)
+LifeFlow AI - Header Component (Layout Improved)
 """
 import gradio as gr
 
 def create_header():
-    return gr.HTML("""
-    <div class="app-header">
-        <h1>✨ LifeFlow AI</h1>
-        <p>Your Intelligent Daily Trip Planning Assistant</p>
-    </div>
-    """)
+    """
+    創建整合式 Header：左側標題，右側控制區
+    回傳按鈕物件供 app.py 綁定事件
+    """
+    with gr.Row(elem_classes="header-row", elem_id="header-container"):
+        # 左側：標題區
+        with gr.Column(scale=6, min_width=200):
+            gr.HTML("""
+            <div class="app-header-left">
+                <h1 style="margin: 0; font-size: 1.8rem;">✨ LifeFlow AI</h1>
+                <p style="margin: 0; color: #64748b; font-size: 0.9rem;">Intelligent Trip Planner</p>
+            </div>
+            """)
 
-def create_top_controls():
-    with gr.Group(elem_id="top-controls"):
-        # 按鈕本身樣式由 CSS 控制，這裡保持結構簡單
-        with gr.Row():
-            theme_btn = gr.Button("🌓", size="sm", min_width=40)
-            settings_btn = gr.Button("⚙️", size="sm", min_width=40)
-            doc_btn = gr.Button("📖", size="sm", min_width=40)
+        # 右側：功能按鈕區 (包含 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 theme_btn, settings_btn, doc_btn
+    return home_btn, theme_btn, settings_btn, doc_btn

ui/renderers.py

@@ -13,22 +13,27 @@ def create_agent_stream_output() -> str:
     </div>
     """
 
+
 def create_agent_card_enhanced(agent_key: str, status: str = "idle", message: str = "") -> str:
     agent = AGENTS_INFO.get(agent_key, {})
     color = agent.get("color", "#6366f1")
 
     status_color = "#94a3b8"  # gray
-    if status == "working": status_color = "#f59e0b"  # orange
-    if status == "complete": status_color = "#10b981"  # green
+    active_class = ""
 
-    active_class = "active" if status == "working" else ""
+    if status == "working":
+        status_color = "#f59e0b"  # orange
+        active_class = "working"  # 🔥 這裡對應 CSS 的動畫 class
+    elif status == "complete":
+        status_color = "#10b981"  # green
 
+    # 確保 active_class 被加入 div class 列表
     return f"""
     <div class="agent-card-mini {active_class}" style="border-top: 3px solid {color}">
         <div class="agent-avatar-mini">{agent.get("avatar", "🤖")}</div>
         <div class="agent-name-mini">{agent.get("name", "Agent")}</div>
         <span class="agent-status-dot" style="background-color: {status_color}"></span>
-        <div style="font-size: 10px; color: #64748b; margin-top: 4px;">{status}</div>
+        <div style="font-size: 10px; color: #64748b; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;">{message}</div>
     </div>
     """
 

ui/theme.py

@@ -25,7 +25,7 @@ def get_enhanced_css() -> str:
         font-family: var(--font-main) !important;
         background: #f8fafc !important; 
     }
-
+    
     /* ============= 毛玻璃卡片風格 ============= */
     .glass-card {
         background: var(--glass-bg);
@@ -56,6 +56,57 @@ def get_enhanced_css() -> str:
         color: #64748b;
         font-weight: 400;
     }
+    
+    /* ============= Header 優化 (Flex Layout) ============= */
+    .header-row {
+        align-items: center !important;
+        margin-bottom: 20px !important;
+        padding: 10px 20px !important;
+        background: rgba(255, 255, 255, 0.5);
+        backdrop-filter: blur(10px);
+        border-radius: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.5);
+    }
+    .app-header-left h1 {
+        background: linear-gradient(to right, #6366f1, #ec4899);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+    
+    /* 按鈕微調 */
+    .icon-btn {
+        background: transparent !important;
+        border: 1px solid #e2e8f0 !important;
+        box-shadow: none !important;
+    }
+    .icon-btn:hover {
+        background: #f1f5f9 !important;
+        border-color: #cbd5e1 !important;
+    }
+
+    /* ============= Agent 呼吸動畫 (關鍵修改) ============= */
+    @keyframes breathing-glow {
+        0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); border-color: #6366f1; }
+        70% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); border-color: #818cf8; }
+        100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); border-color: #6366f1; }
+    }
+
+    .agent-card-mini.working {
+        animation: breathing-glow 2s infinite;
+        background: linear-gradient(to bottom right, #fff, #eff6ff);
+        transform: scale(1.05); /* 稍微放大 */
+        z-index: 10;
+    }
+    
+    /* ============= AI Conversation 優化 ============= */
+    .reasoning-timeline {
+        max-height: 400px;
+        overflow-y: auto;
+        padding-right: 10px;
+        /* 讓最新的訊息看起來像是在終端機中彈出 */
+        display: flex; 
+        flex-direction: column-reverse; 
+    }
 
     /* ============= 按鈕優化 ============= */
     button.primary {