Remove deprecated agent mode and consolidate with build mode (#2435)

e2e-tests/mcp.spec.ts

@@ -30,7 +30,7 @@ testSkipIfWindows("mcp - call calculator", async ({ po }) => {
   await po.page.getByRole("textbox", { name: "Value" }).fill("testValue1");
   await po.page.getByRole("button", { name: "Save" }).click();
   await po.navigation.goToAppsTab();
-  await po.chatActions.selectChatMode("agent");
+  await po.chatActions.selectChatMode("build");
   await po.sendPrompt("[call_tool=calculator_add]", {
     skipWaitForCompletion: true,
   });
@@ -115,7 +115,7 @@ testSkipIfWindows("mcp - call calculator via http", async ({ po }) => {
     await po.navigation.goToSettingsTab();
     await po.page.getByRole("button", { name: "Tools (MCP)" }).click();
     await po.navigation.goToAppsTab();
-    await po.chatActions.selectChatMode("agent");
+    await po.chatActions.selectChatMode("build");
     await po.sendPrompt("[call_tool=calculator_add]", {
       skipWaitForCompletion: true,
     });

src/components/ChatInputControls.tsx

@@ -4,6 +4,7 @@ import { ProModeSelector } from "./ProModeSelector";
 import { ChatModeSelector } from "./ChatModeSelector";
 import { McpToolsPicker } from "@/components/McpToolsPicker";
 import { useSettings } from "@/hooks/useSettings";
+import { useMcp } from "@/hooks/useMcp";
 
 export function ChatInputControls({
   showContextFilesPicker = false,
@@ -11,11 +12,20 @@ export function ChatInputControls({
   showContextFilesPicker?: boolean;
 }) {
   const { settings } = useSettings();
+  const { servers } = useMcp();
+  const enabledMcpServersCount = servers.filter((s) => s.enabled).length;
+
+  // Show MCP tools picker when:
+  // 1. Mode is "agent" (backwards compatibility) OR
+  // 2. Mode is "build" AND there are enabled MCP servers
+  const showMcpToolsPicker =
+    settings?.selectedChatMode === "agent" ||
+    (settings?.selectedChatMode === "build" && enabledMcpServersCount > 0);
 
   return (
     <div className="flex">
       <ChatModeSelector />
-      {settings?.selectedChatMode === "agent" && (
+      {showMcpToolsPicker && (
         <>
           <div className="w-1.5"></div>
           <McpToolsPicker />

src/components/ChatModeSelector.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/tooltip";
 import { useSettings } from "@/hooks/useSettings";
 import { useFreeAgentQuota } from "@/hooks/useFreeAgentQuota";
+import { useMcp } from "@/hooks/useMcp";
 import type { ChatMode } from "@/lib/schemas";
 import { isDyadProEnabled } from "@/lib/schemas";
 import { cn } from "@/lib/utils";
@@ -38,9 +39,13 @@ export function ChatModeSelector() {
   const chatId = routerState.location.search.id as number | undefined;
   const currentChatMessages = chatId ? (messagesById.get(chatId) ?? []) : [];
 
-  const selectedMode = settings?.selectedChatMode || "build";
+  // Treat "agent" mode as "build" for UI purposes (backwards compatibility)
+  const rawSelectedMode = settings?.selectedChatMode || "build";
+  const selectedMode = rawSelectedMode === "agent" ? "build" : rawSelectedMode;
   const isProEnabled = settings ? isDyadProEnabled(settings) : false;
   const { messagesRemaining, isQuotaExceeded } = useFreeAgentQuota();
+  const { servers } = useMcp();
+  const enabledMcpServersCount = servers.filter((s) => s.enabled).length;
 
   const handleModeChange = (value: string) => {
     const newMode = value as ChatMode;
@@ -77,11 +82,10 @@ export function ChatModeSelector() {
   const getModeDisplayName = (mode: ChatMode) => {
     switch (mode) {
       case "build":
+      case "agent": // backwards compatibility - treat as build
         return "Build";
       case "ask":
         return "Ask";
-      case "agent":
-        return "Build (MCP)";
       case "local-agent":
         // Show "Basic Agent" for non-Pro users, "Agent" for Pro users
         return isProEnabled ? "Agent" : "Basic Agent";
@@ -94,105 +98,121 @@ export function ChatModeSelector() {
   const isMac = detectIsMac();
 
   return (
-    <Select
-      value={selectedMode}
-      onValueChange={(v) => v && handleModeChange(v)}
-    >
-      <Tooltip>
-        <TooltipTrigger
-          render={
-            <MiniSelectTrigger
-              data-testid="chat-mode-selector"
-              className={cn(
-                "h-6 w-fit px-1.5 py-0 text-xs-sm font-medium shadow-none gap-0.5",
-                selectedMode === "build" ||
-                  selectedMode === "local-agent" ||
-                  selectedMode === "plan"
-                  ? "bg-background hover:bg-muted/50 focus:bg-muted/50"
-                  : "bg-primary/10 hover:bg-primary/20 focus:bg-primary/20 text-primary border-primary/20 dark:bg-primary/20 dark:hover:bg-primary/30 dark:focus:bg-primary/30",
-              )}
-              size="sm"
-            />
-          }
-        >
-          <SelectValue>{getModeDisplayName(selectedMode)}</SelectValue>
-        </TooltipTrigger>
-        <TooltipContent>
-          {`Open mode menu (${isMac ? "\u2318 + ." : "Ctrl + ."} to toggle)`}
-        </TooltipContent>
-      </Tooltip>
-      <SelectContent align="start">
-        {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 className="flex items-center gap-1.5">
+      <Select
+        value={selectedMode}
+        onValueChange={(v) => v && handleModeChange(v)}
+      >
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <MiniSelectTrigger
+                data-testid="chat-mode-selector"
+                className={cn(
+                  "h-6 w-fit px-1.5 py-0 text-xs-sm font-medium shadow-none gap-0.5",
+                  selectedMode === "build" ||
+                    selectedMode === "local-agent" ||
+                    selectedMode === "plan"
+                    ? "bg-background hover:bg-muted/50 focus:bg-muted/50"
+                    : "bg-primary/10 hover:bg-primary/20 focus:bg-primary/20 text-primary border-primary/20 dark:bg-primary/20 dark:hover:bg-primary/30 dark:focus:bg-primary/30",
+                )}
+                size="sm"
+              />
+            }
+          >
+            <SelectValue>{getModeDisplayName(selectedMode)}</SelectValue>
+          </TooltipTrigger>
+          <TooltipContent>
+            {`Open mode menu (${isMac ? "\u2318 + ." : "Ctrl + ."} to toggle)`}
+          </TooltipContent>
+        </Tooltip>
+        <SelectContent align="start">
+          {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>
-                <span className="text-xs text-muted-foreground">
-                  Better at bigger tasks and debugging
-                </span>
-              </div>
-            </SelectItem>
-            <SelectItem value="plan">
+              </SelectItem>
+              <SelectItem value="plan">
+                <div className="flex flex-col items-start">
+                  <div className="flex items-center gap-1.5">
+                    <span className="font-medium">Plan</span>
+                    <NewBadge />
+                  </div>
+                  <span className="text-xs text-muted-foreground">
+                    Design before you build
+                  </span>
+                </div>
+              </SelectItem>
+            </>
+          )}
+          {!isProEnabled && (
+            <SelectItem value="local-agent" disabled={isQuotaExceeded}>
               <div className="flex flex-col items-start">
                 <div className="flex items-center gap-1.5">
-                  <span className="font-medium">Plan</span>
-                  <NewBadge />
+                  <span className="font-medium">Basic Agent</span>
+                  <span className="text-xs text-muted-foreground">
+                    ({isQuotaExceeded ? "0" : messagesRemaining}/5 remaining for
+                    today)
+                  </span>
                 </div>
                 <span className="text-xs text-muted-foreground">
-                  Design before you build
+                  {isQuotaExceeded
+                    ? "Daily limit reached"
+                    : "Try our AI agent for free"}
                 </span>
               </div>
             </SelectItem>
-          </>
-        )}
-        {!isProEnabled && (
-          <SelectItem value="local-agent" disabled={isQuotaExceeded}>
+          )}
+          <SelectItem value="build">
             <div className="flex flex-col items-start">
-              <div className="flex items-center gap-1.5">
-                <span className="font-medium">Basic Agent</span>
-                <span className="text-xs text-muted-foreground">
-                  ({isQuotaExceeded ? "0" : messagesRemaining}/5 remaining for
-                  today)
-                </span>
-              </div>
+              <span className="font-medium">Build</span>
               <span className="text-xs text-muted-foreground">
-                {isQuotaExceeded
-                  ? "Daily limit reached"
-                  : "Try our AI agent for free"}
+                Generate and edit code
               </span>
             </div>
           </SelectItem>
-        )}
-        <SelectItem value="build">
-          <div className="flex flex-col items-start">
-            <span className="font-medium">Build</span>
-            <span className="text-xs text-muted-foreground">
-              Generate and edit code
-            </span>
-          </div>
-        </SelectItem>
-        <SelectItem value="ask">
-          <div className="flex flex-col items-start">
-            <span className="font-medium">Ask</span>
-            <span className="text-xs text-muted-foreground">
-              Ask questions about the app
-            </span>
-          </div>
-        </SelectItem>
-        <SelectItem value="agent">
-          <div className="flex flex-col items-start">
-            <div className="flex items-center gap-1.5">
-              <span className="font-medium">Build with MCP</span>
+          <SelectItem value="ask">
+            <div className="flex flex-col items-start">
+              <span className="font-medium">Ask</span>
+              <span className="text-xs text-muted-foreground">
+                Ask questions about the app
+              </span>
             </div>
-            <span className="text-xs text-muted-foreground">
-              Like Build, but can use tools (MCP) to generate code
-            </span>
-          </div>
-        </SelectItem>
-      </SelectContent>
-    </Select>
+          </SelectItem>
+        </SelectContent>
+      </Select>
+      {selectedMode === "build" && <McpChip count={enabledMcpServersCount} />}
+    </div>
+  );
+}
+
+function McpChip({ count }: { count: number }) {
+  if (count === 0) return null;
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            data-testid="mcp-servers-chip"
+            className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-400 border border-purple-200 dark:border-purple-800 cursor-default"
+          />
+        }
+      >
+        {count} MCP
+      </TooltipTrigger>
+      <TooltipContent>
+        <span>
+          {count} MCP server{count !== 1 ? "s" : ""} enabled
+        </span>
+      </TooltipContent>
+    </Tooltip>
   );
 }

src/components/DefaultChatModeSelector.tsx

@@ -36,9 +36,8 @@ export function DefaultChatModeSelector() {
   const getModeDisplayName = (mode: ChatMode) => {
     switch (mode) {
       case "build":
+      case "agent": // backwards compatibility - treat as build
         return "Build";
-      case "agent":
-        return "Build (MCP)";
       case "local-agent":
         return isProEnabled ? "Agent" : "Basic Agent";
       case "ask":
@@ -86,14 +85,6 @@ export function DefaultChatModeSelector() {
                 </span>
               </div>
             </SelectItem>
-            <SelectItem value="agent">
-              <div className="flex flex-col items-start">
-                <span className="font-medium">Build with MCP</span>
-                <span className="text-xs text-muted-foreground">
-                  Build with tools (MCP)
-                </span>
-              </div>
-            </SelectItem>
           </SelectContent>
         </Select>
       </div>

src/hooks/useChatModeToggle.ts

@@ -20,13 +20,17 @@ export function useChatModeToggle() {
     [isMac],
   );
 
-  // Function to toggle between ask and build chat modes
+  // Function to toggle between chat modes (skipping deprecated "agent" mode)
   const toggleChatMode = useCallback(() => {
     if (!settings || !settings.selectedChatMode) return;
 
     const currentMode = settings.selectedChatMode;
-    const modes = ChatModeSchema.options;
-    const currentIndex = modes.indexOf(settings.selectedChatMode);
+    // Filter out deprecated "agent" mode from toggle cycle
+    const modes = ChatModeSchema.options.filter((m) => m !== "agent");
+    // If current mode is "agent", treat it as "build" for indexing
+    const effectiveCurrentMode =
+      currentMode === "agent" ? "build" : currentMode;
+    const currentIndex = modes.indexOf(effectiveCurrentMode);
     const newMode = modes[(currentIndex + 1) % modes.length];
 
     updateSettings({ selectedChatMode: newMode });

src/ipc/handlers/chat_stream_handlers.ts

@@ -1202,46 +1202,58 @@ This conversation includes one or more image attachments. When the user uploads
           return;
         }
 
-        if (settings.selectedChatMode === "agent") {
+        // Use MCP agent code path if:
+        // 1. Mode is explicitly "agent" (backwards compatibility for existing settings)
+        // 2. Mode is "build" AND there are enabled MCP servers
+        if (
+          settings.selectedChatMode === "agent" ||
+          settings.selectedChatMode === "build"
+        ) {
           const tools = await getMcpTools(event);
-
-          const { fullStream } = await simpleStreamText({
-            chatMessages: limitedHistoryChatMessages,
-            modelClient,
-            tools: {
-              ...tools,
-              "generate-code": {
-                description:
-                  "ALWAYS use this tool whenever generating or editing code for the codebase.",
-                inputSchema: z.object({}),
-                execute: async () => "",
+          const hasEnabledMcpServers = Object.keys(tools).length > 0;
+
+          // Only run MCP agent path if mode is "agent" OR if build mode has enabled MCP servers
+          if (settings.selectedChatMode === "agent" || hasEnabledMcpServers) {
+            const { fullStream } = await simpleStreamText({
+              chatMessages: limitedHistoryChatMessages,
+              modelClient,
+              tools: {
+                ...tools,
+                "generate-code": {
+                  description:
+                    "ALWAYS use this tool whenever generating or editing code for the codebase.",
+                  inputSchema: z.object({}),
+                  execute: async () => "",
+                },
               },
-            },
-            systemPromptOverride: constructSystemPrompt({
-              aiRules: await readAiRules(getDyadAppPath(updatedChat.app.path)),
-              chatMode: "agent",
-              enableTurboEditsV2: false,
-            }),
-            files: files,
-            dyadDisableFiles: true,
-          });
+              systemPromptOverride: constructSystemPrompt({
+                aiRules: await readAiRules(
+                  getDyadAppPath(updatedChat.app.path),
+                ),
+                chatMode: "agent",
+                enableTurboEditsV2: false,
+              }),
+              files: files,
+              dyadDisableFiles: true,
+            });
 
-          const result = await processStreamChunks({
-            fullStream,
-            fullResponse,
-            abortController,
-            chatId: req.chatId,
-            processResponseChunkUpdate,
-          });
-          fullResponse = result.fullResponse;
-          chatMessages.push({
-            role: "assistant",
-            content: fullResponse,
-          });
-          chatMessages.push({
-            role: "user",
-            content: "OK.",
-          });
+            const result = await processStreamChunks({
+              fullStream,
+              fullResponse,
+              abortController,
+              chatId: req.chatId,
+              processResponseChunkUpdate,
+            });
+            fullResponse = result.fullResponse;
+            chatMessages.push({
+              role: "assistant",
+              content: fullResponse,
+            });
+            chatMessages.push({
+              role: "user",
+              content: "OK.",
+            });
+          }
         }
 
         // When calling streamText, the messages need to be properly formatted for mixed content