@eventcatalog/core 5.0.0-beta.11 → 5.0.0-beta.13

package/README.md

@@ -1,7 +1,7 @@
 <div align="center">
 
 <!-- <h1>📖 EventCatalog</h1> -->
-<!-- <h3>The open source tool to help you discover and document your event-driven architectures</h3> -->
+<!-- <h3>The source-available tool to help you discover and document your event-driven architectures</h3> -->
 
 
 

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.11";
+var version = "5.0.0-beta.13";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,8 +1,8 @@
 import {
   raiseEvent
-} from "../chunk-4YFM63DS.js";
+} from "../chunk-JPT3QC5V.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-MFEMKQZ6.js";
+import "../chunk-BO2HHVZ3.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -176,7 +176,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.11";
+var version = "5.0.0-beta.13";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,11 +1,11 @@
 import {
   log_build_default
-} from "../chunk-76DAAJLV.js";
-import "../chunk-AWOO63ME.js";
+} from "../chunk-PLTLW45Q.js";
+import "../chunk-JPT3QC5V.js";
 import "../chunk-ZAZHAVKB.js";
-import "../chunk-4YFM63DS.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-MFEMKQZ6.js";
+import "../chunk-AWOO63ME.js";
+import "../chunk-BO2HHVZ3.js";
 import "../chunk-RFIXKATC.js";
 export {
   log_build_default as default

package/dist/catalog-runtime.cjs

@@ -36,7 +36,7 @@ __export(catalog_runtime_exports, {
 });
 module.exports = __toCommonJS(catalog_runtime_exports);
 
-// ../../node_modules/.pnpm/tsup@8.5.0_jiti@2.7.0_postcss@8.5.15_tsx@4.21.0_typescript@5.9.3_yaml@2.9.0/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.5.0_jiti@2.7.0_postcss@8.5.29_tsx@4.23.15_typescript@5.9.3_yaml@2.9.0/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 

package/dist/{chunk-MFEMKQZ6.js → chunk-BO2HHVZ3.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "5.0.0-beta.11";
+var version = "5.0.0-beta.13";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-4YFM63DS.js → chunk-JPT3QC5V.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-CPW6G62V.js";
 import {
   VERSION
-} from "./chunk-MFEMKQZ6.js";
+} from "./chunk-BO2HHVZ3.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-76DAAJLV.js → chunk-PLTLW45Q.js}

@@ -1,18 +1,18 @@
 import {
-  getLicenseAnalytics
-} from "./chunk-AWOO63ME.js";
+  raiseEvent
+} from "./chunk-JPT3QC5V.js";
 import {
   countResources,
   hashCatalogContent,
   serializeCounts
 } from "./chunk-ZAZHAVKB.js";
-import {
-  raiseEvent
-} from "./chunk-4YFM63DS.js";
 import {
   TELEMETRY_REQUEST_TIMEOUT_MS,
   isTelemetryDisabled
 } from "./chunk-CPW6G62V.js";
+import {
+  getLicenseAnalytics
+} from "./chunk-AWOO63ME.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-WM4QYMIA.js → chunk-T75DOVFP.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-LQZ7IG7B.js";
+} from "./chunk-XA5W6DXX.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-LQZ7IG7B.js → chunk-XA5W6DXX.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-MFEMKQZ6.js";
+} from "./chunk-BO2HHVZ3.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "5.0.0-beta.11";
+var version = "5.0.0-beta.13";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-MFEMKQZ6.js";
+} from "./chunk-BO2HHVZ3.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -22,7 +22,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.5.0_jiti@2.7.0_postcss@8.5.15_tsx@4.21.0_typescript@5.9.3_yaml@2.9.0/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.5.0_jiti@2.7.0_postcss@8.5.29_tsx@4.23.15_typescript@5.9.3_yaml@2.9.0/node_modules/tsup/assets/cjs_shims.js
 var getImportMetaUrl = () => typeof document === "undefined" ? new URL(`file:${__filename}`).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
 var importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
 
@@ -181,7 +181,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.11";
+var version = "5.0.0-beta.13";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -1,28 +1,29 @@
+import {
+  log_build_default
+} from "./chunk-PLTLW45Q.js";
+import "./chunk-JPT3QC5V.js";
+import "./chunk-ZAZHAVKB.js";
+import "./chunk-CPW6G62V.js";
 import {
   runMigrations
 } from "./chunk-XUAF2H54.js";
 import "./chunk-CA4U2JP7.js";
-import {
-  log_build_default
-} from "./chunk-76DAAJLV.js";
 import {
   getLicenseStatus,
   printLicenseStatus
 } from "./chunk-AWOO63ME.js";
-import "./chunk-ZAZHAVKB.js";
 import {
   FederationConflictError,
   FederationDiagnosticError,
   federateCatalog
-} from "./chunk-KHACCTW2.js";
-import "./chunk-WRNH5C3U.js";
-import "./chunk-5EPNFDT5.js";
-import "./chunk-A2RZR3U4.js";
-import "./chunk-R7Z5ALYI.js";
+} from "./chunk-ZEY2XUJN.js";
 import {
   getFederationDiagnosticCounts,
   getVisibleFederationDiagnostics
 } from "./chunk-JJPB6EOZ.js";
+import "./chunk-WRNH5C3U.js";
+import "./chunk-5EPNFDT5.js";
+import "./chunk-A2RZR3U4.js";
 import "./chunk-SDZQJTJW.js";
 import "./chunk-352FGP6W.js";
 import {
@@ -33,10 +34,10 @@ import {
 } from "./chunk-MDWB5HLO.js";
 import {
   generate
-} from "./chunk-WM4QYMIA.js";
+} from "./chunk-T75DOVFP.js";
 import {
   logger
-} from "./chunk-LQZ7IG7B.js";
+} from "./chunk-XA5W6DXX.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-36RYTYT5.js";
@@ -50,8 +51,7 @@ import {
 import {
   watch
 } from "./chunk-U63GDPPY.js";
-import "./chunk-4YFM63DS.js";
-import "./chunk-CPW6G62V.js";
+import "./chunk-R7Z5ALYI.js";
 import {
   getAstroConfigPath
 } from "./chunk-VIJJ7JKH.js";
@@ -67,7 +67,7 @@ import {
 } from "./chunk-LFQJXLHG.js";
 import {
   VERSION
-} from "./chunk-MFEMKQZ6.js";
+} from "./chunk-BO2HHVZ3.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/federation/federate.js

@@ -2,14 +2,14 @@ import {
   FederationConflictError,
   FederationDiagnosticError,
   federateCatalog
-} from "../chunk-KHACCTW2.js";
+} from "../chunk-ZEY2XUJN.js";
+import "../chunk-JJPB6EOZ.js";
 import "../chunk-WRNH5C3U.js";
 import "../chunk-5EPNFDT5.js";
 import "../chunk-A2RZR3U4.js";
-import "../chunk-R7Z5ALYI.js";
-import "../chunk-JJPB6EOZ.js";
 import "../chunk-SDZQJTJW.js";
 import "../chunk-352FGP6W.js";
+import "../chunk-R7Z5ALYI.js";
 import "../chunk-RFIXKATC.js";
 export {
   FederationConflictError,

package/dist/generate.cjs

@@ -112,7 +112,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.11";
+var version = "5.0.0-beta.13";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-WM4QYMIA.js";
-import "./chunk-LQZ7IG7B.js";
-import "./chunk-MFEMKQZ6.js";
+} from "./chunk-T75DOVFP.js";
+import "./chunk-XA5W6DXX.js";
+import "./chunk-BO2HHVZ3.js";
 import "./chunk-RFIXKATC.js";
 export {
   generate

package/dist/runtime-dependencies/@eventcatalog__visualiser__studio-fonts.css.mjs

@@ -0,0 +1,3 @@
+export * from "@eventcatalog/visualiser/studio-fonts.css";
+import * as dependency from "@eventcatalog/visualiser/studio-fonts.css";
+export default dependency.default;

package/dist/runtime-dependencies/@eventcatalog__visualiser__studio.css.mjs

@@ -0,0 +1,3 @@
+export * from "@eventcatalog/visualiser/studio.css";
+import * as dependency from "@eventcatalog/visualiser/studio.css";
+export default dependency.default;

package/dist/runtime-dependencies/@eventcatalog__visualiser__studio.mjs

@@ -0,0 +1,3 @@
+export * from "@eventcatalog/visualiser/studio";
+import * as dependency from "@eventcatalog/visualiser/studio";
+export default dependency.default;

package/dist/runtime-dependencies/manifest.json

@@ -21,6 +21,9 @@
   "@eventcatalog/sdk": "@eventcatalog__sdk.mjs",
   "@eventcatalog/visualiser": "@eventcatalog__visualiser.mjs",
   "@eventcatalog/visualiser/layout": "@eventcatalog__visualiser__layout.mjs",
+  "@eventcatalog/visualiser/studio": "@eventcatalog__visualiser__studio.mjs",
+  "@eventcatalog/visualiser/studio-fonts.css": "@eventcatalog__visualiser__studio-fonts.css.mjs",
+  "@eventcatalog/visualiser/studio.css": "@eventcatalog__visualiser__studio.css.mjs",
   "@eventcatalog/visualiser/styles-core.css": "@eventcatalog__visualiser__styles-core.css.mjs",
   "@fontsource/inter": "@fontsource__inter.mjs",
   "@fontsource/inter/400.css": "@fontsource__inter__400.css.mjs",

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.11";
+var version = "5.0.0-beta.13";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-LQZ7IG7B.js";
-import "../chunk-MFEMKQZ6.js";
+} from "../chunk-XA5W6DXX.js";
+import "../chunk-BO2HHVZ3.js";
 export {
   logger
 };

package/eventcatalog/src/components/ChatPanel/ChatPanel.tsx

@@ -29,6 +29,8 @@ const CHAT_PANEL_STYLES = `
   }
   .ec-chat-surface { font-weight: 400; }
   .ec-chat-avatar { background: rgb(var(--ec-accent) / .06); animation: ec-chat-breathe 5s ease-in-out infinite; }
+  /* The closed panel stays on the page (off screen): a running animation there still costs every frame */
+  .ec-chat-surface[aria-hidden='true'] .ec-chat-avatar { animation-play-state: paused; }
   .ec-chat-suggestion { width: fit-content; max-width: 100%; transition: background 180ms, transform 180ms; }
   .ec-chat-suggestion:hover { transform: translateX(3px); }
   .ec-chat-message { animation: fadeInUp 280ms ease-out both; }

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

@@ -12,10 +12,16 @@
  * CSS ships in the page head and survives ClientRouter navigations (see NodeGraph.astro).
  */
 
-import { useCallback, lazy, Suspense } from 'react';
+import { useCallback, useState, lazy, Suspense } from 'react';
 import type { Node, Edge } from '@xyflow/react';
-import type { FlowGroupBy } from '@eventcatalog/visualiser';
+import type { FlowGroupBy, OpenInStudioRequest } from '@eventcatalog/visualiser';
 import { buildUrl } from '@utils/url-builder';
+import { createCanvasThroughApi } from '@features/studio/api/client';
+import { getStoredName } from '@features/studio/identity';
+
+// Studio's canvas code (what turns a diagram into a canvas, and the dialog asking for its name) is only loaded when a
+// diagram is opened in Studio: every page with a diagram would load it otherwise, with Studio on or not
+const OpenInStudioDialog = lazy(() => import('@features/studio/components/OpenInStudioDialog'));
 
 const NodeGraph = lazy(() =>
   import('@eventcatalog/visualiser').then((module) => ({ default: module.NodeGraph }))
@@ -57,9 +63,11 @@ interface AstroNodeGraphProps {
   preferenceScope?: string;
   // Group a flow's steps into swimlanes to start with
   swimlanes?: FlowGroupBy;
+  // The Studio API's address, when Studio is on: the menu can then start a canvas from the diagram
+  studioApiUrl?: string;
 }
 
-const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: AstroNodeGraphProps) => {
+const AstroNodeGraph = ({ isDevMode = false, resourceKey, studioApiUrl, ...otherProps }: AstroNodeGraphProps) => {
   // Astro-specific navigation handler
   const handleNavigate = useCallback((url: string) => {
     // Use window.location for navigation since we can't import astro:transitions/client in a React component
@@ -108,6 +116,30 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: Astro
     }
   }, []);
 
+  // Opening the diagram in Studio: asks what to call the canvas, then makes it with what the diagram shows and opens
+  // it (in this tab) at the level shown. What it shows is only taken once it's named (laying a level out can take a
+  // moment), and anything that goes wrong is shown in the dialog.
+  const [toOpen, setToOpen] = useState<OpenInStudioRequest | null>(null);
+  const closeOpenInStudio = useCallback(() => setToOpen(null), []);
+  const openInStudio = useCallback(
+    async (title: string | undefined) => {
+      if (!studioApiUrl || !toOpen) return;
+      const snapshot = await toOpen.getSnapshot();
+      const { canvasFromVisualiser } = await import('@features/studio/from-visualiser');
+      const { nodes, edges, levels } = canvasFromVisualiser(snapshot);
+      if (nodes.length === 0) throw new Error('Nothing on this diagram can go on a canvas yet');
+      const canvas = await createCanvasThroughApi(studioApiUrl, {
+        title,
+        createdBy: getStoredName() ?? undefined,
+        nodes,
+        edges,
+        levels,
+      });
+      window.location.assign(snapshot.level === 3 ? canvas.url : `${canvas.url}?level=${snapshot.level}`);
+    },
+    [studioApiUrl, toOpen]
+  );
+
   return (
     <Suspense fallback={<div>Loading graph...</div>}>
       <NodeGraph
@@ -118,7 +150,14 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: Astro
         onBuildUrl={handleBuildUrl}
         onSaveLayout={handleSaveLayout}
         onResetLayout={handleResetLayout}
+        onOpenInStudio={studioApiUrl ? setToOpen : undefined}
       />
+      {toOpen && (
+        // Its own, so the diagram isn't swapped for "Loading graph..." while the dialog loads
+        <Suspense fallback={null}>
+          <OpenInStudioDialog title={toOpen.title} onOpen={openInStudio} onClose={closeOpenInStudio} />
+        </Suspense>
+      )}
     </Suspense>
   );
 };

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

@@ -31,11 +31,14 @@ import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForChannel } from '@utils/node-graphs/channel-node-graph';
 import config from '@config';
-import { isEventCatalogChatVisible, isDevMode } from '@utils/feature';
+import { isEventCatalogChatVisible, isDevMode, isCanvasEnabled } from '@utils/feature';
+import { CANVASES_API_PATH } from '@features/studio/api/canvases-api';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 import { compactVisualiserGraph } from '@utils/node-graphs/compact-visualiser-graph';
 
 const isChatEnabled = isEventCatalogChatVisible();
+// With Studio on, the menu can start a canvas from the diagram
+const studioApiUrl = isCanvasEnabled() ? buildUrl(CANVASES_API_PATH, true) : undefined;
 
 interface Props {
   id: string;
@@ -257,6 +260,7 @@ if (overview && levelsOverview) {
     hiddenMessagesGraph={hiddenMessagesGraph}
     preferenceScope={collection}
     swimlanes={lanes}
+    studioApiUrl={studioApiUrl}
   />
 </div>
 

package/eventcatalog/src/components/NavigationProgress.astro

@@ -22,12 +22,19 @@
     opacity: 1;
   }
 
+  /* On every page, hidden until a navigation takes a while: paused until then (a running animation costs a style
+     recalc and paint on every frame, even when it can't be seen) */
   .navigation-progress__bar {
     width: 35%;
     height: 100%;
     background: rgb(var(--ec-accent));
     box-shadow: 0 0 10px rgb(var(--ec-accent) / 0.55);
     animation: navigation-progress 1.1s ease-in-out infinite;
+    animation-play-state: paused;
+  }
+
+  #navigation-progress[data-visible='true'] .navigation-progress__bar {
+    animation-play-state: running;
   }
 
   :global([data-navigation-pending='true']) {

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