Usage limits are communicated clearly before they are hit

Hitting a usage cap mid-prompt — after a user has typed four paragraphs and a code block — is the single most common complaint in consumer AI product reviews. It feels like being cut off mid-sentence by a bouncer, and it is entirely avoidable: the quota is known, the current usage is known, and the user wants to know when they are close. When the limit surfaces only as a 429 error at send time, the product signals that it does not value the user's time.

Expose {used, limit, period} from a /api/usage endpoint and render a persistent counter in the chat header (12 / 50 today). Trigger an amber warning banner at 80% and a blocking modal explaining upgrade options when the cap is reached. Never let the user compose a message they cannot send. Implement in src/components/chat/usage-indicator.tsx.

<span>{usage.used} / {usage.limit} messages today</span>

• ID: ai-ux-patterns.transparency.usage-limits-display

• Severity: critical

• What to look for: Count all usage-related UI elements: message counters, token displays, credit balance indicators, request quota bars. For each, enumerate whether it shows both current usage and the limit (e.g., "5 of 10 messages used"). Check for API calls to a usage endpoint (e.g., app/api/usage/route.ts, /api/subscription, or a Stripe portal link). Also check for pre-emptive warnings as limits approach (e.g., a banner at 80% usage). Extract and quote the exact UI text or component that displays limits.

• Pass criteria: The current usage and remaining limit are visible somewhere in the UI when a limit applies. The limit is communicated proactively, not only after it is exceeded. At least 1 usage indicator must show a numeric value. Report even on pass: "Found X usage display elements."

• Fail criteria: No usage display found. Users have no way to know they are approaching or at a limit until an error response occurs.

• Skip (N/A) when: The application has no usage limits — it is fully unlimited for all users (no free tier, no token cap, no rate limiting). Signal: no subscription, billing, or rate limit logic anywhere in the codebase and no limit-related environment variables.

• Detail on fail: "No usage counter, limit indicator, or quota display found in the UI. Billing/subscription logic present but no front-end display of remaining usage.".

• Remediation: Hitting a usage limit without warning is one of the most frustrating experiences in AI products. It interrupts work at the worst moment.

  // Example usage display component
  const { data: usage } = useSWR('/api/usage', fetcher)
  
  {usage && (
    <div className="flex items-center gap-2 text-sm text-muted-foreground">
      {usage.used >= usage.limit * 0.8 && (
        <AlertTriangleIcon className="w-4 h-4 text-amber-500" />
      )}
      <span>{usage.used} / {usage.limit} messages today</span>
    </div>
  )}
  

  Consider a progress bar for visual clarity:

  <Progress value={(usage.used / usage.limit) * 100} className="h-1 w-24" />