Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,25 +1,18 @@
 """
-Health Matrix – AI Command Center (Enhanced UI/UX • Wide Timeline)
-Single-file Streamlit app with embedded CSS + UKG helpers.
-
-Front-end upgrades (layout/styling ONLY):
-- Page uses full width on web
-- Horizontal/GRID Agent Runline (wide cards) + legend
-- Agent Overview strip (steps, total duration, decision mix)
-- KPI cards with micro-interactions
-- Readable tables: sticky headers, zebra rows; horizontal scroll support
-- Loading skeletons, friendly empty/error states
-- RTL/LTR friendly styles
-
-All logic, API calls, inputs/outputs are unchanged.
-Usage: streamlit run streamlit_app.py
+Health Matrix – AI Command Center (Wide Web UI)
+- Full-width desktop layout
+- Horizontal (Grid) Agent Runline that uses screen width
+- Agent Overview chips (steps / total duration / decisions)
+- Readable data tables (sticky header, zebra, full width, horizontal scroll on narrow)
+- No logic/API/decision changes
+
+This is a front-end only enhancement.
 """
 
 import os
-import json
 import time
-from typing import List, Optional, Iterable, Dict, Any
 from io import StringIO
+from typing import List, Optional, Iterable, Dict, Any
 
 import pandas as pd
 import requests
@@ -29,141 +22,151 @@ import streamlit as st
 try:
     import openai  # type: ignore
     HAS_OPENAI = True
-except ImportError:
-    openai = None  # type: ignore
+except Exception:
+    openai = None
     HAS_OPENAI = False
 
 # =============================================================================
-# Embedded Enhanced Light UI CSS (brand-aligned, responsive, accessible)
+# Embedded CSS  (Desktop-first, wide layout)
 # =============================================================================
 _EMBEDDED_CSS = """
 :root{
   --bg:#FFFFFF; --soft:#F8FAFC; --line:#E5E7EB;
-  --t1:#0F172A; --t2:#1F2937; --t3:#334155; --muted:#64748B;
-  --blue:#004C97; --green:#36BA01; --ok:#16a34a; --warn:#D97706; --fail:#DC2626;
+  --t1:#0F172A; --t2:#1F2937; --muted:#64748B;
+  --blue:#004C97; --green:#36BA01; --ok:#16a34a; --warn:#D97706;
 }
 
-/* ====== Make the main page wider on web ====== */
-.main .block-container{max-width:1520px !important; padding-left:1rem; padding-right:1rem}
+/* ==== Use full width on desktop ==== */
+.main .block-container{
+  max-width: 1600px !important;
+  padding-left: 16px; padding-right: 16px;
+}
 
-html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--t1);
-  font-family:'Segoe UI','Cairo','Tajawal','Open Sans',sans-serif;}
-.container{max-width:1200px;margin:0 auto;padding:24px}
-h1,h2,h3{color:var(--t1);text-align:center;margin:0 0 8px}
-p,li{color:var(--t2);font-size:1.05em}
-[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{text-align:center}
+/* Base */
+html,body{
+  margin:0; padding:0; height:100%;
+  background:var(--bg); color:var(--t1);
+  font-family:'Segoe UI','Cairo','Tajawal','Open Sans',sans-serif;
+}
+h1,h2,h3{ margin:0 0 8px; color:var(--t1); text-align:center }
+p{ color:var(--t2) }
 
-/* Streamlit DataFrame: sticky header + zebra + compact density */
+/* Dataframes: sticky header + zebra + compact */
 [data-testid="stDataFrame"] table thead th{
   position: sticky; top: 0; z-index: 2;
   background:#003b70 !important; color:#fff !important;
 }
-[data-testid="stDataFrame"] table tbody tr:nth-child(odd){background-color:#f9fafb}
-[data-testid="stDataFrame"] table td{padding:8px 10px}
+[data-testid="stDataFrame"] table tbody tr:nth-child(odd){ background:#f9fafb }
+[data-testid="stDataFrame"] table td{ padding:8px 10px }
 
-/* Horizontal scroll helper on small screens */
-.table-wrap{overflow-x:auto; margin:6px 0 0; border:1px solid var(--line); border-radius:12px}
+/* Scroll wrapper (when needed) */
+.table-wrap{
+  overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin-top:6px;
+}
 
-/* ================= Hero ================= */
-.hero{position:relative;text-align:center;padding:64px 12px 16px;overflow:hidden}
-.hero img{width:180px;height:auto;margin-bottom:12px}
-.hero h1{font-size:2.2rem;line-height:1.3;font-weight:900;margin:0 0 8px}
-.ai-headline{
+/* ===== Hero ===== */
+.hero{ position:relative; text-align:center; padding:48px 8px 8px }
+.hero img{ width:170px; height:auto; margin-bottom:8px }
+.hero h1{
+  font-size:2.1rem; font-weight:900; line-height:1.25; margin:0 0 6px;
   background:linear-gradient(90deg,var(--t1),var(--blue),var(--t1));
-  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
-  background-size:200% 100%;animation:aiTitle 8s ease-in-out infinite;
-}
-.hero p{font-size:1rem;line-height:1.6;color:var(--t2);max-width:900px;margin:0 auto}
-.hero::before,.hero::after{content:"";position:absolute;inset:-20%;pointer-events:none;filter:blur(42px);opacity:.18}
-.hero::before{
-  background:
-    radial-gradient(600px 280px at 20% 30%, rgba(54,186,1,.45), transparent 60%),
-    radial-gradient(500px 240px at 80% 70%, rgba(0,76,151,.35), transparent 60%);
+  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
+  background-size:200% 100%; animation:aiTitle 8s ease-in-out infinite;
 }
-.hero::after{background:conic-gradient(from 0deg at 50% 50%, rgba(54,186,1,.18), rgba(0,76,151,.18), transparent);
-  animation:slowSpin 26s linear infinite}
+.hero p{ max-width:1050px; margin:0 auto; font-size:1.02rem }
 
-/* ================= CTA button ================= */
-.stButton{display:flex;justify-content:center;margin:16px 0}
+/* CTA */
+.stButton{ display:flex; justify-content:center; margin:10px 0 0 }
 .stButton>button{
-  padding:14px 28px;font-size:1.1rem;font-weight:800;letter-spacing:.2px;
-  color:#fff !important;border:0 !important;border-radius:16px !important;cursor:pointer;
+  padding:12px 26px; font-size:1.05rem; font-weight:800; color:#fff !important;
+  border:0 !important; border-radius:14px !important; cursor:pointer;
   background:linear-gradient(120deg,var(--green),var(--blue),var(--green)) !important;
-  background-size:320% 320% !important;animation:aiGradient 8s ease-in-out infinite;
-  box-shadow:0 12px 24px rgba(0,0,0,.12);transition:transform .18s ease, box-shadow .18s ease}
-.stButton>button:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 22px rgba(54,186,1,.26)}
-.stButton>button:disabled{cursor:progress;filter:saturate(.95)}
-
-/* ================= Status bar ================= */
-.status-wrap{display:flex;justify-content:center;margin:8px 0}
-.status-bar{display:flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);
-  border-radius:12px;padding:8px 14px;color:var(--t2);font-size:0.95rem}
-.pulse-dot{width:10px;height:10px;border-radius:50%;background:var(--green);
-  box-shadow:0 0 0 0 rgba(54,186,1,.6);animation:pulse 1.4s infinite}
-.status-done{background:#E8F7ED;border-color:#B6E2C4}.status-done .pulse-dot{background:var(--ok);box-shadow:none}
-
-/* ================= Cards ================= */
-.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.06);padding:16px;margin-bottom:14px}
-.card h4{margin:0 0 6px}
-.card ul{margin:8px 0 0 18px;color:#334155;font-size:0.95rem;line-height:1.6}
-.card ul li{margin-bottom:4px}
-
-/* ================= KPI ================= */
-.stat-row{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
-.stat-card{flex:1;background:#fff;padding:1rem;border-radius:16px;border:1px solid var(--line);
-  box-shadow:0 6px 18px rgba(0,0,0,.06);text-align:center;transition:transform .2s ease}
-.stat-card:hover{transform:scale(1.02)}
-.stat-icon{font-size:24px;margin-bottom:.2rem}
-.stat-label{color:#334155;font-size:0.95rem}
-.stat-value{font-size:1.7rem;font-weight:900;color:var(--t1)}
-
-/* === Agent Overview strip (chips) === */
-.overview{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 10px}
-.overview .chip{font-size:12.5px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff}
-.overview .chip b{color:var(--t1)}
-
-/* === Agent Runline - WIDE GRID (cards) === */
-.runH{display:grid;grid-template-columns:repeat(12, 1fr);gap:12px;margin:8px 0}
-.run-card{grid-column:span 4;background:#fff;border:1px solid var(--line);border-radius:14px;
-  box-shadow:0 6px 14px rgba(0,0,0,.06);padding:12px;position:relative;min-height:96px;opacity:0;animation:fadeIn .45s forwards}
-.run-card .dot{position:absolute;left:10px;top:12px;width:10px;height:10px;border-radius:50%}
-.run-card .title{margin:0 0 6px 0;padding-left:22px;font-weight:800}
-.run-card .meta{color:#64748B;font-size:12.5px;margin-bottom:4px;padding-left:22px}
-.run-card .desc{color:#334155;font-size:13px;padding-left:22px}
-.run-card.done .dot{background:var(--green)}
-.run-card.current .dot{background:var(--blue)}
-@media (max-width:1200px){.run-card{grid-column:span 6}}
-@media (max-width:640px){.run-card{grid-column:span 12}}
-
-/* ================= Empty & Error States ================= */
-.empty{padding:12px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:#64748B}
-.error{padding:12px;border:1px solid #fecaca;background:#fff1f2;color:#7f1d1d;border-radius:12px}
-
-/* ================= Loading Skeleton ================= */
-.skel{position:relative;overflow:hidden;background:#E5E7EB;border-radius:12px}
-.skel::after{content:"";position:absolute;inset:0;
+  background-size:320% 320% !important; animation:aiGradient 8s ease-in-out infinite;
+  box-shadow:0 10px 20px rgba(0,0,0,.12); transition:transform .18s ease, box-shadow .18s ease
+}
+.stButton>button:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 0 22px rgba(54,186,1,.26) }
+
+/* Status Bar */
+.status-wrap{ display:flex; justify-content:center; margin:8px 0 }
+.status-bar{
+  display:flex; align-items:center; gap:10px; background:var(--soft); color:var(--t2);
+  border:1px solid var(--line); border-radius:12px; padding:8px 14px; font-size:.95rem
+}
+.pulse-dot{ width:10px; height:10px; border-radius:50%; background:var(--green);
+  box-shadow:0 0 0 0 rgba(54,186,1,.55); animation:pulse 1.4s infinite }
+.status-done{ background:#E8F7ED; border-color:#B6E2C4 }
+.status-done .pulse-dot{ background:var(--ok); box-shadow:none }
+
+/* Card */
+.card{
+  background:#fff; border:1px solid var(--line); border-radius:16px;
+  box-shadow:0 6px 16px rgba(0,0,0,.06); padding:14px; margin-bottom:12px
+}
+.card h4{ margin:0 0 6px }
+.card ul{ margin:8px 0 0 18px; color:#334155; font-size:.95rem; line-height:1.6 }
+
+/* Overview chips */
+.overview{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:4px 0 10px }
+.overview .chip{ font-size:.9rem; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff }
+.overview .chip b{ color:#0f172a }
+
+/* KPI */
+.stat-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:10px }
+.stat-card{
+  background:#fff; padding:14px; border-radius:14px; border:1px solid var(--line);
+  box-shadow:0 6px 16px rgba(0,0,0,.06); text-align:center; transition:transform .2s ease
+}
+.stat-card:hover{ transform:scale(1.02) }
+.stat-icon{ font-size:22px; margin-bottom:.2rem }
+.stat-label{ color:#334155 }
+.stat-value{ font-size:1.7rem; font-weight:900 }
+
+/* ======= WIDE Runline (Grid) ======= */
+.run-legend{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:6px 0 6px }
+.run-legend .chip{ font-size:.85rem; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff }
+.runH{
+  display:grid; gap:12px; margin:6px auto 12px; align-items:stretch;
+  grid-template-columns: repeat(12, 1fr);
+  max-width: 1520px;
+}
+.run-card{
+  grid-column: span 3; /* 4 cards per row on desktop */
+  background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px;
+  box-shadow:0 6px 14px rgba(0,0,0,.06); position:relative; min-height:110px;
+  opacity:0; animation:fadeIn .45s forwards
+}
+.run-card .dot{ position:absolute; left:10px; top:12px; width:10px; height:10px; border-radius:50% }
+.run-card .title{ margin:0 0 6px; padding-left:22px; font-weight:800 }
+.run-card .meta{ color:#64748B; font-size:.85rem; margin-bottom:4px; padding-left:22px }
+.run-card .desc{ color:#334155; font-size:.95rem; padding-left:22px }
+.run-card.done .dot{ background:var(--green) }
+.run-card.current .dot{ background:var(--blue) }
+
+@media (max-width:1450px){ .run-card{ grid-column: span 4 } }  /* 3 per row */
+@media (max-width:1150px){ .run-card{ grid-column: span 6 } }  /* 2 per row */
+@media (max-width:760px){ .run-card{ grid-column: span 12 } }  /* 1 per row */
+
+/* Loading skeleton */
+.skel{ position:relative; overflow:hidden; background:#E5E7EB; border-radius:12px }
+.skel::after{
+  content:""; position:absolute; inset:0;
   background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
-  transform:translateX(-100%);animation:shimmer 1.2s infinite}
-.skel.h40{height:40px}.skel.h80{height:80px}.skel.h120{height:120px}
-@keyframes shimmer{100%{transform:translateX(100%)}}
+  transform:translateX(-100%); animation:shimmer 1.2s infinite
+}
+.skel.h80{height:80px}.skel.h120{height:120px}
 
-/* ================= Animations ================= */
+/* Animations */
 @keyframes aiGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
 @keyframes aiTitle{0%{background-position:0 0}50%{background-position:100% 0}100%{background-position:0 0}}
-@keyframes slowSpin{to{transform:rotate(360deg)}}
-@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(54,186,1,.6)}
-  70%{transform:scale(1);box-shadow:0 0 0 10px rgba(54,186,1,0)}100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(54,186,1,0)}}
+@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 0 0 rgba(54,186,1,.55)}
+  70%{transform:scale(1);box-shadow:0 0 0 10px rgba(54,186,1,0)}
+  100%{transform:scale(.95);box-shadow:0 0 0 0 rgba(54,186,1,0)}}
 @keyframes fadeIn{to{opacity:1}}
-
-/* ================= Responsive ================= */
-@media (max-width:768px){
-  .hero h1{font-size:1.6rem}
-  .stat-row{flex-direction:column}
-}
+@keyframes shimmer{100%{transform:translateX(100%)}}
 """
 
 # =============================================================================
-# UKG API helpers (unchanged logic)
+# UKG API helpers (unchanged)
 # =============================================================================
 def _get_auth_header() -> Dict[str, str]:
     app_key = os.environ.get("UKG_APP_KEY")
@@ -302,14 +305,13 @@ def fetch_employees(employee_ids: Iterable[int]) -> pd.DataFrame:
     df = pd.DataFrame(records)
     for col in ["personNumber", "organizationPath", "phoneNumber", "fullName", "Certifications"]:
         if col not in df.columns: df[col] = []
-    # Optionals for matching
     if "Languages" not in df.columns:
         df["Languages"] = [[] for _ in range(len(df))]
     df["JobRole"] = df["organizationPath"].apply(lambda p: p.split("/")[-1] if isinstance(p, str) and p else "")
     return df
 
 # =============================================================================
-# Decision logic + timelines (unchanged)
+# Decision logic (unchanged)
 # =============================================================================
 def _has_any(tokens: List[str], haystack: str) -> bool:
     hay = (haystack or "").lower()
@@ -320,7 +322,6 @@ def _has_all_in_list(need: List[str], have: List[str]) -> bool:
     return all(n.strip().lower() in have_l for n in need if n and n.strip())
 
 def is_eligible(row: pd.Series, shift: pd.Series) -> bool:
-    """Eligibility using expanded criteria."""
     role_req = str(shift.get("RoleRequired","")).strip().lower()
     specialty = str(shift.get("Specialty","")).replace("-", " ").strip().lower()
     mandatory = [t.strip() for t in str(shift.get("MandatoryTraining","")).replace(",", "/").split("/") if t.strip()]
@@ -334,7 +335,6 @@ def is_eligible(row: pd.Series, shift: pd.Series) -> bool:
     training_ok = (not mandatory) or _has_all_in_list(mandatory, row.get("Certifications", []))
     ward_ok = (not ward) or _has_any([ward], row.get("organizationPath",""))
     lang_ok = (not lang_req) or (lang_req in [l.lower() for l in (row.get("Languages") or [])])
-
     return role_ok and spec_ok and training_ok and ward_ok and lang_ok
 
 def gpt_decide(shift: pd.Series, eligible_df: pd.DataFrame) -> Dict[str, str]:
@@ -374,8 +374,9 @@ def gpt_decide(shift: pd.Series, eligible_df: pd.DataFrame) -> Dict[str, str]:
     try:
         resp = openai.ChatCompletion.create(
             model="gpt-4",
-            messages=[{"role":"system","content":"أنت مساعد ذكي لإدارة المناوبات الصحية"},
-                      {"role":"user","content":prompt}],
+            messages=[
+                {"role":"system","content":"أنت مساعد ذكي لإدارة المناوبات الصحية"},
+                {"role":"user","content":prompt}],
             temperature=0.4, max_tokens=200,
         )
         import ast
@@ -384,44 +385,37 @@ def gpt_decide(shift: pd.Series, eligible_df: pd.DataFrame) -> Dict[str, str]:
         st.error(f"❌ GPT Error: {e}")
         return {"action": "skip"}
 
-# -------- EXISTING (vertical) kept if you want to switch back later ----------
-def render_runline(events: List[Dict[str, Any]]) -> str:
-    def li(ev):
-        cls = ev.get("status","done")
-        dur = ev.get("dur_ms")
-        dur_txt = f"{int(dur)} ms" if isinstance(dur,(int,float)) else "—"
-        return f"""
-        <li class="{cls}">
-          <h5>{ev.get('title','')}</h5>
-          <div class="meta"><span>Duration: {dur_txt}</span></div>
-          <div class="desc">{ev.get('desc','')}</div>
-        </li>"""
-    html = '<div class="run-wrap" dir="auto"><div class="run-legend">' \
-           '<span class="chip">● Current</span><span class="chip">● Done</span></div>' \
-           '<ul class="run">{items}</ul></div>'
-    return html.replace("{items}", "".join(li(e) for e in events))
-
-# -------- NEW: WIDE GRID timeline (uses the full horizontal space) ----------
+# =============================================================================
+# Timeline renderers
+# =============================================================================
 def render_runline_wide(events: List[Dict[str, Any]]) -> str:
-    def card(ev):
-        cls = ev.get("status","done")
+    """Return HTML string for the wide Grid timeline (no backticks, safe for st.markdown)."""
+    def card(ev: Dict[str, Any]) -> str:
+        cls = ev.get("status", "done")
         dur = ev.get("dur_ms")
-        dur_txt = f"{int(dur)} ms" if isinstance(dur,(int,float)) else "—"
-        title = ev.get("title","")
-        desc = ev.get("desc","")
-        return f"""
-        <div class="run-card {cls}">
-          <span class="dot"></span>
-          <div class="title">{title}</div>
-          <div class="meta">Duration: {dur_txt}</div>
-          <div class="desc">{desc}</div>
-        </div>
-        """
-    legend = '<div class="overview" dir="auto"><span class="chip">● <b>Current</b></span><span class="chip">● <b>Done</b></span></div>'
-    return legend + '<div class="runH" dir="auto">' + "".join(card(e) for e in events) + "</div>"
+        dur_txt = f"{int(dur)} ms" if isinstance(dur, (int, float)) else "—"
+        title = str(ev.get("title", ""))
+        desc = str(ev.get("desc", ""))
+        return (
+            '<div class="run-card ' + cls + '">'
+            '<span class="dot"></span>'
+            '<div class="title">' + title + '</div>'
+            '<div class="meta">Duration: ' + dur_txt + '</div>'
+            '<div class="desc">' + desc + '</div>'
+            '</div>'
+        )
+
+    legend = (
+        '<div class="run-legend" dir="auto">'
+        '<span class="chip">● <b>Current</b></span>'
+        '<span class="chip">● <b>Done</b></span>'
+        '</div>'
+    )
+    grid = '<div class="runH" dir="auto">' + "".join(card(e) for e in events) + '</div>'
+    return legend + grid
 
 # =============================================================================
-# Main agent runner (unchanged)
+# Agent main (unchanged logic)
 # =============================================================================
 def run_agent(employee_ids: Iterable[int], df_shifts: pd.DataFrame):
     events: List[Dict[str, Any]] = []
@@ -444,7 +438,7 @@ def run_agent(employee_ids: Iterable[int], df_shifts: pd.DataFrame):
 
         # 3) AI decision
         t_ai = time.perf_counter()
-        events.append({"title":"AI decision", "desc":"Select assign / notify / skip", "status":"done"})  # duration after call
+        events.append({"title":"AI decision", "desc":"Select assign / notify / skip", "status":"done"})
         decision = gpt_decide(shift, eligible)
         ai_dur = (time.perf_counter() - t_ai) * 1000
         events[-1]["dur_ms"] = max(int(ai_dur),1)
@@ -498,42 +492,36 @@ def run_agent(employee_ids: Iterable[int], df_shifts: pd.DataFrame):
     return events, shift_assignment_results, reasoning_rows
 
 # =============================================================================
-# Streamlit UI (enhanced front-end only)
+# UI
 # =============================================================================
 def main() -> None:
     st.set_page_config(page_title="Health Matrix AI Command Center", layout="wide")
-    os.environ.setdefault("XDG_CONFIG_HOME","/tmp"); os.environ.setdefault("HF_HOME","/tmp"); os.environ.setdefault("TRANSFORMERS_CACHE","/tmp")
     st.markdown(f"<style>{_EMBEDDED_CSS}</style>", unsafe_allow_html=True)
 
-    # --- HERO ---
+    # ========== HERO ==========
     st.markdown(
         """
 <div class="hero" dir="auto">
   <img src="https://www.healthmatrixcorp.com/web/image/website/1/logo/Health%20Matrix?unique=956ad7b" alt="Health Matrix" />
-  <h1 class="ai-headline">AI Command Center – Smart Staffing & Actions</h1>
-  <p>Automate decisions, ensure compliance, and track results with a real-time execution log tailored for critical operations.</p>
+  <h1>AI Command Center – Smart Staffing & Actions</h1>
+  <p>Desktop-first view. Uses full browser width to present the agent’s steps, decisions, and results clearly for operations teams.</p>
 </div>
 """, unsafe_allow_html=True
     )
 
-    # --- Business Case (top) ---
+    # ========== Business Case ==========
     st.markdown("""
-<div class="card" style="max-width:1200px;margin:0 auto 10px;" dir="auto">
-  <h4 style="margin:0 0 6px;">Business Case — Open Shifts Auto-Fulfillment</h4>
-  <p style="margin:0;">
-    Health Matrix AI Agent يراقب الشفتات المفتوحة ويطابقها تلقائيًا مع الموارد المؤهّلة وفق المعايير:
-    <b>Role</b>، <b>Specialty</b>، <b>Mandatory Training</b>، <b>Shift Type/Duration</b>، <b>Ward/Department</b>، <b>Language</b>.
-    ثم يقرّر <b>Assign</b> أو <b>Notify</b> تلقائيًا ويعرض سجل التنفيذ خطوة-بخطوة.
-  </p>
+<div class="card" dir="auto" style="max-width:1400px;margin:0 auto 8px;">
+  <h4>Business Case — Open Shifts Auto-Fulfillment</h4>
   <ul>
-    <li>✅ Reduce time to fill critical shifts (ICU/ED)</li>
-    <li>📜 Improve compliance with mandatory training</li>
+    <li>✅ Reduce time to fill critical shifts</li>
+    <li>📜 Enforce mandatory certifications & policies</li>
     <li>📊 Transparent Agent Runline (steps + durations)</li>
   </ul>
 </div>
 """, unsafe_allow_html=True)
 
-    # --- Status bar (initial) ---
+    # ========== Status ==========
     status_placeholder = st.empty()
     status_placeholder.markdown(
         """
@@ -546,19 +534,21 @@ def main() -> None:
 """, unsafe_allow_html=True
     )
 
-    # Demo data (kept as in your original file)
+    # Demo input (unchanged behavior)
     employee_ids_default = [850, 825]
     shift_data = """ShiftID,Department,RoleRequired,Specialty,MandatoryTraining,ShiftType,ShiftDuration,WardDepartment,LanguageRequirement,ShiftTime
 S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,2025-06-04 07:00"""
     df_shifts_default = pd.read_csv(StringIO(shift_data))
 
-    # --- CTA ---
-    col_left, col_center, col_right = st.columns([1,2,1])
-    with col_center:
-        if st.button("▶️ Start AI Agent", key="start_agent", help="Let the AI handle the work"):
-            # Loading state
-            status_placeholder.markdown(
-                """
+    # CTA centered
+    _, cta, _ = st.columns([1,2,1])
+    with cta:
+        run_clicked = st.button("▶️ Start AI Agent", key="start_agent", help="Let the AI handle the work")
+
+    if run_clicked:
+        # Processing state
+        status_placeholder.markdown(
+            """
 <div class="status-wrap" role="status" aria-live="polite">
   <div class="status-bar">
     <span class="pulse-dot"></span>
@@ -566,32 +556,28 @@ S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,202
   </div>
 </div>
 """, unsafe_allow_html=True
-            )
-
-            # --- Lightweight Skeletons while processing (visual only) ---
-            skel_tl = st.empty()
-            skel_kpi = st.empty()
-            skel_tbl = st.empty()
-            skel_tl.markdown('<div class="skel h120"></div>', unsafe_allow_html=True)
-            skel_kpi.markdown('<div class="skel h80" style="margin-top:8px"></div>', unsafe_allow_html=True)
-            skel_tbl.markdown('<div class="skel h120" style="margin-top:8px"></div>', unsafe_allow_html=True)
-
-            # Run (unchanged logic)
-            try:
-                events, shift_assignment_results, reasoning_rows = run_agent(employee_ids_default, df_shifts_default)
-            except Exception as e:
-                skel_tl.empty(); skel_kpi.empty(); skel_tbl.empty()
-                st.markdown(f'<div class="error">Unexpected error while processing. {e}</div>', unsafe_allow_html=True)
-                if st.button("Retry"):
-                    st.rerun()
-                return
-
-            # Clear skeletons
-            skel_tl.empty(); skel_kpi.empty(); skel_tbl.empty()
-
-            # Done state
-            status_placeholder.markdown(
-                """
+        )
+
+        # Lightweight skeletons (visual only)
+        skel_top = st.empty()
+        skel_mid = st.empty()
+        skel_top.markdown('<div class="skel h120"></div>', unsafe_allow_html=True)
+        skel_mid.markdown('<div class="skel h80" style="margin-top:8px"></div>', unsafe_allow_html=True)
+
+        # Run agent (logic unchanged)
+        try:
+            events, shift_assignment_results, reasoning_rows = run_agent(employee_ids_default, df_shifts_default)
+        except Exception as e:
+            skel_top.empty(); skel_mid.empty()
+            st.error(f"Unexpected error: {e}")
+            return
+
+        # Clear skeletons
+        skel_top.empty(); skel_mid.empty()
+
+        # Completed status
+        status_placeholder.markdown(
+            """
 <div class="status-wrap" role="status" aria-live="polite">
   <div class="status-bar status-done">
     <span class="pulse-dot"></span>
@@ -599,62 +585,65 @@ S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,202
   </div>
 </div>
 """, unsafe_allow_html=True
-            )
-
-            # ---------------- Agent Overview (clarify agent function) ----------------
-            total_steps = len(events)
-            total_ms = sum(int(e.get("dur_ms", 0) or 0) for e in events)
-            assigned = sum(1 for e in events if e["title"].startswith("Assigned"))
-            notified = sum(1 for e in events if e["title"].startswith("Notify"))
-            skipped = sum(1 for e in events if e["title"].startswith("Skipped"))
-            st.markdown('<div class="overview">', unsafe_allow_html=True)
-            st.markdown(
-                f'<span class="chip">🧠 <b>Agent Steps:</b> {total_steps}</span>'
-                f'<span class="chip">⏱️ <b>Total Duration:</b> {total_ms} ms</span>'
-                f'<span class="chip">✅ <b>Assigned:</b> {assigned}</span>'
-                f'<span class="chip">📬 <b>Notify:</b> {notified}</span>'
-                f'<span class="chip">⚠️ <b>Skipped:</b> {skipped}</span>',
-                unsafe_allow_html=True
-            )
-            st.markdown('</div>', unsafe_allow_html=True)
-
-            # --- Agent Runline (WIDE GRID) ---
-            st.markdown("### 🕒 Agent Runline")
-            st.markdown(render_runline_wide(events), unsafe_allow_html=True)
-
-            # --- Stat row (quick KPIs) ---
-            st.markdown('<div class="stat-row">', unsafe_allow_html=True)
-            st.markdown(f'''
-              <div class="stat-card" role="group" aria-label="Assigned"><div class="stat-icon">✅</div><div class="stat-label">Assigned</div><div class="stat-value">{assigned}</div></div>
-              <div class="stat-card" role="group" aria-label="Notify"><div class="stat-icon">📬</div><div class="stat-label">Notify</div><div class="stat-value">{notified}</div></div>
-              <div class="stat-card" role="group" aria-label="Skipped"><div class="stat-icon">⚠️</div><div class="stat-label">Skipped</div><div class="stat-value">{skipped}</div></div>
-            ''', unsafe_allow_html=True)
-            st.markdown('</div>', unsafe_allow_html=True)
-
-            # --- Results ---
-            st.markdown("### 📊 Results")
-            with st.expander("Shift Fulfillment Summary", expanded=True):
-                if shift_assignment_results:
-                    st.markdown('<div class="table-wrap">', unsafe_allow_html=True)
-                    st.dataframe(pd.DataFrame(shift_assignment_results, columns=["Employee", "ShiftID", "Status"]),
-                                 use_container_width=True)
-                    st.markdown('</div>', unsafe_allow_html=True)
-                else:
-                    st.markdown('<div class="empty">No assignments to display.</div>', unsafe_allow_html=True)
+        )
 
-            with st.expander("Reasoning Behind Selections", expanded=False):
-                if reasoning_rows:
-                    st.markdown('<div class="table-wrap">', unsafe_allow_html=True)
-                    st.dataframe(pd.DataFrame(reasoning_rows), use_container_width=True)
-                    st.markdown('</div>', unsafe_allow_html=True)
-                else:
-                    st.markdown('<div class="empty">No reasoning data available.</div>', unsafe_allow_html=True)
+        # Agent Overview
+        total_steps = len(events)
+        total_ms = sum(int(e.get("dur_ms", 0) or 0) for e in events)
+        assigned = sum(1 for e in events if e["title"].startswith("Assigned"))
+        notified = sum(1 for e in events if e["title"].startswith("Notify"))
+        skipped = sum(1 for e in events if e["title"].startswith("Skipped"))
+        st.markdown('<div class="overview">', unsafe_allow_html=True)
+        st.markdown(
+            f'<span class="chip">🧠 <b>Agent Steps:</b> {total_steps}</span>'
+            f'<span class="chip">⏱️ <b>Total Duration:</b> {total_ms} ms</span>'
+            f'<span class="chip">✅ <b>Assigned:</b> {assigned}</span>'
+            f'<span class="chip">📬 <b>Notify:</b> {notified}</span>'
+            f'<span class="chip">⚠️ <b>Skipped:</b> {skipped}</span>',
+            unsafe_allow_html=True
+        )
+        st.markdown('</div>', unsafe_allow_html=True)
+
+        # --------- WIDE TIMELINE (Grid) -----------
+        st.markdown("### 🕒 Agent Runline")
+        # Important: use st.markdown with unsafe_allow_html=True (NOT st.write), to avoid escaped tags
+        st.markdown(render_runline_wide(events), unsafe_allow_html=True)
+
+        # KPIs
+        st.markdown('<div class="stat-row">', unsafe_allow_html=True)
+        st.markdown(
+            f'<div class="stat-card"><div class="stat-icon">✅</div><div class="stat-label">Assigned</div><div class="stat-value">{assigned}</div></div>'
+            f'<div class="stat-card"><div class="stat-icon">📬</div><div class="stat-label">Notify</div><div class="stat-value">{notified}</div></div>'
+            f'<div class="stat-card"><div class="stat-icon">⚠️</div><div class="stat-label">Skipped</div><div class="stat-value">{skipped}</div></div>',
+            unsafe_allow_html=True
+        )
+        st.markdown('</div>', unsafe_allow_html=True)
 
-        else:
-            # Idle extra info (unchanged content, refined visuals)
-            st.markdown(
-                """
-<div class="card" style="margin-top:8px" dir="auto">
+        # Results (tables use full container width; horizontal scroll wrapper present on narrow)
+        st.markdown("### 📊 Results")
+
+        with st.expander("Shift Fulfillment Summary", expanded=True):
+            if shift_assignment_results:
+                st.markdown('<div class="table-wrap">', unsafe_allow_html=True)
+                st.dataframe(pd.DataFrame(shift_assignment_results, columns=["Employee", "ShiftID", "Status"]),
+                             use_container_width=True)
+                st.markdown('</div>', unsafe_allow_html=True)
+            else:
+                st.info("No assignments to display.")
+
+        with st.expander("Reasoning Behind Selections", expanded=False):
+            if reasoning_rows:
+                st.markdown('<div class="table-wrap">', unsafe_allow_html=True)
+                st.dataframe(pd.DataFrame(reasoning_rows), use_container_width=True)
+                st.markdown('</div>', unsafe_allow_html=True)
+            else:
+                st.info("No reasoning data available.")
+
+    else:
+        # Idle info
+        st.markdown(
+            """
+<div class="card" dir="auto" style="max-width:1200px;margin:8px auto 0;">
   <h4>How it works</h4>
   <ol style="margin:6px 0 0 18px;color:#334155">
     <li>Fetch employees & certifications from UKG demo API</li>
@@ -664,13 +653,13 @@ S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,202
   </ol>
 </div>
 """, unsafe_allow_html=True
-            )
+        )
 
-    # --- Footer ---
+    # Footer
     st.markdown(
         """
 <hr/>
-<div class="container" style="text-align:center;color:#64748B;font-size:13px">
+<div style="text-align:center;color:#64748B;font-size:13px">
 © 2025 Health Matrix Corp – Empowering Digital Health Transformation · <a href="mailto:info@healthmatrixcorp.com">info@healthmatrixcorp.com</a>
 </div>
 """, unsafe_allow_html=True