@eventcatalog/core 2.32.1 → 2.33.0

package/dist/features.cjs

@@ -31,7 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var features_exports = {};
 __export(features_exports, {
   isBackstagePluginEnabled: () => isBackstagePluginEnabled,
-  isEventCatalogProEnabled: () => isEventCatalogProEnabled
+  isEventCatalogScaleEnabled: () => isEventCatalogScaleEnabled,
+  isEventCatalogStarterEnabled: () => isEventCatalogStarterEnabled
 });
 module.exports = __toCommonJS(features_exports);
 var import_boxen = __toESM(require("boxen"), 1);
@@ -77,8 +78,8 @@ var isBackstagePluginEnabled = async (licenseKey) => {
   }
   return true;
 };
-var isEventCatalogProEnabled = async (licenseKey) => {
-  const LICENSE_KEY = process.env.EVENTCATALOG_PRO_LICENSE_KEY || null;
+var isEventCatalogScaleEnabled = async (licenseKey) => {
+  const LICENSE_KEY = process.env.EVENTCATALOG_SCALE_LICENSE_KEY || null;
   if (!LICENSE_KEY) {
     return false;
   }
@@ -91,28 +92,70 @@ var isEventCatalogProEnabled = async (licenseKey) => {
   });
   if (response.status !== 200) {
     console.log(
-      "\nTried to verify your EventCatalog Pro license but it is not valid. Please check your license key or purchase a license at https://eventcatalog.cloud/\n"
+      "\nTried to verify your EventCatalog Scale plan, but your license key is not valid. Please check your license key or purchase a license at https://eventcatalog.cloud/\n"
     );
     return false;
   }
   if (response.status === 200) {
     const data = await response.json();
-    if ("@eventcatalog/eventcatalog-pro" !== data.plugin) {
+    if ("@eventcatalog/eventcatalog-scale" !== data.plugin) {
       console.log(
-        "\nInvalid license key for EventCatalog Pro, please check your license key or purchase a license at https://eventcatalog.cloud/\n"
+        "\nInvalid license key for EventCatalog Scale plan, please check your license key or purchase a license at https://eventcatalog.cloud/\n"
       );
       return false;
     }
-    let message = "EventCatalog Pro is enabled for EventCatalog";
+    let message = "EventCatalog Scale plan is enabled for EventCatalog";
     if (data.is_trial) {
-      message += "\nYou are using a trial license for EventCatalog Pro.";
+      message += "\nYou are using a trial license for EventCatalog Scale plan.";
     }
     console.log(
       (0, import_boxen.default)(message, {
         padding: 1,
         margin: 1,
         borderColor: "green",
-        title: "@eventcatalog/eventcatalog-pro",
+        title: "@eventcatalog/eventcatalog-scale",
+        titleAlignment: "center"
+      })
+    );
+  }
+  return true;
+};
+var isEventCatalogStarterEnabled = async (licenseKey) => {
+  const LICENSE_KEY = process.env.EVENTCATALOG_STARTER_LICENSE_KEY || null;
+  if (!LICENSE_KEY) {
+    return false;
+  }
+  const response = await fetch("https://api.eventcatalog.cloud/functions/v1/license", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${LICENSE_KEY}`,
+      "Content-Type": "application/json"
+    }
+  });
+  if (response.status !== 200) {
+    console.log(
+      "\nTried to verify your EventCatalog Starter plan, but your license key is not valid. Please check your license key or purchase a license at https://eventcatalog.cloud/\n"
+    );
+    return false;
+  }
+  if (response.status === 200) {
+    const data = await response.json();
+    if ("@eventcatalog/eventcatalog-starter" !== data.plugin) {
+      console.log(
+        "\nInvalid license key for EventCatalog Starter plan, please check your license key or purchase a license at https://eventcatalog.cloud/\n"
+      );
+      return false;
+    }
+    let message = "EventCatalog Starter plan is enabled for EventCatalog";
+    if (data.is_trial) {
+      message += "\nYou are using a trial license for EventCatalog Starter Plan.";
+    }
+    console.log(
+      (0, import_boxen.default)(message, {
+        padding: 1,
+        margin: 1,
+        borderColor: "green",
+        title: "@eventcatalog/eventcatalog-starter",
         titleAlignment: "center"
       })
     );
@@ -122,5 +165,6 @@ var isEventCatalogProEnabled = async (licenseKey) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   isBackstagePluginEnabled,
-  isEventCatalogProEnabled
+  isEventCatalogScaleEnabled,
+  isEventCatalogStarterEnabled
 });

package/dist/features.d.cts

@@ -1,4 +1,5 @@
 declare const isBackstagePluginEnabled: (licenseKey?: string) => Promise<boolean>;
-declare const isEventCatalogProEnabled: (licenseKey?: string) => Promise<boolean>;
+declare const isEventCatalogScaleEnabled: (licenseKey?: string) => Promise<boolean>;
+declare const isEventCatalogStarterEnabled: (licenseKey?: string) => Promise<boolean>;
 
-export { isBackstagePluginEnabled, isEventCatalogProEnabled };
+export { isBackstagePluginEnabled, isEventCatalogScaleEnabled, isEventCatalogStarterEnabled };

package/dist/features.d.ts

@@ -1,4 +1,5 @@
 declare const isBackstagePluginEnabled: (licenseKey?: string) => Promise<boolean>;
-declare const isEventCatalogProEnabled: (licenseKey?: string) => Promise<boolean>;
+declare const isEventCatalogScaleEnabled: (licenseKey?: string) => Promise<boolean>;
+declare const isEventCatalogStarterEnabled: (licenseKey?: string) => Promise<boolean>;
 
-export { isBackstagePluginEnabled, isEventCatalogProEnabled };
+export { isBackstagePluginEnabled, isEventCatalogScaleEnabled, isEventCatalogStarterEnabled };

package/dist/features.js

@@ -1,8 +1,10 @@
 import {
   isBackstagePluginEnabled,
-  isEventCatalogProEnabled
-} from "./chunk-NJGR7XUU.js";
+  isEventCatalogScaleEnabled,
+  isEventCatalogStarterEnabled
+} from "./chunk-ZIZUBYNO.js";
 export {
   isBackstagePluginEnabled,
-  isEventCatalogProEnabled
+  isEventCatalogScaleEnabled,
+  isEventCatalogStarterEnabled
 };

package/eventcatalog/src/components/MDX/Link/Link.astro

@@ -0,0 +1,7 @@
+---
+import { buildUrl } from '@utils/url-builder';
+
+const { href } = Astro.props;
+---
+
+<a href={buildUrl(href)} class="text-purple-500 hover:text-purple-700"><slot /></a>

package/eventcatalog/src/components/MDX/ResourceLink/ResourceLink.astro

@@ -0,0 +1,34 @@
+---
+import { buildUrl } from '@utils/url-builder';
+
+const resourceToCollectionMap = {
+  service: 'services',
+  event: 'events',
+  command: 'commands',
+  query: 'queries',
+  domain: 'domains',
+  flow: 'flows',
+  channel: 'channels',
+  user: 'users',
+  team: 'teams',
+} as const;
+
+const { id, version, type } = Astro.props;
+const collection = resourceToCollectionMap[type as keyof typeof resourceToCollectionMap];
+---
+
+{
+  version && (
+    <a href={buildUrl(`/docs/${collection}/${id}/${version}`)} class="text-purple-500 hover:text-purple-700">
+      <slot />
+    </a>
+  )
+}
+
+{
+  !version && (
+    <a href={buildUrl(`/docs/${collection}/${id}`)} class="text-purple-500 hover:text-purple-700">
+      <slot />
+    </a>
+  )
+}

package/eventcatalog/src/components/MDX/components.tsx

@@ -16,7 +16,8 @@ import MessageTable from '@components/MDX/MessageTable/MessageTable.astro';
 import ResourceGroupTable from '@components/MDX/ResourceGroupTable/ResourceGroupTable.astro';
 import Tabs from '@components/MDX/Tabs/Tabs.astro';
 import TabItem from '@components/MDX/Tabs/TabItem.astro';
-
+import ResourceLink from '@components/MDX/ResourceLink/ResourceLink.astro';
+import Link from '@components/MDX/Link/Link.astro';
 //  Portals: required for server/client components
 import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
 import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
@@ -26,23 +27,25 @@ const components = (props: any) => {
   return {
     Accordion,
     AccordionGroup,
+    Admonition,
+    AsyncAPI,
+    ChannelInformation: (mdxProp: any) => ChannelInformation({ ...props.data, ...mdxProp }),
+    File: (mdxProp: any) => File({ ...props, ...mdxProp }),
     Flow,
+    Link: (mdxProp: any) => jsx(Link, { ...props, ...mdxProp }),
+    MessageTable: (mdxProp: any) => jsx(MessageTable, { ...props, ...mdxProp }),
+    NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
     OpenAPI,
-    AsyncAPI,
-    Tile,
-    Tiles,
+    ResourceGroupTable: (mdxProp: any) => jsx(ResourceGroupTable, { ...props, ...mdxProp }),
+    ResourceLink: (mdxProp: any) => jsx(ResourceLink, { ...props, ...mdxProp }),
+    Schema: (mdxProp: any) => jsx(Schema, { ...props, ...mdxProp }),
+    SchemaViewer: (mdxProp: any) => SchemaViewerPortal({ ...props.data, ...mdxProp }),
     Step,
     Steps,
-    Tabs,
     TabItem,
-    Admonition,
-    File: (mdxProp: any) => File({ ...props, ...mdxProp }),
-    NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
-    ChannelInformation: (mdxProp: any) => ChannelInformation({ ...props.data, ...mdxProp }),
-    SchemaViewer: (mdxProp: any) => SchemaViewerPortal({ ...props.data, ...mdxProp }),
-    Schema: (mdxProp: any) => jsx(Schema, { ...props, ...mdxProp }),
-    MessageTable: (mdxProp: any) => jsx(MessageTable, { ...props, ...mdxProp }),
-    ResourceGroupTable: (mdxProp: any) => jsx(ResourceGroupTable, { ...props, ...mdxProp }),
+    Tabs,
+    Tile,
+    Tiles,
   };
 };
 

package/eventcatalog/src/enterprise/ai-assistant/components/ChatSidebar.tsx

@@ -90,66 +90,6 @@ const Sidebar: React.FC<{}> = () => {
 
         {/* Beta Message */}
         <div className="p-4 text-xs text-gray-500 border-t border-gray-200">
-          <div className="flex items-center justify-between mb-2">
-            <p className="font-bold">This feature is currently in beta.</p>
-            <Dialog.Root open={showHelp} onOpenChange={setShowHelp}>
-              <Dialog.Trigger asChild>
-                <button title="Help" className="p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                    <path
-                      fillRule="evenodd"
-                      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </button>
-              </Dialog.Trigger>
-              <Dialog.Portal>
-                <Dialog.Overlay className="fixed inset-0 bg-black/50 z-40" />
-                <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg z-50 p-6 w-[600px] max-h-[85vh] overflow-y-auto">
-                  <Dialog.Title className="text-lg font-semibold text-gray-900 mb-4">
-                    Welcome to the EventCatalog AI Assistant
-                  </Dialog.Title>
-                  <div className="text-sm text-gray-600 space-y-4">
-                    <p>
-                      This is your private AI assistant for EventCatalog. All conversations are stored locally and your data
-                      remains completely private.
-                    </p>
-                    <p>Key features:</p>
-                    <ul className="list-disc pl-4 space-y-2">
-                      <li>Local-first: All conversations are stored on your device only</li>
-                      <li>Privacy-focused: Your data is never shared with external servers</li>
-                      <li>Persistent chat history: Access your previous conversations anytime</li>
-                      <li>Multiple sessions: Organize different topics in separate chats</li>
-                    </ul>
-
-                    <div className="mt-6">
-                      <p className="font-medium mb-2">Example prompts you can try:</p>
-                      <ul className="list-disc pl-4 space-y-2 bg-gray-50 p-4 rounded-lg">
-                        <li>"I want to create a new feature, what events do we have related to Payments?"</li>
-                        <li>"What domains do we have and who owns them?"</li>
-                        <li>"What are the events for the X domain?"</li>
-                        <li>"Create me a code snippet for this event"</li>
-                      </ul>
-                    </div>
-
-                    <p className="mt-4">For additional support or feature requests, please join our Discord community.</p>
-                  </div>
-                  <Dialog.Close asChild>
-                    <button className="absolute top-4 right-4 text-gray-400 hover:text-gray-600" aria-label="Close">
-                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                        <path
-                          fillRule="evenodd"
-                          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    </button>
-                  </Dialog.Close>
-                </Dialog.Content>
-              </Dialog.Portal>
-            </Dialog.Root>
-          </div>
           <p>
             Have issues or ideas? Let us know on{' '}
             <a
@@ -160,7 +100,65 @@ const Sidebar: React.FC<{}> = () => {
             >
               Discord
             </a>
-            .
+            <div className="inline-block">
+              <Dialog.Root open={showHelp} onOpenChange={setShowHelp}>
+                <Dialog.Trigger asChild>
+                  <button title="Help" className="p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
+                      <path
+                        fillRule="evenodd"
+                        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  </button>
+                </Dialog.Trigger>
+                <Dialog.Portal>
+                  <Dialog.Overlay className="fixed inset-0 bg-black/50 z-40" />
+                  <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg z-50 p-6 w-[600px] max-h-[85vh] overflow-y-auto">
+                    <Dialog.Title className="text-lg font-semibold text-gray-900 mb-4">
+                      Welcome to the EventCatalog AI Assistant
+                    </Dialog.Title>
+                    <div className="text-sm text-gray-600 space-y-4">
+                      <p>
+                        This is your private AI assistant for EventCatalog. All conversations are stored locally and your data
+                        remains completely private.
+                      </p>
+                      <p>Key features:</p>
+                      <ul className="list-disc pl-4 space-y-2">
+                        <li>Local-first: All conversations are stored on your device only</li>
+                        <li>Privacy-focused: Your data is never shared with external servers</li>
+                        <li>Persistent chat history: Access your previous conversations anytime</li>
+                        <li>Multiple sessions: Organize different topics in separate chats</li>
+                      </ul>
+
+                      <div className="mt-6">
+                        <p className="font-medium mb-2">Example prompts you can try:</p>
+                        <ul className="list-disc pl-4 space-y-2 bg-gray-50 p-4 rounded-lg">
+                          <li>"I want to create a new feature, what events do we have related to Payments?"</li>
+                          <li>"What domains do we have and who owns them?"</li>
+                          <li>"What are the events for the X domain?"</li>
+                          <li>"Create me a code snippet for this event"</li>
+                        </ul>
+                      </div>
+
+                      <p className="mt-4">For additional support or feature requests, please join our Discord community.</p>
+                    </div>
+                    <Dialog.Close asChild>
+                      <button className="absolute top-4 right-4 text-gray-400 hover:text-gray-600" aria-label="Close">
+                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                          <path
+                            fillRule="evenodd"
+                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      </button>
+                    </Dialog.Close>
+                  </Dialog.Content>
+                </Dialog.Portal>
+              </Dialog.Root>
+            </div>
           </p>
         </div>
       </div>

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -7,17 +7,15 @@ interface Props {
 
 import {
   BookOpenText,
-  BookText,
   Workflow,
   TableProperties,
   House,
   BookUser,
-  MessageSquare,
   BotMessageSquare,
   Users,
-  Star,
-  BadgeCheck,
   Sparkles,
+  Rocket,
+  FileText,
 } from 'lucide-react';
 import Header from '../components/Header.astro';
 import SEO from '../components/Seo.astro';
@@ -37,7 +35,6 @@ import { isCollectionVisibleInCatalog } from '@eventcatalog';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/queries';
 import { hasLandingPageForDocs } from '@utils/pages';
-import { isEventCatalogProEnabled } from '@utils/feature';
 const events = await getEvents({ getAllVersions: false });
 const commands = await getCommands({ getAllVersions: false });
 const queries = await getQueries({ getAllVersions: false });
@@ -46,6 +43,8 @@ const domains = await getDomains({ getAllVersions: false });
 const flows = await getFlows({ getAllVersions: false });
 const customDocs = await getCollection('customPages');
 
+import { isEventCatalogUpgradeEnabled } from '@utils/feature';
+
 const currentPath = Astro.url.pathname;
 
 const catalogHasDefaultLandingPageForDocs = await hasLandingPageForDocs();
@@ -93,15 +92,6 @@ const navigationItems = [
       (currentPath.includes('/docs') && !currentPath.includes('/docs/custom')) || currentPath.includes('/architecture/docs/'),
     sidebar: true,
   },
-  {
-    id: '/docs/custom',
-    label: 'Documentation',
-    icon: BookText,
-    href: getDefaultUrl('docs/custom', '/docs/custom'),
-    current: currentPath.includes('/docs/custom'),
-    sidebar: false,
-    hidden: !isEventCatalogProEnabled(),
-  },
   {
     id: '/visualiser',
     label: 'Visualiser',
@@ -135,19 +125,35 @@ const navigationItems = [
     sidebar: false,
     hidden: true,
   },
+].filter((item) => {
+  const userSideBarOption = userSideBarConfiguration.find((config: { id: string; visible: boolean }) => config.id === item.id);
+  return userSideBarOption ? userSideBarOption.visible : true;
+});
+
+const premiumFeatures = [
+  {
+    id: '/docs/custom',
+    label: 'Custom Documentation',
+    icon: FileText,
+    href: getDefaultUrl('docs/custom', '/docs/custom'),
+    current: currentPath.includes('/docs/custom'),
+    sidebar: false,
+    isPremium: true,
+  },
   {
     id: '/chat',
-    label: 'AI Assistant',
+    label: 'EventCatalog Chat',
     icon: BotMessageSquare,
     href: buildUrl('/chat'),
     current: currentPath.includes('/chat'),
+    isPremium: true,
   },
 ].filter((item) => {
   const userSideBarOption = userSideBarConfiguration.find((config: { id: string; visible: boolean }) => config.id === item.id);
   return userSideBarOption ? userSideBarOption.visible : true;
 });
 
-const currentNavigationItem = navigationItems.find((item) => item.current);
+const currentNavigationItem = [...navigationItems, ...premiumFeatures].find((item) => item.current);
 const { title, description } = Astro.props;
 
 const showSideBarOnLoad = currentNavigationItem?.sidebar;
@@ -193,38 +199,70 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
                         id={item.id}
                         data-role="nav-item"
                         href={item.href}
-                        class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${item.current ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'}`}
+                        class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${
+                          item.current
+                            ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700'
+                            : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'
+                        }`}
                       >
                         <div class="has-tooltip">
                           <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
                             {item.label}
                           </span>
-                          <item.icon className="h-6 w-6  " />
+                          <item.icon className="h-6 w-6" />
                         </div>
                       </a>
                     );
                   })
               }
+
+              <hr class="w-8 border-t border-gray-200" />
+
+              {
+                premiumFeatures.map((item) => (
+                  <a
+                    id={item.id}
+                    data-role="nav-item"
+                    href={item.href}
+                    class={`p-1.5 inline-block transition-colors duration-200 rounded-lg mb-8 relative ${
+                      item.current
+                        ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700'
+                        : 'hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-700 hover:text-white text-gray-700'
+                    }`}
+                  >
+                    <div class="has-tooltip">
+                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-indigo-500 to-indigo-700 text-white ml-10 flex items-center gap-1">
+                        <Sparkles className="h-3 w-3" /> {item.label}
+                      </span>
+                      <item.icon className="h-6 w-6" />
+                      <div class="absolute -top-1 -right-1 bg-gradient-to-r from-amber-400 to-amber-500 rounded-full p-0.5 shadow-lg">
+                        <Sparkles className="h-2 w-2 text-white" />
+                      </div>
+                    </div>
+                  </a>
+                ))
+              }
             </div>
 
-            {/* Pro link at the bottom */}
-            <div class="mb-4">
-              <a
-                id="/pro"
-                data-role="nav-item"
-                href={buildUrl('/pro')}
-                class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'bg-gradient-to-r from-purple-100 to-indigo-100 hover:from-purple-500 hover:to-purple-700 hover:text-white text-purple-700'}`}
-              >
-                <div class="has-tooltip">
-                  <span
-                    class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10"
+            {
+              isEventCatalogUpgradeEnabled() && (
+                <div class="mb-4">
+                  <a
+                    id="/pro"
+                    data-role="nav-item"
+                    href={buildUrl('/plans')}
+                    class={`p-1.5 inline-block transition-colors duration-200 rounded-lg ${currentPath.includes('/pro') ? 'text-white bg-gradient-to-b from-purple-500 to-purple-700' : 'bg-gradient-to-r from-purple-100 to-indigo-100 hover:from-purple-500 hover:to-purple-700 hover:text-white text-purple-700'}`}
                   >
-                    EventCatalog Pro
-                  </span>
-                  <Sparkles className="h-6 w-6" />
+                    <div class="has-tooltip">
+                      <span class="tooltip rounded shadow-lg p-1 text-xs bg-gradient-to-l from-purple-500 to-purple-700 text-white ml-10">
+                        Upgrade EventCatalog
+                      </span>
+                      <Rocket className="h-6 w-6" />
+                    </div>
+                  </a>
                 </div>
-              </a>
-            </div>
+              )
+            }
           </nav>
         </div>