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

package/eventcatalog/src/features/studio/components/StudioDesigner.tsx

@@ -7,11 +7,14 @@ import {
   useReactFlow,
   type Edge,
   type Node,
+  type NodeChange,
   type XYPosition,
 } from '@xyflow/react';
 import { edgeTypes } from '@eventcatalog/visualiser';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { indexCatalog } from '../canvas-actions';
+import { getCatalogConnections, indexCatalog, planWithConnections, type ConnectionGroup } from '../canvas-actions';
+import { isDecided } from '../canvas-doc';
+import { CLIPBOARD_TYPE, copyNodes, pasteNodes, readClipboard, type ClipboardContent } from '../clipboard';
 import type { CatalogRelation, CatalogResource } from '../catalog-resources';
 import {
   buildContainer,
@@ -22,25 +25,37 @@ import {
   getContents,
   getRelatedEdges,
 } from '../catalog';
-import { findDropTarget, findGroupAtPoint, sortByHierarchy, toRelativePosition } from '../grouping';
+import {
+  findDropTarget,
+  findGroupAtPoint,
+  getAbsolutePosition,
+  previewContainerGrowth,
+  sizeOf,
+  sortByHierarchy,
+  toRelativePosition,
+} from '../grouping';
 import type { Peer } from '../hooks/presence-store';
 import { useCanvasWebMcp } from '../hooks/use-canvas-webmcp';
 import { useStudioFlow } from '../hooks/use-studio-flow';
 import { useComments, type CommentAnchor, type Thread } from '../hooks/use-comments';
 import { getLayoutPositions, layoutGraph } from '../layout';
 import { getLevelGraph, getLevelUnavailableReason, LEVELS, type Level } from '../levels';
-import { getNodeLabel, getNodeName } from '../node-types';
+import { getNodeDefinition, getNodeLabel, getNodeName, getNoteLevel, isOnLevel, isWrittenOnCanvas } from '../node-types';
 import type { ToolSync } from '../tool-sync';
 import CanvasControls, { FIT_VIEW_OPTIONS } from './CanvasControls';
 import CanvasHeader from './CanvasHeader';
 import { DropTargetContext, nodeTypes, UpdateNodeDataContext } from './canvas-nodes';
-import { anchorAt, CanvasContextMenu, CommentLayer, getAnchorPosition, type ContextMenuState } from './Comments';
+import { anchorAt, CanvasContextMenu, CommentLayer, getAnchorPosition, timeAgo, type ContextMenuState } from './Comments';
+import { CANVAS_STATUS_LOOK } from './status';
 import ConnectAgentDialog, { enableWebMcp, isRelayEnabled, isWebMcpEnabled, loadRelay } from './ConnectAgentDialog';
 import ContainerChooser, { type ContainerChoice } from './ContainerChooser';
-import JoinForm, { colorForName, getStoredName, storeName } from './JoinForm';
+import ConnectionsChooser, { type ConnectionsChoice } from './ConnectionsChooser';
+import JoinForm from './JoinForm';
+import { colorForName, getStoredName, onStoredNameChange, storeName } from '../identity';
 import LeftPanel, { CATALOG_DRAG_TYPE, COMPONENT_DRAG_TYPE } from './LeftPanel';
 import { AgentActivity, RemotePresence, ViewportSharer } from './Presence';
 import PropertiesPanel from './PropertiesPanel';
+import ShareDialog from './ShareDialog';
 
 type CanvasProps = {
   canvasId: string;
@@ -55,6 +70,8 @@ type CanvasProps = {
   mcpUrl?: string;
   /** The WebMCP local relay's script, when this page can offer it (not inside a chat) */
   relayScriptPath?: string;
+  /** Canvases are only kept in memory, until the server restarts (`studio.storage` is "memory") */
+  keptInMemory?: boolean;
   /** Sync through MCP tool calls when the WebSocket can't connect (e.g. inside a chat's sandbox) */
   syncViaTools?: ToolSync;
   /** Follow agents' changes with the camera from the start (e.g. inside a chat, where you watch an agent work) */
@@ -63,6 +80,8 @@ type CanvasProps = {
   onSelectionChange?: (selected: SelectedNode[]) => void;
   /** Join with this name instead of asking for one (e.g. inside a chat, where the agent or host knows who it is) */
   defaultName?: string;
+  /** Signed in with the catalog's sign-in (SSO): you're shown by this name and picture, and can't change them */
+  signedInAs?: { name: string; picture?: string };
   resources: CatalogResource[];
   relations: CatalogRelation[];
 };
@@ -72,6 +91,12 @@ export type SelectedNode = { id: string; name: string; type: string; catalogReso
 /** How long a level (L1, L2) waits for changes to settle before it's laid out again */
 const LEVEL_RELAYOUT_MS = 300;
 const DELETE_KEYS = ['Backspace', 'Delete'];
+const LEVEL_FIT_VIEW_OPTIONS = { ...FIT_VIEW_OPTIONS, maxZoom: 1 };
+const NO_THREADS: ReadonlySet<string> = new Set();
+// React Flow's warnings, except that a handle has no node: the left panel's drag previews draw nodes off the canvas
+const onFlowError = (code: string, message: string) => {
+  if (code !== '010') console.warn(message);
+};
 const MULTI_SELECTION_KEYS = ['Meta', 'Shift'];
 /**
  * Like design tools: dragging on the canvas draws a box to select what's inside it, and the canvas pans with
@@ -79,6 +104,8 @@ const MULTI_SELECTION_KEYS = ['Meta', 'Shift'];
  * zooms. The right button stays for the context menu.
  */
 const PAN_BUTTONS = [1];
+/** How close to a connection's end you grab it to move it */
+const RECONNECT_RADIUS = 14;
 const ZOOM_KEYS = ['Meta', 'Control'];
 const DEFAULT_SOCKET_PATH = '/_eventcatalog/studio';
 
@@ -98,16 +125,34 @@ const withoutEnvelope = (edge: Edge) => {
 };
 
 /** Ids, types and containers: what changes when nodes are added, removed or moved in or out of containers */
+// Notes on L1 and L2 can be moved and selected there, unlike the rest of the level (made once per note, so a note
+// keeps its identity until it changes)
+const levelNotes = new WeakMap<Node, Node>();
+const asLevelNote = (node: Node) => {
+  let note = levelNotes.get(node);
+  if (!note) levelNotes.set(node, (note = { ...node, draggable: true, selectable: true }));
+  return note;
+};
+
 const structureOf = (nodes: Node[]) => nodes.map((node) => `${node.id}:${node.type}:${node.parentId ?? ''}`).join('|');
 
-export default function StudioDesigner({ defaultName, ...props }: CanvasProps) {
+export default function StudioDesigner({ defaultName, signedInAs, ...props }: CanvasProps) {
   const [name, setName] = useState(() => getStoredName() ?? defaultName ?? null);
 
   const saveName = useCallback((next: string) => {
     setName(next);
     storeName(next);
   }, []);
-
+  // Renamed on the Studio page or another canvas in this browser
+  useEffect(() => onStoredNameChange((next) => next && setName(next)), []);
+
+  if (signedInAs) {
+    return (
+      <ReactFlowProvider>
+        <Canvas {...props} name={signedInAs.name} picture={signedInAs.picture} />
+      </ReactFlowProvider>
+    );
+  }
   if (!name) return <JoinForm onJoin={saveName} />;
 
   return (
@@ -128,14 +173,21 @@ function Canvas({
   shareUrl,
   mcpUrl = '/docs/mcp',
   relayScriptPath,
+  keptInMemory = false,
   syncViaTools,
   followChanges = false,
   onSelectionChange,
   resources,
   relations,
   name,
+  picture,
   onRename,
-}: Omit<CanvasProps, 'defaultName'> & { name: string; onRename: (name: string) => void }) {
+}: Omit<CanvasProps, 'defaultName' | 'signedInAs'> & {
+  name: string;
+  picture?: string;
+  /** Not given when you're signed in (your name is the one you signed in with) */
+  onRename?: (name: string) => void;
+}) {
   const color = colorForName(name);
   const canvasRef = useRef<HTMLDivElement>(null);
 
@@ -148,15 +200,26 @@ function Canvas({
     transitionTimer.current = setTimeout(() => setTransitioning(false), 600);
   }, []);
 
+  // Containers grow smoothly when they're fitted to what's in them (or someone else resizes them). Set on the
+  // element rather than in state, so it doesn't re-render the canvas.
+  const resizeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const animateContainers = useCallback(() => {
+    canvasRef.current?.classList.add('is-container-resize');
+    clearTimeout(resizeTimer.current);
+    resizeTimer.current = setTimeout(() => canvasRef.current?.classList.remove('is-container-resize'), 400);
+  }, []);
+
   const flow = useStudioFlow({
     canvasId,
     socketUrl: socketUrl ?? toSocketUrl(socketPath),
     name,
     color,
+    picture,
     syncViaTools,
     onLayout: glide,
+    onContainerResize: animateContainers,
   });
-  const author = useMemo(() => ({ name, color }), [name, color]);
+  const author = useMemo(() => ({ name, color, ...(picture && { picture }) }), [name, color, picture]);
   const comments = useComments(flow.doc, author);
   const { screenToFlowPosition, flowToScreenPosition, setCenter, getZoom, fitView } = useReactFlow();
 
@@ -209,12 +272,20 @@ function Canvas({
 
   // A domain or system dropped on the canvas: asked whether it's a card or a container first
   const [chooser, setChooser] = useState<{ resource: CatalogResource; center: XYPosition } | null>(null);
+  // A service or message that connects to things not on the canvas yet: asked whether to bring them too
+  const [connectionsChooser, setConnectionsChooser] = useState<{
+    resource: CatalogResource;
+    center: XYPosition;
+    groups: ConnectionGroup[];
+  } | null>(null);
 
   // A catalog resource is added with edges to the related resources already on the canvas
   const addResource = useStableCallback((key: string, center: XYPosition = canvasCenter()) => {
     const resource = catalog.resourcesByKey.get(key);
     if (!resource) return;
     if (canBeContainer(resource)) return setChooser({ resource, center });
+    const groups = getCatalogConnections(resource, catalog, keysOnCanvas);
+    if (groups.length > 0) return setConnectionsChooser({ resource, center, groups });
     addCard(resource, center);
   });
 
@@ -261,6 +332,18 @@ function Canvas({
   });
   const cancelChooser = useCallback(() => setChooser(null), []);
 
+  const chooseConnections = useStableCallback((choice: ConnectionsChoice) => {
+    if (!connectionsChooser) return;
+    const { resource, center } = connectionsChooser;
+    if (choice.as === 'card') addCard(resource, center);
+    else {
+      const { nodes, edges } = planWithConnections(nodesRef.current, resource, center, choice.include, catalog);
+      flow.insertNodes(nodes, edges);
+    }
+    setConnectionsChooser(null);
+  });
+  const cancelConnectionsChooser = useCallback(() => setConnectionsChooser(null), []);
+
   // What a domain or system dropped as a container would bring with it
   const chooserContents = useMemo(() => {
     if (!chooser) return { systems: 0, services: 0 };
@@ -273,26 +356,118 @@ function Canvas({
     };
   }, [chooser, catalog, keysOnCanvas]);
 
-  const addComponent = useStableCallback((type: string) => flow.addNode(type, canvasCenter()));
-  const addNote = useStableCallback(() => flow.addNode('note', canvasCenter()));
+  /** A sticky note on the level shown (it's only shown on that level) */
+  const addNoteAt = (center: XYPosition) => {
+    const data = getNodeDefinition('note')!.createData();
+    flow.insertNode('note', levelRef.current === 3 ? data : { ...data, level: levelRef.current }, center);
+  };
+  /**
+   * Where something added while L1 or L2 is shown goes: L1 and L2 are views of the canvas people edit (L3), so it's
+   * added there (shown on L3), below what's on it
+   */
+  const centerOnCanvas = (center: XYPosition) => {
+    if (levelRef.current === 3) return center;
+    changeLevel(3);
+    const roots = nodesRef.current.filter((node) => !node.parentId && isOnLevel(node, 3));
+    if (roots.length === 0) return { x: 0, y: 0 };
+    const left = Math.min(...roots.map((node) => node.position.x));
+    const right = Math.max(...roots.map((node) => node.position.x + sizeOf(node).width));
+    const bottom = Math.max(...roots.map((node) => node.position.y + sizeOf(node).height));
+    return { x: (left + right) / 2, y: bottom + 160 };
+  };
+  const addComponentAt = (type: string, center: XYPosition) =>
+    type === 'note' ? addNoteAt(center) : flow.addNode(type, centerOnCanvas(center));
+
+  const addComponent = useStableCallback((type: string) => addComponentAt(type, canvasCenter()));
+  const addNote = useStableCallback(() => addNoteAt(canvasCenter()));
+  const addResourceFromPanel = useStableCallback((key: string) => addResource(key, centerOnCanvas(canvasCenter())));
 
   const onDrop = useStableCallback((event: DragEvent) => {
     event.preventDefault();
     const position = screenToFlowPosition({ x: event.clientX, y: event.clientY });
     const type = event.dataTransfer.getData(COMPONENT_DRAG_TYPE);
     const resourceKey = event.dataTransfer.getData(CATALOG_DRAG_TYPE);
-    if (type) flow.addNode(type, position);
-    if (resourceKey) addResource(resourceKey, position);
+    if (type) addComponentAt(type, position);
+    if (resourceKey) addResource(resourceKey, centerOnCanvas(position));
   });
 
   // ---- Pointer, panning and dragging ----
 
   // React Flow's node drag and panning (d3) stop mousemove from propagating, so follow the
   // pointer with pointer events, and with dragover while something is dragged in from the palette
+  // Where the pointer is on the canvas (while it's over it), for pasting there
+  const pointerAt = useRef<XYPosition | null>(null);
   const trackPointer = useStableCallback((event: { clientX: number; clientY: number }) => {
-    flow.setPointer(screenToFlowPosition({ x: event.clientX, y: event.clientY }));
+    pointerAt.current = screenToFlowPosition({ x: event.clientX, y: event.clientY });
+    flow.setPointer(pointerAt.current);
   });
-  const clearPointer = useCallback(() => flow.setPointer(null), [flow.setPointer]);
+  const clearPointer = useCallback(() => {
+    pointerAt.current = null;
+    flow.setPointer(null);
+  }, [flow.setPointer]);
+
+  // ---- Copy and paste ----
+
+  // Pasting again without moving the pointer off the canvas cascades the copies, like design tools do
+  const pastes = useRef(0);
+  const selectedIds = () => nodesRef.current.filter((node) => node.selected).map((node) => node.id);
+  // What was last copied here (for "Paste here" in the context menu, which can't read the clipboard without asking)
+  const [lastCopied, setLastCopied] = useState<ClipboardContent | null>(null);
+  // Nodes to copy instead of the selection (copying from the context menu)
+  const copyOnly = useRef<string[] | null>(null);
+
+  /** Adds copies (as one change, so one undo takes them back) and selects them instead of what was selected */
+  const paste = useStableCallback((content: ClipboardContent, place: { at: XYPosition } | { offset: XYPosition }) => {
+    const { nodes, edges } = pasteNodes(content, nodesRef.current, place);
+    flow.onNodesChange(selectedIds().map((id) => ({ type: 'select', id, selected: false })));
+    flow.insertNodes(nodes, edges);
+    flow.onNodesChange(nodes.map((node) => ({ type: 'select', id: node.id, selected: true })));
+  });
+
+  useEffect(() => {
+    // Copying, cutting and pasting text in a field (or a note being edited) works as usual
+    const isTyping = () => {
+      const active = document.activeElement;
+      return (
+        active instanceof HTMLElement && (active.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(active.tagName))
+      );
+    };
+    // Text selected on the page (e.g. in a panel) is copied as text, like anywhere else
+    const hasTextSelected = () => !!window.getSelection()?.toString();
+    const copy = (event: ClipboardEvent) => {
+      const fromMenu = copyOnly.current !== null;
+      const ids = copyOnly.current ?? selectedIds();
+      copyOnly.current = null;
+      if (levelRef.current !== 3 || isTyping() || !event.clipboardData || (!fromMenu && hasTextSelected())) return;
+      const content = copyNodes(nodesRef.current, edgesRef.current, ids);
+      if (!content) return;
+      event.preventDefault();
+      event.clipboardData.setData(CLIPBOARD_TYPE, JSON.stringify(content));
+      // Other apps get a list of what was copied
+      event.clipboardData.setData('text/plain', content.nodes.map((node) => getNodeName(node.type, node.data)).join('\n'));
+      pastes.current = 0;
+      setLastCopied(content);
+      if (event.type === 'cut') flow.deleteNodes(ids);
+    };
+    const onPaste = (event: ClipboardEvent) => {
+      if (levelRef.current !== 3 || isTyping()) return;
+      const content =
+        readClipboard(event.clipboardData?.getData(CLIPBOARD_TYPE)) ?? readClipboard(event.clipboardData?.getData('text/plain'));
+      if (!content) return;
+      event.preventDefault();
+      pastes.current += 1;
+      const step = 40 * pastes.current;
+      paste(content, pointerAt.current ? { at: pointerAt.current } : { offset: { x: step, y: step } });
+    };
+    document.addEventListener('copy', copy);
+    document.addEventListener('cut', copy);
+    document.addEventListener('paste', onPaste);
+    return () => {
+      document.removeEventListener('copy', copy);
+      document.removeEventListener('cut', copy);
+      document.removeEventListener('paste', onPaste);
+    };
+  }, [paste, flow.deleteNodes]);
 
   const onDragOver = useStableCallback((event: DragEvent) => {
     event.preventDefault();
@@ -324,11 +499,55 @@ function Canvas({
     const ids = new Set(dragged.map((node) => node.id));
     return dragged.filter((node) => !node.parentId || !ids.has(node.parentId));
   };
-  const onNodeDragStart = useCallback(() => {
+  // While something's dragged, the containers around it grow to fit it (see previewContainerGrowth): the canvas
+  // when the drag started, and those containers, innermost first
+  const dragStart = useRef<{ nodes: Map<string, Node>; containers: string[] } | null>(null);
+  const onNodeDragStart = useStableCallback((_: unknown, __: Node, dragged: Node[]) => {
     pauseCamera.current();
     setInteraction('dragging', true);
-  }, [setInteraction]);
+    const lookup = lookupNodes();
+    const containers: string[] = [];
+    for (const node of dragged) {
+      for (let id = lookup.get(node.id)?.parentId; id; id = lookup.get(id)?.parentId) {
+        if (!containers.includes(id)) containers.push(id);
+      }
+    }
+    // Innermost first: deeper containers before the ones they're in
+    const depth = (id: string) => {
+      let level = 0;
+      for (let parent = lookup.get(id)?.parentId; parent; parent = lookup.get(parent)?.parentId) level++;
+      return level;
+    };
+    containers.sort((a, b) => depth(b) - depth(a));
+    dragStart.current = containers.length ? { nodes: lookup, containers } : null;
+    threadsDrag.current = selectedThreads.size && dragged[0] ? { id: dragged[0].id, from: canvasPositionOf(dragged[0]) } : null;
+  });
+  // Where a dragged node is on the canvas (its position is relative to its container)
+  const canvasPositionOf = (node: Node) => {
+    const lookup = lookupNodes();
+    lookup.set(node.id, { ...lookup.get(node.id)!, position: node.position });
+    return getAbsolutePosition(lookup.get(node.id)!, lookup);
+  };
+  // Selected comments move with what's dragged: how far it's moved from where it was
+  const threadsDrag = useRef<{ id: string; from: XYPosition } | null>(null);
+  const moveThreadsWith = (dragged: Node[]) => {
+    const drag = threadsDrag.current;
+    const node = drag && dragged.find((candidate) => candidate.id === drag.id);
+    if (!drag || !node) return;
+    const at = canvasPositionOf(node);
+    setThreadsOffset({ x: at.x - drag.from.x, y: at.y - drag.from.y });
+  };
+  const growContainers = (dragged: Node[]) => {
+    const started = dragStart.current;
+    if (!started) return;
+    // Where the dragged nodes are now (the canvas's own nodes can be a frame behind)
+    const now = lookupNodes();
+    dragged.forEach((node) => now.set(node.id, { ...now.get(node.id)!, position: node.position }));
+    flow.showDragPreview(previewContainerGrowth(started.containers, new Set(dragged.map((node) => node.id)), started.nodes, now));
+  };
   const onNodeDrag = useStableCallback((_: unknown, __: Node, dragged: Node[]) => {
+    growContainers(dragged);
+    moveThreadsWith(dragged);
     const [root] = dragRoots(dragged);
     const current = root && nodesRef.current.find((node) => node.id === root.id);
     const target = root ? findDropTarget(root.id, nodesRef.current) : undefined;
@@ -337,6 +556,22 @@ function Canvas({
   const onNodeDragStop = useStableCallback((_: unknown, __: Node, dragged: Node[]) => {
     setInteraction('dragging', false);
     setDropTargetId(null);
+    dragStart.current = null;
+    // Selected comments not on a node are saved where they moved to
+    if (threadsDrag.current && threadsOffset) {
+      const offset = threadsOffset;
+      comments.moveThreads(
+        comments.threads
+          .filter((thread) => selectedThreads.has(thread.id) && !thread.nodeId)
+          .map((thread) => ({
+            threadId: thread.id,
+            anchor: { position: { x: thread.position.x + offset.x, y: thread.position.y + offset.y } },
+          }))
+      );
+    }
+    threadsDrag.current = null;
+    setThreadsOffset(null);
+    // The containers it grew are saved with the drop; dropped in another container (or out of one), it moves there
     for (const root of dragRoots(dragged)) {
       const current = nodesRef.current.find((node) => node.id === root.id);
       const target = findDropTarget(root.id, nodesRef.current);
@@ -353,13 +588,15 @@ function Canvas({
   const editable = level === 3;
   const [levelGraph, setLevelGraph] = useState<{ level: Level; nodes: Node[]; edges: Edge[] } | null>(null);
 
-  // What a level shows depends on what's on the canvas and how it's connected, and names (not positions)
+  // What a level shows depends on what's on the canvas and how it's connected, and names (not positions). Notes
+  // aren't laid out with it: adding, moving or writing one doesn't lay the level out again.
   const levelKey =
     level === 3
       ? ''
-      : `${flow.nodes.map((node) => `${node.id}:${node.type}:${node.parentId ?? ''}:${getNodeName(node.type, node.data)}`).join('|')}#${flow.edges
-          .map((edge) => `${edge.source}>${edge.target}:${String(edge.label ?? '')}`)
-          .join('|')}`;
+      : `${flow.nodes
+          .filter((node) => node.type !== 'note')
+          .map((node) => `${node.id}:${node.type}:${node.parentId ?? ''}:${getNodeName(node.type, node.data)}`)
+          .join('|')}#${flow.edges.map((edge) => `${edge.source}>${edge.target}:${String(edge.label ?? '')}`).join('|')}`;
   const shownLevelRef = useRef<Level | undefined>(undefined);
   shownLevelRef.current = levelGraph?.level;
   useEffect(() => {
@@ -387,6 +624,12 @@ function Canvas({
   const [draft, setDraft] = useState<CommentAnchor | null>(null);
   const [openThreadId, setOpenThreadId] = useState<string | null>(null);
   const [showResolved, setShowResolved] = useState(false);
+  // Comments that are part of the selection (selecting everything selects them too): only here, like what nodes
+  // are selected. While what's selected is dragged, the ones not on a node move with it by this much.
+  const [selectedThreads, setSelectedThreads] = useState<ReadonlySet<string>>(NO_THREADS);
+  const clearSelectedThreads = useCallback(() => setSelectedThreads((current) => (current.size ? NO_THREADS : current)), []);
+  const [threadsOffset, setThreadsOffset] = useState<XYPosition | null>(null);
+  const threadsShown = () => comments.threads.filter((thread) => showResolved || !thread.resolved);
   const [contextMenu, setContextMenu] = useState<ContextMenuState>(null);
 
   const changeLevel = useStableCallback((next: Level) => {
@@ -395,6 +638,8 @@ function Canvas({
     setCommentMode(false);
     setDraft(null);
     setOpenThreadId(null);
+    // What's selected may not be on the next level (e.g. a note added on this one)
+    flow.onNodesChange(selectedIds().map((id) => ({ type: 'select', id, selected: false })));
     setLevel(next);
   });
   const editInL3 = useCallback(() => changeLevel(3), [changeLevel]);
@@ -403,7 +648,9 @@ function Canvas({
   const shownLevel = level === 3 ? 3 : levelGraph?.level;
   useEffect(() => {
     if (shownLevel === undefined) return;
-    const frame = requestAnimationFrame(() => void fitView({ ...FIT_VIEW_OPTIONS, duration: 450 }));
+    // Like the visualiser, a level isn't zoomed in past its real size
+    const options = shownLevel === 3 ? FIT_VIEW_OPTIONS : LEVEL_FIT_VIEW_OPTIONS;
+    const frame = requestAnimationFrame(() => void fitView({ ...options, duration: 450 }));
     return () => cancelAnimationFrame(frame);
   }, [shownLevel]);
 
@@ -430,7 +677,19 @@ function Canvas({
     return hierarchyOrder.flatMap((id) => byId.get(id) ?? []);
   }, [flow.nodes, hierarchyOrder]);
   const levelShown = level !== 3 && levelGraph?.level === level ? levelGraph : null;
-  const shownNodes = levelShown ? levelShown.nodes : sortedNodes;
+  // Sticky notes are shown on the level they were added on: on L1 and L2, over the level's layout
+  const shownNodes = useMemo(() => {
+    if (!levelShown)
+      return sortedNodes.every((node) => isOnLevel(node, 3)) ? sortedNodes : sortedNodes.filter((node) => isOnLevel(node, 3));
+    const notes = sortedNodes.filter((node) => getNoteLevel(node) === levelShown.level);
+    return notes.length ? [...levelShown.nodes, ...notes.map(asLevelNote)] : levelShown.nodes;
+  }, [levelShown, sortedNodes]);
+  /** On L1 and L2, only changes to the level's notes go to the canvas (its other nodes are drawn from it) */
+  const onLevelNodesChange = useStableCallback((changes: NodeChange[]) => {
+    const notes = new Set(nodesRef.current.filter((node) => getNoteLevel(node) === levelRef.current).map((node) => node.id));
+    const ofNotes = changes.filter((change) => change.type !== 'add' && notes.has(change.id));
+    if (ofNotes.length) flow.onNodesChange(ofNotes);
+  });
   // Message edges' envelopes only move on what's selected (the edge, or a node at either end): any moving
   // envelope at all costs a style recalc and layout every frame, which an editing canvas can't afford at idle
   const shownEdges = useMemo(() => {
@@ -463,6 +722,9 @@ function Canvas({
   const [following, setFollowing] = useState(followChanges);
   const toggleFollowing = useCallback(() => setFollowing((on) => !on), []);
 
+  const [shareOpen, setShareOpen] = useState(false);
+  const openShare = useCallback(() => setShareOpen(true), []);
+  const closeShare = useCallback(() => setShareOpen(false), []);
   const [connectOpen, setConnectOpen] = useState(false);
   const openConnect = useCallback(() => setConnectOpen(true), []);
   const closeConnect = useCallback(() => setConnectOpen(false), []);
@@ -484,19 +746,33 @@ function Canvas({
     'mod+a',
     () => {
       if (!onCanvas()) return;
-      flow.onNodesChange(nodesRef.current.map((node) => ({ type: 'select', id: node.id, selected: true })));
+      flow.onNodesChange(
+        nodesRef.current.filter((node) => isOnLevel(node, 3)).map((node) => ({ type: 'select', id: node.id, selected: true }))
+      );
       flow.onEdgesChange(edgesRef.current.map((edge) => ({ type: 'select', id: edge.id, selected: true })));
+      // ...and the comments shown on it
+      setSelectedThreads(new Set(threadsShown().map((thread) => thread.id)));
+    },
+    { preventDefault: true }
+  );
+  useHotkeys(
+    'mod+d',
+    () => {
+      const content = onCanvas() && copyNodes(nodesRef.current, edgesRef.current, selectedIds());
+      if (content) paste(content, { offset: { x: 40, y: 40 } });
     },
     { preventDefault: true }
   );
-  useHotkeys('mod+z', () => onCanvas() && flow.undo(), { preventDefault: true });
-  useHotkeys(['mod+shift+z', 'mod+y'], () => onCanvas() && flow.redo(), { preventDefault: true });
+  // On every level: notes are changed on L1 and L2 too (and the levels show what's undone on the canvas)
+  useHotkeys('mod+z', () => flow.undo(), { preventDefault: true });
+  useHotkeys(['mod+shift+z', 'mod+y'], () => flow.redo(), { preventDefault: true });
   useHotkeys('c', () => onCanvas() && setCommentMode((on) => !on));
   useHotkeys('escape', () => {
     setCommentMode(false);
     setDraft(null);
     setOpenThreadId(null);
-    if (!onCanvas()) return;
+    clearSelectedThreads();
+    setEditingId(null);
     flow.onNodesChange(
       nodesRef.current.filter((node) => node.selected).map((node) => ({ type: 'select', id: node.id, selected: false }))
     );
@@ -504,6 +780,12 @@ function Canvas({
       edgesRef.current.filter((edge) => edge.selected).map((edge) => ({ type: 'select', id: edge.id, selected: false }))
     );
   });
+  // Selected comments are deleted with what's selected (React Flow deletes the nodes and edges)
+  useHotkeys(DELETE_KEYS, () => {
+    if (!onCanvas() || selectedThreads.size === 0) return;
+    comments.deleteThreads([...selectedThreads]);
+    clearSelectedThreads();
+  });
   const toggleCommentMode = useCallback(() => setCommentMode((on) => !on), []);
 
   const startComment = (anchor: CommentAnchor) => {
@@ -516,12 +798,31 @@ function Canvas({
     screenToFlowPosition({ x: event.clientX, y: event.clientY });
 
   const onPaneClick = useStableCallback((event: ReactMouseEvent) => {
+    clearSelectedThreads();
     if (commentMode && editable) return startComment(anchorAt(flowPositionOf(event)));
+    // A click inside a container (not on something in it) selects it: its body lets the pointer through so you can
+    // drag a selection box in it, so the click lands on the canvas
+    // (after React Flow clears the selection, which it does once this returns)
+    const container = editable ? findGroupAtPoint(flowPositionOf(event), nodesRef.current) : undefined;
+    if (container) queueMicrotask(() => flow.onNodesChange([{ type: 'select', id: container.id, selected: true }]));
     setDraft(null);
     setOpenThreadId(null);
   });
 
+  // Double clicking a node edits its details (notes are edited on the canvas, by double clicking them too)
+  const onNodeDoubleClick = useStableCallback((_: ReactMouseEvent, node: Node) => {
+    if (editable && !isWrittenOnCanvas(node.type)) setEditingId(node.id);
+  });
+  // ...and inside a container (not on something in it): its body lets the pointer through, so it's on the canvas
+  const onCanvasDoubleClick = useStableCallback((event: ReactMouseEvent) => {
+    if (!editable || !(event.target as Element).classList?.contains('react-flow__pane')) return;
+    const container = findGroupAtPoint(flowPositionOf(event), nodesRef.current);
+    if (container) setEditingId(container.id);
+  });
+
   const onNodeClick = useStableCallback((event: ReactMouseEvent, node: Node) => {
+    // Clicking one node selects just it (with shift or ⌘, it's added to what's selected)
+    if (!event.shiftKey && !event.metaKey) clearSelectedThreads();
     if (commentMode && editable) startComment(anchorAt(flowPositionOf(event), node, lookupNodes()));
   });
 
@@ -537,8 +838,35 @@ function Canvas({
     if (contextMenu) startComment(anchorAt(contextMenu.flowPosition, contextMenu.node, lookupNodes()));
     setContextMenu(null);
   });
-  const deleteFromMenu = useStableCallback((id: string) => {
-    flow.deleteNodes([id]);
+  /** The node right clicked, or the whole selection if it's part of it */
+  const menuTargets = () => {
+    const node = contextMenu?.node;
+    if (!node) return [];
+    const selected = selectedIds();
+    return selected.includes(node.id) ? selected : [node.id];
+  };
+  const editFromMenu = useStableCallback(() => {
+    if (contextMenu?.node) setEditingId(contextMenu.node.id);
+    setContextMenu(null);
+  });
+  const copyFromMenu = useStableCallback(() => {
+    // Through the copy event, so it's copied like ⌘C (to the system clipboard too)
+    copyOnly.current = menuTargets();
+    document.execCommand('copy');
+    copyOnly.current = null;
+    setContextMenu(null);
+  });
+  const duplicateFromMenu = useStableCallback(() => {
+    const content = copyNodes(nodesRef.current, edgesRef.current, menuTargets());
+    if (content) paste(content, { offset: { x: 40, y: 40 } });
+    setContextMenu(null);
+  });
+  const pasteFromMenu = useStableCallback(() => {
+    if (lastCopied && contextMenu) paste(lastCopied, { at: contextMenu.flowPosition });
+    setContextMenu(null);
+  });
+  const deleteFromMenu = useStableCallback(() => {
+    flow.deleteNodes(menuTargets());
     setContextMenu(null);
   });
 
@@ -556,7 +884,8 @@ function Canvas({
   }, []);
   const createThread = useStableCallback((text: string) => {
     if (!draft) return;
-    setOpenThreadId(comments.createThread(draft, text) ?? null);
+    // Posted, it's a pin like the others (not opened): click it to see or reply to it
+    comments.createThread(draft, text);
     setDraft(null);
   });
   const cancelDraft = useCallback(() => setDraft(null), []);
@@ -580,11 +909,22 @@ function Canvas({
       })
     );
   }, [selectedKey]);
-  const single = editable && selected.length === 1 && selected[0].type !== 'note' ? selected[0] : null;
+  // The node whose details are being edited in the panel: opened by double clicking it, or "Edit details" in its
+  // menu (selecting a node doesn't open it). Notes are edited on the canvas.
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const editing =
+    editable && editingId ? flow.nodes.find((node) => node.id === editingId && !isWrittenOnCanvas(node.type)) : undefined;
+  // What the panel shows (not the node's position, so dragging it doesn't re-render the panel)
   const inspected = useMemo(
-    () => (single ? { id: single.id, type: single.type, data: single.data } : null),
-    [single?.id, single?.type, single?.data]
+    () => (editing ? { id: editing.id, type: editing.type, data: editing.data } : null),
+    [editing?.id, editing?.type, editing?.data]
   );
+  const closePanel = useCallback(() => setEditingId(null), []);
+  // An accepted or rejected canvas, and when it was decided
+  const { status: canvasStatus, history: statusHistory } = flow.canvasStatus;
+  const decided = isDecided(canvasStatus)
+    ? { status: canvasStatus, change: statusHistory.findLast((change) => change.status === canvasStatus) }
+    : null;
 
   return (
     <UpdateNodeDataContext.Provider value={flow.updateNodeData}>
@@ -594,7 +934,7 @@ function Canvas({
             resources={resources}
             keysOnCanvas={keysOnCanvas}
             onAddComponent={addComponent}
-            onAddResource={addResource}
+            onAddResource={addResourceFromPanel}
             threads={comments.threads}
             showResolved={showResolved}
             onToggleResolved={toggleResolved}
@@ -608,6 +948,7 @@ function Canvas({
             }`}
             onPointerMove={trackPointer}
             onPointerLeave={clearPointer}
+            onDoubleClick={onCanvasDoubleClick}
           >
             <ReactFlow
               nodes={shownNodes}
@@ -617,18 +958,25 @@ function Canvas({
               nodesDraggable={editable}
               nodesConnectable={editable}
               elementsSelectable={editable}
-              onNodesChange={editable ? flow.onNodesChange : undefined}
+              onNodesChange={editable ? flow.onNodesChange : onLevelNodesChange}
               onEdgesChange={editable ? flow.onEdgesChange : undefined}
               onConnect={flow.onConnect}
+              // Drag either end of a connection to another node (dropped anywhere else, it stays where it was)
+              edgesReconnectable={editable}
+              onReconnect={editable ? flow.onReconnect : undefined}
+              reconnectRadius={RECONNECT_RADIUS}
               onDragOver={onDragOver}
               onMoveStart={onMoveStart}
               onMoveEnd={onMoveEnd}
               onNodeDragStart={onNodeDragStart}
-              onNodeDrag={editable ? onNodeDrag : undefined}
-              onNodeDragStop={editable ? onNodeDragStop : undefined}
+              onNodeDrag={onNodeDrag}
+              onNodeDragStop={onNodeDragStop}
               onDrop={onDrop}
               onPaneClick={onPaneClick}
               onNodeClick={onNodeClick}
+              onNodeDoubleClick={onNodeDoubleClick}
+              onError={onFlowError}
+              onSelectionStart={clearSelectedThreads}
               onPaneContextMenu={onPaneContextMenu}
               onNodeContextMenu={onNodeContextMenu}
               connectionLineType={ConnectionLineType.SmoothStep}
@@ -663,6 +1011,8 @@ function Canvas({
                   onMove={comments.moveThread}
                   onMoveDraft={setDraft}
                   onDelete={deleteThread}
+                  selectedIds={selectedThreads}
+                  selectionOffset={threadsOffset}
                 />
               )}
             </ReactFlow>
@@ -680,7 +1030,7 @@ function Canvas({
               <div className="absolute left-1/2 top-16 z-10 flex -translate-x-1/2 items-center gap-3 rounded-full border px-4 py-1.5 text-xs shadow-sm bg-[rgb(var(--ec-accent-subtle))] border-[rgb(var(--ec-accent)/0.3)] text-[rgb(var(--ec-page-text))]">
                 <span>
                   <span className="font-semibold">L{level}</span> · {LEVELS.find((entry) => entry.level === level)?.description} ·
-                  read only
+                  read only, sticky notes can be added
                 </span>
                 <button onClick={editInL3} className="font-semibold text-[rgb(var(--ec-accent))] hover:underline">
                   Edit in L3
@@ -688,6 +1038,19 @@ function Canvas({
               </div>
             )}
 
+            {/* Accepted or rejected: still editable, but changing it makes it a draft again (for everyone) */}
+            {editable && decided && (
+              <div
+                className={`absolute left-1/2 top-16 z-10 flex max-w-[calc(100%-2rem)] -translate-x-1/2 items-center gap-2 rounded-full border px-4 py-1.5 text-xs shadow-sm ${CANVAS_STATUS_LOOK[decided.status].pill}`}
+              >
+                <span className="truncate">
+                  <span className="font-semibold">{CANVAS_STATUS_LOOK[decided.status].label}</span>
+                  {decided.change && ` by ${decided.change.by.name} · ${timeAgo(decided.change.at)}`}
+                  {decided.change?.note && ` · “${decided.change.note}”`} · changing it moves it back to Draft
+                </span>
+              </div>
+            )}
+
             <CanvasControls
               level={level}
               onLevelChange={changeLevel}
@@ -706,6 +1069,10 @@ function Canvas({
             <CanvasContextMenu
               menu={contextMenu}
               onAddComment={commentFromMenu}
+              onEditDetails={editFromMenu}
+              onCopy={copyFromMenu}
+              onDuplicate={duplicateFromMenu}
+              onPaste={lastCopied ? pasteFromMenu : undefined}
               onDeleteNode={deleteFromMenu}
               onClose={closeContextMenu}
             />
@@ -720,12 +1087,17 @@ function Canvas({
               onJumpTo={jumpTo}
               onRename={onRename}
               onConnectAgent={openConnect}
+              onShare={openShare}
               webMcp={webMcp}
               shareUrl={shareUrl}
               newCanvasUrl={newCanvasUrl}
+              canvasStatus={flow.canvasStatus.status}
+              statusHistory={flow.canvasStatus.history}
+              onStatusChange={flow.changeStatus}
             />
 
-            {flow.status === 'connected' && flow.nodes.length === 0 && (
+            {/* Only on an empty canvas (not over comments people have left on it) */}
+            {flow.status === 'connected' && flow.nodes.length === 0 && comments.threads.length === 0 && !draft && (
               <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
                 <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">
                   Drag components or catalog resources from the left onto the canvas, then share the link to work on it together.
@@ -743,6 +1115,28 @@ function Canvas({
               onCancel={cancelChooser}
             />
           )}
+          {connectionsChooser && (
+            <ConnectionsChooser
+              resource={connectionsChooser.resource}
+              groups={connectionsChooser.groups}
+              position={flowToScreenPosition(connectionsChooser.center)}
+              onChoose={chooseConnections}
+              onCancel={cancelConnectionsChooser}
+            />
+          )}
+          {shareOpen && (
+            <ShareDialog
+              keptInMemory={keptInMemory}
+              url={agentLink.canvasUrl}
+              title={flow.title}
+              presence={flow.presence}
+              clientId={flow.clientId}
+              onRename={onRename}
+              onJumpTo={jumpTo}
+              onConnectAgent={openConnect}
+              onClose={closeShare}
+            />
+          )}
           {connectOpen && (
             <ConnectAgentDialog
               link={agentLink}
@@ -752,7 +1146,15 @@ function Canvas({
               onClose={closeConnect}
             />
           )}
-          {inspected && <PropertiesPanel node={inspected} onChange={flow.updateNodeData} onDelete={flow.deleteNodes} />}
+          {inspected && (
+            <PropertiesPanel
+              key={inspected.id}
+              node={inspected}
+              onChange={flow.updateNodeData}
+              onDelete={flow.deleteNodes}
+              onClose={closePanel}
+            />
+          )}
         </div>
       </DropTargetContext.Provider>
     </UpdateNodeDataContext.Provider>