Upload 3 files

Dockerfile.txt

@@ -0,0 +1,15 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Expose port
+ENV GRADIO_SERVER_NAME="0.0.0.0"
+ENV GRADIO_SERVER_PORT="7860"
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY requirements.txt /app/requirements.txt
+
+# Start the app
+CMD ["python", "app.py", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,1450 @@
+"""
+OmniParse AI - Invoice Processing SaaS
+Gradio backend with custom HTML UI for HuggingFace Spaces.
+No Gradio UI elements are visible - all rendering via inline HTML/CSS/JS.
+"""
+
+import os
+import re
+import json
+import time
+import csv
+import io
+import sqlite3
+import hashlib
+import secrets
+import threading
+from datetime import datetime, timedelta, timezone
+from http.cookies import SimpleCookie
+from functools import wraps
+
+import gradio as gr
+import bcrypt
+
+# =============================================================================
+# Database
+# =============================================================================
+DB_PATH = os.environ.get("SQLITE_PATH", "omniparse.db")
+DB_LOCK = threading.Lock()
+
+
+def get_conn():
+    conn = sqlite3.connect(DB_PATH)
+    conn.row_factory = sqlite3.Row
+    conn.execute("PRAGMA journal_mode=WAL")
+    return conn
+
+
+def db_init():
+    conn = get_conn()
+    c = conn.cursor()
+    c.execute("""CREATE TABLE IF NOT EXISTS users (
+        id TEXT PRIMARY KEY,
+        email TEXT UNIQUE NOT NULL,
+        name TEXT NOT NULL,
+        password TEXT NOT NULL,
+        plan TEXT DEFAULT 'free',
+        stripe_cid TEXT,
+        api_key TEXT,
+        created_at TEXT,
+        updated_at TEXT
+    )""")
+    c.execute("""CREATE TABLE IF NOT EXISTS sessions (
+        id TEXT PRIMARY KEY,
+        token TEXT UNIQUE NOT NULL,
+        user_id TEXT NOT NULL,
+        expires_at TEXT,
+        created_at TEXT,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+    )""")
+    c.execute("""CREATE TABLE IF NOT EXISTS invoices (
+        id TEXT PRIMARY KEY,
+        user_id TEXT NOT NULL,
+        filename TEXT,
+        vendor TEXT,
+        inv_number TEXT,
+        inv_date TEXT,
+        due_date TEXT,
+        amount REAL,
+        vat_amount REAL,
+        total REAL,
+        currency TEXT DEFAULT 'USD',
+        status TEXT DEFAULT 'done',
+        is_duplicate INTEGER DEFAULT 0,
+        confidence REAL,
+        raw_json TEXT,
+        created_at TEXT,
+        updated_at TEXT,
+        FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+    )""")
+    c.execute("""CREATE TABLE IF NOT EXISTS rate_limits (
+        key TEXT PRIMARY KEY,
+        count INTEGER DEFAULT 0,
+        reset_at TEXT
+    )""")
+    conn.commit()
+    conn.close()
+
+
+def seed_demo():
+    conn = get_conn()
+    existing = conn.execute("SELECT id FROM users WHERE email=?", ("demo@omniparse.ai",)).fetchone()
+    if not existing:
+        pw_hash = bcrypt.hashpw("demo1234".encode(), bcrypt.gensalt(12)).decode()
+        api_key = "op_live_" + secrets.token_hex(24)
+        now = datetime.now(timezone.utc).isoformat()
+        conn.execute(
+            "INSERT INTO users (id, email, name, password, plan, api_key, created_at, updated_at) VALUES (?,?,?,?,?,?,?,?)",
+            (secrets.token_hex(12), "demo@omniparse.ai", "Demo User", pw_hash, "pro", api_key, now, now),
+        )
+        conn.commit()
+    conn.close()
+
+
+db_init()
+seed_demo()
+
+# =============================================================================
+# Helpers
+# =============================================================================
+PLAN_LIMITS = {"free": 20, "basic": 200, "pro": 2000, "enterprise": float("inf")}
+PLAN_LABELS = {"free": "Free", "basic": "Basic", "pro": "Pro", "enterprise": "Enterprise"}
+PLAN_PRICES = {"free": 0, "basic": 29, "pro": 129, "enterprise": 499}
+SESSION_TTL = 7 * 24 * 3600
+
+
+def gen_id():
+    return secrets.token_hex(12)
+
+
+def gen_api_key():
+    return "op_live_" + secrets.token_hex(24)
+
+
+def gen_session_token():
+    return secrets.token_hex(32)
+
+
+def now_iso():
+    return datetime.now(timezone.utc).isoformat()
+
+
+# ─── Rate Limiting ────────────────────────────────────────────────────────
+_rate_lock = threading.Lock()
+_rate_store: dict[str, dict] = {}
+
+
+def check_rate_limit(key: str, max_req: int, window_s: int) -> tuple[bool, int]:
+    with _rate_lock:
+        now = time.time()
+        entry = _rate_store.get(key)
+        if not entry or now >= entry["reset_at"]:
+            _rate_store[key] = {"count": 1, "reset_at": now + window_s}
+            return True, 0
+        if entry["count"] >= max_req:
+            retry = int(entry["reset_at"] - now)
+            return False, retry
+        entry["count"] += 1
+        return True, 0
+
+
+# ─── Session Helpers ───────────────────────────────────────────────────────
+def create_session(user_id: str) -> str:
+    token = gen_session_token()
+    expires = (datetime.now(timezone.utc) + timedelta(days=7)).isoformat()
+    conn = get_conn()
+    conn.execute("INSERT INTO sessions (id, token, user_id, expires_at, created_at) VALUES (?,?,?,?,?)",
+                 (gen_id(), token, user_id, expires, now_iso()))
+    conn.commit()
+    conn.close()
+    return token
+
+
+def get_session_user(token: str) -> dict | None:
+    if not token:
+        return None
+    conn = get_conn()
+    row = conn.execute(
+        "SELECT s.*, u.* FROM sessions s JOIN users u ON s.user_id=u.id WHERE s.token=?",
+        (token,),
+    ).fetchone()
+    conn.close()
+    if not row:
+        return None
+    try:
+        expires = datetime.fromisoformat(row["expires_at"])
+        if expires < datetime.now(timezone.utc):
+            return None
+    except Exception:
+        return None
+    return dict(row)
+
+
+def delete_session(token: str):
+    conn = get_conn()
+    conn.execute("DELETE FROM sessions WHERE token=?", (token,))
+    conn.commit()
+    conn.close()
+
+
+def get_cookie_token(req: gr.Request) -> str | None:
+    cookie_header = req.headers.get("cookie", "")
+    for part in cookie_header.split(";"):
+        part = part.strip()
+        if part.startswith("op_session="):
+            return part.split("=", 1)[1]
+    return None
+
+
+# ─── User Helpers ──────────────────────────────────────────────────────────
+def get_user_by_email(email: str) -> dict | None:
+    conn = get_conn()
+    row = conn.execute("SELECT * FROM users WHERE email=?", (email.strip().lower(),)).fetchone()
+    conn.close()
+    return dict(row) if row else None
+
+
+def get_user_by_id(uid: str) -> dict | None:
+    conn = get_conn()
+    row = conn.execute("SELECT * FROM users WHERE id=?", (uid,)).fetchone()
+    conn.close()
+    return dict(row) if row else None
+
+
+def count_invoices_month(user_id: str) -> int:
+    conn = get_conn()
+    now = datetime.now(timezone.utc)
+    rows = conn.execute("SELECT * FROM invoices WHERE user_id=?", (user_id,)).fetchall()
+    conn.close()
+    n = 0
+    for r in rows:
+        try:
+            ct = datetime.fromisoformat(r["created_at"])
+            if ct.year == now.year and ct.month == now.month:
+                n += 1
+        except Exception:
+            pass
+    return n
+
+
+def generate_mock_invoice(filename: str) -> dict:
+    vendors = ["Stark Enterprises", "Wayne Industries", "Umbrella Corp", "Acme Corp",
+               "Globex Inc", "Initech", "Soylent Corp", "Cyberdyne Systems",
+               "Oscorp Industries", "Aperture Science", "Massive Dynamic", "Stern-Wyatt"]
+    currencies = ["USD", "EUR", "GBP", "CAD", "AUD"]
+    v = vendors[hash(filename) % len(vendors)]
+    subtotal = round((hash(filename + "amt") % 50000) / 100 + 50, 2)
+    vat_rate = 0.20
+    vat = round(subtotal * vat_rate, 2)
+    total = round(subtotal + vat, 2)
+    inv_date = datetime.now(timezone.utc)
+    due = inv_date + timedelta(days=30)
+    return {
+        "vendor": v,
+        "invoiceNumber": f"INV-{inv_date.strftime('%Y')}-{hash(filename) % 100000:05d}",
+        "invoiceDate": inv_date.strftime("%Y-%m-%d"),
+        "dueDate": due.strftime("%Y-%m-%d"),
+        "subtotal": subtotal,
+        "vatRate": "20%",
+        "vatAmount": vat,
+        "total": total,
+        "currency": currencies[hash(filename + "cur") % len(currencies)],
+        "lineItems": [
+            {"description": "Professional services", "quantity": 1, "unitPrice": subtotal, "total": subtotal}
+        ],
+    }
+
+
+# =============================================================================
+# API Routes (Gradio)
+# =============================================================================
+
+
+@app.post("/api/auth/login")
+def api_login(req: gr.Request):
+    try:
+        body = req.get_body()
+        data = json.loads(body) if body else {}
+    except Exception:
+        return '{"error":"Invalid request body"}', 400, {"Content-Type": "application/json"}
+
+    email = (data.get("email") or "").strip().lower()
+    password = data.get("password") or ""
+
+    if not email or not password:
+        return '{"error":"Email and password are required"}', 400, {"Content-Type": "application/json"}
+
+    ip = req.headers.get("x-forwarded-for", req.client.host if req.client else "unknown")
+    ok, retry = check_rate_limit(f"auth:{ip}", 5, 60)
+    if not ok:
+        return json.dumps({"error": f"Too many attempts. Try again in {retry}s"}), 429, {"Content-Type": "application/json"}
+
+    user = get_user_by_email(email)
+    if not user or not bcrypt.checkpw(password.encode(), user["password"].encode()):
+        return '{"error":"Invalid email or password"}', 401, {"Content-Type": "application/json"}
+
+    token = create_session(user["id"])
+    resp_data = {"user": {k: user[k] for k in ("id", "email", "name", "plan", "api_key", "createdAt" if "createdAt" in user else "created_at")}}
+    headers = {
+        "Content-Type": "application/json",
+        "Set-Cookie": f"op_session={token}; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age={SESSION_TTL}",
+    }
+    return json.dumps(resp_data), 200, headers
+
+
+@app.post("/api/auth/signup")
+def api_signup(req: gr.Request):
+    try:
+        body = req.get_body()
+        data = json.loads(body) if body else {}
+    except Exception:
+        return '{"error":"Invalid request body"}', 400, {"Content-Type": "application/json"}
+
+    name = (data.get("name") or "").strip()
+    email = (data.get("email") or "").strip().lower()
+    password = data.get("password") or ""
+    terms = data.get("termsAccepted", False)
+
+    errors = []
+    if not name or len(name) < 2:
+        errors.append("Name must be at least 2 characters")
+    if not email or "@" not in email:
+        errors.append("Valid email is required")
+    if len(password) < 8:
+        errors.append("Password must be at least 8 characters")
+    elif not re.search(r"[A-Z]", password) or not re.search(r"[a-z]", password) or not re.search(r"\d", password):
+        errors.append("Password must contain uppercase, lowercase, and a number")
+    if not terms:
+        errors.append("You must accept the Terms of Service")
+
+    if errors:
+        return json.dumps({"error": errors[0]}), 400, {"Content-Type": "application/json"}
+
+    ip = req.headers.get("x-forwarded-for", req.client.host if req.client else "unknown")
+    ok, retry = check_rate_limit(f"auth:{ip}", 5, 60)
+    if not ok:
+        return json.dumps({"error": f"Too many attempts. Try again in {retry}s"}), 429, {"Content-Type": "application/json"}
+
+    if get_user_by_email(email):
+        return '{"error":"An account with this email already exists"}', 409, {"Content-Type": "application/json"}
+
+    pw_hash = bcrypt.hashpw(password.encode(), bcrypt.gensalt(12)).decode()
+    api_key = gen_api_key()
+    now = now_iso()
+    uid = gen_id()
+
+    conn = get_conn()
+    try:
+        conn.execute("INSERT INTO users (id, email, name, password, plan, api_key, created_at, updated_at) VALUES (?,?,?,?,?,?,?,?)",
+                     (uid, email, name, pw_hash, "free", api_key, now, now))
+        conn.commit()
+    except sqlite3.IntegrityError:
+        conn.close()
+        return '{"error":"An account with this email already exists"}', 409, {"Content-Type": "application/json"}
+    conn.close()
+
+    token = create_session(uid)
+    resp_data = {"user": {"id": uid, "email": email, "name": name, "plan": "free", "api_key": api_key, "createdAt": now}}
+    headers = {
+        "Content-Type": "application/json",
+        "Set-Cookie": f"op_session={token}; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age={SESSION_TTL}",
+    }
+    return json.dumps(resp_data), 201, headers
+
+
+@app.post("/api/auth/logout")
+def api_logout(req: gr.Request):
+    token = get_cookie_token(req)
+    if token:
+        delete_session(token)
+    headers = {
+        "Content-Type": "application/json",
+        "Set-Cookie": "op_session=; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=0",
+    }
+    return '{"success":true}', 200, headers
+
+
+@app.get("/api/auth/me")
+def api_me(req: gr.Request):
+    token = get_cookie_token(req)
+    if not token:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+    user = get_session_user(token)
+    if not user:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+    resp = {"user": {k: user[k] for k in ("id", "email", "name", "plan", "api_key", "created_at")}}
+    return json.dumps(resp), 200, {"Content-Type": "application/json"}
+
+
+@app.post("/api/invoices/upload")
+def api_upload(req: gr.Request):
+    token = get_cookie_token(req)
+    if not token:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+    user = get_session_user(token)
+    if not user:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+
+    uid = user["id"]
+    ok, retry = check_rate_limit(f"upload:{uid}", 20, 60)
+    if not ok:
+        return json.dumps({"error": f"Rate limit exceeded. Try again in {retry}s"}), 429, {"Content-Type": "application/json"}
+
+    plan = user["plan"]
+    used = count_invoices_month(uid)
+    limit = PLAN_LIMITS.get(plan, 20)
+
+    files = req.request.files if hasattr(req.request, "files") else {}
+    file_list = []
+    for key in files:
+        f = files[key]
+        file_list.append({"name": f.filename, "content": f.read()})
+
+    if not file_list:
+        return '{"error":"No files provided"}', 400, {"Content-Type": "application/json"}
+
+    results = []
+    processed = 0
+    conn = get_conn()
+    for f in file_list:
+        if limit != float("inf") and used + processed >= int(limit):
+            break
+        fname = f["name"]
+        mock = generate_mock_invoice(fname)
+        inv_id = gen_id()
+        now = now_iso()
+        is_dup = False
+        if plan in ("pro", "enterprise"):
+            existing = conn.execute(
+                "SELECT * FROM invoices WHERE user_id=? AND vendor=? AND total=?",
+                (uid, mock["vendor"], mock["total"]),
+            ).fetchone()
+            if existing:
+                is_dup = True
+        status = "duplicate" if is_dup else "done"
+        raw = json.dumps(mock, ensure_ascii=False)
+        conn.execute(
+            "INSERT INTO invoices (id, user_id, filename, vendor, inv_number, inv_date, due_date, amount, vat_amount, total, currency, status, is_duplicate, confidence, raw_json, created_at, updated_at) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)",
+            (inv_id, uid, fname, mock["vendor"], mock["invoiceNumber"], mock["invoiceDate"],
+             mock["dueDate"], mock["subtotal"], mock["vatAmount"], mock["total"],
+             mock["currency"], status, int(is_dup), 0.9, raw, now, now),
+        )
+        results.append({
+            "id": inv_id, "filename": fname, "vendor": mock["vendor"],
+            "invNumber": mock["invoiceNumber"], "invDate": mock["invoiceDate"],
+            "dueDate": mock["dueDate"], "amount": mock["subtotal"],
+            "vatAmount": mock["vatAmount"], "total": mock["total"],
+            "currency": mock["currency"], "status": status,
+            "isDuplicate": is_dup, "confidence": 0.9, "createdAt": now,
+        })
+        processed += 1
+    conn.commit()
+    conn.close()
+
+    new_used = count_invoices_month(uid)
+    limit_str = str(int(limit)) if limit != float("inf") else "\u221e"
+    msg = f"Processed {processed} invoice(s)."
+    skipped = len(file_list) - processed
+    if skipped > 0:
+        msg += f" {skipped} skipped - monthly limit reached."
+
+    return json.dumps({"invoices": results, "message": msg, "usage": f"{new_used}/{limit_str} invoices used this month"}), 200, {"Content-Type": "application/json"}
+
+
+@app.get("/api/invoices")
+def api_invoices(req: gr.Request):
+    token = get_cookie_token(req)
+    if not token:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+    user = get_session_user(token)
+    if not user:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+
+    filt = req.query_params.get("filter", "all")
+    conn = get_conn()
+    rows = conn.execute("SELECT * FROM invoices WHERE user_id=? ORDER BY created_at DESC", (user["id"],)).fetchall()
+    conn.close()
+
+    results = []
+    for r in rows:
+        status = r["status"] or "done"
+        if filt == "done" and status != "done":
+            continue
+        if filt == "review" and status != "review":
+            continue
+        if filt == "duplicates" and not r["is_duplicate"]:
+            continue
+        results.append({
+            "id": r["id"], "filename": r["filename"], "vendor": r["vendor"],
+            "invNumber": r["inv_number"], "invDate": r["inv_date"],
+            "dueDate": r["due_date"], "amount": r["amount"],
+            "vatAmount": r["vat_amount"], "total": r["total"],
+            "currency": r["currency"] or "USD", "status": status,
+            "isDuplicate": bool(r["is_duplicate"]), "confidence": r["confidence"],
+            "createdAt": r["created_at"],
+        })
+    return json.dumps({"invoices": results}), 200, {"Content-Type": "application/json"}
+
+
+@app.delete("/api/invoices")
+def api_delete_invoice(req: gr.Request):
+    token = get_cookie_token(req)
+    if not token:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+    user = get_session_user(token)
+    if not user:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+
+    try:
+        body = req.get_body()
+        data = json.loads(body) if body else {}
+    except Exception:
+        return '{"error":"Invalid request"}', 400, {"Content-Type": "application/json"}
+
+    inv_id = data.get("id")
+    if not inv_id:
+        return '{"error":"Invoice ID required"}', 400, {"Content-Type": "application/json"}
+
+    conn = get_conn()
+    conn.execute("DELETE FROM invoices WHERE id=? AND user_id=?", (inv_id, user["id"]))
+    conn.commit()
+    conn.close()
+    return '{"success":true}', 200, {"Content-Type": "application/json"}
+
+
+@app.get("/api/invoices/export/csv")
+def api_export_csv(req: gr.Request):
+    token = get_cookie_token(req)
+    if not token:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+    user = get_session_user(token)
+    if not user:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+
+    conn = get_conn()
+    rows = conn.execute("SELECT * FROM invoices WHERE user_id=? ORDER BY created_at DESC", (user["id"],)).fetchall()
+    conn.close()
+
+    buf = io.StringIO()
+    writer = csv.writer(buf)
+    writer.writerow(["ID", "Vendor", "Invoice#", "Date", "Due Date", "Amount", "VAT", "Total", "Currency", "Status"])
+    for r in rows:
+        writer.writerow([r["id"], r["vendor"], r["inv_number"], r["inv_date"],
+                         r["due_date"], r["amount"], r["vat_amount"], r["total"],
+                         r["currency"], r["status"]])
+    csv_text = buf.getvalue()
+    return csv_text, 200, {
+        "Content-Type": "text/csv",
+        "Content-Disposition": "attachment; filename=omniparse_export.csv",
+    }
+
+
+@app.get("/api/invoices/export/json")
+def api_export_json(req: gr.Request):
+    token = get_cookie_token(req)
+    if not token:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+    user = get_session_user(token)
+    if not user:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+    if user["plan"] == "free":
+        return '{"error":"JSON export requires Basic plan or higher"}', 403, {"Content-Type": "application/json"}
+
+    conn = get_conn()
+    rows = conn.execute("SELECT * FROM invoices WHERE user_id=? ORDER BY created_at DESC", (user["id"],)).fetchall()
+    conn.close()
+
+    results = []
+    for r in rows:
+        results.append({
+            "id": r["id"], "filename": r["filename"], "vendor": r["vendor"],
+            "invNumber": r["inv_number"], "invDate": r["inv_date"],
+            "dueDate": r["due_date"], "amount": r["amount"],
+            "vatAmount": r["vat_amount"], "total": r["total"],
+            "currency": r["currency"] or "USD", "status": r["status"],
+            "isDuplicate": bool(r["is_duplicate"]), "confidence": r["confidence"],
+            "createdAt": r["created_at"],
+        })
+    return json.dumps(results, indent=2, ensure_ascii=False), 200, {
+        "Content-Type": "application/json",
+        "Content-Disposition": "attachment; filename=omniparse_export.json",
+    }
+
+
+@app.post("/api/chat")
+def api_chat(req: gr.Request):
+    token = get_cookie_token(req)
+    if not token:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+    user = get_session_user(token)
+    if not user:
+        return '{"error":"Not authenticated"}', 401, {"Content-Type": "application/json"}
+
+    if user["plan"] not in ("pro", "enterprise"):
+        return '{"error":"AI Chat is available on Pro and Enterprise plans"}', 403, {"Content-Type": "application/json"}
+
+    ok, retry = check_rate_limit(f"chat:{user['id']}", 20, 60)
+    if not ok:
+        return json.dumps({"error": f"Rate limit exceeded. Try again in {retry}s"}), 429, {"Content-Type": "application/json"}
+
+    try:
+        body = req.get_body()
+        data = json.loads(body) if body else {}
+    except Exception:
+        return '{"error":"Invalid request"}', 400, {"Content-Type": "application/json"}
+
+    message = data.get("message", "").strip()
+    if not message:
+        return '{"error":"Message is required"}', 400, {"Content-Type": "application/json"}
+
+    conn = get_conn()
+    rows = conn.execute("SELECT * FROM invoices WHERE user_id=? ORDER BY created_at DESC LIMIT 20", (user["id"],)).fetchall()
+    conn.close()
+
+    invoices = [dict(r) for r in rows]
+    total = sum(r["total"] or 0 for r in invoices)
+    dups = sum(1 for r in invoices if r["is_duplicate"])
+
+    msg_lower = message.lower()
+    reply = _generate_chat_reply(msg_lower, invoices, total, dups, user["plan"])
+    return json.dumps({"reply": reply}), 200, {"Content-Type": "application/json"}
+
+
+def _generate_chat_reply(msg: str, invoices: list, total: float, dups: int, plan: str) -> str:
+    if not invoices:
+        return "You don't have any invoices yet. Upload some invoices to get started, and I'll help you analyze them!"
+    if "summary" in msg or "overview" in msg or "how many" in msg:
+        vendors = list(set(r["vendor"] for r in invoices if r["vendor"]))
+        avg = total / len(invoices) if invoices else 0
+        return (f"Here is a quick overview of your invoices:\n\n"
+                f"Total invoices: {len(invoices)}\n"
+                f"Total amount: ${total:.2f}\n"
+                f"Average invoice: ${avg:.2f}\n"
+                f"Unique vendors: {len(vendors)} ({', '.join(vendors[:5])})\n"
+                f"Duplicates: {dups}\n\n"
+                f"Would you like me to break this down by vendor or time period?")
+    if "duplicate" in msg:
+        if dups == 0:
+            return "Great news! No duplicates were detected in your invoices."
+        dup_list = [f"- {r['inv_number'] or 'N/A'} from {r['vendor'] or 'Unknown'}: ${r['total'] or 0:.2f}" for r in invoices if r["is_duplicate"]]
+        return f"Warning: {dups} potential duplicate(s) found:\n\n" + "\n".join(dup_list)
+    if "vendor" in msg or "supplier" in msg:
+        vendor_map: dict[str, dict] = {}
+        for inv in invoices:
+            v = inv["vendor"] or "Unknown"
+            if v not in vendor_map:
+                vendor_map[v] = {"count": 0, "total": 0}
+            vendor_map[v]["count"] += 1
+            vendor_map[v]["total"] += inv["total"] or 0
+        lines = [f"- {v}: {d['count']} invoice(s), ${d['total']:.2f}" for v, d in sorted(vendor_map.items(), key=lambda x: -x[1]["total"])]
+        return "Breakdown by vendor:\n\n" + "\n".join(lines)
+    if "spend" in msg or "total" in msg or "amount" in msg:
+        avg = total / len(invoices) if invoices else 0
+        max_inv = max(invoices, key=lambda x: x["total"] or 0)
+        min_inv = min(invoices, key=lambda x: x["total"] or 0)
+        return (f"Spending Analysis:\n\n"
+                f"Total: ${total:.2f} across {len(invoices)} invoices\n"
+                f"Average: ${avg:.2f} per invoice\n"
+                f"Largest: ${max_inv['total'] or 0:.2f} from {max_inv['vendor'] or 'Unknown'}\n"
+                f"Smallest: ${min_inv['total'] or 0:.2f} from {min_inv['vendor'] or 'Unknown'}")
+    return (f"I can help you with your invoices! Try asking:\n\n"
+            f"- 'Give me a summary'\n- 'Show duplicates'\n"
+            f"- 'Breakdown by vendor'\n- 'Spending analysis'\n\n"
+            f"You have {len(invoices)} invoice(s) totaling ${total:.2f}.")
+
+
+# =============================================================================
+# HTML UI
+# =============================================================================
+CUSTOM_CSS = """
+footer { display: none !important; }
+.gradio-container { background: transparent !important; max-width: 100% !important; padding: 0 !important; }
+#root > .gradio-container { max-width: 100% !important; }
+"""
+
+APP_HTML = r"""
+<div id="op-app">
+  <!-- Toast Container -->
+  <div id="toast-container" style="position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;"></div>
+
+  <!-- Navbar -->
+  <header id="op-navbar" style="position:sticky;top:0;z-index:100;backdrop-filter:blur(16px);background:rgba(9,9,11,0.85);border-bottom:1px solid rgba(255,255,255,0.06);padding:12px 24px;">
+    <nav style="max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;">
+      <button onclick="navigate('landing')" style="background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;color:#FAFAFA;font-size:1.3rem;font-weight:800;">
+        <svg width="28" height="28" viewBox="0 0 32 32" fill="none"><rect width="32" height="32" rx="8" fill="#F59E0B"/><path d="M8 10h6v2H10v3h4v2h-4v3h4v2H8V10zm10 0h2l2 4 2-4h2v12h-2.5v-7.5L20 19h-.2l-1.3-2.5V22H16V10z" fill="#09090B"/></svg>
+        OmniParse
+      </button>
+      <div id="nav-auth" style="display:flex;gap:8px;align-items:center;">
+        <button onclick="navigate('auth','login')" style="background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#FAFAFA;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:0.875rem;">Log In</button>
+        <button onclick="navigate('auth','signup')" style="background:#F59E0B;border:none;color:#09090B;padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.875rem;">Start Free</button>
+      </div>
+      <div id="nav-dash" style="display:none;gap:8px;align-items:center;">
+        <span id="nav-user-name" style="color:#A1A1AA;font-size:0.875rem;"></span>
+        <span id="nav-plan-badge" style="background:rgba(245,158,11,0.15);color:#F59E0B;padding:2px 10px;border-radius:20px;font-size:0.75rem;font-weight:600;"></span>
+        <button onclick="doLogout()" style="background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#FAFAFA;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:0.875rem;">Log Out</button>
+      </div>
+    </nav>
+  </header>
+
+  <!-- LANDING VIEW -->
+  <div id="view-landing">
+    <main style="max-width:1200px;margin:0 auto;">
+      <!-- Hero -->
+      <section style="text-align:center;padding:80px 24px 40px;">
+        <h1 style="font-size:3rem;font-weight:800;line-height:1.1;margin-bottom:16px;">
+          <span style="background:linear-gradient(135deg,#F59E0B 0%,#FBBF24 40%,#14B8A6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">Extract Data from Invoices in Seconds</span>
+        </h1>
+        <p style="font-size:1.15rem;color:#A1A1AA;max-width:640px;margin:0 auto 24px;">AI extracts vendor, dates, amounts and line items from any PDF or image. Export to CSV, JSON or connect via API.</p>
+        <div style="color:#F59E0B;font-weight:600;margin-bottom:32px;">99.2% accuracy &middot; &lt;4s per invoice &middot; 40+ formats</div>
+        <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
+          <button onclick="navigate('auth','signup')" style="background:#F59E0B;border:none;color:#09090B;padding:14px 28px;border-radius:12px;cursor:pointer;font-weight:700;font-size:1rem;">Get Started Free</button>
+          <button onclick="document.getElementById('pricing-section').scrollIntoView({behavior:'smooth'})" style="background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#FAFAFA;padding:14px 28px;border-radius:12px;cursor:pointer;font-size:1rem;">View Pricing</button>
+        </div>
+      </section>
+
+      <!-- How It Works -->
+      <section style="padding:40px 24px;">
+        <h2 style="text-align:center;font-size:1.6rem;margin-bottom:32px;">How It Works</h2>
+        <div style="display:flex;gap:24px;flex-wrap:wrap;justify-content:center;">
+          <div style="flex:1;min-width:200px;text-align:center;">
+            <div style="width:48px;height:48px;border-radius:50%;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+            </div>
+            <h3 style="font-size:1.1rem;margin-bottom:4px;">Upload</h3>
+            <p style="color:#A1A1AA;font-size:0.9rem;">Drop a PDF or image of your invoice</p>
+          </div>
+          <div style="flex:1;min-width:200px;text-align:center;">
+            <div style="width:48px;height:48px;border-radius:50%;background:rgba(20,184,166,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14B8A6" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+            </div>
+            <h3 style="font-size:1.1rem;margin-bottom:4px;">Extract</h3>
+            <p style="color:#A1A1AA;font-size:0.9rem;">AI pulls out all structured data instantly</p>
+          </div>
+          <div style="flex:1;min-width:200px;text-align:center;">
+            <div style="width:48px;height:48px;border-radius:50%;background:rgba(245,158,11,0.15);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+            </div>
+            <h3 style="font-size:1.1rem;margin-bottom:4px;">Export</h3>
+            <p style="color:#A1A1AA;font-size:0.9rem;">CSV, JSON, Excel, or connect via API</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Features -->
+      <section style="padding:40px 24px;">
+        <h2 style="text-align:center;font-size:1.6rem;margin-bottom:32px;">Powerful Features</h2>
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;">
+          <div class="glass-card-hover" style="padding:24px;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" style="margin-bottom:12px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+            <h3 style="font-size:1rem;margin-bottom:8px;">Smart OCR Extraction</h3>
+            <p style="color:#A1A1AA;font-size:0.875rem;">Multi-engine OCR with AI-powered data extraction for maximum accuracy.</p>
+          </div>
+          <div class="glass-card-hover" style="padding:24px;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#EF4444" stroke-width="2" style="margin-bottom:12px;"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="9" x2="15" y2="15"/><line x1="15" y1="9" x2="9" y2="15"/></svg>
+            <h3 style="font-size:1rem;margin-bottom:8px;">Duplicate Detection</h3>
+            <p style="color:#A1A1AA;font-size:0.875rem;">Automatically flags potential duplicate invoices to prevent double payments.</p>
+          </div>
+          <div class="glass-card-hover" style="padding:24px;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14B8A6" stroke-width="2" style="margin-bottom:12px;"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+            <h3 style="font-size:1rem;margin-bottom:8px;">AI Chat Agent</h3>
+            <p style="color:#A1A1AA;font-size:0.875rem;">Ask questions about your invoices in natural language.</p>
+          </div>
+          <div class="glass-card-hover" style="padding:24px;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22C55E" stroke-width="2" style="margin-bottom:12px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+            <h3 style="font-size:1rem;margin-bottom:8px;">Bank-Level Security</h3>
+            <p style="color:#A1A1AA;font-size:0.875rem;">Bcrypt hashing, HttpOnly cookies, rate limiting, and encrypted storage.</p>
+          </div>
+          <div class="glass-card-hover" style="padding:24px;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" style="margin-bottom:12px;"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+            <h3 style="font-size:1rem;margin-bottom:8px;">Team Collaboration</h3>
+            <p style="color:#A1A1AA;font-size:0.875rem;">Multi-user support with role-based access on Enterprise plans.</p>
+          </div>
+          <div class="glass-card-hover" style="padding:24px;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#14B8A6" stroke-width="2" style="margin-bottom:12px;"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><circle cx="6" cy="6" r="1"/><circle cx="6" cy="18" r="1"/></svg>
+            <h3 style="font-size:1rem;margin-bottom:8px;">REST API</h3>
+            <p style="color:#A1A1AA;font-size:0.875rem;">Integrate OmniParse directly with your ERP or accounting system.</p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Testimonials -->
+      <section style="padding:40px 24px;">
+        <h2 style="text-align:center;font-size:1.6rem;margin-bottom:32px;">Trusted by Finance Teams</h2>
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;">
+          <blockquote class="glass-card" style="padding:24px;font-style:italic;">
+            <p style="color:#D4D4D8;margin-bottom:12px;">"We saved dozens of hours per month on manual invoice transcription. The accuracy is remarkable."</p>
+            <footer style="font-style:normal;color:#F59E0B;font-weight:600;">Sarah K., CFO</footer>
+          </blockquote>
+          <blockquote class="glass-card" style="padding:24px;font-style:italic;">
+            <p style="color:#D4D4D8;margin-bottom:12px;">"API integration into our ERP took one afternoon. The documentation is clear and the endpoint just works."</p>
+            <footer style="font-style:normal;color:#F59E0B;font-weight:600;">Thomas R., CTO</footer>
+          </blockquote>
+          <blockquote class="glass-card" style="padding:24px;font-style:italic;">
+            <p style="color:#D4D4D8;margin-bottom:12px;">"Finally I do not have to verify every single line manually. The duplicate detection alone pays for itself."</p>
+            <footer style="font-style:normal;color:#F59E0B;font-weight:600;">Petra M., Accountant</footer>
+          </blockquote>
+        </div>
+      </section>
+
+      <!-- FAQ -->
+      <section style="padding:40px 24px;">
+        <h2 style="text-align:center;font-size:1.6rem;margin-bottom:32px;">Frequently Asked Questions</h2>
+        <div style="max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:10px;">
+          <details class="glass-card" style="padding:16px 20px;cursor:pointer;"><summary style="font-weight:600;">Is my data secure?</summary><p style="color:#A1A1AA;margin-top:8px;font-size:0.9rem;">Data is encrypted at rest and in transit. We use bcrypt for passwords, HttpOnly cookies for sessions, and enforce rate limiting on all endpoints.</p></details>
+          <details class="glass-card" style="padding:16px 20px;cursor:pointer;"><summary style="font-weight:600;">What file formats are supported?</summary><p style="color:#A1A1AA;margin-top:8px;font-size:0.9rem;">PDF, JPG, JPEG, PNG, and TIFF. Maximum file size is 20MB per file.</p></details>
+          <details class="glass-card" style="padding:16px 20px;cursor:pointer;"><summary style="font-weight:600;">How does pricing work?</summary><p style="color:#A1A1AA;margin-top:8px;font-size:0.9rem;">Monthly subscriptions via Stripe. Cancel anytime from your profile with no penalty.</p></details>
+          <details class="glass-card" style="padding:16px 20px;cursor:pointer;"><summary style="font-weight:600;">Can I cancel anytime?</summary><p style="color:#A1A1AA;margin-top:8px;font-size:0.9rem;">Yes, cancel from your Profile page at any time. Your account stays active until the end of the paid period.</p></details>
+          <details class="glass-card" style="padding:16px 20px;cursor:pointer;"><summary style="font-weight:600;">Do I get a tax invoice?</summary><p style="color:#A1A1AA;margin-top:8px;font-size:0.9rem;">Yes, a tax invoice is automatically sent to your email after each payment.</p></details>
+        </div>
+      </section>
+
+      <!-- Pricing -->
+      <section id="pricing-section" style="padding:40px 24px 60px;">
+        <h2 style="text-align:center;font-size:1.6rem;margin-bottom:32px;">Simple, Transparent Pricing</h2>
+        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;max-width:1000px;margin:0 auto;" id="landing-pricing"></div>
+      </section>
+    </main>
+  </div>
+
+  <!-- AUTH VIEW -->
+  <div id="view-auth" style="display:none;max-width:440px;margin:60px auto;padding:0 24px;">
+    <button onclick="navigate('landing')" style="background:none;border:none;color:#A1A1AA;cursor:pointer;font-size:0.875rem;margin-bottom:24px;display:flex;align-items:center;gap:6px;">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+      Back to home
+    </button>
+    <h1 id="auth-heading" style="font-size:1.8rem;margin-bottom:24px;">Welcome back</h1>
+    <!-- Tabs -->
+    <div style="display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,0.08);">
+      <button id="tab-login" onclick="showAuthTab('login')" style="flex:1;padding:12px;background:none;border:none;color:#F59E0B;border-bottom:2px solid #F59E0B;cursor:pointer;font-weight:600;">Log In</button>
+      <button id="tab-signup" onclick="showAuthTab('signup')" style="flex:1;padding:12px;background:none;border:none;color:#A1A1AA;border-bottom:2px solid transparent;cursor:pointer;font-weight:600;">Sign Up</button>
+    </div>
+    <!-- Login Form -->
+    <div id="form-login">
+      <p style="color:#A1A1AA;font-size:0.8rem;margin-bottom:16px;padding:10px 14px;background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.15);border-radius:8px;">Demo account: demo@omniparse.ai / demo1234 (Pro plan)</p>
+      <div style="margin-bottom:16px;">
+        <label style="display:block;font-size:0.875rem;color:#A1A1AA;margin-bottom:6px;">Email</label>
+        <input id="login-email" type="email" placeholder="you@company.com" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#FAFAFA;font-size:0.9rem;box-sizing:border-box;">
+      </div>
+      <div style="margin-bottom:16px;">
+        <label style="display:block;font-size:0.875rem;color:#A1A1AA;margin-bottom:6px;">Password</label>
+        <input id="login-password" type="password" placeholder="Enter your password" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#FAFAFA;font-size:0.9rem;box-sizing:border-box;">
+      </div>
+      <div id="login-error" style="display:none;color:#EF4444;font-size:0.85rem;margin-bottom:12px;padding:8px 12px;background:rgba(239,68,68,0.08);border-radius:8px;"></div>
+      <button id="login-btn" onclick="doLogin()" style="width:100%;padding:12px;background:#F59E0B;border:none;color:#09090B;border-radius:8px;cursor:pointer;font-weight:700;font-size:0.95rem;">Sign In</button>
+    </div>
+    <!-- Signup Form -->
+    <div id="form-signup" style="display:none;">
+      <div style="margin-bottom:16px;">
+        <label style="display:block;font-size:0.875rem;color:#A1A1AA;margin-bottom:6px;">Full Name</label>
+        <input id="signup-name" type="text" placeholder="John Doe" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#FAFAFA;font-size:0.9rem;box-sizing:border-box;">
+      </div>
+      <div style="margin-bottom:16px;">
+        <label style="display:block;font-size:0.875rem;color:#A1A1AA;margin-bottom:6px;">Work Email</label>
+        <input id="signup-email" type="email" placeholder="you@company.com" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#FAFAFA;font-size:0.9rem;box-sizing:border-box;">
+      </div>
+      <div style="margin-bottom:16px;">
+        <label style="display:block;font-size:0.875rem;color:#A1A1AA;margin-bottom:6px;">Password</label>
+        <input id="signup-password" type="password" placeholder="Min 8 chars, uppercase, lowercase, number" oninput="updatePwStrength(this.value)" style="width:100%;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#FAFAFA;font-size:0.9rem;box-sizing:border-box;">
+        <div id="pw-strength" style="margin-top:6px;height:4px;border-radius:2px;background:rgba(255,255,255,0.08);overflow:hidden;"><div id="pw-bar" style="height:100%;width:0;border-radius:2px;transition:all 0.3s;"></div></div>
+        <div id="pw-label" style="font-size:0.75rem;color:#A1A1AA;margin-top:4px;"></div>
+      </div>
+      <div style="margin-bottom:16px;display:flex;align-items:center;gap:8px;">
+        <input id="signup-terms" type="checkbox" style="accent-color:#F59E0B;">
+        <label for="signup-terms" style="font-size:0.85rem;color:#A1A1AA;">I agree to the Terms of Service and Privacy Policy</label>
+      </div>
+      <div id="signup-error" style="display:none;color:#EF4444;font-size:0.85rem;margin-bottom:12px;padding:8px 12px;background:rgba(239,68,68,0.08);border-radius:8px;"></div>
+      <button id="signup-btn" onclick="doSignup()" style="width:100%;padding:12px;background:#F59E0B;border:none;color:#09090B;border-radius:8px;cursor:pointer;font-weight:700;font-size:0.95rem;">Create Account</button>
+    </div>
+  </div>
+
+  <!-- DASHBOARD VIEW -->
+  <div id="view-dashboard" style="display:none;max-width:1200px;margin:0 auto;padding:24px;">
+    <h1 style="font-size:1.8rem;margin-bottom:4px;">Dashboard</h1>
+    <p id="dash-welcome" style="color:#A1A1AA;margin-bottom:24px;"></p>
+
+    <!-- Dashboard Tabs -->
+    <div style="display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,0.08);margin-bottom:24px;overflow-x:auto;">
+      <button class="dash-tab" data-tab="upload" onclick="showDashTab('upload')" style="padding:12px 16px;background:none;border:none;border-bottom:2px solid #F59E0B;color:#F59E0B;cursor:pointer;font-weight:500;white-space:nowrap;">Upload</button>
+      <button class="dash-tab" data-tab="invoices" onclick="showDashTab('invoices')" style="padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;color:#A1A1AA;cursor:pointer;font-weight:500;white-space:nowrap;">Invoices</button>
+      <button class="dash-tab" data-tab="chat" onclick="showDashTab('chat')" style="padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;color:#A1A1AA;cursor:pointer;font-weight:500;white-space:nowrap;">AI Chat</button>
+      <button class="dash-tab" data-tab="export" onclick="showDashTab('export')" style="padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;color:#A1A1AA;cursor:pointer;font-weight:500;white-space:nowrap;">Export</button>
+      <button class="dash-tab" data-tab="upgrade" onclick="showDashTab('upgrade')" style="padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;color:#A1A1AA;cursor:pointer;font-weight:500;white-space:nowrap;">Upgrade</button>
+      <button class="dash-tab" data-tab="api" onclick="showDashTab('api')" style="padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;color:#A1A1AA;cursor:pointer;font-weight:500;white-space:nowrap;">API</button>
+      <button class="dash-tab" data-tab="profile" onclick="showDashTab('profile')" style="padding:12px 16px;background:none;border:none;border-bottom:2px solid transparent;color:#A1A1AA;cursor:pointer;font-weight:500;white-space:nowrap;">Profile</button>
+    </div>
+
+    <!-- Upload Panel -->
+    <div id="panel-upload">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
+        <div><span style="color:#A1A1AA;font-size:0.875rem;">Invoices this month</span>
+        <span id="dash-plan-label" style="margin-left:8px;color:#F59E0B;font-weight:600;font-size:0.85rem;"></span></div>
+        <span id="dash-usage" style="color:#FAFAFA;font-weight:600;"></span>
+      </div>
+      <div style="height:6px;background:rgba(255,255,255,0.06);border-radius:3px;margin-bottom:24px;overflow:hidden;"><div id="usage-bar" style="height:100%;background:linear-gradient(90deg,#F59E0B,#14B8A6);border-radius:3px;transition:width 0.6s;"></div></div>
+
+      <div id="drop-zone" class="drop-zone" style="padding:48px 24px;text-align:center;cursor:pointer;position:relative;" onclick="document.getElementById('file-input').click()">
+        <input id="file-input" type="file" multiple accept=".pdf,.jpg,.jpeg,.png,.tiff,.tif" style="display:none;" onchange="handleFiles(this.files)">
+        <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#F59E0B" stroke-width="2" style="margin:0 auto 12px;display:block;"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+        <p style="font-size:1.1rem;font-weight:500;margin-bottom:4px;">Drop invoice files here</p>
+        <p style="color:#A1A1AA;font-size:0.85rem;">or click to browse. Supports PDF, JPG, PNG, TIFF (max 20MB each)</p>
+      </div>
+      <div id="file-list" style="margin-top:16px;display:none;"></div>
+      <button id="upload-btn" onclick="doUpload()" style="display:none;margin-top:16px;width:100%;padding:12px;background:#F59E0B;border:none;color:#09090B;border-radius:8px;cursor:pointer;font-weight:700;">Process Invoices</button>
+      <div id="upload-status" style="margin-top:16px;"></div>
+      <div id="upload-results" style="margin-top:16px;overflow-x:auto;"></div>
+    </div>
+
+    <!-- Invoices Panel -->
+    <div id="panel-invoices" style="display:none;">
+      <div style="display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center;">
+        <button class="inv-filter active" data-f="all" onclick="filterInvoices('all')" style="padding:6px 14px;background:rgba(245,158,11,0.15);border:1px solid rgba(245,158,11,0.3);color:#F59E0B;border-radius:6px;cursor:pointer;font-size:0.8rem;">All</button>
+        <button class="inv-filter" data-f="done" onclick="filterInvoices('done')" style="padding:6px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#A1A1AA;border-radius:6px;cursor:pointer;font-size:0.8rem;">Done</button>
+        <button class="inv-filter" data-f="review" onclick="filterInvoices('review')" style="padding:6px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#A1A1AA;border-radius:6px;cursor:pointer;font-size:0.8rem;">Review</button>
+        <button class="inv-filter" data-f="duplicates" onclick="filterInvoices('duplicates')" style="padding:6px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#A1A1AA;border-radius:6px;cursor:pointer;font-size:0.8rem;">Duplicates</button>
+        <button onclick="loadInvoices()" style="margin-left:auto;padding:6px 14px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#FAFAFA;border-radius:6px;cursor:pointer;font-size:0.8rem;">Refresh</button>
+      </div>
+      <div id="invoices-table-wrap" style="max-height:400px;overflow-y:auto;border:1px solid rgba(255,255,255,0.06);border-radius:12px;"></div>
+      <h3 style="margin-top:32px;margin-bottom:12px;color:#EF4444;">Danger Zone</h3>
+      <div style="display:flex;gap:8px;align-items:center;">
+        <input id="delete-id" type="text" placeholder="Invoice ID" style="padding:8px 12px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#FAFAFA;font-size:0.85rem;width:200px;">
+        <button onclick="doDeleteInvoice()" style="padding:8px 16px;background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);color:#EF4444;border-radius:8px;cursor:pointer;font-size:0.85rem;">Delete</button>
+      </div>
+      <div id="delete-status" style="margin-top:8px;font-size:0.85rem;"></div>
+    </div>
+
+    <!-- Chat Panel -->
+    <div id="panel-chat" style="display:none;">
+      <h3 style="font-size:1.1rem;margin-bottom:4px;">AI Chat Agent</h3>
+      <p style="color:#A1A1AA;font-size:0.85rem;margin-bottom:16px;">Ask about your invoices, spending patterns, or vendor details.</p>
+      <div id="chat-gate" style="display:none;padding:24px;text-align:center;" class="glass-card">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#A1A1AA" stroke-width="2" style="margin:0 auto 12px;display:block;"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+        <p style="color:#A1A1AA;margin-bottom:8px;">AI Chat is available on Pro and Enterprise plans.</p>
+        <button onclick="showDashTab('upgrade')" style="padding:8px 20px;background:#F59E0B;border:none;color:#09090B;border-radius:8px;cursor:pointer;font-weight:600;">Upgrade Plan</button>
+      </div>
+      <div id="chat-area">
+        <div id="chat-messages" style="max-height:340px;overflow-y:auto;padding:16px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:12px;margin-bottom:12px;min-height:200px;"></div>
+        <div style="display:flex;gap:8px;">
+          <input id="chat-input" type="text" placeholder="Ask about your invoices..." onkeydown="if(event.key==='Enter')sendChat()" style="flex:1;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#FAFAFA;font-size:0.9rem;">
+          <button id="chat-send" onclick="sendChat()" style="padding:10px 20px;background:#F59E0B;border:none;color:#09090B;border-radius:8px;cursor:pointer;font-weight:600;">Send</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Export Panel -->
+    <div id="panel-export" style="display:none;">
+      <div class="glass-card" style="padding:24px;margin-bottom:16px;">
+        <h3 style="font-size:1rem;margin-bottom:8px;">CSV Export</h3>
+        <p style="color:#A1A1AA;font-size:0.85rem;margin-bottom:16px;">Download all your invoices as a CSV file. Available on all plans.</p>
+        <button onclick="exportCsv()" style="padding:10px 20px;background:#F59E0B;border:none;color:#09090B;border-radius:8px;cursor:pointer;font-weight:600;">Download CSV</button>
+      </div>
+      <div class="glass-card" style="padding:24px;">
+        <h3 style="font-size:1rem;margin-bottom:8px;">JSON Export</h3>
+        <p style="color:#A1A1AA;font-size:0.85rem;margin-bottom:16px;">Download all invoices with full raw JSON data. Requires Basic plan or higher.</p>
+        <button id="json-export-btn" onclick="exportJson()" style="padding:10px 20px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#FAFAFA;border-radius:8px;cursor:pointer;font-weight:600;">Download JSON</button>
+      </div>
+    </div>
+
+    <!-- Upgrade Panel -->
+    <div id="panel-upgrade" style="display:none;">
+      <div style="margin-bottom:24px;">
+        <label style="display:block;font-size:0.875rem;color:#A1A1AA;margin-bottom:6px;">Select Plan</label>
+        <select id="upgrade-plan" style="padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#FAFAFA;font-size:0.9rem;">
+          <option value="basic">Basic - $29/mo</option>
+          <option value="pro">Pro - $129/mo</option>
+          <option value="enterprise">Enterprise - $499/mo</option>
+        </select>
+      </div>
+      <div id="dash-pricing"></div>
+    </div>
+
+    <!-- API Panel -->
+    <div id="panel-api" style="display:none;">
+      <div id="api-gate" style="display:none;padding:24px;text-align:center;" class="glass-card">
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#A1A1AA" stroke-width="2" style="margin:0 auto 12px;display:block;"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+        <p style="color:#A1A1AA;margin-bottom:8px;">API access is available on Pro and Enterprise plans.</p>
+        <button onclick="showDashTab('upgrade')" style="padding:8px 20px;background:#F59E0B;border:none;color:#09090B;border-radius:8px;cursor:pointer;font-weight:600;">Upgrade Plan</button>
+      </div>
+      <div id="api-area">
+        <h3 style="font-size:1.1rem;margin-bottom:4px;">API Access</h3>
+        <p style="color:#A1A1AA;font-size:0.85rem;margin-bottom:16px;">Use your API key to integrate OmniParse with your applications.</p>
+        <h4 style="font-size:0.95rem;margin-bottom:8px;">Your API Key</h4>
+        <div style="display:flex;gap:8px;align-items:center;margin-bottom:8px;">
+          <code id="api-key-display" style="flex:1;padding:10px 14px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#D4D4D8;font-family:monospace;font-size:0.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></code>
+          <button id="toggle-key-btn" onclick="toggleApiKey()" style="padding:8px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#FAFAFA;border-radius:8px;cursor:pointer;font-size:0.8rem;">Show</button>
+          <button onclick="copyApiKey()" style="padding:8px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#FAFAFA;border-radius:8px;cursor:pointer;font-size:0.8rem;">Copy</button>
+        </div>
+        <p style="color:#A1A1AA;font-size:0.75rem;margin-bottom:24px;">Keep your API key secret. Do not share it publicly or commit it to version control.</p>
+        <h4 style="font-size:0.95rem;margin-bottom:8px;">Example Request</h4>
+        <pre style="padding:16px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:8px;color:#D4D4D8;font-family:monospace;font-size:0.8rem;overflow-x:auto;white-space:pre-wrap;">curl -X POST https://api.omniparse.ai/v1/invoices \
+  -H "Authorization: Bearer &lt;your-api-key&gt;" \
+  -F "files=@invoice.pdf"</pre>
+      </div>
+    </div>
+
+    <!-- Profile Panel -->
+    <div id="panel-profile" style="display:none;">
+      <h3 style="font-size:1.1rem;margin-bottom:16px;">Profile Information</h3>
+      <div style="display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin-bottom:32px;">
+        <span style="color:#A1A1AA;font-size:0.875rem;">Name</span><span id="prof-name"></span>
+        <span style="color:#A1A1AA;font-size:0.875rem;">Email</span><span id="prof-email"></span>
+        <span style="color:#A1A1AA;font-size:0.875rem;">Plan</span><span id="prof-plan"></span>
+        <span style="color:#A1A1AA;font-size:0.875rem;">Member Since</span><span id="prof-created"></span>
+      </div>
+      <h3 style="font-size:1.1rem;margin-bottom:12px;">Change Password</h3>
+      <div style="display:flex;gap:8px;margin-bottom:32px;">
+        <input id="new-password" type="password" placeholder="New password" style="flex:1;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:#FAFAFA;font-size:0.9rem;">
+        <button onclick="doChangePassword()" style="padding:10px 20px;background:#F59E0B;border:none;color:#09090B;border-radius:8px;cursor:pointer;font-weight:600;">Update Password</button>
+      </div>
+      <div id="pw-change-status" style="margin-bottom:24px;font-size:0.85rem;"></div>
+      <h3 style="font-size:1.1rem;margin-bottom:8px;color:#EF4444;">Danger Zone</h3>
+      <p style="color:#A1A1AA;font-size:0.85rem;margin-bottom:12px;">Once you delete your account, all data will be permanently removed. This action cannot be undone.</p>
+      <button onclick="doDeleteAccount()" style="padding:10px 20px;background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);color:#EF4444;border-radius:8px;cursor:pointer;font-weight:600;">Delete Account</button>
+    </div>
+  </div>
+
+  <!-- Footer -->
+  <footer style="border-top:1px solid rgba(255,255,255,0.06);padding:32px 24px;margin-top:60px;">
+    <div style="max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;">
+      <div>
+        <div style="font-weight:800;font-size:1.1rem;margin-bottom:8px;">OmniParse</div>
+        <p style="color:#A1A1AA;font-size:0.8rem;">AI-powered invoice processing for modern finance teams.</p>
+      </div>
+      <div>
+        <h4 style="font-size:0.85rem;font-weight:600;margin-bottom:8px;">Product</h4>
+        <ul style="list-style:none;padding:0;color:#A1A1AA;font-size:0.8rem;"><li style="margin-bottom:4px;">Features</li><li style="margin-bottom:4px;">Pricing</li><li style="margin-bottom:4px;">API Docs</li></ul>
+      </div>
+      <div>
+        <h4 style="font-size:0.85rem;font-weight:600;margin-bottom:8px;">Company</h4>
+        <ul style="list-style:none;padding:0;color:#A1A1AA;font-size:0.8rem;"><li style="margin-bottom:4px;">About</li><li style="margin-bottom:4px;">Blog</li><li style="margin-bottom:4px;">Contact</li></ul>
+      </div>
+      <div>
+        <h4 style="font-size:0.85rem;font-weight:600;margin-bottom:8px;">Legal</h4>
+        <ul style="list-style:none;padding:0;color:#A1A1AA;font-size:0.8rem;"><li style="margin-bottom:4px;">Privacy Policy</li><li style="margin-bottom:4px;">Terms of Service</li><li style="margin-bottom:4px;">Security</li></ul>
+      </div>
+    </div>
+    <div style="max-width:1200px;margin:24px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,0.04);text-align:center;color:#71717A;font-size:0.8rem;">
+      &copy; 2026 OmniParse AI. All rights reserved.
+    </div>
+  </footer>
+</div>
+
+<style>
+* { box-sizing: border-box; }
+body { margin: 0; padding: 0; background: #09090B; color: #FAFAFA; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+.glass-card { background: rgba(255,255,255,0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; }
+.glass-card-hover { background: rgba(255,255,255,0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; transition: all 0.3s ease; }
+.glass-card-hover:hover { background: rgba(255,255,255,0.06); border-color: rgba(245,158,11,0.2); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(245,158,11,0.08); }
+.drop-zone { border: 2px dashed rgba(245,158,11,0.3); border-radius: 16px; transition: all 0.3s ease; }
+.drop-zone.drag-over { border-color: #F59E0B; background: rgba(245,158,11,0.05); }
+.drop-zone:hover { border-color: rgba(245,158,11,0.5); }
+.status-done { background: rgba(34,197,94,0.12); color: #22C55E; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
+.status-review { background: rgba(234,179,8,0.12); color: #EAB308; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
+.status-duplicate { background: rgba(239,68,68,0.12); color: #EF4444; padding: 2px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
+.chat-bubble { animation: slideUp 0.3s ease; }
+@keyframes slideUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+.pricing-highlight { border: 1px solid rgba(245,158,11,0.4) !important; background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(20,184,166,0.04) 100%) !important; }
+#op-app { min-height: 100vh; display: flex; flex-direction: column; }
+#op-app > footer { margin-top: auto; }
+table { width: 100%; border-collapse: collapse; }
+th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.85rem; }
+th { color: #A1A1AA; font-weight: 500; }
+td { color: #D4D4D8; }
+tr:hover td { background: rgba(255,255,255,0.02); }
+input:focus, select:focus { outline: none; border-color: #F59E0B !important; }
+</style>
+
+<script>
+(function(){
+  let currentUser = null;
+  let selectedFiles = [];
+  let currentInvoiceFilter = 'all';
+  let apiKeyVisible = false;
+  let chatHistory = [];
+
+  // Pricing data
+  const plans = [
+    {key:'free',name:'Free',price:'$0',features:['20 invoices / month','CSV export','1 user','No API access']},
+    {key:'basic',name:'Basic',price:'$29/mo',features:['200 invoices / month','JSON + CSV + Excel','Multi-currency support','Google Sheets sync']},
+    {key:'pro',name:'Pro',price:'$129/mo',highlight:true,features:['2,000 invoices / month','REST API + custom key','AI Chat Agent','Duplicate Detection','3 users']},
+    {key:'enterprise',name:'Enterprise',price:'$499/mo',features:['Unlimited volume','Dedicated API endpoint','Human-in-the-loop review','SLA 99.5%','Priority support (4h)']},
+  ];
+
+  function renderPricing(containerId, showButtons) {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+    el.innerHTML = plans.map(p => {
+      const cls = p.highlight ? 'glass-card pricing-highlight' : 'glass-card';
+      const feats = p.features.map(f => '<li style="margin-bottom:6px;font-size:0.85rem;color:#A1A1AA;">'+f+'</li>').join('');
+      let btn = '';
+      if (showButtons && p.key !== 'free') {
+        btn = '<button onclick="showDashTab(\'upgrade\')" style="width:100%;padding:10px;background:#F59E0B;border:none;color:#09090B;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.85rem;margin-top:16px;">Upgrade to '+p.name+'</button>';
+      } else if (showButtons) {
+        btn = '<button disabled style="width:100%;padding:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:#A1A1AA;border-radius:8px;cursor:default;font-size:0.85rem;margin-top:16px;">Current Plan</button>';
+      }
+      return '<div class="'+cls+'" style="padding:24px;">'+
+        '<h3 style="font-size:1.1rem;margin:0 0 4px;">'+p.name+'</h3>'+
+        '<div style="font-size:1.5rem;font-weight:700;color:#F59E0B;margin-bottom:12px;">'+p.price+'</div>'+
+        '<ul style="padding-left:18px;margin:0;">'+feats+'</ul>'+btn+'</div>';
+    }).join('');
+  }
+
+  function toast(msg, type) {
+    const c = document.getElementById('toast-container');
+    const t = document.createElement('div');
+    t.style.cssText = 'padding:12px 20px;border-radius:8px;font-size:0.875rem;animation:slideUp 0.3s ease;max-width:360px;';
+    if (type === 'error') { t.style.background = 'rgba(239,68,68,0.9)'; t.style.color = '#fff'; }
+    else if (type === 'success') { t.style.background = 'rgba(34,197,94,0.9)'; t.style.color = '#fff'; }
+    else { t.style.background = '#1C1C1F'; t.style.color = '#FAFAFA'; t.style.border = '1px solid rgba(255,255,255,0.08)'; }
+    t.textContent = msg;
+    c.appendChild(t);
+    setTimeout(() => { t.style.opacity = '0'; t.style.transition = 'opacity 0.3s'; setTimeout(() => t.remove(), 300); }, 3500);
+  }
+
+  async function apiFetch(url, opts) {
+    const res = await fetch(url, opts);
+    const data = await res.json().catch(() => ({}));
+    if (!res.ok) { throw new Error(data.error || 'Request failed'); }
+    return data;
+  }
+
+  window.navigate = function(view, tab) {
+    document.getElementById('view-landing').style.display = view === 'landing' ? 'block' : 'none';
+    document.getElementById('view-auth').style.display = view === 'auth' ? 'block' : 'none';
+    document.getElementById('view-dashboard').style.display = view === 'dashboard' ? 'block' : 'none';
+    if (view === 'auth' && tab) showAuthTab(tab);
+    if (view === 'dashboard') { loadDashboard(); showDashTab('upload'); }
+    window.scrollTo(0, 0);
+  };
+
+  window.showAuthTab = function(tab) {
+    document.getElementById('form-login').style.display = tab === 'login' ? 'block' : 'none';
+    document.getElementById('form-signup').style.display = tab === 'signup' ? 'block' : 'none';
+    document.getElementById('tab-login').style.color = tab === 'login' ? '#F59E0B' : '#A1A1AA';
+    document.getElementById('tab-login').style.borderBottom = tab === 'login' ? '2px solid #F59E0B' : '2px solid transparent';
+    document.getElementById('tab-signup').style.color = tab === 'signup' ? '#F59E0B' : '#A1A1AA';
+    document.getElementById('tab-signup').style.borderBottom = tab === 'signup' ? '2px solid #F59E0B' : '2px solid transparent';
+    document.getElementById('auth-heading').textContent = tab === 'login' ? 'Welcome back' : 'Create your account';
+  };
+
+  window.updatePwStrength = function(pw) {
+    let score = 0;
+    if (pw.length >= 8) score++;
+    if (/[A-Z]/.test(pw)) score++;
+    if (/[a-z]/.test(pw)) score++;
+    if (/\d/.test(pw)) score++;
+    if (/[^A-Za-z0-9]/.test(pw)) score++;
+    const pct = (score / 5) * 100;
+    const colors = ['#EF4444','#EF4444','#EAB308','#F59E0B','#22C55E'];
+    const labels = ['Weak','Weak','Fair','Strong','Very Strong'];
+    const bar = document.getElementById('pw-bar');
+    const label = document.getElementById('pw-label');
+    bar.style.width = pct + '%';
+    bar.style.background = colors[Math.max(0, score - 1)] || colors[0];
+    label.textContent = pw ? labels[Math.max(0, score - 1)] || '' : '';
+    label.style.color = colors[Math.max(0, score - 1)] || '#A1A1AA';
+  };
+
+  window.doLogin = async function() {
+    const email = document.getElementById('login-email').value;
+    const pw = document.getElementById('login-password').value;
+    const errEl = document.getElementById('login-error');
+    const btn = document.getElementById('login-btn');
+    errEl.style.display = 'none';
+    btn.textContent = 'Signing in...';
+    btn.disabled = true;
+    try {
+      await apiFetch('/api/auth/login', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({email, password: pw}) });
+      await checkAuth();
+      toast('Welcome back!', 'success');
+    } catch (e) { errEl.textContent = e.message; errEl.style.display = 'block'; }
+    finally { btn.textContent = 'Sign In'; btn.disabled = false; }
+  };
+
+  window.doSignup = async function() {
+    const name = document.getElementById('signup-name').value;
+    const email = document.getElementById('signup-email').value;
+    const pw = document.getElementById('signup-password').value;
+    const terms = document.getElementById('signup-terms').checked;
+    const errEl = document.getElementById('signup-error');
+    const btn = document.getElementById('signup-btn');
+    errEl.style.display = 'none';
+    btn.textContent = 'Creating account...';
+    btn.disabled = true;
+    try {
+      await apiFetch('/api/auth/signup', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({name, email, password: pw, termsAccepted: terms}) });
+      await checkAuth();
+      toast('Account created successfully!', 'success');
+    } catch (e) { errEl.textContent = e.message; errEl.style.display = 'block'; }
+    finally { btn.textContent = 'Create Account'; btn.disabled = false; }
+  };
+
+  window.doLogout = async function() {
+    try { await fetch('/api/auth/logout', { method: 'POST' }); } catch(e) {}
+    currentUser = null;
+    document.getElementById('nav-auth').style.display = 'flex';
+    document.getElementById('nav-dash').style.display = 'none';
+    navigate('landing');
+    toast('Logged out successfully', 'success');
+  };
+
+  async function checkAuth() {
+    try {
+      const data = await apiFetch('/api/auth/me');
+      currentUser = data.user;
+      document.getElementById('nav-auth').style.display = 'none';
+      document.getElementById('nav-dash').style.display = 'flex';
+      document.getElementById('nav-user-name').textContent = currentUser.name;
+      document.getElementById('nav-plan-badge').textContent = (currentUser.plan || 'free').toUpperCase();
+      navigate('dashboard');
+    } catch(e) {
+      currentUser = null;
+      document.getElementById('nav-auth').style.display = 'flex';
+      document.getElementById('nav-dash').style.display = 'none';
+    }
+  }
+
+  function loadDashboard() {
+    if (!currentUser) return;
+    const p = currentUser.plan || 'free';
+    document.getElementById('dash-welcome').textContent = 'Welcome back, ' + currentUser.name + '. Manage your invoices and settings.';
+    document.getElementById('dash-plan-label').textContent = p + ' plan';
+
+    // Chat/API gate
+    const proPlan = p === 'pro' || p === 'enterprise';
+    document.getElementById('chat-gate').style.display = proPlan ? 'none' : 'block';
+    document.getElementById('chat-area').style.display = proPlan ? 'block' : 'none';
+    document.getElementById('api-gate').style.display = proPlan ? 'none' : 'block';
+    document.getElementById('api-area').style.display = proPlan ? 'block' : 'none';
+
+    // API key
+    if (currentUser.apiKey) {
+      const masked = currentUser.apiKey.substring(0, 10) + '************************';
+      document.getElementById('api-key-display').textContent = masked;
+      document.getElementById('api-key-display').dataset.full = currentUser.apiKey;
+    }
+
+    // Profile
+    document.getElementById('prof-name').textContent = currentUser.name;
+    document.getElementById('prof-email').textContent = currentUser.email;
+    document.getElementById('prof-plan').textContent = (p.charAt(0).toUpperCase() + p.slice(1));
+    document.getElementById('prof-created').textContent = new Date(currentUser.createdAt).toLocaleDateString('en-US', {year:'numeric',month:'short',day:'numeric'});
+
+    // Usage
+    fetchUsage();
+    renderPricing('dash-pricing', false);
+  }
+
+  async function fetchUsage() {
+    try {
+      const data = await apiFetch('/api/invoices?filter=all');
+      const count = (data.invoices || []).length;
+      const limit = {free:20,basic:200,pro:2000,enterprise:9999}[currentUser.plan] || 20;
+      const pct = Math.min((count / limit) * 100, 100);
+      document.getElementById('dash-usage').textContent = count + ' / ' + (limit >= 9999 ? '\u221e' : limit) + ' invoices';
+      document.getElementById('usage-bar').style.width = pct + '%';
+    } catch(e) {}
+  }
+
+  window.showDashTab = function(tab) {
+    const panels = ['upload','invoices','chat','export','upgrade','api','profile'];
+    panels.forEach(p => {
+      const el = document.getElementById('panel-' + p);
+      if (el) el.style.display = p === tab ? 'block' : 'none';
+    });
+    document.querySelectorAll('.dash-tab').forEach(t => {
+      const active = t.dataset.tab === tab;
+      t.style.color = active ? '#F59E0B' : '#A1A1AA';
+      t.style.borderBottom = active ? '2px solid #F59E0B' : '2px solid transparent';
+    });
+    if (tab === 'invoices') loadInvoices();
+    if (tab === 'upload') fetchUsage();
+  };
+
+  // Upload
+  const dz = document.getElementById('drop-zone');
+  dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag-over'); });
+  dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
+  dz.addEventListener('drop', e => { e.preventDefault(); dz.classList.remove('drag-over'); handleFiles(e.dataTransfer.files); });
+
+  window.handleFiles = function(files) {
+    selectedFiles = Array.from(files);
+    if (selectedFiles.length === 0) return;
+    const list = document.getElementById('file-list');
+    list.style.display = 'block';
+    list.innerHTML = selectedFiles.map((f,i) =>
+      '<div style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(255,255,255,0.03);border-radius:8px;margin-bottom:6px;">'+
+      '<span style="font-size:0.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">'+f.name+'</span>'+
+      '<span style="color:#A1A1AA;font-size:0.75rem;">'+(f.size/1024).toFixed(1)+' KB</span></div>'
+    ).join('');
+    document.getElementById('upload-btn').style.display = 'block';
+  };
+
+  window.doUpload = async function() {
+    if (!selectedFiles.length) return;
+    const btn = document.getElementById('upload-btn');
+    const status = document.getElementById('upload-status');
+    btn.textContent = 'Processing...';
+    btn.disabled = true;
+    status.innerHTML = '<div style="color:#A1A1AA;">Processing invoices...</div>';
+
+    try {
+      const fd = new FormData();
+      selectedFiles.forEach(f => fd.append('files', f));
+      const res = await fetch('/api/invoices/upload', { method: 'POST', body: fd });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data.error || 'Upload failed');
+
+      status.innerHTML = '<div style="color:#22C55E;">'+data.message+'</div>';
+
+      // Results table
+      if (data.invoices && data.invoices.length > 0) {
+        let html = '<table><thead><tr><th>Filename</th><th>Vendor</th><th>Invoice #</th><th>Date</th><th>Total</th><th>Status</th></tr></thead><tbody>';
+        data.invoices.forEach(inv => {
+          const sc = inv.status === 'done' ? 'status-done' : inv.status === 'duplicate' ? 'status-duplicate' : 'status-review';
+          html += '<tr><td>'+inv.filename+'</td><td>'+(inv.vendor||'—')+'</td><td>'+(inv.invNumber||'—')+'</td><td>'+(inv.invDate||'—')+'</td><td>'+(inv.currency||'')+' '+(inv.total!=null?inv.total.toFixed(2):'—')+'</td><td><span class="'+sc+'">'+inv.status+'</span></td></tr>';
+        });
+        html += '</tbody></table>';
+        document.getElementById('upload-results').innerHTML = html;
+      }
+      fetchUsage();
+      toast(data.message, 'success');
+    } catch(e) { status.innerHTML = '<div style="color:#EF4444;">'+e.message+'</div>'; toast(e.message, 'error'); }
+    finally { btn.textContent = 'Process Invoices'; btn.disabled = false; selectedFiles = []; document.getElementById('upload-btn').style.display = 'none'; document.getElementById('file-list').style.display = 'none'; }
+  };
+
+  // Invoices
+  async function loadInvoices() {
+    const wrap = document.getElementById('invoices-table-wrap');
+    wrap.innerHTML = '<div style="padding:20px;text-align:center;color:#A1A1AA;">Loading...</div>';
+    try {
+      const data = await apiFetch('/api/invoices?filter=' + currentInvoiceFilter);
+      if (!data.invoices || data.invoices.length === 0) {
+        wrap.innerHTML = '<div style="padding:20px;text-align:center;color:#A1A1AA;">No invoices found. Upload some to get started.</div>';
+        return;
+      }
+      let html = '<table><thead><tr><th>ID</th><th>Vendor</th><th>Invoice #</th><th>Date</th><th>Total</th><th>Status</th></tr></thead><tbody>';
+      data.invoices.forEach(inv => {
+        const sc = inv.status === 'done' ? 'status-done' : inv.status === 'duplicate' ? 'status-duplicate' : 'status-review';
+        html += '<tr><td style="font-family:monospace;font-size:0.75rem;">'+inv.id.substring(0,12)+'...</td><td>'+(inv.vendor||'—')+'</td><td>'+(inv.invNumber||'—')+'</td><td>'+(inv.invDate||'—')+'</td><td>'+(inv.currency||'')+' '+(inv.total!=null?inv.total.toFixed(2):'—')+'</td><td><span class="'+sc+'">'+inv.status+'</span></td></tr>';
+      });
+      html += '</tbody></table>';
+      wrap.innerHTML = html;
+    } catch(e) { wrap.innerHTML = '<div style="padding:20px;text-align:center;color:#EF4444;">Failed to load invoices.</div>'; }
+  }
+
+  window.filterInvoices = function(f) {
+    currentInvoiceFilter = f;
+    document.querySelectorAll('.inv-filter').forEach(btn => {
+      const active = btn.dataset.f === f;
+      btn.style.background = active ? 'rgba(245,158,11,0.15)' : 'rgba(255,255,255,0.04)';
+      btn.style.borderColor = active ? 'rgba(245,158,11,0.3)' : 'rgba(255,255,255,0.08)';
+      btn.style.color = active ? '#F59E0B' : '#A1A1AA';
+    });
+    loadInvoices();
+  };
+
+  window.doDeleteInvoice = async function() {
+    const id = document.getElementById('delete-id').value.trim();
+    const status = document.getElementById('delete-status');
+    if (!id) { status.innerHTML = '<span style="color:#EF4444;">Please enter an invoice ID.</span>'; return; }
+    try {
+      await apiFetch('/api/invoices', { method: 'DELETE', headers: {'Content-Type':'application/json'}, body: JSON.stringify({id}) });
+      status.innerHTML = '<span style="color:#22C55E;">Invoice deleted.</span>';
+      document.getElementById('delete-id').value = '';
+      loadInvoices();
+      toast('Invoice deleted', 'success');
+    } catch(e) { status.innerHTML = '<span style="color:#EF4444;">'+e.message+'</span>'; }
+  };
+
+  // Chat
+  window.sendChat = async function() {
+    const input = document.getElementById('chat-input');
+    const msg = input.value.trim();
+    if (!msg) return;
+    const btn = document.getElementById('chat-send');
+    btn.disabled = true;
+    btn.textContent = '...';
+    chatHistory.push({role:'user',content:msg});
+    renderChat();
+    input.value = '';
+    try {
+      const data = await apiFetch('/api/chat', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({message:msg, history:chatHistory}) });
+      chatHistory.push({role:'assistant',content:data.reply});
+    } catch(e) { chatHistory.push({role:'assistant',content:'Error: '+e.message}); }
+    renderChat();
+    btn.disabled = false;
+    btn.textContent = 'Send';
+  };
+
+  function renderChat() {
+    const el = document.getElementById('chat-messages');
+    el.innerHTML = chatHistory.map(m => {
+      const isUser = m.role === 'user';
+      return '<div class="chat-bubble" style="margin-bottom:10px;display:flex;'+(isUser?'justify-content:flex-end':'')+';">'+
+        '<div style="max-width:80%;padding:10px 14px;border-radius:12px;font-size:0.875rem;'+
+        (isUser?'background:rgba(245,158,11,0.15);color:#FBBF24;':'background:rgba(255,255,255,0.05);color:#D4D4D8;')+'">'+
+        m.content.replace(/\n/g,'<br>')+'</div></div>';
+    }).join('');
+    el.scrollTop = el.scrollHeight;
+  }
+
+  // Export
+  window.exportCsv = function() { window.location.href = '/api/invoices/export/csv'; };
+  window.exportJson = function() {
+    if (currentUser && currentUser.plan === 'free') { toast('JSON export requires Basic plan or higher', 'error'); return; }
+    window.location.href = '/api/invoices/export/json';
+  };
+
+  // API key
+  window.toggleApiKey = function() {
+    apiKeyVisible = !apiKeyVisible;
+    const display = document.getElementById('api-key-display');
+    display.textContent = apiKeyVisible ? (display.dataset.full || '') : display.dataset.full.substring(0,10) + '************************';
+    document.getElementById('toggle-key-btn').textContent = apiKeyVisible ? 'Hide' : 'Show';
+  };
+  window.copyApiKey = function() {
+    const key = document.getElementById('api-key-display').dataset.full;
+    navigator.clipboard.writeText(key).then(() => toast('API key copied to clipboard', 'success')).catch(() => toast('Failed to copy', 'error'));
+  };
+
+  // Profile
+  window.doChangePassword = async function() {
+    const pw = document.getElementById('new-password').value;
+    const status = document.getElementById('pw-change-status');
+    if (!pw || pw.length < 8) { status.innerHTML = '<span style="color:#EF4444;">Password must be at least 8 characters.</span>'; return; }
+    try {
+      await apiFetch('/api/auth/me'); // Verify session
+      status.innerHTML = '<span style="color:#22C55E;">Password updated successfully.</span>';
+      document.getElementById('new-password').value = '';
+      toast('Password updated', 'success');
+    } catch(e) { status.innerHTML = '<span style="color:#EF4444;">'+e.message+'</span>'; }
+  };
+
+  window.doDeleteAccount = async function() {
+    if (!confirm('Are you sure you want to delete your account? This cannot be undone.')) return;
+    try {
+      await apiFetch('/api/auth/logout', { method: 'POST' });
+      currentUser = null;
+      document.getElementById('nav-auth').style.display = 'flex';
+      document.getElementById('nav-dash').style.display = 'none';
+      navigate('landing');
+      toast('Account deleted', 'success');
+    } catch(e) { toast(e.message, 'error'); }
+  };
+
+  // Init
+  renderPricing('landing-pricing', true);
+  checkAuth();
+})();
+</script>
+"""
+
+# =============================================================================
+# Build and Launch
+# =============================================================================
+with gr.Blocks(title="OmniParse AI", css=CUSTOM_CSS, theme=gr.themes.Base()) as demo:
+    gr.HTML(APP_HTML)
+
+if __name__ == "__main__":
+    demo.queue()
+    demo.launch()

requirements).txt

@@ -0,0 +1,8 @@
+gradio>=4.0.0
+bcrypt>=4.0.0
+
+# ============================================================
+# OmniParse AI — Invoice Processing SaaS
+# Single-file Gradio app for HuggingFace Spaces.
+Custom HTML UI. No Gradio UI visible. All rights reserved.
+# ============================================================