Upload 64 files

README.md

@@ -92,6 +92,7 @@ Add Supabase secrets, then add the Space URL to Supabase Auth redirect URLs.
 ## Notes
 
 - Core rewrite engine is classical NLP (spaCy + WordNet + rules).
+- With Supabase enabled: **guest preview** on the homepage → sign up for Free → Pro later.
 - Admin: manage `profiles` / `plans` in the Supabase Table Editor.
 - Stripe can set `plan_id` later; see setup doc.
 - Review rewritten text before publishing.

app/auth/supabase_client.py

@@ -151,8 +151,17 @@ def rest_post(path: str, body: dict[str, Any] | list[dict[str, Any]], *, upsert:
 
 
 def auth_public_config() -> dict[str, Any]:
+    from app.billing.quota import plans_catalog
+    from app.config import GUEST_DAILY_REWRITES, GUEST_DAILY_WORD_CAP, GUEST_MAX_WORDS
+
     return {
         "enabled": AUTH_ENABLED,
         "supabase_url": SUPABASE_URL if AUTH_ENABLED else "",
         "supabase_anon_key": SUPABASE_ANON_KEY if AUTH_ENABLED else "",
+        "guest": {
+            "daily_rewrites": GUEST_DAILY_REWRITES,
+            "max_words_per_request": GUEST_MAX_WORDS,
+            "daily_word_cap": GUEST_DAILY_WORD_CAP,
+        },
+        "plans": plans_catalog() if AUTH_ENABLED else plans_catalog(),
     }

app/billing/quota.py

@@ -1,14 +1,25 @@
-"""Plan limits + daily usage (Supabase Postgres via PostgREST)."""
+"""Plan limits + daily usage (signed-in via Supabase, guests via IP)."""
 
 from __future__ import annotations
 
+import hashlib
+import threading
 from dataclasses import dataclass
 from datetime import date, datetime, timezone
 
 from fastapi import HTTPException, status
 
 from app.auth.supabase_client import AuthUser, rest_get, rest_patch, rest_post
-from app.config import AUTH_ENABLED
+from app.config import (
+    AUTH_ENABLED,
+    GUEST_DAILY_REWRITES,
+    GUEST_DAILY_WORD_CAP,
+    GUEST_MAX_WORDS,
+)
+
+# In-memory guest usage: resets on redeploy (fine for free hosting teaser)
+_guest_lock = threading.Lock()
+_guest_usage: dict[str, dict[str, int | str]] = {}
 
 
 @dataclass
@@ -40,10 +51,141 @@ class AccountState:
     remaining_words: int
 
 
+def guest_plan() -> PlanLimits:
+    return PlanLimits(
+        plan_id="guest",
+        plan_name="Preview",
+        daily_rewrites=GUEST_DAILY_REWRITES,
+        max_words_per_request=GUEST_MAX_WORDS,
+        daily_word_cap=GUEST_DAILY_WORD_CAP,
+        price_inr_monthly=0,
+    )
+
+
+def fallback_plans_catalog() -> list[dict]:
+    """Public plan cards for upgrade UI (DB preferred when auth is on)."""
+    return [
+        {
+            "id": "guest",
+            "name": "Preview",
+            "daily_rewrites": GUEST_DAILY_REWRITES,
+            "max_words_per_request": GUEST_MAX_WORDS,
+            "daily_word_cap": GUEST_DAILY_WORD_CAP,
+            "price_inr_monthly": 0,
+            "blurb": "Try on the homepage — no account needed.",
+        },
+        {
+            "id": "free",
+            "name": "Free",
+            "daily_rewrites": 5,
+            "max_words_per_request": 400,
+            "daily_word_cap": 1500,
+            "price_inr_monthly": 0,
+            "blurb": "Sign up for daily rewrites and longer drafts.",
+        },
+        {
+            "id": "pro",
+            "name": "Pro",
+            "daily_rewrites": 50,
+            "max_words_per_request": 2000,
+            "daily_word_cap": 15000,
+            "price_inr_monthly": 199,
+            "blurb": "For everyday AI drafts — more words, more rewrites.",
+        },
+        {
+            "id": "plus",
+            "name": "Plus",
+            "daily_rewrites": 200,
+            "max_words_per_request": 5000,
+            "daily_word_cap": 50000,
+            "price_inr_monthly": 499,
+            "blurb": "Heavy daily writing and longer documents.",
+        },
+    ]
+
+
+def plans_catalog() -> list[dict]:
+    base = {p["id"]: p for p in fallback_plans_catalog()}
+    if not AUTH_ENABLED:
+        return list(base.values())
+    try:
+        rows = rest_get(
+            "plans",
+            {
+                "select": "id,name,daily_rewrites,max_words_per_request,daily_word_cap,price_inr_monthly,active",
+                "active": "eq.true",
+                "order": "price_inr_monthly.asc",
+            },
+        )
+        for row in rows or []:
+            pid = row["id"]
+            base[pid] = {
+                "id": pid,
+                "name": row["name"],
+                "daily_rewrites": int(row["daily_rewrites"]),
+                "max_words_per_request": int(row["max_words_per_request"]),
+                "daily_word_cap": int(row["daily_word_cap"]),
+                "price_inr_monthly": int(row.get("price_inr_monthly") or 0),
+                "blurb": base.get(pid, {}).get("blurb", ""),
+            }
+    except Exception:  # noqa: BLE001 — keep fallbacks if DB unreachable
+        pass
+    # Keep guest card first for marketing
+    order = ["guest", "free", "pro", "plus"]
+    out = [base[k] for k in order if k in base]
+    for k, v in base.items():
+        if k not in order:
+            out.append(v)
+    return out
+
+
 def _utc_today() -> str:
     return datetime.now(timezone.utc).date().isoformat()
 
 
+def guest_key_from_ip(ip: str) -> str:
+    raw = (ip or "unknown").strip()
+    return hashlib.sha256(raw.encode("utf-8")).hexdigest()[:32]
+
+
+def _guest_snapshot(key: str) -> UsageSnapshot:
+    today = _utc_today()
+    with _guest_lock:
+        row = _guest_usage.get(key)
+        if not row or row.get("date") != today:
+            return UsageSnapshot(0, 0)
+        return UsageSnapshot(int(row["rewrites"]), int(row["words"]))
+
+
+def get_guest_state(client_ip: str) -> AccountState:
+    plan = guest_plan()
+    usage = _guest_snapshot(guest_key_from_ip(client_ip))
+    return AccountState(
+        user_id="guest",
+        email=None,
+        display_name="Guest",
+        role="guest",
+        status="active",
+        plan=plan,
+        usage=usage,
+        remaining_rewrites=max(0, plan.daily_rewrites - usage.rewrite_count),
+        remaining_words=max(0, plan.daily_word_cap - usage.word_count),
+    )
+
+
+def record_guest_rewrite(client_ip: str, input_words: int) -> AccountState:
+    key = guest_key_from_ip(client_ip)
+    today = _utc_today()
+    with _guest_lock:
+        row = _guest_usage.get(key)
+        if not row or row.get("date") != today:
+            row = {"date": today, "rewrites": 0, "words": 0}
+        row["rewrites"] = int(row["rewrites"]) + 1
+        row["words"] = int(row["words"]) + input_words
+        _guest_usage[key] = row
+    return get_guest_state(client_ip)
+
+
 def _ensure_profile(user: AuthUser) -> dict:
     rows = rest_get(
         "profiles",
@@ -55,7 +197,6 @@ def _ensure_profile(user: AuthUser) -> dict:
     if rows:
         return rows[0]
 
-    # Trigger may lag; create profile defensively
     created = rest_post(
         "profiles",
         {
@@ -98,7 +239,6 @@ def _load_plan(plan_id: str) -> PlanLimits:
             },
         )
     if not rows:
-        # Hard fallback if schema not applied yet
         return PlanLimits("free", "Free", 5, 400, 1500, 0)
     row = rows[0]
     return PlanLimits(
@@ -152,86 +292,101 @@ def get_account_state(user: AuthUser) -> AccountState:
     )
 
 
-def assert_can_rewrite(user: AuthUser | None, input_words: int) -> AccountState | None:
-    """Enforce plan limits when auth is on. Returns account state for response meta."""
-    if not AUTH_ENABLED or user is None:
-        return None
-
-    account = get_account_state(user)
-    plan = account.plan
-    usage = account.usage
-
+def _enforce(plan: PlanLimits, usage: UsageSnapshot, input_words: int, *, signup_hint: bool) -> None:
+    upgrade = (
+        "Sign up free for 400 words and 5 rewrites/day, or go Pro for more."
+        if signup_hint
+        else "Upgrade to Pro for higher limits."
+    )
     if input_words > plan.max_words_per_request:
         raise HTTPException(
-            status_code=status.HTTP_413_REQUEST_ENTITY_TOO_LARGE,
+            status_code=status.HTTP_413_CONTENT_TOO_LARGE,
             detail=(
-                f"Your {plan.plan_name} plan allows up to "
-                f"{plan.max_words_per_request:,} words per rewrite "
-                f"(this text has {input_words:,}). Upgrade for higher limits."
+                f"{plan.plan_name} allows up to {plan.max_words_per_request:,} words per rewrite "
+                f"(this text has {input_words:,}). {upgrade}"
             ),
         )
-
     if usage.rewrite_count >= plan.daily_rewrites:
         raise HTTPException(
             status_code=status.HTTP_429_TOO_MANY_REQUESTS,
             detail=(
-                f"Daily rewrite limit reached ({plan.daily_rewrites} on {plan.plan_name}). "
-                "Try again tomorrow or upgrade to Pro."
+                f"Daily rewrite limit reached ({plan.daily_rewrites} on {plan.plan_name}). {upgrade}"
             ),
         )
-
     if usage.word_count + input_words > plan.daily_word_cap:
         raise HTTPException(
             status_code=status.HTTP_429_TOO_MANY_REQUESTS,
             detail=(
-                f"Daily word limit reached ({plan.daily_word_cap:,} on {plan.plan_name}). "
-                "Try again tomorrow or upgrade to Pro."
+                f"Daily word limit reached ({plan.daily_word_cap:,} on {plan.plan_name}). {upgrade}"
             ),
         )
 
-    return account
-
 
-def record_rewrite(user: AuthUser | None, input_words: int) -> AccountState | None:
-    if not AUTH_ENABLED or user is None:
+def assert_can_rewrite(
+    user: AuthUser | None,
+    input_words: int,
+    *,
+    client_ip: str = "",
+) -> AccountState | None:
+    """Enforce guest or plan limits when auth is enabled."""
+    if not AUTH_ENABLED:
         return None
 
-    today = _utc_today()
-    usage = _load_usage(user.id)
-    new_rewrites = usage.rewrite_count + 1
-    new_words = usage.word_count + input_words
+    if user is not None:
+        account = get_account_state(user)
+        _enforce(account.plan, account.usage, input_words, signup_hint=False)
+        return account
 
-    existing = rest_get(
-        "usage_daily",
-        {
-            "user_id": f"eq.{user.id}",
-            "usage_date": f"eq.{today}",
-            "select": "user_id",
-            "limit": "1",
-        },
-    )
-    if existing:
-        rest_patch(
+    guest = get_guest_state(client_ip)
+    _enforce(guest.plan, guest.usage, input_words, signup_hint=True)
+    return guest
+
+
+def record_rewrite(
+    user: AuthUser | None,
+    input_words: int,
+    *,
+    client_ip: str = "",
+) -> AccountState | None:
+    if not AUTH_ENABLED:
+        return None
+    if user is not None:
+        today = _utc_today()
+        usage = _load_usage(user.id)
+        new_rewrites = usage.rewrite_count + 1
+        new_words = usage.word_count + input_words
+        existing = rest_get(
             "usage_daily",
-            {"rewrite_count": new_rewrites, "word_count": new_words},
             {
                 "user_id": f"eq.{user.id}",
                 "usage_date": f"eq.{today}",
+                "select": "user_id",
+                "limit": "1",
             },
         )
-    else:
-        rest_post(
-            "usage_daily",
-            {
-                "user_id": user.id,
-                "usage_date": today,
-                "rewrite_count": new_rewrites,
-                "word_count": new_words,
-            },
-            upsert=True,
-        )
-
-    return get_account_state(user)
+        if existing:
+            rest_patch(
+                "usage_daily",
+                {"rewrite_count": new_rewrites, "word_count": new_words},
+                {
+                    "user_id": f"eq.{user.id}",
+                    "usage_date": f"eq.{today}",
+                },
+            )
+        else:
+            rest_post(
+                "usage_daily",
+                {
+                    "user_id": user.id,
+                    "usage_date": today,
+                    "rewrite_count": new_rewrites,
+                    "word_count": new_words,
+                },
+                upsert=True,
+            )
+        return get_account_state(user)
+
+    return record_guest_rewrite(client_ip, input_words)
 
 
 def account_payload(account: AccountState | None) -> dict | None:

app/config.py

@@ -28,3 +28,8 @@ SUPABASE_SERVICE_ROLE_KEY = os.environ.get("SUPABASE_SERVICE_ROLE_KEY") or ""
 SUPABASE_JWT_SECRET = os.environ.get("SUPABASE_JWT_SECRET") or ""
 
 AUTH_ENABLED = bool(SUPABASE_URL and SUPABASE_ANON_KEY and SUPABASE_SERVICE_ROLE_KEY)
+
+# Guest / homepage teaser (when auth is enabled and user is not signed in)
+GUEST_DAILY_REWRITES = int(os.environ.get("GUEST_DAILY_REWRITES", "1") or "1")
+GUEST_MAX_WORDS = int(os.environ.get("GUEST_MAX_WORDS", "100") or "100")
+GUEST_DAILY_WORD_CAP = int(os.environ.get("GUEST_DAILY_WORD_CAP", "100") or "100")

app/main.py

@@ -9,15 +9,21 @@ ROOT = Path(__file__).resolve().parent.parent
 if str(ROOT) not in sys.path:
     sys.path.insert(0, str(ROOT))
 
-from fastapi import Depends, FastAPI, HTTPException
+from fastapi import Depends, FastAPI, HTTPException, Request
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field
 
-from app.auth.deps import require_user
+from app.auth.deps import optional_user
 from app.auth.supabase_client import AuthUser, auth_public_config
-from app.billing.quota import account_payload, assert_can_rewrite, get_account_state, record_rewrite
+from app.billing.quota import (
+    account_payload,
+    assert_can_rewrite,
+    get_account_state,
+    get_guest_state,
+    record_rewrite,
+)
 from app.bootstrap import ensure_resources
 from app.config import APP_TITLE, AUTH_ENABLED, MAX_CHARS
 from app.pipeline.nlp import spacy_available
@@ -28,7 +34,7 @@ ensure_resources()
 
 STATIC_DIR = ROOT / "frontend" / "dist"
 
-app = FastAPI(title=APP_TITLE, version="2.1.0")
+app = FastAPI(title=APP_TITLE, version="2.2.0")
 
 app.add_middleware(
     CORSMiddleware,
@@ -51,6 +57,15 @@ class SimilarityRequest(BaseModel):
     reference: str
 
 
+def _client_ip(request: Request) -> str:
+    forwarded = request.headers.get("x-forwarded-for") or ""
+    if forwarded:
+        return forwarded.split(",")[0].strip()
+    if request.client and request.client.host:
+        return request.client.host
+    return "unknown"
+
+
 @app.get("/health")
 def health():
     engines = ["rules", "wordnet", "mechanics"]
@@ -66,22 +81,30 @@ def health():
 
 @app.get("/v1/auth/config")
 def api_auth_config():
-    """Public Supabase keys for the browser (anon key is safe to expose)."""
+    """Public Supabase keys + plan cards for the UI (anon key is safe to expose)."""
     return auth_public_config()
 
 
 @app.get("/v1/me")
-def api_me(user: AuthUser | None = Depends(require_user)):
+def api_me(
+    request: Request,
+    user: AuthUser | None = Depends(optional_user),
+):
     if not AUTH_ENABLED:
         return {"auth_enabled": False, "account": None}
-    assert user is not None
+    if user is None:
+        return {
+            "auth_enabled": True,
+            "account": account_payload(get_guest_state(_client_ip(request))),
+        }
     return {"auth_enabled": True, "account": account_payload(get_account_state(user))}
 
 
 @app.post("/v1/rewrite")
 def api_rewrite(
     body: RewriteRequest,
-    user: AuthUser | None = Depends(require_user),
+    request: Request,
+    user: AuthUser | None = Depends(optional_user),
 ):
     text = body.text.strip()
     if not text:
@@ -92,8 +115,9 @@ def api_rewrite(
             detail=f"Text is too long ({len(text):,} chars; max {MAX_CHARS:,}).",
         )
 
+    ip = _client_ip(request)
     input_words = len(text.split())
-    assert_can_rewrite(user, input_words)
+    assert_can_rewrite(user, input_words, client_ip=ip)
 
     try:
         result = rewrite_text(
@@ -105,7 +129,7 @@ def api_rewrite(
     except ValueError as exc:
         raise HTTPException(status_code=400, detail=str(exc)) from exc
 
-    account = record_rewrite(user, result.input_words)
+    account = record_rewrite(user, result.input_words, client_ip=ip)
 
     return {
         "rewrite": result.text,
@@ -126,9 +150,9 @@ def api_rewrite(
 @app.post("/v1/similarity")
 def api_similarity(
     body: SimilarityRequest,
-    user: AuthUser | None = Depends(require_user),
+    user: AuthUser | None = Depends(optional_user),
 ):
-    _ = user  # auth gate only when enabled
+    _ = user
     sim = similarity_check(body.rewrite, body.reference)
     return {
         "overlap_pct": sim.overlap_pct,

frontend/dist/assets/index.css

@@ -526,6 +526,148 @@ textarea {
   font-size: 0.88rem;
 }
 
+.teaser-banner {
+  margin: -0.5rem 0 1.1rem;
+  padding: 0.75rem 1rem;
+  border-radius: 12px;
+  background: var(--accent-soft);
+  color: var(--ink-soft);
+  font-size: 0.92rem;
+  line-height: 1.4;
+}
+
+.teaser-banner strong {
+  color: var(--accent);
+}
+
+.auth-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.25rem;
+}
+
+.btn-compact {
+  padding: 0.4rem 0.75rem;
+  font-size: 0.8rem;
+}
+
+.counts .over-limit {
+  color: var(--warn);
+  font-weight: 600;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgba(18, 28, 26, 0.45);
+  backdrop-filter: blur(4px);
+  animation: enter 0.25s ease both;
+}
+
+.modal-card {
+  position: relative;
+  max-height: min(90vh, 640px);
+  overflow: auto;
+}
+
+.modal-card h2 {
+  margin: 0 1.5rem 0 0;
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  letter-spacing: -0.02em;
+}
+
+.modal-close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.85rem;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.upgrade-card {
+  margin-top: 1.25rem;
+  padding: 1.25rem 1.35rem;
+  border: 1px solid var(--panel-edge);
+  border-radius: 18px;
+  background: rgba(251, 252, 251, 0.85);
+  box-shadow: var(--shadow-soft);
+  animation: fade-up 0.45s ease both;
+}
+
+.upgrade-copy h3 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 1.35rem;
+  letter-spacing: -0.02em;
+}
+
+.upgrade-copy p {
+  margin: 0.45rem 0 0;
+  color: var(--ink-soft);
+  font-size: 0.95rem;
+  line-height: 1.45;
+  max-width: 40rem;
+}
+
+.upgrade-plans {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  margin-top: 1rem;
+}
+
+.plan-pill {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 9.5rem;
+  padding: 0.7rem 0.85rem;
+  border-radius: 12px;
+  border: 1px solid var(--panel-edge);
+  background: rgba(232, 239, 236, 0.55);
+  font-size: 0.82rem;
+  color: var(--ink-soft);
+}
+
+.plan-pill strong {
+  color: var(--ink);
+  font-size: 0.9rem;
+}
+
+.plan-pill-pro {
+  border-color: rgba(26, 92, 74, 0.35);
+  background: var(--accent-soft);
+}
+
+.plan-price {
+  font-weight: 700;
+  color: var(--accent);
+  margin-top: 0.15rem;
+}
+
+.upgrade-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.upgrade-note {
+  margin: 0.75rem 0 0;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
 @media (max-width: 920px) {
   .topbar {
     flex-direction: column;

frontend/dist/assets/index.js

@@ -25,9 +25,9 @@ async function loadAuthConfig() {
     const res = await fetch("/v1/auth/config");
     cachedConfig = res.ok
       ? await res.json()
-      : { enabled: false, supabase_url: "", supabase_anon_key: "" };
+      : { enabled: false, supabase_url: "", supabase_anon_key: "", plans: [], guest: { max_words_per_request: 100, daily_rewrites: 1 } };
   } catch {
-    cachedConfig = { enabled: false, supabase_url: "", supabase_anon_key: "" };
+    cachedConfig = { enabled: false, supabase_url: "", supabase_anon_key: "", plans: [], guest: { max_words_per_request: 100, daily_rewrites: 1 } };
   }
   return cachedConfig;
 }
@@ -36,11 +36,7 @@ async function initSupabase() {
   const config = await loadAuthConfig();
   if (config.enabled && config.supabase_url && config.supabase_anon_key) {
     supabaseClient = createClient(config.supabase_url, config.supabase_anon_key, {
-      auth: {
-        persistSession: true,
-        autoRefreshToken: true,
-        detectSessionInUrl: true,
-      },
+      auth: { persistSession: true, autoRefreshToken: true, detectSessionInUrl: true },
     });
   } else {
     supabaseClient = null;
@@ -55,9 +51,7 @@ function wordCount(text) {
 function detailMessage(detail, fallback) {
   if (typeof detail === "string") return detail;
   if (Array.isArray(detail)) {
-    return detail
-      .map((d) => (d && typeof d === "object" && d.msg ? String(d.msg) : String(d)))
-      .join(" ");
+    return detail.map((d) => (d && typeof d === "object" && d.msg ? String(d.msg) : String(d))).join(" ");
   }
   return fallback;
 }
@@ -65,28 +59,25 @@ function detailMessage(detail, fallback) {
 async function rewriteText(payload, accessToken) {
   const headers = { "Content-Type": "application/json" };
   if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
-  const res = await fetch("/v1/rewrite", {
-    method: "POST",
-    headers,
-    body: JSON.stringify(payload),
-  });
+  const res = await fetch("/v1/rewrite", { method: "POST", headers, body: JSON.stringify(payload) });
   if (!res.ok) {
     let detail = "Rewrite failed.";
     try {
       const data = await res.json();
       detail = data.detail || detail;
-    } catch {
-      /* ignore */
-    }
-    throw new Error(detailMessage(detail, "Rewrite failed."));
+    } catch { /* ignore */ }
+    const err = new Error(detailMessage(detail, "Rewrite failed."));
+    err.status = res.status;
+    if (res.status === 401 || res.status === 429 || res.status === 413) err.code = "limit";
+    throw err;
   }
   return res.json();
 }
 
 async function fetchMe(accessToken) {
-  const res = await fetch("/v1/me", {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
+  const headers = {};
+  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+  const res = await fetch("/v1/me", { headers });
   if (!res.ok) throw new Error("Could not load account.");
   return res.json();
 }
@@ -98,14 +89,16 @@ function AuthProvider({ children }) {
   const [authEnabled, setAuthEnabled] = useState(false);
   const [session, setSession] = useState(null);
   const [account, setAccount] = useState(null);
+  const [plans, setPlans] = useState([]);
+  const [guestMaxWords, setGuestMaxWords] = useState(100);
 
   const refreshAccount = useCallback(async () => {
-    if (!authEnabled || !session) {
+    if (!authEnabled) {
       setAccount(null);
       return;
     }
     try {
-      const me = await fetchMe(session.access_token);
+      const me = await fetchMe(session && session.access_token);
       setAccount(me.account);
     } catch {
       setAccount(null);
@@ -117,62 +110,51 @@ function AuthProvider({ children }) {
     (async () => {
       const config = await initSupabase();
       setAuthEnabled(!!config.enabled);
+      setPlans(config.plans || []);
+      setGuestMaxWords((config.guest && config.guest.max_words_per_request) || 100);
       if (!config.enabled || !supabaseClient) {
         setReady(true);
         return;
       }
       const { data } = await supabaseClient.auth.getSession();
       setSession(data.session);
-      const { data: listener } = supabaseClient.auth.onAuthStateChange((_e, next) => {
-        setSession(next);
-      });
+      const { data: listener } = supabaseClient.auth.onAuthStateChange((_e, next) => setSession(next));
       unsub = () => listener.subscription.unsubscribe();
       setReady(true);
     })();
-    return () => {
-      if (unsub) unsub();
-    };
+    return () => { if (unsub) unsub(); };
   }, []);
 
-  useEffect(() => {
-    refreshAccount();
-  }, [refreshAccount]);
-
-  const value = useMemo(
-    () => ({
-      ready,
-      authEnabled,
-      session,
-      account,
-      setAccount,
-      refreshAccount,
-      async signInWithPassword(email, password) {
-        if (!supabaseClient) throw new Error("Auth is not configured.");
-        const { error } = await supabaseClient.auth.signInWithPassword({ email, password });
-        if (error) throw error;
-      },
-      async signUp(email, password) {
-        if (!supabaseClient) throw new Error("Auth is not configured.");
-        const { data, error } = await supabaseClient.auth.signUp({ email, password });
-        if (error) throw error;
-        return data.session ? "signed_in" : "check_email";
-      },
-      async signInWithGoogle() {
-        if (!supabaseClient) throw new Error("Auth is not configured.");
-        const { error } = await supabaseClient.auth.signInWithOAuth({
-          provider: "google",
-          options: { redirectTo: window.location.origin },
-        });
-        if (error) throw error;
-      },
-      async signOut() {
-        if (!supabaseClient) return;
-        await supabaseClient.auth.signOut();
-        setAccount(null);
-      },
-    }),
-    [ready, authEnabled, session, account, refreshAccount],
-  );
+  useEffect(() => { refreshAccount(); }, [refreshAccount]);
+
+  const value = useMemo(() => ({
+    ready, authEnabled, session, account, plans, guestMaxWords, setAccount, refreshAccount,
+    async signInWithPassword(email, password) {
+      if (!supabaseClient) throw new Error("Auth is not configured.");
+      const { error } = await supabaseClient.auth.signInWithPassword({ email, password });
+      if (error) throw error;
+    },
+    async signUp(email, password) {
+      if (!supabaseClient) throw new Error("Auth is not configured.");
+      const { data, error } = await supabaseClient.auth.signUp({ email, password });
+      if (error) throw error;
+      return data.session ? "signed_in" : "check_email";
+    },
+    async signInWithGoogle() {
+      if (!supabaseClient) throw new Error("Auth is not configured.");
+      const { error } = await supabaseClient.auth.signInWithOAuth({
+        provider: "google",
+        options: { redirectTo: window.location.origin },
+      });
+      if (error) throw error;
+    },
+    async signOut() {
+      if (!supabaseClient) return;
+      await supabaseClient.auth.signOut();
+      setAccount(null);
+      await refreshAccount();
+    },
+  }), [ready, authEnabled, session, account, plans, guestMaxWords, refreshAccount]);
 
   return h(AuthContext.Provider, { value }, children);
 }
@@ -183,15 +165,25 @@ function useAuth() {
   return ctx;
 }
 
-function AuthScreen() {
+function AuthModal({ open, onClose, initialMode, title }) {
   const { signInWithPassword, signUp, signInWithGoogle } = useAuth();
-  const [mode, setMode] = useState("signin");
+  const [mode, setMode] = useState(initialMode || "signup");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [busy, setBusy] = useState(false);
   const [message, setMessage] = useState("");
   const [error, setError] = useState("");
 
+  useEffect(() => {
+    if (open) {
+      setMode(initialMode || "signup");
+      setError("");
+      setMessage("");
+    }
+  }, [open, initialMode]);
+
+  if (!open) return null;
+
   async function onSubmit(e) {
     e.preventDefault();
     setBusy(true);
@@ -200,11 +192,11 @@ function AuthScreen() {
     try {
       if (mode === "signin") {
         await signInWithPassword(email.trim(), password);
+        onClose();
       } else {
         const result = await signUp(email.trim(), password);
-        if (result === "check_email") {
-          setMessage("Check your email to confirm your account, then sign in.");
-        }
+        if (result === "check_email") setMessage("Check your email to confirm your account, then sign in.");
+        else onClose();
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Authentication failed.");
@@ -213,49 +205,31 @@ function AuthScreen() {
     }
   }
 
-  return h("div", { className: "auth-shell" },
-    h("div", { className: "auth-card" },
-      h("h1", null, "PlainRewrite"),
-      h("p", { className: "auth-lead" },
-        "From AI-generated to plagiarism-safe — rewrite in a voice that feels real.",
-      ),
-      h("div", { className: "segment auth-tabs", role: "group", "aria-label": "Auth mode" },
-        h("button", {
-          type: "button",
-          className: mode === "signin" ? "active" : "",
-          onClick: () => setMode("signin"),
-        }, "Sign in"),
-        h("button", {
-          type: "button",
-          className: mode === "signup" ? "active" : "",
-          onClick: () => setMode("signup"),
-        }, "Sign up"),
+  return h("div", { className: "modal-backdrop", onClick: onClose },
+    h("div", {
+      className: "auth-card modal-card",
+      role: "dialog",
+      "aria-modal": "true",
+      onClick: (e) => e.stopPropagation(),
+    },
+      h("button", { type: "button", className: "modal-close", onClick: onClose, "aria-label": "Close" }, "×"),
+      h("h2", null, title || (mode === "signin" ? "Sign in" : "Create free account")),
+      h("p", { className: "auth-lead" }, "Unlock longer rewrites and daily limits. Google or email — takes a minute."),
+      h("div", { className: "segment auth-tabs", role: "group" },
+        h("button", { type: "button", className: mode === "signin" ? "active" : "", onClick: () => setMode("signin") }, "Sign in"),
+        h("button", { type: "button", className: mode === "signup" ? "active" : "", onClick: () => setMode("signup") }, "Sign up"),
       ),
-      h("form", { className: "auth-form", onSubmit: onSubmit },
-        h("label", null, "Email",
-          h("input", {
-            type: "email",
-            autoComplete: "email",
-            value: email,
-            onChange: (e) => setEmail(e.target.value),
-            required: true,
-          }),
-        ),
-        h("label", null, "Password",
-          h("input", {
-            type: "password",
-            autoComplete: mode === "signin" ? "current-password" : "new-password",
-            value: password,
-            onChange: (e) => setPassword(e.target.value),
-            minLength: 6,
-            required: true,
-          }),
-        ),
-        h("button", {
-          type: "submit",
-          className: "btn btn-primary auth-submit",
-          disabled: busy,
-        }, busy ? "Please wait…" : mode === "signin" ? "Sign in" : "Create account"),
+      h("form", { className: "auth-form", onSubmit },
+        h("label", null, "Email", h("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), required: true })),
+        h("label", null, "Password", h("input", {
+          type: "password",
+          value: password,
+          onChange: (e) => setPassword(e.target.value),
+          minLength: 6,
+          required: true,
+        })),
+        h("button", { type: "submit", className: "btn btn-primary auth-submit", disabled: busy },
+          busy ? "Please wait…" : mode === "signin" ? "Sign in" : "Create free account"),
       ),
       h("div", { className: "auth-divider" }, "or"),
       h("button", {
@@ -270,8 +244,61 @@ function AuthScreen() {
   );
 }
 
+function UpgradeCard({ account, plans, onSignUp, onSignIn }) {
+  const planId = (account && account.plan && account.plan.id) || "guest";
+  if (planId === "pro" || planId === "plus") return null;
+  const free = plans.find((p) => p.id === "free");
+  const pro = plans.find((p) => p.id === "pro");
+  const isGuest = planId === "guest" || (account && account.role === "guest");
+
+  return h("section", { className: "upgrade-card", "aria-label": "Upgrade plans" },
+    h("div", { className: "upgrade-copy" },
+      h("h3", null, isGuest
+        ? "Liked the rewrite? Unlock more with a free account"
+        : "Need longer drafts every day? Go Pro"),
+      h("p", null, isGuest
+        ? `Preview is capped at ${(account && account.plan && account.plan.max_words_per_request) || 100} words and ${(account && account.plan && account.plan.daily_rewrites) || 1} rewrite/day. Sign up free for higher limits — or Pro for serious daily use.`
+        : `You're on ${(account && account.plan && account.plan.name) || "Free"}. Pro gives up to ${(pro && pro.max_words_per_request ? pro.max_words_per_request.toLocaleString() : "2,000")} words per rewrite and ${(pro && pro.daily_rewrites) || 50} rewrites/day.`),
+    ),
+    h("div", { className: "upgrade-plans" },
+      isGuest && free
+        ? h("div", { className: "plan-pill" },
+            h("strong", null, "Free"),
+            h("span", null, `${free.daily_rewrites}/day · ${free.max_words_per_request} words`),
+            h("span", { className: "plan-price" }, "₹0"),
+          )
+        : null,
+      pro
+        ? h("div", { className: "plan-pill plan-pill-pro" },
+            h("strong", null, "Pro"),
+            h("span", null, `${pro.daily_rewrites}/day · ${pro.max_words_per_request.toLocaleString()} words`),
+            h("span", { className: "plan-price" }, `₹${pro.price_inr_monthly}/mo`),
+          )
+        : null,
+    ),
+    h("div", { className: "upgrade-actions" },
+      isGuest
+        ? h(Fragment, null,
+            h("button", { type: "button", className: "btn btn-primary", onClick: onSignUp }, "Sign up free"),
+            h("button", { type: "button", className: "btn btn-quiet", onClick: onSignIn }, "Sign in"),
+          )
+        : h("button", {
+            type: "button",
+            className: "btn btn-primary",
+            disabled: true,
+            title: "Stripe/Razorpay next",
+          }, `Pro ₹${(pro && pro.price_inr_monthly) || 199}/mo — payments soon`),
+    ),
+    !isGuest
+      ? h("p", { className: "upgrade-note" }, "Until checkout is live, an admin can set plan_id = pro on your profile in Supabase.")
+      : null,
+  );
+}
+
 function App() {
-  const { ready, authEnabled, session, account, setAccount, signOut } = useAuth();
+  const {
+    ready, authEnabled, session, account, setAccount, signOut, plans, guestMaxWords, refreshAccount,
+  } = useAuth();
   const [input, setInput] = useState("");
   const [output, setOutput] = useState("");
   const [tone, setTone] = useState("Neutral");
@@ -282,6 +309,13 @@ function App() {
   const [meta, setMeta] = useState("");
   const [copied, setCopied] = useState(false);
   const [freshOut, setFreshOut] = useState(false);
+  const [showUpgrade, setShowUpgrade] = useState(false);
+  const [authOpen, setAuthOpen] = useState(false);
+  const [authMode, setAuthMode] = useState("signup");
+  const [authTitle, setAuthTitle] = useState(undefined);
+
+  const isGuest = !!(authEnabled && !session);
+  const maxWords = (account && account.plan && account.plan.max_words_per_request) || (isGuest ? guestMaxWords : 50000);
 
   useEffect(() => {
     if (!copied) return undefined;
@@ -289,6 +323,13 @@ function App() {
     return () => window.clearTimeout(t);
   }, [copied]);
 
+  useEffect(() => {
+    if (session) {
+      setAuthOpen(false);
+      refreshAccount();
+    }
+  }, [session, refreshAccount]);
+
   useEffect(() => {
     const onKey = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
@@ -300,44 +341,54 @@ function App() {
     return () => window.removeEventListener("keydown", onKey);
   });
 
+  function openAuth(mode, title) {
+    setAuthMode(mode);
+    setAuthTitle(title);
+    setAuthOpen(true);
+  }
+
   async function onRewrite() {
     const text = input.trim();
-    if (!text) {
-      setError("Paste some text first.");
-      return;
-    }
+    if (!text) { setError("Paste some text first."); return; }
     if (text.length > MAX_CHARS) {
       setError(`Text is too long (${text.length.toLocaleString()} chars).`);
       return;
     }
+    const words = wordCount(text);
+    if (authEnabled && words > maxWords) {
+      setError(`This text has ${words} words. ${isGuest ? "Preview" : ((account && account.plan && account.plan.name) || "Your plan")} allows ${maxWords} words per rewrite.`);
+      setShowUpgrade(true);
+      if (isGuest) openAuth("signup", "Sign up to rewrite longer text");
+      return;
+    }
 
     setLoading(true);
     setError("");
     setMeta("Rewriting…");
     setFreshOut(false);
     try {
-      const result = await rewriteText(
-        {
-          text,
-          tone,
-          strength: STRENGTH_MAP[strength],
-          preserve_length: preserveLength,
-        },
-        session && session.access_token,
-      );
+      const result = await rewriteText({
+        text,
+        tone,
+        strength: STRENGTH_MAP[strength],
+        preserve_length: preserveLength,
+      }, session && session.access_token);
       setOutput(result.rewrite);
       setFreshOut(true);
       if (result.account) setAccount(result.account);
-      const quota =
-        result.account && result.account.usage
-          ? ` · ${result.account.usage.remaining_rewrites} rewrites left today`
-          : "";
-      setMeta(
-        `${result.meta.input_words.toLocaleString()} → ${result.meta.output_words.toLocaleString()} words · ${result.meta.seconds}s${quota}`,
-      );
+      const left = result.account && result.account.usage && result.account.usage.remaining_rewrites;
+      const quota = left != null ? ` · ${left} rewrite${left === 1 ? "" : "s"} left today` : "";
+      setMeta(`${result.meta.input_words.toLocaleString()} → ${result.meta.output_words.toLocaleString()} words · ${result.meta.seconds}s${quota}`);
+      if (authEnabled && result.account && (result.account.plan.id === "guest" || result.account.plan.id === "free")) {
+        setShowUpgrade(true);
+      }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Rewrite failed.");
       setMeta("");
+      if (err && err.code === "limit") {
+        setShowUpgrade(true);
+        if (isGuest) openAuth("signup", "Free preview used — sign up for more");
+      }
     } finally {
       setLoading(false);
     }
@@ -366,14 +417,9 @@ function App() {
 
   const inWords = wordCount(input);
   const outWords = wordCount(output);
+  const overGuestCap = isGuest && inWords > maxWords;
 
-  if (!ready) {
-    return h("div", { className: "app shell" }, h("p", { className: "hint" }, "Loading…"));
-  }
-
-  if (authEnabled && !session) {
-    return h(AuthScreen);
-  }
+  if (!ready) return h("div", { className: "app shell" }, h("p", { className: "hint" }, "Loading…"));
 
   return h("div", { className: "app shell" },
     h("div", { className: "topbar" },
@@ -382,74 +428,63 @@ function App() {
         h("p", null, "From AI-generated to plagiarism-safe — rewrite in a voice that feels real."),
       ),
       h("div", { className: "top-meta" },
-        account
+        session && account
           ? h("div", { className: "account-chip" },
               h("div", { className: "account-plan" }, account.plan.name),
               h("div", null, `${account.usage.remaining_rewrites}/${account.plan.daily_rewrites} rewrites today`),
               h("div", { className: "account-email" }, account.email),
-              h("button", {
-                type: "button",
-                className: "ghost-btn",
-                onClick: () => signOut(),
-              }, "Sign out"),
+              h("button", { type: "button", className: "ghost-btn", onClick: () => signOut() }, "Sign out"),
             )
-          : h(Fragment, null, `${tone} · ${strength}`, h("br"), "⌘/Ctrl + Enter"),
+          : authEnabled
+            ? h("div", { className: "account-chip" },
+                h("div", { className: "account-plan" }, "Preview"),
+                h("div", null, account
+                  ? `${account.usage.remaining_rewrites}/${account.plan.daily_rewrites} free rewrite today`
+                  : `Try ${guestMaxWords} words free`),
+                h("div", { className: "auth-inline" },
+                  h("button", { type: "button", className: "ghost-btn", onClick: () => openAuth("signin", "Sign in") }, "Sign in"),
+                  h("button", { type: "button", className: "btn btn-primary btn-compact", onClick: () => openAuth("signup", "Create free account") }, "Sign up"),
+                ),
+              )
+            : h(Fragment, null, `${tone} · ${strength}`, h("br"), "⌘/Ctrl + Enter"),
       ),
     ),
+    isGuest
+      ? h("p", { className: "teaser-banner" },
+          "Try a short rewrite free — up to ", h("strong", null, `${maxWords} words`),
+          `, ${(account && account.plan && account.plan.daily_rewrites) || 1} per day. Sign up for more length and daily rewrites.`,
+        )
+      : null,
     h("div", { className: "stage" },
       h("div", { className: "toolbar" },
         h("div", { className: "tool-group" },
           h("span", null, "Tone"),
-          h("div", { className: "segment", role: "group", "aria-label": "Tone" },
-            TONES.map((t) =>
-              h("button", {
-                key: t,
-                type: "button",
-                className: tone === t ? "active" : "",
-                onClick: () => setTone(t),
-              }, t),
-            ),
+          h("div", { className: "segment", role: "group" },
+            TONES.map((t) => h("button", { key: t, type: "button", className: tone === t ? "active" : "", onClick: () => setTone(t) }, t)),
           ),
         ),
         h("div", { className: "tool-group" },
           h("span", null, "Strength"),
-          h("div", { className: "segment", role: "group", "aria-label": "Strength" },
-            STRENGTHS.map((s) =>
-              h("button", {
-                key: s,
-                type: "button",
-                className: strength === s ? "active" : "",
-                onClick: () => setStrength(s),
-              }, s),
-            ),
+          h("div", { className: "segment", role: "group" },
+            STRENGTHS.map((s) => h("button", { key: s, type: "button", className: strength === s ? "active" : "", onClick: () => setStrength(s) }, s)),
           ),
         ),
         h("label", { className: "check" },
-          h("input", {
-            type: "checkbox",
-            checked: preserveLength,
-            onChange: (e) => setPreserveLength(e.target.checked),
-          }),
+          h("input", { type: "checkbox", checked: preserveLength, onChange: (e) => setPreserveLength(e.target.checked) }),
           " Match length",
         ),
         h("div", { className: "toolbar-actions" },
           h("button", {
             type: "button",
             className: "btn btn-quiet",
-            onClick: () => {
-              setInput("");
-              setOutput("");
-              setMeta("");
-              setError("");
-              setFreshOut(false);
-            },
             disabled: loading,
+            onClick: () => { setInput(""); setOutput(""); setMeta(""); setError(""); setFreshOut(false); },
           }, "Clear"),
           h("button", {
             type: "button",
             className: "btn btn-primary",
-            onClick: () => onRewrite(),
             disabled: loading,
+            onClick: () => onRewrite(),
           }, loading ? "Rewriting…" : "Rewrite"),
         ),
       ),
@@ -459,7 +494,7 @@ function App() {
           h("textarea", {
             value: input,
             onChange: (e) => setInput(e.target.value),
-            placeholder: "Paste your draft here…",
+            placeholder: isGuest ? `Paste a short AI draft (up to ${maxWords} words)…` : "Paste your draft here…",
             spellCheck: true,
           }),
         ),
@@ -467,45 +502,44 @@ function App() {
           h("div", { className: "pane-head" },
             h("h2", null, "Rewrite"),
             h("div", { className: "pane-actions" },
-              h("button", {
-                type: "button",
-                className: "ghost-btn",
-                onClick: () => onCopy(),
-                disabled: !output.trim(),
-              }, copied ? "Copied" : "Copy"),
-              h("button", {
-                type: "button",
-                className: "ghost-btn",
-                onClick: onDownload,
-                disabled: !output.trim(),
-              }, "Download"),
+              h("button", { type: "button", className: "ghost-btn", onClick: () => onCopy(), disabled: !output.trim() }, copied ? "Copied" : "Copy"),
+              h("button", { type: "button", className: "ghost-btn", onClick: onDownload, disabled: !output.trim() }, "Download"),
             ),
           ),
           h("textarea", {
             value: output,
-            onChange: (e) => {
-              setOutput(e.target.value);
-              setFreshOut(false);
-            },
+            onChange: (e) => { setOutput(e.target.value); setFreshOut(false); },
             placeholder: "Your rewrite appears here…",
             spellCheck: true,
           }),
         ),
       ),
       h("div", { className: "statusbar" },
-        h("div", { className: error ? "error" : loading ? "loading" : undefined },
-          error || meta || "Ready to rewrite",
-        ),
+        h("div", { className: error ? "error" : loading ? "loading" : undefined }, error || meta || "Ready to rewrite"),
         h("div", { className: "counts" },
-          h("span", null, `${inWords} words in`),
+          h("span", { className: overGuestCap ? "over-limit" : undefined },
+            `${inWords}${authEnabled ? ` / ${maxWords}` : ""} words in`),
           h("span", null, `${outWords} words out`),
-          account
-            ? h("span", null, `max ${account.plan.max_words_per_request.toLocaleString()} / rewrite`)
-            : null,
         ),
       ),
     ),
+    showUpgrade && authEnabled
+      ? h(UpgradeCard, {
+          account,
+          plans,
+          onSignUp: () => openAuth("signup", "Create free account"),
+          onSignIn: () => openAuth("signin", "Sign in"),
+        })
+      : null,
     h("p", { className: "hint" }, "Review the rewrite before you share or publish it."),
+    authEnabled
+      ? h(AuthModal, {
+          open: authOpen,
+          onClose: () => setAuthOpen(false),
+          initialMode: authMode,
+          title: authTitle,
+        })
+      : null,
   );
 }
 

frontend/src/App.tsx

@@ -4,10 +4,13 @@ import {
   STRENGTH_MAP,
   STRENGTHS,
   TONES,
+  type AccountInfo,
+  type ApiError,
   type StrengthLabel,
   type Tone,
 } from "./api";
 import { useAuth } from "./auth";
+import type { PlanCard } from "./supabase";
 
 const MAX_CHARS = 50000;
 
@@ -15,15 +18,35 @@ function wordCount(text: string): number {
   return text.trim() ? text.trim().split(/\s+/).length : 0;
 }
 
-function AuthScreen() {
+function AuthModal({
+  open,
+  onClose,
+  initialMode = "signup",
+  title,
+}: {
+  open: boolean;
+  onClose: () => void;
+  initialMode?: "signin" | "signup";
+  title?: string;
+}) {
   const { signInWithPassword, signUp, signInWithGoogle } = useAuth();
-  const [mode, setMode] = useState<"signin" | "signup">("signin");
+  const [mode, setMode] = useState<"signin" | "signup">(initialMode);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [busy, setBusy] = useState(false);
   const [message, setMessage] = useState("");
   const [error, setError] = useState("");
 
+  useEffect(() => {
+    if (open) {
+      setMode(initialMode);
+      setError("");
+      setMessage("");
+    }
+  }, [open, initialMode]);
+
+  if (!open) return null;
+
   async function onSubmit(e: FormEvent) {
     e.preventDefault();
     setBusy(true);
@@ -32,10 +55,13 @@ function AuthScreen() {
     try {
       if (mode === "signin") {
         await signInWithPassword(email.trim(), password);
+        onClose();
       } else {
         const result = await signUp(email.trim(), password);
         if (result === "check_email") {
           setMessage("Check your email to confirm your account, then sign in.");
+        } else {
+          onClose();
         }
       }
     } catch (err) {
@@ -46,11 +72,20 @@ function AuthScreen() {
   }
 
   return (
-    <div className="auth-shell">
-      <div className="auth-card">
-        <h1>PlainRewrite</h1>
+    <div className="modal-backdrop" role="presentation" onClick={onClose}>
+      <div
+        className="auth-card modal-card"
+        role="dialog"
+        aria-modal="true"
+        aria-label={title || "Sign in"}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button type="button" className="modal-close" onClick={onClose} aria-label="Close">
+          ×
+        </button>
+        <h2>{title || (mode === "signin" ? "Sign in" : "Create free account")}</h2>
         <p className="auth-lead">
-          From AI-generated to plagiarism-safe — rewrite in a voice that feels real.
+          Unlock longer rewrites and daily limits. Google or email — takes a minute.
         </p>
 
         <div className="segment auth-tabs" role="group" aria-label="Auth mode">
@@ -93,7 +128,7 @@ function AuthScreen() {
             />
           </label>
           <button type="submit" className="btn btn-primary auth-submit" disabled={busy}>
-            {busy ? "Please wait…" : mode === "signin" ? "Sign in" : "Create account"}
+            {busy ? "Please wait…" : mode === "signin" ? "Sign in" : "Create free account"}
           </button>
         </form>
 
@@ -115,8 +150,96 @@ function AuthScreen() {
   );
 }
 
+function UpgradeCard({
+  account,
+  plans,
+  onSignUp,
+  onSignIn,
+}: {
+  account: AccountInfo | null;
+  plans: PlanCard[];
+  onSignUp: () => void;
+  onSignIn: () => void;
+}) {
+  const planId = account?.plan.id ?? "guest";
+  if (planId === "pro" || planId === "plus") return null;
+
+  const free = plans.find((p) => p.id === "free");
+  const pro = plans.find((p) => p.id === "pro");
+  const isGuest = planId === "guest" || account?.role === "guest";
+
+  return (
+    <section className="upgrade-card" aria-label="Upgrade plans">
+      <div className="upgrade-copy">
+        <h3>
+          {isGuest
+            ? "Liked the rewrite? Unlock more with a free account"
+            : "Need longer drafts every day? Go Pro"}
+        </h3>
+        <p>
+          {isGuest
+            ? `Preview is capped at ${account?.plan.max_words_per_request ?? 100} words and ${account?.plan.daily_rewrites ?? 1} rewrite/day. Sign up free for higher limits — or Pro for serious daily use.`
+            : `You're on ${account?.plan.name ?? "Free"}. Pro gives up to ${pro?.max_words_per_request?.toLocaleString() ?? "2,000"} words per rewrite and ${pro?.daily_rewrites ?? 50} rewrites/day.`}
+        </p>
+      </div>
+      <div className="upgrade-plans">
+        {isGuest && free ? (
+          <div className="plan-pill">
+            <strong>Free</strong>
+            <span>
+              {free.daily_rewrites}/day · {free.max_words_per_request} words
+            </span>
+            <span className="plan-price">₹0</span>
+          </div>
+        ) : null}
+        {pro ? (
+          <div className="plan-pill plan-pill-pro">
+            <strong>Pro</strong>
+            <span>
+              {pro.daily_rewrites}/day · {pro.max_words_per_request.toLocaleString()} words
+            </span>
+            <span className="plan-price">₹{pro.price_inr_monthly}/mo</span>
+          </div>
+        ) : null}
+      </div>
+      <div className="upgrade-actions">
+        {isGuest ? (
+          <>
+            <button type="button" className="btn btn-primary" onClick={onSignUp}>
+              Sign up free
+            </button>
+            <button type="button" className="btn btn-quiet" onClick={onSignIn}>
+              Sign in
+            </button>
+          </>
+        ) : (
+          <button type="button" className="btn btn-primary" disabled title="Stripe/Razorpay next">
+            Pro ₹{pro?.price_inr_monthly ?? 199}/mo — payments soon
+          </button>
+        )}
+      </div>
+      {!isGuest ? (
+        <p className="upgrade-note">
+          Until checkout is live, an admin can set <code>plan_id = pro</code> on your profile in
+          Supabase.
+        </p>
+      ) : null}
+    </section>
+  );
+}
+
 export default function App() {
-  const { ready, authEnabled, session, account, setAccount, signOut } = useAuth();
+  const {
+    ready,
+    authEnabled,
+    session,
+    account,
+    setAccount,
+    signOut,
+    plans,
+    guestMaxWords,
+    refreshAccount,
+  } = useAuth();
   const [input, setInput] = useState("");
   const [output, setOutput] = useState("");
   const [tone, setTone] = useState<Tone>("Neutral");
@@ -127,6 +250,13 @@ export default function App() {
   const [meta, setMeta] = useState("");
   const [copied, setCopied] = useState(false);
   const [freshOut, setFreshOut] = useState(false);
+  const [showUpgrade, setShowUpgrade] = useState(false);
+  const [authOpen, setAuthOpen] = useState(false);
+  const [authMode, setAuthMode] = useState<"signin" | "signup">("signup");
+  const [authTitle, setAuthTitle] = useState<string | undefined>();
+
+  const isGuest = Boolean(authEnabled && !session);
+  const maxWords = account?.plan.max_words_per_request ?? (isGuest ? guestMaxWords : 50000);
 
   useEffect(() => {
     if (!copied) return;
@@ -134,6 +264,13 @@ export default function App() {
     return () => window.clearTimeout(t);
   }, [copied]);
 
+  useEffect(() => {
+    if (session) {
+      setAuthOpen(false);
+      void refreshAccount();
+    }
+  }, [session, refreshAccount]);
+
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
@@ -146,6 +283,12 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [input, tone, strength, preserveLength, loading, session]);
 
+  function openAuth(mode: "signin" | "signup", title?: string) {
+    setAuthMode(mode);
+    setAuthTitle(title);
+    setAuthOpen(true);
+  }
+
   async function onRewrite() {
     const text = input.trim();
     if (!text) {
@@ -156,6 +299,15 @@ export default function App() {
       setError(`Text is too long (${text.length.toLocaleString()} chars).`);
       return;
     }
+    const words = wordCount(text);
+    if (authEnabled && words > maxWords) {
+      setError(
+        `This text has ${words} words. ${isGuest ? "Preview" : account?.plan.name ?? "Your plan"} allows ${maxWords} words per rewrite.`,
+      );
+      setShowUpgrade(true);
+      if (isGuest) openAuth("signup", "Sign up to rewrite longer text");
+      return;
+    }
 
     setLoading(true);
     setError("");
@@ -174,16 +326,27 @@ export default function App() {
       setOutput(result.rewrite);
       setFreshOut(true);
       if (result.account) setAccount(result.account);
+      const left = result.account?.usage?.remaining_rewrites;
       const quota =
-        result.account?.usage != null
-          ? ` · ${result.account.usage.remaining_rewrites} rewrites left today`
-          : "";
+        left != null ? ` · ${left} rewrite${left === 1 ? "" : "s"} left today` : "";
       setMeta(
         `${result.meta.input_words.toLocaleString()} → ${result.meta.output_words.toLocaleString()} words · ${result.meta.seconds}s${quota}`,
       );
+      if (
+        authEnabled &&
+        result.account &&
+        (result.account.plan.id === "guest" || result.account.plan.id === "free")
+      ) {
+        setShowUpgrade(true);
+      }
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Rewrite failed.");
+      const apiErr = err as ApiError;
+      setError(apiErr.message || "Rewrite failed.");
       setMeta("");
+      if (apiErr.code === "limit") {
+        setShowUpgrade(true);
+        if (isGuest) openAuth("signup", "Free preview used — sign up for more");
+      }
     } finally {
       setLoading(false);
     }
@@ -212,6 +375,7 @@ export default function App() {
 
   const inWords = wordCount(input);
   const outWords = wordCount(output);
+  const overGuestCap = isGuest && inWords > maxWords;
 
   if (!ready) {
     return (
@@ -221,10 +385,6 @@ export default function App() {
     );
   }
 
-  if (authEnabled && !session) {
-    return <AuthScreen />;
-  }
-
   return (
     <div className="app shell">
       <div className="topbar">
@@ -233,7 +393,7 @@ export default function App() {
           <p>From AI-generated to plagiarism-safe — rewrite in a voice that feels real.</p>
         </header>
         <div className="top-meta">
-          {account ? (
+          {session && account ? (
             <div className="account-chip">
               <div className="account-plan">{account.plan.name}</div>
               <div>
@@ -244,6 +404,31 @@ export default function App() {
                 Sign out
               </button>
             </div>
+          ) : authEnabled ? (
+            <div className="account-chip">
+              <div className="account-plan">Preview</div>
+              <div>
+                {account
+                  ? `${account.usage.remaining_rewrites}/${account.plan.daily_rewrites} free rewrite today`
+                  : `Try ${guestMaxWords} words free`}
+              </div>
+              <div className="auth-inline">
+                <button
+                  type="button"
+                  className="ghost-btn"
+                  onClick={() => openAuth("signin", "Sign in")}
+                >
+                  Sign in
+                </button>
+                <button
+                  type="button"
+                  className="btn btn-primary btn-compact"
+                  onClick={() => openAuth("signup", "Create free account")}
+                >
+                  Sign up
+                </button>
+              </div>
+            </div>
           ) : (
             <>
               {tone} · {strength}
@@ -254,6 +439,13 @@ export default function App() {
         </div>
       </div>
 
+      {isGuest ? (
+        <p className="teaser-banner">
+          Try a short rewrite free — up to <strong>{maxWords} words</strong>,{" "}
+          {account?.plan.daily_rewrites ?? 1} per day. Sign up for more length and daily rewrites.
+        </p>
+      ) : null}
+
       <div className="stage">
         <div className="toolbar">
           <div className="tool-group">
@@ -331,7 +523,11 @@ export default function App() {
             <textarea
               value={input}
               onChange={(e) => setInput(e.target.value)}
-              placeholder="Paste your draft here…"
+              placeholder={
+                isGuest
+                  ? `Paste a short AI draft (up to ${maxWords} words)…`
+                  : "Paste your draft here…"
+              }
               spellCheck
             />
           </div>
@@ -375,18 +571,39 @@ export default function App() {
             {error || meta || "Ready to rewrite"}
           </div>
           <div className="counts">
-            <span>{inWords} words in</span>
+            <span className={overGuestCap ? "over-limit" : undefined}>
+              {inWords}
+              {authEnabled ? ` / ${maxWords}` : ""} words in
+            </span>
             <span>{outWords} words out</span>
-            {account ? (
-              <span>
-                max {account.plan.max_words_per_request.toLocaleString()} / rewrite
-              </span>
-            ) : null}
           </div>
         </div>
       </div>
 
+      {showUpgrade && authEnabled ? (
+        <UpgradeCard
+          account={account}
+          plans={plans}
+          onSignUp={() =>
+            openAuth(
+              session ? "signup" : "signup",
+              session ? "Upgrade to Pro" : "Create free account",
+            )
+          }
+          onSignIn={() => openAuth("signin", "Sign in")}
+        />
+      ) : null}
+
       <p className="hint">Review the rewrite before you share or publish it.</p>
+
+      {authEnabled ? (
+        <AuthModal
+          open={authOpen}
+          onClose={() => setAuthOpen(false)}
+          initialMode={authMode}
+          title={authTitle}
+        />
+      ) : null}
     </div>
   );
 }

frontend/src/api.ts

@@ -45,10 +45,14 @@ export type RewriteResponse = {
   account?: AccountInfo | null;
 };
 
+export type ApiError = Error & { status?: number; code?: string };
+
 function detailMessage(detail: unknown, fallback: string): string {
   if (typeof detail === "string") return detail;
   if (Array.isArray(detail)) {
-    return detail.map((d) => (typeof d === "object" && d && "msg" in d ? String(d.msg) : String(d))).join(" ");
+    return detail
+      .map((d) => (typeof d === "object" && d && "msg" in d ? String(d.msg) : String(d)))
+      .join(" ");
   }
   return fallback;
 }
@@ -78,18 +82,23 @@ export async function rewriteText(
     } catch {
       /* ignore */
     }
-    throw new Error(detailMessage(detail, "Rewrite failed."));
+    const err = new Error(detailMessage(detail, "Rewrite failed.")) as ApiError;
+    err.status = res.status;
+    if (res.status === 401 || res.status === 429 || res.status === 413) {
+      err.code = "limit";
+    }
+    throw err;
   }
   return res.json();
 }
 
-export async function fetchMe(accessToken: string): Promise<{
+export async function fetchMe(accessToken?: string | null): Promise<{
   auth_enabled: boolean;
   account: AccountInfo | null;
 }> {
-  const res = await fetch("/v1/me", {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
+  const headers: Record<string, string> = {};
+  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+  const res = await fetch("/v1/me", { headers });
   if (!res.ok) {
     throw new Error("Could not load account.");
   }

frontend/src/auth.tsx

@@ -9,7 +9,12 @@ import {
 } from "react";
 import type { Session, User } from "@supabase/supabase-js";
 import { fetchMe, type AccountInfo } from "./api";
-import { getSupabase, initSupabase } from "./supabase";
+import {
+  getCachedAuthConfig,
+  getSupabase,
+  initSupabase,
+  type PlanCard,
+} from "./supabase";
 
 type AuthContextValue = {
   ready: boolean;
@@ -17,6 +22,8 @@ type AuthContextValue = {
   session: Session | null;
   user: User | null;
   account: AccountInfo | null;
+  plans: PlanCard[];
+  guestMaxWords: number;
   refreshAccount: () => Promise<void>;
   setAccount: (account: AccountInfo | null) => void;
   signInWithPassword: (email: string, password: string) => Promise<void>;
@@ -32,14 +39,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [authEnabled, setAuthEnabled] = useState(false);
   const [session, setSession] = useState<Session | null>(null);
   const [account, setAccount] = useState<AccountInfo | null>(null);
+  const [plans, setPlans] = useState<PlanCard[]>([]);
+  const [guestMaxWords, setGuestMaxWords] = useState(100);
 
   const refreshAccount = useCallback(async () => {
-    if (!authEnabled || !session) {
+    if (!authEnabled) {
       setAccount(null);
       return;
     }
     try {
-      const me = await fetchMe(session.access_token);
+      const me = await fetchMe(session?.access_token);
       setAccount(me.account);
     } catch {
       setAccount(null);
@@ -51,6 +60,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     void (async () => {
       const config = await initSupabase();
       setAuthEnabled(config.enabled);
+      setPlans(config.plans ?? []);
+      setGuestMaxWords(config.guest?.max_words_per_request ?? 100);
       const sb = getSupabase();
       if (!config.enabled || !sb) {
         setReady(true);
@@ -78,6 +89,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       session,
       user: session?.user ?? null,
       account,
+      plans: plans.length ? plans : getCachedAuthConfig()?.plans ?? [],
+      guestMaxWords,
       refreshAccount,
       setAccount,
       async signInWithPassword(email, password) {
@@ -108,9 +121,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         if (!sb) return;
         await sb.auth.signOut();
         setAccount(null);
+        await refreshAccount();
       },
     }),
-    [ready, authEnabled, session, account, refreshAccount],
+    [ready, authEnabled, session, account, plans, guestMaxWords, refreshAccount],
   );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

frontend/src/index.css

@@ -526,6 +526,148 @@ textarea {
   font-size: 0.88rem;
 }
 
+.teaser-banner {
+  margin: -0.5rem 0 1.1rem;
+  padding: 0.75rem 1rem;
+  border-radius: 12px;
+  background: var(--accent-soft);
+  color: var(--ink-soft);
+  font-size: 0.92rem;
+  line-height: 1.4;
+}
+
+.teaser-banner strong {
+  color: var(--accent);
+}
+
+.auth-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.25rem;
+}
+
+.btn-compact {
+  padding: 0.4rem 0.75rem;
+  font-size: 0.8rem;
+}
+
+.counts .over-limit {
+  color: var(--warn);
+  font-weight: 600;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgba(18, 28, 26, 0.45);
+  backdrop-filter: blur(4px);
+  animation: enter 0.25s ease both;
+}
+
+.modal-card {
+  position: relative;
+  max-height: min(90vh, 640px);
+  overflow: auto;
+}
+
+.modal-card h2 {
+  margin: 0 1.5rem 0 0;
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  letter-spacing: -0.02em;
+}
+
+.modal-close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.85rem;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.upgrade-card {
+  margin-top: 1.25rem;
+  padding: 1.25rem 1.35rem;
+  border: 1px solid var(--panel-edge);
+  border-radius: 18px;
+  background: rgba(251, 252, 251, 0.85);
+  box-shadow: var(--shadow-soft);
+  animation: fade-up 0.45s ease both;
+}
+
+.upgrade-copy h3 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 1.35rem;
+  letter-spacing: -0.02em;
+}
+
+.upgrade-copy p {
+  margin: 0.45rem 0 0;
+  color: var(--ink-soft);
+  font-size: 0.95rem;
+  line-height: 1.45;
+  max-width: 40rem;
+}
+
+.upgrade-plans {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  margin-top: 1rem;
+}
+
+.plan-pill {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 9.5rem;
+  padding: 0.7rem 0.85rem;
+  border-radius: 12px;
+  border: 1px solid var(--panel-edge);
+  background: rgba(232, 239, 236, 0.55);
+  font-size: 0.82rem;
+  color: var(--ink-soft);
+}
+
+.plan-pill strong {
+  color: var(--ink);
+  font-size: 0.9rem;
+}
+
+.plan-pill-pro {
+  border-color: rgba(26, 92, 74, 0.35);
+  background: var(--accent-soft);
+}
+
+.plan-price {
+  font-weight: 700;
+  color: var(--accent);
+  margin-top: 0.15rem;
+}
+
+.upgrade-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.upgrade-note {
+  margin: 0.75rem 0 0;
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+
 @media (max-width: 920px) {
   .topbar {
     flex-direction: column;

frontend/src/supabase.ts

@@ -1,9 +1,25 @@
 import { createClient, type Session, type SupabaseClient } from "@supabase/supabase-js";
 
+export type PlanCard = {
+  id: string;
+  name: string;
+  daily_rewrites: number;
+  max_words_per_request: number;
+  daily_word_cap: number;
+  price_inr_monthly: number;
+  blurb?: string;
+};
+
 export type AuthConfig = {
   enabled: boolean;
   supabase_url: string;
   supabase_anon_key: string;
+  guest?: {
+    daily_rewrites: number;
+    max_words_per_request: number;
+    daily_word_cap: number;
+  };
+  plans?: PlanCard[];
 };
 
 let client: SupabaseClient | null = null;
@@ -20,6 +36,10 @@ export async function loadAuthConfig(): Promise<AuthConfig> {
   return cachedConfig;
 }
 
+export function getCachedAuthConfig(): AuthConfig | null {
+  return cachedConfig;
+}
+
 export function getSupabase(): SupabaseClient | null {
   return client;
 }