updated error

app.py

@@ -1,11 +1,11 @@
 """
-Email Job Tracker — Hugging Face Spaces
-SDK: Gradio  |  Model: LLaMA-3 via Groq
-
-Deploy:
-  1. Create a new HF Space  →  SDK: Gradio
-  2. Upload app.py + requirements.txt
-  3. Space auto-builds and launches
+╔══════════════════════════════════════════════════════════╗
+║       EMAIL JOB TRACKER — Hugging Face Spaces v2.1       ║
+║       SDK: Gradio  |  LLaMA-3 via Groq  |  Self-Learn    ║
+╚══════════════════════════════════════════════════════════╝
+Files needed:
+  app.py            ← this file
+  requirements.txt  ← gradio / imapclient / pyzmail36 / openai / pandas
 """
 
 import gradio as gr
@@ -14,20 +14,16 @@ import pyzmail
 import pandas as pd
 import json
 import os
-import socket
-from concurrent.futures import ThreadPoolExecutor, as_completed
+import traceback
 from datetime import datetime
 from openai import OpenAI
 
-# ──────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────
 # CONSTANTS
-# ──────────────────────────────────────────────
-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
+# ──────────────────────────────────────────────────────────
+IMAP_SERVER = "imap.gmail.com"
+LEARN_FILE  = "/tmp/learned_keywords.json"
 
-# Fetch INBOX first (fastest); others are optional extras
 GMAIL_FOLDERS = [
     "INBOX",
     "[Gmail]/Important",
@@ -47,21 +43,20 @@ CATEGORY_COLORS = {
     "Unknown":         "#94a3b8",
 }
 
-# Text-only category markers (no emojis)
-CATEGORY_MARKS = {
-    "Offer":           "[+]",
-    "Interview":       "[I]",
-    "New Opportunity": "[N]",
-    "Rejected":        "[X]",
-    "Urgent":          "[!]",
-    "Alerts":          "[A]",
-    "Spam":            "[S]",
-    "Unknown":         "[?]",
+CATEGORY_ICONS = {
+    "Offer":           "🎉",
+    "Interview":       "📅",
+    "New Opportunity": "🚀",
+    "Rejected":        "❌",
+    "Urgent":          "🔥",
+    "Alerts":          "🔔",
+    "Spam":            "🗑️",
+    "Unknown":         "❓",
 }
 
-# ──────────────────────────────────────────────
-# SELF-LEARNING KEYWORDS
-# ──────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────
+# SELF-LEARNING
+# ──────────────────────────────────────────────────────────
 def load_learnings():
     try:
         if os.path.exists(LEARN_FILE):
@@ -78,38 +73,41 @@ def save_learnings(lk):
     except Exception:
         pass
 
+# ──────────────────────────────────────────────────────────
+# KEYWORD ENGINE
+# ──────────────────────────────────────────────────────────
 def get_base_keywords():
     return {
         "Offer": [
-            "offer letter", "congratulations", "selected", "employment offer",
-            "welcome aboard", "joining", "ctc", "salary", "compensation",
-            "offer rollout", "final selection", "offer acceptance",
+            "offer letter","congratulations","selected","employment offer",
+            "welcome aboard","joining","ctc","salary","compensation",
+            "offer rollout","final selection","offer acceptance",
         ],
         "Interview": [
-            "interview", "round", "technical", "hr round", "final round",
-            "assessment", "test", "assignment", "panel", "discussion",
-            "screening", "shortlisted", "interview invite",
+            "interview","round","technical","hr round","final round",
+            "assessment","test","assignment","panel","discussion",
+            "screening","shortlisted","interview invite",
         ],
         "New Opportunity": [
-            "job opportunity", "hiring", "opening", "vacancy", "role opportunity",
-            "we are hiring", "position available", "jd attached",
-            "job description", "career opportunity", "looking for candidates",
+            "job opportunity","hiring","opening","vacancy","role opportunity",
+            "we are hiring","position available","jd attached",
+            "job description","career opportunity","looking for candidates",
         ],
         "Rejected": [
-            "regret", "unfortunately", "not selected", "not shortlisted",
-            "rejected", "not a fit", "position filled", "application unsuccessful",
+            "regret","unfortunately","not selected","not shortlisted",
+            "rejected","not a fit","position filled","application unsuccessful",
         ],
         "Urgent": [
-            "urgent", "immediate", "asap", "priority", "today", "tomorrow",
-            "deadline", "action required", "important", "quick response",
+            "urgent","immediate","asap","priority","today","tomorrow",
+            "deadline","action required","important","quick response",
         ],
         "Alerts": [
-            "alert", "notification", "reminder", "update", "system alert",
-            "security alert", "account alert", "important update",
+            "alert","notification","reminder","update","system alert",
+            "security alert","account alert","important update",
         ],
         "Spam": [
-            "sale", "discount", "offer deal", "win", "lottery", "free",
-            "click here", "subscribe", "buy now", "limited offer",
+            "sale","discount","offer deal","win","lottery","free",
+            "click here","subscribe","buy now","limited offer",
         ],
     }
 
@@ -130,9 +128,9 @@ def learn_from_email(text, category, lk):
             lk[category].append(w)
     save_learnings(lk)
 
-# ──────────────────────────────────────────────
-# LLM CLASSIFIER  (Groq / LLaMA-3)
-# ──────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────
+# LLM CLASSIFIER
+# ──────────────────────────────────────────────────────────
 def classify_email(subject, body, client, lk):
     text = (subject + " " + body)[:1500]
     prompt = f"""Classify this email into exactly ONE of:
@@ -143,7 +141,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 valid JSON, no markdown, no backticks:
 {{
     "category": "",
     "company": "",
@@ -156,7 +154,6 @@ 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()
@@ -164,42 +161,35 @@ Return ONLY a valid JSON object, no markdown, no backticks:
         if result.get("confidence", 0) > 0.8:
             learn_from_email(text, result["category"], lk)
         return result
-    except Exception:
+    except Exception as e:
+        print(f"[LLM ERROR] {e}")
         cat = rule_based_classification(text, lk)
         learn_from_email(text, cat, lk)
         return {"category": cat, "company": "Unknown",
                 "role": "Unknown", "round": "N/A", "confidence": 0.6}
 
-# ──────────────────────────────────────────────
-# 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)
+# ──────────────────────────────────────────────────────────
+# EMAIL FETCH
+# ──────────────────────────────────────────────────────────
+def fetch_all_emails(email, password, limit):
+    print(f"[IMAP] Connecting to {IMAP_SERVER} as {email}")
+    mail = imapclient.IMAPClient(IMAP_SERVER, ssl=True)
+    mail.login(email, password)
+    print("[IMAP] Login successful")
+    collected = []
+
+    for folder in GMAIL_FOLDERS:
         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():
+            mail.select_folder(folder, readonly=True)
+            uids = mail.search(["ALL"])[-limit:]
+            print(f"[IMAP] {folder}: found {len(uids)} emails")
+
+            for uid in uids:
                 try:
-                    msg  = pyzmail.PyzMessage.factory(data[b"BODY[]"])
+                    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")
@@ -208,109 +198,83 @@ def _fetch_folder(email, password, folder, limit):
                             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
+                    collected.append({"folder": folder, "subject": subj, "body": body})
+                except Exception as e:
+                    print(f"[IMAP] UID {uid} error: {e}")
+                    continue
 
+        except Exception as e:
+            print(f"[IMAP] Folder '{folder}' skipped: {e}")
+            continue
 
-def fetch_all_emails(email, password, limit):
-    """Fetch from all folders in parallel threads."""
-    collected = []
-    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
+    mail.logout()
+    print(f"[IMAP] Total emails fetched: {len(collected)}")
     return collected
 
-# ──────────────────────────────────────────────
-# HTML HELPERS
-# ──────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────
+# HTML BUILDERS
+# ──────────────────────────────────────────────────────────
 def make_summary_cards(counts):
     cards = ""
     for cat, cnt in counts.items():
         color = CATEGORY_COLORS.get(cat, "#94a3b8")
-        mark  = CATEGORY_MARKS.get(cat, "[-]")
+        icon  = CATEGORY_ICONS.get(cat, "•")
         cards += f"""
-        <div style="
-            background: linear-gradient(145deg, #0d1117, #161b22);
-            border: 1px solid {color}55;
-            border-left: 3px solid {color};
-            border-radius: 10px;
-            padding: 14px 20px;
-            min-width: 110px;
-            text-align: center;
-            box-shadow: 0 4px 20px {color}22;
-        ">
-            <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 style="background:linear-gradient(145deg,#0d1117,#161b22);
+                    border:1px solid {color}55; border-left:3px solid {color};
+                    border-radius:10px; padding:14px 20px; min-width:110px;
+                    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:.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")
-        mark      = CATEGORY_MARKS.get(item["category"], "[-]")
+        icon      = CATEGORY_ICONS.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:9px 14px; border-bottom:1px solid #21262d;
-        ">
-            <span style="
-                background:{color}22; color:{color};
-                border:1px solid {color}55;
-                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:'JetBrains Mono',monospace; white-space:nowrap;">{conf_pct}%</span>
+        <div style="display:flex;align-items:center;gap:12px;
+                    padding:10px 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:110px;text-align:center;">
+                {icon} {item["category"]}
+            </span>
+            <span style="color:#8b949e;font-size:.72rem;white-space:nowrap;
+                         font-family:'Courier New',monospace;">[{folder_short}]</span>
+            <span style="color:#c9d1d9;font-size:.82rem;flex:1;overflow:hidden;
+                         text-overflow:ellipsis;white-space:nowrap;">{item["subject"][:72]}</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>
         </div>"""
-    return f"""
-    <div style="
-        background:#0d1117; border:1px solid #21262d;
-        border-radius:10px; overflow:hidden;
-        font-family:'DM Sans',sans-serif;
-    ">
-        <div style="
-            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>
+
+    header = """
+        <div style="background:#161b22;padding:10px 14px;display:flex;gap:20px;
+                    font-size:.65rem;color:#8b949e;letter-spacing:.1em;text-transform:uppercase;
+                    border-bottom:1px solid #21262d;">
+            <span style="min-width:120px;">Category</span>
             <span style="min-width:70px;">Folder</span>
             <span style="flex:1;">Subject</span>
             <span style="min-width:80px;">Company</span>
             <span>Conf.</span>
-        </div>
-        <div style="max-height:380px; overflow-y:auto;">{rows}</div>
-    </div>"""
+        </div>"""
 
+    return f"""
+    <div style="background:#0d1117;border:1px solid #21262d;border-radius:10px;overflow:hidden;
+                font-family:'Courier New',monospace;">
+        {header}
+        <div style="max-height:380px;overflow-y:auto;">{rows}</div>
+    </div>"""
 
 def make_pipeline_html(tracker_df):
     if tracker_df is None or tracker_df.empty:
@@ -318,74 +282,91 @@ def make_pipeline_html(tracker_df):
     sections = ""
     for cat in tracker_df["Category"].unique():
         color  = CATEGORY_COLORS.get(cat, "#94a3b8")
-        mark   = CATEGORY_MARKS.get(cat, "[-]")
+        icon   = CATEGORY_ICONS.get(cat, "•")
         subset = tracker_df[tracker_df["Category"] == cat]
         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 ""
-            )
+            round_text = ""
+            if str(row.get("Round", "N/A")) not in ["N/A", "", "None", "nan"]:
+                round_text = f"&nbsp;·&nbsp;<span style='color:#58a6ff;'>{row['Round']}</span>"
             items += f"""
-            <div style="
-                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","—")}{round_html}</div>
+            <div style="background:#161b22;border:1px solid #30363d;border-radius:8px;
+                        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","—")}{round_text}
+                </div>
             </div>"""
         sections += f"""
         <div style="margin-bottom:18px;">
-            <div style="
-                font-size:.65rem; letter-spacing:.15em; text-transform:uppercase;
-                color:{color}; margin-bottom:8px;
-                font-family:'JetBrains Mono',monospace;
-            ">{mark} {cat} ({len(subset)})</div>
+            <div style="font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
+                        color:{color};margin-bottom:8px;font-family:'Courier New',monospace;">
+                {icon} {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>"""
+    <div style="background:#0d1117;border:1px solid #21262d;border-radius:10px;
+                padding:18px;max-height:460px;overflow-y:auto;">
+        {sections}
+    </div>"""
+
+def make_error_html(msg):
+    return f"""
+    <div style="background:#1a0a0a;border:1px solid #f43f5e55;border-left:3px solid #f43f5e;
+                border-radius:10px;padding:20px;font-family:'Courier New',monospace;
+                color:#f43f5e;font-size:.85rem;line-height:1.7;">
+        <strong>❌ Error</strong><br><br>{msg}
+    </div>"""
+
+def make_info_html(msg, color="#facc15"):
+    return f"""
+    <div style="background:#0d1117;border:1px solid {color}44;border-left:3px solid {color};
+                border-radius:10px;padding:20px;font-family:'Courier New',monospace;
+                color:{color};font-size:.85rem;">
+        {msg}
+    </div>"""
 
-# ──────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────
 # MAIN PIPELINE
-# ──────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────
 def run_pipeline(email, password, groq_key, limit, progress=gr.Progress(track_tqdm=True)):
+
+    # ── Validation ──
     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=""), gr.update(value=""), None, None,
-        )
+        yield make_error_html("Please fill in <strong>all three</strong> credential fields."), \
+              "", "", None, None
         return
 
+    # ── Init ──
     client = OpenAI(api_key=groq_key.strip(), base_url="https://api.groq.com/openai/v1")
     lk     = load_learnings()
 
-    yield (
-        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,
-    )
+    yield make_info_html("🔌 Connecting to Gmail IMAP…"), "", "", None, None
 
+    # ── Fetch ──
     try:
         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 connection failed: {e}<br><br>Check your email address and App Password.</div>"),
-            gr.update(value=""), gr.update(value=""), None, None,
-        )
+        tb = traceback.format_exc()
+        print(f"[FETCH ERROR]\n{tb}")
+        # Show a friendly + technical message
+        err_detail = str(e)
+        tip = ""
+        if "AUTHENTICATIONFAILED" in err_detail or "Invalid credentials" in err_detail:
+            tip = "<br><br><strong>Fix:</strong> Wrong email or App Password. Make sure you generated an App Password (not your real password) at <a href='https://myaccount.google.com/apppasswords' style='color:#58a6ff;'>myaccount.google.com/apppasswords</a>."
+        elif "IMAP access is disabled" in err_detail:
+            tip = "<br><br><strong>Fix:</strong> Enable IMAP in Gmail → Settings → See all settings → Forwarding and POP/IMAP → Enable IMAP."
+        elif "timed out" in err_detail.lower() or "connect" in err_detail.lower():
+            tip = "<br><br><strong>Fix:</strong> Network timeout — HF Spaces may be blocking outbound IMAP (port 993). Try running locally instead."
+        yield make_error_html(f"{err_detail}{tip}"), "", "", None, None
         return
 
     if not emails:
-        yield (
-            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,
-        )
+        yield make_info_html("⚠️ No emails found in any folder.", "#f97316"), "", "", None, None
         return
 
+    # ── Classify ──
     records, log_items = [], []
     total = len(emails)
 
@@ -411,28 +392,34 @@ def run_pipeline(email, password, groq_key, limit, progress=gr.Progress(track_tq
             "confidence": rec["Confidence"],
         })
 
+        # stream update every 5 emails
         if (i + 1) % 5 == 0 or (i + 1) == total:
-            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_p = pd.DataFrame(records)
+            yield (
+                make_summary_cards(df_p["Category"].value_counts()),
+                make_log_html(log_items),
+                "",
+                None, None,
+            )
 
+    # ── Save & Final ──
     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)
+    print(f"[DONE] {len(records)} emails classified, {len(tracker)} unique jobs tracked")
 
     yield (
-        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)),
+        make_summary_cards(tracker["Category"].value_counts()),
+        make_log_html(log_items),
+        make_pipeline_html(tracker),
         "/tmp/email_log.csv",
         "/tmp/job_tracker.csv",
     )
 
-# ──────────────────────────────────────────────
-# CSS
-# ──────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────
+# GRADIO 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');
 
@@ -444,17 +431,29 @@ 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; }
+.tab-nav button {
+    color: #8b949e !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: .85rem !important;
+}
+.tab-nav button.selected {
+    color: #e6edf3 !important;
+    border-bottom: 2px solid #58a6ff !important;
+    background: transparent !important;
+}
 
+/* Labels */
 label > span {
     color: #8b949e !important;
-    font-size: .7rem !important;
+    font-size: .68rem !important;
     letter-spacing: .12em !important;
     text-transform: uppercase !important;
     font-family: 'JetBrains Mono', monospace !important;
 }
+
+/* Inputs */
 input[type=text], input[type=password], textarea {
     background: #0d1117 !important;
     border: 1px solid #30363d !important;
@@ -462,25 +461,27 @@ input[type=text], input[type=password], textarea {
     border-radius: 6px !important;
     font-family: 'DM Sans', sans-serif !important;
     font-size: .88rem !important;
-    transition: border-color .2s !important;
 }
 input[type=text]:focus, input[type=password]:focus {
     border-color: #58a6ff !important;
     box-shadow: 0 0 0 3px #58a6ff18 !important;
 }
+
+/* Slider */
 input[type=range] { accent-color: #58a6ff !important; }
 
+/* Buttons */
 .gr-button {
     font-family: 'DM Sans', sans-serif !important;
     border-radius: 6px !important;
     font-weight: 600 !important;
-    transition: all .2s !important;
+    font-size: .88rem !important;
+    transition: all .18s !important;
 }
 .gr-button-primary {
     background: #238636 !important;
     border: 1px solid #2ea043 !important;
     color: #fff !important;
-    letter-spacing: .04em !important;
 }
 .gr-button-primary:hover {
     background: #2ea043 !important;
@@ -492,16 +493,18 @@ input[type=range] { accent-color: #58a6ff !important; }
     border: 1px solid #30363d !important;
     color: #c9d1d9 !important;
 }
+.gr-button-secondary:hover { background: #30363d !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;
     font-family: 'JetBrains Mono', monospace !important;
     font-size: .78rem !important;
 }
@@ -514,37 +517,43 @@ 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; }
 
-::-webkit-scrollbar { width: 6px; height: 6px; }
+/* Scrollbar */
+::-webkit-scrollbar { width: 5px; height: 5px; }
 ::-webkit-scrollbar-track { background: #0d1117; }
 ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: #484f58; }
 """
 
-# ──────────────────────────────────────────────
-# HTML PARTIALS
-# ──────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────
+# STATIC HTML BLOCKS
+# ──────────────────────────────────────────────────────────
 HEADER_HTML = """
-<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:10px; padding:10px 14px; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:1.1rem; color:#fff; letter-spacing:.05em;">
-            JT
-        </div>
+<div style="padding:28px 0 22px;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 15px;font-size:1.5rem;line-height:1;">📬</div>
         <div>
-            <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 style="font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;
+                        color:#58a6ff;font-family:'JetBrains Mono',monospace;margin-bottom:4px;">
+                LLaMA-3 · Groq · Self-Learning · Gradio
             </div>
-            <h1 style="font-size:1.8rem; font-weight:800; color:#e6edf3; margin:0; letter-spacing:-.03em; line-height:1;">
+            <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 style="color:#8b949e;margin:5px 0 0;font-size:.86rem;font-weight:300;">
+                Fetch → classify → 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:.62rem; padding:3px 10px; border-radius:4px; font-weight:700; font-family:'JetBrains Mono',monospace; letter-spacing:.05em;">
-                v2.1 GRADIO
+        <div style="margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:6px;">
+            <span style="background:#238636;color:#fff;font-size:.62rem;padding:3px 10px;
+                         border-radius:4px;font-weight:700;font-family:'JetBrains Mono',monospace;">
+                v2.1
             </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;">
+            <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>
@@ -553,154 +562,164 @@ HEADER_HTML = """
 """
 
 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 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.8;margin-top:8px;">
+    <strong style="color:#c9d1d9;">🔐 Setup Help</strong><br>
+    • Use a <strong style="color:#e6edf3;">Gmail App Password</strong> — not your real password<br>
+    • Requires 2FA ON →
+      <a href="https://myaccount.google.com/apppasswords" target="_blank" style="color:#58a6ff;">
+        Generate App Password
+      </a><br>
+    • Enable IMAP: Gmail → Settings → Forwarding &amp; POP/IMAP → Enable IMAP<br>
+    • Free Groq 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>
 </div>
 """
 
-FOOTER_HTML = """
-<div style="
-    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;
-">
-    Designed &amp; Developed by <span style="color:#8b949e;">Kajal Dadas</span>
+GUIDE_HTML = """
+<div style="max-width:700px;font-family:'DM Sans',sans-serif;line-height:1.8;padding:8px 0;">
+
+<h2 style="color:#e6edf3;font-size:1.05rem;margin-bottom:6px;">🚀 Quick Start</h2>
+<ol style="color:#8b949e;font-size:.88rem;padding-left:20px;">
+  <li>Enable <strong style="color:#c9d1d9;">2-Step Verification</strong> 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 — enter without spaces)</li>
+  <li>Enable IMAP: Gmail → ⚙️ Settings → See all settings → Forwarding and POP/IMAP → Enable IMAP → Save</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 <strong style="color:#c9d1d9;">Run Agent</strong> tab and click Run</li>
+</ol>
+
+<h2 style="color:#e6edf3;font-size:1.05rem;margin-top:22px;margin-bottom:10px;">🏷️ 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;">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, 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, Shortlisted</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, Not a fit</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, Priority</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, Notification, System Update</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, Free, Subscribe</td></tr>
+  </tbody>
+</table>
+
+<h2 style="color:#e6edf3;font-size:1.05rem;margin-top:22px;margin-bottom:4px;">🧠 Self-Learning</h2>
+<p style="color:#8b949e;font-size:.88rem;">
+Every classification with &gt;80% confidence teaches the system new keywords for that category,
+saved to <code style="color:#58a6ff;background:#161b22;padding:1px 6px;border-radius:3px;">/tmp/learned_keywords.json</code>.
+Accuracy improves the more emails you process.
+</p>
+
+<h2 style="color:#e6edf3;font-size:1.05rem;margin-top:22px;margin-bottom:4px;">🛠️ Troubleshooting</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;">Error</th>
+      <th style="padding:8px 12px;color:#8b949e;text-align:left;border:1px solid #21262d;">Fix</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr><td style="padding:8px 12px;color:#f43f5e;border:1px solid #21262d;">AUTHENTICATIONFAILED</td><td style="padding:8px 12px;color:#8b949e;border:1px solid #21262d;">Wrong App Password or email — regenerate App Password</td></tr>
+    <tr><td style="padding:8px 12px;color:#f43f5e;border:1px solid #21262d;">IMAP access disabled</td><td style="padding:8px 12px;color:#8b949e;border:1px solid #21262d;">Enable IMAP in Gmail settings (step 3 above)</td></tr>
+    <tr><td style="padding:8px 12px;color:#f43f5e;border:1px solid #21262d;">Connection timeout</td><td style="padding:8px 12px;color:#8b949e;border:1px solid #21262d;">HF Spaces may block port 993 — run locally with python app.py</td></tr>
+    <tr><td style="padding:8px 12px;color:#f43f5e;border:1px solid #21262d;">Groq error</td><td style="padding:8px 12px;color:#8b949e;border:1px solid #21262d;">Check API key at console.groq.com — falls back to rule-based</td></tr>
+  </tbody>
+</table>
 </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:.8rem;">
-    No data yet &mdash; 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;letter-spacing:.05em;">
+    ░░ no data yet — run the agent ░░
 </div>"""
 
-def section_label(text, color="#58a6ff"):
-    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>'
-    )
+def sec(label, color="#58a6ff"):
+    return (f'<div style="font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;'
+            f'color:{color};font-family:\'JetBrains Mono\',monospace;'
+            f'margin-bottom:8px;margin-top:2px;">{label}</div>')
 
-# ──────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────
 # GRADIO LAYOUT
-# ──────────────────────────────────────────────
-with gr.Blocks(title="Email Job Tracker") as demo:
+# ──────────────────────────────────────────────────────────
+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):
 
                 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_...")
-                    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")
+                    gr.HTML(sec("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_...")
+                    gr.HTML(sec("Settings", "#8b949e"))
+                    limit_in  = gr.Slider(label="Emails per folder",
+                                          minimum=5, maximum=50, value=20, step=5)
+                    with gr.Row():
+                        run_btn   = gr.Button("⚡ Run Agent",    variant="primary",   size="lg")
+                        clear_btn = gr.Button("✕ Clear",         variant="secondary", size="lg")
                     gr.HTML(CRED_HELP)
 
                 with gr.Column(scale=2):
-                    gr.HTML(section_label("Category Summary"))
+                    gr.HTML(sec("Summary"))
                     summary_out = gr.HTML(value=EMPTY_LOG)
-                    gr.HTML(section_label("Live Classification Log"))
+                    gr.HTML(sec("Live Log"))
                     log_out = gr.HTML(value=EMPTY_LOG)
 
-            gr.HTML(section_label("Job Pipeline View"))
+            gr.HTML(sec("Pipeline View"))
             pipeline_out = gr.HTML(value=EMPTY_LOG)
 
+            gr.HTML(sec("Downloads", "#8b949e"))
             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")
+                file_tracker = gr.File(label="📊 job_tracker.csv")
+
+        # ══ TAB 2: TRACKER TABLE ══════════════════════
+        with gr.TabItem("📊 Tracker Table"):
+            gr.HTML(sec("Latest status per company / role"))
             table_out = gr.Dataframe(
-                headers=["Company", "Role", "Category", "Round", "Confidence", "Subject"],
+                headers=["Company","Role","Category","Round","Confidence","Subject"],
                 interactive=False,
                 wrap=False,
             )
 
-        # ── 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.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 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 Run Agent tab and click Run Agent</li>
-</ol>
-
-<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;">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, 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.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;">
-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>
-""")
-
-    gr.HTML(FOOTER_HTML)
+        # ══ TAB 3: GUIDE ══════════════════════════════
+        with gr.TabItem("📖 Guide"):
+            gr.HTML(GUIDE_HTML)
 
-    # ── EVENT HANDLERS ────────────────────────
+    # ── EVENT HANDLERS ──────────────────────────────
     def do_run(email, password, groq_key, limit, progress=gr.Progress(track_tqdm=True)):
-        last_yield = None
+        last = None
         for result in run_pipeline(email, password, groq_key, limit, progress):
-            last_yield = result
+            last = result
             yield result[0], result[1], result[2], result[3], result[4], gr.update()
 
-        if last_yield is None:
+        if last is None:
             return
 
+        # populate tracker table
         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]
-            yield last_yield[0], last_yield[1], last_yield[2], last_yield[3], last_yield[4], df[cols]
+            cols = [c for c in ["Company","Role","Category","Round","Confidence","Subject"]
+                    if c in df.columns]
+            yield last[0], last[1], last[2], last[3], last[4], df[cols]
         except Exception:
-            yield last_yield[0], last_yield[1], last_yield[2], last_yield[3], last_yield[4], gr.update()
+            yield last[0], last[1], last[2], last[3], last[4], gr.update()
 
     def do_clear():
         return EMPTY_LOG, EMPTY_LOG, EMPTY_LOG, None, None, None
@@ -716,4 +735,4 @@ never blocks the others. INBOX is always fetched first and is typically the fast
     )
 
 if __name__ == "__main__":
-    demo.launch(css=CSS, ssr_mode=False)
+    demo.launch(ssr_mode=False)