@eventcatalog/core 4.9.0 → 4.10.0

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.9.0";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-HKVOSQTD.js";
-import "../chunk-3CGSSMTK.js";
+} from "../chunk-BQXEWQ5J.js";
+import "../chunk-BDFTJVGN.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -140,7 +140,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.9.0";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-MPHX5C7M.js";
-import "../chunk-HKVOSQTD.js";
+} from "../chunk-HFAQXAG3.js";
+import "../chunk-BQXEWQ5J.js";
 import "../chunk-K2XIENVT.js";
-import "../chunk-3CGSSMTK.js";
+import "../chunk-BDFTJVGN.js";
 import "../chunk-6QENHZZP.js";
 export {
   log_build_default as default

package/dist/{chunk-XQHS36GO.js → chunk-5XURY2JV.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-LVGQ23LR.js";
+} from "./chunk-IC6XSXJO.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-3CGSSMTK.js → chunk-BDFTJVGN.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "4.9.0";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-HKVOSQTD.js → chunk-BQXEWQ5J.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-3CGSSMTK.js";
+} from "./chunk-BDFTJVGN.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/{chunk-MPHX5C7M.js → chunk-HFAQXAG3.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-HKVOSQTD.js";
+} from "./chunk-BQXEWQ5J.js";
 import {
   countResources,
   serializeCounts

package/dist/{chunk-LVGQ23LR.js → chunk-IC6XSXJO.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-3CGSSMTK.js";
+} from "./chunk-BDFTJVGN.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "4.9.0";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-3CGSSMTK.js";
+} from "./chunk-BDFTJVGN.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -144,7 +144,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.9.0";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -4,8 +4,8 @@ import {
 import "./chunk-CA4U2JP7.js";
 import {
   log_build_default
-} from "./chunk-MPHX5C7M.js";
-import "./chunk-HKVOSQTD.js";
+} from "./chunk-HFAQXAG3.js";
+import "./chunk-BQXEWQ5J.js";
 import "./chunk-K2XIENVT.js";
 import {
   FederationConflictError,
@@ -31,10 +31,10 @@ import {
 } from "./chunk-B7HCX5HM.js";
 import {
   generate
-} from "./chunk-XQHS36GO.js";
+} from "./chunk-5XURY2JV.js";
 import {
   logger
-} from "./chunk-LVGQ23LR.js";
+} from "./chunk-IC6XSXJO.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-LHR4G2UO.js";
@@ -54,7 +54,7 @@ import {
 import "./chunk-W5JQON7Z.js";
 import {
   VERSION
-} from "./chunk-3CGSSMTK.js";
+} from "./chunk-BDFTJVGN.js";
 import {
   linkCoreNodeModules,
   resolveInstalledCoreNodeModules

package/dist/generate.cjs

@@ -108,7 +108,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.9.0";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-XQHS36GO.js";
-import "./chunk-LVGQ23LR.js";
-import "./chunk-3CGSSMTK.js";
+} from "./chunk-5XURY2JV.js";
+import "./chunk-IC6XSXJO.js";
+import "./chunk-BDFTJVGN.js";
 import "./chunk-6QENHZZP.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.9.0";
+var version = "4.10.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-LVGQ23LR.js";
-import "../chunk-3CGSSMTK.js";
+} from "../chunk-IC6XSXJO.js";
+import "../chunk-BDFTJVGN.js";
 export {
   logger
 };

package/eventcatalog/src/components/Badge.astro

@@ -23,6 +23,8 @@ type Props = {
 
 const { badge, className = '' } = Astro.props;
 const href = getBadgeHref(badge);
+// Only links that leave the catalog get the external-link arrow.
+const isExternalHref = !!href && (/^[a-z][a-z0-9+.-]*:/i.test(href) || href.startsWith('//'));
 const Icon = badge.icon || badge.iconComponent;
 const hasThemedIcon = badge.iconURLLight && badge.iconURLDark;
 const classes = `
@@ -59,7 +61,7 @@ const classes = `
         <img src={badge.iconURL} class="w-3 h-3 flex-shrink-0 opacity-80" alt="" onerror="this.style.display='none'" />
       )}
       <span>{badge.content}</span>
-      <ArrowTopRightOnSquareIcon className="w-2.5 h-2.5 flex-shrink-0 opacity-70" aria-hidden="true" />
+      {isExternalHref && <ArrowTopRightOnSquareIcon className="w-2.5 h-2.5 flex-shrink-0 opacity-70" aria-hidden="true" />}
     </a>
   ) : (
     <span id={badge.id || undefined} class={classes} style={getBadgeStyle(badge)} title={badge.content}>

package/eventcatalog/src/components/FieldsExplorer/FieldNodeGraph.tsx

@@ -224,11 +224,6 @@ function FieldNodeGraphInner({
   const { fitView } = useReactFlow();
   const wrapperRef = useRef<HTMLDivElement>(null);
 
-  // Load visualiser styles (animations, hover effects, theme variables)
-  useEffect(() => {
-    import('@eventcatalog/visualiser/styles-core.css');
-  }, []);
-
   useEffect(() => {
     const timer = setTimeout(() => fitView({ padding: 0.2 }), 50);
     return () => clearTimeout(timer);

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

@@ -4,6 +4,8 @@ import fs from 'fs';
 import { getAbsoluteFilePathForAstroFile } from '@utils/files';
 import Admonition from '@components/MDX/Admonition';
 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 { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';

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

@@ -3,6 +3,8 @@ import { getDomains } from '@utils/collections/domains';
 import { getNodesAndEdges } from '@utils/node-graphs/domain-entity-map.ts';
 import Admonition from '@components/MDX/Admonition';
 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 { getServices } from '@utils/collections/services';
 import { isEventCatalogChatEnabled, isDevMode } from '@utils/feature';

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

@@ -3,6 +3,8 @@ import { getFlows } from '@utils/collections/flows';
 import { getNodesAndEdges } from '@utils/node-graphs/flows-node-graph';
 import Admonition from '@components/MDX/Admonition';
 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 { loadSavedLayout, applyLayoutToNodes, buildResourceKey } from '@utils/node-graphs/layout-persistence';

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

@@ -6,9 +6,13 @@
  * - Navigation using Astro's navigate function
  * - Layout persistence via Astro API routes
  * - URL building with Astro's URL utilities
+ *
+ * Note: the visualiser stylesheet is deliberately NOT imported here. Every Astro file that
+ * renders this component imports `@eventcatalog/visualiser/styles-core.css` itself so the
+ * CSS ships in the page head and survives ClientRouter navigations (see NodeGraph.astro).
  */
 
-import { useCallback, lazy, Suspense, useEffect } from 'react';
+import { useCallback, lazy, Suspense } from 'react';
 import type { Node, Edge } from '@xyflow/react';
 import { buildUrl } from '@utils/url-builder';
 
@@ -42,12 +46,6 @@ interface AstroNodeGraphProps {
 }
 
 const AstroNodeGraph = ({ isDevMode = false, resourceKey, ...otherProps }: AstroNodeGraphProps) => {
-  useEffect(() => {
-    // Load visualizer styles only when this component is mounted.
-    // Use the core-scoped stylesheet so visualizer styles don't override EventCatalog utility classes globally.
-    import('@eventcatalog/visualiser/styles-core.css');
-  }, []);
-
   // 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

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

@@ -1,5 +1,10 @@
 ---
 import AstroNodeGraph from './AstroNodeGraph';
+// Imported here (server side) rather than from the React island: Astro then emits it as a
+// <link> in the page head, which survives ClientRouter navigations. A dynamic import from the
+// island injects a <style> that the view-transition head swap removes — and the cached module
+// never re-injects it, leaving the graph unstyled until a full reload.
+import '@eventcatalog/visualiser/styles-core.css';
 import { getNodesAndEdges as getNodesAndEdgesForAgent } from '@utils/node-graphs/agents-node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/node-graphs/services-node-graph';
 import {

package/eventcatalog/src/components/SideNav/NestedSideBar/index.tsx

@@ -1,10 +1,17 @@
 'use client';
 
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import * as LucideIcons from 'lucide-react';
 import { ChevronRight, ChevronLeft, ChevronDown, Home, Star } from 'lucide-react';
 import type { NavNode, ChildRef } from '@stores/sidebar-store/state';
-import { saveState, loadState, saveCollapsedSections, loadCollapsedSections } from './storage';
+import {
+  saveState,
+  loadState,
+  saveCollapsedSections,
+  loadCollapsedSections,
+  saveScrollPosition,
+  loadScrollPosition,
+} from './storage';
 import { useStore } from '@nanostores/react';
 import { sidebarStore } from '@stores/sidebar-store';
 import {
@@ -13,7 +20,14 @@ import {
   removeFavorite as removeFavoriteAction,
   type FavoriteItem,
 } from '@stores/favorites-store';
-import { canCollapseGroup, findNodeKeyByUrl, getBadgeClasses, getGroupLabel, isGroupCollapsed } from './utils';
+import {
+  canCollapseGroup,
+  findNodeKeyByUrl,
+  getBadgeClasses,
+  getDefaultCollapsedState,
+  isGroupCollapsed,
+  toggleGroupCollapsed,
+} from './utils';
 import { resolveIconUrl } from '@utils/icon';
 
 const cn = (...classes: (string | false | undefined)[]) => classes.filter(Boolean).join(' ');
@@ -60,6 +74,7 @@ export default function NestedSideBar() {
   const [sectionCollapsePreferences, setSectionCollapsePreferences] = useState(loadCollapsedSections);
   const [showPathPreview, setShowPathPreview] = useState(false);
   const [showFullPath, setShowFullPath] = useState(false);
+  const navRef = useRef<HTMLElement | null>(null);
 
   // Build a lookup map for faster URL navigation
   // Map format: "type:id" -> "nodeKey"
@@ -94,19 +109,9 @@ export default function NestedSideBar() {
   /**
    * Toggle section collapse state
    */
-  const toggleSectionCollapse = (sectionId: string) => {
+  const toggleSectionCollapse = (sectionId: string, defaultCollapsed = true) => {
     setSectionCollapsePreferences((previousPreferences) => {
-      const nextPreferences = {
-        expanded: new Set(previousPreferences.expanded),
-      };
-      const isCurrentlyCollapsed = isGroupCollapsed(true, sectionId, previousPreferences);
-
-      if (isCurrentlyCollapsed) {
-        nextPreferences.expanded.add(sectionId);
-      } else {
-        nextPreferences.expanded.delete(sectionId);
-      }
-
+      const nextPreferences = toggleGroupCollapsed(sectionId, previousPreferences, defaultCollapsed);
       saveCollapsedSections(nextPreferences);
       return nextPreferences;
     });
@@ -416,6 +421,50 @@ export default function NestedSideBar() {
     };
   }, [isInitialized, findAndNavigateToUrl, currentPath]);
 
+  /**
+   * Keep the selected item visible. On a full page load the nav remounts scrolled to the
+   * top, so first restore the offset saved for this drill-down path, then nudge the
+   * active item into view if it still isn't. `block: 'nearest'` never scrolls when the
+   * item is already visible, so clicking around near the top doesn't jump.
+   */
+  useEffect(() => {
+    if (!isInitialized) return;
+    const nav = navRef.current;
+    if (!nav) return;
+
+    const pathKey = getCurrentPath().join('/') || 'root';
+    const savedScrollTop = loadScrollPosition(pathKey);
+    if (savedScrollTop !== null) nav.scrollTop = savedScrollTop;
+
+    const active = nav.querySelector<HTMLElement>('[data-active="true"]');
+    if (!active) return;
+
+    const navRect = nav.getBoundingClientRect();
+    const activeRect = active.getBoundingClientRect();
+    const isVisible = activeRect.top >= navRect.top && activeRect.bottom <= navRect.bottom;
+    if (!isVisible) active.scrollIntoView({ block: 'nearest' });
+  }, [isInitialized, currentPath, navigationStack, getCurrentPath]);
+
+  /**
+   * Persist the nav scroll offset as it changes.
+   */
+  useEffect(() => {
+    if (!isInitialized) return;
+    const nav = navRef.current;
+    if (!nav) return;
+
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const onScroll = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => saveScrollPosition(getCurrentPath().join('/') || 'root', nav.scrollTop), 150);
+    };
+    nav.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      clearTimeout(timer);
+      nav.removeEventListener('scroll', onScroll);
+    };
+  }, [isInitialized, navigationStack, getCurrentPath]);
+
   /**
    * Check if a node is favorited
    * Note: This hook must be defined before any early returns to comply with Rules of Hooks
@@ -658,14 +707,15 @@ export default function NestedSideBar() {
   };
 
   /**
-   * Render a group with its children
+   * Render a group with its children.
+   *
+   * Groups render as a docs-style tree: every group has its caret on the right; top-level
+   * sections also carry an icon tile. Each level's children hang off a vertical guide.
    */
-  const renderGroup = (group: NavNode, groupKey: string | null, index: number) => {
-    // Get optional icon for group
+  const renderGroup = (group: NavNode, groupKey: string | null, index: number, depth = 0) => {
     const GroupIcon = group.icon ? (LucideIcons as unknown as Record<string, LucideIcons.LucideIcon>)[group.icon] : null;
-    const isSubtleGroup = group.subtle === true;
+    const isNested = depth > 0;
 
-    // Get visible children
     const visibleChildren =
       group.pages?.filter((childRef) => {
         const child = resolveRef(childRef);
@@ -673,46 +723,36 @@ export default function NestedSideBar() {
       }) ?? [];
 
     const groupId = groupKey || group.collapseKey || `${currentLevel.key ?? 'root'}:group:${group.title}`;
-    const canCollapse = canCollapseGroup(visibleChildren.length, isTopLevel, group.collapsible);
-    const isCollapsed = isGroupCollapsed(canCollapse, groupId, sectionCollapsePreferences);
-
-    // When a group's children are subtle subgroups (e.g. Resources > Services/Flows/Data Stores),
-    // they render flush under the parent icon instead of inside the indented border guide.
-    const hasSubtleChildren = visibleChildren.some((childRef) => {
-      const child = resolveRef(childRef);
-      return child && isGroup(child) && child.subtle === true;
-    });
-
-    const headerContent = (
+    const canCollapse = canCollapseGroup(isTopLevel, group.collapsible, group.collapsed);
+    const defaultCollapsed = getDefaultCollapsedState(visibleChildren.length, group.collapsed);
+    const isCollapsed = isGroupCollapsed(canCollapse, groupId, sectionCollapsePreferences, defaultCollapsed);
+    const header = isNested ? (
       <>
-        <div className="flex items-center gap-2">
-          {GroupIcon && (
-            <span
-              className={cn(
-                'flex items-center justify-center w-5 h-5 rounded',
-                isSubtleGroup
-                  ? 'bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-content-text-muted))]'
-                  : 'bg-[rgb(var(--ec-group-icon-bg))] text-[rgb(var(--ec-group-icon-text))]'
-              )}
-            >
-              <GroupIcon className="w-3 h-3" />
-            </span>
-          )}
-          <span
+        {GroupIcon && <GroupIcon className="w-3.5 h-3.5 flex-shrink-0 text-[rgb(var(--ec-content-text-muted))]" />}
+        <span className="text-[12px] font-medium text-[rgb(var(--ec-content-text))] truncate">{group.title}</span>
+        {canCollapse && (
+          <ChevronDown
             className={cn(
-              isSubtleGroup
-                ? 'text-[9px] font-semibold uppercase tracking-[0.1em] text-[rgb(var(--ec-content-text-muted))]'
-                : 'text-[12px] font-semibold tracking-tight text-[rgb(var(--ec-content-text))]'
+              'ml-auto w-3.5 h-3.5 flex-shrink-0 text-[rgb(var(--ec-icon-color))] transition-transform',
+              isCollapsed && '-rotate-90'
             )}
-          >
-            {getGroupLabel(group.title, visibleChildren.length)}
+          />
+        )}
+      </>
+    ) : (
+      <>
+        {GroupIcon && (
+          <span className="flex items-center justify-center w-5 h-5 flex-shrink-0 rounded bg-[rgb(var(--ec-group-icon-bg))] text-[rgb(var(--ec-group-icon-text))]">
+            <GroupIcon className="w-3 h-3" />
           </span>
-        </div>
+        )}
+        <span className="text-[12px] font-semibold tracking-tight text-[rgb(var(--ec-content-text))] truncate">
+          {group.title}
+        </span>
         {canCollapse && (
           <ChevronDown
             className={cn(
-              isSubtleGroup ? 'w-3.5 h-3.5' : 'w-4 h-4',
-              'text-[rgb(var(--ec-icon-color))] transition-transform',
+              'ml-auto w-4 h-4 flex-shrink-0 text-[rgb(var(--ec-icon-color))] transition-transform',
               isCollapsed && '-rotate-90'
             )}
           />
@@ -720,32 +760,30 @@ export default function NestedSideBar() {
       </>
     );
 
+    const headerClasses = cn(
+      'group flex items-center w-full rounded-md text-left transition-colors',
+      isNested ? 'gap-1.5 px-2 py-1.5' : 'gap-2 px-2 py-1.5',
+      canCollapse && 'cursor-pointer hover:bg-[rgb(var(--ec-content-hover))]'
+    );
+
+    // Top level: the guide line sits under the centre of the icon tile (8px padding + half of
+    // 20px). Nested: carets sit on the right, so the guide is simply inset from the label.
+    const childrenClasses = cn(
+      'flex flex-col gap-px mt-0.5 border-l border-[rgb(var(--ec-content-border))]',
+      isNested ? 'ml-3 pl-1.5' : 'ml-[18px] pl-2'
+    );
+
     return (
-      <div key={`group-${groupKey || index}`} className={cn(isSubtleGroup ? 'mb-2 last:mb-1' : 'mb-5 last:mb-2')}>
+      <div key={`group-${groupKey || index}`} className={cn(isNested ? 'mt-0.5' : 'mb-4 last:mb-1')}>
         {canCollapse ? (
-          <button
-            onClick={() => toggleSectionCollapse(groupId)}
-            className={cn(
-              'flex items-center justify-between w-full rounded-md transition-colors cursor-pointer',
-              isSubtleGroup
-                ? 'px-2 py-1 hover:bg-[rgb(var(--ec-content-hover))]/60'
-                : 'px-2 py-1.5 hover:bg-[rgb(var(--ec-content-hover))]'
-            )}
-          >
-            {headerContent}
+          <button type="button" onClick={() => toggleSectionCollapse(groupId, defaultCollapsed)} className={headerClasses}>
+            {header}
           </button>
         ) : (
-          <div className={cn('flex items-center justify-between', isSubtleGroup ? 'px-2 py-1' : 'px-2 py-1.5')}>
-            {headerContent}
-          </div>
+          <div className={headerClasses}>{header}</div>
         )}
         {!isCollapsed && (
-          <div
-            className={cn(
-              'flex flex-col gap-0.5 border-[rgb(var(--ec-content-border))]',
-              isSubtleGroup ? 'border-l ml-4 mt-1' : hasSubtleChildren ? 'mt-1' : 'border-l ml-4 mt-1'
-            )}
-          >
+          <div className={childrenClasses}>
             {visibleChildren.map((childRef, childIndex) => {
               const child = resolveRef(childRef);
               if (!child) return null;
@@ -753,22 +791,13 @@ export default function NestedSideBar() {
               const childKey = typeof childRef === 'string' ? childRef : null;
 
               if (isGroup(child)) {
-                // Skip nested groups with no visible children
                 if (!hasVisibleChildren(child)) return null;
-
-                return (
-                  <div
-                    key={`nested-group-${childKey || childIndex}`}
-                    className={cn(child.subtle ? 'mt-1' : 'ml-3 mt-1.5 pl-3 border-l border-[rgb(var(--ec-content-border))]')}
-                  >
-                    {renderGroup(child, childKey, childIndex)}
-                  </div>
-                );
+                return renderGroup(child, childKey, childIndex, depth + 1);
               }
-              // Inside a subtle subgroup (e.g. a domain's Resources > Services list) the
-              // section header already conveys the resource type, so suppress the default
-              // per-item icon and only keep a custom icon if one is defined.
-              return renderItem(child, childKey, childIndex, isSubtleGroup);
+
+              // Under a nested group the header already conveys the resource type, so the
+              // default per-collection glyph is dropped; custom icons still show.
+              return renderItem(child, childKey, childIndex, isNested);
             })}
           </div>
         )}
@@ -845,7 +874,7 @@ export default function NestedSideBar() {
     );
 
     const baseClasses =
-      'group flex items-center justify-between w-full px-3 py-1.5 border border-transparent cursor-pointer text-left transition-colors hover:bg-[rgb(var(--ec-content-hover))] active:bg-[rgb(var(--ec-content-hover))]';
+      'group flex items-center justify-between w-full px-2 py-1.5 rounded-md cursor-pointer text-left transition-colors hover:bg-[rgb(var(--ec-content-hover))] active:bg-[rgb(var(--ec-content-hover))]';
     const parentClasses = itemHasChildren ? 'font-medium' : '';
     const activeClasses = isActive ? 'bg-[rgb(var(--ec-rail-active-bg))] hover:bg-[rgb(var(--ec-rail-active-bg))]' : '';
 
@@ -857,6 +886,8 @@ export default function NestedSideBar() {
           href={item.href}
           title={item.title}
           target={item.external ? '_blank' : undefined}
+          aria-current={isActive ? 'page' : undefined}
+          data-active={isActive ? 'true' : undefined}
           className={cn(baseClasses, parentClasses, activeClasses)}
         >
           {content}
@@ -870,6 +901,7 @@ export default function NestedSideBar() {
         key={`item-${itemKey || index}`}
         title={item.title}
         onClick={() => handleDrillDown(item, itemKey)}
+        data-active={isActive ? 'true' : undefined}
         className={cn(baseClasses, parentClasses, activeClasses)}
       >
         {content}
@@ -1040,6 +1072,7 @@ export default function NestedSideBar() {
       {/* Navigation Content */}
       <nav
         key={animationKey}
+        ref={navRef}
         className={cn('min-h-0 flex-1 overflow-y-auto overflow-x-hidden p-4 px-2', getAnimationClass())}
         style={{
           scrollbarWidth: 'thin',