@eventcatalog/core 5.0.0-beta.28 → 5.0.0-beta.29

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.28";
+var version = "5.0.0-beta.29";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,8 +1,8 @@
 import {
   raiseEvent
-} from "../chunk-QWFP2PDM.js";
+} from "../chunk-B4OOUG5I.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-EUMQAONX.js";
+import "../chunk-ZK7Q7XDV.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -169,7 +169,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "5.0.0-beta.28";
+var version = "5.0.0-beta.29";
 
 // src/constants.ts
 var VERSION = version;
@@ -294,6 +294,7 @@ var import_license2 = require("@eventcatalog/license");
 
 // eventcatalog/src/utils/trial.ts
 var TRIAL_LENGTH_DAYS = 60;
+var FREE_USE_NOTE = "Under $10M revenue and $10M raised, an individual or an open-source project? You qualify for Free Use; get a free key at 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;
@@ -321,6 +322,7 @@ var getLicenseAnalytics = (license = { state: "none" }, tsd) => ({
   trialExpiry: getTrialStatus(tsd)?.endsAt.getTime()
 });
 var COLOURS = { bold: import_picocolors.default.bold, dim: import_picocolors.default.dim, link: (text) => import_picocolors.default.cyan(text) };
+var FREE_USE_LINES = FREE_USE_NOTE.split(/(?<=\?) /);
 
 // src/analytics/studio-usage.js
 var import_node_fs3 = __toESM(require("fs"), 1);

package/dist/analytics/log-build.js

@@ -1,12 +1,12 @@
 import {
   log_build_default
-} from "../chunk-VAL22T5Y.js";
-import "../chunk-AWOO63ME.js";
+} from "../chunk-4IREUUHE.js";
+import "../chunk-AD7CL772.js";
 import "../chunk-ZAZHAVKB.js";
 import "../chunk-CA6WCQ2T.js";
-import "../chunk-QWFP2PDM.js";
+import "../chunk-B4OOUG5I.js";
 import "../chunk-CPW6G62V.js";
-import "../chunk-EUMQAONX.js";
+import "../chunk-ZK7Q7XDV.js";
 import "../chunk-4G7FSRPN.js";
 export {
   log_build_default as default

package/dist/{chunk-TDUUHSGF.js → chunk-34VU2X7H.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-EUMQAONX.js";
+} from "./chunk-ZK7Q7XDV.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-G46KUC6G.js → chunk-3RDV4HXA.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-TDUUHSGF.js";
+} from "./chunk-34VU2X7H.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-VAL22T5Y.js → chunk-4IREUUHE.js}

@@ -1,6 +1,6 @@
 import {
   getLicenseAnalytics
-} from "./chunk-AWOO63ME.js";
+} from "./chunk-AD7CL772.js";
 import {
   countResources,
   hashCatalogContent,
@@ -13,7 +13,7 @@ import {
 } from "./chunk-CA6WCQ2T.js";
 import {
   raiseEvent
-} from "./chunk-QWFP2PDM.js";
+} from "./chunk-B4OOUG5I.js";
 import {
   TELEMETRY_REQUEST_TIMEOUT_MS,
   isTelemetryDisabled

package/dist/{chunk-AWOO63ME.js → chunk-AD7CL772.js}

@@ -7,6 +7,9 @@ import { isEventCatalogScaleEnabled, isEventCatalogStarterEnabled } from "@event
 var TRIAL_LENGTH_DAYS = 60;
 var LICENSE_FAQ_URL = "https://www.eventcatalog.dev/license-faq";
 var LICENSE_RENEW_URL = "https://eventcatalog.cloud";
+var BUY_BUSINESS_URL = "https://www.eventcatalog.dev/buy?source=cli";
+var PRICING_URL = "https://www.eventcatalog.dev/pricing";
+var FREE_USE_NOTE = "Under $10M revenue and $10M raised, an individual or an open-source project? You qualify for Free Use; get a free key at 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;
@@ -125,15 +128,17 @@ var formatDate = (date) => date.toLocaleDateString(void 0, { dateStyle: "medium"
 var formatDays = (days) => `${days} ${days === 1 ? "day" : "days"}`;
 var PLAIN = { bold: (text) => text, dim: (text) => text, link: (text) => text };
 var COLOURS = { bold: pc.bold, dim: pc.dim, link: (text) => pc.cyan(text) };
-var render = ({ headline, rows, links }, colours) => {
+var render = ({ headline, rows, links, note }, colours) => {
   const width = Math.max(0, ...[...rows, ...links].map(([label]) => label.length));
   const row = ([label, value]) => `${colours.dim(label.padEnd(width))}  ${value}`;
   return [
     colours.bold(headline),
     ...rows.length ? ["", ...rows.map(row)] : [],
-    ...links.length ? ["", ...links.map(([label, url]) => row([label, colours.link(url)]))] : []
+    ...links.length ? ["", ...links.map(([label, url]) => row([label, colours.link(url)]))] : [],
+    ...note?.length ? ["", ...note.map(colours.dim)] : []
   ].join("\n");
 };
+var FREE_USE_LINES = FREE_USE_NOTE.split(/(?<=\?) /);
 var message = (content) => ({
   ...content,
   text: render(content, PLAIN)
@@ -180,7 +185,8 @@ var getLicenseStatusMessage = (license, tsd, now = Date.now()) => {
       color: trial.ended ? "yellow" : "green",
       headline: trial.ended ? "Your EventCatalog trial has ended" : `You're on the ${TRIAL_LENGTH_DAYS}-day EventCatalog trial`,
       rows: trialRows,
-      links: trial.ended ? [["Get a license", LICENSE_RENEW_URL], licensing] : [licensing]
+      links: trial.ended ? [["Get a license", LICENSE_RENEW_URL], ["Buy Business", BUY_BUSINESS_URL], licensing] : [["Buy a license", PRICING_URL], licensing],
+      note: trial.ended ? FREE_USE_LINES : void 0
     });
   }
   if (license.state === "expired") {
@@ -194,7 +200,8 @@ var getLicenseStatusMessage = (license, tsd, now = Date.now()) => {
       title: "EventCatalog license",
       color: "yellow",
       headline: "Your commercial license has expired",
-      rows: [...licensedTo, ...expiredOn, ...trialRows],
+      // A catalog has a license or is on the trial: an expired license is renewed, not replaced by the trial
+      rows: [...licensedTo, ...expiredOn],
       links: [renew, licensing]
     });
   }

package/dist/{chunk-QWFP2PDM.js → chunk-B4OOUG5I.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-CPW6G62V.js";
 import {
   VERSION
-} from "./chunk-EUMQAONX.js";
+} from "./chunk-ZK7Q7XDV.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-EUMQAONX.js → chunk-ZK7Q7XDV.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "5.0.0-beta.28";
+var version = "5.0.0-beta.29";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "5.0.0-beta.28";
+var version = "5.0.0-beta.29";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-EUMQAONX.js";
+} from "./chunk-ZK7Q7XDV.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -174,7 +174,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.28";
+var version = "5.0.0-beta.29";
 
 // src/constants.ts
 var VERSION = version;
@@ -422,6 +422,9 @@ var import_license2 = require("@eventcatalog/license");
 var TRIAL_LENGTH_DAYS = 60;
 var LICENSE_FAQ_URL = "https://www.eventcatalog.dev/license-faq";
 var LICENSE_RENEW_URL = "https://eventcatalog.cloud";
+var BUY_BUSINESS_URL = "https://www.eventcatalog.dev/buy?source=cli";
+var PRICING_URL = "https://www.eventcatalog.dev/pricing";
+var FREE_USE_NOTE = "Under $10M revenue and $10M raised, an individual or an open-source project? You qualify for Free Use; get a free key at 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;
@@ -540,15 +543,17 @@ var formatDate = (date) => date.toLocaleDateString(void 0, { dateStyle: "medium"
 var formatDays = (days) => `${days} ${days === 1 ? "day" : "days"}`;
 var PLAIN = { bold: (text) => text, dim: (text) => text, link: (text) => text };
 var COLOURS = { bold: import_picocolors2.default.bold, dim: import_picocolors2.default.dim, link: (text) => import_picocolors2.default.cyan(text) };
-var render = ({ headline, rows, links }, colours) => {
+var render = ({ headline, rows, links, note }, colours) => {
   const width = Math.max(0, ...[...rows, ...links].map(([label]) => label.length));
   const row = ([label, value]) => `${colours.dim(label.padEnd(width))}  ${value}`;
   return [
     colours.bold(headline),
     ...rows.length ? ["", ...rows.map(row)] : [],
-    ...links.length ? ["", ...links.map(([label, url]) => row([label, colours.link(url)]))] : []
+    ...links.length ? ["", ...links.map(([label, url]) => row([label, colours.link(url)]))] : [],
+    ...note?.length ? ["", ...note.map(colours.dim)] : []
   ].join("\n");
 };
+var FREE_USE_LINES = FREE_USE_NOTE.split(/(?<=\?) /);
 var message = (content) => ({
   ...content,
   text: render(content, PLAIN)
@@ -595,7 +600,8 @@ var getLicenseStatusMessage = (license, tsd, now = Date.now()) => {
       color: trial.ended ? "yellow" : "green",
       headline: trial.ended ? "Your EventCatalog trial has ended" : `You're on the ${TRIAL_LENGTH_DAYS}-day EventCatalog trial`,
       rows: trialRows,
-      links: trial.ended ? [["Get a license", LICENSE_RENEW_URL], licensing] : [licensing]
+      links: trial.ended ? [["Get a license", LICENSE_RENEW_URL], ["Buy Business", BUY_BUSINESS_URL], licensing] : [["Buy a license", PRICING_URL], licensing],
+      note: trial.ended ? FREE_USE_LINES : void 0
     });
   }
   if (license.state === "expired") {
@@ -609,7 +615,8 @@ var getLicenseStatusMessage = (license, tsd, now = Date.now()) => {
       title: "EventCatalog license",
       color: "yellow",
       headline: "Your commercial license has expired",
-      rows: [...licensedTo, ...expiredOn, ...trialRows],
+      // A catalog has a license or is on the trial: an expired license is renewed, not replaced by the trial
+      rows: [...licensedTo, ...expiredOn],
       links: [renew, licensing]
     });
   }

package/dist/eventcatalog.js

@@ -7,11 +7,11 @@ import {
 } from "./chunk-S5GWAUG5.js";
 import {
   log_build_default
-} from "./chunk-VAL22T5Y.js";
+} from "./chunk-4IREUUHE.js";
 import {
   getLicenseStatus,
   printLicenseStatus
-} from "./chunk-AWOO63ME.js";
+} from "./chunk-AD7CL772.js";
 import "./chunk-ZAZHAVKB.js";
 import "./chunk-CA6WCQ2T.js";
 import {
@@ -37,10 +37,10 @@ import {
 } from "./chunk-NKNOXQ62.js";
 import {
   generate
-} from "./chunk-G46KUC6G.js";
+} from "./chunk-3RDV4HXA.js";
 import {
   logger
-} from "./chunk-TDUUHSGF.js";
+} from "./chunk-34VU2X7H.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-PD7KTSYN.js";
@@ -54,7 +54,7 @@ import {
 import {
   watch
 } from "./chunk-U63GDPPY.js";
-import "./chunk-QWFP2PDM.js";
+import "./chunk-B4OOUG5I.js";
 import "./chunk-CPW6G62V.js";
 import {
   getAstroConfigPath
@@ -71,7 +71,7 @@ import {
 } from "./chunk-LFQJXLHG.js";
 import {
   VERSION
-} from "./chunk-EUMQAONX.js";
+} from "./chunk-ZK7Q7XDV.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/generate.cjs

@@ -105,7 +105,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "5.0.0-beta.28";
+var version = "5.0.0-beta.29";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-G46KUC6G.js";
-import "./chunk-TDUUHSGF.js";
-import "./chunk-EUMQAONX.js";
+} from "./chunk-3RDV4HXA.js";
+import "./chunk-34VU2X7H.js";
+import "./chunk-ZK7Q7XDV.js";
 import "./chunk-4G7FSRPN.js";
 export {
   generate

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 = "5.0.0-beta.28";
+var version = "5.0.0-beta.29";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-TDUUHSGF.js";
-import "../chunk-EUMQAONX.js";
+} from "../chunk-34VU2X7H.js";
+import "../chunk-ZK7Q7XDV.js";
 export {
   logger
 };

package/dist/utils/license-status.cjs

@@ -44,6 +44,9 @@ var import_license2 = require("@eventcatalog/license");
 var TRIAL_LENGTH_DAYS = 60;
 var LICENSE_FAQ_URL = "https://www.eventcatalog.dev/license-faq";
 var LICENSE_RENEW_URL = "https://eventcatalog.cloud";
+var BUY_BUSINESS_URL = "https://www.eventcatalog.dev/buy?source=cli";
+var PRICING_URL = "https://www.eventcatalog.dev/pricing";
+var FREE_USE_NOTE = "Under $10M revenue and $10M raised, an individual or an open-source project? You qualify for Free Use; get a free key at 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;
@@ -162,15 +165,17 @@ var formatDate = (date) => date.toLocaleDateString(void 0, { dateStyle: "medium"
 var formatDays = (days) => `${days} ${days === 1 ? "day" : "days"}`;
 var PLAIN = { bold: (text) => text, dim: (text) => text, link: (text) => text };
 var COLOURS = { bold: import_picocolors.default.bold, dim: import_picocolors.default.dim, link: (text) => import_picocolors.default.cyan(text) };
-var render = ({ headline, rows, links }, colours) => {
+var render = ({ headline, rows, links, note }, colours) => {
   const width = Math.max(0, ...[...rows, ...links].map(([label]) => label.length));
   const row = ([label, value]) => `${colours.dim(label.padEnd(width))}  ${value}`;
   return [
     colours.bold(headline),
     ...rows.length ? ["", ...rows.map(row)] : [],
-    ...links.length ? ["", ...links.map(([label, url]) => row([label, colours.link(url)]))] : []
+    ...links.length ? ["", ...links.map(([label, url]) => row([label, colours.link(url)]))] : [],
+    ...note?.length ? ["", ...note.map(colours.dim)] : []
   ].join("\n");
 };
+var FREE_USE_LINES = FREE_USE_NOTE.split(/(?<=\?) /);
 var message = (content) => ({
   ...content,
   text: render(content, PLAIN)
@@ -217,7 +222,8 @@ var getLicenseStatusMessage = (license, tsd, now = Date.now()) => {
       color: trial.ended ? "yellow" : "green",
       headline: trial.ended ? "Your EventCatalog trial has ended" : `You're on the ${TRIAL_LENGTH_DAYS}-day EventCatalog trial`,
       rows: trialRows,
-      links: trial.ended ? [["Get a license", LICENSE_RENEW_URL], licensing] : [licensing]
+      links: trial.ended ? [["Get a license", LICENSE_RENEW_URL], ["Buy Business", BUY_BUSINESS_URL], licensing] : [["Buy a license", PRICING_URL], licensing],
+      note: trial.ended ? FREE_USE_LINES : void 0
     });
   }
   if (license.state === "expired") {
@@ -231,7 +237,8 @@ var getLicenseStatusMessage = (license, tsd, now = Date.now()) => {
       title: "EventCatalog license",
       color: "yellow",
       headline: "Your commercial license has expired",
-      rows: [...licensedTo, ...expiredOn, ...trialRows],
+      // A catalog has a license or is on the trial: an expired license is renewed, not replaced by the trial
+      rows: [...licensedTo, ...expiredOn],
       links: [renew, licensing]
     });
   }

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

@@ -17,8 +17,8 @@ declare const getLicenseAnalytics: (license?: LicenseStatus, tsd?: unknown) => {
 };
 type Row = [label: string, value: string];
 /**
- * What the license box says: a headline, the facts as aligned rows ("Licensed to  acme"), and links on their own
- * rows, so it can be read at a glance. `text` is the box's content without colours.
+ * What the license box says: a headline, the facts as aligned rows ("Licensed to  acme"), links on their own
+ * rows, and an optional note at the end, so it can be read at a glance. `text` is the box's content without colours.
  */
 type LicenseStatusMessage = {
     title: string;
@@ -26,6 +26,7 @@ type LicenseStatusMessage = {
     headline: string;
     rows: Row[];
     links: Row[];
+    note?: string[];
     text: string;
 };
 /**

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

@@ -17,8 +17,8 @@ declare const getLicenseAnalytics: (license?: LicenseStatus, tsd?: unknown) => {
 };
 type Row = [label: string, value: string];
 /**
- * What the license box says: a headline, the facts as aligned rows ("Licensed to  acme"), and links on their own
- * rows, so it can be read at a glance. `text` is the box's content without colours.
+ * What the license box says: a headline, the facts as aligned rows ("Licensed to  acme"), links on their own
+ * rows, and an optional note at the end, so it can be read at a glance. `text` is the box's content without colours.
  */
 type LicenseStatusMessage = {
     title: string;
@@ -26,6 +26,7 @@ type LicenseStatusMessage = {
     headline: string;
     rows: Row[];
     links: Row[];
+    note?: string[];
     text: string;
 };
 /**

package/dist/utils/license-status.js

@@ -3,7 +3,7 @@ import {
   getLicenseStatus,
   getLicenseStatusMessage,
   printLicenseStatus
-} from "../chunk-AWOO63ME.js";
+} from "../chunk-AD7CL772.js";
 export {
   getLicenseAnalytics,
   getLicenseStatus,

package/eventcatalog/src/components/MDX/NodeGraph/AstroNodeGraph.tsx

@@ -12,7 +12,8 @@
  * CSS ships in the page head and survives ClientRouter navigations (see NodeGraph.astro).
  */
 
-import { useCallback, useState, lazy, Suspense } from 'react';
+import { useCallback, useEffect, useState, lazy, Suspense } from 'react';
+import { createPortal } from 'react-dom';
 import type { Node, Edge } from '@xyflow/react';
 import type { FlowGroupBy, OpenInStudioRequest } from '@eventcatalog/visualiser';
 import { buildUrl } from '@utils/url-builder';
@@ -27,6 +28,22 @@ const NodeGraph = lazy(() =>
   import('@eventcatalog/visualiser').then((module) => ({ default: module.NodeGraph }))
 ) as React.LazyExoticComponent<React.ComponentType<AstroNodeGraphProps & Record<string, unknown>>>;
 
+/**
+ * "Loading graph..." in the box the graph is drawn into, while the visualiser loads. Not where this island sits: the
+ * graph is portalled from there, and on the homepage that's beside the page's content (top right).
+ */
+const LoadingGraph = ({ portalId }: { portalId: string }) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+  useEffect(() => setContainer(document.getElementById(portalId)), [portalId]);
+  if (!container) return null;
+  return createPortal(
+    <div className="flex h-full min-h-[8rem] items-center justify-center text-sm text-[rgb(var(--ec-page-text-muted))]">
+      Loading graph...
+    </div>,
+    container
+  );
+};
+
 interface AstroNodeGraphProps {
   id: string;
   nodes: Node[];
@@ -141,7 +158,7 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, studioApiUrl, ...other
   );
 
   return (
-    <Suspense fallback={<div>Loading graph...</div>}>
+    <Suspense fallback={<LoadingGraph portalId={otherProps.portalId || `${otherProps.id}-portal`} />}>
       <NodeGraph
         {...otherProps}
         resourceKey={resourceKey}

package/eventcatalog/src/components/Settings/AssistantSettingsForm.tsx

@@ -64,53 +64,58 @@ export const AssistantSettingsForm = ({ canEdit, initial, chatAvailable, inSSR,
   };
 
   return (
-    <form onSubmit={(e) => e.preventDefault()} className="divide-y divide-[rgb(var(--ec-page-border))]">
+    <>
       <Toaster richColors closeButton position="bottom-right" theme="system" />
-      {!canEdit && (
-        <div className="pb-6">
-          <ReadOnlyBanner />
-        </div>
-      )}
-
-      <Row
-        title="Assistant Agent"
-        description="Assistant agent that answers questions about your architecture directly in your catalog."
-        canEdit={canEdit}
-        dirty={dirty}
-        saving={saving}
-        onSave={save}
+      <form
+        onSubmit={(e) => e.preventDefault()}
+        className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]"
       >
-        <div className="space-y-3">
-          <ToggleRow
-            icon={<MessageSquare className="h-4 w-4" aria-hidden />}
-            label={chatEnabled ? 'Enabled' : 'Disabled'}
-            hint={
-              chatEnabled
-                ? 'Event Catalog Assistant is visible in this catalog.'
-                : 'Event Catalog Assistant is hidden from this catalog.'
-            }
-            checked={chatEnabled}
-            disabled={!canEdit}
-            onChange={setChatEnabled}
-          />
-          {chatEnabled &&
-            (chatAvailable ? (
-              <ConfigurationRequired />
-            ) : !inSSR ? (
-              <AssistantNeedsSSR />
-            ) : !hasChatConfigFile ? (
-              <AssistantNeedsConfigFile />
-            ) : null)}
-        </div>
-      </Row>
-    </form>
+        {!canEdit && (
+          <div className="pb-6">
+            <ReadOnlyBanner />
+          </div>
+        )}
+
+        <Row
+          title="Assistant Agent"
+          description="Assistant agent that answers questions about your architecture directly in your catalog."
+          canEdit={canEdit}
+          dirty={dirty}
+          saving={saving}
+          onSave={save}
+        >
+          <div className="space-y-3">
+            <ToggleRow
+              icon={<MessageSquare className="h-4 w-4" aria-hidden />}
+              label={chatEnabled ? 'Enabled' : 'Disabled'}
+              hint={
+                chatEnabled
+                  ? 'Event Catalog Assistant is visible in this catalog.'
+                  : 'Event Catalog Assistant is hidden from this catalog.'
+              }
+              checked={chatEnabled}
+              disabled={!canEdit}
+              onChange={setChatEnabled}
+            />
+            {chatEnabled &&
+              (chatAvailable ? (
+                <ConfigurationRequired />
+              ) : !inSSR ? (
+                <AssistantNeedsSSR />
+              ) : !hasChatConfigFile ? (
+                <AssistantNeedsConfigFile />
+              ) : null)}
+          </div>
+        </Row>
+      </form>
+    </>
   );
 };
 
 const ConfigurationRequired = () => (
-  <div className="rounded-lg border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.06)] px-4 py-3">
+  <div className="rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)] px-4 py-3">
     <div className="flex items-start gap-3">
-      <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <Wrench className="h-3.5 w-3.5" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
@@ -125,7 +130,7 @@ const ConfigurationRequired = () => (
           target="_blank"
           rel="noreferrer"
           className={cn(
-            'mt-2 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-accent))] hover:underline'
+            'mt-2 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-page-text))] hover:underline'
           )}
         >
           Configure the Agent
@@ -137,15 +142,15 @@ const ConfigurationRequired = () => (
 );
 
 const AssistantNeedsSSR = () => (
-  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-accent)/0.4)] bg-gradient-to-br from-[rgb(var(--ec-accent)/0.1)] via-[rgb(var(--ec-accent)/0.05)] to-transparent">
+  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)]">
     <div className="flex items-start gap-3 px-4 py-3.5">
-      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <ServerCog className="h-4 w-4" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
           <p className="text-[13px] font-semibold text-[rgb(var(--ec-page-text))]">Server output mode required</p>
-          <span className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-accent))]">
+          <span className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text))]">
             SSR
           </span>
         </div>
@@ -157,7 +162,7 @@ const AssistantNeedsSSR = () => (
             href={ASSISTANT_CONFIGURATION_DOCS_URL}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-accent))] px-3 py-1.5 text-[12px] font-semibold text-white shadow-sm transition-colors hover:bg-[rgb(var(--ec-accent-hover))]"
+            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-page-text))] px-3 py-1.5 text-[12px] font-semibold text-[rgb(var(--ec-page-bg))] shadow-sm transition-colors hover:opacity-85"
           >
             Configuration guide
             <ExternalLink className="h-3 w-3" aria-hidden />
@@ -178,9 +183,9 @@ const AssistantNeedsSSR = () => (
 );
 
 const AssistantNeedsConfigFile = () => (
-  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-accent)/0.4)] bg-gradient-to-br from-[rgb(var(--ec-accent)/0.1)] via-[rgb(var(--ec-accent)/0.05)] to-transparent">
+  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)]">
     <div className="flex items-start gap-3 px-4 py-3.5">
-      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <Wrench className="h-4 w-4" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
@@ -195,7 +200,7 @@ const AssistantNeedsConfigFile = () => (
             href={ASSISTANT_CONFIGURATION_DOCS_URL}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-accent))] px-3 py-1.5 text-[12px] font-semibold text-white shadow-sm transition-colors hover:bg-[rgb(var(--ec-accent-hover))]"
+            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-page-text))] px-3 py-1.5 text-[12px] font-semibold text-[rgb(var(--ec-page-bg))] shadow-sm transition-colors hover:opacity-85"
           >
             Configuration guide
             <ExternalLink className="h-3 w-3" aria-hidden />