@eventcatalog/core 3.29.2 → 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/SearchBar.tsx

@@ -181,7 +181,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
   return (
     <>
       {/* Search Input */}
-      <div className="px-3 py-2 bg-[rgb(var(--ec-content-bg))] border-b border-[rgb(var(--ec-content-border))]">
+      <div className="px-4 py-3 bg-[rgb(var(--ec-content-bg))] border-b border-[rgb(var(--ec-content-border))]">
         <div className="flex gap-2">
           <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[rgb(var(--ec-input-placeholder))]" />
@@ -190,7 +190,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
               placeholder="Search resources..."
               value={searchQuery}
               onChange={(e) => handleSearchChange(e.target.value)}
-              className="w-full pl-9! pr-8! py-2! text-sm! bg-[rgb(var(--ec-input-bg))]! border! border-[rgb(var(--ec-input-border))]! rounded-lg! focus:outline-hidden! focus:ring-2! focus:ring-[rgb(var(--ec-accent))]! focus:border-transparent! text-[rgb(var(--ec-input-text))]! placeholder:text-[rgb(var(--ec-input-placeholder))]!"
+              className="w-full pl-9! pr-8! py-2.5! text-sm! bg-[rgb(var(--ec-input-bg))]! border! border-[rgb(var(--ec-input-border))]! rounded-xl! focus:outline-hidden! focus:ring-2! focus:ring-[rgb(var(--ec-accent))]! focus:border-transparent! text-[rgb(var(--ec-input-text))]! placeholder:text-[rgb(var(--ec-input-placeholder))]!"
             />
             {searchQuery && (
               <button
@@ -207,7 +207,7 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
             <button
               onClick={() => setShowFilterDropdown(!showFilterDropdown)}
               className={cn(
-                'flex items-center justify-center w-10 h-10 rounded-lg border transition-colors',
+                'flex items-center justify-center w-10 h-10 rounded-xl border transition-colors',
                 searchFilters.size > 0
                   ? 'bg-[rgb(var(--ec-accent)/0.1)] border-[rgb(var(--ec-accent)/0.3)] text-[rgb(var(--ec-accent))]'
                   : 'bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] hover:bg-[rgb(var(--ec-content-hover))]'