@eventcatalog/core 4.10.12 → 4.10.14

package/eventcatalog/src/components/ChatPanel/ChatPanelButton.tsx

@@ -1,9 +1,15 @@
-import { useState, useEffect } from 'react';
-import { BookOpen } from 'lucide-react';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { Sparkles } from 'lucide-react';
 import ChatPanel from './ChatPanel';
 
-const ChatPanelButton = () => {
+const ChatPanelButton = ({ configured = false }: { configured?: boolean }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const closePanel = useCallback(() => {
+    setIsOpen(false);
+    buttonRef.current?.focus();
+  }, []);
+  const [shortcut, setShortcut] = useState('⌘I');
 
   // Listen for custom event to open chat panel from other components
   useEffect(() => {
@@ -11,22 +17,36 @@ const ChatPanelButton = () => {
       setIsOpen(true);
     };
 
+    setShortcut(/Mac|iPhone|iPad/.test(navigator.platform) ? '⌘I' : 'Ctrl I');
+    const handleShortcut = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === 'i') {
+        event.preventDefault();
+        setIsOpen(true);
+      }
+    };
+    window.addEventListener('keydown', handleShortcut);
     window.addEventListener('eventcatalog:open-chat', handleOpenChat);
-    return () => window.removeEventListener('eventcatalog:open-chat', handleOpenChat);
+    return () => {
+      window.removeEventListener('keydown', handleShortcut);
+      window.removeEventListener('eventcatalog:open-chat', handleOpenChat);
+    };
   }, []);
 
   return (
     <>
       <button
+        ref={buttonRef}
         onClick={() => setIsOpen(true)}
-        className="flex items-center gap-1.5 px-4 py-1.5 rounded-md bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] ring-1 ring-inset ring-[rgb(var(--ec-page-border))] shadow-xs transition-colors text-sm ml-[-1px]"
+        className="flex h-9 shrink-0 items-center justify-center gap-1.5 whitespace-nowrap px-4 rounded-md bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] ring-1 ring-inset ring-[rgb(var(--ec-page-border))] shadow-xs transition-colors text-sm"
         aria-label="Open AI Assistant"
+        aria-keyshortcuts="Meta+i Control+i"
+        title={`Open Event Catalog Assistant (${shortcut})`}
       >
-        <BookOpen size={14} className="text-[rgb(var(--ec-accent))]" />
-        <span className="font-light text-[rgb(var(--ec-page-text-muted))]">Ask</span>
+        <Sparkles size={16} className="shrink-0 text-gray-500" aria-hidden="true" />
+        <span className="font-light text-gray-500">Ask</span>
       </button>
 
-      <ChatPanel isOpen={isOpen} onClose={() => setIsOpen(false)} />
+      <ChatPanel configured={configured} isOpen={isOpen} onClose={closePanel} />
     </>
   );
 };

package/eventcatalog/src/components/ChatPanel/OfflineReply.tsx

@@ -0,0 +1,45 @@
+import { ArrowUpRight } from 'lucide-react';
+import { buildUrl } from '@utils/url-builder';
+
+const setupUrl = 'https://www.eventcatalog.dev/docs/development/ask-your-architecture/eventcatalog-assistant/configuration';
+const introduction = 'Your whole catalog, connected to your AI.';
+const description =
+  'Bring your own model and I can help you understand your services, trace how events flow, and explore the impact of a change across your whole catalog.';
+const privacy = 'You choose where your data is processed: on your own infrastructure or with a model provider you trust.';
+const setup = 'I’m not connected to a model yet. Your catalog owner can connect one to get started.';
+
+export const offlineReplyText = `${introduction}\n\n${description}\n\n${privacy}\n\n${setup}`;
+
+export default function OfflineReply() {
+  return (
+    <div className="ec-chat-offline w-full space-y-4 py-2 text-[13px] leading-relaxed text-[rgb(var(--ec-content-text))]">
+      <div className="space-y-2">
+        <p className="text-base font-medium leading-snug text-[rgb(var(--ec-page-text))]">{introduction}</p>
+        <p>{description}</p>
+      </div>
+      <div className="space-y-3 rounded-xl border border-[rgb(var(--ec-accent)/0.15)] bg-[rgb(var(--ec-accent)/0.04)] p-4">
+        <div className="space-y-1">
+          <p className="font-medium text-[rgb(var(--ec-page-text))]">Your model. Your control.</p>
+          <p className="text-[rgb(var(--ec-page-text-muted))]">{privacy}</p>
+        </div>
+        <p>{setup}</p>
+        <a
+          href={setupUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="inline-flex items-center gap-2 rounded-lg bg-[rgb(var(--ec-accent))] px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-[rgb(var(--ec-accent-hover))] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[rgb(var(--ec-accent))]"
+        >
+          Connect your model
+          <ArrowUpRight size={14} aria-hidden="true" />
+        </a>
+      </div>
+      <p className="text-xs leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
+        Don’t need the assistant?{' '}
+        <a href={buildUrl('/settings/assistant')} className="underline underline-offset-2 hover:text-[rgb(var(--ec-page-text))]">
+          Turn off Event Catalog Assistant
+        </a>{' '}
+        or set <code className="text-[11px]">chat.enabled: false</code> in your catalog configuration.
+      </p>
+    </div>
+  );
+}

package/eventcatalog/src/components/Header.astro

@@ -2,7 +2,12 @@
 import catalog from '@utils/eventcatalog-config/catalog';
 import Search from '@components/Search/Search.astro';
 import { buildUrl } from '@utils/url-builder';
-import { showEventCatalogBranding, showCustomBranding, isEventCatalogChatEnabled } from '@utils/feature';
+import {
+  showEventCatalogBranding,
+  showCustomBranding,
+  isEventCatalogChatVisible,
+  isEventCatalogChatEnabled,
+} from '@utils/feature';
 import { getSession } from 'auth-astro/server';
 import { isAuthEnabled, isSSR } from '@utils/feature';
 import { EnvironmentDropdown } from './EnvironmentDropdown';
@@ -33,15 +38,15 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
     : 'left: var(--ec-vertical-nav-width, 14rem);'}
 >
   <div class="px-6">
-    <div class="flex justify-between items-center">
-      <div class="hidden lg:flex flex-grow items-center">
-        <div class="w-full max-w-xl">
+    <div class="flex justify-between items-center gap-4">
+      <div class="flex min-w-0 flex-1 items-center gap-3">
+        <div class="hidden lg:block min-w-0 flex-1 max-w-xl">
           <Search />
         </div>
-        {isEventCatalogChatEnabled() && <ChatPanelButton client:idle />}
+        {isEventCatalogChatVisible() && <ChatPanelButton configured={isEventCatalogChatEnabled()} client:idle />}
       </div>
 
-      <div class="hidden md:block w-3/12">
+      <div class="hidden md:block shrink-0 ml-auto">
         {
           session ? (
             <div class="flex items-center space-x-4 justify-end pr-2">

package/eventcatalog/src/components/MDX/Design/Design.astro

@@ -7,10 +7,10 @@ import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
 // Visualiser styles ship in the page head so ClientRouter navigations keep them (see NodeGraph.astro).
 import '@eventcatalog/visualiser/styles-core.css';
 
-import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { isVisualiserEnabled, isEventCatalogChatVisible, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
-const isChatEnabled = isEventCatalogChatEnabled();
+const isChatEnabled = isEventCatalogChatVisible();
 
 let design: any;
 let id = 'design';

package/eventcatalog/src/components/MDX/EntityMap/EntityMap.astro

@@ -7,10 +7,10 @@ import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
 import '@eventcatalog/visualiser/styles-core.css';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { getServices } from '@utils/collections/services';
-import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { isEventCatalogChatVisible, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 
-const isChatEnabled = isEventCatalogChatEnabled();
+const isChatEnabled = isEventCatalogChatVisible();
 
 const { id, version = 'latest', maxHeight, includeKey = true, entities, collection = 'domains', ...rest } = Astro.props;
 let resource = null;

package/eventcatalog/src/components/MDX/Flow/Flow.astro

@@ -6,12 +6,12 @@ import AstroNodeGraph from '../NodeGraph/AstroNodeGraph';
 // Visualiser styles ship in the page head so ClientRouter navigations keep them (see NodeGraph.astro).
 import '@eventcatalog/visualiser/styles-core.css';
 import { getVersionFromCollection } from '@utils/collections/versions';
-import { isVisualiserEnabled, isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { isVisualiserEnabled, isEventCatalogChatVisible, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 import { randomUUID } from 'node:crypto';
 import { parseMdxBooleanProp } from '@utils/markdown';
 
-const isChatEnabled = isEventCatalogChatEnabled();
+const isChatEnabled = isEventCatalogChatVisible();
 
 const { id, version = 'latest', maxHeight, mode = 'simple' } = Astro.props;
 const includeKey = parseMdxBooleanProp(Astro.props.legend ?? Astro.props.includeKey, true);

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -29,11 +29,11 @@ import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { getNodesAndEdges as getNodesAndEdgesForContainer } from '@utils/node-graphs/container-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForChannel } from '@utils/node-graphs/channel-node-graph';
 import config from '@config';
-import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';
+import { isEventCatalogChatVisible, isDevMode } from '@utils/feature';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 import { compactVisualiserGraph } from '@utils/node-graphs/compact-visualiser-graph';
 
-const isChatEnabled = isEventCatalogChatEnabled();
+const isChatEnabled = isEventCatalogChatVisible();
 
 interface Props {
   id: string;

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

@@ -138,28 +138,30 @@ const AvroField = ({ field, level, expand, showRequired }: AvroFieldProps) => {
 
         {/* Field details */}
         <div className="flex-grow min-w-0">
-          <div className="flex flex-wrap items-baseline gap-x-1.5 gap-y-1">
-            <span className="avro-field-name font-semibold text-[rgb(var(--ec-page-text))] text-sm">{field.name}</span>
-            <span className="text-[rgb(var(--ec-accent))] font-mono text-xs">{formatAvroType(field.type)}</span>
-            {showRequired && isRequired && (
-              <span className="text-red-600 dark:text-red-400 text-xs ml-auto flex-shrink-0">required</span>
+          <div className="-mx-1 rounded px-1 transition-colors hover:bg-[rgb(var(--ec-content-hover))]">
+            <div className="flex flex-wrap items-baseline gap-x-1.5 gap-y-1">
+              <span className="avro-field-name font-semibold text-[rgb(var(--ec-page-text))] text-sm">{field.name}</span>
+              <span className="text-[rgb(var(--ec-accent))] font-mono text-xs">{formatAvroType(field.type)}</span>
+              {showRequired && isRequired && (
+                <span className="text-red-600 dark:text-red-400 text-xs ml-auto flex-shrink-0">required</span>
+              )}
+            </div>
+
+            {field.doc && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-1">{field.doc}</p>}
+
+            {/* Show enum values if present */}
+            {enumType && enumType.symbols && (
+              <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-1">
+                Values:{' '}
+                {enumType.symbols.map((s: string) => (
+                  <code key={s} className="bg-[rgb(var(--ec-content-hover))] px-1 rounded mx-0.5 text-[rgb(var(--ec-page-text))]">
+                    {s}
+                  </code>
+                ))}
+              </div>
             )}
           </div>
 
-          {field.doc && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-1">{field.doc}</p>}
-
-          {/* Show enum values if present */}
-          {enumType && enumType.symbols && (
-            <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-1">
-              Values:{' '}
-              {enumType.symbols.map((s: string) => (
-                <code key={s} className="bg-[rgb(var(--ec-content-hover))] px-1 rounded mx-0.5 text-[rgb(var(--ec-page-text))]">
-                  {s}
-                </code>
-              ))}
-            </div>
-          )}
-
           {/* Nested fields for record types */}
           {hasNested && recordType && (
             <div className={`avro-nested-content mt-2 ${!isExpanded ? 'hidden' : ''}`}>

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

@@ -315,86 +315,88 @@ const SchemaProperty = ({ name, details, isRequired, level, isListItem = false,
         )}
 
         <div className="flex-grow">
-          <div className="flex justify-between items-baseline">
-            <div>
-              <span className="font-semibold text-[rgb(var(--ec-page-text))] text-sm">{name}</span>
-              <span className="ml-1.5 text-[rgb(var(--ec-accent))] font-mono text-xs">
-                {hasVariants ? (details.variantType === 'anyOf' ? 'anyOf' : 'oneOf') : formatType(details.type)}
-                {hasType(details.type, 'array') && details.items?.type ? `[${formatType(details.items.type)}]` : ''}
-                {details.format ? `<${details.format}>` : ''}
-                {details._refPath && (
-                  <span className="text-blue-600 dark:text-blue-400 ml-1">→ {details._refName || details._refPath}</span>
-                )}
-                {details._refNotFound && <span className="text-red-600 dark:text-red-400 ml-1">❌ ref not found</span>}
-                {details.const !== undefined && (
-                  <span>
-                    constant: <code>{details.const}</code>
-                  </span>
-                )}
-              </span>
-            </div>
-            {isRequired && <span className="text-red-600 dark:text-red-400 text-xs ml-3 flex-shrink-0">required</span>}
-          </div>
-
-          {details.description && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5">{details.description}</p>}
-          {details.title && details.title !== details.description && (
-            <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5 italic">Title: {details.title}</p>
-          )}
-
-          <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5 space-y-0">
-            {details.pattern && (
-              <div>
-                Match pattern:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.pattern}
-                </code>
-              </div>
-            )}
-            {details.minimum !== undefined && (
-              <div>
-                Minimum:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.minimum}
-                </code>
-              </div>
-            )}
-            {details.maximum !== undefined && (
-              <div>
-                Maximum:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.maximum}
-                </code>
-              </div>
-            )}
-            {details.minLength !== undefined && (
+          <div className="-mx-1 rounded px-1 transition-colors hover:bg-[rgb(var(--ec-content-hover))]">
+            <div className="flex justify-between items-baseline">
               <div>
-                Min length:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.minLength}
-                </code>
-              </div>
-            )}
-            {details.maxLength !== undefined && (
-              <div>
-                Max length:{' '}
-                <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                  {details.maxLength}
-                </code>
-              </div>
-            )}
-            {details.enum && (
-              <div>
-                <span className="text-xs inline-block">Allowed values:</span>
-                {details.enum.map((val: any, idx: number) => (
-                  <span key={idx} className="text-xs">
-                    {' '}
-                    <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
-                      {val}
-                    </code>
-                  </span>
-                ))}
+                <span className="font-semibold text-[rgb(var(--ec-page-text))] text-sm">{name}</span>
+                <span className="ml-1.5 text-[rgb(var(--ec-accent))] font-mono text-xs">
+                  {hasVariants ? (details.variantType === 'anyOf' ? 'anyOf' : 'oneOf') : formatType(details.type)}
+                  {hasType(details.type, 'array') && details.items?.type ? `[${formatType(details.items.type)}]` : ''}
+                  {details.format ? `<${details.format}>` : ''}
+                  {details._refPath && (
+                    <span className="text-blue-600 dark:text-blue-400 ml-1">→ {details._refName || details._refPath}</span>
+                  )}
+                  {details._refNotFound && <span className="text-red-600 dark:text-red-400 ml-1">❌ ref not found</span>}
+                  {details.const !== undefined && (
+                    <span>
+                      constant: <code>{details.const}</code>
+                    </span>
+                  )}
+                </span>
               </div>
+              {isRequired && <span className="text-red-600 dark:text-red-400 text-xs ml-3 flex-shrink-0">required</span>}
+            </div>
+
+            {details.description && <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5">{details.description}</p>}
+            {details.title && details.title !== details.description && (
+              <p className="text-[rgb(var(--ec-page-text-muted))] text-xs mt-0.5 italic">Title: {details.title}</p>
             )}
+
+            <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-0.5 space-y-0">
+              {details.pattern && (
+                <div>
+                  Match pattern:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.pattern}
+                  </code>
+                </div>
+              )}
+              {details.minimum !== undefined && (
+                <div>
+                  Minimum:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.minimum}
+                  </code>
+                </div>
+              )}
+              {details.maximum !== undefined && (
+                <div>
+                  Maximum:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.maximum}
+                  </code>
+                </div>
+              )}
+              {details.minLength !== undefined && (
+                <div>
+                  Min length:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.minLength}
+                  </code>
+                </div>
+              )}
+              {details.maxLength !== undefined && (
+                <div>
+                  Max length:{' '}
+                  <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                    {details.maxLength}
+                  </code>
+                </div>
+              )}
+              {details.enum && (
+                <div>
+                  <span className="text-xs inline-block">Allowed values:</span>
+                  {details.enum.map((val: any, idx: number) => (
+                    <span key={idx} className="text-xs">
+                      {' '}
+                      <code className="bg-[rgb(var(--ec-content-hover))] px-1 rounded text-[rgb(var(--ec-page-text))] font-thin py-0.5">
+                        {val}
+                      </code>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
           </div>
 
           {(hasNestedProperties || hasArrayItems || hasVariants) && (

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

@@ -0,0 +1,91 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { parseProtobufSchema } from '@utils/protobuf-schema';
+import ProtobufSchemaViewer from './ProtobufSchemaViewer';
+
+describe('ProtobufSchemaViewer', () => {
+  it('renders Protovalidate required and constraint annotations', () => {
+    const schema = parseProtobufSchema(`
+      syntax = "proto3";
+
+      enum Status {
+        STATUS_UNSPECIFIED = 0;
+        STATUS_ACTIVE = 1;
+      }
+
+      message Journey {
+        string id = 1 [
+          (buf.validate.field).required = true,
+          (buf.validate.field).string.uuid = true
+        ];
+        uint32 passenger_count = 2 [(buf.validate.field).uint32 = { gte: 1, lte: 20 }];
+        Status status = 3 [(buf.validate.field).enum = { defined_only: true, not_in: [0] }];
+        repeated string stops = 4 [(buf.validate.field).repeated = {
+          min_items: 2
+          unique: true
+          items: { string: { min_len: 3 } }
+        }];
+        planning.model.v1.TrainServiceReference train_service = 5;
+        optional string description = 6 [(datahub.v1.gdpr_rule).string = true];
+      }
+    `);
+
+    const html = renderToStaticMarkup(<ProtobufSchemaViewer schema={schema} />);
+    const statusField = html.slice(html.indexOf('>status</span>'), html.indexOf('>stops</span>'));
+
+    expect(html).toContain('required');
+    expect(html).toContain('Format');
+    expect(html).toContain('UUID');
+    expect(html).toContain('Minimum');
+    expect(html).toContain('Maximum');
+    expect(html).toContain('Defined enum values only');
+    expect(html).toContain('Excluded values');
+    expect(html).toContain('Minimum items');
+    expect(html).toContain('Unique items');
+    expect(html).toContain('Item minimum length');
+    expect(html).toContain('title="planning.model.v1.TrainServiceReference"');
+    expect(html).toContain('>TrainServiceReference</span>');
+    expect(statusField).not.toContain('STATUS_UNSPECIFIED');
+    expect(statusField).toContain('STATUS_ACTIVE');
+    expect(html).toContain('Annotation:');
+    expect(html).toContain('(datahub.v1.gdpr_rule).string');
+    expect(html).toContain('>true</code>');
+  });
+
+  it('filters enum values using repeated-item and map-value constraints', () => {
+    const schema = parseProtobufSchema(`
+      syntax = "proto3";
+
+      enum Status {
+        STATUS_UNSPECIFIED = 0;
+        STATUS_ACTIVE = 1;
+        STATUS_ARCHIVED = 2;
+      }
+
+      message Journey {
+        repeated Status statuses = 1 [(buf.validate.field).repeated = {
+          items: { enum: { in: [1] } }
+        }];
+        map<string, Status> status_by_key = 2 [(buf.validate.field).map = {
+          values: { enum: { not_in: [0, 2] } }
+        }];
+        Status status = 3 [(buf.validate.field).enum.const = 2];
+      }
+    `);
+
+    const html = renderToStaticMarkup(<ProtobufSchemaViewer schema={schema} />);
+    const repeatedField = html.slice(html.indexOf('>statuses</span>'), html.indexOf('>status_by_key</span>'));
+    const mapField = html.slice(html.indexOf('>status_by_key</span>'), html.indexOf('>status</span>'));
+    const directField = html.slice(html.indexOf('>status</span>'), html.indexOf('>Enum:</span>'));
+
+    expect(repeatedField).toContain('STATUS_ACTIVE');
+    expect(repeatedField).not.toContain('STATUS_UNSPECIFIED');
+    expect(repeatedField).not.toContain('STATUS_ARCHIVED');
+    expect(mapField).toContain('STATUS_ACTIVE');
+    expect(mapField).not.toContain('STATUS_UNSPECIFIED');
+    expect(mapField).not.toContain('STATUS_ARCHIVED');
+    expect(directField).toContain('STATUS_ARCHIVED');
+    expect(directField).not.toContain('STATUS_UNSPECIFIED');
+    expect(directField).not.toContain('STATUS_ACTIVE');
+  });
+});