From d1d1dbc046fd0d1e2e4a5a576be282d935ef37e8 Mon Sep 17 00:00:00 2001
From: dev <verc20.dev@proton.me>
Date: Wed, 5 Nov 2025 13:51:41 +0800
Subject: [PATCH] fix: tool permission card related

---
 .../Tools/ToolPermissionRequestCard.tsx       | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/renderer/src/pages/home/Messages/Tools/ToolPermissionRequestCard.tsx b/src/renderer/src/pages/home/Messages/Tools/ToolPermissionRequestCard.tsx
index e2678357ca..096a0b549d 100644
--- a/src/renderer/src/pages/home/Messages/Tools/ToolPermissionRequestCard.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/ToolPermissionRequestCard.tsx
@@ -1,9 +1,9 @@
 import type { PermissionUpdate } from '@anthropic-ai/claude-agent-sdk'
-import { Button, Chip, ScrollShadow } from '@heroui/react'
 import { loggerService } from '@logger'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { selectPendingPermissionByToolName, toolPermissionsActions } from '@renderer/store/toolPermissions'
 import type { NormalToolResponse } from '@renderer/types'
+import { Button, Tag } from 'antd'
 import { ChevronDown, CirclePlay, CircleX } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -127,33 +127,36 @@ export function ToolPermissionRequestCard({ toolResponse }: Props) {
           </div>
 
           <div className="flex flex-wrap items-center justify-end gap-2">
-            <Chip color={isExpired ? 'danger' : 'warning'} size="sm" variant="flat">
+            <Tag color={isExpired ? 'error' : 'warning'}>
               {isExpired
                 ? t('agent.toolPermission.expired')
                 : t('agent.toolPermission.pending', { seconds: remainingSeconds })}
-            </Chip>
+            </Tag>
 
             <div className="flex items-center gap-1">
               <Button
                 aria-label={t('agent.toolPermission.aria.denyRequest')}
                 className="h-8"
                 color="danger"
-                isDisabled={isSubmitting || isExpired}
-                isLoading={isSubmittingDeny}
-                onPress={() => handleDecision('deny')}
-                startContent={<CircleX size={16} />}
-                variant="bordered">
+                disabled={isSubmitting || isExpired}
+                loading={isSubmittingDeny}
+                onClick={() => handleDecision('deny')}
+                icon={<CircleX size={16} />}
+                iconPosition={'start'}
+                variant="outlined">
                 {t('agent.toolPermission.button.cancel')}
               </Button>
 
               <Button
                 aria-label={t('agent.toolPermission.aria.allowRequest')}
                 className="h-8 px-3"
-                color="success"
-                isDisabled={isSubmitting || isExpired}
-                isLoading={isSubmittingAllow}
-                onPress={() => handleDecision('allow')}
-                startContent={<CirclePlay size={16} />}>
+                color="primary"
+                disabled={isSubmitting || isExpired}
+                loading={isSubmittingAllow}
+                onClick={() => handleDecision('allow')}
+                icon={<CirclePlay size={16} />}
+                iconPosition={'start'}
+                variant="solid">
                 {t('agent.toolPermission.button.run')}
               </Button>
 
@@ -161,12 +164,12 @@ export function ToolPermissionRequestCard({ toolResponse }: Props) {
                 aria-label={
                   showDetails ? t('agent.toolPermission.aria.hideDetails') : t('agent.toolPermission.aria.showDetails')
                 }
-                className="h-8"
-                isIconOnly
-                onPress={() => setShowDetails((value) => !value)}
-                variant="light">
-                <ChevronDown className={`transition-transform ${showDetails ? 'rotate-180' : ''}`} size={16} />
-              </Button>
+                className="h-8 text-default-600 transition-colors hover:bg-default-200/50 hover:text-default-800"
+                onClick={() => setShowDetails((value) => !value)}
+                icon={<ChevronDown className={`transition-transform ${showDetails ? 'rotate-180' : ''}`} size={16} />}
+                variant="text"
+                style={{ backgroundColor: 'transparent' }}
+              />
             </div>
           </div>
         </div>
@@ -181,9 +184,9 @@ export function ToolPermissionRequestCard({ toolResponse }: Props) {
               <p className="mb-2 font-medium text-default-400 text-xs uppercase tracking-wide">
                 {t('agent.toolPermission.inputPreview')}
               </p>
-              <ScrollShadow className="max-h-48 font-mono text-xs" hideScrollBar>
-                <pre className="whitespace-pre-wrap break-all text-left">{request.inputPreview}</pre>
-              </ScrollShadow>
+              <div className="max-h-[192px] overflow-auto font-mono text-xs">
+                <pre className="whitespace-pre-wrap break-all p-2 text-left">{request.inputPreview}</pre>
+              </div>
             </div>
 
             {request.requiresPermissions && (