Update Agent Mode badge and positioning (#2223)

- Change badge from "Experimental" to "New" with blue styling - Move Agent Mode to first position in mode selector  --- > [!NOTE] > Highlights a UI tweak to the chat mode menu for Pro users. > > - Replaces `ExperimentalBadge` with `NewBadge` (blue "New") in `ChatModeSelector` > - Moves `local-agent` ("Agent v2") item to the top of the selector when Pro is enabled, ahead of `Build` > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit c95c5d4fd107bb99d86f5a7e626aa153fb5e61cc. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>   --- ## Summary by cubic Changed the Agent v2 badge from “Experimental” to a blue “New” badge and moved Agent Mode to the top of the mode selector to improve visibility and discovery. This makes the new Agent experience easier to find. <sup>Written for commit c95c5d4fd107bb99d86f5a7e626aa153fb5e61cc. Summary will update on new commits.</sup>  Co-authored-by: Claude <noreply@anthropic.com>

Update Agent Mode badge and positioning (#2223)
b7425105 · Will Chen · GitHub · 15a7c2a8 · b7425105
--- a/src/components/ChatModeSelector.tsx
+++ b/src/components/ChatModeSelector.tsx
@@ -21,10 +21,10 @@ import { LocalAgentNewChatToast } from "./LocalAgentNewChatToast";
 import { useAtomValue } from "jotai";
 import { chatMessagesByIdAtom } from "@/atoms/chatAtoms";
-function ExperimentalBadge() {
+function NewBadge() {
  return (
-    <span className="inline-flex items-center rounded-full px-2 text-[11px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-400 border border-amber-200 dark:border-amber-800">
+    <span className="inline-flex items-center rounded-full px-2 text-[11px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-400 border border-blue-200 dark:border-blue-800">
-      Experimental
+      New
    </span>
  );
 }
@@ -115,6 +115,19 @@ export function ChatModeSelector() {
        </TooltipContent>
      </Tooltip>
      <SelectContent align="start" onCloseAutoFocus={(e) => e.preventDefault()}>
+        {isProEnabled && (
+          <SelectItem value="local-agent">
+            <div className="flex flex-col items-start">
+              <div className="flex items-center gap-1.5">
+                <span className="font-medium">Agent v2</span>
+                <NewBadge />
+              </div>
+              <span className="text-xs text-muted-foreground">
+                Better at bigger tasks and debugging
+              </span>
+            </div>
+          </SelectItem>
+        )}
        <SelectItem value="build">
          <div className="flex flex-col items-start">
            <span className="font-medium">Build</span>
@@ -141,19 +154,6 @@ export function ChatModeSelector() {
            </span>
          </div>
        </SelectItem>
-        {isProEnabled && (
-          <SelectItem value="local-agent">
-            <div className="flex flex-col items-start">
-              <div className="flex items-center gap-1.5">
-                <span className="font-medium">Agent v2</span>
-                <ExperimentalBadge />
-              </div>
-              <span className="text-xs text-muted-foreground">
-                Better at bigger tasks and debugging
-              </span>
-            </div>
-          </SelectItem>
-        )}
      </SelectContent>
    </Select>
  );