@eventcatalog/core 4.12.2 → 5.0.0-beta.0

package/eventcatalog/src/components/SchemaExplorer/SchemaDetailsPanel.tsx

@@ -38,7 +38,7 @@ import {
   SCHEMA_RELATIONSHIP_LABELS,
 } from './utils';
 import { createSchemaDetailsLoader, useSchemaDetails } from './useSchemaDetails';
-import { parseProtobufSchema } from '@utils/protobuf-schema';
+import { parseSchemaForViewer } from './parse-schema';
 import type { SchemaItem, SchemaSourceInfo, SchemaRelationshipCollection, VersionDiff, Owner, Producer } from './types';
 
 const MESSAGE_TYPE_LABELS: Partial<Record<SchemaItem['collection'], string>> = {
@@ -310,7 +310,6 @@ interface SchemaDetailsPanelProps {
   availableVersions: SchemaItem[];
   selectedVersion: string | null;
   onVersionChange: (version: string) => void;
-  apiAccessEnabled?: boolean;
   showOwners?: boolean;
   showProducersConsumers?: boolean;
   /** Tab slug from the URL, when the server could read it. Lets the first render show the right tab. */
@@ -324,7 +323,6 @@ export default function SchemaDetailsPanel({
   availableVersions,
   selectedVersion,
   onVersionChange,
-  apiAccessEnabled = false,
   showOwners = true,
   showProducersConsumers = true,
   initialTab,
@@ -428,55 +426,14 @@ export default function SchemaDetailsPanel({
   }, [comparing, diffFromItem, diffToItem]);
   const selectedDiffs = selectedDiff ? [selectedDiff] : [];
 
-  // Check if this is a JSON schema
-  const parsedSchema = useMemo(() => {
-    const isJSONSchema =
-      message.schemaExtension?.toLowerCase() === 'json' && message.schemaContent && message.schemaContent.trim() !== '';
-    if (!isJSONSchema) return null;
-
-    try {
-      const parsed = JSON.parse(message.schemaContent ?? '');
-      if (!parsed.properties && !parsed.$schema && !parsed.type) {
-        return null;
-      }
-      return parsed;
-    } catch {
-      return null;
-    }
-  }, [message.schemaContent, message.schemaExtension]);
-
-  // Check if this is an Avro schema
-  const parsedAvroSchema = useMemo(() => {
-    const extLower = message.schemaExtension?.toLowerCase();
-    const isAvroSchema =
-      (extLower === 'avro' || extLower === 'avsc') && message.schemaContent && message.schemaContent.trim() !== '';
-    if (!isAvroSchema) return null;
-
-    try {
-      const parsed = JSON.parse(message.schemaContent ?? '');
-      if (!parsed.type) {
-        return null;
-      }
-      return parsed;
-    } catch {
-      return null;
-    }
-  }, [message.schemaContent, message.schemaExtension]);
-
-  // Check if this is a Protobuf schema. The extension falls back to the schema
-  // format when the schema has no file path, so accept both 'proto' and 'protobuf'.
-  const parsedProtoSchema = useMemo(() => {
-    const extLower = message.schemaExtension?.toLowerCase();
-    const isProtoSchema =
-      (extLower === 'proto' || extLower === 'protobuf') && message.schemaContent && message.schemaContent.trim() !== '';
-    if (!isProtoSchema) return null;
-
-    try {
-      return parseProtobufSchema(message.schemaContent ?? '');
-    } catch {
-      return null;
-    }
-  }, [message.schemaContent, message.schemaExtension]);
+  // Parse JSON Schema, Avro and Protobuf schemas for the Properties tab
+  const viewableSchema = useMemo(
+    () => parseSchemaForViewer(message.schemaExtension, message.schemaContent),
+    [message.schemaContent, message.schemaExtension]
+  );
+  const parsedSchema = viewableSchema.kind === 'json' ? viewableSchema.schema : null;
+  const parsedAvroSchema = viewableSchema.kind === 'avro' ? viewableSchema.schema : null;
+  const parsedProtoSchema = viewableSchema.kind === 'protobuf' ? viewableSchema.schema : null;
 
   const handleCopy = async () => {
     if (!message.schemaContent) return;
@@ -832,7 +789,7 @@ export default function SchemaDetailsPanel({
                         <p className="text-sm">No schema content available</p>
                       </div>
                     ) : (
-                      <DiffViewer diffs={selectedDiffs} apiAccessEnabled={apiAccessEnabled} />
+                      <DiffViewer diffs={selectedDiffs} />
                     )}
                   </div>
                 </div>
@@ -843,12 +800,7 @@ export default function SchemaDetailsPanel({
           ) : activeTab === 'flows' && showFlowsTab ? (
             <SchemaFlows message={message} flows={flows} />
           ) : activeTab === 'api' ? (
-            <ApiContentViewer
-              message={message}
-              onCopy={handleCopyCustom}
-              copiedId={copiedId}
-              apiAccessEnabled={apiAccessEnabled}
-            />
+            <ApiContentViewer message={message} onCopy={handleCopyCustom} copiedId={copiedId} />
           ) : (
             <SchemaContentViewer
               message={message}
@@ -877,7 +829,6 @@ export default function SchemaDetailsPanel({
         onOpenChange={setIsDiffModalOpen}
         diffs={selectedDiffs}
         messageName={message.data.name}
-        apiAccessEnabled={apiAccessEnabled}
       />
       <SchemaCodeModal
         isOpen={isCodeModalOpen}

package/eventcatalog/src/components/SchemaExplorer/SchemaExplorer.tsx

@@ -44,10 +44,9 @@ function getGroupKey(item: SchemaItem): string {
 
 interface SchemaExplorerProps {
   schemas: SchemaItem[];
-  apiAccessEnabled?: boolean;
 }
 
-export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: SchemaExplorerProps) {
+export default function SchemaExplorer({ schemas }: SchemaExplorerProps) {
   const [searchQuery, setSearchQuery] = useState(() => {
     if (typeof window !== 'undefined') {
       const stored = localStorage.getItem('schemaRegistrySearchQuery');
@@ -594,7 +593,6 @@ export default function SchemaExplorer({ schemas, apiAccessEnabled = false }: Sc
               availableVersions={availableVersions}
               selectedVersion={selectedVersion}
               onVersionChange={handleVersionChange}
-              apiAccessEnabled={apiAccessEnabled}
             />
           ) : (
             <div className="flex h-full items-center justify-center">

package/eventcatalog/src/components/SchemaExplorer/SchemaPageViewer.tsx

@@ -5,7 +5,6 @@ import type { SchemaItem } from './types';
 interface SchemaPageViewerProps {
   message: SchemaItem;
   availableVersions: SchemaItem[];
-  apiAccessEnabled?: boolean;
   showOwners?: boolean;
   showProducersConsumers?: boolean;
   /** Tab requested in the URL, resolved on the server to avoid a flash of the default tab. */
@@ -18,7 +17,6 @@ interface SchemaPageViewerProps {
 export default function SchemaPageViewer({
   message,
   availableVersions,
-  apiAccessEnabled = false,
   showOwners = true,
   showProducersConsumers = true,
   initialTab,
@@ -38,7 +36,6 @@ export default function SchemaPageViewer({
       availableVersions={availableVersions}
       selectedVersion={message.data.version}
       onVersionChange={handleVersionChange}
-      apiAccessEnabled={apiAccessEnabled}
       showOwners={showOwners}
       showProducersConsumers={showProducersConsumers}
       initialTab={initialTab}

package/eventcatalog/src/components/SchemaExplorer/VersionHistoryModal.tsx

@@ -8,16 +8,9 @@ interface VersionHistoryModalProps {
   onOpenChange: (open: boolean) => void;
   diffs: VersionDiff[];
   messageName: string;
-  apiAccessEnabled?: boolean;
 }
 
-export default function VersionHistoryModal({
-  isOpen,
-  onOpenChange,
-  diffs,
-  messageName,
-  apiAccessEnabled = false,
-}: VersionHistoryModalProps) {
+export default function VersionHistoryModal({ isOpen, onOpenChange, diffs, messageName }: VersionHistoryModalProps) {
   return (
     <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
       <Dialog.Portal>
@@ -48,7 +41,7 @@ export default function VersionHistoryModal({
           {/* Content */}
           <div className="flex-1 overflow-y-auto p-6">
             {diffs.length > 0 ? (
-              <DiffViewer diffs={diffs} apiAccessEnabled={apiAccessEnabled} />
+              <DiffViewer diffs={diffs} />
             ) : (
               <div className="flex items-center justify-center h-full">
                 <p className="text-[rgb(var(--ec-page-text-muted))] text-center">No version comparison available</p>

package/eventcatalog/src/components/SchemaExplorer/parse-schema.ts

@@ -0,0 +1,46 @@
+import { parseProtobufSchema, type ProtobufSchema } from '@utils/protobuf-schema';
+
+/** A schema, parsed for the viewer that shows its properties. Other formats are only shown as code. */
+export type ViewableSchema =
+  | { kind: 'json'; schema: Record<string, any> }
+  | { kind: 'avro'; schema: Record<string, any> }
+  | { kind: 'protobuf'; schema: ProtobufSchema }
+  | { kind: 'code' };
+
+const parseJson = (content: string) => {
+  try {
+    return JSON.parse(content);
+  } catch {
+    return undefined;
+  }
+};
+
+/**
+ * Parses a schema for the JSON Schema, Avro or Protobuf viewer, from its file extension.
+ * Used by the Schema Explorer and the MCP server's schema viewer, so both show the same schemas as properties.
+ */
+export function parseSchemaForViewer(extension: string | undefined, content: string | undefined): ViewableSchema {
+  if (!content?.trim()) return { kind: 'code' };
+
+  switch (extension?.toLowerCase()) {
+    case 'json': {
+      const schema = parseJson(content);
+      return schema && (schema.properties || schema.$schema || schema.type) ? { kind: 'json', schema } : { kind: 'code' };
+    }
+    case 'avro':
+    case 'avsc': {
+      const schema = parseJson(content);
+      return schema?.type ? { kind: 'avro', schema } : { kind: 'code' };
+    }
+    // The extension falls back to the schema format when the schema has no file path, so accept both
+    case 'proto':
+    case 'protobuf':
+      try {
+        return { kind: 'protobuf', schema: parseProtobufSchema(content) };
+      } catch {
+        return { kind: 'code' };
+      }
+    default:
+      return { kind: 'code' };
+  }
+}

package/eventcatalog/src/components/SchemaExplorer/utils.ts

@@ -113,6 +113,17 @@ export const getLanguageForHighlight = (extension?: string): string => {
   }
 };
 
+/** Style of highlighted schema code, shared by the Schema tab and the MCP server's schema viewer */
+export const SCHEMA_CODE_STYLE = {
+  margin: 0,
+  padding: '1.25rem',
+  borderRadius: 0,
+  fontSize: '0.8125rem',
+  lineHeight: '1.625',
+  background: 'transparent',
+  overflow: 'auto',
+} as const;
+
 export const getSchemaTypeLabel = (extension?: string): string => {
   if (!extension) return 'JSON';
   const ext = extension.toLowerCase();

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

@@ -4,19 +4,18 @@ import { ExternalLink, MessageSquare, ServerCog, Wrench } from 'lucide-react';
 import { aiSettingsSchema } from '@utils/eventcatalog-config/config-schema';
 import { ReadOnlyBanner } from './ReadOnlyBanner';
 import { Row, cn } from './Row';
-import { ASSISTANT_CONFIGURATION_DOCS_URL, ASSISTANT_DOCS_URL, ToggleRow, UpgradeRequired } from './SettingsShared';
+import { ASSISTANT_CONFIGURATION_DOCS_URL, ASSISTANT_DOCS_URL, ToggleRow } from './SettingsShared';
 
 interface Props {
   canEdit: boolean;
   initial: { chatEnabled: boolean; llmsTxtEnabled: boolean };
   chatAvailable: boolean;
-  hasPlan: boolean;
   inSSR: boolean;
   hasChatConfigFile: boolean;
   apiBase: string;
 }
 
-export const AssistantSettingsForm = ({ canEdit, initial, chatAvailable, hasPlan, inSSR, hasChatConfigFile, apiBase }: Props) => {
+export const AssistantSettingsForm = ({ canEdit, initial, chatAvailable, inSSR, hasChatConfigFile, apiBase }: Props) => {
   const [chatEnabled, setChatEnabled] = useState(initial.chatEnabled);
   const [pristine, setPristine] = useState(initial.chatEnabled);
   const [saving, setSaving] = useState(false);
@@ -97,12 +96,6 @@ export const AssistantSettingsForm = ({ canEdit, initial, chatAvailable, hasPlan
           {chatEnabled &&
             (chatAvailable ? (
               <ConfigurationRequired />
-            ) : !hasPlan ? (
-              <UpgradeRequired
-                tier="Starter and Scale"
-                blurb="The EventCatalog Assistant is part of our paid plans. Upgrade to give your team a built-in AI agent that answers questions about your architecture."
-                docsUrl={ASSISTANT_DOCS_URL}
-              />
             ) : !inSSR ? (
               <AssistantNeedsSSR />
             ) : !hasChatConfigFile ? (

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

@@ -0,0 +1,288 @@
+import { useEffect, useState } from 'react';
+import { ArrowUpRight, Clock, TriangleAlert } from 'lucide-react';
+import { Row, cn } from './Row';
+import { getTrialStatus, LICENSE_FAQ_URL, LICENSE_REMINDER_DAYS, LICENSE_RENEW_URL, TRIAL_LENGTH_DAYS } from '@utils/trial';
+
+/**
+ * The license status (see getLicenseStatus in @utils/license) with dates as unix ms, so it can be
+ * passed to the browser. Days left are counted there, so a prerendered page stays current.
+ */
+export type LicenseProps =
+  | { state: 'none' }
+  | {
+      state: 'licensed' | 'expired';
+      org?: string;
+      licenseId?: string;
+      issuedAt?: number;
+      expiresAt?: number;
+    }
+  | { state: 'plan'; plan: 'scale' | 'starter' }
+  | { state: 'invalid'; reason: string };
+
+const DAY_IN_MS = 24 * 60 * 60 * 1000;
+
+// A fixed locale and time zone, so the browser renders the same dates as the server
+const formatDate = (date?: Date | number) =>
+  date === undefined ? '—' : new Date(date).toLocaleDateString('en-GB', { dateStyle: 'long', timeZone: 'UTC' });
+const formatDays = (days: number) => `${days} ${days === 1 ? 'day' : 'days'}`;
+
+type Tone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+
+const PILL_TONES: Record<Tone, string> = {
+  success:
+    'border-[rgb(var(--ec-badge-color-green-text)/0.3)] bg-[rgb(var(--ec-badge-color-green-background))] text-[rgb(var(--ec-badge-color-green-text))]',
+  warning:
+    'border-[rgb(var(--ec-badge-color-amber-text)/0.3)] bg-[rgb(var(--ec-badge-color-amber-background))] text-[rgb(var(--ec-badge-color-amber-text))]',
+  danger:
+    'border-[rgb(var(--ec-badge-color-red-text)/0.3)] bg-[rgb(var(--ec-badge-color-red-background))] text-[rgb(var(--ec-badge-color-red-text))]',
+  info: 'border-[rgb(var(--ec-accent)/0.3)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]',
+  neutral: 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text-muted))]',
+};
+
+const StatusPill = ({ tone, children }: { tone: Tone; children: React.ReactNode }) => (
+  <span
+    className={cn('inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold', PILL_TONES[tone])}
+  >
+    <span className="h-1.5 w-1.5 rounded-full bg-current" aria-hidden />
+    {children}
+  </span>
+);
+
+type Detail = { label: string; value: React.ReactNode; mono?: boolean };
+
+const DetailsTable = ({
+  title,
+  status,
+  details,
+}: {
+  title: string;
+  status: { tone: Tone; label: string };
+  details: Detail[];
+}) => (
+  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
+    <div className="flex items-center justify-between gap-3 border-b border-[rgb(var(--ec-page-border))] px-4 py-3">
+      <p className="text-[13px] font-semibold text-[rgb(var(--ec-page-text))]">{title}</p>
+      <StatusPill tone={status.tone}>{status.label}</StatusPill>
+    </div>
+    <dl className="divide-y divide-[rgb(var(--ec-page-border))]">
+      {details.map((detail) => (
+        <div key={detail.label} className="grid grid-cols-[9rem_minmax(0,_1fr)] gap-4 px-4 py-2.5">
+          <dt className="text-[12px] text-[rgb(var(--ec-page-text-muted))]">{detail.label}</dt>
+          <dd
+            className={cn(
+              'min-w-0 break-words text-[13px] text-[rgb(var(--ec-page-text))]',
+              detail.mono && 'font-mono text-[12px]'
+            )}
+          >
+            {detail.value}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  </div>
+);
+
+// Verified when the page was rendered, but may have expired since
+const isExpired = (license: LicenseProps, now: number) =>
+  license.state === 'expired' || (license.state === 'licensed' && license.expiresAt !== undefined && license.expiresAt <= now);
+
+const PLAN_NAMES = { scale: 'EventCatalog Scale', starter: 'EventCatalog Starter' };
+
+// Days left on a license that's about to expire, or undefined
+const getDaysLeft = (license: LicenseProps, now: number) => {
+  if (license.state !== 'licensed' || license.expiresAt === undefined) return;
+  const daysLeft = Math.max(0, Math.ceil((license.expiresAt - now) / DAY_IN_MS));
+  return daysLeft < LICENSE_REMINDER_DAYS ? daysLeft : undefined;
+};
+
+/**
+ * A callout below the license once it's about to expire, or has expired, so it's hard to miss.
+ */
+const LicenseNotice = ({ license, now }: { license: LicenseProps; now: number }) => {
+  const expired = isExpired(license, now);
+  const daysLeft = getDaysLeft(license, now);
+  if (!expired && daysLeft === undefined) return null;
+
+  const expiresAt = license.state === 'licensed' || license.state === 'expired' ? license.expiresAt : undefined;
+  const Icon = expired ? TriangleAlert : Clock;
+  return (
+    <div
+      role="alert"
+      className={cn(
+        'flex gap-3 rounded-lg border p-4',
+        expired
+          ? 'border-[rgb(var(--ec-badge-color-red-text)/0.3)] bg-[rgb(var(--ec-badge-color-red-background))] text-[rgb(var(--ec-badge-color-red-text))]'
+          : 'border-[rgb(var(--ec-badge-color-amber-text)/0.3)] bg-[rgb(var(--ec-badge-color-amber-background))] text-[rgb(var(--ec-badge-color-amber-text))]'
+      )}
+    >
+      <Icon className="mt-0.5 h-4 w-4 shrink-0" aria-hidden />
+      <div className="space-y-1">
+        <p className="text-[13px] font-semibold">
+          {expired ? 'Your commercial license has expired' : `Your commercial license expires in ${formatDays(daysLeft!)}`}
+        </p>
+        <p className="text-[13px] opacity-90">
+          {expired
+            ? `It expired on ${formatDate(expiresAt)}. Renew it to keep using EventCatalog commercially.`
+            : `It expires on ${formatDate(expiresAt)}. Renew it before then to keep using EventCatalog commercially.`}
+        </p>
+        <div className="flex flex-wrap items-center gap-3 pt-2">
+          <a
+            href={LICENSE_RENEW_URL}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-text))] px-3.5 py-1.5 text-[13px] font-medium text-[rgb(var(--ec-page-bg))] shadow-sm transition-opacity hover:opacity-85"
+          >
+            Renew license
+            <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
+          </a>
+          <a
+            href={LICENSE_FAQ_URL}
+            target="_blank"
+            rel="noreferrer"
+            className="text-[13px] font-medium underline underline-offset-2 hover:opacity-80"
+          >
+            License FAQ
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const LicenseTable = ({ license, now }: { license: LicenseProps; now: number }) => {
+  if (license.state === 'plan') {
+    return (
+      <DetailsTable
+        title={PLAN_NAMES[license.plan]}
+        status={{ tone: 'success', label: 'Active' }}
+        details={[{ label: 'License key', value: `EVENTCATALOG_${license.plan.toUpperCase()}_LICENSE_KEY`, mono: true }]}
+      />
+    );
+  }
+  const expired = isExpired(license, now);
+  if (license.state === 'licensed' && !expired) {
+    const daysLeft = Math.max(0, Math.ceil(((license.expiresAt ?? now) - now) / DAY_IN_MS));
+    const expiringSoon = daysLeft < LICENSE_REMINDER_DAYS;
+    return (
+      <DetailsTable
+        title="Commercial license"
+        status={expiringSoon ? { tone: 'warning', label: 'Expires soon' } : { tone: 'success', label: 'Active' }}
+        details={[
+          { label: 'Licensed to', value: license.org || '—' },
+          { label: 'License ID', value: license.licenseId || '—', mono: true },
+          { label: 'Issued', value: formatDate(license.issuedAt) },
+          { label: 'Expires', value: formatDate(license.expiresAt) },
+          { label: 'Time left', value: formatDays(daysLeft) },
+        ]}
+      />
+    );
+  }
+  if ((license.state === 'licensed' || license.state === 'expired') && expired) {
+    return (
+      <DetailsTable
+        title="Commercial license"
+        status={{ tone: 'danger', label: 'Expired' }}
+        details={[
+          { label: 'Licensed to', value: license.org || '—' },
+          { label: 'License ID', value: license.licenseId || '—', mono: true },
+          { label: 'Issued', value: formatDate(license.issuedAt) },
+          { label: 'Expired', value: formatDate(license.expiresAt) },
+        ]}
+      />
+    );
+  }
+  if (license.state === 'invalid') {
+    return (
+      <DetailsTable
+        title="Commercial license"
+        status={{ tone: 'warning', label: 'Not verified' }}
+        details={[
+          { label: 'File', value: 'license.jwt', mono: true },
+          { label: 'Problem', value: `It could not be verified: ${license.reason}.` },
+        ]}
+      />
+    );
+  }
+  return null;
+};
+
+const TrialTable = ({ trialStartedAt, now }: { trialStartedAt?: number; now: number }) => {
+  const trial = getTrialStatus(trialStartedAt, now);
+  if (!trial) {
+    return (
+      <DetailsTable
+        title="EventCatalog trial"
+        status={{ tone: 'neutral', label: 'Not started' }}
+        details={[
+          {
+            label: 'Start date',
+            value: 'No trial start date (tsd) in eventcatalog.config.js.',
+          },
+        ]}
+      />
+    );
+  }
+  const startedAt = trial.endsAt.getTime() - TRIAL_LENGTH_DAYS * DAY_IN_MS;
+  return (
+    <DetailsTable
+      title="EventCatalog trial"
+      status={trial.ended ? { tone: 'warning', label: 'Ended' } : { tone: 'info', label: 'Active' }}
+      details={[
+        { label: 'Length', value: formatDays(TRIAL_LENGTH_DAYS) },
+        { label: 'Started', value: formatDate(startedAt) },
+        { label: trial.ended ? 'Ended' : 'Ends', value: formatDate(trial.endsAt) },
+        ...(trial.ended ? [] : [{ label: 'Time left', value: formatDays(trial.daysLeft) }]),
+      ]}
+    />
+  );
+};
+
+interface Props {
+  license: LicenseProps;
+  /** The trial start date (`tsd` in eventcatalog.config.js), unix ms */
+  trialStartedAt?: number;
+  /** When the page was rendered, unix ms: the first render matches the server's, then it counts from now */
+  renderedAt: number;
+}
+
+export const LicenseSettings = ({ license, trialStartedAt, renderedAt }: Props) => {
+  const [now, setNow] = useState(renderedAt);
+  useEffect(() => setNow(Date.now()), []);
+
+  return (
+    <div className="divide-y divide-[rgb(var(--ec-page-border))]">
+      <Row
+        title="License"
+        description="EventCatalog is licensed under the Business Source License 1.1. Your license is read from the license.jwt file in the root of your catalog."
+        canEdit={false}
+        dirty={false}
+      >
+        <div className="space-y-4">
+          <LicenseTable license={license} now={now} />
+          <LicenseNotice license={license} now={now} />
+          {/* The trial applies until there's a valid license or plan */}
+          {license.state !== 'plan' && (license.state !== 'licensed' || isExpired(license, now)) && (
+            <TrialTable trialStartedAt={trialStartedAt} now={now} />
+          )}
+        </div>
+      </Row>
+
+      <Row
+        title="Learn more"
+        description="Who can use EventCatalog for free, and when you need a commercial license."
+        canEdit={false}
+        dirty={false}
+      >
+        <a
+          href={LICENSE_FAQ_URL}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-text))] px-4 py-2 text-[13px] font-medium text-[rgb(var(--ec-page-bg))] shadow-sm transition-opacity hover:opacity-85"
+        >
+          Read the license FAQ
+          <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
+        </a>
+      </Row>
+    </div>
+  );
+};

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

@@ -4,27 +4,18 @@ import { Bot, FileText } from 'lucide-react';
 import { aiSettingsSchema } from '@utils/eventcatalog-config/config-schema';
 import { ReadOnlyBanner } from './ReadOnlyBanner';
 import { Row } from './Row';
-import { ToggleRow, UpgradeRequired, UrlPanel } from './SettingsShared';
+import { ToggleRow, UrlPanel } from './SettingsShared';
 
 interface Props {
   canEdit: boolean;
   initial: { llmsTxtEnabled: boolean; chatEnabled: boolean };
-  hasScalePlan: boolean;
   apiBase: string;
   llmsTxtUrl: string;
   llmsFullTxtUrl: string;
   schemasTxtUrl: string;
 }
 
-export const LlmAccessSettingsForm = ({
-  canEdit,
-  initial,
-  hasScalePlan,
-  apiBase,
-  llmsTxtUrl,
-  llmsFullTxtUrl,
-  schemasTxtUrl,
-}: Props) => {
+export const LlmAccessSettingsForm = ({ canEdit, initial, apiBase, llmsTxtUrl, llmsFullTxtUrl, schemasTxtUrl }: Props) => {
   const [llmsTxtEnabled, setLlmsTxtEnabled] = useState(initial.llmsTxtEnabled);
   const [pristine, setPristine] = useState(initial.llmsTxtEnabled);
   const [saving, setSaving] = useState(false);
@@ -108,14 +99,7 @@ export const LlmAccessSettingsForm = ({
         canEdit={false}
         dirty={false}
       >
-        {hasScalePlan ? (
-          <SchemasTxtAvailable url={schemasTxtUrl} />
-        ) : (
-          <UpgradeRequired
-            tier="Scale"
-            blurb="The schema index is a Scale-plan feature. Upgrade to publish a machine-readable catalogue of your schemas alongside llms.txt."
-          />
-        )}
+        <SchemasTxtAvailable url={schemasTxtUrl} />
       </Row>
     </form>
   );