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

package/eventcatalog/src/features/studio/components/canvas-nodes.tsx

@@ -1,9 +1,10 @@
-import { createContext, memo, useCallback, useContext } from 'react';
-import { NodeResizer, type NodeProps, type NodeTypes } from '@xyflow/react';
-import { DomainCardNode, Note, nodeComponents, SystemGroupNode, type NoteNode as NoteNodeType } from '@eventcatalog/visualiser';
-import { GROUP_TYPES, nodeDefinitions } from '../node-types';
+import { createContext, memo, useCallback, useContext, useRef, useState } from 'react';
+import { NodeResizeControl, NodeResizer, ResizeControlVariant, useStoreApi, type NodeProps, type NodeTypes } from '@xyflow/react';
+import { DomainCardNode, nodeComponents, SystemGroupNode } from '@eventcatalog/visualiser';
+import { GROUP_PADDING } from '../grouping';
+import { getNodeName, GROUP_TYPES, nodeDefinitions } from '../node-types';
 
-/** How the canvas draws each kind of node: the visualiser's nodes, editable notes and resizable containers */
+/** How the canvas draws each kind of node: the visualiser's nodes, notes and text written on the canvas, and resizable containers */
 
 export type UpdateNodeData = (id: string, updater: (data: Record<string, unknown>) => Record<string, unknown>) => void;
 
@@ -18,17 +19,152 @@ export const DropTargetContext = createContext<string | null>(null);
 const visualiserNodes = nodeComponents as unknown as NodeTypes;
 const SystemGroupComponent: NodeTypes[string] = SystemGroupNode;
 
-const NoteNode = memo(function NoteNode(props: NodeProps<NoteNodeType>) {
+/** The handles that set a node's width, on either side (its height follows what's written in it) */
+function WidthHandles() {
+  return (
+    <>
+      {/* Horizontal only: otherwise React Flow saves the height too, and it stops growing with what's written */}
+      <NodeResizeControl
+        position="left"
+        variant={ResizeControlVariant.Line}
+        resizeDirection="horizontal"
+        minWidth={80}
+        className="studio-width-handle"
+      />
+      <NodeResizeControl
+        position="right"
+        variant={ResizeControlVariant.Line}
+        resizeDirection="horizontal"
+        minWidth={80}
+        className="studio-width-handle"
+      />
+    </>
+  );
+}
+
+/**
+ * What's written on a note or text, and writing it: Enter starts a new line, Escape or ⌘/Ctrl + Enter (or clicking
+ * away) finishes, and it's saved for everyone then
+ */
+function Writing({
+  id,
+  text,
+  editing,
+  onDone,
+  placeholder,
+  className,
+}: {
+  id: string;
+  text: string;
+  editing: boolean;
+  onDone: () => void;
+  placeholder: string;
+  className: string;
+}) {
   const updateNodeData = useContext(UpdateNodeDataContext);
-  const onTextChange = useCallback(
-    (id: string, text: string) => updateNodeData(id, (data) => ({ ...data, text })),
-    [updateNodeData]
+  // The box grows with what's written (the node's height follows it)
+  const fit = (area: HTMLTextAreaElement) => {
+    area.style.height = 'auto';
+    area.style.height = `${area.scrollHeight}px`;
+  };
+  if (!editing) return <p className={className}>{text || <span className="opacity-50">{placeholder}</span>}</p>;
+  return (
+    <textarea
+      ref={(area) => {
+        if (area) fit(area);
+      }}
+      autoFocus
+      defaultValue={text}
+      placeholder={placeholder}
+      onFocus={(event) => event.currentTarget.select()}
+      onInput={(event) => fit(event.currentTarget)}
+      onBlur={(event) => {
+        const value = event.currentTarget.value;
+        onDone();
+        if (value !== text) updateNodeData(id, (current) => ({ ...current, text: value }));
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Escape' || (event.key === 'Enter' && (event.metaKey || event.ctrlKey))) event.currentTarget.blur();
+      }}
+      className={`nodrag nopan nowheel block w-full resize-none overflow-hidden bg-transparent outline-none ${className}`}
+    />
   );
-  const onColorChange = useCallback(
-    (id: string, color: string) => updateNodeData(id, (data) => ({ ...data, color })),
-    [updateNodeData]
+}
+
+/** A sticky note's colours: soft paper colours, readable in light and dark themes (the names are the visualiser's) */
+const NOTE_COLORS: Record<string, { fill: string; border: string }> = {
+  yellow: { fill: '#fef9c3', border: '#fde047' },
+  blue: { fill: '#dbeafe', border: '#93c5fd' },
+  green: { fill: '#dcfce7', border: '#86efac' },
+  pink: { fill: '#fce7f3', border: '#f9a8d4' },
+  purple: { fill: '#ede9fe', border: '#c4b5fd' },
+  gray: { fill: '#f3f4f6', border: '#d1d5db' },
+};
+
+/**
+ * A sticky note: a few lines on paper, about as wide as a card and as tall as what's on it. Double click it to
+ * write; when it's selected, its colour can be changed and its width set.
+ */
+const StickyNote = memo(function StickyNote({ id, data, selected }: NodeProps) {
+  const updateNodeData = useContext(UpdateNodeDataContext);
+  const [editing, setEditing] = useState(false);
+  const colorName = typeof data.color === 'string' && NOTE_COLORS[data.color] ? data.color : 'yellow';
+  const color = NOTE_COLORS[colorName];
+  return (
+    <div
+      className="studio-note"
+      style={{ background: color.fill, borderColor: color.border }}
+      onDoubleClick={() => setEditing(true)}
+    >
+      {selected && !editing && (
+        <>
+          <WidthHandles />
+          <div className="nodrag nopan studio-note-colors" role="radiogroup" aria-label="Note colour">
+            {Object.entries(NOTE_COLORS).map(([name, { fill, border }]) => (
+              <button
+                key={name}
+                role="radio"
+                aria-checked={name === colorName}
+                title={name.charAt(0).toUpperCase() + name.slice(1)}
+                onClick={() => updateNodeData(id, (current) => ({ ...current, color: name }))}
+                className="studio-note-color"
+                style={{ background: fill, borderColor: name === colorName ? 'rgb(var(--ec-page-text))' : border }}
+              />
+            ))}
+          </div>
+        </>
+      )}
+      <Writing
+        id={id}
+        text={String(data.text ?? '')}
+        editing={editing}
+        onDone={() => setEditing(false)}
+        placeholder="Double-click to write a note"
+        className="studio-note-body"
+      />
+    </div>
+  );
+});
+
+/**
+ * Text written straight on the canvas (titles, labels, notes to self): double click it to write. Its width is set
+ * with the handles on either side; its height follows what's written.
+ */
+const TextNode = memo(function TextNode({ id, data, selected }: NodeProps) {
+  const [editing, setEditing] = useState(false);
+  return (
+    <div className="studio-text" onDoubleClick={() => setEditing(true)}>
+      {selected && !editing && <WidthHandles />}
+      <Writing
+        id={id}
+        text={String(data.text ?? '')}
+        editing={editing}
+        onDone={() => setEditing(false)}
+        placeholder="Double-click to write"
+        className="studio-text-body"
+      />
+    </div>
   );
-  return <Note {...props} onTextChange={onTextChange} onColorChange={onColorChange} />;
 });
 
 /**
@@ -38,10 +174,51 @@ const NoteNode = memo(function NoteNode(props: NodeProps<NoteNodeType>) {
  */
 const GroupNode = memo(function GroupNode(props: NodeProps) {
   const isDropTarget = useContext(DropTargetContext) === props.id;
+  const store = useStoreApi();
+  // Where what's inside has to stay (with room around it and for the header), in the container's parent's
+  // coordinates: found when a resize starts, so it can't be resized smaller than what's in it
+  const contents = useRef<{ left: number; top: number; right: number; bottom: number } | null>(null);
+  const onResizeStart = useCallback(() => {
+    const { nodeLookup } = store.getState();
+    const container = nodeLookup.get(props.id);
+    const children = [...nodeLookup.values()].filter((node) => node.parentId === props.id);
+    if (!container || children.length === 0) {
+      contents.current = null;
+      return;
+    }
+    const { x, y } = container.position;
+    const size = (node: (typeof children)[number]) => ({
+      width: node.measured.width ?? node.width ?? 0,
+      height: node.measured.height ?? node.height ?? 0,
+    });
+    const own = size(container);
+    // A side already closer in than that (e.g. something placed in the padding) can still move out, just not in
+    contents.current = {
+      left: Math.max(x + Math.min(...children.map((node) => node.position.x)) - GROUP_PADDING.left, x),
+      top: Math.max(y + Math.min(...children.map((node) => node.position.y)) - GROUP_PADDING.top, y),
+      right: Math.min(
+        x + Math.max(...children.map((node) => node.position.x + size(node).width)) + GROUP_PADDING.right,
+        x + own.width
+      ),
+      bottom: Math.min(
+        y + Math.max(...children.map((node) => node.position.y + size(node).height)) + GROUP_PADDING.bottom,
+        y + own.height
+      ),
+    };
+  }, [store, props.id]);
+  const shouldResize = useCallback(
+    (_: unknown, { x, y, width, height }: { x: number; y: number; width: number; height: number }) => {
+      const bounds = contents.current;
+      return !bounds || (x <= bounds.left && y <= bounds.top && x + width >= bounds.right && y + height >= bounds.bottom);
+    },
+    []
+  );
   return (
     <div style={{ width: '100%', height: '100%', position: 'relative' }}>
       <NodeResizer
         isVisible={props.selected}
+        onResizeStart={onResizeStart}
+        shouldResize={shouldResize}
         minWidth={240}
         minHeight={160}
         lineClassName="!border-[rgb(var(--ec-accent))]"
@@ -50,14 +227,13 @@ const GroupNode = memo(function GroupNode(props: NodeProps) {
       <SystemGroupComponent {...props} />
       {/* The header (and the badge on its border) */}
       <div className="ec-group-grip absolute inset-x-0 -top-3 h-[60px] cursor-grab" />
-      {(isDropTarget || props.selected) && (
-        <div
-          className={`pointer-events-none absolute inset-0 rounded-[14px] ${
-            isDropTarget
-              ? 'ring-4 ring-[rgb(var(--ec-accent)/0.5)] bg-[rgb(var(--ec-accent)/0.05)]'
-              : 'ring-2 ring-[rgb(var(--ec-accent)/0.7)]'
-          }`}
-        />
+      {isDropTarget ? (
+        // What's dragged over it goes in it when it's dropped
+        <div className="ec-drop-target">
+          <span className="ec-drop-target-label">Drop to add to {getNodeName(props.type, props.data, 'this container')}</span>
+        </div>
+      ) : (
+        props.selected && <div className="ec-group-selected" />
       )}
     </div>
   );
@@ -67,7 +243,7 @@ export const nodeTypes: NodeTypes = {
   ...Object.fromEntries(
     nodeDefinitions.map((definition) => [
       definition.type,
-      definition.type === 'note' ? NoteNode : visualiserNodes[definition.type],
+      definition.type === 'note' ? StickyNote : definition.type === 'text' ? TextNode : visualiserNodes[definition.type],
     ])
   ),
   // Only dropped in from the catalog

package/eventcatalog/src/features/studio/components/icons.ts

@@ -11,6 +11,7 @@ import {
   Search,
   ServerIcon,
   StickyNote,
+  Type,
   User,
   Zap,
 } from 'lucide-react';
@@ -22,17 +23,21 @@ export type NodeIcon = { icon: LucideIcon; className: string };
 export const NODE_ICONS: Record<string, NodeIcon> = {
   [GROUP_TYPES.domain]: { icon: Boxes, className: 'text-yellow-500' },
   [GROUP_TYPES.system]: { icon: Group, className: 'text-violet-600' },
+  // Catalog domains and systems added as cards
+  'context-domain': { icon: Boxes, className: 'text-yellow-500' },
+  system: { icon: Group, className: 'text-violet-600' },
   service: { icon: ServerIcon, className: 'text-pink-600' },
   event: { icon: Zap, className: 'text-orange-600' },
   command: { icon: Mail, className: 'text-blue-600' },
   query: { icon: Search, className: 'text-green-600' },
   channel: { icon: ArrowRightLeft, className: 'text-gray-600' },
   data: { icon: Database, className: 'text-blue-600' },
-  view: { icon: MonitorSmartphone, className: 'text-indigo-600' },
+  view: { icon: MonitorSmartphone, className: 'text-sky-600' },
   externalSystem: { icon: Globe, className: 'text-purple-600' },
   agent: { icon: Bot, className: 'text-violet-600' },
   actor: { icon: User, className: 'text-sky-600' },
   note: { icon: StickyNote, className: 'text-yellow-500' },
+  text: { icon: Type, className: 'text-[rgb(var(--ec-icon-color))]' },
 };
 
 /** The catalog's collections, in the order the catalog list shows them, with the icon of the node each becomes */

package/eventcatalog/src/features/studio/components/status.ts

@@ -1,3 +1,4 @@
+import type { CanvasStatus } from '../canvas-doc';
 import type { Status } from '../hooks/use-studio-flow';
 
 /**
@@ -6,7 +7,7 @@ import type { Status } from '../hooks/use-studio-flow';
  */
 export const STATUS = {
   success: { text: 'text-[rgb(var(--ec-badge-color-green-text))]', dot: 'bg-[rgb(var(--ec-badge-color-green-text))]' },
-  warning: { dot: 'bg-[rgb(var(--ec-badge-color-yellow-text))]' },
+  warning: { text: 'text-[rgb(var(--ec-badge-color-yellow-text))]', dot: 'bg-[rgb(var(--ec-badge-color-yellow-text))]' },
   danger: {
     text: 'text-[rgb(var(--ec-badge-color-red-text))]',
     dot: 'bg-[rgb(var(--ec-badge-color-red-text))]',
@@ -20,3 +21,31 @@ export const CONNECTION_DOT: Record<Status, string> = {
   connecting: STATUS.warning.dot,
   disconnected: STATUS.danger.dot,
 };
+
+/** How each canvas status looks and what it means (from the theme's badge colours) */
+export const CANVAS_STATUS_LOOK: Record<CanvasStatus, { label: string; description: string; pill: string; dot: string }> = {
+  draft: {
+    label: 'Draft',
+    description: 'Being worked on',
+    pill: 'bg-[rgb(var(--ec-badge-color-gray-background))] text-[rgb(var(--ec-badge-color-gray-text))] border-[rgb(var(--ec-badge-color-gray-text)/0.25)]',
+    dot: 'bg-[rgb(var(--ec-badge-color-gray-text))]',
+  },
+  proposed: {
+    label: 'Proposed',
+    description: 'Ready for review',
+    pill: 'bg-[rgb(var(--ec-badge-color-yellow-background))] text-[rgb(var(--ec-badge-color-yellow-text))] border-[rgb(var(--ec-badge-color-yellow-text)/0.3)]',
+    dot: 'bg-[rgb(var(--ec-badge-color-yellow-text))]',
+  },
+  accepted: {
+    label: 'Accepted',
+    description: 'The agreed design',
+    pill: 'bg-[rgb(var(--ec-badge-color-green-background))] text-[rgb(var(--ec-badge-color-green-text))] border-[rgb(var(--ec-badge-color-green-text)/0.3)]',
+    dot: 'bg-[rgb(var(--ec-badge-color-green-text))]',
+  },
+  rejected: {
+    label: 'Rejected',
+    description: 'Decided against, kept for the record',
+    pill: 'bg-[rgb(var(--ec-badge-color-red-background))] text-[rgb(var(--ec-badge-color-red-text))] border-[rgb(var(--ec-badge-color-red-text)/0.3)]',
+    dot: 'bg-[rgb(var(--ec-badge-color-red-text))]',
+  },
+};

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

@@ -24,6 +24,8 @@ export const getEdgeLabel = (sourceType = '', targetType = ''): string => {
   const targetCollection = MESSAGE_COLLECTIONS[targetType];
 
   if (PRODUCERS.includes(sourceType) && targetCollection) return PRODUCER_LABELS[targetCollection];
+  // One message leading to another (e.g. an event that causes a command)
+  if (sourceCollection && targetCollection) return 'triggers';
   if (sourceCollection && targetType === 'channel') return 'sent to';
   if (sourceCollection) return MESSAGE_LABELS[sourceCollection];
   if (sourceType === 'channel') return 'routes to';

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

@@ -1,5 +1,5 @@
 import type { Node, XYPosition } from '@xyflow/react';
-import { getNodeSize, isGroupType } from './node-types';
+import { canGoInContainer, getNodeSize, isGroupType } from './node-types';
 
 /**
  * Containers: domains and systems shown as boxes that other nodes sit in.
@@ -60,7 +60,8 @@ export const sortByHierarchy = (nodes: Node[]): Node[] => {
 export const findDropTarget = (nodeId: string, nodes: Node[]): Node | undefined => {
   const lookup = byId(nodes);
   const node = lookup.get(nodeId);
-  if (!node) return undefined;
+  // Sticky notes go anywhere, never in a container (one that's in one is taken out when it's next moved)
+  if (!node || !canGoInContainer(node.type)) return undefined;
   const rect = getAbsoluteRect(node, lookup);
   const center = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
   return nodes
@@ -131,3 +132,95 @@ export const fitGroup = (groupId: string, nodes: Node[]) => {
     height: Math.max(current.height, Math.max(...rects.map((rect) => rect.y + rect.height)) + shift.y + GROUP_PADDING.bottom),
   };
 };
+
+/** How far a dragged node's middle can go past a container's edge and still be kept in it (growing it) */
+export const KEEP_IN_CONTAINER_MARGIN = 160;
+
+type Size = { width: number; height: number };
+/** A node's place and size as shown while something's dragged */
+export type NodePreview = { position: XYPosition; width?: number; height?: number };
+
+/**
+ * Containers growing to fit what's being dragged in them, on every side, as a preview of where things will be.
+ * `containerIds` are the containers around what's dragged, innermost first. `start` is the canvas when the drag
+ * started, and `now` the canvas as shown (with the dragged nodes where they are now). A dragged node is kept in a
+ * container while its middle is within `KEEP_IN_CONTAINER_MARGIN` of where the container was, and dropping it
+ * further away takes it out, so the container goes back to its size. A container growing up or left moves, and
+ * what's in it moves the other way, so nothing moves on the canvas.
+ *
+ * Returns, by id, where containers and the nodes in them that aren't dragged go (positions relative to their
+ * containers), and their sizes for containers.
+ */
+export const previewContainerGrowth = (
+  containerIds: string[],
+  draggedIds: ReadonlySet<string>,
+  start: ReadonlyMap<string, Node>,
+  now: ReadonlyMap<string, Node>
+): Map<string, NodePreview> => {
+  const previews = new Map<string, NodePreview>();
+  // Where each container's top left was on the canvas when the drag started (moving a container grown up or
+  // left is offset by what's in it moving the other way, so only its own shift changes it)
+  const startOrigin = (id: string) => getAbsolutePosition(start.get(id)!, start as Map<string, Node>);
+  const shifts = new Map<string, XYPosition>();
+
+  for (const id of containerIds) {
+    const container = start.get(id);
+    if (!container) continue;
+    const origin = startOrigin(id);
+    const startSize = sizeOf(container);
+    // Everything in it, in its coordinates when the drag started
+    const items: { rect: Rect }[] = [];
+    for (const node of start.values()) {
+      if (node.parentId !== id) continue;
+      if (draggedIds.has(node.id)) {
+        const current = now.get(node.id);
+        if (!current) continue;
+        const at = getAbsoluteRect(current, now as Map<string, Node>);
+        const middle = { x: at.x + at.width / 2, y: at.y + at.height / 2 };
+        const kept =
+          middle.x >= origin.x - KEEP_IN_CONTAINER_MARGIN &&
+          middle.x <= origin.x + startSize.width + KEEP_IN_CONTAINER_MARGIN &&
+          middle.y >= origin.y - KEEP_IN_CONTAINER_MARGIN &&
+          middle.y <= origin.y + startSize.height + KEEP_IN_CONTAINER_MARGIN;
+        if (kept) items.push({ rect: { ...at, x: at.x - origin.x, y: at.y - origin.y } });
+        continue;
+      }
+      // A container inside it that's grown: where it's grown to
+      const inner = previews.get(node.id);
+      const innerShift = shifts.get(node.id) ?? { x: 0, y: 0 };
+      items.push({
+        rect: {
+          x: node.position.x - innerShift.x,
+          y: node.position.y - innerShift.y,
+          ...(inner?.width && inner.height ? { width: inner.width, height: inner.height } : sizeOf(node)),
+        },
+      });
+    }
+
+    const shift = { x: 0, y: 0 };
+    let width = startSize.width;
+    let height = startSize.height;
+    if (items.length > 0) {
+      shift.x = Math.max(0, GROUP_PADDING.left - Math.min(...items.map(({ rect }) => rect.x)));
+      shift.y = Math.max(0, GROUP_PADDING.top - Math.min(...items.map(({ rect }) => rect.y)));
+      width =
+        Math.max(startSize.width, Math.max(...items.map(({ rect }) => rect.x + rect.width)) + GROUP_PADDING.right) + shift.x;
+      height =
+        Math.max(startSize.height, Math.max(...items.map(({ rect }) => rect.y + rect.height)) + GROUP_PADDING.bottom) + shift.y;
+    }
+    shifts.set(id, shift);
+    previews.set(id, {
+      position: { x: container.position.x - shift.x, y: container.position.y - shift.y },
+      width,
+      height,
+    });
+    // What's in it moves the other way. Not what's dragged: React Flow places it against the container as it is.
+    for (const node of start.values()) {
+      if (node.parentId !== id || draggedIds.has(node.id)) continue;
+      const own = previews.get(node.id);
+      const base = own?.position ?? node.position;
+      previews.set(node.id, { ...own, position: { x: base.x + shift.x, y: base.y + shift.y } });
+    }
+  }
+  return previews;
+};

package/eventcatalog/src/features/studio/hooks/presence-store.ts

@@ -6,6 +6,8 @@ export type Peer = {
   clientId: number;
   name: string;
   color: string;
+  /** A picture from their sign-in provider (SSO), shown over their initials */
+  picture?: string;
   /** An AI agent (joined over MCP, or working through this tab with WebMCP), rather than a person */
   agent?: boolean;
   /** What an agent is doing, e.g. "Adding OrderService" */
@@ -60,7 +62,9 @@ const toPeers = (awareness: Awareness): Peer[] => {
 
 // What getPeople() changes on: who people are, what agents are doing, and whether they're on the canvas (a pointer)
 const identity = (peer: Peer) =>
-  [peer.clientId, peer.name, peer.color, peer.agent ? 1 : 0, peer.activity ?? '', peer.pointer ? 1 : 0].join('|');
+  [peer.clientId, peer.name, peer.color, peer.picture ?? '', peer.agent ? 1 : 0, peer.activity ?? '', peer.pointer ? 1 : 0].join(
+    '|'
+  );
 
 export function createPresenceStore(awareness: Awareness): PresenceStore {
   const listeners = new Set<Listener>();

package/eventcatalog/src/features/studio/hooks/use-canvas-webmcp.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { z } from 'zod';
 import type * as Y from 'yjs';
 import { initializeWebMCPPolyfill } from '@mcp-b/webmcp-polyfill';
-import { replyToThread, setThreadResolved, type Author } from '../canvas-doc';
+import { replyToThread, setThreadResolved, type Author, CANVAS_STATUSES, setCanvasStatus } from '../canvas-doc';
 import {
   ADD_TO_CANVAS_DESCRIPTION,
   CATALOG_COLLECTIONS,
@@ -243,11 +243,12 @@ const createCanvasTools = (get: () => CanvasWebMcpOptions, getStage: () => Agent
       name: 'update_node',
       title: 'Update a node',
       description:
-        'Renames, re-describes or moves a node (x/y: its new centre). Catalog resources keep their catalog name and summary. For notes, summary is the note text.',
+        'Renames, re-describes, re-versions or moves a node (x/y: its new centre). Catalog resources keep their catalog name, summary and version. For notes, summary is the note text.',
       input: z.object({
         nodeId: z.string(),
         name: z.string().optional(),
         summary: z.string().optional(),
+        version: z.string().optional().describe('e.g. 1.0.0'),
         x: z.number().optional(),
         y: z.number().optional(),
       }),
@@ -290,10 +291,19 @@ const createCanvasTools = (get: () => CanvasWebMcpOptions, getStage: () => Agent
         return { laidOut: true };
       },
     }),
+    defineTool({
+      name: 'set_canvas_status',
+      title: 'Set the canvas status',
+      description:
+        "Changes the canvas's status: draft (being worked on, where every canvas starts), proposed (ready for review), accepted (the agreed design) or rejected (decided against). Only change it when the user asks you to. Changing the nodes or connections on an accepted or rejected canvas makes it a draft again.",
+      input: z.object({ status: z.enum(CANVAS_STATUSES), note: z.string().optional() }),
+      execute: ({ status, note }) => withDoc((doc) => ({ status, changed: setCanvasStatus(doc, status, get().agent, note) })),
+    }),
     defineTool({
       name: 'add_comment',
       title: 'Comment on the canvas',
-      description: 'Starts a comment thread pinned to a node (nodeId) or a spot (x, y), to ask questions or explain suggestions.',
+      description:
+        "Starts a comment thread pinned to a node (nodeId) or a spot (x, y). Only use it when the user asks you to comment (e.g. to review the canvas). Don't use comments to greet people or ask the user questions: talk to them in the conversation.",
       input: z.object({ text: z.string(), nodeId: z.string().optional(), x: z.number().optional(), y: z.number().optional() }),
       execute: async (input) => {
         const stage = getStage();

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

@@ -3,8 +3,10 @@ import type * as Y from 'yjs';
 import {
   createThread as createThreadInDoc,
   deleteThread as deleteThreadInDoc,
+  deleteThreads as deleteThreadsInDoc,
   getCanvasMaps,
   moveThread as moveThreadInDoc,
+  moveThreads as moveThreadsInDoc,
   readThreads,
   replyToThread,
   setThreadResolved,
@@ -42,6 +44,11 @@ export function useComments(doc: Y.Doc | null, author: Author) {
     [doc]
   );
   const deleteThread = useCallback((threadId: string) => doc && deleteThreadInDoc(doc, threadId), [doc]);
+  const deleteThreads = useCallback((threadIds: string[]) => doc && deleteThreadsInDoc(doc, threadIds), [doc]);
+  const moveThreads = useCallback(
+    (moves: { threadId: string; anchor: CommentAnchor }[]) => doc && moveThreadsInDoc(doc, moves),
+    [doc]
+  );
 
-  return { threads, createThread, reply, setResolved, moveThread, deleteThread };
+  return { threads, createThread, reply, setResolved, moveThread, moveThreads, deleteThread, deleteThreads };
 }

package/eventcatalog/src/features/studio/hooks/use-follow-camera.ts

@@ -53,10 +53,15 @@ export function useFollowCamera({
     pausedUntil.current = Date.now() + PAUSE_AFTER_USER_MS;
   }, []);
 
-  // A canvas that opens empty and fills in (it syncs after it opens) fits once its content arrives
+  // A canvas that opens empty and fills in (it syncs after it opens) fits once its content arrives, and so does an
+  // empty canvas when something's added to it (rather than keeping however far out it was zoomed)
   const hasFitContent = useRef(false);
   useEffect(() => {
-    if (hasFitContent.current || !hasNodes || !width) return;
+    if (!hasNodes) {
+      hasFitContent.current = false;
+      return;
+    }
+    if (hasFitContent.current || !width) return;
     hasFitContent.current = true;
     const frame = requestAnimationFrame(() => void fitView({ padding: PADDING, maxZoom: MAX_ZOOM, duration: 300 }));
     return () => cancelAnimationFrame(frame);