From 0dfcb7d71df179c21bae575a49462e51a2baa1d0 Mon Sep 17 00:00:00 2001
From: Jwalin Shah <jwalinshah13@gmail.com>
Date: Tue, 21 Apr 2026 14:00:32 -0700
Subject: [PATCH] feat(onboarding): add beta notice banner (#729) (#736)

Shows a dismissible amber banner at the top of the onboarding flow
on first launch. Dismissal is persisted to localStorage so it only
shows once per installation.

Co-authored-by: Jwalin Shah <jshah1331@gmail.com>
---
 app/src/pages/onboarding/Onboarding.tsx       |  6 +-
 .../onboarding/components/BetaBanner.tsx      | 61 +++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 app/src/pages/onboarding/components/BetaBanner.tsx

diff --git a/app/src/pages/onboarding/Onboarding.tsx b/app/src/pages/onboarding/Onboarding.tsx
index cec4421ba..59e16dece 100644
--- a/app/src/pages/onboarding/Onboarding.tsx
+++ b/app/src/pages/onboarding/Onboarding.tsx
@@ -4,6 +4,7 @@ import { useCoreState } from '../../providers/CoreStateProvider';
 import { referralApi } from '../../services/api/referralApi';
 import { userApi } from '../../services/api/userApi';
 import { getDefaultEnabledTools } from '../../utils/toolDefinitions';
+import BetaBanner from './components/BetaBanner';
 import ContextGatheringStep from './steps/ContextGatheringStep';
 import ReferralApplyStep from './steps/ReferralApplyStep';
 import SkillsStep from './steps/SkillsStep';
@@ -208,7 +209,10 @@ const Onboarding = ({ onComplete, onDefer }: OnboardingProps) => {
           </button>
         </div>
       )}
-      <div className="relative z-10 max-w-lg w-full mx-4">{renderStep()}</div>
+      <div className="relative z-10 max-w-lg w-full mx-4">
+        <BetaBanner />
+        {renderStep()}
+      </div>
     </div>
   );
 };
diff --git a/app/src/pages/onboarding/components/BetaBanner.tsx b/app/src/pages/onboarding/components/BetaBanner.tsx
new file mode 100644
index 000000000..1a0f87c15
--- /dev/null
+++ b/app/src/pages/onboarding/components/BetaBanner.tsx
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+
+const DISMISSED_KEY = 'openhuman_beta_banner_dismissed';
+
+const BetaBanner = () => {
+  const [visible, setVisible] = useState(() => {
+    try {
+      return localStorage.getItem(DISMISSED_KEY) !== 'true';
+    } catch {
+      return true;
+    }
+  });
+
+  if (!visible) return null;
+
+  const handleDismiss = () => {
+    try {
+      localStorage.setItem(DISMISSED_KEY, 'true');
+    } catch {
+      // localStorage unavailable — dismiss for this session only
+    }
+    setVisible(false);
+  };
+
+  return (
+    <div className="mb-4 flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3">
+      {/* Beta pill */}
+      <span className="mt-0.5 flex-shrink-0 rounded-md bg-amber-400 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white">
+        Beta
+      </span>
+
+      {/* Message */}
+      <p className="flex-1 text-xs leading-relaxed text-stone-700">
+        OpenHuman is in beta &mdash; you may hit rough edges. Your feedback helps us ship faster.
+      </p>
+
+      {/* Dismiss */}
+      <button
+        type="button"
+        aria-label="Dismiss beta notice"
+        onClick={handleDismiss}
+        className="mt-0.5 flex-shrink-0 text-stone-400 hover:text-stone-600 transition-colors">
+        <svg
+          className="h-3.5 w-3.5"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          aria-hidden="true">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+export default BetaBanner;