@eventcatalog/core 5.0.0-beta.9 → 5.0.0

package/eventcatalog/src/features/studio/webmcp-relay/README.md

@@ -0,0 +1,5 @@
+# WebMCP local relay (browser files)
+
+`embed.js`, `widget.html` and `widget.js` are the browser files of [`@mcp-b/webmcp-local-relay`](https://github.com/WebMCP-org/npm-packages/tree/main/packages/webmcp-local-relay) **5.1.0** (MIT, see `LICENSE`), copied as published. Studio serves them at `/webmcp-relay/*` so a canvas can hand its WebMCP tools to desktop MCP clients running `npx -y @mcp-b/webmcp-local-relay@5.1.0`.
+
+They're copied rather than installed because the package's Node dependencies (which EventCatalog doesn't run) pin vulnerable versions of `@modelcontextprotocol/core` and `zod`. When moving to a new relay version, copy its `dist/browser` files here and update the version in `ConnectAgentDialog.tsx`.

package/eventcatalog/src/features/studio/webmcp-relay/embed.js

@@ -0,0 +1,2 @@
+(function(){function e(e){return typeof e==`object`&&!!e&&!Array.isArray(e)}function t(t){if(!e(t))return!1;let n=Object.getPrototypeOf(t);return n===Object.prototype||n===null}function n(e,r=new WeakSet){if(e===null||typeof e==`string`||typeof e==`boolean`)return!0;if(typeof e==`number`)return Number.isFinite(e);if(typeof e!=`object`||r.has(e))return!1;r.add(e);try{return(Array.isArray(e)?e:t(e)?Object.values(e):null)?.every(e=>n(e,r))??!1}catch{return!1}finally{r.delete(e)}}function r(e){return n(e)?e:void 0}function i(t){return e(t)&&Array.isArray(t.content)}function a(e){if(typeof e==`string`)return e;try{return JSON.stringify(e)??String(e)}catch{return String(e)}}function o(e){if(i(e))return e;let t=r(e);return{content:[{type:`text`,text:a(e)}],...t===void 0?{}:{structuredContent:t},isError:!1}}function s(e){return!!e&&typeof e==`object`&&!Array.isArray(e)}function c(){return crypto.randomUUID()}let l=`[data-webmcp-relay]`,u=`__webmcp_relay_tab_id`,d=null,f;function p(){return document.currentScript instanceof HTMLScriptElement?document.currentScript:null}let m=p(),h=m?m.hasAttribute(`data-debug`):!1;function g(...e){h&&console.warn(`[webmcp-relay-embed]`,...e)}function _(){try{let e=sessionStorage.getItem(u);if(e)return e}catch(e){g(`sessionStorage read failed, tab ID will not persist:`,e)}let e=c();try{sessionStorage.setItem(u,e)}catch(e){g(`sessionStorage write failed:`,e)}return e}function v(e){if(!e?.src)throw Error(`The relay embed script must be loaded from a URL`);return new URL(`widget.html`,e.src).href}function y(e){let t=v(e),n=e?.getAttribute(`data-relay-id`)||void 0,r=e?.getAttribute(`data-relay-workspace`)||void 0,i=e?.getAttribute(`data-request-timeout`)||void 0;return{autoConnect:e?.getAttribute(`data-auto-connect`)!==`false`,relayHost:e?.getAttribute(`data-relay-host`)||`127.0.0.1`,relayPort:e?.getAttribute(`data-relay-port`)||`9333`,...n?{relayId:n}:{},...r?{relayWorkspace:r}:{},...i?{requestTimeout:i}:{},tabId:_(),widgetUrl:t,widgetOrigin:new URL(t).origin}}function b(e){return s(e)?e:(e!=null&&g(`Tool invocation args must be an object, got`,typeof e),{})}function x(e){let t;if(e.inputSchema!==void 0)if(typeof e.inputSchema==`string`)try{t=JSON.parse(e.inputSchema)}catch{return console.warn(`[webmcp-relay-embed] Tool "${e.name}" was not relayed because its input schema is malformed.`),null}else t=e.inputSchema;return{name:e.name,...e.title===void 0?{}:{title:e.title},description:e.description,...t===void 0?{}:{inputSchema:t},...e.annotations===void 0?{}:{annotations:e.annotations}}}function S(e){if(e===null)return{isError:!0,content:[{type:`text`,text:`Tool execution interrupted by navigation`}]};let t;try{t=JSON.parse(e)}catch{t=e}return s(t)&&t.resultType===`input_required`?{isError:!0,content:[{type:`text`,text:`The WebMCP local relay cannot forward MCP input_required results. Multi-round tool flows require direct McpServer registration.`}]}:o(t)}function C(e){return!!(e&&`executeTool`in e&&typeof e.executeTool==`function`)}function w(){let e=document.modelContext;return C(e)?e:void 0}async function T(){let e=w();return e?(await e.getTools()).map(x).filter(e=>e!==null):[]}async function E(e,t){let n=w();if(!n)throw Error(`No executable WebMCP runtime found on this page`);let r=(await n.getTools()).find(t=>t.name===e);if(!r)throw Error(`Tool not found: ${e}`);return S(await n.executeTool(r,JSON.stringify(t)))}let D=!1,O=0,k=null,A=``;function j(e){if(typeof e!=`object`||!e)return JSON.stringify(e)??`undefined`;if(Array.isArray(e))return`[${e.map(j).join(`,`)}]`;let t=e;return`{${Object.keys(t).sort().map(e=>`${JSON.stringify(e)}:${j(t[e])}`).join(`,`)}}`}function M(e){return e.map(j).sort().join(`
+`)}function N(){D=!1;let e=O;T().then(t=>{if(e!==O)return;let n=M(t);n===A||!d||(A=n,d.postMessage({type:`webmcp.tools.changed`,tools:t},f.widgetOrigin))}).catch(e=>{g(`Failed to sync tool changes:`,e)})}function P(){O++,!D&&(D=!0,setTimeout(N,0))}function F(){k||(k=setInterval(P,2e3))}function I(){try{let e=document.modelContext;return e?(e.addEventListener(`toolchange`,P),!0):!1}catch(e){return g(`addEventListener on modelContext threw:`,e),!1}}function L(){if(F(),P(),I())return;let e=0,t=100,n=()=>{setTimeout(()=>{if(e++,!I()){if(e>=40){g(`Could not subscribe to tool changes after 40 retries. Dynamic tool updates will rely on polling.`);return}t=Math.min(Math.round(t*1.5),1e3),n()}},t)};n()}function R(e,t,n){!e||typeof e!=`object`||!(`postMessage`in e)||e.postMessage(n,t)}function z(e){return!s(e)||typeof e.requestId!=`string`||typeof e.type!=`string`?null:{requestId:e.requestId,type:e.type,toolName:e.toolName,args:e.args}}function B(e,t){T().then(n=>{R(t.source,t.origin,{type:`webmcp.tools.list.response`,requestId:e.requestId,tools:n})}).catch(n=>{g(`Failed to list tools:`,n),R(t.source,t.origin,{type:`webmcp.tools.list.response`,requestId:e.requestId,tools:[],error:`Failed to list tools: ${n instanceof Error?n.message:String(n)}`})})}function V(e,t){E(String(e.toolName??``),b(e.args)).then(n=>{R(t.source,t.origin,{type:`webmcp.tools.invoke.response`,requestId:e.requestId,result:s(n)?n:{}})}).catch(n=>{R(t.source,t.origin,{type:`webmcp.tools.invoke.error`,requestId:e.requestId,error:String(n instanceof Error?n.message:n)})})}async function H(e){if(document.querySelector(l))return;let t=new URLSearchParams;t.set(`tabId`,e.tabId),t.set(`hostOrigin`,window.location.origin);let n=new URL(window.location.href);n.search=``,n.hash=``,t.set(`hostUrl`,n.href),t.set(`hostTitle`,document.title||``),t.set(`relayHost`,e.relayHost),t.set(`relayPort`,e.relayPort),t.set(`autoConnect`,e.autoConnect?`true`:`false`),e.relayId&&t.set(`relayId`,e.relayId),e.relayWorkspace&&t.set(`relayWorkspace`,e.relayWorkspace),e.requestTimeout&&t.set(`requestTimeout`,e.requestTimeout);let r=await fetch(e.widgetUrl);if(!r.ok)throw Error(`Widget HTML request failed with status ${String(r.status)}`);let i=await r.text(),a=`<script>window.__WEBMCP_RELAY_CONFIG=${JSON.stringify(Object.fromEntries(t))};<\/script>`,o=URL.createObjectURL(new Blob([i.replace(`</head>`,`${a}</head>`)],{type:`text/html`}));e.widgetOrigin=window.location.origin;let s=document.createElement(`iframe`);s.src=o,s.style.display=`none`,s.setAttribute(`aria-hidden`,`true`),s.setAttribute(`data-webmcp-relay`,`1`),s.setAttribute(`allow`,`loopback-network; local-network; local-network-access`),document.body.appendChild(s),d=s.contentWindow,s.addEventListener(`load`,()=>{d=s.contentWindow,URL.revokeObjectURL(o)}),s.addEventListener(`error`,()=>{console.error(`[webmcp-relay-embed] Failed to load relay widget iframe from:`,s.src,`-- WebMCP tools will NOT be relayed. Check network connectivity and widget URL.`),URL.revokeObjectURL(o)})}if(!document.querySelector(l)){try{f=y(m)}catch(e){throw console.error(`[webmcp-relay-embed] Failed to initialize relay configuration:`,e),e}window.addEventListener(`message`,e=>{if(e.origin!==f.widgetOrigin||!d||e.source!==d)return;let t=e.data;if(s(t)&&t.type===`webmcp.reload`){window.location.reload();return}let n=z(e.data);if(n){if(n.type===`webmcp.tools.list.request`){B(n,e);return}n.type===`webmcp.tools.invoke.request`&&V(n,e)}});let e=()=>{H(f).catch(e=>{console.error(`[webmcp-relay-embed] Failed to inject relay widget:`,e)})};document.body?e():document.addEventListener(`DOMContentLoaded`,e,{once:!0}),L(),document.addEventListener(`visibilitychange`,()=>{document.visibilityState===`visible`&&d&&d.postMessage({type:`webmcp.connect`},f.widgetOrigin)})}})();

package/eventcatalog/src/features/studio/webmcp-relay/widget.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>WebMCP Relay Widget</title>
+  </head>
+  <body>
+    <script>(function(){let e=new Set([`127.0.0.1`,`localhost`,`::1`,`[::1]`]),t=9333;function n(e){return!!e&&typeof e==`object`&&!Array.isArray(e)}function r(t){return e.has(t)}function i(){return crypto.randomUUID()}function a(e){return String(e).replace(/[\r\n]/g,``)}function o(e,t){try{e.readyState===WebSocket.OPEN&&e.send(t)}catch(e){console.warn(`[webmcp-relay] Failed to send message:`,e)}}function s(e){return`__webmcp_relay_endpoint:${[e.hostOrigin,e.relayId??``,e.workspace??``].map(e=>encodeURIComponent(e)).join(`:`)}`}let c=[1e4,2e4,3e4];function l(e=window.location.search){let n=new URLSearchParams(e),a=globalThis.__WEBMCP_RELAY_CONFIG;function o(e){return n.get(e)??a?.[e]??null}let s=o(`hostOrigin`);if(!s)return null;let c=o(`hostUrl`)||s,l=o(`hostTitle`)||``,u=o(`tabId`)||i(),d=o(`relayHost`)||`127.0.0.1`,f=o(`relayPort`),p=f&&f.length>0?Number(f):t,m=o(`autoConnect`)!==`false`,h=o(`relayId`)||void 0,g=o(`relayWorkspace`)||void 0,_=o(`requestTimeout`),v=_&&_.length>0?Number(_):6e4;return r(d)?!Number.isInteger(p)||p<1||p>65535?(console.error(`[webmcp-relay-widget] relayPort must be an integer between 1 and 65535, got:`,f),null):!Number.isInteger(v)||v<1?(console.error(`[webmcp-relay-widget] requestTimeout must be a positive integer (ms), got:`,_),null):{autoConnect:m,hostOrigin:s,hostTitle:l,hostUrl:c,relayHostHint:d,relayPortHint:p,...h?{relayId:h}:{},...g?{relayWorkspace:g}:{},requestTimeoutMs:v,tabId:u}:(console.error(`[webmcp-relay-widget] relayHost must be a loopback address, got:`,d),null)}function u(e){return!n(e)||typeof e.requestId!=`string`||typeof e.type!=`string`?null:{requestId:e.requestId,type:e.type,tools:e.tools,result:e.result,error:e.error}}function d(){let e=l();if(!e){console.warn(`[webmcp-relay-widget] Missing required hostOrigin parameter. Widget will not start.`);return}b(e)}function f(e){return!n(e)||e.type!==`server-hello`||e.service!==`webmcp-local-relay`||e.version!==1||typeof e.host!=`string`||typeof e.instanceId!=`string`||typeof e.port!=`number`?null:{type:`server-hello`,service:`webmcp-local-relay`,version:1,host:e.host,instanceId:e.instanceId,port:e.port,...typeof e.label==`string`?{label:e.label}:{},...typeof e.relayId==`string`?{relayId:e.relayId}:{},...typeof e.workspace==`string`?{workspace:e.workspace}:{}}}function p(e){return!n(e)||e.type!==`hello/rejected`||typeof e.message!=`string`||typeof e.reason!=`string`?null:{type:`hello/rejected`,message:e.message,reason:e.reason}}function m(e){return s({hostOrigin:e.hostOrigin,...e.relayId?{relayId:e.relayId}:{},...e.relayWorkspace?{workspace:e.relayWorkspace}:{}})}function h(e){if(typeof sessionStorage>`u`)return null;try{let t=sessionStorage.getItem(m(e));if(!t)return null;let n=JSON.parse(t);return typeof n.host!=`string`||n.host.length===0||typeof n.port!=`number`||!Number.isInteger(n.port)||n.port<1||n.port>65535?null:{host:n.host,port:n.port}}catch{return null}}function g(e,t){if(!(typeof sessionStorage>`u`))try{sessionStorage.setItem(m(e),JSON.stringify({host:t.host,port:t.port}))}catch{}}function _(e){if(!(typeof sessionStorage>`u`))try{sessionStorage.removeItem(m(e))}catch{}}function v(e){let n=h(e),r=new Set,i=[],a=(e,t)=>{if(!Number.isInteger(t)||t<1||t>65535)return;let n=`${e}:${String(t)}`;r.has(n)||(r.add(n),i.push({host:e,port:t}))};e.relayPortHint!==void 0&&a(e.relayHostHint,e.relayPortHint),n&&a(n.host,n.port);for(let e of[`127.0.0.1`,`[::1]`])for(let n=t;n<=9348;n+=1)a(e,n);return i}async function y(e){let t=`ws://${e.host.includes(`:`)&&!e.host.startsWith(`[`)?`[${e.host}]`:e.host}:${String(e.port)}`;return new Promise(n=>{let r=!1,i=new WebSocket(t,[`webmcp-discovery.v1`,`webmcp.v1`]),a=e=>{if(!r){if(r=!0,clearTimeout(l),i.removeEventListener(`close`,s),i.removeEventListener(`error`,o),i.removeEventListener(`message`,c),e===null)try{i.close()}catch{}n(e)}},o=()=>{a(null)},s=()=>{a(null)},c=t=>{let n;try{n=JSON.parse(String(t.data))}catch{return}let r=f(n);r&&a({endpoint:{hello:r,host:e.host,port:e.port},socket:i})},l=setTimeout(()=>{a(null)},1200);i.addEventListener(`close`,s,{once:!0}),i.addEventListener(`error`,o,{once:!0}),i.addEventListener(`message`,c)})}function b(e){let t=new Map,r=null,s=null,l=!1,d=null,m=null,b=`idle`,x=0,S=null,C=e=>{for(let[n,r]of t)clearTimeout(r.timeoutId),t.delete(n),r.reject(Error(e))};function w(n,r){let a=i();return new Promise((i,o)=>{let s=setTimeout(()=>{t.delete(a),o(Error(`Host response timeout: ${n}`))},e.requestTimeoutMs);t.set(a,{resolve:i,reject:o,timeoutId:s,responseType:`${n}.response`,errorType:`${n}.error`}),window.parent.postMessage({type:`${n}.request`,requestId:a,...r},e.hostOrigin)})}let T=(t,i)=>{let c=[],u=()=>{d&&(clearTimeout(d),d=null)},h=()=>{o(t,JSON.stringify({type:`tools/list`,tools:c}))};m&&(clearTimeout(m),m=null),r=i,s=t,x=0,l=!1,b=`idle`,t.addEventListener(`message`,s=>{let c;try{c=JSON.parse(String(s.data))}catch(e){console.warn(`[webmcp-relay-widget] Failed to parse relay message:`,e);return}let d=f(c);if(d){r={hello:d,host:i.host,port:i.port};return}if(n(c)&&c.type===`hello/accepted`){u(),l=!0,g(e,i),h();return}let m=p(c);if(m){u(),l=!1,_(e),window.parent.postMessage({type:`webmcp.relay.rejected`,host:i.host,port:i.port,message:m.message,reason:m.reason},e.hostOrigin),console.error(`[webmcp-relay-widget] Relay rejected browser hello:`,m.reason,m.message);try{t.close(1008,m.message)}catch{}return}if(!n(c)||typeof c.type!=`string`)return;let v=c;if(v.type===`ping`){o(t,JSON.stringify({type:`pong`}));return}if(v.type===`reload`){window.parent.postMessage({type:`webmcp.reload`},e.hostOrigin);return}if(v.type!==`invoke`){console.debug(`[webmcp-relay-widget] Ignoring unrecognized message type:`,a(v.type));return}w(`webmcp.tools.invoke`,{toolName:v.toolName,args:n(v.args)?v.args:{}}).then(e=>{o(t,JSON.stringify({type:`result`,callId:v.callId,result:e.result}))}).catch(e=>{o(t,JSON.stringify({type:`result`,callId:v.callId,result:{isError:!0,content:[{type:`text`,text:String(e instanceof Error?e.message:e)}]}}))})}),t.addEventListener(`close`,()=>{s===t&&(l=!1,s=null,u(),C(`WebSocket connection lost`),O())},{once:!0}),t.addEventListener(`error`,e=>{console.warn(`[webmcp-relay-widget] WebSocket error:`,e);try{t.close()}catch(e){console.warn(`[webmcp-relay-widget] Error closing socket after error:`,e)}}),w(`webmcp.tools.list`,{}).then(n=>{c=Array.isArray(n.tools)?n.tools:[],o(t,JSON.stringify({type:`hello`,tabId:e.tabId,origin:e.hostOrigin,title:e.hostTitle||document.referrer||`Unknown page`,url:e.hostUrl})),d=setTimeout(()=>{d=null,!(s!==t||t.readyState!==WebSocket.OPEN||l)&&(console.warn(`[webmcp-relay-widget] Relay did not acknowledge browser hello`),t.close(4e3,`Browser hello was not acknowledged`))},1e3)}).catch(e=>{console.warn(`[webmcp-relay-widget] Hello handshake failed:`,e);try{t.close()}catch{}})},E=async t=>{let n=await y({host:t.host,port:t.port});if(!n)return!1;let r=n.endpoint;return e.relayId&&r.hello.relayId!==e.relayId||e.relayWorkspace&&r.hello.workspace!==e.relayWorkspace?(n.socket.close(),!1):(T(n.socket,r),!0)},D=async()=>{b=`discovering`;try{for(let t of v(e))if(await E(t))return!0;return!1}finally{b===`discovering`&&(b=`idle`)}},O=()=>{if(!r||m)return;let e={host:r.host,port:r.port},t=Math.round(500*(.85+Math.random()*.3));m=setTimeout(()=>{m=null,E(e).then(e=>{e||k()})},t)},k=()=>{if(m)return;let e=c[x];if(e===void 0){M();return}m=setTimeout(()=>{m=null,D().then(e=>{e||(x+=1,k())})},e)},A=()=>{document.visibilityState===`visible`&&b===`dormant`&&P()},j=()=>{document.removeEventListener(`visibilitychange`,A),S!==null&&(clearInterval(S),S=null)},M=()=>{b!==`dormant`&&(b=`dormant`,m&&(clearTimeout(m),m=null),document.addEventListener(`visibilitychange`,A),S=setInterval(()=>{N()},12e4))},N=async()=>{if(b!==`dormant`)return;let t=new Set,n=[],r=(e,r)=>{let i=`${e}:${String(r)}`;t.has(i)||(t.add(i),n.push({host:e,port:r}))};e.relayPortHint!==void 0&&r(e.relayHostHint,e.relayPortHint);let i=h(e);if(i&&r(i.host,i.port),n.length!==0){b=`discovering`,j();for(let e of n)if(await E(e)){x=0;return}M()}},P=()=>{j(),x=0,D().then(e=>{e||M()})};window.addEventListener(`message`,r=>{if(r.source!==window.parent||r.origin!==e.hostOrigin)return;let i=r.data;if(n(i)&&i.type===`webmcp.tools.changed`){s&&l&&o(s,JSON.stringify({type:`tools/changed`,tools:Array.isArray(i.tools)?i.tools:[]}));return}if(n(i)&&i.type===`webmcp.connect`){b===`dormant`?P():!s&&b!==`discovering`&&D();return}let a=u(i);if(!a)return;let c=t.get(a.requestId);if(c){if(a.type===c.responseType){clearTimeout(c.timeoutId),t.delete(a.requestId),c.resolve(a);return}a.type===c.errorType&&(clearTimeout(c.timeoutId),t.delete(a.requestId),c.reject(Error(String(a.error||`Unknown host error`))))}}),e.autoConnect&&D().then(e=>{e||k()})}d()})();</script>
+  </body>
+</html>

package/eventcatalog/src/features/studio/webmcp-relay/widget.js

@@ -0,0 +1 @@
+(function(){let e=new Set([`127.0.0.1`,`localhost`,`::1`,`[::1]`]),t=9333;function n(e){return!!e&&typeof e==`object`&&!Array.isArray(e)}function r(t){return e.has(t)}function i(){return crypto.randomUUID()}function a(e){return String(e).replace(/[\r\n]/g,``)}function o(e,t){try{e.readyState===WebSocket.OPEN&&e.send(t)}catch(e){console.warn(`[webmcp-relay] Failed to send message:`,e)}}function s(e){return`__webmcp_relay_endpoint:${[e.hostOrigin,e.relayId??``,e.workspace??``].map(e=>encodeURIComponent(e)).join(`:`)}`}let c=[1e4,2e4,3e4];function l(e=window.location.search){let n=new URLSearchParams(e),a=globalThis.__WEBMCP_RELAY_CONFIG;function o(e){return n.get(e)??a?.[e]??null}let s=o(`hostOrigin`);if(!s)return null;let c=o(`hostUrl`)||s,l=o(`hostTitle`)||``,u=o(`tabId`)||i(),d=o(`relayHost`)||`127.0.0.1`,f=o(`relayPort`),p=f&&f.length>0?Number(f):t,m=o(`autoConnect`)!==`false`,h=o(`relayId`)||void 0,g=o(`relayWorkspace`)||void 0,_=o(`requestTimeout`),v=_&&_.length>0?Number(_):6e4;return r(d)?!Number.isInteger(p)||p<1||p>65535?(console.error(`[webmcp-relay-widget] relayPort must be an integer between 1 and 65535, got:`,f),null):!Number.isInteger(v)||v<1?(console.error(`[webmcp-relay-widget] requestTimeout must be a positive integer (ms), got:`,_),null):{autoConnect:m,hostOrigin:s,hostTitle:l,hostUrl:c,relayHostHint:d,relayPortHint:p,...h?{relayId:h}:{},...g?{relayWorkspace:g}:{},requestTimeoutMs:v,tabId:u}:(console.error(`[webmcp-relay-widget] relayHost must be a loopback address, got:`,d),null)}function u(e){return!n(e)||typeof e.requestId!=`string`||typeof e.type!=`string`?null:{requestId:e.requestId,type:e.type,tools:e.tools,result:e.result,error:e.error}}function d(){let e=l();if(!e){console.warn(`[webmcp-relay-widget] Missing required hostOrigin parameter. Widget will not start.`);return}b(e)}function f(e){return!n(e)||e.type!==`server-hello`||e.service!==`webmcp-local-relay`||e.version!==1||typeof e.host!=`string`||typeof e.instanceId!=`string`||typeof e.port!=`number`?null:{type:`server-hello`,service:`webmcp-local-relay`,version:1,host:e.host,instanceId:e.instanceId,port:e.port,...typeof e.label==`string`?{label:e.label}:{},...typeof e.relayId==`string`?{relayId:e.relayId}:{},...typeof e.workspace==`string`?{workspace:e.workspace}:{}}}function p(e){return!n(e)||e.type!==`hello/rejected`||typeof e.message!=`string`||typeof e.reason!=`string`?null:{type:`hello/rejected`,message:e.message,reason:e.reason}}function m(e){return s({hostOrigin:e.hostOrigin,...e.relayId?{relayId:e.relayId}:{},...e.relayWorkspace?{workspace:e.relayWorkspace}:{}})}function h(e){if(typeof sessionStorage>`u`)return null;try{let t=sessionStorage.getItem(m(e));if(!t)return null;let n=JSON.parse(t);return typeof n.host!=`string`||n.host.length===0||typeof n.port!=`number`||!Number.isInteger(n.port)||n.port<1||n.port>65535?null:{host:n.host,port:n.port}}catch{return null}}function g(e,t){if(!(typeof sessionStorage>`u`))try{sessionStorage.setItem(m(e),JSON.stringify({host:t.host,port:t.port}))}catch{}}function _(e){if(!(typeof sessionStorage>`u`))try{sessionStorage.removeItem(m(e))}catch{}}function v(e){let n=h(e),r=new Set,i=[],a=(e,t)=>{if(!Number.isInteger(t)||t<1||t>65535)return;let n=`${e}:${String(t)}`;r.has(n)||(r.add(n),i.push({host:e,port:t}))};e.relayPortHint!==void 0&&a(e.relayHostHint,e.relayPortHint),n&&a(n.host,n.port);for(let e of[`127.0.0.1`,`[::1]`])for(let n=t;n<=9348;n+=1)a(e,n);return i}async function y(e){let t=`ws://${e.host.includes(`:`)&&!e.host.startsWith(`[`)?`[${e.host}]`:e.host}:${String(e.port)}`;return new Promise(n=>{let r=!1,i=new WebSocket(t,[`webmcp-discovery.v1`,`webmcp.v1`]),a=e=>{if(!r){if(r=!0,clearTimeout(l),i.removeEventListener(`close`,s),i.removeEventListener(`error`,o),i.removeEventListener(`message`,c),e===null)try{i.close()}catch{}n(e)}},o=()=>{a(null)},s=()=>{a(null)},c=t=>{let n;try{n=JSON.parse(String(t.data))}catch{return}let r=f(n);r&&a({endpoint:{hello:r,host:e.host,port:e.port},socket:i})},l=setTimeout(()=>{a(null)},1200);i.addEventListener(`close`,s,{once:!0}),i.addEventListener(`error`,o,{once:!0}),i.addEventListener(`message`,c)})}function b(e){let t=new Map,r=null,s=null,l=!1,d=null,m=null,b=`idle`,x=0,S=null,C=e=>{for(let[n,r]of t)clearTimeout(r.timeoutId),t.delete(n),r.reject(Error(e))};function w(n,r){let a=i();return new Promise((i,o)=>{let s=setTimeout(()=>{t.delete(a),o(Error(`Host response timeout: ${n}`))},e.requestTimeoutMs);t.set(a,{resolve:i,reject:o,timeoutId:s,responseType:`${n}.response`,errorType:`${n}.error`}),window.parent.postMessage({type:`${n}.request`,requestId:a,...r},e.hostOrigin)})}let T=(t,i)=>{let c=[],u=()=>{d&&(clearTimeout(d),d=null)},h=()=>{o(t,JSON.stringify({type:`tools/list`,tools:c}))};m&&(clearTimeout(m),m=null),r=i,s=t,x=0,l=!1,b=`idle`,t.addEventListener(`message`,s=>{let c;try{c=JSON.parse(String(s.data))}catch(e){console.warn(`[webmcp-relay-widget] Failed to parse relay message:`,e);return}let d=f(c);if(d){r={hello:d,host:i.host,port:i.port};return}if(n(c)&&c.type===`hello/accepted`){u(),l=!0,g(e,i),h();return}let m=p(c);if(m){u(),l=!1,_(e),window.parent.postMessage({type:`webmcp.relay.rejected`,host:i.host,port:i.port,message:m.message,reason:m.reason},e.hostOrigin),console.error(`[webmcp-relay-widget] Relay rejected browser hello:`,m.reason,m.message);try{t.close(1008,m.message)}catch{}return}if(!n(c)||typeof c.type!=`string`)return;let v=c;if(v.type===`ping`){o(t,JSON.stringify({type:`pong`}));return}if(v.type===`reload`){window.parent.postMessage({type:`webmcp.reload`},e.hostOrigin);return}if(v.type!==`invoke`){console.debug(`[webmcp-relay-widget] Ignoring unrecognized message type:`,a(v.type));return}w(`webmcp.tools.invoke`,{toolName:v.toolName,args:n(v.args)?v.args:{}}).then(e=>{o(t,JSON.stringify({type:`result`,callId:v.callId,result:e.result}))}).catch(e=>{o(t,JSON.stringify({type:`result`,callId:v.callId,result:{isError:!0,content:[{type:`text`,text:String(e instanceof Error?e.message:e)}]}}))})}),t.addEventListener(`close`,()=>{s===t&&(l=!1,s=null,u(),C(`WebSocket connection lost`),O())},{once:!0}),t.addEventListener(`error`,e=>{console.warn(`[webmcp-relay-widget] WebSocket error:`,e);try{t.close()}catch(e){console.warn(`[webmcp-relay-widget] Error closing socket after error:`,e)}}),w(`webmcp.tools.list`,{}).then(n=>{c=Array.isArray(n.tools)?n.tools:[],o(t,JSON.stringify({type:`hello`,tabId:e.tabId,origin:e.hostOrigin,title:e.hostTitle||document.referrer||`Unknown page`,url:e.hostUrl})),d=setTimeout(()=>{d=null,!(s!==t||t.readyState!==WebSocket.OPEN||l)&&(console.warn(`[webmcp-relay-widget] Relay did not acknowledge browser hello`),t.close(4e3,`Browser hello was not acknowledged`))},1e3)}).catch(e=>{console.warn(`[webmcp-relay-widget] Hello handshake failed:`,e);try{t.close()}catch{}})},E=async t=>{let n=await y({host:t.host,port:t.port});if(!n)return!1;let r=n.endpoint;return e.relayId&&r.hello.relayId!==e.relayId||e.relayWorkspace&&r.hello.workspace!==e.relayWorkspace?(n.socket.close(),!1):(T(n.socket,r),!0)},D=async()=>{b=`discovering`;try{for(let t of v(e))if(await E(t))return!0;return!1}finally{b===`discovering`&&(b=`idle`)}},O=()=>{if(!r||m)return;let e={host:r.host,port:r.port},t=Math.round(500*(.85+Math.random()*.3));m=setTimeout(()=>{m=null,E(e).then(e=>{e||k()})},t)},k=()=>{if(m)return;let e=c[x];if(e===void 0){M();return}m=setTimeout(()=>{m=null,D().then(e=>{e||(x+=1,k())})},e)},A=()=>{document.visibilityState===`visible`&&b===`dormant`&&P()},j=()=>{document.removeEventListener(`visibilitychange`,A),S!==null&&(clearInterval(S),S=null)},M=()=>{b!==`dormant`&&(b=`dormant`,m&&(clearTimeout(m),m=null),document.addEventListener(`visibilitychange`,A),S=setInterval(()=>{N()},12e4))},N=async()=>{if(b!==`dormant`)return;let t=new Set,n=[],r=(e,r)=>{let i=`${e}:${String(r)}`;t.has(i)||(t.add(i),n.push({host:e,port:r}))};e.relayPortHint!==void 0&&r(e.relayHostHint,e.relayPortHint);let i=h(e);if(i&&r(i.host,i.port),n.length!==0){b=`discovering`,j();for(let e of n)if(await E(e)){x=0;return}M()}},P=()=>{j(),x=0,D().then(e=>{e||M()})};window.addEventListener(`message`,r=>{if(r.source!==window.parent||r.origin!==e.hostOrigin)return;let i=r.data;if(n(i)&&i.type===`webmcp.tools.changed`){s&&l&&o(s,JSON.stringify({type:`tools/changed`,tools:Array.isArray(i.tools)?i.tools:[]}));return}if(n(i)&&i.type===`webmcp.connect`){b===`dormant`?P():!s&&b!==`discovering`&&D();return}let a=u(i);if(!a)return;let c=t.get(a.requestId);if(c){if(a.type===c.responseType){clearTimeout(c.timeoutId),t.delete(a.requestId),c.resolve(a);return}a.type===c.errorType&&(clearTimeout(c.timeoutId),t.delete(a.requestId),c.reject(Error(String(a.error||`Unknown host error`))))}}),e.autoConnect&&D().then(e=>{e||k()})}d()})();

package/eventcatalog/src/features/tools/catalog-tools.ts

@@ -49,7 +49,9 @@ const stripLikeC4Comments = (content: string) => content.replace(/\/\*[\s\S]*?\*
 const parseLikeC4Views = (content: string, filePath: string): LikeC4View[] => {
   const contentWithoutComments = stripLikeC4Comments(content);
   const viewDeclarationPattern =
-    /\b(?:(dynamic|deployment)\s+)?view(?:\s+([A-Za-z_][\w.-]*))?(?:\s+of\s+[A-Za-z_][\w.-]*(?:\.[A-Za-z_][\w.-]*)*)?\s*\{/g;
+    // `of` names an element, dotted or not (`[\w.-]*` takes the dots: a separate group for each dotted part made the
+    // pattern backtrack heavily on a long dotted name without its `{`)
+    /\b(?:(dynamic|deployment)\s+)?view(?:\s+([A-Za-z_][\w.-]*))?(?:\s+of\s+[A-Za-z_][\w.-]*)?\s*\{/g;
   const views: LikeC4View[] = [];
   let match: RegExpExecArray | null;
 

package/eventcatalog/src/layouts/BaseLayout.astro

@@ -6,12 +6,12 @@ import NavigationProgress from '../components/NavigationProgress.astro';
 import config from '@config';
 
 interface Props {
-  title: string;
+  /** The page's own title; the catalog's title follows it (the homepage has none) */
+  title?: string;
   description?: string;
-  ogTitle?: string;
 }
 
-const { title, description, ogTitle } = Astro.props;
+const { title, description } = Astro.props;
 const catalogTheme = config.theme || 'default';
 ---
 
@@ -50,7 +50,7 @@ const catalogTheme = config.theme || 'default';
         document.addEventListener('astro:page-load', applyTheme);
       })();
     </script>
-    <SEO title={title} description={description} ogTitle={ogTitle} />
+    <SEO title={title} description={description} />
     <AnalyticsHead />
     <slot name="head" />
   </head>

package/eventcatalog/src/layouts/SettingsLayout.astro

@@ -1,7 +1,7 @@
 ---
 import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
 import { buildUrl } from '@utils/url-builder';
-import { Settings, Server, Bot, FileText, BadgeCheck } from 'lucide-react';
+import { Settings, Server, Bot, ScanText, BadgeCheck } from 'lucide-react';
 
 export type SettingsSection = 'general' | 'mcp' | 'assistant' | 'llm-access' | 'license';
 
@@ -55,7 +55,7 @@ const groups: SectionGroup[] = [
         id: 'llm-access',
         label: 'LLM Access',
         href: buildUrl('/settings/llm-access'),
-        icon: FileText,
+        icon: ScanText,
       },
     ],
   },

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -1,6 +1,7 @@
 ---
 interface Props {
-  title: string;
+  /** The page's own title; the catalog's title follows it (the homepage has none) */
+  title?: string;
   sidebar?: boolean;
   description?: string;
   showNestedSideBar?: boolean;
@@ -430,7 +431,7 @@ const { title, description, showNestedSideBar = true, showHeader = true, reduced
 const verticalNavAutoCollapsePaths = [buildUrl('/discover', true), buildUrl('/docs', true)];
 ---
 
-<BaseLayout title={`EventCatalog | ${title}`} description={description} ogTitle={title}>
+<BaseLayout title={title} description={description}>
   <Fragment slot="head">
     <script is:inline define:vars={{ verticalNavAutoCollapsePaths }}>
       (() => {

package/eventcatalog/src/pages/_index.astro

@@ -1,358 +1,21 @@
 ---
-import { buildUrl } from '@utils/url-builder';
-import config from '@config';
-
-import { getCollection } from 'astro:content';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { BookOpenText, Workflow, TableProperties, BookUser, Code2, FileJson, ArrowUpRight, ArrowRight, Plus } from 'lucide-react';
+import CatalogDashboard from '@components/Homepage/CatalogDashboard.astro';
 
 const { showNestedSideBar = true } = Astro.props;
-
-// Lightweight data fetch: only raw collections, no hydration.
-const [allDomains, allServices, allEvents, allCommands, allQueries, allFlows] = await Promise.all([
-  getCollection('domains'),
-  getCollection('services'),
-  getCollection('events'),
-  getCollection('commands'),
-  getCollection('queries'),
-  getCollection('flows'),
-]);
-
-const isCurrentVersion = (item: { data: { hidden?: boolean }; filePath?: string }) =>
-  item.data.hidden !== true && !item.filePath?.includes('versioned');
-
-const domains = allDomains.filter(isCurrentVersion);
-const services = allServices.filter(isCurrentVersion);
-const events = allEvents.filter(isCurrentVersion);
-const commands = allCommands.filter(isCurrentVersion);
-const queries = allQueries.filter(isCurrentVersion);
-const messages = [...events, ...commands, ...queries];
-const flows = allFlows.filter(isCurrentVersion);
-
-const getDefaultUrl = (route: string, defaultValue: string) => {
-  if (domains.length > 0) return buildUrl(`/${route}/domains/${domains[0].data.id}/${domains[0].data.version}`);
-  if (services.length > 0) return buildUrl(`/${route}/services/${services[0].data.id}/${services[0].data.version}`);
-  if (flows.length > 0) return buildUrl(`/${route}/flows/${flows[0].data.id}/${flows[0].data.version}`);
-  return buildUrl(defaultValue);
-};
-
-interface StatTile {
-  label: string;
-  count: number;
-  href: string;
-  emptyHref: string;
-  tone: string; // CSS color expression — drives accent rail + count gradient
-}
-
-const statTiles: StatTile[] = [
-  {
-    label: 'Domains',
-    count: domains.length,
-    href: buildUrl('/discover/domains'),
-    emptyHref: 'https://www.eventcatalog.dev/docs/domains',
-    tone: '250 204 21', // amber-400
-  },
-  {
-    label: 'Services',
-    count: services.length,
-    href: buildUrl('/discover/services'),
-    emptyHref: 'https://www.eventcatalog.dev/docs/services',
-    tone: '244 114 182', // pink-400
-  },
-  {
-    label: 'Messages',
-    count: messages.length,
-    href: buildUrl('/discover/events'),
-    emptyHref: 'https://www.eventcatalog.dev/docs/messages',
-    tone: '167 139 250', // violet-400
-  },
-  {
-    label: 'Flows',
-    count: flows.length,
-    href: buildUrl('/discover/flows'),
-    emptyHref: 'https://www.eventcatalog.dev/docs/flows',
-    tone: '94 234 212', // teal-300
-  },
-];
-
-interface ExploreCard {
-  title: string;
-  description: string;
-  icon: any;
-  href: string;
-  external?: boolean;
-  /** When true, renders as the lead "feature" card with extra width and CTA styling. */
-  feature?: boolean;
-  tone: string; // RGB triple for the icon tile
-}
-
-const exploreCards: ExploreCard[] = [
-  {
-    title: 'Documentation',
-    description: 'Browse every domain, service, message, and flow your teams have published.',
-    icon: BookOpenText,
-    href: getDefaultUrl('docs', 'domains'),
-    feature: true,
-    tone: '96 165 250', // blue-400
-  },
-  {
-    title: 'Visualizer',
-    description: 'See how services connect — message flows across your architecture.',
-    icon: Workflow,
-    href: getDefaultUrl('visualiser', 'domains'),
-    tone: '167 139 250', // violet-400
-  },
-  {
-    title: 'Discover',
-    description: 'Search every event, service, agent, and team across the catalog.',
-    icon: TableProperties,
-    href: buildUrl('/discover/events'),
-    tone: '94 234 212', // teal-300
-  },
-  {
-    title: 'Schema Explorer',
-    description: 'Track schema evolution, compare versions, and catch breaking changes.',
-    icon: FileJson,
-    href: buildUrl('/schemas/explorer'),
-    tone: '250 204 21', // amber-400
-  },
-  {
-    title: 'Team Directory',
-    description: 'Find owners, on-call contacts, and the team behind every service.',
-    icon: BookUser,
-    href: buildUrl('/directory/users'),
-    tone: '251 146 60', // orange-400
-  },
-  {
-    title: 'API & SDK',
-    description: 'Programmatic access — query and manage your catalog with a typed SDK.',
-    icon: Code2,
-    href: 'https://www.eventcatalog.dev/docs/sdk',
-    external: true,
-    tone: '129 140 248', // indigo-400
-  },
-];
 ---
 
-<VerticalSideBarLayout title="EventCatalog" showNestedSideBar={showNestedSideBar}>
-  <div class="ec-home min-h-screen">
-    <!-- Hero -->
-    <header class="ec-hero">
-      <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-accent))]">Catalog</div>
-      <div class="mt-3 flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
-        <div>
-          <h1 class="text-[28px] font-semibold leading-[1.1] tracking-tight text-[rgb(var(--ec-page-text))] md:text-[32px]">
-            {config?.organizationName || 'EventCatalog'}
-          </h1>
-          <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
-            {config.tagline || 'Explore and understand your event-driven architecture.'}
-          </p>
-        </div>
-        <div class="flex items-center gap-2">
-          <a
-            href={getDefaultUrl('docs', 'domains')}
-            class="ec-btn-primary inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-bg))] border border-[rgb(var(--ec-page-border))] px-3.5 py-2 text-[12.5px] font-semibold text-[rgb(var(--ec-page-text-muted))] transition-colors hover:border-[rgb(var(--ec-accent)/0.5)] hover:text-[rgb(var(--ec-accent))]"
-          >
-            Explore Catalog
-            <ArrowRight className="h-3.5 w-3.5" />
-          </a>
-        </div>
-      </div>
-    </header>
-
-    <div class="ec-divider"></div>
-
-    <!-- Stat strip -->
-    <section class="ec-stats">
-      {
-        statTiles.map((tile) => (
-          <a
-            href={tile.count > 0 ? tile.href : tile.emptyHref}
-            target={tile.count === 0 ? '_blank' : undefined}
-            rel={tile.count === 0 ? 'noreferrer' : undefined}
-            class="ec-stat group"
-            style={`--tone: ${tile.tone};`}
-          >
-            <div class="flex items-baseline justify-between gap-2">
-              <span class="text-[11px] font-medium uppercase tracking-[0.14em] text-[rgb(var(--tone))]">{tile.label}</span>
-              {tile.count > 0 ? (
-                <ArrowUpRight className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))] transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-[rgb(var(--ec-accent))]" />
-              ) : (
-                <Plus className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))] transition-colors group-hover:text-[rgb(var(--ec-accent))]" />
-              )}
-            </div>
-            <div class="mt-3 flex items-baseline gap-2">
-              <span class="font-mono text-[34px] font-semibold leading-none tracking-tight text-[rgb(var(--ec-page-text))]">
-                {tile.count}
-              </span>
-              {tile.count === 0 && <span class="text-[12px] text-[rgb(var(--ec-page-text-muted))]">— add some</span>}
-            </div>
-          </a>
-        ))
-      }
-    </section>
-
-    <!-- Eyebrow + Explore grid -->
-    <section class="mt-12">
-      <div class="ec-section-eyebrow">
-        <span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-accent))]">Explore</span>
-        <span class="ec-section-rule"></span>
-        <span class="font-mono text-[11px] text-[rgb(var(--ec-page-text-muted)/0.7)]">{exploreCards.length} sections</span>
-      </div>
-
-      <div class="ec-explore-grid mt-4">
-        {
-          exploreCards.map((card) => (
-            <a
-              href={card.href}
-              target={card.external ? '_blank' : undefined}
-              rel={card.external ? 'noreferrer' : undefined}
-              class:list={['ec-card group', card.feature ? 'ec-card--feature' : '']}
-              style={`--tone: ${card.tone};`}
-            >
-              <div class="flex items-start justify-between gap-3">
-                <div class="ec-card-icon">
-                  <card.icon className="h-4 w-4" />
-                </div>
-                <ArrowUpRight className="h-3.5 w-3.5 text-[rgb(var(--ec-page-text-muted))] transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-[rgb(var(--ec-accent))]" />
-              </div>
-              <h3 class="mt-4 text-[15px] font-semibold tracking-tight text-[rgb(var(--ec-page-text))]">{card.title}</h3>
-              <p class="mt-1.5 text-[13px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]">{card.description}</p>
-            </a>
-          ))
-        }
-      </div>
-    </section>
+<VerticalSideBarLayout showNestedSideBar={showNestedSideBar}>
+  <div class="ec-home">
+    <CatalogDashboard />
   </div>
 </VerticalSideBarLayout>
 
 <style is:global>
   .ec-home {
-    /* Negate the layout wrapper's horizontal padding so the homepage controls its own. */
+    /* The layout pads its content: the homepage sets its own, wider spacing */
     margin-left: calc(var(--ec-app-content-padding-left, 5rem) * -1);
     margin-right: calc(var(--ec-app-content-padding-right, 5rem) * -1);
     padding: 2rem 2rem 0;
   }
-  .ec-hero {
-    padding-bottom: 1.5rem;
-  }
-  .ec-divider {
-    height: 1px;
-    background: linear-gradient(
-      to right,
-      transparent,
-      rgb(var(--ec-page-border)) 12%,
-      rgb(var(--ec-page-border)) 88%,
-      transparent
-    );
-    margin: 0.25rem 0 1.5rem;
-  }
-  .ec-stats {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0.75rem;
-  }
-  @media (min-width: 768px) {
-    .ec-stats {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-  }
-  .ec-stat {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    border: 1px solid rgb(var(--ec-page-border));
-    border-radius: 0.75rem;
-    background:
-      radial-gradient(80% 100% at 0% 0%, rgb(var(--tone) / 0.05), transparent 60%), rgb(var(--ec-card-bg, var(--ec-page-bg)));
-    padding: 1rem 1.1rem 1.1rem;
-    transition:
-      border-color 200ms,
-      transform 200ms,
-      box-shadow 200ms;
-    text-decoration: none;
-  }
-  .ec-stat:hover {
-    border-color: rgb(var(--ec-accent) / 0.5);
-    transform: translateY(-1px);
-  }
-
-  .ec-section-eyebrow {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-  .ec-section-rule {
-    flex: 1;
-    height: 1px;
-    background: linear-gradient(to right, rgb(var(--ec-accent) / 0.4), rgb(var(--ec-page-border)) 30%);
-  }
-
-  /* Explore grid: bordered cells with breathing room between them. */
-  .ec-explore-grid {
-    display: grid;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    gap: 1rem;
-  }
-  @media (min-width: 640px) {
-    .ec-explore-grid {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  @media (min-width: 1024px) {
-    .ec-explore-grid {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-
-  .ec-card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    padding: 1.5rem 1.5rem 1.4rem;
-    text-decoration: none;
-    border: 1px solid rgb(var(--ec-page-border));
-    border-radius: 0.875rem;
-    background: rgb(var(--ec-card-bg, var(--ec-page-bg)));
-    transition:
-      background 200ms,
-      border-color 200ms;
-    min-height: 9.5rem;
-  }
-  .ec-card:hover {
-    background: rgb(var(--ec-page-bg) / 0.4);
-    border-color: rgb(var(--ec-accent) / 0.5);
-  }
-
-  .ec-card--feature {
-    background:
-      radial-gradient(60% 90% at 0% 0%, rgb(var(--tone) / 0.07), transparent 60%), rgb(var(--ec-card-bg, var(--ec-page-bg)));
-  }
-  .ec-card--feature:hover {
-    background: radial-gradient(60% 90% at 0% 0%, rgb(var(--ec-accent) / 0.12), transparent 60%), rgb(var(--ec-page-bg) / 0.4);
-  }
-
-  .ec-card-icon {
-    display: inline-flex;
-    height: 2.25rem;
-    width: 2.25rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.5rem;
-    background: rgb(var(--tone) / 0.12);
-    color: rgb(var(--tone));
-    transition:
-      background 200ms,
-      color 200ms;
-  }
-  .ec-card:hover .ec-card-icon {
-    background: rgb(var(--ec-accent) / 0.2);
-    color: rgb(var(--ec-accent));
-  }
-  .ec-card--feature .ec-card-icon {
-    height: 2.5rem;
-    width: 2.5rem;
-    border-radius: 0.625rem;
-  }
 </style>

package/eventcatalog/src/pages/architecture/[type]/[id]/[version]/_index.data.spec.ts

@@ -68,10 +68,9 @@ describe('architecture page redirects', () => {
   it('returns not found for resources without an architecture page', async () => {
     mocks.isSSR.mockReturnValue(true);
 
+    // Nothing found: the page answers with the 404 page
     await expect(
       Page.getData({ params: { type: 'events', id: 'order-created', version: '1.0.0' }, props: {} } as any)
-    ).rejects.toMatchObject({
-      status: 404,
-    });
+    ).resolves.toBeUndefined();
   });
 });

package/eventcatalog/src/pages/architecture/[type]/[id]/[version]/_index.data.ts

@@ -61,11 +61,4 @@ export class Page extends HybridPage {
 
     return { type, data: { id, name: match.item.data.name, version }, redirectPath: match.redirectPath };
   }
-
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Documentation not found',
-    });
-  }
 }

package/eventcatalog/src/pages/architecture/[type]/[id]/[version]/index.astro

@@ -9,7 +9,9 @@ import { Page } from './_index.data';
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-const { data, redirectPath } = await Page.getData(Astro);
+const pageData = await Page.getData(Astro);
+if (!pageData) return Astro.rewrite('/404');
+const { data, redirectPath } = pageData;
 const redirectUrl = buildUrl(redirectPath);
 
 if (isSSR()) {

package/eventcatalog/src/pages/diagrams/[id]/[version]/_index.data.ts

@@ -47,11 +47,4 @@ export class Page extends HybridPage {
       allVersions,
     };
   }
-
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Diagram not found',
-    });
-  }
 }

package/eventcatalog/src/pages/diagrams/[id]/[version]/embed.astro

@@ -10,6 +10,7 @@ export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
 const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 const { Content } = await render(props);
 
 const currentVersion = props.data.version;

package/eventcatalog/src/pages/diagrams/[id]/[version]/index.astro

@@ -15,6 +15,7 @@ export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
 const props = await Page.getData(Astro);
+if (!props) return Astro.rewrite('/404');
 const { Content, headings } = await render(props);
 
 const pageTitle = `Diagram | ${props.data.name}`;

package/eventcatalog/src/pages/directory/[type]/_index.data.ts

@@ -45,6 +45,11 @@ export class Page extends HybridPage {
       teams: getTeams,
     };
 
+    // An unknown type (e.g. a mistyped URL) has no directory page
+    if (!Object.hasOwn(loaders, type)) {
+      return null;
+    }
+
     // Get all items of the specified type
     const items = await loaders[type as keyof typeof loaders]();
 
@@ -53,11 +58,4 @@ export class Page extends HybridPage {
       data: items,
     };
   }
-
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Directory type not found',
-    });
-  }
 }

package/eventcatalog/src/pages/directory/[type]/index.astro

@@ -7,7 +7,9 @@ import { Page } from './_index.data';
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-const { type, data } = await Page.getData(Astro);
+const pageData = await Page.getData(Astro);
+if (!pageData) return Astro.rewrite('/404');
+const { type, data } = pageData;
 
 function mapToItem(i: any) {
   return {

package/eventcatalog/src/pages/discover/[type]/_index.data.ts

@@ -81,6 +81,11 @@ export class Page extends HybridPage {
       'data-products': getDataProducts,
     };
 
+    // An unknown type (e.g. a mistyped URL) has no discover page
+    if (!Object.hasOwn(loaders, type)) {
+      return null;
+    }
+
     // @ts-ignore
     const items = await loaders[type]();
 
@@ -89,11 +94,4 @@ export class Page extends HybridPage {
       data: items,
     };
   }
-
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Collection type not found',
-    });
-  }
 }

package/eventcatalog/src/pages/discover/[type]/index.astro

@@ -27,7 +27,9 @@ import { Page } from './_index.data';
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-const { type, data } = await Page.getData(Astro);
+const pageData = await Page.getData(Astro);
+if (!pageData) return Astro.rewrite('/404');
+const { type, data } = pageData;
 
 const events = await getEvents();
 const queries = await getQueries();