From b644d287e1b320e2e77390c44aa6ae8642361bc3 Mon Sep 17 00:00:00 2001
From: AmintaCCCP <libogege@sina.com>
Date: Fri, 29 May 2026 22:40:30 +0800
Subject: [PATCH 1/6] feat: add diagnostic logs panel with debug capture mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add dedicated 'Diagnostic Logs' tab in settings sidebar (between Data Management and Network)
- Implement dual-layer logging architecture:
  - Base layer (always on): key events + warn/error with HTTP context (status, durationMs)
  - Debug layer (toggle-controlled): full HTTP request details for every API call
- Add frontend/backend debug mode toggles with sessionStorage persistence
- Add event type filtering (Sync Repos, AI Analysis, Refresh Trending, etc.)
- Add real-time log updates via CustomEvent (gsm:diagnostic-log-added/cleared)
- Enhance HTTP request instrumentation in githubApi, aiService, backendAdapter, webdavService
- Add DELETE /api/logs and POST /api/logs/debug endpoints for backend
- Remove old log export section from DataManagementPanel (moved to new panel)
- Add logger.isDebugMode() guard for debug-level logs to optimize performance
- Extract logAIRequestDebug() helper to reduce code duplication in aiService

Technical details:
- Frontend logger: 2000-entry ring buffer with write-time sanitization
- Backend logger: mirrored design with Morgan HTTP access log integration
- Event types auto-inferred from (module, message) patterns
- Search across module + message fields
- Level pills: debug/info/warn/error
- Scope toggle: all/frontend/backend
- HTTP summary display: 'GET /path → 200 (245ms)' format with color-coded status

Files modified:
- server/src/routes/logs.ts: add DELETE, GET/POST debug endpoints
- server/src/services/logger.ts: add getLevel(), isDebugMode(), getModules()
- src/components/SettingsPanel.tsx: add 'logs' tab with ScrollText icon
- src/components/settings/DataManagementPanel.tsx: remove log export section
- src/components/settings/DiagnosticLogsPanel.tsx: new component (~450 lines)
- src/components/settings/index.ts: export DiagnosticLogsPanel
- src/services/aiService.ts: add debug logging, extract logAIRequestDebug()
- src/services/autoSync.ts: add durationMs to sync events
- src/services/backendAdapter.ts: add debug logging in fetchWithTimeout/Retry
- src/services/githubApi.ts: add debug logging in makeRequest
- src/services/logger.ts: add CustomEvent dispatch, getModules(), isDebugMode()
- src/services/webdavService.ts: add debug logging for PUT/GET
- src/utils/logEventTypes.ts: new file for event type mapping

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 server/src/routes/logs.ts                     |  31 +
 server/src/services/logger.ts                 |  16 +
 src/components/SettingsPanel.tsx              |  11 +-
 .../settings/DataManagementPanel.tsx          | 254 -------
 .../settings/DiagnosticLogsPanel.tsx          | 671 ++++++++++++++++++
 src/components/settings/index.ts              |   1 +
 src/services/aiService.ts                     |  83 ++-
 src/services/autoSync.ts                      |  12 +-
 src/services/backendAdapter.ts                |  19 +-
 src/services/githubApi.ts                     |  47 +-
 src/services/logger.ts                        |  20 +
 src/services/webdavService.ts                 |  26 +-
 src/utils/logEventTypes.ts                    |  46 ++
 13 files changed, 944 insertions(+), 293 deletions(-)
 create mode 100644 src/components/settings/DiagnosticLogsPanel.tsx
 create mode 100644 src/utils/logEventTypes.ts

diff --git a/server/src/routes/logs.ts b/server/src/routes/logs.ts
index 0bd0ade1..a4a55231 100644
--- a/server/src/routes/logs.ts
+++ b/server/src/routes/logs.ts
@@ -5,6 +5,8 @@ const router = Router();
 
 const ALLOWED_LEVELS: readonly LogLevel[] = ['debug', 'info', 'warn', 'error'];
 
+// Note: Authentication is handled by authMiddleware applied to all /api/* routes in index.ts
+
 // GET /api/logs — returns recent backend log entries
 router.get('/api/logs', (req, res) => {
   try {
@@ -40,4 +42,33 @@ router.get('/api/logs', (req, res) => {
   }
 });
 
+// DELETE /api/logs — clear all backend log entries
+router.delete('/api/logs', (_req, res) => {
+  try {
+    logger.clear();
+    res.json({ success: true });
+  } catch (err) {
+    logger.errorFromError('logs.clearLogs', 'Failed to clear logs', err);
+    res.status(500).json({ error: 'Failed to clear logs', code: 'CLEAR_LOGS_FAILED' });
+  }
+});
+
+// GET /api/logs/debug — return current debug mode status
+router.get('/api/logs/debug', (_req, res) => {
+  res.json({ debugMode: logger.isDebugMode() });
+});
+
+// POST /api/logs/debug — toggle backend debug mode
+router.post('/api/logs/debug', (req, res) => {
+  try {
+    const enabled = req.body.enabled === true;
+    logger.setLevel(enabled ? 'debug' : 'info');
+    logger.info('logs.debug', enabled ? 'Backend debug mode enabled' : 'Backend debug mode disabled');
+    res.json({ success: true, debugMode: logger.isDebugMode() });
+  } catch (err) {
+    logger.errorFromError('logs.debugToggle', 'Failed to toggle debug mode', err);
+    res.status(500).json({ error: 'Failed to toggle debug mode', code: 'DEBUG_TOGGLE_FAILED' });
+  }
+});
+
 export default router;
\ No newline at end of file
diff --git a/server/src/services/logger.ts b/server/src/services/logger.ts
index fd51f130..e9fb73f8 100644
--- a/server/src/services/logger.ts
+++ b/server/src/services/logger.ts
@@ -127,6 +127,22 @@ class Logger {
   setLevel(level: LogLevel): void {
     this.minLevel = level;
   }
+
+  getLevel(): LogLevel {
+    return this.minLevel;
+  }
+
+  isDebugMode(): boolean {
+    return this.minLevel === 'debug';
+  }
+
+  getModules(): string[] {
+    const modules = new Set<string>();
+    for (const entry of this.buffer) {
+      modules.add(entry.module);
+    }
+    return Array.from(modules).sort();
+  }
 }
 
 export const logger = new Logger();
diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
index 3747c446..123be595 100644
--- a/src/components/SettingsPanel.tsx
+++ b/src/components/SettingsPanel.tsx
@@ -10,6 +10,7 @@ import {
   X,
   Trash2,
   Wifi,
+  ScrollText,
 } from 'lucide-react';
 import { useAppStore } from '../store/useAppStore';
 import { isElectron } from '../services/electronProxy';
@@ -23,9 +24,10 @@ import {
   CategoryPanel,
   DataManagementPanel,
   NetworkPanel,
+  DiagnosticLogsPanel,
 } from './settings';
 
-type SettingsTab = 'general' | 'ai' | 'webdav' | 'backup' | 'backend' | 'category' | 'data' | 'network';
+type SettingsTab = 'general' | 'ai' | 'webdav' | 'backup' | 'backend' | 'category' | 'data' | 'logs' | 'network';
 
 interface SettingsTabItem {
   id: SettingsTab;
@@ -286,6 +288,11 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
       label: t('数据管理', 'Data Management'),
       icon: <Trash2 className="w-5 h-5" />,
     },
+    {
+      id: 'logs',
+      label: t('诊断日志', 'Diagnostic Logs'),
+      icon: <ScrollText className="w-5 h-5" />,
+    },
     ...((isElectron() || backend.isAvailable) ? [{
       id: 'network' as SettingsTab,
       label: t('网络设置', 'Network'),
@@ -310,6 +317,8 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
           return <CategoryPanel t={t} />;
         case 'data':
           return <DataManagementPanel t={t} />;
+        case 'logs':
+          return <DiagnosticLogsPanel t={t} />;
         case 'network':
           return <NetworkPanel t={t} />;
         default:
diff --git a/src/components/settings/DataManagementPanel.tsx b/src/components/settings/DataManagementPanel.tsx
index 2590b1c2..23b5f677 100644
--- a/src/components/settings/DataManagementPanel.tsx
+++ b/src/components/settings/DataManagementPanel.tsx
@@ -21,14 +21,10 @@ import {
   HardDrive,
   RefreshCw,
   Rss,
-  FileText,
-  ShieldCheck,
 } from 'lucide-react';
 import { useAppStore } from '../../store/useAppStore';
 import { indexedDBStorage } from '../../services/indexedDbStorage';
-import { logger, LogLevel } from '../../services/logger';
 import { backend } from '../../services/backendAdapter';
-import { maskUrlDomain } from '../../utils/logSanitizer';
 import { version as appVersion } from '../../../package.json';
 import type { 
   Repository, 
@@ -151,7 +147,6 @@ export const DataManagementPanel: React.FC<DataManagementPanelProps> = ({ t }) =
   const [, setSearchHistoryVersion] = useState(0);
   const [showErrorMessage, setShowErrorMessage] = useState<string | null>(null);
   const [isExporting, setIsExporting] = useState(false);
-  const [isExportingLogs, setIsExportingLogs] = useState(false);
   const [isImporting, setIsImporting] = useState(false);
   const [importPreview, setImportPreview] = useState<{
     data: ExportData | null;
@@ -170,159 +165,8 @@ export const DataManagementPanel: React.FC<DataManagementPanelProps> = ({ t }) =
     setOperationLogs((prev) => [newLog, ...prev].slice(0, 50));
   }, []);
 
-  // Log export: counts and state
-  const [frontendLogCount, setFrontendLogCount] = useState(0);
-  const [backendLogCount, setBackendLogCount] = useState(0);
-  const [logCounts, setLogCounts] = useState<Record<LogLevel, number>>({ debug: 0, info: 0, warn: 0, error: 0 });
   const backendAvailable = backend.isAvailable;
 
-  useEffect(() => {
-    const updateCounts = () => {
-      const counts = logger.getCounts();
-      setFrontendLogCount(counts.total);
-      setLogCounts({ debug: counts.debug, info: counts.info, warn: counts.warn, error: counts.error });
-    };
-    updateCounts();
-    const interval = setInterval(updateCounts, 2000);
-    return () => clearInterval(interval);
-  }, []);
-
-  useEffect(() => {
-    if (!backendAvailable) {
-      setBackendLogCount(0);
-      return;
-    }
-    const fetchBackendCount = async () => {
-      try {
-        const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
-        const res = await fetch('/api/logs?limit=1', {
-          headers: { Authorization: `Bearer ${secret}` },
-        });
-        if (res.ok) {
-          // Use the total count from the response header
-          const totalHeader = res.headers.get('X-Log-Count');
-          if (totalHeader) {
-            setBackendLogCount(parseInt(totalHeader) || 0);
-          } else {
-            // Fallback: fetch all logs to count (heavy but works)
-            const allRes = await fetch('/api/logs?limit=2000', {
-              headers: { Authorization: `Bearer ${secret}` },
-            });
-            if (allRes.ok) {
-              const logs = await allRes.json();
-              setBackendLogCount(Array.isArray(logs) ? logs.length : 0);
-            }
-          }
-        }
-      } catch {
-        // Backend not reachable — keep count at 0
-      }
-    };
-    fetchBackendCount();
-    const interval = setInterval(fetchBackendCount, 10000);
-    return () => clearInterval(interval);
-  }, [backendAvailable]);
-
-  const handleExportLogs = async () => {
-    setIsExportingLogs(true);
-    try {
-      // Gather selected scopes
-      const scopeCheckboxes = document.querySelectorAll('.log-scope-checkbox:checked');
-      const selectedScopes = Array.from(scopeCheckboxes).map(cb => (cb as HTMLInputElement).dataset.scope as string);
-      // Gather selected levels
-      const levelCheckboxes = document.querySelectorAll('.log-level-checkbox:checked');
-      const selectedLevels = Array.from(levelCheckboxes).map(cb => (cb as HTMLInputElement).dataset.level as LogLevel);
-
-      if (selectedLevels.length === 0) {
-        showError(t('请至少选择一个日志级别', 'Please select at least one log level'));
-        setIsExportingLogs(false);
-        return;
-      }
-
-      if (selectedScopes.length === 0) {
-        showError(t('请至少选择一个日志范围', 'Please select at least one log scope'));
-        setIsExportingLogs(false);
-        return;
-      }
-
-      // Determine min level for filtering
-      const levelOrder: Record<LogLevel, number> = { debug: 0, info: 1, warn: 2, error: 3 };
-      const minLevel = selectedLevels.reduce((min, lvl) => Math.min(min, levelOrder[lvl]), 3);
-      const minLevelName = (Object.entries(levelOrder).find(([_, v]) => v === minLevel)?.[0] as LogLevel) || 'debug';
-
-      // Fetch frontend logs
-      let frontendLogs = selectedScopes.includes('frontend')
-        ? logger.getEntries({ level: minLevelName })
-        : [];
-      // Filter by explicit membership to honor exact level selection
-      frontendLogs = frontendLogs.filter((e) => selectedLevels.includes(e.level));
-
-      // Fetch backend logs
-      let backendLogs: Array<{ level: string }> = [];
-      if (selectedScopes.includes('backend') && backendAvailable) {
-        try {
-          const res = await fetch(`/api/logs?limit=2000&level=${minLevelName}`, {
-            headers: { Authorization: `Bearer ${sessionStorage.getItem('github-stars-manager-backend-secret')}` },
-          });
-          if (res.ok) {
-            const raw = await res.json();
-            backendLogs = Array.isArray(raw) ? raw.filter((e: { level: string }) => selectedLevels.includes(e.level as LogLevel)) : [];
-          }
-        } catch {
-          // Backend unreachable — skip
-        }
-      }
-
-      // Build environment info
-      const state = useAppStore.getState();
-      const isElectron = typeof window !== 'undefined' && window.electronAPI;
-      const environment = {
-        platform: isElectron ? 'electron' : 'web',
-        deployMode: isElectron ? 'electron' : 'web',
-        electronVersion: isElectron ? navigator.userAgent.match(/Electron\/([\d.]+)/)?.[1] ?? 'unknown' : null,
-        osPlatform: navigator.platform,
-        screenResolution: `${screen.width}x${screen.height}`,
-        backendAvailable: backendAvailable,
-        backendUrl: backendAvailable ? maskUrlDomain(backend.backendUrl || '') : null,
-        language: state.language,
-        repoCount: state.repositories?.length ?? 0,
-        aiConfigCount: state.aiConfigs?.length ?? 0,
-        webdavConfigCount: state.webdavConfigs?.length ?? 0,
-        storeHydrated: true,
-        lastSyncTime: state.lastSync ?? null,
-        appVersion,
-      };
-
-      const exportData = {
-        format: 'github-stars-manager-logs-v1',
-        exportDate: new Date().toISOString(),
-        appVersion,
-        environment,
-        sanitizationNote: t('所有 Token、API Key、密码、邮箱已脱敏为 ***格式', 'All tokens, API keys, passwords, and emails have been masked as ***<last4>'),
-        frontendLogs,
-        backendLogs,
-      };
-
-      // Download
-      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `github-stars-manager-logs-${new Date().toISOString().split('T')[0]}.json`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-
-      addLog(t('导出日志', 'Export logs'), true);
-    } catch (err) {
-      addLog(t('导出日志', 'Export logs'), false, String(err));
-      showError(t('导出日志失败', 'Failed to export logs'));
-    } finally {
-      setIsExportingLogs(false);
-    }
-  };
-
   const showSuccess = useCallback((message: string) => {
     setShowSuccessMessage(message);
     setTimeout(() => setShowSuccessMessage(null), 3000);
@@ -1448,104 +1292,6 @@ export const DataManagementPanel: React.FC<DataManagementPanelProps> = ({ t }) =
         </div>
       </section>
 
-      {/* Log Export */}
-      <section>
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-text-primary mb-4 flex items-center">
-          <FileText className="w-5 h-5 mr-2 text-gray-700 dark:text-text-secondary" />
-          {t('日志导出', 'Log Export')}
-        </h3>
-        <div className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] p-4">
-          <div className="flex items-center space-x-3 mb-4">
-            <div className="p-2 rounded-lg bg-light-surface dark:bg-white/[0.04] text-gray-700 dark:text-text-secondary">
-              <FileText className="w-5 h-5" />
-            </div>
-            <div>
-              <h4 className="font-medium text-gray-900 dark:text-text-primary">{t('导出应用日志', 'Export App Logs')}</h4>
-              <p className="text-sm text-gray-500 dark:text-text-tertiary">{t('导出日志用于问题排查，所有敏感信息已自动脱敏', 'Export logs for troubleshooting. All sensitive info is automatically sanitized.')}</p>
-            </div>
-          </div>
-
-          {/* Log scope */}
-          <div className="mb-4">
-            <p className="text-sm font-medium text-gray-900 dark:text-text-primary mb-2">{t('日志范围', 'Log Scope')}</p>
-            <div className="space-y-2">
-              <label className="flex items-center space-x-2 text-sm text-gray-900 dark:text-text-secondary">
-                <input
-                  type="checkbox"
-                  defaultChecked
-                  className="log-scope-checkbox rounded border-black/[0.06] dark:border-white/[0.04] text-brand-violet focus:ring-brand-violet"
-                  data-scope="frontend"
-                />
-                <span>{t('前端日志', 'Frontend Logs')}</span>
-                <span className="text-xs text-gray-500 dark:text-text-tertiary">({frontendLogCount} {t('条', 'entries')})</span>
-              </label>
-              <label className={`flex items-center space-x-2 text-sm ${backendAvailable ? 'text-gray-900 dark:text-text-secondary' : 'text-gray-400 dark:text-text-quaternary'}`}>
-                <input
-                  type="checkbox"
-                  defaultChecked={backendAvailable}
-                  disabled={!backendAvailable}
-                  className="log-scope-checkbox rounded border-black/[0.06] dark:border-white/[0.04] text-brand-violet focus:ring-brand-violet disabled:opacity-50"
-                  data-scope="backend"
-                />
-                <span>{t('后端日志', 'Backend Logs')}</span>
-                <span className="text-xs text-gray-500 dark:text-text-tertiary">
-                  {backendAvailable ? `(${backendLogCount} ${t('条', 'entries')})` : t('后端未连接', 'Backend not connected')}
-                </span>
-              </label>
-            </div>
-          </div>
-
-          {/* Log level */}
-          <div className="mb-4">
-            <p className="text-sm font-medium text-gray-900 dark:text-text-primary mb-2">{t('日志级别', 'Log Level')}</p>
-            <div className="flex flex-wrap gap-3">
-              {([
-                { level: 'info' as LogLevel, label: t('Info', 'Info'), defaultChecked: true },
-                { level: 'warn' as LogLevel, label: t('Warn', 'Warn'), defaultChecked: true },
-                { level: 'error' as LogLevel, label: t('Error', 'Error'), defaultChecked: true },
-                { level: 'debug' as LogLevel, label: t('Debug', 'Debug'), defaultChecked: false },
-              ]).map((item) => (
-                <label key={item.level} className="flex items-center space-x-2 text-sm text-gray-900 dark:text-text-secondary">
-                  <input
-                    type="checkbox"
-                    defaultChecked={item.defaultChecked}
-                    className="log-level-checkbox rounded border-black/[0.06] dark:border-white/[0.04] text-brand-violet focus:ring-brand-violet"
-                    data-level={item.level}
-                  />
-                  <span>{item.label}</span>
-                  <span className="text-xs text-gray-500 dark:text-text-tertiary">({logCounts[item.level]})</span>
-                </label>
-              ))}
-            </div>
-          </div>
-
-          {/* Sanitization notice */}
-          <div className="flex items-center space-x-2 mb-4 text-xs text-gray-500 dark:text-text-tertiary">
-            <ShieldCheck className="w-4 h-4" />
-            <span>{t('所有敏感信息（Token、API Key、密码、邮箱等）已自动脱敏为 ***格式', 'All sensitive info (Token, API Key, password, email) is automatically masked as ***')}</span>
-          </div>
-
-          {/* Export button */}
-          <button
-            onClick={handleExportLogs}
-            disabled={isExportingLogs}
-            className="w-full px-4 py-2 bg-brand-indigo hover:bg-brand-hover text-white font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center justify-center space-x-2"
-          >
-            {isExportingLogs ? (
-              <>
-                <Loader2 className="w-4 h-4 animate-spin" />
-                <span>{t('导出中...', 'Exporting...')}</span>
-              </>
-            ) : (
-              <>
-                <Download className="w-4 h-4" />
-                <span>{t('导出日志文件', 'Export Log File')}</span>
-              </>
-            )}
-          </button>
-        </div>
-      </section>
-
       {/* Data Cleanup Suggestions */}
       {cleanupSuggestions.length > 0 && (
         <section>
diff --git a/src/components/settings/DiagnosticLogsPanel.tsx b/src/components/settings/DiagnosticLogsPanel.tsx
new file mode 100644
index 00000000..a34fad05
--- /dev/null
+++ b/src/components/settings/DiagnosticLogsPanel.tsx
@@ -0,0 +1,671 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+  ScrollText,
+  Search,
+  Download,
+  Trash2,
+  Loader2,
+  ShieldCheck,
+  RefreshCw,
+  ToggleLeft,
+  ToggleRight,
+  AlertTriangle,
+  ChevronDown,
+  ChevronRight,
+} from 'lucide-react';
+import { logger, LogLevel, LogEntry } from '../../services/logger';
+import { backend } from '../../services/backendAdapter';
+import { maskUrlDomain } from '../../utils/logSanitizer';
+import { inferEventType, EVENT_TYPE_LABELS, LogEventType } from '../../utils/logEventTypes';
+import { version as appVersion } from '../../../package.json';
+import { useAppStore } from '../../store/useAppStore';
+
+interface DiagnosticLogsPanelProps {
+  t: (zh: string, en: string) => string;
+}
+
+const LEVEL_COLORS: Record<LogLevel, string> = {
+  debug: 'bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400',
+  info: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400',
+  warn: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
+  error: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400',
+};
+
+const STATUS_COLORS: Record<string, string> = {
+  '2': 'text-green-600 dark:text-green-400',
+  '4': 'text-amber-600 dark:text-amber-400',
+  '5': 'text-red-600 dark:text-red-400',
+};
+
+function formatRelativeTime(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  if (diff < 60000) return `${Math.floor(diff / 1000)}s`;
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h`;
+  return `${Math.floor(diff / 86400000)}d`;
+}
+
+function getHttpSummary(data: unknown): string | null {
+  if (!data || typeof data !== 'object' || Array.isArray(data)) return null;
+  const d = data as Record<string, unknown>;
+  if (!d.method && !d.status && !d.durationMs) return null;
+  const parts: string[] = [];
+  if (d.method) parts.push(String(d.method));
+  if (d.endpoint || d.path) parts.push(String(d.endpoint ?? d.path));
+  if (d.status) {
+    parts.push(`→ ${String(d.status)}`);
+  }
+  if (d.durationMs) parts.push(`(${d.durationMs}ms)`);
+  return parts.length > 0 ? parts.join(' ') : null;
+}
+
+function getStatusColor(status: unknown): string {
+  if (!status) return '';
+  const s = String(status);
+  const firstDigit = s.charAt(0);
+  return STATUS_COLORS[firstDigit] || '';
+}
+
+export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) => {
+  const language = useAppStore.getState().language;
+
+  // Debug mode state
+  const [frontendDebug, setFrontendDebug] = useState(() => {
+    const saved = sessionStorage.getItem('gsm:frontend-debug');
+    if (saved === 'true') {
+      logger.setLevel('debug');
+      return true;
+    }
+    return false;
+  });
+  const [backendDebug, setBackendDebug] = useState(() => sessionStorage.getItem('gsm:backend-debug') === 'true');
+  const backendAvailable = backend.isAvailable;
+
+  // Log entries state
+  const [entries, setEntries] = useState<LogEntry[]>(() => logger.getEntries());
+  const [backendEntries, setBackendEntries] = useState<LogEntry[]>([]);
+  const [backendLogCount, setBackendLogCount] = useState(0);
+  const [isExporting, setIsExporting] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [expandedData, setExpandedData] = useState<Set<string>>(new Set());
+
+  // Filter state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedLevels, setSelectedLevels] = useState<Set<LogLevel>>(new Set(['info', 'warn', 'error']));
+  const [selectedScope, setSelectedScope] = useState<'all' | 'frontend' | 'backend'>('all');
+  const [selectedEventTypes, setSelectedEventTypes] = useState<Set<LogEventType>>(new Set());
+  const [showEventTypeDropdown, setShowEventTypeDropdown] = useState(false);
+
+  // Real-time frontend log subscription
+  useEffect(() => {
+    const handleLogAdded = (e: Event) => {
+      const entry = (e as CustomEvent<LogEntry>).detail;
+      if (entry) {
+        setEntries(prev => {
+          const next = [...prev, entry];
+          return next.length > 2000 ? next.slice(-2000) : next;
+        });
+      }
+    };
+    const handleLogsCleared = () => {
+      setEntries([]);
+    };
+    window.addEventListener('gsm:diagnostic-log-added', handleLogAdded);
+    window.addEventListener('gsm:diagnostic-logs-cleared', handleLogsCleared);
+    return () => {
+      window.removeEventListener('gsm:diagnostic-log-added', handleLogAdded);
+      window.removeEventListener('gsm:diagnostic-logs-cleared', handleLogsCleared);
+    };
+  }, []);
+
+  // Backend log fetching
+  useEffect(() => {
+    if (selectedScope === 'frontend') {
+      setBackendEntries([]);
+      setBackendLogCount(0);
+      return;
+    }
+    if (!backendAvailable) return;
+
+    const fetchBackend = async () => {
+      try {
+        const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
+        const res = await fetch('/api/logs?limit=2000', {
+          headers: { Authorization: `Bearer ${secret}` },
+        });
+        if (res.ok) {
+          const raw = await res.json();
+          const logs = Array.isArray(raw) ? raw : [];
+          setBackendEntries(logs);
+          const totalHeader = res.headers.get('X-Log-Count');
+          setBackendLogCount(totalHeader ? parseInt(totalHeader) || 0 : logs.length);
+        }
+      } catch {
+        // Backend unreachable
+      }
+    };
+    fetchBackend();
+    const interval = setInterval(fetchBackend, 10000);
+    return () => clearInterval(interval);
+  }, [selectedScope, backendAvailable]);
+
+  // Merge entries
+  const allEntries = useMemo(() => {
+    if (selectedScope === 'frontend') return entries;
+    if (selectedScope === 'backend') return backendEntries;
+    return [...entries, ...backendEntries].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+  }, [entries, backendEntries, selectedScope]);
+
+  // Derived: available event types
+  const availableEventTypes = useMemo(() => {
+    const types = new Set<LogEventType>();
+    for (const entry of allEntries) {
+      types.add(inferEventType(entry.module, entry.message));
+    }
+    return Array.from(types).sort();
+  }, [allEntries]);
+
+  // Derived: available modules
+  const availableModules = useMemo(() => {
+    const mods = new Set<string>();
+    for (const entry of allEntries) {
+      mods.add(entry.module);
+    }
+    return Array.from(mods).sort();
+  }, [allEntries]);
+
+  // Filter entries
+  const filteredEntries = useMemo(() => {
+    return allEntries.filter(entry => {
+      if (!selectedLevels.has(entry.level)) return false;
+      if (selectedEventTypes.size > 0 && !selectedEventTypes.has(inferEventType(entry.module, entry.message))) return false;
+      if (searchQuery) {
+        const q = searchQuery.toLowerCase();
+        if (!entry.module.toLowerCase().includes(q) && !entry.message.toLowerCase().includes(q)) return false;
+      }
+      return true;
+    });
+  }, [allEntries, selectedLevels, selectedEventTypes, searchQuery]);
+
+  // Frontend counts
+  const frontendCounts = useMemo(() => logger.getCounts(), [entries]);
+
+  // Toggle frontend debug mode
+  const toggleFrontendDebug = useCallback(() => {
+    const next = !frontendDebug;
+    setFrontendDebug(next);
+    logger.setLevel(next ? 'debug' : 'info');
+    sessionStorage.setItem('gsm:frontend-debug', String(next));
+    if (next) {
+      setSelectedLevels(prev => new Set([...prev, 'debug']));
+    }
+  }, [frontendDebug]);
+
+  // Toggle backend debug mode
+  const toggleBackendDebug = useCallback(async () => {
+    const next = !backendDebug;
+    setBackendDebug(next);
+    sessionStorage.setItem('gsm:backend-debug', String(next));
+    try {
+      const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
+      await fetch('/api/logs/debug', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${secret}`,
+        },
+        body: JSON.stringify({ enabled: next }),
+      });
+    } catch {
+      // Backend unreachable
+    }
+  }, [backendDebug]);
+
+  // Clear logs
+  const handleClear = useCallback(async () => {
+    if (selectedScope === 'frontend' || selectedScope === 'all') {
+      logger.clear();
+      setEntries([]);
+    }
+    if ((selectedScope === 'backend' || selectedScope === 'all') && backendAvailable) {
+      try {
+        const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
+        await fetch('/api/logs', {
+          method: 'DELETE',
+          headers: { Authorization: `Bearer ${secret}` },
+        });
+        setBackendEntries([]);
+        setBackendLogCount(0);
+      } catch {
+        // Backend unreachable
+      }
+    }
+  }, [selectedScope, backendAvailable]);
+
+  // Refresh backend entries
+  const handleRefresh = useCallback(async () => {
+    setIsRefreshing(true);
+    try {
+      const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
+      const res = await fetch('/api/logs?limit=2000', {
+        headers: { Authorization: `Bearer ${secret}` },
+      });
+      if (res.ok) {
+        const raw = await res.json();
+        setBackendEntries(Array.isArray(raw) ? raw : []);
+        const totalHeader = res.headers.get('X-Log-Count');
+        setBackendLogCount(totalHeader ? parseInt(totalHeader) || 0 : raw.length);
+      }
+    } catch {
+      // Backend unreachable
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, []);
+
+  // Export logs
+  const handleExport = useCallback(async () => {
+    setIsExporting(true);
+    try {
+      const levelOrder: Record<LogLevel, number> = { debug: 0, info: 1, warn: 2, error: 3 };
+      const minLevel = selectedLevels.size > 0
+        ? (Object.entries(levelOrder).find(([l]) => selectedLevels.has(l as LogLevel))?.[1] ?? 3)
+        : 3;
+      const minLevelName = (Object.entries(levelOrder).find(([_, v]) => v === minLevel)?.[0] as LogLevel) || 'info';
+
+      let frontendLogs = selectedScope !== 'backend'
+        ? logger.getEntries({ level: minLevelName }).filter(e => selectedLevels.has(e.level))
+        : [];
+      let backendLogs: LogEntry[] = [];
+      if (selectedScope !== 'frontend' && backendAvailable) {
+        try {
+          const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
+          const res = await fetch(`/api/logs?limit=2000&level=${minLevelName}`, {
+            headers: { Authorization: `Bearer ${secret}` },
+          });
+          if (res.ok) {
+            const raw = await res.json();
+            backendLogs = Array.isArray(raw) ? raw.filter((e: LogEntry) => selectedLevels.has(e.level)) : [];
+          }
+        } catch {
+          // Backend unreachable
+        }
+      }
+
+      const state = useAppStore.getState();
+      const isElectron = typeof window !== 'undefined' && window.electronAPI;
+      const environment = {
+        platform: isElectron ? 'electron' : 'web',
+        electronVersion: isElectron ? navigator.userAgent.match(/Electron\/([\d.]+)/)?.[1] ?? 'unknown' : null,
+        osPlatform: navigator.platform,
+        screenResolution: `${screen.width}x${screen.height}`,
+        backendAvailable,
+        backendUrl: backendAvailable ? maskUrlDomain(backend.backendUrl || '') : null,
+        language: state.language,
+        repoCount: state.repositories?.length ?? 0,
+        frontendDebugMode: frontendDebug,
+        backendDebugMode: backendDebug,
+        appVersion,
+      };
+
+      const exportData = {
+        format: 'github-stars-manager-logs-v1',
+        exportDate: new Date().toISOString(),
+        appVersion,
+        environment,
+        sanitizationNote: t(
+          '所有 Token、API Key、密码、邮箱已脱敏为 ***格式',
+          'All tokens, API keys, passwords, and emails have been masked as ***<last4>'
+        ),
+        frontendLogs,
+        backendLogs,
+      };
+
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `github-stars-manager-logs-${new Date().toISOString().split('T')[0]}.json`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch {
+      // Export failed
+    } finally {
+      setIsExporting(false);
+    }
+  }, [selectedScope, selectedLevels, backendAvailable, frontendDebug, backendDebug, t]);
+
+  // Toggle level
+  const toggleLevel = useCallback((level: LogLevel) => {
+    setSelectedLevels(prev => {
+      const next = new Set(prev);
+      if (next.has(level)) next.delete(level);
+      else next.add(level);
+      return next;
+    });
+  }, []);
+
+  // Toggle event type
+  const toggleEventType = useCallback((eventType: LogEventType) => {
+    setSelectedEventTypes(prev => {
+      const next = new Set(prev);
+      if (next.has(eventType)) next.delete(eventType);
+      else next.add(eventType);
+      return next;
+    });
+  }, []);
+
+  // Toggle data expansion
+  const toggleDataExpand = useCallback((id: string) => {
+    setExpandedData(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const totalCount = allEntries.length;
+
+  return (
+    <div className="space-y-4">
+      {/* Debug Mode Section */}
+      <section>
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-text-primary mb-4 flex items-center">
+          <ScrollText className="w-5 h-5 mr-2 text-gray-700 dark:text-text-secondary" />
+          {t('调试模式', 'Debug Mode')}
+        </h3>
+        <div className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] p-4 space-y-4">
+          {/* Frontend debug toggle */}
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <div className="flex items-center space-x-2">
+                <span className="font-medium text-gray-900 dark:text-text-primary">{t('前端调试', 'Frontend Debug')}</span>
+                <span className={`text-xs px-2 py-0.5 rounded-full ${frontendDebug ? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400'}`}>
+                  {frontendDebug ? t('已开启', 'ON') : t('已关闭', 'OFF')}
+                </span>
+              </div>
+              <p className="text-sm text-gray-500 dark:text-text-tertiary mt-1">
+                {t('开启后将记录所有前端 HTTP 请求详情（方法、路径、状态码、耗时）', 'Records all frontend HTTP request details (method, path, status, duration)')}
+              </p>
+            </div>
+            <button
+              onClick={toggleFrontendDebug}
+              className={`p-2 rounded-lg transition-colors ${frontendDebug ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'}`}
+              aria-label={frontendDebug ? t('关闭前端调试', 'Disable frontend debug') : t('开启前端调试', 'Enable frontend debug')}
+            >
+              {frontendDebug ? <ToggleRight className="w-8 h-8" /> : <ToggleLeft className="w-8 h-8" />}
+            </button>
+          </div>
+
+          {/* Backend debug toggle */}
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <div className="flex items-center space-x-2">
+                <span className={`font-medium ${backendAvailable ? 'text-gray-900 dark:text-text-primary' : 'text-gray-400 dark:text-text-quaternary'}`}>
+                  {t('后端调试', 'Backend Debug')}
+                </span>
+                <span className={`text-xs px-2 py-0.5 rounded-full ${backendDebug ? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400'}`}>
+                  {backendAvailable
+                    ? (backendDebug ? t('已开启', 'ON') : t('已关闭', 'OFF'))
+                    : t('后端未连接', 'Not connected')}
+                </span>
+              </div>
+              <p className="text-sm text-gray-500 dark:text-text-tertiary mt-1">
+                {t('开启后将记录所有后端 HTTP 请求详情', 'Records all backend HTTP request details')}
+              </p>
+            </div>
+            <button
+              onClick={backendAvailable ? toggleBackendDebug : undefined}
+              disabled={!backendAvailable}
+              className={`p-2 rounded-lg transition-colors ${!backendAvailable ? 'opacity-50 cursor-not-allowed' : ''} ${backendDebug ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'}`}
+              aria-label={backendDebug ? t('关闭后端调试', 'Disable backend debug') : t('开启后端调试', 'Enable backend debug')}
+            >
+              {backendDebug ? <ToggleRight className="w-8 h-8" /> : <ToggleLeft className="w-8 h-8" />}
+            </button>
+          </div>
+
+          {/* Warning */}
+          <div className="flex items-center space-x-2 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 p-2 rounded-lg">
+            <AlertTriangle className="w-4 h-4" />
+            <span>{t('调试模式会产生大量日志，仅用于排障时短暂开启', 'Debug mode produces many logs — enable briefly only for troubleshooting')}</span>
+          </div>
+        </div>
+      </section>
+
+      {/* Privacy Notice */}
+      <div className="flex items-center space-x-2 text-xs text-gray-500 dark:text-text-tertiary bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 p-3 rounded-lg">
+        <ShieldCheck className="w-4 h-4 text-amber-600 dark:text-amber-400" />
+        <span>
+          {t('日志仅记录端点、模型、状态、耗时和错误摘要。所有 Token、API Key、密码、邮箱已自动脱敏为 ***格式', 'Logs store only endpoints, models, status, duration, and error summaries. All sensitive info (Token, API Key, password, email) is automatically masked as ***')}
+        </span>
+      </div>
+
+      {/* Toolbar */}
+      <section className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] p-4 space-y-3">
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            placeholder={t('搜索模块或消息...', 'Search module or message...')}
+            className="w-full pl-10 pr-4 py-2 rounded-lg border border-black/[0.06] dark:border-white/[0.04] bg-light-surface dark:bg-white/[0.04] text-gray-900 dark:text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-brand-violet"
+          />
+        </div>
+
+        {/* Level pills */}
+        <div className="flex items-center space-x-2">
+          <span className="text-sm font-medium text-gray-900 dark:text-text-primary">{t('级别', 'Level')}:</span>
+          {(['debug', 'info', 'warn', 'error'] as LogLevel[]).map(level => {
+            const disabled = level === 'debug' && !frontendDebug && selectedScope !== 'backend';
+            const selected = selectedLevels.has(level);
+            return (
+              <button
+                key={level}
+                onClick={disabled ? undefined : () => toggleLevel(level)}
+                disabled={disabled}
+                className={`px-3 py-1 text-sm rounded-full transition-colors border ${
+                  selected
+                    ? LEVEL_COLORS[level]
+                    : 'border-gray-200 dark:border-white/[0.06] text-gray-500 dark:text-text-tertiary bg-transparent'
+                } ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
+              >
+                {level}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Scope + Event type + Actions row */}
+        <div className="flex items-center space-x-3 flex-wrap gap-y-2">
+          {/* Scope toggle */}
+          <div className="flex items-center rounded-lg border border-black/[0.06] dark:border-white/[0.04] overflow-hidden">
+            {(['all', 'frontend', 'backend'] as const).map(scope => (
+              <button
+                key={scope}
+                onClick={() => setSelectedScope(scope)}
+                disabled={scope === 'backend' && !backendAvailable}
+                className={`px-3 py-1.5 text-sm transition-colors ${
+                  selectedScope === scope
+                    ? 'bg-brand-indigo text-white'
+                    : 'bg-transparent text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06]'
+                } ${scope === 'backend' && !backendAvailable ? 'opacity-40 cursor-not-allowed' : ''}`}
+              >
+                {scope === 'all' ? t('全部', 'All') : scope === 'frontend' ? t('前端', 'Frontend') : t('后端', 'Backend')}
+              </button>
+            ))}
+          </div>
+
+          {/* Event type dropdown */}
+          <div className="relative">
+            <button
+              onClick={() => setShowEventTypeDropdown(!showEventTypeDropdown)}
+              className="px-3 py-1.5 text-sm rounded-lg border border-black/[0.06] dark:border-white/[0.04] bg-transparent text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06] flex items-center space-x-1"
+            >
+              <span>{selectedEventTypes.size > 0 ? `${selectedEventTypes.size} ${t('类型', 'types')}` : t('事件类型', 'Event Type')}</span>
+              <ChevronDown className="w-4 h-4" />
+            </button>
+            {showEventTypeDropdown && (
+              <div className="absolute top-full left-0 mt-1 bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] shadow-lg z-10 p-2 max-h-48 overflow-y-auto min-w-[160px]">
+                {availableEventTypes.map(et => (
+                  <button
+                    key={et}
+                    onClick={() => toggleEventType(et)}
+                    className={`w-full text-left px-2 py-1 text-sm rounded flex items-center space-x-2 ${
+                      selectedEventTypes.has(et)
+                        ? 'bg-brand-indigo/10 text-brand-indigo dark:bg-brand-violet/20 dark:text-brand-violet'
+                        : 'text-gray-700 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06]'
+                    }`}
+                  >
+                    <span>{language === 'zh' ? EVENT_TYPE_LABELS[et].zh : EVENT_TYPE_LABELS[et].en}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Action buttons */}
+          <div className="flex items-center space-x-2 ml-auto">
+            <button
+              onClick={handleRefresh}
+              disabled={isRefreshing || !backendAvailable}
+              className="p-2 rounded-lg text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06] transition-colors disabled:opacity-50"
+              title={t('刷新', 'Refresh')}
+            >
+              <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+            </button>
+            <button
+              onClick={handleClear}
+              className="px-3 py-1.5 text-sm font-medium rounded-lg text-gray-700 dark:text-text-secondary bg-gray-100 dark:bg-white/[0.04] hover:bg-gray-200 dark:hover:bg-white/[0.08] transition-colors flex items-center space-x-1"
+            >
+              <Trash2 className="w-4 h-4" />
+              <span>{t('清空', 'Clear')}</span>
+            </button>
+            <button
+              onClick={handleExport}
+              disabled={isExporting}
+              className="px-3 py-1.5 text-sm font-medium rounded-lg bg-brand-indigo hover:bg-brand-hover text-white transition-colors disabled:opacity-50 flex items-center space-x-1"
+            >
+              {isExporting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4" />}
+              <span>{isExporting ? t('导出中...', 'Exporting...') : t('导出', 'Export')}</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Count summary */}
+        <div className="text-xs text-gray-500 dark:text-text-tertiary">
+          {t(`显示 ${filteredEntries.length} / ${totalCount} 条`, `Showing ${filteredEntries.length} / ${totalCount} entries`)}
+          {(frontendDebug || backendDebug) && (
+            <span className="ml-2 text-amber-600 dark:text-amber-400">
+              {t('调试模式已开启', 'Debug mode ON')}
+            </span>
+          )}
+          {selectedScope !== 'backend' && (
+            <span className="ml-1">
+              · {t(`前端 ${frontendCounts.total}`, `Frontend ${frontendCounts.total}`)}
+            </span>
+          )}
+          {selectedScope !== 'frontend' && backendAvailable && (
+            <span className="ml-1">
+              · {t(`后端 ${backendLogCount}`, `Backend ${backendLogCount}`)}
+            </span>
+          )}
+        </div>
+      </section>
+
+      {/* Log Entry List */}
+      <section className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] overflow-hidden">
+        {filteredEntries.length === 0 ? (
+          <div className="p-8 text-center text-gray-400 dark:text-text-quaternary">
+            <ScrollText className="w-8 h-8 mx-auto mb-2 opacity-50" />
+            {totalCount === 0
+              ? t('暂无日志', 'No logs yet')
+              : t('无匹配日志', 'No matching logs')}
+          </div>
+        ) : (
+          <div className="max-h-[520px] overflow-y-auto divide-y divide-black/[0.04] dark:divide-white/[0.02]">
+            {filteredEntries.map(entry => {
+              const eventType = inferEventType(entry.module, entry.message);
+              const httpSummary = getHttpSummary(entry.data);
+              const entryData = entry.data as Record<string, unknown> | undefined;
+              const hasData = entryData && typeof entryData === 'object' && !Array.isArray(entryData) && Object.keys(entryData).length > 0;
+              const isExpanded = expandedData.has(entry.id);
+              const statusColor = entryData?.status ? getStatusColor(entryData.status) : '';
+
+              return (
+                <div key={entry.id} className="px-4 py-3 hover:bg-light-surface dark:hover:bg-white/[0.02] transition-colors">
+                  {/* Header row */}
+                  <div className="flex items-center space-x-2 flex-wrap gap-y-1">
+                    <span className={`px-2 py-0.5 text-xs rounded-full font-medium ${LEVEL_COLORS[entry.level]}`}>
+                      {entry.level}
+                    </span>
+                    <span className={`px-2 py-0.5 text-xs rounded-full ${
+                      entry.source === 'frontend'
+                        ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-400'
+                        : 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'
+                    }`}>
+                      {entry.source === 'frontend' ? t('前端', 'FE') : t('后端', 'BE')}
+                    </span>
+                    <span className="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400">
+                      {language === 'zh' ? EVENT_TYPE_LABELS[eventType].zh : EVENT_TYPE_LABELS[eventType].en}
+                    </span>
+                    <span
+                      className="text-xs text-gray-500 dark:text-text-tertiary"
+                      title={entry.timestamp}
+                    >
+                      {formatRelativeTime(entry.timestamp)}
+                    </span>
+                    <span className="px-1.5 py-0.5 text-xs bg-brand-indigo/10 text-brand-indigo dark:bg-brand-violet/20 dark:text-brand-violet rounded font-mono">
+                      {entry.module}
+                    </span>
+                  </div>
+
+                  {/* Message */}
+                  <p className="text-sm text-gray-900 dark:text-text-primary mt-1 break-words">
+                    {entry.message}
+                  </p>
+
+                  {/* HTTP summary line */}
+                  {httpSummary && (
+                    <div className="text-xs mt-1 font-mono flex items-center space-x-1">
+                      <span className="font-bold">{String(entryData?.method ?? '')}</span>
+                      <span className="text-gray-600 dark:text-text-secondary">{String(entryData?.endpoint ?? entryData?.path ?? '')}</span>
+                      {entryData?.status && (
+                        <span className={`font-bold ${statusColor}`}>→ {String(entryData.status)}</span>
+                      )}
+                      {entryData?.durationMs && (
+                        <span className="text-blue-600 dark:text-blue-400">{String(entryData.durationMs)}ms</span>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Expandable data block */}
+                  {hasData && (
+                    <div className="mt-1">
+                      <button
+                        onClick={() => toggleDataExpand(entry.id)}
+                        className="text-xs text-gray-500 dark:text-text-tertiary hover:text-gray-700 dark:hover:text-text-secondary flex items-center space-x-1"
+                      >
+                        {isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
+                        <span>{isExpanded ? t('收起详情', 'Hide details') : t('查看详情', 'Show details')}</span>
+                      </button>
+                      {isExpanded && (
+                        <pre className="mt-1 text-xs bg-gray-50 dark:bg-white/[0.02] rounded p-2 overflow-auto max-h-48 font-mono text-gray-700 dark:text-text-secondary">
+                          {JSON.stringify(entryData, null, 2)}
+                        </pre>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts
index c975730e..29b6c1e4 100644
--- a/src/components/settings/index.ts
+++ b/src/components/settings/index.ts
@@ -6,3 +6,4 @@ export { CategoryPanel } from './CategoryPanel';
 export { GeneralPanel } from './GeneralPanel';
 export { DataManagementPanel } from './DataManagementPanel';
 export { NetworkPanel } from './NetworkPanel';
+export { DiagnosticLogsPanel } from './DiagnosticLogsPanel';
diff --git a/src/services/aiService.ts b/src/services/aiService.ts
index fa3ab091..52e9ac25 100644
--- a/src/services/aiService.ts
+++ b/src/services/aiService.ts
@@ -67,6 +67,23 @@ export class AIService {
     this.language = language;
   }
 
+  /**
+   * Log AI request details at debug level (only logged when debug mode is on).
+   */
+  private logAIRequestDebug(
+    startTime: number,
+    context: { apiType: string; model: string; configId: string },
+    result: { responseLength: number } | { error: string }
+  ): void {
+    if (logger.isDebugMode()) {
+      logger.debug('ai', 'AI request', {
+        ...context,
+        durationMs: Date.now() - startTime,
+        ...result,
+      });
+    }
+  }
+
   /**
    * 清理用户内容中可能导致 JSON 序列化问题的字符
    * - 移除 null 字节和控制字符（保留 \n \r \t）
@@ -122,7 +139,10 @@ export class AIService {
     maxTokens: number;
     signal?: AbortSignal;
   }): Promise<string> {
+    const startTime = Date.now();
     const apiType = this.getApiType();
+    const model = this.config.model;
+    const configId = this.config.id;
     const reasoning = this.getOpenAIReasoningPayload();
 
     if (apiType === 'openai' || apiType === 'openai-responses' || apiType === 'openai-compatible') {
@@ -170,6 +190,7 @@ export class AIService {
         });
         if (!response.ok) {
           const errorDetail = await this.extractErrorDetail(response);
+          this.logAIRequestDebug(startTime, { apiType, model, configId }, { error: 'request failed' });
           throw new Error(`AI API error: ${response.status} ${response.statusText}${errorDetail ? ` - ${errorDetail}` : ''}`);
         }
         data = await response.json();
@@ -178,7 +199,10 @@ export class AIService {
       if (apiType === 'openai-responses') {
         const typedData = data as OpenAIResponse;
         const outputText = typedData.output_text;
-        if (outputText) return outputText;
+        if (outputText) {
+          this.logAIRequestDebug(startTime, { apiType, model, configId }, { responseLength: outputText.length });
+          return outputText;
+        }
 
         const output = typedData.output;
         if (Array.isArray(output)) {
@@ -186,19 +210,29 @@ export class AIService {
             .flatMap((item) => Array.isArray(item?.content) ? item.content : [])
             .map((part) => part?.text || '')
             .join('');
-          if (text) return text;
+          if (text) {
+            this.logAIRequestDebug(startTime, { apiType, model, configId }, { responseLength: text.length });
+            return text;
+          }
         }
       } else {
         const typedData = data as { choices?: OpenAIResponseChoice[] };
         const choices = typedData.choices;
         const message = choices?.[0]?.message;
         const content = message?.content;
-        if (content) return content;
+        if (content) {
+          this.logAIRequestDebug(startTime, { apiType, model, configId }, { responseLength: content.length });
+          return content;
+        }
 
         const reasoningContent = message?.reasoning_content;
-        if (reasoningContent) return reasoningContent;
+        if (reasoningContent) {
+          this.logAIRequestDebug(startTime, { apiType, model, configId }, { responseLength: reasoningContent.length });
+          return reasoningContent;
+        }
       }
 
+      this.logAIRequestDebug(startTime, { apiType, model, configId }, { error: 'request failed' });
       throw new Error('No content received from AI service');
     }
 
@@ -229,6 +263,7 @@ export class AIService {
         });
         if (!response.ok) {
           const errorDetail = await this.extractErrorDetail(response);
+          this.logAIRequestDebug(startTime, { apiType, model, configId }, { error: 'request failed' });
           throw new Error(`AI API error: ${response.status} ${response.statusText}${errorDetail ? ` - ${errorDetail}` : ''}`);
         }
         data = await response.json();
@@ -243,14 +278,18 @@ export class AIService {
             return block.type === 'text' && typeof block.text === 'string' ? block.text : '';
           })
           .join('');
-        if (text) return text;
+        if (text) {
+          this.logAIRequestDebug(startTime, { apiType, model, configId }, { responseLength: text.length });
+          return text;
+        }
       }
+      this.logAIRequestDebug(startTime, { apiType, model, configId }, { error: 'request failed' });
       throw new Error('No content received from AI service');
     }
 
     // gemini
     const rawModel = this.config.model.trim();
-    const model = rawModel.startsWith('models/') ? rawModel.slice('models/'.length) : rawModel;
+    const geminiModel = rawModel.startsWith('models/') ? rawModel.slice('models/'.length) : rawModel;
     const prompt = options.system ? `${options.system}
 
 ${options.user}` : options.user;
@@ -271,7 +310,7 @@ ${options.user}` : options.user;
     if (backend.isAvailable) {
       data = await backend.proxyAIRequestWithFallback(this.config.id, this.config, requestBody, options.signal);
     } else {
-      const path = `v1beta/models/${encodeURIComponent(model)}:generateContent`;
+      const path = `v1beta/models/${encodeURIComponent(geminiModel)}:generateContent`;
       const urlObj = new URL(buildApiUrl(this.config.baseUrl, path));
       urlObj.searchParams.set('key', this.config.apiKey);
       const response = await fetch(urlObj.toString(), {
@@ -285,6 +324,7 @@ ${options.user}` : options.user;
       });
       if (!response.ok) {
         const errorDetail = await this.extractErrorDetail(response);
+        this.logAIRequestDebug(startTime, { apiType, model, configId }, { error: 'request failed' });
         throw new Error(`AI API error: ${response.status} ${response.statusText}${errorDetail ? ` - ${errorDetail}` : ''}`);
       }
       data = await response.json();
@@ -304,9 +344,13 @@ ${options.user}` : options.user;
             return typeof part.text === 'string' ? part.text : '';
           })
           .join('');
-        if (text) return text;
+        if (text) {
+          this.logAIRequestDebug(startTime, { apiType, model, configId }, { responseLength: text.length });
+          return text;
+        }
       }
     }
+    this.logAIRequestDebug(startTime, { apiType, model, configId }, { error: 'request failed' });
     throw new Error('No content received from AI service');
   }
 
@@ -315,10 +359,17 @@ ${options.user}` : options.user;
     tags: string[];
     platforms: string[];
   }> {
+    const startTime = Date.now();
+    const configId = this.config.id;
+    const { full_name } = repository;
+    const owner = full_name.split('/')[0] || '';
+    const repo = full_name.split('/')[1] || full_name;
+    logger.info('ai', 'AI analysis started', { owner, repo, configId });
+
     const prompt = this.config.useCustomPrompt && this.config.customPrompt
       ? this.createCustomAnalysisPrompt(repository, readmeContent, customCategories)
       : this.createAnalysisPrompt(repository, readmeContent, customCategories);
-    
+
     try {
       const system = this.language === 'zh'
         ? '你是一个专业的GitHub仓库分析助手。请严格按照用户指定的语言进行分析，无论原始内容是什么语言。请用中文简洁地分析仓库，提供实用的概述、分类标签和支持的平台类型。只输出合法JSON，不要输出思考过程、Markdown、代码块标记或任何额外文本。'
@@ -332,9 +383,11 @@ ${options.user}` : options.user;
         signal,
       });
 
-      return this.parseAIResponse(content);
+      const result = this.parseAIResponse(content);
+      logger.info('ai', 'AI analysis completed', { owner, repo, configId, durationMs: Date.now() - startTime });
+      return result;
     } catch (error) {
-      logger.errorFromError('ai', 'AI analysis failed', error, { configId: this.config.id });
+      logger.errorFromError('ai', 'AI analysis failed', error, { configId, durationMs: Date.now() - startTime });
       // 抛出错误，让调用方处理失败状态
       throw error;
     }
@@ -648,6 +701,7 @@ ${repoInfo}
   }
 
   async searchRepositories(repositories: Repository[], query: string): Promise<Repository[]> {
+    const startTime = Date.now();
     if (!query.trim()) return repositories;
 
     try {
@@ -670,7 +724,7 @@ ${repoInfo}
         return this.performEnhancedSearch(repositories, query, searchTerms);
       }
     } catch (error) {
-      logger.warn('ai', 'AI search failed, falling back to basic search', { configId: this.config.id });
+      logger.warn('ai', 'AI search failed, falling back to basic search', { configId: this.config.id, durationMs: Date.now() - startTime });
     }
 
     // Fallback to basic search
@@ -688,6 +742,7 @@ ${repoInfo}
    * @returns Filtered and ranked repositories matching the query
    */
   async searchRepositoriesWithReranking(repositories: Repository[], query: string): Promise<Repository[]> {
+    const startTime = Date.now();
     logger.info('ai', 'Starting enhanced search', { query });
     if (!query.trim()) return repositories;
 
@@ -708,11 +763,11 @@ ${repoInfo}
       if (content) {
         const searchTerms = this.parseSearchResponse(content);
         const results = this.performEnhancedSearch(repositories, query, searchTerms);
-        logger.info('ai', 'AI semantic search completed', { resultCount: results.length, apiType: this.getApiType(), model: this.config.model });
+        logger.info('ai', 'AI semantic search completed', { resultCount: results.length, apiType: this.getApiType(), model: this.config.model, durationMs: Date.now() - startTime });
         return results;
       }
     } catch (error) {
-      logger.warn('ai', 'AI semantic search failed, falling back to enhanced basic search', { apiType: this.getApiType(), model: this.config.model, configId: this.config.id });
+      logger.warn('ai', 'AI semantic search failed, falling back to enhanced basic search', { apiType: this.getApiType(), model: this.config.model, configId: this.config.id, durationMs: Date.now() - startTime });
     }
 
     logger.info('ai', 'Using enhanced basic search with intelligent ranking');
diff --git a/src/services/autoSync.ts b/src/services/autoSync.ts
index 747497b3..918d4785 100644
--- a/src/services/autoSync.ts
+++ b/src/services/autoSync.ts
@@ -63,6 +63,7 @@ export async function syncFromBackend(): Promise<void> {
 
   _isSyncingFromBackendActive = true;
 
+  const startTime = Date.now();
   try {
     const [reposResult, releasesResult, aiResult, webdavResult, settingsResult] = await Promise.allSettled([
       backend.fetchRepositories(),
@@ -227,9 +228,9 @@ export async function syncFromBackend(): Promise<void> {
       _lastHash.settings = hashes.settings;
     }
 
-    logger.info('sync.pullFromBackend', 'Synced from backend (data changed)', changed);
+    logger.info('sync.pullFromBackend', 'Synced from backend (data changed)', { ...changed, durationMs: Date.now() - startTime });
   } catch (err) {
-    logger.errorFromError('sync.pullFromBackend', 'Failed to sync from backend', err);
+    logger.errorFromError('sync.pullFromBackend', 'Failed to sync from backend', err, { durationMs: Date.now() - startTime });
   } finally {
     setRepositorySyncVisualState(false);
     _isSyncingFromBackend = false;
@@ -259,6 +260,7 @@ export async function syncToBackend(): Promise<void> {
   _isPushingToBackend = true;
   _hasPendingPush = false;
   setRepositorySyncVisualState(true);
+  const pushStartTime = Date.now();
   try {
     const state = useAppStore.getState();
 
@@ -281,10 +283,10 @@ export async function syncToBackend(): Promise<void> {
 
     const failures = results.filter(r => r.status === 'rejected');
     if (failures.length > 0) {
-      logger.warn('sync.pushToBackend', `Synced to backend with ${failures.length} error(s)`, { failureCount: failures.length });
+      logger.warn('sync.pushToBackend', `Synced to backend with ${failures.length} error(s)`, { failureCount: failures.length, durationMs: Date.now() - pushStartTime });
       _hasPendingLocalChanges = true;
     } else {
-      logger.info('sync.pushToBackend', 'Synced to backend');
+      logger.info('sync.pushToBackend', 'Synced to backend', { durationMs: Date.now() - pushStartTime });
       _hasPendingLocalChanges = false;
     }
 
@@ -305,7 +307,7 @@ export async function syncToBackend(): Promise<void> {
       });
     }
   } catch (err) {
-    logger.errorFromError('sync.pushToBackend', 'Failed to sync to backend', err);
+    logger.errorFromError('sync.pushToBackend', 'Failed to sync to backend', err, { durationMs: Date.now() - pushStartTime });
   } finally {
     setRepositorySyncVisualState(false);
     _isPushingToBackend = false;
diff --git a/src/services/backendAdapter.ts b/src/services/backendAdapter.ts
index 23623307..bd801978 100644
--- a/src/services/backendAdapter.ts
+++ b/src/services/backendAdapter.ts
@@ -69,6 +69,9 @@ class BackendAdapter {
     return headers;
   }
   private async fetchWithTimeout(url: string, options?: RequestInit, timeoutMs = 30000): Promise<Response> {
+    const startTime = Date.now();
+    const method = (options?.method || 'GET').toUpperCase();
+    const path = url.replace(/^https?:\/\/[^/]+/, '');
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
 
@@ -83,7 +86,16 @@ class BackendAdapter {
     }
 
     try {
-      return await fetch(url, { ...options, signal: controller.signal });
+      const response = await fetch(url, { ...options, signal: controller.signal });
+      if (logger.isDebugMode()) {
+        logger.debug('backendAdapter', 'Backend request', { method, path, status: response.status, durationMs: Date.now() - startTime });
+      }
+      return response;
+    } catch (err) {
+      if (logger.isDebugMode()) {
+        logger.debug('backendAdapter', 'Backend request', { method, path, error: 'timeout/network error', durationMs: Date.now() - startTime });
+      }
+      throw err;
     } finally {
       clearTimeout(timeoutId);
     }
@@ -94,6 +106,9 @@ class BackendAdapter {
    * Covers browser fetch (Chrome/Firefox/Safari) and Node.js undici fetch.
    */
   private async fetchWithRetry(url: string, options?: RequestInit, timeoutMs = 30000, maxRetries = 3): Promise<Response> {
+    const retryStartTime = Date.now();
+    const method = (options?.method || 'GET').toUpperCase();
+    const path = url.replace(/^https?:\/\/[^/]+/, '');
     let lastError: Error | undefined;
     for (let attempt = 0; attempt <= maxRetries; attempt++) {
       try {
@@ -116,7 +131,7 @@ class BackendAdapter {
         if (!isRetryable || attempt === maxRetries) throw lastError;
         // Exponential backoff: 1s, 2s, 4s
         const delay = Math.min(1000 * Math.pow(2, attempt), 4000);
-        logger.warn('backendAdapter', 'Sync request failed, retrying', { attempt: attempt + 1, maxRetries: maxRetries + 1, delayMs: delay });
+        logger.warn('backendAdapter', 'Sync request failed, retrying', { attempt: attempt + 1, maxRetries: maxRetries + 1, delayMs: delay, durationMs: Date.now() - retryStartTime, method, path });
         await new Promise(resolve => setTimeout(resolve, delay));
       }
     }
diff --git a/src/services/githubApi.ts b/src/services/githubApi.ts
index e540b360..bfd7de44 100644
--- a/src/services/githubApi.ts
+++ b/src/services/githubApi.ts
@@ -58,6 +58,9 @@ export class GitHubApiService {
   }
 
   private async makeRequest<T>(endpoint: string, options: RequestInit = {}, signal?: AbortSignal): Promise<T> {
+    const startTime = Date.now();
+    const method = (options.method || 'GET') as string;
+
     // Check rate limit before making request
     if (this.rateLimitRemaining !== null && this.rateLimitRemaining < 100 && this.rateLimitReset !== null) {
       const waitMs = (this.rateLimitReset * 1000) - Date.now();
@@ -83,16 +86,23 @@ export class GitHubApiService {
       }
     }
 
-    const response = await fetch(`${GITHUB_API_BASE}${endpoint}`, {
-      ...options,
-      signal,
-      headers: {
-        'Authorization': `Bearer ${this.token}`,
-        'Accept': 'application/vnd.github.v3+json',
-        'X-GitHub-Api-Version': '2022-11-28',
-        ...options.headers,
-      },
-    });
+    let response: Response;
+    try {
+      response = await fetch(`${GITHUB_API_BASE}${endpoint}`, {
+        ...options,
+        signal,
+        headers: {
+          'Authorization': `Bearer ${this.token}`,
+          'Accept': 'application/vnd.github.v3+json',
+          'X-GitHub-Api-Version': '2022-11-28',
+          ...options.headers,
+        },
+      });
+    } catch (fetchError) {
+      const durationMs = Date.now() - startTime;
+      logger.error('githubApi', 'API request network error', { method, endpoint, durationMs, error: fetchError instanceof Error ? fetchError.message : String(fetchError) });
+      throw fetchError;
+    }
 
     // Parse rate limit headers
     const remaining = response.headers.get('X-RateLimit-Remaining');
@@ -105,18 +115,26 @@ export class GitHubApiService {
     }
 
     if (!response.ok) {
+      const durationMs = Date.now() - startTime;
       if (response.status === 401) {
+        logger.warn('githubApi', 'API request failed: unauthorized', { method, endpoint, status: response.status, durationMs });
         throw new Error('GitHub token expired or invalid');
       }
       if (response.status === 403 && this.rateLimitRemaining === 0) {
         const resetDate = this.rateLimitReset
           ? new Date(this.rateLimitReset * 1000).toLocaleString()
           : 'unknown';
+        logger.warn('githubApi', 'API request failed: rate limit exceeded', { method, endpoint, status: response.status, durationMs });
         throw new Error(`GitHub API rate limit exceeded. Resets at ${resetDate}`);
       }
+      logger.warn('githubApi', 'API request failed', { method, endpoint, status: response.status, durationMs });
       throw new Error(`GitHub API error: ${response.status} ${response.statusText}`);
     }
 
+    if (logger.isDebugMode()) {
+      logger.debug('githubApi', 'API request', { method, endpoint, status: response.status, durationMs: Date.now() - startTime, rateLimitRemaining: response.headers.get('x-ratelimit-remaining') });
+    }
+
     const data = response.status === 204 ? null : await response.json();
 
     // 如果是starred repositories的响应，需要处理特殊格式
@@ -275,6 +293,7 @@ export class GitHubApiService {
     repositories: Repository[],
     options: ReleaseFetchOptions = {}
   ): Promise<MultipleReleasesResult> {
+    const startTime = Date.now();
     const { includePreRelease = true } = options;
     const allReleases: Release[] = [];
     const failedRepos: { repoId: number; full_name: string; error: string }[] = [];
@@ -360,6 +379,8 @@ export class GitHubApiService {
       new Date(b.published_at).getTime() - new Date(a.published_at).getTime()
     );
 
+    logger.info('githubApi', 'Update releases completed', { repoCount: repositories.length, releaseCount: sortedReleases.length, durationMs: Date.now() - startTime });
+
     return { releases: sortedReleases, failedRepos };
   }
 
@@ -468,6 +489,7 @@ export class GitHubApiService {
   }
 
   async searchTrending(perPage = 10, timeRange: 'daily' | 'weekly' | 'monthly' = 'weekly'): Promise<SubscriptionRepo[]> {
+    const startTime = Date.now();
     // 使用 GitHubTrendingRSS API
     const rssUrl = `https://mshibanami.github.io/GitHubTrendingRSS/${timeRange}/all.xml`;
 
@@ -558,6 +580,8 @@ export class GitHubApiService {
         }));
       }
 
+      logger.info('githubApi', 'Refresh trending completed', { repoCount: repos.length, durationMs: Date.now() - startTime });
+
       return repos;
     } catch (error) {
       logger.error('githubApi', 'Failed to fetch trending from RSS', error);
@@ -665,6 +689,7 @@ export class GitHubApiService {
     perPage: number = 20,
     timeRange: TrendingTimeRange = 'weekly'
   ): Promise<PaginatedDiscoveryRepositories> {
+    const startTime = Date.now();
     const rssUrlMap: Record<TrendingTimeRange, string> = {
       daily: 'https://mshibanami.github.io/GitHubTrendingRSS/daily/all.xml',
       weekly: 'https://mshibanami.github.io/GitHubTrendingRSS/weekly/all.xml',
@@ -781,6 +806,8 @@ export class GitHubApiService {
       // Assign rank based on position
       repos.forEach((r, idx) => { r.rank = startIndex + idx + 1; });
 
+      logger.info('githubApi', 'Refresh trending completed', { repoCount: repos.length, durationMs: Date.now() - startTime });
+
       return {
         repos,
         hasMore: endIndex < items.length,
diff --git a/src/services/logger.ts b/src/services/logger.ts
index 8eabb762..26185d5f 100644
--- a/src/services/logger.ts
+++ b/src/services/logger.ts
@@ -52,6 +52,11 @@ class Logger {
 
     // Forward to console for dev experience
     this.forwardToConsole(entry);
+
+    // Notify UI listeners
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('gsm:diagnostic-log-added', { detail: entry }));
+    }
   }
 
   debug(module: string, message: string, data?: unknown): void {
@@ -126,12 +131,27 @@ class Logger {
 
   clear(): void {
     this.buffer = [];
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('gsm:diagnostic-logs-cleared'));
+    }
   }
 
   setLevel(level: LogLevel): void {
     this.minLevel = level;
   }
 
+  isDebugMode(): boolean {
+    return this.minLevel === 'debug';
+  }
+
+  getModules(): string[] {
+    const modules = new Set<string>();
+    for (const entry of this.buffer) {
+      modules.add(entry.module);
+    }
+    return Array.from(modules).sort();
+  }
+
   /**
    * Build the export JSON structure (frontend logs only).
    * The UI component merges this with backend logs.
diff --git a/src/services/webdavService.ts b/src/services/webdavService.ts
index 35c69775..c1729de8 100644
--- a/src/services/webdavService.ts
+++ b/src/services/webdavService.ts
@@ -206,6 +206,8 @@ export class WebDAVService {
       const uploadOperation = async (): Promise<boolean> => {
         const controller = new AbortController();
         const timeoutId = setTimeout(() => controller.abort(), dynamicTimeout);
+        const sanitizedPath = this.getFullPath(filename).replace(/^https?:\/\/[^\/]+/, '');
+        const startTime = Date.now();
 
         try {
           const response = await fetch(this.getFullPath(filename), {
@@ -220,6 +222,10 @@ export class WebDAVService {
 
           clearTimeout(timeoutId);
 
+          if (logger.isDebugMode()) {
+            logger.debug('webdav', 'WebDAV request', { method: 'PUT', path: sanitizedPath, status: response.status, durationMs: Date.now() - startTime });
+          }
+
           if (!response.ok) {
             if (response.status === 401) {
               throw new Error('身份验证失败。请检查用户名和密码。');
@@ -307,6 +313,8 @@ export class WebDAVService {
     try {
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), 30000); // 30秒超时
+      const sanitizedPath = this.getFullPath(filename).replace(/^https?:\/\/[^\/]+/, '');
+      const startTime = Date.now();
 
       try {
         const response = await fetch(this.getFullPath(filename), {
@@ -316,34 +324,38 @@ export class WebDAVService {
           },
           signal: controller.signal,
         });
-        
+
         clearTimeout(timeoutId);
 
+        if (logger.isDebugMode()) {
+          logger.debug('webdav', 'WebDAV request', { method: 'GET', path: sanitizedPath, status: response.status, durationMs: Date.now() - startTime });
+        }
+
         if (response.ok) {
           return await response.text();
         }
-        
+
         if (response.status === 404) {
           return null; // 文件未找到是预期行为
         }
-        
+
         if (response.status === 401) {
           throw new Error('身份验证失败。请检查用户名和密码。');
         }
-        
+
         throw new Error(`下载失败，HTTP状态码 ${response.status}: ${response.statusText}`);
       } catch (fetchError: unknown) {
         clearTimeout(timeoutId);
-        
+
         if ((fetchError as Error).name === 'AbortError') {
           throw new Error('下载超时。请检查网络连接。');
         }
-        
+
         throw fetchError;
       }
     } catch (error: unknown) {
       const err = error as Error;
-      if (err.message.includes('身份验证失败') || 
+      if (err.message.includes('身份验证失败') ||
           err.message.includes('下载超时')) {
         throw error;
       }
diff --git a/src/utils/logEventTypes.ts b/src/utils/logEventTypes.ts
new file mode 100644
index 00000000..d428a96f
--- /dev/null
+++ b/src/utils/logEventTypes.ts
@@ -0,0 +1,46 @@
+export type LogEventType =
+  | 'sync'
+  | 'aiAnalysis'
+  | 'aiSearch'
+  | 'githubApi'
+  | 'trending'
+  | 'release'
+  | 'backendSync'
+  | 'webdav'
+  | 'update'
+  | 'store'
+  | 'app'
+  | 'error'
+  | 'other';
+
+export const EVENT_TYPE_LABELS: Record<LogEventType, { zh: string; en: string }> = {
+  sync:          { zh: '同步仓库', en: 'Sync Repos' },
+  aiAnalysis:    { zh: 'AI 分析', en: 'AI Analysis' },
+  aiSearch:      { zh: 'AI 搜索', en: 'AI Search' },
+  githubApi:     { zh: 'GitHub API', en: 'GitHub API' },
+  trending:      { zh: '刷新趋势', en: 'Refresh Trending' },
+  release:       { zh: '更新 Release', en: 'Update Releases' },
+  backendSync:   { zh: '后端同步', en: 'Backend Sync' },
+  webdav:        { zh: 'WebDAV 备份', en: 'WebDAV Backup' },
+  update:        { zh: '应用更新', en: 'App Update' },
+  store:         { zh: '数据存储', en: 'Data Store' },
+  app:           { zh: '应用', en: 'App' },
+  error:         { zh: '错误', en: 'Error' },
+  other:         { zh: '其他', en: 'Other' },
+};
+
+export function inferEventType(module: string, message: string): LogEventType {
+  if (module.startsWith('sync')) return 'sync';
+  if (module === 'ai' && /analysis|analyze/i.test(message)) return 'aiAnalysis';
+  if (module === 'ai' && /search/i.test(message)) return 'aiSearch';
+  if (module === 'githubApi' && /trending/i.test(message)) return 'trending';
+  if (module === 'githubApi' && /release/i.test(message)) return 'release';
+  if (module === 'backendAdapter') return 'backendSync';
+  if (module === 'webdav') return 'webdav';
+  if (module === 'update') return 'update';
+  if (module.startsWith('store')) return 'store';
+  if (module === 'app') return 'app';
+  if (module === 'ui.errorBoundary') return 'error';
+  if (module === 'githubApi') return 'githubApi';
+  return 'other';
+}
\ No newline at end of file

From d49c1a7cfa7c0e7f693216c1e5357f8179025bb9 Mon Sep 17 00:00:00 2001
From: AmintaCCCP <libogege@sina.com>
Date: Fri, 29 May 2026 22:55:22 +0800
Subject: [PATCH 2/6] fix: address CodeRabbit review comments

- Remove unnecessary regex escape in webdavService.ts (2 places)
- Initialize backendDebug state from server on mount instead of sessionStorage
- Remove unused availableModules useMemo from DiagnosticLogsPanel
- Change frontendLogs from let to const in export handler
- Fix debug pill disabled logic to allow backend debug in 'all' scope
- Remove unused error parameter in aiService catch block

Fixes 5 actionable CodeRabbit review comments.
---
 .../settings/DiagnosticLogsPanel.tsx          | 49 ++++++++++++-------
 src/services/aiService.ts                     |  2 +-
 src/services/webdavService.ts                 |  4 +-
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/components/settings/DiagnosticLogsPanel.tsx b/src/components/settings/DiagnosticLogsPanel.tsx
index a34fad05..b387d37c 100644
--- a/src/components/settings/DiagnosticLogsPanel.tsx
+++ b/src/components/settings/DiagnosticLogsPanel.tsx
@@ -78,9 +78,30 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
     }
     return false;
   });
-  const [backendDebug, setBackendDebug] = useState(() => sessionStorage.getItem('gsm:backend-debug') === 'true');
+  const [backendDebug, setBackendDebug] = useState(false);
   const backendAvailable = backend.isAvailable;
 
+  // Initialize backend debug state from server on mount
+  useEffect(() => {
+    if (!backendAvailable) return;
+    const fetchDebugState = async () => {
+      try {
+        const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
+        const res = await fetch('/api/logs/debug', {
+          headers: { Authorization: `Bearer ${secret}` },
+        });
+        if (res.ok) {
+          const data = await res.json();
+          setBackendDebug(data.debugMode);
+          sessionStorage.setItem('gsm:backend-debug', String(data.debugMode));
+        }
+      } catch {
+        // Backend unreachable, keep false
+      }
+    };
+    fetchDebugState();
+  }, [backendAvailable]);
+
   // Log entries state
   const [entries, setEntries] = useState<LogEntry[]>(() => logger.getEntries());
   const [backendEntries, setBackendEntries] = useState<LogEntry[]>([]);
@@ -165,15 +186,6 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
     return Array.from(types).sort();
   }, [allEntries]);
 
-  // Derived: available modules
-  const availableModules = useMemo(() => {
-    const mods = new Set<string>();
-    for (const entry of allEntries) {
-      mods.add(entry.module);
-    }
-    return Array.from(mods).sort();
-  }, [allEntries]);
-
   // Filter entries
   const filteredEntries = useMemo(() => {
     return allEntries.filter(entry => {
@@ -204,11 +216,9 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
   // Toggle backend debug mode
   const toggleBackendDebug = useCallback(async () => {
     const next = !backendDebug;
-    setBackendDebug(next);
-    sessionStorage.setItem('gsm:backend-debug', String(next));
     try {
       const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
-      await fetch('/api/logs/debug', {
+      const res = await fetch('/api/logs/debug', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -216,8 +226,13 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
         },
         body: JSON.stringify({ enabled: next }),
       });
+      if (res.ok) {
+        const data = await res.json();
+        setBackendDebug(data.debugMode);
+        sessionStorage.setItem('gsm:backend-debug', String(data.debugMode));
+      }
     } catch {
-      // Backend unreachable
+      // Backend unreachable, don't update state
     }
   }, [backendDebug]);
 
@@ -271,9 +286,9 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
       const minLevel = selectedLevels.size > 0
         ? (Object.entries(levelOrder).find(([l]) => selectedLevels.has(l as LogLevel))?.[1] ?? 3)
         : 3;
-      const minLevelName = (Object.entries(levelOrder).find(([_, v]) => v === minLevel)?.[0] as LogLevel) || 'info';
+      const minLevelName = (Object.entries(levelOrder).find(([, v]) => v === minLevel)?.[0] as LogLevel) || 'info';
 
-      let frontendLogs = selectedScope !== 'backend'
+      const frontendLogs = selectedScope !== 'backend'
         ? logger.getEntries({ level: minLevelName }).filter(e => selectedLevels.has(e.level))
         : [];
       let backendLogs: LogEntry[] = [];
@@ -461,7 +476,7 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
         <div className="flex items-center space-x-2">
           <span className="text-sm font-medium text-gray-900 dark:text-text-primary">{t('级别', 'Level')}:</span>
           {(['debug', 'info', 'warn', 'error'] as LogLevel[]).map(level => {
-            const disabled = level === 'debug' && !frontendDebug && selectedScope !== 'backend';
+            const disabled = level === 'debug' && !frontendDebug && !(selectedScope === 'backend' || (selectedScope === 'all' && backendDebug));
             const selected = selectedLevels.has(level);
             return (
               <button
diff --git a/src/services/aiService.ts b/src/services/aiService.ts
index 52e9ac25..52dc3e60 100644
--- a/src/services/aiService.ts
+++ b/src/services/aiService.ts
@@ -766,7 +766,7 @@ ${repoInfo}
         logger.info('ai', 'AI semantic search completed', { resultCount: results.length, apiType: this.getApiType(), model: this.config.model, durationMs: Date.now() - startTime });
         return results;
       }
-    } catch (error) {
+    } catch {
       logger.warn('ai', 'AI semantic search failed, falling back to enhanced basic search', { apiType: this.getApiType(), model: this.config.model, configId: this.config.id, durationMs: Date.now() - startTime });
     }
 
diff --git a/src/services/webdavService.ts b/src/services/webdavService.ts
index c1729de8..94f1ace2 100644
--- a/src/services/webdavService.ts
+++ b/src/services/webdavService.ts
@@ -206,7 +206,7 @@ export class WebDAVService {
       const uploadOperation = async (): Promise<boolean> => {
         const controller = new AbortController();
         const timeoutId = setTimeout(() => controller.abort(), dynamicTimeout);
-        const sanitizedPath = this.getFullPath(filename).replace(/^https?:\/\/[^\/]+/, '');
+        const sanitizedPath = this.getFullPath(filename).replace(/^https?:\/\/[^/]+/, '');
         const startTime = Date.now();
 
         try {
@@ -313,7 +313,7 @@ export class WebDAVService {
     try {
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), 30000); // 30秒超时
-      const sanitizedPath = this.getFullPath(filename).replace(/^https?:\/\/[^\/]+/, '');
+      const sanitizedPath = this.getFullPath(filename).replace(/^https?:\/\/[^/]+/, '');
       const startTime = Date.now();
 
       try {

From 91f872d0d38062654c60f497ed4d57cb2afd4274 Mon Sep 17 00:00:00 2001
From: AmintaCCCP <libogege@sina.com>
Date: Fri, 29 May 2026 23:08:05 +0800
Subject: [PATCH 3/6] fix: close event-type dropdown on outside click and
 Escape

- Add useRef to imports
- Add eventTypeRef for dropdown wrapper
- Add useEffect to handle mousedown outside and Escape key
- Attach ref to dropdown wrapper div

Addresses CodeRabbit nitpick comment.
---
 .../settings/DiagnosticLogsPanel.tsx          | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/DiagnosticLogsPanel.tsx b/src/components/settings/DiagnosticLogsPanel.tsx
index b387d37c..fe39cb0d 100644
--- a/src/components/settings/DiagnosticLogsPanel.tsx
+++ b/src/components/settings/DiagnosticLogsPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import {
   ScrollText,
   Search,
@@ -116,6 +116,26 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
   const [selectedScope, setSelectedScope] = useState<'all' | 'frontend' | 'backend'>('all');
   const [selectedEventTypes, setSelectedEventTypes] = useState<Set<LogEventType>>(new Set());
   const [showEventTypeDropdown, setShowEventTypeDropdown] = useState(false);
+  const eventTypeRef = useRef<HTMLDivElement>(null);
+
+  // Close event type dropdown on outside click or Escape
+  useEffect(() => {
+    if (!showEventTypeDropdown) return;
+    const onDocClick = (e: MouseEvent) => {
+      if (eventTypeRef.current && !eventTypeRef.current.contains(e.target as Node)) {
+        setShowEventTypeDropdown(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setShowEventTypeDropdown(false);
+    };
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [showEventTypeDropdown]);
 
   // Real-time frontend log subscription
   useEffect(() => {
@@ -516,7 +536,7 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
           </div>
 
           {/* Event type dropdown */}
-          <div className="relative">
+          <div className="relative" ref={eventTypeRef}>
             <button
               onClick={() => setShowEventTypeDropdown(!showEventTypeDropdown)}
               className="px-3 py-1.5 text-sm rounded-lg border border-black/[0.06] dark:border-white/[0.04] bg-transparent text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06] flex items-center space-x-1"

From e66bf056ed681cbfa95d3ae7e43b9f8d2b8b5b50 Mon Sep 17 00:00:00 2001
From: AmintaCCCP <libogege@sina.com>
Date: Fri, 29 May 2026 23:33:22 +0800
Subject: [PATCH 4/6] fix: improve diagnostic logs panel UX

- Sort logs by time descending (newest first)
- Add pagination with 'Load More' button (100 entries per page)
- Fix debug pill: always clickable, regardless of debug mode state
- Replace inline expansion with click-to-modal detail view
- Add Chrome DevTools-style tabs in detail modal (General, Timing, Request Header, Request Body, Response Header, Response Body)
- Add floating global debug indicator (bottom-right) with click to disable
- Auto-refresh backend logs every 10 seconds
- Reset pagination when filters change
---
 .../settings/DiagnosticLogsPanel.tsx          | 830 +++++++++---------
 1 file changed, 422 insertions(+), 408 deletions(-)

diff --git a/src/components/settings/DiagnosticLogsPanel.tsx b/src/components/settings/DiagnosticLogsPanel.tsx
index fe39cb0d..65ac22ea 100644
--- a/src/components/settings/DiagnosticLogsPanel.tsx
+++ b/src/components/settings/DiagnosticLogsPanel.tsx
@@ -12,6 +12,7 @@ import {
   AlertTriangle,
   ChevronDown,
   ChevronRight,
+  X,
 } from 'lucide-react';
 import { logger, LogLevel, LogEntry } from '../../services/logger';
 import { backend } from '../../services/backendAdapter';
@@ -37,6 +38,17 @@ const STATUS_COLORS: Record<string, string> = {
   '5': 'text-red-600 dark:text-red-400',
 };
 
+type ModalTab = 'general' | 'timing' | 'requestHeader' | 'requestBody' | 'responseHeader' | 'responseBody';
+
+const MODAL_TABS: { id: ModalTab; zh: string; en: string }[] = [
+  { id: 'general', zh: '概览', en: 'General' },
+  { id: 'timing', zh: '耗时', en: 'Timing & Notes' },
+  { id: 'requestHeader', zh: '请求头', en: 'Request Header' },
+  { id: 'requestBody', zh: '请求体', en: 'Request Body' },
+  { id: 'responseHeader', zh: '返回头', en: 'Response Header' },
+  { id: 'responseBody', zh: '返回体', en: 'Response Body' },
+];
+
 function formatRelativeTime(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime();
   if (diff < 60000) return `${Math.floor(diff / 1000)}s`;
@@ -45,27 +57,204 @@ function formatRelativeTime(iso: string): string {
   return `${Math.floor(diff / 86400000)}d`;
 }
 
-function getHttpSummary(data: unknown): string | null {
-  if (!data || typeof data !== 'object' || Array.isArray(data)) return null;
-  const d = data as Record<string, unknown>;
-  if (!d.method && !d.status && !d.durationMs) return null;
-  const parts: string[] = [];
-  if (d.method) parts.push(String(d.method));
-  if (d.endpoint || d.path) parts.push(String(d.endpoint ?? d.path));
-  if (d.status) {
-    parts.push(`→ ${String(d.status)}`);
-  }
-  if (d.durationMs) parts.push(`(${d.durationMs}ms)`);
-  return parts.length > 0 ? parts.join(' ') : null;
-}
-
 function getStatusColor(status: unknown): string {
   if (!status) return '';
   const s = String(status);
-  const firstDigit = s.charAt(0);
-  return STATUS_COLORS[firstDigit] || '';
+  return STATUS_COLORS[s.charAt(0)] || '';
+}
+
+const PAGE_SIZE = 100;
+
+// ─── Detail Modal ──────────────────────────────────────────────
+interface LogDetailModalProps {
+  entry: LogEntry;
+  language: string;
+  t: (zh: string, en: string) => string;
+  onClose: () => void;
+}
+
+const LogDetailModal: React.FC<LogDetailModalProps> = ({ entry, language, t, onClose }) => {
+  const [activeTab, setActiveTab] = useState<ModalTab>('general');
+  const eventType = inferEventType(entry.module, entry.message);
+  const entryData = entry.data as Record<string, unknown> | undefined;
+
+  // Escape to close
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 'general':
+        return (
+          <div className="space-y-3 text-sm">
+            <Row label={t('级别', 'Level')}>
+              <span className={`px-2 py-0.5 text-xs rounded-full font-medium ${LEVEL_COLORS[entry.level]}`}>{entry.level}</span>
+            </Row>
+            <Row label={t('来源', 'Source')}>
+              <span className={`px-2 py-0.5 text-xs rounded-full ${entry.source === 'frontend' ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-400' : 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'}`}>
+                {entry.source === 'frontend' ? t('前端', 'Frontend') : t('后端', 'Backend')}
+              </span>
+            </Row>
+            <Row label={t('事件类型', 'Event Type')}>
+              <span className="text-sm">{language === 'zh' ? EVENT_TYPE_LABELS[eventType].zh : EVENT_TYPE_LABELS[eventType].en}</span>
+            </Row>
+            <Row label={t('模块', 'Module')}>
+              <span className="font-mono text-xs">{entry.module}</span>
+            </Row>
+            <Row label={t('消息', 'Message')}>
+              <span className="break-words">{entry.message}</span>
+            </Row>
+            <Row label={t('时间', 'Timestamp')}>
+              <span className="font-mono text-xs">{entry.timestamp}</span>
+            </Row>
+            {entryData?.status && (
+              <Row label={t('状态码', 'Status')}>
+                <span className={`font-bold ${getStatusColor(entryData.status)}`}>{String(entryData.status)}</span>
+              </Row>
+            )}
+          </div>
+        );
+      case 'timing':
+        return (
+          <div className="space-y-3 text-sm">
+            {entryData?.durationMs != null && (
+              <Row label={t('耗时', 'Duration')}>
+                <span className="font-mono">{String(entryData.durationMs)}ms</span>
+              </Row>
+            )}
+            {entryData?.method && (
+              <Row label={t('方法', 'Method')}>
+                <span className="font-mono">{String(entryData.method)}</span>
+              </Row>
+            )}
+            {(entryData?.endpoint || entryData?.path) && (
+              <Row label={t('路径', 'Path')}>
+                <span className="font-mono break-all">{String(entryData.endpoint ?? entryData.path)}</span>
+              </Row>
+            )}
+            {entryData?.apiType && (
+              <Row label={t('API 类型', 'API Type')}>
+                <span className="font-mono">{String(entryData.apiType)}</span>
+              </Row>
+            )}
+            {entryData?.model && (
+              <Row label={t('模型', 'Model')}>
+                <span className="font-mono">{String(entryData.model)}</span>
+              </Row>
+            )}
+            {entryData?.responseLength != null && (
+              <Row label={t('响应长度', 'Response Length')}>
+                <span className="font-mono">{String(entryData.responseLength)} chars</span>
+              </Row>
+            )}
+            {!entryData?.durationMs && !entryData?.method && (
+              <p className="text-gray-400 dark:text-text-quaternary italic">{t('无耗时信息（需开启调试模式）', 'No timing info (enable debug mode)')}</p>
+            )}
+          </div>
+        );
+      case 'requestHeader':
+        return <DataBlock data={entryData?.requestHeaders} t={t} emptyText={t('无请求头数据', 'No request header data')} />;
+      case 'requestBody':
+        return <DataBlock data={entryData?.requestBody} t={t} emptyText={t('无请求体数据', 'No request body data')} />;
+      case 'responseHeader':
+        return <DataBlock data={entryData?.responseHeaders} t={t} emptyText={t('无返回头数据', 'No response header data')} />;
+      case 'responseBody':
+        return <DataBlock data={entryData?.responseBody ?? entryData?.data} t={t} emptyText={t('无返回体数据（完整数据见概览标签）', 'No response body data (see General tab)')} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" onClick={onClose}>
+      <div
+        className="w-full max-w-3xl max-h-[80vh] bg-white dark:bg-panel-dark rounded-2xl shadow-2xl overflow-hidden flex flex-col"
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-black/[0.06] dark:border-white/[0.04]">
+          <div className="flex items-center space-x-3 min-w-0">
+            <span className={`px-2 py-0.5 text-xs rounded-full font-medium shrink-0 ${LEVEL_COLORS[entry.level]}`}>{entry.level}</span>
+            <span className="font-medium text-gray-900 dark:text-text-primary truncate">{entry.message}</span>
+          </div>
+          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-white/[0.06] transition-colors shrink-0 ml-2">
+            <X className="w-5 h-5 text-gray-500 dark:text-text-tertiary" />
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex border-b border-black/[0.06] dark:border-white/[0.04] px-5 overflow-x-auto">
+          {MODAL_TABS.map(tab => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`px-3 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-colors ${
+                activeTab === tab.id
+                  ? 'border-brand-indigo text-brand-indigo dark:text-brand-violet'
+                  : 'border-transparent text-gray-500 dark:text-text-tertiary hover:text-gray-700 dark:hover:text-text-secondary'
+              }`}
+            >
+              {language === 'zh' ? tab.zh : tab.en}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-5">
+          {renderTabContent()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Row: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
+  <div className="flex items-start space-x-3">
+    <span className="text-gray-500 dark:text-text-tertiary w-24 shrink-0 pt-0.5">{label}</span>
+    <div className="flex-1">{children}</div>
+  </div>
+);
+
+const DataBlock: React.FC<{ data: unknown; t: (zh: string, en: string) => string; emptyText: string }> = ({ data, t, emptyText }) => {
+  if (data == null) {
+    return <p className="text-gray-400 dark:text-text-quaternary text-sm italic">{emptyText}</p>;
+  }
+  const text = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+  return (
+    <pre className="text-xs bg-gray-50 dark:bg-white/[0.02] rounded-lg p-3 overflow-auto max-h-[400px] font-mono text-gray-700 dark:text-text-secondary whitespace-pre-wrap break-all">
+      {text}
+    </pre>
+  );
+};
+
+// ─── Global Debug Indicator ────────────────────────────────────
+interface DebugModeIndicatorProps {
+  frontendDebug: boolean;
+  backendDebug: boolean;
+  onToggleFrontend: () => void;
+  t: (zh: string, en: string) => string;
 }
 
+const DebugModeIndicator: React.FC<DebugModeIndicatorProps> = ({ frontendDebug, backendDebug, onToggleFrontend, t }) => {
+  if (!frontendDebug && !backendDebug) return null;
+  return (
+    <button
+      onClick={onToggleFrontend}
+      className="fixed bottom-6 right-6 z-40 flex items-center space-x-2 px-3 py-2 bg-green-500 text-white rounded-full shadow-lg hover:bg-green-600 transition-colors text-sm font-medium"
+      title={t('点击关闭调试模式', 'Click to disable debug mode')}
+    >
+      <span className="w-2 h-2 rounded-full bg-white animate-pulse" />
+      <span>{t('调试中', 'DEBUG')}</span>
+      {frontendDebug && <span className="text-xs opacity-80">FE</span>}
+      {backendDebug && <span className="text-xs opacity-80">BE</span>}
+    </button>
+  );
+};
+
+// ─── Main Panel ────────────────────────────────────────────────
 export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) => {
   const language = useAppStore.getState().language;
 
@@ -95,9 +284,7 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
           setBackendDebug(data.debugMode);
           sessionStorage.setItem('gsm:backend-debug', String(data.debugMode));
         }
-      } catch {
-        // Backend unreachable, keep false
-      }
+      } catch { /* Backend unreachable */ }
     };
     fetchDebugState();
   }, [backendAvailable]);
@@ -108,7 +295,10 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
   const [backendLogCount, setBackendLogCount] = useState(0);
   const [isExporting, setIsExporting] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const [expandedData, setExpandedData] = useState<Set<string>>(new Set());
+  const [detailEntry, setDetailEntry] = useState<LogEntry | null>(null);
+
+  // Pagination
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
 
   // Filter state
   const [searchQuery, setSearchQuery] = useState('');
@@ -148,9 +338,7 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
         });
       }
     };
-    const handleLogsCleared = () => {
-      setEntries([]);
-    };
+    const handleLogsCleared = () => { setEntries([]); };
     window.addEventListener('gsm:diagnostic-log-added', handleLogAdded);
     window.addEventListener('gsm:diagnostic-logs-cleared', handleLogsCleared);
     return () => {
@@ -161,19 +349,12 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
 
   // Backend log fetching
   useEffect(() => {
-    if (selectedScope === 'frontend') {
-      setBackendEntries([]);
-      setBackendLogCount(0);
-      return;
-    }
+    if (selectedScope === 'frontend') { setBackendEntries([]); setBackendLogCount(0); return; }
     if (!backendAvailable) return;
-
     const fetchBackend = async () => {
       try {
         const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
-        const res = await fetch('/api/logs?limit=2000', {
-          headers: { Authorization: `Bearer ${secret}` },
-        });
+        const res = await fetch('/api/logs?limit=2000', { headers: { Authorization: `Bearer ${secret}` } });
         if (res.ok) {
           const raw = await res.json();
           const logs = Array.isArray(raw) ? raw : [];
@@ -181,28 +362,24 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
           const totalHeader = res.headers.get('X-Log-Count');
           setBackendLogCount(totalHeader ? parseInt(totalHeader) || 0 : logs.length);
         }
-      } catch {
-        // Backend unreachable
-      }
+      } catch { /* Backend unreachable */ }
     };
     fetchBackend();
     const interval = setInterval(fetchBackend, 10000);
     return () => clearInterval(interval);
   }, [selectedScope, backendAvailable]);
 
-  // Merge entries
+  // Merge entries — sorted by timestamp DESCENDING (newest first)
   const allEntries = useMemo(() => {
     if (selectedScope === 'frontend') return entries;
     if (selectedScope === 'backend') return backendEntries;
-    return [...entries, ...backendEntries].sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+    return [...entries, ...backendEntries].sort((a, b) => b.timestamp.localeCompare(a.timestamp));
   }, [entries, backendEntries, selectedScope]);
 
   // Derived: available event types
   const availableEventTypes = useMemo(() => {
     const types = new Set<LogEventType>();
-    for (const entry of allEntries) {
-      types.add(inferEventType(entry.module, entry.message));
-    }
+    for (const entry of allEntries) types.add(inferEventType(entry.module, entry.message));
     return Array.from(types).sort();
   }, [allEntries]);
 
@@ -219,6 +396,12 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
     });
   }, [allEntries, selectedLevels, selectedEventTypes, searchQuery]);
 
+  // Visible entries (pagination)
+  const visibleEntries = useMemo(() => filteredEntries.slice(0, visibleCount), [filteredEntries, visibleCount]);
+
+  // Reset visible count when filters change
+  useEffect(() => { setVisibleCount(PAGE_SIZE); }, [searchQuery, selectedLevels, selectedEventTypes, selectedScope]);
+
   // Frontend counts
   const frontendCounts = useMemo(() => logger.getCounts(), [entries]);
 
@@ -240,10 +423,7 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
       const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
       const res = await fetch('/api/logs/debug', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${secret}`,
-        },
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${secret}` },
         body: JSON.stringify({ enabled: next }),
       });
       if (res.ok) {
@@ -251,54 +431,43 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
         setBackendDebug(data.debugMode);
         sessionStorage.setItem('gsm:backend-debug', String(data.debugMode));
       }
-    } catch {
-      // Backend unreachable, don't update state
-    }
+    } catch { /* Backend unreachable */ }
   }, [backendDebug]);
 
+  // Quick disable debug from global indicator
+  const disableAllDebug = useCallback(() => {
+    if (frontendDebug) toggleFrontendDebug();
+    if (backendDebug) toggleBackendDebug();
+  }, [frontendDebug, backendDebug, toggleFrontendDebug, toggleBackendDebug]);
+
   // Clear logs
   const handleClear = useCallback(async () => {
-    if (selectedScope === 'frontend' || selectedScope === 'all') {
-      logger.clear();
-      setEntries([]);
-    }
+    if (selectedScope === 'frontend' || selectedScope === 'all') { logger.clear(); setEntries([]); }
     if ((selectedScope === 'backend' || selectedScope === 'all') && backendAvailable) {
       try {
         const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
-        await fetch('/api/logs', {
-          method: 'DELETE',
-          headers: { Authorization: `Bearer ${secret}` },
-        });
-        setBackendEntries([]);
-        setBackendLogCount(0);
-      } catch {
-        // Backend unreachable
-      }
+        await fetch('/api/logs', { method: 'DELETE', headers: { Authorization: `Bearer ${secret}` } });
+        setBackendEntries([]); setBackendLogCount(0);
+      } catch { /* Backend unreachable */ }
     }
   }, [selectedScope, backendAvailable]);
 
-  // Refresh backend entries
+  // Refresh
   const handleRefresh = useCallback(async () => {
     setIsRefreshing(true);
     try {
       const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
-      const res = await fetch('/api/logs?limit=2000', {
-        headers: { Authorization: `Bearer ${secret}` },
-      });
+      const res = await fetch('/api/logs?limit=2000', { headers: { Authorization: `Bearer ${secret}` } });
       if (res.ok) {
         const raw = await res.json();
         setBackendEntries(Array.isArray(raw) ? raw : []);
         const totalHeader = res.headers.get('X-Log-Count');
         setBackendLogCount(totalHeader ? parseInt(totalHeader) || 0 : raw.length);
       }
-    } catch {
-      // Backend unreachable
-    } finally {
-      setIsRefreshing(false);
-    }
+    } catch { /* Backend unreachable */ } finally { setIsRefreshing(false); }
   }, []);
 
-  // Export logs
+  // Export
   const handleExport = useCallback(async () => {
     setIsExporting(true);
     try {
@@ -307,26 +476,16 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
         ? (Object.entries(levelOrder).find(([l]) => selectedLevels.has(l as LogLevel))?.[1] ?? 3)
         : 3;
       const minLevelName = (Object.entries(levelOrder).find(([, v]) => v === minLevel)?.[0] as LogLevel) || 'info';
-
       const frontendLogs = selectedScope !== 'backend'
-        ? logger.getEntries({ level: minLevelName }).filter(e => selectedLevels.has(e.level))
-        : [];
+        ? logger.getEntries({ level: minLevelName }).filter(e => selectedLevels.has(e.level)) : [];
       let backendLogs: LogEntry[] = [];
       if (selectedScope !== 'frontend' && backendAvailable) {
         try {
           const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
-          const res = await fetch(`/api/logs?limit=2000&level=${minLevelName}`, {
-            headers: { Authorization: `Bearer ${secret}` },
-          });
-          if (res.ok) {
-            const raw = await res.json();
-            backendLogs = Array.isArray(raw) ? raw.filter((e: LogEntry) => selectedLevels.has(e.level)) : [];
-          }
-        } catch {
-          // Backend unreachable
-        }
+          const res = await fetch(`/api/logs?limit=2000&level=${minLevelName}`, { headers: { Authorization: `Bearer ${secret}` } });
+          if (res.ok) { const raw = await res.json(); backendLogs = Array.isArray(raw) ? raw.filter((e: LogEntry) => selectedLevels.has(e.level)) : []; }
+        } catch { /* Backend unreachable */ }
       }
-
       const state = useAppStore.getState();
       const isElectron = typeof window !== 'undefined' && window.electronAPI;
       const environment = {
@@ -342,365 +501,220 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
         backendDebugMode: backendDebug,
         appVersion,
       };
-
       const exportData = {
         format: 'github-stars-manager-logs-v1',
         exportDate: new Date().toISOString(),
-        appVersion,
-        environment,
-        sanitizationNote: t(
-          '所有 Token、API Key、密码、邮箱已脱敏为 ***格式',
-          'All tokens, API keys, passwords, and emails have been masked as ***<last4>'
-        ),
-        frontendLogs,
-        backendLogs,
+        appVersion, environment,
+        sanitizationNote: t('所有 Token、API Key、密码、邮箱已脱敏为 ***格式', 'All tokens, API keys, passwords, and emails have been masked as ***<last4>'),
+        frontendLogs, backendLogs,
       };
-
       const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
       const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
+      const a = document.createElement('a'); a.href = url;
       a.download = `github-stars-manager-logs-${new Date().toISOString().split('T')[0]}.json`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    } catch {
-      // Export failed
-    } finally {
-      setIsExporting(false);
-    }
+      document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url);
+    } catch { /* Export failed */ } finally { setIsExporting(false); }
   }, [selectedScope, selectedLevels, backendAvailable, frontendDebug, backendDebug, t]);
 
-  // Toggle level
   const toggleLevel = useCallback((level: LogLevel) => {
-    setSelectedLevels(prev => {
-      const next = new Set(prev);
-      if (next.has(level)) next.delete(level);
-      else next.add(level);
-      return next;
-    });
-  }, []);
-
-  // Toggle event type
-  const toggleEventType = useCallback((eventType: LogEventType) => {
-    setSelectedEventTypes(prev => {
-      const next = new Set(prev);
-      if (next.has(eventType)) next.delete(eventType);
-      else next.add(eventType);
-      return next;
-    });
+    setSelectedLevels(prev => { const next = new Set(prev); if (next.has(level)) next.delete(level); else next.add(level); return next; });
   }, []);
 
-  // Toggle data expansion
-  const toggleDataExpand = useCallback((id: string) => {
-    setExpandedData(prev => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
+  const toggleEventType = useCallback((et: LogEventType) => {
+    setSelectedEventTypes(prev => { const next = new Set(prev); if (next.has(et)) next.delete(et); else next.add(et); return next; });
   }, []);
 
   const totalCount = allEntries.length;
 
   return (
-    <div className="space-y-4">
-      {/* Debug Mode Section */}
-      <section>
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-text-primary mb-4 flex items-center">
-          <ScrollText className="w-5 h-5 mr-2 text-gray-700 dark:text-text-secondary" />
-          {t('调试模式', 'Debug Mode')}
-        </h3>
-        <div className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] p-4 space-y-4">
-          {/* Frontend debug toggle */}
-          <div className="flex items-center justify-between">
-            <div className="flex-1">
-              <div className="flex items-center space-x-2">
-                <span className="font-medium text-gray-900 dark:text-text-primary">{t('前端调试', 'Frontend Debug')}</span>
-                <span className={`text-xs px-2 py-0.5 rounded-full ${frontendDebug ? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400'}`}>
-                  {frontendDebug ? t('已开启', 'ON') : t('已关闭', 'OFF')}
-                </span>
+    <>
+      {/* Global debug indicator (floats on all pages) */}
+      <DebugModeIndicator frontendDebug={frontendDebug} backendDebug={backendDebug} onToggleFrontend={disableAllDebug} t={t} />
+
+      {/* Detail modal */}
+      {detailEntry && <LogDetailModal entry={detailEntry} language={language} t={t} onClose={() => setDetailEntry(null)} />}
+
+      <div className="space-y-4">
+        {/* Debug Mode Section */}
+        <section>
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-text-primary mb-4 flex items-center">
+            <ScrollText className="w-5 h-5 mr-2 text-gray-700 dark:text-text-secondary" />
+            {t('调试模式', 'Debug Mode')}
+          </h3>
+          <div className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] p-4 space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex-1">
+                <div className="flex items-center space-x-2">
+                  <span className="font-medium text-gray-900 dark:text-text-primary">{t('前端调试', 'Frontend Debug')}</span>
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${frontendDebug ? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400'}`}>
+                    {frontendDebug ? t('已开启', 'ON') : t('已关闭', 'OFF')}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-500 dark:text-text-tertiary mt-1">
+                  {t('开启后将记录所有前端 HTTP 请求详情（方法、路径、状态码、耗时）', 'Records all frontend HTTP request details (method, path, status, duration)')}
+                </p>
               </div>
-              <p className="text-sm text-gray-500 dark:text-text-tertiary mt-1">
-                {t('开启后将记录所有前端 HTTP 请求详情（方法、路径、状态码、耗时）', 'Records all frontend HTTP request details (method, path, status, duration)')}
-              </p>
+              <button onClick={toggleFrontendDebug} className={`p-2 rounded-lg transition-colors ${frontendDebug ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'}`}>
+                {frontendDebug ? <ToggleRight className="w-8 h-8" /> : <ToggleLeft className="w-8 h-8" />}
+              </button>
             </div>
-            <button
-              onClick={toggleFrontendDebug}
-              className={`p-2 rounded-lg transition-colors ${frontendDebug ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'}`}
-              aria-label={frontendDebug ? t('关闭前端调试', 'Disable frontend debug') : t('开启前端调试', 'Enable frontend debug')}
-            >
-              {frontendDebug ? <ToggleRight className="w-8 h-8" /> : <ToggleLeft className="w-8 h-8" />}
-            </button>
-          </div>
-
-          {/* Backend debug toggle */}
-          <div className="flex items-center justify-between">
-            <div className="flex-1">
-              <div className="flex items-center space-x-2">
-                <span className={`font-medium ${backendAvailable ? 'text-gray-900 dark:text-text-primary' : 'text-gray-400 dark:text-text-quaternary'}`}>
-                  {t('后端调试', 'Backend Debug')}
-                </span>
-                <span className={`text-xs px-2 py-0.5 rounded-full ${backendDebug ? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400'}`}>
-                  {backendAvailable
-                    ? (backendDebug ? t('已开启', 'ON') : t('已关闭', 'OFF'))
-                    : t('后端未连接', 'Not connected')}
-                </span>
+            <div className="flex items-center justify-between">
+              <div className="flex-1">
+                <div className="flex items-center space-x-2">
+                  <span className={`font-medium ${backendAvailable ? 'text-gray-900 dark:text-text-primary' : 'text-gray-400 dark:text-text-quaternary'}`}>{t('后端调试', 'Backend Debug')}</span>
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${backendDebug ? 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400' : 'bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400'}`}>
+                    {backendAvailable ? (backendDebug ? t('已开启', 'ON') : t('已关闭', 'OFF')) : t('后端未连接', 'Not connected')}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-500 dark:text-text-tertiary mt-1">{t('开启后将记录所有后端 HTTP 请求详情', 'Records all backend HTTP request details')}</p>
               </div>
-              <p className="text-sm text-gray-500 dark:text-text-tertiary mt-1">
-                {t('开启后将记录所有后端 HTTP 请求详情', 'Records all backend HTTP request details')}
-              </p>
+              <button onClick={backendAvailable ? toggleBackendDebug : undefined} disabled={!backendAvailable}
+                className={`p-2 rounded-lg transition-colors ${!backendAvailable ? 'opacity-50 cursor-not-allowed' : ''} ${backendDebug ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'}`}>
+                {backendDebug ? <ToggleRight className="w-8 h-8" /> : <ToggleLeft className="w-8 h-8" />}
+              </button>
+            </div>
+            <div className="flex items-center space-x-2 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 p-2 rounded-lg">
+              <AlertTriangle className="w-4 h-4" />
+              <span>{t('调试模式会产生大量日志，仅用于排障时短暂开启', 'Debug mode produces many logs — enable briefly only for troubleshooting')}</span>
             </div>
-            <button
-              onClick={backendAvailable ? toggleBackendDebug : undefined}
-              disabled={!backendAvailable}
-              className={`p-2 rounded-lg transition-colors ${!backendAvailable ? 'opacity-50 cursor-not-allowed' : ''} ${backendDebug ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'}`}
-              aria-label={backendDebug ? t('关闭后端调试', 'Disable backend debug') : t('开启后端调试', 'Enable backend debug')}
-            >
-              {backendDebug ? <ToggleRight className="w-8 h-8" /> : <ToggleLeft className="w-8 h-8" />}
-            </button>
           </div>
+        </section>
 
-          {/* Warning */}
-          <div className="flex items-center space-x-2 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 p-2 rounded-lg">
-            <AlertTriangle className="w-4 h-4" />
-            <span>{t('调试模式会产生大量日志，仅用于排障时短暂开启', 'Debug mode produces many logs — enable briefly only for troubleshooting')}</span>
-          </div>
+        {/* Privacy Notice */}
+        <div className="flex items-center space-x-2 text-xs text-gray-500 dark:text-text-tertiary bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 p-3 rounded-lg">
+          <ShieldCheck className="w-4 h-4 text-amber-600 dark:text-amber-400 shrink-0" />
+          <span>{t('日志仅记录端点、模型、状态、耗时和错误摘要。所有 Token、API Key、密码、邮箱已自动脱敏为 ***格式', 'Logs store only endpoints, models, status, duration, and error summaries. All sensitive info is automatically masked as ***')}</span>
         </div>
-      </section>
-
-      {/* Privacy Notice */}
-      <div className="flex items-center space-x-2 text-xs text-gray-500 dark:text-text-tertiary bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 p-3 rounded-lg">
-        <ShieldCheck className="w-4 h-4 text-amber-600 dark:text-amber-400" />
-        <span>
-          {t('日志仅记录端点、模型、状态、耗时和错误摘要。所有 Token、API Key、密码、邮箱已自动脱敏为 ***格式', 'Logs store only endpoints, models, status, duration, and error summaries. All sensitive info (Token, API Key, password, email) is automatically masked as ***')}
-        </span>
-      </div>
 
-      {/* Toolbar */}
-      <section className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] p-4 space-y-3">
-        {/* Search */}
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" />
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={e => setSearchQuery(e.target.value)}
-            placeholder={t('搜索模块或消息...', 'Search module or message...')}
-            className="w-full pl-10 pr-4 py-2 rounded-lg border border-black/[0.06] dark:border-white/[0.04] bg-light-surface dark:bg-white/[0.04] text-gray-900 dark:text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-brand-violet"
-          />
-        </div>
+        {/* Toolbar */}
+        <section className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] p-4 space-y-3">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" />
+            <input type="text" value={searchQuery} onChange={e => setSearchQuery(e.target.value)}
+              placeholder={t('搜索模块或消息...', 'Search module or message...')}
+              className="w-full pl-10 pr-4 py-2 rounded-lg border border-black/[0.06] dark:border-white/[0.04] bg-light-surface dark:bg-white/[0.04] text-gray-900 dark:text-text-primary text-sm focus:outline-none focus:ring-2 focus:ring-brand-violet" />
+          </div>
 
-        {/* Level pills */}
-        <div className="flex items-center space-x-2">
-          <span className="text-sm font-medium text-gray-900 dark:text-text-primary">{t('级别', 'Level')}:</span>
-          {(['debug', 'info', 'warn', 'error'] as LogLevel[]).map(level => {
-            const disabled = level === 'debug' && !frontendDebug && !(selectedScope === 'backend' || (selectedScope === 'all' && backendDebug));
-            const selected = selectedLevels.has(level);
-            return (
-              <button
-                key={level}
-                onClick={disabled ? undefined : () => toggleLevel(level)}
-                disabled={disabled}
-                className={`px-3 py-1 text-sm rounded-full transition-colors border ${
-                  selected
-                    ? LEVEL_COLORS[level]
-                    : 'border-gray-200 dark:border-white/[0.06] text-gray-500 dark:text-text-tertiary bg-transparent'
-                } ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}`}
-              >
+          {/* Level pills — debug pill always clickable */}
+          <div className="flex items-center space-x-2">
+            <span className="text-sm font-medium text-gray-900 dark:text-text-primary">{t('级别', 'Level')}:</span>
+            {(['debug', 'info', 'warn', 'error'] as LogLevel[]).map(level => (
+              <button key={level} onClick={() => toggleLevel(level)}
+                className={`px-3 py-1 text-sm rounded-full transition-colors border cursor-pointer ${selectedLevels.has(level) ? LEVEL_COLORS[level] : 'border-gray-200 dark:border-white/[0.06] text-gray-500 dark:text-text-tertiary bg-transparent'}`}>
                 {level}
               </button>
-            );
-          })}
-        </div>
-
-        {/* Scope + Event type + Actions row */}
-        <div className="flex items-center space-x-3 flex-wrap gap-y-2">
-          {/* Scope toggle */}
-          <div className="flex items-center rounded-lg border border-black/[0.06] dark:border-white/[0.04] overflow-hidden">
-            {(['all', 'frontend', 'backend'] as const).map(scope => (
-              <button
-                key={scope}
-                onClick={() => setSelectedScope(scope)}
-                disabled={scope === 'backend' && !backendAvailable}
-                className={`px-3 py-1.5 text-sm transition-colors ${
-                  selectedScope === scope
-                    ? 'bg-brand-indigo text-white'
-                    : 'bg-transparent text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06]'
-                } ${scope === 'backend' && !backendAvailable ? 'opacity-40 cursor-not-allowed' : ''}`}
-              >
-                {scope === 'all' ? t('全部', 'All') : scope === 'frontend' ? t('前端', 'Frontend') : t('后端', 'Backend')}
-              </button>
             ))}
           </div>
 
-          {/* Event type dropdown */}
-          <div className="relative" ref={eventTypeRef}>
-            <button
-              onClick={() => setShowEventTypeDropdown(!showEventTypeDropdown)}
-              className="px-3 py-1.5 text-sm rounded-lg border border-black/[0.06] dark:border-white/[0.04] bg-transparent text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06] flex items-center space-x-1"
-            >
-              <span>{selectedEventTypes.size > 0 ? `${selectedEventTypes.size} ${t('类型', 'types')}` : t('事件类型', 'Event Type')}</span>
-              <ChevronDown className="w-4 h-4" />
-            </button>
-            {showEventTypeDropdown && (
-              <div className="absolute top-full left-0 mt-1 bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] shadow-lg z-10 p-2 max-h-48 overflow-y-auto min-w-[160px]">
-                {availableEventTypes.map(et => (
-                  <button
-                    key={et}
-                    onClick={() => toggleEventType(et)}
-                    className={`w-full text-left px-2 py-1 text-sm rounded flex items-center space-x-2 ${
-                      selectedEventTypes.has(et)
-                        ? 'bg-brand-indigo/10 text-brand-indigo dark:bg-brand-violet/20 dark:text-brand-violet'
-                        : 'text-gray-700 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06]'
-                    }`}
-                  >
-                    <span>{language === 'zh' ? EVENT_TYPE_LABELS[et].zh : EVENT_TYPE_LABELS[et].en}</span>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Action buttons */}
-          <div className="flex items-center space-x-2 ml-auto">
-            <button
-              onClick={handleRefresh}
-              disabled={isRefreshing || !backendAvailable}
-              className="p-2 rounded-lg text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06] transition-colors disabled:opacity-50"
-              title={t('刷新', 'Refresh')}
-            >
-              <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
-            </button>
-            <button
-              onClick={handleClear}
-              className="px-3 py-1.5 text-sm font-medium rounded-lg text-gray-700 dark:text-text-secondary bg-gray-100 dark:bg-white/[0.04] hover:bg-gray-200 dark:hover:bg-white/[0.08] transition-colors flex items-center space-x-1"
-            >
-              <Trash2 className="w-4 h-4" />
-              <span>{t('清空', 'Clear')}</span>
-            </button>
-            <button
-              onClick={handleExport}
-              disabled={isExporting}
-              className="px-3 py-1.5 text-sm font-medium rounded-lg bg-brand-indigo hover:bg-brand-hover text-white transition-colors disabled:opacity-50 flex items-center space-x-1"
-            >
-              {isExporting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4" />}
-              <span>{isExporting ? t('导出中...', 'Exporting...') : t('导出', 'Export')}</span>
-            </button>
+          {/* Scope + Event type + Actions */}
+          <div className="flex items-center space-x-3 flex-wrap gap-y-2">
+            <div className="flex items-center rounded-lg border border-black/[0.06] dark:border-white/[0.04] overflow-hidden">
+              {(['all', 'frontend', 'backend'] as const).map(scope => (
+                <button key={scope} onClick={() => setSelectedScope(scope)} disabled={scope === 'backend' && !backendAvailable}
+                  className={`px-3 py-1.5 text-sm transition-colors ${selectedScope === scope ? 'bg-brand-indigo text-white' : 'bg-transparent text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06]'} ${scope === 'backend' && !backendAvailable ? 'opacity-40 cursor-not-allowed' : ''}`}>
+                  {scope === 'all' ? t('全部', 'All') : scope === 'frontend' ? t('前端', 'Frontend') : t('后端', 'Backend')}
+                </button>
+              ))}
+            </div>
+            <div className="relative" ref={eventTypeRef}>
+              <button onClick={() => setShowEventTypeDropdown(!showEventTypeDropdown)}
+                className="px-3 py-1.5 text-sm rounded-lg border border-black/[0.06] dark:border-white/[0.04] bg-transparent text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06] flex items-center space-x-1">
+                <span>{selectedEventTypes.size > 0 ? `${selectedEventTypes.size} ${t('类型', 'types')}` : t('事件类型', 'Event Type')}</span>
+                <ChevronDown className="w-4 h-4" />
+              </button>
+              {showEventTypeDropdown && (
+                <div className="absolute top-full left-0 mt-1 bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] shadow-lg z-10 p-2 max-h-48 overflow-y-auto min-w-[160px]">
+                  {availableEventTypes.map(et => (
+                    <button key={et} onClick={() => toggleEventType(et)}
+                      className={`w-full text-left px-2 py-1 text-sm rounded ${selectedEventTypes.has(et) ? 'bg-brand-indigo/10 text-brand-indigo dark:bg-brand-violet/20 dark:text-brand-violet' : 'text-gray-700 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06]'}`}>
+                      <span>{language === 'zh' ? EVENT_TYPE_LABELS[et].zh : EVENT_TYPE_LABELS[et].en}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className="flex items-center space-x-2 ml-auto">
+              <button onClick={handleRefresh} disabled={isRefreshing || !backendAvailable}
+                className="p-2 rounded-lg text-gray-600 dark:text-text-secondary hover:bg-gray-100 dark:hover:bg-white/[0.06] transition-colors disabled:opacity-50" title={t('刷新', 'Refresh')}>
+                <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+              </button>
+              <button onClick={handleClear} className="px-3 py-1.5 text-sm font-medium rounded-lg text-gray-700 dark:text-text-secondary bg-gray-100 dark:bg-white/[0.04] hover:bg-gray-200 dark:hover:bg-white/[0.08] transition-colors flex items-center space-x-1">
+                <Trash2 className="w-4 h-4" /><span>{t('清空', 'Clear')}</span>
+              </button>
+              <button onClick={handleExport} disabled={isExporting}
+                className="px-3 py-1.5 text-sm font-medium rounded-lg bg-brand-indigo hover:bg-brand-hover text-white transition-colors disabled:opacity-50 flex items-center space-x-1">
+                {isExporting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Download className="w-4 h-4" />}
+                <span>{isExporting ? t('导出中...', 'Exporting...') : t('导出', 'Export')}</span>
+              </button>
+            </div>
           </div>
-        </div>
 
-        {/* Count summary */}
-        <div className="text-xs text-gray-500 dark:text-text-tertiary">
-          {t(`显示 ${filteredEntries.length} / ${totalCount} 条`, `Showing ${filteredEntries.length} / ${totalCount} entries`)}
-          {(frontendDebug || backendDebug) && (
-            <span className="ml-2 text-amber-600 dark:text-amber-400">
-              {t('调试模式已开启', 'Debug mode ON')}
-            </span>
-          )}
-          {selectedScope !== 'backend' && (
-            <span className="ml-1">
-              · {t(`前端 ${frontendCounts.total}`, `Frontend ${frontendCounts.total}`)}
-            </span>
-          )}
-          {selectedScope !== 'frontend' && backendAvailable && (
-            <span className="ml-1">
-              · {t(`后端 ${backendLogCount}`, `Backend ${backendLogCount}`)}
-            </span>
-          )}
-        </div>
-      </section>
-
-      {/* Log Entry List */}
-      <section className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] overflow-hidden">
-        {filteredEntries.length === 0 ? (
-          <div className="p-8 text-center text-gray-400 dark:text-text-quaternary">
-            <ScrollText className="w-8 h-8 mx-auto mb-2 opacity-50" />
-            {totalCount === 0
-              ? t('暂无日志', 'No logs yet')
-              : t('无匹配日志', 'No matching logs')}
+          <div className="text-xs text-gray-500 dark:text-text-tertiary">
+            {t(`显示 ${filteredEntries.length} / ${totalCount} 条`, `Showing ${filteredEntries.length} / ${totalCount} entries`)}
+            {(frontendDebug || backendDebug) && <span className="ml-2 text-amber-600 dark:text-amber-400">{t('调试模式已开启', 'Debug mode ON')}</span>}
+            {selectedScope !== 'backend' && <span className="ml-1">· {t(`前端 ${frontendCounts.total}`, `Frontend ${frontendCounts.total}`)}</span>}
+            {selectedScope !== 'frontend' && backendAvailable && <span className="ml-1">· {t(`后端 ${backendLogCount}`, `Backend ${backendLogCount}`)}</span>}
           </div>
-        ) : (
-          <div className="max-h-[520px] overflow-y-auto divide-y divide-black/[0.04] dark:divide-white/[0.02]">
-            {filteredEntries.map(entry => {
-              const eventType = inferEventType(entry.module, entry.message);
-              const httpSummary = getHttpSummary(entry.data);
-              const entryData = entry.data as Record<string, unknown> | undefined;
-              const hasData = entryData && typeof entryData === 'object' && !Array.isArray(entryData) && Object.keys(entryData).length > 0;
-              const isExpanded = expandedData.has(entry.id);
-              const statusColor = entryData?.status ? getStatusColor(entryData.status) : '';
-
-              return (
-                <div key={entry.id} className="px-4 py-3 hover:bg-light-surface dark:hover:bg-white/[0.02] transition-colors">
-                  {/* Header row */}
-                  <div className="flex items-center space-x-2 flex-wrap gap-y-1">
-                    <span className={`px-2 py-0.5 text-xs rounded-full font-medium ${LEVEL_COLORS[entry.level]}`}>
-                      {entry.level}
-                    </span>
-                    <span className={`px-2 py-0.5 text-xs rounded-full ${
-                      entry.source === 'frontend'
-                        ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-400'
-                        : 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'
-                    }`}>
-                      {entry.source === 'frontend' ? t('前端', 'FE') : t('后端', 'BE')}
-                    </span>
-                    <span className="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400">
-                      {language === 'zh' ? EVENT_TYPE_LABELS[eventType].zh : EVENT_TYPE_LABELS[eventType].en}
-                    </span>
-                    <span
-                      className="text-xs text-gray-500 dark:text-text-tertiary"
-                      title={entry.timestamp}
-                    >
-                      {formatRelativeTime(entry.timestamp)}
-                    </span>
-                    <span className="px-1.5 py-0.5 text-xs bg-brand-indigo/10 text-brand-indigo dark:bg-brand-violet/20 dark:text-brand-violet rounded font-mono">
-                      {entry.module}
-                    </span>
-                  </div>
-
-                  {/* Message */}
-                  <p className="text-sm text-gray-900 dark:text-text-primary mt-1 break-words">
-                    {entry.message}
-                  </p>
-
-                  {/* HTTP summary line */}
-                  {httpSummary && (
-                    <div className="text-xs mt-1 font-mono flex items-center space-x-1">
-                      <span className="font-bold">{String(entryData?.method ?? '')}</span>
-                      <span className="text-gray-600 dark:text-text-secondary">{String(entryData?.endpoint ?? entryData?.path ?? '')}</span>
-                      {entryData?.status && (
-                        <span className={`font-bold ${statusColor}`}>→ {String(entryData.status)}</span>
-                      )}
-                      {entryData?.durationMs && (
-                        <span className="text-blue-600 dark:text-blue-400">{String(entryData.durationMs)}ms</span>
-                      )}
-                    </div>
-                  )}
-
-                  {/* Expandable data block */}
-                  {hasData && (
-                    <div className="mt-1">
-                      <button
-                        onClick={() => toggleDataExpand(entry.id)}
-                        className="text-xs text-gray-500 dark:text-text-tertiary hover:text-gray-700 dark:hover:text-text-secondary flex items-center space-x-1"
-                      >
-                        {isExpanded ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
-                        <span>{isExpanded ? t('收起详情', 'Hide details') : t('查看详情', 'Show details')}</span>
-                      </button>
-                      {isExpanded && (
-                        <pre className="mt-1 text-xs bg-gray-50 dark:bg-white/[0.02] rounded p-2 overflow-auto max-h-48 font-mono text-gray-700 dark:text-text-secondary">
-                          {JSON.stringify(entryData, null, 2)}
-                        </pre>
+        </section>
+
+        {/* Log Entry List */}
+        <section className="bg-white dark:bg-panel-dark rounded-lg border border-black/[0.06] dark:border-white/[0.04] overflow-hidden">
+          {filteredEntries.length === 0 ? (
+            <div className="p-8 text-center text-gray-400 dark:text-text-quaternary">
+              <ScrollText className="w-8 h-8 mx-auto mb-2 opacity-50" />
+              {totalCount === 0 ? t('暂无日志', 'No logs yet') : t('无匹配日志', 'No matching logs')}
+            </div>
+          ) : (
+            <>
+              <div className="max-h-[520px] overflow-y-auto divide-y divide-black/[0.04] dark:divide-white/[0.02]">
+                {visibleEntries.map(entry => {
+                  const eventType = inferEventType(entry.module, entry.message);
+                  const entryData = entry.data as Record<string, unknown> | undefined;
+                  const statusColor = entryData?.status ? getStatusColor(entryData.status) : '';
+                  const hasHttpDetail = entryData?.method || entryData?.status || entryData?.durationMs;
+
+                  return (
+                    <div key={entry.id}
+                      className={`px-4 py-3 transition-colors ${hasHttpDetail ? 'hover:bg-light-surface dark:hover:bg-white/[0.02] cursor-pointer' : ''}`}
+                      onClick={hasHttpDetail ? () => setDetailEntry(entry) : undefined}>
+                      <div className="flex items-center space-x-2 flex-wrap gap-y-1">
+                        <span className={`px-2 py-0.5 text-xs rounded-full font-medium ${LEVEL_COLORS[entry.level]}`}>{entry.level}</span>
+                        <span className={`px-2 py-0.5 text-xs rounded-full ${entry.source === 'frontend' ? 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-400' : 'bg-green-100 text-green-700 dark:bg-green-500/20 dark:text-green-400'}`}>
+                          {entry.source === 'frontend' ? t('前端', 'FE') : t('后端', 'BE')}
+                        </span>
+                        <span className="px-2 py-0.5 text-xs rounded-full bg-gray-100 text-gray-600 dark:bg-white/[0.06] dark:text-gray-400">
+                          {language === 'zh' ? EVENT_TYPE_LABELS[eventType].zh : EVENT_TYPE_LABELS[eventType].en}
+                        </span>
+                        <span className="text-xs text-gray-500 dark:text-text-tertiary" title={entry.timestamp}>{formatRelativeTime(entry.timestamp)}</span>
+                        <span className="px-1.5 py-0.5 text-xs bg-brand-indigo/10 text-brand-indigo dark:bg-brand-violet/20 dark:text-brand-violet rounded font-mono">{entry.module}</span>
+                        {hasHttpDetail && <ChevronRight className="w-3 h-3 text-gray-400 ml-auto shrink-0" />}
+                      </div>
+                      <p className="text-sm text-gray-900 dark:text-text-primary mt-1 break-words">{entry.message}</p>
+                      {hasHttpDetail && (
+                        <div className="text-xs mt-1 font-mono flex items-center space-x-1 text-gray-500 dark:text-text-tertiary">
+                          {entryData?.method && <span className="font-bold">{String(entryData.method)}</span>}
+                          {(entryData?.endpoint || entryData?.path) && <span>{String(entryData.endpoint ?? entryData.path)}</span>}
+                          {entryData?.status && <span className={`font-bold ${statusColor}`}>→ {String(entryData.status)}</span>}
+                          {entryData?.durationMs != null && <span className="text-blue-600 dark:text-blue-400">{String(entryData.durationMs)}ms</span>}
+                        </div>
                       )}
                     </div>
-                  )}
+                  );
+                })}
+              </div>
+              {/* Load more */}
+              {visibleCount < filteredEntries.length && (
+                <div className="p-3 text-center border-t border-black/[0.04] dark:border-white/[0.02]">
+                  <button onClick={() => setVisibleCount(prev => prev + PAGE_SIZE)}
+                    className="text-sm text-brand-indigo hover:text-brand-hover transition-colors">
+                    {t(`加载更多（还有 ${filteredEntries.length - visibleCount} 条）`, `Load more (${filteredEntries.length - visibleCount} remaining)`)}
+                  </button>
                 </div>
-              );
-            })}
-          </div>
-        )}
-      </section>
-    </div>
+              )}
+            </>
+          )}
+        </section>
+      </div>
+    </>
   );
-};
\ No newline at end of file
+};

From 7ec2180da35bf836451298ceb7d2f0399877e8e4 Mon Sep 17 00:00:00 2001
From: AmintaCCCP <libogege@sina.com>
Date: Fri, 29 May 2026 23:49:09 +0800
Subject: [PATCH 5/6] =?UTF-8?q?fix:=20address=20CodeRabbit=20review=20?=
 =?UTF-8?q?=E2=80=94=20sort=20all=20scope=20branches,=20remove=20unused=20?=
 =?UTF-8?q?prop,=20move=20indicator=20to=20App?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Sort frontend/backend entries descending in allEntries useMemo branches
- Remove unused 't' prop from DataBlock component
- Move DebugModeIndicator to App.tsx (global, always visible)
- Create standalone DebugModeIndicator.tsx reading from sessionStorage
- Remove DebugModeIndicator from DiagnosticLogsPanel (now in App.tsx)
---
 src/App.tsx                                   |  2 +
 src/components/DebugModeIndicator.tsx         | 65 +++++++++++++++++++
 .../settings/DiagnosticLogsPanel.tsx          | 47 ++------------
 3 files changed, 74 insertions(+), 40 deletions(-)
 create mode 100644 src/components/DebugModeIndicator.tsx

diff --git a/src/App.tsx b/src/App.tsx
index fb867e51..8f7d8424 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { CategorySidebar } from './components/CategorySidebar';
 import { ReleaseTimeline } from './components/ReleaseTimeline';
 import { ForkTimeline } from './components/ForkTimeline';
 import { SettingsPanel } from './components/SettingsPanel';
+import { DebugModeIndicator } from './components/DebugModeIndicator';
 import { DiscoveryView } from './components/DiscoveryView';
 import { BackToTop } from './components/BackToTop';
 import { ErrorBoundary } from './components/ErrorBoundary';
@@ -193,6 +194,7 @@ function App() {
         {currentViewContent}
       </main>
       <BackToTop />
+      <DebugModeIndicator />
     </div>
   );
 }
diff --git a/src/components/DebugModeIndicator.tsx b/src/components/DebugModeIndicator.tsx
new file mode 100644
index 00000000..e3df7de3
--- /dev/null
+++ b/src/components/DebugModeIndicator.tsx
@@ -0,0 +1,65 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { logger } from '../services/logger';
+import { backend } from '../services/backendAdapter';
+
+/**
+ * Global debug mode indicator — fixed bottom-right corner.
+ * Reads debug state from sessionStorage; visible across all pages.
+ * Click to quickly disable all debug modes.
+ */
+export const DebugModeIndicator: React.FC = () => {
+  const [frontendDebug, setFrontendDebug] = useState(() => sessionStorage.getItem('gsm:frontend-debug') === 'true');
+  const [backendDebug, setBackendDebug] = useState(() => sessionStorage.getItem('gsm:backend-debug') === 'true');
+
+  // Sync with sessionStorage changes (e.g. from DiagnosticLogsPanel)
+  useEffect(() => {
+    const check = () => {
+      setFrontendDebug(sessionStorage.getItem('gsm:frontend-debug') === 'true');
+      setBackendDebug(sessionStorage.getItem('gsm:backend-debug') === 'true');
+    };
+    // Also listen for storage events from other tabs
+    window.addEventListener('storage', check);
+    // Poll for changes (sessionStorage doesn't fire storage events in same tab)
+    const interval = setInterval(check, 2000);
+    return () => {
+      window.removeEventListener('storage', check);
+      clearInterval(interval);
+    };
+  }, []);
+
+  const disableAll = useCallback(async () => {
+    // Disable frontend debug
+    logger.setLevel('info');
+    sessionStorage.setItem('gsm:frontend-debug', 'false');
+    setFrontendDebug(false);
+
+    // Disable backend debug
+    if (backend.isAvailable) {
+      try {
+        const secret = sessionStorage.getItem('github-stars-manager-backend-secret');
+        await fetch('/api/logs/debug', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${secret}` },
+          body: JSON.stringify({ enabled: false }),
+        });
+      } catch { /* Backend unreachable */ }
+    }
+    sessionStorage.setItem('gsm:backend-debug', 'false');
+    setBackendDebug(false);
+  }, []);
+
+  if (!frontendDebug && !backendDebug) return null;
+
+  return (
+    <button
+      onClick={disableAll}
+      className="fixed bottom-6 right-6 z-50 flex items-center space-x-2 px-3 py-2 bg-green-500 text-white rounded-full shadow-lg hover:bg-green-600 transition-colors text-sm font-medium cursor-pointer"
+      title="Click to disable debug mode / 点击关闭调试模式"
+    >
+      <span className="w-2 h-2 rounded-full bg-white animate-pulse" />
+      <span>DEBUG</span>
+      {frontendDebug && <span className="text-xs opacity-80">FE</span>}
+      {backendDebug && <span className="text-xs opacity-80">BE</span>}
+    </button>
+  );
+};
diff --git a/src/components/settings/DiagnosticLogsPanel.tsx b/src/components/settings/DiagnosticLogsPanel.tsx
index 65ac22ea..8f1a8b23 100644
--- a/src/components/settings/DiagnosticLogsPanel.tsx
+++ b/src/components/settings/DiagnosticLogsPanel.tsx
@@ -156,13 +156,13 @@ const LogDetailModal: React.FC<LogDetailModalProps> = ({ entry, language, t, onC
           </div>
         );
       case 'requestHeader':
-        return <DataBlock data={entryData?.requestHeaders} t={t} emptyText={t('无请求头数据', 'No request header data')} />;
+        return <DataBlock data={entryData?.requestHeaders} emptyText={t('无请求头数据', 'No request header data')} />;
       case 'requestBody':
-        return <DataBlock data={entryData?.requestBody} t={t} emptyText={t('无请求体数据', 'No request body data')} />;
+        return <DataBlock data={entryData?.requestBody} emptyText={t('无请求体数据', 'No request body data')} />;
       case 'responseHeader':
-        return <DataBlock data={entryData?.responseHeaders} t={t} emptyText={t('无返回头数据', 'No response header data')} />;
+        return <DataBlock data={entryData?.responseHeaders} emptyText={t('无返回头数据', 'No response header data')} />;
       case 'responseBody':
-        return <DataBlock data={entryData?.responseBody ?? entryData?.data} t={t} emptyText={t('无返回体数据（完整数据见概览标签）', 'No response body data (see General tab)')} />;
+        return <DataBlock data={entryData?.responseBody ?? entryData?.data} emptyText={t('无返回体数据（完整数据见概览标签）', 'No response body data (see General tab)')} />;
       default:
         return null;
     }
@@ -218,7 +218,7 @@ const Row: React.FC<{ label: string; children: React.ReactNode }> = ({ label, ch
   </div>
 );
 
-const DataBlock: React.FC<{ data: unknown; t: (zh: string, en: string) => string; emptyText: string }> = ({ data, t, emptyText }) => {
+const DataBlock: React.FC<{ data: unknown; emptyText: string }> = ({ data, emptyText }) => {
   if (data == null) {
     return <p className="text-gray-400 dark:text-text-quaternary text-sm italic">{emptyText}</p>;
   }
@@ -230,30 +230,6 @@ const DataBlock: React.FC<{ data: unknown; t: (zh: string, en: string) => string
   );
 };
 
-// ─── Global Debug Indicator ────────────────────────────────────
-interface DebugModeIndicatorProps {
-  frontendDebug: boolean;
-  backendDebug: boolean;
-  onToggleFrontend: () => void;
-  t: (zh: string, en: string) => string;
-}
-
-const DebugModeIndicator: React.FC<DebugModeIndicatorProps> = ({ frontendDebug, backendDebug, onToggleFrontend, t }) => {
-  if (!frontendDebug && !backendDebug) return null;
-  return (
-    <button
-      onClick={onToggleFrontend}
-      className="fixed bottom-6 right-6 z-40 flex items-center space-x-2 px-3 py-2 bg-green-500 text-white rounded-full shadow-lg hover:bg-green-600 transition-colors text-sm font-medium"
-      title={t('点击关闭调试模式', 'Click to disable debug mode')}
-    >
-      <span className="w-2 h-2 rounded-full bg-white animate-pulse" />
-      <span>{t('调试中', 'DEBUG')}</span>
-      {frontendDebug && <span className="text-xs opacity-80">FE</span>}
-      {backendDebug && <span className="text-xs opacity-80">BE</span>}
-    </button>
-  );
-};
-
 // ─── Main Panel ────────────────────────────────────────────────
 export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) => {
   const language = useAppStore.getState().language;
@@ -371,8 +347,8 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
 
   // Merge entries — sorted by timestamp DESCENDING (newest first)
   const allEntries = useMemo(() => {
-    if (selectedScope === 'frontend') return entries;
-    if (selectedScope === 'backend') return backendEntries;
+    if (selectedScope === 'frontend') return [...entries].sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+    if (selectedScope === 'backend') return [...backendEntries].sort((a, b) => b.timestamp.localeCompare(a.timestamp));
     return [...entries, ...backendEntries].sort((a, b) => b.timestamp.localeCompare(a.timestamp));
   }, [entries, backendEntries, selectedScope]);
 
@@ -434,12 +410,6 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
     } catch { /* Backend unreachable */ }
   }, [backendDebug]);
 
-  // Quick disable debug from global indicator
-  const disableAllDebug = useCallback(() => {
-    if (frontendDebug) toggleFrontendDebug();
-    if (backendDebug) toggleBackendDebug();
-  }, [frontendDebug, backendDebug, toggleFrontendDebug, toggleBackendDebug]);
-
   // Clear logs
   const handleClear = useCallback(async () => {
     if (selectedScope === 'frontend' || selectedScope === 'all') { logger.clear(); setEntries([]); }
@@ -528,9 +498,6 @@ export const DiagnosticLogsPanel: React.FC<DiagnosticLogsPanelProps> = ({ t }) =
 
   return (
     <>
-      {/* Global debug indicator (floats on all pages) */}
-      <DebugModeIndicator frontendDebug={frontendDebug} backendDebug={backendDebug} onToggleFrontend={disableAllDebug} t={t} />
-
       {/* Detail modal */}
       {detailEntry && <LogDetailModal entry={detailEntry} language={language} t={t} onClose={() => setDetailEntry(null)} />}
 

From 4d947adc22f7474a0c3def0f8c7001d7c1b53d59 Mon Sep 17 00:00:00 2001
From: AmintaCCCP <libogege@sina.com>
Date: Sat, 30 May 2026 00:16:53 +0800
Subject: [PATCH 6/6] feat: add fork/workflow event types, capture HTTP details
 in debug, indicator navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add 'fork' (刷新复刻) and 'workflow' (执行 Workflow) event types
- Add logging to ForkTimeline for refresh, sync, and workflow trigger
- Capture request/response headers and bodies in debug logs
  (backendAdapter.ts and githubApi.ts)
- Debug indicator click: disable all debug + navigate to settings/logs tab
- Restore persisted frontend debug level at app startup (CodeRabbit fix)
---
 src/App.tsx                           |  9 +++++
 src/components/DebugModeIndicator.tsx | 17 +++++---
 src/components/ForkTimeline.tsx       | 12 +++++-
 src/components/SettingsPanel.tsx      | 10 +++++
 src/services/backendAdapter.ts        | 56 ++++++++++++++++++++++++++-
 src/services/githubApi.ts             | 25 +++++++++++-
 src/utils/logEventTypes.ts            |  6 +++
 7 files changed, 126 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8f7d8424..0308cf4e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import { BackToTop } from './components/BackToTop';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { useAppStore } from './store/useAppStore';
 import { useAutoUpdateCheck } from './components/UpdateChecker';
+import { logger } from './services/logger';
 import { UpdateNotificationBanner } from './components/UpdateNotificationBanner';
 import { backend } from './services/backendAdapter';
 import { syncFromBackend, startAutoSync, stopAutoSync } from './services/autoSync';
@@ -102,6 +103,14 @@ function App() {
 
   useAutoUpdateCheck();
 
+  // Restore persisted frontend debug level at startup so capture is active
+  // app-wide, not only after DiagnosticLogsPanel mounts.
+  useEffect(() => {
+    if (sessionStorage.getItem('gsm:frontend-debug') === 'true') {
+      logger.setLevel('debug');
+    }
+  }, []);
+
   useEffect(() => {
     if (theme === 'dark') {
       document.documentElement.classList.add('dark');
diff --git a/src/components/DebugModeIndicator.tsx b/src/components/DebugModeIndicator.tsx
index e3df7de3..f0a78b40 100644
--- a/src/components/DebugModeIndicator.tsx
+++ b/src/components/DebugModeIndicator.tsx
@@ -1,15 +1,17 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { logger } from '../services/logger';
 import { backend } from '../services/backendAdapter';
+import { useAppStore } from '../store/useAppStore';
 
 /**
  * Global debug mode indicator — fixed bottom-right corner.
  * Reads debug state from sessionStorage; visible across all pages.
- * Click to quickly disable all debug modes.
+ * Click to disable all debug modes and navigate to diagnostic logs.
  */
 export const DebugModeIndicator: React.FC = () => {
   const [frontendDebug, setFrontendDebug] = useState(() => sessionStorage.getItem('gsm:frontend-debug') === 'true');
   const [backendDebug, setBackendDebug] = useState(() => sessionStorage.getItem('gsm:backend-debug') === 'true');
+  const setCurrentView = useAppStore(s => s.setCurrentView);
 
   // Sync with sessionStorage changes (e.g. from DiagnosticLogsPanel)
   useEffect(() => {
@@ -27,7 +29,7 @@ export const DebugModeIndicator: React.FC = () => {
     };
   }, []);
 
-  const disableAll = useCallback(async () => {
+  const handleClick = useCallback(async () => {
     // Disable frontend debug
     logger.setLevel('info');
     sessionStorage.setItem('gsm:frontend-debug', 'false');
@@ -46,15 +48,20 @@ export const DebugModeIndicator: React.FC = () => {
     }
     sessionStorage.setItem('gsm:backend-debug', 'false');
     setBackendDebug(false);
-  }, []);
+
+    // Navigate to settings → logs tab
+    setCurrentView('settings');
+    // Notify SettingsPanel to switch to logs tab
+    window.dispatchEvent(new CustomEvent('gsm:navigate-to-settings-tab', { detail: { tab: 'logs' } }));
+  }, [setCurrentView]);
 
   if (!frontendDebug && !backendDebug) return null;
 
   return (
     <button
-      onClick={disableAll}
+      onClick={handleClick}
       className="fixed bottom-6 right-6 z-50 flex items-center space-x-2 px-3 py-2 bg-green-500 text-white rounded-full shadow-lg hover:bg-green-600 transition-colors text-sm font-medium cursor-pointer"
-      title="Click to disable debug mode / 点击关闭调试模式"
+      title="Click to disable debug mode and open logs / 点击关闭调试并打开日志"
     >
       <span className="w-2 h-2 rounded-full bg-white animate-pulse" />
       <span>DEBUG</span>
diff --git a/src/components/ForkTimeline.tsx b/src/components/ForkTimeline.tsx
index 622f6547..9cc8637b 100644
--- a/src/components/ForkTimeline.tsx
+++ b/src/components/ForkTimeline.tsx
@@ -3,6 +3,7 @@ import { Package, Search, X, RefreshCw, ChevronLeft, ChevronRight, ChevronsLeft,
 import { ForkRepo, WorkflowDefinition } from '../types';
 import { useAppStore } from '../store/useAppStore';
 import { GitHubApiService } from '../services/githubApi';
+import { logger } from '../services/logger';
 import { formatDistanceToNow } from 'date-fns';
 import ForkCard from './ForkCard';
 import { useDialog } from '../hooks/useDialog';
@@ -158,10 +159,12 @@ export const ForkTimeline: React.FC = () => {
       return;
     }
 
+    const startTime = Date.now();
     setForkIsRefreshing(true);
     try {
       const githubApi = new GitHubApiService(githubToken);
       const newForks = await githubApi.getUserForks();
+      logger.info('githubApi', 'Refresh forks completed', { forkCount: newForks.length, durationMs: Date.now() - startTime });
 
       // Merge with existing forks, preserving read status
       const existingForkMap = new Map(forks.map(f => [f.id, f]));
@@ -266,6 +269,7 @@ export const ForkTimeline: React.FC = () => {
       }
     } catch (error) {
       console.error('Fork refresh failed:', error);
+      logger.error('githubApi', 'Refresh forks failed', { error: error instanceof Error ? error.message : String(error), durationMs: Date.now() - startTime });
       toast(language === 'zh'
         ? 'Fork刷新失败，请检查网络连接。'
         : 'Fork refresh failed. Please check your network connection.',
@@ -352,13 +356,15 @@ export const ForkTimeline: React.FC = () => {
     if (!fork) return;
 
     const { owner, repo, branch } = syncModal;
+    const syncStartTime = Date.now();
 
     setSyncModal(prev => ({ ...prev, isOpen: false }));
     setSyncingForks(prev => new Set(prev).add(fork.id));
-    
+
     try {
       const githubApi = new GitHubApiService(githubToken);
       const result = await githubApi.syncFork(owner, repo, branch);
+      logger.info('githubApi', 'Sync fork completed', { repo: fork.full_name, mergeType: result.mergeType, durationMs: Date.now() - syncStartTime });
 
       // Mark fork as up-to-date in UI
       setNeedsSyncMap(prev => ({ ...prev, [fork.id]: false }));
@@ -378,6 +384,7 @@ export const ForkTimeline: React.FC = () => {
       }
     } catch (error) {
       console.error('Sync failed:', error);
+      logger.error('githubApi', 'Sync fork failed', { repo: fork.full_name, error: error instanceof Error ? error.message : String(error), durationMs: Date.now() - syncStartTime });
       const errorMsg = error instanceof Error ? error.message : String(error);
       if (errorMsg === 'NOT_A_FORK') {
         toast(language === 'zh'
@@ -417,11 +424,13 @@ export const ForkTimeline: React.FC = () => {
     if (!fork) return;
 
     const branch = fork.default_branch || 'main';
+    const workflowStartTime = Date.now();
     setRunningWorkflows(prev => new Set(prev).add(forkId));
     try {
       const [owner, repo] = fork.full_name.split('/');
       const githubApi = new GitHubApiService(githubToken);
       await githubApi.triggerWorkflowRun(owner, repo, workflowPath, branch);
+      logger.info('githubApi', 'Trigger workflow completed', { repo: fork.full_name, workflow: workflowName, branch, durationMs: Date.now() - workflowStartTime });
 
       toast(language === 'zh'
         ? `已触发工作流 "${workflowName}" 在 ${branch} 分支。`
@@ -433,6 +442,7 @@ export const ForkTimeline: React.FC = () => {
       await loadWorkflows(forkId);
     } catch (error) {
       console.error('Failed to run workflow:', error);
+      logger.error('githubApi', 'Trigger workflow failed', { repo: fork.full_name, workflow: workflowName, error: error instanceof Error ? error.message : String(error), durationMs: Date.now() - workflowStartTime });
       toast(language === 'zh'
         ? `运行工作流失败。`
         : `Failed to run workflow.`,
diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
index 123be595..d9bc34b8 100644
--- a/src/components/SettingsPanel.tsx
+++ b/src/components/SettingsPanel.tsx
@@ -252,6 +252,16 @@ export const SettingsPanel: React.FC<SettingsPanelProps> = ({
     };
   }, []);
 
+  // Listen for external tab navigation requests (e.g. from DebugModeIndicator)
+  useEffect(() => {
+    const onNavigate = (e: Event) => {
+      const tab = (e as CustomEvent<{ tab: SettingsTab }>).detail?.tab;
+      if (tab) handleTabChange(tab);
+    };
+    window.addEventListener('gsm:navigate-to-settings-tab', onNavigate);
+    return () => window.removeEventListener('gsm:navigate-to-settings-tab', onNavigate);
+  }, [handleTabChange]);
+
   const tabs: SettingsTabItem[] = [
     {
       id: 'general',
diff --git a/src/services/backendAdapter.ts b/src/services/backendAdapter.ts
index bd801978..af47d5d7 100644
--- a/src/services/backendAdapter.ts
+++ b/src/services/backendAdapter.ts
@@ -85,15 +85,67 @@ class BackendAdapter {
       }
     }
 
+    // Capture request details for debug logging
+    let requestHeaders: Record<string, string> | undefined;
+    let requestBody: string | undefined;
+    if (logger.isDebugMode()) {
+      if (options?.headers) {
+        if (options.headers instanceof Headers) {
+          requestHeaders = {};
+          options.headers.forEach((v, k) => { requestHeaders![k] = k.toLowerCase() === 'authorization' ? '***' : v; });
+        } else if (Array.isArray(options.headers)) {
+          requestHeaders = {};
+          for (const [k, v] of options.headers) {
+            requestHeaders[k] = k.toLowerCase() === 'authorization' ? '***' : v;
+          }
+        } else {
+          requestHeaders = {};
+          for (const [k, v] of Object.entries(options.headers as Record<string, string>)) {
+            requestHeaders[k] = k.toLowerCase() === 'authorization' ? '***' : v;
+          }
+        }
+      }
+      if (typeof options?.body === 'string') {
+        try {
+          const parsed = JSON.parse(options.body);
+          // Mask any apiKey/password fields recursively
+          requestBody = JSON.stringify(parsed, (key, val) => {
+            if (/api[_-]?key|password|secret|token|authorization/i.test(key)) return '***';
+            return val;
+          }, 2);
+        } catch {
+          requestBody = options.body.slice(0, 2000);
+        }
+      }
+    }
+
     try {
       const response = await fetch(url, { ...options, signal: controller.signal });
       if (logger.isDebugMode()) {
-        logger.debug('backendAdapter', 'Backend request', { method, path, status: response.status, durationMs: Date.now() - startTime });
+        // Capture response headers
+        const responseHeaders: Record<string, string> = {};
+        response.headers.forEach((v, k) => { responseHeaders[k] = v; });
+        // Capture response body preview (clone to avoid consuming)
+        let responseBody: string | undefined;
+        try {
+          const cloned = response.clone();
+          const text = await cloned.text();
+          if (text.length > 0) {
+            responseBody = text.length > 4000 ? text.slice(0, 4000) + '...[truncated]' : text;
+          }
+        } catch { /* body not readable */ }
+        logger.debug('backendAdapter', 'Backend request', {
+          method, path, status: response.status, durationMs: Date.now() - startTime,
+          requestHeaders, requestBody, responseHeaders, responseBody,
+        });
       }
       return response;
     } catch (err) {
       if (logger.isDebugMode()) {
-        logger.debug('backendAdapter', 'Backend request', { method, path, error: 'timeout/network error', durationMs: Date.now() - startTime });
+        logger.debug('backendAdapter', 'Backend request', {
+          method, path, error: 'timeout/network error', durationMs: Date.now() - startTime,
+          requestHeaders, requestBody,
+        });
       }
       throw err;
     } finally {
diff --git a/src/services/githubApi.ts b/src/services/githubApi.ts
index bfd7de44..f6b9e46a 100644
--- a/src/services/githubApi.ts
+++ b/src/services/githubApi.ts
@@ -132,7 +132,30 @@ export class GitHubApiService {
     }
 
     if (logger.isDebugMode()) {
-      logger.debug('githubApi', 'API request', { method, endpoint, status: response.status, durationMs: Date.now() - startTime, rateLimitRemaining: response.headers.get('x-ratelimit-remaining') });
+      // Capture request headers (mask auth)
+      const requestHeaders: Record<string, string> = {
+        'Authorization': 'Bearer ***',
+        'Accept': 'application/vnd.github.v3+json',
+        'X-GitHub-Api-Version': '2022-11-28',
+        ...(options.headers as Record<string, string> || {}),
+      };
+      // Capture response headers
+      const responseHeaders: Record<string, string> = {};
+      response.headers.forEach((v, k) => { responseHeaders[k] = v; });
+      // Capture response body preview (clone to avoid consuming)
+      let responseBody: string | undefined;
+      try {
+        const cloned = response.clone();
+        const text = await cloned.text();
+        if (text.length > 0) {
+          responseBody = text.length > 4000 ? text.slice(0, 4000) + '...[truncated]' : text;
+        }
+      } catch { /* body not readable */ }
+      logger.debug('githubApi', 'API request', {
+        method, endpoint, status: response.status, durationMs: Date.now() - startTime,
+        rateLimitRemaining: response.headers.get('x-ratelimit-remaining'),
+        requestHeaders, responseHeaders, responseBody,
+      });
     }
 
     const data = response.status === 204 ? null : await response.json();
diff --git a/src/utils/logEventTypes.ts b/src/utils/logEventTypes.ts
index d428a96f..7967ec97 100644
--- a/src/utils/logEventTypes.ts
+++ b/src/utils/logEventTypes.ts
@@ -5,6 +5,8 @@ export type LogEventType =
   | 'githubApi'
   | 'trending'
   | 'release'
+  | 'fork'
+  | 'workflow'
   | 'backendSync'
   | 'webdav'
   | 'update'
@@ -20,6 +22,8 @@ export const EVENT_TYPE_LABELS: Record<LogEventType, { zh: string; en: string }>
   githubApi:     { zh: 'GitHub API', en: 'GitHub API' },
   trending:      { zh: '刷新趋势', en: 'Refresh Trending' },
   release:       { zh: '更新 Release', en: 'Update Releases' },
+  fork:          { zh: '刷新复刻', en: 'Refresh Forks' },
+  workflow:      { zh: '执行 Workflow', en: 'Run Workflow' },
   backendSync:   { zh: '后端同步', en: 'Backend Sync' },
   webdav:        { zh: 'WebDAV 备份', en: 'WebDAV Backup' },
   update:        { zh: '应用更新', en: 'App Update' },
@@ -35,6 +39,8 @@ export function inferEventType(module: string, message: string): LogEventType {
   if (module === 'ai' && /search/i.test(message)) return 'aiSearch';
   if (module === 'githubApi' && /trending/i.test(message)) return 'trending';
   if (module === 'githubApi' && /release/i.test(message)) return 'release';
+  if (module === 'githubApi' && /fork/i.test(message)) return 'fork';
+  if (module === 'githubApi' && /workflow/i.test(message)) return 'workflow';
   if (module === 'backendAdapter') return 'backendSync';
   if (module === 'webdav') return 'webdav';
   if (module === 'update') return 'update';