updated ui

app.py

@@ -1,11 +1,9 @@
 """
-╔══════════════════════════════════════════════════════════╗
-║         EMAIL JOB TRACKER — Hugging Face Spaces          ║
-║         SDK: Gradio  |  Model: LLaMA-3 via Groq          ║
-╚══════════════════════════════════════════════════════════╝
+Email Job Tracker — Hugging Face Spaces
+SDK: Gradio  |  Model: LLaMA-3 via Groq
 
 Deploy:
-  1. Create a new HF Space → SDK: Gradio
+  1. Create a new HF Space  →  SDK: Gradio
   2. Upload app.py + requirements.txt
   3. Space auto-builds and launches
 """
@@ -16,21 +14,26 @@ import pyzmail
 import pandas as pd
 import json
 import os
+import socket
+from concurrent.futures import ThreadPoolExecutor, as_completed
 from datetime import datetime
 from openai import OpenAI
 
 # ──────────────────────────────────────────────
 # CONSTANTS
 # ──────────────────────────────────────────────
-IMAP_SERVER = "imap.gmail.com"
-LEARN_FILE  = "/tmp/learned_keywords.json"
+IMAP_SERVER    = "imap.gmail.com"
+IMAP_TIMEOUT   = 10          # seconds — fast-fail on bad credentials
+LEARN_FILE     = "/tmp/learned_keywords.json"
+MAX_BODY_CHARS = 800         # trim body before sending to LLM — faster
 
+# Fetch INBOX first (fastest); others are optional extras
 GMAIL_FOLDERS = [
     "INBOX",
-    "[Gmail]/Sent Mail",
-    "[Gmail]/Drafts",
     "[Gmail]/Important",
     "[Gmail]/Starred",
+    "[Gmail]/Sent Mail",
+    "[Gmail]/Drafts",
 ]
 
 CATEGORY_COLORS = {
@@ -44,15 +47,16 @@ CATEGORY_COLORS = {
     "Unknown":         "#94a3b8",
 }
 
-CATEGORY_ICONS = {
-    "Offer":           "🎉",
-    "Interview":       "📅",
-    "New Opportunity": "🚀",
-    "Rejected":        "❌",
-    "Urgent":          "🔥",
-    "Alerts":          "🔔",
-    "Spam":            "🗑️",
-    "Unknown":         "❓",
+# Text-only category markers (no emojis)
+CATEGORY_MARKS = {
+    "Offer":           "[+]",
+    "Interview":       "[I]",
+    "New Opportunity": "[N]",
+    "Rejected":        "[X]",
+    "Urgent":          "[!]",
+    "Alerts":          "[A]",
+    "Spam":            "[S]",
+    "Unknown":         "[?]",
 }
 
 # ──────────────────────────────────────────────
@@ -139,7 +143,7 @@ Extract company name, role/position, and interview round if present.
 Email:
 {text}
 
-Return ONLY a valid JSON object — no markdown, no backticks:
+Return ONLY a valid JSON object, no markdown, no backticks:
 {{
     "category": "",
     "company": "",
@@ -152,6 +156,7 @@ Return ONLY a valid JSON object — no markdown, no backticks:
             model="llama3-70b-8192",
             messages=[{"role": "user", "content": prompt}],
             temperature=0,
+            timeout=15,
         )
         output = res.choices[0].message.content.strip()
         output = output.replace("```json", "").replace("```", "").strip()
@@ -166,32 +171,70 @@ Return ONLY a valid JSON object — no markdown, no backticks:
                 "role": "Unknown", "round": "N/A", "confidence": 0.6}
 
 # ──────────────────────────────────────────────
-# EMAIL FETCH
+# EMAIL FETCH  — fast version
+#   - socket timeout prevents indefinite hangs
+#   - fetch BODY.PEEK (no mark-as-read side effect)
+#   - strip body to MAX_BODY_CHARS before storing
+#   - ThreadPoolExecutor for per-folder parallel fetch
 # ──────────────────────────────────────────────
+def _fetch_folder(email, password, folder, limit):
+    """Fetch emails from a single folder. Returns list of dicts."""
+    results = []
+    try:
+        # Apply socket timeout so a hung server fails fast
+        old_timeout = socket.getdefaulttimeout()
+        socket.setdefaulttimeout(IMAP_TIMEOUT)
+        try:
+            mail = imapclient.IMAPClient(IMAP_SERVER, ssl=True)
+            mail.login(email, password)
+        finally:
+            socket.setdefaulttimeout(old_timeout)
+
+        mail.select_folder(folder, readonly=True)
+        uids = mail.search(["ALL"])[-limit:]
+
+        # Batch-fetch all headers + bodies in ONE round-trip
+        if uids:
+            raw_batch = mail.fetch(uids, ["BODY.PEEK[]"])
+            for uid, data in raw_batch.items():
+                try:
+                    msg  = pyzmail.PyzMessage.factory(data[b"BODY[]"])
+                    subj = msg.get_subject() or "(no subject)"
+                    if msg.text_part:
+                        body = msg.text_part.get_payload().decode(
+                            msg.text_part.charset or "utf-8", errors="replace")
+                    elif msg.html_part:
+                        body = msg.html_part.get_payload().decode(
+                            msg.html_part.charset or "utf-8", errors="replace")
+                    else:
+                        body = ""
+                    results.append({
+                        "folder":  folder,
+                        "subject": subj,
+                        "body":    body[:MAX_BODY_CHARS],
+                    })
+                except Exception:
+                    continue
+
+        mail.logout()
+    except Exception:
+        pass
+    return results
+
+
 def fetch_all_emails(email, password, limit):
-    mail = imapclient.IMAPClient(IMAP_SERVER, ssl=True)
-    mail.login(email, password)
+    """Fetch from all folders in parallel threads."""
     collected = []
-    for folder in GMAIL_FOLDERS:
-        try:
-            mail.select_folder(folder, readonly=True)
-            uids = mail.search(["ALL"])[-limit:]
-            for uid in uids:
-                raw = mail.fetch(uid, ["BODY[]"])
-                msg = pyzmail.PyzMessage.factory(raw[uid][b"BODY[]"])
-                subj = msg.get_subject() or "(no subject)"
-                if msg.text_part:
-                    body = msg.text_part.get_payload().decode(
-                        msg.text_part.charset or "utf-8", errors="replace")
-                elif msg.html_part:
-                    body = msg.html_part.get_payload().decode(
-                        msg.html_part.charset or "utf-8", errors="replace")
-                else:
-                    body = ""
-                collected.append({"folder": folder, "subject": subj, "body": body})
-        except Exception:
-            continue
-    mail.logout()
+    with ThreadPoolExecutor(max_workers=len(GMAIL_FOLDERS)) as pool:
+        futures = {
+            pool.submit(_fetch_folder, email, password, folder, limit): folder
+            for folder in GMAIL_FOLDERS
+        }
+        for future in as_completed(futures):
+            try:
+                collected.extend(future.result())
+            except Exception:
+                continue
     return collected
 
 # ──────────────────────────────────────────────
@@ -201,7 +244,7 @@ def make_summary_cards(counts):
     cards = ""
     for cat, cnt in counts.items():
         color = CATEGORY_COLORS.get(cat, "#94a3b8")
-        icon  = CATEGORY_ICONS.get(cat, "•")
+        mark  = CATEGORY_MARKS.get(cat, "[-]")
         cards += f"""
         <div style="
             background: linear-gradient(145deg, #0d1117, #161b22);
@@ -213,55 +256,51 @@ def make_summary_cards(counts):
             text-align: center;
             box-shadow: 0 4px 20px {color}22;
         ">
-            <div style="font-size:1.1rem; margin-bottom:4px;">{icon}</div>
-            <div style="font-size:2rem; font-weight:800; color:{color}; line-height:1; font-family:'Courier New',monospace;">{cnt}</div>
-            <div style="font-size:0.68rem; color:#8b949e; margin-top:5px; letter-spacing:.08em; text-transform:uppercase;">{cat}</div>
+            <div style="font-size:.72rem; color:{color}; font-family:'JetBrains Mono',monospace; margin-bottom:4px;">{mark}</div>
+            <div style="font-size:2rem; font-weight:800; color:{color}; line-height:1; font-family:'JetBrains Mono',monospace;">{cnt}</div>
+            <div style="font-size:.68rem; color:#8b949e; margin-top:5px; letter-spacing:.08em; text-transform:uppercase;">{cat}</div>
         </div>"""
-    return f"""
-    <div style="display:flex; flex-wrap:wrap; gap:12px; padding:8px 0;">
-        {cards}
-    </div>"""
+    return f'<div style="display:flex; flex-wrap:wrap; gap:12px; padding:8px 0;">{cards}</div>'
+
 
 def make_log_html(log_items):
     rows = ""
     for item in log_items:
-        color = CATEGORY_COLORS.get(item["category"], "#94a3b8")
-        icon  = CATEGORY_ICONS.get(item["category"], "•")
-        conf_pct = int(item["confidence"] * 100)
+        color     = CATEGORY_COLORS.get(item["category"], "#94a3b8")
+        mark      = CATEGORY_MARKS.get(item["category"], "[-]")
+        conf_pct  = int(item["confidence"] * 100)
         conf_color = "#10b981" if conf_pct >= 80 else "#facc15" if conf_pct >= 60 else "#f43f5e"
+        folder_short = item["folder"].replace("[Gmail]/", "")
         rows += f"""
         <div style="
             display:flex; align-items:center; gap:12px;
-            padding:10px 14px; border-bottom:1px solid #21262d;
-            transition: background .15s;
-        " onmouseover="this.style.background='#161b22'" onmouseout="this.style.background='transparent'">
+            padding:9px 14px; border-bottom:1px solid #21262d;
+        ">
             <span style="
                 background:{color}22; color:{color};
                 border:1px solid {color}55;
-                padding:3px 10px; border-radius:20px;
-                font-size:.7rem; font-weight:700;
-                white-space:nowrap; min-width:90px; text-align:center;
-            ">{icon} {item["category"]}</span>
-            <span style="color:#8b949e; font-size:.72rem; white-space:nowrap; font-family:'Courier New',monospace;">[{item["folder"].replace("[Gmail]/","")}]</span>
+                padding:3px 10px; border-radius:4px;
+                font-size:.68rem; font-weight:700;
+                white-space:nowrap; min-width:110px; text-align:center;
+                font-family:'JetBrains Mono',monospace;
+            ">{mark} {item["category"]}</span>
+            <span style="color:#8b949e; font-size:.7rem; white-space:nowrap; font-family:'JetBrains Mono',monospace;">[{folder_short}]</span>
             <span style="color:#c9d1d9; font-size:.82rem; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{item["subject"][:75]}</span>
             <span style="color:#58a6ff; font-size:.75rem; white-space:nowrap;">{item["company"]}</span>
-            <span style="color:{conf_color}; font-size:.7rem; font-family:'Courier New',monospace; white-space:nowrap;">{conf_pct}%</span>
+            <span style="color:{conf_color}; font-size:.7rem; font-family:'JetBrains Mono',monospace; white-space:nowrap;">{conf_pct}%</span>
         </div>"""
     return f"""
     <div style="
-        background:#0d1117;
-        border:1px solid #21262d;
-        border-radius:10px;
-        overflow:hidden;
-        font-family: 'Courier New', monospace;
+        background:#0d1117; border:1px solid #21262d;
+        border-radius:10px; overflow:hidden;
+        font-family:'DM Sans',sans-serif;
     ">
         <div style="
-            background:#161b22;
-            padding:10px 14px;
-            display:flex; gap:20px;
-            font-size:.68rem; color:#8b949e;
+            background:#161b22; padding:9px 14px;
+            display:flex; gap:20px; font-size:.65rem; color:#8b949e;
             letter-spacing:.1em; text-transform:uppercase;
             border-bottom:1px solid #21262d;
+            font-family:'JetBrains Mono',monospace;
         ">
             <span style="min-width:110px;">Category</span>
             <span style="min-width:70px;">Folder</span>
@@ -269,56 +308,48 @@ def make_log_html(log_items):
             <span style="min-width:80px;">Company</span>
             <span>Conf.</span>
         </div>
-        <div style="max-height:380px; overflow-y:auto;">
-            {rows}
-        </div>
+        <div style="max-height:380px; overflow-y:auto;">{rows}</div>
     </div>"""
 
+
 def make_pipeline_html(tracker_df):
-    """Group by category, show company cards."""
     if tracker_df is None or tracker_df.empty:
         return ""
     sections = ""
     for cat in tracker_df["Category"].unique():
-        color = CATEGORY_COLORS.get(cat, "#94a3b8")
-        icon  = CATEGORY_ICONS.get(cat, "•")
+        color  = CATEGORY_COLORS.get(cat, "#94a3b8")
+        mark   = CATEGORY_MARKS.get(cat, "[-]")
         subset = tracker_df[tracker_df["Category"] == cat]
-        items = ""
+        items  = ""
         for _, row in subset.iterrows():
+            round_str = row.get("Round", "")
+            round_html = (
+                f'&nbsp;&middot;&nbsp;<span style="color:#58a6ff;">{round_str}</span>'
+                if round_str not in ["N/A", "", "None", None] else ""
+            )
             items += f"""
             <div style="
-                background:#161b22;
-                border:1px solid #30363d;
-                border-radius:8px;
-                padding:10px 14px;
-                margin-bottom:6px;
+                background:#161b22; border:1px solid #30363d;
+                border-radius:6px; padding:10px 14px; margin-bottom:6px;
             ">
                 <div style="font-size:.85rem; font-weight:700; color:#e6edf3;">{row.get("Company","—")}</div>
-                <div style="font-size:.75rem; color:#8b949e; margin-top:3px;">
-                    {row.get("Role","—")}
-                    {"&nbsp;·&nbsp;<span style='color:#58a6ff;'>"+row.get("Round","")+"</span>" if row.get("Round","N/A") not in ["N/A","","None"] else ""}
-                </div>
+                <div style="font-size:.75rem; color:#8b949e; margin-top:3px;">{row.get("Role","—")}{round_html}</div>
             </div>"""
         sections += f"""
         <div style="margin-bottom:18px;">
             <div style="
-                font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
+                font-size:.65rem; letter-spacing:.15em; text-transform:uppercase;
                 color:{color}; margin-bottom:8px;
-                font-family:'Courier New',monospace;
-            ">{icon} {cat} ({len(subset)})</div>
+                font-family:'JetBrains Mono',monospace;
+            ">{mark} {cat} ({len(subset)})</div>
             {items}
         </div>"""
     return f"""
     <div style="
-        background:#0d1117;
-        border:1px solid #21262d;
-        border-radius:10px;
-        padding:18px;
-        max-height:460px;
-        overflow-y:auto;
-    ">
-        {sections}
-    </div>"""
+        background:#0d1117; border:1px solid #21262d;
+        border-radius:10px; padding:18px;
+        max-height:460px; overflow-y:auto;
+    ">{sections}</div>"""
 
 # ──────────────────────────────────────────────
 # MAIN PIPELINE
@@ -326,7 +357,7 @@ def make_pipeline_html(tracker_df):
 def run_pipeline(email, password, groq_key, limit, progress=gr.Progress(track_tqdm=True)):
     if not email.strip() or not password.strip() or not groq_key.strip():
         yield (
-            gr.update(value="<div style='color:#f43f5e;padding:16px;font-family:monospace;'>⚠️ Please fill in all three credential fields.</div>"),
+            gr.update(value="<div style='color:#f43f5e;padding:16px;font-family:monospace;'>Please fill in all three credential fields.</div>"),
             gr.update(value=""), gr.update(value=""), None, None,
         )
         return
@@ -335,7 +366,7 @@ def run_pipeline(email, password, groq_key, limit, progress=gr.Progress(track_tq
     lk     = load_learnings()
 
     yield (
-        gr.update(value="<div style='color:#facc15;padding:16px;font-family:monospace;'>🔌 Connecting to Gmail…</div>"),
+        gr.update(value="<div style='color:#facc15;padding:16px;font-family:monospace;'>Connecting to Gmail (parallel fetch)...</div>"),
         gr.update(value=""), gr.update(value=""), None, None,
     )
 
@@ -343,14 +374,14 @@ def run_pipeline(email, password, groq_key, limit, progress=gr.Progress(track_tq
         emails = fetch_all_emails(email.strip(), password.strip(), int(limit))
     except Exception as e:
         yield (
-            gr.update(value=f"<div style='color:#f43f5e;padding:16px;font-family:monospace;'>❌ Gmail failed: {e}<br><br>Check email address and App Password.</div>"),
+            gr.update(value=f"<div style='color:#f43f5e;padding:16px;font-family:monospace;'>Gmail connection failed: {e}<br><br>Check your email address and App Password.</div>"),
             gr.update(value=""), gr.update(value=""), None, None,
         )
         return
 
     if not emails:
         yield (
-            gr.update(value="<div style='color:#94a3b8;padding:16px;font-family:monospace;'>No emails found in selected folders.</div>"),
+            gr.update(value="<div style='color:#94a3b8;padding:16px;font-family:monospace;'>No emails found in the selected folders.</div>"),
             gr.update(value=""), gr.update(value=""), None, None,
         )
         return
@@ -380,37 +411,27 @@ def run_pipeline(email, password, groq_key, limit, progress=gr.Progress(track_tq
             "confidence": rec["Confidence"],
         })
 
-        # Live update every 5 emails
         if (i + 1) % 5 == 0 or (i + 1) == total:
-            df_partial  = pd.DataFrame(records)
-            partial_log = make_log_html(log_items)
-            partial_sum = make_summary_cards(df_partial["Category"].value_counts())
-            yield (
-                gr.update(value=partial_sum),
-                gr.update(value=partial_log),
-                gr.update(value=""),
-                None, None,
-            )
+            df_p   = pd.DataFrame(records)
+            p_log  = make_log_html(log_items)
+            p_sum  = make_summary_cards(df_p["Category"].value_counts())
+            yield gr.update(value=p_sum), gr.update(value=p_log), gr.update(value=""), None, None
 
     df      = pd.DataFrame(records)
     tracker = df.groupby(["Company", "Role"]).last().reset_index()
     df.to_csv("/tmp/email_log.csv",    index=False)
     tracker.to_csv("/tmp/job_tracker.csv", index=False)
 
-    summary_html  = make_summary_cards(tracker["Category"].value_counts())
-    log_html      = make_log_html(log_items)
-    pipeline_html = make_pipeline_html(tracker)
-
     yield (
-        gr.update(value=summary_html),
-        gr.update(value=log_html),
-        gr.update(value=pipeline_html),
+        gr.update(value=make_summary_cards(tracker["Category"].value_counts())),
+        gr.update(value=make_log_html(log_items)),
+        gr.update(value=make_pipeline_html(tracker)),
         "/tmp/email_log.csv",
         "/tmp/job_tracker.csv",
     )
 
 # ──────────────────────────────────────────────
-# GRADIO UI
+# CSS
 # ──────────────────────────────────────────────
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;800&family=DM+Sans:wght@300;400;500;700&display=swap');
@@ -423,12 +444,10 @@ body, .gradio-container {
     font-family: 'DM Sans', sans-serif !important;
 }
 
-/* Tabs */
 .tab-nav { background: #0d1117 !important; border-bottom: 1px solid #21262d !important; }
 .tab-nav button { color: #8b949e !important; font-family: 'DM Sans', sans-serif !important; font-size:.85rem !important; }
 .tab-nav button.selected { color: #58a6ff !important; border-bottom: 2px solid #58a6ff !important; background: transparent !important; }
 
-/* Inputs */
 label > span {
     color: #8b949e !important;
     font-size: .7rem !important;
@@ -447,14 +466,10 @@ input[type=text], input[type=password], textarea {
 }
 input[type=text]:focus, input[type=password]:focus {
     border-color: #58a6ff !important;
-    outline: none !important;
     box-shadow: 0 0 0 3px #58a6ff18 !important;
 }
-
-/* Range slider */
 input[type=range] { accent-color: #58a6ff !important; }
 
-/* Buttons */
 .gr-button {
     font-family: 'DM Sans', sans-serif !important;
     border-radius: 6px !important;
@@ -464,7 +479,8 @@ input[type=range] { accent-color: #58a6ff !important; }
 .gr-button-primary {
     background: #238636 !important;
     border: 1px solid #2ea043 !important;
-    color: #ffffff !important;
+    color: #fff !important;
+    letter-spacing: .04em !important;
 }
 .gr-button-primary:hover {
     background: #2ea043 !important;
@@ -477,14 +493,12 @@ input[type=range] { accent-color: #58a6ff !important; }
     color: #c9d1d9 !important;
 }
 
-/* Panels */
 .gr-panel, .gr-box, .gr-form {
     background: #0d1117 !important;
     border: 1px solid #21262d !important;
     border-radius: 10px !important;
 }
 
-/* Dataframe */
 .gr-dataframe table {
     background: #0d1117 !important;
     border: 1px solid #21262d !important;
@@ -500,123 +514,106 @@ input[type=range] { accent-color: #58a6ff !important; }
 .gr-dataframe td { color: #c9d1d9 !important; border-color: #21262d !important; }
 .gr-dataframe tr:hover td { background: #161b22 !important; }
 
-/* Scrollbar */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: #0d1117; }
 ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: #484f58; }
 """
 
+# ──────────────────────────────────────────────
+# HTML PARTIALS
+# ──────────────────────────────────────────────
 HEADER_HTML = """
-<div style="
-    padding: 32px 0 24px;
-    font-family: 'DM Sans', sans-serif;
-    border-bottom: 1px solid #21262d;
-    margin-bottom: 24px;
-">
+<div style="padding:28px 0 20px; font-family:'DM Sans',sans-serif; border-bottom:1px solid #21262d; margin-bottom:20px;">
     <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap;">
-        <div style="
-            background: linear-gradient(135deg, #238636, #3fb950);
-            border-radius: 12px;
-            padding: 12px 16px;
-            font-size: 1.6rem;
-            line-height:1;
-        ">📬</div>
+        <div style="background:linear-gradient(135deg,#238636,#3fb950); border-radius:10px; padding:10px 14px; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:1.1rem; color:#fff; letter-spacing:.05em;">
+            JT
+        </div>
         <div>
-            <div style="
-                font-size:.65rem; letter-spacing:.25em; text-transform:uppercase;
-                color:#58a6ff; font-family:'JetBrains Mono',monospace; margin-bottom:4px;
-            ">Powered by LLaMA-3 · Self-Learning · Groq</div>
-            <h1 style="
-                font-size:1.9rem; font-weight:800; color:#e6edf3;
-                margin:0; letter-spacing:-.03em; line-height:1;
-            ">Email Job Tracker</h1>
-            <p style="color:#8b949e; margin:6px 0 0; font-size:.88rem; font-weight:300;">
-                Fetch → classify → track your entire job pipeline automatically
+            <div style="font-size:.62rem; letter-spacing:.25em; text-transform:uppercase; color:#58a6ff; font-family:'JetBrains Mono',monospace; margin-bottom:4px;">
+                Powered by LLaMA-3 &middot; Self-Learning &middot; Groq
+            </div>
+            <h1 style="font-size:1.8rem; font-weight:800; color:#e6edf3; margin:0; letter-spacing:-.03em; line-height:1;">
+                Email Job Tracker
+            </h1>
+            <p style="color:#8b949e; margin:5px 0 0; font-size:.86rem; font-weight:300;">
+                Fetch &rarr; classify &rarr; track your entire job pipeline automatically
             </p>
         </div>
         <div style="margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:6px;">
-            <span style="
-                background:#238636; color:#fff; font-size:.68rem;
-                padding:3px 10px; border-radius:20px; font-weight:600;
-                font-family:'JetBrains Mono',monospace; letter-spacing:.05em;
-            ">v2.0 GRADIO</span>
-            <span style="
-                background:#1f6feb22; color:#58a6ff; font-size:.68rem;
-                padding:3px 10px; border-radius:20px;
-                font-family:'JetBrains Mono',monospace; border:1px solid #1f6feb55;
-            ">HF SPACES</span>
+            <span style="background:#238636; color:#fff; font-size:.62rem; padding:3px 10px; border-radius:4px; font-weight:700; font-family:'JetBrains Mono',monospace; letter-spacing:.05em;">
+                v2.1 GRADIO
+            </span>
+            <span style="background:#1f6feb22; color:#58a6ff; font-size:.62rem; padding:3px 10px; border-radius:4px; font-family:'JetBrains Mono',monospace; border:1px solid #1f6feb55;">
+                HF SPACES
+            </span>
         </div>
     </div>
 </div>
 """
 
 CRED_HELP = """
+<div style="background:#161b22; border:1px solid #30363d; border-left:3px solid #58a6ff; border-radius:8px; padding:14px 16px; font-size:.78rem; color:#8b949e; font-family:'DM Sans',sans-serif; line-height:1.7; margin-top:8px;">
+    <strong style="color:#c9d1d9;">Security Notes</strong><br>
+    &bull; Use a <strong style="color:#e6edf3;">Gmail App Password</strong>, not your account password<br>
+    &bull; Requires 2FA enabled &rarr; <a href="https://myaccount.google.com/apppasswords" target="_blank" style="color:#58a6ff;">Generate here</a><br>
+    &bull; Free Groq API key &rarr; <a href="https://console.groq.com" target="_blank" style="color:#58a6ff;">console.groq.com</a><br>
+    &bull; Credentials are <strong style="color:#e6edf3;">never stored</strong> &mdash; session only
+</div>
+"""
+
+FOOTER_HTML = """
 <div style="
-    background: #161b22;
-    border: 1px solid #30363d;
-    border-left: 3px solid #58a6ff;
-    border-radius: 8px;
-    padding: 14px 16px;
-    font-size: .78rem;
-    color: #8b949e;
-    font-family: 'DM Sans', sans-serif;
-    line-height: 1.7;
+    text-align:center;
+    padding:18px 0 10px;
+    margin-top:24px;
+    border-top:1px solid #21262d;
+    font-family:'JetBrains Mono',monospace;
+    font-size:.65rem;
+    color:#484f58;
+    letter-spacing:.08em;
 ">
-    <strong style="color:#c9d1d9;">🔐 Security Notes</strong><br>
-    • Use a <strong style="color:#e6edf3;">Gmail App Password</strong>, not your account password<br>
-    • Requires 2FA enabled →
-      <a href="https://myaccount.google.com/apppasswords" target="_blank" style="color:#58a6ff;">Generate here</a><br>
-    • Get free Groq API key →
-      <a href="https://console.groq.com" target="_blank" style="color:#58a6ff;">console.groq.com</a><br>
-    • Credentials are <strong style="color:#e6edf3;">never stored</strong> — session only
+    Designed &amp; Developed by <span style="color:#8b949e;">Kajal Dadas</span>
 </div>
 """
 
 EMPTY_LOG = """
-<div style="
-    background:#0d1117; border:1px solid #21262d; border-radius:10px;
-    padding:40px; text-align:center; color:#484f58;
-    font-family:'JetBrains Mono',monospace; font-size:.82rem;
-">
-    ░░ No data yet — run the agent to see results ░░
+<div style="background:#0d1117; border:1px solid #21262d; border-radius:10px; padding:40px; text-align:center; color:#484f58; font-family:'JetBrains Mono',monospace; font-size:.8rem;">
+    No data yet &mdash; run the agent to see results
 </div>"""
 
 def section_label(text, color="#58a6ff"):
-    return f"""<div style="
-        font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
-        color:{color}; font-family:'JetBrains Mono',monospace;
-        margin-bottom:8px; margin-top:4px;
-    ">{text}</div>"""
+    return (
+        f'<div style="font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; '
+        f'color:{color}; font-family:\'JetBrains Mono\',monospace; margin-bottom:8px; margin-top:4px;">{text}</div>'
+    )
 
-with gr.Blocks(css=CSS, title="📬 Email Job Tracker") as demo:
+# ──────────────────────────────────────────────
+# GRADIO LAYOUT
+# ──────────────────────────────────────────────
+with gr.Blocks(css=CSS, title="Email Job Tracker") as demo:
     gr.HTML(HEADER_HTML)
 
     with gr.Tabs():
 
-        # ════════════════════════════════════════
-        # TAB 1 — RUN AGENT
-        # ════════════════════════════════════════
-        with gr.TabItem("⚡ Run Agent"):
+        # ── TAB 1: RUN AGENT ──────────────────
+        with gr.TabItem("Run Agent"):
             with gr.Row(equal_height=False):
 
-                # LEFT — credentials
                 with gr.Column(scale=1, min_width=300):
                     gr.HTML(section_label("Credentials"))
-                    email_in   = gr.Textbox(label="Gmail Address",      placeholder="you@gmail.com")
-                    pass_in    = gr.Textbox(label="Gmail App Password",  type="password", placeholder="xxxx xxxx xxxx xxxx")
-                    groq_in    = gr.Textbox(label="Groq API Key",        type="password", placeholder="gsk_...")
+                    email_in  = gr.Textbox(label="Gmail Address",     placeholder="you@gmail.com")
+                    pass_in   = gr.Textbox(label="Gmail App Password", type="password", placeholder="xxxx xxxx xxxx xxxx")
+                    groq_in   = gr.Textbox(label="Groq API Key",       type="password", placeholder="gsk_...")
                     gr.HTML(section_label("Settings", "#8b949e"))
-                    limit_in   = gr.Slider(label="Emails per folder", minimum=5, maximum=50, value=20, step=5)
-                    run_btn    = gr.Button("⚡  Run Agent", variant="primary", size="lg")
-                    clear_btn  = gr.Button("✕  Clear Results", variant="secondary", size="sm")
+                    limit_in  = gr.Slider(label="Emails per folder", minimum=5, maximum=50, value=20, step=5)
+                    run_btn   = gr.Button("Run Agent", variant="primary", size="lg")
+                    clear_btn = gr.Button("Clear Results", variant="secondary", size="sm")
                     gr.HTML(CRED_HELP)
 
-                # RIGHT — live results
                 with gr.Column(scale=2):
                     gr.HTML(section_label("Category Summary"))
                     summary_out = gr.HTML(value=EMPTY_LOG)
-
                     gr.HTML(section_label("Live Classification Log"))
                     log_out = gr.HTML(value=EMPTY_LOG)
 
@@ -626,76 +623,81 @@ with gr.Blocks(css=CSS, title="📬 Email Job Tracker") as demo:
             with gr.Row():
                 with gr.Column():
                     gr.HTML(section_label("Downloads", "#8b949e"))
-                    file_log     = gr.File(label="📄 email_log.csv — all classified emails")
-                    file_tracker = gr.File(label="📊 job_tracker.csv — deduplicated pipeline")
-
-        # ════════════════════════════════════════
-        # TAB 2 — TRACKER TABLE
-        # ════════════════════════════════════════
-        with gr.TabItem("📊 Tracker Table"):
-            gr.HTML(section_label("Full Job Tracker — Latest status per company/role"))
+                    file_log     = gr.File(label="email_log.csv — all classified emails")
+                    file_tracker = gr.File(label="job_tracker.csv — deduplicated pipeline")
+
+        # ── TAB 2: TRACKER TABLE ──────────────
+        with gr.TabItem("Tracker Table"):
+            gr.HTML(section_label("Full Job Tracker — Latest status per company / role"))
             table_out = gr.Dataframe(
                 headers=["Company", "Role", "Category", "Round", "Confidence", "Subject"],
                 interactive=False,
                 wrap=False,
             )
 
-        # ════════════════════════════════════════
-        # TAB 3 — HOW TO USE
-        # ════════════════════════════════════════
-        with gr.TabItem("📖 Guide"):
+        # ── TAB 3: GUIDE ──────────────────────
+        with gr.TabItem("Guide"):
             gr.HTML("""
 <div style="max-width:680px; font-family:'DM Sans',sans-serif; line-height:1.8; padding:8px 0;">
 
-<h2 style="color:#e6edf3; font-size:1.1rem; margin-bottom:4px;">🚀 Quick Start</h2>
+<h2 style="color:#e6edf3; font-size:1.05rem; margin-bottom:4px;">Quick Start</h2>
 <ol style="color:#8b949e; font-size:.88rem; padding-left:20px;">
   <li>Enable 2-Step Verification on your Google Account</li>
-  <li>Generate a <a href="https://myaccount.google.com/apppasswords" target="_blank" style="color:#58a6ff;">Gmail App Password</a> (16 chars, no spaces)</li>
+  <li>Generate a <a href="https://myaccount.google.com/apppasswords" target="_blank" style="color:#58a6ff;">Gmail App Password</a> (16 chars, no spaces needed)</li>
   <li>Get a free API key from <a href="https://console.groq.com" target="_blank" style="color:#58a6ff;">Groq Console</a></li>
-  <li>Enter credentials in the <strong style="color:#c9d1d9;">Run Agent</strong> tab and hit ⚡ Run</li>
+  <li>Enter credentials in the Run Agent tab and click Run Agent</li>
 </ol>
 
-<h2 style="color:#e6edf3; font-size:1.1rem; margin-top:20px; margin-bottom:4px;">🏷️ Email Categories</h2>
+<h2 style="color:#e6edf3; font-size:1.05rem; margin-top:20px; margin-bottom:8px;">Email Categories</h2>
 <table style="font-size:.82rem; border-collapse:collapse; width:100%;">
   <thead>
     <tr style="background:#161b22;">
       <th style="padding:8px 12px; color:#8b949e; text-align:left; border:1px solid #21262d;">Category</th>
-      <th style="padding:8px 12px; color:#8b949e; text-align:left; border:1px solid #21262d;">Triggers</th>
+      <th style="padding:8px 12px; color:#8b949e; text-align:left; border:1px solid #21262d;">Trigger Keywords</th>
     </tr>
   </thead>
   <tbody>
-    <tr><td style="padding:8px 12px; color:#10b981; border:1px solid #21262d;">🎉 Offer</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Offer letter, CTC, Welcome aboard</td></tr>
-    <tr><td style="padding:8px 12px; color:#3b82f6; border:1px solid #21262d;">📅 Interview</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Invite, Round, Assessment, Screening</td></tr>
-    <tr><td style="padding:8px 12px; color:#8b5cf6; border:1px solid #21262d;">🚀 New Opportunity</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Hiring, Opening, JD Attached</td></tr>
-    <tr><td style="padding:8px 12px; color:#f43f5e; border:1px solid #21262d;">❌ Rejected</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Regret, Unfortunately, Not selected</td></tr>
-    <tr><td style="padding:8px 12px; color:#f97316; border:1px solid #21262d;">🔥 Urgent</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">ASAP, Deadline, Action Required</td></tr>
-    <tr><td style="padding:8px 12px; color:#facc15; border:1px solid #21262d;">🔔 Alerts</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Security Alert, Account Notification</td></tr>
-    <tr><td style="padding:8px 12px; color:#6b7280; border:1px solid #21262d;">🗑️ Spam</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Sale, Lottery, Buy Now, Subscribe</td></tr>
+    <tr><td style="padding:8px 12px; color:#10b981; border:1px solid #21262d;">Offer</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Offer letter, CTC, Welcome aboard, Salary</td></tr>
+    <tr><td style="padding:8px 12px; color:#3b82f6; border:1px solid #21262d;">Interview</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Invite, Round, Assessment, Screening</td></tr>
+    <tr><td style="padding:8px 12px; color:#8b5cf6; border:1px solid #21262d;">New Opportunity</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Hiring, Opening, JD Attached, Vacancy</td></tr>
+    <tr><td style="padding:8px 12px; color:#f43f5e; border:1px solid #21262d;">Rejected</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Regret, Unfortunately, Not selected</td></tr>
+    <tr><td style="padding:8px 12px; color:#f97316; border:1px solid #21262d;">Urgent</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">ASAP, Deadline, Action Required</td></tr>
+    <tr><td style="padding:8px 12px; color:#facc15; border:1px solid #21262d;">Alerts</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Security Alert, Account Notification</td></tr>
+    <tr><td style="padding:8px 12px; color:#6b7280; border:1px solid #21262d;">Spam</td><td style="padding:8px 12px; color:#8b949e; border:1px solid #21262d;">Sale, Lottery, Buy Now, Subscribe</td></tr>
   </tbody>
 </table>
 
-<h2 style="color:#e6edf3; font-size:1.1rem; margin-top:20px; margin-bottom:4px;">🧠 Self-Learning</h2>
+<h2 style="color:#e6edf3; font-size:1.05rem; margin-top:20px; margin-bottom:4px;">Self-Learning</h2>
+<p style="color:#8b949e; font-size:.88rem;">
+Every high-confidence classification (&gt;80%) teaches the system new keywords for that category.
+These are saved to <code style="color:#58a6ff; background:#161b22; padding:1px 6px; border-radius:3px;">/tmp/learned_keywords.json</code>
+and improve accuracy over time within the session.
+</p>
+
+<h2 style="color:#e6edf3; font-size:1.05rem; margin-top:20px; margin-bottom:4px;">Speed Notes</h2>
 <p style="color:#8b949e; font-size:.88rem;">
-Every high-confidence classification (>80%) teaches the system new keywords for that category. These are saved to <code style="color:#58a6ff;">/tmp/learned_keywords.json</code> and improve accuracy over time within the session.
+Folders are fetched in parallel threads with a 10-second socket timeout, so a slow or unreachable folder
+never blocks the others. INBOX is always fetched first and is typically the fastest.
 </p>
 
 </div>
 """)
 
-    # ════════════════════════════════════════
-    # EVENT HANDLERS
-    # ════════════════════════════════════════
+    gr.HTML(FOOTER_HTML)
+
+    # ── EVENT HANDLERS ────────────────────────
     def do_run(email, password, groq_key, limit, progress=gr.Progress(track_tqdm=True)):
-        tracker_df_holder = []
         last_yield = None
         for result in run_pipeline(email, password, groq_key, limit, progress):
             last_yield = result
             yield result[0], result[1], result[2], result[3], result[4], gr.update()
 
-        # populate tracker table after run
+        if last_yield is None:
+            return
+
         try:
-            df = pd.read_csv("/tmp/job_tracker.csv")
-            cols = [c for c in ["Company","Role","Category","Round","Confidence","Subject"] if c in df.columns]
+            df   = pd.read_csv("/tmp/job_tracker.csv")
+            cols = [c for c in ["Company", "Role", "Category", "Round", "Confidence", "Subject"] if c in df.columns]
             yield last_yield[0], last_yield[1], last_yield[2], last_yield[3], last_yield[4], df[cols]
         except Exception:
             yield last_yield[0], last_yield[1], last_yield[2], last_yield[3], last_yield[4], gr.update()