@eventcatalog/core 5.0.0-beta.8 → 5.0.0

package/eventcatalog/src/components/Homepage/CatalogDashboard.astro

@@ -0,0 +1,342 @@
+---
+import config from '@config';
+import { buildUrl } from '@utils/url-builder';
+import { getColorForCollection } from '@utils/collection-colors';
+import { isArchitectureGraphEnabled, isEventCatalogChatEnabled } from '@utils/feature';
+import CatalogForceGraph from '@components/CatalogGraph/CatalogForceGraph';
+import { getCatalogForceGraph, toCatalogForceGraphWire } from '@utils/node-graphs/catalog-force-graph';
+import { getDashboard, type DashboardCollection } from '@utils/homepage-dashboard';
+import { Boxes, Clock, FileJson, Mail, Network, Search, Server, Sparkles, Users, Waypoints } from 'lucide-react';
+
+interface Props {
+  /** The heading, the catalog's title by default */
+  title?: string;
+  /** Under the heading, the catalog's tagline by default */
+  description?: string;
+}
+
+const {
+  title = config?.title || config?.organizationName || 'EventCatalog',
+  description = config?.tagline || 'Explore and understand your event-driven architecture.',
+} = Astro.props;
+
+const dashboard = await getDashboard();
+const { counts, recentlyUpdated } = dashboard;
+const chatEnabled = isEventCatalogChatEnabled();
+// The architecture graph leads the dashboard; it's opt-in while in beta, and without it the dashboard shows what changed recently
+const graph = isArchitectureGraphEnabled() ? toCatalogForceGraphWire(await getCatalogForceGraph()) : undefined;
+
+const TYPE_LABELS: Record<DashboardCollection, string> = {
+  domains: 'Domain',
+  services: 'Service',
+  events: 'Event',
+  commands: 'Command',
+  queries: 'Query',
+  flows: 'Flow',
+};
+// The colour each kind of resource has across the catalog, from the theme's badge colours
+const badgeStyle = (collection: string) => {
+  const color = getColorForCollection(collection);
+  return `color: rgb(var(--ec-badge-color-${color}-text)); background: rgb(var(--ec-badge-color-${color}-background));`;
+};
+
+const stats = [
+  { label: 'Domains', value: counts.domains, href: buildUrl('/discover/domains'), icon: Boxes },
+  { label: 'Services', value: counts.services, href: buildUrl('/discover/services'), icon: Server },
+  { label: 'Messages', value: counts.messages, href: buildUrl('/discover/events'), icon: Mail },
+  { label: 'Flows', value: counts.flows, href: buildUrl('/discover/flows'), icon: Waypoints },
+  { label: 'Schemas', value: counts.schemas, href: buildUrl('/schemas/explorer'), icon: FileJson },
+  { label: 'Teams', value: counts.teams, href: buildUrl('/directory/teams'), icon: Users },
+];
+
+const formatDate = (timestamp: number) =>
+  new Date(timestamp).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
+---
+
+<div class="ec-dashboard">
+  <!-- Header -->
+  <header class="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
+    <div class="min-w-0">
+      <h1 class="text-[26px] font-semibold leading-tight tracking-tight text-[rgb(var(--ec-page-text))] md:text-[30px]">
+        {title}
+      </h1>
+      <p class="mt-1.5 max-w-2xl text-[14px] leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
+        {description}
+      </p>
+    </div>
+    <div class="flex w-full items-center gap-2 lg:w-auto">
+      <button type="button" data-dashboard-search class="ec-dashboard-search group">
+        <Search className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))]" />
+        <span class="flex-1 text-left">Search the catalog</span>
+        <kbd class="ec-dashboard-kbd">⌘K</kbd>
+      </button>
+      {
+        chatEnabled && (
+          <button type="button" data-dashboard-ask class="ec-dashboard-button">
+            <Sparkles className="h-4 w-4" />
+            Ask
+          </button>
+        )
+      }
+    </div>
+  </header>
+
+  <!-- Counts -->
+  <section class="ec-dashboard-stats mt-8" aria-label="Catalog at a glance">
+    {
+      stats.map((stat) => (
+        <a href={stat.href} class="ec-dashboard-card ec-dashboard-stat group">
+          <div class="flex items-center justify-between">
+            <span class="text-[12px] font-medium text-[rgb(var(--ec-page-text-muted))]">{stat.label}</span>
+            <stat.icon className="h-4 w-4 text-[rgb(var(--ec-page-text-muted))] transition-colors group-hover:text-[rgb(var(--ec-page-text))]" />
+          </div>
+          <span class="mt-2 block text-[28px] font-semibold leading-none tracking-tight tabular-nums text-[rgb(var(--ec-page-text))]">
+            {stat.value}
+          </span>
+        </a>
+      ))
+    }
+  </section>
+
+  <!-- The architecture graph, or what changed recently without it -->
+  <div class="mt-6">
+    {
+      graph ? (
+        <section class="ec-dashboard-card overflow-hidden">
+          <div class="ec-dashboard-card-header">
+            <h2 class="ec-dashboard-title">
+              <Network className="h-4 w-4" /> Architecture
+            </h2>
+          </div>
+          <div class="relative h-[34rem] border-t border-[rgb(var(--ec-page-border))]">
+            <CatalogForceGraph
+              client:only="react"
+              nodes={graph.nodes}
+              links={graph.links}
+              linkLabels={graph.linkLabels}
+              initialLens="domains"
+              showSearch
+              showLegend
+              showLensPicker
+              syncUrl={false}
+              zoomOnScroll={false}
+              openInGraphUrl={buildUrl('/visualiser/graph')}
+              openInGraphLabel="Open full screen"
+            />
+          </div>
+        </section>
+      ) : (
+        <section class="ec-dashboard-card">
+          <div class="ec-dashboard-card-header">
+            <h2 class="ec-dashboard-title">
+              <Clock className="h-4 w-4" /> Recently updated
+            </h2>
+          </div>
+          {recentlyUpdated.length === 0 ? (
+            <p class="px-5 pb-5 text-[13px] text-[rgb(var(--ec-page-text-muted))]">Nothing to show yet.</p>
+          ) : (
+            <ul class="divide-y divide-[rgb(var(--ec-page-border))]">
+              {recentlyUpdated.map((resource) => (
+                <li>
+                  <a href={resource.href} class="ec-dashboard-row">
+                    <span class="ec-dashboard-type" style={badgeStyle(resource.collection)}>
+                      {TYPE_LABELS[resource.collection]}
+                    </span>
+                    <span class="min-w-0 flex-1">
+                      <span class="block truncate text-[13.5px] font-medium text-[rgb(var(--ec-page-text))]">
+                        {resource.name}
+                        <span class="ml-1.5 font-mono text-[11.5px] font-normal text-[rgb(var(--ec-page-text-muted))]">
+                          v{resource.version}
+                        </span>
+                      </span>
+                      {resource.summary && (
+                        <span class="block truncate text-[12.5px] text-[rgb(var(--ec-page-text-muted))]">{resource.summary}</span>
+                      )}
+                    </span>
+                    {resource.owners[0] && (
+                      <span class="hidden shrink-0 text-[12px] text-[rgb(var(--ec-page-text-muted))] md:block">
+                        {resource.owners[0].name}
+                      </span>
+                    )}
+                    <time
+                      class="w-24 shrink-0 text-right text-[12px] tabular-nums text-[rgb(var(--ec-page-text-muted))]"
+                      datetime={new Date(resource.updatedAt!).toISOString()}
+                      data-relative-time
+                    >
+                      {formatDate(resource.updatedAt!)}
+                    </time>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      )
+    }
+  </div>
+</div>
+
+<script>
+  // The search bar and Ask button open the catalog's search and assistant
+  const bind = () => {
+    document.querySelector('[data-dashboard-search]')?.addEventListener('click', () => {
+      (window as any).searchModalState?.open();
+    });
+    document.querySelector('[data-dashboard-ask]')?.addEventListener('click', () => {
+      window.dispatchEvent(new CustomEvent('eventcatalog:open-chat'));
+    });
+
+    // "3 days ago", counted in the browser so a prerendered page stays current
+    const format = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+    const units: [Intl.RelativeTimeFormatUnit, number][] = [
+      ['year', 365 * 24 * 3600],
+      ['month', 30 * 24 * 3600],
+      ['week', 7 * 24 * 3600],
+      ['day', 24 * 3600],
+      ['hour', 3600],
+      ['minute', 60],
+    ];
+    document.querySelectorAll<HTMLTimeElement>('time[data-relative-time]').forEach((time) => {
+      const seconds = (new Date(time.dateTime).getTime() - Date.now()) / 1000;
+      const [unit, size] = units.find(([, size]) => Math.abs(seconds) >= size) ?? ['minute', 60];
+      time.textContent = format.format(Math.round(seconds / size), unit);
+      time.title = new Date(time.dateTime).toLocaleString();
+    });
+  };
+  bind();
+  document.addEventListener('astro:page-load', bind);
+</script>
+
+<style is:global>
+  .ec-dashboard {
+    max-width: 96rem;
+    padding-bottom: 2.5rem;
+  }
+  .ec-dashboard-card {
+    border: 1px solid rgb(var(--ec-page-border));
+    border-radius: 0.875rem;
+    background: rgb(var(--ec-card-bg, var(--ec-page-bg)));
+  }
+  .ec-dashboard-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem 0.75rem;
+  }
+  .ec-dashboard-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 13.5px;
+    font-weight: 600;
+    color: rgb(var(--ec-page-text));
+  }
+  .ec-dashboard-title svg {
+    color: rgb(var(--ec-page-text-muted));
+  }
+  .ec-dashboard-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 12px;
+    font-weight: 500;
+    color: rgb(var(--ec-page-text-muted));
+  }
+  .ec-dashboard-link:hover {
+    color: rgb(var(--ec-page-text));
+  }
+  .ec-dashboard-search {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 0.625rem;
+    min-width: 0;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    border: 1px solid rgb(var(--ec-page-border));
+    border-radius: 0.625rem;
+    background: rgb(var(--ec-card-bg, var(--ec-page-bg)));
+    font-size: 13px;
+    color: rgb(var(--ec-page-text-muted));
+    transition: border-color 150ms;
+  }
+  @media (min-width: 1024px) {
+    .ec-dashboard-search {
+      width: 22rem;
+      flex: none;
+    }
+  }
+  .ec-dashboard-search:hover {
+    border-color: rgb(var(--ec-page-text) / 0.35);
+  }
+  .ec-dashboard-kbd {
+    border: 1px solid rgb(var(--ec-page-border));
+    border-radius: 0.375rem;
+    padding: 0.05rem 0.375rem;
+    font-family: inherit;
+    font-size: 11px;
+  }
+  .ec-dashboard-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    height: 2.5rem;
+    padding: 0 0.875rem;
+    border-radius: 0.625rem;
+    background: rgb(var(--ec-page-text));
+    font-size: 13px;
+    font-weight: 500;
+    color: rgb(var(--ec-page-bg));
+    transition: opacity 150ms;
+  }
+  .ec-dashboard-button:hover {
+    opacity: 0.85;
+  }
+  .ec-dashboard-stats {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.75rem;
+  }
+  @media (min-width: 768px) {
+    .ec-dashboard-stats {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  @media (min-width: 1280px) {
+    .ec-dashboard-stats {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
+  .ec-dashboard-stat {
+    display: block;
+    padding: 1rem 1.1rem;
+    transition: border-color 150ms;
+  }
+  .ec-dashboard-stat:hover {
+    border-color: rgb(var(--ec-page-text) / 0.35);
+  }
+  .ec-dashboard-row {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    padding: 0.7rem 1.25rem;
+    transition: background 150ms;
+  }
+  .ec-dashboard-row:hover {
+    background: rgb(var(--ec-page-text) / 0.03);
+  }
+  .ec-dashboard-type {
+    flex-shrink: 0;
+    width: 4.75rem;
+    border-radius: 0.375rem;
+    padding: 0.15rem 0;
+    text-align: center;
+    font-size: 11px;
+    font-weight: 600;
+  }
+  @media (min-width: 640px) {
+  }
+  @media (min-width: 1280px) {
+  }
+</style>

package/eventcatalog/src/components/MDX/NodeGraph/AstroNodeGraph.tsx

@@ -12,15 +12,38 @@
  * CSS ships in the page head and survives ClientRouter navigations (see NodeGraph.astro).
  */
 
-import { useCallback, lazy, Suspense } from 'react';
+import { useCallback, useEffect, useState, lazy, Suspense } from 'react';
+import { createPortal } from 'react-dom';
 import type { Node, Edge } from '@xyflow/react';
-import type { FlowGroupBy } from '@eventcatalog/visualiser';
+import type { FlowGroupBy, OpenInStudioRequest } from '@eventcatalog/visualiser';
 import { buildUrl } from '@utils/url-builder';
+import { createCanvasThroughApi } from '@features/studio/api/client';
+import { getStoredName } from '@features/studio/identity';
+
+// Studio's canvas code (what turns a diagram into a canvas, and the dialog asking for its name) is only loaded when a
+// diagram is opened in Studio: every page with a diagram would load it otherwise, with Studio on or not
+const OpenInStudioDialog = lazy(() => import('@features/studio/components/OpenInStudioDialog'));
 
 const NodeGraph = lazy(() =>
   import('@eventcatalog/visualiser').then((module) => ({ default: module.NodeGraph }))
 ) as React.LazyExoticComponent<React.ComponentType<AstroNodeGraphProps & Record<string, unknown>>>;
 
+/**
+ * "Loading graph..." in the box the graph is drawn into, while the visualiser loads. Not where this island sits: the
+ * graph is portalled from there, and on the homepage that's beside the page's content (top right).
+ */
+const LoadingGraph = ({ portalId }: { portalId: string }) => {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+  useEffect(() => setContainer(document.getElementById(portalId)), [portalId]);
+  if (!container) return null;
+  return createPortal(
+    <div className="flex h-full min-h-[8rem] items-center justify-center text-sm text-[rgb(var(--ec-page-text-muted))]">
+      Loading graph...
+    </div>,
+    container
+  );
+};
+
 interface AstroNodeGraphProps {
   id: string;
   nodes: Node[];
@@ -57,9 +80,11 @@ interface AstroNodeGraphProps {
   preferenceScope?: string;
   // Group a flow's steps into swimlanes to start with
   swimlanes?: FlowGroupBy;
+  // The Studio API's address, when Studio is on: the menu can then start a canvas from the diagram
+  studioApiUrl?: string;
 }
 
-const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: AstroNodeGraphProps) => {
+const AstroNodeGraph = ({ isDevMode = false, resourceKey, studioApiUrl, ...otherProps }: AstroNodeGraphProps) => {
   // Astro-specific navigation handler
   const handleNavigate = useCallback((url: string) => {
     // Use window.location for navigation since we can't import astro:transitions/client in a React component
@@ -108,8 +133,32 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: Astro
     }
   }, []);
 
+  // Opening the diagram in Studio: asks what to call the canvas, then makes it with what the diagram shows and opens
+  // it (in this tab) at the level shown. What it shows is only taken once it's named (laying a level out can take a
+  // moment), and anything that goes wrong is shown in the dialog.
+  const [toOpen, setToOpen] = useState<OpenInStudioRequest | null>(null);
+  const closeOpenInStudio = useCallback(() => setToOpen(null), []);
+  const openInStudio = useCallback(
+    async (title: string | undefined) => {
+      if (!studioApiUrl || !toOpen) return;
+      const snapshot = await toOpen.getSnapshot();
+      const { canvasFromVisualiser } = await import('@features/studio/from-visualiser');
+      const { nodes, edges, levels } = canvasFromVisualiser(snapshot);
+      if (nodes.length === 0) throw new Error('Nothing on this diagram can go on a canvas yet');
+      const canvas = await createCanvasThroughApi(studioApiUrl, {
+        title,
+        createdBy: getStoredName() ?? undefined,
+        nodes,
+        edges,
+        levels,
+      });
+      window.location.assign(snapshot.level === 3 ? canvas.url : `${canvas.url}?level=${snapshot.level}`);
+    },
+    [studioApiUrl, toOpen]
+  );
+
   return (
-    <Suspense fallback={<div>Loading graph...</div>}>
+    <Suspense fallback={<LoadingGraph portalId={otherProps.portalId || `${otherProps.id}-portal`} />}>
       <NodeGraph
         {...otherProps}
         resourceKey={resourceKey}
@@ -118,7 +167,14 @@ const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: Astro
         onBuildUrl={handleBuildUrl}
         onSaveLayout={handleSaveLayout}
         onResetLayout={handleResetLayout}
+        onOpenInStudio={studioApiUrl ? setToOpen : undefined}
       />
+      {toOpen && (
+        // Its own, so the diagram isn't swapped for "Loading graph..." while the dialog loads
+        <Suspense fallback={null}>
+          <OpenInStudioDialog title={toOpen.title} onOpen={openInStudio} onClose={closeOpenInStudio} />
+        </Suspense>
+      )}
     </Suspense>
   );
 };

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

@@ -31,11 +31,14 @@ 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 { isEventCatalogChatVisible, isDevMode } from '@utils/feature';
+import { isEventCatalogChatVisible, isDevMode, isCanvasEnabled } from '@utils/feature';
+import { CANVASES_API_PATH } from '@features/studio/api/canvases-api';
 import { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';
 import { compactVisualiserGraph } from '@utils/node-graphs/compact-visualiser-graph';
 
 const isChatEnabled = isEventCatalogChatVisible();
+// With Studio on, the menu can start a canvas from the diagram
+const studioApiUrl = isCanvasEnabled() ? buildUrl(CANVASES_API_PATH, true) : undefined;
 
 interface Props {
   id: string;
@@ -257,6 +260,7 @@ if (overview && levelsOverview) {
     hiddenMessagesGraph={hiddenMessagesGraph}
     preferenceScope={collection}
     swimlanes={lanes}
+    studioApiUrl={studioApiUrl}
   />
 </div>
 

package/eventcatalog/src/components/NavigationProgress.astro

@@ -22,12 +22,19 @@
     opacity: 1;
   }
 
+  /* On every page, hidden until a navigation takes a while: paused until then (a running animation costs a style
+     recalc and paint on every frame, even when it can't be seen) */
   .navigation-progress__bar {
     width: 35%;
     height: 100%;
     background: rgb(var(--ec-accent));
     box-shadow: 0 0 10px rgb(var(--ec-accent) / 0.55);
     animation: navigation-progress 1.1s ease-in-out infinite;
+    animation-play-state: paused;
+  }
+
+  #navigation-progress[data-visible='true'] .navigation-progress__bar {
+    animation-play-state: running;
   }
 
   :global([data-navigation-pending='true']) {

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

@@ -4,6 +4,7 @@ import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { getLanguageForHighlight, getSchemaTypeLabel } from './utils';
 import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 import type { SchemaItem } from './types';
 
 interface ApiContentViewerProps {
@@ -135,6 +136,7 @@ export default function ApiContentViewer({ message, onCopy, copiedId }: ApiConte
 
           <div className="border-t" style={{ borderColor: dividerColor }}>
             <SyntaxHighlighter
+              renderer={renderHighlightedRows}
               language={getLanguageForHighlight(message.schemaExtension)}
               style={isDarkMode ? oneDark : oneLight}
               customStyle={{

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

@@ -13,6 +13,7 @@ import { MarkdownCodeGroup } from '../MDX/CodeGroup/MarkdownCodeGroup';
 import { MarkdownColumns, MarkdownColumn } from '../MDX/Columns/MarkdownColumns';
 import { remarkMarkdownColumns } from '../../remark-plugins/markdown-columns';
 import { getLanguageForHighlight } from './utils';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 
 interface ExamplesViewerProps {
   examples: MessageExample[];
@@ -40,6 +41,7 @@ function CodeBlock({ language, code }: { language?: string; code: string }) {
   const content = code.replace(/\s+$/, '');
   const highlighter = (
     <SyntaxHighlighter
+      renderer={renderHighlightedRows}
       language={language || 'text'}
       style={isDarkMode ? oneDark : oneLight}
       customStyle={{

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

@@ -6,6 +6,7 @@ import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { getLanguageForHighlight } from './utils';
 import type { SchemaItem } from './types';
 import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 
 interface SchemaCodeModalProps {
   isOpen: boolean;
@@ -60,6 +61,7 @@ export default function SchemaCodeModal({ isOpen, onOpenChange, message, onCopy,
           {/* Content */}
           <div className="flex-1 overflow-auto p-6">
             <SyntaxHighlighter
+              renderer={renderHighlightedRows}
               language={getLanguageForHighlight(message.schemaExtension)}
               style={isDarkMode ? oneDark : oneLight}
               customStyle={{

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

@@ -9,6 +9,7 @@ import ProtobufSchemaViewer from './ProtobufSchemaViewer';
 import { getLanguageForHighlight, SCHEMA_CODE_STYLE } from './utils';
 import type { SchemaItem } from './types';
 import { useDarkMode } from './useDarkMode';
+import { renderHighlightedRows } from '@utils/syntax-highlighter-renderer';
 
 interface SchemaContentViewerProps {
   message: SchemaItem;
@@ -112,6 +113,7 @@ export default function SchemaContentViewer({
 
       <div className="min-h-0 flex-1 overflow-auto">
         <SyntaxHighlighter
+          renderer={renderHighlightedRows}
           language={getLanguageForHighlight(message.schemaExtension)}
           style={isDarkMode ? oneDark : oneLight}
           customStyle={{ ...SCHEMA_CODE_STYLE, height: '100%' }}

package/eventcatalog/src/components/Search/SearchDataLoader.astro

@@ -16,34 +16,22 @@
   import { setSidebarData, sidebarStore } from '@stores/sidebar-store';
   import { buildUrl } from '@utils/url-builder';
 
-  // Only fetch if we haven't already loaded the data
+  // Only fetch if we haven't already loaded the data. Fetched straight away rather than when
+  // the browser is idle: the sidebar's first paint comes from the server (see SideNav.astro),
+  // but drilling down and search wait on this data
   if (!sidebarStore.get()) {
-    const apiUrl = buildUrl('/api/sidebar-data.json', true);
-
-    const loadSidebarData = () => {
-      // Double-check cache in case another component loaded data while waiting for idle
-      if (sidebarStore.get()) return;
-
-      fetch(apiUrl)
-        .then((response) => {
-          if (!response.ok) {
-            throw new Error(`Failed to fetch sidebar data: ${response.status}`);
-          }
-          return response.json();
-        })
-        .then((data) => {
-          setSidebarData(data);
-        })
-        .catch((error) => {
-          console.error('Error loading sidebar data:', error);
-        });
-    };
-
-    // Defer non-critical sidebar payload fetch until browser is idle
-    if (typeof window.requestIdleCallback === 'function') {
-      window.requestIdleCallback(loadSidebarData, { timeout: 1200 });
-    } else {
-      setTimeout(loadSidebarData, 300);
-    }
+    fetch(buildUrl('/api/sidebar-data.json', true))
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Failed to fetch sidebar data: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setSidebarData(data);
+      })
+      .catch((error) => {
+        console.error('Error loading sidebar data:', error);
+      });
   }
 </script>

package/eventcatalog/src/components/Search/SearchModal.tsx

@@ -34,6 +34,7 @@ import {
   getUrlForSearchItem,
   highlightQuery,
   mapPagefindResultsToSearchItems,
+  rankResourceSearchItems,
   type SearchItem,
   type SearchNode,
 } from './search-utils';
@@ -316,16 +317,7 @@ export default function SearchModal() {
       return items;
     }
 
-    const lowerQuery = query.toLowerCase();
-    return items.filter((item) => {
-      if (item.name.toLowerCase().includes(lowerQuery)) return true;
-      // Key format is "type:id:version" (e.g. "service:OrdersService:0.0.3").
-      // Match against the id so users can find resources by their raw id too.
-      const keyParts = item.key?.split(':') ?? [];
-      const id = keyParts[1];
-      if (id?.toLowerCase().includes(lowerQuery)) return true;
-      return !!item.rawNode.summary && item.rawNode.summary.toLowerCase().includes(lowerQuery);
-    });
+    return rankResourceSearchItems(items, query);
   }, [indexedItems, isIndexedSearch, items, query]);
 
   const filters = useMemo(() => {

package/eventcatalog/src/components/Search/search-utils.ts

@@ -168,6 +168,32 @@ export const getIndexedResultRank = ({
   return 0;
 };
 
+/**
+ * How well a resource matches a resource search query: an exact name (5), a name starting with
+ * the query (4) or containing it (3), then the id (2), then the summary (1). 0 is no match.
+ */
+export const getResourceResultRank = (item: Pick<SearchItem, 'name' | 'key' | 'rawNode'>, query: string) => {
+  const lowerQuery = query.toLowerCase();
+  const name = item.name.toLowerCase();
+  if (name === lowerQuery) return 5;
+  if (name.startsWith(lowerQuery)) return 4;
+  if (name.includes(lowerQuery)) return 3;
+  // Key format is "type:id:version" (e.g. "service:OrdersService:0.0.3").
+  // Match against the id so users can find resources by their raw id too.
+  const id = item.key?.split(':')[1];
+  if (id?.toLowerCase().includes(lowerQuery)) return 2;
+  if (item.rawNode.summary?.toLowerCase().includes(lowerQuery)) return 1;
+  return 0;
+};
+
+/** Resources that match a resource search query, best matches first (index order within a rank) */
+export const rankResourceSearchItems = <T extends Pick<SearchItem, 'name' | 'key' | 'rawNode'>>(items: T[], query: string) =>
+  items
+    .map((item, index) => ({ item, index, rank: getResourceResultRank(item, query) }))
+    .filter(({ rank }) => rank > 0)
+    .sort((a, b) => b.rank - a.rank || a.index - b.index)
+    .map(({ item }) => item);
+
 export const applyActiveFilter = <T extends { type: string }>(items: T[], activeFilter: string) => {
   if (activeFilter === 'all') {
     return items;