Skip to content

Show token cost estimate in chat input #5

Description

@cheapestinference

Description

Currently, users have no visibility into how many tokens a message might consume before sending it. The dashboard shows token usage after the fact (in the Account page), but there is no real-time estimate in the chat input area.

This issue is about adding a small, unobtrusive token/cost estimate indicator near the chat input textarea. It should show an approximate token count for the current input text and, if model pricing info is available, an estimated cost. This helps users be mindful of usage, especially with larger prompts.

Where to look

  • src/components/views/ChatView.tsx — The main chat interface. The input textarea and send button are near the bottom of this file (around the handleKeyDown / handleSend area, line ~1449+). The estimate indicator should be placed near the textarea, perhaps below it or next to the send button.
  • src/components/views/SessionDetailView.tsx — Contains model selection (the PRESET_MODELS array with basic/high/excellent tiers). Knowing which model is selected helps determine cost-per-token.
  • src/store/dashboard-store.ts — The store holds session and agent state. The selected model info may be available from selectedAgentConfig or session defaults.
  • src/lib/utils.ts — Contains formatNumber() and other utility functions. A token estimation helper could live here.

Acceptance criteria

  • A token count estimate is displayed near the chat input area, updating as the user types (debounced to avoid performance issues)
  • The estimate uses a simple heuristic (e.g., ~4 characters per token for English text, or a lightweight tokenizer library) — it does not need to be exact
  • The indicator is subtle and does not distract from the chat experience (e.g., small muted text like "~245 tokens" below the input)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions