Update ui/okr_ui_generator.py

ui/okr_ui_generator.py

@@ -1,4 +1,3 @@
-#okr_ui_generator.py
 import gradio as gr
 from typing import Dict, Any, List, Optional
 import pandas as pd
@@ -9,28 +8,33 @@ logger = logging.getLogger(__name__)
 def create_enhanced_okr_tab():
     """
     Creates a modern, visually appealing OKR tab with improved layout and styling.
-    It returns the Gradio HTML component that will display the OKR content.
+    Removes the checkbox selector for a cleaner, always-visible design.
+
+    Returns:
+        gr.HTML: The Gradio HTML component that will display the formatted OKRs.
     """
-    
+
     # Custom CSS for modern OKR styling
     okr_custom_css = """
     <style>
-    /* Ensure the main container fills the available space and removes default Gradio padding */
+    /* Overall Container */
     .okr-container {
-        font-family: 'Inter', sans-serif; /* Using Inter font as per guidelines */
+        font-family: 'Inter', sans-serif; /* Using Inter font */
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh; /* Ensure it takes full viewport height */
+        min-height: 100vh;
         padding: 2rem;
-        margin: -1rem; /* Adjust for Gradio's default padding */
-        box-sizing: border-box; /* Include padding in element's total width and height */
+        margin: -1rem; /* Adjust margin to fill the space */
+        box-sizing: border-box; /* Ensure padding is included in width/height */
+        overflow-y: auto; /* Enable scrolling if content overflows */
     }
-    
+
+    /* Header Section */
     .okr-header {
         text-align: center;
         margin-bottom: 3rem;
         color: white;
     }
-    
+
     .okr-title {
         font-size: 2.5rem;
         font-weight: 700;
@@ -41,14 +45,15 @@ def create_enhanced_okr_tab():
         background-clip: text;
         text-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
-    
+
     .okr-subtitle {
         font-size: 1.2rem;
         opacity: 0.9;
         font-weight: 300;
         letter-spacing: 0.5px;
     }
-    
+
+    /* Stats Bar */
     .okr-stats-bar {
         display: flex;
         justify-content: center;
@@ -56,7 +61,7 @@ def create_enhanced_okr_tab():
         margin: 2rem 0;
         flex-wrap: wrap;
     }
-    
+
     .stat-card {
         background: rgba(255, 255, 255, 0.15);
         backdrop-filter: blur(10px);
@@ -68,59 +73,62 @@ def create_enhanced_okr_tab():
         min-width: 140px;
         transition: all 0.3s ease;
     }
-    
+
     .stat-card:hover {
         transform: translateY(-2px);
         background: rgba(255, 255, 255, 0.2);
         box-shadow: 0 8px 32px rgba(0,0,0,0.1);
     }
-    
+
     .stat-number {
         font-size: 2rem;
         font-weight: 700;
         margin-bottom: 0.25rem;
-        color: #fbbf24; /* Tailwind yellow-400 */
+        color: #fbbf24; /* Amber color for numbers */
     }
-    
+
     .stat-label {
         font-size: 0.9rem;
         opacity: 0.9;
         text-transform: uppercase;
         letter-spacing: 1px;
     }
-    
+
+    /* Main Content Area */
     .okr-content {
         background: white;
         border-radius: 24px;
         padding: 0;
         box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-        overflow: hidden;
+        overflow: hidden; /* Ensures rounded corners are applied to children */
         margin-top: 2rem;
     }
-    
+
+    /* Objective Card */
     .okr-objective {
-        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); /* Tailwind slate-50 to slate-200 */
-        border-left: 6px solid #3b82f6; /* Tailwind blue-500 */
-        margin: 2rem 0;
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        border-left: 6px solid #3b82f6; /* Blue border for objectives */
+        margin: 2rem; /* Add margin within the white content box */
         border-radius: 16px;
         overflow: hidden;
         box-shadow: 0 4px 16px rgba(0,0,0,0.05);
         transition: all 0.3s ease;
     }
-    
+
     .okr-objective:hover {
         transform: translateY(-2px);
         box-shadow: 0 8px 24px rgba(0,0,0,0.1);
     }
-    
+
+    /* Objective Header */
     .objective-header {
         padding: 2rem;
-        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); /* Tailwind blue-700 to blue-500 */
+        background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
         color: white;
         position: relative;
         overflow: hidden;
     }
-    
+
     .objective-header::before {
         content: '';
         position: absolute;
@@ -128,11 +136,10 @@ def create_enhanced_okr_tab():
         left: 0;
         right: 0;
         bottom: 0;
-        /* Subtle background pattern */
         background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M20 20c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8zm0-20c0 4.4-3.6 8-8 8s-8-3.6-8-8 3.6-8 8-8 8 3.6 8 8z'/%3E%3C/g%3E%3C/svg%3E");
         pointer-events: none;
     }
-    
+
     .objective-title {
         font-size: 1.5rem;
         font-weight: 700;
@@ -140,7 +147,7 @@ def create_enhanced_okr_tab():
         position: relative;
         z-index: 1;
     }
-    
+
     .objective-meta {
         display: flex;
         gap: 2rem;
@@ -149,7 +156,7 @@ def create_enhanced_okr_tab():
         position: relative;
         z-index: 1;
     }
-    
+
     .meta-item {
         display: flex;
         align-items: center;
@@ -157,89 +164,92 @@ def create_enhanced_okr_tab():
         font-size: 0.9rem;
         opacity: 0.9;
     }
-    
+
     .meta-icon {
         width: 16px;
         height: 16px;
         opacity: 0.8;
     }
-    
+
+    /* Key Results Container */
     .key-results-container {
-        padding: 2rem;
+        padding: 2rem; /* Consistent padding for content within objectives */
     }
-    
+
+    /* Key Result Card */
     .key-result {
         background: white;
-        border: 2px solid #e5e7eb; /* Tailwind neutral-200 */
+        border: 2px solid #e5e7eb;
         border-radius: 12px;
         margin: 1.5rem 0;
         overflow: hidden;
         transition: all 0.3s ease;
     }
-    
+
     .key-result:hover {
-        border-color: #3b82f6; /* Tailwind blue-500 */
+        border-color: #3b82f6;
         box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
     }
-    
+
     .kr-header {
-        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); /* Tailwind slate-50 to slate-100 */
+        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
         padding: 1.5rem;
-        border-bottom: 1px solid #e5e7eb; /* Tailwind neutral-200 */
+        border-bottom: 1px solid #e5e7eb;
     }
-    
+
     .kr-title {
         font-size: 1.2rem;
         font-weight: 600;
-        color: #1e293b; /* Tailwind slate-800 */
+        color: #1e293b;
         margin-bottom: 0.75rem;
     }
-    
+
     .kr-metrics {
         display: flex;
         gap: 1.5rem;
         flex-wrap: wrap;
         margin-top: 1rem;
     }
-    
+
     .kr-metric {
-        background: rgba(59, 130, 246, 0.1); /* Tailwind blue-500 with opacity */
-        color: #1e40af; /* Tailwind blue-700 */
+        background: rgba(59, 130, 246, 0.1);
+        color: #1e40af;
         padding: 0.5rem 1rem;
         border-radius: 8px;
         font-size: 0.85rem;
         font-weight: 500;
         border: 1px solid rgba(59, 130, 246, 0.2);
     }
-    
+
+    /* Tasks Section */
     .tasks-section {
         padding: 1.5rem;
     }
-    
+
     .tasks-title {
         font-size: 1rem;
         font-weight: 600;
-        color: #374151; /* Tailwind gray-700 */
+        color: #374151;
         margin-bottom: 1rem;
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }
-    
+
     .task-item {
-        background: #f9fafb; /* Tailwind gray-50 */
-        border: 1px solid #e5e7eb; /* Tailwind neutral-200 */
+        background: #f9fafb;
+        border: 1px solid #e5e7eb;
         border-radius: 8px;
         padding: 1.25rem;
         margin: 1rem 0;
         transition: all 0.2s ease;
     }
-    
+
     .task-item:hover {
-        background: #f3f4f6; /* Tailwind gray-100 */
-        border-color: #d1d5db; /* Tailwind gray-300 */
+        background: #f3f4f6;
+        border-color: #d1d5db;
     }
-    
+
     .task-header {
         display: flex;
         justify-content: space-between;
@@ -247,14 +257,14 @@ def create_enhanced_okr_tab():
         margin-bottom: 1rem;
         gap: 1rem;
     }
-    
+
     .task-title {
         font-weight: 600;
-        color: #111827; /* Tailwind gray-900 */
+        color: #111827;
         flex: 1;
         line-height: 1.4;
     }
-    
+
     .task-priority {
         padding: 0.25rem 0.75rem;
         border-radius: 12px;
@@ -264,116 +274,122 @@ def create_enhanced_okr_tab():
         letter-spacing: 0.5px;
         white-space: nowrap;
     }
-    
+
+    /* Priority Colors */
     .priority-high {
-        background: #fef2f2; /* Tailwind red-50 */
-        color: #dc2626; /* Tailwind red-600 */
-        border: 1px solid #fca5a5; /* Tailwind red-300 */
+        background: #fef2f2;
+        color: #dc2626;
+        border: 1px solid #fca5a5;
     }
-    
+
     .priority-medium {
-        background: #fffbeb; /* Tailwind amber-50 */
-        color: #d97706; /* Tailwind amber-700 */
-        border: 1px solid #fcd34d; /* Tailwind amber-300 */
+        background: #fffbeb;
+        color: #d97706;
+        border: 1px solid #fcd34d;
     }
-    
+
     .priority-low {
-        background: #f0fdf4; /* Tailwind green-50 */
-        color: #16a34a; /* Tailwind green-600 */
-        border: 1px solid #86efac; /* Tailwind green-300 */
+        background: #f0fdf4;
+        color: #16a34a;
+        border: 1px solid #86efac;
     }
-    
+
+    /* Task Details Grid */
     .task-details {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 1rem;
         margin-top: 1rem;
     }
-    
+
     .task-detail-item {
         display: flex;
         align-items: center;
         gap: 0.5rem;
         font-size: 0.875rem;
-        color: #6b7280; /* Tailwind gray-500 */
+        color: #6b7280;
     }
-    
+
     .task-detail-label {
         font-weight: 500;
-        color: #374151; /* Tailwind gray-700 */
+        color: #374151;
         min-width: 80px;
     }
-    
+
+    /* Task Description/Rationale */
     .task-description {
         margin-top: 1rem;
         padding: 1rem;
         background: white;
         border-radius: 6px;
-        border-left: 3px solid #3b82f6; /* Tailwind blue-500 */
+        border-left: 3px solid #3b82f6;
         font-size: 0.9rem;
         line-height: 1.5;
-        color: #4b5563; /* Tailwind gray-600 */
+        color: #4b5563;
     }
-    
+
+    /* Empty State */
     .empty-state {
         text-align: center;
         padding: 4rem 2rem;
-        color: #6b7280; /* Tailwind gray-500 */
+        color: #6b7280;
     }
-    
+
     .empty-state-icon {
         font-size: 3rem;
         margin-bottom: 1rem;
     }
-    
+
     .empty-state-title {
         font-size: 1.5rem;
         font-weight: 600;
         margin-bottom: 0.5rem;
-        color: #374151; /* Tailwind gray-700 */
+        color: #374151;
     }
-    
+
+    /* Loading Spinner */
     .loading-spinner {
         display: inline-block;
         width: 20px;
         height: 20px;
-        border: 3px solid #f3f4f6; /* Tailwind gray-200 */
+        border: 3px solid #f3f4f6;
         border-radius: 50%;
-        border-top-color: #3b82f6; /* Tailwind blue-500 */
+        border-top-color: #3b82f6;
         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;
@@ -381,28 +397,33 @@ def create_enhanced_okr_tab():
     }
     </style>
     """
-    
-    with gr.Column():
+
+    with gr.Column(elem_classes=["okr-root-column"]):
         # Inject custom CSS
         gr.HTML(okr_custom_css)
-        
+
         # 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():
-    """Returns the initial HTML display for the OKR tab when loading."""
+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.
+    """
     return """
     <div class="okr-container">
         <div class="okr-header">
             <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</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>
@@ -421,7 +442,7 @@ def get_initial_okr_display():
                 <div class="stat-label">High Priority</div>
             </div>
         </div>
-        
+
         <div class="okr-content">
             <div class="empty-state">
                 <div class="empty-state-icon">⏳</div>
@@ -438,42 +459,49 @@ def get_initial_okr_display():
 def format_okrs_for_enhanced_display(raw_results: dict) -> str:
     """
     Enhanced formatting function that creates beautiful HTML for OKR display
-    based on the raw agentic analysis results.
+    from the raw results dictionary.
+
+    Args:
+        raw_results (dict): The dictionary containing the 'actionable_okrs' data.
+                            Expected structure: {'actionable_okrs': {'okrs': List[OKR_dict]}}
+
+    Returns:
+        str: A comprehensive HTML string representing the OKRs, or an empty state HTML.
     """
     if not raw_results or not raw_results.get("actionable_okrs"):
-        logger.info("No raw_results or actionable_okrs found for formatting.")
+        logger.warning("No raw results or 'actionable_okrs' found 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("OKR list is empty, returning empty state.")
+        logger.info("No OKRs found in 'actionable_okrs' list.")
         return get_empty_okr_state()
-    
-    # Calculate statistics
+
+    # 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 
+        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 
+        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'
     )
-    
-    # Build the HTML
+
+    # Build the HTML structure
     html_parts = [f"""
     <div class="okr-container">
         <div class="okr-header">
             <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</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>
@@ -492,172 +520,186 @@ def format_okrs_for_enhanced_display(raw_results: dict) -> str:
                 <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):
             logger.warning(f"OKR item at index {okr_idx} is not a dictionary, skipping.")
             continue
-            
-        objective = okr_data.get('objective_description', f"Objective {okr_idx + 1}")
+
+        objective = okr_data.get('objective_description', f"Unnamed Objective {okr_idx + 1}")
         timeline = okr_data.get('objective_timeline', 'Not specified')
         owner = okr_data.get('objective_owner', 'Not assigned')
-        
+
         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 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>
                 </div>
-            </div>
-            
-            <div class="key-results-container">
+
+                <div class="key-results-container">
         """)
-        
+
         key_results = okr_data.get('key_results', [])
-        
-        if not 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 OKR '{objective}' at KR index {kr_idx} is not a dictionary, skipping.")
+                    logger.warning(f"Key Result item for Objective {okr_idx+1} at index {kr_idx} is not a dictionary, skipping.")
                     continue
-                    
-                kr_desc = kr_data.get('key_result_description', f"Key Result {kr_idx + 1}")
+
+                kr_desc = kr_data.get('key_result_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">
+                    <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>')
-                
+
                 # Add tasks
                 tasks = kr_data.get('tasks', [])
-                if 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>
+                        <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 KR '{kr_desc}' at task index {task_idx} is not a dictionary, skipping.")
+                            logger.warning(f"Task item for Key Result {kr_idx+1} at index {task_idx} is not a dictionary, skipping.")
                             continue
-                            
-                        task_desc = task_data.get('task_description', f"Task {task_idx + 1}")
+
+                        task_desc = task_data.get('task_description', f"Unnamed Task {task_idx + 1}")
                         task_category = task_data.get('task_category', 'General')
                         task_type = task_data.get('task_type', 'Action')
                         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 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">Type:</span>
-                                    <span>{task_type}</span>
-                                </div>
-                                <div class="task-detail-item">
-                                    <span class="task-detail-label">Effort:</span>
-                                    <span>{effort}</span>
-                                </div>
-                                <div class="task-detail-item">
-                                    <span class="task-detail-label">Timeline:</span>
-                                    <span>{timeline}</span>
-                                </div>
-                                <div class="task-detail-item">
-                                    <span class="task-detail-label">Responsible:</span>
-                                    <span>{responsible}</span>
+
+                                <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">Type:</span>
+                                        <span>{task_type}</span>
+                                    </div>
+                                    <div class="task-detail-item">
+                                        <span class="task-detail-label">Effort:</span>
+                                        <span>{effort}</span>
+                                    </div>
+                                    <div class="task-detail-item">
+                                        <span class="task-detail-label">Timeline:</span>
+                                        <span>{timeline}</span>
+                                    </div>
+                                    <div class="task-detail-item">
+                                        <span class="task-detail-label">Responsible:</span>
+                                        <span>{responsible}</span>
+                                    </div>
                                 </div>
-                            </div>
                         """)
-                        
+
                         # Add additional details if available
                         obj_deliverable = task_data.get('objective_deliverable')
                         success_criteria = task_data.get('success_criteria_metrics')
                         why_proposed = task_data.get('why_proposed')
-                        
-                        if obj_deliverable or success_criteria or why_proposed:
+                        priority_just = task_data.get('priority_justification')
+                        dependencies = task_data.get('dependencies_prerequisites')
+
+                        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 detail_lines:
                             html_parts.append('<div class="task-description">')
-                            if obj_deliverable:
-                                html_parts.append(f'<strong>Objective/Deliverable:</strong> {obj_deliverable}<br>')
-                            if success_criteria:
-                                html_parts.append(f'<strong>Success Metrics:</strong> {success_criteria}<br>')
-                            if why_proposed:
-                                html_parts.append(f'<strong>Rationale:</strong> {why_proposed}')
+                            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
                 else:
                     html_parts.append("""
-                    <div class="tasks-section">
-                        <div class="empty-state" style="padding: 1rem;">
-                            <div class="empty-state-icon" style="font-size: 1.5rem; margin-bottom: 0.5rem;">🤷</div>
-                            <div class="empty-state-description">No tasks defined for this Key Result.</div>
+                        <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>
-                    </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():
-    """Returns empty state HTML for when no OKRs are available."""
+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.
+    """
     return """
     <div class="okr-container">
         <div class="okr-header">
             <div class="okr-title">🎯 AI-Generated OKRs & Strategic Tasks</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>
@@ -676,7 +718,7 @@ def get_empty_okr_state():
                 <div class="stat-label">High Priority</div>
             </div>
         </div>
-        
+
         <div class="okr-content">
             <div class="empty-state">
                 <div class="empty-state-icon">📋</div>