@eventcatalog/core 5.0.0-beta.9 → 5.0.0

package/eventcatalog/src/components/TrialBadge.astro

@@ -1,7 +1,7 @@
 ---
 import catalog from '@utils/eventcatalog-config/catalog';
 import { isDevMode } from '@utils/feature';
-import { getLicenseDaysLeft, getTrialStatus, LICENSE_FAQ_URL, TRIAL_LENGTH_DAYS } from '@utils/trial';
+import { BUY_BUSINESS_URL, getLicenseDaysLeft, getTrialStatus, TRIAL_LENGTH_DAYS } from '@utils/trial';
 import { getLicenseStatus } from '@utils/license';
 import { buildUrl } from '@utils/url-builder';
 
@@ -29,20 +29,17 @@ const title = licenseExpired
   : licenseDaysLeft !== undefined
     ? `Your EventCatalog commercial license expires on ${licensedUntil?.toLocaleDateString()}. Renew it to keep using EventCatalog commercially.`
     : trial?.ended
-      ? `Your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial ended on ${trial.endsAt.toLocaleDateString()}. Learn about licensing.`
-      : `You're on a ${TRIAL_LENGTH_DAYS}-day EventCatalog trial, ending on ${trial?.endsAt.toLocaleDateString()}. Learn about licensing.`;
+      ? `Your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial ended on ${trial.endsAt.toLocaleDateString()}. See your license settings.`
+      : `You're on a ${TRIAL_LENGTH_DAYS}-day EventCatalog trial, ending on ${trial?.endsAt.toLocaleDateString()}. See your license settings.`;
 const warning = licenseExpired || licenseDaysLeft !== undefined || trial?.ended;
-// An expiring or expired license opens the license settings (where it's renewed), the trial the license FAQ
-const isLicense = licenseExpired || licenseDaysLeft !== undefined;
-const href = isLicense ? buildUrl('/settings/license') : LICENSE_FAQ_URL;
+// The badge opens Settings > License, where the license is renewed or bought
+const href = buildUrl('/settings/license');
 ---
 
 {
   (licenseExpired || licenseDaysLeft !== undefined || trial) && (
     <a
       href={href}
-      target={isLicense ? undefined : '_blank'}
-      rel={isLicense ? undefined : 'noopener noreferrer'}
       title={title}
       data-trial-ended={trial?.ended ? 'true' : undefined}
       data-license-expired={licenseExpired ? 'true' : undefined}
@@ -50,7 +47,7 @@ const href = isLicense ? buildUrl('/settings/license') : LICENSE_FAQ_URL;
         'inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 py-1 text-xs font-medium transition-colors',
         warning
           ? 'border-[rgb(var(--ec-badge-color-amber-text)/0.3)] bg-[rgb(var(--ec-badge-color-amber-background))] text-[rgb(var(--ec-badge-color-amber-text))] hover:opacity-90'
-          : 'border-[rgb(var(--ec-accent)/0.3)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent)/0.15)]',
+          : 'border-transparent bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] hover:opacity-85',
       ]}
     >
       <svg
@@ -80,3 +77,17 @@ const href = isLicense ? buildUrl('/settings/license') : LICENSE_FAQ_URL;
     </a>
   )
 }
+{
+  /* Once the trial has ended, a link to buy the Business plan sits next to the badge */
+  trial?.ended && (
+    <a
+      href={BUY_BUSINESS_URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      data-buy-business="true"
+      class="inline-flex items-center whitespace-nowrap rounded-full border border-transparent bg-[rgb(var(--ec-page-text))] px-2.5 py-1 text-xs font-medium text-[rgb(var(--ec-page-bg))] transition-opacity hover:opacity-85"
+    >
+      Buy Business
+    </a>
+  )
+}

package/eventcatalog/src/content.config.ts

@@ -502,7 +502,24 @@ const agents = defineCollection({
   ),
 });
 
-const adrStatus = z.enum(ADR_STATUS_VALUES);
+// ADRs need a status and a date, and say so when they're missing or invalid. Astro's own message for
+// a missing or unreadable date was "Expected type date, received object", with the field name garbled.
+const adrStatus = z.enum(ADR_STATUS_VALUES, {
+  error: (issue) =>
+    issue.input === undefined ? `Required: one of ${ADR_STATUS_VALUES.map((value) => `"${value}"`).join(', ')}` : undefined,
+});
+const adrDate = z.preprocess(
+  // Converted to a date only when it's set: a missing date coerced first became an invalid date
+  (value) => (value == null ? value : new Date(value as string | number | Date)),
+  z.date({
+    error: (issue) =>
+      issue.input === undefined
+        ? 'Required: a date, e.g. 2026-06-01'
+        : issue.input instanceof Date
+          ? 'Invalid date: use a date, e.g. 2026-06-01'
+          : undefined,
+  })
+);
 
 const adrPointer = z.object({
   id: z.string(),
@@ -539,7 +556,7 @@ const adrs = defineCollection({
     z
       .object({
         status: adrStatus,
-        date: z.coerce.date(),
+        date: adrDate,
         decisionMakers: z.array(ownerReference).optional(),
         appliesTo: z.array(adrResourcePointer).optional(),
         supersedes: z.array(adrPointer).optional(),

package/eventcatalog/src/features/auth/error.astro

@@ -1,5 +1,6 @@
 ---
 import '../../styles/tailwind.css';
+import { formatPageTitle } from '@utils/page-title';
 // src/pages/auth/error.astro
 
 const { searchParams } = new URL(Astro.request.url);
@@ -14,6 +15,7 @@ const errorMessages = {
 
 // @ts-ignore
 const errorMessage = errorMessages[error] || errorMessages.Default;
+const pageTitle = formatPageTitle('Authentication Error');
 ---
 
 <!doctype html>
@@ -25,10 +27,10 @@ const errorMessage = errorMessages[error] || errorMessages.Default;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="generator" content={Astro.generator} />
-    <title>Authentication Error - EventCatalog</title>
+    <title>{pageTitle}</title>
   </head>
   <body>
-    <main title="Authentication Error - EventCatalog">
+    <main title={pageTitle}>
       <div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
         <div class="max-w-md w-full space-y-8 text-center">
           <div>

package/eventcatalog/src/features/auth/login.astro

@@ -1,6 +1,7 @@
 ---
 import '../../styles/tailwind.css';
 import config from '@config';
+import { formatPageTitle } from '@utils/page-title';
 const { title, logo } = config;
 import { join } from 'node:path';
 import { isAuthEnabled, isSSR } from '@utils/feature';
@@ -106,7 +107,7 @@ const providerConfig = {
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="generator" content={Astro.generator} />
-    <title>Sign In | {title}</title>
+    <title>{formatPageTitle('Sign In')}</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

package/eventcatalog/src/features/auth/middleware/middleware-auth.ts

@@ -96,6 +96,14 @@ export function isMcpRoute(pathname: string) {
   return pathname === '/docs/mcp' || pathname.startsWith('/docs/mcp/');
 }
 
+// The Studio API answers in JSON, rather than sending callers to the sign-in page
+const isStudioApiRoute = (pathname: string) => pathname === '/api/studio' || pathname.startsWith('/api/studio/');
+const signInRequired = () =>
+  new Response(JSON.stringify({ error: 'Sign in to use this API' }), {
+    status: 401,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
 export const authMiddleware: MiddlewareHandler = async (context, next) => {
   const { request, redirect, locals } = context;
   const url = new URL(request.url);
@@ -131,6 +139,7 @@ export const authMiddleware: MiddlewareHandler = async (context, next) => {
     const session = await getSession(request);
 
     if (!session) {
+      if (isStudioApiRoute(pathname)) return signInRequired();
       const callbackUrl = encodeURIComponent(pathname + url.search);
       return redirect(`/auth/login?callbackUrl=${callbackUrl}`);
     }
@@ -157,6 +166,7 @@ export const authMiddleware: MiddlewareHandler = async (context, next) => {
     typedLocals.matchesPattern = matchesPattern;
   } catch (error) {
     console.error('Session error:', error);
+    if (isStudioApiRoute(pathname)) return signInRequired();
     const callbackUrl = encodeURIComponent(pathname + url.search);
     return redirect(`/auth/login?callbackUrl=${callbackUrl}`);
   }
@@ -194,12 +204,22 @@ function normalizeUserData(session: any): NormalizedUser {
   }
 }
 
+// The host of a token's issuer (e.g. `dev-123.okta.com`), or '' when it isn't a URL
+const issuerHost = (issuer: unknown) => {
+  try {
+    return new URL(String(issuer)).hostname;
+  } catch {
+    return '';
+  }
+};
+
 function detectProvider(session: any): string {
   const account = session.account;
   if (account?.provider) return account.provider;
 
   if (session.user?.sub?.startsWith('auth0|')) return 'auth0';
-  if (session.user?.iss?.includes('okta.com') || session.user?.provider?.includes('okta')) return 'okta';
+  const host = issuerHost(session.user?.iss);
+  if (host === 'okta.com' || host.endsWith('.okta.com') || session.user?.provider?.includes('okta')) return 'okta';
   if (session.user?.iss?.includes('microsoft')) return 'microsoft';
   if (session.user?.iss?.includes('google')) return 'google';
 

package/eventcatalog/src/features/auth/unauthorized.astro

@@ -2,7 +2,7 @@
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 ---
 
-<VerticalSideBarLayout title="Unauthorized - EventCatalog" showNestedSideBar={false}>
+<VerticalSideBarLayout title="Unauthorized" showNestedSideBar={false}>
   <div class="flex h-[calc(100vh-120px)] bg-white">
     <main class="flex w-full items-center justify-center bg-white text-center sm:p-12">
       <div class="w-full max-w-xl text-center">

package/eventcatalog/src/features/fields/pages/fields.astro

@@ -7,7 +7,7 @@ import FieldsExplorer from '@components/FieldsExplorer/FieldsExplorer';
 export const prerender = false;
 ---
 
-<VerticalSideBarLayout title="Fields Explorer - EventCatalog" showNestedSideBar={false}>
+<VerticalSideBarLayout title="Fields Explorer" showNestedSideBar={false}>
   <style is:global>
     #eventcatalog-header {
       left: calc(var(--ec-vertical-nav-width, 14rem) + var(--ec-fields-sidebar-width, 320px)) !important;

package/eventcatalog/src/features/integrations/eventcatalog-features.ts

@@ -176,24 +176,30 @@ export default function eventCatalogIntegration(): AstroIntegration {
           });
         }
 
-        // Collaborative canvases in EventCatalog Studio (/studio lists them, /studio/new starts one). Their WebSocket
+        // What a server starts before anyone asks for it (the storage configured, migrated; Studio), called by
+        // `eventcatalog start` once it listens
+        if (isSSR()) {
+          params.injectRoute({
+            pattern: '/_eventcatalog/start',
+            entrypoint: path.join(packageDirectory, 'src/features/server/start.ts'),
+          });
+        }
+
+        // Collaborative canvases in EventCatalog Studio (/studio lists them, /studio?new=1 starts one). Their WebSocket
         // server is in integrations/studio-server.mjs.
         if (isCanvasEnabled()) {
           params.injectRoute({
             pattern: '/studio',
             entrypoint: path.join(packageDirectory, 'src/features/studio/pages/index.astro'),
           });
-          params.injectRoute({
-            pattern: '/studio/new',
-            entrypoint: path.join(packageDirectory, 'src/features/studio/pages/new.astro'),
-          });
           params.injectRoute({
             pattern: '/studio/[id]',
             entrypoint: path.join(packageDirectory, 'src/features/studio/pages/[id].astro'),
           });
+          // The Studio API (canvases as a whole: listing, creating, deleting)
           params.injectRoute({
-            pattern: '/_eventcatalog/studio/wake',
-            entrypoint: path.join(packageDirectory, 'src/features/studio/pages/wake.ts'),
+            pattern: '/api/studio/canvases/[...path]',
+            entrypoint: path.join(packageDirectory, 'src/features/studio/api/canvases.ts'),
           });
           params.injectRoute({
             pattern: '/webmcp-relay/[file]',

package/eventcatalog/src/features/mcp/apps/architecture-diagram/node-chat.tsx

@@ -6,7 +6,8 @@
 import { useEffect, useRef, useState, type FormEvent, type KeyboardEvent, type RefObject } from 'react';
 import type { Node } from '@xyflow/react';
 import { Check, Network, SendHorizontal, X } from 'lucide-react';
-import type { ArchitectureDiagramCollection } from '@utils/node-graphs/architecture-diagram-types';
+import { isArchitectureDiagramCollection } from '@utils/node-graphs/architecture-diagram-types';
+import { getNodeCatalogResource, getNodeResourceDetails } from '@utils/node-graphs/node-resource';
 import type { DiagramLink } from './links';
 import { RESOURCE_TYPE_LABELS } from '../shared/resource-types';
 
@@ -36,53 +37,13 @@ const NODE_TYPE_LABELS: Record<string, string> = {
   externalSystem: 'External system',
 };
 
-// Where each node type keeps the resource it shows
-const RESOURCE_DATA_KEYS = [
-  'service',
-  'agent',
-  'message',
-  'channel',
-  'data',
-  'dataProduct',
-  'flow',
-  'entity',
-  'domain',
-  'system',
-  'custom',
-];
-
-// The collection of each node type the architecture diagram tool can draw a diagram for
-const DIAGRAM_COLLECTIONS: Record<string, ArchitectureDiagramCollection> = {
-  services: 'services',
-  agents: 'agents',
-  events: 'events',
-  commands: 'commands',
-  queries: 'queries',
-  flows: 'flows',
-  data: 'containers',
-  containers: 'containers',
-  'data-products': 'data-products',
-  domains: 'domains',
-  'context-domain': 'domains',
-  'domain-group': 'domains',
-  systems: 'systems',
-  'system-group': 'systems',
-};
-
-// Domain and system boundaries only have their catalog id in the node id: {kind}-group-{id}-{version}
-const catalogIdOfGroup = (node: Node, version?: string) => {
-  const match = node.id.match(/^(?:domain|system)-group-(.+)$/);
-  if (!match) return undefined;
-  return version && match[1].endsWith(`-${version}`) ? match[1].slice(0, -(version.length + 1)) : match[1];
-};
-
 export function describeNode(node: Node): SelectedNode {
   const data = (node.data ?? {}) as Record<string, any>;
-  const resource = RESOURCE_DATA_KEYS.map((key) => data[key]).find(Boolean) ?? data;
-  const details = resource?.data ?? resource;
+  const details = (getNodeResourceDetails(node) ?? data) as Record<string, any>;
   const version: string | undefined = details?.version;
-  const id: string = details?.id ?? catalogIdOfGroup(node, version) ?? node.id;
-  const collection = DIAGRAM_COLLECTIONS[node.type ?? ''];
+  const id: string = details?.id ?? node.id;
+  const resource = getNodeCatalogResource(node);
+  const collection = resource && isArchitectureDiagramCollection(resource.collection) ? resource.collection : undefined;
 
   return {
     nodeId: node.id,

package/eventcatalog/src/features/mcp/apps/canvas/shared.ts

@@ -1,6 +1,6 @@
 // Shared by the canvas MCP App (client) and the MCP server: no server-only imports here
 import type { CatalogRelation, CatalogResource } from '../../../studio/catalog-resources';
-import type { CanvasStatus } from '../../../studio/canvas-doc';
+import { type CanvasStatus } from '@eventcatalog/visualiser/studio';
 
 export const CANVAS_RESOURCE_URI = 'ui://eventcatalog/canvas.html';
 /** Key of the payload in openCanvas results' `_meta` */
@@ -40,8 +40,8 @@ export type CanvasView = {
   canvasUrl: string;
   /** The EventCatalog MCP server, for "Connect your agent" */
   mcpUrl: string;
-  /** What to call the user on the canvas, when the agent knows their name */
-  userName?: string;
+  /** The chat's agent: the view joins the canvas as it (its name, colour and logo) */
+  agent?: { name: string; color: string };
 };
 
 export type CanvasCatalog = { resources: CatalogResource[]; relations: CatalogRelation[] };

package/eventcatalog/src/features/mcp/apps/canvas/styles.css

@@ -4,10 +4,12 @@
  */
 @import 'tailwindcss' source(none);
 @import '../../../../styles/theme.css';
-@import '../../../studio/studio.css';
+@import '@eventcatalog/visualiser/studio.css';
 
 @source './*.tsx';
 @source '../../../studio/components/*.{ts,tsx}';
+/* Studio's shared canvas (nodes, comments, hotspots), from the visualiser in this repo */
+@source '../../../../../../../visualiser/src/studio';
 
 body {
   margin: 0;

package/eventcatalog/src/features/mcp/apps/canvas/view.tsx

@@ -15,7 +15,8 @@ import type { App } from '@modelcontextprotocol/ext-apps';
 import styles from './styles.css?inline';
 import visualiserStyles from '@eventcatalog/visualiser/styles.css?inline';
 import StudioDesigner, { type SelectedNode } from '@features/studio/components/StudioDesigner';
-import { CANVAS_STATUS_LOOK, STATUS } from '@features/studio/components/status';
+import { getAgent } from '@features/studio/agents';
+import { CANVAS_STATUS_LOOK, STATUS } from '@eventcatalog/visualiser/studio';
 import { getToolResultPayload, mountView, useMcpAppView } from '../shared/app-view';
 import {
   CANVAS_CATALOG_TOOL,
@@ -212,10 +213,10 @@ function CanvasApp() {
   const iconButton =
     'flex items-center gap-1 rounded-md px-2 py-1 text-xs text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-page-border)/0.5)]';
 
-  // No join form inside a chat: use the name the agent passed, or name them after the chat they're in
+  // No join form inside a chat: it joins as the chat's agent (e.g. ChatGPT or Claude, with its logo), as the agent
+  // working on the canvas does, else as the chat it's in
   const hostName = app?.getHostVersion()?.name;
-  const userName = (view: CanvasView) =>
-    view.userName ?? `${hostName ? hostName.replace(/^\w/, (letter) => letter.toUpperCase()) : 'Chat'} user`;
+  const agentOf = (view: CanvasView) => view.agent ?? getAgent(undefined, hostName);
 
   return (
     <div className="flex flex-col" style={{ height: fullscreen ? '100vh' : INLINE_HEIGHT }}>
@@ -255,11 +256,12 @@ function CanvasApp() {
             shareUrl={canvas.canvasUrl}
             mcpUrl={canvas.mcpUrl}
             syncViaTools={syncViaTools}
-            defaultName={userName(canvas)}
+            asAgent={agentOf(canvas)}
             resources={catalog.resources}
             relations={catalog.relations}
             onSelectionChange={setSelection}
             followChanges
+            paletteCollapsed
           />
         ) : (
           <CanvasPicker