Upload 13 files

app.py

@@ -1,290 +1,620 @@
 """
-Multi-Agent Autonomous Procurement System — FastAPI Backend
-Hugging Face Spaces entry-point (Docker SDK space)
-
-Endpoints:
-  POST /workflow/start          – launch research + analysis, pause at approval gate
-  GET  /workflow/{thread_id}    – inspect current state
-  POST /workflow/{thread_id}/decide  – approve or reject → resume graph → generate contract
-  GET  /health                  – liveness probe
+Multi-Agent Autonomous Procurement System — FastAPI + Auth
+Hugging Face Spaces Docker entry-point  ·  uvicorn app:app --host 0.0.0.0 --port 7860
+
+Auth:   POST /auth/login  →  Bearer JWT (HS256, 2-hour expiry)
+UI:     GET  /            →  full SPA (login + dashboard, no framework)
+API:    all /workflow/* routes require Authorization: Bearer <token>
 """
 
 import json
-import uuid
+import time
+import hmac
+import hashlib
+import base64
 from contextlib import asynccontextmanager
 from typing import Any
 
-from fastapi import FastAPI, HTTPException
+from fastapi import FastAPI, HTTPException, Depends, status
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import HTMLResponse
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
 from pydantic import BaseModel, Field
 
-from procurement_system import (
-    build_procurement_graph,
-    create_llm,
-    ProcurementWorkflowExecutor,
-)
-
-# ── App-level singletons (created once at startup) ───────────────────────────
+from procurement_system import build_procurement_graph, create_llm, ProcurementWorkflowExecutor
+
+# ── Auth config ────────────────────────────────────────────────────────────────
+_JWT_SECRET  = "procurement-demo-secret-2024"
+_JWT_EXPIRY  = 7200  # 2 hours
+
+# Dummy user store  { username: { password, role, display_name } }
+USERS = {
+    "admin":    {"password": "admin123",    "role": "admin",    "name": "Admin User"},
+    "buyer":    {"password": "buyer123",    "role": "buyer",    "name": "Sarah (Buyer)"},
+    "manager":  {"password": "manager123",  "role": "manager",  "name": "John (Manager)"},
+    "analyst":  {"password": "analyst123",  "role": "analyst",  "name": "Priya (Analyst)"},
+}
+
+# ── Preset test scenarios exposed to the UI ────────────────────────────────────
+TEST_CASES = [
+    {
+        "id": "tc1",
+        "label": "✅ Cloud – within budget",
+        "request": "We need enterprise cloud infrastructure with auto-scaling and 99.99% uptime SLA for our data pipeline.",
+        "budget": 5500,
+        "expected": "Analysis APPROVED → awaiting human approval",
+    },
+    {
+        "id": "tc2",
+        "label": "❌ Cloud – budget too low",
+        "request": "We need enterprise cloud infrastructure with auto-scaling and high availability SLA.",
+        "budget": 2000,
+        "expected": "Analysis REJECTED – all vendors exceed budget",
+    },
+    {
+        "id": "tc3",
+        "label": "✅ Software – within budget",
+        "request": "We need enterprise software licensing for 1500 users with cloud deployment.",
+        "budget": 3000,
+        "expected": "Analysis APPROVED → awaiting human approval",
+    },
+    {
+        "id": "tc4",
+        "label": "❌ Software – budget too low",
+        "request": "We need software licensing with custom integrations and quarterly updates.",
+        "budget": 1500,
+        "expected": "Analysis REJECTED – all vendors exceed budget",
+    },
+    {
+        "id": "tc5",
+        "label": "✅ Cloud – tight budget (cheapest vendor)",
+        "request": "We need basic cloud infrastructure with auto-scaling for our startup workloads.",
+        "budget": 3500,
+        "expected": "Analysis APPROVED (cheapest vendor selected)",
+    },
+]
+
+# ── Graph singleton ────────────────────────────────────────────────────────────
 _graph  = None
 _memory = None
 
-
 @asynccontextmanager
 async def lifespan(app: FastAPI):
     global _graph, _memory
-    llm             = create_llm()
+    llm = create_llm()
     _graph, _memory, _ = build_procurement_graph(llm)
-    print("Procurement graph compiled and ready.")
+    print("Procurement graph ready.")
     yield
 
+app = FastAPI(title="Procurement System", version="1.0.0", lifespan=lifespan)
+app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"])
 
-app = FastAPI(
-    title="Multi-Agent Procurement System",
-    description=(
-        "LangGraph multi-agent workflow: Vendor Research → Financial Analysis → "
-        "Human Approval Gate → Legal Contract Generation. "
-        "Powered by Groq (Llama-3.3-70b) and traced via LangSmith."
-    ),
-    version="1.0.0",
-    lifespan=lifespan,
-)
-
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-# ── In-memory executor registry (thread_id → executor) ───────────────────────
 _sessions: dict[str, ProcurementWorkflowExecutor] = {}
+_bearer   = HTTPBearer()
 
+# ── Minimal JWT (no external lib) ─────────────────────────────────────────────
 
-# ── Request / Response models ─────────────────────────────────────────────────
+def _b64(data: bytes) -> str:
+    return base64.urlsafe_b64encode(data).rstrip(b"=").decode()
 
-class StartRequest(BaseModel):
-    procurement_request: str = Field(
-        ...,
-        example="We need enterprise cloud infrastructure with auto-scaling and high availability SLA",
-    )
-    budget_limit: float = Field(..., gt=0, example=5500.0)
+def _sign(msg: str) -> str:
+    return _b64(hmac.new(_JWT_SECRET.encode(), msg.encode(), hashlib.sha256).digest())
 
+def create_token(username: str, role: str) -> str:
+    header  = _b64(json.dumps({"alg": "HS256", "typ": "JWT"}).encode())
+    payload = _b64(json.dumps({"sub": username, "role": role, "exp": int(time.time()) + _JWT_EXPIRY}).encode())
+    return f"{header}.{payload}.{_sign(header + '.' + payload)}"
 
-class DecideRequest(BaseModel):
-    approve: bool = Field(..., example=True)
+def verify_token(token: str) -> dict:
+    try:
+        h, p, sig = token.split(".")
+        if _sign(h + "." + p) != sig:
+            raise ValueError("bad sig")
+        claims = json.loads(base64.urlsafe_b64decode(p + "=="))
+        if claims["exp"] < int(time.time()):
+            raise ValueError("expired")
+        return claims
+    except Exception:
+        raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Invalid or expired token")
+
+def current_user(creds: HTTPAuthorizationCredentials = Depends(_bearer)) -> dict:
+    return verify_token(creds.credentials)
 
+# ── Helpers ────────────────────────────────────────────────────────────────────
 
-def _serialise_state(state: Any) -> dict:
-    """Convert LangGraph state (a dict-like StateSnapshot.values) to plain dict."""
+def _ser(state: Any) -> dict:
     return {k: v for k, v in dict(state).items()}
 
+def _fmt_events(events: list) -> list[dict]:
+    out = []
+    for e in events:
+        node = list(e.keys())[0]
+        updates = list(e.values())[0]
+        out.append({"node": node, "updates": {k: (v[:400] if isinstance(v, str) else v) for k, v in updates.items()}})
+    return out
+
+# ── Auth routes ────────────────────────────────────────────────────────────────
 
-def _format_events(events: list) -> list[dict]:
-    return [
-        {
-            "node": list(e.keys())[0],
-            "updates": {
-                k: (v[:500] if isinstance(v, str) else v)
-                for k, v in list(e.values())[0].items()
-            },
-        }
-        for e in events
-    ]
+class LoginRequest(BaseModel):
+    username: str
+    password: str
 
+@app.post("/auth/login", tags=["auth"])
+def login(body: LoginRequest):
+    user = USERS.get(body.username)
+    if not user or user["password"] != body.password:
+        raise HTTPException(status_code=401, detail="Invalid credentials")
+    token = create_token(body.username, user["role"])
+    return {"access_token": token, "token_type": "bearer",
+            "username": body.username, "name": user["name"], "role": user["role"]}
 
-# ── Routes ────────────────────────────────────────────────────────────────────
+@app.get("/auth/me", tags=["auth"])
+def me(user: dict = Depends(current_user)):
+    u = USERS[user["sub"]]
+    return {"username": user["sub"], "name": u["name"], "role": user["role"]}
+
+# ── Workflow routes ────────────────────────────────────────────────────────────
+
+class StartRequest(BaseModel):
+    procurement_request: str = Field(..., example="We need enterprise cloud infrastructure")
+    budget_limit: float      = Field(..., gt=0, example=5500.0)
+
+class DecideRequest(BaseModel):
+    approve: bool = Field(..., example=True)
 
 @app.get("/health")
 def health():
     return {"status": "ok", "graph_ready": _graph is not None}
 
+@app.get("/testcases", tags=["workflow"])
+def get_test_cases():
+    return TEST_CASES
 
-@app.post("/workflow/start", summary="Start procurement workflow")
-def start_workflow(body: StartRequest):
-    """
-    Runs ResearchNode → AnalysisNode → ApprovalGate.
-    Graph pauses before LegalNode and returns the state for human review.
-    Returns a thread_id you must pass to /decide.
-    """
+@app.post("/workflow/start", tags=["workflow"])
+def start_workflow(body: StartRequest, user: dict = Depends(current_user)):
     executor = ProcurementWorkflowExecutor(_graph, _memory)
     _sessions[executor.thread_id] = executor
-
     state, events = executor.start_workflow(body.procurement_request, body.budget_limit)
-    s = _serialise_state(state)
-
+    s = _ser(state)
     return {
-        "thread_id":        executor.thread_id,
-        "status":           "awaiting_approval" if s.get("analysis_approved") else "rejected",
+        "thread_id":         executor.thread_id,
+        "status":            "awaiting_approval" if s.get("analysis_approved") else "rejected",
         "analysis_approved": s.get("analysis_approved"),
-        "selected_vendor":  s.get("selected_vendor"),
-        "vendor_options":   s.get("vendor_options"),
-        "budget_limit":     s.get("budget_limit"),
-        "logs":             s.get("logs"),
-        "events":           _format_events(events),
+        "selected_vendor":   s.get("selected_vendor"),
+        "vendor_options":    s.get("vendor_options"),
+        "budget_limit":      s.get("budget_limit"),
+        "logs":              s.get("logs"),
+        "events":            _fmt_events(events),
+        "triggered_by":      user["sub"],
     }
 
-
-@app.get("/workflow/{thread_id}", summary="Inspect workflow state")
-def get_workflow(thread_id: str):
-    """Return the current checkpointed state for the given thread."""
-    executor = _sessions.get(thread_id)
-    if not executor:
-        raise HTTPException(status_code=404, detail=f"Thread '{thread_id}' not found.")
-    s = _serialise_state(executor.get_state())
-    return {"thread_id": thread_id, "state": s}
-
-
-@app.post("/workflow/{thread_id}/decide", summary="Human approval decision")
-def decide(thread_id: str, body: DecideRequest):
-    """
-    Inject the human decision into the checkpointed state, then resume the graph.
-    If approved, LegalNode runs and returns the generated contract.
-    """
-    executor = _sessions.get(thread_id)
-    if not executor:
-        raise HTTPException(status_code=404, detail=f"Thread '{thread_id}' not found.")
-
-    state, events = executor.approve_vendor(body.approve)
-    s = _serialise_state(state)
-
-    if body.approve:
-        outcome = "contract_generated" if s.get("contract_draft") else "approved_pending_contract"
-    else:
-        outcome = "rejected_by_human"
-
+@app.get("/workflow/{thread_id}", tags=["workflow"])
+def get_workflow(thread_id: str, user: dict = Depends(current_user)):
+    ex = _sessions.get(thread_id)
+    if not ex:
+        raise HTTPException(404, f"Thread '{thread_id}' not found")
+    return {"thread_id": thread_id, "state": _ser(ex.get_state())}
+
+@app.post("/workflow/{thread_id}/decide", tags=["workflow"])
+def decide(thread_id: str, body: DecideRequest, user: dict = Depends(current_user)):
+    ex = _sessions.get(thread_id)
+    if not ex:
+        raise HTTPException(404, f"Thread '{thread_id}' not found")
+    state, events = ex.approve_vendor(body.approve)
+    s = _ser(state)
+    outcome = ("contract_generated" if s.get("contract_draft") else "approved_pending_contract") if body.approve else "rejected_by_human"
     return {
-        "thread_id":      thread_id,
-        "outcome":        outcome,
-        "human_approved": s.get("human_approved"),
-        "contract_draft": s.get("contract_draft"),
+        "thread_id":       thread_id,
+        "outcome":         outcome,
+        "human_approved":  s.get("human_approved"),
+        "contract_draft":  s.get("contract_draft"),
         "selected_vendor": s.get("selected_vendor"),
-        "logs":           s.get("logs"),
-        "events":         _format_events(events),
+        "logs":            s.get("logs"),
+        "events":          _fmt_events(events),
+        "decided_by":      user["sub"],
     }
 
-
-# ── Root: interactive API explorer HTML ──────────────────────────────────────
+# ── SPA ────────────────────────────────────────────────────────────────────────
 
 @app.get("/", response_class=HTMLResponse, include_in_schema=False)
 def root():
-    return """
-<!DOCTYPE html>
+    return HTMLResponse(content=r"""<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="UTF-8"/>
-<meta name="viewport" content="width=device-width,initial-scale=1"/>
-<title>Multi-Agent Procurement System</title>
+<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>Procurement AI System</title>
 <style>
-  *{box-sizing:border-box;margin:0;padding:0}
-  body{font-family:'Segoe UI',system-ui,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh}
-  header{background:linear-gradient(135deg,#1e40af,#7c3aed);padding:2rem;text-align:center}
-  header h1{font-size:1.8rem;font-weight:700;margin-bottom:.5rem}
-  header p{opacity:.85;font-size:.95rem}
-  .container{max-width:900px;margin:2rem auto;padding:0 1rem}
-  .card{background:#1e293b;border:1px solid #334155;border-radius:.75rem;padding:1.5rem;margin-bottom:1.5rem}
-  .card h2{font-size:1.1rem;font-weight:600;color:#93c5fd;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
-  .flow{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
-  .step{background:#0f172a;border:1px solid #475569;border-radius:.5rem;padding:.5rem 1rem;font-size:.85rem;color:#94a3b8}
-  .step.active{border-color:#3b82f6;color:#93c5fd}
-  .arrow{color:#475569;align-self:center}
-  .endpoint{background:#0f172a;border-left:3px solid #3b82f6;padding:.75rem 1rem;border-radius:.25rem;margin:.5rem 0;font-family:monospace;font-size:.85rem}
-  .method{display:inline-block;padding:.15rem .5rem;border-radius:.25rem;font-weight:600;font-size:.8rem;margin-right:.5rem}
-  .post{background:#166534;color:#86efac}
-  .get{background:#1e3a5f;color:#93c5fd}
-  .badge{display:inline-block;padding:.2rem .6rem;border-radius:9999px;font-size:.75rem;font-weight:600}
-  .badge-groq{background:#4f46e5;color:#fff}
-  .badge-lg{background:#065f46;color:#6ee7b7}
-  .badge-ls{background:#7c2d12;color:#fdba74}
-  footer{text-align:center;padding:2rem;color:#475569;font-size:.85rem}
-  a{color:#60a5fa;text-decoration:none}
-  a:hover{text-decoration:underline}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:'Segoe UI',system-ui,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh}
+/* ─── LOGIN ─── */
+#login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
+.login-box{background:#1e293b;border:1px solid #334155;border-radius:1rem;padding:2.5rem;width:100%;max-width:420px}
+.login-box h1{font-size:1.4rem;font-weight:700;color:#93c5fd;margin-bottom:.4rem}
+.login-box p{color:#64748b;font-size:.85rem;margin-bottom:1.5rem}
+.users-hint{background:#0f172a;border-radius:.5rem;padding:.75rem;margin-bottom:1.5rem;font-size:.78rem;color:#94a3b8;line-height:1.7}
+.users-hint strong{color:#e2e8f0}
+input{width:100%;background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:.5rem;padding:.65rem .9rem;font-size:.9rem;margin-bottom:.75rem;outline:none}
+input:focus{border-color:#3b82f6}
+.btn{width:100%;padding:.7rem;border:none;border-radius:.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:.15s}
+.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover{background:#1d4ed8}
+.btn-secondary{background:#1e293b;color:#94a3b8;border:1px solid #334155}.btn-secondary:hover{background:#273548}
+.btn-success{background:#16a34a;color:#fff}.btn-success:hover{background:#15803d}
+.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}
+.btn-sm{padding:.35rem .8rem;font-size:.8rem;width:auto}
+.err{color:#f87171;font-size:.82rem;margin-top:.5rem}
+/* ─── APP ─── */
+#app-page{display:none;flex-direction:column;min-height:100vh}
+header{background:linear-gradient(135deg,#1e40af,#7c3aed);padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
+header h1{font-size:1.1rem;font-weight:700}
+header p{font-size:.8rem;opacity:.8}
+.user-pill{background:rgba(255,255,255,.15);border-radius:999px;padding:.3rem .8rem;font-size:.8rem;display:flex;align-items:center;gap:.5rem}
+main{flex:1;max-width:1100px;width:100%;margin:0 auto;padding:1.5rem 1rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
+@media(max-width:700px){main{grid-template-columns:1fr}}
+.card{background:#1e293b;border:1px solid #334155;border-radius:.75rem;padding:1.25rem}
+.card h2{font-size:.95rem;font-weight:600;color:#93c5fd;margin-bottom:1rem}
+.tc-list{display:flex;flex-direction:column;gap:.5rem}
+.tc-btn{background:#0f172a;border:1px solid #334155;border-radius:.5rem;padding:.6rem .9rem;cursor:pointer;text-align:left;color:#e2e8f0;font-size:.82rem;transition:.15s}
+.tc-btn:hover{border-color:#3b82f6;background:#172035}
+.tc-btn small{display:block;color:#64748b;margin-top:.2rem}
+label{font-size:.82rem;color:#94a3b8;display:block;margin-bottom:.3rem}
+textarea{width:100%;background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:.5rem;padding:.65rem .9rem;font-size:.85rem;resize:vertical;outline:none;min-height:80px}
+textarea:focus{border-color:#3b82f6}
+.row{display:flex;gap:.75rem;align-items:flex-end;margin-bottom:.75rem}
+.row>div{flex:1}
+.status-badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600}
+.s-waiting{background:#1e3a5f;color:#93c5fd}
+.s-ok{background:#14532d;color:#86efac}
+.s-reject{background:#450a0a;color:#fca5a5}
+.s-contract{background:#3b0764;color:#d8b4fe}
+.vendor-card{background:#0f172a;border:1px solid #334155;border-radius:.5rem;padding:.75rem;margin-top:.75rem;font-size:.82rem}
+.vendor-card b{color:#93c5fd}
+.log-box{background:#0f172a;border:1px solid #1e293b;border-radius:.5rem;padding:.75rem;font-size:.75rem;font-family:monospace;color:#94a3b8;max-height:160px;overflow-y:auto;margin-top:.75rem;white-space:pre-wrap}
+.contract-box{background:#0f172a;border:1px solid #334155;border-radius:.5rem;padding:1rem;font-size:.8rem;max-height:340px;overflow-y:auto;margin-top:.75rem;white-space:pre-wrap;line-height:1.6}
+.sep{border:none;border-top:1px solid #334155;margin:.75rem 0}
+.spinner{display:inline-block;width:14px;height:14px;border:2px solid #334155;border-top-color:#3b82f6;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:.4rem}
+@keyframes spin{to{transform:rotate(360deg)}}
+.approve-row{display:flex;gap:.75rem;margin-top:.75rem}
+.flow-steps{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
+.fs{background:#0f172a;border:1px solid #475569;border-radius:.4rem;padding:.3rem .6rem;font-size:.75rem;color:#64748b}
+.fs.done{border-color:#16a34a;color:#86efac}
+.fs.active{border-color:#2563eb;color:#93c5fd}
+.fs.error{border-color:#dc2626;color:#fca5a5}
+.arrow{color:#334155;align-self:center;font-size:.8rem}
 </style>
 </head>
 <body>
-<header>
-  <h1>Multi-Agent Autonomous Procurement System</h1>
-  <p>LangGraph &nbsp;·&nbsp; LangChain &nbsp;·&nbsp; Groq Llama-3.3-70b &nbsp;·&nbsp; LangSmith</p>
-  <div style="margin-top:1rem;display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap">
-    <span class="badge badge-groq">Groq llama-3.3-70b-versatile</span>
-    <span class="badge badge-lg">LangGraph 0.2</span>
-    <span class="badge badge-ls">LangSmith Traced</span>
-  </div>
-</header>
-
-<div class="container">
-
-  <div class="card">
-    <h2>Agent Workflow</h2>
-    <div class="flow">
-      <div class="step active">Research Agent<br/><small>Vendor Discovery</small></div>
-      <div class="arrow">→</div>
-      <div class="step active">Analysis Agent<br/><small>Budget Validation</small></div>
-      <div class="arrow">→</div>
-      <div class="step active">Approval Gate<br/><small>Human-in-the-Loop</small></div>
-      <div class="arrow">→</div>
-      <div class="step active">Legal Agent<br/><small>Contract Generation</small></div>
-    </div>
-    <p style="color:#64748b;font-size:.85rem">
-      The graph compiles with <code>interrupt_before=["legal_node"]</code> so execution pauses
-      after analysis for human review. Call <code>/decide</code> to resume.
-    </p>
-  </div>
 
-  <div class="card">
-    <h2>API Endpoints</h2>
-
-    <div class="endpoint">
-      <span class="method post">POST</span><strong>/workflow/start</strong><br/>
-      <span style="color:#64748b;font-size:.8rem">Body: </span>
-      <code>{"procurement_request": "...", "budget_limit": 5500}</code>
+<!-- ══════════════════ LOGIN ══════════════════ -->
+<div id="login-page">
+  <div class="login-box">
+    <h1>🏢 Procurement AI System</h1>
+    <p>Multi-Agent LangGraph · Groq Llama-3.3-70b · LangSmith</p>
+    <div class="users-hint">
+      <strong>Demo accounts:</strong><br>
+      admin / admin123 &nbsp;·&nbsp; buyer / buyer123<br>
+      manager / manager123 &nbsp;·&nbsp; analyst / analyst123
     </div>
+    <input id="uname" placeholder="Username" onkeydown="if(event.key==='Enter')doLogin()"/>
+    <input id="upass" type="password" placeholder="Password" onkeydown="if(event.key==='Enter')doLogin()"/>
+    <button class="btn btn-primary" onclick="doLogin()">Sign In</button>
+    <div id="login-err" class="err"></div>
+  </div>
+</div>
 
-    <div class="endpoint">
-      <span class="method get">GET</span><strong>/workflow/{thread_id}</strong><br/>
-      <span style="color:#64748b;font-size:.8rem">Inspect checkpointed state at interruption point</span>
+<!-- ══════════════════ APP ══════════════════ -->
+<div id="app-page">
+  <header>
+    <div>
+      <h1>Multi-Agent Procurement System</h1>
+      <p>LangGraph · LangChain · Groq llama-3.3-70b · LangSmith</p>
     </div>
-
-    <div class="endpoint">
-      <span class="method post">POST</span><strong>/workflow/{thread_id}/decide</strong><br/>
-      <span style="color:#64748b;font-size:.8rem">Body: </span>
-      <code>{"approve": true}</code>
-      <span style="color:#64748b;font-size:.8rem"> → resumes graph, returns contract</span>
+    <div style="display:flex;align-items:center;gap:.75rem;flex-wrap:wrap">
+      <span class="user-pill">👤 <span id="user-display"></span></span>
+      <button class="btn btn-secondary btn-sm" onclick="doLogout()">Sign Out</button>
     </div>
+  </header>
+
+  <main>
+    <!-- LEFT: Input + test cases -->
+    <div style="display:flex;flex-direction:column;gap:1.5rem">
+
+      <div class="card">
+        <h2>⚡ Preset Test Cases</h2>
+        <div class="tc-list" id="tc-list"></div>
+      </div>
+
+      <div class="card">
+        <h2>📋 Procurement Request</h2>
+        <label>Request Description</label>
+        <textarea id="req-text" rows="3" placeholder="Describe your procurement need…"></textarea>
+        <div class="row">
+          <div>
+            <label>Budget Limit ($/month)</label>
+            <input id="req-budget" type="number" value="5500" min="100" step="100" style="margin-bottom:0"/>
+          </div>
+          <button class="btn btn-primary btn-sm" onclick="startWorkflow()" id="start-btn">🚀 Run Agents</button>
+        </div>
+        <div id="start-err" class="err"></div>
+      </div>
 
-    <div class="endpoint">
-      <span class="method get">GET</span><strong>/health</strong><br/>
-      <span style="color:#64748b;font-size:.8rem">Liveness probe</span>
     </div>
 
-    <p style="margin-top:1rem">
-      <a href="/docs">Interactive Swagger UI →</a>
-      &nbsp;&nbsp;
-      <a href="/redoc">ReDoc →</a>
-    </p>
-  </div>
-
-  <div class="card">
-    <h2>Quick-start (curl)</h2>
-    <pre style="background:#0f172a;padding:1rem;border-radius:.5rem;font-size:.8rem;overflow-x:auto;color:#94a3b8">
-# 1. Start workflow
-curl -X POST http://localhost:7860/workflow/start \\
-  -H "Content-Type: application/json" \\
-  -d '{"procurement_request":"cloud infrastructure","budget_limit":5500}'
-
-# 2. Approve (replace &lt;thread_id&gt; from step 1 response)
-curl -X POST http://localhost:7860/workflow/&lt;thread_id&gt;/decide \\
-  -H "Content-Type: application/json" \\
-  -d '{"approve":true}'
-    </pre>
-  </div>
+    <!-- RIGHT: Results -->
+    <div style="display:flex;flex-direction:column;gap:1.5rem">
+
+      <div class="card">
+        <h2>📊 Agent Pipeline</h2>
+
+        <div class="flow-steps">
+          <div class="fs" id="fs-research">🔍 Research</div>
+          <div class="arrow">→</div>
+          <div class="fs" id="fs-analysis">💰 Analysis</div>
+          <div class="arrow">→</div>
+          <div class="fs" id="fs-approval">👤 Approval Gate</div>
+          <div class="arrow">→</div>
+          <div class="fs" id="fs-legal">📜 Legal</div>
+        </div>
+
+        <div id="status-area" style="font-size:.85rem;color:#64748b">
+          Run a workflow to see live results.
+        </div>
+
+        <div id="vendor-area" style="display:none">
+          <hr class="sep"/>
+          <div style="font-size:.82rem;color:#94a3b8;margin-bottom:.4rem">Selected Vendor</div>
+          <div class="vendor-card" id="vendor-card"></div>
+        </div>
+
+        <div id="vendor-options-area" style="display:none;margin-top:.75rem">
+          <div style="font-size:.82rem;color:#94a3b8;margin-bottom:.4rem">All Vendor Options</div>
+          <div id="vendor-options-list"></div>
+        </div>
+      </div>
+
+      <div class="card" id="approval-card" style="display:none">
+        <h2>👤 Human Approval Gate</h2>
+        <p style="font-size:.83rem;color:#94a3b8">
+          The LangGraph graph has <strong style="color:#93c5fd">paused</strong> at
+          <code>interrupt_before=["legal_node"]</code>. Review the selected vendor above
+          and make your decision.
+        </p>
+        <div class="approve-row">
+          <button class="btn btn-success" onclick="decide(true)" id="approve-btn">✅ Approve</button>
+          <button class="btn btn-danger"  onclick="decide(false)" id="reject-btn">❌ Reject</button>
+        </div>
+        <div id="decide-err" class="err"></div>
+      </div>
+
+      <div class="card" id="contract-card" style="display:none">
+        <h2>📄 Generated Contract</h2>
+        <div class="contract-box" id="contract-box"></div>
+      </div>
+
+      <div class="card">
+        <h2>🪵 Agent Audit Log</h2>
+        <div class="log-box" id="log-box">Logs will appear here…</div>
+      </div>
 
+    </div>
+  </main>
 </div>
 
-<footer>
-  LangSmith project: <code>multi_agent_procurement</code> &nbsp;|&nbsp;
-  <a href="/docs">Swagger UI</a>
-</footer>
+<script>
+// ── State ──────────────────────────────────────────────────────────────────────
+let TOKEN = null, THREAD = null;
+
+function apiHeaders() {
+  return { "Content-Type": "application/json", "Authorization": "Bearer " + TOKEN };
+}
+
+// ── Auth ───────────────────────────────────────────────────────────────────────
+async function doLogin() {
+  const u = document.getElementById("uname").value.trim();
+  const p = document.getElementById("upass").value;
+  document.getElementById("login-err").textContent = "";
+  try {
+    const r = await fetch("/auth/login", {
+      method: "POST", headers: {"Content-Type":"application/json"},
+      body: JSON.stringify({username: u, password: p})
+    });
+    if (!r.ok) { document.getElementById("login-err").textContent = "Invalid username or password."; return; }
+    const d = await r.json();
+    TOKEN = d.access_token;
+    document.getElementById("user-display").textContent = d.name + " (" + d.role + ")";
+    document.getElementById("login-page").style.display = "none";
+    document.getElementById("app-page").style.display = "flex";
+    loadTestCases();
+  } catch(e) {
+    document.getElementById("login-err").textContent = "Connection error.";
+  }
+}
+
+function doLogout() {
+  TOKEN = null; THREAD = null;
+  document.getElementById("app-page").style.display = "none";
+  document.getElementById("login-page").style.display = "flex";
+  document.getElementById("upass").value = "";
+  resetUI();
+}
+
+// ── Test cases ─────────────────────────────────────────────────────────────────
+async function loadTestCases() {
+  const r = await fetch("/testcases");
+  const cases = await r.json();
+  const el = document.getElementById("tc-list");
+  el.innerHTML = cases.map(tc => `
+    <button class="tc-btn" onclick='fillTestCase(${JSON.stringify(tc)})'>
+      ${tc.label}
+      <small>Budget: $${tc.budget.toLocaleString()} &nbsp;·&nbsp; ${tc.expected}</small>
+    </button>`).join("");
+}
+
+function fillTestCase(tc) {
+  document.getElementById("req-text").value = tc.request;
+  document.getElementById("req-budget").value = tc.budget;
+  resetUI();
+  appendLog("📋 Test case loaded: " + tc.label);
+}
+
+// ── Workflow ───────────────────────────────────────────────────────────────────
+function resetUI() {
+  THREAD = null;
+  ["fs-research","fs-analysis","fs-approval","fs-legal"].forEach(id => {
+    document.getElementById(id).className = "fs";
+  });
+  document.getElementById("status-area").innerHTML = '<span style="color:#64748b">Ready to run.</span>';
+  document.getElementById("vendor-area").style.display = "none";
+  document.getElementById("vendor-options-area").style.display = "none";
+  document.getElementById("approval-card").style.display = "none";
+  document.getElementById("contract-card").style.display = "none";
+  document.getElementById("log-box").textContent = "Logs will appear here…";
+  document.getElementById("start-err").textContent = "";
+  document.getElementById("decide-err").textContent = "";
+  setDecideButtons(true);
+}
+
+function setStep(id, state) {
+  document.getElementById(id).className = "fs " + state;
+}
+
+function appendLog(msg) {
+  const el = document.getElementById("log-box");
+  if (el.textContent === "Logs will appear here…") el.textContent = "";
+  el.textContent += msg + "\n";
+  el.scrollTop = el.scrollHeight;
+}
+
+function setDecideButtons(enabled) {
+  document.getElementById("approve-btn").disabled = !enabled;
+  document.getElementById("reject-btn").disabled  = !enabled;
+}
+
+function renderVendorCard(v, budget) {
+  if (!v || !v.name) return;
+  const within = v.price_per_month <= budget;
+  document.getElementById("vendor-card").innerHTML = `
+    <b>${v.name}</b>
+    <span class="status-badge ${within ? 's-ok' : 's-reject'}" style="margin-left:.5rem">
+      ${within ? "✅ Within budget" : "❌ Over budget"}
+    </span><br/>
+    <span style="color:#94a3b8">Service:</span> ${v.service_type} &nbsp;|&nbsp;
+    <span style="color:#94a3b8">Price:</span> $${v.price_per_month.toLocaleString()}/mo &nbsp;|&nbsp;
+    <span style="color:#94a3b8">Score:</span> ${v.reputation_score}/10<br/>
+    <span style="color:#94a3b8">Capabilities:</span> ${v.capabilities.join(" · ")}<br/>
+    <span style="color:#94a3b8">Terms:</span> ${v.contract_terms}
+  `;
+  document.getElementById("vendor-area").style.display = "block";
+}
+
+function renderVendorOptions(vendors, budget) {
+  if (!vendors || !vendors.length) return;
+  const html = vendors.map(v => {
+    const w = v.price_per_month <= budget;
+    return `<div class="vendor-card" style="margin-bottom:.4rem">
+      <b>${v.name}</b>
+      <span class="status-badge ${w?'s-ok':'s-reject'}" style="margin-left:.4rem">${w?"✅":"❌"} $${v.price_per_month.toLocaleString()}/mo</span>
+      &nbsp; Score: ${v.reputation_score}/10 &nbsp;|&nbsp; ${v.capabilities.join(", ")}
+    </div>`;
+  }).join("");
+  document.getElementById("vendor-options-list").innerHTML = html;
+  document.getElementById("vendor-options-area").style.display = "block";
+}
+
+async function startWorkflow() {
+  const req    = document.getElementById("req-text").value.trim();
+  const budget = parseFloat(document.getElementById("req-budget").value);
+  if (!req) { document.getElementById("start-err").textContent = "Enter a procurement request."; return; }
+  if (!budget || budget <= 0) { document.getElementById("start-err").textContent = "Enter a valid budget."; return; }
+
+  resetUI();
+  document.getElementById("start-btn").innerHTML = '<span class="spinner"></span>Running…';
+  document.getElementById("start-btn").disabled  = true;
+
+  setStep("fs-research", "active");
+  appendLog("🚀 Starting workflow…");
+
+  try {
+    const r = await fetch("/workflow/start", {
+      method: "POST", headers: apiHeaders(),
+      body: JSON.stringify({procurement_request: req, budget_limit: budget})
+    });
+    if (r.status === 401) { doLogout(); return; }
+    const d = await r.json();
+    THREAD = d.thread_id;
+
+    // Log events
+    (d.events || []).forEach(ev => appendLog("  [" + ev.node + "] processed"));
+    (d.logs   || []).forEach(l  => appendLog(l));
+
+    setStep("fs-research", "done");
+    setStep("fs-analysis",  d.analysis_approved ? "done" : "error");
+
+    renderVendorOptions(d.vendor_options, d.budget_limit);
+
+    if (d.analysis_approved) {
+      renderVendorCard(d.selected_vendor, d.budget_limit);
+      setStep("fs-approval", "active");
+      document.getElementById("status-area").innerHTML =
+        '<span class="status-badge s-waiting">⏸ Awaiting Human Approval</span>' +
+        '<span style="color:#64748b;font-size:.8rem;margin-left:.5rem">Graph paused at interrupt_before=[\"legal_node\"]</span>';
+      document.getElementById("approval-card").style.display = "block";
+    } else {
+      renderVendorCard(d.selected_vendor, d.budget_limit);
+      document.getElementById("status-area").innerHTML =
+        '<span class="status-badge s-reject">❌ Analysis Rejected — all vendors exceed budget</span>';
+      appendLog("❌ Budget exceeded. Workflow terminated.");
+    }
+  } catch(e) {
+    document.getElementById("status-area").innerHTML = '<span style="color:#f87171">Error: ' + e.message + '</span>';
+    appendLog("ERROR: " + e.message);
+  } finally {
+    document.getElementById("start-btn").innerHTML = "🚀 Run Agents";
+    document.getElementById("start-btn").disabled  = false;
+  }
+}
+
+async function decide(approve) {
+  if (!THREAD) return;
+  setDecideButtons(false);
+  document.getElementById("decide-err").textContent = "";
+  appendLog((approve ? "✅ Human APPROVED" : "❌ Human REJECTED") + " — resuming graph…");
+
+  try {
+    const r = await fetch("/workflow/" + THREAD + "/decide", {
+      method: "POST", headers: apiHeaders(),
+      body: JSON.stringify({approve})
+    });
+    if (r.status === 401) { doLogout(); return; }
+    const d = await r.json();
+
+    (d.events || []).forEach(ev => appendLog("  [" + ev.node + "] processed"));
+    (d.logs   || []).forEach(l  => appendLog(l));
+
+    document.getElementById("approval-card").style.display = "none";
+
+    if (approve && d.contract_draft) {
+      setStep("fs-approval", "done");
+      setStep("fs-legal",    "done");
+      document.getElementById("status-area").innerHTML =
+        '<span class="status-badge s-contract">✅ Contract Generated</span>';
+      document.getElementById("contract-box").textContent = d.contract_draft;
+      document.getElementById("contract-card").style.display = "block";
+      appendLog("📄 Contract ready.");
+    } else if (approve) {
+      setStep("fs-approval", "done");
+      document.getElementById("status-area").innerHTML =
+        '<span class="status-badge s-ok">Approved — contract pending</span>';
+    } else {
+      setStep("fs-approval", "error");
+      document.getElementById("status-area").innerHTML =
+        '<span class="status-badge s-reject">🚫 Rejected by Human Reviewer</span>';
+      appendLog("🚫 Workflow rejected.");
+    }
+  } catch(e) {
+    document.getElementById("decide-err").textContent = "Error: " + e.message;
+    setDecideButtons(true);
+  }
+}
+</script>
 </body>
-</html>
-"""
+</html>""")