@eventcatalog/core 3.48.4 → 4.0.0-beta.1

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

@@ -0,0 +1,85 @@
+---
+import Footer from '@layouts/Footer.astro';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+import {
+  SystemResourcesTable,
+  type SystemResourceItem,
+  type SystemResourceCollection,
+} from '@components/Tables/SystemResources/SystemResourcesTable';
+
+import { Page } from './_index.data';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+const resourceOwner = await Page.getData(Astro);
+const { data } = resourceOwner;
+const ownerCollection = resourceOwner.collection as 'systems' | 'domains';
+
+// Domain-level messages come from the domain's own `sends` (Domain Events) and
+// `receives` (External Events). Each resolved entry already carries its own
+// collection (events / commands / queries). Dedupe across sends + receives.
+const messageEntries = (() => {
+  const seen = new Map<string, any>();
+  for (const message of [...(data.sends || []), ...(data.receives || [])]) {
+    if (!message?.data?.id || !message?.collection) continue;
+    seen.set(`${message.collection}:${message.data.id}:${message.data.version}`, message);
+  }
+  return Array.from(seen.values());
+})();
+
+const messagesByCollection = (collection: SystemResourceCollection) =>
+  messageEntries.filter((message: any) => message.collection === collection);
+
+// Only show resources that are directly attached to the system/domain — not resources
+// nested further downstream. Domains can't hold containers directly, so a domain's
+// Resources page shows services, flows, entities and its own messages.
+const resourceGroups: Array<{ collection: SystemResourceCollection; items: any[] }> = [
+  { collection: 'services', items: data.services || [] },
+  { collection: 'flows', items: data.flows || [] },
+  { collection: 'entities', items: data.entities || [] },
+  { collection: 'containers', items: data.containers || [] },
+  { collection: 'events', items: messagesByCollection('events') },
+  { collection: 'commands', items: messagesByCollection('commands') },
+  { collection: 'queries', items: messagesByCollection('queries') },
+];
+
+const hrefForResource = (collection: SystemResourceCollection, id: string, version: string) => {
+  if (collection === 'entities') {
+    return buildUrl(`/docs/entities/${id}/${version}`);
+  }
+  return buildUrl(`/docs/${collection}/${id}/${version}`);
+};
+
+const resources: SystemResourceItem[] = resourceGroups.flatMap(({ collection, items }) =>
+  items.map((item: any) => ({
+    collection,
+    id: item.data.id,
+    name: item.data.name || item.data.id,
+    version: item.data.version,
+    summary: item.data.summary,
+    icon: item.data?.styles?.icon,
+    href: hrefForResource(collection, item.data.id, item.data.version),
+  }))
+);
+---
+
+<VerticalSideBarLayout title={`${data.name} | Resources`}>
+  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]">
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
+        <div class="border-b border-[rgb(var(--ec-page-border))] pb-4">
+          <h2 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{data.name} Resources</h2>
+          <h2 class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">
+            A group of resources that are mapped to the {data.name} {ownerCollection === 'domains' ? 'domain' : 'system'}.
+          </h2>
+        </div>
+
+        <div class="py-8 w-full">
+          <SystemResourcesTable resources={resources} client:only="react" />
+        </div>
+      </div>
+    </div>
+  </main>
+</VerticalSideBarLayout>

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

@@ -17,6 +17,7 @@ const queries = await getCollection('queries');
 const services = await getCollection('services');
 const dataProducts = await getCollection('data-products');
 const domains = await getCollection('domains');
+const systems = await getCollection('systems');
 const flows = await getCollection('flows');
 const channels = await getCollection('channels');
 const containers = await getCollection('containers');
@@ -30,6 +31,7 @@ const collections = {
   services,
   'data-products': dataProducts,
   domains,
+  systems,
   flows,
   channels,
   containers,

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

@@ -15,6 +15,7 @@ const queries = await getCollection('queries');
 const services = await getCollection('services');
 const dataProducts = await getCollection('data-products');
 const domains = await getCollection('domains');
+const systems = await getCollection('systems');
 const flows = await getCollection('flows');
 const channels = await getCollection('channels');
 const containers = await getCollection('containers');
@@ -30,6 +31,7 @@ const collections = {
   services,
   'data-products': dataProducts,
   domains,
+  systems,
   flows,
   channels,
   containers,

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

@@ -10,6 +10,7 @@ const itemTypes: PageTypes[] = [
   'queries',
   'services',
   'domains',
+  'systems',
   'flows',
   'channels',
   'entities',

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

@@ -25,6 +25,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 systems = props.data.ownedSystems as CollectionEntry<'systems'>[];
 const agents = props.data.ownedAgents as CollectionEntry<'agents'>[];
 const services = props.data.ownedServices as CollectionEntry<'services'>[];
 const events = props.data.ownedEvents as CollectionEntry<'events'>[];
@@ -48,6 +49,13 @@ const ownedDomainsList = domains.map((p) => ({
   tag: `v${p.data.version}`,
 }));
 
+const ownedSystemsList = systems.map((p) => ({
+  label: `${p.data.name}`,
+  collection: p.collection,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  tag: `v${p.data.version}`,
+}));
+
 const ownedServicesList = services.map((p) => ({
   label: `${p.data.name}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
@@ -175,11 +183,15 @@ const sourceTitle = sourceLabel ? `Synced from ${sourceLabel}` : undefined;
           </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-6">
+          <dl class="grid grid-cols-2 gap-3 sm:grid-cols-7">
             <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>
             </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))]">Systems</dt>
+              <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedSystemsList.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))]">Services</dt>
               <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedServicesList.length}</dd>
@@ -222,6 +234,17 @@ const sourceTitle = sourceLabel ? `Synced from ${sourceLabel}` : undefined;
               />
             )
           }
+          {
+            ownedSystemsList.length > 0 && (
+              <PillListFlat
+                color="pink"
+                title={`Owned systems (${ownedSystemsList.length})`}
+                pills={ownedSystemsList}
+                emptyMessage={`${props.data.name} does not own any systems.`}
+                client:load
+              />
+            )
+          }
           {
             ownedServicesList.length > 0 && (
               <PillListFlat

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

@@ -22,6 +22,7 @@ const props = await Page.getData(Astro);
 const { Content } = await render(props);
 
 const domains = props.data.ownedDomains as CollectionEntry<'domains'>[];
+const systems = props.data.ownedSystems as CollectionEntry<'systems'>[];
 const agents = props.data.ownedAgents as CollectionEntry<'agents'>[];
 const services = props.data.ownedServices as CollectionEntry<'services'>[];
 const events = props.data.ownedEvents as CollectionEntry<'events'>[];
@@ -37,6 +38,13 @@ const ownedDomainsList = domains.map((p) => ({
   tag: `v${p.data.version}`,
 }));
 
+const ownedSystemsList = systems.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 ownedServicesList = services.map((p) => ({
   label: `${p.data.name}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
@@ -181,11 +189,15 @@ const sourceTitle = sourceLabel ? `Synced from ${sourceLabel}` : undefined;
           </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-6">
+          <dl class="grid grid-cols-2 gap-3 sm:grid-cols-7">
             <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>
             </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))]">Systems</dt>
+              <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedSystemsList.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))]">Services</dt>
               <dd class="text-2xl font-semibold text-[rgb(var(--ec-page-text))] mt-1">{ownedServicesList.length}</dd>
@@ -228,6 +240,17 @@ const sourceTitle = sourceLabel ? `Synced from ${sourceLabel}` : undefined;
               />
             )
           }
+          {
+            ownedSystemsList.length > 0 && (
+              <PillListFlat
+                color="pink"
+                title={`Owned systems (${ownedSystemsList.length})`}
+                pills={ownedSystemsList}
+                emptyMessage={`${props.data.name} does not own any systems.`}
+                client:load
+              />
+            )
+          }
           {
             ownedServicesList.length > 0 && (
               <PillListFlat

package/eventcatalog/src/pages/index.astro

@@ -1,5 +1,4 @@
 ---
-import Footer from '@layouts/Footer.astro';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { getMDXComponentsByName } from '@utils/markdown';
 import { resourceToCollectionMap } from '@utils/collections/util';
@@ -9,6 +8,7 @@ import DefaultAstroLandingPage from './_index.astro';
 import config from '@config';
 
 let nodeGraphs: any[] = [];
+let systemContextMaps: any[] = [];
 let CustomContent = null;
 let NodeGraph = null;
 let customHomepageComponents: Record<string, any> = {};
@@ -34,9 +34,12 @@ if (existsSync(pathToUserDefinedLandingPage) && isCustomLandingPageEnabled()) {
   const rawContent = readFileSync(pathToUserDefinedLandingPage, 'utf-8');
   nodeGraphs = getMDXComponentsByName(rawContent, 'NodeGraph') || [];
 
+  // The homepage can also embed the global System Context Map via <SystemContextMap />.
+  systemContextMaps = getMDXComponentsByName(rawContent, 'SystemContextMap') || [];
+
   // Avoid pulling visualizer CSS into the default homepage bundle.
-  // Only load the NodeGraph component when the custom homepage actually uses it.
-  if (nodeGraphs.length > 0) {
+  // Only load the NodeGraph component when the custom homepage actually uses a graph.
+  if (nodeGraphs.length > 0 || systemContextMaps.length > 0) {
     NodeGraph = (await import('@components/MDX/NodeGraph/NodeGraph.astro')).default;
   }
 }
@@ -48,14 +51,13 @@ if (config.landingPage) {
 
 {
   CustomContent ? (
-    <VerticalSideBarLayout title="EventCatalog">
-      <main class="flex sm:px-8 docs-layout h-full">
+    <VerticalSideBarLayout title="EventCatalog" reducedContentPadding>
+      <main class="flex docs-layout h-full">
         <div class="flex docs-layout w-full">
-          <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
+          <div class="w-full overflow-y-auto py-8">
             <div class="w-full max-w-none!">
               <CustomContent components={customHomepageComponents} />
             </div>
-            <Footer />
           </div>
         </div>
         {NodeGraph &&
@@ -81,6 +83,27 @@ if (config.landingPage) {
               />
             );
           })}
+        {NodeGraph &&
+          systemContextMaps.length > 0 &&
+          systemContextMaps.map(() => (
+            <NodeGraph
+              id="system-context-map"
+              version="1.0.0"
+              collection="system-context-map"
+              title="System context map"
+              mode="simple"
+              linksToVisualiser={true}
+              portalId="system-context-map-portal"
+              href={
+                isVisualiserEnabled()
+                  ? {
+                      label: 'Open in Visualiser',
+                      url: buildUrl('/visualiser/system-context-map'),
+                    }
+                  : undefined
+              }
+            />
+          ))}
       </main>
     </VerticalSideBarLayout>
   ) : (

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

@@ -30,6 +30,7 @@ export class Page extends HybridPage {
       'flows',
       'containers',
       'data-products',
+      'systems',
     ];
     const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 

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

@@ -24,7 +24,7 @@ const {
     <div
       class="h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
       id={`${id}-portal`}
-      transition:animate="fade"
+      transition:name="visualiser-graph"
     >
     </div>
     <NodeGraph

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

@@ -18,6 +18,7 @@ import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/node-graph
 import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForDataProduct } from '@utils/node-graphs/data-products-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForSystem } from '@utils/node-graphs/systems-node-graph';
 import { convertToMermaid } from '@utils/node-graphs/export-mermaid';
 import config from '@config';
 import type { PageTypes } from '@types';
@@ -36,6 +37,7 @@ const getNodesAndEdgesFunctions = {
   flows: getNodesAndEdgesForFlows,
   containers: getNodesAndEdgesForContainer,
   'data-products': getNodesAndEdgesForDataProduct,
+  systems: getNodesAndEdgesForSystem,
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {
@@ -59,6 +61,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
     'flows',
     'containers',
     'data-products',
+    'systems',
   ];
 
   const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/systems-context/_index.data.ts

@@ -0,0 +1,94 @@
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { isAuthEnabled, isVisualiserEnabled } from '@utils/feature';
+import { getDomains } from '@utils/collections/domains';
+import { getSystems } from '@utils/collections/systems';
+
+/**
+ * A domain gets a System Diagram when it has systems and at least one of those
+ * systems takes part in a context graph — i.e. it declares relationships or actors. A
+ * domain whose systems have neither has nothing to show, so we don't generate a page.
+ */
+const domainHasSystemContext = (
+  domain: Awaited<ReturnType<typeof getDomains>>[number],
+  systemMap: Map<string, { data: { relationships?: unknown[]; actors?: unknown[] } }>
+) => {
+  const systemRefs = (domain.data.systems || []) as { id: string }[];
+  if (systemRefs.length === 0) return false;
+
+  return systemRefs.some((ref) => {
+    const system = systemMap.get(ref.id);
+    if (!system) return false;
+    const relationships = (system.data.relationships || []) as unknown[];
+    const actors = (system.data.actors || []) as unknown[];
+    return relationships.length > 0 || actors.length > 0;
+  });
+};
+
+export class Page extends HybridPage {
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isAuthEnabled() || !isVisualiserEnabled()) {
+      return [];
+    }
+
+    const [domains, systems] = await Promise.all([getDomains({ getAllVersions: false }), getSystems()]);
+    const systemMap = new Map(systems.map((system) => [system.data.id, system]));
+
+    return domains
+      .filter((domain) => domainHasSystemContext(domain, systemMap))
+      .map((domain) => ({
+        params: {
+          id: domain.data.id,
+          version: domain.data.version,
+        },
+        props: {
+          type: 'domains',
+          ...domain,
+        },
+      }));
+  }
+
+  protected static async fetchData(params: any) {
+    const { id, version } = params;
+
+    if (!id || !version || !isVisualiserEnabled()) {
+      return null;
+    }
+
+    const domains = await getDomains({ getAllVersions: false });
+    const item = domains.find((i) => i.data.id === id && i.data.version === version);
+
+    if (!item) {
+      return null;
+    }
+
+    return item;
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'Domain System Diagram page not found',
+    });
+  }
+
+  static get clientAuthScript(): string {
+    if (!isAuthEnabled() || !isVisualiserEnabled()) {
+      return '';
+    }
+
+    return `
+      if (typeof window !== 'undefined' && !import.meta.env.SSR) {
+        fetch('/api/auth/session')
+          .then(res => res.json())
+          .then(session => {
+            if (!session?.user) {
+              window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+            }
+          })
+          .catch(() => {
+            window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+          });
+      }
+    `;
+  }
+}

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/systems-context/index.astro

@@ -0,0 +1,51 @@
+---
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import VisualiserLayout from '@layouts/VisualiserLayout.astro';
+import { ClientRouter } from 'astro:transitions';
+
+import { Page } from './_index.data';
+
+export const prerender = Page.prerender;
+export const getStaticPaths = Page.getStaticPaths;
+
+// Get data
+const props = await Page.getData(Astro);
+
+const {
+  data: { id },
+} = props;
+---
+
+<VisualiserLayout title={`Visualiser | ${props.data.name} - System Context`} description={props.data.summary}>
+  <div class="p-2">
+    <div
+      class="h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
+      id={`${id}-portal`}
+      transition:name="visualiser-graph"
+    >
+    </div>
+    <NodeGraph
+      id={id}
+      collection="domains-systems-context"
+      title={`${props.data.name} (v${props.data.version}) - System Context`}
+      mode="full"
+      linkTo="visualiser"
+      version={props.data.version}
+      linksToVisualiser={false}
+    />
+  </div>
+  <ClientRouter />
+</VisualiserLayout>
+
+<script define:vars={{ id }}>
+  document.addEventListener('DOMContentLoaded', () => {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const embeded = params.embed === 'true' ? true : false;
+    const viewport = document.getElementById(`${id}-portal`);
+
+    if (embeded) {
+      viewport.style.height = 'calc(100vh - 30px)';
+    }
+  });
+</script>

package/eventcatalog/src/pages/visualiser/system-context-map/index.astro

@@ -0,0 +1,41 @@
+---
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import VisualiserLayout from '@layouts/VisualiserLayout.astro';
+import { ClientRouter } from 'astro:transitions';
+
+const id = 'system-context-map';
+---
+
+<VisualiserLayout title={`Visualiser | System context map`}>
+  <div class="p-2">
+    <div
+      class="h-[calc(100vh-5rem)] w-full relative border border-[rgb(var(--ec-page-border))]"
+      id={`${id}-portal`}
+      transition:name="visualiser-graph"
+    >
+    </div>
+    <NodeGraph
+      id={id}
+      collection="system-context-map"
+      title="System context map"
+      mode="full"
+      linkTo="visualiser"
+      version="1.0.0"
+      linksToVisualiser={false}
+    />
+  </div>
+  <ClientRouter />
+</VisualiserLayout>
+
+<script define:vars={{ id }}>
+  document.addEventListener('DOMContentLoaded', () => {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const embeded = params.embed === 'true' ? true : false;
+    const viewport = document.getElementById(`${id}-portal`);
+
+    if (embeded && viewport) {
+      viewport.style.height = 'calc(100vh - 30px)';
+    }
+  });
+</script>

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

@@ -0,0 +1,91 @@
+import { HybridPage } from '@utils/page-loaders/hybrid-page';
+import { isAuthEnabled, isVisualiserEnabled } from '@utils/feature';
+import { getSystems } from '@utils/collections/systems';
+
+/**
+ * A system participates in the System Diagram if it declares relationships
+ * (to other systems) or actors, or if another system declares a relationship
+ * pointing at it. Systems with nothing on any side have nothing to show, so we
+ * don't generate a page for them.
+ */
+const buildSystemsInContextGraph = (systems: Awaited<ReturnType<typeof getSystems>>) => {
+  const referenced = new Set<string>();
+
+  for (const system of systems) {
+    const relationships = (system.data.relationships || []) as { id: string }[];
+    const actors = (system.data.actors || []) as { id: string }[];
+    if (relationships.length > 0 || actors.length > 0) referenced.add(system.data.id);
+    for (const relationship of relationships) {
+      referenced.add(relationship.id);
+    }
+  }
+
+  return systems.filter((system) => referenced.has(system.data.id));
+};
+
+export class Page extends HybridPage {
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isAuthEnabled() || !isVisualiserEnabled()) {
+      return [];
+    }
+
+    const systems = await getSystems();
+    const systemsInContext = buildSystemsInContextGraph(systems);
+
+    return systemsInContext.map((system) => ({
+      params: {
+        id: system.data.id,
+        version: system.data.version,
+      },
+      props: {
+        type: 'systems',
+        ...system,
+      },
+    }));
+  }
+
+  protected static async fetchData(params: any) {
+    const { id, version } = params;
+
+    if (!id || !version || !isVisualiserEnabled()) {
+      return null;
+    }
+
+    const systems = await getSystems();
+    const item = systems.find((i) => i.data.id === id && i.data.version === version);
+
+    if (!item) {
+      return null;
+    }
+
+    return item;
+  }
+
+  protected static createNotFoundResponse(): Response {
+    return new Response(null, {
+      status: 404,
+      statusText: 'System Diagram page not found',
+    });
+  }
+
+  static get clientAuthScript(): string {
+    if (!isAuthEnabled() || !isVisualiserEnabled()) {
+      return '';
+    }
+
+    return `
+      if (typeof window !== 'undefined' && !import.meta.env.SSR) {
+        fetch('/api/auth/session')
+          .then(res => res.json())
+          .then(session => {
+            if (!session?.user) {
+              window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+            }
+          })
+          .catch(() => {
+            window.location.href = '/auth/login?callbackUrl=' + encodeURIComponent(window.location.pathname);
+          });
+      }
+    `;
+  }
+}