From 1d6a84f09c5fe56e378a55f3f46b1d3fff3116aa Mon Sep 17 00:00:00 2001
From: tristandubbeld <tristan.dubbeld@gmail.com>
Date: Tue, 8 Jul 2025 13:29:12 +0200
Subject: [PATCH 1/2] create SDK workspace dashboard banner component

---
 .../Recent/Banners/SDKWorkspaceBanner.tsx     | 33 +++++++++++++++++++
 .../Content/routes/Recent/TopBanner.tsx       | 13 ++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/SDKWorkspaceBanner.tsx

diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/SDKWorkspaceBanner.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/SDKWorkspaceBanner.tsx
new file mode 100644
index 00000000000..cf03da6c220
--- /dev/null
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/SDKWorkspaceBanner.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Banner, Link, Stack, Text } from '@codesandbox/components';
+import track from '@codesandbox/common/lib/utils/analytics';
+import { BannerProps } from './types';
+
+export const SDKWorkspaceBanner: React.FC<BannerProps> = ({ onDismiss }) => {
+  return (
+    <Banner
+      onDismiss={() => {
+        track('SDK Workspace Bzanner - Dismiss');
+        onDismiss();
+      }}
+    >
+      <Stack direction="vertical" gap={2}>
+        <Text color="#EDFFA5" size={6} weight="500">
+          Welcome to the CodeSandbox dashboard
+        </Text>
+        <Stack direction="vertical" gap={2}>
+          <Text>
+            We are in the process of creating a dashboard that is curated
+            specifically for your SDK usage. Check out the{' '}
+            <Link href="/t/usage">usage page</Link> for information related to
+            your subscription and usage. Check out the{' '}
+            <Link href="TODO">
+              CLI docs
+            </Link>{' '}
+            on how to view and inspect sandboxes created via the SDK.
+          </Text>
+        </Stack>
+      </Stack>
+    </Banner>
+  );
+};
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Recent/TopBanner.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Recent/TopBanner.tsx
index dd15d0cb12d..62d71dfc2d9 100644
--- a/packages/app/src/app/pages/Dashboard/Content/routes/Recent/TopBanner.tsx
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/Recent/TopBanner.tsx
@@ -7,6 +7,7 @@ import { useAppState } from 'app/overmind';
 import { FreeUpgradeBanner } from './Banners/FreeUpgradeBanner';
 import { UBBWelcomeBanner } from './Banners/UBBWelcomeBanner';
 import { LegacyProConvertBanner } from './Banners/LegacyProConvertBanner';
+import { SDKWorkspaceBanner } from './Banners/SDKWorkspaceBanner';
 
 export const TopBanner = () => {
   const { ubbBeta } = useWorkspaceFeatureFlags();
@@ -17,6 +18,11 @@ export const TopBanner = () => {
     activeTeamInfo?.insertedAt &&
     new Date(activeTeamInfo.insertedAt) < new Date('2024-02-01');
 
+  const [
+    sdkWorkspaceBannerDismissed,
+    dismissSDKWorkspaceBanner,
+  ] = useDismissible(`${activeTeam}_SDK_WORKSPACE_BANNER`);
+
   const [welcomeBannerDismissed, dismissWelcomeBanner] = useDismissible(
     `${activeTeam}_UBB_WELCOME`
   );
@@ -29,6 +35,13 @@ export const TopBanner = () => {
     `${activeTeam}_UPSELL_PRO_BANNER`
   );
 
+  // TODO
+  const isSDKWorkspace = true;
+
+  if (isSDKWorkspace && !sdkWorkspaceBannerDismissed) {
+    return <SDKWorkspaceBanner onDismiss={dismissSDKWorkspaceBanner} />;
+  }
+
   if (!ubbBeta) {
     // Legacy case for seat-based Pro accounts
     if (isPro && !legacyProBannerDismissed) {

From 3555c861f46314e409d8ee2228e9b3e4f2262d34 Mon Sep 17 00:00:00 2001
From: tristandubbeld <tristan.dubbeld@gmail.com>
Date: Tue, 8 Jul 2025 13:32:38 +0200
Subject: [PATCH 2/2] fix: typo bzanner to banner

---
 .../Content/routes/Recent/Banners/SDKWorkspaceBanner.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/SDKWorkspaceBanner.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/SDKWorkspaceBanner.tsx
index cf03da6c220..ba89d25d8d5 100644
--- a/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/SDKWorkspaceBanner.tsx
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/Recent/Banners/SDKWorkspaceBanner.tsx
@@ -7,7 +7,7 @@ export const SDKWorkspaceBanner: React.FC<BannerProps> = ({ onDismiss }) => {
   return (
     <Banner
       onDismiss={() => {
-        track('SDK Workspace Bzanner - Dismiss');
+        track('SDK Workspace Banner - Dismiss');
         onDismiss();
       }}
     >