@eventcatalog/core 3.0.0-beta.2 → 3.0.0-beta.21

package/eventcatalog/src/components/ChatPanel/ChatPanelButton.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { Sparkles } from 'lucide-react';
+import ChatPanel from './ChatPanel';
+
+const ChatPanelButton = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="flex items-center gap-1.5 px-4 py-1.5 rounded-md bg-white hover:bg-gray-50 ring-1 ring-inset ring-gray-300 shadow-sm transition-colors text-sm ml-[-1px]"
+        aria-label="Open AI Assistant"
+      >
+        <Sparkles size={14} className="text-purple-500" />
+        <span className="font-light text-gray-600">Ask AI</span>
+      </button>
+
+      <ChatPanel isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </>
+  );
+};
+
+export default ChatPanelButton;

package/eventcatalog/src/components/Grids/DomainGrid.tsx

@@ -11,7 +11,7 @@ import {
   ArrowsPointingOutIcon,
 } from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
-import { BoxIcon, ArrowRight, ArrowLeft } from 'lucide-react';
+import { BoxIcon } from 'lucide-react';
 
 // ============================================
 // Types
@@ -135,7 +135,6 @@ const ServiceCard = memo(({ service }: { service: any }) => {
           {/* Receives (Inbound) */}
           <div className="flex-1 bg-blue-50 border border-blue-200 rounded-lg p-3">
             <div className="flex items-center gap-1.5 mb-2">
-              <ArrowRight className="h-3.5 w-3.5 text-blue-500" />
               <span className="text-xs font-semibold text-blue-700 uppercase">Inbound Messages</span>
               <span className="text-xs text-blue-500">({receives.length})</span>
             </div>
@@ -162,7 +161,6 @@ const ServiceCard = memo(({ service }: { service: any }) => {
           {/* Sends (Outbound) */}
           <div className="flex-1 bg-green-50 border border-green-200 rounded-lg p-3">
             <div className="flex items-center gap-1.5 mb-2">
-              <ArrowLeft className="h-3.5 w-3.5 text-green-500" />
               <span className="text-xs font-semibold text-green-700 uppercase">Outbound Messages</span>
               <span className="text-xs text-green-500">({sends.length})</span>
             </div>

package/eventcatalog/src/components/Grids/MessageGrid.tsx

@@ -41,9 +41,9 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
   );
 
   return (
-    <div className={`rounded-xl overflow-hidden bg-pink-50 p-8 border-2 border-dashed border-pink-300`}>
+    <div className={`rounded-xl overflow-hidden bg-white p-8 border-2 border-dashed border-pink-300`}>
       {/* Service Title */}
-      <div className="flex items-center gap-2 mb-8">
+      {/* <div className="flex items-center gap-2 mb-8">
         <ServerIcon className="h-6 w-6 text-pink-500" />
         <h2 className="text-2xl font-semibold text-gray-900">{service.data.name}</h2>
         <div className="flex gap-2 ml-auto">
@@ -60,7 +60,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             Read documentation
           </a>
         </div>
-      </div>
+      </div> */}
 
       <div className="grid grid-cols-3 gap-8 relative">
         {/* Left Column - Receives Messages & Reads From Containers */}
@@ -70,7 +70,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             <div className="mb-6">
               <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
                 <ServerIcon className="h-5 w-5 text-blue-500" />
-                Receives ({receives.length})
+                Inbound Messages ({receives.length})
               </h2>
             </div>
             {receives.length > 0 ? (
@@ -124,7 +124,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
         </div>
 
         {/* Service Information (Center) */}
-        <div className="bg-white border-2 border-pink-100 rounded-lg p-6 flex flex-col justify-center">
+        <div className="bg-pink-50 border-2 border-pink-100 rounded-lg p-6 flex flex-col justify-center">
           <div className="flex flex-col items-center gap-4">
             <ServerIcon className="h-12 w-12 text-pink-500" />
             <p className="text-xl font-semibold text-gray-900 text-center">{service.data.name}</p>
@@ -133,11 +133,11 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             <div className="w-full grid grid-cols-2 gap-3 mt-2">
               <div className="text-center p-3 bg-blue-50 rounded-lg border border-blue-200">
                 <div className="text-2xl font-bold text-blue-600">{receives.length}</div>
-                <div className="text-xs text-gray-600 mt-1">Receives</div>
+                <div className="text-xs text-gray-600 mt-1">Inbound Messages</div>
               </div>
               <div className="text-center p-3 bg-green-50 rounded-lg border border-green-200">
                 <div className="text-2xl font-bold text-green-600">{sends.length}</div>
-                <div className="text-xs text-gray-600 mt-1">Sends</div>
+                <div className="text-xs text-gray-600 mt-1">Outbound Messages</div>
               </div>
               {readsFrom.length > 0 && (
                 <div className="text-center p-3 bg-orange-50 rounded-lg border border-orange-200">
@@ -168,7 +168,7 @@ export default function MessageGridV2({ service, embeded = false }: MessageGridV
             <div className="mb-6">
               <h2 className={`font-semibold text-gray-900 flex items-center gap-2 ${embeded ? 'text-sm' : 'text-xl'}`}>
                 <ServerIcon className="h-5 w-5 text-emerald-500" />
-                Sends ({sends.length})
+                Outbound Messages ({sends.length})
               </h2>
             </div>
             {sends.length > 0 ? (

package/eventcatalog/src/components/Header.astro

@@ -2,10 +2,11 @@
 import catalog from '@utils/eventcatalog-config/catalog';
 import Search from '@components/Search/Search.astro';
 import { buildUrl } from '@utils/url-builder';
-import { showEventCatalogBranding, showCustomBranding } from '@utils/feature';
+import { showEventCatalogBranding, showCustomBranding, isEventCatalogChatEnabled } from '@utils/feature';
 import { getSession } from 'auth-astro/server';
 import { isAuthEnabled, isSSR } from '@utils/feature';
 import { EnvironmentDropdown } from './EnvironmentDropdown';
+import ChatPanelButton from './ChatPanel/ChatPanelButton';
 
 let session = null;
 if (isAuthEnabled()) {
@@ -42,8 +43,11 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
         </a>
       </div>
 
-      <div class="hidden lg:block flex-grow -ml-1">
-        <Search />
+      <div class="hidden lg:flex flex-grow -ml-1 items-center">
+        <div class="flex-grow max-w-xl">
+          <Search />
+        </div>
+        {isEventCatalogChatEnabled() && <ChatPanelButton client:load />}
       </div>
 
       <div class="hidden md:block w-3/12">
@@ -60,6 +64,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                   class="flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 rounded-full"
                   aria-expanded="false"
                   aria-haspopup="true"
+                  aria-label="User menu"
                 >
                   {session.user?.image && !session.user?.image?.includes('googleusercontent.com') ? (
                     <img
@@ -117,16 +122,28 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                       <a
                         href="https://discord.com/invite/3rjaZMmrAm"
                         class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+                        aria-label="Join our Discord community"
                       >
-                        <img src={buildUrl('/icons/discord.svg', true)} class="h-6 w-6  hover:opacity-100 transition-opacity" />
+                        <img
+                          src={buildUrl('/icons/discord.svg', true)}
+                          alt=""
+                          class="h-6 w-6  hover:opacity-100 transition-opacity"
+                          aria-hidden="true"
+                        />
                       </a>
                     </li>
                     <li>
                       <a
                         href="https://github.com/event-catalog/eventcatalog"
                         class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+                        aria-label="View EventCatalog on GitHub"
                       >
-                        <img src={buildUrl('/icons/github.svg', true)} class="h-6 w-6  hover:opacity-100 transition-opacity" />
+                        <img
+                          src={buildUrl('/icons/github.svg', true)}
+                          alt=""
+                          class="h-6 w-6  hover:opacity-100 transition-opacity"
+                          aria-hidden="true"
+                        />
                       </a>
                     </li>
                   </ul>
@@ -137,10 +154,13 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
                       <a
                         href={repositoryUrl}
                         class="block p-1.5 rounded-lg hover:bg-gray-100 transition-colors focus:outline-none"
+                        aria-label="View repository on GitHub"
                       >
                         <img
                           src={buildUrl('/icons/github.svg', true)}
+                          alt=""
                           class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity"
+                          aria-hidden="true"
                         />
                       </a>
                     </li>

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

@@ -232,10 +232,21 @@ const NodeGraphBuilder = ({
   };
 
   // animate messages, between views
+  // URL parameter takes priority over localStorage
   useEffect(() => {
-    const storedAnimateMessages = localStorage.getItem('EventCatalog:animateMessages');
-    if (storedAnimateMessages !== null) {
-      setAnimateMessages(storedAnimateMessages === 'true');
+    const urlParams = new URLSearchParams(window.location.search);
+    const animateParam = urlParams.get('animate');
+
+    if (animateParam === 'true') {
+      setAnimateMessages(true);
+    } else if (animateParam === 'false') {
+      setAnimateMessages(false);
+    } else {
+      // Fall back to localStorage if no URL parameter
+      const storedAnimateMessages = localStorage.getItem('EventCatalog:animateMessages');
+      if (storedAnimateMessages !== null) {
+        setAnimateMessages(storedAnimateMessages === 'true');
+      }
     }
   }, []);
 

package/eventcatalog/src/components/Search/Search.astro

@@ -4,7 +4,7 @@ import SearchModal from './SearchModal.tsx';
 ---
 
 <div>
-  <div class="relative flex items-center w-10/12">
+  <div class="relative flex items-center w-full pr-4">
     <input
       id="search-dummy-input"
       type="text"
@@ -14,7 +14,7 @@ import SearchModal from './SearchModal.tsx';
       class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 font-light sm:text-sm sm:leading-6 px-4"
     />
     <MagnifyingGlassIcon className="absolute inset-y-0 left-0 h-9 w-8 flex items-center pl-4 text-gray-400" />
-    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-6">
       <kbd class="inline-flex items-center rounded px-1 font-sans text-xs text-gray-400">⌘K</kbd>
     </div>
   </div>

package/eventcatalog/src/components/Search/SearchModal.tsx

@@ -20,6 +20,7 @@ import {
   ArrowUturnLeftIcon,
   StarIcon,
   Square2StackIcon,
+  ArrowsRightLeftIcon,
 } from '@heroicons/react/24/outline';
 import { StarIcon as StarIconSolid, CircleStackIcon } from '@heroicons/react/24/solid';
 import { useStore } from '@nanostores/react';
@@ -33,7 +34,7 @@ const typeIcons: any = {
   Command: ChatBubbleLeftIcon,
   Query: QueryIcon,
   Entity: CubeIcon,
-  Channel: QueueListIcon,
+  Channel: ArrowsRightLeftIcon,
   Team: UserGroupIcon,
   User: UserIcon,
   Language: BookOpenIcon,
@@ -68,8 +69,6 @@ function classNames(...classes: (string | boolean | undefined)[]) {
 
 // Helper to construct URL from key if href is missing
 const getUrlForItem = (node: any, key: string) => {
-  if (node.href) return node.href;
-
   const parts = key.split(':');
   if (parts.length < 2) return null; // Need at least type:id
 
@@ -83,8 +82,16 @@ const getUrlForItem = (node: any, key: string) => {
   // Only show items that have a version to avoid duplicates
   if (!version) return null;
 
+  // If node has href, use it, otherwise construct from key
+  if (node.href) return node.href;
+
   // Pluralize type for URL if needed
-  const pluralType = ['event', 'command', 'query', 'domain', 'service', 'flow', 'container'].includes(type) ? type + 's' : type; // users/teams already have href usually, but safe fallback
+  let pluralType = type;
+  if (['event', 'command', 'domain', 'service', 'flow', 'container', 'channel'].includes(type)) {
+    pluralType = type + 's';
+  } else if (type === 'query') {
+    pluralType = 'queries';
+  }
 
   return `/docs/${pluralType}/${id}/${version}`;
 };
@@ -171,6 +178,7 @@ export default function SearchModal() {
       Team: 0,
       Container: 0,
       Design: 0,
+      Channel: 0,
     };
 
     itemsToCount.forEach((item) => {
@@ -195,6 +203,7 @@ export default function SearchModal() {
     if (counts.Service > 0) dynamicFilters.push({ id: 'Service', name: `Services (${counts.Service})` });
     if (counts.Message > 0) dynamicFilters.push({ id: 'Message', name: `Messages (${counts.Message})` });
     if (counts.Container > 0) dynamicFilters.push({ id: 'Container', name: `Containers (${counts.Container})` });
+    if (counts.Channel > 0) dynamicFilters.push({ id: 'Channel', name: `Channels (${counts.Channel})` });
     if (counts.Design > 0) dynamicFilters.push({ id: 'Design', name: `Designs (${counts.Design})` });
     if (counts.Team > 0) dynamicFilters.push({ id: 'Team', name: `Teams & Users (${counts.Team})` });
 
@@ -224,7 +233,7 @@ export default function SearchModal() {
   const filteredItems = useMemo(() => {
     if (query === '') {
       // Show favorites when search is empty
-      if (favorites.length > 0) {
+      if (favorites.length > 0 && activeFilter === 'all') {
         return favorites
           .slice(0, 5)
           .map((fav) => {
@@ -375,14 +384,14 @@ export default function SearchModal() {
                                   <p className={classNames('text-sm font-medium', active ? 'text-gray-900' : 'text-gray-700')}>
                                     {item.name}
                                   </p>
-                                  <div className="flex items-start gap-2">
+                                  <div className="flex items-center gap-2">
                                     <p
                                       className={classNames('text-sm flex-shrink-0', active ? 'text-gray-700' : 'text-gray-500')}
                                     >
                                       {item.type}
                                     </p>
                                     {item.rawNode.summary && (
-                                      <p className={classNames('text-xs truncate', active ? 'text-gray-600' : 'text-gray-400')}>
+                                      <p className={classNames('text-sm truncate', active ? 'text-gray-600' : 'text-gray-400')}>
                                         • {item.rawNode.summary}
                                       </p>
                                     )}

package/eventcatalog/src/components/SideNav/NestedSideBar/SearchBar.tsx

@@ -14,6 +14,8 @@ import {
   Database,
   Waypoints,
   SquareMousePointer,
+  ListOrdered,
+  ArrowLeftRight,
 } from 'lucide-react';
 import type { NavNode } from './sidebar-builder';
 
@@ -28,6 +30,7 @@ const getBadgeClasses = (badge: string): string => {
     query: 'bg-purple-100 text-purple-700',
     message: 'bg-indigo-100 text-indigo-700',
     design: 'bg-teal-100 text-teal-700',
+    channel: 'bg-indigo-100 text-indigo-700',
   };
   return badgeColors[badge.toLowerCase()] || 'bg-gray-100 text-gray-600';
 };
@@ -77,6 +80,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
   };
 
   const filterTypes = [
+    { key: 'channel', label: 'Channels', badge: 'Channel', icon: ArrowLeftRight },
     { key: 'command', label: 'Commands', badge: 'Command', icon: MessageSquare },
     { key: 'container', label: 'Data Stores', badge: 'Container', icon: Database },
     { key: 'design', label: 'Designs', badge: 'Design', icon: SquareMousePointer },
@@ -174,8 +178,9 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
               <button
                 onClick={clearSearch}
                 className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                aria-label="Clear search"
               >
-                <X className="w-4 h-4" />
+                <X className="w-4 h-4" aria-hidden="true" />
               </button>
             )}
           </div>
@@ -189,8 +194,10 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
                   ? 'bg-purple-50 border-purple-200 text-purple-600'
                   : 'bg-gray-50 border-gray-200 text-gray-400 hover:text-gray-600 hover:bg-gray-100'
               )}
+              aria-label="Filter search results"
+              aria-expanded={showFilterDropdown}
             >
-              <SlidersHorizontal className="w-4 h-4" />
+              <SlidersHorizontal className="w-4 h-4" aria-hidden="true" />
               {searchFilters.size > 0 && (
                 <span className="absolute -top-1 -right-1 w-4 h-4 bg-purple-600 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
                   {searchFilters.size}

package/eventcatalog/src/components/SideNav/NestedSideBar/builders/domain.ts

@@ -65,6 +65,12 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
           },
         ].filter(Boolean) as ChildRef[],
       },
+      renderSubDomains && {
+        type: 'group',
+        title: 'Subdomains',
+        icon: 'Boxes',
+        pages: subDomains.map((domain) => `domain:${(domain as any).data.id}:${(domain as any).data.version}`),
+      },
       hasFlows && {
         type: 'group',
         title: 'Flows',
@@ -81,12 +87,7 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
           href: buildUrl(`/docs/entities/${(entity as any).data.id}/${(entity as any).data.version}`),
         })),
       },
-      renderSubDomains && {
-        type: 'group',
-        title: 'Subdomains',
-        icon: 'Boxes',
-        pages: subDomains.map((domain) => `domain:${(domain as any).data.id}:${(domain as any).data.version}`),
-      },
+
       ...(hasResourceGroups ? buildResourceGroupSections(resourceGroups, context) : []),
       renderServices && {
         type: 'group',

package/eventcatalog/src/components/SideNav/NestedSideBar/builders/service.ts

@@ -80,21 +80,24 @@ export const buildServiceNode = (service: CollectionEntry<'services'>, owners: a
         pages: [
           ...openAPISpecifications.map((specification) => ({
             type: 'item',
-            title: `${specification.name} (OpenAPI)`,
+            title: `${specification.name}`,
+            leftIcon: '/icons/openapi-black.svg',
             href: buildUrl(
               `/docs/services/${service.data.id}/${service.data.version}/spec/${specification.filenameWithoutExtension}`
             ),
           })),
           ...asyncAPISpecifications.map((specification) => ({
             type: 'item',
-            title: `${specification.name} (AsyncAPI)`,
+            title: `${specification.name}`,
+            leftIcon: '/icons/asyncapi-black.svg',
             href: buildUrl(
               `/docs/services/${service.data.id}/${service.data.version}/asyncapi/${specification.filenameWithoutExtension}`
             ),
           })),
           ...graphQLSpecifications.map((specification) => ({
             type: 'item',
-            title: `${specification.name} (GraphQL)`,
+            title: `${specification.name}`,
+            leftIcon: '/icons/graphql-black.svg',
             href: buildUrl(
               `/docs/services/${service.data.id}/${service.data.version}/graphql/${specification.filenameWithoutExtension}`
             ),

package/eventcatalog/src/components/SideNav/NestedSideBar/builders/shared.ts

@@ -17,6 +17,7 @@ export type NavNode = {
   type: 'group' | 'item';
   title: string;
   icon?: string; // Lucide icon name
+  leftIcon?: string; // Path to SVG icon shown on the left of the label
   href?: string; // URL (for leaf items)
   external?: boolean; // If true, the item will open in a new tab
   pages?: ChildRef[]; // Can mix keys and inline nodes

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import * as LucideIcons from 'lucide-react';
-import { ChevronRight, ChevronLeft, ChevronDown, Home, Star } from 'lucide-react';
+import { ChevronRight, ChevronLeft, ChevronDown, Home, Star, FileQuestion } from 'lucide-react';
 import type { NavigationData, NavNode, ChildRef } from './sidebar-builder';
 import SearchBar from './SearchBar';
 import { saveState, loadState, saveCollapsedSections, loadCollapsedSections } from './storage';
@@ -25,6 +25,7 @@ const getBadgeClasses = (badge: string): string => {
     query: 'bg-purple-100 text-purple-700',
     message: 'bg-indigo-100 text-indigo-700',
     design: 'bg-teal-100 text-teal-700',
+    channel: 'bg-indigo-100 text-indigo-700',
   };
   return badgeColors[badge.toLowerCase()] || 'bg-gray-100 text-gray-600';
 };
@@ -775,6 +776,7 @@ export default function NestedSideBar() {
               <IconComponent className="w-4 h-4" />
             </span>
           )}
+          {item.leftIcon && <img src={item.leftIcon} alt="" className="w-4 h-4 flex-shrink-0" />}
           <span
             className={cn(
               'text-[13px] truncate',
@@ -786,17 +788,17 @@ export default function NestedSideBar() {
         </div>
         <div className="flex items-center gap-1 flex-shrink-0">
           {canFavorite && (
-            <button
+            <div
               onClick={handleStarClick}
               className={cn(
-                'flex items-center justify-center w-5 h-5 rounded transition-colors',
+                'flex items-center justify-center w-5 h-5 rounded transition-colors cursor-pointer',
                 isFav
                   ? 'text-amber-400 hover:text-amber-500'
                   : 'text-gray-300 opacity-0 group-hover:opacity-100 hover:text-amber-400'
               )}
             >
               <Star className={cn('w-3.5 h-3.5', isFav && 'fill-current')} />
-            </button>
+            </div>
           )}
           {itemHasChildren && (
             <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-black group-hover:translate-x-0.5 transition-transform">
@@ -1038,15 +1040,15 @@ export default function NestedSideBar() {
                               {fav.badge}
                             </span>
                           )}
-                          <button
+                          <div
                             onClick={(e) => {
                               e.stopPropagation();
                               if (node) toggleFavorite(fav.nodeKey, node);
                             }}
-                            className="flex items-center justify-center w-5 h-5 text-amber-400 hover:text-amber-500 rounded transition-colors"
+                            className="flex items-center justify-center w-5 h-5 text-amber-400 hover:text-amber-500 rounded transition-colors cursor-pointer"
                           >
                             <Star className="w-3.5 h-3.5 fill-current" />
-                          </button>
+                          </div>
                           {node?.pages && node.pages.length > 0 && (
                             <span className="flex items-center justify-center w-5 h-5 text-gray-400 group-hover:text-black">
                               <ChevronRight className="w-4 h-4" />
@@ -1060,7 +1062,20 @@ export default function NestedSideBar() {
               </div>
             )}
 
-            {renderEntries(currentLevel.entries)}
+            {/* Empty State */}
+            {currentLevel.entries.length === 0 && favorites.length === 0 && (
+              <div className="flex flex-col items-center justify-center px-6 py-12 text-center">
+                <div className="mb-4 p-3 rounded-full bg-gray-100">
+                  <FileQuestion className="w-8 h-8 text-gray-400" />
+                </div>
+                <h3 className="text-sm font-semibold text-gray-900 mb-2">Your catalog is empty</h3>
+                <p className="text-xs text-gray-500 leading-relaxed max-w-[240px]">
+                  Navigation will appear here when you add resources to your EventCatalog.
+                </p>
+              </div>
+            )}
+
+            {currentLevel.entries.length > 0 && renderEntries(currentLevel.entries)}
           </nav>
         </>
       )}

package/eventcatalog/src/components/SideNav/NestedSideBar/sidebar-builder.ts

@@ -15,6 +15,7 @@ import { buildContainerNode } from './builders/container';
 import { buildFlowNode } from './builders/flow';
 import config from '@config';
 import { getDesigns } from '@utils/collections/designs';
+import { getChannels } from '@utils/collections/channels';
 
 export type { NavigationData, NavNode, ChildRef };
 
@@ -29,16 +30,18 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     return memoryCache;
   }
 
-  const [domains, services, { events, commands, queries }, containers, flows, users, teams, designs] = await Promise.all([
-    getDomains({ getAllVersions: false, includeServicesInSubdomains: false }),
-    getServices({ getAllVersions: false }),
-    getMessages({ getAllVersions: false }),
-    getContainers({ getAllVersions: false }),
-    getFlows({ getAllVersions: false }),
-    getUsers(),
-    getTeams(),
-    getDesigns(),
-  ]);
+  const [domains, services, { events, commands, queries }, containers, flows, users, teams, designs, channels] =
+    await Promise.all([
+      getDomains({ getAllVersions: false, includeServicesInSubdomains: false }),
+      getServices({ getAllVersions: false }),
+      getMessages({ getAllVersions: false }),
+      getContainers({ getAllVersions: false }),
+      getFlows({ getAllVersions: false }),
+      getUsers(),
+      getTeams(),
+      getDesigns(),
+      getChannels({ getAllVersions: false }),
+    ]);
 
   // Calculate derived lists to avoid extra fetches
   const allSubDomainIds = new Set(domains.flatMap((d) => (d.data.domains || []).map((sd: any) => sd.data.id)));
@@ -178,6 +181,30 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     {} as Record<string, NavNode>
   );
 
+  const channelNodes = channels.reduce(
+    (acc, channel) => {
+      acc[`channel:${channel.data.id}:${channel.data.version}`] = {
+        type: 'item',
+        title: channel.data.name,
+        badge: 'Channel',
+        summary: channel.data.summary,
+        href: buildUrl(`/docs/${channel.collection}/${channel.data.id}/${channel.data.version}`),
+      };
+
+      if (channel.data.latestVersion === channel.data.version) {
+        acc[`channel:${channel.data.id}`] = {
+          type: 'item',
+          title: channel.data.name,
+          badge: 'Channel',
+          summary: channel.data.summary,
+          href: buildUrl(`/docs/${channel.collection}/${channel.data.id}/${channel.data.version}`),
+        };
+      }
+      return acc;
+    },
+    {} as Record<string, NavNode>
+  );
+
   const teamNodes = teams.reduce(
     (acc, team) => {
       acc[`team:${team.data.id}`] = {
@@ -273,6 +300,13 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     pages: users.map((user) => `user:${user.data.id}`),
   });
 
+  const channelList = createLeaf(channels, {
+    type: 'item',
+    title: 'Channels',
+    icon: 'ArrowRightLeft',
+    pages: channels.map((channel) => `channel:${channel.data.id}:${channel.data.version}`),
+  });
+
   const messagesChildren = ['list:events', 'list:commands', 'list:queries'].filter(
     (key, index) => [eventsList, commandsList, queriesList][index] !== undefined
   );
@@ -303,12 +337,22 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     'list:domains',
     'list:services',
     'list:messages',
+    'list:channels',
     'list:flows',
     'list:containers',
     'list:designs',
     'list:people',
   ];
-  const allChildrenNodes = [domainsList, servicesList, messagesList, flowsList, containersList, designsList, peopleList];
+  const allChildrenNodes = [
+    domainsList,
+    servicesList,
+    messagesList,
+    channelList,
+    flowsList,
+    containersList,
+    designsList,
+    peopleList,
+  ];
 
   const validAllChildren = allChildrenKeys.filter((_, idx) => allChildrenNodes[idx] !== undefined);
 
@@ -334,6 +378,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     ...(designsList ? { 'list:designs': designsList } : {}),
     ...(teamsList ? { 'list:teams': teamsList } : {}),
     ...(usersList ? { 'list:users': usersList } : {}),
+    ...(channelList ? { 'list:channels': channelList as NavNode } : {}),
     ...(peopleList ? { 'list:people': peopleList as NavNode } : {}),
     ...(allList ? { 'list:all': allList as NavNode } : {}),
   };
@@ -343,6 +388,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     ...domainNodes,
     ...serviceNodes,
     ...messageNodes,
+    ...channelNodes,
     ...containerNodes,
     ...flowNodes,
     ...userNodes,