From a2c312d108fa01616a2ba06ea1e4d5a968241b44 Mon Sep 17 00:00:00 2001
From: Hiep Le <69354317+hieptl@users.noreply.github.com>
Date: Tue, 11 Nov 2025 21:59:23 +0700
Subject: [PATCH] feat(frontend): add plan preview component (#11676)

---
 .../components/features/chat/plan-preview.tsx | 82 +++++++++++++++++++
 frontend/src/i18n/declaration.ts              |  3 +
 frontend/src/i18n/translation.json            | 48 +++++++++++
 3 files changed, 133 insertions(+)
 create mode 100644 frontend/src/components/features/chat/plan-preview.tsx

diff --git a/frontend/src/components/features/chat/plan-preview.tsx b/frontend/src/components/features/chat/plan-preview.tsx
new file mode 100644
index 0000000000..71504c54bc
--- /dev/null
+++ b/frontend/src/components/features/chat/plan-preview.tsx
@@ -0,0 +1,82 @@
+import { useTranslation } from "react-i18next";
+import { ArrowUpRight } from "lucide-react";
+import LessonPlanIcon from "#/icons/lesson-plan.svg?react";
+import { USE_PLANNING_AGENT } from "#/utils/feature-flags";
+import { Typography } from "#/ui/typography";
+import { I18nKey } from "#/i18n/declaration";
+
+interface PlanPreviewProps {
+  title?: string;
+  description?: string;
+  onViewClick?: () => void;
+  onBuildClick?: () => void;
+}
+
+// TODO: Remove the hardcoded values and use the plan content from the conversation store
+/* eslint-disable i18next/no-literal-string */
+export function PlanPreview({
+  title = "Improve Developer Onboarding and Examples",
+  description = "Based on the analysis of Browser-Use's current documentation and examples, this plan addresses gaps in developer onboarding by creating a progressive learning path, troubleshooting resources, and practical examples that address real-world scenarios (like the LM Studio/local LLM integration issues encountered...",
+  onViewClick,
+  onBuildClick,
+}: PlanPreviewProps) {
+  const { t } = useTranslation();
+
+  const shouldUsePlanningAgent = USE_PLANNING_AGENT();
+
+  if (!shouldUsePlanningAgent) {
+    return null;
+  }
+
+  return (
+    <div className="bg-[#25272d] border border-[#597FF4] rounded-[12px] w-full mb-4 mt-2">
+      {/* Header */}
+      <div className="border-b border-[#525252] flex h-[41px] items-center px-2 gap-1">
+        <LessonPlanIcon width={18} height={18} color="#9299aa" />
+        <Typography.Text className="font-medium text-[11px] text-white tracking-[0.11px] leading-4">
+          {t(I18nKey.COMMON$PLAN_MD)}
+        </Typography.Text>
+        <div className="flex-1" />
+        <button
+          type="button"
+          onClick={onViewClick}
+          className="flex items-center gap-1 hover:opacity-80 transition-opacity"
+        >
+          <Typography.Text className="font-medium text-[11px] text-white tracking-[0.11px] leading-4">
+            {t(I18nKey.COMMON$VIEW)}
+          </Typography.Text>
+          <ArrowUpRight className="text-white" size={18} />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-col gap-[10px] p-4">
+        <h3 className="font-bold text-[19px] text-white leading-[29px]">
+          {title}
+        </h3>
+        <p className="text-[15px] text-white leading-[29px]">
+          {description}
+          <Typography.Text className="text-[#4a67bd] cursor-pointer hover:underline ml-1">
+            {t(I18nKey.COMMON$READ_MORE)}
+          </Typography.Text>
+        </p>
+      </div>
+
+      {/* Footer */}
+      <div className="border-t border-[#525252] flex h-[54px] items-center justify-start px-4">
+        <button
+          type="button"
+          onClick={onBuildClick}
+          className="bg-white flex items-center justify-center h-[26px] px-2 rounded-[4px] w-[93px] hover:opacity-90 transition-opacity cursor-pointer"
+        >
+          <Typography.Text className="font-medium text-[14px] text-black leading-5">
+            {t(I18nKey.COMMON$BUILD)}{" "}
+            <Typography.Text className="font-medium text-black">
+              ⌘↩
+            </Typography.Text>
+          </Typography.Text>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/i18n/declaration.ts b/frontend/src/i18n/declaration.ts
index db10117d3b..f3fa1744e7 100644
--- a/frontend/src/i18n/declaration.ts
+++ b/frontend/src/i18n/declaration.ts
@@ -937,6 +937,9 @@ export enum I18nKey {
   AGENT_STATUS$WAITING_FOR_USER_CONFIRMATION = "AGENT_STATUS$WAITING_FOR_USER_CONFIRMATION",
   COMMON$MORE_OPTIONS = "COMMON$MORE_OPTIONS",
   COMMON$CREATE_A_PLAN = "COMMON$CREATE_A_PLAN",
+  COMMON$PLAN_MD = "COMMON$PLAN_MD",
+  COMMON$READ_MORE = "COMMON$READ_MORE",
+  COMMON$BUILD = "COMMON$BUILD",
   COMMON$ASK = "COMMON$ASK",
   COMMON$PLAN = "COMMON$PLAN",
   COMMON$LET_S_WORK_ON_A_PLAN = "COMMON$LET_S_WORK_ON_A_PLAN",
diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json
index 9e7defdaf6..3765faee4f 100644
--- a/frontend/src/i18n/translation.json
+++ b/frontend/src/i18n/translation.json
@@ -14991,6 +14991,54 @@
     "de": "Einen Plan erstellen",
     "uk": "Створити план"
   },
+  "COMMON$PLAN_MD": {
+    "en": "Plan.md",
+    "ja": "Plan.md",
+    "zh-CN": "Plan.md",
+    "zh-TW": "Plan.md",
+    "ko-KR": "Plan.md",
+    "no": "Plan.md",
+    "it": "Plan.md",
+    "pt": "Plan.md",
+    "es": "Plan.md",
+    "ar": "Plan.md",
+    "fr": "Plan.md",
+    "tr": "Plan.md",
+    "de": "Plan.md",
+    "uk": "Plan.md"
+  },
+  "COMMON$READ_MORE": {
+    "en": "Read more",
+    "ja": "続きを読む",
+    "zh-CN": "阅读更多",
+    "zh-TW": "閱讀更多",
+    "ko-KR": "더 읽기",
+    "no": "Les mer",
+    "it": "Leggi di più",
+    "pt": "Leia mais",
+    "es": "Leer más",
+    "ar": "اقرأ المزيد",
+    "fr": "En savoir plus",
+    "tr": "Devamını oku",
+    "de": "Mehr lesen",
+    "uk": "Читати далі"
+  },
+  "COMMON$BUILD": {
+    "en": "Build",
+    "ja": "ビルド",
+    "zh-CN": "构建",
+    "zh-TW": "建構",
+    "ko-KR": "빌드",
+    "no": "Bygg",
+    "it": "Compila",
+    "pt": "Construir",
+    "es": "Compilar",
+    "ar": "بناء",
+    "fr": "Construire",
+    "tr": "Derle",
+    "de": "Erstellen",
+    "uk": "Зібрати"
+  },
   "COMMON$ASK": {
     "en": "Ask",
     "ja": "質問する",