Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,11 +1,11 @@
 """
-Health Matrix – AI Command Center (Enhanced UI/UX)
+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):
-- Responsive Hero + Business Case
-- Accessible Status Bar (ARIA live)
-- Agent Runline (vertical, scrollable, animated)
+- 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
@@ -17,7 +17,6 @@ Usage: streamlit run streamlit_app.py
 
 import os
 import json
-import pathlib
 import time
 from typing import List, Optional, Iterable, Dict, Any
 from io import StringIO
@@ -43,6 +42,10 @@ _EMBEDDED_CSS = """
   --t1:#0F172A; --t2:#1F2937; --t3:#334155; --muted:#64748B;
   --blue:#004C97; --green:#36BA01; --ok:#16a34a; --warn:#D97706; --fail:#DC2626;
 }
+
+/* ====== Make the main page wider on web ====== */
+.main .block-container{max-width:1520px !important; padding-left:1rem; padding-right:1rem}
+
 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}
@@ -70,7 +73,7 @@ p,li{color:var(--t2);font-size:1.05em}
   -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:760px;margin:0 auto}
+.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:
@@ -114,24 +117,26 @@ p,li{color:var(--t2);font-size:1.05em}
 .stat-label{color:#334155;font-size:0.95rem}
 .stat-value{font-size:1.7rem;font-weight:900;color:var(--t1)}
 
-/* === Agent Runline (vertical execution log) === */
-.run-wrap{margin:10px 0 20px;max-height:360px;overflow-y:auto;padding-right:6px}
-.run-legend{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
-.run-legend .chip{font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff}
-.run{position:relative;margin:0;padding:0 0 0 18px;list-style:none}
-.run::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#E2E8F0}
-.run li{position:relative;margin:0 0 12px;padding:8px 12px;background:#fff;border:1px solid var(--line);
-  border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,.05);opacity:0;animation:fadeIn .45s forwards}
-.run li::before{content:"";position:absolute;left:-13px;top:12px;width:12px;height:12px;border-radius:50%;
-  background:#94A3B8;border:2px solid #fff;box-shadow:0 0 0 2px #E2E8F0}
-.run li.done::before{background:var(--green)}
-.run li.current::before{background:var(--blue)}
-.run h5{margin:0 0 4px;font-size:14px}
-.run .meta{display:flex;gap:10px;font-size:12px;color:#64748B}
-.run .desc{margin-top:6px;color:#334155;font-size:13px}
+/* === 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:var(--muted)}
+.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 ================= */
@@ -379,21 +384,7 @@ def gpt_decide(shift: pd.Series, eligible_df: pd.DataFrame) -> Dict[str, str]:
         st.error(f"❌ GPT Error: {e}")
         return {"action": "skip"}
 
-def render_mini_timeline(events: List[Dict[str, str]]) -> str:
-    # kept in case you want the compact view
-    steps = []
-    for i, ev in enumerate(events):
-        title = ev.get("title","")
-        done = "done" if i < len(events)-1 else ""  # last is current
-        label = (title.replace("🔍","").replace("✅","").replace("📋","")
-                      .replace("🤖","").replace("📬","").strip())
-        steps.append(f'<div class="step {done}">{label}</div>')
-    html = f'''
-      <div class="ai-timeline-light">{"".join(steps)}</div>
-      <div class="ai-next">Next: {events[-1]["title"] if events else "Ready"}</div>
-    '''
-    return html
-
+# -------- 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")
@@ -410,6 +401,28 @@ def render_runline(events: List[Dict[str, Any]]) -> str:
            '<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) ----------
+def render_runline_wide(events: List[Dict[str, Any]]) -> str:
+    def card(ev):
+        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>"
+
+# =============================================================================
+# Main agent runner (unchanged)
+# =============================================================================
 def run_agent(employee_ids: Iterable[int], df_shifts: pd.DataFrame):
     events: List[Dict[str, Any]] = []
     shift_assignment_results: List[tuple] = []
@@ -505,7 +518,7 @@ def main() -> None:
 
     # --- Business Case (top) ---
     st.markdown("""
-<div class="card" style="max-width:980px;margin:0 auto 10px;" dir="auto">
+<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 يراقب الشفتات المفتوحة ويطابقها تلقائيًا مع الموارد المؤهّلة وفق المعايير:
@@ -540,7 +553,7 @@ S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,202
     df_shifts_default = pd.read_csv(StringIO(shift_data))
 
     # --- CTA ---
-    col_left, col_center, col_right = st.columns([2,3,2])
+    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
@@ -588,14 +601,28 @@ S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,202
 """, unsafe_allow_html=True
             )
 
-            # --- Agent Runline (vertical, styled here so global CSS applies) ---
-            st.markdown("### 🕒 Agent Runline")
-            st.markdown(render_runline(events), unsafe_allow_html=True)
-
-            # --- Stat row (quick KPIs) ---
+            # ---------------- 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>
@@ -608,9 +635,9 @@ S101,ICU,Registered Nurse,ICU-trained,BLS/ALS certified,Night,12h,A&E,Arabic,202
             st.markdown("### 📊 Results")
             with st.expander("Shift Fulfillment Summary", expanded=True):
                 if shift_assignment_results:
-                    # Wrapper for horizontal scroll on smaller screens
                     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.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)