From 07468e39f768a09f409ac3bdbee87a6933775247 Mon Sep 17 00:00:00 2001
From: Hiep Le <69354317+hieptl@users.noreply.github.com>
Date: Thu, 5 Mar 2026 22:19:50 +0700
Subject: [PATCH] feat(frontend): disable the create a plan button when users
 are using the planning agent (#13234)

---
 .../__tests__/routes/planner-tab.test.tsx     | 55 +++++++++++++++++++
 frontend/src/routes/planner-tab.tsx           | 12 +++-
 2 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 frontend/__tests__/routes/planner-tab.test.tsx

diff --git a/frontend/__tests__/routes/planner-tab.test.tsx b/frontend/__tests__/routes/planner-tab.test.tsx
new file mode 100644
index 0000000000..8f139ffc5f
--- /dev/null
+++ b/frontend/__tests__/routes/planner-tab.test.tsx
@@ -0,0 +1,55 @@
+import { screen } from "@testing-library/react";
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import PlannerTab from "#/routes/planner-tab";
+import { renderWithProviders } from "../../test-utils";
+import { useConversationStore } from "#/stores/conversation-store";
+
+// Mock the handle plan click hook
+vi.mock("#/hooks/use-handle-plan-click", () => ({
+  useHandlePlanClick: () => ({
+    handlePlanClick: vi.fn(),
+  }),
+}));
+
+describe("PlannerTab", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset store state to defaults
+    useConversationStore.setState({
+      planContent: null,
+      conversationMode: "code",
+    });
+  });
+
+  describe("Create a plan button", () => {
+    it("should be enabled when conversation mode is 'code'", () => {
+      // Arrange
+      useConversationStore.setState({
+        planContent: null,
+        conversationMode: "code",
+      });
+
+      // Act
+      renderWithProviders(<PlannerTab />);
+
+      // Assert
+      const button = screen.getByRole("button");
+      expect(button).not.toBeDisabled();
+    });
+
+    it("should be disabled when conversation mode is 'plan'", () => {
+      // Arrange
+      useConversationStore.setState({
+        planContent: null,
+        conversationMode: "plan",
+      });
+
+      // Act
+      renderWithProviders(<PlannerTab />);
+
+      // Assert
+      const button = screen.getByRole("button");
+      expect(button).toBeDisabled();
+    });
+  });
+});
diff --git a/frontend/src/routes/planner-tab.tsx b/frontend/src/routes/planner-tab.tsx
index dfda9b9a8f..11e5f8e3c0 100644
--- a/frontend/src/routes/planner-tab.tsx
+++ b/frontend/src/routes/planner-tab.tsx
@@ -7,6 +7,7 @@ import { useScrollToBottom } from "#/hooks/use-scroll-to-bottom";
 import { MarkdownRenderer } from "#/components/features/markdown/markdown-renderer";
 import { planComponents } from "#/components/features/markdown/plan-components";
 import { useHandlePlanClick } from "#/hooks/use-handle-plan-click";
+import { cn } from "#/utils/utils";
 
 function PlannerTab() {
   const { t } = useTranslation();
@@ -14,7 +15,8 @@ function PlannerTab() {
     React.useRef<HTMLDivElement>(null),
   );
 
-  const { planContent } = useConversationStore();
+  const { planContent, conversationMode } = useConversationStore();
+  const isPlanMode = conversationMode === "plan";
   const { handlePlanClick } = useHandlePlanClick();
 
   if (planContent !== null && planContent !== undefined) {
@@ -40,7 +42,13 @@ function PlannerTab() {
       <button
         type="button"
         onClick={handlePlanClick}
-        className="flex w-[164px] h-[40px] p-2 justify-center items-center shrink-0 rounded-lg bg-white overflow-hidden text-black text-ellipsis font-sans text-[16px] not-italic font-normal leading-[20px] hover:cursor-pointer hover:opacity-80"
+        disabled={isPlanMode}
+        className={cn(
+          "flex w-[164px] h-[40px] p-2 justify-center items-center shrink-0 rounded-lg bg-white overflow-hidden text-black text-ellipsis font-sans text-[16px] not-italic font-normal leading-[20px]",
+          isPlanMode
+            ? "opacity-50 cursor-not-allowed"
+            : "hover:cursor-pointer hover:opacity-80",
+        )}
       >
         {t(I18nKey.COMMON$CREATE_A_PLAN)}
       </button>