Update app.py

app.py

@@ -2227,19 +2227,19 @@ with gr.Blocks(
                 outputs=[forecast_output, forecast_chart]
             )
 
-        # ==================== TAB 5: BATCH ANALYSIS (MODAL POWERED) ====================
+        # ==================== TAB 5: BATCH ANALYSIS (MODAL POWERED - AUTO MODE) ====================
         with gr.Tab("⚡ Batch Analysis"):
             gr.HTML("""
             <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 30px; border-radius: 16px; color: white; margin-bottom: 25px; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);">
                 <h3 style="margin: 0 0 15px 0; font-size: 24px;">
-                    ⚡ Powered by Modal Serverless Compute
+                    ⚡ Automated Transaction Analysis
                 </h3>
                 <p style="margin: 0; font-size: 17px; line-height: 1.7; opacity: 0.95;">
-                    <strong>Analyze multiple past transactions at once.</strong> Our Modal-powered backend processes them in parallel for blazing-fast results. Perfect for reviewing last month's spending or optimizing future purchases.
+                    <strong>Review your past transactions automatically.</strong> Select your profile and time period - Modal fetches your transaction history and analyzes everything in parallel. See which cards you should have used and how much you could have saved.
                 </p>
                 <div style="background: rgba(255,255,255,0.15); padding: 15px; border-radius: 10px; margin-top: 15px;">
                     <p style="margin: 0; font-size: 15px;">
-                        🚀 <strong>What's Modal?</strong> Serverless compute platform that scales instantly. Your batch jobs run in the cloud with zero infrastructure management.
+                        🚀 <strong>Powered by Modal:</strong> Serverless compute that scales from 1 to 1000 transactions instantly. Zero infrastructure management.
                     </p>
                 </div>
             </div>
@@ -2248,11 +2248,12 @@ with gr.Blocks(
             gr.Markdown("""
             ### 💡 How It Works
             
-            1. **Paste your transactions** (JSON format) or use the example below
-            2. **Click "Analyze with Modal"** - Modal spins up containers and processes in parallel
-            3. **Get instant results** - See which cards you should have used and how much you could save
+            1. **Select your user profile** - Your transaction history is automatically loaded
+            2. **Choose time period** - Last week, month, or custom date range
+            3. **Click "Analyze with Modal"** - Modal processes all transactions in parallel
+            4. **Get instant insights** - See optimization opportunities and potential savings
             
-            **Use Case:** Review last month's spending to see optimization opportunities!
+            **Perfect for:** Monthly spending reviews, identifying patterns, and finding missed rewards!
             """)
             
             with gr.Row():
@@ -2260,74 +2261,242 @@ with gr.Blocks(
                     batch_user = gr.Dropdown(
                         choices=SAMPLE_USERS,
                         value=SAMPLE_USERS[0],
-                        label="👤 Select User"
+                        label="👤 Select User Profile",
+                        info="Your transaction history will be loaded automatically"
                     )
                     
-                    batch_transactions = gr.Code(
-                        label="📋 Transactions (JSON Format)",
-                        value='''[
-          {"merchant": "Whole Foods", "mcc": "5411", "amount": 125.50},
-          {"merchant": "Shell", "mcc": "5541", "amount": 45.00},
-          {"merchant": "Starbucks", "mcc": "5814", "amount": 15.75},
-          {"merchant": "Target", "mcc": "5310", "amount": 85.00},
-          {"merchant": "Amazon", "mcc": "5942", "amount": 65.00},
-          {"merchant": "United Airlines", "mcc": "3000", "amount": 450.00}
-        ]''',
-                        language="json",
-                        lines=12
+                    time_period = gr.Radio(
+                        choices=[
+                            "Last 7 Days",
+                            "Last 30 Days", 
+                            "Last 90 Days",
+                            "This Month",
+                            "Last Month"
+                        ],
+                        value="Last 30 Days",
+                        label="📅 Time Period",
+                        info="Select how far back to analyze"
                     )
                     
+                    with gr.Accordion("🔧 Advanced Options", open=False):
+                        max_transactions = gr.Slider(
+                            minimum=10,
+                            maximum=100,
+                            value=50,
+                            step=10,
+                            label="Max Transactions to Analyze",
+                            info="Limit for performance (Modal can handle 1000+)"
+                        )
+                        
+                        include_small = gr.Checkbox(
+                            label="Include transactions under $5",
+                            value=False,
+                            info="Small purchases often have minimal reward differences"
+                        )
+                    
                     batch_btn = gr.Button(
                         "🚀 Analyze with Modal",
                         variant="primary",
                         size="lg"
                     )
                     
+                    # Transaction preview
+                    gr.Markdown("### 📋 Transaction Preview")
+                    transaction_preview = gr.Dataframe(
+                        headers=["Date", "Merchant", "Category", "Amount"],
+                        datatype=["str", "str", "str", "number"],
+                        value=[],
+                        label="Recent Transactions",
+                        interactive=False,
+                        wrap=True
+                    )
+                    
                     gr.Markdown("""
                     <div class="info-box" style="margin-top: 15px;">
                         <span class="info-box-icon">💡</span>
-                        <strong>Pro Tip:</strong> Modal processes up to 100 transactions in parallel. Perfect for monthly reviews!
+                        <strong>Pro Tip:</strong> Modal processes transactions in parallel - 100 transactions analyzed in the same time as 1!
                     </div>
                     """)
                 
                 with gr.Column(scale=2):
-                    batch_output = gr.Markdown(
-                        value="✨ Enter transactions and click 'Analyze with Modal' to see optimization opportunities"
+                    batch_status = gr.Markdown(
+                        value="✨ Select a user and click 'Analyze with Modal' to start"
                     )
-                    batch_chart = gr.Plot()
+                    
+                    batch_output = gr.Markdown()
+                    
+                    with gr.Row():
+                        with gr.Column():
+                            batch_chart = gr.Plot(label="Rewards by Merchant")
+                        with gr.Column():
+                            savings_chart = gr.Plot(label="Potential Savings")
+            
+            def load_user_transactions(user_id, time_period, max_txns, include_small):
+                """
+                Fetch user's past transactions from your backend
+                This would call your transaction history API
+                """
+                import random
+                from datetime import datetime, timedelta
+                
+                # Mock transaction data - replace with actual API call
+                # In production: response = httpx.get(f"{config.ORCHESTRATOR_URL}/transactions/{user_id}?period={time_period}")
+                
+                merchants_by_user = {
+                    'u_alice': [
+                        ('Whole Foods', 'Groceries', '5411'),
+                        ('Trader Joe\'s', 'Groceries', '5411'),
+                        ('Costco', 'Groceries', '5411'),
+                        ('Starbucks', 'Restaurants', '5814'),
+                        ('Chipotle', 'Restaurants', '5814'),
+                        ('Shell', 'Gas', '5541'),
+                        ('Target', 'Shopping', '5310'),
+                        ('Amazon', 'Shopping', '5942'),
+                    ],
+                    'u_bob': [
+                        ('McDonald\'s', 'Fast Food', '5814'),
+                        ('Wendy\'s', 'Fast Food', '5814'),
+                        ('Chevron', 'Gas', '5541'),
+                        ('BP', 'Gas', '5541'),
+                        ('Walmart', 'Shopping', '5310'),
+                        ('Home Depot', 'Shopping', '5200'),
+                        ('Netflix', 'Streaming', '5968'),
+                    ],
+                    'u_charlie': [
+                        ('United Airlines', 'Travel', '3000'),
+                        ('Delta', 'Travel', '3000'),
+                        ('Marriott', 'Hotels', '3500'),
+                        ('Hilton', 'Hotels', '3500'),
+                        ('Uber', 'Transportation', '4121'),
+                        ('Lyft', 'Transportation', '4121'),
+                        ('Morton\'s', 'Fine Dining', '5812'),
+                    ]
+                }
+                
+                merchants = merchants_by_user.get(user_id, merchants_by_user['u_alice'])
+                
+                # Generate transactions based on time period
+                days_map = {
+                    "Last 7 Days": 7,
+                    "Last 30 Days": 30,
+                    "Last 90 Days": 90,
+                    "This Month": 30,
+                    "Last Month": 30
+                }
+                
+                days = days_map.get(time_period, 30)
+                num_transactions = min(max_txns, days * 2)  # ~2 transactions per day
+                
+                transactions = []
+                preview_data = []
+                
+                for i in range(num_transactions):
+                    merchant, category, mcc = random.choice(merchants)
+                    
+                    # Generate realistic amounts based on category
+                    if 'Groceries' in category:
+                        amount = round(random.uniform(50, 200), 2)
+                    elif 'Gas' in category:
+                        amount = round(random.uniform(30, 80), 2)
+                    elif 'Travel' in category or 'Hotels' in category:
+                        amount = round(random.uniform(200, 800), 2)
+                    elif 'Fast Food' in category or 'Restaurants' in category:
+                        amount = round(random.uniform(15, 85), 2)
+                    else:
+                        amount = round(random.uniform(20, 150), 2)
+                    
+                    # Skip small transactions if option is disabled
+                    if not include_small and amount < 5:
+                        continue
+                    
+                    # Generate date
+                    days_ago = random.randint(0, days)
+                    txn_date = (datetime.now() - timedelta(days=days_ago)).strftime('%Y-%m-%d')
+                    
+                    transactions.append({
+                        'merchant': merchant,
+                        'category': category,
+                        'mcc': mcc,
+                        'amount': amount,
+                        'date': txn_date
+                    })
+                    
+                    # Add to preview (show first 10)
+                    if len(preview_data) < 10:
+                        preview_data.append([
+                            txn_date,
+                            merchant,
+                            category,
+                            f"${amount:.2f}"
+                        ])
+                
+                # Sort by date (most recent first)
+                transactions.sort(key=lambda x: x['date'], reverse=True)
+                preview_data.sort(key=lambda x: x[0], reverse=True)
+                
+                return transactions, preview_data
             
-            def call_modal_batch(user_id, txns_json):
-                """Call Modal endpoint from Gradio"""
-                import json
-                import httpx
+            def call_modal_batch_auto(user_id, time_period, max_txns, include_small):
+                """
+                Automatically fetch transactions and analyze with Modal
+                """
                 import time
                 
                 try:
-                    # Parse JSON
-                    transactions = json.loads(txns_json)
+                    # Step 1: Show loading state
+                    yield (
+                        f"""
+        ## ⏳ Loading Transactions...
+        
+        **User:** {user_id}  
+        **Period:** {time_period}  
+        **Status:** Fetching transaction history...
+        
+        <div class="thinking-dots">Please wait</div>
+        """,
+                        "",
+                        None,
+                        None
+                    )
+                    
+                    time.sleep(0.5)
+                    
+                    # Step 2: Fetch transactions
+                    transactions, preview_data = load_user_transactions(
+                        user_id, time_period, max_txns, include_small
+                    )
                     
                     if not transactions:
-                        return "❌ No transactions provided", None
+                        yield (
+                            "❌ No transactions found for this period.",
+                            "",
+                            None,
+                            None
+                        )
+                        return
                     
-                    # Show loading state
-                    loading_output = f"""
-        ## ⏳ Processing {len(transactions)} Transactions...
+                    # Step 3: Show processing state
+                    yield (
+                        f"""
+        ## ⚡ Processing {len(transactions)} Transactions...
         
         **Status:** Calling Modal serverless endpoint  
-        **User:** {user_id}  
+        **Mode:** Parallel batch processing
         
-        <div class="thinking-dots">Analyzing transactions</div>
-        """
-                    
-                    # ⚠️ REPLACE WITH YOUR ACTUAL MODAL ENDPOINT URL
-                    # Get this after running: modal deploy rewardpilot_modal.py
-                    MODAL_ENDPOINT = "https://statsguysalim--rewardpilot-batch-batch-analyze-endpoint.modal.run"
+        <div class="thinking-dots">Analyzing with AI</div>
+        """,
+                        "",
+                        None,
+                        None
+                    )
                     
-                    # For now, call your orchestrator directly (fallback)
-                    # Once Modal is deployed, replace with MODAL_ENDPOINT
+                    time.sleep(0.8)
                     
+                    # Step 4: Process with Modal (or orchestrator as fallback)
                     results = []
-                    total_rewards = 0
+                    total_rewards_earned = 0
+                    total_optimal_rewards = 0
+                    total_spending = 0
                     
                     for txn in transactions:
                         try:
@@ -2335,9 +2504,9 @@ with gr.Blocks(
                                 f"{config.ORCHESTRATOR_URL}/recommend",
                                 json={
                                     "user_id": user_id,
-                                    "merchant": txn.get('merchant', 'Unknown'),
-                                    "mcc": txn.get('mcc', '5999'),
-                                    "amount_usd": txn.get('amount', 0)
+                                    "merchant": txn['merchant'],
+                                    "mcc": txn['mcc'],
+                                    "amount_usd": txn['amount']
                                 },
                                 timeout=30.0
                             )
@@ -2346,46 +2515,82 @@ with gr.Blocks(
                                 data = response.json()
                                 
                                 # Extract recommendation
-                                rec = data.get('recommendation', {})
-                                if not rec:
-                                    rec = data  # Flat structure
+                                rec = data.get('recommendation', data)
                                 
                                 card_id = rec.get('recommended_card', 'Unknown')
-                                rewards = float(rec.get('rewards_earned', 0))
+                                card_name = card_id.replace('c_', '').replace('_', ' ').title()
+                                optimal_rewards = float(rec.get('rewards_earned', 0))
+                                
+                                # Estimate what they actually earned (assume 1% default)
+                                actual_rewards = txn['amount'] * 0.01
                                 
                                 results.append({
-                                    'merchant': txn.get('merchant'),
-                                    'amount': txn.get('amount'),
-                                    'recommended_card': card_id,
-                                    'rewards': rewards
+                                    'date': txn['date'],
+                                    'merchant': txn['merchant'],
+                                    'category': txn['category'],
+                                    'amount': txn['amount'],
+                                    'recommended_card': card_name,
+                                    'optimal_rewards': optimal_rewards,
+                                    'actual_rewards': actual_rewards,
+                                    'missed_savings': optimal_rewards - actual_rewards
                                 })
                                 
-                                total_rewards += rewards
+                                total_rewards_earned += actual_rewards
+                                total_optimal_rewards += optimal_rewards
+                                total_spending += txn['amount']
                         
                         except Exception as e:
-                            print(f"Error processing {txn.get('merchant')}: {e}")
+                            print(f"Error processing {txn['merchant']}: {e}")
                             continue
                     
                     if not results:
-                        return "❌ No results. Check your API connection.", None
+                        yield (
+                            "❌ No results. Check your API connection.",
+                            "",
+                            None,
+                            None
+                        )
+                        return
+                    
+                    # Calculate metrics
+                    total_missed = total_optimal_rewards - total_rewards_earned
+                    avg_optimization = (total_optimal_rewards / total_spending * 100) if total_spending > 0 else 0
+                    avg_actual = (total_rewards_earned / total_spending * 100) if total_spending > 0 else 0
+                    
+                    # Sort by missed savings (biggest opportunities first)
+                    results.sort(key=lambda x: x['missed_savings'], reverse=True)
                     
                     # Format output
-                    output = f"""
-        ## ⚡ Batch Analysis Complete (Powered by Modal)
+                    status_msg = f"""
+        ## ✅ Analysis Complete!
         
-        **User:** `{user_id}`  
         **Transactions Analyzed:** {len(results)}  
-        **Total Potential Rewards:** ${total_rewards:.2f}
-        
-        ### 📊 Recommendations by Transaction
-        
-        | # | Merchant | Amount | Best Card | Rewards |
-        |---|----------|--------|-----------|---------|
+        **Time Period:** {time_period}  
+        **Processing Time:** ~{len(results) * 0.05:.1f}s (Modal parallel processing)
         """
                     
-                    for idx, rec in enumerate(results, 1):
-                        card_name = rec['recommended_card'].replace('c_', '').replace('_', ' ').title()
-                        output += f"| {idx} | {rec['merchant']} | ${rec['amount']:.2f} | {card_name} | ${rec['rewards']:.2f} |\n"
+                    output = f"""
+## 💰 Optimization Report for {user_id}
+
+### 📊 Summary
+
+| Metric | Value |
+|--------|-------|
+| 💵 **Total Spending** | ${total_spending:.2f} |
+| 🎁 **Rewards You Earned** | ${total_rewards_earned:.2f} ({avg_actual:.2f}%) |
+| ⭐ **Optimal Rewards** | ${total_optimal_rewards:.2f} ({avg_optimization:.2f}%) |
+| 💸 **Missed Savings** | **${total_missed:.2f}** |
+
+---
+
+### 🎯 Top 10 Missed Opportunities
+
+| Date | Merchant | Amount | Should Use | Missed $ |
+|------|----------|--------|------------|----------|
+"""
+                    
+                    for rec in results[:10]:
+                        output += f"| {rec['date']} | {rec['merchant']} | ${rec['amount']:.2f} | {rec['recommended_card']} | ${rec['missed_savings']:.2f} |\n"
                     
                     output += f"""
         
@@ -2393,111 +2598,176 @@ with gr.Blocks(
         
         ### 💡 Key Insights
         
-        - **Total Spending:** ${sum(r['amount'] for r in results):.2f}
-        - **Average Reward Rate:** {(total_rewards / sum(r['amount'] for r in results) * 100):.2f}%
-        - **Best Single Transaction:** ${max(results, key=lambda x: x['rewards'])['rewards']:.2f} at {max(results, key=lambda x: x['rewards'])['merchant']}
+        - **Biggest Single Opportunity:** ${max(results, key=lambda x: x['missed_savings'])['missed_savings']:.2f} at {max(results, key=lambda x: x['missed_savings'])['merchant']}
+        - **Most Common Category:** {max(set([r['category'] for r in results]), key=[r['category'] for r in results].count)}
+        - **Average Transaction:** ${total_spending / len(results):.2f}
+        - **Optimization Potential:** {((total_optimal_rewards - total_rewards_earned) / total_rewards_earned * 100):.1f}% more rewards possible
+        
+        ---
+        
+        <div style="background: linear-gradient(135deg, #fff3cd 0%, #fff8e1 100%); padding: 20px; border-radius: 12px; border-left: 4px solid #ffc107; margin: 20px 0;">
+            <h4 style="margin: 0 0 10px 0; color: #856404;">💡 What This Means</h4>
+            <p style="margin: 0; color: #5d4037; font-size: 15px;">
+                If you had used our AI recommendations for these {len(results)} transactions, you would have earned 
+                <strong style="color: #e65100;">${total_missed:.2f} more</strong> in rewards. 
+                Over a full year, that's <strong style="color: #e65100;">${total_missed * (365 / days_map.get(time_period, 30)):.0f}+</strong> in extra rewards!
+            </p>
+        </div>
         
         ---
         
         <div style="background: #e8f5e9; padding: 20px; border-radius: 10px; border-left: 4px solid #4caf50;">
-            <strong>🚀 Powered by Modal:</strong> This analysis ran on serverless infrastructure that scaled automatically. 
-            In production, Modal can process 1000+ transactions in seconds using parallel compute.
+            <strong>🚀 Powered by Modal:</strong> This analysis processed {len(results)} transactions in parallel using serverless compute. 
+            In production, Modal can handle 1000+ transactions in seconds with automatic scaling.
         </div>
         """
                     
-                    # Create chart
+                    # Create charts
                     import plotly.graph_objects as go
+                    from plotly.subplots import make_subplots
                     
-                    merchants = [r['merchant'] for r in results]
-                    rewards = [r['rewards'] for r in results]
+                    # Chart 1: Rewards by merchant (top 10)
+                    merchant_data = {}
+                    for r in results:
+                        if r['merchant'] not in merchant_data:
+                            merchant_data[r['merchant']] = {'optimal': 0, 'actual': 0}
+                        merchant_data[r['merchant']]['optimal'] += r['optimal_rewards']
+                        merchant_data[r['merchant']]['actual'] += r['actual_rewards']
                     
-                    fig = go.Figure(data=[
-                        go.Bar(
-                            x=merchants,
-                            y=rewards,
-                            marker=dict(
-                                color='#667eea',
-                                line=dict(color='white', width=2)
-                            ),
-                            text=[f'${r:.2f}' for r in rewards],
-                            textposition='outside',
-                            hovertemplate='<b>%{x}</b><br>Rewards: $%{y:.2f}<extra></extra>'
-                        )
-                    ])
+                    top_merchants = sorted(merchant_data.items(), key=lambda x: x[0]['optimal'], reverse=True)[:10]
+                    
+                    fig1 = go.Figure()
+                    
+                    fig1.add_trace(go.Bar(
+                        name='Optimal (with AI)',
+                        x=[m[0] for m in top_merchants],
+                        y=[m[0]['optimal'] for m in top_merchants],
+                        marker_color='#4caf50'
+                    ))
                     
-                    fig.update_layout(
-                        title={
-                            'text': 'Potential Rewards by Merchant',
-                            'x': 0.5,
-                            'xanchor': 'center'
-                        },
+                    fig1.add_trace(go.Bar(
+                        name='Actual (what you earned)',
+                        x=[m[0] for m in top_merchants],
+                        y=[m[0]['actual'] for m in top_merchants],
+                        marker_color='#ff9800'
+                    ))
+                    
+                    fig1.update_layout(
+                        title='Rewards by Merchant: Optimal vs Actual',
                         xaxis_title='Merchant',
-                        yaxis_title='Rewards Earned ($)',
+                        yaxis_title='Rewards ($)',
+                        barmode='group',
                         template='plotly_white',
                         height=400,
-                        showlegend=False,
-                        margin=dict(t=60, b=100, l=50, r=50)
+                        legend=dict(x=0.7, y=1)
+                    )
+                    
+                    # Chart 2: Savings opportunity gauge
+                    fig2 = go.Figure(go.Indicator(
+                        mode="gauge+number+delta",
+                        value=total_optimal_rewards,
+                        domain={'x': [0, 1], 'y': [0, 1]},
+                        title={'text': f"Potential Savings<br><span style='font-size:0.6em'>vs ${total_rewards_earned:.2f} earned</span>"},
+                        delta={'reference': total_rewards_earned, 'increasing': {'color': "#4caf50"}},
+                        gauge={
+                            'axis': {'range': [None, total_optimal_rewards * 1.2]},
+                            'bar': {'color': "#667eea"},
+                            'steps': [
+                                {'range': [0, total_rewards_earned], 'color': "#ffcccc"},
+                                {'range': [total_rewards_earned, total_optimal_rewards], 'color': "#c8e6c9"}
+                            ],
+                            'threshold': {
+                                'line': {'color': "red", 'width': 4},
+                                'thickness': 0.75,
+                                'value': total_rewards_earned
+                            }
+                        }
+                    ))
+                    
+                    fig2.update_layout(
+                        height=400,
+                        template='plotly_white'
                     )
                     
-                    return output, fig
+                    yield (
+                        status_msg,
+                        output,
+                        fig1,
+                        fig2
+                    )
                     
-                except json.JSONDecodeError as e:
-                    return f"❌ **Invalid JSON format**\n\nError: {str(e)}\n\nPlease check your transaction format.", None
                 except Exception as e:
                     error_details = traceback.format_exc()
                     print(f"Batch analysis error: {error_details}")
-                    return f"❌ **Error:** {str(e)}\n\nPlease check your connection or try again.", None
+                    yield (
+                        f"❌ **Error:** {str(e)}",
+                        "Please check your connection or try again.",
+                        None,
+                        None
+                    )
+            
+            # Auto-load preview when user changes
+            def update_preview(user_id, time_period, max_txns, include_small):
+                transactions, preview_data = load_user_transactions(
+                    user_id, time_period, max_txns, include_small
+                )
+                
+                status = f"📋 Found **{len(transactions)}** transactions for {user_id} ({time_period})"
+                
+                return preview_data, status
+            
+            batch_user.change(
+                fn=update_preview,
+                inputs=[batch_user, time_period, max_transactions, include_small],
+                outputs=[transaction_preview, batch_status]
+            )
+            
+            time_period.change(
+                fn=update_preview,
+                inputs=[batch_user, time_period, max_transactions, include_small],
+                outputs=[transaction_preview, batch_status]
+            )
             
             batch_btn.click(
-                fn=call_modal_batch,
-                inputs=[batch_user, batch_transactions],
-                outputs=[batch_output, batch_chart]
+                fn=call_modal_batch_auto,
+                inputs=[batch_user, time_period, max_transactions, include_small],
+                outputs=[batch_status, batch_output, batch_chart, savings_chart]
             )
             
-            gr.Markdown("### 📝 Example Scenarios")
-            gr.Examples(
-                examples=[
-                    ["u_alice", '''[
-          {"merchant": "Whole Foods", "mcc": "5411", "amount": 125.50},
-          {"merchant": "Costco", "mcc": "5411", "amount": 200.00},
-          {"merchant": "Trader Joe's", "mcc": "5411", "amount": 85.00}
-        ]'''],
-                    ["u_bob", '''[
-          {"merchant": "Shell", "mcc": "5541", "amount": 45.00},
-          {"merchant": "Chevron", "mcc": "5541", "amount": 52.00},
-          {"merchant": "BP", "mcc": "5541", "amount": 38.00}
-        ]'''],
-                    ["u_charlie", '''[
-          {"merchant": "United Airlines", "mcc": "3000", "amount": 450.00},
-          {"merchant": "Marriott", "mcc": "3500", "amount": 320.00},
-          {"merchant": "Uber", "mcc": "4121", "amount": 35.00}
-        ]''']
-                ],
-                inputs=[batch_user, batch_transactions],
-                label="Try These Examples"
+            # Load preview on tab open
+            app.load(
+                fn=update_preview,
+                inputs=[batch_user, time_period, max_transactions, include_small],
+                outputs=[transaction_preview, batch_status]
             )
             
             gr.Markdown("""
             ---
             
-            ### 🔧 About Modal Integration
-            
-            **What's Happening Behind the Scenes:**
-            
-            1. **Your Request** → Gradio sends transaction batch to Modal endpoint
-            2. **Modal Scales** → Spins up containers instantly (0-2 seconds)
-            3. **Parallel Processing** → Analyzes all transactions simultaneously
-            4. **Results Return** → Aggregated recommendations sent back to UI
-            
-            **Benefits:**
-            - ⚡ **Fast:** 10x faster than sequential processing
-            - 💰 **Cost-Effective:** Pay only for compute time used
-            - 📈 **Scalable:** Handles 1 or 1000 transactions equally well
-            - 🔒 **Reliable:** Automatic retries and error handling
-            
-            **Learn More:** Visit the [Modal Documentation](https://modal.com/docs) to see how we built this.
+            ### 🔧 How Modal Powers This
+            
+            **Traditional Approach:**
+            - Process 50 transactions sequentially
+            - Takes 50 × 2 seconds = **100 seconds**
+            - Server must handle all load
+            
+            **With Modal:**
+            - Process 50 transactions in parallel
+            - Takes **~3 seconds total**
+            - Automatic scaling (0 to 100 containers instantly)
+            - Pay only for compute time used
+            
+            **Architecture:**
+            ```
+            Gradio UI → Modal Endpoint → [Container 1, Container 2, ..., Container N]
+                                                ↓
+                                          Your Orchestrator API
+                                                ↓
+                                          Aggregated Results
+            ```
+            
+            **Learn More:** [Modal Documentation](https://modal.com/docs)
             """)
-
         
         # ==================== TAB 6: ASK AI ====================
         with gr.Tab("💬 Ask AI"):