refactor(TokenBar): improve token display formatting (#2783)

e2e-tests/snapshots/supabase_branch.spec.ts_supabase-branch-selection-works-1.aria.yml

-- text: "/Tokens: \\d+,\\d+ \\d+% of [\\d,.]+[bkmBKM]+ Optimize your tokens with Dyad Pro's Smart Context/"
+- text: "/Tokens: [\\d,]+ \\d+% Context window: \\d+K Optimize your tokens with Dyad Pro's Smart Context/"
\ No newline at end of file

e2e-tests/supabase_branch.spec.ts

@@ -12,7 +12,12 @@ testSkipIfWindows("supabase branch selection works", async ({ po }) => {
   await po.navigation.clickBackButton();
   await po.toggleTokenBar();
   // The default branch has a small context.
-  await expect(po.page.getByTestId("token-bar")).toContainText("6% of 128K");
+  await expect(po.page.getByTestId("token-bar")).toContainText("6%");
+  await expect(po.page.getByTestId("token-bar")).toContainText(
+    "Context window: 128K",
+  );
+  // Move mouse away from the token bar to dismiss tooltip before toggling.
+  await po.page.mouse.move(0, 0);
   // We hide the token bar so we re-open it later to refresh the token count.
   await po.toggleTokenBar();
 
@@ -24,5 +29,8 @@ testSkipIfWindows("supabase branch selection works", async ({ po }) => {
   // The test branch has a large context (200k tokens) so it'll hit the 100% limit.
   // This is to make sure we're connecting to the right supabase project for the branch.
   await po.toggleTokenBar();
-  await expect(po.page.getByTestId("token-bar")).toContainText("100% of 128K");
+  await expect(po.page.getByTestId("token-bar")).toContainText("100%");
+  await expect(po.page.getByTestId("token-bar")).toContainText(
+    "Context window: 128K",
+  );
 });

src/components/chat/TokenBar.tsx

@@ -54,13 +54,13 @@ export function TokenBar({ chatId }: TokenBarProps) {
     <div className="px-4 pb-2 text-xs" data-testid="token-bar">
       <TooltipProvider>
         <Tooltip>
-          <TooltipTrigger>
+          <TooltipTrigger className="w-full">
             <div className="w-full">
-              <div className="flex justify-between mb-1 text-xs text-muted-foreground">
+              <div className="flex gap-3 mb-1 text-xs text-muted-foreground">
                 <span>Tokens: {totalTokens.toLocaleString()}</span>
+                <span>{Math.round(percentUsed)}%</span>
                 <span>
-                  {Math.round(percentUsed)}% of{" "}
-                  {(contextWindow / 1000).toFixed(0)}K
+                  Context window: {(contextWindow / 1000).toFixed(0)}K
                 </span>
               </div>
               <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden flex">