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
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 thehandleKeyDown/handleSendarea, 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 (thePRESET_MODELSarray 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 fromselectedAgentConfigor session defaults.src/lib/utils.ts— ContainsformatNumber()and other utility functions. A token estimation helper could live here.Acceptance criteria