feat(ai-providers): add prefix editing for provider configs

fix(splash): prevent login flicker on startup
fix(splash): preserve logo aspect ratio
2026-02-03 03:10:50 +08:00 · 2025-12-21 23:46:39 +08:00 · 2025-12-21 20:22:22 +08:00 · 2025-12-21 16:58:14 +08:00 · 2025-12-21 16:54:17 +08:00 · 2025-12-21 16:27:28 +08:00
37 changed files with 2577 additions and 723 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -15,6 +15,9 @@ jobs:
    steps:
      - name: Checkout code
        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          fetch-tags: true

      - name: Setup Node.js
        uses: actions/setup-node@v4
@@ -36,27 +39,25 @@ jobs:
          mv index.html management.html
          ls -lh management.html

+      - name: Generate release notes
+        run: |
+          set -euo pipefail
+          current_tag="${GITHUB_REF_NAME}"
+          previous_tag="$(git tag --list 'v*' --sort=-v:refname | grep -v "^${current_tag}$" | head -n 1 || true)"
+          if [ -n "${previous_tag}" ]; then
+            range="${previous_tag}..${current_tag}"
+          else
+            range="${current_tag}"
+          fi
+
+          : > release-notes.md
+          git log --pretty=format:"- %h %s" "${range}" >> release-notes.md
+
      - name: Create Release
        uses: softprops/action-gh-release@v1
        with:
          files: dist/management.html
-          body: |
-            ## CLI Proxy API Management Center - ${{ github.ref_name }}
-
-            ### Download and Usage
-            1. Download the `management.html` file
-            2. Open it directly in your browser
-            3. All assets (CSS, JavaScript, images) are bundled into this single file
-
-            ### Features
-            - Single file, no external dependencies required
-            - Complete management interface for CLI Proxy API
-            - Support for local and remote connections
-            - Multi-language support (Chinese/English)
-            - Dark/Light theme support
-
-            ---
-            🤖 Generated with GitHub Actions
+          body_path: release-notes.md
          draft: false
          prerelease: false
        env:
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,10 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+api.md
+usage.json
+CLAUDE.md
+AGENTS.md

 node_modules
 dist
@@ -13,6 +17,7 @@ dist-ssr
 *.local

 # Editor directories and files
+settings.local.json
 .vscode/*
 !.vscode/extensions.json
 .idea
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { LoginPage } from '@/pages/LoginPage';
+import { DashboardPage } from '@/pages/DashboardPage';
 import { SettingsPage } from '@/pages/SettingsPage';
 import { ApiKeysPage } from '@/pages/ApiKeysPage';
 import { AiProvidersPage } from '@/pages/AiProvidersPage';
@@ -11,19 +12,29 @@ import { ConfigPage } from '@/pages/ConfigPage';
 import { LogsPage } from '@/pages/LogsPage';
 import { SystemPage } from '@/pages/SystemPage';
 import { NotificationContainer } from '@/components/common/NotificationContainer';
+import { SplashScreen } from '@/components/common/SplashScreen';
 import { MainLayout } from '@/components/layout/MainLayout';
 import { ProtectedRoute } from '@/router/ProtectedRoute';
 import { useAuthStore, useLanguageStore, useThemeStore } from '@/stores';

+const SPLASH_DURATION = 1500;
+const SPLASH_FADE_DURATION = 400;
+
 function App() {
  const initializeTheme = useThemeStore((state) => state.initializeTheme);
  const language = useLanguageStore((state) => state.language);
  const setLanguage = useLanguageStore((state) => state.setLanguage);
  const restoreSession = useAuthStore((state) => state.restoreSession);

+  const [splashReadyToFade, setSplashReadyToFade] = useState(false);
+  const [showSplash, setShowSplash] = useState(true);
+  const [authReady, setAuthReady] = useState(false);
+
  useEffect(() => {
    initializeTheme();
-    restoreSession();
+    void restoreSession().finally(() => {
+      setAuthReady(true);
+    });
  }, [initializeTheme, restoreSession]);

  useEffect(() => {
@@ -31,6 +42,27 @@ function App() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // 仅用于首屏同步 i18n 语言

+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setSplashReadyToFade(true);
+    }, SPLASH_DURATION - SPLASH_FADE_DURATION);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleSplashFinish = useCallback(() => {
+    setShowSplash(false);
+  }, []);
+
+  if (showSplash) {
+    return (
+      <SplashScreen
+        fadeOut={splashReadyToFade && authReady}
+        onFinish={handleSplashFinish}
+      />
+    );
+  }
+
  return (
    <HashRouter>
      <NotificationContainer />
@@ -44,7 +76,8 @@ function App() {
            </ProtectedRoute>
          }
        >
-          <Route index element={<Navigate to="/settings" replace />} />
+          <Route index element={<DashboardPage />} />
+          <Route path="dashboard" element={<DashboardPage />} />
          <Route path="settings" element={<SettingsPage />} />
          <Route path="api-keys" element={<ApiKeysPage />} />
          <Route path="ai-providers" element={<AiProvidersPage />} />
@@ -54,7 +87,7 @@ function App() {
          <Route path="config" element={<ConfigPage />} />
          <Route path="logs" element={<LogsPage />} />
          <Route path="system" element={<SystemPage />} />
-          <Route path="*" element={<Navigate to="/settings" replace />} />
+          <Route path="*" element={<Navigate to="/" replace />} />
        </Route>
      </Routes>
    </HashRouter>
--- a/src/components/common/SplashScreen.scss
+++ b/src/components/common/SplashScreen.scss
@@ -0,0 +1,106 @@
+@use 'sass:color';
+@use '../../styles/variables.scss' as *;
+
+.splash-screen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-primary);
+  opacity: 1;
+  transition: opacity 0.4s ease-out;
+
+  &.fade-out {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.splash-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-md;
+  animation: splash-enter 0.6s ease-out;
+}
+
+@keyframes splash-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.splash-logo {
+  height: 80px;
+  width: auto;
+  border-radius: $radius-lg;
+  box-shadow: $shadow-lg;
+  animation: splash-logo-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes splash-logo-pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+.splash-title {
+  font-size: 28px;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+  letter-spacing: -0.5px;
+}
+
+.splash-subtitle {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin: 0;
+  margin-top: -8px;
+}
+
+.splash-loader {
+  width: 120px;
+  height: 3px;
+  background: var(--border-color);
+  border-radius: $radius-full;
+  overflow: hidden;
+  margin-top: $spacing-md;
+}
+
+.splash-loader-bar {
+  width: 100%;
+  height: 100%;
+  background: var(--primary-color);
+  border-radius: $radius-full;
+  animation: splash-loading 1.2s ease-in-out infinite;
+  transform-origin: left;
+}
+
+@keyframes splash-loading {
+  0% {
+    transform: scaleX(0);
+  }
+  50% {
+    transform: scaleX(1);
+    transform-origin: left;
+  }
+  50.01% {
+    transform-origin: right;
+  }
+  100% {
+    transform: scaleX(0);
+    transform-origin: right;
+  }
+}
--- a/src/components/common/SplashScreen.tsx
+++ b/src/components/common/SplashScreen.tsx
@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
+import './SplashScreen.scss';
+
+interface SplashScreenProps {
+  onFinish: () => void;
+  fadeOut?: boolean;
+}
+
+const FADE_OUT_DURATION = 400;
+
+export function SplashScreen({ onFinish, fadeOut = false }: SplashScreenProps) {
+  useEffect(() => {
+    if (!fadeOut) return;
+    const finishTimer = setTimeout(() => {
+      onFinish();
+    }, FADE_OUT_DURATION);
+
+    return () => {
+      clearTimeout(finishTimer);
+    };
+  }, [fadeOut, onFinish]);
+
+  return (
+    <div className={`splash-screen ${fadeOut ? 'fade-out' : ''}`}>
+      <div className="splash-content">
+        <img src={INLINE_LOGO_JPEG} alt="CPAMC" className="splash-logo" />
+        <h1 className="splash-title">CLI Proxy API</h1>
+        <p className="splash-subtitle">Management Center</p>
+        <div className="splash-loader">
+          <div className="splash-loader-bar" />
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -8,6 +8,7 @@ import {
  IconFileText,
  IconInfo,
  IconKey,
+  IconLayoutDashboard,
  IconScrollText,
  IconSettings,
  IconShield,
@@ -18,6 +19,7 @@ import { useAuthStore, useConfigStore, useLanguageStore, useNotificationStore, u
 import { versionApi } from '@/services/api';

 const sidebarIcons: Record<string, ReactNode> = {
+  dashboard: <IconLayoutDashboard size={18} />,
  settings: <IconSlidersHorizontal size={18} />,
  apiKeys: <IconKey size={18} />,
  aiProviders: <IconBot size={18} />,
@@ -230,6 +232,7 @@ export function MainLayout() {
          : 'muted';

  const navItems = [
+    { path: '/', label: t('nav.dashboard'), icon: sidebarIcons.dashboard },
    { path: '/settings', label: t('nav.basic_settings'), icon: sidebarIcons.settings },
    { path: '/api-keys', label: t('nav.api_keys'), icon: sidebarIcons.apiKeys },
    { path: '/ai-providers', label: t('nav.ai_providers'), icon: sidebarIcons.aiProviders },
--- a/src/components/ui/LoadingSpinner.tsx
+++ b/src/components/ui/LoadingSpinner.tsx
@@ -1,7 +1,13 @@
-export function LoadingSpinner({ size = 20 }: { size?: number }) {
+export function LoadingSpinner({
+  size = 20,
+  className = ''
+}: {
+  size?: number;
+  className?: string;
+}) {
  return (
    <div
-      className="loading-spinner"
+      className={`loading-spinner${className ? ` ${className}` : ''}`}
      style={{ width: size, height: size, borderWidth: size / 7 }}
      role="status"
      aria-live="polite"
--- a/src/components/ui/icons.tsx
+++ b/src/components/ui/icons.tsx
@@ -266,3 +266,51 @@ export function IconDollarSign({ size = 20, ...props }: IconProps) {
    </svg>
  );
 }
+
+export function IconGithub({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+      <path d="M9 18c-4.51 2-5-2-7-2" />
+    </svg>
+  );
+}
+
+export function IconExternalLink({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M15 3h6v6" />
+      <path d="M10 14 21 3" />
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </svg>
+  );
+}
+
+export function IconBookOpen({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <path d="M12 7v14" />
+      <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+    </svg>
+  );
+}
+
+export function IconCode({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <polyline points="16 18 22 12 16 6" />
+      <polyline points="8 6 2 12 8 18" />
+    </svg>
+  );
+}
+
+export function IconLayoutDashboard({ size = 20, ...props }: IconProps) {
+  return (
+    <svg {...baseSvgProps} width={size} height={size} {...props}>
+      <rect width="7" height="9" x="3" y="3" rx="1" />
+      <rect width="7" height="5" x="14" y="3" rx="1" />
+      <rect width="7" height="9" x="14" y="12" rx="1" />
+      <rect width="7" height="5" x="3" y="16" rx="1" />
+    </svg>
+  );
+}
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -29,6 +29,7 @@
    "required": "Required",
    "api_key": "Key",
    "base_url": "Address",
+    "prefix": "Prefix",
    "proxy_url": "Proxy",
    "alias": "Alias",
    "failure": "Failure",
@@ -81,6 +82,7 @@
    "status": "Connection Status:"
  },
  "nav": {
+    "dashboard": "Dashboard",
    "basic_settings": "Basic Settings",
    "api_keys": "API Keys",
    "ai_providers": "AI Providers",
@@ -91,6 +93,27 @@
    "logs": "Logs Viewer",
    "system_info": "Management Center Info"
  },
+  "dashboard": {
+    "title": "Dashboard",
+    "subtitle": "Welcome to CLI Proxy API Management Center",
+    "openai_providers": "OpenAI Providers",
+    "quick_actions": "Quick Actions",
+    "current_config": "Current Configuration",
+    "management_keys": "Management Keys",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth Credentials",
+    "usage_overview": "Usage Overview",
+    "total_requests": "Total Requests",
+    "total_tokens": "Total Tokens",
+    "rpm_30min": "RPM (30min)",
+    "tpm_30min": "TPM (30min)",
+    "models_used": "Models Used",
+    "no_usage_data": "No usage data available",
+    "view_detailed_usage": "View Detailed Stats",
+    "edit_settings": "Edit Settings",
+    "available_models": "Available Models",
+    "available_models_desc": "Total models from all providers"
+  },
  "basic_settings": {
    "title": "Basic Settings",
    "debug_title": "Debug Mode",
@@ -149,6 +172,9 @@
    "excluded_models_placeholder": "Comma or newline separated, e.g. gemini-1.5-pro, gemini-1.5-flash",
    "excluded_models_hint": "Leave empty to allow all models; values are trimmed and deduplicated automatically.",
    "excluded_models_count": "Excluding {{count}} models",
+    "prefix_label": "Prefix (Optional):",
+    "prefix_placeholder": "e.g.: team-a",
+    "prefix_hint": "When set, call models as prefix/<model> to target this entry.",
    "config_toggle_label": "Enabled",
    "config_disabled_badge": "Disabled",
    "codex_title": "Codex API Configuration",
@@ -200,8 +226,6 @@
    "ampcode_upstream_api_key_current": "Current Amp official key: {{key}}",
    "ampcode_clear_upstream_api_key": "Clear official key",
    "ampcode_clear_upstream_api_key_confirm": "Are you sure you want to clear the Ampcode upstream API key (Amp official)?",
-    "ampcode_restrict_management_label": "Restrict Amp management routes to localhost",
-    "ampcode_restrict_management_hint": "When enabled, Amp management routes (/api/auth, /api/user, /api/threads, etc.) only accept 127.0.0.1/::1 (recommended).",
    "ampcode_force_model_mappings_label": "Force model mappings",
    "ampcode_force_model_mappings_hint": "When enabled, mappings override local API-key availability checks.",
    "ampcode_model_mappings_label": "Model mappings (from → to)",
@@ -424,9 +448,10 @@
    "gemini_cli_oauth_title": "Gemini CLI OAuth",
    "gemini_cli_oauth_button": "Start Gemini CLI Login",
    "gemini_cli_oauth_hint": "Login to Google Gemini CLI service through OAuth flow, automatically obtain and save authentication files.",
-    "gemini_cli_project_id_label": "Google Cloud Project ID (Optional):",
-    "gemini_cli_project_id_placeholder": "Enter Google Cloud Project ID (optional)",
-    "gemini_cli_project_id_hint": "If a project ID is specified, authentication information for that project will be used.",
+    "gemini_cli_project_id_label": "Google Cloud Project ID:",
+    "gemini_cli_project_id_placeholder": "Enter Google Cloud Project ID",
+    "gemini_cli_project_id_hint": "Project ID is required for Gemini CLI OAuth.",
+    "gemini_cli_project_id_required": "Please enter a Google Cloud project ID.",
    "gemini_cli_oauth_url_label": "Authorization URL:",
    "gemini_cli_open_link": "Open Link",
    "gemini_cli_copy_link": "Copy Link",
@@ -446,6 +471,16 @@
    "qwen_oauth_status_error": "Authentication failed:",
    "qwen_oauth_start_error": "Failed to start Qwen OAuth:",
    "qwen_oauth_polling_error": "Failed to check authentication status:",
+    "oauth_callback_label": "Callback URL",
+    "oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
+    "oauth_callback_hint": "Remote browser mode: after the provider redirects to http://localhost:..., copy the full URL and submit it here.",
+    "oauth_callback_button": "Submit Callback URL",
+    "oauth_callback_required": "Please paste the full redirect URL first.",
+    "oauth_callback_success": "Callback URL submitted. Continue waiting for authentication.",
+    "oauth_callback_error": "Failed to submit callback URL:",
+    "oauth_callback_upgrade_hint": "Please update CLI Proxy API or check the connection.",
+    "oauth_callback_status_success": "Callback URL submitted, waiting for authentication...",
+    "oauth_callback_status_error": "Callback URL submission failed:",
    "missing_state": "Unable to retrieve authentication state parameter",
    "iflow_oauth_title": "iFlow OAuth",
    "iflow_oauth_button": "Start iFlow Login",
@@ -571,11 +606,15 @@
    "auto_refresh_disabled": "Auto refresh disabled",
    "load_more_hint": "Scroll up to load more",
    "hidden_lines": "Hidden: {{count}} lines",
+    "hide_management_logs": "Hide {{prefix}} logs",
    "search_placeholder": "Search logs by content or keyword",
    "search_empty_title": "No matching logs found",
-    "search_empty_desc": "Try a different keyword or clear the search filter.",
+    "search_empty_desc": "Try a different keyword or clear the filters.",
+    "double_click_copy_hint": "Double-click to copy raw log line",
+    "copy_success": "Log copied to clipboard",
+    "copy_failed": "Copy failed",
    "lines": "lines",
-    "removed": "Removed",
+    "removed": "Filtered",
    "upgrade_required_title": "Please Upgrade CLI Proxy API",
    "upgrade_required_desc": "The current server version does not support the logs viewing feature. Please upgrade to the latest version of CLI Proxy API to use this feature."
  },
@@ -630,7 +669,15 @@
    "version_is_latest": "You are on the latest version",
    "version_check_error": "Update check failed",
    "version_current_missing": "Server version is unavailable; cannot compare",
-    "version_unknown": "Unknown"
+    "version_unknown": "Unknown",
+    "quick_links_title": "Quick Links",
+    "quick_links_desc": "Access project repositories and documentation for help and updates.",
+    "link_main_repo": "Main Repository",
+    "link_main_repo_desc": "CLI Proxy API core program source code",
+    "link_webui_repo": "WebUI Repository",
+    "link_webui_repo_desc": "Management Center frontend source code",
+    "link_docs": "Documentation",
+    "link_docs_desc": "Usage tutorials and configuration guides"
  },
  "notification": {
    "debug_updated": "Debug settings updated",
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -29,6 +29,7 @@
    "required": "必填",
    "api_key": "密钥",
    "base_url": "地址",
+    "prefix": "前缀",
    "proxy_url": "代理",
    "alias": "别名",
    "failure": "失败",
@@ -81,6 +82,7 @@
    "status": "连接状态:"
  },
  "nav": {
+    "dashboard": "仪表盘",
    "basic_settings": "基础设置",
    "api_keys": "API 密钥",
    "ai_providers": "AI 提供商",
@@ -91,6 +93,27 @@
    "logs": "日志查看",
    "system_info": "中心信息"
  },
+  "dashboard": {
+    "title": "仪表盘",
+    "subtitle": "欢迎使用 CLI Proxy API 管理中心",
+    "openai_providers": "OpenAI 提供商",
+    "quick_actions": "快捷操作",
+    "current_config": "当前配置",
+    "management_keys": "管理密钥",
+    "provider_keys_detail": "G:{{gemini}} C:{{codex}} Cl:{{claude}} O:{{openai}}",
+    "oauth_credentials": "OAuth 凭证",
+    "usage_overview": "使用概览",
+    "total_requests": "总请求数",
+    "total_tokens": "总 Token 数",
+    "rpm_30min": "RPM (30分钟)",
+    "tpm_30min": "TPM (30分钟)",
+    "models_used": "使用模型数",
+    "no_usage_data": "暂无使用数据",
+    "view_detailed_usage": "查看详细统计",
+    "edit_settings": "编辑设置",
+    "available_models": "可用模型",
+    "available_models_desc": "所有提供商的模型总数"
+  },
  "basic_settings": {
    "title": "基础设置",
    "debug_title": "调试模式",
@@ -149,6 +172,9 @@
    "excluded_models_placeholder": "用逗号或换行分隔，例如: gemini-1.5-pro, gemini-1.5-flash",
    "excluded_models_hint": "留空表示不过滤；保存时会自动去重并忽略空白。",
    "excluded_models_count": "排除 {{count}} 个模型",
+    "prefix_label": "前缀 (可选):",
+    "prefix_placeholder": "例如: team-a",
+    "prefix_hint": "设置后可用 prefix/<model> 选择该条目。",
    "config_toggle_label": "启用",
    "config_disabled_badge": "已停用",
    "codex_title": "Codex API 配置",
@@ -200,8 +226,6 @@
    "ampcode_upstream_api_key_current": "当前Amp官方密钥: {{key}}",
    "ampcode_clear_upstream_api_key": "清除官方密钥",
    "ampcode_clear_upstream_api_key_confirm": "确定要清除 Ampcode 的 upstream API key（Amp官方）吗？",
-    "ampcode_restrict_management_label": "仅允许本机访问 Amp 管理路由",
-    "ampcode_restrict_management_hint": "开启后，/api/auth、/api/user、/api/threads 等 Amp 管理路由仅允许 127.0.0.1/::1 访问（推荐）。",
    "ampcode_force_model_mappings_label": "强制应用模型映射",
    "ampcode_force_model_mappings_hint": "开启后，模型映射将覆盖本地 API Key 可用性判断。",
    "ampcode_model_mappings_label": "模型映射 (from → to)",
@@ -424,9 +448,10 @@
    "gemini_cli_oauth_title": "Gemini CLI OAuth",
    "gemini_cli_oauth_button": "开始 Gemini CLI 登录",
    "gemini_cli_oauth_hint": "通过 OAuth 流程登录 Google Gemini CLI 服务，自动获取并保存认证文件。",
-    "gemini_cli_project_id_label": "Google Cloud 项目 ID (可选):",
-    "gemini_cli_project_id_placeholder": "输入 Google Cloud 项目 ID (可选)",
-    "gemini_cli_project_id_hint": "如果指定了项目 ID，将使用该项目的认证信息。",
+    "gemini_cli_project_id_label": "Google Cloud 项目 ID:",
+    "gemini_cli_project_id_placeholder": "输入 Google Cloud 项目 ID",
+    "gemini_cli_project_id_hint": "请填写项目 ID，用于 Gemini CLI OAuth 登录。",
+    "gemini_cli_project_id_required": "请填写 Google Cloud 项目 ID。",
    "gemini_cli_oauth_url_label": "授权链接:",
    "gemini_cli_open_link": "打开链接",
    "gemini_cli_copy_link": "复制链接",
@@ -446,6 +471,16 @@
    "qwen_oauth_status_error": "认证失败:",
    "qwen_oauth_start_error": "启动 Qwen OAuth 失败:",
    "qwen_oauth_polling_error": "检查认证状态失败:",
+    "oauth_callback_label": "回调 URL",
+    "oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
+    "oauth_callback_hint": "远程浏览器模式：当授权跳转到 http://localhost:... 后，复制完整 URL 并提交到这里。",
+    "oauth_callback_button": "提交回调 URL",
+    "oauth_callback_required": "请先粘贴完整的回调 URL。",
+    "oauth_callback_success": "回调 URL 已提交，请继续等待认证。",
+    "oauth_callback_error": "提交回调 URL 失败:",
+    "oauth_callback_upgrade_hint": "请更新CLI Proxy API或检查连接",
+    "oauth_callback_status_success": "回调 URL 已提交，等待认证中...",
+    "oauth_callback_status_error": "回调 URL 提交失败:",
    "missing_state": "无法获取认证状态参数",
    "iflow_oauth_title": "iFlow OAuth",
    "iflow_oauth_button": "开始 iFlow 登录",
@@ -571,11 +606,15 @@
    "auto_refresh_disabled": "自动刷新已关闭",
    "load_more_hint": "向上滚动加载更多",
    "hidden_lines": "已隐藏 {{count}} 行",
+    "hide_management_logs": "屏蔽 {{prefix}} 日志",
    "search_placeholder": "搜索日志内容或关键字",
    "search_empty_title": "未找到匹配的日志",
-    "search_empty_desc": "尝试更换关键字或清空搜索条件。",
+    "search_empty_desc": "尝试更换关键字或清空筛选条件。",
+    "double_click_copy_hint": "双击复制日志原文",
+    "copy_success": "已复制日志原文",
+    "copy_failed": "复制失败",
    "lines": "行",
-    "removed": "已删除",
+    "removed": "已过滤",
    "upgrade_required_title": "需要升级 CLI Proxy API",
    "upgrade_required_desc": "当前服务器版本不支持日志查看功能，请升级到最新版本的 CLI Proxy API 以使用此功能。"
  },
@@ -630,7 +669,15 @@
    "version_is_latest": "当前已是最新版本",
    "version_check_error": "检查更新失败",
    "version_current_missing": "未获取到服务器版本号，暂无法比对",
-    "version_unknown": "未知"
+    "version_unknown": "未知",
+    "quick_links_title": "快捷链接",
+    "quick_links_desc": "访问项目仓库和文档，获取帮助和更新。",
+    "link_main_repo": "主程序仓库",
+    "link_main_repo_desc": "CLI Proxy API 核心程序源代码",
+    "link_webui_repo": "WebUI 仓库",
+    "link_webui_repo_desc": "管理中心前端界面源代码",
+    "link_docs": "使用教程",
+    "link_docs_desc": "配置指南和使用说明"
  },
  "notification": {
    "debug_updated": "调试设置已更新",
--- a/src/pages/AiProvidersPage.module.scss
+++ b/src/pages/AiProvidersPage.module.scss
@@ -404,8 +404,17 @@
  }

  .excludedModelTag {
-    background: rgba(251, 191, 36, 0.2);
-    border-color: rgba(251, 191, 36, 0.4);
+    background: rgba(251, 191, 36, 0.22);
+    border-color: rgba(251, 191, 36, 0.55);
+    color: #fde68a;
+
+    .modelName {
+      color: #fde68a;
+    }
+  }
+
+  .excludedModelsLabel {
+    color: #fde68a;
  }

  .apiKeyEntryCard {
--- a/src/pages/AiProvidersPage.tsx
+++ b/src/pages/AiProvidersPage.tsx
@@ -39,6 +39,7 @@ interface ModelEntry {

 interface OpenAIFormState {
  name: string;
+  prefix: string;
  baseUrl: string;
  headers: HeaderEntry[];
  testModel?: string;
@@ -49,7 +50,6 @@ interface OpenAIFormState {
 interface AmpcodeFormState {
  upstreamUrl: string;
  upstreamApiKey: string;
-  restrictManagementToLocalhost: boolean;
  forceModelMappings: boolean;
  mappingEntries: ModelEntry[];
 }
@@ -174,7 +174,6 @@ const entriesToAmpcodeMappings = (entries: ModelEntry[]): AmpcodeModelMapping[]
 const buildAmpcodeFormState = (ampcode?: AmpcodeConfig | null): AmpcodeFormState => ({
  upstreamUrl: ampcode?.upstreamUrl ?? '',
  upstreamApiKey: '',
-  restrictManagementToLocalhost: ampcode?.restrictManagementToLocalhost ?? true,
  forceModelMappings: ampcode?.forceModelMappings ?? false,
  mappingEntries: ampcodeMappingsToEntries(ampcode?.modelMappings),
 });
@@ -202,6 +201,7 @@ export function AiProvidersPage() {

  const [geminiForm, setGeminiForm] = useState<GeminiKeyConfig & { excludedText: string }>({
    apiKey: '',
+    prefix: '',
    baseUrl: '',
    headers: {},
    excludedModels: [],
@@ -211,6 +211,7 @@ export function AiProvidersPage() {
    ProviderKeyConfig & { modelEntries: ModelEntry[]; excludedText: string }
  >({
    apiKey: '',
+    prefix: '',
    baseUrl: '',
    proxyUrl: '',
    headers: {},
@@ -221,6 +222,7 @@ export function AiProvidersPage() {
  });
  const [openaiForm, setOpenaiForm] = useState<OpenAIFormState>({
    name: '',
+    prefix: '',
    baseUrl: '',
    headers: [],
    apiKeyEntries: [buildApiKeyEntry()],
@@ -319,6 +321,7 @@ export function AiProvidersPage() {
    setModal(null);
    setGeminiForm({
      apiKey: '',
+      prefix: '',
      baseUrl: '',
      headers: {},
      excludedModels: [],
@@ -326,6 +329,7 @@ export function AiProvidersPage() {
    });
    setProviderForm({
      apiKey: '',
+      prefix: '',
      baseUrl: '',
      proxyUrl: '',
      headers: {},
@@ -336,6 +340,7 @@ export function AiProvidersPage() {
    });
    setOpenaiForm({
      name: '',
+      prefix: '',
      baseUrl: '',
      headers: [],
      apiKeyEntries: [buildApiKeyEntry()],
@@ -412,6 +417,7 @@ export function AiProvidersPage() {
      const modelEntries = modelsToEntries(entry.models);
      setOpenaiForm({
        name: entry.name,
+        prefix: entry.prefix ?? '',
        baseUrl: entry.baseUrl,
        headers: headersToEntries(entry.headers),
        testModel: entry.testModel,
@@ -701,9 +707,6 @@ export function AiProvidersPage() {
        await ampcodeApi.clearUpstreamUrl();
      }

-      await ampcodeApi.updateRestrictManagementToLocalhost(
-        ampcodeForm.restrictManagementToLocalhost
-      );
      await ampcodeApi.updateForceModelMappings(ampcodeForm.forceModelMappings);

      if (ampcodeLoaded || ampcodeMappingsDirty) {
@@ -720,12 +723,18 @@ export function AiProvidersPage() {

      const previous = config?.ampcode ?? {};
      const next: AmpcodeConfig = {
-        ...previous,
        upstreamUrl: upstreamUrl || undefined,
-        restrictManagementToLocalhost: ampcodeForm.restrictManagementToLocalhost,
        forceModelMappings: ampcodeForm.forceModelMappings,
      };

+      if (previous.upstreamApiKey) {
+        next.upstreamApiKey = previous.upstreamApiKey;
+      }
+
+      if (Array.isArray(previous.modelMappings)) {
+        next.modelMappings = previous.modelMappings;
+      }
+
      if (overrideKey) {
        next.upstreamApiKey = overrideKey;
      }
@@ -756,6 +765,7 @@ export function AiProvidersPage() {
    try {
      const payload: GeminiKeyConfig = {
        apiKey: geminiForm.apiKey.trim(),
+        prefix: geminiForm.prefix?.trim() || undefined,
        baseUrl: geminiForm.baseUrl?.trim() || undefined,
        headers: buildHeaderObject(headersToEntries(geminiForm.headers as any)),
        excludedModels: parseExcludedModels(geminiForm.excludedText),
@@ -899,6 +909,7 @@ export function AiProvidersPage() {

      const payload: ProviderKeyConfig = {
        apiKey: providerForm.apiKey.trim(),
+        prefix: providerForm.prefix?.trim() || undefined,
        baseUrl,
        proxyUrl: providerForm.proxyUrl?.trim() || undefined,
        headers: buildHeaderObject(headersToEntries(providerForm.headers as any)),
@@ -969,6 +980,7 @@ export function AiProvidersPage() {
    try {
      const payload: OpenAIProviderConfig = {
        name: openaiForm.name.trim(),
+        prefix: openaiForm.prefix?.trim() || undefined,
        baseUrl: openaiForm.baseUrl.trim(),
        headers: buildHeaderObject(openaiForm.headers),
        apiKeyEntries: openaiForm.apiKeyEntries.map((entry) => ({
@@ -1175,6 +1187,12 @@ export function AiProvidersPage() {
                    <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
                    <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
                  </div>
+                  {item.prefix && (
+                    <div className={styles.fieldRow}>
+                      <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                      <span className={styles.fieldValue}>{item.prefix}</span>
+                    </div>
+                  )}
                  {/* Base URL 行 */}
                  {item.baseUrl && (
                    <div className={styles.fieldRow}>
@@ -1273,6 +1291,12 @@ export function AiProvidersPage() {
                    <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
                    <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
                  </div>
+                  {item.prefix && (
+                    <div className={styles.fieldRow}>
+                      <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                      <span className={styles.fieldValue}>{item.prefix}</span>
+                    </div>
+                  )}
                  {/* Base URL 行 */}
                  {item.baseUrl && (
                    <div className={styles.fieldRow}>
@@ -1378,6 +1402,12 @@ export function AiProvidersPage() {
                    <span className={styles.fieldLabel}>{t('common.api_key')}:</span>
                    <span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
                  </div>
+                  {item.prefix && (
+                    <div className={styles.fieldRow}>
+                      <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                      <span className={styles.fieldValue}>{item.prefix}</span>
+                    </div>
+                  )}
                  {/* Base URL 行 */}
                  {item.baseUrl && (
                    <div className={styles.fieldRow}>
@@ -1505,16 +1535,6 @@ export function AiProvidersPage() {
                    : t('common.not_set')}
                </span>
              </div>
-              <div className={styles.fieldRow}>
-                <span className={styles.fieldLabel}>
-                  {t('ai_providers.ampcode_restrict_management_label')}:
-                </span>
-                <span className={styles.fieldValue}>
-                  {(config?.ampcode?.restrictManagementToLocalhost ?? true)
-                    ? t('common.yes')
-                    : t('common.no')}
-                </span>
-              </div>
              <div className={styles.fieldRow}>
                <span className={styles.fieldLabel}>
                  {t('ai_providers.ampcode_force_model_mappings_label')}:
@@ -1576,6 +1596,12 @@ export function AiProvidersPage() {
              return (
                <Fragment>
                  <div className="item-title">{item.name}</div>
+                  {item.prefix && (
+                    <div className={styles.fieldRow}>
+                      <span className={styles.fieldLabel}>{t('common.prefix')}:</span>
+                      <span className={styles.fieldValue}>{item.prefix}</span>
+                    </div>
+                  )}
                  {/* Base URL 行 */}
                  <div className={styles.fieldRow}>
                    <span className={styles.fieldLabel}>{t('common.base_url')}:</span>
@@ -1739,18 +1765,6 @@ export function AiProvidersPage() {
            </Button>
          </div>

-          <div className="form-group">
-            <ToggleSwitch
-              label={t('ai_providers.ampcode_restrict_management_label')}
-              checked={ampcodeForm.restrictManagementToLocalhost}
-              onChange={(value) =>
-                setAmpcodeForm((prev) => ({ ...prev, restrictManagementToLocalhost: value }))
-              }
-              disabled={ampcodeModalLoading || ampcodeSaving}
-            />
-            <div className="hint">{t('ai_providers.ampcode_restrict_management_hint')}</div>
-          </div>
-
          <div className="form-group">
            <ToggleSwitch
              label={t('ai_providers.ampcode_force_model_mappings_label')}
@@ -1806,6 +1820,13 @@ export function AiProvidersPage() {
            value={geminiForm.apiKey}
            onChange={(e) => setGeminiForm((prev) => ({ ...prev, apiKey: e.target.value }))}
          />
+          <Input
+            label={t('ai_providers.prefix_label')}
+            placeholder={t('ai_providers.prefix_placeholder')}
+            value={geminiForm.prefix ?? ''}
+            onChange={(e) => setGeminiForm((prev) => ({ ...prev, prefix: e.target.value }))}
+            hint={t('ai_providers.prefix_hint')}
+          />
          <Input
            label={t('ai_providers.gemini_base_url_label')}
            placeholder={t('ai_providers.gemini_base_url_placeholder')}
@@ -1870,6 +1891,13 @@ export function AiProvidersPage() {
            value={providerForm.apiKey}
            onChange={(e) => setProviderForm((prev) => ({ ...prev, apiKey: e.target.value }))}
          />
+          <Input
+            label={t('ai_providers.prefix_label')}
+            placeholder={t('ai_providers.prefix_placeholder')}
+            value={providerForm.prefix ?? ''}
+            onChange={(e) => setProviderForm((prev) => ({ ...prev, prefix: e.target.value }))}
+            hint={t('ai_providers.prefix_hint')}
+          />
          <Input
            label={
              modal?.type === 'codex'
@@ -1897,19 +1925,21 @@ export function AiProvidersPage() {
            keyPlaceholder={t('common.custom_headers_key_placeholder')}
            valuePlaceholder={t('common.custom_headers_value_placeholder')}
          />
-          <div className="form-group">
-            <label>{t('ai_providers.claude_models_label')}</label>
-            <ModelInputList
-              entries={providerForm.modelEntries}
-              onChange={(entries) =>
-                setProviderForm((prev) => ({ ...prev, modelEntries: entries }))
-              }
-              addLabel={t('ai_providers.claude_models_add_btn')}
-              namePlaceholder={t('common.model_name_placeholder')}
-              aliasPlaceholder={t('common.model_alias_placeholder')}
-              disabled={saving}
-            />
-          </div>
+          {modal?.type === 'claude' && (
+            <div className="form-group">
+              <label>{t('ai_providers.claude_models_label')}</label>
+              <ModelInputList
+                entries={providerForm.modelEntries}
+                onChange={(entries) =>
+                  setProviderForm((prev) => ({ ...prev, modelEntries: entries }))
+                }
+                addLabel={t('ai_providers.claude_models_add_btn')}
+                namePlaceholder={t('common.model_name_placeholder')}
+                aliasPlaceholder={t('common.model_alias_placeholder')}
+                disabled={saving}
+              />
+            </div>
+          )}
          <div className="form-group">
            <label>{t('ai_providers.excluded_models_label')}</label>
            <textarea
@@ -1950,6 +1980,13 @@ export function AiProvidersPage() {
            value={openaiForm.name}
            onChange={(e) => setOpenaiForm((prev) => ({ ...prev, name: e.target.value }))}
          />
+          <Input
+            label={t('ai_providers.prefix_label')}
+            placeholder={t('ai_providers.prefix_placeholder')}
+            value={openaiForm.prefix ?? ''}
+            onChange={(e) => setOpenaiForm((prev) => ({ ...prev, prefix: e.target.value }))}
+            hint={t('ai_providers.prefix_hint')}
+          />
          <Input
            label={t('ai_providers.openai_add_modal_url_label')}
            value={openaiForm.baseUrl}
--- a/src/pages/AuthFilesPage.module.scss
+++ b/src/pages/AuthFilesPage.module.scss
@@ -417,8 +417,6 @@
  display: flex;
  flex-direction: column;
  gap: $spacing-sm;
-  max-height: 400px;
-  overflow-y: auto;
 }

 .modelItem {
--- a/src/pages/DashboardPage.module.scss
+++ b/src/pages/DashboardPage.module.scss
@@ -0,0 +1,320 @@
+@use 'sass:color';
+@use '../styles/variables.scss' as *;
+
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-lg;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.header {
+  margin-bottom: $spacing-sm;
+}
+
+.title {
+  font-size: 26px;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.subtitle {
+  font-size: 15px;
+  color: var(--text-secondary);
+  margin: $spacing-xs 0 0 0;
+}
+
+.connectionCard {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  padding: $spacing-md $spacing-lg;
+  flex-wrap: wrap;
+}
+
+.connectionStatus {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+.statusDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: $gray-400;
+
+  &.connected {
+    background: $success-color;
+    box-shadow: 0 0 8px rgba($success-color, 0.5);
+  }
+
+  &.connecting {
+    background: $warning-color;
+    animation: pulse 1s ease-in-out infinite;
+  }
+
+  &.disconnected {
+    background: $error-color;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.statusText {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.connectionInfo {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+}
+
+.serverUrl {
+  font-family: $font-mono;
+  font-size: 13px;
+  color: var(--text-secondary);
+  background: var(--bg-primary);
+  padding: 4px 10px;
+  border-radius: $radius-md;
+  border: 1px solid var(--border-color);
+}
+
+.serverVersion {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--primary-color);
+  background: rgba($primary-color, 0.1);
+  padding: 4px 10px;
+  border-radius: $radius-full;
+}
+
+.buildDate {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.statsGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: $spacing-md;
+
+  @media (max-width: 900px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 500px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.statCard {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-lg;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  text-decoration: none;
+  transition: all $transition-fast;
+
+  &:hover {
+    border-color: var(--primary-color);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+  }
+}
+
+.statIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: $radius-md;
+  background: var(--bg-secondary);
+  color: var(--primary-color);
+}
+
+.statContent {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.statValue {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--text-primary);
+}
+
+.statLabel {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.statSublabel {
+  font-size: 11px;
+  color: var(--text-secondary);
+  opacity: 0.8;
+  margin-top: 2px;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-md;
+}
+
+.sectionTitle {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.actionsGrid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.actionButton {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-sm;
+
+  // Button 内部的 span 需要 flex 对齐图标和文字
+  > span {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-sm;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.configGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: $spacing-sm;
+}
+
+.configItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-md;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+}
+
+.configLabel {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.configValue {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+
+  &.enabled {
+    color: $success-color;
+  }
+
+  &.disabled {
+    color: var(--text-secondary);
+  }
+}
+
+.configValueMono {
+  font-size: 12px;
+  font-family: $font-mono;
+  color: var(--text-secondary);
+  word-break: break-all;
+}
+
+.configItemFull {
+  grid-column: 1 / -1;
+}
+
+// Usage stats section
+.usageGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: $spacing-sm;
+}
+
+.usageCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-md;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  text-align: center;
+}
+
+.usageValue {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--primary-color);
+}
+
+.usageLabel {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+.usageLoading,
+.usageEmpty {
+  padding: $spacing-lg;
+  text-align: center;
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+}
+
+.viewMoreLink {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+  color: var(--primary-color);
+  text-decoration: none;
+  margin-top: $spacing-xs;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -0,0 +1,321 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  IconKey,
+  IconBot,
+  IconFileText,
+  IconSatellite
+} from '@/components/ui/icons';
+import { useAuthStore, useConfigStore, useModelsStore } from '@/stores';
+import { apiKeysApi, providersApi, authFilesApi } from '@/services/api';
+import styles from './DashboardPage.module.scss';
+
+interface QuickStat {
+  label: string;
+  value: number | string;
+  icon: React.ReactNode;
+  path: string;
+  loading?: boolean;
+  sublabel?: string;
+}
+
+interface ProviderStats {
+  gemini: number | null;
+  codex: number | null;
+  claude: number | null;
+  openai: number | null;
+}
+
+export function DashboardPage() {
+  const { t, i18n } = useTranslation();
+  const connectionStatus = useAuthStore((state) => state.connectionStatus);
+  const serverVersion = useAuthStore((state) => state.serverVersion);
+  const serverBuildDate = useAuthStore((state) => state.serverBuildDate);
+  const apiBase = useAuthStore((state) => state.apiBase);
+  const config = useConfigStore((state) => state.config);
+
+  const models = useModelsStore((state) => state.models);
+  const modelsLoading = useModelsStore((state) => state.loading);
+  const fetchModelsFromStore = useModelsStore((state) => state.fetchModels);
+
+  const [stats, setStats] = useState<{
+    apiKeys: number | null;
+    authFiles: number | null;
+  }>({
+    apiKeys: null,
+    authFiles: null
+  });
+
+  const [providerStats, setProviderStats] = useState<ProviderStats>({
+    gemini: null,
+    codex: null,
+    claude: null,
+    openai: null
+  });
+
+  const [loading, setLoading] = useState(true);
+
+  const apiKeysCache = useRef<string[]>([]);
+
+  useEffect(() => {
+    apiKeysCache.current = [];
+  }, [apiBase, config?.apiKeys]);
+
+  const normalizeApiKeyList = (input: any): string[] => {
+    if (!Array.isArray(input)) return [];
+    const seen = new Set<string>();
+    const keys: string[] = [];
+
+    input.forEach((item) => {
+      const value = typeof item === 'string' ? item : item?.['api-key'] ?? item?.apiKey ?? '';
+      const trimmed = String(value || '').trim();
+      if (!trimmed || seen.has(trimmed)) return;
+      seen.add(trimmed);
+      keys.push(trimmed);
+    });
+
+    return keys;
+  };
+
+  const resolveApiKeysForModels = useCallback(async () => {
+    if (apiKeysCache.current.length) {
+      return apiKeysCache.current;
+    }
+
+    const configKeys = normalizeApiKeyList(config?.apiKeys);
+    if (configKeys.length) {
+      apiKeysCache.current = configKeys;
+      return configKeys;
+    }
+
+    try {
+      const list = await apiKeysApi.list();
+      const normalized = normalizeApiKeyList(list);
+      if (normalized.length) {
+        apiKeysCache.current = normalized;
+      }
+      return normalized;
+    } catch {
+      return [];
+    }
+  }, [config?.apiKeys]);
+
+  const fetchModels = useCallback(async () => {
+    if (connectionStatus !== 'connected' || !apiBase) {
+      return;
+    }
+
+    try {
+      const apiKeys = await resolveApiKeysForModels();
+      const primaryKey = apiKeys[0];
+      await fetchModelsFromStore(apiBase, primaryKey);
+    } catch {
+      // Ignore model fetch errors on dashboard
+    }
+  }, [connectionStatus, apiBase, resolveApiKeysForModels, fetchModelsFromStore]);
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      setLoading(true);
+      try {
+        const [keysRes, filesRes, geminiRes, codexRes, claudeRes, openaiRes] = await Promise.allSettled([
+          apiKeysApi.list(),
+          authFilesApi.list(),
+          providersApi.getGeminiKeys(),
+          providersApi.getCodexConfigs(),
+          providersApi.getClaudeConfigs(),
+          providersApi.getOpenAIProviders()
+        ]);
+
+        setStats({
+          apiKeys: keysRes.status === 'fulfilled' ? keysRes.value.length : null,
+          authFiles: filesRes.status === 'fulfilled' ? filesRes.value.files.length : null
+        });
+
+        setProviderStats({
+          gemini: geminiRes.status === 'fulfilled' ? geminiRes.value.length : null,
+          codex: codexRes.status === 'fulfilled' ? codexRes.value.length : null,
+          claude: claudeRes.status === 'fulfilled' ? claudeRes.value.length : null,
+          openai: openaiRes.status === 'fulfilled' ? openaiRes.value.length : null
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (connectionStatus === 'connected') {
+      fetchStats();
+      fetchModels();
+    } else {
+      setLoading(false);
+    }
+  }, [connectionStatus, fetchModels]);
+
+  // Calculate total provider keys only when all provider stats are available.
+  const providerStatsReady =
+    providerStats.gemini !== null &&
+    providerStats.codex !== null &&
+    providerStats.claude !== null &&
+    providerStats.openai !== null;
+  const hasProviderStats =
+    providerStats.gemini !== null ||
+    providerStats.codex !== null ||
+    providerStats.claude !== null ||
+    providerStats.openai !== null;
+  const totalProviderKeys = providerStatsReady
+    ? (providerStats.gemini ?? 0) +
+      (providerStats.codex ?? 0) +
+      (providerStats.claude ?? 0) +
+      (providerStats.openai ?? 0)
+    : 0;
+
+  const quickStats: QuickStat[] = [
+    {
+      label: t('nav.api_keys'),
+      value: stats.apiKeys ?? '-',
+      icon: <IconKey size={24} />,
+      path: '/api-keys',
+      loading: loading && stats.apiKeys === null,
+      sublabel: t('dashboard.management_keys')
+    },
+    {
+      label: t('nav.ai_providers'),
+      value: loading ? '-' : providerStatsReady ? totalProviderKeys : '-',
+      icon: <IconBot size={24} />,
+      path: '/ai-providers',
+      loading: loading,
+      sublabel: hasProviderStats
+        ? t('dashboard.provider_keys_detail', {
+            gemini: providerStats.gemini ?? '-',
+            codex: providerStats.codex ?? '-',
+            claude: providerStats.claude ?? '-',
+            openai: providerStats.openai ?? '-'
+          })
+        : undefined
+    },
+    {
+      label: t('nav.auth_files'),
+      value: stats.authFiles ?? '-',
+      icon: <IconFileText size={24} />,
+      path: '/auth-files',
+      loading: loading && stats.authFiles === null,
+      sublabel: t('dashboard.oauth_credentials')
+    },
+    {
+      label: t('dashboard.available_models'),
+      value: modelsLoading ? '-' : models.length,
+      icon: <IconSatellite size={24} />,
+      path: '/system',
+      loading: modelsLoading,
+      sublabel: t('dashboard.available_models_desc')
+    }
+  ];
+
+  return (
+    <div className={styles.dashboard}>
+      <div className={styles.header}>
+        <h1 className={styles.title}>{t('dashboard.title')}</h1>
+        <p className={styles.subtitle}>{t('dashboard.subtitle')}</p>
+      </div>
+
+      <div className={styles.connectionCard}>
+        <div className={styles.connectionStatus}>
+          <span
+            className={`${styles.statusDot} ${
+              connectionStatus === 'connected'
+                ? styles.connected
+                : connectionStatus === 'connecting'
+                  ? styles.connecting
+                  : styles.disconnected
+            }`}
+          />
+          <span className={styles.statusText}>
+            {t(
+              connectionStatus === 'connected'
+                ? 'common.connected'
+                : connectionStatus === 'connecting'
+                  ? 'common.connecting'
+                  : 'common.disconnected'
+            )}
+          </span>
+        </div>
+        <div className={styles.connectionInfo}>
+          <span className={styles.serverUrl}>{apiBase || '-'}</span>
+          {serverVersion && <span className={styles.serverVersion}>v{serverVersion}</span>}
+          {serverBuildDate && (
+            <span className={styles.buildDate}>
+              {new Date(serverBuildDate).toLocaleDateString(i18n.language)}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.statsGrid}>
+        {quickStats.map((stat) => (
+          <Link key={stat.path} to={stat.path} className={styles.statCard}>
+            <div className={styles.statIcon}>{stat.icon}</div>
+            <div className={styles.statContent}>
+              <span className={styles.statValue}>{stat.loading ? '...' : stat.value}</span>
+              <span className={styles.statLabel}>{stat.label}</span>
+              {stat.sublabel && !stat.loading && (
+                <span className={styles.statSublabel}>{stat.sublabel}</span>
+              )}
+            </div>
+          </Link>
+        ))}
+      </div>
+
+      {config && (
+        <div className={styles.section}>
+          <h2 className={styles.sectionTitle}>{t('dashboard.current_config')}</h2>
+          <div className={styles.configGrid}>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.debug_enable')}</span>
+              <span className={`${styles.configValue} ${config.debug ? styles.enabled : styles.disabled}`}>
+                {config.debug ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.usage_statistics_enable')}</span>
+              <span className={`${styles.configValue} ${config.usageStatisticsEnabled ? styles.enabled : styles.disabled}`}>
+                {config.usageStatisticsEnabled ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.logging_to_file_enable')}</span>
+              <span className={`${styles.configValue} ${config.loggingToFile ? styles.enabled : styles.disabled}`}>
+                {config.loggingToFile ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.request_log_enable')}</span>
+              <span className={`${styles.configValue} ${config.requestLog ? styles.enabled : styles.disabled}`}>
+                {config.requestLog ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.retry_count_label')}</span>
+              <span className={styles.configValue}>{config.requestRetry ?? 0}</span>
+            </div>
+            <div className={styles.configItem}>
+              <span className={styles.configLabel}>{t('basic_settings.ws_auth_enable')}</span>
+              <span className={`${styles.configValue} ${config.wsAuth ? styles.enabled : styles.disabled}`}>
+                {config.wsAuth ? t('common.yes') : t('common.no')}
+              </span>
+            </div>
+            {config.proxyUrl && (
+              <div className={`${styles.configItem} ${styles.configItemFull}`}>
+                <span className={styles.configLabel}>{t('basic_settings.proxy_url_label')}</span>
+                <span className={styles.configValueMono}>{config.proxyUrl}</span>
+              </div>
+            )}
+          </div>
+          <Link to="/settings" className={styles.viewMoreLink}>
+            {t('dashboard.edit_settings')} →
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -44,12 +44,10 @@ export function LoginPage() {
    init();
  }, [detectedBase, restoreSession, storedBase, storedKey]);

-  useEffect(() => {
-    if (isAuthenticated) {
-      const redirect = (location.state as any)?.from?.pathname || '/';
-      navigate(redirect, { replace: true });
-    }
-  }, [isAuthenticated, navigate, location.state]);
+  if (isAuthenticated) {
+    const redirect = (location.state as any)?.from?.pathname || '/';
+    return <Navigate to={redirect} replace />;
+  }

  const handleUseCurrent = () => {
    setApiBase(detectedBase);
--- a/src/pages/LogsPage.module.scss
+++ b/src/pages/LogsPage.module.scss
@@ -28,6 +28,62 @@
  }
 }

+.filters {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  flex-wrap: wrap;
+  margin-bottom: $spacing-md;
+
+  :global(.form-group) {
+    margin: 0;
+  }
+}
+
+.searchWrapper {
+  flex: 1;
+  min-width: 220px;
+  max-width: 420px;
+}
+
+.searchInput {
+  padding-right: 44px !important;
+}
+
+.searchIcon {
+  color: var(--text-tertiary);
+  pointer-events: none;
+}
+
+.searchClear {
+  @include button-reset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: $radius-full;
+  color: var(--text-secondary);
+
+  &:hover {
+    background: var(--bg-secondary);
+  }
+}
+
+.filterStats {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.removedCount {
+  color: var(--text-tertiary);
+}
+
 .actionButton {
  white-space: nowrap;
 }
@@ -93,7 +149,9 @@
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color);
  border-left: 3px solid transparent;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+  cursor: copy;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  font-size: 12.5px;
  line-height: 1.45;
--- a/src/pages/LogsPage.tsx
+++ b/src/pages/LogsPage.tsx
@@ -1,12 +1,23 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { EmptyState } from '@/components/ui/EmptyState';
+import { Input } from '@/components/ui/Input';
 import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
-import { IconDownload, IconRefreshCw, IconTimer, IconTrash2 } from '@/components/ui/icons';
+import {
+  IconDownload,
+  IconEyeOff,
+  IconRefreshCw,
+  IconSearch,
+  IconTimer,
+  IconTrash2,
+  IconX,
+} from '@/components/ui/icons';
 import { useNotificationStore, useAuthStore } from '@/stores';
 import { logsApi } from '@/services/api/logs';
+import { MANAGEMENT_API_PREFIX } from '@/utils/constants';
+import { formatUnixTimestamp } from '@/utils/format';
 import styles from './LogsPage.module.scss';

 interface ErrorLogItem {
@@ -38,13 +49,16 @@ const LOG_SOURCE_REGEX = /^\[([^\]]+)\]/;
 const LOG_LATENCY_REGEX = /\b(\d+(?:\.\d+)?)(?:\s*)(µs|us|ms|s)\b/i;
 const LOG_IPV4_REGEX = /\b(?:\d{1,3}\.){3}\d{1,3}\b/;
 const LOG_IPV6_REGEX = /\b(?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}\b/i;
+const LOG_TIME_OF_DAY_REGEX = /^\d{1,2}:\d{2}:\d{2}(?:\.\d{1,3})?$/;
+const GIN_TIMESTAMP_SEGMENT_REGEX =
+  /^\[GIN\]\s+(\d{4})\/(\d{2})\/(\d{2})\s*-\s*(\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?)\s*$/;

 const HTTP_STATUS_PATTERNS: RegExp[] = [
  /\|\s*([1-5]\d{2})\s*\|/,
  /\b([1-5]\d{2})\s*-/,
  new RegExp(`\\b(?:${HTTP_METHODS.join('|')})\\s+\\S+\\s+([1-5]\\d{2})\\b`),
  /\b(?:status|code|http)[:\s]+([1-5]\d{2})\b/i,
-  /\b([1-5]\d{2})\s+(?:OK|Created|Accepted|No Content|Moved|Found|Bad Request|Unauthorized|Forbidden|Not Found|Method Not Allowed|Internal Server Error|Bad Gateway|Service Unavailable|Gateway Timeout)\b/i
+  /\b([1-5]\d{2})\s+(?:OK|Created|Accepted|No Content|Moved|Found|Bad Request|Unauthorized|Forbidden|Not Found|Method Not Allowed|Internal Server Error|Bad Gateway|Service Unavailable|Gateway Timeout)\b/i,
 ];

 const detectHttpStatusCode = (text: string): number | undefined => {
@@ -58,6 +72,31 @@ const detectHttpStatusCode = (text: string): number | undefined => {
  return undefined;
 };

+const extractIp = (text: string): string | undefined => {
+  const ipv4Match = text.match(LOG_IPV4_REGEX);
+  if (ipv4Match) return ipv4Match[0];
+
+  const ipv6Match = text.match(LOG_IPV6_REGEX);
+  if (!ipv6Match) return undefined;
+
+  const candidate = ipv6Match[0];
+
+  // Avoid treating time strings like "12:34:56" as IPv6 addresses.
+  if (LOG_TIME_OF_DAY_REGEX.test(candidate)) return undefined;
+
+  // If no compression marker is present, a valid IPv6 address must contain 8 hextets.
+  if (!candidate.includes('::') && candidate.split(':').length !== 8) return undefined;
+
+  return candidate;
+};
+
+const normalizeTimestampToSeconds = (value: string): string => {
+  const trimmed = value.trim();
+  const match = trimmed.match(/^(\d{4}-\d{2}-\d{2})[ T](\d{2}:\d{2}:\d{2})/);
+  if (!match) return trimmed;
+  return `${match[1]} ${match[2]}`;
+};
+
 type ParsedLogLine = {
  raw: string;
  timestamp?: string;
@@ -143,6 +182,23 @@ const parseLogLine = (raw: string): ParsedLogLine => {
      .filter(Boolean);
    const consumed = new Set<number>();

+    const ginIndex = segments.findIndex((segment) => GIN_TIMESTAMP_SEGMENT_REGEX.test(segment));
+    if (ginIndex >= 0) {
+      const match = segments[ginIndex].match(GIN_TIMESTAMP_SEGMENT_REGEX);
+      if (match) {
+        const ginTimestamp = `${match[1]}-${match[2]}-${match[3]} ${match[4]}`;
+        const normalizedGin = normalizeTimestampToSeconds(ginTimestamp);
+        const normalizedParsed = timestamp ? normalizeTimestampToSeconds(timestamp) : undefined;
+
+        if (!timestamp) {
+          timestamp = ginTimestamp;
+          consumed.add(ginIndex);
+        } else if (normalizedParsed === normalizedGin) {
+          consumed.add(ginIndex);
+        }
+      }
+    }
+
    // status code
    const statusIndex = segments.findIndex((segment) => /^\d{3}\b/.test(segment));
    if (statusIndex >= 0) {
@@ -167,13 +223,11 @@ const parseLogLine = (raw: string): ParsedLogLine => {
    }

    // ip
-    const ipIndex = segments.findIndex(
-      (segment) => LOG_IPV4_REGEX.test(segment) || LOG_IPV6_REGEX.test(segment)
-    );
+    const ipIndex = segments.findIndex((segment) => Boolean(extractIp(segment)));
    if (ipIndex >= 0) {
-      const match = segments[ipIndex].match(LOG_IPV4_REGEX) ?? segments[ipIndex].match(LOG_IPV6_REGEX);
-      if (match) {
-        ip = match[0];
+      const extracted = extractIp(segments[ipIndex]);
+      if (extracted) {
+        ip = extracted;
        consumed.add(ipIndex);
      }
    }
@@ -197,8 +251,7 @@ const parseLogLine = (raw: string): ParsedLogLine => {
    const latencyMatch = remaining.match(LOG_LATENCY_REGEX);
    if (latencyMatch) latency = `${latencyMatch[1]}${latencyMatch[2]}`;

-    const ipMatch = remaining.match(LOG_IPV4_REGEX) ?? remaining.match(LOG_IPV6_REGEX);
-    if (ipMatch) ip = ipMatch[0];
+    ip = extractIp(remaining);

    const parsed = extractHttpMethodAndPath(remaining);
    method = parsed.method;
@@ -207,6 +260,17 @@ const parseLogLine = (raw: string): ParsedLogLine => {

  if (!level) level = inferLogLevel(raw);

+  if (message) {
+    const match = message.match(GIN_TIMESTAMP_SEGMENT_REGEX);
+    if (match) {
+      const ginTimestamp = `${match[1]}-${match[2]}-${match[3]} ${match[4]}`;
+      if (!timestamp) timestamp = ginTimestamp;
+      if (normalizeTimestampToSeconds(timestamp) === normalizeTimestampToSeconds(ginTimestamp)) {
+        message = '';
+      }
+    }
+  }
+
  return {
    raw,
    timestamp,
@@ -217,10 +281,44 @@ const parseLogLine = (raw: string): ParsedLogLine => {
    ip,
    method,
    path,
-    message
+    message,
  };
 };

+const getErrorMessage = (err: unknown): string => {
+  if (err instanceof Error) return err.message;
+  if (typeof err === 'string') return err;
+  if (typeof err !== 'object' || err === null) return '';
+  if (!('message' in err)) return '';
+
+  const message = (err as { message?: unknown }).message;
+  return typeof message === 'string' ? message : '';
+};
+
+const copyToClipboard = async (text: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      textarea.style.left = '-9999px';
+      textarea.style.top = '0';
+      document.body.appendChild(textarea);
+      textarea.focus();
+      textarea.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(textarea);
+      return ok;
+    } catch {
+      return false;
+    }
+  }
+};
+
 export function LogsPage() {
  const { t } = useTranslation();
  const { showNotification } = useNotificationStore();
@@ -230,6 +328,9 @@ export function LogsPage() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [autoRefresh, setAutoRefresh] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const deferredSearchQuery = useDeferredValue(searchQuery);
+  const [hideManagementLogs, setHideManagementLogs] = useState(false);
  const [errorLogs, setErrorLogs] = useState<ErrorLogItem[]>([]);
  const [loadingErrors, setLoadingErrors] = useState(false);

@@ -268,9 +369,8 @@ export function LogsPage() {
    try {
      pendingScrollToBottomRef.current = !incremental || isNearBottom(logViewerRef.current);

-      const params = incremental && latestTimestampRef.current > 0
-        ? { after: latestTimestampRef.current }
-        : {};
+      const params =
+        incremental && latestTimestampRef.current > 0 ? { after: latestTimestampRef.current } : {};
      const data = await logsApi.fetchLogs(params);

      // 更新时间戳
@@ -302,10 +402,10 @@ export function LogsPage() {
        const visibleFrom = Math.max(buffer.length - INITIAL_DISPLAY_LINES, 0);
        setLogState({ buffer, visibleFrom });
      }
-    } catch (err: any) {
+    } catch (err: unknown) {
      console.error('Failed to load logs:', err);
      if (!incremental) {
-        setError(err?.message || t('logs.load_error'));
+        setError(getErrorMessage(err) || t('logs.load_error'));
      }
    } finally {
      if (!incremental) {
@@ -321,8 +421,12 @@ export function LogsPage() {
      setLogState({ buffer: [], visibleFrom: 0 });
      latestTimestampRef.current = 0;
      showNotification(t('logs.clear_success'), 'success');
-    } catch (err: any) {
-      showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(
+        `${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
    }
  };

@@ -348,16 +452,8 @@ export function LogsPage() {
    try {
      const res = await logsApi.fetchErrorLogs();
      // API 返回 { files: [...] }
-      const files = (res as any)?.files;
-      const list: ErrorLogItem[] = Array.isArray(files)
-        ? files.map((f: any) => ({
-            name: f.name,
-            size: f.size,
-            modified: f.modified
-          }))
-        : [];
-      setErrorLogs(list);
-    } catch (err: any) {
+      setErrorLogs(Array.isArray(res.files) ? res.files : []);
+    } catch (err: unknown) {
      console.error('Failed to load error logs:', err);
      // 静默失败,不影响主日志显示
      setErrorLogs([]);
@@ -377,8 +473,12 @@ export function LogsPage() {
      a.click();
      window.URL.revokeObjectURL(url);
      showNotification(t('logs.error_log_download_success'), 'success');
-    } catch (err: any) {
-      showNotification(`${t('notification.download_failed')}: ${err?.message || ''}`, 'error');
+    } catch (err: unknown) {
+      const message = getErrorMessage(err);
+      showNotification(
+        `${t('notification.download_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
    }
  };

@@ -415,23 +515,65 @@ export function LogsPage() {
    () => logState.buffer.slice(logState.visibleFrom),
    [logState.buffer, logState.visibleFrom]
  );
+
+  const trimmedSearchQuery = deferredSearchQuery.trim();
+  const isSearching = trimmedSearchQuery.length > 0;
+  const baseLines = isSearching ? logState.buffer : visibleLines;
+
+  const { filteredLines, removedCount } = useMemo(() => {
+    let working = baseLines;
+    let removed = 0;
+
+    if (hideManagementLogs) {
+      const next: string[] = [];
+      for (const line of working) {
+        if (line.includes(MANAGEMENT_API_PREFIX)) {
+          removed += 1;
+        } else {
+          next.push(line);
+        }
+      }
+      working = next;
+    }
+
+    if (trimmedSearchQuery) {
+      const queryLowered = trimmedSearchQuery.toLowerCase();
+      const next: string[] = [];
+      for (const line of working) {
+        if (line.toLowerCase().includes(queryLowered)) {
+          next.push(line);
+        } else {
+          removed += 1;
+        }
+      }
+      working = next;
+    }
+
+    return { filteredLines: working, removedCount: removed };
+  }, [baseLines, hideManagementLogs, trimmedSearchQuery]);
+
  const parsedVisibleLines = useMemo(
-    () => visibleLines.map((line) => parseLogLine(line)),
-    [visibleLines]
+    () => filteredLines.map((line) => parseLogLine(line)),
+    [filteredLines]
  );
-  const canLoadMore = logState.visibleFrom > 0;
+
+  const canLoadMore = !isSearching && logState.visibleFrom > 0;

  const handleLogScroll = () => {
    const node = logViewerRef.current;
    if (!node) return;
+    if (isSearching) return;
    if (!canLoadMore) return;
    if (pendingPrependScrollRef.current) return;
    if (node.scrollTop > LOAD_MORE_THRESHOLD_PX) return;

-    pendingPrependScrollRef.current = { scrollHeight: node.scrollHeight, scrollTop: node.scrollTop };
+    pendingPrependScrollRef.current = {
+      scrollHeight: node.scrollHeight,
+      scrollTop: node.scrollTop,
+    };
    setLogState((prev) => ({
      ...prev,
-      visibleFrom: Math.max(prev.visibleFrom - LOAD_MORE_LINES, 0)
+      visibleFrom: Math.max(prev.visibleFrom - LOAD_MORE_LINES, 0),
    }));
  };

@@ -445,185 +587,264 @@ export function LogsPage() {
    pendingPrependScrollRef.current = null;
  }, [logState.visibleFrom]);

+  const copyLogLine = async (raw: string) => {
+    const ok = await copyToClipboard(raw);
+    if (ok) {
+      showNotification(t('logs.copy_success', { defaultValue: 'Copied to clipboard' }), 'success');
+    } else {
+      showNotification(t('logs.copy_failed', { defaultValue: 'Copy failed' }), 'error');
+    }
+  };
+
  return (
    <div className={styles.container}>
      <h1 className={styles.pageTitle}>{t('logs.title')}</h1>
      <div className={styles.content}>
-      <Card
-        title={t('logs.log_content')}
-        extra={
-          <div className={styles.toolbar}>
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => loadLogs(false)}
-              disabled={disableControls || loading}
-              className={styles.actionButton}
-            >
-              <span className={styles.buttonContent}>
-                <IconRefreshCw size={16} />
-                {t('logs.refresh_button')}
-              </span>
-            </Button>
+        <Card
+          title={t('logs.log_content')}
+          extra={
+            <div className={styles.toolbar}>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => loadLogs(false)}
+                disabled={disableControls || loading}
+                className={styles.actionButton}
+              >
+                <span className={styles.buttonContent}>
+                  <IconRefreshCw size={16} />
+                  {t('logs.refresh_button')}
+                </span>
+              </Button>
+              <ToggleSwitch
+                checked={autoRefresh}
+                onChange={(value) => setAutoRefresh(value)}
+                disabled={disableControls}
+                label={
+                  <span className={styles.switchLabel}>
+                    <IconTimer size={16} />
+                    {t('logs.auto_refresh')}
+                  </span>
+                }
+              />
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={downloadLogs}
+                disabled={logState.buffer.length === 0}
+                className={styles.actionButton}
+              >
+                <span className={styles.buttonContent}>
+                  <IconDownload size={16} />
+                  {t('logs.download_button')}
+                </span>
+              </Button>
+              <Button
+                variant="danger"
+                size="sm"
+                onClick={clearLogs}
+                disabled={disableControls}
+                className={styles.actionButton}
+              >
+                <span className={styles.buttonContent}>
+                  <IconTrash2 size={16} />
+                  {t('logs.clear_button')}
+                </span>
+              </Button>
+            </div>
+          }
+        >
+          {error && <div className="error-box">{error}</div>}
+
+          <div className={styles.filters}>
+            <div className={styles.searchWrapper}>
+              <Input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder={t('logs.search_placeholder')}
+                className={styles.searchInput}
+                rightElement={
+                  searchQuery ? (
+                    <button
+                      type="button"
+                      className={styles.searchClear}
+                      onClick={() => setSearchQuery('')}
+                      title="Clear"
+                      aria-label="Clear"
+                    >
+                      <IconX size={16} />
+                    </button>
+                  ) : (
+                    <IconSearch size={16} className={styles.searchIcon} />
+                  )
+                }
+              />
+            </div>
+
            <ToggleSwitch
-              checked={autoRefresh}
-              onChange={(value) => setAutoRefresh(value)}
-              disabled={disableControls}
+              checked={hideManagementLogs}
+              onChange={setHideManagementLogs}
              label={
                <span className={styles.switchLabel}>
-                  <IconTimer size={16} />
-                  {t('logs.auto_refresh')}
+                  <IconEyeOff size={16} />
+                  {t('logs.hide_management_logs', { prefix: MANAGEMENT_API_PREFIX })}
                </span>
              }
            />
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={downloadLogs}
-              disabled={logState.buffer.length === 0}
-              className={styles.actionButton}
-            >
-              <span className={styles.buttonContent}>
-                <IconDownload size={16} />
-                {t('logs.download_button')}
+
+            <div className={styles.filterStats}>
+              <span>
+                {parsedVisibleLines.length} {t('logs.lines')}
              </span>
-            </Button>
-            <Button
-              variant="danger"
-              size="sm"
-              onClick={clearLogs}
-              disabled={disableControls}
-              className={styles.actionButton}
-            >
-              <span className={styles.buttonContent}>
-                <IconTrash2 size={16} />
-                {t('logs.clear_button')}
-              </span>
-            </Button>
-          </div>
-        }
-      >
-        {error && <div className="error-box">{error}</div>}
-        {loading ? (
-          <div className="hint">{t('logs.loading')}</div>
-        ) : logState.buffer.length > 0 ? (
-          <div ref={logViewerRef} className={styles.logPanel} onScroll={handleLogScroll}>
-            {canLoadMore && (
-              <div className={styles.loadMoreBanner}>
-                <span>{t('logs.load_more_hint')}</span>
-                <span className={styles.loadMoreCount}>
-                  {t('logs.hidden_lines', { count: logState.visibleFrom })}
+              {removedCount > 0 && (
+                <span className={styles.removedCount}>
+                  {t('logs.removed')} {removedCount}
                </span>
-              </div>
-            )}
-            <div className={styles.logList}>
-              {parsedVisibleLines.map((line, index) => {
-                const rowClassNames = [styles.logRow];
-                if (line.level === 'warn') rowClassNames.push(styles.rowWarn);
-                if (line.level === 'error' || line.level === 'fatal') rowClassNames.push(styles.rowError);
-                return (
-                  <div key={`${logState.visibleFrom + index}-${line.raw}`} className={rowClassNames.join(' ')}>
-                    <div className={styles.timestamp}>{line.timestamp || ''}</div>
-                    <div className={styles.rowMain}>
-                      <div className={styles.rowMeta}>
-                        {line.level && (
-                          <span
-                            className={[
-                              styles.badge,
-                              line.level === 'info' ? styles.levelInfo : '',
-                              line.level === 'warn' ? styles.levelWarn : '',
-                              line.level === 'error' || line.level === 'fatal' ? styles.levelError : '',
-                              line.level === 'debug' ? styles.levelDebug : '',
-                              line.level === 'trace' ? styles.levelTrace : ''
-                            ]
-                              .filter(Boolean)
-                              .join(' ')}
-                          >
-                            {line.level.toUpperCase()}
-                          </span>
-                        )}
-
-                        {line.source && (
-                          <span className={styles.source} title={line.source}>
-                            {line.source}
-                          </span>
-                        )}
-
-                        {typeof line.statusCode === 'number' && (
-                          <span
-                            className={[
-                              styles.badge,
-                              styles.statusBadge,
-                              line.statusCode >= 200 && line.statusCode < 300
-                                ? styles.statusSuccess
-                                : line.statusCode >= 300 && line.statusCode < 400
-                                  ? styles.statusInfo
-                                  : line.statusCode >= 400 && line.statusCode < 500
-                                    ? styles.statusWarn
-                                    : styles.statusError
-                            ].join(' ')}
-                          >
-                            {line.statusCode}
-                          </span>
-                        )}
-
-                        {line.latency && <span className={styles.pill}>{line.latency}</span>}
-                        {line.ip && <span className={styles.pill}>{line.ip}</span>}
-
-                        {line.method && (
-                          <span className={[styles.badge, styles.methodBadge].join(' ')}>
-                            {line.method}
-                          </span>
-                        )}
-                        {line.path && (
-                          <span className={styles.path} title={line.path}>
-                            {line.path}
-                          </span>
-                        )}
-                      </div>
-                      {line.message && <div className={styles.message}>{line.message}</div>}
-                    </div>
-                  </div>
-                );
-              })}
+              )}
            </div>
          </div>
-        ) : (
-          <EmptyState title={t('logs.empty_title')} description={t('logs.empty_desc')} />
-        )}
-      </Card>

-      <Card
-        title={t('logs.error_logs_modal_title')}
-        extra={
-          <Button variant="secondary" size="sm" onClick={loadErrorLogs} loading={loadingErrors}>
-            {t('common.refresh')}
-          </Button>
-        }
-      >
-        {errorLogs.length === 0 ? (
-          <div className="hint">{t('logs.error_logs_empty')}</div>
-        ) : (
-          <div className="item-list">
-            {errorLogs.map((item) => (
-              <div key={item.name} className="item-row">
-                <div className="item-meta">
-                  <div className="item-title">{item.name}</div>
-                  <div className="item-subtitle">
-                    {item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''}{' '}
-                    {item.modified ? new Date(item.modified).toLocaleString() : ''}
+          {loading ? (
+            <div className="hint">{t('logs.loading')}</div>
+          ) : logState.buffer.length > 0 && parsedVisibleLines.length > 0 ? (
+            <div ref={logViewerRef} className={styles.logPanel} onScroll={handleLogScroll}>
+              {canLoadMore && (
+                <div className={styles.loadMoreBanner}>
+                  <span>{t('logs.load_more_hint')}</span>
+                  <span className={styles.loadMoreCount}>
+                    {t('logs.hidden_lines', { count: logState.visibleFrom })}
+                  </span>
+                </div>
+              )}
+              <div className={styles.logList}>
+                {parsedVisibleLines.map((line, index) => {
+                  const rowClassNames = [styles.logRow];
+                  if (line.level === 'warn') rowClassNames.push(styles.rowWarn);
+                  if (line.level === 'error' || line.level === 'fatal')
+                    rowClassNames.push(styles.rowError);
+                  return (
+                    <div
+                      key={`${logState.visibleFrom + index}-${line.raw}`}
+                      className={rowClassNames.join(' ')}
+                      onDoubleClick={() => {
+                        void copyLogLine(line.raw);
+                      }}
+                      title={t('logs.double_click_copy_hint', {
+                        defaultValue: 'Double-click to copy',
+                      })}
+                    >
+                      <div className={styles.timestamp}>{line.timestamp || ''}</div>
+                      <div className={styles.rowMain}>
+                        <div className={styles.rowMeta}>
+                          {line.level && (
+                            <span
+                              className={[
+                                styles.badge,
+                                line.level === 'info' ? styles.levelInfo : '',
+                                line.level === 'warn' ? styles.levelWarn : '',
+                                line.level === 'error' || line.level === 'fatal'
+                                  ? styles.levelError
+                                  : '',
+                                line.level === 'debug' ? styles.levelDebug : '',
+                                line.level === 'trace' ? styles.levelTrace : '',
+                              ]
+                                .filter(Boolean)
+                                .join(' ')}
+                            >
+                              {line.level.toUpperCase()}
+                            </span>
+                          )}
+
+                          {line.source && (
+                            <span className={styles.source} title={line.source}>
+                              {line.source}
+                            </span>
+                          )}
+
+                          {typeof line.statusCode === 'number' && (
+                            <span
+                              className={[
+                                styles.badge,
+                                styles.statusBadge,
+                                line.statusCode >= 200 && line.statusCode < 300
+                                  ? styles.statusSuccess
+                                  : line.statusCode >= 300 && line.statusCode < 400
+                                    ? styles.statusInfo
+                                    : line.statusCode >= 400 && line.statusCode < 500
+                                      ? styles.statusWarn
+                                      : styles.statusError,
+                              ].join(' ')}
+                            >
+                              {line.statusCode}
+                            </span>
+                          )}
+
+                          {line.latency && <span className={styles.pill}>{line.latency}</span>}
+                          {line.ip && <span className={styles.pill}>{line.ip}</span>}
+
+                          {line.method && (
+                            <span className={[styles.badge, styles.methodBadge].join(' ')}>
+                              {line.method}
+                            </span>
+                          )}
+                          {line.path && (
+                            <span className={styles.path} title={line.path}>
+                              {line.path}
+                            </span>
+                          )}
+                        </div>
+                        {line.message && <div className={styles.message}>{line.message}</div>}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : logState.buffer.length > 0 ? (
+            <EmptyState
+              title={t('logs.search_empty_title')}
+              description={t('logs.search_empty_desc')}
+            />
+          ) : (
+            <EmptyState title={t('logs.empty_title')} description={t('logs.empty_desc')} />
+          )}
+        </Card>
+
+        <Card
+          title={t('logs.error_logs_modal_title')}
+          extra={
+            <Button variant="secondary" size="sm" onClick={loadErrorLogs} loading={loadingErrors}>
+              {t('common.refresh')}
+            </Button>
+          }
+        >
+          {errorLogs.length === 0 ? (
+            <div className="hint">{t('logs.error_logs_empty')}</div>
+          ) : (
+            <div className="item-list">
+              {errorLogs.map((item) => (
+                <div key={item.name} className="item-row">
+                  <div className="item-meta">
+                    <div className="item-title">{item.name}</div>
+                    <div className="item-subtitle">
+                      {item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''}{' '}
+                      {item.modified ? formatUnixTimestamp(item.modified) : ''}
+                    </div>
+                  </div>
+                  <div className="item-actions">
+                    <Button
+                      variant="secondary"
+                      size="sm"
+                      onClick={() => downloadErrorLog(item.name)}
+                    >
+                      {t('logs.error_logs_download')}
+                    </Button>
                  </div>
                </div>
-                <div className="item-actions">
-                  <Button variant="secondary" size="sm" onClick={() => downloadErrorLog(item.name)}>
-                    {t('logs.error_logs_download')}
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </Card>
+              ))}
+            </div>
+          )}
+        </Card>
      </div>
    </div>
  );
--- a/src/pages/OAuthPage.module.scss
+++ b/src/pages/OAuthPage.module.scss
@@ -59,3 +59,47 @@
    color: #3b82f6;
  }
 }
+
+.callbackSection {
+  margin-top: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.callbackActions {
+  display: flex;
+  gap: $spacing-md;
+}
+
+.authUrlBox {
+  background: var(--bg-secondary);
+  border: 1px dashed var(--border-color);
+  border-radius: $radius-md;
+  padding: $spacing-md;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.authUrlLabel {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.authUrlValue {
+  font-weight: 700;
+  color: var(--text-primary);
+  word-break: break-all;
+  overflow-wrap: anywhere;
+  line-height: 1.5;
+  max-width: 100%;
+}
+
+.authUrlActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacing-sm;
+  margin-top: $spacing-sm;
+}
--- a/src/pages/OAuthPage.tsx
+++ b/src/pages/OAuthPage.tsx
@@ -1,11 +1,10 @@
-import { useEffect, useRef, useState, useMemo } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { useNotificationStore } from '@/stores';
 import { oauthApi, type OAuthProvider, type IFlowCookieAuthResponse } from '@/services/api/oauth';
-import { isLocalhost } from '@/utils/connection';
 import styles from './OAuthPage.module.scss';

 interface ProviderState {
@@ -14,6 +13,12 @@ interface ProviderState {
  status?: 'idle' | 'waiting' | 'success' | 'error';
  error?: string;
  polling?: boolean;
+  projectId?: string;
+  projectIdError?: string;
+  callbackUrl?: string;
+  callbackSubmitting?: boolean;
+  callbackStatus?: 'success' | 'error';
+  callbackError?: string;
 }

 interface IFlowCookieState {
@@ -33,6 +38,8 @@ const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabe
  { id: 'iflow', titleKey: 'auth_login.iflow_oauth_title', hintKey: 'auth_login.iflow_oauth_hint', urlLabelKey: 'auth_login.iflow_oauth_url_label' }
 ];

+const CALLBACK_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
+
 export function OAuthPage() {
  const { t } = useTranslation();
  const { showNotification } = useNotificationStore();
@@ -40,15 +47,19 @@ export function OAuthPage() {
  const [iflowCookie, setIflowCookie] = useState<IFlowCookieState>({ cookie: '', loading: false });
  const timers = useRef<Record<string, number>>({});

-  // 检测是否为本地访问
-  const isLocal = useMemo(() => isLocalhost(window.location.hostname), []);
-
  useEffect(() => {
    return () => {
      Object.values(timers.current).forEach((timer) => window.clearInterval(timer));
    };
  }, []);

+  const updateProviderState = (provider: OAuthProvider, next: Partial<ProviderState>) => {
+    setStates((prev) => ({
+      ...prev,
+      [provider]: { ...(prev[provider] ?? {}), ...next }
+    }));
+  };
+
  const startPolling = (provider: OAuthProvider, state: string) => {
    if (timers.current[provider]) {
      clearInterval(timers.current[provider]);
@@ -57,27 +68,18 @@ export function OAuthPage() {
      try {
        const res = await oauthApi.getAuthStatus(state);
        if (res.status === 'ok') {
-          setStates((prev) => ({
-            ...prev,
-            [provider]: { ...prev[provider], status: 'success', polling: false }
-          }));
+          updateProviderState(provider, { status: 'success', polling: false });
          showNotification(t('auth_login.codex_oauth_status_success'), 'success');
          window.clearInterval(timer);
          delete timers.current[provider];
        } else if (res.status === 'error') {
-          setStates((prev) => ({
-            ...prev,
-            [provider]: { ...prev[provider], status: 'error', error: res.error, polling: false }
-          }));
+          updateProviderState(provider, { status: 'error', error: res.error, polling: false });
          showNotification(`${t('auth_login.codex_oauth_status_error')} ${res.error || ''}`, 'error');
          window.clearInterval(timer);
          delete timers.current[provider];
        }
      } catch (err: any) {
-        setStates((prev) => ({
-          ...prev,
-          [provider]: { ...prev[provider], status: 'error', error: err?.message, polling: false }
-        }));
+        updateProviderState(provider, { status: 'error', error: err?.message, polling: false });
        window.clearInterval(timer);
        delete timers.current[provider];
      }
@@ -86,24 +88,35 @@ export function OAuthPage() {
  };

  const startAuth = async (provider: OAuthProvider) => {
-    setStates((prev) => ({
-      ...prev,
-      [provider]: { ...prev[provider], status: 'waiting', polling: true, error: undefined }
-    }));
+    const projectId = provider === 'gemini-cli' ? (states[provider]?.projectId || '').trim() : undefined;
+    if (provider === 'gemini-cli' && !projectId) {
+      const message = t('auth_login.gemini_cli_project_id_required');
+      updateProviderState(provider, { projectIdError: message });
+      showNotification(message, 'warning');
+      return;
+    }
+    if (provider === 'gemini-cli') {
+      updateProviderState(provider, { projectIdError: undefined });
+    }
+    updateProviderState(provider, {
+      status: 'waiting',
+      polling: true,
+      error: undefined,
+      callbackStatus: undefined,
+      callbackError: undefined,
+      callbackUrl: ''
+    });
    try {
-      const res = await oauthApi.startAuth(provider);
-      setStates((prev) => ({
-        ...prev,
-        [provider]: { ...prev[provider], url: res.url, state: res.state, status: 'waiting', polling: true }
-      }));
+      const res = await oauthApi.startAuth(
+        provider,
+        provider === 'gemini-cli' ? { projectId: projectId! } : undefined
+      );
+      updateProviderState(provider, { url: res.url, state: res.state, status: 'waiting', polling: true });
      if (res.state) {
        startPolling(provider, res.state);
      }
    } catch (err: any) {
-      setStates((prev) => ({
-        ...prev,
-        [provider]: { ...prev[provider], status: 'error', error: err?.message, polling: false }
-      }));
+      updateProviderState(provider, { status: 'error', error: err?.message, polling: false });
      showNotification(`${t('auth_login.codex_oauth_start_error')} ${err?.message || ''}`, 'error');
    }
  };
@@ -118,6 +131,40 @@ export function OAuthPage() {
    }
  };

+  const submitCallback = async (provider: OAuthProvider) => {
+    const redirectUrl = (states[provider]?.callbackUrl || '').trim();
+    if (!redirectUrl) {
+      showNotification(t('auth_login.oauth_callback_required'), 'warning');
+      return;
+    }
+    updateProviderState(provider, {
+      callbackSubmitting: true,
+      callbackStatus: undefined,
+      callbackError: undefined
+    });
+    try {
+      await oauthApi.submitCallback(provider, redirectUrl);
+      updateProviderState(provider, { callbackSubmitting: false, callbackStatus: 'success' });
+      showNotification(t('auth_login.oauth_callback_success'), 'success');
+    } catch (err: any) {
+      const errorMessage =
+        err?.status === 404
+          ? t('auth_login.oauth_callback_upgrade_hint', {
+              defaultValue: 'Please update CLI Proxy API or check the connection.'
+            })
+          : err?.message;
+      updateProviderState(provider, {
+        callbackSubmitting: false,
+        callbackStatus: 'error',
+        callbackError: errorMessage
+      });
+      const notificationMessage = errorMessage
+        ? `${t('auth_login.oauth_callback_error')} ${errorMessage}`
+        : t('auth_login.oauth_callback_error');
+      showNotification(notificationMessage, 'error');
+    }
+  };
+
  const submitIflowCookie = async () => {
    const cookie = iflowCookie.cookie.trim();
    if (!cookie) {
@@ -164,36 +211,38 @@ export function OAuthPage() {
      <div className={styles.content}>
        {PROVIDERS.map((provider) => {
          const state = states[provider.id] || {};
-          // 非本地访问时禁用所有 OAuth 登录方式
-          const isDisabled = !isLocal;
+          const canSubmitCallback = CALLBACK_SUPPORTED.includes(provider.id) && Boolean(state.url);
          return (
-            <div
-              key={provider.id}
-              style={isDisabled ? { opacity: 0.6, pointerEvents: 'none' } : undefined}
-            >
+            <div key={provider.id}>
              <Card
                title={t(provider.titleKey)}
                extra={
-                  <Button
-                    onClick={() => startAuth(provider.id)}
-                    loading={state.polling}
-                    disabled={isDisabled}
-                  >
+                  <Button onClick={() => startAuth(provider.id)} loading={state.polling}>
                    {t('common.login')}
                  </Button>
                }
              >
                <div className="hint">{t(provider.hintKey)}</div>
-                {isDisabled && (
-                  <div className="status-badge warning" style={{ marginTop: 8 }}>
-                    {t('auth_login.remote_access_disabled')}
-                  </div>
+                {provider.id === 'gemini-cli' && (
+                  <Input
+                    label={t('auth_login.gemini_cli_project_id_label')}
+                    hint={t('auth_login.gemini_cli_project_id_hint')}
+                    value={state.projectId || ''}
+                    error={state.projectIdError}
+                    onChange={(e) =>
+                      updateProviderState(provider.id, {
+                        projectId: e.target.value,
+                        projectIdError: undefined
+                      })
+                    }
+                    placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
+                  />
                )}
-                {!isDisabled && state.url && (
-                  <div className="connection-box">
-                    <div className="label">{t(provider.urlLabelKey)}</div>
-                    <div className="value">{state.url}</div>
-                    <div className="item-actions" style={{ marginTop: 8 }}>
+                {state.url && (
+                  <div className={`connection-box ${styles.authUrlBox}`}>
+                    <div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div>
+                    <div className={styles.authUrlValue}>{state.url}</div>
+                    <div className={styles.authUrlActions}>
                      <Button variant="secondary" size="sm" onClick={() => copyLink(state.url!)}>
                        {t('auth_login.codex_copy_link')}
                      </Button>
@@ -207,7 +256,44 @@ export function OAuthPage() {
                    </div>
                  </div>
                )}
-                {!isDisabled && state.status && state.status !== 'idle' && (
+                {canSubmitCallback && (
+                  <div className={styles.callbackSection}>
+                    <Input
+                      label={t('auth_login.oauth_callback_label')}
+                      hint={t('auth_login.oauth_callback_hint')}
+                      value={state.callbackUrl || ''}
+                      onChange={(e) =>
+                        updateProviderState(provider.id, {
+                          callbackUrl: e.target.value,
+                          callbackStatus: undefined,
+                          callbackError: undefined
+                        })
+                      }
+                      placeholder={t('auth_login.oauth_callback_placeholder')}
+                    />
+                    <div className={styles.callbackActions}>
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => submitCallback(provider.id)}
+                        loading={state.callbackSubmitting}
+                      >
+                        {t('auth_login.oauth_callback_button')}
+                      </Button>
+                    </div>
+                    {state.callbackStatus === 'success' && state.status === 'waiting' && (
+                      <div className="status-badge success" style={{ marginTop: 8 }}>
+                        {t('auth_login.oauth_callback_status_success')}
+                      </div>
+                    )}
+                    {state.callbackStatus === 'error' && (
+                      <div className="status-badge error" style={{ marginTop: 8 }}>
+                        {t('auth_login.oauth_callback_status_error')} {state.callbackError || ''}
+                      </div>
+                    )}
+                  </div>
+                )}
+                {state.status && state.status !== 'idle' && (
                  <div className="status-badge" style={{ marginTop: 8 }}>
                    {state.status === 'success'
                      ? t('auth_login.codex_oauth_status_success')
--- a/src/pages/SystemPage.module.scss
+++ b/src/pages/SystemPage.module.scss
@@ -135,3 +135,81 @@
    }
  }
 }
+
+.quickLinks {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: $spacing-md;
+}
+
+.linkCard {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  padding: $spacing-md $spacing-lg;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-lg;
+  text-decoration: none;
+  color: inherit;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--bg-hover);
+    border-color: var(--primary-color);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+.linkIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: $radius-md;
+  background-color: var(--primary-color);
+  color: white;
+  flex-shrink: 0;
+
+  &.github {
+    background-color: #24292f;
+  }
+
+  &.docs {
+    background-color: #10b981;
+  }
+}
+
+.linkContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.linkTitle {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 2px;
+
+  svg {
+    opacity: 0.5;
+    flex-shrink: 0;
+  }
+}
+
+.linkDesc {
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
--- a/src/pages/SystemPage.tsx
+++ b/src/pages/SystemPage.tsx
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
+import { IconGithub, IconBookOpen, IconExternalLink, IconCode } from '@/components/ui/icons';
 import { useAuthStore, useConfigStore, useNotificationStore, useModelsStore } from '@/stores';
 import { apiKeysApi } from '@/services/api/apiKeys';
 import { classifyModels } from '@/utils/models';
@@ -148,6 +149,65 @@ export function SystemPage() {
        </div>
      </Card>

+      <Card title={t('system_info.quick_links_title')}>
+        <p className={styles.sectionDescription}>{t('system_info.quick_links_desc')}</p>
+        <div className={styles.quickLinks}>
+          <a
+            href="https://github.com/router-for-me/CLIProxyAPI"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.linkCard}
+          >
+            <div className={`${styles.linkIcon} ${styles.github}`}>
+              <IconGithub size={22} />
+            </div>
+            <div className={styles.linkContent}>
+              <div className={styles.linkTitle}>
+                {t('system_info.link_main_repo')}
+                <IconExternalLink size={14} />
+              </div>
+              <div className={styles.linkDesc}>{t('system_info.link_main_repo_desc')}</div>
+            </div>
+          </a>
+
+          <a
+            href="https://github.com/router-for-me/Cli-Proxy-API-Management-Center"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.linkCard}
+          >
+            <div className={`${styles.linkIcon} ${styles.github}`}>
+              <IconCode size={22} />
+            </div>
+            <div className={styles.linkContent}>
+              <div className={styles.linkTitle}>
+                {t('system_info.link_webui_repo')}
+                <IconExternalLink size={14} />
+              </div>
+              <div className={styles.linkDesc}>{t('system_info.link_webui_repo_desc')}</div>
+            </div>
+          </a>
+
+          <a
+            href="https://help.router-for.me/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={styles.linkCard}
+          >
+            <div className={`${styles.linkIcon} ${styles.docs}`}>
+              <IconBookOpen size={22} />
+            </div>
+            <div className={styles.linkContent}>
+              <div className={styles.linkTitle}>
+                {t('system_info.link_docs')}
+                <IconExternalLink size={14} />
+              </div>
+              <div className={styles.linkDesc}>{t('system_info.link_docs_desc')}</div>
+            </div>
+          </a>
+        </div>
+      </Card>
+
      <Card
        title={t('system_info.models_title')}
        extra={
--- a/src/pages/UsagePage.module.scss
+++ b/src/pages/UsagePage.module.scss
@@ -3,23 +3,11 @@

 .container {
  width: 100%;
+  min-height: 100%;
  display: flex;
  flex-direction: column;
-  gap: 16px;
-
-  // 覆盖Card组件样式 (80%比例)
-  :global(.card) {
-    padding: 12px;
-    border-radius: $radius-md;
-  }
-
-  :global(.card-header) {
-    margin-bottom: 10px;
-
-    .title {
-      font-size: 14px;
-    }
-  }
+  gap: 20px;
+  position: relative;
 }

 .header {
@@ -40,9 +28,9 @@
 .errorBox {
  padding: 10px;
  background-color: rgba(239, 68, 68, 0.1);
-  border: 1px solid var(--danger-color);
+  border: 1px solid var(--error-color);
  border-radius: $radius-sm;
-  color: var(--danger-color);
+  color: var(--error-color);
  font-size: 12px;
 }

@@ -53,15 +41,50 @@
  padding: 16px;
 }

-// Stats Grid - 五个卡片并排显示 (88%比例，放大10%)
+.loadingOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(243, 244, 246, 0.75);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+:global([data-theme='dark']) .loadingOverlay {
+  background: rgba(25, 25, 25, 0.72);
+}
+
+.loadingOverlayContent {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: $radius-lg;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  box-shadow: var(--shadow-lg);
+}
+
+.loadingOverlaySpinner {
+  border-color: rgba(59, 130, 246, 0.25);
+  border-top-color: var(--primary-color);
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
+}
+
+.loadingOverlayText {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+// Stats Grid
 .statsGrid {
  display: grid;
-  gap: 8px;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-
-  @include tablet {
-    grid-template-columns: repeat(3, 1fr);
-  }
+  gap: 14px;
+  grid-template-columns: repeat(12, minmax(0, 1fr));

  @include mobile {
    grid-template-columns: 1fr;
@@ -69,22 +92,69 @@
 }

 .statCard {
-  padding: 13px;
-  background-color: var(--bg-primary);
-  border-radius: $radius-md;
+  --accent: #3b82f6;
+  --accent-soft: rgba(59, 130, 246, 0.18);
+  --accent-border: rgba(59, 130, 246, 0.35);
+
+  grid-column: span 4;
+  position: relative;
+  padding: 18px;
+  background:
+    radial-gradient(120% 140% at 12% 0%, var(--accent-soft) 0%, rgba(0, 0, 0, 0) 62%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
+    var(--bg-primary);
+  border-radius: $radius-lg;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
-  gap: 5px;
-  min-height: 143px;
-  box-shadow: $shadow-sm;
+  gap: 10px;
+  min-height: 176px;
+  box-shadow: var(--shadow-lg);
  transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast;
  overflow: hidden;

+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 3px;
+    width: 100%;
+    background: linear-gradient(90deg, var(--accent), rgba(0, 0, 0, 0));
+    opacity: 0.95;
+  }
+
  &:hover {
    transform: translateY(-2px);
-    box-shadow: $shadow-md;
-    border-color: rgba(37, 99, 235, 0.2);
+    border-color: var(--accent-border);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
+  }
+
+  @include tablet {
+    grid-column: span 6;
+  }
+
+  @include mobile {
+    grid-column: auto;
+    min-height: 168px;
+  }
+}
+
+.statCard:nth-child(-n + 2) {
+  grid-column: span 6;
+
+  .statValue {
+    font-size: 32px;
+  }
+}
+
+@include mobile {
+  .statCard:nth-child(-n + 2) {
+    grid-column: auto;
+
+    .statValue {
+      font-size: 28px;
+    }
  }
 }

@@ -92,7 +162,7 @@
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
-  gap: 5px;
+  gap: 12px;
 }

 .statLabelGroup {
@@ -102,14 +172,16 @@
 }

 .statIconBadge {
-  width: 29px;
-  height: 29px;
-  border-radius: $radius-sm;
+  width: 34px;
+  height: 34px;
+  border-radius: $radius-md;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
+  background: var(--accent);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;

  svg {
@@ -128,18 +200,18 @@
 }

 .statLabel {
-  font-size: 11px;
-  color: var(--text-secondary);
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  text-transform: uppercase;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  font-weight: 700;
+  letter-spacing: 0.02em;
 }

 .statValue {
-  font-size: 20px;
-  font-weight: 700;
+  font-size: 28px;
+  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
 }

 .statValueRow {
@@ -186,8 +258,8 @@
 .statMetaRow {
  display: flex;
  flex-wrap: wrap;
-  gap: 4px;
-  font-size: 10px;
+  gap: 8px 10px;
+  font-size: 12px;
  color: var(--text-secondary);
 }

@@ -198,8 +270,8 @@
 }

 .statMetaDot {
-  width: 6px;
-  height: 6px;
+  width: 7px;
+  height: 7px;
  border-radius: 50%;
  background-color: var(--text-secondary);
 }
@@ -210,18 +282,18 @@

 .statTrend {
  margin-top: auto;
-  background: var(--bg-secondary, #f6f8fb);
-  border-radius: $radius-sm;
-  padding: 4px;
-  height: 44px;
+  background: var(--bg-tertiary);
+  border-radius: $radius-md;
+  padding: 8px;
+  height: 58px;
  border: 1px solid var(--border-color);
 }

 .statTrendPlaceholder {
  width: 100%;
  height: 100%;
-  background: var(--bg-tertiary, #eef1f6);
-  border-radius: $radius-sm;
+  background: var(--bg-secondary);
+  border-radius: $radius-md;
 }

 .sparkline {
@@ -257,7 +329,7 @@
  transition: background-color 0.15s ease;

  &:hover {
-    background-color: var(--bg-hover);
+    background-color: var(--bg-tertiary);
  }
 }

@@ -272,7 +344,7 @@
 .apiEndpoint {
  font-weight: 600;
  color: var(--text-primary);
-  font-size: 12px;
+  font-size: 13px;
  word-break: break-all;
 }

@@ -283,16 +355,17 @@
 }

 .apiBadge {
-  font-size: 10px;
+  font-size: 11px;
  color: var(--text-secondary);
-  background-color: var(--bg-tertiary);
-  padding: 1px 6px;
-  border-radius: $radius-sm;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  padding: 2px 8px;
+  border-radius: $radius-full;
 }

 .expandIcon {
  color: var(--text-secondary);
-  font-size: 10px;
+  font-size: 12px;
  margin-left: 6px;
 }

@@ -311,10 +384,11 @@
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
-  padding: 3px 6px;
+  padding: 8px 10px;
  background-color: var(--bg-primary);
-  border-radius: $radius-sm;
-  font-size: 11px;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  font-size: 12px;

  @include mobile {
    grid-template-columns: 1fr;
@@ -345,17 +419,17 @@
 .table {
  width: 100%;
  border-collapse: collapse;
-  font-size: 11px;
+  font-size: 12px;

  th, td {
-    padding: 6px 10px;
+    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
  }

  th {
    font-weight: 600;
-    color: var(--text-secondary);
+    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    white-space: nowrap;
  }
@@ -365,7 +439,7 @@
  }

  tbody tr:hover {
-    background-color: var(--bg-hover);
+    background-color: var(--bg-tertiary);
  }
 }

@@ -535,13 +609,13 @@
 }

 .chartWrapper {
-  padding: 12px;
-  background-color: var(--bg-primary);
-  border-radius: $radius-md;
+  padding: 14px;
+  background-color: var(--bg-secondary);
+  border-radius: $radius-lg;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
-  gap: 10px;
+  gap: 12px;
 }

 .chartLegend {
@@ -566,7 +640,11 @@
  gap: 6px;
  min-width: 0;
  max-width: 240px;
-  font-size: 11px;
+  padding: 4px 10px;
+  border-radius: $radius-full;
+  border: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  font-size: 12px;
  color: var(--text-secondary);

  @include mobile {
@@ -588,10 +666,10 @@
 }

 .chartArea {
-  height: 240px;
+  height: 280px;

  @include mobile {
-    height: 280px;
+    height: 320px;
  }
 }

@@ -616,63 +694,85 @@

 .periodButtons {
  display: flex;
-  gap: 3px;
+  gap: 6px;
 }

-// Chart Line Controls (80%比例)
-.chartLineControls {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 16px;
-  flex-wrap: wrap;
+.chartsGrid {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: minmax(0, 1fr);

-  @include mobile {
-    flex-direction: column;
+  > * {
+    min-width: 0;
+  }
+
+  @include desktop {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
 }

+.detailsGrid {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: minmax(0, 1fr);
+
+  > * {
+    min-width: 0;
+  }
+
+  @include desktop {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.chartLineHeader {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
 .chartLineList {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
 }

 .chartLineItem {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;

  @include mobile {
-    flex-direction: column;
-    align-items: flex-start;
+    grid-template-columns: 1fr;
+    align-items: stretch;
+    gap: 8px;
  }
 }

 .chartLineLabel {
-  font-size: 11px;
+  font-size: 12px;
  color: var(--text-secondary);
-  min-width: 48px;
-}
-
-.chartLineActions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
+  font-weight: 600;
+  min-width: 64px;
 }

 .chartLineCount {
-  font-size: 11px;
+  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
 }

 .chartLineHint {
-  font-size: 10px;
+  font-size: 12px;
  color: var(--text-tertiary);
-  margin: 6px 0 0 0;
-  font-style: italic;
+  margin: 10px 0 0 0;
 }
--- a/src/pages/UsagePage.tsx
+++ b/src/pages/UsagePage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useMemo } from 'react';
+import { useEffect, useState, useCallback, useMemo, type CSSProperties } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
  Chart as ChartJS,
@@ -16,8 +16,10 @@ import { Line } from 'react-chartjs-2';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { IconDiamond, IconDollarSign, IconSatellite, IconTimer, IconTrendingUp } from '@/components/ui/icons';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useThemeStore } from '@/stores';
 import { usageApi } from '@/services/api/usage';
 import {
  formatTokensInMillions,
@@ -55,13 +57,15 @@ interface UsagePayload {
  success_count?: number;
  failure_count?: number;
  total_tokens?: number;
-  apis?: Record<string, any>;
-  [key: string]: any;
+  apis?: Record<string, unknown>;
+  [key: string]: unknown;
 }

 export function UsagePage() {
  const { t } = useTranslation();
  const isMobile = useMediaQuery('(max-width: 768px)');
+  const theme = useThemeStore((state) => state.theme);
+  const isDark = theme === 'dark';

  const [usage, setUsage] = useState<UsagePayload | null>(null);
  const [loading, setLoading] = useState(true);
@@ -90,8 +94,9 @@ export function UsagePage() {
      const data = await usageApi.getUsage();
      const payload = data?.usage ?? data;
      setUsage(payload);
-    } catch (err: any) {
-      setError(err?.message || t('usage_stats.loading_error'));
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : t('usage_stats.loading_error');
+      setError(message);
    } finally {
      setLoading(false);
    }
@@ -200,23 +205,23 @@ export function UsagePage() {
  );

  const requestsSparkline = useMemo(
-    () => buildSparkline(buildLastHourSeries('requests'), '#2563eb', 'rgba(37, 99, 235, 0.12)'),
+    () => buildSparkline(buildLastHourSeries('requests'), '#3b82f6', 'rgba(59, 130, 246, 0.18)'),
    [buildLastHourSeries, buildSparkline]
  );
  const tokensSparkline = useMemo(
-    () => buildSparkline(buildLastHourSeries('tokens'), '#8b5cf6', 'rgba(139, 92, 246, 0.12)'),
+    () => buildSparkline(buildLastHourSeries('tokens'), '#8b5cf6', 'rgba(139, 92, 246, 0.18)'),
    [buildLastHourSeries, buildSparkline]
  );
  const rpmSparkline = useMemo(
-    () => buildSparkline(buildLastHourSeries('requests'), '#22c55e', 'rgba(34, 197, 94, 0.12)'),
+    () => buildSparkline(buildLastHourSeries('requests'), '#22c55e', 'rgba(34, 197, 94, 0.18)'),
    [buildLastHourSeries, buildSparkline]
  );
  const tpmSparkline = useMemo(
-    () => buildSparkline(buildLastHourSeries('tokens'), '#f97316', 'rgba(249, 115, 22, 0.12)'),
+    () => buildSparkline(buildLastHourSeries('tokens'), '#f97316', 'rgba(249, 115, 22, 0.18)'),
    [buildLastHourSeries, buildSparkline]
  );
  const costSparkline = useMemo(
-    () => buildSparkline(buildLastHourSeries('tokens'), '#f59e0b', 'rgba(245, 158, 11, 0.12)'),
+    () => buildSparkline(buildLastHourSeries('tokens'), '#f59e0b', 'rgba(245, 158, 11, 0.18)'),
    [buildLastHourSeries, buildSparkline]
  );

@@ -225,6 +230,13 @@ export function UsagePage() {
      const pointRadius = isMobile && period === 'hour' ? 0 : isMobile ? 2 : 4;
      const tickFontSize = isMobile ? 10 : 12;
      const maxTickLabelCount = isMobile ? (period === 'hour' ? 8 : 6) : period === 'hour' ? 12 : 10;
+      const gridColor = isDark ? 'rgba(255, 255, 255, 0.06)' : 'rgba(17, 24, 39, 0.06)';
+      const axisBorderColor = isDark ? 'rgba(255, 255, 255, 0.10)' : 'rgba(17, 24, 39, 0.10)';
+      const tickColor = isDark ? 'rgba(255, 255, 255, 0.72)' : 'rgba(17, 24, 39, 0.72)';
+      const tooltipBg = isDark ? 'rgba(17, 24, 39, 0.92)' : 'rgba(255, 255, 255, 0.98)';
+      const tooltipTitle = isDark ? '#ffffff' : '#111827';
+      const tooltipBody = isDark ? 'rgba(255, 255, 255, 0.86)' : '#374151';
+      const tooltipBorder = isDark ? 'rgba(255, 255, 255, 0.10)' : 'rgba(17, 24, 39, 0.10)';

      return {
        responsive: true,
@@ -234,11 +246,29 @@ export function UsagePage() {
          intersect: false
        },
        plugins: {
-          legend: { display: false }
+          legend: { display: false },
+          tooltip: {
+            backgroundColor: tooltipBg,
+            titleColor: tooltipTitle,
+            bodyColor: tooltipBody,
+            borderColor: tooltipBorder,
+            borderWidth: 1,
+            padding: 10,
+            displayColors: true,
+            usePointStyle: true
+          }
        },
        scales: {
          x: {
+            grid: {
+              color: gridColor,
+              drawTicks: false
+            },
+            border: {
+              color: axisBorderColor
+            },
            ticks: {
+              color: tickColor,
              font: { size: tickFontSize },
              maxRotation: isMobile ? 0 : 45,
              minRotation: isMobile ? 0 : 0,
@@ -270,7 +300,14 @@ export function UsagePage() {
          },
          y: {
            beginAtZero: true,
+            grid: {
+              color: gridColor
+            },
+            border: {
+              color: axisBorderColor
+            },
            ticks: {
+              color: tickColor,
              font: { size: tickFontSize }
            }
          }
@@ -288,7 +325,7 @@ export function UsagePage() {
        }
      };
    },
-    [isMobile]
+    [isDark, isMobile]
  );

  const requestsChartOptions = useMemo(
@@ -386,7 +423,9 @@ export function UsagePage() {
      key: 'requests',
      label: t('usage_stats.total_requests'),
      icon: <IconSatellite size={16} />,
-      accent: '#2563eb',
+      accent: '#3b82f6',
+      accentSoft: 'rgba(59, 130, 246, 0.18)',
+      accentBorder: 'rgba(59, 130, 246, 0.35)',
      value: loading ? '-' : (usage?.total_requests ?? 0).toLocaleString(),
      meta: (
        <>
@@ -407,6 +446,8 @@ export function UsagePage() {
      label: t('usage_stats.total_tokens'),
      icon: <IconDiamond size={16} />,
      accent: '#8b5cf6',
+      accentSoft: 'rgba(139, 92, 246, 0.18)',
+      accentBorder: 'rgba(139, 92, 246, 0.35)',
      value: loading ? '-' : formatTokensInMillions(usage?.total_tokens ?? 0),
      meta: (
        <>
@@ -425,6 +466,8 @@ export function UsagePage() {
      label: t('usage_stats.rpm_30m'),
      icon: <IconTimer size={16} />,
      accent: '#22c55e',
+      accentSoft: 'rgba(34, 197, 94, 0.18)',
+      accentBorder: 'rgba(34, 197, 94, 0.32)',
      value: loading ? '-' : formatPerMinuteValue(rateStats.rpm),
      meta: (
        <span className={styles.statMetaItem}>
@@ -438,6 +481,8 @@ export function UsagePage() {
      label: t('usage_stats.tpm_30m'),
      icon: <IconTrendingUp size={16} />,
      accent: '#f97316',
+      accentSoft: 'rgba(249, 115, 22, 0.18)',
+      accentBorder: 'rgba(249, 115, 22, 0.32)',
      value: loading ? '-' : formatPerMinuteValue(rateStats.tpm),
      meta: (
        <span className={styles.statMetaItem}>
@@ -451,6 +496,8 @@ export function UsagePage() {
      label: t('usage_stats.total_cost'),
      icon: <IconDollarSign size={16} />,
      accent: '#f59e0b',
+      accentSoft: 'rgba(245, 158, 11, 0.18)',
+      accentBorder: 'rgba(245, 158, 11, 0.32)',
      value: loading ? '-' : hasPrices ? formatUsd(totalCost) : '--',
      meta: (
        <>
@@ -470,6 +517,14 @@ export function UsagePage() {

  return (
    <div className={styles.container}>
+      {loading && !usage && (
+        <div className={styles.loadingOverlay} aria-busy="true">
+          <div className={styles.loadingOverlayContent}>
+            <LoadingSpinner size={28} className={styles.loadingOverlaySpinner} />
+            <span className={styles.loadingOverlayText}>{t('common.loading')}</span>
+          </div>
+        </div>
+      )}
      <div className={styles.header}>
        <h1 className={styles.pageTitle}>{t('usage_stats.title')}</h1>
        <Button
@@ -487,15 +542,22 @@ export function UsagePage() {
      {/* Stats Overview Cards */}
      <div className={styles.statsGrid}>
        {statsCards.map(card => (
-          <div key={card.key} className={styles.statCard}>
+          <div
+            key={card.key}
+            className={styles.statCard}
+            style={
+              {
+                '--accent': card.accent,
+                '--accent-soft': card.accentSoft,
+                '--accent-border': card.accentBorder
+              } as CSSProperties
+            }
+          >
            <div className={styles.statCardHeader}>
              <div className={styles.statLabelGroup}>
                <span className={styles.statLabel}>{card.label}</span>
              </div>
-              <span
-                className={styles.statIconBadge}
-                style={{ backgroundColor: card.accent }}
-              >
+              <span className={styles.statIconBadge}>
                {card.icon}
              </span>
            </div>
@@ -513,37 +575,10 @@ export function UsagePage() {
      </div>

      {/* Chart Line Selection */}
-      <Card title={t('usage_stats.chart_line_actions_label')}>
-        <div className={styles.chartLineControls}>
-          <div className={styles.chartLineList}>
-            {chartLines.map((line, index) => (
-              <div key={index} className={styles.chartLineItem}>
-                <span className={styles.chartLineLabel}>
-                  {t(`usage_stats.chart_line_label_${index + 1}`)}:
-                </span>
-                <select
-                  value={line}
-                  onChange={(e) => handleChartLineChange(index, e.target.value)}
-                  className={styles.select}
-                >
-                  <option value="all">{t('usage_stats.chart_line_all')}</option>
-                  {modelNames.map((name) => (
-                    <option key={name} value={name}>{name}</option>
-                  ))}
-                </select>
-                {chartLines.length > 1 && (
-                  <Button
-                    variant="danger"
-                    size="sm"
-                    onClick={() => handleRemoveChartLine(index)}
-                  >
-                    {t('usage_stats.chart_line_delete')}
-                  </Button>
-                )}
-              </div>
-            ))}
-          </div>
-          <div className={styles.chartLineActions}>
+      <Card
+        title={t('usage_stats.chart_line_actions_label')}
+        extra={
+          <div className={styles.chartLineHeader}>
            <span className={styles.chartLineCount}>
              {chartLines.length}/{MAX_CHART_LINES}
            </span>
@@ -556,208 +591,241 @@ export function UsagePage() {
              {t('usage_stats.chart_line_add')}
            </Button>
          </div>
+        }
+      >
+        <div className={styles.chartLineList}>
+          {chartLines.map((line, index) => (
+            <div key={index} className={styles.chartLineItem}>
+              <span className={styles.chartLineLabel}>
+                {t(`usage_stats.chart_line_label_${index + 1}`)}
+              </span>
+              <select
+                value={line}
+                onChange={(e) => handleChartLineChange(index, e.target.value)}
+                className={styles.select}
+              >
+                <option value="all">{t('usage_stats.chart_line_all')}</option>
+                {modelNames.map((name) => (
+                  <option key={name} value={name}>{name}</option>
+                ))}
+              </select>
+              {chartLines.length > 1 && (
+                <Button
+                  variant="danger"
+                  size="sm"
+                  onClick={() => handleRemoveChartLine(index)}
+                >
+                  {t('usage_stats.chart_line_delete')}
+                </Button>
+              )}
+            </div>
+          ))}
        </div>
        <p className={styles.chartLineHint}>{t('usage_stats.chart_line_hint')}</p>
      </Card>

-      {/* Requests Chart */}
-      <Card
-        title={t('usage_stats.requests_trend')}
-        extra={
-          <div className={styles.periodButtons}>
-            <Button
-              variant={requestsPeriod === 'hour' ? 'primary' : 'secondary'}
-              size="sm"
-              onClick={() => setRequestsPeriod('hour')}
-            >
-              {t('usage_stats.by_hour')}
-            </Button>
-            <Button
-              variant={requestsPeriod === 'day' ? 'primary' : 'secondary'}
-              size="sm"
-              onClick={() => setRequestsPeriod('day')}
-            >
-              {t('usage_stats.by_day')}
-            </Button>
-          </div>
-        }
-      >
-        {loading ? (
-          <div className={styles.hint}>{t('common.loading')}</div>
-        ) : requestsChartData.labels.length > 0 ? (
-          <div className={styles.chartWrapper}>
-            <div className={styles.chartLegend} aria-label="Chart legend">
-              {requestsChartData.datasets.map((dataset, index) => (
-                <div
-                  key={`${dataset.label}-${index}`}
-                  className={styles.legendItem}
-                  title={dataset.label}
-                >
-                  <span className={styles.legendDot} style={{ backgroundColor: dataset.borderColor }} />
-                  <span className={styles.legendLabel}>{dataset.label}</span>
-                </div>
-              ))}
+      <div className={styles.chartsGrid}>
+        {/* Requests Chart */}
+        <Card
+          title={t('usage_stats.requests_trend')}
+          extra={
+            <div className={styles.periodButtons}>
+              <Button
+                variant={requestsPeriod === 'hour' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setRequestsPeriod('hour')}
+              >
+                {t('usage_stats.by_hour')}
+              </Button>
+              <Button
+                variant={requestsPeriod === 'day' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setRequestsPeriod('day')}
+              >
+                {t('usage_stats.by_day')}
+              </Button>
            </div>
-            <div className={styles.chartArea}>
-              <div className={styles.chartScroller}>
-                <div
-                  className={styles.chartCanvas}
-                  style={
-                    requestsPeriod === 'hour'
-                      ? { minWidth: getHourChartMinWidth(requestsChartData.labels.length) }
-                      : undefined
-                  }
-                >
-                  <Line data={requestsChartData} options={requestsChartOptions} />
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className={styles.hint}>{t('usage_stats.no_data')}</div>
-        )}
-      </Card>
-
-      {/* Tokens Chart */}
-      <Card
-        title={t('usage_stats.tokens_trend')}
-        extra={
-          <div className={styles.periodButtons}>
-            <Button
-              variant={tokensPeriod === 'hour' ? 'primary' : 'secondary'}
-              size="sm"
-              onClick={() => setTokensPeriod('hour')}
-            >
-              {t('usage_stats.by_hour')}
-            </Button>
-            <Button
-              variant={tokensPeriod === 'day' ? 'primary' : 'secondary'}
-              size="sm"
-              onClick={() => setTokensPeriod('day')}
-            >
-              {t('usage_stats.by_day')}
-            </Button>
-          </div>
-        }
-      >
-        {loading ? (
-          <div className={styles.hint}>{t('common.loading')}</div>
-        ) : tokensChartData.labels.length > 0 ? (
-          <div className={styles.chartWrapper}>
-            <div className={styles.chartLegend} aria-label="Chart legend">
-              {tokensChartData.datasets.map((dataset, index) => (
-                <div
-                  key={`${dataset.label}-${index}`}
-                  className={styles.legendItem}
-                  title={dataset.label}
-                >
-                  <span className={styles.legendDot} style={{ backgroundColor: dataset.borderColor }} />
-                  <span className={styles.legendLabel}>{dataset.label}</span>
-                </div>
-              ))}
-            </div>
-            <div className={styles.chartArea}>
-              <div className={styles.chartScroller}>
-                <div
-                  className={styles.chartCanvas}
-                  style={
-                    tokensPeriod === 'hour'
-                      ? { minWidth: getHourChartMinWidth(tokensChartData.labels.length) }
-                      : undefined
-                  }
-                >
-                  <Line data={tokensChartData} options={tokensChartOptions} />
-                </div>
-              </div>
-            </div>
-          </div>
-        ) : (
-          <div className={styles.hint}>{t('usage_stats.no_data')}</div>
-        )}
-      </Card>
-
-      {/* API Key Statistics */}
-      <Card title={t('usage_stats.api_details')}>
-        {loading ? (
-          <div className={styles.hint}>{t('common.loading')}</div>
-        ) : apiStats.length > 0 ? (
-          <div className={styles.apiList}>
-            {apiStats.map((api) => (
-              <div key={api.endpoint} className={styles.apiItem}>
-                <div
-                  className={styles.apiHeader}
-                  onClick={() => toggleApiExpand(api.endpoint)}
-                >
-                  <div className={styles.apiInfo}>
-                    <span className={styles.apiEndpoint}>{api.endpoint}</span>
-                    <div className={styles.apiStats}>
-                      <span className={styles.apiBadge}>
-                        {t('usage_stats.requests_count')}: {api.totalRequests}
-                      </span>
-                      <span className={styles.apiBadge}>
-                        Tokens: {formatTokensInMillions(api.totalTokens)}
-                      </span>
-                      {hasPrices && api.totalCost > 0 && (
-                        <span className={styles.apiBadge}>
-                          {t('usage_stats.total_cost')}: {formatUsd(api.totalCost)}
-                        </span>
-                      )}
-                    </div>
+          }
+        >
+          {loading ? (
+            <div className={styles.hint}>{t('common.loading')}</div>
+          ) : requestsChartData.labels.length > 0 ? (
+            <div className={styles.chartWrapper}>
+              <div className={styles.chartLegend} aria-label="Chart legend">
+                {requestsChartData.datasets.map((dataset, index) => (
+                  <div
+                    key={`${dataset.label}-${index}`}
+                    className={styles.legendItem}
+                    title={dataset.label}
+                  >
+                    <span className={styles.legendDot} style={{ backgroundColor: dataset.borderColor }} />
+                    <span className={styles.legendLabel}>{dataset.label}</span>
                  </div>
-                  <span className={styles.expandIcon}>
-                    {expandedApis.has(api.endpoint) ? '▼' : '▶'}
-                  </span>
-                </div>
-                {expandedApis.has(api.endpoint) && (
-                  <div className={styles.apiModels}>
-                    {Object.entries(api.models).map(([model, stats]) => (
-                      <div key={model} className={styles.modelRow}>
-                        <span className={styles.modelName}>{model}</span>
-                        <span className={styles.modelStat}>{stats.requests} {t('usage_stats.requests_count')}</span>
-                        <span className={styles.modelStat}>{formatTokensInMillions(stats.tokens)}</span>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className={styles.hint}>{t('usage_stats.no_data')}</div>
-        )}
-      </Card>
-
-      {/* Model Statistics */}
-      <Card title={t('usage_stats.models')}>
-        {loading ? (
-          <div className={styles.hint}>{t('common.loading')}</div>
-        ) : modelStats.length > 0 ? (
-          <div className={styles.tableWrapper}>
-            <table className={styles.table}>
-              <thead>
-                <tr>
-                  <th>{t('usage_stats.model_name')}</th>
-                  <th>{t('usage_stats.requests_count')}</th>
-                  <th>{t('usage_stats.tokens_count')}</th>
-                  {hasPrices && <th>{t('usage_stats.total_cost')}</th>}
-                </tr>
-              </thead>
-              <tbody>
-                {modelStats.map((stat) => (
-                  <tr key={stat.model}>
-                    <td className={styles.modelCell}>{stat.model}</td>
-                    <td>{stat.requests.toLocaleString()}</td>
-                    <td>{formatTokensInMillions(stat.tokens)}</td>
-                    {hasPrices && <td>{stat.cost > 0 ? formatUsd(stat.cost) : '--'}</td>}
-                  </tr>
                ))}
-              </tbody>
-            </table>
-          </div>
-        ) : (
-          <div className={styles.hint}>{t('usage_stats.no_data')}</div>
-        )}
-      </Card>
+              </div>
+              <div className={styles.chartArea}>
+                <div className={styles.chartScroller}>
+                  <div
+                    className={styles.chartCanvas}
+                    style={
+                      requestsPeriod === 'hour'
+                        ? { minWidth: getHourChartMinWidth(requestsChartData.labels.length) }
+                        : undefined
+                    }
+                  >
+                    <Line data={requestsChartData} options={requestsChartOptions} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+          )}
+        </Card>
+
+        {/* Tokens Chart */}
+        <Card
+          title={t('usage_stats.tokens_trend')}
+          extra={
+            <div className={styles.periodButtons}>
+              <Button
+                variant={tokensPeriod === 'hour' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setTokensPeriod('hour')}
+              >
+                {t('usage_stats.by_hour')}
+              </Button>
+              <Button
+                variant={tokensPeriod === 'day' ? 'primary' : 'secondary'}
+                size="sm"
+                onClick={() => setTokensPeriod('day')}
+              >
+                {t('usage_stats.by_day')}
+              </Button>
+            </div>
+          }
+        >
+          {loading ? (
+            <div className={styles.hint}>{t('common.loading')}</div>
+          ) : tokensChartData.labels.length > 0 ? (
+            <div className={styles.chartWrapper}>
+              <div className={styles.chartLegend} aria-label="Chart legend">
+                {tokensChartData.datasets.map((dataset, index) => (
+                  <div
+                    key={`${dataset.label}-${index}`}
+                    className={styles.legendItem}
+                    title={dataset.label}
+                  >
+                    <span className={styles.legendDot} style={{ backgroundColor: dataset.borderColor }} />
+                    <span className={styles.legendLabel}>{dataset.label}</span>
+                  </div>
+                ))}
+              </div>
+              <div className={styles.chartArea}>
+                <div className={styles.chartScroller}>
+                  <div
+                    className={styles.chartCanvas}
+                    style={
+                      tokensPeriod === 'hour'
+                        ? { minWidth: getHourChartMinWidth(tokensChartData.labels.length) }
+                        : undefined
+                    }
+                  >
+                    <Line data={tokensChartData} options={tokensChartOptions} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+          )}
+        </Card>
+      </div>
+
+      <div className={styles.detailsGrid}>
+        {/* API Key Statistics */}
+        <Card title={t('usage_stats.api_details')}>
+          {loading ? (
+            <div className={styles.hint}>{t('common.loading')}</div>
+          ) : apiStats.length > 0 ? (
+            <div className={styles.apiList}>
+              {apiStats.map((api) => (
+                <div key={api.endpoint} className={styles.apiItem}>
+                  <div
+                    className={styles.apiHeader}
+                    onClick={() => toggleApiExpand(api.endpoint)}
+                  >
+                    <div className={styles.apiInfo}>
+                      <span className={styles.apiEndpoint}>{api.endpoint}</span>
+                      <div className={styles.apiStats}>
+                        <span className={styles.apiBadge}>
+                          {t('usage_stats.requests_count')}: {api.totalRequests}
+                        </span>
+                        <span className={styles.apiBadge}>
+                          Tokens: {formatTokensInMillions(api.totalTokens)}
+                        </span>
+                        {hasPrices && api.totalCost > 0 && (
+                          <span className={styles.apiBadge}>
+                            {t('usage_stats.total_cost')}: {formatUsd(api.totalCost)}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <span className={styles.expandIcon}>
+                      {expandedApis.has(api.endpoint) ? '▼' : '▶'}
+                    </span>
+                  </div>
+                  {expandedApis.has(api.endpoint) && (
+                    <div className={styles.apiModels}>
+                      {Object.entries(api.models).map(([model, stats]) => (
+                        <div key={model} className={styles.modelRow}>
+                          <span className={styles.modelName}>{model}</span>
+                          <span className={styles.modelStat}>{stats.requests} {t('usage_stats.requests_count')}</span>
+                          <span className={styles.modelStat}>{formatTokensInMillions(stats.tokens)}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+          )}
+        </Card>
+
+        {/* Model Statistics */}
+        <Card title={t('usage_stats.models')}>
+          {loading ? (
+            <div className={styles.hint}>{t('common.loading')}</div>
+          ) : modelStats.length > 0 ? (
+            <div className={styles.tableWrapper}>
+              <table className={styles.table}>
+                <thead>
+                  <tr>
+                    <th>{t('usage_stats.model_name')}</th>
+                    <th>{t('usage_stats.requests_count')}</th>
+                    <th>{t('usage_stats.tokens_count')}</th>
+                    {hasPrices && <th>{t('usage_stats.total_cost')}</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {modelStats.map((stat) => (
+                    <tr key={stat.model}>
+                      <td className={styles.modelCell}>{stat.model}</td>
+                      <td>{stat.requests.toLocaleString()}</td>
+                      <td>{formatTokensInMillions(stat.tokens)}</td>
+                      {hasPrices && <td>{stat.cost > 0 ? formatUsd(stat.cost) : '--'}</td>}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+          )}
+        </Card>
+      </div>

      {/* Model Pricing Configuration */}
      <Card title={t('usage_stats.model_price_settings')}>
--- a/src/services/api/ampcode.ts
+++ b/src/services/api/ampcode.ts
@@ -18,9 +18,6 @@ export const ampcodeApi = {
  updateUpstreamApiKey: (apiKey: string) => apiClient.put('/ampcode/upstream-api-key', { value: apiKey }),
  clearUpstreamApiKey: () => apiClient.delete('/ampcode/upstream-api-key'),

-  updateRestrictManagementToLocalhost: (enabled: boolean) =>
-    apiClient.put('/ampcode/restrict-management-to-localhost', { value: enabled }),
-
  async getModelMappings(): Promise<AmpcodeModelMapping[]> {
    const data = await apiClient.get('/ampcode/model-mappings');
    const list = data?.['model-mappings'] ?? data?.modelMappings ?? data?.items ?? data;
--- a/src/services/api/client.ts
+++ b/src/services/api/client.ts
@@ -82,6 +82,10 @@ class ApiClient {
      (config) => {
        // 设置 baseURL
        config.baseURL = this.apiBase;
+        if (config.url) {
+          // Normalize deprecated Gemini endpoint to the current path.
+          config.url = config.url.replace(/\/generative-language-api-key\b/g, '/gemini-api-key');
+        }

        // 添加认证头
        if (this.managementKey) {
--- a/src/services/api/logs.ts
+++ b/src/services/api/logs.ts
@@ -3,6 +3,7 @@
 */

 import { apiClient } from './client';
+import { LOGS_TIMEOUT_MS } from '@/utils/constants';

 export interface LogsQuery {
  after?: number;
@@ -14,16 +15,28 @@ export interface LogsResponse {
  'latest-timestamp': number;
 }

+export interface ErrorLogFile {
+  name: string;
+  size?: number;
+  modified?: number;
+}
+
+export interface ErrorLogsResponse {
+  files?: ErrorLogFile[];
+}
+
 export const logsApi = {
  fetchLogs: (params: LogsQuery = {}): Promise<LogsResponse> =>
-    apiClient.get('/logs', { params }),
+    apiClient.get('/logs', { params, timeout: LOGS_TIMEOUT_MS }),

  clearLogs: () => apiClient.delete('/logs'),

-  fetchErrorLogs: () => apiClient.get('/request-error-logs'),
+  fetchErrorLogs: (): Promise<ErrorLogsResponse> =>
+    apiClient.get('/request-error-logs', { timeout: LOGS_TIMEOUT_MS }),

  downloadErrorLog: (filename: string) =>
    apiClient.getRaw(`/request-error-logs/${encodeURIComponent(filename)}`, {
-      responseType: 'blob'
-    })
+      responseType: 'blob',
+      timeout: LOGS_TIMEOUT_MS
+    }),
 };
--- a/src/services/api/oauth.ts
+++ b/src/services/api/oauth.ts
@@ -17,6 +17,10 @@ export interface OAuthStartResponse {
  state?: string;
 }

+export interface OAuthCallbackResponse {
+  status: 'ok';
+}
+
 export interface IFlowCookieAuthResponse {
  status: 'ok' | 'error';
  error?: string;
@@ -27,18 +31,37 @@ export interface IFlowCookieAuthResponse {
 }

 const WEBUI_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
+const CALLBACK_PROVIDER_MAP: Partial<Record<OAuthProvider, string>> = {
+  'gemini-cli': 'gemini'
+};

 export const oauthApi = {
-  startAuth: (provider: OAuthProvider) =>
-    apiClient.get<OAuthStartResponse>(`/${provider}-auth-url`, {
-      params: WEBUI_SUPPORTED.includes(provider) ? { is_webui: true } : undefined
-    }),
+  startAuth: (provider: OAuthProvider, options?: { projectId?: string }) => {
+    const params: Record<string, string | boolean> = {};
+    if (WEBUI_SUPPORTED.includes(provider)) {
+      params.is_webui = true;
+    }
+    if (provider === 'gemini-cli' && options?.projectId) {
+      params.project_id = options.projectId;
+    }
+    return apiClient.get<OAuthStartResponse>(`/${provider}-auth-url`, {
+      params: Object.keys(params).length ? params : undefined
+    });
+  },

  getAuthStatus: (state: string) =>
    apiClient.get<{ status: 'ok' | 'wait' | 'error'; error?: string }>(`/get-auth-status`, {
      params: { state }
    }),

+  submitCallback: (provider: OAuthProvider, redirectUrl: string) => {
+    const callbackProvider = CALLBACK_PROVIDER_MAP[provider] ?? provider;
+    return apiClient.post<OAuthCallbackResponse>('/oauth-callback', {
+      provider: callbackProvider,
+      redirect_url: redirectUrl
+    });
+  },
+
  /** iFlow cookie 认证 */
  iflowCookieAuth: (cookie: string) =>
    apiClient.post<IFlowCookieAuthResponse>('/iflow-auth-url', { cookie })
--- a/src/services/api/providers.ts
+++ b/src/services/api/providers.ts
@@ -48,6 +48,7 @@ const serializeApiKeyEntry = (entry: ApiKeyEntry) => {

 const serializeProviderKey = (config: ProviderKeyConfig) => {
  const payload: Record<string, any> = { 'api-key': config.apiKey };
+  if (config.prefix?.trim()) payload.prefix = config.prefix.trim();
  if (config.baseUrl) payload['base-url'] = config.baseUrl;
  if (config.proxyUrl) payload['proxy-url'] = config.proxyUrl;
  const headers = serializeHeaders(config.headers);
@@ -62,6 +63,7 @@ const serializeProviderKey = (config: ProviderKeyConfig) => {

 const serializeGeminiKey = (config: GeminiKeyConfig) => {
  const payload: Record<string, any> = { 'api-key': config.apiKey };
+  if (config.prefix?.trim()) payload.prefix = config.prefix.trim();
  if (config.baseUrl) payload['base-url'] = config.baseUrl;
  const headers = serializeHeaders(config.headers);
  if (headers) payload.headers = headers;
@@ -79,6 +81,7 @@ const serializeOpenAIProvider = (provider: OpenAIProviderConfig) => {
      ? provider.apiKeyEntries.map((entry) => serializeApiKeyEntry(entry))
      : []
  };
+  if (provider.prefix?.trim()) payload.prefix = provider.prefix.trim();
  const headers = serializeHeaders(provider.headers);
  if (headers) payload.headers = headers;
  const models = serializeModelAliases(provider.models);
--- a/src/services/api/transformers.ts
+++ b/src/services/api/transformers.ts
@@ -70,6 +70,12 @@ const normalizeExcludedModels = (input: any): string[] => {
  return normalized;
 };

+const normalizePrefix = (value: any): string | undefined => {
+  if (value === undefined || value === null) return undefined;
+  const trimmed = String(value).trim();
+  return trimmed ? trimmed : undefined;
+};
+
 const normalizeApiKeyEntry = (entry: any): ApiKeyEntry | null => {
  if (!entry) return null;
  const apiKey = entry['api-key'] ?? entry.apiKey ?? entry.key ?? (typeof entry === 'string' ? entry : '');
@@ -93,6 +99,8 @@ const normalizeProviderKeyConfig = (item: any): ProviderKeyConfig | null => {
  if (!trimmed) return null;

  const config: ProviderKeyConfig = { apiKey: trimmed };
+  const prefix = normalizePrefix(item.prefix ?? item['prefix']);
+  if (prefix) config.prefix = prefix;
  const baseUrl = item['base-url'] ?? item.baseUrl;
  const proxyUrl = item['proxy-url'] ?? item.proxyUrl;
  if (baseUrl) config.baseUrl = String(baseUrl);
@@ -118,6 +126,8 @@ const normalizeGeminiKeyConfig = (item: any): GeminiKeyConfig | null => {
  if (!trimmed) return null;

  const config: GeminiKeyConfig = { apiKey: trimmed };
+  const prefix = normalizePrefix(item.prefix ?? item['prefix']);
+  if (prefix) config.prefix = prefix;
  const baseUrl = item['base-url'] ?? item.baseUrl ?? item['base_url'];
  if (baseUrl) config.baseUrl = String(baseUrl);
  const headers = normalizeHeaders(item.headers);
@@ -155,6 +165,8 @@ const normalizeOpenAIProvider = (provider: any): OpenAIProviderConfig | null =>
    apiKeyEntries
  };

+  const prefix = normalizePrefix(provider.prefix ?? provider['prefix']);
+  if (prefix) result.prefix = prefix;
  if (headers) result.headers = headers;
  if (models.length) result.models = models;
  if (priority !== undefined) result.priority = Number(priority);
@@ -205,15 +217,6 @@ const normalizeAmpcodeConfig = (payload: any): AmpcodeConfig | undefined => {
  const upstreamApiKey = source['upstream-api-key'] ?? source.upstreamApiKey ?? source['upstream_api_key'];
  if (upstreamApiKey) config.upstreamApiKey = String(upstreamApiKey);

-  const restrictManagementToLocalhost = normalizeBoolean(
-    source['restrict-management-to-localhost'] ??
-      source.restrictManagementToLocalhost ??
-      source['restrict_management_to_localhost']
-  );
-  if (restrictManagementToLocalhost !== undefined) {
-    config.restrictManagementToLocalhost = restrictManagementToLocalhost;
-  }
-
  const forceModelMappings = normalizeBoolean(
    source['force-model-mappings'] ?? source.forceModelMappings ?? source['force_model_mappings']
  );
--- a/src/services/api/usage.ts
+++ b/src/services/api/usage.ts
@@ -5,11 +5,13 @@
 import { apiClient } from './client';
 import { computeKeyStats, KeyStats } from '@/utils/usage';

+const USAGE_TIMEOUT_MS = 60 * 1000;
+
 export const usageApi = {
  /**
   * 获取使用统计原始数据
   */
-  getUsage: () => apiClient.get('/usage'),
+  getUsage: () => apiClient.get('/usage', { timeout: USAGE_TIMEOUT_MS }),

  /**
   * 计算密钥成功/失败统计，必要时会先获取 usage 数据
@@ -17,7 +19,7 @@ export const usageApi = {
  async getKeyStats(usageData?: any): Promise<KeyStats> {
    let payload = usageData;
    if (!payload) {
-      const response = await apiClient.get('/usage');
+      const response = await apiClient.get('/usage', { timeout: USAGE_TIMEOUT_MS });
      payload = response?.usage ?? response;
    }
    return computeKeyStats(payload);
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -36,11 +36,11 @@
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
 }

-// 深色主题（纯黑）
+// 深色主题（#191919）
 [data-theme='dark'] {
-  --bg-primary: #0a0a0a;
-  --bg-secondary: #000000;
-  --bg-tertiary: #171717;
+  --bg-primary: #202020;
+  --bg-secondary: #191919;
+  --bg-tertiary: #262626;

  --text-primary: #fafafa;
  --text-secondary: #a3a3a3;
--- a/src/types/ampcode.ts
+++ b/src/types/ampcode.ts
@@ -10,7 +10,6 @@ export interface AmpcodeModelMapping {
 export interface AmpcodeConfig {
  upstreamUrl?: string;
  upstreamApiKey?: string;
-  restrictManagementToLocalhost?: boolean;
  modelMappings?: AmpcodeModelMapping[];
  forceModelMappings?: boolean;
 }
--- a/src/types/provider.ts
+++ b/src/types/provider.ts
@@ -18,6 +18,7 @@ export interface ApiKeyEntry {

 export interface GeminiKeyConfig {
  apiKey: string;
+  prefix?: string;
  baseUrl?: string;
  headers?: Record<string, string>;
  excludedModels?: string[];
@@ -25,6 +26,7 @@ export interface GeminiKeyConfig {

 export interface ProviderKeyConfig {
  apiKey: string;
+  prefix?: string;
  baseUrl?: string;
  proxyUrl?: string;
  headers?: Record<string, string>;
@@ -34,6 +36,7 @@ export interface ProviderKeyConfig {

 export interface OpenAIProviderConfig {
  name: string;
+  prefix?: string;
  baseUrl: string;
  apiKeyEntries: ApiKeyEntry[];
  headers?: Record<string, string>;
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -18,6 +18,7 @@ export const LOG_REFRESH_DELAY_MS = 500;
 // 日志相关
 export const MAX_LOG_LINES = 2000;
 export const LOG_FETCH_LIMIT = 2500;
+export const LOGS_TIMEOUT_MS = 60 * 1000;

 // 认证文件分页
 export const DEFAULT_AUTH_FILES_PAGE_SIZE = 20;
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -52,6 +52,37 @@ export function formatDateTime(date: string | Date): string {
  });
 }

+/**
+ * 将 Unix 时间戳（秒/毫秒/微秒/纳秒）格式化为本地时间字符串
+ */
+export function formatUnixTimestamp(value: unknown, locale?: string): string {
+  if (value === null || value === undefined || value === '') return '';
+
+  const asNumber = typeof value === 'number' ? value : Number(value);
+  const date = (() => {
+    if (!Number.isFinite(asNumber) || Number.isNaN(asNumber)) {
+      return new Date(String(value));
+    }
+
+    const abs = Math.abs(asNumber);
+
+    // 秒：常见 10 位（~1e9）
+    if (abs < 1e11) return new Date(asNumber * 1000);
+
+    // 毫秒：常见 13 位（~1e12）
+    if (abs < 1e14) return new Date(asNumber);
+
+    // 微秒：常见 16 位（~1e15）
+    if (abs < 1e17) return new Date(Math.round(asNumber / 1000));
+
+    // 纳秒：常见 19 位（~1e18）
+    return new Date(Math.round(asNumber / 1e6));
+  })();
+
+  if (Number.isNaN(date.getTime())) return '';
+  return locale ? date.toLocaleString(locale) : date.toLocaleString();
+}
+
 /**
 * 格式化数字（添加千位分隔符）
 */
--- a/src/utils/usage.ts
+++ b/src/utils/usage.ts
@@ -3,6 +3,7 @@
 * 迁移自基线 modules/usage.js 的纯逻辑部分
 */

+import type { ScriptableContext } from 'chart.js';
 import { maskApiKey } from './format';

 export interface KeyStatBucket {
@@ -636,7 +637,7 @@ export interface ChartDataset {
  label: string;
  data: number[];
  borderColor: string;
-  backgroundColor: string;
+  backgroundColor: string | CanvasGradient | ((context: ScriptableContext<'line'>) => string | CanvasGradient);
  fill: boolean;
  tension: number;
 }
@@ -658,6 +659,47 @@ const CHART_COLORS = [
  { borderColor: '#f97316', backgroundColor: 'rgba(249, 115, 22, 0.15)' },
 ];

+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
+const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
+  const normalized = hex.trim().replace('#', '');
+  if (normalized.length !== 6) {
+    return null;
+  }
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  if (![r, g, b].every((channel) => Number.isFinite(channel))) {
+    return null;
+  }
+  return { r, g, b };
+};
+
+const withAlpha = (hex: string, alpha: number) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) {
+    return hex;
+  }
+  const clamped = clamp(alpha, 0, 1);
+  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${clamped})`;
+};
+
+const buildAreaGradient = (context: ScriptableContext<'line'>, baseHex: string, fallback: string) => {
+  const chart = context.chart;
+  const ctx = chart.ctx;
+  const area = chart.chartArea;
+
+  if (!area) {
+    return fallback;
+  }
+
+  const gradient = ctx.createLinearGradient(0, area.top, 0, area.bottom);
+  gradient.addColorStop(0, withAlpha(baseHex, 0.28));
+  gradient.addColorStop(0.6, withAlpha(baseHex, 0.12));
+  gradient.addColorStop(1, withAlpha(baseHex, 0.02));
+  return gradient;
+};
+
 /**
 * 构建图表数据
 */
@@ -692,13 +734,16 @@ export function buildChartData(
    const data = isAll ? getAllSeries() : (dataByModel.get(model) || new Array(labels.length).fill(0));
    const colorIndex = index % CHART_COLORS.length;
    const style = CHART_COLORS[colorIndex];
+    const shouldFill = modelsToShow.length === 1 || (isAll && modelsToShow.length > 1);

    return {
      label: isAll ? 'All Models' : model,
      data,
      borderColor: style.borderColor,
-      backgroundColor: style.backgroundColor,
-      fill: false,
+      backgroundColor: shouldFill
+        ? (ctx) => buildAreaGradient(ctx, style.borderColor, style.backgroundColor)
+        : style.backgroundColor,
+      fill: shouldFill,
      tension: 0.35
    };
  });
Author	SHA1	Message	Date
Supra4E8C	68974ffc68	feat(ai-providers): add prefix editing for provider configs	2025-12-21 23:46:39 +08:00
Supra4E8C	f8ed787f92	fix(splash): prevent login flicker on startup	2025-12-21 20:22:22 +08:00
Supra4E8C	dea106cf47	fix(splash): preserve logo aspect ratio	2025-12-21 16:58:14 +08:00
Supra4E8C	76ef1b68af	fix(dashboard): improve stats loading and i18n date formatting	2025-12-21 16:54:17 +08:00
Supra4E8C	39a003bdd4	refactor(dashboard): simplify stats and add available models card	2025-12-21 16:27:28 +08:00
Supra4E8C	b1426ccefc	feat(dashboard): enhance dashboard with provider breakdown and usage stats	2025-12-21 16:06:33 +08:00
Supra4E8C	a9df58cba7	feat(dashboard): add dashboard page with stats and splash screen	2025-12-21 16:05:09 +08:00
Supra4E8C	f6563490a6	fix(webui): normalize gemini endpoint and oauth callback status	2025-12-21 10:40:04 +08:00
Supra4E8C	18c1ba6c3c	feat(ampcode): remove localhost-only management toggle	2025-12-20 18:32:32 +08:00
Supra4E8C	c2627cac3e	fix: release auto write	2025-12-20 18:17:40 +08:00
Supra4E8C	df472119e7	feat: add commit-based release notes, usage loading spinner, and 60s logs timeout	2025-12-20 12:34:45 +08:00
Supra4E8C	10f2262753	fix(ai-providers): gate Claude models input and refine excluded tag styles	2025-12-19 23:54:26 +08:00
Supra4E8C	39d86d133a	feat(oauth): add callback URL submission and require Gemini CLI project ID	2025-12-19 18:04:14 +08:00
Supra4E8C	ddbd7d00bd	fix	2025-12-18 17:49:59 +08:00
Supra4E8C	e44beb541f	feat	2025-12-18 12:36:17 +08:00
Supra4E8C	aecd5875d6	feat(usage): add loading overlay and 60s API timeout	2025-12-18 01:03:12 +08:00
Supra4E8C	ec4b5ab46a	feat: add quick links section to System page	2025-12-17 18:16:59 +08:00
Supra4E8C	cd6c142324	fix: fix log page timestamp display and optimize AuthFiles layout - Add formatUnixTimestamp utility to auto-detect timestamp precision (s/ms/μs/ns) - Fix incorrect file modification time display in logs page - Remove fixed height constraint from AuthFilesPage model list	2025-12-17 18:03:25 +08:00
Supra4E8C	0ebf62b564	fix: usage layout	2025-12-17 12:14:35 +08:00
Supra4E8C	16f3442a11	fix: refactor usage	2025-12-17 00:35:02 +08:00
Supra4E8C	3328e686ee	fix: ip address in the log is displayed incorrectly	2025-12-16 23:32:49 +08:00
Supra4E8C	f60bdb0a8e	fix: change the dark mode color	2025-12-16 23:10:17 +08:00