From 2bceb302e08378e03720b8915649787f22494590 Mon Sep 17 00:00:00 2001
From: dev <verc20.dev@proton.me>
Date: Wed, 5 Nov 2025 15:33:25 +0800
Subject: [PATCH] fix: tool setting related

---
 .../AgentSettings/ToolingSettings.tsx         | 310 +++++++++++-------
 1 file changed, 191 insertions(+), 119 deletions(-)

diff --git a/src/renderer/src/pages/settings/AgentSettings/ToolingSettings.tsx b/src/renderer/src/pages/settings/AgentSettings/ToolingSettings.tsx
index f5e871f28f..bbe50aaec6 100644
--- a/src/renderer/src/pages/settings/AgentSettings/ToolingSettings.tsx
+++ b/src/renderer/src/pages/settings/AgentSettings/ToolingSettings.tsx
@@ -1,4 +1,3 @@
-import { Alert, Card, CardBody, CardHeader, Chip, Input, Switch } from '@heroui/react'
 import { permissionModeCards } from '@renderer/config/agent'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import useScrollPosition from '@renderer/hooks/useScrollPosition'
@@ -13,7 +12,8 @@ import type {
   UpdateAgentSessionFunction
 } from '@renderer/types'
 import { AgentConfigurationSchema } from '@renderer/types'
-import { Modal } from 'antd'
+import { Modal, Tag } from 'antd'
+import { Alert, Card, Input, Switch } from 'antd'
 import { ShieldAlert, ShieldCheck, Wrench } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useMemo, useState } from 'react'
@@ -272,47 +272,63 @@ export const ToolingSettings: FC<AgentToolingSettingsProps> = ({ agentBase, upda
             const showCaution = card.caution
 
             return (
-              <Card
+              <div
                 key={card.mode}
-                isPressable={!disabled}
-                isDisabled={disabled || isUpdatingMode}
-                shadow="none"
-                onPress={() => handleSelectPermissionMode(card.mode)}
-                className={`border ${
+                className={`flex overflow-hidden rounded-lg border ${
                   isSelected ? 'border-primary' : 'border-default-200'
-                } ${disabled ? 'opacity-60' : ''}`}>
-                <CardHeader className="flex items-start justify-between gap-2">
-                  <div className="flex flex-col">
-                    <span className="text-left font-semibold text-sm">{t(card.titleKey, card.titleFallback)}</span>
-                    <span className="text-left text-foreground-500 text-xs">
-                      {t(card.descriptionKey, card.descriptionFallback)}
-                    </span>
-                  </div>
-                  {disabled ? (
-                    <Chip color="warning" size="sm" variant="flat">
-                      {t('common.coming_soon', 'Coming soon')}
-                    </Chip>
-                  ) : isSelected ? (
-                    <Chip color="primary" size="sm" variant="flat" startContent={<ShieldCheck size={14} />}>
-                      {t('common.selected', 'Selected')}
-                    </Chip>
-                  ) : null}
-                </CardHeader>
-                <CardBody className="gap-2 text-left text-xs">
-                  <span className="text-foreground-600">{t(card.behaviorKey, card.behaviorFallback)}</span>
-                  {showCaution ? (
-                    <div className="flex items-center gap-1">
-                      <ShieldAlert className="text-danger-600" size={24} />
-                      <span className="text-danger-600">
-                        {t(
-                          'agent.settings.tooling.permissionMode.bypassPermissions.warning',
-                          'Use with caution — all tools will run without asking for approval.'
-                        )}
-                      </span>
+                } ${disabled ? 'opacity-60' : ''}`}
+                onClick={() => handleSelectPermissionMode(card.mode)}>
+                <Card
+                  variant={'borderless'}
+                  title={
+                    <div className="flex flex-row items-center justify-between gap-2 py-2">
+                      <div className="flex flex-col">
+                        <span className="whitespace-normal break-words text-left font-semibold text-sm">
+                          {t(card.titleKey, card.titleFallback)}
+                        </span>
+                        <span className="whitespace-normal break-words text-left text-foreground-500 text-xs">
+                          {t(card.descriptionKey, card.descriptionFallback)}
+                        </span>
+                      </div>
+                      {disabled ? (
+                        <Tag color="warning">{t('common.coming_soon', 'Coming soon')}</Tag>
+                      ) : isSelected ? (
+                        <Tag color="success">
+                          <div className="flex flex-col items-center py-2">
+                            <ShieldCheck size={14} />
+                            <span>{t('common.selected', 'Selected')}</span>
+                          </div>
+                        </Tag>
+                      ) : null}
                     </div>
-                  ) : null}
-                </CardBody>
-              </Card>
+                  }
+                  styles={{
+                    header: {
+                      paddingLeft: '12px',
+                      paddingRight: '12px',
+                      borderBottom: 'none'
+                    },
+                    body: {
+                      paddingLeft: '12px',
+                      paddingRight: '12px'
+                    }
+                  }}>
+                  <div className="gap-2 text-left text-xs">
+                    <span className="text-foreground-600">{t(card.behaviorKey, card.behaviorFallback)}</span>
+                    {showCaution ? (
+                      <div className="flex items-center gap-1">
+                        <ShieldAlert className="text-danger-600" size={24} />
+                        <span className="text-danger-600">
+                          {t(
+                            'agent.settings.tooling.permissionMode.bypassPermissions.warning',
+                            'Use with caution — all tools will run without asking for approval.'
+                          )}
+                        </span>
+                      </div>
+                    ) : null}
+                  </div>
+                </Card>
+              </div>
             )
           })}
         </div>
@@ -324,23 +340,31 @@ export const ToolingSettings: FC<AgentToolingSettingsProps> = ({ agentBase, upda
         </SettingsTitle>
         <div className="flex flex-col gap-4">
           <Alert
-            color="warning"
-            title={t(
-              'agent.settings.tooling.preapproved.warning.title',
-              'Pre-approved tools run without manual review.'
-            )}
-            description={t(
-              'agent.settings.tooling.preapproved.warning.description',
-              'Enable only tools you trust. Mode defaults are highlighted automatically.'
-            )}
+            showIcon
+            type="warning"
+            style={{ padding: '8px 12px' }}
+            message={
+              <span className="font-semibold text-sm text-warning">
+                {t('agent.settings.tooling.preapproved.warning.title', 'Pre-approved tools run without manual review.')}
+              </span>
+            }
+            description={
+              <span className="text-warning text-xs">
+                {t(
+                  'agent.settings.tooling.preapproved.warning.description',
+                  'Enable only tools you trust. Mode defaults are highlighted automatically.'
+                )}
+              </span>
+            }
           />
           <Input
-            isClearable
+            allowClear
             value={searchTerm}
-            onValueChange={setSearchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
             placeholder={t('agent.settings.tooling.preapproved.search', 'Search tools')}
             aria-label={t('agent.settings.tooling.preapproved.search', 'Search tools')}
             className="w-full"
+            size={'large'}
           />
           <div className="flex flex-col gap-3">
             {filteredTools.length === 0 ? (
@@ -352,54 +376,71 @@ export const ToolingSettings: FC<AgentToolingSettingsProps> = ({ agentBase, upda
                 const isAuto = autoToolIds.includes(tool.id)
                 const isApproved = approvedToolIds.includes(tool.id)
                 return (
-                  <Card key={tool.id} shadow="none" className="border border-default-200">
-                    <CardHeader className="flex items-start justify-between gap-3">
-                      <div className="flex min-w-0 flex-col gap-1">
-                        <span className="truncate font-medium text-sm">{tool.name}</span>
-                        {tool.description ? (
-                          <span className="line-clamp-2 text-foreground-500 text-xs">{tool.description}</span>
-                        ) : null}
-                        <div className="flex flex-wrap items-center gap-2">
-                          {isAuto ? (
-                            <Chip size="sm" color="primary" variant="flat">
-                              {t('agent.settings.tooling.preapproved.autoBadge', 'Added by mode')}
-                            </Chip>
-                          ) : null}
-                          {tool.type === 'mcp' ? (
-                            <Chip size="sm" color="secondary" variant="flat">
-                              {t('agent.settings.tooling.preapproved.mcpBadge', 'MCP tool')}
-                            </Chip>
-                          ) : null}
-                          {tool.requirePermissions ? (
-                            <Chip size="sm" color="warning" variant="flat">
-                              {t(
-                                'agent.settings.tooling.preapproved.requiresApproval',
-                                'Requires approval when disabled'
-                              )}
-                            </Chip>
+                  <Card
+                    key={tool.id}
+                    className="border border-default-200"
+                    title={
+                      <div className="flex items-start justify-between gap-3 py-2">
+                        <div className="flex min-w-0 flex-col gap-1">
+                          <span className="truncate font-medium text-sm">{tool.name}</span>
+                          {tool.description ? (
+                            <span className="line-clamp-2 whitespace-normal text-foreground-500 text-xs">
+                              {tool.description}
+                            </span>
                           ) : null}
+                          <div className="flex flex-wrap items-center gap-2">
+                            {isAuto ? (
+                              <Tag color="success">
+                                {t('agent.settings.tooling.preapproved.autoBadge', 'Added by mode')}
+                              </Tag>
+                            ) : null}
+                            {tool.type === 'mcp' ? (
+                              <Tag color="default">{t('agent.settings.tooling.preapproved.mcpBadge', 'MCP tool')}</Tag>
+                            ) : null}
+                            {tool.requirePermissions ? (
+                              <Tag color="warning">
+                                {t(
+                                  'agent.settings.tooling.preapproved.requiresApproval',
+                                  'Requires approval when disabled'
+                                )}
+                              </Tag>
+                            ) : null}
+                          </div>
                         </div>
+                        <Switch
+                          aria-label={t('agent.settings.tooling.preapproved.toggle', {
+                            defaultValue: `Toggle ${tool.name}`,
+                            name: tool.name
+                          })}
+                          checked={isApproved}
+                          disabled={isAuto || isUpdatingTools}
+                          size="default"
+                          onChange={(checked) => handleToggleTool(tool.id, checked)}
+                        />
                       </div>
-                      <Switch
-                        aria-label={t('agent.settings.tooling.preapproved.toggle', {
-                          defaultValue: `Toggle ${tool.name}`,
-                          name: tool.name
-                        })}
-                        isSelected={isApproved}
-                        isDisabled={isAuto || isUpdatingTools}
-                        size="sm"
-                        onValueChange={(value) => handleToggleTool(tool.id, value)}
-                      />
-                    </CardHeader>
+                    }
+                    styles={{
+                      header: {
+                        paddingLeft: '12px',
+                        paddingRight: '12px',
+                        borderBottom: 'none'
+                      },
+                      body: {
+                        paddingLeft: '12px',
+                        paddingRight: '12px',
+                        paddingTop: '0px',
+                        paddingBottom: '0px'
+                      }
+                    }}>
                     {isAuto ? (
-                      <CardBody className="py-0 pb-3">
+                      <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>
-                      </CardBody>
+                      </div>
                     ) : null}
                   </Card>
                 )
@@ -427,26 +468,43 @@ export const ToolingSettings: FC<AgentToolingSettingsProps> = ({ agentBase, upda
               {availableServers.map((server) => {
                 const isSelected = selectedMcpIds.includes(server.id)
                 return (
-                  <Card key={server.id} shadow="none" className="border border-default-200">
-                    <CardHeader className="flex items-center justify-between gap-2">
-                      <div className="flex min-w-0 flex-col">
-                        <span className="truncate font-medium text-sm">{server.name}</span>
-                        {server.description ? (
-                          <span className="line-clamp-2 text-foreground-500 text-xs">{server.description}</span>
-                        ) : null}
+                  <Card
+                    key={server.id}
+                    className="border border-default-200"
+                    title={
+                      <div className="flex items-center justify-between gap-2">
+                        <div className="flex min-w-0 flex-col">
+                          <span className="truncate font-medium text-sm">{server.name}</span>
+                          {server.description ? (
+                            <span className="line-clamp-2 text-foreground-500 text-xs">{server.description}</span>
+                          ) : null}
+                        </div>
+                        <Switch
+                          aria-label={t('agent.settings.tooling.mcp.toggle', {
+                            defaultValue: `Toggle ${server.name}`,
+                            name: server.name
+                          })}
+                          checked={isSelected}
+                          size="default"
+                          disabled={!server.isActive || isUpdatingMcp}
+                          onChange={(checked) => handleToggleMcp(server.id, checked)}
+                        />
                       </div>
-                      <Switch
-                        aria-label={t('agent.settings.tooling.mcp.toggle', {
-                          defaultValue: `Toggle ${server.name}`,
-                          name: server.name
-                        })}
-                        isSelected={isSelected}
-                        size="sm"
-                        isDisabled={!server.isActive || isUpdatingMcp}
-                        onValueChange={(value) => handleToggleMcp(server.id, value)}
-                      />
-                    </CardHeader>
-                  </Card>
+                    }
+                    styles={{
+                      header: {
+                        paddingLeft: '12px',
+                        paddingRight: '12px',
+                        borderBottom: 'none'
+                      },
+                      body: {
+                        paddingLeft: '12px',
+                        paddingRight: '12px',
+                        paddingTop: '0px',
+                        paddingBottom: '0px'
+                      }
+                    }}
+                  />
                 )
               })}
             </div>
@@ -462,33 +520,47 @@ export const ToolingSettings: FC<AgentToolingSettingsProps> = ({ agentBase, upda
 
       <SettingsItem divider={false}>
         <SettingsTitle>{t('agent.settings.tooling.steps.review.title', 'Step 3 · Review')}</SettingsTitle>
-        <Card shadow="none" className="border border-default-200">
-          <CardBody className="flex flex-col gap-2 text-sm">
+        <Card
+          className="border border-default-200"
+          styles={{
+            header: {
+              paddingLeft: '12px',
+              paddingRight: '12px',
+              borderBottom: 'none'
+            },
+            body: {
+              paddingLeft: '12px',
+              paddingRight: '12px',
+              paddingTop: '12px',
+              paddingBottom: '12px'
+            }
+          }}>
+          <div className="flex flex-col gap-2 text-sm">
             <div className="flex flex-wrap gap-3">
-              <Chip variant="flat" color="primary">
+              <Tag color="success">
                 {t('agent.settings.tooling.review.mode', {
                   defaultValue: `Mode: ${selectedMode}`,
                   mode: selectedMode
                 })}
-              </Chip>
-              <Chip variant="flat" color="default">
+              </Tag>
+              <Tag color="default">
                 {t('agent.settings.tooling.review.autoTools', {
                   defaultValue: `Auto: ${autoCount}`,
                   count: autoCount
                 })}
-              </Chip>
-              <Chip variant="flat" color="success">
+              </Tag>
+              <Tag color="success">
                 {t('agent.settings.tooling.review.customTools', {
                   defaultValue: `Custom: ${customCount}`,
                   count: customCount
                 })}
-              </Chip>
-              <Chip variant="flat" color="warning">
+              </Tag>
+              <Tag color="warning">
                 {t('agent.settings.tooling.review.mcp', {
                   defaultValue: `MCP: ${agentSummary.mcps}`,
                   count: agentSummary.mcps
                 })}
-              </Chip>
+              </Tag>
             </div>
             <span className="text-foreground-500 text-xs">
               {t(
@@ -496,7 +568,7 @@ export const ToolingSettings: FC<AgentToolingSettingsProps> = ({ agentBase, upda
                 'Changes save automatically. Adjust the steps above any time to fine-tune permissions.'
               )}
             </span>
-          </CardBody>
+          </div>
         </Card>
       </SettingsItem>
     </SettingsContainer>