@eventcatalog/core 5.0.0-beta.1 → 5.0.0-beta.11

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

@@ -0,0 +1,282 @@
+import { MarkerType, type Edge, type Node } from '@xyflow/react';
+import { getMessagesLabel } from '@eventcatalog/visualiser/layout';
+import { MESSAGE_COLLECTIONS } from './edges';
+import { GROUP_TYPES, isGroupType, isWrittenOnCanvas } from './node-types';
+
+/**
+ * Levels of detail, the same as EventCatalog's diagrams:
+ * - L1: domains, systems and how they relate (services folded into the system or domain that contains them)
+ * - L2: services and data stores, with messages and channels hidden (the nodes either side connected directly)
+ * - L3: everything, including messages and channels (the canvas people edit)
+ *
+ * What a domain or system contains is what sits inside it (as a container), or what it's connected to with
+ * "contains" (as a card, which catalog domains and systems get when their services are on the canvas).
+ */
+export type Level = 1 | 2 | 3;
+
+export const LEVELS: { level: Level; description: string }[] = [
+  { level: 1, description: 'Domains, systems and their relationships' },
+  { level: 2, description: 'Services and data stores' },
+  { level: 3, description: 'Everything, including messages and channels' },
+];
+
+// Domains and systems: as cards (what they contain is connected with "contains") or containers (it's inside)
+const CONTAINER_TYPES = new Set(['system', 'context-domain', GROUP_TYPES.system, GROUP_TYPES.domain]);
+const isSystem = (node: Node) => node.type === 'system' || node.type === GROUP_TYPES.system;
+const isDomain = (node: Node) => node.type === 'context-domain' || node.type === GROUP_TYPES.domain;
+
+const isMessage = (node: Node) => !!MESSAGE_COLLECTIONS[node.type ?? ''];
+const isCarrier = (node: Node) => isMessage(node) || node.type === 'channel';
+const isContainer = (node: Node) => CONTAINER_TYPES.has(node.type ?? '');
+const messageName = (node: Node) => String((node.data as { message?: { name?: string } }).message?.name ?? node.id);
+
+// Edges as the visualiser's levels draw them: what's folded together is joined by a plain line, and what was joined
+// through hidden messages or channels by a dashed, muted one ("bridged"), each with the visualiser's arrow
+const EDGE_STROKE = 'var(--ec-edge-stroke, #6b7280)';
+const MUTED = 'rgb(var(--ec-page-text-muted))';
+const FOLDED_EDGE = {
+  type: 'smoothstep',
+  style: { strokeWidth: 1, stroke: EDGE_STROKE },
+  markerEnd: { type: MarkerType.ArrowClosed, width: 20, height: 20 },
+} satisfies Partial<Edge>;
+const BRIDGED_EDGE = {
+  type: 'smoothstep',
+  style: { strokeWidth: 1.5, stroke: MUTED, strokeDasharray: '5 5' },
+  markerEnd: { type: MarkerType.ArrowClosed, width: 20, height: 20, color: MUTED },
+} satisfies Partial<Edge>;
+
+/** What a node becomes at a level: kept (as itself or another node), carried through (messages, channels) or dropped */
+type Representative = { kind: 'node'; id: string } | { kind: 'carrier' } | { kind: 'drop' };
+
+/**
+ * Collapse a graph: each node is kept, replaced by another node (e.g. a service by its system), carried through
+ * (messages and channels: the nodes either side get connected directly, "bridged") or dropped. Edges between two
+ * nodes that are kept as they are stay as they were (`keepDirect`, for L2); the rest are merged per pair and kind
+ * (folded or bridged), labelled with the messages they carry.
+ */
+const collapseGraph = (
+  nodes: Node[],
+  edges: Edge[],
+  representativeOf: (node: Node) => Representative,
+  { keepDirect = false }: { keepDirect?: boolean } = {}
+) => {
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  // Whether one node is inside another (e.g. a system in its domain): they're not connected, one holds the other
+  const isInside = (id: string, containerId: string) => {
+    for (let node = byId.get(id); node?.parentId; node = byId.get(node.parentId)) if (node.parentId === containerId) return true;
+    return false;
+  };
+  const representatives = new Map(nodes.map((node) => [node.id, representativeOf(node)]));
+  const outgoing = new Map<string, Edge[]>();
+  edges.forEach((edge) => outgoing.set(edge.source, [...(outgoing.get(edge.source) ?? []), edge]));
+
+  type Merged = { source: string; target: string; bridged: boolean; messages: Map<string, string>; labels: string[] };
+  const merged = new Map<string, Merged>();
+  const kept: Edge[] = [];
+  const addMessage = (messages: Map<string, string>, node: Node) => {
+    if (isMessage(node)) messages.set(messageName(node), MESSAGE_COLLECTIONS[node.type!]);
+  };
+
+  edges.forEach((edge) => {
+    const from = representatives.get(edge.source);
+    if (from?.kind !== 'node') return;
+    const to = representatives.get(edge.target);
+    if (keepDirect && from.id === edge.source && to?.kind === 'node' && to.id === edge.target) return kept.push(edge);
+    // Follow the edge through carried nodes to the node(s) it reaches, collecting the messages on the way
+    const stack = [{ id: edge.target, messages: new Map<string, string>(), labels: [String(edge.label ?? '')], bridged: false }];
+    const visited = new Set<string>();
+    addMessage(stack[0].messages, byId.get(edge.source)!);
+    while (stack.length) {
+      const current = stack.pop()!;
+      if (visited.has(current.id)) continue;
+      visited.add(current.id);
+      const node = byId.get(current.id);
+      const reached = representatives.get(current.id);
+      if (!node || !reached || reached.kind === 'drop') continue;
+      const messages = new Map(current.messages);
+      addMessage(messages, node);
+      if (reached.kind === 'carrier') {
+        (outgoing.get(current.id) ?? []).forEach((next) =>
+          stack.push({ id: next.target, messages, labels: [] as string[], bridged: true })
+        );
+        continue;
+      }
+      // Edges inside what was collapsed disappear, and so do edges to what a node is in (e.g. a service loose in a
+      // domain, folded into it, and a system in the same domain)
+      if (from.id === reached.id || isInside(from.id, reached.id) || isInside(reached.id, from.id)) continue;
+      const key = `${current.bridged ? 'bridged' : 'level'}-${from.id}-${reached.id}`;
+      const entry: Merged = merged.get(key) ?? {
+        source: from.id,
+        target: reached.id,
+        bridged: current.bridged,
+        messages: new Map(),
+        labels: [],
+      };
+      messages.forEach((collection, name) => entry.messages.set(name, collection));
+      entry.labels.push(...current.labels.filter(Boolean));
+      merged.set(key, entry);
+    }
+  });
+
+  const keptIds = new Set([...representatives.values()].flatMap((rep) => (rep.kind === 'node' ? [rep.id] : [])));
+  // Actors' connections are relationships, labelled as they were (like the visualiser's context relationships)
+  const isActor = (id: string) => byId.get(id)?.type === 'actor';
+  return {
+    nodes: nodes.filter((node) => keptIds.has(node.id)),
+    edges: [
+      ...kept,
+      ...[...merged.entries()].map(([id, { source, target, bridged, messages, labels }]): Edge => {
+        const label =
+          getMessagesLabel(messages) ??
+          (!bridged && (isActor(source) || isActor(target)) && labels.length ? [...new Set(labels)].join(', ') : undefined);
+        return { id, source, target, ...(bridged ? BRIDGED_EDGE : FOLDED_EDGE), ...(label && { label }) };
+      }),
+    ],
+  };
+};
+
+/**
+ * The system and domain each node is in: the containers it sits inside, or the domain and system cards
+ * connected to it with "contains"
+ */
+const getContainers = (nodes: Node[], edges: Edge[]) => {
+  const byId = new Map(nodes.map((node) => [node.id, node]));
+  const containers = new Map<string, { system?: string; domain?: string }>();
+  const add = (nodeId: string, container: Node) => {
+    const entry = containers.get(nodeId) ?? {};
+    if (isSystem(container)) entry.system ??= container.id;
+    else entry.domain ??= container.id;
+    containers.set(nodeId, entry);
+  };
+  for (const node of nodes) {
+    for (
+      let parent = node.parentId ? byId.get(node.parentId) : undefined;
+      parent;
+      parent = parent.parentId ? byId.get(parent.parentId) : undefined
+    ) {
+      if (isContainer(parent)) add(node.id, parent);
+    }
+  }
+  for (const edge of edges) {
+    const container = byId.get(edge.source);
+    if (container && isContainer(container) && edge.label === 'contains') add(edge.target, container);
+  }
+  return containers;
+};
+
+/**
+ * Containers are sized by the layout: to fit what's in them, or (empty) the size the visualiser lays empty groups
+ * out at. Same ids, so switching levels grows and shrinks them.
+ */
+const sizedByLayout = ({ nodes, edges }: { nodes: Node[]; edges: Edge[] }) => ({
+  edges,
+  nodes: nodes.map((node) =>
+    isGroupType(node.type) ? { ...node, width: undefined, height: undefined, measured: undefined } : node
+  ),
+});
+
+/** L2: messages and channels hidden, the nodes either side connected directly */
+const level2 = (nodes: Node[], edges: Edge[]) =>
+  collapseGraph(nodes, edges, (node) => (isCarrier(node) ? { kind: 'carrier' } : { kind: 'node', id: node.id }), {
+    keepDirect: true,
+  });
+
+/** Whether a node is inside a container, at any depth */
+const isWithin = (node: Node, containerId: string, byId: Map<string, Node>) => {
+  for (let parent = node.parentId; parent; parent = byId.get(parent)?.parentId) if (parent === containerId) return true;
+  return false;
+};
+
+/**
+ * L1 as EventCatalog's diagrams draw it: systems as cards with what's in them counted, and domains with no system in
+ * them (or in their subdomains) as domain cards
+ */
+const asSystemsLevel = (
+  { nodes, edges }: { nodes: Node[]; edges: Edge[] },
+  { all, allEdges, containers }: { all: Node[]; allEdges: Edge[]; containers: ReturnType<typeof getContainers> }
+) => {
+  const byId = new Map(all.map((node) => [node.id, node]));
+  const count = (id: string, matches: (node: Node) => boolean) =>
+    all.filter((node) => matches(node) && containers.get(node.id)?.system === id).length;
+  // The messages a system's services send and receive
+  const messagesOf = (id: string) => {
+    const services = new Set(all.filter((node) => containers.get(node.id)?.system === id).map((node) => node.id));
+    const messages = new Set<string>();
+    for (const edge of allEdges) {
+      const [inside, other] = services.has(edge.source) ? [edge.source, edge.target] : [edge.target, edge.source];
+      if (services.has(inside) && byId.get(other) && isMessage(byId.get(other)!)) messages.add(other);
+    }
+    return messages.size;
+  };
+  return {
+    edges,
+    nodes: nodes.map((node): Node => {
+      const { id, parentId, position, data } = node;
+      if (node.type === GROUP_TYPES.system)
+        return {
+          id,
+          type: 'system',
+          position,
+          ...(parentId && { parentId }),
+          data: {
+            mode: 'full',
+            ...data,
+            servicesCount: count(id, (child) => child.type === 'service' || child.type === 'agent'),
+            containersCount: count(id, (child) => child.type === 'data'),
+            messagesCount: messagesOf(id),
+          },
+        };
+      if (node.type === GROUP_TYPES.domain && !all.some((other) => isSystem(other) && isWithin(other, id, byId)))
+        return {
+          id,
+          type: 'context-domain',
+          position,
+          ...(parentId && { parentId }),
+          data: {
+            mode: 'full',
+            ...data,
+            subdomain: !!parentId,
+            systemsCount: 0,
+            servicesCount: all.filter((other) => other.type === 'service' && isWithin(other, id, byId)).length,
+          },
+        };
+      return node;
+    }),
+  };
+};
+
+/** L1: services folded into their system (or domain); actors, external systems and loose services stay */
+const level1 = (nodes: Node[], edges: Edge[]) => {
+  const containers = getContainers(nodes, edges);
+  const collapsed = collapseGraph(nodes, edges, (node) => {
+    const container = containers.get(node.id);
+    // Systems stay (inside their domain's container, if they're in one); everything else folds into its system or domain
+    if (isContainer(node) && (isSystem(node) || !container?.system)) return { kind: 'node', id: node.id };
+    if (container?.system) return { kind: 'node', id: container.system };
+    // Messages and channels connect the systems either side, even when they sit in a domain rather than a system
+    // (the visualiser has them outside its domains; catalog domains on a canvas hold their messages)
+    if (isCarrier(node)) return { kind: 'carrier' };
+    if (container?.domain) return { kind: 'node', id: container.domain };
+    if (node.type === 'data' || isWrittenOnCanvas(node.type)) return { kind: 'drop' };
+    return { kind: 'node', id: node.id };
+  });
+  return asSystemsLevel(collapsed, { all: nodes, allEdges: edges, containers });
+};
+
+/**
+ * The graph for a level (not laid out: positions come from the layout). Notes aren't in it: the ones added on the
+ * level are shown where they were put, over its layout.
+ */
+export const getLevelGraph = (nodes: Node[], edges: Edge[], level: Level) => {
+  if (level === 3) return { nodes, edges };
+  const withoutNotes = nodes.filter((node) => node.type !== 'note');
+  return sizedByLayout(level === 1 ? level1(withoutNotes, edges) : level2(withoutNotes, edges));
+};
+
+/** Why a level can't be shown for this canvas, if it can't */
+export const getLevelUnavailableReason = (nodes: Node[], level: Level): string | undefined => {
+  // Like the visualiser: L1 needs systems, or domains to relate (one domain on its own has nothing to show)
+  if (level === 1 && !nodes.some(isSystem) && nodes.filter(isDomain).length < 2)
+    return 'Not available: add a system, or more than one domain, to see how they relate';
+  return undefined;
+};

package/eventcatalog/src/features/studio/node-types.ts

@@ -0,0 +1,205 @@
+/**
+ * The kinds of node people (and agents) can put on a canvas, and what's in their data. Shared by the browser and
+ * the server, so it has no UI in it: the icons for each type are in components/icons.ts.
+ */
+
+export type NodeCategory = 'boundaries' | 'messages' | 'architecture' | 'other';
+
+export const NODE_CATEGORIES: { id: NodeCategory; label: string }[] = [
+  { id: 'boundaries', label: 'Boundaries' },
+  { id: 'messages', label: 'Messages' },
+  { id: 'architecture', label: 'Architecture' },
+  { id: 'other', label: 'Other' },
+];
+
+/** Domains and systems as containers: boxes other nodes sit in */
+export const GROUP_TYPES = { domain: 'domain-group', system: 'system-group' } as const;
+export const isGroupType = (type?: string) => type === GROUP_TYPES.domain || type === GROUP_TYPES.system;
+
+export type NodeDefinition = {
+  /** React Flow node type, matches the visualiser node component keys */
+  type: string;
+  label: string;
+  category: NodeCategory;
+  /** Not in the components list (still drawn, for canvases that have them) */
+  unlisted?: boolean;
+  /** Where the resource lives inside node.data (e.g. `service` for data.service). Undefined = data root */
+  resourceKey?: string;
+  /** Nodes that are sized on the canvas (containers, notes, text) start at this size */
+  defaultSize?: { width: number; height: number };
+  /** Only its width is set: its height follows what's in it (text) */
+  autoHeight?: boolean;
+  createData: () => Record<string, unknown>;
+};
+
+const resource = (name: string, summary: string) => ({ name, version: '0.0.1', summary, owners: [] });
+
+export const nodeDefinitions: NodeDefinition[] = [
+  {
+    type: GROUP_TYPES.domain,
+    label: 'Domain',
+    category: 'boundaries',
+    resourceKey: 'domain',
+    defaultSize: { width: 720, height: 460 },
+    createData: () => ({ domain: { name: 'New Domain', version: '0.0.1' } }),
+  },
+  {
+    type: GROUP_TYPES.system,
+    label: 'System',
+    category: 'boundaries',
+    resourceKey: 'system',
+    defaultSize: { width: 560, height: 360 },
+    createData: () => ({ system: { name: 'New System', version: '0.0.1' } }),
+  },
+  {
+    type: 'service',
+    category: 'architecture',
+    label: 'Service',
+    resourceKey: 'service',
+    createData: () => ({
+      mode: 'full',
+      service: { ...resource('New Service', 'Describe what this service does.'), sends: [], receives: [] },
+    }),
+  },
+  {
+    type: 'event',
+    category: 'messages',
+    label: 'Event',
+    resourceKey: 'message',
+    createData: () => ({ mode: 'full', message: resource('NewEvent', 'Something happened.') }),
+  },
+  {
+    type: 'command',
+    category: 'messages',
+    label: 'Command',
+    resourceKey: 'message',
+    createData: () => ({ mode: 'full', message: resource('NewCommand', 'Asks a service to do something.') }),
+  },
+  {
+    type: 'query',
+    category: 'messages',
+    label: 'Query',
+    resourceKey: 'message',
+    createData: () => ({ mode: 'full', message: resource('NewQuery', 'Asks for some information.') }),
+  },
+  {
+    type: 'channel',
+    category: 'architecture',
+    label: 'Channel',
+    resourceKey: 'channel',
+    createData: () => ({ mode: 'full', channel: { ...resource('new.channel', 'Where messages are routed.'), protocols: [] } }),
+  },
+  {
+    type: 'data',
+    category: 'architecture',
+    label: 'Data Store',
+    resourceKey: 'data',
+    createData: () => ({ mode: 'full', data: { ...resource('New Database', 'Stores data.'), container_type: 'database' } }),
+  },
+  {
+    type: 'view',
+    category: 'architecture',
+    label: 'View',
+    resourceKey: 'view',
+    createData: () => ({ mode: 'full', view: resource('New View', 'What the user sees.') }),
+  },
+  {
+    type: 'externalSystem',
+    category: 'architecture',
+    unlisted: true,
+    label: 'External System',
+    resourceKey: 'externalSystem',
+    createData: () => ({ mode: 'full', externalSystem: resource('External System', 'A third party system.') }),
+  },
+  {
+    type: 'agent',
+    category: 'architecture',
+    label: 'Agent',
+    resourceKey: 'agent',
+    createData: () => ({ mode: 'full', agent: { ...resource('New Agent', 'What this agent does.'), sends: [], receives: [] } }),
+  },
+  {
+    type: 'actor',
+    category: 'other',
+    label: 'Actor',
+    createData: () => ({ mode: 'full', name: 'Customer', summary: 'A person using the system.' }),
+  },
+  {
+    type: 'text',
+    category: 'other',
+    label: 'Text',
+    defaultSize: { width: 240, height: 40 },
+    autoHeight: true,
+    createData: () => ({ text: 'Add some text' }),
+  },
+  {
+    type: 'note',
+    category: 'other',
+    label: 'Sticky Note',
+    // About square, like a post-it (taller if more is written on it)
+    defaultSize: { width: 200, height: 176 },
+    autoHeight: true,
+    createData: () => ({ text: '', color: 'yellow' }),
+  },
+];
+
+/** The types people and agents can add (not the unlisted ones) */
+export const COMPONENT_TYPES = nodeDefinitions
+  .filter((definition) => !definition.unlisted)
+  .map((definition) => definition.type) as [string, ...string[]];
+
+const definitionsByType = new Map(nodeDefinitions.map((definition) => [definition.type, definition]));
+
+// Node types that only come from the catalog (not in the components list)
+const catalogNodeTypes: Record<string, { label: string; resourceKey: string }> = {
+  system: { label: 'System', resourceKey: 'system' },
+  'context-domain': { label: 'Domain', resourceKey: 'domain' },
+};
+
+export const getNodeDefinition = (type?: string) => (type ? definitionsByType.get(type) : undefined);
+
+export const getNodeLabel = (type?: string) => getNodeDefinition(type)?.label ?? catalogNodeTypes[type ?? '']?.label ?? 'Node';
+
+// About the size the visualiser's resource cards render at
+export const DEFAULT_NODE_SIZE = { width: 240, height: 112 };
+
+/** The size a new node of a type starts at (or, for cards, about the size it renders at) */
+export const getNodeSize = (type?: string) => getNodeDefinition(type)?.defaultSize ?? DEFAULT_NODE_SIZE;
+
+const getResourceKey = (type?: string) => getNodeDefinition(type)?.resourceKey ?? catalogNodeTypes[type ?? '']?.resourceKey;
+
+/** The resource object for a node (e.g. data.service), or the data itself for flat nodes */
+export const getResource = (type: string | undefined, data: Record<string, unknown>): Record<string, unknown> => {
+  const key = getResourceKey(type);
+  return key ? ((data[key] as Record<string, unknown>) ?? {}) : data;
+};
+
+/** Sticky notes sit on the canvas wherever they're put, never inside a container */
+export const canGoInContainer = (type?: string) => type !== 'note';
+
+/**
+ * The level (L1, L2 or L3) a sticky note was added on: it's only shown there. Notes from before levels had notes
+ * are on L3, the canvas people edit. Other nodes are on every level they fit in, so they have none.
+ */
+export const getNoteLevel = (node: { type?: string; data: Record<string, unknown> }): 1 | 2 | 3 | undefined =>
+  node.type === 'note' ? ((node.data.level as 1 | 2 | undefined) ?? 3) : undefined;
+
+/** Whether a node is on a level's canvas as itself: everything on L3, but notes only on the level they were added on */
+export const isOnLevel = (node: { type?: string; data: Record<string, unknown> }, level: 1 | 2 | 3) =>
+  node.type !== 'note' || getNoteLevel(node) === level;
+
+/** Notes and text: written on the canvas itself (their text is their data, not a resource with a name) */
+export const isWrittenOnCanvas = (type?: string) => type === 'note' || type === 'text';
+
+/** Whether a node's resource has a version (actors and notes don't) */
+export const isVersioned = (type?: string) => !!getResourceKey(type);
+
+/** Returns new node data with fields of the resource changed */
+export const updateResource = (type: string | undefined, data: Record<string, unknown>, fields: Record<string, unknown>) => {
+  const key = getResourceKey(type);
+  return key ? { ...data, [key]: { ...getResource(type, data), ...fields } } : { ...data, ...fields };
+};
+
+/** A node's name, as people and agents see it */
+export const getNodeName = (type: string | undefined, data: Record<string, unknown>, fallback = 'node') =>
+  String(getResource(type, data).name ?? data.text ?? fallback);

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

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