@eventcatalog/core 4.12.3 → 5.0.0-beta.0

package/eventcatalog/src/pages/settings/assistant.astro

@@ -3,7 +3,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import SettingsLayout from '@layouts/SettingsLayout.astro';
 import { AssistantSettingsForm } from '@components/Settings/AssistantSettingsForm';
-import { isDevMode, isSSR, isEventCatalogStarterEnabled, isEventCatalogScaleEnabled } from '@utils/feature';
+import { isDevMode, isSSR } from '@utils/feature';
 import { buildUrl } from '@utils/url-builder';
 import config from '@config';
 
@@ -16,9 +16,8 @@ const initial = {
 
 const projectRoot = process.env.PROJECT_DIR ?? process.cwd();
 const hasChatConfigFile = fs.existsSync(path.join(projectRoot, 'eventcatalog.chat.js'));
-const hasPlan = isEventCatalogStarterEnabled() || isEventCatalogScaleEnabled();
 const inSSR = isSSR();
-const chatAvailable = hasPlan && hasChatConfigFile && inSSR;
+const chatAvailable = hasChatConfigFile && inSSR;
 
 const apiBase = buildUrl('/api/settings');
 ---
@@ -29,7 +28,6 @@ const apiBase = buildUrl('/api/settings');
     canEdit={canEdit}
     initial={initial}
     chatAvailable={chatAvailable}
-    hasPlan={hasPlan}
     inSSR={inSSR}
     hasChatConfigFile={hasChatConfigFile}
     apiBase={apiBase}

package/eventcatalog/src/pages/settings/license.astro

@@ -0,0 +1,18 @@
+---
+import SettingsLayout from '@layouts/SettingsLayout.astro';
+import { LicenseSettings, type LicenseProps } from '@components/Settings/LicenseSettings';
+import catalog from '@utils/eventcatalog-config/catalog';
+import { getLicenseStatus } from '@utils/license';
+
+const status = await getLicenseStatus();
+// Dates as unix ms, so the page can count the days left in the browser (it's prerendered in static builds)
+const license: LicenseProps =
+  status.state === 'licensed' || status.state === 'expired'
+    ? { ...status, issuedAt: status.issuedAt?.getTime(), expiresAt: status.expiresAt?.getTime() }
+    : status;
+const trialStartedAt = typeof catalog?.tsd === 'number' ? catalog.tsd : undefined;
+---
+
+<SettingsLayout title="License" active="license">
+  <LicenseSettings client:load license={license} trialStartedAt={trialStartedAt} renderedAt={Date.now()} />
+</SettingsLayout>

package/eventcatalog/src/pages/settings/llm-access.astro

@@ -1,7 +1,7 @@
 ---
 import SettingsLayout from '@layouts/SettingsLayout.astro';
 import { LlmAccessSettingsForm } from '@components/Settings/LlmAccessSettingsForm';
-import { isDevMode, isEventCatalogScaleEnabled } from '@utils/feature';
+import { isDevMode } from '@utils/feature';
 import { buildUrl } from '@utils/url-builder';
 import config from '@config';
 
@@ -12,8 +12,6 @@ const initial = {
   chatEnabled: config?.chat?.enabled ?? true,
 };
 
-const hasScalePlan = isEventCatalogScaleEnabled();
-
 const apiBase = buildUrl('/api/settings');
 const llmsTxtUrl = buildUrl('/llms.txt');
 const llmsFullTxtUrl = buildUrl('/llms-full.txt');
@@ -25,7 +23,6 @@ const schemasTxtUrl = buildUrl('/docs/llm/schemas.txt');
     client:load
     canEdit={canEdit}
     initial={initial}
-    hasScalePlan={hasScalePlan}
     apiBase={apiBase}
     llmsTxtUrl={llmsTxtUrl}
     llmsFullTxtUrl={llmsFullTxtUrl}

package/eventcatalog/src/pages/settings/mcp.astro

@@ -1,14 +1,43 @@
 ---
 import SettingsLayout from '@layouts/SettingsLayout.astro';
-import { McpSettingsForm } from '@components/Settings/McpSettingsForm';
-import { isSSR, isEventCatalogScaleEnabled } from '@utils/feature';
+import { McpSettingsForm, type DomainMcpServer } from '@components/Settings/McpSettingsForm';
+import { getDomains } from '@utils/collections/domains';
+import { resolveMcpScope } from '@features/mcp/mcp-scope';
+import { isSSR } from '@utils/feature';
 import { buildUrl } from '@utils/url-builder';
 
-const hasScalePlan = isEventCatalogScaleEnabled();
 const inSSR = isSSR();
 const mcpUrl = buildUrl('/docs/mcp');
+
+// Each domain has its own MCP server, scoped to the domain and the resources in it (latest version)
+const domains = await getDomains({ getAllVersions: false });
+// What each domain's MCP server serves: the resources in its scope
+const countScope = async (id: string) => {
+  try {
+    const scope = await resolveMcpScope({ kind: 'domain', id });
+    return {
+      services: scope.list('services').length,
+      messages: ['events', 'commands', 'queries'].reduce((count, collection) => count + scope.list(collection).length, 0),
+    };
+  } catch {
+    return { services: 0, messages: 0 };
+  }
+};
+
+const domainServers: DomainMcpServer[] = (
+  await Promise.all(
+    domains.map(async (domain) => ({
+      id: domain.data.id,
+      name: domain.data.name,
+      summary: domain.data.summary,
+      ...(await countScope(domain.data.id)),
+      docsUrl: buildUrl(`/docs/domains/${domain.data.id}/${domain.data.version}`),
+      url: buildUrl(`/docs/mcp/domains/${encodeURIComponent(domain.data.id)}`, true),
+    }))
+  )
+).sort((a, b) => a.name.localeCompare(b.name));
 ---
 
 <SettingsLayout title="MCP" active="mcp">
-  <McpSettingsForm client:load hasScalePlan={hasScalePlan} inSSR={inSSR} mcpUrl={mcpUrl} />
+  <McpSettingsForm client:load inSSR={inSSR} mcpUrl={mcpUrl} domainServers={domainServers} />
 </SettingsLayout>

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

@@ -26,12 +26,11 @@ export class Page extends HybridPage {
       'events',
       'commands',
       'queries',
-      'domains',
       'flows',
       'containers',
       'channels',
       'data-products',
-      'systems',
+      // systems and domains have their own pages (pages/visualiser/systems|domains/[id]/[version])
     ];
     const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 

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

@@ -1,8 +1,5 @@
 ---
-import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
-import VisualiserLayout from '@layouts/VisualiserLayout.astro';
 import { buildUrl } from '@utils/url-builder';
-import { ClientRouter } from 'astro:transitions';
 
 import { Page } from './_index.data';
 
@@ -12,46 +9,6 @@ export const getStaticPaths = Page.getStaticPaths;
 // Get data
 const props = await Page.getData(Astro);
 
-const {
-  data: { id },
-  collection,
-} = props;
+// The service's data stores are shown at level 2 of its visualiser page
+return Astro.redirect(buildUrl(`/visualiser/services/${props.data.id}/${props.data.version}?level=2`));
 ---
-
-<VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
-  <div class="m-4">
-    <div
-      class="h-[calc(100vh-130px)] w-full relative border border-[rgb(var(--ec-page-border))] rounded-md"
-      id={`${id}-portal`}
-      transition:animate="fade"
-    >
-    </div>
-    <NodeGraph
-      id={id}
-      collection={`${collection}-containers`}
-      title={`${props.data.name} (v${props.data.version}) - Data`}
-      mode="full"
-      linkTo="visualiser"
-      version={props.data.version}
-      linksToVisualiser={false}
-      href={{
-        label: `Open documentation for ${props.data.name} v${props.data.version}`,
-        url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`),
-      }}
-    />
-  </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/[type]/[id]/[version]/entity-map/index.astro

@@ -28,7 +28,7 @@ const {
     <NodeGraph
       id={id}
       collection={`${collection}-entities`}
-      title={`${props.data.name} (v${props.data.version}) - Entity Map`}
+      title={`${props.data.name} (v${props.data.version}) - Entity Diagram`}
       mode="full"
       linkTo="visualiser"
       version={props.data.version}

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

@@ -4,128 +4,26 @@
  *
  * Returns plain text mermaid flowchart syntax that can be used by LLMs,
  * documentation tools, or pasted into mermaid-compatible renderers.
+ * Domains and systems are served by their own routes (visualiser/domains and visualiser/systems).
  */
 import type { APIRoute, GetStaticPaths } from 'astro';
-import { isAuthEnabled, isVisualiserEnabled } from '@utils/feature';
-import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
-import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/node-graphs/services-node-graph';
-import {
-  getNodesAndEdgesForCommands,
-  getNodesAndEdgesForEvents,
-  getNodesAndEdgesForQueries,
-} from '@utils/node-graphs/message-node-graph';
-import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/node-graphs/domains-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';
-
-type PageTypesWithFlows = PageTypes | 'flows';
+import { isAuthEnabled } from '@utils/feature';
+import { createMermaidDiagramResponse, getMermaidDiagramPaths } from '../../_mermaid-route';
 
 // Prerender static pages when auth is disabled, use SSR when auth is enabled
 export const prerender = !isAuthEnabled();
 
-const getNodesAndEdgesFunctions = {
-  services: getNodesAndEdgesForService,
-  events: getNodesAndEdgesForEvents,
-  commands: getNodesAndEdgesForCommands,
-  queries: getNodesAndEdgesForQueries,
-  domains: getNodesAndEdgesForDomain,
-  flows: getNodesAndEdgesForFlows,
-  containers: getNodesAndEdgesForContainer,
-  'data-products': getNodesAndEdgesForDataProduct,
-  systems: getNodesAndEdgesForSystem,
-};
-
 export const getStaticPaths: GetStaticPaths = async () => {
-  if (isAuthEnabled() || !isVisualiserEnabled()) {
-    return [];
-  }
-
-  const { getFlows } = await import('@utils/collections/flows');
-
-  const loaders = {
-    ...pageDataLoader,
-    flows: getFlows,
-  };
-
-  const itemTypes: PageTypesWithFlows[] = [
+  const paths = await getMermaidDiagramPaths([
     'events',
     'commands',
     'queries',
     'services',
-    'domains',
     'flows',
     'containers',
     'data-products',
-    'systems',
-  ];
-
-  const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
-
-  return allItems.flatMap((items, index) =>
-    items
-      .filter((item) => item.data.visualiser !== false)
-      .map((item) => ({
-        params: {
-          type: itemTypes[index],
-          id: item.data.id,
-          version: item.data.version,
-        },
-      }))
-  );
+  ]);
+  return paths.map((params) => ({ params }));
 };
 
-export const GET: APIRoute = async ({ params }) => {
-  const { type, id, version } = params;
-
-  if (!type || !id || !version || !isVisualiserEnabled()) {
-    return new Response('Not found', { status: 404 });
-  }
-
-  // Validate the type is supported
-  if (!(type in getNodesAndEdgesFunctions)) {
-    return new Response(`Unsupported type: ${type}`, { status: 400 });
-  }
-
-  try {
-    // Get nodes and edges for this resource
-    const { nodes, edges } = await getNodesAndEdgesFunctions[type as keyof typeof getNodesAndEdgesFunctions]({
-      id,
-      version,
-      mode: 'full',
-      channelRenderMode: config.visualiser?.channels?.renderMode === 'single' ? 'single' : 'flat',
-    });
-
-    if (!nodes || nodes.length === 0) {
-      return new Response('No diagram data available', { status: 404 });
-    }
-
-    // Convert to mermaid
-    const mermaidCode = convertToMermaid(nodes, edges, {
-      includeStyles: true,
-      direction: 'LR',
-    });
-
-    // Add header comment with metadata
-    const header = `%% EventCatalog Mermaid Diagram
-%% Resource: ${type}/${id} (v${version})
-%% Generated: ${new Date().toISOString()}
-
-`;
-
-    return new Response(header + mermaidCode, {
-      status: 200,
-      headers: {
-        'Content-Type': 'text/plain; charset=utf-8',
-        'Cache-Control': 'public, max-age=3600',
-      },
-    });
-  } catch (error) {
-    console.error('Error generating mermaid diagram:', error);
-    return new Response('Failed to generate diagram', { status: 500 });
-  }
-};
+export const GET: APIRoute = async ({ params }) => createMermaidDiagramResponse(params);

package/eventcatalog/src/pages/visualiser/_mermaid-route.ts

@@ -0,0 +1,78 @@
+/**
+ * Serves a resource's architecture diagram as Mermaid at /visualiser/{type}/{id}/{version}.mermaid,
+ * as plain text that can be used by LLMs, documentation tools, or pasted into Mermaid renderers.
+ *
+ * Domains and systems have their own routes next to their Diagram pages
+ * (visualiser/domains/[id]/[version]), which would otherwise handle these requests first.
+ */
+import { isAuthEnabled, isVisualiserEnabled } from '@utils/feature';
+import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
+import { getArchitectureDiagramGraph } from '@utils/node-graphs/architecture-diagram';
+import { isArchitectureDiagramCollection } from '@utils/node-graphs/architecture-diagram-types';
+import { convertToMermaid } from '@utils/node-graphs/export-mermaid';
+import type { PageTypes } from '@types';
+
+export type MermaidDiagramType =
+  | Extract<PageTypes, 'events' | 'commands' | 'queries' | 'services' | 'domains' | 'containers' | 'data-products' | 'systems'>
+  | 'flows';
+
+/** Every version of each type that has a diagram, for building the Mermaid files in static builds */
+export async function getMermaidDiagramPaths(types: MermaidDiagramType[]) {
+  if (isAuthEnabled() || !isVisualiserEnabled()) {
+    return [];
+  }
+
+  const { getFlows } = await import('@utils/collections/flows');
+  const loaders = { ...pageDataLoader, flows: getFlows };
+
+  const allItems = await Promise.all(types.map((type) => loaders[type]()));
+
+  return allItems.flatMap((items, index) =>
+    items
+      .filter((item: any) => item.data.visualiser !== false)
+      .map((item: any) => ({ type: types[index], id: item.data.id as string, version: item.data.version as string }))
+  );
+}
+
+export async function createMermaidDiagramResponse({ type, id, version }: { type?: string; id?: string; version?: string }) {
+  if (!type || !id || !version || !isVisualiserEnabled()) {
+    return new Response('Not found', { status: 404 });
+  }
+
+  // Validate the type is supported
+  if (!isArchitectureDiagramCollection(type)) {
+    return new Response(`Unsupported type: ${type}`, { status: 400 });
+  }
+
+  try {
+    // Built the same way as the resource's Diagram page
+    const { nodes, edges } = await getArchitectureDiagramGraph({ collection: type, id, version });
+
+    if (!nodes || nodes.length === 0) {
+      return new Response('No diagram data available', { status: 404 });
+    }
+
+    const mermaidCode = convertToMermaid(nodes, edges, {
+      includeStyles: true,
+      direction: 'LR',
+    });
+
+    // Add header comment with metadata
+    const header = `%% EventCatalog Mermaid Diagram
+%% Resource: ${type}/${id} (v${version})
+%% Generated: ${new Date().toISOString()}
+
+`;
+
+    return new Response(header + mermaidCode, {
+      status: 200,
+      headers: {
+        'Content-Type': 'text/plain; charset=utf-8',
+        'Cache-Control': 'public, max-age=3600',
+      },
+    });
+  } catch (error) {
+    console.error('Error generating mermaid diagram:', error);
+    return new Response('Failed to generate diagram', { status: 500 });
+  }
+}

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

@@ -0,0 +1,44 @@
+import { isAuthEnabled, isVisualiserEnabled } from '@utils/feature';
+import { getDomains } from '@utils/collections/domains';
+import { Page as SystemsContextPage } from './systems-context/_index.data';
+
+// A domain's visualiser page, with levels from the domains it talks to down to
+// its messages. Same data as the old System Diagram page (which now redirects
+// here), but every domain gets a page.
+export class Page extends SystemsContextPage {
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isAuthEnabled() || !isVisualiserEnabled()) {
+      return [];
+    }
+
+    // Every version of each domain has a page (the sidebar links to the version viewed)
+    const domains = await getDomains();
+
+    return domains
+      .filter((domain) => domain.data.visualiser !== false)
+      .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();
+    return (
+      domains.find((domain) => domain.data.id === id && domain.data.version === version && domain.data.visualiser !== false) ??
+      null
+    );
+  }
+}

package/eventcatalog/src/pages/visualiser/domains/[id]/[version]/entity-map/index.astro

@@ -28,7 +28,7 @@ const {
     <NodeGraph
       id={id}
       collection={`${collection}-entities`}
-      title={`${props.data.name} (v${props.data.version}) - Entity Map`}
+      title={`${props.data.name} (v${props.data.version}) - Entity Diagram`}
       mode="full"
       linkTo="visualiser"
       version={props.data.version}

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

@@ -0,0 +1,56 @@
+---
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import VisualiserLayout from '@layouts/VisualiserLayout.astro';
+import { buildUrl } from '@utils/url-builder';
+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} (domains)`} description={props.data.summary}>
+  <div id="domain-visualiser-page" class="p-2">
+    <div
+      class="domain-visualiser-viewport 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-levels"
+      overview={{ label: 'domains it talks to' }}
+      title={`${props.data.name} (v${props.data.version})`}
+      mode="full"
+      linkTo="visualiser"
+      version={props.data.version}
+      linksToVisualiser={false}
+      zoomOnScroll={true}
+      href={{
+        label: `Open documentation for ${props.data.name} v${props.data.version}`,
+        url: buildUrl(`/docs/domains/${props.data.id}/${props.data.version}`),
+      }}
+    />
+  </div>
+  <ClientRouter />
+</VisualiserLayout>
+
+<style is:global>
+  html[data-embedded='true'] #domain-visualiser-page {
+    box-sizing: border-box;
+    height: 100vh;
+  }
+
+  html[data-embedded='true'] #domain-visualiser-page .domain-visualiser-viewport {
+    height: 100%;
+  }
+</style>

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

@@ -1,7 +1,5 @@
 ---
-import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
-import VisualiserLayout from '@layouts/VisualiserLayout.astro';
-import { ClientRouter } from 'astro:transitions';
+import { buildUrl } from '@utils/url-builder';
 
 import { Page } from './_index.data';
 
@@ -11,41 +9,6 @@ export const getStaticPaths = Page.getStaticPaths;
 // Get data
 const props = await Page.getData(Astro);
 
-const {
-  data: { id },
-} = props;
+// The System Diagram is now level 1 of the domain's visualiser page
+return Astro.redirect(buildUrl(`/visualiser/domains/${props.data.id}/${props.data.version}?level=1`));
 ---
-
-<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/domains/[id]/[version].mermaid.ts

@@ -0,0 +1,20 @@
+/**
+ * API endpoint to return mermaid diagram code for a domains visualiser page
+ * URL: /visualiser/domains/{id}/{version}.mermaid
+ *
+ * Lives next to the domains Diagram page, which would otherwise handle these requests
+ * before the generic visualiser/[type]/[id]/[version].mermaid route.
+ */
+import type { APIRoute, GetStaticPaths } from 'astro';
+import { isAuthEnabled } from '@utils/feature';
+import { createMermaidDiagramResponse, getMermaidDiagramPaths } from '../../_mermaid-route';
+
+// Prerender static pages when auth is disabled, use SSR when auth is enabled
+export const prerender = !isAuthEnabled();
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths = await getMermaidDiagramPaths(['domains']);
+  return paths.map(({ id, version }) => ({ params: { id, version } }));
+};
+
+export const GET: APIRoute = async ({ params }) => createMermaidDiagramResponse({ ...params, type: 'domains' });

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

@@ -0,0 +1,29 @@
+import { isAuthEnabled, isVisualiserEnabled } from '@utils/feature';
+import { getSystems } from '@utils/collections/systems';
+import { Page as ContextPage } from './context/_index.data';
+
+// A system's visualiser page, with levels from its context diagram down to its
+// messages. Same data as the System Context page, but every system gets a page
+// (the context level is optional, the system's resources always exist).
+export class Page extends ContextPage {
+  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
+    if (isAuthEnabled() || !isVisualiserEnabled()) {
+      return [];
+    }
+
+    const systems = await getSystems();
+
+    return systems
+      .filter((system) => system.data.visualiser !== false)
+      .map((system) => ({
+        params: {
+          id: system.data.id,
+          version: system.data.version,
+        },
+        props: {
+          type: 'systems',
+          ...system,
+        },
+      }));
+  }
+}