Bug - Select migration display value fixes

frontend/src/components/pages/agents/details/ai-agent-transcripts-tab.tsx

@@ -107,7 +107,7 @@ export const AIAgentTranscriptsTab = () => {
             value={searchQuery}
           />
         </div>
-        <Select onValueChange={setStatusFilter} value={statusFilter}>
+        <Select items={STATUS_FILTER_OPTIONS} onValueChange={setStatusFilter} value={statusFilter}>
           <SelectTrigger className="w-[140px]">
             <SelectValue placeholder="Status" />
           </SelectTrigger>

frontend/src/components/pages/mcp-servers/connect-client-guide/clients/claude-code.tsx

@@ -34,6 +34,36 @@ type ClientClaudeCodeProps = {
   mcpServer: MCPServer;
 };
 
+// Drives the scope Select's items, options, config file, and help text.
+const SCOPE_OPTIONS = [
+  {
+    value: 'local',
+    label: 'Local',
+    configFile: '~/.claude.json',
+    description: 'Configuration stored locally for this project only',
+  },
+  {
+    value: 'user',
+    label: 'User',
+    configFile: '~/.claude.json',
+    description: (
+      <Text as="span">
+        Configuration available across all your projects in <InlineCode>~/.claude.json</InlineCode>
+      </Text>
+    ),
+  },
+  {
+    value: 'project',
+    label: 'Project',
+    configFile: '.mcp.json',
+    description: (
+      <Text as="span">
+        Configuration shared with team using <InlineCode>.mcp.json</InlineCode> file in project
+      </Text>
+    ),
+  },
+] as const;
+
 export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
   const [selectedScope, setSelectedScope] = useState<string>('local');
 
@@ -56,6 +86,8 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
     isServerless: config.isServerless,
   });
 
+  const selectedScopeOption = SCOPE_OPTIONS.find((option) => option.value === selectedScope);
+
   return (
     <div className="space-y-4">
       <div className="flex flex-col gap-4">
@@ -74,32 +106,24 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
               </div>
               <Label className="font-medium text-sm">Scope</Label>
               <div>
-                <Select onValueChange={setSelectedScope} value={selectedScope}>
+                <Select items={SCOPE_OPTIONS} onValueChange={setSelectedScope} value={selectedScope}>
                   <SelectTrigger className="w-[180px]">
                     <SelectValue placeholder="Select scope" />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectGroup>
                       <SelectLabel>Configuration Scope</SelectLabel>
-                      <SelectItem value="local">Local</SelectItem>
-                      <SelectItem value="user">User</SelectItem>
-                      <SelectItem value="project">Project</SelectItem>
+                      {SCOPE_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
                     </SelectGroup>
                   </SelectContent>
                 </Select>
               </div>
               <Text className="text-muted-foreground" variant="small">
-                {selectedScope === 'local' && 'Configuration stored locally for this project only'}
-                {selectedScope === 'project' && (
-                  <Text as="span">
-                    Configuration shared with team using <InlineCode>.mcp.json</InlineCode> file in project
-                  </Text>
-                )}
-                {selectedScope === 'user' && (
-                  <Text as="span">
-                    Configuration available across all your projects in <InlineCode>~/.claude.json</InlineCode>
-                  </Text>
-                )}
+                {selectedScopeOption?.description}
               </Text>
             </div>
           </ListItem>
@@ -112,9 +136,7 @@ export const ClientClaudeCode = ({ mcpServer }: ClientClaudeCodeProps) => {
           <ListItem>
             <div className="flex flex-wrap items-center gap-1">
               <span>Alternatively, you can manually update</span>
-              {selectedScope === 'local' && <InlineCode className="whitespace-nowrap">~/.claude.json</InlineCode>}
-              {selectedScope === 'user' && <InlineCode className="whitespace-nowrap">~/.claude.json</InlineCode>}
-              {selectedScope === 'project' && <InlineCode className="whitespace-nowrap">.mcp.json</InlineCode>}
+              <InlineCode className="whitespace-nowrap">{selectedScopeOption?.configFile}</InlineCode>
               <span>with:</span>
             </div>
             <DynamicCodeBlock code={claudeCodeConfigJson} lang="json" />

frontend/src/components/pages/mcp-servers/connect-client-guide/clients/gemini.tsx

@@ -34,6 +34,20 @@ type ClientGeminiProps = {
   mcpServer: MCPServer;
 };
 
+// Drives the scope Select's items, options, and help text.
+const SCOPE_OPTIONS = [
+  {
+    value: 'user',
+    label: 'User',
+    description: 'Configuration available across all your projects',
+  },
+  {
+    value: 'project',
+    label: 'Project',
+    description: 'Configuration shared with team through project settings',
+  },
+] as const;
+
 export const ClientGemini = ({ mcpServer }: ClientGeminiProps) => {
   const [selectedScope, setSelectedScope] = useState<string>('user');
 
@@ -74,22 +88,24 @@ export const ClientGemini = ({ mcpServer }: ClientGeminiProps) => {
               </div>
               <Label className="font-medium text-sm">Scope</Label>
               <div>
-                <Select onValueChange={setSelectedScope} value={selectedScope}>
+                <Select items={SCOPE_OPTIONS} onValueChange={setSelectedScope} value={selectedScope}>
                   <SelectTrigger className="w-[180px]">
                     <SelectValue placeholder="Select scope" />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectGroup>
                       <SelectLabel>Configuration Scope</SelectLabel>
-                      <SelectItem value="user">User</SelectItem>
-                      <SelectItem value="project">Project</SelectItem>
+                      {SCOPE_OPTIONS.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
                     </SelectGroup>
                   </SelectContent>
                 </Select>
               </div>
               <Text className="text-muted-foreground" variant="small">
-                {selectedScope === 'user' && 'Configuration available across all your projects'}
-                {selectedScope === 'project' && 'Configuration shared with team through project settings'}
+                {SCOPE_OPTIONS.find((option) => option.value === selectedScope)?.description}
               </Text>
             </div>
           </ListItem>

frontend/src/components/pages/mcp-servers/connect-client-guide/install-rpk-list-item.tsx

@@ -65,7 +65,11 @@ export const InstallRpkListItem = () => {
         <div>Install rpk:</div>
         <Label className="font-medium text-sm">Installation Method</Label>
         <div>
-          <Select onValueChange={setSelectedMethod} value={selectedMethod}>
+          <Select
+            items={installMethods.map((method) => ({ value: method.id, label: method.name }))}
+            onValueChange={setSelectedMethod}
+            value={selectedMethod}
+          >
             <SelectTrigger className="w-full max-w-md">
               <SelectValue />
             </SelectTrigger>

frontend/src/components/pages/mcp-servers/connect-client-guide/remote-mcp-connect-client-guide.tsx

@@ -105,7 +105,11 @@ export const RemoteMCPConnectClientGuide = ({ mcpServer }: RemoteMCPConnectClien
     <div className="space-y-2">
       <Label className="font-medium text-sm">Connect to your client</Label>
       <div>
-        <Select onValueChange={(value) => setClient(value as ClientType)} value={client}>
+        <Select
+          items={AVAILABLE_CLIENTS.map((clientId) => ({ value: clientId, label: CLIENT_INFO[clientId].name }))}
+          onValueChange={(value) => setClient(value as ClientType)}
+          value={client}
+        >
           <SelectTrigger className="w-[180px]">
             <SelectValue placeholder="Select a client" />
           </SelectTrigger>

frontend/src/components/pages/observability/observability-toolbar.tsx

@@ -56,7 +56,11 @@ export const ObservabilityToolbar: FC<ObservabilityToolbarProps> = ({
       <div className="flex gap-6">
         <div>
           <div className="mb-1 text-gray-600 text-xs">TIME RANGE</div>
-          <Select onValueChange={(value) => onTimeRangeChange(value as TimeRange)} value={selectedTimeRange}>
+          <Select
+            items={TIME_RANGES}
+            onValueChange={(value) => onTimeRangeChange(value as TimeRange)}
+            value={selectedTimeRange}
+          >
             <SelectTrigger className="h-8 w-[145px] text-sm">
               <SelectValue />
             </SelectTrigger>

frontend/src/components/pages/rp-connect/onboarding/advanced-topic-settings.tsx

@@ -151,7 +151,7 @@ const RetentionInputGroup = memo<RetentionInputGroupProps>(
             render={({ field }) => (
               <FormItem>
                 <FormControl>
-                  <Select disabled={field.disabled} onValueChange={field.onChange} value={field.value}>
+                  <Select disabled={field.disabled} items={units} onValueChange={field.onChange} value={field.value}>
                     <SelectTrigger className="w-32 bg-gray-200" disabled={field.disabled}>
                       <SelectValue />
                     </SelectTrigger>

frontend/src/components/pages/rp-connect/pipeline/pipeline-throughput-card.tsx

@@ -211,7 +211,11 @@ export const PipelineThroughputCard: FC<PipelineThroughputCardProps> = ({ pipeli
       <div className="flex items-center justify-between gap-2">
         <Heading level={3}>Throughput</Heading>
         <div className="flex items-center gap-1">
-          <Select onValueChange={(v) => setSelectedTimeRange(v as TimeRange)} value={selectedTimeRange}>
+          <Select
+            items={TIME_RANGES}
+            onValueChange={(v) => setSelectedTimeRange(v as TimeRange)}
+            value={selectedTimeRange}
+          >
             <SelectTrigger size="sm">
               <SelectValue />
             </SelectTrigger>

frontend/src/components/pages/rp-connect/template-gallery/slot-fields/select-slot.tsx

@@ -35,7 +35,7 @@ export const SelectSlotField = ({ slot, control }: SelectSlotFieldProps) => (
     required={slot.required}
   >
     {(field) => (
-      <Select onValueChange={field.onChange} value={field.value ?? ''}>
+      <Select items={slot.options} onValueChange={field.onChange} value={field.value ?? ''}>
         <SelectTrigger data-testid={`slot-${slot.id}`}>
           <SelectValue placeholder="Select an option..." />
         </SelectTrigger>

frontend/src/components/pages/schemas/schema-create.tsx

@@ -629,6 +629,12 @@ const SchemaEditor = (p: {
           <FieldLabel>Strategy</FieldLabel>
           <Select
             disabled={isAddVersion}
+            items={{
+              TOPIC: 'Topic Name',
+              RECORD_NAME: 'Record Name',
+              TOPIC_RECORD_NAME: 'Topic-Record Name',
+              CUSTOM: 'Custom',
+            }}
             onValueChange={(e) => {
               p.onStateChange((prev) => ({ ...prev, userInput: '', strategy: e as NamingStrategy }));
             }}
@@ -919,6 +925,7 @@ const ReferencesEditor = (p: {
             <Field>
               <FieldLabel>Context</FieldLabel>
               <Select
+                items={p.contextSelectOptions}
                 onValueChange={(contextId) => {
                   p.onStateChange((prev) => ({
                     ...prev,

frontend/src/components/pages/security/acls/create-acl.tsx

@@ -386,6 +386,11 @@ const AclRules = ({
                   <Label className="font-medium text-gray-700 text-sm">Selector</Label>
                   <div className="grid grid-cols-4 gap-3">
                     <Select
+                      items={{
+                        [ResourcePatternTypeAny]: `All ${getPluralResourceName(rule.resourceType)}`,
+                        [ResourcePatternTypeLiteral]: `${getResourceName(rule.resourceType)} names matching`,
+                        [ResourcePatternTypePrefix]: `${getResourceName(rule.resourceType)} names starting with`,
+                      }}
                       onValueChange={(value) =>
                         updateRule(rule.id, {
                           selectorType: value as ResourcePatternType,
@@ -624,6 +629,11 @@ const SharedConfiguration = ({
               <div className="grid grid-cols-4 gap-3">
                 <Select
                   disabled={edit}
+                  items={{
+                    [RoleTypeUser]: 'User',
+                    [RoleTypeGroup]: 'Group',
+                    [RoleTypeRedpandaRole]: 'Redpanda role',
+                  }}
                   onValueChange={(value) => {
                     setPrincipalType(value);
                     // Update the principal to include the new type
@@ -693,6 +703,10 @@ const SharedConfiguration = ({
             <div className="flex gap-3">
               <Select
                 disabled={edit}
+                items={{
+                  [HostTypeAllowAllHosts]: 'Allow all hosts',
+                  [HostTypeSpecificHost]: 'Specific IP addresses',
+                }}
                 onValueChange={(value) => {
                   setHostType(value as HostType);
                   if (value === HostTypeAllowAllHosts) {

frontend/src/components/pages/topics/create-topic-dialog.tsx

@@ -179,6 +179,7 @@ function RetentionTimeSelect(p: {
     <NumInput
       addonAfter={
         <Select
+          items={options}
           onValueChange={(u) => {
             const newUnit = u as RetentionTimeUnit;
             if (newUnit === 'default') {
@@ -248,6 +249,7 @@ function RetentionSizeSelect(p: {
     <NumInput
       addonAfter={
         <Select
+          items={options}
           onValueChange={(u) => {
             const newUnit = u as RetentionSizeUnit;
             if (newUnit === 'default') {

frontend/src/components/pages/transcripts/components/transcript-filter-bar.tsx

@@ -225,7 +225,11 @@ const AttributeFilterPopover: FC<{
           {/* Operator */}
           <div className="flex flex-col gap-1.5">
             <Label htmlFor="attr-operator">Operator</Label>
-            <Select onValueChange={(v) => setOperator(v as AttributeOperator)} value={operator}>
+            <Select
+              items={OPERATOR_OPTIONS}
+              onValueChange={(v) => setOperator(v as AttributeOperator)}
+              value={operator}
+            >
               <SelectTrigger className="h-8" id="attr-operator">
                 <SelectValue />
               </SelectTrigger>
@@ -413,7 +417,7 @@ export const TranscriptFilterBar: FC<TranscriptFilterBarProps> = ({
         )}
 
         {/* Time range selector */}
-        <Select disabled={jumpedTo !== null} onValueChange={onTimeRangeChange} value={timeRange}>
+        <Select disabled={jumpedTo !== null} items={TIME_RANGES} onValueChange={onTimeRangeChange} value={timeRange}>
           <SelectTrigger className="h-8 w-[140px] text-xs">
             <SelectValue placeholder="Time range" />
           </SelectTrigger>

frontend/src/components/ui/ai-agent/llm-config-section.tsx

@@ -201,6 +201,7 @@ export const LLMConfigSection: React.FC<LLMConfigSectionProps> = ({
             render={({ field }) => (
               <Select
                 disabled={isLoadingProviders || (hasAigwDeployed && availableProviders.length === 0)}
+                items={availableProviders.map((provider) => ({ value: provider.id, label: provider.label }))}
                 onValueChange={(value) => {
                   field.onChange(value);
                   handleProviderChange(value);

frontend/src/components/ui/connect/resource-tier-select.tsx

@@ -93,7 +93,11 @@ export const ResourceTierSelect: React.FC<ResourceTierSelectProps> = ({
   onValueChange,
   placeholder = 'Select resource tier',
 }) => (
-  <Select onValueChange={onValueChange} value={value}>
+  <Select
+    items={RESOURCE_TIERS.map((tier) => ({ value: tier.id, label: tier.displayName }))}
+    onValueChange={onValueChange}
+    value={value}
+  >
     <SelectTrigger>
       <SelectValue placeholder={placeholder} />
     </SelectTrigger>

frontend/src/components/ui/secret/secret-selector.tsx

@@ -203,6 +203,10 @@ export const SecretSelector: React.FC<SecretSelectorProps> = ({
 				// Secrets available - show combobox with create button
 				<div className="flex items-center gap-2">
 					<Select
+						items={availableSecrets.map((secret) => ({
+							value: secret.id,
+							label: secret.name,
+						}))}
 						key={`${extractSecretName(value)}-${availableSecrets.length}`}
 						onValueChange={onChange}
 						value={extractSecretName(value)}