@eventcatalog/core 5.4.0 → 5.4.2

package/eventcatalog/src/features/studio/api/canvases-api.ts

@@ -20,7 +20,9 @@ import type { SignedInUser } from '../server/sign-in';
  *                                       "edges"?: [...] }, starting with the nodes and edges given, if any (as the
  *                                       add_to_canvas MCP tool takes them: catalog resources or new components, x/y
  *                                       their centres, and only the connections in edges are made, each drawn
- *                                       along its "route" if given: { "points": [{x, y}, ...], "label"?: {x, y} }),
+ *                                       along its "route" if given: { "points": [{x, y}, ...], "label"?: {x, y},
+ *                                       "sourceHeight"?: number, "targetHeight"?: number }, the heights its nodes
+ *                                       were laid out at),
  *                                       and "levels" (L1 and L2 laid out, e.g. as a diagram shows them, by the
  *                                       nodes' refs), shown as given until what's on the canvas changes
  *   GET    /api/studio/canvases/:id    One canvas

package/eventcatalog/src/features/studio/canvas-actions.ts

@@ -96,9 +96,15 @@ const pointSchema = z.object({ x: z.number(), y: z.number() });
 /**
  * Edges for a new canvas (through the Studio API): as add_to_canvas takes them, and how each is drawn, if known
  * (e.g. copied from a diagram): the points it goes through (canvas coordinates, at right angles) and where its
- * label goes. It follows its nodes when they're moved.
+ * label goes, and how tall its nodes were laid out (for its ends to land on them as they render). It follows its
+ * nodes when they're moved.
  */
-const routeSchema = z.object({ points: z.array(pointSchema).min(2).max(200), label: pointSchema.optional() });
+const routeSchema = z.object({
+  points: z.array(pointSchema).min(2).max(200),
+  label: pointSchema.optional(),
+  sourceHeight: z.number().positive().optional(),
+  targetHeight: z.number().positive().optional(),
+});
 export const newCanvasEdgesSchema = z.array(edgeSpecsSchema.element.extend({ route: routeSchema.optional() }));
 export type NewCanvasEdges = z.output<typeof newCanvasEdgesSchema>;
 

package/eventcatalog/src/features/studio/hooks/use-canvas-webmcp.ts

@@ -46,7 +46,7 @@ type ModelContextTool = {
   title?: string;
   description: string;
   inputSchema?: object;
-  annotations?: { readOnlyHint?: boolean; consequentialHint?: boolean };
+  annotations?: { readOnlyHint?: boolean; consequentialHint?: boolean; untrustedContentHint?: boolean };
   execute: (input: unknown, options?: { signal?: AbortSignal }) => Promise<ToolResult>;
 };
 type ModelContext = { registerTool: (tool: ModelContextTool, options?: { signal?: AbortSignal }) => Promise<void> | void };
@@ -204,7 +204,8 @@ const createCanvasTools = (get: () => CanvasWebMcpOptions, getStage: () => Agent
       description:
         'Reads the collaborative canvas open on this page: its nodes (ids, names, positions, the catalog resource they stand for), connections, comment threads, and who is on it. Call it first, and again to see what people changed.',
       input: z.object({}),
-      annotations: { readOnlyHint: true },
+      // Names, notes and comments come from people
+      annotations: { readOnlyHint: true, untrustedContentHint: true },
       execute: () =>
         withDoc((doc) => ({
           ...describeCanvas(doc),
@@ -342,7 +343,7 @@ const createCanvasTools = (get: () => CanvasWebMcpOptions, getStage: () => Agent
       description:
         'Selects nodes and moves the view to them, to point the user at something. Leave out nodeIds to show the whole canvas.',
       input: z.object({ nodeIds: z.array(z.string()).optional() }),
-      annotations: { readOnlyHint: true },
+      // Not read only: it changes the user's selection and view
       execute: ({ nodeIds }) => {
         if (nodeIds?.length) get().select(nodeIds);
         get().fitView(nodeIds);

package/eventcatalog/src/utils/node-graphs/system-levels-node-graph.ts

@@ -1,6 +1,8 @@
+import { getCollection } from 'astro:content';
 import { getNodesAndEdges as getSystemContextNodesAndEdges } from './system-context-node-graph';
-import { getNodesAndEdges as getSystemNodesAndEdges } from './systems-node-graph';
+import { getNodesAndEdges as getSystemNodesAndEdges, memberServiceNodeIds, SERVICE_NODE_TYPES } from './systems-node-graph';
 import { layoutLevels } from '@utils/node-graphs/layout-node-graph';
+import { createVersionedMap, findInMap } from '@utils/collections/util';
 
 interface NodesAndEdgesProps {
   id: string;
@@ -22,6 +24,145 @@ export const getNodesAndEdges = (props: NodesAndEdgesProps) => {
   return levelsCache.get(key)!;
 };
 
+const nodeIdOf = (resource: { data: { id: string; version?: string } }) => `${resource.data.id}-${resource.data.version}`;
+
+const isSameResource = (a: { data: { id: string; version?: string } }, b: { data: { id: string; version?: string } }) =>
+  a.data.id === b.data.id && a.data.version === b.data.version;
+
+/**
+ * Every system that lists a service, keyed by the service's resolved node id
+ * (`id-version`). Pointers use the same version matching as the rest of the
+ * catalog (`latest`, exact versions, semver ranges), so the key is the
+ * concrete service the pointer selects, not the pointer text.
+ */
+export const collectServiceOwners = (systems: any[], serviceMap: Map<string, any[]>) => {
+  const owners = new Map<string, any[]>();
+  for (const system of systems) {
+    for (const ref of system.data.services || []) {
+      const service = findInMap(serviceMap, ref.id, ref.version);
+      if (!service) continue;
+      const id = nodeIdOf(service);
+      const list = owners.get(id) ?? [];
+      if (!list.some((owner) => isSameResource(owner, system))) list.push(system);
+      owners.set(id, list);
+    }
+  }
+  return owners;
+};
+
+/**
+ * Which of a service's systems stands for it on this diagram.
+ * A direct relationship wins, in the order the focused system declares them
+ * (their version pointers resolved the same way as the context diagram).
+ * Otherwise the lowest system id, then version, so catalog order doesn't matter.
+ * Systems that aren't already on the diagram are not candidates: the service
+ * is drawn on its own instead of inventing a system box.
+ */
+const chooseOwningSystem = (owners: any[], contextSystemIds: Set<string>, focused: any, systemMap: Map<string, any[]>) => {
+  const inGraph = owners.filter((system) => !isSameResource(system, focused) && contextSystemIds.has(nodeIdOf(system)));
+  if (inGraph.length === 0) return undefined;
+
+  const inGraphIds = new Set(inGraph.map(nodeIdOf));
+  for (const relationship of focused.data.relationships || []) {
+    const related = findInMap(systemMap, relationship.id, relationship.version);
+    if (related && inGraphIds.has(nodeIdOf(related))) return related;
+  }
+
+  return [...inGraph].sort((a, b) => {
+    const byId = a.data.id.localeCompare(b.data.id);
+    return byId !== 0 ? byId : String(a.data.version).localeCompare(String(b.data.version));
+  })[0];
+};
+
+const detachFromGroup = (node: any) => {
+  const { parentId, extent, ...rest } = node;
+  return rest;
+};
+
+const edgePair = (source: string, target: string) => `${source}->${target}`;
+
+/**
+ * Drops edges that repeat a relationship (either direction) and edges that
+ * repeat the same source, target and label. Relationship edges themselves stay.
+ */
+export const dedupeEdges = (edges: any[], relationshipPairs: Set<string>) => {
+  const seen = new Set<string>();
+  return edges.filter((edge) => {
+    const isRelationship = String(edge.id).startsWith('context-');
+    const pair = edgePair(edge.source, edge.target);
+    if (!isRelationship && relationshipPairs.has(pair)) return false;
+    if (isRelationship) return true;
+    const key = `${pair}->${edge.label ?? ''}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+};
+
+/**
+ * Services that belong to another system already on the diagram are removed
+ * and their edges point at that system. Services in no system, or whose system
+ * isn't on the diagram, are kept but not inside this system's group. A service
+ * this system lists stays in the group even when another system lists it too.
+ */
+export const rehomeServicesInOtherSystems = ({
+  nodes,
+  edges,
+  groupId,
+  focusedSystem,
+  allSystems,
+  allServices,
+  contextSystemIds,
+  relationshipPairs,
+}: {
+  nodes: any[];
+  edges: any[];
+  groupId: string;
+  focusedSystem: any;
+  allSystems: any[];
+  allServices: any[];
+  contextSystemIds: Set<string>;
+  relationshipPairs: Set<string>;
+}) => {
+  const serviceMap = createVersionedMap(allServices);
+  const systemMap = createVersionedMap(allSystems);
+  const owners = collectServiceOwners(allSystems, serviceMap);
+  const members = memberServiceNodeIds(focusedSystem, serviceMap);
+  const replacedBy = new Map<string, string>();
+
+  const nextNodes = nodes
+    .map((node) => {
+      if (node.id === groupId || !SERVICE_NODE_TYPES.has(node.type)) return node;
+      const nodeOwners = owners.get(node.id) ?? [];
+      // Listed here, or resolved as a member: it belongs inside this group
+      if (members.has(node.id) || nodeOwners.some((system) => isSameResource(system, focusedSystem))) {
+        return node.parentId === groupId ? node : { ...node, parentId: groupId, extent: 'parent' };
+      }
+      const owner = chooseOwningSystem(nodeOwners, contextSystemIds, focusedSystem, systemMap);
+      if (owner) {
+        replacedBy.set(node.id, nodeIdOf(owner));
+        return null;
+      }
+      return detachFromGroup(node);
+    })
+    .filter((node): node is any => !!node);
+
+  const seen = new Set<string>();
+  const nextEdges = edges.flatMap((edge) => {
+    const source = replacedBy.get(edge.source) ?? edge.source;
+    const target = replacedBy.get(edge.target) ?? edge.target;
+    if (source === target) return [];
+    const pair = edgePair(source, target);
+    if (relationshipPairs.has(pair)) return [];
+    const key = `${pair}->${edge.label ?? ''}`;
+    if (seen.has(key)) return [];
+    seen.add(key);
+    return [{ ...edge, source, target }];
+  });
+
+  return { nodes: nextNodes, edges: nextEdges, replacedBy };
+};
+
 /**
  * A system's resource diagram shown inside its context diagram: the system's node
  * is replaced by the expanded system group (services, data stores, messages...),
@@ -30,17 +171,27 @@ export const getNodesAndEdges = (props: NodesAndEdgesProps) => {
  * its messages and channels (`hiddenMessages`).
  */
 const buildLevels = async ({ id, version, mode = 'simple', channelRenderMode }: NodesAndEdgesProps) => {
-  const [context, system] = await Promise.all([
+  const [context, system, allSystems, allServices] = await Promise.all([
     getSystemContextNodesAndEdges({ id, version, mode, layout: false }),
-    getSystemNodesAndEdges({ id, version, mode, channelRenderMode, wrapInSystemGroup: true, layout: false }),
+    getSystemNodesAndEdges({
+      id,
+      version,
+      mode,
+      channelRenderMode,
+      wrapInSystemGroup: true,
+      confineToMembers: true,
+      layout: false,
+    }),
+    getCollection('systems'),
+    getCollection('services'),
   ]);
 
   const group = system.nodes.find((node: any) => node.type === 'system-group');
   const rootSystemNode = context.nodes.find((node: any) => node.data?.isFocused);
   if (!group || !rootSystemNode) return layoutLevels(system, context);
 
-  const systemNodeIds = new Set(system.nodes.map((node: any) => node.id));
-  const contextNodes = context.nodes.filter((node: any) => node.id !== rootSystemNode.id && !systemNodeIds.has(node.id));
+  const focusedSystem = allSystems.find((systemEntry) => systemEntry.data.id === id && systemEntry.data.version === version);
+
   const toGroup = (nodeId: string) => (nodeId === rootSystemNode.id ? group.id : nodeId);
   const contextEdges = context.edges.map((edge: any) => ({
     ...edge,
@@ -48,12 +199,47 @@ const buildLevels = async ({ id, version, mode = 'simple', channelRenderMode }:
     source: toGroup(edge.source),
     target: toGroup(edge.target),
   }));
+  const relationshipPairs = new Set<string>();
+  for (const edge of contextEdges) {
+    relationshipPairs.add(edgePair(edge.source, edge.target));
+    relationshipPairs.add(edgePair(edge.target, edge.source));
+  }
+
+  const contextSystemIds = new Set(
+    context.nodes.filter((node: any) => node.type === 'systems' && node.id !== rootSystemNode.id).map((node: any) => node.id)
+  );
 
-  // Lay the context and the expanded system out together
+  const rehomed = focusedSystem
+    ? rehomeServicesInOtherSystems({
+        nodes: system.nodes,
+        edges: system.edges,
+        groupId: group.id,
+        focusedSystem,
+        allSystems,
+        allServices,
+        contextSystemIds,
+        relationshipPairs,
+      })
+    : { nodes: system.nodes, edges: system.edges };
+
+  const systemNodeIds = new Set(rehomed.nodes.map((node: any) => node.id));
+  const contextNodes = context.nodes.filter((node: any) => node.id !== rootSystemNode.id && !systemNodeIds.has(node.id));
+
+  // Lay the context and the expanded system out together. Redirects happen
+  // before this, so level 2 (messages hidden) bridges onto the system boxes.
   const detailed = {
     // Parent must come before its children in the array for React Flow
-    nodes: [group, ...contextNodes, ...system.nodes.filter((node: any) => node.id !== group.id)],
-    edges: [...system.edges, ...contextEdges],
+    nodes: [group, ...contextNodes, ...rehomed.nodes.filter((node: any) => node.id !== group.id)],
+    edges: [...rehomed.edges, ...contextEdges],
+  };
+  const laidOut = await layoutLevels(detailed, context);
+  // Hiding messages can bridge two systems that a relationship already joins
+  return {
+    ...laidOut,
+    edges: dedupeEdges(laidOut.edges, relationshipPairs),
+    hiddenMessages: {
+      ...laidOut.hiddenMessages,
+      edges: dedupeEdges(laidOut.hiddenMessages.edges, relationshipPairs),
+    },
   };
-  return layoutLevels(detailed, context);
 };

package/eventcatalog/src/utils/node-graphs/systems-node-graph.ts

@@ -15,6 +15,11 @@ interface NodesAndEdgesProps {
   wrapInSystemGroup?: boolean;
   channelRenderMode?: 'single' | 'flat';
   layout?: boolean;
+  // Only parent this system's own services. Services pulled in because they
+  // send or receive the same messages stay in the graph, but outside the group.
+  // The domain diagram leaves this off: it uses the parent to tell which
+  // system's graph a service came from.
+  confineToMembers?: boolean;
 }
 
 export const getNodesAndEdges = async ({
@@ -25,6 +30,7 @@ export const getNodesAndEdges = async ({
   wrapInSystemGroup = false,
   channelRenderMode = 'flat',
   layout = true,
+  confineToMembers = false,
 }: NodesAndEdgesProps) => {
   let nodes = new Map(),
     edges = new Map();
@@ -118,21 +124,52 @@ export const getNodesAndEdges = async ({
     });
   }
 
-  // Wrap everything inside a single parent "system group" boundary node, so all
-  // the services / data stores / messages visibly belong to one system
+  // Wrap the graph in one parent "system group" boundary node. Messages,
+  // channels and data stores stay in it. With confineToMembers, only this
+  // system's own services are children; other services are left outside.
   const graph = {
-    nodes: wrapInSystemGroup && nodes.size > 0 ? wrapNodesInSystemGroup([...nodes.values()], system) : [...nodes.values()],
+    nodes:
+      wrapInSystemGroup && nodes.size > 0
+        ? wrapNodesInSystemGroup(
+            [...nodes.values()],
+            system,
+            confineToMembers ? memberServiceNodeIds(system, serviceMap) : undefined
+          )
+        : [...nodes.values()],
     edges: [...edges.values()],
   };
 
   return layout ? layoutNodeGraph(graph) : graph;
 };
 
+/** Service and agent nodes. Anything else in the graph (messages, channels, data stores) stays with the system. */
+export const SERVICE_NODE_TYPES = new Set(['services', 'agents']);
+
+/** Node ids of the services a system lists, with `latest` and semver ranges resolved to a real version. */
+export const memberServiceNodeIds = (
+  system: { data: { services?: { id: string; version?: string }[] } },
+  serviceMap: Map<string, { data: { id: string; version?: string } }[]>
+) => {
+  const ids = new Set<string>();
+  for (const ref of system.data.services || []) {
+    const service = findInMap(serviceMap, ref.id, ref.version);
+    if (service) ids.add(`${service.data.id}-${service.data.version}`);
+  }
+  return ids;
+};
+
+const withoutGroupParent = (node: any) => {
+  const { parentId, extent, ...rest } = node;
+  return rest;
+};
+
 /**
  * Wraps a system's nodes in one parent `system-group` node (sized to fit them
  * when the graph is laid out), so they visibly belong to the system.
+ * When `memberIds` is set, service and agent nodes that aren't members are
+ * left outside the group.
  */
-const wrapNodesInSystemGroup = (systemNodes: any[], system: any) => {
+const wrapNodesInSystemGroup = (systemNodes: any[], system: any, memberIds?: Set<string>) => {
   const groupId = `system-group-${system.data.id}-${system.data.version}`;
 
   const groupNode = {
@@ -149,5 +186,11 @@ const wrapNodesInSystemGroup = (systemNodes: any[], system: any) => {
   };
 
   // Parent must come before its children in the array for React Flow
-  return [groupNode, ...systemNodes.map((node) => ({ ...node, parentId: groupId, extent: 'parent' }))];
+  return [
+    groupNode,
+    ...systemNodes.map((node) => {
+      if (memberIds && SERVICE_NODE_TYPES.has(node.type) && !memberIds.has(node.id)) return withoutGroupParent(node);
+      return { ...node, parentId: groupId, extent: 'parent' };
+    }),
+  ];
 };

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "BUSL-1.1",
   "type": "module",
-  "version": "5.4.0",
+  "version": "5.4.2",
   "publishConfig": {
     "access": "public"
   },
@@ -141,11 +141,11 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.6.6",
+    "@eventcatalog/exporters": "0.1.2",
     "@eventcatalog/fitness": "0.1.0",
-    "@eventcatalog/sdk": "2.31.2",
     "@eventcatalog/linter": "1.2.4",
-    "@eventcatalog/exporters": "0.1.2",
-    "@eventcatalog/visualiser": "^5.0.0"
+    "@eventcatalog/sdk": "2.31.2",
+    "@eventcatalog/visualiser": "^5.0.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",

package/dist/{chunk-6K7XZAYI.js → chunk-A2RZR3U4.js}

@@ -1,9 +1,9 @@
-import {
-  createGitHubSourceProvider
-} from "./chunk-352FGP6W.js";
 import {
   createFileSystemSourceProvider
 } from "./chunk-SDZQJTJW.js";
+import {
+  createGitHubSourceProvider
+} from "./chunk-352FGP6W.js";
 
 // src/federation/source-provider.ts
 var createFederationSourceProvider = (projectDirectory, providers = {}) => {