Update app.py

app.py

@@ -22,6 +22,7 @@ from services.state_manager import load_data_from_bubble
 from ui.ui_generators import (
     build_analytics_tab_plot_area,
     build_home_tab_ui, # NEW: Import the function to build the Home tab UI
+    create_enhanced_report_tab, # NEW: Import the function to build the enhanced Report tab UI
     BOMB_ICON, EXPLORE_ICON, FORMULA_ICON, ACTIVE_ICON
 )
 from ui.analytics_plot_generator import update_analytics_plots_figures, create_placeholder_plot
@@ -39,7 +40,7 @@ try:
     from services.report_data_handler import fetch_and_reconstruct_data_from_bubble
     # UI formatting functions
     from ui.insights_ui_generator import (
-        format_report_for_display,
+        format_report_for_display, # This will now be the enhanced version
         extract_key_results_for_selection,
         format_single_okr_for_display
     )
@@ -49,7 +50,8 @@ except ImportError as e:
     AGENTIC_MODULES_LOADED = False
     # Placeholder functions to prevent app from crashing if imports fail
     def load_and_display_agentic_results(*args, **kwargs):
-        return "Modules not loaded.", gr.update(), "Modules not loaded.", "Modules not loaded.", None, [], [], "Error", {}
+        # NOTE: This return signature MUST match agentic_display_outputs
+        return gr.update(value="Modules not loaded."), gr.update(choices=[], value=None), gr.update(choices=[], value=[], value=[]), gr.update(value="Modules not loaded."), None, [], [], "Error", {}
     def fetch_and_reconstruct_data_from_bubble(*args, **kwargs):
         return None, {}
     def format_report_for_display(report_data):
@@ -76,7 +78,7 @@ else:
 
 
 with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
-                title="LinkedIn Organization Dashboard") as app:
+               title="LinkedIn Organization Dashboard") as app:
     # --- STATE MANAGEMENT ---
     token_state = gr.State(value={
         "token": None, "client_id": None, "org_urn": None,
@@ -138,24 +140,53 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
     def update_report_display(selected_report_id: str, current_token_state: dict):
         """
         Updates only the report display markdown when a new report is selected.
-        The OKR visualization remains unchanged as it's loaded initially.
+        This function now uses the enhanced formatting from ui/insights_ui_generator.py.
         """
         if not selected_report_id:
-            return gr.update(value="*Please select a report to view its details.*")
+            # Return an empty state HTML for no selection
+            return gr.update(value="""
+                <div class="empty-state">
+                    <div class="empty-state-icon">📋</div>
+                    <div class="empty-state-title">Select a Report</div>
+                    <div class="empty-state-description">
+                        Choose a report from the dropdown above to view its detailed analysis and insights.
+                    </div>
+                </div>
+            """)
         
         agentic_df = current_token_state.get("bubble_agentic_analysis_data")
         if agentic_df is None or agentic_df.empty:
-            return gr.update(value="*Analysis data not loaded or is empty.*")
+            # Return an empty state HTML for no data
+            return gr.update(value="""
+                <div class="empty-state">
+                    <div class="empty-state-icon">⚠️</div>
+                    <div class="empty-state-title">Data Not Available</div>
+                    <div class="empty-state-description">
+                        Analysis data is not loaded or is empty. Please try refreshing the page.
+                    </div>
+                </div>
+            """)
 
         selected_report_series_df = agentic_df[agentic_df['_id'] == selected_report_id]
         if selected_report_series_df.empty:
-            return gr.update(value=f"*Error: Report with ID '{selected_report_id}' not found.*")
+            # Return an empty state HTML for report not found
+            return gr.update(value=f"""
+                <div class="empty-state">
+                    <div class="empty-state-icon">❌</div>
+                    <div class="empty-state-title">Report Not Found</div>
+                    <div class="empty-state-description">
+                        Report with ID '{selected_report_id}' was not found in the database.
+                    </div>
+                </div>
+            """)
         
         selected_report_series = selected_report_series_df.iloc[0]
+        # Call the now-enhanced format_report_for_display from ui/insights_ui_generator.py
         report_markdown = format_report_for_display(selected_report_series)
         
         return report_markdown
 
+
     with gr.Tabs() as tabs:
         # --- NEW HOME TAB ---
         with gr.TabItem("1️⃣ Home", id="tab_home"):
@@ -171,15 +202,14 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
 
         analytics_tab_instance.create_tab_ui() # This is the "Graphs" tab, assuming its ID is "tab_analytics"
 
+        # --- REPLACED: Agentic Analysis Report Tab with enhanced UI ---
+        # The create_enhanced_report_tab function now builds this entire tab's UI.
+        # It also returns the relevant Gradio components needed for callbacks.
         with gr.TabItem("3️⃣ Agentic Analysis Report", id="tab_agentic_report", visible=AGENTIC_MODULES_LOADED):
-            gr.Markdown("## 🤖 Comprehensive Analysis Report (from Bubble.io)")
-            agentic_pipeline_status_md = gr.Markdown("Status: Loading report data...", visible=True)
-            gr.Markdown("Questo report è stato pre-generato. Seleziona un report dalla libreria per visualizzarlo.")
-            with gr.Row():
-                report_selector_dd = gr.Dropdown(label="Report Library", choices=[], interactive=True, info="Select a report.")
-            agentic_report_display_md = gr.Markdown("Please select a report from the library to view it.")
-            if not AGENTIC_MODULES_LOADED:
-                gr.Markdown("🔴 **Error:** Agentic modules could not be loaded.")
+            # The create_enhanced_report_tab function handles the CSS and HTML structure
+            agentic_pipeline_status_md, report_selector_dd, agentic_report_display_md = \
+                create_enhanced_report_tab(AGENTIC_MODULES_LOADED)
+
 
         with gr.TabItem("4️⃣ Agentic OKRs & Tasks", id="tab_agentic_okrs", visible=AGENTIC_MODULES_LOADED):
             gr.Markdown("## 🎯 AI Generated OKRs and Actionable Tasks (from Bubble.io)")
@@ -226,16 +256,23 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
     
     if AGENTIC_MODULES_LOADED:
         report_selector_dd.change(
-            fn=update_report_display,
+            fn=update_report_display, # This now calls the enhanced function
             inputs=[report_selector_dd, token_state],
             outputs=[agentic_report_display_md],
             show_progress="minimal"
         )
 
+    # Ensure agentic_display_outputs correctly maps to the newly created components
     agentic_display_outputs = [
-        agentic_report_display_md, report_selector_dd, key_results_cbg,
-        okr_detail_display_md, orchestration_raw_results_st, selected_key_result_ids_st,
-        key_results_for_selection_st, agentic_pipeline_status_md, reconstruction_cache_st
+        agentic_report_display_md, # Updated by create_enhanced_report_tab
+        report_selector_dd,        # Updated by create_enhanced_report_tab
+        key_results_cbg,
+        okr_detail_display_md,
+        orchestration_raw_results_st,
+        selected_key_result_ids_st,
+        key_results_for_selection_st,
+        agentic_pipeline_status_md, # Updated by create_enhanced_report_tab
+        reconstruction_cache_st
     ]
 
     initial_load_event = org_urn_display.change(
@@ -269,3 +306,4 @@ if __name__ == "__main__":
         logging.warning("WARNING: 'GEMINI_API_KEY' is not set.")
 
     app.launch(server_name="0.0.0.0", server_port=int(os.environ.get("PORT", 7860)), debug=True)
+