Add ARC UI (#11)

UI/__init__.py

@@ -1,4 +1,5 @@
 from .render_employee_card import render_employee_card
 from .render_plan_html import render_plan_html
+from .app_interface import EastSyncInterface
 
-__all__ = ["render_employee_card", "render_plan_html"]
+__all__ = ["render_employee_card", "render_plan_html", "EastSyncInterface"]

UI/app_interface.py

@@ -0,0 +1,358 @@
+from __future__ import annotations
+
+import html
+from collections import deque
+from threading import Lock
+from typing import Any, Callable, Deque, Dict, Optional
+
+import gradio as gr  # type: ignore
+
+from .render_plan_html import render_plan_html
+
+
+class EastSyncInterface:
+    """
+    EASTSYNC TACTICAL INTERFACE
+    Aesthetic: ARC Raiders / Tactical / High Contrast / Warm Spectrum.
+    """
+
+    SAMPLE_PROMPT = (
+        "PROJECT: Payment Gateway Migration (PCI-DSS Compliant).\n"
+        "SCOPE: Upgrade legacy Java backend to microservices architecture.\n"
+        "TEAM: Engineering Squad Alpha.\n"
+        "REQUIREMENT: Identify skill deficiencies in Cloud Security and Kubernetes."
+    )
+
+    def __init__(self):
+        self._action_log: Deque[str] = deque(maxlen=200)
+        self._action_log_lock = Lock()
+        self.init_message = (
+            '<div class="console-line">>> TACTICAL LINK ESTABLISHED. WAITING FOR ORDERS...</div>'
+        )
+
+        self._app_css = self._compose_css()
+
+    # ---------------------- HELPER METHODS ----------------------
+
+    def register_agent_action(self, action: str, args: Optional[Dict[str, Any]] = None):
+        import datetime
+        timestamp = datetime.datetime.now().strftime("%H:%M:%S")
+        with self._action_log_lock:
+            msg = f'<span class="console-timestamp">{timestamp}</span> <span style="color:var(--arc-yellow)">>></span> {html.escape(str(action))}'
+            if args:
+                args_str = str(args)
+                if len(args_str) > 80:
+                    args_str = args_str[:80] + "..."
+                msg += f' <span style="color:var(--text-dim)">:: {html.escape(args_str)}</span>'
+            self._action_log.appendleft(f'<div class="console-line">{msg}</div>')
+
+    def get_action_log_text(self) -> str:
+        with self._action_log_lock:
+            body = "".join(self._action_log) if self._action_log else self.init_message
+        return f'<div class="console-wrapper">{body}</div>'
+
+    def clear_action_log(self) -> str:
+        with self._action_log_lock:
+            self._action_log.clear()
+        return self.get_action_log_text()
+
+    def render_analysis_result(self, result: Any) -> str:
+        return render_plan_html(result)
+
+    def render_idle_state(self) -> str:
+        # The style is handled inside render_plan_html.py CSS for consistency, 
+        # but we need to ensure this specific div uses the class that forces height.
+        return "<div class='sec-status-offline'>// PROVIDE MISSION PARAMETERS TO INITIATE ANALYSIS</div>"
+
+    def render_error_state(self, reason: str) -> str:
+        safe_reason = html.escape(reason)
+        return f"<div class='sec-terminal-text'>SYSTEM OFFLINE :: {safe_reason}</div>"
+
+    def reset_prompt_value(self) -> str:
+        return self.SAMPLE_PROMPT
+
+    # ---------------------- TACTICAL CSS ----------------------
+
+    def _token_css(self) -> str:
+        return """
+        :root {
+            /* ARC RAIDERS SPECTRUM PALETTE */
+            --arc-red: #FF2A2A;
+            --arc-orange: #FF7F00;
+            --arc-yellow: #FFD400;
+            --arc-green: #55FF00;
+            --arc-cyan: #00FFFF;
+            
+            /* SURFACES */
+            --bg-void: #090B10;     /* Deep Black/Navy */
+            --bg-panel: #12141A;    /* Slightly lighter panel */
+            --bg-card: #181B24;     /* Card background */
+            
+            /* TEXT - IMPROVED CONTRAST */
+            --text-main: #FFFFFF;   /* Pure White for readability */
+            --text-dim: #AABBC9;    /* Lighter grey for secondary text */
+            
+            /* BORDERS */
+            --border-dim: #2A303C;
+            --border-bright: #FF7F00;
+            
+            /* FONTS */
+            --font-header: "Inter", "Segoe UI", sans-serif;
+            --font-mono: "JetBrains Mono", "Consolas", monospace;
+        }
+        """
+
+    def _base_typography_css(self) -> str:
+        return """
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');
+
+        body {
+            background-color: var(--bg-void);
+            color: var(--text-main);
+            font-family: var(--font-header);
+            font-size: 16px;
+            line-height: 1.5;
+            -webkit-font-smoothing: antialiased;
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+        }
+
+        /* FORCE FULL HEIGHT ON GRADIO CONTAINERS */
+        .gradio-container {
+            max-width: 1920px !important;
+            padding: 0 !important;
+            min-height: 100vh !important;
+            background-color: var(--bg-void); /* Ensure bg extends even if content is short */
+        }
+        
+        /* Fix for the prose/markdown wrapper messing up heights */
+        .prose {
+            max-width: none !important;
+        }
+
+        h1, h2, h3, h4 {
+            font-family: var(--font-header);
+            letter-spacing: -0.02em;
+            font-weight: 800;
+            color: white;
+        }
+        
+        /* COMPONENT OVERRIDES */
+        .gr-button { 
+            border-radius: 2px !important; 
+            font-family: var(--font-header) !important;
+            font-weight: 700 !important; 
+            text-transform: uppercase; 
+            letter-spacing: 1px;
+            font-size: 14px !important; 
+            padding: 10px 16px !important;
+        }
+        .gr-box, .gr-panel, .gr-group { 
+            border-radius: 2px !important; 
+            border: 1px solid var(--border-dim) !important; 
+            background: var(--bg-panel) !important;
+        }
+        .gr-input, textarea { 
+            background: #0D1017 !important; 
+            border: 1px solid var(--border-dim) !important; 
+            color: var(--text-main) !important; 
+            font-family: var(--font-mono) !important;
+            font-size: 15px !important; 
+            line-height: 1.6 !important;
+        }
+        .gr-form { background: transparent !important; }
+        .gr-block { background: transparent !important; border: none !important; }
+        
+        span.svelte-1gfkn6j { font-size: 13px !important; font-weight: 600 !important; color: var(--arc-yellow) !important; }
+        """
+
+    def _components_css(self) -> str:
+        return """
+        /* --- TOP SPECTRUM STRIPE --- */
+        .status-bar-spectrum {
+            height: 6px;
+            width: 100%;
+            background: linear-gradient(90deg, 
+                var(--arc-red) 0%, 
+                var(--arc-orange) 25%, 
+                var(--arc-yellow) 50%, 
+                var(--arc-green) 75%, 
+                var(--arc-cyan) 100%);
+            box-shadow: 0 2px 15px rgba(255, 127, 0, 0.3);
+        }
+
+        /* --- BUTTON VARIANTS --- */
+        .btn-tac-primary {
+            background: var(--arc-orange) !important;
+            color: #000 !important;
+            border: 1px solid var(--arc-orange) !important;
+        }
+        .btn-tac-primary:hover {
+            background: #FF9500 !important;
+            box-shadow: 0 0 15px rgba(255, 127, 0, 0.5);
+        }
+
+        .btn-tac-secondary {
+            background: transparent !important;
+            border: 1px solid var(--border-dim) !important;
+            color: var(--text-dim) !important;
+        }
+        .btn-tac-secondary:hover {
+            border-color: var(--text-main) !important;
+            color: var(--text-main) !important;
+            background: rgba(255,255,255,0.05) !important;
+        }
+
+        /* --- LAYOUT PANELS --- */
+        /* Use fill_height=True in Gradio Blocks, but CSS reinforces it */
+        .main-container {
+            min-height: calc(100vh - 80px); /* Account for header height approx */
+            display: flex;
+            align-items: stretch;
+        }
+
+        .input-panel {
+            padding: 32px;
+            border-right: 1px solid var(--border-dim);
+            background: var(--bg-panel);
+            height: auto !important; /* Let it grow */
+            min-height: 100%;
+        }
+        
+        .output-panel {
+            padding: 32px;
+            background: #0C0E14; /* Darker background for content */
+            height: auto !important;
+            min-height: 100%;
+            flex-grow: 1;
+        }
+
+        .ent-header-label {
+            font-size: 13px;
+            color: var(--arc-yellow);
+            text-transform: uppercase;
+            letter-spacing: 1.5px;
+            margin-bottom: 12px;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .ent-header-label::before {
+            content: "";
+            display: block;
+            width: 4px; height: 16px;
+            background: var(--arc-yellow);
+            box-shadow: 0 0 8px var(--arc-yellow);
+        }
+        """
+
+    def _console_css(self) -> str:
+        return """
+        .console-wrapper {
+            background: #08090D;
+            border: 1px solid var(--border-dim);
+            padding: 16px;
+            font-family: var(--font-mono);
+            font-size: 13px;
+            min-height: 300px;
+            max-height: 40vh;
+            overflow-y: auto;
+            color: var(--text-dim);
+        }
+        .console-line {
+            margin-bottom: 8px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            padding-bottom: 4px;
+            line-height: 1.4;
+        }
+        .console-timestamp { color: var(--arc-cyan); margin-right: 8px; font-weight:600; }
+        
+        .console-wrapper::-webkit-scrollbar { width: 8px; }
+        .console-wrapper::-webkit-scrollbar-track { background: #08090D; }
+        .console-wrapper::-webkit-scrollbar-thumb { background: var(--border-dim); border-radius: 4px; }
+        """
+
+    def _compose_css(self) -> str:
+        return "\n".join([
+            self._token_css(),
+            self._base_typography_css(),
+            self._components_css(),
+            self._console_css(),
+        ])
+
+    # --- UI Builders ---
+
+    def _build_hero(self) -> str:
+        return """
+        <div style="margin-bottom: 0px;">
+            <div class="status-bar-spectrum"></div>
+            <div style="background: var(--bg-panel); padding: 24px 32px; display:flex; justify-content:space-between; align-items:center; border-bottom: 1px solid var(--border-dim); flex-wrap: wrap; gap: 20px;">
+                <div style="display:flex; align-items:center; gap: 16px;">
+                    <div style="width:40px; height:40px; background: var(--arc-orange); border-radius: 2px; display:flex; align-items:center; justify-content:center; font-weight:800; color:black; font-size: 20px;">E</div>
+                    <div>
+                        <h1 style="margin:0; font-size: 28px; line-height:1; color:white;">EASTSYNC <span style="font-weight:400; color:var(--text-dim);">TACTICAL</span></h1>
+                        <div style="color:var(--text-dim); font-size:13px; letter-spacing:1px; margin-top:4px;">WORKFORCE DEPLOYMENT SYSTEM</div>
+                    </div>
+                </div>
+                <div style="text-align:right; font-family:var(--font-mono); color:var(--text-dim); font-size: 12px;">
+                    <div><span style="color:var(--arc-green)">●</span> SECURE CONNECTION</div>
+                    <div style="color:var(--arc-cyan)">VER: 4.2.0-ARC</div>
+                </div>
+            </div>
+        </div>
+        """
+
+    def build_interface(self, analyze_callback: Callable[[str], str]) -> gr.Blocks:
+        theme = gr.themes.Base(
+            primary_hue="orange",
+            neutral_hue="slate",
+        )
+        
+        # Use fill_height=True on Blocks to encourage full-screen layout
+        with gr.Blocks(theme=theme, css=self._app_css, title="EastSync Tactical", fill_height=True) as demo:
+            gr.HTML(self._build_hero())
+
+            with gr.Row(equal_height=True, elem_classes=["main-container"]):
+                
+                # --- LEFT COLUMN: INPUTS ---
+                with gr.Column(scale=3, elem_classes=["input-panel"]):
+                    gr.HTML("<div class='ent-header-label'>MISSION PARAMETERS</div>")
+                    
+                    input_box = gr.TextArea(
+                        label="MISSION SCOPE",
+                        show_label=False,
+                        value=self.SAMPLE_PROMPT,
+                        lines=12,
+                        placeholder="Define project constraints, required technologies, and team allocation..."
+                    )
+                    
+                    with gr.Row():
+                        btn_run = gr.Button("INITIATE SCAN", elem_classes=["btn-tac-primary"])
+                    
+                    with gr.Row():
+                        btn_reset = gr.Button("RESET PARAMETERS", elem_classes=["btn-tac-secondary"])
+                    
+                    gr.HTML("<div style='height:30px'></div>") # Flexible Spacer
+                    
+                    gr.HTML("<div class='ent-header-label'>SYSTEM LOGS</div>")
+                    console = gr.HTML(self.get_action_log_text())
+
+                # --- RIGHT COLUMN: OUTPUT ---
+                with gr.Column(scale=7, elem_classes=["output-panel"]):
+                     output_display = gr.HTML(self.render_idle_state())
+
+            # --- Event Bindings ---
+            
+            btn_run.click(self.clear_action_log, outputs=console, queue=False) \
+                   .then(lambda: self.get_action_log_text(), outputs=console) \
+                   .then(analyze_callback, inputs=input_box, outputs=output_display) \
+                   .then(self.get_action_log_text, outputs=console)
+            
+            btn_reset.click(self.reset_prompt_value, outputs=input_box)
+
+            # Live log updates
+            gr.Timer(2).tick(self.get_action_log_text, outputs=console)
+
+        return demo

UI/render_employee_card.py

@@ -1,12 +1,19 @@
+from __future__ import annotations
+
 import html
 from typing import Any, Iterable, Mapping, Sequence
 
-from models import EmployeeTrainingPlan
+
+# Placeholder for models.EmployeeTrainingPlan if not provided
+class EmployeeTrainingPlan:
+    def __init__(self):
+        pass
 
 
 def _as_mapping(member: EmployeeTrainingPlan | Mapping[str, Any]) -> Mapping[str, Any]:
     if isinstance(member, Mapping):
         return member
+    # Assuming the actual EmployeeTrainingPlan model has these attributes or model_dump
     if hasattr(member, "model_dump"):
         return member.model_dump()
     return {
@@ -23,19 +30,37 @@ def _render_skill_gaps(gaps: Sequence[Mapping[str, Any]] | None) -> str:
     items = []
     for gap in gaps:
         skill = html.escape(str(gap.get("skill", "Unknown skill")))
-        magnitude = html.escape(str(gap.get("gap", "N/A")))
+        raw_magnitude = gap.get("gap")
+        try:
+            magnitude_value = max(0.0, min(10.0, float(raw_magnitude)))
+            magnitude = f"{magnitude_value:.1f}"
+        except (TypeError, ValueError):
+            magnitude_value = None
+            magnitude = html.escape(str(raw_magnitude or "N/A"))
+
+        severity = "High"
+        if magnitude_value is not None:
+            if magnitude_value < 4:
+                severity = "Low"
+            elif magnitude_value < 7:
+                severity = "Medium"
+
+        # progress_pct is not used in the current HTML but kept for context if needed
+        # progress_pct = (
+        #     f"{(magnitude_value or 0) / 10 * 100:.0f}"
+        #     if magnitude_value is not None
+        #     else "0"
+        # )
+
         items.append(
             "<li>"
+            f'<div class="skill-gap-item">'
             f'<span class="skill-name">{skill}</span>'
-            "&nbsp;"
-            f'<span class="gap-pill">Gap {magnitude}</span>'
+            f'<span class="gap-pill" data-severity="{severity.lower()}">Gap {magnitude}</span>'
+            "</div>"
             "</li>"
         )
-    return (
-        '<ul class="skill-gap-list" role="list">'
-        f'{"".join(items)}'
-        "</ul>"
-    )
+    return f'<ul class="skill-gap-list" role="list">{"".join(items)}</ul>'
 
 
 def _render_training_plan(resources: Iterable[Mapping[str, Any]] | None) -> str:
@@ -76,13 +101,9 @@ def _render_training_plan(resources: Iterable[Mapping[str, Any]] | None) -> str:
             )
             rows.append(f'<div class="resource-skills">{chips}</div>')
 
-        cards.append(f"<li><div class=\"resource-card\">{''.join(rows)}</div></li>")
+        cards.append(f'<li>{"".join(rows)}</li>')
 
-    return (
-        '<ul class="training-plan-list" role="list">'
-        f'{"".join(cards)}'
-        "</ul>"
-    )
+    return f'<ul class="training-plan-list" role="list">{"".join(cards)}</ul>'
 
 
 def render_employee_card(member: EmployeeTrainingPlan | Mapping[str, Any]) -> str:
@@ -96,7 +117,7 @@ def render_employee_card(member: EmployeeTrainingPlan | Mapping[str, Any]) -> st
     return f"""
         <div class="employee-card">
             <div class="employee-title">{name}</div>
-            <div class="employee-meta">Role: {role}</div>
+            <div class="employee-meta">{role}</div>
             <div class="employee-section">
                 <span class="section-label">Skill Gap</span>
                 {skill_gap_html}
@@ -106,4 +127,4 @@ def render_employee_card(member: EmployeeTrainingPlan | Mapping[str, Any]) -> st
                 {training_plan_html}
             </div>
         </div>
-    """
+    """

UI/render_plan_html.py

@@ -1,87 +1,374 @@
-from .render_employee_card import render_employee_card
-import json
+from __future__ import annotations
+
 import html
-from typing import Any, Dict, List
+import json
+from typing import Any
 
+# ==========================================
+# HELPER: TACTICAL REPORT RENDERER
+# ==========================================
 
 def render_plan_html(result: Any) -> str:
-    if result is None:
-        return "<p>No analysis result available.</p>"
-
-    raw = result
-    if isinstance(result, dict):
-        data = result
-    else:
-        if not isinstance(raw, str):
-            raw = json.dumps(raw, default=str)
-        try:
-            data = json.loads(raw)
-        except json.JSONDecodeError:
-            escaped = html.escape(raw)
-            return f"<pre>{escaped}</pre>"
-
-    project_name = html.escape(str(data.get("Project Name", "Training Plan")))
-    team: List[Dict[str, Any]] = data.get("team", [])
-    cards = "".join(render_employee_card(member) for member in team)
-    if not cards:
-        cards = "<p>No team members were returned.</p>"
-
-    return f"""
+    """
+    Renders the analysis payload into a Tactical Gap Analysis Grid.
+    """
+    # --- INTERNAL CSS FOR THE REPORT ---
+    # Moved to top to ensure availability in all return paths (loading/error/success)
+    css = """
     <style>
-        .report-container {{
-            font-family: Inter, "Helvetica Neue", Arial, sans-serif;
-            color: #0f172a;
-        }}
-        .project-title {{
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-bottom: 1rem;
-        }}
-        .employee-grid {{
+        /* FORCE ROBUST CONTAINER HEIGHT */
+        .sec-report-wrapper {
+            width: 100%;
+            min-height: 70vh; /* Force container to take up significant screen space */
+            display: flex;
+            flex-direction: column;
+        }
+
+        .sec-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-            gap: 1rem;
-        }}
-        .employee-card {{
-            background: linear-gradient(180deg, #027171 0%, #013737 100%);
-            border-radius: 16px;
-            padding: 1rem;
-            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
-            border: 1px solid #e2e8f0;
-        }}
-        .employee-title {{
-            font-size: 1.2rem;
-            font-weight: 600;
-            margin-bottom: 0.25rem;
-            color: #0f172a;
-        }}
-        .employee-meta {{
-            font-size: 0.95rem;
-            color: #475569;
-            margin-bottom: 0.75rem;
-        }}
-        .employee-section {{
-            margin-bottom: 0.75rem;
-        }}
-        .section-label {{
-            display: inline-block;
-            font-size: 0.8rem;
+            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); /* Wider cards for better readability */
+            gap: 20px;
+            padding: 10px 0;
+            flex-grow: 1; /* Allow grid to expand */
+        }
+
+        /* CARD STYLING */
+        .sec-card {
+            background-color: var(--bg-card);
+            border: 1px solid var(--border-dim);
+            border-left: 4px solid var(--arc-orange); /* Default tactical color */
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            transition: border-color 0.2s;
+        }
+        .sec-card:hover {
+            border-color: var(--arc-yellow);
+            box-shadow: 0 4px 24px rgba(0,0,0,0.4);
+        }
+
+        /* HEADER */
+        .sec-card-header {
+            background: rgba(255,255,255,0.03);
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border-dim);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .sec-role-badge {
+            font-size: 12px;
+            font-weight: 700;
+            color: var(--text-dim);
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+        
+        /* BODY */
+        .sec-card-body {
+            padding: 20px;
+            flex-grow: 1;
+        }
+        
+        .sec-name {
+            font-family: var(--font-header);
+            font-size: 20px; /* Larger Name */
+            font-weight: 700;
+            color: var(--text-main);
+            margin-bottom: 4px;
+            letter-spacing: 0.5px;
+        }
+        .sec-id-tag {
+            font-family: var(--font-mono);
+            font-size: 12px;
+            color: var(--arc-orange);
+            margin-bottom: 20px;
+            opacity: 0.8;
+        }
+
+        /* SKILL GAPS (Binary State) */
+        .sec-skill-container {
+            background: rgba(255, 42, 42, 0.08); /* Red tint */
+            border: 1px dashed var(--arc-red);
+            padding: 12px 16px;
+            margin-bottom: 20px;
+            border-radius: 4px;
+        }
+        .sec-skill-label {
+            font-size: 12px;
+            color: var(--arc-red);
+            font-weight: 700;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .sec-skill-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+        .sec-skill-tag {
+            font-family: var(--font-mono);
+            font-size: 12px;
+            background: var(--bg-void);
+            border: 1px solid var(--arc-red);
+            color: var(--text-main);
+            padding: 6px 10px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .sec-skill-icon {
+            width: 8px; height: 8px; background: var(--arc-red); border-radius: 50%;
+        }
+
+        /* TRAINING PLAN */
+        .sec-plan-section {
+            border-top: 1px solid var(--border-dim);
+            padding-top: 16px;
+        }
+        .sec-section-title {
+            font-size: 12px;
+            color: var(--arc-yellow);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 12px;
+            font-weight: 700;
+        }
+
+        .sec-item {
+            display: flex;
+            background: var(--bg-panel);
+            border-left: 3px solid var(--text-dim); 
+            margin-bottom: 10px;
+            padding: 12px;
+            align-items: flex-start;
+        }
+        /* Cost Indicators */
+        .inv-low { border-left-color: var(--arc-green); } 
+        .inv-med { border-left-color: var(--arc-yellow); } 
+        .inv-high { border-left-color: var(--arc-red); } 
+
+        .sec-item-details { flex-grow: 1; }
+        .sec-item-title { font-size: 14px; color: #fff; font-weight: 600; margin-bottom: 4px; line-height: 1.4;}
+        .sec-item-meta { font-size: 12px; color: #99AAB5; font-family: var(--font-mono); }
+        
+        /* STATS BAR */
+        .sec-stats-bar {
+            display: flex;
+            gap: 20px;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid var(--border-dim);
+            padding: 12px 20px;
+            margin-bottom: 20px;
+            align-items: center;
+        }
+        .sec-stat-group {
+            display: flex;
+            flex-direction: column;
+        }
+        .sec-stat-label {
+            font-size: 11px;
+            color: var(--text-dim);
             font-weight: 600;
+            letter-spacing: 0.5px;
             text-transform: uppercase;
-            letter-spacing: 0.08rem;
-            color: #6366f1;
-            margin-bottom: 0.25rem;
-        }}
-        .employee-section p {{
-            margin: 0;
-            line-height: 1.4;
-            font-size: 0.95rem;
-        }}
+        }
+        .sec-stat-value {
+            font-size: 18px;
+            color: var(--text-main);
+            font-weight: 700;
+            font-family: var(--font-mono);
+        }
+        .sec-divider {
+            width: 1px;
+            height: 24px;
+            background: var(--border-dim);
+        }
+
+        /* LOADING / ERROR STATES */
+        .sec-status-offline { 
+            color: var(--text-dim); 
+            font-family: var(--font-mono); 
+            font-size: 14px; 
+            padding: 20px; 
+            min-height: 70vh; /* Use VH to ensure it fills screen vertical space */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(255,255,255,0.01);
+            border: 1px dashed var(--border-dim);
+            flex-grow: 1;
+        }
+        .sec-terminal-text { 
+            color: var(--arc-red); 
+            font-family: var(--font-mono); 
+            font-size: 14px; 
+            padding: 20px;
+            min-height: 70vh; /* Consistent height for error states */
+        }
     </style>
-    <div class="report-container">
-        <div class="project-title">Project: {project_name}</div>
-        <div class="employee-grid">
-            {cards}
+    """
+
+    if result is None:
+        return f"{css}<div class='sec-report-wrapper'><div class='sec-status-offline'>// AWAITING DATA STREAM</div></div>"
+
+    # Ensure data is dict; handle string inputs gracefully
+    data = result
+    if not isinstance(data, dict):
+        try:
+            data = json.loads(str(result))
+        except (json.JSONDecodeError, TypeError):
+            # Fallback for non-JSON strings
+            return f"{css}<div class='sec-report-wrapper'><div class='sec-terminal-text'>{html.escape(str(result))}</div></div>"
+
+    project_name = html.escape(str(data.get("project_name", "UNNAMED INITIATIVE")).upper())
+    team = data.get("team", [])
+
+    # --- CALCULATE AGGREGATE STATS ---
+    total_cost = 0.0
+    max_duration = 0.0
+    
+    for member in team:
+        member_cost = 0.0
+        member_duration = 0.0
+        for plan in member.get("training_plan", []):
+            try:
+                member_cost += float(plan.get("cost", 0))
+                member_duration += float(plan.get("duration_hours", 0))
+            except (ValueError, TypeError):
+                continue
+        
+        total_cost += member_cost
+        # Parallel training assumption: Project duration is limited by the person with the longest plan
+        if member_duration > max_duration:
+            max_duration = member_duration
+
+    # --- BUILD HTML ---
+    html_parts = [css, "<div class='sec-report-wrapper'>"]
+
+    # --- MAIN HEADER ---
+    html_parts.append(f"""
+    <div style="margin-bottom: 16px; padding: 0 4px; display:flex; flex-wrap: wrap; justify-content:space-between; align-items:flex-end; border-bottom: 1px solid var(--border-dim); padding-bottom: 12px; gap: 10px;">
+        <div>
+            <h2 style="margin:0; color:white; font-size:24px; letter-spacing: 0.5px;">GAP ANALYSIS REPORT</h2> 
+            <div style="color:var(--arc-yellow); font-family:var(--font-mono); font-size: 14px; margin-top:6px;">TARGET: {project_name}</div>
+        </div>
+        <div style="font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); text-align: right;">
+            <div>STATUS: <span style="color:var(--arc-green)">SECURE</span></div>
+            <div>UNITS: {len(team)}</div>
+        </div>
+    </div>
+    """)
+
+    # --- OVERALL STATS BAR ---
+    html_parts.append(f"""
+    <div class="sec-stats-bar">
+        <div class="sec-stat-group">
+            <div class="sec-stat-label">Total Investment</div>
+            <div class="sec-stat-value" style="color: var(--arc-cyan);">${total_cost:,.2f}</div>
+        </div>
+        <div class="sec-divider"></div>
+        <div class="sec-stat-group">
+            <div class="sec-stat-label">Est. Completion</div>
+            <div class="sec-stat-value" style="color: var(--arc-orange);">{max_duration:.0f} HRS <span style="font-size:11px; color:var(--text-dim)">(PARALLEL)</span></div>
+        </div>
+        <div class="sec-divider"></div>
+        <div class="sec-stat-group">
+            <div class="sec-stat-label">Resource Count</div>
+            <div class="sec-stat-value">{len(team)}</div>
         </div>
     </div>
-    """
+    """)
+
+    html_parts.append("<div class='sec-grid'>")
+
+    for member in team:
+        name = html.escape(str(member.get("employee_id", "UNKNOWN")).upper())
+        role = html.escape(str(member.get("role", "UNASSIGNED")).upper())
+        
+        # --- SKILL GAPS ---
+        skills_html = ""
+        gaps_list = member.get("skills_gaps", [])
+        
+        if gaps_list:
+            skill_tags = ""
+            for gap_data in gaps_list:
+                skill_name = html.escape(gap_data.get("skill", "GENERIC"))
+                skill_tags += f"""
+                <div class="sec-skill-tag">
+                    <div class="sec-skill-icon"></div>
+                    {skill_name}
+                </div>
+                """
+            
+            skills_html = f"""
+            <div class="sec-skill-container">
+                <div class="sec-skill-label">⚠ SKILL DEFICIENCY DETECTED</div>
+                <div class="sec-skill-tags">{skill_tags}</div>
+            </div>
+            """
+        else:
+            skills_html = """
+            <div style="padding: 12px; border: 1px solid var(--arc-green); color: var(--arc-green); font-size: 12px; display:flex; align-items:center; gap:8px; margin-bottom:20px; border-radius:4px;">
+                <span>✔</span> READINESS VERIFIED. NO GAPS.
+            </div>
+            """
+
+        # --- TRAINING PLAN ---
+        training_html = ""
+        for plan in member.get("training_plan", []):
+            title = html.escape(plan.get("title", "Training Module"))
+            cost = float(plan.get("cost", 0))
+            hours = float(plan.get("duration_hours", 0))
+            
+            # Investment Level Logic
+            inv_class = "inv-low"
+            if cost > 50: inv_class = "inv-med"
+            if cost > 200: inv_class = "inv-high"
+
+            training_html += f"""
+            <div class="sec-item {inv_class}">
+                <div class="sec-item-details">
+                    <div class="sec-item-title">{title}</div>
+                    <div class="sec-item-meta">EST. COST: ${cost} // DURATION: {hours} HRS</div>
+                </div>
+            </div>
+            """
+        
+        if not training_html and gaps_list:
+            training_html = "<div style='font-size:12px; color:var(--arc-red); padding: 4px 0;'>ACTION REQUIRED: GENERATE PLAN</div>"
+        elif not training_html:
+            training_html = "<div style='font-size:12px; color:var(--text-dim); padding: 4px 0;'>NO ACTION REQUIRED</div>"
+
+        # Assemble Card
+        emp_hash = f"ID-{hash(name) % 99999:05d}"
+        
+        card_html = f"""
+        <div class="sec-card">
+            <div class="sec-card-header">
+                <div style="display:flex; align-items:center; gap:8px;">
+                    <div style="width:8px; height:8px; background:var(--arc-orange);"></div>
+                    <div class="sec-role-badge">{role}</div>
+                </div>
+            </div>
+            <div class="sec-card-body">
+                <div class="sec-name">{name}</div>
+                <div class="sec-id-tag">{emp_hash}</div>
+                
+                {skills_html}
+
+                <div class="sec-plan-section">
+                    <div class="sec-section-title">REMEDIATION PROTOCOLS</div>
+                    {training_html}
+                </div>
+            </div>
+        </div>
+        """
+        html_parts.append(card_html)
+
+    html_parts.append("</div>")
+    html_parts.append("</div>") # Close sec-report-wrapper
+    return "".join(html_parts)

app.py

@@ -1,114 +1,55 @@
-import gradio as gr  # type: ignore
-from collections import deque
-from threading import Lock
-from typing import Optional
-
-from agents.orchestrator_agent import OrchestratorAgent
-from UI import render_plan_html
-
-
-init_message = "Awaiting agent activity..."
-
-orchestrator_agent = OrchestratorAgent()
-_action_log: deque[str] = deque(maxlen=200)
-_action_log_lock = Lock()
-
-
-def register_agent_action(action: str, args: Optional[str] = None):
-    """Record agent actions with pretty HTML formatting."""
-    with _action_log_lock:
-        if args is not None:
-            import json
-            try:
-                if isinstance(args, dict):
-                    pretty_args = json.dumps(args, indent=2)
-                else:
-                    pretty_args = json.dumps(json.loads(args), indent=2)
-            except Exception:
-                pretty_args = str(args)
-
-            formatted_args = f"""
-            <pre style="
-                background:#161b22;
-                color:#c9d1d9;
-                padding:6px;
-                border-radius:4px;
-                margin:4px 0 0 0;
-                font-family:monospace;
-                white-space: pre-wrap;
-            ">{pretty_args}</pre>
-            """.strip()
-
-            _action_log.appendleft(f"<b>{action}</b><br>{formatted_args}")
-        else:
-            _action_log.appendleft(f"<b>{action}</b>")
-
-
-def get_action_log_text():
-    """Return the log wrapped in a scrollable console container."""
-    with _action_log_lock:
-        if not _action_log:
-            body = init_message
-        else:
-            body = "<br>".join(_action_log)
-
-        return f"""
-        <div style="
-            max-height: 300px;
-            overflow-y: auto;
-            background: #0d1117;
-            color: #f0f6fc;
-            padding: 10px;
-            font-family: monospace;
-            border-radius: 6px;
-            border: 1px solid #30363d;
-            white-space: pre-wrap;
-        ">
-            {body}
-        </div>
-        """
-
-
-def clear_action_log():
-    with _action_log_lock:
-        _action_log.clear()
-    return init_message
-
-
-def analyze_and_plan_interface(user_prompt: str):
-    result = orchestrator_agent.analyze_and_plan(user_prompt, register_agent_action)
-    return render_plan_html(result)
-
-
-with gr.Blocks(fill_height=True) as demo:
-    gr.Markdown("## EastSync AI · HR Skill-Gap Analysis")
-
-    with gr.Row():
-        inputs = gr.TextArea(
-            label="Describe the project or skill gap you want analyzed",
-            placeholder="e.g. Analyze project 2 and suggest training plans for John Doe and Daniel Tatar.",
-            lines=4,
+from __future__ import annotations
+
+from typing import Any
+
+from dotenv import load_dotenv
+
+load_dotenv()
+
+try:  # pragma: no cover - fallback when providers misconfigured
+    from agents.orchestrator_agent import OrchestratorAgent
+except Exception as exc:  # pylint: disable=broad-except
+    OrchestratorAgent = None  # type: ignore
+    ORCHESTRATOR_IMPORT_ERROR = str(exc)
+else:
+    ORCHESTRATOR_IMPORT_ERROR = None
+
+from UI import EastSyncInterface
+
+ui = EastSyncInterface()
+
+if OrchestratorAgent is not None:
+    try:
+        orchestrator_agent: OrchestratorAgent | None = OrchestratorAgent()
+        orchestrator_error: str | None = None
+    except Exception as exc:  # pragma: no cover - best-effort graceful fallback
+        orchestrator_agent = None
+        orchestrator_error = str(exc)
+else:
+    orchestrator_agent = None
+    orchestrator_error = ORCHESTRATOR_IMPORT_ERROR or "Provider unavailable"
+
+
+def analyze_and_plan_interface(user_prompt: str) -> str:
+    if orchestrator_agent is None:
+        message = orchestrator_error or "Agent unavailable"
+        ui.register_agent_action(
+            "System Offline",
+            {
+                "reason": message,
+                "prompt": user_prompt,
+            },
         )
+        return ui.render_error_state(message)
 
-    btn = gr.Button("Analyze and Plan", variant="primary")
-    outputs = gr.HTML(label="Training Plan")
-
-    action_feed = gr.HTML(
-        label="Agent Activity",
-        value=init_message,
-    )
-
-    (
-        btn.click(clear_action_log, outputs=action_feed, queue=False)
-        .then(analyze_and_plan_interface, inputs=inputs, outputs=outputs)
-    )
-
-    gr.Timer(value=3).tick(fn=get_action_log_text, outputs=action_feed)
+    result: Any = orchestrator_agent.analyze_and_plan(user_prompt, ui.register_agent_action)
+    return ui.render_analysis_result(result)
 
 
 def main():
+    demo = ui.build_interface(analyze_and_plan_interface)
     demo.launch(share=True)
 
 
 if __name__ == "__main__":
-    main()
+    main()