@eventcatalog/core 4.12.2 → 5.0.0-beta.0

package/dist/runtime-dependencies/@modelcontextprotocol__ext-apps__react.mjs

@@ -0,0 +1,3 @@
+export * from "@modelcontextprotocol/ext-apps/react";
+import * as dependency from "@modelcontextprotocol/ext-apps/react";
+export default dependency.default;

package/dist/runtime-dependencies/@modelcontextprotocol__ext-apps__server.mjs

@@ -0,0 +1,3 @@
+export * from "@modelcontextprotocol/ext-apps/server";
+import * as dependency from "@modelcontextprotocol/ext-apps/server";
+export default dependency.default;

package/dist/runtime-dependencies/@modelcontextprotocol__sdk__types.js.mjs

@@ -0,0 +1,3 @@
+export * from "@modelcontextprotocol/sdk/types.js";
+import * as dependency from "@modelcontextprotocol/sdk/types.js";
+export default dependency.default;

package/dist/runtime-dependencies/manifest.json

@@ -20,6 +20,7 @@
   "@eventcatalog/linter": "@eventcatalog__linter.mjs",
   "@eventcatalog/sdk": "@eventcatalog__sdk.mjs",
   "@eventcatalog/visualiser": "@eventcatalog__visualiser.mjs",
+  "@eventcatalog/visualiser/layout": "@eventcatalog__visualiser__layout.mjs",
   "@eventcatalog/visualiser/styles-core.css": "@eventcatalog__visualiser__styles-core.css.mjs",
   "@fontsource/inter": "@fontsource__inter.mjs",
   "@fontsource/inter/400.css": "@fontsource__inter__400.css.mjs",
@@ -36,9 +37,13 @@
   "@iconify-json/logos": "@iconify-json__logos.mjs",
   "@mermaid-js/layout-elk": "@mermaid-js__layout-elk.mjs",
   "@mermaid-js/layout-elk/dist/mermaid-layout-elk.core.mjs": "@mermaid-js__layout-elk__dist__mermaid-layout-elk.core.mjs.mjs",
+  "@modelcontextprotocol/ext-apps": "@modelcontextprotocol__ext-apps.mjs",
+  "@modelcontextprotocol/ext-apps/react": "@modelcontextprotocol__ext-apps__react.mjs",
+  "@modelcontextprotocol/ext-apps/server": "@modelcontextprotocol__ext-apps__server.mjs",
   "@modelcontextprotocol/sdk": "@modelcontextprotocol__sdk.mjs",
   "@modelcontextprotocol/sdk/server/mcp.js": "@modelcontextprotocol__sdk__server__mcp.js.mjs",
   "@modelcontextprotocol/sdk/server/webStandardStreamableHttp.js": "@modelcontextprotocol__sdk__server__webStandardStreamableHttp.js.mjs",
+  "@modelcontextprotocol/sdk/types.js": "@modelcontextprotocol__sdk__types.js.mjs",
   "@nanostores/react": "@nanostores__react.mjs",
   "@parcel/watcher": "@parcel__watcher.mjs",
   "@radix-ui/react-context-menu": "@radix-ui__react-context-menu.mjs",
@@ -72,7 +77,6 @@
   "d3-force": "d3-force.mjs",
   "d3-selection": "d3-selection.mjs",
   "d3-zoom": "d3-zoom.mjs",
-  "dagre": "dagre.mjs",
   "diff": "diff.mjs",
   "diff2html": "diff2html.mjs",
   "diff2html/bundles/css/diff2html.min.css": "diff2html__bundles__css__diff2html.min.css.mjs",
@@ -107,6 +111,13 @@
   "react-syntax-highlighter": "react-syntax-highlighter.mjs",
   "react-syntax-highlighter/dist/cjs/styles/prism": "react-syntax-highlighter__dist__cjs__styles__prism.mjs",
   "react-syntax-highlighter/dist/cjs/styles/prism/index.js": "react-syntax-highlighter__dist__cjs__styles__prism__index.js.mjs",
+  "react-syntax-highlighter/dist/esm/languages/prism/graphql": "react-syntax-highlighter__dist__esm__languages__prism__graphql.mjs",
+  "react-syntax-highlighter/dist/esm/languages/prism/json": "react-syntax-highlighter__dist__esm__languages__prism__json.mjs",
+  "react-syntax-highlighter/dist/esm/languages/prism/markup": "react-syntax-highlighter__dist__esm__languages__prism__markup.mjs",
+  "react-syntax-highlighter/dist/esm/languages/prism/protobuf": "react-syntax-highlighter__dist__esm__languages__prism__protobuf.mjs",
+  "react-syntax-highlighter/dist/esm/languages/prism/yaml": "react-syntax-highlighter__dist__esm__languages__prism__yaml.mjs",
+  "react-syntax-highlighter/dist/esm/styles/prism/one-dark": "react-syntax-highlighter__dist__esm__styles__prism__one-dark.mjs",
+  "react-syntax-highlighter/dist/esm/styles/prism/one-light": "react-syntax-highlighter__dist__esm__styles__prism__one-light.mjs",
   "react/jsx-dev-runtime": "react__jsx-dev-runtime.mjs",
   "react/jsx-runtime": "react__jsx-runtime.mjs",
   "recast": "recast.mjs",

package/dist/runtime-dependencies/react-syntax-highlighter__dist__esm__languages__prism__graphql.mjs

@@ -0,0 +1,3 @@
+export * from "react-syntax-highlighter/dist/esm/languages/prism/graphql";
+import * as dependency from "react-syntax-highlighter/dist/esm/languages/prism/graphql";
+export default dependency.default;

package/dist/runtime-dependencies/react-syntax-highlighter__dist__esm__languages__prism__json.mjs

@@ -0,0 +1,3 @@
+export * from "react-syntax-highlighter/dist/esm/languages/prism/json";
+import * as dependency from "react-syntax-highlighter/dist/esm/languages/prism/json";
+export default dependency.default;

package/dist/runtime-dependencies/react-syntax-highlighter__dist__esm__languages__prism__markup.mjs

@@ -0,0 +1,3 @@
+export * from "react-syntax-highlighter/dist/esm/languages/prism/markup";
+import * as dependency from "react-syntax-highlighter/dist/esm/languages/prism/markup";
+export default dependency.default;

package/dist/runtime-dependencies/react-syntax-highlighter__dist__esm__languages__prism__protobuf.mjs

@@ -0,0 +1,3 @@
+export * from "react-syntax-highlighter/dist/esm/languages/prism/protobuf";
+import * as dependency from "react-syntax-highlighter/dist/esm/languages/prism/protobuf";
+export default dependency.default;

package/dist/runtime-dependencies/react-syntax-highlighter__dist__esm__languages__prism__yaml.mjs

@@ -0,0 +1,3 @@
+export * from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
+import * as dependency from "react-syntax-highlighter/dist/esm/languages/prism/yaml";
+export default dependency.default;

package/dist/runtime-dependencies/react-syntax-highlighter__dist__esm__styles__prism__one-dark.mjs

@@ -0,0 +1,3 @@
+export * from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
+import * as dependency from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
+export default dependency.default;

package/dist/runtime-dependencies/react-syntax-highlighter__dist__esm__styles__prism__one-light.mjs

@@ -0,0 +1,3 @@
+export * from "react-syntax-highlighter/dist/esm/styles/prism/one-light";
+import * as dependency from "react-syntax-highlighter/dist/esm/styles/prism/one-light";
+export default dependency.default;

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.12.2";
+var version = "5.0.0-beta.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-RPVA2SZY.js";
-import "../chunk-WK4J6FP3.js";
+} from "../chunk-ZHKEARLJ.js";
+import "../chunk-TWN43V4T.js";
 export {
   logger
 };

package/dist/utils/license-status.cjs

@@ -0,0 +1,240 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/license-status.ts
+var license_status_exports = {};
+__export(license_status_exports, {
+  getLicenseAnalytics: () => getLicenseAnalytics,
+  getLicenseStatus: () => getLicenseStatus2,
+  getLicenseStatusMessage: () => getLicenseStatusMessage,
+  printLicenseStatus: () => printLicenseStatus
+});
+module.exports = __toCommonJS(license_status_exports);
+var import_boxen = __toESM(require("boxen"), 1);
+var import_license2 = require("@eventcatalog/license");
+
+// eventcatalog/src/utils/trial.ts
+var TRIAL_LENGTH_DAYS = 90;
+var LICENSE_FAQ_URL = "https://www.eventcatalog.dev/license-faq";
+var LICENSE_RENEW_URL = "https://eventcatalog.cloud";
+var DAY_IN_MS = 24 * 60 * 60 * 1e3;
+var getTrialStatus = (tsd, now = Date.now()) => {
+  if (typeof tsd !== "number" || !Number.isFinite(tsd) || tsd <= 0) return;
+  const endsAt = tsd + TRIAL_LENGTH_DAYS * DAY_IN_MS;
+  const daysLeft = Math.max(0, Math.ceil((endsAt - now) / DAY_IN_MS));
+  return { daysLeft, ended: daysLeft === 0, endsAt: new Date(endsAt) };
+};
+var LICENSE_REMINDER_DAYS = 30;
+
+// eventcatalog/src/utils/license.ts
+var import_node_fs = __toESM(require("fs"), 1);
+var import_node_path = __toESM(require("path"), 1);
+var import_license = require("@eventcatalog/license");
+var toDate = (seconds) => typeof seconds === "number" ? new Date(seconds * 1e3) : void 0;
+var getDetails = (claims) => ({
+  org: typeof claims.org === "string" ? claims.org : void 0,
+  licenseId: typeof claims.licenseId === "string" ? claims.licenseId : void 0,
+  issuedAt: toDate(claims.iat)
+});
+var INVALID_REASONS = {
+  LICENSE_FILE_EMPTY: "the file is empty",
+  LICENSE_NOT_YET_VALID: "it is not valid yet",
+  LICENSE_SIGNATURE_INVALID: "its signature is invalid",
+  LICENSE_VALIDATION_FAILED: "it was not issued by EventCatalog"
+};
+var getLicenseFilePath = (projectDirectory) => process.env.EC_LICENSE || import_node_path.default.join(projectDirectory, "license.jwt");
+var readClaims = (licenseFilePath) => {
+  try {
+    const payload = import_node_fs.default.readFileSync(licenseFilePath, "utf8").trim().split(".")[1];
+    return JSON.parse(Buffer.from(payload, "base64url").toString("utf8"));
+  } catch {
+    return {};
+  }
+};
+var statusCache = /* @__PURE__ */ new Map();
+var getLicensePlan = () => {
+  if (process.env.EVENTCATALOG_SCALE === "true") return "scale";
+  if (process.env.EVENTCATALOG_STARTER === "true") return "starter";
+};
+var getCommercialLicenseStatus = (projectDirectory = process.env.PROJECT_DIR || process.cwd()) => {
+  const licensePath = getLicenseFilePath(projectDirectory);
+  const modifiedAt = import_node_fs.default.statSync(licensePath, { throwIfNoEntry: false })?.mtimeMs;
+  if (modifiedAt === void 0) return Promise.resolve({ state: "none" });
+  const key = `${licensePath}:${modifiedAt}`;
+  if (!statusCache.has(key)) statusCache.set(key, verifyLicense(licensePath));
+  return statusCache.get(key);
+};
+var getLicenseStatus = async (projectDirectory) => {
+  const license = await getCommercialLicenseStatus(projectDirectory);
+  if (license.state === "licensed") return license;
+  const plan = getLicensePlan();
+  return plan ? { state: "plan", plan } : license;
+};
+var verifyLicense = async (licensePath) => {
+  const consoleError = console.error;
+  console.error = () => {
+  };
+  try {
+    (0, import_license.clearCache)();
+    if (await (0, import_license.hasCommercialLicense)()) {
+      const entitlements2 = await (0, import_license.verifyOfflineLicense)({ licensePath });
+      return { state: "licensed", ...getDetails(entitlements2), expiresAt: new Date(entitlements2.exp * 1e3) };
+    }
+    (0, import_license.clearCache)();
+    const entitlements = await (0, import_license.verifyOfflineLicense)({ licensePath });
+    if (typeof entitlements.exp !== "number") return { state: "invalid", reason: "it has no expiry date" };
+    return { state: "expired", ...getDetails(entitlements), expiresAt: new Date(entitlements.exp * 1e3) };
+  } catch (error) {
+    if (error?.code === "LICENSE_EXPIRED") {
+      const claims = readClaims(licensePath);
+      return { state: "expired", ...getDetails(claims), expiresAt: toDate(claims.exp) };
+    }
+    return { state: "invalid", reason: INVALID_REASONS[error?.code] || error?.message || String(error) };
+  } finally {
+    console.error = consoleError;
+  }
+};
+
+// src/utils/license-status.ts
+var isPlanEnabled = async (check) => {
+  const consoleError = console.error;
+  console.error = () => {
+  };
+  try {
+    return await check();
+  } catch {
+    return false;
+  } finally {
+    console.error = consoleError;
+  }
+};
+var checkPlanLicense = async () => {
+  if (await isPlanEnabled(import_license2.isEventCatalogScaleEnabled)) return "scale";
+  if (await isPlanEnabled(import_license2.isEventCatalogStarterEnabled)) return "starter";
+};
+var getLicenseStatus2 = async (projectDirectory) => {
+  const license = await getCommercialLicenseStatus(projectDirectory);
+  const plan = license.state === "licensed" ? void 0 : await checkPlanLicense();
+  process.env.EVENTCATALOG_SCALE = String(plan === "scale");
+  process.env.EVENTCATALOG_STARTER = String(plan === "starter");
+  return getLicenseStatus(projectDirectory);
+};
+var DAY_IN_MS2 = 24 * 60 * 60 * 1e3;
+var getLicenseType = (license) => {
+  if (license.state === "licensed") return "commercial";
+  if (license.state === "plan") return license.plan;
+  return "trial";
+};
+var getLicenseAnalytics = (license = { state: "none" }, tsd) => ({
+  license: getLicenseType(license),
+  licenseState: license.state === "licensed" || license.state === "plan" ? "valid" : license.state,
+  licenseExpiry: "expiresAt" in license ? license.expiresAt?.getTime() : void 0,
+  trialExpiry: getTrialStatus(tsd)?.endsAt.getTime()
+});
+var formatDate = (date) => date.toLocaleDateString(void 0, { dateStyle: "medium" });
+var formatDays = (days) => `${days} ${days === 1 ? "day" : "days"}`;
+var getTrialLine = (tsd, now) => {
+  const trial = getTrialStatus(tsd, now);
+  if (!trial) return;
+  return trial.ended ? `Your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial ended on ${formatDate(trial.endsAt)}.` : `${formatDays(trial.daysLeft)} left of your ${TRIAL_LENGTH_DAYS}-day EventCatalog trial (ends ${formatDate(trial.endsAt)}).`;
+};
+var getLicenseStatusMessage = (license, tsd, now = Date.now()) => {
+  if (license.state === "licensed") {
+    const daysLeft = Math.max(0, Math.ceil((license.expiresAt.getTime() - now) / DAY_IN_MS2));
+    const licensedTo = license.org ? `Licensed to ${license.org}` : "Licensed";
+    if (daysLeft < LICENSE_REMINDER_DAYS) {
+      return {
+        title: "EventCatalog Commercial License",
+        color: "yellow",
+        text: [
+          licensedTo,
+          `Your license expires in ${formatDays(daysLeft)}, on ${formatDate(license.expiresAt)}.`,
+          `Renew it to keep using EventCatalog commercially: ${LICENSE_RENEW_URL}`
+        ].join("\n")
+      };
+    }
+    return {
+      title: "EventCatalog Commercial License",
+      color: "green",
+      text: `${licensedTo}
+Valid until ${formatDate(license.expiresAt)} (${formatDays(daysLeft)} left)`
+    };
+  }
+  if (license.state === "plan") return;
+  const trialLine = getTrialLine(tsd, now);
+  if (license.state === "none") {
+    if (!trialLine) return;
+    const ended = getTrialStatus(tsd, now)?.ended;
+    return {
+      title: "EventCatalog trial",
+      color: ended ? "yellow" : "green",
+      text: `${trialLine}
+Learn about licensing: ${LICENSE_FAQ_URL}`
+    };
+  }
+  if (license.state === "expired") {
+    const expiredOn = license.expiresAt ? `expired on ${formatDate(license.expiresAt)} (${formatDays(Math.floor((now - license.expiresAt.getTime()) / DAY_IN_MS2))} ago)` : "has expired";
+    return {
+      title: "EventCatalog License Expired",
+      color: "yellow",
+      text: [
+        `Your EventCatalog commercial license${license.org ? ` for ${license.org}` : ""} ${expiredOn}.`,
+        `Renew it to keep using EventCatalog commercially: ${LICENSE_RENEW_URL}`,
+        trialLine,
+        `Learn about licensing: ${LICENSE_FAQ_URL}`
+      ].filter(Boolean).join("\n")
+    };
+  }
+  return {
+    title: "EventCatalog license",
+    color: "yellow",
+    text: [`Your license.jwt could not be verified: ${license.reason}.`, trialLine, `Learn about licensing: ${LICENSE_FAQ_URL}`].filter(Boolean).join("\n")
+  };
+};
+var printLicenseStatus = (license, tsd) => {
+  const message = getLicenseStatusMessage(license, tsd);
+  if (!message) return;
+  console.log(
+    (0, import_boxen.default)(message.text, {
+      padding: 1,
+      margin: 1,
+      borderStyle: "round",
+      borderColor: message.color,
+      title: message.title,
+      titleAlignment: "center"
+    })
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getLicenseAnalytics,
+  getLicenseStatus,
+  getLicenseStatusMessage,
+  printLicenseStatus
+});

package/dist/utils/license-status.d.cts

@@ -0,0 +1,28 @@
+import { L as LicenseStatus } from '../license-C1y-56bb.cjs';
+
+/**
+ * The catalog's license: a commercial license (license.jwt) first, falling back to a Scale or
+ * Starter license key. The plan is passed on to Astro (see getLicensePlan) through the environment.
+ */
+declare const getLicenseStatus: (projectDirectory: string) => Promise<LicenseStatus>;
+/**
+ * License fields for build telemetry: a commercial license (a valid license.jwt), a Scale or
+ * Starter plan, or the trial, and when each expires (unix ms, like `tsd`).
+ */
+declare const getLicenseAnalytics: (license?: LicenseStatus, tsd?: unknown) => {
+    license: string;
+    licenseState: string;
+    licenseExpiry: number | undefined;
+    trialExpiry: number | undefined;
+};
+/**
+ * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ */
+declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => {
+    title: string;
+    color: string;
+    text: string;
+} | undefined;
+declare const printLicenseStatus: (license: LicenseStatus, tsd: unknown) => void;
+
+export { LicenseStatus, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };

package/dist/utils/license-status.d.ts

@@ -0,0 +1,28 @@
+import { L as LicenseStatus } from '../license-C1y-56bb.js';
+
+/**
+ * The catalog's license: a commercial license (license.jwt) first, falling back to a Scale or
+ * Starter license key. The plan is passed on to Astro (see getLicensePlan) through the environment.
+ */
+declare const getLicenseStatus: (projectDirectory: string) => Promise<LicenseStatus>;
+/**
+ * License fields for build telemetry: a commercial license (a valid license.jwt), a Scale or
+ * Starter plan, or the trial, and when each expires (unix ms, like `tsd`).
+ */
+declare const getLicenseAnalytics: (license?: LicenseStatus, tsd?: unknown) => {
+    license: string;
+    licenseState: string;
+    licenseExpiry: number | undefined;
+    trialExpiry: number | undefined;
+};
+/**
+ * The license (or trial) box for the terminal. Undefined when there's nothing to show.
+ */
+declare const getLicenseStatusMessage: (license: LicenseStatus, tsd: unknown, now?: number) => {
+    title: string;
+    color: string;
+    text: string;
+} | undefined;
+declare const printLicenseStatus: (license: LicenseStatus, tsd: unknown) => void;
+
+export { LicenseStatus, getLicenseAnalytics, getLicenseStatus, getLicenseStatusMessage, printLicenseStatus };

package/dist/utils/license-status.js

@@ -0,0 +1,12 @@
+import {
+  getLicenseAnalytics,
+  getLicenseStatus,
+  getLicenseStatusMessage,
+  printLicenseStatus
+} from "../chunk-TQLRG35T.js";
+export {
+  getLicenseAnalytics,
+  getLicenseStatus,
+  getLicenseStatusMessage,
+  printLicenseStatus
+};

package/eventcatalog/astro.config.mjs

@@ -27,7 +27,7 @@ import expressiveCode from 'astro-expressive-code';
 // preprocessors and the rehype plugin below load those same package defaults.
 import expressiveCodeConfig from './ec.config.mjs';
 import ecstudioWatcher from './integrations/ecstudio-watcher.mjs';
-import eventCatalogIntegration from './src/enterprise/integrations/eventcatalog-features.ts';
+import eventCatalogIntegration from './src/features/integrations/eventcatalog-features.ts';
 import eventCatalogRuntime, { getDevServerFileSystem, packageDirectory } from './integrations/eventcatalog-runtime.mjs';
 import config from './src/utils/eventcatalog-config/source.ts';
 import preprocessExpressiveCodeConfig from './integrations/expressive-code-config.mjs';

package/eventcatalog/integrations/eventcatalog-runtime.mjs

@@ -59,7 +59,7 @@ export function getRuntimeAliases({ projectDirectory, runtimeDirectory, coreDire
     { find: /^@types$/, replacement: source('types/index.ts') },
     { find: '@utils', replacement: source('utils') },
     { find: '@layouts', replacement: source('layouts') },
-    { find: '@enterprise', replacement: source('enterprise') },
+    { find: '@features', replacement: source('features') },
     { find: /^auth:config$/, replacement: path.join(coreDirectory, 'auth.config.ts') },
     { find: '@stores', replacement: source('stores') },
   ];

package/eventcatalog/src/components/ChatPanel/ChatPanel.tsx

@@ -9,7 +9,7 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import * as Dialog from '@radix-ui/react-dialog';
 import * as Popover from '@radix-ui/react-popover';
 import { buildUrl } from '@utils/url-builder';
-import OfflineReply, { offlineReplyText } from './OfflineReply';
+import OfflineReply, { ConfigurationErrorReply, getChatError, offlineReplyText } from './OfflineReply';
 
 interface ToolMetadata {
   name: string;
@@ -654,8 +654,8 @@ const ChatPanel = ({ isOpen, onClose, configured = false }: ChatPanelProps) => {
 
   const { messages, sendMessage, stop, status, setMessages, error } = useChat({ transport: chatTransport });
 
-  // Extract user-friendly error message
-  const errorMessage = error?.message || 'Something went wrong. Please try again.';
+  // The chat API's error, or how to fix a chat configuration that didn't load
+  const chatError = useMemo(() => getChatError(error), [error]);
 
   // Memoize last assistant message to avoid array operations on every render
   const lastAssistantMessage = useMemo(() => messages.findLast((m) => m.role === 'assistant'), [messages]);
@@ -1058,16 +1058,21 @@ const ChatPanel = ({ isOpen, onClose, configured = false }: ChatPanelProps) => {
                   )}
 
                   {/* Error message as chat bubble */}
-                  {status === 'error' && (
-                    <div className="flex justify-start">
-                      <div className="w-full">
-                        <div className="flex items-start gap-2 text-red-600 text-sm">
-                          <span className="shrink-0">⚠️</span>
-                          <span>{errorMessage}</span>
+                  {status === 'error' &&
+                    (chatError.type === 'configuration' ? (
+                      <div className="ec-chat-message ec-chat-setup flex flex-col items-start">
+                        <ConfigurationErrorReply reason={chatError.reason} />
+                      </div>
+                    ) : (
+                      <div className="flex justify-start">
+                        <div className="w-full">
+                          <div className="flex items-start gap-2 text-red-600 text-sm">
+                            <span className="shrink-0">⚠️</span>
+                            <span>{chatError.message}</span>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  )}
+                    ))}
 
                   <div ref={messagesEndRef} />
                 </div>
@@ -1361,16 +1366,21 @@ const ChatPanel = ({ isOpen, onClose, configured = false }: ChatPanelProps) => {
                   )}
 
                   {/* Error message as chat bubble */}
-                  {status === 'error' && (
-                    <div className="flex justify-start">
-                      <div className="w-full">
-                        <div className="flex items-start gap-2 text-red-600 text-sm">
-                          <span className="shrink-0">⚠️</span>
-                          <span>{errorMessage}</span>
+                  {status === 'error' &&
+                    (chatError.type === 'configuration' ? (
+                      <div className="ec-chat-message ec-chat-setup flex flex-col items-start">
+                        <ConfigurationErrorReply reason={chatError.reason} />
+                      </div>
+                    ) : (
+                      <div className="flex justify-start">
+                        <div className="w-full">
+                          <div className="flex items-start gap-2 text-red-600 text-sm">
+                            <span className="shrink-0">⚠️</span>
+                            <span>{chatError.message}</span>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  )}
+                    ))}
 
                   <div ref={modalMessagesEndRef} />
                 </div>

package/eventcatalog/src/components/ChatPanel/OfflineReply.tsx

@@ -43,3 +43,77 @@ export default function OfflineReply() {
     </div>
   );
 }
+
+/**
+ * The chat's error, from the chat API's JSON body when there is one. A configuration error means
+ * eventcatalog.chat.js didn't load; `reason` says why (dev mode only).
+ */
+export type ChatError = { type: 'configuration'; reason?: string } | { type: 'error'; message: string };
+
+export const getChatError = (error: Error | undefined): ChatError => {
+  const fallback = 'Something went wrong. Please try again.';
+  if (!error) return { type: 'error', message: fallback };
+  try {
+    const body = JSON.parse(error.message);
+    if (body?.code === 'CHAT_CONFIGURATION_ERROR') return { type: 'configuration', reason: body.reason };
+    if (typeof body?.error === 'string') return { type: 'error', message: body.error };
+  } catch {
+    // Not JSON: the error message is already readable
+  }
+  return { type: 'error', message: error.message || fallback };
+};
+
+/**
+ * The assistant's reply when eventcatalog.chat.js exists but didn't load. In dev mode (with the
+ * reason) it walks the catalog owner through the fix; otherwise it points readers to the owner.
+ */
+export function ConfigurationErrorReply({ reason }: { reason?: string }) {
+  return (
+    <div className="ec-chat-offline w-full space-y-4 py-2 text-[13px] leading-relaxed text-[rgb(var(--ec-content-text))]">
+      <div className="space-y-2">
+        <p className="text-base font-medium leading-snug text-[rgb(var(--ec-page-text))]">I can’t reach your model yet.</p>
+        <p>
+          Your catalog has an <code className="text-[12px]">eventcatalog.chat.js</code>, but it didn’t load, so I’m not connected
+          to a model.
+        </p>
+      </div>
+      <div className="space-y-3 rounded-xl border border-[rgb(var(--ec-accent)/0.15)] bg-[rgb(var(--ec-accent)/0.04)] p-4">
+        {reason ? (
+          <>
+            <div className="space-y-1.5">
+              <p className="font-medium text-[rgb(var(--ec-page-text))]">What went wrong</p>
+              <pre className="whitespace-pre-wrap break-words rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-3 py-2 font-mono text-[11px] text-[rgb(var(--ec-page-text))]">
+                {reason}
+              </pre>
+            </div>
+            <div className="space-y-1.5">
+              <p className="font-medium text-[rgb(var(--ec-page-text))]">How to fix it</p>
+              <ol className="list-decimal space-y-1 pl-4">
+                <li>
+                  Install the packages your <code className="text-[12px]">eventcatalog.chat.js</code> imports in your catalog,
+                  e.g. <code className="text-[12px]">npm install ai @ai-sdk/anthropic</code>.
+                </li>
+                <li>
+                  Add the provider’s API key to the <code className="text-[12px]">.env</code> file in your catalog, e.g.{' '}
+                  <code className="text-[12px]">ANTHROPIC_API_KEY</code>.
+                </li>
+                <li>Restart EventCatalog.</li>
+              </ol>
+            </div>
+          </>
+        ) : (
+          <p>Your catalog owner can find out why in the server logs, under “Error loading chat configuration”.</p>
+        )}
+        <a
+          href={setupUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-2 rounded-lg bg-[rgb(var(--ec-accent))] px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-[rgb(var(--ec-accent-hover))] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[rgb(var(--ec-accent))]"
+        >
+          Configuration guide
+          <ArrowUpRight size={14} aria-hidden="true" />
+        </a>
+      </div>
+    </div>
+  );
+}