@eventcatalog/core 3.30.0 → 3.31.1

package/eventcatalog/src/pages/api/settings/ai.ts

@@ -0,0 +1,57 @@
+import type { APIRoute } from 'astro';
+import { isDevMode } from '@utils/feature';
+import { aiSettingsSchema } from '@utils/eventcatalog-config/config-schema';
+import {
+  applyConfigUpdate,
+  readConfigSource,
+  writeConfigUpdate,
+  type ConfigUpdate,
+} from '@utils/eventcatalog-config/config-writer';
+
+export const prerender = !isDevMode();
+
+const json = (status: number, body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+export const POST: APIRoute = async ({ request }) => {
+  if (!isDevMode()) {
+    return json(403, { error: 'Settings can only be edited when running in dev mode (EVENTCATALOG_DEV_MODE=true).' });
+  }
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json(400, { error: 'Invalid JSON body' });
+  }
+
+  const parsed = aiSettingsSchema.safeParse(body);
+  if (!parsed.success) {
+    return json(400, { error: 'Validation failed', issues: parsed.error.issues });
+  }
+
+  let source: string;
+  try {
+    source = readConfigSource();
+  } catch (err) {
+    return json(500, { error: `Could not read eventcatalog.config.js: ${(err as Error).message}` });
+  }
+
+  const data = parsed.data;
+  const update: ConfigUpdate = {
+    llmsTxt: { enabled: data.llmsTxtEnabled },
+    chat: { enabled: data.chatEnabled },
+  };
+
+  try {
+    applyConfigUpdate(source, update);
+    writeConfigUpdate(update);
+  } catch (err) {
+    return json(500, { error: `Could not update eventcatalog.config.js: ${(err as Error).message}` });
+  }
+
+  return json(200, { ok: true, settings: data });
+};

package/eventcatalog/src/pages/api/settings/general.ts

@@ -0,0 +1,71 @@
+import type { APIRoute } from 'astro';
+import { isDevMode } from '@utils/feature';
+import { generalSettingsSchema } from '@utils/eventcatalog-config/config-schema';
+import {
+  applyConfigUpdate,
+  readConfigSource,
+  writeConfigUpdate,
+  type ConfigUpdate,
+} from '@utils/eventcatalog-config/config-writer';
+
+export const prerender = !isDevMode();
+
+const json = (status: number, body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+export const POST: APIRoute = async ({ request }) => {
+  if (!isDevMode()) {
+    return json(403, { error: 'Settings can only be edited when running in dev mode (EVENTCATALOG_DEV_MODE=true).' });
+  }
+
+  let body: unknown;
+  try {
+    body = await request.json();
+  } catch {
+    return json(400, { error: 'Invalid JSON body' });
+  }
+
+  const parsed = generalSettingsSchema.safeParse(body);
+  if (!parsed.success) {
+    return json(400, { error: 'Validation failed', issues: parsed.error.issues });
+  }
+
+  // Verify the config file exists and is parseable before we attempt the write.
+  let source: string;
+  try {
+    source = readConfigSource();
+  } catch (err) {
+    return json(500, { error: `Could not read eventcatalog.config.js: ${(err as Error).message}` });
+  }
+
+  const data = parsed.data;
+  const update: ConfigUpdate = {
+    title: data.title,
+    tagline: data.tagline ?? null,
+    organizationName: data.organizationName ?? null,
+    homepageLink: data.homepageLink ?? null,
+    editUrl: data.editUrl ?? null,
+    repositoryUrl: data.repositoryUrl ?? null,
+    theme: data.theme,
+  };
+
+  if (data.logo) {
+    update.logo = {
+      alt: data.logo.alt ?? null,
+      text: data.logo.text ?? null,
+    };
+  }
+
+  try {
+    // Dry-run the write first to surface parse errors before touching disk.
+    applyConfigUpdate(source, update);
+    writeConfigUpdate(update);
+  } catch (err) {
+    return json(500, { error: `Could not update eventcatalog.config.js: ${(err as Error).message}` });
+  }
+
+  return json(200, { ok: true, settings: data });
+};

package/eventcatalog/src/pages/api/settings/logo.ts

@@ -0,0 +1,113 @@
+import type { APIRoute } from 'astro';
+import fs from 'node:fs';
+import path from 'node:path';
+import { isDevMode } from '@utils/feature';
+import { writeConfigUpdate } from '@utils/eventcatalog-config/config-writer';
+
+export const prerender = !isDevMode();
+
+const MAX_BYTES = 2 * 1024 * 1024;
+const ALLOWED: Record<string, string> = {
+  'image/png': 'png',
+  'image/jpeg': 'jpg',
+  'image/svg+xml': 'svg',
+  'image/webp': 'webp',
+};
+
+const json = (status: number, body: unknown) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+
+const projectRoot = () => process.env.PROJECT_DIR ?? process.cwd();
+const publicDir = () => path.join(projectRoot(), 'public');
+const LOGO_BASENAME = 'eventcatalog-logo';
+
+const removeExistingLogos = () => {
+  const dir = publicDir();
+  if (!fs.existsSync(dir)) return;
+  for (const entry of fs.readdirSync(dir)) {
+    if (entry.startsWith(`${LOGO_BASENAME}.`)) {
+      fs.unlinkSync(path.join(dir, entry));
+    }
+  }
+};
+
+/**
+ * Best-effort SVG sanitization: strips <script> blocks and on* event handlers.
+ * Not a full sanitizer; we accept this as a v1 limitation for SVG uploads.
+ */
+const sanitizeSvg = (svg: string): string =>
+  svg
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/\son[a-z]+\s*=\s*"[^"]*"/gi, '')
+    .replace(/\son[a-z]+\s*=\s*'[^']*'/gi, '')
+    .replace(/javascript:/gi, '');
+
+export const POST: APIRoute = async ({ request }) => {
+  if (!isDevMode()) {
+    return json(403, { error: 'Logo can only be changed when running in dev mode (EVENTCATALOG_DEV_MODE=true).' });
+  }
+
+  let form: FormData;
+  try {
+    form = await request.formData();
+  } catch {
+    return json(400, { error: 'Expected multipart/form-data body' });
+  }
+
+  const file = form.get('logo');
+  if (!(file instanceof File)) {
+    return json(400, { error: 'Missing `logo` file field' });
+  }
+
+  const ext = ALLOWED[file.type];
+  if (!ext) {
+    return json(400, { error: `Unsupported logo type: ${file.type}. Allowed: PNG, JPG, SVG, WebP.` });
+  }
+
+  if (file.size > MAX_BYTES) {
+    return json(413, { error: `Logo exceeds 2MB size limit (got ${file.size} bytes).` });
+  }
+
+  const buffer = Buffer.from(await file.arrayBuffer());
+  const dir = publicDir();
+  if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+
+  removeExistingLogos();
+
+  const targetName = `${LOGO_BASENAME}.${ext}`;
+  const targetPath = path.join(dir, targetName);
+
+  if (ext === 'svg') {
+    const sanitized = sanitizeSvg(buffer.toString('utf8'));
+    fs.writeFileSync(targetPath, sanitized, 'utf8');
+  } else {
+    fs.writeFileSync(targetPath, buffer);
+  }
+
+  const src = `/${targetName}`;
+  try {
+    writeConfigUpdate({ logo: { src } });
+  } catch (err) {
+    return json(500, { error: `Logo saved but config update failed: ${(err as Error).message}` });
+  }
+
+  return json(200, { ok: true, src });
+};
+
+export const DELETE: APIRoute = async () => {
+  if (!isDevMode()) {
+    return json(403, { error: 'Logo can only be changed when running in dev mode.' });
+  }
+
+  removeExistingLogos();
+  try {
+    writeConfigUpdate({ logo: { src: null } });
+  } catch (err) {
+    return json(500, { error: `Logo files removed but config update failed: ${(err as Error).message}` });
+  }
+
+  return json(200, { ok: true });
+};

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/[docVersion]/index.astro

@@ -129,7 +129,7 @@ const pagefindAttributes =
             )
           }
         </div>
-        <div class="prose py-8 max-w-none">
+        <div class="prose py-4 max-w-none">
           <Content components={components(props)} />
         </div>
       </div>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/[docType]/[docId]/index.astro

@@ -51,12 +51,10 @@ const pagefindAttributes =
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
         <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
-          <div>
-            <div class="flex justify-between items-center">
-              <div class="flex items-center gap-2">
-                <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
-              </div>
-              <div class="hidden lg:block">
+          <div class="flex flex-col gap-4">
+            <div class="flex justify-between items-center gap-4">
+              <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{title}</h2>
+              <div class="hidden lg:block shrink-0">
                 <CopyAsMarkdown
                   client:only="react"
                   schemas={[]}
@@ -69,32 +67,28 @@ const pagefindAttributes =
                 />
               </div>
             </div>
+            {props.data.summary && <p class="text-base text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>}
+            {
+              badges.length > 0 && (
+                <div class="flex flex-wrap gap-3 py-4">
+                  {badges.map((badge: any) => (
+                    <span
+                      class={`
+                        inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
+                        bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
+                        text-[rgb(var(--ec-page-text))]
+                      `}
+                    >
+                      {badge.iconComponent && (
+                        <badge.iconComponent className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />
+                      )}
+                      <span>{badge.content}</span>
+                    </span>
+                  ))}
+                </div>
+              )
+            }
           </div>
-          {
-            props.data.summary && (
-              <p class="text-base pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</p>
-            )
-          }
-          {
-            badges.length > 0 && (
-              <div class="flex flex-wrap gap-3 py-4">
-                {badges.map((badge: any) => (
-                  <span
-                    class={`
-                      inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium
-                      bg-[rgb(var(--ec-content-hover))] border border-[rgb(var(--ec-page-border))]
-                      text-[rgb(var(--ec-page-text))]
-                    `}
-                  >
-                    {badge.iconComponent && (
-                      <badge.iconComponent className="w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))]" />
-                    )}
-                    <span>{badge.content}</span>
-                  </span>
-                ))}
-              </div>
-            )
-          }
         </div>
         <div data-pagefind-ignore>
           {
@@ -129,7 +123,7 @@ const pagefindAttributes =
             )
           }
         </div>
-        <div class="prose py-8 max-w-none">
+        <div class="prose py-4 max-w-none">
           <Content components={components(props)} />
         </div>
       </div>

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/graphql/[filename].astro

@@ -80,7 +80,7 @@ const pagefindAttributes =
             </div>
 
             {
-              badges && (
+              badges && badges.length > 0 && (
                 <div class="flex flex-wrap gap-3 py-4">
                   {badges.map((badge: any) => {
                     return (

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

@@ -248,6 +248,7 @@ const {
 
 let friendlyCollectionName = props.collection.slice(0, props.collection.length - 1);
 friendlyCollectionName = friendlyCollectionName === 'querie' ? 'query' : friendlyCollectionName;
+friendlyCollectionName = friendlyCollectionName === 'entitie' ? 'entity' : friendlyCollectionName;
 
 const schemasForResource = getSchemasFromResource(props);
 
@@ -287,38 +288,46 @@ nodeGraphs.push({
   <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]" {...pagefindAttributes}>
     <div class="flex docs-layout w-full">
       <div class="w-full lg:mr-2 pr-24 py-8 bg-[rgb(var(--ec-page-bg))]">
-        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-2">
+        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-6 pt-4">
           <div>
-            <div class="flex justify-between items-center">
-              <div class="flex items-center gap-2">
-                {
-                  headerIconSrc && (
-                    <img
-                      src={headerIconSrc}
-                      alt={props.data.name}
-                      class="w-8 h-8 md:w-10 md:h-10 object-contain rounded-md shrink-0"
+            <div class="flex justify-between items-end">
+              <div class="flex flex-col gap-4">
+                <span class="text-xs md:text-sm font-semibold text-[rgb(var(--ec-accent))] capitalize">
+                  {friendlyCollectionName}
+                </span>
+                <div class="flex items-center gap-3">
+                  {
+                    headerIconSrc && (
+                      <img
+                        src={headerIconSrc}
+                        alt={props.data.name}
+                        class="w-8 h-8 md:w-10 md:h-10 object-contain rounded-md shrink-0"
+                      />
+                    )
+                  }
+                  <div class="flex items-center gap-2">
+                    <h2
+                      id="doc-page-header"
+                      class={`text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))] ${props.data.deprecated && hasDeprecated ? 'text-red-500' : ''}`}
+                    >
+                      {props.data.name}
+                      {props.data.latestVersion !== props.data.version && <span>(v{props.data.version})</span>}
+                    </h2>
+                    <FavoriteButton
+                      client:load
+                      nodeKey={`${collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap]}:${props.data.id}:${props.data.version}`}
+                      title={props.data.name}
+                      badge={collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap]
+                        .charAt(0)
+                        .toUpperCase() +
+                        collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap].slice(1)}
+                      href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
+                      size="md"
                     />
-                  )
-                }
-                <h2
-                  id="doc-page-header"
-                  class={`text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))] ${props.data.deprecated && hasDeprecated ? 'text-red-500' : ''}`}
-                >
-                  {props.data.name}
-                  {props.data.latestVersion !== props.data.version && <span>(v{props.data.version})</span>}
-                </h2>
-                <FavoriteButton
-                  client:load
-                  nodeKey={`${collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap]}:${props.data.id}:${props.data.version}`}
-                  title={props.data.name}
-                  badge={collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap]
-                    .charAt(0)
-                    .toUpperCase() + collectionToResourceMap[props.collection as keyof typeof collectionToResourceMap].slice(1)}
-                  href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
-                  size="md"
-                />
+                  </div>
+                </div>
               </div>
-              <div class="hidden lg:block">
+              <div class="hidden lg:block mb-2">
                 <CopyAsMarkdown
                   client:only="react"
                   schemas={schemasForResource}
@@ -333,10 +342,10 @@ nodeGraphs.push({
               </div>
             </div>
 
-            <h2 class="text-base pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</h2>
+            <h2 class="text-base pt-4 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</h2>
             {
               badges && (
-                <div class="flex flex-wrap gap-3 py-4">
+                <div class="flex flex-wrap gap-3 pt-6 pb-2">
                   {badges.map((badge: any) => {
                     return (
                       <span

package/eventcatalog/src/pages/docs/[type]/[id]/language/[dictionaryId]/index.astro

@@ -77,7 +77,7 @@ const badges = [
             <p class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{ubiquitousLanguage.summary}</p>
             <!-- Add badge -->
             {
-              badges && (
+              badges && badges.length > 0 && (
                 <div class="flex flex-wrap gap-3 py-4">
                   {badges.map((badge: any) => {
                     return (

package/eventcatalog/src/pages/docs/[type]/[id]/language/index.astro

@@ -47,7 +47,7 @@ const { subdomains, duplicateTerms } = ubiquitousLanguageData;
                   type="text"
                   id="searchInput"
                   placeholder="Search terms..."
-                  class="w-full px-4 py-2.5 pl-10 border border-[rgb(var(--ec-input-border))] rounded-lg focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-[rgb(var(--ec-accent))] text-sm bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-input-placeholder))] transition-colors"
+                  class="block w-full rounded-md border-0 py-1.5 pr-4 pl-10 text-sm font-light text-[rgb(var(--ec-header-text))] bg-[rgb(var(--ec-header-bg))] shadow-xs ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:outline-none"
                 />
                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                   <svg class="h-4 w-4 text-[rgb(var(--ec-icon-color))]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -59,14 +59,6 @@ const { subdomains, duplicateTerms } = ubiquitousLanguageData;
                   </svg>
                 </div>
               </div>
-              <div class="mt-2 text-right">
-                <span
-                  class="inline-flex items-center px-2 py-1 text-xs font-medium text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-md"
-                  id="resultsCount"
-                >
-                  {/* This will be updated by JavaScript */}
-                </span>
-              </div>
             </div>
           </div>
         </div>
@@ -323,15 +315,11 @@ const { subdomains, duplicateTerms } = ubiquitousLanguageData;
     function initializeSearch() {
       const searchInput = document.getElementById('searchInput');
       const domainSections = document.querySelectorAll('[data-domain-section]');
-      const resultsCount = document.getElementById('resultsCount');
 
       function updateResults() {
         //@ts-ignore
         const searchTerm = searchInput?.value.toLowerCase() || '';
-        let totalVisibleTerms = 0;
-        let totalTerms = 0;
 
-        // Handle search for each domain section
         domainSections.forEach((section) => {
           const domainId = section.getAttribute('data-domain-section');
           const domainCards = section.querySelectorAll('.term-card');
@@ -339,19 +327,14 @@ const { subdomains, duplicateTerms } = ubiquitousLanguageData;
           let domainVisibleCount = 0;
 
           domainCards.forEach((card) => {
-            totalTerms++;
             const title = card.querySelector('h4')?.textContent?.toLowerCase() || '';
             const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
             const matches = searchTerm === '' || title.includes(searchTerm) || description.includes(searchTerm);
 
             card.classList.toggle('hidden', !matches);
-            if (matches) {
-              domainVisibleCount++;
-              totalVisibleTerms++;
-            }
+            if (matches) domainVisibleCount++;
           });
 
-          // Show/hide domain-specific no results message
           if (domainNoResults) {
             if (searchTerm.trim() === '') {
               domainNoResults.classList.add('hidden');
@@ -360,16 +343,9 @@ const { subdomains, duplicateTerms } = ubiquitousLanguageData;
             }
           }
         });
-
-        // Update results count
-        if (resultsCount) {
-          resultsCount.textContent = `Showing ${totalVisibleTerms} terms`;
-        }
       }
 
       searchInput?.addEventListener('input', updateResults);
-
-      // Initialize results count
       updateResults();
     }
 

package/eventcatalog/src/pages/docs/llm/llms.txt.ts

@@ -2,7 +2,7 @@ import { getCollection } from 'astro:content';
 import config from '@config';
 import type { APIRoute } from 'astro';
 
-import { isCustomDocsEnabled, isResourceDocsEnabled } from '@utils/feature';
+import { isCustomDocsEnabled, isResourceDocsEnabled, isLLMSTxtEnabled } from '@utils/feature';
 import { getUbiquitousLanguage } from '@utils/collections/domains';
 import { getResourceDocs } from '@utils/collections/resource-docs';
 
@@ -82,6 +82,10 @@ const renderEntities = (baseUrl: string) => {
 };
 
 export const GET: APIRoute = async ({ params, request }) => {
+  if (!isLLMSTxtEnabled()) {
+    return new Response('llms.txt is not enabled for this Catalog.', { status: 404 });
+  }
+
   const url = new URL(request.url);
   const baseUrl = process.env.LLMS_TXT_BASE_URL || `${url.origin}`;
 

package/eventcatalog/src/pages/docs/users/[id]/index.astro

@@ -74,7 +74,7 @@ const pageTitle = `User | ${props.data.name}`;
                 <img
                   src={props.data.avatarUrl}
                   alt={`${props.data.name}'s profile picture`}
-                  class="w-20 h-20 rounded-full object-cover border-2 border-[rgb(var(--ec-page-border))]"
+                  class="w-20 h-20 rounded-md object-cover border-2 border-[rgb(var(--ec-page-border))]"
                 />
               )
             }

package/eventcatalog/src/pages/settings/assistant.astro

@@ -0,0 +1,37 @@
+---
+import fs from 'node:fs';
+import path from 'node:path';
+import SettingsLayout from '@layouts/SettingsLayout.astro';
+import { AssistantSettingsForm } from '@components/Settings/AssistantSettingsForm';
+import { isDevMode, isSSR, isEventCatalogStarterEnabled, isEventCatalogScaleEnabled } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
+import config from '@config';
+
+const canEdit = isDevMode();
+
+const initial = {
+  llmsTxtEnabled: config?.llmsTxt?.enabled ?? true,
+  chatEnabled: config?.chat?.enabled ?? true,
+};
+
+const projectRoot = process.env.PROJECT_DIR ?? process.cwd();
+const hasChatConfigFile = fs.existsSync(path.join(projectRoot, 'eventcatalog.chat.js'));
+const hasPlan = isEventCatalogStarterEnabled() || isEventCatalogScaleEnabled();
+const inSSR = isSSR();
+const chatAvailable = hasPlan && hasChatConfigFile && inSSR;
+
+const apiBase = buildUrl('/api/settings');
+---
+
+<SettingsLayout title="Assistant Agent" active="assistant">
+  <AssistantSettingsForm
+    client:load
+    canEdit={canEdit}
+    initial={initial}
+    chatAvailable={chatAvailable}
+    hasPlan={hasPlan}
+    inSSR={inSSR}
+    hasChatConfigFile={hasChatConfigFile}
+    apiBase={apiBase}
+  />
+</SettingsLayout>

package/eventcatalog/src/pages/settings/billing.astro

@@ -0,0 +1,17 @@
+---
+import SettingsLayout from '@layouts/SettingsLayout.astro';
+import { BillingSettingsForm, type PlanId } from '@components/Settings/BillingSettingsForm';
+import { isEventCatalogStarterEnabled, isEventCatalogScaleEnabled } from '@utils/feature';
+
+// Detect which plan is active. Enterprise has no env flag of its own — it includes
+// Scale features, so an explicit Enterprise toggle would need a separate flag.
+// For now, treat anything Scale-licensed as Scale; Enterprise users will still see
+// upgrade copy on the Scale card but the Plans grid is the canonical source.
+let currentPlan: PlanId = 'community';
+if (isEventCatalogScaleEnabled()) currentPlan = 'scale';
+else if (isEventCatalogStarterEnabled()) currentPlan = 'starter';
+---
+
+<SettingsLayout title="Billing" active="billing">
+  <BillingSettingsForm client:load currentPlan={currentPlan} />
+</SettingsLayout>

package/eventcatalog/src/pages/settings/general.astro

@@ -0,0 +1,32 @@
+---
+import SettingsLayout from '@layouts/SettingsLayout.astro';
+import { GeneralSettingsForm } from '@components/Settings/GeneralSettingsForm';
+import { isDevMode } from '@utils/feature';
+import { buildUrl } from '@utils/url-builder';
+import config from '@config';
+
+const canEdit = isDevMode();
+
+const initial = {
+  title: config?.title ?? '',
+  tagline: config?.tagline,
+  organizationName: config?.organizationName,
+  homepageLink: config?.homepageLink,
+  editUrl: config?.editUrl,
+  repositoryUrl: config?.repositoryUrl,
+  logo: config?.logo
+    ? {
+        alt: config.logo.alt,
+        text: config.logo.text,
+        src: config.logo.src,
+      }
+    : undefined,
+  theme: config?.theme || 'default',
+};
+
+const apiBase = buildUrl('/api/settings');
+---
+
+<SettingsLayout title="General" active="general">
+  <GeneralSettingsForm client:load canEdit={canEdit} initial={initial} apiBase={apiBase} />
+</SettingsLayout>

package/eventcatalog/src/pages/settings/index.astro

@@ -0,0 +1,21 @@
+---
+import { buildUrl } from '@utils/url-builder';
+
+const target = buildUrl('/settings/general');
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content={`0; url=${target}`} />
+    <link rel="canonical" href={target} />
+    <title>Redirecting…</title>
+  </head>
+  <body>
+    <p>Redirecting to <a href={target}>{target}</a>…</p>
+    <script is:inline define:vars={{ target }}>
+      window.location.replace(target);
+    </script>
+  </body>
+</html>