move mcp servers and agent runtimes to dedicated ai settings (#3051)

Author: jsladerman

assets/src/components/ai/AI.tsx

@@ -10,26 +10,28 @@ import { FeatureFlagContext } from 'components/flows/FeatureFlagContext'
 import usePersistedState from 'components/hooks/usePersistedState'
 import { StretchedFlex } from 'components/utils/StretchedFlex'
 import { SubTabs } from 'components/utils/SubTabs'
-import { use, useMemo } from 'react'
+import { isNil } from 'lodash'
+import { use, useLayoutEffect, useMemo } from 'react'
 import { Link, Outlet, useMatch } from 'react-router-dom'
 import {
   AI_ABS_PATH,
   AI_AGENT_RUNS_REL_PATH,
-  AI_AGENT_RUNTIMES_REL_PATH,
   AI_AGENT_SESSIONS_REL_PATH,
   AI_INFRA_RESEARCH_REL_PATH,
-  AI_MCP_SERVERS_REL_PATH,
   AI_SENTINELS_REL_PATH,
   AI_THREADS_REL_PATH,
 } from 'routes/aiRoutesConsts'
-import { GLOBAL_SETTINGS_ABS_PATH } from 'routes/settingsRoutesConst'
+import {
+  AI_SETTINGS_ABS_PATH,
+  AI_SETTINGS_AI_PROVIDER_ABS_PATH,
+} from 'routes/settingsRoutesConst'
 import styled from 'styled-components'
 import {
   useAIEnabled,
   useLoadingDeploymentSettings,
 } from '../contexts/DeploymentSettingsContext'
 import LoadingIndicator from '../utils/LoadingIndicator'
-import { AI_PROVIDER_ABS_PATH, AIDisabledState } from './AIThreads'
+import { AIDisabledState } from './AIThreads'
 
 const DISMISSED_AI_ENABLED_DIALOG_KEY = 'dismissedAIEnabledDialog'
 
@@ -38,12 +40,8 @@ const getDirectory = (agentEnabled: boolean) => [
   { label: 'Sentinels', path: AI_SENTINELS_REL_PATH },
   { label: 'Chat threads', path: AI_THREADS_REL_PATH },
   { label: 'Infra research', path: AI_INFRA_RESEARCH_REL_PATH },
-  { label: 'MCP servers', path: AI_MCP_SERVERS_REL_PATH },
   ...(agentEnabled
-    ? [
-        { label: 'Agent runtimes', path: AI_AGENT_RUNTIMES_REL_PATH },
-        { label: 'Agent runs', path: AI_AGENT_RUNS_REL_PATH },
-      ]
+    ? [{ label: 'Agent runs', path: AI_AGENT_RUNS_REL_PATH }]
     : []),
 ]
 
@@ -57,12 +55,16 @@ export function AI() {
   const aiEnabled = useAIEnabled()
   const [showEnableAIDialog, setShowEnableAIDialog] = usePersistedState(
     DISMISSED_AI_ENABLED_DIALOG_KEY,
-    !aiEnabled
+    false
   )
   const loading = useLoadingDeploymentSettings()
   const agentEnabled = !!use(FeatureFlagContext).featureFlags.Agent
   useSetBreadcrumbs(useMemo(() => getAIBreadcrumbs(tab), [tab]))
 
+  useLayoutEffect(() => {
+    if (!isNil(aiEnabled)) setShowEnableAIDialog(!aiEnabled)
+  }, [aiEnabled, setShowEnableAIDialog])
+
   if (loading) return <LoadingIndicator />
 
   return (
@@ -74,7 +76,7 @@ export function AI() {
             clickable
             icon={<GearTrainIcon />}
             as={Link}
-            to={`${GLOBAL_SETTINGS_ABS_PATH}/ai-provider`}
+            to={AI_SETTINGS_ABS_PATH}
             tooltip="AI Settings"
             type="floating"
           />
@@ -95,7 +97,7 @@ export function AI() {
             </Button>
             <Button
               as={Link}
-              to={AI_PROVIDER_ABS_PATH}
+              to={AI_SETTINGS_AI_PROVIDER_ABS_PATH}
             >
               Go to settings
             </Button>

assets/src/components/ai/AIThreads.tsx

@@ -12,7 +12,7 @@ import {
 } from 'generated/graphql.ts'
 import { ReactNode, useMemo } from 'react'
 import { Link } from 'react-router-dom'
-import { GLOBAL_SETTINGS_ABS_PATH } from '../../routes/settingsRoutesConst.tsx'
+import { AI_SETTINGS_AI_PROVIDER_ABS_PATH } from '../../routes/settingsRoutesConst.tsx'
 
 import { createColumnHelper } from '@tanstack/react-table'
 import { GqlError } from 'components/utils/Alert.tsx'
@@ -22,8 +22,6 @@ import { mapExistingNodes } from 'utils/graphql.ts'
 import { Body1BoldP } from '../utils/typography/Text.tsx'
 import { AITableEntry, sortThreadsOrPins } from './AITableEntry.tsx'
 
-export const AI_PROVIDER_ABS_PATH = `${GLOBAL_SETTINGS_ABS_PATH}/ai-provider`
-
 const columnHelper = createColumnHelper<ChatThreadTinyFragment>()
 
 export function AIThreads() {
@@ -140,7 +138,7 @@ export function AIDisabledState({
         <Button
           as={Link}
           startIcon={<GearTrainIcon />}
-          to={AI_PROVIDER_ABS_PATH}
+          to={AI_SETTINGS_AI_PROVIDER_ABS_PATH}
         >
           Go to settings
         </Button>

assets/src/components/ai/agent-runs/AIAgentRuns.tsx

@@ -16,7 +16,7 @@ import { mapExistingNodes } from 'utils/graphql'
 import { isNonNullable } from 'utils/isNonNullable'
 import { AIAgentRuntimesSelector } from './AIAgentRuntimesSelector'
 import { CreateAgentRunButton } from './CreateAgentRun'
-import { AgentRuntimeIconFrame } from '../agent-runtimes/AiAgentRuntimeIcon.tsx'
+import { AgentRuntimeIconFrame } from 'components/settings/ai/agent-runtimes/AIAgentRuntimeIcon'
 
 export function AIAgentRuns() {
   const navigate = useNavigate()

assets/src/components/flows/flow/ChangeMcpConnectionsModal.tsx

@@ -4,7 +4,7 @@ import {
   ColConfirm,
   ColInfo,
   McpTableAction,
-} from 'components/ai/mcp/McpServerTableCols'
+} from 'components/settings/ai/mcp/McpServerTableCols'
 import { GqlError, GqlErrorType } from 'components/utils/Alert'
 import { Body2BoldP } from 'components/utils/typography/Text'
 import { McpServerFragment } from 'generated/graphql'

assets/src/components/flows/flow/FlowMcpConnections.tsx

@@ -11,7 +11,7 @@ import {
   ColConfirm,
   ColInfo,
   McpTableAction,
-} from 'components/ai/mcp/McpServerTableCols'
+} from 'components/settings/ai/mcp/McpServerTableCols'
 import { useSetPageHeaderContent } from 'components/cd/ContinuousDeployment'
 import { GqlError } from 'components/utils/Alert'
 import {

assets/src/components/security/vulnerabilities/VulnDetailExpanded.tsx

@@ -128,7 +128,7 @@ function CVSSSection({
                   { name: 'Network', value: VulnAttackVector.Network },
                 ]}
                 colorMap={{
-                  PHYSICAL: 'success',
+                  PHYSICAL: 'neutral',
                   LOCAL: 'warning',
                   ADJACENT: 'danger',
                   NETWORK: 'critical',

assets/src/components/settings/Settings.tsx

@@ -19,6 +19,7 @@ import { PersonaConfigurationFragment } from 'generated/graphql'
 import { ReactNode, useMemo, useState } from 'react'
 import { Link, Outlet, useLocation } from 'react-router-dom'
 import {
+  AI_SETTINGS_REL_PATH,
   AUDITS_REL_PATH,
   GLOBAL_SETTINGS_REL_PATH,
   NOTIFICATIONS_REL_PATH,
@@ -33,6 +34,7 @@ const getDirectory = (
 ): Directory => [
   { path: USER_MANAGEMENT_REL_PATH, label: 'User management' },
   { path: GLOBAL_SETTINGS_REL_PATH, label: 'Global settings' },
+  { path: AI_SETTINGS_REL_PATH, label: 'AI settings' },
   { path: PROJECT_SETTINGS_REL_PATH, label: 'Project settings' },
   { path: NOTIFICATIONS_REL_PATH, label: 'Notifications' },
   {

assets/src/components/settings/ai/AISettings.tsx

@@ -0,0 +1,60 @@
+import { Outlet, useMatch } from 'react-router-dom'
+
+import { useMemo, useRef } from 'react'
+
+import {
+  AI_SETTINGS_ABS_PATH,
+  AI_SETTINGS_AI_PROVIDER_REL_PATH,
+} from 'routes/settingsRoutesConst'
+
+import { SubTab, TabList, useSetBreadcrumbs } from '@pluralsh/design-system'
+import { useSetPageHeaderContent } from 'components/cd/ContinuousDeployment'
+import { LinkTabWrap } from 'components/utils/Tabs'
+
+import { SETTINGS_BREADCRUMBS } from '../Settings'
+
+export const getAISettingsBreadcrumbs = (tab: string) => [
+  ...SETTINGS_BREADCRUMBS,
+  { label: 'ai', url: AI_SETTINGS_ABS_PATH },
+  { label: tab, url: getAISettingsAbsPath(tab) },
+]
+
+const directory = [
+  { path: AI_SETTINGS_AI_PROVIDER_REL_PATH, label: 'AI providers' },
+  { path: 'agent-runtimes', label: 'Agent runtimes' },
+  { path: 'mcp-servers', label: 'MCP servers' },
+]
+
+export function AISettings() {
+  const tabStateRef = useRef<any>(null)
+  const tab = useMatch(`${AI_SETTINGS_ABS_PATH}/:tab`)?.params.tab ?? ''
+
+  useSetBreadcrumbs(useMemo(() => getAISettingsBreadcrumbs(tab ?? ''), [tab]))
+  useSetPageHeaderContent(
+    <TabList
+      scrollable
+      stateRef={tabStateRef}
+      stateProps={{ selectedKey: tab }}
+    >
+      {directory.map(({ label, path }) => (
+        <LinkTabWrap
+          subTab
+          key={path}
+          textValue={label}
+          to={getAISettingsAbsPath(path)}
+        >
+          <SubTab
+            key={path}
+            textValue={label}
+          >
+            {label}
+          </SubTab>
+        </LinkTabWrap>
+      ))}
+    </TabList>
+  )
+
+  return <Outlet />
+}
+
+const getAISettingsAbsPath = (tab: string) => `${AI_SETTINGS_ABS_PATH}/${tab}`

…ings/global/GlobalSettingsAiProvider.tsx …nents/settings/ai/AISettingsProvider.tsxassets/src/components/settings/global/GlobalSettingsAiProvider.tsx renamed to assets/src/components/settings/ai/AISettingsProvider.tsx assets/src/components/settings/global/GlobalSettingsAiProvider.tsx renamed to assets/src/components/settings/ai/AISettingsProvider.tsx

@@ -33,18 +33,18 @@ import { PartialDeep } from 'type-fest'
 import {
   AIVerbosityLevel,
   useExplainWithAIContext,
-} from '../../ai/AIContext.tsx'
-import { GqlError } from '../../utils/Alert.tsx'
+} from 'components/ai/AIContext.tsx'
+import { GqlError } from 'components/utils/Alert.tsx'
 import {
+  initialSettingsAttributes,
+  OpenAISettings,
   AnthropicSettings,
+  OllamaSettings,
   AzureSettings,
   BedrockSettings,
-  initialSettingsAttributes,
-  OllamaSettings,
-  OpenAISettings,
-  validateAttributes,
   VertexSettings,
-} from './GlobalSettingsAIProviders.tsx'
+  validateAttributes,
+} from './AISettingsProviders.tsx'
 
 const updateSettings = produce(
   (
@@ -57,7 +57,7 @@ const updateSettings = produce(
   }
 )
 
-export function GlobalSettingsAiProvider() {
+export function AISettingsProvider() {
   const theme = useTheme()
   const { ai } = useDeploymentSettings()
   const [enabled, setEnabled] = useState<boolean>(ai?.enabled ?? false)