@eventcatalog/core 3.48.4 → 4.0.0-beta.1

package/eventcatalog/src/content.config.ts

@@ -490,6 +490,12 @@ const services = defineCollection({
       'domains/*/subdomains/*/services/*/index.(md|mdx)',
       'domains/*/subdomains/*/services/*/versioned/*/index.(md|mdx)',
 
+      // Capture services inside systems
+      'systems/*/services/*/index.(md|mdx)',
+      'systems/*/services/*/versioned/*/index.(md|mdx)',
+      'domains/*/systems/*/services/*/index.(md|mdx)',
+      'domains/*/systems/*/services/*/versioned/*/index.(md|mdx)',
+
       // Capture services in the root
       'services/*/index.(md|mdx)', // ✅ Capture only services markdown files
       'services/*/versioned/*/index.(md|mdx)', // ✅ Capture versioned files inside services
@@ -591,6 +597,7 @@ const adrResourcePointer = adrPointer.extend({
     'flow',
     'channel',
     'domain',
+    'system',
     'user',
     'team',
     'container',
@@ -703,10 +710,10 @@ const resourceDocs = defineCollection({
     // Resource-level docs are restricted to known resource paths.
     // This avoids scanning external docs such as node_modules/**/docs.
     pattern: withIgnoredBuildArtifacts([
-      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products}/**/docs/**/*.@(md|mdx)',
-      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products}/**/docs/*.@(md|mdx)',
-      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products}/**/versioned/*/docs/**/*.@(md|mdx)',
-      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products}/**/versioned/*/docs/*.@(md|mdx)',
+      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products,systems}/**/docs/**/*.@(md|mdx)',
+      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products,systems}/**/docs/*.@(md|mdx)',
+      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products,systems}/**/versioned/*/docs/**/*.@(md|mdx)',
+      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products,systems}/**/versioned/*/docs/*.@(md|mdx)',
       'domains/**/docs/**/*.@(md|mdx)',
       'domains/**/docs/*.@(md|mdx)',
     ]),
@@ -718,10 +725,10 @@ const resourceDocs = defineCollection({
 const resourceDocCategories = defineCollection({
   loader: glob({
     pattern: withIgnoredBuildArtifacts([
-      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products}/**/docs/**/category.json',
-      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products}/**/docs/**/_category_.json',
-      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products}/**/versioned/*/docs/**/category.json',
-      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products}/**/versioned/*/docs/**/_category_.json',
+      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products,systems}/**/docs/**/category.json',
+      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products,systems}/**/docs/**/_category_.json',
+      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products,systems}/**/versioned/*/docs/**/category.json',
+      '{agents,events,commands,queries,services,flows,containers,channels,entities,data-products,systems}/**/versioned/*/docs/**/_category_.json',
       'domains/**/docs/**/category.json',
       'domains/**/docs/**/_category_.json',
       'domains/**/docs/category.json',
@@ -753,6 +760,7 @@ const domains = defineCollection({
       services: z.array(pointer).optional(),
       agents: z.array(pointer).optional(),
       domains: z.array(pointer).optional(),
+      systems: z.array(pointer).optional(),
       entities: z.array(pointer).optional(),
       'data-products': z.array(pointer).optional(),
       flows: z.array(pointer).optional(),
@@ -762,6 +770,7 @@ const domains = defineCollection({
         .object({
           parentDomains: detailPanelPropertySchema.optional(),
           subdomains: detailPanelPropertySchema.optional(),
+          systems: detailPanelPropertySchema.optional(),
           services: detailPanelPropertySchema.optional(),
           entities: detailPanelPropertySchema.optional(),
           messages: detailPanelPropertySchema.optional(),
@@ -777,6 +786,84 @@ const domains = defineCollection({
     .extend(baseSchema.shape),
 });
 
+// A relationship from one system to another, used by the System Diagram.
+// Source-declared and one-directional. The `label` describes the edge; a relationship
+// without a label is treated as having no edge (it is skipped when drawing the diagram).
+const systemRelationshipPointer = z.object({
+  id: z.string(),
+  version: z.string().optional().default('latest'),
+  label: z.string().optional(),
+});
+
+// An actor (a person/role) that interacts with a system on the Context Diagram.
+// Actors are inline (not a collection) — `id` is the actor's node id, used to
+// de-duplicate the same actor referenced from multiple systems.
+// `direction` controls the edge arrow: `inbound` = actor -> system (e.g. "logs into"),
+// `outbound` = system -> actor (e.g. "sends email to"). Defaults to inbound.
+const systemActorRelationship = z.object({
+  id: z.string(),
+  name: z.string().optional(),
+  label: z.string().optional(),
+  direction: z.enum(['inbound', 'outbound']).optional().default('inbound'),
+});
+
+const systems = defineCollection({
+  loader: glob({
+    pattern: withIgnoredBuildArtifacts([
+      '**/systems/**/index.(md|mdx)',
+      '**/systems/**/versioned/*/index.(md|mdx)',
+      // Systems can contain nested resource folders (containers, diagrams, services, etc.).
+      // Those nested resources are loaded by their own collections — exclude their index files
+      // here so they are not mistaken for systems. Nested `systems/` folders are still allowed.
+      '!**/systems/**/agents/**',
+      '!**/systems/**/services/**',
+      '!**/systems/**/events/**',
+      '!**/systems/**/commands/**',
+      '!**/systems/**/queries/**',
+      '!**/systems/**/flows/**',
+      '!**/systems/**/channels/**',
+      '!**/systems/**/entities/**',
+      '!**/systems/**/containers/**',
+      '!**/systems/**/diagrams/**',
+      '!**/systems/**/data-products/**',
+      '!**/systems/**/adrs/**',
+      '!**/systems/**/docs/**',
+    ]),
+    base: projectDirBase,
+    generateId: ({ data }) => {
+      return `${data.id}-${data.version}`;
+    },
+  }),
+  schema: z
+    .object({
+      // Whether the system belongs to your organisation (`internal`) or is a
+      // third-party/SaaS system you integrate with (`external`, e.g. "Resend",
+      // "Stripe"). External systems are shaded in the node-graph. Defaults to internal.
+      scope: z.enum(['internal', 'external']).optional().default('internal'),
+      services: z.array(pointer).optional(),
+      flows: z.array(pointer).optional(),
+      entities: z.array(pointer).optional(),
+      containers: z.array(pointer).optional(),
+      relationships: z.array(systemRelationshipPointer).optional(),
+      actors: z.array(systemActorRelationship).optional(),
+      detailsPanel: z
+        .object({
+          versions: detailPanelPropertySchema.optional(),
+          repository: detailPanelPropertySchema.optional(),
+          owners: detailPanelPropertySchema.optional(),
+          changelog: detailPanelPropertySchema.optional(),
+          attachments: detailPanelPropertySchema.optional(),
+          services: detailPanelPropertySchema.optional(),
+          flows: detailPanelPropertySchema.optional(),
+          entities: detailPanelPropertySchema.optional(),
+          containers: detailPanelPropertySchema.optional(),
+          diagrams: detailPanelPropertySchema.optional(),
+        })
+        .optional(),
+    })
+    .extend(baseSchema.shape),
+});
+
 const channels = defineCollection({
   loader: glob({
     pattern: withIgnoredBuildArtifacts(['**/channels/**/index.(md|mdx)', '**/channels/**/versioned/*/index.(md|mdx)']),
@@ -1064,6 +1151,7 @@ export const collections = {
   users,
   teams,
   domains,
+  systems,
   flows,
   pages,
   changelogs,

package/eventcatalog/src/enterprise/collections/resource-docs-utils.ts

@@ -15,6 +15,7 @@ const CACHE_ENABLED = process.env.DISABLE_EVENTCATALOG_CACHE !== 'true';
 export type ResourceCollection =
   | 'agents'
   | 'domains'
+  | 'systems'
   | 'services'
   | 'events'
   | 'commands'
@@ -283,10 +284,11 @@ const getResourceLookups = async (): Promise<Record<ResourceCollection, Resource
   }
 
   const lookupPromise = (async () => {
-    const [agents, domains, services, events, commands, queries, flows, containers, channels, entities, dataProducts] =
+    const [agents, domains, systems, services, events, commands, queries, flows, containers, channels, entities, dataProducts] =
       await Promise.all([
         getCollection('agents'),
         getCollection('domains'),
+        getCollection('systems'),
         getCollection('services'),
         getCollection('events'),
         getCollection('commands'),
@@ -301,6 +303,7 @@ const getResourceLookups = async (): Promise<Record<ResourceCollection, Resource
     return {
       agents: buildLookup(agents),
       domains: buildLookup(domains),
+      systems: buildLookup(systems),
       services: buildLookup(services),
       events: buildLookup(events),
       commands: buildLookup(commands),

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -97,32 +97,31 @@ const editUrl =
                   <span class="text-xs md:text-sm font-semibold text-[rgb(var(--ec-accent))] capitalize">{sectionLabel}</span>
                 )
               }
-              <div class="flex justify-between items-center gap-4">
+              <div class="flex items-center gap-4">
                 <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">
                   {doc.title}
                 </h2>
-                <div class="hidden lg:block shrink-0">
-                  <CopyAsMarkdown
-                    client:only="react"
-                    schemas={[]}
-                    chatEnabled={isEventCatalogChatEnabled()}
-                    markdownDownloadEnabled={isMarkdownDownloadEnabled()}
-                    rssFeedEnabled={isRSSEnabled()}
-                    editUrl={editUrl}
-                    preferChatAsDefault={isEventCatalogChatEnabled()}
-                  />
-                </div>
               </div>
               <p class="text-base text-[rgb(var(--ec-page-text-muted))] font-light">{doc.summary}</p>
               {
                 badges && badges.length > 0 && (
-                  <div class="flex flex-wrap gap-3 py-2">
+                  <div class="flex flex-wrap gap-1.5 py-1">
                     {badges.map((badge: any) => {
                       return <Badge badge={badge} />;
                     })}
                   </div>
                 )
               }
+              <CopyAsMarkdown
+                client:only="react"
+                variant="toolbar"
+                schemas={[]}
+                chatEnabled={isEventCatalogChatEnabled()}
+                markdownDownloadEnabled={isMarkdownDownloadEnabled()}
+                rssFeedEnabled={isRSSEnabled()}
+                editUrl={editUrl}
+                preferChatAsDefault={isEventCatalogChatEnabled()}
+              />
             </div>
           </div>
           <div class="prose prose-md max-w-none py-4 w-full text-[15px]">

package/eventcatalog/src/enterprise/custom-documentation/utils/custom-docs.ts

@@ -269,3 +269,9 @@ export const getNavigationItems = async (): Promise<SidebarItem[]> => {
   const configuredSidebar = config.customDocs?.sidebar || [];
   return processSidebarItems(configuredSidebar as SideBarConfigurationItem[]);
 };
+
+export const getFirstNavigationPage = async (): Promise<AdjacentPage | null> => {
+  const navigationItems = await getNavigationItems();
+  const flatPages = flattenNavigationItems(navigationItems);
+  return flatPages[0] || null;
+};

package/eventcatalog/src/enterprise/feature.ts

@@ -49,7 +49,9 @@ export const isEventCatalogChatEnabled = () => {
 };
 
 export const isEventCatalogUpgradeEnabled = () => !isEventCatalogStarterEnabled() && !isEventCatalogScaleEnabled();
-export const isCustomLandingPageEnabled = () => isEventCatalogStarterEnabled() || isEventCatalogScaleEnabled();
+
+// Custom landing pages are always enabled now.
+export const isCustomLandingPageEnabled = () => true;
 
 export const isAuthEnabled = () => {
   const isAuthEnabledInCatalog = config?.auth?.enabled ?? false;

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -5,33 +5,23 @@ interface Props {
   description?: string;
   showNestedSideBar?: boolean;
   showHeader?: boolean;
+  // When true, the main content uses a reduced horizontal padding instead of the
+  // default 5rem. Used by wide pages such as the custom landing page.
+  reducedContentPadding?: boolean;
 }
 
 import {
   TableProperties,
-  BotMessageSquare,
-  BookOpen,
-  BookText,
+  House,
   FileText,
   SquareDashedMousePointerIcon,
   FileCode,
   Waypoints,
   PanelLeftClose,
-  Database,
   UserRound,
   UsersRound,
   Settings,
 } from 'lucide-react';
-import {
-  RectangleGroupIcon,
-  GlobeAltIcon,
-  CubeIcon,
-  BoltIcon,
-  ChatBubbleLeftIcon,
-  MagnifyingGlassIcon,
-  QueueListIcon,
-} from '@heroicons/react/24/outline';
-import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
 import BaseLayout from './BaseLayout.astro';
 import Header from '../components/Header.astro';
 import SideNav from '../components/SideNav/SideNav.astro';
@@ -58,6 +48,7 @@ import { ClientRouter } from 'astro:transitions';
 
 import { getCommands } from '@utils/collections/commands';
 import { getDomains } from '@utils/collections/domains';
+import { getSystems } from '@utils/collections/systems';
 import { getEvents } from '@utils/collections/events';
 import { getServices } from '@utils/collections/services';
 import { getAgents } from '@utils/collections/agents';
@@ -69,10 +60,12 @@ import { isCollectionVisibleInCatalog } from '@eventcatalog';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/collections/queries';
 import { filterSidebarItems } from '@utils/sidebar-visibility';
+import { getFirstNavigationPage } from '@enterprise/custom-documentation/utils/custom-docs';
 
 import { isEmbedEnabled, isCustomStylesEnabled, isEventCatalogScaleEnabled, isCustomDocsEnabled, isSSR } from '@utils/feature';
 
 const customDocs = await getCollection('customPages');
+const firstCustomDocsPage = isCustomDocsEnabled() && customDocs.length > 0 ? await getFirstNavigationPage() : null;
 
 let events: any[] = [];
 let commands: any[] = [];
@@ -81,11 +74,12 @@ let services: any[] = [];
 let agents: any[] = [];
 let adrs: any[] = [];
 let domains: any[] = [];
+let systems: any[] = [];
 let flows: any[] = [];
 let containers: any[] = [];
 let dataProducts: any[] = [];
 
-[events, commands, queries, services, agents, adrs, domains, flows, containers, dataProducts] = await Promise.all([
+[events, commands, queries, services, agents, adrs, domains, systems, flows, containers, dataProducts] = await Promise.all([
   getEvents({ getAllVersions: false, hydrateServices: false }),
   getCommands({ getAllVersions: false, hydrateServices: false }),
   getQueries({ getAllVersions: false, hydrateServices: false }),
@@ -93,6 +87,7 @@ let dataProducts: any[] = [];
   getAgents({ getAllVersions: false }),
   getAdrs({ getAllVersions: false }),
   getDomains({ getAllVersions: false }),
+  getSystems({ getAllVersions: false }),
   getFlows({ getAllVersions: false }),
   getContainers({ getAllVersions: false }),
   getDataProducts({ getAllVersions: false }),
@@ -109,7 +104,7 @@ const currentPath = Astro.url.pathname;
 
 const getDefaultUrl = (route: string, defaultValue: string) => {
   if (route === 'docs/custom') {
-    return customDocs.length > 0 ? buildUrl(`/${route}/${customDocs[0].id.replace('docs', '')}`) : buildUrl(defaultValue);
+    return firstCustomDocsPage ? buildUrl(`/${route}/${firstCustomDocsPage.slug}`) : buildUrl(defaultValue);
   }
 
   const collections = [
@@ -143,8 +138,8 @@ const navigationItems = filterSidebarItems(
   [
     {
       id: '/',
-      label: 'Catalog',
-      icon: BookOpen,
+      label: 'Home',
+      icon: House,
       href: buildUrl(config.landingPage || '/'),
       current:
         currentPath === '/' ||
@@ -165,24 +160,6 @@ const navigationItems = filterSidebarItems(
       isPremium: true,
       visible: isCustomDocsEnabled() && customDocs.length > 0,
     },
-    {
-      id: '/schemas/explorer',
-      label: 'Schemas',
-      icon: FileCode,
-      href: buildUrl('/schemas/explorer'),
-      current: currentPath.includes('/schemas/explorer') && !currentPath.includes('/schemas/fields'),
-    },
-    ...(isSSR()
-      ? [
-          {
-            id: '/schemas/fields',
-            label: 'Schema Insights',
-            icon: Waypoints,
-            href: buildUrl('/schemas/fields'),
-            current: currentPath.includes('/schemas/fields'),
-          },
-        ]
-      : []),
   ],
   userSideBarConfiguration
 );
@@ -211,113 +188,69 @@ const premiumFeatures: Array<{
 
 const internalServices = services.filter((service) => !service.data.externalSystem);
 const externalSystems = services.filter((service) => service.data.externalSystem);
+const discoverTargets = [
+  { id: '/discover/domains', aliases: ['/discover'], href: buildUrl('/discover/domains'), count: domains.length },
+  { id: '/discover/systems', aliases: ['/discover'], href: buildUrl('/discover/systems'), count: systems.length },
+  {
+    id: '/discover/services',
+    aliases: ['/discover'],
+    href: buildUrl('/discover/services'),
+    count: internalServices.length,
+  },
+  {
+    id: '/discover/external-systems',
+    aliases: ['/discover'],
+    href: buildUrl('/discover/external-systems'),
+    count: externalSystems.length,
+  },
+  { id: '/discover/agents', aliases: ['/discover'], href: buildUrl('/discover/agents'), count: agents.length },
+  { id: '/discover/adrs', aliases: ['/discover'], href: buildUrl('/discover/adrs'), count: adrs.length },
+  {
+    id: '/discover/data-products',
+    aliases: ['/discover'],
+    href: buildUrl('/discover/data-products'),
+    count: dataProducts.length,
+  },
+  { id: '/discover/containers', aliases: ['/discover'], href: buildUrl('/discover/containers'), count: containers.length },
+  { id: '/discover/events', aliases: ['/discover'], href: buildUrl('/discover/events'), count: events.length },
+  { id: '/discover/commands', aliases: ['/discover'], href: buildUrl('/discover/commands'), count: commands.length },
+  { id: '/discover/queries', aliases: ['/discover'], href: buildUrl('/discover/queries'), count: queries.length },
+  { id: '/discover/flows', aliases: ['/discover'], href: buildUrl('/discover/flows'), count: flows.length },
+];
+const defaultDiscoverTarget = filterSidebarItems(discoverTargets, userSideBarConfiguration).find((target) => target.count > 0);
 
 const browseItems = filterSidebarItems(
   [
     {
-      id: '/discover/agents',
-      aliases: ['/discover'],
-      label: 'Agents',
-      icon: BotMessageSquare,
-      href: buildUrl('/discover/agents'),
-      current: currentPath === buildUrl('/discover/agents'),
-      visible: agents.length > 0,
-    },
-    {
-      id: '/discover/adrs',
-      aliases: ['/discover'],
-      label: 'Decision Records',
-      icon: BookText,
-      href: buildUrl('/discover/adrs'),
-      current: currentPath === buildUrl('/discover/adrs'),
-      visible: adrs.length > 0,
-    },
-    {
-      id: '/discover/data-products',
-      aliases: ['/discover'],
-      label: 'Data Products',
-      icon: CubeIcon,
-      href: buildUrl('/discover/data-products'),
-      current: currentPath === buildUrl('/discover/data-products'),
-      visible: dataProducts.length > 0,
-    },
-    {
-      id: '/discover/containers',
-      aliases: ['/discover'],
-      label: 'Data Stores',
-      icon: Database,
-      href: buildUrl('/discover/containers'),
-      current: currentPath === buildUrl('/discover/containers'),
-      visible: containers.length > 0,
-    },
-    {
-      id: '/discover/domains',
-      aliases: ['/discover'],
-      label: 'Domains',
-      icon: RectangleGroupIcon,
-      href: buildUrl('/discover/domains'),
-      current: currentPath === buildUrl('/discover/domains'),
-      visible: domains.length > 0,
-    },
-    {
-      id: '/discover/services',
-      aliases: ['/discover'],
-      label: 'Services',
-      icon: ServerIcon,
-      href: buildUrl('/discover/services'),
-      current: currentPath === buildUrl('/discover/services'),
-      visible: internalServices.length > 0,
-    },
-    {
-      id: '/discover/external-systems',
+      id: '/discover',
       aliases: ['/discover'],
-      label: 'External Systems',
-      icon: GlobeAltIcon,
-      href: buildUrl('/discover/external-systems'),
-      current: currentPath === buildUrl('/discover/external-systems'),
-      visible: externalSystems.length > 0,
+      label: 'Resources',
+      icon: TableProperties,
+      href: defaultDiscoverTarget?.href ?? buildUrl('/discover/domains'),
+      current: currentPath === buildUrl('/discover') || currentPath.startsWith(buildUrl('/discover/', true)),
+      visible: Boolean(defaultDiscoverTarget),
     },
     {
-      id: '/discover/events',
-      aliases: ['/discover'],
-      label: 'Events',
-      icon: BoltIcon,
-      href: buildUrl('/discover/events'),
-      current: currentPath === buildUrl('/discover/events'),
-      visible: events.length > 0,
-    },
-    {
-      id: '/discover/commands',
-      aliases: ['/discover'],
-      label: 'Commands',
-      icon: ChatBubbleLeftIcon,
-      href: buildUrl('/discover/commands'),
-      current: currentPath === buildUrl('/discover/commands'),
-      visible: commands.length > 0,
-    },
-    {
-      id: '/discover/queries',
-      aliases: ['/discover'],
-      label: 'Queries',
-      icon: MagnifyingGlassIcon,
-      href: buildUrl('/discover/queries'),
-      current: currentPath === buildUrl('/discover/queries'),
-      visible: queries.length > 0,
-    },
-    {
-      id: '/discover/flows',
-      aliases: ['/discover'],
-      label: 'Flows',
-      icon: QueueListIcon,
-      href: buildUrl('/discover/flows'),
-      current: currentPath === buildUrl('/discover/flows'),
-      visible: flows.length > 0,
+      id: '/schemas/explorer',
+      label: 'Schemas & APIs',
+      icon: FileCode,
+      href: buildUrl('/schemas/explorer'),
+      current: currentPath.includes('/schemas/explorer') && !currentPath.includes('/schemas/fields'),
     },
+    ...(isSSR()
+      ? [
+          {
+            id: '/schemas/fields',
+            label: 'Schema Insights',
+            icon: Waypoints,
+            href: buildUrl('/schemas/fields'),
+            current: currentPath.includes('/schemas/fields'),
+          },
+        ]
+      : []),
   ],
   userSideBarConfiguration
-)
-  .filter((item) => item.visible !== false)
-  .sort((a, b) => a.label.localeCompare(b.label));
+).filter((item) => item.visible !== false);
 
 const organizationItems = filterSidebarItems(
   [
@@ -356,7 +289,7 @@ const settingsItems = filterSidebarItems(
 );
 
 const currentNavigationItem = [...navigationItems, ...studioNavigationItem, ...premiumFeatures].find((item) => item.current);
-const { title, description, showNestedSideBar = true, showHeader = true } = Astro.props;
+const { title, description, showNestedSideBar = true, showHeader = true, reducedContentPadding = false } = Astro.props;
 
 const canPageBeEmbedded = isEmbedEnabled();
 const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/docs', true)];
@@ -420,6 +353,10 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
         padding-left: var(--ec-app-content-padding-left);
         padding-right: var(--ec-app-content-padding-right);
       }
+      .app-content-wrapper--reduced-padding {
+        --ec-app-content-padding-left: 2rem;
+        --ec-app-content-padding-right: 2rem;
+      }
       .app-shell {
         min-height: calc(100vh - 4rem);
         flex: 1;
@@ -458,8 +395,9 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
       .vertical-nav-rail[data-collapsed='true'] .nav-secondary-item,
       .vertical-nav-rail[data-collapsed='true'] #vertical-nav-toggle {
         justify-content: center;
-        padding-left: 0.25rem;
-        padding-right: 0.25rem;
+        width: 2.5rem;
+        height: 2.5rem;
+        padding: 0;
       }
       :root[data-vertical-nav-collapsed='true'] .vertical-nav-rail .nav-brand-link,
       .vertical-nav-rail[data-collapsed='true'] .nav-brand-link {
@@ -468,13 +406,26 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
       }
       :root[data-vertical-nav-collapsed='true'] .vertical-nav-rail nav,
       .vertical-nav-rail[data-collapsed='true'] nav {
+        align-items: center;
+        gap: 0.75rem;
         padding-left: 0.25rem;
         padding-right: 0.25rem;
       }
       :root[data-vertical-nav-collapsed='true'] .vertical-nav-rail .rail-divider,
       .vertical-nav-rail[data-collapsed='true'] .rail-divider {
-        margin-left: 0.25rem;
-        margin-right: 0.25rem;
+        display: none;
+      }
+      :root[data-vertical-nav-collapsed='true'] .vertical-nav-rail nav > .mt-auto,
+      .vertical-nav-rail[data-collapsed='true'] nav > .mt-auto {
+        margin-top: auto !important;
+        padding-top: 0;
+      }
+      :root[data-vertical-nav-collapsed='true'] .vertical-nav-rail nav + div,
+      .vertical-nav-rail[data-collapsed='true'] nav + div {
+        border-top: 0;
+        display: flex;
+        justify-content: center;
+        padding: 0.75rem 0.25rem;
       }
       :root[data-vertical-nav-collapsed='true'] .vertical-nav-rail .nav-premium-icon,
       .vertical-nav-rail[data-collapsed='true'] .nav-premium-icon {
@@ -745,7 +696,7 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
           Astro.slots.has('sidebar-content') ? (
             <slot />
           ) : (
-            <div class="app-content-wrapper">
+            <div class={`app-content-wrapper ${reducedContentPadding ? 'app-content-wrapper--reduced-padding' : ''}`}>
               <slot />
             </div>
           )
@@ -814,6 +765,10 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
       return pathname.includes('/schemas/fields');
     }
 
+    if (id === '/discover') {
+      return pathname === '/discover' || pathname.includes('/discover/');
+    }
+
     if (id === '/studio') {
       return pathname.includes('/studio');
     }
@@ -844,9 +799,10 @@ const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/do
     });
 
     secondaryNavItems.forEach((item) => {
+      const id = item.getAttribute('id');
       const href = item.getAttribute('href');
       const targetPath = href ? new URL(href, window.location.origin).pathname : null;
-      const isCurrent = targetPath ? pathname === targetPath : false;
+      const isCurrent = id === '/discover' ? isNavItemCurrent(id, pathname) : targetPath ? pathname === targetPath : false;
 
       if (isCurrent) {
         item.classList.remove(...INACTIVE_NAV_CLASSES);