@eventcatalog/core 5.0.0-beta.9 → 5.0.0

package/eventcatalog/src/features/studio/hooks/use-studio-flow.ts

@@ -15,7 +15,6 @@ import {
 import {
   addNodes,
   buildNode,
-  canvasDocumentName,
   connectNodes,
   deleteEdges,
   deleteNodes as deleteNodesInDoc,
@@ -24,7 +23,9 @@ import {
   fitGroupToChildren,
   getCanvasMaps,
   moveNode,
+  placeNode,
   changesNodesOrEdges,
+  getStructureKey,
   getCanvasStatus,
   readMeta,
   reopenIfDecided,
@@ -33,16 +34,41 @@ import {
   setMeta,
   type Author,
   type CanvasStatus,
+  type DiagramLevels,
+  type LevelPlace,
+  readLevelLayout,
+  setLevelPlaces,
   type StatusChange,
-  setNodeParent,
+  setNodeParents,
   type RenderedSizes,
   updateNodeData as updateNodeDataInDoc,
-} from '../canvas-doc';
+  keepDragged,
+  LOCAL_EDGE_KEYS,
+  LOCAL_NODE_KEYS,
+  patchShared,
+  withPositions,
+  createSmoother,
+  containerFor,
+  toRelativePosition,
+  type NodePreview,
+  type LayoutResult,
+  canGoInContainer,
+  getNodeDefinition,
+  isGroupType,
+  createHotspot as createHotspotInDoc,
+  updateHotspot as updateHotspotInDoc,
+  deleteHotspot as deleteHotspotInDoc,
+  readHotspots,
+  getLock,
+  setLock,
+  type Hotspot,
+  type Editing,
+  addThreads,
+  addHotspots,
+  type ModelCanvasContent,
+} from '@eventcatalog/visualiser/studio';
+import { CANVAS_DELETED_REASON, canvasDocumentName } from '../document-name';
 import { applyLayout } from '../agent-choreography';
-import { keepDragged, LOCAL_EDGE_KEYS, LOCAL_NODE_KEYS, patchShared, withPositions } from '../flow-state';
-import { findGroupAtPoint, toRelativePosition, type NodePreview } from '../grouping';
-import type { LayoutResult } from '../layout';
-import { canGoInContainer, getNodeDefinition, isGroupType } from '../node-types';
 import { startToolSync, type ToolSync } from '../tool-sync';
 import { createPresenceSender, type PresenceSender } from './presence-sender';
 import { createPresenceStore, type PresenceStore } from './presence-store';
@@ -66,6 +92,14 @@ const LOCAL_ORIGIN = Symbol('studio-local');
 export const BROWSER_AGENT_ORIGIN = Symbol('studio-browser-agent');
 /** Status changes: synced, but not undone (undo takes back edits, not decisions about the canvas) */
 const STATUS_ORIGIN = Symbol('studio-status');
+/** A diagram file opened into a new canvas: what it starts with, synced, not undone (nothing to go back to) */
+const OPEN_ORIGIN = Symbol('studio-open');
+/** Where L1 and L2 put what's new on them, kept so it stays there: synced, not undone (nobody did it) */
+const LEVEL_PLACEMENT_ORIGIN = Symbol('studio-level-placement');
+
+const NO_LEVEL_LAYOUTS = { 1: new Map(), 2: new Map() } as const;
+/** What someone changing a note or text shows the others as they change it (see `editing` in their presence) */
+const EDITED_FIELDS = ['text', 'fontSize', 'angle'] as const;
 
 export type Status = 'connecting' | 'connected' | 'disconnected';
 export type Transport = 'websocket' | 'tools';
@@ -89,6 +123,7 @@ export function useStudioFlow({
   name,
   color,
   picture,
+  agent,
   syncViaTools,
   onLayout,
   onContainerResize,
@@ -100,6 +135,8 @@ export function useStudioFlow({
   color: string;
   /** From your sign-in provider, when you're signed in */
   picture?: string;
+  /** You're an AI agent here (e.g. a chat's canvas view, which joins as the chat's agent) */
+  agent?: boolean;
   /** Sync through MCP tool calls when the WebSocket can't connect (e.g. inside a chat's sandbox) */
   syncViaTools?: ToolSync;
   /** Someone laid the canvas out (us included): called as the new positions arrive, so they can glide there */
@@ -120,10 +157,25 @@ export function useStudioFlow({
   const [doc, setDoc] = useState<Y.Doc | null>(null);
   const [history, setHistory] = useState({ canUndo: false, canRedo: false });
   const [title, setTitle] = useState<string | undefined>();
+  // L1 and L2 of the diagram the canvas was opened from, if it was
+  const [diagramLevels, setDiagramLevels] = useState<DiagramLevels | undefined>();
+  // What's on the canvas and how it's connected (getStructureKey): worked out when the document's nodes or edges
+  // change, which drags don't do (they're in presence until the drop)
+  const [structureKey, setStructureKey] = useState('');
+  // Where things are on L1 and L2, as people arranged them
+  const [levelLayouts, setLevelLayouts] = useState<Record<1 | 2, ReadonlyMap<string, LevelPlace>>>(NO_LEVEL_LAYOUTS);
   const [canvasStatus, setCanvasStatusState] = useState<{ status: CanvasStatus; history: StatusChange[] }>(NEW_CANVAS_STATUS);
   const [transport, setTransport] = useState<Transport>('websocket');
+  // Someone deleted the canvas: the server closed it for everyone, and won't open it again
+  const [deleted, setDeleted] = useState(false);
+  // What's flagged on the canvas (risks, problems, the key parts), on nodes or at places
+  const [hotspots, setHotspots] = useState<Hotspot[]>([]);
+  // Who locked the canvas (for everyone on it), if it's locked
+  const [lockedBy, setLockedBy] = useState<string | null>(null);
+  // The server's copy of the canvas has arrived (what's on it is known, e.g. that it's empty)
+  const [synced, setSynced] = useState(false);
   const user = useRef<Author>({ name, color });
-  user.current = { name, color, ...(picture && { picture }) };
+  user.current = { name, color, ...(picture && { picture }), ...(agent && { agent }) };
   const onLayoutRef = useRef(onLayout);
   onLayoutRef.current = onLayout;
   const onContainerResizeRef = useRef(onContainerResize);
@@ -136,16 +188,41 @@ export function useStudioFlow({
     setEdges([]);
 
     const doc = new Y.Doc();
-    const { nodes: yNodes, edges: yEdges, threads: yThreads, meta: yMeta } = getCanvasMaps(doc);
+    const {
+      nodes: yNodes,
+      edges: yEdges,
+      threads: yThreads,
+      meta: yMeta,
+      levelLayouts: yLevelLayouts,
+      hotspots: yHotspots,
+    } = getCanvasMaps(doc);
+    const syncLevelLayouts = (event: Y.YMapEvent<LevelPlace>) => {
+      const changed = new Set([...event.keysChanged].map((key) => Number(key.split(':')[0]) as 1 | 2));
+      setLevelLayouts((current) => {
+        const next = { ...current };
+        changed.forEach((level) => (next[level] = readLevelLayout(doc, level)));
+        return next;
+      });
+    };
+    yLevelLayouts.observe(syncLevelLayouts);
+    setLevelLayouts(NO_LEVEL_LAYOUTS);
     const syncMeta = (event: Y.YMapEvent<unknown>) => {
       const meta = readMeta(doc);
       setTitle(meta.title);
+      if (event.keysChanged.has('diagramLevels')) setDiagramLevels(meta.diagramLevels);
       if (event.keysChanged.has('status') || event.keysChanged.has('statusHistory'))
         setCanvasStatusState({ status: getCanvasStatus(meta), history: meta.statusHistory ?? [] });
       if (event.keysChanged.has('layoutAt')) onLayoutRef.current?.();
+      if (event.keysChanged.has('lockedBy')) setLockedBy(getLock(doc));
     };
     yMeta.observe(syncMeta);
+    setLockedBy(null);
+    const syncHotspots = () => setHotspots(readHotspots(doc));
+    yHotspots.observe(syncHotspots);
+    setHotspots([]);
     setTitle(undefined);
+    setStructureKey('');
+    setDiagramLevels(undefined);
     setCanvasStatusState(NEW_CANVAS_STATUS);
     // Changing an accepted (or rejected) canvas here makes it a draft again, for everyone. Changes from others arrive
     // already reopened by whoever made them.
@@ -166,6 +243,12 @@ export function useStudioFlow({
       );
     };
     doc.on('afterTransaction', reopenOnEdit);
+    const syncStructure = (transaction: Y.Transaction) => {
+      // Drops and resizes here only move and size things (putting something in a container isn't LOCAL_ORIGIN)
+      if (transaction.origin !== LOCAL_ORIGIN && changesNodesOrEdges(transaction))
+        setStructureKey(getStructureKey(Array.from(yNodes.values()), Array.from(yEdges.values())));
+    };
+    doc.on('afterTransaction', syncStructure);
     // One presence for whichever connection is used
     const awareness = new Awareness(doc);
     awareness.setLocalStateField('user', user.current);
@@ -180,6 +263,15 @@ export function useStudioFlow({
     let fallback: ReturnType<typeof setTimeout> | undefined;
     // Declared before the provider: it reports its first status while it's being created
     let socketStatus: Status = 'connecting';
+    let canvasDeleted = false;
+    const onCanvasDeleted = () => {
+      canvasDeleted = true;
+      clearTimeout(fallback);
+      stopToolSync?.();
+      provider.disconnect();
+      setDeleted(true);
+      setStatus('disconnected');
+    };
     // Some views can't use the WebSocket (a chat's sandbox may block it, or open it without the person's session):
     // sync through tool calls instead
     const syncThroughTools = () => {
@@ -201,23 +293,31 @@ export function useStudioFlow({
         // Open isn't connected until the server lets us in (onAuthenticated)
         if (!stopToolSync) setStatus(status === 'connected' && !letIn ? 'connecting' : (status as Status));
       },
+      onSynced: ({ state }) => setSynced(state),
       onAuthenticated: () => {
         socketConnected = letIn = true;
         if (!stopToolSync) setStatus('connected');
       },
+      // Deleted while it was open here
+      onClose: ({ event }) => {
+        if (event.reason === CANVAS_DELETED_REASON) onCanvasDeleted();
+      },
       // Not signed in (or the session ran out): a chat's view syncs through its tools, a page shows it's offline
-      // (coming back to the tab tries again, e.g. after signing in again elsewhere)
-      onAuthenticationFailed: () => {
+      // (coming back to the tab tries again, e.g. after signing in again elsewhere). Or the canvas was deleted.
+      onAuthenticationFailed: ({ reason }) => {
+        if (reason === CANVAS_DELETED_REASON) return onCanvasDeleted();
         if (syncViaTools) return syncThroughTools();
         provider.disconnect();
         setStatus('disconnected');
       },
     });
     setTransport('websocket');
+    setDeleted(false);
+    setSynced(false);
 
     // Back online, or back on the tab: reconnect now rather than when the next retry is due
     const reconnect = () => {
-      if (!stopToolSync && socketStatus === 'disconnected') void provider.connect();
+      if (!stopToolSync && !canvasDeleted && socketStatus === 'disconnected') void provider.connect();
     };
     // Away from the tab: our pointer goes from everyone's canvas
     const onVisibilityChange = () => {
@@ -231,7 +331,7 @@ export function useStudioFlow({
     // A socket that isn't let in within a few seconds (blocked, or never answered) is given up for tool calls
     if (syncViaTools) fallback = setTimeout(() => !socketConnected && syncThroughTools(), SOCKET_TIMEOUT_MS);
     // Undo only takes back your own changes: other people's arrive with the provider as origin, agents' with theirs
-    const undoManager = new Y.UndoManager([yNodes, yEdges, yThreads], {
+    const undoManager = new Y.UndoManager([yNodes, yEdges, yThreads, yLevelLayouts, yHotspots], {
       captureTimeout: 500,
       trackedOrigins: new Set([null, LOCAL_ORIGIN]),
     });
@@ -248,6 +348,13 @@ export function useStudioFlow({
     // Where others are dragging nodes, from their presence, until they drop them
     let remoteMoves = new Map<string, XYPosition>();
     const settling = new Set<ReturnType<typeof setTimeout>>();
+    // Shown gliding, a step a frame: at most one update a frame however many people drag (each presence arriving
+    // was an update of its own: ~5 a frame with 7 people dragging), and smooth between their ~30 updates a second.
+    // Not what's been dropped since (its drop is in the document, see syncNodes).
+    const glide = createSmoother((shown) => {
+      const moved = new Map([...shown].filter(([id]) => remoteMoves.has(id)));
+      if (moved.size) setNodes((local) => withPositions(local, moved));
+    });
     const syncMoves = (_: unknown, origin: unknown) => {
       if (origin === 'local') return;
       const next = new Map<string, XYPosition>();
@@ -255,10 +362,10 @@ export function useStudioFlow({
         if (id === doc.clientID || !state.moving) return;
         Object.entries(state.moving as Record<string, XYPosition>).forEach(([nodeId, position]) => next.set(nodeId, position));
       });
-      const moved = new Map([...next].filter(([id, { x, y }]) => remoteMoves.get(id)?.x !== x || remoteMoves.get(id)?.y !== y));
+      const moved = [...next].some(([id, { x, y }]) => remoteMoves.get(id)?.x !== x || remoteMoves.get(id)?.y !== y);
       const dropped = [...remoteMoves.keys()].filter((id) => !next.has(id));
       remoteMoves = next;
-      if (moved.size) setNodes((local) => withPositions(local, moved));
+      if (moved || dropped.length) glide.set(next);
       if (dropped.length === 0) return;
       // The drop is saved in the document. If it doesn't arrive, back to where the document has it.
       const settle = setTimeout(() => {
@@ -273,6 +380,40 @@ export function useStudioFlow({
     };
     awareness.on('change', syncMoves);
 
+    // What others are writing on notes and text, and how they're scaling and turning text, as they do it (from their
+    // presence): shown on just those nodes, and back to what the document has when they're done (their result is
+    // written to the document before their presence is cleared, so it doesn't go back in between)
+    let remoteEdits = '';
+    let remoteEdited = new Set<string>();
+    const syncEdits = (_: unknown, origin: unknown) => {
+      if (origin === 'local') return;
+      const edits = new Map<string, Record<string, unknown>>();
+      awareness.getStates().forEach((state, id) => {
+        const editing = state.editing as Editing | null | undefined;
+        if (id === doc.clientID || !editing?.id) return;
+        const { id: nodeId, ...fields } = editing;
+        edits.set(nodeId, fields);
+      });
+      const key = JSON.stringify([...edits]);
+      if (key === remoteEdits) return;
+      remoteEdits = key;
+      const before = remoteEdited;
+      remoteEdited = new Set(edits.keys());
+      setNodes((local) => {
+        let next: Node[] | undefined;
+        local.forEach((node, index) => {
+          const edit = edits.get(node.id);
+          const savedData = before.has(node.id) ? yNodes.get(node.id)?.data : undefined;
+          const changes = edit ?? (savedData && Object.fromEntries(EDITED_FIELDS.map((field) => [field, savedData[field]])));
+          if (!changes || Object.entries(changes).every(([field, value]) => node.data[field] === value)) return;
+          next ??= [...local];
+          next[index] = { ...node, data: { ...node.data, ...changes } };
+        });
+        return next ?? local;
+      });
+    };
+    awareness.on('change', syncEdits);
+
     // Only what changed is replaced, so React Flow re-renders just those nodes
     const syncNodes = (event: Y.YMapEvent<Node>) => {
       if (event.transaction.origin === LOCAL_ORIGIN) return;
@@ -308,12 +449,17 @@ export function useStudioFlow({
       window.removeEventListener('online', reconnect);
       document.removeEventListener('visibilitychange', onVisibilityChange);
       awareness.off('change', syncMoves);
+      awareness.off('change', syncEdits);
+      glide.stop();
       sender.destroy();
       stopToolSync?.();
       yNodes.unobserve(syncNodes);
+      yLevelLayouts.unobserve(syncLevelLayouts);
       yEdges.unobserve(syncEdges);
       yMeta.unobserve(syncMeta);
+      yHotspots.unobserve(syncHotspots);
       doc.off('afterTransaction', reopenOnEdit);
+      doc.off('afterTransaction', syncStructure);
       presenceStore.destroy();
       undoManager.destroy();
       provider.destroy();
@@ -366,10 +512,10 @@ export function useStudioFlow({
     dragged.current.forEach((position, id) => moveNode(doc, id, position));
     // Containers as they grew around what was dragged, and what else is in them (moved the other way if they grew up
     // or left). Dragged nodes are where React Flow dropped them, already in their containers' grown coordinates.
-    dragPreview.current.forEach(({ position, width, height }, id) => {
-      const node = getCanvasMaps(doc).nodes.get(id);
-      if (node) getCanvasMaps(doc).nodes.set(id, { ...node, position, ...(width !== undefined && { width, height }) });
-    });
+    // Only what actually moved or grew is written (the preview has everything in those containers)
+    dragPreview.current.forEach(({ position, width, height }, id) =>
+      placeNode(doc, id, position, width !== undefined && height !== undefined ? { width, height } : undefined)
+    );
     dragPreview.current = new Map();
     dragged.current.clear();
     const shared = sharedRef.current;
@@ -456,12 +602,18 @@ export function useStudioFlow({
    * on the canvas, and returns edges to add with it (e.g. a catalog resource's relationships).
    */
   const insertNode = useCallback(
-    (type: string, data: Record<string, unknown>, center: XYPosition, connect?: (id: string, existing: Node[]) => Edge[]) => {
+    (
+      type: string,
+      data: Record<string, unknown>,
+      center: XYPosition,
+      connect?: (id: string, existing: Node[]) => Edge[],
+      inside?: string
+    ) => {
       const built = buildNode(type, data, center);
       withDoc((doc) => {
         const existing = Array.from(getCanvasMaps(doc).nodes.values());
-        // Dropped on a container: it goes in it
-        const group = canGoInContainer(type) ? findGroupAtPoint(center, existing) : undefined;
+        // In the container asked for, else the one it's dropped on
+        const group = canGoInContainer(type) ? containerFor(center, existing, inside) : undefined;
         const node = group
           ? { ...built, parentId: group.id, position: toRelativePosition(built.position, group.id, existing) }
           : built;
@@ -473,11 +625,11 @@ export function useStudioFlow({
     []
   );
 
-  /** Add a node of a registry type, centred on a canvas position */
+  /** Add a node of a component (its type, or its key in the components list), centred on a canvas position (in a container, if asked) */
   const addNode = useCallback(
-    (type: string, center: XYPosition) => {
-      const definition = getNodeDefinition(type);
-      return definition ? insertNode(type, definition.createData(), center) : undefined;
+    (component: string, center: XYPosition, inside?: string) => {
+      const definition = getNodeDefinition(component);
+      return definition ? insertNode(definition.type, definition.createData(), center, undefined, inside) : undefined;
     },
     [insertNode]
   );
@@ -492,6 +644,12 @@ export function useStudioFlow({
 
   /** Moves nodes (and resizes containers) from a layout in one change, so it undoes in one go */
   const applyPositions = useCallback((layout: LayoutResult) => withDoc((doc) => applyLayout(doc, layout)), []);
+  /** Puts things where they go on L1 or L2: moved there by someone (undone like any edit), or placed by the level */
+  const setLevelLayout = useCallback(
+    (level: 1 | 2, places: ReadonlyMap<string, LevelPlace>, by: 'person' | 'level' = 'person') =>
+      withDoc((doc) => setLevelPlaces(doc, level, places), by === 'level' ? LEVEL_PLACEMENT_ORIGIN : null),
+    []
+  );
 
   /** Adds ready-made nodes and edges (e.g. a container with what's in it) in one change */
   const insertNodes = useCallback(
@@ -507,13 +665,12 @@ export function useStudioFlow({
     []
   );
 
-  /** Puts a node in a container (or takes it out), e.g. after it's dragged there */
-  const setParent = useCallback(
-    (nodeId: string, parentId: string | undefined) =>
+  /** Puts nodes in containers (or takes them out) together, e.g. a selection dropped in one, as one change */
+  const setParents = useCallback(
+    (moves: { id: string; parentId: string | undefined; at?: XYPosition }[]) =>
       withDoc((doc) => {
-        // Where it was dropped goes first, so it's moved into (or out of) the container from there
         if (dragged.current.size) saveDrop(doc);
-        return setNodeParent(doc, nodeId, parentId, renderedSizes());
+        return setNodeParents(doc, moves, renderedSizes());
       }),
     []
   );
@@ -537,6 +694,47 @@ export function useStudioFlow({
     sharedRef.current?.sender.send({ viewport });
   }, []);
 
+  /**
+   * The note or text being changed here, as it changes (what's written, a text's size and angle), for the others to
+   * see as it happens; `null` when done (after the result is saved), sent straight away
+   */
+  const sendEditing = useCallback((editing: Editing | null) => {
+    const sender = sharedRef.current?.sender;
+    if (!sender) return;
+    sender.send({ editing: editing && { ...editing, ...(editing.text !== undefined && { text: editing.text.slice(0, 2000) }) } });
+    if (!editing) sender.flush();
+  }, []);
+
+  /**
+   * What a diagram file opened into this (new) canvas starts with: its nodes and connections, comments, hotspots and
+   * where things are on L1 and L2, in one change that isn't undone
+   */
+  const addContent = useCallback(
+    (content: ModelCanvasContent) =>
+      withDoc((doc) => {
+        addNodes(doc, content.nodes, content.edges);
+        if (content.threads?.length) addThreads(doc, content.threads);
+        if (content.hotspots?.length) addHotspots(doc, content.hotspots);
+        setLevelPlaces(doc, 1, content.levelLayouts[1]);
+        setLevelPlaces(doc, 2, content.levelLayouts[2]);
+      }, OPEN_ORIGIN),
+    []
+  );
+
+  // ---- Hotspots and the lock ----
+
+  const createHotspot = useCallback(
+    (hotspot: Omit<Hotspot, 'id' | 'createdAt'>) => withDoc((doc) => createHotspotInDoc(doc, hotspot)),
+    []
+  );
+  const updateHotspot = useCallback(
+    (id: string, fields: Parameters<typeof updateHotspotInDoc>[2]) => withDoc((doc) => updateHotspotInDoc(doc, id, fields)),
+    []
+  );
+  const deleteHotspot = useCallback((id: string) => withDoc((doc) => deleteHotspotInDoc(doc, id)), []);
+  /** Locks the canvas for everyone (by a name), or unlocks it (null): looked at, not changed */
+  const setLocked = useCallback((by: string | null) => withDoc((doc) => setLock(doc, by), STATUS_ORIGIN), []);
+
   return {
     nodes,
     edges,
@@ -554,13 +752,27 @@ export function useStudioFlow({
     updateNodeData,
     deleteNodes,
     applyPositions,
+    levelLayouts,
+    setLevelLayout,
     insertNodes,
-    setParent,
+    setParents,
     title,
+    diagramLevels,
+    structureKey,
     rename,
     canvasStatus,
     changeStatus,
     transport,
+    deleted,
+    hotspots,
+    createHotspot,
+    updateHotspot,
+    deleteHotspot,
+    lockedBy,
+    setLocked,
+    sendEditing,
+    synced,
+    addContent,
     undo,
     redo,
     ...history,

package/eventcatalog/src/features/studio/identity.ts

@@ -1,6 +1,11 @@
 // Who you are in Studio: the name you give on your first visit, kept in this browser and used on every canvas
-const COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'];
+/** The colours people can go by (as Studio on the web's): on their pointer, avatar and comments */
+export const PERSON_COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'];
+const COLORS = PERSON_COLORS;
 const NAME_KEY = 'eventcatalog-studio-name';
+const COLOR_KEY = 'eventcatalog-studio-color';
+/** Names people give are at most this long */
+export const MAX_NAME_LENGTH = 60;
 
 export const getStoredName = () => {
   try {
@@ -33,3 +38,22 @@ export const colorForName = (name: string) => {
   for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) | 0;
   return COLORS[Math.abs(hash) % COLORS.length];
 };
+
+/** The colour you picked, kept in this browser (else it follows from your name) */
+export const getStoredColor = () => {
+  try {
+    const color = localStorage.getItem(COLOR_KEY);
+    return color && PERSON_COLORS.includes(color) ? color : null;
+  } catch {
+    return null;
+  }
+};
+
+export const storeColor = (color: string) => {
+  try {
+    localStorage.setItem(COLOR_KEY, color);
+    return true;
+  } catch {
+    return false;
+  }
+};

package/eventcatalog/src/features/studio/limits.ts

@@ -0,0 +1,2 @@
+/** Canvas titles are at most this long (no imports, so the browser can check it without loading a canvas) */
+export const MAX_TITLE_LENGTH = 200;

package/eventcatalog/src/features/studio/pages/[id].astro

@@ -1,13 +1,16 @@
 ---
 // Visualiser styles ship in the page head so ClientRouter navigations keep them (see NodeGraph.astro).
 import '@eventcatalog/visualiser/styles-core.css';
-import '../studio.css';
+import '@eventcatalog/visualiser/studio.css';
+import '@eventcatalog/visualiser/studio-fonts.css';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { buildUrl } from '@utils/url-builder';
 import StudioDesigner from '../components/StudioDesigner';
+import StudioNotice from '../components/StudioNotice.astro';
 import { getCatalogResources } from '../catalog-resources';
 import { startStudio, STUDIO_SOCKET_PATH } from '../server/runtime';
 import { getSignedInUser, isSignedIn } from '../server/sign-in';
+import { CANVASES_API_PATH } from '../api/canvases-api';
 
 export const prerender = false;
 
@@ -17,27 +20,50 @@ if (!id || !/^[0-9a-f-]{36}$/i.test(id)) {
   return Astro.redirect(buildUrl('/studio'));
 }
 
-const { resources, relations } = await getCatalogResources();
-const keptInMemory = (await startStudio({ isSignedIn })).storage.type === 'memory';
+// Studio can't start when its storage can't be used (e.g. the database was updated by a newer EventCatalog)
+const started = await startStudio({ isSignedIn }).catch((error: Error) => error);
+const unavailable = started instanceof Error ? started.message : undefined;
+const runtime = started instanceof Error ? undefined : started;
+// A deleted canvas's link (anyone who still had it open was told)
+const deleted = runtime?.isDeleted(id) ?? false;
+if (unavailable) Astro.response.status = 503;
+else if (deleted) Astro.response.status = 410;
+const { resources, relations } = runtime && !deleted ? await getCatalogResources() : { resources: [], relations: [] };
+const keptInMemory = runtime?.storage.type === 'memory';
 const signedInAs = getSignedInUser(Astro.locals);
 ---
 
-<VerticalSideBarLayout title="Studio - EventCatalog" showNestedSideBar={false}>
+<VerticalSideBarLayout title="Studio" showNestedSideBar={false}>
   <main
     class="min-h-0 overflow-hidden bg-[rgb(var(--ec-page-bg))]"
     style="margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1); margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1); height: calc(100dvh - 60px);"
   >
-    <StudioDesigner
-      client:only="react"
-      canvasId={id}
-      socketPath={buildUrl(STUDIO_SOCKET_PATH, true)}
-      newCanvasUrl={`${buildUrl('/studio')}?new=1`}
-      mcpUrl={buildUrl('/docs/mcp', true)}
-      relayScriptPath={buildUrl('/webmcp-relay/embed.js', true)}
-      keptInMemory={keptInMemory}
-      signedInAs={signedInAs}
-      resources={resources}
-      relations={relations}
-    />
+    {
+      unavailable ? (
+        <StudioNotice title="Studio isn't available" message={unavailable} />
+      ) : deleted ? (
+        <StudioNotice
+          title="This canvas was deleted"
+          message="Someone deleted it, so it can't be opened any more."
+          href={buildUrl('/studio')}
+          linkText="Back to Studio"
+        />
+      ) : (
+        <StudioDesigner
+          client:only="react"
+          canvasId={id}
+          socketPath={buildUrl(STUDIO_SOCKET_PATH, true)}
+          newCanvasUrl={`${buildUrl('/studio')}?new=1`}
+          studioUrl={buildUrl('/studio')}
+          canvasesApiUrl={buildUrl(CANVASES_API_PATH, true)}
+          mcpUrl={buildUrl('/docs/mcp', true)}
+          relayScriptPath={buildUrl('/webmcp-relay/embed.js', true)}
+          keptInMemory={keptInMemory}
+          signedInAs={signedInAs}
+          resources={resources}
+          relations={relations}
+        />
+      )
+    }
   </main>
 </VerticalSideBarLayout>