Add application files

app.py

@@ -380,14 +380,29 @@ footer { display: none !important; }
 
 /* ============== MAIN CONTENT AREA ============== */
 .main-wrapper {
-    margin-left: var(--sidebar-width);
+    margin-left: var(--sidebar-width) !important;
+    width: calc(100% - var(--sidebar-width)) !important;
+    max-width: calc(100vw - var(--sidebar-width)) !important;
     min-height: 100vh;
     padding: 20px;
-    transition: margin-left 0.3s ease;
+    transition: margin-left 0.3s ease, width 0.3s ease;
     background: var(--bg-secondary);
+    overflow-x: hidden;
+    box-sizing: border-box !important;
+}
+
+.main-wrapper.expanded {
+    margin-left: var(--sidebar-collapsed) !important;
+    width: calc(100% - var(--sidebar-collapsed)) !important;
+    max-width: calc(100vw - var(--sidebar-collapsed)) !important;
 }
 
-.main-wrapper.expanded { margin-left: var(--sidebar-collapsed); }
+/* Ensure Gradio's inner containers don't overflow */
+.main-wrapper > div,
+.main-wrapper > div > div {
+    max-width: 100% !important;
+    overflow-x: hidden;
+}
 
 .content-area {
     max-width: 1200px;
@@ -458,13 +473,19 @@ footer { display: none !important; }
 
     .main-wrapper {
         margin-left: 0 !important;
+        width: 100% !important;
+        max-width: 100vw !important;
         padding: 16px;
         padding-top: calc(var(--header-height) + 16px);
     }
 }
 
 @media (max-width: 480px) {
-    .main-wrapper { padding: 12px; padding-top: calc(var(--header-height) + 12px); }
+    .main-wrapper {
+        padding: 12px;
+        padding-top: calc(var(--header-height) + 12px);
+        width: 100% !important;
+    }
     .page-header { padding: 16px; }
     .page-title { font-size: 20px; }
 }
@@ -566,6 +587,94 @@ footer { display: none !important; }
 .action-card h3 { margin: 0 0 12px 0; color: var(--text-primary); font-size: 18px; font-weight: 600; }
 .action-card p { margin: 0 0 16px 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
 
+/* ============== INFO BOX / HELP TIPS ============== */
+.info-box {
+    background: linear-gradient(135deg, var(--primary-light) 0%, #E8F4FD 100%);
+    border: 1px solid var(--primary-blue);
+    border-left: 4px solid var(--primary-blue);
+    border-radius: 8px;
+    padding: 16px 20px;
+    margin-bottom: 20px;
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+}
+
+.info-box.tip {
+    background: linear-gradient(135deg, #FEF3C7 0%, #FEF9E7 100%);
+    border-color: var(--warning-orange);
+    border-left-color: var(--warning-orange);
+}
+
+.info-box.success {
+    background: linear-gradient(135deg, var(--success-light) 0%, #E8F8ED 100%);
+    border-color: var(--success-green);
+    border-left-color: var(--success-green);
+}
+
+.info-box-icon {
+    font-size: 20px;
+    flex-shrink: 0;
+    margin-top: 2px;
+}
+
+.info-box-content {
+    flex: 1;
+}
+
+.info-box-title {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+    font-size: 14px;
+}
+
+.info-box-text {
+    color: var(--text-secondary);
+    font-size: 13px;
+    line-height: 1.5;
+    margin: 0;
+}
+
+.info-box-text ul {
+    margin: 8px 0 0 0;
+    padding-left: 18px;
+}
+
+.info-box-text li {
+    margin-bottom: 4px;
+}
+
+.dark .info-box {
+    background: linear-gradient(135deg, rgba(1, 118, 211, 0.15) 0%, rgba(1, 118, 211, 0.08) 100%);
+}
+
+.dark .info-box.tip {
+    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.08) 100%);
+}
+
+.dark .info-box.success {
+    background: linear-gradient(135deg, rgba(46, 132, 74, 0.15) 0%, rgba(46, 132, 74, 0.08) 100%);
+}
+
+/* Collapsible help section */
+.help-toggle {
+    background: none;
+    border: none;
+    color: var(--primary-blue);
+    cursor: pointer;
+    font-size: 13px;
+    padding: 4px 8px;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-bottom: 8px;
+}
+
+.help-toggle:hover {
+    text-decoration: underline;
+}
+
 button.primary {
     background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%) !important;
     color: white !important;
@@ -2679,6 +2788,21 @@ def create_app():
                         <p class="page-subtitle">Configure your company and API credentials</p>
                     </div>
                 </div>
+
+                <div class="info-box">
+                    <span class="info-box-icon">🚀</span>
+                    <div class="info-box-content">
+                        <div class="info-box-title">Getting Started</div>
+                        <div class="info-box-text">
+                            Complete these steps to start finding prospects:
+                            <ul>
+                                <li><strong>HuggingFace Token</strong> - Required for AI-powered research and email drafting</li>
+                                <li><strong>Serper API Key</strong> - Optional, enables real-time web search for company info</li>
+                                <li><strong>Company Name</strong> - Your company name helps AI find relevant prospects</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
                 """)
 
                 with gr.Row():
@@ -2724,7 +2848,18 @@ def create_app():
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">📊 Dashboard</h1>
                     <p class="page-subtitle">Overview of your sales pipeline</p>
-                </div></div>""")
+                </div></div>
+
+                <div class="info-box success">
+                    <span class="info-box-icon">📈</span>
+                    <div class="info-box-content">
+                        <div class="info-box-title">Pipeline Overview</div>
+                        <div class="info-box-text">
+                            Track your progress at a glance. The dashboard shows real-time counts of prospects discovered, contacts found, and emails drafted. Click "Refresh" to update the stats after running Discovery.
+                        </div>
+                    </div>
+                </div>
+                """)
 
                 client_status = gr.HTML(get_client_status_html())
 
@@ -2742,7 +2877,23 @@ def create_app():
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">🔍 Discovery</h1>
                     <p class="page-subtitle">AI-powered prospect discovery</p>
-                </div></div>""")
+                </div></div>
+
+                <div class="info-box tip">
+                    <span class="info-box-icon">💡</span>
+                    <div class="info-box-content">
+                        <div class="info-box-title">How Discovery Works</div>
+                        <div class="info-box-text">
+                            <ul>
+                                <li><strong>Step 1:</strong> AI searches the web for companies matching your profile</li>
+                                <li><strong>Step 2:</strong> Finds decision-makers (CEOs, VPs, Founders) with verified emails</li>
+                                <li><strong>Step 3:</strong> Drafts personalized outreach emails for each contact</li>
+                            </ul>
+                            <em>Tip: Start with 2-3 prospects to test, then increase the number.</em>
+                        </div>
+                    </div>
+                </div>
+                """)
 
                 client_status_2 = gr.HTML(get_client_status_html())
 
@@ -2763,7 +2914,18 @@ def create_app():
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">🎯 Prospects</h1>
                     <p class="page-subtitle">Companies discovered by AI</p>
-                </div></div>""")
+                </div></div>
+
+                <div class="info-box">
+                    <span class="info-box-icon">🏢</span>
+                    <div class="info-box-content">
+                        <div class="info-box-title">Your Prospect Companies</div>
+                        <div class="info-box-text">
+                            This list shows all companies found by the AI. Each prospect includes company details, industry, and a fit score (0-100) indicating how well they match your ideal customer profile. Higher scores = better fit!
+                        </div>
+                    </div>
+                </div>
+                """)
                 refresh_prospects_btn = gr.Button("🔄 Refresh", variant="secondary", size="sm")
                 prospects_list = gr.HTML(get_prospects_html())
 
@@ -2772,7 +2934,18 @@ def create_app():
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">👥 Contacts</h1>
                     <p class="page-subtitle">Decision makers found by AI</p>
-                </div></div>""")
+                </div></div>
+
+                <div class="info-box">
+                    <span class="info-box-icon">👤</span>
+                    <div class="info-box-content">
+                        <div class="info-box-title">Decision Maker Contacts</div>
+                        <div class="info-box-text">
+                            AI finds key decision-makers (CEOs, VPs, Founders, Directors) at each prospect company. Contact info includes name, title, email, and company. Only verified contacts with real email addresses are shown.
+                        </div>
+                    </div>
+                </div>
+                """)
                 refresh_contacts_btn = gr.Button("🔄 Refresh", variant="secondary", size="sm")
                 contacts_list = gr.HTML(get_contacts_html())
 
@@ -2781,7 +2954,18 @@ def create_app():
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">✉️ Emails</h1>
                     <p class="page-subtitle">AI-drafted outreach emails</p>
-                </div></div>""")
+                </div></div>
+
+                <div class="info-box tip">
+                    <span class="info-box-icon">✍️</span>
+                    <div class="info-box-content">
+                        <div class="info-box-title">AI-Written Outreach Emails</div>
+                        <div class="info-box-text">
+                            Each email is personalized based on the prospect's company, industry, and any pain points discovered during research. Review and customize before sending. Emails are designed to start conversations, not close deals.
+                        </div>
+                    </div>
+                </div>
+                """)
                 refresh_emails_btn = gr.Button("🔄 Refresh", variant="secondary", size="sm")
                 emails_list = gr.HTML(get_emails_html())
 
@@ -2790,7 +2974,18 @@ def create_app():
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">💬 AI Chat</h1>
                     <p class="page-subtitle">Your AI sales assistant</p>
-                </div></div>""")
+                </div></div>
+
+                <div class="info-box success">
+                    <span class="info-box-icon">🤖</span>
+                    <div class="info-box-content">
+                        <div class="info-box-title">Your AI Sales Assistant</div>
+                        <div class="info-box-text">
+                            Chat with AI to research companies, draft emails, get talking points, or manage your pipeline. The AI has access to all your prospect data and can perform web searches for real-time info.
+                        </div>
+                    </div>
+                </div>
+                """)
 
                 chatbot = gr.Chatbot(value=[], height=400, label="Chat")
 
@@ -2804,7 +2999,7 @@ def create_app():
                     send_btn = gr.Button("Send", variant="primary", scale=1)
 
                 gr.HTML("""<div class="action-card" style="margin-top: 16px;">
-                    <h4>💡 Example Prompts</h4>
+                    <h4>💡 Try These Prompts</h4>
                     <ul style="font-size: 13px; line-height: 1.8; margin: 8px 0 0 0; padding-left: 20px;">
                         <li>"Search for DTC fashion brands that raised Series A"</li>
                         <li>"Draft an email to the CEO of Warby Parker"</li>
@@ -2851,77 +3046,62 @@ def create_app():
         btn_emails.click(fn=lambda: show_page("emails"), outputs=all_pages)
         btn_chat.click(fn=lambda: show_page("chat"), outputs=all_pages)
 
-        # JavaScript to connect sidebar nav items to Gradio buttons
+        # JavaScript to connect sidebar nav items to Gradio buttons (optimized)
         gr.HTML("""
         <script>
+            // Cache for navigation buttons - populated once on load
+            window._navButtonCache = null;
+            window._pageOrder = ['setup', 'dashboard', 'discovery', 'prospects', 'contacts', 'emails', 'chat'];
+
+            // Initialize button cache
+            function initNavCache() {
+                if (window._navButtonCache) return window._navButtonCache;
+                const buttons = document.querySelectorAll('.nav-buttons-row button');
+                if (buttons.length >= 7) {
+                    window._navButtonCache = {};
+                    window._pageOrder.forEach((page, idx) => {
+                        window._navButtonCache[page] = buttons[idx];
+                    });
+                }
+                return window._navButtonCache;
+            }
+
             window.selectPage = function(pageName) {
-                // Close mobile sidebar
+                // Close mobile sidebar immediately
                 if (window.closeMobileSidebar) {
                     window.closeMobileSidebar();
                 }
 
-                // Update active nav item
+                // Update active nav item in sidebar (instant visual feedback)
                 document.querySelectorAll('.nav-item').forEach(item => {
-                    item.classList.remove('active');
-                    if (item.dataset.page === pageName) {
-                        item.classList.add('active');
-                    }
+                    item.classList.toggle('active', item.dataset.page === pageName);
                 });
 
-                // Map page names to button IDs and click the corresponding button
-                const buttonMap = {
-                    'setup': 'btn-setup',
-                    'dashboard': 'btn-dashboard',
-                    'discovery': 'btn-discovery',
-                    'prospects': 'btn-prospects',
-                    'contacts': 'btn-contacts',
-                    'emails': 'btn-emails',
-                    'chat': 'btn-chat'
-                };
-
-                // Find button by elem_id in Gradio's structure
-                const btnId = buttonMap[pageName];
-                if (btnId) {
-                    // Gradio wraps buttons in a div with id containing the elem_id
-                    const btn = document.querySelector(`[id*="${btnId}"] button`) ||
-                               document.querySelector(`button[id*="${btnId}"]`) ||
-                               document.getElementById(btnId);
-                    if (btn) {
-                        btn.click();
-                        return;
-                    }
+                // Use cached button reference for instant navigation
+                const cache = initNavCache();
+                if (cache && cache[pageName]) {
+                    cache[pageName].click();
 
-                    // Fallback: find by button text content
-                    const buttons = document.querySelectorAll('.nav-buttons-row button');
-                    const labels = {
-                        'setup': 'Setup',
-                        'dashboard': 'Dashboard',
-                        'discovery': 'Discovery',
-                        'prospects': 'Prospects',
-                        'contacts': 'Contacts',
-                        'emails': 'Emails',
-                        'chat': 'Chat'
-                    };
-                    buttons.forEach(b => {
-                        if (b.textContent.includes(labels[pageName])) {
-                            b.click();
-                        }
-                    });
+                    // Update button row active state
+                    Object.values(cache).forEach(b => b.classList.remove('active-nav-btn'));
+                    cache[pageName].classList.add('active-nav-btn');
+                    return;
+                }
+
+                // Fallback: direct index access (no searching)
+                const buttons = document.querySelectorAll('.nav-buttons-row button');
+                const idx = window._pageOrder.indexOf(pageName);
+                if (idx >= 0 && buttons[idx]) {
+                    buttons[idx].click();
                 }
             };
 
-            // Highlight active button when clicked
-            document.addEventListener('DOMContentLoaded', function() {
-                setTimeout(function() {
-                    const navButtons = document.querySelectorAll('.nav-buttons-row button');
-                    navButtons.forEach(btn => {
-                        btn.addEventListener('click', function() {
-                            navButtons.forEach(b => b.classList.remove('active-nav-btn'));
-                            this.classList.add('active-nav-btn');
-                        });
-                    });
-                }, 500);
-            });
+            // Initialize cache after Gradio loads
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => setTimeout(initNavCache, 100));
+            } else {
+                setTimeout(initNavCache, 100);
+            }
         </script>
         """)