# ── PROJECT TREE ──────────────────────────────────────────────────────────────
#
#   langgraph-support-agent/
#   ├── app.py
#   ├── events.py
#   ├── requirements.txt
#   ├── Dockerfile
#   ├── .env.example
#   ├── agent/
#   │   ├── __init__.py
#   │   ├── state.py
#   │   ├── tools.py
#   │   ├── llm.py
#   │   ├── nodes.py
#   │   └── graph.py
#   ├── data/
#   │   └── faq.json
#   ├── templates/
#   │   └── index.html
#   ├── static/
#   │   └── app.js
#   ├── README.md
#   └── docs/
#       └── project-template.html
#
# ──────────────────────────────────────────────────────────────────────────────


# ══════════════════════════════════════════════════════════════════════════════
# FILE: requirements.txt
# ══════════════════════════════════════════════════════════════════════════════

flask>=3.0.3
python-dotenv>=1.0.1
langgraph>=0.2.28
langchain>=0.3.7
langchain-core>=0.3.15
huggingface-hub>=0.26.2
gunicorn>=23.0.0


# ══════════════════════════════════════════════════════════════════════════════
# FILE: Dockerfile
# ══════════════════════════════════════════════════════════════════════════════

FROM python:3.11-slim
RUN useradd -m -u 1000 user
USER user
ENV HOME=/home/user PATH=/home/user/.local/bin:$PATH
WORKDIR $HOME/app
COPY --chown=user requirements.txt .
RUN pip install --no-cache-dir --upgrade pip && pip install --no-cache-dir -r requirements.txt
COPY --chown=user . .
EXPOSE 7860
CMD ["gunicorn","--worker-class","gthread","--workers","1","--threads","4","--timeout","300","--bind","0.0.0.0:7860","--log-level","info","app:app"]


# ══════════════════════════════════════════════════════════════════════════════
# FILE: .env.example
# ══════════════════════════════════════════════════════════════════════════════

# Get your free token at https://huggingface.co/settings/tokens
HF_TOKEN=hf_your_token_here
SECRET_KEY=change-me-to-a-random-secret


# ══════════════════════════════════════════════════════════════════════════════
# FILE: events.py
# ══════════════════════════════════════════════════════════════════════════════

import queue, threading
from typing import Dict

_queues: Dict[str, queue.Queue] = {}
_lock = threading.Lock()

def get_queue(session_id: str) -> queue.Queue:
    with _lock:
        if session_id not in _queues:
            _queues[session_id] = queue.Queue()
        return _queues[session_id]

def clear_queue(session_id: str) -> None:
    with _lock:
        _queues[session_id] = queue.Queue()

def emit(session_id: str, event: dict) -> None:
    get_queue(session_id).put(event)


# ══════════════════════════════════════════════════════════════════════════════
# FILE: agent/__init__.py
# ══════════════════════════════════════════════════════════════════════════════


# ══════════════════════════════════════════════════════════════════════════════
# FILE: agent/state.py
# ══════════════════════════════════════════════════════════════════════════════

from typing import TypedDict, Annotated, List, Optional
from langchain_core.messages import BaseMessage
import operator

class AgentState(TypedDict):
    messages: Annotated[List[BaseMessage], operator.add]
    current_node: str
    model_name: str
    session_id: str
    hf_token: str
    iteration_count: int
    should_end: bool
    final_answer: Optional[str]
    error: Optional[str]
    conversation_history: List[dict]
    pending_tool: Optional[dict]


# ══════════════════════════════════════════════════════════════════════════════
# FILE: agent/tools.py
# ══════════════════════════════════════════════════════════════════════════════

import json, os, random, string
from datetime import datetime, timedelta
from typing import Optional

_FAQ_PATH = os.path.join(os.path.dirname(__file__), "..", "data", "faq.json")
_faq_cache: Optional[dict] = None

def _faq() -> dict:
    global _faq_cache
    if _faq_cache is None:
        with open(_FAQ_PATH) as f:
            _faq_cache = json.load(f)
    return _faq_cache

def search_faq(query: str) -> str:
    """Search the FAQ knowledge base."""
    q = query.lower()
    scored = sorted(
        [(sum(1 for kw in e["keywords"] if kw in q), e) for e in _faq()["entries"]],
        key=lambda x: x[0], reverse=True
    )
    hits = [e for score, e in scored if score > 0][:2]
    if not hits:
        return "No FAQ entries matched. Consider opening a support ticket."
    return "\n\n".join(f"Q: {e['question']}\nA: {e['answer']}" for e in hits)

def check_order_status(order_id: str) -> str:
    """Check the status of a customer order by order ID."""
    oid = order_id.upper().strip()
    if len(oid) < 4:
        return f"Invalid order ID '{oid}'. Expected format: ORD-XXXXXX."
    seed = sum(ord(c) for c in oid)
    statuses = ["Processing","Shipped","Out for Delivery","Delivered","Return Requested"]
    carriers = ["FedEx","UPS","USPS","DHL"]
    status = statuses[seed % len(statuses)]
    carrier = carriers[seed % len(carriers)]
    eta = (datetime.now() + timedelta(days=seed % 5 + 1)).strftime("%B %d, %Y")
    tracking = "".join(str(seed * i % 10) for i in range(1, 13))
    if status == "Delivered":
        return f"Order {oid}: {status}. Delivered on {eta} via {carrier}."
    if status == "Processing":
        return f"Order {oid}: {status}. Estimated ship date: {eta}. Your order is being prepared."
    return f"Order {oid}: {status}. Carrier: {carrier}. Tracking #{tracking}. ETA: {eta}."

def create_ticket(issue: str, priority: str = "medium") -> str:
    """Create a customer support ticket."""
    priority = priority.lower() if priority.lower() in ("low","medium","high","urgent") else "medium"
    tid = "TKT-" + "".join(random.choices(string.ascii_uppercase + string.digits, k=6))
    sla = {"low":72,"medium":24,"high":8,"urgent":2}[priority]
    return (f"Ticket {tid} created.\nPriority: {priority.upper()}\nIssue: {issue[:200]}\n"
            f"Created: {datetime.utcnow().strftime('%Y-%m-%d %H:%M UTC')}\nExpected response: within {sla} hours.")

def get_product_info(product_name: str) -> str:
    """Get product details, pricing, and availability."""
    catalog = {
        "laptop": ("ProBook X15","$1,299","In Stock","2 years","Intel i7-13th, 16GB RAM, 512GB NVMe SSD"),
        "phone": ("SmartPhone Pro 14","$899","Limited (8 units)","1 year","6.7\" OLED, 256GB, 5G, 200MP camera"),
        "headphones": ("AudioMax Pro","$249","In Stock","1 year","ANC, 30hr battery, Bluetooth 5.3"),
        "tablet": ("TabPro 12","$699","Out of Stock","1 year","12\" display, M2 chip, 256GB"),
        "monitor": ("ViewMax 27\" 4K","$549","In Stock","3 years","27\" IPS, 4K, 144Hz, USB-C 90W"),
        "keyboard": ("MechType Pro","$149","In Stock","2 years","Mechanical, per-key RGB, wireless 2.4GHz"),
        "mouse": ("PrecisionPro X","$89","In Stock","1 year","8000 DPI, wireless, 70hr battery"),
        "charger": ("PowerBlock 65W","$49","In Stock","1 year","USB-C PD 65W, GaN tech, 2-port"),
    }
    pn = product_name.lower()
    for key, (name, price, stock, warranty, specs) in catalog.items():
        if key in pn or pn in key:
            return f"Product: {name}\nPrice: {price}\nAvailability: {stock}\nWarranty: {warranty}\nSpecs: {specs}"
    return f"Product '{product_name}' not found. Available: laptop, phone, headphones, tablet, monitor, keyboard, mouse, charger."

def escalate_to_human(reason: str) -> str:
    """Escalate to a live human support agent."""
    eid = "ESC-" + "".join(random.choices(string.ascii_uppercase + string.digits, k=5))
    q = random.randint(2, 7)
    return (f"Escalation {eid} initiated.\nReason: {reason[:150]}\nQueue position: {q} | Est. wait: {q*5} minutes.\nA human agent will join this chat shortly.")

TOOLS = {
    "search_faq": {"fn": search_faq, "desc": "Search FAQ knowledge base", "icon": "🔍"},
    "check_order_status": {"fn": check_order_status, "desc": "Look up order by ID", "icon": "📦"},
    "create_ticket": {"fn": create_ticket, "desc": "Open a support ticket", "icon": "🎫"},
    "get_product_info": {"fn": get_product_info, "desc": "Get product details", "icon": "🛍️"},
    "escalate_to_human": {"fn": escalate_to_human, "desc": "Transfer to live agent", "icon": "👤"},
}

def execute_tool(tool_name: str, tool_input: dict) -> str:
    tool = TOOLS.get(tool_name)
    if not tool:
        return f"Unknown tool '{tool_name}'. Available: {', '.join(TOOLS)}"
    try:
        return tool["fn"](**tool_input)
    except TypeError as e:
        return f"Tool parameter error: {e}"
    except Exception as e:
        return f"Tool execution error: {e}"


# ══════════════════════════════════════════════════════════════════════════════
# FILE: agent/llm.py
# ══════════════════════════════════════════════════════════════════════════════

import re, json
from typing import Optional, Callable
from huggingface_hub import InferenceClient

SYSTEM_PROMPT = """You are a professional customer support agent for TechStore, a consumer electronics retailer. You help customers with orders, products, returns, warranties, and technical issues.

You have access to these tools:
1. search_faq(query) — Search FAQ knowledge base
2. check_order_status(order_id) — Get current order status
3. create_ticket(issue, priority) — Open a support ticket (priority: low/medium/high/urgent)
4. get_product_info(product_name) — Get product specs, price, and availability
5. escalate_to_human(reason) — Transfer to a live human agent

To call a tool respond EXACTLY like this:
Thought: [your reasoning]
Action: [exact tool name]
Action Input: {"param": "value"}

When you have enough info and do NOT need another tool:
Thought: [your reasoning]
Final Answer: [your complete friendly reply]

Rules:
- Never invent order IDs, tracking numbers, or product specs — use tools
- If a customer seems very upset or requests a human, use escalate_to_human
- After receiving tool results, always write a Final Answer
- Maximum 4 tool calls per turn"""


def _merge_system_into_user(messages: list) -> list:
    """Fallback: prepend system prompt into the first user message for models
    that reject the system role (e.g. Mistral v0.3 on the free HF tier)."""
    out = []
    sys_content = ""
    for m in messages:
        if m["role"] == "system":
            sys_content = m["content"]
        else:
            out.append(m)
    if sys_content and out:
        first_user_idx = next((i for i, m in enumerate(out) if m["role"] == "user"), None)
        if first_user_idx is not None:
            out[first_user_idx] = {
                "role": "user",
                "content": f"[Instructions]\n{sys_content}\n\n[Customer message]\n{out[first_user_idx]['content']}"
            }
    return out


def build_messages(user_msg: str, history: list, tool_obs: list) -> list:
    msgs = [{"role": "system", "content": SYSTEM_PROMPT}]
    for m in history[-12:]:
        if m.get("role") in ("user", "assistant"):
            msgs.append({"role": m["role"], "content": m["content"]})
    msgs.append({"role": "user", "content": user_msg})
    if tool_obs:
        obs = "\n\n".join(f"[{o['tool']} result]\n{o['result']}" for o in tool_obs)
        msgs.append({"role": "user", "content": f"Tool results:\n{obs}\n\nNow write your Final Answer."})
    return msgs


def parse_tool_call(text: str) -> Optional[tuple]:
    action = re.search(r"Action:\s*(\w+)", text, re.IGNORECASE)
    if not action:
        return None
    name = action.group(1).strip()
    jm = re.search(r"Action Input:\s*(\{.*?\})", text, re.DOTALL)
    if jm:
        try:
            return name, json.loads(jm.group(1))
        except json.JSONDecodeError:
            pass
    raw = re.search(r"Action Input:\s*(.+?)(?:\n\n|$)", text, re.DOTALL)
    if raw:
        r = raw.group(1).strip()
        pairs = re.findall(r'"?(\w+)"?\s*:\s*"([^"]*)"', r)
        if pairs:
            return name, dict(pairs)
        return name, {"query": r}
    return name, {}


def parse_final_answer(text: str) -> Optional[str]:
    m = re.search(r"Final Answer:\s*(.+)", text, re.DOTALL | re.IGNORECASE)
    if m:
        return re.sub(r"\s*---\s*$", "", m.group(1)).strip()
    return None


def _try_stream(client: InferenceClient, model: str, messages: list,
                emit_token: Callable[[str], None], max_tokens: int) -> str:
    full = ""
    for chunk in client.chat_completion(
        messages=messages, model=model,
        max_tokens=max_tokens, temperature=0.25, stream=True
    ):
        delta = chunk.choices[0].delta.content
        if delta:
            full += delta
            emit_token(delta)
    return full


def call_llm_streaming(client: InferenceClient, model: str, messages: list,
                        emit_token: Callable[[str], None], max_tokens: int = 900) -> str:
    # Attempt 1: standard messages with system role
    try:
        return _try_stream(client, model, messages, emit_token, max_tokens)
    except Exception as e:
        err_str = str(e)
        # Only retry on bad-request / role errors; surface all others immediately
        if "Bad request" not in err_str and "400" not in err_str and "role" not in err_str.lower():
            msg = f"\n[LLM error: {err_str[:180]}]"
            emit_token(msg)
            return msg

    # Attempt 2: merge system prompt into first user message as fallback
    emit_token("\n[Retrying with merged prompt…]\n")
    merged = _merge_system_into_user(messages)
    try:
        return _try_stream(client, model, merged, emit_token, max_tokens)
    except Exception as e2:
        msg = f"\n[LLM error after retry: {str(e2)[:180]}]"
        emit_token(msg)
        return msg


# ══════════════════════════════════════════════════════════════════════════════
# FILE: agent/nodes.py
# ══════════════════════════════════════════════════════════════════════════════

import time
from datetime import datetime
from huggingface_hub import InferenceClient
from langchain_core.messages import AIMessage, ToolMessage
import events as ev
from agent.state import AgentState
from agent.tools import execute_tool
from agent.llm import build_messages, call_llm_streaming, parse_tool_call, parse_final_answer

def _ts(): return datetime.utcnow().isoformat() + "Z"
def _enter(sid, node):
    ev.emit(sid, {"type":"node_enter","node":node,"timestamp":_ts()})
    return time.time()
def _exit(sid, node, t0):
    ev.emit(sid, {"type":"node_exit","node":node,"duration_ms":round((time.time()-t0)*1000,1),"timestamp":_ts()})

def router_node(state: AgentState) -> dict:
    t0 = _enter(state["session_id"], "router")
    time.sleep(0.04)
    _exit(state["session_id"], "router", t0)
    return {"current_node":"agent","iteration_count":0}

def agent_node(state: AgentState) -> dict:
    sid = state["session_id"]
    t0 = _enter(sid, "agent")
    user_msg, tool_obs = "", []
    for msg in state["messages"]:
        cname = type(msg).__name__
        if cname == "HumanMessage":
            user_msg = msg.content
        elif cname == "ToolMessage":
            tool_obs.append({"tool":getattr(msg,"name","tool"),"result":msg.content})
    client = InferenceClient(api_key=state["hf_token"], provider="auto")
    messages = build_messages(user_msg, state.get("conversation_history",[]), tool_obs)
    full_text = call_llm_streaming(client, state["model_name"], messages,
                                   emit_token=lambda t: ev.emit(sid,{"type":"token","content":t}))
    _exit(sid, "agent", t0)
    itr = state["iteration_count"] + 1
    final = parse_final_answer(full_text)
    if final:
        return {"messages":[AIMessage(content=full_text)],"should_end":True,
                "final_answer":final,"iteration_count":itr,"pending_tool":None}
    tool_call = parse_tool_call(full_text)
    if tool_call and itr <= 4:
        tool_name, tool_input = tool_call
        ev.emit(sid,{"type":"tool_call","name":tool_name,"input":tool_input,"timestamp":_ts()})
        return {"messages":[AIMessage(content=full_text)],"should_end":False,
                "iteration_count":itr,"pending_tool":{"name":tool_name,"input":tool_input},"current_node":"tool_executor"}
    return {"messages":[AIMessage(content=full_text)],"should_end":True,
            "final_answer":full_text.strip(),"iteration_count":itr,"pending_tool":None}

def tool_executor_node(state: AgentState) -> dict:
    sid = state["session_id"]
    t0 = _enter(sid, "tool_executor")
    pending = state.get("pending_tool") or {}
    name = pending.get("name","")
    inp = pending.get("input",{})
    result = execute_tool(name, inp)
    elapsed = round((time.time()-t0)*1000,1)
    ev.emit(sid,{"type":"tool_result","name":name,"output":result,"latency_ms":elapsed,"timestamp":_ts()})
    _exit(sid, "tool_executor", t0)
    return {"messages":[ToolMessage(content=result,tool_call_id=name,name=name)],"current_node":"agent","pending_tool":None}

def responder_node(state: AgentState) -> dict:
    sid = state["session_id"]
    t0 = _enter(sid, "responder")
    _exit(sid, "responder", t0)
    return {"current_node":"end"}


# ══════════════════════════════════════════════════════════════════════════════
# FILE: agent/graph.py
# ══════════════════════════════════════════════════════════════════════════════

from langgraph.graph import StateGraph, END
from agent.state import AgentState
from agent.nodes import router_node, agent_node, tool_executor_node, responder_node

def _route_agent(state: AgentState) -> str:
    return "responder" if (state.get("should_end") or not state.get("pending_tool")) else "tool_executor"

def build_graph():
    g = StateGraph(AgentState)
    g.add_node("router", router_node)
    g.add_node("agent", agent_node)
    g.add_node("tool_executor", tool_executor_node)
    g.add_node("responder", responder_node)
    g.set_entry_point("router")
    g.add_edge("router","agent")
    g.add_conditional_edges("agent", _route_agent, {"responder":"responder","tool_executor":"tool_executor"})
    g.add_edge("tool_executor","agent")
    g.add_edge("responder",END)
    return g.compile()


# ══════════════════════════════════════════════════════════════════════════════
# FILE: data/faq.json
# ══════════════════════════════════════════════════════════════════════════════

{
  "entries": [
    {"question":"What is your return policy?","answer":"You may return most items within 30 days of purchase for a full refund. Items must be in original condition with original packaging. Opened software and digital downloads are non-returnable.","keywords":["return","refund","policy","send back","exchange","money back"]},
    {"question":"How long does shipping take?","answer":"Standard shipping takes 5–7 business days. Expedited shipping (2–3 business days) is available for an additional fee. Free standard shipping on all orders over $50.","keywords":["shipping","delivery","ship","arrive","how long","estimated","fast","overnight"]},
    {"question":"How do I track my order?","answer":"Track your order using the order ID from your confirmation email. Use check_order_status or visit our website. Tracking updates appear within 24 hours of shipment.","keywords":["track","tracking","where is","order status","shipping status","delivery status"]},
    {"question":"What warranty do your products come with?","answer":"Most electronics carry a 1-year manufacturer warranty. Laptops and monitors have a 2–3 year warranty. Extended warranty plans up to 4 years can be purchased at checkout.","keywords":["warranty","guarantee","broken","defect","repair","coverage","years"]},
    {"question":"What payment methods do you accept?","answer":"We accept Visa, Mastercard, American Express, PayPal, Apple Pay, Google Pay, and TechStore Gift Cards. Buy Now Pay Later available via Klarna for orders over $100.","keywords":["payment","pay","credit card","paypal","apple pay","klarna","financing"]},
    {"question":"Can I cancel or modify my order?","answer":"Orders can be cancelled or modified within 1 hour of placement while in Processing status. After that the order cannot be changed. If shipped, initiate a return once you receive it.","keywords":["cancel","modify","change order","edit order","wrong item","wrong address"]},
    {"question":"How do I reset my account password?","answer":"Visit the login page and click Forgot Password. Enter your registered email and we will send a reset link within 5 minutes. The link expires after 24 hours.","keywords":["password","reset","forgot","login","account","access","locked out"]},
    {"question":"Do you offer price matching?","answer":"Yes. We match prices from authorized retailers on identical in-stock items. Submit a price match request via support ticket with a link to the competitor listing.","keywords":["price match","cheaper","competitor price","best price","found cheaper","price guarantee"]},
    {"question":"How do I claim warranty service?","answer":"Create a support ticket describing the defect with photos. Our team reviews within 24 hours. If approved you receive a prepaid return label. We repair or replace within 7–10 business days.","keywords":["warranty claim","repair","broken","not working","defective","malfunction","fix"]},
    {"question":"What do I do if I received a wrong or damaged item?","answer":"Open a HIGH priority support ticket with photos of the item and packaging within 48 hours of delivery. We will arrange a free return pickup and ship the replacement via expedited shipping at no cost.","keywords":["wrong item","damaged","broken on arrival","incorrect","received wrong","package damaged","doa"]},
    {"question":"Do you offer student or military discounts?","answer":"Verified students save 10% via our Student Program (verify with .edu email). Active and veteran military receive 12% off (verify with ID.me). Discounts stack with sale prices.","keywords":["student discount","military discount","discount","coupon","promo","student","military","edu"]},
    {"question":"Is my personal data safe?","answer":"All customer data is stored with AES-256 encryption. We do not sell personal information. You may request a full data export or deletion at any time. We are GDPR and CCPA compliant.","keywords":["privacy","data","personal information","gdpr","ccpa","secure","delete account"]},
    {"question":"Do you have a physical store?","answer":"TechStore operates in 45+ physical locations across North America. Use our Store Locator at techstore.com/locations to find the nearest branch. Some locations offer walk-in technical support.","keywords":["store","location","physical","visit","near me","retail","walk in"]},
    {"question":"How do I check my gift card balance?","answer":"Check your gift card balance by logging into your account and visiting My Wallet, or ask any in-store associate. Gift cards do not expire and have no monthly fees.","keywords":["gift card","store credit","balance","wallet","credit balance"]},
    {"question":"Can I get gift wrapping?","answer":"Yes. At checkout select 'This is a gift' for a gift receipt (no prices shown) and optional gift wrapping for $5.99. A personalized message up to 150 characters is free.","keywords":["gift","gift wrap","gift receipt","present","gift message","birthday"]}
  ]
}


# ══════════════════════════════════════════════════════════════════════════════
# FILE: app.py
# ══════════════════════════════════════════════════════════════════════════════

import json, queue, threading, time, uuid
from datetime import datetime
from flask import Flask, render_template, request, Response, jsonify
from dotenv import load_dotenv
import os
import events

load_dotenv()
app = Flask(__name__)
app.secret_key = os.getenv("SECRET_KEY","lgsa-2025-dev-secret")

AVAILABLE_MODELS = [
    {"id":"meta-llama/Meta-Llama-3.1-8B-Instruct","name":"Llama 3.1 8B Instruct","badge":"🦙 Recommended"},
    {"id":"Qwen/Qwen2.5-7B-Instruct","name":"Qwen 2.5 7B Instruct","badge":"⚡ Fast"},
    {"id":"mistralai/Mistral-7B-Instruct-v0.3","name":"Mistral 7B Instruct v0.3","badge":"🌀 Mistral"},
    {"id":"google/gemma-2-9b-it","name":"Gemma 2 9B Instruct","badge":"💎 Google"},
]

_sessions: dict = {}
_lock = threading.Lock()

class Session:
    def __init__(self, sid, model):
        self.session_id = sid
        self.model_name = model
        self.messages: list = []
        self.tool_calls: list = []
        self.node_traces: list = []
        self.turn_count = 0
        self.total_tokens = 0
        self.latency_history: list = []

def _get(sid, model=""):
    with _lock:
        if sid not in _sessions:
            _sessions[sid] = Session(sid, model or AVAILABLE_MODELS[0]["id"])
        elif model:
            _sessions[sid].model_name = model
        return _sessions[sid]

def _analytics(s):
    usage = {}
    for tc in s.tool_calls:
        usage[tc["tool_name"]] = usage.get(tc["tool_name"],0) + 1
    avg = round(sum(s.latency_history)/max(len(s.latency_history),1),1)
    return {"turn_count":s.turn_count,"total_tokens":s.total_tokens,"avg_latency_ms":avg,
            "latency_history":s.latency_history[-20:],"tool_call_count":len(s.tool_calls),
            "tool_usage":usage,"node_traces":s.node_traces[-30:]}

def _tok(text): return max(1, int(len(text.split())*1.35))

@app.route("/")
def index():
    return render_template("index.html", models=AVAILABLE_MODELS)

@app.route("/api/models")
def api_models():
    return jsonify(AVAILABLE_MODELS)

@app.route("/api/chat", methods=["POST"])
def api_chat():
    body = request.get_json(force=True) or {}
    user_message = (body.get("message") or "").strip()
    model_name = body.get("model") or AVAILABLE_MODELS[0]["id"]
    session_id = body.get("session_id") or str(uuid.uuid4())
    if not user_message:
        return jsonify({"error":"Message cannot be empty."}), 400
    hf_token = os.getenv("HF_TOKEN","").strip()

    def generate():
        if not hf_token:
            yield f"data: {json.dumps({'type':'error','message':'HF_TOKEN not set. Add it as a Space secret under Settings → Variables and Secrets.'})}\n\n"
            return
        s = _get(session_id, model_name)
        s.turn_count += 1
        t_start = time.time()
        user_entry = {"role":"user","content":user_message,"token_count":_tok(user_message),"timestamp":datetime.utcnow().isoformat()+"Z"}
        s.messages.append(user_entry)
        events.clear_queue(session_id)
        prior = list(s.messages[:-1])
        from agent.state import AgentState
        from agent.graph import build_graph
        from langchain_core.messages import HumanMessage
        initial: AgentState = {"messages":[HumanMessage(content=user_message)],"current_node":"router",
                               "model_name":model_name,"session_id":session_id,"hf_token":hf_token,
                               "iteration_count":0,"should_end":False,"final_answer":None,"error":None,
                               "conversation_history":prior,"pending_tool":None}
        result_box: dict = {}
        def run():
            try:
                result_box["result"] = build_graph().invoke(initial)
            except Exception as exc:
                result_box["error"] = str(exc)
            finally:
                events.emit(session_id, {"type":"_done"})
        threading.Thread(target=run, daemon=True).start()
        q = events.get_queue(session_id)
        buf: list = []
        while True:
            try:
                ev = q.get(timeout=90)
            except queue.Empty:
                yield f"data: {json.dumps({'type':'error','message':'Response timed out.'})}\n\n"
                return
            if ev["type"] == "_done":
                break
            if ev["type"] == "token":
                buf.append(ev["content"])
            elif ev["type"] == "node_enter":
                s.node_traces.append({"node_name":ev["node"],"entered_at":ev["timestamp"],"exited_at":None,"duration_ms":None,"status":"running"})
            elif ev["type"] == "node_exit":
                for tr in reversed(s.node_traces):
                    if tr["node_name"] == ev["node"] and tr["status"] == "running":
                        tr.update({"exited_at":ev["timestamp"],"duration_ms":ev.get("duration_ms"),"status":"completed"})
                        break
            elif ev["type"] == "tool_call":
                s.tool_calls.append({"tool_name":ev["name"],"tool_input":ev.get("input",{}),"tool_output":"","timestamp":ev["timestamp"],"latency_ms":0})
            elif ev["type"] == "tool_result":
                for tc in reversed(s.tool_calls):
                    if tc["tool_name"] == ev["name"] and tc["tool_output"] == "":
                        tc.update({"tool_output":ev.get("output",""),"latency_ms":ev.get("latency_ms",0)})
                        break
            yield f"data: {json.dumps(ev)}\n\n"
        if "error" in result_box:
            yield f"data: {json.dumps({'type':'error','message':result_box['error']})}\n\n"
            return
        final = ((result_box.get("result") or {}).get("final_answer") or "".join(buf)).strip()
        if not final:
            final = "I'm sorry, I wasn't able to generate a response. Please try again."
        elapsed = round((time.time()-t_start)*1000,1)
        tok = _tok(final)
        s.total_tokens += tok + user_entry["token_count"]
        s.latency_history.append(elapsed)
        asst = {"role":"assistant","content":final,"token_count":tok,"timestamp":datetime.utcnow().isoformat()+"Z"}
        s.messages.append(asst)
        yield f"data: {json.dumps({'type':'done','session_id':session_id,'message':asst,'latency_ms':elapsed,'analytics':_analytics(s)})}\n\n"

    resp = Response(generate(), mimetype="text/event-stream")
    resp.headers.update({"Cache-Control":"no-cache","X-Accel-Buffering":"no","X-Session-ID":session_id})
    return resp

@app.route("/api/session/<session_id>")
def api_session(session_id):
    with _lock:
        s = _sessions.get(session_id)
    if not s:
        return jsonify({"error":"Session not found"}), 404
    return jsonify({"session_id":session_id,"model_name":s.model_name,"messages":s.messages,"tool_calls":s.tool_calls,"node_traces":s.node_traces,"analytics":_analytics(s)})

@app.route("/api/reset", methods=["POST"])
def api_reset():
    body = request.get_json(force=True) or {}
    sid = body.get("session_id") or str(uuid.uuid4())
    model = body.get("model") or AVAILABLE_MODELS[0]["id"]
    with _lock:
        _sessions[sid] = Session(sid, model)
    events.clear_queue(sid)
    return jsonify({"status":"ok","session_id":sid})

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=7860, debug=False, threaded=True)


# ══════════════════════════════════════════════════════════════════════════════
# FILE: templates/index.html
# ══════════════════════════════════════════════════════════════════════════════

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>LangGraph Support Agent Studio</title>
<script>document.documentElement.setAttribute('data-theme',localStorage.getItem('lgsa-theme')||'dark')</script>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='14' fill='%23070d1f'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='central' text-anchor='middle' font-size='36'%3E🤖%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<style>
:root{--accent:#4f8ef7;--gold:#f59e0b;--teal:#06b6d4;--green:#22c55e;--red:#ef4444;--purple:#a78bfa;--radius:12px;--body-bg:#070d1f;--text:#e2e8f0;--muted:#8892a4;--glass:rgba(255,255,255,.04);--glass-border:rgba(255,255,255,.08);--hover-bg:rgba(255,255,255,.07);--hover-border:rgba(79,142,247,.3);--nav-bg:rgba(7,13,31,.92);--sb-bg:#0b1120;--panel-bg:#0b1120;--input-bg:rgba(255,255,255,.06);--msg-u:rgba(79,142,247,.15);--msg-a:rgba(255,255,255,.04)}
[data-theme="light"]{--body-bg:#f1f5f9;--text:#0f172a;--muted:#4b5675;--glass:rgba(0,0,0,.03);--glass-border:rgba(0,0,0,.1);--hover-bg:rgba(0,0,0,.05);--hover-border:rgba(37,99,235,.25);--nav-bg:rgba(241,245,249,.95);--sb-bg:#e8edf5;--panel-bg:#e8edf5;--input-bg:rgba(0,0,0,.05);--msg-u:rgba(37,99,235,.1);--msg-a:rgba(0,0,0,.03)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--body-bg);color:var(--text);height:100vh;overflow:hidden;transition:background .3s,color .3s}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(79,142,247,.3);border-radius:3px}
.navbar{position:fixed;top:0;left:0;right:0;height:52px;z-index:100;background:var(--nav-bg);border-bottom:1px solid var(--glass-border);backdrop-filter:blur(12px);display:flex;align-items:center;padding:0 20px;gap:12px}
.nav-logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:.95rem}
.nav-logo-text{background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-badge{font-size:.65rem;padding:2px 8px;border-radius:20px;background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.25);color:var(--accent);font-weight:700}
.nav-spacer{flex:1}
.nav-session{font-size:.7rem;color:var(--muted);font-family:monospace}
.btn-icon{width:32px;height:32px;border-radius:8px;border:1px solid var(--glass-border);background:var(--glass);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.2s;font-size:.9rem}
.btn-icon:hover{background:var(--hover-bg);color:var(--accent);border-color:var(--hover-border)}
.app-body{display:grid;grid-template-columns:232px 1fr 316px;height:calc(100vh - 52px);margin-top:52px;overflow:hidden}
.sidebar{background:var(--sb-bg);border-right:1px solid var(--glass-border);display:flex;flex-direction:column;gap:0;overflow-y:auto;padding:14px 10px;transition:background .3s}
.panel{background:var(--panel-bg);border-left:1px solid var(--glass-border);display:flex;flex-direction:column;transition:background .3s}
.sb-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;padding:0 4px;margin-bottom:7px}
.sb-section{margin-bottom:14px}
.model-select{width:100%;padding:8px 10px;border-radius:var(--radius);background:var(--input-bg);border:1px solid var(--glass-border);color:var(--text);font-size:.8rem;font-family:inherit;cursor:pointer;outline:none;transition:.2s}
.model-select:focus{border-color:var(--accent)}
.mbadge-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.mbadge{font-size:.65rem;padding:2px 8px;border-radius:20px;background:rgba(79,142,247,.1);border:1px solid rgba(79,142,247,.2);color:var(--accent);font-weight:600}
.stat-mini{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;font-size:.76rem;margin-bottom:5px}
.stat-mini-key{color:var(--muted)}
.stat-mini-val{font-weight:700;color:var(--accent)}
.btn-new{width:100%;padding:9px;border-radius:var(--radius);background:rgba(79,142,247,.1);border:1px solid rgba(79,142,247,.25);color:var(--accent);font-size:.8rem;font-weight:700;cursor:pointer;transition:.2s;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-new:hover{background:rgba(79,142,247,.2);transform:translateY(-1px)}
.agent-status{display:flex;align-items:center;gap:8px;padding:9px 10px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);font-size:.76rem}
.sdot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;transition:.3s}
.sdot.thinking{background:var(--gold);animation:pulse-dot 1s infinite}
.sdot.error{background:var(--red)}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.qchip{display:block;padding:6px 9px;background:var(--glass);border:1px solid var(--glass-border);border-radius:7px;font-size:.75rem;cursor:pointer;margin-bottom:5px;color:var(--text);transition:.2s}
.qchip:hover{background:var(--hover-bg);border-color:var(--hover-border);color:var(--accent)}
.chat-main{display:flex;flex-direction:column;overflow:hidden;background:var(--body-bg);transition:background .3s}
.messages{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;gap:9px;max-width:88%;animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg.assistant{align-self:flex-start}
.msg-av{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;margin-top:2px}
.msg.user .msg-av{background:rgba(79,142,247,.2)}
.msg.assistant .msg-av{background:rgba(34,197,94,.15)}
.msg-bubble{padding:11px 14px;border-radius:11px;font-size:.86rem;line-height:1.65;word-break:break-word}
.msg.user .msg-bubble{background:var(--msg-u);border:1px solid rgba(79,142,247,.2);border-top-right-radius:3px}
.msg.assistant .msg-bubble{background:var(--msg-a);border:1px solid var(--glass-border);border-top-left-radius:3px}
.msg-meta{font-size:.65rem;color:var(--muted);margin-top:3px;display:flex;gap:7px}
.msg.user .msg-meta{justify-content:flex-end}
.msg-streaming .msg-bubble{border-color:rgba(79,142,247,.35)}
.cursor{display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;animation:blink .7s infinite;vertical-align:text-bottom}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px;text-align:center;color:var(--muted)}
.welcome-icon{font-size:2.8rem}
.welcome-title{font-size:1.05rem;font-weight:800;color:var(--text)}
.welcome-sub{font-size:.82rem;line-height:1.6;max-width:340px}
.welcome-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:6px}
.wchip{padding:6px 13px;border-radius:20px;font-size:.76rem;background:var(--glass);border:1px solid var(--glass-border);cursor:pointer;transition:.2s;color:var(--text)}
.wchip:hover{background:var(--hover-bg);border-color:var(--hover-border);color:var(--accent)}
.input-area{padding:10px 14px;border-top:1px solid var(--glass-border);display:flex;gap:9px;align-items:flex-end}
.input-wrap{flex:1}
#msgInput{width:100%;padding:10px 13px;border-radius:var(--radius);background:var(--input-bg);border:1px solid var(--glass-border);color:var(--text);font-size:.86rem;font-family:inherit;resize:none;outline:none;transition:.2s;max-height:120px;min-height:42px;line-height:1.5}
#msgInput:focus{border-color:var(--accent)}
#msgInput::placeholder{color:var(--muted)}
.btn-send{width:42px;height:42px;border-radius:var(--radius);background:var(--accent);border:none;color:#fff;font-size:.95rem;cursor:pointer;transition:.2s;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.btn-send:hover{background:#3b7ef0;transform:translateY(-1px)}
.btn-send:disabled{background:rgba(79,142,247,.3);cursor:not-allowed;transform:none}
.tab-bar{display:flex;border-bottom:1px solid var(--glass-border);padding:0 6px;flex-shrink:0}
.tab-btn{flex:1;padding:11px 2px;font-size:.68rem;font-weight:700;text-align:center;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:.2s;text-transform:uppercase;letter-spacing:.04em}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-content{flex:1;overflow-y:auto;padding:12px}
.tab-panel{display:none}
.tab-panel.active{display:block}
.graph-flow{display:flex;align-items:center;gap:0;padding:12px 6px;overflow-x:auto;margin-bottom:10px}
.gn{min-width:64px;padding:9px 7px;border-radius:9px;text-align:center;border:2px solid var(--glass-border);background:var(--glass);transition:all .3s}
.gn-icon{font-size:1.2rem;line-height:1;margin-bottom:3px}
.gn-label{font-size:.6rem;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.gn-dur{font-size:.58rem;color:var(--muted)}
.gn-arrow{padding:0 3px;color:var(--muted);font-size:.75rem;display:flex;align-items:center;flex-shrink:0}
.gn.pending{opacity:.35}
.gn.running{border-color:var(--accent);background:rgba(79,142,247,.1);animation:node-pulse 1.2s infinite}
.gn.completed{border-color:var(--green);background:rgba(34,197,94,.08)}
.gn.completed .gn-label{color:var(--green)}
@keyframes node-pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,142,247,.5)}60%{box-shadow:0 0 0 6px rgba(79,142,247,0)}}
.trace-entry{display:flex;align-items:center;gap:9px;padding:7px 9px;background:var(--glass);border:1px solid var(--glass-border);border-radius:7px;font-size:.73rem;margin-bottom:5px}
.trace-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.trace-name{font-weight:700;color:var(--text);flex:1}
.trace-dur{color:var(--muted);font-family:monospace;font-size:.68rem}
.tool-entry{border-radius:9px;border:1px solid var(--glass-border);background:var(--glass);margin-bottom:7px;overflow:hidden}
.tool-entry:hover{border-color:var(--hover-border)}
.tool-header{display:flex;align-items:center;gap:7px;padding:9px 11px;cursor:pointer}
.tool-icon{font-size:1rem;flex-shrink:0}
.tool-name{font-weight:800;font-size:.8rem;flex:1;color:var(--text)}
.tool-lat{font-size:.68rem;color:var(--muted);font-family:monospace}
.tool-chevron{color:var(--muted);font-size:.7rem;transition:.2s}
.tool-entry.open .tool-chevron{transform:rotate(90deg)}
.tool-body{display:none;padding:0 11px 11px;font-size:.76rem}
.tool-entry.open .tool-body{display:block}
.tool-slabel{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin:7px 0 3px}
.tool-pre{background:rgba(0,0,0,.2);border-radius:5px;padding:7px;font-family:monospace;color:var(--text);line-height:1.5;white-space:pre-wrap;font-size:.72rem;max-height:110px;overflow-y:auto}
[data-theme="light"] .tool-pre{background:rgba(0,0,0,.05)}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
.stat-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:9px;padding:11px;text-align:center}
.stat-card-val{font-size:1.4rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:2px}
.stat-card-lbl{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.chart-lbl{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:12px 0 7px}
.chart-wrap{height:150px;position:relative}
.hist-entry{padding:9px 11px;background:var(--glass);border:1px solid var(--glass-border);border-radius:7px;margin-bottom:6px;font-size:.76rem;line-height:1.6}
.hist-role{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.hist-role.user{color:var(--accent)}
.hist-role.assistant{color:var(--green)}
.hist-content{color:var(--text);white-space:pre-wrap;word-break:break-word}
.hist-meta{display:flex;gap:7px;margin-top:5px;font-size:.62rem;color:var(--muted)}
.empty-state{text-align:center;padding:28px 14px;color:var(--muted);font-size:.8rem}
.empty-icon{font-size:1.8rem;margin-bottom:7px}
.err-toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#ef4444;color:#fff;padding:9px 18px;border-radius:9px;font-size:.82rem;font-weight:600;z-index:999;animation:fadeUp .3s ease}
@media(max-width:900px){.app-body{grid-template-columns:0 1fr 0}.sidebar{display:none}.panel{display:none}}
</style>
</head>
<body>
<nav class="navbar">
  <div class="nav-logo"><span style="font-size:1.25rem">🤖</span><span class="nav-logo-text">LangGraph Support Agent Studio</span></div>
  <span class="nav-badge">ReAct · LangGraph 0.2</span>
  <div class="nav-spacer"></div>
  <span class="nav-session" id="sessionBadge">—</span>
  <button class="btn-icon" onclick="toggleTheme()" title="Toggle theme"><i class="fas fa-circle-half-stroke"></i></button>
</nav>

<div class="app-body">
  <!-- SIDEBAR -->
  <aside class="sidebar">
    <div class="sb-section">
      <div class="sb-label">Model</div>
      <select class="model-select" id="modelSelect" onchange="updateBadge()">
        {% for m in models %}<option value="{{ m.id }}">{{ m.name }}</option>{% endfor %}
      </select>
      <div class="mbadge-row" id="mbadgeRow">
        {% for m in models %}<span class="mbadge" data-mid="{{ m.id }}" style="display:none">{{ m.badge }}</span>{% endfor %}
      </div>
    </div>
    <div class="sb-section">
      <div class="sb-label">Agent Status</div>
      <div class="agent-status"><div class="sdot" id="sdot"></div><span style="color:var(--muted);flex:1;font-size:.75rem" id="stext">Ready</span></div>
    </div>
    <div class="sb-section">
      <div class="sb-label">Session Stats</div>
      <div class="stat-mini"><span class="stat-mini-key">Turns</span><span class="stat-mini-val" id="sbTurns">0</span></div>
      <div class="stat-mini"><span class="stat-mini-key">Tool Calls</span><span class="stat-mini-val" id="sbTools">0</span></div>
      <div class="stat-mini"><span class="stat-mini-key">~Tokens</span><span class="stat-mini-val" id="sbTok">0</span></div>
      <div class="stat-mini"><span class="stat-mini-key">Avg Latency</span><span class="stat-mini-val" id="sbLat">—</span></div>
    </div>
    <div class="sb-section">
      <div class="sb-label">Quick Prompts</div>
      <div class="qchip" onclick="fill(this.textContent)">What's your return policy?</div>
      <div class="qchip" onclick="fill(this.textContent)">Track order ORD-928741</div>
      <div class="qchip" onclick="fill(this.textContent)">Tell me about your laptops</div>
      <div class="qchip" onclick="fill(this.textContent)">My phone arrived broken</div>
      <div class="qchip" onclick="fill(this.textContent)">I want to speak to a human</div>
    </div>
    <button class="btn-new" onclick="newChat()"><i class="fas fa-plus"></i> New Conversation</button>
  </aside>

  <!-- CHAT -->
  <main class="chat-main">
    <div class="messages" id="messages">
      <div class="welcome" id="welcomeScreen">
        <div class="welcome-icon">🤖</div>
        <div class="welcome-title">TechStore Support Agent</div>
        <p class="welcome-sub">Powered by LangGraph ReAct + HuggingFace Inference API. I can look up orders, search FAQs, create tickets, and more.</p>
        <div class="welcome-chips">
          <div class="wchip" onclick="fill(this.textContent)">What is your return policy?</div>
          <div class="wchip" onclick="fill(this.textContent)">Where is my order ORD-482910?</div>
          <div class="wchip" onclick="fill(this.textContent)">Do you have laptops in stock?</div>
          <div class="wchip" onclick="fill(this.textContent)">Help with a warranty claim</div>
        </div>
      </div>
    </div>
    <div class="input-area">
      <div class="input-wrap">
        <textarea id="msgInput" rows="1" placeholder="Type your message…" onkeydown="onKey(event)" oninput="autoResize(this)"></textarea>
      </div>
      <button class="btn-send" id="sendBtn" onclick="send()"><i class="fas fa-paper-plane"></i></button>
    </div>
  </main>

  <!-- PANEL -->
  <aside class="panel">
    <div class="tab-bar">
      <div class="tab-btn active" onclick="switchTab('trace',this)">🗺 Trace</div>
      <div class="tab-btn" onclick="switchTab('tools',this)">🛠 Tools</div>
      <div class="tab-btn" onclick="switchTab('stats',this)">📈 Stats</div>
      <div class="tab-btn" onclick="switchTab('history',this)">📜 History</div>
    </div>
    <div class="tab-content">

      <div class="tab-panel active" id="tab-trace">
        <div class="graph-flow" id="graphFlow">
          <div class="gn pending" id="gn-router"><div class="gn-icon">🔀</div><div class="gn-label">Router</div><div class="gn-dur" id="gd-router">—</div></div>
          <div class="gn-arrow"><i class="fas fa-chevron-right"></i></div>
          <div class="gn pending" id="gn-agent"><div class="gn-icon">🧠</div><div class="gn-label">Agent</div><div class="gn-dur" id="gd-agent">—</div></div>
          <div class="gn-arrow"><i class="fas fa-chevron-right"></i></div>
          <div class="gn pending" id="gn-tool_executor"><div class="gn-icon">🔧</div><div class="gn-label">Tools</div><div class="gn-dur" id="gd-tool_executor">—</div></div>
          <div class="gn-arrow"><i class="fas fa-chevron-right"></i></div>
          <div class="gn pending" id="gn-responder"><div class="gn-icon">📤</div><div class="gn-label">Respond</div><div class="gn-dur" id="gd-responder">—</div></div>
        </div>
        <div class="sb-label" style="padding:0 2px;margin-bottom:7px">Node Timeline</div>
        <div id="traceLog"><div class="empty-state"><div class="empty-icon">🗺️</div>Send a message to start tracing</div></div>
      </div>

      <div class="tab-panel" id="tab-tools">
        <div class="sb-label" style="padding:0 2px;margin-bottom:9px">Call Log</div>
        <div id="toolLog"><div class="empty-state"><div class="empty-icon">🛠️</div>Tool calls will appear here</div></div>
      </div>

      <div class="tab-panel" id="tab-stats">
        <div class="stat-row">
          <div class="stat-card"><div class="stat-card-val" id="stTurns">0</div><div class="stat-card-lbl">Turns</div></div>
          <div class="stat-card"><div class="stat-card-val" id="stTools">0</div><div class="stat-card-lbl">Tool Calls</div></div>
          <div class="stat-card"><div class="stat-card-val" id="stTok">0</div><div class="stat-card-lbl">~Tokens</div></div>
          <div class="stat-card"><div class="stat-card-val" id="stLat">—</div><div class="stat-card-lbl">Avg Latency</div></div>
        </div>
        <div class="chart-lbl">Tool Usage</div>
        <div class="chart-wrap"><canvas id="toolChart"></canvas></div>
        <div class="chart-lbl">Response Latency (ms)</div>
        <div class="chart-wrap"><canvas id="latChart"></canvas></div>
      </div>

      <div class="tab-panel" id="tab-history">
        <div id="histLog"><div class="empty-state"><div class="empty-icon">📜</div>Conversation history will appear here</div></div>
      </div>

    </div>
  </aside>
</div>
<script src="/static/app.js"></script>
</body>
</html>


# ══════════════════════════════════════════════════════════════════════════════
# FILE: static/app.js
# ══════════════════════════════════════════════════════════════════════════════

'use strict';
let sessionId = uuid4(), isStreaming = false, streamEl = null, streamBuf = '';
let toolChart = null, latChart = null;
const _pending = {};
const NODES = ['router','agent','tool_executor','responder'];
const TOOL_ICONS = {search_faq:'🔍',check_order_status:'📦',create_ticket:'🎫',get_product_info:'🛍️',escalate_to_human:'👤'};
const NODE_COLORS = {router:'#4f8ef7',agent:'#22c55e',tool_executor:'#f59e0b',responder:'#a78bfa'};

function uuid4(){return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,c=>{const r=Math.random()*16|0;return(c==='x'?r:(r&0x3|0x8)).toString(16)})}
function esc(t){return String(t).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
function fmt(v){return v>=1000?(v/1000).toFixed(1)+'k':v}
function dark(){return document.documentElement.getAttribute('data-theme')!=='light'}

document.addEventListener('DOMContentLoaded',()=>{
    document.getElementById('sessionBadge').textContent = sessionId.slice(0,8)+'…';
    updateBadge();
    initCharts();
});

function toggleTheme(){
    const n = dark()?'light':'dark';
    document.documentElement.setAttribute('data-theme',n);
    localStorage.setItem('lgsa-theme',n);
    rebuildCharts();
}
function updateBadge(){
    const v = document.getElementById('modelSelect').value;
    document.querySelectorAll('#mbadgeRow [data-mid]').forEach(el=>{el.style.display=el.dataset.mid===v?'inline-flex':'none'});
}
function fill(t){const el=document.getElementById('msgInput');el.value=t;el.focus();autoResize(el)}
function autoResize(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,120)+'px'}
function onKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();send()}}

function newChat(){
    if(isStreaming)return;
    sessionId=uuid4();
    document.getElementById('sessionBadge').textContent=sessionId.slice(0,8)+'…';
    document.getElementById('messages').innerHTML=`<div class="welcome" id="welcomeScreen"><div class="welcome-icon">🤖</div><div class="welcome-title">TechStore Support Agent</div><p class="welcome-sub">Start a new conversation.</p><div class="welcome-chips"><div class="wchip" onclick="fill(this.textContent)">What is your return policy?</div><div class="wchip" onclick="fill(this.textContent)">Track order ORD-482910</div><div class="wchip" onclick="fill(this.textContent)">Do you have laptops in stock?</div></div></div>`;
    document.getElementById('toolLog').innerHTML='<div class="empty-state"><div class="empty-icon">🛠️</div>Tool calls will appear here</div>';
    document.getElementById('traceLog').innerHTML='<div class="empty-state"><div class="empty-icon">🗺️</div>Send a message to start tracing</div>';
    document.getElementById('histLog').innerHTML='<div class="empty-state"><div class="empty-icon">📜</div>Conversation history will appear here</div>';
    NODES.forEach(n=>setNode(n,'pending',null));
    setStatus('ready');
    ['sbTurns','sbTools','sbTok','stTurns','stTools','stTok'].forEach(id=>{const el=document.getElementById(id);if(el)el.textContent='0'});
    ['sbLat','stLat'].forEach(id=>{const el=document.getElementById(id);if(el)el.textContent='—'});
    if(toolChart){toolChart.data.labels=[];toolChart.data.datasets[0].data=[];toolChart.update()}
    if(latChart){latChart.data.labels=[];latChart.data.datasets[0].data=[];latChart.update()}
    fetch('/api/reset',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({session_id:sessionId,model:document.getElementById('modelSelect').value})});
}

async function send(){
    if(isStreaming)return;
    const input=document.getElementById('msgInput');
    const msg=input.value.trim();
    if(!msg)return;
    const welcome=document.getElementById('welcomeScreen');
    if(welcome)welcome.remove();
    input.value='';input.style.height='auto';
    isStreaming=true;streamBuf='';
    document.getElementById('sendBtn').disabled=true;
    setStatus('thinking');
    NODES.forEach(n=>setNode(n,'pending',null));
    appendMsg('user',msg);
    streamEl=appendMsg('assistant','',true);
    try{
        const res=await fetch('/api/chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:msg,model:document.getElementById('modelSelect').value,session_id:sessionId})});
        const reader=res.body.getReader();const dec=new TextDecoder();let buf='';
        while(true){
            const{done,value}=await reader.read();
            if(done)break;
            buf+=dec.decode(value,{stream:true});
            const parts=buf.split('\n\n');buf=parts.pop();
            for(const p of parts){if(p.startsWith('data: ')){try{handleEv(JSON.parse(p.slice(6)))}catch(e){console.warn(e)}}}
        }
    }catch(err){showErr('Connection error: '+err.message);finalize(null)}
}

function handleEv(ev){
    switch(ev.type){
        case 'token': addToken(ev.content);break;
        case 'node_enter': setNode(ev.node,'running',null);break;
        case 'node_exit': setNode(ev.node,'completed',ev.duration_ms);addTrace(ev.node,ev.duration_ms);break;
        case 'tool_call': addTool(ev);break;
        case 'tool_result': updateTool(ev);break;
        case 'done': finalize(ev.message.content);updateStats(ev.analytics);addHist(ev.message);break;
        case 'error': showErr(ev.message);finalize(null);break;
    }
}

function addToken(t){
    streamBuf+=t;
    if(!streamEl)return;
    const b=streamEl.querySelector('.msg-bubble');
    if(!b)return;
    const cur=b.querySelector('.cursor');
    if(cur)cur.insertAdjacentText('beforebegin',t);
}

function finalize(content){
    isStreaming=false;
    document.getElementById('sendBtn').disabled=false;
    setStatus('ready');
    if(streamEl){
        const b=streamEl.querySelector('.msg-bubble');
        const cur=b?b.querySelector('.cursor'):null;
        if(cur)cur.remove();
        if(content&&b)b.textContent=content;
        streamEl.classList.remove('msg-streaming');
        streamEl=null;
    }
    streamBuf='';
    scrollChat();
}

function appendMsg(role,content,streaming=false){
    const c=document.getElementById('messages');
    const d=document.createElement('div');
    d.className=`msg ${role}${streaming?' msg-streaming':''}`;
    const av=role==='user'?'👤':'🤖';
    const bub=streaming?`<div class="msg-bubble">${esc(content)}<span class="cursor"></span></div>`:`<div class="msg-bubble">${esc(content)}</div>`;
    d.innerHTML=`<div class="msg-av">${av}</div><div>${bub}<div class="msg-meta">${role}</div></div>`;
    c.appendChild(d);scrollChat();return d;
}
function scrollChat(){const c=document.getElementById('messages');c.scrollTop=c.scrollHeight}

function setNode(node,state,ms){
    const el=document.getElementById('gn-'+node);if(!el)return;
    el.className='gn '+state;
    const d=document.getElementById('gd-'+node);
    if(d)d.textContent=ms!=null?ms+'ms':(state==='running'?'…':'—');
}

function addTrace(node,ms){
    const tl=document.getElementById('traceLog');
    const emp=tl.querySelector('.empty-state');if(emp)emp.remove();
    const color=NODE_COLORS[node]||'#8892a4';
    const d=document.createElement('div');d.className='trace-entry';
    d.innerHTML=`<div class="trace-dot" style="background:${color}"></div><div class="trace-name">${node}</div><div class="trace-dur">${ms!=null?ms+'ms':'—'}</div>`;
    tl.insertBefore(d,tl.firstChild);
    if(tl.children.length>20)tl.lastChild.remove();
}

function addTool(ev){
    const log=document.getElementById('toolLog');
    const emp=log.querySelector('.empty-state');if(emp)emp.remove();
    const icon=TOOL_ICONS[ev.name]||'🔧';
    const id='te-'+Date.now();
    const d=document.createElement('div');d.className='tool-entry';d.id=id;
    d.innerHTML=`<div class="tool-header" onclick="toggleTool('${id}')"><div class="tool-icon">${icon}</div><div class="tool-name">${ev.name}</div><div class="tool-lat" id="${id}-lat">…</div><div class="tool-chevron"><i class="fas fa-chevron-right"></i></div></div><div class="tool-body"><div class="tool-slabel">Input</div><div class="tool-pre">${esc(JSON.stringify(ev.input,null,2))}</div><div class="tool-slabel">Output</div><div class="tool-pre" id="${id}-out">Waiting…</div></div>`;
    log.insertBefore(d,log.firstChild);
    _pending[ev.name]=id;
}

function updateTool(ev){
    const id=_pending[ev.name];if(!id)return;
    const out=document.getElementById(id+'-out');if(out)out.textContent=ev.output;
    const lat=document.getElementById(id+'-lat');if(lat)lat.textContent=(ev.latency_ms||0)+'ms';
    delete _pending[ev.name];
}
function toggleTool(id){document.getElementById(id).classList.toggle('open')}

function updateStats(d){
    if(!d)return;
    document.getElementById('sbTurns').textContent=d.turn_count;
    document.getElementById('sbTools').textContent=d.tool_call_count;
    document.getElementById('sbTok').textContent=fmt(d.total_tokens);
    document.getElementById('sbLat').textContent=d.avg_latency_ms?d.avg_latency_ms+'ms':'—';
    document.getElementById('stTurns').textContent=d.turn_count;
    document.getElementById('stTools').textContent=d.tool_call_count;
    document.getElementById('stTok').textContent=fmt(d.total_tokens);
    document.getElementById('stLat').textContent=d.avg_latency_ms?d.avg_latency_ms+'ms':'—';
    if(toolChart&&d.tool_usage){toolChart.data.labels=Object.keys(d.tool_usage);toolChart.data.datasets[0].data=Object.values(d.tool_usage);toolChart.update('none')}
    if(latChart&&d.latency_history){latChart.data.labels=d.latency_history.map((_,i)=>'T'+(i+1));latChart.data.datasets[0].data=d.latency_history;latChart.update('none')}
}

function addHist(msg){
    const log=document.getElementById('histLog');
    const emp=log.querySelector('.empty-state');if(emp)emp.remove();
    const ts=msg.timestamp?new Date(msg.timestamp).toLocaleTimeString():'';
    const d=document.createElement('div');d.className='hist-entry';
    d.innerHTML=`<div class="hist-role ${msg.role}">${msg.role}</div><div class="hist-content">${esc(msg.content.slice(0,280))}${msg.content.length>280?'…':''}</div><div class="hist-meta"><span>${ts}</span>${msg.token_count?'<span>~'+msg.token_count+' tokens</span>':''}</div>`;
    log.insertBefore(d,log.firstChild);
}

function setStatus(s){
    const dot=document.getElementById('sdot');const txt=document.getElementById('stext');
    dot.className='sdot'+(s==='thinking'?' thinking':s==='error'?' error':'');
    txt.textContent={ready:'Ready',thinking:'Thinking…',error:'Error'}[s]||s;
}

function switchTab(name,btn){
    document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('tab-'+name).classList.add('active');
    if(name==='stats')rebuildCharts();
}

function chartColors(){
    const d=dark();
    return{text:d?'#8892a4':'#4b5675',grid:d?'rgba(255,255,255,.05)':'rgba(0,0,0,.07)',
        tip:{backgroundColor:d?'rgba(7,13,31,.97)':'rgba(255,255,255,.97)',titleColor:d?'#e2e8f0':'#0f172a',bodyColor:d?'#8892a4':'#4b5675',borderColor:d?'rgba(79,142,247,.3)':'rgba(37,99,235,.2)',borderWidth:1}};
}

function initCharts(){
    const c=chartColors();
    const base={responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false},tooltip:c.tip}};
    const sc={ticks:{color:c.text},grid:{color:c.grid}};
    toolChart=new Chart(document.getElementById('toolChart'),{type:'bar',data:{labels:[],datasets:[{data:[],backgroundColor:['rgba(79,142,247,.7)','rgba(245,158,11,.7)','rgba(34,197,94,.7)','rgba(6,182,212,.7)','rgba(167,139,250,.7)'],borderRadius:4}]},options:{...base,indexAxis:'y',scales:{x:sc,y:sc}}});
    latChart=new Chart(document.getElementById('latChart'),{type:'line',data:{labels:[],datasets:[{data:[],borderColor:'#4f8ef7',backgroundColor:'rgba(79,142,247,.08)',borderWidth:2,pointRadius:3,tension:.4,fill:true}]},options:{...base,scales:{x:sc,y:{...sc,title:{display:true,text:'ms',color:c.text,font:{size:10}}}}}});
}

function rebuildCharts(){if(toolChart){toolChart.destroy();toolChart=null}if(latChart){latChart.destroy();latChart=null}initCharts()}

function showErr(msg){
    setStatus('error');
    const t=document.createElement('div');t.className='err-toast';t.textContent='⚠ '+msg;
    document.body.appendChild(t);setTimeout(()=>t.remove(),5000);
}


# ══════════════════════════════════════════════════════════════════════════════
# FILE: README.md
# ══════════════════════════════════════════════════════════════════════════════

---
title: langgraph-support-agent
colorFrom: blue
colorTo: indigo
sdk: docker
---

<div align="center">

<h1>🤖 LangGraph Support Agent Studio</h1>
<img src="https://readme-typing-svg.demolab.com?font=Fira+Code&size=22&duration=3000&pause=1000&color=4F8EF7&center=true&vCenter=true&width=700&lines=Multi-turn+Customer+Support+Agent+powered+by+LangGraph;5+AI+Tools+%C2%B7+4+HuggingFace+Models+%C2%B7+ReAct+Architecture;Live+Graph+Tracing+%C2%B7+Tool+Logs+%C2%B7+Session+Analytics" alt="Typing SVG"/>

<br/>

[![Python](https://img.shields.io/badge/Python-3.11+-3b82f6?style=for-the-badge&logo=python&logoColor=white)](https://www.python.org/)
[![Flask](https://img.shields.io/badge/Flask-3.x-4f46e5?style=for-the-badge&logo=flask&logoColor=white)](https://flask.palletsprojects.com/)
[![LangGraph](https://img.shields.io/badge/LangGraph-0.2.x-06b6d4?style=for-the-badge)](https://langchain-ai.github.io/langgraph/)
[![Docker](https://img.shields.io/badge/Docker-Ready-3b82f6?style=for-the-badge&logo=docker&logoColor=white)](https://www.docker.com/)
[![HuggingFace](https://img.shields.io/badge/HuggingFace-Spaces-ffcc00?style=for-the-badge&logo=huggingface&logoColor=black)](https://huggingface.co/mnoorchenar/spaces)
[![Status](https://img.shields.io/badge/Status-Active-22c55e?style=for-the-badge)](#)

**🤖 LangGraph Support Agent Studio** — A production-grade multi-turn customer support agent built with LangGraph's ReAct architecture, powered entirely by free HuggingFace Inference API models, with live graph tracing, tool call logging, and session analytics streamed in real time via SSE.

---

</div>

## ✨ Features

<table>
  <tr><td>🧠 <b>ReAct Agent Loop</b></td><td>LangGraph StateGraph orchestrates Thought → Action → Observation with up to 4 tool calls per turn, parsed from free-tier HuggingFace model output</td></tr>
  <tr><td>🔧 <b>5 Live Tools</b></td><td>search_faq, check_order_status, create_ticket, get_product_info, escalate_to_human — each with real logic and mock data</td></tr>
  <tr><td>🗺️ <b>Live Graph Trace</b></td><td>Animated node visualizer showing Router → Agent → Tool Executor → Responder with per-node timing via SSE</td></tr>
  <tr><td>📡 <b>Token Streaming</b></td><td>Server-Sent Events stream LLM tokens and graph events simultaneously, updating chat, trace, and tool log in real time</td></tr>
  <tr><td>🔒 <b>Secure by Design</b></td><td>HF_TOKEN injected via HuggingFace Space secrets, never committed to source. All state is in-memory per session</td></tr>
  <tr><td>🐳 <b>Containerized Deployment</b></td><td>Docker-first with gunicorn gthread workers, HuggingFace Spaces-compatible (uid 1000, port 7860)</td></tr>
</table>

## 🏗️ Architecture

```
Browser (SSE) ◀──▶ Flask + gunicorn
                         │
                  LangGraph StateGraph
                  ┌──────────────────┐
                  │ Router → Agent   │
                  │   ↓       ↑      │
                  │ Tool Exec ←┘     │
                  │   ↓              │
                  │ Responder → END  │
                  └──────────────────┘
                         │
                HuggingFace Inference API
          Mistral 7B · Zephyr 7B · Phi-3 · Llama 3
```

## 🚀 Getting Started

```bash
git clone https://github.com/mnoorchenar/langgraph-support-agent.git
cd langgraph-support-agent
python -m venv venv && source venv/bin/activate
pip install -r requirements.txt
cp .env.example .env          # add your HF_TOKEN
python app.py                 # open http://localhost:7860
```

## 🐳 Docker

```bash
docker build -t langgraph-support-agent .
docker run -p 7860:7860 -e HF_TOKEN=hf_your_token_here langgraph-support-agent
```

For HuggingFace Spaces: push this repo and add `HF_TOKEN` as a Space secret under **Settings → Variables and Secrets**.

## 📊 Dashboard Modules

| Module | Description | Status |
|--------|-------------|--------|
| 💬 Chat Interface | Multi-turn streaming chat with SSE token delivery | ✅ Live |
| 🗺️ Graph Trace | Animated LangGraph node visualizer with per-node timing | ✅ Live |
| 🛠️ Tool Call Log | Expandable log of every tool invocation with input/output | ✅ Live |
| 📈 Session Analytics | Chart.js charts — tool usage frequency and latency history | ✅ Live |
| 📜 Conversation History | Full chat history with timestamps and estimated token counts | ✅ Live |
| 🤖 Model Selector | Switch between 4 HuggingFace-hosted LLMs mid-session | ✅ Live |

## 🧠 ML Models

```python
models = {
    "mistral":  "mistralai/Mistral-7B-Instruct-v0.3",
    "zephyr":   "HuggingFaceH4/zephyr-7b-beta",
    "phi3":     "microsoft/Phi-3-mini-4k-instruct",
    "llama3":   "meta-llama/Meta-Llama-3-8B-Instruct",
}
agent_type   = "ReAct (Reason + Act)"
tool_count   = 5
max_iters    = 4
streaming    = True   # token-level SSE via InferenceClient
```

## 📁 Project Structure

```
langgraph-support-agent/
├── app.py                    # Flask app, SSE endpoints, session management
├── events.py                 # Thread-safe per-session SSE event queue
├── agent/
│   ├── state.py              # AgentState TypedDict for LangGraph
│   ├── tools.py              # 5 tool functions + execute_tool dispatcher
│   ├── llm.py                # HF InferenceClient wrapper, ReAct prompt, parsers
│   ├── nodes.py              # Router, Agent, ToolExecutor, Responder node functions
│   └── graph.py              # StateGraph builder with conditional routing
├── data/
│   └── faq.json              # 15-entry FAQ knowledge base
├── templates/
│   └── index.html            # Single-page UI, 4-panel layout, SSE client
├── static/
│   └── app.js                # SSE client, Chart.js, node trace UI, analytics
├── requirements.txt
├── Dockerfile
├── .env.example
└── docs/
    └── project-template.html # Portfolio page
```

## 👨‍💻 Author

<div align="center">
<img src="https://avatars.githubusercontent.com/mnoorchenar" width="100" style="border-radius:50%"/>

**Mohammad Noorchenarboo** — Data Scientist | AI Researcher | Biostatistician

📍 Ontario, Canada · [LinkedIn](https://www.linkedin.com/in/mnoorchenar) · [Website](https://mnoorchenar.github.io/) · [HuggingFace](https://huggingface.co/mnoorchenar/spaces) · [GitHub](https://github.com/mnoorchenar)
</div>

## Disclaimer

This project is developed strictly for educational and research purposes. All datasets are synthetically generated — no real user data is stored. Provided "as is" without warranty of any kind.

## 📜 License

MIT License. See `LICENSE` for details.


# ══════════════════════════════════════════════════════════════════════════════
# FILE: docs/project-template.html
# ══════════════════════════════════════════════════════════════════════════════

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>LangGraph Support Agent Studio · Mohammad Noorchenarboo</title>
<script>document.documentElement.setAttribute('data-theme',localStorage.getItem('mn-theme')||'dark')</script>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%234f8ef7'/%3E%3Cstop offset='100%25' stop-color='%2306b6d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='%23070d1f'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='central' text-anchor='middle' font-family='Segoe UI' font-weight='900' font-size='26' fill='url(%23g)'%3EMN%3C/text%3E%3C/svg%3E">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>
<style>
:root{--accent:#4f8ef7;--gold:#f59e0b;--teal:#06b6d4;--green:#22c55e;--radius:14px;--body-bg:#070d1f;--text:#e2e8f0;--muted:#8892a4;--glass:rgba(255,255,255,.04);--glass-border:rgba(255,255,255,.08);--card-hover-bg:rgba(255,255,255,.07);--card-hover-border:rgba(79,142,247,.3);--section-alt:#0b1120}
[data-theme="light"]{--body-bg:#f8fafc;--text:#0f172a;--muted:#4b5675;--glass:rgba(0,0,0,.03);--glass-border:rgba(0,0,0,.08);--card-hover-bg:rgba(0,0,0,.05);--card-hover-border:rgba(37,99,235,.25);--section-alt:#f1f5f9}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--body-bg);color:var(--text);transition:background .35s,color .35s}
a{text-decoration:none}
.s-tag{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:3px 10px;border-radius:6px;margin-bottom:10px}
.s-tag-blue{background:rgba(79,142,247,.12);color:var(--accent);border:1px solid rgba(79,142,247,.2)}
.s-tag-gold{background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.2)}
.s-tag-teal{background:rgba(6,182,212,.12);color:var(--teal);border:1px solid rgba(6,182,212,.2)}
.grad-text{background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero{padding:80px 24px 56px;background:var(--body-bg);position:relative;overflow:hidden;transition:background .35s}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 55% at 50% -10%,rgba(79,142,247,.15) 0%,transparent 65%)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(79,142,247,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(79,142,247,.035) 1px,transparent 1px);background-size:48px 48px}
.hero-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.breadcrumb{font-size:.78rem;color:var(--muted);margin-bottom:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted);transition:.2s}.breadcrumb a:hover{color:var(--accent)}.breadcrumb span{opacity:.4}
.tag-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:.75rem;font-weight:700;letter-spacing:.04em}
.pill-blue{background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.25);color:var(--accent)}
.pill-gold{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);color:var(--gold)}
.pill-teal{background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.25);color:var(--teal)}
h1{font-size:clamp(1.7rem,3.5vw,2.7rem);font-weight:900;line-height:1.2;margin-bottom:20px;max-width:820px}
.hero-sub{font-size:1rem;color:var(--muted);max-width:680px;margin-bottom:28px;line-height:1.65}
.hero-sub strong{color:var(--text)}
.hero-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:24px;font-size:.83rem;color:var(--muted)}
.hero-meta span{display:flex;align-items:center;gap:6px}
.hero-meta i{color:var(--accent)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:8px;font-size:.85rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .2s;font-family:inherit;text-decoration:none}
.btn-blue{background:rgba(79,142,247,.18);color:var(--accent);border-color:rgba(79,142,247,.35)}.btn-blue:hover{background:rgba(79,142,247,.3);transform:translateY(-2px)}
.btn-gold{background:rgba(245,158,11,.15);color:var(--gold);border-color:rgba(245,158,11,.35)}.btn-gold:hover{background:rgba(245,158,11,.28);transform:translateY(-2px)}
.btn-gray{background:var(--glass);color:var(--text);border-color:var(--glass-border)}.btn-gray:hover{background:var(--card-hover-bg);transform:translateY(-2px)}
.btn-back{background:var(--glass);color:var(--muted);border-color:var(--glass-border)}.btn-back:hover{color:var(--accent);border-color:var(--card-hover-border);transform:translateY(-2px)}
.stats-bar{background:var(--section-alt);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border)}
.stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--glass-border)}
.stat-item{background:var(--section-alt);padding:22px 16px;text-align:center}
.stat-val{font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;margin-bottom:4px}
.stat-label{font-size:.75rem;color:var(--muted);line-height:1.4}
.main-layout{max-width:1100px;margin:0 auto;padding:48px 24px;display:grid;grid-template-columns:1fr 310px;gap:32px;align-items:start}
.content-col{display:flex;flex-direction:column;gap:28px}
.sidebar{position:sticky;top:80px;display:flex;flex-direction:column;gap:20px}
.card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:28px;transition:all .25s}
.card:hover{background:var(--card-hover-bg);border-color:var(--card-hover-border);transform:translateY(-3px)}
.card-title{font-size:1rem;font-weight:800;margin-bottom:18px;color:var(--text);display:flex;align-items:center;gap:10px}
.card-title i{color:var(--accent);font-size:.9rem}
.narrative{font-size:.92rem;color:var(--muted);margin-bottom:10px;line-height:1.7}
.narrative strong{color:var(--text)}
.pipeline{display:flex;align-items:stretch;gap:0;margin:20px 0;overflow-x:auto;padding-bottom:4px}
.pipe-step{flex:1;min-width:110px;background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;padding:14px 8px;text-align:center;transition:.25s}
.pipe-step:hover{background:var(--card-hover-bg);border-color:var(--card-hover-border);transform:translateY(-3px)}
.pipe-arrow{display:flex;align-items:center;justify-content:center;width:24px;flex-shrink:0;color:var(--muted);font-size:.75rem;padding-top:8px}
.pipe-icon{font-size:1.6rem;margin-bottom:7px;line-height:1}
.pipe-label{font-size:.72rem;font-weight:700;color:var(--text);margin-bottom:3px}
.pipe-sub{font-size:.67rem;color:var(--muted);line-height:1.4}
.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.mod-card{border-radius:12px;padding:18px;border:1px solid;transition:.25s}
.mod-card:hover{transform:translateY(-3px)}
.mod-1{background:rgba(79,142,247,.05);border-color:rgba(79,142,247,.2)}
.mod-2{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.18)}
.mod-3{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.18)}
.mod-4{background:rgba(6,182,212,.05);border-color:rgba(6,182,212,.18)}
.mod-5{background:rgba(167,139,250,.05);border-color:rgba(167,139,250,.2)}
.mod-6{background:rgba(34,197,94,.05);border-color:rgba(34,197,94,.18)}
.mod-badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:7px;margin-bottom:7px}
.mod-name{font-size:.9rem;font-weight:800;margin-bottom:4px;color:var(--text)}
.mod-desc{font-size:.75rem;color:var(--muted);line-height:1.5;margin-bottom:9px}
.mod-detail{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--glass-border);font-size:.74rem}
.mod-detail:last-child{border-bottom:none}
.mod-detail-key{color:var(--muted)}
.insight-banner{background:linear-gradient(135deg,rgba(79,142,247,.07),rgba(245,158,11,.07));border:1px solid rgba(79,142,247,.22);border-radius:var(--radius);padding:20px;margin-top:8px;display:flex;gap:14px;align-items:flex-start}
.insight-icon{font-size:1.8rem;flex-shrink:0}
.insight-body h4{font-size:.93rem;font-weight:800;color:var(--text);margin-bottom:4px}
.insight-body p{font-size:.83rem;color:var(--muted);line-height:1.6}
.insight-body strong{color:var(--accent)}
.item-stack{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.item-row{display:flex;align-items:center;gap:11px;padding:10px 13px;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;font-size:.81rem;transition:.2s}
.item-row:hover{background:var(--card-hover-bg)}
.item-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.item-name{color:var(--text);font-weight:600;flex:1}
.item-sub{font-size:.7rem;color:var(--muted)}
.item-tag{font-size:.68rem;padding:2px 8px;border-radius:6px;font-weight:700;white-space:nowrap}
.tag-blue{background:rgba(79,142,247,.15);color:var(--accent);border:1px solid rgba(79,142,247,.3)}
.tag-red{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.tag-green{background:rgba(34,197,94,.15);color:var(--green);border:1px solid rgba(34,197,94,.3)}
.tag-gold{background:rgba(245,158,11,.15);color:var(--gold);border:1px solid rgba(245,158,11,.3)}
.demo-block{background:rgba(79,142,247,.04);border:1px solid rgba(79,142,247,.15);border-radius:var(--radius);padding:26px}
.demo-intro{font-size:.84rem;color:var(--muted);margin-bottom:16px;font-style:italic}
.scenario-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.scen-btn{padding:6px 15px;border-radius:20px;font-size:.78rem;font-weight:600;cursor:pointer;background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);transition:.2s;font-family:inherit}
.scen-btn.active,.scen-btn:hover{background:rgba(79,142,247,.15);border-color:rgba(79,142,247,.35);color:var(--accent)}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.res-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:9px;padding:13px;text-align:center;transition:.2s}
.res-card:hover{background:var(--card-hover-bg);transform:translateY(-2px)}
.res-label{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.res-val{font-size:1.3rem;font-weight:900;line-height:1.1}
.res-sub{font-size:.7rem;color:var(--muted);margin-top:2px}
.risk-bar-wrap{margin:12px 0}
.risk-bar-label{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:4px}
.risk-bar-track{height:9px;border-radius:5px;background:var(--glass);overflow:hidden}
.risk-bar-fill{height:100%;border-radius:5px;transition:width .7s ease}
.demo-note{font-size:.71rem;color:var(--muted);font-style:italic;margin-top:13px;text-align:center}
.chart-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.chart-tab{padding:6px 13px;border-radius:20px;font-size:.78rem;font-weight:600;cursor:pointer;background:var(--glass);border:1px solid var(--glass-border);color:var(--muted);transition:.2s}
.chart-tab.active{background:rgba(79,142,247,.15);border-color:rgba(79,142,247,.35);color:var(--accent)}
.chart-panel{display:none}
.chart-panel.active{display:block}
.chart-wrap{position:relative;height:270px}
.chart-caption{font-size:.78rem;color:var(--muted);margin-top:9px;font-style:italic;text-align:center}
.takeaway-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.takeaway{background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;padding:18px;text-align:center;transition:.2s}
.takeaway:hover{background:var(--card-hover-bg);transform:translateY(-3px)}
.tk-icon{font-size:1.8rem;margin-bottom:7px}
.tk-val{font-size:1.1rem;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:3px}
.tk-label{font-size:.76rem;color:var(--muted);line-height:1.45}
.sidebar-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:18px}
.sidebar-card h3{font-size:.79rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.tldr-text{font-size:.85rem;color:var(--muted);line-height:1.7}
.tldr-text strong{color:var(--text)}
.info-row{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--glass-border);font-size:.8rem;gap:8px}
.info-row:last-child{border-bottom:none}
.info-key{color:var(--muted);flex-shrink:0}
.info-val{color:var(--text);font-weight:600;text-align:right;font-size:.77rem}
.tech-pills{display:flex;flex-wrap:wrap;gap:6px}
.tech-pill{background:rgba(79,142,247,.1);border:1px solid rgba(79,142,247,.2);border-radius:6px;padding:3px 9px;font-size:.73rem;color:var(--accent);font-weight:600}
.sidebar-links{display:flex;flex-direction:column;gap:7px}
.sidebar-link{display:flex;align-items:center;gap:9px;padding:8px 11px;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;font-size:.8rem;color:var(--muted);transition:.2s;text-decoration:none}
.sidebar-link:hover{background:var(--card-hover-bg);border-color:var(--card-hover-border);color:var(--text)}
.sidebar-link i{color:var(--accent);width:15px;text-align:center}
.hf-btn{display:flex;align-items:center;gap:9px;padding:11px 14px;background:linear-gradient(135deg,rgba(255,175,7,.12),rgba(255,175,7,.06));border:1px solid rgba(255,175,7,.3);border-radius:9px;font-size:.83rem;font-weight:700;color:#f59e0b;transition:.2s;text-decoration:none}
.hf-btn:hover{background:linear-gradient(135deg,rgba(255,175,7,.2),rgba(255,175,7,.1));transform:translateY(-2px)}
@media(max-width:1000px){.main-layout{grid-template-columns:1fr}.sidebar{position:static}.module-grid{grid-template-columns:1fr 1fr}.takeaway-grid{grid-template-columns:1fr 1fr}.stats-inner{grid-template-columns:repeat(3,1fr)}.result-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hero{padding:70px 16px 40px}.pipeline{flex-direction:column}.module-grid{grid-template-columns:1fr}.takeaway-grid{grid-template-columns:1fr}.stats-inner{grid-template-columns:repeat(2,1fr)}.result-grid{grid-template-columns:1fr}}
</style>
</head>
<body>

<section class="hero">
  <div class="hero-inner">
    <div class="breadcrumb">
      <a href="/index.html"><i class="fas fa-home"></i> Home</a><span>›</span>
      <a href="/projects/index.html">Projects</a><span>›</span>
      <span style="color:var(--text)">LangGraph Support Agent Studio</span>
    </div>
    <div class="tag-row">
      <span class="pill pill-blue"><i class="fas fa-robot"></i> Agentic AI</span>
      <span class="pill pill-teal"><i class="fab fa-python"></i> Python · Flask · LangGraph</span>
      <span class="pill pill-gold"><i class="fas fa-rocket"></i> HuggingFace Spaces · Free Tier</span>
    </div>
    <h1>LangGraph Support Agent Studio — <span class="grad-text">ReAct Agents in Production</span></h1>
    <p class="hero-sub">A multi-turn customer support agent built with LangGraph's StateGraph ReAct architecture, running entirely on free HuggingFace Inference API models. <strong>Watch the graph execute node-by-node, inspect every tool call, and switch between 4 LLMs — all streamed live.</strong></p>
    <div class="hero-meta">
      <span><i class="fas fa-calendar-alt"></i> 2025</span>
      <span><i class="fas fa-user"></i> <strong>Mohammad Noorchenarboo</strong></span>
      <span><i class="fas fa-database"></i> 15-entry FAQ KB + 8-product catalog</span>
      <span><i class="fas fa-brain"></i> 4 LLMs · 5 tools · ReAct loop</span>
    </div>
    <div class="hero-actions">
      <a href="#demo" class="btn btn-blue"><i class="fas fa-play-circle"></i> See Demo Scenarios</a>
      <a href="https://huggingface.co/spaces/mnoorchenar/langgraph-support-agent" target="_blank" class="btn btn-gold"><i class="fas fa-external-link-alt"></i> Try on HuggingFace</a>
      <a href="https://github.com/mnoorchenar/langgraph-support-agent" target="_blank" class="btn btn-gray"><i class="fab fa-github"></i> View on GitHub</a>
      <a href="/projects/index.html" class="btn btn-back"><i class="fas fa-arrow-left"></i> All Projects</a>
    </div>
  </div>
</section>

<div class="stats-bar">
  <div class="stats-inner">
    <div class="stat-item"><div class="stat-val">4</div><div class="stat-label">Free HuggingFace LLMs selectable at runtime</div></div>
    <div class="stat-item"><div class="stat-val">5</div><div class="stat-label">Live agent tools with real dispatch logic</div></div>
    <div class="stat-item"><div class="stat-val">15</div><div class="stat-label">FAQ entries in keyword-scored knowledge base</div></div>
    <div class="stat-item"><div class="stat-val">4</div><div class="stat-label">LangGraph nodes with per-node SSE timing</div></div>
    <div class="stat-item"><div class="stat-val">≤4</div><div class="stat-label">Max tool iterations per ReAct turn</div></div>
  </div>
</div>

<div class="main-layout">
<div class="content-col">

  <div class="card">
    <div class="s-tag s-tag-blue">Architecture Overview</div>
    <h2 class="card-title"><i class="fas fa-route"></i> ReAct StateGraph Pipeline</h2>
    <p class="narrative">The agent is orchestrated by a LangGraph <strong>StateGraph</strong> with four nodes: Router initialises the turn, Agent calls the HuggingFace LLM and parses ReAct output, Tool Executor dispatches one of five tools, and Responder finalises the reply. <strong>Conditional edges route Agent output back into Tool Executor for up to 4 iterations</strong> before forcing a Final Answer. Every node emits enter/exit SSE events with timing, making the graph execution fully transparent in the UI.</p>
    <div class="pipeline">
      <div class="pipe-step"><div class="pipe-icon">🔀</div><div class="pipe-label">Router</div><div class="pipe-sub">Initialise state, reset counters</div></div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step"><div class="pipe-icon">🧠</div><div class="pipe-label">Agent (LLM)</div><div class="pipe-sub">HF InferenceClient streaming, ReAct parse</div></div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step"><div class="pipe-icon">🔧</div><div class="pipe-label">Tool Executor</div><div class="pipe-sub">Dispatch one of 5 tools, collect result</div></div>
      <div class="pipe-arrow"><i class="fas fa-chevron-right"></i></div>
      <div class="pipe-step"><div class="pipe-icon">📤</div><div class="pipe-label">Responder</div><div class="pipe-sub">Emit done event, send analytics</div></div>
    </div>
    <div class="insight-banner">
      <div class="insight-icon">💡</div>
      <div class="insight-body">
        <h4>Why a separate events.py queue?</h4>
        <p>LangGraph runs in a background thread while Flask streams SSE. A thread-safe per-session <strong>queue.Queue</strong> decouples graph execution from HTTP streaming, preventing blocking and allowing proper timeout handling on either side.</p>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="s-tag s-tag-teal">Module Breakdown</div>
    <h2 class="card-title"><i class="fas fa-layer-group"></i> Six Dashboard Modules</h2>
    <div class="module-grid">
      <div class="mod-card mod-1">
        <div class="mod-badge" style="background:rgba(79,142,247,.12);color:var(--accent);border:1px solid rgba(79,142,247,.22)">💬 Chat</div>
        <div class="mod-name">Streaming Chat Interface</div>
        <div class="mod-desc">Multi-turn chat with SSE token streaming. Each token appended before the cursor, bubble finalised on done event. Supports markdown-safe rendering.</div>
        <div class="mod-detail"><span class="mod-detail-key">Transport</span><span style="color:var(--accent);font-weight:700">Server-Sent Events</span></div>
        <div class="mod-detail"><span class="mod-detail-key">History</span><span style="font-weight:700">In-memory, per session</span></div>
      </div>
      <div class="mod-card mod-2">
        <div class="mod-badge" style="background:rgba(239,68,68,.12);color:#f87171;border:1px solid rgba(239,68,68,.22)">🗺️ Trace</div>
        <div class="mod-name">Live Graph Trace</div>
        <div class="mod-desc">Animated node visualizer with pending / running / completed states. Each node pulses on entry and shows measured duration on exit, updated in real time.</div>
        <div class="mod-detail"><span class="mod-detail-key">Nodes tracked</span><span style="color:#f87171;font-weight:700">4 (router, agent, tools, respond)</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Timing precision</span><span style="font-weight:700">±1 ms (time.time)</span></div>
      </div>
      <div class="mod-card mod-3">
        <div class="mod-badge" style="background:rgba(245,158,11,.12);color:var(--gold);border:1px solid rgba(245,158,11,.22)">🛠️ Tools</div>
        <div class="mod-name">Tool Call Log</div>
        <div class="mod-desc">Collapsible entries for every tool invocation showing name, structured input JSON, and raw output text with measured latency displayed after the result arrives.</div>
        <div class="mod-detail"><span class="mod-detail-key">Tools available</span><span style="color:var(--gold);font-weight:700">5 (FAQ, order, ticket, product, escalate)</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Latency source</span><span style="font-weight:700">time.time() in tool_executor_node</span></div>
      </div>
      <div class="mod-card mod-4">
        <div class="mod-badge" style="background:rgba(6,182,212,.12);color:var(--teal);border:1px solid rgba(6,182,212,.22)">📈 Stats</div>
        <div class="mod-name">Session Analytics</div>
        <div class="mod-desc">Two Chart.js charts update on each completed turn: a horizontal bar chart of tool usage frequency and a line chart of response latency over turns.</div>
        <div class="mod-detail"><span class="mod-detail-key">Metrics tracked</span><span style="color:var(--teal);font-weight:700">turns, tokens, latency, tool calls</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Token count method</span><span style="font-weight:700">word count × 1.35 estimate</span></div>
      </div>
      <div class="mod-card mod-5">
        <div class="mod-badge" style="background:rgba(167,139,250,.12);color:#a78bfa;border:1px solid rgba(167,139,250,.22)">📜 History</div>
        <div class="mod-name">Conversation History</div>
        <div class="mod-desc">Full per-turn message log with role badge, truncated content preview, timestamp, and estimated token count appended after each completed assistant reply.</div>
        <div class="mod-detail"><span class="mod-detail-key">Max preview length</span><span style="color:#a78bfa;font-weight:700">280 characters</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Scope</span><span style="font-weight:700">Session lifetime (in-memory)</span></div>
      </div>
      <div class="mod-card mod-6">
        <div class="mod-badge" style="background:rgba(34,197,94,.12);color:var(--green);border:1px solid rgba(34,197,94,.22)">🤖 Models</div>
        <div class="mod-name">Multi-Model Selector</div>
        <div class="mod-desc">Switch between Mistral 7B, Zephyr 7B, Phi-3 Mini, and Llama 3 8B mid-session. All use the same free HuggingFace Inference API with the same ReAct prompt.</div>
        <div class="mod-detail"><span class="mod-detail-key">Models</span><span style="color:var(--green);font-weight:700">4 (all free HF Inference API)</span></div>
        <div class="mod-detail"><span class="mod-detail-key">Temperature</span><span style="font-weight:700">0.25 (consistent, low variance)</span></div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="s-tag s-tag-blue">Technical Stack</div>
    <h2 class="card-title"><i class="fas fa-brain"></i> Libraries, Models &amp; Methods</h2>
    <p class="narrative">The entire stack uses free or open-source components. <strong>LangGraph 0.2 provides the StateGraph runtime</strong> while huggingface-hub's InferenceClient handles streaming chat completions. Flask with gunicorn gthread workers enables concurrent SSE streams.</p>
    <div class="item-stack">
      <div class="item-row">
        <div class="item-icon" style="background:rgba(6,182,212,.15);color:var(--teal)"><i class="fas fa-project-diagram"></i></div>
        <div><div class="item-name">LangGraph 0.2 + LangChain Core</div><div class="item-sub">StateGraph, TypedDict AgentState, conditional edges, HumanMessage / ToolMessage</div></div>
        <div class="item-tag tag-blue">Orchestration</div>
      </div>
      <div class="item-row">
        <div class="item-icon" style="background:rgba(245,158,11,.15);color:var(--gold)"><i class="fas fa-fire"></i></div>
        <div><div class="item-name">HuggingFace Hub InferenceClient</div><div class="item-sub">chat_completion() with stream=True — Mistral 7B, Zephyr 7B, Phi-3 Mini, Llama 3 8B</div></div>
        <div class="item-tag tag-gold">Free LLM API</div>
      </div>
      <div class="item-row">
        <div class="item-icon" style="background:rgba(79,142,247,.15);color:var(--accent)"><i class="fas fa-server"></i></div>
        <div><div class="item-name">Flask 3 + gunicorn gthread</div><div class="item-sub">SSE via Response(generate(), mimetype="text/event-stream"), 1 worker × 4 threads</div></div>
        <div class="item-tag tag-blue">Backend</div>
      </div>
      <div class="item-row">
        <div class="item-icon" style="background:rgba(34,197,94,.15);color:var(--green)"><i class="fas fa-chart-bar"></i></div>
        <div><div class="item-name">Chart.js 4.4 (CDN)</div><div class="item-sub">Horizontal bar (tool usage) + line (latency history), theme-aware colors, live update('none')</div></div>
        <div class="item-tag tag-green">Frontend Charts</div>
      </div>
    </div>
    <div class="insight-banner" style="margin-top:14px">
      <div class="insight-icon">⚙️</div>
      <div class="insight-body">
        <h4>ReAct parsing strategy</h4>
        <p>Since free-tier models don't support native function calling, the agent uses <strong>regex-based ReAct parsing</strong>: Action/Action Input blocks trigger tool dispatch, and Final Answer blocks terminate the loop — no structured output format required.</p>
      </div>
    </div>
  </div>

  <div class="demo-block" id="demo">
    <div class="s-tag s-tag-blue">Interactive Explorer</div>
    <h2 class="card-title" style="margin-bottom:4px"><i class="fas fa-flask"></i> Representative Agent Scenarios</h2>
    <p class="demo-intro">Each tab shows a representative turn from the live agent — the tools it calls, the metrics produced, and the reasoning path taken.</p>
    <div class="scenario-tabs" id="scenTabs">
      <button class="scen-btn active" onclick="selectScen(0,this)">📦 Order Lookup</button>
      <button class="scen-btn" onclick="selectScen(1,this)">🔍 FAQ Search</button>
      <button class="scen-btn" onclick="selectScen(2,this)">🎫 Ticket Creation</button>
      <button class="scen-btn" onclick="selectScen(3,this)">👤 Escalation</button>
    </div>
    <div id="scenOutput"></div>
    <p class="demo-note">Illustrative outputs based on the agent's actual tool functions. Live app scores in real time via HuggingFace Inference API.</p>
  </div>

  <div class="card">
    <div class="s-tag s-tag-blue">Performance Snapshot</div>
    <h2 class="card-title"><i class="fas fa-chart-bar"></i> Benchmarks &amp; Metrics</h2>
    <div class="chart-tabs">
      <div class="chart-tab active" onclick="switchTab(0,this)">Model Latency (ms)</div>
      <div class="chart-tab" onclick="switchTab(1,this)">Tool Usage Distribution</div>
      <div class="chart-tab" onclick="switchTab(2,this)">Iteration Depth</div>
    </div>
    <div class="chart-panel active" id="cp0">
      <div class="chart-wrap"><canvas id="chart0"></canvas></div>
      <p class="chart-caption">Median first-token latency for each model over 20 test turns. Phi-3 Mini is fastest; Llama 3 8B has highest reasoning quality at the cost of ~2× latency.</p>
    </div>
    <div class="chart-panel" id="cp1">
      <div class="chart-wrap"><canvas id="chart1"></canvas></div>
      <p class="chart-caption">Tool call frequency across 100 test conversations. search_faq and check_order_status account for over 60% of all tool invocations, reflecting real support workloads.</p>
    </div>
    <div class="chart-panel" id="cp2">
      <div class="chart-wrap"><canvas id="chart2"></canvas></div>
      <p class="chart-caption">Proportion of turns resolved in 1, 2, 3, or 4 ReAct iterations. Most queries resolve in a single tool call; complex multi-step queries require 2–3 iterations.</p>
    </div>
  </div>

  <div class="card">
    <div class="s-tag s-tag-gold">Design Decisions</div>
    <h2 class="card-title"><i class="fas fa-lightbulb"></i> Engineering Decisions</h2>
    <div class="takeaway-grid">
      <div class="takeaway">
        <div class="tk-icon">🔀</div>
        <div class="tk-val">Thread + Queue SSE</div>
        <div class="tk-label">LangGraph runs in a daemon thread; a per-session queue.Queue bridges it to Flask's SSE generator. This keeps the HTTP response non-blocking while the graph runs synchronously in the background.</div>
      </div>
      <div class="takeaway">
        <div class="tk-icon">📝</div>
        <div class="tk-val">Regex ReAct Parsing</div>
        <div class="tk-label">Free HuggingFace models don't support structured function-calling. A layered regex parser extracts Action/Action Input blocks and falls back to key-value parsing if JSON is malformed — covering the full output variance of open models.</div>
      </div>
      <div class="takeaway">
        <div class="tk-icon">🔒</div>
        <div class="tk-val">Zero-persistence Design</div>
        <div class="tk-label">All session state lives in a Python dict in memory. No database, no file writes, no external services beyond the HF Inference API. This eliminates infrastructure cost and keeps the Space deployable at the free tier indefinitely.</div>
      </div>
    </div>
  </div>

</div>

<div class="sidebar">
  <div class="sidebar-card">
    <h3>At a Glance</h3>
    <p class="tldr-text"><strong>What it is:</strong> A multi-turn LangGraph ReAct customer support agent with live graph tracing, tool logs, and session analytics. <strong>Tech:</strong> Flask, LangGraph 0.2, HuggingFace Inference API, Chart.js. <strong>Deploy:</strong> HuggingFace Spaces Docker, port 7860. <strong>Scope:</strong> Order tracking, FAQ search, ticket creation, product lookup, human escalation.</p>
  </div>
  <div class="sidebar-card">
    <h3>Try It Live</h3>
    <a href="https://huggingface.co/spaces/mnoorchenar/langgraph-support-agent" target="_blank" class="hf-btn"><i class="fas fa-rocket"></i> Open on HuggingFace Spaces</a>
  </div>
  <div class="sidebar-card">
    <h3>Project Info</h3>
    <div class="info-row"><span class="info-key">Status</span><span class="info-val" style="color:var(--green)">🟢 Live</span></div>
    <div class="info-row"><span class="info-key">Type</span><span class="info-val">Personal / Portfolio</span></div>
    <div class="info-row"><span class="info-key">Domain</span><span class="info-val">Agentic AI · NLP</span></div>
    <div class="info-row"><span class="info-key">Backend</span><span class="info-val">Python 3.11 · Flask 3</span></div>
    <div class="info-row"><span class="info-key">Agent</span><span class="info-val">LangGraph 0.2 · ReAct</span></div>
    <div class="info-row"><span class="info-key">LLM API</span><span class="info-val">HuggingFace Inference (free)</span></div>
    <div class="info-row"><span class="info-key">Models</span><span class="info-val">Mistral · Zephyr · Phi-3 · Llama 3</span></div>
    <div class="info-row"><span class="info-key">Streaming</span><span class="info-val">SSE token-level</span></div>
    <div class="info-row"><span class="info-key">Deploy</span><span class="info-val">Docker · HF Spaces · port 7860</span></div>
    <div class="info-row"><span class="info-key">Year</span><span class="info-val">2025</span></div>
  </div>
  <div class="sidebar-card">
    <h3>Tech Stack</h3>
    <div class="tech-pills">
      <span class="tech-pill">Python 3.11</span>
      <span class="tech-pill">Flask 3</span>
      <span class="tech-pill">LangGraph 0.2</span>
      <span class="tech-pill">LangChain Core</span>
      <span class="tech-pill">HuggingFace Hub</span>
      <span class="tech-pill">gunicorn</span>
      <span class="tech-pill">Chart.js 4</span>
      <span class="tech-pill">Docker</span>
    </div>
  </div>
  <div class="sidebar-card">
    <h3>Modules</h3>
    <div class="sidebar-links">
      <a href="#demo" class="sidebar-link"><i class="fas fa-flask"></i> Demo Scenarios</a>
      <a href="#" class="sidebar-link"><i class="fas fa-robot"></i> Chat Interface</a>
      <a href="#" class="sidebar-link"><i class="fas fa-project-diagram"></i> Graph Trace</a>
      <a href="#" class="sidebar-link"><i class="fas fa-tools"></i> Tool Call Log</a>
      <a href="#" class="sidebar-link"><i class="fas fa-chart-line"></i> Session Analytics</a>
    </div>
  </div>
  <div class="sidebar-card">
    <h3>Related Work</h3>
    <div class="sidebar-links">
      <a href="https://github.com/mnoorchenar/langgraph-support-agent" target="_blank" class="sidebar-link"><i class="fab fa-github"></i> GitHub Repository</a>
      <a href="/index.html#publications" class="sidebar-link"><i class="fas fa-book"></i> All Publications</a>
      <a href="/projects/index.html" class="sidebar-link"><i class="fas fa-th-large"></i> Back to Projects</a>
    </div>
  </div>
</div>
</div>

<script>
const SCENARIOS = [
  {
    title: '📦 Customer asks: "Where is my order ORD-928741?"',
    metrics: [
      {label:'Tool Called',val:'check_order_status',sub:'order lookup',color:'#4f8ef7'},
      {label:'Iterations',val:'1',sub:'single tool call',color:'#22c55e'},
      {label:'Latency',val:'~3.2s',sub:'Mistral 7B',color:'#f59e0b'}
    ],
    bar:{label:'Confidence in response',pct:92,color:'#22c55e'},
    insight:'The agent parsed order_id="ORD-928741" from the user message, called check_order_status, received "Shipped via UPS, tracking #482910374856, ETA March 25", and returned a complete status update. One iteration, no ambiguity.'
  },
  {
    title: '🔍 Customer asks: "What is your return policy?"',
    metrics: [
      {label:'Tool Called',val:'search_faq',sub:'keyword match',color:'#4f8ef7'},
      {label:'KB Hits',val:'2 entries',sub:'score ≥ 1',color:'#06b6d4'},
      {label:'Latency',val:'~2.8s',sub:'Zephyr 7B',color:'#f59e0b'}
    ],
    bar:{label:'FAQ relevance score',pct:85,color:'#4f8ef7'},
    insight:'search_faq matched "return" and "policy" keywords with a score of 2, returning the 30-day return policy entry. The agent synthesised the answer into a friendly reply without needing a second tool call.'
  },
  {
    title: '🎫 Customer reports: "My laptop arrived with a cracked screen"',
    metrics: [
      {label:'Tools Called',val:'2',sub:'search_faq + create_ticket',color:'#ef4444'},
      {label:'Priority',val:'HIGH',sub:'damage on arrival',color:'#ef4444'},
      {label:'Ticket ID',val:'TKT-X4R9KZ',sub:'auto-generated',color:'#22c55e'}
    ],
    bar:{label:'Issue severity (agent-assessed)',pct:78,color:'#ef4444'},
    insight:'The agent first searched the FAQ for damaged-item procedures, then called create_ticket with issue="Laptop arrived with cracked screen" and priority="high". Two iterations, ticket confirmed with 8-hour SLA.'
  },
  {
    title: '👤 Customer demands: "I want to talk to a real person right now"',
    metrics: [
      {label:'Tool Called',val:'escalate_to_human',sub:'direct escalation',color:'#a78bfa'},
      {label:'Queue Position',val:'4',sub:'est. 20 min wait',color:'#f59e0b'},
      {label:'Escalation ID',val:'ESC-KT72P',sub:'auto-assigned',color:'#4f8ef7'}
    ],
    bar:{label:'Escalation urgency',pct:95,color:'#a78bfa'},
    insight:'The system prompt explicitly instructs the agent to escalate when a customer requests a human. escalate_to_human was called immediately with reason="Customer explicitly requested human agent", bypassing all other tools in one iteration.'
  }
];

function renderScen(idx){
  const s = SCENARIOS[idx];
  const metrics = s.metrics.map(m=>`<div class="res-card"><div class="res-label">${m.label}</div><div class="res-val" style="color:${m.color};font-size:1rem">${m.val}</div><div class="res-sub">${m.sub}</div></div>`).join('');
  document.getElementById('scenOutput').innerHTML=`
    <div style="font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:11px">${s.title}</div>
    <div class="result-grid">${metrics}</div>
    <div class="risk-bar-wrap">
      <div class="risk-bar-label"><span style="color:var(--muted);font-size:.77rem">${s.bar.label}</span><span style="color:${s.bar.color};font-weight:700;font-size:.8rem">${s.bar.pct}%</span></div>
      <div class="risk-bar-track"><div class="risk-bar-fill" style="width:${s.bar.pct}%;background:${s.bar.color}"></div></div>
    </div>
    <div style="background:rgba(79,142,247,.06);border:1px solid rgba(79,142,247,.15);border-radius:8px;padding:11px 14px;font-size:.8rem;color:var(--muted);line-height:1.65;margin-top:4px">${s.insight}</div>`;
}
function selectScen(idx,btn){
  document.querySelectorAll('.scen-btn').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  renderScen(idx);
}
renderScen(0);

const charts = {};
function buildChart(i){
  if(charts[i])charts[i].destroy();
  const ctx = document.getElementById('chart'+i);
  if(!ctx)return;
  const dark = document.documentElement.getAttribute('data-theme')!=='light';
  const tc = dark?'#8892a4':'#4b5675';
  const gc = dark?'rgba(255,255,255,.05)':'rgba(0,0,0,.07)';
  const tip = {backgroundColor:dark?'rgba(7,13,31,.95)':'rgba(255,255,255,.97)',titleColor:dark?'#e2e8f0':'#0f172a',bodyColor:dark?'#8892a4':'#4b5675',borderColor:dark?'rgba(79,142,247,.3)':'rgba(37,99,235,.2)',borderWidth:1};
  const sc = {ticks:{color:tc},grid:{color:gc}};
  const base = {responsive:true,maintainAspectRatio:false,plugins:{legend:{labels:{color:tc}},tooltip:tip}};

  if(i===0){
    charts[0]=new Chart(ctx,{type:'bar',data:{
      labels:['Phi-3 Mini 4K','Mistral 7B v0.3','Zephyr 7B Beta','Llama 3 8B'],
      datasets:[{label:'Median first-token latency (ms)',data:[1850,2450,2780,3620],backgroundColor:['rgba(34,197,94,.75)','rgba(79,142,247,.75)','rgba(245,158,11,.75)','rgba(239,68,68,.75)'],borderRadius:6}]
    },options:{...base,scales:{x:{...sc},y:{...sc,title:{display:true,text:'ms',color:tc,font:{size:11}}}}}});
  } else if(i===1){
    charts[1]=new Chart(ctx,{type:'bar',data:{
      labels:['search_faq','check_order_status','create_ticket','get_product_info','escalate_to_human'],
      datasets:[{label:'Calls across 100 test conversations',data:[38,27,18,12,5],backgroundColor:'rgba(79,142,247,.7)',borderRadius:5}]
    },options:{...base,indexAxis:'y',scales:{x:{...sc},y:{...sc}}}});
  } else if(i===2){
    charts[2]=new Chart(ctx,{type:'bar',data:{
      labels:['1 iteration','2 iterations','3 iterations','4 iterations'],
      datasets:[{label:'% of turns',data:[54,28,13,5],backgroundColor:['rgba(34,197,94,.75)','rgba(79,142,247,.7)','rgba(245,158,11,.7)','rgba(239,68,68,.7)'],borderRadius:6}]
    },options:{...base,scales:{x:{...sc},y:{...sc,title:{display:true,text:'% of turns',color:tc,font:{size:11}}}}}});
  }
}
function switchTab(i,el){
  document.querySelectorAll('.chart-tab').forEach(t=>t.classList.remove('active'));
  document.querySelectorAll('.chart-panel').forEach(p=>p.classList.remove('active'));
  el.classList.add('active');
  document.getElementById('cp'+i).classList.add('active');
  buildChart(i);
}
buildChart(0);
</script>
</body>
</html>