Merge pull request #17 from 0xtbug/dev

feat(logs): introduce logs viewer and file logging configuration

Author: 0xtbug

package.json

@@ -20,6 +20,7 @@
     "@tailwindcss/vite": "^4.1.18",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.4.2",
+    "@tauri-apps/plugin-fs": "^2.4.5",
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-shell": "^2.3.3",
     "@tauri-apps/plugin-updater": "^2.9.0",
@@ -28,6 +29,7 @@
     "clsx": "^2.1.1",
     "i18next": "^25.7.1",
     "lucide-react": "^0.562.0",
+    "radix-ui": "^1.4.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^16.4.0",

src-tauri/Cargo.toml

@@ -17,6 +17,7 @@ tauri = { version = "2", features = ["tray-icon"] }
 tauri-plugin-opener = "2"
 tauri-plugin-shell = "2"
 tauri-plugin-dialog = "2"
+tauri-plugin-fs = "2"
 tauri-plugin-updater = "2"
 tauri-plugin-process = "2"
 serde = { version = "1", features = ["derive"] }

src-tauri/capabilities/default.json

@@ -9,6 +9,7 @@
     "shell:default",
     "dialog:default",
     "updater:default",
-    "process:allow-restart"
+    "process:allow-restart",
+    "fs:default"
   ]
 }

src-tauri/src/lib.rs

@@ -73,6 +73,7 @@ pub fn run() {
         .plugin(tauri_plugin_opener::init())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_process::init())
         .setup(|app| {
             #[cfg(desktop)]

src/constants/routes.ts

@@ -4,12 +4,14 @@ import {
   Users,
   Settings,
   Info,
+  FileText,
 } from 'lucide-react';
 
 export const NAV_ITEMS = [
   { path: '/dashboard', icon: LayoutDashboard, labelKey: 'nav.dashboard' },
   { path: '/quota', icon: BarChart3, labelKey: 'nav.quota' },
   { path: '/providers', icon: Users, labelKey: 'providers.title' },
+  { path: '/logs', icon: FileText, labelKey: 'nav.logs' },
   { path: '/settings', icon: Settings, labelKey: 'nav.settings' },
   { path: '/about', icon: Info, labelKey: 'nav.about' },
 ] as const;
@@ -18,6 +20,7 @@ export const ROUTE_PATHS = {
   DASHBOARD: '/dashboard',
   QUOTA: '/quota',
   PROVIDERS: '/providers',
+  LOGS: '/logs',
   SETTINGS: '/settings',
   ABOUT: '/about',
   LOGIN: '/login',

src/features/settings/SettingsPage.tsx

@@ -12,7 +12,7 @@ import { useConfigStore } from '@/features/settings/config.store';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
 import { Button } from '@/shared/components/ui/button';
 import { Label } from '@/shared/components/ui/label';
-import { Sun, Moon, Monitor, LogOut, Globe, Server, FolderOpen, Play, Square, CheckCircle2, BarChart3, Loader2 } from 'lucide-react';
+import { Sun, Moon, Monitor, LogOut, Globe, Server, FolderOpen, Play, Square, CheckCircle2, BarChart3, Loader2, FileText } from 'lucide-react';
 import { toast } from 'sonner';
 
 export function SettingsPage() {
@@ -21,7 +21,7 @@ export function SettingsPage() {
   const { language, setLanguage } = useLanguageStore();
   const { logout, connectionStatus } = useAuthStore();
   const { exePath, autoStart, runInBackground, isServerRunning, setAutoStart, setRunInBackground, browseForExe, startServer, stopServer } = useCliProxyStore();
-  const { config, fetchConfig, updateUsageStatistics, updatingUsageStats } = useConfigStore();
+  const { config, fetchConfig, updateUsageStatistics, updatingUsageStats, updateLoggingToFile, updatingLogging } = useConfigStore();
 
   useEffect(() => {
     if (connectionStatus === 'connected' && !config) {
@@ -39,6 +39,16 @@ export function SettingsPage() {
     }
   };
 
+  const loggingToFileEnabled = Boolean(config?.['logging-to-file'] ?? false);
+
+  const handleToggleLogging = async () => {
+    try {
+      await updateLoggingToFile(!loggingToFileEnabled);
+    } catch {
+      toast.error(t('logging.error'));
+    }
+  };
+
   const themeOptions = [
     { value: 'light', label: t('settings.light'), icon: Sun },
     { value: 'dark', label: t('settings.dark'), icon: Moon },
@@ -206,6 +216,47 @@ export function SettingsPage() {
         </CardContent>
       </Card>
 
+      {/* Logging Settings */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <FileText className="h-5 w-5" />
+            {t('logging.title')}
+          </CardTitle>
+          <CardDescription>{t('logging.description')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label>{t('logging.enabled')}</Label>
+              <p className="text-xs text-muted-foreground">
+                {t('logging.enabledDesc')}
+              </p>
+            </div>
+            <button
+              type="button"
+              role="switch"
+              aria-checked={loggingToFileEnabled}
+              onClick={handleToggleLogging}
+              disabled={updatingLogging || connectionStatus !== 'connected'}
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
+                loggingToFileEnabled ? 'bg-primary' : 'bg-muted'
+              }`}
+            >
+              {updatingLogging ? (
+                <Loader2 className="h-4 w-4 animate-spin mx-auto text-muted-foreground" />
+              ) : (
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    loggingToFileEnabled ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              )}
+            </button>
+          </div>
+        </CardContent>
+      </Card>
+
       {/* Theme Settings */}
       <Card>
         <CardHeader>

src/features/settings/config.store.ts

@@ -9,9 +9,11 @@ interface ConfigState {
   error: string | null;
   lastFetch: number;
   updatingUsageStats: boolean;
+  updatingLogging: boolean;
   fetchConfig: (forceRefresh?: boolean) => Promise<Config>;
   clearCache: () => void;
   updateUsageStatistics: (enabled: boolean) => Promise<void>;
+  updateLoggingToFile: (enabled: boolean) => Promise<void>;
 }
 
 let configRequestToken = 0;
@@ -23,6 +25,7 @@ export const useConfigStore = create<ConfigState>((set, get) => ({
   error: null,
   lastFetch: 0,
   updatingUsageStats: false,
+  updatingLogging: false,
 
   fetchConfig: async (forceRefresh = false) => {
     const { lastFetch, config } = get();
@@ -88,4 +91,18 @@ export const useConfigStore = create<ConfigState>((set, get) => ({
       set({ updatingUsageStats: false });
     }
   },
+
+  updateLoggingToFile: async (enabled: boolean) => {
+    set({ updatingLogging: true, error: null });
+    try {
+      await configApi.updateLoggingToFile(enabled);
+      const { fetchConfig } = get();
+      await fetchConfig(true);
+    } catch (error: unknown) {
+      set({ error: (error as Error).message || 'Failed to update logging setting' });
+      throw error;
+    } finally {
+      set({ updatingLogging: false });
+    }
+  },
 }));

src/i18n/locales/en.json

@@ -190,6 +190,40 @@
     "tokensUpper": "TOKENS",
     "modelsBreakdown": "MODELS BREAKDOWN"
   },
+  "logging": {
+    "title": "Logging",
+    "description": "Configure request logging to file",
+    "enabled": "Log to File",
+    "enabledDesc": "Save request and error logs to file for debugging",
+    "error": "Failed to update logging setting"
+  },
+  "logs": {
+    "title": "Logs Viewer",
+    "downloadLogs": "Download Logs",
+    "clearLogs": "Clear Logs",
+    "saved": "Logs saved",
+    "saveFailed": "Failed to save logs",
+    "loggingDisabled": "Logging to file is disabled. Enable it in Settings → Logging to capture request logs.",
+    "serverLogs": "Server Logs",
+    "errorLogs": "Request Error Logs",
+    "errorLogsDesc": "Pick an error request log file to download (only generated when request logging is off).",
+    "loadingErrorLogs": "Loading error logs...",
+    "noErrorLogs": "No error logs found",
+    "noErrorLogsDesc": "Your API requests are running smoothly.",
+    "searchPlaceholder": "Search logs by content or keyword",
+    "hideMgmtLogs": "Hide /v0/management logs",
+    "showRawLogs": "Show Raw Logs",
+    "autoRefresh": "Auto Refresh",
+    "scrollUp": "Scroll up to load more",
+    "loaded": "Loaded",
+    "filtered": "Filtered",
+    "hidden": "Hidden",
+    "loadingServerLogs": "Loading server logs...",
+    "noLogsAvailable": "No logs available.",
+    "noMatchingLogs": "No log records match your current filters.",
+    "errorPayloadTitle": "Error Request Payload",
+    "downloadRaw": "Download RAW"
+  },
   "dashboard": {
     "title": "Dashboard",
     "hello": "Hello",

src/i18n/locales/id.json

@@ -190,6 +190,40 @@
     "tokensUpper": "TOKEN",
     "modelsBreakdown": "RINCIAN MODEL"
   },
+  "logging": {
+    "title": "Pencatatan",
+    "description": "Konfigurasi pencatatan permintaan ke file",
+    "enabled": "Catat ke File",
+    "enabledDesc": "Simpan log permintaan dan kesalahan ke file untuk debugging",
+    "error": "Gagal memperbarui pengaturan pencatatan"
+  },
+  "logs": {
+    "title": "Penampil Log",
+    "downloadLogs": "Unduh Log",
+    "clearLogs": "Hapus Log",
+    "saved": "Log tersimpan",
+    "saveFailed": "Gagal menyimpan log",
+    "loggingDisabled": "Pencatatan ke file dinonaktifkan. Aktifkan di Pengaturan → Pencatatan untuk merekam log permintaan.",
+    "serverLogs": "Log Server",
+    "errorLogs": "Log Kesalahan Permintaan",
+    "errorLogsDesc": "Pilih file log kesalahan untuk diunduh (hanya dibuat saat pencatatan permintaan nonaktif).",
+    "loadingErrorLogs": "Memuat log kesalahan...",
+    "noErrorLogs": "Tidak ada log kesalahan",
+    "noErrorLogsDesc": "Permintaan API Anda berjalan lancar.",
+    "searchPlaceholder": "Cari log berdasarkan konten atau kata kunci",
+    "hideMgmtLogs": "Sembunyikan log /v0/management",
+    "showRawLogs": "Tampilkan Log Mentah",
+    "autoRefresh": "Segarkan Otomatis",
+    "scrollUp": "Gulir ke atas untuk memuat lebih banyak",
+    "loaded": "Dimuat",
+    "filtered": "Difilter",
+    "hidden": "Disembunyikan",
+    "loadingServerLogs": "Memuat log server...",
+    "noLogsAvailable": "Tidak ada log tersedia.",
+    "noMatchingLogs": "Tidak ada catatan log yang cocok dengan filter Anda.",
+    "errorPayloadTitle": "Payload Kesalahan Permintaan",
+    "downloadRaw": "Unduh RAW"
+  },
   "dashboard": {
     "title": "Dasbor",
     "hello": "Halo",

src/i18n/locales/ja.json

@@ -189,6 +189,40 @@
     "tokensUpper": "トークン",
     "modelsBreakdown": "モデル別内訳"
   },
+  "logging": {
+    "title": "ログ記録",
+    "description": "リクエストログのファイル記録を設定",
+    "enabled": "ファイルに記録",
+    "enabledDesc": "デバッグ用にリクエストとエラーのログをファイルに保存",
+    "error": "ログ設定の更新に失敗しました"
+  },
+  "logs": {
+    "title": "ログビューア",
+    "downloadLogs": "ログをダウンロード",
+    "clearLogs": "ログをクリア",
+    "saved": "ログを保存しました",
+    "saveFailed": "ログの保存に失敗しました",
+    "loggingDisabled": "ファイルへのログ記録が無効です。リクエストログを記録するには、設定 → ログ記録で有効にしてください。",
+    "serverLogs": "サーバーログ",
+    "errorLogs": "リクエストエラーログ",
+    "errorLogsDesc": "ダウンロードするエラーリクエストログファイルを選択してください（リクエストログがオフの場合のみ生成）。",
+    "loadingErrorLogs": "エラーログを読み込んでいます...",
+    "noErrorLogs": "エラーログが見つかりません",
+    "noErrorLogsDesc": "API リクエストは正常に動作しています。",
+    "searchPlaceholder": "内容またはキーワードでログを検索",
+    "hideMgmtLogs": "/v0/management ログを非表示",
+    "showRawLogs": "生ログを表示",
+    "autoRefresh": "自動更新",
+    "scrollUp": "上にスクロールして続きを読み込む",
+    "loaded": "読み込み済み",
+    "filtered": "フィルター済み",
+    "hidden": "非表示",
+    "loadingServerLogs": "サーバーログを読み込んでいます...",
+    "noLogsAvailable": "ログがありません。",
+    "noMatchingLogs": "現在のフィルターに一致するログ記録がありません。",
+    "errorPayloadTitle": "エラーリクエストペイロード",
+    "downloadRaw": "RAW をダウンロード"
+  },
   "dashboard": {
     "title": "ダッシュボード",
     "hello": "こんにちは",