refactor: extract shared types/constants and simplify Card styles

- Move AgentConfigurationState type and defaultConfiguration to shared.tsx
- Extract cardStyles constant to reduce duplication in ToolsAndMCPSettings
- Remove redundant Card body description (tooltip already shows mode info)

Author: kangfenmao

src/renderer/src/pages/settings/AgentSettings/PermissionModeSettings.tsx

@@ -1,21 +1,27 @@
 import { permissionModeCards } from '@renderer/config/agent'
 import type {
-  AgentConfiguration,
   GetAgentResponse,
   GetAgentSessionResponse,
   PermissionMode,
   UpdateAgentBaseForm,
   UpdateAgentFunction,
   UpdateAgentSessionFunction
 } from '@renderer/types'
-import { AgentConfigurationSchema } from '@renderer/types'
 import { Tag } from 'antd'
 import { CheckCircle, ShieldAlert } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { computeModeDefaults, SettingsContainer, SettingsItem, SettingsTitle, uniq } from './shared'
+import {
+  type AgentConfigurationState,
+  computeModeDefaults,
+  defaultConfiguration,
+  SettingsContainer,
+  SettingsItem,
+  SettingsTitle,
+  uniq
+} from './shared'
 
 type PermissionModeSettingsProps =
   | {
@@ -27,18 +33,11 @@ type PermissionModeSettingsProps =
       update: UpdateAgentSessionFunction
     }
 
-type AgentConfigurationState = AgentConfiguration & Record<string, unknown>
-
-const defaultConfiguration: AgentConfigurationState = AgentConfigurationSchema.parse({})
-
 export const PermissionModeSettings: FC<PermissionModeSettingsProps> = ({ agentBase, update }) => {
   const { t } = useTranslation()
   const [isUpdatingMode, setIsUpdatingMode] = useState(false)
 
-  const configuration: AgentConfigurationState = useMemo(
-    () => agentBase?.configuration ?? defaultConfiguration,
-    [agentBase?.configuration]
-  )
+  const configuration = useMemo(() => agentBase?.configuration ?? defaultConfiguration, [agentBase?.configuration])
   const selectedMode = useMemo(
     () => agentBase?.configuration?.permission_mode ?? defaultConfiguration.permission_mode,
     [agentBase?.configuration?.permission_mode]

src/renderer/src/pages/settings/AgentSettings/ToolsAndMCPSettings.tsx

@@ -2,21 +2,27 @@ import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
 import { permissionModeCards } from '@renderer/config/agent'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type {
-  AgentConfiguration,
   GetAgentResponse,
   GetAgentSessionResponse,
   UpdateAgentBaseForm,
   UpdateAgentFunction,
   UpdateAgentSessionFunction
 } from '@renderer/types'
-import { AgentConfigurationSchema } from '@renderer/types'
+import type { CardProps } from 'antd'
 import { Card, Switch, Tag, Tooltip } from 'antd'
 import { Wrench } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { computeModeDefaults, SettingsContainer, SettingsItem, SettingsTitle, uniq } from './shared'
+import {
+  computeModeDefaults,
+  defaultConfiguration,
+  SettingsContainer,
+  SettingsItem,
+  SettingsTitle,
+  uniq
+} from './shared'
 
 type ToolsAndMCPSettingsProps =
   | {
@@ -28,9 +34,19 @@ type ToolsAndMCPSettingsProps =
       update: UpdateAgentSessionFunction
     }
 
-type AgentConfigurationState = AgentConfiguration & Record<string, unknown>
-
-const defaultConfiguration: AgentConfigurationState = AgentConfigurationSchema.parse({})
+const cardStyles: CardProps['styles'] = {
+  header: {
+    paddingLeft: '12px',
+    paddingRight: '12px',
+    borderBottom: 'none'
+  },
+  body: {
+    paddingLeft: '12px',
+    paddingRight: '12px',
+    paddingTop: '0px',
+    paddingBottom: '0px'
+  }
+}
 
 export const ToolsAndMCPSettings: FC<ToolsAndMCPSettingsProps> = ({ agentBase, update }) => {
   const { t } = useTranslation()
@@ -195,30 +211,8 @@ export const ToolsAndMCPSettings: FC<ToolsAndMCPSettingsProps> = ({ agentBase, u
                       </Tooltip>
                     </div>
                   }
-                  styles={{
-                    header: {
-                      paddingLeft: '12px',
-                      paddingRight: '12px',
-                      borderBottom: 'none'
-                    },
-                    body: {
-                      paddingLeft: '12px',
-                      paddingRight: '12px',
-                      paddingTop: '0px',
-                      paddingBottom: '0px'
-                    }
-                  }}>
-                  {isAuto ? (
-                    <div className="py-0 pb-3">
-                      <span className="text-foreground-400 text-xs">
-                        {t(
-                          'agent.settings.tooling.preapproved.autoDescription',
-                          'This tool is auto-approved by the current permission mode.'
-                        )}
-                      </span>
-                    </div>
-                  ) : null}
-                </Card>
+                  styles={cardStyles}
+                />
               )
             })
           )}
@@ -281,19 +275,7 @@ export const ToolsAndMCPSettings: FC<ToolsAndMCPSettingsProps> = ({ agentBase, u
                         </Tooltip>
                       </div>
                     }
-                    styles={{
-                      header: {
-                        paddingLeft: '12px',
-                        paddingRight: '12px',
-                        borderBottom: 'none'
-                      },
-                      body: {
-                        paddingLeft: '12px',
-                        paddingRight: '12px',
-                        paddingTop: '0px',
-                        paddingBottom: '0px'
-                      }
-                    }}
+                    styles={cardStyles}
                   />
                 )
               })}

src/renderer/src/pages/settings/AgentSettings/shared.tsx

@@ -2,7 +2,8 @@ import EmojiIcon from '@renderer/components/EmojiIcon'
 import type { ScrollbarProps } from '@renderer/components/Scrollbar'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { getAgentTypeLabel } from '@renderer/i18n/label'
-import type { AgentEntity, AgentSessionEntity, PermissionMode, Tool } from '@renderer/types'
+import type { AgentConfiguration, AgentEntity, AgentSessionEntity, PermissionMode, Tool } from '@renderer/types'
+import { AgentConfigurationSchema } from '@renderer/types'
 import { cn } from '@renderer/utils'
 import { Menu, Modal } from 'antd'
 import { uniq } from 'lodash'
@@ -12,6 +13,10 @@ import styled from 'styled-components'
 
 import { SettingDivider } from '..'
 
+// Shared types and constants for agent settings
+export type AgentConfigurationState = AgentConfiguration & Record<string, unknown>
+export const defaultConfiguration: AgentConfigurationState = AgentConfigurationSchema.parse({})
+
 /**
  * Computes the list of tool IDs that should be automatically approved for a given permission mode.
  */