@eventcatalog/core 5.5.1 → 5.6.0

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

@@ -1,30 +1,121 @@
-import { useState, useMemo, useEffect, useRef } from 'react';
-import { AdjustmentsHorizontalIcon, DocumentTextIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useState, useMemo, useEffect, useRef, type ComponentType, type ReactNode } from 'react';
+import {
+  AdjustmentsHorizontalIcon,
+  BoltIcon,
+  ChatBubbleLeftIcon,
+  CheckIcon,
+  DocumentCheckIcon,
+  DocumentTextIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
 import type { CollectionMessageTypes } from '@types';
 import semver from 'semver';
 import SchemaListItem from './SchemaListItem';
 import SchemaDetailsPanel from './SchemaDetailsPanel';
 import Pagination from './Pagination';
 import type { SchemaItem } from './types';
+import { getFormatBadge, getFormatOptions, getSchemaFormat, getSchemaIconUrl, normalizeSchemaFormat } from './utils';
 
-// Specification file types (OpenAPI, AsyncAPI, GraphQL)
-const SPEC_TYPES = ['openapi', 'asyncapi', 'graphql'];
-const HIDDEN_FORMAT_FILTERS = new Set(['graphql', 'gql', 'yaml', 'yml']);
+// Labels for the formats getSchemaFormat returns
 const SCHEMA_TYPE_LABELS: Record<string, string> = {
   json: 'JSON Schema',
+  'json-document': 'JSON',
   asyncapi: 'AsyncAPI',
   openapi: 'OpenAPI',
   graphql: 'GraphQL',
   avro: 'Avro',
-  avsc: 'Avro',
   proto: 'Protobuf',
-  protobuf: 'Protobuf',
   yaml: 'YAML',
-  yml: 'YAML',
   xml: 'XML',
   xsd: 'XML Schema',
+  text: 'Text',
 };
 
+const TYPE_ICONS: Record<string, ComponentType<{ className?: string }>> = {
+  events: BoltIcon,
+  commands: ChatBubbleLeftIcon,
+  queries: MagnifyingGlassIcon,
+  specifications: DocumentTextIcon,
+  'data-contracts': DocumentCheckIcon,
+};
+
+function TypeIcon({ type }: { type: string }) {
+  const Icon = TYPE_ICONS[type] ?? DocumentTextIcon;
+  return <Icon className="h-3.5 w-3.5" />;
+}
+
+/** The same icon or badge a schema of this format shows in the list */
+function FormatIcon({ format }: { format: string }) {
+  // A generic JSON file gets the plain JSON badge, not the JSON Schema icon
+  const iconUrl = format === 'json-document' ? undefined : getSchemaIconUrl({ schemaExtension: format });
+  if (iconUrl) return <img src={iconUrl} alt="" className="schema-icon h-3.5 w-3.5" />;
+  const { label, color } = getFormatBadge(format === 'json-document' ? 'json' : format);
+  return <span className={`font-mono text-[7px] font-bold uppercase ${color}`}>{label}</span>;
+}
+
+function FilterSection({ title, role, children }: { title: string; role?: 'radiogroup'; children: ReactNode }) {
+  return (
+    <fieldset>
+      <legend className="mb-1.5 text-[11px] font-semibold text-[rgb(var(--ec-page-text))]">{title}</legend>
+      <div role={role} aria-label={title} className="grid grid-cols-2 gap-x-3 gap-y-0.5">
+        {children}
+      </div>
+    </fieldset>
+  );
+}
+
+/** A checkbox (pick any) or radio (pick one) row in the filter panel */
+function FilterOption({
+  label,
+  count,
+  icon,
+  isActive,
+  control,
+  onClick,
+}: {
+  label: string;
+  count: number;
+  icon?: ReactNode;
+  isActive: boolean;
+  control: 'checkbox' | 'radio';
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      role={control}
+      aria-checked={isActive}
+      onClick={onClick}
+      className={`flex min-w-0 items-center gap-2 rounded-md px-1.5 py-1 text-left text-[11px] transition-colors hover:bg-[rgb(var(--ec-content-hover))] ${
+        isActive
+          ? 'text-[rgb(var(--ec-page-text))]'
+          : 'text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
+      }`}
+    >
+      <span
+        aria-hidden
+        className={`flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center border transition-colors ${
+          control === 'radio' ? 'rounded-full' : 'rounded-[3px]'
+        } ${
+          isActive
+            ? 'border-[rgb(var(--ec-accent))] bg-[rgb(var(--ec-accent))] text-white'
+            : 'border-[rgb(var(--ec-page-text-muted)/0.5)] bg-[rgb(var(--ec-dropdown-bg))]'
+        }`}
+      >
+        {isActive &&
+          (control === 'radio' ? (
+            <span className="h-1.5 w-1.5 rounded-full bg-white" />
+          ) : (
+            <CheckIcon className="h-2.5 w-2.5 stroke-[3]" />
+          ))}
+      </span>
+      {icon && <span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">{icon}</span>}
+      <span className={`min-w-0 flex-1 truncate ${isActive ? 'font-medium' : ''}`}>{label}</span>
+      <span className="flex-shrink-0 text-[10px] tabular-nums text-[rgb(var(--ec-page-text-muted)/0.8)]">{count}</span>
+    </button>
+  );
+}
+
 /** Resolve the spec filename for a schema item, with consistent fallback. */
 function getSpecFile(item: SchemaItem): string {
   return item.specFilenameWithoutExtension || item.specName || '';
@@ -73,7 +164,7 @@ export default function SchemaExplorer({ schemas }: SchemaExplorerProps) {
   const [selectedSchemaType, setSelectedSchemaType] = useState<'all' | string>(() => {
     if (typeof window !== 'undefined') {
       const stored = localStorage.getItem('schemaRegistrySelectedSchemaType');
-      return stored !== null ? stored : 'all';
+      return stored !== null && stored !== 'all' ? normalizeSchemaFormat(stored) : 'all';
     }
     return 'all';
   });
@@ -164,36 +255,27 @@ export default function SchemaExplorer({ schemas }: SchemaExplorerProps) {
     return Array.from(messagesByIdAndVersions.values()).map((versions) => versions[0]);
   }, [messagesByIdAndVersions]);
 
-  const schemaTypes = useMemo(() => {
-    const types = new Set<string>();
-    latestMessages.forEach((msg) => {
-      if (msg.schemaExtension && !HIDDEN_FORMAT_FILTERS.has(msg.schemaExtension.toLowerCase())) {
-        types.add(msg.schemaExtension.toLowerCase());
-      }
-    });
-    return Array.from(types).sort();
-  }, [latestMessages]);
+  // Schemas of the selected types; the format filter offers (and counts) only the formats among them
+  const typeFilteredMessages = useMemo(() => {
+    if (selectedTypes.size === 0) return latestMessages;
+    return latestMessages.filter(
+      (msg) =>
+        selectedTypes.has(msg.collection as CollectionMessageTypes) ||
+        (selectedTypes.has('specifications') && Boolean(msg.specType)) ||
+        (selectedTypes.has('data-contracts') && msg.collection === 'data-products')
+    );
+  }, [latestMessages, selectedTypes]);
+
+  const formatOptions = useMemo(
+    () => getFormatOptions(typeFilteredMessages, selectedSchemaType === 'all' ? undefined : selectedSchemaType),
+    [typeFilteredMessages, selectedSchemaType]
+  );
 
   const filteredMessages = useMemo(() => {
-    let result = [...latestMessages];
-
-    if (selectedTypes.size > 0) {
-      result = result.filter((msg) => {
-        if (selectedTypes.has(msg.collection as CollectionMessageTypes)) {
-          return true;
-        }
-        if (selectedTypes.has('specifications') && SPEC_TYPES.includes(msg.schemaExtension?.toLowerCase() || '')) {
-          return true;
-        }
-        if (selectedTypes.has('data-contracts') && msg.collection === 'data-products') {
-          return true;
-        }
-        return false;
-      });
-    }
+    let result = [...typeFilteredMessages];
 
     if (selectedSchemaType !== 'all') {
-      result = result.filter((msg) => msg.schemaExtension?.toLowerCase() === selectedSchemaType);
+      result = result.filter((msg) => getSchemaFormat(msg) === selectedSchemaType);
     }
 
     if (searchQuery) {
@@ -213,7 +295,7 @@ export default function SchemaExplorer({ schemas }: SchemaExplorerProps) {
     });
 
     return result;
-  }, [latestMessages, searchQuery, selectedTypes, selectedSchemaType]);
+  }, [typeFilteredMessages, searchQuery, selectedSchemaType]);
 
   const totalPages = Math.ceil(filteredMessages.length / ITEMS_PER_PAGE);
   const paginatedMessages = useMemo(() => {
@@ -338,11 +420,10 @@ export default function SchemaExplorer({ schemas }: SchemaExplorerProps) {
 
   const stats = useMemo(() => {
     return {
-      total: latestMessages.length,
       events: latestMessages.filter((m) => m.collection === 'events').length,
       commands: latestMessages.filter((m) => m.collection === 'commands').length,
       queries: latestMessages.filter((m) => m.collection === 'queries').length,
-      specifications: latestMessages.filter((m) => SPEC_TYPES.includes(m.schemaExtension?.toLowerCase() || '')).length,
+      specifications: latestMessages.filter((m) => Boolean(m.specType)).length,
       dataContracts: latestMessages.filter((m) => m.collection === 'data-products').length,
     };
   }, [latestMessages]);
@@ -366,7 +447,6 @@ export default function SchemaExplorer({ schemas }: SchemaExplorerProps) {
   const hasActiveFilters = searchQuery.length > 0 || selectedTypes.size > 0 || selectedSchemaType !== 'all';
   const activeFilterCount = (selectedTypes.size > 0 ? 1 : 0) + (selectedSchemaType !== 'all' ? 1 : 0);
   const collectionTabs = [
-    { key: 'all', label: 'All', count: stats.total },
     { key: 'events', label: 'Events', count: stats.events },
     { key: 'commands', label: 'Commands', count: stats.commands },
     { key: 'queries', label: 'Queries', count: stats.queries },
@@ -402,7 +482,7 @@ export default function SchemaExplorer({ schemas }: SchemaExplorerProps) {
               />
             </div>
 
-            {schemaTypes.length > 0 && (
+            {latestMessages.length > 0 && (
               <button
                 onClick={() => setShowFormatFilters((prev) => !prev)}
                 aria-pressed={showFormatFilters}
@@ -423,110 +503,59 @@ export default function SchemaExplorer({ schemas }: SchemaExplorerProps) {
           </div>
 
           {showFormatFilters && latestMessages.length > 0 && (
-            <div className="flex-shrink-0 border-b border-[rgb(var(--ec-page-border))] px-4 py-3">
-              <div className="rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover)/0.45)] p-3">
-                <div className="mb-3 flex items-center justify-between gap-3">
-                  <span className="text-[11px] font-semibold uppercase tracking-[0.2em] text-[rgb(var(--ec-page-text-muted))]">
-                    Filters
-                  </span>
-                  {hasActiveFilters && (
-                    <button
-                      onClick={() => {
-                        setSearchQuery('');
-                        clearTypeFilters();
-                        setSelectedSchemaType('all');
-                      }}
-                      className="text-[11px] font-medium text-[rgb(var(--ec-accent))] hover:opacity-80"
-                    >
-                      Reset
-                    </button>
-                  )}
-                </div>
-
-                <div>
-                  <div className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-page-text-muted))]">
-                    Type
-                  </div>
-                  <div className="flex flex-wrap gap-1.5">
-                    {collectionTabs.map((tab) => {
-                      const isAll = tab.key === 'all';
-                      const isActive = isAll ? selectedTypes.size === 0 : selectedTypes.has(tab.key as CollectionMessageTypes);
-
-                      return (
-                        <button
-                          key={tab.key}
-                          onClick={() => {
-                            if (isAll) {
-                              clearTypeFilters();
-                              return;
-                            }
-                            toggleType(tab.key as CollectionMessageTypes | 'specifications' | 'data-contracts');
-                          }}
-                          className={`inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[10px] font-medium transition-all ${
-                            isActive
-                              ? 'border-[rgb(var(--ec-accent)/0.5)] bg-[rgb(var(--ec-accent)/0.16)] text-[rgb(var(--ec-page-text))] shadow-[0_0_0_1px_rgb(var(--ec-accent)/0.2)]'
-                              : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg))] text-[rgb(var(--ec-page-text-muted))] hover:border-[rgb(var(--ec-page-text-muted)/0.3)] hover:text-[rgb(var(--ec-page-text))]'
-                          }`}
-                        >
-                          <span>{tab.label}</span>
-                          <span
-                            className={`rounded-sm px-1 py-0.5 text-[8px] font-semibold tabular-nums ${
-                              isActive
-                                ? 'bg-[rgb(var(--ec-accent)/0.18)] text-[rgb(var(--ec-page-text))]'
-                                : 'bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text-muted))]'
-                            }`}
-                          >
-                            {tab.count}
-                          </span>
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-
-                {schemaTypes.length > 0 && (
-                  <div className="mt-3">
-                    <div className="mb-2 flex items-center justify-between gap-3">
-                      <span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-[rgb(var(--ec-page-text-muted))]">
-                        Format
-                      </span>
-                      {selectedSchemaType !== 'all' && (
-                        <button
-                          onClick={() => setSelectedSchemaType('all')}
-                          className="text-[10px] font-medium text-[rgb(var(--ec-accent))] hover:opacity-80"
-                        >
-                          Clear
-                        </button>
-                      )}
-                    </div>
-                    <div className="flex flex-wrap gap-1.5">
-                      <button
-                        onClick={() => setSelectedSchemaType('all')}
-                        className={`rounded-md border px-2 py-1 text-[10px] font-medium transition-all ${
-                          selectedSchemaType === 'all'
-                            ? 'border-[rgb(var(--ec-accent)/0.45)] bg-[rgb(var(--ec-accent)/0.16)] text-[rgb(var(--ec-page-text))]'
-                            : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg))] text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
-                        }`}
-                      >
-                        All formats
-                      </button>
-                      {schemaTypes.map((type) => (
-                        <button
-                          key={type}
-                          onClick={() => setSelectedSchemaType(selectedSchemaType === type ? 'all' : type)}
-                          className={`rounded-md border px-2 py-1 text-[10px] font-medium transition-all ${
-                            selectedSchemaType === type
-                              ? 'border-[rgb(var(--ec-accent)/0.45)] bg-[rgb(var(--ec-accent)/0.16)] text-[rgb(var(--ec-page-text))]'
-                              : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-dropdown-bg))] text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]'
-                          }`}
-                        >
-                          {SCHEMA_TYPE_LABELS[type] || type.charAt(0).toUpperCase() + type.slice(1)}
-                        </button>
-                      ))}
-                    </div>
-                  </div>
+            <div className="flex-shrink-0 space-y-3 border-b border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-content-hover)/0.3)] px-4 py-3">
+              <div className="flex items-center justify-between">
+                <span className="text-[12px] font-semibold text-[rgb(var(--ec-page-text))]">Filters</span>
+                {hasActiveFilters && (
+                  <button
+                    onClick={() => {
+                      setSearchQuery('');
+                      clearTypeFilters();
+                      setSelectedSchemaType('all');
+                    }}
+                    className="text-[11px] font-medium text-[rgb(var(--ec-accent))] hover:opacity-80"
+                  >
+                    Reset
+                  </button>
                 )}
               </div>
+
+              <FilterSection title="Type">
+                {collectionTabs.map((tab) => (
+                  <FilterOption
+                    key={tab.key}
+                    control="checkbox"
+                    label={tab.label}
+                    count={tab.count}
+                    icon={<TypeIcon type={tab.key} />}
+                    isActive={selectedTypes.has(tab.key as CollectionMessageTypes)}
+                    onClick={() => toggleType(tab.key as CollectionMessageTypes | 'specifications' | 'data-contracts')}
+                  />
+                ))}
+              </FilterSection>
+
+              {formatOptions.length > 0 && (
+                <FilterSection title="Format" role="radiogroup">
+                  <FilterOption
+                    control="radio"
+                    label="All formats"
+                    count={typeFilteredMessages.length}
+                    isActive={selectedSchemaType === 'all'}
+                    onClick={() => setSelectedSchemaType('all')}
+                  />
+                  {formatOptions.map(({ format, count }) => (
+                    <FilterOption
+                      key={format}
+                      control="radio"
+                      label={SCHEMA_TYPE_LABELS[format] || format.charAt(0).toUpperCase() + format.slice(1)}
+                      count={count}
+                      icon={<FormatIcon format={format} />}
+                      isActive={selectedSchemaType === format}
+                      onClick={() => setSelectedSchemaType(format)}
+                    />
+                  ))}
+                </FilterSection>
+              )}
             </div>
           )}
 

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

@@ -1,6 +1,5 @@
-import { buildUrl } from '@utils/url-builder';
 import type { SchemaItem } from './types';
-import { getSchemaTypeLabel, ICON_SPECS, getFormatBadge, extractServiceName } from './utils';
+import { getSchemaDisplayLabel, getSchemaIconUrl, getFormatBadge, extractServiceName } from './utils';
 
 interface SchemaListItemProps {
   message: SchemaItem;
@@ -34,7 +33,7 @@ function getNamespace(message: SchemaItem): string | null {
 
 export default function SchemaListItem({ message, isSelected, versions, onClick, itemRef }: SchemaListItemProps) {
   const ext = message.schemaExtension?.toLowerCase() || '';
-  const iconSpec = ICON_SPECS[ext];
+  const iconUrl = getSchemaIconUrl(message);
   const { label: formatLabel, color: formatColor } = getFormatBadge(ext);
   const namespace = getNamespace(message);
   const summary = message.data.summary || `Browse the ${message.data.name} schema.`;
@@ -52,8 +51,8 @@ export default function SchemaListItem({ message, isSelected, versions, onClick,
     >
       <div className="flex items-start justify-between gap-2">
         <div className="mt-0.5 flex h-4.5 w-4.5 flex-shrink-0 items-center justify-center rounded-sm border border-[rgb(var(--ec-page-border)/0.55)] bg-[rgb(var(--ec-content-hover))]">
-          {iconSpec ? (
-            <img src={buildUrl(`/icons/${iconSpec}.svg`, true)} alt={`${ext} icon`} className="schema-icon h-2.5 w-2.5" />
+          {iconUrl ? (
+            <img src={iconUrl} alt={`${ext} icon`} className="schema-icon h-2.5 w-2.5" />
           ) : (
             <span className={`font-mono text-[6px] font-bold uppercase ${formatColor}`}>{formatLabel}</span>
           )}
@@ -82,9 +81,7 @@ export default function SchemaListItem({ message, isSelected, versions, onClick,
       <div className="mt-1.5 flex items-end justify-between gap-2">
         <div className="min-w-0">
           <div className="flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[9px] text-[rgb(var(--ec-page-text-muted))]">
-            <span className="font-medium text-[rgb(var(--ec-page-text-muted))]">
-              {getSchemaTypeLabel(message.schemaExtension)}
-            </span>
+            <span className="font-medium text-[rgb(var(--ec-page-text-muted))]">{getSchemaDisplayLabel(message)}</span>
             {namespace && (
               <>
                 <span className="opacity-35">&rsaquo;</span>

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

@@ -79,6 +79,8 @@ export interface SchemaItem {
   schemaName?: string;
   source?: SchemaSourceInfo;
   specType?: string;
+  /** A generic specification's custom icon */
+  specIcon?: string;
   specName?: string;
   specFilenameWithoutExtension?: string;
   // For data contracts

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

@@ -1,5 +1,6 @@
-import type { SchemaRelationshipCollection } from './types';
+import type { SchemaItem, SchemaRelationshipCollection } from './types';
 import { buildUrl } from '@utils/url-builder';
+import { getGenericSpecificationIcon, resolveIconUrl } from '@utils/icon';
 
 // Schema types that should use SVG icons
 export const ICON_SPECS: Record<string, string> = {
@@ -14,6 +15,72 @@ export const ICON_SPECS: Record<string, string> = {
   json: 'json-schema',
 };
 
+type SchemaFormat = Pick<SchemaItem, 'schemaExtension' | 'specType' | 'specIcon'>;
+
+/** The icon for a schema, or undefined when it shows a format badge instead */
+export function getSchemaIconUrl(message: SchemaFormat): string | undefined {
+  if (message.specType === 'generic') return resolveIconUrl(getGenericSpecificationIcon(message.specIcon));
+  const iconSpec = ICON_SPECS[message.schemaExtension?.toLowerCase() || ''];
+  return iconSpec ? buildUrl(`/icons/${iconSpec}.svg`, true) : undefined;
+}
+
+// A generic specification's extension is only its syntax, so a JSON file is not called a JSON Schema
+const GENERIC_SPECIFICATION_LABELS: Record<string, string> = { json: 'JSON', yaml: 'YAML', xml: 'XML', text: 'Text' };
+
+export const getSchemaDisplayLabel = (message: SchemaFormat): string =>
+  (message.specType === 'generic' && GENERIC_SPECIFICATION_LABELS[message.schemaExtension || '']) ||
+  getSchemaTypeLabel(message.schemaExtension);
+
+// Extensions that are the same format, so they share one filter
+const FORMAT_ALIASES: Record<string, string> = { yml: 'yaml', gql: 'graphql', avsc: 'avro', protobuf: 'proto' };
+
+/**
+ * The format a schema is filtered by in the Schema Explorer. A generic specification's extension is only its syntax,
+ * so a generic JSON file is plain JSON (`json-document`), not a JSON Schema.
+ */
+export function getSchemaFormat(message: Pick<SchemaItem, 'schemaExtension' | 'specType'>): string | undefined {
+  if (!message.schemaExtension) return undefined;
+  if (message.specType === 'generic' && message.schemaExtension.toLowerCase() === 'json') return 'json-document';
+  return normalizeSchemaFormat(message.schemaExtension);
+}
+
+/** A format with extensions of the same format merged, so a filter saved as `avsc` still selects Avro */
+export const normalizeSchemaFormat = (format: string): string => FORMAT_ALIASES[format.toLowerCase()] ?? format.toLowerCase();
+
+/**
+ * The extension to download a schema with. A generic specification's schemaExtension is only the syntax it's
+ * highlighted in (a WSDL is `xml`), so it keeps its own file's extension.
+ */
+export function getSchemaDownloadExtension(message: Pick<SchemaItem, 'schemaExtension' | 'specType' | 'data'>): string {
+  const fileExtension =
+    message.specType === 'generic'
+      ? message.data.schemaPath
+          ?.split('/')
+          .pop()
+          ?.match(/\.([^.]+)$/)?.[1]
+      : undefined;
+  return fileExtension || message.schemaExtension || 'json';
+}
+
+/**
+ * The formats of the given schemas with how many use each, most used first. The selected format is always included
+ * (with a count of 0 when none of the schemas use it) so it can be cleared.
+ */
+export function getFormatOptions(
+  messages: Pick<SchemaItem, 'schemaExtension' | 'specType'>[],
+  selectedFormat?: string
+): { format: string; count: number }[] {
+  const counts = new Map<string, number>();
+  for (const message of messages) {
+    const format = getSchemaFormat(message);
+    if (format) counts.set(format, (counts.get(format) ?? 0) + 1);
+  }
+  if (selectedFormat && !counts.has(selectedFormat)) counts.set(selectedFormat, 0);
+  return [...counts]
+    .map(([format, count]) => ({ format, count }))
+    .sort((a, b) => b.count - a.count || a.format.localeCompare(b.format));
+}
+
 // Schema format badge config for non-icon types: short label + color
 export function getFormatBadge(ext?: string): { label: string; color: string } {
   const type = ext?.toLowerCase();
@@ -105,6 +172,8 @@ export const getLanguageForHighlight = (extension?: string): string => {
     case 'ts':
     case 'typescript':
       return 'typescript';
+    case 'text':
+      return 'text';
     case 'js':
     case 'javascript':
       return 'javascript';

package/eventcatalog/src/content.config.ts

@@ -146,9 +146,11 @@ const baseSchema = z.object({
       }),
       z.array(
         z.object({
-          type: z.enum(['openapi', 'asyncapi', 'graphql']),
+          type: z.enum(['openapi', 'asyncapi', 'graphql', 'generic']),
           path: z.string(),
           name: z.string().optional(),
+          // Used by generic specifications only
+          icon: z.string().optional(),
           headers: z.record(z.string(), z.string()).optional(),
         })
       ),

package/eventcatalog/src/features/ai/chat-api.ts

@@ -35,6 +35,10 @@ import {
 
 const catalogDirectory = process.env.PROJECT_DIR || process.cwd();
 
+// How many model calls one answer may take. Questions across several domains need many tool calls, so the last
+// step has tools turned off: the model has to answer with what it found, rather than stop without a reply.
+const MAX_STEPS = 10;
+
 export const defaultConfiguration = {
   temperature: 0.4,
   topP: 0.9,
@@ -394,7 +398,8 @@ export const POST = async ({ request }: APIContext<{ question: string; messages:
       instructions: getBaseSystemPrompt(referrer ?? ''),
       messages: await convertToModelMessages(messages),
       temperature: modelConfiguration?.temperature ?? 0.7,
-      stopWhen: isStepCount(5),
+      stopWhen: isStepCount(MAX_STEPS),
+      prepareStep: ({ stepNumber }) => (stepNumber === MAX_STEPS - 1 ? { toolChoice: 'none' } : undefined),
       onError: (error) => {
         console.error('[Chat] On error', error);
       },

package/eventcatalog/src/features/mcp/apps/architecture-diagram/view.tsx

@@ -16,7 +16,7 @@ import type { ArchitectureDiagramPayload } from './shared';
 const LEVEL_OF_DETAIL = { overview: 1, services: 2, full: 3 } as const;
 import { NodeChat, describeNode, describeNodeForModel, type SelectedNode } from './node-chat';
 import { parseAskLink, parseDiagramLink, withAskMenuItem, type DiagramLink } from './links';
-import { getToolResultPayload } from '../shared/app-view';
+import { fullscreenStyle, getToolResultPayload } from '../shared/app-view';
 import { RESOURCE_TYPE_LABELS } from '../shared/resource-types';
 import { VIEWER_META_KEY, VIEWER_VIEW_TOOL, type ViewerPayload } from '../viewer/shared';
 
@@ -377,7 +377,13 @@ export function ArchitectureDiagramView({ app, payload: toolPayload, hostContext
   const graphId = `mcp-${resource.collection}-${resource.id}-${resource.version}`;
 
   return (
-    <div style={{ height: isFullscreen ? '100vh' : INLINE_HEIGHT, display: 'flex', flexDirection: 'column' }}>
+    <div
+      style={{
+        ...(isFullscreen ? fullscreenStyle(hostContext) : { height: INLINE_HEIGHT }),
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       <div className="ec-mcp-header">
         <div className="ec-mcp-title">
           {diagrams.length > 1 && (

package/eventcatalog/src/features/mcp/apps/canvas/view.tsx

@@ -17,7 +17,7 @@ import visualiserStyles from '@eventcatalog/visualiser/styles.css?inline';
 import StudioDesigner, { type SelectedNode } from '@features/studio/components/StudioDesigner';
 import { getAgent } from '@features/studio/agents';
 import { CANVAS_STATUS_LOOK, STATUS } from '@eventcatalog/visualiser/studio';
-import { getToolResultPayload, mountView, useMcpAppView } from '../shared/app-view';
+import { fullscreenStyle, getToolResultPayload, mountView, useMcpAppView } from '../shared/app-view';
 import {
   CANVAS_CATALOG_TOOL,
   CANVAS_META_KEY,
@@ -219,7 +219,7 @@ function CanvasApp() {
   const agentOf = (view: CanvasView) => view.agent ?? getAgent(undefined, hostName);
 
   return (
-    <div className="flex flex-col" style={{ height: fullscreen ? '100vh' : INLINE_HEIGHT }}>
+    <div className="flex flex-col" style={fullscreen ? fullscreenStyle(hostContext) : { height: INLINE_HEIGHT }}>
       <div className="flex items-center justify-between border-b px-3 py-1.5 border-[rgb(var(--ec-page-border))]">
         <span className="flex min-w-0 items-center gap-1">
           {canvas && (