@eventcatalog/core 3.40.2 → 3.41.0

package/eventcatalog/src/pages/architecture/[type]/[id]/[version]/index.astro

@@ -17,7 +17,6 @@ const pageTitle = `${props.type} | ${props.data.name}`.replace(/^\w/, (c) => c.t
 
 const type = props.type;
 
-// Get specifications for services
 const specifications = type === 'services' ? getSpecificationsForService(props) : [];
 ---
 
@@ -26,7 +25,11 @@ const specifications = type === 'services' ? getSpecificationsForService(props)
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         {type === 'domains' && <DomainGrid domain={domain} client:load />}
-        {type === 'services' && <MessageGrid service={props} specifications={specifications} client:load />}
+        {
+          (type === 'agents' || type === 'services') && (
+            <MessageGrid service={props} specifications={specifications} client:load />
+          )
+        }
       </div>
     </div>
   </main>

package/eventcatalog/src/pages/directory/[type]/index.astro

@@ -45,6 +45,8 @@ function mapToItem(i: any) {
           // @ts-ignore
           associatedTeams: d.data?.associatedTeams?.map(mapToItem) ?? [],
           // @ts-ignore
+          ownedAgents: d.data?.ownedAgents?.map(mapToItem) ?? [],
+          // @ts-ignore
           ownedCommands: d.data?.ownedCommands?.map(mapToItem) ?? [],
           // @ts-ignore
           ownedQueries: d.data?.ownedQueries?.map(mapToItem) ?? [],

package/eventcatalog/src/pages/discover/[type]/_index.data.ts

@@ -10,6 +10,7 @@ export class Page extends HybridPage {
 
   static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
     const { getFlows } = await import('@utils/collections/flows');
+    const { getAgents } = await import('@utils/collections/agents');
     const { getServices } = await import('@utils/collections/services');
     const { getDataProducts } = await import('@utils/collections/data-products');
 
@@ -18,6 +19,7 @@ export class Page extends HybridPage {
 
     const loaders = {
       ...pageDataLoader,
+      agents: getAgents,
       flows: getFlows,
       services: getInternalServices,
       'external-systems': getExternalServices,
@@ -26,6 +28,7 @@ export class Page extends HybridPage {
 
     const itemTypes = [
       'events',
+      'agents',
       'commands',
       'queries',
       'domains',
@@ -56,6 +59,7 @@ export class Page extends HybridPage {
     }
 
     const { getFlows } = await import('@utils/collections/flows');
+    const { getAgents } = await import('@utils/collections/agents');
     const { getServices } = await import('@utils/collections/services');
     const { getDataProducts } = await import('@utils/collections/data-products');
 
@@ -64,6 +68,7 @@ export class Page extends HybridPage {
 
     const loaders = {
       ...pageDataLoader,
+      agents: getAgents,
       flows: getFlows,
       services: getInternalServices,
       'external-systems': getExternalServices,

package/eventcatalog/src/pages/discover/[type]/index.astro

@@ -1,6 +1,7 @@
 ---
 import { getCommands } from '@utils/collections/commands';
-import { getDomains, getDomainsForService } from '@utils/collections/domains';
+import { getAgents } from '@utils/collections/agents';
+import { getDomains, getDomainsForAgent, getDomainsForService } from '@utils/collections/domains';
 import { getEvents } from '@utils/collections/events';
 import { getServices } from '@utils/collections/services';
 import { getQueries } from '@utils/collections/queries';
@@ -22,6 +23,7 @@ const { type, data } = await Page.getData(Astro);
 const events = await getEvents();
 const queries = await getQueries();
 const commands = await getCommands();
+const agents = await getAgents();
 const services = await getServices();
 const domains = await getDomains({ getAllVersions: false });
 const containers = await getContainers();
@@ -94,6 +96,18 @@ const typeConfig: Record<
       { id: 'isDeprecated', label: 'Is Deprecated' },
     ],
   },
+  agents: {
+    label: 'Agents',
+    description: 'Browse AI agents in your catalog and inspect the models, tools, and messages they use.',
+    propertyOptions: [
+      { id: 'hasModel', label: 'Has Model' },
+      { id: 'hasTools', label: 'Has Tools' },
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'hasRepository', label: 'Has Repository' },
+      { id: 'hasDataDependencies', label: 'Has Data Dependencies' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
   'external-systems': {
     label: 'External Systems',
     description: 'Explore the external systems connected to your architecture and the contracts around them.',
@@ -185,6 +199,7 @@ function hasSpecifications(service: any): boolean {
 
 // Build lookup maps for all collections (for resolving data product inputs/outputs)
 const allCollections = [
+  ...agents.map((a) => ({ ...a, collection: 'agents' })),
   ...services.map((s) => ({ ...s, collection: 'services' })),
   ...containers.map((c) => ({ ...c, collection: 'containers' })),
   ...channels.map((c) => ({ ...c, collection: 'channels' })),
@@ -217,16 +232,18 @@ const allSubdomainIds = new Set(
   domains.flatMap((d: any) => (d.data?.domains || []).map((sd: any) => sd.data?.id || sd.id)).filter(Boolean)
 );
 
+const isAgentLike = type === 'agents';
 const isServiceLike = type === 'services' || type === 'external-systems';
+const isServiceOrAgentLike = isServiceLike || isAgentLike;
 
-// For services and external systems, enrich with domain information
-const enrichedData = isServiceLike
+// For services, external systems, and agents, enrich with domain information
+const enrichedData = isServiceOrAgentLike
   ? await Promise.all(
-      data.map(async (service: any) => {
-        const serviceDomains = await getDomainsForService(service);
+      data.map(async (resource: any) => {
+        const resourceDomains = isAgentLike ? await getDomainsForAgent(resource) : await getDomainsForService(resource);
         return {
-          ...service,
-          enrichedDomains: serviceDomains.map((d: any) => ({
+          ...resource,
+          enrichedDomains: resourceDomains.map((d: any) => ({
             id: d.data.id,
             name: d.data.name,
             version: d.data.version,
@@ -243,10 +260,12 @@ const tableData = enrichedData.map((d: any) => ({
   hasServices: type === 'domains' ? (d.data?.services || []).length > 0 : false,
   isSubdomain: type === 'domains' ? allSubdomainIds.has(d.data.id) : false,
   // Service-specific properties
-  domains: isServiceLike ? d.enrichedDomains : undefined,
+  domains: isServiceOrAgentLike ? d.enrichedDomains : undefined,
   hasSpecifications: isServiceLike ? hasSpecifications(d) : false,
-  hasRepository: isServiceLike ? !!d.data?.repository?.url : false,
-  hasDataDependencies: isServiceLike ? (d.data?.writesTo || []).length > 0 || (d.data?.readsFrom || []).length > 0 : false,
+  hasRepository: isServiceOrAgentLike ? !!d.data?.repository?.url : false,
+  hasDataDependencies: isServiceOrAgentLike ? (d.data?.writesTo || []).length > 0 || (d.data?.readsFrom || []).length > 0 : false,
+  hasModel: type === 'agents' ? !!d.data?.model : false,
+  hasTools: type === 'agents' ? (d.data?.tools || []).length > 0 : false,
   // Data-product-specific properties
   hasInputs: type === 'data-products' ? (d.data?.inputs || []).length > 0 : false,
   hasOutputs: type === 'data-products' ? (d.data?.outputs || []).length > 0 : false,
@@ -264,6 +283,9 @@ const tableData = enrichedData.map((d: any) => ({
     consumers: d.data?.consumers?.map(mapToItem) ?? [],
     receives: d.data?.receives?.map(mapToItem) ?? [],
     sends: d.data?.sends?.map(mapToItem) ?? [],
+    model: d.data?.model,
+    tools: d.data?.tools ?? [],
+    agents: d.data?.agents?.map(mapToItem) ?? [],
     services: d.data?.services?.map(mapToItem) ?? [],
     servicesThatWriteToContainer: d.data?.servicesThatWriteToContainer?.map(mapToItem) ?? [],
     servicesThatReadFromContainer: d.data?.servicesThatReadFromContainer?.map(mapToItem) ?? [],
@@ -279,21 +301,22 @@ const uniqueOwners = Array.from(new Map(tableData.flatMap((d: any) => d.owners |
 
 // Get unique producers (services) for message types
 // Check for duplicate names and add version if needed
-const servicesByName = new Map<string, typeof services>();
-services.forEach((s) => {
-  const name = s.data.name;
-  if (!servicesByName.has(name)) servicesByName.set(name, []);
-  servicesByName.get(name)!.push(s);
+const producerResources = [...agents, ...services];
+const resourcesByName = new Map<string, typeof producerResources>();
+producerResources.forEach((resource) => {
+  const name = resource.data.name;
+  if (!resourcesByName.has(name)) resourcesByName.set(name, []);
+  resourcesByName.get(name)!.push(resource);
 });
 
-const uniqueProducers = services
-  .map((s) => {
-    const hasDuplicateName = (servicesByName.get(s.data.name)?.length ?? 0) > 1;
-    const isLatest = s.data.version === s.data.latestVersion;
-    const versionLabel = isLatest ? 'latest' : `v${s.data.version}`;
+const uniqueProducers = producerResources
+  .map((resource) => {
+    const hasDuplicateName = (resourcesByName.get(resource.data.name)?.length ?? 0) > 1;
+    const isLatest = resource.data.version === resource.data.latestVersion;
+    const versionLabel = isLatest ? 'latest' : `v${resource.data.version}`;
     return {
-      id: s.data.id,
-      name: hasDuplicateName ? `${s.data.name} (${versionLabel})` : s.data.name,
+      id: resource.data.id,
+      name: hasDuplicateName ? `${resource.data.name} (${versionLabel})` : resource.data.name,
     };
   })
   .sort((a, b) => a.name.localeCompare(b.name));
@@ -312,8 +335,29 @@ const uniqueDomains = domains.map((d) => ({
   version: d.data.version,
 }));
 
+const uniqueAgentProviders = Array.from(
+  new Map(
+    tableData
+      .map((d: any) => d.data?.model?.provider)
+      .filter(Boolean)
+      .map((provider: string) => [provider, { id: provider, name: provider }])
+  ).values()
+).sort((a: any, b: any) => a.name.localeCompare(b.name));
+
+const uniqueAgentModels = Array.from(
+  new Map(
+    tableData
+      .map((d: any) => d.data?.model)
+      .filter((model: any) => model?.name)
+      .map((model: any) => {
+        const id = [model.name, model.version].filter(Boolean).join(':');
+        return [id, { id, name: model.name }];
+      })
+  ).values()
+).sort((a: any, b: any) => a.name.localeCompare(b.name));
+
 // Show domains filter only for services and external systems
-const showDomainsFilter = isServiceLike;
+const showDomainsFilter = isServiceOrAgentLike;
 
 const title = `${currentTypeConfig.label} (${data.length})`;
 ---
@@ -338,6 +382,8 @@ const title = `${currentTypeConfig.label} (${data.length})`;
         owners={uniqueOwners as Array<{ id: string; name: string; type?: 'user' | 'team' }>}
         producers={uniqueProducers}
         consumers={uniqueConsumers}
+        agentProviders={uniqueAgentProviders as Array<{ id: string; name: string }>}
+        agentModels={uniqueAgentModels as Array<{ id: string; name: string }>}
         propertyOptions={currentTypeConfig.propertyOptions}
         tableConfiguration={tableConfiguration}
         showDomainsFilter={showDomainsFilter}

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId].mdx.ts

@@ -9,6 +9,7 @@ import { getResourceDocs, getResourceDocsForResource, type ResourceCollection }
 import { filterMarkdownForAgents } from '@utils/llms';
 
 const supportedResourceCollections = new Set<ResourceCollection>([
+  'agents',
   'domains',
   'services',
   'events',

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/_index.data.ts

@@ -13,6 +13,7 @@ export class Page extends HybridPage {
     }
 
     const itemTypes: PageTypes[] = [
+      'agents',
       'events',
       'commands',
       'queries',

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/changelog/_index.data.ts

@@ -14,7 +14,7 @@ export class Page extends HybridPage {
 
     const { pageDataLoader } = await import('@utils/page-loaders/page-data-loader');
 
-    const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'containers'];
+    const itemTypes: PageTypes[] = ['agents', 'events', 'commands', 'queries', 'services', 'domains', 'flows', 'containers'];
     const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 
     return allItems.flatMap((items, index) =>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -29,7 +29,7 @@ import {
   ClockIcon,
 } from '@heroicons/react/24/outline';
 import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
-import { Box, Boxes, SquarePenIcon, DatabaseIcon, DatabaseZapIcon, ShieldCheckIcon, AlignLeft, Package } from 'lucide-react';
+import { Bot, Box, Boxes, SquarePenIcon, DatabaseIcon, DatabaseZapIcon, ShieldCheckIcon, AlignLeft, Package } from 'lucide-react';
 
 import { getSpecificationsForService } from '@utils/collections/services';
 import { resourceToCollectionMap, collectionToResourceMap, getDeprecatedDetails } from '@utils/collections/util';
@@ -73,9 +73,54 @@ const getContentBadges = () =>
     icon: badge.icon ? getIcon(badge.icon) : null,
   }));
 
-const createResourceBadge = (content: string, icon: any) => ({ content, icon, textColor: 'gray' });
+const createResourceBadge = (content: string, icon: any): any => ({ content, icon, textColor: 'gray' });
+
+const getAgentProviderIconURL = (provider: string) => {
+  const providerIconName = provider
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '');
+
+  return buildUrl(`/icons/agent/${providerIconName}.svg`, true);
+};
+
+const getAgentProviderIconURLs = (provider: string) => {
+  const providerIconName = provider
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '');
+
+  const hasThemedIcon = ['openai', 'anthropic'].includes(providerIconName);
+
+  return hasThemedIcon
+    ? {
+        iconURLLight: buildUrl(`/icons/agent/${providerIconName}-light.svg`, true),
+        iconURLDark: buildUrl(`/icons/agent/${providerIconName}-dark.svg`, true),
+      }
+    : {
+        iconURL: getAgentProviderIconURL(provider),
+      };
+};
 
 const getBadge = () => {
+  if (props.collection === 'agents') {
+    const badges = [createResourceBadge('Agent', Bot)];
+    if (props.data?.model?.provider) {
+      badges.push({
+        content: props.data.model.provider,
+        ...getAgentProviderIconURLs(props.data.model.provider),
+        textColor: 'gray',
+      });
+    }
+    const modelBadge = props.data?.model?.name;
+    if (modelBadge) {
+      badges.push(createResourceBadge(modelBadge, Bot));
+    }
+    return badges;
+  }
+
   if (props.collection === 'services') {
     return [createResourceBadge('Service', ServerIcon)];
   }

package/eventcatalog/src/pages/docs/[type]/[id]/[version].md.ts

@@ -11,6 +11,7 @@ import { isLLMSTxtEnabled } from '@utils/feature';
 import { filterMarkdownForAgents } from '@utils/llms';
 
 const events = await getCollection('events');
+const agents = await getCollection('agents');
 const commands = await getCollection('commands');
 const queries = await getCollection('queries');
 const services = await getCollection('services');
@@ -22,6 +23,7 @@ const containers = await getCollection('containers');
 const entities = await getEntities();
 
 const collections = {
+  agents,
   events,
   commands,
   queries,

package/eventcatalog/src/pages/docs/[type]/[id]/[version].mdx.ts

@@ -9,6 +9,7 @@ import fs from 'fs';
 import { addSchemaToMarkdown, filterMarkdownForAgents } from '@utils/llms';
 import { isLLMSTxtEnabled, isSSR } from '@utils/feature';
 const events = await getCollection('events');
+const agents = await getCollection('agents');
 const commands = await getCollection('commands');
 const queries = await getCollection('queries');
 const services = await getCollection('services');
@@ -22,6 +23,7 @@ const entities = await getCollection('entities');
 import utils from '@eventcatalog/sdk';
 
 const collections = {
+  agents,
   events,
   commands,
   queries,

package/eventcatalog/src/pages/docs/[type]/[id]/_index.data.ts

@@ -4,6 +4,7 @@ import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { isSSR } from '@utils/feature';
 
 const itemTypes: PageTypes[] = [
+  'agents',
   'events',
   'commands',
   'queries',

package/eventcatalog/src/pages/docs/llm/llms-full.txt.ts

@@ -5,6 +5,7 @@ import { isCustomDocsEnabled, isResourceDocsEnabled, isLLMSTxtEnabled } from '@u
 import { addSchemaToMarkdown, filterMarkdownForAgents } from '@utils/llms';
 
 type AllowedCollections =
+  | 'agents'
   | 'events'
   | 'commands'
   | 'queries'
@@ -24,6 +25,7 @@ type AllowedCollections =
 const events = await getCollection('events');
 const commands = await getCollection('commands');
 const queries = await getCollection('queries');
+const agents = await getCollection('agents');
 const services = await getCollection('services');
 const dataProducts = await getCollection('data-products');
 const domains = await getCollection('domains');
@@ -46,6 +48,7 @@ export const GET: APIRoute = async ({ params, request }) => {
     ...events,
     ...commands,
     ...queries,
+    ...agents,
     ...services,
     ...dataProducts,
     ...domains,

package/eventcatalog/src/pages/docs/llm/llms.txt.ts

@@ -10,6 +10,7 @@ const events = await getCollection('events');
 const commands = await getCollection('commands');
 const queries = await getCollection('queries');
 
+const agents = await getCollection('agents');
 const services = await getCollection('services');
 const dataProducts = await getCollection('data-products');
 const domains = await getCollection('domains');
@@ -140,6 +141,8 @@ export const GET: APIRoute = async ({ params, request }) => {
     commands.map((item) => formatVersionedItem(item, 'commands')).join(''),
     '\n## Queries',
     queries.map((item) => formatVersionedItem(item, 'queries')).join(''),
+    '\n## Agents',
+    agents.map((item) => formatVersionedItem(item, 'agents')).join(''),
     '\n## Services',
     services.map((item) => formatVersionedItem(item, 'services')).join(''),
     '\n## Data Products',

package/eventcatalog/src/pages/docs/teams/[id]/index.astro

@@ -23,6 +23,7 @@ const membersRaw = props.data.members || [];
 const members = (await Promise.all(membersRaw.map((m: CollectionEntry<'teams'>) => getEntry(m)))).filter(Boolean);
 
 const domains = props.data.ownedDomains as CollectionEntry<'domains'>[];
+const agents = props.data.ownedAgents as CollectionEntry<'agents'>[];
 const services = props.data.ownedServices as CollectionEntry<'services'>[];
 const events = props.data.ownedEvents as CollectionEntry<'events'>[];
 const commands = props.data.ownedCommands as CollectionEntry<'commands'>[];
@@ -51,6 +52,13 @@ const ownedServicesList = services.map((p) => ({
   tag: `v${p.data.version}`,
 }));
 
+const ownedAgentsList = agents.map((p) => ({
+  label: `${p.data.name}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  collection: p.collection,
+  tag: `v${p.data.version}`,
+}));
+
 const ownedMessagesList = [...events, ...commands, ...queries].map((p) => ({
   label: `${p.data.name}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
@@ -127,7 +135,7 @@ const pageTitle = `Team | ${props.data.name}`;
           </div>
         </div>
         <div class="border-b border-[rgb(var(--ec-page-border))] py-4" data-pagefind-ignore>
-          <dl class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <dl class="grid grid-cols-2 gap-3 sm:grid-cols-5">
             <div class="flex flex-col p-4 bg-[rgb(var(--ec-content-hover))] rounded-lg">
               <dt class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Domains</dt>
               <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedDomainsList.length}</dd>
@@ -136,6 +144,10 @@ const pageTitle = `Team | ${props.data.name}`;
               <dt class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Services</dt>
               <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedServicesList.length}</dd>
             </div>
+            <div class="flex flex-col p-4 bg-[rgb(var(--ec-content-hover))] rounded-lg">
+              <dt class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Agents</dt>
+              <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedAgentsList.length}</dd>
+            </div>
             <div class="flex flex-col p-4 bg-[rgb(var(--ec-content-hover))] rounded-lg">
               <dt class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Messages</dt>
               <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedMessagesList.length}</dd>
@@ -177,6 +189,17 @@ const pageTitle = `Team | ${props.data.name}`;
               />
             )
           }
+          {
+            ownedAgentsList.length > 0 && (
+              <PillListFlat
+                color="indigo"
+                title={`Owned agents (${ownedAgentsList.length})`}
+                pills={ownedAgentsList}
+                emptyMessage={`This team does not own any agents.`}
+                client:load
+              />
+            )
+          }
           {
             ownedMessagesList.length > 0 && (
               <PillListFlat

package/eventcatalog/src/pages/docs/users/[id]/index.astro

@@ -20,6 +20,7 @@ const props = await Page.getData(Astro);
 const { Content } = await render(props);
 
 const domains = props.data.ownedDomains as CollectionEntry<'domains'>[];
+const agents = props.data.ownedAgents as CollectionEntry<'agents'>[];
 const services = props.data.ownedServices as CollectionEntry<'services'>[];
 const events = props.data.ownedEvents as CollectionEntry<'events'>[];
 const commands = props.data.ownedCommands as CollectionEntry<'commands'>[];
@@ -40,6 +41,13 @@ const ownedServicesList = services.map((p) => ({
   tag: `v${p.data.version}`,
 }));
 
+const ownedAgentsList = agents.map((p) => ({
+  label: `${p.data.name}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  collection: p.collection,
+  tag: `v${p.data.version}`,
+}));
+
 const ownedMessageList = [...events, ...commands, ...queries].map((p) => ({
   label: `${p.data.name}`,
   badge: p.collection,
@@ -128,7 +136,7 @@ const pageTitle = `User | ${props.data.name}`;
           </div>
         </div>
         <div class="border-b border-[rgb(var(--ec-page-border))] py-4" data-pagefind-ignore>
-          <dl class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <dl class="grid grid-cols-2 gap-3 sm:grid-cols-5">
             <div class="flex flex-col p-4 bg-[rgb(var(--ec-content-hover))] rounded-lg">
               <dt class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Domains</dt>
               <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedDomainsList.length}</dd>
@@ -137,6 +145,10 @@ const pageTitle = `User | ${props.data.name}`;
               <dt class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Services</dt>
               <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedServicesList.length}</dd>
             </div>
+            <div class="flex flex-col p-4 bg-[rgb(var(--ec-content-hover))] rounded-lg">
+              <dt class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Agents</dt>
+              <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedAgentsList.length}</dd>
+            </div>
             <div class="flex flex-col p-4 bg-[rgb(var(--ec-content-hover))] rounded-lg">
               <dt class="text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">Messages</dt>
               <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedMessageList.length}</dd>
@@ -178,6 +190,17 @@ const pageTitle = `User | ${props.data.name}`;
               />
             )
           }
+          {
+            ownedAgentsList.length > 0 && (
+              <PillListFlat
+                color="indigo"
+                title={`Owned agents (${ownedAgentsList.length})`}
+                pills={ownedAgentsList}
+                emptyMessage={`${props.data.name} does not own any agents.`}
+                client:load
+              />
+            )
+          }
           {
             ownedMessageList.length > 0 && (
               <PillListFlat

package/eventcatalog/src/pages/visualiser/[type]/[id]/[version]/_index.data.ts

@@ -21,10 +21,11 @@ export class Page extends HybridPage {
     };
 
     const itemTypes: PageTypesWithFlows[] = [
+      'agents',
+      'services',
       'events',
       'commands',
       'queries',
-      'services',
       'domains',
       'flows',
       'containers',