@eventcatalog/core 5.0.0-beta.8 → 5.0.0

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

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
-import { Bot, Check, ChevronDown, Copy, X } from 'lucide-react';
+import { useEffect, useState, type ReactNode } from 'react';
+import { Check, ChevronDown, Code2, Copy, Globe, Sparkles, X } from 'lucide-react';
 import type { WebMcpStatus } from '../hooks/use-canvas-webmcp';
-import { STATUS } from './status';
+import { STATUS, ClaudeCodeLogo, ClaudeLogo, CursorLogo, OpenAILogo } from '@eventcatalog/visualiser/studio';
 
 type CanvasLink = { canvasId: string; title?: string; canvasUrl: string; mcpUrl: string };
 
@@ -72,41 +72,56 @@ Connect with the first of these you can use:
 
 Once connected:
 - Read the canvas first (getCanvas / get_canvas) and tell me here who else is on it.
-- Ask me here, in our conversation, what we are designing, then work on the canvas as we talk: add catalog resources (find them with getResources / search_catalog), add new components for things that don't exist yet, and connect them. Leave out positions so new nodes go next to what they connect to; only re-lay the whole canvas (layoutCanvas / layout_canvas) when I ask.
+- Ask me here, in our conversation, what we are designing, then work on the canvas as we talk: add catalog resources (find them with getResources / search_catalog), add new components for things that don't exist yet, and connect them. Leave out positions so new nodes go next to what they connect to. When you finish a round of changes, tidy the whole canvas once (layoutCanvas / layout_canvas) before you hand back to me, unless I asked you to keep the layout.
 - Talk to me here, not in canvas comments. Only comment on the canvas when I ask you to (e.g. to review it), and reply to comments people leave for you.
 - Pass agentName with your name on MCP tools, so people on the canvas can see who you are.`;
 
-function CopyButton({ text, label = 'Copy', large = false }: { text: string; label?: string; large?: boolean }) {
-  const [copied, setCopied] = useState(false);
-  return (
-    <button
-      onClick={async () => {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1500);
-      }}
-      className={`flex shrink-0 items-center justify-center gap-1.5 rounded-lg font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))] ${
-        large ? 'w-full px-4 py-2.5 text-sm' : 'px-2.5 py-1.5 text-xs'
-      }`}
-    >
-      {copied ? <Check size={large ? 16 : 14} /> : <Copy size={large ? 16 : 14} />}
-      {copied ? 'Copied' : label}
-    </button>
-  );
-}
+const button =
+  'inline-flex h-9 flex-none items-center justify-center gap-2 rounded-lg px-4 text-sm font-medium transition-colors [&_svg]:h-4 [&_svg]:w-4';
+const primary = `${button} bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-page-text)/0.85)]`;
+const secondary = `${button} border border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))]`;
+
+const copyText = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+};
 
-/** Something to copy (an address or a command), with its copy button */
-function CopyField({ value }: { value: string }) {
+/** Something to copy, with a button that copies it (as Studio on the web's) */
+function Snippet({ text, label }: { text: string; label: string }) {
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1500);
+    return () => clearTimeout(timer);
+  }, [copied]);
   return (
-    <div className="flex items-center gap-2">
-      <code className="min-w-0 flex-1 truncate rounded-md border px-2 py-1.5 text-xs bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))]">
-        {value}
-      </code>
-      <CopyButton text={value} />
+    <div className="relative mt-2 rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover))]">
+      <pre className="overflow-x-auto whitespace-pre p-3 pr-12 font-mono text-xs leading-relaxed text-[rgb(var(--ec-page-text))]">
+        {text}
+      </pre>
+      <button
+        type="button"
+        aria-label={`Copy ${label}`}
+        title="Copy"
+        onClick={async () => setCopied(await copyText(text))}
+        className="absolute right-2 top-2 rounded-md p-1.5 text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-card-bg))] hover:text-[rgb(var(--ec-page-text))] [&_svg]:h-4 [&_svg]:w-4"
+      >
+        {copied ? <Check aria-hidden /> : <Copy aria-hidden />}
+      </button>
     </div>
   );
 }
 
+const Steps = ({ children }: { children: ReactNode }) => (
+  <ol className="list-decimal space-y-2 pl-5 text-sm leading-relaxed text-[rgb(var(--ec-page-text))] marker:text-[rgb(var(--ec-page-text-muted))]">
+    {children}
+  </ol>
+);
+
 /** Turns something on for this tab, or says it's on */
 function TabSwitch({ on, onTurnOn, label }: { on: boolean; onTurnOn: () => void; label: string }) {
   return on ? (
@@ -115,25 +130,36 @@ function TabSwitch({ on, onTurnOn, label }: { on: boolean; onTurnOn: () => void;
       On for this tab
     </p>
   ) : (
-    <button
-      onClick={onTurnOn}
-      className="shrink-0 whitespace-nowrap rounded-lg border px-2.5 py-1.5 text-xs font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]"
-    >
+    <button type="button" onClick={onTurnOn} className={`${secondary} h-8 px-3 text-xs`}>
       {label}
     </button>
   );
 }
 
-type Way = 'chat' | 'code' | 'browser';
-const WAYS: { id: Way; label: string; hint: string }[] = [
-  { id: 'chat', label: 'Chat app', hint: 'Claude, ChatGPT' },
-  { id: 'code', label: 'Coding agent', hint: 'Claude Code, Cursor, Codex' },
-  { id: 'browser', label: 'This browser', hint: 'WebMCP' },
+/** Things to ask, for the two ways of pairing with an agent on a canvas: designing something new, and understanding what's there */
+const PAIRING = [
+  {
+    title: 'Design ideas together',
+    prompts: [
+      'Add a payments service that listens to OrderPlaced',
+      'How could we split the orders service?',
+      'Add retries and a dead letter queue to this',
+    ],
+  },
+  {
+    title: 'Understand how it works',
+    prompts: [
+      'Put everything the Orders domain owns on the canvas',
+      'Walk me through what happens when a payment fails',
+      'Which services consume this event?',
+    ],
+  },
 ];
 
 /**
- * Bringing an AI agent onto the canvas: copy the prompt and give it to the agent (it works out how to connect).
- * The prompt is there to read, and how each kind of agent connects is one step each, for setting it up by hand.
+ * Bringing an AI agent onto the canvas, as Studio on the web does it: how to add EventCatalog's MCP server to each
+ * common client, a step or two each with what to copy, and what to ask it. The quickest way first: a prompt to give
+ * the agent, which works out how to connect (and which canvas to join) itself. Agents in this browser use WebMCP.
  */
 export default function ConnectAgentDialog({
   link,
@@ -151,15 +177,22 @@ export default function ConnectAgentDialog({
   onClose: () => void;
 }) {
   const prompt = buildAgentPrompt(link);
+  const { mcpUrl, canvasId } = link;
   const [relayOn, setRelayOn] = useState(isRelayEnabled);
   const [showPrompt, setShowPrompt] = useState(false);
-  const [way, setWay] = useState<Way>('chat');
+  const [promptCopied, setPromptCopied] = useState(false);
+  const [client, setClient] = useState(0);
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && onClose();
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [onClose]);
+  useEffect(() => {
+    if (!promptCopied) return;
+    const timer = setTimeout(() => setPromptCopied(false), 1500);
+    return () => clearTimeout(timer);
+  }, [promptCopied]);
 
   const turnOnRelay = () => {
     if (!relayScriptPath) return;
@@ -169,111 +202,231 @@ export default function ConnectAgentDialog({
     onEnableWebMcp();
   };
 
+  const joinThisCanvas = (
+    <>
+      Ask it to join this canvas (<code className="text-xs">{canvasId}</code>), or paste the prompt above, and start pairing (try
+      one of the prompts below).
+    </>
+  );
+  const clients: { name: string; logo: ReactNode; body: ReactNode }[] = [
+    {
+      name: 'Claude',
+      logo: <ClaudeLogo />,
+      body: (
+        <Steps>
+          <li>
+            In Claude, open <strong>Settings → Connectors</strong> and choose <strong>Add custom connector</strong>.
+          </li>
+          <li>
+            Name it <strong>EventCatalog</strong> and paste this URL:
+            <Snippet text={mcpUrl} label="the URL" />
+          </li>
+          <li>In a chat, turn the connector on. {joinThisCanvas}</li>
+        </Steps>
+      ),
+    },
+    {
+      name: 'Claude Code',
+      logo: <ClaudeCodeLogo />,
+      body: (
+        <>
+          <Steps>
+            <li>
+              Run this in your project:
+              <Snippet text={`claude mcp add --transport http eventcatalog ${mcpUrl}`} label="the command" />
+            </li>
+            <li>{joinThisCanvas}</li>
+          </Steps>
+          {relayScriptPath && (
+            <div className="mt-4 flex items-center justify-between gap-3 rounded-lg border border-[rgb(var(--ec-page-border))] p-3">
+              <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">
+                Can't reach this EventCatalog from your computer? Use this tab through the local relay: add{' '}
+                <code>{RELAY_COMMAND}</code> as an MCP server.
+              </p>
+              <TabSwitch on={relayOn} onTurnOn={turnOnRelay} label="Turn on relay" />
+            </div>
+          )}
+        </>
+      ),
+    },
+    {
+      name: 'ChatGPT',
+      logo: <OpenAILogo />,
+      body: (
+        <Steps>
+          <li>
+            In ChatGPT, open <strong>Settings → Apps &amp; Connectors</strong>, turn on developer mode and choose{' '}
+            <strong>Create</strong>.
+          </li>
+          <li>
+            Name it <strong>EventCatalog</strong> and paste this URL:
+            <Snippet text={mcpUrl} label="the URL" />
+          </li>
+          <li>In a chat, add the connector. Chats that show MCP Apps open the canvas right there. {joinThisCanvas}</li>
+        </Steps>
+      ),
+    },
+    {
+      name: 'Cursor',
+      logo: <CursorLogo />,
+      body: (
+        <Steps>
+          <li>
+            Add this server to <code className="text-xs">.cursor/mcp.json</code> in your project:
+            <Snippet text={JSON.stringify({ mcpServers: { eventcatalog: { url: mcpUrl } } }, null, 2)} label="the settings" />
+          </li>
+          <li>{joinThisCanvas}</li>
+        </Steps>
+      ),
+    },
+    {
+      name: 'VS Code',
+      logo: <Code2 />,
+      body: (
+        <Steps>
+          <li>
+            Add this server to <code className="text-xs">.vscode/mcp.json</code> in your project:
+            <Snippet
+              text={JSON.stringify({ servers: { eventcatalog: { type: 'http', url: mcpUrl } } }, null, 2)}
+              label="the settings"
+            />
+          </li>
+          <li>In Copilot's agent mode: {joinThisCanvas}</li>
+        </Steps>
+      ),
+    },
+    {
+      name: 'This browser',
+      logo: <Globe />,
+      body: (
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm leading-relaxed text-[rgb(var(--ec-page-text))]">
+            {webMcp.state === 'on'
+              ? `This tab offers ${webMcp.tools} canvas tools to agents in your browser (like the MCP-B extension) through WebMCP.`
+              : 'Let agents in your browser (like the MCP-B extension) use this canvas through WebMCP.'}
+          </p>
+          <TabSwitch on={webMcp.state === 'on'} onTurnOn={onEnableWebMcp} label="Turn on" />
+        </div>
+      ),
+    },
+  ];
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
+    <div className="fixed inset-0 z-[80] flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
       <div
         role="dialog"
-        aria-label="Connect your agent"
+        aria-modal="true"
+        aria-labelledby="connect-agent-title"
         onClick={(event) => event.stopPropagation()}
-        className="flex max-h-full w-full max-w-md flex-col rounded-xl border shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]"
+        className="flex max-h-full w-full max-w-2xl flex-col rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] shadow-2xl"
       >
-        <header className="flex items-start justify-between gap-3 px-5 pb-3 pt-5">
-          <div className="flex items-center gap-3">
-            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]">
-              <Bot size={18} />
-            </span>
-            <div>
-              <h2 className="text-base font-semibold">Bring in an AI agent</h2>
-              <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">It joins this canvas and designs with you, live.</p>
-            </div>
+        <div className="flex items-start gap-3 px-5 pt-5">
+          <div className="min-w-0 flex-1">
+            <h2 id="connect-agent-title" className="text-base font-semibold">
+              Connect your AI agent
+            </h2>
+            <p className="mt-1.5 text-sm font-light leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
+              Pair with your AI agent on this canvas: sketch ideas together, or have it bring in what your catalog has and walk
+              you through it. It joins with its own pointer, and you both change the canvas. Add this EventCatalog as an MCP
+              server.
+            </p>
           </div>
           <button
-            onClick={onClose}
+            type="button"
             aria-label="Close"
-            className="rounded-md p-1 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)]"
+            onClick={onClose}
+            className="-mr-1 -mt-1 rounded-md p-1.5 text-[rgb(var(--ec-page-text-muted))] hover:bg-[rgb(var(--ec-content-hover))] hover:text-[rgb(var(--ec-page-text))]"
           >
-            <X size={16} />
+            <X aria-hidden className="h-4 w-4" />
           </button>
-        </header>
+        </div>
 
-        <div className="min-h-0 space-y-5 overflow-y-auto px-5 pb-5">
-          {/* The one thing most people need: the prompt */}
-          <section className="space-y-2">
-            <CopyButton text={prompt} label="Copy prompt" large />
-            <p className="text-center text-xs text-[rgb(var(--ec-page-text-muted))]">
-              Paste it into your agent. It works out how to connect.{' '}
+        <div className="min-h-0 overflow-y-auto">
+          {/* The quickest way: one prompt, which the agent works out how to connect from (and which canvas to join) */}
+          <section className="mx-5 mt-4 overflow-hidden rounded-xl border border-[color-mix(in_srgb,rgb(var(--ec-accent))_35%,rgb(var(--ec-page-border)))] bg-[color-mix(in_srgb,rgb(var(--ec-accent))_6%,transparent)]">
+            <div className="flex items-center gap-3 p-4">
+              <span className="flex h-9 w-9 flex-none items-center justify-center rounded-lg bg-[color-mix(in_srgb,rgb(var(--ec-accent))_14%,transparent)] text-[rgb(var(--ec-accent))]">
+                <Sparkles aria-hidden className="h-[18px] w-[18px]" />
+              </span>
+              <div className="min-w-0 flex-1">
+                <h3 className="text-sm font-semibold">Quickest: paste one prompt</h3>
+                <p className="mt-0.5 text-xs leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
+                  Give it to your agent: it connects to this EventCatalog and joins this canvas on its own.
+                </p>
+              </div>
+              <button type="button" onClick={async () => setPromptCopied(await copyText(prompt))} className={primary}>
+                {promptCopied ? <Check aria-hidden /> : <Copy aria-hidden />}
+                {promptCopied ? 'Copied' : 'Copy prompt'}
+              </button>
+            </div>
+            {/* What's in it, at a glance (the whole of it on a click) */}
+            <div className="relative border-t border-[color-mix(in_srgb,rgb(var(--ec-accent))_20%,rgb(var(--ec-page-border)))] bg-[rgb(var(--ec-card-bg)/0.6)]">
+              <pre
+                className={`whitespace-pre-wrap px-4 py-3 font-mono text-[11px] leading-relaxed text-[rgb(var(--ec-page-text-muted))] ${
+                  showPrompt ? 'max-h-56 overflow-y-auto' : 'max-h-[112px] overflow-hidden'
+                }`}
+              >
+                {prompt}
+              </pre>
+              {!showPrompt && (
+                <div className="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-[rgb(var(--ec-card-bg))] via-[rgb(var(--ec-card-bg)/0.85)] to-transparent" />
+              )}
               <button
+                type="button"
                 onClick={() => setShowPrompt((shown) => !shown)}
                 aria-expanded={showPrompt}
-                className="inline-flex items-center gap-0.5 font-medium text-[rgb(var(--ec-accent))] hover:underline"
+                className={`${
+                  showPrompt ? 'mx-4 mb-3' : 'absolute bottom-2 left-1/2 -translate-x-1/2'
+                } inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] px-2.5 py-1 text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] shadow-sm hover:text-[rgb(var(--ec-page-text))]`}
               >
-                {showPrompt ? 'Hide prompt' : 'Show prompt'}
-                <ChevronDown size={12} className={`transition-transform ${showPrompt ? 'rotate-180' : ''}`} />
+                {showPrompt ? 'Show less' : 'Show the whole prompt'}
+                <ChevronDown aria-hidden size={12} className={`transition-transform ${showPrompt ? 'rotate-180' : ''}`} />
               </button>
-            </p>
-            {showPrompt && (
-              <pre className="max-h-56 overflow-y-auto whitespace-pre-wrap rounded-lg border p-3 font-mono text-[11px] leading-relaxed bg-[rgb(var(--ec-page-bg))] border-[rgb(var(--ec-page-border))]">
-                {prompt}
-              </pre>
-            )}
+            </div>
           </section>
 
-          {/* Or set it up by hand, for the kind of agent you use */}
-          <section className="space-y-3 border-t pt-4 border-[rgb(var(--ec-page-border))]">
-            <h3 className="text-xs font-semibold">Or connect it yourself</h3>
-            <div role="tablist" className="grid grid-cols-3 gap-1 rounded-lg p-1 bg-[rgb(var(--ec-page-border)/0.5)]">
-              {WAYS.map(({ id, label, hint }) => (
+          <p className="mx-5 mt-5 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]">
+            Or set it up yourself
+          </p>
+          {/* Or add the server to the client they use, a step or two each */}
+          <div className="px-5 pb-5 pt-2">
+            <div role="tablist" className="flex gap-1 rounded-lg bg-[rgb(var(--ec-content-hover))] p-1">
+              {clients.map(({ name, logo }, index) => (
                 <button
-                  key={id}
+                  key={name}
+                  type="button"
                   role="tab"
-                  aria-selected={way === id}
-                  onClick={() => setWay(id)}
-                  className={`rounded-md px-2 py-1.5 text-center ${
-                    way === id ? 'bg-[rgb(var(--ec-card-bg))] shadow-sm' : 'text-[rgb(var(--ec-page-text-muted))]'
+                  aria-selected={client === index}
+                  onClick={() => setClient(index)}
+                  className={`flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-2 py-1.5 text-xs font-medium outline-none [&_svg]:h-3.5 [&_svg]:w-3.5 [&_svg]:flex-none ${
+                    client === index
+                      ? 'bg-[rgb(var(--ec-card-bg))] text-[rgb(var(--ec-page-text))] shadow-sm'
+                      : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
                   }`}
                 >
-                  <span className="block text-xs font-medium">{label}</span>
-                  <span className="block truncate text-[10px] text-[rgb(var(--ec-page-text-muted))]">{hint}</span>
+                  {logo}
+                  {name}
                 </button>
               ))}
             </div>
+            <div role="tabpanel" className="mt-4">
+              {clients[client].body}
+            </div>
+          </div>
 
-            {way === 'chat' && (
-              <div className="space-y-2">
-                <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">
-                  Add this MCP server to your chat app. Chats that show MCP Apps open the canvas right in the chat.
-                </p>
-                <CopyField value={link.mcpUrl} />
+          {/* What pairing looks like: the two ways people work with their agent on a canvas */}
+          <div className="grid gap-3 border-t border-[rgb(var(--ec-page-border))] px-5 py-4 sm:grid-cols-2">
+            {PAIRING.map(({ title, prompts }) => (
+              <div key={title}>
+                <h3 className="text-xs font-semibold text-[rgb(var(--ec-page-text))]">{title}</h3>
+                <ul className="mt-1.5 space-y-1 text-xs leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
+                  {prompts.map((text) => (
+                    <li key={text}>“{text}”</li>
+                  ))}
+                </ul>
               </div>
-            )}
-            {way === 'code' && (
-              <div className="space-y-2">
-                <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">
-                  Add EventCatalog's MCP server, e.g. in Claude Code:
-                </p>
-                <CopyField value={`claude mcp add --transport http eventcatalog ${link.mcpUrl}`} />
-                {relayScriptPath && (
-                  <div className="flex items-center justify-between gap-3 pt-1">
-                    <p className="text-[11px] text-[rgb(var(--ec-page-text-muted))]">
-                      Can't reach this server? Use this tab through the local relay: add <code>{RELAY_COMMAND}</code> as an MCP
-                      server.
-                    </p>
-                    <TabSwitch on={relayOn} onTurnOn={turnOnRelay} label="Turn on relay" />
-                  </div>
-                )}
-              </div>
-            )}
-            {way === 'browser' && (
-              <div className="flex items-center justify-between gap-3">
-                <p className="text-xs text-[rgb(var(--ec-page-text-muted))]">
-                  {webMcp.state === 'on'
-                    ? `This tab offers ${webMcp.tools} canvas tools to agents in your browser (like the MCP-B extension).`
-                    : 'Let agents in your browser (like the MCP-B extension) use this canvas through WebMCP.'}
-                </p>
-                <TabSwitch on={webMcp.state === 'on'} onTurnOn={onEnableWebMcp} label="Turn on" />
-              </div>
-            )}
-          </section>
+            ))}
+          </div>
         </div>
       </div>
     </div>

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

@@ -2,8 +2,7 @@ import { useEffect, useState, type ReactElement } from 'react';
 import { X } from 'lucide-react';
 import type { ConnectionGroup, ConnectionGroupId } from '../canvas-actions';
 import type { CatalogResource } from '../catalog-resources';
-import { getNodeLabel } from '../node-types';
-import { CardPreview } from './ContainerChooser';
+import { getNodeLabel, CardPreview } from '@eventcatalog/visualiser/studio';
 
 /**
  * Asked when a catalog service or message is dropped on the canvas (and connects to things that aren't on it yet):

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

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { usePeople, type PresenceStore } from '../hooks/presence-store';
+import Dialog, { SECONDARY_BUTTON } from './Dialog';
+import { STATUS } from '@eventcatalog/visualiser/studio';
+
+/** Asks before deleting a canvas: it's deleted for everyone, for good */
+export default function DeleteCanvasDialog({
+  title,
+  presence,
+  clientId,
+  onDelete,
+  onClose,
+}: {
+  title?: string;
+  /** Who has it open (to say it closes for them) */
+  presence: PresenceStore | null;
+  clientId: number | null;
+  /** Deletes it (rejects with what went wrong) */
+  onDelete: () => Promise<void>;
+  onClose: () => void;
+}) {
+  const othersHere = usePeople(presence).filter((peer) => peer.clientId !== clientId).length;
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const confirm = async () => {
+    setDeleting(true);
+    setError(undefined);
+    try {
+      await onDelete();
+    } catch (failure) {
+      setError((failure as Error).message);
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <Dialog role="alertdialog" labelledBy="delete-canvas-title" busy={deleting} onClose={onClose}>
+      <div className="space-y-2 px-5 py-4">
+        <h2 id="delete-canvas-title" className="text-base font-semibold">
+          Delete {title ? `"${title}"` : 'this canvas'}?
+        </h2>
+        <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">
+          It's deleted for everyone, with its comments, and can't be brought back.
+          {othersHere > 0 &&
+            ` ${othersHere === 1 ? 'Someone else has' : `${othersHere} others have`} it open: it closes for them too.`}
+        </p>
+        {error && <p className={`text-sm ${STATUS.danger.text}`}>{error}</p>}
+      </div>
+      <div className="flex justify-end gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
+        <button onClick={onClose} disabled={deleting} className={SECONDARY_BUTTON}>
+          Cancel
+        </button>
+        <button
+          autoFocus
+          onClick={confirm}
+          disabled={deleting}
+          className={`rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-60 ${STATUS.danger.button}`}
+        >
+          {deleting ? 'Deleting…' : 'Delete canvas'}
+        </button>
+      </div>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,60 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+
+/**
+ * Studio's dialogs: a card over the page, closed by Escape or clicking outside it (not while it's busy). Focus stays
+ * in it: anything that moves focus outside (e.g. the menu it was opened from, closing) sends it back to its first
+ * field or button.
+ */
+
+export const SECONDARY_BUTTON =
+  'rounded-lg border px-4 py-2 text-sm font-medium border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)] disabled:opacity-50';
+export const PRIMARY_BUTTON =
+  'rounded-lg px-4 py-2 text-sm font-medium bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))] disabled:opacity-60';
+
+export default function Dialog({
+  labelledBy,
+  role = 'dialog',
+  busy = false,
+  onClose,
+  children,
+}: {
+  /** The id of its heading */
+  labelledBy: string;
+  /** `alertdialog` when it asks to confirm something that can't be undone */
+  role?: 'dialog' | 'alertdialog';
+  /** Doing what was asked: it can't be closed until it's done */
+  busy?: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}) {
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && !busy && onClose();
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [onClose, busy]);
+
+  const card = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const keepFocus = (event: FocusEvent) => {
+      if (!card.current || card.current.contains(event.target as globalThis.Node)) return;
+      card.current.querySelector<HTMLElement>('input, button')?.focus();
+    };
+    document.addEventListener('focusin', keepFocus);
+    return () => document.removeEventListener('focusin', keepFocus);
+  }, []);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={() => !busy && onClose()}>
+      <div
+        ref={card}
+        role={role}
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        onClick={(event) => event.stopPropagation()}
+        className="w-full max-w-md rounded-xl border shadow-2xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}