@eventcatalog/core 5.5.1 → 5.5.2

package/eventcatalog/src/features/mcp/apps/schema-viewer/view.tsx

@@ -12,6 +12,7 @@ import AvroSchemaViewer from '../../../../components/SchemaExplorer/AvroSchemaVi
 import ProtobufSchemaViewer from '../../../../components/SchemaExplorer/ProtobufSchemaViewer';
 import { SchemaCode } from './schema-code';
 import { RESOURCE_TYPE_LABELS } from '../shared/resource-types';
+import { fullscreenStyle } from '../shared/app-view';
 import type { SchemaViewerPayload, SchemaViewerSchema } from './shared';
 
 const INLINE_MAX_HEIGHT = '560px';
@@ -75,7 +76,7 @@ export function SchemaViewerView({ app, payload, hostContext }: SchemaViewerView
     'inline-flex h-7 items-center gap-1.5 rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] px-2.5 text-xs font-medium text-[rgb(var(--ec-page-text))] transition-colors hover:border-[rgb(var(--ec-accent))] hover:text-[rgb(var(--ec-accent))]';
 
   return (
-    <div className={`flex flex-col ${isFullscreen ? 'h-screen' : ''}`}>
+    <div className="flex flex-col" style={isFullscreen ? fullscreenStyle(hostContext) : undefined}>
       <div className="flex items-center justify-between gap-3 border-b border-[rgb(var(--ec-page-border))] px-3 py-2">
         <div className="flex min-w-0 items-center gap-2 text-[13px]">
           <span className="shrink-0 rounded bg-[rgb(var(--ec-accent-subtle))] px-1.5 py-px text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-accent))]">

package/eventcatalog/src/features/mcp/apps/shared/app-view.tsx

@@ -2,7 +2,7 @@
  * Connecting the EventCatalog viewer MCP App to the host, loading the tool result's payload, following the
  * host's theme and display mode, and mounting the view.
  */
-import { useEffect, useState, type ComponentType } from 'react';
+import { useEffect, useState, type ComponentType, type CSSProperties } from 'react';
 import { config as configureZod } from 'zod';
 import { createRoot } from 'react-dom/client';
 import type { App, McpUiHostContext } from '@modelcontextprotocol/ext-apps';
@@ -20,6 +20,24 @@ const applyTheme = (context?: McpUiHostContext) => {
   if (context?.theme) document.documentElement.setAttribute('data-theme', context.theme);
 };
 
+/**
+ * The view full screen: the height of the frame, kept clear of what the host draws over it on phones (the notch,
+ * the home indicator, the message box), which it reports as safe area insets
+ */
+export const fullscreenStyle = (context?: McpUiHostContext): CSSProperties => {
+  const insets = context?.safeAreaInsets;
+  return {
+    height: '100vh',
+    boxSizing: 'border-box',
+    ...(insets && {
+      paddingTop: insets.top,
+      paddingRight: insets.right,
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+    }),
+  };
+};
+
 type McpAppViewOptions<Payload> = {
   name: string;
   /** Key of the payload in the model-facing tool result's `_meta` */
@@ -61,8 +79,9 @@ export function useMcpAppView<Payload>(options: McpAppViewOptions<Payload>) {
     appInfo: { name: options.name, version: '1.0.0' },
     // The views fit inline and have a full screen button (the server asks hosts to open them full screen)
     capabilities: { availableDisplayModes: ['inline', 'fullscreen'] },
+    // Listeners go on before the view connects: hosts send the tool's result as soon as it has
     onAppCreated: (createdApp) => {
-      createdApp.ontoolresult = (result) => {
+      createdApp.addEventListener('toolresult', (result) => {
         if (result.isError) {
           setError(result.content?.find((item) => item.type === 'text')?.text ?? options.loadErrorMessage);
           return;
@@ -70,11 +89,11 @@ export function useMcpAppView<Payload>(options: McpAppViewOptions<Payload>) {
         loadPayload(createdApp, result, options)
           .then(setPayload)
           .catch((loadError) => setError(String(loadError?.message ?? loadError)));
-      };
-      createdApp.onhostcontextchanged = (context) => {
+      });
+      createdApp.addEventListener('hostcontextchanged', (context) => {
         applyTheme(context);
         setHostContext((previous) => ({ ...previous, ...context }));
-      };
+      });
     },
   });
 

package/eventcatalog/src/features/mcp/mcp-apps.ts

@@ -54,6 +54,8 @@ export type McpAppDefinition<Shape extends z.ZodRawShape, ViewShape extends z.Zo
     csp?: { resourceDomains?: string[]; connectDomains?: string[] };
     /** How hosts open the view: ChatGPT reads these before loading it, so it can open straight in that mode */
     displayModes?: { preferred: McpUiDisplayMode; available: McpUiDisplayMode[] };
+    /** Whether the host frames the view with a border and background (hosts' defaults differ, e.g. Claude's web and mobile apps) */
+    prefersBorder?: boolean;
   };
   /**
    * Ties every result to one view (ChatGPT's `openai/widgetSessionId`): the host updates the view it already
@@ -151,7 +153,10 @@ export function registerMcpApp<Shape extends z.ZodRawShape, ViewShape extends z.
         mimeType: RESOURCE_MIME_TYPE,
         text: await loadView(),
         _meta: {
-          ...(app.resource.csp && { ui: { csp: app.resource.csp } }),
+          ui: {
+            ...(app.resource.csp && { csp: app.resource.csp }),
+            ...(app.resource.prefersBorder !== undefined && { prefersBorder: app.resource.prefersBorder }),
+          },
           ...(app.resource.displayModes && {
             'openai/ui': {
               preferredDisplayMode: app.resource.displayModes.preferred,

package/eventcatalog/src/features/mcp/mcp-server.ts

@@ -512,6 +512,8 @@ function createMcpServer(
       csp: { resourceDomains: [catalogUrl] },
       // Diagrams and schemas need the room, so hosts that can open the viewer full screen straight away
       displayModes: { preferred: 'fullscreen', available: ['inline', 'fullscreen'] },
+      // The viewer has its own background: no frame around it, on the web and on phones alike
+      prefersBorder: false,
     },
     // One viewer per server: each result updates the viewer the host already shows
     sessionId: scope ? `eventcatalog:${scope.ref.kind}:${scope.ref.id}` : 'eventcatalog',

package/eventcatalog/src/features/studio/server/canvas-mcp.ts

@@ -124,6 +124,8 @@ export function registerCanvasTools(server: McpServer, { catalogUrl, userAgent }
       // The view joins the canvas over the collaboration WebSocket, and shows icons served by this EventCatalog
       csp: { connectDomains: [new URL(socketUrl).origin, catalogUrl], resourceDomains: [catalogUrl] },
       displayModes: { preferred: 'fullscreen', available: ['inline', 'fullscreen'] },
+      // The canvas has its own background: no frame around it, on the web and on phones alike
+      prefersBorder: false,
     },
     metaKey: CANVAS_META_KEY,
     tool: {

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

@@ -6,7 +6,8 @@ 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.
+ * Slower than the WebSocket (it polls), but works wherever the chat can call the MCP server's tools. It polls less
+ * while nothing changes, and rarely while the view is out of sight (chats keep every view they showed running).
  */
 
 export type SyncRequest = {
@@ -33,6 +34,11 @@ export const fromBase64 = (text: string) => Uint8Array.from(atob(text), (char) =
 /** Applied with this origin, so undo (which tracks local changes) leaves other people's changes alone */
 const REMOTE = Symbol('tool-sync');
 
+/** Waiting longest between syncs while nothing changes on either side */
+const IDLE_INTERVAL_MS = 5000;
+/** Between syncs while the view is out of sight (slowed, not stopped: a host that wrongly reports it hidden still syncs) */
+const OUT_OF_SIGHT_INTERVAL_MS = 15_000;
+
 export function startToolSync(
   doc: Y.Doc,
   awareness: Awareness,
@@ -44,32 +50,90 @@ export function startToolSync(
   }: { canvasId: string; sync: ToolSync; onStatus: (status: Status) => void; intervalMs?: number }
 ) {
   let serverVector: Uint8Array | undefined;
+  let lastServerVector: string | undefined;
+  let lastAwareness: string | undefined;
   let stopped = false;
+  let syncing = false;
   let timer: ReturnType<typeof setTimeout> | undefined;
+  let dueAt = 0;
+  // Slower while nothing changes (a chat keeps every view it showed running, each polling), back to quick on a change
+  let delay = intervalMs;
+  // Hosts keep a chat's earlier views running: one scrolled out of sight, or in a hidden tab, syncs rarely
+  let inView = true;
+  const isShown = () => inView && document.visibilityState !== 'hidden';
+
+  const schedule = (ms: number) => {
+    clearTimeout(timer);
+    dueAt = Date.now() + ms;
+    timer = setTimeout(tick, ms);
+  };
 
   const tick = async () => {
+    timer = undefined;
+    if (stopped || syncing) return;
+    syncing = true;
     try {
+      const update = Y.encodeStateAsUpdate(doc, serverVector);
       const response = await sync({
         canvasId,
         clientId: doc.clientID,
         stateVector: toBase64(Y.encodeStateVector(doc)),
-        update: toBase64(Y.encodeStateAsUpdate(doc, serverVector)),
+        update: toBase64(update),
         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);
+      // Anything new either way (the canvas, or anyone's presence) keeps it quick
+      const changed = response.stateVector !== lastServerVector || response.awareness !== lastAwareness;
+      lastServerVector = response.stateVector;
+      lastAwareness = response.awareness;
+      delay = changed ? intervalMs : Math.min(delay * 1.5, IDLE_INTERVAL_MS);
       onStatus('connected');
     } catch {
       if (!stopped) onStatus('disconnected');
+    } finally {
+      syncing = false;
     }
-    if (!stopped) timer = setTimeout(tick, intervalMs);
+    // Out of sight: rarely, and straight away again once it's shown (see show)
+    if (!stopped) schedule(isShown() ? delay : Math.max(delay, OUT_OF_SIGHT_INTERVAL_MS));
+  };
+
+  // Our own changes and presence go out within the quick interval, however long it's been waiting
+  const wake = (_update: unknown, origin: unknown) => {
+    if (origin === REMOTE || stopped) return;
+    delay = intervalMs;
+    if (timer && dueAt > Date.now() + intervalMs) schedule(intervalMs);
   };
+  doc.on('update', wake);
+  awareness.on('update', wake);
+
+  const show = () => {
+    if (stopped || !isShown() || syncing || dueAt <= Date.now() + intervalMs) return;
+    clearTimeout(timer);
+    delay = intervalMs;
+    void tick();
+  };
+  document.addEventListener('visibilitychange', show);
+  // Seen from inside the chat's frame: whether the view is on the screen at all
+  const observer =
+    typeof IntersectionObserver === 'undefined'
+      ? undefined
+      : new IntersectionObserver(([entry]) => {
+          inView = entry?.isIntersecting ?? true;
+          show();
+        });
+  observer?.observe(document.documentElement);
+
   void tick();
 
   return () => {
     stopped = true;
     clearTimeout(timer);
+    doc.off('update', wake);
+    awareness.off('update', wake);
+    document.removeEventListener('visibilitychange', show);
+    observer?.disconnect();
   };
 }

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "BUSL-1.1",
   "type": "module",
-  "version": "5.5.1",
+  "version": "5.5.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/linter": "1.2.4",
     "@eventcatalog/sdk": "2.31.2",
-    "@eventcatalog/exporters": "0.1.2",
-    "@eventcatalog/visualiser": "^5.1.0"
+    "@eventcatalog/visualiser": "^5.1.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",

package/dist/{chunk-NCEZDQSW.js → chunk-QJ7KKN2D.js}

@@ -1,10 +1,3 @@
-import {
-  createFederationContentCache
-} from "./chunk-R7Z5ALYI.js";
-import {
-  getFederationDiagnostics,
-  resolveFederationRules
-} from "./chunk-JJPB6EOZ.js";
 import {
   withFederationOutputTransaction
 } from "./chunk-WRNH5C3U.js";
@@ -14,6 +7,13 @@ import {
 import {
   createFederationSourceProvider
 } from "./chunk-A2RZR3U4.js";
+import {
+  createFederationContentCache
+} from "./chunk-R7Z5ALYI.js";
+import {
+  getFederationDiagnostics,
+  resolveFederationRules
+} from "./chunk-JJPB6EOZ.js";
 import {
   getEventCatalogConfigFile
 } from "./chunk-4G7FSRPN.js";