Character or token count is shown when approaching input limits

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.

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.

{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>
)}

• ID: ai-chat-visibility.input-and-history.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:

  {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>
  )}