Update app.py

app.py

@@ -40,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, # This will now be the enhanced version
+        format_report_for_display, # This will now return header HTML and body Markdown
         extract_key_results_for_selection,
         format_single_okr_for_display
     )
@@ -51,11 +51,41 @@ except ImportError as e:
     # Placeholder functions to prevent app from crashing if imports fail
     def load_and_display_agentic_results(*args, **kwargs):
         # 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=[]), gr.update(value="Modules not loaded."), None, [], [], "Error", {}
+        # Adjusted return values for the new split report display components
+        empty_header_html = """
+        <div class="report-title">📊 Comprehensive Analysis Report</div>
+        <div class="report-subtitle">AI-Generated Insights from Your LinkedIn Data</div>
+        <div class="status-badge">Generated from Bubble.io</div>
+        """
+        empty_body_markdown = """
+        <div class="empty-state">
+            <div class="empty-state-icon">📄</div>
+            <div class="empty-state-title">No Report Selected</div>
+            <div class="empty-state-description">
+                Please select a report from the library above to view its detailed analysis and insights.
+            </div>
+        </div>
+        """
+        # The load_and_display_agentic_results function returns many values.
+        # Ensure the placeholder returns the correct number of gr.update components
+        # matching the `outputs` in the .then() call later.
+        return (
+            gr.update(value="Modules not loaded."), # agentic_pipeline_status_md
+            gr.update(choices=[], value=None),      # report_selector_dd
+            gr.update(choices=[], value=[]),        # key_results_cbg
+            gr.update(value="Modules not loaded."), # okr_detail_display_md
+            None, # orchestration_raw_results_st
+            [], # selected_key_result_ids_st
+            [], # key_results_for_selection_st
+            gr.update(value=empty_header_html), # report_header_html_display
+            gr.update(value=empty_body_markdown), # report_body_markdown_display
+            {} # reconstruction_cache_st
+        )
     def fetch_and_reconstruct_data_from_bubble(*args, **kwargs):
         return None, {}
     def format_report_for_display(report_data):
-        return "Agentic modules not loaded. Report display unavailable."
+        # Placeholder for when modules are not loaded, returns structure matching the new design
+        return {'header_html': '<h1>Agentic modules not loaded.</h1>', 'body_markdown': 'Report display unavailable.'}
     def extract_key_results_for_selection(okr_data):
         return []
     def format_single_okr_for_display(okr_data, **kwargs):
@@ -139,52 +169,68 @@ 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.
-        This function now uses the enhanced formatting from ui/insights_ui_generator.py.
+        Updates the report header and body display when a new report is selected.
+        This function now expects format_report_for_display to return a dict with
+        'header_html' and 'body_markdown'.
+        """
+        # Define empty states for header and body
+        empty_header_html = """
+        <div class="report-title">📊 Comprehensive Analysis Report</div>
+        <div class="report-subtitle">AI-Generated Insights from Your LinkedIn Data</div>
+        <div class="status-badge">Generated from Bubble.io</div>
+        """
+        empty_body_markdown_no_selection = """
+        <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>
         """
+        empty_body_markdown_no_data = """
+        <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>
+        """
+        empty_body_markdown_not_found = lambda _id: 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 '{_id}' was not found in the database.
+            </div>
+        </div>
+        """
+
         if not selected_report_id:
-            # 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>
-            """)
+            # When no report is selected, update both header and body
+            return gr.update(value=empty_header_html), gr.update(value=empty_body_markdown_no_selection)
         
         agentic_df = current_token_state.get("bubble_agentic_analysis_data")
         if agentic_df is None or agentic_df.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>
-            """)
+            # When no data is available, update both header and body
+            return gr.update(value=empty_header_html), gr.update(value=empty_body_markdown_no_data)
 
         selected_report_series_df = agentic_df[agentic_df['_id'] == selected_report_id]
         if selected_report_series_df.empty:
-            # 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>
-            """)
+            # When report is not found, update both header and body
+            return gr.update(value=empty_header_html), gr.update(value=empty_body_markdown_not_found(selected_report_id))
         
         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
+        # Call the format_report_for_display, which now returns a dict
+        formatted_content_parts = format_report_for_display(selected_report_series)
+        
+        # Update the two separate Gradio components
+        return (
+            gr.update(value=formatted_content_parts['header_html']),
+            gr.update(value=formatted_content_parts['body_markdown'])
+        )
 
 
     with gr.Tabs() as tabs:
@@ -207,7 +253,8 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
         # 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):
             # The create_enhanced_report_tab function handles the CSS and HTML structure
-            agentic_pipeline_status_md, report_selector_dd, agentic_report_display_md = \
+            # MODIFIED: Unpacked 4 values instead of 3
+            agentic_pipeline_status_md, report_selector_dd, report_header_html_display, report_body_markdown_display = \
                 create_enhanced_report_tab(AGENTIC_MODULES_LOADED)
 
 
@@ -257,22 +304,25 @@ 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, # This now calls the enhanced function
+            # MODIFIED: Updated outputs to match the two new display components
             inputs=[report_selector_dd, token_state],
-            outputs=[agentic_report_display_md],
+            outputs=[report_header_html_display, report_body_markdown_display], 
             show_progress="minimal"
         )
 
     # Ensure agentic_display_outputs correctly maps to the newly created components
+    # This list must match the outputs of load_and_display_agentic_results
     agentic_display_outputs = [
-        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
+        agentic_pipeline_status_md,      # 0: Status Markdown (hidden)
+        report_selector_dd,             # 1: Dropdown for selecting reports
+        key_results_cbg,                # 2: Checkbox group for OKRs
+        okr_detail_display_md,          # 3: Markdown for detailed OKR display
+        orchestration_raw_results_st,   # 4: Raw results state
+        selected_key_result_ids_st,     # 5: Selected KR IDs state
+        key_results_for_selection_st,   # 6: All KRs for selection state
+        report_header_html_display,     # 7: New HTML output for header
+        report_body_markdown_display,   # 8: New Markdown output for body
+        reconstruction_cache_st         # 9: Reconstruction cache state
     ]
 
     initial_load_event = org_urn_display.change(
@@ -291,6 +341,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"),
     ).then(
         fn=load_and_display_agentic_results,
         inputs=[token_state, reconstruction_cache_st],
+        # MODIFIED: Updated outputs to match all components returned by load_and_display_agentic_results
         outputs=agentic_display_outputs,
         show_progress="minimal"
     )