@eventcatalog/core 4.10.15 → 4.11.1

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

@@ -1,6 +1,8 @@
 ---
 import type { PageTypes } from '@types';
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
+import components from '@components/MDX/components';
+import { getExampleEntriesForMessage, getExampleEntryDetails } from '@utils/collections/examples';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { Page } from './_index.data';
 import SchemaPageViewer from '@components/SchemaExplorer/SchemaPageViewer';
@@ -9,8 +11,24 @@ import { sortVersioned } from '@utils/collections/util';
 import { isEventCatalogScaleEnabled } from '@utils/feature';
 import { resourceFileExists, readResourceFile } from '@utils/resource-files';
 import path from 'node:path';
-import type { SchemaItem } from '@components/SchemaExplorer/types';
+import type { FlowUsage, SchemaItem } from '@components/SchemaExplorer/types';
 import { getExamplesForResource } from '@utils/collections/examples';
+import { getSchemaRelationshipReference } from '@components/SchemaExplorer/utils';
+import { getSchemaExtensionForFormat } from '@utils/collections/schemas';
+import { getFlowsForMessages } from '@utils/collections/flows';
+import { attachFlowGraphs, getMessageUsageGraph } from '@utils/schema-usage-graph';
+// Ships the visualiser CSS in the page head so it survives ClientRouter navigations (see NodeGraph.astro).
+import '@eventcatalog/visualiser/styles-core.css';
+
+/** Reduce hydrated resource entries to the details the schema page renders. */
+const toSchemaRelationships = (references: any[] | undefined) =>
+  (references ?? []).map((reference) => getSchemaRelationshipReference(reference));
+const toMessageChannels = (channels: any[] | undefined) =>
+  (channels ?? []).map((channel) => ({
+    id: channel.data.id,
+    version: channel.data.version,
+    ...(channel.data.name ? { name: channel.data.name } : {}),
+  }));
 
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
@@ -26,6 +44,14 @@ const contractPath = Astro.url.searchParams.get('contract') || (props as any).co
 
 let currentMessage: SchemaItem | null = null;
 let sortedVersions: SchemaItem[] = [];
+// Examples rendered through the MDX pipeline so they can use EventCatalog's components.
+let renderedExamples: {
+  fileName: string;
+  title: string;
+  summary?: string;
+  Content: Awaited<ReturnType<typeof render>>['Content'];
+}[] = [];
+let exampleComponents: ReturnType<typeof components> | undefined;
 let pageTitle = `${type} | ${data.name}`.replace(/^\w/, (c) => c.toUpperCase());
 
 if (isDataProduct && contractPath) {
@@ -79,6 +105,7 @@ if (isDataProduct && contractPath) {
   // Handle regular messages (events, commands, queries)
   const [allItems, schemaEntries] = await Promise.all([pageDataLoader[type](), getCollection('schemas')]);
   const versions = allItems.filter((item) => item.data.id === data.id);
+  const flowsByMessage = await getFlowsForMessages(versions);
   const schemasForMessage = schemaEntries.filter(
     (schema) => schema.data.message.collectionName === type && schema.data.message.id === data.id
   );
@@ -89,44 +116,81 @@ if (isDataProduct && contractPath) {
   };
 
   // Transform to SchemaItems
-  const availableVersions = versions
-    .map((message) => {
-      try {
-        const schema = getSchemaForVersion(message.data.version);
-        if (!schema) return null;
+  const availableVersions = (
+    await Promise.all(
+      versions.map(async (message) => {
+        try {
+          const schema = getSchemaForVersion(message.data.version);
+          const messageFlows: FlowUsage[] =
+            flowsByMessage.get(`${message.collection}:${message.data.id}:${message.data.version}`) ?? [];
+          if (!schema) return null;
 
-        const schemaPath = schema.data.file || schema.data.source.path || '';
-        const schemaExtension = path.extname(schemaPath).slice(1);
+          const schemaPath = schema.data.file || schema.data.source.path || '';
+          const schemaExtension = path.extname(schemaPath).slice(1) || getSchemaExtensionForFormat(schema.data.format);
 
-        return {
-          collection: message.collection,
-          data: {
-            id: message.data.id,
-            name: schema.data.message.name || message.data.name,
-            version: message.data.version,
-            summary: schema.data.message.summary || message.data.summary,
-            schemaPath,
-            // @ts-ignore
-            producers: message.data.producers || [],
-            // @ts-ignore
-            consumers: message.data.consumers || [],
-          },
-          schemaContent: schema.data.content || '',
-          schemaExtension,
-          examples: getExamplesForResource(message),
-        } as SchemaItem;
-      } catch (error) {
-        console.error(`Error reading schema for ${message.data.id}:`, error);
-        return null;
-      }
-    })
-    .filter((v): v is SchemaItem => v !== null);
+          return {
+            collection: message.collection,
+            data: {
+              id: message.data.id,
+              name: schema.data.message.name || message.data.name,
+              version: message.data.version,
+              summary: schema.data.message.summary || message.data.summary,
+              schemaPath,
+              // @ts-ignore
+              producers: toSchemaRelationships(message.data.producers),
+              // @ts-ignore
+              consumers: toSchemaRelationships(message.data.consumers),
+              flows: await (message.data.version === data.version
+                ? attachFlowGraphs(messageFlows, { id: message.data.id, version: message.data.version })
+                : messageFlows),
+              // @ts-ignore
+              channels: toMessageChannels(message.data.messageChannels),
+            },
+            schemaContent: schema.data.content || '',
+            schemaExtension,
+            ...(schema.data.name ? { schemaName: schema.data.name } : {}),
+            ...(schema.data.ref ? { schemaRef: schema.data.ref, source: schema.data.source } : {}),
+            examples: getExamplesForResource(message),
+            // Only the version being viewed needs the usage graph; other versions load their own page.
+            ...(message.data.version === data.version
+              ? {
+                  graph: await getMessageUsageGraph({
+                    collection: message.collection,
+                    id: message.data.id,
+                    version: message.data.version,
+                  }),
+                }
+              : {}),
+          } as SchemaItem;
+        } catch (error) {
+          console.error(`Error reading schema for ${message.data.id}:`, error);
+          return null;
+        }
+      })
+    )
+  ).filter((v): v is SchemaItem => v !== null);
 
   sortedVersions = sortVersioned(availableVersions, (item) => item.data.version);
   currentMessage = sortedVersions.find((v) => v.data.version === data.version) ?? null;
+
+  const messageEntry = versions.find((item) => item.data.version === data.version);
+  if (messageEntry?.filePath) {
+    const exampleEntries = getExampleEntriesForMessage(await getCollection('examples'), messageEntry.filePath);
+    const examplesDir = path.join(path.dirname(messageEntry.filePath), 'examples');
+    renderedExamples = await Promise.all(
+      exampleEntries.map(async (entry) => ({
+        ...getExampleEntryDetails(entry, examplesDir),
+        Content: (await render(entry)).Content,
+      }))
+    );
+    exampleComponents = components(messageEntry);
+  }
 }
 
 const apiAccessEnabled = isEventCatalogScaleEnabled();
+// Render the requested tab on the server so the page does not flash the default tab before hydration.
+// Static builds cannot see the query string, so the panel also restores the tab on the client.
+const initialTab = Astro.url.searchParams.get('tab') ?? undefined;
 ---
 
 <VerticalSideBarLayout title={pageTitle}>
@@ -134,11 +198,16 @@ const apiAccessEnabled = isEventCatalogScaleEnabled();
     :root[data-embedded='true'] #schema-detail-page {
       height: 100dvh !important;
     }
+    .react-flow__attribution {
+      display: none;
+    }
   </style>
-  {/* The schema viewer is an app-style surface: pull it out of the content gutter so it sits flush against the sidebar. */}
+  {
+    /* The schema viewer is an app-style surface: pull it out of the content gutter so it sits flush against the sidebar. The page scrolls normally; the embedded layout below pins it to the viewport instead. */
+  }
   <div
     id="schema-detail-page"
-    class="h-[calc(100vh-4rem)] overflow-hidden flex flex-col"
+    class="min-h-[calc(100vh-4rem)] flex flex-col"
     style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);"
   >
     {
@@ -148,9 +217,47 @@ const apiAccessEnabled = isEventCatalogScaleEnabled();
           message={currentMessage}
           availableVersions={sortedVersions}
           apiAccessEnabled={apiAccessEnabled}
-          showOwners={false}
-          showProducersConsumers={false}
-        />
+          showOwners={true}
+          showProducersConsumers={true}
+          initialTab={initialTab}
+          hasRenderedExamples={(currentMessage.examples?.length ?? 0) > 0}
+        >
+          {(currentMessage.examples?.length ?? 0) > 0 && (
+            <div slot="examples" class="divide-y divide-[rgb(var(--ec-page-border))]">
+              {currentMessage.examples?.map((example) => {
+                const rendered = renderedExamples.find((candidate) => candidate.fileName === example.fileName);
+                const Content = rendered?.Content;
+                return (
+                  <section
+                    id={`example-${example.fileName.replace(/[^a-zA-Z0-9]+/g, '-')}`}
+                    class="w-full pr-12 py-8 first:pt-0 last:pb-0"
+                  >
+                    {example.summary && <p class="mb-4 text-sm text-[rgb(var(--ec-page-text-muted))]">{example.summary}</p>}
+                    {Content ? (
+                      <div class="prose prose-sm max-w-none prose-h1:mt-0 prose-h1:text-4xl prose-h1:font-bold prose-h1:tracking-tight prose-headings:text-[rgb(var(--ec-page-text))] prose-p:text-[rgb(var(--ec-page-text-muted))] prose-li:text-[rgb(var(--ec-page-text-muted))] prose-strong:text-[rgb(var(--ec-page-text))] prose-a:text-[rgb(var(--ec-accent))] prose-blockquote:border-[rgb(var(--ec-page-border))] prose-hr:border-[rgb(var(--ec-page-border))]">
+                        <Content components={exampleComponents} />
+                      </div>
+                    ) : (
+                      <pre class="overflow-auto rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-code-bg))] p-5 text-sm">
+                        <code>{example.content}</code>
+                      </pre>
+                    )}
+                    {example.usage && (
+                      <div class="mt-5">
+                        <h3 class="mb-2 text-xs font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]">
+                          Usage
+                        </h3>
+                        <pre class="overflow-auto rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-code-bg))] p-5 text-sm">
+                          <code>{example.usage}</code>
+                        </pre>
+                      </div>
+                    )}
+                  </section>
+                );
+              })}
+            </div>
+          )}
+        </SchemaPageViewer>
       ) : (
         <div class="p-8 flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]">
           Schema not found or could not be loaded.

package/eventcatalog/src/pages/schemas/explorer/index.astro

@@ -3,6 +3,8 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import SchemaExplorer from '@components/SchemaExplorer/SchemaExplorer';
 import { isEventCatalogScaleEnabled } from '@utils/feature';
 import { Page } from './_index.data';
+// Ships the visualiser CSS in the page head for the Usage tab's node graph (see NodeGraph.astro).
+import '@eventcatalog/visualiser/styles-core.css';
 
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
@@ -14,6 +16,9 @@ const apiAccessEnabled = isEventCatalogScaleEnabled();
 
 <VerticalSideBarLayout title="Schema Explorer - EventCatalog" showNestedSideBar={false}>
   <style is:global>
+    .react-flow__attribution {
+      display: none;
+    }
     #eventcatalog-header {
       left: calc(var(--ec-vertical-nav-width, 14rem) + var(--ec-schema-sidebar-width, 360px)) !important;
     }

package/eventcatalog/src/plugins/empty-collection-warning.d.ts

@@ -0,0 +1,21 @@
+export const KNOWN_EVENTCATALOG_COLLECTIONS: ReadonlySet<string>;
+
+export function collectionNameFromEmptyWarning(message: string): string | null;
+
+export function isIntentionalEmptyCollectionMessage(message: string): boolean;
+
+export function isIntentionalEmptyCollectionLine(line: string): boolean;
+
+export interface QuietLoggerEvent {
+  level?: string;
+  label?: string | null;
+  message?: string;
+}
+
+export interface QuietLoggerDestination {
+  write: (event: QuietLoggerEvent) => void;
+  flush?: () => void;
+  close?: () => void;
+}
+
+export function wrapLoggerDestination<T extends QuietLoggerDestination>(destination: T): QuietLoggerDestination;

package/eventcatalog/src/plugins/empty-collection-warning.mjs

@@ -0,0 +1,107 @@
+/**
+ * Astro's getCollection() warns when a collection is missing from the content store:
+ * `The collection "<name>" does not exist or is empty. Please check your content config file for errors.`
+ *
+ * EventCatalog always defines every resource collection. A catalog that does not use a resource
+ * type leaves that collection empty, and Astro repeats the warning for every getCollection() call.
+ * That warning is noise. Schema failures, loader errors, and warnings for unknown collection
+ * names use different messages (or a collection name outside this set) and stay visible.
+ *
+ * Keep this set aligned with `export const collections` in content.config.ts.
+ */
+export const KNOWN_EVENTCATALOG_COLLECTIONS = new Set([
+  'events',
+  'commands',
+  'queries',
+  'examples',
+  'services',
+  'agents',
+  'adrs',
+  'channels',
+  'users',
+  'teams',
+  'domains',
+  'systems',
+  'flows',
+  'pages',
+  'changelogs',
+  'containers',
+  'data-products',
+  'ubiquitousLanguages',
+  'entities',
+  'customPages',
+  'resourceDocs',
+  'resourceDocCategories',
+  'designs',
+  'diagrams',
+  'schemas',
+  'sidebars',
+]);
+
+const EMPTY_COLLECTION_MESSAGE =
+  /^The collection ("(?:\\.|[^"\\])*") does not exist or is empty\. Please check your content config file for errors\.$/;
+
+const ANSI_PATTERN = /\u001B(?:[@-Z\\-_]|\[[0-?]*[ -/]*[@-~])/g;
+
+/**
+ * Timestamp text, then Astro's content logger prefix: `[WARN] [content]`.
+ * A `[WARN]` line from any other label, such as `[build]`, is not this warning.
+ */
+const ASTRO_CONTENT_WARN_PREFIX = /^[^[\]]*\[WARN\]\s+\[content\](?:\s+\[[^\]]+\])*\s*$/;
+
+export function collectionNameFromEmptyWarning(message) {
+  const match = message.match(EMPTY_COLLECTION_MESSAGE);
+  if (!match) return null;
+
+  try {
+    const name = JSON.parse(match[1]);
+    return typeof name === 'string' ? name : null;
+  } catch {
+    return null;
+  }
+}
+
+export function isIntentionalEmptyCollectionMessage(message) {
+  const name = collectionNameFromEmptyWarning(message);
+  return name !== null && KNOWN_EVENTCATALOG_COLLECTIONS.has(name);
+}
+
+/**
+ * Matches the warning as Astro prints it: a bare message, or the node/console logger line
+ * `<time> [WARN] [content] <message>`, including ANSI color on the prefix.
+ * The same sentence from another logger label, extra diagnostic text, and `[ERROR]` lines stay visible.
+ */
+export function isIntentionalEmptyCollectionLine(line) {
+  const plain = line.replace(ANSI_PATTERN, '').replace(/\r/g, '').trim();
+  const marker = 'The collection "';
+  const start = plain.indexOf(marker);
+  if (start === -1) return false;
+
+  const message = plain.slice(start).trim();
+  if (!isIntentionalEmptyCollectionMessage(message)) return false;
+
+  const before = plain.slice(0, start).trim();
+  return before.length === 0 || ASTRO_CONTENT_WARN_PREFIX.test(before);
+}
+
+export function wrapLoggerDestination(destination) {
+  return {
+    write(event) {
+      if (
+        event?.level === 'warn' &&
+        event?.label === 'content' &&
+        typeof event.message === 'string' &&
+        isIntentionalEmptyCollectionMessage(event.message)
+      ) {
+        return;
+      }
+      destination.write(event);
+    },
+    flush() {
+      return destination.flush?.();
+    },
+    close() {
+      return destination.close?.();
+    },
+  };
+}

package/eventcatalog/src/plugins/quiet-empty-collections-logger.mjs

@@ -0,0 +1,11 @@
+import nodeLogger from 'astro/logger/node';
+import { wrapLoggerDestination } from './empty-collection-warning.mjs';
+
+/**
+ * Astro logger destination used by EventCatalog builds and the dev server.
+ * Drops the empty-collection content warning for collections EventCatalog defines.
+ * Every other log event is written with Astro's default node logger.
+ */
+export default function quietEmptyCollectionsLogger(options) {
+  return wrapLoggerDestination(nodeLogger(options));
+}

package/eventcatalog/src/remark-plugins/code-group.ts

@@ -0,0 +1,39 @@
+type Node = {
+  type: string;
+  name?: string;
+  lang?: string;
+  meta?: string | null;
+  children?: Node[];
+  attributes?: { type: string; name: string; value: string }[];
+};
+
+/** Keep fenced code in the normal highlighting pipeline, with a panel per fence. */
+export function remarkCodeGroup() {
+  return (tree: Node) => {
+    const walk = (node: Node) => {
+      if (node.type === 'mdxJsxFlowElement' && node.name === 'CodeGroup') {
+        node.children = node.children?.map((child, index) => {
+          if (child.type !== 'code') return child;
+          const meta = child.meta?.trim() ?? '';
+          const explicit = meta.match(/(?:^|\s)title=(?:"([^"]*)"|'([^']*)')/);
+          const bare = meta.match(/^(?:"([^"]+)"|'([^']+)'|([^\s={}]+))(?=\s|$)/);
+          const label =
+            explicit?.[1] ?? explicit?.[2] ?? bare?.[1] ?? bare?.[2] ?? bare?.[3] ?? child.lang ?? `Code ${index + 1}`;
+          // Bare titles are Mintlify syntax; remove them before Expressive Code reads modifiers.
+          if (!explicit && bare) child.meta = meta.slice(bare[0].length).trim();
+          return {
+            type: 'mdxJsxFlowElement',
+            name: 'div',
+            attributes: [
+              { type: 'mdxJsxAttribute', name: 'data-code-panel', value: label },
+              ...(child.lang ? [{ type: 'mdxJsxAttribute', name: 'data-code-lang', value: child.lang }] : []),
+            ],
+            children: [child],
+          };
+        });
+      }
+      node.children?.forEach(walk);
+    };
+    walk(tree);
+  };
+}

package/eventcatalog/src/remark-plugins/markdown-code-group.ts

@@ -0,0 +1,59 @@
+type Node = {
+  type: string;
+  value?: string;
+  lang?: string;
+  meta?: string | null;
+  children?: Node[];
+  data?: Record<string, unknown>;
+};
+
+/** Recognize only CodeGroup wrappers in plain Markdown; never enable arbitrary HTML or JSX. */
+export function remarkMarkdownCodeGroup() {
+  return (tree: Node) => {
+    const walk = (parent: Node) => {
+      const children = parent.children;
+      if (!children) return;
+      for (let index = 0; index < children.length; index++) {
+        const opening = children[index].type === 'html' && children[index].value?.trim().match(/^<CodeGroup\b([^>]*)>$/);
+        if (!opening) {
+          walk(children[index]);
+          continue;
+        }
+        const end = children.findIndex(
+          (child, i) => i > index && child.type === 'html' && child.value?.trim() === '</CodeGroup>'
+        );
+        if (end === -1) continue;
+        const blocks = children.slice(index + 1, end);
+        if (!blocks.length || blocks.some((child) => child.type !== 'code')) continue;
+        const className = opening[1].match(/\bclassName=(?:"([^"]*)"|'([^']*)')/);
+        const dropdown = /(?:^|\s)dropdown(?:\s|$|=\{true\})/.test(opening[1]);
+        children.splice(index, end - index + 1, {
+          type: 'codeGroup',
+          data: {
+            hName: 'div',
+            hProperties: {
+              'data-code-group': 'true',
+              'data-dropdown': String(dropdown),
+              className: className?.[1] ?? className?.[2],
+            },
+          },
+          children: blocks.map((code, i) => {
+            const meta = code.meta?.trim() ?? '';
+            const title =
+              meta.match(/(?:^|\s)title=(?:"([^"]*)"|'([^']*)')/) ?? meta.match(/^(?:"([^"]+)"|'([^']+)'|([^\s={}]+))/);
+            const label = title?.[1] ?? title?.[2] ?? title?.[3] ?? code.lang ?? `Code ${i + 1}`;
+            return {
+              type: 'codeGroupPanel',
+              data: {
+                hName: 'div',
+                hProperties: { 'data-code-panel': label, ...(code.lang ? { 'data-code-lang': code.lang } : {}) },
+              },
+              children: [code],
+            };
+          }),
+        });
+      }
+    };
+    walk(tree);
+  };
+}

package/eventcatalog/src/remark-plugins/markdown-columns.ts

@@ -0,0 +1,66 @@
+type Node = {
+  type: string;
+  value?: string;
+  children?: Node[];
+  data?: Record<string, unknown>;
+};
+
+const tagPattern = /<\/?(?:Columns|Column)\b[^>]*>/g;
+const attribute = (attrs: string, name: string) =>
+  attrs
+    .match(new RegExp(`\\b${name}=(?:"([^"]*)"|'([^']*)'|\\{([\\d.]+)\\})`))
+    ?.slice(1)
+    .find((value) => value !== undefined);
+
+/** Support the layout tags in Markdown without evaluating JSX or allowing arbitrary HTML. */
+export function remarkMarkdownColumns() {
+  return (tree: Node) => {
+    const walk = (parent: Node) => {
+      if (!parent.children) return;
+      // Markdown may put adjacent opening/closing tags in the same HTML node.
+      const children = parent.children.flatMap((node) => {
+        if (node.type !== 'html' || !node.value || node.value.replace(tagPattern, '').trim()) return [node];
+        return Array.from(node.value.matchAll(tagPattern), ([value]) => ({ type: 'html', value }));
+      });
+      parent.children = children;
+      for (let i = 0; i < children.length; i++) {
+        const opening = children[i].type === 'html' && children[i].value?.trim().match(/^<(Columns|Column)\b([^>]*)>$/);
+        if (!opening) {
+          walk(children[i]);
+          continue;
+        }
+        const name = opening[1];
+        let depth = 1;
+        let end = i + 1;
+        for (; end < children.length; end++) {
+          if (children[end].type !== 'html') continue;
+          const value = children[end].value?.trim();
+          if (value?.match(new RegExp(`^<${name}\\b[^>]*>$`))) depth++;
+          if (value === `</${name}>` && --depth === 0) break;
+        }
+        if (end === children.length) continue;
+        const attrs = opening[2];
+        const wrapper: Node = {
+          type: 'columnLayout',
+          data: {
+            hName: 'div',
+            hProperties: {
+              ...(name === 'Columns'
+                ? {
+                    'data-columns': 'true',
+                    'data-cols': attribute(attrs, 'cols') ?? '2',
+                    'data-ratio': attribute(attrs, 'ratio'),
+                  }
+                : { 'data-column': 'true', 'data-sticky': String(/(?:^|\s)sticky(?:\s|$|=\{true\})/.test(attrs)) }),
+              className: attribute(attrs, 'className'),
+            },
+          },
+          children: children.slice(i + 1, end),
+        };
+        walk(wrapper);
+        children.splice(i, end - i + 1, wrapper);
+      }
+    };
+    walk(tree);
+  };
+}

package/eventcatalog/src/utils/collections/channels.ts

@@ -118,11 +118,15 @@ export const getChannels = async ({ getAllVersions = true }: Props = {}): Promis
 
 // Could be recursive, we need to keep going until we find a loop or until we reach the target channel
 export const isChannelsConnected = (
-  sourceChannel: CollectionEntry<'channels'>,
-  targetChannel: CollectionEntry<'channels'>,
+  sourceChannel: CollectionEntry<'channels'> | undefined,
+  targetChannel: CollectionEntry<'channels'> | undefined,
   channels: CollectionEntry<'channels'>[],
   visited: Set<string> = new Set()
 ) => {
+  if (!sourceChannel?.data || !targetChannel?.data) {
+    return false;
+  }
+
   // Create a unique key for this channel (id + version to handle multiple versions)
   const channelKey = `${sourceChannel.data.id}:${sourceChannel.data.version}`;
 
@@ -159,10 +163,14 @@ export const isChannelsConnected = (
 
 // Go from the source to the target channel and return the channel chain
 export const getChannelChain = (
-  sourceChannel: CollectionEntry<'channels'>,
-  targetChannel: CollectionEntry<'channels'>,
+  sourceChannel: CollectionEntry<'channels'> | undefined,
+  targetChannel: CollectionEntry<'channels'> | undefined,
   channels: CollectionEntry<'channels'>[]
 ): CollectionEntry<'channels'>[] => {
+  if (!sourceChannel?.data || !targetChannel?.data) {
+    return [];
+  }
+
   // Base case: we've reached the target channel
   if (sourceChannel.data.id === targetChannel.data.id && sourceChannel.data.version === targetChannel.data.version) {
     return [sourceChannel];