Update ui/okr_ui_generator.py

ui/okr_ui_generator.py

@@ -10,17 +10,28 @@ def create_enhanced_okr_tab():
     Creates a modern, visually appealing OKR tab with improved layout and styling.
     This version includes full support for Gradio's dark mode and a redesigned,
     more readable objective header by using a robust CSS variable-based theming approach.
+    Includes a visual debugger for theme detection.
 
     Returns:
         gr.HTML: The Gradio HTML component that will display the formatted OKRs.
     """
 
     # --- Refactored CSS for Robust Dark Mode Theming ---
-    # This version uses CSS variables for both light and dark modes, which is a more
-    # reliable and maintainable way to handle themes. Instead of overriding dozens of
-    # individual CSS rules, we just redefine the color variables once.
     okr_custom_css = """
     <style>
+    /* --- Debugger Style --- */
+    #theme-debug {
+        position: fixed;
+        top: 10px;
+        left: 10px;
+        padding: 5px 10px;
+        border-radius: 5px;
+        font-family: sans-serif;
+        font-size: 12px;
+        font-weight: bold;
+        z-index: 9999;
+    }
+
     /* ----------------------------------------- */
     /* --- THEME & COLOR VARIABLES          --- */
     /* ----------------------------------------- */
@@ -216,39 +227,50 @@ def create_enhanced_okr_tab():
     </style>
     <script>
         // This script is responsible for syncing the theme with the main Gradio app.
-        // It checks if the parent document has the 'dark' class and applies it here.
-        // A MutationObserver watches for real-time changes when the user toggles the theme.
+        // It now includes a visual debugger to confirm its status.
         function syncThemeWithParent() {
             try {
                 const parentHtml = window.parent.document.querySelector('html');
-                if (parentHtml) {
-                    if (parentHtml.classList.contains('dark')) {
-                        document.documentElement.classList.add('dark');
+                const iframeHtml = document.documentElement;
+                const debugDiv = document.getElementById('theme-debug');
+
+                if (parentHtml && iframeHtml) {
+                    const isDark = parentHtml.classList.contains('dark');
+                    if (isDark) {
+                        iframeHtml.classList.add('dark');
                     } else {
-                        document.documentElement.classList.remove('dark');
+                        iframeHtml.classList.remove('dark');
+                    }
+                    
+                    // Update the visual debugger
+                    if (debugDiv) {
+                        if (isDark) {
+                            debugDiv.textContent = 'Dark';
+                            debugDiv.style.backgroundColor = '#3b82f6'; // Blue
+                            debugDiv.style.color = 'white';
+                        } else {
+                            debugDiv.textContent = 'Light';
+                            debugDiv.style.backgroundColor = '#dc2626'; // Red
+                            debugDiv.style.color = 'white';
+                        }
                     }
                 }
             } catch (e) {
                 console.error("Theme Sync Error:", e);
+                const debugDiv = document.getElementById('theme-debug');
+                if (debugDiv) {
+                    debugDiv.textContent = 'Error';
+                    debugDiv.style.backgroundColor = 'yellow';
+                    debugDiv.style.color = 'black';
+                }
             }
         }
 
-        try {
-            const observer = new MutationObserver(syncThemeWithParent);
-            const parentHtml = window.parent.document.querySelector('html');
-            if (parentHtml) {
-                observer.observe(parentHtml, { attributes: true, attributeFilter: ['class'] });
-            }
-        } catch (e) {
-            console.error("Could not set up theme MutationObserver:", e);
-        }
+        // Use a more reliable polling mechanism instead of MutationObserver for wider compatibility.
+        setInterval(syncThemeWithParent, 250);
 
-        // Run sync on load and after short delays as a fallback.
-        document.addEventListener('DOMContentLoaded', () => {
-            syncThemeWithParent();
-            setTimeout(syncThemeWithParent, 50);
-            setTimeout(syncThemeWithParent, 250);
-        });
+        // Run on load.
+        document.addEventListener('DOMContentLoaded', syncThemeWithParent);
     </script>
     """
 
@@ -265,15 +287,9 @@ def create_enhanced_okr_tab():
     return okr_display_html
 
 def get_initial_okr_display() -> str:
-    """
-    Returns the initial HTML display for the OKR tab, showing a loading state.
-
-    Returns:
-        str: HTML string for the initial OKR display.
-    """
-    # This HTML uses the CSS classes defined above. The styles are applied
-    # automatically based on the variables, which are theme-aware.
+    """Returns the initial HTML display for the OKR tab, showing a loading state."""
     return """
+    <div id="theme-debug">Loading...</div>
     <div class="okr-container">
         <div class="okr-header">
             <div class="okr-title">
@@ -304,20 +320,12 @@ def get_initial_okr_display() -> str:
     """
 
 def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
-    """
-    Enhanced formatting function that creates beautiful HTML for OKR display
-    from the reconstruction cache dictionary.
-
-    Args:
-        reconstruction_cache (dict): The reconstruction cache containing reconstructed data.
-
-    Returns:
-        str: A comprehensive HTML string representing the OKRs, or an empty state HTML.
-    """
+    """Enhanced formatting function that creates beautiful HTML for OKR display."""
     if not reconstruction_cache:
         logger.warning("No reconstruction cache found for display.")
         return get_empty_okr_state()
 
+    # (Code to extract actionable_okrs... remains the same)
     for report_id, report_data in reconstruction_cache.items():
         if isinstance(report_data, dict) and 'actionable_okrs' in report_data:
             raw_results = {'actionable_okrs': report_data['actionable_okrs']}
@@ -333,21 +341,17 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
         logger.info("No OKRs found in 'actionable_okrs' list.")
         return get_empty_okr_state()
 
+    # (Code to calculate stats... remains the same)
     total_objectives = len(okrs_list)
     total_key_results = sum(len(okr.get('key_results', [])) for okr in okrs_list)
-    total_tasks = sum(
-        len(kr.get('tasks', []))
-        for okr in okrs_list
-        for kr in okr.get('key_results', [])
-    )
-    high_priority_tasks = sum(
-        1 for okr in okrs_list
-        for kr in okr.get('key_results', [])
-        for task in kr.get('tasks', [])
-        if task.get('priority', '').lower() == 'high'
-    )
-
-    html_parts = [f"""
+    total_tasks = sum(len(kr.get('tasks', [])) for okr in okrs_list for kr in okr.get('key_results', []))
+    high_priority_tasks = sum(1 for okr in okrs_list for kr in okr.get('key_results', []) for task in kr.get('tasks', []) if task.get('priority', '').lower() == 'high')
+    
+    # Start HTML with the debugger div
+    html_parts = ["""<div id="theme-debug"></div>"""]
+
+    # --- The rest of the HTML generation logic remains identical ---
+    html_parts.append(f"""
     <div class="okr-container">
         <div class="okr-header">
             <div class="okr-title">
@@ -363,7 +367,7 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
             <div class="stat-card"><div class="stat-number">{high_priority_tasks}</div><div class="stat-label">High Priority</div></div>
         </div>
         <div class="okr-content">
-    """]
+    """)
 
     for okr_idx, okr_data in enumerate(okrs_list):
         if not isinstance(okr_data, dict):
@@ -395,29 +399,22 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
             html_parts.append('<div class="empty-state">No key results defined for this objective.</div>')
         else:
             for kr_idx, kr_data in enumerate(key_results):
-                if not isinstance(kr_data, dict):
-                    logger.warning(f"Key Result item at index {kr_idx} is not a dictionary, skipping.")
-                    continue
+                if not isinstance(kr_data, dict): continue
 
                 kr_desc = kr_data.get('description', f"Unnamed Key Result {kr_idx + 1}")
-                target_metric = kr_data.get('target_metric', '')
-                target_value = kr_data.get('target_value', '')
-                kr_type = kr_data.get('key_result_type', '')
-                data_subject = kr_data.get('data_subject', '')
-
                 html_parts.append(f"""
                     <div class="key-result">
                         <div class="kr-header">
                             <div class="kr-title">Key Result {kr_idx + 1}: {kr_desc}</div>
                             <div class="kr-metrics">
                 """)
-                if target_metric and target_value:
-                    html_parts.append(f'<div class="kr-metric">Target: {target_metric} → {target_value}</div>')
-                if kr_type:
-                    html_parts.append(f'<div class="kr-metric">Type: {kr_type}</div>')
-                if data_subject:
-                    html_parts.append(f'<div class="kr-metric">Data Subject: {data_subject}</div>')
-                html_parts.append('</div></div>') # Close kr-metrics and kr-header
+                if kr_data.get('target_metric') and kr_data.get('target_value'):
+                    html_parts.append(f'<div class="kr-metric">Target: {kr_data.get("target_metric")} → {kr_data.get("target_value")}</div>')
+                if kr_data.get('key_result_type'):
+                    html_parts.append(f'<div class="kr-metric">Type: {kr_data.get("key_result_type")}</div>')
+                if kr_data.get('data_subject'):
+                    html_parts.append(f'<div class="kr-metric">Data Subject: {kr_data.get("data_subject")}</div>')
+                html_parts.append('</div></div>')
 
                 tasks = kr_data.get('tasks', [])
                 if tasks and isinstance(tasks, list):
@@ -427,7 +424,6 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
                         task_desc = task_data.get('description', f"Unnamed Task {task_idx + 1}")
                         priority = task_data.get('priority', 'Medium').lower()
                         priority_class = f"priority-{priority}" if priority in ['high', 'medium', 'low'] else 'priority-medium'
-                        
                         html_parts.append(f"""
                                 <div class="task-item">
                                     <div class="task-header">
@@ -441,37 +437,22 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
                                         <div class="task-detail-item"><span class="task-detail-label">Responsible:</span><span>{task_data.get('responsible_party', 'N/A')}</span></div>
                                     </div>
                         """)
-
-                        detail_lines = []
-                        if task_data.get('deliverable'): detail_lines.append(f'<strong>Objective/Deliverable:</strong> {task_data.get("deliverable")}')
-                        if task_data.get('success_criteria_metrics'): detail_lines.append(f'<strong>Success Metrics:</strong> {task_data.get("success_criteria_metrics")}')
-                        if task_data.get('why'): detail_lines.append(f'<strong>Rationale:</strong> {task_data.get("why")}')
-                        if task_data.get('priority_justification'): detail_lines.append(f'<strong>Priority Justification:</strong> {task_data.get("priority_justification")}')
-                        if task_data.get('dependencies'): detail_lines.append(f'<strong>Dependencies:</strong> {task_data.get("dependencies")}')
-
+                        detail_lines = [f'<strong>{k.replace("_", " ").title()}:</strong> {v}' for k, v in task_data.items() if k in ['deliverable', 'success_criteria_metrics', 'why', 'priority_justification', 'dependencies'] and v]
                         if detail_lines:
-                            html_parts.append('<div class="task-description">')
-                            html_parts.append('<br>'.join(detail_lines))
-                            html_parts.append('</div>')
-
-                        html_parts.append('</div>') # Close task-item
-                    html_parts.append('</div>') # Close tasks-section
+                            html_parts.append(f'<div class="task-description">{"<br>".join(detail_lines)}</div>')
+                        html_parts.append('</div>')
+                    html_parts.append('</div>')
                 else:
-                    html_parts.append('<div class="tasks-section"><div class="empty-state-small">No tasks defined for this Key Result.</div></div>')
-                html_parts.append('</div>') # Close key-result
-        html_parts.append('</div></div>') # Close key-results-container and okr-objective
-    html_parts.append('</div></div>') # Close okr-content and okr-container
+                    html_parts.append('<div class="tasks-section"><div class="empty-state-small">No tasks defined.</div></div>')
+                html_parts.append('</div>')
+        html_parts.append('</div></div>')
+    html_parts.append('</div></div>')
     return ''.join(html_parts)
 
-
 def get_empty_okr_state() -> str:
-    """
-    Returns empty state HTML for when no OKRs are available.
-
-    Returns:
-        str: HTML string for the empty OKR state.
-    """
+    """Returns empty state HTML for when no OKRs are available."""
     return """
+    <div id="theme-debug"></div>
     <div class="okr-container">
         <div class="okr-header">
             <div class="okr-title">
@@ -480,14 +461,12 @@ def get_empty_okr_state() -> str:
             </div>
             <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
         </div>
-
         <div class="okr-stats-bar">
             <div class="stat-card"><div class="stat-number">0</div><div class="stat-label">Objectives</div></div>
             <div class="stat-card"><div class="stat-number">0</div><div class="stat-label">Key Results</div></div>
             <div class="stat-card"><div class="stat-number">0</div><div class="stat-label">Tasks</div></div>
             <div class="stat-card"><div class="stat-number">0</div><div class="stat-label">High Priority</div></div>
         </div>
-
         <div class="okr-content">
             <div class="empty-state">
                 <div class="empty-state-icon">📋</div>