# Character or token count is shown when approaching input limits

- **Pattern:** `ab-000154` (`ai-chat-visibility.input-and-history.input-character-count`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000154
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000154)

## Why it matters

When the app enforces an input length limit via a `maxLength` attribute or server-side truncation, users have no way to see how close they are to the ceiling until their prompt is silently cut off or rejected. Long prompts — the exact high-intent content that benefits most from an AI — are the most likely to hit this limit, and silent truncation produces degraded or confusing responses that the user attributes to model quality rather than input handling. A visible counter at the threshold eliminates that failure mode entirely.

## Severity rationale

Low because the limit is usually large, but silent truncation of long prompts is especially damaging when it does occur.

## Remediation

In `src/components/chat/ChatInput.tsx`, render a character counter once the user crosses eighty percent of the configured `maxLength`, and swap it to a destructive color at ninety-five percent so the warning escalates as the limit approaches.

```tsx
{maxLength && input.length > maxLength * 0.8 && (
  <span className={cn("text-xs", input.length > maxLength * 0.95 ? "text-destructive" : "text-muted-foreground")}>
    {input.length} / {maxLength}
  </span>
)}
```

## Detection

- **ID:** `input-character-count`
- **Severity:** `low`
- **What to look for:** Check whether the message input shows a character count or token estimate as the user types, especially when approaching the maximum allowed input length. Count all input limit enforcement mechanisms: `maxLength` attribute on the textarea, server-side truncation, token counting logic. Look for character count displays near the input, color changes at threshold levels.
- **Pass criteria:** When the application has an input length limit, a counter appears near the input and changes visual state (color or warning text) as the user approaches the limit. The counter must appear at no later than 80% of the maximum length.
- **Fail criteria:** The application has an enforced input limit (server-side truncation or a maxLength attribute) but shows no counter. Users type long messages that are silently truncated or rejected.
- **Skip (N/A) when:** The application has no practical input length limit (the model context window is large enough that users are extremely unlikely to hit it, and no server-side truncation is applied). Signal: no `maxLength` on the input, no token counting logic, and no server-side truncation.
- **Detail on fail:** `"Input has maxLength or server-side truncation but no visible counter — users cannot see when approaching the limit"`
- **Remediation:** In `src/components/chat/ChatInput.tsx`, add a character counter:

  ```tsx
  {maxLength && input.length > maxLength * 0.8 && (
    <span className={cn("text-xs", input.length > maxLength * 0.95 ? "text-destructive" : "text-muted-foreground")}>
      {input.length} / {maxLength}
    </span>
  )}
  ```

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-000154