Add a live token estimate to the composer

Token usage was only ever shown after a response finished (per-message and
per-session cost). Now the composer shows a running estimate — draft tokens
recomputed on every keystroke (cheap, just the current text), context
tokens (system prompt + conversation so far) memoized separately so it only
recalculates when the conversation itself changes, not on every keystroke
in a long chat. Reuses the existing estimateTokens/estimateMessagesTokens
heuristic already powering context compaction, so the number is consistent
with when the app decides to fold older messages away.

Author: voidstackloop

frontend/src/lib/translations.ts

@@ -10,6 +10,7 @@ export interface Dictionary {
     noMatchingChats: string;
     model: string;
     sendMessage: string;
+    contextTokensEstimate: (draftTokens: number, contextTokens: number) => string;
     startConversationWith: (model: string) => string;
     showEarlierMessages: (count: number) => string;
     attach: string;
@@ -368,6 +369,10 @@ export const en: Dictionary = {
     noMatchingChats: "No matching chats.",
     model: "Model",
     sendMessage: "Send a message...",
+    contextTokensEstimate: (draftTokens, contextTokens) =>
+        draftTokens > 0
+            ? `~${draftTokens.toLocaleString()} tokens in draft · ~${contextTokens.toLocaleString()} in context`
+            : `~${contextTokens.toLocaleString()} tokens in context`,
     startConversationWith: (model) => `Start a conversation with ${model}.`,
     showEarlierMessages: (count) => `Show ${count} earlier message${count === 1 ? "" : "s"}`,
     attach: "Attach",
@@ -736,6 +741,10 @@ export const tr: Dictionary = {
     noMatchingChats: "Eşleşen sohbet yok.",
     model: "Model",
     sendMessage: "Bir mesaj gönderin...",
+    contextTokensEstimate: (draftTokens, contextTokens) =>
+        draftTokens > 0
+            ? `Taslakta ~${draftTokens.toLocaleString()} token · bağlamda ~${contextTokens.toLocaleString()}`
+            : `Bağlamda ~${contextTokens.toLocaleString()} token`,
     startConversationWith: (model) => `${model} ile sohbete başlayın.`,
     showEarlierMessages: (count) => `${count} önceki mesajı göster`,
     attach: "Ekle",

frontend/src/pages/Chat.tsx

@@ -74,6 +74,8 @@ import {
     COMPACTION_BUDGET_TOKENS,
     COMPACTION_KEEP_RECENT,
     buildSummarizationPrompt,
+    estimateMessagesTokens,
+    estimateTokens,
     planCompaction,
     shouldCompact,
 } from "@/lib/context-compaction";
@@ -1407,6 +1409,14 @@ export default function Chat() {
                 : 0,
         [messages, parsedModel]
     );
+    // Recomputed only when the conversation itself changes, not on every
+    // keystroke — draftTokens below covers the composer text separately so
+    // typing stays cheap even in a very long chat.
+    const contextTokens = useMemo(
+        () => estimateTokens(sessionSystemPrompt ?? "") + estimateMessagesTokens(messages) + (contextSummary ? estimateTokens(contextSummary) : 0),
+        [messages, sessionSystemPrompt, contextSummary]
+    );
+    const draftTokens = useMemo(() => estimateTokens(input), [input]);
 
     if (!hasApi) {
         return (
@@ -2379,6 +2389,11 @@ export default function Chat() {
                             </Button>
                         )}
                     </div>
+                    {(draftTokens > 0 || contextTokens > 0) && (
+                        <p className="mt-1 px-1 text-right text-[10px] text-muted-foreground/70">
+                            {t.contextTokensEstimate(draftTokens, contextTokens)}
+                        </p>
+                    )}
                 </div>
             </div>
             <PromptVariableDialog