Add application files

app.py

@@ -559,6 +559,11 @@ footer { display: none !important; }
     display: none !important;
 }
 
+/* Hide pages by default using CSS class */
+.page-hidden {
+    display: none !important;
+}
+
 .setup-required {
     background: var(--warning-light);
     border: 2px solid var(--warning-orange);
@@ -2713,6 +2718,87 @@ def create_app():
             if (overlay) overlay.style.display = 'none';
         }};
 
+        // Page navigation using CSS classes
+        window._pageIds = ['setup', 'dashboard', 'discovery', 'prospects', 'contacts', 'emails', 'chat', 'about'];
+        window._pageElementsCache = {{}};
+
+        // Find page element - tries multiple approaches
+        function findPageElement(pageId) {{
+            // Check cache first
+            if (window._pageElementsCache[pageId]) {{
+                return window._pageElementsCache[pageId];
+            }}
+
+            let el = null;
+
+            // Try direct ID
+            el = document.getElementById('page-' + pageId);
+
+            // Try querySelector with partial match
+            if (!el) {{
+                el = document.querySelector('[id*="page-' + pageId + '"]');
+            }}
+
+            // Try finding by data attribute
+            if (!el) {{
+                el = document.querySelector('[data-page="' + pageId + '"]');
+            }}
+
+            // Cache if found
+            if (el) {{
+                window._pageElementsCache[pageId] = el;
+                console.log('Cached page element:', pageId, '->', el.id || el.className);
+            }}
+
+            return el;
+        }}
+
+        window.selectPage = function(pageName) {{
+            console.log('selectPage called:', pageName);
+
+            // Close mobile sidebar
+            if (window.closeMobileSidebar) {{
+                window.closeMobileSidebar();
+            }}
+
+            // Update active nav item
+            document.querySelectorAll('.nav-item').forEach(function(item) {{
+                item.classList.toggle('active', item.dataset.page === pageName);
+            }});
+
+            // Show/hide pages using class-based approach
+            let foundCount = 0;
+            window._pageIds.forEach(function(id) {{
+                const el = findPageElement(id);
+                if (el) {{
+                    foundCount++;
+                    if (id === pageName) {{
+                        el.classList.remove('page-hidden');
+                        el.style.display = 'flex';
+                        console.log('SHOWING page:', id);
+                    }} else {{
+                        el.classList.add('page-hidden');
+                        el.style.display = 'none';
+                    }}
+                }}
+            }});
+
+            if (foundCount === 0) {{
+                console.error('No page elements found! Dumping DOM structure...');
+                const mainWrapper = document.querySelector('.main-wrapper');
+                if (mainWrapper) {{
+                    console.log('main-wrapper children:', mainWrapper.children.length);
+                    Array.from(mainWrapper.children).forEach(function(child, i) {{
+                        console.log(i + ':', child.tagName, child.id, child.className.substring(0, 50));
+                    }});
+                }} else {{
+                    console.log('main-wrapper not found!');
+                }}
+            }} else {{
+                console.log('Found', foundCount, 'page elements');
+            }}
+        }};
+
         // Initialize on load
         document.addEventListener('DOMContentLoaded', function() {{
             // Handle overlay click to close sidebar
@@ -2720,6 +2806,12 @@ def create_app():
             if (overlay) {{
                 overlay.addEventListener('click', window.closeMobileSidebar);
             }}
+
+            // Initial page element discovery after Gradio loads
+            setTimeout(function() {{
+                console.log('Running initial page discovery...');
+                window.selectPage('setup');
+            }}, 1000);
         }});
     </script>
     """
@@ -2868,7 +2960,7 @@ def create_app():
                         setup_output = gr.Markdown("*Enter your credentials and company name to begin.*")
 
             # ===== DASHBOARD PAGE =====
-            with gr.Column(visible=False, elem_id="page-dashboard") as dashboard_page:
+            with gr.Column(visible=True, elem_id="page-dashboard", elem_classes="page-hidden") as dashboard_page:
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">📊 Dashboard</h1>
                     <p class="page-subtitle">Overview of your sales pipeline</p>
@@ -2897,7 +2989,7 @@ def create_app():
                 refresh_btn = gr.Button("🔄 Refresh Dashboard", variant="secondary")
 
             # ===== DISCOVERY PAGE =====
-            with gr.Column(visible=False, elem_id="page-discovery") as discovery_page:
+            with gr.Column(visible=True, elem_id="page-discovery", elem_classes="page-hidden") as discovery_page:
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">🔍 Discovery</h1>
                     <p class="page-subtitle">AI-powered prospect discovery</p>
@@ -2934,7 +3026,7 @@ def create_app():
                         discovery_output = gr.Markdown("*Click 'Find Prospects' after completing Setup.*")
 
             # ===== PROSPECTS PAGE =====
-            with gr.Column(visible=False, elem_id="page-prospects") as prospects_page:
+            with gr.Column(visible=True, elem_id="page-prospects", elem_classes="page-hidden") as prospects_page:
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">🎯 Prospects</h1>
                     <p class="page-subtitle">Companies discovered by AI</p>
@@ -2954,7 +3046,7 @@ def create_app():
                 prospects_list = gr.HTML(get_prospects_html())
 
             # ===== CONTACTS PAGE =====
-            with gr.Column(visible=False, elem_id="page-contacts") as contacts_page:
+            with gr.Column(visible=True, elem_id="page-contacts", elem_classes="page-hidden") as contacts_page:
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">👥 Contacts</h1>
                     <p class="page-subtitle">Decision makers found by AI</p>
@@ -2974,7 +3066,7 @@ def create_app():
                 contacts_list = gr.HTML(get_contacts_html())
 
             # ===== EMAILS PAGE =====
-            with gr.Column(visible=False, elem_id="page-emails") as emails_page:
+            with gr.Column(visible=True, elem_id="page-emails", elem_classes="page-hidden") as emails_page:
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">✉️ Emails</h1>
                     <p class="page-subtitle">AI-drafted outreach emails</p>
@@ -2994,7 +3086,7 @@ def create_app():
                 emails_list = gr.HTML(get_emails_html())
 
             # ===== AI CHAT PAGE =====
-            with gr.Column(visible=False, elem_id="page-chat") as chat_page:
+            with gr.Column(visible=True, elem_id="page-chat", elem_classes="page-hidden") as chat_page:
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">💬 AI Chat</h1>
                     <p class="page-subtitle">AI-powered communication hub</p>
@@ -3090,7 +3182,7 @@ def create_app():
                         handoff_output = gr.Markdown(visible=False, elem_classes="handoff-packet")
 
             # ===== ABOUT US PAGE =====
-            with gr.Column(visible=False, elem_id="page-about") as about_page:
+            with gr.Column(visible=True, elem_id="page-about", elem_classes="page-hidden") as about_page:
                 gr.HTML("""<div class="page-header"><div>
                     <h1 class="page-title">ℹ️ About Us</h1>
                     <p class="page-subtitle">Learn more about CX AI Agent</p>
@@ -3279,40 +3371,7 @@ This project is open source and available under the MIT License.
         btn_chat.click(fn=lambda: show_page("chat"), outputs=all_pages)
         btn_about.click(fn=lambda: show_page("about"), outputs=all_pages)
 
-        # JavaScript to connect sidebar nav items to Gradio page selector
-        gr.HTML("""
-        <script>
-            window._pageIds = ['setup', 'dashboard', 'discovery', 'prospects', 'contacts', 'emails', 'chat', 'about'];
-
-            window.selectPage = function(pageName) {
-                // Close mobile sidebar immediately
-                if (window.closeMobileSidebar) {
-                    window.closeMobileSidebar();
-                }
-
-                // Update active nav item in sidebar (instant visual feedback)
-                document.querySelectorAll('.nav-item').forEach(item => {
-                    item.classList.toggle('active', item.dataset.page === pageName);
-                });
-
-                // Directly show/hide page containers
-                window._pageIds.forEach(function(pageId) {
-                    const pageEl = document.getElementById('page-' + pageId);
-                    if (pageEl) {
-                        if (pageId === pageName) {
-                            pageEl.style.display = 'flex';
-                            pageEl.classList.remove('hidden');
-                        } else {
-                            pageEl.style.display = 'none';
-                            pageEl.classList.add('hidden');
-                        }
-                    }
-                });
-
-                console.log('Switched to page:', pageName);
-            };
-        </script>
-        """)
+        # Navigation JavaScript is now in head_html for earlier loading
 
         # ===== EVENT HANDLERS =====