Update app/gradio_ui.py

app/gradio_ui.py

@@ -1,251 +1,149 @@
+"""
+gradio_ui.py  —  inline-styles only, no CSS class dependencies
+Works reliably on HF Spaces where Gradio scopes/blocks external CSS.
+"""
+
 import uuid
 import requests
 import gradio as gr
 
-# ─── Config ─────────────────────────────────────────────────────
 BASE_URL = "https://vinit006-emailagentwithmemory.hf.space"
 
-
-# ─── Theme: dark navy / electric-blue, matching the HTML frontend ─
-THEME_CSS = """
-:root {
-    --bg:        #0D1117;
-    --surface:   #161B22;
-    --surface2:  #1C2333;
-    --border:    #30363D;
-    --accent:    #58A6FF;
-    --accent-dim:#1a2738;
-    --success:   #3FB950;
-    --success-dim: #122a18;
-    --warning:   #D29922;
-    --warning-dim: #2c2310;
-    --danger:    #F85149;
-    --danger-dim: #2c1414;
-    --text:      #E6EDF3;
-    --text-muted:#8B949E;
-    --text-dim:  #6E7681;
-}
-
-.gradio-container {
-    background: var(--bg) !important;
-    color: var(--text) !important;
-    font-family: 'Inter', -apple-system, sans-serif !important;
-}
-
-/* Headings / markdown */
-.gradio-container h1, .gradio-container h2, .gradio-container h3 {
-    color: var(--text) !important;
-    letter-spacing: -0.02em;
-}
-.gradio-container p, .gradio-container label span {
-    color: var(--text-muted) !important;
-}
-
-/* Cards / blocks */
-.gr-block, .gr-box, .block {
-    background: var(--surface) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 12px !important;
-}
-
-/* Inputs */
-textarea, input[type="text"], input[type="email"] {
-    background: var(--bg) !important;
-    border: 1px solid var(--border) !important;
-    color: var(--text) !important;
-    border-radius: 8px !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 13px !important;
-}
-textarea:focus, input:focus {
-    border-color: var(--accent) !important;
-    box-shadow: 0 0 0 3px rgba(88,166,255,0.1) !important;
-}
-
-/* Buttons */
-button {
-    border-radius: 8px !important;
-    font-weight: 500 !important;
-    border: none !important;
-    transition: all 0.15s !important;
-}
-.primary, button.primary {
-    background: var(--accent) !important;
-    color: #0D1117 !important;
-}
-.primary:hover { background: #79BAFF !important; }
-
-#approve-btn button, #approve-btn {
-    background: var(--success) !important;
-    color: #0D1117 !important;
-}
-#approve-btn button:hover { background: #56D364 !important; }
-
-#reject-btn button, #reject-btn {
-    background: var(--danger) !important;
-    color: #fff !important;
-}
-#reject-btn button:hover { background: #FF7B72 !important; }
-
-#changes-btn button, #changes-btn {
-    background: var(--warning) !important;
-    color: #0D1117 !important;
+# Colors as Python constants — used in inline styles throughout
+C = {
+    "bg":           "#0D1117",
+    "surface":      "#161B22",
+    "surface2":     "#1C2333",
+    "border":       "#30363D",
+    "accent":       "#58A6FF",
+    "accent_dim":   "#1a2738",
+    "success":      "#3FB950",
+    "success_dim":  "#122a18",
+    "warning":      "#D29922",
+    "warning_dim":  "#2c2310",
+    "danger":       "#F85149",
+    "danger_dim":   "#2c1414",
+    "text":         "#E6EDF3",
+    "muted":        "#8B949E",
+    "dim":          "#6E7681",
 }
-#changes-btn button:hover { background: #E3AD40 !important; }
 
-#send-btn button {
-    background: var(--success) !important;
-    color: #0D1117 !important;
-}
-
-/* Pipeline status pills */
-.pipeline-pill {
-    display: inline-block;
-    padding: 4px 12px;
-    border-radius: 20px;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    margin-right: 6px;
-    border: 1px solid var(--border);
-    color: var(--text-dim);
-    background: var(--surface2);
-}
-.pipeline-pill.active {
-    border-color: var(--accent);
-    color: var(--accent);
-    background: var(--accent-dim);
-}
-.pipeline-pill.done {
-    border-color: var(--success);
-    color: var(--success);
-    background: var(--success-dim);
-}
-
-/* Triage badge */
-.triage-badge {
-    display: inline-block;
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-    padding: 4px 10px;
-    border-radius: 6px;
-    margin-top: 6px;
-}
-.triage-follow-up {
-    background: var(--warning-dim);
-    color: var(--warning);
-    border: 1px solid var(--warning);
-}
-.triage-no-action {
-    background: var(--success-dim);
-    color: var(--success);
-    border: 1px solid var(--success);
-}
-.triage-other {
-    background: var(--accent-dim);
-    color: var(--accent);
-    border: 1px solid var(--accent);
-}
-
-/* Draft display card */
-.draft-card {
-    background: var(--surface) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 12px !important;
-    padding: 18px !important;
-}
-.draft-meta-label {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: 10px;
-    letter-spacing: 0.1em;
-    color: var(--text-dim);
-    text-transform: uppercase;
-}
-
-/* Status / error text */
-.status-ok { color: var(--success) !important; }
-.status-err { color: var(--danger) !important; }
-"""
-
-
-# ─── Helpers ────────────────────────────────────────────────────
-def _gen_thread_id() -> str:
-    return str(uuid.uuid4())[:8]
+# ─── HTML builders (all inline styles) ──────────────────────────
+
+def _pill(label: str, state: str) -> str:
+    """state: 'idle' | 'active' | 'done'"""
+    if state == "active":
+        bg, border, color = C["accent_dim"], C["accent"], C["accent"]
+    elif state == "done":
+        bg, border, color = C["success_dim"], C["success"], C["success"]
+    else:
+        bg, border, color = C["surface2"], C["border"], C["dim"]
+
+    return (
+        f'<span style="'
+        f'display:inline-block;padding:4px 14px;border-radius:20px;'
+        f'font-family:monospace;font-size:11px;font-weight:700;'
+        f'letter-spacing:0.06em;margin-right:8px;'
+        f'border:1px solid {border};color:{color};background:{bg};">'
+        f'{label}</span>'
+    )
 
 
 def _pipeline_html(active_step: str, done_steps=None) -> str:
-    """Render the TRIAGE → DRAFT → REVIEW → SEND pill strip."""
     done_steps = done_steps or []
     steps = ["TRIAGE", "DRAFT", "REVIEW", "SEND"]
-    html = ""
+    pills = ""
     for s in steps:
-        cls = "pipeline-pill"
         if s == active_step:
-            cls += " active"
+            pills += _pill(s, "active")
         elif s in done_steps:
-            cls += " done"
-        html += f'<span class="{cls}">{s}</span>'
-    return html
+            pills += _pill(s, "done")
+        else:
+            pills += _pill(s, "idle")
+    return f'<div style="padding:10px 0 6px;">{pills}</div>'
 
 
 def _triage_badge_html(label: str) -> str:
     if not label:
         return ""
-    cls = "triage-other"
     if label == "FOLLOW_UP_REQUIRED":
-        cls = "triage-follow-up"
+        bg, border, color = C["warning_dim"], C["warning"], C["warning"]
     elif label == "NO_ACTION":
-        cls = "triage-no-action"
-    return f'<span class="triage-badge {cls}">{label}</span>'
+        bg, border, color = C["success_dim"], C["success"], C["success"]
+    else:
+        bg, border, color = C["accent_dim"], C["accent"], C["accent"]
+
+    return (
+        f'<div style="margin-top:6px;">'
+        f'<span style="display:inline-block;font-family:monospace;font-size:12px;'
+        f'font-weight:700;letter-spacing:0.05em;padding:5px 14px;border-radius:6px;'
+        f'background:{bg};color:{color};border:1px solid {border};">'
+        f'{label}</span></div>'
+    )
 
 
 def _draft_card_html(to, subject, body) -> str:
-    to = to or "—"
+    to      = to or "—"
     subject = subject or "—"
-    body = (body or "—").replace("\n", "<br>")
+    body    = (body or "—").replace("\n", "<br>")
     return f"""
-    <div class="draft-card">
-        <div style="display:flex; gap:32px; margin-bottom:14px;">
+    <div style="background:{C['surface']};border:1px solid {C['border']};
+                border-radius:12px;padding:20px;margin-top:8px;">
+        <div style="display:flex;gap:40px;margin-bottom:14px;flex-wrap:wrap;">
             <div>
-                <div class="draft-meta-label">TO</div>
-                <div style="font-family:'JetBrains Mono',monospace; font-size:13px;">{to}</div>
+                <div style="font-family:monospace;font-size:10px;letter-spacing:0.1em;
+                            color:{C['dim']};text-transform:uppercase;margin-bottom:4px;">TO</div>
+                <div style="font-family:monospace;font-size:13px;color:{C['text']};">{to}</div>
             </div>
             <div>
-                <div class="draft-meta-label">SUBJECT</div>
-                <div style="font-size:13px;">{subject}</div>
+                <div style="font-family:monospace;font-size:10px;letter-spacing:0.1em;
+                            color:{C['dim']};text-transform:uppercase;margin-bottom:4px;">SUBJECT</div>
+                <div style="font-size:13px;color:{C['text']};">{subject}</div>
             </div>
         </div>
-        <div style="height:1px; background:var(--border); margin-bottom:14px;"></div>
-        <div style="font-size:13px; line-height:1.7; color:var(--text-muted);">{body}</div>
+        <div style="height:1px;background:{C['border']};margin-bottom:14px;"></div>
+        <div style="font-size:13px;line-height:1.75;color:{C['muted']};">{body}</div>
+    </div>
+    """
+
+
+def _result_card_html(icon: str, title: str, detail: str, badge_html: str = "") -> str:
+    return f"""
+    <div style="background:{C['surface']};border:1px solid {C['border']};
+                border-radius:12px;padding:40px 32px;text-align:center;margin-top:8px;">
+        <div style="font-size:44px;margin-bottom:14px;">{icon}</div>
+        <div style="font-size:18px;font-weight:600;color:{C['text']};margin-bottom:8px;">{title}</div>
+        <div style="font-size:13px;color:{C['muted']};margin-bottom:12px;">{detail}</div>
+        {badge_html}
     </div>
     """
 
 
-# ─── API calls (talk to this same backend's endpoints) ──────────
-def api_get_user_data(user_email: str):
+def _status_html(msg: str, ok: bool) -> str:
+    color = C["success"] if ok else C["danger"]
+    icon  = "✓" if ok else "✕"
+    return (
+        f'<div style="margin-top:6px;font-size:13px;color:{color};font-weight:500;">'
+        f'{icon} {msg}</div>'
+    )
+
+
+# ─── API calls ──────────────────────────────────────────────────
+def api_get_user_data(user_email):
     res = requests.post(f"{BASE_URL}/get-user-data", params={"user_email": user_email})
     res.raise_for_status()
     return res.json()
 
-
 def api_process_email(token, thread_id, sender_email, subject, body):
     res = requests.post(
         f"{BASE_URL}/process-email",
         headers={"Authorization": f"Bearer {token}"},
-        json={
-            "thread_id": thread_id,
-            "sender_email_id": sender_email,
-            "sender_subject": subject,
-            "sender_email_body": body,
-        },
+        json={"thread_id": thread_id, "sender_email_id": sender_email,
+              "sender_subject": subject, "sender_email_body": body},
     )
     res.raise_for_status()
     return res.json()
 
-
 def api_review_action(token, thread_id, status, feedback=None):
     payload = {"thread_id": thread_id, "status": status}
     if feedback:
@@ -258,13 +156,7 @@ def api_review_action(token, thread_id, status, feedback=None):
     res.raise_for_status()
     return res.json()
 
-
 def api_send_email(token, thread_id, command_text):
-    """
-    `command_text` is a short instruction for the agent about WHEN/HOW
-    to send the already-approved draft — e.g. "send now", "send later
-    today", "hold until tomorrow morning". It does NOT edit draft content.
-    """
     res = requests.post(
         f"{BASE_URL}/send_email",
         headers={"Authorization": f"Bearer {token}"},
@@ -274,148 +166,133 @@ def api_send_email(token, thread_id, command_text):
     return res.json()
 
 
-# ─── Gradio App ─────────────────────────────────────────────────
+# ─── Build UI ────────────────────────────────────────────────────
 def build_demo() -> gr.Blocks:
-    with gr.Blocks(css=THEME_CSS, title="Email Agent — AI Triage & Reply") as demo:
+    with gr.Blocks(title="Email Agent — AI Triage & Reply") as demo:
 
-        # ─── Session state ──────────────────────────────────────
-        token_state = gr.State(None)
-        thread_state = gr.State(_gen_thread_id())
-        triage_label_state = gr.State(None)
+        token_state  = gr.State(None)
+        thread_state = gr.State(None)
 
         gr.Markdown("# ⚡ Email Agent\n_AI-powered triage, drafting & sending — with a human in the loop._")
 
-        # ─── Auth row ────────────────────────────────────────────
+        # ── Auth ─────────────────────────────────────────────────
         with gr.Group(visible=True) as auth_group:
             gr.Markdown("### Sign In")
             with gr.Row():
                 email_input = gr.Textbox(label="Your Email", placeholder="you@example.com", scale=3)
-                login_btn = gr.Button("Sign In →", variant="primary", scale=1)
-            auth_status = gr.Markdown("")
+                login_btn   = gr.Button("Sign In →", variant="primary", scale=1)
+            auth_status = gr.HTML("")
 
-        # ─── Main workspace (hidden until signed in) ─────────────
+        # ── Workspace ────────────────────────────────────────────
         with gr.Group(visible=False) as workspace_group:
+
+            # Session bar
             with gr.Row():
-                user_pill = gr.Markdown("")
+                user_pill = gr.HTML("")
                 with gr.Row():
-                    thread_display = gr.Textbox(label="Thread ID", interactive=True, scale=3)
-                    new_thread_btn = gr.Button("↺ New Thread", scale=1)
-
-            pipeline_html = gr.HTML(_pipeline_html("TRIAGE"))
-            triage_badge_html = gr.HTML("")
+                    thread_display  = gr.Textbox(label="Thread ID", interactive=True, scale=3)
+                    new_thread_btn  = gr.Button("↺ New Thread", scale=1)
 
+            pipeline_disp     = gr.HTML(_pipeline_html("TRIAGE"))
+            triage_badge_disp = gr.HTML("")
             gr.Markdown("---")
 
-            # ─── Step 1: Process Email ────────────────────────────
+            # Step 1
             with gr.Group(visible=True) as process_group:
                 gr.Markdown("### 📥 Incoming Email")
                 with gr.Row():
-                    sender_email = gr.Textbox(label="From (sender email)", placeholder="sender@company.com")
+                    sender_email   = gr.Textbox(label="From (sender email)", placeholder="sender@company.com")
                     sender_subject = gr.Textbox(label="Subject", placeholder="Email subject line")
-                sender_body = gr.Textbox(label="Email Body", lines=8, placeholder="Paste the full email body here…")
-                process_btn = gr.Button("⚡ Process Email", variant="primary")
-                process_status = gr.Markdown("")
+                sender_body    = gr.Textbox(label="Email Body", lines=8,
+                                            placeholder="Paste the full email body here…")
+                process_btn    = gr.Button("⚡ Process Email", variant="primary")
+                process_status = gr.HTML("")
 
-            # ─── Step 2: Review Draft ──────────────────────────────
+            # Step 2
             with gr.Group(visible=False) as review_group:
-                gr.Markdown("### ✍️ Review Draft\nThe agent has drafted a reply. Approve, request changes, or reject.")
+                gr.Markdown("### ✍️ Review Draft")
                 draft_html = gr.HTML("")
-
                 with gr.Row():
-                    approve_btn = gr.Button("✓ Approve & Finalize Draft", elem_id="approve-btn")
-                    changes_btn = gr.Button("↺ Request Changes", elem_id="changes-btn")
-                    reject_btn = gr.Button("✕ Reject", elem_id="reject-btn")
-
+                    approve_btn = gr.Button("✓ Approve & Finalize", variant="primary")
+                    changes_btn = gr.Button("↺ Request Changes")
+                    reject_btn  = gr.Button("✕ Reject")
                 with gr.Group(visible=False) as feedback_group:
-                    feedback_text = gr.Textbox(
-                        label="Feedback for agent",
-                        lines=4,
-                        placeholder="Tell the agent what to change in the draft…",
-                    )
-                    submit_feedback_btn = gr.Button("Submit Feedback & Redraft", elem_id="changes-btn")
+                    feedback_text       = gr.Textbox(label="Feedback for agent", lines=4,
+                                                     placeholder="Tell the agent what to change…")
+                    submit_feedback_btn = gr.Button("Submit Feedback & Redraft")
+                review_status = gr.HTML("")
 
-                review_status = gr.Markdown("")
-
-            # ─── Step 3: Send Email ────────────────────────────────
+            # Step 3
             with gr.Group(visible=False) as send_group:
                 gr.Markdown(
-                    "### 📨 Send Email\n"
-                    "Draft approved. The agent can only **draft** and **send** — "
-                    "it can't edit content here. Tell it **when/how to send** "
-                    "(e.g. *\"send now\"*, *\"send later today\"*, *\"hold off till tomorrow\"*)."
+                    "### 📨 Send Command\n"
+                    "Draft saved in Gmail. Give the agent a send command.\n\n"
+                    "> ℹ️ The agent can only **draft** and **send** — "
+                    "it cannot edit content here. This is a timing command only."
                 )
                 send_command = gr.Textbox(
                     label="Send Command",
-                    placeholder='e.g. "send now" / "send later" / "hold off until tomorrow"',
+                    placeholder='"send now"  /  "send later today"  /  "hold off until tomorrow"',
                 )
-                send_btn = gr.Button("📨 Send Email", elem_id="send-btn", variant="primary")
-                send_status = gr.Markdown("")
+                send_btn    = gr.Button("📨 Execute Send Command", variant="primary")
+                send_status = gr.HTML("")
 
-            # ─── Step 4: Result ─────────────────────────────────────
+            # Step 4
             with gr.Group(visible=False) as result_group:
-                result_html = gr.HTML("")
+                result_html   = gr.HTML("")
                 new_email_btn = gr.Button("Process Another Email", variant="primary")
 
-        # ══════════════════════════════════════════════════════════
-        # Callbacks
-        # ══════════════════════════════════════════════════════════
+        # ── on_load: fresh thread ID per browser session ─────────
+        def on_load():
+            tid = str(uuid.uuid4())[:8]
+            return tid, tid
+
+        demo.load(on_load, outputs=[thread_state, thread_display])
 
+        # ── Login ─────────────────────────────────────────────────
         def do_login(email):
             if not email or "@" not in email:
-                return (
-                    gr.update(), gr.update(), None, None,
-                    "<span class='status-err'>Enter a valid email address.</span>",
-                    gr.update(), "",
-                )
+                return (gr.update(), gr.update(), None,
+                        _status_html("Enter a valid email address.", False), "")
             try:
-                data = api_get_user_data(email)
+                data  = api_get_user_data(email)
                 token = data["token"]
-                pill_md = f"**Signed in as:** `{data['email']}`"
-                return (
-                    gr.update(visible=False),   # auth_group
-                    gr.update(visible=True),    # workspace_group
-                    token,                      # token_state
-                    data["user_id"],            # (kept in case needed)
-                    "",                         # auth_status
-                    gr.update(),                # placeholder
-                    pill_md,                    # user_pill
+                pill  = (
+                    f'<div style="background:{C["accent_dim"]};border:1px solid {C["accent"]};'
+                    f'border-radius:20px;padding:5px 14px;display:inline-block;'
+                    f'font-family:monospace;font-size:12px;color:{C["accent"]};">'
+                    f'Signed in as: {data["email"]}</div>'
                 )
+                return (gr.update(visible=False), gr.update(visible=True),
+                        token, "", pill)
             except Exception as e:
-                return (
-                    gr.update(), gr.update(), None, None,
-                    f"<span class='status-err'>Sign-in failed: {e}</span>",
-                    gr.update(), "",
-                )
+                return (gr.update(), gr.update(), None,
+                        _status_html(f"Sign-in failed: {e}", False), "")
 
         login_btn.click(
-            do_login,
-            inputs=[email_input],
-            outputs=[auth_group, workspace_group, token_state, gr.State(), auth_status, gr.State(), user_pill],
+            do_login, inputs=[email_input],
+            outputs=[auth_group, workspace_group, token_state, auth_status, user_pill],
         )
 
+        # ── Thread ────────────────────────────────────────────────
         def new_thread():
-            tid = _gen_thread_id()
+            tid = str(uuid.uuid4())[:8]
             return tid, tid
 
         new_thread_btn.click(new_thread, outputs=[thread_state, thread_display])
+        thread_display.change(lambda v: v, inputs=[thread_display], outputs=[thread_state])
 
-        def sync_thread_id(tid):
-            return tid
-
-        thread_display.change(sync_thread_id, inputs=[thread_display], outputs=[thread_state])
-
-        # ─── Process Email ──────────────────────────────────────
+        # ── Process Email ─────────────────────────────────────────
         def do_process(token, thread_id, s_email, s_subject, s_body):
             if not (s_email and s_subject and s_body):
                 return (
-                    gr.update(), gr.update(), gr.update(), None,
-                    "<span class='status-err'>Fill in sender email, subject, and body.</span>",
-                    _pipeline_html("TRIAGE"), "",
-                    gr.update(), gr.update(),
+                    gr.update(), gr.update(), gr.update(), gr.update(),
+                    _status_html("Fill in sender email, subject, and body.", False),
+                    _pipeline_html("TRIAGE"), "", "",
                 )
             try:
-                data = api_process_email(token, thread_id, s_email, s_subject, s_body)
-                label = data.get("triage_label")
+                data  = api_process_email(token, thread_id, s_email, s_subject, s_body)
+                label = data.get("triage_label", "")
                 badge = _triage_badge_html(label)
 
                 if data.get("status") == "needs_review":
@@ -424,175 +301,136 @@ def build_demo() -> gr.Blocks:
                         gr.update(visible=False),   # process_group
                         gr.update(visible=True),    # review_group
                         gr.update(visible=False),   # send_group
-                        label,                       # triage_label_state
-                        "",                           # process_status
+                        gr.update(visible=False),   # result_group
+                        "",
                         _pipeline_html("REVIEW", ["TRIAGE", "DRAFT"]),
                         badge,
                         _draft_card_html(draft.get("to"), draft.get("subject"), draft.get("body")),
-                        gr.update(visible=False),   # result_group
                     )
                 else:
-                    # No action needed — triage only, nothing to review/send
-                    detail = "No reply needed — the agent filed this email." if label == "NO_ACTION" else f"Triage complete. Label: {label}"
-                    result = f"""
-                    <div class="draft-card" style="text-align:center;">
-                        <div style="font-size:32px; margin-bottom:8px;">{'✅' if label == 'NO_ACTION' else '📋'}</div>
-                        <div style="font-size:16px; font-weight:600; margin-bottom:6px;">Triage Complete</div>
-                        <div style="color:var(--text-muted); font-size:13px; margin-bottom:10px;">{detail}</div>
-                        {badge}
-                    </div>
-                    """
+                    # No follow-up needed
+                    if label == "NO_ACTION":
+                        icon, title, detail = "✅", "No Action Needed", "The agent filed this email. No reply required."
+                    else:
+                        icon  = "🚫"
+                        title = "Quarantined / No Reply"
+                        detail = f"The agent decided no reply is needed for this email."
+
+                    card = _result_card_html(icon, title, detail, badge)
                     return (
                         gr.update(visible=False),
                         gr.update(visible=False),
                         gr.update(visible=False),
-                        label,
+                        gr.update(visible=True, value=card),
                         "",
-                        _pipeline_html("SEND", ["TRIAGE", "DRAFT", "REVIEW"]),
+                        _pipeline_html("TRIAGE", ["TRIAGE"]),
                         badge,
                         "",
-                        gr.update(visible=True, value=result),
                     )
             except Exception as e:
                 return (
-                    gr.update(), gr.update(), gr.update(), None,
-                    f"<span class='status-err'>Error processing email: {e}</span>",
-                    _pipeline_html("TRIAGE"), "", gr.update(), gr.update(),
+                    gr.update(), gr.update(), gr.update(), gr.update(),
+                    _status_html(f"Error: {e}", False),
+                    _pipeline_html("TRIAGE"), "", "",
                 )
 
         process_btn.click(
             do_process,
             inputs=[token_state, thread_state, sender_email, sender_subject, sender_body],
-            outputs=[
-                process_group, review_group, send_group, triage_label_state,
-                process_status, pipeline_html, triage_badge_html, draft_html, result_group,
-            ],
+            outputs=[process_group, review_group, send_group, result_group,
+                     process_status, pipeline_disp, triage_badge_disp, draft_html],
         )
 
-        # ─── Review: toggle feedback box ────────────────────────
-        def toggle_feedback():
-            return gr.update(visible=True)
-
-        changes_btn.click(toggle_feedback, outputs=[feedback_group])
+        # ── Review ────────────────────────────────────────────────
+        changes_btn.click(lambda: gr.update(visible=True), outputs=[feedback_group])
 
-        # ─── Review: approve / reject / submit feedback ─────────
         def do_review(token, thread_id, status, feedback):
             try:
                 data = api_review_action(token, thread_id, status, feedback)
-
                 if data.get("status") == "needs_review":
-                    # Redrafted — show new draft, stay on review step
                     draft = data.get("email_draft", {})
                     return (
-                        gr.update(visible=True),     # review_group
-                        gr.update(visible=False),    # send_group
+                        gr.update(visible=True), gr.update(visible=False),
                         _draft_card_html(draft.get("to"), draft.get("subject"), draft.get("body")),
-                        gr.update(visible=False),    # feedback_group (collapse after redraft)
-                        "",                            # feedback_text clear
-                        "<span class='status-ok'>Agent redrafted — review the new version.</span>",
+                        gr.update(visible=False), "",
+                        _status_html("Agent redrafted — review the new version.", True),
                         _pipeline_html("REVIEW", ["TRIAGE", "DRAFT"]),
                     )
                 elif data.get("draft_id"):
                     return (
-                        gr.update(visible=False),    # review_group
-                        gr.update(visible=True),     # send_group
-                        gr.update(),
-                        gr.update(visible=False),
-                        "",
-                        "<span class='status-ok'>Draft approved! Ready to send.</span>",
+                        gr.update(visible=False), gr.update(visible=True),
+                        gr.update(), gr.update(visible=False), "",
+                        _status_html("Draft approved — now give a send command.", True),
                         _pipeline_html("SEND", ["TRIAGE", "DRAFT", "REVIEW"]),
                     )
                 else:
                     return (
-                        gr.update(visible=False), gr.update(visible=True), gr.update(),
-                        gr.update(visible=False), "", "", _pipeline_html("SEND", ["TRIAGE", "DRAFT", "REVIEW"]),
+                        gr.update(visible=False), gr.update(visible=True),
+                        gr.update(), gr.update(visible=False), "", "",
+                        _pipeline_html("SEND", ["TRIAGE", "DRAFT", "REVIEW"]),
                     )
             except Exception as e:
                 return (
                     gr.update(), gr.update(), gr.update(), gr.update(), gr.update(),
-                    f"<span class='status-err'>Review action failed: {e}</span>", gr.update(),
+                    _status_html(f"Review failed: {e}", False), gr.update(),
                 )
 
-        approve_btn.click(
-            lambda token, tid: do_review(token, tid, "approved", None),
-            inputs=[token_state, thread_state],
-            outputs=[review_group, send_group, draft_html, feedback_group, feedback_text, review_status, pipeline_html],
-        )
-
-        reject_btn.click(
-            lambda token, tid: do_review(token, tid, "rejected", None),
-            inputs=[token_state, thread_state],
-            outputs=[review_group, send_group, draft_html, feedback_group, feedback_text, review_status, pipeline_html],
-        )
+        _rev_out = [review_group, send_group, draft_html,
+                    feedback_group, feedback_text, review_status, pipeline_disp]
 
-        submit_feedback_btn.click(
-            lambda token, tid, fb: do_review(token, tid, "rejected", fb),
-            inputs=[token_state, thread_state, feedback_text],
-            outputs=[review_group, send_group, draft_html, feedback_group, feedback_text, review_status, pipeline_html],
-        )
+        approve_btn.click(lambda t, tid: do_review(t, tid, "approved", None),
+                          inputs=[token_state, thread_state], outputs=_rev_out)
+        reject_btn.click(lambda t, tid: do_review(t, tid, "rejected", None),
+                         inputs=[token_state, thread_state], outputs=_rev_out)
+        submit_feedback_btn.click(lambda t, tid, fb: do_review(t, tid, "rejected", fb),
+                                  inputs=[token_state, thread_state, feedback_text],
+                                  outputs=_rev_out)
 
-        # ─── Send Email ──────────────────────────────────────────
+        # ── Send ──────────────────────────────────────────────────
         def do_send(token, thread_id, command_text):
             try:
-                data = api_send_email(token, thread_id, command_text)
-                msg_id = data.get("sent_message_id")
-                detail = f"Message ID: <code>{msg_id}</code>" if msg_id else "Email dispatched."
-                result = f"""
-                <div class="draft-card" style="text-align:center;">
-                    <div style="font-size:32px; margin-bottom:8px;">📨</div>
-                    <div style="font-size:16px; font-weight:600; margin-bottom:6px;">Email Sent</div>
-                    <div style="color:var(--text-muted); font-size:12px; font-family:'JetBrains Mono',monospace;">{detail}</div>
-                </div>
-                """
+                data   = api_send_email(token, thread_id, command_text)
+                msg_id = data.get("sent_message_id", "")
+                detail = f"Message ID: {msg_id}" if msg_id else "Email dispatched successfully."
+                card   = _result_card_html("📨", "Email Sent!", detail)
                 return (
-                    gr.update(visible=False),   # send_group
-                    gr.update(visible=True, value=result),  # result_group
+                    gr.update(visible=False),
+                    gr.update(visible=True, value=card),
                     "",
                     _pipeline_html("SEND", ["TRIAGE", "DRAFT", "REVIEW", "SEND"]),
                 )
             except Exception as e:
                 return (
                     gr.update(), gr.update(),
-                    f"<span class='status-err'>Failed to send: {e}</span>", gr.update(),
+                    _status_html(f"Send failed: {e}", False), gr.update(),
                 )
 
         send_btn.click(
             do_send,
             inputs=[token_state, thread_state, send_command],
-            outputs=[send_group, result_group, send_status, pipeline_html],
+            outputs=[send_group, result_group, send_status, pipeline_disp],
         )
 
-        # ─── Start New ───────────────────────────────────────────
+        # ── Reset ─────────────────────────────────────────────────
         def start_new():
-            new_tid = _gen_thread_id()
+            tid = str(uuid.uuid4())[:8]
             return (
-                new_tid, new_tid,
-                gr.update(visible=True),    # process_group
-                gr.update(visible=False),   # review_group
-                gr.update(visible=False),   # send_group
-                gr.update(visible=False),   # result_group
-                "", "", "",                  # clear sender fields
-                "", "",                      # clear send command, draft html
-                gr.update(visible=False), "",  # feedback group + text
+                tid, tid,
+                gr.update(visible=True), gr.update(visible=False),
+                gr.update(visible=False), gr.update(visible=False),
+                "", "", "", "", "",
+                gr.update(visible=False), "",
                 _pipeline_html("TRIAGE"), "",
             )
 
         new_email_btn.click(
             start_new,
-            outputs=[
-                thread_state, thread_display,
-                process_group, review_group, send_group, result_group,
-                sender_email, sender_subject, sender_body,
-                send_command, draft_html,
-                feedback_group, feedback_text,
-                pipeline_html, triage_badge_html,
-            ],
+            outputs=[thread_state, thread_display,
+                     process_group, review_group, send_group, result_group,
+                     sender_email, sender_subject, sender_body,
+                     send_command, draft_html,
+                     feedback_group, feedback_text,
+                     pipeline_disp, triage_badge_disp],
         )
 
-    return demo
-
-
-
-
-
-
+    return demo