Update ui/okr_ui_generator.py

ui/okr_ui_generator.py

@@ -9,29 +9,39 @@ 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.
+    more readable objective header by using a robust CSS variable-based theming approach.
 
     Returns:
         gr.HTML: The Gradio HTML component that will display the formatted OKRs.
     """
 
-    # Custom CSS for modern OKR styling with Dark Mode support and JS theme syncing
+    # --- 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>
     /* ----------------------------------------- */
-    /* --- LIGHT MODE THEME & COLOR VARIABLES --- */
+    /* --- 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;
-        --content-bg: white;
-        --content-shadow: rgba(0,0,0,0.1);
+
+        /* -- Objective Cards -- */
         --objective-card-bg: #f8fafc;
         --objective-card-border: #3b82f6;
         --objective-shadow: 0 4px 16px rgba(0,0,0,0.05);
@@ -39,6 +49,8 @@ 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;
@@ -47,6 +59,8 @@ 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;
@@ -57,6 +71,8 @@ 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;
@@ -66,6 +82,71 @@ 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     --- */
+    /* ----------------------------------------- */
+    html.dark {
+        /* -- Base & Layout -- */
+        --content-bg: #0d1117;
+        --content-shadow: rgba(0,0,0,0.6);
+
+        /* -- Headers & Titles -- */
+        --header-text-color: #e5e7eb;
+
+        /* -- Stat Cards -- */
+        --stat-card-bg: rgba(28, 28, 28, 0.7);
+        --stat-card-border: rgba(50, 50, 50, 0.8);
+
+        /* -- Objective Cards -- */
+        --objective-card-bg: #161b22;
+        --objective-card-border: #3b82f6; /* Keep brand color */
+        --objective-shadow: 0 8px 24px rgba(0,0,0,0.5);
+        --objective-shadow-hover: 0 10px 28px rgba(0,0,0,0.6);
+        --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;
+        --kr-header-bg: #161b22;
+        --kr-title-color: #c9d1d9;
+        --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;
+        --task-item-border-hover: #8b949e;
+        --task-title-color: #c9d1d9;
+        --task-detail-label-color: #8b949e;
+        --task-detail-text-color: #8b949e;
+        --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);
+        --priority-medium-bg: rgba(210, 153, 34, 0.15);
+        --priority-medium-color: #d29922;
+        --priority-medium-border: rgba(210, 153, 34, 0.4);
+        --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;
     }
 
     /* ----------------------------------------- */
@@ -74,16 +155,12 @@ def create_enhanced_okr_tab():
     .okr-container {
         font-family: 'Inter', 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;
     }
-
     .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-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-stats-bar { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0; flex-wrap: wrap; }
@@ -123,39 +200,8 @@ 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(--task-item-bg-hover); border-radius: 50%; border-top-color: var(--objective-card-border); animation: spin 1s ease-in-out infinite; }
+    .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; }
     @keyframes spin { to { transform: rotate(360deg); } }
-    
-    /* ----------------------------------------- */
-    /* --- DARK MODE OVERRIDES (DIRECT) --- */
-    /* ----------------------------------------- */
-    html.dark .okr-title-content { background: linear-gradient(45deg, #e5e7eb, #9ca3af); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
-    html.dark .okr-header { color: #e5e7eb; }
-    html.dark .stat-card { background: rgba(28, 28, 28, 0.7); border-color: rgba(50, 50, 50, 0.8); box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
-    html.dark .okr-content { background: #0d1117; box-shadow: 0 20px 40px rgba(0,0,0,0.6); }
-    html.dark .okr-objective { background: #161b22; border-left-color: #3b82f6; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
-    html.dark .okr-objective:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.6); }
-    html.dark .objective-header { border-bottom-color: #30363d; }
-    html.dark .objective-title { color: #58a6ff; }
-    html.dark .meta-item { color: #8b949e; }
-    html.dark .key-result { background: #161b22; border-color: #30363d; }
-    html.dark .key-result:hover { border-color: #58a6ff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }
-    html.dark .kr-header { background: #161b22; border-bottom-color: #30363d; }
-    html.dark .kr-title { color: #c9d1d9; }
-    html.dark .kr-metric { background: rgba(56, 139, 253, 0.15); color: #58a6ff; border-color: rgba(56, 139, 253, 0.4); }
-    html.dark .tasks-title { color: #8b949e; }
-    html.dark .task-item { background: #21262d; border-color: #30363d; }
-    html.dark .task-item:hover { background: #30363d; border-color: #8b949e; }
-    html.dark .task-title { color: #c9d1d9; }
-    html.dark .task-detail-label { color: #8b949e; }
-    html.dark .task-detail-item { color: #8b949e; }
-    html.dark .task-description { background: #0d1117; color: #8b949e; border-left-color: #30363d; }
-    html.dark .priority-high { background: rgba(248, 81, 73, 0.15); color: #ff7b72; border-color: rgba(248, 81, 73, 0.4); }
-    html.dark .priority-medium { background: rgba(210, 153, 34, 0.15); color: #d29922; border-color: rgba(210, 153, 34, 0.4); }
-    html.dark .priority-low { background: rgba(63, 185, 80, 0.15); color: #56d364; border-color: rgba(63, 185, 80, 0.4); }
-    html.dark .empty-state { color: #8b949e; }
-    html.dark .empty-state-title { color: #58a6ff; }
-    html.dark .loading-spinner { border-color: #30363d; border-top-color: #58a6ff; }
 
     /* Responsive Adjustments */
     @media (max-width: 768px) {
@@ -169,10 +215,10 @@ 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.
         function syncThemeWithParent() {
-            // This script runs inside the Gradio iframe. It looks at the parent page's
-            // <html> tag to see if the 'dark' class is present and applies it to the
-            // iframe's own <html> tag, ensuring the CSS rules for dark mode are activated.
             try {
                 const parentHtml = window.parent.document.querySelector('html');
                 if (parentHtml) {
@@ -183,12 +229,10 @@ def create_enhanced_okr_tab():
                     }
                 }
             } catch (e) {
-                // This can fail due to cross-origin policies, but it's safe in Gradio.
-                console.error("Error syncing theme with parent:", e);
+                console.error("Theme Sync Error:", e);
             }
         }
 
-        // Use a MutationObserver to detect when the theme is toggled on the parent page.
         try {
             const observer = new MutationObserver(syncThemeWithParent);
             const parentHtml = window.parent.document.querySelector('html');
@@ -199,8 +243,7 @@ def create_enhanced_okr_tab():
             console.error("Could not set up theme MutationObserver:", e);
         }
 
-        // Also run the sync function once when the iframe's content has loaded,
-        // and a few times after as a fallback for timing issues.
+        // Run sync on load and after short delays as a fallback.
         document.addEventListener('DOMContentLoaded', () => {
             syncThemeWithParent();
             setTimeout(syncThemeWithParent, 50);
@@ -213,7 +256,7 @@ def create_enhanced_okr_tab():
         # Inject custom CSS and the theme-syncing JS
         gr.HTML(okr_custom_css)
 
-        # Main OKR display area with enhanced styling
+        # Main OKR display area
         okr_display_html = gr.HTML(
             value=get_initial_okr_display(),
             elem_classes=["okr-display"]
@@ -228,6 +271,8 @@ def get_initial_okr_display() -> str:
     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.
     return """
     <div class="okr-container">
         <div class="okr-header">
@@ -239,22 +284,10 @@ def get_initial_okr_display() -> str:
         </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 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">
@@ -277,7 +310,6 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
 
     Args:
         reconstruction_cache (dict): The reconstruction cache containing reconstructed data.
-                                     Expected to contain report data with 'actionable_okrs' key.
 
     Returns:
         str: A comprehensive HTML string representing the OKRs, or an empty state HTML.
@@ -286,7 +318,6 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
         logger.warning("No reconstruction cache found for display.")
         return get_empty_okr_state()
 
-    # Extract actionable_okrs from the first (and typically only) report in 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']}
@@ -302,7 +333,6 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
         logger.info("No OKRs found in 'actionable_okrs' list.")
         return get_empty_okr_state()
 
-    # 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(
@@ -317,7 +347,6 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
         if task.get('priority', '').lower() == 'high'
     )
 
-    # Build the HTML structure
     html_parts = [f"""
     <div class="okr-container">
         <div class="okr-header">
@@ -327,26 +356,12 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> 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">{total_objectives}</div>
-                <div class="stat-label">Objectives</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-number">{total_key_results}</div>
-                <div class="stat-label">Key Results</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-number">{total_tasks}</div>
-                <div class="stat-label">Tasks</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-number">{high_priority_tasks}</div>
-                <div class="stat-label">High Priority</div>
-            </div>
+            <div class="stat-card"><div class="stat-number">{total_objectives}</div><div class="stat-label">Objectives</div></div>
+            <div class="stat-card"><div class="stat-number">{total_key_results}</div><div class="stat-label">Key Results</div></div>
+            <div class="stat-card"><div class="stat-number">{total_tasks}</div><div class="stat-label">Tasks</div></div>
+            <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">
     """]
 
@@ -365,27 +380,23 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
                     <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>
+                            <span class="meta-icon">⏰</span> <span>Timeline: {timeline}</span>
                         </div>
                         <div class="meta-item">
-                            <span class="meta-icon">👤</span>
-                            <span>Owner: {owner}</span>
+                            <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>')
         else:
             for kr_idx, kr_data in enumerate(key_results):
                 if not isinstance(kr_data, dict):
-                    logger.warning(f"Key Result item for Objective {okr_idx+1} at index {kr_idx} is not a dictionary, skipping.")
+                    logger.warning(f"Key Result item at index {kr_idx} is not a dictionary, skipping.")
                     continue
 
                 kr_desc = kr_data.get('description', f"Unnamed Key Result {kr_idx + 1}")
@@ -400,87 +411,43 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
                             <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
 
-                html_parts.append('</div></div>')
-
-                # Add tasks
                 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"><div class="tasks-title"><span>📋</span><span>Associated Tasks</span></div>')
                     for task_idx, task_data in enumerate(tasks):
-                        if not isinstance(task_data, dict):
-                            logger.warning(f"Task item for Key Result {kr_idx+1} at index {task_idx} is not a dictionary, skipping.")
-                            continue
-
+                        if not isinstance(task_data, dict): continue
                         task_desc = task_data.get('description', f"Unnamed Task {task_idx + 1}")
-                        task_category = task_data.get('category', 'General')
-                        
                         priority = task_data.get('priority', 'Medium').lower()
-                        effort = task_data.get('effort', 'Not specified')
-                        timeline = task_data.get('timeline', 'Not specified')
-                        responsible = task_data.get('responsible_party', 'Not assigned')
-
                         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">
-                                    <div class="task-title">{task_idx + 1}. {task_desc}</div>
-                                    <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_category}</span>
-                                    </div>
-                                    <div class="task-detail-item">
-                                        <span class="task-detail-label">Effort:</span>
-                                        <span>{effort}</span>
+                                <div class="task-item">
+                                    <div class="task-header">
+                                        <div class="task-title">{task_idx + 1}. {task_desc}</div>
+                                        <div class="task-priority {priority_class}">{priority.upper()}</div>
                                     </div>
-                                    <div class="task-detail-item">
-                                        <span class="task-detail-label">Timeline:</span>
-                                        <span>{timeline}</span>
+                                    <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">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>
-                                    <div class="task-detail-item">
-                                        <span class="task-detail-label">Responsible:</span>
-                                        <span>{responsible}</span>
-                                    </div>
-                                </div>
                         """)
 
-                        # Add additional details if available
-                        obj_deliverable = task_data.get('deliverable')
-                        success_criteria = task_data.get('success_criteria_metrics')
-                        why_proposed = task_data.get('why')
-                        priority_just = task_data.get('priority_justification')
-                        dependencies = task_data.get('dependencies')
-
                         detail_lines = []
-                        if obj_deliverable:
-                            detail_lines.append(f'<strong>Objective/Deliverable:</strong> {obj_deliverable}')
-                        if success_criteria:
-                            detail_lines.append(f'<strong>Success Metrics:</strong> {success_criteria}')
-                        if why_proposed:
-                            detail_lines.append(f'<strong>Rationale:</strong> {why_proposed}')
-                        if priority_just:
-                            detail_lines.append(f'<strong>Priority Justification:</strong> {priority_just}')
-                        if dependencies:
-                            detail_lines.append(f'<strong>Dependencies:</strong> {dependencies}')
+                        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")}')
 
                         if detail_lines:
                             html_parts.append('<div class="task-description">')
@@ -488,26 +455,15 @@ def format_okrs_for_enhanced_display(reconstruction_cache: dict) -> str:
                             html_parts.append('</div>')
 
                         html_parts.append('</div>') # Close task-item
-
                     html_parts.append('</div>') # Close tasks-section
                 else:
-                    html_parts.append("""
-                            <div class="tasks-section">
-                                <div class="empty-state-small">
-                                    <div class="empty-state-icon">📄</div>
-                                    <div class="empty-state-description">No tasks defined for this Key Result.</div>
-                                </div>
-                            </div>
-                        """)
-
+                    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
-
     return ''.join(html_parts)
 
+
 def get_empty_okr_state() -> str:
     """
     Returns empty state HTML for when no OKRs are available.
@@ -526,22 +482,10 @@ def get_empty_okr_state() -> str:
         </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 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">