Initial deployment

IMPLEMENTATION_SUMMARY.md

@@ -0,0 +1,82 @@
+# Email Rule Agent - Architecture Fix Implementation Summary
+
+## Overview
+Successfully fixed the Email Rule Agent architecture to properly use MCP (Model Context Protocol) backend instead of local state management, and added toast notifications and rule archive/reactivate features.
+
+## Key Changes Made
+
+### 1. Fixed Data Loading (Phase 1)
+- **Updated `initialize_app()`** to fetch data from MCP backend instead of loading local JSON files
+- **Removed local data loading functions**: `load_email_data()` and `load_rules_from_json()`
+- **Removed file path constants**: DATA_PATH, PREVIEW_DATA_PATH, RULES_DATA_PATH
+
+### 2. Cleaned Up State Management (Phase 2)
+- **Removed duplicate local-only functions**: `accept_rule()`, `reject_rule()`, `archive_rule()`, `reactivate_rule()`, `preview_rule()`, `preview_rule_with_mcp()`
+- **Renamed MCP functions** for clarity:
+  - `accept_rule_with_mcp` → `handle_accept_rule`
+  - `run_rule_with_mcp` → `handle_run_rule`
+  - Kept `handle_preview_rule` as is
+- **Simplified all handlers** by removing fallback logic
+
+### 3. Implemented Archive/Reactivate (Phase 3)
+- **Added backend endpoint** `/rules/{rule_id}` with PATCH method in `modal_server.py`
+- **Added storage methods** in `storage.py`:
+  - `update_user_rule()` - Updates rule properties
+  - `get_user_rule()` - Gets a specific rule
+- **Added MCP client methods**:
+  - `update_rule_status()` - Updates rule status
+  - `archive_rule()` - Sets status to 'rejected'
+  - `reactivate_rule()` - Sets status to 'pending'
+- **Implemented UI handlers**: `handle_archive_rule()` and `handle_reactivate_rule()`
+
+### 4. Added Toast Notifications (Phase 4)
+- **Integrated Toastify.js** for modern toast notifications
+- **Added status observer** in JavaScript to watch for status_msg changes
+- **Color-coded toasts** based on message type (success, error, warning, info)
+- All user actions now show toast notifications instead of hidden status messages
+
+### 5. Enhanced Mock Provider (Phase 5)
+- **Made mock provider session-aware** with `_mock_sessions` storage
+- **Added support for rule status updates** via PATCH method
+- **Session isolation** - each user gets their own data
+- **Fixed endpoint matching** for proper request routing
+
+## Architecture Benefits
+
+### Before
+- UI loaded data from local JSON files
+- State changes only in memory
+- No persistence
+- All users saw same data
+- Hidden status messages
+
+### After
+- All data flows through MCP backend
+- Proper client-server architecture
+- Session-based persistence
+- User isolation
+- Toast notifications for all actions
+- Single source of truth (backend)
+
+## Testing
+Created and ran comprehensive tests to verify:
+- ✅ All imports work correctly
+- ✅ MCP client functions in local mode
+- ✅ App can be created successfully
+- ✅ Session isolation works
+- ✅ Rule CRUD operations work
+- ✅ Archive/reactivate functionality works
+
+## Files Modified
+1. `components/ui.py` - Major refactor for MCP integration
+2. `components/ui_utils.py` - Removed local data loading
+3. `components/mcp_client.py` - Added new methods and session support
+4. `modal-backend/modal_server.py` - Added rule update endpoint
+5. `modal-backend/storage.py` - Added update methods
+
+## Next Steps
+The app is now ready for deployment with proper architecture:
+- Deploy Modal backend with `modal deploy modal-backend/modal_server.py`
+- Deploy HF Spaces frontend
+- Configure environment variables for Modal URL
+- Test with real Gmail integration

README.md

@@ -0,0 +1,167 @@
+---
+title: Email Rule Agent - AI-Powered Email Organization Assistant
+emoji: 📧
+colorFrom: blue
+colorTo: purple
+sdk: gradio
+sdk_version: 4.44.0
+app_file: app.py
+pinned: false
+tags:
+  - agent-demo-track
+  - gradio
+  - ai-agents
+  - mcp
+  - email-management
+license: mit
+---
+
+# 🤖 Email Rule Agent - AI-Powered Email Organization Assistant
+
+> **Track 3: Agentic Demo Showcase** submission for the Gradio Agents & MCP Hackathon 2025
+
+## 🎥 Demo Video
+[Watch the demo video here](https://your-video-link.com) <!-- TODO: Add your demo video link -->
+
+## 🌟 Overview
+
+Email Rule Agent is an intelligent email management assistant that uses AI agents to help users organize their inbox through natural language commands. Simply describe what you want in plain English, and the AI agent will create smart rules to automatically organize your emails.
+
+**Key Innovation**: Combines conversational AI with the Model Context Protocol (MCP) to provide a seamless, intelligent email management experience that learns from your preferences and adapts to your workflow.
+
+## ✨ Key Features
+
+### 🧠 AI-Powered Natural Language Understanding
+- **Conversational Rule Creation**: Just say "Move all Uber receipts to my travel folder" or "Archive old newsletters"
+- **Context-Aware Processing**: Understands references like "those emails" or "emails from last week"
+- **Smart Pattern Recognition**: Analyzes your inbox to suggest organization rules
+
+### 📋 Intelligent Rule Management
+- **Preview Before Apply**: See exactly which emails will be affected before confirming
+- **Confidence Scoring**: Each rule comes with a confidence level
+- **Rule Lifecycle**: Accept, reject, archive, or reactivate rules as needed
+- **Batch Operations**: Apply rules to multiple emails at once
+
+### 🔄 Real-Time MCP Integration
+- **Client-Server Architecture**: Uses MCP protocol for robust data management
+- **Session Isolation**: Each user gets their own workspace
+- **Persistent Storage**: Rules and preferences are saved
+- **Mock & Real Data**: Demo mode with sample emails or connect your Gmail
+
+### 🎨 Modern User Experience
+- **Three-Column Layout**: Chat interface, rule management, and email preview
+- **Real-Time Updates**: Toast notifications for all actions
+- **Streaming Responses**: See AI thinking in real-time
+- **Interactive Demo**: Built-in checklist guides new users
+
+## 🚀 Try It Out
+
+1. **Start with the Demo**: Click "Analyze my inbox" to see pattern detection in action
+2. **Create Natural Language Rules**: Try commands like:
+   - "Archive all marketing emails older than 30 days"
+   - "Move receipts to my expenses folder"
+   - "Label all work emails as important"
+3. **Preview and Apply**: Review which emails match before applying rules
+4. **Manage Your Rules**: Accept, reject, or modify rules as needed
+
+## 🏗️ Architecture
+
+```
+┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
+│                 │     │                  │     │                 │
+│  Gradio UI      │────▶│  MCP Client      │────▶│  Modal Backend  │
+│  (Frontend)     │     │  (Protocol)      │     │  (MCP Server)   │
+│                 │     │                  │     │                 │
+└─────────────────┘     └──────────────────┘     └─────────────────┘
+        │                                                  │
+        │                                                  │
+        ▼                                                  ▼
+┌─────────────────┐                              ┌─────────────────┐
+│  AI Agent       │                              │  Email Provider │
+│  (CrewAI +      │                              │  (Gmail/Mock)   │
+│   OpenRouter)   │                              │                 │
+└─────────────────┘                              └─────────────────┘
+```
+
+### MCP Integration
+- **MCP Client**: Handles all communication with the backend server
+- **Standardized Endpoints**: `/emails`, `/rules`, `/auth` following MCP conventions
+- **Session Management**: Automatic session handling for multi-user support
+- **Error Handling**: Graceful fallbacks and user-friendly error messages
+
+## 🛠️ Technical Stack
+
+- **Frontend**: Gradio 4.0+ with custom components
+- **AI Agent**: CrewAI with OpenRouter (supports multiple LLMs)
+- **Backend**: Modal serverless platform
+- **Protocol**: Model Context Protocol (MCP)
+- **Languages**: Python 3.10+
+- **Key Libraries**: pandas, httpx, python-dotenv
+
+## 📦 Installation & Setup
+
+### Option 1: Use This Space
+Simply use this Hugging Face Space - it's already configured and ready to go!
+
+### Option 2: Local Development
+```bash
+# Clone the repository
+git clone https://huggingface.co/spaces/YOUR_USERNAME/email-rule-agent
+cd email-rule-agent
+
+# Install dependencies
+pip install -r requirements.txt
+
+# Set environment variables
+export OPENROUTER_API_KEY="your-api-key"
+export MODAL_BACKEND_URL="your-modal-url"  # or use --local flag
+
+# Run the app
+python app.py --local  # For local/mock mode
+python app.py         # For production mode
+```
+
+### Required Secrets (for HF Spaces)
+- `OPENROUTER_API_KEY`: Your OpenRouter API key for AI capabilities
+- `MODAL_BACKEND_URL`: Your Modal backend URL (optional, uses mock data if not set)
+
+## 📸 Screenshots
+
+### Main Interface
+The three-column layout provides an intuitive workflow:
+- **Left**: Chat with the AI agent
+- **Center**: Manage your rules
+- **Right**: Preview affected emails
+
+### Natural Language Processing
+Simply describe what you want in plain English, and the AI understands your intent.
+
+### Rule Preview
+See exactly which emails will be affected before applying any rule.
+
+## 🏆 Why This Matters
+
+Email overload is a universal problem. This project demonstrates how AI agents can:
+- **Understand Intent**: No need to learn complex filter syntax
+- **Learn Patterns**: Automatically identify email categories
+- **Save Time**: Automate repetitive organization tasks
+- **Stay in Control**: Preview and approve all actions
+
+## 🔮 Future Enhancements
+
+- **Multi-Provider Support**: Outlook, Yahoo Mail integration
+- **Advanced Actions**: Smart replies, calendar integration
+- **Team Features**: Shared rules and collaborative filtering
+- **Mobile App**: Native mobile experience
+
+## 👥 Team
+
+Created with ❤️ for the Gradio Agents & MCP Hackathon 2025
+
+## 📄 License
+
+MIT License - feel free to use and extend!
+
+---
+
+**Note**: This is a hackathon project demonstrating the potential of AI agents and MCP. For production use, ensure proper security measures and API rate limiting.

app.py

@@ -0,0 +1,40 @@
+"""
+Email Rule Agent - HuggingFace Spaces App
+Main entry point for the Gradio interface
+"""
+
+import os
+import sys
+import argparse
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+# Add components to path
+sys.path.append(os.path.dirname(__file__))
+
+from components.ui import create_app, launch_app
+
+def main():
+    # Simple setup - prioritize HF Spaces deployment
+    modal_url = os.getenv('MODAL_BACKEND_URL', 'local://mock')
+    
+    if not os.getenv('OPENROUTER_API_KEY'):
+        print("⚠️  Warning: OPENROUTER_API_KEY not set")
+        print("The AI agent features will not work properly.")
+    
+    # Create and launch the app
+    demo = create_app(modal_url)
+    
+    # Check if running on HF Spaces
+    is_hf_spaces = os.getenv('SPACE_ID') is not None
+    
+    # Launch with appropriate settings
+    demo.launch(
+        server_name="0.0.0.0" if is_hf_spaces else None,
+        server_port=7860 if is_hf_spaces else None
+    )
+
+if __name__ == "__main__":
+    main()

archive/ui_old/__init__.py

@@ -0,0 +1,8 @@
+"""
+UI components package - temporary redirect during reorganization
+"""
+
+# Import from the new location in components/
+from ..ui import create_app, launch_app
+
+__all__ = ['create_app', 'launch_app']

archive/ui_old/archive/ui_chat.py

@@ -0,0 +1,165 @@
+"""
+Enhanced chat handling with tool visibility and proper streaming
+"""
+
+import time
+import json
+from typing import List, Dict, Any, Tuple
+from datetime import datetime
+import os
+
+
+def format_tool_message(tool_name: str, details: str = "", status: str = "running") -> str:
+    """Format a tool call as HTML content"""
+    icons = {
+        "analyzing_emails": "📊",
+        "extracting_patterns": "🔍",
+        "creating_rules": "📋",
+        "thinking": "🤔"
+    }
+    
+    # Create a styled div that looks like a tool call
+    tool_content = f"""
+<div style="background: #e3f2fd; border: 1px solid #1976d2; border-radius: 8px; padding: 12px; margin: 8px 0;">
+    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+        <span style="font-size: 20px;">{icons.get(tool_name, '🔧')}</span>
+        <span style="font-weight: 600; color: #1976d2;">{tool_name.replace('_', ' ').title()}</span>
+        <span style="margin-left: auto; color: #666; font-size: 12px;">
+            {'⏳ Running...' if status == 'running' else '✓ Complete'}
+        </span>
+    </div>
+    <div style="background: white; border-radius: 4px; padding: 8px; font-family: monospace; font-size: 12px; white-space: pre-wrap;">
+{details or 'Processing...'}
+    </div>
+</div>"""
+    
+    return tool_content
+
+
+def process_chat_with_tools(
+    user_message: str,
+    chat_history: List[Dict[str, str]],
+    mcp_client: Any,
+    current_emails: List[Dict[str, Any]],
+    pending_rules: List[Dict[str, Any]],
+    applied_rules: List[Dict[str, Any]],
+    rule_counter: int
+) -> Tuple:
+    """Process chat messages with tool visibility"""
+    
+    from .simple_agent import process_chat_message as process_agent_message
+    from .ui_utils import create_interactive_rule_cards
+    
+    if not user_message.strip():
+        return (chat_history, "", create_interactive_rule_cards(pending_rules),
+                "Ready...", pending_rules, rule_counter)
+    
+    # Check if API key is available
+    if not os.getenv('OPENROUTER_API_KEY'):
+        chat_history.append({"role": "user", "content": user_message})
+        error_msg = "⚠️ OpenRouter API key not configured. Please set OPENROUTER_API_KEY in HuggingFace Spaces secrets to enable AI features."
+        chat_history.append({"role": "assistant", "content": error_msg})
+        return (chat_history, "", create_interactive_rule_cards(pending_rules),
+                "API key missing", pending_rules, rule_counter)
+    
+    try:
+        # Add user message
+        chat_history.append({"role": "user", "content": user_message})
+        
+        # Check if we should analyze emails
+        analyze_keywords = ['analyze', 'suggest', 'organize', 'rules', 'help me organize',
+                           'create rules', 'inbox', 'patterns']
+        should_analyze = any(keyword in user_message.lower() for keyword in analyze_keywords)
+        
+        if should_analyze and current_emails:
+            # Add tool message for email analysis
+            analysis_details = f"""Analyzing {len(current_emails)} emails...
+
+Looking for patterns in:
+• Sender domains and addresses
+• Subject line keywords
+• Email frequency by sender
+• Common phrases and topics
+• Time patterns
+
+Email categories found:
+• Newsletters: {len([e for e in current_emails if 'newsletter' in e.get('from_email', '').lower()])}
+• Work emails: {len([e for e in current_emails if any(domain in e.get('from_email', '') for domain in ['company.com', 'work.com'])])}
+• Personal: {len([e for e in current_emails if not any(keyword in e.get('from_email', '').lower() for keyword in ['newsletter', 'promo', 'noreply'])])}
+"""
+            # Create a combined message with tool output
+            tool_html = format_tool_message("analyzing_emails", analysis_details, "complete")
+            # Add as assistant message with special formatting
+            chat_history.append({
+                "role": "assistant",
+                "content": tool_html
+            })
+        
+        # Get current rule state
+        rule_state = {
+            'proposedRules': [r for r in pending_rules if r['status'] == 'pending'],
+            'activeRules': applied_rules,
+            'rejectedRules': [r for r in pending_rules if r['status'] == 'rejected']
+        }
+        
+        # Call the agent
+        response_data = process_agent_message(
+            user_message=user_message,
+            emails=current_emails,
+            conversation_history=chat_history[:-2] if should_analyze else chat_history[:-1],  # Exclude tool message
+            rule_state=rule_state
+        )
+        
+        # Extract response and rules
+        response_text = response_data.get('response', '')
+        extracted_rules = response_data.get('rules', [])
+        
+        # If rules were extracted, add a tool message
+        if extracted_rules:
+            rules_details = f"""Created {len(extracted_rules)} rules:
+
+"""
+            for rule in extracted_rules:
+                rules_details += f"📋 {rule['name']}\n"
+                rules_details += f"   {rule['description']}\n"
+                rules_details += f"   Confidence: {rule.get('confidence', 0.8)*100:.0f}%\n\n"
+            
+            tool_html = format_tool_message("creating_rules", rules_details, "complete")
+        
+        # Update rules
+        updated_pending_rules = pending_rules.copy()
+        for rule in extracted_rules:
+            if not any(r.get('rule_id') == rule.get('rule_id') for r in updated_pending_rules):
+                rule['status'] = 'pending'
+                rule['id'] = rule.get('rule_id', f'rule_{rule_counter}')
+                updated_pending_rules.append(rule)
+                rule_counter += 1
+        
+        # Add assistant response (clean it of hidden JSON)
+        clean_response = response_text
+        if "<!-- RULES_JSON_START" in clean_response:
+            clean_response = clean_response.split("<!-- RULES_JSON_START")[0].strip()
+        
+        # If we have tool output, prepend it to the response
+        if extracted_rules and 'tool_html' in locals():
+            combined_content = tool_html + "\n\n" + clean_response
+            chat_history.append({"role": "assistant", "content": combined_content})
+        else:
+            chat_history.append({"role": "assistant", "content": clean_response})
+        
+        # Status message
+        if extracted_rules:
+            status = f"✅ Found {len(extracted_rules)} new rules"
+        else:
+            status = "Processing complete"
+        
+        return (chat_history, "", create_interactive_rule_cards(updated_pending_rules),
+                status, updated_pending_rules, rule_counter)
+        
+    except Exception as e:
+        error_msg = f"I encountered an error: {str(e)}. Please try again."
+        chat_history.append({"role": "assistant", "content": error_msg})
+        return (chat_history, "", create_interactive_rule_cards(pending_rules),
+                f"Error: {str(e)}", pending_rules, rule_counter)
+
+

archive/ui_old/archive/ui_fixed.py

@@ -0,0 +1,974 @@
+"""
+UI Components for Email Rule Agent - FIXED VERSION
+Native Gradio implementation with proper event handling for @gr.render
+"""
+
+import gradio as gr
+import os
+import json
+import logging
+from datetime import datetime
+from typing import List, Dict, Any, Tuple
+
+# Set up logging
+logging.basicConfig(level=logging.DEBUG, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+# Import UI utility functions
+from .ui_utils import (
+    load_email_data,
+    get_folder_counts,
+    get_folder_dropdown_choices,
+    extract_folder_name,
+    format_date,
+    sort_emails,
+    create_email_html,
+    filter_emails,
+    create_preview_banner,
+    create_interactive_rule_cards
+)
+
+# Data paths
+DATA_PATH = "./data/emails.json"
+PREVIEW_DATA_PATH = "./data/preview_emails.json"
+RULES_DATA_PATH = "./data/rules.json"
+
+# Import agent
+from .simple_agent import process_chat_message as process_agent_message, extract_rules_from_output
+
+# Import MCP client  
+from .mcp_client import MCPClient
+
+# Import session manager
+from .session_manager import session_manager
+
+
+def create_rule_event_handler(action: str, mcp_client: MCPClient):
+    """Create a generic event handler for rule actions that works with @gr.render"""
+    
+    def handler(evt: gr.EventData, *args):
+        """Generic handler that extracts rule_id from the event data"""
+        # Extract rule_id from the component that triggered the event
+        try:
+            # Get the button element that was clicked
+            button_elem = evt.target
+            logger.debug(f"Event triggered by: {button_elem}")
+            
+            # The rule_id should be embedded in the button's key or elem_id
+            if hasattr(button_elem, 'key') and button_elem.key:
+                # Extract rule_id from key like "rule_123_preview"
+                parts = button_elem.key.split('_')
+                if len(parts) >= 3:  # rule_ID_action
+                    rule_id = f"{parts[0]}_{parts[1]}"
+                else:
+                    rule_id = None
+            else:
+                rule_id = None
+                
+            logger.info(f"Extracted rule_id: {rule_id} for action: {action}")
+            
+            if not rule_id:
+                logger.error("Could not extract rule_id from event")
+                return handle_error(action, args)
+            
+            # Call the appropriate handler based on action
+            if action == 'preview':
+                return handle_preview(rule_id, mcp_client, *args)
+            elif action == 'accept':
+                return handle_accept(rule_id, mcp_client, *args)
+            elif action == 'reject':
+                return handle_reject(rule_id, *args)
+            elif action == 'cancel':
+                return handle_cancel(rule_id, *args)
+            else:
+                return handle_error(action, args)
+                
+        except Exception as e:
+            logger.error(f"Error in event handler for {action}: {e}")
+            return handle_error(action, args)
+    
+    return handler
+
+
+def handle_preview(rule_id: str, mcp_client: MCPClient, sort_option, search_query, 
+                  user_emails_state, preview_emails_state, pending_rules_state):
+    """Handle rule preview action"""
+    logger.info(f"Preview handler called for rule: {rule_id}")
+    
+    # Find the rule
+    rule = next((r for r in pending_rules_state if r["id"] == rule_id), None)
+    if not rule:
+        logger.error(f"Rule not found: {rule_id}")
+        return (gr.update(), gr.update(), pending_rules_state,
+                create_preview_banner(get_preview_rules_count(pending_rules_state)), 
+                f"❌ Rule not found: {rule_id}",
+                user_emails_state, preview_emails_state)
+    
+    # Update rule status
+    updated_rules = pending_rules_state.copy()
+    for r in updated_rules:
+        if r["id"] == rule_id:
+            r["status"] = "preview"
+            break
+    
+    # Try MCP preview
+    try:
+        # Convert rule to MCP format
+        mcp_rule = {
+            "rule_id": rule_id,
+            "name": rule["name"],
+            "conditions": [],
+            "actions": []
+        }
+        
+        # Parse conditions
+        for condition in rule.get("conditions", []):
+            if isinstance(condition, dict):
+                mcp_rule["conditions"].append(condition)
+            elif isinstance(condition, str):
+                parts = condition.split()
+                if len(parts) >= 3:
+                    mcp_rule["conditions"].append({
+                        "field": parts[0],
+                        "operator": parts[1],
+                        "value": " ".join(parts[2:]).strip("'")
+                    })
+        
+        # Parse actions
+        for action in rule.get("actions", []):
+            if isinstance(action, dict):
+                mcp_rule["actions"].append(action)
+            elif isinstance(action, str):
+                if "move" in action.lower():
+                    folder = action.split("'")[-2] if "'" in action else "inbox"
+                    mcp_rule["actions"].append({
+                        "type": "move",
+                        "parameters": {"folder": folder}
+                    })
+        
+        # Call MCP preview
+        preview_response = mcp_client.preview_rule(mcp_rule)
+        
+        if preview_response.get('success', False):
+            # Update preview emails with the result
+            new_preview_emails = preview_response.get('affected_emails', preview_emails_state)
+            
+            new_folder_choices = get_folder_dropdown_choices(new_preview_emails)
+            new_folder_value = new_folder_choices[0] if new_folder_choices else "Inbox (0)"
+            filtered_emails = filter_emails(new_folder_value, search_query, sort_option, new_preview_emails)
+            new_email_display = create_email_html(filtered_emails, new_folder_value)
+            
+            stats = preview_response.get('statistics', {})
+            status_msg = f"👁️ Preview: {stats.get('matched_count', 0)} emails would be affected"
+            
+            return (gr.update(choices=new_folder_choices, value=new_folder_value), 
+                    new_email_display, 
+                    updated_rules,
+                    create_preview_banner(get_preview_rules_count(updated_rules)), 
+                    status_msg,
+                    new_preview_emails,
+                    new_preview_emails)
+        else:
+            # Fallback - just update status
+            return (gr.update(), gr.update(), updated_rules,
+                    create_preview_banner(get_preview_rules_count(updated_rules)), 
+                    f"👁️ Previewing rule: {rule['name']}",
+                    user_emails_state, preview_emails_state)
+            
+    except Exception as e:
+        logger.error(f"Error in preview: {e}")
+        return (gr.update(), gr.update(), updated_rules,
+                create_preview_banner(get_preview_rules_count(updated_rules)), 
+                f"❌ Error: {str(e)}",
+                user_emails_state, preview_emails_state)
+
+
+def handle_accept(rule_id: str, mcp_client: MCPClient, current_folder, sort_option, search_query,
+                 user_emails_state, preview_emails_state, pending_rules_state, applied_rules_state):
+    """Handle rule acceptance action"""
+    logger.info(f"Accept handler called for rule: {rule_id}")
+    
+    # Find the rule
+    rule = next((r for r in pending_rules_state if r["id"] == rule_id), None)
+    if not rule:
+        logger.error(f"Rule not found: {rule_id}")
+        filtered_emails = filter_emails(current_folder, search_query, sort_option, user_emails_state)
+        return (pending_rules_state,
+                create_preview_banner(get_preview_rules_count(pending_rules_state)), 
+                f"❌ Rule not found: {rule_id}",
+                create_email_html(filtered_emails, current_folder),
+                gr.update(),
+                user_emails_state,
+                preview_emails_state,
+                applied_rules_state)
+    
+    # Try MCP apply
+    try:
+        # Convert rule to MCP format (same as preview)
+        mcp_rule = {
+            "rule_id": rule_id,
+            "name": rule["name"],
+            "conditions": [],
+            "actions": []
+        }
+        
+        # Parse conditions and actions (same as preview)
+        for condition in rule.get("conditions", []):
+            if isinstance(condition, dict):
+                mcp_rule["conditions"].append(condition)
+            elif isinstance(condition, str):
+                parts = condition.split()
+                if len(parts) >= 3:
+                    mcp_rule["conditions"].append({
+                        "field": parts[0],
+                        "operator": parts[1],
+                        "value": " ".join(parts[2:]).strip("'")
+                    })
+        
+        for action in rule.get("actions", []):
+            if isinstance(action, dict):
+                mcp_rule["actions"].append(action)
+            elif isinstance(action, str):
+                if "move" in action.lower():
+                    folder = action.split("'")[-2] if "'" in action else "inbox"
+                    mcp_rule["actions"].append({
+                        "type": "move",
+                        "parameters": {"folder": folder}
+                    })
+        
+        # Call MCP apply
+        apply_response = mcp_client.apply_rule(mcp_rule)
+        
+        if apply_response.get('success', False):
+            rule["status"] = "accepted"
+            
+            # Update emails if provided
+            new_emails = user_emails_state
+            if 'updated_emails' in apply_response:
+                new_emails = apply_response['updated_emails']
+            
+            # Update rules lists
+            updated_pending = [r for r in pending_rules_state if r["id"] != rule_id]
+            updated_applied = applied_rules_state + [rule.copy()]
+            
+            # Exit preview mode if we were in it
+            for r in updated_pending:
+                if r.get("status") == "preview":
+                    r["status"] = "pending"
+            
+            stats = apply_response.get('statistics', {})
+            status_msg = f"✅ Rule applied: {stats.get('processed_count', 0)} emails processed"
+            
+            # Update email display with new data
+            new_folder_choices = get_folder_dropdown_choices(new_emails)
+            filtered_emails = filter_emails(current_folder, search_query, sort_option, new_emails)
+            
+            return (updated_pending,
+                    create_preview_banner(get_preview_rules_count(updated_pending)), 
+                    status_msg,
+                    create_email_html(filtered_emails, current_folder),
+                    gr.update(choices=new_folder_choices),
+                    new_emails,
+                    new_emails,
+                    updated_applied)
+        else:
+            # Fallback - just update status locally
+            rule["status"] = "accepted"
+            updated_pending = [r for r in pending_rules_state if r["id"] != rule_id]
+            updated_applied = applied_rules_state + [rule.copy()]
+            
+            filtered_emails = filter_emails(current_folder, search_query, sort_option, user_emails_state)
+            return (updated_pending,
+                    create_preview_banner(get_preview_rules_count(updated_pending)), 
+                    f"✅ Rule accepted: {rule['name']}",
+                    create_email_html(filtered_emails, current_folder),
+                    gr.update(),
+                    user_emails_state,
+                    preview_emails_state,
+                    updated_applied)
+            
+    except Exception as e:
+        logger.error(f"Error in accept: {e}")
+        filtered_emails = filter_emails(current_folder, search_query, sort_option, user_emails_state)
+        return (pending_rules_state,
+                create_preview_banner(get_preview_rules_count(pending_rules_state)), 
+                f"❌ Error: {str(e)}",
+                create_email_html(filtered_emails, current_folder),
+                gr.update(),
+                user_emails_state,
+                preview_emails_state,
+                applied_rules_state)
+
+
+def handle_reject(rule_id: str, pending_rules_state):
+    """Handle rule rejection action"""
+    logger.info(f"Reject handler called for rule: {rule_id}")
+    
+    updated_rules = pending_rules_state.copy()
+    for rule in updated_rules:
+        if rule["id"] == rule_id:
+            rule["status"] = "rejected"
+            logger.info(f"Rule rejected: {rule['name']} (ID: {rule_id})")
+            return (updated_rules,
+                    create_preview_banner(get_preview_rules_count(updated_rules)), 
+                    f"❌ Rule rejected: {rule['name']}")
+    
+    return (pending_rules_state,
+            create_preview_banner(get_preview_rules_count(pending_rules_state)), 
+            f"❌ Rule not found: {rule_id}")
+
+
+def handle_cancel(rule_id: str, sort_option, search_query, user_emails_state, pending_rules_state):
+    """Handle cancel preview action"""
+    logger.info(f"Cancel handler called for rule: {rule_id}")
+    
+    updated_rules = pending_rules_state.copy()
+    for rule in updated_rules:
+        if rule.get("status") == "preview":
+            rule["status"] = "pending"
+    
+    new_folder_choices = get_folder_dropdown_choices(user_emails_state)
+    new_folder_value = new_folder_choices[0] if new_folder_choices else "Inbox (0)"
+    filtered_emails = filter_emails(new_folder_value, search_query, sort_option, user_emails_state)
+    new_email_display = create_email_html(filtered_emails, new_folder_value)
+    
+    return (gr.update(choices=new_folder_choices, value=new_folder_value), 
+            new_email_display, 
+            updated_rules,
+            create_preview_banner(get_preview_rules_count(updated_rules)), 
+            "🔄 Exited preview mode",
+            user_emails_state)
+
+
+def handle_error(action: str, args):
+    """Handle errors in event handlers"""
+    logger.error(f"Error handling {action} - could not determine rule_id")
+    # Return appropriate number of outputs based on action
+    if action == 'preview':
+        return (gr.update(), gr.update(), args[4],  # pending_rules
+                create_preview_banner(0), 
+                "❌ Error: Could not process action",
+                args[2], args[3])  # user_emails, preview_emails
+    elif action == 'accept':
+        return (args[5],  # pending_rules
+                create_preview_banner(0), 
+                "❌ Error: Could not process action",
+                gr.update(), gr.update(),
+                args[3], args[4], args[6])  # emails states and applied_rules
+    elif action == 'reject':
+        return (args[0],  # pending_rules
+                create_preview_banner(0), 
+                "❌ Error: Could not process action")
+    else:
+        return (gr.update(), gr.update(), args[3],  # pending_rules
+                create_preview_banner(0), 
+                "❌ Error: Could not process action",
+                args[2])  # user_emails
+
+
+def get_preview_rules_count(rules_list=None):
+    """Get the number of rules currently in preview status"""
+    if rules_list is None:
+        return 0
+    return len([rule for rule in rules_list if rule.get("status") == "preview"])
+
+
+# Add other helper functions from original ui.py
+def format_conditions(conditions: List) -> str:
+    """Format conditions for display"""
+    if not conditions:
+        return "• No conditions specified"
+    
+    formatted = []
+    for condition in conditions:
+        if isinstance(condition, dict):
+            field = condition.get('field', 'field')
+            operator = condition.get('operator', 'contains')
+            value = condition.get('value', '')
+            formatted.append(f"• {field} {operator} '{value}'")
+        else:
+            formatted.append(f"• {condition}")
+    
+    return "\n".join(formatted)
+
+
+def format_actions(actions: List) -> str:
+    """Format actions for display"""
+    if not actions:
+        return "• No actions specified"
+    
+    formatted = []
+    for action in actions:
+        if isinstance(action, dict):
+            action_type = action.get('type', 'action')
+            if action_type == 'move':
+                folder = action.get('parameters', {}).get('folder', 'folder')
+                formatted.append(f"• Move to '{folder}'")
+            elif action_type == 'label':
+                label = action.get('parameters', {}).get('label', 'label')
+                formatted.append(f"• Add label '{label}'")
+            else:
+                formatted.append(f"• {action_type}")
+        else:
+            formatted.append(f"• {action}")
+    
+    return "\n".join(formatted)
+
+
+# CSS for native components
+NATIVE_CSS = """
+.rule-card {
+    margin-bottom: 12px;
+    padding: 16px;
+    border-radius: 8px;
+    border: 1px solid #e1e5e9;
+    background: white;
+    transition: all 0.2s ease;
+}
+
+.rule-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.rule-preview {
+    background: #fff3cd;
+    border-color: #fd7e14;
+}
+
+.rule-accepted {
+    background: #d4edda;
+    border-color: #c3e6cb;
+}
+
+.rule-description {
+    color: #6c757d;
+    font-size: 14px;
+}
+
+.rule-conditions, .rule-actions {
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+.status-pending {
+    color: #6c757d;
+}
+
+.status-preview {
+    color: #fd7e14;
+}
+
+.status-accepted {
+    color: #28a745;
+}
+
+#rule-cards-container {
+    max-height: 500px;
+    overflow-y: auto;
+    padding-right: 8px;
+}
+"""
+
+
+def create_app(modal_url: str) -> gr.Blocks:
+    """Create the main Gradio app with fixed event handling"""
+    
+    # Initialize MCP client
+    mcp_client = MCPClient(modal_url)
+    
+    # Load initial email data
+    initial_emails, _ = load_email_data(DATA_PATH)
+    
+    # Create the Gradio interface with custom CSS
+    css = """
+    #rule-cards-container {
+        max-height: 500px;
+        overflow-y: auto;
+        padding-right: 8px;
+    }
+    """ + NATIVE_CSS
+    
+    with gr.Blocks(title="Email Rule Agent", theme=gr.themes.Soft(), css=css) as demo:
+        # Initialize session state using Gradio State objects
+        session_id = gr.State()
+        
+        # Per-user state objects (not shared between users)
+        user_emails = gr.State(initial_emails)
+        preview_emails = gr.State(initial_emails)
+        pending_rules = gr.State([])
+        applied_rules = gr.State([])
+        rule_counter = gr.State(0)
+        
+        logger.info("UI initialized with state objects")
+        
+        # Store Modal URL and MCP client in state
+        modal_state = gr.State(modal_url)
+        mcp_state = gr.State(mcp_client)
+        
+        # Create event handlers outside render function
+        preview_handler = create_rule_event_handler('preview', mcp_client)
+        accept_handler = create_rule_event_handler('accept', mcp_client)
+        reject_handler = create_rule_event_handler('reject', mcp_client)
+        cancel_handler = create_rule_event_handler('cancel', mcp_client)
+        
+        gr.Markdown("# 📧 Email Rule Agent")
+        gr.Markdown("*Intelligent email management powered by AI*")
+        
+        # Add login choice
+        with gr.Row(visible=True) as login_row:
+            with gr.Column():
+                gr.Markdown("## Welcome! Choose how to get started:")
+                with gr.Row():
+                    demo_btn = gr.Button("🎮 Try with Demo Data", variant="primary", scale=1)
+                    gmail_btn = gr.Button("📧 Login with Gmail", variant="secondary", scale=1)
+        
+        # Main interface (initially hidden)
+        with gr.Row(visible=False) as main_interface:
+            # Left side - Chat & Rules Interface (combined)
+            with gr.Column(scale=5):
+                # Chat Section
+                gr.Markdown("### 💬 Chat with AI Assistant")
+                chatbot = gr.Chatbot(
+                    value=[],
+                    type="messages",
+                    height=300,
+                    placeholder="Ask me to analyze your emails or create organization rules!"
+                )
+                
+                with gr.Row():
+                    msg_input = gr.Textbox(
+                        placeholder="Type your message here... (e.g., 'Help me organize my newsletters')",
+                        container=False,
+                        scale=10
+                    )
+                    send_btn = gr.Button("Send", variant="primary", scale=1)
+                
+                # Quick action buttons
+                with gr.Row():
+                    analyze_btn = gr.Button("📊 Analyze Inbox", scale=1, size="sm")
+                    suggest_btn = gr.Button("💡 Suggest Rules", scale=1, size="sm")
+                
+                # Rules Section
+                gr.Markdown("### 📋 Proposed Rules")
+                
+                # Status message
+                status_msg = gr.Textbox(
+                    label="Status",
+                    placeholder="Ready...",
+                    interactive=False,
+                    elem_id="status-msg"
+                )
+                
+                # Container for the dynamic rule cards
+                with gr.Column(elem_id="rule-cards-container"):
+                    # Set up the @gr.render function for rule cards
+                    @gr.render(inputs=[pending_rules, applied_rules])
+                    def render_rule_cards(pending_rules_list, applied_rules_list):
+                        """Render rule cards dynamically based on current rules"""
+                        logger.debug(f"=== RENDER CALLED ===\nPending rules: {len(pending_rules_list) if pending_rules_list else 0}")
+                        
+                        # If no rules, show empty state
+                        if not pending_rules_list or len([r for r in pending_rules_list if r.get('status') != 'rejected']) == 0:
+                            logger.debug("No pending rules to display")
+                            gr.Markdown(
+                                """<div style='text-align: center; padding: 40px; color: #6c757d;'>
+                                <div style='font-size: 48px; margin-bottom: 10px;'>📋</div>
+                                <div style='font-size: 18px; font-weight: 500;'>No pending rules</div>
+                                <div style='font-size: 14px; margin-top: 8px;'>Ask me to analyze your inbox to get started!</div>
+                                </div>"""
+                            )
+                            return
+                        
+                        # Count active rules
+                        active_count = len([r for r in pending_rules_list if r.get('status') != 'rejected'])
+                        logger.debug(f"Active rules count: {active_count}")
+                        
+                        # Header with count
+                        gr.Markdown(f"**{active_count} rules** ready for review")
+                        
+                        # Render each rule
+                        for rule in pending_rules_list:
+                            if rule.get('status') == 'rejected':
+                                continue
+                            
+                            logger.debug(f"Rendering rule: {rule.get('id')} - {rule.get('name')}")
+                            
+                            # Create a unique key for this rule
+                            rule_key = f"rule_{rule['id']}"
+                            
+                            # Determine styling based on status
+                            if rule['status'] == 'accepted':
+                                elem_classes = ["rule-card", "rule-accepted"]
+                            elif rule['status'] == 'preview':
+                                elem_classes = ["rule-card", "rule-preview"]
+                            else:
+                                elem_classes = ["rule-card", "rule-pending"]
+                            
+                            with gr.Group(key=rule_key, elem_classes=elem_classes):
+                                with gr.Row():
+                                    # Left side - Rule content
+                                    with gr.Column(scale=3):
+                                        gr.Markdown(f"**{rule.get('name', 'Unnamed Rule')}**")
+                                        gr.Markdown(f"*{rule.get('description', 'No description')}*", elem_classes=["rule-description"])
+                                        
+                                        # Conditions section
+                                        with gr.Row():
+                                            with gr.Column():
+                                                gr.Markdown("**🎯 Conditions:**")
+                                                gr.Markdown(format_conditions(rule.get('conditions', [])), elem_classes=["rule-conditions"])
+                                        
+                                        # Actions section
+                                        with gr.Row():
+                                            with gr.Column():
+                                                gr.Markdown("**⚡ Actions:**")
+                                                gr.Markdown(format_actions(rule.get('actions', [])), elem_classes=["rule-actions"])
+                                    
+                                    # Right side - Status and buttons
+                                    with gr.Column(scale=1):
+                                        # Status indicator
+                                        if rule['status'] == 'pending':
+                                            gr.Markdown("⏳ **Pending Review**", elem_classes=["status-pending"])
+                                        elif rule['status'] == 'preview':
+                                            gr.Markdown("👁️ **Preview Mode**", elem_classes=["status-preview"])
+                                        elif rule['status'] == 'accepted':
+                                            gr.Markdown("✅ **Accepted**", elem_classes=["status-accepted"])
+                                        
+                                        # Action buttons based on status
+                                        if rule['status'] == 'pending':
+                                            with gr.Row():
+                                                preview_btn = gr.Button(
+                                                    "👁️ Preview",
+                                                    size="sm",
+                                                    variant="secondary",
+                                                    key=f"{rule['id']}_preview"
+                                                )
+                                                accept_btn = gr.Button(
+                                                    "✅ Accept",
+                                                    size="sm",
+                                                    variant="primary",
+                                                    key=f"{rule['id']}_accept"
+                                                )
+                                                reject_btn = gr.Button(
+                                                    "❌ Reject",
+                                                    size="sm",
+                                                    variant="stop",
+                                                    key=f"{rule['id']}_reject"
+                                                )
+                                            
+                                            # Use the pre-created handlers
+                                            preview_btn.click(
+                                                fn=preview_handler,
+                                                inputs=[
+                                                    sort_dropdown, search_box, user_emails,
+                                                    preview_emails, pending_rules
+                                                ],
+                                                outputs=[
+                                                    folder_dropdown, email_display, pending_rules,
+                                                    preview_banner, status_msg, user_emails,
+                                                    preview_emails
+                                                ]
+                                            )
+                                            
+                                            accept_btn.click(
+                                                fn=accept_handler,
+                                                inputs=[
+                                                    folder_dropdown, sort_dropdown, search_box,
+                                                    user_emails, preview_emails,
+                                                    pending_rules, applied_rules
+                                                ],
+                                                outputs=[
+                                                    pending_rules, preview_banner, status_msg,
+                                                    email_display, folder_dropdown, user_emails,
+                                                    preview_emails, applied_rules
+                                                ]
+                                            )
+                                            
+                                            reject_btn.click(
+                                                fn=reject_handler,
+                                                inputs=[pending_rules],
+                                                outputs=[pending_rules, preview_banner, status_msg]
+                                            )
+                                        
+                                        elif rule['status'] == 'preview':
+                                            with gr.Row():
+                                                accept_btn = gr.Button(
+                                                    "✅ Apply Rule",
+                                                    size="sm",
+                                                    variant="primary",
+                                                    key=f"{rule['id']}_apply"
+                                                )
+                                                cancel_btn = gr.Button(
+                                                    "Cancel Preview",
+                                                    size="sm",
+                                                    variant="secondary",
+                                                    key=f"{rule['id']}_cancel"
+                                                )
+                                            
+                                            accept_btn.click(
+                                                fn=accept_handler,
+                                                inputs=[
+                                                    folder_dropdown, sort_dropdown, search_box,
+                                                    user_emails, preview_emails,
+                                                    pending_rules, applied_rules
+                                                ],
+                                                outputs=[
+                                                    pending_rules, preview_banner, status_msg,
+                                                    email_display, folder_dropdown, user_emails,
+                                                    preview_emails, applied_rules
+                                                ]
+                                            )
+                                            
+                                            cancel_btn.click(
+                                                fn=cancel_handler,
+                                                inputs=[
+                                                    sort_dropdown, search_box,
+                                                    user_emails, pending_rules
+                                                ],
+                                                outputs=[
+                                                    folder_dropdown, email_display, pending_rules,
+                                                    preview_banner, status_msg, user_emails
+                                                ]
+                                            )
+            
+            # Right side - Email Display
+            with gr.Column(scale=6):
+                # Preview banner
+                preview_banner = gr.HTML(create_preview_banner(0))
+                
+                # Email controls
+                with gr.Row():
+                    folder_dropdown = gr.Dropdown(
+                        choices=get_folder_dropdown_choices(initial_emails),
+                        value=get_folder_dropdown_choices(initial_emails)[0] if get_folder_dropdown_choices(initial_emails) else "Inbox (0)",
+                        container=False,
+                        scale=2,
+                        allow_custom_value=True
+                    )
+                    search_box = gr.Textbox(
+                        placeholder="Search emails...",
+                        container=False,
+                        scale=3
+                    )
+                    sort_dropdown = gr.Dropdown(
+                        choices=["Newest First", "Oldest First"],
+                        value="Newest First",
+                        container=False,
+                        scale=1
+                    )
+                
+                # Email list
+                email_display = gr.HTML(
+                    value=create_email_html(initial_emails)
+                )
+        
+        # Rest of the app setup (chat handlers, event handlers, etc.)
+        # Copy from original ui.py starting from line 922...
+        
+        # Event handlers
+        def start_demo_mode():
+            mcp_client.set_mode('mock')
+            return gr.update(visible=False), gr.update(visible=True)
+        
+        def start_gmail_mode():
+            auth_url = mcp_client.get_gmail_auth_url()
+            if auth_url:
+                print(f"Gmail auth URL: {auth_url}")
+            return gr.update(visible=False), gr.update(visible=True)
+        
+        demo_btn.click(
+            start_demo_mode,
+            outputs=[login_row, main_interface]
+        )
+        
+        gmail_btn.click(
+            start_gmail_mode,
+            outputs=[login_row, main_interface]
+        )
+        
+        # Chat functions
+        def user(user_message, history):
+            """Handle user message submission"""
+            if not user_message:
+                return "", history
+            history.append({"role": "user", "content": user_message})
+            return "", history
+        
+        def bot(history, session_id, emails_state, pending_rules_state, applied_rules_state):
+            """Bot response with character-by-character streaming"""
+            import time
+            
+            if not history or len(history) == 0:
+                return history, emails_state, pending_rules_state
+            
+            # Get the last user message
+            user_message = history[-1]["content"]
+            
+            # Add empty assistant message for streaming
+            history.append({"role": "assistant", "content": ""})
+            
+            # Show typing indicator
+            history[-1]["content"] = "..."
+            yield history, emails_state, pending_rules_state
+            
+            # Clear typing indicator
+            history[-1]["content"] = ""
+            
+            try:
+                # Get current rule state
+                rule_state = {
+                    'proposedRules': [r for r in pending_rules_state if r.get('status') == 'pending'],
+                    'activeRules': applied_rules_state,
+                    'rejectedRules': [r for r in pending_rules_state if r.get('status') == 'rejected']
+                }
+                
+                # Check if user is asking about emails/rules
+                is_analyzing = any(keyword in user_message.lower() for keyword in 
+                                 ['analyze', 'suggest', 'organize', 'rules', 'inbox'])
+                
+                # Process message through agent with callback
+                def progress_callback(status: str):
+                    """Show progress in chat"""
+                    if is_analyzing:
+                        history[-1]["content"] = f"📊 {status}..."
+                        return history
+                
+                logger.debug(f"Processing message through agent: {user_message[:50]}...")
+                response_data = process_agent_message(
+                    user_message=user_message,
+                    emails=emails_state,
+                    conversation_history=history[:-2],  # Exclude user message and empty assistant
+                    rule_state=rule_state,
+                    callback=progress_callback if is_analyzing else None
+                )
+                
+                # Extract response text and rules
+                response_text = response_data.get('response', "I couldn't process that request.")
+                extracted_rules = response_data.get('rules', [])
+                logger.debug(f"Agent response received. Rules extracted: {len(extracted_rules)}")
+                
+                # Add new rules to pending BEFORE streaming
+                updated_pending = pending_rules_state.copy()
+                logger.debug(f"Current pending rules before update: {len(updated_pending)}")
+                logger.debug(f"Extracted rules from agent: {len(extracted_rules)}")
+                
+                for rule in extracted_rules:
+                    if not any(r.get('rule_id') == rule.get('rule_id') for r in updated_pending):
+                        rule['status'] = 'pending'
+                        rule['id'] = rule.get('rule_id', f"rule_{len(updated_pending)}")
+                        updated_pending.append(rule)
+                        logger.info(f"Added new rule: {rule['id']} - {rule.get('name')}")
+                
+                logger.debug(f"Updated pending rules count: {len(updated_pending)}")
+                
+                # Clear content for streaming
+                history[-1]["content"] = ""
+                
+                # Stream the response character by character
+                for character in response_text:
+                    history[-1]["content"] += character
+                    time.sleep(0.01)  # Small delay for streaming effect
+                    yield history, emails_state, updated_pending  # Use updated_pending here
+                
+                logger.debug(f"Streaming complete, final state has {len(updated_pending)} rules")
+                # Final yield with updated state
+                yield history, emails_state, updated_pending
+                
+            except Exception as e:
+                error_msg = f"❌ I encountered an error: {str(e)}. Please try again."
+                history[-1]["content"] = ""
+                for character in error_msg:
+                    history[-1]["content"] += character
+                    time.sleep(0.02)
+                    yield history, emails_state, pending_rules_state
+                return history, emails_state, pending_rules_state
+        
+        # Connect the chat handlers with proper chaining
+        msg_input.submit(user, [msg_input, chatbot], [msg_input, chatbot], queue=False).then(
+            bot, [chatbot, session_id, user_emails, pending_rules, applied_rules], [chatbot, user_emails, pending_rules]
+        )
+        
+        send_btn.click(user, [msg_input, chatbot], [msg_input, chatbot], queue=False).then(
+            bot, [chatbot, session_id, user_emails, pending_rules, applied_rules], [chatbot, user_emails, pending_rules]
+        )
+        
+        # Quick action handlers
+        def analyze_inbox():
+            return "Analyze my inbox and suggest organization rules"
+        
+        def suggest_rules():
+            return "Suggest some email organization rules based on common patterns"
+        
+        analyze_btn.click(analyze_inbox, None, msg_input).then(
+            user, [msg_input, chatbot], [msg_input, chatbot], queue=False
+        ).then(
+            bot, [chatbot, session_id, user_emails, pending_rules, applied_rules], [chatbot, user_emails, pending_rules]
+        )
+        
+        suggest_btn.click(suggest_rules, None, msg_input).then(
+            user, [msg_input, chatbot], [msg_input, chatbot], queue=False
+        ).then(
+            bot, [chatbot, session_id, user_emails, pending_rules, applied_rules], [chatbot, user_emails, pending_rules]
+        )
+        
+        # Email display handlers
+        def update_emails(folder, sort_option, search_query, emails_state):
+            filtered_emails = filter_emails(folder, search_query, sort_option, emails_state)
+            return create_email_html(filtered_emails, folder)
+        
+        folder_dropdown.change(
+            update_emails,
+            inputs=[folder_dropdown, sort_dropdown, search_box, user_emails],
+            outputs=[email_display]
+        )
+        
+        sort_dropdown.change(
+            update_emails,
+            inputs=[folder_dropdown, sort_dropdown, search_box, user_emails],
+            outputs=[email_display]
+        )
+        
+        search_box.change(
+            update_emails,
+            inputs=[folder_dropdown, sort_dropdown, search_box, user_emails],
+            outputs=[email_display]
+        )
+        
+        # Initialize session on load
+        def init_session():
+            """Initialize a new session for the user"""
+            new_session_id = session_manager.create_session()
+            logger.info(f"Created new session: {new_session_id}")
+            
+            # Test: Load any existing rules from JSON
+            test_rules = []
+            if os.path.exists(RULES_DATA_PATH):
+                try:
+                    with open(RULES_DATA_PATH, 'r') as f:
+                        data = json.load(f)
+                        for rule in data.get('rules', []):
+                            test_rules.append({
+                                'id': rule.get('rule_id', f'rule_{len(test_rules)}'),
+                                'name': rule.get('name', 'Test Rule'),
+                                'description': rule.get('description', 'Test description'),
+                                'conditions': rule.get('conditions', []),
+                                'actions': rule.get('actions', []),
+                                'status': 'pending'
+                            })
+                    logger.info(f"Loaded {len(test_rules)} test rules from JSON")
+                except Exception as e:
+                    logger.error(f"Error loading test rules: {e}")
+            
+            return new_session_id, test_rules
+        
+        # Initialize session on load and test with rules
+        demo.load(
+            init_session,
+            outputs=[session_id, pending_rules]
+        )
+    
+    return demo
+
+
+def launch_app(demo: gr.Blocks):
+    """Launch the Gradio app"""
+    pass

archive/ui_old/archive/ui_gradio_render.py

@@ -0,0 +1,414 @@
+"""
+Modern Gradio implementation using gr.render() for dynamic components
+This is the recommended approach for Gradio 4.0+
+"""
+
+import gradio as gr
+from typing import List, Dict, Any, Tuple, Optional
+from dataclasses import dataclass
+from datetime import datetime
+
+
+@dataclass
+class RuleAction:
+    """Encapsulates a rule action result"""
+    status_message: str
+    updated_rules: List[Dict]
+    show_preview: bool = False
+    affected_emails: Optional[List[Dict]] = None
+
+
+def create_rule_card_styles():
+    """CSS styles for rule cards"""
+    return """
+    .rule-card {
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 12px;
+        transition: all 0.3s ease;
+    }
+    .rule-card:hover {
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    }
+    .rule-card.pending {
+        background-color: #f8f9fa;
+    }
+    .rule-card.accepted {
+        background-color: #d4edda;
+        border-color: #28a745;
+    }
+    .rule-card.rejected {
+        background-color: #f8d7da;
+        border-color: #dc3545;
+        opacity: 0.7;
+    }
+    .rule-card.preview {
+        background-color: #fff3cd;
+        border-color: #ffc107;
+        border-width: 2px;
+    }
+    .status-badge {
+        display: inline-block;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
+    .status-pending { background: #ffc107; color: white; }
+    .status-accepted { background: #28a745; color: white; }
+    .status-rejected { background: #dc3545; color: white; }
+    .status-preview { background: #fd7e14; color: white; }
+    """
+
+
+def create_modern_gradio_app(modal_url: str) -> gr.Blocks:
+    """
+    Create a modern Gradio app using gr.render() for dynamic components
+    This is the recommended approach for Gradio 4.0+
+    """
+    
+    # Initialize with demo data
+    initial_rules = [
+        {
+            "id": "rule_1",
+            "name": "Newsletter Organizer",
+            "description": "Automatically move newsletters to a dedicated folder",
+            "conditions": [
+                {"field": "subject", "operator": "contains", "value": "newsletter"},
+                {"field": "from", "operator": "contains", "value": "noreply"}
+            ],
+            "actions": [
+                {"type": "move", "parameters": {"folder": "Newsletters"}}
+            ],
+            "status": "pending",
+            "created_at": datetime.now().isoformat()
+        },
+        {
+            "id": "rule_2", 
+            "name": "Work Email Prioritizer",
+            "description": "Flag important work emails from colleagues",
+            "conditions": [
+                {"field": "from", "operator": "contains", "value": "@company.com"}
+            ],
+            "actions": [
+                {"type": "flag", "parameters": {"importance": "high"}},
+                {"type": "move", "parameters": {"folder": "Work"}}
+            ],
+            "status": "pending",
+            "created_at": datetime.now().isoformat()
+        }
+    ]
+    
+    with gr.Blocks(
+        title="Email Rule Agent - Modern Implementation",
+        theme=gr.themes.Soft(),
+        css=create_rule_card_styles()
+    ) as demo:
+        # State management
+        pending_rules = gr.State(initial_rules)
+        applied_rules = gr.State([])
+        preview_mode = gr.State(False)
+        selected_rule_id = gr.State(None)
+        
+        gr.Markdown("# 📧 Email Rule Agent")
+        gr.Markdown("*Modern implementation using gr.render() for dynamic components*")
+        
+        with gr.Row():
+            # Left column - Rules
+            with gr.Column(scale=5):
+                gr.Markdown("### 📋 Email Organization Rules")
+                
+                # Status display
+                status_display = gr.Markdown("Ready to process rules...", elem_id="status-display")
+                
+                # Rule statistics
+                @gr.render(inputs=[pending_rules, applied_rules])
+                def render_rule_stats(pending, applied):
+                    total_pending = len([r for r in pending if r.get("status") != "rejected"])
+                    total_applied = len(applied)
+                    total_rejected = len([r for r in pending if r.get("status") == "rejected"])
+                    
+                    with gr.Row():
+                        gr.Markdown(f"**Pending:** {total_pending}")
+                        gr.Markdown(f"**Applied:** {total_applied}")
+                        gr.Markdown(f"**Rejected:** {total_rejected}")
+                
+                # Dynamic rule cards using gr.render
+                @gr.render(inputs=[pending_rules, selected_rule_id])
+                def render_rule_cards(rules, selected_id):
+                    if not rules:
+                        with gr.Group(elem_classes=["rule-card"]):
+                            gr.Markdown("### No pending rules")
+                            gr.Markdown("Ask the AI assistant to analyze your inbox!")
+                    else:
+                        for rule in rules:
+                            with gr.Group(elem_classes=[f"rule-card {rule['status']}"]):
+                                with gr.Row():
+                                    with gr.Column(scale=4):
+                                        gr.Markdown(f"### {rule['name']}")
+                                    with gr.Column(scale=1):
+                                        status_emoji = {
+                                            "pending": "⏳",
+                                            "accepted": "✅",
+                                            "rejected": "❌",
+                                            "preview": "👁️"
+                                        }
+                                        gr.HTML(
+                                            f'<span class="status-badge status-{rule["status"]}">'
+                                            f'{status_emoji.get(rule["status"], "")} {rule["status"]}'
+                                            f'</span>'
+                                        )
+                                
+                                gr.Markdown(rule['description'])
+                                
+                                # Conditions
+                                with gr.Accordion("Conditions", open=True):
+                                    for condition in rule['conditions']:
+                                        gr.Markdown(
+                                            f"• **{condition['field']}** "
+                                            f"{condition['operator']} "
+                                            f"*{condition['value']}*"
+                                        )
+                                
+                                # Actions
+                                with gr.Accordion("Actions", open=True):
+                                    for action in rule['actions']:
+                                        if action['type'] == 'move':
+                                            gr.Markdown(
+                                                f"• Move to folder: **{action['parameters']['folder']}**"
+                                            )
+                                        else:
+                                            gr.Markdown(f"• {action['type']}")
+                                
+                                # Action buttons based on status
+                                if rule['status'] == 'pending':
+                                    with gr.Row():
+                                        preview_btn = gr.Button(
+                                            "👁️ Preview",
+                                            size="sm",
+                                            variant="secondary"
+                                        )
+                                        accept_btn = gr.Button(
+                                            "✅ Accept",
+                                            size="sm",
+                                            variant="primary"
+                                        )
+                                        reject_btn = gr.Button(
+                                            "❌ Reject",
+                                            size="sm",
+                                            variant="stop"
+                                        )
+                                    
+                                    # Event handlers with closures to capture rule_id
+                                    preview_btn.click(
+                                        fn=lambda r=rule: handle_preview(r['id']),
+                                        inputs=[pending_rules],
+                                        outputs=[pending_rules, status_display, preview_mode]
+                                    )
+                                    accept_btn.click(
+                                        fn=lambda r=rule: handle_accept(r['id']),
+                                        inputs=[pending_rules, applied_rules],
+                                        outputs=[pending_rules, applied_rules, status_display]
+                                    )
+                                    reject_btn.click(
+                                        fn=lambda r=rule: handle_reject(r['id']),
+                                        inputs=[pending_rules],
+                                        outputs=[pending_rules, status_display]
+                                    )
+                                
+                                elif rule['status'] == 'preview':
+                                    with gr.Row():
+                                        accept_btn = gr.Button(
+                                            "✅ Accept & Apply",
+                                            size="sm",
+                                            variant="primary"
+                                        )
+                                        cancel_btn = gr.Button(
+                                            "Cancel Preview",
+                                            size="sm",
+                                            variant="secondary"
+                                        )
+                                    
+                                    accept_btn.click(
+                                        fn=lambda r=rule: handle_accept(r['id']),
+                                        inputs=[pending_rules, applied_rules],
+                                        outputs=[pending_rules, applied_rules, status_display]
+                                    )
+                                    cancel_btn.click(
+                                        fn=lambda r=rule: handle_cancel_preview(r['id']),
+                                        inputs=[pending_rules],
+                                        outputs=[pending_rules, status_display, preview_mode]
+                                    )
+            
+            # Right column - Email preview
+            with gr.Column(scale=6):
+                # Preview mode banner
+                @gr.render(inputs=[preview_mode, pending_rules])
+                def render_preview_banner(is_preview, rules):
+                    preview_rules = [r for r in rules if r.get('status') == 'preview']
+                    if is_preview and preview_rules:
+                        with gr.Group(elem_classes=["preview-banner"]):
+                            gr.Markdown(
+                                f"👁️ **Preview Mode Active** - "
+                                f"Showing how {len(preview_rules)} rule(s) would organize your emails"
+                            )
+                
+                # Email display placeholder
+                gr.Markdown("### 📧 Email Inbox")
+                email_display = gr.HTML(
+                    value="<p>Email display would be here. "
+                    "This demo focuses on the rule card implementation.</p>"
+                )
+        
+        # Handler functions
+        def handle_preview(rule_id: str) -> Tuple[List[Dict], str, bool]:
+            def update_rules(rules):
+                for rule in rules:
+                    if rule['id'] == rule_id:
+                        rule['status'] = 'preview'
+                        return rules, f"👁️ Previewing rule: {rule['name']}", True
+                return rules, "Rule not found", False
+            
+            return update_rules
+        
+        def handle_accept(rule_id: str):
+            def update_rules(pending, applied):
+                for i, rule in enumerate(pending):
+                    if rule['id'] == rule_id:
+                        rule['status'] = 'accepted'
+                        applied.append(rule)
+                        pending.pop(i)
+                        return pending, applied, f"✅ Rule accepted and applied: {rule['name']}"
+                return pending, applied, "Rule not found"
+            
+            return update_rules
+        
+        def handle_reject(rule_id: str):
+            def update_rules(rules):
+                for rule in rules:
+                    if rule['id'] == rule_id:
+                        rule['status'] = 'rejected'
+                        return rules, f"❌ Rule rejected: {rule['name']}"
+                return rules, "Rule not found"
+            
+            return update_rules
+        
+        def handle_cancel_preview(rule_id: str):
+            def update_rules(rules):
+                for rule in rules:
+                    if rule['id'] == rule_id and rule['status'] == 'preview':
+                        rule['status'] = 'pending'
+                        return rules, "Preview cancelled", False
+                return rules, "Rule not found", False
+            
+            return update_rules
+        
+        # Add new rule button for testing
+        with gr.Row():
+            add_rule_btn = gr.Button("➕ Add Demo Rule", variant="secondary")
+            
+            @add_rule_btn.click(inputs=[pending_rules], outputs=[pending_rules, status_display])
+            def add_demo_rule(rules):
+                new_rule = {
+                    "id": f"rule_{len(rules) + 1}",
+                    "name": f"Demo Rule {len(rules) + 1}",
+                    "description": "A dynamically added rule for demonstration",
+                    "conditions": [
+                        {"field": "subject", "operator": "contains", "value": "demo"}
+                    ],
+                    "actions": [
+                        {"type": "move", "parameters": {"folder": "Demo"}}
+                    ],
+                    "status": "pending",
+                    "created_at": datetime.now().isoformat()
+                }
+                rules.append(new_rule)
+                return rules, f"Added new rule: {new_rule['name']}"
+    
+    return demo
+
+
+# Alternative approach using fixed components with dynamic visibility
+def create_fixed_component_app(modal_url: str) -> gr.Blocks:
+    """
+    Alternative approach using pre-created components with visibility control
+    This works well when you have a maximum number of rules
+    """
+    MAX_RULES = 10
+    
+    with gr.Blocks(title="Email Rule Agent - Fixed Components") as demo:
+        gr.Markdown("# 📧 Email Rule Agent")
+        gr.Markdown("*Implementation using fixed components with dynamic visibility*")
+        
+        # State
+        rules_data = gr.State([])
+        
+        # Create fixed rule card components
+        rule_cards = []
+        for i in range(MAX_RULES):
+            with gr.Group(visible=False) as card_group:
+                with gr.Row():
+                    rule_name = gr.Markdown()
+                    rule_status = gr.Markdown()
+                
+                rule_desc = gr.Markdown()
+                
+                with gr.Row():
+                    preview_btn = gr.Button("Preview", size="sm", variant="secondary")
+                    accept_btn = gr.Button("Accept", size="sm", variant="primary")
+                    reject_btn = gr.Button("Reject", size="sm", variant="stop")
+                
+                # Store references
+                rule_cards.append({
+                    "group": card_group,
+                    "name": rule_name,
+                    "status": rule_status,
+                    "desc": rule_desc,
+                    "preview": preview_btn,
+                    "accept": accept_btn,
+                    "reject": reject_btn
+                })
+        
+        # Update function to show/hide and populate cards
+        def update_rule_display(rules):
+            updates = []
+            for i, card in enumerate(rule_cards):
+                if i < len(rules):
+                    rule = rules[i]
+                    updates.extend([
+                        gr.update(visible=True),  # group
+                        gr.update(value=f"### {rule['name']}"),  # name
+                        gr.update(value=f"Status: {rule['status']}"),  # status
+                        gr.update(value=rule['description'])  # desc
+                    ])
+                else:
+                    updates.extend([
+                        gr.update(visible=False),  # group
+                        gr.update(),  # name
+                        gr.update(),  # status
+                        gr.update()   # desc
+                    ])
+            return updates
+    
+    return demo
+
+
+if __name__ == "__main__":
+    print("MODERN GRADIO IMPLEMENTATION APPROACHES")
+    print("=" * 60)
+    print("\n1. gr.render() APPROACH (Recommended for Gradio 4.0+):")
+    print("   ✅ Dynamic component creation")
+    print("   ✅ Proper event handling with closures")
+    print("   ✅ Clean, maintainable code")
+    print("   ✅ Scales to any number of rules")
+    print("\n2. FIXED COMPONENTS APPROACH:")
+    print("   ✅ Works with older Gradio versions")
+    print("   ✅ Simple event handling")
+    print("   ❌ Limited by MAX_RULES")
+    print("   ❌ More complex update logic")
+    print("\n3. HYBRID APPROACH:")
+    print("   - Use gr.render() for rule display")
+    print("   - Use fixed action buttons with rule selector")
+    print("   - Good balance of flexibility and simplicity")

archive/ui_old/archive/ui_handlers_fix.py

@@ -0,0 +1,41 @@
+"""
+Fix for event handlers in @gr.render
+"""
+
+# The issue: Event handlers defined inside @gr.render get stale references
+# Solution: Define handlers outside and use a dispatcher pattern
+
+def create_rule_handlers(mcp_client):
+    """Create event handlers that can be used with dynamic rule IDs"""
+    
+    def preview_handler(rule_id, *args):
+        """Generic preview handler that receives rule_id as first argument"""
+        # Extract the actual arguments
+        sort_option, search_query, user_emails, preview_emails, pending_rules = args
+        return preview_rule_with_mcp(
+            rule_id, sort_option, search_query, mcp_client, 
+            user_emails, preview_emails, pending_rules
+        )
+    
+    def accept_handler(rule_id, *args):
+        """Generic accept handler that receives rule_id as first argument"""
+        # Extract the actual arguments
+        current_folder, sort_option, search_query, user_emails, preview_emails, pending_rules, applied_rules = args
+        return accept_rule_with_mcp(
+            rule_id, mcp_client, current_folder, sort_option, search_query,
+            user_emails, preview_emails, pending_rules, applied_rules
+        )
+    
+    def reject_handler(rule_id, pending_rules):
+        """Generic reject handler"""
+        updated_rules = pending_rules.copy()
+        for rule in updated_rules:
+            if rule['id'] == rule_id:
+                rule['status'] = 'rejected'
+                break
+        
+        banner = create_preview_banner(get_preview_rules_count(updated_rules))
+        status = f"❌ Rule rejected"
+        return updated_rules, banner, status
+    
+    return preview_handler, accept_handler, reject_handler

archive/ui_old/archive/ui_refactored_example.py

@@ -0,0 +1,384 @@
+"""
+Practical refactoring example: Converting HTML string approach to Gradio components
+This shows how to refactor the existing create_interactive_rule_cards function
+"""
+
+import gradio as gr
+from typing import List, Dict, Any, Tuple, Callable
+from datetime import datetime
+
+
+# Original HTML approach (for reference)
+def create_interactive_rule_cards_original(pending_rules: List[Dict]) -> str:
+    """Original HTML string approach - what we're refactoring FROM"""
+    if not pending_rules:
+        return """<div>No pending rules...</div>"""
+    
+    html = "<div>"
+    for rule in pending_rules:
+        # ... HTML string building ...
+        pass
+    html += "</div>"
+    return html
+
+
+# REFACTORED APPROACH 1: Using gr.HTML with better structure
+def create_rule_cards_with_structured_html(pending_rules: List[Dict]) -> Tuple[str, str]:
+    """
+    Improved HTML approach with separate CSS and cleaner structure
+    Returns: (html, css)
+    """
+    css = """
+    <style>
+    .rule-container { max-height: 400px; overflow-y: auto; padding: 10px; }
+    .rule-card { 
+        border: 2px solid #e1e5e9; 
+        border-radius: 12px; 
+        padding: 20px; 
+        margin: 10px 0; 
+        background: white; 
+        transition: all 0.2s;
+    }
+    .rule-card.pending { background: white; }
+    .rule-card.accepted { background: #d4edda; border-color: #28a745; }
+    .rule-card.rejected { background: #f8d7da; border-color: #dc3545; opacity: 0.6; }
+    .rule-card.preview { background: #fff3cd; border-color: #fd7e14; }
+    .rule-actions { display: flex; gap: 8px; margin-top: 15px; }
+    .rule-btn {
+        padding: 8px 16px;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 500;
+        transition: all 0.2s;
+    }
+    .rule-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    .btn-preview { background: white; color: #007bff; border: 1px solid #007bff; }
+    .btn-accept { background: #28a745; color: white; }
+    .btn-reject { background: #dc3545; color: white; }
+    </style>
+    """
+    
+    if not pending_rules:
+        html = """
+        <div class="rule-container">
+            <div style="text-align: center; padding: 40px;">
+                <div style="font-size: 48px;">📋</div>
+                <h3>No Pending Rules</h3>
+                <p>Ask me to analyze your inbox to get started!</p>
+            </div>
+        </div>
+        """
+        return html, css
+    
+    # Build HTML with data attributes for easier JS interaction
+    html = '<div class="rule-container">'
+    html += '<div class="rule-header"><h3>📋 Email Rules</h3></div>'
+    
+    for rule in pending_rules:
+        rule_id = rule['id']
+        html += f'''
+        <div class="rule-card {rule['status']}" data-rule-id="{rule_id}">
+            <div class="rule-header">
+                <h4>{rule.get('name', 'Unnamed Rule')}</h4>
+                <span class="status-{rule['status']}">{rule['status'].upper()}</span>
+            </div>
+            <p>{rule.get('description', '')}</p>
+            <div class="rule-conditions">
+                <strong>Conditions:</strong>
+                <ul>{''.join(f"<li>{cond}</li>" for cond in rule.get('conditions', []))}</ul>
+            </div>
+            <div class="rule-actions-list">
+                <strong>Actions:</strong>
+                <ul>{''.join(f"<li>{action}</li>" for action in rule.get('actions', []))}</ul>
+            </div>
+        '''
+        
+        if rule['status'] == 'pending':
+            html += f'''
+            <div class="rule-actions">
+                <button class="rule-btn btn-preview" onclick="handleRuleAction('preview', '{rule_id}')">
+                    👁️ Preview
+                </button>
+                <button class="rule-btn btn-accept" onclick="handleRuleAction('accept', '{rule_id}')">
+                    ✅ Accept
+                </button>
+                <button class="rule-btn btn-reject" onclick="handleRuleAction('reject', '{rule_id}')">
+                    ❌ Reject
+                </button>
+            </div>
+            '''
+        
+        html += '</div>'
+    
+    html += '</div>'
+    
+    # Add improved JavaScript
+    js = """
+    <script>
+    function handleRuleAction(action, ruleId) {
+        // Dispatch custom event that Gradio can listen to
+        const event = new CustomEvent('ruleAction', {
+            detail: { action: action, ruleId: ruleId }
+        });
+        document.dispatchEvent(event);
+        
+        // Update UI optimistically
+        const card = document.querySelector(`[data-rule-id="${ruleId}"]`);
+        if (card) {
+            card.style.opacity = '0.5';
+            card.style.pointerEvents = 'none';
+        }
+    }
+    </script>
+    """
+    
+    return css + html + js, ""
+
+
+# REFACTORED APPROACH 2: Gradio-native with rule selector
+def create_rule_interface_with_selector() -> gr.Blocks:
+    """
+    Gradio-native approach using a rule selector dropdown
+    This avoids the dynamic component problem
+    """
+    with gr.Blocks() as interface:
+        with gr.Row():
+            # Rule selector and details
+            with gr.Column(scale=1):
+                gr.Markdown("### 📋 Email Rules")
+                
+                rule_selector = gr.Dropdown(
+                    label="Select a rule to view details",
+                    choices=[],
+                    value=None,
+                    interactive=True
+                )
+                
+                # Rule details group
+                with gr.Group(visible=False) as rule_details:
+                    rule_name = gr.Markdown("### Rule Name")
+                    rule_description = gr.Markdown("Description")
+                    
+                    with gr.Accordion("Conditions", open=True):
+                        conditions_text = gr.Markdown("No conditions")
+                    
+                    with gr.Accordion("Actions", open=True):
+                        actions_text = gr.Markdown("No actions")
+                    
+                    rule_status = gr.Markdown("**Status:** Pending")
+                    
+                    # Action buttons
+                    with gr.Row() as action_buttons:
+                        preview_btn = gr.Button("👁️ Preview", variant="secondary")
+                        accept_btn = gr.Button("✅ Accept", variant="primary")
+                        reject_btn = gr.Button("❌ Reject", variant="stop")
+            
+            # Rule list summary
+            with gr.Column(scale=1):
+                gr.Markdown("### Rule Summary")
+                rule_summary = gr.DataFrame(
+                    headers=["Name", "Status", "Conditions", "Actions"],
+                    datatype=["str", "str", "number", "number"],
+                    col_count=(4, "fixed"),
+                    interactive=False
+                )
+        
+        # Update functions
+        def update_rule_display(selected_rule_name, rules):
+            if not selected_rule_name or not rules:
+                return [gr.update(visible=False)] * 8
+            
+            rule = next((r for r in rules if r['name'] == selected_rule_name), None)
+            if not rule:
+                return [gr.update(visible=False)] * 8
+            
+            # Format conditions and actions
+            conditions = "\n".join([f"• {c}" for c in rule.get('conditions', [])])
+            actions = "\n".join([f"• {a}" for a in rule.get('actions', [])])
+            
+            return [
+                gr.update(visible=True),  # rule_details group
+                gr.update(value=f"### {rule['name']}"),  # name
+                gr.update(value=rule.get('description', '')),  # description
+                gr.update(value=conditions or "No conditions"),  # conditions
+                gr.update(value=actions or "No actions"),  # actions
+                gr.update(value=f"**Status:** {rule['status'].title()}"),  # status
+                gr.update(visible=rule['status'] == 'pending'),  # action buttons
+                gr.update(visible=rule['status'] in ['pending', 'preview'])  # some buttons
+            ]
+        
+        def update_rule_summary(rules):
+            summary_data = []
+            for rule in rules:
+                summary_data.append([
+                    rule['name'],
+                    rule['status'].title(),
+                    len(rule.get('conditions', [])),
+                    len(rule.get('actions', []))
+                ])
+            return summary_data
+    
+    return interface
+
+
+# REFACTORED APPROACH 3: Hybrid with custom component
+class RuleCardComponent(gr.HTML):
+    """
+    Custom Gradio component that extends HTML with better event handling
+    This is a conceptual example - actual implementation would need custom JS
+    """
+    
+    def __init__(self, pending_rules: List[Dict], **kwargs):
+        self.pending_rules = pending_rules
+        html_content = self._generate_html()
+        super().__init__(value=html_content, **kwargs)
+    
+    def _generate_html(self) -> str:
+        """Generate HTML with embedded event handlers"""
+        return create_rule_cards_with_structured_html(self.pending_rules)[0]
+    
+    def update_rules(self, new_rules: List[Dict]) -> gr.update:
+        """Update the component with new rules"""
+        self.pending_rules = new_rules
+        return gr.update(value=self._generate_html())
+
+
+# REFACTORED APPROACH 4: Using Gradio Blocks with @gr.render
+def create_modern_rule_interface() -> gr.Blocks:
+    """
+    Modern approach using @gr.render for dynamic components
+    This is the recommended approach for Gradio 4.0+
+    """
+    with gr.Blocks() as interface:
+        # State
+        rules_state = gr.State([])
+        selected_rule = gr.State(None)
+        
+        gr.Markdown("### 📋 Email Rules Management")
+        
+        # Statistics row
+        @gr.render(inputs=rules_state)
+        def render_stats(rules):
+            pending = len([r for r in rules if r['status'] == 'pending'])
+            accepted = len([r for r in rules if r['status'] == 'accepted'])
+            rejected = len([r for r in rules if r['status'] == 'rejected'])
+            
+            with gr.Row():
+                gr.Number(value=pending, label="Pending", interactive=False)
+                gr.Number(value=accepted, label="Accepted", interactive=False)
+                gr.Number(value=rejected, label="Rejected", interactive=False)
+        
+        # Rule cards
+        @gr.render(inputs=[rules_state, selected_rule])
+        def render_rules(rules, selected):
+            if not rules:
+                gr.Markdown("No rules to display. Ask the AI to analyze your inbox!")
+                return
+            
+            for rule in rules:
+                # Determine if this rule is selected
+                is_selected = selected and selected.get('id') == rule['id']
+                
+                with gr.Group():
+                    with gr.Row():
+                        with gr.Column(scale=4):
+                            # Make the rule name clickable
+                            rule_btn = gr.Button(
+                                value=rule['name'],
+                                variant="secondary" if not is_selected else "primary",
+                                size="sm"
+                            )
+                            rule_btn.click(
+                                fn=lambda r=rule: r,
+                                outputs=selected_rule
+                            )
+                        
+                        with gr.Column(scale=1):
+                            status_colors = {
+                                'pending': 'orange',
+                                'accepted': 'green',
+                                'rejected': 'red',
+                                'preview': 'blue'
+                            }
+                            gr.HTML(
+                                f"<span style='color: {status_colors.get(rule['status'], 'gray')}'>"
+                                f"{rule['status'].upper()}</span>"
+                            )
+                    
+                    # Show details if selected
+                    if is_selected:
+                        gr.Markdown(rule.get('description', 'No description'))
+                        
+                        with gr.Row():
+                            if rule['status'] == 'pending':
+                                preview_btn = gr.Button("Preview", size="sm")
+                                accept_btn = gr.Button("Accept", size="sm", variant="primary")
+                                reject_btn = gr.Button("Reject", size="sm", variant="stop")
+                                
+                                # Bind events
+                                preview_btn.click(
+                                    fn=lambda: update_rule_status(rule['id'], 'preview'),
+                                    inputs=rules_state,
+                                    outputs=rules_state
+                                )
+        
+        def update_rule_status(rule_id: str, new_status: str):
+            def updater(rules):
+                for rule in rules:
+                    if rule['id'] == rule_id:
+                        rule['status'] = new_status
+                return rules
+            return updater
+    
+    return interface
+
+
+# Example usage and migration guide
+def migration_example():
+    """
+    Shows how to migrate from HTML strings to Gradio components
+    """
+    
+    # Sample rules data
+    sample_rules = [
+        {
+            "id": "rule_1",
+            "name": "Newsletter Filter",
+            "description": "Move newsletters to dedicated folder",
+            "conditions": ["From contains 'newsletter'", "Subject contains 'weekly'"],
+            "actions": ["Move to 'Newsletters' folder"],
+            "status": "pending"
+        }
+    ]
+    
+    print("MIGRATION GUIDE: From HTML Strings to Native Gradio")
+    print("=" * 60)
+    print("\nSTEP 1: Identify the core functionality")
+    print("- Display rule cards")
+    print("- Handle preview/accept/reject actions") 
+    print("- Update UI based on rule status")
+    
+    print("\nSTEP 2: Choose the right approach")
+    print("- For Gradio 4.0+: Use @gr.render")
+    print("- For older versions: Use rule selector pattern")
+    print("- For complex interactions: Consider custom components")
+    
+    print("\nSTEP 3: Refactor incrementally")
+    print("1. Start with better structured HTML")
+    print("2. Move to rule selector approach")
+    print("3. Gradually adopt @gr.render")
+    print("4. Add proper event handling")
+    
+    print("\nKEY BENEFITS of native Gradio approach:")
+    print("✅ No JavaScript event handling complexity")
+    print("✅ Better state management")
+    print("✅ Automatic UI updates")
+    print("✅ Type-safe event handlers")
+    print("✅ Better accessibility")
+    print("✅ Easier to test and maintain")
+
+
+if __name__ == "__main__":
+    migration_example()

archive/ui_old/archive/ui_simplified.py

@@ -0,0 +1,137 @@
+"""
+Simplified UI handlers that properly delegate to MCP backend
+"""
+
+import gradio as gr
+from typing import List, Dict, Any, Tuple
+
+
+def preview_rule_simple(
+    rule_id: str, 
+    mcp_client: Any,
+    pending_rules: List[Dict[str, Any]]
+) -> Tuple[Dict[str, Any], str]:
+    """
+    Simple preview handler that delegates to MCP
+    Returns: (preview_response, status_message)
+    """
+    
+    if not rule_id or rule_id.strip() == "":
+        return {}, "❌ Error: No rule ID provided"
+    
+    # Find the rule
+    rule = next((r for r in pending_rules if r["id"] == rule_id), None)
+    if not rule:
+        return {}, f"❌ Rule not found: {rule_id}"
+    
+    try:
+        # Call MCP backend
+        response = mcp_client.preview_rule(rule)
+        
+        if response.get('success', False):
+            # Update rule status locally
+            rule["status"] = "preview"
+            
+            stats = response.get('statistics', {})
+            status_msg = f"👁️ Preview: {stats.get('matched_count', 0)} emails would be affected"
+            
+            return response, status_msg
+        else:
+            return {}, "❌ Preview failed"
+            
+    except Exception as e:
+        print(f"Error calling MCP preview: {e}")
+        return {}, f"❌ Error: {str(e)}"
+
+
+def apply_rule_simple(
+    rule_id: str,
+    mcp_client: Any,
+    pending_rules: List[Dict[str, Any]],
+    applied_rules: List[Dict[str, Any]]
+) -> Tuple[Dict[str, Any], str]:
+    """
+    Simple apply handler that delegates to MCP
+    Returns: (apply_response, status_message)
+    """
+    
+    if not rule_id or rule_id.strip() == "":
+        return {}, "❌ Error: No rule ID provided"
+    
+    # Find the rule
+    rule = next((r for r in pending_rules if r["id"] == rule_id), None)
+    if not rule:
+        return {}, f"❌ Rule not found: {rule_id}"
+    
+    try:
+        # Apply via MCP
+        response = mcp_client.apply_rule(rule, preview=False)
+        
+        if response.get('success', False):
+            # Save rule
+            mcp_client.save_rule(rule)
+            
+            # Update status
+            rule["status"] = "accepted"
+            applied_rules.append(rule.copy())
+            
+            stats = response.get('statistics', {})
+            status_msg = f"✅ Rule applied: {stats.get('processed_count', 0)} emails processed"
+            
+            return response, status_msg
+        else:
+            return {}, "❌ Apply failed"
+            
+    except Exception as e:
+        print(f"Error applying rule: {e}")
+        return {}, f"❌ Error: {str(e)}"
+
+
+def get_current_email_view(
+    mcp_client: Any,
+    folder: str = "inbox",
+    preview_data: Dict[str, Any] = None
+) -> Dict[str, Any]:
+    """
+    Get the current email view from backend or preview data
+    """
+    
+    if preview_data and preview_data.get('affected_emails'):
+        # We're in preview mode, show preview data
+        return {
+            'emails': preview_data['affected_emails'],
+            'is_preview': True
+        }
+    else:
+        # Normal mode, get from backend
+        try:
+            response = mcp_client.list_emails(folder=folder)
+            return {
+                'emails': response.get('emails', []),
+                'is_preview': False
+            }
+        except:
+            return {
+                'emails': [],
+                'is_preview': False
+            }
+
+
+def create_email_display_from_data(email_data: Dict[str, Any]) -> Tuple[List[str], str]:
+    """
+    Create email display from data returned by backend
+    Returns: (folder_choices, email_html)
+    """
+    from .ui_utils import get_folder_dropdown_choices, create_email_html
+    
+    emails = email_data.get('emails', [])
+    
+    # Get folder choices
+    folder_choices = get_folder_dropdown_choices(emails)
+    if not folder_choices:
+        folder_choices = ["Inbox (0)"]
+    
+    # Create HTML
+    html = create_email_html(emails)
+    
+    return folder_choices, html

archive/ui_old/archive/ui_streaming.py

@@ -0,0 +1,144 @@
+"""
+Streaming and tool visibility improvements for the chat interface
+"""
+
+import time
+from typing import Generator, Dict, Any, List, Tuple
+
+
+def process_chat_message_streaming(
+    user_message: str, 
+    chat_history: List[Dict[str, str]], 
+    mcp_client: Any,
+    current_emails: List[Dict[str, Any]],
+    pending_rules: List[Dict[str, Any]], 
+    applied_rules: List[Dict[str, Any]], 
+    rule_counter: int
+) -> Generator[Tuple, None, None]:
+    """Process chat messages with streaming responses and tool visibility"""
+    
+    from .simple_agent import process_chat_message as process_agent_message
+    from .ui_utils import create_interactive_rule_cards
+    import os
+    
+    if not user_message.strip():
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules), 
+               "Ready...", pending_rules, rule_counter)
+        return
+    
+    # Check if API key is available
+    if not os.getenv('OPENROUTER_API_KEY'):
+        chat_history.append({"role": "user", "content": user_message})
+        error_msg = "⚠️ OpenRouter API key not configured. Please set OPENROUTER_API_KEY in HuggingFace Spaces secrets to enable AI features."
+        chat_history.append({"role": "assistant", "content": error_msg})
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules), 
+               "API key missing", pending_rules, rule_counter)
+        return
+    
+    try:
+        # Add user message to history
+        chat_history.append({"role": "user", "content": user_message})
+        
+        # Show initial thinking/processing message
+        thinking_message = {"role": "assistant", "content": "🤔 Thinking..."}
+        temp_history = chat_history + [thinking_message]
+        yield (temp_history, "", create_interactive_rule_cards(pending_rules), 
+               "Processing...", pending_rules, rule_counter)
+        
+        # Check if we should analyze emails
+        analyze_keywords = ['analyze', 'suggest', 'organize', 'rules', 'help me organize', 
+                           'create rules', 'inbox', 'patterns']
+        should_analyze = any(keyword in user_message.lower() for keyword in analyze_keywords)
+        
+        if should_analyze and current_emails:
+            # Show analyzing status
+            analyzing_msg = {"role": "assistant", "content": "📊 Analyzing your emails...\n\n*Looking for patterns in:*\n- Senders and domains\n- Subject lines\n- Email types (newsletters, work, personal)\n- Frequency patterns"}
+            temp_history = chat_history + [analyzing_msg]
+            yield (temp_history, "", create_interactive_rule_cards(pending_rules), 
+                   f"Analyzing {len(current_emails)} emails...", pending_rules, rule_counter)
+            
+            # Small delay for visual feedback
+            time.sleep(0.5)
+        
+        # Get current rule state
+        rule_state = {
+            'proposedRules': [r for r in pending_rules if r['status'] == 'pending'],
+            'activeRules': applied_rules,
+            'rejectedRules': [r for r in pending_rules if r['status'] == 'rejected']
+        }
+        
+        # Process with agent (this will use internal streaming)
+        response_data = process_agent_message(
+            user_message=user_message,
+            emails=current_emails,
+            conversation_history=chat_history[:-1],  # Don't include the message we just added
+            rule_state=rule_state
+        )
+        
+        # Extract response and rules
+        response_text = response_data.get('response', '')
+        extracted_rules = response_data.get('rules', [])
+        
+        # Update rules if any were extracted
+        updated_pending_rules = pending_rules.copy()
+        for rule in extracted_rules:
+            if not any(r.get('rule_id') == rule.get('rule_id') for r in updated_pending_rules):
+                rule['status'] = 'pending'
+                rule['id'] = rule.get('rule_id', f'rule_{rule_counter}')
+                updated_pending_rules.append(rule)
+                rule_counter += 1
+        
+        # Show the response with streaming effect (simulate character-by-character)
+        assistant_msg = {"role": "assistant", "content": ""}
+        temp_history = chat_history + [assistant_msg]
+        
+        # Stream the response in chunks for better UX
+        chunk_size = 50  # Characters per chunk
+        for i in range(0, len(response_text), chunk_size):
+            assistant_msg["content"] = response_text[:i+chunk_size]
+            yield (temp_history, "", create_interactive_rule_cards(updated_pending_rules), 
+                   "Typing...", updated_pending_rules, rule_counter)
+            time.sleep(0.02)  # Small delay for streaming effect
+        
+        # Final update with complete message
+        chat_history.append({"role": "assistant", "content": response_text})
+        
+        # Show completion status
+        if extracted_rules:
+            status = f"✅ Found {len(extracted_rules)} new rules"
+        else:
+            status = "Processing complete"
+            
+        yield (chat_history, "", create_interactive_rule_cards(updated_pending_rules), 
+               status, updated_pending_rules, rule_counter)
+        
+    except Exception as e:
+        error_msg = f"I encountered an error: {str(e)}. Please try again."
+        chat_history.append({"role": "assistant", "content": error_msg})
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules), 
+               f"Error: {str(e)}", pending_rules, rule_counter)
+
+
+def create_tool_status_message(tool_name: str, status: str = "running") -> str:
+    """Create a formatted tool status message"""
+    icons = {
+        "analyzing_emails": "📊",
+        "extracting_patterns": "🔍",
+        "creating_rules": "📋",
+        "complete": "✅"
+    }
+    
+    messages = {
+        "analyzing_emails": "Analyzing email patterns...",
+        "extracting_patterns": "Extracting common patterns...",
+        "creating_rules": "Creating organization rules...",
+        "complete": "Analysis complete!"
+    }
+    
+    icon = icons.get(tool_name, "🔧")
+    message = messages.get(tool_name, f"Running {tool_name}...")
+    
+    if status == "running":
+        return f"{icon} {message}"
+    else:
+        return f"{icon} {message} ✓"

archive/ui_old/archive/ui_streaming_fixed.py

@@ -0,0 +1,172 @@
+"""
+Fixed streaming implementation that works with Gradio's expectations
+"""
+
+import time
+from typing import Generator, List, Dict, Any, Tuple
+import os
+
+
+def process_chat_streaming(
+    user_message: str,
+    chat_history: List[Dict[str, str]],
+    mcp_client: Any,
+    current_emails: List[Dict[str, Any]],
+    pending_rules: List[Dict[str, Any]],
+    applied_rules: List[Dict[str, Any]],
+    rule_counter: int
+) -> Generator[Tuple, None, None]:
+    """Streaming chat handler that yields updates progressively"""
+    
+    from .simple_agent import process_chat_message as process_agent_message
+    from .ui_utils import create_interactive_rule_cards
+    from .ui_chat import format_tool_message
+    
+    if not user_message.strip():
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules),
+               "Ready...", pending_rules, rule_counter)
+        return
+    
+    # Check API key
+    if not os.getenv('OPENROUTER_API_KEY'):
+        chat_history = chat_history + [{"role": "user", "content": user_message}]
+        error_msg = "⚠️ OpenRouter API key not configured. Please set OPENROUTER_API_KEY."
+        chat_history = chat_history + [{"role": "assistant", "content": error_msg}]
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules),
+               "API key missing", pending_rules, rule_counter)
+        return
+    
+    try:
+        # Add user message
+        chat_history = chat_history + [{"role": "user", "content": user_message}]
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules),
+               "Processing...", pending_rules, rule_counter)
+        
+        # Check if analyzing
+        analyze_keywords = ['analyze', 'suggest', 'organize', 'rules', 'inbox']
+        should_analyze = any(keyword in user_message.lower() for keyword in analyze_keywords)
+        
+        if should_analyze and current_emails:
+            # Show analyzing tool message
+            analysis_details = f"""Analyzing {len(current_emails)} emails...
+
+Looking for patterns in:
+• Sender domains and addresses  
+• Subject line keywords
+• Email frequency by sender
+• Common phrases and topics
+
+Email categories found:
+• Newsletters: {len([e for e in current_emails if 'newsletter' in e.get('from_email', '').lower()])}
+• Work emails: {len([e for e in current_emails if '@company.com' in e.get('from_email', '')])}
+• Personal: {len([e for e in current_emails if not any(kw in e.get('from_email', '').lower() for kw in ['newsletter', 'noreply', 'promo'])])}"""
+            
+            tool_html = format_tool_message("analyzing_emails", analysis_details, "complete")
+            chat_history = chat_history + [{"role": "assistant", "content": tool_html}]
+            
+            yield (chat_history, "", create_interactive_rule_cards(pending_rules),
+                   "Analyzing emails...", pending_rules, rule_counter)
+            
+            # Small pause for effect
+            time.sleep(0.5)
+        
+        # Get rule state
+        rule_state = {
+            'proposedRules': [r for r in pending_rules if r['status'] == 'pending'],
+            'activeRules': applied_rules,
+            'rejectedRules': [r for r in pending_rules if r['status'] == 'rejected']
+        }
+        
+        # For simple messages, use non-streaming
+        if not should_analyze:
+            response_data = process_agent_message(
+                user_message=user_message,
+                emails=current_emails,
+                conversation_history=[m for m in chat_history[:-1]],
+                rule_state=rule_state
+            )
+            
+            response_text = response_data.get('response', '')
+            extracted_rules = response_data.get('rules', [])
+        else:
+            # For analysis, use streaming
+            from .agent_streaming import analyze_emails_streaming
+            
+            # Start streaming analysis
+            streaming_msg = {"role": "assistant", "content": ""}
+            temp_history = chat_history + [streaming_msg]
+            
+            response_text = ""
+            extracted_rules = []
+            
+            # Stream the analysis
+            for output in analyze_emails_streaming(current_emails):
+                if output['type'] == 'token':
+                    response_text = output['full_response']
+                    streaming_msg["content"] = response_text
+                    yield (temp_history, "", create_interactive_rule_cards(pending_rules),
+                           "Analyzing...", pending_rules, rule_counter)
+                elif output['type'] == 'rules':
+                    extracted_rules = output['rules']
+                    response_text = output['full_response']
+                elif output['type'] == 'error':
+                    response_text = f"Error: {output['content']}"
+                    break
+        
+        # Show rule creation if needed
+        if extracted_rules:
+            rules_details = f"""Created {len(extracted_rules)} rules:
+
+"""
+            for rule in extracted_rules:
+                rules_details += f"📋 {rule['name']}\n"
+                rules_details += f"   {rule['description']}\n"
+                rules_details += f"   Confidence: {rule.get('confidence', 0.8)*100:.0f}%\n\n"
+            
+            tool_html = format_tool_message("creating_rules", rules_details, "complete")
+            chat_history = chat_history + [{"role": "assistant", "content": tool_html}]
+            
+            yield (chat_history, "", create_interactive_rule_cards(pending_rules),
+                   "Creating rules...", pending_rules, rule_counter)
+            
+            time.sleep(0.3)
+        
+        # Update rules
+        updated_pending_rules = pending_rules.copy()
+        for rule in extracted_rules:
+            if not any(r.get('rule_id') == rule.get('rule_id') for r in updated_pending_rules):
+                rule['status'] = 'pending'
+                rule['id'] = rule.get('rule_id', f'rule_{rule_counter}')
+                updated_pending_rules.append(rule)
+                rule_counter += 1
+        
+        # Clean response
+        clean_response = response_text
+        if "<!-- RULES_JSON_START" in clean_response:
+            clean_response = clean_response.split("<!-- RULES_JSON_START")[0].strip()
+        
+        # Only do character streaming for non-analyzed messages
+        if not should_analyze:
+            streaming_msg = {"role": "assistant", "content": ""}
+            temp_history = chat_history + [streaming_msg]
+            
+            # Stream in chunks
+            chunk_size = 5  # Characters per update
+            for i in range(0, len(clean_response), chunk_size):
+                streaming_msg["content"] = clean_response[:i+chunk_size]
+                yield (temp_history, "", create_interactive_rule_cards(updated_pending_rules),
+                       "Typing...", updated_pending_rules, rule_counter)
+                time.sleep(0.01)  # Fast streaming
+        
+        # Final message
+        chat_history = chat_history + [{"role": "assistant", "content": clean_response}]
+        
+        status = f"✅ Found {len(extracted_rules)} rules" if extracted_rules else "Complete"
+        yield (chat_history, "", create_interactive_rule_cards(updated_pending_rules),
+               status, updated_pending_rules, rule_counter)
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        chat_history = chat_history + [{"role": "assistant", "content": error_msg}]
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules),
+               error_msg, pending_rules, rule_counter)

archive/ui_old/handlers/__init__.py

@@ -0,0 +1,7 @@
+"""
+UI event handlers
+"""
+
+from .preview import handle_preview_rule
+
+__all__ = ['handle_preview_rule']

archive/ui_old/handlers/preview.py

@@ -0,0 +1,123 @@
+"""
+Preview handler that properly delegates to MCP backend
+"""
+
+import gradio as gr
+from typing import List, Dict, Any, Tuple
+
+
+def handle_preview_rule(
+    rule_id: str,
+    sort_option: str,
+    search_query: str,
+    mcp_client: Any,
+    pending_rules: List[Dict[str, Any]],
+    current_emails: List[Dict[str, Any]],
+    sample_emails: List[Dict[str, Any]],
+    preview_emails: List[Dict[str, Any]]
+) -> Tuple:
+    """
+    Handle rule preview by delegating to MCP backend
+    
+    Returns all 7 outputs expected by the UI:
+    1. folder_dropdown update
+    2. email_display HTML
+    3. rule_cards HTML
+    4. preview_banner HTML
+    5. status_msg
+    6. pending_rules state
+    7. current_emails state
+    """
+    from ..utils.display import create_interactive_rule_cards, create_preview_banner, create_email_html
+    from ..utils.helpers import get_preview_rules_count, get_folder_dropdown_choices, filter_emails
+    
+    # Validate input
+    if not rule_id or rule_id.strip() == "":
+        return (
+            gr.update(),  # No dropdown change
+            create_email_html(current_emails),
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(0),
+            "❌ Error: No rule ID provided",
+            pending_rules,
+            current_emails
+        )
+    
+    # Find the rule
+    rule = next((r for r in pending_rules if r["id"] == rule_id), None)
+    if not rule:
+        return (
+            gr.update(),
+            create_email_html(current_emails),
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(0),
+            f"❌ Rule not found: {rule_id}",
+            pending_rules,
+            current_emails
+        )
+    
+    try:
+        # Call MCP backend to get preview
+        preview_response = mcp_client.preview_rule(rule)
+        
+        if preview_response.get('success', False):
+            # Mark rule as in preview
+            rule["status"] = "preview"
+            
+            # Get the affected emails from backend
+            affected_emails = preview_response.get('affected_emails', [])
+            
+            # If we got emails, use them for display
+            if affected_emails:
+                display_emails = affected_emails
+            else:
+                # Fallback to current emails
+                display_emails = current_emails
+            
+            # Get folder choices from the emails we're displaying
+            folder_choices = get_folder_dropdown_choices(display_emails)
+            if not folder_choices:
+                folder_choices = ["Inbox (0)"]
+            
+            # Filter and create display
+            folder_value = folder_choices[0]
+            filtered = filter_emails(folder_value, search_query, sort_option, display_emails)
+            email_html = create_email_html(filtered, folder_value)
+            
+            # Create status message
+            stats = preview_response.get('statistics', {})
+            status_msg = f"👁️ Preview: {stats.get('matched_count', 0)} emails would be affected"
+            
+            return (
+                gr.update(choices=folder_choices, value=folder_value),
+                email_html,
+                create_interactive_rule_cards(pending_rules),
+                create_preview_banner(get_preview_rules_count(pending_rules)),
+                status_msg,
+                pending_rules,
+                display_emails  # Update current emails to preview data
+            )
+        else:
+            # Backend preview failed
+            return (
+                gr.update(),
+                create_email_html(current_emails),
+                create_interactive_rule_cards(pending_rules),
+                create_preview_banner(0),
+                "❌ Preview failed - backend error",
+                pending_rules,
+                current_emails
+            )
+            
+    except Exception as e:
+        print(f"Error in preview handler: {e}")
+        # Return safe defaults on error
+        return (
+            gr.update(),
+            create_email_html(current_emails),
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(0),
+            f"❌ Error: {str(e)}",
+            pending_rules,
+            current_emails
+        )

archive/ui_old/main.py

@@ -0,0 +1,769 @@
+"""
+UI Components for Email Rule Agent - Refactored with proper session management
+Self-contained implementation with all necessary functions
+"""
+
+import gradio as gr
+import os
+import json
+import uuid
+from datetime import datetime
+from typing import List, Dict, Any, Tuple
+
+# Import UI utility functions
+from .ui.utils import (
+    create_email_html,
+    create_interactive_rule_cards,
+    create_preview_banner,
+    filter_emails,
+    get_folder_dropdown_choices,
+    get_preview_rules_count
+)
+from .ui.utils.display import (
+    load_email_data,
+    get_folder_counts,
+    extract_folder_name,
+    format_date,
+    sort_emails
+)
+from .ui.handlers import handle_preview_rule
+
+# Data paths
+DATA_PATH = "./data/emails.json"
+PREVIEW_DATA_PATH = "./data/preview_emails.json"
+RULES_DATA_PATH = "./data/rules.json"
+
+# Import agent
+from .simple_agent import process_chat_message as process_agent_message
+from .ui_streaming import process_chat_message_streaming
+from .ui_chat import process_chat_with_tools
+from .ui_streaming_fixed import process_chat_streaming
+
+# Import MCP client  
+from .mcp_client import MCPClient
+
+
+def load_rules_from_json(file_path=RULES_DATA_PATH):
+    """
+    Load rules from JSON file and convert them to the internal format.
+    Returns tuple of (loaded_rules, rule_counter)
+    """
+    try:
+        if not os.path.exists(file_path):
+            print(f"Warning: {file_path} not found.")
+            return [], 0
+        
+        with open(file_path, 'r', encoding='utf-8') as f:
+            rules_data = json.load(f)
+        
+        loaded_rules = []
+        rule_counter = 0
+        
+        for rule_data in rules_data.get("rules", []):
+            conditions = []
+            for condition in rule_data.get("conditions", []):
+                condition_text = f"{condition.get('type', 'field')} {condition.get('operator', 'contains')} '{condition.get('value', '')}'"  
+                conditions.append(condition_text)
+            
+            actions = []
+            for action in rule_data.get("actions", []):
+                action_text = f"{action.get('operation', 'apply')} {action.get('type', 'action')} '{action.get('value', '')}'"  
+                actions.append(action_text)
+            
+            rule = {
+                "id": rule_data.get("rule_id", f"rule_{rule_counter}"),
+                "name": rule_data.get("name", "Unnamed Rule"),
+                "description": rule_data.get("description", "No description available"),
+                "conditions": conditions,
+                "actions": actions,
+                "impact": rule_data.get("impact", "This rule will process emails"),
+                "status": "pending",
+                "keywords": rule_data.get("keywords", []),
+                "created_at": rule_data.get("created_at", datetime.now().isoformat())
+            }
+            
+            loaded_rules.append(rule)
+            rule_counter += 1
+        
+        print(f"Successfully loaded {len(loaded_rules)} rules from {file_path}")
+        return loaded_rules, rule_counter
+        
+    except Exception as e:
+        print(f"Error loading rules from {file_path}: {e}")
+        return [], 0
+
+
+def preview_rule_with_mcp(rule_id, sort_option, search_query, mcp_client, 
+                         pending_rules, current_emails, sample_emails, preview_emails):
+    """Handle rule preview using MCP client - properly returns all expected outputs"""
+    
+    if not rule_id or rule_id.strip() == "":
+        # Return all 7 outputs as expected by the click handler
+        return (gr.update(),  # folder_dropdown
+                create_email_html(current_emails),  # email_display
+                create_interactive_rule_cards(pending_rules),  # rule_cards
+                create_preview_banner(get_preview_rules_count(pending_rules)),  # preview_banner
+                "❌ Error: No rule ID provided",  # status_msg
+                pending_rules,  # pending_rules_state
+                current_emails)  # current_emails_state
+    
+    rule = next((r for r in pending_rules if r["id"] == rule_id), None)
+    if rule:
+        try:
+            # Call Modal backend to preview rule
+            preview_response = mcp_client.preview_rule(rule)
+            
+            if preview_response.get('success', False):
+                # Update local preview emails with the result
+                preview_emails = preview_response.get('affected_emails', preview_emails)
+                current_emails = preview_emails
+                
+                rule["status"] = "preview"
+                print(f"Previewing rule: {rule['name']} (ID: {rule_id})")
+                
+                new_folder_choices = get_folder_dropdown_choices(current_emails)
+                new_folder_value = new_folder_choices[0] if new_folder_choices else "Inbox (0)"
+                filtered_emails = filter_emails(new_folder_value, search_query, sort_option, current_emails)
+                new_email_display = create_email_html(filtered_emails, new_folder_value)
+                
+                stats = preview_response.get('statistics', {})
+                status_msg = f"👁️ Preview: {stats.get('matched_count', 0)} emails would be affected"
+                
+                return (gr.update(choices=new_folder_choices, value=new_folder_value), 
+                        new_email_display, 
+                        create_interactive_rule_cards(pending_rules), 
+                        create_preview_banner(get_preview_rules_count(pending_rules)), 
+                        status_msg,
+                        pending_rules, current_emails)
+            else:
+                # Fallback to local preview
+                return preview_rule(rule_id, sort_option, search_query, pending_rules, current_emails, sample_emails, preview_emails)
+                
+        except Exception as e:
+            print(f"Error calling MCP preview: {e}")
+            # Fallback to local preview
+            return preview_rule(rule_id, sort_option, search_query, pending_rules, current_emails, sample_emails, preview_emails)
+    
+    # Return in correct order for outputs
+    return (gr.update(),  # folder_dropdown - no change
+            create_email_html(current_emails),  # email_display
+            create_interactive_rule_cards(pending_rules),  # rule_cards
+            create_preview_banner(get_preview_rules_count(pending_rules)),  # preview_banner
+            f"❌ Rule not found: {rule_id}",  # status_msg
+            pending_rules, current_emails)  # states
+
+
+def preview_rule(rule_id, sort_option, search_query, pending_rules, current_emails, sample_emails, preview_emails):
+    """Handle rule preview - set status to preview and switch to preview emails (fallback)"""
+    
+    if not rule_id or rule_id.strip() == "":
+        # Return in the correct order matching the outputs
+        return (gr.update(),  # folder_dropdown - no change
+                create_email_html(current_emails),  # email_display
+                create_interactive_rule_cards(pending_rules),  # rule_cards
+                create_preview_banner(get_preview_rules_count(pending_rules)),  # preview_banner
+                "❌ Error: No rule ID provided",  # status_msg
+                pending_rules, current_emails)  # states
+    
+    rule = next((r for r in pending_rules if r["id"] == rule_id), None)
+    if rule:
+        rule["status"] = "preview"
+        print(f"Previewing rule: {rule['name']} (ID: {rule_id})")
+        
+        # Switch to preview emails - ensure they have data
+        if preview_emails:
+            current_emails = preview_emails
+        new_folder_choices = get_folder_dropdown_choices(current_emails)
+        # If no folders found, ensure we have at least Inbox
+        if not new_folder_choices:
+            new_folder_choices = ["Inbox (0)"]
+        new_folder_value = new_folder_choices[0]
+        filtered_emails = filter_emails(new_folder_value, search_query, sort_option, current_emails)
+        new_email_display = create_email_html(filtered_emails, new_folder_value)
+        
+        return (gr.update(choices=new_folder_choices, value=new_folder_value), 
+                new_email_display, 
+                create_interactive_rule_cards(pending_rules), 
+                create_preview_banner(get_preview_rules_count(pending_rules)), 
+                f"👁️ Previewing rule: {rule['name']}",
+                pending_rules, current_emails)
+    
+    # Return in correct order for outputs
+    return (gr.update(),  # folder_dropdown - no change
+            create_email_html(current_emails),  # email_display
+            create_interactive_rule_cards(pending_rules),  # rule_cards
+            create_preview_banner(get_preview_rules_count(pending_rules)),  # preview_banner
+            f"❌ Rule not found: {rule_id}",  # status_msg
+            pending_rules, current_emails)  # states
+
+
+def accept_rule_with_mcp(rule_id, mcp_client, current_folder, sort_option, search_query,
+                        pending_rules, applied_rules, current_emails, sample_emails):
+    """Handle rule acceptance using MCP client and update email display"""
+    
+    if not rule_id or rule_id.strip() == "":
+        filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+        return (create_interactive_rule_cards(pending_rules), 
+                create_preview_banner(get_preview_rules_count(pending_rules)), 
+                "❌ Error: No rule ID provided",
+                create_email_html(filtered_emails, current_folder),
+                gr.update(choices=get_folder_dropdown_choices(current_emails)),
+                pending_rules, applied_rules, current_emails, sample_emails)
+    
+    for rule in pending_rules:
+        if rule["id"] == rule_id:
+            try:
+                # Apply rule via MCP client
+                apply_response = mcp_client.apply_rule(rule, preview=False)
+                
+                if apply_response.get('success', False):
+                    # Save rule to backend
+                    mcp_client.save_rule(rule)
+                    
+                    rule["status"] = "accepted"
+                    applied_rules.append(rule.copy())
+                    
+                    # Update emails if provided
+                    if 'updated_emails' in apply_response:
+                        sample_emails = apply_response['updated_emails']
+                        current_emails = sample_emails
+                    
+                    # Exit preview mode if we were in it
+                    for r in pending_rules:
+                        if r["status"] == "preview":
+                            r["status"] = "pending"
+                    
+                    stats = apply_response.get('statistics', {})
+                    status_msg = f"✅ Rule applied: {stats.get('processed_count', 0)} emails processed"
+                    
+                    # Update email display with new data
+                    new_folder_choices = get_folder_dropdown_choices(current_emails)
+                    filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+                    
+                    print(f"Rule accepted and applied: {rule['name']} (ID: {rule_id})")
+                    return (create_interactive_rule_cards(pending_rules), 
+                            create_preview_banner(get_preview_rules_count(pending_rules)), 
+                            status_msg,
+                            create_email_html(filtered_emails, current_folder),
+                            gr.update(choices=new_folder_choices),
+                            pending_rules, applied_rules, current_emails, sample_emails)
+                else:
+                    # Fallback to local acceptance
+                    result = accept_rule(rule_id, pending_rules, applied_rules)
+                    filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+                    return result + (create_email_html(filtered_emails, current_folder), 
+                                   gr.update(),
+                                   pending_rules, applied_rules, current_emails, sample_emails)
+                    
+            except Exception as e:
+                print(f"Error calling MCP apply: {e}")
+                # Fallback to local acceptance
+                result = accept_rule(rule_id, pending_rules, applied_rules)
+                filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+                return result + (create_email_html(filtered_emails, current_folder), 
+                               gr.update(),
+                               pending_rules, applied_rules, current_emails, sample_emails)
+    
+    filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+    return (create_interactive_rule_cards(pending_rules), 
+            create_preview_banner(get_preview_rules_count(pending_rules)), 
+            f"❌ Rule not found: {rule_id}",
+            create_email_html(filtered_emails, current_folder),
+            gr.update(),
+            pending_rules, applied_rules, current_emails, sample_emails)
+
+
+def accept_rule(rule_id, pending_rules, applied_rules):
+    """Handle rule acceptance (fallback)"""
+    
+    if not rule_id or rule_id.strip() == "":
+        return (create_interactive_rule_cards(pending_rules), 
+                create_preview_banner(get_preview_rules_count(pending_rules)), 
+                "❌ Error: No rule ID provided")
+    
+    for rule in pending_rules:
+        if rule["id"] == rule_id:
+            rule["status"] = "accepted"
+            applied_rules.append(rule.copy())
+            print(f"Rule accepted: {rule['name']} (ID: {rule_id})")
+            return (create_interactive_rule_cards(pending_rules), 
+                    create_preview_banner(get_preview_rules_count(pending_rules)), 
+                    f"✅ Rule accepted: {rule['name']}")
+    
+    return (create_interactive_rule_cards(pending_rules), 
+            create_preview_banner(get_preview_rules_count(pending_rules)), 
+            f"❌ Rule not found: {rule_id}")
+
+
+def reject_rule(rule_id, pending_rules):
+    """Handle rule rejection"""
+    
+    if not rule_id or rule_id.strip() == "":
+        return (create_interactive_rule_cards(pending_rules), 
+                create_preview_banner(get_preview_rules_count(pending_rules)), 
+                "❌ Error: No rule ID provided",
+                pending_rules)
+    
+    for rule in pending_rules:
+        if rule["id"] == rule_id:
+            rule["status"] = "rejected"
+            print(f"Rule rejected: {rule['name']} (ID: {rule_id})")
+            return (create_interactive_rule_cards(pending_rules), 
+                    create_preview_banner(get_preview_rules_count(pending_rules)), 
+                    f"❌ Rule rejected: {rule['name']}",
+                    pending_rules)
+    
+    return (create_interactive_rule_cards(pending_rules), 
+            create_preview_banner(get_preview_rules_count(pending_rules)), 
+            f"❌ Rule not found: {rule_id}",
+            pending_rules)
+
+
+def exit_preview_mode(sort_option, search_query, pending_rules, current_emails, sample_emails):
+    """Exit preview mode by setting all preview rules back to pending"""
+    
+    for rule in pending_rules:
+        if rule["status"] == "preview":
+            rule["status"] = "pending"
+    current_emails = sample_emails
+    
+    new_folder_choices = get_folder_dropdown_choices(current_emails)
+    new_folder_value = new_folder_choices[0] if new_folder_choices else "Inbox (0)"
+    filtered_emails = filter_emails(new_folder_value, search_query, sort_option, current_emails)
+    new_email_display = create_email_html(filtered_emails, new_folder_value)
+    
+    return (gr.update(choices=new_folder_choices, value=new_folder_value), 
+            new_email_display, 
+            create_interactive_rule_cards(pending_rules), 
+            create_preview_banner(get_preview_rules_count(pending_rules)), 
+            "🔄 Exited preview mode",
+            pending_rules, current_emails)
+
+
+def get_preview_rules_count(pending_rules):
+    """Get the number of rules currently in preview status"""
+    return len([rule for rule in pending_rules if rule["status"] == "preview"])
+
+
+def create_app(modal_url: str) -> gr.Blocks:
+    """
+    Create the main Gradio app
+    
+    Args:
+        modal_url: URL of the Modal backend server
+        
+    Returns:
+        Gradio Blocks app
+    """
+    
+    # Create the Gradio interface
+    with gr.Blocks(title="Email Rule Agent", theme=gr.themes.Soft()) as demo:
+        # Initialize state variables
+        session_id = gr.State(value=str(uuid.uuid4()))
+        mcp_client_state = gr.State()
+        
+        # Email state
+        sample_emails_state = gr.State([])
+        preview_emails_state = gr.State([])
+        current_emails_state = gr.State([])
+        
+        # Rule state
+        pending_rules_state = gr.State([])
+        applied_rules_state = gr.State([])
+        rule_counter_state = gr.State(0)
+        
+        gr.Markdown("# 📧 Email Rule Agent")
+        gr.Markdown("*Intelligent email management powered by AI*")
+        
+        # Add login choice
+        with gr.Row(visible=True) as login_row:
+            with gr.Column():
+                gr.Markdown("## Welcome! Choose how to get started:")
+                with gr.Row():
+                    demo_btn = gr.Button("🎮 Try with Demo Data", variant="primary", scale=1)
+                    gmail_btn = gr.Button("📧 Login with Gmail", variant="secondary", scale=1)
+        
+        # Main interface (initially hidden)
+        with gr.Row(visible=False) as main_interface:
+            # Left side - Chat Interface
+            with gr.Column(scale=4):
+                with gr.Tabs():
+                    with gr.Tab("💬 Chat"):
+                        chatbot = gr.Chatbot(
+                            value=[],
+                            type="messages",
+                            placeholder="Welcome! I can help you organize your emails. Try:\n• 'Analyze my inbox'\n• 'Create a rule for newsletters'\n• 'Move work emails to a folder'",
+                            render_markdown=True,
+                            sanitize_html=False  # Allow our custom HTML for tool messages
+                        )
+                        
+                        with gr.Row():
+                            msg_input = gr.Textbox(
+                                placeholder="Describe how you want to organize your emails...",
+                                container=False,
+                                scale=4
+                            )
+                            send_btn = gr.Button("Send", scale=1, variant="primary")
+                        
+                        # Quick action buttons
+                        with gr.Row():
+                            analyze_btn = gr.Button("🔍 Analyze Inbox", scale=1, size="sm")
+                            suggest_btn = gr.Button("💡 Suggest Rules", scale=1, size="sm")
+                    
+                    with gr.Tab("📋 Rules"):
+                        gr.Markdown("### 📋 Email Rules")
+                        
+                        # Hidden components for JavaScript interaction
+                        with gr.Row(visible=False):
+                            preview_btn = gr.Button("Preview", elem_id="hidden_preview_btn")
+                            accept_btn = gr.Button("Accept", elem_id="hidden_accept_btn")
+                            reject_btn = gr.Button("Reject", elem_id="hidden_reject_btn")
+                            exit_preview_btn = gr.Button("Exit Preview", elem_id="hidden_exit_preview_btn")
+                        
+                        current_rule_id = gr.Textbox(visible=False, elem_id="current_rule_id")
+                        status_msg = gr.Textbox(
+                            label="Status",
+                            placeholder="Ready...",
+                            interactive=False,
+                            visible=True
+                        )
+                        
+                        # Rule cards display
+                        rule_cards = gr.HTML(create_interactive_rule_cards([]))
+            
+            # Right side - Email Display
+            with gr.Column(scale=6):
+                # Preview banner
+                preview_banner = gr.HTML(create_preview_banner(0))
+                
+                # Email controls
+                with gr.Row():
+                    folder_dropdown = gr.Dropdown(
+                        choices=["Inbox (0)"],
+                        value="Inbox (0)",
+                        container=False,
+                        scale=2
+                    )
+                    search_box = gr.Textbox(
+                        placeholder="Search emails...",
+                        container=False,
+                        scale=3
+                    )
+                    sort_dropdown = gr.Dropdown(
+                        choices=["Newest First", "Oldest First"],
+                        value="Newest First",
+                        container=False,
+                        scale=1
+                    )
+                
+                # Email list
+                email_display = gr.HTML(
+                    value=create_email_html([])
+                )
+        
+        # Initialize data on load
+        def initialize_app(session_id):
+            """Initialize app with data and MCP client"""
+            # Initialize MCP client
+            mcp_client = MCPClient(modal_url, session_token=session_id)
+            
+            # Load initial data
+            sample_emails, _ = load_email_data(DATA_PATH)
+            preview_emails, _ = load_email_data(PREVIEW_DATA_PATH)
+            current_emails = sample_emails
+            loaded_rules, rule_counter = load_rules_from_json()
+            
+            # Update UI components
+            folder_choices = get_folder_dropdown_choices(current_emails)
+            initial_folder = folder_choices[0] if folder_choices else "Inbox (0)"
+            initial_email_html = create_email_html(current_emails)
+            initial_rule_cards = create_interactive_rule_cards(loaded_rules)
+            initial_preview_banner = create_preview_banner(get_preview_rules_count(loaded_rules))
+            
+            return (
+                mcp_client,  # mcp_client_state
+                sample_emails,  # sample_emails_state
+                preview_emails,  # preview_emails_state
+                current_emails,  # current_emails_state
+                loaded_rules,  # pending_rules_state
+                [],  # applied_rules_state
+                rule_counter,  # rule_counter_state
+                gr.update(choices=folder_choices, value=initial_folder),  # folder_dropdown
+                initial_email_html,  # email_display
+                initial_rule_cards,  # rule_cards
+                initial_preview_banner  # preview_banner
+            )
+        
+        # Event handlers
+        def start_demo_mode(session_id):
+            # Initialize and set session to demo mode
+            results = initialize_app(session_id)
+            mcp_client = results[0]
+            mcp_client.set_mode('mock')
+            return (
+                *results,
+                gr.update(visible=False),  # login_row
+                gr.update(visible=True)  # main_interface
+            )
+        
+        def start_gmail_mode(session_id):
+            # Initialize and get Gmail OAuth URL
+            results = initialize_app(session_id)
+            mcp_client = results[0]
+            auth_url = mcp_client.get_gmail_auth_url()
+            if auth_url:
+                # In a real app, we'd redirect to this URL
+                print(f"Gmail auth URL: {auth_url}")
+            return (
+                *results,
+                gr.update(visible=False),  # login_row
+                gr.update(visible=True)  # main_interface
+            )
+        
+        demo_btn.click(
+            start_demo_mode,
+            inputs=[session_id],
+            outputs=[
+                mcp_client_state, sample_emails_state, preview_emails_state, current_emails_state,
+                pending_rules_state, applied_rules_state, rule_counter_state,
+                folder_dropdown, email_display, rule_cards, preview_banner,
+                login_row, main_interface
+            ]
+        )
+        
+        gmail_btn.click(
+            start_gmail_mode,
+            inputs=[session_id],
+            outputs=[
+                mcp_client_state, sample_emails_state, preview_emails_state, current_emails_state,
+                pending_rules_state, applied_rules_state, rule_counter_state,
+                folder_dropdown, email_display, rule_cards, preview_banner,
+                login_row, main_interface
+            ]
+        )
+        
+        # Use the streaming chat handler
+        
+        send_btn.click(
+            process_chat_streaming,
+            inputs=[msg_input, chatbot, mcp_client_state, current_emails_state,
+                   pending_rules_state, applied_rules_state, rule_counter_state],
+            outputs=[chatbot, msg_input, rule_cards, status_msg,
+                    pending_rules_state, rule_counter_state],
+            show_progress="full"  # Show progress for streaming
+        )
+        
+        msg_input.submit(
+            process_chat_streaming,
+            inputs=[msg_input, chatbot, mcp_client_state, current_emails_state,
+                   pending_rules_state, applied_rules_state, rule_counter_state],
+            outputs=[chatbot, msg_input, rule_cards, status_msg,
+                    pending_rules_state, rule_counter_state],
+            show_progress="full"
+        )
+        
+        # Quick action handlers with streaming
+        def analyze_inbox(hist, mcp, emails, pend, appl, cnt):
+            yield from process_chat_streaming(
+                "Analyze my inbox and suggest organization rules", 
+                hist, mcp, emails, pend, appl, cnt
+            )
+        
+        analyze_btn.click(
+            analyze_inbox,
+            inputs=[chatbot, mcp_client_state, current_emails_state,
+                   pending_rules_state, applied_rules_state, rule_counter_state],
+            outputs=[chatbot, msg_input, rule_cards, status_msg,
+                    pending_rules_state, rule_counter_state],
+            show_progress="full"
+        )
+        
+        def suggest_rules(hist, mcp, emails, pend, appl, cnt):
+            yield from process_chat_streaming(
+                "Suggest some email organization rules based on common patterns", 
+                hist, mcp, emails, pend, appl, cnt
+            )
+        
+        suggest_btn.click(
+            suggest_rules,
+            inputs=[chatbot, mcp_client_state, current_emails_state,
+                   pending_rules_state, applied_rules_state, rule_counter_state],
+            outputs=[chatbot, msg_input, rule_cards, status_msg,
+                    pending_rules_state, rule_counter_state],
+            show_progress="full"
+        )
+        
+        # Email display handlers
+        def update_emails(folder, sort_option, search_query, current_emails):
+            filtered_emails = filter_emails(folder, search_query, sort_option, current_emails)
+            return create_email_html(filtered_emails, folder)
+        
+        folder_dropdown.change(
+            update_emails,
+            inputs=[folder_dropdown, sort_dropdown, search_box, current_emails_state],
+            outputs=[email_display]
+        )
+        
+        sort_dropdown.change(
+            update_emails,
+            inputs=[folder_dropdown, sort_dropdown, search_box, current_emails_state],
+            outputs=[email_display]
+        )
+        
+        search_box.change(
+            update_emails,
+            inputs=[folder_dropdown, sort_dropdown, search_box, current_emails_state],
+            outputs=[email_display]
+        )
+        
+        # Rule action handlers
+        preview_btn.click(
+            handle_preview_rule,
+            inputs=[current_rule_id, sort_dropdown, search_box, mcp_client_state,
+                   pending_rules_state, current_emails_state, sample_emails_state, preview_emails_state],
+            outputs=[folder_dropdown, email_display, rule_cards, preview_banner, status_msg,
+                    pending_rules_state, current_emails_state]
+        )
+        
+        accept_btn.click(
+            lambda rule_id, folder, sort, search, mcp, pend, appl, curr, samp: accept_rule_with_mcp(
+                rule_id, mcp, folder, sort, search, pend, appl, curr, samp),
+            inputs=[current_rule_id, folder_dropdown, sort_dropdown, search_box, mcp_client_state,
+                   pending_rules_state, applied_rules_state, current_emails_state, sample_emails_state],
+            outputs=[rule_cards, preview_banner, status_msg, email_display, folder_dropdown,
+                    pending_rules_state, applied_rules_state, current_emails_state, sample_emails_state]
+        )
+        
+        reject_btn.click(
+            reject_rule,
+            inputs=[current_rule_id, pending_rules_state],
+            outputs=[rule_cards, preview_banner, status_msg, pending_rules_state]
+        )
+        
+        exit_preview_btn.click(
+            lambda sort, search, pend, curr, samp: exit_preview_mode(sort, search, pend, curr, samp),
+            inputs=[sort_dropdown, search_box, pending_rules_state, current_emails_state, sample_emails_state],
+            outputs=[folder_dropdown, email_display, rule_cards, preview_banner, status_msg,
+                    pending_rules_state, current_emails_state]
+        )
+        
+        # Load JavaScript handlers
+        demo.load(
+            None,
+            inputs=None,
+            outputs=None,
+            js=get_javascript_handlers()
+        )
+    
+    return demo
+
+
+def launch_app(demo: gr.Blocks):
+    """Launch the Gradio app"""
+    demo.launch()
+
+
+def get_javascript_handlers():
+    """Get JavaScript code for handling UI interactions"""
+    return """
+    () => {
+        function setupButtonHandlers() {
+            // Remove existing listeners to prevent duplicates
+            document.removeEventListener('click', globalClickHandler);
+            
+            // Add global click handler
+            document.addEventListener('click', globalClickHandler);
+        }
+        
+        function globalClickHandler(e) {
+            if (e.target.classList.contains('preview-btn')) {
+                e.preventDefault();
+                handleRuleAction('preview', e.target.getAttribute('data-rule-id'));
+            } else if (e.target.classList.contains('accept-btn')) {
+                e.preventDefault();
+                handleRuleAction('accept', e.target.getAttribute('data-rule-id'));
+            } else if (e.target.classList.contains('reject-btn')) {
+                e.preventDefault();
+                handleRuleAction('reject', e.target.getAttribute('data-rule-id'));
+            } else if (e.target.id === 'exit-preview-btn') {
+                e.preventDefault();
+                handleExitPreview();
+            }
+        }
+        
+        function handleExitPreview() {
+            console.log('Exit preview button clicked');
+            const exitButton = document.getElementById('hidden_exit_preview_btn');
+            if (exitButton) {
+                exitButton.click();
+            } else {
+                console.error('Hidden exit preview button not found');
+            }
+        }
+        
+        function handleRuleAction(action, ruleId) {
+            console.log(`handleRuleAction called with action: ${action}, ruleId: ${ruleId}`);
+            
+            if (!ruleId) {
+                console.error('No ruleId provided');
+                return;
+            }
+            
+            // Find the hidden textbox
+            const container = document.getElementById('current_rule_id');
+            let ruleIdInput = null;
+            
+            if (container) {
+                ruleIdInput = container.querySelector('input, textarea');
+            }
+            
+            if (ruleIdInput) {
+                console.log(`Setting rule ID input to: ${ruleId}`);
+                ruleIdInput.value = ruleId;
+                
+                // Dispatch events
+                ruleIdInput.dispatchEvent(new Event('input', { bubbles: true }));
+                ruleIdInput.dispatchEvent(new Event('change', { bubbles: true }));
+                
+                // Trigger the appropriate button after a delay
+                setTimeout(() => {
+                    let targetButton;
+                    if (action === 'preview') {
+                        targetButton = document.getElementById('hidden_preview_btn');
+                    } else if (action === 'accept') {
+                        targetButton = document.getElementById('hidden_accept_btn');
+                    } else if (action === 'reject') {
+                        targetButton = document.getElementById('hidden_reject_btn');
+                    }
+                    
+                    if (targetButton) {
+                        console.log(`Clicking ${action} button`);
+                        targetButton.click();
+                    } else {
+                        console.error(`Target button not found for action: ${action}`);
+                    }
+                }, 150);
+            } else {
+                console.error('Rule ID input field not found');
+            }
+        }
+        
+        // Setup handlers immediately
+        setupButtonHandlers();
+        
+        // Also setup handlers when the rule cards are updated
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'childList') {
+                    setupButtonHandlers();
+                }
+            });
+        });
+        
+        // Observe changes to the document body
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+    }
+    """

archive/ui_old/utils/__init__.py

@@ -0,0 +1,26 @@
+"""
+UI utility functions
+"""
+
+from .display import (
+    create_email_html,
+    create_interactive_rule_cards,
+    create_preview_banner,
+    get_folder_counts,
+    filter_emails
+)
+
+from .helpers import (
+    get_preview_rules_count,
+    get_folder_dropdown_choices
+)
+
+__all__ = [
+    'create_email_html',
+    'create_interactive_rule_cards', 
+    'create_preview_banner',
+    'get_folder_counts',
+    'filter_emails',
+    'get_preview_rules_count',
+    'get_folder_dropdown_choices'
+]

archive/ui_old/utils/display.py

@@ -0,0 +1,351 @@
+"""
+UI utility functions extracted from gradio/app.py
+Making the UI component self-contained
+"""
+
+import os
+import json
+from datetime import datetime
+from collections import defaultdict
+from typing import List, Dict, Any, Tuple
+
+
+def load_email_data(file_path: str) -> Tuple[List[Dict], str]:
+    """Load email data from JSON file"""
+    try:
+        if os.path.exists(file_path):
+            with open(file_path, 'r', encoding='utf-8') as file:
+                mail_list = json.load(file)
+            return mail_list, f"Successfully loaded {len(mail_list)} emails"
+        else:
+            return [], f"File not found: {file_path}"
+    except json.JSONDecodeError as e:
+        return [], f"Error parsing JSON: {str(e)}"
+    except Exception as e:
+        return [], f"Error reading file: {str(e)}"
+
+
+def get_folder_counts(emails: List[Dict]) -> List[Tuple[str, int]]:
+    """Extract unique folders and their counts from email data"""
+    folder_counts = defaultdict(int)
+    
+    for email in emails:
+        if 'folder' in email and email['folder']:
+            folder_counts[email['folder']] += 1
+        else:
+            folder_counts['Inbox'] += 1
+    
+    return sorted(folder_counts.items())
+
+
+def get_folder_dropdown_choices(emails: List[Dict]) -> List[str]:
+    """Get folder choices for dropdown in format 'Folder Name (Count)'"""
+    folder_counts = get_folder_counts(emails)
+    return [f"{folder_name} ({count})" for folder_name, count in folder_counts]
+
+
+def extract_folder_name(folder_choice: str) -> str:
+    """Extract folder name from dropdown choice format 'Folder Name (Count)'"""
+    if '(' in folder_choice:
+        return folder_choice.split(' (')[0]
+    return folder_choice
+
+
+def format_date(date_string: str) -> str:
+    """Format ISO date string to readable format"""
+    try:
+        dt = datetime.fromisoformat(date_string.replace('Z', '+00:00'))
+        now = datetime.now()
+        
+        if dt.date() == now.date():
+            return dt.strftime("%H:%M")
+        elif dt.year == now.year:
+            return dt.strftime("%b %d")
+        else:
+            return dt.strftime("%b %d, %Y")
+    except:
+        return date_string
+
+
+def sort_emails(emails: List[Dict], sort_option: str) -> List[Dict]:
+    """Sort emails based on the selected sort option"""
+    if not emails:
+        return emails
+    
+    def get_email_date(email):
+        try:
+            date_str = email.get('date', '')
+            if date_str:
+                return datetime.fromisoformat(date_str.replace('Z', '+00:00'))
+            else:
+                return datetime(1970, 1, 1)
+        except:
+            return datetime(1970, 1, 1)
+    
+    if sort_option == "Newest First":
+        return sorted(emails, key=get_email_date, reverse=True)
+    elif sort_option == "Oldest First":
+        return sorted(emails, key=get_email_date, reverse=False)
+    else:
+        return emails
+
+
+def create_email_html(emails: List[Dict], selected_folder: str = "Inbox", expanded_email_id: str = None) -> str:
+    """Create HTML for email list"""
+    folder_counts = dict(get_folder_counts(emails))
+    clean_folder_name = extract_folder_name(selected_folder)
+    
+    html = """
+    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+        <div style="border: 1px solid #e1e5e9; border-radius: 8px; overflow: hidden;">
+    """
+    
+    for i, email in enumerate(emails):
+        tags_html = ""
+        folder = email.get("folder", "INBOX")
+        for label in email.get("labels", []):
+            if label.upper() == folder.upper():
+                result = "MATCH"
+            else:
+                result = "NO MATCH"
+            color = {"MATCH": "#007bff"}.get(result, "#6c757d")
+            
+            tags_html += f'<span style="background: {color}; color: white; padding: 2px 6px; border-radius: 10px; font-size: 10px; margin-right: 5px;">{label}</span>'
+        
+        border_bottom = "border-bottom: 1px solid #e1e5e9;" if i < len(emails) - 1 else ""
+        is_expanded = expanded_email_id == email.get('id')
+        
+        sender_name = email.get('from_name', email.get('from_email', 'Unknown'))
+        subject = email.get('subject', 'No Subject')
+        snippet = email.get('snippet', '')
+        formatted_date = format_date(email.get('date', ''))
+        
+        html += f"""
+        <div style="padding: 12px 15px; {border_bottom} hover:background-color: #f8f9fa; cursor: pointer;" onclick="toggleEmailExpansion('{email.get('id', f'email_{i}')}')">
+            <div style="display: flex; justify-content: space-between; align-items: flex-start;">
+                <div style="flex: 1;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+                        <span style="font-weight: 600; color: #212529;">{sender_name}</span>
+                        <div style="display: flex; align-items: center; gap: 10px;">
+                            {tags_html}
+                            <span style="color: #6c757d; font-size: 12px;">{formatted_date}</span>
+                        </div>
+                    </div>
+                    <div style="font-weight: 500; color: #495057; margin-bottom: 2px;">{subject}</div>
+                    <div style="color: #6c757d; font-size: 13px;">{snippet if not is_expanded else ''}</div>
+                    """
+        
+        if is_expanded and 'body' in email:
+            html += f"""
+                    <div style="margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #007bff;">
+                        <div style="color: #495057; line-height: 1.6; white-space: pre-line;">{email['body']}</div>
+                    </div>
+            """
+        
+        html += """
+                </div>
+            </div>
+        </div>
+        """
+    
+    html += """
+        </div>
+        <script>
+            function toggleEmailExpansion(emailId) {
+                console.log('Toggle email:', emailId);
+            }
+        </script>
+    </div>"""
+    return html
+
+
+def filter_emails(folder: str, search_query: str = "", sort_option: str = "Newest First", emails_source: List[Dict] = None) -> List[Dict]:
+    """Filter and sort emails based on folder, search query, and sort option"""
+    if emails_source is None:
+        return []
+    
+    filtered = emails_source
+    clean_folder_name = extract_folder_name(folder)
+    
+    # Filter by folder
+    folder_filtered = []
+    for email in filtered:
+        if 'folder' in email and email['folder'] == clean_folder_name:
+            folder_filtered.append(email)
+        elif not 'folder' in email and 'INBOX' == clean_folder_name:
+            folder_filtered.append(email)
+    
+    filtered = folder_filtered
+    
+    # Filter by search query
+    if search_query:
+        filtered = [email for email in filtered if 
+                   search_query.lower() in email.get('from_name', '').lower() or 
+                   search_query.lower() in email.get('from_email', '').lower() or
+                   search_query.lower() in email.get('subject', '').lower() or
+                   search_query.lower() in email.get('snippet', '').lower()]
+    
+    # Sort emails
+    filtered = sort_emails(filtered, sort_option)
+    
+    return filtered
+
+
+def create_preview_banner(preview_rules_count: int = 0) -> str:
+    """Create the preview mode banner HTML"""
+    if preview_rules_count == 0:
+        return ""
+    
+    return f"""
+    <div id="preview-banner" style="background: #fd7e14; color: white; padding: 12px 20px; margin-bottom: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; box-shadow: 0 2px 8px rgba(253, 126, 20, 0.3);">
+        <div style="display: flex; align-items: center; gap: 10px;">
+            <span style="font-size: 18px;">👁️</span>
+            <span style="font-weight: 600; font-size: 14px;">
+                Preview Mode: emails would be organized by {preview_rules_count} rule{'s' if preview_rules_count != 1 else ''}
+            </span>
+        </div>
+        <button id="exit-preview-btn" style="background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); color: white; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s;">
+            Exit Preview
+        </button>
+    </div>
+    """
+
+
+def create_interactive_rule_cards(pending_rules: List[Dict]) -> str:
+    """Create HTML for interactive rule cards display"""
+    if not pending_rules:
+        return """
+        <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 20px; text-align: center; color: #6c757d; background: #f8f9fa; border-radius: 10px; margin: 10px;">
+            <div style="font-size: 48px; margin-bottom: 10px;">📋</div>
+            <h3 style="margin: 10px 0; color: #495057;">No Pending Rules</h3>
+            <p style="margin: 0; font-size: 14px;">Ask me to analyze your inbox to get started!</p>
+        </div>
+        """
+    
+    html = f"""
+    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-height: 400px; overflow-y: auto; padding: 10px;">
+        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 0 10px;">
+            <span style="font-size: 24px;">📋</span>
+            <h3 style="color: #495057; margin: 0; font-size: 18px; font-weight: 600;">Email Rules</h3>
+            <span style="background: #e9ecef; color: #495057; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500;">
+                {len(pending_rules)} loaded
+            </span>
+        </div>
+    """
+    
+    for rule in pending_rules:
+        status_color = {
+            "pending": "#ffc107",
+            "accepted": "#28a745", 
+            "rejected": "#dc3545",
+            "preview": "#fd7e14"
+        }
+        
+        status_text = {
+            "pending": "⏳ Pending Review",
+            "accepted": "✅ Accepted",
+            "rejected": "❌ Rejected",
+            "preview": "👁️ Preview"
+        }
+        
+        conditions_html = "<br>".join([f"• {cond}" for cond in rule.get('conditions', [])])
+        actions_html = "<br>".join([f"• {action}" for action in rule.get('actions', [])])
+        
+        card_bg = "white"
+        card_opacity = "1"
+        border_color = "#e1e5e9"
+        
+        if rule['status'] == "accepted":
+            card_bg = "#d4edda"
+        elif rule['status'] == "rejected":
+            card_bg = "#f8d7da"
+            card_opacity = "0.6"
+        elif rule['status'] == "preview":
+            card_bg = "#fff3cd"
+            border_color = "#fd7e14"
+        
+        buttons_html = ""
+        if rule['status'] == "pending":
+            buttons_html = f"""
+            <div style="display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap;">
+                <button class="preview-btn" data-rule-id="{rule['id']}"
+                        style="padding: 8px 16px; border: 1px solid #007bff; background: white; color: #007bff; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s;">
+                    👁️ Preview
+                </button>
+                <button class="accept-btn" data-rule-id="{rule['id']}"
+                        style="padding: 8px 16px; border: none; background: #28a745; color: white; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s;">
+                    ✅ Accept
+                </button>
+                <button class="reject-btn" data-rule-id="{rule['id']}"
+                        style="padding: 8px 16px; border: none; background: #dc3545; color: white; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s;">
+                    ❌ Reject
+                </button>
+            </div>
+            """
+        elif rule['status'] == "preview":
+            buttons_html = f"""
+            <div style="display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap;">
+                <button class="accept-btn" data-rule-id="{rule['id']}"
+                        style="padding: 8px 16px; border: none; background: #28a745; color: white; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s;">
+                    ✅ Accept
+                </button>
+                <button class="reject-btn" data-rule-id="{rule['id']}"
+                        style="padding: 8px 16px; border: none; background: #dc3545; color: white; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s;">
+                    ❌ Reject
+                </button>
+            </div>
+            """
+        
+        # Format conditions and actions properly
+        if isinstance(rule.get('conditions'), list) and len(rule['conditions']) > 0:
+            if isinstance(rule['conditions'][0], dict):
+                # New format from agent
+                conditions_html = "<br>".join([
+                    f"• {cond.get('field', 'field')} {cond.get('operator', 'contains')} '{cond.get('value', '')}'"
+                    for cond in rule['conditions']
+                ])
+            else:
+                # Old format
+                conditions_html = "<br>".join([f"• {cond}" for cond in rule['conditions']])
+        
+        if isinstance(rule.get('actions'), list) and len(rule['actions']) > 0:
+            if isinstance(rule['actions'][0], dict):
+                # New format from agent
+                actions_html = "<br>".join([
+                    f"• {action.get('type', 'action')} to '{action.get('parameters', {}).get('folder', 'folder')}'"
+                    if action.get('type') == 'move' else f"• {action.get('type', 'action')}"
+                    for action in rule['actions']
+                ])
+            else:
+                # Old format
+                actions_html = "<br>".join([f"• {action}" for action in rule['actions']])
+        
+        html += f"""
+        <div id="rule-{rule['id']}" style="border: 2px solid {border_color}; border-radius: 12px; padding: 20px; margin: 10px 0; background: {card_bg}; opacity: {card_opacity}; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: all 0.2s;">
+            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; gap: 10px;">
+                <h4 style="margin: 0; color: #495057; font-size: 16px; font-weight: 600; flex: 1; min-width: 200px;">{rule.get('name', 'Unnamed Rule')}</h4>
+                <span style="background: {status_color[rule['status']]}; color: white; padding: 4px 10px; border-radius: 15px; font-size: 11px; font-weight: 600; text-transform: uppercase; white-space: nowrap;">
+                    {status_text[rule['status']]}
+                </span>
+            </div>
+            
+            <p style="color: #6c757d; margin: 10px 0; font-size: 14px; line-height: 1.5;">{rule.get('description', '')}</p>
+            
+            <div style="margin: 15px 0;">
+                <strong style="color: #495057; font-size: 13px; display: block; margin-bottom: 6px;">🎯 Conditions:</strong>
+                <div style="margin-left: 10px; font-size: 12px; color: #6c757d; line-height: 1.6; background: #f8f9fa; padding: 8px; border-radius: 6px;">{conditions_html}</div>
+            </div>
+            
+            <div style="margin: 15px 0;">
+                <strong style="color: #495057; font-size: 13px; display: block; margin-bottom: 6px;">⚡ Actions:</strong>
+                <div style="margin-left: 10px; font-size: 12px; color: #6c757d; line-height: 1.6; background: #f8f9fa; padding: 8px; border-radius: 6px;">{actions_html}</div>
+            </div>
+            
+            {buttons_html}
+        </div>
+        """
+    
+    html += """
+    </div>
+    """
+    return html

archive/ui_old/utils/helpers.py

@@ -0,0 +1,29 @@
+"""
+Helper functions extracted from display utilities
+"""
+
+from typing import List, Dict, Any
+
+
+def get_preview_rules_count(pending_rules: List[Dict[str, Any]]) -> int:
+    """Get the number of rules currently in preview status"""
+    return len([rule for rule in pending_rules if rule.get("status") == "preview"])
+
+
+def get_folder_dropdown_choices(emails: List[Dict[str, Any]]) -> List[str]:
+    """
+    Get folder choices for dropdown in format 'Folder Name (Count)'
+    Moved here to avoid circular imports
+    """
+    from .display import get_folder_counts
+    
+    folder_counts = get_folder_counts(emails)
+    return [f"{folder_name} ({count})" for folder_name, count in folder_counts]
+
+
+def filter_emails(folder: str, search_query: str, sort_option: str, emails: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+    """
+    Delegate to display module's filter_emails
+    """
+    from .display import filter_emails as display_filter_emails
+    return display_filter_emails(folder, search_query, sort_option, emails)

components/__init__.py

@@ -0,0 +1 @@
+# Components package for Email Rule Agent

components/agent_streaming.py

@@ -0,0 +1,145 @@
+"""
+Streaming version of the agent that yields tokens as they come
+"""
+
+import os
+import json
+import re
+from typing import Generator, Dict, Any, List
+from langchain_openai import ChatOpenAI
+from langchain.schema import HumanMessage, SystemMessage
+from langchain.callbacks.base import BaseCallbackHandler
+
+
+class StreamingCallbackHandler(BaseCallbackHandler):
+    """Callback handler for streaming LLM responses"""
+    
+    def __init__(self):
+        self.tokens = []
+        self.current_token = ""
+        
+    def on_llm_new_token(self, token: str, **kwargs) -> None:
+        """Called when LLM generates a new token"""
+        self.current_token = token
+        self.tokens.append(token)
+
+
+def analyze_emails_streaming(
+    emails: List[Dict[str, Any]], 
+    focus_area: str = "all types"
+) -> Generator[Dict[str, Any], None, None]:
+    """Analyze emails and stream the response"""
+    
+    if not emails:
+        yield {
+            'type': 'error',
+            'content': "No emails available to analyze."
+        }
+        return
+    
+    # Prepare email summaries
+    email_summaries = []
+    for e in emails[:30]:
+        email_summaries.append({
+            'from': e.get('from_name', ''),
+            'subject': e.get('subject', ''),
+            'preview': (e.get('body', '')[:150] + '...') if len(e.get('body', '')) > 150 else e.get('body', '')
+        })
+    
+    prompt = f"""Analyze these {len(email_summaries)} email samples and propose 3-5 organization rules.
+
+Focus area: {focus_area}
+
+Email samples:
+{json.dumps(email_summaries, indent=2)}
+
+Create practical rules and explain your reasoning. Then provide a JSON block with this structure:
+{{
+    "rules": [
+        {{
+            "name": "Rule name",
+            "description": "What this rule does",
+            "confidence": 0.8,
+            "conditions": [{{"field": "from", "operator": "contains", "value": "example.com"}}],
+            "actions": [{{"type": "move", "folder": "work"}}]
+        }}
+    ]
+}}"""
+    
+    try:
+        api_key = os.getenv('OPENROUTER_API_KEY')
+        if not api_key:
+            yield {'type': 'error', 'content': 'API key not configured'}
+            return
+        
+        # Create streaming LLM
+        llm = ChatOpenAI(
+            openai_api_key=api_key,
+            openai_api_base="https://openrouter.ai/api/v1",
+            model_name='google/gemini-2.5-flash-preview-05-20',
+            temperature=0.7,
+            streaming=True
+        )
+        
+        # Create callback handler
+        callback = StreamingCallbackHandler()
+        
+        # Start streaming
+        messages = [
+            SystemMessage(content="You are an email pattern analyzer. Explain your analysis, then provide JSON."),
+            HumanMessage(content=prompt)
+        ]
+        
+        # Stream tokens
+        full_response = ""
+        for chunk in llm.stream(messages, config={"callbacks": [callback]}):
+            token = chunk.content
+            full_response += token
+            
+            yield {
+                'type': 'token',
+                'content': token,
+                'full_response': full_response
+            }
+        
+        # Extract rules from response
+        json_match = re.search(r'\{[\s\S]*\}', full_response)
+        if json_match:
+            try:
+                parsed = json.loads(json_match.group())
+                rules = parsed.get('rules', [])
+                
+                # Format rules
+                formatted_rules = []
+                for rule in rules:
+                    formatted_rule = {
+                        "name": rule['name'],
+                        "description": rule['description'],
+                        "conditions": rule.get('conditions', []),
+                        "actions": rule.get('actions', []),
+                        "confidence": rule.get('confidence', 0.8),
+                        "rule_id": f"rule_{hash(rule['name'])}_{len(formatted_rules)}"
+                    }
+                    formatted_rules.append(formatted_rule)
+                
+                yield {
+                    'type': 'rules',
+                    'rules': formatted_rules,
+                    'full_response': full_response
+                }
+            except:
+                yield {
+                    'type': 'parse_error',
+                    'full_response': full_response
+                }
+        else:
+            yield {
+                'type': 'no_rules',
+                'full_response': full_response
+            }
+            
+    except Exception as e:
+        yield {
+            'type': 'error',
+            'content': str(e)
+        }

components/mcp_client.py

@@ -0,0 +1,587 @@
+"""
+MCP Client for connecting to Modal backend
+"""
+
+import os
+import time
+import requests
+from typing import List, Dict, Any, Optional
+from urllib.parse import urljoin
+
+
+class MCPClient:
+    """Client for communicating with Modal MCP backend"""
+    
+    def __init__(self, modal_url: str, session_token: Optional[str] = None):
+        """
+        Initialize MCP client
+        
+        Args:
+            modal_url: Base URL of the Modal backend or 'local://mock' for local mode
+            session_token: Optional session token for authenticated requests
+        """
+        self.local_mode = modal_url == 'local://mock'
+        self.base_url = modal_url.rstrip('/') if not self.local_mode else 'local://mock'
+        self.session_token = session_token or self._generate_session_token()
+        self.headers = {
+            'Content-Type': 'application/json',
+            'X-Session-Token': self.session_token
+        }
+        self.mode = 'mock'  # Default to mock mode
+        self._mock_sessions = {}  # Store session data in memory
+        
+        # Parse Modal URL components if it's a Modal URL
+        self.is_modal_url = not self.local_mode and "--" in modal_url and "modal.run" in modal_url
+        if self.is_modal_url:
+            # Extract from pattern: https://hfmcp--email-rule-agent-backend-dev.modal.run
+            # or https://hfmcp--email-rule-agent-backend-health-dev.modal.run
+            url_without_protocol = modal_url.replace("https://", "").replace("http://", "")
+            parts = url_without_protocol.split("--")
+            
+            if len(parts) >= 2:
+                self.workspace = parts[0]
+                
+                # The second part contains app-name.modal.run
+                # We need to extract just the app name
+                remaining = parts[1].replace(".modal.run", "")
+                
+                # For URL like hfmcp--email-rule-agent-backend.modal.run
+                # We want: app_name = "email-rule-agent-backend"
+                self.app_name = remaining
+                
+                # No environment suffix in deployed Modal URLs
+                self.env = ""
+            else:
+                # Fallback if URL doesn't match expected pattern
+                self.is_modal_url = False
+        
+    def _generate_session_token(self) -> str:
+        """Generate a random session token for demo users"""
+        import uuid
+        return str(uuid.uuid4())
+    
+    def set_mode(self, mode: str):
+        """Set the mode (mock or gmail)"""
+        if mode not in ['mock', 'gmail']:
+            raise ValueError("Mode must be 'mock' or 'gmail'")
+        self.mode = mode
+        self.headers['X-Mode'] = mode
+    
+    def set_gmail_token(self, oauth_token: str):
+        """Set Gmail OAuth token for authenticated requests"""
+        self.headers['Authorization'] = f'Bearer {oauth_token}'
+        self.mode = 'gmail'
+    
+    def _construct_modal_endpoint_url(self, endpoint: str) -> str:
+        """Construct the Modal-specific URL for an endpoint"""
+        if not self.is_modal_url:
+            # Fallback to regular path-based URL
+            return urljoin(self.base_url, endpoint)
+        
+        # Map endpoints to Modal function names - now consolidated
+        endpoint_to_function = {
+            '/health': 'health',
+            '/emails': 'emails',
+            '/labels': 'labels',
+            '/rules/preview': 'rules_preview',
+            '/rules/apply': 'rules_apply',
+            '/rules': 'rules',
+            '/rules/save': 'rules',
+            '/sessions': 'sessions',
+            '/auth/gmail/url': 'auth',
+            '/auth/gmail/callback': 'auth',
+        }
+        
+        # First check the direct mapping
+        function_name = endpoint_to_function.get(endpoint)
+        path_suffix = ""
+        
+        if not function_name:
+            # Handle special cases
+            if endpoint.startswith('/rules/'):
+                # All rules operations go to 'rules'
+                function_name = 'rules'
+                # Preserve the path after /rules for PATCH and DELETE
+                if hasattr(self, '_current_method') and self._current_method in ['PATCH', 'DELETE']:
+                    path_suffix = endpoint[6:]  # Everything after '/rules'
+            elif endpoint.startswith('/sessions/'):
+                # All sessions operations go to 'sessions'
+                function_name = 'sessions'
+                # Preserve the path after /sessions
+                if hasattr(self, '_current_method') and self._current_method in ['GET', 'DELETE']:
+                    path_suffix = endpoint[9:]  # Everything after '/sessions'
+            elif endpoint.startswith('/auth/'):
+                # All auth operations go to 'auth'
+                function_name = 'auth'
+            else:
+                # Fallback: convert path to function name
+                function_name = endpoint.strip("/").replace("/", "_")
+        
+        # Convert underscores to hyphens for Modal URLs
+        function_name_with_hyphens = function_name.replace('_', '-')
+        
+        # Construct URL without environment suffix
+        base_url = f"https://{self.workspace}--{self.app_name}-{function_name_with_hyphens}.modal.run"
+        return base_url + path_suffix
+    
+    def _request(self, method: str, endpoint: str, **kwargs) -> Dict[str, Any]:
+        """Make a request to the Modal backend with unified error handling"""
+        # If in local mode, always use local responses
+        if self.local_mode:
+            return self._get_local_response(endpoint, method, kwargs)
+        
+        # Store current method for URL construction
+        self._current_method = method
+        
+        # Construct the appropriate URL
+        url = self._construct_modal_endpoint_url(endpoint)
+        
+        # Handle special cases for Modal endpoints
+        if self.is_modal_url:
+            # For GET /sessions/{session_id}, Modal expects session_id as query param
+            if endpoint.startswith('/sessions/') and method == 'GET' and endpoint != '/sessions':
+                session_id = endpoint.split('/')[-1]
+                kwargs.setdefault('params', {})['session_id'] = session_id
+            
+            # Note: PATCH and DELETE for /rules/{rule_id} now preserve the path structure
+            # so we don't need to move rule_id to query params
+        
+        try:
+            response = requests.request(
+                method=method,
+                url=url,
+                headers=self.headers,
+                timeout=15,  # Reduced timeout for better responsiveness
+                **kwargs
+            )
+            response.raise_for_status()
+            return response.json()
+        except (requests.exceptions.ConnectionError, requests.exceptions.Timeout) as e:
+            # Backend is down or unreachable, use full local mock as fallback
+            print(f"MCPClient: Connection failed ('{e}'). Engaging fallback mode.")
+            return self._get_local_response(endpoint, method, kwargs)
+        except requests.exceptions.HTTPError as e:
+            # Backend is up but returned an error (4xx, 5xx)
+            print(f"MCPClient: HTTP Error: {e.response.status_code}")
+            try:
+                # Try to parse a JSON error response from the backend
+                error_details = e.response.json()
+            except ValueError:
+                error_details = {'error': e.response.text or 'An unknown HTTP error occurred.'}
+            
+            return {
+                'success': False,
+                'status_code': e.response.status_code,
+                'error': self._get_user_friendly_error(e.response.status_code),
+                **error_details
+            }
+        except requests.exceptions.RequestException as e:
+            # Other request-related errors
+            print(f"MCPClient: General request exception: {e}")
+            return {
+                'error': f'A network error occurred: {e}', 
+                'success': False, 
+                'status_code': None
+            }
+    
+    def _get_user_friendly_error(self, status_code: int) -> str:
+        """Get user-friendly error message based on HTTP status code"""
+        error_messages = {
+            400: "Invalid request - please check your input",
+            401: "Authentication required - please log in",
+            403: "Access denied",
+            404: "Resource not found",
+            429: "Please slow down - too many requests",
+            500: "Server issue - please try again",
+            502: "Server temporarily unavailable",
+            503: "Server busy - please try again later"
+        }
+        return error_messages.get(status_code, f"Error {status_code} occurred")
+    
+    
+    
+    def _get_local_response(self, endpoint: str, method: str, kwargs: Dict[str, Any]) -> Dict[str, Any]:
+        """Provide session-aware local responses for all endpoints"""
+        
+        # Initialize session data if needed
+        session_id = self.session_token
+        if session_id not in self._mock_sessions:
+            self._mock_sessions[session_id] = {
+                'emails': self._load_initial_emails(),
+                'rules': [],
+                'rule_counter': 0
+            }
+        
+        session_data = self._mock_sessions[session_id]
+        
+        # Handle different endpoints for local mode
+        if '/rules/preview' in endpoint and method == 'POST':
+            # Simulate rule preview
+            rule = kwargs.get('json', {}).get('rule', {})
+            return {
+                'success': True,
+                'affected_emails': self._get_mock_preview_emails(),
+                'statistics': {
+                    'matched_count': 5,
+                    'total_scanned': 20
+                }
+            }
+        
+        elif '/rules/apply' in endpoint and method == 'POST':
+            # Simulate rule application
+            rule = kwargs.get('json', {}).get('rule', {})
+            return {
+                'success': True,
+                'statistics': {
+                    'processed_count': 5,
+                    'moved_count': 3,
+                    'labeled_count': 2
+                },
+                'updated_emails': self._get_mock_updated_emails()
+            }
+        
+        elif endpoint == '/rules' and method == 'POST':
+            # Simulate saving a rule
+            rule = kwargs.get('json', {}).get('rule', {})
+            rule['rule_id'] = rule.get('rule_id', f'rule_{session_data["rule_counter"]}')
+            rule['created_at'] = rule.get('created_at', time.strftime('%Y-%m-%dT%H:%M:%SZ'))
+            rule['status'] = rule.get('status', 'pending')
+            session_data['rules'].append(rule)
+            session_data['rule_counter'] += 1
+            return {
+                'success': True,
+                'rule_id': rule['rule_id'],
+                'message': 'Rule saved successfully'
+            }
+        
+        elif '/rules' in endpoint and method == 'GET' and 'rule_id' not in endpoint:
+            # Return saved rules for this session
+            return {
+                'rules': session_data['rules'],
+                'count': 0,
+                'success': True
+            }
+        
+        elif '/rules' in endpoint and method == 'PATCH':
+            # Handle rule status update
+            rule_id = endpoint.split('/')[-1]
+            update_data = kwargs.get('json', {}).get('update', {})
+            
+            for rule in session_data['rules']:
+                if rule.get('rule_id') == rule_id:
+                    rule.update(update_data)
+                    return {
+                        'success': True,
+                        'rule': rule,
+                        'message': f'Rule {rule_id} updated'
+                    }
+            
+            return {'success': False, 'error': 'Rule not found'}
+        
+        elif '/rules' in endpoint and method == 'DELETE':
+            # Simulate rule deletion
+            rule_id = endpoint.split('/')[-1]
+            session_data['rules'] = [r for r in session_data['rules'] if r.get('rule_id') != rule_id]
+            return {
+                'success': True,
+                'message': 'Rule deleted successfully'
+            }
+        
+        elif '/emails/search' in endpoint and method == 'GET':
+            # Return search results
+            try:
+                import json
+                with open('data/emails.json', 'r') as f:
+                    emails = json.load(f)
+                query = kwargs.get('params', {}).get('query', '').lower()
+                # Simple search simulation
+                results = [e for e in emails if query in e.get('subject', '').lower() 
+                          or query in e.get('from_name', '').lower()][:10]
+                return {
+                    'emails': results,
+                    'success': True
+                }
+            except (FileNotFoundError, json.JSONDecodeError) as e:
+                return {'emails': [], 'error': f'Could not load emails: {e}', 'success': False}
+        
+        elif '/emails' in endpoint and method == 'GET':
+            # Return emails from session data
+            return {
+                'emails': session_data['emails'],
+                'next_page_token': None,
+                'total_estimate': len(session_data['emails']),
+                'success': True
+            }
+        
+        elif '/labels' in endpoint and method == 'GET':
+            # Return mock labels
+            return {
+                'labels': [
+                    {'id': 'INBOX', 'name': 'Inbox'},
+                    {'id': 'WORK', 'name': 'Work'},
+                    {'id': 'PERSONAL', 'name': 'Personal'},
+                    {'id': 'ARCHIVE', 'name': 'Archive'}
+                ],
+                'success': True
+            }
+        
+        elif '/auth/gmail/url' in endpoint:
+            # Return mock OAuth URL
+            return {
+                'auth_url': 'https://accounts.google.com/oauth/authorize?mock=true',
+                'success': True
+            }
+        
+        elif '/auth/gmail/callback' in endpoint:
+            # Mock OAuth callback
+            return {
+                'access_token': 'mock_access_token',
+                'user_info': {
+                    'email': '[email protected]',
+                    'name': 'Demo User'
+                },
+                'success': True
+            }
+        
+        # Default fallback for unknown endpoints
+        return {
+            'error': f'Endpoint {endpoint} not available in offline mode',
+            'success': False,
+            'fallback': True
+        }
+    
+    def _get_mock_preview_emails(self) -> List[Dict[str, Any]]:
+        """Get mock preview emails for local testing"""
+        try:
+            import json
+            with open('data/preview_emails.json', 'r') as f:
+                return json.load(f)[:10]
+        except (FileNotFoundError, json.JSONDecodeError) as e:
+            print(f"MCPClient: Could not load preview emails: {e}")
+            return []
+    
+    def _get_mock_updated_emails(self) -> List[Dict[str, Any]]:
+        """Get mock updated emails after rule application"""
+        try:
+            import json
+            with open('data/emails.json', 'r') as f:
+                emails = json.load(f)
+                # Simulate some emails being moved to different folders
+                for i in range(min(5, len(emails))):
+                    if i % 2 == 0:
+                        emails[i]['folder'] = 'Work'
+                    else:
+                        emails[i]['labels'] = emails[i].get('labels', []) + ['Processed']
+                return emails
+        except (FileNotFoundError, json.JSONDecodeError) as e:
+            print(f"MCPClient: Could not load emails for update simulation: {e}")
+            return []
+    
+    # Email operations
+    
+    def list_emails(
+        self, 
+        folder: str = 'inbox',
+        page_size: int = 20,
+        page_token: Optional[str] = None
+    ) -> Dict[str, Any]:
+        """
+        List emails from the specified folder
+        
+        Args:
+            folder: Email folder/label to list
+            page_size: Number of emails per page
+            page_token: Token for pagination
+            
+        Returns:
+            Dict with emails, next_page_token, and total_estimate
+        """
+        params = {
+            'folder': folder,
+            'page_size': page_size,
+            'mode': self.mode
+        }
+        if page_token:
+            params['page_token'] = page_token
+            
+        return self._request('GET', '/emails', params=params)
+    
+    def search_emails(
+        self, 
+        query: str,
+        folder: Optional[str] = None,
+        max_results: int = 50
+    ) -> List[Dict[str, Any]]:
+        """
+        Search emails with the given query
+        
+        Args:
+            query: Search query
+            folder: Optional folder to search within
+            max_results: Maximum number of results
+            
+        Returns:
+            List of matching emails
+        """
+        params = {
+            'search': query,  # Changed from 'query' to 'search'
+            'max_results': max_results,
+            'mode': self.mode
+        }
+        if folder:
+            params['folder'] = folder
+            
+        response = self._request('GET', '/emails', params=params)  # Changed endpoint
+        return response.get('emails', [])
+    
+    def get_labels(self) -> List[Dict[str, Any]]:
+        """
+        Get available email labels/folders
+        
+        Returns:
+            List of label dictionaries
+        """
+        response = self._request('GET', '/labels', params={'mode': self.mode})
+        return response.get('labels', [])
+    
+    # Rule operations
+    
+    def preview_rule(
+        self, 
+        rule: Dict[str, Any],
+        sample_size: int = 10
+    ) -> Dict[str, Any]:
+        """
+        Preview the effects of a rule without applying it
+        
+        Args:
+            rule: Rule dictionary
+            sample_size: Number of sample emails to show
+            
+        Returns:
+            Dict with matched emails and statistics
+        """
+        return self._request('POST', '/rules/preview', json={
+            'rule': rule,
+            'sample_size': sample_size,
+            'mode': self.mode
+        })
+    
+    def apply_rule(
+        self, 
+        rule: Dict[str, Any],
+        preview: bool = False
+    ) -> Dict[str, Any]:
+        """
+        Apply a rule to emails
+        
+        Args:
+            rule: Rule dictionary
+            preview: If True, only preview without applying
+            
+        Returns:
+            Dict with results
+        """
+        return self._request('POST', '/rules/apply', json={
+            'rule': rule,
+            'preview': preview,
+            'mode': self.mode
+        })
+    
+    def save_rule(self, rule: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Save a rule for the current user/session
+        
+        Args:
+            rule: Rule dictionary to save
+            
+        Returns:
+            Dict with saved rule ID
+        """
+        return self._request('POST', '/rules/save', json={
+            'rule': rule,
+            'mode': self.mode
+        })
+    
+    def update_rule_status(self, rule_id: str, new_status: str) -> Dict[str, Any]:
+        """Update the status of a rule"""
+        return self._request('PATCH', f'/rules/{rule_id}', json={
+            'update': {'status': new_status}
+        })
+    
+    def archive_rule(self, rule_id: str) -> Dict[str, Any]:
+        """Archive (reject) a rule"""
+        return self.update_rule_status(rule_id, 'rejected')
+    
+    def reactivate_rule(self, rule_id: str) -> Dict[str, Any]:
+        """Reactivate an archived rule"""
+        return self.update_rule_status(rule_id, 'pending')
+    
+    def get_rules(self) -> List[Dict[str, Any]]:
+        """
+        Get saved rules for the current user/session
+        
+        Returns:
+            List of saved rules
+        """
+        response = self._request('GET', '/rules', params={'mode': self.mode})
+        return response.get('rules', [])
+    
+    def delete_rule(self, rule_id: str) -> Dict[str, Any]:
+        """
+        Delete a saved rule
+        
+        Args:
+            rule_id: ID of the rule to delete
+            
+        Returns:
+            Dict with success status
+        """
+        return self._request('DELETE', f'/rules/{rule_id}')
+    
+    # Authentication
+    
+    def get_gmail_auth_url(self) -> str:
+        """
+        Get Gmail OAuth authorization URL
+        
+        Returns:
+            OAuth URL for Gmail authorization
+        """
+        response = self._request('GET', '/auth/gmail/url')
+        return response.get('auth_url', '')
+    
+    def exchange_gmail_code(self, code: str) -> Dict[str, Any]:
+        """
+        Exchange Gmail OAuth code for tokens
+        
+        Args:
+            code: OAuth authorization code
+            
+        Returns:
+            Dict with access token and user info
+        """
+        return self._request('POST', '/auth/gmail/callback', json={'code': code})
+    
+    def _load_initial_emails(self) -> List[Dict[str, Any]]:
+        """Load initial emails from file for demo mode"""
+        try:
+            import json
+            with open('data/emails.json', 'r') as f:
+                return json.load(f)
+        except (FileNotFoundError, json.JSONDecodeError) as e:
+            print(f"Warning: Could not load initial emails: {e}")
+            # Return some default demo emails
+            return [
+                {
+                    "id": "msg_001",
+                    "from_email": "[email protected]",
+                    "from_name": "Demo User",
+                    "subject": "Welcome to Email Rule Agent!",
+                    "snippet": "This is a demo email to get you started...",
+                    "body": "This is a demo email to get you started with the Email Rule Agent.",
+                    "date": "2024-01-15T10:00:00Z",
+                    "labels": ["INBOX"],
+                    "folder": "INBOX"
+                }
+            ]

components/models.py

@@ -0,0 +1,40 @@
+"""Pydantic models for email rules to ensure consistent JSON structure from LLM."""
+
+from pydantic import BaseModel, Field
+from typing import List, Optional, Literal, Union
+
+
+class RuleCondition(BaseModel):
+    """Represents a condition for matching emails."""
+    field: Literal["from", "subject", "body"]
+    operator: Literal["contains", "equals", "starts_with"]
+    value: Union[str, List[str]]
+    case_sensitive: bool = False
+
+
+class RuleParameters(BaseModel):
+    """Parameters for rule actions."""
+    folder: Optional[str] = None
+    label: Optional[str] = None
+    template: Optional[str] = None
+
+
+class RuleAction(BaseModel):
+    """Represents an action to take on matched emails."""
+    type: Literal["move", "archive", "label", "draft"]
+    parameters: RuleParameters
+
+
+class EmailRule(BaseModel):
+    """Complete email rule with conditions and actions."""
+    rule_id: str = Field(description="Unique identifier for the rule")
+    name: str = Field(description="Human-readable name for the rule")
+    description: str = Field(description="Detailed description of what the rule does")
+    conditions: List[RuleCondition] = Field(description="List of conditions that must be met")
+    actions: List[RuleAction] = Field(description="List of actions to perform")
+    confidence: float = Field(ge=0.0, le=1.0, description="Confidence score for the rule")
+
+
+class EmailRuleList(BaseModel):
+    """List of email rules for bulk analysis."""
+    rules: List[EmailRule]

components/session_manager.py

@@ -0,0 +1,114 @@
+"""
+Session management for multi-user support
+"""
+
+import uuid
+from typing import Dict, List, Any, Optional
+from datetime import datetime, timedelta
+import threading
+import time
+
+class SessionManager:
+    """Manages user sessions with automatic cleanup"""
+    
+    def __init__(self, session_timeout_minutes: int = 60):
+        self.sessions: Dict[str, Dict[str, Any]] = {}
+        self.session_timeout = timedelta(minutes=session_timeout_minutes)
+        self.lock = threading.Lock()
+        
+        # Start cleanup thread
+        self.cleanup_thread = threading.Thread(target=self._cleanup_expired_sessions, daemon=True)
+        self.cleanup_thread.start()
+    
+    def create_session(self) -> str:
+        """Create a new session and return session ID"""
+        session_id = str(uuid.uuid4())
+        
+        with self.lock:
+            self.sessions[session_id] = {
+                'created_at': datetime.now(),
+                'last_accessed': datetime.now(),
+                'pending_rules': [],
+                'applied_rules': [],
+                'rule_counter': 0,
+                'conversation_history': [],
+                'email_provider': 'mock',  # 'mock' or 'gmail'
+                'gmail_token': None
+            }
+        
+        return session_id
+    
+    def get_session(self, session_id: str) -> Optional[Dict[str, Any]]:
+        """Get session data by ID"""
+        with self.lock:
+            if session_id in self.sessions:
+                # Update last accessed time
+                self.sessions[session_id]['last_accessed'] = datetime.now()
+                return self.sessions[session_id]
+        return None
+    
+    def update_session(self, session_id: str, updates: Dict[str, Any]) -> bool:
+        """Update session data"""
+        with self.lock:
+            if session_id in self.sessions:
+                self.sessions[session_id].update(updates)
+                self.sessions[session_id]['last_accessed'] = datetime.now()
+                return True
+        return False
+    
+    def add_rule(self, session_id: str, rule: Dict[str, Any]) -> bool:
+        """Add a rule to session's pending rules"""
+        with self.lock:
+            if session_id in self.sessions:
+                session = self.sessions[session_id]
+                rule['id'] = f"rule_{session['rule_counter']}"
+                session['pending_rules'].append(rule)
+                session['rule_counter'] += 1
+                session['last_accessed'] = datetime.now()
+                return True
+        return False
+    
+    def get_rules(self, session_id: str) -> Dict[str, List[Dict[str, Any]]]:
+        """Get all rules for a session"""
+        with self.lock:
+            if session_id in self.sessions:
+                session = self.sessions[session_id]
+                return {
+                    'pending_rules': session['pending_rules'],
+                    'applied_rules': session['applied_rules']
+                }
+        return {'pending_rules': [], 'applied_rules': []}
+    
+    def apply_rule(self, session_id: str, rule_id: str) -> bool:
+        """Move a rule from pending to applied"""
+        with self.lock:
+            if session_id in self.sessions:
+                session = self.sessions[session_id]
+                for i, rule in enumerate(session['pending_rules']):
+                    if rule['id'] == rule_id:
+                        rule['status'] = 'applied'
+                        session['applied_rules'].append(rule)
+                        session['pending_rules'].pop(i)
+                        session['last_accessed'] = datetime.now()
+                        return True
+        return False
+    
+    def _cleanup_expired_sessions(self):
+        """Background thread to clean up expired sessions"""
+        while True:
+            time.sleep(300)  # Check every 5 minutes
+            
+            with self.lock:
+                now = datetime.now()
+                expired_sessions = []
+                
+                for session_id, session_data in self.sessions.items():
+                    if now - session_data['last_accessed'] > self.session_timeout:
+                        expired_sessions.append(session_id)
+                
+                for session_id in expired_sessions:
+                    del self.sessions[session_id]
+                    print(f"Cleaned up expired session: {session_id}")
+
+# Global session manager instance
+session_manager = SessionManager()

components/simple_agent.py

@@ -0,0 +1,553 @@
+"""
+Simple agent implementation without CrewAI overhead
+Now with natural language rule extraction!
+"""
+
+import os
+import json
+import re
+import logging
+import uuid
+from typing import List, Dict, Any, Optional, Callable, Tuple
+from langchain_openai import ChatOpenAI
+from langchain.schema import HumanMessage, SystemMessage, AIMessage
+from .models import EmailRule, EmailRuleList, RuleCondition, RuleAction, RuleParameters
+
+# Set up logging
+logging.basicConfig(level=logging.DEBUG)
+logger = logging.getLogger(__name__)
+
+# Global email context
+email_context = []
+
+def get_llm(use_thinking=False):
+    """Get configured OpenRouter LLM"""
+    api_key = os.getenv('OPENROUTER_API_KEY')
+    
+    if not api_key:
+        raise ValueError(
+            "OpenRouter API key not configured. "
+            "Please set OPENROUTER_API_KEY in HuggingFace Spaces secrets."
+        )
+    
+    # Use thinking model for complex reasoning tasks
+    model = 'google/gemini-2.5-flash-preview-05-20:thinking' if use_thinking else 'google/gemini-2.5-flash-preview-05-20'
+    
+    return ChatOpenAI(
+        openai_api_key=api_key,
+        openai_api_base="https://openrouter.ai/api/v1",
+        model_name=model,
+        temperature=0.7,
+        streaming=True,
+        default_headers={
+            "HTTP-Referer": os.getenv('HF_SPACE_URL', 'http://localhost:7860'),
+            "X-Title": "Email Rule Agent"
+        }
+    )
+
+
+def analyze_emails_and_propose_rules(emails: List[Dict[str, Any]], focus_area: str = "all types") -> Dict[str, Any]:
+    """Analyze emails and propose organization rules"""
+    
+    if not emails:
+        return {
+            'success': False,
+            'message': "No emails available to analyze.",
+            'rules': []
+        }
+    
+    # Prepare email summaries
+    email_summaries = []
+    for e in emails[:30]:  # Limit to 30 emails
+        email_summaries.append({
+            'from': e.get('from_name', ''),
+            'subject': e.get('subject', ''),
+            'preview': (e.get('body', '')[:150] + '...') if len(e.get('body', '')) > 150 else e.get('body', '')
+        })
+    
+    prompt = """Analyze these """ + str(len(email_summaries)) + """ email samples and propose 3-5 organization rules.
+
+Focus area: """ + focus_area + """
+
+Available folders: inbox, reading, work, archive
+You can suggest new folders if needed.
+
+Email samples:
+""" + json.dumps(email_summaries, indent=2) + """
+
+Look for patterns like:
+- Newsletters (subject contains "newsletter", from contains "news")
+- Work emails (from specific domains)
+- Social media notifications
+- Marketing/promotional emails
+- Personal emails from friends/family
+
+Create practical rules with clear patterns.
+
+Each condition MUST have a non-empty value extracted from the email samples.
+
+Example good rule:
+{{
+    "name": "Tech Newsletters",
+    "conditions": [
+        {{"field": "from", "operator": "contains", "value": "techcrunch"}}
+    ],
+    "actions": [{{"type": "move", "parameters": {{"folder": "reading"}}}}]
+}}
+
+DO NOT create rules with empty values like "" in conditions.
+
+Return a JSON object with a 'rules' array containing the email rules."""
+
+    try:
+        llm = get_llm(use_thinking=False)
+        
+        # Try to use structured output if available
+        try:
+            structured_llm = llm.with_structured_output(EmailRuleList)
+            response = structured_llm.invoke([
+                SystemMessage(content="You are an email pattern analyzer. Create 3-5 practical organization rules based on the email patterns you observe."),
+                HumanMessage(content=prompt)
+            ])
+            
+            # Response is an EmailRuleList object
+            formatted_rules = []
+            for rule in response.rules:
+                formatted_rule = rule.model_dump()
+                # Ensure rule_id is set with UUID
+                if not formatted_rule.get('rule_id'):
+                    formatted_rule['rule_id'] = f"rule_{uuid.uuid4().hex[:8]}"
+                formatted_rules.append(formatted_rule)
+            
+            return {
+                'success': True,
+                'rules': formatted_rules,
+                'message': f"Found {len(formatted_rules)} patterns in your emails!"
+            }
+            
+        except Exception as struct_error:
+            # Fallback to regex extraction if structured output not supported
+            logger.warning(f"Structured output not available, falling back to regex: {struct_error}")
+            
+            response = llm.invoke([
+                SystemMessage(content="You are an email pattern analyzer. Always respond with valid JSON. Extract actual values from the email content - never use empty strings."),
+                HumanMessage(content=prompt)
+            ])
+            
+            # Extract JSON from response
+            response_text = response.content
+            json_match = re.search(r'\{[\s\S]*\}', response_text)
+            
+            if json_match:
+                parsed = json.loads(json_match.group())
+                rules = parsed.get('rules', [])
+                
+                # Format rules for the UI
+                formatted_rules = []
+                for rule in rules:
+                    formatted_rule = {
+                        "name": rule.get('name', 'Unnamed Rule'),
+                        "description": rule.get('description', 'Automatically organize emails'),
+                        "conditions": [{
+                            "field": c.get('field', 'from'),
+                            "operator": c.get('operator', 'contains'),
+                            "value": c.get('value', ''),
+                            "case_sensitive": False
+                        } for c in rule.get('conditions', []) if c.get('value') and (isinstance(c.get('value'), str) and c.get('value').strip() or isinstance(c.get('value'), list) and c.get('value'))],
+                        "actions": [{
+                            "type": a.get('type', 'move'),
+                            "parameters": a.get('parameters', {
+                                "folder": a.get('folder', 'inbox'),
+                                "label": a.get('label', ''),
+                                "template": a.get('template', '')
+                            })
+                        } for a in rule.get('actions', [])],
+                        "confidence": rule.get('confidence', 0.8),
+                        "rule_id": f"rule_{uuid.uuid4().hex[:8]}"
+                    }
+                    formatted_rules.append(formatted_rule)
+                
+                return {
+                    'success': True,
+                    'rules': formatted_rules,
+                    'message': f"Found {len(formatted_rules)} patterns in your emails!"
+                }
+            else:
+                return {
+                    'success': False,
+                    'message': "Could not parse rule suggestions.",
+                    'rules': []
+                }
+            
+    except Exception as e:
+        print(f"Error analyzing emails: {e}")
+        return {
+            'success': False,
+            'message': f"Error analyzing emails: {str(e)}",
+            'rules': []
+        }
+
+
+def detect_rule_intent(message: str) -> bool:
+    """Check if the message contains intent to create a rule"""
+    rule_indicators = [
+        # Direct commands
+        r'\b(move|archive|label|organize|put|send|flag|mark)\b.*\b(all|these|those|emails?|messages?)\b',
+        r'\b(i want|i need|please|can you|could you)\b.*\b(move|archive|organize)',
+        r'\ball\s+(my\s+)?(newsletter|marketing|promotional|work|personal)',
+        r'\b(delete|remove|trash)\b.*\b(all|these|emails)',  # Will convert to archive
+        
+        # Draft patterns
+        r'\b(draft|reply|respond)\b.*\b(polite|professional|saying|acknowledging)\b',
+        r'\b(send|write|create)\b.*\b(reply|response|acknowledgment)\b',
+        r'\b(draft|create|write)\b.*\b(replies?|responses?)\b.*\b(for|to)\b',
+        r'\bfor\s+(emails?\s+)?from\s+.*\bdraft\b',
+        r'\backnowledge\b.*\b(emails?|messages?)\b',
+        
+        # Specific patterns
+        r'emails?\s+from\s+\w+',
+        r'put\s+.*\s+in(to)?\s+',
+        r'archive\s+(all\s+)?.*emails?',
+        r'unsubscribe|spam|junk',
+    ]
+    
+    message_lower = message.lower()
+    return any(re.search(pattern, message_lower) for pattern in rule_indicators)
+
+
+def resolve_context_references(
+    text: str, 
+    conversation_history: List[Dict],
+    emails: List[Dict[str, Any]]
+) -> Tuple[str, Dict[str, Any]]:
+    """Resolve contextual references like 'them', 'those' using conversation history"""
+    
+    context_info = {
+        'mentioned_senders': [],
+        'mentioned_categories': [],
+        'mentioned_subjects': []
+    }
+    
+    # Look for recent context in conversation
+    for msg in conversation_history[-5:]:  # Last 5 messages
+        content = msg.get('content', '').lower()
+        
+        # Check for email references
+        if 'newsletter' in content:
+            context_info['mentioned_categories'].append('newsletter')
+        if 'marketing' in content or 'promotional' in content:
+            context_info['mentioned_categories'].append('marketing')
+        if 'work' in content or 'colleague' in content:
+            context_info['mentioned_categories'].append('work')
+            
+        # Extract email addresses mentioned
+        email_pattern = r'[\w\.-]+@[\w\.-]+\.\w+'
+        found_emails = re.findall(email_pattern, content)
+        context_info['mentioned_senders'].extend(found_emails)
+    
+    # Replace contextual references
+    resolved_text = text
+    if re.search(r'\b(them|those|these)\b', text.lower()) and not re.search(r'(emails?|messages?)', text.lower()):
+        # Add clarification based on context
+        if context_info['mentioned_categories']:
+            category = context_info['mentioned_categories'][-1]
+            resolved_text = text.replace('them', f'{category} emails')
+            resolved_text = resolved_text.replace('those', f'those {category} emails')
+            resolved_text = resolved_text.replace('these', f'these {category} emails')
+    
+    return resolved_text, context_info
+
+
+def extract_rule_from_natural_language(
+    user_message: str,
+    conversation_history: List[Dict],
+    emails: List[Dict[str, Any]]
+) -> Optional[Dict[str, Any]]:
+    """Extract a rule from natural language request"""
+    
+    # Resolve context
+    resolved_message, context_info = resolve_context_references(
+        user_message, conversation_history, emails
+    )
+    
+    # Convert delete to archive
+    if re.search(r'\b(delete|remove|trash)\b', resolved_message.lower()):
+        resolved_message = re.sub(
+            r'\b(delete|remove|trash)\b', 
+            'archive', 
+            resolved_message, 
+            flags=re.IGNORECASE
+        )
+    
+    # Use LLM to extract rule components
+    llm = get_llm(use_thinking=False)
+    
+    # Include recent conversation context
+    recent_context = ""
+    if conversation_history and len(conversation_history) > 0:
+        # Get last 2 exchanges
+        recent = conversation_history[-4:] if len(conversation_history) >= 4 else conversation_history
+        for msg in recent:
+            role = "User" if msg.get('role') == 'user' else "Assistant"
+            recent_context += f"{role}: {msg.get('content', '')}\n"
+    
+    prompt = f"""Extract email rule components from this request: "{resolved_message}"
+
+Recent conversation:
+{recent_context}
+
+Context from conversation:
+- Mentioned categories: {context_info['mentioned_categories']}
+- Mentioned senders: {context_info['mentioned_senders']}
+
+IMPORTANT: If this is NOT a request to create, modify, or apply an email rule, return the word "NOTARULE" instead of JSON.
+
+Common rule requests include:
+- "Move [emails] to [folder]" 
+- "Archive [type of emails]"
+- "Please move all Uber receipts to travel folder"
+- Confirmations like "yes", "ok", "sure" after discussing a rule
+
+Email rule requests typically:
+- Ask to move, archive, label, organize, or draft replies for emails
+- Mention email senders, subjects, or content patterns
+- Describe actions to take on emails
+
+Available actions: move (to folder), archive, label, draft (a reply)
+Available folders: inbox, reading, work, personal, receipts, travel, archive
+
+If the user is confirming a rule (saying "yes", "ok", "sure" after you offered to create one), extract the rule from the conversation.
+
+Return JSON in this EXACT format:
+{{
+    "name": "Short descriptive name for the rule",
+    "description": "What this rule does",
+    "conditions": [
+        {{"field": "from", "operator": "contains", "value": "uber"}}
+    ],
+    "actions": [
+        {{"type": "move", "parameters": {{"folder": "travel"}}}}
+    ],
+    "confidence": 0.9
+}}
+
+Examples:
+- "Move emails from Uber to travel folder" → {{"name": "Uber to Travel", "conditions": [{{"field": "from", "operator": "contains", "value": "uber"}}], "actions": [{{"type": "move", "parameters": {{"folder": "travel"}}}}]}}
+- User says "Yes" after "Shall I move Uber receipts to travel?" → Extract the Uber rule from context"""
+
+    try:
+        # Try to use structured output
+        try:
+            structured_llm = llm.with_structured_output(EmailRule)
+            response = structured_llm.invoke([
+                SystemMessage(content="You are a rule extraction expert. Extract email rule components from the user's request."),
+                HumanMessage(content=prompt)
+            ])
+            
+            # Response is an EmailRule object
+            formatted_rule = response.model_dump()
+            
+            # Ensure rule_id is set with UUID
+            if not formatted_rule.get('rule_id'):
+                formatted_rule['rule_id'] = f"rule_{uuid.uuid4().hex[:8]}"
+            
+            return formatted_rule
+            
+        except Exception as struct_error:
+            # Fallback to regex extraction
+            logger.warning(f"Structured output not available for single rule, falling back to regex: {struct_error}")
+            
+            response = llm.invoke([
+                SystemMessage(content="You are a rule extraction expert. Return either valid JSON for a rule or 'NOTARULE' if this is not a rule request."),
+                HumanMessage(content=prompt)
+            ])
+            
+            # Check if it's not a rule
+            if "NOTARULE" in response.content:
+                return None
+            
+            # Extract JSON
+            json_match = re.search(r'\{[\s\S]*\}', response.content)
+            if json_match:
+                rule_data = json.loads(json_match.group())
+                logger.info(f"LLM returned JSON: {rule_data}")
+                
+                # Format for UI - with defaults for missing fields
+                formatted_rule = {
+                    "name": rule_data.get('name', 'Move Uber receipts to Travel'),
+                    "description": rule_data.get('description', 'Automatically organize Uber receipts'),
+                    "conditions": [{
+                        "field": c.get('field', 'from'),
+                        "operator": c.get('operator', 'contains'),
+                        "value": c.get('value', ''),
+                        "case_sensitive": False
+                    } for c in rule_data.get('conditions', [])],
+                    "actions": [{
+                        "type": a.get('type', 'move'),
+                        "parameters": a.get('parameters', {
+                            "folder": a.get('folder', 'inbox'),
+                            "label": a.get('label', ''),
+                            "template": a.get('template', '')
+                        })
+                    } for a in rule_data.get('actions', [])],
+                    "confidence": rule_data.get('confidence', 0.9),
+                    "rule_id": f"rule_{uuid.uuid4().hex[:8]}"
+                }
+                
+                return formatted_rule
+            
+    except Exception as e:
+        logger.error(f"Error extracting rule: {e}")
+        logger.error(f"Response content was: {response.content if 'response' in locals() else 'No response'}")
+        
+    return None
+
+
+def process_chat_message(
+    user_message: str, 
+    emails: List[Dict[str, Any]], 
+    conversation_history: Optional[List[Dict]] = None,
+    callback: Optional[Callable] = None,
+    rule_state: Optional[Dict] = None
+) -> Dict[str, Any]:
+    """Process a user message with improved priority flow"""
+    logger.info(f"=== AGENT CALLED ===\nMessage: {user_message[:50]}...\nEmails: {len(emails) if emails else 0}")
+    
+    global email_context
+    email_context = emails
+    
+    if not conversation_history:
+        conversation_history = []
+    
+    try:
+        # PRIORITY 1: Always try to extract rule from natural language first
+        logger.info("Checking if this is a rule request...")
+        
+        # Show thinking indicator
+        if callback:
+            callback({'type': 'analyzer_feedback', 'content': '🤔 Understanding your request...'})
+        
+        # Extract rule from natural language - let Gemini decide if it's a rule
+        extracted_rule = extract_rule_from_natural_language(
+            user_message, conversation_history, emails
+        )
+        
+        if extracted_rule:
+            logger.info(f"Rule extracted successfully: {extracted_rule}")
+            # Check if it's a delete request that was converted
+            if 'delete' in user_message.lower() or 'remove' in user_message.lower():
+                response = "✅ I'll archive those emails for you (for safety, I archive instead of delete). Check the rules panel to preview the rule!"
+            else:
+                response = "✅ I've created a rule based on your request. Check the rules panel to preview how it will organize your emails!"
+            
+            # Add hidden JSON marker
+            response += f"\n<!-- RULES_JSON_START\n{json.dumps([extracted_rule])}\nRULES_JSON_END -->"
+            
+            return {
+                'response': response,
+                'rules': [extracted_rule],
+                'thinking_process': []
+            }
+        else:
+            logger.info("No rule extracted - falling through to general conversation")
+        
+        # PRIORITY 2: Check for analysis request
+        analyze_keywords = ['analyze', 'suggest', 'patterns', 'help me organize', 
+                           'what rules', 'find patterns', 'inbox analysis']
+        should_analyze = any(keyword in user_message.lower() for keyword in analyze_keywords)
+        
+        if should_analyze:
+            logger.info("Analysis requested - analyzing email patterns")
+            
+            if callback:
+                callback({'type': 'analyzer_feedback', 'content': f'📊 Analyzing {len(emails)} emails for patterns...'})
+            
+            result = analyze_emails_and_propose_rules(emails)
+            
+            if result['success'] and result['rules']:
+                # Simple response - rules shown in panel
+                response = f"📊 I analyzed your {len(emails)} emails and found {len(result['rules'])} patterns! Check the rules panel to see my suggestions."
+                
+                # Add hidden JSON marker
+                response += f"\n<!-- RULES_JSON_START\n{json.dumps(result['rules'])}\nRULES_JSON_END -->"
+                
+                return {
+                    'response': response,
+                    'rules': result['rules'],
+                    'thinking_process': []
+                }
+            else:
+                return {
+                    'response': result['message'],
+                    'rules': [],
+                    'thinking_process': []
+                }
+        
+        # PRIORITY 3: General conversation
+        # Simple greetings
+        greetings = ['hi', 'hello', 'hey', 'good morning', 'good afternoon']
+        is_greeting = any(greeting in user_message.lower().split() for greeting in greetings)
+        
+        if is_greeting:
+            response = """👋 Hi there! I'm your email organization assistant. I can help you:
+
+• **Create rules from natural language** - Just tell me what you want! 
+  Example: "Archive all marketing emails"
+  
+• **Analyze your inbox** - I'll find patterns and suggest smart rules
+  Example: "Analyze my emails and suggest organization rules"
+
+What would you like to do?"""
+            return {
+                'response': response,
+                'rules': [],
+                'thinking_process': []
+            }
+        
+        # Other general conversation
+        llm = get_llm(use_thinking=False)
+        
+        messages = [
+            SystemMessage(content="""You are a helpful email organization assistant. Be concise and friendly. 
+If the user seems to want email organization help, mention you can:
+1. Create rules from their natural language requests (e.g., "archive all newsletters")
+2. Analyze their inbox for patterns"""),
+            HumanMessage(content=user_message)
+        ]
+        
+        # Add recent conversation history for context
+        if conversation_history:
+            for msg in conversation_history[-4:]:  # Last 4 messages
+                if msg['role'] == 'user':
+                    messages.insert(-1, HumanMessage(content=msg['content']))
+                else:
+                    messages.insert(-1, AIMessage(content=msg['content']))
+        
+        response = llm.invoke(messages)
+        
+        return {
+            'response': response.content,
+            'rules': [],
+            'thinking_process': []
+        }
+            
+    except Exception as e:
+        logger.error(f"Error in process_chat_message: {e}")
+        return {
+            'response': f"I encountered an error: {str(e)}. Please try again.",
+            'rules': [],
+            'thinking_process': [f"Error: {str(e)}"]
+        }
+
+
+def extract_rules_from_output(output: str) -> List[Dict[str, Any]]:
+    """Extract JSON rules from output string"""
+    try:
+        # Look for hidden JSON markers
+        hidden_json = re.search(r'<!-- RULES_JSON_START\s*(.*?)\s*RULES_JSON_END -->', output, re.DOTALL)
+        if hidden_json:
+            json_content = hidden_json.group(1).strip()
+            return json.loads(json_content)
+    except (json.JSONDecodeError, AttributeError) as e:
+        pass
+    return []

components/ui.py

@@ -0,0 +1,2237 @@
+"""
+UI Components for Email Rule Agent - Refactored with proper session management
+Self-contained implementation with all necessary functions
+"""
+
+import gradio as gr
+import os
+import json
+import uuid
+from datetime import datetime
+from typing import List, Dict, Any, Tuple
+
+# Import UI utility functions
+from .ui_utils import (
+    create_email_html,
+    create_interactive_rule_cards,
+    create_preview_banner,
+    filter_emails,
+    get_folder_dropdown_choices,
+    get_preview_rules_count,
+    get_folder_counts,
+    extract_folder_name,
+    format_date,
+    sort_emails
+)
+
+# Import agent
+from .simple_agent import process_chat_message as process_agent_message
+from .ui_tools import process_chat_with_tools
+from .ui_chat import process_chat_streaming
+
+# Import MCP client  
+from .mcp_client import MCPClient
+
+
+
+
+def handle_preview_rule(
+    rule_id: str,
+    sort_option: str,
+    search_query: str,
+    mcp_client: Any,
+    pending_rules,  # Removed type hint to avoid Gradio API generation issue
+    current_emails,  # Removed type hint to avoid Gradio API generation issue
+    sample_emails,  # Removed type hint to avoid Gradio API generation issue
+    preview_emails  # Removed type hint to avoid Gradio API generation issue
+) -> Tuple:
+    """
+    Handle rule preview by delegating to MCP backend
+    
+    Returns all 7 outputs expected by the UI:
+    1. folder_dropdown update
+    2. email_display HTML
+    3. rule_cards HTML
+    4. preview_banner HTML
+    5. status_msg
+    6. pending_rules state
+    7. current_emails state
+    """
+    
+    print(f"DEBUG: handle_preview_rule called with rule_id='{rule_id}'")
+    
+    # Validate input
+    if not rule_id or rule_id.strip() == "":
+        print("DEBUG: No rule ID provided")
+        return (
+            gr.update(),  # No dropdown change
+            create_email_html(current_emails),
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(0),
+            "❌ Error: No rule ID provided",
+            pending_rules,
+            current_emails
+        )
+    
+    # Find the rule - use rule_id consistently
+    print(f"DEBUG: Looking for rule with id='{rule_id}' in {len(pending_rules)} rules")
+    print(f"DEBUG: Available rule IDs: {[r.get('rule_id', 'NO_ID') for r in pending_rules]}")
+    
+    rule = next((r for r in pending_rules if r.get("rule_id") == rule_id), None)
+        
+    if not rule:
+        print(f"DEBUG: Rule not found with rule_id='{rule_id}'")
+        return (
+            gr.update(),
+            create_email_html(current_emails),
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(0),
+            f"❌ Rule not found: {rule_id}",
+            pending_rules,
+            current_emails
+        )
+    
+    try:
+        # Call MCP backend to get preview
+        preview_response = mcp_client.preview_rule(rule)
+        
+        if preview_response.get('success', False):
+            # Create a new list of rules with updated status
+            updated_rules = []
+            for r in pending_rules:
+                if r.get("rule_id") == rule_id:
+                    # Create a new rule object with preview status
+                    updated_rule = r.copy()
+                    updated_rule["status"] = "preview"
+                    updated_rules.append(updated_rule)
+                else:
+                    updated_rules.append(r)
+            
+            # Get the affected emails from backend
+            affected_emails = preview_response.get('affected_emails', [])
+            
+            # If we got emails, use them for display
+            if affected_emails:
+                display_emails = affected_emails
+            else:
+                # Fallback to current emails
+                display_emails = current_emails
+            
+            # Get folder choices from the emails we're displaying
+            folder_choices = get_folder_dropdown_choices(display_emails)
+            if not folder_choices:
+                folder_choices = ["Inbox (0)"]
+            
+            # Filter and create display
+            folder_value = folder_choices[0]
+            filtered = filter_emails(folder_value, search_query, sort_option, display_emails)
+            email_html = create_email_html(filtered, folder_value)
+            
+            # Create status message
+            stats = preview_response.get('statistics', {})
+            status_msg = f"👁️ Preview: {stats.get('matched_count', 0)} emails would be affected"
+            
+            return (
+                gr.update(choices=folder_choices, value=folder_value),
+                email_html,
+                create_interactive_rule_cards(updated_rules),
+                create_preview_banner(get_preview_rules_count(updated_rules)),
+                status_msg,
+                updated_rules,  # Return the new list of rules
+                display_emails  # Update current emails to preview data
+            )
+        else:
+            # Handle structured errors from the backend or client
+            error_message = preview_response.get('error', 'Preview failed')
+            status_code = preview_response.get('status_code')
+            
+            # Show specific error message
+            status_msg = f"❌ {error_message}"
+            return (
+                gr.update(),  # No dropdown change
+                create_email_html(current_emails),
+                create_interactive_rule_cards(pending_rules),
+                create_preview_banner(get_preview_rules_count(pending_rules)),
+                status_msg,
+                pending_rules,
+                current_emails
+            )
+            
+    except Exception as e:
+        print(f"Error in preview handler: {e}")
+        status_msg = f"❌ Connection error: {str(e)}"
+        return (
+            gr.update(),  # No dropdown change
+            create_email_html(current_emails),
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(get_preview_rules_count(pending_rules)),
+            status_msg,
+            pending_rules,
+            current_emails
+        )
+
+
+
+
+
+def handle_accept_rule(rule_id, mcp_client, current_folder, sort_option, search_query,
+                      pending_rules, applied_rules, current_emails, sample_emails):
+    """Handle rule acceptance via MCP backend"""
+    
+    if not rule_id or rule_id.strip() == "":
+        filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+        return (create_interactive_rule_cards(pending_rules), 
+                create_preview_banner(get_preview_rules_count(pending_rules)), 
+                "❌ Error: No rule ID provided",
+                create_email_html(filtered_emails, current_folder),
+                gr.update(choices=get_folder_dropdown_choices(current_emails)),
+                pending_rules, applied_rules, current_emails, sample_emails)
+    
+    # Find the rule
+    rule = next((r for r in pending_rules if r.get("rule_id") == rule_id), None)
+    if not rule:
+        filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+        return (create_interactive_rule_cards(pending_rules), 
+                create_preview_banner(get_preview_rules_count(pending_rules)), 
+                f"❌ Rule not found: {rule_id}",
+                create_email_html(filtered_emails, current_folder),
+                gr.update(),
+                pending_rules, applied_rules, current_emails, sample_emails)
+    
+    try:
+        # Apply rule via MCP
+        apply_response = mcp_client.apply_rule(rule, preview=False)
+        
+        if apply_response.get('success', False):
+            # Rule is already saved by the apply_rule endpoint, no need to save again
+            
+            # Re-fetch current state from backend (single source of truth)
+            updated_rules = mcp_client.get_rules()
+            
+            # Get updated emails if provided
+            updated_emails = apply_response.get('updated_emails', current_emails)
+            
+            # Update UI
+            stats = apply_response.get('statistics', {})
+            status_msg = f"✅ Rule applied: {stats.get('processed_count', 0)} emails processed"
+            
+            new_folder_choices = get_folder_dropdown_choices(updated_emails)
+            filtered_emails = filter_emails(current_folder, search_query, sort_option, updated_emails)
+            
+            return (create_interactive_rule_cards(updated_rules), 
+                    create_preview_banner(get_preview_rules_count(updated_rules)), 
+                    status_msg,
+                    create_email_html(filtered_emails, current_folder),
+                    gr.update(choices=new_folder_choices),
+                    updated_rules, applied_rules, updated_emails, updated_emails)
+        else:
+            error_msg = apply_response.get('error', 'Failed to apply rule')
+            status_msg = f"❌ {error_msg}"
+            filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+            return (create_interactive_rule_cards(pending_rules), 
+                    create_preview_banner(get_preview_rules_count(pending_rules)), 
+                    status_msg,
+                    create_email_html(filtered_emails, current_folder),
+                    gr.update(),
+                    pending_rules, applied_rules, current_emails, sample_emails)
+            
+    except Exception as e:
+        print(f"Error calling MCP apply: {e}")
+        status_msg = f"❌ Connection error: {str(e)}"
+        filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+        return (create_interactive_rule_cards(pending_rules), 
+                create_preview_banner(get_preview_rules_count(pending_rules)), 
+                status_msg,
+                create_email_html(filtered_emails, current_folder),
+                gr.update(),
+                pending_rules, applied_rules, current_emails, sample_emails)
+
+
+
+
+
+
+def handle_run_rule(rule_id, mcp_client, current_folder, sort_option, search_query,
+                   pending_rules, applied_rules, current_emails, sample_emails):
+    """Handle running an accepted rule via MCP backend"""
+    
+    if not rule_id or rule_id.strip() == "":
+        filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+        return (create_interactive_rule_cards(pending_rules), 
+                create_preview_banner(get_preview_rules_count(pending_rules)), 
+                "❌ Error: No rule ID provided",
+                create_email_html(filtered_emails, current_folder),
+                gr.update(choices=get_folder_dropdown_choices(current_emails)),
+                pending_rules, applied_rules, current_emails, sample_emails)
+    
+    for rule in pending_rules:
+        if rule["id"] == rule_id and rule.get("status") == "accepted":
+            try:
+                # Apply rule via MCP client
+                apply_response = mcp_client.apply_rule(rule, preview=False)
+                
+                if apply_response.get('success', False):
+                    stats = apply_response.get('statistics', {})
+                    status_msg = f"▶️ Rule executed: {stats.get('processed_count', 0)} emails processed"
+                    
+                    # Update emails if provided
+                    if 'updated_emails' in apply_response:
+                        sample_emails = apply_response['updated_emails']
+                        current_emails = sample_emails
+                    
+                    # Update email display with new data
+                    new_folder_choices = get_folder_dropdown_choices(current_emails)
+                    filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+                    
+                    print(f"Rule executed: {rule['name']} (ID: {rule_id})")
+                    return (create_interactive_rule_cards(pending_rules), 
+                            create_preview_banner(get_preview_rules_count(pending_rules)), 
+                            status_msg,
+                            create_email_html(filtered_emails, current_folder),
+                            gr.update(choices=new_folder_choices),
+                            pending_rules, applied_rules, current_emails, sample_emails)
+                else:
+                    error_message = apply_response.get('error', 'Failed to run rule')
+                    status_msg = f"❌ {error_message}"
+                    filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+                    return (create_interactive_rule_cards(pending_rules), 
+                            create_preview_banner(get_preview_rules_count(pending_rules)), 
+                            status_msg,
+                            create_email_html(filtered_emails, current_folder),
+                            gr.update(),
+                            pending_rules, applied_rules, current_emails, sample_emails)
+                    
+            except Exception as e:
+                print(f"Error running rule: {e}")
+                status_msg = "⚠️ Connection issue - could not run rule"
+                filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+                return (create_interactive_rule_cards(pending_rules), 
+                        create_preview_banner(get_preview_rules_count(pending_rules)), 
+                        status_msg,
+                        create_email_html(filtered_emails, current_folder),
+                        gr.update(),
+                        pending_rules, applied_rules, current_emails, sample_emails)
+    
+    filtered_emails = filter_emails(current_folder, search_query, sort_option, current_emails)
+    return (create_interactive_rule_cards(pending_rules), 
+            create_preview_banner(get_preview_rules_count(pending_rules)), 
+            f"❌ Rule not found or not accepted: {rule_id}",
+            create_email_html(filtered_emails, current_folder),
+            gr.update(),
+            pending_rules, applied_rules, current_emails, sample_emails)
+
+
+
+
+
+
+def handle_archive_rule(rule_id, mcp_client, pending_rules):
+    """Handle archiving a rule via MCP"""
+    if not rule_id or rule_id.strip() == "":
+        return (
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(get_preview_rules_count(pending_rules)),
+            "❌ Error: No rule ID provided",
+            pending_rules
+        )
+    
+    try:
+        # Archive via MCP
+        response = mcp_client.archive_rule(rule_id)
+        
+        if response.get('success', False):
+            # Re-fetch rules from backend
+            updated_rules = mcp_client.get_rules()
+            
+            rule_name = response.get('rule', {}).get('name', 'Rule')
+            status_msg = f"🗄️ Rule archived: {rule_name}"
+            
+            return (
+                create_interactive_rule_cards(updated_rules),
+                create_preview_banner(get_preview_rules_count(updated_rules)),
+                status_msg,
+                updated_rules
+            )
+        else:
+            error_msg = response.get('error', 'Failed to archive')
+            return (
+                create_interactive_rule_cards(pending_rules),
+                create_preview_banner(get_preview_rules_count(pending_rules)),
+                f"❌ {error_msg}",
+                pending_rules
+            )
+    except Exception as e:
+        print(f"Error archiving rule: {e}")
+        return (
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(get_preview_rules_count(pending_rules)),
+            f"❌ Connection error: {str(e)}",
+            pending_rules
+        )
+
+
+def handle_reactivate_rule(rule_id, mcp_client, pending_rules):
+    """Handle reactivating an archived rule via MCP"""
+    if not rule_id or rule_id.strip() == "":
+        return (
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(get_preview_rules_count(pending_rules)),
+            "❌ Error: No rule ID provided",
+            pending_rules
+        )
+    
+    try:
+        # Reactivate via MCP
+        response = mcp_client.reactivate_rule(rule_id)
+        
+        if response.get('success', False):
+            # Re-fetch rules from backend
+            updated_rules = mcp_client.get_rules()
+            
+            rule_name = response.get('rule', {}).get('name', 'Rule')
+            status_msg = f"✅ Rule reactivated: {rule_name}"
+            
+            return (
+                create_interactive_rule_cards(updated_rules),
+                create_preview_banner(get_preview_rules_count(updated_rules)),
+                status_msg,
+                updated_rules
+            )
+        else:
+            error_msg = response.get('error', 'Failed to reactivate')
+            return (
+                create_interactive_rule_cards(pending_rules),
+                create_preview_banner(get_preview_rules_count(pending_rules)),
+                f"❌ {error_msg}",
+                pending_rules
+            )
+    except Exception as e:
+        print(f"Error reactivating rule: {e}")
+        return (
+            create_interactive_rule_cards(pending_rules),
+            create_preview_banner(get_preview_rules_count(pending_rules)),
+            f"❌ Connection error: {str(e)}",
+            pending_rules
+        )
+
+
+def exit_preview_mode(sort_option, search_query, pending_rules, current_emails, sample_emails):
+    """Exit preview mode by setting all preview rules back to pending"""
+    
+    # Create new list of rules with updated status
+    updated_rules = []
+    for rule in pending_rules:
+        if rule["status"] == "preview":
+            # Create new rule object
+            updated_rule = rule.copy()
+            updated_rule["status"] = "pending"
+            updated_rules.append(updated_rule)
+        else:
+            updated_rules.append(rule)
+    
+    current_emails = sample_emails
+    
+    new_folder_choices = get_folder_dropdown_choices(current_emails)
+    new_folder_value = new_folder_choices[0] if new_folder_choices else "Inbox (0)"
+    filtered_emails = filter_emails(new_folder_value, search_query, sort_option, current_emails)
+    new_email_display = create_email_html(filtered_emails, new_folder_value)
+    
+    return (gr.update(choices=new_folder_choices, value=new_folder_value), 
+            new_email_display, 
+            create_interactive_rule_cards(updated_rules), 
+            create_preview_banner(get_preview_rules_count(updated_rules)), 
+            "🔄 Exited preview mode",
+            updated_rules, current_emails)
+
+
+def get_preview_rules_count(pending_rules):
+    """Get the number of rules currently in preview status"""
+    return len([rule for rule in pending_rules if rule["status"] == "preview"])
+
+
+def create_app(modal_url: str) -> gr.Blocks:
+    """
+    Create the main Gradio app
+    
+    Args:
+        modal_url: URL of the Modal backend server
+        
+    Returns:
+        Gradio Blocks app
+    """
+    
+    # Custom CSS for compact design with unified design system
+    custom_css = """
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+    @import url('https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css');
+    
+    /* Chat input alignment fix */
+    .chat-input-row {
+        display: flex;
+        align-items: stretch;
+    }
+    
+    .chat-input-row > div {
+        display: flex !important;
+        align-items: stretch !important;
+        gap: 8px;
+    }
+    
+    .chat-input-row textarea {
+        min-height: 39.6px;
+    }
+    
+    .chat-input-row button {
+        height: auto !important;
+        padding: 0.5rem 1rem !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.2rem;
+        min-height: 39.6px;
+    }
+    
+    /* Use high-specificity selector to ensure .hide class works */
+    gradio-app .hide {
+        display: none !important;
+    }
+    
+    /* Extra specificity for the main elements to prevent any override */
+    #main_interface.hide,
+    #todo_list_html.hide {
+        display: none !important;
+    }
+    
+    /* CSS Variables for Design System */
+    :root {
+        /* Colors */
+        --color-primary: #007bff;
+        --color-success: #28a745;
+        --color-danger: #dc3545;
+        --color-warning: #fd7e14;
+        --color-info: #17a2b8;
+        --color-dark: #212529;
+        --color-gray: #6c757d;
+        --color-gray-light: #e1e5e9;
+        --color-gray-lighter: #f8f9fa;
+        --color-white: #ffffff;
+        
+        /* Typography */
+        --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        --font-size-xs: 0.75rem;    /* 12px */
+        --font-size-sm: 0.875rem;   /* 14px */
+        --font-size-base: 1rem;     /* 16px */
+        --font-size-lg: 1.125rem;   /* 18px */
+        --font-weight-normal: 400;
+        --font-weight-medium: 500;
+        --font-weight-semibold: 600;
+        --font-weight-bold: 700;
+        
+        /* Spacing (4px base unit) */
+        --spacing-1: 0.25rem;   /* 4px */
+        --spacing-2: 0.5rem;    /* 8px */
+        --spacing-3: 0.75rem;   /* 12px */
+        --spacing-4: 1rem;      /* 16px */
+        --spacing-5: 1.25rem;   /* 20px */
+        --spacing-6: 1.5rem;    /* 24px */
+        
+        /* Borders */
+        --border-width: 1px;
+        --border-radius-sm: 4px;
+        --border-radius: 6px;
+        --border-radius-lg: 8px;
+        
+        /* Shadows */
+        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        
+        /* Transitions */
+        --transition-fast: 150ms ease-in-out;
+        --transition-normal: 200ms ease-in-out;
+        --transition-slow: 300ms ease-in-out;
+    }
+    
+    /* Global Styles */
+    * {
+        font-family: var(--font-family) !important;
+        box-sizing: border-box;
+    }
+    
+    /* Layout - Modern Flexbox Approach */
+    .main-container {
+        height: calc(100vh - 100px);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+    
+    /* Main interface row should be flex container */
+    .main-interface-row {
+        display: flex;
+        height: 100%;
+        gap: var(--spacing-4);
+        overflow: hidden;
+    }
+    
+    /* Each column should be flex container */
+    .main-interface-row > div[class*="gr-column"] {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+    }
+    
+    /* Typography */
+    h3 {
+        margin: 0;
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-semibold);
+    }
+    
+    /* Components */
+    .compact-header {
+        margin: var(--spacing-2) 0;
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-2);
+        min-height: 32px; /* Ensure consistent height */
+    }
+    
+    /* Fix header alignment across columns */
+    .column-header-title {
+        display: flex;
+        align-items: center;
+        height: 32px; /* Fixed height for all headers */
+    }
+    
+    .compact-chat {
+        flex-grow: 1;
+        min-height: 300px;
+        overflow-y: auto;
+        border: var(--border-width) solid var(--color-gray-light);
+        border-radius: var(--border-radius);
+        background: var(--color-white);
+    }
+    
+    .compact-input {
+        font-size: var(--font-size-sm);
+        padding: var(--spacing-2) var(--spacing-3);
+        border: var(--border-width) solid var(--color-gray-light);
+        border-radius: var(--border-radius-sm);
+        transition: all var(--transition-fast);
+    }
+    
+    .compact-input:focus {
+        border-color: var(--color-primary);
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
+    }
+    
+    .compact-buttons {
+        gap: var(--spacing-2);
+        margin-top: var(--spacing-2);
+    }
+    
+    .compact-buttons button,
+    button[size="sm"] {
+        padding: var(--spacing-2) var(--spacing-3);
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-medium);
+        border-radius: var(--border-radius-sm);
+        transition: all var(--transition-fast);
+        cursor: pointer;
+        position: relative;
+    }
+    
+    .compact-buttons button:hover:not(:disabled) {
+        transform: translateY(-1px);
+        box-shadow: var(--shadow);
+    }
+    
+    .compact-buttons button:active:not(:disabled) {
+        transform: translateY(0);
+        box-shadow: var(--shadow-sm);
+    }
+    
+    
+    .compact-rules {
+        flex-grow: 1;
+        overflow-y: auto;
+        padding: var(--spacing-2);
+    }
+    
+    .compact-rules::-webkit-scrollbar,
+    .compact-emails::-webkit-scrollbar,
+    .compact-chat::-webkit-scrollbar {
+        width: 6px;
+    }
+    
+    .compact-rules::-webkit-scrollbar-thumb,
+    .compact-emails::-webkit-scrollbar-thumb,
+    .compact-chat::-webkit-scrollbar-thumb {
+        background: var(--color-gray-light);
+        border-radius: 3px;
+    }
+    
+    .compact-banner {
+        margin-bottom: var(--spacing-2);
+    }
+    
+    .compact-dropdown,
+    .compact-search,
+    .compact-sort {
+        font-size: var(--font-size-sm);
+        padding: var(--spacing-1) var(--spacing-2);
+        border: var(--border-width) solid var(--color-gray-light);
+        border-radius: var(--border-radius-sm);
+        transition: border-color var(--transition-fast);
+    }
+    
+    .compact-controls {
+        gap: var(--spacing-2);
+        margin: var(--spacing-2) 0;
+    }
+    
+    .compact-emails {
+        flex-grow: 1;
+        overflow-y: auto;
+        background: var(--color-white);
+        border: var(--border-width) solid var(--color-gray-light);
+        border-radius: var(--border-radius);
+    }
+    
+    /* Gradio Overrides */
+    .gr-form {
+        gap: var(--spacing-2) !important;
+    }
+    
+    .gr-box {
+        padding: var(--spacing-3) !important;
+        border-radius: var(--border-radius) !important;
+    }
+    
+    .gr-padded {
+        padding: var(--spacing-2) !important;
+    }
+    
+    .gr-panel {
+        padding: var(--spacing-2) !important;
+    }
+    
+    .gr-button {
+        font-family: var(--font-family) !important;
+        font-weight: var(--font-weight-medium) !important;
+        transition: all var(--transition-fast) !important;
+        position: relative !important;
+    }
+    
+    .gr-button:hover:not(:disabled) {
+        transform: translateY(-1px);
+        box-shadow: var(--shadow);
+    }
+    
+    .gr-button:active:not(:disabled) {
+        transform: translateY(0);
+        box-shadow: var(--shadow-sm);
+    }
+    
+    .gr-button[variant="primary"] {
+        background: var(--color-primary) !important;
+        border-color: var(--color-primary) !important;
+    }
+    
+    .gr-button[variant="primary"]:hover:not(:disabled) {
+        background: #0056b3 !important;
+        border-color: #0056b3 !important;
+    }
+    
+    .gr-button[variant="secondary"] {
+        background: var(--color-white) !important;
+        border: var(--border-width) solid var(--color-gray-light) !important;
+        color: var(--color-dark) !important;
+    }
+    
+    .gr-button[variant="secondary"]:hover:not(:disabled) {
+        background: var(--color-gray-lighter) !important;
+        border-color: var(--color-gray) !important;
+    }
+    
+    /* Loading state for buttons */
+    .gr-button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+    
+    /* All interactive elements should have transitions */
+    button, .gr-button, .email-row, .rule-card, input, select, textarea {
+        transition: all var(--transition-fast);
+    }
+    
+    /* Markdown styling */
+    .gr-markdown {
+        font-size: var(--font-size-sm);
+        line-height: 1.5;
+    }
+    
+    .gr-markdown h3 {
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-semibold);
+        margin: var(--spacing-2) 0;
+    }
+    
+    /* Chatbot styling */
+    .gr-chatbot {
+        font-size: var(--font-size-sm);
+    }
+    
+    .gr-chatbot .message {
+        padding: var(--spacing-3);
+        margin: var(--spacing-2) 0;
+        border-radius: var(--border-radius);
+    }
+    
+    /* Send button specific */
+    button[min_width="45"] {
+        min-width: 45px !important;
+        width: 45px !important;
+        padding: var(--spacing-2) !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    /* Draft-specific styles */
+    .draft-indicator {
+        font-size: var(--font-size-sm);
+        margin-right: var(--spacing-1);
+        display: inline-flex;
+        align-items: center;
+    }
+    
+    .draft-preview {
+        margin-top: var(--spacing-4);
+        padding: var(--spacing-3);
+        background-color: #e3f2fd;
+        border-radius: var(--border-radius);
+        border-left: 4px solid #2196f3;
+        animation: fadeIn var(--transition-normal);
+    }
+    
+    .draft-preview h4 {
+        margin: 0 0 var(--spacing-2) 0;
+        color: #1976d2;
+        font-size: var(--font-size-sm);
+        display: flex;
+        align-items: center;
+    }
+    
+    .draft-preview button {
+        font-size: var(--font-size-xs);
+        padding: 4px 12px;
+        background: #2196f3;
+        color: white;
+        border: none;
+        border-radius: var(--border-radius-sm);
+        cursor: pointer;
+        transition: all var(--transition-fast);
+    }
+    
+    .draft-preview button:hover:not(:disabled) {
+        background: #1976d2;
+        transform: translateY(-1px);
+        box-shadow: var(--shadow-sm);
+    }
+    
+    .draft-preview button:active:not(:disabled) {
+        transform: translateY(0);
+        box-shadow: none;
+    }
+    
+    @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(-10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    
+    /* New sleek two-row rule cards */
+    .rule-card-v2 {
+        border: 1px solid var(--color-gray-light);
+        border-left-width: 4px;
+        padding: var(--spacing-2) var(--spacing-3);
+        margin-bottom: var(--spacing-2);
+        background: var(--color-white);
+        transition: all var(--transition-fast);
+        border-radius: var(--border-radius-sm);
+        cursor: pointer;
+    }
+    
+    .rule-card-v2:hover {
+        box-shadow: var(--shadow);
+        transform: translateY(-1px);
+    }
+    
+    /* Expand arrow */
+    .rule-expand-arrow {
+        display: inline-block;
+        width: 16px;
+        color: var(--color-gray);
+        font-size: var(--font-size-xs);
+        transition: transform var(--transition-fast);
+        margin-right: var(--spacing-2);
+    }
+    
+    .rule-expand-arrow.expanded {
+        transform: rotate(90deg);
+    }
+    
+    /* Rule details section */
+    .rule-details {
+        padding-top: var(--spacing-2);
+        border-top: 1px solid var(--color-gray-light);
+        margin-top: var(--spacing-2);
+        font-size: var(--font-size-xs);
+        color: var(--color-dark);
+    }
+    
+    .rule-details strong {
+        color: var(--color-gray);
+        font-weight: var(--font-weight-semibold);
+    }
+    
+    .rule-details ul {
+        list-style-type: disc;
+        margin: var(--spacing-1) 0;
+    }
+    
+    .rule-details li {
+        color: var(--color-dark);
+        line-height: 1.4;
+    }
+    
+    /* Status-specific left border colors */
+    .rule-status-pending { border-left-color: var(--color-gray); }
+    .rule-status-preview { border-left-color: var(--color-warning); }
+    .rule-status-accepted { border-left-color: var(--color-success); }
+    
+    .rule-row-1, .rule-row-2 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    
+    .rule-row-1 {
+        margin-bottom: var(--spacing-2);
+    }
+    
+    .rule-name {
+        font-weight: var(--font-weight-semibold);
+        font-size: var(--font-size-sm);
+        color: var(--color-dark);
+    }
+    
+    .rule-actions {
+        display: flex;
+        gap: var(--spacing-2);
+    }
+    
+    /* Button specific styles */
+    .rule-btn {
+        padding: 6px 12px;
+        font-size: var(--font-size-xs);
+        font-weight: var(--font-weight-medium);
+        border-radius: var(--border-radius-sm);
+        transition: all var(--transition-fast);
+        cursor: pointer;
+        border: 1px solid transparent;
+    }
+    
+    .rule-btn:hover {
+        transform: translateY(-1px);
+        box-shadow: var(--shadow-sm);
+    }
+    
+    .rule-btn.accept-btn {
+        background-color: var(--color-success);
+        color: white;
+        border-color: var(--color-success);
+    }
+    
+    .rule-btn.accept-btn:hover {
+        background-color: #218838;
+    }
+    
+    .rule-btn.reject-btn {
+        background-color: var(--color-danger);
+        color: white;
+        border-color: var(--color-danger);
+    }
+    
+    .rule-btn.reject-btn:hover {
+        background-color: #c82333;
+    }
+    
+    .rule-btn.run-btn, .rule-btn.preview-btn {
+        background-color: var(--color-white);
+        color: var(--color-primary);
+        border: 1px solid var(--color-primary);
+    }
+    
+    .rule-btn.run-btn:hover, .rule-btn.preview-btn:hover {
+        background-color: var(--color-primary);
+        color: white;
+    }
+    
+    .rule-btn.archive-btn {
+        background-color: transparent;
+        color: var(--color-gray);
+        border: 1px solid var(--color-gray-light);
+    }
+    
+    .rule-btn.archive-btn:hover {
+        background-color: var(--color-gray-lighter);
+        border-color: var(--color-gray);
+    }
+    
+    /* Demo Checklist Styles */
+    .demo-checklist {
+        position: fixed;
+        top: 80px;
+        right: 20px;
+        width: 320px;
+        background: var(--color-white);
+        border: 2px solid var(--color-primary);
+        border-radius: var(--border-radius-lg);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+        z-index: 1000;
+        display: none;
+        flex-direction: column;
+        transition: all var(--transition-normal);
+    }
+    
+    .demo-checklist.show {
+        display: flex;
+    }
+    
+    .demo-checklist.initial-show {
+        animation: slideInRight 0.5s ease-out forwards;
+    }
+    
+    .demo-checklist.minimized {
+        height: auto;
+    }
+    
+    .demo-checklist.minimized .checklist-body {
+        display: none;
+    }
+    
+    @keyframes slideInRight {
+        from {
+            transform: translateX(400px);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+    }
+    
+    .demo-checklist.pulse-animation {
+        animation: pulse 0.5s ease-out 3;
+    }
+    
+    .checklist-header {
+        padding: var(--spacing-3) var(--spacing-4);
+        background: linear-gradient(135deg, var(--color-primary), #0056b3);
+        color: var(--color-white);
+        cursor: move;
+        border-radius: var(--border-radius) var(--border-radius) 0 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: var(--font-weight-bold);
+        font-size: var(--font-size-base);
+        user-select: none;
+    }
+    
+    .checklist-header:hover {
+        background: linear-gradient(135deg, #0056b3, var(--color-primary));
+    }
+    
+    .checklist-header:active {
+        cursor: grabbing;
+    }
+    
+    .minimize-btn {
+        background: rgba(255, 255, 255, 0.2);
+        border: none;
+        color: var(--color-white);
+        padding: 4px 8px;
+        border-radius: var(--border-radius-sm);
+        cursor: pointer;
+        font-size: var(--font-size-sm);
+        transition: all var(--transition-fast);
+    }
+    
+    .minimize-btn:hover {
+        background: rgba(255, 255, 255, 0.3);
+        transform: scale(1.1);
+    }
+    
+    .checklist-body {
+        padding: var(--spacing-3);
+        overflow-y: auto;
+        flex: 1;
+        max-height: 350px;
+    }
+    
+    .progress-section {
+        margin-bottom: var(--spacing-3);
+        padding: var(--spacing-2);
+        background: var(--color-gray-lighter);
+        border-radius: var(--border-radius-sm);
+    }
+    
+    .progress-label {
+        font-size: var(--font-size-sm);
+        font-weight: var(--font-weight-medium);
+        color: var(--color-dark);
+        margin-bottom: var(--spacing-1);
+    }
+    
+    .progress-bar {
+        width: 100%;
+        height: 8px;
+        background: var(--color-gray-light);
+        border-radius: 4px;
+        overflow: hidden;
+    }
+    
+    .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, var(--color-success), #22c55e);
+        width: 0%;
+        transition: width var(--transition-normal);
+    }
+    
+    .checklist-item {
+        padding: var(--spacing-2) var(--spacing-1);
+        border-radius: var(--border-radius-sm);
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-2);
+        transition: all var(--transition-fast);
+        cursor: pointer;
+    }
+    
+    .checklist-item:hover {
+        background: var(--color-gray-lighter);
+        transform: translateX(4px);
+    }
+    
+    .checklist-checkbox {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+        accent-color: var(--color-success);
+    }
+    
+    .checklist-text {
+        flex: 1;
+        font-size: var(--font-size-sm);
+        transition: all var(--transition-fast);
+        user-select: none;
+    }
+    
+    .checklist-item.completed .checklist-text {
+        text-decoration: line-through;
+        color: var(--color-gray);
+        opacity: 0.7;
+    }
+    
+    .checklist-item.completed {
+        background: rgba(40, 167, 69, 0.1);
+    }
+    
+    /* Animation for completion */
+    @keyframes checkComplete {
+        0% { transform: scale(1) rotate(0deg); }
+        50% { transform: scale(1.2) rotate(5deg); }
+        100% { transform: scale(1) rotate(0deg); }
+    }
+    
+    .checklist-item.completed .checklist-checkbox {
+        animation: checkComplete 0.3s ease-out;
+    }
+    
+    /* Header progress indicator */
+    .header-progress {
+        display: none;
+        font-size: 0.9rem;
+        color: rgba(255, 255, 255, 0.9);
+        margin: 0 10px;
+    }
+    
+    .demo-checklist.minimized .header-progress {
+        display: inline;
+    }
+    
+    /* Celebration Overlay Styles */
+    .celebration-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s ease-in-out;
+        border-radius: var(--border-radius-lg);
+        z-index: 10;
+    }
+    
+    .celebration-overlay:not(.hidden) {
+        opacity: 1;
+        pointer-events: auto;
+    }
+    
+    .celebration-content {
+        background: white;
+        padding: 2rem;
+        border-radius: 12px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+        text-align: center;
+        transform: scale(0.8);
+        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        position: relative;
+    }
+    
+    .celebration-overlay:not(.hidden) .celebration-content {
+        transform: scale(1);
+    }
+    
+    .celebration-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: none;
+        border: none;
+        font-size: 24px;
+        cursor: pointer;
+        color: #666;
+        transition: color 0.2s;
+    }
+    
+    .celebration-close:hover {
+        color: #333;
+    }
+    
+    .celebration-heading {
+        margin: 0 0 1rem 0;
+        font-size: 1.5rem;
+        color: var(--color-primary);
+    }
+    
+    .celebration-message {
+        margin: 0;
+        font-size: 1rem;
+        color: #555;
+    }
+    """
+    
+    # Create the Gradio interface
+    with gr.Blocks(title="Email Rule Agent", theme=gr.themes.Soft(), css=custom_css) as demo:
+        # Initialize state variables
+        session_id = gr.State(value=str(uuid.uuid4()))
+        mcp_client_state = gr.State()
+        
+        # Email state
+        sample_emails_state = gr.State([])
+        preview_emails_state = gr.State([])
+        current_emails_state = gr.State([])
+        expanded_email_id_state = gr.State(None)
+        
+        # Rule state
+        pending_rules_state = gr.State([])
+        applied_rules_state = gr.State([])
+        rule_counter_state = gr.State(0)
+        
+        gr.Markdown("# 📧 Email Rule Agent")
+        gr.Markdown("*Intelligent email management powered by AI*")
+        
+        # Add login choice
+        with gr.Row(visible=True, elem_id="login_row") as login_row:
+            with gr.Column():
+                gr.Markdown("## Welcome! Choose how to get started:")
+                with gr.Row():
+                    demo_btn = gr.Button("🎮 Try with Demo Data", variant="primary", scale=1)
+                    gmail_btn = gr.Button("📧 Login with Gmail *Work in Progress*", variant="secondary", scale=1)
+        
+        # Loading indicator (initially hidden)
+        with gr.Column(visible=False, elem_id="loading_indicator") as loading_indicator:
+            gr.HTML("""
+                <div style="text-align: center; padding: 50px;">
+                    <div style="display: inline-block; width: 50px; height: 50px; border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #007bff; animation: spin 1s linear infinite;"></div>
+                    <h3 style="margin-top: 20px; color: #666;">Initializing Email Rule Agent...</h3>
+                    <p style="color: #999;">Connecting to backend and loading your emails...</p>
+                </div>
+                <style>
+                    @keyframes spin {
+                        0% { transform: rotate(0deg); }
+                        100% { transform: rotate(360deg); }
+                    }
+                </style>
+            """)
+        
+        # Main interface (initially hidden)
+        with gr.Column(visible=False, elem_id="main_interface") as main_interface:
+            # Preview banner above all columns
+            preview_banner = gr.HTML(create_preview_banner(0), elem_classes="compact-banner")
+            
+            # 3 column layout
+            with gr.Row(elem_classes="main-interface-row"):
+                # Left column - Chat Interface (35%)
+                with gr.Column(scale=35, min_width=300):
+                    gr.Markdown("### 💬 Chat", elem_classes="compact-header column-header-title")
+                    chatbot = gr.Chatbot(
+                        value=[],
+                        type="messages",
+                        height="40vh",
+                        render_markdown=True,
+                        sanitize_html=False,  # Allow our custom HTML for tool messages
+                        elem_classes="compact-chat",
+                        label=None,
+                        show_label=False
+                    )
+                    
+                    with gr.Row(elem_classes="chat-input-row"):
+                        msg_input = gr.Textbox(
+                            placeholder="Describe how you want to organize your emails...",
+                            container=False,
+                            elem_classes="compact-input",
+                            scale=8
+                        )
+                        send_btn = gr.Button("❯", scale=1, variant="primary", min_width=45)
+                    
+                    # Quick action buttons with text
+                    with gr.Row(elem_classes="compact-buttons"):
+                        analyze_btn = gr.Button("🔍 Analyze Inbox *WIP*", scale=1, size="sm")
+                        draft_btn = gr.Button("📝 Draft Replies *WIP*", scale=1, size="sm")
+                
+                # Middle column - Rules (25%)
+                with gr.Column(scale=25, min_width=250):
+                    gr.Markdown("### 📋 Rules", elem_classes="compact-header column-header-title")
+                    
+                    # Hidden status message (we'll show messages inline or as toasts)
+                    status_msg = gr.Textbox(
+                        value="",
+                        visible=False,
+                        elem_id="status_msg"
+                    )
+                
+                    # Hidden components for JavaScript interaction
+                    with gr.Row(visible=False):
+                        preview_btn = gr.Button("Preview", elem_id="hidden_preview_btn")
+                        accept_btn = gr.Button("Accept", elem_id="hidden_accept_btn")
+                        reject_btn = gr.Button("Reject", elem_id="hidden_reject_btn")
+                        exit_preview_btn = gr.Button("Exit Preview", elem_id="hidden_exit_preview_btn")
+                        run_rule_btn = gr.Button("Run Rule", elem_id="hidden_run_rule_btn")
+                        archive_rule_btn = gr.Button("Archive Rule", elem_id="hidden_archive_rule_btn")
+                        reactivate_rule_btn = gr.Button("Reactivate Rule", elem_id="hidden_reactivate_rule_btn")
+                        current_rule_id = gr.Textbox(visible=False, elem_id="current_rule_id")
+                        
+                        # For email expansion
+                        expand_email_btn = gr.Button("Expand", elem_id="hidden_expand_email_btn")
+                        current_email_id_input = gr.Textbox(visible=False, elem_id="current_email_id_input")
+
+                    # Rule cards display with scroll
+                    rule_cards = gr.HTML(
+                        create_interactive_rule_cards([]),
+                        elem_classes="compact-rules"
+                    )
+                
+                # Right column - Email Display (40%)
+                with gr.Column(scale=40, min_width=350):
+                    # Email header now at the top like other columns
+                    gr.Markdown("### 📧 Emails", elem_classes="compact-header column-header-title")
+                    
+                    # Folder dropdown (separate row)
+                    with gr.Row(elem_classes="compact-controls"):
+                        folder_dropdown = gr.Dropdown(
+                            choices=["Inbox (0)"],
+                            value="Inbox (0)",
+                            container=False,
+                            scale=1,
+                            elem_classes="compact-dropdown"
+                        )
+                    
+                    # Search and sort
+                    with gr.Row(elem_classes="compact-controls"):
+                        search_box = gr.Textbox(
+                            placeholder="Search...",
+                            container=False,
+                            scale=3,
+                            elem_classes="compact-search"
+                        )
+                        sort_dropdown = gr.Dropdown(
+                            choices=["Newest", "Oldest"],
+                            value="Newest",
+                            container=False,
+                            scale=1,
+                            elem_classes="compact-sort"
+                        )
+                    
+                    # Email list with scroll
+                    email_display = gr.HTML(
+                        value=create_email_html([]),
+                        elem_classes="compact-emails"
+                    )
+        
+        # Add Demo Checklist HTML (initially hidden)
+        todo_list_html = gr.HTML("""
+        <div class="demo-checklist" id="demo-checklist">
+            <div class="checklist-header" onmousedown="startDrag(event)">
+                <span>🚀 Demo Checklist</span>
+                <span class="header-progress" id="header-progress"></span>
+                <button class="minimize-btn" id="minimize-btn" onclick="toggleChecklist(event)">▼</button>
+            </div>
+            <div class="checklist-body">
+                <div class="progress-section">
+                    <div class="progress-label">Progress: <span id="progress-text">0/5 completed</span></div>
+                    <div class="progress-bar">
+                        <div class="progress-fill" id="progress-fill"></div>
+                    </div>
+                </div>
+                <div class="checklist-items">
+                    <div class="checklist-item" data-action="manual-rule">
+                        <input type="checkbox" class="checklist-checkbox" onchange="updateProgress()">
+                        <span class="checklist-text">🚗 Create rule: "Move Uber receipts to travel folder"</span>
+                    </div>
+                    <div class="checklist-item" data-action="preview">
+                        <input type="checkbox" class="checklist-checkbox" onchange="updateProgress()">
+                        <span class="checklist-text">👁️ Preview the rule to see affected emails</span>
+                    </div>
+                    <div class="checklist-item" data-action="accept">
+                        <input type="checkbox" class="checklist-checkbox" onchange="updateProgress()">
+                        <span class="checklist-text">✅ Accept the rule and organize emails</span>
+                    </div>
+                </div>
+            </div>
+            <div id="celebration-overlay" class="celebration-overlay hidden">
+                <div class="celebration-content">
+                    <button class="celebration-close" onclick="dismissCelebration()">×</button>
+                    <h3 class="celebration-heading">🎉 All Done! 🎉</h3>
+                    <p class="celebration-message">Thank you for demoing our hackathon app!</p>
+                </div>
+            </div>
+        </div>
+        """, visible=False, elem_id="todo_list_html")
+        
+        # Initialize data on load
+        def initialize_app(session_id):
+            """Initialize app with data from MCP backend"""
+            # Initialize MCP client with session
+            mcp_client = MCPClient(modal_url, session_token=session_id)
+            
+            # Fetch initial data from backend
+            email_response = mcp_client.list_emails(folder='inbox', page_size=50)
+            initial_rules = mcp_client.get_rules()
+            
+            # Extract data from responses
+            initial_emails = email_response.get('emails', [])
+            
+            # For preview functionality, fetch a different set
+            preview_response = mcp_client.list_emails(folder='inbox', page_size=20)
+            preview_emails = preview_response.get('emails', [])
+            
+            # Initialize rule counter based on existing rules
+            rule_counter = len(initial_rules)
+            
+            # Create welcome message
+            welcome_chat = [{
+                "role": "assistant",
+                "content": """👋 Hi! I'm your Email Organization Assistant. I can help you:
+
+• 📋 **Create smart filters** to automatically organize emails  
+• 🏷️ **Set up labels** for different types of emails
+• 📁 **Move emails** to folders based on sender, subject, or content
+
+Try clicking "Analyze" below or tell me how you'd like to organize your emails!"""
+            }]
+            
+            # Update UI components
+            folder_choices = get_folder_dropdown_choices(initial_emails)
+            initial_folder = folder_choices[0] if folder_choices else "Inbox (0)"
+            initial_email_html = create_email_html(initial_emails)
+            initial_rule_cards = create_interactive_rule_cards(initial_rules)
+            initial_preview_banner = create_preview_banner(get_preview_rules_count(initial_rules))
+            
+            return (
+                mcp_client,  # mcp_client_state
+                initial_emails,  # sample_emails_state
+                preview_emails,  # preview_emails_state
+                initial_emails,  # current_emails_state
+                initial_rules,  # pending_rules_state
+                [],  # applied_rules_state
+                rule_counter,  # rule_counter_state
+                gr.update(choices=folder_choices, value=initial_folder),  # folder_dropdown
+                initial_email_html,  # email_display
+                initial_rule_cards,  # rule_cards
+                initial_preview_banner,  # preview_banner
+                welcome_chat,  # chatbot initial value
+                None # expanded_email_id_state
+            )
+        
+        # Event handlers
+        def start_demo_mode(session_id):
+            try:
+                # Initialize and set session to demo mode
+                results = initialize_app(session_id)
+                mcp_client = results[0]
+                mcp_client.set_mode('mock')
+                return (
+                    *results,
+                    gr.update(visible=False),  # login_row
+                    gr.update(visible=False),  # loading_indicator
+                    gr.update(visible=True),   # main_interface
+                    gr.update(visible=True)    # todo_list_html
+                )
+            except Exception as e:
+                print(f"Error initializing app: {e}")
+                error_chat = [{
+                    "role": "assistant",
+                    "content": f"❌ **Failed to initialize the app**\n\nError: {str(e)}\n\nPlease try refreshing the page or running in local mode with `python app.py --local`"
+                }]
+                # Return minimal state with error message
+                return (
+                    MCPClient('local://mock'),  # mcp_client_state
+                    [],  # sample_emails_state
+                    [],  # preview_emails_state
+                    [],  # current_emails_state
+                    [],  # pending_rules_state
+                    [],  # applied_rules_state
+                    0,   # rule_counter_state
+                    gr.update(choices=["Inbox (0)"], value="Inbox (0)"),  # folder_dropdown
+                    create_email_html([]),  # email_display
+                    create_interactive_rule_cards([]),  # rule_cards
+                    create_preview_banner(0),  # preview_banner
+                    error_chat,  # chatbot
+                    None,  # expanded_email_id_state
+                    gr.update(visible=True),   # login_row (show again)
+                    gr.update(visible=False),  # loading_indicator
+                    gr.update(visible=False),  # main_interface
+                    gr.update(visible=False)   # todo_list_html
+                )
+        
+        def start_gmail_mode(session_id):
+            try:
+                # Initialize and get Gmail OAuth URL
+                results = initialize_app(session_id)
+                mcp_client = results[0]
+                auth_url = mcp_client.get_gmail_auth_url()
+                if auth_url:
+                    # In a real app, we'd redirect to this URL
+                    print(f"Gmail auth URL: {auth_url}")
+                return (
+                    *results,
+                    gr.update(visible=False),  # login_row
+                    gr.update(visible=False),  # loading_indicator
+                    gr.update(visible=True),   # main_interface
+                    gr.update(visible=True)    # todo_list_html
+                )
+            except Exception as e:
+                print(f"Error initializing Gmail mode: {e}")
+                # Return same error state as demo mode
+                error_chat = [{
+                    "role": "assistant",
+                    "content": f"❌ **Failed to initialize Gmail mode**\n\nError: {str(e)}\n\nPlease try the demo mode or check your connection."
+                }]
+                return (
+                    MCPClient('local://mock'),  # mcp_client_state
+                    [],  # sample_emails_state
+                    [],  # preview_emails_state
+                    [],  # current_emails_state
+                    [],  # pending_rules_state
+                    [],  # applied_rules_state
+                    0,   # rule_counter_state
+                    gr.update(choices=["Inbox (0)"], value="Inbox (0)"),  # folder_dropdown
+                    create_email_html([]),  # email_display
+                    create_interactive_rule_cards([]),  # rule_cards
+                    create_preview_banner(0),  # preview_banner
+                    error_chat,  # chatbot
+                    None,  # expanded_email_id_state
+                    gr.update(visible=True),   # login_row (show again)
+                    gr.update(visible=False),  # loading_indicator
+                    gr.update(visible=False),  # main_interface
+                    gr.update(visible=False)   # todo_list_html
+                )
+        
+        # Show loading function
+        def show_loading():
+            return (
+                gr.update(visible=False),  # login_row
+                gr.update(visible=True)    # loading_indicator
+            )
+        
+        demo_btn.click(
+            show_loading,
+            inputs=None,
+            outputs=[login_row, loading_indicator],
+            queue=False
+        ).then(
+            start_demo_mode,
+            inputs=[session_id],
+            outputs=[
+                mcp_client_state, sample_emails_state, preview_emails_state, current_emails_state,
+                pending_rules_state, applied_rules_state, rule_counter_state,
+                folder_dropdown, email_display, rule_cards, preview_banner, chatbot,
+                expanded_email_id_state,
+                login_row, loading_indicator, main_interface, todo_list_html
+            ]
+        ).then(
+            None,
+            None,
+            None,
+            js="() => { setTimeout(() => window.showDemoChecklist(), 100); }"
+        )
+        
+        gmail_btn.click(
+            show_loading,
+            inputs=None,
+            outputs=[login_row, loading_indicator],
+            queue=False
+        ).then(
+            start_gmail_mode,
+            inputs=[session_id],
+            outputs=[
+                mcp_client_state, sample_emails_state, preview_emails_state, current_emails_state,
+                pending_rules_state, applied_rules_state, rule_counter_state,
+                folder_dropdown, email_display, rule_cards, preview_banner, chatbot,
+                expanded_email_id_state,
+                login_row, loading_indicator, main_interface, todo_list_html
+            ]
+        )
+        
+        # Use the streaming chat handler
+        
+        send_btn.click(
+            process_chat_streaming,
+            inputs=[msg_input, chatbot, mcp_client_state, current_emails_state,
+                   pending_rules_state, applied_rules_state, rule_counter_state],
+            outputs=[chatbot, msg_input, rule_cards, status_msg,
+                    pending_rules_state, rule_counter_state],
+            show_progress="full"  # Show progress for streaming
+        )
+        
+        msg_input.submit(
+            process_chat_streaming,
+            inputs=[msg_input, chatbot, mcp_client_state, current_emails_state,
+                   pending_rules_state, applied_rules_state, rule_counter_state],
+            outputs=[chatbot, msg_input, rule_cards, status_msg,
+                    pending_rules_state, rule_counter_state],
+            show_progress="full"
+        )
+        
+        # Quick action handlers with streaming
+        def analyze_inbox(hist, mcp, emails, pend, appl, cnt):
+            yield from process_chat_streaming(
+                "Analyze my inbox and suggest organization rules", 
+                hist, mcp, emails, pend, appl, cnt
+            )
+        
+        analyze_btn.click(
+            analyze_inbox,
+            inputs=[chatbot, mcp_client_state, current_emails_state,
+                   pending_rules_state, applied_rules_state, rule_counter_state],
+            outputs=[chatbot, msg_input, rule_cards, status_msg,
+                    pending_rules_state, rule_counter_state],
+            show_progress="full"
+        )
+        
+        def draft_replies(hist, mcp, emails, pend, appl, cnt):
+            yield from process_chat_streaming(
+                "Draft polite replies to all meeting invitations saying I'll check my calendar and get back to them", 
+                hist, mcp, emails, pend, appl, cnt
+            )
+        
+        draft_btn.click(
+            draft_replies,
+            inputs=[chatbot, mcp_client_state, current_emails_state,
+                   pending_rules_state, applied_rules_state, rule_counter_state],
+            outputs=[chatbot, msg_input, rule_cards, status_msg,
+                    pending_rules_state, rule_counter_state],
+            show_progress="full"
+        )
+        
+        # Email display handlers
+        def update_emails(folder, sort_option, search_query, current_emails):
+            filtered_emails = filter_emails(folder, search_query, sort_option, current_emails)
+            return create_email_html(filtered_emails, folder)
+        
+        folder_dropdown.change(
+            update_emails,
+            inputs=[folder_dropdown, sort_dropdown, search_box, current_emails_state],
+            outputs=[email_display]
+        )
+        
+        sort_dropdown.change(
+            lambda folder, sort, search, emails: update_emails(
+                folder, 
+                "Newest First" if sort == "Newest" else "Oldest First",
+                search,
+                emails
+            ),
+            inputs=[folder_dropdown, sort_dropdown, search_box, current_emails_state],
+            outputs=[email_display]
+        )
+        
+        search_box.change(
+            update_emails,
+            inputs=[folder_dropdown, sort_dropdown, search_box, current_emails_state],
+            outputs=[email_display]
+        )
+        
+        # Rule action handlers
+        preview_btn.click(
+            handle_preview_rule,
+            inputs=[current_rule_id, sort_dropdown, search_box, mcp_client_state,
+                   pending_rules_state, current_emails_state, sample_emails_state, preview_emails_state],
+            outputs=[folder_dropdown, email_display, rule_cards, preview_banner, status_msg,
+                    pending_rules_state, current_emails_state]
+        )
+        
+        accept_btn.click(
+            lambda rule_id, folder, sort, search, mcp, pend, appl, curr, samp: handle_accept_rule(
+                rule_id, mcp, folder, sort, search, pend, appl, curr, samp),
+            inputs=[current_rule_id, folder_dropdown, sort_dropdown, search_box, mcp_client_state,
+                   pending_rules_state, applied_rules_state, current_emails_state, sample_emails_state],
+            outputs=[rule_cards, preview_banner, status_msg, email_display, folder_dropdown,
+                    pending_rules_state, applied_rules_state, current_emails_state, sample_emails_state]
+        )
+        
+        reject_btn.click(
+            handle_archive_rule,
+            inputs=[current_rule_id, mcp_client_state, pending_rules_state],
+            outputs=[rule_cards, preview_banner, status_msg, pending_rules_state]
+        )
+        
+        exit_preview_btn.click(
+            lambda sort, search, pend, curr, samp: exit_preview_mode(sort, search, pend, curr, samp),
+            inputs=[sort_dropdown, search_box, pending_rules_state, current_emails_state, sample_emails_state],
+            outputs=[folder_dropdown, email_display, rule_cards, preview_banner, status_msg,
+                    pending_rules_state, current_emails_state]
+        )
+        
+        run_rule_btn.click(
+            lambda rule_id, folder, sort, search, mcp, pend, appl, curr, samp: handle_run_rule(
+                rule_id, mcp, folder, sort, search, pend, appl, curr, samp),
+            inputs=[current_rule_id, folder_dropdown, sort_dropdown, search_box, mcp_client_state,
+                   pending_rules_state, applied_rules_state, current_emails_state, sample_emails_state],
+            outputs=[rule_cards, preview_banner, status_msg, email_display, folder_dropdown,
+                    pending_rules_state, applied_rules_state, current_emails_state, sample_emails_state]
+        )
+        
+        archive_rule_btn.click(
+            handle_archive_rule,
+            inputs=[current_rule_id, mcp_client_state, pending_rules_state],
+            outputs=[rule_cards, preview_banner, status_msg, pending_rules_state]
+        )
+        
+        reactivate_rule_btn.click(
+            handle_reactivate_rule,
+            inputs=[current_rule_id, mcp_client_state, pending_rules_state],
+            outputs=[rule_cards, preview_banner, status_msg, pending_rules_state]
+        )
+        
+        # Email expansion handler
+        def toggle_email_expansion_handler(email_id, folder, sort, search, current_emails, current_expanded_id):
+            new_expanded_id = email_id if email_id != current_expanded_id else None
+            filtered_emails = filter_emails(folder, search, sort, current_emails)
+            html = create_email_html(filtered_emails, folder, expanded_email_id=new_expanded_id)
+            return html, new_expanded_id
+
+        expand_email_btn.click(
+            toggle_email_expansion_handler,
+            inputs=[current_email_id_input, folder_dropdown, sort_dropdown, search_box, current_emails_state, expanded_email_id_state],
+            outputs=[email_display, expanded_email_id_state]
+        )
+        
+        # Load JavaScript handlers
+        demo.load(
+            None,
+            inputs=None,
+            outputs=None,
+            js=get_javascript_handlers()
+        )
+    
+    return demo
+
+
+def launch_app(demo: gr.Blocks):
+    """Launch the Gradio app"""
+    demo.launch()
+
+
+def get_javascript_handlers():
+    """Get JavaScript code for handling UI interactions"""
+    return """
+    () => {
+        // Load Toastify.js dynamically
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/toastify-js';
+        document.head.appendChild(script);
+        
+        // Toast notification function
+        window.showToast = function(message, type = 'info') {
+            if (!window.Toastify) {
+                console.log('Toast:', message);
+                return;
+            }
+            
+            let backgroundColor = "linear-gradient(to right, #00b09b, #96c93d)"; // Default success
+            
+            // Determine color based on message content or type
+            if (message.startsWith("❌") || message.toLowerCase().includes("error") || type === 'error') {
+                backgroundColor = "linear-gradient(to right, #ff5f6d, #ffc371)"; // Error
+            } else if (message.startsWith("⚠️") || message.startsWith("👁️") || type === 'warning') {
+                backgroundColor = "linear-gradient(to right, #ffd166, #f77f00)"; // Warning
+            } else if (message.startsWith("✅") || message.startsWith("✓") || type === 'success') {
+                backgroundColor = "linear-gradient(to right, #00b09b, #96c93d)"; // Success
+            } else if (message.startsWith("🗄️") || message.startsWith("🔄") || type === 'info') {
+                backgroundColor = "linear-gradient(to right, #667eea, #764ba2)"; // Info
+            }
+            
+            Toastify({
+                text: message,
+                duration: 3000,
+                close: true,
+                gravity: "top",
+                position: "right",
+                stopOnFocus: true,
+                style: {
+                    background: backgroundColor,
+                },
+                onClick: function(){} // Callback after click
+            }).showToast();
+        };
+        
+        // Set up observer for status_msg changes
+        setTimeout(() => {
+            const statusContainer = document.getElementById('status_msg');
+            if (statusContainer) {
+                const statusTextarea = statusContainer.querySelector('textarea');
+                if (statusTextarea) {
+                    // Previous value to detect changes
+                    let previousValue = statusTextarea.value;
+                    
+                    // List of status messages to ignore (agent typing/processing messages)
+                    const ignoredStatuses = [
+                        'Processing...', 
+                        'Typing...', 
+                        'Analyzing emails...', 
+                        'Creating rules...',
+                        'Ready...',
+                        'Complete',
+                        'API key missing'
+                    ];
+                    
+                    // Track if we've shown a toast recently to prevent duplicates
+                    let lastToastTime = 0;
+                    const TOAST_DEBOUNCE = 500; // 500ms between toasts
+                    
+                    // Function to handle status changes
+                    const handleStatusChange = () => {
+                        const currentValue = statusTextarea.value;
+                        const now = Date.now();
+                        
+                        if (currentValue && currentValue.trim() && currentValue !== previousValue) {
+                            // Check if we've shown a toast recently
+                            if (now - lastToastTime < TOAST_DEBOUNCE) {
+                                return;
+                            }
+                            
+                            // Don't show toast for agent typing/processing messages
+                            const isIgnored = ignoredStatuses.some(status => 
+                                currentValue === status || currentValue.startsWith(status)
+                            );
+                            
+                            // Only show toast for actual status updates (errors, rule actions, etc.)
+                            if (!isIgnored && !currentValue.includes('Found') && !currentValue.includes('rules')) {
+                                window.showToast(currentValue);
+                                lastToastTime = now;
+                            }
+                            
+                            previousValue = currentValue;
+                            // Clear after showing toast
+                            setTimeout(() => {
+                                statusTextarea.value = '';
+                                previousValue = '';
+                            }, 200);
+                        }
+                    };
+                    
+                    // Listen for input events
+                    statusTextarea.addEventListener('input', handleStatusChange);
+                    
+                    // Also check periodically as backup (less frequent)
+                    setInterval(handleStatusChange, 300);
+                    
+                    console.log('Toast notification system initialized');
+                } else {
+                    console.error('Status textarea not found');
+                }
+            } else {
+                console.error('Status container not found');
+            }
+        }, 1000);
+        
+        // Expose email handler to global scope
+        window.handleEmailAction = (emailId) => {
+            console.log(`handleEmailAction called with emailId: ${emailId}`);
+            
+            const container = document.getElementById('current_email_id_input');
+            let emailIdInput = null;
+            if (container) {
+                emailIdInput = container.querySelector('input, textarea');
+            }
+
+            if (emailIdInput) {
+                emailIdInput.value = emailId;
+                emailIdInput.dispatchEvent(new Event('input', { bubbles: true }));
+                emailIdInput.dispatchEvent(new Event('change', { bubbles: true }));
+                
+                setTimeout(() => {
+                    const targetButton = document.getElementById('hidden_expand_email_btn');
+                    if (targetButton) {
+                        targetButton.click();
+                    } else {
+                        console.error('Hidden expand email button not found');
+                    }
+                }, 100);
+            } else {
+                console.error('Email ID input field not found');
+            }
+        };
+
+        // Set up global click handler once
+        console.log('Setting up global click handler');
+        document.addEventListener('click', globalClickHandler);
+        
+        function globalClickHandler(e) {
+            // Use a single selector for all action buttons
+            const actionBtn = e.target.closest('.preview-btn, .accept-btn, .reject-btn, .run-btn, .archive-btn, .reactivate-btn');
+            
+            if (actionBtn) {
+                e.preventDefault();
+                e.stopPropagation(); // Stop propagation AFTER we handle it
+                
+                // Extract action from class name (skip 'rule-btn')
+                const action = Array.from(actionBtn.classList)
+                    .find(c => c.endsWith('-btn') && c !== 'rule-btn')
+                    .replace('-btn', '');
+                
+                const ruleId = actionBtn.getAttribute('data-rule-id');
+                console.log(`${action} button clicked for rule: ${ruleId}`);
+                
+                handleRuleAction(action, ruleId);
+            } else if (e.target.closest('#exit-preview-btn, .exit-preview-card-btn')) {
+                e.preventDefault();
+                e.stopPropagation();
+                handleExitPreview();
+            }
+        }
+        
+        function handleExitPreview() {
+            console.log('Exit preview button clicked');
+            const exitButton = document.getElementById('hidden_exit_preview_btn');
+            if (exitButton) {
+                exitButton.click();
+            } else {
+                console.error('Hidden exit preview button not found');
+            }
+        }
+        
+        function handleRuleAction(action, ruleId) {
+            console.log(`handleRuleAction called with action: ${action}, ruleId: ${ruleId}`);
+            
+            if (!ruleId) {
+                console.error('No ruleId provided');
+                window.showToast('❌ No rule ID provided');
+                return;
+            }
+            
+            try {
+                // Find the hidden textbox
+                const container = document.getElementById('current_rule_id');
+                console.log('Found container:', container);
+                
+                let ruleIdInput = null;
+                
+                if (container) {
+                    ruleIdInput = container.querySelector('input, textarea');
+                    console.log('Found input element:', ruleIdInput);
+                }
+                
+                if (ruleIdInput) {
+                    console.log(`Setting rule ID input to: ${ruleId}`);
+                    ruleIdInput.value = ruleId;
+                    
+                    // Force Gradio to recognize the change
+                    ruleIdInput.dispatchEvent(new Event('input', { bubbles: true }));
+                    ruleIdInput.dispatchEvent(new Event('change', { bubbles: true }));
+                    
+                    // Add visual feedback
+                    if (action === 'preview') {
+                        window.showToast('👁️ Loading preview...');
+                    }
+                    
+                    // Trigger the appropriate button after a delay
+                    setTimeout(() => {
+                        let targetButton;
+                        if (action === 'preview') {
+                            targetButton = document.getElementById('hidden_preview_btn');
+                        } else if (action === 'accept') {
+                            targetButton = document.getElementById('hidden_accept_btn');
+                        } else if (action === 'reject') {
+                            targetButton = document.getElementById('hidden_reject_btn');
+                        } else if (action === 'run') {
+                            targetButton = document.getElementById('hidden_run_rule_btn');
+                        } else if (action === 'archive') {
+                            targetButton = document.getElementById('hidden_archive_rule_btn');
+                        } else if (action === 'reactivate') {
+                            targetButton = document.getElementById('hidden_reactivate_rule_btn');
+                        }
+                        
+                        console.log(`Looking for button: hidden_${action}_btn`);
+                        console.log('Found button:', targetButton);
+                        
+                        if (targetButton) {
+                            console.log(`Clicking ${action} button`);
+                            targetButton.click();
+                        } else {
+                            console.error(`Target button not found for action: ${action}`);
+                            // List all buttons with IDs containing 'hidden' for debugging
+                            const allHiddenButtons = document.querySelectorAll('[id*="hidden"]');
+                            console.log('Available hidden elements:', Array.from(allHiddenButtons).map(el => el.id));
+                            window.showToast(`❌ Button not found: ${action}`);
+                        }
+                    }, 150);
+                } else {
+                    console.error('Rule ID input field not found');
+                    window.showToast('❌ Rule ID input not found');
+                }
+            } catch (error) {
+                console.error('Error in handleRuleAction:', error);
+                window.showToast('❌ Error: ' + error.message);
+            }
+        }
+        
+        // No need for MutationObserver - event delegation handles dynamic content
+        
+        // Rule card expansion
+        window.toggleRuleDetails = function(ruleId) {
+            const detailsDiv = document.getElementById('details-' + ruleId);
+            const arrow = document.getElementById('arrow-' + ruleId);
+            
+            if (detailsDiv && arrow) {
+                if (detailsDiv.style.display === 'none') {
+                    // Collapse all other rules first
+                    document.querySelectorAll('.rule-details').forEach(d => {
+                        if (d.id !== 'details-' + ruleId) {
+                            d.style.display = 'none';
+                        }
+                    });
+                    document.querySelectorAll('.rule-expand-arrow').forEach(a => {
+                        if (a.id !== 'arrow-' + ruleId) {
+                            a.classList.remove('expanded');
+                        }
+                    });
+                    
+                    // Expand this rule
+                    detailsDiv.style.display = 'block';
+                    arrow.classList.add('expanded');
+                } else {
+                    // Collapse this rule
+                    detailsDiv.style.display = 'none';
+                    arrow.classList.remove('expanded');
+                }
+            }
+        };
+        
+        // Demo Checklist Functions
+        window.toggleChecklist = function(e) {
+            if (e) {
+                e.stopPropagation();
+            }
+            const checklist = document.getElementById('demo-checklist');
+            const minimizeBtn = document.getElementById('minimize-btn');
+            
+            if (checklist) {
+                checklist.classList.toggle('minimized');
+                minimizeBtn.textContent = checklist.classList.contains('minimized') ? '▲' : '▼';
+            }
+        };
+        
+        window.updateProgress = function() {
+            const checkboxes = document.querySelectorAll('.checklist-checkbox');
+            const items = document.querySelectorAll('.checklist-item');
+            const progressFill = document.getElementById('progress-fill');
+            const progressText = document.getElementById('progress-text');
+            const headerProgress = document.getElementById('header-progress');
+            
+            let checked = 0;
+            checkboxes.forEach((cb, index) => {
+                if (cb.checked) {
+                    checked++;
+                    items[index].classList.add('completed');
+                } else {
+                    items[index].classList.remove('completed');
+                }
+            });
+            
+            const percentage = (checked / checkboxes.length) * 100;
+            progressFill.style.width = percentage + '%';
+            progressText.textContent = `${checked}/${checkboxes.length} completed`;
+            
+            // Update header progress for collapsed state
+            headerProgress.textContent = `(${checked}/5)`;
+            
+            // Check if transitioning to/from complete state
+            const wasComplete = document.body.dataset.checklistComplete === 'true';
+            const isNowComplete = checked === checkboxes.length;
+            
+            if (isNowComplete && !wasComplete) {
+                // Show celebration
+                showCelebration();
+                document.body.dataset.checklistComplete = 'true';
+            } else if (!isNowComplete && wasComplete) {
+                // Hide celebration if unchecking
+                dismissCelebration();
+                document.body.dataset.checklistComplete = 'false';
+            }
+        };
+        
+        // Auto-show checklist in demo mode
+        window.showDemoChecklist = function() {
+            const checklist = document.getElementById('demo-checklist');
+            if (checklist) {
+                checklist.classList.add('show', 'initial-show');
+                
+                // Remove initial-show class after animation completes
+                setTimeout(() => {
+                    checklist.classList.remove('initial-show');
+                }, 500);
+                
+                // Initialize progress display
+                updateProgress();
+            }
+        };
+        
+        window.showCelebration = function() {
+            const overlay = document.getElementById('celebration-overlay');
+            if (overlay) {
+                overlay.classList.remove('hidden');
+                // Also pulse the checklist container using CSS class
+                const checklist = document.getElementById('demo-checklist');
+                checklist.classList.add('pulse-animation');
+                setTimeout(() => {
+                    checklist.classList.remove('pulse-animation');
+                }, 1500);
+            }
+        };
+        
+        window.dismissCelebration = function() {
+            const overlay = document.getElementById('celebration-overlay');
+            if (overlay) {
+                overlay.classList.add('hidden');
+            }
+        };
+        
+        // Click handler for checklist items (optional: track what users try)
+        document.addEventListener('click', function(e) {
+            if (e.target.classList.contains('checklist-text')) {
+                const checkbox = e.target.previousElementSibling;
+                if (checkbox && checkbox.type === 'checkbox') {
+                    checkbox.checked = !checkbox.checked;
+                    updateProgress();
+                }
+            }
+        });
+        
+        // Draggable functionality for Demo Checklist
+        let isDragging = false;
+        let currentX;
+        let currentY;
+        let initialX;
+        let initialY;
+        let xOffset = 0;
+        let yOffset = 0;
+        
+        window.startDrag = function(e) {
+            const checklist = document.getElementById('demo-checklist');
+            
+            // Don't start drag if clicking the minimize button
+            if (e.target.classList.contains('minimize-btn')) {
+                return;
+            }
+            
+            if (e.type === "touchstart") {
+                initialX = e.touches[0].clientX - xOffset;
+                initialY = e.touches[0].clientY - yOffset;
+            } else {
+                initialX = e.clientX - xOffset;
+                initialY = e.clientY - yOffset;
+            }
+            
+            if (e.target.classList.contains('checklist-header') || e.target.parentElement.classList.contains('checklist-header')) {
+                isDragging = true;
+                checklist.style.transition = 'none';
+            }
+        };
+        
+        window.dragChecklist = function(e) {
+            if (isDragging) {
+                e.preventDefault();
+                
+                if (e.type === "touchmove") {
+                    currentX = e.touches[0].clientX - initialX;
+                    currentY = e.touches[0].clientY - initialY;
+                } else {
+                    currentX = e.clientX - initialX;
+                    currentY = e.clientY - initialY;
+                }
+                
+                xOffset = currentX;
+                yOffset = currentY;
+                
+                const checklist = document.getElementById('demo-checklist');
+                checklist.style.transform = `translate(${currentX}px, ${currentY}px)`;
+            }
+        };
+        
+        window.endDrag = function(e) {
+            initialX = currentX;
+            initialY = currentY;
+            isDragging = false;
+            
+            const checklist = document.getElementById('demo-checklist');
+            if (checklist) {
+                checklist.style.transition = '';
+            }
+        };
+        
+        // Add drag event listeners
+        document.addEventListener('mousemove', dragChecklist);
+        document.addEventListener('mouseup', endDrag);
+        document.addEventListener('touchmove', dragChecklist);
+        document.addEventListener('touchend', endDrag);
+    }
+    """

components/ui_chat.py

@@ -0,0 +1,176 @@
+"""
+Fixed streaming implementation that works with Gradio's expectations
+"""
+
+import time
+from typing import Generator, List, Dict, Any, Tuple
+import os
+import gradio as gr
+
+
+def process_chat_streaming(
+    user_message: str,
+    chat_history: List[Dict[str, str]],
+    mcp_client: Any,
+    current_emails: List[Dict[str, Any]],
+    pending_rules: List[Dict[str, Any]],
+    applied_rules: List[Dict[str, Any]],
+    rule_counter: int
+) -> Generator[Tuple, None, None]:
+    """Streaming chat handler that yields updates progressively"""
+    
+    from .simple_agent import process_chat_message as process_agent_message
+    from .ui_utils import create_interactive_rule_cards
+    from .ui_tools import format_tool_message
+    
+    if not user_message.strip():
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules),
+               "Ready...", pending_rules, rule_counter)
+        return
+    
+    # Check API key
+    if not os.getenv('OPENROUTER_API_KEY'):
+        chat_history = chat_history + [{"role": "user", "content": user_message}]
+        error_msg = "⚠️ OpenRouter API key not configured. Please set OPENROUTER_API_KEY."
+        chat_history = chat_history + [{"role": "assistant", "content": error_msg}]
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules),
+               "API key missing", pending_rules, rule_counter)
+        return
+    
+    try:
+        # Add user message
+        chat_history = chat_history + [{"role": "user", "content": user_message}]
+        yield (chat_history, "", gr.update(),
+               "Processing...", pending_rules, rule_counter)
+        
+        # Check if analyzing
+        analyze_keywords = ['analyze', 'suggest', 'organize', 'rules', 'inbox']
+        should_analyze = any(keyword in user_message.lower() for keyword in analyze_keywords)
+        
+        if should_analyze and current_emails:
+            # Show analyzing tool message with "running" status
+            analysis_details = f"""Analyzing {len(current_emails)} emails...
+
+Looking for patterns in:
+• Sender domains and addresses  
+• Subject line keywords
+• Email frequency by sender
+• Common phrases and topics"""
+            
+            tool_html = format_tool_message("analyzing_emails", analysis_details, "running")
+            chat_history = chat_history + [{"role": "assistant", "content": tool_html}]
+            
+            yield (chat_history, "", gr.update(),
+                   "Analyzing emails...", pending_rules, rule_counter)
+            
+            # Small pause for effect
+            time.sleep(0.5)
+        
+        # Get rule state
+        rule_state = {
+            'proposedRules': [r for r in pending_rules if r['status'] == 'pending'],
+            'activeRules': applied_rules,
+            'rejectedRules': [r for r in pending_rules if r['status'] == 'rejected']
+        }
+        
+        # Use the unified agent for all messages
+        response_data = process_agent_message(
+            user_message=user_message,
+            emails=current_emails,
+            conversation_history=[m for m in chat_history[:-1]],
+            rule_state=rule_state
+        )
+        
+        response_text = response_data.get('response', '')
+        extracted_rules = response_data.get('rules', [])
+        
+        # If we were analyzing, update the tool message to show complete
+        if should_analyze and current_emails and len(chat_history) > 0:
+            # Create a new chat history list to ensure Gradio detects the change
+            new_chat_history = []
+            updated = False
+            
+            for i, msg in enumerate(chat_history):
+                if not updated and msg.get('role') == 'assistant' and 'analyzing_emails' in msg.get('content', ''):
+                    # Create updated message with complete details
+                    complete_details = f"""Analyzed {len(current_emails)} emails successfully!
+
+Found patterns:
+• Newsletters: {len([e for e in current_emails if 'newsletter' in e.get('from_email', '').lower()])}
+• Work emails: {len([e for e in current_emails if '@company.com' in e.get('from_email', '')])}
+• Personal: {len([e for e in current_emails if not any(kw in e.get('from_email', '').lower() for kw in ['newsletter', 'noreply', 'promo'])])}
+
+{len(extracted_rules)} patterns identified for rules."""
+                    
+                    # Create new message object with updated content
+                    updated_msg = msg.copy()
+                    updated_msg['content'] = format_tool_message("analyzing_emails", complete_details, "complete")
+                    new_chat_history.append(updated_msg)
+                    updated = True
+                else:
+                    new_chat_history.append(msg)
+            
+            # Replace chat_history with the new list
+            chat_history = new_chat_history
+            
+            yield (chat_history, "", gr.update(),
+                   "Analysis complete", pending_rules, rule_counter)
+            time.sleep(0.3)
+        
+        # Show rule creation tool message (brief) - now they're already created, so show as complete
+        if extracted_rules:
+            if should_analyze:
+                rules_details = f"Found {len(extracted_rules)} patterns in your emails"
+            else:
+                rules_details = f"Created {len(extracted_rules)} rule{'s' if len(extracted_rules) > 1 else ''} from your request"
+            
+            # Show as complete since rules are already created at this point
+            tool_html = format_tool_message("creating_rules", rules_details, "complete")
+            chat_history = chat_history + [{"role": "assistant", "content": tool_html}]
+            
+            yield (chat_history, "", gr.update(),
+                   "Rules created", pending_rules, rule_counter)
+            
+            time.sleep(0.3)
+        
+        # Update rules
+        updated_pending_rules = pending_rules.copy()
+        for rule in extracted_rules:
+            if not any(r.get('rule_id') == rule.get('rule_id') for r in updated_pending_rules):
+                rule['status'] = 'pending'
+                # Don't create a duplicate 'id' field - use 'rule_id' consistently
+                updated_pending_rules.append(rule)
+                rule_counter += 1
+        
+        # Clean response
+        clean_response = response_text
+        if "<!-- RULES_JSON_START" in clean_response:
+            clean_response = clean_response.split("<!-- RULES_JSON_START")[0].strip()
+        
+        # Only do character streaming for non-analyzed messages
+        if not should_analyze:
+            streaming_msg = {"role": "assistant", "content": ""}
+            temp_history = chat_history + [streaming_msg]
+            
+            # Stream in chunks
+            chunk_size = 5  # Characters per update
+            for i in range(0, len(clean_response), chunk_size):
+                streaming_msg["content"] = clean_response[:i+chunk_size]
+                # Use gr.update() if rules haven't changed, or update if they have
+                rule_cards_update = create_interactive_rule_cards(updated_pending_rules) if len(updated_pending_rules) != len(pending_rules) else gr.update()
+                yield (temp_history, "", rule_cards_update,
+                       "Typing...", updated_pending_rules, rule_counter)
+                time.sleep(0.01)  # Fast streaming
+        
+        # Final message
+        chat_history = chat_history + [{"role": "assistant", "content": clean_response}]
+        
+        status = f"✅ Found {len(extracted_rules)} rules" if extracted_rules else "Complete"
+        yield (chat_history, "", create_interactive_rule_cards(updated_pending_rules),
+               status, updated_pending_rules, rule_counter)
+        
+    except Exception as e:
+        error_msg = f"Error: {str(e)}"
+        chat_history = chat_history + [{"role": "assistant", "content": error_msg}]
+        yield (chat_history, "", create_interactive_rule_cards(pending_rules),
+               error_msg, pending_rules, rule_counter)

components/ui_tools.py

@@ -0,0 +1,165 @@
+"""
+Enhanced chat handling with tool visibility and proper streaming
+"""
+
+import time
+import json
+from typing import List, Dict, Any, Tuple
+from datetime import datetime
+import os
+
+
+def format_tool_message(tool_name: str, details: str = "", status: str = "running") -> str:
+    """Format a tool call as HTML content"""
+    icons = {
+        "analyzing_emails": "📊",
+        "extracting_patterns": "🔍",
+        "creating_rules": "📋",
+        "thinking": "🤔"
+    }
+    
+    # Create a styled div that looks like a tool call
+    tool_content = f"""
+<div style="background: #e3f2fd; border: 1px solid #1976d2; border-radius: 8px; padding: 12px; margin: 8px 0;">
+    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+        <span style="font-size: 20px;">{icons.get(tool_name, '🔧')}</span>
+        <span style="font-weight: 600; color: #1976d2;">{tool_name.replace('_', ' ').title()}</span>
+        <span style="margin-left: auto; color: #666; font-size: 12px;">
+            {'⏳ Running...' if status == 'running' else '✓ Complete'}
+        </span>
+    </div>
+    <div style="background: white; border-radius: 4px; padding: 8px; font-family: monospace; font-size: 12px; white-space: pre-wrap;">
+{details or 'Processing...'}
+    </div>
+</div>"""
+    
+    return tool_content
+
+
+def process_chat_with_tools(
+    user_message: str,
+    chat_history: List[Dict[str, str]],
+    mcp_client: Any,
+    current_emails: List[Dict[str, Any]],
+    pending_rules: List[Dict[str, Any]],
+    applied_rules: List[Dict[str, Any]],
+    rule_counter: int
+) -> Tuple:
+    """Process chat messages with tool visibility"""
+    
+    from .simple_agent import process_chat_message as process_agent_message
+    from .ui_utils import create_interactive_rule_cards
+    
+    if not user_message.strip():
+        return (chat_history, "", create_interactive_rule_cards(pending_rules),
+                "Ready...", pending_rules, rule_counter)
+    
+    # Check if API key is available
+    if not os.getenv('OPENROUTER_API_KEY'):
+        chat_history.append({"role": "user", "content": user_message})
+        error_msg = "⚠️ OpenRouter API key not configured. Please set OPENROUTER_API_KEY in HuggingFace Spaces secrets to enable AI features."
+        chat_history.append({"role": "assistant", "content": error_msg})
+        return (chat_history, "", create_interactive_rule_cards(pending_rules),
+                "API key missing", pending_rules, rule_counter)
+    
+    try:
+        # Add user message
+        chat_history.append({"role": "user", "content": user_message})
+        
+        # Check if we should analyze emails
+        analyze_keywords = ['analyze', 'suggest', 'organize', 'rules', 'help me organize',
+                           'create rules', 'inbox', 'patterns']
+        should_analyze = any(keyword in user_message.lower() for keyword in analyze_keywords)
+        
+        if should_analyze and current_emails:
+            # Add tool message for email analysis
+            analysis_details = f"""Analyzing {len(current_emails)} emails...
+
+Looking for patterns in:
+• Sender domains and addresses
+• Subject line keywords
+• Email frequency by sender
+• Common phrases and topics
+• Time patterns
+
+Email categories found:
+• Newsletters: {len([e for e in current_emails if 'newsletter' in e.get('from_email', '').lower()])}
+• Work emails: {len([e for e in current_emails if any(domain in e.get('from_email', '') for domain in ['company.com', 'work.com'])])}
+• Personal: {len([e for e in current_emails if not any(keyword in e.get('from_email', '').lower() for keyword in ['newsletter', 'promo', 'noreply'])])}
+"""
+            # Create a combined message with tool output
+            tool_html = format_tool_message("analyzing_emails", analysis_details, "complete")
+            # Add as assistant message with special formatting
+            chat_history.append({
+                "role": "assistant",
+                "content": tool_html
+            })
+        
+        # Get current rule state
+        rule_state = {
+            'proposedRules': [r for r in pending_rules if r['status'] == 'pending'],
+            'activeRules': applied_rules,
+            'rejectedRules': [r for r in pending_rules if r['status'] == 'rejected']
+        }
+        
+        # Call the agent
+        response_data = process_agent_message(
+            user_message=user_message,
+            emails=current_emails,
+            conversation_history=chat_history[:-2] if should_analyze else chat_history[:-1],  # Exclude tool message
+            rule_state=rule_state
+        )
+        
+        # Extract response and rules
+        response_text = response_data.get('response', '')
+        extracted_rules = response_data.get('rules', [])
+        
+        # If rules were extracted, add a tool message
+        if extracted_rules:
+            rules_details = f"""Created {len(extracted_rules)} rules:
+
+"""
+            for rule in extracted_rules:
+                rules_details += f"📋 {rule['name']}\n"
+                rules_details += f"   {rule['description']}\n"
+                rules_details += f"   Confidence: {rule.get('confidence', 0.8)*100:.0f}%\n\n"
+            
+            tool_html = format_tool_message("creating_rules", rules_details, "complete")
+        
+        # Update rules
+        updated_pending_rules = pending_rules.copy()
+        for rule in extracted_rules:
+            if not any(r.get('rule_id') == rule.get('rule_id') for r in updated_pending_rules):
+                rule['status'] = 'pending'
+                rule['id'] = rule.get('rule_id', f'rule_{rule_counter}')
+                updated_pending_rules.append(rule)
+                rule_counter += 1
+        
+        # Add assistant response (clean it of hidden JSON)
+        clean_response = response_text
+        if "<!-- RULES_JSON_START" in clean_response:
+            clean_response = clean_response.split("<!-- RULES_JSON_START")[0].strip()
+        
+        # If we have tool output, prepend it to the response
+        if extracted_rules and 'tool_html' in locals():
+            combined_content = tool_html + "\n\n" + clean_response
+            chat_history.append({"role": "assistant", "content": combined_content})
+        else:
+            chat_history.append({"role": "assistant", "content": clean_response})
+        
+        # Status message
+        if extracted_rules:
+            status = f"✅ Found {len(extracted_rules)} new rules"
+        else:
+            status = "Processing complete"
+        
+        return (chat_history, "", create_interactive_rule_cards(updated_pending_rules),
+                status, updated_pending_rules, rule_counter)
+        
+    except Exception as e:
+        error_msg = "I encountered an error: " + str(e) + ". Please try again."
+        chat_history.append({"role": "assistant", "content": error_msg})
+        return (chat_history, "", create_interactive_rule_cards(pending_rules),
+                f"Error: {str(e)}", pending_rules, rule_counter)
+
+

components/ui_utils.py

@@ -0,0 +1,760 @@
+"""
+UI utility functions - merged from display.py and helpers.py
+Making the UI component self-contained
+"""
+
+import os
+import json
+from datetime import datetime
+from collections import defaultdict
+from typing import List, Dict, Any, Tuple
+import bleach
+
+
+def sanitize_html(text: str, allow_tags: bool = False) -> str:
+    """Sanitize HTML content to prevent XSS attacks"""
+    if not text:
+        return ""
+    
+    if allow_tags:
+        # Allow basic formatting tags for email bodies
+        allowed_tags = ['p', 'br', 'b', 'i', 'u', 'a', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'code']
+        allowed_attrs = {'a': ['href', 'title']}
+        return bleach.clean(text, tags=allowed_tags, attributes=allowed_attrs, strip=True)
+    else:
+        # For fields like subject, sender name - no HTML allowed
+        return bleach.clean(text, tags=[], attributes={}, strip=True)
+
+
+
+
+def get_folder_counts(emails: List[Dict]) -> List[Tuple[str, int]]:
+    """Extract unique folders and their counts from email data"""
+    folder_counts = defaultdict(int)
+    
+    for email in emails:
+        if 'folder' in email and email['folder']:
+            folder_counts[email['folder']] += 1
+        else:
+            folder_counts['Inbox'] += 1
+    
+    return sorted(folder_counts.items())
+
+
+def get_folder_dropdown_choices(emails: List[Dict]) -> List[str]:
+    """Get folder choices for dropdown in format 'Folder Name (Count)'"""
+    folder_counts = get_folder_counts(emails)
+    return [f"{folder_name} ({count})" for folder_name, count in folder_counts]
+
+
+def extract_folder_name(folder_choice: str) -> str:
+    """Extract folder name from dropdown choice format 'Folder Name (Count)'"""
+    if '(' in folder_choice:
+        return folder_choice.split(' (')[0]
+    return folder_choice
+
+
+def format_date(date_string: str) -> str:
+    """Format ISO date string to readable format"""
+    try:
+        dt = datetime.fromisoformat(date_string.replace('Z', '+00:00'))
+        now = datetime.now()
+        
+        if dt.date() == now.date():
+            return dt.strftime("%H:%M")
+        elif dt.year == now.year:
+            return dt.strftime("%b %d")
+        else:
+            return dt.strftime("%b %d, %Y")
+    except (ValueError, AttributeError) as e:
+        return date_string
+
+
+def sort_emails(emails: List[Dict], sort_option: str) -> List[Dict]:
+    """Sort emails based on the selected sort option"""
+    if not emails:
+        return emails
+    
+    def get_email_date(email):
+        try:
+            date_str = email.get('date', '')
+            if date_str:
+                return datetime.fromisoformat(date_str.replace('Z', '+00:00'))
+            else:
+                return datetime(1970, 1, 1)
+        except (ValueError, AttributeError, KeyError) as e:
+            return datetime(1970, 1, 1)
+    
+    if sort_option == "Newest First":
+        return sorted(emails, key=get_email_date, reverse=True)
+    elif sort_option == "Oldest First":
+        return sorted(emails, key=get_email_date, reverse=False)
+    else:
+        return emails
+
+
+def create_email_html(emails: List[Dict], selected_folder: str = "Inbox", expanded_email_id: str = None, compact: bool = True) -> str:
+    """Create HTML for email list"""
+    folder_counts = dict(get_folder_counts(emails))
+    clean_folder_name = extract_folder_name(selected_folder)
+    
+    html = """
+    <style>
+        .email-container {
+            font-family: var(--font-family);
+            font-size: var(--font-size-sm);
+        }
+        .email-list {
+            border: var(--border-width) solid var(--color-gray-light);
+            border-radius: var(--border-radius);
+            overflow: hidden;
+            background: var(--color-white);
+        }
+        .email-row {
+            padding: var(--spacing-2) var(--spacing-3);
+            border-bottom: var(--border-width) solid var(--color-gray-light);
+            cursor: pointer;
+            transition: background-color var(--transition-fast);
+        }
+        .email-row:hover {
+            background-color: var(--color-gray-lighter);
+        }
+        .email-row:last-child {
+            border-bottom: none;
+        }
+        .email-row-expanded {
+            background-color: var(--color-gray-lighter);
+            padding: var(--spacing-3);
+        }
+        .email-content {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-2);
+        }
+        .email-sender {
+            font-weight: var(--font-weight-medium);
+            color: var(--color-dark);
+            min-width: 120px;
+            max-width: 120px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .email-sender-unread {
+            font-weight: var(--font-weight-semibold);
+        }
+        .email-subject {
+            color: var(--color-dark);
+            font-weight: var(--font-weight-medium);
+        }
+        .email-snippet {
+            color: var(--color-gray);
+        }
+        .email-meta {
+            color: var(--color-gray);
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .email-date {
+            color: var(--color-gray);
+            font-size: var(--font-size-xs);
+            min-width: 50px;
+            text-align: right;
+        }
+        .email-label {
+            padding: 2px 6px;
+            border-radius: 12px;
+            font-size: var(--font-size-xs);
+            font-weight: var(--font-weight-medium);
+            margin-left: var(--spacing-1);
+        }
+        .label-unread {
+            background: var(--color-primary);
+            color: var(--color-white);
+        }
+        .label-important {
+            background: var(--color-danger);
+            color: var(--color-white);
+        }
+        .label-starred {
+            background: var(--color-warning);
+            color: var(--color-white);
+        }
+        .email-body {
+            margin-top: var(--spacing-3);
+            padding: var(--spacing-3);
+            background: var(--color-white);
+            border-radius: var(--border-radius-sm);
+            border-left: 3px solid var(--color-primary);
+            line-height: 1.5;
+        }
+    </style>
+    <div class="email-container">
+        <div class="email-list">
+    """
+    
+    for i, email in enumerate(emails):
+        # Email metadata with sanitization
+        email_id = email.get('id', f'email_{i}')
+        sender_name = sanitize_html(email.get('from_name', email.get('from_email', 'Unknown'))[:20])
+        subject = sanitize_html(email.get('subject', 'No Subject'))
+        snippet = sanitize_html(email.get('snippet', ''))
+        formatted_date = format_date(email.get('date', ''))
+        is_unread = "UNREAD" in email.get("labelIds", [])
+        is_expanded = expanded_email_id == email.get('id')
+
+        if compact and not is_expanded:
+            # Single line compact format
+            subject_preview = subject[:40] + "..." if len(subject) > 40 else subject
+            snippet_preview = snippet[:30] + "..." if len(snippet) > 30 else snippet
+            
+            # Check for draft indicator
+            has_draft = "DRAFT_PENDING" in email.get("labelIds", []) or "DRAFT_PREVIEW" in email.get("labelIds", [])
+            draft_indicator = '<span class="draft-indicator" title="Draft reply available">📝</span> ' if has_draft else ""
+            
+            # Update labels_html to use CSS classes
+            labels_html = ""
+            if email.get("labelIds"):
+                important_labels = ["UNREAD", "IMPORTANT", "STARRED"]
+                shown_labels = [l for l in email.get("labelIds", []) if l in important_labels][:2]
+                for label in shown_labels:
+                    label_short = {"UNREAD": "New", "IMPORTANT": "!", "STARRED": "★"}.get(label, label[:3])
+                    label_class = {"UNREAD": "label-unread", "IMPORTANT": "label-important", "STARRED": "label-starred"}.get(label, "")
+                    labels_html += f'<span class="email-label {label_class}">{label_short}</span>'
+            
+            sender_class = "email-sender email-sender-unread" if is_unread else "email-sender"
+            
+            html += f"""
+            <div class="email-row" onclick="handleEmailAction('{email_id}')">
+                <div class="email-content">
+                    <span class="{sender_class}">{sender_name}</span>
+                    <span>•</span>
+                    <span class="email-meta">
+                        {draft_indicator}<span class="email-subject">{subject_preview}</span> - <span class="email-snippet">{snippet_preview}</span>
+                    </span>
+                    {labels_html}
+                    <span class="email-date">{formatted_date}</span>
+                </div>
+            </div>
+            """
+        else:
+            # Expanded view
+            # Update labels_html to use CSS classes
+            labels_html = ""
+            if email.get("labelIds"):
+                important_labels = ["UNREAD", "IMPORTANT", "STARRED"]
+                shown_labels = [l for l in email.get("labelIds", []) if l in important_labels][:2]
+                for label in shown_labels:
+                    label_short = {"UNREAD": "New", "IMPORTANT": "!", "STARRED": "★"}.get(label, label[:3])
+                    label_class = {"UNREAD": "label-unread", "IMPORTANT": "label-important", "STARRED": "label-starred"}.get(label, "")
+                    labels_html += f'<span class="email-label {label_class}">{label_short}</span>'
+            
+            # Sanitize expanded view data
+            from_name_full = sanitize_html(email.get('from_name', sender_name))
+            
+            html += f"""
+            <div class="email-row email-row-expanded" onclick="handleEmailAction('{email_id}')">
+                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-2);">
+                    <span style="font-weight: var(--font-weight-semibold); color: var(--color-dark);">{from_name_full}</span>
+                    <div style="display: flex; align-items: center; gap: var(--spacing-2);">
+                        {labels_html}
+                        <span class="email-date">{formatted_date}</span>
+                    </div>
+                </div>
+                <div style="font-weight: var(--font-weight-medium); color: var(--color-dark); margin-bottom: var(--spacing-2);">{subject}</div>
+            """
+            
+            if 'body' in email:
+                # Sanitize body content with allowed tags
+                safe_body = sanitize_html(email['body'], allow_tags=True)
+                html += f"""
+                <div class="email-body">
+                    <div style="color: var(--color-dark); white-space: pre-line;">{safe_body}</div>
+                </div>
+                """
+            
+            # Check for drafts to display
+            if "DRAFT_PENDING" in email.get("labelIds", []) or "DRAFT_PREVIEW" in email.get("labelIds", []):
+                # For now, show a simple draft preview
+                # In production, we'd fetch actual drafts from backend
+                html += f"""
+                <div class="draft-preview" style="margin-top: var(--spacing-4); padding: var(--spacing-3); background-color: #e3f2fd; border-radius: var(--radius-default); border-left: 4px solid #2196f3;">
+                    <h4 style="margin: 0 0 var(--spacing-2) 0; color: #1976d2; font-size: var(--font-size-sm); display: flex; align-items: center;">
+                        <span style="margin-right: var(--spacing-1);">📝</span> Draft Reply Ready
+                    </h4>
+                    <div style="font-size: var(--font-size-sm); color: var(--color-dark); font-style: italic;">
+                        A personalized draft reply has been prepared for this email. 
+                        Click to view and edit the full draft.
+                    </div>
+                    <div style="margin-top: var(--spacing-2);">
+                        <button style="font-size: var(--font-size-xs); padding: 4px 12px; background: #2196f3; color: white; border: none; border-radius: var(--radius-small); cursor: pointer;">
+                            View Draft
+                        </button>
+                    </div>
+                </div>
+                """
+            
+            html += """
+            </div>
+            """
+    
+    html += """
+        </div>
+    </div>"""
+    return html
+
+
+def filter_emails(folder: str, search_query: str = "", sort_option: str = "Newest First", emails_source: List[Dict] = None) -> List[Dict]:
+    """Filter and sort emails based on folder, search query, and sort option"""
+    if emails_source is None:
+        return []
+    
+    filtered = emails_source
+    clean_folder_name = extract_folder_name(folder)
+    
+    # Filter by folder
+    folder_filtered = []
+    for email in filtered:
+        if 'folder' in email and email['folder'] == clean_folder_name:
+            folder_filtered.append(email)
+        elif not 'folder' in email and 'INBOX' == clean_folder_name:
+            folder_filtered.append(email)
+    
+    filtered = folder_filtered
+    
+    # Filter by search query
+    if search_query:
+        filtered = [email for email in filtered if 
+                   search_query.lower() in email.get('from_name', '').lower() or 
+                   search_query.lower() in email.get('from_email', '').lower() or
+                   search_query.lower() in email.get('subject', '').lower() or
+                   search_query.lower() in email.get('snippet', '').lower()]
+    
+    # Sort emails
+    filtered = sort_emails(filtered, sort_option)
+    
+    return filtered
+
+
+def create_preview_banner(preview_rules_count: int = 0) -> str:
+    """Create the preview mode banner HTML"""
+    if preview_rules_count == 0:
+        return ""
+    
+    return f"""
+    <style>
+        #preview-banner {{
+            background: var(--color-warning);
+            color: var(--color-white);
+            padding: var(--spacing-2) var(--spacing-3);
+            margin-bottom: var(--spacing-2);
+            border-radius: var(--border-radius-sm);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: var(--font-size-sm);
+            font-weight: var(--font-weight-medium);
+            box-shadow: var(--shadow-sm);
+        }}
+        #exit-preview-btn {{
+            background: rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.4);
+            color: var(--color-white);
+            padding: var(--spacing-1) var(--spacing-2);
+            border-radius: var(--border-radius-sm);
+            cursor: pointer;
+            font-size: var(--font-size-xs);
+            font-weight: var(--font-weight-medium);
+            transition: background var(--transition-fast);
+        }}
+        #exit-preview-btn:hover {{
+            background: rgba(255, 255, 255, 0.3);
+        }}
+    </style>
+    <div id="preview-banner">
+        <div style="display: flex; align-items: center; gap: var(--spacing-2);">
+            <span>👁️</span>
+            <span>Preview Mode ({preview_rules_count} rule{'s' if preview_rules_count != 1 else ''})</span>
+        </div>
+        <button id="exit-preview-btn">
+            Exit Preview
+        </button>
+    </div>
+    """
+
+
+def create_sleek_rule_card(rule: Dict) -> str:
+    """Create a single sleek two-row rule card with expandable details"""
+    rule_id = rule.get('rule_id', rule.get('id', ''))
+    print(f"DEBUG ui_utils: Creating card for rule '{rule.get('name')}' with ID: '{rule_id}'")
+    rule_name = sanitize_html(rule.get('name', 'Unnamed Rule'))
+    status = rule.get('status', 'pending')
+    
+    # Determine button set based on status
+    buttons_html = ""
+    if status == 'pending':
+        buttons_html = f"""
+            <button class="rule-btn preview-btn" data-rule-id="{rule_id}">Show affected</button>
+            <button class="rule-btn archive-btn" data-rule-id="{rule_id}">Archive</button>
+        """
+    elif status == 'preview':
+        buttons_html = f"""
+            <button class="rule-btn accept-btn" data-rule-id="{rule_id}">✓ Accept</button>
+            <button class="rule-btn reject-btn" data-rule-id="{rule_id}">✗ Reject</button>
+        """
+    elif status == 'accepted':
+        buttons_html = f"""
+            <button class="rule-btn run-btn" data-rule-id="{rule_id}">▶ Run Rule</button>
+            <button class="rule-btn archive-btn" data-rule-id="{rule_id}">Archive</button>
+        """
+    
+    card_class = f"rule-card-v2 rule-status-{status}"
+    
+    # Build details HTML
+    details_html = ""
+    
+    # Add conditions
+    conditions = rule.get('conditions', [])
+    if conditions:
+        details_html += "<div style='margin-top: 12px;'><strong>Conditions:</strong><ul style='margin: 4px 0; padding-left: 20px;'>"
+        for condition in conditions:
+            field = condition.get('field', '')
+            operator = condition.get('operator', '')
+            value = condition.get('value', '')
+            # Convert operator to readable format
+            op_map = {'contains': 'contains', 'equals': 'equals', 'startswith': 'starts with', 'endswith': 'ends with'}
+            readable_op = op_map.get(operator, operator)
+            details_html += f"<li>{sanitize_html(field)} {readable_op} \"{sanitize_html(str(value))}\"</li>"
+        details_html += "</ul></div>"
+    
+    # Add actions
+    actions = rule.get('actions', [])
+    if actions:
+        details_html += "<div style='margin-top: 8px;'><strong>Actions:</strong><ul style='margin: 4px 0; padding-left: 20px;'>"
+        for action in actions:
+            action_type = action.get('type', '')
+            if action_type == 'move':
+                folder = action.get('parameters', {}).get('folder', 'Unknown')
+                details_html += f"<li>Move to {sanitize_html(folder)} folder</li>"
+            elif action_type == 'label':
+                label = action.get('parameters', {}).get('label', 'Unknown')
+                details_html += f"<li>Add label: {sanitize_html(label)}</li>"
+            elif action_type == 'mark_as_read':
+                details_html += "<li>Mark as read</li>"
+            elif action_type == 'draft_reply':
+                details_html += "<li>Create draft reply</li>"
+            else:
+                details_html += f"<li>{sanitize_html(action_type)}</li>"
+        details_html += "</ul></div>"
+    
+    # Add confidence if available
+    confidence = rule.get('confidence', 0)
+    if confidence > 0:
+        details_html += f"<div style='margin-top: 8px;'><strong>Confidence:</strong> {int(confidence * 100)}%</div>"
+    
+    return f"""
+    <div id="rule-{rule_id}" class="{card_class}" onclick="toggleRuleDetails('{rule_id}')">
+        <div class="rule-row-1">
+            <span class="rule-expand-arrow" id="arrow-{rule_id}">▶</span>
+            <span class="rule-name">{rule_name}</span>
+        </div>
+        <div class="rule-row-2">
+            <div class="rule-actions">{buttons_html}</div>
+        </div>
+        <div class="rule-details" id="details-{rule_id}" style="display: none;">
+            {details_html}
+        </div>
+    </div>
+    """
+
+
+def create_interactive_rule_cards(pending_rules: List[Dict], compact: bool = True) -> str:
+    """Create HTML for interactive rule cards display"""
+    if not pending_rules:
+        return """
+        <style>
+            .empty-rules {
+                font-family: var(--font-family);
+                padding: var(--spacing-4);
+                text-align: center;
+                color: var(--color-gray);
+                background: var(--color-gray-lighter);
+                border-radius: var(--border-radius);
+                margin: var(--spacing-2);
+            }
+            .empty-rules-icon {
+                font-size: 2rem;
+                margin-bottom: var(--spacing-2);
+            }
+            .empty-rules h4 {
+                margin: var(--spacing-2) 0;
+                color: var(--color-dark);
+                font-size: var(--font-size-base);
+                font-weight: var(--font-weight-semibold);
+            }
+            .empty-rules p {
+                margin: 0;
+                font-size: var(--font-size-sm);
+            }
+        </style>
+        <div class="empty-rules">
+            <div class="empty-rules-icon">📋</div>
+            <h4>No Rules Yet</h4>
+            <p>Click "Analyze" to get started!</p>
+        </div>
+        """
+    
+    # Separate active and archived rules
+    active_rules = [r for r in pending_rules if r.get("status") != "rejected"]
+    archived_rules = [r for r in pending_rules if r.get("status") == "rejected"]
+    
+    html = f"""
+    <style>
+        .rules-container {{
+            font-family: var(--font-family);
+            font-size: var(--font-size-sm);
+        }}
+        .rules-header {{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: var(--spacing-2);
+        }}
+        .rules-title {{
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-2);
+        }}
+        .rules-title-text {{
+            font-weight: var(--font-weight-semibold);
+            color: var(--color-dark);
+        }}
+        .archive-toggle {{
+            font-size: var(--font-size-xs);
+            padding: var(--spacing-1) var(--spacing-2);
+            border: var(--border-width) solid var(--color-gray-light);
+            border-radius: var(--border-radius-sm);
+            background: var(--color-white);
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            font-weight: var(--font-weight-medium);
+        }}
+        .archive-toggle:hover {{
+            background: var(--color-gray-lighter);
+            border-color: var(--color-gray);
+        }}
+        .rule-card {{
+            border: var(--border-width) solid var(--color-gray-light);
+            border-radius: var(--border-radius);
+            padding: var(--spacing-2) var(--spacing-3);
+            margin: var(--spacing-2) 0;
+            background: var(--color-white);
+            transition: all var(--transition-fast);
+            box-shadow: var(--shadow-sm);
+        }}
+        .rule-card:hover {{
+            box-shadow: var(--shadow);
+            transform: translateY(-1px);
+        }}
+        .rule-card-accepted {{
+            background: #d4edda;
+            border-color: var(--color-success);
+        }}
+        .rule-card-preview {{
+            background: #fff3cd;
+            border-color: var(--color-warning);
+        }}
+        .rule-content {{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: var(--spacing-2);
+        }}
+        .rule-info {{
+            flex: 1;
+            min-width: 0;
+            cursor: pointer;
+        }}
+        .rule-name-row {{
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-2);
+        }}
+        .rule-toggle-arrow {{
+            cursor: pointer;
+            font-size: var(--font-size-sm);
+            width: 15px;
+            text-align: center;
+            color: var(--color-gray);
+            transition: transform var(--transition-fast);
+        }}
+        .rule-name {{
+            font-weight: var(--font-weight-semibold);
+            color: var(--color-dark);
+            font-size: var(--font-size-sm);
+        }}
+        .rule-summary {{
+            color: var(--color-gray);
+            font-size: var(--font-size-xs);
+            margin-top: var(--spacing-1);
+            padding-left: 23px;
+        }}
+        .rule-actions {{
+            display: flex;
+            gap: var(--spacing-1);
+            align-items: center;
+        }}
+        .rule-btn {{
+            padding: var(--spacing-1) var(--spacing-2);
+            border-radius: var(--border-radius-sm);
+            cursor: pointer;
+            font-size: var(--font-size-xs);
+            font-weight: var(--font-weight-medium);
+            transition: all var(--transition-fast);
+            border: var(--border-width) solid transparent;
+        }}
+        .rule-btn:hover {{
+            transform: translateY(-1px);
+            box-shadow: var(--shadow-sm);
+        }}
+        .preview-btn {{
+            border-color: var(--color-primary);
+            background: var(--color-white);
+            color: var(--color-primary);
+        }}
+        .preview-btn:hover {{
+            background: var(--color-primary);
+            color: var(--color-white);
+        }}
+        .accept-btn {{
+            background: var(--color-success);
+            color: var(--color-white);
+        }}
+        .accept-btn:hover {{
+            background: #218838;
+        }}
+        .reject-btn {{
+            background: var(--color-danger);
+            color: var(--color-white);
+        }}
+        .reject-btn:hover {{
+            background: #c82333;
+        }}
+        .exit-preview-card-btn {{
+            border-color: var(--color-warning);
+            background: var(--color-white);
+            color: var(--color-warning);
+        }}
+        .exit-preview-card-btn:hover {{
+            background: var(--color-warning);
+            color: var(--color-white);
+        }}
+        .rule-details {{
+            display: none;
+            margin-top: var(--spacing-3);
+            padding: var(--spacing-3);
+            background: rgba(0,0,0,0.02);
+            border-radius: var(--border-radius-sm);
+            font-size: var(--font-size-xs);
+        }}
+        .rule-details-expanded {{
+            display: block;
+        }}
+        .archived-section {{
+            margin-top: var(--spacing-4);
+            padding-top: var(--spacing-3);
+            border-top: var(--border-width) solid var(--color-gray-light);
+        }}
+        .archived-rule {{
+            border: var(--border-width) solid var(--color-gray-light);
+            border-radius: var(--border-radius);
+            padding: var(--spacing-2) var(--spacing-3);
+            margin: var(--spacing-2) 0;
+            background: var(--color-gray-lighter);
+            opacity: 0.7;
+        }}
+        .reactivate-btn {{
+            padding: var(--spacing-1) var(--spacing-2);
+            border: var(--border-width) solid var(--color-success);
+            background: var(--color-white);
+            color: var(--color-success);
+            border-radius: var(--border-radius-sm);
+            cursor: pointer;
+            font-size: var(--font-size-xs);
+            font-weight: var(--font-weight-medium);
+            transition: all var(--transition-fast);
+        }}
+        .reactivate-btn:hover {{
+            background: var(--color-success);
+            color: var(--color-white);
+        }}
+    </style>
+    <div class="rules-container">
+        <!-- Active Rules -->
+        <div style="margin-bottom: var(--spacing-4);">
+            <div class="rules-header">
+                <div class="rules-title">
+                    <span style="font-size: 1rem;">📋</span>
+                    <span class="rules-title-text">Active Rules ({len(active_rules)})</span>
+                </div>
+                {f'<button onclick="toggleArchived()" class="archive-toggle">{"Hide" if archived_rules else "Show"} Archived ▼</button>' if archived_rules else ''}
+            </div>
+    """
+    
+    # Active rules - using new sleek cards
+    for rule in active_rules:
+        if rule.get("status") == "rejected":
+            continue
+        
+        html += create_sleek_rule_card(rule)
+    
+    html += """
+        </div>
+    """
+    
+    # Archived rules section (if any)
+    if archived_rules:
+        html += f"""
+        <div id="archived-section" style="margin-top: 1rem; display: none;">
+            <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+                <span style="font-size: 1rem;">🗄️</span>
+                <span style="font-weight: 600; color: #6c757d;">Archived Rules ({len(archived_rules)})</span>
+            </div>
+        """
+        
+        for rule in archived_rules:
+            rule_id = rule.get('rule_id', rule.get('id', ''))
+            archived_rule_name = sanitize_html(rule.get('name', 'Unnamed Rule'))
+            html += f"""
+            <div class="archived-rule">
+                <div style="display: flex; align-items: center; justify-content: space-between;">
+                    <span style="color: var(--color-gray); font-size: var(--font-size-sm);">{archived_rule_name}</span>
+                    <button class="reactivate-btn" data-rule-id="{rule_id}">Reactivate</button>
+                </div>
+            </div>
+            """
+        
+        html += """
+        </div>
+        """
+    
+    html += """
+    </div>
+    <script>
+        function toggleArchived() {
+            const section = document.getElementById('archived-section');
+            if (section) {
+                section.style.display = section.style.display === 'none' ? 'block' : 'none';
+            }
+        }
+    </script>
+    """
+    
+    return html
+
+
+def get_preview_rules_count(pending_rules: List[Dict[str, Any]]) -> int:
+    """Get the number of rules currently in preview status"""
+    return len([rule for rule in pending_rules if rule.get("status") == "preview"])

data/emails.json

@@ -0,0 +1,115 @@
+[
+  {
+    "id": "msg_001",
+    "threadId": "thread_001",
+    "from_email": "[email protected]",
+    "from_name": "Sarah Johnson",
+    "subject": "Dinner plans for tonight?",
+    "snippet": "Hey honey, What do you think about Italian food tonight? Th...",
+    "body": "Hey honey,\n\nWhat do you think about Italian food tonight? There's that new place downtown that opened last week - Bella Vista. I heard they have amazing homemade pasta.\n\nI can make a reservation for 7:30 PM if that works for you. Let me know!\n\nLove,\nSarah",
+    "date": "2024-01-15T18:30:00Z",
+    "labels": ["INBOX", "PERSONAL"],
+    "folder": "INBOX"
+  },
+  {
+    "id": "msg_002",
+    "threadId": "thread_002",
+    "from_email": "[email protected]",
+    "from_name": "GitHub",
+    "subject": "[PR] Review requested: Update authentication flow",
+    "snippet": "You have been requested to review a pull request in the main...",
+    "body": "You have been requested to review a pull request in the main repository.\n\n**Pull Request #1234: Update authentication flow**\n\nAuthor: @johndoe\nBranch: feature/auth-update → main\n\n### Description\nThis PR updates the authentication flow to use OAuth 2.0 with PKCE for improved security.\n\n### Changes\n- Updated login component to use new auth service\n- Added PKCE challenge generation\n- Updated token refresh logic\n- Added comprehensive tests\n\n[View Pull Request](https://github.com/company/repo/pull/1234)\n\n---\nYou are receiving this because you were requested to review.",
+    "date": "2024-01-15T14:22:00Z",
+    "labels": ["INBOX", "WORK", "IMPORTANT"],
+    "folder": "INBOX"
+  },
+  {
+    "id": "msg_003",
+    "threadId": "thread_003",
+    "from_email": "[email protected]",
+    "from_name": "Uber Eats",
+    "subject": "30% off your next order!",
+    "snippet": "Hungry? Use code SAVE30 for 30% off your next order. Valid u...",
+    "body": "🍔 Hungry? We've got you covered!\n\nUse code **SAVE30** for 30% off your next order.\n\nValid until January 31, 2024. Maximum discount $15.\n\n**Popular restaurants near you:**\n- Chipotle Mexican Grill (15-25 min)\n- Five Guys Burgers (20-30 min)\n- Sweetgreen (10-20 min)\n- Shake Shack (25-35 min)\n\n[Order Now](https://ubereats.com)\n\nTerms apply. Cannot be combined with other offers.",
+    "date": "2024-01-15T12:45:00Z",
+    "labels": ["INBOX", "PROMOTIONS"],
+    "folder": "INBOX"
+  },
+  {
+    "id": "msg_004",
+    "threadId": "thread_004",
+    "from_email": "[email protected]",
+    "from_name": "Morning Brew Newsletter",
+    "subject": "☀️ Markets hit new highs",
+    "snippet": "Good morning! Here's what you need to know today: S&P 500 re...",
+    "date": "2024-01-15T06:00:00Z",
+    "labels": ["INBOX", "UPDATES", "NEWSLETTERS"],
+    "folder": "INBOX"
+  },
+  {
+    "id": "msg_005",
+    "threadId": "thread_005",
+    "from_email": "[email protected]",
+    "from_name": "TechCrunch Newsletter",
+    "subject": "Daily: AI Startups Raise Record Funding",
+    "snippet": "Good morning. Here's your daily digest of the biggest tech...",
+    "date": "2024-01-15T07:15:00Z",
+    "labels": ["INBOX", "UPDATES", "NEWSLETTERS"],
+    "folder": "INBOX"
+  },
+  {
+    "id": "msg_006",
+    "threadId": "thread_006",
+    "from_email": "[email protected]",
+    "from_name": "Michael Chen",
+    "subject": "Urgent: Q1 Budget Review",
+    "snippet": "Hi team, I hope this email finds you well. As discussed in...",
+    "date": "2024-01-15T09:30:00Z",
+    "labels": ["INBOX", "WORK", "IMPORTANT", "URGENT"],
+    "folder": "INBOX"
+  },
+  {
+    "id": "msg_007",
+    "threadId": "thread_007",
+    "from_email": "[email protected]",
+    "from_name": "Bank of America",
+    "subject": "Low balance alert",
+    "snippet": "Your checking account balance has fallen below $100. Current...",
+    "date": "2024-01-15T10:15:00Z",
+    "labels": ["INBOX", "IMPORTANT", "FINANCE", "ALERTS"],
+    "folder": "INBOX"
+  },
+  {
+    "id": "msg_008",
+    "threadId": "thread_008",
+    "from_email": "[email protected]",
+    "from_name": "Amazon",
+    "subject": "Your order has been shipped",
+    "snippet": "Great news! Your order #123-456789 has been shipped and is...",
+    "date": "2024-01-14T16:45:00Z",
+    "labels": ["INBOX", "PURCHASES", "SHOPPING"],
+    "folder": "INBOX"
+  },
+  {
+    "id": "msg_009",
+    "threadId": "thread_002",
+    "from_email": "[email protected]",
+    "from_name": "GitHub",
+    "subject": "[PR] Review requested: Update authentication flow",
+    "snippet": "You have been requested to review a pull request in the main...",
+    "date": "2024-01-15T14:22:00Z",
+    "labels": ["WORK", "IMPORTANT"],
+    "folder": "WORK"
+  },
+  {
+    "id": "msg_010",
+    "threadId": "thread_003",
+    "from_email": "[email protected]",
+    "from_name": "Uber Eats",
+    "subject": "30% off your next order!",
+    "snippet": "Hungry? Use code SAVE30 for 30% off your next order. Valid u...",
+    "date": "2024-01-14T12:45:00Z",
+    "labels": ["READING", "PROMOTIONS"],
+    "folder": "READING"
+  }
+]

data/rules.json

@@ -0,0 +1,30 @@
+{
+  "rules": [
+    {
+      "rule_id": "test_rule_1",
+      "name": "Move Newsletters to Reading",
+      "description": "Automatically move newsletter emails to a Reading folder",
+      "conditions": [
+        {
+          "field": "from",
+          "operator": "contains",
+          "value": "newsletter"
+        }
+      ],
+      "actions": [
+        {
+          "type": "move",
+          "parameters": {
+            "folder": "Reading"
+          }
+        }
+      ],
+      "impact": "This will organize your newsletters in one place",
+      "keywords": [
+        "newsletter",
+        "reading",
+        "organize"
+      ]
+    }
+  ]
+}

requirements.txt

@@ -0,0 +1,24 @@
+# Core dependencies
+gradio>=4.44.1
+gradio-client
+
+# Environment variables
+python-dotenv
+
+# LLM dependencies (for simple_agent.py)
+langchain
+langchain-openai
+openai
+
+# HTTP client for Modal backend
+requests
+httpx
+
+# Utilities
+python-dateutil
+
+# Security (for HTML sanitization)
+bleach
+
+# Type hints
+pydantic