Protecting a Login-Free AI Chat from Bill Bankruptcy — Layered Edge Defense and Picking a Datastore by Consistency Model

npx @next/codemod@canary middleware-to-proxy .

// Refill 10 tokens every 60 seconds, bucket capacity 20
// -> averages 10/min, but allows 20 back-to-back after a pause
Ratelimit.tokenBucket(10, "60 s", 20)

// Long prompts and higher-tier models drain more tokens
await limiter.limit(identifier, { rate: estimateCost(input, model) });

// lib/env.ts
import "server-only";
import { z } from "zod";

/**
 * Server-only environment variables. Validated once at module load;
 * an invalid environment prevents the process from starting (fail fast).
 */
const serverEnvSchema = z.object({
  // Injected automatically by the Upstash integration from the Vercel Marketplace
  UPSTASH_REDIS_REST_URL: z.url(),
  UPSTASH_REDIS_REST_TOKEN: z.string().min(1),

  // Cloudflare Turnstile secret (must never reach the client)
  TURNSTILE_SECRET_KEY: z.string().min(1),

  // Signing key for anonymous session IDs. Use 32+ random bytes.
  SESSION_SECRET: z.string().min(32),

  // Inference provider. Via Vercel AI Gateway this is a "provider/model" string.
  CHAT_MODEL: z.string().min(1).default("anthropic/claude-sonnet-4.5"),

  // Environment identity (used as a field in structured logs)
  VERCEL_ENV: z.enum(["production", "preview", "development"]).default("development"),
});

const parsed = serverEnvSchema.safeParse(process.env);

if (!parsed.success) {
  // Never print the values themselves — report only the offending key names.
  const invalidKeys = [...new Set(parsed.error.issues.map((issue) => issue.path.join(".")))];
  throw new Error(`[env] Invalid server environment variables: ${invalidKeys.join(", ")}`);
}

export const serverEnv = parsed.data;

// lib/env.client.ts
import { z } from "zod";

/**
 * Public values only — safe to expose to the client.
 * NEXT_PUBLIC_* is statically replaced, so the property access must be written literally.
 */
const clientEnvSchema = z.object({
  NEXT_PUBLIC_TURNSTILE_SITE_KEY: z.string().min(1),
});

export const clientEnv = clientEnvSchema.parse({
  NEXT_PUBLIC_TURNSTILE_SITE_KEY: process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY,
});

// lib/observability.ts
type LogLevel = "info" | "warn" | "error";

/**
 * One structured log record. Values are limited to string, number, boolean, null.
 * Allowing objects invites the accident of dumping an entire request body.
 */
interface LogFields {
  readonly level: LogLevel;
  /** Dot-separated event name (e.g. "rate_limit.blocked"). This is the aggregation key. */
  readonly event: string;
  readonly [key: string]: string | number | boolean | null | undefined;
}

/**
 * Keeping PII and secrets out is the caller's responsibility.
 * This function carries only an identifier of what happened plus non-PII measurements.
 */
export function logEvent(fields: LogFields): void {
  const line = JSON.stringify({ ...fields, timestamp: new Date().toISOString() });

  // When Sentry arrives later, only this branch needs to change.
  if (fields.level === "error") {
    console.error(line);
    return;
  }
  if (fields.level === "warn") {
    console.warn(line);
    return;
  }
  console.info(line);
}

// lib/rate-limit.ts
import "server-only";
import { Ratelimit, type Duration } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
import { serverEnv } from "./env";
import { logEvent } from "./observability";

const redis = new Redis({
  url: serverEnv.UPSTASH_REDIS_REST_URL,
  token: serverEnv.UPSTASH_REDIS_REST_TOKEN,
});

/**
 * Remembers already-rejected identifiers inside a hot instance, saving a
 * Redis round trip.
 * Note: this is an optimization, not a correctness mechanism. Next.js Proxy
 * explicitly forbids relying on global state, and behavior is unchanged if
 * this disappears (it just asks Redis again). Treat it as a one-way optimization.
 */
const ephemeralCache = new Map<string, number>();

interface TokenBucketPolicy {
  /** Tokens refilled per interval (i.e. the long-run average rate) */
  readonly refillRate: number;
  /** The refill interval */
  readonly interval: Duration;
  /** Bucket capacity (i.e. the burst size you tolerate) */
  readonly maxTokens: number;
  /** Redis key namespace. Always distinct per layer. */
  readonly prefix: string;
}

/** Single source of truth for the limits. Tuning in production touches only this object. */
const POLICIES: Readonly<Record<"network" | "session", TokenBucketPolicy>> = {
  // Coarse net: per originating network. The backbone that survives cookie deletion.
  network: { refillRate: 60, interval: "60 s", maxTokens: 90, prefix: "rl:net" },
  // Fine net: per session. The fairness device protecting one user's experience.
  session: { refillRate: 10, interval: "60 s", maxTokens: 20, prefix: "rl:sess" },
};

function createLimiter(policy: TokenBucketPolicy): Ratelimit {
  return new Ratelimit({
    redis,
    limiter: Ratelimit.tokenBucket(policy.refillRate, policy.interval, policy.maxTokens),
    prefix: policy.prefix,
    ephemeralCache,
    // If Redis does not answer, requests past this deadline are allowed (fail open).
    // Availability > strictness: a rate limiting outage must not stop the service.
    timeout: 1_000,
    // Analytics only in production; it consumes extra Redis commands.
    analytics: serverEnv.VERCEL_ENV === "production",
  });
}

const limiters: Readonly<Record<keyof typeof POLICIES, Ratelimit>> = {
  network: createLimiter(POLICIES.network),
  session: createLimiter(POLICIES.session),
};

export interface RateLimitVerdict {
  readonly allowed: boolean;
  /** Which layer rejected it. Used for monitoring and response headers. */
  readonly limitedBy: keyof typeof POLICIES | null;
  /** Seconds until a retry may succeed (for Retry-After) */
  readonly retryAfterSeconds: number;
  /** Async work that must be allowed to finish (analytics writes, etc.) */
  readonly pending: readonly Promise<unknown>[];
}

const ALLOWED: RateLimitVerdict = {
  allowed: true,
  limitedBy: null,
  retryAfterSeconds: 0,
  pending: [],
};

export interface RateLimitInput {
  /** Coarse identifier (full IPv4 address, or the /64 prefix for IPv6) */
  readonly networkId: string;
  /** Fine identifier (session ID from the signed cookie) */
  readonly sessionId: string;
  /** Tokens consumed by this request; weighted by input length and model */
  readonly cost: number;
}

/**
 * Evaluates both limiters with AND semantics. The coarse net runs first so
 * attack traffic is rejected at the lowest possible cost (fail fast).
 */
export async function checkRateLimit(input: RateLimitInput): Promise<RateLimitVerdict> {
  const checks: readonly [keyof typeof POLICIES, string][] = [
    ["network", input.networkId],
    ["session", input.sessionId],
  ];

  const pending: Promise<unknown>[] = [];

  for (const [layer, identifier] of checks) {
    try {
      const result = await limiters[layer].limit(identifier, { rate: input.cost });
      pending.push(result.pending);

      if (!result.success) {
        return {
          allowed: false,
          limitedBy: layer,
          retryAfterSeconds: Math.max(1, Math.ceil((result.reset - Date.now()) / 1_000)),
          pending,
        };
      }
    } catch (error) {
      // Fail open: an outage in the rate limiting infrastructure must not become
      // an outage of the service. Never swallow it silently, though — record it
      // as an anomaly (the L4 provider cap is the last line of defense).
      logEvent({
        level: "error",
        event: "rate_limit.unavailable",
        layer,
        message: error instanceof Error ? error.message : "unknown error",
      });
      return ALLOWED;
    }
  }

  return { ...ALLOWED, pending };
}

// lib/session.ts
import "server-only";
import { serverEnv } from "./env";

const SESSION_COOKIE = "aichat_sid";
const SESSION_MAX_AGE_SECONDS = 60 * 60 * 24; // 24 hours

/** Web Crypto only, so the same code runs on both the Node.js and Edge runtimes. */
async function hmac(payload: string): Promise<string> {
  const key = await crypto.subtle.importKey(
    "raw",
    new TextEncoder().encode(serverEnv.SESSION_SECRET),
    { name: "HMAC", hash: "SHA-256" },
    false,
    ["sign"],
  );
  const signature = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode(payload));
  return Array.from(new Uint8Array(signature))
    .map((byte) => byte.toString(16).padStart(2, "0"))
    .join("");
}

/** Constant-time comparison to avoid timing attacks. */
function timingSafeEqual(a: string, b: string): boolean {
  if (a.length !== b.length) return false;
  let diff = 0;
  for (let i = 0; i < a.length; i += 1) {
    diff |= a.charCodeAt(i) ^ b.charCodeAt(i);
  }
  return diff === 0;
}

export async function issueSessionId(): Promise<string> {
  const id = crypto.randomUUID();
  return `${id}.${await hmac(id)}`;
}

/** Returns the ID only when the signature checks out; forged or missing yields null. */
export async function verifySessionId(value: string | undefined): Promise<string | null> {
  if (!value) return null;
  const separatorIndex = value.lastIndexOf(".");
  if (separatorIndex <= 0) return null;

  const id = value.slice(0, separatorIndex);
  const signature = value.slice(separatorIndex + 1);
  const expected = await hmac(id);

  return timingSafeEqual(signature, expected) ? id : null;
}

interface SessionCookieSpec {
  readonly name: string;
  readonly options: {
    readonly httpOnly: true;
    readonly secure: true;
    /** JS never reads the cookie (httpOnly). lax narrows the CSRF surface. */
    readonly sameSite: "lax";
    readonly path: "/";
    readonly maxAge: number;
  };
}

export const sessionCookie: SessionCookieSpec = {
  name: SESSION_COOKIE,
  options: {
    httpOnly: true,
    secure: true,
    sameSite: "lax",
    path: "/",
    maxAge: SESSION_MAX_AGE_SECONDS,
  },
};

// proxy.ts (Next.js 16; formerly middleware.ts — the function name changes too)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import { checkRateLimit } from "@/lib/rate-limit";
import { issueSessionId, sessionCookie, verifySessionId } from "@/lib/session";
import { clientIp, networkKey } from "@/lib/client-identifier";
import { logEvent } from "@/lib/observability";

/**
 * State the protected surface explicitly. The wider the matcher, the more
 * billed executions land on static assets. Here: the inference endpoint and
 * the chat page only.
 */
export const config = {
  matcher: ["/api/chat", "/chat"],
};

/** Baseline cost of one request; the real weighting is re-evaluated in the Route Handler. */
const BASE_COST = 1;

export async function proxy(request: NextRequest): Promise<NextResponse> {
  const networkId = networkKey(clientIp(request.headers));

  // A cookie that fails signature verification is treated as absent, and reissued.
  const existingSessionId = await verifySessionId(
    request.cookies.get(sessionCookie.name)?.value,
  );
  const sessionId = existingSessionId ?? (await issueSessionId());

  // A freshly issued session has by definition drained no bucket, so the session
  // layer always passes. Catching an attacker who keeps discarding cookies is
  // always the network layer's job — which is why the two are independent.
  const verdict = await checkRateLimit({
    networkId,
    // Key on the raw ID, not the signed string
    sessionId: existingSessionId ?? sessionId.split(".")[0],
    cost: BASE_COST,
  });

  if (!verdict.allowed) {
    logEvent({
      level: "warn",
      event: "rate_limit.blocked",
      layer: verdict.limitedBy,
      path: request.nextUrl.pathname,
    });

    return NextResponse.json(
      {
        error: "rate_limited",
        message: "Too many requests. Please wait a moment and try again.",
        retryAfterSeconds: verdict.retryAfterSeconds,
      },
      {
        status: 429,
        headers: { "Retry-After": String(verdict.retryAfterSeconds) },
      },
    );
  }

  const response = NextResponse.next();

  if (!existingSessionId) {
    response.cookies.set({
      name: sessionCookie.name,
      value: sessionId,
      ...sessionCookie.options,
    });
  }

  return response;
}

// lib/client-identifier.ts
const IPV6_PREFIX_SEGMENTS = 4; // /64 = 16 bits x 4

/**
 * The client's real IP. Vercel overwrites x-forwarded-for and does not forward
 * externally supplied values, so this header can be treated as platform-guaranteed.
 * If you run your own proxy in front of Vercel, prefer x-vercel-forwarded-for.
 *
 * Returns an address safe to pass to an external API, or null if unavailable.
 */
export function clientIp(headers: Headers): string | null {
  const raw =
    headers.get("x-vercel-forwarded-for") ??
    headers.get("x-forwarded-for") ??
    headers.get("x-real-ip");

  if (!raw) return null;

  const address = raw.split(",")[0].trim();
  return address.length > 0 ? address : null;
}

/**
 * Rounds an IP down for use as a rate limit key. Kept separate from the real IP
 * because the rounded value is an incomplete address and must never be sent to
 * an external API.
 *
 * IPv6 is rounded to /64: keyed on the full address, even an end user holds
 * 2^64 addresses and can evade the limit indefinitely.
 */
export function networkKey(ip: string | null): string {
  if (!ip) return "unknown";
  if (!ip.includes(":")) return ip;
  return ip.split(":").slice(0, IPV6_PREFIX_SEGMENTS).join(":");
}

// lib/turnstile.ts
import "server-only";
import { z } from "zod";
import { serverEnv } from "./env";
import { logEvent } from "./observability";

const SITEVERIFY_ENDPOINT = "https://challenges.cloudflare.com/turnstile/v0/siteverify";
const VERIFY_TIMEOUT_MS = 3_000;

/** The documented siteverify response shape. Unknown keys are ignored. */
const siteverifyResponseSchema = z.object({
  success: z.boolean(),
  "error-codes": z.array(z.string()).default([]),
  challenge_ts: z.string().optional(),
  hostname: z.string().optional(),
  action: z.string().optional(),
  cdata: z.string().optional(),
});

export type TurnstileFailureReason =
  | "missing-token"
  | "invalid-token"
  | "expired-or-duplicate"
  | "action-mismatch"
  | "verification-unavailable";

export type TurnstileResult =
  | { readonly ok: true }
  | { readonly ok: false; readonly reason: TurnstileFailureReason };

interface VerifyParams {
  readonly token: string | undefined;
  /** The client's real IP — pass the full address, not the rounded key */
  readonly remoteIp: string | null;
  /** The action set on the widget; always confirm it matches */
  readonly expectedAction: string;
  /** Your own hostname, to block tokens harvested elsewhere */
  readonly expectedHostname: string;
  /** Idempotency key so a retry does not count as double consumption */
  readonly idempotencyKey: string;
}

export async function verifyTurnstile(params: VerifyParams): Promise<TurnstileResult> {
  if (!params.token) return { ok: false, reason: "missing-token" };

  const body = new FormData();
  body.append("secret", serverEnv.TURNSTILE_SECRET_KEY);
  body.append("response", params.token);
  body.append("idempotency_key", params.idempotencyKey);
  // remoteip is optional. An invalid value is rejected as bad-request, so send
  // it only when a real address was available.
  if (params.remoteIp !== null) {
    body.append("remoteip", params.remoteIp);
  }

  let payload: unknown;
  try {
    const response = await fetch(SITEVERIFY_ENDPOINT, {
      method: "POST",
      body,
      signal: AbortSignal.timeout(VERIFY_TIMEOUT_MS),
    });
    payload = await response.json();
  } catch (error) {
    // Cloudflare outage or timeout. Bot verification fails to the safe side: reject.
    // Note this is the opposite call from rate limiting, which favors availability.
    logEvent({
      level: "error",
      event: "turnstile.unavailable",
      message: error instanceof Error ? error.message : "unknown error",
    });
    return { ok: false, reason: "verification-unavailable" };
  }

  const parsed = siteverifyResponseSchema.safeParse(payload);
  if (!parsed.success) {
    logEvent({ level: "error", event: "turnstile.malformed_response" });
    return { ok: false, reason: "verification-unavailable" };
  }

  const result = parsed.data;

  if (!result.success) {
    // timeout-or-duplicate means either "older than 300 seconds" or "token reused".
    // Prompt the user to retry; do not treat it as an attack.
    const isReuse = result["error-codes"].includes("timeout-or-duplicate");
    logEvent({
      level: "warn",
      event: "turnstile.rejected",
      codes: result["error-codes"].join(","),
    });
    return { ok: false, reason: isReuse ? "expired-or-duplicate" : "invalid-token" };
  }

  // success: true is not enough. The token only means something once you confirm
  // which widget issued it and on which domain.
  if (result.action !== params.expectedAction || result.hostname !== params.expectedHostname) {
    logEvent({
      level: "warn",
      event: "turnstile.context_mismatch",
      action: result.action ?? "none",
      hostname: result.hostname ?? "none",
    });
    return { ok: false, reason: "action-mismatch" };
  }

  return { ok: true };
}

// app/api/chat/route.ts
import { convertToModelMessages, createUIMessageStreamResponse, streamText, toUIMessageStream } from "ai";
import { z } from "zod";
import { after } from "next/server";
import { serverEnv } from "@/lib/env";
import { verifyTurnstile } from "@/lib/turnstile";
import { checkRateLimit } from "@/lib/rate-limit";
import { verifySessionId, sessionCookie } from "@/lib/session";
import { clientIp, networkKey } from "@/lib/client-identifier";
import { logEvent } from "@/lib/observability";

export const maxDuration = 30;

const TURNSTILE_ACTION = "chat-message";
const MAX_BODY_BYTES = 16 * 1024;
const MAX_MESSAGES = 40;

/** The accepted body shape: only the minimum of a UI message is permitted. */
const requestSchema = z.object({
  turnstileToken: z.string().min(1).max(2048),
  messages: z
    .array(
      z.object({
        id: z.string().min(1).max(128),
        role: z.enum(["user", "assistant", "system"]),
        parts: z
          .array(z.object({ type: z.literal("text"), text: z.string().min(1).max(4_000) }))
          .min(1)
          .max(8),
      }),
    )
    .min(1)
    .max(MAX_MESSAGES),
});

/** Estimate bucket consumption from total input length (weighted charging). */
function estimateCost(text: string): number {
  return Math.max(1, Math.ceil(text.length / 500));
}

function errorResponse(status: number, code: string, message: string, retryAfter?: number): Response {
  return Response.json(
    { error: code, message },
    {
      status,
      headers: retryAfter === undefined ? undefined : { "Retry-After": String(retryAfter) },
    },
  );
}

export async function POST(request: Request): Promise<Response> {
  // --- Check 1: body size (cheapest check first) ---
  // This is only an early rejection for well-behaved clients (headers can be forged).
  // The effective limit is enforced by the schema below (length and array caps).
  const contentLength = Number(request.headers.get("content-length") ?? "0");
  if (contentLength > MAX_BODY_BYTES) {
    return errorResponse(413, "payload_too_large", "That message is too long.");
  }

  // --- Check 2: schema (fix the structure before calling inference) ---
  const parsed = requestSchema.safeParse(await request.json().catch(() => null));
  if (!parsed.success) {
    return errorResponse(400, "invalid_request", "The request format is invalid.");
  }
  const { turnstileToken, messages } = parsed.data;

  // --- Check 3: session authenticity (forged cookies die here) ---
  const cookieHeader = request.headers.get("cookie") ?? "";
  const rawSession = cookieHeader
    .split(";")
    .map((part) => part.trim())
    .find((part) => part.startsWith(`${sessionCookie.name}=`))
    ?.slice(sessionCookie.name.length + 1);

  const sessionId = await verifySessionId(rawSession);
  if (!sessionId) {
    return errorResponse(401, "invalid_session", "Your session is invalid. Please reload the page.");
  }

  const ip = clientIp(request.headers);
  const networkId = networkKey(ip);

  // --- Check 4: Turnstile (one external round trip; everything above was local) ---
  const turnstile = await verifyTurnstile({
    token: turnstileToken,
    remoteIp: ip,
    expectedAction: TURNSTILE_ACTION,
    expectedHostname: new URL(request.url).hostname,
    idempotencyKey: `${sessionId}:${messages[messages.length - 1].id}`,
  });

  if (!turnstile.ok) {
    const status = turnstile.reason === "verification-unavailable" ? 503 : 403;
    return errorResponse(status, turnstile.reason, "Verification failed. Please try again.");
  }

  // --- Check 5: weighted rate limit (the last gate before inference) ---
  const inputText = messages
    .flatMap((message) => message.parts.map((part) => part.text))
    .join("");
  const cost = estimateCost(inputText);

  const verdict = await checkRateLimit({ networkId, sessionId, cost });

  if (!verdict.allowed) {
    return errorResponse(
      429,
      "rate_limited",
      "We're seeing heavy usage right now. Please wait a moment and try again.",
      verdict.retryAfterSeconds,
    );
  }

  // Let post-processing (analytics) finish without holding up the response
  after(() => Promise.allSettled(verdict.pending));

  // --- Only now do we call the operation that costs money ---
  logEvent({ level: "info", event: "chat.accepted", cost });

  const result = streamText({
    model: serverEnv.CHAT_MODEL,
    messages: await convertToModelMessages(messages),
    onError: ({ error }) => {
      logEvent({
        level: "error",
        event: "chat.inference_failed",
        message: error instanceof Error ? error.message : "unknown error",
      });
    },
  });

  return createUIMessageStreamResponse({
    stream: toUIMessageStream({ stream: result.stream }),
  });
}

// components/chat-input.tsx
"use client";

import { useCallback, useEffect, useId, useRef, useState } from "react";
import Script from "next/script";
import { clientEnv } from "@/lib/env.client";

const TURNSTILE_SCRIPT = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
const TURNSTILE_ACTION = "chat-message";

/** Minimal types for explicit rendering, declared here to avoid `any`. */
interface TurnstileRenderOptions {
  sitekey: string;
  action: string;
  appearance: "always" | "execute" | "interaction-only";
  callback: (token: string) => void;
  "error-callback": () => void;
  "expired-callback": () => void;
}

interface TurnstileApi {
  render: (container: HTMLElement, options: TurnstileRenderOptions) => string;
  reset: (widgetId: string) => void;
  remove: (widgetId: string) => void;
}

declare global {
  interface Window {
    turnstile?: TurnstileApi;
  }
}

type Status = "loading-challenge" | "ready" | "sending" | "error";

interface ChatInputProps {
  readonly onSend: (input: { text: string; turnstileToken: string }) => Promise<void>;
  readonly disabled?: boolean;
}

export function ChatInput({ onSend, disabled = false }: ChatInputProps) {
  const [status, setStatus] = useState<Status>("loading-challenge");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [value, setValue] = useState("");

  const tokenRef = useRef<string | null>(null);
  const widgetIdRef = useRef<string | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);

  const inputId = useId();
  const errorId = useId();

  const renderWidget = useCallback(() => {
    const container = containerRef.current;
    const turnstile = window.turnstile;
    if (!container || !turnstile || widgetIdRef.current !== null) return;

    widgetIdRef.current = turnstile.render(container, {
      sitekey: clientEnv.NEXT_PUBLIC_TURNSTILE_SITE_KEY,
      action: TURNSTILE_ACTION,
      // Show the widget only when interaction is required (invisible otherwise)
      appearance: "interaction-only",
      callback: (token) => {
        tokenRef.current = token;
        setStatus("ready");
        setErrorMessage(null);
      },
      "error-callback": () => {
        tokenRef.current = null;
        setStatus("error");
        setErrorMessage("Security check failed. Please reload the page.");
      },
      // Tokens expire after 300 seconds. Always re-issue so nothing breaks silently.
      "expired-callback": () => {
        tokenRef.current = null;
        setStatus("loading-challenge");
        if (widgetIdRef.current !== null) window.turnstile?.reset(widgetIdRef.current);
      },
    });
  }, []);

  useEffect(() => {
    return () => {
      const widgetId = widgetIdRef.current;
      if (widgetId !== null) window.turnstile?.remove(widgetId);
    };
  }, []);

  const isBusy = status === "sending" || status === "loading-challenge";
  const canSubmit = status === "ready" && value.trim().length > 0 && !disabled;

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const token = tokenRef.current;
    if (!canSubmit || !token) return;

    setStatus("sending");
    setErrorMessage(null);

    try {
      await onSend({ text: value.trim(), turnstileToken: token });
      setValue("");
    } catch (error) {
      setStatus("error");
      setErrorMessage(
        error instanceof Error ? error.message : "Sending failed. Please try again shortly.",
      );
    } finally {
      // Tokens are single-use. Re-issue on success and failure alike.
      tokenRef.current = null;
      if (widgetIdRef.current !== null) {
        window.turnstile?.reset(widgetIdRef.current);
        setStatus("loading-challenge");
      }
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-2">
      <Script src={TURNSTILE_SCRIPT} strategy="afterInteractive" onReady={renderWidget} />

      <label htmlFor={inputId} className="text-sm font-medium">
        Message
      </label>

      <textarea
        id={inputId}
        value={value}
        onChange={(event) => setValue(event.target.value)}
        onKeyDown={(event) => {
          // Enter submits, Shift+Enter inserts a newline; never submit mid-IME-composition
          if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
            event.preventDefault();
            event.currentTarget.form?.requestSubmit();
          }
        }}
        rows={3}
        maxLength={4000}
        disabled={disabled || status === "sending"}
        aria-describedby={errorMessage ? errorId : undefined}
        aria-invalid={status === "error"}
        className="w-full resize-none rounded-md border border-neutral-300 p-3 disabled:opacity-60"
        placeholder="Ask a question"
      />

      {/* Mount point for the invisible challenge; renders only when interaction is needed */}
      <div ref={containerRef} />

      {/* Surface errors to assistive technology immediately */}
      <p id={errorId} role="alert" aria-live="assertive" className="min-h-5 text-sm text-red-600">
        {errorMessage}
      </p>

      <button
        type="submit"
        disabled={!canSubmit}
        aria-busy={isBusy}
        className="self-end rounded-md bg-neutral-900 px-4 py-2 text-white disabled:opacity-50"
      >
        {status === "sending" ? "Sending..." : status === "loading-challenge" ? "Checking..." : "Send"}
      </button>
    </form>
  );
}