Update ui/ui_generators.py

ui/ui_generators.py

@@ -720,7 +720,7 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
     }
     
     .status-badge::before {
-        content: "�";
+        content: "📊";
         margin-right: 8px;
     }
     
@@ -764,7 +764,9 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
         min-height: 400px;
     }
     
-    .report-content .markdown {
+    /* MODIFIED: Removed .report-content .markdown as the component is now gr.HTML */
+    /* and direct styling is handled by the overall CSS */
+    .report-content .gr-html { /* Target the inner HTML component directly */
         padding: 40px;
         font-size: 1.1rem;
         line-height: 1.8;
@@ -887,7 +889,7 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
             padding: 24px;
         }
         
-        .report-content .markdown {
+        .report-content .gr-html { /* Target the inner HTML component directly */
             padding: 24px;
         }
         
@@ -905,7 +907,8 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
     }
     
     /* Gradio Component Overrides */
-    .gradio-container .report-content .markdown {
+    /* REMOVED: .gradio-container .report-content .markdown as component is now gr.HTML */
+    .gradio-container .report-content .gr-html { /* Target the inner HTML component directly */
         background: transparent !important;
         border: none !important;
     }
@@ -932,10 +935,11 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
         color: #6b6b6b;
     }
     
+    /* MODIFIED: Removed animation for hourglass */
     .loading-indicator::before {
         content: "⏳";
         margin-right: 12px;
-        animation: spin 2s linear infinite;
+        /* animation: spin 2s linear infinite; */ /* REMOVED ANIMATION */
     }
     
     @keyframes spin {
@@ -986,7 +990,8 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
         
         # Report content display area
         with gr.Column(elem_classes=["report-content"]):
-            agentic_report_display_md = gr.Markdown(
+            # MODIFIED: Changed from gr.Markdown to gr.HTML to render raw HTML from format_report_for_display
+            agentic_report_display_md = gr.HTML(
                 """
                 <div class="empty-state">
                     <div class="empty-state-icon">📄</div>
@@ -996,7 +1001,7 @@ def create_enhanced_report_tab(agentic_modules_loaded_status: bool):
                     </div>
                 </div>
                 """,
-                elem_classes=["markdown"]
+                elem_classes=["gr-html"] # Changed elem_classes to target gr-html if needed
             )
     
     # Error handling for when modules are not loaded