@eventcatalog/core 5.0.0-beta.7 → 5.0.0-beta.9

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

@@ -24,7 +24,7 @@ import { getMcpAppViewLoader, mcpAppNote, registerMcpApp } from './mcp-apps';
 import { buildUrl } from '@utils/url-builder';
 import { isCanvasEnabled } from '@utils/feature';
 import { CANVAS_TOOL_NAMES, registerCanvasTools } from '@features/studio/server/canvas-mcp';
-import { findStudioRuntime } from '@features/studio/server/runtime';
+import { startStudio } from '@features/studio/server/runtime';
 
 const loadViewerView = getMcpAppViewLoader('viewer');
 
@@ -401,7 +401,7 @@ function createMcpServer(scope: McpScope | undefined, { catalogUrl, userAgent }:
     if (resource.error !== undefined) return { error: resource.error };
 
     const schemas = await tools.getSchemaForResource({ ...params, resourceVersion: resource.version });
-    if ('error' in schemas) return schemas;
+    if ('error' in schemas && schemas.error !== undefined) return { error: schemas.error };
 
     return {
       resource: {
@@ -974,7 +974,7 @@ const handleGetRequest = async (c: Context, kind?: McpScopeKind) => {
       ...(scope && { scope: scope.ref }),
       tools: scope
         ? getScopedBuiltInTools(scope)
-        : [...globalBuiltInTools, ...(isCanvasEnabled() && findStudioRuntime() ? CANVAS_TOOL_NAMES : []), ...extendedToolNames],
+        : [...globalBuiltInTools, ...(isCanvasEnabled() ? CANVAS_TOOL_NAMES : []), ...extendedToolNames],
       extendedTools: !scope && extendedToolNames.length > 0 ? extendedToolNames : undefined,
       resources: getMcpResourceUris(scope),
     });
@@ -993,6 +993,8 @@ const handleMcpRequest = async (c: Context, kind?: McpScopeKind) => {
     }
 
     const scope = await resolveRequestScope(c, kind);
+    // Canvas tools work on Studio's canvases: started (storage loaded) before they're listed
+    if (!scope && isCanvasEnabled()) await startStudio();
     const server = createMcpServer(scope, {
       catalogUrl: new URL(c.req.url).origin,
       userAgent: c.req.header('user-agent'),

package/eventcatalog/src/features/studio/agent-choreography.ts

@@ -6,7 +6,7 @@ import {
   createThread,
   deleteEdges,
   deleteNodes,
-  fitGroupToChildren,
+  fitContainersAround,
   getCanvasMaps,
   moveNode,
   resizeNode,
@@ -24,6 +24,7 @@ import {
   type CatalogIndex,
   type EdgeSpecs,
   type NodeSpecs,
+  type NodeUpdate,
 } from './canvas-actions';
 import { getRelatedEdges } from './catalog';
 import { getAbsolutePosition, sizeOf } from './grouping';
@@ -191,7 +192,7 @@ export async function playAddToCanvas(
       const node = { ...plannedNode, position: { x: canvasPosition.x - origin.x, y: canvasPosition.y - origin.y } };
       addNodes(doc, [node]);
       // The containers it's in grow to fit it
-      for (let id = node.parentId; id; id = readNodes(doc).get(id)?.parentId) fitGroupToChildren(doc, id);
+      fitContainersAround(doc, node.id);
       const related = resource
         ? getRelatedEdges(resource, node.id, [...onCanvas.values()], catalog.relationsByKey, node.type)
         : [];
@@ -358,11 +359,13 @@ export async function playOnNode<T>(stage: AgentStage, nodeId: string, activity:
 /** Updating a node, played out: point at it to rename or re-describe it, then drag it to its new centre (x/y) */
 export async function playUpdateNode(
   stage: AgentStage,
-  { nodeId, name, summary, x, y }: { nodeId: string; name?: string; summary?: string; x?: number; y?: number }
+  { nodeId, name, summary, version, x, y }: NodeUpdate & { x?: number; y?: number }
 ) {
   const missing = { error: `No node "${nodeId}" on the canvas` };
-  if (name !== undefined || summary !== undefined) {
-    const outcome = await playOnNode(stage, nodeId, 'Editing', (doc) => updateCanvasNode(doc, { nodeId, name, summary }));
+  if (name !== undefined || summary !== undefined || version !== undefined) {
+    const outcome = await playOnNode(stage, nodeId, 'Editing', (doc) =>
+      updateCanvasNode(doc, { nodeId, name, summary, version })
+    );
     if ('error' in outcome) return outcome;
   }
   if (x !== undefined || y !== undefined) {

package/eventcatalog/src/features/studio/canvas-actions.ts

@@ -1,18 +1,31 @@
-import type { Node, XYPosition } from '@xyflow/react';
+import type { Edge, Node, XYPosition } from '@xyflow/react';
 import type * as Y from 'yjs';
 import { z } from 'zod';
-import { buildNode, getCanvasMaps, readCanvas, updateNodeData } from './canvas-doc';
+import { buildNode, getCanvasMaps, getCanvasStatus, readCanvas, updateNodeData } from './canvas-doc';
 import type { CatalogRelation, CatalogResource } from './catalog-resources';
-import { buildContainer, canBeContainer, catalogNodeData, containerTypeFor, getCatalogLink, indexRelations } from './catalog';
-import { getAbsolutePosition, sizeOf } from './grouping';
+import {
+  buildContainer,
+  canBeContainer,
+  catalogNodeData,
+  containerTypeFor,
+  getCatalogLink,
+  getRelatedEdges,
+  indexRelations,
+} from './catalog';
+import { findGroupAtPoint, getAbsolutePosition, sizeOf } from './grouping';
 import { placeNodes, type Link } from './placement';
 import {
+  canGoInContainer,
   COMPONENT_TYPES,
   getNodeDefinition,
   getNodeLabel,
   getNodeName,
+  getNoteLevel,
   getResource,
   isGroupType,
+  isOnLevel,
+  isVersioned,
+  isWrittenOnCanvas,
   updateResource,
 } from './node-types';
 
@@ -44,7 +57,8 @@ export const nodeSpecsSchema = z
         .describe('A catalog resource to add (latest version)'),
       type: z.enum(COMPONENT_TYPES).optional().describe('For a new component: what it is'),
       name: z.string().optional().describe('For a new component: its name'),
-      summary: z.string().optional().describe('For a new component: what it does. For a note: its text'),
+      summary: z.string().optional().describe('For a new component: what it does. For a note or text: its text'),
+      version: z.string().optional().describe('For a new component: its version, e.g. 1.0.0 (defaults to 0.0.1)'),
       container: z
         .boolean()
         .optional()
@@ -96,13 +110,17 @@ const lookupOf = (node: Node, lookup?: NodeLookup) => lookup ?? new Map([[node.i
 export const describeNode = (node: Node, lookup?: NodeLookup) => {
   const resource = getResource(node.type, node.data);
   const link = getCatalogLink(node);
+  const version = link?.version ?? (typeof resource.version === 'string' ? resource.version : undefined);
   return {
     id: node.id,
     type: getNodeLabel(node.type),
-    ...(node.type !== 'note' && { name: resource.name }),
+    ...(!isWrittenOnCanvas(node.type) && { name: resource.name }),
     ...(resource.summary ? { summary: resource.summary } : {}),
-    ...(node.type === 'note' ? { text: node.data.text } : {}),
-    ...(link ? { catalogResource: link.key.replace(':', '/'), version: link.version } : {}),
+    ...(isWrittenOnCanvas(node.type) ? { text: node.data.text } : {}),
+    // Notes added on L1 or L2 are only shown there (people see the rest at L3)
+    ...(getNoteLevel(node) !== undefined && getNoteLevel(node) !== 3 && { onLevel: `L${getNoteLevel(node)}` }),
+    ...(link && { catalogResource: link.key.replace(':', '/') }),
+    ...(version && { version }),
     /** The node's centre on the canvas, like the x/y agents give */
     position: (({ x, y }) => ({ x: Math.round(x), y: Math.round(y) }))(nodeCenter(node, lookup)),
     size: sizeOf(node),
@@ -131,8 +149,17 @@ export const describeCanvas = (doc: Y.Doc) => {
   const canvas = readCanvas(doc);
   const lookup = new Map(canvas.nodes.map((node) => [node.id, node]));
   const names = new Map(canvas.nodes.map((node) => [node.id, getNodeName(node.type, node.data, node.id)]));
+  const lastChange = canvas.meta.statusHistory?.at(-1);
   return {
     title: canvas.meta.title,
+    status: getCanvasStatus(canvas.meta),
+    ...(lastChange && {
+      statusChanged: {
+        by: lastChange.by.name,
+        at: new Date(lastChange.at).toISOString(),
+        ...(lastChange.note && { note: lastChange.note }),
+      },
+    }),
     nodes: canvas.nodes.map((node) => describeNode(node, lookup)),
     connections: canvas.edges.map((edge) => ({
       id: edge.id,
@@ -204,18 +231,20 @@ export const planNodes = (existing: Node[], specs: NodeSpecs, catalog: CatalogIn
         errors.push(`Give each node a resource, or a type (one of ${COMPONENT_TYPES.join(', ')})`);
         continue;
       }
-      const data =
-        definition.type === 'note'
-          ? { ...definition.createData(), text: spec.summary ?? spec.name ?? '' }
-          : updateResource(definition.type, definition.createData(), {
-              ...(spec.name && { name: spec.name }),
-              ...(spec.summary && { summary: spec.summary }),
-            });
+      const data = isWrittenOnCanvas(definition.type)
+        ? { ...definition.createData(), text: spec.summary ?? spec.name ?? '' }
+        : updateResource(definition.type, definition.createData(), {
+            ...(spec.name && { name: spec.name }),
+            ...(spec.summary && { summary: spec.summary }),
+            ...(spec.version && isVersioned(definition.type) && { version: spec.version }),
+          });
       const node = buildNode(definition.type, data, centerOf(spec));
       built = { node, name: String(getResource(node.type, node.data).name ?? definition.label) };
     }
 
-    if (spec.inside) {
+    if (spec.inside && !canGoInContainer(built.node.type)) {
+      errors.push(`Notes aren't put in containers: "${spec.ref ?? built.name}" was put on the canvas instead`);
+    } else if (spec.inside) {
       const parent = refs.get(spec.inside) ?? lookup.get(spec.inside);
       if (parent && isGroupType(parent.type)) built.node = putInside(built.node, parent, spec);
       else errors.push(`"${spec.inside}" is not a container on the canvas (a domain or system added as a container)`);
@@ -248,7 +277,9 @@ export const planNodes = (existing: Node[], specs: NodeSpecs, catalog: CatalogIn
     }
   }
 
-  const positions = placeNodes([...lookup.values()], toPlace, [...links.values()]);
+  // Placed around what's on the canvas people edit (notes on L1 and L2 aren't there)
+  const onCanvas = [...lookup.values()].filter((node) => isOnLevel(node, 3));
+  const positions = placeNodes(onCanvas, toPlace, [...links.values()]);
   const canvasPositions = new Map(planned.map((entry) => [entry.node.id, positions.get(entry.node.id) ?? entry.canvasPosition]));
   for (const entry of planned) {
     const canvasPosition = positions.get(entry.node.id);
@@ -271,17 +302,113 @@ export const resolveEdgeRefs = (edges: EdgeSpecs, planned: PlannedNode[]) => {
   return edges.map((edge) => ({ ...edge, from: refs.get(edge.from) ?? edge.from, to: refs.get(edge.to) ?? edge.to }));
 };
 
-/** Renames or re-describes a node. Catalog resources keep their catalog name and summary. */
-export const updateCanvasNode = (doc: Y.Doc, { nodeId, name, summary }: { nodeId: string; name?: string; summary?: string }) =>
+export type NodeUpdate = { nodeId: string; name?: string; summary?: string; version?: string };
+
+/** Renames, re-describes or re-versions a node. Catalog resources keep their catalog name, summary and version. */
+export const updateCanvasNode = (doc: Y.Doc, { nodeId, name, summary, version }: NodeUpdate) =>
   doc.transact(() => {
     const node = getCanvasMaps(doc).nodes.get(nodeId);
     if (!node) return { error: `No node "${nodeId}" on the canvas` };
     if (!getCatalogLink(node)) {
       updateNodeData(doc, nodeId, (data) =>
-        node.type === 'note'
+        isWrittenOnCanvas(node.type)
           ? { ...data, text: summary ?? name ?? data.text }
-          : updateResource(node.type, data, { ...(name !== undefined && { name }), ...(summary !== undefined && { summary }) })
+          : updateResource(node.type, data, {
+              ...(name !== undefined && { name }),
+              ...(summary !== undefined && { summary }),
+              ...(version !== undefined && isVersioned(node.type) && { version }),
+            })
       );
     }
     return { updated: nodeId };
   });
+
+// ---- A catalog resource with its connections ----
+
+const MESSAGE_COLLECTIONS = new Set(['events', 'commands', 'queries']);
+
+/** What a group of connections is: what a service sends, receives and stores, or which services send or receive a message */
+export type ConnectionGroupId = 'receives' | 'sends' | 'dataStores' | 'senders' | 'receivers';
+export type ConnectionGroup = { id: ConnectionGroupId; label: string; resources: CatalogResource[] };
+
+const GROUP_LABELS: Record<ConnectionGroupId, string> = {
+  receives: 'Messages it receives',
+  sends: 'Messages it sends',
+  dataStores: 'Data stores it reads or writes',
+  senders: 'Services that send it',
+  receivers: 'Services that receive it',
+};
+
+/** Which group a related resource is in, for a service or a message (or none: not brought with it) */
+const groupOf = (resource: CatalogResource, other: CatalogResource, outgoing: boolean): ConnectionGroupId | undefined => {
+  if (resource.collection === 'services') {
+    if (other.collection === 'containers') return 'dataStores';
+    if (MESSAGE_COLLECTIONS.has(other.collection)) return outgoing ? 'sends' : 'receives';
+  }
+  if (MESSAGE_COLLECTIONS.has(resource.collection) && other.collection === 'services') return outgoing ? 'receivers' : 'senders';
+  return undefined;
+};
+
+/**
+ * What a catalog service or message connects to that isn't on the canvas yet, in groups (only the groups with
+ * something in them): a service's messages and data stores, or the services that send and receive a message
+ */
+export const getCatalogConnections = (
+  resource: CatalogResource,
+  catalog: CatalogIndex,
+  keysOnCanvas: ReadonlySet<string>
+): ConnectionGroup[] => {
+  const groups = new Map<ConnectionGroupId, CatalogResource[]>();
+  const seen = new Set<string>();
+  for (const relation of catalog.relationsByKey.get(resource.key) ?? []) {
+    const outgoing = relation.source === resource.key;
+    const other = catalog.resourcesByKey.get(outgoing ? relation.target : relation.source);
+    if (!other || seen.has(other.key) || keysOnCanvas.has(other.key)) continue;
+    const group = groupOf(resource, other, outgoing);
+    if (!group) continue;
+    groups.set(group, [...(groups.get(group) ?? []), other]);
+    seen.add(other.key);
+  }
+  // In reading order: what comes in, then what goes out
+  return (['receives', 'senders', 'sends', 'receivers', 'dataStores'] as const).flatMap((id) => {
+    const resources = groups.get(id);
+    return resources ? [{ id, label: GROUP_LABELS[id], resources }] : [];
+  });
+};
+
+/**
+ * A catalog resource centred on a canvas point (inside the container there, if there is one), with the resources
+ * it connects to placed around it like an architect would (what comes in before it, what goes out after it), and
+ * the connections between them and to what's already on the canvas. A service's data stores go in its container
+ * with it. Positions are relative to the containers they're in, as the canvas is now.
+ */
+export const planWithConnections = (
+  existing: Node[],
+  resource: CatalogResource,
+  center: XYPosition,
+  include: CatalogResource[],
+  catalog: CatalogIndex
+): { nodes: Node[]; edges: Edge[] } => {
+  const container = findGroupAtPoint(center, existing);
+  const specOf = (entry: CatalogResource) => ({
+    resource: { collection: entry.collection as (typeof CATALOG_COLLECTIONS)[number], id: entry.id },
+  });
+  const { planned } = planNodes(
+    existing,
+    [
+      { ...specOf(resource), x: center.x, y: center.y, ...(container && { inside: container.id }) },
+      ...include.map((entry) => ({
+        ...specOf(entry),
+        ...(container && entry.collection === 'containers' && { inside: container.id }),
+      })),
+    ],
+    catalog
+  );
+  const placed = [...existing];
+  const edges: Edge[] = [];
+  for (const { node, resource: entry } of planned) {
+    if (entry) edges.push(...getRelatedEdges(entry, node.id, placed, catalog.relationsByKey, node.type));
+    placed.push(node);
+  }
+  return { nodes: planned.map((entry) => entry.node), edges };
+};

package/eventcatalog/src/features/studio/canvas-doc.ts

@@ -1,6 +1,6 @@
 import * as Y from 'yjs';
 import type { Connection, Edge, Node, XYPosition } from '@xyflow/react';
-import { createEdge } from './edges';
+import { createEdge, getEdgeLabel } from './edges';
 import { fitGroup, getAbsolutePosition, withDescendants, withParent } from './grouping';
 import { getNodeDefinition, getNodeSize, isGroupType } from './node-types';
 
@@ -9,13 +9,28 @@ import { getNodeDefinition, getNodeSize, isGroupType } from './node-types';
  * browser (people, WebMCP) and on the server (MCP tools), so humans and agents edit a canvas the same way.
  */
 
-export type Author = { name: string; color: string; agent?: boolean };
+export type Author = {
+  name: string;
+  color: string;
+  agent?: boolean;
+  /** A picture from their sign-in provider (SSO), shown over their initials */
+  picture?: string;
+};
 export type Message = { id: string; text: string; author: Author; createdAt: number };
 /** Where a comment is pinned: a canvas position, or a node (and the offset from its top left) so it moves with it */
 export type CommentAnchor = { position: XYPosition; nodeId?: string; offset?: XYPosition };
 export type Thread = CommentAnchor & { id: string; author: Author; createdAt: number; resolved: boolean; messages: Message[] };
+/** Where a canvas's design is: being worked on, up for review, agreed, or decided against */
+export const CANVAS_STATUSES = ['draft', 'proposed', 'accepted', 'rejected'] as const;
+export type CanvasStatus = (typeof CANVAS_STATUSES)[number];
+/** A canvas's status being changed: by whom, when, and why (e.g. "Agreed in the architecture review") */
+export type StatusChange = { status: CanvasStatus; by: Author; at: number; note?: string };
 export type CanvasMeta = {
   title?: string;
+  /** Draft until someone changes it */
+  status?: CanvasStatus;
+  /** Every status change, oldest first (the last few hundred) */
+  statusHistory?: StatusChange[];
   createdAt?: number;
   createdBy?: string;
   /** When the canvas was last laid out, so everyone's canvas glides the nodes into place */
@@ -59,7 +74,7 @@ export const buildNode = (type: string, data: Record<string, unknown>, center: X
     type,
     position: { x: center.x - size.width / 2, y: center.y - size.height / 2 },
     data,
-    ...(definition?.defaultSize ? size : {}),
+    ...(definition?.defaultSize ? (definition.autoHeight ? { width: size.width } : size) : {}),
     // Containers sit behind what's in them and the connections between them
     ...(isGroupType(type) && { zIndex: -1 }),
   });
@@ -75,6 +90,56 @@ export const setMeta = (doc: Y.Doc, meta: Partial<CanvasMeta>) =>
     Object.entries(meta).forEach(([key, value]) => (value === undefined ? map.delete(key) : map.set(key, value)));
   });
 
+// ---- Status ----
+
+const MAX_STATUS_HISTORY = 200;
+
+export const getCanvasStatus = (meta: CanvasMeta): CanvasStatus => meta.status ?? 'draft';
+
+/** Changes a canvas's status (and records who did it). Returns false if it already had that status. */
+export const setCanvasStatus = (doc: Y.Doc, status: CanvasStatus, by: Author, note?: string) => {
+  let changed = false;
+  doc.transact(() => {
+    const meta = readMeta(doc);
+    if (getCanvasStatus(meta) === status) return;
+    const change: StatusChange = { status, by, at: Date.now(), ...(note?.trim() && { note: note.trim() }) };
+    const map = getCanvasMaps(doc).meta;
+    map.set('status', status);
+    map.set('statusHistory', [...(meta.statusHistory ?? []), change].slice(-MAX_STATUS_HISTORY));
+    changed = true;
+  });
+  return changed;
+};
+
+/** Accepted and rejected canvases are decided: changing what's on them makes them a draft again */
+export const isDecided = (status: CanvasStatus) => status === 'accepted' || status === 'rejected';
+
+/** A decided canvas whose nodes or edges were changed goes back to draft, recorded as changed by `by` */
+export const reopenIfDecided = (doc: Y.Doc, by: Author) => {
+  const status = getCanvasStatus(readMeta(doc));
+  if (isDecided(status)) setCanvasStatus(doc, 'draft', by, `Changed after it was ${status}`);
+};
+
+/**
+ * Runs `fn` (which may change the canvas), and if it changed nodes or edges, sends a decided canvas back to draft.
+ * Comments don't count: reviewing an accepted design keeps it accepted.
+ */
+export const reopeningIfEdited = <T>(doc: Y.Doc, by: Author, fn: () => T): T => {
+  let result!: T;
+  // In one transaction (the one it's already in, if it is): what it changed is known before it ends
+  doc.transact((transaction) => {
+    result = fn();
+    if (changesNodesOrEdges(transaction)) reopenIfDecided(doc, by);
+  });
+  return result;
+};
+
+/** Whether a transaction changed the canvas's nodes or edges (not just its comments or meta) */
+export const changesNodesOrEdges = (transaction: Y.Transaction) => {
+  const { nodes, edges } = getCanvasMaps(transaction.doc);
+  return [...transaction.changed.keys()].some((type) => type === (nodes as unknown) || type === (edges as unknown));
+};
+
 // ---- Nodes and edges ----
 
 export const addNodes = (doc: Y.Doc, nodes: Node[], edges: Edge[] = []) =>
@@ -91,18 +156,38 @@ export const moveNode = (doc: Y.Doc, id: string, position: XYPosition) => {
   return !!node;
 };
 
-export const resizeNode = (doc: Y.Doc, id: string, size: { width: number; height: number }) => {
+/** Resize a node: both sides, or just its width or height (e.g. text, whose height follows what's in it) */
+export const resizeNode = (
+  doc: Y.Doc,
+  id: string,
+  size: { width: number; height: number },
+  attributes: true | 'width' | 'height' = true
+) => {
   const { nodes } = getCanvasMaps(doc);
   const node = nodes.get(id);
-  if (node) nodes.set(id, { ...node, width: size.width, height: size.height });
+  if (node)
+    nodes.set(id, {
+      ...node,
+      ...(attributes !== 'height' && { width: size.width }),
+      ...(attributes !== 'width' && { height: size.height }),
+    });
   return !!node;
 };
 
 /** Grow a container to fit what's in it (moving them clear of its header if needed), never shrinking it */
-export const fitGroupToChildren = (doc: Y.Doc, groupId: string) =>
+/**
+ * The sizes nodes are rendered at (in the browser), by id. The document doesn't have them, so without them
+ * containers are fitted to the size each type renders at at most.
+ */
+export type RenderedSizes = ReadonlyMap<string, { width: number; height: number }>;
+
+const withRenderedSizes = (nodes: Node[], sizes?: RenderedSizes) =>
+  sizes ? nodes.map((node) => (sizes.has(node.id) ? { ...node, measured: sizes.get(node.id) } : node)) : nodes;
+
+export const fitGroupToChildren = (doc: Y.Doc, groupId: string, sizes?: RenderedSizes) =>
   doc.transact(() => {
     const { nodes } = getCanvasMaps(doc);
-    const fit = fitGroup(groupId, Array.from(nodes.values()));
+    const fit = fitGroup(groupId, withRenderedSizes(Array.from(nodes.values()), sizes));
     const group = nodes.get(groupId);
     if (!fit || !group) return;
     if (fit.shift.x || fit.shift.y) {
@@ -120,14 +205,21 @@ export const fitGroupToChildren = (doc: Y.Doc, groupId: string) =>
     });
   });
 
+/** The containers a node is in grow to fit it (innermost first), e.g. after it's added or resized */
+export const fitContainersAround = (doc: Y.Doc, nodeId: string, sizes?: RenderedSizes) =>
+  doc.transact(() => {
+    const { nodes } = getCanvasMaps(doc);
+    for (let id = nodes.get(nodeId)?.parentId; id; id = nodes.get(id)?.parentId) fitGroupToChildren(doc, id, sizes);
+  });
+
 /** Put a node in a container (or take it out, without a parentId), keeping it where it is on the canvas */
-export const setNodeParent = (doc: Y.Doc, nodeId: string, parentId: string | undefined) =>
+export const setNodeParent = (doc: Y.Doc, nodeId: string, parentId: string | undefined, sizes?: RenderedSizes) =>
   doc.transact(() => {
     const { nodes } = getCanvasMaps(doc);
     const node = nodes.get(nodeId);
     if (!node || node.parentId === parentId) return false;
     nodes.set(nodeId, toSharedNode(withParent(node, parentId, Array.from(nodes.values()))));
-    if (parentId) fitGroupToChildren(doc, parentId);
+    if (parentId) fitGroupToChildren(doc, parentId, sizes);
     return true;
   });
 
@@ -167,6 +259,35 @@ export const connectNodes = (
   return created;
 };
 
+/**
+ * Moves a connection to new ends (dragged to another node), keeping it the same connection. Its label follows
+ * the new ends if it was EventCatalog's wording, and is kept if someone wrote it.
+ */
+export const reconnectEdge = (doc: Y.Doc, edgeId: string, connection: Connection): Edge | { error: string } =>
+  doc.transact(() => {
+    const { nodes, edges } = getCanvasMaps(doc);
+    const edge = edges.get(edgeId);
+    const source = nodes.get(connection.source);
+    const target = nodes.get(connection.target);
+    if (!edge) return { error: `Connection "${edgeId}" is not on the canvas` };
+    if (!source || !target) return { error: 'Connections join two nodes on the canvas' };
+    if (source.id === target.id) return { error: 'A node cannot be connected to itself' };
+    const duplicate = Array.from(edges.values()).find(
+      (other) => other.id !== edgeId && other.source === source.id && other.target === target.id
+    );
+    if (duplicate) return { error: 'Those nodes are already connected' };
+
+    const defaultLabel = getEdgeLabel(nodes.get(edge.source)?.type, nodes.get(edge.target)?.type);
+    const moved = createEdge(connection, source.type, target.type);
+    const reconnected: Edge = {
+      ...moved,
+      id: edge.id,
+      ...(edge.label !== undefined && edge.label !== defaultLabel && { label: edge.label }),
+    };
+    edges.set(edgeId, reconnected);
+    return reconnected;
+  });
+
 export const deleteEdges = (doc: Y.Doc, ids: string[]) =>
   doc.transact(() => ids.forEach((id) => getCanvasMaps(doc).edges.delete(id)));
 
@@ -267,6 +388,14 @@ export const deleteThread = (doc: Y.Doc, threadId: string) => {
   return exists;
 };
 
+/** Deletes comment threads in one change (one undo brings them all back) */
+export const deleteThreads = (doc: Y.Doc, threadIds: string[]) =>
+  doc.transact(() => threadIds.forEach((id) => deleteThread(doc, id)));
+
+/** Moves comment threads in one change, e.g. ones that moved with what was dragged */
+export const moveThreads = (doc: Y.Doc, moves: { threadId: string; anchor: CommentAnchor }[]) =>
+  doc.transact(() => moves.forEach(({ threadId, anchor }) => moveThread(doc, threadId, anchor)));
+
 // ---- Reading a whole canvas ----
 
 export const readCanvas = (doc: Y.Doc) => {

package/eventcatalog/src/features/studio/canvas-preview.ts

@@ -0,0 +1,53 @@
+import type { Edge, Node } from '@xyflow/react';
+import { getAbsolutePosition, sizeOf } from './grouping';
+import { isGroupType } from './node-types';
+
+/**
+ * A canvas drawn small, for lists of canvases: each node as a box where it is on the canvas (containers as outlines
+ * behind what's in them) and each connection as a line between the boxes' middles. In the canvas's own coordinates,
+ * starting at 0,0, to draw in an SVG with a viewBox of its width and height.
+ */
+export type CanvasPreview = {
+  width: number;
+  height: number;
+  shapes: { x: number; y: number; width: number; height: number; type: string; container: boolean }[];
+  lines: { x1: number; y1: number; x2: number; y2: number }[];
+};
+
+/** Big canvases are drawn from their first few hundred nodes and connections: enough for a thumbnail */
+const MAX_SHAPES = 300;
+const MAX_LINES = 300;
+
+export const getCanvasPreview = (nodes: Node[], edges: Edge[]): CanvasPreview | null => {
+  if (nodes.length === 0) return null;
+  const lookup = new Map(nodes.map((node) => [node.id, node]));
+  const boxes = new Map(
+    nodes.slice(0, MAX_SHAPES).map((node) => {
+      const { x, y } = getAbsolutePosition(node, lookup);
+      return [node.id, { x, y, ...sizeOf(node), type: node.type ?? 'node', container: isGroupType(node.type) }];
+    })
+  );
+  const all = [...boxes.values()];
+  const left = Math.min(...all.map((box) => box.x));
+  const top = Math.min(...all.map((box) => box.y));
+  const right = Math.max(...all.map((box) => box.x + box.width));
+  const bottom = Math.max(...all.map((box) => box.y + box.height));
+  const middle = (id: string) => {
+    const box = boxes.get(id);
+    return box && { x: box.x - left + box.width / 2, y: box.y - top + box.height / 2 };
+  };
+
+  return {
+    width: Math.max(right - left, 1),
+    height: Math.max(bottom - top, 1),
+    // Containers first, so what's in them is drawn over them
+    shapes: all
+      .map((box) => ({ ...box, x: box.x - left, y: box.y - top }))
+      .sort((a, b) => Number(b.container) - Number(a.container)),
+    lines: edges.slice(0, MAX_LINES).flatMap((edge) => {
+      const from = middle(edge.source);
+      const to = middle(edge.target);
+      return from && to ? [{ x1: from.x, y1: from.y, x2: to.x, y2: to.y }] : [];
+    }),
+  };
+};

package/eventcatalog/src/features/studio/catalog-resources.ts

@@ -144,8 +144,11 @@ export const getCatalogResources = async (): Promise<{ resources: CatalogResourc
       const collection = messageCollection.get(id);
       if (collection) relate(keyOf(collection, id), serviceKey);
     }
-    for (const id of idsOf(service.data.writesTo)) relate(serviceKey, keyOf('containers', id));
-    for (const id of idsOf(service.data.readsFrom)) relate(keyOf('containers', id), serviceKey);
+    // A data store it both writes to and reads from is one connection (like the visualiser), not two on top of each other
+    const reads = new Set(idsOf(service.data.readsFrom));
+    const writes = new Set(idsOf(service.data.writesTo));
+    for (const id of writes) relate(serviceKey, keyOf('containers', id), reads.has(id) ? 'reads and writes' : undefined);
+    for (const id of reads) if (!writes.has(id)) relate(keyOf('containers', id), serviceKey);
   }
 
   return { resources, relations };