feat(ui): implement custom AutocompleteInput and refactor model mapping UI

src/pages/AiProvidersPage.tsx

@@ -28,7 +28,7 @@ import styles from './AiProvidersPage.module.scss';
 
 export function AiProvidersPage() {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
 
@@ -180,18 +180,25 @@ export function AiProvidersPage() {
   const deleteGemini = async (index: number) => {
     const entry = geminiKeys[index];
     if (!entry) return;
-    if (!window.confirm(t('ai_providers.gemini_delete_confirm'))) return;
-    try {
-      await providersApi.deleteGeminiKey(entry.apiKey);
-      const next = geminiKeys.filter((_, idx) => idx !== index);
-      setGeminiKeys(next);
-      updateConfigValue('gemini-api-key', next);
-      clearCache('gemini-api-key');
-      showNotification(t('notification.gemini_key_deleted'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t('ai_providers.gemini_delete_title', { defaultValue: 'Delete Gemini Key' }),
+      message: t('ai_providers.gemini_delete_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await providersApi.deleteGeminiKey(entry.apiKey);
+          const next = geminiKeys.filter((_, idx) => idx !== index);
+          setGeminiKeys(next);
+          updateConfigValue('gemini-api-key', next);
+          clearCache('gemini-api-key');
+          showNotification(t('notification.gemini_key_deleted'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   const setConfigEnabled = async (
@@ -352,27 +359,34 @@ export function AiProvidersPage() {
     const source = type === 'codex' ? codexConfigs : claudeConfigs;
     const entry = source[index];
     if (!entry) return;
-    if (!window.confirm(t(`ai_providers.${type}_delete_confirm`))) return;
-    try {
-      if (type === 'codex') {
-        await providersApi.deleteCodexConfig(entry.apiKey);
-        const next = codexConfigs.filter((_, idx) => idx !== index);
-        setCodexConfigs(next);
-        updateConfigValue('codex-api-key', next);
-        clearCache('codex-api-key');
-        showNotification(t('notification.codex_config_deleted'), 'success');
-      } else {
-        await providersApi.deleteClaudeConfig(entry.apiKey);
-        const next = claudeConfigs.filter((_, idx) => idx !== index);
-        setClaudeConfigs(next);
-        updateConfigValue('claude-api-key', next);
-        clearCache('claude-api-key');
-        showNotification(t('notification.claude_config_deleted'), 'success');
-      }
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t(`ai_providers.${type}_delete_title`, { defaultValue: `Delete ${type === 'codex' ? 'Codex' : 'Claude'} Config` }),
+      message: t(`ai_providers.${type}_delete_confirm`),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          if (type === 'codex') {
+            await providersApi.deleteCodexConfig(entry.apiKey);
+            const next = codexConfigs.filter((_, idx) => idx !== index);
+            setCodexConfigs(next);
+            updateConfigValue('codex-api-key', next);
+            clearCache('codex-api-key');
+            showNotification(t('notification.codex_config_deleted'), 'success');
+          } else {
+            await providersApi.deleteClaudeConfig(entry.apiKey);
+            const next = claudeConfigs.filter((_, idx) => idx !== index);
+            setClaudeConfigs(next);
+            updateConfigValue('claude-api-key', next);
+            clearCache('claude-api-key');
+            showNotification(t('notification.claude_config_deleted'), 'success');
+          }
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   const saveVertex = async (form: VertexFormState, editIndex: number | null) => {
@@ -427,18 +441,25 @@ export function AiProvidersPage() {
   const deleteVertex = async (index: number) => {
     const entry = vertexConfigs[index];
     if (!entry) return;
-    if (!window.confirm(t('ai_providers.vertex_delete_confirm'))) return;
-    try {
-      await providersApi.deleteVertexConfig(entry.apiKey);
-      const next = vertexConfigs.filter((_, idx) => idx !== index);
-      setVertexConfigs(next);
-      updateConfigValue('vertex-api-key', next);
-      clearCache('vertex-api-key');
-      showNotification(t('notification.vertex_config_deleted'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t('ai_providers.vertex_delete_title', { defaultValue: 'Delete Vertex Config' }),
+      message: t('ai_providers.vertex_delete_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await providersApi.deleteVertexConfig(entry.apiKey);
+          const next = vertexConfigs.filter((_, idx) => idx !== index);
+          setVertexConfigs(next);
+          updateConfigValue('vertex-api-key', next);
+          clearCache('vertex-api-key');
+          showNotification(t('notification.vertex_config_deleted'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   const saveOpenai = async (form: OpenAIFormState, editIndex: number | null) => {
@@ -485,18 +506,25 @@ export function AiProvidersPage() {
   const deleteOpenai = async (index: number) => {
     const entry = openaiProviders[index];
     if (!entry) return;
-    if (!window.confirm(t('ai_providers.openai_delete_confirm'))) return;
-    try {
-      await providersApi.deleteOpenAIProvider(entry.name);
-      const next = openaiProviders.filter((_, idx) => idx !== index);
-      setOpenaiProviders(next);
-      updateConfigValue('openai-compatibility', next);
-      clearCache('openai-compatibility');
-      showNotification(t('notification.openai_provider_deleted'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
-    }
+    showConfirmation({
+      title: t('ai_providers.openai_delete_title', { defaultValue: 'Delete OpenAI Provider' }),
+      message: t('ai_providers.openai_delete_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await providersApi.deleteOpenAIProvider(entry.name);
+          const next = openaiProviders.filter((_, idx) => idx !== index);
+          setOpenaiProviders(next);
+          updateConfigValue('openai-compatibility', next);
+          clearCache('openai-compatibility');
+          showNotification(t('notification.openai_provider_deleted'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
+        }
+      },
+    });
   };
 
   const geminiModalIndex = modal?.type === 'gemini' ? modal.index : null;

src/pages/AuthFilesPage.tsx

@@ -6,6 +6,7 @@ import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { Input } from '@/components/ui/Input';
+import { AutocompleteInput } from '@/components/ui/AutocompleteInput';
 import { Modal } from '@/components/ui/Modal';
 import { EmptyState } from '@/components/ui/EmptyState';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
@@ -193,7 +194,7 @@ function resolveAuthFileStats(file: AuthFileItem, stats: KeyStats): KeyStatBucke
 
 export function AuthFilesPage() {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
   const resolvedTheme: ResolvedTheme = useThemeStore((state) => state.resolvedTheme);
 
@@ -689,18 +690,25 @@ export function AuthFilesPage() {
 
   // 删除单个文件
   const handleDelete = async (name: string) => {
-    if (!window.confirm(`${t('auth_files.delete_confirm')} "${name}" ?`)) return;
-    setDeleting(name);
-    try {
-      await authFilesApi.deleteFile(name);
-      showNotification(t('auth_files.delete_success'), 'success');
-      setFiles((prev) => prev.filter((item) => item.name !== name));
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : '';
-      showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
-    } finally {
-      setDeleting(null);
-    }
+    showConfirmation({
+      title: t('auth_files.delete_title', { defaultValue: 'Delete File' }),
+      message: `${t('auth_files.delete_confirm')} "${name}" ?`,
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        setDeleting(name);
+        try {
+          await authFilesApi.deleteFile(name);
+          showNotification(t('auth_files.delete_success'), 'success');
+          setFiles((prev) => prev.filter((item) => item.name !== name));
+        } catch (err: unknown) {
+          const errorMessage = err instanceof Error ? err.message : '';
+          showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
+        } finally {
+          setDeleting(null);
+        }
+      },
+    });
   };
 
   // 删除全部（根据筛选类型）
@@ -711,60 +719,66 @@ export function AuthFilesPage() {
       ? t('auth_files.delete_filtered_confirm', { type: typeLabel })
       : t('auth_files.delete_all_confirm');
 
-    if (!window.confirm(confirmMessage)) return;
+    showConfirmation({
+      title: t('auth_files.delete_all_title', { defaultValue: 'Delete All Files' }),
+      message: confirmMessage,
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        setDeletingAll(true);
+        try {
+          if (!isFiltered) {
+            // 删除全部
+            await authFilesApi.deleteAll();
+            showNotification(t('auth_files.delete_all_success'), 'success');
+            setFiles((prev) => prev.filter((file) => isRuntimeOnlyAuthFile(file)));
+          } else {
+            // 删除筛选类型的文件
+            const filesToDelete = files.filter((f) => f.type === filter && !isRuntimeOnlyAuthFile(f));
 
-    setDeletingAll(true);
-    try {
-      if (!isFiltered) {
-        // 删除全部
-        await authFilesApi.deleteAll();
-        showNotification(t('auth_files.delete_all_success'), 'success');
-        setFiles((prev) => prev.filter((file) => isRuntimeOnlyAuthFile(file)));
-      } else {
-        // 删除筛选类型的文件
-        const filesToDelete = files.filter((f) => f.type === filter && !isRuntimeOnlyAuthFile(f));
+            if (filesToDelete.length === 0) {
+              showNotification(t('auth_files.delete_filtered_none', { type: typeLabel }), 'info');
+              setDeletingAll(false);
+              return;
+            }
 
-        if (filesToDelete.length === 0) {
-          showNotification(t('auth_files.delete_filtered_none', { type: typeLabel }), 'info');
-          setDeletingAll(false);
-          return;
-        }
+            let success = 0;
+            let failed = 0;
+            const deletedNames: string[] = [];
 
-        let success = 0;
-        let failed = 0;
-        const deletedNames: string[] = [];
+            for (const file of filesToDelete) {
+              try {
+                await authFilesApi.deleteFile(file.name);
+                success++;
+                deletedNames.push(file.name);
+              } catch {
+                failed++;
+              }
+            }
 
-        for (const file of filesToDelete) {
-          try {
-            await authFilesApi.deleteFile(file.name);
-            success++;
-            deletedNames.push(file.name);
-          } catch {
-            failed++;
+            setFiles((prev) => prev.filter((f) => !deletedNames.includes(f.name)));
+
+            if (failed === 0) {
+              showNotification(
+                t('auth_files.delete_filtered_success', { count: success, type: typeLabel }),
+                'success'
+              );
+            } else {
+              showNotification(
+                t('auth_files.delete_filtered_partial', { success, failed, type: typeLabel }),
+                'warning'
+              );
+            }
+            setFilter('all');
           }
+        } catch (err: unknown) {
+          const errorMessage = err instanceof Error ? err.message : '';
+          showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
+        } finally {
+          setDeletingAll(false);
         }
-
-        setFiles((prev) => prev.filter((f) => !deletedNames.includes(f.name)));
-
-        if (failed === 0) {
-          showNotification(
-            t('auth_files.delete_filtered_success', { count: success, type: typeLabel }),
-            'success'
-          );
-        } else {
-          showNotification(
-            t('auth_files.delete_filtered_partial', { success, failed, type: typeLabel }),
-            'warning'
-          );
-        }
-        setFilter('all');
-      }
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : '';
-      showNotification(`${t('notification.delete_failed')}: ${errorMessage}`, 'error');
-    } finally {
-      setDeletingAll(false);
-    }
+      },
+    });
   };
 
   // 下载文件
@@ -1067,37 +1081,44 @@ export function AuthFilesPage() {
 
   const deleteExcluded = async (provider: string) => {
     const providerLabel = provider.trim() || provider;
-    if (!window.confirm(t('oauth_excluded.delete_confirm', { provider: providerLabel }))) return;
-    const providerKey = normalizeProviderKey(provider);
-    if (!providerKey) {
-      showNotification(t('oauth_excluded.provider_required'), 'error');
-      return;
-    }
-    try {
-      await authFilesApi.deleteOauthExcludedEntry(providerKey);
-      await loadExcluded();
-      showNotification(t('oauth_excluded.delete_success'), 'success');
-    } catch (err: unknown) {
-      try {
-        const current = await authFilesApi.getOauthExcludedModels();
-        const next: Record<string, string[]> = {};
-        Object.entries(current).forEach(([key, models]) => {
-          if (normalizeProviderKey(key) === providerKey) return;
-          next[key] = models;
-        });
-        await authFilesApi.replaceOauthExcludedModels(next);
-        await loadExcluded();
-        showNotification(t('oauth_excluded.delete_success'), 'success');
-      } catch (fallbackErr: unknown) {
-        const errorMessage =
-          fallbackErr instanceof Error
-            ? fallbackErr.message
-            : err instanceof Error
-              ? err.message
-              : '';
-        showNotification(`${t('oauth_excluded.delete_failed')}: ${errorMessage}`, 'error');
-      }
-    }
+    showConfirmation({
+      title: t('oauth_excluded.delete_title', { defaultValue: 'Delete Exclusion' }),
+      message: t('oauth_excluded.delete_confirm', { provider: providerLabel }),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        const providerKey = normalizeProviderKey(provider);
+        if (!providerKey) {
+          showNotification(t('oauth_excluded.provider_required'), 'error');
+          return;
+        }
+        try {
+          await authFilesApi.deleteOauthExcludedEntry(providerKey);
+          await loadExcluded();
+          showNotification(t('oauth_excluded.delete_success'), 'success');
+        } catch (err: unknown) {
+          try {
+            const current = await authFilesApi.getOauthExcludedModels();
+            const next: Record<string, string[]> = {};
+            Object.entries(current).forEach(([key, models]) => {
+              if (normalizeProviderKey(key) === providerKey) return;
+              next[key] = models;
+            });
+            await authFilesApi.replaceOauthExcludedModels(next);
+            await loadExcluded();
+            showNotification(t('oauth_excluded.delete_success'), 'success');
+          } catch (fallbackErr: unknown) {
+            const errorMessage =
+              fallbackErr instanceof Error
+                ? fallbackErr.message
+                : err instanceof Error
+                  ? err.message
+                  : '';
+            showNotification(`${t('oauth_excluded.delete_failed')}: ${errorMessage}`, 'error');
+          }
+        }
+      },
+    });
   };
 
   // OAuth 模型映射相关方法
@@ -1218,15 +1239,22 @@ export function AuthFilesPage() {
   };
 
   const deleteModelMappings = async (provider: string) => {
-    if (!window.confirm(t('oauth_model_mappings.delete_confirm', { provider }))) return;
-    try {
-      await authFilesApi.deleteOauthModelMappings(provider);
-      await loadModelMappings();
-      showNotification(t('oauth_model_mappings.delete_success'), 'success');
-    } catch (err: unknown) {
-      const errorMessage = err instanceof Error ? err.message : '';
-      showNotification(`${t('oauth_model_mappings.delete_failed')}: ${errorMessage}`, 'error');
-    }
+    showConfirmation({
+      title: t('oauth_model_mappings.delete_title', { defaultValue: 'Delete Mappings' }),
+      message: t('oauth_model_mappings.delete_confirm', { provider }),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await authFilesApi.deleteOauthModelMappings(provider);
+          await loadModelMappings();
+          showNotification(t('oauth_model_mappings.delete_success'), 'success');
+        } catch (err: unknown) {
+          const errorMessage = err instanceof Error ? err.message : '';
+          showNotification(`${t('oauth_model_mappings.delete_failed')}: ${errorMessage}`, 'error');
+        }
+      },
+    });
   };
 
   // 渲染标签筛选器
@@ -1877,20 +1905,15 @@ export function AuthFilesPage() {
         }
       >
         <div className={styles.providerField}>
-          <Input
+          <AutocompleteInput
             id="oauth-excluded-provider"
-            list="oauth-excluded-provider-options"
             label={t('oauth_excluded.provider_label')}
             hint={t('oauth_excluded.provider_hint')}
             placeholder={t('oauth_excluded.provider_placeholder')}
             value={excludedForm.provider}
-            onChange={(e) => setExcludedForm((prev) => ({ ...prev, provider: e.target.value }))}
+            onChange={(val) => setExcludedForm((prev) => ({ ...prev, provider: val }))}
+            options={providerOptions}
           />
-          <datalist id="oauth-excluded-provider-options">
-            {providerOptions.map((provider) => (
-              <option key={provider} value={provider} />
-            ))}
-          </datalist>
           {providerOptions.length > 0 && (
             <div className={styles.providerTagList}>
               {providerOptions.map((provider) => {
@@ -1945,20 +1968,15 @@ export function AuthFilesPage() {
         }
       >
         <div className={styles.providerField}>
-          <Input
+          <AutocompleteInput
             id="oauth-model-alias-provider"
-            list="oauth-model-alias-provider-options"
             label={t('oauth_model_mappings.provider_label')}
             hint={t('oauth_model_mappings.provider_hint')}
             placeholder={t('oauth_model_mappings.provider_placeholder')}
             value={mappingForm.provider}
-            onChange={(e) => setMappingForm((prev) => ({ ...prev, provider: e.target.value }))}
+            onChange={(val) => setMappingForm((prev) => ({ ...prev, provider: val }))}
+            options={providerOptions}
           />
-          <datalist id="oauth-model-alias-provider-options">
-            {providerOptions.map((provider) => (
-              <option key={provider} value={provider} />
-            ))}
-          </datalist>
           {providerOptions.length > 0 && (
             <div className={styles.providerTagList}>
               {providerOptions.map((provider) => {
@@ -1980,9 +1998,8 @@ export function AuthFilesPage() {
           )}
         </div>
         <div className={styles.providerField}>
-          <Input
+          <AutocompleteInput
             id="oauth-model-mapping-model-source"
-            list="oauth-model-mapping-model-source-options"
             label={t('oauth_model_mappings.model_source_label')}
             hint={
               mappingModelsLoading
@@ -1997,14 +2014,10 @@ export function AuthFilesPage() {
             }
             placeholder={t('oauth_model_mappings.model_source_placeholder')}
             value={mappingModelsFileName}
-            onChange={(e) => setMappingModelsFileName(e.target.value)}
+            onChange={(val) => setMappingModelsFileName(val)}
             disabled={savingMappings}
+            options={modelSourceFileOptions}
           />
-          <datalist id="oauth-model-mapping-model-source-options">
-            {modelSourceFileOptions.map((fileName) => (
-              <option key={fileName} value={fileName} />
-            ))}
-          </datalist>
         </div>
         <div className={styles.formGroup}>
           <label>{t('oauth_model_mappings.mappings_label')}</label>
@@ -2012,13 +2025,16 @@ export function AuthFilesPage() {
             {(mappingForm.mappings.length ? mappingForm.mappings : [buildEmptyMappingEntry()]).map(
               (entry, index) => (
                 <div key={entry.id} className={styles.mappingRow}>
-                  <input
-                    className="input"
+                  <AutocompleteInput
+                    wrapperStyle={{ flex: 1, marginBottom: 0 }}
                     placeholder={t('oauth_model_mappings.mapping_name_placeholder')}
-                    list={mappingModelsList.length ? 'oauth-model-mapping-model-options' : undefined}
                     value={entry.name}
-                    onChange={(e) => updateMappingEntry(index, 'name', e.target.value)}
+                    onChange={(val) => updateMappingEntry(index, 'name', val)}
                     disabled={savingMappings}
+                    options={mappingModelsList.map((m) => ({
+                      value: m.id,
+                      label: m.display_name && m.display_name !== m.id ? m.display_name : undefined,
+                    }))}
                   />
                   <span className={styles.mappingSeparator}>→</span>
                   <input
@@ -2027,6 +2043,7 @@ export function AuthFilesPage() {
                     value={entry.alias}
                     onChange={(e) => updateMappingEntry(index, 'alias', e.target.value)}
                     disabled={savingMappings}
+                    style={{ flex: 1 }}
                   />
                   <div className={styles.mappingFork}>
                     <ToggleSwitch
@@ -2060,13 +2077,6 @@ export function AuthFilesPage() {
               {t('oauth_model_mappings.add_mapping')}
             </Button>
           </div>
-          <datalist id="oauth-model-mapping-model-options">
-            {mappingModelsList.map((model) => (
-              <option key={model.id} value={model.id}>
-                {model.display_name && model.display_name !== model.id ? model.display_name : null}
-              </option>
-            ))}
-          </datalist>
           <div className={styles.hint}>{t('oauth_model_mappings.mappings_hint')}</div>
         </div>
       </Modal>

src/pages/LogsPage.tsx

@@ -371,7 +371,7 @@ type TabType = 'logs' | 'errors';
 
 export function LogsPage() {
   const { t } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const connectionStatus = useAuthStore((state) => state.connectionStatus);
   const requestLogEnabled = useConfigStore((state) => state.config?.requestLog ?? false);
 
@@ -478,19 +478,26 @@ export function LogsPage() {
   useHeaderRefresh(() => loadLogs(false));
 
   const clearLogs = async () => {
-    if (!window.confirm(t('logs.clear_confirm'))) return;
-    try {
-      await logsApi.clearLogs();
-      setLogState({ buffer: [], visibleFrom: 0 });
-      latestTimestampRef.current = 0;
-      showNotification(t('logs.clear_success'), 'success');
-    } catch (err: unknown) {
-      const message = getErrorMessage(err);
-      showNotification(
-        `${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
-        'error'
-      );
-    }
+    showConfirmation({
+      title: t('logs.clear_confirm_title', { defaultValue: 'Clear Logs' }),
+      message: t('logs.clear_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: async () => {
+        try {
+          await logsApi.clearLogs();
+          setLogState({ buffer: [], visibleFrom: 0 });
+          latestTimestampRef.current = 0;
+          showNotification(t('logs.clear_success'), 'success');
+        } catch (err: unknown) {
+          const message = getErrorMessage(err);
+          showNotification(
+            `${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
+            'error'
+          );
+        }
+      },
+    });
   };
 
   const downloadLogs = () => {

src/pages/SystemPage.tsx

@@ -11,7 +11,7 @@ import styles from './SystemPage.module.scss';
 
 export function SystemPage() {
   const { t, i18n } = useTranslation();
-  const { showNotification } = useNotificationStore();
+  const { showNotification, showConfirmation } = useNotificationStore();
   const auth = useAuthStore();
   const config = useConfigStore((state) => state.config);
   const fetchConfig = useConfigStore((state) => state.fetchConfig);
@@ -106,12 +106,19 @@ export function SystemPage() {
   };
 
   const handleClearLoginStorage = () => {
-    if (!window.confirm(t('system_info.clear_login_confirm'))) return;
-    auth.logout();
-    if (typeof localStorage === 'undefined') return;
-    const keysToRemove = [STORAGE_KEY_AUTH, 'isLoggedIn', 'apiBase', 'apiUrl', 'managementKey'];
-    keysToRemove.forEach((key) => localStorage.removeItem(key));
-    showNotification(t('notification.login_storage_cleared'), 'success');
+    showConfirmation({
+      title: t('system_info.clear_login_title', { defaultValue: 'Clear Login Storage' }),
+      message: t('system_info.clear_login_confirm'),
+      variant: 'danger',
+      confirmText: t('common.confirm'),
+      onConfirm: () => {
+        auth.logout();
+        if (typeof localStorage === 'undefined') return;
+        const keysToRemove = [STORAGE_KEY_AUTH, 'isLoggedIn', 'apiBase', 'apiUrl', 'managementKey'];
+        keysToRemove.forEach((key) => localStorage.removeItem(key));
+        showNotification(t('notification.login_storage_cleared'), 'success');
+      },
+    });
   };
 
   useEffect(() => {