@eventcatalog/core 4.12.3 → 5.0.0-beta.0

package/eventcatalog/src/components/MDX/EntityMap/EntityMap.astro

@@ -79,7 +79,7 @@ const nodesWithLayout = applyLayoutToNodes(nodes as any[], savedLayout);
     linkTo={'visualiser'}
     mode="simple"
     includeKey={includeKey}
-    footerLabel={`Entity Map - ${resource?.data?.name} - v(${resource?.data?.version})`}
+    footerLabel={`Entity Diagram - ${resource?.data?.name} - v(${resource?.data?.version})`}
     client:only="react"
     portalId={`${id}-entity-map-portal`}
     isChatEnabled={isChatEnabled}

package/eventcatalog/src/components/MDX/Flow/Flow.astro

@@ -10,10 +10,13 @@ import { isVisualiserEnabled, isEventCatalogChatVisible, isDevMode } from '@util
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 import { randomUUID } from 'node:crypto';
 import { parseMdxBooleanProp } from '@utils/markdown';
+import { isFlowGroupBy } from '@eventcatalog/visualiser';
 
 const isChatEnabled = isEventCatalogChatVisible();
 
 const { id, version = 'latest', maxHeight, mode = 'simple' } = Astro.props;
+// Group the steps to start with (a string in MDX, so only a way they can be grouped)
+const lanes = isFlowGroupBy(Astro.props.lanes) ? Astro.props.lanes : undefined;
 const includeKey = parseMdxBooleanProp(Astro.props.legend ?? Astro.props.includeKey, true);
 const search = parseMdxBooleanProp(Astro.props.search, false);
 const walkthrough = parseMdxBooleanProp(Astro.props.walkthrough, false);
@@ -74,6 +77,7 @@ const portalId = `${id}-${flow?.data.version}-flow-${randomUUID()}-portal`;
     isChatEnabled={isChatEnabled}
     isDevMode={isDevMode()}
     resourceKey={resourceKey}
+    swimlanes={lanes}
   />
 </div>
 

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

@@ -14,6 +14,7 @@
 
 import { useCallback, lazy, Suspense } from 'react';
 import type { Node, Edge } from '@xyflow/react';
+import type { FlowGroupBy } from '@eventcatalog/visualiser';
 import { buildUrl } from '@utils/url-builder';
 
 const NodeGraph = lazy(() =>
@@ -43,6 +44,19 @@ interface AstroNodeGraphProps {
   isDevMode?: boolean;
   resourceKey?: string;
   disableMessageAnimation?: boolean;
+  // A simpler graph shown as level 1 (e.g. a system's context diagram)
+  overviewGraph?: {
+    nodes: Node[];
+    edges: Edge[];
+    label: string;
+    resourceKey?: string;
+  };
+  // This graph laid out with its messages and channels hidden (level 2), if precomputed
+  hiddenMessagesGraph?: { nodes: Node[]; edges: Edge[] };
+  // The kind of diagram, so the level is remembered for each kind
+  preferenceScope?: string;
+  // Group a flow's steps into swimlanes to start with
+  swimlanes?: FlowGroupBy;
 }
 
 const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: AstroNodeGraphProps) => {

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

@@ -1,5 +1,6 @@
 ---
 import AstroNodeGraph from './AstroNodeGraph';
+import type { FlowGroupBy } from '@eventcatalog/visualiser';
 // Imported here (server side) rather than from the React island: Astro then emits it as a
 // <link> in the page head, which survives ClientRouter navigations. A dynamic import from the
 // island injects a <style> that the view-transition head swap removes — and the cached module
@@ -14,7 +15,6 @@ import {
 } from '@utils/node-graphs/message-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/node-graphs/domains-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForDomainEntityMap } from '@utils/node-graphs/domain-entity-map';
-import { getDomainsCanvasData } from '@utils/node-graphs/domains-canvas';
 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 getNodesAndEdgesForSystem } from '@utils/node-graphs/systems-node-graph';
@@ -23,6 +23,8 @@ import {
   getNodesAndEdgesForDomainSystems as getNodesAndEdgesForDomainSystemsContext,
   getNodesAndEdgesForAllSystems as getNodesAndEdgesForSystemContextMap,
 } from '@utils/node-graphs/system-context-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForSystemLevels } from '@utils/node-graphs/system-levels-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForDomainLevels } from '@utils/node-graphs/domain-levels-node-graph';
 import { buildUrl } from '@utils/url-builder';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
@@ -56,6 +58,11 @@ interface Props {
   portalId?: string;
   // Disable + hide the "Simulate Messages" animation (e.g. on the Context Diagram).
   disableMessageAnimation?: boolean;
+  // Labels level 1 of a levels page (`systems-levels` or `domains-levels`): a
+  // system's context diagram, or a domain's systems and the domains they talk to.
+  overview?: { label: string };
+  // Flows only: group the steps into swimlanes to start with
+  lanes?: FlowGroupBy;
 }
 
 const {
@@ -72,6 +79,8 @@ const {
   zoomOnScroll = false,
   portalId,
   disableMessageAnimation,
+  overview,
+  lanes,
 } = Astro.props;
 
 let nodes = [],
@@ -139,12 +148,6 @@ if (collection === 'system-context-map') {
   edges = fetchedEdges;
 }
 
-if (collection === 'domains-canvas') {
-  const { domainNodes, messageNodes, edges: fetchedEdges } = await getDomainsCanvasData();
-  nodes = [...domainNodes, ...messageNodes];
-  edges = fetchedEdges;
-}
-
 if (collection === 'systems-context') {
   const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesForSystemContext({
     id,
@@ -155,6 +158,25 @@ if (collection === 'systems-context') {
   edges = fetchedEdges;
 }
 
+// Levels pages: a system's resource diagram inside its context diagram, or a
+// domain's systems expanded with the other domains they talk to. Level 1 (the
+// overview) and the level without messages are built from the same graph.
+let levelsOverview: { nodes: any[]; edges: any[] } | undefined;
+let hiddenMessagesGraph: { nodes: any[]; edges: any[] } | undefined;
+if (collection === 'systems-levels' || collection === 'domains-levels') {
+  const getLevels = collection === 'systems-levels' ? getNodesAndEdgesForSystemLevels : getNodesAndEdgesForDomainLevels;
+  const levels = await getLevels({
+    id,
+    version,
+    mode,
+    channelRenderMode: config.visualiser?.channels?.renderMode === 'single' ? 'single' : 'flat',
+  });
+  nodes = levels.nodes;
+  edges = levels.edges;
+  levelsOverview = levels.overview;
+  hiddenMessagesGraph = compactVisualiserGraph(levels.hiddenMessages.nodes, levels.hiddenMessages.edges);
+}
+
 if (collection === 'domains-systems-context') {
   const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesForDomainSystemsContext({
     id,
@@ -184,17 +206,6 @@ if (collection === 'services-entities') {
   edges = fetchedEdges;
 }
 
-if (collection === 'services-containers') {
-  const { nodes: fetchedNodes, edges: fetchedEdges } = await getNodesAndEdgesForService({
-    id,
-    version,
-    renderMessages: false,
-    mode: 'full',
-  });
-  nodes = fetchedNodes;
-  edges = fetchedEdges;
-}
-
 // Load and apply saved layout if it exists (dev mode feature)
 const resourceKey = buildResourceKey(collection, id, version);
 const savedLayout = await loadSavedLayout(resourceKey);
@@ -202,6 +213,22 @@ const nodesWithLayout = applyLayoutToNodes(nodes as any[], savedLayout);
 // Drop hydrated collection entries / markdown bodies before Astro serialises
 // the graph into the page. Visualiser components only need a small field set.
 const { nodes: clientNodes, edges: clientEdges } = compactVisualiserGraph(nodesWithLayout as any[], edges as any[]);
+
+let overviewGraph;
+if (overview && levelsOverview) {
+  // The system context keeps the key its own page used, so saved layouts carry over
+  const overviewResourceKey = buildResourceKey(
+    collection === 'systems-levels' ? 'systems-context' : `${collection}-overview`,
+    id,
+    version
+  );
+  const overviewLayout = await loadSavedLayout(overviewResourceKey);
+  overviewGraph = {
+    ...compactVisualiserGraph(applyLayoutToNodes(levelsOverview.nodes, overviewLayout), levelsOverview.edges),
+    label: overview.label,
+    resourceKey: overviewResourceKey,
+  };
+}
 ---
 
 <div>
@@ -226,6 +253,10 @@ const { nodes: clientNodes, edges: clientEdges } = compactVisualiserGraph(nodesW
     resourceKey={resourceKey}
     portalId={portalId}
     disableMessageAnimation={disableMessageAnimation ?? collection === 'systems-context'}
+    overviewGraph={overviewGraph}
+    hiddenMessagesGraph={hiddenMessagesGraph}
+    preferenceScope={collection}
+    swimlanes={lanes}
   />
 </div>
 

package/eventcatalog/src/components/MDX/RemoteFile.astro

@@ -2,7 +2,6 @@
 import { JSONPath } from 'jsonpath-plus';
 import JSONSchemaViewer from '@components/SchemaExplorer/JSONSchemaViewer';
 import { Code } from 'astro-expressive-code/components';
-import { isPrivateRemoteSchemaEnabled } from '@utils/feature';
 import { resolveTemplateVariables } from '@utils/remote-file';
 import { resolveSchemaRefs } from '@utils/json-schema-refs';
 
@@ -60,20 +59,13 @@ function extractWithJSONPath(data: any, path: string): any {
 }
 
 const resolvedUrl = resolveTemplateVariables(url);
-const resolvedHeaders = isPrivateRemoteSchemaEnabled() ? resolveTemplateVariables(headers) : {};
+const resolvedHeaders = resolveTemplateVariables(headers);
 
 let content = '';
 let processedData: any = null;
 let contentType = 'text';
 let isSchema = false;
 let error = null;
-let showPaidFeatureMessage = false;
-
-// Check if headers were provided but private remote schema is not enabled
-if (Object.keys(headers).length > 0 && !isPrivateRemoteSchemaEnabled()) {
-  error = '401 Unauthorized - Headers provided but private remote schema feature is not enabled';
-  showPaidFeatureMessage = true;
-}
 
 try {
   const response = await fetch(String(resolvedUrl), {
@@ -106,9 +98,7 @@ try {
     }
   }
 } catch (e) {
-  if (!showPaidFeatureMessage) {
-    error = e instanceof Error ? e.message : String(e);
-  }
+  error = e instanceof Error ? e.message : String(e);
 }
 
 // Determine rendering method
@@ -129,18 +119,6 @@ if (renderAs === 'auto') {
         Error loading remote file: <span class=" text-red-900">{url}</span>
       </strong>
       <p class="text-xs py-2">{` ${error} `}</p>
-      {showPaidFeatureMessage && (
-        <div class="my-1 p-3 bg-white border border-gray-200 rounded text-gray-700">
-          <strong>Private API Access</strong>
-          <p class="mt-1 text-xs">
-            Fetching files from private APIs with headers is a paid feature.
-            <a href="https://eventcatalog.cloud" class="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
-              Sign up for a EventCatalog Scale license key
-            </a>{' '}
-            to access this functionality.
-          </p>
-        </div>
-      )}
     </div>
   ) : (
     <div class="remote-file-content">

package/eventcatalog/src/components/SchemaExplorer/ApiAccessSection.tsx

@@ -1,5 +1,5 @@
 import { ChevronUpIcon, ChevronDownIcon, ClipboardDocumentIcon, CheckIcon } from '@heroicons/react/24/outline';
-import { CommandLineIcon, LockClosedIcon } from '@heroicons/react/24/solid';
+import { CommandLineIcon } from '@heroicons/react/24/solid';
 import type { SchemaItem } from './types';
 
 interface ApiAccessSectionProps {
@@ -8,17 +8,9 @@ interface ApiAccessSectionProps {
   onToggle: () => void;
   onCopy: (content: string, id: string) => void;
   copiedId: string | null;
-  apiAccessEnabled?: boolean;
 }
 
-export default function ApiAccessSection({
-  message,
-  isExpanded,
-  onToggle,
-  onCopy,
-  copiedId,
-  apiAccessEnabled = false,
-}: ApiAccessSectionProps) {
+export default function ApiAccessSection({ message, isExpanded, onToggle, onCopy, copiedId }: ApiAccessSectionProps) {
   // Generate API path based on collection type
   let apiPath = '';
   if (message.collection === 'services') {
@@ -41,12 +33,6 @@ export default function ApiAccessSection({
         <div className="flex items-center gap-2">
           <CommandLineIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-icon-color))]" />
           <span className="text-xs font-medium text-[rgb(var(--ec-page-text))]">API</span>
-          {!apiAccessEnabled && (
-            <span className="inline-flex items-center gap-1 rounded bg-[rgb(var(--ec-accent-subtle))] px-1.5 py-0.5 text-[10px] font-medium text-[rgb(var(--ec-accent-text))] border border-[rgb(var(--ec-accent)/0.2)]">
-              <LockClosedIcon className="h-2.5 w-2.5" />
-              Scale
-            </span>
-          )}
         </div>
         {isExpanded ? (
           <ChevronUpIcon className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))]" />
@@ -57,86 +43,66 @@ export default function ApiAccessSection({
 
       {isExpanded && (
         <div className="px-4 pb-3">
-          {apiAccessEnabled ? (
-            <div className="space-y-2">
-              {/* Endpoint */}
-              <div className="flex items-center gap-2 bg-gray-900 rounded-md px-3 py-2">
-                <span className="text-[10px] font-semibold text-emerald-400 uppercase tracking-wide">GET</span>
-                <code className="flex-1 text-[11px] text-gray-300 font-mono truncate">{apiPath}</code>
-                <button
-                  onClick={() => onCopy(fullUrl, `${message.data.id}-api`)}
-                  className={`flex-shrink-0 p-1 rounded transition-colors ${
-                    isCopied ? 'text-emerald-400' : 'text-gray-500 hover:text-gray-300'
-                  }`}
-                  title="Copy URL"
-                >
-                  {isCopied ? <CheckIcon className="h-3.5 w-3.5" /> : <ClipboardDocumentIcon className="h-3.5 w-3.5" />}
-                </button>
-              </div>
-
-              {/* Quick copy buttons */}
-              <div className="flex items-center gap-2">
-                <button
-                  onClick={() => onCopy(curlCommand, `${message.data.id}-curl`)}
-                  className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
-                    copiedId === `${message.data.id}-curl`
-                      ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
-                      : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-input-bg))] hover:text-[rgb(var(--ec-page-text))]'
-                  }`}
-                >
-                  {copiedId === `${message.data.id}-curl` ? (
-                    <>
-                      <CheckIcon className="h-3 w-3" />
-                      Copied
-                    </>
-                  ) : (
-                    <>
-                      <ClipboardDocumentIcon className="h-3 w-3" />
-                      Copy cURL
-                    </>
-                  )}
-                </button>
-                <button
-                  onClick={() => onCopy(fullUrl, `${message.data.id}-url`)}
-                  className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
-                    copiedId === `${message.data.id}-url`
-                      ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
-                      : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-input-bg))] hover:text-[rgb(var(--ec-page-text))]'
-                  }`}
-                >
-                  {copiedId === `${message.data.id}-url` ? (
-                    <>
-                      <CheckIcon className="h-3 w-3" />
-                      Copied
-                    </>
-                  ) : (
-                    <>
-                      <ClipboardDocumentIcon className="h-3 w-3" />
-                      Copy URL
-                    </>
-                  )}
-                </button>
-              </div>
+          <div className="space-y-2">
+            {/* Endpoint */}
+            <div className="flex items-center gap-2 bg-gray-900 rounded-md px-3 py-2">
+              <span className="text-[10px] font-semibold text-emerald-400 uppercase tracking-wide">GET</span>
+              <code className="flex-1 text-[11px] text-gray-300 font-mono truncate">{apiPath}</code>
+              <button
+                onClick={() => onCopy(fullUrl, `${message.data.id}-api`)}
+                className={`flex-shrink-0 p-1 rounded transition-colors ${
+                  isCopied ? 'text-emerald-400' : 'text-gray-500 hover:text-gray-300'
+                }`}
+                title="Copy URL"
+              >
+                {isCopied ? <CheckIcon className="h-3.5 w-3.5" /> : <ClipboardDocumentIcon className="h-3.5 w-3.5" />}
+              </button>
             </div>
-          ) : (
-            <div className="flex items-center justify-between gap-3 bg-[rgb(var(--ec-accent-subtle))] border border-[rgb(var(--ec-accent)/0.2)] rounded-md px-3 py-2.5">
-              <div className="flex-1 min-w-0">
-                <p className="text-xs font-medium text-[rgb(var(--ec-page-text))]">Access schemas via API</p>
-                <p className="text-[10px] text-[rgb(var(--ec-page-text-muted))] mt-0.5">CI/CD, automation & integrations</p>
-              </div>
-              <a
-                href="https://eventcatalog.cloud"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex-shrink-0 inline-flex items-center gap-1 px-2.5 py-1.5 text-[11px] font-medium text-white bg-[rgb(var(--ec-accent))] rounded-md hover:bg-[rgb(var(--ec-accent-hover))] transition-colors"
+
+            {/* Quick copy buttons */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => onCopy(curlCommand, `${message.data.id}-curl`)}
+                className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
+                  copiedId === `${message.data.id}-curl`
+                    ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
+                    : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-input-bg))] hover:text-[rgb(var(--ec-page-text))]'
+                }`}
+              >
+                {copiedId === `${message.data.id}-curl` ? (
+                  <>
+                    <CheckIcon className="h-3 w-3" />
+                    Copied
+                  </>
+                ) : (
+                  <>
+                    <ClipboardDocumentIcon className="h-3 w-3" />
+                    Copy cURL
+                  </>
+                )}
+              </button>
+              <button
+                onClick={() => onCopy(fullUrl, `${message.data.id}-url`)}
+                className={`inline-flex items-center gap-1.5 px-2 py-1 text-[10px] font-medium rounded border transition-colors ${
+                  copiedId === `${message.data.id}-url`
+                    ? 'bg-emerald-50 text-emerald-600 border-emerald-200'
+                    : 'text-[rgb(var(--ec-page-text-muted))] border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-input-bg))] hover:text-[rgb(var(--ec-page-text))]'
+                }`}
               >
-                Try Scale
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </a>
+                {copiedId === `${message.data.id}-url` ? (
+                  <>
+                    <CheckIcon className="h-3 w-3" />
+                    Copied
+                  </>
+                ) : (
+                  <>
+                    <ClipboardDocumentIcon className="h-3 w-3" />
+                    Copy URL
+                  </>
+                )}
+              </button>
             </div>
-          )}
+          </div>
         </div>
       )}
     </div>

package/eventcatalog/src/components/SchemaExplorer/ApiContentViewer.tsx

@@ -1,5 +1,4 @@
 import { ClipboardDocumentIcon, CheckIcon, GlobeAltIcon, DocumentTextIcon } from '@heroicons/react/24/outline';
-import { LockClosedIcon } from '@heroicons/react/24/solid';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
@@ -11,10 +10,9 @@ interface ApiContentViewerProps {
   message: SchemaItem;
   onCopy: (content: string, id: string) => void;
   copiedId: string | null;
-  apiAccessEnabled?: boolean;
 }
 
-export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessEnabled = false }: ApiContentViewerProps) {
+export default function ApiContentViewer({ message, onCopy, copiedId }: ApiContentViewerProps) {
   const isDarkMode = useDarkMode();
   const dividerColor = isDarkMode ? 'rgb(var(--ec-page-text-muted) / 0.13)' : 'rgb(var(--ec-page-border))';
   const boxBorderColor = isDarkMode ? 'rgb(var(--ec-page-text-muted) / 0.17)' : 'rgb(var(--ec-page-border))';
@@ -37,35 +35,6 @@ export default function ApiContentViewer({ message, onCopy, copiedId, apiAccessE
   const lineCount = exampleResponse.split('\n').length;
   const byteSize = new TextEncoder().encode(exampleResponse).length;
 
-  if (!apiAccessEnabled) {
-    return (
-      <div className="flex h-full items-center justify-center p-8">
-        <div className="max-w-md text-center">
-          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl border border-[rgb(var(--ec-accent)/0.3)] bg-[rgb(var(--ec-accent-subtle))]">
-            <LockClosedIcon className="h-8 w-8 text-[rgb(var(--ec-accent))]" />
-          </div>
-          <h3 className="mb-2 text-lg font-semibold text-[rgb(var(--ec-page-text))]">API Access</h3>
-          <p className="mb-6 text-sm text-[rgb(var(--ec-page-text-muted))]">
-            Access your schemas programmatically via REST API. Perfect for CI/CD pipelines, automation, and integrations with your
-            development workflow.
-          </p>
-          <a
-            href="https://eventcatalog.cloud"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-2 rounded-lg bg-[rgb(var(--ec-accent))] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[rgb(var(--ec-accent-hover))]"
-          >
-            Upgrade to Scale
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-          </a>
-          <p className="mt-3 text-xs text-[rgb(var(--ec-page-text-muted))]">Start your 14-day free trial</p>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="h-full overflow-auto pr-1">
       <div className="space-y-4 pb-3">

package/eventcatalog/src/components/SchemaExplorer/DiffViewer.tsx

@@ -109,10 +109,9 @@ const DIFF_DARK_STYLES = `
 interface DiffViewerProps {
   diffs: VersionDiff[];
   onOpenFullscreen?: () => void;
-  apiAccessEnabled?: boolean;
 }
 
-export default function DiffViewer({ diffs, onOpenFullscreen, apiAccessEnabled = false }: DiffViewerProps) {
+export default function DiffViewer({ diffs, onOpenFullscreen }: DiffViewerProps) {
   const isDark = useDarkMode();
 
   if (diffs.length === 0) return null;
@@ -124,12 +123,10 @@ export default function DiffViewer({ diffs, onOpenFullscreen, apiAccessEnabled =
         <div className="flex-1">
           <h3 className="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-1">Version Comparison</h3>
           <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">
-            {apiAccessEnabled
-              ? `${diffs.length} selected comparison${diffs.length !== 1 ? 's' : ''}`
-              : 'Compare schema versions side-by-side'}
+            {`${diffs.length} selected comparison${diffs.length !== 1 ? 's' : ''}`}
           </p>
         </div>
-        {onOpenFullscreen && apiAccessEnabled && (
+        {onOpenFullscreen && (
           <button
             onClick={onOpenFullscreen}
             className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))] transition-colors"
@@ -140,72 +137,28 @@ export default function DiffViewer({ diffs, onOpenFullscreen, apiAccessEnabled =
           </button>
         )}
       </div>
-      {apiAccessEnabled ? (
-        <div className={`space-y-6 ${isDark ? 'diff-dark-mode' : ''}`}>
-          {diffs.map((diff) => (
-            <div
-              key={`${diff.fromVersion}-${diff.toVersion}`}
-              className="border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden"
-            >
-              <div className="bg-[rgb(var(--ec-content-hover))] border-b border-[rgb(var(--ec-page-border))] px-4 py-2.5">
-                <div className="flex items-center justify-between">
-                  <div className="text-sm">
-                    <span className="font-semibold text-[rgb(var(--ec-page-text))]">v{diff.fromVersion}</span>
-                    <span className="text-[rgb(var(--ec-page-text-muted))] mx-2">&rarr;</span>
-                    <span className="font-semibold text-[rgb(var(--ec-page-text))]">v{diff.toVersion}</span>
-                  </div>
-                  <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">Selected comparison</span>
+      <div className={`space-y-6 ${isDark ? 'diff-dark-mode' : ''}`}>
+        {diffs.map((diff) => (
+          <div
+            key={`${diff.fromVersion}-${diff.toVersion}`}
+            className="border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden"
+          >
+            <div className="bg-[rgb(var(--ec-content-hover))] border-b border-[rgb(var(--ec-page-border))] px-4 py-2.5">
+              <div className="flex items-center justify-between">
+                <div className="text-sm">
+                  <span className="font-semibold text-[rgb(var(--ec-page-text))]">v{diff.fromVersion}</span>
+                  <span className="text-[rgb(var(--ec-page-text-muted))] mx-2">&rarr;</span>
+                  <span className="font-semibold text-[rgb(var(--ec-page-text))]">v{diff.toVersion}</span>
                 </div>
-              </div>
-              <div className="relative">
-                <div dangerouslySetInnerHTML={{ __html: diff.diffHtml }} />
+                <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">Selected comparison</span>
               </div>
             </div>
-          ))}
-        </div>
-      ) : (
-        <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-accent)/0.3)] rounded-lg p-8">
-          <div className="flex flex-col items-center text-center max-w-md mx-auto">
-            <div className="flex-shrink-0 mb-4">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="h-12 w-12 text-[rgb(var(--ec-accent))]"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1.5}
-                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                />
-              </svg>
+            <div className="relative">
+              <div dangerouslySetInnerHTML={{ __html: diff.diffHtml }} />
             </div>
-            <h4 className="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Upgrade to Scale</h4>
-            <p className="text-sm text-[rgb(var(--ec-page-text-muted))] mb-6 leading-relaxed">
-              Compare schema versions side-by-side with visual diffs. Track breaking changes, see exactly what changed between
-              versions, and maintain better schema governance.
-            </p>
-            <a
-              href="https://eventcatalog.cloud"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-[rgb(var(--ec-accent))] rounded-lg hover:opacity-90 transition-colors"
-            >
-              Start 14-day free trial
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                />
-              </svg>
-            </a>
           </div>
-        </div>
-      )}
+        ))}
+      </div>
     </div>
   );
 }

package/eventcatalog/src/components/SchemaExplorer/SchemaContentViewer.tsx

@@ -6,7 +6,7 @@ import { buildUrl } from '@utils/url-builder';
 import JSONSchemaViewer from './JSONSchemaViewer';
 import AvroSchemaViewer from './AvroSchemaViewer';
 import ProtobufSchemaViewer from './ProtobufSchemaViewer';
-import { getLanguageForHighlight } from './utils';
+import { getLanguageForHighlight, SCHEMA_CODE_STYLE } from './utils';
 import type { SchemaItem } from './types';
 import { useDarkMode } from './useDarkMode';
 
@@ -114,16 +114,7 @@ export default function SchemaContentViewer({
         <SyntaxHighlighter
           language={getLanguageForHighlight(message.schemaExtension)}
           style={isDarkMode ? oneDark : oneLight}
-          customStyle={{
-            margin: 0,
-            padding: '1.25rem',
-            borderRadius: 0,
-            fontSize: '0.8125rem',
-            lineHeight: '1.625',
-            height: '100%',
-            overflow: 'auto',
-            background: 'transparent',
-          }}
+          customStyle={{ ...SCHEMA_CODE_STYLE, height: '100%' }}
           showLineNumbers={true}
           wrapLines={true}
           wrapLongLines={true}