Update ui/okr_ui_generator.py

ui/okr_ui_generator.py

@@ -8,51 +8,29 @@ logger = logging.getLogger(__name__)
 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.
+    This version includes robust support for Gradio's dark mode with multiple
+    detection methods and fallback mechanisms.
 
     Returns:
         gr.HTML: The Gradio HTML component that will display the formatted OKRs.
     """
-
-    # --- Refactored CSS for Robust Dark Mode Theming ---
+    # Enhanced CSS for modern OKR styling with improved Dark Mode support
     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          --- */
+    /* --- LIGHT MODE THEME & COLOR VARIABLES --- */
     /* ----------------------------------------- */
     :root {
-        /* -- Base & Layout -- */
         --okr-bg-start: #667eea;
         --okr-bg-end: #764ba2;
-        --content-bg: white;
-        --content-shadow: rgba(0,0,0,0.1);
-
-        /* -- Headers & Titles -- */
         --header-text-color: white;
         --header-text-shadow: rgba(0,0,0,0.1);
-
-        /* -- Stat Cards -- */
         --stat-card-bg: rgba(255, 255, 255, 0.15);
         --stat-card-bg-hover: rgba(255, 255, 255, 0.2);
         --stat-card-border: rgba(255, 255, 255, 0.2);
         --stat-number-color: #fbbf24;
-
-        /* -- Objective Cards -- */
+        --content-bg: white;
+        --content-shadow: rgba(0,0,0,0.1);
         --objective-card-bg: #f8fafc;
         --objective-card-border: #3b82f6;
         --objective-shadow: 0 4px 16px rgba(0,0,0,0.05);
@@ -60,8 +38,6 @@ def create_enhanced_okr_tab():
         --objective-header-bg: transparent;
         --objective-title-color: #1e40af;
         --objective-meta-text-color: #475569;
-
-        /* -- Key Result Cards -- */
         --key-result-bg: white;
         --key-result-border: #e5e7eb;
         --key-result-border-hover: #3b82f6;
@@ -70,8 +46,6 @@ def create_enhanced_okr_tab():
         --kr-metric-bg: rgba(59, 130, 246, 0.1);
         --kr-metric-color: #1e40af;
         --kr-metric-border: rgba(59, 130, 246, 0.2);
-
-        /* -- Task Items -- */
         --task-item-bg: #f9fafb;
         --task-item-bg-hover: #f3f4f6;
         --task-item-border: #e5e7eb;
@@ -82,8 +56,6 @@ def create_enhanced_okr_tab():
         --task-description-bg: white;
         --task-description-border: #3b82f6;
         --task-description-color: #4b5563;
-
-        /* -- Priority Badges -- */
         --priority-high-bg: #fef2f2;
         --priority-high-color: #dc2626;
         --priority-high-border: #fca5a5;
@@ -93,36 +65,29 @@ def create_enhanced_okr_tab():
         --priority-low-bg: #f0fdf4;
         --priority-low-color: #16a34a;
         --priority-low-border: #86efac;
-
-        /* -- Utility -- */
-        --loading-spinner-bg: #e5e7eb;
-        --loading-spinner-fg: #3b82f6;
     }
 
     /* ----------------------------------------- */
-    /* --- DARK MODE VARIABLE OVERRIDES     --- */
+    /* --- DARK MODE COLOR VARIABLES --- */
     /* ----------------------------------------- */
     html.dark {
-        /* -- Base & Layout -- */
-        --content-bg: #0d1117;
-        --content-shadow: rgba(0,0,0,0.6);
-
-        /* -- Headers & Titles -- */
+        --okr-bg-start: #1a1a2e;
+        --okr-bg-end: #16213e;
         --header-text-color: #e5e7eb;
-
-        /* -- Stat Cards -- */
+        --header-text-shadow: rgba(0,0,0,0.5);
         --stat-card-bg: rgba(28, 28, 28, 0.7);
-        --stat-card-border: rgba(50, 50, 50, 0.8);
-
-        /* -- Objective Cards -- */
+        --stat-card-bg-hover: rgba(40, 40, 40, 0.8);
+        --stat-card-border: rgba(60, 60, 60, 0.8);
+        --stat-number-color: #fbbf24;
+        --content-bg: #0d1117;
+        --content-shadow: rgba(0,0,0,0.6);
         --objective-card-bg: #161b22;
-        --objective-card-border: #3b82f6; /* Keep brand color */
+        --objective-card-border: #58a6ff;
         --objective-shadow: 0 8px 24px rgba(0,0,0,0.5);
         --objective-shadow-hover: 0 10px 28px rgba(0,0,0,0.6);
+        --objective-header-bg: transparent;
         --objective-title-color: #58a6ff;
         --objective-meta-text-color: #8b949e;
-
-        /* -- Key Result Cards -- */
         --key-result-bg: #161b22;
         --key-result-border: #30363d;
         --key-result-border-hover: #58a6ff;
@@ -131,8 +96,6 @@ def create_enhanced_okr_tab():
         --kr-metric-bg: rgba(56, 139, 253, 0.15);
         --kr-metric-color: #58a6ff;
         --kr-metric-border: rgba(56, 139, 253, 0.4);
-
-        /* -- Task Items -- */
         --task-item-bg: #21262d;
         --task-item-bg-hover: #30363d;
         --task-item-border: #30363d;
@@ -143,8 +106,6 @@ def create_enhanced_okr_tab():
         --task-description-bg: #0d1117;
         --task-description-border: #30363d;
         --task-description-color: #8b949e;
-
-        /* -- Priority Badges -- */
         --priority-high-bg: rgba(248, 81, 73, 0.15);
         --priority-high-color: #ff7b72;
         --priority-high-border: rgba(248, 81, 73, 0.4);
@@ -154,31 +115,31 @@ def create_enhanced_okr_tab():
         --priority-low-bg: rgba(63, 185, 80, 0.15);
         --priority-low-color: #56d364;
         --priority-low-border: rgba(63, 185, 80, 0.4);
-
-        /* -- Utility -- */
-        --loading-spinner-bg: #30363d;
-        --loading-spinner-fg: #58a6ff;
     }
 
     /* ----------------------------------------- */
     /* --- BASE STYLES (Uses Variables) --- */
     /* ----------------------------------------- */
     .okr-container {
-        font-family: 'Inter', sans-serif;
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
         background: linear-gradient(135deg, var(--okr-bg-start) 0%, var(--okr-bg-end) 100%);
-        min-height: 100vh; padding: 2rem; margin: -1rem; box-sizing: border-box; overflow-y: auto;
+        min-height: 100vh;
+        padding: 2rem;
+        margin: -1rem;
+        box-sizing: border-box;
+        overflow-y: auto;
+        color: var(--header-text-color);
     }
     .okr-header { text-align: center; margin-bottom: 3rem; color: var(--header-text-color); }
-    .okr-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; text-shadow: 0 2px 4px var(--header-text-shadow); display: flex; justify-content: center; align-items: center; gap: 0.75rem; }
-    .okr-title-content { background: linear-gradient(45deg, #ffffff, #e0e7ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
-    html.dark .okr-title-content { background: linear-gradient(45deg, #e5e7eb, #9ca3af); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+    .okr-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; text-shadow: 0 2px 4px var(--header-text-shadow); display: flex; justify-content: center; align-items: center; gap: 0.75rem; color: var(--header-text-color); }
+    .okr-title-content { background: linear-gradient(45deg, var(--header-text-color), rgba(255,255,255,0.8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--header-text-color); }
     .okr-title-emoji { font-size: 2.5rem; -webkit-text-fill-color: initial; }
-    .okr-subtitle { font-size: 1.2rem; opacity: 0.9; font-weight: 300; letter-spacing: 0.5px; }
+    .okr-subtitle { font-size: 1.2rem; opacity: 0.9; font-weight: 300; letter-spacing: 0.5px; color: var(--header-text-color); }
     .okr-stats-bar { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; }
     .stat-card { background: var(--stat-card-bg); backdrop-filter: blur(10px); border: 1px solid var(--stat-card-border); border-radius: 16px; padding: 1.5rem; text-align: center; color: var(--header-text-color); min-width: 140px; transition: all 0.3s ease; }
     .stat-card:hover { transform: translateY(-2px); background: var(--stat-card-bg-hover); box-shadow: 0 8px 32px var(--content-shadow); }
     .stat-number { font-size: 2rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--stat-number-color); }
-    .stat-label { font-size: 0.9rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; }
+    .stat-label { font-size: 0.9rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; color: var(--header-text-color); }
     .okr-content { background: var(--content-bg); border-radius: 24px; padding: 0; box-shadow: 0 20px 40px var(--content-shadow); overflow: hidden; margin-top: 2rem; }
     .okr-objective { background: var(--objective-card-bg); border-left: 6px solid var(--objective-card-border); margin: 2rem; border-radius: 16px; overflow: hidden; box-shadow: var(--objective-shadow); transition: all 0.3s ease; }
     .okr-objective:hover { transform: translateY(-2px); box-shadow: var(--objective-shadow-hover); }
@@ -211,85 +172,100 @@ def create_enhanced_okr_tab():
     .empty-state { text-align: center; padding: 4rem 2rem; color: var(--task-detail-text-color); }
     .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; }
     .empty-state-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--objective-title-color); }
-    .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--loading-spinner-bg); border-radius: 50%; border-top-color: var(--loading-spinner-fg); animation: spin 1s ease-in-out infinite; }
+    .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--task-item-bg-hover); border-radius: 50%; border-top-color: var(--objective-card-border); animation: spin 1s ease-in-out infinite; }
     @keyframes spin { to { transform: rotate(360deg); } }
-
-    /* Responsive Adjustments */
-    @media (max-width: 768px) {
-        .okr-container { padding: 1rem; }
-        .okr-title { font-size: 2rem; }
-        .okr-stats-bar { gap: 1rem; }
-        .stat-card { min-width: 120px; padding: 1rem; }
-        .objective-meta { flex-direction: column; gap: 1rem; }
-        .task-details { grid-template-columns: 1fr; }
-        .task-header { flex-direction: column; align-items: flex-start; }
-    }
+    @media (max-width: 768px) { .okr-container { padding: 1rem; } .okr-title { font-size: 2rem; } .okr-stats-bar { gap: 1rem; } .stat-card { min-width: 120px; padding: 1rem; } .objective-meta { flex-direction: column; gap: 1rem; } .task-details { grid-template-columns: 1fr; } .task-header { flex-direction: column; align-items: flex-start; } }
+    @supports (-webkit-appearance: none) { .okr-title-content { color: var(--header-text-color) !important; } }
     </style>
     <script>
-        // This script is responsible for syncing the theme with the main Gradio app.
-        // It now includes a visual debugger to confirm its status.
-        function syncThemeWithParent() {
-            try {
-                const parentHtml = window.parent.document.querySelector('html');
-                const iframeHtml = document.documentElement;
-                const debugDiv = document.getElementById('theme-debug');
+        (function() {
+            'use strict';
+            // Function to apply the theme to the current document's HTML element
+            function applyTheme(theme) {
+                const htmlEl = document.documentElement;
+                if (theme === 'dark') {
+                    htmlEl.classList.add('dark');
+                } else {
+                    htmlEl.classList.remove('dark');
+                }
+            }
 
-                if (parentHtml && iframeHtml) {
-                    const isDark = parentHtml.classList.contains('dark');
-                    if (isDark) {
-                        iframeHtml.classList.add('dark');
+            // Function to detect the theme from the parent Gradio app
+            function detectAndApplyTheme() {
+                try {
+                    // Access the parent document where Gradio's theme class is set
+                    const parentHtml = window.parent.document.querySelector('html');
+                    if (parentHtml) {
+                        const isDark = parentHtml.classList.contains('dark');
+                        applyTheme(isDark ? 'dark' : 'light');
                     } else {
-                        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';
-                        }
+                         // Fallback for system preference if parent is not accessible
+                        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                        applyTheme(prefersDark ? 'dark' : 'light');
                     }
-                }
-            } 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';
+                } catch (e) {
+                    console.warn('OKR Tab: Could not access parent theme. Falling back to system preference.', e.message);
+                    // Fallback for system preference in case of cross-origin issues
+                    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                    applyTheme(prefersDark ? 'dark' : 'light');
                 }
             }
-        }
-
-        // Use a more reliable polling mechanism instead of MutationObserver for wider compatibility.
-        setInterval(syncThemeWithParent, 250);
 
-        // Run on load.
-        document.addEventListener('DOMContentLoaded', syncThemeWithParent);
+            // Use a MutationObserver to watch for theme changes on the parent
+            function observeThemeChanges() {
+                try {
+                    const parentHtml = window.parent.document.querySelector('html');
+                    if (!parentHtml) return;
+
+                    const observer = new MutationObserver(mutations => {
+                        mutations.forEach(mutation => {
+                            if (mutation.attributeName === 'class') {
+                                detectAndApplyTheme();
+                            }
+                        });
+                    });
+
+                    observer.observe(parentHtml, {
+                        attributes: true,
+                        attributeFilter: ['class']
+                    });
+                } catch (e) {
+                     console.warn('OKR Tab: Cannot observe parent theme changes.', e.message);
+                }
+            }
+            
+            // Initial check when the script loads
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', () => {
+                    detectAndApplyTheme();
+                    observeThemeChanges();
+                });
+            } else {
+                detectAndApplyTheme();
+                observeThemeChanges();
+            }
+             // Also listen for system theme changes as a fallback
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', detectAndApplyTheme);
+        })();
     </script>
     """
-
     with gr.Column(elem_classes=["okr-root-column"]):
-        # Inject custom CSS and the theme-syncing JS
+        # Inject custom CSS and the enhanced theme-syncing JS
         gr.HTML(okr_custom_css)
-
-        # Main OKR display area
+        # Main OKR display area with enhanced styling
         okr_display_html = gr.HTML(
             value=get_initial_okr_display(),
             elem_classes=["okr-display"]
         )
-
     return okr_display_html
 
 def get_initial_okr_display() -> str:
-    """Returns the initial HTML display for the OKR tab, showing a loading state."""
+    """
+    Returns the initial HTML display for the OKR tab, showing a loading state.
+    Returns:
+        str: HTML string for the initial OKR display.
+    """
     return """
-    <div id="theme-debug">Loading...</div>
     <div class="okr-container">
         <div class="okr-header">
             <div class="okr-title">
@@ -298,14 +274,12 @@ def get_initial_okr_display() -> 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">-</div><div class="stat-label">Objectives</div></div>
             <div class="stat-card"><div class="stat-number">-</div><div class="stat-label">Key Results</div></div>
             <div class="stat-card"><div class="stat-number">-</div><div class="stat-label">Tasks</div></div>
             <div class="stat-card"><div class="stat-number">-</div><div class="stat-label">High Priority</div></div>
         </div>
-
         <div class="okr-content">
             <div class="empty-state">
                 <div class="empty-state-icon">⏳</div>
@@ -319,45 +293,84 @@ def get_initial_okr_display() -> str:
     </div>
     """
 
+def get_empty_okr_state() -> str:
+    """Returns empty state HTML for when no OKRs are available, using the new styles."""
+    return """
+    <div class="okr-container">
+        <div class="okr-header">
+            <div class="okr-title">
+                <span class="okr-title-emoji">🎯</span>
+                <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span>
+            </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>
+                <div class="empty-state-title">No OKRs Available</div>
+                <div class="empty-state-description">
+                    OKR analysis has not been generated yet or no data is available.<br>
+                    Please ensure your LinkedIn data has been loaded and the AI analysis has completed.
+                </div>
+            </div>
+        </div>
+    </div>
+    """
+
 def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
-    """Enhanced formatting function that creates beautiful HTML for OKR display."""
+    """
+    Enhanced formatting function that creates beautiful HTML for OKR display
+    from the reconstruction cache dictionary, compatible with new styling.
+    Args:
+        reconstruction_cache (dict): The dictionary containing 'actionable_okrs'.
+    Returns:
+        str: A comprehensive HTML string representing the OKRs, or an empty state HTML.
+    """
     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)
+    
+    actionable_okrs = {}
+    # Extract actionable_okrs from the cache
     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']}
+            actionable_okrs = report_data['actionable_okrs']
             break
-    else:
+    
+    if not actionable_okrs:
         logger.warning("No 'actionable_okrs' found in reconstruction cache for display.")
         return get_empty_okr_state()
 
-    actionable_okrs = raw_results.get("actionable_okrs", {})
     okrs_list = actionable_okrs.get("okrs", [])
-
     if not okrs_list:
         logger.info("No OKRs found in 'actionable_okrs' list.")
         return get_empty_okr_state()
 
-    # (Code to calculate stats... remains the same)
+    # Calculate statistics for the stats bar
     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')
-    
-    # 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"""
+    total_key_results = sum(len(okr.get('key_results', [])) for okr in okrs_list if isinstance(okr, dict))
+    total_tasks = sum(
+        len(kr.get('tasks', []))
+        for okr in okrs_list if isinstance(okr, dict)
+        for kr in okr.get('key_results', []) if isinstance(kr, dict)
+    )
+    high_priority_tasks = sum(
+        1 for okr in okrs_list if isinstance(okr, dict)
+        for kr in okr.get('key_results', []) if isinstance(kr, dict)
+        for task in kr.get('tasks', []) if isinstance(task, dict) and task.get('priority', '').lower() == 'high'
+    )
+
+    # --- Start HTML Generation ---
+    html_parts = [f"""
     <div class="okr-container">
         <div class="okr-header">
-            <div class="okr-title">
-                <span class="okr-title-emoji">🎯</span>
-                <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span>
-            </div>
+            <div class="okr-title"><span class="okr-title-emoji">🎯</span><span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span></div>
             <div class="okr-subtitle">Intelligent objectives and key results based on your LinkedIn analytics</div>
         </div>
         <div class="okr-stats-bar">
@@ -367,40 +380,33 @@ 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">
-    """)
+    """]
 
+    # --- Loop through Objectives ---
     for okr_idx, okr_data in enumerate(okrs_list):
-        if not isinstance(okr_data, dict):
-            logger.warning(f"OKR item at index {okr_idx} is not a dictionary, skipping.")
-            continue
-
+        if not isinstance(okr_data, dict): continue
         objective = okr_data.get('description', f"Unnamed Objective {okr_idx + 1}")
-        timeline = okr_data.get('timeline', 'Not specified')
-        owner = okr_data.get('owner', 'Not assigned')
-
+        timeline = okr_data.get('timeline', 'N/A')
+        owner = okr_data.get('owner', 'N/A')
         html_parts.append(f"""
             <div class="okr-objective">
                 <div class="objective-header">
                     <div class="objective-title">Objective {okr_idx + 1}: {objective}</div>
                     <div class="objective-meta">
-                        <div class="meta-item">
-                            <span class="meta-icon">⏰</span> <span>Timeline: {timeline}</span>
-                        </div>
-                        <div class="meta-item">
-                            <span class="meta-icon">👤</span> <span>Owner: {owner}</span>
-                        </div>
+                        <div class="meta-item"><span class="meta-icon">⏰</span> <span>Timeline: {timeline}</span></div>
+                        <div class="meta-item"><span class="meta-icon">👤</span> <span>Owner: {owner}</span></div>
                     </div>
                 </div>
                 <div class="key-results-container">
         """)
 
         key_results = okr_data.get('key_results', [])
-        if not isinstance(key_results, list) or not key_results:
-            html_parts.append('<div class="empty-state">No key results defined for this objective.</div>')
+        if not key_results:
+            html_parts.append('<div class="empty-state" style="padding: 2rem;"><div class="empty-state-title" style="font-size: 1.1rem;">No Key Results</div><div class="empty-state-description">No key results defined for this objective.</div></div>')
         else:
+            # --- Loop through Key Results ---
             for kr_idx, kr_data in enumerate(key_results):
                 if not isinstance(kr_data, dict): continue
-
                 kr_desc = kr_data.get('description', f"Unnamed Key Result {kr_idx + 1}")
                 html_parts.append(f"""
                     <div class="key-result">
@@ -414,16 +420,18 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
                     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>')
+                html_parts.append('</div></div>') # Close kr-metrics & kr-header
 
                 tasks = kr_data.get('tasks', [])
-                if tasks and isinstance(tasks, list):
-                    html_parts.append('<div class="tasks-section"><div class="tasks-title"><span>📋</span><span>Associated Tasks</span></div>')
+                html_parts.append('<div class="tasks-section">')
+                if tasks:
+                    html_parts.append('<div class="tasks-title"><span>📋</span><span>Associated Tasks</span></div>')
+                    # --- Loop through Tasks ---
                     for task_idx, task_data in enumerate(tasks):
                         if not isinstance(task_data, dict): continue
                         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'
+                        priority_class = f"priority-{priority}"
                         html_parts.append(f"""
                                 <div class="task-item">
                                     <div class="task-header">
@@ -431,51 +439,26 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
                                         <div class="task-priority {priority_class}">{priority.upper()}</div>
                                     </div>
                                     <div class="task-details">
-                                        <div class="task-detail-item"><span class="task-detail-label">Category:</span><span>{task_data.get('category', 'General')}</span></div>
+                                        <div class="task-detail-item"><span class="task-detail-label">Category:</span><span>{task_data.get('category', 'N/A')}</span></div>
                                         <div class="task-detail-item"><span class="task-detail-label">Effort:</span><span>{task_data.get('effort', 'N/A')}</span></div>
                                         <div class="task-detail-item"><span class="task-detail-label">Timeline:</span><span>{task_data.get('timeline', 'N/A')}</span></div>
                                         <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 = [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]
+                                    </div>""")
+                        detail_items = {
+                            'Deliverable': task_data.get('deliverable'),
+                            'Success Metrics': task_data.get('success_criteria_metrics'),
+                            'Why': task_data.get('why'),
+                            'Priority Justification': task_data.get('priority_justification'),
+                            'Dependencies': task_data.get('dependencies')
+                        }
+                        detail_lines = [f'<strong>{k}:</strong> {v}' for k, v in detail_items.items() if v]
                         if detail_lines:
                             html_parts.append(f'<div class="task-description">{"<br>".join(detail_lines)}</div>')
-                        html_parts.append('</div>')
-                    html_parts.append('</div>')
+                        html_parts.append('</div>') # Close task-item
                 else:
-                    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)
+                    html_parts.append('<div style="text-align:center; padding: 1rem; color: var(--task-detail-text-color);">No tasks defined for this key result.</div>')
+                html_parts.append('</div></div>') # Close tasks-section & key-result
+        html_parts.append('</div></div>') # Close key-results-container & okr-objective
 
-def get_empty_okr_state() -> str:
-    """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">
-                <span class="okr-title-emoji">🎯</span>
-                <span class="okr-title-content">AI-Generated OKRs & Strategic Tasks</span>
-            </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>
-                <div class="empty-state-title">No OKRs Available</div>
-                <div class="empty-state-description">
-                    OKR analysis has not been generated yet or no data is available.<br>
-                    Please ensure your LinkedIn data has been loaded and the AI analysis has completed.
-                </div>
-            </div>
-        </div>
-    </div>
-    """
+    html_parts.append('</div></div>') # Close okr-content & okr-container
+    return ''.join(html_parts)