@eventcatalog/core 3.30.0 → 3.31.1

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

@@ -0,0 +1,91 @@
+import { ExternalLink, Server, ServerCog } from 'lucide-react';
+import { Row } from './Row';
+import { LiveCard, MCP_DOCS_URL, UpgradeRequired, UrlPanel } from './SettingsShared';
+
+interface Props {
+  hasScalePlan: boolean;
+  inSSR: boolean;
+  mcpUrl: string;
+}
+
+export const McpSettingsForm = ({ hasScalePlan, inSSR, mcpUrl }: Props) => {
+  const mcpAvailable = hasScalePlan && inSSR;
+
+  return (
+    <div className="divide-y divide-[rgb(var(--ec-page-border))]">
+      <Row
+        title="MCP Server"
+        description="Expose your catalog over the Model Context Protocol so AI agents (Claude Desktop, Cursor, etc.) can query your architecture as a live data source."
+        canEdit={false}
+        dirty={false}
+      >
+        {mcpAvailable ? (
+          <McpAvailable url={mcpUrl} />
+        ) : !hasScalePlan ? (
+          <UpgradeRequired
+            tier="Scale"
+            blurb="The MCP Server is a Scale-plan feature. Upgrade to expose your catalog to AI agents over the Model Context Protocol."
+            docsUrl={MCP_DOCS_URL}
+          />
+        ) : (
+          <McpNeedsSSR />
+        )}
+      </Row>
+    </div>
+  );
+};
+
+const McpAvailable = ({ url }: { url: string }) => (
+  <div className="space-y-3">
+    <LiveCard
+      icon={<Server className="h-4 w-4" aria-hidden />}
+      title="MCP server is live"
+      description="Point Claude Desktop, Cursor, or any MCP-aware client at the endpoint below."
+    />
+    <div className="rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.4)] px-4 py-3">
+      <p className="text-[12px] font-medium text-[rgb(var(--ec-page-text))]">Endpoint</p>
+      <UrlPanel url={url} />
+      <a
+        href={MCP_DOCS_URL}
+        target="_blank"
+        rel="noreferrer"
+        className="mt-3 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-accent))] hover:underline"
+      >
+        Connect a client
+        <ExternalLink className="h-3 w-3" aria-hidden />
+      </a>
+    </div>
+  </div>
+);
+
+const McpNeedsSSR = () => (
+  <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="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))]">
+        <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))]">
+            SSR
+          </span>
+        </div>
+        <p className="mt-1 text-[12px] leading-snug text-[rgb(var(--ec-page-text-muted))]">
+          The MCP Server requires your catalog to run in server (SSR) mode. Follow the setup guide to switch.
+        </p>
+        <div className="mt-3 flex flex-wrap items-center gap-3">
+          <a
+            href={MCP_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))]"
+          >
+            MCP setup guide
+            <ExternalLink className="h-3 w-3" aria-hidden />
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+);

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

@@ -0,0 +1,18 @@
+import { Lock } from 'lucide-react';
+
+export const ReadOnlyBanner = () => (
+  <div
+    role="status"
+    className="mb-6 flex items-start gap-3 rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] p-4 text-sm text-[rgb(var(--ec-page-text))]"
+  >
+    <Lock className="mt-0.5 h-4 w-4 flex-shrink-0 text-[rgb(var(--ec-page-text-muted))]" aria-hidden />
+    <div className="space-y-1">
+      <p className="font-medium">Read-only</p>
+      <p className="text-[rgb(var(--ec-page-text-muted))]">
+        To edit these settings, run EventCatalog locally or update them in your{' '}
+        <code className="rounded bg-[rgb(var(--ec-page-bg)/0.78)] px-1 py-0.5 font-mono text-xs">eventcatalog.config.js</code>{' '}
+        file.
+      </p>
+    </div>
+  </div>
+);

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

@@ -0,0 +1,59 @@
+import { AlertCircle } from 'lucide-react';
+
+export const cn = (...parts: Array<string | false | undefined | null>): string => parts.filter(Boolean).join(' ');
+
+export const inputBase =
+  'block w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg,var(--ec-page-bg)))] px-3 py-2 text-[13px] text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-page-text-muted)/0.7)] transition-colors focus:border-[rgb(var(--ec-accent)/0.6)] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)] disabled:cursor-not-allowed disabled:opacity-60';
+
+export const monoInput = 'font-mono text-[12.5px] tracking-tight';
+
+export const inputError = 'border-red-500/70 focus:border-red-500 focus:ring-red-500/20';
+
+interface RowProps {
+  title: string;
+  description: string;
+  canEdit: boolean;
+  dirty: boolean;
+  saving?: boolean;
+  onSave?: () => void;
+  error?: string;
+  children: React.ReactNode;
+}
+
+export const Row = ({ title, description, canEdit, dirty, saving, onSave, error, children }: RowProps) => (
+  <section className="grid grid-cols-1 gap-6 py-8 md:grid-cols-[minmax(0,_18rem)_minmax(0,_1fr)] md:gap-12">
+    <header className="space-y-1.5">
+      <h3 className="text-[14px] font-semibold tracking-tight text-[rgb(var(--ec-page-text))]">{title}</h3>
+      <p className="text-[13px] leading-relaxed text-[rgb(var(--ec-content-text-muted,var(--ec-page-text-muted)))]">
+        {description}
+      </p>
+    </header>
+    <div className="space-y-2.5">
+      {children}
+      {error && (
+        <p className="flex items-center gap-1.5 text-[12px] text-red-500">
+          <AlertCircle className="h-3 w-3 flex-shrink-0" aria-hidden />
+          {error}
+        </p>
+      )}
+      {onSave && canEdit && (
+        <div className="pt-1">
+          <button
+            type="button"
+            onClick={onSave}
+            disabled={!dirty || saving}
+            className={cn(
+              'inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-[12px] font-medium transition-colors',
+              dirty && !saving
+                ? 'border-[rgb(var(--ec-accent)/0.5)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.8)]'
+                : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text-muted))]',
+              'disabled:cursor-not-allowed disabled:opacity-60'
+            )}
+          >
+            {saving ? 'Saving…' : 'Save changes'}
+          </button>
+        </div>
+      )}
+    </div>
+  </section>
+);

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

@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { ExternalLink, Lock, Sparkles, Copy, Check as CheckIcon } from 'lucide-react';
+import { cn } from './Row';
+
+export const ASSISTANT_DOCS_URL =
+  'https://www.eventcatalog.dev/docs/development/ask-your-architecture/eventcatalog-assistant/what-is-eventcatalog-assistant';
+export const ASSISTANT_CONFIGURATION_DOCS_URL =
+  'https://www.eventcatalog.dev/docs/development/ask-your-architecture/eventcatalog-assistant/configuration';
+export const MCP_DOCS_URL = 'https://www.eventcatalog.dev/docs/development/ask-your-architecture/mcp-server/getting-started';
+export const PRICING_URL = 'https://www.eventcatalog.dev/pricing';
+
+interface UpgradeRequiredProps {
+  tier: string;
+  blurb: string;
+  docsUrl?: string;
+}
+
+export const UpgradeRequired = ({ tier, blurb, docsUrl }: UpgradeRequiredProps) => (
+  <div className="overflow-hidden rounded-lg border border-amber-500/40 bg-gradient-to-br from-amber-500/10 via-amber-500/5 to-transparent">
+    <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-amber-500/40 bg-amber-500/10 text-amber-500">
+        <Lock 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))]">Available on {tier}</p>
+          <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/40 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-500">
+            <Sparkles className="h-2.5 w-2.5" aria-hidden />
+            Upgrade
+          </span>
+        </div>
+        <p className="mt-1 text-[12px] leading-snug text-[rgb(var(--ec-page-text-muted))]">{blurb}</p>
+        <div className="mt-3 flex flex-wrap items-center gap-3">
+          <a
+            href={PRICING_URL}
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center gap-1 rounded-md bg-amber-500 px-3 py-1.5 text-[12px] font-semibold text-white shadow-sm transition-colors hover:bg-amber-600"
+          >
+            View plans
+            <ExternalLink className="h-3 w-3" aria-hidden />
+          </a>
+          {docsUrl && (
+            <a
+              href={docsUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
+            >
+              Learn more
+              <ExternalLink className="h-3 w-3" aria-hidden />
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+interface UrlPanelProps {
+  url: string;
+}
+
+export const UrlPanel = ({ url }: UrlPanelProps) => {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(new URL(url, window.location.origin).href);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+      toast.error('Could not copy URL');
+    }
+  };
+  return (
+    <div className="mt-2 flex items-center gap-2">
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        className="flex-1 truncate rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-2.5 py-1.5 font-mono text-[12px] text-[rgb(var(--ec-page-text))] transition-colors hover:border-[rgb(var(--ec-accent)/0.5)] hover:text-[rgb(var(--ec-accent))]"
+      >
+        {url}
+      </a>
+      <button
+        type="button"
+        onClick={copy}
+        aria-label="Copy URL"
+        className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text-muted))] transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]"
+      >
+        {copied ? <CheckIcon className="h-3.5 w-3.5 text-green-500" aria-hidden /> : <Copy className="h-3.5 w-3.5" aria-hidden />}
+      </button>
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        aria-label="Open in new tab"
+        className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text-muted))] transition-colors hover:bg-[rgb(var(--ec-page-bg)/0.78)] hover:text-[rgb(var(--ec-page-text))]"
+      >
+        <ExternalLink className="h-3.5 w-3.5" aria-hidden />
+      </a>
+    </div>
+  );
+};
+
+interface LiveCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+export const LiveCard = ({ icon, title, description }: LiveCardProps) => (
+  <div className="flex items-center gap-3 rounded-lg border border-emerald-500/30 bg-emerald-500/5 px-4 py-3">
+    <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-emerald-500/30 bg-emerald-500/10 text-emerald-500">
+      {icon}
+    </span>
+    <div className="flex-1 min-w-0">
+      <p className="text-[13px] font-medium text-[rgb(var(--ec-page-text))]">{title}</p>
+      <p className="text-[12px] leading-snug text-[rgb(var(--ec-page-text-muted))]">{description}</p>
+    </div>
+    <span className="flex-shrink-0 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-emerald-500">
+      Live
+    </span>
+  </div>
+);
+
+interface ToggleProps {
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (v: boolean) => void;
+}
+
+export const Toggle = ({ checked, disabled, onChange }: ToggleProps) => (
+  <button
+    type="button"
+    role="switch"
+    aria-checked={checked}
+    disabled={disabled}
+    onClick={() => onChange(!checked)}
+    className={cn(
+      'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors',
+      checked ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-text-muted)/0.35)]',
+      disabled && 'cursor-not-allowed opacity-50'
+    )}
+  >
+    <span
+      className={cn(
+        'inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform',
+        checked ? 'translate-x-[1.125rem]' : 'translate-x-[0.1875rem]'
+      )}
+    />
+  </button>
+);
+
+interface ToggleRowProps {
+  icon: React.ReactNode;
+  label: string;
+  hint: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (v: boolean) => void;
+}
+
+export const ToggleRow = ({ icon, label, hint, checked, disabled, onChange }: ToggleRowProps) => (
+  <div className="flex items-center gap-3 rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg,var(--ec-page-bg)))] px-4 py-3">
+    <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-bg))] text-[rgb(var(--ec-page-text-muted))]">
+      {icon}
+    </span>
+    <div className="flex-1 min-w-0">
+      <p className="text-[13px] font-medium text-[rgb(var(--ec-page-text))]">{label}</p>
+      <p className="text-[12px] leading-snug text-[rgb(var(--ec-page-text-muted))]">{hint}</p>
+    </div>
+    <Toggle checked={checked} disabled={disabled} onChange={onChange} />
+  </div>
+);

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -501,9 +501,9 @@ export default function NestedSideBar() {
   // Show loading state if no data yet
   if (!data || roots.length === 0) {
     return (
-      <aside className="w-full min-h-full flex-1 flex flex-col font-sans bg-[rgb(var(--ec-page-bg))]">
+      <aside className="w-full min-h-full flex-1 flex flex-col font-sans bg-[rgb(var(--ec-rail-bg))]">
         {/* Search skeleton */}
-        <div className="px-4 py-3 border-b border-[rgb(var(--ec-content-border))] bg-[rgb(var(--ec-page-bg))]">
+        <div className="px-4 py-3 border-b border-[rgb(var(--ec-content-border))] bg-[rgb(var(--ec-rail-bg))]">
           <div className="h-10 bg-[rgb(var(--ec-content-hover))] rounded-xl animate-pulse" />
         </div>
         {/* Content skeleton */}
@@ -749,10 +749,9 @@ export default function NestedSideBar() {
           )}
           <span
             className={cn(
-              'tracking-tight',
               isSubtleGroup
-                ? 'text-[11px] text-[rgb(var(--ec-content-text-muted))] font-medium'
-                : 'text-[12px] text-[rgb(var(--ec-content-text))] font-semibold'
+                ? 'text-[10px] font-semibold uppercase tracking-[0.12em] text-[rgb(var(--ec-content-text-muted))]'
+                : 'text-[12px] font-semibold tracking-tight text-[rgb(var(--ec-content-text))]'
             )}
           >
             {group.title}
@@ -771,7 +770,7 @@ export default function NestedSideBar() {
     );
 
     return (
-      <div key={`group-${groupKey || index}`} className={cn(isSubtleGroup ? 'mb-3 last:mb-1' : 'mb-5 last:mb-2')}>
+      <div key={`group-${groupKey || index}`} className={cn(isSubtleGroup ? 'mb-2 last:mb-1' : 'mb-5 last:mb-2')}>
         {canCollapse ? (
           <button
             onClick={() => toggleSectionCollapse(groupId)}
@@ -793,7 +792,7 @@ export default function NestedSideBar() {
           <div
             className={cn(
               'flex flex-col gap-0.5 border-[rgb(var(--ec-content-border))]',
-              isSubtleGroup ? 'border-l ml-3 mt-0.5' : shouldFlattenSubtleChildren ? 'mt-1' : 'border-l ml-4 mt-1'
+              isSubtleGroup ? 'mt-0.5' : shouldFlattenSubtleChildren ? 'mt-1' : 'border-l ml-4 mt-1'
             )}
           >
             {visibleChildren.map((childRef, childIndex) => {
@@ -896,11 +895,9 @@ export default function NestedSideBar() {
     );
 
     const baseClasses =
-      'group flex items-center justify-between w-full px-3 py-2 border border-transparent cursor-pointer text-left transition-colors hover:bg-[rgb(var(--ec-content-hover))] active:bg-[rgb(var(--ec-content-hover))]';
+      'group flex items-center justify-between w-full px-3 py-1.5 border border-transparent cursor-pointer text-left transition-colors hover:bg-[rgb(var(--ec-content-hover))] active:bg-[rgb(var(--ec-content-hover))]';
     const parentClasses = itemHasChildren ? 'font-medium' : '';
-    const activeClasses = isActive
-      ? 'border-[rgb(var(--ec-accent)/0.16)] bg-[rgb(var(--ec-accent-subtle))] hover:bg-[rgb(var(--ec-accent-subtle))] shadow-sm'
-      : '';
+    const activeClasses = isActive ? 'bg-[rgb(var(--ec-rail-active-bg))] hover:bg-[rgb(var(--ec-rail-active-bg))]' : '';
 
     // Leaf item with href → render as link
     if (item.href && !itemHasChildren) {
@@ -938,18 +935,18 @@ export default function NestedSideBar() {
   };
 
   return (
-    <aside className="w-full min-h-full flex-1 flex flex-col font-sans bg-[rgb(var(--ec-page-bg))]">
+    <aside className="w-full min-h-full flex-1 flex flex-col font-sans bg-[rgb(var(--ec-rail-bg))]">
       {isTopLevel && (
-        <div className="px-4 py-[13.5px] bg-[rgb(var(--ec-page-bg)/0.98)] backdrop-blur-sm border-b border-[rgb(var(--ec-content-border))] sticky top-0 z-10">
-          <div className="flex items-center w-full px-2 py-1.5">
-            <span className="text-[12px] font-semibold text-[rgb(var(--ec-content-text))] truncate">All resources</span>
-          </div>
+        <div className="flex h-[60px] items-center px-6 bg-[rgb(var(--ec-rail-bg)/0.98)] backdrop-blur-sm border-b border-[rgb(var(--ec-content-border))] sticky top-0 z-10">
+          <span className="text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-sidebar-text)/0.5)] truncate">
+            All resources
+          </span>
         </div>
       )}
 
       {!isTopLevel && (
         <div
-          className="px-4 py-[13.5px] bg-[rgb(var(--ec-page-bg)/0.98)] backdrop-blur-sm border-b border-[rgb(var(--ec-content-border))] sticky top-0 z-10"
+          className="flex h-[60px] items-center px-4 bg-[rgb(var(--ec-rail-bg)/0.98)] backdrop-blur-sm border-b border-[rgb(var(--ec-content-border))] sticky top-0 z-10"
           onMouseEnter={() => !isTopLevel && setShowPathPreview(true)}
           onMouseLeave={() => {
             setShowPathPreview(false);
@@ -974,7 +971,9 @@ export default function NestedSideBar() {
             >
               <ChevronLeft className="w-4 h-4" />
             </span>
-            <span className="text-[12px] font-semibold text-[rgb(var(--ec-content-text))] truncate">{currentLevel.title}</span>
+            <span className="text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-sidebar-text))] truncate">
+              {currentLevel.title}
+            </span>
             {currentLevel.badge && (
               <span
                 className={cn(

package/eventcatalog/src/components/Tables/Discover/DiscoverTable.tsx

@@ -11,7 +11,7 @@ import {
 } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, SearchX, X, Search, Users } from 'lucide-react';
 import { UserIcon } from '@heroicons/react/24/outline';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { TableConfiguration } from '@types';
 import { isSameVersion } from '@utils/collections/version-compare';
 import { FilterDropdown, CheckboxItem } from './FilterComponents';
@@ -110,6 +110,18 @@ export function DiscoverTable<T extends DiscoverTableData>({
   );
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [tableFilter, setTableFilter] = useState('');
+  const PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+  const PAGE_SIZE_STORAGE_KEY = 'eventcatalog-discover-page-size';
+  const [pageSize, setPageSize] = useState<number>(() => {
+    if (typeof window === 'undefined') return 10;
+    const stored = Number(window.localStorage.getItem(PAGE_SIZE_STORAGE_KEY));
+    return PAGE_SIZE_OPTIONS.includes(stored) ? stored : 10;
+  });
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(PAGE_SIZE_STORAGE_KEY, String(pageSize));
+    }
+  }, [pageSize]);
   const [showOnlyLatest, setShowOnlyLatest] = useState(true);
   const [onlyShowDrafts, setOnlyShowDrafts] = useState(false);
   const [selectedDomains, setSelectedDomains] = useState<string[]>([]);
@@ -304,8 +316,15 @@ export function DiscoverTable<T extends DiscoverTableData>({
       columnFilters,
       columnVisibility,
     },
+    initialState: {
+      pagination: { pageIndex: 0, pageSize },
+    },
   });
 
+  useEffect(() => {
+    table.setPageSize(pageSize);
+  }, [pageSize, table]);
+
   const totalResults = table.getPrePaginationRowModel().rows.length;
   const hasResults = table.getRowModel().rows.length > 0;
 
@@ -433,11 +452,13 @@ export function DiscoverTable<T extends DiscoverTableData>({
     <div className="flex h-full min-h-0" style={{ ['--ec-discover-sidebar-width' as any]: '320px' }}>
       {/* Filter Sidebar */}
       <div
-        className="fixed left-[var(--ec-vertical-nav-width)] top-0 z-20 flex h-screen w-[320px] flex-shrink-0 flex-col border-r border-[rgb(var(--ec-content-border))] bg-[rgb(var(--ec-page-bg))]"
+        className="fixed left-[var(--ec-vertical-nav-width)] top-0 z-20 flex h-screen w-[320px] flex-shrink-0 flex-col border-r border-[rgb(var(--ec-content-border))] bg-[rgb(var(--ec-rail-bg))]"
         style={{ width: 'var(--ec-discover-sidebar-width, 320px)' }}
       >
         <div className="flex h-[60px] flex-shrink-0 items-center border-b border-[rgb(var(--ec-page-border))] px-4">
-          <h2 className="text-[13px] font-semibold text-[rgb(var(--ec-page-text))]">{collectionLabel} Filters</h2>
+          <h2 className="text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-sidebar-text)/0.5)]">
+            {collectionLabel} Filters
+          </h2>
         </div>
 
         {/* Filter sections */}
@@ -445,10 +466,6 @@ export function DiscoverTable<T extends DiscoverTableData>({
           {/* Message Filters Section */}
           {(showProducersFilter || showConsumersFilter) && (filteredProducers.length > 0 || filteredConsumers.length > 0) && (
             <div className="space-y-3">
-              <h3 className="text-[11px] font-bold uppercase tracking-widest text-[rgb(var(--ec-page-text))] pb-2">
-                Message Filters
-              </h3>
-
               {/* Producers Filter */}
               {showProducersFilter && filteredProducers.length > 0 && (
                 <div>
@@ -679,10 +696,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
         {/* Table Header */}
         <div className="flex items-end justify-between gap-6 px-6 py-5">
           <div className="min-w-0">
-            <h2 className="text-2xl font-semibold text-[rgb(var(--ec-page-text))] md:text-4xl">
-              {collectionLabel}{' '}
-              <span className="ml-1 text-lg font-normal text-[rgb(var(--ec-page-text-muted))] md:text-3xl">({totalResults})</span>
-            </h2>
+            <h2 className="text-2xl font-semibold text-[rgb(var(--ec-page-text))] md:text-4xl">{collectionLabel}</h2>
             {collectionDescription && (
               <p className="max-w-3xl pt-2 text-base font-light text-[rgb(var(--ec-page-text-muted))]">{collectionDescription}</p>
             )}
@@ -694,7 +708,7 @@ export function DiscoverTable<T extends DiscoverTableData>({
               value={tableFilter}
               onChange={(e) => setTableFilter(e.target.value)}
               placeholder="Filter..."
-              className="w-64 rounded-lg border border-[rgb(var(--ec-dropdown-border))] bg-[rgb(var(--ec-dropdown-bg))] py-2 pl-9 pr-3 text-sm text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-icon-color))] transition-colors focus:border-[rgb(var(--ec-accent))] focus:outline-hidden focus:ring-1 focus:ring-[rgb(var(--ec-accent)/0.3)]"
+              className="w-64 rounded-md border-0 bg-[rgb(var(--ec-page-bg))] py-1.5 pl-9 pr-3 text-sm font-light text-[rgb(var(--ec-header-text))] shadow-xs ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))]"
             />
             {tableFilter && (
               <button
@@ -766,14 +780,29 @@ export function DiscoverTable<T extends DiscoverTableData>({
 
         {/* Pagination */}
         <div className="flex-shrink-0 flex items-center justify-between px-6 py-3 border-t border-[rgb(var(--ec-page-border))]">
-          <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">
+          <div className="flex items-center gap-3 text-xs text-[rgb(var(--ec-page-text-muted))]">
             {totalResults > 0 && (
-              <>
+              <span>
                 <span className="font-medium text-[rgb(var(--ec-page-text))]">{table.getRowModel().rows.length}</span> of{' '}
                 <span className="font-medium text-[rgb(var(--ec-page-text))]">{totalResults}</span> results
-              </>
+              </span>
             )}
-          </span>
+            {totalResults > 0 && <span aria-hidden className="h-3 w-px bg-[rgb(var(--ec-page-border))]" />}
+            <label className="flex items-center gap-1.5">
+              <span>Per page</span>
+              <select
+                value={pageSize}
+                onChange={(e) => setPageSize(Number(e.target.value))}
+                className="cursor-pointer rounded bg-transparent px-1 py-0.5 font-medium text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-content-hover))] focus:bg-[rgb(var(--ec-content-hover))] focus:outline-none"
+              >
+                {PAGE_SIZE_OPTIONS.map((size) => (
+                  <option key={size} value={size}>
+                    {size}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
           <div className="flex items-center gap-1.5">
             <button
               className="p-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"

package/eventcatalog/src/components/Tables/Discover/FilterComponents.tsx

@@ -45,7 +45,7 @@ export const FilterDropdown = ({ label, selectedItems, onClear, onRemoveItem, ch
             setIsOpen(!isOpen);
           }
         }}
-        className={`w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg border transition-colors cursor-pointer ${
+        className={`w-full flex items-center justify-between px-3 py-2 text-xs rounded-lg border transition-colors cursor-pointer ${
           hasSelection || isOpen
             ? 'border-[rgb(var(--ec-accent))] bg-[rgb(var(--ec-accent)/0.05)]'
             : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg))] hover:border-[rgb(var(--ec-icon-color))]'
@@ -152,7 +152,7 @@ export const CheckboxItem = ({ label, checked, onChange, count, icon }: Checkbox
     </div>
     {icon && <span className="flex-shrink-0 text-[rgb(var(--ec-icon-color))]">{icon}</span>}
     <span
-      className={`text-sm flex-1 truncate ${checked ? 'font-medium text-[rgb(var(--ec-page-text))]' : 'text-[rgb(var(--ec-page-text))]'}`}
+      className={`text-xs flex-1 truncate ${checked ? 'font-medium text-[rgb(var(--ec-page-text))]' : 'text-[rgb(var(--ec-page-text))]'}`}
     >
       {label}
     </span>

package/eventcatalog/src/content.config.ts

@@ -32,7 +32,7 @@ export const projectDirBase = (() => {
 
 const withIgnoredBuildArtifacts = (patterns: string | string[]) => {
   if (process.env.IGNORE_BUILD_ARTIFACTS === 'true') {
-    return [...patterns, '!dist/**'];
+    return Array.isArray(patterns) ? [...patterns, '!dist/**'] : [patterns, '!dist/**'];
   }
   return patterns;
 };

package/eventcatalog/src/enterprise/auth/middleware/middleware-auth.ts

@@ -80,6 +80,16 @@ export function findMatchingRule(rules: Record<string, () => boolean>, pathname:
   return matches.length > 0 ? matches[0].rule : null;
 }
 
+export function getPublicRoutes(isLLMSTextEnabled: boolean) {
+  const publicRoutes = ['/auth/login', '/auth/signout', '/auth/error', '/api/auth'];
+
+  if (!isLLMSTextEnabled) {
+    return publicRoutes;
+  }
+
+  return [...publicRoutes, '/docs/llm/llms.txt', '/docs/llm/llms-full.txt', '/docs/llm/schemas.txt'];
+}
+
 export const authMiddleware: MiddlewareHandler = async (context, next) => {
   const { request, redirect, locals } = context;
   const url = new URL(request.url);
@@ -97,13 +107,7 @@ export const authMiddleware: MiddlewareHandler = async (context, next) => {
 
   // Skip system/browser requests
   const systemRoutes = ['/.well-known/', '/favicon.ico', '/robots.txt', '/sitemap.xml', '/_astro/', '/__astro'];
-  let publicRoutes = ['/auth/login', '/auth/signout', '/auth/error', '/api/auth'];
-
-  const llmsRoutes = ['/docs/llm/llms.txt', '/docs/llm/llms-services.txt', '/docs/llm/llms-full.txt'];
-
-  if (isLLMSTextEnabled) {
-    publicRoutes = [...publicRoutes, ...llmsRoutes];
-  }
+  const publicRoutes = getPublicRoutes(isLLMSTextEnabled);
 
   if (
     pathname.startsWith('/_') ||

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/index.tsx

@@ -204,14 +204,14 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
 
   return (
     <nav ref={navRef} className="flex h-full min-h-0 flex-col text-[rgb(var(--ec-page-text))]">
-      <div className="flex-shrink-0 border-b border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-3 py-3.5">
-        <div className="flex gap-2">
+      <div className="flex h-[60px] flex-shrink-0 items-center border-b border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-rail-bg))] px-3">
+        <div className="flex w-full gap-2">
           <input
             type="text"
             value={searchTerm}
             onChange={handleSearchChange}
             placeholder="Quick search..."
-            className="flex-1 p-2 px-2 text-sm rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-input-placeholder))] h-[30px]"
+            className="flex-1 min-w-0 p-2 px-2 text-sm rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-icon-color))] h-[30px] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:border-[rgb(var(--ec-accent))]"
           />
           <button
             onClick={toggleExpandCollapse}
@@ -228,7 +228,7 @@ const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems }) => {
       </div>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
-        <div className="space-y-2 divide-y divide-[rgb(var(--ec-page-border))] pb-4 pt-2">
+        <div className="space-y-2 pb-4 pt-2">
           {hasNoResults ? (
             <NoResultsFound searchTerm={debouncedSearchTerm} />
           ) : (