@eventcatalog/core 5.0.0-beta.8 → 5.0.0

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