Feat/1178

app/platform/[tenantKey]/[mentorId]/_components/nav-bar/index.tsx

@@ -122,6 +122,7 @@ export const NEW_CHAT_NAV_ITEM = {
 export const ANALYTICS_NAV_ITEM: MentorSegment = {
   value: 'analytics',
   label: 'Analytics',
+  labelKey: 'analytics',
   icon: LineChart,
   userTypes: [UserType.FREE_TRIAL, UserType.ADMIN],
   rbacResource: (mentorDbId) => `/mentors/${mentorDbId}/#view_analytics`,
@@ -135,6 +136,9 @@ export const ANALYTICS_NAV_ITEM: MentorSegment = {
 
 export function NavBar() {
   const t = useTranslations('navBarIndex');
+  // Segment labels + category titles live in the shared `header` namespace
+  // (same keys header.tsx uses) so both nav surfaces stay in sync.
+  const tHeader = useTranslations('header');
   const [openModal, setOpenModal] = React.useState(false);
   const dispatch = useAppDispatch();
   const selectedAnalyticsMentor = useAppSelector(selectSelectedMentor);
@@ -350,11 +354,11 @@ export function NavBar() {
       .filter((s) => s.navCategory)
       .map((s) => ({
         value: s.value,
-        label: s.label,
+        label: tHeader(s.labelKey),
         icon: s.icon,
         category: s.navCategory,
       }));
-  }, [filteredSegments]);
+  }, [filteredSegments, tHeader]);
 
   const showForkButton =
     !userIsStudent &&
@@ -585,7 +589,10 @@ export function NavBar() {
                   >
                     <CategorizedDropdownMenu
                       categories={
-                        MENTOR_SEGMENT_NAV_CATEGORIES as ReadonlyArray<CategoryConfig>
+                        MENTOR_SEGMENT_NAV_CATEGORIES.map((c) => ({
+                          key: c.key,
+                          title: tHeader(c.titleKey),
+                        })) as ReadonlyArray<CategoryConfig>
                       }
                       items={categorizedDropdownItems}
                       onItemSelect={handleSegmentClick}

components/modals/edit-mentor-modal/__tests__/index.test.tsx

@@ -239,6 +239,7 @@ vi.mock('../tabs', () => ({
   FlowTab: () => <div data-testid="flow-tab">Flow Tab</div>,
   HistoryTab: () => <div data-testid="history-tab">History Tab</div>,
   DatasetsTab: () => <div data-testid="datasets-tab">Datasets Tab</div>,
+  EvaluationTab: () => <div data-testid="evaluation-tab">Evaluation Tab</div>,
   ApiTab: () => <div data-testid="api-tab">API Tab</div>,
   EmbedTab: () => <div data-testid="embed-tab">Embed Tab</div>,
   AccessTab: () => <div data-testid="access-tab">Access Tab</div>,
@@ -499,6 +500,7 @@ describe('EditMentorModal', () => {
     return {
       value,
       label: value,
+      labelKey: value,
       icon: SettingsIcon,
       userTypes: [UserType.ADMIN, UserType.FREE_TRIAL],
       permissionFieldsCheck: [],
@@ -692,7 +694,6 @@ describe('EditMentorModal', () => {
         }),
         makeSegment(MODALS.EDIT_MENTOR.tabs.llm, {
           navCategory: 'configurations',
-          label: 'LLM Segment',
         }),
       ];
 
@@ -703,8 +704,10 @@ describe('EditMentorModal', () => {
         </Provider>,
       );
 
+      // Labels render translated from the `header` namespace, so the llm
+      // segment shows as "LLM" regardless of the fixture's raw label.
       const llmTriggers = await screen.findAllByRole('tab', {
-        name: 'LLM Segment',
+        name: 'LLM',
       });
       await user.click(llmTriggers[0]);
 
@@ -780,9 +783,10 @@ describe('EditMentorModal', () => {
       // the rendered segment list: Settings (the only configurations
       // segment) must be present.
       await waitFor(() => {
+        // Rendered via the `header` translation namespace — "Settings", not
+        // the raw segment value.
         expect(
-          screen.getAllByRole('tab', { name: MODALS.EDIT_MENTOR.tabs.settings })
-            .length,
+          screen.getAllByRole('tab', { name: 'Settings' }).length,
         ).toBeGreaterThan(0);
       });
     });

components/modals/edit-mentor-modal/edit-mentor-modal.test.tsx

@@ -193,6 +193,7 @@ vi.mock('./tabs', () => ({
   TasksTab: () => <div data-testid="tasks-tab">Tasks Tab</div>,
   HistoryTab: () => <div data-testid="history-tab">History Tab</div>,
   DatasetsTab: () => <div data-testid="datasets-tab">Datasets Tab</div>,
+  EvaluationTab: () => <div data-testid="evaluation-tab">Evaluation Tab</div>,
   ApiTab: () => <div data-testid="api-tab">API Tab</div>,
   EmbedTab: () => <div data-testid="embed-tab">Embed Tab</div>,
   AccessTab: () => <div data-testid="access-tab">Access Tab</div>,

components/modals/edit-mentor-modal/index.tsx

@@ -24,6 +24,7 @@ import {
   // FlowTab,
   HistoryTab,
   DatasetsTab,
+  EvaluationTab,
   ApiTab,
   EmbedTab,
   AccessTab,
@@ -79,6 +80,7 @@ export const EDIT_MENTOR_TAB_COMPONENTS: Record<string, ReactNode> = {
   [MODALS.EDIT_MENTOR.tabs.history]: <HistoryTab />,
   [MODALS.EDIT_MENTOR.tabs.audit_log]: <AuditLogTab />,
   [MODALS.EDIT_MENTOR.tabs.datasets]: <DatasetsTab />,
+  [MODALS.EDIT_MENTOR.tabs.evaluation]: <EvaluationTab />,
   [MODALS.EDIT_MENTOR.tabs.api]: <ApiTab />,
   [MODALS.EDIT_MENTOR.tabs.embed]: <EmbedTab />,
   [MODALS.EDIT_MENTOR.tabs.voice]: <VoiceTab />,
@@ -89,6 +91,9 @@ export const EDIT_MENTOR_TAB_COMPONENTS: Record<string, ReactNode> = {
 
 export function EditMentorModal({ isOpen, onClose }: Props) {
   const t = useTranslations('editMentorModalIndex');
+  // Segment labels + category titles live in the shared `header` namespace
+  // (same keys header.tsx uses) so both nav surfaces stay in sync.
+  const tHeader = useTranslations('header');
   const { changeModalTab, getEditMentorTab } = useNavigate();
   const {
     filteredSegments,
@@ -386,7 +391,7 @@ export function EditMentorModal({ isOpen, onClose }: Props) {
                                   : 'text-gray-600 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-700/50',
                               )}
                             >
-                              {category.title}
+                              {tHeader(category.titleKey)}
                             </button>
                           );
                         })}
@@ -409,7 +414,9 @@ export function EditMentorModal({ isOpen, onClose }: Props) {
                             className="mr-3 h-4 w-4 flex-shrink-0"
                             aria-hidden="true"
                           />
-                          <span className="truncate">{tab.label}</span>
+                          <span className="truncate">
+                            {tHeader(tab.labelKey)}
+                          </span>
                         </TabsTrigger>
                       ))}
                     </TabsList>
@@ -452,7 +459,7 @@ export function EditMentorModal({ isOpen, onClose }: Props) {
                                 : 'text-gray-600 hover:bg-gray-50',
                             )}
                           >
-                            {category.title}
+                            {tHeader(category.titleKey)}
                           </button>
                         );
                       })}
@@ -476,7 +483,7 @@ export function EditMentorModal({ isOpen, onClose }: Props) {
                           className="h-3 w-3 sm:h-4 sm:w-4"
                           aria-hidden="true"
                         />
-                        <span>{tab.label}</span>
+                        <span>{tHeader(tab.labelKey)}</span>
                       </TabsTrigger>
                     ))}
                   </TabsList>