🤖 fix: match token count text size to surrounding elements (#737)

_Generated with `mux`_

Token count display used `text-xs` (12px) while neighboring controls use
`text-[11px]`. Updated both the loading fallback and display component
to match.

Author: ammar-agent

src/browser/App.stories.tsx

@@ -541,6 +541,18 @@ export const ActiveWorkspaceWithChat: Story = {
           projects,
           workspaces,
           apiOverrides: {
+            tokenizer: {
+              countTokens: () => Promise.resolve(42),
+              countTokensBatch: (_model, texts) => Promise.resolve(texts.map(() => 42)),
+              calculateStats: () =>
+                Promise.resolve({
+                  consumers: [],
+                  totalTokens: 0,
+                  model: "mock-model",
+                  tokenizerName: "mock-tokenizer",
+                  usageHistory: [],
+                }),
+            },
             providers: {
               setProviderConfig: () => Promise.resolve({ success: true, data: undefined }),
               list: () => Promise.resolve(["anthropic", "openai", "xai"]),
@@ -1246,6 +1258,13 @@ main
           })
         );
 
+        // Pre-fill input with text so token count is visible
+        localStorage.setItem(
+          `input:${workspaceId}`,
+          "Add OAuth2 support with Google and GitHub providers"
+        );
+        localStorage.setItem(`model:${workspaceId}`, "anthropic:claude-sonnet-4-5");
+
         initialized.current = true;
       }
 

src/browser/components/ChatInput/index.tsx

@@ -879,7 +879,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                   <Suspense
                     fallback={
                       <div
-                        className="text-muted flex items-center gap-1 text-xs"
+                        className="text-muted flex items-center gap-1 text-[11px]"
                         data-component="TokenEstimate"
                       >
                         <span>Calculating tokens…</span>
@@ -940,7 +940,7 @@ const TokenCountDisplay: React.FC<{ reader: TokenCountReader }> = ({ reader }) =
     return null;
   }
   return (
-    <div className="text-muted flex items-center gap-1 text-xs" data-component="TokenEstimate">
+    <div className="text-muted flex items-center gap-1 text-[11px]" data-component="TokenEstimate">
       <span>{tokens.toLocaleString()} tokens</span>
     </div>
   );