@eventcatalog/core 5.0.0-beta.4 → 5.0.0-beta.6

package/eventcatalog/src/features/studio/server/tool-icons.ts

@@ -0,0 +1,30 @@
+import type { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+
+/** A tool icon (MCP 2025-11-25) */
+export type ToolIcon = { src: string; mimeType?: string; sizes?: string[] };
+type ListTools = (request: unknown, extra: unknown) => Promise<{ tools: { name: string }[] }>;
+
+/** The SDK's request handlers (private in SDK 1.x, so checked rather than assumed) */
+const getRequestHandlers = (server: McpServer): Map<string, ListTools> | undefined => {
+  const handlers: unknown = Reflect.get(server.server, '_requestHandlers');
+  return handlers instanceof Map ? handlers : undefined;
+};
+
+/**
+ * Adds icons to tools in tools/list (MCP 2025-11-25 tool icons, which ChatGPT shows on entrypoints). The MCP
+ * TypeScript SDK 1.x doesn't list tool icons, so this wraps its tools/list handler. If a new SDK changes how
+ * it keeps handlers, tools are listed without icons and this says so.
+ */
+export const addToolIcons = (server: McpServer, icons: Record<string, ToolIcon[]>) => {
+  const handlers = getRequestHandlers(server);
+  const listTools = handlers?.get('tools/list');
+  if (!handlers || !listTools) {
+    console.warn('[EventCatalog MCP] Could not add tool icons: the MCP SDK no longer exposes its tools/list handler');
+    return false;
+  }
+  handlers.set('tools/list', async (request, extra) => {
+    const result = await listTools(request, extra);
+    return { ...result, tools: result.tools.map((tool) => (icons[tool.name] ? { ...tool, icons: icons[tool.name] } : tool)) };
+  });
+  return true;
+};

package/eventcatalog/src/features/studio/studio.css

@@ -0,0 +1,89 @@
+/*
+ * The visualiser hides node handles (it is read only), here they are the connection points,
+ * so show them on hover, on selection and while connecting.
+ */
+.studio-canvas .react-flow__handle {
+  opacity: 0 !important;
+  width: 11px;
+  height: 11px;
+  background: rgb(var(--ec-card-bg));
+  border: 2px solid rgb(var(--ec-accent));
+  transition: opacity 0.15s ease;
+  z-index: 30;
+}
+
+.studio-canvas .react-flow__node:hover .react-flow__handle,
+.studio-canvas .react-flow__node.selected .react-flow__handle,
+.studio-canvas .react-flow__pane.connecting ~ * .react-flow__handle,
+.studio-canvas .react-flow__handle.connectingto {
+  opacity: 1 !important;
+}
+
+.studio-canvas .react-flow__handle:hover,
+.studio-canvas .react-flow__handle.connectingto {
+  background: rgb(var(--ec-accent));
+}
+
+.studio-canvas .react-flow__handle.connectingto.valid {
+  background: rgb(var(--ec-badge-color-green-text));
+  border-color: rgb(var(--ec-badge-color-green-text));
+}
+
+.studio-canvas .react-flow__edge.selected .react-flow__edge-path,
+.studio-canvas .react-flow__edge:hover .react-flow__edge-path {
+  stroke: rgb(var(--ec-accent)) !important;
+  stroke-width: 2px !important;
+}
+
+/* Comment mode (C): click anywhere to drop a comment */
+.studio-canvas.comment-mode .react-flow__pane,
+.studio-canvas.comment-mode .react-flow__node {
+  cursor: crosshair !important;
+}
+
+/* After a layout or a level change, nodes glide to their new place */
+.studio-canvas.is-layout-transition .react-flow__node {
+  transition: transform 450ms ease;
+}
+
+/* Edges are drawn where the nodes end up, so they wait for the glide to finish */
+.studio-canvas .react-flow__edges {
+  transition: opacity 200ms ease;
+}
+.studio-canvas.is-layout-transition .react-flow__edges {
+  opacity: 0;
+  transition: none;
+}
+
+/* Nodes pop in when they're added (by anyone, people or agents) */
+@keyframes studio-node-in {
+  from {
+    opacity: 0;
+    scale: 0.85;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+.studio-canvas .react-flow__node {
+  animation: studio-node-in 220ms ease-out;
+}
+
+/* No React Flow attribution on the canvas */
+.studio-canvas .react-flow__attribution {
+  display: none;
+}
+
+/*
+ * Containers let the pointer through their body to the canvas (so dragging inside one draws a selection box),
+ * and are moved, selected and resized by their header and resize handles. React Flow sets pointer-events inline.
+ */
+.studio-canvas .react-flow__node-domain-group,
+.studio-canvas .react-flow__node-system-group {
+  pointer-events: none !important;
+}
+.studio-canvas .react-flow__node-domain-group :is(.ec-group-grip, .react-flow__resize-control),
+.studio-canvas .react-flow__node-system-group :is(.ec-group-grip, .react-flow__resize-control) {
+  pointer-events: auto;
+}

package/eventcatalog/src/features/studio/tool-sync.ts

@@ -0,0 +1,75 @@
+import * as Y from 'yjs';
+import { applyAwarenessUpdate, encodeAwarenessUpdate, type Awareness } from 'y-protocols/awareness';
+import type { Status } from './hooks/use-studio-flow';
+
+/**
+ * Syncing a canvas through MCP tool calls, for when a view can't open the collaboration WebSocket
+ * (e.g. an MCP App inside a chat whose sandbox blocks it). Each call sends the server what it doesn't have
+ * yet (by its state vector) and our presence, and gets back what we don't have and everyone's presence.
+ * Slower than the WebSocket (it polls), but works wherever the chat can call the MCP server's tools.
+ */
+
+export type SyncRequest = {
+  canvasId: string;
+  clientId: number;
+  /** What we have, so the server sends only what we're missing */
+  stateVector: string;
+  /** What we have that the server doesn't (as of its last state vector) */
+  update: string;
+  /** Our presence (name, pointer, selection...) */
+  awareness: string;
+};
+export type SyncResponse = { update: string; stateVector: string; awareness?: string };
+export type ToolSync = (request: SyncRequest) => Promise<SyncResponse>;
+
+// Binary Yjs updates travel as base64 in tool arguments and results (atob/btoa exist in browsers and Node)
+export const toBase64 = (bytes: Uint8Array) => {
+  let text = '';
+  for (let i = 0; i < bytes.length; i += 0x8000) text += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+  return btoa(text);
+};
+export const fromBase64 = (text: string) => Uint8Array.from(atob(text), (char) => char.charCodeAt(0));
+
+/** Applied with this origin, so undo (which tracks local changes) leaves other people's changes alone */
+const REMOTE = Symbol('tool-sync');
+
+export function startToolSync(
+  doc: Y.Doc,
+  awareness: Awareness,
+  {
+    canvasId,
+    sync,
+    onStatus,
+    intervalMs = 1000,
+  }: { canvasId: string; sync: ToolSync; onStatus: (status: Status) => void; intervalMs?: number }
+) {
+  let serverVector: Uint8Array | undefined;
+  let stopped = false;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const tick = async () => {
+    try {
+      const response = await sync({
+        canvasId,
+        clientId: doc.clientID,
+        stateVector: toBase64(Y.encodeStateVector(doc)),
+        update: toBase64(Y.encodeStateAsUpdate(doc, serverVector)),
+        awareness: toBase64(encodeAwarenessUpdate(awareness, [doc.clientID])),
+      });
+      if (stopped) return;
+      Y.applyUpdate(doc, fromBase64(response.update), REMOTE);
+      serverVector = fromBase64(response.stateVector);
+      if (response.awareness) applyAwarenessUpdate(awareness, fromBase64(response.awareness), REMOTE);
+      onStatus('connected');
+    } catch {
+      if (!stopped) onStatus('disconnected');
+    }
+    if (!stopped) timer = setTimeout(tick, intervalMs);
+  };
+  void tick();
+
+  return () => {
+    stopped = true;
+    clearTimeout(timer);
+  };
+}

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -52,7 +52,7 @@ import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/collections/queries';
 import { getFirstNavigationPage } from '@features/custom-documentation/utils/custom-docs';
 
-import { isSSR } from '@utils/feature';
+import { isCanvasEnabled, isSSR } from '@utils/feature';
 
 const customDocs = await getCollection('customPages');
 const firstCustomDocsPage = customDocs.length > 0 ? await getFirstNavigationPage() : null;
@@ -292,7 +292,12 @@ const builtinNavigationItems: Record<string, Omit<VerticalNavigationItem, 'curre
 const defaultNavigationGroups: NavigationGroupConfig[] = [
   {
     id: 'main',
-    items: [{ id: '/' }, { id: '/docs/custom', visible: customDocs.length > 0 }],
+    items: [
+      { id: '/' },
+      { id: '/docs/custom', visible: customDocs.length > 0 },
+      // Collaborative canvases, where they're on
+      { id: '/studio', visible: isCanvasEnabled() },
+    ],
   },
   {
     id: 'browse',
@@ -371,6 +376,8 @@ const resolveNavigationItem = (item: NavigationItemConfig): VerticalNavigationIt
   if (item.visible === false) return null;
 
   const builtinId = navigationBuiltinAliases[item.id] || item.id;
+  // Studio is only there where canvases are on
+  if (builtinId === '/studio' && !item.href && !isCanvasEnabled()) return null;
   const builtin = builtinNavigationItems[builtinId];
   const href = item.href ? normalizeNavigationHref(item.href) : builtin?.href;
 

package/eventcatalog/src/utils/feature.ts

@@ -27,4 +27,8 @@ export const isAuthEnabled = () =>
   (config?.auth?.enabled ?? false) && fs.existsSync(join(projectDirectory(), 'eventcatalog.auth.js')) && isSSR();
 
 export const isEventCatalogMCPEnabled = () => isSSR() && (config?.mcp?.enabled ?? true);
+
+// Collaborative canvases (EventCatalog Studio, /studio) are an experiment: only on the dev server for now. Canvases live in memory, and
+// the collaboration socket and canvas tools don't check sessions yet, so they're off when authentication is on.
+export const isCanvasEnabled = () => isDevMode() && !isAuthEnabled();
 export const isEventCatalogMCPAuthEnabled = () => isEventCatalogMCPEnabled() && (config?.mcp?.auth?.enabled ?? false);

package/eventcatalog/src/utils/trial.ts

@@ -1,4 +1,4 @@
-export const TRIAL_LENGTH_DAYS = 90;
+export const TRIAL_LENGTH_DAYS = 60;
 
 export const LICENSE_FAQ_URL = 'https://www.eventcatalog.dev/license-faq';
 

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "BUSL-1.1",
   "type": "module",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.6",
   "publishConfig": {
     "access": "public"
   },
@@ -60,7 +60,11 @@
     "@fontsource/inter": "^5.2.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
+    "@hocuspocus/provider": "^4.7.0",
+    "@hocuspocus/server": "^4.7.0",
     "@iconify-json/logos": "^1.2.4",
+    "@mcp-b/webmcp-local-relay": "5.1.0",
+    "@mcp-b/webmcp-polyfill": "5.1.0",
     "@mermaid-js/layout-elk": "^0.2.0",
     "@modelcontextprotocol/ext-apps": "^1.7.5",
     "@modelcontextprotocol/sdk": "^1.30.0",
@@ -113,6 +117,7 @@
     "picomatch": "^4.0.4",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-hotkeys-hook": "^5.3.3",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^16.1.1",
     "recast": "^0.23.11",
@@ -132,9 +137,11 @@
     "unist-util-visit": "^5.0.0",
     "update-notifier": "^7.3.1",
     "uuid": "^11.1.1",
+    "y-protocols": "^1.0.7",
+    "yjs": "^13.6.33",
     "zod": "^4.3.6",
     "@eventcatalog/linter": "1.2.0-beta.1",
-    "@eventcatalog/visualiser": "^5.0.0-beta.2",
+    "@eventcatalog/visualiser": "^5.0.0-beta.3",
     "@eventcatalog/sdk": "2.30.0-beta.0"
   },
   "devDependencies": {

package/eventcatalog/src/components/Studio/StudioPageModal.tsx

@@ -1,150 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { ExternalLinkIcon, CheckIcon, ClipboardIcon, Loader2 } from 'lucide-react';
-
-const StudioPageModal: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [copySuccess, setCopySuccess] = useState(false);
-  const [hasCopied, setHasCopied] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const handleOpen = () => setIsOpen(true);
-    window.addEventListener('openStudioModal', handleOpen);
-    return () => window.removeEventListener('openStudioModal', handleOpen);
-  }, []);
-
-  const handleCopyResources = async () => {
-    setIsLoading(true);
-    setError(null);
-
-    try {
-      const response = await fetch('/api/catalog');
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch catalog data');
-      }
-
-      const catalogData = await response.json();
-
-      await navigator.clipboard.writeText(JSON.stringify(catalogData, null, 2));
-      setCopySuccess(true);
-      setHasCopied(true);
-      setTimeout(() => setCopySuccess(false), 2000);
-    } catch (err) {
-      console.error('Failed to copy resources:', err);
-      setError('Failed to copy resources. Please try again.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleOpenStudio = () => {
-    window.open(
-      'https://app.eventcatalog.studio/playground?import-resources=true&utm_source=eventcatalog&utm_medium=referral&utm_campaign=studio-page',
-      '_blank'
-    );
-    setIsOpen(false);
-  };
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-hidden data-[state=open]:animate-contentShow z-[100]">
-          <Dialog.Title className="text-lg font-semibold text-gray-900 mb-3">Open EventCatalog Studio</Dialog.Title>
-
-          <Dialog.Description className="text-sm text-gray-600 mb-6">
-            Import your catalog resources into{' '}
-            <a
-              href="https://eventcatalog.studio"
-              className="text-gray-900 hover:text-gray-700 underline font-semibold"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              EventCatalog Studio
-            </a>{' '}
-            to create architecture diagrams.
-          </Dialog.Description>
-
-          <div className="space-y-4">
-            {/* Step 1: Copy Resources */}
-            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 1: Copy your resources</h4>
-              <p className="text-xs text-gray-600 mb-3">Copy your EventCatalog resources to your clipboard.</p>
-
-              <button
-                onClick={handleCopyResources}
-                disabled={isLoading}
-                className={`w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${
-                  copySuccess
-                    ? 'bg-green-50 border-green-200 text-green-700'
-                    : isLoading
-                      ? 'bg-gray-100 border-gray-300 text-gray-400 cursor-not-allowed'
-                      : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
-                }`}
-              >
-                {isLoading ? (
-                  <>
-                    <Loader2 className="w-4 h-4 animate-spin" />
-                    <span>Loading resources...</span>
-                  </>
-                ) : copySuccess ? (
-                  <>
-                    <CheckIcon className="w-4 h-4" />
-                    <span>Copied!</span>
-                  </>
-                ) : (
-                  <>
-                    <ClipboardIcon className="w-4 h-4" />
-                    <span>Copy resources to clipboard</span>
-                  </>
-                )}
-              </button>
-
-              {error && <p className="text-xs text-red-600 mt-2">{error}</p>}
-            </div>
-
-            {/* Step 2: Open Studio */}
-            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
-              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 2: Open EventCatalog Studio</h4>
-              <p className="text-xs text-gray-600 mb-3">
-                Go to EventCatalog Studio and paste your resources into the modal dialog.
-              </p>
-
-              <button
-                onClick={handleOpenStudio}
-                disabled={!hasCopied}
-                className={`w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                  hasCopied ? 'bg-gray-900 text-white hover:bg-gray-800' : 'bg-gray-300 text-gray-500 cursor-not-allowed'
-                }`}
-              >
-                <ExternalLinkIcon className="w-4 h-4" />
-                <span>Open EventCatalog Studio</span>
-              </button>
-
-              <p className="text-[12px] text-gray-500 italic mt-4 mb-0">
-                All data is stored locally in your browser. Nothing is sent to external servers.
-              </p>
-            </div>
-          </div>
-
-          <div className="mt-6 flex justify-end">
-            <Dialog.Close asChild>
-              <button
-                type="button"
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
-                onClick={() => setIsOpen(false)}
-              >
-                Close
-              </button>
-            </Dialog.Close>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-};
-
-export default StudioPageModal;