@redocly/theme 0.67.0-next.3 → 0.67.0-next.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.67.0-next.3",
+  "version": "0.67.0-next.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.1.8",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.13.0-next.2"
+    "@redocly/realm-asyncapi-sdk": "0.13.0-next.4"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.49.0"
+    "@redocly/config": "0.49.1"
   },
   "scripts": {
     "watch": "tsgo -p tsconfig.build.json && (concurrently \"tsgo -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Breadcrumbs/BreadcrumbDropdown.tsx

@@ -12,6 +12,7 @@ import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 type BreadcrumbDropdownProps = {
   children?: React.ReactNode;
@@ -19,6 +20,7 @@ type BreadcrumbDropdownProps = {
   items: (BreadcrumbItem & { isActive?: boolean })[];
   onItemClick?: (item: BreadcrumbItem, index: number) => void;
   className?: string;
+  withChevron?: boolean;
 };
 
 export function BreadcrumbDropdown({
@@ -27,10 +29,12 @@ export function BreadcrumbDropdown({
   items,
   onItemClick,
   className,
+  withChevron,
 }: BreadcrumbDropdownProps): JSX.Element | null {
   const { useTelemetry, useTranslate } = useThemeHooks();
   const telemetry = useTelemetry();
   const { translate } = useTranslate();
+  const [isOpen, setIsOpen] = React.useState(false);
 
   if (!items || items.length === 0) {
     return null;
@@ -46,7 +50,12 @@ export function BreadcrumbDropdown({
     children
   );
 
-  const trigger = <StyledDropdownTrigger>{triggerContent}</StyledDropdownTrigger>;
+  const trigger = (
+    <StyledDropdownTrigger>
+      {triggerContent}
+      {withChevron && <GenericIcon icon={isOpen ? 'chevron-up' : 'chevron-down'} />}
+    </StyledDropdownTrigger>
+  );
 
   return (
     <BreadcrumbDropdownWrapper
@@ -54,7 +63,12 @@ export function BreadcrumbDropdown({
       className={className}
       data-testid="breadcrumb-dropdown"
     >
-      <Dropdown trigger={trigger} closeOnClick={true}>
+      <Dropdown
+        trigger={trigger}
+        closeOnClick={true}
+        onOpen={() => setIsOpen(true)}
+        onClose={() => setIsOpen(false)}
+      >
         <DropdownMenu>
           {items.map((item, index) => {
             const isActive = Boolean(item?.isActive);
@@ -68,7 +82,7 @@ export function BreadcrumbDropdown({
                   onItemClick?.(item, index);
                   telemetry.sendBreadcrumbClickedMessage([
                     {
-                      object: 'breadcrumb',
+                      ...getBaseDataAttributes('breadcrumbId', 'breadcrumb'),
                       link: item.link,
                       position: index + 1,
                       totalBreadcrumbs: items.length,
@@ -117,7 +131,7 @@ const StyledDropdownTrigger = styled.button`
     background-color: var(--breadcrumbs-background-color-hover);
   }
 
-  &:focus {
+  &:focus-visible {
     box-shadow: var(--breadcrumbs-box-shadow-focus);
     outline: none;
   }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -8,9 +8,8 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 import { BreadcrumbDropdown } from '@redocly/theme/components/Breadcrumbs/BreadcrumbDropdown';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
-import { trimText } from '@redocly/theme/core/utils';
+import { trimText, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
-import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export function Breadcrumbs(props: {
   className?: string;
@@ -65,10 +64,11 @@ export function Breadcrumbs(props: {
         <BreadcrumbDropdown
           label={translatedLabel}
           items={siblingsWithActive}
+          withChevron
           onItemClick={(item, itemIdx) =>
             telemetry.sendBreadcrumbClickedMessage([
               {
-                object: 'breadcrumb',
+                ...getBaseDataAttributes('breadcrumbId', 'breadcrumb'),
                 link: item.link,
                 position: itemIdx + 1,
                 totalBreadcrumbs: siblingsWithActive.length,
@@ -78,7 +78,6 @@ export function Breadcrumbs(props: {
         >
           <BreadcrumbIcon icon={breadcrumb.icon} />
           {trimText(translatedLabel, BREADCRUMB_MAX_LENGTH)}
-          <GenericIcon icon="chevron-down" />
         </BreadcrumbDropdown>
       );
     }
@@ -92,7 +91,7 @@ export function Breadcrumbs(props: {
         onClick={() =>
           telemetry.sendBreadcrumbClickedMessage([
             {
-              object: 'breadcrumb',
+              ...getBaseDataAttributes('breadcrumbId', 'breadcrumb'),
               link: breadcrumb.link,
               position: idx + 1,
               totalBreadcrumbs: breadcrumbs.length,
@@ -120,7 +119,7 @@ export function Breadcrumbs(props: {
                 onItemClick={(item, itemIdx) =>
                   telemetry.sendBreadcrumbClickedMessage([
                     {
-                      object: 'breadcrumb',
+                      ...getBaseDataAttributes('breadcrumbId', 'breadcrumb'),
                       link: item.link,
                       position: itemIdx + 1,
                       totalBreadcrumbs: breadcrumbs.length,

package/src/components/Buttons/AIAssistantButton.tsx

@@ -9,6 +9,7 @@ import { ChatIcon } from '@redocly/theme/icons/ChatIcon/ChatIcon';
 import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
 import { RedoclyIcon } from '@redocly/theme/icons/RedoclyIcon/RedoclyIcon';
 import { SearchSessionProvider } from '@redocly/theme/core/contexts';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 type AIAssistantButtonIconType = 'chat' | 'sparkles' | 'redocly';
 type AIAssistantButtonType = 'button' | 'icon';
@@ -79,9 +80,7 @@ export function AIAssistantButton() {
     setIsOpen(true);
     telemetry.sendSearchAiOpenedMessage([
       {
-        id: 'aiAssistantTriggerButton',
-        object: 'search',
-        uri: 'urn:redocly:realm:ui:search:aiAssistantTriggerButton',
+        ...getBaseDataAttributes('aiAssistantTriggerButton', 'search'),
         method: 'ai_trigger_button',
       },
     ]);

package/src/components/Buttons/EditPageButton.tsx

@@ -6,6 +6,7 @@ import type { JSX } from 'react';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type EditPageButtonProps = {
   to: string;
@@ -24,7 +25,9 @@ export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
         variant="ghost"
         size="small"
         icon={<EditIcon />}
-        onClick={() => telemetry.sendEditPageLinkClickedMessage()}
+        onClick={() =>
+          telemetry.sendPageEditClickedMessage([getBaseDataAttributes('pageEdit', 'button')])
+        }
         data-translation-key="markdown.editPage.text"
       >
         {translate('markdown.editPage.text', 'Edit')}

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -11,7 +11,7 @@ import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIc
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
-import { getPathPrefix } from '@redocly/theme/core/utils';
+import { getPathPrefix, getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type CatalogCardProps = {
   entity: BffCatalogEntity;
@@ -31,7 +31,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
         window.location.assign(
           `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`,
         );
-        telemetry.sendCatalogItemClickedMessage();
+        telemetry.sendCatalogItemClickedMessage([getBaseDataAttributes('catalogItem', 'card')]);
       }}
     >
       <CardContent>

package/src/components/CatalogClassic/CatalogClassicActions.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedFilter } from '@redocly/theme/core/types';
 
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { FilterIcon } from '@redocly/theme/icons/FilterIcon/FilterIcon';
@@ -42,7 +42,9 @@ export function CatalogClassicActions(props: CatalogClassicActionsProps): JSX.El
         iconPosition="left"
         onClick={() => {
           onOpenFilter();
-          telemetry.sendCatalogActionsButtonClickedMessage();
+          telemetry.sendCatalogActionsClickedMessage([
+            getBaseDataAttributes('catalogActions', 'button'),
+          ]);
         }}
         data-translation-key="catalog.filters.title"
       >

package/src/components/CatalogClassic/CatalogClassicCard.tsx

@@ -4,7 +4,12 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { CatalogItem } from '@redocly/theme/core/types';
 
-import { slug, capitalize, getScorecardColorVariable } from '@redocly/theme/core/utils';
+import {
+  slug,
+  capitalize,
+  getScorecardColorVariable,
+  getBaseDataAttributes,
+} from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
@@ -38,7 +43,9 @@ export function CatalogClassicCard({ item }: CatalogClassicCardProps): JSX.Eleme
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard
         data-component-name="CatalogClassic/CatalogClassicCard"
-        onClick={() => telemetry.sendCatalogItemClickedMessage()}
+        onClick={() =>
+          telemetry.sendCatalogItemClickedMessage([getBaseDataAttributes('catalogItem', 'card')])
+        }
       >
         <CardContent>
           <CardTitleWrapper>

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -7,6 +7,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { getScorecardColorVariable } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type CatalogClassicInfoBlockProps = {
   metadata?: {
@@ -53,7 +54,7 @@ function ScorecardBadge(props: {
     <Link to={slug}>
       <Tag
         onClick={() =>
-          telemetry.sendScorecardLinkClickedMessage([{ object: 'link', action: 'click' }])
+          telemetry.sendScorecardLinkClickedMessage([getBaseDataAttributes('scorecardLink', 'tag')])
         }
         withStatusDot
         statusDotColor={`var(${colorVariable})`}

package/src/components/Dropdown/Dropdown.tsx

@@ -30,6 +30,7 @@ export type DropdownProps = PropsWithChildren<{
 
   onClick?: (event: React.UIEvent) => void;
   onClose?: () => void;
+  onOpen?: () => void;
 }>;
 
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
@@ -47,6 +48,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       alignment,
       onClick,
       onClose,
+      onOpen,
     },
     ref,
   ) => {
@@ -55,6 +57,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
 
     const handleOpen = () => {
       setIsOpen(true);
+      onOpen?.();
     };
 
     const handleClose = () => {
@@ -69,7 +72,11 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     const handleToggle = (event: React.UIEvent) => {
       event.stopPropagation();
       event.preventDefault();
-      setIsOpen(!isOpen);
+      if (isOpen) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
     };
 
     const handleKeyDown = (event: React.KeyboardEvent) => {

package/src/components/Feedback/ReportDialog.tsx

@@ -8,6 +8,7 @@ import type { SubmitFeedbackParams } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
 import { Portal } from '@redocly/theme/components/Portal/Portal';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type ReportDialogProps = {
   location: string;
@@ -47,7 +48,9 @@ export function ReportDialog({
               path: pathname,
               lang,
             });
-            telemetry.sendCodeSnippetReportedMessage();
+            telemetry.sendCodeSnippetReportedMessage([
+              getBaseDataAttributes('codeSnippet', 'markdocTag'),
+            ]);
             onSubmit();
           }}
           isDialog={true}

package/src/components/Filter/FilterCheckboxes.tsx

@@ -11,7 +11,7 @@ import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOption
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
-import { changeTextCasing } from '@redocly/theme/core/utils';
+import { changeTextCasing, getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export function FilterCheckboxes({
   filter,
@@ -36,7 +36,9 @@ export function FilterCheckboxes({
               role="link"
               onClick={() => {
                 filter.toggleOption(value);
-                telemetry.sendFilterCheckboxToggledMessage([{ object: 'checkbox', id }]);
+                telemetry.sendFilterCheckboxToggledMessage([
+                  getBaseDataAttributes('filterId', 'checkbox'),
+                ]);
               }}
             >
               <CheckboxIcon

package/src/components/Footer/FooterItem.tsx

@@ -7,7 +7,7 @@ import type { ResolvedNavItem } from '@redocly/config';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export type FooterItemProps = {
@@ -44,7 +44,9 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
           external={item.external}
           target={item.target}
           data-testid={item.label}
-          onClick={() => telemetry.sendFooterItemClickedMessage()}
+          onClick={() =>
+            telemetry.sendFooterItemClickedMessage([getBaseDataAttributes('footerItem', 'footer')])
+          }
           data-translation-key={item.labelTranslationKey}
         >
           {hasIcon ? (

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, generateBeforeAfterContext } from '@redocly/theme/core/utils';
 import { useLanguagePicker, useThemeHooks } from '@redocly/theme/core/hooks';
 import { GlobalOutlinedIcon } from '@redocly/theme/icons/GlobalOutlinedIcon/GlobalOutlinedIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -41,7 +41,14 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
     languageInsensitive: true,
     onAction: () => {
       props.onChangeLanguage(locale.code);
-      telemetry.sendLanguagePickerLocaleChangedMessage([{ object: 'locale', locale: locale.code }]);
+      telemetry.sendLanguagePickerChangedMessage([
+        ...generateBeforeAfterContext<'sendLanguagePickerChangedMessage'>(
+          'languagePicker',
+          'dropdown',
+          { locale: currentLocale.code },
+          { locale: locale.code },
+        ),
+      ]);
     },
     active: locale.code === currentLocale.code,
     suffix: locale.code === currentLocale.code && <CheckmarkIcon />,

package/src/components/Logo/Logo.tsx

@@ -7,6 +7,7 @@ import type { LogoConfig } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Image } from '@redocly/theme/components/Image/Image';
+import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 
 export type LogoProps = {
   config: LogoConfig;
@@ -27,7 +28,12 @@ export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Eleme
   return (
     <LogoWrapper data-component-name="Logo/Logo" className={className} {...otherProps}>
       {config.link ? (
-        <Link to={config.link} onClick={() => telemetry.sendLogoClickedMessage()}>
+        <Link
+          to={config.link}
+          onClick={() =>
+            telemetry.sendLogoClickedMessage([getBaseDataAttributes('logo', 'navbar')])
+          }
+        >
           {image}
         </Link>
       ) : (

package/src/components/Menu/MenuContainer.tsx

@@ -67,6 +67,7 @@ const MenuContainerComponent = styled.div.attrs<{
   animation-timing-function: ease;
   position: relative;
   overflow-y: auto;
+  scrollbar-gutter: stable;
   flex-grow: ${({ $growContent }) => ($growContent ? 1 : 0)};
   padding-top: var(--menu-container-padding-top);
   display: ${({ $hidden }) => ($hidden ? 'none' : 'block')};

package/src/components/Menu/MenuItem.tsx

@@ -11,7 +11,11 @@ import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDow
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
-import { getMenuItemType, getOperationColor } from '@redocly/theme/core/utils';
+import {
+  getBaseDataAttributes,
+  getMenuItemType,
+  getOperationColor,
+} from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 import { Tag, ContentWrapper } from '@redocly/theme/components/Tag/Tag';
@@ -39,7 +43,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const handleOnClick = () => {
     telemetry.sendSidebarItemClickedMessage([
       {
-        object: 'sidebar_item',
+        ...getBaseDataAttributes('sidebarItem', 'sidebar'),
         label: item.label,
         type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
       },
@@ -107,7 +111,13 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
                 {name}
               </SidebarTag>
             ))}
-          <span>{translate(item.labelTranslationKey, item.label)}</span>
+          <MenuItemLabelText
+            $active={item.active}
+            $isSeparator={isSeparator}
+            data-text={translate(item.labelTranslationKey, item.label)}
+          >
+            {translate(item.labelTranslationKey, item.label)}
+          </MenuItemLabelText>
           {item.badges
             ?.filter(({ position }) => position !== 'before')
             .map(({ name, color, icon }) => (
@@ -308,7 +318,6 @@ const MenuItemLabelWrapper = styled.li<{
     css`
       color: ${$deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
-      font-weight: var(--menu-item-font-weight-active);
 
       ${ChevronDownIcon} path {
         fill: var(--menu-item-color-active);
@@ -386,6 +395,28 @@ const MenuItemLabel = styled.span`
   }
 `;
 
+const MenuItemLabelText = styled.span<{ $active?: boolean; $isSeparator?: boolean }>`
+  display: inline-block;
+  max-width: 100%;
+  font-weight: var(--menu-item-font-weight);
+
+  &::before {
+    content: attr(data-text);
+    display: block;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    font-weight: ${({ $isSeparator }) =>
+      $isSeparator ? 'var(--menu-item-font-weight)' : 'var(--menu-item-font-weight-active)'};
+  }
+
+  ${({ $active }) =>
+    $active &&
+    css`
+      font-weight: var(--menu-item-font-weight-active);
+    `}
+`;
+
 const SidebarTag = styled(Tag)<{ $bgColor?: string; icon?: React.ReactNode }>`
   ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`} /* for backward compatibility */
   margin-left: 0;

package/src/components/Navbar/Navbar.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedConfigLinks } from '@redocly/config';
 
-import { breakpoints } from '@redocly/theme/core/utils';
+import { breakpoints, getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { useThemeHooks, useThemeConfig, useMobileMenu } from '@redocly/theme/core/hooks';
 import { NavbarLogo } from '@redocly/theme/components/Navbar/NavbarLogo';
 import { NavbarMenu } from '@redocly/theme/components/Navbar/NavbarMenu';
@@ -60,11 +60,15 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
             isOpen
               ? () => {
                   closeMobileMenu();
-                  telemetry.sendMobileMenuButtonCloseClickedMessage();
+                  telemetry.sendMobileMenuClosedMessage([
+                    getBaseDataAttributes('mobileMenuClose', 'button'),
+                  ]);
                 }
               : () => {
                   openMobileMenu();
-                  telemetry.sendMobileMenuButtonOpenClickedMessage();
+                  telemetry.sendMobileMenuOpenedMessage([
+                    getBaseDataAttributes('mobileMenuOpen', 'button'),
+                  ]);
                 }
           }
           icon={isOpen ? <CloseIcon /> : <MenuIcon />}

package/src/components/Navbar/NavbarItem.tsx

@@ -12,6 +12,7 @@ import {
   getPathnameForLocale,
   withPathPrefix,
   removeTrailingSlash,
+  getBaseDataAttributes,
 } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
@@ -48,7 +49,12 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       $active={isActive}
       className={className}
       onClick={() =>
-        telemetry.sendNavbarMenuItemClickedMessage([{ object: 'menu_item', type: item.type }])
+        telemetry.sendNavbarMenuItemClickedMessage([
+          {
+            ...getBaseDataAttributes('navbarItem', 'navbar'),
+            type: item.type,
+          },
+        ])
       }
       external={item.external}
       target={item.target}

package/src/components/Search/SearchAiMessage.tsx

@@ -10,6 +10,7 @@ import {
   type ContentSegment,
 } from '@redocly/theme/core/types';
 import { TOOL_CALL_DISPLAY_TEXT } from '@redocly/theme/core/constants';
+import { ToolCallName } from '@redocly/theme/core/types';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { AiSearchConversationRole } from '@redocly/theme/core/constants';
@@ -26,14 +27,33 @@ function MarkdownSegment({ text }: { text: string }): JSX.Element {
   const markdown = useMarkdownText(text);
   return <ResponseText as="div" children={markdown} data-testid="response-text" />;
 }
-function getToolCallDisplayText(toolName: string): {
+// The codemode `execute` tool passes a human-readable `description` of what its code
+// does; show that instead of a generic "Executing execute..." label.
+function getExecuteDescription(args: unknown): string | undefined {
+  if (args && typeof args === 'object' && 'description' in args) {
+    const { description } = args as { description?: unknown };
+    if (typeof description === 'string' && description.trim().length > 0) {
+      return description.trim();
+    }
+  }
+  return undefined;
+}
+
+function getToolCallDisplayText(toolCall: ToolCall): {
   inProgressText: string;
   completedText: string;
 } {
+  if (toolCall.name === ToolCallName.Execute) {
+    const description = getExecuteDescription(toolCall.args);
+    if (description) {
+      return { inProgressText: description, completedText: description };
+    }
+  }
+
   return (
-    TOOL_CALL_DISPLAY_TEXT[toolName] ?? {
-      inProgressText: `Executing ${toolName}...`,
-      completedText: `${toolName} executed`,
+    TOOL_CALL_DISPLAY_TEXT[toolCall.name] ?? {
+      inProgressText: `Executing ${toolCall.name}...`,
+      completedText: `${toolCall.name} executed`,
     }
   );
 }
@@ -135,7 +155,7 @@ function SearchAiMessageComponent({
                   const toolCallCompleted = Boolean(segment.toolCall.result);
 
                   const { inProgressText, completedText } = getToolCallDisplayText(
-                    segment.toolCall.name,
+                    segment.toolCall,
                   );
 
                   const toolCallDisplayText = toolCallCompleted ? completedText : inProgressText;