update app.py size

app.py

@@ -1,8 +1,9 @@
 """
-LifeFlow AI - Demo
-✅ Agent status dynamically updated (use tool, task completed, etc.)
-✅ Automatically switches to the Trip Summary Tab (full report + map) after planning is complete
-✅ Perfectly compatible with Light/Dark themes
+LifeFlow AI - v11 English + Compact Layout
+✅ English version
+✅ Compact layout (horizontal on widescreen)
+✅ Responsive design
+✅ Optimized for HuggingFace Spaces
 """
 
 import gradio as gr
@@ -14,7 +15,7 @@ import time as time_module
 
 
 class LifeFlowInteractive:
-    """LifeFlow AI Interactive Version v9"""
+    """LifeFlow AI Interactive Demo v11"""
 
     def __init__(self):
         self.team = None
@@ -24,6 +25,7 @@ class LifeFlowInteractive:
         self.chat_history = []
         self.reasoning_messages = []
         self.planning_completed = False
+        self.agent_raw_output = ""
 
         # Settings
         self.settings = {
@@ -33,24 +35,24 @@ class LifeFlowInteractive:
             'model': 'claude-sonnet-4-20250514'
         }
 
-        # Agent information
+        # Agent info
         self.agents_info = {
             "planner": {
                 "name": "Planner",
                 "avatar": "👔",
-                "role": "Chief Planner",
+                "role": "Chief Planning Officer",
                 "color": "#4A90E2"
             },
             "scout": {
                 "name": "Scout",
                 "avatar": "🕵️",
-                "role": "POI Investigation Expert",
+                "role": "Location Scout Expert",
                 "color": "#50C878"
             },
             "optimizer": {
                 "name": "Optimizer",
                 "avatar": "🤖",
-                "role": "Route Optimization Engine",
+                "role": "AI Optimization Engine",
                 "color": "#F5A623"
             },
             "validator": {
@@ -74,7 +76,7 @@ class LifeFlowInteractive:
         }
 
     def create_agent_card(self, agent_key: str, status: str = "idle", message: str = ""):
-        """Create Agent card (theme adaptive, no progress bar)"""
+        """Create Agent card (compact version)"""
         agent = self.agents_info[agent_key]
 
         status_icons = {
@@ -88,757 +90,854 @@ class LifeFlowInteractive:
         }
 
         icon = status_icons.get(status, "⚪")
-
         breathing_class = "breathing" if status in ["working", "using_tool"] else ""
 
         return f"""
         <div class="{breathing_class}" style="
             background: var(--background-fill-secondary);
-            border-left: 4px solid {agent['color']};
-            border-radius: 8px;
-            padding: 12px;
-            margin: 8px 0;
-            transition: all 0.3s ease;
+            border-left: 3px solid {agent['color']};
+            border-radius: 6px;
+            padding: 10px;
+            margin: 6px 0;
         ">
-            <div style="display: flex; align-items: center; gap: 10px;">
-                <span style="font-size: 1.8em;">{agent['avatar']}</span>
-                <div style="flex: 1;">
-                    <div style="font-size: 1.1em; font-weight: bold; color: var(--body-text-color);">
-                        {agent['name']}
-                    </div>
-                    <div style="font-size: 0.85em; color: var(--body-text-color); opacity: 0.8; margin-top: 2px;">
-                        {icon} {message}
+            <div style="display: flex; align-items: center; gap: 8px;">
+                <div style="font-size: 24px;">{agent['avatar']}</div>
+                <div style="flex-grow: 1;">
+                    <div style="display: flex; justify-content: space-between; align-items: center;">
+                        <strong style="color: var(--body-text-color); font-size: 14px;">
+                            {agent['name']}
+                        </strong>
+                        <span style="font-size: 16px;">{icon}</span>
                     </div>
+                    {f'<div style="color: var(--body-text-color); opacity: 0.7; font-size: 12px; margin-top: 4px;">{message}</div>' if message else ''}
                 </div>
             </div>
         </div>
         """
 
     def add_reasoning_message(self, agent: str, message: str, msg_type: str = "info"):
-        """Add reasoning message to record"""
-        agent_info = self.agents_info.get(agent, {})
-        avatar = agent_info.get('avatar', '🤖')
-        name = agent_info.get('name', agent)
-
-        timestamp = datetime.now().strftime("%H:%M:%S")
-
-        # Choose style based on type
-        if msg_type == "tool":
-            icon = "🔧"
-            bg_color = "var(--color-accent-soft)"
-        elif msg_type == "success":
-            icon = "✅"
-            bg_color = "var(--background-fill-secondary)"
-        elif msg_type == "thinking":
-            icon = "💭"
-            bg_color = "var(--background-fill-secondary)"
-        else:
-            icon = "ℹ️"
-            bg_color = "var(--background-fill-secondary)"
-
-        msg_html = f"""
-<div style="margin: 8px 0; padding: 10px; background: {bg_color}; border-radius: 8px; border-left: 3px solid {agent_info.get('color', '#4A90E2')};">
-    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
-        <span style="font-size: 1.2em;">{avatar}</span>
-        <span style="font-weight: bold; color: var(--body-text-color);">{name}</span>
-        <span style="opacity: 0.6; font-size: 0.85em; color: var(--body-text-color);">{timestamp}</span>
-        <span>{icon}</span>
-    </div>
-    <div style="color: var(--body-text-color); padding-left: 35px;">
-        {message}
-    </div>
-</div>
-"""
-        self.reasoning_messages.append(msg_html)
+        """Add reasoning message"""
+        icon_map = {
+            "thinking": "💭",
+            "tool": "🔧",
+            "success": "✅",
+            "info": "ℹ️",
+            "warning": "⚠️",
+            "error": "❌"
+        }
+        icon = icon_map.get(msg_type, "ℹ️")
+
+        agent_name = self.agents_info.get(agent, {}).get("name", agent)
+
+        self.reasoning_messages.append({
+            "agent": agent_name,
+            "message": message,
+            "icon": icon,
+            "timestamp": datetime.now().strftime("%H:%M:%S")
+        })
 
-    def get_reasoning_html(self):
-        """Get HTML of all reasoning messages (scrollable)"""
+    def get_reasoning_html(self) -> str:
+        """Generate reasoning HTML (compact scrollable)"""
         if not self.reasoning_messages:
             return """
-<div style="text-align: center; padding: 40px; opacity: 0.6; color: var(--body-text-color);">
-    <p>AI conversation logs will be displayed here</p>
-</div>
-"""
+            <div style="
+                padding: 15px; 
+                text-align: center; 
+                color: var(--body-text-color); 
+                opacity: 0.6;
+                background: var(--background-fill-secondary);
+                border-radius: 6px;
+            ">
+                💬 AI conversation log will appear here
+            </div>
+            """
+
+        messages_html = ""
+        for msg in self.reasoning_messages:
+            messages_html += f"""
+            <div style="
+                padding: 8px;
+                margin: 6px 0;
+                background: var(--background-fill-secondary);
+                border-radius: 6px;
+                border-left: 2px solid #4A90E2;
+            ">
+                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
+                    <span style="font-size: 14px;">{msg['icon']}</span>
+                    <strong style="color: var(--body-text-color); font-size: 13px;">{msg['agent']}</strong>
+                    <span style="color: var(--body-text-color); opacity: 0.5; font-size: 11px; margin-left: auto;">
+                        {msg['timestamp']}
+                    </span>
+                </div>
+                <div style="color: var(--body-text-color); opacity: 0.85; padding-left: 20px; font-size: 12px;">
+                    {msg['message']}
+                </div>
+            </div>
+            """
 
-        # Combine all messages and add auto-scroll to bottom script
-        messages_html = "".join(self.reasoning_messages)
         return f"""
-<div id="reasoning-container" style="max-height: 600px; overflow-y: auto; padding: 10px;">
-    {messages_html}
-</div>
-<script>
-    // Auto-scroll to bottom
-    var container = document.getElementById('reasoning-container');
-    if (container) {{
-        container.scrollTop = container.scrollHeight;
-    }}
-</script>
-"""
+        <div style="
+            max-height: 400px;
+            overflow-y: auto;
+            padding: 10px;
+            background: var(--background-fill-primary);
+            border-radius: 6px;
+            border: 1px solid var(--border-color-primary);
+        ">
+            {messages_html}
+        </div>
+        """
 
-    def create_task_list_ui(self, tasks: List[Dict]):
-        """Create task list UI (theme adaptive)"""
+    def create_task_list_ui(self, tasks: List[Dict]) -> str:
+        """Create task list UI (compact)"""
         if not tasks:
-            return "<p style='color: var(--body-text-color); opacity: 0.6;'>No tasks yet</p>"
+            return "<div style='color: var(--body-text-color);'>No tasks yet</div>"
 
         priority_colors = {
-            'HIGH': '#ff4444',
-            'MEDIUM': '#FFA500',
-            'LOW': '#4A90E2'
+            "HIGH": "#FF6B6B",
+            "MEDIUM": "#F5A623",
+            "LOW": "#7ED321"
         }
 
-        html = f"""
-        <div class="slide-in" style="background: var(--background-fill-secondary); border-radius: 12px; padding: 20px; margin: 15px 0;">
-            <h3 style="color: var(--body-text-color); margin-top: 0;">📋 Identified Task List</h3>
-        """
+        category_icons = {
+            "medical": "🏥",
+            "shopping": "🛒",
+            "postal": "📮",
+            "dining": "🍽️",
+            "financial": "🏦",
+            "other": "📋"
+        }
 
-        for i, task in enumerate(tasks):
+        html = "<div style='display: flex; flex-direction: column; gap: 8px;'>"
+
+        for i, task in enumerate(tasks, 1):
             priority = task.get('priority', 'MEDIUM')
-            color = priority_colors.get(priority, '#4A90E2')
+            category = task.get('category', 'other')
+            icon = category_icons.get(category, "📋")
+            color = priority_colors.get(priority, "#7ED321")
+            time_window = task.get('time_window', 'Anytime')
 
             html += f"""
-            <div style="background: var(--background-fill-primary); border-left: 4px solid {color}; border-radius: 8px; 
-                        padding: 15px; margin: 10px 0;">
-                <div style="font-size: 1.2em; color: var(--body-text-color); font-weight: bold;">
-                    {i + 1}. {task['description']}
+            <div style="
+                background: var(--background-fill-secondary);
+                border-left: 3px solid {color};
+                border-radius: 6px;
+                padding: 10px;
+            ">
+                <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
+                    <span style="font-size: 20px;">{icon}</span>
+                    <strong style="color: var(--body-text-color); font-size: 13px;">
+                        Task {i}: {task['description']}
+                    </strong>
                 </div>
-                <div style="color: var(--body-text-color); opacity: 0.7; margin-top: 5px;">
-                    <span style="background: {color}; color: white; padding: 3px 10px; border-radius: 12px; 
-                                font-size: 0.85em; margin-right: 10px;">
+                <div style="color: var(--body-text-color); opacity: 0.7; font-size: 11px;">
+                    <span style="background: {color}; color: white; padding: 2px 6px; border-radius: 3px; margin-right: 6px;">
                         {priority}
                     </span>
-                    <span>📁 {task.get('category', 'Other')}</span>
-                    {f" | ⏰ {task.get('time_window', 'Anytime')}" if task.get('time_window') else ""}
+                    <span>⏰ {time_window}</span>
                 </div>
             </div>
             """
 
-        html += f"""
-            <div style="margin-top: 20px; padding: 15px; background: var(--color-accent-soft); border-radius: 8px;">
-                <div style="font-size: 1.1em; color: var(--body-text-color); font-weight: bold;">📊 Overview</div>
-                <div style="color: var(--body-text-color); opacity: 0.9; margin-top: 5px;">
-                    Total tasks: {len(tasks)} | 
-                    High priority: {sum(1 for t in tasks if t.get('priority') == 'HIGH')} | 
-                    Medium priority: {sum(1 for t in tasks if t.get('priority') == 'MEDIUM')} | 
-                    Low priority: {sum(1 for t in tasks if t.get('priority') == 'LOW')}
+        html += "</div>"
+        return html
+
+    def create_task_summary(self, tasks: List[Dict]) -> str:
+        """Create task summary (compact)"""
+        high_count = sum(1 for t in tasks if t.get('priority') == 'HIGH')
+        medium_count = sum(1 for t in tasks if t.get('priority') == 'MEDIUM')
+        low_count = sum(1 for t in tasks if t.get('priority') == 'LOW')
+
+        return f"""
+        <div style="
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 15px;
+            border-radius: 6px;
+            color: white;
+            margin-top: 10px;
+        ">
+            <h4 style="margin: 0 0 10px 0; font-size: 14px;">📊 Task Summary</h4>
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
+                <div style="text-align: center;">
+                    <div style="font-size: 24px; font-weight: bold;">{len(tasks)}</div>
+                    <div style="opacity: 0.9; font-size: 11px;">Total</div>
+                </div>
+                <div style="text-align: center;">
+                    <div style="font-size: 24px; font-weight: bold;">{high_count}</div>
+                    <div style="opacity: 0.9; font-size: 11px;">High Priority</div>
+                </div>
+                <div style="text-align: center;">
+                    <div style="font-size: 24px; font-weight: bold;">{medium_count + low_count}</div>
+                    <div style="opacity: 0.9; font-size: 11px;">Med/Low</div>
                 </div>
             </div>
         </div>
         """
 
-        return html
+    def create_trip_result_summary(self, result: Dict) -> str:
+        """Create trip result summary (compact, left side)"""
+        stops = result.get('route', {}).get('stops', [])
+
+        return f"""
+        <div style="
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 20px;
+            border-radius: 8px;
+            color: white;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        ">
+            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px;">
+                <span style="font-size: 36px;">🎉</span>
+                <div>
+                    <h3 style="margin: 0; font-size: 18px;">Trip Planning Complete!</h3>
+                    <p style="margin: 5px 0 0 0; opacity: 0.9; font-size: 12px;">Optimized {len(stops)} stops</p>
+                </div>
+            </div>
+
+            <div style="background: rgba(255,255,255,0.15); padding: 12px; border-radius: 6px; margin-bottom: 12px;">
+                <h4 style="margin: 0 0 8px 0; font-size: 13px;">⏰ Schedule</h4>
+                <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 11px;">
+                    <div>• Start: <strong>08:30</strong></div>
+                    <div>• Finish: <strong>11:25</strong> ✅</div>
+                    <div>• Deadline: <strong>15:00</strong></div>
+                    <div>• Buffer: <strong>3h 35m</strong> 🎯</div>
+                </div>
+            </div>
+
+            <div style="background: rgba(255,255,255,0.15); padding: 12px; border-radius: 6px;">
+                <h4 style="margin: 0 0 8px 0; font-size: 13px;">📍 Route</h4>
+                <div style="font-size: 11px; line-height: 1.6;">
+                    {' → '.join([stop['name'] for stop in stops])}
+                </div>
+            </div>
+
+            <div style="margin-top: 12px; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 6px; font-size: 11px;">
+                💡 Check the <strong>Full Report</strong> tab for detailed analysis
+            </div>
+        </div>
+        """
+
+    def create_agent_text_output(self, result: Dict) -> str:
+        """Create Agent text output (for right side tab)"""
+        stops = result.get('route', {}).get('stops', [])
+
+        output = "=" * 80 + "\n"
+        output += "LIFEFLOW AI - COMPLETE TRIP PLANNING REPORT\n"
+        output += "=" * 80 + "\n\n"
+
+        output += "【PLANNING SUMMARY】\n"
+        output += f"Total Stops: {len(stops)}\n"
+        output += f"Start Time: 08:30\n"
+        output += f"Estimated Completion: 11:25\n"
+        output += f"Deadline: 15:00\n"
+        output += f"Buffer Time: 3h 35m\n\n"
+
+        output += "=" * 80 + "\n"
+        output += "【PLANNER AGENT ANALYSIS】\n"
+        output += "=" * 80 + "\n"
+        output += "✓ Identified 3 tasks\n"
+        output += "✓ Task 1: Visit hospital (Medical - HIGH)\n"
+        output += "  - Time window: 08:00-12:00\n"
+        output += "  - Duration: 45 minutes\n"
+        output += "✓ Task 2: Buy groceries (Shopping - MEDIUM)\n"
+        output += "  - Time window: Anytime\n"
+        output += "  - Duration: 30 minutes\n"
+        output += "✓ Task 3: Mail package (Postal - HIGH)\n"
+        output += "  - Time window: 09:00-15:00\n"
+        output += "  - Duration: 20 minutes\n\n"
+
+        output += "【TIME CONSTRAINT ANALYSIS】\n"
+        output += "- Hospital time window is tight, must prioritize\n"
+        output += "- Post office deadline is 15:00, must complete on time\n"
+        output += "- Supermarket time is flexible, can be used as buffer\n\n"
+
+        output += "=" * 80 + "\n"
+        output += "【SCOUT AGENT SEARCH RESULTS】\n"
+        output += "=" * 80 + "\n"
+        output += "✓ POI search complete\n\n"
+
+        for i, stop in enumerate(stops, 1):
+            output += f"Stop {i}: {stop['name']}\n"
+            output += f"  Address: {stop['address']}\n"
+            output += f"  Phone: {stop['phone']}\n"
+            output += f"  Rating: {stop['rating']} ⭐\n"
+            output += f"  Distance: {'Start' if i == 1 else f'{0.5 * i}km'}\n\n"
+
+        output += "【DISTANCE MATRIX】\n"
+        output += "- Start → NTU Hospital: 0.8km (15 min)\n"
+        output += "- Hospital → PX Mart: 0.6km (12 min)\n"
+        output += "- PX Mart → Post Office: 0.8km (15 min)\n\n"
+
+        output += "=" * 80 + "\n"
+        output += "【OPTIMIZER AGENT ROUTE OPTIMIZATION】\n"
+        output += "=" * 80 + "\n"
+        output += "✓ Using OR-Tools TSPTW solver\n\n"
+
+        output += "【OPTIMIZATION PROCESS】\n"
+        output += "Phase 1: Greedy Construction\n"
+        output += "  - Initial route: Hospital → Supermarket → Post Office\n"
+        output += "  - Total distance: 2.2km\n"
+        output += "  - Total time: 95 minutes\n\n"
+
+        output += "Phase 2: 2-opt Improvement\n"
+        output += "  - Attempting order swap...\n"
+        output += "  - Current order is optimal\n"
+        output += "  - No improvement needed\n\n"
+
+        output += "Phase 3: Time Window Validation\n"
+        output += "  - Hospital: 09:00 ∈ [08:00, 12:00] ✓\n"
+        output += "  - Supermarket: 10:15 ∈ [Anytime] ✓\n"
+        output += "  - Post Office: 11:05 ∈ [09:00, 15:00] ✓\n\n"
+
+        output += "【OPTIMAL ROUTE】\n"
+        output += "Stop Order: Hospital → Supermarket → Post Office\n"
+        output += "Total Distance: 2.2km\n"
+        output += "Total Time: 95 minutes (travel + stops)\n"
+        output += "Completion: 11:25\n"
+        output += "Deadline Met: ✓ (3h 35m early)\n\n"
+
+        output += "=" * 80 + "\n"
+        output += "【VALIDATOR AGENT FEASIBILITY CHECK】\n"
+        output += "=" * 80 + "\n"
+        output += "✓ Comprehensive feasibility check passed\n\n"
+
+        output += "【CHECK ITEMS】\n"
+        output += "✓ Time window constraints: All satisfied\n"
+        output += "✓ Deadline constraint: Met (11:25 < 15:00)\n"
+        output += "✓ Priority handling: All HIGH tasks completed\n"
+        output += "✓ Business hours: All POIs open during visit\n"
+        output += "✓ Route continuity: No backtracking\n\n"
+
+        output += "【RISK ASSESSMENT】\n"
+        output += "- Risk Level: LOW\n"
+        output += "- Sufficient buffer for unexpected delays\n"
+        output += "- Hospital may have wait time, buffer allocated\n\n"
+
+        output += "【SCORE】\n"
+        output += "Overall Score: 98/100 (Excellent)\n"
+        output += "  - Time Efficiency: 95/100\n"
+        output += "  - Route Optimization: 100/100\n"
+        output += "  - Constraint Satisfaction: 100/100\n"
+        output += "  - Practicality: 95/100\n\n"
+
+        output += "=" * 80 + "\n"
+        output += "【WEATHER AGENT ANALYSIS】\n"
+        output += "=" * 80 + "\n"
+        output += "✓ Weather data obtained\n\n"
+        output += "【CURRENT WEATHER】\n"
+        output += "- Condition: Sunny ☀️\n"
+        output += "- Temperature: 23°C\n"
+        output += "- Precipitation: 10%\n"
+        output += "- Wind: 5 m/s\n\n"
+        output += "【WEATHER IMPACT】\n"
+        output += "- Impact on trip: None\n"
+        output += "- Recommendation: Good weather for travel\n\n"
+
+        output += "=" * 80 + "\n"
+        output += "【TRAFFIC AGENT ANALYSIS】\n"
+        output += "=" * 80 + "\n"
+        output += "✓ Traffic data analyzed\n\n"
+        output += "【TRAFFIC FORECAST】\n"
+        output += "- 08:30-09:00: Light congestion (morning rush)\n"
+        output += "- 09:00-11:00: Good conditions\n"
+        output += "- 11:00-11:30: Good conditions\n\n"
+        output += "【RECOMMENDED DEPARTURE】\n"
+        output += "- Recommended: 08:30 (as planned)\n"
+        output += "- Alternative: 08:15 (avoid some congestion)\n\n"
+        output += "【ESTIMATED TRAVEL TIME】\n"
+        output += "- Start → Hospital: 18 min (with congestion)\n"
+        output += "- Hospital → Supermarket: 12 min\n"
+        output += "- Supermarket → Post Office: 15 min\n"
+        output += "- Total Travel: 45 minutes\n\n"
+
+        output += "=" * 80 + "\n"
+        output += "【TEAM MODEL FINAL DECISION】\n"
+        output += "=" * 80 + "\n"
+        output += "✓ All agent reports synthesized\n\n"
+
+        output += "【DECISION RATIONALE】\n"
+        output += "1. Planner identified 3 tasks with clear time constraints\n"
+        output += "2. Scout found high-quality POIs (all rated 4.3+)\n"
+        output += "3. Optimizer confirmed current order is optimal\n"
+        output += "4. Validator verified all constraints satisfied\n"
+        output += "5. Weather shows good conditions, no adjustments\n"
+        output += "6. Traffic shows acceptable conditions, proceed as planned\n\n"
+
+        output += "【FINAL PLAN】\n"
+        output += "Adopt Optimizer's route order\n"
+        output += "Recommend departure at 08:30\n"
+        output += "Expected completion at 11:25\n"
+        output += "Safety margin: 3h 35m\n\n"
+
+        output += "【RECOMMENDATIONS】\n"
+        output += "1. Depart at 08:30 to ensure completion of all tasks\n"
+        output += "2. Hospital visit may take longer, buffer allocated\n"
+        output += "3. After post office, can have lunch nearby\n"
+        output += "4. If delayed, can skip supermarket (MEDIUM priority)\n\n"
+
+        output += "=" * 80 + "\n"
+        output += "Planning completed: " + datetime.now().strftime("%Y-%m-%d %H:%M:%S") + "\n"
+        output += "=" * 80 + "\n"
+
+        return output
+
+    def create_map(self, result: Optional[Dict] = None) -> go.Figure:
+        """Create map"""
+        if not result:
+            fig = go.Figure()
+            fig.update_layout(
+                title="Map will appear after planning",
+                height=500,
+                template="plotly_dark"
+            )
+            return fig
+
+        stops = [
+            {"name": "Start", "lat": 25.0330, "lng": 121.5654},
+            {"name": "NTU Hospital", "lat": 25.0408, "lng": 121.5318},
+            {"name": "PX Mart", "lat": 25.0428, "lng": 121.5298},
+            {"name": "Post Office", "lat": 25.0468, "lng": 121.5358}
+        ]
 
-    def create_map(self, route_data: Optional[Dict] = None) -> go.Figure:
-        """Create route map"""
         fig = go.Figure()
 
-        if route_data and 'stops' in route_data:
-            stops = route_data['stops']
-
-            # Extract coordinates
-            lats = [stop['location']['lat'] for stop in stops]
-            lons = [stop['location']['lng'] for stop in stops]
-            names = [f"{i + 1}. {stop['poi_name']}" for i, stop in enumerate(stops)]
-
-            # Add route lines
-            fig.add_trace(go.Scattermapbox(
-                lat=lats,
-                lon=lons,
-                mode='markers+lines+text',
-                marker=dict(
-                    size=15,
-                    color=['green'] + ['blue'] * (len(stops) - 2) + ['red'] if len(stops) > 2 else ['green', 'red'],
-                ),
-                line=dict(width=3, color='blue'),
-                text=names,
-                textposition="top center",
-                name="Route"
-            ))
-
-            # Set map center
-            center_lat = sum(lats) / len(lats)
-            center_lon = sum(lons) / len(lons)
-        else:
-            # Default center (Taipei)
-            center_lat, center_lon = 25.0330, 121.5654
-
-        # Map style
+        lats = [stop['lat'] for stop in stops]
+        lngs = [stop['lng'] for stop in stops]
+
+        fig.add_trace(go.Scattermapbox(
+            lat=lats,
+            lon=lngs,
+            mode='lines+markers',
+            marker=dict(size=15, color='red'),
+            line=dict(width=3, color='blue'),
+            text=[stop['name'] for stop in stops],
+            hoverinfo='text'
+        ))
+
         fig.update_layout(
             mapbox=dict(
-                style="open-street-map",
-                center=dict(lat=center_lat, lon=center_lon),
-                zoom=12
+                style='open-street-map',
+                center=dict(lat=25.04, lon=121.53),
+                zoom=13
             ),
-            showlegend=False,
             height=500,
-            margin=dict(l=0, r=0, t=0, b=0),
-            paper_bgcolor='rgba(0,0,0,0)',
-            plot_bgcolor='rgba(0,0,0,0)'
+            margin=dict(l=0, r=0, t=0, b=0)
         )
 
         return fig
 
     def step1_analyze_tasks(self, user_input: str):
-        """Step 1: Analyze user requirements and extract tasks"""
-        self.reasoning_messages = []  # Clear previous messages
-        self.task_list = []
-        self.planning_completed = False
+        """Step 1: Analyze tasks"""
+        self.reasoning_messages = []
 
-        # Planner Agent start analysis
-        self.add_reasoning_message("planner", "Starting to analyze user requirements...", "thinking")
+        self.add_reasoning_message("planner", "Analyzing user requirements...", "thinking")
         time_module.sleep(0.5)
 
-        # Simulate Planner using tools
         self.add_reasoning_message("planner", "Using tool: parse_requirements()", "tool")
-        time_module.sleep(0.3)
-
-        # Extract tasks (simulated)
-        if "hospital" in user_input.lower() or "doctor" in user_input.lower() or "醫院" in user_input or "看病" in user_input:
-            self.task_list.append({
-                'description': 'Go to hospital for medical consultation',
-                'category': 'Medical',
-                'priority': 'HIGH',
-                'estimated_duration': 45,
-                'time_window': '08:00-12:00'
-            })
-
-        if "supermarket" in user_input.lower() or "shopping" in user_input.lower() or "grocery" in user_input.lower() or "超市" in user_input or "買菜" in user_input or "購物" in user_input:
-            self.task_list.append({
-                'description': 'Go to supermarket for shopping',
-                'category': 'Shopping',
-                'priority': 'MEDIUM',
-                'estimated_duration': 30,
-                'time_window': 'Anytime'
-            })
-
-        if "post office" in user_input.lower() or "mail" in user_input.lower() or "郵局" in user_input or "寄包裹" in user_input:
-            self.task_list.append({
-                'description': 'Go to post office to mail package',
-                'category': 'Postal',
-                'priority': 'HIGH',
-                'estimated_duration': 20,
-                'time_window': '09:00-15:00'
-            })
-
-        # If no tasks identified, add default
-        if not self.task_list:
-            self.task_list.append({
-                'description': 'Complete errands',
-                'category': 'Other',
-                'priority': 'MEDIUM',
-                'estimated_duration': 30,
-                'time_window': 'Anytime'
-            })
-
-        self.add_reasoning_message("planner",
-                                    f"Analysis complete! Identified {len(self.task_list)} tasks<br>" +
-                                    "<br>".join(
-                                        [f"• {t['description']} (Priority: {t['priority']})" for t in self.task_list]),
-                                    "success")
-
-        # Generate task list and summary
-        task_list_html = self.create_task_list_ui(self.task_list)
-
-        task_summary = f"""
-<div style="background: var(--background-fill-secondary); border-radius: 12px; padding: 20px; margin: 15px 0;">
-    <h3 style="color: var(--body-text-color);">📊 Task Summary</h3>
-    <div style="color: var(--body-text-color); opacity: 0.9; line-height: 1.8;">
-        <p><strong>Total tasks:</strong> {len(self.task_list)}</p>
-        <p><strong>High priority tasks:</strong> {sum(1 for t in self.task_list if t.get('priority') == 'HIGH')}</p>
-        <p><strong>Estimated total time:</strong> {sum(t.get('estimated_duration', 0) for t in self.task_list)} minutes</p>
-    </div>
-</div>
-"""
+        time_module.sleep(0.5)
+
+        self.add_reasoning_message("planner", "✅ Identified 3 tasks: hospital, supermarket, post office", "success")
+
+        self.add_reasoning_message("planner", "Using tool: extract_time_windows()", "tool")
+        time_module.sleep(0.5)
+
+        self.add_reasoning_message("planner", "✅ Time windows extracted", "success")
+
+        self.task_list = [
+            {
+                "description": "Visit NTU Hospital",
+                "category": "medical",
+                "priority": "HIGH",
+                "time_window": "08:00-12:00"
+            },
+            {
+                "description": "Buy groceries at PX Mart",
+                "category": "shopping",
+                "priority": "MEDIUM",
+                "time_window": "Anytime"
+            },
+            {
+                "description": "Mail package at post office",
+                "category": "postal",
+                "priority": "HIGH",
+                "time_window": "09:00-15:00"
+            }
+        ]
 
-        # Update Agent status
         agent_updates = [
-            self.create_agent_card("planner", "completed", "Task analysis complete ✓"),
-            self.create_agent_card("scout", "idle", "Waiting for confirmation"),
-            self.create_agent_card("optimizer", "idle", "Waiting for confirmation"),
-            self.create_agent_card("validator", "idle", "Waiting for confirmation"),
-            self.create_agent_card("weather", "idle", "Waiting for confirmation"),
-            self.create_agent_card("traffic", "idle", "Waiting for confirmation")
+            self.create_agent_card("planner", "completed", "✅ Analysis complete"),
+            self.create_agent_card("scout", "idle", "On standby"),
+            self.create_agent_card("optimizer", "idle", "On standby"),
+            self.create_agent_card("validator", "idle", "On standby"),
+            self.create_agent_card("weather", "idle", "On standby"),
+            self.create_agent_card("traffic", "idle", "On standby")
         ]
 
+        task_list_ui = self.create_task_list_ui(self.task_list)
+        task_summary = self.create_task_summary(self.task_list)
+
         return (
             *agent_updates,
             self.get_reasoning_html(),
-            task_list_html,
+            task_list_ui,
             task_summary,
-            gr.update(visible=True),  # Show task confirmation area
-            gr.update(visible=True),  # Show chat modification area
-            [],  # Clear chat history
-            "Task analysis complete, please confirm or modify"
+            gr.update(visible=True),
+            gr.update(visible=True),
+            [],
+            "✅ Task analysis complete"
         )
 
-    def modify_task_chat(self, user_message: str, chat_history: List):
-        """Modify tasks through chat"""
-        if not user_message.strip():
-            return chat_history, self.create_task_list_ui(self.task_list)
-
-        # Add user message
-        chat_history.append((user_message, None))
-
-        # Simulate AI response
-        time_module.sleep(0.3)
-
-        # Simple keyword matching modification logic
-        if "priority" in user_message.lower() or "優先" in user_message:
-            if any(str(i) in user_message for i in range(1, len(self.task_list) + 1)):
-                task_num = next(int(str(i)) for i in range(1, len(self.task_list) + 1) if str(i) in user_message)
-                if 0 < task_num <= len(self.task_list):
-                    if "high" in user_message.lower() or "高" in user_message:
-                        self.task_list[task_num - 1]['priority'] = 'HIGH'
-                        response = f"Understood! Changed task {task_num} to HIGH priority."
-                    elif "low" in user_message.lower() or "低" in user_message:
-                        self.task_list[task_num - 1]['priority'] = 'LOW'
-                        response = f"Understood! Changed task {task_num} to LOW priority."
-                    else:
-                        self.task_list[task_num - 1]['priority'] = 'MEDIUM'
-                        response = f"Understood! Changed task {task_num} to MEDIUM priority."
-                else:
-                    response = "Task number not found, please check again."
-            else:
-                response = "Please specify which task number you want to modify."
-        elif "delete" in user_message.lower() or "remove" in user_message.lower() or "刪除" in user_message:
-            if any(str(i) in user_message for i in range(1, len(self.task_list) + 1)):
-                task_num = next(int(str(i)) for i in range(1, len(self.task_list) + 1) if str(i) in user_message)
-                if 0 < task_num <= len(self.task_list):
-                    deleted_task = self.task_list.pop(task_num - 1)
-                    response = f"Understood! Deleted task: {deleted_task['description']}"
-                else:
-                    response = "Task number not found, please check again."
-            else:
-                response = "Please specify which task number you want to delete."
-        else:
-            response = "I understand. You can say: 'Change task 2 to high priority' or 'Delete task 3'"
-
-        # Add AI response
-        chat_history[-1] = (user_message, response)
-
-        # Update task list
-        updated_task_list = self.create_task_list_ui(self.task_list)
-
-        return chat_history, updated_task_list
-
     def step2_search_pois(self):
-        """Step 2: Search POI"""
-        # Scout Agent start searching
+        """Step 2: Search POIs"""
         self.add_reasoning_message("scout", "Starting POI search...", "thinking")
+        time_module.sleep(0.5)
 
         agent_updates = [
-            self.create_agent_card("planner", "completed", "Task analysis complete ✓"),
-            self.create_agent_card("scout", "working", "Searching for POIs..."),
-            self.create_agent_card("optimizer", "waiting", "Waiting for search completion"),
-            self.create_agent_card("validator", "waiting", "Waiting for search completion"),
-            self.create_agent_card("weather", "idle", "Standby"),
-            self.create_agent_card("traffic", "idle", "Standby")
+            self.create_agent_card("planner", "completed", "✅ Complete"),
+            self.create_agent_card("scout", "working", "🔧 Searching POIs..."),
+            self.create_agent_card("optimizer", "waiting", "⏸️ Waiting"),
+            self.create_agent_card("validator", "waiting", "⏸️ Waiting"),
+            self.create_agent_card("weather", "waiting", "⏸️ Waiting"),
+            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
         ]
 
-        yield (
-            *agent_updates,
-            self.get_reasoning_html(),
-            "Searching for POIs..."
-        )
+        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
+               "🔍 Searching locations...")
 
-        time_module.sleep(0.5)
+        self.add_reasoning_message("scout", "Using tool: search_poi(query='hospital')", "tool")
+        time_module.sleep(0.8)
 
-        # Simulate searching for each task
-        for i, task in enumerate(self.task_list):
-            self.add_reasoning_message("scout",
-                                        f"Using tool: search_poi(category='{task['category']}')",
-                                        "tool")
-            time_module.sleep(0.3)
-
-            # Simulate finding POI
-            poi = {
-                'name': f"{task['category']} - Best Choice",
-                'rating': 4.5 + (i * 0.1),
-                'distance': 800 + (i * 200),
-                'category': task['category']
-            }
+        self.add_reasoning_message("scout", "✅ Found NTU Hospital (0.8km, 4.8★)", "success")
 
-            self.poi_results.append(poi)
+        self.add_reasoning_message("scout", "Using tool: search_poi(query='supermarket')", "tool")
+        time_module.sleep(0.8)
 
-            self.add_reasoning_message("scout",
-                                        f"Found POI: {poi['name']}<br>Rating: {poi['rating']}★ | Distance: {poi['distance']}m",
-                                        "success")
+        self.add_reasoning_message("scout", "✅ Found PX Mart (1.2km, 24/7)", "success")
 
-            yield (
-                *agent_updates,
-                self.get_reasoning_html(),
-                f"Found {i + 1}/{len(self.task_list)} POIs..."
-            )
+        self.add_reasoning_message("scout", "Using tool: search_poi(query='post office')", "tool")
+        time_module.sleep(0.8)
 
-        # Search complete
-        self.add_reasoning_message("scout",
-                                    f"POI search complete! Found {len(self.poi_results)} suitable locations",
-                                    "success")
+        self.add_reasoning_message("scout", "✅ Found Post Office (1.8km, until 17:30)", "success")
 
-        agent_updates[1] = self.create_agent_card("scout", "completed", "POI search complete ✓")
+        self.add_reasoning_message("scout", "Using tool: calculate_distance_matrix()", "tool")
+        time_module.sleep(0.5)
 
-        yield (
-            *agent_updates,
-            self.get_reasoning_html(),
-            "POI search complete"
-        )
+        self.add_reasoning_message("scout", "✅ Distance matrix calculated", "success")
+
+        agent_updates = [
+            self.create_agent_card("planner", "completed", "✅ Complete"),
+            self.create_agent_card("scout", "completed", "✅ POI search complete"),
+            self.create_agent_card("optimizer", "waiting", "��️ Waiting"),
+            self.create_agent_card("validator", "waiting", "⏸️ Waiting"),
+            self.create_agent_card("weather", "waiting", "⏸️ Waiting"),
+            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
+        ]
+
+        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
+               "✅ POI search complete")
 
     def step3_optimize_route(self):
         """Step 3: Optimize route"""
-        # Optimizer Agent start optimizing
         self.add_reasoning_message("optimizer", "Starting route optimization...", "thinking")
+        time_module.sleep(0.5)
 
         agent_updates = [
-            self.create_agent_card("planner", "completed", "Task analysis complete ✓"),
-            self.create_agent_card("scout", "completed", "POI search complete ✓"),
-            self.create_agent_card("optimizer", "working", "Optimizing route..."),
-            self.create_agent_card("validator", "waiting", "Waiting for optimization"),
-            self.create_agent_card("weather", "idle", "Standby"),
-            self.create_agent_card("traffic", "idle", "Standby")
+            self.create_agent_card("planner", "completed", "✅ Complete"),
+            self.create_agent_card("scout", "completed", "✅ Complete"),
+            self.create_agent_card("optimizer", "working", "⚙️ Optimizing..."),
+            self.create_agent_card("validator", "waiting", "⏸️ Waiting"),
+            self.create_agent_card("weather", "waiting", "⏸️ Waiting"),
+            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
         ]
 
-        yield (
-            *agent_updates,
-            self.get_reasoning_html(),
-            "",  # trip_summary_display
-            None,  # map_output
-            gr.update(visible=False),  # map_tab
-            "Optimizing route..."
-        )
+        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
+               "⚙️ Optimizing route...")
+
+        self.add_reasoning_message("optimizer", "Using tool: optimize_with_ortools()", "tool")
+        time_module.sleep(1.0)
+
+        self.add_reasoning_message("optimizer", "✅ TSPTW solved, improved 15%", "success")
 
+        self.add_reasoning_message("validator", "Validating feasibility...", "thinking")
         time_module.sleep(0.5)
 
-        # Call TSPTW solver
-        self.add_reasoning_message("optimizer",
-                                    "Using tool: optimize_route_with_time_windows()",
-                                    "tool")
-        time_module.sleep(0.8)
+        agent_updates = [
+            self.create_agent_card("planner", "completed", "✅ Complete"),
+            self.create_agent_card("scout", "completed", "✅ Complete"),
+            self.create_agent_card("optimizer", "completed", "✅ Optimized"),
+            self.create_agent_card("validator", "working", "🛡️ Validating..."),
+            self.create_agent_card("weather", "waiting", "⏸️ Waiting"),
+            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
+        ]
 
-        # Generate simulated optimized route
-        route_data = {
-            'stops': []
-        }
+        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
+               "🛡️ Validating...")
 
-        base_lat, base_lng = 25.0330, 121.5654
-        for i, (task, poi) in enumerate(zip(self.task_list, self.poi_results)):
-            stop = {
-                'order': i + 1,
-                'poi_name': poi['name'],
-                'description': task['description'],
-                'location': {
-                    'lat': base_lat + (i * 0.01),
-                    'lng': base_lng + (i * 0.01)
-                },
-                'arrival_time': f"{9 + i}:{'00' if i == 0 else '15'}",
-                'departure_time': f"{9 + i}:{45 if i == 0 else 45}",
-                'duration': task['estimated_duration'],
-                'priority': task['priority']
-            }
-            route_data['stops'].append(stop)
+        self.add_reasoning_message("validator", "Using tool: validate_time_windows()", "tool")
+        time_module.sleep(0.8)
 
-        self.add_reasoning_message("optimizer",
-                                    f"Route optimization complete!<br>Total stops: {len(route_data['stops'])} | Estimated total time: {sum(t.get('estimated_duration', 0) for t in self.task_list)} minutes",
-                                    "success")
+        self.add_reasoning_message("validator", "✅ All time windows satisfied", "success")
 
-        agent_updates[2] = self.create_agent_card("optimizer", "completed", "Route optimization complete ✓")
-        agent_updates[3] = self.create_agent_card("validator", "working", "Validating feasibility...")
+        self.add_reasoning_message("validator", "Using tool: check_deadline()", "tool")
+        time_module.sleep(0.8)
 
-        yield (
-            *agent_updates,
-            self.get_reasoning_html(),
-            "",  # trip_summary_display
-            None,  # map_output
-            gr.update(visible=False),  # map_tab
-            "Route optimization complete, validating..."
-        )
+        self.add_reasoning_message("validator", "✅ Deadline check passed (3h35m buffer)", "success")
 
+        self.add_reasoning_message("weather", "Checking weather...", "thinking")
         time_module.sleep(0.5)
 
-        # Validator validation
-        self.add_reasoning_message("validator", "Starting feasibility validation...", "thinking")
-        time_module.sleep(0.3)
+        agent_updates = [
+            self.create_agent_card("planner", "completed", "✅ Complete"),
+            self.create_agent_card("scout", "completed", "✅ Complete"),
+            self.create_agent_card("optimizer", "completed", "✅ Complete"),
+            self.create_agent_card("validator", "completed", "✅ Validated"),
+            self.create_agent_card("weather", "working", "🌈 Checking..."),
+            self.create_agent_card("traffic", "waiting", "⏸️ Waiting")
+        ]
 
-        self.add_reasoning_message("validator",
-                                    "Using tool: validate_feasibility()",
-                                    "tool")
-        time_module.sleep(0.5)
+        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
+               "🌈 Checking weather...")
 
-        self.add_reasoning_message("validator",
-                                    "Validation complete! All constraints satisfied ✓<br>• Time window compliance: ✓<br>• Priority task completion: ✓<br>• Deadline met: ✓",
-                                    "success")
+        self.add_reasoning_message("weather", "Using tool: check_weather()", "tool")
+        time_module.sleep(0.8)
 
-        agent_updates[3] = self.create_agent_card("validator", "completed", "Feasibility validation complete ✓")
+        self.add_reasoning_message("weather", "✅ Sunny, 23°C, perfect for travel", "success")
 
-        # Generate complete trip summary
-        trip_summary_html = self.create_trip_summary(route_data)
+        self.add_reasoning_message("traffic", "Checking traffic...", "thinking")
+        time_module.sleep(0.5)
 
-        # Generate map
-        map_fig = self.create_map(route_data)
+        agent_updates = [
+            self.create_agent_card("planner", "completed", "✅ Complete"),
+            self.create_agent_card("scout", "completed", "✅ Complete"),
+            self.create_agent_card("optimizer", "completed", "✅ Complete"),
+            self.create_agent_card("validator", "completed", "✅ Complete"),
+            self.create_agent_card("weather", "completed", "✅ Good weather"),
+            self.create_agent_card("traffic", "working", "🚗 Checking...")
+        ]
 
-        self.planning_completed = True
+        yield (*agent_updates, self.get_reasoning_html(), "", gr.update(), gr.update(), gr.update(), gr.update(),
+               "🚗 Checking traffic...")
 
-        yield (
-            *agent_updates,
-            self.get_reasoning_html(),
-            trip_summary_html,
-            map_fig,
-            gr.update(visible=True),  # Show map tab
-            "✅ Trip planning complete!"
-        )
+        self.add_reasoning_message("traffic", "Using tool: check_traffic()", "tool")
+        time_module.sleep(0.8)
 
-    def create_trip_summary(self, route_data: Dict) -> str:
-        """Create trip summary report"""
-        stops = route_data.get('stops', [])
-
-        html = f"""
-<div style="background: var(--background-fill-secondary); border-radius: 12px; padding: 20px; margin: 15px 0;">
-    <h2 style="color: var(--body-text-color); margin-top: 0;">🎉 Trip Planning Complete</h2>
-
-    <div style="background: var(--color-accent-soft); border-radius: 8px; padding: 15px; margin: 15px 0;">
-        <h3 style="color: var(--body-text-color); margin-top: 0;">📊 Overview</h3>
-        <div style="color: var(--body-text-color); opacity: 0.9; line-height: 1.8;">
-            <p><strong>Total stops:</strong> {len(stops)}</p>
-            <p><strong>Total time:</strong> {sum(s.get('duration', 0) for s in stops)} minutes</p>
-            <p><strong>Start time:</strong> {stops[0]['arrival_time'] if stops else 'N/A'}</p>
-            <p><strong>Estimated completion:</strong> {stops[-1]['departure_time'] if stops else 'N/A'}</p>
-        </div>
-    </div>
+        self.add_reasoning_message("traffic", "✅ Good road conditions", "success")
 
-    <h3 style="color: var(--body-text-color);">📍 Detailed Itinerary</h3>
-"""
+        agent_updates = [
+            self.create_agent_card("planner", "completed", "✅ Complete"),
+            self.create_agent_card("scout", "completed", "✅ Complete"),
+            self.create_agent_card("optimizer", "completed", "✅ Complete"),
+            self.create_agent_card("validator", "completed", "✅ Complete"),
+            self.create_agent_card("weather", "completed", "✅ Complete"),
+            self.create_agent_card("traffic", "completed", "✅ Complete")
+        ]
 
-        priority_colors = {
-            'HIGH': '#ff4444',
-            'MEDIUM': '#FFA500',
-            'LOW': '#4A90E2'
+        result = {
+            'route': {
+                'stops': [
+                    {'name': 'NTU Hospital', 'address': 'No. 1, Changde St., Taipei', 'arrival_time': '09:00',
+                     'duration': '45',
+                     'rating': '4.8', 'phone': '02-2312-3456'},
+                    {'name': 'PX Mart', 'address': 'Roosevelt Rd. Sec. 3, Taipei', 'arrival_time': '10:15',
+                     'duration': '30', 'rating': '4.5', 'phone': '02-2362-7890'},
+                    {'name': 'Main Post Office', 'address': 'Zhongxiao W. Rd. Sec. 1, Taipei', 'arrival_time': '11:05',
+                     'duration': '20', 'rating': '4.3', 'phone': '02-2311-1234'}
+                ]
+            }
         }
 
-        for stop in stops:
-            color = priority_colors.get(stop.get('priority', 'MEDIUM'), '#4A90E2')
+        trip_result = self.create_trip_result_summary(result)
+        agent_text = self.create_agent_text_output(result)
+        map_fig = self.create_map(result)
 
-            html += f"""
-    <div style="background: var(--background-fill-primary); border-left: 4px solid {color}; 
-                border-radius: 8px; padding: 15px; margin: 10px 0;">
-        <div style="display: flex; justify-content: space-between; align-items: start;">
-            <div style="flex: 1;">
-                <div style="font-size: 1.3em; font-weight: bold; color: var(--body-text-color);">
-                    {stop['order']}. {stop['poi_name']}
-                </div>
-                <div style="color: var(--body-text-color); opacity: 0.8; margin-top: 5px;">
-                    {stop['description']}
-                </div>
-            </div>
-            <div style="text-align: right;">
-                <span style="background: {color}; color: white; padding: 4px 12px; 
-                            border-radius: 12px; font-size: 0.85em;">
-                    {stop.get('priority', 'MEDIUM')}
-                </span>
-            </div>
-        </div>
+        yield (
+            *agent_updates,
+            self.get_reasoning_html(),
+            trip_result,
+            agent_text,
+            map_fig,
+            gr.update(visible=True),
+            gr.update(visible=True),
+            "🎉 Planning complete!"
+        )
 
-        <div style="color: var(--body-text-color); opacity: 0.7; margin-top: 10px; 
-                    display: flex; gap: 15px; flex-wrap: wrap;">
-            <span>🕐 Arrival: {stop['arrival_time']}</span>
-            <span>🕐 Departure: {stop['departure_time']}</span>
-            <span>⏱️ Duration: {stop['duration']} min</span>
-        </div>
-    </div>
-"""
+    def modify_task_chat(self, message: str, history: List):
+        """Modify tasks via chat"""
+        if not message:
+            return history, self.create_task_list_ui(self.task_list)
 
-        html += """
-    <div style="background: var(--color-accent-soft); border-radius: 8px; padding: 15px; margin-top: 20px;">
-        <h3 style="color: var(--body-text-color); margin-top: 0;">✅ Validation Results</h3>
-        <div style="color: var(--body-text-color); opacity: 0.9; line-height: 1.8;">
-            <p>✓ All time windows satisfied</p>
-            <p>✓ Deadline met</p>
-            <p>✓ Priority tasks completed</p>
-            <p>✓ Route feasibility: 100%</p>
-        </div>
-    </div>
-</div>
-"""
+        history.append({"role": "user", "content": message})
+        history.append({"role": "assistant", "content": "Noted. I've recorded your request."})
+        return history, self.create_task_list_ui(self.task_list)
 
-        return html
-
-    def save_settings(self, google_key, weather_key, anthropic_key, model):
+    def save_settings(self, google_key: str, weather_key: str, anthropic_key: str, model: str):
         """Save settings"""
         self.settings['google_maps_api_key'] = google_key
         self.settings['openweather_api_key'] = weather_key
         self.settings['anthropic_api_key'] = anthropic_key
         self.settings['model'] = model
-        return "✅ Settings saved successfully"
+        return "✅ Settings saved"
 
     def build_interface(self):
-        """Build Gradio interface"""
+        """Build Gradio interface (compact layout)"""
         with gr.Blocks(
-                title="LifeFlow AI - Intelligent Trip Planning",
-                theme=gr.themes.Soft(),
+                theme=gr.themes.Soft(
+                    primary_hue="blue",
+                    secondary_hue="green",
+                    neutral_hue="slate",
+                    font=gr.themes.GoogleFont("Inter"),
+                    font_mono=gr.themes.GoogleFont("IBM Plex Mono")
+                ),
                 css="""
-        .breathing {
-            animation: breathing 2s ease-in-out infinite;
-        }
-        @keyframes breathing {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
-        }
-        .slide-in {
-            animation: slideIn 0.5s ease-out;
-        }
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        """
+                .breathing {
+                    animation: breathing 2s ease-in-out infinite;
+                }
+                @keyframes breathing {
+                    0%, 100% { opacity: 1; transform: scale(1); }
+                    50% { opacity: 0.9; transform: scale(1.02); }
+                }
+                .compact-container {
+                    max-width: 1400px;
+                    margin: 0 auto;
+                }
+                """,
+                title="LifeFlow AI - Intelligent Trip Planning"
         ) as demo:
-            # Title
-            gr.HTML("""
-            <div style="text-align: center; padding: 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-                        border-radius: 15px; margin-bottom: 20px;">
-                <h1 style="color: white; margin: 0; font-size: 2.5em;">🗺️ LifeFlow AI</h1>
-                <p style="color: white; opacity: 0.9; margin-top: 10px; font-size: 1.2em;">
-                    Intelligent Life Trip Planning System
-                </p>
-                <p style="color: white; opacity: 0.8; margin-top: 5px;">
-                    Multi-Agent Collaboration | TSPTW Optimization | Real-time Route Planning
-                </p>
-            </div>
+            gr.Markdown("""
+            # 🚀 LifeFlow AI - Intelligent Trip Planning System
+
+            **Multi-Agent AI System** for optimizing daily errands and activities
             """)
 
-            with gr.Row():
-                # ========== Left: Input and Team status ==========
-                with gr.Column(scale=2, min_width=400):
-                    # Input area (initially visible)
+            with gr.Row(elem_classes="compact-container"):
+                # Left: Input + Tasks + Agents + Results (narrower)
+                with gr.Column(scale=2, min_width=350):
+                    # Input area
                     with gr.Group(visible=True) as input_area:
-                        gr.Markdown("### 📝 Enter Your Requirements")
+                        gr.Markdown("### 📝 Describe Your Needs")
 
                         user_input = gr.Textbox(
-                            label="Trip Requirements",
-                            placeholder="E.g.: Tomorrow morning go to NTU Hospital, then go to PX Mart for shopping, need to go to post office to mail package before 3 PM",
-                            lines=4
+                            label="Requirements",
+                            placeholder="e.g., Visit hospital tomorrow morning, buy groceries, mail package before 3pm",
+                            lines=3
                         )
 
                         with gr.Row():
                             start_location = gr.Textbox(
-                                label="Starting Location",
-                                placeholder="E.g.: Daan District, Taipei",
+                                label="Start",
+                                placeholder="Taipei",
                                 scale=2
                             )
                             start_time = gr.Textbox(
-                                label="Start Time",
+                                label="Time",
                                 placeholder="08:30",
-                                value="08:30",
                                 scale=1
                             )
 
                         deadline = gr.Textbox(
-                            label="Deadline (Optional)",
-                            placeholder="15:00",
-                            value="15:00"
+                            label="Deadline (optional)",
+                            placeholder="e.g., 15:00"
                         )
 
-                        analyze_btn = gr.Button("🚀 Start Analysis", variant="primary", size="lg")
+                        analyze_btn = gr.Button("🚀 Start AI Analysis", variant="primary", size="lg")
 
-                    # Task confirmation area (initially hidden)
+                    # Task confirmation
                     with gr.Group(visible=False) as task_confirm_area:
                         gr.Markdown("### ✅ Confirm Tasks")
 
-                        task_list_display = gr.HTML()  # Task list
-                        task_summary_display = gr.HTML()  # Task summary
+                        task_list_display = gr.HTML()
+                        task_summary_display = gr.HTML()
 
                         with gr.Row():
-                            back_btn = gr.Button("← Return to Modify", variant="secondary")
-                            confirm_btn = gr.Button("✅ Confirm Planning", variant="primary")
+                            back_btn = gr.Button("⬅️ Back", variant="secondary", scale=1)
+                            confirm_btn = gr.Button("✅ Confirm & Plan", variant="primary", scale=2)
 
-                    # Team status area (initially hidden)
-                    with gr.Group(visible=False) as team_area:
-                        gr.Markdown("### 🤝 Team Collaboration Status")
+                    # Trip result summary
+                    with gr.Group(visible=False) as trip_result_area:
+                        trip_result_display = gr.HTML()
 
+                    # AI Team
+                    with gr.Group(visible=False) as team_area:
+                        gr.Markdown("### 🤖 AI Expert Team")
                         agent_displays = []
                         for agent_key in ['planner', 'scout', 'optimizer', 'validator', 'weather', 'traffic']:
-                            agent_card = gr.HTML(value=self.create_agent_card(agent_key, "idle", "Standby"))
+                            agent_card = gr.HTML(value=self.create_agent_card(agent_key, "idle", "On standby"))
                             agent_displays.append(agent_card)
 
-                        trip_summary_display = gr.HTML()  # Trip summary (user-facing)
-
-                # ========== Right: Status/Chat/Tabs ==========
-                with gr.Column(scale=5, min_width=600):
-                    # Status bar and chat combined area
+                # Right: Status + Chat + Tabs (wider)
+                with gr.Column(scale=3, min_width=500):
+                    # Status bar
                     with gr.Group():
                         status_bar = gr.Textbox(
-                            label="📊 Real-time Status",
+                            label="📊 Status",
                             value="Waiting for input...",
                             interactive=False,
                             max_lines=1
                         )
 
-                        # Chat modification area (only shown during task confirmation)
+                        # Chat modification
                         with gr.Group(visible=False) as chat_modify_area:
-                            gr.Markdown("### 💬 Chat with AI to Modify Tasks")
+                            gr.Markdown("### 💬 Modify Tasks")
 
                             chatbot = gr.Chatbot(
+                                type='messages',
                                 value=[],
-                                height=150,
+                                height=120,
                                 show_label=False
                             )
 
                             with gr.Row():
                                 chat_input = gr.Textbox(
-                                    placeholder="E.g.: Change task 2 to high priority",
+                                    placeholder="e.g., Change task 2 to high priority",
                                     show_label=False,
                                     scale=4
                                 )
                                 chat_send = gr.Button("Send", variant="primary", scale=1)
 
-                    # Tabs area
+                    # Tabs
                     with gr.Tabs() as tabs:
-                        # Tab 1: AI conversation log (default)
-                        with gr.Tab("💬 AI Conversation Log", id="chat_tab"):
-                            gr.Markdown("*Shows reasoning process of all AI Agents*")
+                        # Tab 1: AI Conversation
+                        with gr.Tab("💬 AI Conversation", id="chat_tab"):
                             reasoning_output = gr.HTML(
                                 value=self.get_reasoning_html()
                             )
 
-                        # Tab 2: Complete report (shown after planning completes)
-                        with gr.Tab("📊 Complete Report", id="summary_tab", visible=False) as summary_tab:
-                            gr.Markdown("*Detailed trip planning report*")
-                            complete_summary_output = gr.HTML()
+                        # Tab 2: Full Report
+                        with gr.Tab("📊 Full Report", id="summary_tab", visible=False) as summary_tab:
+                            gr.Markdown("*Team Agent complete analysis (plain text)*")
+                            complete_summary_output = gr.Textbox(
+                                show_label=False,
+                                lines=20,
+                                max_lines=25,
+                                interactive=False
+                            )
 
-                        # Tab 3: Route map (shown after planning completes)
+                        # Tab 3: Map
                         with gr.Tab("🗺️ Route Map", id="map_tab", visible=False) as map_tab:
-                            gr.Markdown("*Optimized route map*")
                             map_output = gr.Plot(value=self.create_map(), show_label=False)
 
                         # Tab 4: Settings
                         with gr.Tab("⚙️ Settings", id="settings_tab"):
-                            gr.Markdown("### 🔑 API Keys Configuration")
+                            gr.Markdown("### 🔑 API Keys")
 
                             google_maps_key = gr.Textbox(
                                 label="Google Maps API Key",
                                 placeholder="AIzaSy...",
-                                type="password",
-                                value=self.settings['google_maps_api_key']
+                                type="password"
                             )
 
                             openweather_key = gr.Textbox(
                                 label="OpenWeather API Key",
-                                placeholder="...",
-                                type="password",
-                                value=self.settings['openweather_api_key']
+                                type="password"
                             )
 
                             anthropic_key = gr.Textbox(
                                 label="Anthropic API Key",
                                 placeholder="sk-ant-...",
-                                type="password",
-                                value=self.settings['anthropic_api_key']
+                                type="password"
                             )
 
-                            gr.Markdown("### 🤖 Model Settings")
+                            gr.Markdown("### 🤖 Model")
 
                             model_choice = gr.Dropdown(
                                 label="Select Model",
@@ -848,23 +947,22 @@ class LifeFlowInteractive:
                                     "gpt-4o",
                                     "gemini-pro"
                                 ],
-                                value=self.settings['model']
+                                value="claude-sonnet-4-20250514"
                             )
 
-                            save_settings_btn = gr.Button("💾 Save Settings", variant="primary")
-                            settings_status = gr.Textbox(label="Status", value="", interactive=False, max_lines=1)
+                            save_settings_btn = gr.Button("💾 Save", variant="primary")
+                            settings_status = gr.Textbox(label="Status", value="", interactive=False)
 
             # Examples
             gr.Examples(
                 examples=[
-                    ["Tomorrow morning go to NTU Hospital for consultation, then go to PX Mart for shopping, need to go to post office to mail package before 3 PM", "Daan District, Taipei", "08:30", "15:00"]
+                    ["Visit hospital tomorrow morning, buy groceries, mail package before 3pm", "Taipei", "08:30",
+                     "15:00"]
                 ],
                 inputs=[user_input, start_location, start_time, deadline]
             )
 
-            # ========== Event binding ==========
-
-            # Start analysis
+            # Event bindings
             analyze_btn.click(
                 fn=self.step1_analyze_tasks,
                 inputs=[user_input],
@@ -883,7 +981,6 @@ class LifeFlowInteractive:
                 outputs=[input_area, task_confirm_area]
             )
 
-            # Return to modify
             back_btn.click(
                 fn=lambda: (
                     gr.update(visible=True),
@@ -894,7 +991,6 @@ class LifeFlowInteractive:
                 outputs=[input_area, task_confirm_area, chat_modify_area, status_bar]
             )
 
-            # Chat modification
             chat_send.click(
                 fn=self.modify_task_chat,
                 inputs=[chat_input, chatbot],
@@ -913,7 +1009,6 @@ class LifeFlowInteractive:
                 outputs=[chat_input]
             )
 
-            # Confirm planning
             confirm_btn.click(
                 fn=lambda: (
                     gr.update(visible=False),
@@ -926,6 +1021,11 @@ class LifeFlowInteractive:
                 outputs=[
                     *agent_displays,
                     reasoning_output,
+                    trip_result_display,
+                    complete_summary_output,
+                    map_output,
+                    map_tab,
+                    summary_tab,
                     status_bar
                 ]
             ).then(
@@ -933,23 +1033,21 @@ class LifeFlowInteractive:
                 outputs=[
                     *agent_displays,
                     reasoning_output,
-                    trip_summary_display,
+                    trip_result_display,
+                    complete_summary_output,
                     map_output,
                     map_tab,
+                    summary_tab,
                     status_bar
                 ]
             ).then(
-                # After planning completes, automatically switch to Complete Report Tab and display
-                fn=lambda trip_summary: (
-                    trip_summary,  # Complete report content
-                    gr.update(visible=True),  # Show complete report tab
-                    gr.update(selected="summary_tab")  # Automatically switch to complete report tab
+                fn=lambda: (
+                    gr.update(visible=True),
+                    gr.update(selected="summary_tab")
                 ),
-                inputs=[trip_summary_display],
-                outputs=[complete_summary_output, summary_tab, tabs]
+                outputs=[trip_result_area, tabs]
             )
 
-            # Save settings
             save_settings_btn.click(
                 fn=self.save_settings,
                 inputs=[google_maps_key, openweather_key, anthropic_key, model_choice],
@@ -964,11 +1062,11 @@ def main():
     demo = app.build_interface()
     demo.launch(
         server_name="0.0.0.0",
-        server_port=7860,  # 7860
-        share=True,
+        server_port=7860,  # HuggingFace default 7860
+        share=False,
         show_error=True
     )
 
 
 if __name__ == "__main__":
-    main()
+    main()