@eventcatalog/core 5.0.0-beta.9 → 5.0.0

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;

package/eventcatalog/src/components/Seo.astro

@@ -3,8 +3,12 @@ import { SEO } from 'astro-seo';
 import config from '@config';
 import defaultImageFile from '../../public/opengraph.png';
 import { buildUrl } from '@utils/url-builder';
+import { formatPageTitle } from '@utils/page-title';
 
-const { title = config.title, description = config.tagline, ogTitle = title, ogType = 'website' } = Astro.props;
+const { description = config.tagline, ogType = 'website' } = Astro.props;
+// The page's own title (none for the homepage), followed by the catalog's
+const title = formatPageTitle(Astro.props.title);
+const ogTitle = title;
 
 const siteBaseURL = new URL(Astro.url);
 const defaultImage = new URL(defaultImageFile.src, siteBaseURL);

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

@@ -64,53 +64,58 @@ export const AssistantSettingsForm = ({ canEdit, initial, chatAvailable, inSSR,
   };
 
   return (
-    <form onSubmit={(e) => e.preventDefault()} className="divide-y divide-[rgb(var(--ec-page-border))]">
+    <>
       <Toaster richColors closeButton position="bottom-right" theme="system" />
-      {!canEdit && (
-        <div className="pb-6">
-          <ReadOnlyBanner />
-        </div>
-      )}
-
-      <Row
-        title="Assistant Agent"
-        description="Assistant agent that answers questions about your architecture directly in your catalog."
-        canEdit={canEdit}
-        dirty={dirty}
-        saving={saving}
-        onSave={save}
+      <form
+        onSubmit={(e) => e.preventDefault()}
+        className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]"
       >
-        <div className="space-y-3">
-          <ToggleRow
-            icon={<MessageSquare className="h-4 w-4" aria-hidden />}
-            label={chatEnabled ? 'Enabled' : 'Disabled'}
-            hint={
-              chatEnabled
-                ? 'Event Catalog Assistant is visible in this catalog.'
-                : 'Event Catalog Assistant is hidden from this catalog.'
-            }
-            checked={chatEnabled}
-            disabled={!canEdit}
-            onChange={setChatEnabled}
-          />
-          {chatEnabled &&
-            (chatAvailable ? (
-              <ConfigurationRequired />
-            ) : !inSSR ? (
-              <AssistantNeedsSSR />
-            ) : !hasChatConfigFile ? (
-              <AssistantNeedsConfigFile />
-            ) : null)}
-        </div>
-      </Row>
-    </form>
+        {!canEdit && (
+          <div className="pb-6">
+            <ReadOnlyBanner />
+          </div>
+        )}
+
+        <Row
+          title="Assistant Agent"
+          description="Assistant agent that answers questions about your architecture directly in your catalog."
+          canEdit={canEdit}
+          dirty={dirty}
+          saving={saving}
+          onSave={save}
+        >
+          <div className="space-y-3">
+            <ToggleRow
+              icon={<MessageSquare className="h-4 w-4" aria-hidden />}
+              label={chatEnabled ? 'Enabled' : 'Disabled'}
+              hint={
+                chatEnabled
+                  ? 'Event Catalog Assistant is visible in this catalog.'
+                  : 'Event Catalog Assistant is hidden from this catalog.'
+              }
+              checked={chatEnabled}
+              disabled={!canEdit}
+              onChange={setChatEnabled}
+            />
+            {chatEnabled &&
+              (chatAvailable ? (
+                <ConfigurationRequired />
+              ) : !inSSR ? (
+                <AssistantNeedsSSR />
+              ) : !hasChatConfigFile ? (
+                <AssistantNeedsConfigFile />
+              ) : null)}
+          </div>
+        </Row>
+      </form>
+    </>
   );
 };
 
 const ConfigurationRequired = () => (
-  <div className="rounded-lg border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.06)] px-4 py-3">
+  <div className="rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)] px-4 py-3">
     <div className="flex items-start gap-3">
-      <span className="flex h-7 w-7 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))]">
+      <span className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <Wrench className="h-3.5 w-3.5" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
@@ -125,7 +130,7 @@ const ConfigurationRequired = () => (
           target="_blank"
           rel="noreferrer"
           className={cn(
-            'mt-2 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-accent))] hover:underline'
+            'mt-2 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-page-text))] hover:underline'
           )}
         >
           Configure the Agent
@@ -137,15 +142,15 @@ const ConfigurationRequired = () => (
 );
 
 const AssistantNeedsSSR = () => (
-  <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="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)]">
     <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))]">
+      <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-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <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))]">
+          <span className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text))]">
             SSR
           </span>
         </div>
@@ -157,7 +162,7 @@ const AssistantNeedsSSR = () => (
             href={ASSISTANT_CONFIGURATION_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))]"
+            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-page-text))] px-3 py-1.5 text-[12px] font-semibold text-[rgb(var(--ec-page-bg))] shadow-sm transition-colors hover:opacity-85"
           >
             Configuration guide
             <ExternalLink className="h-3 w-3" aria-hidden />
@@ -178,9 +183,9 @@ const AssistantNeedsSSR = () => (
 );
 
 const AssistantNeedsConfigFile = () => (
-  <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="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)]">
     <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))]">
+      <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-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <Wrench className="h-4 w-4" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
@@ -195,7 +200,7 @@ const AssistantNeedsConfigFile = () => (
             href={ASSISTANT_CONFIGURATION_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))]"
+            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-page-text))] px-3 py-1.5 text-[12px] font-semibold text-[rgb(var(--ec-page-bg))] shadow-sm transition-colors hover:opacity-85"
           >
             Configuration guide
             <ExternalLink className="h-3 w-3" aria-hidden />