MAINT Add registry names to target table

frontend/src/components/Config/TargetTable.styles.ts

@@ -26,6 +26,16 @@ export const useTargetTableStyles = makeStyles({
   activeRow: {
     backgroundColor: tokens.colorBrandBackground2,
   },
+  registryNameCell: {
+    minWidth: 0,
+  },
+  registryNameText: {
+    display: 'block',
+    maxWidth: '100%',
+    whiteSpace: 'normal',
+    overflowWrap: 'anywhere',
+    wordBreak: 'break-word',
+  },
   endpointCell: {
     overflowWrap: 'break-word',
     wordBreak: 'break-all',

frontend/src/components/Config/TargetTable.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, within } from '@testing-library/react'
 import { FluentProvider, webLightTheme } from '@fluentui/react-components'
 import { makeTarget } from '@/test-utils/targetFixtures'
 import TargetTable from './TargetTable'
@@ -79,13 +79,15 @@ describe('TargetTable', () => {
     expect(screen.getAllByText('TextTarget').length).toBeGreaterThanOrEqual(1)
   })
 
-  it('should display Type, Model, Endpoint, Inputs, Outputs, capability columns and Parameters columns', () => {
+  it('should display Registry Name, Type, Model, Endpoint, Inputs, Outputs, capability columns and Parameters columns', () => {
     render(
       <TestWrapper>
         <TargetTable {...defaultProps} />
       </TestWrapper>
     )
 
+    expect(screen.getByText('Registry Name')).toBeInTheDocument()
+    expect(screen.getByText('openai_chat_gpt4')).toBeInTheDocument()
     expect(screen.getByText('Type')).toBeInTheDocument()
     expect(screen.getByText('Model')).toBeInTheDocument()
     expect(screen.getByText('Endpoint')).toBeInTheDocument()
@@ -131,7 +133,9 @@ describe('TargetTable', () => {
       </TestWrapper>
     )
 
-    // Active indicator shows type and model above the table
+    const activeTargetTable = screen.getByRole('table', { name: 'Active target' })
+    expect(within(activeTargetTable).getByText('openai_chat_gpt4')).toBeInTheDocument()
+
     const badges = screen.getAllByText('Active')
     expect(badges.length).toBeGreaterThanOrEqual(2) // one above table + one in row
   })
@@ -385,6 +389,8 @@ describe('TargetTable', () => {
     fireEvent.click(expandButton)
 
     // Inner targets should now be visible
+    expect(screen.getByText('inner_a')).toBeInTheDocument()
+    expect(screen.getByText('inner_b')).toBeInTheDocument()
     expect(screen.getByText('https://a.openai.azure.com')).toBeInTheDocument()
     expect(screen.getByText('https://b.openai.azure.com')).toBeInTheDocument()
   })

frontend/src/components/Config/TargetTable.tsx

@@ -67,6 +67,7 @@ const CAPABILITY_COLUMNS = [
 ] as const
 
 const COLUMN_TOOLTIPS = {
+  registryName: 'Unique name used to identify this configured target',
   type: 'Target class implementation',
   model: 'Configured model name. A dotted underline indicates the deployment alias differs from the underlying model — hover the value to see it.',
   endpoint: 'API endpoint URL the target sends requests to',
@@ -211,6 +212,9 @@ function InnerTargetRows({ parentKey, innerTargets, weights }: {
           <TableCell>
             <Text size={200} style={{ paddingLeft: '28px' }}>#{idx + 1}</Text>
           </TableCell>
+          <TableCell className={styles.registryNameCell}>
+            <Text size={200} className={styles.registryNameText}>{inner.target_registry_name}</Text>
+          </TableCell>
           <TableCell>
             <Text size={200}>{targetType(inner)}</Text>
           </TableCell>
@@ -286,6 +290,9 @@ export default function TargetTable({ targets, activeTarget, onSetActiveTarget }
               <TableCell style={{ width: '120px' }}>
                 <Badge appearance="filled" color="brand" icon={<CheckmarkRegular />}>Active</Badge>
               </TableCell>
+              <TableCell className={styles.registryNameCell} style={{ width: '180px' }}>
+                <Text size={200} className={styles.registryNameText}>{activeTarget.target_registry_name}</Text>
+              </TableCell>
               <TableCell style={{ width: '140px' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                   {hasInnerTargets(activeTarget) && (
@@ -357,6 +364,11 @@ export default function TargetTable({ targets, activeTarget, onSetActiveTarget }
         <TableHeader className={styles.stickyHeader}>
           <TableRow>
             <TableHeaderCell style={{ width: '120px' }} />
+            <TableHeaderCell style={{ width: '180px' }}>
+              <Tooltip content={COLUMN_TOOLTIPS.registryName} relationship="description">
+                <span className={styles.helpHeader}>Registry Name</span>
+              </Tooltip>
+            </TableHeaderCell>
             <TableHeaderCell style={{ width: '140px' }}>
               <Tooltip content={COLUMN_TOOLTIPS.type} relationship="description">
                 <span className={styles.helpHeader}>Type</span>
@@ -425,6 +437,9 @@ export default function TargetTable({ targets, activeTarget, onSetActiveTarget }
                       </Button>
                     )}
                   </TableCell>
+                  <TableCell className={styles.registryNameCell}>
+                    <Text size={200} className={styles.registryNameText}>{target.target_registry_name}</Text>
+                  </TableCell>
                   <TableCell>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                       {/* Chevron in the Type column keeps the action column aligned */}