From 465fbafb3df44664435a9497be4ea1946e1f45b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?=
 =?UTF-8?q?=29?= <relakkes@gmail.com>
Date: Tue, 14 Jul 2026 01:41:42 +0800
Subject: [PATCH] fix(desktop): refine Auto icon

---
 .../controls/PermissionModeSelector.test.tsx   | 18 ++++++++++++++++++
 .../controls/PermissionModeSelector.tsx        |  6 ++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/desktop/src/components/controls/PermissionModeSelector.test.tsx b/desktop/src/components/controls/PermissionModeSelector.test.tsx
index d4642715..0488a338 100644
--- a/desktop/src/components/controls/PermissionModeSelector.test.tsx
+++ b/desktop/src/components/controls/PermissionModeSelector.test.tsx
@@ -455,6 +455,24 @@ describe('PermissionModeSelector', () => {
       .toHaveTextContent('autoplay')
   })
 
+  it('renders the visually larger Auto glyph at a reduced size', () => {
+    const { rerender } = render(
+      <PermissionModeSelector value="default" onChange={vi.fn()} />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Ask permissions' }))
+    const autoIcon = screen
+      .getByRole('menuitem', { name: /Auto mode/ })
+      .querySelector('.material-symbols-outlined')
+    expect(autoIcon).toHaveClass('text-[18px]')
+
+    rerender(<PermissionModeSelector value="auto" onChange={vi.fn()} />)
+    const triggerIcon = screen
+      .getByRole('button', { name: 'Auto mode' })
+      .querySelector('.material-symbols-outlined')
+    expect(triggerIcon).toHaveClass('text-[12px]')
+  })
+
   it('does not change mode when first-use Auto confirmation is cancelled', () => {
     const onChange = vi.fn()
     useSettingsStore.setState({ autoModeOptInAccepted: false } as never)
diff --git a/desktop/src/components/controls/PermissionModeSelector.tsx b/desktop/src/components/controls/PermissionModeSelector.tsx
index d3c5d004..3fbc7cb3 100644
--- a/desktop/src/components/controls/PermissionModeSelector.tsx
+++ b/desktop/src/components/controls/PermissionModeSelector.tsx
@@ -214,7 +214,7 @@ export function PermissionModeSelector({ workDir: workDirProp, compact = false,
             ${item.value === currentMode ? 'bg-[var(--color-surface-selected)]' : ''}
           `}
         >
-          <span className={`material-symbols-outlined mt-0.5 text-[20px] ${item.color || 'text-[var(--color-text-secondary)]'}`}>
+          <span className={`material-symbols-outlined mt-0.5 ${item.value === 'auto' ? 'text-[18px]' : 'text-[20px]'} ${item.color || 'text-[var(--color-text-secondary)]'}`}>
             {item.icon}
           </span>
           <div className="min-w-0 flex-1">
@@ -264,7 +264,9 @@ export function PermissionModeSelector({ workDir: workDirProp, compact = false,
           isTurnActive ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[var(--color-surface-hover)]'
         } ${compactButtonClass}`}
       >
-        <span className="material-symbols-outlined text-[14px]">{MODE_ICONS[currentMode]}</span>
+        <span className={`material-symbols-outlined ${currentMode === 'auto' ? 'text-[12px]' : 'text-[14px]'}`}>
+          {MODE_ICONS[currentMode]}
+        </span>
         {!compact && (
           <>
             <span>{MODE_LABELS[currentMode]}</span>