Experimental badge (#2155)

 > [!NOTE] > Introduces a reusable `ExperimentalBadge` and refines chat mode labels in `ChatModeSelector`. > > - Adds `ExperimentalBadge` and displays it next to `Agent v2` > - Removes "(experimental)" suffix from MCP mode title and tweaks layout (flex with gap) for mode headers > - Updates `Agent v2` description to "Better at bigger tasks and debugging" > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit f513f856f7a223fddfadbb4b0762bf9998295414. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>   ## Summary by cubic Added an Experimental badge component and applied it to Agent v2 in ChatModeSelector. Removed "(experimental)" from labels and updated Agent v2 description to "Better at bigger tasks and debugging" for clearer guidance. <sup>Written for commit f513f856f7a223fddfadbb4b0762bf9998295414. Summary will update on new commits.</sup>

Experimental badge (#2155)
32b3d01f · Will Chen · GitHub · 9d6f9dc9 · 32b3d01f
--- a/src/components/ChatModeSelector.tsx
+++ b/src/components/ChatModeSelector.tsx
@@ -16,6 +16,14 @@ import { isDyadProEnabled } from "@/lib/schemas";
 import { cn } from "@/lib/utils";
 import { detectIsMac } from "@/hooks/useChatModeToggle";

+function ExperimentalBadge() {
+  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">
+      Experimental
+    </span>
+  );
+}
+
 export function ChatModeSelector() {
  const { settings, updateSettings } = useSettings();

@@ -87,7 +95,9 @@ export function ChatModeSelector() {
        </SelectItem>
        <SelectItem value="agent">
          <div className="flex flex-col items-start">
-            <span className="font-medium">Build with MCP (experimental)</span>
+            <div className="flex items-center gap-1.5">
+              <span className="font-medium">Build with MCP</span>
+            </div>
            <span className="text-xs text-muted-foreground">
              Like Build, but can use tools (MCP) to generate code
            </span>
@@ -96,9 +106,12 @@ export function ChatModeSelector() {
        {isProEnabled && settings?.experiments?.enableLocalAgent && (
          <SelectItem value="local-agent">
            <div className="flex flex-col items-start">
-              <span className="font-medium">Agent v2 (experimental)</span>
+              <div className="flex items-center gap-1.5">
+                <span className="font-medium">Agent v2</span>
+                <ExperimentalBadge />
+              </div>
              <span className="text-xs text-muted-foreground">
-                More autonomous (note: may have bugs)
+                Better at bigger tasks and debugging
              </span>
            </div>
          </SelectItem>