FEAT: Allow creation and display of RoundRobinTarget in GUI (#1944)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: jsong468

frontend/src/components/Chat/TargetBadge.styles.ts

@@ -80,4 +80,13 @@ export const useTargetBadgeStyles = makeStyles({
     overflowX: 'auto',
     boxSizing: 'border-box',
   },
+  /** A single inner target entry in the tooltip's Inner Targets section. */
+  innerTargetItem: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+    padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXS}`,
+    backgroundColor: tokens.colorNeutralBackground2,
+    borderRadius: tokens.borderRadiusSmall,
+  },
 })

frontend/src/components/Chat/TargetBadge.test.tsx

@@ -73,4 +73,45 @@ describe('TargetBadge', () => {
     ).not.toThrow()
     expect(screen.getByTestId('target-badge')).toHaveTextContent('TextTarget')
   })
+
+  it('shows count in display name for RoundRobinTarget with inner targets', () => {
+    const rrTarget: TargetInstance = {
+      target_registry_name: 'rr_test',
+      target_type: 'RoundRobinTarget',
+      model_name: 'gpt-4o',
+      inner_targets: [
+        { target_registry_name: 'a', target_type: 'OpenAIChatTarget', model_name: 'gpt-4o' },
+        { target_registry_name: 'b', target_type: 'OpenAIChatTarget', model_name: 'gpt-4o' },
+        { target_registry_name: 'c', target_type: 'OpenAIChatTarget', model_name: 'gpt-4o' },
+      ],
+    }
+    render(
+      <TestWrapper>
+        <TargetBadge target={rrTarget} />
+      </TestWrapper>
+    )
+    const badge = screen.getByTestId('target-badge')
+    expect(badge).toHaveTextContent('RoundRobinTarget (gpt-4o ×3)')
+  })
+
+  it('prefers underlying_model_name over model_name for RoundRobinTarget badge', () => {
+    const rrTarget: TargetInstance = {
+      target_registry_name: 'rr_mixed',
+      target_type: 'RoundRobinTarget',
+      model_name: 'gpt-4o-japan-nilfilter',
+      underlying_model_name: 'gpt-4o',
+      inner_targets: [
+        { target_registry_name: 'a', target_type: 'OpenAIChatTarget', model_name: 'deploy-1' },
+        { target_registry_name: 'b', target_type: 'OpenAIChatTarget', model_name: 'deploy-2' },
+      ],
+    }
+    render(
+      <TestWrapper>
+        <TargetBadge target={rrTarget} />
+      </TestWrapper>
+    )
+    const badge = screen.getByTestId('target-badge')
+    // Should show the underlying model, not the deployment name
+    expect(badge).toHaveTextContent('RoundRobinTarget (gpt-4o ×2)')
+  })
 })

frontend/src/components/Chat/TargetBadge.tsx

@@ -33,9 +33,23 @@ function formatParams(params?: Record<string, unknown> | null): string {
 
 export default function TargetBadge({ target }: TargetBadgeProps) {
   const styles = useTargetBadgeStyles()
-  const displayName = target.model_name
-    ? `${target.target_type} (${target.model_name})`
-    : target.target_type
+  const innerTargets = target.inner_targets ?? []
+  const isRoundRobin = innerTargets.length > 0
+
+  // For RoundRobinTarget, prefer underlying_model_name because inner targets share
+  // the same underlying model but may have different deployment names (model_name).
+  // For regular targets, use model_name as before.
+  const badgeModel = isRoundRobin
+    ? (target.underlying_model_name ?? target.model_name)
+    : target.model_name
+  const displayName = isRoundRobin
+    ? badgeModel
+      ? `${target.target_type} (${badgeModel} ×${innerTargets.length})`
+      : `${target.target_type} (×${innerTargets.length})`
+    : target.model_name
+      ? `${target.target_type} (${target.model_name})`
+      : target.target_type
+
   const showUnderlying =
     target.underlying_model_name &&
     target.model_name &&
@@ -47,6 +61,9 @@ export default function TargetBadge({ target }: TargetBadgeProps) {
   const outputModalities = target.capabilities?.supported_output_modalities ?? []
   const params = formatParams(target.target_specific_params)
 
+  // Extract weights from params so we can show them next to each inner target
+  const weights = target.target_specific_params?.weights as number[] | undefined
+
   const tooltipContent = (
     <div className={styles.tooltipBody}>
       <div className={styles.tooltipHeader}>
@@ -91,6 +108,28 @@ export default function TargetBadge({ target }: TargetBadgeProps) {
           </div>
         </div>
       )}
+      {/* Inner targets section — only shown for composite targets like RoundRobinTarget */}
+      {isRoundRobin && (
+        <div className={styles.tooltipSection}>
+          <span className={styles.sectionLabel}>Inner Targets ({innerTargets.length})</span>
+          {innerTargets.map((inner, idx) => (
+            <div key={inner.target_registry_name} className={styles.innerTargetItem}>
+              <Text size={200} weight="semibold">
+                #{idx + 1}{weights?.[idx] != null ? ` (weight: ${weights[idx]})` : ''}
+              </Text>
+              <Text size={200}>
+                {inner.target_type}
+                {inner.model_name ? ` — ${inner.model_name}` : ''}
+              </Text>
+              {inner.endpoint && (
+                <Text className={styles.endpointText} size={200}>
+                  {inner.endpoint}
+                </Text>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
       {params && (
         <div className={styles.tooltipSection}>
           <span className={styles.sectionLabel}>Parameters</span>

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

@@ -14,4 +14,19 @@ export const useCreateTargetDialogStyles = makeStyles({
     overflowWrap: 'anywhere',
     wordBreak: 'break-word',
   },
+  /** Container for the list of selected inner targets in the RoundRobin form. */
+  selectedTargetsList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXS,
+  },
+  /** A single row in the selected targets list: target name + weight + remove button. */
+  selectedTargetRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: tokens.spacingHorizontalS,
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS}`,
+    backgroundColor: tokens.colorNeutralBackground2,
+    borderRadius: tokens.borderRadiusSmall,
+  },
 })