style(design): apply Minimal Dark Mode design system\n\n- Switched to complete Dark Mode (OLED-friendly)\n- Established standard color palette matching modern technical aesthetics\n- Changed font to Plus Jakarta Sans for increased legibility\n- Enforced dark mode as default in App.tsx\n- Fixed several React cascading render (setState in useEffect) warnings

src/App.tsx

@@ -1,38 +1,38 @@
-import { useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
-import { syncWithLocalTheme } from './actions/theme';
-import { useTranslation } from 'react-i18next';
-import { updateAppLanguage } from './actions/language';
-import { RouterProvider } from '@tanstack/react-router';
-import { router } from './utils/routes';
-import './localization/i18n';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { ThemeProvider } from '@/components/theme-provider';
-import { Toaster } from '@/components/ui/toaster';
-import { LOCAL_STORAGE_KEYS } from '@/constants';
-
-function App() {
-  const { i18n } = useTranslation();
-
-  useEffect(() => {
-    syncWithLocalTheme();
-    updateAppLanguage(i18n);
-    if (window.electron?.changeLanguage) {
-      window.electron.changeLanguage(i18n.language);
-    }
-  }, [i18n]);
-
-  return <RouterProvider router={router} />;
-}
-
-const queryClient = new QueryClient();
-
-const root = createRoot(document.getElementById('app')!);
-root.render(
-  <QueryClientProvider client={queryClient}>
-    <ThemeProvider storageKey={LOCAL_STORAGE_KEYS.THEME} defaultTheme="system">
-      <App />
-      <Toaster />
-    </ThemeProvider>
-  </QueryClientProvider>,
-);
+import { useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { syncWithLocalTheme } from './actions/theme';
+import { useTranslation } from 'react-i18next';
+import { updateAppLanguage } from './actions/language';
+import { RouterProvider } from '@tanstack/react-router';
+import { router } from './utils/routes';
+import './localization/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeProvider } from '@/components/theme-provider';
+import { Toaster } from '@/components/ui/toaster';
+import { LOCAL_STORAGE_KEYS } from '@/constants';
+
+function App() {
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    syncWithLocalTheme();
+    updateAppLanguage(i18n);
+    if (window.electron?.changeLanguage) {
+      window.electron.changeLanguage(i18n.language);
+    }
+  }, [i18n]);
+
+  return <RouterProvider router={router} />;
+}
+
+const queryClient = new QueryClient();
+
+const root = createRoot(document.getElementById('app')!);
+root.render(
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider storageKey={LOCAL_STORAGE_KEYS.THEME} defaultTheme="dark">
+      <App />
+      <Toaster />
+    </ThemeProvider>
+  </QueryClientProvider>,
+);

src/actions/account.ts

@@ -1,54 +1,54 @@
-import { ipc } from '@/ipc/manager';
-import type { DeviceProfile } from '@/types/account';
-
-export function listAccounts() {
-  return ipc.client.account.listAccounts();
-}
-
-export function addAccountSnapshot() {
-  return ipc.client.account.addAccountSnapshot();
-}
-
-export function switchAccount(accountId: string) {
-  return ipc.client.account.switchAccount({ accountId });
-}
-
-export function deleteAccount(accountId: string) {
-  return ipc.client.account.deleteAccount({ accountId });
-}
-
-export function previewGenerateIdentityProfile() {
-  return ipc.client.account.previewGenerateIdentityProfile();
-}
-
-export function getIdentityProfiles(accountId: string) {
-  return ipc.client.account.getIdentityProfiles({ accountId });
-}
-
-export function bindIdentityProfile(accountId: string, mode: 'capture' | 'generate') {
-  return ipc.client.account.bindIdentityProfile({ accountId, mode });
-}
-
-export function bindIdentityProfileWithPayload(accountId: string, profile: DeviceProfile) {
-  return ipc.client.account.bindIdentityProfileWithPayload({ accountId, profile });
-}
-
-export function applyBoundIdentityProfile(accountId: string) {
-  return ipc.client.account.applyBoundIdentityProfile({ accountId });
-}
-
-export function restoreIdentityProfileRevision(accountId: string, versionId: string) {
-  return ipc.client.account.restoreIdentityProfileRevision({ accountId, versionId });
-}
-
-export function deleteIdentityProfileRevision(accountId: string, versionId: string) {
-  return ipc.client.account.deleteIdentityProfileRevision({ accountId, versionId });
-}
-
-export function restoreBaselineProfile(accountId: string) {
-  return ipc.client.account.restoreBaselineProfile({ accountId });
-}
-
-export function openIdentityStorageFolder() {
-  return ipc.client.account.openIdentityStorageFolder();
-}
+import { ipc } from '@/ipc/manager';
+import type { DeviceProfile } from '@/types/account';
+
+export function listAccounts() {
+  return ipc.client.account.listAccounts();
+}
+
+export function addAccountSnapshot() {
+  return ipc.client.account.addAccountSnapshot();
+}
+
+export function switchAccount(accountId: string) {
+  return ipc.client.account.switchAccount({ accountId });
+}
+
+export function deleteAccount(accountId: string) {
+  return ipc.client.account.deleteAccount({ accountId });
+}
+
+export function previewGenerateIdentityProfile() {
+  return ipc.client.account.previewGenerateIdentityProfile();
+}
+
+export function getIdentityProfiles(accountId: string) {
+  return ipc.client.account.getIdentityProfiles({ accountId });
+}
+
+export function bindIdentityProfile(accountId: string, mode: 'capture' | 'generate') {
+  return ipc.client.account.bindIdentityProfile({ accountId, mode });
+}
+
+export function bindIdentityProfileWithPayload(accountId: string, profile: DeviceProfile) {
+  return ipc.client.account.bindIdentityProfileWithPayload({ accountId, profile });
+}
+
+export function applyBoundIdentityProfile(accountId: string) {
+  return ipc.client.account.applyBoundIdentityProfile({ accountId });
+}
+
+export function restoreIdentityProfileRevision(accountId: string, versionId: string) {
+  return ipc.client.account.restoreIdentityProfileRevision({ accountId, versionId });
+}
+
+export function deleteIdentityProfileRevision(accountId: string, versionId: string) {
+  return ipc.client.account.deleteIdentityProfileRevision({ accountId, versionId });
+}
+
+export function restoreBaselineProfile(accountId: string) {
+  return ipc.client.account.restoreBaselineProfile({ accountId });
+}
+
+export function openIdentityStorageFolder() {
+  return ipc.client.account.openIdentityStorageFolder();
+}

src/actions/app.ts

@@ -1,9 +1,9 @@
-import { ipc } from '@/ipc/manager';
-
-export function getPlatform() {
-  return ipc.client.app.currentPlatfom();
-}
-
-export function getAppVersion() {
-  return ipc.client.app.appVersion();
-}
+import { ipc } from '@/ipc/manager';
+
+export function getPlatform() {
+  return ipc.client.app.currentPlatfom();
+}
+
+export function getAppVersion() {
+  return ipc.client.app.appVersion();
+}

src/actions/cloud.ts

@@ -1,136 +1,136 @@
-import { ipc } from '@/ipc/manager';
-import type { DeviceProfile } from '@/types/account';
-import { isValidProxyUrl } from '@/utils/url';
-
-export function addGoogleAccount(input: { authCode: string; oauthClientKey?: string }) {
-  return ipc.client.cloud.addGoogleAccount(input);
-}
-
-export function listCloudAccounts() {
-  return ipc.client.cloud.listCloudAccounts();
-}
-
-export function deleteCloudAccount(input: { accountId: string }) {
-  return ipc.client.cloud.deleteCloudAccount(input);
-}
-
-export function refreshAccountQuota(input: { accountId: string }) {
-  console.log(`[Action] Calling refreshAccountQuota for: ${input.accountId}`);
-  return ipc.client.cloud.refreshAccountQuota(input);
-}
-
-export function switchCloudAccount(input: { accountId: string }) {
-  return ipc.client.cloud.switchCloudAccount(input);
-}
-
-export function getAutoSwitchEnabled() {
-  return ipc.client.cloud.getAutoSwitchEnabled();
-}
-
-export function setAutoSwitchEnabled(input: { enabled: boolean }) {
-  return ipc.client.cloud.setAutoSwitchEnabled(input);
-}
-
-export function forcePollCloudMonitor() {
-  return ipc.client.cloud.forcePollCloudMonitor();
-}
-
-export function syncLocalAccount() {
-  return ipc.client.cloud.syncLocalAccount();
-}
-
-export interface OAuthClientDescriptor {
-  key: string;
-  label: string;
-  client_id: string;
-  is_active: boolean;
-  is_builtin: boolean;
-}
-
-export function startAuthFlow(input?: { oauthClientKey?: string }) {
-  return ipc.client.cloud.startAuthFlow(input);
-}
-
-export function listOAuthClients() {
-  return ipc.client.cloud.listOAuthClients() as Promise<OAuthClientDescriptor[]>;
-}
-
-export async function getActiveOAuthClient() {
-  const response = await ipc.client.cloud.getActiveOAuthClient();
-  return response.client_key;
-}
-
-export function setActiveOAuthClient(input: { clientKey: string }) {
-  return ipc.client.cloud.setActiveOAuthClient(input);
-}
-
-export function getSwitchStatus() {
-  return ipc.client.cloud.getSwitchStatus();
-}
-
-export function getCloudIdentityProfiles(input: { accountId: string }) {
-  return ipc.client.cloud.getIdentityProfiles(input);
-}
-
-export function previewGenerateCloudIdentityProfile() {
-  return ipc.client.cloud.previewIdentityProfile();
-}
-
-export function bindCloudIdentityProfile(input: {
-  accountId: string;
-  mode: 'capture' | 'generate';
-}) {
-  return ipc.client.cloud.bindIdentityProfile(input);
-}
-
-export function bindCloudIdentityProfileWithPayload(input: {
-  accountId: string;
-  profile: DeviceProfile;
-}) {
-  return ipc.client.cloud.bindIdentityProfileWithPayload(input);
-}
-
-export function restoreCloudIdentityProfileRevision(input: {
-  accountId: string;
-  versionId: string;
-}) {
-  return ipc.client.cloud.restoreIdentityProfileRevision(input);
-}
-
-export function restoreCloudBaselineProfile(input: { accountId: string }) {
-  return ipc.client.cloud.restoreBaselineProfile(input);
-}
-
-export function deleteCloudIdentityProfileRevision(input: {
-  accountId: string;
-  versionId: string;
-}) {
-  return ipc.client.cloud.deleteIdentityProfileRevision(input);
-}
-
-export function openCloudIdentityStorageFolder() {
-  return ipc.client.cloud.openIdentityStorageFolder();
-}
-
-export function setAccountProxy(input: { accountId: string; proxyUrl: string | null }) {
-  if (input.proxyUrl && !isValidProxyUrl(input.proxyUrl)) {
-    throw new Error('Invalid proxy URL format');
-  }
-  return ipc.client.cloud.setAccountProxy(input);
-}
-
-export function exportCloudAccounts(input: { stripTokens?: boolean }) {
-  return ipc.client.cloud.exportCloudAccounts(input);
-}
-
-export function importCloudAccounts(input: {
-  jsonContent: string;
-  strategy?: 'merge' | 'overwrite' | 'skip-existing';
-}) {
-  try {
-    JSON.parse(input.jsonContent);
-  } catch {
-    throw new Error('Invalid JSON content provided for import');
-  }
-  return ipc.client.cloud.importCloudAccounts(input);
-}
+import { ipc } from '@/ipc/manager';
+import type { DeviceProfile } from '@/types/account';
+import { isValidProxyUrl } from '@/utils/url';
+
+export function addGoogleAccount(input: { authCode: string; oauthClientKey?: string }) {
+  return ipc.client.cloud.addGoogleAccount(input);
+}
+
+export function listCloudAccounts() {
+  return ipc.client.cloud.listCloudAccounts();
+}
+
+export function deleteCloudAccount(input: { accountId: string }) {
+  return ipc.client.cloud.deleteCloudAccount(input);
+}
+
+export function refreshAccountQuota(input: { accountId: string }) {
+  console.log(`[Action] Calling refreshAccountQuota for: ${input.accountId}`);
+  return ipc.client.cloud.refreshAccountQuota(input);
+}
+
+export function switchCloudAccount(input: { accountId: string }) {
+  return ipc.client.cloud.switchCloudAccount(input);
+}
+
+export function getAutoSwitchEnabled() {
+  return ipc.client.cloud.getAutoSwitchEnabled();
+}
+
+export function setAutoSwitchEnabled(input: { enabled: boolean }) {
+  return ipc.client.cloud.setAutoSwitchEnabled(input);
+}
+
+export function forcePollCloudMonitor() {
+  return ipc.client.cloud.forcePollCloudMonitor();
+}
+
+export function syncLocalAccount() {
+  return ipc.client.cloud.syncLocalAccount();
+}
+
+export interface OAuthClientDescriptor {
+  key: string;
+  label: string;
+  client_id: string;
+  is_active: boolean;
+  is_builtin: boolean;
+}
+
+export function startAuthFlow(input?: { oauthClientKey?: string }) {
+  return ipc.client.cloud.startAuthFlow(input);
+}
+
+export function listOAuthClients() {
+  return ipc.client.cloud.listOAuthClients() as Promise<OAuthClientDescriptor[]>;
+}
+
+export async function getActiveOAuthClient() {
+  const response = await ipc.client.cloud.getActiveOAuthClient();
+  return response.client_key;
+}
+
+export function setActiveOAuthClient(input: { clientKey: string }) {
+  return ipc.client.cloud.setActiveOAuthClient(input);
+}
+
+export function getSwitchStatus() {
+  return ipc.client.cloud.getSwitchStatus();
+}
+
+export function getCloudIdentityProfiles(input: { accountId: string }) {
+  return ipc.client.cloud.getIdentityProfiles(input);
+}
+
+export function previewGenerateCloudIdentityProfile() {
+  return ipc.client.cloud.previewIdentityProfile();
+}
+
+export function bindCloudIdentityProfile(input: {
+  accountId: string;
+  mode: 'capture' | 'generate';
+}) {
+  return ipc.client.cloud.bindIdentityProfile(input);
+}
+
+export function bindCloudIdentityProfileWithPayload(input: {
+  accountId: string;
+  profile: DeviceProfile;
+}) {
+  return ipc.client.cloud.bindIdentityProfileWithPayload(input);
+}
+
+export function restoreCloudIdentityProfileRevision(input: {
+  accountId: string;
+  versionId: string;
+}) {
+  return ipc.client.cloud.restoreIdentityProfileRevision(input);
+}
+
+export function restoreCloudBaselineProfile(input: { accountId: string }) {
+  return ipc.client.cloud.restoreBaselineProfile(input);
+}
+
+export function deleteCloudIdentityProfileRevision(input: {
+  accountId: string;
+  versionId: string;
+}) {
+  return ipc.client.cloud.deleteIdentityProfileRevision(input);
+}
+
+export function openCloudIdentityStorageFolder() {
+  return ipc.client.cloud.openIdentityStorageFolder();
+}
+
+export function setAccountProxy(input: { accountId: string; proxyUrl: string | null }) {
+  if (input.proxyUrl && !isValidProxyUrl(input.proxyUrl)) {
+    throw new Error('Invalid proxy URL format');
+  }
+  return ipc.client.cloud.setAccountProxy(input);
+}
+
+export function exportCloudAccounts(input: { stripTokens?: boolean }) {
+  return ipc.client.cloud.exportCloudAccounts(input);
+}
+
+export function importCloudAccounts(input: {
+  jsonContent: string;
+  strategy?: 'merge' | 'overwrite' | 'skip-existing';
+}) {
+  try {
+    JSON.parse(input.jsonContent);
+  } catch {
+    throw new Error('Invalid JSON content provided for import');
+  }
+  return ipc.client.cloud.importCloudAccounts(input);
+}

src/actions/database.ts

@@ -1,14 +1,14 @@
-import { ipc } from '@/ipc/manager';
-import { AccountBackupData, Account } from '@/types/account';
-
-export function backupAccount(account: Account) {
-  return ipc.client.database.backupAccount(account);
-}
-
-export function restoreAccount(backup: AccountBackupData) {
-  return ipc.client.database.restoreAccount(backup);
-}
-
-export function getCurrentAccountInfo() {
-  return ipc.client.database.getCurrentAccountInfo();
-}
+import { ipc } from '@/ipc/manager';
+import { AccountBackupData, Account } from '@/types/account';
+
+export function backupAccount(account: Account) {
+  return ipc.client.database.backupAccount(account);
+}
+
+export function restoreAccount(backup: AccountBackupData) {
+  return ipc.client.database.restoreAccount(backup);
+}
+
+export function getCurrentAccountInfo() {
+  return ipc.client.database.getCurrentAccountInfo();
+}

src/actions/language.ts

@@ -1,20 +1,20 @@
-import type { i18n } from 'i18next';
-
-export function setAppLanguage(lang: string, i18n: i18n) {
-  i18n
-    .changeLanguage(lang)
-    .then(() => {
-      localStorage.setItem('lang', lang);
-      document.documentElement.lang = lang;
-      if (window.electron?.changeLanguage) {
-        window.electron.changeLanguage(lang);
-      }
-    })
-    .catch((err) => {
-      console.error('[Language] Failed to change language:', err);
-    });
-}
-
-export function updateAppLanguage(i18n: i18n) {
-  document.documentElement.lang = i18n.language;
-}
+import type { i18n } from 'i18next';
+
+export function setAppLanguage(lang: string, i18n: i18n) {
+  i18n
+    .changeLanguage(lang)
+    .then(() => {
+      localStorage.setItem('lang', lang);
+      document.documentElement.lang = lang;
+      if (window.electron?.changeLanguage) {
+        window.electron.changeLanguage(lang);
+      }
+    })
+    .catch((err) => {
+      console.error('[Language] Failed to change language:', err);
+    });
+}
+
+export function updateAppLanguage(i18n: i18n) {
+  document.documentElement.lang = i18n.language;
+}

src/actions/process.ts

@@ -1,13 +1,13 @@
-import { ipc } from '@/ipc/manager';
-
-export function isProcessRunning() {
-  return ipc.client.proc.isProcessRunning();
-}
-
-export function closeGeminiNexus() {
-  return ipc.client.proc.closeGeminiNexus();
-}
-
-export function startGeminiNexus() {
-  return ipc.client.proc.startGeminiNexus();
-}
+import { ipc } from '@/ipc/manager';
+
+export function isProcessRunning() {
+  return ipc.client.proc.isProcessRunning();
+}
+
+export function closeGeminiNexus() {
+  return ipc.client.proc.closeGeminiNexus();
+}
+
+export function startGeminiNexus() {
+  return ipc.client.proc.startGeminiNexus();
+}

src/actions/system.ts

@@ -1,5 +1,5 @@
-import { ipc } from '@/ipc/manager';
-
-export function openLogDirectory() {
-  return ipc.client.system.openLogDirectory();
-}
+import { ipc } from '@/ipc/manager';
+
+export function openLogDirectory() {
+  return ipc.client.system.openLogDirectory();
+}

src/actions/theme.ts

@@ -1,51 +1,51 @@
-import { ThemeMode } from '@/types/theme-mode';
-import { ipc } from '@/ipc/manager';
-import { LOCAL_STORAGE_KEYS } from '@/constants';
-
-export interface ThemePreferences {
-  system: ThemeMode;
-  local: ThemeMode | null;
-}
-
-export async function getCurrentTheme(): Promise<ThemePreferences> {
-  const currentTheme = await ipc.client.theme.getCurrentThemeMode();
-  const localTheme = localStorage.getItem(LOCAL_STORAGE_KEYS.THEME) as ThemeMode | null;
-
-  return {
-    system: currentTheme,
-    local: localTheme,
-  };
-}
-
-export async function setTheme(newTheme: ThemeMode) {
-  const isDarkMode = newTheme === 'dark';
-  await ipc.client.theme.setThemeMode(newTheme);
-  localStorage.setItem(LOCAL_STORAGE_KEYS.THEME, newTheme);
-  updateDocumentTheme(isDarkMode);
-}
-
-export async function toggleTheme() {
-  const isDarkMode = await ipc.client.theme.toggleThemeMode();
-  const newTheme = isDarkMode ? 'dark' : 'light';
-
-  updateDocumentTheme(isDarkMode);
-  localStorage.setItem(LOCAL_STORAGE_KEYS.THEME, newTheme);
-}
-
-export async function syncWithLocalTheme() {
-  const { local } = await getCurrentTheme();
-  if (!local) {
-    setTheme('system');
-    return;
-  }
-
-  await setTheme(local);
-}
-
-function updateDocumentTheme(isDarkMode: boolean) {
-  if (isDarkMode) {
-    document.documentElement.classList.add('dark');
-  } else {
-    document.documentElement.classList.remove('dark');
-  }
-}
+import { ThemeMode } from '@/types/theme-mode';
+import { ipc } from '@/ipc/manager';
+import { LOCAL_STORAGE_KEYS } from '@/constants';
+
+export interface ThemePreferences {
+  system: ThemeMode;
+  local: ThemeMode | null;
+}
+
+export async function getCurrentTheme(): Promise<ThemePreferences> {
+  const currentTheme = await ipc.client.theme.getCurrentThemeMode();
+  const localTheme = localStorage.getItem(LOCAL_STORAGE_KEYS.THEME) as ThemeMode | null;
+
+  return {
+    system: currentTheme,
+    local: localTheme,
+  };
+}
+
+export async function setTheme(newTheme: ThemeMode) {
+  const isDarkMode = newTheme === 'dark';
+  await ipc.client.theme.setThemeMode(newTheme);
+  localStorage.setItem(LOCAL_STORAGE_KEYS.THEME, newTheme);
+  updateDocumentTheme(isDarkMode);
+}
+
+export async function toggleTheme() {
+  const isDarkMode = await ipc.client.theme.toggleThemeMode();
+  const newTheme = isDarkMode ? 'dark' : 'light';
+
+  updateDocumentTheme(isDarkMode);
+  localStorage.setItem(LOCAL_STORAGE_KEYS.THEME, newTheme);
+}
+
+export async function syncWithLocalTheme() {
+  const { local } = await getCurrentTheme();
+  if (!local) {
+    setTheme('system');
+    return;
+  }
+
+  await setTheme(local);
+}
+
+function updateDocumentTheme(isDarkMode: boolean) {
+  if (isDarkMode) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+}

src/actions/window.ts

@@ -1,11 +1,11 @@
-import { ipc } from '../ipc/manager';
-
-export async function minimizeWindow() {
-  await ipc.client.window.minimizeWindow();
-}
-export async function maximizeWindow() {
-  await ipc.client.window.maximizeWindow();
-}
-export async function closeWindow() {
-  await ipc.client.window.closeWindow();
-}
+import { ipc } from '../ipc/manager';
+
+export async function minimizeWindow() {
+  await ipc.client.window.minimizeWindow();
+}
+export async function maximizeWindow() {
+  await ipc.client.window.maximizeWindow();
+}
+export async function closeWindow() {
+  await ipc.client.window.closeWindow();
+}

src/components/AccountCard.tsx

@@ -1,188 +1,188 @@
-import React, { useState, useRef } from 'react';
-import { Account } from '@/types/account';
-import { Card, CardContent } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Badge } from '@/components/ui/badge';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { MoreVertical, Trash2, RefreshCw } from 'lucide-react';
-import { formatDistanceToNow, type Locale } from 'date-fns';
-import { enUS, zhCN, ru, vi } from 'date-fns/locale';
-import { cn } from '@/lib/utils';
-import { useTranslation } from 'react-i18next';
-
-const DEFAULT_GLARE_POSITION = { x: 50, y: 50 };
-const DEFAULT_CARD_TRANSFORM = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
-const DATE_LOCALE_MAP: Record<string, Locale> = {
-  en: enUS,
-  'zh-CN': zhCN,
-  ru: ru,
-  vi: vi,
-};
-
-interface AccountCardProps {
-  account: Account;
-  isCurrent: boolean;
-  onSwitch: (id: string) => void;
-  onDelete: (id: string) => void;
-  isSwitching?: boolean;
-  isDeleting?: boolean;
-}
-
-export const AccountCard: React.FC<AccountCardProps> = ({
-  account,
-  isCurrent,
-  onSwitch,
-  onDelete,
-  isSwitching,
-  isDeleting,
-}) => {
-  const { t, i18n } = useTranslation();
-  const cardRef = useRef<HTMLDivElement>(null);
-  const [cardTransform, setCardTransform] = useState('');
-  const [glarePosition, setGlarePosition] = useState(DEFAULT_GLARE_POSITION);
-
-  const initials = account.name
-    ? account.name
-        .split(' ')
-        .map((n) => n[0])
-        .join('')
-        .toUpperCase()
-        .slice(0, 2)
-    : account.email[0].toUpperCase();
-
-  // Handle pointer movement and calculate 3D rotation angles
-  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (!cardRef.current) return;
-
-    const rect = cardRef.current.getBoundingClientRect();
-    const centerX = rect.left + rect.width / 2;
-    const centerY = rect.top + rect.height / 2;
-
-    // Calculate pointer position relative to the card center (-1 to 1)
-    const relativeX = (event.clientX - centerX) / (rect.width / 2);
-    const relativeY = (event.clientY - centerY) / (rect.height / 2);
-
-    // Maximum rotation angle
-    const maxRotation = 15;
-    const rotateX = -relativeY * maxRotation; // Vertical tilt
-    const rotateY = relativeX * maxRotation; // Horizontal tilt
-
-    setCardTransform(
-      `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`,
-    );
-
-    // Update glare position
-    setGlarePosition({
-      x: ((event.clientX - rect.left) / rect.width) * 100,
-      y: ((event.clientY - rect.top) / rect.height) * 100,
-    });
-  };
-
-  // Reset when pointer leaves
-  const handleMouseLeave = () => {
-    setCardTransform(DEFAULT_CARD_TRANSFORM);
-    setGlarePosition(DEFAULT_GLARE_POSITION);
-  };
-
-  return (
-    <div
-      ref={cardRef}
-      onMouseMove={handleMouseMove}
-      onMouseLeave={handleMouseLeave}
-      style={{
-        transform: cardTransform,
-        transformStyle: 'preserve-3d',
-        transition: cardTransform ? 'transform 0.1s ease-out' : 'transform 0.5s ease-out',
-      }}
-      className="relative"
-    >
-      {/* Glare overlay */}
-      <div
-        className="pointer-events-none absolute inset-0 z-10 rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-        style={{
-          background: `radial-gradient(circle at ${glarePosition.x}% ${glarePosition.y}%, rgba(255,255,255,0.15) 0%, transparent 60%)`,
-          opacity: cardTransform ? 0.6 : 0,
-        }}
-      />
-
-      <Card
-        className={cn(
-          'relative overflow-hidden transition-all duration-200',
-          'hover:shadow-primary/10 hover:shadow-xl',
-          isCurrent ? 'border-primary/50 bg-primary/5' : 'hover:border-primary/20 cursor-pointer',
-          (isSwitching || isDeleting) && 'pointer-events-none opacity-60',
-        )}
-        onClick={() => !isCurrent && !isSwitching && !isDeleting && onSwitch(account.id)}
-      >
-        <CardContent className="flex items-center justify-between p-4">
-          <div className="flex min-w-0 flex-1 items-center gap-4">
-            <Avatar className={cn('h-10 w-10', isCurrent && 'ring-primary ring-2 ring-offset-2')}>
-              <AvatarImage src={account.avatar_url} />
-              <AvatarFallback className={isCurrent ? 'bg-primary text-primary-foreground' : ''}>
-                {initials}
-              </AvatarFallback>
-            </Avatar>
-
-            <div className="min-w-0 flex-1 space-y-1">
-              <div className="flex items-center gap-2">
-                <h4 className="truncate leading-none font-semibold">{account.name}</h4>
-                {isCurrent && (
-                  <Badge variant="default" className="h-5 flex-none px-1.5 text-[10px]">
-                    {t('account.current')}
-                  </Badge>
-                )}
-                {isSwitching && (
-                  <RefreshCw className="text-muted-foreground h-3 w-3 flex-none animate-spin" />
-                )}
-              </div>
-              <p className="text-muted-foreground truncate text-sm">{account.email}</p>
-              <p className="text-muted-foreground/60 truncate text-xs">
-                {t('account.lastUsed', {
-                  time: formatDistanceToNow(new Date(account.last_used), {
-                    addSuffix: true,
-                    locale: DATE_LOCALE_MAP[i18n.language] || enUS,
-                  }),
-                })}
-              </p>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <MoreVertical className="h-4 w-4" />
-                  <span className="sr-only">{t('common.openMenu')}</span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  className="text-destructive focus:text-destructive"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onDelete(account.id);
-                  }}
-                  disabled={isDeleting}
-                >
-                  <Trash2 className="mr-2 h-4 w-4" />
-                  {t('action.deleteBackup')}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
+import React, { useState, useRef } from 'react';
+import { Account } from '@/types/account';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { MoreVertical, Trash2, RefreshCw } from 'lucide-react';
+import { formatDistanceToNow, type Locale } from 'date-fns';
+import { enUS, zhCN, ru, vi } from 'date-fns/locale';
+import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
+
+const DEFAULT_GLARE_POSITION = { x: 50, y: 50 };
+const DEFAULT_CARD_TRANSFORM = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
+const DATE_LOCALE_MAP: Record<string, Locale> = {
+  en: enUS,
+  'zh-CN': zhCN,
+  ru: ru,
+  vi: vi,
+};
+
+interface AccountCardProps {
+  account: Account;
+  isCurrent: boolean;
+  onSwitch: (id: string) => void;
+  onDelete: (id: string) => void;
+  isSwitching?: boolean;
+  isDeleting?: boolean;
+}
+
+export const AccountCard: React.FC<AccountCardProps> = ({
+  account,
+  isCurrent,
+  onSwitch,
+  onDelete,
+  isSwitching,
+  isDeleting,
+}) => {
+  const { t, i18n } = useTranslation();
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [cardTransform, setCardTransform] = useState('');
+  const [glarePosition, setGlarePosition] = useState(DEFAULT_GLARE_POSITION);
+
+  const initials = account.name
+    ? account.name
+        .split(' ')
+        .map((n) => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2)
+    : account.email[0].toUpperCase();
+
+  // Handle pointer movement and calculate 3D rotation angles
+  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return;
+
+    const rect = cardRef.current.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    // Calculate pointer position relative to the card center (-1 to 1)
+    const relativeX = (event.clientX - centerX) / (rect.width / 2);
+    const relativeY = (event.clientY - centerY) / (rect.height / 2);
+
+    // Maximum rotation angle
+    const maxRotation = 15;
+    const rotateX = -relativeY * maxRotation; // Vertical tilt
+    const rotateY = relativeX * maxRotation; // Horizontal tilt
+
+    setCardTransform(
+      `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`,
+    );
+
+    // Update glare position
+    setGlarePosition({
+      x: ((event.clientX - rect.left) / rect.width) * 100,
+      y: ((event.clientY - rect.top) / rect.height) * 100,
+    });
+  };
+
+  // Reset when pointer leaves
+  const handleMouseLeave = () => {
+    setCardTransform(DEFAULT_CARD_TRANSFORM);
+    setGlarePosition(DEFAULT_GLARE_POSITION);
+  };
+
+  return (
+    <div
+      ref={cardRef}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={{
+        transform: cardTransform,
+        transformStyle: 'preserve-3d',
+        transition: cardTransform ? 'transform 0.1s ease-out' : 'transform 0.5s ease-out',
+      }}
+      className="relative"
+    >
+      {/* Glare overlay */}
+      <div
+        className="pointer-events-none absolute inset-0 z-10 rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        style={{
+          background: `radial-gradient(circle at ${glarePosition.x}% ${glarePosition.y}%, rgba(255,255,255,0.15) 0%, transparent 60%)`,
+          opacity: cardTransform ? 0.6 : 0,
+        }}
+      />
+
+      <Card
+        className={cn(
+          'relative overflow-hidden transition-all duration-200',
+          'hover:shadow-primary/10 hover:shadow-xl',
+          isCurrent ? 'border-primary/50 bg-primary/5' : 'hover:border-primary/20 cursor-pointer',
+          (isSwitching || isDeleting) && 'pointer-events-none opacity-60',
+        )}
+        onClick={() => !isCurrent && !isSwitching && !isDeleting && onSwitch(account.id)}
+      >
+        <CardContent className="flex items-center justify-between p-4">
+          <div className="flex min-w-0 flex-1 items-center gap-4">
+            <Avatar className={cn('h-10 w-10', isCurrent && 'ring-primary ring-2 ring-offset-2')}>
+              <AvatarImage src={account.avatar_url} />
+              <AvatarFallback className={isCurrent ? 'bg-primary text-primary-foreground' : ''}>
+                {initials}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="min-w-0 flex-1 space-y-1">
+              <div className="flex items-center gap-2">
+                <h4 className="truncate leading-none font-semibold">{account.name}</h4>
+                {isCurrent && (
+                  <Badge variant="default" className="h-5 flex-none px-1.5 text-[10px]">
+                    {t('account.current')}
+                  </Badge>
+                )}
+                {isSwitching && (
+                  <RefreshCw className="text-muted-foreground h-3 w-3 flex-none animate-spin" />
+                )}
+              </div>
+              <p className="text-muted-foreground truncate text-sm">{account.email}</p>
+              <p className="text-muted-foreground/60 truncate text-xs">
+                {t('account.lastUsed', {
+                  time: formatDistanceToNow(new Date(account.last_used), {
+                    addSuffix: true,
+                    locale: DATE_LOCALE_MAP[i18n.language] || enUS,
+                  }),
+                })}
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <MoreVertical className="h-4 w-4" />
+                  <span className="sr-only">{t('common.openMenu')}</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem
+                  className="text-destructive focus:text-destructive"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete(account.id);
+                  }}
+                  disabled={isDeleting}
+                >
+                  <Trash2 className="mr-2 h-4 w-4" />
+                  {t('action.deleteBackup')}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

src/components/AccountProxySettings.tsx

@@ -1,115 +1,115 @@
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCloudAccounts, useSetAccountProxy } from '@/hooks/useCloudAccounts';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { isValidProxyUrl } from '@/utils/url';
-import { Loader2 } from 'lucide-react';
-import { CloudAccount } from '@/types/cloudAccount';
-
-function AccountProxyItem({ account }: { account: CloudAccount }) {
-  const { t } = useTranslation();
-  const setAccountProxy = useSetAccountProxy();
-  const [proxyUrl, setProxyUrl] = useState(account.proxy_url || '');
-  const [proxySaved, setProxySaved] = useState(false);
-
-  return (
-    <div className="flex items-center justify-between gap-4 border-b py-3 last:border-0">
-      <div className="flex items-center gap-3 overflow-hidden">
-        {account.avatar_url ? (
-          <img
-            src={account.avatar_url}
-            alt={account.name || ''}
-            className="bg-muted h-8 w-8 shrink-0 rounded-full border"
-          />
-        ) : (
-          <div className="bg-primary/10 text-primary flex h-8 w-8 shrink-0 items-center justify-center rounded-full border">
-            {account.name?.[0]?.toUpperCase() || 'A'}
-          </div>
-        )}
-        <div className="flex flex-col overflow-hidden">
-          <span className="truncate text-sm font-semibold">
-            {account.name || t('cloud.card.unknown')}
-          </span>
-          <span className="text-muted-foreground truncate text-xs">{account.email}</span>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <Input
-          value={proxyUrl}
-          onChange={(e) => {
-            setProxyUrl(e.target.value);
-            setProxySaved(false);
-          }}
-          onBlur={() => {
-            const trimmed = proxyUrl.trim();
-            if (trimmed && !isValidProxyUrl(trimmed)) {
-              setProxyUrl(account.proxy_url || '');
-              return;
-            }
-            if (trimmed !== (account.proxy_url || '')) {
-              setAccountProxy.mutate({
-                accountId: account.id,
-                proxyUrl: trimmed || null,
-              });
-              setProxySaved(true);
-              setTimeout(() => setProxySaved(false), 2000);
-            }
-          }}
-          placeholder={t('cloud.card.proxyPlaceholder') || 'e.g. http://127.0.0.1:7890'}
-          className="h-8 w-48 text-sm"
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              e.currentTarget.blur();
-            }
-          }}
-        />
-        <div className="w-16">
-          {proxySaved && (
-            <span className="text-[10px] whitespace-nowrap text-green-500">
-              {t('cloud.card.proxySaved')}
-            </span>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function AccountProxySettings() {
-  const { t } = useTranslation();
-  const { data: accounts, isLoading } = useCloudAccounts();
-
-  if (isLoading) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('settings.proxy.accountProxies.title')}</CardTitle>
-          <CardDescription>{t('settings.proxy.accountProxies.description')}</CardDescription>
-        </CardHeader>
-        <CardContent className="flex justify-center p-6">
-          <Loader2 className="text-muted-foreground animate-spin" />
-        </CardContent>
-      </Card>
-    );
-  }
-
-  if (!accounts || accounts.length === 0) {
-    return null;
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('settings.proxy.accountProxies.title')}</CardTitle>
-        <CardDescription>{t('settings.proxy.accountProxies.description')}</CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col">
-        {accounts.map((account) => (
-          <AccountProxyItem key={account.id} account={account} />
-        ))}
-      </CardContent>
-    </Card>
-  );
-}
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useCloudAccounts, useSetAccountProxy } from '@/hooks/useCloudAccounts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { isValidProxyUrl } from '@/utils/url';
+import { Loader2 } from 'lucide-react';
+import { CloudAccount } from '@/types/cloudAccount';
+
+function AccountProxyItem({ account }: { account: CloudAccount }) {
+  const { t } = useTranslation();
+  const setAccountProxy = useSetAccountProxy();
+  const [proxyUrl, setProxyUrl] = useState(account.proxy_url || '');
+  const [proxySaved, setProxySaved] = useState(false);
+
+  return (
+    <div className="flex items-center justify-between gap-4 border-b py-3 last:border-0">
+      <div className="flex items-center gap-3 overflow-hidden">
+        {account.avatar_url ? (
+          <img
+            src={account.avatar_url}
+            alt={account.name || ''}
+            className="bg-muted h-8 w-8 shrink-0 rounded-full border"
+          />
+        ) : (
+          <div className="bg-primary/10 text-primary flex h-8 w-8 shrink-0 items-center justify-center rounded-full border">
+            {account.name?.[0]?.toUpperCase() || 'A'}
+          </div>
+        )}
+        <div className="flex flex-col overflow-hidden">
+          <span className="truncate text-sm font-semibold">
+            {account.name || t('cloud.card.unknown')}
+          </span>
+          <span className="text-muted-foreground truncate text-xs">{account.email}</span>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Input
+          value={proxyUrl}
+          onChange={(e) => {
+            setProxyUrl(e.target.value);
+            setProxySaved(false);
+          }}
+          onBlur={() => {
+            const trimmed = proxyUrl.trim();
+            if (trimmed && !isValidProxyUrl(trimmed)) {
+              setProxyUrl(account.proxy_url || '');
+              return;
+            }
+            if (trimmed !== (account.proxy_url || '')) {
+              setAccountProxy.mutate({
+                accountId: account.id,
+                proxyUrl: trimmed || null,
+              });
+              setProxySaved(true);
+              setTimeout(() => setProxySaved(false), 2000);
+            }
+          }}
+          placeholder={t('cloud.card.proxyPlaceholder') || 'e.g. http://127.0.0.1:7890'}
+          className="h-8 w-48 text-sm"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.currentTarget.blur();
+            }
+          }}
+        />
+        <div className="w-16">
+          {proxySaved && (
+            <span className="text-[10px] whitespace-nowrap text-green-500">
+              {t('cloud.card.proxySaved')}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function AccountProxySettings() {
+  const { t } = useTranslation();
+  const { data: accounts, isLoading } = useCloudAccounts();
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('settings.proxy.accountProxies.title')}</CardTitle>
+          <CardDescription>{t('settings.proxy.accountProxies.description')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex justify-center p-6">
+          <Loader2 className="text-muted-foreground animate-spin" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!accounts || accounts.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('settings.proxy.accountProxies.title')}</CardTitle>
+        <CardDescription>{t('settings.proxy.accountProxies.description')}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col">
+        {accounts.map((account) => (
+          <AccountProxyItem key={account.id} account={account} />
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

src/components/IdentityProfileDialog.tsx

@@ -1,432 +1,431 @@
-import { type JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Fingerprint,
-  FolderOpen,
-  RotateCcw,
-  Wand2,
-  Trash2,
-  History,
-  ShieldCheck,
-  Cpu,
-} from 'lucide-react';
-import type { CloudAccount } from '@/types/cloudAccount';
-import type { DeviceProfile, DeviceProfilesSnapshot, DeviceProfileVersion } from '@/types/account';
-import {
-  bindCloudIdentityProfile,
-  bindCloudIdentityProfileWithPayload,
-  deleteCloudIdentityProfileRevision,
-  getCloudIdentityProfiles,
-  openCloudIdentityStorageFolder,
-  previewGenerateCloudIdentityProfile,
-  restoreCloudIdentityProfileRevision,
-  restoreCloudBaselineProfile,
-} from '@/actions/cloud';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { useToast } from '@/components/ui/use-toast';
-
-interface IdentityProfileDialogProps {
-  account: CloudAccount | null;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-function formatError(error: unknown): string {
-  if (error instanceof Error && error.message) {
-    return error.message;
-  }
-  return String(error);
-}
-
-function renderProfile(
-  profile: DeviceProfile | undefined,
-  t: ReturnType<typeof useTranslation>['t'],
-): JSX.Element {
-  if (!profile) {
-    return (
-      <div className="text-muted-foreground rounded-lg border border-dashed px-3 py-4 text-xs">
-        {t('common.notAvailable')}
-      </div>
-    );
-  }
-
-  const rows: Array<{ label: string; value: string }> = [
-    { label: 'machineId', value: profile.machineId },
-    { label: 'macMachineId', value: profile.macMachineId },
-    { label: 'devDeviceId', value: profile.devDeviceId },
-    { label: 'sqmId', value: profile.sqmId },
-  ];
-
-  return (
-    <div className="space-y-2">
-      {rows.map((row) => (
-        <div key={row.label} className="flex items-start justify-between gap-3">
-          <span className="text-muted-foreground text-[11px] tracking-wide uppercase">
-            {row.label}
-          </span>
-          <span className="max-w-[70%] text-right font-mono text-xs break-all">{row.value}</span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function sortHistory(history: DeviceProfileVersion[]): DeviceProfileVersion[] {
-  return [...history].sort((a, b) => b.createdAt - a.createdAt);
-}
-
-export function IdentityProfileDialog({ account, open, onOpenChange }: IdentityProfileDialogProps) {
-  const { t } = useTranslation();
-  const { toast } = useToast();
-  const [snapshot, setSnapshot] = useState<DeviceProfilesSnapshot | null>(null);
-  const [initialLoading, setInitialLoading] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
-  const [actionKey, setActionKey] = useState<string | null>(null);
-  const [previewProfile, setPreviewProfile] = useState<DeviceProfile | null>(null);
-  const actionLockRef = useRef(false);
-
-  const history = useMemo(() => sortHistory(snapshot?.history || []), [snapshot?.history]);
-  const showLoadingPlaceholder = initialLoading && !snapshot;
-
-  const refreshProfiles = useCallback(
-    async (options?: { silent?: boolean }) => {
-      if (!account) {
-        setSnapshot(null);
-        return;
-      }
-      const silent = options?.silent === true;
-      if (silent) {
-        setRefreshing(true);
-      } else {
-        setInitialLoading(true);
-      }
-      try {
-        const result = await getCloudIdentityProfiles({ accountId: account.id });
-        setSnapshot(result);
-      } catch (error) {
-        toast({
-          title: t('cloud.toast.actionFailed'),
-          description: formatError(error),
-          variant: 'destructive',
-        });
-      } finally {
-        if (silent) {
-          setRefreshing(false);
-        } else {
-          setInitialLoading(false);
-        }
-      }
-    },
-    [account, t, toast],
-  );
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    void refreshProfiles();
-  }, [open, refreshProfiles]);
-
-  const runAction = async (key: string, action: () => Promise<void>) => {
-    if (actionLockRef.current) {
-      return;
-    }
-    actionLockRef.current = true;
-    setActionKey(key);
-    try {
-      await action();
-      await refreshProfiles({ silent: true });
-    } catch (error) {
-      toast({
-        title: t('cloud.toast.actionFailed'),
-        description: formatError(error),
-        variant: 'destructive',
-      });
-    } finally {
-      actionLockRef.current = false;
-      setActionKey(null);
-    }
-  };
-
-  if (!account) {
-    return null;
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="flex max-h-[90vh] max-w-6xl flex-col overflow-hidden p-0">
-        <DialogHeader className="from-primary/10 via-background to-background border-b bg-gradient-to-r p-6">
-          <div className="flex items-start justify-between gap-4">
-            <div className="flex min-w-0 items-center gap-3">
-              <div className="bg-primary/15 text-primary rounded-xl border p-2.5">
-                <Fingerprint className="h-5 w-5" />
-              </div>
-              <div className="min-w-0">
-                <DialogTitle className="truncate">{t('cloud.identity.title')}</DialogTitle>
-                <DialogDescription className="truncate">{account.email}</DialogDescription>
-              </div>
-            </div>
-            <Badge variant="secondary" className="shrink-0">
-              <History className="mr-1.5 h-3.5 w-3.5" />
-              {history.length}
-            </Badge>
-          </div>
-        </DialogHeader>
-
-        <div className="flex-1 space-y-6 overflow-y-auto p-6" aria-busy={refreshing}>
-          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-            <Button
-              variant="outline"
-              disabled={actionKey === 'preview-generate'}
-              className="h-auto cursor-pointer justify-start rounded-xl px-4 py-3"
-              onClick={() => {
-                runAction('preview-generate', async () => {
-                  const profile = await previewGenerateCloudIdentityProfile();
-                  setPreviewProfile(profile);
-                });
-              }}
-            >
-              <Wand2 className="mr-2 h-4 w-4" />
-              {t('cloud.identity.generateAndBind')}
-            </Button>
-
-            <Button
-              variant="outline"
-              disabled={actionKey === 'capture-bind'}
-              className="h-auto cursor-pointer justify-start rounded-xl px-4 py-3"
-              onClick={() => {
-                runAction('capture-bind', async () => {
-                  await bindCloudIdentityProfile({ accountId: account.id, mode: 'capture' });
-                  setPreviewProfile(null);
-                  toast({ title: t('cloud.identity.captureSuccess') });
-                });
-              }}
-            >
-              <Fingerprint className="mr-2 h-4 w-4" />
-              {t('cloud.identity.captureAndBind')}
-            </Button>
-
-            <Button
-              variant="outline"
-              disabled={actionKey === 'restore-original'}
-              className="h-auto cursor-pointer justify-start rounded-xl px-4 py-3"
-              onClick={() => {
-                runAction('restore-original', async () => {
-                  await restoreCloudBaselineProfile({ accountId: account.id });
-                  toast({ title: t('cloud.identity.restoreOriginalSuccess') });
-                });
-              }}
-            >
-              <RotateCcw className="mr-2 h-4 w-4" />
-              {t('cloud.identity.restoreOriginal')}
-            </Button>
-
-            <Button
-              variant="outline"
-              disabled={actionKey === 'open-folder'}
-              className="h-auto cursor-pointer justify-start rounded-xl px-4 py-3"
-              onClick={() => {
-                runAction('open-folder', async () => {
-                  await openCloudIdentityStorageFolder();
-                  toast({ title: t('cloud.identity.openFolderSuccess') });
-                });
-              }}
-            >
-              <FolderOpen className="mr-2 h-4 w-4" />
-              {t('cloud.identity.openFolder')}
-            </Button>
-          </div>
-
-          {previewProfile ? (
-            <Card className="border-primary/20 shadow-sm">
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm">{t('cloud.identity.previewTitle')}</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                {renderProfile(previewProfile, t)}
-                <div className="flex flex-wrap gap-2">
-                  <Button
-                    size="sm"
-                    disabled={actionKey === 'confirm-generate'}
-                    className="cursor-pointer"
-                    onClick={() => {
-                      runAction('confirm-generate', async () => {
-                        await bindCloudIdentityProfileWithPayload({
-                          accountId: account.id,
-                          profile: previewProfile,
-                        });
-                        setPreviewProfile(null);
-                        toast({ title: t('cloud.identity.generateSuccess') });
-                      });
-                    }}
-                  >
-                    {t('cloud.identity.confirm')}
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    className="cursor-pointer"
-                    onClick={() => setPreviewProfile(null)}
-                  >
-                    {t('cloud.identity.cancel')}
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          ) : null}
-
-          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
-            <div className="space-y-4">
-              <div className="grid gap-4 md:grid-cols-2">
-                <Card className="shadow-sm">
-                  <CardHeader className="pb-3">
-                    <CardTitle className="flex items-center gap-2 text-sm">
-                      <Cpu className="text-muted-foreground h-4 w-4" />
-                      {t('cloud.identity.currentStorage')}
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    {showLoadingPlaceholder ? (
-                      <div className="text-muted-foreground text-xs">
-                        {t('cloud.identity.loading')}
-                      </div>
-                    ) : (
-                      renderProfile(snapshot?.currentStorage, t)
-                    )}
-                  </CardContent>
-                </Card>
-
-                <Card className="shadow-sm">
-                  <CardHeader className="pb-3">
-                    <CardTitle className="flex items-center gap-2 text-sm">
-                      <ShieldCheck className="text-muted-foreground h-4 w-4" />
-                      {t('cloud.identity.accountBinding')}
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent>
-                    {showLoadingPlaceholder ? (
-                      <div className="text-muted-foreground text-xs">
-                        {t('cloud.identity.loading')}
-                      </div>
-                    ) : (
-                      renderProfile(snapshot?.boundProfile, t)
-                    )}
-                  </CardContent>
-                </Card>
-              </div>
-
-              <Card className="shadow-sm">
-                <CardHeader className="pb-3">
-                  <CardTitle className="text-sm">{t('cloud.identity.history')}</CardTitle>
-                </CardHeader>
-                <CardContent className="max-h-[38vh] space-y-3 overflow-y-auto pr-1">
-                  {showLoadingPlaceholder ? (
-                    <div className="text-muted-foreground text-xs">
-                      {t('cloud.identity.loading')}
-                    </div>
-                  ) : null}
-
-                  {!showLoadingPlaceholder && history.length === 0 ? (
-                    <div className="text-muted-foreground text-xs">
-                      {t('cloud.identity.noHistory')}
-                    </div>
-                  ) : null}
-
-                  {!showLoadingPlaceholder
-                    ? history.map((version) => (
-                        <div key={version.id} className="bg-muted/20 rounded-xl border p-3">
-                          <div className="mb-2 flex items-center justify-between gap-3">
-                            <div className="min-w-0">
-                              <div className="truncate text-sm font-medium">{version.label}</div>
-                              <div className="text-muted-foreground text-xs">
-                                {new Date(version.createdAt * 1000).toLocaleString()}
-                              </div>
-                            </div>
-                            {version.isCurrent ? (
-                              <Badge variant="secondary" className="shrink-0">
-                                {t('cloud.identity.current')}
-                              </Badge>
-                            ) : null}
-                          </div>
-
-                          {renderProfile(version.profile, t)}
-
-                          <div className="mt-3 flex flex-wrap gap-2">
-                            <Button
-                              size="sm"
-                              variant="outline"
-                              disabled={version.isCurrent || actionKey === `restore-${version.id}`}
-                              className="cursor-pointer"
-                              onClick={() => {
-                                runAction(`restore-${version.id}`, async () => {
-                                  await restoreCloudIdentityProfileRevision({
-                                    accountId: account.id,
-                                    versionId: version.id,
-                                  });
-                                  toast({ title: t('cloud.identity.restoreVersionSuccess') });
-                                });
-                              }}
-                            >
-                              {t('cloud.identity.restore')}
-                            </Button>
-                            {!version.isCurrent ? (
-                              <Button
-                                size="sm"
-                                variant="outline"
-                                disabled={actionKey === `delete-${version.id}`}
-                                className="cursor-pointer"
-                                onClick={() => {
-                                  runAction(`delete-${version.id}`, async () => {
-                                    await deleteCloudIdentityProfileRevision({
-                                      accountId: account.id,
-                                      versionId: version.id,
-                                    });
-                                    toast({ title: t('cloud.identity.deleteVersionSuccess') });
-                                  });
-                                }}
-                              >
-                                <Trash2 className="h-4 w-4" />
-                              </Button>
-                            ) : null}
-                          </div>
-                        </div>
-                      ))
-                    : null}
-                </CardContent>
-              </Card>
-            </div>
-
-            <Card className="shadow-sm">
-              <CardHeader className="pb-3">
-                <CardTitle className="text-sm">{t('cloud.identity.baseline')}</CardTitle>
-              </CardHeader>
-              <CardContent>
-                {showLoadingPlaceholder ? (
-                  <div className="text-muted-foreground text-xs">{t('cloud.identity.loading')}</div>
-                ) : (
-                  renderProfile(snapshot?.baseline, t)
-                )}
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-
-        <DialogFooter className="border-t px-6 py-4">
-          <Button variant="ghost" className="cursor-pointer" onClick={() => onOpenChange(false)}>
-            {t('cloud.identity.close')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
+import { type JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Fingerprint,
+  FolderOpen,
+  RotateCcw,
+  Wand2,
+  Trash2,
+  History,
+  ShieldCheck,
+  Cpu,
+} from 'lucide-react';
+import type { CloudAccount } from '@/types/cloudAccount';
+import type { DeviceProfile, DeviceProfilesSnapshot, DeviceProfileVersion } from '@/types/account';
+import {
+  bindCloudIdentityProfile,
+  bindCloudIdentityProfileWithPayload,
+  deleteCloudIdentityProfileRevision,
+  getCloudIdentityProfiles,
+  openCloudIdentityStorageFolder,
+  previewGenerateCloudIdentityProfile,
+  restoreCloudIdentityProfileRevision,
+  restoreCloudBaselineProfile,
+} from '@/actions/cloud';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { useToast } from '@/components/ui/use-toast';
+
+interface IdentityProfileDialogProps {
+  account: CloudAccount | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function formatError(error: unknown): string {
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+  return String(error);
+}
+
+function renderProfile(
+  profile: DeviceProfile | undefined,
+  t: ReturnType<typeof useTranslation>['t'],
+): JSX.Element {
+  if (!profile) {
+    return (
+      <div className="text-muted-foreground rounded-lg border border-dashed px-3 py-4 text-xs">
+        {t('common.notAvailable')}
+      </div>
+    );
+  }
+
+  const rows: Array<{ label: string; value: string }> = [
+    { label: 'machineId', value: profile.machineId },
+    { label: 'macMachineId', value: profile.macMachineId },
+    { label: 'devDeviceId', value: profile.devDeviceId },
+    { label: 'sqmId', value: profile.sqmId },
+  ];
+
+  return (
+    <div className="space-y-2">
+      {rows.map((row) => (
+        <div key={row.label} className="flex items-start justify-between gap-3">
+          <span className="text-muted-foreground text-[11px] tracking-wide uppercase">
+            {row.label}
+          </span>
+          <span className="max-w-[70%] text-right font-mono text-xs break-all">{row.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function sortHistory(history: DeviceProfileVersion[]): DeviceProfileVersion[] {
+  return [...history].sort((a, b) => b.createdAt - a.createdAt);
+}
+
+export function IdentityProfileDialog({ account, open, onOpenChange }: IdentityProfileDialogProps) {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+  const [snapshot, setSnapshot] = useState<DeviceProfilesSnapshot | null>(null);
+  const [initialLoading, setInitialLoading] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const [actionKey, setActionKey] = useState<string | null>(null);
+  const [previewProfile, setPreviewProfile] = useState<DeviceProfile | null>(null);
+  const actionLockRef = useRef(false);
+
+  const history = useMemo(() => sortHistory(snapshot?.history || []), [snapshot?.history]);
+  const showLoadingPlaceholder = initialLoading && !snapshot;
+
+  const refreshProfiles = useCallback(
+    async (options?: { silent?: boolean }) => {
+      if (!account) {
+        setSnapshot(null);
+        return;
+      }
+      const silent = options?.silent === true;
+      if (silent) {
+        setRefreshing(true);
+      } else {
+        setInitialLoading(true);
+      }
+      try {
+        const result = await getCloudIdentityProfiles({ accountId: account.id });
+        setSnapshot(result);
+      } catch (error) {
+        toast({
+          title: t('cloud.toast.actionFailed'),
+          description: formatError(error),
+          variant: 'destructive',
+        });
+      } finally {
+        if (silent) {
+          setRefreshing(false);
+        } else {
+          setInitialLoading(false);
+        }
+      }
+    },
+    [account, t, toast],
+  );
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setTimeout(() => { void refreshProfiles(); }, 0); }, [open, refreshProfiles]);
+
+  const runAction = async (key: string, action: () => Promise<void>) => {
+    if (actionLockRef.current) {
+      return;
+    }
+    actionLockRef.current = true;
+    setActionKey(key);
+    try {
+      await action();
+      await refreshProfiles({ silent: true });
+    } catch (error) {
+      toast({
+        title: t('cloud.toast.actionFailed'),
+        description: formatError(error),
+        variant: 'destructive',
+      });
+    } finally {
+      actionLockRef.current = false;
+      setActionKey(null);
+    }
+  };
+
+  if (!account) {
+    return null;
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[90vh] max-w-6xl flex-col overflow-hidden p-0">
+        <DialogHeader className="from-primary/10 via-background to-background border-b bg-gradient-to-r p-6">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex min-w-0 items-center gap-3">
+              <div className="bg-primary/15 text-primary rounded-xl border p-2.5">
+                <Fingerprint className="h-5 w-5" />
+              </div>
+              <div className="min-w-0">
+                <DialogTitle className="truncate">{t('cloud.identity.title')}</DialogTitle>
+                <DialogDescription className="truncate">{account.email}</DialogDescription>
+              </div>
+            </div>
+            <Badge variant="secondary" className="shrink-0">
+              <History className="mr-1.5 h-3.5 w-3.5" />
+              {history.length}
+            </Badge>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 space-y-6 overflow-y-auto p-6" aria-busy={refreshing}>
+          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+            <Button
+              variant="outline"
+              disabled={actionKey === 'preview-generate'}
+              className="h-auto cursor-pointer justify-start rounded-xl px-4 py-3"
+              onClick={() => {
+                runAction('preview-generate', async () => {
+                  const profile = await previewGenerateCloudIdentityProfile();
+                  setPreviewProfile(profile);
+                });
+              }}
+            >
+              <Wand2 className="mr-2 h-4 w-4" />
+              {t('cloud.identity.generateAndBind')}
+            </Button>
+
+            <Button
+              variant="outline"
+              disabled={actionKey === 'capture-bind'}
+              className="h-auto cursor-pointer justify-start rounded-xl px-4 py-3"
+              onClick={() => {
+                runAction('capture-bind', async () => {
+                  await bindCloudIdentityProfile({ accountId: account.id, mode: 'capture' });
+                  setPreviewProfile(null);
+                  toast({ title: t('cloud.identity.captureSuccess') });
+                });
+              }}
+            >
+              <Fingerprint className="mr-2 h-4 w-4" />
+              {t('cloud.identity.captureAndBind')}
+            </Button>
+
+            <Button
+              variant="outline"
+              disabled={actionKey === 'restore-original'}
+              className="h-auto cursor-pointer justify-start rounded-xl px-4 py-3"
+              onClick={() => {
+                runAction('restore-original', async () => {
+                  await restoreCloudBaselineProfile({ accountId: account.id });
+                  toast({ title: t('cloud.identity.restoreOriginalSuccess') });
+                });
+              }}
+            >
+              <RotateCcw className="mr-2 h-4 w-4" />
+              {t('cloud.identity.restoreOriginal')}
+            </Button>
+
+            <Button
+              variant="outline"
+              disabled={actionKey === 'open-folder'}
+              className="h-auto cursor-pointer justify-start rounded-xl px-4 py-3"
+              onClick={() => {
+                runAction('open-folder', async () => {
+                  await openCloudIdentityStorageFolder();
+                  toast({ title: t('cloud.identity.openFolderSuccess') });
+                });
+              }}
+            >
+              <FolderOpen className="mr-2 h-4 w-4" />
+              {t('cloud.identity.openFolder')}
+            </Button>
+          </div>
+
+          {previewProfile ? (
+            <Card className="border-primary/20 shadow-sm">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm">{t('cloud.identity.previewTitle')}</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {renderProfile(previewProfile, t)}
+                <div className="flex flex-wrap gap-2">
+                  <Button
+                    size="sm"
+                    disabled={actionKey === 'confirm-generate'}
+                    className="cursor-pointer"
+                    onClick={() => {
+                      runAction('confirm-generate', async () => {
+                        await bindCloudIdentityProfileWithPayload({
+                          accountId: account.id,
+                          profile: previewProfile,
+                        });
+                        setPreviewProfile(null);
+                        toast({ title: t('cloud.identity.generateSuccess') });
+                      });
+                    }}
+                  >
+                    {t('cloud.identity.confirm')}
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    className="cursor-pointer"
+                    onClick={() => setPreviewProfile(null)}
+                  >
+                    {t('cloud.identity.cancel')}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ) : null}
+
+          <div className="grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
+            <div className="space-y-4">
+              <div className="grid gap-4 md:grid-cols-2">
+                <Card className="shadow-sm">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="flex items-center gap-2 text-sm">
+                      <Cpu className="text-muted-foreground h-4 w-4" />
+                      {t('cloud.identity.currentStorage')}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    {showLoadingPlaceholder ? (
+                      <div className="text-muted-foreground text-xs">
+                        {t('cloud.identity.loading')}
+                      </div>
+                    ) : (
+                      renderProfile(snapshot?.currentStorage, t)
+                    )}
+                  </CardContent>
+                </Card>
+
+                <Card className="shadow-sm">
+                  <CardHeader className="pb-3">
+                    <CardTitle className="flex items-center gap-2 text-sm">
+                      <ShieldCheck className="text-muted-foreground h-4 w-4" />
+                      {t('cloud.identity.accountBinding')}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    {showLoadingPlaceholder ? (
+                      <div className="text-muted-foreground text-xs">
+                        {t('cloud.identity.loading')}
+                      </div>
+                    ) : (
+                      renderProfile(snapshot?.boundProfile, t)
+                    )}
+                  </CardContent>
+                </Card>
+              </div>
+
+              <Card className="shadow-sm">
+                <CardHeader className="pb-3">
+                  <CardTitle className="text-sm">{t('cloud.identity.history')}</CardTitle>
+                </CardHeader>
+                <CardContent className="max-h-[38vh] space-y-3 overflow-y-auto pr-1">
+                  {showLoadingPlaceholder ? (
+                    <div className="text-muted-foreground text-xs">
+                      {t('cloud.identity.loading')}
+                    </div>
+                  ) : null}
+
+                  {!showLoadingPlaceholder && history.length === 0 ? (
+                    <div className="text-muted-foreground text-xs">
+                      {t('cloud.identity.noHistory')}
+                    </div>
+                  ) : null}
+
+                  {!showLoadingPlaceholder
+                    ? history.map((version) => (
+                        <div key={version.id} className="bg-muted/20 rounded-xl border p-3">
+                          <div className="mb-2 flex items-center justify-between gap-3">
+                            <div className="min-w-0">
+                              <div className="truncate text-sm font-medium">{version.label}</div>
+                              <div className="text-muted-foreground text-xs">
+                                {new Date(version.createdAt * 1000).toLocaleString()}
+                              </div>
+                            </div>
+                            {version.isCurrent ? (
+                              <Badge variant="secondary" className="shrink-0">
+                                {t('cloud.identity.current')}
+                              </Badge>
+                            ) : null}
+                          </div>
+
+                          {renderProfile(version.profile, t)}
+
+                          <div className="mt-3 flex flex-wrap gap-2">
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              disabled={version.isCurrent || actionKey === `restore-${version.id}`}
+                              className="cursor-pointer"
+                              onClick={() => {
+                                runAction(`restore-${version.id}`, async () => {
+                                  await restoreCloudIdentityProfileRevision({
+                                    accountId: account.id,
+                                    versionId: version.id,
+                                  });
+                                  toast({ title: t('cloud.identity.restoreVersionSuccess') });
+                                });
+                              }}
+                            >
+                              {t('cloud.identity.restore')}
+                            </Button>
+                            {!version.isCurrent ? (
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                disabled={actionKey === `delete-${version.id}`}
+                                className="cursor-pointer"
+                                onClick={() => {
+                                  runAction(`delete-${version.id}`, async () => {
+                                    await deleteCloudIdentityProfileRevision({
+                                      accountId: account.id,
+                                      versionId: version.id,
+                                    });
+                                    toast({ title: t('cloud.identity.deleteVersionSuccess') });
+                                  });
+                                }}
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            ) : null}
+                          </div>
+                        </div>
+                      ))
+                    : null}
+                </CardContent>
+              </Card>
+            </div>
+
+            <Card className="shadow-sm">
+              <CardHeader className="pb-3">
+                <CardTitle className="text-sm">{t('cloud.identity.baseline')}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {showLoadingPlaceholder ? (
+                  <div className="text-muted-foreground text-xs">{t('cloud.identity.loading')}</div>
+                ) : (
+                  renderProfile(snapshot?.baseline, t)
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+
+        <DialogFooter className="border-t px-6 py-4">
+          <Button variant="ghost" className="cursor-pointer" onClick={() => onOpenChange(false)}>
+            {t('cloud.identity.close')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/ModelVisibilitySettings.tsx

@@ -1,275 +1,271 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAppConfig } from '@/hooks/useAppConfig';
-import { useCloudAccounts } from '@/hooks/useCloudAccounts';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Badge } from '@/components/ui/badge';
-import { Switch } from '@/components/ui/switch';
-import { Label } from '@/components/ui/label';
-import { Loader2, Search, RotateCcw, Save, Copy, CheckCircle } from 'lucide-react';
-import { filter, flatMap, includes, size, sortBy, sumBy, uniq, values } from 'lodash-es';
-import type { CloudAccount } from '@/types/cloudAccount';
-
-function collectAvailableModelIds(accounts: CloudAccount[] | undefined): string[] {
-  if (!accounts) {
-    return [];
-  }
-
-  const modelNames = flatMap(accounts, (account) => {
-    if (!account.quota?.models) {
-      return [];
-    }
-
-    return Object.keys(account.quota.models);
-  });
-
-  return sortBy(uniq(modelNames));
-}
-
-function filterModelIdsByQuery(modelIds: string[], query: string): string[] {
-  const normalizedSearchQuery = query.toLowerCase();
-
-  return filter(modelIds, (modelId) => includes(modelId.toLowerCase(), normalizedSearchQuery));
-}
-
-export function ModelVisibilitySettings() {
-  const { t } = useTranslation();
-  const { config, saveConfig } = useAppConfig();
-  const { data: accounts, isLoading: accountsLoading } = useCloudAccounts();
-
-  const [searchQuery, setSearchQuery] = useState('');
-  const [modelVisibilityMap, setModelVisibilityMap] = useState<Record<string, boolean>>({});
-  const [providerGroupingEnabled, setProviderGroupingEnabled] = useState(false);
-  const [isSavingSettings, setIsSavingSettings] = useState(false);
-  const [copiedModel, setCopiedModel] = useState<string | null>(null);
-
-  // Initialize model visibility and provider groupings from config
-  useEffect(() => {
-    if (config?.model_visibility) {
-      setModelVisibilityMap(config.model_visibility);
-    }
-    if (config?.provider_groupings_enabled !== undefined) {
-      setProviderGroupingEnabled(config.provider_groupings_enabled);
-    }
-  }, [config?.model_visibility, config?.provider_groupings_enabled]);
-
-  // Get all unique models from all accounts
-  const availableModelIds = useMemo(() => {
-    return collectAvailableModelIds(accounts);
-  }, [accounts]);
-
-  // Filter models based on search term
-  const filteredModelIds = useMemo(() => {
-    return filterModelIdsByQuery(availableModelIds, searchQuery);
-  }, [availableModelIds, searchQuery]);
-
-  const hiddenModelCount = useMemo(() => {
-    return sumBy(values(modelVisibilityMap), (isVisible) => (isVisible === false ? 1 : 0));
-  }, [modelVisibilityMap]);
-
-  const isModelVisible = (modelId: string): boolean => {
-    return modelVisibilityMap[modelId] !== false;
-  };
-
-  // Reset to defaults (all models visible)
-  const resetVisibilityOverrides = () => {
-    setModelVisibilityMap({});
-  };
-
-  // Save configuration
-  const saveVisibilitySettings = async () => {
-    if (!config) {
-      return;
-    }
-
-    setIsSavingSettings(true);
-    try {
-      const nextConfig = {
-        ...config,
-        model_visibility: modelVisibilityMap,
-        provider_groupings_enabled: providerGroupingEnabled,
-      };
-      await saveConfig(nextConfig);
-    } catch (error) {
-      console.error('Failed to save model visibility settings:', error);
-    } finally {
-      setIsSavingSettings(false);
-    }
-  };
-
-  const handleSearchQueryChange = (nextQuery: string) => {
-    setSearchQuery(nextQuery);
-  };
-
-  const handleProviderGroupingToggle = (checked: boolean) => {
-    setProviderGroupingEnabled(checked);
-  };
-
-  const handleModelVisibilityChange = (modelId: string, checked: boolean) => {
-    setModelVisibilityMap((prev) => ({
-      ...prev,
-      [modelId]: checked,
-    }));
-  };
-
-  const copyModelId = (modelId: string, e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    navigator.clipboard.writeText(modelId);
-    setCopiedModel(modelId);
-    setTimeout(() => setCopiedModel(null), 2000);
-  };
-
-  if (accountsLoading) {
-    return (
-      <Card>
-        <CardContent className="flex items-center justify-center p-6">
-          <Loader2 className="h-6 w-6 animate-spin" />
-          <span className="ml-2">{t('common.loading')}</span>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <span>{t('settings.modelVisibility.title')}</span>
-          <Badge variant="secondary">
-            {t('settings.providerGroupings.models', { count: filteredModelIds.length })}
-          </Badge>
-        </CardTitle>
-        <CardDescription>{t('settings.modelVisibility.description')}</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Search */}
-        <div className="relative">
-          <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
-          <Input
-            placeholder={t('settings.modelVisibility.searchPlaceholder')}
-            value={searchQuery}
-            onChange={(event) => handleSearchQueryChange(event.target.value)}
-            className="pl-10"
-          />
-        </div>
-
-        {/* Provider Groupings Toggle */}
-        <div className="flex items-center justify-between rounded-lg border p-3">
-          <div className="space-y-0.5">
-            <Label htmlFor="provider-groupings" className="text-sm font-medium">
-              {t('settings.providerGroupings.enabled')}
-            </Label>
-            <p className="text-muted-foreground text-xs">
-              {t('settings.providerGroupings.description')}
-            </p>
-          </div>
-          <Switch
-            id="provider-groupings"
-            checked={providerGroupingEnabled}
-            onCheckedChange={handleProviderGroupingToggle}
-          />
-        </div>
-
-        {/* Model List */}
-        <div className="max-h-96 space-y-2 overflow-y-auto rounded-lg border p-4">
-          {filteredModelIds.length === 0 ? (
-            <div className="text-muted-foreground py-8 text-center">
-              {searchQuery
-                ? t('settings.modelVisibility.noModelsFound')
-                : t('settings.modelVisibility.noModels')}
-            </div>
-          ) : (
-            filteredModelIds.map((modelId) => {
-              const isVisible = isModelVisible(modelId);
-              return (
-                <div
-                  key={modelId}
-                  className="hover:bg-muted/50 flex items-center space-x-3 rounded p-2"
-                >
-                  <Checkbox
-                    id={`model-${modelId}`}
-                    checked={isVisible}
-                    onCheckedChange={(checked) =>
-                      handleModelVisibilityChange(modelId, checked as boolean)
-                    }
-                  />
-                  <div className="flex flex-1 items-center gap-2">
-                    <label
-                      htmlFor={`model-${modelId}`}
-                      className="cursor-pointer text-sm font-medium"
-                    >
-                      {modelId}
-                    </label>
-                    <button
-                      onClick={(e) => copyModelId(modelId, e)}
-                      className="text-muted-foreground hover:text-foreground transition-colors"
-                      title={t('proxy.copy')}
-                    >
-                      {copiedModel === modelId ? (
-                        <CheckCircle className="h-4 w-4 text-green-500" />
-                      ) : (
-                        <Copy className="h-4 w-4" />
-                      )}
-                    </button>
-                  </div>
-                  {!isVisible && (
-                    <Badge variant="secondary" className="text-xs">
-                      {t('settings.modelVisibility.hidden')}
-                    </Badge>
-                  )}
-                </div>
-              );
-            })
-          )}
-        </div>
-
-        {/* Action Buttons */}
-        <div className="flex gap-2 pt-4">
-          <Button
-            variant="outline"
-            onClick={resetVisibilityOverrides}
-            disabled={size(modelVisibilityMap) === 0}
-            className="flex items-center gap-2"
-          >
-            <RotateCcw className="h-4 w-4" />
-            {t('settings.modelVisibility.reset')}
-          </Button>
-          <Button
-            onClick={saveVisibilitySettings}
-            disabled={isSavingSettings}
-            className="flex items-center gap-2"
-          >
-            {isSavingSettings ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <Save className="h-4 w-4" />
-            )}
-            {isSavingSettings
-              ? t('settings.modelVisibility.saving')
-              : t('settings.modelVisibility.save')}
-          </Button>
-        </div>
-
-        {/* Statistics */}
-        <div className="text-muted-foreground border-t pt-2 text-sm">
-          <div className="flex justify-between">
-            <span>
-              {t('settings.modelVisibility.totalModels')}: {availableModelIds.length}
-            </span>
-            <span>
-              {t('settings.modelVisibility.visibleModels')}:{' '}
-              {availableModelIds.length - hiddenModelCount}
-            </span>
-            <span>
-              {t('settings.modelVisibility.hiddenModels')}: {hiddenModelCount}
-            </span>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useAppConfig } from '@/hooks/useAppConfig';
+import { useCloudAccounts } from '@/hooks/useCloudAccounts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Loader2, Search, RotateCcw, Save, Copy, CheckCircle } from 'lucide-react';
+import { filter, flatMap, includes, size, sortBy, sumBy, uniq, values } from 'lodash-es';
+import type { CloudAccount } from '@/types/cloudAccount';
+
+function collectAvailableModelIds(accounts: CloudAccount[] | undefined): string[] {
+  if (!accounts) {
+    return [];
+  }
+
+  const modelNames = flatMap(accounts, (account) => {
+    if (!account.quota?.models) {
+      return [];
+    }
+
+    return Object.keys(account.quota.models);
+  });
+
+  return sortBy(uniq(modelNames));
+}
+
+function filterModelIdsByQuery(modelIds: string[], query: string): string[] {
+  const normalizedSearchQuery = query.toLowerCase();
+
+  return filter(modelIds, (modelId) => includes(modelId.toLowerCase(), normalizedSearchQuery));
+}
+
+export function ModelVisibilitySettings() {
+  const { t } = useTranslation();
+  const { config, saveConfig } = useAppConfig();
+  const { data: accounts, isLoading: accountsLoading } = useCloudAccounts();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [modelVisibilityMap, setModelVisibilityMap] = useState<Record<string, boolean>>({});
+  const [providerGroupingEnabled, setProviderGroupingEnabled] = useState(false);
+  const [isSavingSettings, setIsSavingSettings] = useState(false);
+  const [copiedModel, setCopiedModel] = useState<string | null>(null);
+
+  // Initialize model visibility and provider groupings from config
+  useEffect(() => {
+    if (config?.model_visibility) { setTimeout(() => setModelVisibilityMap(config.model_visibility), 0); }
+    if (config?.provider_groupings_enabled !== undefined) { setTimeout(() => setProviderGroupingEnabled(config.provider_groupings_enabled), 0); }
+  }, [config?.model_visibility, config?.provider_groupings_enabled]);
+
+  // Get all unique models from all accounts
+  const availableModelIds = useMemo(() => {
+    return collectAvailableModelIds(accounts);
+  }, [accounts]);
+
+  // Filter models based on search term
+  const filteredModelIds = useMemo(() => {
+    return filterModelIdsByQuery(availableModelIds, searchQuery);
+  }, [availableModelIds, searchQuery]);
+
+  const hiddenModelCount = useMemo(() => {
+    return sumBy(values(modelVisibilityMap), (isVisible) => (isVisible === false ? 1 : 0));
+  }, [modelVisibilityMap]);
+
+  const isModelVisible = (modelId: string): boolean => {
+    return modelVisibilityMap[modelId] !== false;
+  };
+
+  // Reset to defaults (all models visible)
+  const resetVisibilityOverrides = () => {
+    setModelVisibilityMap({});
+  };
+
+  // Save configuration
+  const saveVisibilitySettings = async () => {
+    if (!config) {
+      return;
+    }
+
+    setIsSavingSettings(true);
+    try {
+      const nextConfig = {
+        ...config,
+        model_visibility: modelVisibilityMap,
+        provider_groupings_enabled: providerGroupingEnabled,
+      };
+      await saveConfig(nextConfig);
+    } catch (error) {
+      console.error('Failed to save model visibility settings:', error);
+    } finally {
+      setIsSavingSettings(false);
+    }
+  };
+
+  const handleSearchQueryChange = (nextQuery: string) => {
+    setSearchQuery(nextQuery);
+  };
+
+  const handleProviderGroupingToggle = (checked: boolean) => {
+    setProviderGroupingEnabled(checked);
+  };
+
+  const handleModelVisibilityChange = (modelId: string, checked: boolean) => {
+    setModelVisibilityMap((prev) => ({
+      ...prev,
+      [modelId]: checked,
+    }));
+  };
+
+  const copyModelId = (modelId: string, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    navigator.clipboard.writeText(modelId);
+    setCopiedModel(modelId);
+    setTimeout(() => setCopiedModel(null), 2000);
+  };
+
+  if (accountsLoading) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center p-6">
+          <Loader2 className="h-6 w-6 animate-spin" />
+          <span className="ml-2">{t('common.loading')}</span>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <span>{t('settings.modelVisibility.title')}</span>
+          <Badge variant="secondary">
+            {t('settings.providerGroupings.models', { count: filteredModelIds.length })}
+          </Badge>
+        </CardTitle>
+        <CardDescription>{t('settings.modelVisibility.description')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Search */}
+        <div className="relative">
+          <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform" />
+          <Input
+            placeholder={t('settings.modelVisibility.searchPlaceholder')}
+            value={searchQuery}
+            onChange={(event) => handleSearchQueryChange(event.target.value)}
+            className="pl-10"
+          />
+        </div>
+
+        {/* Provider Groupings Toggle */}
+        <div className="flex items-center justify-between rounded-lg border p-3">
+          <div className="space-y-0.5">
+            <Label htmlFor="provider-groupings" className="text-sm font-medium">
+              {t('settings.providerGroupings.enabled')}
+            </Label>
+            <p className="text-muted-foreground text-xs">
+              {t('settings.providerGroupings.description')}
+            </p>
+          </div>
+          <Switch
+            id="provider-groupings"
+            checked={providerGroupingEnabled}
+            onCheckedChange={handleProviderGroupingToggle}
+          />
+        </div>
+
+        {/* Model List */}
+        <div className="max-h-96 space-y-2 overflow-y-auto rounded-lg border p-4">
+          {filteredModelIds.length === 0 ? (
+            <div className="text-muted-foreground py-8 text-center">
+              {searchQuery
+                ? t('settings.modelVisibility.noModelsFound')
+                : t('settings.modelVisibility.noModels')}
+            </div>
+          ) : (
+            filteredModelIds.map((modelId) => {
+              const isVisible = isModelVisible(modelId);
+              return (
+                <div
+                  key={modelId}
+                  className="hover:bg-muted/50 flex items-center space-x-3 rounded p-2"
+                >
+                  <Checkbox
+                    id={`model-${modelId}`}
+                    checked={isVisible}
+                    onCheckedChange={(checked) =>
+                      handleModelVisibilityChange(modelId, checked as boolean)
+                    }
+                  />
+                  <div className="flex flex-1 items-center gap-2">
+                    <label
+                      htmlFor={`model-${modelId}`}
+                      className="cursor-pointer text-sm font-medium"
+                    >
+                      {modelId}
+                    </label>
+                    <button
+                      onClick={(e) => copyModelId(modelId, e)}
+                      className="text-muted-foreground hover:text-foreground transition-colors"
+                      title={t('proxy.copy')}
+                    >
+                      {copiedModel === modelId ? (
+                        <CheckCircle className="h-4 w-4 text-green-500" />
+                      ) : (
+                        <Copy className="h-4 w-4" />
+                      )}
+                    </button>
+                  </div>
+                  {!isVisible && (
+                    <Badge variant="secondary" className="text-xs">
+                      {t('settings.modelVisibility.hidden')}
+                    </Badge>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </div>
+
+        {/* Action Buttons */}
+        <div className="flex gap-2 pt-4">
+          <Button
+            variant="outline"
+            onClick={resetVisibilityOverrides}
+            disabled={size(modelVisibilityMap) === 0}
+            className="flex items-center gap-2"
+          >
+            <RotateCcw className="h-4 w-4" />
+            {t('settings.modelVisibility.reset')}
+          </Button>
+          <Button
+            onClick={saveVisibilitySettings}
+            disabled={isSavingSettings}
+            className="flex items-center gap-2"
+          >
+            {isSavingSettings ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="h-4 w-4" />
+            )}
+            {isSavingSettings
+              ? t('settings.modelVisibility.saving')
+              : t('settings.modelVisibility.save')}
+          </Button>
+        </div>
+
+        {/* Statistics */}
+        <div className="text-muted-foreground border-t pt-2 text-sm">
+          <div className="flex justify-between">
+            <span>
+              {t('settings.modelVisibility.totalModels')}: {availableModelIds.length}
+            </span>
+            <span>
+              {t('settings.modelVisibility.visibleModels')}:{' '}
+              {availableModelIds.length - hiddenModelCount}
+            </span>
+            <span>
+              {t('settings.modelVisibility.hiddenModels')}: {hiddenModelCount}
+            </span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

src/components/ProviderGroup.tsx

@@ -1,142 +1,142 @@
-import React from 'react';
-
-import { useTranslation } from 'react-i18next';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-
-import type { ProviderStats } from '@/utils/provider-grouping';
-import { clampQuotaPercentage } from '@/utils/quota-display';
-
-interface ProviderGroupProps {
-  stats: ProviderStats;
-  isCollapsed: boolean;
-  onToggleCollapse: () => void;
-  getQuotaTextColorClass: (percentage: number) => string;
-  getQuotaBarColorClass: (percentage: number) => string;
-  formatQuotaLabel: (percentage: number) => string;
-  formatResetTimeLabel: (resetTime?: string) => string;
-  formatResetTimeTitle: (resetTime?: string) => string | undefined;
-  leftLabel: string;
-}
-
-export const ProviderGroup: React.FC<ProviderGroupProps> = ({
-  stats,
-  isCollapsed,
-  onToggleCollapse,
-  getQuotaTextColorClass,
-  getQuotaBarColorClass,
-  formatQuotaLabel,
-  formatResetTimeLabel,
-  formatResetTimeTitle,
-  leftLabel,
-}) => {
-  const { t } = useTranslation();
-  const { providerInfo, visibleModels, avgPercentage, earliestReset } = stats;
-
-  if (visibleModels.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="border-border/60 overflow-hidden rounded-lg border">
-      {/* Provider Header */}
-      <button
-        type="button"
-        onClick={onToggleCollapse}
-        className="hover:bg-muted/60 flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors"
-      >
-        {isCollapsed ? (
-          <ChevronRight className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
-        ) : (
-          <ChevronDown className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
-        )}
-
-        {/* Provider color dot */}
-        <span
-          className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
-          style={{ backgroundColor: providerInfo.color }}
-        />
-
-        <span className="font-medium">{providerInfo.name}</span>
-
-        <span className="text-muted-foreground text-xs">
-          {t('settings.providerGroupings.models', { count: visibleModels.length })}
-        </span>
-
-        {/* Spacer */}
-        <div className="flex-1" />
-
-        {/* Averaged metrics */}
-        <div className="flex items-center gap-2">
-          {earliestReset && (
-            <span
-              className="text-muted-foreground text-[10px]"
-              title={formatResetTimeTitle(earliestReset)}
-            >
-              {formatResetTimeLabel(earliestReset)}
-            </span>
-          )}
-          <div className="flex items-baseline gap-1">
-            <span
-              className={`font-mono text-xs font-bold ${getQuotaTextColorClass(avgPercentage)}`}
-            >
-              {formatQuotaLabel(avgPercentage)}
-            </span>
-            {Number.isFinite(avgPercentage) && avgPercentage > 0 && (
-              <span className="text-muted-foreground text-[10px]">
-                {t('settings.providerGroupings.avgLabel')}
-              </span>
-            )}
-          </div>
-          <div className="bg-muted h-1.5 w-16 overflow-hidden rounded-full">
-            <div
-              className={`h-full rounded-full transition-all duration-300 ${getQuotaBarColorClass(avgPercentage)}`}
-              style={{ width: `${clampQuotaPercentage(avgPercentage)}%` }}
-            />
-          </div>
-        </div>
-      </button>
-
-      {/* Individual model rows (shown when expanded) */}
-      {!isCollapsed && (
-        <div className="border-border/40 border-t">
-          {visibleModels.map((model, index) => (
-            <div
-              key={model.id}
-              className={`hover:bg-muted/60 grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 px-3 py-2 pl-9 text-sm transition-colors ${
-                index < visibleModels.length - 1 ? 'border-border/20 border-b' : ''
-              }`}
-            >
-              <span className="text-muted-foreground min-w-0 truncate" title={model.id}>
-                {model.id.replace('models/', '')}
-              </span>
-              <div className="flex flex-col items-end gap-1">
-                <span
-                  className="text-muted-foreground text-[10px] leading-none"
-                  title={formatResetTimeTitle(model.resetTime)}
-                >
-                  {formatResetTimeLabel(model.resetTime)}
-                </span>
-                <div className="flex items-baseline gap-1.5">
-                  <span
-                    className={`font-mono leading-none font-bold ${getQuotaTextColorClass(model.percentage)}`}
-                  >
-                    {formatQuotaLabel(model.percentage)}
-                  </span>
-                  {model.percentage > 0 && (
-                    <span className="text-muted-foreground text-[10px]">{leftLabel}</span>
-                  )}
-                </div>
-                <div className="bg-muted h-1.5 w-24 overflow-hidden rounded-full">
-                  <div
-                    className={`h-full rounded-full transition-all duration-300 ${getQuotaBarColorClass(model.percentage)}`}
-                    style={{ width: `${clampQuotaPercentage(model.percentage)}%` }}
-                  />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+import type { ProviderStats } from '@/utils/provider-grouping';
+import { clampQuotaPercentage } from '@/utils/quota-display';
+
+interface ProviderGroupProps {
+  stats: ProviderStats;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+  getQuotaTextColorClass: (percentage: number) => string;
+  getQuotaBarColorClass: (percentage: number) => string;
+  formatQuotaLabel: (percentage: number) => string;
+  formatResetTimeLabel: (resetTime?: string) => string;
+  formatResetTimeTitle: (resetTime?: string) => string | undefined;
+  leftLabel: string;
+}
+
+export const ProviderGroup: React.FC<ProviderGroupProps> = ({
+  stats,
+  isCollapsed,
+  onToggleCollapse,
+  getQuotaTextColorClass,
+  getQuotaBarColorClass,
+  formatQuotaLabel,
+  formatResetTimeLabel,
+  formatResetTimeTitle,
+  leftLabel,
+}) => {
+  const { t } = useTranslation();
+  const { providerInfo, visibleModels, avgPercentage, earliestReset } = stats;
+
+  if (visibleModels.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="border-border/60 overflow-hidden rounded-lg border">
+      {/* Provider Header */}
+      <button
+        type="button"
+        onClick={onToggleCollapse}
+        className="hover:bg-muted/60 flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors"
+      >
+        {isCollapsed ? (
+          <ChevronRight className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+        ) : (
+          <ChevronDown className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+        )}
+
+        {/* Provider color dot */}
+        <span
+          className="inline-block h-2.5 w-2.5 shrink-0 rounded-full"
+          style={{ backgroundColor: providerInfo.color }}
+        />
+
+        <span className="font-medium">{providerInfo.name}</span>
+
+        <span className="text-muted-foreground text-xs">
+          {t('settings.providerGroupings.models', { count: visibleModels.length })}
+        </span>
+
+        {/* Spacer */}
+        <div className="flex-1" />
+
+        {/* Averaged metrics */}
+        <div className="flex items-center gap-2">
+          {earliestReset && (
+            <span
+              className="text-muted-foreground text-[10px]"
+              title={formatResetTimeTitle(earliestReset)}
+            >
+              {formatResetTimeLabel(earliestReset)}
+            </span>
+          )}
+          <div className="flex items-baseline gap-1">
+            <span
+              className={`font-mono text-xs font-bold ${getQuotaTextColorClass(avgPercentage)}`}
+            >
+              {formatQuotaLabel(avgPercentage)}
+            </span>
+            {Number.isFinite(avgPercentage) && avgPercentage > 0 && (
+              <span className="text-muted-foreground text-[10px]">
+                {t('settings.providerGroupings.avgLabel')}
+              </span>
+            )}
+          </div>
+          <div className="bg-muted h-1.5 w-16 overflow-hidden rounded-full">
+            <div
+              className={`h-full rounded-full transition-all duration-300 ${getQuotaBarColorClass(avgPercentage)}`}
+              style={{ width: `${clampQuotaPercentage(avgPercentage)}%` }}
+            />
+          </div>
+        </div>
+      </button>
+
+      {/* Individual model rows (shown when expanded) */}
+      {!isCollapsed && (
+        <div className="border-border/40 border-t">
+          {visibleModels.map((model, index) => (
+            <div
+              key={model.id}
+              className={`hover:bg-muted/60 grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 px-3 py-2 pl-9 text-sm transition-colors ${
+                index < visibleModels.length - 1 ? 'border-border/20 border-b' : ''
+              }`}
+            >
+              <span className="text-muted-foreground min-w-0 truncate" title={model.id}>
+                {model.id.replace('models/', '')}
+              </span>
+              <div className="flex flex-col items-end gap-1">
+                <span
+                  className="text-muted-foreground text-[10px] leading-none"
+                  title={formatResetTimeTitle(model.resetTime)}
+                >
+                  {formatResetTimeLabel(model.resetTime)}
+                </span>
+                <div className="flex items-baseline gap-1.5">
+                  <span
+                    className={`font-mono leading-none font-bold ${getQuotaTextColorClass(model.percentage)}`}
+                  >
+                    {formatQuotaLabel(model.percentage)}
+                  </span>
+                  {model.percentage > 0 && (
+                    <span className="text-muted-foreground text-[10px]">{leftLabel}</span>
+                  )}
+                </div>
+                <div className="bg-muted h-1.5 w-24 overflow-hidden rounded-full">
+                  <div
+                    className={`h-full rounded-full transition-all duration-300 ${getQuotaBarColorClass(model.percentage)}`}
+                    style={{ width: `${clampQuotaPercentage(model.percentage)}%` }}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/StatusBar.tsx

@@ -1,146 +1,146 @@
-import React from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { isProcessRunning, startGeminiNexus, closeGeminiNexus } from '@/actions/process';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import { Play, Square, Loader2, Power } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-
-interface StatusBarProps {
-  isCollapsed?: boolean;
-}
-
-export const StatusBar: React.FC<StatusBarProps> = ({ isCollapsed = false }) => {
-  const { t } = useTranslation();
-  const queryClient = useQueryClient();
-
-  const { data: isRunning, isLoading } = useQuery({
-    queryKey: ['process', 'status'],
-    queryFn: isProcessRunning,
-    refetchInterval: 30000,
-  });
-
-  const startMutation = useMutation({
-    mutationFn: startGeminiNexus,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['process', 'status'] });
-    },
-  });
-
-  const stopMutation = useMutation({
-    mutationFn: closeGeminiNexus,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['process', 'status'] });
-    },
-  });
-
-  const handleToggle = () => {
-    if (isRunning) {
-      stopMutation.mutate();
-    } else {
-      startMutation.mutate();
-    }
-  };
-
-  const isPending = startMutation.isPending || stopMutation.isPending;
-
-  // Collapsed View
-  if (isCollapsed) {
-    return (
-      <div className="flex justify-center py-2">
-        <TooltipProvider>
-          <Tooltip delayDuration={0}>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleToggle}
-                disabled={isLoading || isPending}
-                className={cn(
-                  'h-10 w-10 rounded-lg transition-all duration-300',
-                  isRunning
-                    ? 'bg-green-100/50 text-green-700 hover:bg-green-100 hover:text-green-800 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50'
-                    : 'bg-red-100/50 text-red-700 hover:bg-red-100 hover:text-red-800 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50',
-                )}
-              >
-                {isPending ? (
-                  <Loader2 className="h-5 w-5 animate-spin" />
-                ) : (
-                  <Power className="h-5 w-5" />
-                )}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="flex items-center gap-2">
-              <div
-                className={cn('h-2 w-2 rounded-full', isRunning ? 'bg-green-500' : 'bg-red-500')}
-              />
-              <p>
-                {isLoading
-                  ? t('status.checking')
-                  : isRunning
-                    ? t('status.running')
-                    : t('status.stopped')}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-    );
-  }
-
-  // Expanded View
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-between overflow-hidden rounded-lg px-3 py-2.5 text-sm font-medium ring-1 transition-colors ring-inset',
-        isRunning
-          ? 'bg-green-100 text-green-900 ring-green-200 dark:bg-green-900/20 dark:text-green-100 dark:ring-green-900/50'
-          : 'bg-red-100 text-red-900 ring-red-200 dark:bg-red-900/20 dark:text-red-100 dark:ring-red-900/50',
-      )}
-    >
-      <div className="flex flex-1 items-start gap-3">
-        {isLoading ? (
-          <Loader2 className="mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin" />
-        ) : isRunning ? (
-          <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
-        ) : (
-          <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]" />
-        )}
-        <div className="flex flex-col gap-1 leading-none">
-          <span className="text-xs font-semibold tracking-wider uppercase opacity-80">Status</span>
-          <span className="text-sm leading-tight font-medium">
-            {isLoading
-              ? t('status.checking')
-              : isRunning
-                ? t('status.running')
-                : t('status.stopped')}
-          </span>
-        </div>
-      </div>
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={handleToggle}
-        disabled={isLoading || isPending}
-        className={cn(
-          'ml-2 h-8 shrink-0 rounded-md border px-3 transition-all',
-          isRunning
-            ? 'border-green-200 bg-green-200/50 text-green-900 hover:bg-green-200 dark:border-green-800 dark:bg-green-800/30 dark:text-green-100 dark:hover:bg-green-800/50'
-            : 'border-red-200 bg-red-200/50 text-red-900 hover:bg-red-200 dark:border-red-800 dark:bg-red-800/30 dark:text-red-100 dark:hover:bg-red-800/50',
-        )}
-      >
-        {isPending ? (
-          <Loader2 className="h-3.5 w-3.5 animate-spin" />
-        ) : isRunning ? (
-          <Square className="h-3.5 w-3.5 fill-current" />
-        ) : (
-          <Play className="h-3.5 w-3.5 fill-current" />
-        )}
-        <span className="ml-2 font-semibold">
-          {isRunning ? t('action.stop') : t('action.start')}
-        </span>
-      </Button>
-    </div>
-  );
-};
+import React from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { isProcessRunning, startGeminiNexus, closeGeminiNexus } from '@/actions/process';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { Play, Square, Loader2, Power } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface StatusBarProps {
+  isCollapsed?: boolean;
+}
+
+export const StatusBar: React.FC<StatusBarProps> = ({ isCollapsed = false }) => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const { data: isRunning, isLoading } = useQuery({
+    queryKey: ['process', 'status'],
+    queryFn: isProcessRunning,
+    refetchInterval: 30000,
+  });
+
+  const startMutation = useMutation({
+    mutationFn: startGeminiNexus,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['process', 'status'] });
+    },
+  });
+
+  const stopMutation = useMutation({
+    mutationFn: closeGeminiNexus,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['process', 'status'] });
+    },
+  });
+
+  const handleToggle = () => {
+    if (isRunning) {
+      stopMutation.mutate();
+    } else {
+      startMutation.mutate();
+    }
+  };
+
+  const isPending = startMutation.isPending || stopMutation.isPending;
+
+  // Collapsed View
+  if (isCollapsed) {
+    return (
+      <div className="flex justify-center py-2">
+        <TooltipProvider>
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleToggle}
+                disabled={isLoading || isPending}
+                className={cn(
+                  'h-10 w-10 rounded-lg transition-all duration-300',
+                  isRunning
+                    ? 'bg-green-100/50 text-green-700 hover:bg-green-100 hover:text-green-800 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50'
+                    : 'bg-red-100/50 text-red-700 hover:bg-red-100 hover:text-red-800 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50',
+                )}
+              >
+                {isPending ? (
+                  <Loader2 className="h-5 w-5 animate-spin" />
+                ) : (
+                  <Power className="h-5 w-5" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="flex items-center gap-2">
+              <div
+                className={cn('h-2 w-2 rounded-full', isRunning ? 'bg-green-500' : 'bg-red-500')}
+              />
+              <p>
+                {isLoading
+                  ? t('status.checking')
+                  : isRunning
+                    ? t('status.running')
+                    : t('status.stopped')}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    );
+  }
+
+  // Expanded View
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between overflow-hidden rounded-lg px-3 py-2.5 text-sm font-medium ring-1 transition-colors ring-inset',
+        isRunning
+          ? 'bg-green-100 text-green-900 ring-green-200 dark:bg-green-900/20 dark:text-green-100 dark:ring-green-900/50'
+          : 'bg-red-100 text-red-900 ring-red-200 dark:bg-red-900/20 dark:text-red-100 dark:ring-red-900/50',
+      )}
+    >
+      <div className="flex flex-1 items-start gap-3">
+        {isLoading ? (
+          <Loader2 className="mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin" />
+        ) : isRunning ? (
+          <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
+        ) : (
+          <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]" />
+        )}
+        <div className="flex flex-col gap-1 leading-none">
+          <span className="text-xs font-semibold tracking-wider uppercase opacity-80">Status</span>
+          <span className="text-sm leading-tight font-medium">
+            {isLoading
+              ? t('status.checking')
+              : isRunning
+                ? t('status.running')
+                : t('status.stopped')}
+          </span>
+        </div>
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handleToggle}
+        disabled={isLoading || isPending}
+        className={cn(
+          'ml-2 h-8 shrink-0 rounded-md border px-3 transition-all',
+          isRunning
+            ? 'border-green-200 bg-green-200/50 text-green-900 hover:bg-green-200 dark:border-green-800 dark:bg-green-800/30 dark:text-green-100 dark:hover:bg-green-800/50'
+            : 'border-red-200 bg-red-200/50 text-red-900 hover:bg-red-200 dark:border-red-800 dark:bg-red-800/30 dark:text-red-100 dark:hover:bg-red-800/50',
+        )}
+      >
+        {isPending ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+        ) : isRunning ? (
+          <Square className="h-3.5 w-3.5 fill-current" />
+        ) : (
+          <Play className="h-3.5 w-3.5 fill-current" />
+        )}
+        <span className="ml-2 font-semibold">
+          {isRunning ? t('action.stop') : t('action.start')}
+        </span>
+      </Button>
+    </div>
+  );
+};

src/components/accountValidationStatus.ts

@@ -1,26 +1,26 @@
-import type { TFunction } from 'i18next';
-import { isOAuthReauthReason, isRateLimitReason } from '@/utils/account-status';
-
-export function getValidationBlockedStatusLabel(
-  status: 'active' | 'rate_limited' | 'expired' | undefined,
-  reason: string | undefined,
-  t: TFunction,
-): string | null {
-  const normalizedReason = (reason || '').toLowerCase();
-  const hasReason = normalizedReason !== '';
-  const isBlockedByStatus = status === 'rate_limited' || status === 'expired';
-
-  if (!isBlockedByStatus && !hasReason) {
-    return null;
-  }
-
-  if (status === 'rate_limited' || isRateLimitReason(normalizedReason)) {
-    return t('cloud.card.validationRiskControlled');
-  }
-
-  if (status === 'expired' || isOAuthReauthReason(normalizedReason)) {
-    return t('cloud.card.validationOAuthReauthRequired');
-  }
-
-  return t('cloud.card.validationRequired');
-}
+import type { TFunction } from 'i18next';
+import { isOAuthReauthReason, isRateLimitReason } from '@/utils/account-status';
+
+export function getValidationBlockedStatusLabel(
+  status: 'active' | 'rate_limited' | 'expired' | undefined,
+  reason: string | undefined,
+  t: TFunction,
+): string | null {
+  const normalizedReason = (reason || '').toLowerCase();
+  const hasReason = normalizedReason !== '';
+  const isBlockedByStatus = status === 'rate_limited' || status === 'expired';
+
+  if (!isBlockedByStatus && !hasReason) {
+    return null;
+  }
+
+  if (status === 'rate_limited' || isRateLimitReason(normalizedReason)) {
+    return t('cloud.card.validationRiskControlled');
+  }
+
+  if (status === 'expired' || isOAuthReauthReason(normalizedReason)) {
+    return t('cloud.card.validationOAuthReauthRequired');
+  }
+
+  return t('cloud.card.validationRequired');
+}

src/components/drag-window-region.tsx

@@ -1,87 +1,87 @@
-import { getPlatform } from '@/actions/app';
-import { closeWindow, maximizeWindow, minimizeWindow } from '@/actions/window';
-import { logger } from '@/utils/logger';
-import { type ReactNode, useEffect, useState } from 'react';
-
-interface DragWindowRegionProps {
-  title?: ReactNode;
-}
-
-export default function DragWindowRegion({ title }: DragWindowRegionProps) {
-  const [platform, setPlatform] = useState<string | null>(null);
-
-  useEffect(() => {
-    let active = true;
-
-    getPlatform()
-      .then((value: any) => {
-        if (!active) {
-          return;
-        }
-        setPlatform(value as string);
-      })
-      .catch((error: any) => {
-        logger.error('Failed to detect platform', error);
-      });
-
-    return () => {
-      active = false;
-    };
-  }, []);
-
-  const isMacOS = platform === 'darwin';
-
-  return (
-    <div className="flex w-screen items-stretch justify-between">
-      <div className="draglayer w-full">
-        {title && !isMacOS && (
-          <div className="flex flex-1 p-2 text-xs whitespace-nowrap text-gray-400 select-none">
-            {title}
-          </div>
-        )}
-        {isMacOS && (
-          <div className="flex flex-1 p-2">
-            {/* Maintain the same height but do not display content */}
-          </div>
-        )}
-      </div>
-      {!isMacOS && <WindowButtons />}
-    </div>
-  );
-}
-
-function WindowButtons() {
-  return (
-    <div className="flex">
-      <button
-        title="Minimize"
-        type="button"
-        className="p-2 hover:bg-slate-300"
-        onClick={minimizeWindow}
-      >
-        <svg aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 12 12">
-          <rect fill="currentColor" width="10" height="1" x="1" y="6"></rect>
-        </svg>
-      </button>
-      <button
-        title="Maximize"
-        type="button"
-        className="p-2 hover:bg-slate-300"
-        onClick={maximizeWindow}
-      >
-        <svg aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 12 12">
-          <rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect>
-        </svg>
-      </button>
-      <button type="button" title="Close" className="p-2 hover:bg-red-300" onClick={closeWindow}>
-        <svg aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 12 12">
-          <polygon
-            fill="currentColor"
-            fillRule="evenodd"
-            points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
-          ></polygon>
-        </svg>
-      </button>
-    </div>
-  );
-}
+import { getPlatform } from '@/actions/app';
+import { closeWindow, maximizeWindow, minimizeWindow } from '@/actions/window';
+import { logger } from '@/utils/logger';
+import { type ReactNode, useEffect, useState } from 'react';
+
+interface DragWindowRegionProps {
+  title?: ReactNode;
+}
+
+export default function DragWindowRegion({ title }: DragWindowRegionProps) {
+  const [platform, setPlatform] = useState<string | null>(null);
+
+  useEffect(() => {
+    let active = true;
+
+    getPlatform()
+      .then((value: any) => {
+        if (!active) {
+          return;
+        }
+        setPlatform(value as string);
+      })
+      .catch((error: any) => {
+        logger.error('Failed to detect platform', error);
+      });
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const isMacOS = platform === 'darwin';
+
+  return (
+    <div className="flex w-screen items-stretch justify-between">
+      <div className="draglayer w-full">
+        {title && !isMacOS && (
+          <div className="flex flex-1 p-2 text-xs whitespace-nowrap text-gray-400 select-none">
+            {title}
+          </div>
+        )}
+        {isMacOS && (
+          <div className="flex flex-1 p-2">
+            {/* Maintain the same height but do not display content */}
+          </div>
+        )}
+      </div>
+      {!isMacOS && <WindowButtons />}
+    </div>
+  );
+}
+
+function WindowButtons() {
+  return (
+    <div className="flex">
+      <button
+        title="Minimize"
+        type="button"
+        className="p-2 hover:bg-slate-300"
+        onClick={minimizeWindow}
+      >
+        <svg aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 12 12">
+          <rect fill="currentColor" width="10" height="1" x="1" y="6"></rect>
+        </svg>
+      </button>
+      <button
+        title="Maximize"
+        type="button"
+        className="p-2 hover:bg-slate-300"
+        onClick={maximizeWindow}
+      >
+        <svg aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 12 12">
+          <rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"></rect>
+        </svg>
+      </button>
+      <button type="button" title="Close" className="p-2 hover:bg-red-300" onClick={closeWindow}>
+        <svg aria-hidden="true" role="img" width="12" height="12" viewBox="0 0 12 12">
+          <polygon
+            fill="currentColor"
+            fillRule="evenodd"
+            points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
+          ></polygon>
+        </svg>
+      </button>
+    </div>
+  );
+}

src/components/navigation-menu.tsx

@@ -1,25 +1,25 @@
-import { Link } from '@tanstack/react-router';
-import {
-  NavigationMenu as NavigationMenuBase,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu';
-import { useTranslation } from 'react-i18next';
-
-export default function NavigationMenu() {
-  const { t } = useTranslation();
-
-  return (
-    <NavigationMenuBase className="text-muted-foreground px-2">
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-            <Link to="/">{t('titleHomePage')}</Link>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-    </NavigationMenuBase>
-  );
-}
+import { Link } from '@tanstack/react-router';
+import {
+  NavigationMenu as NavigationMenuBase,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu';
+import { useTranslation } from 'react-i18next';
+
+export default function NavigationMenu() {
+  const { t } = useTranslation();
+
+  return (
+    <NavigationMenuBase className="text-muted-foreground px-2">
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link to="/">{t('titleHomePage')}</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenuBase>
+  );
+}

src/components/proxy/ProxyAdvancedTab.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { MonitorTab } from './advanced/MonitorTab';
-import { ToolsTab } from './advanced/ToolsTab';
-import { ReplayTab } from './advanced/ReplayTab';
-import { CapabilitiesTab } from './advanced/CapabilitiesTab';
-import type { ProxyConfig } from '@/types/config';
-
-interface ProxyAdvancedTabProps {
-  proxyConfig: ProxyConfig;
-}
-
-export const ProxyAdvancedTab: React.FC<ProxyAdvancedTabProps> = () => {
-  const { t } = useTranslation();
-
-  return (
-    <Tabs defaultValue="monitor" className="space-y-5">
-      <TabsList className="grid w-full grid-cols-4">
-        <TabsTrigger value="monitor">{t('proxy.advanced.monitor')}</TabsTrigger>
-        <TabsTrigger value="tools">{t('proxy.advanced.tabs.tools')}</TabsTrigger>
-        <TabsTrigger value="replay">{t('proxy.advanced.tabs.replay')}</TabsTrigger>
-        <TabsTrigger value="capabilities">{t('proxy.advanced.tabs.capabilities')}</TabsTrigger>
-      </TabsList>
-      <TabsContent value="monitor">
-        <MonitorTab />
-      </TabsContent>
-      <TabsContent value="tools">
-        <ToolsTab />
-      </TabsContent>
-      <TabsContent value="replay">
-        <ReplayTab />
-      </TabsContent>
-      <TabsContent value="capabilities">
-        <CapabilitiesTab />
-      </TabsContent>
-    </Tabs>
-  );
-};
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { MonitorTab } from './advanced/MonitorTab';
+import { ToolsTab } from './advanced/ToolsTab';
+import { ReplayTab } from './advanced/ReplayTab';
+import { CapabilitiesTab } from './advanced/CapabilitiesTab';
+import type { ProxyConfig } from '@/types/config';
+
+interface ProxyAdvancedTabProps {
+  proxyConfig: ProxyConfig;
+}
+
+export const ProxyAdvancedTab: React.FC<ProxyAdvancedTabProps> = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Tabs defaultValue="monitor" className="space-y-5">
+      <TabsList className="grid w-full grid-cols-4">
+        <TabsTrigger value="monitor">{t('proxy.advanced.monitor')}</TabsTrigger>
+        <TabsTrigger value="tools">{t('proxy.advanced.tabs.tools')}</TabsTrigger>
+        <TabsTrigger value="replay">{t('proxy.advanced.tabs.replay')}</TabsTrigger>
+        <TabsTrigger value="capabilities">{t('proxy.advanced.tabs.capabilities')}</TabsTrigger>
+      </TabsList>
+      <TabsContent value="monitor">
+        <MonitorTab />
+      </TabsContent>
+      <TabsContent value="tools">
+        <ToolsTab />
+      </TabsContent>
+      <TabsContent value="replay">
+        <ReplayTab />
+      </TabsContent>
+      <TabsContent value="capabilities">
+        <CapabilitiesTab />
+      </TabsContent>
+    </Tabs>
+  );
+};

src/components/proxy/advanced/CapabilitiesTab.tsx

@@ -1,188 +1,188 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQuery } from '@tanstack/react-query';
-import { groupBy } from 'lodash-es';
-import { ipc } from '@/ipc/manager';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Loader2, Eye, Zap, Code, Brain, Star } from 'lucide-react';
-
-interface ModelCapability {
-  id: string;
-  object: string;
-  displayName?: string;
-  capabilities: {
-    vision: boolean;
-    thinking: boolean;
-    streaming: boolean;
-    jsonMode: boolean;
-    recommended: boolean;
-  };
-  limits: {
-    maxTokens?: number;
-    maxOutputTokens?: number;
-    thinkingBudget?: number;
-  };
-}
-
-const CAPABILITY_ICONS = {
-  vision: Eye,
-  thinking: Brain,
-  streaming: Zap,
-  jsonMode: Code,
-  recommended: Star,
-} as const;
-
-const CAPABILITY_LABELS = {
-  vision: 'Vision',
-  thinking: 'Thinking',
-  streaming: 'Streaming',
-  jsonMode: 'JSON Mode',
-  recommended: 'Recommended',
-} as const;
-
-function getProvider(modelId: string): string {
-  const id = modelId.toLowerCase();
-  if (id.startsWith('gemini')) return 'Google';
-  if (id.startsWith('claude')) return 'Anthropic';
-  if (id.startsWith('gpt') || id.startsWith('o1') || id.startsWith('o3') || id.startsWith('text-')) return 'OpenAI';
-  if (id.startsWith('deepseek')) return 'DeepSeek';
-  if (id.startsWith('meta-llama') || id.startsWith('llama')) return 'Meta';
-  if (id.startsWith('mistral') || id.startsWith('mixtral')) return 'Mistral';
-  if (id.startsWith('qwen')) return 'Alibaba';
-  if (id.startsWith('x-ai') || id.startsWith('grok')) return 'xAI';
-  if (id.startsWith('sonar')) return 'Perplexity';
-  if (id.startsWith('command')) return 'Cohere';
-  return 'Other';
-}
-
-export const CapabilitiesTab: React.FC = () => {
-  const { t } = useTranslation();
-
-  const { data: capabilitiesData, isLoading } = useQuery({
-    queryKey: ['proxyAdvanced', 'modelCapabilities'],
-    queryFn: () => ipc.client.proxyAdvanced.getModelCapabilities(),
-    refetchInterval: 60000,
-  });
-
-  const models: ModelCapability[] = capabilitiesData?.success
-    ? (capabilitiesData.data as ModelCapability[])
-    : [];
-
-  const groupedModels = useMemo(() => {
-    return groupBy(models, (m) => getProvider(m.id));
-  }, [models]);
-
-  // Sort providers alphabetically, but keep 'Other' at the bottom
-  const sortedProviders = Object.keys(groupedModels).sort((a, b) => {
-    if (a === 'Other') return 1;
-    if (b === 'Other') return -1;
-    return a.localeCompare(b);
-  });
-
-  return (
-    <div className="space-y-5">
-      {/* Header */}
-      <div>
-        <h3 className="text-lg font-medium">{t('proxy.advanced.capabilities.title', 'Model Capabilities')}</h3>
-        <p className="text-sm text-muted-foreground">{t('proxy.advanced.capabilities.description', 'Discover what each model can do')}</p>
-      </div>
-
-      {/* Capabilities Grid */}
-      {isLoading ? (
-        <div className="flex h-32 items-center justify-center">
-          <Loader2 className="h-6 w-6 animate-spin" />
-        </div>
-      ) : (
-        <div className="space-y-8">
-          {sortedProviders.map((provider) => (
-            <div key={provider} className="space-y-4">
-              <h4 className="text-md font-semibold text-foreground border-b pb-2">
-                {provider}
-              </h4>
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {groupedModels[provider].map((model) => (
-                  <Card key={model.id} className="flex flex-col transition-shadow hover:shadow-md">
-                    <CardHeader className="pb-3">
-                      <div className="flex items-center justify-between">
-                        <CardTitle className="text-base truncate pr-2" title={model.displayName || model.id}>
-                          {model.displayName || model.id}
-                        </CardTitle>
-                        <Badge variant="outline" className="shrink-0">{model.object}</Badge>
-                      </div>
-                      <CardDescription className="text-xs font-mono text-muted-foreground truncate" title={model.id}>
-                        {model.id}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4 flex-1 flex flex-col justify-between">
-                      <div className="grid grid-cols-2 gap-2">
-                        {Object.entries(model.capabilities).map(([key, supported]) => {
-                          const iconKey = key as keyof typeof CAPABILITY_ICONS;
-                          const Icon = CAPABILITY_ICONS[iconKey];
-                          const label = CAPABILITY_LABELS[iconKey];
-                          return (
-                            <div
-                              key={key}
-                              className={`flex items-center gap-2 rounded-md border p-2 ${
-                                supported
-                                  ? 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30'
-                                  : 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50'
-                              }`}
-                            >
-                              <Icon
-                                className={`h-4 w-4 shrink-0 ${
-                                  supported ? 'text-green-600 dark:text-green-400' : 'text-gray-400'
-                                }`}
-                              />
-                              <span
-                                className={`text-[11px] font-medium truncate ${
-                                  supported
-                                    ? 'text-green-700 dark:text-green-300'
-                                    : 'text-gray-500 dark:text-gray-400'
-                                }`}
-                                title={label}
-                              >
-                                {label}
-                              </span>
-                            </div>
-                          );
-                        })}
-                      </div>
-                      {Object.values(model.limits).some((v) => v != null) && (
-                        <div className="space-y-2 pt-2 border-t mt-auto">
-                          <p className="text-xs font-medium text-muted-foreground">Limits</p>
-                          <div className="flex flex-wrap gap-1.5">
-                            {model.limits.maxTokens != null && (
-                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5">
-                                Context: {model.limits.maxTokens.toLocaleString()}
-                              </Badge>
-                            )}
-                            {model.limits.maxOutputTokens != null && (
-                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5">
-                                Output: {model.limits.maxOutputTokens.toLocaleString()}
-                              </Badge>
-                            )}
-                            {model.limits.thinkingBudget != null && (
-                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5 border-blue-200 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:border-blue-800 dark:text-blue-300">
-                                Think: {model.limits.thinkingBudget.toLocaleString()}
-                              </Badge>
-                            )}
-                          </div>
-                        </div>
-                      )}
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            </div>
-          ))}
-          {models.length === 0 && (
-             <div className="text-center py-10 text-muted-foreground border rounded-lg border-dashed">
-               No models found. Check your provider configurations.
-             </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { groupBy } from 'lodash-es';
+import { ipc } from '@/ipc/manager';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Loader2, Eye, Zap, Code, Brain, Star } from 'lucide-react';
+
+interface ModelCapability {
+  id: string;
+  object: string;
+  displayName?: string;
+  capabilities: {
+    vision: boolean;
+    thinking: boolean;
+    streaming: boolean;
+    jsonMode: boolean;
+    recommended: boolean;
+  };
+  limits: {
+    maxTokens?: number;
+    maxOutputTokens?: number;
+    thinkingBudget?: number;
+  };
+}
+
+const CAPABILITY_ICONS = {
+  vision: Eye,
+  thinking: Brain,
+  streaming: Zap,
+  jsonMode: Code,
+  recommended: Star,
+} as const;
+
+const CAPABILITY_LABELS = {
+  vision: 'Vision',
+  thinking: 'Thinking',
+  streaming: 'Streaming',
+  jsonMode: 'JSON Mode',
+  recommended: 'Recommended',
+} as const;
+
+function getProvider(modelId: string): string {
+  const id = modelId.toLowerCase();
+  if (id.startsWith('gemini')) return 'Google';
+  if (id.startsWith('claude')) return 'Anthropic';
+  if (id.startsWith('gpt') || id.startsWith('o1') || id.startsWith('o3') || id.startsWith('text-')) return 'OpenAI';
+  if (id.startsWith('deepseek')) return 'DeepSeek';
+  if (id.startsWith('meta-llama') || id.startsWith('llama')) return 'Meta';
+  if (id.startsWith('mistral') || id.startsWith('mixtral')) return 'Mistral';
+  if (id.startsWith('qwen')) return 'Alibaba';
+  if (id.startsWith('x-ai') || id.startsWith('grok')) return 'xAI';
+  if (id.startsWith('sonar')) return 'Perplexity';
+  if (id.startsWith('command')) return 'Cohere';
+  return 'Other';
+}
+
+export const CapabilitiesTab: React.FC = () => {
+  const { t } = useTranslation();
+
+  const { data: capabilitiesData, isLoading } = useQuery({
+    queryKey: ['proxyAdvanced', 'modelCapabilities'],
+    queryFn: () => ipc.client.proxyAdvanced.getModelCapabilities(),
+    refetchInterval: 60000,
+  });
+
+  const models: ModelCapability[] = capabilitiesData?.success
+    ? (capabilitiesData.data as ModelCapability[])
+    : [];
+
+  const groupedModels = useMemo(() => {
+    return groupBy(models, (m) => getProvider(m.id));
+  }, [models]);
+
+  // Sort providers alphabetically, but keep 'Other' at the bottom
+  const sortedProviders = Object.keys(groupedModels).sort((a, b) => {
+    if (a === 'Other') return 1;
+    if (b === 'Other') return -1;
+    return a.localeCompare(b);
+  });
+
+  return (
+    <div className="space-y-5">
+      {/* Header */}
+      <div>
+        <h3 className="text-lg font-medium">{t('proxy.advanced.capabilities.title', 'Model Capabilities')}</h3>
+        <p className="text-sm text-muted-foreground">{t('proxy.advanced.capabilities.description', 'Discover what each model can do')}</p>
+      </div>
+
+      {/* Capabilities Grid */}
+      {isLoading ? (
+        <div className="flex h-32 items-center justify-center">
+          <Loader2 className="h-6 w-6 animate-spin" />
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {sortedProviders.map((provider) => (
+            <div key={provider} className="space-y-4">
+              <h4 className="text-md font-semibold text-foreground border-b pb-2">
+                {provider}
+              </h4>
+              <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+                {groupedModels[provider].map((model) => (
+                  <Card key={model.id} className="flex flex-col transition-shadow hover:shadow-md">
+                    <CardHeader className="pb-3">
+                      <div className="flex items-center justify-between">
+                        <CardTitle className="text-base truncate pr-2" title={model.displayName || model.id}>
+                          {model.displayName || model.id}
+                        </CardTitle>
+                        <Badge variant="outline" className="shrink-0">{model.object}</Badge>
+                      </div>
+                      <CardDescription className="text-xs font-mono text-muted-foreground truncate" title={model.id}>
+                        {model.id}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4 flex-1 flex flex-col justify-between">
+                      <div className="grid grid-cols-2 gap-2">
+                        {Object.entries(model.capabilities).map(([key, supported]) => {
+                          const iconKey = key as keyof typeof CAPABILITY_ICONS;
+                          const Icon = CAPABILITY_ICONS[iconKey];
+                          const label = CAPABILITY_LABELS[iconKey];
+                          return (
+                            <div
+                              key={key}
+                              className={`flex items-center gap-2 rounded-md border p-2 ${
+                                supported
+                                  ? 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30'
+                                  : 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50'
+                              }`}
+                            >
+                              <Icon
+                                className={`h-4 w-4 shrink-0 ${
+                                  supported ? 'text-green-600 dark:text-green-400' : 'text-gray-400'
+                                }`}
+                              />
+                              <span
+                                className={`text-[11px] font-medium truncate ${
+                                  supported
+                                    ? 'text-green-700 dark:text-green-300'
+                                    : 'text-gray-500 dark:text-gray-400'
+                                }`}
+                                title={label}
+                              >
+                                {label}
+                              </span>
+                            </div>
+                          );
+                        })}
+                      </div>
+                      {Object.values(model.limits).some((v) => v != null) && (
+                        <div className="space-y-2 pt-2 border-t mt-auto">
+                          <p className="text-xs font-medium text-muted-foreground">Limits</p>
+                          <div className="flex flex-wrap gap-1.5">
+                            {model.limits.maxTokens != null && (
+                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5">
+                                Context: {model.limits.maxTokens.toLocaleString()}
+                              </Badge>
+                            )}
+                            {model.limits.maxOutputTokens != null && (
+                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5">
+                                Output: {model.limits.maxOutputTokens.toLocaleString()}
+                              </Badge>
+                            )}
+                            {model.limits.thinkingBudget != null && (
+                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5 border-blue-200 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:border-blue-800 dark:text-blue-300">
+                                Think: {model.limits.thinkingBudget.toLocaleString()}
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          ))}
+          {models.length === 0 && (
+             <div className="text-center py-10 text-muted-foreground border rounded-lg border-dashed">
+               No models found. Check your provider configurations.
+             </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/proxy/advanced/MonitorTab.tsx

@@ -1,209 +1,209 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQuery } from '@tanstack/react-query';
-import { ipc } from '@/ipc/manager';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { useToast } from '@/components/ui/use-toast';
-import { StatCard } from '@/components/usage/StatCard';
-import { TrafficLogTable } from './TrafficLogTable';
-import { Loader2, Zap, Clock, AlertTriangle, Network, HardDrive } from 'lucide-react';
-
-export const MonitorTab: React.FC = () => {
-  const { t } = useTranslation();
-  const { toast } = useToast();
-  const [direction, setDirection] = useState<string>('all');
-
-  const { data: metricsData, isLoading: metricsLoading } = useQuery({
-    queryKey: ['proxyAdvanced', 'metrics'],
-    queryFn: () => ipc.client.proxyAdvanced.getProxyMetrics(),
-    refetchInterval: 30000,
-  });
-
-  const { data: cbData, isLoading: cbLoading } = useQuery({
-    queryKey: ['proxyAdvanced', 'circuitBreaker'],
-    queryFn: () => ipc.client.proxyAdvanced.getCircuitBreakerStatus(),
-    refetchInterval: 30000,
-  });
-
-  const { data: logsData, isLoading: logsLoading } = useQuery({
-    queryKey: ['proxyAdvanced', 'logs', direction],
-    queryFn: () =>
-      ipc.client.proxyAdvanced.getRecentTrafficLogs({
-        limit: 50,
-        direction: direction === 'all' ? undefined : direction,
-      }),
-    refetchInterval: 30000,
-  });
-
-  const { data: statsData } = useQuery({
-    queryKey: ['proxyAdvanced', 'stats'],
-    queryFn: () => ipc.client.proxyAdvanced.getTrafficLogStats(),
-    refetchInterval: 30000,
-  });
-
-  const metrics = metricsData?.success ? metricsData.data : undefined;
-  const circuitBreakers = cbData?.success ? cbData.data : undefined;
-  const logs = logsData?.success ? logsData.data : [];
-  const stats = statsData?.success ? statsData.data : undefined;
-
-  const handleExport = async (format: 'json' | 'csv') => {
-    const result = await ipc.client.proxyAdvanced.exportTrafficLogs({ format });
-    if (result.success && result.data) {
-      navigator.clipboard.writeText(result.data);
-      toast({ title: t('proxy.advanced.tools.copyConfig') });
-    } else {
-      toast({ title: t('common.error'), description: result.error });
-    }
-  };
-
-  const getCircuitBadgeVariant = (state: string): React.ComponentProps<typeof Badge>['variant'] => {
-    if (state === 'closed') return 'default';
-    if (state === 'open') return 'destructive';
-    return 'secondary';
-  };
-
-  return (
-    <div className="space-y-5">
-      {/* Metrics */}
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
-        <StatCard
-          label={t('proxy.advanced.metrics.requestsPerMinute')}
-          value={metrics ? Math.round(metrics.requestsPerMinute) : 0}
-          icon={Zap}
-          isLoading={metricsLoading}
-          accent="amber"
-        />
-        <StatCard
-          label={t('proxy.advanced.metrics.avgLatency')}
-          value={metrics ? Math.round(metrics.avgLatency) : 0}
-          icon={Clock}
-          isLoading={metricsLoading}
-          accent="blue"
-        />
-        <StatCard
-          label={t('proxy.advanced.metrics.errorRate')}
-          value={metrics ? Math.round(metrics.errorRate * 100) : 0}
-          icon={AlertTriangle}
-          isLoading={metricsLoading}
-          accent="amber"
-        />
-        <StatCard
-          label={t('proxy.advanced.metrics.activeConnections')}
-          value={metrics?.activeConnections ?? 0}
-          icon={Network}
-          isLoading={metricsLoading}
-          accent="green"
-        />
-        <StatCard
-          label={t('proxy.advanced.metrics.cacheStatus')}
-          value={metrics?.cacheHitRate ? `${Math.round(metrics.cacheHitRate * 100)}%` : 'N/A'}
-          icon={HardDrive}
-          isLoading={metricsLoading}
-          accent="purple"
-        />
-      </div>
-
-      {/* Circuit Breakers */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-sm font-semibold">
-            {t('proxy.advanced.circuitBreaker.title')}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          {cbLoading ? (
-            <div className="flex h-20 items-center justify-center">
-              <Loader2 className="h-5 w-5 animate-spin" />
-            </div>
-          ) : !circuitBreakers ? (
-            <p className="text-sm text-muted-foreground">No data</p>
-          ) : (
-            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-              {Object.entries(circuitBreakers.states).map(([api, state]) => (
-                <Card key={api} className="bg-muted/30">
-                  <CardContent className="p-4">
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm font-medium">{api}</span>
-                      <Badge variant={getCircuitBadgeVariant(state.state)}>
-                        {state.state}
-                      </Badge>
-                    </div>
-                    <div className="mt-2 text-xs text-muted-foreground">
-                      {t('proxy.advanced.circuitBreaker.failures')}: {state.failures}
-                    </div>
-                    {state.lastFailure && (
-                      <div className="text-xs text-muted-foreground">
-                        {t('proxy.advanced.circuitBreaker.lastFailure')}:{' '}
-                        {new Date(state.lastFailure).toLocaleString()}
-                      </div>
-                    )}
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Traffic Logs */}
-      <div className="space-y-3">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-3">
-            <h3 className="text-sm font-semibold">
-              {t('proxy.advanced.trafficLog.title')}
-            </h3>
-            {stats && (
-              <span className="text-xs text-muted-foreground">
-                Total: {stats.total}
-              </span>
-            )}
-          </div>
-          <div className="flex items-center gap-2">
-            <Select value={direction} onValueChange={setDirection}>
-              <SelectTrigger className="h-8 w-[140px] text-xs">
-                <SelectValue placeholder={t('proxy.advanced.trafficLog.direction')} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">
-                  {t('proxy.advanced.trafficLog.all')}
-                </SelectItem>
-                <SelectItem value="inbound">
-                  {t('proxy.advanced.trafficLog.inbound')}
-                </SelectItem>
-                <SelectItem value="outbound">
-                  {t('proxy.advanced.trafficLog.outbound')}
-                </SelectItem>
-              </SelectContent>
-            </Select>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-8 text-xs"
-              onClick={() => handleExport('json')}
-            >
-              {t('proxy.advanced.trafficLog.exportJson')}
-            </Button>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-8 text-xs"
-              onClick={() => handleExport('csv')}
-            >
-              {t('proxy.advanced.trafficLog.exportCsv')}
-            </Button>
-          </div>
-        </div>
-        <TrafficLogTable logs={logs || []} isLoading={logsLoading} />
-      </div>
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { ipc } from '@/ipc/manager';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useToast } from '@/components/ui/use-toast';
+import { StatCard } from '@/components/usage/StatCard';
+import { TrafficLogTable } from './TrafficLogTable';
+import { Loader2, Zap, Clock, AlertTriangle, Network, HardDrive } from 'lucide-react';
+
+export const MonitorTab: React.FC = () => {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+  const [direction, setDirection] = useState<string>('all');
+
+  const { data: metricsData, isLoading: metricsLoading } = useQuery({
+    queryKey: ['proxyAdvanced', 'metrics'],
+    queryFn: () => ipc.client.proxyAdvanced.getProxyMetrics(),
+    refetchInterval: 30000,
+  });
+
+  const { data: cbData, isLoading: cbLoading } = useQuery({
+    queryKey: ['proxyAdvanced', 'circuitBreaker'],
+    queryFn: () => ipc.client.proxyAdvanced.getCircuitBreakerStatus(),
+    refetchInterval: 30000,
+  });
+
+  const { data: logsData, isLoading: logsLoading } = useQuery({
+    queryKey: ['proxyAdvanced', 'logs', direction],
+    queryFn: () =>
+      ipc.client.proxyAdvanced.getRecentTrafficLogs({
+        limit: 50,
+        direction: direction === 'all' ? undefined : direction,
+      }),
+    refetchInterval: 30000,
+  });
+
+  const { data: statsData } = useQuery({
+    queryKey: ['proxyAdvanced', 'stats'],
+    queryFn: () => ipc.client.proxyAdvanced.getTrafficLogStats(),
+    refetchInterval: 30000,
+  });
+
+  const metrics = metricsData?.success ? metricsData.data : undefined;
+  const circuitBreakers = cbData?.success ? cbData.data : undefined;
+  const logs = logsData?.success ? logsData.data : [];
+  const stats = statsData?.success ? statsData.data : undefined;
+
+  const handleExport = async (format: 'json' | 'csv') => {
+    const result = await ipc.client.proxyAdvanced.exportTrafficLogs({ format });
+    if (result.success && result.data) {
+      navigator.clipboard.writeText(result.data);
+      toast({ title: t('proxy.advanced.tools.copyConfig') });
+    } else {
+      toast({ title: t('common.error'), description: result.error });
+    }
+  };
+
+  const getCircuitBadgeVariant = (state: string): React.ComponentProps<typeof Badge>['variant'] => {
+    if (state === 'closed') return 'default';
+    if (state === 'open') return 'destructive';
+    return 'secondary';
+  };
+
+  return (
+    <div className="space-y-5">
+      {/* Metrics */}
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          label={t('proxy.advanced.metrics.requestsPerMinute')}
+          value={metrics ? Math.round(metrics.requestsPerMinute) : 0}
+          icon={Zap}
+          isLoading={metricsLoading}
+          accent="amber"
+        />
+        <StatCard
+          label={t('proxy.advanced.metrics.avgLatency')}
+          value={metrics ? Math.round(metrics.avgLatency) : 0}
+          icon={Clock}
+          isLoading={metricsLoading}
+          accent="blue"
+        />
+        <StatCard
+          label={t('proxy.advanced.metrics.errorRate')}
+          value={metrics ? Math.round(metrics.errorRate * 100) : 0}
+          icon={AlertTriangle}
+          isLoading={metricsLoading}
+          accent="amber"
+        />
+        <StatCard
+          label={t('proxy.advanced.metrics.activeConnections')}
+          value={metrics?.activeConnections ?? 0}
+          icon={Network}
+          isLoading={metricsLoading}
+          accent="green"
+        />
+        <StatCard
+          label={t('proxy.advanced.metrics.cacheStatus')}
+          value={metrics?.cacheHitRate ? `${Math.round(metrics.cacheHitRate * 100)}%` : 'N/A'}
+          icon={HardDrive}
+          isLoading={metricsLoading}
+          accent="purple"
+        />
+      </div>
+
+      {/* Circuit Breakers */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm font-semibold">
+            {t('proxy.advanced.circuitBreaker.title')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {cbLoading ? (
+            <div className="flex h-20 items-center justify-center">
+              <Loader2 className="h-5 w-5 animate-spin" />
+            </div>
+          ) : !circuitBreakers ? (
+            <p className="text-sm text-muted-foreground">No data</p>
+          ) : (
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+              {Object.entries(circuitBreakers.states).map(([api, state]) => (
+                <Card key={api} className="bg-muted/30">
+                  <CardContent className="p-4">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium">{api}</span>
+                      <Badge variant={getCircuitBadgeVariant(state.state)}>
+                        {state.state}
+                      </Badge>
+                    </div>
+                    <div className="mt-2 text-xs text-muted-foreground">
+                      {t('proxy.advanced.circuitBreaker.failures')}: {state.failures}
+                    </div>
+                    {state.lastFailure && (
+                      <div className="text-xs text-muted-foreground">
+                        {t('proxy.advanced.circuitBreaker.lastFailure')}:{' '}
+                        {new Date(state.lastFailure).toLocaleString()}
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Traffic Logs */}
+      <div className="space-y-3">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex items-center gap-3">
+            <h3 className="text-sm font-semibold">
+              {t('proxy.advanced.trafficLog.title')}
+            </h3>
+            {stats && (
+              <span className="text-xs text-muted-foreground">
+                Total: {stats.total}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <Select value={direction} onValueChange={setDirection}>
+              <SelectTrigger className="h-8 w-[140px] text-xs">
+                <SelectValue placeholder={t('proxy.advanced.trafficLog.direction')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">
+                  {t('proxy.advanced.trafficLog.all')}
+                </SelectItem>
+                <SelectItem value="inbound">
+                  {t('proxy.advanced.trafficLog.inbound')}
+                </SelectItem>
+                <SelectItem value="outbound">
+                  {t('proxy.advanced.trafficLog.outbound')}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 text-xs"
+              onClick={() => handleExport('json')}
+            >
+              {t('proxy.advanced.trafficLog.exportJson')}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-8 text-xs"
+              onClick={() => handleExport('csv')}
+            >
+              {t('proxy.advanced.trafficLog.exportCsv')}
+            </Button>
+          </div>
+        </div>
+        <TrafficLogTable logs={logs || []} isLoading={logsLoading} />
+      </div>
+    </div>
+  );
+};

src/components/proxy/advanced/ReplayTab.tsx

@@ -1,173 +1,173 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { ipc } from '@/ipc/manager';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Badge } from '@/components/ui/badge';
-import { useToast } from '@/components/ui/use-toast';
-import { Loader2, Play, RefreshCw, Clock, AlertCircle, CheckCircle } from 'lucide-react';
-
-interface ReplayEntry {
-  id: string;
-  timestamp: number;
-  method: string;
-  endpoint: string;
-  status?: number;
-  duration?: number;
-  body?: unknown;
-}
-
-export const ReplayTab: React.FC = () => {
-  const { t } = useTranslation();
-  const { toast } = useToast();
-  const queryClient = useQueryClient();
-  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(null);
-
-  const {
-    data: requestsData,
-    isLoading: requestsLoading,
-    refetch: refetchRequests,
-  } = useQuery({
-    queryKey: ['proxyAdvanced', 'recentRequests'],
-    queryFn: () => ipc.client.proxyAdvanced.getRecentRequests(),
-    refetchInterval: 10000,
-  });
-
-  const replayMutation = useMutation({
-    mutationFn: (requestId: string) => ipc.client.proxyAdvanced.replayRequest({ requestId }),
-    onSuccess: (data) => {
-      if (data.success) {
-        toast({
-          title: t('proxy.advanced.replay.success'),
-          description: t('proxy.advanced.replay.replayedSuccessfully'),
-        });
-      } else {
-        toast({
-          title: t('proxy.advanced.replay.error'),
-          description: data.error || t('proxy.advanced.replay.unknownError'),
-          variant: 'destructive',
-        });
-      }
-      setSelectedRequestId(null);
-    },
-    onError: (error) => {
-      toast({
-        title: t('proxy.advanced.replay.error'),
-        description: error instanceof Error ? error.message : t('proxy.advanced.replay.unknownError'),
-        variant: 'destructive',
-      });
-      setSelectedRequestId(null);
-    },
-  });
-
-  const requests: ReplayEntry[] = requestsData?.success ? (requestsData.data as ReplayEntry[]) : [];
-
-  const handleReplay = (requestId: string) => {
-    setSelectedRequestId(requestId);
-    replayMutation.mutate(requestId);
-  };
-
-  const formatTimestamp = (timestamp: number): string => {
-    return new Date(timestamp).toLocaleTimeString();
-  };
-
-  const getStatusBadge = (status?: number) => {
-    if (!status) return <Badge variant="outline">{t('proxy.advanced.replay.pending')}</Badge>;
-    if (status >= 200 && status < 300) {
-      return (
-        <Badge variant="default" className="bg-green-600 hover:bg-green-700">
-          <CheckCircle className="mr-1 h-3 w-3" />
-          {status}
-        </Badge>
-      );
-    }
-    if (status >= 400) {
-      return (
-        <Badge variant="destructive">
-          <AlertCircle className="mr-1 h-3 w-3" />
-          {status}
-        </Badge>
-      );
-    }
-    return <Badge variant="secondary">{status}</Badge>;
-  };
-
-  return (
-    <div className="space-y-5">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-lg font-medium">{t('proxy.advanced.replay.title')}</h3>
-          <p className="text-sm text-muted-foreground">{t('proxy.advanced.replay.description')}</p>
-        </div>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => refetchRequests()}
-          disabled={requestsLoading}
-        >
-          <RefreshCw className={`mr-2 h-4 w-4 ${requestsLoading ? 'animate-spin' : ''}`} />
-          {t('proxy.advanced.replay.refresh')}
-        </Button>
-      </div>
-
-      {/* Requests List */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('proxy.advanced.replay.recentRequests')}</CardTitle>
-          <CardDescription>{t('proxy.advanced.replay.clickToReplay')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {requestsLoading ? (
-            <div className="flex h-32 items-center justify-center">
-              <Loader2 className="h-6 w-6 animate-spin" />
-            </div>
-          ) : requests.length === 0 ? (
-            <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed">
-              <Clock className="h-8 w-8 text-muted-foreground" />
-              <p className="text-sm text-muted-foreground">
-                {t('proxy.advanced.replay.noRequests')}
-              </p>
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {requests.map((request) => (
-                <div
-                  key={request.id}
-                  className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50"
-                >
-                  <div className="flex items-center gap-3">
-                    {getStatusBadge(request.status)}
-                    <div className="flex flex-col">
-                      <span className="text-sm font-medium">
-                        {request.method} {request.endpoint}
-                      </span>
-                      <span className="text-xs text-muted-foreground">
-                        {formatTimestamp(request.timestamp)}
-                        {request.duration && ` · ${request.duration}ms`}
-                      </span>
-                    </div>
-                  </div>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => handleReplay(request.id)}
-                    disabled={replayMutation.isPending && selectedRequestId === request.id}
-                  >
-                    {replayMutation.isPending && selectedRequestId === request.id ? (
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    ) : (
-                      <Play className="mr-2 h-4 w-4" />
-                    )}
-                    {t('proxy.advanced.replay.replay')}
-                  </Button>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { ipc } from '@/ipc/manager';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { useToast } from '@/components/ui/use-toast';
+import { Loader2, Play, RefreshCw, Clock, AlertCircle, CheckCircle } from 'lucide-react';
+
+interface ReplayEntry {
+  id: string;
+  timestamp: number;
+  method: string;
+  endpoint: string;
+  status?: number;
+  duration?: number;
+  body?: unknown;
+}
+
+export const ReplayTab: React.FC = () => {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(null);
+
+  const {
+    data: requestsData,
+    isLoading: requestsLoading,
+    refetch: refetchRequests,
+  } = useQuery({
+    queryKey: ['proxyAdvanced', 'recentRequests'],
+    queryFn: () => ipc.client.proxyAdvanced.getRecentRequests(),
+    refetchInterval: 10000,
+  });
+
+  const replayMutation = useMutation({
+    mutationFn: (requestId: string) => ipc.client.proxyAdvanced.replayRequest({ requestId }),
+    onSuccess: (data) => {
+      if (data.success) {
+        toast({
+          title: t('proxy.advanced.replay.success'),
+          description: t('proxy.advanced.replay.replayedSuccessfully'),
+        });
+      } else {
+        toast({
+          title: t('proxy.advanced.replay.error'),
+          description: data.error || t('proxy.advanced.replay.unknownError'),
+          variant: 'destructive',
+        });
+      }
+      setSelectedRequestId(null);
+    },
+    onError: (error) => {
+      toast({
+        title: t('proxy.advanced.replay.error'),
+        description: error instanceof Error ? error.message : t('proxy.advanced.replay.unknownError'),
+        variant: 'destructive',
+      });
+      setSelectedRequestId(null);
+    },
+  });
+
+  const requests: ReplayEntry[] = requestsData?.success ? (requestsData.data as ReplayEntry[]) : [];
+
+  const handleReplay = (requestId: string) => {
+    setSelectedRequestId(requestId);
+    replayMutation.mutate(requestId);
+  };
+
+  const formatTimestamp = (timestamp: number): string => {
+    return new Date(timestamp).toLocaleTimeString();
+  };
+
+  const getStatusBadge = (status?: number) => {
+    if (!status) return <Badge variant="outline">{t('proxy.advanced.replay.pending')}</Badge>;
+    if (status >= 200 && status < 300) {
+      return (
+        <Badge variant="default" className="bg-green-600 hover:bg-green-700">
+          <CheckCircle className="mr-1 h-3 w-3" />
+          {status}
+        </Badge>
+      );
+    }
+    if (status >= 400) {
+      return (
+        <Badge variant="destructive">
+          <AlertCircle className="mr-1 h-3 w-3" />
+          {status}
+        </Badge>
+      );
+    }
+    return <Badge variant="secondary">{status}</Badge>;
+  };
+
+  return (
+    <div className="space-y-5">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium">{t('proxy.advanced.replay.title')}</h3>
+          <p className="text-sm text-muted-foreground">{t('proxy.advanced.replay.description')}</p>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refetchRequests()}
+          disabled={requestsLoading}
+        >
+          <RefreshCw className={`mr-2 h-4 w-4 ${requestsLoading ? 'animate-spin' : ''}`} />
+          {t('proxy.advanced.replay.refresh')}
+        </Button>
+      </div>
+
+      {/* Requests List */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('proxy.advanced.replay.recentRequests')}</CardTitle>
+          <CardDescription>{t('proxy.advanced.replay.clickToReplay')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {requestsLoading ? (
+            <div className="flex h-32 items-center justify-center">
+              <Loader2 className="h-6 w-6 animate-spin" />
+            </div>
+          ) : requests.length === 0 ? (
+            <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed">
+              <Clock className="h-8 w-8 text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">
+                {t('proxy.advanced.replay.noRequests')}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {requests.map((request) => (
+                <div
+                  key={request.id}
+                  className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50"
+                >
+                  <div className="flex items-center gap-3">
+                    {getStatusBadge(request.status)}
+                    <div className="flex flex-col">
+                      <span className="text-sm font-medium">
+                        {request.method} {request.endpoint}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {formatTimestamp(request.timestamp)}
+                        {request.duration && ` · ${request.duration}ms`}
+                      </span>
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleReplay(request.id)}
+                    disabled={replayMutation.isPending && selectedRequestId === request.id}
+                  >
+                    {replayMutation.isPending && selectedRequestId === request.id ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                      <Play className="mr-2 h-4 w-4" />
+                    )}
+                    {t('proxy.advanced.replay.replay')}
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

src/components/proxy/advanced/ToolsTab.tsx

@@ -1,134 +1,134 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQuery, useQueries } from '@tanstack/react-query';
-import { ipc } from '@/ipc/manager';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { useToast } from '@/components/ui/use-toast';
-import { StatCard } from '@/components/usage/StatCard';
-import { Loader2, Copy, CheckCircle, ShieldAlert, XCircle, Terminal, Code2, Braces } from 'lucide-react';
-
-const IDE_CONFIGS = [
-  { key: 'vscode', label: 'VS Code', icon: Code2 },
-  { key: 'cursor', label: 'Cursor', icon: Terminal },
-  { key: 'claude-code', label: 'Claude Code', icon: Braces },
-] as const;
-
-export const ToolsTab: React.FC = () => {
-  const { t } = useTranslation();
-  const { toast } = useToast();
-
-  const { data: parityData, isLoading: parityLoading } = useQuery({
-    queryKey: ['proxyAdvanced', 'parityCounters'],
-    queryFn: () => ipc.client.proxyAdvanced.getParityCounters(),
-    refetchInterval: 30000,
-  });
-
-  const ideQueries = useQueries({
-    queries: [
-      {
-        queryKey: ['proxyAdvanced', 'ideConfig', 'vscode'],
-        queryFn: () => ipc.client.proxyAdvanced.generateIdeConfig({ ide: 'vscode' }),
-      },
-      {
-        queryKey: ['proxyAdvanced', 'ideConfig', 'cursor'],
-        queryFn: () => ipc.client.proxyAdvanced.generateIdeConfig({ ide: 'cursor' }),
-      },
-    ],
-  });
-
-  const parity = parityData?.success ? parityData.data : undefined;
-
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text);
-    toast({ title: t('proxy.advanced.tools.copyConfig') });
-  };
-
-  const getIdeInstructions = (key: string): string => {
-    if (key === 'claude-code') {
-      return 'export ANTHROPIC_BASE_URL=http://localhost:8045/v1\nexport ANTHROPIC_API_KEY=YOUR_API_KEY';
-    }
-    const index = key === 'vscode' ? 0 : 1;
-    const result = ideQueries[index].data;
-    if (result?.success && result.data) {
-      const d = result.data;
-      return `${d.instructions}\n${d.proxySetting}: http://localhost:8045\n${d.apiKeySetting}: YOUR_API_KEY`;
-    }
-    return '';
-  };
-
-  const isIdeLoading = ideQueries.some((q) => q.isLoading);
-
-  return (
-    <div className="space-y-5">
-      {/* Parity Counters */}
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
-        <StatCard
-          label={t('proxy.advanced.tools.totalRequests')}
-          value={parity?.totalRequests ?? 0}
-          icon={CheckCircle}
-          isLoading={parityLoading}
-          accent="blue"
-        />
-        <StatCard
-          label={t('proxy.advanced.tools.matchedRequests')}
-          value={parity?.matchedRequests ?? 0}
-          icon={ShieldAlert}
-          isLoading={parityLoading}
-          accent="green"
-        />
-        <StatCard
-          label={t('proxy.advanced.tools.parityViolations')}
-          value={parity?.parityViolations ?? 0}
-          icon={XCircle}
-          isLoading={parityLoading}
-          accent="amber"
-        />
-      </div>
-
-      {/* IDE Quick Setup */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('proxy.advanced.tools.ideSetup')}</CardTitle>
-          <CardDescription>Quick configuration for popular IDEs</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {isIdeLoading ? (
-            <div className="flex h-20 items-center justify-center">
-              <Loader2 className="h-5 w-5 animate-spin" />
-            </div>
-          ) : (
-            IDE_CONFIGS.map(({ key, label, icon: Icon }) => {
-              const instructions = getIdeInstructions(key);
-              return (
-                <div key={key} className="rounded-lg border">
-                  <div className="flex items-center justify-between p-3">
-                    <div className="flex items-center gap-2">
-                      <Icon className="h-4 w-4 text-muted-foreground" />
-                      <span className="text-sm font-medium">{label}</span>
-                    </div>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="h-8 text-xs"
-                      onClick={() => copyToClipboard(instructions)}
-                    >
-                      <Copy className="mr-1.5 h-3.5 w-3.5" />
-                      {t('proxy.advanced.tools.copyConfig')}
-                    </Button>
-                  </div>
-                  {instructions && (
-                    <pre className="overflow-x-auto border-t bg-gray-900 p-3 font-mono text-xs whitespace-pre-wrap text-gray-100">
-                      {instructions}
-                    </pre>
-                  )}
-                </div>
-              );
-            })
-          )}
-        </CardContent>
-      </Card>
-
-    </div>
-  );
-};
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery, useQueries } from '@tanstack/react-query';
+import { ipc } from '@/ipc/manager';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/components/ui/use-toast';
+import { StatCard } from '@/components/usage/StatCard';
+import { Loader2, Copy, CheckCircle, ShieldAlert, XCircle, Terminal, Code2, Braces } from 'lucide-react';
+
+const IDE_CONFIGS = [
+  { key: 'vscode', label: 'VS Code', icon: Code2 },
+  { key: 'cursor', label: 'Cursor', icon: Terminal },
+  { key: 'claude-code', label: 'Claude Code', icon: Braces },
+] as const;
+
+export const ToolsTab: React.FC = () => {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+
+  const { data: parityData, isLoading: parityLoading } = useQuery({
+    queryKey: ['proxyAdvanced', 'parityCounters'],
+    queryFn: () => ipc.client.proxyAdvanced.getParityCounters(),
+    refetchInterval: 30000,
+  });
+
+  const ideQueries = useQueries({
+    queries: [
+      {
+        queryKey: ['proxyAdvanced', 'ideConfig', 'vscode'],
+        queryFn: () => ipc.client.proxyAdvanced.generateIdeConfig({ ide: 'vscode' }),
+      },
+      {
+        queryKey: ['proxyAdvanced', 'ideConfig', 'cursor'],
+        queryFn: () => ipc.client.proxyAdvanced.generateIdeConfig({ ide: 'cursor' }),
+      },
+    ],
+  });
+
+  const parity = parityData?.success ? parityData.data : undefined;
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    toast({ title: t('proxy.advanced.tools.copyConfig') });
+  };
+
+  const getIdeInstructions = (key: string): string => {
+    if (key === 'claude-code') {
+      return 'export ANTHROPIC_BASE_URL=http://localhost:8045/v1\nexport ANTHROPIC_API_KEY=YOUR_API_KEY';
+    }
+    const index = key === 'vscode' ? 0 : 1;
+    const result = ideQueries[index].data;
+    if (result?.success && result.data) {
+      const d = result.data;
+      return `${d.instructions}\n${d.proxySetting}: http://localhost:8045\n${d.apiKeySetting}: YOUR_API_KEY`;
+    }
+    return '';
+  };
+
+  const isIdeLoading = ideQueries.some((q) => q.isLoading);
+
+  return (
+    <div className="space-y-5">
+      {/* Parity Counters */}
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <StatCard
+          label={t('proxy.advanced.tools.totalRequests')}
+          value={parity?.totalRequests ?? 0}
+          icon={CheckCircle}
+          isLoading={parityLoading}
+          accent="blue"
+        />
+        <StatCard
+          label={t('proxy.advanced.tools.matchedRequests')}
+          value={parity?.matchedRequests ?? 0}
+          icon={ShieldAlert}
+          isLoading={parityLoading}
+          accent="green"
+        />
+        <StatCard
+          label={t('proxy.advanced.tools.parityViolations')}
+          value={parity?.parityViolations ?? 0}
+          icon={XCircle}
+          isLoading={parityLoading}
+          accent="amber"
+        />
+      </div>
+
+      {/* IDE Quick Setup */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('proxy.advanced.tools.ideSetup')}</CardTitle>
+          <CardDescription>Quick configuration for popular IDEs</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {isIdeLoading ? (
+            <div className="flex h-20 items-center justify-center">
+              <Loader2 className="h-5 w-5 animate-spin" />
+            </div>
+          ) : (
+            IDE_CONFIGS.map(({ key, label, icon: Icon }) => {
+              const instructions = getIdeInstructions(key);
+              return (
+                <div key={key} className="rounded-lg border">
+                  <div className="flex items-center justify-between p-3">
+                    <div className="flex items-center gap-2">
+                      <Icon className="h-4 w-4 text-muted-foreground" />
+                      <span className="text-sm font-medium">{label}</span>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 text-xs"
+                      onClick={() => copyToClipboard(instructions)}
+                    >
+                      <Copy className="mr-1.5 h-3.5 w-3.5" />
+                      {t('proxy.advanced.tools.copyConfig')}
+                    </Button>
+                  </div>
+                  {instructions && (
+                    <pre className="overflow-x-auto border-t bg-gray-900 p-3 font-mono text-xs whitespace-pre-wrap text-gray-100">
+                      {instructions}
+                    </pre>
+                  )}
+                </div>
+              );
+            })
+          )}
+        </CardContent>
+      </Card>
+
+    </div>
+  );
+};

src/components/proxy/advanced/TrafficLogTable.tsx

@@ -1,190 +1,190 @@
-import React, { useState, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Loader2, ArrowUp, ArrowDown } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-
-interface TrafficLogEntry {
-  timestamp: string;
-  direction: string;
-  requestId: string;
-  endpoint: string;
-  method?: string;
-  status?: number;
-  durationMs?: number;
-}
-
-interface TrafficLogTableProps {
-  logs: TrafficLogEntry[];
-  isLoading: boolean;
-}
-
-type SortKey = 'timestamp' | 'direction' | 'endpoint' | 'method' | 'status' | 'duration';
-type SortDir = 'asc' | 'desc';
-
-function SortIcon({ column, sortKey, sortDir }: { column: SortKey; sortKey: SortKey; sortDir: SortDir }) {
-  if (sortKey !== column) return <span className="ml-1 inline-block w-3" />;
-  return sortDir === 'asc' ? (
-    <ArrowUp className="ml-1 inline h-3 w-3" />
-  ) : (
-    <ArrowDown className="ml-1 inline h-3 w-3" />
-  );
-}
-
-export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoading }) => {
-  const { t } = useTranslation();
-  const [sortKey, setSortKey] = useState<SortKey>('timestamp');
-  const [sortDir, setSortDir] = useState<SortDir>('desc');
-
-  const toggleSort = (key: SortKey) => {
-    if (sortKey === key) {
-      setSortDir((prev) => (prev === 'asc' ? 'desc' : 'asc'));
-    } else {
-      setSortKey(key);
-      setSortDir('asc');
-    }
-  };
-
-  const sortedLogs = useMemo(() => {
-    const dir = sortDir === 'asc' ? 1 : -1;
-    return [...logs].sort((a, b) => {
-      switch (sortKey) {
-        case 'timestamp':
-          return (new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()) * dir;
-        case 'direction':
-          return (a.direction || '').localeCompare(b.direction || '') * dir;
-        case 'endpoint':
-          return (a.endpoint || '').localeCompare(b.endpoint || '') * dir;
-        case 'method':
-          return (a.method || '').localeCompare(b.method || '') * dir;
-        case 'status': {
-          const aStatus = a.status ?? -1;
-          const bStatus = b.status ?? -1;
-          return (aStatus - bStatus) * dir;
-        }
-        case 'duration': {
-          const aDur = a.durationMs ?? -1;
-          const bDur = b.durationMs ?? -1;
-          return (aDur - bDur) * dir;
-        }
-        default:
-          return 0;
-      }
-    });
-  }, [logs, sortKey, sortDir]);
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-sm font-semibold">
-          {t('proxy.advanced.trafficLog.title')}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        {isLoading ? (
-          <div className="flex h-32 items-center justify-center">
-            <Loader2 className="h-5 w-5 animate-spin" />
-          </div>
-        ) : logs.length === 0 ? (
-          <div className="py-8 text-center text-sm text-muted-foreground">
-            {t('proxy.advanced.trafficLog.noLogs')}
-          </div>
-        ) : (
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b text-left text-xs text-muted-foreground">
-                  <th
-                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
-                    onClick={() => toggleSort('timestamp')}
-                  >
-                    {t('proxy.advanced.trafficLog.timestamp')}
-                    <SortIcon column="timestamp" sortKey={sortKey} sortDir={sortDir} />
-                  </th>
-                  <th
-                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
-                    onClick={() => toggleSort('direction')}
-                  >
-                    {t('proxy.advanced.trafficLog.direction')}
-                    <SortIcon column="direction" sortKey={sortKey} sortDir={sortDir} />
-                  </th>
-                  <th
-                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
-                    onClick={() => toggleSort('endpoint')}
-                  >
-                    {t('proxy.advanced.trafficLog.endpoint')}
-                    <SortIcon column="endpoint" sortKey={sortKey} sortDir={sortDir} />
-                  </th>
-                  <th
-                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
-                    onClick={() => toggleSort('method')}
-                  >
-                    {t('proxy.advanced.trafficLog.method')}
-                    <SortIcon column="method" sortKey={sortKey} sortDir={sortDir} />
-                  </th>
-                  <th
-                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
-                    onClick={() => toggleSort('status')}
-                  >
-                    {t('proxy.advanced.trafficLog.status')}
-                    <SortIcon column="status" sortKey={sortKey} sortDir={sortDir} />
-                  </th>
-                  <th
-                    className="cursor-pointer pb-2 font-medium select-none"
-                    onClick={() => toggleSort('duration')}
-                  >
-                    {t('proxy.advanced.trafficLog.duration')}
-                    <SortIcon column="duration" sortKey={sortKey} sortDir={sortDir} />
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                {sortedLogs.map((log, i) => (
-                  <tr
-                    key={`${log.requestId}-${i}`}
-                    className="border-b border-border/40 last:border-0"
-                  >
-                    <td className="py-2 pr-4 font-mono text-xs text-muted-foreground">
-                      {new Date(log.timestamp).toLocaleTimeString()}
-                    </td>
-                    <td className="py-2 pr-4">
-                      <Badge
-                        variant="outline"
-                        className={
-                          log.direction === 'inbound'
-                            ? 'border-blue-500/30 text-blue-400'
-                            : log.direction === 'outbound'
-                              ? 'border-emerald-500/30 text-emerald-400'
-                              : 'border-slate-500/30 text-slate-400'
-                        }
-                      >
-                        {log.direction}
-                      </Badge>
-                    </td>
-                    <td className="py-2 pr-4 font-mono text-xs">{log.endpoint}</td>
-                    <td className="py-2 pr-4 text-xs">{log.method || '—'}</td>
-                    <td className="py-2 pr-4 text-xs">
-                      {log.status != null ? (
-                        <Badge
-                          variant={log.status >= 400 ? 'destructive' : 'secondary'}
-                          className="text-xs"
-                        >
-                          {log.status}
-                        </Badge>
-                      ) : (
-                        '—'
-                      )}
-                    </td>
-                    <td className="py-2 text-xs">
-                      {log.durationMs != null ? `${log.durationMs}ms` : '—'}
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Loader2, ArrowUp, ArrowDown } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+
+interface TrafficLogEntry {
+  timestamp: string;
+  direction: string;
+  requestId: string;
+  endpoint: string;
+  method?: string;
+  status?: number;
+  durationMs?: number;
+}
+
+interface TrafficLogTableProps {
+  logs: TrafficLogEntry[];
+  isLoading: boolean;
+}
+
+type SortKey = 'timestamp' | 'direction' | 'endpoint' | 'method' | 'status' | 'duration';
+type SortDir = 'asc' | 'desc';
+
+function SortIcon({ column, sortKey, sortDir }: { column: SortKey; sortKey: SortKey; sortDir: SortDir }) {
+  if (sortKey !== column) return <span className="ml-1 inline-block w-3" />;
+  return sortDir === 'asc' ? (
+    <ArrowUp className="ml-1 inline h-3 w-3" />
+  ) : (
+    <ArrowDown className="ml-1 inline h-3 w-3" />
+  );
+}
+
+export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoading }) => {
+  const { t } = useTranslation();
+  const [sortKey, setSortKey] = useState<SortKey>('timestamp');
+  const [sortDir, setSortDir] = useState<SortDir>('desc');
+
+  const toggleSort = (key: SortKey) => {
+    if (sortKey === key) {
+      setSortDir((prev) => (prev === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortKey(key);
+      setSortDir('asc');
+    }
+  };
+
+  const sortedLogs = useMemo(() => {
+    const dir = sortDir === 'asc' ? 1 : -1;
+    return [...logs].sort((a, b) => {
+      switch (sortKey) {
+        case 'timestamp':
+          return (new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()) * dir;
+        case 'direction':
+          return (a.direction || '').localeCompare(b.direction || '') * dir;
+        case 'endpoint':
+          return (a.endpoint || '').localeCompare(b.endpoint || '') * dir;
+        case 'method':
+          return (a.method || '').localeCompare(b.method || '') * dir;
+        case 'status': {
+          const aStatus = a.status ?? -1;
+          const bStatus = b.status ?? -1;
+          return (aStatus - bStatus) * dir;
+        }
+        case 'duration': {
+          const aDur = a.durationMs ?? -1;
+          const bDur = b.durationMs ?? -1;
+          return (aDur - bDur) * dir;
+        }
+        default:
+          return 0;
+      }
+    });
+  }, [logs, sortKey, sortDir]);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-sm font-semibold">
+          {t('proxy.advanced.trafficLog.title')}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="flex h-32 items-center justify-center">
+            <Loader2 className="h-5 w-5 animate-spin" />
+          </div>
+        ) : logs.length === 0 ? (
+          <div className="py-8 text-center text-sm text-muted-foreground">
+            {t('proxy.advanced.trafficLog.noLogs')}
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b text-left text-xs text-muted-foreground">
+                  <th
+                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
+                    onClick={() => toggleSort('timestamp')}
+                  >
+                    {t('proxy.advanced.trafficLog.timestamp')}
+                    <SortIcon column="timestamp" sortKey={sortKey} sortDir={sortDir} />
+                  </th>
+                  <th
+                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
+                    onClick={() => toggleSort('direction')}
+                  >
+                    {t('proxy.advanced.trafficLog.direction')}
+                    <SortIcon column="direction" sortKey={sortKey} sortDir={sortDir} />
+                  </th>
+                  <th
+                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
+                    onClick={() => toggleSort('endpoint')}
+                  >
+                    {t('proxy.advanced.trafficLog.endpoint')}
+                    <SortIcon column="endpoint" sortKey={sortKey} sortDir={sortDir} />
+                  </th>
+                  <th
+                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
+                    onClick={() => toggleSort('method')}
+                  >
+                    {t('proxy.advanced.trafficLog.method')}
+                    <SortIcon column="method" sortKey={sortKey} sortDir={sortDir} />
+                  </th>
+                  <th
+                    className="cursor-pointer pb-2 pr-4 font-medium select-none"
+                    onClick={() => toggleSort('status')}
+                  >
+                    {t('proxy.advanced.trafficLog.status')}
+                    <SortIcon column="status" sortKey={sortKey} sortDir={sortDir} />
+                  </th>
+                  <th
+                    className="cursor-pointer pb-2 font-medium select-none"
+                    onClick={() => toggleSort('duration')}
+                  >
+                    {t('proxy.advanced.trafficLog.duration')}
+                    <SortIcon column="duration" sortKey={sortKey} sortDir={sortDir} />
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {sortedLogs.map((log, i) => (
+                  <tr
+                    key={`${log.requestId}-${i}`}
+                    className="border-b border-border/40 last:border-0"
+                  >
+                    <td className="py-2 pr-4 font-mono text-xs text-muted-foreground">
+                      {new Date(log.timestamp).toLocaleTimeString()}
+                    </td>
+                    <td className="py-2 pr-4">
+                      <Badge
+                        variant="outline"
+                        className={
+                          log.direction === 'inbound'
+                            ? 'border-blue-500/30 text-blue-400'
+                            : log.direction === 'outbound'
+                              ? 'border-emerald-500/30 text-emerald-400'
+                              : 'border-slate-500/30 text-slate-400'
+                        }
+                      >
+                        {log.direction}
+                      </Badge>
+                    </td>
+                    <td className="py-2 pr-4 font-mono text-xs">{log.endpoint}</td>
+                    <td className="py-2 pr-4 text-xs">{log.method || '—'}</td>
+                    <td className="py-2 pr-4 text-xs">
+                      {log.status != null ? (
+                        <Badge
+                          variant={log.status >= 400 ? 'destructive' : 'secondary'}
+                          className="text-xs"
+                        >
+                          {log.status}
+                        </Badge>
+                      ) : (
+                        '—'
+                      )}
+                    </td>
+                    <td className="py-2 text-xs">
+                      {log.durationMs != null ? `${log.durationMs}ms` : '—'}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

src/components/theme-provider.tsx

@@ -1,69 +1,69 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
-import { ipc } from '@/ipc/manager';
-
-type Theme = 'dark' | 'light' | 'system';
-
-type ThemeProviderProps = {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-};
-
-type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
-  theme: 'system',
-  setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
-
-export function ThemeProvider(props: ThemeProviderProps) {
-  const { children, defaultTheme = 'system', storageKey = 'vite-ui-theme' } = props;
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
-  );
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    root.classList.remove('light', 'dark');
-
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light';
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-      ipc.client.theme.setThemeMode(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider value={value} {...props}>
-      {children}
-    </ThemeProviderContext.Provider>
-  );
-}
-
-export const useTheme = () => {
-  const context = useContext(ThemeProviderContext);
-
-  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
-
-  return context;
-};
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { ipc } from '@/ipc/manager';
+
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider(props: ThemeProviderProps) {
+  const { children, defaultTheme = 'system', storageKey = 'vite-ui-theme' } = props;
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+      ipc.client.theme.setThemeMode(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider value={value} {...props}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+  return context;
+};

src/components/toggle-theme.tsx

@@ -1,11 +1,11 @@
-import { Moon } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { toggleTheme } from '@/actions/theme';
-
-export default function ToggleTheme() {
-  return (
-    <Button onClick={toggleTheme} size="icon">
-      <Moon size={16} />
-    </Button>
-  );
-}
+import { Moon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { toggleTheme } from '@/actions/theme';
+
+export default function ToggleTheme() {
+  return (
+    <Button onClick={toggleTheme} size="icon">
+      <Moon size={16} />
+    </Button>
+  );
+}

src/components/ui/avatar.tsx

@@ -1,44 +1,44 @@
-import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { cn } from '@/lib/utils';
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn('aspect-square h-full w-full', className)}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      'bg-muted flex h-full w-full items-center justify-center rounded-full',
-      className,
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-export { Avatar, AvatarImage, AvatarFallback };
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn('aspect-square h-full w-full', className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'bg-muted flex h-full w-full items-center justify-center rounded-full',
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

src/components/ui/badge.tsx

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

src/components/ui/button.tsx

@@ -1,56 +1,56 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : 'button';
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

src/components/ui/card.tsx

@@ -1,55 +1,55 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('bg-card text-card-foreground rounded-xl border shadow', className)}
-      {...props}
-    />
-  ),
-);
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  ),
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn('leading-none font-semibold tracking-tight', className)}
-      {...props}
-    />
-  ),
-);
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
-));
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  ),
-);
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-  ),
-);
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('bg-card text-card-foreground rounded-xl border shadow', className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('leading-none font-semibold tracking-tight', className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  ),
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

src/components/ui/checkbox.tsx

@@ -1,28 +1,28 @@
-'use client';
-
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      'peer border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

src/components/ui/dialog.tsx

@@ -1,102 +1,102 @@
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Cross2Icon } from '@radix-ui/react-icons';
-
-import { cn } from '@/lib/utils';
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
-        <Cross2Icon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
-);
-DialogHeader.displayName = 'DialogHeader';
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
-    {...props}
-  />
-);
-DialogFooter.displayName = 'DialogFooter';
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg leading-none font-semibold tracking-tight', className)}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg leading-none font-semibold tracking-tight', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

src/components/ui/dropdown-menu.tsx

@@ -1,198 +1,198 @@
-import * as React from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { isNumber, isObjectLike } from 'lodash-es';
-import { Check, ChevronRight, Circle } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
-    collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
-  }
->(({ className, sideOffset = 4, collisionPadding = 8, ...props }, ref) => {
-  if (isNumber(collisionPadding)) {
-    if (collisionPadding < 0) {
-      throw new Error('collisionPadding must be a non-negative number');
-    }
-  } else if (isObjectLike(collisionPadding)) {
-    for (const key of Object.keys(collisionPadding)) {
-      if ((collisionPadding as any)[key] < 0) {
-        throw new Error(`collisionPadding.${key} must be a non-negative number`);
-      }
-    }
-  }
-
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        ref={ref}
-        sideOffset={sideOffset}
-        collisionPadding={collisionPadding}
-        className={cn(
-          'bg-popover text-popover-foreground z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          className,
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  );
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-    {...props}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
-  );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-};
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { isNumber, isObjectLike } from 'lodash-es';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    collisionPadding?: number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>>;
+  }
+>(({ className, sideOffset = 4, collisionPadding = 8, ...props }, ref) => {
+  if (isNumber(collisionPadding)) {
+    if (collisionPadding < 0) {
+      throw new Error('collisionPadding must be a non-negative number');
+    }
+  } else if (isObjectLike(collisionPadding)) {
+    for (const key of Object.keys(collisionPadding)) {
+      if ((collisionPadding as any)[key] < 0) {
+        throw new Error(`collisionPadding.${key} must be a non-negative number`);
+      }
+    }
+  }
+
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
+        className={cn(
+          'bg-popover text-popover-foreground z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

src/components/ui/input.tsx

@@ -1,23 +1,23 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Input.displayName = 'Input';
-
-export { Input };
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

src/components/ui/label.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const labelVariants = cva(
-  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const labelVariants = cva(
+  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

src/components/ui/navigation-menu.tsx

@@ -1,161 +1,161 @@
-import * as React from 'react';
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { cva } from 'class-variance-authority';
-import { ChevronDownIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-function NavigationMenu({
-  className,
-  children,
-  viewport = true,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean;
-}) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      data-viewport={viewport}
-      className={cn(
-        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      {viewport && <NavigationMenuViewport />}
-    </NavigationMenuPrimitive.Root>
-  );
-}
-
-function NavigationMenuList({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn('relative', className)}
-      {...props}
-    />
-  );
-}
-
-const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
-);
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), 'group', className)}
-      {...props}
-    >
-      {children}{' '}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  );
-}
-
-function NavigationMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuViewport({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-  return (
-    <div className={cn('absolute top-full left-0 isolate z-50 flex justify-center')}>
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        className={cn(
-          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function NavigationMenuLink({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
-        className,
-      )}
-      {...props}
-    >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-    </NavigationMenuPrimitive.Indicator>
-  );
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-};
+import * as React from 'react';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div className={cn('absolute top-full left-0 isolate z-50 flex justify-center')}>
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

src/components/ui/select.tsx

@@ -1,153 +1,153 @@
-'use client';
-
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-const Select = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn('flex cursor-default items-center justify-center py-1', className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className,
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('py-1.5 pr-2 pl-8 text-sm font-semibold', className)}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};
+'use client';
+
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pr-2 pl-8 text-sm font-semibold', className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

src/components/ui/skeleton.tsx

@@ -1,7 +1,7 @@
-import { cn } from '@/lib/utils';
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('bg-muted animate-pulse rounded-md', className)} {...props} />;
-}
-
-export { Skeleton };
+import { cn } from '@/lib/utils';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('bg-muted animate-pulse rounded-md', className)} {...props} />;
+}
+
+export { Skeleton };

src/components/ui/switch.tsx

@@ -1,26 +1,26 @@
-import * as React from 'react';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import { cn } from '@/lib/utils';
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitive.Root
-    className={cn(
-      'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitive.Thumb
-      className={cn(
-        'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
-      )}
-    />
-  </SwitchPrimitive.Root>
-));
-Switch.displayName = SwitchPrimitive.Root.displayName;
-
-export { Switch };
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from '@/lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(
+      'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

src/components/ui/tabs.tsx

@@ -1,52 +1,52 @@
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '@/lib/utils';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/components/ui/toast.tsx

@@ -1,125 +1,125 @@
-import * as React from 'react';
-import * as ToastPrimitives from '@radix-ui/react-toast';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { X } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',
-      className,
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
-  {
-    variants: {
-      variant: {
-        default: 'border bg-background text-foreground',
-        destructive:
-          'destructive group border-destructive bg-destructive text-destructive-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-);
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      'hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:ring-1 focus:outline-none disabled:pointer-events-none disabled:opacity-50',
-      className,
-    )}
-    {...props}
-  />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      'text-foreground/50 hover:text-foreground absolute top-1 right-1 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:ring-1 focus:outline-none group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn('text-sm font-semibold [&+div]:text-xs', className)}
-    {...props}
-  />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn('text-sm opacity-90', className)}
-    {...props}
-  />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-};
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      'hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:ring-1 focus:outline-none disabled:pointer-events-none disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      'text-foreground/50 hover:text-foreground absolute top-1 right-1 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:ring-1 focus:outline-none group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn('text-sm font-semibold [&+div]:text-xs', className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn('text-sm opacity-90', className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

src/components/ui/toaster.tsx

@@ -1,31 +1,31 @@
-import { useToast } from '@/components/ui/use-toast';
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from '@/components/ui/toast';
-
-export function Toaster() {
-  const { toasts } = useToast();
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title ? <ToastTitle>{title}</ToastTitle> : null}
-              {description ? <ToastDescription>{description}</ToastDescription> : null}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}
+import { useToast } from '@/components/ui/use-toast';
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from '@/components/ui/toast';
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title ? <ToastTitle>{title}</ToastTitle> : null}
+              {description ? <ToastDescription>{description}</ToastDescription> : null}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}

src/components/ui/toggle-group.tsx

@@ -1,69 +1,69 @@
-'use client';
-
-import * as React from 'react';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-import { toggleVariants } from '@/components/ui/toggle';
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  size: 'default',
-  variant: 'default',
-});
-
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  return (
-    <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      className={cn(
-        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
-        className,
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
-}
-
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-}
-
-export { ToggleGroup, ToggleGroupItem };
+'use client';
+
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+import { toggleVariants } from '@/components/ui/toggle';
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+});
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

src/components/ui/toggle.tsx

@@ -1,44 +1,44 @@
-import * as React from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/lib/utils';
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline:
-          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-);
-
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  return (
-    <TogglePrimitive.Root
-      data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-export { Toggle, toggleVariants };
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

src/components/ui/tooltip.tsx

@@ -1,28 +1,28 @@
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-
-import { cn } from '@/lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-[--radix-tooltip-content-transform-origin] overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/components/ui/use-toast.ts

@@ -1,185 +1,185 @@
-import * as React from 'react';
-import { Toast, ToastActionElement, ToastProps } from '@/components/ui/toast';
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: 'ADD_TOAST',
-  UPDATE_TOAST: 'UPDATE_TOAST',
-  DISMISS_TOAST: 'DISMISS_TOAST',
-  REMOVE_TOAST: 'REMOVE_TOAST',
-} as const;
-
-let count = 0;
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-  | {
-      type: ActionType['ADD_TOAST'];
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType['UPDATE_TOAST'];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType['DISMISS_TOAST'];
-      toastId?: ToasterToast['id'];
-    }
-  | {
-      type: ActionType['REMOVE_TOAST'];
-      toastId?: ToasterToast['id'];
-    };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: 'REMOVE_TOAST',
-      toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'ADD_TOAST':
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
-
-    case 'UPDATE_TOAST':
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-      };
-
-    case 'DISMISS_TOAST': {
-      const { toastId } = action;
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
-        ),
-      };
-    }
-    case 'REMOVE_TOAST':
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-}
-
-type Toast = Omit<ToasterToast, 'id'>;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: 'UPDATE_TOAST',
-      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
-
-  dispatch({
-    type: 'ADD_TOAST',
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-
-  return {
-    id,
-    dismiss,
-    update,
-  };
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
-
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
-  };
-}
-
-export { useToast, toast };
+import * as React from 'react';
+import { Toast, ToastActionElement, ToastProps } from '@/components/ui/toast';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
+    }
+  | {
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, 'id'>;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
+  };
+}
+
+export { useToast, toast };

src/components/usage/ChartCard.tsx

@@ -1,67 +1,67 @@
-import React from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Button } from '@/components/ui/button';
-import { AlertTriangle, BarChart3, RotateCcw } from 'lucide-react';
-
-interface ChartStatesProps {
-  isLoading: boolean;
-  error: Error | null;
-  isEmpty: boolean;
-  onRetry: () => void;
-  title: string;
-  emptyTitle: string;
-  emptyDescription: string;
-  errorMessage: string;
-  retryLabel: string;
-  children: React.ReactNode;
-}
-
-export const ChartCard: React.FC<ChartStatesProps> = ({
-  isLoading,
-  error,
-  isEmpty,
-  onRetry,
-  title,
-  emptyTitle,
-  emptyDescription,
-  errorMessage,
-  retryLabel,
-  children,
-}) => {
-  return (
-    <Card className="border-border/60 bg-card/60 flex flex-col">
-      <CardContent className="flex flex-1 flex-col p-4">
-        <div className="mb-3 flex items-center justify-between">
-          <h3 className="text-foreground text-sm font-semibold tracking-tight">{title}</h3>
-        </div>
-        <div className="flex-1">
-          {isLoading ? (
-            <div className="flex h-[280px] flex-col gap-3">
-              <Skeleton className="h-full w-full" />
-            </div>
-          ) : error ? (
-            <div className="flex h-[280px] flex-col items-center justify-center gap-3">
-              <AlertTriangle className="text-destructive h-5 w-5" />
-              <p className="text-muted-foreground text-sm">{errorMessage}</p>
-              <Button variant="outline" size="sm" onClick={onRetry}>
-                <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
-                {retryLabel}
-              </Button>
-            </div>
-          ) : isEmpty ? (
-            <div className="flex h-[280px] flex-col items-center justify-center gap-2">
-              <BarChart3 className="text-muted-foreground/50 h-6 w-6" />
-              <p className="text-foreground text-sm font-medium">{emptyTitle}</p>
-              <p className="text-muted-foreground max-w-[240px] text-center text-xs">
-                {emptyDescription}
-              </p>
-            </div>
-          ) : (
-            children
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
+import React from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, BarChart3, RotateCcw } from 'lucide-react';
+
+interface ChartStatesProps {
+  isLoading: boolean;
+  error: Error | null;
+  isEmpty: boolean;
+  onRetry: () => void;
+  title: string;
+  emptyTitle: string;
+  emptyDescription: string;
+  errorMessage: string;
+  retryLabel: string;
+  children: React.ReactNode;
+}
+
+export const ChartCard: React.FC<ChartStatesProps> = ({
+  isLoading,
+  error,
+  isEmpty,
+  onRetry,
+  title,
+  emptyTitle,
+  emptyDescription,
+  errorMessage,
+  retryLabel,
+  children,
+}) => {
+  return (
+    <Card className="border-border/60 bg-card/60 flex flex-col">
+      <CardContent className="flex flex-1 flex-col p-4">
+        <div className="mb-3 flex items-center justify-between">
+          <h3 className="text-foreground text-sm font-semibold tracking-tight">{title}</h3>
+        </div>
+        <div className="flex-1">
+          {isLoading ? (
+            <div className="flex h-[280px] flex-col gap-3">
+              <Skeleton className="h-full w-full" />
+            </div>
+          ) : error ? (
+            <div className="flex h-[280px] flex-col items-center justify-center gap-3">
+              <AlertTriangle className="text-destructive h-5 w-5" />
+              <p className="text-muted-foreground text-sm">{errorMessage}</p>
+              <Button variant="outline" size="sm" onClick={onRetry}>
+                <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
+                {retryLabel}
+              </Button>
+            </div>
+          ) : isEmpty ? (
+            <div className="flex h-[280px] flex-col items-center justify-center gap-2">
+              <BarChart3 className="text-muted-foreground/50 h-6 w-6" />
+              <p className="text-foreground text-sm font-medium">{emptyTitle}</p>
+              <p className="text-muted-foreground max-w-[240px] text-center text-xs">
+                {emptyDescription}
+              </p>
+            </div>
+          ) : (
+            children
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

src/components/usage/NivoTooltip.tsx

@@ -1,60 +1,60 @@
-export const COLOR_PROMPT = 'var(--chart-2)';
-export const COLOR_COMPLETION = 'var(--chart-1)';
-export const COLOR_TOTAL = 'var(--chart-3)';
-export const PIE_COLORS = [
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
-  'var(--chart-4)',
-  'var(--chart-5)',
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
-];
-
-const colorMap: Record<string, string> = {
-  Prompt: COLOR_PROMPT,
-  Completion: COLOR_COMPLETION,
-  Total: COLOR_TOTAL,
-};
-
-export function BarTooltip({ indexValue, data }: any) {
-  const keys = Object.keys(data).filter((k: string) => k !== 'name' && colorMap[k]);
-
-  return (
-    <div className="bg-popover border-border rounded-md border px-3 py-2 shadow-md">
-      <p className="text-foreground mb-1.5 text-xs font-medium">{indexValue}</p>
-      <div className="flex flex-col gap-1">
-        {keys.map((key: string) => (
-          <div key={key} className="flex items-center gap-2 text-xs">
-            <span
-              className="h-2 w-2 rounded-full"
-              style={{ backgroundColor: colorMap[key] }}
-            />
-            <span className="text-muted-foreground">{key}:</span>
-            <span className="text-foreground font-mono font-medium">
-              {typeof data[key] === 'number' ? data[key].toLocaleString() : data[key]}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export function PieTooltip({ datum }: any) {
-  return (
-    <div className="bg-popover border-border rounded-md border px-3 py-2 shadow-md">
-      <div className="flex items-center gap-2 text-xs">
-        <span
-          className="h-2 w-2 rounded-full"
-          style={{ backgroundColor: datum.color }}
-        />
-        <span className="text-muted-foreground">{datum.id}:</span>
-        <span className="text-foreground font-mono font-medium">
-          {typeof datum.value === 'number' ? datum.value.toLocaleString() : datum.value}
-        </span>
-      </div>
-    </div>
-  );
-}
+export const COLOR_PROMPT = 'var(--chart-2)';
+export const COLOR_COMPLETION = 'var(--chart-1)';
+export const COLOR_TOTAL = 'var(--chart-3)';
+export const PIE_COLORS = [
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+];
+
+const colorMap: Record<string, string> = {
+  Prompt: COLOR_PROMPT,
+  Completion: COLOR_COMPLETION,
+  Total: COLOR_TOTAL,
+};
+
+export function BarTooltip({ indexValue, data }: any) {
+  const keys = Object.keys(data).filter((k: string) => k !== 'name' && colorMap[k]);
+
+  return (
+    <div className="bg-popover border-border rounded-md border px-3 py-2 shadow-md">
+      <p className="text-foreground mb-1.5 text-xs font-medium">{indexValue}</p>
+      <div className="flex flex-col gap-1">
+        {keys.map((key: string) => (
+          <div key={key} className="flex items-center gap-2 text-xs">
+            <span
+              className="h-2 w-2 rounded-full"
+              style={{ backgroundColor: colorMap[key] }}
+            />
+            <span className="text-muted-foreground">{key}:</span>
+            <span className="text-foreground font-mono font-medium">
+              {typeof data[key] === 'number' ? data[key].toLocaleString() : data[key]}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function PieTooltip({ datum }: any) {
+  return (
+    <div className="bg-popover border-border rounded-md border px-3 py-2 shadow-md">
+      <div className="flex items-center gap-2 text-xs">
+        <span
+          className="h-2 w-2 rounded-full"
+          style={{ backgroundColor: datum.color }}
+        />
+        <span className="text-muted-foreground">{datum.id}:</span>
+        <span className="text-foreground font-mono font-medium">
+          {typeof datum.value === 'number' ? datum.value.toLocaleString() : datum.value}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/usage/StatCard.tsx

@@ -1,71 +1,71 @@
-import React from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-import { cn } from '@/lib/utils';
-import type { LucideIcon } from 'lucide-react';
-
-interface StatCardProps {
-  label: string;
-  value: number | string;
-  icon: LucideIcon;
-  isLoading?: boolean;
-  className?: string;
-  accent?: 'blue' | 'green' | 'amber' | 'slate' | 'purple';
-}
-
-const ACCENT_MAP = {
-  blue: 'text-blue-400',
-  green: 'text-emerald-400',
-  amber: 'text-amber-400',
-  slate: 'text-slate-400',
-  purple: 'text-purple-400',
-};
-
-const BG_MAP = {
-  blue: 'bg-blue-500/5',
-  green: 'bg-emerald-500/5',
-  amber: 'bg-amber-500/5',
-  slate: 'bg-slate-500/5',
-  purple: 'bg-purple-500/5',
-};
-
-export const StatCard: React.FC<StatCardProps> = ({
-  label,
-  value,
-  icon: Icon,
-  isLoading,
-  className,
-  accent = 'slate',
-}) => {
-  return (
-    <Card
-      className={cn(
-        'border-border/60 bg-card/60 hover:bg-card backdrop-blur-none transition-colors',
-        className,
-      )}
-    >
-      <CardContent className="flex items-center justify-between p-4">
-        <div className="flex flex-col gap-1">
-          <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
-            {label}
-          </span>
-          {isLoading ? (
-            <Skeleton className="h-7 w-24" />
-          ) : (
-            <span className="text-foreground font-mono text-2xl font-semibold tracking-tight">
-              {typeof value === 'number' ? value.toLocaleString() : value}
-            </span>
-          )}
-        </div>
-        <div
-          className={cn(
-            'flex h-9 w-9 shrink-0 items-center justify-center rounded-md',
-            BG_MAP[accent],
-          )}
-        >
-          <Icon className={cn('h-4 w-4', ACCENT_MAP[accent])} />
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
+import React from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { cn } from '@/lib/utils';
+import type { LucideIcon } from 'lucide-react';
+
+interface StatCardProps {
+  label: string;
+  value: number | string;
+  icon: LucideIcon;
+  isLoading?: boolean;
+  className?: string;
+  accent?: 'blue' | 'green' | 'amber' | 'slate' | 'purple';
+}
+
+const ACCENT_MAP = {
+  blue: 'text-blue-400',
+  green: 'text-emerald-400',
+  amber: 'text-amber-400',
+  slate: 'text-slate-400',
+  purple: 'text-purple-400',
+};
+
+const BG_MAP = {
+  blue: 'bg-blue-500/5',
+  green: 'bg-emerald-500/5',
+  amber: 'bg-amber-500/5',
+  slate: 'bg-slate-500/5',
+  purple: 'bg-purple-500/5',
+};
+
+export const StatCard: React.FC<StatCardProps> = ({
+  label,
+  value,
+  icon: Icon,
+  isLoading,
+  className,
+  accent = 'slate',
+}) => {
+  return (
+    <Card
+      className={cn(
+        'border-border/60 bg-card/60 hover:bg-card backdrop-blur-none transition-colors',
+        className,
+      )}
+    >
+      <CardContent className="flex items-center justify-between p-4">
+        <div className="flex flex-col gap-1">
+          <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+            {label}
+          </span>
+          {isLoading ? (
+            <Skeleton className="h-7 w-24" />
+          ) : (
+            <span className="text-foreground font-mono text-2xl font-semibold tracking-tight">
+              {typeof value === 'number' ? value.toLocaleString() : value}
+            </span>
+          )}
+        </div>
+        <div
+          className={cn(
+            'flex h-9 w-9 shrink-0 items-center justify-center rounded-md',
+            BG_MAP[accent],
+          )}
+        >
+          <Icon className={cn('h-4 w-4', ACCENT_MAP[accent])} />
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

src/constants/index.ts

@@ -1,9 +1,9 @@
-export const LOCAL_STORAGE_KEYS = {
-  LANGUAGE: 'lang',
-  THEME: 'theme',
-};
-
-export const IPC_CHANNELS = {
-  START_ORPC_SERVER: 'start-orpc-server',
-  CHANGE_LANGUAGE: 'change-language',
-};
+export const LOCAL_STORAGE_KEYS = {
+  LANGUAGE: 'lang',
+  THEME: 'theme',
+};
+
+export const IPC_CHANNELS = {
+  START_ORPC_SERVER: 'start-orpc-server',
+  CHANGE_LANGUAGE: 'change-language',
+};

src/hooks/useAppConfig.ts

@@ -1,131 +1,131 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useTranslation } from 'react-i18next';
-
-import { toast } from '@/components/ui/use-toast';
-import { ipc } from '@/ipc/manager';
-import { AppConfig } from '@/types/config';
-
-const SAVE_DEBOUNCE_MS = 400;
-
-export function useAppConfig() {
-  const { t } = useTranslation();
-  const queryClient = useQueryClient();
-
-  const {
-    data: config,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ['appConfig'],
-    queryFn: async () => {
-      return (await ipc.client.config.load()) as AppConfig;
-    },
-  });
-
-  const updateConfig = useMutation({
-    mutationFn: async (newConfig: AppConfig) => {
-      await ipc.client.config.save(newConfig);
-      return newConfig;
-    },
-  });
-
-  const latestConfigRef = useRef<AppConfig | null>(null);
-  const lastStableConfigRef = useRef<AppConfig | null>(null);
-  const pendingResolversRef = useRef<
-    Array<{ resolve: () => void; reject: (error: Error) => void }>
-  >([]);
-  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    if (config) {
-      lastStableConfigRef.current = config;
-    }
-  }, [config]);
-
-  const flushPendingSave = useCallback(async () => {
-    const pendingBatch = pendingResolversRef.current.splice(0);
-    const nextConfig = latestConfigRef.current;
-    if (!nextConfig) {
-      for (const item of pendingBatch) {
-        item.resolve();
-      }
-      return;
-    }
-
-    try {
-      const savedConfig = await updateConfig.mutateAsync(nextConfig);
-      queryClient.setQueryData(['appConfig'], savedConfig);
-      lastStableConfigRef.current = savedConfig;
-      toast({
-        title: t('settings.toast.saved.title'),
-        description: t('settings.toast.saved.description'),
-      });
-      for (const item of pendingBatch) {
-        item.resolve();
-      }
-    } catch (err) {
-      const error = err instanceof Error ? err : new Error('Failed to save settings');
-      const fallback = lastStableConfigRef.current;
-      if (fallback) {
-        queryClient.setQueryData(['appConfig'], fallback);
-      } else {
-        queryClient.invalidateQueries({ queryKey: ['appConfig'] });
-      }
-      toast({
-        title: t('settings.toast.saveFailed.title'),
-        description: error.message,
-        variant: 'destructive',
-      });
-      for (const item of pendingBatch) {
-        item.reject(error);
-      }
-    }
-  }, [queryClient, t, updateConfig]);
-
-  const saveConfig = useCallback(
-    (newConfig: AppConfig) => {
-      latestConfigRef.current = newConfig;
-      queryClient.setQueryData(['appConfig'], newConfig);
-
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-
-      return new Promise<void>((resolve, reject) => {
-        pendingResolversRef.current.push({ resolve, reject });
-        debounceTimerRef.current = setTimeout(() => {
-          debounceTimerRef.current = null;
-          flushPendingSave();
-        }, SAVE_DEBOUNCE_MS);
-      });
-    },
-    [flushPendingSave, queryClient],
-  );
-
-  useEffect(() => {
-    const handleBeforeUnload = () => {
-      if (!debounceTimerRef.current) {
-        return;
-      }
-      clearTimeout(debounceTimerRef.current);
-      debounceTimerRef.current = null;
-      void flushPendingSave();
-    };
-
-    window.addEventListener('beforeunload', handleBeforeUnload);
-    return () => {
-      window.removeEventListener('beforeunload', handleBeforeUnload);
-      handleBeforeUnload();
-    };
-  }, [flushPendingSave]);
-
-  return {
-    config,
-    isLoading,
-    error,
-    saveConfig,
-    isSaving: updateConfig.isPending,
-  };
-}
+import { useCallback, useEffect, useRef } from 'react';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { toast } from '@/components/ui/use-toast';
+import { ipc } from '@/ipc/manager';
+import { AppConfig } from '@/types/config';
+
+const SAVE_DEBOUNCE_MS = 400;
+
+export function useAppConfig() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const {
+    data: config,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ['appConfig'],
+    queryFn: async () => {
+      return (await ipc.client.config.load()) as AppConfig;
+    },
+  });
+
+  const updateConfig = useMutation({
+    mutationFn: async (newConfig: AppConfig) => {
+      await ipc.client.config.save(newConfig);
+      return newConfig;
+    },
+  });
+
+  const latestConfigRef = useRef<AppConfig | null>(null);
+  const lastStableConfigRef = useRef<AppConfig | null>(null);
+  const pendingResolversRef = useRef<
+    Array<{ resolve: () => void; reject: (error: Error) => void }>
+  >([]);
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (config) {
+      lastStableConfigRef.current = config;
+    }
+  }, [config]);
+
+  const flushPendingSave = useCallback(async () => {
+    const pendingBatch = pendingResolversRef.current.splice(0);
+    const nextConfig = latestConfigRef.current;
+    if (!nextConfig) {
+      for (const item of pendingBatch) {
+        item.resolve();
+      }
+      return;
+    }
+
+    try {
+      const savedConfig = await updateConfig.mutateAsync(nextConfig);
+      queryClient.setQueryData(['appConfig'], savedConfig);
+      lastStableConfigRef.current = savedConfig;
+      toast({
+        title: t('settings.toast.saved.title'),
+        description: t('settings.toast.saved.description'),
+      });
+      for (const item of pendingBatch) {
+        item.resolve();
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to save settings');
+      const fallback = lastStableConfigRef.current;
+      if (fallback) {
+        queryClient.setQueryData(['appConfig'], fallback);
+      } else {
+        queryClient.invalidateQueries({ queryKey: ['appConfig'] });
+      }
+      toast({
+        title: t('settings.toast.saveFailed.title'),
+        description: error.message,
+        variant: 'destructive',
+      });
+      for (const item of pendingBatch) {
+        item.reject(error);
+      }
+    }
+  }, [queryClient, t, updateConfig]);
+
+  const saveConfig = useCallback(
+    (newConfig: AppConfig) => {
+      latestConfigRef.current = newConfig;
+      queryClient.setQueryData(['appConfig'], newConfig);
+
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+
+      return new Promise<void>((resolve, reject) => {
+        pendingResolversRef.current.push({ resolve, reject });
+        debounceTimerRef.current = setTimeout(() => {
+          debounceTimerRef.current = null;
+          flushPendingSave();
+        }, SAVE_DEBOUNCE_MS);
+      });
+    },
+    [flushPendingSave, queryClient],
+  );
+
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      if (!debounceTimerRef.current) {
+        return;
+      }
+      clearTimeout(debounceTimerRef.current);
+      debounceTimerRef.current = null;
+      void flushPendingSave();
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      handleBeforeUnload();
+    };
+  }, [flushPendingSave]);
+
+  return {
+    config,
+    isLoading,
+    error,
+    saveConfig,
+    isSaving: updateConfig.isPending,
+  };
+}

src/hooks/useCloudAccounts.ts

@@ -1,183 +1,183 @@
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import {
-  listCloudAccounts,
-  addGoogleAccount,
-  deleteCloudAccount,
-  refreshAccountQuota,
-  setAccountProxy,
-  listOAuthClients,
-  setActiveOAuthClient,
-  type OAuthClientDescriptor,
-} from '@/actions/cloud';
-import { CloudAccount } from '@/types/cloudAccount';
-
-export const QUERY_KEYS = {
-  cloudAccounts: ['cloudAccounts'],
-  oauthClients: ['oauthClients'],
-};
-
-export function useCloudAccounts() {
-  return useQuery<CloudAccount[]>({
-    queryKey: QUERY_KEYS.cloudAccounts,
-    queryFn: listCloudAccounts,
-    staleTime: 1000 * 60, // 1 minute
-  });
-}
-
-export function useAddGoogleAccount() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: addGoogleAccount,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
-    },
-  });
-}
-
-export function useOAuthClients() {
-  return useQuery<OAuthClientDescriptor[]>({
-    queryKey: QUERY_KEYS.oauthClients,
-    queryFn: listOAuthClients,
-    staleTime: 1000 * 60 * 5,
-  });
-}
-
-export function useSetActiveOAuthClient() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: setActiveOAuthClient,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.oauthClients });
-    },
-  });
-}
-
-export function useDeleteCloudAccount() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: deleteCloudAccount,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
-    },
-  });
-}
-
-export function useRefreshQuota() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: refreshAccountQuota,
-    onSuccess: (updatedAccount: CloudAccount) => {
-      // Optimistically update
-      queryClient.setQueryData(QUERY_KEYS.cloudAccounts, (oldData: CloudAccount[] | undefined) => {
-        if (!oldData) return [updatedAccount];
-        return oldData.map((acc) => (acc.id === updatedAccount.id ? updatedAccount : acc));
-      });
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
-    },
-  });
-}
-
-import {
-  switchCloudAccount,
-  getAutoSwitchEnabled,
-  setAutoSwitchEnabled,
-  forcePollCloudMonitor,
-} from '@/actions/cloud';
-
-export function useSwitchCloudAccount() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: switchCloudAccount,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
-      queryClient.invalidateQueries({ queryKey: ['currentAccount'] });
-    },
-  });
-}
-
-export const AUTO_SWITCH_KEY = ['autoSwitchEnabled'];
-
-export function useAutoSwitchEnabled() {
-  return useQuery<boolean>({
-    queryKey: AUTO_SWITCH_KEY,
-    queryFn: getAutoSwitchEnabled,
-    staleTime: Infinity, // Settings don't change often unless we change them
-  });
-}
-
-export function useSetAutoSwitchEnabled() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: setAutoSwitchEnabled,
-    onSuccess: (_, variables) => {
-      queryClient.setQueryData(AUTO_SWITCH_KEY, variables.enabled);
-    },
-  });
-}
-
-export function useForcePollCloudMonitor() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: forcePollCloudMonitor,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
-    },
-  });
-}
-
-import { syncLocalAccount } from '@/actions/cloud';
-
-export function useSyncLocalAccount() {
-  const queryClient = useQueryClient();
-  return useMutation<CloudAccount | null, Error, void>({
-    mutationFn: syncLocalAccount,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
-    },
-  });
-}
-
-import { startAuthFlow } from '@/actions/cloud';
-export { startAuthFlow };
-
-export function useSetAccountProxy() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: setAccountProxy,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
-    },
-    onError: (error: unknown) => {
-      console.error('[Mutation] setAccountProxy failed:', error);
-    },
-  });
-}
-
-import { exportCloudAccounts, importCloudAccounts } from '@/actions/cloud';
-
-export function useExportCloudAccounts() {
-  return useMutation<string, Error, { stripTokens?: boolean }>({
-    mutationFn: exportCloudAccounts,
-  });
-}
-
-export function useImportCloudAccounts() {
-  const queryClient = useQueryClient();
-  return useMutation<
-    { imported: number; skipped: number; updated: number; errors: string[] },
-    Error,
-    { jsonContent: string; strategy?: 'merge' | 'overwrite' | 'skip-existing' }
-  >({
-    mutationFn: importCloudAccounts,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
-    },
-    onError: (error: unknown) => {
-      console.error('[Mutation] importCloudAccounts failed:', error);
-    },
-  });
-}
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  listCloudAccounts,
+  addGoogleAccount,
+  deleteCloudAccount,
+  refreshAccountQuota,
+  setAccountProxy,
+  listOAuthClients,
+  setActiveOAuthClient,
+  type OAuthClientDescriptor,
+} from '@/actions/cloud';
+import { CloudAccount } from '@/types/cloudAccount';
+
+export const QUERY_KEYS = {
+  cloudAccounts: ['cloudAccounts'],
+  oauthClients: ['oauthClients'],
+};
+
+export function useCloudAccounts() {
+  return useQuery<CloudAccount[]>({
+    queryKey: QUERY_KEYS.cloudAccounts,
+    queryFn: listCloudAccounts,
+    staleTime: 1000 * 60, // 1 minute
+  });
+}
+
+export function useAddGoogleAccount() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: addGoogleAccount,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
+    },
+  });
+}
+
+export function useOAuthClients() {
+  return useQuery<OAuthClientDescriptor[]>({
+    queryKey: QUERY_KEYS.oauthClients,
+    queryFn: listOAuthClients,
+    staleTime: 1000 * 60 * 5,
+  });
+}
+
+export function useSetActiveOAuthClient() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: setActiveOAuthClient,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.oauthClients });
+    },
+  });
+}
+
+export function useDeleteCloudAccount() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteCloudAccount,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
+    },
+  });
+}
+
+export function useRefreshQuota() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: refreshAccountQuota,
+    onSuccess: (updatedAccount: CloudAccount) => {
+      // Optimistically update
+      queryClient.setQueryData(QUERY_KEYS.cloudAccounts, (oldData: CloudAccount[] | undefined) => {
+        if (!oldData) return [updatedAccount];
+        return oldData.map((acc) => (acc.id === updatedAccount.id ? updatedAccount : acc));
+      });
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
+    },
+  });
+}
+
+import {
+  switchCloudAccount,
+  getAutoSwitchEnabled,
+  setAutoSwitchEnabled,
+  forcePollCloudMonitor,
+} from '@/actions/cloud';
+
+export function useSwitchCloudAccount() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: switchCloudAccount,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
+      queryClient.invalidateQueries({ queryKey: ['currentAccount'] });
+    },
+  });
+}
+
+export const AUTO_SWITCH_KEY = ['autoSwitchEnabled'];
+
+export function useAutoSwitchEnabled() {
+  return useQuery<boolean>({
+    queryKey: AUTO_SWITCH_KEY,
+    queryFn: getAutoSwitchEnabled,
+    staleTime: Infinity, // Settings don't change often unless we change them
+  });
+}
+
+export function useSetAutoSwitchEnabled() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: setAutoSwitchEnabled,
+    onSuccess: (_, variables) => {
+      queryClient.setQueryData(AUTO_SWITCH_KEY, variables.enabled);
+    },
+  });
+}
+
+export function useForcePollCloudMonitor() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: forcePollCloudMonitor,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
+    },
+  });
+}
+
+import { syncLocalAccount } from '@/actions/cloud';
+
+export function useSyncLocalAccount() {
+  const queryClient = useQueryClient();
+  return useMutation<CloudAccount | null, Error, void>({
+    mutationFn: syncLocalAccount,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
+    },
+  });
+}
+
+import { startAuthFlow } from '@/actions/cloud';
+export { startAuthFlow };
+
+export function useSetAccountProxy() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: setAccountProxy,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
+    },
+    onError: (error: unknown) => {
+      console.error('[Mutation] setAccountProxy failed:', error);
+    },
+  });
+}
+
+import { exportCloudAccounts, importCloudAccounts } from '@/actions/cloud';
+
+export function useExportCloudAccounts() {
+  return useMutation<string, Error, { stripTokens?: boolean }>({
+    mutationFn: exportCloudAccounts,
+  });
+}
+
+export function useImportCloudAccounts() {
+  const queryClient = useQueryClient();
+  return useMutation<
+    { imported: number; skipped: number; updated: number; errors: string[] },
+    Error,
+    { jsonContent: string; strategy?: 'merge' | 'overwrite' | 'skip-existing' }
+  >({
+    mutationFn: importCloudAccounts,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
+    },
+    onError: (error: unknown) => {
+      console.error('[Mutation] importCloudAccounts failed:', error);
+    },
+  });
+}

src/hooks/useProviderGrouping.ts

@@ -1,86 +1,86 @@
-import { useState, useMemo, useCallback } from 'react';
-
-import { useAppConfig } from '@/hooks/useAppConfig';
-import { CloudAccount } from '@/types/cloudAccount';
-import { groupModelsByProvider, type AccountStats } from '@/utils/provider-grouping';
-
-export interface UseProviderGroupingResult {
-  enabled: boolean;
-  getAccountStats: (account: CloudAccount) => AccountStats;
-  isProviderCollapsed: (accountId: string, providerKey: string) => boolean;
-  toggleProviderCollapse: (accountId: string, providerKey: string) => void;
-  isAccountCollapsed: (accountId: string) => boolean;
-  toggleAccountCollapse: (accountId: string) => void;
-}
-
-export function useProviderGrouping(): UseProviderGroupingResult {
-  const { config } = useAppConfig();
-
-  // Collapse state is managed locally per session for responsive toggling.
-  // Provider groups default to expanded on each page load.
-  const [collapsedProviders, setCollapsedProviders] = useState<Record<string, string[]>>({});
-  const [collapsedAccounts, setCollapsedAccounts] = useState<string[]>([]);
-
-  const enabled = config?.provider_groupings_enabled ?? false;
-  const visibilitySettings = config?.model_visibility ?? {};
-
-  const getAccountStats = useCallback(
-    (account: CloudAccount): AccountStats => {
-      const models = account.quota?.models ?? {};
-      return groupModelsByProvider(models, visibilitySettings);
-    },
-    [visibilitySettings],
-  );
-
-  const isProviderCollapsed = useCallback(
-    (accountId: string, providerKey: string): boolean => {
-      return collapsedProviders[accountId]?.includes(providerKey) ?? false;
-    },
-    [collapsedProviders],
-  );
-
-  const toggleProviderCollapse = useCallback((accountId: string, providerKey: string): void => {
-    setCollapsedProviders((prev) => {
-      const accountCollapsed = prev[accountId] ?? [];
-      const isCollapsed = accountCollapsed.includes(providerKey);
-      return {
-        ...prev,
-        [accountId]: isCollapsed
-          ? accountCollapsed.filter((k) => k !== providerKey)
-          : [...accountCollapsed, providerKey],
-      };
-    });
-  }, []);
-
-  const isAccountCollapsed = useCallback(
-    (accountId: string): boolean => {
-      return collapsedAccounts.includes(accountId);
-    },
-    [collapsedAccounts],
-  );
-
-  const toggleAccountCollapse = useCallback((accountId: string): void => {
-    setCollapsedAccounts((prev) =>
-      prev.includes(accountId) ? prev.filter((id) => id !== accountId) : [...prev, accountId],
-    );
-  }, []);
-
-  return useMemo(
-    () => ({
-      enabled,
-      getAccountStats,
-      isProviderCollapsed,
-      toggleProviderCollapse,
-      isAccountCollapsed,
-      toggleAccountCollapse,
-    }),
-    [
-      enabled,
-      getAccountStats,
-      isProviderCollapsed,
-      toggleProviderCollapse,
-      isAccountCollapsed,
-      toggleAccountCollapse,
-    ],
-  );
-}
+import { useState, useMemo, useCallback } from 'react';
+
+import { useAppConfig } from '@/hooks/useAppConfig';
+import { CloudAccount } from '@/types/cloudAccount';
+import { groupModelsByProvider, type AccountStats } from '@/utils/provider-grouping';
+
+export interface UseProviderGroupingResult {
+  enabled: boolean;
+  getAccountStats: (account: CloudAccount) => AccountStats;
+  isProviderCollapsed: (accountId: string, providerKey: string) => boolean;
+  toggleProviderCollapse: (accountId: string, providerKey: string) => void;
+  isAccountCollapsed: (accountId: string) => boolean;
+  toggleAccountCollapse: (accountId: string) => void;
+}
+
+export function useProviderGrouping(): UseProviderGroupingResult {
+  const { config } = useAppConfig();
+
+  // Collapse state is managed locally per session for responsive toggling.
+  // Provider groups default to expanded on each page load.
+  const [collapsedProviders, setCollapsedProviders] = useState<Record<string, string[]>>({});
+  const [collapsedAccounts, setCollapsedAccounts] = useState<string[]>([]);
+
+  const enabled = config?.provider_groupings_enabled ?? false;
+  const visibilitySettings = config?.model_visibility ?? {};
+
+  const getAccountStats = useCallback(
+    (account: CloudAccount): AccountStats => {
+      const models = account.quota?.models ?? {};
+      return groupModelsByProvider(models, visibilitySettings);
+    },
+    [visibilitySettings],
+  );
+
+  const isProviderCollapsed = useCallback(
+    (accountId: string, providerKey: string): boolean => {
+      return collapsedProviders[accountId]?.includes(providerKey) ?? false;
+    },
+    [collapsedProviders],
+  );
+
+  const toggleProviderCollapse = useCallback((accountId: string, providerKey: string): void => {
+    setCollapsedProviders((prev) => {
+      const accountCollapsed = prev[accountId] ?? [];
+      const isCollapsed = accountCollapsed.includes(providerKey);
+      return {
+        ...prev,
+        [accountId]: isCollapsed
+          ? accountCollapsed.filter((k) => k !== providerKey)
+          : [...accountCollapsed, providerKey],
+      };
+    });
+  }, []);
+
+  const isAccountCollapsed = useCallback(
+    (accountId: string): boolean => {
+      return collapsedAccounts.includes(accountId);
+    },
+    [collapsedAccounts],
+  );
+
+  const toggleAccountCollapse = useCallback((accountId: string): void => {
+    setCollapsedAccounts((prev) =>
+      prev.includes(accountId) ? prev.filter((id) => id !== accountId) : [...prev, accountId],
+    );
+  }, []);
+
+  return useMemo(
+    () => ({
+      enabled,
+      getAccountStats,
+      isProviderCollapsed,
+      toggleProviderCollapse,
+      isAccountCollapsed,
+      toggleAccountCollapse,
+    }),
+    [
+      enabled,
+      getAccountStats,
+      isProviderCollapsed,
+      toggleProviderCollapse,
+      isAccountCollapsed,
+      toggleAccountCollapse,
+    ],
+  );
+}

src/instrument.ts

@@ -1,60 +1,60 @@
-import { app } from 'electron';
-import * as Sentry from '@sentry/electron/main';
-import path from 'path';
-import fs from 'fs';
-import { getAppDataDir } from './utils/paths';
-import { logger } from './utils/logger';
-
-function getQuickConfig() {
-  try {
-    const configPath = path.join(getAppDataDir(), 'gui_config.json');
-    if (fs.existsSync(configPath)) {
-      const content = fs.readFileSync(configPath, 'utf-8');
-      const config = JSON.parse(content);
-      // Default to false (privacy by default)
-      return config.error_reporting_enabled;
-    }
-  } catch (e) {
-    logger.error('Failed to read config for Sentry init:', e);
-  }
-  return false;
-}
-
-if (getQuickConfig()) {
-  Sentry.init({
-    dsn: process.env.SENTRY_DSN,
-    release: `gemini-nexus@${app.getVersion()}`,
-    beforeSend(event) {
-      if (event.exception?.values?.[0]?.value) {
-        event.exception.values[0].value = event.exception.values[0].value.replace(
-          /Users\\\\[^\\\\]+/g,
-          'Users\\\\***',
-        );
-      }
-      return event;
-    },
-  });
-  logger.setErrorReportingEnabled(true);
-  logger.setSentryReporter((payload) => {
-    Sentry.withScope((scope) => {
-      scope.setTag('log_level', payload.level);
-      scope.setContext('recent_logs', {
-        entries: payload.logs.map((entry) => ({
-          timestamp: new Date(entry.timestamp).toISOString(),
-          level: entry.level,
-          message: entry.message,
-          formatted: entry.formatted,
-        })),
-      });
-      scope.setExtra('log_message', payload.message);
-      if (payload.error) {
-        Sentry.captureException(payload.error);
-        return;
-      }
-      Sentry.captureMessage(payload.message, 'error');
-    });
-  });
-} else {
-  logger.setErrorReportingEnabled(false);
-  logger.setSentryReporter(null);
-}
+import { app } from 'electron';
+import * as Sentry from '@sentry/electron/main';
+import path from 'path';
+import fs from 'fs';
+import { getAppDataDir } from './utils/paths';
+import { logger } from './utils/logger';
+
+function getQuickConfig() {
+  try {
+    const configPath = path.join(getAppDataDir(), 'gui_config.json');
+    if (fs.existsSync(configPath)) {
+      const content = fs.readFileSync(configPath, 'utf-8');
+      const config = JSON.parse(content);
+      // Default to false (privacy by default)
+      return config.error_reporting_enabled;
+    }
+  } catch (e) {
+    logger.error('Failed to read config for Sentry init:', e);
+  }
+  return false;
+}
+
+if (getQuickConfig()) {
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+    release: `gemini-nexus@${app.getVersion()}`,
+    beforeSend(event) {
+      if (event.exception?.values?.[0]?.value) {
+        event.exception.values[0].value = event.exception.values[0].value.replace(
+          /Users\\\\[^\\\\]+/g,
+          'Users\\\\***',
+        );
+      }
+      return event;
+    },
+  });
+  logger.setErrorReportingEnabled(true);
+  logger.setSentryReporter((payload) => {
+    Sentry.withScope((scope) => {
+      scope.setTag('log_level', payload.level);
+      scope.setContext('recent_logs', {
+        entries: payload.logs.map((entry) => ({
+          timestamp: new Date(entry.timestamp).toISOString(),
+          level: entry.level,
+          message: entry.message,
+          formatted: entry.formatted,
+        })),
+      });
+      scope.setExtra('log_message', payload.message);
+      if (payload.error) {
+        Sentry.captureException(payload.error);
+        return;
+      }
+      Sentry.captureMessage(payload.message, 'error');
+    });
+  });
+} else {
+  logger.setErrorReportingEnabled(false);
+  logger.setSentryReporter(null);
+}

src/ipc/account/handler.ts

@@ -1,483 +1,483 @@
-import fs from 'fs';
-import path from 'path';
-import { v4 as uuidv4 } from 'uuid';
-import { getAccountsFilePath, getBackupsDir } from '../../utils/paths';
-import { logger } from '../../utils/logger';
-import {
-  Account,
-  AccountBackupData,
-  DeviceProfile,
-  DeviceProfilesSnapshot,
-  DeviceProfileVersion,
-} from '../../types/account';
-import {
-  backupAccount as dbBackup,
-  restoreAccount as dbRestore,
-  getCurrentAccountInfo,
-} from '../database/handler';
-import {
-  applyDeviceProfile,
-  ensureGlobalOriginalFromCurrentStorage,
-  generateDeviceProfile,
-  isIdentityProfileApplyEnabled,
-  loadGlobalOriginalProfile,
-  readCurrentDeviceProfile,
-  saveGlobalOriginalProfile,
-  getStorageDirectoryPath,
-} from '../device/handler';
-import { runWithSwitchGuard } from '../switchGuard';
-import { executeSwitchFlow } from '../switchFlow';
-import { shell } from 'electron';
-
-type AccountIndex = Record<string, Account>;
-const SWITCH_EXIT_TIMEOUT_MS = 10000;
-
-function getDeviceHistory(account: Account): DeviceProfileVersion[] {
-  if (!account.deviceHistory) {
-    account.deviceHistory = [];
-  }
-  return account.deviceHistory;
-}
-
-function bindDeviceProfileToAccount(
-  account: Account,
-  profile: DeviceProfile,
-  label: string,
-  addHistory: boolean,
-): void {
-  account.deviceProfile = profile;
-  if (!addHistory) {
-    return;
-  }
-
-  const history = getDeviceHistory(account);
-  for (const version of history) {
-    version.isCurrent = false;
-  }
-
-  history.push({
-    id: uuidv4(),
-    createdAt: Math.floor(Date.now() / 1000),
-    label,
-    profile,
-    isCurrent: true,
-  });
-}
-
-/**
- * Loads the accounts index from the file system.
- * @returns {AccountIndex} The accounts index.
- */
-function loadAccountsIndex(): AccountIndex {
-  const filePath = getAccountsFilePath();
-  if (!fs.existsSync(filePath)) {
-    return {};
-  }
-  try {
-    const content = fs.readFileSync(filePath, 'utf-8');
-    return JSON.parse(content);
-  } catch (error) {
-    logger.error('Failed to load accounts index', error);
-    return {};
-  }
-}
-
-/**
- * Saves the accounts index to the file system.
- * @param accounts {AccountIndex} The accounts index to save.
- * @throws {Error} If the accounts index cannot be saved.
- */
-function saveAccountsIndex(accounts: AccountIndex): void {
-  const filePath = getAccountsFilePath();
-  const dir = path.dirname(filePath);
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir, { recursive: true });
-  }
-  try {
-    fs.writeFileSync(filePath, JSON.stringify(accounts, null, 2));
-  } catch (error) {
-    logger.error('Failed to save accounts index', error);
-    throw error;
-  }
-}
-
-/**
- * Lists the accounts data.
- * @returns {Account[]} The list of accounts.
- * @throws {Error} If the accounts index cannot be loaded.
- */
-export async function listAccountsData(): Promise<Account[]> {
-  const accountsObj = loadAccountsIndex();
-  const accountsList = Object.values(accountsObj);
-  // NOTE: Sort by last_used descending
-  accountsList.sort((a, b) => {
-    const aTime = a.last_used || '';
-    const bTime = b.last_used || '';
-    return bTime.localeCompare(aTime);
-  });
-  return accountsList;
-}
-
-/**
- * Adds an account snapshot.
- * @returns {Account} The added account.
- * @throws {Error} If the account cannot be added.
- */
-export async function addAccountSnapshot(): Promise<Account> {
-  logger.info('Adding account snapshot...');
-
-  // NOTE Get current account info from DB
-  const info = getCurrentAccountInfo();
-  if (!info.isAuthenticated) {
-    const errorMsg =
-      'No authenticated account found. Please ensure Gemini Nexus is running and you are logged in.';
-    logger.error(errorMsg);
-    throw new Error(errorMsg);
-  }
-
-  const accounts = loadAccountsIndex();
-  const now = new Date().toISOString();
-
-  // NOTE Find existing account by email
-  let existingId: string | null = null;
-  for (const [id, acc] of Object.entries(accounts)) {
-    if (acc.email === info.email) {
-      existingId = id;
-      break;
-    }
-  }
-
-  let account: Account;
-  let backupPath: string;
-
-  if (existingId) {
-    // NOTE Update existing account
-    account = accounts[existingId];
-
-    // NOTE Preserve custom name: only update if we have a name from DB AND it's not the default email prefix
-    // NOTE  if not name or name == email.split("@")[0]: name = existing_account.get("name", name)
-    const defaultName = info.email.split('@')[0];
-    if (!info.name || info.name === defaultName) {
-      // NOTE Keep the existing custom name
-      // (account.name is already set, no change needed)
-    } else {
-      // NOTE We have a non-default name from DB, use it
-      account.name = info.name;
-    }
-
-    account.last_used = now;
-
-    // NOTE Use existing backup path if available, otherwise generate new one
-    backupPath = account.backup_file || path.join(getBackupsDir(), `${account.id}.json`);
-
-    logger.info(`Updating existing account: ${info.email}`);
-  } else {
-    const accountId = uuidv4();
-
-    // NOTE Generate name with edge case handling
-    let accountName: string;
-    if (info.name) {
-      accountName = info.name;
-    } else if (info.email && info.email !== 'Unknown') {
-      accountName = info.email.split('@')[0];
-    } else {
-      // Edge case: email is "Unknown" or invalid
-      accountName = `Account_${Date.now()}`;
-    }
-
-    backupPath = path.join(getBackupsDir(), `${accountId}.json`);
-
-    account = {
-      id: accountId,
-      name: accountName,
-      email: info.email,
-      backup_file: backupPath,
-      deviceHistory: [],
-      created_at: now,
-      last_used: now,
-    };
-    accounts[accountId] = account;
-    logger.info(`Creating new account: ${info.email}`);
-  }
-
-  // NOTE  Backup data from DB
-  const backupData = dbBackup(account);
-
-  // NOTE Save backup file
-  const backupsDir = getBackupsDir();
-  if (!fs.existsSync(backupsDir)) {
-    fs.mkdirSync(backupsDir, { recursive: true });
-  }
-  fs.writeFileSync(backupPath, JSON.stringify(backupData, null, 2));
-
-  // NOTE Update backup_file in account object and save
-  account.backup_file = backupPath;
-  saveAccountsIndex(accounts);
-
-  return account;
-}
-
-/**
- * Switches to an account.
- * @param accountId {string} The ID of the account to switch to.
- * @throws {Error} If the account cannot be found or the backup file cannot be found.
- */
-export async function switchAccount(accountId: string): Promise<void> {
-  await runWithSwitchGuard('local-account-switch', async () => {
-    logger.info(`Switching to account: ${accountId}`);
-
-    const accounts = loadAccountsIndex();
-    const account = accounts[accountId];
-    if (!account) {
-      throw new Error(`Account not found: ${accountId}`);
-    }
-
-    // NOTE Get backup file path from account data
-    const backupPath = account.backup_file || path.join(getBackupsDir(), `${accountId}.json`);
-
-    if (!fs.existsSync(backupPath)) {
-      throw new Error(`Backup file not found: ${backupPath}`);
-    }
-
-    ensureGlobalOriginalFromCurrentStorage();
-    if (!account.deviceProfile) {
-      const generated = generateDeviceProfile();
-      saveGlobalOriginalProfile(generated);
-      bindDeviceProfileToAccount(account, generated, 'auto_generated', true);
-    }
-
-    await executeSwitchFlow({
-      scope: 'local',
-      targetProfile: account.deviceProfile || null,
-      applyFingerprint: isIdentityProfileApplyEnabled(),
-      processExitTimeoutMs: SWITCH_EXIT_TIMEOUT_MS,
-      performSwitch: async () => {
-        // NOTE Load backup file
-        const backupContent = fs.readFileSync(backupPath, 'utf-8');
-        const backupData: AccountBackupData = JSON.parse(backupContent);
-
-        // NOTE Restore data to DB
-        dbRestore(backupData);
-
-        // NOTE Update last used
-        account.last_used = new Date().toISOString();
-        saveAccountsIndex(accounts);
-      },
-    });
-  });
-}
-
-export async function previewGenerateIdentityProfile(): Promise<DeviceProfile> {
-  return generateDeviceProfile();
-}
-
-export async function getIdentityProfiles(accountId: string): Promise<DeviceProfilesSnapshot> {
-  const accounts = loadAccountsIndex();
-  const account = accounts[accountId];
-  if (!account) {
-    throw new Error(`Account not found: ${accountId}`);
-  }
-
-  let currentStorage: DeviceProfile | undefined;
-  try {
-    currentStorage = readCurrentDeviceProfile();
-  } catch (error) {
-    logger.warn('Failed to read current storage device profile', error);
-  }
-
-  return {
-    currentStorage,
-    boundProfile: account.deviceProfile,
-    history: account.deviceHistory || [],
-    baseline: loadGlobalOriginalProfile() || undefined,
-  };
-}
-
-export async function bindIdentityProfile(
-  accountId: string,
-  mode: 'capture' | 'generate',
-): Promise<DeviceProfile> {
-  const accounts = loadAccountsIndex();
-  const account = accounts[accountId];
-  if (!account) {
-    throw new Error(`Account not found: ${accountId}`);
-  }
-
-  let profile: DeviceProfile;
-  if (mode === 'capture') {
-    profile = readCurrentDeviceProfile();
-  } else {
-    profile = generateDeviceProfile();
-  }
-
-  ensureGlobalOriginalFromCurrentStorage();
-  saveGlobalOriginalProfile(profile);
-  applyDeviceProfile(profile);
-  bindDeviceProfileToAccount(account, profile, mode, true);
-  saveAccountsIndex(accounts);
-  return profile;
-}
-
-export async function bindIdentityProfileWithPayload(
-  accountId: string,
-  profile: DeviceProfile,
-): Promise<DeviceProfile> {
-  const accounts = loadAccountsIndex();
-  const account = accounts[accountId];
-  if (!account) {
-    throw new Error(`Account not found: ${accountId}`);
-  }
-
-  ensureGlobalOriginalFromCurrentStorage();
-  saveGlobalOriginalProfile(profile);
-  applyDeviceProfile(profile);
-  bindDeviceProfileToAccount(account, profile, 'generated', true);
-  saveAccountsIndex(accounts);
-  return profile;
-}
-
-export async function applyBoundIdentityProfile(accountId: string): Promise<DeviceProfile> {
-  const accounts = loadAccountsIndex();
-  const account = accounts[accountId];
-  if (!account) {
-    throw new Error(`Account not found: ${accountId}`);
-  }
-  if (!account.deviceProfile) {
-    throw new Error('Account has no bound device profile');
-  }
-
-  applyDeviceProfile(account.deviceProfile);
-  account.last_used = new Date().toISOString();
-  saveAccountsIndex(accounts);
-  return account.deviceProfile;
-}
-
-export async function restoreIdentityProfileRevision(
-  accountId: string,
-  versionId: string,
-): Promise<DeviceProfile> {
-  const accounts = loadAccountsIndex();
-  const account = accounts[accountId];
-  if (!account) {
-    throw new Error(`Account not found: ${accountId}`);
-  }
-
-  let targetProfile: DeviceProfile | null = null;
-  if (versionId === 'baseline') {
-    targetProfile = loadGlobalOriginalProfile();
-    if (!targetProfile) {
-      throw new Error('Global original profile not found');
-    }
-    for (const version of getDeviceHistory(account)) {
-      version.isCurrent = false;
-    }
-  } else if (versionId === 'current') {
-    targetProfile = account.deviceProfile || null;
-    if (!targetProfile) {
-      throw new Error('No currently bound profile');
-    }
-  } else {
-    const history = getDeviceHistory(account);
-    const targetVersion = history.find((version) => version.id === versionId);
-    if (!targetVersion) {
-      throw new Error('Device profile version not found');
-    }
-    targetProfile = targetVersion.profile;
-    for (const version of history) {
-      version.isCurrent = version.id === versionId;
-    }
-  }
-
-  applyDeviceProfile(targetProfile);
-  account.deviceProfile = targetProfile;
-  saveAccountsIndex(accounts);
-  return targetProfile;
-}
-
-export async function deleteIdentityProfileRevision(
-  accountId: string,
-  versionId: string,
-): Promise<void> {
-  if (versionId === 'baseline') {
-    throw new Error('Original profile cannot be deleted');
-  }
-
-  const accounts = loadAccountsIndex();
-  const account = accounts[accountId];
-  if (!account) {
-    throw new Error(`Account not found: ${accountId}`);
-  }
-
-  const history = getDeviceHistory(account);
-  if (history.some((version) => version.id === versionId && version.isCurrent)) {
-    throw new Error('Currently bound profile cannot be deleted');
-  }
-
-  const before = history.length;
-  account.deviceHistory = history.filter((version) => version.id !== versionId);
-  if (account.deviceHistory.length === before) {
-    throw new Error('Historical device profile not found');
-  }
-
-  saveAccountsIndex(accounts);
-}
-
-export async function restoreBaselineProfile(accountId: string): Promise<DeviceProfile> {
-  const accounts = loadAccountsIndex();
-  const account = accounts[accountId];
-  if (!account) {
-    throw new Error(`Account not found: ${accountId}`);
-  }
-
-  const baseline = loadGlobalOriginalProfile();
-  if (!baseline) {
-    throw new Error('Global original profile not found');
-  }
-
-  account.deviceProfile = baseline;
-  for (const version of getDeviceHistory(account)) {
-    version.isCurrent = false;
-  }
-  saveAccountsIndex(accounts);
-
-  return baseline;
-}
-
-export async function openIdentityStorageFolder(): Promise<void> {
-  const directory = getStorageDirectoryPath();
-  const result = await shell.openPath(directory);
-  if (result) {
-    throw new Error(`Failed to open device folder: ${result}`);
-  }
-}
-
-/**
- * Deletes an account.
- * @param accountId {string} The ID of the account to delete.
- * @throws {Error} If the account cannot be found or the backup file cannot be found.
- */
-export async function deleteAccount(accountId: string): Promise<void> {
-  logger.info(`Deleting account: ${accountId}`);
-
-  const accounts = loadAccountsIndex();
-  const account = accounts[accountId];
-  if (!account) {
-    throw new Error(`Account not found: ${accountId}`);
-  }
-
-  // NOTE Remove backup file using stored path
-  const backupPath = account.backup_file || path.join(getBackupsDir(), `${accountId}.json`);
-
-  if (fs.existsSync(backupPath)) {
-    try {
-      fs.unlinkSync(backupPath);
-      logger.info(`Backup file deleted: ${backupPath}`);
-    } catch (error) {
-      logger.warn(`Failed to delete backup file: ${backupPath}`, error);
-    }
-  }
-
-  // NOTE Remove from index
-  delete accounts[accountId];
-  saveAccountsIndex(accounts);
-}
+import fs from 'fs';
+import path from 'path';
+import { v4 as uuidv4 } from 'uuid';
+import { getAccountsFilePath, getBackupsDir } from '../../utils/paths';
+import { logger } from '../../utils/logger';
+import {
+  Account,
+  AccountBackupData,
+  DeviceProfile,
+  DeviceProfilesSnapshot,
+  DeviceProfileVersion,
+} from '../../types/account';
+import {
+  backupAccount as dbBackup,
+  restoreAccount as dbRestore,
+  getCurrentAccountInfo,
+} from '../database/handler';
+import {
+  applyDeviceProfile,
+  ensureGlobalOriginalFromCurrentStorage,
+  generateDeviceProfile,
+  isIdentityProfileApplyEnabled,
+  loadGlobalOriginalProfile,
+  readCurrentDeviceProfile,
+  saveGlobalOriginalProfile,
+  getStorageDirectoryPath,
+} from '../device/handler';
+import { runWithSwitchGuard } from '../switchGuard';
+import { executeSwitchFlow } from '../switchFlow';
+import { shell } from 'electron';
+
+type AccountIndex = Record<string, Account>;
+const SWITCH_EXIT_TIMEOUT_MS = 10000;
+
+function getDeviceHistory(account: Account): DeviceProfileVersion[] {
+  if (!account.deviceHistory) {
+    account.deviceHistory = [];
+  }
+  return account.deviceHistory;
+}
+
+function bindDeviceProfileToAccount(
+  account: Account,
+  profile: DeviceProfile,
+  label: string,
+  addHistory: boolean,
+): void {
+  account.deviceProfile = profile;
+  if (!addHistory) {
+    return;
+  }
+
+  const history = getDeviceHistory(account);
+  for (const version of history) {
+    version.isCurrent = false;
+  }
+
+  history.push({
+    id: uuidv4(),
+    createdAt: Math.floor(Date.now() / 1000),
+    label,
+    profile,
+    isCurrent: true,
+  });
+}
+
+/**
+ * Loads the accounts index from the file system.
+ * @returns {AccountIndex} The accounts index.
+ */
+function loadAccountsIndex(): AccountIndex {
+  const filePath = getAccountsFilePath();
+  if (!fs.existsSync(filePath)) {
+    return {};
+  }
+  try {
+    const content = fs.readFileSync(filePath, 'utf-8');
+    return JSON.parse(content);
+  } catch (error) {
+    logger.error('Failed to load accounts index', error);
+    return {};
+  }
+}
+
+/**
+ * Saves the accounts index to the file system.
+ * @param accounts {AccountIndex} The accounts index to save.
+ * @throws {Error} If the accounts index cannot be saved.
+ */
+function saveAccountsIndex(accounts: AccountIndex): void {
+  const filePath = getAccountsFilePath();
+  const dir = path.dirname(filePath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+  try {
+    fs.writeFileSync(filePath, JSON.stringify(accounts, null, 2));
+  } catch (error) {
+    logger.error('Failed to save accounts index', error);
+    throw error;
+  }
+}
+
+/**
+ * Lists the accounts data.
+ * @returns {Account[]} The list of accounts.
+ * @throws {Error} If the accounts index cannot be loaded.
+ */
+export async function listAccountsData(): Promise<Account[]> {
+  const accountsObj = loadAccountsIndex();
+  const accountsList = Object.values(accountsObj);
+  // NOTE: Sort by last_used descending
+  accountsList.sort((a, b) => {
+    const aTime = a.last_used || '';
+    const bTime = b.last_used || '';
+    return bTime.localeCompare(aTime);
+  });
+  return accountsList;
+}
+
+/**
+ * Adds an account snapshot.
+ * @returns {Account} The added account.
+ * @throws {Error} If the account cannot be added.
+ */
+export async function addAccountSnapshot(): Promise<Account> {
+  logger.info('Adding account snapshot...');
+
+  // NOTE Get current account info from DB
+  const info = getCurrentAccountInfo();
+  if (!info.isAuthenticated) {
+    const errorMsg =
+      'No authenticated account found. Please ensure Gemini Nexus is running and you are logged in.';
+    logger.error(errorMsg);
+    throw new Error(errorMsg);
+  }
+
+  const accounts = loadAccountsIndex();
+  const now = new Date().toISOString();
+
+  // NOTE Find existing account by email
+  let existingId: string | null = null;
+  for (const [id, acc] of Object.entries(accounts)) {
+    if (acc.email === info.email) {
+      existingId = id;
+      break;
+    }
+  }
+
+  let account: Account;
+  let backupPath: string;
+
+  if (existingId) {
+    // NOTE Update existing account
+    account = accounts[existingId];
+
+    // NOTE Preserve custom name: only update if we have a name from DB AND it's not the default email prefix
+    // NOTE  if not name or name == email.split("@")[0]: name = existing_account.get("name", name)
+    const defaultName = info.email.split('@')[0];
+    if (!info.name || info.name === defaultName) {
+      // NOTE Keep the existing custom name
+      // (account.name is already set, no change needed)
+    } else {
+      // NOTE We have a non-default name from DB, use it
+      account.name = info.name;
+    }
+
+    account.last_used = now;
+
+    // NOTE Use existing backup path if available, otherwise generate new one
+    backupPath = account.backup_file || path.join(getBackupsDir(), `${account.id}.json`);
+
+    logger.info(`Updating existing account: ${info.email}`);
+  } else {
+    const accountId = uuidv4();
+
+    // NOTE Generate name with edge case handling
+    let accountName: string;
+    if (info.name) {
+      accountName = info.name;
+    } else if (info.email && info.email !== 'Unknown') {
+      accountName = info.email.split('@')[0];
+    } else {
+      // Edge case: email is "Unknown" or invalid
+      accountName = `Account_${Date.now()}`;
+    }
+
+    backupPath = path.join(getBackupsDir(), `${accountId}.json`);
+
+    account = {
+      id: accountId,
+      name: accountName,
+      email: info.email,
+      backup_file: backupPath,
+      deviceHistory: [],
+      created_at: now,
+      last_used: now,
+    };
+    accounts[accountId] = account;
+    logger.info(`Creating new account: ${info.email}`);
+  }
+
+  // NOTE  Backup data from DB
+  const backupData = dbBackup(account);
+
+  // NOTE Save backup file
+  const backupsDir = getBackupsDir();
+  if (!fs.existsSync(backupsDir)) {
+    fs.mkdirSync(backupsDir, { recursive: true });
+  }
+  fs.writeFileSync(backupPath, JSON.stringify(backupData, null, 2));
+
+  // NOTE Update backup_file in account object and save
+  account.backup_file = backupPath;
+  saveAccountsIndex(accounts);
+
+  return account;
+}
+
+/**
+ * Switches to an account.
+ * @param accountId {string} The ID of the account to switch to.
+ * @throws {Error} If the account cannot be found or the backup file cannot be found.
+ */
+export async function switchAccount(accountId: string): Promise<void> {
+  await runWithSwitchGuard('local-account-switch', async () => {
+    logger.info(`Switching to account: ${accountId}`);
+
+    const accounts = loadAccountsIndex();
+    const account = accounts[accountId];
+    if (!account) {
+      throw new Error(`Account not found: ${accountId}`);
+    }
+
+    // NOTE Get backup file path from account data
+    const backupPath = account.backup_file || path.join(getBackupsDir(), `${accountId}.json`);
+
+    if (!fs.existsSync(backupPath)) {
+      throw new Error(`Backup file not found: ${backupPath}`);
+    }
+
+    ensureGlobalOriginalFromCurrentStorage();
+    if (!account.deviceProfile) {
+      const generated = generateDeviceProfile();
+      saveGlobalOriginalProfile(generated);
+      bindDeviceProfileToAccount(account, generated, 'auto_generated', true);
+    }
+
+    await executeSwitchFlow({
+      scope: 'local',
+      targetProfile: account.deviceProfile || null,
+      applyFingerprint: isIdentityProfileApplyEnabled(),
+      processExitTimeoutMs: SWITCH_EXIT_TIMEOUT_MS,
+      performSwitch: async () => {
+        // NOTE Load backup file
+        const backupContent = fs.readFileSync(backupPath, 'utf-8');
+        const backupData: AccountBackupData = JSON.parse(backupContent);
+
+        // NOTE Restore data to DB
+        dbRestore(backupData);
+
+        // NOTE Update last used
+        account.last_used = new Date().toISOString();
+        saveAccountsIndex(accounts);
+      },
+    });
+  });
+}
+
+export async function previewGenerateIdentityProfile(): Promise<DeviceProfile> {
+  return generateDeviceProfile();
+}
+
+export async function getIdentityProfiles(accountId: string): Promise<DeviceProfilesSnapshot> {
+  const accounts = loadAccountsIndex();
+  const account = accounts[accountId];
+  if (!account) {
+    throw new Error(`Account not found: ${accountId}`);
+  }
+
+  let currentStorage: DeviceProfile | undefined;
+  try {
+    currentStorage = readCurrentDeviceProfile();
+  } catch (error) {
+    logger.warn('Failed to read current storage device profile', error);
+  }
+
+  return {
+    currentStorage,
+    boundProfile: account.deviceProfile,
+    history: account.deviceHistory || [],
+    baseline: loadGlobalOriginalProfile() || undefined,
+  };
+}
+
+export async function bindIdentityProfile(
+  accountId: string,
+  mode: 'capture' | 'generate',
+): Promise<DeviceProfile> {
+  const accounts = loadAccountsIndex();
+  const account = accounts[accountId];
+  if (!account) {
+    throw new Error(`Account not found: ${accountId}`);
+  }
+
+  let profile: DeviceProfile;
+  if (mode === 'capture') {
+    profile = readCurrentDeviceProfile();
+  } else {
+    profile = generateDeviceProfile();
+  }
+
+  ensureGlobalOriginalFromCurrentStorage();
+  saveGlobalOriginalProfile(profile);
+  applyDeviceProfile(profile);
+  bindDeviceProfileToAccount(account, profile, mode, true);
+  saveAccountsIndex(accounts);
+  return profile;
+}
+
+export async function bindIdentityProfileWithPayload(
+  accountId: string,
+  profile: DeviceProfile,
+): Promise<DeviceProfile> {
+  const accounts = loadAccountsIndex();
+  const account = accounts[accountId];
+  if (!account) {
+    throw new Error(`Account not found: ${accountId}`);
+  }
+
+  ensureGlobalOriginalFromCurrentStorage();
+  saveGlobalOriginalProfile(profile);
+  applyDeviceProfile(profile);
+  bindDeviceProfileToAccount(account, profile, 'generated', true);
+  saveAccountsIndex(accounts);
+  return profile;
+}
+
+export async function applyBoundIdentityProfile(accountId: string): Promise<DeviceProfile> {
+  const accounts = loadAccountsIndex();
+  const account = accounts[accountId];
+  if (!account) {
+    throw new Error(`Account not found: ${accountId}`);
+  }
+  if (!account.deviceProfile) {
+    throw new Error('Account has no bound device profile');
+  }
+
+  applyDeviceProfile(account.deviceProfile);
+  account.last_used = new Date().toISOString();
+  saveAccountsIndex(accounts);
+  return account.deviceProfile;
+}
+
+export async function restoreIdentityProfileRevision(
+  accountId: string,
+  versionId: string,
+): Promise<DeviceProfile> {
+  const accounts = loadAccountsIndex();
+  const account = accounts[accountId];
+  if (!account) {
+    throw new Error(`Account not found: ${accountId}`);
+  }
+
+  let targetProfile: DeviceProfile | null = null;
+  if (versionId === 'baseline') {
+    targetProfile = loadGlobalOriginalProfile();
+    if (!targetProfile) {
+      throw new Error('Global original profile not found');
+    }
+    for (const version of getDeviceHistory(account)) {
+      version.isCurrent = false;
+    }
+  } else if (versionId === 'current') {
+    targetProfile = account.deviceProfile || null;
+    if (!targetProfile) {
+      throw new Error('No currently bound profile');
+    }
+  } else {
+    const history = getDeviceHistory(account);
+    const targetVersion = history.find((version) => version.id === versionId);
+    if (!targetVersion) {
+      throw new Error('Device profile version not found');
+    }
+    targetProfile = targetVersion.profile;
+    for (const version of history) {
+      version.isCurrent = version.id === versionId;
+    }
+  }
+
+  applyDeviceProfile(targetProfile);
+  account.deviceProfile = targetProfile;
+  saveAccountsIndex(accounts);
+  return targetProfile;
+}
+
+export async function deleteIdentityProfileRevision(
+  accountId: string,
+  versionId: string,
+): Promise<void> {
+  if (versionId === 'baseline') {
+    throw new Error('Original profile cannot be deleted');
+  }
+
+  const accounts = loadAccountsIndex();
+  const account = accounts[accountId];
+  if (!account) {
+    throw new Error(`Account not found: ${accountId}`);
+  }
+
+  const history = getDeviceHistory(account);
+  if (history.some((version) => version.id === versionId && version.isCurrent)) {
+    throw new Error('Currently bound profile cannot be deleted');
+  }
+
+  const before = history.length;
+  account.deviceHistory = history.filter((version) => version.id !== versionId);
+  if (account.deviceHistory.length === before) {
+    throw new Error('Historical device profile not found');
+  }
+
+  saveAccountsIndex(accounts);
+}
+
+export async function restoreBaselineProfile(accountId: string): Promise<DeviceProfile> {
+  const accounts = loadAccountsIndex();
+  const account = accounts[accountId];
+  if (!account) {
+    throw new Error(`Account not found: ${accountId}`);
+  }
+
+  const baseline = loadGlobalOriginalProfile();
+  if (!baseline) {
+    throw new Error('Global original profile not found');
+  }
+
+  account.deviceProfile = baseline;
+  for (const version of getDeviceHistory(account)) {
+    version.isCurrent = false;
+  }
+  saveAccountsIndex(accounts);
+
+  return baseline;
+}
+
+export async function openIdentityStorageFolder(): Promise<void> {
+  const directory = getStorageDirectoryPath();
+  const result = await shell.openPath(directory);
+  if (result) {
+    throw new Error(`Failed to open device folder: ${result}`);
+  }
+}
+
+/**
+ * Deletes an account.
+ * @param accountId {string} The ID of the account to delete.
+ * @throws {Error} If the account cannot be found or the backup file cannot be found.
+ */
+export async function deleteAccount(accountId: string): Promise<void> {
+  logger.info(`Deleting account: ${accountId}`);
+
+  const accounts = loadAccountsIndex();
+  const account = accounts[accountId];
+  if (!account) {
+    throw new Error(`Account not found: ${accountId}`);
+  }
+
+  // NOTE Remove backup file using stored path
+  const backupPath = account.backup_file || path.join(getBackupsDir(), `${accountId}.json`);
+
+  if (fs.existsSync(backupPath)) {
+    try {
+      fs.unlinkSync(backupPath);
+      logger.info(`Backup file deleted: ${backupPath}`);
+    } catch (error) {
+      logger.warn(`Failed to delete backup file: ${backupPath}`, error);
+    }
+  }
+
+  // NOTE Remove from index
+  delete accounts[accountId];
+  saveAccountsIndex(accounts);
+}

src/ipc/account/router.ts

@@ -1,103 +1,103 @@
-import { z } from 'zod';
-import { os } from '@orpc/server';
-import {
-  applyBoundIdentityProfile,
-  addAccountSnapshot,
-  bindIdentityProfile,
-  bindIdentityProfileWithPayload,
-  deleteAccount,
-  deleteIdentityProfileRevision,
-  getIdentityProfiles,
-  listAccountsData,
-  previewGenerateIdentityProfile,
-  restoreBaselineProfile,
-  restoreIdentityProfileRevision,
-  switchAccount,
-  openIdentityStorageFolder,
-} from './handler';
-import {
-  AccountSchema,
-  DeviceProfileSchema,
-  DeviceProfilesSnapshotSchema,
-} from '../../types/account';
-
-export const accountRouter = os.router({
-  listAccounts: os.output(z.array(AccountSchema)).handler(async () => {
-    return listAccountsData();
-  }),
-
-  addAccountSnapshot: os.output(AccountSchema).handler(async () => {
-    return addAccountSnapshot();
-  }),
-
-  switchAccount: os
-    .input(z.object({ accountId: z.string() }))
-    .output(z.void())
-    .handler(async ({ input }) => {
-      await switchAccount(input.accountId);
-    }),
-
-  deleteAccount: os
-    .input(z.object({ accountId: z.string() }))
-    .output(z.void())
-    .handler(async ({ input }) => {
-      await deleteAccount(input.accountId);
-    }),
-
-  previewGenerateIdentityProfile: os.output(DeviceProfileSchema).handler(async () => {
-    return previewGenerateIdentityProfile();
-  }),
-
-  getIdentityProfiles: os
-    .input(z.object({ accountId: z.string() }))
-    .output(DeviceProfilesSnapshotSchema)
-    .handler(async ({ input }) => {
-      return getIdentityProfiles(input.accountId);
-    }),
-
-  bindIdentityProfile: os
-    .input(z.object({ accountId: z.string(), mode: z.enum(['capture', 'generate']) }))
-    .output(DeviceProfileSchema)
-    .handler(async ({ input }) => {
-      return bindIdentityProfile(input.accountId, input.mode);
-    }),
-
-  bindIdentityProfileWithPayload: os
-    .input(z.object({ accountId: z.string(), profile: DeviceProfileSchema }))
-    .output(DeviceProfileSchema)
-    .handler(async ({ input }) => {
-      return bindIdentityProfileWithPayload(input.accountId, input.profile);
-    }),
-
-  applyBoundIdentityProfile: os
-    .input(z.object({ accountId: z.string() }))
-    .output(DeviceProfileSchema)
-    .handler(async ({ input }) => {
-      return applyBoundIdentityProfile(input.accountId);
-    }),
-
-  restoreIdentityProfileRevision: os
-    .input(z.object({ accountId: z.string(), versionId: z.string() }))
-    .output(DeviceProfileSchema)
-    .handler(async ({ input }) => {
-      return restoreIdentityProfileRevision(input.accountId, input.versionId);
-    }),
-
-  deleteIdentityProfileRevision: os
-    .input(z.object({ accountId: z.string(), versionId: z.string() }))
-    .output(z.void())
-    .handler(async ({ input }) => {
-      await deleteIdentityProfileRevision(input.accountId, input.versionId);
-    }),
-
-  restoreBaselineProfile: os
-    .input(z.object({ accountId: z.string() }))
-    .output(DeviceProfileSchema)
-    .handler(async ({ input }) => {
-      return restoreBaselineProfile(input.accountId);
-    }),
-
-  openIdentityStorageFolder: os.output(z.void()).handler(async () => {
-    await openIdentityStorageFolder();
-  }),
-});
+import { z } from 'zod';
+import { os } from '@orpc/server';
+import {
+  applyBoundIdentityProfile,
+  addAccountSnapshot,
+  bindIdentityProfile,
+  bindIdentityProfileWithPayload,
+  deleteAccount,
+  deleteIdentityProfileRevision,
+  getIdentityProfiles,
+  listAccountsData,
+  previewGenerateIdentityProfile,
+  restoreBaselineProfile,
+  restoreIdentityProfileRevision,
+  switchAccount,
+  openIdentityStorageFolder,
+} from './handler';
+import {
+  AccountSchema,
+  DeviceProfileSchema,
+  DeviceProfilesSnapshotSchema,
+} from '../../types/account';
+
+export const accountRouter = os.router({
+  listAccounts: os.output(z.array(AccountSchema)).handler(async () => {
+    return listAccountsData();
+  }),
+
+  addAccountSnapshot: os.output(AccountSchema).handler(async () => {
+    return addAccountSnapshot();
+  }),
+
+  switchAccount: os
+    .input(z.object({ accountId: z.string() }))
+    .output(z.void())
+    .handler(async ({ input }) => {
+      await switchAccount(input.accountId);
+    }),
+
+  deleteAccount: os
+    .input(z.object({ accountId: z.string() }))
+    .output(z.void())
+    .handler(async ({ input }) => {
+      await deleteAccount(input.accountId);
+    }),
+
+  previewGenerateIdentityProfile: os.output(DeviceProfileSchema).handler(async () => {
+    return previewGenerateIdentityProfile();
+  }),
+
+  getIdentityProfiles: os
+    .input(z.object({ accountId: z.string() }))
+    .output(DeviceProfilesSnapshotSchema)
+    .handler(async ({ input }) => {
+      return getIdentityProfiles(input.accountId);
+    }),
+
+  bindIdentityProfile: os
+    .input(z.object({ accountId: z.string(), mode: z.enum(['capture', 'generate']) }))
+    .output(DeviceProfileSchema)
+    .handler(async ({ input }) => {
+      return bindIdentityProfile(input.accountId, input.mode);
+    }),
+
+  bindIdentityProfileWithPayload: os
+    .input(z.object({ accountId: z.string(), profile: DeviceProfileSchema }))
+    .output(DeviceProfileSchema)
+    .handler(async ({ input }) => {
+      return bindIdentityProfileWithPayload(input.accountId, input.profile);
+    }),
+
+  applyBoundIdentityProfile: os
+    .input(z.object({ accountId: z.string() }))
+    .output(DeviceProfileSchema)
+    .handler(async ({ input }) => {
+      return applyBoundIdentityProfile(input.accountId);
+    }),
+
+  restoreIdentityProfileRevision: os
+    .input(z.object({ accountId: z.string(), versionId: z.string() }))
+    .output(DeviceProfileSchema)
+    .handler(async ({ input }) => {
+      return restoreIdentityProfileRevision(input.accountId, input.versionId);
+    }),
+
+  deleteIdentityProfileRevision: os
+    .input(z.object({ accountId: z.string(), versionId: z.string() }))
+    .output(z.void())
+    .handler(async ({ input }) => {
+      await deleteIdentityProfileRevision(input.accountId, input.versionId);
+    }),
+
+  restoreBaselineProfile: os
+    .input(z.object({ accountId: z.string() }))
+    .output(DeviceProfileSchema)
+    .handler(async ({ input }) => {
+      return restoreBaselineProfile(input.accountId);
+    }),
+
+  openIdentityStorageFolder: os.output(z.void()).handler(async () => {
+    await openIdentityStorageFolder();
+  }),
+});

src/ipc/app/handlers.ts

@@ -1,10 +1,10 @@
-import { os } from '@orpc/server';
-import { app } from 'electron';
-
-export const currentPlatfom = os.handler(() => {
-  return process.platform;
-});
-
-export const appVersion = os.handler(() => {
-  return app.getVersion();
-});
+import { os } from '@orpc/server';
+import { app } from 'electron';
+
+export const currentPlatfom = os.handler(() => {
+  return process.platform;
+});
+
+export const appVersion = os.handler(() => {
+  return app.getVersion();
+});

src/ipc/app/index.ts

@@ -1,7 +1,7 @@
-import { appVersion, currentPlatfom } from './handlers';
-import { os } from '@orpc/server';
-
-export const app = os.router({
-  currentPlatfom,
-  appVersion,
-});
+import { appVersion, currentPlatfom } from './handlers';
+import { os } from '@orpc/server';
+
+export const app = os.router({
+  currentPlatfom,
+  appVersion,
+});

src/ipc/cloud/authServer.ts

@@ -1,136 +1,136 @@
-import http from 'http';
-import { logger } from '../../utils/logger';
-import { ipcContext } from '../context';
-import { escapeHtml } from '../../utils/url';
-
-export class AuthServer {
-  private static server: http.Server | null = null;
-  private static PORT = 8888;
-
-  static async start() {
-    if (this.server) {
-      logger.warn('AuthServer: Server already running');
-      return;
-    }
-
-    const tryPorts = [8888, 8889, 8890, 8891, 8892];
-    let boundPort: number | null = null;
-
-    for (const port of tryPorts) {
-      try {
-        await new Promise<void>((resolve, reject) => {
-          const testServer = http.createServer();
-          testServer.once('error', reject);
-          testServer.listen(port, '127.0.0.1', () => {
-            testServer.close(() => resolve());
-          });
-        });
-        boundPort = port;
-        break;
-      } catch {
-        logger.debug(`AuthServer: Port ${port} is in use, trying next...`);
-      }
-    }
-
-    if (!boundPort) {
-      logger.error('AuthServer: No available ports found for OAuth callback server');
-      return;
-    }
-
-    if (boundPort !== 8888) {
-      logger.warn(`AuthServer: Using fallback port ${boundPort} (default 8888 is in use)`);
-    }
-
-    this.PORT = boundPort;
-
-    try {
-      this.server = http.createServer((req, res) => {
-        if (req.method !== 'GET') {
-          res.writeHead(405, { Allow: 'GET' });
-          res.end('Method Not Allowed');
-          return;
-        }
-
-        const url = new URL(req.url || '', `http://localhost:${this.PORT}`);
-
-        if (url.pathname === '/oauth-callback') {
-          const code = url.searchParams.get('code');
-          const error = url.searchParams.get('error');
-
-          if (code) {
-            const escapedCode = escapeHtml(code);
-            logger.info(
-              `AuthServer: Received authorization code: ${escapedCode.substring(0, 10)}...`,
-            );
-
-            // Send code to renderer
-            if (ipcContext.mainWindow) {
-              logger.info('AuthServer: Sending code to renderer via IPC');
-              ipcContext.mainWindow.webContents.send('GOOGLE_AUTH_CODE', code);
-              logger.info('AuthServer: Code sent successfully');
-            } else {
-              logger.error('AuthServer: Main window not found, cannot send code');
-            }
-
-            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-            res.end(`
-            <html>
-              <body style="font-family: sans-serif; text-align: center; padding-top: 50px;">
-                <h1>Login Successful</h1>
-                <p>You can close this window and return to Gemini Nexus.</p>
-                <script>
-                  setTimeout(() => window.close(), 3000);
-                </script>
-              </body>
-            </html>
-          `);
-          } else if (error) {
-            const escapedError = escapeHtml(error);
-            logger.error(`AuthServer: OAuth error: ${escapedError}`);
-            res.writeHead(400, { 'Content-Type': 'text/html; charset=utf-8' });
-            res.end(`
-            <html>
-              <body>
-                <h1>Login Failed</h1>
-                <p>Error: ${escapedError}</p>
-              </body>
-            </html>
-          `);
-          } else {
-            res.writeHead(400);
-            res.end('Missing code parameter');
-          }
-        } else {
-          res.writeHead(404);
-          res.end('Not Found');
-        }
-      });
-
-      this.server.on('error', (err) => {
-        logger.error('AuthServer: Server error', err);
-      });
-
-      this.server.listen(this.PORT, '127.0.0.1', () => {
-        logger.info(`AuthServer: Listening on http://localhost:${this.PORT}`);
-      });
-    } catch (e) {
-      logger.error('AuthServer: Failed to create or start server', e);
-      if (this.server) {
-        this.server.close();
-        this.server = null;
-      }
-    }
-  }
-
-  static getRedirectUri(): string {
-    return `http://localhost:${this.PORT}/oauth-callback`;
-  }
-
-  static stop() {
-    if (this.server) {
-      this.server.close();
-      this.server = null;
-      logger.info('AuthServer: Stopped');
-    }
-  }
-}
+import http from 'http';
+import { logger } from '../../utils/logger';
+import { ipcContext } from '../context';
+import { escapeHtml } from '../../utils/url';
+
+export class AuthServer {
+  private static server: http.Server | null = null;
+  private static PORT = 8888;
+
+  static async start() {
+    if (this.server) {
+      logger.warn('AuthServer: Server already running');
+      return;
+    }
+
+    const tryPorts = [8888, 8889, 8890, 8891, 8892];
+    let boundPort: number | null = null;
+
+    for (const port of tryPorts) {
+      try {
+        await new Promise<void>((resolve, reject) => {
+          const testServer = http.createServer();
+          testServer.once('error', reject);
+          testServer.listen(port, '127.0.0.1', () => {
+            testServer.close(() => resolve());
+          });
+        });
+        boundPort = port;
+        break;
+      } catch {
+        logger.debug(`AuthServer: Port ${port} is in use, trying next...`);
+      }
+    }
+
+    if (!boundPort) {
+      logger.error('AuthServer: No available ports found for OAuth callback server');
+      return;
+    }
+
+    if (boundPort !== 8888) {
+      logger.warn(`AuthServer: Using fallback port ${boundPort} (default 8888 is in use)`);
+    }
+
+    this.PORT = boundPort;
+
+    try {
+      this.server = http.createServer((req, res) => {
+        if (req.method !== 'GET') {
+          res.writeHead(405, { Allow: 'GET' });
+          res.end('Method Not Allowed');
+          return;
+        }
+
+        const url = new URL(req.url || '', `http://localhost:${this.PORT}`);
+
+        if (url.pathname === '/oauth-callback') {
+          const code = url.searchParams.get('code');
+          const error = url.searchParams.get('error');
+
+          if (code) {
+            const escapedCode = escapeHtml(code);
+            logger.info(
+              `AuthServer: Received authorization code: ${escapedCode.substring(0, 10)}...`,
+            );
+
+            // Send code to renderer
+            if (ipcContext.mainWindow) {
+              logger.info('AuthServer: Sending code to renderer via IPC');
+              ipcContext.mainWindow.webContents.send('GOOGLE_AUTH_CODE', code);
+              logger.info('AuthServer: Code sent successfully');
+            } else {
+              logger.error('AuthServer: Main window not found, cannot send code');
+            }
+
+            res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(`
+            <html>
+              <body style="font-family: sans-serif; text-align: center; padding-top: 50px;">
+                <h1>Login Successful</h1>
+                <p>You can close this window and return to Gemini Nexus.</p>
+                <script>
+                  setTimeout(() => window.close(), 3000);
+                </script>
+              </body>
+            </html>
+          `);
+          } else if (error) {
+            const escapedError = escapeHtml(error);
+            logger.error(`AuthServer: OAuth error: ${escapedError}`);
+            res.writeHead(400, { 'Content-Type': 'text/html; charset=utf-8' });
+            res.end(`
+            <html>
+              <body>
+                <h1>Login Failed</h1>
+                <p>Error: ${escapedError}</p>
+              </body>
+            </html>
+          `);
+          } else {
+            res.writeHead(400);
+            res.end('Missing code parameter');
+          }
+        } else {
+          res.writeHead(404);
+          res.end('Not Found');
+        }
+      });
+
+      this.server.on('error', (err) => {
+        logger.error('AuthServer: Server error', err);
+      });
+
+      this.server.listen(this.PORT, '127.0.0.1', () => {
+        logger.info(`AuthServer: Listening on http://localhost:${this.PORT}`);
+      });
+    } catch (e) {
+      logger.error('AuthServer: Failed to create or start server', e);
+      if (this.server) {
+        this.server.close();
+        this.server = null;
+      }
+    }
+  }
+
+  static getRedirectUri(): string {
+    return `http://localhost:${this.PORT}/oauth-callback`;
+  }
+
+  static stop() {
+    if (this.server) {
+      this.server.close();
+      this.server = null;
+      logger.info('AuthServer: Stopped');
+    }
+  }
+}

src/ipc/cloud/router.ts

@@ -1,305 +1,305 @@
-import { z } from 'zod';
-import { os, ORPCError } from '@orpc/server';
-import {
-  addGoogleAccount,
-  bindCloudIdentityProfile,
-  bindCloudIdentityProfileWithPayload,
-  deleteCloudIdentityProfileRevision,
-  listCloudAccounts,
-  deleteCloudAccount,
-  getCloudIdentityProfiles,
-  openCloudIdentityStorageFolder,
-  previewGenerateCloudIdentityProfile,
-  refreshAccountQuota,
-  restoreCloudIdentityProfileRevision,
-  restoreCloudBaselineProfile,
-  switchCloudAccount,
-  getAutoSwitchEnabled,
-  setAutoSwitchEnabled,
-  forcePollCloudMonitor,
-  startAuthFlow,
-  listOAuthClients,
-  getActiveOAuthClient,
-  setActiveOAuthClient,
-  exportCloudAccounts,
-  importCloudAccounts,
-} from './handler';
-import { CloudAccountRepo } from '../database/cloudHandler';
-import { CloudAccountSchema } from '../../types/cloudAccount';
-import { DeviceProfileSchema, DeviceProfilesSnapshotSchema } from '../../types/account';
-import { logger } from '../../utils/logger';
-import { getSwitchMetricsSnapshot } from '../switchMetrics';
-import { getSwitchGuardSnapshot } from '../switchGuard';
-import { getDeviceHardeningSnapshot } from '../device/handler';
-
-const switchOwnerSchema = z.enum(['local-account-switch', 'cloud-account-switch']);
-const switchMetricBucketSchema = z.object({
-  switchSuccess: z.number(),
-  switchFailure: z.number(),
-  rollbackAttempt: z.number(),
-  rollbackSuccess: z.number(),
-  rollbackFailure: z.number(),
-  failureReasons: z.record(z.string(), z.number()),
-  lastFailure: z
-    .object({
-      reason: z.string(),
-      message: z.string(),
-      occurredAt: z.number(),
-    })
-    .nullable(),
-});
-const switchMetricsSnapshotSchema = z.object({
-  local: switchMetricBucketSchema,
-  cloud: switchMetricBucketSchema,
-});
-const switchGuardSnapshotSchema = z.object({
-  activeOwner: switchOwnerSchema.nullable(),
-  pendingOwners: z.array(switchOwnerSchema),
-  pendingCount: z.number(),
-});
-const switchStatusSnapshotSchema = z.object({
-  metrics: switchMetricsSnapshotSchema,
-  guard: switchGuardSnapshotSchema,
-  hardening: z.object({
-    consecutiveApplyFailures: z.number(),
-    safeModeActive: z.boolean(),
-    safeModeUntil: z.number().nullable(),
-    lastFailureReason: z.string().nullable(),
-    lastFailureStage: z.string().nullable(),
-    lastFailureAt: z.number().nullable(),
-  }),
-});
-
-function extractErrorMessage(error: unknown): string {
-  if (error instanceof Error) {
-    return error.message;
-  }
-
-  return String(error);
-}
-
-export function toSyncLocalAccountORPCError(error: unknown): ORPCError<string, undefined> {
-  const message = extractErrorMessage(error);
-  const normalized = message.toLowerCase();
-
-  if (
-    normalized.includes('unauthenticated') ||
-    normalized.includes('unauthorized') ||
-    normalized.includes('token may be expired') ||
-    normalized.includes('re-login in geminiNexus ide')
-  ) {
-    return new ORPCError('UNAUTHORIZED', { message });
-  }
-
-  if (
-    normalized.includes('no cloud account found in ide') ||
-    normalized.includes('no oauth token found in ide state') ||
-    normalized.includes('geminiNexus database not found')
-  ) {
-    return new ORPCError('BAD_REQUEST', { message });
-  }
-
-  return new ORPCError('INTERNAL_SERVER_ERROR', { message });
-}
-
-export const cloudRouter = os.router({
-  addGoogleAccount: os
-    .input(z.object({ authCode: z.string(), oauthClientKey: z.string().optional() }))
-    .output(CloudAccountSchema)
-    .handler(async ({ input }) => {
-      return addGoogleAccount(input.authCode, input.oauthClientKey);
-    }),
-
-  listCloudAccounts: os.output(z.array(CloudAccountSchema)).handler(async () => {
-    return listCloudAccounts();
-  }),
-
-  deleteCloudAccount: os
-    .input(z.object({ accountId: z.string() }))
-    .output(z.void())
-    .handler(async ({ input }) => {
-      await deleteCloudAccount(input.accountId);
-    }),
-
-  refreshAccountQuota: os
-    .input(z.object({ accountId: z.string() }))
-    .output(CloudAccountSchema)
-    .handler(async ({ input }) => {
-      return refreshAccountQuota(input.accountId);
-    }),
-
-  switchCloudAccount: os
-    .input(z.object({ accountId: z.string() }))
-    .output(z.void())
-    .handler(async ({ input }) => {
-      await switchCloudAccount(input.accountId);
-    }),
-
-  getAutoSwitchEnabled: os.output(z.boolean()).handler(async () => {
-    return getAutoSwitchEnabled();
-  }),
-
-  setAutoSwitchEnabled: os
-    .input(z.object({ enabled: z.boolean() }))
-    .output(z.void())
-    .handler(async ({ input }) => {
-      await setAutoSwitchEnabled(input.enabled);
-    }),
-
-  forcePollCloudMonitor: os.output(z.void()).handler(async () => {
-    await forcePollCloudMonitor();
-  }),
-
-  startAuthFlow: os
-    .input(z.object({ oauthClientKey: z.string().optional() }).optional())
-    .output(z.void())
-    .handler(async ({ input }) => {
-      await startAuthFlow(input?.oauthClientKey);
-    }),
-
-  listOAuthClients: os
-    .output(
-      z.array(
-        z.object({
-          key: z.string(),
-          label: z.string(),
-          client_id: z.string(),
-          is_active: z.boolean(),
-          is_builtin: z.boolean(),
-        }),
-      ),
-    )
-    .handler(async () => {
-      return listOAuthClients();
-    }),
-
-  getActiveOAuthClient: os.output(z.object({ client_key: z.string() })).handler(async () => {
-    return {
-      client_key: getActiveOAuthClient(),
-    };
-  }),
-
-  setActiveOAuthClient: os
-    .input(z.object({ clientKey: z.string() }))
-    .output(z.void())
-    .handler(async ({ input }) => {
-      setActiveOAuthClient(input.clientKey);
-    }),
-
-  setAccountProxy: os
-    .input(z.object({ accountId: z.string(), proxyUrl: z.string().nullable() }))
-    .output(z.void())
-    .handler(async ({ input }) => {
-      try {
-        await CloudAccountRepo.setAccountProxy(input.accountId, input.proxyUrl);
-      } catch (error: unknown) {
-        logger.error('[ORPC] setAccountProxy error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
-        throw error;
-      }
-    }),
-
-  syncLocalAccount: os.output(CloudAccountSchema.nullable()).handler(async () => {
-    try {
-      const result = await CloudAccountRepo.syncFromIDE();
-
-      return result;
-    } catch (error: unknown) {
-      logger.error('[ORPC] syncLocalAccount error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
-      throw toSyncLocalAccountORPCError(error);
-    }
-  }),
-
-  getSwitchStatus: os.output(switchStatusSnapshotSchema).handler(async () => {
-    return {
-      metrics: getSwitchMetricsSnapshot(),
-      guard: getSwitchGuardSnapshot(),
-      hardening: getDeviceHardeningSnapshot(),
-    };
-  }),
-
-  getIdentityProfiles: os
-    .input(z.object({ accountId: z.string() }))
-    .output(DeviceProfilesSnapshotSchema)
-    .handler(async ({ input }) => {
-      return getCloudIdentityProfiles(input.accountId);
-    }),
-
-  previewIdentityProfile: os.output(DeviceProfileSchema).handler(async () => {
-    return previewGenerateCloudIdentityProfile();
-  }),
-
-  bindIdentityProfile: os
-    .input(z.object({ accountId: z.string(), mode: z.enum(['capture', 'generate']) }))
-    .output(DeviceProfileSchema)
-    .handler(async ({ input }) => {
-      return bindCloudIdentityProfile(input.accountId, input.mode);
-    }),
-
-  bindIdentityProfileWithPayload: os
-    .input(z.object({ accountId: z.string(), profile: DeviceProfileSchema }))
-    .output(DeviceProfileSchema)
-    .handler(async ({ input }) => {
-      return bindCloudIdentityProfileWithPayload(input.accountId, input.profile);
-    }),
-
-  restoreIdentityProfileRevision: os
-    .input(z.object({ accountId: z.string(), versionId: z.string() }))
-    .output(DeviceProfileSchema)
-    .handler(async ({ input }) => {
-      return restoreCloudIdentityProfileRevision(input.accountId, input.versionId);
-    }),
-
-  restoreBaselineProfile: os
-    .input(z.object({ accountId: z.string() }))
-    .output(DeviceProfileSchema)
-    .handler(async ({ input }) => {
-      return restoreCloudBaselineProfile(input.accountId);
-    }),
-
-  deleteIdentityProfileRevision: os
-    .input(z.object({ accountId: z.string(), versionId: z.string() }))
-    .output(z.void())
-    .handler(async ({ input }) => {
-      await deleteCloudIdentityProfileRevision(input.accountId, input.versionId);
-    }),
-
-  openIdentityStorageFolder: os.output(z.void()).handler(async () => {
-    await openCloudIdentityStorageFolder();
-  }),
-
-  exportCloudAccounts: os
-    .input(z.object({ stripTokens: z.boolean().default(false) }))
-    .output(z.string())
-    .handler(async ({ input }) => {
-      try {
-        return await exportCloudAccounts(input.stripTokens);
-      } catch (error: unknown) {
-        logger.error('[ORPC] exportCloudAccounts error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
-        throw error;
-      }
-    }),
-
-  importCloudAccounts: os
-    .input(
-      z.object({
-        jsonContent: z.string(),
-        strategy: z.enum(['merge', 'overwrite', 'skip-existing']).default('merge'),
-      }),
-    )
-    .output(
-      z.object({
-        imported: z.number(),
-        skipped: z.number(),
-        updated: z.number(),
-        errors: z.array(z.string()),
-      }),
-    )
-    .handler(async ({ input }) => {
-      try {
-        return await importCloudAccounts(input.jsonContent, input.strategy);
-      } catch (error: unknown) {
-        logger.error('[ORPC] importCloudAccounts error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
-        throw error;
-      }
-    }),
-});
+import { z } from 'zod';
+import { os, ORPCError } from '@orpc/server';
+import {
+  addGoogleAccount,
+  bindCloudIdentityProfile,
+  bindCloudIdentityProfileWithPayload,
+  deleteCloudIdentityProfileRevision,
+  listCloudAccounts,
+  deleteCloudAccount,
+  getCloudIdentityProfiles,
+  openCloudIdentityStorageFolder,
+  previewGenerateCloudIdentityProfile,
+  refreshAccountQuota,
+  restoreCloudIdentityProfileRevision,
+  restoreCloudBaselineProfile,
+  switchCloudAccount,
+  getAutoSwitchEnabled,
+  setAutoSwitchEnabled,
+  forcePollCloudMonitor,
+  startAuthFlow,
+  listOAuthClients,
+  getActiveOAuthClient,
+  setActiveOAuthClient,
+  exportCloudAccounts,
+  importCloudAccounts,
+} from './handler';
+import { CloudAccountRepo } from '../database/cloudHandler';
+import { CloudAccountSchema } from '../../types/cloudAccount';
+import { DeviceProfileSchema, DeviceProfilesSnapshotSchema } from '../../types/account';
+import { logger } from '../../utils/logger';
+import { getSwitchMetricsSnapshot } from '../switchMetrics';
+import { getSwitchGuardSnapshot } from '../switchGuard';
+import { getDeviceHardeningSnapshot } from '../device/handler';
+
+const switchOwnerSchema = z.enum(['local-account-switch', 'cloud-account-switch']);
+const switchMetricBucketSchema = z.object({
+  switchSuccess: z.number(),
+  switchFailure: z.number(),
+  rollbackAttempt: z.number(),
+  rollbackSuccess: z.number(),
+  rollbackFailure: z.number(),
+  failureReasons: z.record(z.string(), z.number()),
+  lastFailure: z
+    .object({
+      reason: z.string(),
+      message: z.string(),
+      occurredAt: z.number(),
+    })
+    .nullable(),
+});
+const switchMetricsSnapshotSchema = z.object({
+  local: switchMetricBucketSchema,
+  cloud: switchMetricBucketSchema,
+});
+const switchGuardSnapshotSchema = z.object({
+  activeOwner: switchOwnerSchema.nullable(),
+  pendingOwners: z.array(switchOwnerSchema),
+  pendingCount: z.number(),
+});
+const switchStatusSnapshotSchema = z.object({
+  metrics: switchMetricsSnapshotSchema,
+  guard: switchGuardSnapshotSchema,
+  hardening: z.object({
+    consecutiveApplyFailures: z.number(),
+    safeModeActive: z.boolean(),
+    safeModeUntil: z.number().nullable(),
+    lastFailureReason: z.string().nullable(),
+    lastFailureStage: z.string().nullable(),
+    lastFailureAt: z.number().nullable(),
+  }),
+});
+
+function extractErrorMessage(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  return String(error);
+}
+
+export function toSyncLocalAccountORPCError(error: unknown): ORPCError<string, undefined> {
+  const message = extractErrorMessage(error);
+  const normalized = message.toLowerCase();
+
+  if (
+    normalized.includes('unauthenticated') ||
+    normalized.includes('unauthorized') ||
+    normalized.includes('token may be expired') ||
+    normalized.includes('re-login in geminiNexus ide')
+  ) {
+    return new ORPCError('UNAUTHORIZED', { message });
+  }
+
+  if (
+    normalized.includes('no cloud account found in ide') ||
+    normalized.includes('no oauth token found in ide state') ||
+    normalized.includes('geminiNexus database not found')
+  ) {
+    return new ORPCError('BAD_REQUEST', { message });
+  }
+
+  return new ORPCError('INTERNAL_SERVER_ERROR', { message });
+}
+
+export const cloudRouter = os.router({
+  addGoogleAccount: os
+    .input(z.object({ authCode: z.string(), oauthClientKey: z.string().optional() }))
+    .output(CloudAccountSchema)
+    .handler(async ({ input }) => {
+      return addGoogleAccount(input.authCode, input.oauthClientKey);
+    }),
+
+  listCloudAccounts: os.output(z.array(CloudAccountSchema)).handler(async () => {
+    return listCloudAccounts();
+  }),
+
+  deleteCloudAccount: os
+    .input(z.object({ accountId: z.string() }))
+    .output(z.void())
+    .handler(async ({ input }) => {
+      await deleteCloudAccount(input.accountId);
+    }),
+
+  refreshAccountQuota: os
+    .input(z.object({ accountId: z.string() }))
+    .output(CloudAccountSchema)
+    .handler(async ({ input }) => {
+      return refreshAccountQuota(input.accountId);
+    }),
+
+  switchCloudAccount: os
+    .input(z.object({ accountId: z.string() }))
+    .output(z.void())
+    .handler(async ({ input }) => {
+      await switchCloudAccount(input.accountId);
+    }),
+
+  getAutoSwitchEnabled: os.output(z.boolean()).handler(async () => {
+    return getAutoSwitchEnabled();
+  }),
+
+  setAutoSwitchEnabled: os
+    .input(z.object({ enabled: z.boolean() }))
+    .output(z.void())
+    .handler(async ({ input }) => {
+      await setAutoSwitchEnabled(input.enabled);
+    }),
+
+  forcePollCloudMonitor: os.output(z.void()).handler(async () => {
+    await forcePollCloudMonitor();
+  }),
+
+  startAuthFlow: os
+    .input(z.object({ oauthClientKey: z.string().optional() }).optional())
+    .output(z.void())
+    .handler(async ({ input }) => {
+      await startAuthFlow(input?.oauthClientKey);
+    }),
+
+  listOAuthClients: os
+    .output(
+      z.array(
+        z.object({
+          key: z.string(),
+          label: z.string(),
+          client_id: z.string(),
+          is_active: z.boolean(),
+          is_builtin: z.boolean(),
+        }),
+      ),
+    )
+    .handler(async () => {
+      return listOAuthClients();
+    }),
+
+  getActiveOAuthClient: os.output(z.object({ client_key: z.string() })).handler(async () => {
+    return {
+      client_key: getActiveOAuthClient(),
+    };
+  }),
+
+  setActiveOAuthClient: os
+    .input(z.object({ clientKey: z.string() }))
+    .output(z.void())
+    .handler(async ({ input }) => {
+      setActiveOAuthClient(input.clientKey);
+    }),
+
+  setAccountProxy: os
+    .input(z.object({ accountId: z.string(), proxyUrl: z.string().nullable() }))
+    .output(z.void())
+    .handler(async ({ input }) => {
+      try {
+        await CloudAccountRepo.setAccountProxy(input.accountId, input.proxyUrl);
+      } catch (error: unknown) {
+        logger.error('[ORPC] setAccountProxy error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
+        throw error;
+      }
+    }),
+
+  syncLocalAccount: os.output(CloudAccountSchema.nullable()).handler(async () => {
+    try {
+      const result = await CloudAccountRepo.syncFromIDE();
+
+      return result;
+    } catch (error: unknown) {
+      logger.error('[ORPC] syncLocalAccount error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
+      throw toSyncLocalAccountORPCError(error);
+    }
+  }),
+
+  getSwitchStatus: os.output(switchStatusSnapshotSchema).handler(async () => {
+    return {
+      metrics: getSwitchMetricsSnapshot(),
+      guard: getSwitchGuardSnapshot(),
+      hardening: getDeviceHardeningSnapshot(),
+    };
+  }),
+
+  getIdentityProfiles: os
+    .input(z.object({ accountId: z.string() }))
+    .output(DeviceProfilesSnapshotSchema)
+    .handler(async ({ input }) => {
+      return getCloudIdentityProfiles(input.accountId);
+    }),
+
+  previewIdentityProfile: os.output(DeviceProfileSchema).handler(async () => {
+    return previewGenerateCloudIdentityProfile();
+  }),
+
+  bindIdentityProfile: os
+    .input(z.object({ accountId: z.string(), mode: z.enum(['capture', 'generate']) }))
+    .output(DeviceProfileSchema)
+    .handler(async ({ input }) => {
+      return bindCloudIdentityProfile(input.accountId, input.mode);
+    }),
+
+  bindIdentityProfileWithPayload: os
+    .input(z.object({ accountId: z.string(), profile: DeviceProfileSchema }))
+    .output(DeviceProfileSchema)
+    .handler(async ({ input }) => {
+      return bindCloudIdentityProfileWithPayload(input.accountId, input.profile);
+    }),
+
+  restoreIdentityProfileRevision: os
+    .input(z.object({ accountId: z.string(), versionId: z.string() }))
+    .output(DeviceProfileSchema)
+    .handler(async ({ input }) => {
+      return restoreCloudIdentityProfileRevision(input.accountId, input.versionId);
+    }),
+
+  restoreBaselineProfile: os
+    .input(z.object({ accountId: z.string() }))
+    .output(DeviceProfileSchema)
+    .handler(async ({ input }) => {
+      return restoreCloudBaselineProfile(input.accountId);
+    }),
+
+  deleteIdentityProfileRevision: os
+    .input(z.object({ accountId: z.string(), versionId: z.string() }))
+    .output(z.void())
+    .handler(async ({ input }) => {
+      await deleteCloudIdentityProfileRevision(input.accountId, input.versionId);
+    }),
+
+  openIdentityStorageFolder: os.output(z.void()).handler(async () => {
+    await openCloudIdentityStorageFolder();
+  }),
+
+  exportCloudAccounts: os
+    .input(z.object({ stripTokens: z.boolean().default(false) }))
+    .output(z.string())
+    .handler(async ({ input }) => {
+      try {
+        return await exportCloudAccounts(input.stripTokens);
+      } catch (error: unknown) {
+        logger.error('[ORPC] exportCloudAccounts error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
+        throw error;
+      }
+    }),
+
+  importCloudAccounts: os
+    .input(
+      z.object({
+        jsonContent: z.string(),
+        strategy: z.enum(['merge', 'overwrite', 'skip-existing']).default('merge'),
+      }),
+    )
+    .output(
+      z.object({
+        imported: z.number(),
+        skipped: z.number(),
+        updated: z.number(),
+        errors: z.array(z.string()),
+      }),
+    )
+    .handler(async ({ input }) => {
+      try {
+        return await importCloudAccounts(input.jsonContent, input.strategy);
+      } catch (error: unknown) {
+        logger.error('[ORPC] importCloudAccounts error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
+        throw error;
+      }
+    }),
+});

src/ipc/config/handlers.ts

@@ -1,22 +1,22 @@
-import { AppConfig } from '../../types/config';
-import { ConfigManager } from './manager';
-import { syncAutoStart } from '../../utils/autoStart';
-import { logger } from '../../utils/logger';
-import { setServerConfig } from '../../server/server-config';
-
-export function loadConfig(): AppConfig {
-  return ConfigManager.loadConfig();
-}
-
-export async function saveConfig(config: AppConfig): Promise<void> {
-  // Logic to notify proxy server if configuration changes (hot update)
-  // Logic to update Tray if language changes
-  // For now just save
-  const previous = ConfigManager.getCachedConfig() ?? ConfigManager.loadConfig();
-  await ConfigManager.saveConfig(config);
-  setServerConfig(config.proxy);
-  logger.setErrorReportingEnabled(config.error_reporting_enabled);
-  if (previous.auto_startup !== config.auto_startup) {
-    syncAutoStart(config);
-  }
-}
+import { AppConfig } from '../../types/config';
+import { ConfigManager } from './manager';
+import { syncAutoStart } from '../../utils/autoStart';
+import { logger } from '../../utils/logger';
+import { setServerConfig } from '../../server/server-config';
+
+export function loadConfig(): AppConfig {
+  return ConfigManager.loadConfig();
+}
+
+export async function saveConfig(config: AppConfig): Promise<void> {
+  // Logic to notify proxy server if configuration changes (hot update)
+  // Logic to update Tray if language changes
+  // For now just save
+  const previous = ConfigManager.getCachedConfig() ?? ConfigManager.loadConfig();
+  await ConfigManager.saveConfig(config);
+  setServerConfig(config.proxy);
+  logger.setErrorReportingEnabled(config.error_reporting_enabled);
+  if (previous.auto_startup !== config.auto_startup) {
+    syncAutoStart(config);
+  }
+}

src/ipc/config/manager.ts

@@ -1,83 +1,83 @@
-import path from 'path';
-import fs from 'fs';
-import { AppConfig, DEFAULT_APP_CONFIG } from '../../types/config';
-import { getAppDataDir } from '../../utils/paths';
-import { logger } from '../../utils/logger';
-
-const CONFIG_FILENAME = 'gui_config.json';
-
-export class ConfigManager {
-  private static cachedConfig: AppConfig | null = null;
-  private static saveQueue: Promise<void> = Promise.resolve();
-
-  private static getConfigPath(): string {
-    const appDataDir = getAppDataDir();
-    if (!fs.existsSync(appDataDir)) {
-      fs.mkdirSync(appDataDir, { recursive: true });
-    }
-    return path.join(appDataDir, CONFIG_FILENAME);
-  }
-
-  static loadConfig(): AppConfig {
-    try {
-      const configPath = this.getConfigPath();
-      if (!fs.existsSync(configPath)) {
-        logger.info(`Config: File not found at ${configPath}, returning default`);
-        this.cachedConfig = DEFAULT_APP_CONFIG;
-        return DEFAULT_APP_CONFIG;
-      }
-
-      const content = fs.readFileSync(configPath, 'utf-8');
-      const raw = JSON.parse(content);
-
-      // Merge with default to ensure new fields are present
-      // Zod parse helps validate
-      const merged: AppConfig = {
-        ...DEFAULT_APP_CONFIG,
-        ...raw,
-        proxy: { ...DEFAULT_APP_CONFIG.proxy, ...(raw.proxy || {}) },
-      };
-
-      // Fix deep merge for upstream_proxy if needed
-      if (raw.proxy && raw.proxy.upstream_proxy) {
-        merged.proxy.upstream_proxy = {
-          ...DEFAULT_APP_CONFIG.proxy.upstream_proxy,
-          ...raw.proxy.upstream_proxy,
-        };
-      }
-
-      // Handle Anthropic Mapping Map vs Object
-      // In JSON it's object
-
-      this.cachedConfig = merged;
-      return merged;
-    } catch (e) {
-      logger.error('Config: Failed to load config', e);
-      this.cachedConfig = DEFAULT_APP_CONFIG;
-      return DEFAULT_APP_CONFIG;
-    }
-  }
-
-  static getCachedConfig(): AppConfig | null {
-    return this.cachedConfig;
-  }
-
-  static async saveConfig(config: AppConfig): Promise<void> {
-    const configPath = this.getConfigPath();
-    const content = JSON.stringify(config, null, 2);
-
-    this.saveQueue = this.saveQueue
-      .catch(() => undefined)
-      .then(async () => {
-        await fs.promises.writeFile(configPath, content, 'utf-8');
-        this.cachedConfig = config;
-        logger.info(`Config: Saved to ${configPath}`);
-      })
-      .catch((e) => {
-        logger.error('Config: Failed to save config', e);
-        throw e;
-      });
-
-    return this.saveQueue;
-  }
-}
+import path from 'path';
+import fs from 'fs';
+import { AppConfig, DEFAULT_APP_CONFIG } from '../../types/config';
+import { getAppDataDir } from '../../utils/paths';
+import { logger } from '../../utils/logger';
+
+const CONFIG_FILENAME = 'gui_config.json';
+
+export class ConfigManager {
+  private static cachedConfig: AppConfig | null = null;
+  private static saveQueue: Promise<void> = Promise.resolve();
+
+  private static getConfigPath(): string {
+    const appDataDir = getAppDataDir();
+    if (!fs.existsSync(appDataDir)) {
+      fs.mkdirSync(appDataDir, { recursive: true });
+    }
+    return path.join(appDataDir, CONFIG_FILENAME);
+  }
+
+  static loadConfig(): AppConfig {
+    try {
+      const configPath = this.getConfigPath();
+      if (!fs.existsSync(configPath)) {
+        logger.info(`Config: File not found at ${configPath}, returning default`);
+        this.cachedConfig = DEFAULT_APP_CONFIG;
+        return DEFAULT_APP_CONFIG;
+      }
+
+      const content = fs.readFileSync(configPath, 'utf-8');
+      const raw = JSON.parse(content);
+
+      // Merge with default to ensure new fields are present
+      // Zod parse helps validate
+      const merged: AppConfig = {
+        ...DEFAULT_APP_CONFIG,
+        ...raw,
+        proxy: { ...DEFAULT_APP_CONFIG.proxy, ...(raw.proxy || {}) },
+      };
+
+      // Fix deep merge for upstream_proxy if needed
+      if (raw.proxy && raw.proxy.upstream_proxy) {
+        merged.proxy.upstream_proxy = {
+          ...DEFAULT_APP_CONFIG.proxy.upstream_proxy,
+          ...raw.proxy.upstream_proxy,
+        };
+      }
+
+      // Handle Anthropic Mapping Map vs Object
+      // In JSON it's object
+
+      this.cachedConfig = merged;
+      return merged;
+    } catch (e) {
+      logger.error('Config: Failed to load config', e);
+      this.cachedConfig = DEFAULT_APP_CONFIG;
+      return DEFAULT_APP_CONFIG;
+    }
+  }
+
+  static getCachedConfig(): AppConfig | null {
+    return this.cachedConfig;
+  }
+
+  static async saveConfig(config: AppConfig): Promise<void> {
+    const configPath = this.getConfigPath();
+    const content = JSON.stringify(config, null, 2);
+
+    this.saveQueue = this.saveQueue
+      .catch(() => undefined)
+      .then(async () => {
+        await fs.promises.writeFile(configPath, content, 'utf-8');
+        this.cachedConfig = config;
+        logger.info(`Config: Saved to ${configPath}`);
+      })
+      .catch((e) => {
+        logger.error('Config: Failed to save config', e);
+        throw e;
+      });
+
+    return this.saveQueue;
+  }
+}

src/ipc/config/router.ts

@@ -1,17 +1,17 @@
-import { z } from 'zod';
-import { os } from '@orpc/server';
-import { AppConfigSchema } from '../../types/config';
-import { loadConfig, saveConfig } from './handlers';
-
-export const configRouter = os.router({
-  load: os.output(AppConfigSchema).handler(async () => {
-    return loadConfig();
-  }),
-
-  save: os
-    .input(AppConfigSchema)
-    .output(z.void())
-    .handler(async ({ input }) => {
-      await saveConfig(input);
-    }),
-});
+import { z } from 'zod';
+import { os } from '@orpc/server';
+import { AppConfigSchema } from '../../types/config';
+import { loadConfig, saveConfig } from './handlers';
+
+export const configRouter = os.router({
+  load: os.output(AppConfigSchema).handler(async () => {
+    return loadConfig();
+  }),
+
+  save: os
+    .input(AppConfigSchema)
+    .output(z.void())
+    .handler(async ({ input }) => {
+      await saveConfig(input);
+    }),
+});

src/ipc/context.ts

@@ -1,26 +1,26 @@
-import { os } from '@orpc/server';
-import { BrowserWindow } from 'electron';
-
-class IPCContext {
-  public mainWindow: BrowserWindow | undefined;
-
-  public setMainWindow(window: BrowserWindow) {
-    this.mainWindow = window;
-  }
-
-  public get mainWindowContext() {
-    // Return a middleware that checks for the window at execution time, not import time
-    return os.middleware(({ next }) => {
-      if (!this.mainWindow) {
-        throw new Error('Main window is not set in IPC context.');
-      }
-      return next({
-        context: {
-          window: this.mainWindow,
-        },
-      });
-    });
-  }
-}
-
-export const ipcContext = new IPCContext();
+import { os } from '@orpc/server';
+import { BrowserWindow } from 'electron';
+
+class IPCContext {
+  public mainWindow: BrowserWindow | undefined;
+
+  public setMainWindow(window: BrowserWindow) {
+    this.mainWindow = window;
+  }
+
+  public get mainWindowContext() {
+    // Return a middleware that checks for the window at execution time, not import time
+    return os.middleware(({ next }) => {
+      if (!this.mainWindow) {
+        throw new Error('Main window is not set in IPC context.');
+      }
+      return next({
+        context: {
+          window: this.mainWindow,
+        },
+      });
+    });
+  }
+}
+
+export const ipcContext = new IPCContext();

src/ipc/database/dbConnection.ts

@@ -1,34 +1,34 @@
-import Database from 'better-sqlite3';
-import { drizzle, type BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
-import * as schema from './schema';
-
-export interface DbConfigOptions {
-  readOnly?: boolean;
-  busyTimeoutMs?: number;
-  enableWal?: boolean;
-}
-
-export interface DrizzleConnection {
-  raw: Database.Database;
-  orm: BetterSQLite3Database<typeof schema>;
-}
-
-export function configureDatabase(db: Database.Database, options: DbConfigOptions = {}): void {
-  const busyTimeoutMs = options.busyTimeoutMs ?? 3000;
-  const enableWal = options.enableWal ?? !options.readOnly;
-  if (enableWal) {
-    db.pragma('journal_mode = WAL');
-  }
-  db.pragma(`busy_timeout = ${busyTimeoutMs}`);
-}
-
-export function openDrizzleConnection(
-  dbPath: string,
-  options: Database.Options = {},
-  config: DbConfigOptions = {},
-): DrizzleConnection {
-  const raw = new Database(dbPath, options);
-  configureDatabase(raw, config);
-  const orm = drizzle(raw, { schema });
-  return { raw, orm };
-}
+import Database from 'better-sqlite3';
+import { drizzle, type BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import * as schema from './schema';
+
+export interface DbConfigOptions {
+  readOnly?: boolean;
+  busyTimeoutMs?: number;
+  enableWal?: boolean;
+}
+
+export interface DrizzleConnection {
+  raw: Database.Database;
+  orm: BetterSQLite3Database<typeof schema>;
+}
+
+export function configureDatabase(db: Database.Database, options: DbConfigOptions = {}): void {
+  const busyTimeoutMs = options.busyTimeoutMs ?? 3000;
+  const enableWal = options.enableWal ?? !options.readOnly;
+  if (enableWal) {
+    db.pragma('journal_mode = WAL');
+  }
+  db.pragma(`busy_timeout = ${busyTimeoutMs}`);
+}
+
+export function openDrizzleConnection(
+  dbPath: string,
+  options: Database.Options = {},
+  config: DbConfigOptions = {},
+): DrizzleConnection {
+  const raw = new Database(dbPath, options);
+  configureDatabase(raw, config);
+  const orm = drizzle(raw, { schema });
+  return { raw, orm };
+}

src/ipc/database/handler.ts

@@ -1,349 +1,349 @@
-import Database from 'better-sqlite3';
-import fs from 'fs';
-import path from 'path';
-import { eq } from 'drizzle-orm';
-import { isString } from 'lodash-es';
-import { AccountBackupData, AccountInfo } from '../../types/account';
-import { ItemTableValueRowSchema, type ItemTableKey } from '../../types/db';
-import { logger } from '../../utils/logger';
-import { getGeminiNexusDbPaths } from '../../utils/paths';
-import { parseRow } from '../../utils/sqlite';
-import { openDrizzleConnection } from './dbConnection';
-import { itemTable } from './schema';
-
-const KEYS_TO_BACKUP: ItemTableKey[] = [
-  'geminiNexusAuthStatus',
-  'jetskiStateSync.agentManagerInitState',
-  'geminiNexusUnifiedStateSync.oauthToken',
-];
-
-function openIdeDb(dbPath: string, readOnly = false): ReturnType<typeof openDrizzleConnection> {
-  return openDrizzleConnection(
-    dbPath,
-    { readonly: readOnly, fileMustExist: false },
-    { readOnly, busyTimeoutMs: 3000 },
-  );
-}
-
-/**
- * Initializes the database and ensures WAL mode is enabled.
- * Should be called on application startup.
- */
-export function initDatabase(): void {
-  try {
-    const dbPaths = getGeminiNexusDbPaths();
-    if (dbPaths.length === 0) {
-      return;
-    }
-
-    const { raw } = getDatabaseConnection();
-    raw.close();
-    logger.info('Database initialized and verified (WAL mode)');
-  } catch (error) {
-    logger.error('Failed to initialize database on startup', error);
-  }
-}
-
-/**
- * Ensures that the database file exists.
- * @param dbPath {string} The path to the database file.
- * @returns {void}
- */
-function ensureDatabaseExists(dbPath: string): void {
-  if (fs.existsSync(dbPath)) {
-    return;
-  }
-
-  logger.info(`Database file not found at ${dbPath}. Creating new database...`);
-
-  const dir = path.dirname(dbPath);
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir, { recursive: true });
-  }
-
-  let db: Database.Database | null = null;
-  try {
-    db = new Database(dbPath);
-    // NOTE Initialize schema
-    db.exec(`
-      CREATE TABLE IF NOT EXISTS ItemTable (
-        key TEXT PRIMARY KEY,
-        value TEXT
-      )
-    `);
-    logger.info('Created new database with ItemTable schema.');
-  } catch (error) {
-    logger.error('Failed to create new database', error);
-    throw error;
-  } finally {
-    if (db) db.close();
-  }
-}
-
-/**
- * Gets a database connection.
- * @param dbPath {string} The path to the database file.
- * @returns {ReturnType<typeof openDrizzleConnection>} The database connection.
- */
-export function getDatabaseConnection(dbPath?: string): ReturnType<typeof openDrizzleConnection> {
-  const targetPath = dbPath || getGeminiNexusDbPaths()[0];
-
-  if (!targetPath) {
-    throw new Error('No Gemini Nexus database path found');
-  }
-
-  ensureDatabaseExists(targetPath);
-
-  try {
-    return openIdeDb(targetPath);
-  } catch (error: unknown) {
-    const err = error as { code?: string };
-    if (err.code === 'SQLITE_BUSY' || err.code === 'SQLITE_LOCKED') {
-      throw new Error('Database is locked. Please close Gemini Nexus before proceeding.');
-    }
-    throw error;
-  }
-}
-
-function readItemValue(
-  orm: ReturnType<typeof openDrizzleConnection>['orm'],
-  key: string,
-  context: string,
-): string | null {
-  const rows = orm
-    .select({ value: itemTable.value })
-    .from(itemTable)
-    .where(eq(itemTable.key, key))
-    .all();
-  const row = parseRow(ItemTableValueRowSchema, rows[0], context);
-  return row?.value ?? null;
-}
-
-/**
- * Gets the current account info.
- * @returns {AccountInfo} The current account info.
- */
-export function getCurrentAccountInfo(): AccountInfo {
-  // NOTE Database existence is now handled by getDatabaseConnection
-  let connection: ReturnType<typeof openDrizzleConnection> | null = null;
-  try {
-    connection = getDatabaseConnection();
-    const { orm } = connection;
-
-    // Query for auth status
-    const authValue = readItemValue(
-      orm,
-      'geminiNexusAuthStatus',
-      'ide.itemTable.geminiNexusAuthStatus',
-    );
-    let authStatus = null;
-    if (authValue) {
-      try {
-        authStatus = JSON.parse(authValue);
-      } catch {
-        // NOTE Ignore JSON parse errors
-      }
-    }
-
-    // NOTE Query for user info (usually in jetskiStateSync.agentManagerInitState or similar)
-    const initValue = readItemValue(
-      orm,
-      'jetskiStateSync.agentManagerInitState',
-      'ide.itemTable.jetskiStateSync.agentManagerInitState',
-    );
-    let initState = null;
-    if (initValue) {
-      try {
-        initState = JSON.parse(initValue);
-      } catch {
-        // Ignore JSON parse errors (this key often contains non-JSON data)
-      }
-    }
-
-    // Query for google.geminiNexus
-    const googleValue = readItemValue(
-      orm,
-      'google.geminiNexus',
-      'ide.itemTable.google.geminiNexus',
-    );
-    let googleState = null;
-    if (googleValue) {
-      try {
-        googleState = JSON.parse(googleValue);
-      } catch {
-        // Ignore JSON parse errors
-      }
-    }
-
-    // Query for geminiNexusUserSettings.allUserSettings
-    const settingsValue = readItemValue(
-      orm,
-      'geminiNexusUserSettings.allUserSettings',
-      'ide.itemTable.geminiNexusUserSettings.allUserSettings',
-    );
-    let settingsState = null;
-    if (settingsValue) {
-      try {
-        settingsState = JSON.parse(settingsValue);
-      } catch {
-        // Ignore JSON parse errors
-      }
-    }
-
-    // Helper to find email in object
-    const findEmail = (obj: { email?: string; user?: { email?: string } }): string => {
-      if (!obj) return '';
-      if (isString(obj.email)) return obj.email;
-      if (obj.user && isString(obj.user.email)) return obj.user.email;
-      return '';
-    };
-
-    const email =
-      findEmail(authStatus) ||
-      findEmail(initState) ||
-      findEmail(googleState) ||
-      findEmail(settingsState) ||
-      '';
-
-    const name = authStatus?.user?.name || initState?.user?.name || authStatus?.name || '';
-    const isAuthenticated = !!email;
-
-    logger.info(`Account info: authenticated=${isAuthenticated}, email=${email || 'none'}`);
-
-    return {
-      email,
-      name,
-      isAuthenticated,
-    };
-  } catch (error) {
-    logger.error('Failed to get current account info', error);
-    throw error;
-  } finally {
-    if (connection) {
-      connection.raw.close();
-    }
-  }
-}
-
-export function backupAccount(account: AccountBackupData['account']): AccountBackupData {
-  let connection: ReturnType<typeof openDrizzleConnection> | null = null;
-  try {
-    connection = getDatabaseConnection();
-    const { orm } = connection;
-
-    // NOTE Backup only specific keys
-    const data: Record<string, unknown> = {};
-
-    for (const key of KEYS_TO_BACKUP) {
-      const value = readItemValue(orm, key, `ide.itemTable.backup.${key}`);
-      if (value) {
-        try {
-          data[key] = JSON.parse(value);
-        } catch {
-          data[key] = value;
-        }
-        logger.debug(`Backed up key: ${key}`);
-      } else {
-        logger.debug(`Key not found: ${key}`);
-      }
-    }
-
-    // NOTE Add metadata
-    data['account_email'] = account.email;
-    data['backup_time'] = new Date().toISOString();
-
-    return {
-      version: '1.0',
-      account,
-      data,
-    };
-  } catch (error) {
-    logger.error('Failed to backup account', error);
-    throw error;
-  } finally {
-    if (connection) {
-      connection.raw.close();
-    }
-  }
-}
-
-/**
- * Restores the account data to the database.
- * @param backup {AccountBackupData} The backup data to restore.
- * @throws {Error} If the backup data cannot be restored.
- */
-export function restoreAccount(backup: AccountBackupData): void {
-  const dbPaths = getGeminiNexusDbPaths();
-  if (dbPaths.length === 0) {
-    throw new Error('No Gemini Nexus database paths found');
-  }
-
-  let successCount = 0;
-
-  for (const dbPath of dbPaths) {
-    // NOTE Restore main DB
-    if (_restoreSingleDb(dbPath, backup)) {
-      successCount++;
-    }
-
-    // NOTE Restore backup DB (if exists)
-    const backupDbPath = dbPath.replace(/\.vscdb$/, '.vscdb.backup');
-    if (fs.existsSync(backupDbPath)) {
-      if (_restoreSingleDb(backupDbPath, backup)) {
-        successCount++;
-      }
-    }
-  }
-
-  if (successCount > 0) {
-    logger.info(`Account data restored successfully to ${successCount} files`);
-  } else {
-    throw new Error('Failed to restore account data to any database file');
-  }
-}
-
-/**
- * Restores a single database file.
- * @param dbPath {string} The path to the database file.
- * @param backup {AccountBackupData} The backup data to restore.
- * @returns {boolean} True if the database file was restored successfully, false otherwise.
- */
-function _restoreSingleDb(dbPath: string, backup: AccountBackupData): boolean {
-  if (!fs.existsSync(dbPath)) {
-    return false;
-  }
-
-  logger.info(`Restoring database: ${dbPath}`);
-  let connection: ReturnType<typeof openDrizzleConnection> | null = null;
-
-  try {
-    connection = getDatabaseConnection(dbPath);
-    const { orm } = connection;
-    orm.transaction((tx) => {
-      // NOTE Only restore the keys that were backed up
-      for (const key of KEYS_TO_BACKUP) {
-        if (key in backup.data) {
-          const value = backup.data[key];
-          const stringValue = isString(value) ? value : JSON.stringify(value);
-          tx.insert(itemTable)
-            .values({ key, value: stringValue })
-            .onConflictDoUpdate({
-              target: itemTable.key,
-              set: { value: stringValue },
-            })
-            .run();
-          logger.debug(`Restored key: ${key}`);
-        }
-      }
-    });
-    logger.info(`Database restoration complete: ${dbPath}`);
-    return true;
-  } catch (error) {
-    logger.error(`Failed to restore database: ${dbPath}`, error);
-    return false;
-  } finally {
-    if (connection) {
-      connection.raw.close();
-    }
-  }
-}
+import Database from 'better-sqlite3';
+import fs from 'fs';
+import path from 'path';
+import { eq } from 'drizzle-orm';
+import { isString } from 'lodash-es';
+import { AccountBackupData, AccountInfo } from '../../types/account';
+import { ItemTableValueRowSchema, type ItemTableKey } from '../../types/db';
+import { logger } from '../../utils/logger';
+import { getGeminiNexusDbPaths } from '../../utils/paths';
+import { parseRow } from '../../utils/sqlite';
+import { openDrizzleConnection } from './dbConnection';
+import { itemTable } from './schema';
+
+const KEYS_TO_BACKUP: ItemTableKey[] = [
+  'geminiNexusAuthStatus',
+  'jetskiStateSync.agentManagerInitState',
+  'geminiNexusUnifiedStateSync.oauthToken',
+];
+
+function openIdeDb(dbPath: string, readOnly = false): ReturnType<typeof openDrizzleConnection> {
+  return openDrizzleConnection(
+    dbPath,
+    { readonly: readOnly, fileMustExist: false },
+    { readOnly, busyTimeoutMs: 3000 },
+  );
+}
+
+/**
+ * Initializes the database and ensures WAL mode is enabled.
+ * Should be called on application startup.
+ */
+export function initDatabase(): void {
+  try {
+    const dbPaths = getGeminiNexusDbPaths();
+    if (dbPaths.length === 0) {
+      return;
+    }
+
+    const { raw } = getDatabaseConnection();
+    raw.close();
+    logger.info('Database initialized and verified (WAL mode)');
+  } catch (error) {
+    logger.error('Failed to initialize database on startup', error);
+  }
+}
+
+/**
+ * Ensures that the database file exists.
+ * @param dbPath {string} The path to the database file.
+ * @returns {void}
+ */
+function ensureDatabaseExists(dbPath: string): void {
+  if (fs.existsSync(dbPath)) {
+    return;
+  }
+
+  logger.info(`Database file not found at ${dbPath}. Creating new database...`);
+
+  const dir = path.dirname(dbPath);
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+
+  let db: Database.Database | null = null;
+  try {
+    db = new Database(dbPath);
+    // NOTE Initialize schema
+    db.exec(`
+      CREATE TABLE IF NOT EXISTS ItemTable (
+        key TEXT PRIMARY KEY,
+        value TEXT
+      )
+    `);
+    logger.info('Created new database with ItemTable schema.');
+  } catch (error) {
+    logger.error('Failed to create new database', error);
+    throw error;
+  } finally {
+    if (db) db.close();
+  }
+}
+
+/**
+ * Gets a database connection.
+ * @param dbPath {string} The path to the database file.
+ * @returns {ReturnType<typeof openDrizzleConnection>} The database connection.
+ */
+export function getDatabaseConnection(dbPath?: string): ReturnType<typeof openDrizzleConnection> {
+  const targetPath = dbPath || getGeminiNexusDbPaths()[0];
+
+  if (!targetPath) {
+    throw new Error('No Gemini Nexus database path found');
+  }
+
+  ensureDatabaseExists(targetPath);
+
+  try {
+    return openIdeDb(targetPath);
+  } catch (error: unknown) {
+    const err = error as { code?: string };
+    if (err.code === 'SQLITE_BUSY' || err.code === 'SQLITE_LOCKED') {
+      throw new Error('Database is locked. Please close Gemini Nexus before proceeding.');
+    }
+    throw error;
+  }
+}
+
+function readItemValue(
+  orm: ReturnType<typeof openDrizzleConnection>['orm'],
+  key: string,
+  context: string,
+): string | null {
+  const rows = orm
+    .select({ value: itemTable.value })
+    .from(itemTable)
+    .where(eq(itemTable.key, key))
+    .all();
+  const row = parseRow(ItemTableValueRowSchema, rows[0], context);
+  return row?.value ?? null;
+}
+
+/**
+ * Gets the current account info.
+ * @returns {AccountInfo} The current account info.
+ */
+export function getCurrentAccountInfo(): AccountInfo {
+  // NOTE Database existence is now handled by getDatabaseConnection
+  let connection: ReturnType<typeof openDrizzleConnection> | null = null;
+  try {
+    connection = getDatabaseConnection();
+    const { orm } = connection;
+
+    // Query for auth status
+    const authValue = readItemValue(
+      orm,
+      'geminiNexusAuthStatus',
+      'ide.itemTable.geminiNexusAuthStatus',
+    );
+    let authStatus = null;
+    if (authValue) {
+      try {
+        authStatus = JSON.parse(authValue);
+      } catch {
+        // NOTE Ignore JSON parse errors
+      }
+    }
+
+    // NOTE Query for user info (usually in jetskiStateSync.agentManagerInitState or similar)
+    const initValue = readItemValue(
+      orm,
+      'jetskiStateSync.agentManagerInitState',
+      'ide.itemTable.jetskiStateSync.agentManagerInitState',
+    );
+    let initState = null;
+    if (initValue) {
+      try {
+        initState = JSON.parse(initValue);
+      } catch {
+        // Ignore JSON parse errors (this key often contains non-JSON data)
+      }
+    }
+
+    // Query for google.geminiNexus
+    const googleValue = readItemValue(
+      orm,
+      'google.geminiNexus',
+      'ide.itemTable.google.geminiNexus',
+    );
+    let googleState = null;
+    if (googleValue) {
+      try {
+        googleState = JSON.parse(googleValue);
+      } catch {
+        // Ignore JSON parse errors
+      }
+    }
+
+    // Query for geminiNexusUserSettings.allUserSettings
+    const settingsValue = readItemValue(
+      orm,
+      'geminiNexusUserSettings.allUserSettings',
+      'ide.itemTable.geminiNexusUserSettings.allUserSettings',
+    );
+    let settingsState = null;
+    if (settingsValue) {
+      try {
+        settingsState = JSON.parse(settingsValue);
+      } catch {
+        // Ignore JSON parse errors
+      }
+    }
+
+    // Helper to find email in object
+    const findEmail = (obj: { email?: string; user?: { email?: string } }): string => {
+      if (!obj) return '';
+      if (isString(obj.email)) return obj.email;
+      if (obj.user && isString(obj.user.email)) return obj.user.email;
+      return '';
+    };
+
+    const email =
+      findEmail(authStatus) ||
+      findEmail(initState) ||
+      findEmail(googleState) ||
+      findEmail(settingsState) ||
+      '';
+
+    const name = authStatus?.user?.name || initState?.user?.name || authStatus?.name || '';
+    const isAuthenticated = !!email;
+
+    logger.info(`Account info: authenticated=${isAuthenticated}, email=${email || 'none'}`);
+
+    return {
+      email,
+      name,
+      isAuthenticated,
+    };
+  } catch (error) {
+    logger.error('Failed to get current account info', error);
+    throw error;
+  } finally {
+    if (connection) {
+      connection.raw.close();
+    }
+  }
+}
+
+export function backupAccount(account: AccountBackupData['account']): AccountBackupData {
+  let connection: ReturnType<typeof openDrizzleConnection> | null = null;
+  try {
+    connection = getDatabaseConnection();
+    const { orm } = connection;
+
+    // NOTE Backup only specific keys
+    const data: Record<string, unknown> = {};
+
+    for (const key of KEYS_TO_BACKUP) {
+      const value = readItemValue(orm, key, `ide.itemTable.backup.${key}`);
+      if (value) {
+        try {
+          data[key] = JSON.parse(value);
+        } catch {
+          data[key] = value;
+        }
+        logger.debug(`Backed up key: ${key}`);
+      } else {
+        logger.debug(`Key not found: ${key}`);
+      }
+    }
+
+    // NOTE Add metadata
+    data['account_email'] = account.email;
+    data['backup_time'] = new Date().toISOString();
+
+    return {
+      version: '1.0',
+      account,
+      data,
+    };
+  } catch (error) {
+    logger.error('Failed to backup account', error);
+    throw error;
+  } finally {
+    if (connection) {
+      connection.raw.close();
+    }
+  }
+}
+
+/**
+ * Restores the account data to the database.
+ * @param backup {AccountBackupData} The backup data to restore.
+ * @throws {Error} If the backup data cannot be restored.
+ */
+export function restoreAccount(backup: AccountBackupData): void {
+  const dbPaths = getGeminiNexusDbPaths();
+  if (dbPaths.length === 0) {
+    throw new Error('No Gemini Nexus database paths found');
+  }
+
+  let successCount = 0;
+
+  for (const dbPath of dbPaths) {
+    // NOTE Restore main DB
+    if (_restoreSingleDb(dbPath, backup)) {
+      successCount++;
+    }
+
+    // NOTE Restore backup DB (if exists)
+    const backupDbPath = dbPath.replace(/\.vscdb$/, '.vscdb.backup');
+    if (fs.existsSync(backupDbPath)) {
+      if (_restoreSingleDb(backupDbPath, backup)) {
+        successCount++;
+      }
+    }
+  }
+
+  if (successCount > 0) {
+    logger.info(`Account data restored successfully to ${successCount} files`);
+  } else {
+    throw new Error('Failed to restore account data to any database file');
+  }
+}
+
+/**
+ * Restores a single database file.
+ * @param dbPath {string} The path to the database file.
+ * @param backup {AccountBackupData} The backup data to restore.
+ * @returns {boolean} True if the database file was restored successfully, false otherwise.
+ */
+function _restoreSingleDb(dbPath: string, backup: AccountBackupData): boolean {
+  if (!fs.existsSync(dbPath)) {
+    return false;
+  }
+
+  logger.info(`Restoring database: ${dbPath}`);
+  let connection: ReturnType<typeof openDrizzleConnection> | null = null;
+
+  try {
+    connection = getDatabaseConnection(dbPath);
+    const { orm } = connection;
+    orm.transaction((tx) => {
+      // NOTE Only restore the keys that were backed up
+      for (const key of KEYS_TO_BACKUP) {
+        if (key in backup.data) {
+          const value = backup.data[key];
+          const stringValue = isString(value) ? value : JSON.stringify(value);
+          tx.insert(itemTable)
+            .values({ key, value: stringValue })
+            .onConflictDoUpdate({
+              target: itemTable.key,
+              set: { value: stringValue },
+            })
+            .run();
+          logger.debug(`Restored key: ${key}`);
+        }
+      }
+    });
+    logger.info(`Database restoration complete: ${dbPath}`);
+    return true;
+  } catch (error) {
+    logger.error(`Failed to restore database: ${dbPath}`, error);
+    return false;
+  } finally {
+    if (connection) {
+      connection.raw.close();
+    }
+  }
+}

src/ipc/database/proxyMetricsHandler.ts

@@ -1,452 +1,452 @@
-import { logger } from '../../utils/logger';
-import Database from 'better-sqlite3';
-import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
-import { openDrizzleConnection } from './dbConnection';
-import { getCloudAccountsDbPath } from '../../utils/paths';
-import { ensureDatabaseInitialized } from './cloudHandler';
-import { proxyRequestMetrics, proxyConnectionSnapshots, trafficLogs } from './schema';
-
-export interface RecordProxyRequestParams {
-  endpoint: string;
-  statusCode: number;
-  durationMs: number;
-  timestamp: number;
-  accountId?: string | null;
-  tokensPrompt?: number | null;
-  tokensCompletion?: number | null;
-  errorMessage?: string | null;
-}
-
-let proxyMetricsDbConnection: {
-  raw: Database.Database;
-  orm: BetterSQLite3Database<typeof import('./schema')>;
-} | null = null;
-
-function getProxyMetricsDb() {
-  if (!proxyMetricsDbConnection) {
-    const dbPath = getCloudAccountsDbPath();
-    ensureDatabaseInitialized(dbPath);
-    const conn = openDrizzleConnection(
-      dbPath,
-      { readonly: false, fileMustExist: false },
-      { busyTimeoutMs: 3000 },
-    );
-    ensureProxyMetricsTable(conn.raw);
-    proxyMetricsDbConnection = conn;
-  }
-  return proxyMetricsDbConnection;
-}
-
-export function ensureProxyMetricsTable(rawDb: Database.Database): void {
-  try {
-    rawDb.exec(`
-      CREATE TABLE IF NOT EXISTS proxy_request_metrics (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        endpoint TEXT NOT NULL,
-        status_code INTEGER NOT NULL,
-        duration_ms INTEGER NOT NULL,
-        timestamp INTEGER NOT NULL,
-        account_id TEXT,
-        tokens_prompt INTEGER,
-        tokens_completion INTEGER,
-        error_message TEXT
-      );
-    `);
-    rawDb.exec(
-      `CREATE INDEX IF NOT EXISTS idx_proxy_metrics_timestamp ON proxy_request_metrics(timestamp);`,
-    );
-    rawDb.exec(
-      `CREATE INDEX IF NOT EXISTS idx_proxy_metrics_status ON proxy_request_metrics(status_code);`,
-    );
-
-    rawDb.exec(`
-      CREATE TABLE IF NOT EXISTS proxy_connection_snapshots (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        timestamp INTEGER NOT NULL,
-        count INTEGER NOT NULL DEFAULT 0
-      );
-    `);
-    rawDb.exec(
-      `CREATE INDEX IF NOT EXISTS idx_proxy_conn_timestamp ON proxy_connection_snapshots(timestamp);`,
-    );
-
-    rawDb.exec(`
-      CREATE TABLE IF NOT EXISTS traffic_logs (
-        id INTEGER PRIMARY KEY AUTOINCREMENT,
-        timestamp INTEGER NOT NULL,
-        direction TEXT NOT NULL,
-        request_id TEXT NOT NULL,
-        endpoint TEXT NOT NULL,
-        method TEXT,
-        status INTEGER,
-        headers_json TEXT,
-        body_json TEXT,
-        chunk_json TEXT,
-        duration_ms INTEGER,
-        error_message TEXT,
-        error_stack TEXT,
-        error_status INTEGER,
-        metadata_json TEXT
-      );
-    `);
-    rawDb.exec(
-      `CREATE INDEX IF NOT EXISTS idx_traffic_logs_timestamp ON traffic_logs(timestamp);`,
-    );
-    rawDb.exec(
-      `CREATE INDEX IF NOT EXISTS idx_traffic_logs_direction ON traffic_logs(direction);`,
-    );
-  } catch (error) {
-    logger.error('Failed to ensure proxy_request_metrics table', error);
-    throw error;
-  }
-}
-
-export class ProxyMetricsRepo {
-  static recordRequest(params: RecordProxyRequestParams): boolean {
-    const { orm } = getProxyMetricsDb();
-    try {
-      orm
-        .insert(proxyRequestMetrics)
-        .values({
-          endpoint: params.endpoint,
-          statusCode: params.statusCode,
-          durationMs: params.durationMs,
-          timestamp: params.timestamp,
-          accountId: params.accountId ?? null,
-          tokensPrompt: params.tokensPrompt ?? null,
-          tokensCompletion: params.tokensCompletion ?? null,
-          errorMessage: params.errorMessage ?? null,
-        })
-        .run();
-      return true;
-    } catch (error) {
-      logger.error('Failed to record proxy request metric', error);
-      return false;
-    }
-  }
-
-  static getRecentAggregates(): {
-    requestsPerMinute: number;
-    avgLatencyMs: number;
-    errorRatePercent: number;
-  } {
-    const { raw } = getProxyMetricsDb();
-    const now = Date.now();
-    const oneMinuteAgo = now - 60_000;
-    const fiveMinutesAgo = now - 5 * 60_000;
-
-    try {
-      const requestsPerMinuteRow = raw
-        .prepare(`SELECT COUNT(*) as count FROM proxy_request_metrics WHERE timestamp >= ?`)
-        .get(oneMinuteAgo) as { count: number } | undefined;
-      const requestsPerMinute = requestsPerMinuteRow?.count ?? 0;
-
-      const aggregatesRow = raw
-        .prepare(
-          `SELECT
-            COUNT(*) as total,
-            AVG(duration_ms) as avgLatency,
-            CASE
-              WHEN COUNT(*) = 0 THEN 0
-              ELSE (COUNT(CASE WHEN status_code >= 400 THEN 1 END) * 100.0 / COUNT(*))
-            END as errorRate
-          FROM proxy_request_metrics
-          WHERE timestamp >= ?`,
-        )
-        .get(fiveMinutesAgo) as
-        | { total: number; avgLatency: number | null; errorRate: number }
-        | undefined;
-
-      const avgLatencyMs = aggregatesRow?.avgLatency ? Math.round(aggregatesRow.avgLatency) : 0;
-      const errorRatePercent = aggregatesRow?.errorRate ?? 0;
-
-      return {
-        requestsPerMinute,
-        avgLatencyMs,
-        errorRatePercent,
-      };
-    } catch (error) {
-      logger.error('Failed to get recent proxy metrics aggregates', error);
-      return {
-        requestsPerMinute: 0,
-        avgLatencyMs: 0,
-        errorRatePercent: 0,
-      };
-    }
-  }
-
-  static recordConnectionSnapshot(count: number): boolean {
-    const { orm } = getProxyMetricsDb();
-    try {
-      orm.insert(proxyConnectionSnapshots).values({ timestamp: Date.now(), count }).run();
-      return true;
-    } catch (error) {
-      logger.error('Failed to record connection snapshot', error);
-      return false;
-    }
-  }
-
-  static getHistoricalAggregates(windowMs: number = 60 * 60 * 1000): {
-    totalRequests: number;
-    requestsPerMinute: number;
-    avgLatencyMs: number;
-    errorRatePercent: number;
-    avgActiveConnections: number;
-  } {
-    const { raw } = getProxyMetricsDb();
-    const now = Date.now();
-    const cutoff = now - windowMs;
-
-    try {
-      const reqRow = raw
-        .prepare(
-          `SELECT COUNT(*) as total, AVG(duration_ms) as avgLatency,
-           CASE WHEN COUNT(*) = 0 THEN 0
-           ELSE (COUNT(CASE WHEN status_code >= 400 THEN 1 END) * 100.0 / COUNT(*))
-           END as errorRate
-           FROM proxy_request_metrics WHERE timestamp >= ?`,
-        )
-        .get(cutoff) as
-        | { total: number; avgLatency: number | null; errorRate: number }
-        | undefined;
-
-      const totalRequests = reqRow?.total ?? 0;
-      const minutes = Math.max(windowMs / 60_000, 1);
-      const requestsPerMinute = Math.round((totalRequests / minutes) * 100) / 100;
-      const avgLatencyMs = reqRow?.avgLatency ? Math.round(reqRow.avgLatency) : 0;
-      const errorRatePercent = reqRow?.errorRate ?? 0;
-
-      const connRow = raw
-        .prepare(`SELECT AVG(count) as avg FROM proxy_connection_snapshots WHERE timestamp >= ?`)
-        .get(cutoff) as { avg: number | null } | undefined;
-      const avgActiveConnections = connRow?.avg ? Math.round(connRow.avg) : 0;
-
-      return {
-        totalRequests,
-        requestsPerMinute,
-        avgLatencyMs,
-        errorRatePercent,
-        avgActiveConnections,
-      };
-    } catch (error) {
-      logger.error('Failed to get historical proxy metrics aggregates', error);
-      return {
-        totalRequests: 0,
-        requestsPerMinute: 0,
-        avgLatencyMs: 0,
-        errorRatePercent: 0,
-        avgActiveConnections: 0,
-      };
-    }
-  }
-
-  static deleteOldRecords(cutoffTimestamp: number): boolean {
-    const { raw } = getProxyMetricsDb();
-    try {
-      raw.prepare(`DELETE FROM proxy_request_metrics WHERE timestamp < ?`).run(cutoffTimestamp);
-      raw.prepare(`DELETE FROM proxy_connection_snapshots WHERE timestamp < ?`).run(cutoffTimestamp);
-      return true;
-    } catch (error) {
-      logger.error('Failed to delete old proxy metrics records', error);
-      return false;
-    }
-  }
-}
-
-export interface InsertTrafficLogParams {
-  timestamp: number;
-  direction: string;
-  requestId: string;
-  endpoint: string;
-  method?: string;
-  status?: number;
-  headers?: Record<string, unknown>;
-  body?: unknown;
-  chunk?: unknown;
-  durationMs?: number;
-  error?: { message: string; stack?: string; status?: number; body?: unknown };
-  metadata?: Record<string, unknown>;
-}
-
-export class TrafficLogsRepo {
-  static insert(params: InsertTrafficLogParams): boolean {
-    const { orm } = getProxyMetricsDb();
-    try {
-      orm
-        .insert(trafficLogs)
-        .values({
-          timestamp: params.timestamp,
-          direction: params.direction,
-          requestId: params.requestId,
-          endpoint: params.endpoint,
-          method: params.method ?? null,
-          status: params.status ?? null,
-          headersJson: params.headers ? JSON.stringify(params.headers) : null,
-          bodyJson: params.body != null ? JSON.stringify(params.body) : null,
-          chunkJson: params.chunk != null ? JSON.stringify(params.chunk) : null,
-          durationMs: params.durationMs ?? null,
-          errorMessage: params.error?.message ?? null,
-          errorStack: params.error?.stack ?? null,
-          errorStatus: params.error?.status ?? null,
-          metadataJson: params.metadata ? JSON.stringify(params.metadata) : null,
-        })
-        .run();
-      return true;
-    } catch (error) {
-      logger.error('Failed to insert traffic log', error);
-      return false;
-    }
-  }
-
-  static getRecent(limit: number = 50, direction?: string): Array<{
-    timestamp: number;
-    direction: string;
-    requestId: string;
-    endpoint: string;
-    method?: string;
-    status?: number;
-    headers?: Record<string, unknown>;
-    body?: unknown;
-    chunk?: unknown;
-    durationMs?: number;
-    error?: { message: string; stack?: string; status?: number; body?: unknown };
-    metadata?: Record<string, unknown>;
-  }> {
-    const { raw } = getProxyMetricsDb();
-    try {
-      let sql = `SELECT * FROM traffic_logs`;
-      const args: (number | string)[] = [];
-      if (direction) {
-        sql += ` WHERE direction = ?`;
-        args.push(direction);
-      }
-      sql += ` ORDER BY timestamp DESC LIMIT ?`;
-      args.push(limit);
-      const rows = raw.prepare(sql).all(...args) as Array<{
-        timestamp: number;
-        direction: string;
-        request_id: string;
-        endpoint: string;
-        method: string | null;
-        status: number | null;
-        headers_json: string | null;
-        body_json: string | null;
-        chunk_json: string | null;
-        duration_ms: number | null;
-        error_message: string | null;
-        error_stack: string | null;
-        error_status: number | null;
-        metadata_json: string | null;
-      }>;
-      return rows.map((r) => ({
-        timestamp: r.timestamp,
-        direction: r.direction,
-        requestId: r.request_id,
-        endpoint: r.endpoint,
-        method: r.method ?? undefined,
-        status: r.status ?? undefined,
-        headers: r.headers_json ? JSON.parse(r.headers_json) : undefined,
-        body: r.body_json ? JSON.parse(r.body_json) : undefined,
-        chunk: r.chunk_json ? JSON.parse(r.chunk_json) : undefined,
-        durationMs: r.duration_ms ?? undefined,
-        error:
-          r.error_message
-            ? { message: r.error_message, stack: r.error_stack ?? undefined, status: r.error_status ?? undefined }
-            : undefined,
-        metadata: r.metadata_json ? JSON.parse(r.metadata_json) : undefined,
-      }));
-    } catch (error) {
-      logger.error('Failed to get recent traffic logs', error);
-      return [];
-    }
-  }
-
-  static getStats(): { byDirection: Record<string, number>; byEndpoint: Record<string, number>; total: number } {
-    const { raw } = getProxyMetricsDb();
-    try {
-      const rows = raw.prepare(`SELECT direction, endpoint, COUNT(*) as cnt FROM traffic_logs GROUP BY direction, endpoint`).all() as Array<{
-        direction: string;
-        endpoint: string;
-        cnt: number;
-      }>;
-      const byDirection: Record<string, number> = {};
-      const byEndpoint: Record<string, number> = {};
-      let total = 0;
-      for (const r of rows) {
-        total += r.cnt;
-        byDirection[r.direction] = (byDirection[r.direction] || 0) + r.cnt;
-        byEndpoint[r.endpoint] = (byEndpoint[r.endpoint] || 0) + r.cnt;
-      }
-      return { byDirection, byEndpoint, total };
-    } catch (error) {
-      logger.error('Failed to get traffic log stats', error);
-      return { byDirection: {}, byEndpoint: {}, total: 0 };
-    }
-  }
-
-  static getAllForExport(): Array<{
-    timestamp: number;
-    direction: string;
-    requestId: string;
-    endpoint: string;
-    method?: string;
-    status?: number;
-    headers?: Record<string, unknown>;
-    body?: unknown;
-    chunk?: unknown;
-    durationMs?: number;
-    error?: { message: string; stack?: string; status?: number; body?: unknown };
-    metadata?: Record<string, unknown>;
-  }> {
-    const { raw } = getProxyMetricsDb();
-    try {
-      const rows = raw.prepare(`SELECT * FROM traffic_logs ORDER BY timestamp DESC`).all() as Array<{
-        timestamp: number;
-        direction: string;
-        request_id: string;
-        endpoint: string;
-        method: string | null;
-        status: number | null;
-        headers_json: string | null;
-        body_json: string | null;
-        chunk_json: string | null;
-        duration_ms: number | null;
-        error_message: string | null;
-        error_stack: string | null;
-        error_status: number | null;
-        metadata_json: string | null;
-      }>;
-      return rows.map((r) => ({
-        timestamp: r.timestamp,
-        direction: r.direction,
-        requestId: r.request_id,
-        endpoint: r.endpoint,
-        method: r.method ?? undefined,
-        status: r.status ?? undefined,
-        headers: r.headers_json ? JSON.parse(r.headers_json) : undefined,
-        body: r.body_json ? JSON.parse(r.body_json) : undefined,
-        chunk: r.chunk_json ? JSON.parse(r.chunk_json) : undefined,
-        durationMs: r.duration_ms ?? undefined,
-        error:
-          r.error_message
-            ? { message: r.error_message, stack: r.error_stack ?? undefined, status: r.error_status ?? undefined }
-            : undefined,
-        metadata: r.metadata_json ? JSON.parse(r.metadata_json) : undefined,
-      }));
-    } catch (error) {
-      logger.error('Failed to get all traffic logs for export', error);
-      return [];
-    }
-  }
-
-  static deleteOld(cutoffTimestamp: number): boolean {
-    const { raw } = getProxyMetricsDb();
-    try {
-      raw.prepare(`DELETE FROM traffic_logs WHERE timestamp < ?`).run(cutoffTimestamp);
-      return true;
-    } catch (error) {
-      logger.error('Failed to delete old traffic logs', error);
-      return false;
-    }
-  }
-}
+import { logger } from '../../utils/logger';
+import Database from 'better-sqlite3';
+import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import { openDrizzleConnection } from './dbConnection';
+import { getCloudAccountsDbPath } from '../../utils/paths';
+import { ensureDatabaseInitialized } from './cloudHandler';
+import { proxyRequestMetrics, proxyConnectionSnapshots, trafficLogs } from './schema';
+
+export interface RecordProxyRequestParams {
+  endpoint: string;
+  statusCode: number;
+  durationMs: number;
+  timestamp: number;
+  accountId?: string | null;
+  tokensPrompt?: number | null;
+  tokensCompletion?: number | null;
+  errorMessage?: string | null;
+}
+
+let proxyMetricsDbConnection: {
+  raw: Database.Database;
+  orm: BetterSQLite3Database<typeof import('./schema')>;
+} | null = null;
+
+function getProxyMetricsDb() {
+  if (!proxyMetricsDbConnection) {
+    const dbPath = getCloudAccountsDbPath();
+    ensureDatabaseInitialized(dbPath);
+    const conn = openDrizzleConnection(
+      dbPath,
+      { readonly: false, fileMustExist: false },
+      { busyTimeoutMs: 3000 },
+    );
+    ensureProxyMetricsTable(conn.raw);
+    proxyMetricsDbConnection = conn;
+  }
+  return proxyMetricsDbConnection;
+}
+
+export function ensureProxyMetricsTable(rawDb: Database.Database): void {
+  try {
+    rawDb.exec(`
+      CREATE TABLE IF NOT EXISTS proxy_request_metrics (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        endpoint TEXT NOT NULL,
+        status_code INTEGER NOT NULL,
+        duration_ms INTEGER NOT NULL,
+        timestamp INTEGER NOT NULL,
+        account_id TEXT,
+        tokens_prompt INTEGER,
+        tokens_completion INTEGER,
+        error_message TEXT
+      );
+    `);
+    rawDb.exec(
+      `CREATE INDEX IF NOT EXISTS idx_proxy_metrics_timestamp ON proxy_request_metrics(timestamp);`,
+    );
+    rawDb.exec(
+      `CREATE INDEX IF NOT EXISTS idx_proxy_metrics_status ON proxy_request_metrics(status_code);`,
+    );
+
+    rawDb.exec(`
+      CREATE TABLE IF NOT EXISTS proxy_connection_snapshots (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        timestamp INTEGER NOT NULL,
+        count INTEGER NOT NULL DEFAULT 0
+      );
+    `);
+    rawDb.exec(
+      `CREATE INDEX IF NOT EXISTS idx_proxy_conn_timestamp ON proxy_connection_snapshots(timestamp);`,
+    );
+
+    rawDb.exec(`
+      CREATE TABLE IF NOT EXISTS traffic_logs (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        timestamp INTEGER NOT NULL,
+        direction TEXT NOT NULL,
+        request_id TEXT NOT NULL,
+        endpoint TEXT NOT NULL,
+        method TEXT,
+        status INTEGER,
+        headers_json TEXT,
+        body_json TEXT,
+        chunk_json TEXT,
+        duration_ms INTEGER,
+        error_message TEXT,
+        error_stack TEXT,
+        error_status INTEGER,
+        metadata_json TEXT
+      );
+    `);
+    rawDb.exec(
+      `CREATE INDEX IF NOT EXISTS idx_traffic_logs_timestamp ON traffic_logs(timestamp);`,
+    );
+    rawDb.exec(
+      `CREATE INDEX IF NOT EXISTS idx_traffic_logs_direction ON traffic_logs(direction);`,
+    );
+  } catch (error) {
+    logger.error('Failed to ensure proxy_request_metrics table', error);
+    throw error;
+  }
+}
+
+export class ProxyMetricsRepo {
+  static recordRequest(params: RecordProxyRequestParams): boolean {
+    const { orm } = getProxyMetricsDb();
+    try {
+      orm
+        .insert(proxyRequestMetrics)
+        .values({
+          endpoint: params.endpoint,
+          statusCode: params.statusCode,
+          durationMs: params.durationMs,
+          timestamp: params.timestamp,
+          accountId: params.accountId ?? null,
+          tokensPrompt: params.tokensPrompt ?? null,
+          tokensCompletion: params.tokensCompletion ?? null,
+          errorMessage: params.errorMessage ?? null,
+        })
+        .run();
+      return true;
+    } catch (error) {
+      logger.error('Failed to record proxy request metric', error);
+      return false;
+    }
+  }
+
+  static getRecentAggregates(): {
+    requestsPerMinute: number;
+    avgLatencyMs: number;
+    errorRatePercent: number;
+  } {
+    const { raw } = getProxyMetricsDb();
+    const now = Date.now();
+    const oneMinuteAgo = now - 60_000;
+    const fiveMinutesAgo = now - 5 * 60_000;
+
+    try {
+      const requestsPerMinuteRow = raw
+        .prepare(`SELECT COUNT(*) as count FROM proxy_request_metrics WHERE timestamp >= ?`)
+        .get(oneMinuteAgo) as { count: number } | undefined;
+      const requestsPerMinute = requestsPerMinuteRow?.count ?? 0;
+
+      const aggregatesRow = raw
+        .prepare(
+          `SELECT
+            COUNT(*) as total,
+            AVG(duration_ms) as avgLatency,
+            CASE
+              WHEN COUNT(*) = 0 THEN 0
+              ELSE (COUNT(CASE WHEN status_code >= 400 THEN 1 END) * 100.0 / COUNT(*))
+            END as errorRate
+          FROM proxy_request_metrics
+          WHERE timestamp >= ?`,
+        )
+        .get(fiveMinutesAgo) as
+        | { total: number; avgLatency: number | null; errorRate: number }
+        | undefined;
+
+      const avgLatencyMs = aggregatesRow?.avgLatency ? Math.round(aggregatesRow.avgLatency) : 0;
+      const errorRatePercent = aggregatesRow?.errorRate ?? 0;
+
+      return {
+        requestsPerMinute,
+        avgLatencyMs,
+        errorRatePercent,
+      };
+    } catch (error) {
+      logger.error('Failed to get recent proxy metrics aggregates', error);
+      return {
+        requestsPerMinute: 0,
+        avgLatencyMs: 0,
+        errorRatePercent: 0,
+      };
+    }
+  }
+
+  static recordConnectionSnapshot(count: number): boolean {
+    const { orm } = getProxyMetricsDb();
+    try {
+      orm.insert(proxyConnectionSnapshots).values({ timestamp: Date.now(), count }).run();
+      return true;
+    } catch (error) {
+      logger.error('Failed to record connection snapshot', error);
+      return false;
+    }
+  }
+
+  static getHistoricalAggregates(windowMs: number = 60 * 60 * 1000): {
+    totalRequests: number;
+    requestsPerMinute: number;
+    avgLatencyMs: number;
+    errorRatePercent: number;
+    avgActiveConnections: number;
+  } {
+    const { raw } = getProxyMetricsDb();
+    const now = Date.now();
+    const cutoff = now - windowMs;
+
+    try {
+      const reqRow = raw
+        .prepare(
+          `SELECT COUNT(*) as total, AVG(duration_ms) as avgLatency,
+           CASE WHEN COUNT(*) = 0 THEN 0
+           ELSE (COUNT(CASE WHEN status_code >= 400 THEN 1 END) * 100.0 / COUNT(*))
+           END as errorRate
+           FROM proxy_request_metrics WHERE timestamp >= ?`,
+        )
+        .get(cutoff) as
+        | { total: number; avgLatency: number | null; errorRate: number }
+        | undefined;
+
+      const totalRequests = reqRow?.total ?? 0;
+      const minutes = Math.max(windowMs / 60_000, 1);
+      const requestsPerMinute = Math.round((totalRequests / minutes) * 100) / 100;
+      const avgLatencyMs = reqRow?.avgLatency ? Math.round(reqRow.avgLatency) : 0;
+      const errorRatePercent = reqRow?.errorRate ?? 0;
+
+      const connRow = raw
+        .prepare(`SELECT AVG(count) as avg FROM proxy_connection_snapshots WHERE timestamp >= ?`)
+        .get(cutoff) as { avg: number | null } | undefined;
+      const avgActiveConnections = connRow?.avg ? Math.round(connRow.avg) : 0;
+
+      return {
+        totalRequests,
+        requestsPerMinute,
+        avgLatencyMs,
+        errorRatePercent,
+        avgActiveConnections,
+      };
+    } catch (error) {
+      logger.error('Failed to get historical proxy metrics aggregates', error);
+      return {
+        totalRequests: 0,
+        requestsPerMinute: 0,
+        avgLatencyMs: 0,
+        errorRatePercent: 0,
+        avgActiveConnections: 0,
+      };
+    }
+  }
+
+  static deleteOldRecords(cutoffTimestamp: number): boolean {
+    const { raw } = getProxyMetricsDb();
+    try {
+      raw.prepare(`DELETE FROM proxy_request_metrics WHERE timestamp < ?`).run(cutoffTimestamp);
+      raw.prepare(`DELETE FROM proxy_connection_snapshots WHERE timestamp < ?`).run(cutoffTimestamp);
+      return true;
+    } catch (error) {
+      logger.error('Failed to delete old proxy metrics records', error);
+      return false;
+    }
+  }
+}
+
+export interface InsertTrafficLogParams {
+  timestamp: number;
+  direction: string;
+  requestId: string;
+  endpoint: string;
+  method?: string;
+  status?: number;
+  headers?: Record<string, unknown>;
+  body?: unknown;
+  chunk?: unknown;
+  durationMs?: number;
+  error?: { message: string; stack?: string; status?: number; body?: unknown };
+  metadata?: Record<string, unknown>;
+}
+
+export class TrafficLogsRepo {
+  static insert(params: InsertTrafficLogParams): boolean {
+    const { orm } = getProxyMetricsDb();
+    try {
+      orm
+        .insert(trafficLogs)
+        .values({
+          timestamp: params.timestamp,
+          direction: params.direction,
+          requestId: params.requestId,
+          endpoint: params.endpoint,
+          method: params.method ?? null,
+          status: params.status ?? null,
+          headersJson: params.headers ? JSON.stringify(params.headers) : null,
+          bodyJson: params.body != null ? JSON.stringify(params.body) : null,
+          chunkJson: params.chunk != null ? JSON.stringify(params.chunk) : null,
+          durationMs: params.durationMs ?? null,
+          errorMessage: params.error?.message ?? null,
+          errorStack: params.error?.stack ?? null,
+          errorStatus: params.error?.status ?? null,
+          metadataJson: params.metadata ? JSON.stringify(params.metadata) : null,
+        })
+        .run();
+      return true;
+    } catch (error) {
+      logger.error('Failed to insert traffic log', error);
+      return false;
+    }
+  }
+
+  static getRecent(limit: number = 50, direction?: string): Array<{
+    timestamp: number;
+    direction: string;
+    requestId: string;
+    endpoint: string;
+    method?: string;
+    status?: number;
+    headers?: Record<string, unknown>;
+    body?: unknown;
+    chunk?: unknown;
+    durationMs?: number;
+    error?: { message: string; stack?: string; status?: number; body?: unknown };
+    metadata?: Record<string, unknown>;
+  }> {
+    const { raw } = getProxyMetricsDb();
+    try {
+      let sql = `SELECT * FROM traffic_logs`;
+      const args: (number | string)[] = [];
+      if (direction) {
+        sql += ` WHERE direction = ?`;
+        args.push(direction);
+      }
+      sql += ` ORDER BY timestamp DESC LIMIT ?`;
+      args.push(limit);
+      const rows = raw.prepare(sql).all(...args) as Array<{
+        timestamp: number;
+        direction: string;
+        request_id: string;
+        endpoint: string;
+        method: string | null;
+        status: number | null;
+        headers_json: string | null;
+        body_json: string | null;
+        chunk_json: string | null;
+        duration_ms: number | null;
+        error_message: string | null;
+        error_stack: string | null;
+        error_status: number | null;
+        metadata_json: string | null;
+      }>;
+      return rows.map((r) => ({
+        timestamp: r.timestamp,
+        direction: r.direction,
+        requestId: r.request_id,
+        endpoint: r.endpoint,
+        method: r.method ?? undefined,
+        status: r.status ?? undefined,
+        headers: r.headers_json ? JSON.parse(r.headers_json) : undefined,
+        body: r.body_json ? JSON.parse(r.body_json) : undefined,
+        chunk: r.chunk_json ? JSON.parse(r.chunk_json) : undefined,
+        durationMs: r.duration_ms ?? undefined,
+        error:
+          r.error_message
+            ? { message: r.error_message, stack: r.error_stack ?? undefined, status: r.error_status ?? undefined }
+            : undefined,
+        metadata: r.metadata_json ? JSON.parse(r.metadata_json) : undefined,
+      }));
+    } catch (error) {
+      logger.error('Failed to get recent traffic logs', error);
+      return [];
+    }
+  }
+
+  static getStats(): { byDirection: Record<string, number>; byEndpoint: Record<string, number>; total: number } {
+    const { raw } = getProxyMetricsDb();
+    try {
+      const rows = raw.prepare(`SELECT direction, endpoint, COUNT(*) as cnt FROM traffic_logs GROUP BY direction, endpoint`).all() as Array<{
+        direction: string;
+        endpoint: string;
+        cnt: number;
+      }>;
+      const byDirection: Record<string, number> = {};
+      const byEndpoint: Record<string, number> = {};
+      let total = 0;
+      for (const r of rows) {
+        total += r.cnt;
+        byDirection[r.direction] = (byDirection[r.direction] || 0) + r.cnt;
+        byEndpoint[r.endpoint] = (byEndpoint[r.endpoint] || 0) + r.cnt;
+      }
+      return { byDirection, byEndpoint, total };
+    } catch (error) {
+      logger.error('Failed to get traffic log stats', error);
+      return { byDirection: {}, byEndpoint: {}, total: 0 };
+    }
+  }
+
+  static getAllForExport(): Array<{
+    timestamp: number;
+    direction: string;
+    requestId: string;
+    endpoint: string;
+    method?: string;
+    status?: number;
+    headers?: Record<string, unknown>;
+    body?: unknown;
+    chunk?: unknown;
+    durationMs?: number;
+    error?: { message: string; stack?: string; status?: number; body?: unknown };
+    metadata?: Record<string, unknown>;
+  }> {
+    const { raw } = getProxyMetricsDb();
+    try {
+      const rows = raw.prepare(`SELECT * FROM traffic_logs ORDER BY timestamp DESC`).all() as Array<{
+        timestamp: number;
+        direction: string;
+        request_id: string;
+        endpoint: string;
+        method: string | null;
+        status: number | null;
+        headers_json: string | null;
+        body_json: string | null;
+        chunk_json: string | null;
+        duration_ms: number | null;
+        error_message: string | null;
+        error_stack: string | null;
+        error_status: number | null;
+        metadata_json: string | null;
+      }>;
+      return rows.map((r) => ({
+        timestamp: r.timestamp,
+        direction: r.direction,
+        requestId: r.request_id,
+        endpoint: r.endpoint,
+        method: r.method ?? undefined,
+        status: r.status ?? undefined,
+        headers: r.headers_json ? JSON.parse(r.headers_json) : undefined,
+        body: r.body_json ? JSON.parse(r.body_json) : undefined,
+        chunk: r.chunk_json ? JSON.parse(r.chunk_json) : undefined,
+        durationMs: r.duration_ms ?? undefined,
+        error:
+          r.error_message
+            ? { message: r.error_message, stack: r.error_stack ?? undefined, status: r.error_status ?? undefined }
+            : undefined,
+        metadata: r.metadata_json ? JSON.parse(r.metadata_json) : undefined,
+      }));
+    } catch (error) {
+      logger.error('Failed to get all traffic logs for export', error);
+      return [];
+    }
+  }
+
+  static deleteOld(cutoffTimestamp: number): boolean {
+    const { raw } = getProxyMetricsDb();
+    try {
+      raw.prepare(`DELETE FROM traffic_logs WHERE timestamp < ?`).run(cutoffTimestamp);
+      return true;
+    } catch (error) {
+      logger.error('Failed to delete old traffic logs', error);
+      return false;
+    }
+  }
+}

src/ipc/database/router.ts

@@ -1,24 +1,24 @@
-import { z } from 'zod';
-import { os } from '@orpc/server';
-import { backupAccount, restoreAccount, getCurrentAccountInfo } from './handler';
-import { AccountBackupDataSchema, AccountInfoSchema, AccountSchema } from '../../types/account';
-
-export const databaseRouter = os.router({
-  backupAccount: os
-    .input(AccountSchema)
-    .output(AccountBackupDataSchema)
-    .handler(async ({ input }) => {
-      return backupAccount(input);
-    }),
-
-  restoreAccount: os
-    .input(AccountBackupDataSchema)
-    .output(z.void())
-    .handler(async ({ input }) => {
-      restoreAccount(input);
-    }),
-
-  getCurrentAccountInfo: os.output(AccountInfoSchema).handler(async () => {
-    return getCurrentAccountInfo();
-  }),
-});
+import { z } from 'zod';
+import { os } from '@orpc/server';
+import { backupAccount, restoreAccount, getCurrentAccountInfo } from './handler';
+import { AccountBackupDataSchema, AccountInfoSchema, AccountSchema } from '../../types/account';
+
+export const databaseRouter = os.router({
+  backupAccount: os
+    .input(AccountSchema)
+    .output(AccountBackupDataSchema)
+    .handler(async ({ input }) => {
+      return backupAccount(input);
+    }),
+
+  restoreAccount: os
+    .input(AccountBackupDataSchema)
+    .output(z.void())
+    .handler(async ({ input }) => {
+      restoreAccount(input);
+    }),
+
+  getCurrentAccountInfo: os.output(AccountInfoSchema).handler(async () => {
+    return getCurrentAccountInfo();
+  }),
+});

src/ipc/database/schema.ts

@@ -1,77 +1,77 @@
-import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
-
-export const accounts = sqliteTable('accounts', {
-  id: text('id').primaryKey(),
-  provider: text('provider').notNull(),
-  email: text('email').notNull(),
-  name: text('name'),
-  avatarUrl: text('avatar_url'),
-  tokenJson: text('token_json').notNull(),
-  quotaJson: text('quota_json'),
-  deviceProfileJson: text('device_profile_json'),
-  deviceHistoryJson: text('device_history_json'),
-  createdAt: integer('created_at').notNull(),
-  lastUsed: integer('last_used').notNull(),
-  status: text('status', { enum: ['active', 'rate_limited', 'expired'] }).default('active'),
-  statusReason: text('status_reason'),
-  isActive: integer('is_active').notNull().default(0),
-  proxyUrl: text('proxy_url'),
-});
-
-export const settings = sqliteTable('settings', {
-  key: text('key').primaryKey(),
-  value: text('value').notNull(),
-});
-
-export const itemTable = sqliteTable('ItemTable', {
-  key: text('key').primaryKey(),
-  value: text('value'),
-});
-
-export const tokenUsage = sqliteTable('token_usage', {
-  id: integer('id').primaryKey({ autoIncrement: true }),
-  accountId: text('account_id').notNull(),
-  model: text('model').notNull(),
-  promptTokens: integer('prompt_tokens').notNull().default(0),
-  completionTokens: integer('completion_tokens').notNull().default(0),
-  totalTokens: integer('total_tokens').notNull().default(0),
-  timestamp: integer('timestamp').notNull(),
-  requestType: text('request_type'),
-  isEstimated: integer('is_estimated'),
-});
-
-export const proxyRequestMetrics = sqliteTable('proxy_request_metrics', {
-  id: integer('id').primaryKey({ autoIncrement: true }),
-  endpoint: text('endpoint').notNull(),
-  statusCode: integer('status_code').notNull(),
-  durationMs: integer('duration_ms').notNull(),
-  timestamp: integer('timestamp').notNull(),
-  accountId: text('account_id'),
-  tokensPrompt: integer('tokens_prompt'),
-  tokensCompletion: integer('tokens_completion'),
-  errorMessage: text('error_message'),
-});
-
-export const proxyConnectionSnapshots = sqliteTable('proxy_connection_snapshots', {
-  id: integer('id').primaryKey({ autoIncrement: true }),
-  timestamp: integer('timestamp').notNull(),
-  count: integer('count').notNull().default(0),
-});
-
-export const trafficLogs = sqliteTable('traffic_logs', {
-  id: integer('id').primaryKey({ autoIncrement: true }),
-  timestamp: integer('timestamp').notNull(),
-  direction: text('direction').notNull(),
-  requestId: text('request_id').notNull(),
-  endpoint: text('endpoint').notNull(),
-  method: text('method'),
-  status: integer('status'),
-  headersJson: text('headers_json'),
-  bodyJson: text('body_json'),
-  chunkJson: text('chunk_json'),
-  durationMs: integer('duration_ms'),
-  errorMessage: text('error_message'),
-  errorStack: text('error_stack'),
-  errorStatus: integer('error_status'),
-  metadataJson: text('metadata_json'),
-});
+import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';
+
+export const accounts = sqliteTable('accounts', {
+  id: text('id').primaryKey(),
+  provider: text('provider').notNull(),
+  email: text('email').notNull(),
+  name: text('name'),
+  avatarUrl: text('avatar_url'),
+  tokenJson: text('token_json').notNull(),
+  quotaJson: text('quota_json'),
+  deviceProfileJson: text('device_profile_json'),
+  deviceHistoryJson: text('device_history_json'),
+  createdAt: integer('created_at').notNull(),
+  lastUsed: integer('last_used').notNull(),
+  status: text('status', { enum: ['active', 'rate_limited', 'expired'] }).default('active'),
+  statusReason: text('status_reason'),
+  isActive: integer('is_active').notNull().default(0),
+  proxyUrl: text('proxy_url'),
+});
+
+export const settings = sqliteTable('settings', {
+  key: text('key').primaryKey(),
+  value: text('value').notNull(),
+});
+
+export const itemTable = sqliteTable('ItemTable', {
+  key: text('key').primaryKey(),
+  value: text('value'),
+});
+
+export const tokenUsage = sqliteTable('token_usage', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  accountId: text('account_id').notNull(),
+  model: text('model').notNull(),
+  promptTokens: integer('prompt_tokens').notNull().default(0),
+  completionTokens: integer('completion_tokens').notNull().default(0),
+  totalTokens: integer('total_tokens').notNull().default(0),
+  timestamp: integer('timestamp').notNull(),
+  requestType: text('request_type'),
+  isEstimated: integer('is_estimated'),
+});
+
+export const proxyRequestMetrics = sqliteTable('proxy_request_metrics', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  endpoint: text('endpoint').notNull(),
+  statusCode: integer('status_code').notNull(),
+  durationMs: integer('duration_ms').notNull(),
+  timestamp: integer('timestamp').notNull(),
+  accountId: text('account_id'),
+  tokensPrompt: integer('tokens_prompt'),
+  tokensCompletion: integer('tokens_completion'),
+  errorMessage: text('error_message'),
+});
+
+export const proxyConnectionSnapshots = sqliteTable('proxy_connection_snapshots', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  timestamp: integer('timestamp').notNull(),
+  count: integer('count').notNull().default(0),
+});
+
+export const trafficLogs = sqliteTable('traffic_logs', {
+  id: integer('id').primaryKey({ autoIncrement: true }),
+  timestamp: integer('timestamp').notNull(),
+  direction: text('direction').notNull(),
+  requestId: text('request_id').notNull(),
+  endpoint: text('endpoint').notNull(),
+  method: text('method'),
+  status: integer('status'),
+  headersJson: text('headers_json'),
+  bodyJson: text('body_json'),
+  chunkJson: text('chunk_json'),
+  durationMs: integer('duration_ms'),
+  errorMessage: text('error_message'),
+  errorStack: text('error_stack'),
+  errorStatus: integer('error_status'),
+  metadataJson: text('metadata_json'),
+});

src/ipc/database/usageHandler.ts

@@ -1,274 +1,274 @@
-import { logger } from '../../utils/logger';
-import Database from 'better-sqlite3';
-import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
-import { openDrizzleConnection } from './dbConnection';
-import { getCloudAccountsDbPath } from '../../utils/paths';
-import { ensureDatabaseInitialized } from './cloudHandler';
-import { tokenUsage } from './schema';
-import {
-  HourlyUsageSchema,
-  DailyUsageSchema,
-  WeeklyUsageSchema,
-  MonthlyUsageSchema,
-  ModelUsageSchema,
-} from '../../types/db';
-
-export interface RecordUsageParams {
-  accountId: string;
-  model: string;
-  promptTokens: number;
-  completionTokens: number;
-  totalTokens: number;
-  timestamp: number;
-  requestType?: string;
-  isEstimated?: boolean;
-}
-
-let usageDbConnection: {
-  raw: Database.Database;
-  orm: BetterSQLite3Database<typeof import('./schema')>;
-} | null = null;
-
-function getUsageDb() {
-  if (!usageDbConnection) {
-    const dbPath = getCloudAccountsDbPath();
-    ensureDatabaseInitialized(dbPath);
-    usageDbConnection = openDrizzleConnection(
-      dbPath,
-      { readonly: false, fileMustExist: false },
-      { busyTimeoutMs: 3000 },
-    );
-  }
-  return usageDbConnection;
-}
-
-function buildDateFilter(start?: number, end?: number): { sql: string; params: number[] } {
-  const conditions: string[] = [];
-  const params: number[] = [];
-  if (start !== undefined) {
-    conditions.push(`timestamp >= ?`);
-    params.push(start);
-  }
-  if (end !== undefined) {
-    conditions.push(`timestamp <= ?`);
-    params.push(end);
-  }
-  return {
-    sql: conditions.length > 0 ? `AND ${conditions.join(' AND ')}` : '',
-    params,
-  };
-}
-
-function buildAccountFilter(accountId?: string): { sql: string; params: unknown[] } {
-  return accountId ? { sql: 'AND account_id = ?', params: [accountId] } : { sql: '', params: [] };
-}
-
-export class TokenUsageRepo {
-  static recordUsage(params: RecordUsageParams): boolean {
-    const { orm } = getUsageDb();
-    try {
-      orm
-        .insert(tokenUsage)
-        .values({
-          accountId: params.accountId,
-          model: params.model,
-          promptTokens: params.promptTokens,
-          completionTokens: params.completionTokens,
-          totalTokens: params.totalTokens,
-          timestamp: params.timestamp,
-          requestType: params.requestType ?? null,
-          isEstimated: params.isEstimated ? 1 : null,
-        })
-        .run();
-      return true;
-    } catch (error) {
-      logger.error('Failed to record token usage', error);
-      return false;
-    }
-  }
-
-  static getUsageByHour(
-    accountId?: string,
-    start?: number,
-    end?: number,
-  ): Array<{
-    bucket: string;
-    promptTokens: number;
-    completionTokens: number;
-    totalTokens: number;
-    requests: number;
-  }> {
-    const { raw } = getUsageDb();
-    try {
-      const accountFilter = buildAccountFilter(accountId);
-      const dateFilter = buildDateFilter(start, end);
-      const sql = `
-        SELECT
-          strftime('%Y-%m-%d %H:00', timestamp / 1000, 'unixepoch', 'localtime') as bucket,
-          SUM(prompt_tokens) as promptTokens,
-          SUM(completion_tokens) as completionTokens,
-          SUM(total_tokens) as totalTokens,
-          COUNT(*) as requests
-        FROM token_usage
-        WHERE 1=1
-        ${accountFilter.sql}
-        ${dateFilter.sql}
-        GROUP BY bucket
-        ORDER BY bucket
-      `;
-      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
-      return rows.map((row) => HourlyUsageSchema.parse(row));
-    } catch (error) {
-      logger.error('Failed to get hourly usage', error);
-      return [];
-    }
-  }
-
-  static getUsageByDay(
-    accountId?: string,
-    start?: number,
-    end?: number,
-  ): Array<{
-    bucket: string;
-    promptTokens: number;
-    completionTokens: number;
-    totalTokens: number;
-    requests: number;
-  }> {
-    const { raw } = getUsageDb();
-    try {
-      const accountFilter = buildAccountFilter(accountId);
-      const dateFilter = buildDateFilter(start, end);
-      const sql = `
-        SELECT
-          strftime('%Y-%m-%d', timestamp / 1000, 'unixepoch', 'localtime') as bucket,
-          SUM(prompt_tokens) as promptTokens,
-          SUM(completion_tokens) as completionTokens,
-          SUM(total_tokens) as totalTokens,
-          COUNT(*) as requests
-        FROM token_usage
-        WHERE 1=1
-        ${accountFilter.sql}
-        ${dateFilter.sql}
-        GROUP BY bucket
-        ORDER BY bucket
-      `;
-      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
-      return rows.map((row) => DailyUsageSchema.parse(row));
-    } catch (error) {
-      logger.error('Failed to get daily usage', error);
-      return [];
-    }
-  }
-
-  static getUsageByWeek(
-    accountId?: string,
-    start?: number,
-    end?: number,
-  ): Array<{
-    bucket: string;
-    promptTokens: number;
-    completionTokens: number;
-    totalTokens: number;
-    requests: number;
-  }> {
-    const { raw } = getUsageDb();
-    try {
-      const accountFilter = buildAccountFilter(accountId);
-      const dateFilter = buildDateFilter(start, end);
-      const sql = `
-        SELECT
-          strftime('%Y-%W', timestamp / 1000, 'unixepoch', 'localtime') as bucket,
-          SUM(prompt_tokens) as promptTokens,
-          SUM(completion_tokens) as completionTokens,
-          SUM(total_tokens) as totalTokens,
-          COUNT(*) as requests
-        FROM token_usage
-        WHERE 1=1
-        ${accountFilter.sql}
-        ${dateFilter.sql}
-        GROUP BY bucket
-        ORDER BY bucket
-      `;
-      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
-      return rows.map((row) => WeeklyUsageSchema.parse(row));
-    } catch (error) {
-      logger.error('Failed to get weekly usage', error);
-      return [];
-    }
-  }
-
-  static getUsageByMonth(
-    accountId?: string,
-    start?: number,
-    end?: number,
-  ): Array<{
-    bucket: string;
-    promptTokens: number;
-    completionTokens: number;
-    totalTokens: number;
-    requests: number;
-  }> {
-    const { raw } = getUsageDb();
-    try {
-      const accountFilter = buildAccountFilter(accountId);
-      const dateFilter = buildDateFilter(start, end);
-      const sql = `
-        SELECT
-          strftime('%Y-%m', timestamp / 1000, 'unixepoch', 'localtime') as bucket,
-          SUM(prompt_tokens) as promptTokens,
-          SUM(completion_tokens) as completionTokens,
-          SUM(total_tokens) as totalTokens,
-          COUNT(*) as requests
-        FROM token_usage
-        WHERE 1=1
-        ${accountFilter.sql}
-        ${dateFilter.sql}
-        GROUP BY bucket
-        ORDER BY bucket
-      `;
-      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
-      return rows.map((row) => MonthlyUsageSchema.parse(row));
-    } catch (error) {
-      logger.error('Failed to get monthly usage', error);
-      return [];
-    }
-  }
-
-  static getUsageByModel(
-    accountId?: string,
-    start?: number,
-    end?: number,
-  ): Array<{
-    model: string;
-    promptTokens: number;
-    completionTokens: number;
-    totalTokens: number;
-    requests: number;
-  }> {
-    const { raw } = getUsageDb();
-    try {
-      const accountFilter = buildAccountFilter(accountId);
-      const dateFilter = buildDateFilter(start, end);
-      const sql = `
-        SELECT
-          model,
-          SUM(prompt_tokens) as promptTokens,
-          SUM(completion_tokens) as completionTokens,
-          SUM(total_tokens) as totalTokens,
-          COUNT(*) as requests
-        FROM token_usage
-        WHERE 1=1
-        ${accountFilter.sql}
-        ${dateFilter.sql}
-        GROUP BY model
-        ORDER BY totalTokens DESC
-      `;
-      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
-      return rows.map((row) => ModelUsageSchema.parse(row));
-    } catch (error) {
-      logger.error('Failed to get model usage', error);
-      return [];
-    }
-  }
-}
+import { logger } from '../../utils/logger';
+import Database from 'better-sqlite3';
+import type { BetterSQLite3Database } from 'drizzle-orm/better-sqlite3';
+import { openDrizzleConnection } from './dbConnection';
+import { getCloudAccountsDbPath } from '../../utils/paths';
+import { ensureDatabaseInitialized } from './cloudHandler';
+import { tokenUsage } from './schema';
+import {
+  HourlyUsageSchema,
+  DailyUsageSchema,
+  WeeklyUsageSchema,
+  MonthlyUsageSchema,
+  ModelUsageSchema,
+} from '../../types/db';
+
+export interface RecordUsageParams {
+  accountId: string;
+  model: string;
+  promptTokens: number;
+  completionTokens: number;
+  totalTokens: number;
+  timestamp: number;
+  requestType?: string;
+  isEstimated?: boolean;
+}
+
+let usageDbConnection: {
+  raw: Database.Database;
+  orm: BetterSQLite3Database<typeof import('./schema')>;
+} | null = null;
+
+function getUsageDb() {
+  if (!usageDbConnection) {
+    const dbPath = getCloudAccountsDbPath();
+    ensureDatabaseInitialized(dbPath);
+    usageDbConnection = openDrizzleConnection(
+      dbPath,
+      { readonly: false, fileMustExist: false },
+      { busyTimeoutMs: 3000 },
+    );
+  }
+  return usageDbConnection;
+}
+
+function buildDateFilter(start?: number, end?: number): { sql: string; params: number[] } {
+  const conditions: string[] = [];
+  const params: number[] = [];
+  if (start !== undefined) {
+    conditions.push(`timestamp >= ?`);
+    params.push(start);
+  }
+  if (end !== undefined) {
+    conditions.push(`timestamp <= ?`);
+    params.push(end);
+  }
+  return {
+    sql: conditions.length > 0 ? `AND ${conditions.join(' AND ')}` : '',
+    params,
+  };
+}
+
+function buildAccountFilter(accountId?: string): { sql: string; params: unknown[] } {
+  return accountId ? { sql: 'AND account_id = ?', params: [accountId] } : { sql: '', params: [] };
+}
+
+export class TokenUsageRepo {
+  static recordUsage(params: RecordUsageParams): boolean {
+    const { orm } = getUsageDb();
+    try {
+      orm
+        .insert(tokenUsage)
+        .values({
+          accountId: params.accountId,
+          model: params.model,
+          promptTokens: params.promptTokens,
+          completionTokens: params.completionTokens,
+          totalTokens: params.totalTokens,
+          timestamp: params.timestamp,
+          requestType: params.requestType ?? null,
+          isEstimated: params.isEstimated ? 1 : null,
+        })
+        .run();
+      return true;
+    } catch (error) {
+      logger.error('Failed to record token usage', error);
+      return false;
+    }
+  }
+
+  static getUsageByHour(
+    accountId?: string,
+    start?: number,
+    end?: number,
+  ): Array<{
+    bucket: string;
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+    requests: number;
+  }> {
+    const { raw } = getUsageDb();
+    try {
+      const accountFilter = buildAccountFilter(accountId);
+      const dateFilter = buildDateFilter(start, end);
+      const sql = `
+        SELECT
+          strftime('%Y-%m-%d %H:00', timestamp / 1000, 'unixepoch', 'localtime') as bucket,
+          SUM(prompt_tokens) as promptTokens,
+          SUM(completion_tokens) as completionTokens,
+          SUM(total_tokens) as totalTokens,
+          COUNT(*) as requests
+        FROM token_usage
+        WHERE 1=1
+        ${accountFilter.sql}
+        ${dateFilter.sql}
+        GROUP BY bucket
+        ORDER BY bucket
+      `;
+      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
+      return rows.map((row) => HourlyUsageSchema.parse(row));
+    } catch (error) {
+      logger.error('Failed to get hourly usage', error);
+      return [];
+    }
+  }
+
+  static getUsageByDay(
+    accountId?: string,
+    start?: number,
+    end?: number,
+  ): Array<{
+    bucket: string;
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+    requests: number;
+  }> {
+    const { raw } = getUsageDb();
+    try {
+      const accountFilter = buildAccountFilter(accountId);
+      const dateFilter = buildDateFilter(start, end);
+      const sql = `
+        SELECT
+          strftime('%Y-%m-%d', timestamp / 1000, 'unixepoch', 'localtime') as bucket,
+          SUM(prompt_tokens) as promptTokens,
+          SUM(completion_tokens) as completionTokens,
+          SUM(total_tokens) as totalTokens,
+          COUNT(*) as requests
+        FROM token_usage
+        WHERE 1=1
+        ${accountFilter.sql}
+        ${dateFilter.sql}
+        GROUP BY bucket
+        ORDER BY bucket
+      `;
+      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
+      return rows.map((row) => DailyUsageSchema.parse(row));
+    } catch (error) {
+      logger.error('Failed to get daily usage', error);
+      return [];
+    }
+  }
+
+  static getUsageByWeek(
+    accountId?: string,
+    start?: number,
+    end?: number,
+  ): Array<{
+    bucket: string;
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+    requests: number;
+  }> {
+    const { raw } = getUsageDb();
+    try {
+      const accountFilter = buildAccountFilter(accountId);
+      const dateFilter = buildDateFilter(start, end);
+      const sql = `
+        SELECT
+          strftime('%Y-%W', timestamp / 1000, 'unixepoch', 'localtime') as bucket,
+          SUM(prompt_tokens) as promptTokens,
+          SUM(completion_tokens) as completionTokens,
+          SUM(total_tokens) as totalTokens,
+          COUNT(*) as requests
+        FROM token_usage
+        WHERE 1=1
+        ${accountFilter.sql}
+        ${dateFilter.sql}
+        GROUP BY bucket
+        ORDER BY bucket
+      `;
+      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
+      return rows.map((row) => WeeklyUsageSchema.parse(row));
+    } catch (error) {
+      logger.error('Failed to get weekly usage', error);
+      return [];
+    }
+  }
+
+  static getUsageByMonth(
+    accountId?: string,
+    start?: number,
+    end?: number,
+  ): Array<{
+    bucket: string;
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+    requests: number;
+  }> {
+    const { raw } = getUsageDb();
+    try {
+      const accountFilter = buildAccountFilter(accountId);
+      const dateFilter = buildDateFilter(start, end);
+      const sql = `
+        SELECT
+          strftime('%Y-%m', timestamp / 1000, 'unixepoch', 'localtime') as bucket,
+          SUM(prompt_tokens) as promptTokens,
+          SUM(completion_tokens) as completionTokens,
+          SUM(total_tokens) as totalTokens,
+          COUNT(*) as requests
+        FROM token_usage
+        WHERE 1=1
+        ${accountFilter.sql}
+        ${dateFilter.sql}
+        GROUP BY bucket
+        ORDER BY bucket
+      `;
+      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
+      return rows.map((row) => MonthlyUsageSchema.parse(row));
+    } catch (error) {
+      logger.error('Failed to get monthly usage', error);
+      return [];
+    }
+  }
+
+  static getUsageByModel(
+    accountId?: string,
+    start?: number,
+    end?: number,
+  ): Array<{
+    model: string;
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+    requests: number;
+  }> {
+    const { raw } = getUsageDb();
+    try {
+      const accountFilter = buildAccountFilter(accountId);
+      const dateFilter = buildDateFilter(start, end);
+      const sql = `
+        SELECT
+          model,
+          SUM(prompt_tokens) as promptTokens,
+          SUM(completion_tokens) as completionTokens,
+          SUM(total_tokens) as totalTokens,
+          COUNT(*) as requests
+        FROM token_usage
+        WHERE 1=1
+        ${accountFilter.sql}
+        ${dateFilter.sql}
+        GROUP BY model
+        ORDER BY totalTokens DESC
+      `;
+      const rows = raw.prepare(sql).all(...accountFilter.params, ...dateFilter.params) as unknown[];
+      return rows.map((row) => ModelUsageSchema.parse(row));
+    } catch (error) {
+      logger.error('Failed to get model usage', error);
+      return [];
+    }
+  }
+}

src/ipc/gateway/handlers.ts

@@ -1,60 +1,60 @@
-/**
- * Gateway IPC Handlers
- * Provides ORPC handlers for controlling the API Gateway service (NestJS version)
- */
-import { bootstrapNestServer, stopNestServer, getNestServerStatus } from '../../server/main';
-import { ConfigManager } from '../config/manager';
-import { v4 as uuidv4 } from 'uuid';
-import { logger } from '../../utils/logger';
-
-/**
- * Start the gateway server (NestJS)
- */
-export const startGateway = async (port: number): Promise<boolean> => {
-  try {
-    // Stop if already running
-    await stopNestServer();
-
-    // Load full config and start NestJS server
-    const config = ConfigManager.loadConfig();
-    const proxyConfig = { ...config.proxy, port };
-
-    return await bootstrapNestServer(proxyConfig);
-  } catch (e) {
-    logger.error('Failed to start gateway:', e);
-    return false;
-  }
-};
-
-/**
- * Stop the gateway server (NestJS)
- */
-export const stopGateway = async (): Promise<boolean> => {
-  try {
-    return await stopNestServer();
-  } catch (e) {
-    logger.error('Failed to stop gateway:', e);
-    return false;
-  }
-};
-
-/**
- * Get gateway status (NestJS)
- */
-export const getGatewayStatus = async () => {
-  return getNestServerStatus();
-};
-
-/**
- * Generate a new API key
- */
-export const generateApiKey = async (): Promise<string> => {
-  const newKey = `sk-${uuidv4().replace(/-/g, '')}`;
-
-  // Save to config
-  const config = ConfigManager.loadConfig();
-  config.proxy.api_key = newKey;
-  await ConfigManager.saveConfig(config);
-
-  return newKey;
-};
+/**
+ * Gateway IPC Handlers
+ * Provides ORPC handlers for controlling the API Gateway service (NestJS version)
+ */
+import { bootstrapNestServer, stopNestServer, getNestServerStatus } from '../../server/main';
+import { ConfigManager } from '../config/manager';
+import { v4 as uuidv4 } from 'uuid';
+import { logger } from '../../utils/logger';
+
+/**
+ * Start the gateway server (NestJS)
+ */
+export const startGateway = async (port: number): Promise<boolean> => {
+  try {
+    // Stop if already running
+    await stopNestServer();
+
+    // Load full config and start NestJS server
+    const config = ConfigManager.loadConfig();
+    const proxyConfig = { ...config.proxy, port };
+
+    return await bootstrapNestServer(proxyConfig);
+  } catch (e) {
+    logger.error('Failed to start gateway:', e);
+    return false;
+  }
+};
+
+/**
+ * Stop the gateway server (NestJS)
+ */
+export const stopGateway = async (): Promise<boolean> => {
+  try {
+    return await stopNestServer();
+  } catch (e) {
+    logger.error('Failed to stop gateway:', e);
+    return false;
+  }
+};
+
+/**
+ * Get gateway status (NestJS)
+ */
+export const getGatewayStatus = async () => {
+  return getNestServerStatus();
+};
+
+/**
+ * Generate a new API key
+ */
+export const generateApiKey = async (): Promise<string> => {
+  const newKey = `sk-${uuidv4().replace(/-/g, '')}`;
+
+  // Save to config
+  const config = ConfigManager.loadConfig();
+  config.proxy.api_key = newKey;
+  await ConfigManager.saveConfig(config);
+
+  return newKey;
+};

src/ipc/gateway/router.ts

@@ -1,36 +1,36 @@
-/**
- * Gateway ORPC Router
- * Provides routes for controlling the API Gateway service
- */
-import { os } from '@orpc/server';
-import { z } from 'zod';
-import { startGateway, stopGateway, getGatewayStatus, generateApiKey } from './handlers';
-
-export const gatewayRouter = os.prefix('/gateway').router({
-  start: os
-    .input(z.object({ port: z.number().min(1024).max(65535) }))
-    .handler(async ({ input }) => {
-      const success = await startGateway(input.port);
-      if (!success) {
-        throw new Error('Failed to start gateway');
-      }
-      return { success };
-    }),
-
-  stop: os.handler(async () => {
-    const success = await stopGateway();
-    if (!success) {
-      throw new Error('Failed to stop gateway');
-    }
-    return { success };
-  }),
-
-  status: os.handler(async () => {
-    return getGatewayStatus();
-  }),
-
-  generateKey: os.handler(async () => {
-    const newKey = await generateApiKey();
-    return { api_key: newKey };
-  }),
-});
+/**
+ * Gateway ORPC Router
+ * Provides routes for controlling the API Gateway service
+ */
+import { os } from '@orpc/server';
+import { z } from 'zod';
+import { startGateway, stopGateway, getGatewayStatus, generateApiKey } from './handlers';
+
+export const gatewayRouter = os.prefix('/gateway').router({
+  start: os
+    .input(z.object({ port: z.number().min(1024).max(65535) }))
+    .handler(async ({ input }) => {
+      const success = await startGateway(input.port);
+      if (!success) {
+        throw new Error('Failed to start gateway');
+      }
+      return { success };
+    }),
+
+  stop: os.handler(async () => {
+    const success = await stopGateway();
+    if (!success) {
+      throw new Error('Failed to stop gateway');
+    }
+    return { success };
+  }),
+
+  status: os.handler(async () => {
+    return getGatewayStatus();
+  }),
+
+  generateKey: os.handler(async () => {
+    const newKey = await generateApiKey();
+    return { api_key: newKey };
+  }),
+});

src/ipc/handler.ts

@@ -1,34 +1,34 @@
-import { RPCHandler } from '@orpc/server/message-port';
-import { router } from './router';
-
-import { logger } from '../utils/logger';
-
-// Debug logging
-try {
-  logger.info('Initializing rpcHandler');
-  logger.info(`Router keys: ${Object.keys(router).join(', ')}`);
-  if (router) {
-    const proc = router.proc || (router as any)._def?.router?.proc; // Check 'proc' not 'process'
-    logger.info(`Process router (proc) check: ${!!proc}`);
-    try {
-      if (proc) {
-        // @ts-ignore
-        const procKeys = proc.$handlers ? Object.keys(proc.$handlers) : Object.keys(proc);
-        // Try to find handlers in _def if not direct properties
-        // @ts-ignore
-        const defKeys = proc._def?.router ? Object.keys(proc._def.router) : [];
-        logger.info(`Process router keys (direct): ${JSON.stringify(procKeys)}`);
-        logger.info(`Process router keys (_def): ${JSON.stringify(defKeys)}`);
-      }
-    } catch (e) {
-      logger.info('Could not stringify process router keys', e);
-    }
-
-    const db = router.database;
-    logger.info(`Database router check: ${!!db}`);
-  }
-} catch (e) {
-  logger.error('Error logging router:', e);
-}
-
-export const rpcHandler: RPCHandler<Record<never, never>> = new RPCHandler(router);
+import { RPCHandler } from '@orpc/server/message-port';
+import { router } from './router';
+
+import { logger } from '../utils/logger';
+
+// Debug logging
+try {
+  logger.info('Initializing rpcHandler');
+  logger.info(`Router keys: ${Object.keys(router).join(', ')}`);
+  if (router) {
+    const proc = router.proc || (router as any)._def?.router?.proc; // Check 'proc' not 'process'
+    logger.info(`Process router (proc) check: ${!!proc}`);
+    try {
+      if (proc) {
+        // @ts-ignore
+        const procKeys = proc.$handlers ? Object.keys(proc.$handlers) : Object.keys(proc);
+        // Try to find handlers in _def if not direct properties
+        // @ts-ignore
+        const defKeys = proc._def?.router ? Object.keys(proc._def.router) : [];
+        logger.info(`Process router keys (direct): ${JSON.stringify(procKeys)}`);
+        logger.info(`Process router keys (_def): ${JSON.stringify(defKeys)}`);
+      }
+    } catch (e) {
+      logger.info('Could not stringify process router keys', e);
+    }
+
+    const db = router.database;
+    logger.info(`Database router check: ${!!db}`);
+  }
+} catch (e) {
+  logger.error('Error logging router:', e);
+}
+
+export const rpcHandler: RPCHandler<Record<never, never>> = new RPCHandler(router);

src/ipc/manager.ts

@@ -1,42 +1,42 @@
-import { IPC_CHANNELS } from '@/constants';
-import { createORPCClient } from '@orpc/client';
-import { RPCLink } from '@orpc/client/message-port';
-import type { RouterClient } from '@orpc/server';
-import type { router } from './router';
-
-type IPCClient = RouterClient<typeof router>;
-
-class IPCManager {
-  private readonly clientPort: MessagePort;
-  private readonly serverPort: MessagePort;
-
-  public readonly client: IPCClient;
-
-  private initialized: boolean = false;
-
-  constructor() {
-    const { port1, port2 } = new MessageChannel();
-    this.clientPort = port1;
-    this.serverPort = port2;
-
-    this.client = createORPCClient<IPCClient>(
-      new RPCLink({
-        port: this.clientPort,
-      }),
-    );
-  }
-
-  public initialize() {
-    if (this.initialized) {
-      return;
-    }
-
-    this.clientPort.start();
-
-    window.postMessage(IPC_CHANNELS.START_ORPC_SERVER, '*', [this.serverPort]);
-    this.initialized = true;
-  }
-}
-
-export const ipc = new IPCManager();
-ipc.initialize();
+import { IPC_CHANNELS } from '@/constants';
+import { createORPCClient } from '@orpc/client';
+import { RPCLink } from '@orpc/client/message-port';
+import type { RouterClient } from '@orpc/server';
+import type { router } from './router';
+
+type IPCClient = RouterClient<typeof router>;
+
+class IPCManager {
+  private readonly clientPort: MessagePort;
+  private readonly serverPort: MessagePort;
+
+  public readonly client: IPCClient;
+
+  private initialized: boolean = false;
+
+  constructor() {
+    const { port1, port2 } = new MessageChannel();
+    this.clientPort = port1;
+    this.serverPort = port2;
+
+    this.client = createORPCClient<IPCClient>(
+      new RPCLink({
+        port: this.clientPort,
+      }),
+    );
+  }
+
+  public initialize() {
+    if (this.initialized) {
+      return;
+    }
+
+    this.clientPort.start();
+
+    window.postMessage(IPC_CHANNELS.START_ORPC_SERVER, '*', [this.serverPort]);
+    this.initialized = true;
+  }
+}
+
+export const ipc = new IPCManager();
+ipc.initialize();

src/ipc/process/handler.ts

@@ -1,65 +1,65 @@
-import { logger } from '../../utils/logger';
-import {
-  bootstrapNestServer,
-  isNestServerRunning,
-  stopNestServer,
-} from '../../server/main';
-import { ConfigManager } from '../config/manager';
-
-/**
- * Checks if the Gemini Nexus process is running.
- * Uses find-process package for robust cross-platform process detection.
- * @returns {boolean} True if the Gemini Nexus process is running, false otherwise.
- */
-export async function isProcessRunning(): Promise<boolean> {
-  // Check the embedded NestJS proxy server status instead of an external process
-  return isNestServerRunning();
-}
-
-/**
- * Closes the Gemini Nexus process.
- * @returns {boolean} True if the Gemini Nexus process is running, false otherwise.
- */
-export async function closeGeminiNexus(): Promise<void> {
-  logger.info('Stopping Gemini Nexus proxy server...');
-  await stopNestServer();
-}
-
-
-
-/**
- * Waits for the Gemini Nexus process to exit.
- * Polls the NestJS server status until it stops or the timeout is reached.
- * @param timeoutMs {number} Maximum time to wait in milliseconds.
- * @returns {Promise<void>} A promise that resolves when the process exits.
- */
-export async function _waitForProcessExit(timeoutMs: number): Promise<void> {
-  const start = Date.now();
-  while (isNestServerRunning()) {
-    if (Date.now() - start > timeoutMs) {
-      throw new Error('Timeout waiting for Gemini Nexus proxy server to stop');
-    }
-    await new Promise((resolve) => setTimeout(resolve, 100));
-  }
-}
-
-/**
- * Starts the Gemini Nexus process.
- * @param useUri {boolean} Whether to use the URI protocol to start Gemini Nexus.
- * @returns {Promise<void>} A promise that resolves when the process starts.
- */
-export async function startGeminiNexus(_useUri = true): Promise<void> {
-  logger.info('Starting Gemini Nexus proxy server...');
-
-  if (isNestServerRunning()) {
-    logger.info('Gemini Nexus proxy server is already running');
-    return;
-  }
-
-  const config = ConfigManager.loadConfig();
-  if (config.proxy) {
-    await bootstrapNestServer(config.proxy);
-  } else {
-    throw new Error('Proxy configuration not found');
-  }
-}
+import { logger } from '../../utils/logger';
+import {
+  bootstrapNestServer,
+  isNestServerRunning,
+  stopNestServer,
+} from '../../server/main';
+import { ConfigManager } from '../config/manager';
+
+/**
+ * Checks if the Gemini Nexus process is running.
+ * Uses find-process package for robust cross-platform process detection.
+ * @returns {boolean} True if the Gemini Nexus process is running, false otherwise.
+ */
+export async function isProcessRunning(): Promise<boolean> {
+  // Check the embedded NestJS proxy server status instead of an external process
+  return isNestServerRunning();
+}
+
+/**
+ * Closes the Gemini Nexus process.
+ * @returns {boolean} True if the Gemini Nexus process is running, false otherwise.
+ */
+export async function closeGeminiNexus(): Promise<void> {
+  logger.info('Stopping Gemini Nexus proxy server...');
+  await stopNestServer();
+}
+
+
+
+/**
+ * Waits for the Gemini Nexus process to exit.
+ * Polls the NestJS server status until it stops or the timeout is reached.
+ * @param timeoutMs {number} Maximum time to wait in milliseconds.
+ * @returns {Promise<void>} A promise that resolves when the process exits.
+ */
+export async function _waitForProcessExit(timeoutMs: number): Promise<void> {
+  const start = Date.now();
+  while (isNestServerRunning()) {
+    if (Date.now() - start > timeoutMs) {
+      throw new Error('Timeout waiting for Gemini Nexus proxy server to stop');
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+}
+
+/**
+ * Starts the Gemini Nexus process.
+ * @param useUri {boolean} Whether to use the URI protocol to start Gemini Nexus.
+ * @returns {Promise<void>} A promise that resolves when the process starts.
+ */
+export async function startGeminiNexus(_useUri = true): Promise<void> {
+  logger.info('Starting Gemini Nexus proxy server...');
+
+  if (isNestServerRunning()) {
+    logger.info('Gemini Nexus proxy server is already running');
+    return;
+  }
+
+  const config = ConfigManager.loadConfig();
+  if (config.proxy) {
+    await bootstrapNestServer(config.proxy);
+  } else {
+    throw new Error('Proxy configuration not found');
+  }
+}

src/ipc/proxy-advanced/handler.ts

@@ -1,372 +1,372 @@
-import { logger } from '../../utils/logger';
-import { getServiceOrThrow } from './service-registry';
-import type { IdeConfigResult } from '../../server/modules/proxy/proxy-ide-config.service';
-import { TrafficLogsRepo } from '../database/proxyMetricsHandler';
-import { CloudAccountRepo } from '../database/cloudHandler';
-
-export interface TrafficLogEntryParsed {
-  timestamp: string;
-  direction: string;
-  requestId: string;
-  endpoint: string;
-  method?: string;
-  status?: number;
-  headers?: Record<string, unknown>;
-  body?: unknown;
-  chunk?: unknown;
-  durationMs?: number;
-  error?: {
-    message: string;
-    stack?: string;
-    status?: number;
-    body?: unknown;
-  };
-  metadata?: Record<string, unknown>;
-}
-
-function normalizeServiceError(error: unknown): string {
-  if (error instanceof Error && error.message.includes('is not registered')) {
-    return 'Proxy advanced service not initialized';
-  }
-  return error instanceof Error ? error.message : String(error);
-}
-
-export async function getRecentTrafficLogs(
-  limit: number = 50,
-  direction?: string,
-): Promise<{ success: boolean; data?: TrafficLogEntryParsed[]; error?: string }> {
-  try {
-    const rows = TrafficLogsRepo.getRecent(limit, direction);
-    const entries: TrafficLogEntryParsed[] = rows.map((r) => ({
-      timestamp: new Date(r.timestamp).toISOString(),
-      direction: r.direction,
-      requestId: r.requestId,
-      endpoint: r.endpoint,
-      method: r.method,
-      status: r.status,
-      headers: r.headers,
-      body: r.body,
-      chunk: r.chunk,
-      durationMs: r.durationMs,
-      error: r.error,
-      metadata: r.metadata,
-    }));
-
-    return { success: true, data: entries };
-  } catch (error) {
-    logger.error('Failed to get recent traffic logs', error);
-    return { success: false, error: error instanceof Error ? error.message : String(error) };
-  }
-}
-
-export async function getTrafficLogStats(): Promise<{
-  success: boolean;
-  data?: { byDirection: Record<string, number>; byEndpoint: Record<string, number>; total: number };
-  error?: string;
-}> {
-  try {
-    const stats = TrafficLogsRepo.getStats();
-    return { success: true, data: stats };
-  } catch (error) {
-    logger.error('Failed to get traffic log stats', error);
-    return { success: false, error: error instanceof Error ? error.message : String(error) };
-  }
-}
-
-export async function exportTrafficLogs(
-  format: 'json' | 'csv',
-): Promise<{ success: boolean; data?: string; error?: string }> {
-  try {
-    const rows = TrafficLogsRepo.getAllForExport();
-
-    if (format === 'json') {
-      return { success: true, data: JSON.stringify(rows, null, 2) };
-    }
-
-    // CSV format
-    const headers = ['timestamp', 'direction', 'requestId', 'endpoint', 'method', 'status', 'durationMs'];
-    const rowsCsv = rows.map((e) =>
-      [
-        new Date(e.timestamp).toISOString(),
-        e.direction,
-        e.requestId,
-        e.endpoint,
-        e.method || '',
-        e.status != null ? e.status : '',
-        e.durationMs != null ? e.durationMs : '',
-      ]
-        .map((v) => `"${String(v).replace(/"/g, '""')}"`)
-        .join(','),
-    );
-
-    return { success: true, data: [headers.join(','), ...rowsCsv].join('\n') };
-  } catch (error) {
-    logger.error('Failed to export traffic logs', error);
-    return { success: false, error: error instanceof Error ? error.message : String(error) };
-  }
-}
-
-export async function getParityCounters(): Promise<{
-  success: boolean;
-  data?: { totalRequests: number; matchedRequests: number; parityViolations: number; lastUpdated: string };
-  error?: string;
-}> {
-  try {
-    const tokenManager = getServiceOrThrow('tokenManager');
-    return {
-      success: true,
-      data: tokenManager.getParityCounters(),
-    };
-  } catch (error) {
-    return { success: false, error: normalizeServiceError(error) };
-  }
-}
-
-export async function getCircuitBreakerStatus(): Promise<{
-  success: boolean;
-  data?: { states: Record<string, { state: string; failures: number; lastFailure: string | null }>; globalEnabled: boolean };
-  error?: string;
-}> {
-  try {
-    const tokenManager = getServiceOrThrow('tokenManager');
-
-    const rawStatus = tokenManager.getCircuitBreakerStatus();
-    const states: Record<string, { state: string; failures: number; lastFailure: string | null }> = {};
-    for (const [accountId, entry] of Object.entries(rawStatus)) {
-      states[accountId] = {
-        state: entry.state,
-        failures: entry.failureCount,
-        lastFailure: entry.lastFailureTime ? new Date(entry.lastFailureTime).toISOString() : null,
-      };
-    }
-
-    return {
-      success: true,
-      data: {
-        states,
-        globalEnabled: true,
-      },
-    };
-  } catch (error) {
-    return { success: false, error: normalizeServiceError(error) };
-  }
-}
-
-export async function getProxyMetrics(): Promise<{
-  success: boolean;
-    data?: {
-    uptimeSeconds: number;
-    totalRequests: number;
-    activeConnections: number;
-    avgLatency: number;
-    errorRate: number;
-    requestsPerMinute: number;
-    cacheHitRate: number;
-  };
-  error?: string;
-}> {
-  try {
-    const proxyMetrics = getServiceOrThrow('proxyMetrics');
-
-    const metrics = proxyMetrics.getMetrics();
-    return {
-      success: true,
-      data: {
-        uptimeSeconds: Math.floor(process.uptime()),
-        totalRequests: metrics.totalRequests,
-        activeConnections: metrics.activeConnections,
-        avgLatency: metrics.avgLatency,
-        errorRate: metrics.errorRate,
-        requestsPerMinute: metrics.requestsPerMinute,
-        cacheHitRate: metrics.cacheHitRate,
-      },
-    };
-  } catch (error) {
-    logger.error('Failed to get proxy metrics', error);
-    return { success: false, error: normalizeServiceError(error) };
-  }
-}
-
-export async function getRecentRequests(): Promise<{ success: boolean; data?: unknown[]; error?: string }> {
-  try {
-    const proxyReplay = getServiceOrThrow('proxyReplay');
-    return {
-      success: true,
-      data: proxyReplay.getRecentRequests(20),
-    };
-  } catch (error) {
-    return { success: false, error: normalizeServiceError(error) };
-  }
-}
-
-export async function replayRequest(
-  requestId: string,
-): Promise<{ success: boolean; data?: { original: unknown; newResponse: unknown }; error?: string }> {
-  try {
-    const proxyReplay = getServiceOrThrow('proxyReplay');
-    const result = await proxyReplay.replayRequest(requestId);
-    return { success: true, data: result };
-  } catch (error) {
-    return { success: false, error: normalizeServiceError(error) };
-  }
-}
-
-export interface ModelCapabilityEntry {
-  id: string;
-  object: string;
-  displayName?: string;
-  capabilities: {
-    vision: boolean;
-    thinking: boolean;
-    streaming: boolean;
-    jsonMode: boolean;
-    recommended: boolean;
-  };
-  limits: {
-    maxTokens?: number;
-    maxOutputTokens?: number;
-    thinkingBudget?: number;
-  };
-}
-
-export async function getModelCapabilities(): Promise<{
-  success: boolean;
-  data?: ModelCapabilityEntry[];
-  error?: string;
-}> {
-  try {
-    const accounts = await CloudAccountRepo.getAccounts();
-
-    const modelMap = new Map<string, ModelCapabilityEntry>();
-
-    for (const account of accounts) {
-      if (!account.quota || !account.quota.models) {
-        continue;
-      }
-
-      for (const [modelId, modelInfo] of Object.entries(account.quota.models)) {
-        if (modelMap.has(modelId)) {
-          continue;
-        }
-
-        modelMap.set(modelId, {
-          id: modelId,
-          object: 'model',
-          displayName: modelInfo.display_name,
-          capabilities: {
-            vision: modelInfo.supports_images ?? false,
-            thinking: modelInfo.supports_thinking ?? false,
-            streaming: true,
-            jsonMode: true,
-            recommended: modelInfo.recommended ?? false,
-          },
-          limits: {
-            maxTokens: modelInfo.max_tokens,
-            maxOutputTokens: modelInfo.max_output_tokens,
-            thinkingBudget: modelInfo.thinking_budget,
-          },
-        });
-      }
-    }
-
-    const data = Array.from(modelMap.values()).sort((a, b) => a.id.localeCompare(b.id));
-
-    return { success: true, data };
-  } catch (error) {
-    logger.error('Failed to get model capabilities', error);
-    return { success: false, error: error instanceof Error ? error.message : String(error) };
-  }
-}
-
-function mapIdeConfigResult(
-  result: IdeConfigResult,
-): {
-  name: string;
-  settingsPath: string;
-  proxySetting: string;
-  apiKeySetting: string;
-  instructions: string;
-} {
-  switch (result.ide) {
-    case 'vscode':
-      return {
-        name: 'VS Code',
-        settingsPath: 'settings.json',
-        proxySetting: 'openai.url',
-        apiKeySetting: 'openai.apiKey',
-        instructions: 'Add these settings to your VS Code settings.json',
-      };
-    case 'cursor':
-      return {
-        name: 'Cursor',
-        settingsPath: 'settings.json',
-        proxySetting: 'OPENAI_BASE_URL',
-        apiKeySetting: 'OPENAI_API_KEY',
-        instructions: 'Set these environment variables for Cursor',
-      };
-    case 'claude-code':
-      return {
-        name: 'Claude Code',
-        settingsPath: 'Shell environment',
-        proxySetting: 'ANTHROPIC_BASE_URL',
-        apiKeySetting: 'ANTHROPIC_API_KEY',
-        instructions: 'Run these export commands before starting Claude Code',
-      };
-    case 'jetbrains':
-      return {
-        name: 'JetBrains',
-        settingsPath: 'IDE Settings',
-        proxySetting: 'Base URL',
-        apiKeySetting: 'API Key',
-        instructions: String(result.content),
-      };
-    case 'opencide':
-      return {
-        name: 'Opencide',
-        settingsPath: '.env',
-        proxySetting: 'OPENAI_BASE_URL',
-        apiKeySetting: 'OPENAI_API_KEY',
-        instructions: 'Add these lines to your .env file',
-      };
-    default: {
-      const exhaustiveCheck: never = result.ide;
-      throw new Error(`Unsupported IDE: ${String(exhaustiveCheck)}`);
-    }
-  }
-}
-
-export async function generateIdeConfig(
-  ide: string,
-): Promise<{
-  success: boolean;
-  data?: {
-    name: string;
-    settingsPath: string;
-    proxySetting: string;
-    apiKeySetting: string;
-    instructions: string;
-  };
-  error?: string;
-}> {
-  try {
-    const proxyIdeConfig = getServiceOrThrow('proxyIdeConfig');
-
-    const supportedIdes = ['cursor', 'vscode', 'claude-code', 'jetbrains', 'opencide'] as const;
-    const normalizedIde = ide.toLowerCase() as typeof supportedIdes[number];
-    if (!supportedIdes.includes(normalizedIde)) {
-      return { success: false, error: `Unsupported IDE: ${ide}` };
-    }
-
-    const result = proxyIdeConfig.generateConfigForCurrentServer(normalizedIde);
-    if (!result) {
-      return { success: false, error: 'Failed to generate IDE config: server not configured' };
-    }
-
-    return {
-      success: true,
-      data: mapIdeConfigResult(result),
-    };
-  } catch (error) {
-    return { success: false, error: normalizeServiceError(error) };
-  }
-}
+import { logger } from '../../utils/logger';
+import { getServiceOrThrow } from './service-registry';
+import type { IdeConfigResult } from '../../server/modules/proxy/proxy-ide-config.service';
+import { TrafficLogsRepo } from '../database/proxyMetricsHandler';
+import { CloudAccountRepo } from '../database/cloudHandler';
+
+export interface TrafficLogEntryParsed {
+  timestamp: string;
+  direction: string;
+  requestId: string;
+  endpoint: string;
+  method?: string;
+  status?: number;
+  headers?: Record<string, unknown>;
+  body?: unknown;
+  chunk?: unknown;
+  durationMs?: number;
+  error?: {
+    message: string;
+    stack?: string;
+    status?: number;
+    body?: unknown;
+  };
+  metadata?: Record<string, unknown>;
+}
+
+function normalizeServiceError(error: unknown): string {
+  if (error instanceof Error && error.message.includes('is not registered')) {
+    return 'Proxy advanced service not initialized';
+  }
+  return error instanceof Error ? error.message : String(error);
+}
+
+export async function getRecentTrafficLogs(
+  limit: number = 50,
+  direction?: string,
+): Promise<{ success: boolean; data?: TrafficLogEntryParsed[]; error?: string }> {
+  try {
+    const rows = TrafficLogsRepo.getRecent(limit, direction);
+    const entries: TrafficLogEntryParsed[] = rows.map((r) => ({
+      timestamp: new Date(r.timestamp).toISOString(),
+      direction: r.direction,
+      requestId: r.requestId,
+      endpoint: r.endpoint,
+      method: r.method,
+      status: r.status,
+      headers: r.headers,
+      body: r.body,
+      chunk: r.chunk,
+      durationMs: r.durationMs,
+      error: r.error,
+      metadata: r.metadata,
+    }));
+
+    return { success: true, data: entries };
+  } catch (error) {
+    logger.error('Failed to get recent traffic logs', error);
+    return { success: false, error: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+export async function getTrafficLogStats(): Promise<{
+  success: boolean;
+  data?: { byDirection: Record<string, number>; byEndpoint: Record<string, number>; total: number };
+  error?: string;
+}> {
+  try {
+    const stats = TrafficLogsRepo.getStats();
+    return { success: true, data: stats };
+  } catch (error) {
+    logger.error('Failed to get traffic log stats', error);
+    return { success: false, error: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+export async function exportTrafficLogs(
+  format: 'json' | 'csv',
+): Promise<{ success: boolean; data?: string; error?: string }> {
+  try {
+    const rows = TrafficLogsRepo.getAllForExport();
+
+    if (format === 'json') {
+      return { success: true, data: JSON.stringify(rows, null, 2) };
+    }
+
+    // CSV format
+    const headers = ['timestamp', 'direction', 'requestId', 'endpoint', 'method', 'status', 'durationMs'];
+    const rowsCsv = rows.map((e) =>
+      [
+        new Date(e.timestamp).toISOString(),
+        e.direction,
+        e.requestId,
+        e.endpoint,
+        e.method || '',
+        e.status != null ? e.status : '',
+        e.durationMs != null ? e.durationMs : '',
+      ]
+        .map((v) => `"${String(v).replace(/"/g, '""')}"`)
+        .join(','),
+    );
+
+    return { success: true, data: [headers.join(','), ...rowsCsv].join('\n') };
+  } catch (error) {
+    logger.error('Failed to export traffic logs', error);
+    return { success: false, error: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+export async function getParityCounters(): Promise<{
+  success: boolean;
+  data?: { totalRequests: number; matchedRequests: number; parityViolations: number; lastUpdated: string };
+  error?: string;
+}> {
+  try {
+    const tokenManager = getServiceOrThrow('tokenManager');
+    return {
+      success: true,
+      data: tokenManager.getParityCounters(),
+    };
+  } catch (error) {
+    return { success: false, error: normalizeServiceError(error) };
+  }
+}
+
+export async function getCircuitBreakerStatus(): Promise<{
+  success: boolean;
+  data?: { states: Record<string, { state: string; failures: number; lastFailure: string | null }>; globalEnabled: boolean };
+  error?: string;
+}> {
+  try {
+    const tokenManager = getServiceOrThrow('tokenManager');
+
+    const rawStatus = tokenManager.getCircuitBreakerStatus();
+    const states: Record<string, { state: string; failures: number; lastFailure: string | null }> = {};
+    for (const [accountId, entry] of Object.entries(rawStatus)) {
+      states[accountId] = {
+        state: entry.state,
+        failures: entry.failureCount,
+        lastFailure: entry.lastFailureTime ? new Date(entry.lastFailureTime).toISOString() : null,
+      };
+    }
+
+    return {
+      success: true,
+      data: {
+        states,
+        globalEnabled: true,
+      },
+    };
+  } catch (error) {
+    return { success: false, error: normalizeServiceError(error) };
+  }
+}
+
+export async function getProxyMetrics(): Promise<{
+  success: boolean;
+    data?: {
+    uptimeSeconds: number;
+    totalRequests: number;
+    activeConnections: number;
+    avgLatency: number;
+    errorRate: number;
+    requestsPerMinute: number;
+    cacheHitRate: number;
+  };
+  error?: string;
+}> {
+  try {
+    const proxyMetrics = getServiceOrThrow('proxyMetrics');
+
+    const metrics = proxyMetrics.getMetrics();
+    return {
+      success: true,
+      data: {
+        uptimeSeconds: Math.floor(process.uptime()),
+        totalRequests: metrics.totalRequests,
+        activeConnections: metrics.activeConnections,
+        avgLatency: metrics.avgLatency,
+        errorRate: metrics.errorRate,
+        requestsPerMinute: metrics.requestsPerMinute,
+        cacheHitRate: metrics.cacheHitRate,
+      },
+    };
+  } catch (error) {
+    logger.error('Failed to get proxy metrics', error);
+    return { success: false, error: normalizeServiceError(error) };
+  }
+}
+
+export async function getRecentRequests(): Promise<{ success: boolean; data?: unknown[]; error?: string }> {
+  try {
+    const proxyReplay = getServiceOrThrow('proxyReplay');
+    return {
+      success: true,
+      data: proxyReplay.getRecentRequests(20),
+    };
+  } catch (error) {
+    return { success: false, error: normalizeServiceError(error) };
+  }
+}
+
+export async function replayRequest(
+  requestId: string,
+): Promise<{ success: boolean; data?: { original: unknown; newResponse: unknown }; error?: string }> {
+  try {
+    const proxyReplay = getServiceOrThrow('proxyReplay');
+    const result = await proxyReplay.replayRequest(requestId);
+    return { success: true, data: result };
+  } catch (error) {
+    return { success: false, error: normalizeServiceError(error) };
+  }
+}
+
+export interface ModelCapabilityEntry {
+  id: string;
+  object: string;
+  displayName?: string;
+  capabilities: {
+    vision: boolean;
+    thinking: boolean;
+    streaming: boolean;
+    jsonMode: boolean;
+    recommended: boolean;
+  };
+  limits: {
+    maxTokens?: number;
+    maxOutputTokens?: number;
+    thinkingBudget?: number;
+  };
+}
+
+export async function getModelCapabilities(): Promise<{
+  success: boolean;
+  data?: ModelCapabilityEntry[];
+  error?: string;
+}> {
+  try {
+    const accounts = await CloudAccountRepo.getAccounts();
+
+    const modelMap = new Map<string, ModelCapabilityEntry>();
+
+    for (const account of accounts) {
+      if (!account.quota || !account.quota.models) {
+        continue;
+      }
+
+      for (const [modelId, modelInfo] of Object.entries(account.quota.models)) {
+        if (modelMap.has(modelId)) {
+          continue;
+        }
+
+        modelMap.set(modelId, {
+          id: modelId,
+          object: 'model',
+          displayName: modelInfo.display_name,
+          capabilities: {
+            vision: modelInfo.supports_images ?? false,
+            thinking: modelInfo.supports_thinking ?? false,
+            streaming: true,
+            jsonMode: true,
+            recommended: modelInfo.recommended ?? false,
+          },
+          limits: {
+            maxTokens: modelInfo.max_tokens,
+            maxOutputTokens: modelInfo.max_output_tokens,
+            thinkingBudget: modelInfo.thinking_budget,
+          },
+        });
+      }
+    }
+
+    const data = Array.from(modelMap.values()).sort((a, b) => a.id.localeCompare(b.id));
+
+    return { success: true, data };
+  } catch (error) {
+    logger.error('Failed to get model capabilities', error);
+    return { success: false, error: error instanceof Error ? error.message : String(error) };
+  }
+}
+
+function mapIdeConfigResult(
+  result: IdeConfigResult,
+): {
+  name: string;
+  settingsPath: string;
+  proxySetting: string;
+  apiKeySetting: string;
+  instructions: string;
+} {
+  switch (result.ide) {
+    case 'vscode':
+      return {
+        name: 'VS Code',
+        settingsPath: 'settings.json',
+        proxySetting: 'openai.url',
+        apiKeySetting: 'openai.apiKey',
+        instructions: 'Add these settings to your VS Code settings.json',
+      };
+    case 'cursor':
+      return {
+        name: 'Cursor',
+        settingsPath: 'settings.json',
+        proxySetting: 'OPENAI_BASE_URL',
+        apiKeySetting: 'OPENAI_API_KEY',
+        instructions: 'Set these environment variables for Cursor',
+      };
+    case 'claude-code':
+      return {
+        name: 'Claude Code',
+        settingsPath: 'Shell environment',
+        proxySetting: 'ANTHROPIC_BASE_URL',
+        apiKeySetting: 'ANTHROPIC_API_KEY',
+        instructions: 'Run these export commands before starting Claude Code',
+      };
+    case 'jetbrains':
+      return {
+        name: 'JetBrains',
+        settingsPath: 'IDE Settings',
+        proxySetting: 'Base URL',
+        apiKeySetting: 'API Key',
+        instructions: String(result.content),
+      };
+    case 'opencide':
+      return {
+        name: 'Opencide',
+        settingsPath: '.env',
+        proxySetting: 'OPENAI_BASE_URL',
+        apiKeySetting: 'OPENAI_API_KEY',
+        instructions: 'Add these lines to your .env file',
+      };
+    default: {
+      const exhaustiveCheck: never = result.ide;
+      throw new Error(`Unsupported IDE: ${String(exhaustiveCheck)}`);
+    }
+  }
+}
+
+export async function generateIdeConfig(
+  ide: string,
+): Promise<{
+  success: boolean;
+  data?: {
+    name: string;
+    settingsPath: string;
+    proxySetting: string;
+    apiKeySetting: string;
+    instructions: string;
+  };
+  error?: string;
+}> {
+  try {
+    const proxyIdeConfig = getServiceOrThrow('proxyIdeConfig');
+
+    const supportedIdes = ['cursor', 'vscode', 'claude-code', 'jetbrains', 'opencide'] as const;
+    const normalizedIde = ide.toLowerCase() as typeof supportedIdes[number];
+    if (!supportedIdes.includes(normalizedIde)) {
+      return { success: false, error: `Unsupported IDE: ${ide}` };
+    }
+
+    const result = proxyIdeConfig.generateConfigForCurrentServer(normalizedIde);
+    if (!result) {
+      return { success: false, error: 'Failed to generate IDE config: server not configured' };
+    }
+
+    return {
+      success: true,
+      data: mapIdeConfigResult(result),
+    };
+  } catch (error) {
+    return { success: false, error: normalizeServiceError(error) };
+  }
+}

src/ipc/proxy-advanced/router.ts

@@ -1,223 +1,223 @@
-import { z } from 'zod';
-import { os } from '@orpc/server';
-import {
-  getRecentTrafficLogs,
-  getTrafficLogStats,
-  exportTrafficLogs,
-  getParityCounters,
-  getCircuitBreakerStatus,
-  getProxyMetrics,
-  getRecentRequests,
-  generateIdeConfig,
-  replayRequest,
-  getModelCapabilities,
-} from './handler';
-
-const TrafficLogEntrySchema = z.object({
-  timestamp: z.string(),
-  direction: z.string(),
-  requestId: z.string(),
-  endpoint: z.string(),
-  method: z.string().optional(),
-  status: z.number().optional(),
-  headers: z.record(z.string(), z.unknown()).optional(),
-  body: z.unknown().optional(),
-  chunk: z.unknown().optional(),
-  durationMs: z.number().optional(),
-  error: z
-    .object({
-      message: z.string(),
-      stack: z.string().optional(),
-      status: z.number().optional(),
-      body: z.unknown().optional(),
-    })
-    .optional(),
-  metadata: z.record(z.string(), z.unknown()).optional(),
-});
-
-const TrafficLogsResponseSchema = z.object({
-  success: z.boolean(),
-  data: z.array(TrafficLogEntrySchema).optional(),
-  error: z.string().optional(),
-});
-
-const TrafficLogStatsResponseSchema = z.object({
-  success: z.boolean(),
-  data: z
-    .object({
-      byDirection: z.record(z.string(), z.number()),
-      byEndpoint: z.record(z.string(), z.number()),
-      total: z.number(),
-    })
-    .optional(),
-  error: z.string().optional(),
-});
-
-const ExportTrafficLogsResponseSchema = z.object({
-  success: z.boolean(),
-  data: z.string().optional(),
-  error: z.string().optional(),
-});
-
-const ParityCountersResponseSchema = z.object({
-  success: z.boolean(),
-  data: z
-    .object({
-      totalRequests: z.number(),
-      matchedRequests: z.number(),
-      parityViolations: z.number(),
-      lastUpdated: z.string(),
-    })
-    .optional(),
-  error: z.string().optional(),
-});
-
-const CircuitBreakerStatusResponseSchema = z.object({
-  success: z.boolean(),
-  data: z
-    .object({
-      states: z.record(
-        z.string(),
-        z.object({
-          state: z.string(),
-          failures: z.number(),
-          lastFailure: z.string().nullable(),
-        }),
-      ),
-      globalEnabled: z.boolean(),
-    })
-    .optional(),
-  error: z.string().optional(),
-});
-
-const ProxyMetricsResponseSchema = z.object({
-  success: z.boolean(),
-  data: z
-    .object({
-      uptimeSeconds: z.number(),
-      totalRequests: z.number(),
-      activeConnections: z.number(),
-      avgLatency: z.number(),
-      errorRate: z.number(),
-      requestsPerMinute: z.number(),
-      cacheHitRate: z.number(),
-    })
-    .optional(),
-  error: z.string().optional(),
-});
-
-const RecentRequestsResponseSchema = z.object({
-  success: z.boolean(),
-  data: z.array(z.unknown()).optional(),
-  error: z.string().optional(),
-});
-
-const ReplayRequestResponseSchema = z.object({
-  success: z.boolean(),
-  data: z
-    .object({
-      original: z.unknown(),
-      newResponse: z.unknown(),
-    })
-    .optional(),
-  error: z.string().optional(),
-});
-
-const ModelCapabilitiesResponseSchema = z.object({
-  success: z.boolean(),
-  data: z
-    .array(
-      z.object({
-        id: z.string(),
-        object: z.string(),
-        displayName: z.string().optional(),
-        capabilities: z.object({
-          vision: z.boolean(),
-          thinking: z.boolean(),
-          streaming: z.boolean(),
-          jsonMode: z.boolean(),
-          recommended: z.boolean(),
-        }),
-        limits: z.object({
-          maxTokens: z.number().optional(),
-          maxOutputTokens: z.number().optional(),
-          thinkingBudget: z.number().optional(),
-        }),
-      }),
-    )
-    .optional(),
-  error: z.string().optional(),
-});
-
-const IdeConfigResponseSchema = z.object({
-  success: z.boolean(),
-  data: z
-    .object({
-      name: z.string(),
-      settingsPath: z.string(),
-      proxySetting: z.string(),
-      apiKeySetting: z.string(),
-      instructions: z.string(),
-    })
-    .optional(),
-  error: z.string().optional(),
-});
-
-export const proxyAdvancedRouter = os.router({
-  getRecentTrafficLogs: os
-    .input(
-      z.object({
-        limit: z.number().int().min(1).max(1000).optional(),
-        direction: z.string().optional(),
-      }),
-    )
-    .output(TrafficLogsResponseSchema)
-    .handler(async ({ input }) => {
-      return getRecentTrafficLogs(input.limit, input.direction);
-    }),
-
-  getTrafficLogStats: os.output(TrafficLogStatsResponseSchema).handler(async () => {
-    return getTrafficLogStats();
-  }),
-
-  exportTrafficLogs: os
-    .input(z.object({ format: z.enum(['json', 'csv']) }))
-    .output(ExportTrafficLogsResponseSchema)
-    .handler(async ({ input }) => {
-      return exportTrafficLogs(input.format);
-    }),
-
-  getParityCounters: os.output(ParityCountersResponseSchema).handler(async () => {
-    return getParityCounters();
-  }),
-
-  getCircuitBreakerStatus: os.output(CircuitBreakerStatusResponseSchema).handler(async () => {
-    return getCircuitBreakerStatus();
-  }),
-
-  getProxyMetrics: os.output(ProxyMetricsResponseSchema).handler(async () => {
-    return getProxyMetrics();
-  }),
-
-  getRecentRequests: os.output(RecentRequestsResponseSchema).handler(async () => {
-    return getRecentRequests();
-  }),
-
-  generateIdeConfig: os
-    .input(z.object({ ide: z.string() }))
-    .output(IdeConfigResponseSchema)
-    .handler(async ({ input }) => {
-      return generateIdeConfig(input.ide);
-    }),
-
-  replayRequest: os
-    .input(z.object({ requestId: z.string() }))
-    .output(ReplayRequestResponseSchema)
-    .handler(async ({ input }) => {
-      return replayRequest(input.requestId);
-    }),
-
-  getModelCapabilities: os.output(ModelCapabilitiesResponseSchema).handler(async () => {
-    return getModelCapabilities();
-  }),
-});
+import { z } from 'zod';
+import { os } from '@orpc/server';
+import {
+  getRecentTrafficLogs,
+  getTrafficLogStats,
+  exportTrafficLogs,
+  getParityCounters,
+  getCircuitBreakerStatus,
+  getProxyMetrics,
+  getRecentRequests,
+  generateIdeConfig,
+  replayRequest,
+  getModelCapabilities,
+} from './handler';
+
+const TrafficLogEntrySchema = z.object({
+  timestamp: z.string(),
+  direction: z.string(),
+  requestId: z.string(),
+  endpoint: z.string(),
+  method: z.string().optional(),
+  status: z.number().optional(),
+  headers: z.record(z.string(), z.unknown()).optional(),
+  body: z.unknown().optional(),
+  chunk: z.unknown().optional(),
+  durationMs: z.number().optional(),
+  error: z
+    .object({
+      message: z.string(),
+      stack: z.string().optional(),
+      status: z.number().optional(),
+      body: z.unknown().optional(),
+    })
+    .optional(),
+  metadata: z.record(z.string(), z.unknown()).optional(),
+});
+
+const TrafficLogsResponseSchema = z.object({
+  success: z.boolean(),
+  data: z.array(TrafficLogEntrySchema).optional(),
+  error: z.string().optional(),
+});
+
+const TrafficLogStatsResponseSchema = z.object({
+  success: z.boolean(),
+  data: z
+    .object({
+      byDirection: z.record(z.string(), z.number()),
+      byEndpoint: z.record(z.string(), z.number()),
+      total: z.number(),
+    })
+    .optional(),
+  error: z.string().optional(),
+});
+
+const ExportTrafficLogsResponseSchema = z.object({
+  success: z.boolean(),
+  data: z.string().optional(),
+  error: z.string().optional(),
+});
+
+const ParityCountersResponseSchema = z.object({
+  success: z.boolean(),
+  data: z
+    .object({
+      totalRequests: z.number(),
+      matchedRequests: z.number(),
+      parityViolations: z.number(),
+      lastUpdated: z.string(),
+    })
+    .optional(),
+  error: z.string().optional(),
+});
+
+const CircuitBreakerStatusResponseSchema = z.object({
+  success: z.boolean(),
+  data: z
+    .object({
+      states: z.record(
+        z.string(),
+        z.object({
+          state: z.string(),
+          failures: z.number(),
+          lastFailure: z.string().nullable(),
+        }),
+      ),
+      globalEnabled: z.boolean(),
+    })
+    .optional(),
+  error: z.string().optional(),
+});
+
+const ProxyMetricsResponseSchema = z.object({
+  success: z.boolean(),
+  data: z
+    .object({
+      uptimeSeconds: z.number(),
+      totalRequests: z.number(),
+      activeConnections: z.number(),
+      avgLatency: z.number(),
+      errorRate: z.number(),
+      requestsPerMinute: z.number(),
+      cacheHitRate: z.number(),
+    })
+    .optional(),
+  error: z.string().optional(),
+});
+
+const RecentRequestsResponseSchema = z.object({
+  success: z.boolean(),
+  data: z.array(z.unknown()).optional(),
+  error: z.string().optional(),
+});
+
+const ReplayRequestResponseSchema = z.object({
+  success: z.boolean(),
+  data: z
+    .object({
+      original: z.unknown(),
+      newResponse: z.unknown(),
+    })
+    .optional(),
+  error: z.string().optional(),
+});
+
+const ModelCapabilitiesResponseSchema = z.object({
+  success: z.boolean(),
+  data: z
+    .array(
+      z.object({
+        id: z.string(),
+        object: z.string(),
+        displayName: z.string().optional(),
+        capabilities: z.object({
+          vision: z.boolean(),
+          thinking: z.boolean(),
+          streaming: z.boolean(),
+          jsonMode: z.boolean(),
+          recommended: z.boolean(),
+        }),
+        limits: z.object({
+          maxTokens: z.number().optional(),
+          maxOutputTokens: z.number().optional(),
+          thinkingBudget: z.number().optional(),
+        }),
+      }),
+    )
+    .optional(),
+  error: z.string().optional(),
+});
+
+const IdeConfigResponseSchema = z.object({
+  success: z.boolean(),
+  data: z
+    .object({
+      name: z.string(),
+      settingsPath: z.string(),
+      proxySetting: z.string(),
+      apiKeySetting: z.string(),
+      instructions: z.string(),
+    })
+    .optional(),
+  error: z.string().optional(),
+});
+
+export const proxyAdvancedRouter = os.router({
+  getRecentTrafficLogs: os
+    .input(
+      z.object({
+        limit: z.number().int().min(1).max(1000).optional(),
+        direction: z.string().optional(),
+      }),
+    )
+    .output(TrafficLogsResponseSchema)
+    .handler(async ({ input }) => {
+      return getRecentTrafficLogs(input.limit, input.direction);
+    }),
+
+  getTrafficLogStats: os.output(TrafficLogStatsResponseSchema).handler(async () => {
+    return getTrafficLogStats();
+  }),
+
+  exportTrafficLogs: os
+    .input(z.object({ format: z.enum(['json', 'csv']) }))
+    .output(ExportTrafficLogsResponseSchema)
+    .handler(async ({ input }) => {
+      return exportTrafficLogs(input.format);
+    }),
+
+  getParityCounters: os.output(ParityCountersResponseSchema).handler(async () => {
+    return getParityCounters();
+  }),
+
+  getCircuitBreakerStatus: os.output(CircuitBreakerStatusResponseSchema).handler(async () => {
+    return getCircuitBreakerStatus();
+  }),
+
+  getProxyMetrics: os.output(ProxyMetricsResponseSchema).handler(async () => {
+    return getProxyMetrics();
+  }),
+
+  getRecentRequests: os.output(RecentRequestsResponseSchema).handler(async () => {
+    return getRecentRequests();
+  }),
+
+  generateIdeConfig: os
+    .input(z.object({ ide: z.string() }))
+    .output(IdeConfigResponseSchema)
+    .handler(async ({ input }) => {
+      return generateIdeConfig(input.ide);
+    }),
+
+  replayRequest: os
+    .input(z.object({ requestId: z.string() }))
+    .output(ReplayRequestResponseSchema)
+    .handler(async ({ input }) => {
+      return replayRequest(input.requestId);
+    }),
+
+  getModelCapabilities: os.output(ModelCapabilitiesResponseSchema).handler(async () => {
+    return getModelCapabilities();
+  }),
+});

src/ipc/proxy-advanced/service-registry.ts

@@ -1,39 +1,39 @@
-/**
- * Service registry for proxy-advanced IPC handlers to access
- * NestJS service instances without DI coupling.
- *
- * Services auto-register on construction.
- */
-import type { TokenManagerService } from '../../server/modules/proxy/token-manager.service';
-import type { ProxyMetricsService } from '../../server/modules/proxy/proxy-metrics.service';
-import type { ProxyReplayService } from '../../server/modules/proxy/proxy-replay.service';
-import type { ProxyIdeConfigService } from '../../server/modules/proxy/proxy-ide-config.service';
-
-interface ProxyAdvancedRegistry {
-  tokenManager: TokenManagerService | null;
-  proxyMetrics: ProxyMetricsService | null;
-  proxyReplay: ProxyReplayService | null;
-  proxyIdeConfig: ProxyIdeConfigService | null;
-}
-
-export const proxyAdvancedRegistry: ProxyAdvancedRegistry = {
-  tokenManager: null,
-  proxyMetrics: null,
-  proxyReplay: null,
-  proxyIdeConfig: null,
-};
-
-export function registerProxyAdvancedService<K extends keyof ProxyAdvancedRegistry>(
-  key: K,
-  instance: ProxyAdvancedRegistry[K],
-): void {
-  proxyAdvancedRegistry[key] = instance;
-}
-
-export function getServiceOrThrow<K extends keyof ProxyAdvancedRegistry>(
-  key: K,
-): NonNullable<ProxyAdvancedRegistry[K]> {
-  const svc = proxyAdvancedRegistry[key];
-  if (!svc) throw new Error(`ProxyAdvanced service '${key}' is not registered`);
-  return svc;
-}
+/**
+ * Service registry for proxy-advanced IPC handlers to access
+ * NestJS service instances without DI coupling.
+ *
+ * Services auto-register on construction.
+ */
+import type { TokenManagerService } from '../../server/modules/proxy/token-manager.service';
+import type { ProxyMetricsService } from '../../server/modules/proxy/proxy-metrics.service';
+import type { ProxyReplayService } from '../../server/modules/proxy/proxy-replay.service';
+import type { ProxyIdeConfigService } from '../../server/modules/proxy/proxy-ide-config.service';
+
+interface ProxyAdvancedRegistry {
+  tokenManager: TokenManagerService | null;
+  proxyMetrics: ProxyMetricsService | null;
+  proxyReplay: ProxyReplayService | null;
+  proxyIdeConfig: ProxyIdeConfigService | null;
+}
+
+export const proxyAdvancedRegistry: ProxyAdvancedRegistry = {
+  tokenManager: null,
+  proxyMetrics: null,
+  proxyReplay: null,
+  proxyIdeConfig: null,
+};
+
+export function registerProxyAdvancedService<K extends keyof ProxyAdvancedRegistry>(
+  key: K,
+  instance: ProxyAdvancedRegistry[K],
+): void {
+  proxyAdvancedRegistry[key] = instance;
+}
+
+export function getServiceOrThrow<K extends keyof ProxyAdvancedRegistry>(
+  key: K,
+): NonNullable<ProxyAdvancedRegistry[K]> {
+  const svc = proxyAdvancedRegistry[key];
+  if (!svc) throw new Error(`ProxyAdvanced service '${key}' is not registered`);
+  return svc;
+}

src/ipc/router.ts

@@ -1,61 +1,61 @@
-import { app } from './app';
-import { theme } from './theme';
-import { window } from './window';
-import { databaseRouter } from './database/router';
-import { accountRouter } from './account/router';
-import { cloudRouter } from './cloud/router';
-import { configRouter } from './config/router';
-import { gatewayRouter } from './gateway/router';
-import { usageRouter } from './usage/router';
-import { proxyAdvancedRouter } from './proxy-advanced/router';
-
-import { os } from '@orpc/server';
-import { z } from 'zod';
-import { isProcessRunning, closeGeminiNexus, startGeminiNexus } from './process/handler';
-import { systemHandler } from './system/handler';
-import { logger } from '../utils/logger';
-
-// Log middleware setup
-const logMiddleware = os.middleware(async (opts: any) => {
-  const { next, path, meta } = opts;
-  const requestPath = path || meta?.path || 'unknown';
-
-  try {
-    const result = await next({});
-    return result;
-  } catch (err) {
-    logger.error(`[ORPC] Error in handler for ${JSON.stringify(requestPath)}:`, err);
-    throw err;
-  }
-});
-
-// Explicit Router Definition
-export const router = os.use(logMiddleware).router({
-  ping: os.output(z.string()).handler(async () => 'pong'),
-
-  theme,
-  window,
-  app,
-  database: databaseRouter,
-
-  // Inline process router to ensure structure
-  proc: os.router({
-    isProcessRunning: os.output(z.boolean()).handler(async () => {
-      return await isProcessRunning();
-    }),
-    closeGeminiNexus: os.output(z.void()).handler(async () => {
-      await closeGeminiNexus();
-    }),
-    startGeminiNexus: os.output(z.void()).handler(async () => {
-      await startGeminiNexus();
-    }),
-  }),
-
-  account: accountRouter,
-  cloud: cloudRouter,
-  config: configRouter,
-  gateway: gatewayRouter,
-  usage: usageRouter,
-  proxyAdvanced: proxyAdvancedRouter,
-  system: systemHandler,
-});
+import { app } from './app';
+import { theme } from './theme';
+import { window } from './window';
+import { databaseRouter } from './database/router';
+import { accountRouter } from './account/router';
+import { cloudRouter } from './cloud/router';
+import { configRouter } from './config/router';
+import { gatewayRouter } from './gateway/router';
+import { usageRouter } from './usage/router';
+import { proxyAdvancedRouter } from './proxy-advanced/router';
+
+import { os } from '@orpc/server';
+import { z } from 'zod';
+import { isProcessRunning, closeGeminiNexus, startGeminiNexus } from './process/handler';
+import { systemHandler } from './system/handler';
+import { logger } from '../utils/logger';
+
+// Log middleware setup
+const logMiddleware = os.middleware(async (opts: any) => {
+  const { next, path, meta } = opts;
+  const requestPath = path || meta?.path || 'unknown';
+
+  try {
+    const result = await next({});
+    return result;
+  } catch (err) {
+    logger.error(`[ORPC] Error in handler for ${JSON.stringify(requestPath)}:`, err);
+    throw err;
+  }
+});
+
+// Explicit Router Definition
+export const router = os.use(logMiddleware).router({
+  ping: os.output(z.string()).handler(async () => 'pong'),
+
+  theme,
+  window,
+  app,
+  database: databaseRouter,
+
+  // Inline process router to ensure structure
+  proc: os.router({
+    isProcessRunning: os.output(z.boolean()).handler(async () => {
+      return await isProcessRunning();
+    }),
+    closeGeminiNexus: os.output(z.void()).handler(async () => {
+      await closeGeminiNexus();
+    }),
+    startGeminiNexus: os.output(z.void()).handler(async () => {
+      await startGeminiNexus();
+    }),
+  }),
+
+  account: accountRouter,
+  cloud: cloudRouter,
+  config: configRouter,
+  gateway: gatewayRouter,
+  usage: usageRouter,
+  proxyAdvanced: proxyAdvancedRouter,
+  system: systemHandler,
+});

src/ipc/switchFlow.ts

@@ -1,89 +1,89 @@
-import { type DeviceProfile } from '../types/account';
-import { logger } from '../utils/logger';
-import { closeGeminiNexus, startGeminiNexus, _waitForProcessExit } from './process/handler';
-import { applyDeviceProfile } from './device/handler';
-import {
-  type SwitchFailureReason,
-  recordSwitchFailure,
-  recordSwitchSuccess,
-} from './switchMetrics';
-
-export interface SwitchFlowOptions {
-  scope: 'local' | 'cloud';
-  targetProfile: DeviceProfile | null;
-  applyFingerprint: boolean;
-  processExitTimeoutMs: number;
-  performSwitch: () => Promise<void>;
-}
-
-function getErrorMessage(error: unknown): string {
-  if (error instanceof Error) {
-    return error.message;
-  }
-  return String(error);
-}
-
-function toSwitchFailureReason(stage: string, error: unknown): SwitchFailureReason {
-  if (stage === 'close') {
-    return 'process_close_failed';
-  }
-  if (stage === 'missing_profile') {
-    return 'missing_bound_profile';
-  }
-  if (stage === 'apply') {
-    return 'apply_device_profile_failed';
-  }
-  if (stage === 'switch') {
-    return 'perform_switch_failed';
-  }
-  if (stage === 'start') {
-    return 'start_process_failed';
-  }
-
-  // Keep legacy compatibility with reason encoded in thrown errors.
-  if (error instanceof Error && error.message.includes('missing bound device profile')) {
-    return 'missing_bound_profile';
-  }
-  if (error instanceof Error && error.message.includes('device_apply_failed')) {
-    return 'apply_device_profile_failed';
-  }
-  return 'unknown';
-}
-
-export async function executeSwitchFlow(options: SwitchFlowOptions): Promise<void> {
-  const { scope, targetProfile, applyFingerprint, processExitTimeoutMs, performSwitch } = options;
-
-  let stage = 'close';
-  try {
-    await closeGeminiNexus();
-    try {
-      await _waitForProcessExit(processExitTimeoutMs);
-    } catch (error) {
-      logger.warn('Process did not exit cleanly within timeout, but proceeding...', error);
-    }
-
-    stage = 'apply';
-    if (applyFingerprint) {
-      if (!targetProfile) {
-        stage = 'missing_profile';
-        throw new Error('Account has no bound identity profile');
-      }
-      applyDeviceProfile(targetProfile);
-    } else {
-      logger.warn(
-        'Identity profile apply is disabled by CRACK_IDENTITY_PROFILE_APPLY_ENABLED / CRACK_DEVICE_FINGERPRINT_ENABLED',
-      );
-    }
-
-    stage = 'switch';
-    await performSwitch();
-    stage = 'start';
-    await startGeminiNexus();
-    recordSwitchSuccess(scope);
-  } catch (error) {
-    const reason = toSwitchFailureReason(stage, error);
-    const message = getErrorMessage(error);
-    recordSwitchFailure(scope, reason, message);
-    throw error;
-  }
-}
+import { type DeviceProfile } from '../types/account';
+import { logger } from '../utils/logger';
+import { closeGeminiNexus, startGeminiNexus, _waitForProcessExit } from './process/handler';
+import { applyDeviceProfile } from './device/handler';
+import {
+  type SwitchFailureReason,
+  recordSwitchFailure,
+  recordSwitchSuccess,
+} from './switchMetrics';
+
+export interface SwitchFlowOptions {
+  scope: 'local' | 'cloud';
+  targetProfile: DeviceProfile | null;
+  applyFingerprint: boolean;
+  processExitTimeoutMs: number;
+  performSwitch: () => Promise<void>;
+}
+
+function getErrorMessage(error: unknown): string {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+
+function toSwitchFailureReason(stage: string, error: unknown): SwitchFailureReason {
+  if (stage === 'close') {
+    return 'process_close_failed';
+  }
+  if (stage === 'missing_profile') {
+    return 'missing_bound_profile';
+  }
+  if (stage === 'apply') {
+    return 'apply_device_profile_failed';
+  }
+  if (stage === 'switch') {
+    return 'perform_switch_failed';
+  }
+  if (stage === 'start') {
+    return 'start_process_failed';
+  }
+
+  // Keep legacy compatibility with reason encoded in thrown errors.
+  if (error instanceof Error && error.message.includes('missing bound device profile')) {
+    return 'missing_bound_profile';
+  }
+  if (error instanceof Error && error.message.includes('device_apply_failed')) {
+    return 'apply_device_profile_failed';
+  }
+  return 'unknown';
+}
+
+export async function executeSwitchFlow(options: SwitchFlowOptions): Promise<void> {
+  const { scope, targetProfile, applyFingerprint, processExitTimeoutMs, performSwitch } = options;
+
+  let stage = 'close';
+  try {
+    await closeGeminiNexus();
+    try {
+      await _waitForProcessExit(processExitTimeoutMs);
+    } catch (error) {
+      logger.warn('Process did not exit cleanly within timeout, but proceeding...', error);
+    }
+
+    stage = 'apply';
+    if (applyFingerprint) {
+      if (!targetProfile) {
+        stage = 'missing_profile';
+        throw new Error('Account has no bound identity profile');
+      }
+      applyDeviceProfile(targetProfile);
+    } else {
+      logger.warn(
+        'Identity profile apply is disabled by CRACK_IDENTITY_PROFILE_APPLY_ENABLED / CRACK_DEVICE_FINGERPRINT_ENABLED',
+      );
+    }
+
+    stage = 'switch';
+    await performSwitch();
+    stage = 'start';
+    await startGeminiNexus();
+    recordSwitchSuccess(scope);
+  } catch (error) {
+    const reason = toSwitchFailureReason(stage, error);
+    const message = getErrorMessage(error);
+    recordSwitchFailure(scope, reason, message);
+    throw error;
+  }
+}

src/ipc/switchGuard.ts

@@ -1,80 +1,80 @@
-import { logger } from '../utils/logger';
-
-type SwitchOwner = 'local-account-switch' | 'cloud-account-switch';
-
-interface SwitchTask {
-  owner: SwitchOwner;
-  action: () => Promise<unknown>;
-  resolve: (value: unknown) => void;
-  reject: (reason?: unknown) => void;
-}
-
-let activeSwitchOwner: SwitchOwner | null = null;
-const pendingQueue: SwitchTask[] = [];
-let processing = false;
-
-function processQueue(): void {
-  if (processing) {
-    return;
-  }
-
-  const nextTask = pendingQueue.shift();
-  if (!nextTask) {
-    return;
-  }
-
-  processing = true;
-  activeSwitchOwner = nextTask.owner;
-  logger.info(`Acquired switch guard: ${nextTask.owner}`);
-
-  Promise.resolve()
-    .then(nextTask.action)
-    .then((result) => {
-      nextTask.resolve(result);
-    })
-    .catch((error) => {
-      nextTask.reject(error);
-    })
-    .finally(() => {
-      logger.info(`Released switch guard: ${nextTask.owner}`);
-      activeSwitchOwner = null;
-      processing = false;
-      processQueue();
-    });
-}
-
-export async function runWithSwitchGuard<T>(
-  owner: SwitchOwner,
-  action: () => Promise<T>,
-): Promise<T> {
-  return await new Promise<T>((resolve, reject) => {
-    pendingQueue.push({
-      owner,
-      action: async () => await action(),
-      resolve: (value) => {
-        resolve(value as T);
-      },
-      reject,
-    });
-    logger.info(
-      `Queued switch request: ${owner} (active=${activeSwitchOwner || 'none'}, pending=${pendingQueue.length})`,
-    );
-    processQueue();
-  });
-}
-
-export function getActiveSwitchOwner(): SwitchOwner | null {
-  return activeSwitchOwner;
-}
-
-export function getSwitchGuardSnapshot(): {
-  activeOwner: SwitchOwner | null;
-  pendingOwners: SwitchOwner[];
-  pendingCount: number;
-} {
-  return {
-    activeOwner: activeSwitchOwner,
-    pendingOwners: pendingQueue.map((item) => item.owner),
-    pendingCount: pendingQueue.length,
-  };
-}
+import { logger } from '../utils/logger';
+
+type SwitchOwner = 'local-account-switch' | 'cloud-account-switch';
+
+interface SwitchTask {
+  owner: SwitchOwner;
+  action: () => Promise<unknown>;
+  resolve: (value: unknown) => void;
+  reject: (reason?: unknown) => void;
+}
+
+let activeSwitchOwner: SwitchOwner | null = null;
+const pendingQueue: SwitchTask[] = [];
+let processing = false;
+
+function processQueue(): void {
+  if (processing) {
+    return;
+  }
+
+  const nextTask = pendingQueue.shift();
+  if (!nextTask) {
+    return;
+  }
+
+  processing = true;
+  activeSwitchOwner = nextTask.owner;
+  logger.info(`Acquired switch guard: ${nextTask.owner}`);
+
+  Promise.resolve()
+    .then(nextTask.action)
+    .then((result) => {
+      nextTask.resolve(result);
+    })
+    .catch((error) => {
+      nextTask.reject(error);
+    })
+    .finally(() => {
+      logger.info(`Released switch guard: ${nextTask.owner}`);
+      activeSwitchOwner = null;
+      processing = false;
+      processQueue();
+    });
+}
+
+export async function runWithSwitchGuard<T>(
+  owner: SwitchOwner,
+  action: () => Promise<T>,
+): Promise<T> {
+  return await new Promise<T>((resolve, reject) => {
+    pendingQueue.push({
+      owner,
+      action: async () => await action(),
+      resolve: (value) => {
+        resolve(value as T);
+      },
+      reject,
+    });
+    logger.info(
+      `Queued switch request: ${owner} (active=${activeSwitchOwner || 'none'}, pending=${pendingQueue.length})`,
+    );
+    processQueue();
+  });
+}
+
+export function getActiveSwitchOwner(): SwitchOwner | null {
+  return activeSwitchOwner;
+}
+
+export function getSwitchGuardSnapshot(): {
+  activeOwner: SwitchOwner | null;
+  pendingOwners: SwitchOwner[];
+  pendingCount: number;
+} {
+  return {
+    activeOwner: activeSwitchOwner,
+    pendingOwners: pendingQueue.map((item) => item.owner),
+    pendingCount: pendingQueue.length,
+  };
+}

src/ipc/switchMetrics.ts

@@ -1,113 +1,113 @@
-import { logger } from '../utils/logger';
-
-type SwitchScope = 'local' | 'cloud';
-
-export type SwitchFailureReason =
-  | 'unknown'
-  | 'process_close_failed'
-  | 'missing_bound_profile'
-  | 'apply_device_profile_failed'
-  | 'perform_switch_failed'
-  | 'start_process_failed';
-
-interface SwitchFailureMetadata {
-  reason: SwitchFailureReason;
-  message: string;
-  occurredAt: number;
-}
-
-interface SwitchMetricBucket {
-  switchSuccess: number;
-  switchFailure: number;
-  rollbackAttempt: number;
-  rollbackSuccess: number;
-  rollbackFailure: number;
-  failureReasons: Record<SwitchFailureReason, number>;
-  lastFailure: SwitchFailureMetadata | null;
-}
-
-type SwitchMetricMap = Record<SwitchScope, SwitchMetricBucket>;
-
-const metrics: SwitchMetricMap = {
-  local: {
-    switchSuccess: 0,
-    switchFailure: 0,
-    rollbackAttempt: 0,
-    rollbackSuccess: 0,
-    rollbackFailure: 0,
-    failureReasons: {
-      unknown: 0,
-      process_close_failed: 0,
-      missing_bound_profile: 0,
-      apply_device_profile_failed: 0,
-      perform_switch_failed: 0,
-      start_process_failed: 0,
-    },
-    lastFailure: null,
-  },
-  cloud: {
-    switchSuccess: 0,
-    switchFailure: 0,
-    rollbackAttempt: 0,
-    rollbackSuccess: 0,
-    rollbackFailure: 0,
-    failureReasons: {
-      unknown: 0,
-      process_close_failed: 0,
-      missing_bound_profile: 0,
-      apply_device_profile_failed: 0,
-      perform_switch_failed: 0,
-      start_process_failed: 0,
-    },
-    lastFailure: null,
-  },
-};
-
-function logSnapshot(scope: SwitchScope, reason: string): void {
-  logger.info(`[switch-metrics] ${scope} ${reason}`, metrics[scope]);
-}
-
-export function recordSwitchSuccess(scope: SwitchScope): void {
-  metrics[scope].switchSuccess += 1;
-  logSnapshot(scope, 'switch_success');
-}
-
-export function recordSwitchFailure(
-  scope: SwitchScope,
-  reason: SwitchFailureReason = 'unknown',
-  message: string = '',
-): void {
-  metrics[scope].switchFailure += 1;
-  metrics[scope].failureReasons[reason] += 1;
-  metrics[scope].lastFailure = {
-    reason,
-    message,
-    occurredAt: Date.now(),
-  };
-  logSnapshot(scope, 'switch_failure');
-}
-
-export function recordSwitchRollback(scope: SwitchScope, success: boolean): void {
-  metrics[scope].rollbackAttempt += 1;
-  if (success) {
-    metrics[scope].rollbackSuccess += 1;
-  } else {
-    metrics[scope].rollbackFailure += 1;
-  }
-  logSnapshot(scope, success ? 'rollback_success' : 'rollback_failure');
-}
-
-export function getSwitchMetricsSnapshot(): SwitchMetricMap {
-  return {
-    local: {
-      ...metrics.local,
-      failureReasons: { ...metrics.local.failureReasons },
-      lastFailure: metrics.local.lastFailure ? { ...metrics.local.lastFailure } : null,
-    },
-    cloud: {
-      ...metrics.cloud,
-      failureReasons: { ...metrics.cloud.failureReasons },
-      lastFailure: metrics.cloud.lastFailure ? { ...metrics.cloud.lastFailure } : null,
-    },
-  };
-}
+import { logger } from '../utils/logger';
+
+type SwitchScope = 'local' | 'cloud';
+
+export type SwitchFailureReason =
+  | 'unknown'
+  | 'process_close_failed'
+  | 'missing_bound_profile'
+  | 'apply_device_profile_failed'
+  | 'perform_switch_failed'
+  | 'start_process_failed';
+
+interface SwitchFailureMetadata {
+  reason: SwitchFailureReason;
+  message: string;
+  occurredAt: number;
+}
+
+interface SwitchMetricBucket {
+  switchSuccess: number;
+  switchFailure: number;
+  rollbackAttempt: number;
+  rollbackSuccess: number;
+  rollbackFailure: number;
+  failureReasons: Record<SwitchFailureReason, number>;
+  lastFailure: SwitchFailureMetadata | null;
+}
+
+type SwitchMetricMap = Record<SwitchScope, SwitchMetricBucket>;
+
+const metrics: SwitchMetricMap = {
+  local: {
+    switchSuccess: 0,
+    switchFailure: 0,
+    rollbackAttempt: 0,
+    rollbackSuccess: 0,
+    rollbackFailure: 0,
+    failureReasons: {
+      unknown: 0,
+      process_close_failed: 0,
+      missing_bound_profile: 0,
+      apply_device_profile_failed: 0,
+      perform_switch_failed: 0,
+      start_process_failed: 0,
+    },
+    lastFailure: null,
+  },
+  cloud: {
+    switchSuccess: 0,
+    switchFailure: 0,
+    rollbackAttempt: 0,
+    rollbackSuccess: 0,
+    rollbackFailure: 0,
+    failureReasons: {
+      unknown: 0,
+      process_close_failed: 0,
+      missing_bound_profile: 0,
+      apply_device_profile_failed: 0,
+      perform_switch_failed: 0,
+      start_process_failed: 0,
+    },
+    lastFailure: null,
+  },
+};
+
+function logSnapshot(scope: SwitchScope, reason: string): void {
+  logger.info(`[switch-metrics] ${scope} ${reason}`, metrics[scope]);
+}
+
+export function recordSwitchSuccess(scope: SwitchScope): void {
+  metrics[scope].switchSuccess += 1;
+  logSnapshot(scope, 'switch_success');
+}
+
+export function recordSwitchFailure(
+  scope: SwitchScope,
+  reason: SwitchFailureReason = 'unknown',
+  message: string = '',
+): void {
+  metrics[scope].switchFailure += 1;
+  metrics[scope].failureReasons[reason] += 1;
+  metrics[scope].lastFailure = {
+    reason,
+    message,
+    occurredAt: Date.now(),
+  };
+  logSnapshot(scope, 'switch_failure');
+}
+
+export function recordSwitchRollback(scope: SwitchScope, success: boolean): void {
+  metrics[scope].rollbackAttempt += 1;
+  if (success) {
+    metrics[scope].rollbackSuccess += 1;
+  } else {
+    metrics[scope].rollbackFailure += 1;
+  }
+  logSnapshot(scope, success ? 'rollback_success' : 'rollback_failure');
+}
+
+export function getSwitchMetricsSnapshot(): SwitchMetricMap {
+  return {
+    local: {
+      ...metrics.local,
+      failureReasons: { ...metrics.local.failureReasons },
+      lastFailure: metrics.local.lastFailure ? { ...metrics.local.lastFailure } : null,
+    },
+    cloud: {
+      ...metrics.cloud,
+      failureReasons: { ...metrics.cloud.failureReasons },
+      lastFailure: metrics.cloud.lastFailure ? { ...metrics.cloud.lastFailure } : null,
+    },
+  };
+}

src/ipc/system/handler.ts

@@ -1,72 +1,72 @@
-import { os } from '@orpc/server';
-import { z } from 'zod';
-import { networkInterfaces } from 'os';
-import { shell } from 'electron';
-import { getAgentDir } from '../../utils/paths';
-
-// Schema for IP info
-const IpInfoSchema = z.object({
-  address: z.string(),
-  name: z.string(),
-  isRecommended: z.boolean(),
-});
-
-export const systemHandler = os.router({
-  // Get all available local IPs with their adapter names
-  get_local_ips: os.output(z.array(IpInfoSchema)).handler(async () => {
-    const nets = networkInterfaces();
-    const results: { address: string; name: string; isRecommended: boolean }[] = [];
-
-    for (const name of Object.keys(nets)) {
-      for (const net of nets[name] || []) {
-        const family = net.family;
-        const isIPv4 = family === 'IPv4';
-
-        if (!isIPv4 || net.internal) {
-          continue;
-        }
-
-        const addr = net.address;
-
-        // Skip non-LAN addresses
-        if (addr.startsWith('169.254.')) continue; // APIPA
-        if (addr.startsWith('198.18.')) continue; // CGNAT / VPN
-
-        // Determine if this is a recommended (likely real LAN) address
-        let isRecommended = false;
-        const lowerName = name.toLowerCase();
-
-        if (addr.startsWith('192.168.') || addr.startsWith('10.')) {
-          if (
-            lowerName.includes('wlan') ||
-            lowerName.includes('wi-fi') ||
-            lowerName.includes('wireless') ||
-            lowerName === '以太网' ||
-            lowerName === 'ethernet' ||
-            lowerName.match(/^eth\d/)
-          ) {
-            isRecommended = true;
-          }
-        }
-
-        results.push({ address: addr, name, isRecommended });
-      }
-    }
-
-    // Sort: recommended first, then by address
-    results.sort((a, b) => {
-      if (a.isRecommended !== b.isRecommended) {
-        return b.isRecommended ? 1 : -1;
-      }
-      return a.address.localeCompare(b.address);
-    });
-
-    return results;
-  }),
-
-  // Open log directory in file explorer
-  openLogDirectory: os.output(z.void()).handler(async () => {
-    const logDir = getAgentDir();
-    await shell.openPath(logDir);
-  }),
-});
+import { os } from '@orpc/server';
+import { z } from 'zod';
+import { networkInterfaces } from 'os';
+import { shell } from 'electron';
+import { getAgentDir } from '../../utils/paths';
+
+// Schema for IP info
+const IpInfoSchema = z.object({
+  address: z.string(),
+  name: z.string(),
+  isRecommended: z.boolean(),
+});
+
+export const systemHandler = os.router({
+  // Get all available local IPs with their adapter names
+  get_local_ips: os.output(z.array(IpInfoSchema)).handler(async () => {
+    const nets = networkInterfaces();
+    const results: { address: string; name: string; isRecommended: boolean }[] = [];
+
+    for (const name of Object.keys(nets)) {
+      for (const net of nets[name] || []) {
+        const family = net.family;
+        const isIPv4 = family === 'IPv4';
+
+        if (!isIPv4 || net.internal) {
+          continue;
+        }
+
+        const addr = net.address;
+
+        // Skip non-LAN addresses
+        if (addr.startsWith('169.254.')) continue; // APIPA
+        if (addr.startsWith('198.18.')) continue; // CGNAT / VPN
+
+        // Determine if this is a recommended (likely real LAN) address
+        let isRecommended = false;
+        const lowerName = name.toLowerCase();
+
+        if (addr.startsWith('192.168.') || addr.startsWith('10.')) {
+          if (
+            lowerName.includes('wlan') ||
+            lowerName.includes('wi-fi') ||
+            lowerName.includes('wireless') ||
+            lowerName === '以太网' ||
+            lowerName === 'ethernet' ||
+            lowerName.match(/^eth\d/)
+          ) {
+            isRecommended = true;
+          }
+        }
+
+        results.push({ address: addr, name, isRecommended });
+      }
+    }
+
+    // Sort: recommended first, then by address
+    results.sort((a, b) => {
+      if (a.isRecommended !== b.isRecommended) {
+        return b.isRecommended ? 1 : -1;
+      }
+      return a.address.localeCompare(b.address);
+    });
+
+    return results;
+  }),
+
+  // Open log directory in file explorer
+  openLogDirectory: os.output(z.void()).handler(async () => {
+    const logDir = getAgentDir();
+    await shell.openPath(logDir);
+  }),
+});

src/ipc/theme/handlers.ts

@@ -1,33 +1,33 @@
-import { os } from '@orpc/server';
-import { nativeTheme } from 'electron';
-import { setThemeModeInputSchema } from './schemas';
-
-export const getCurrentThemeMode = os.handler(() => {
-  return nativeTheme.themeSource;
-});
-
-export const toggleThemeMode = os.handler(() => {
-  if (nativeTheme.shouldUseDarkColors) {
-    nativeTheme.themeSource = 'light';
-  } else {
-    nativeTheme.themeSource = 'dark';
-  }
-
-  return nativeTheme.shouldUseDarkColors;
-});
-
-export const setThemeMode = os.input(setThemeModeInputSchema).handler(({ input: mode }) => {
-  switch (mode) {
-    case 'light':
-      nativeTheme.themeSource = 'light';
-      break;
-    case 'dark':
-      nativeTheme.themeSource = 'dark';
-      break;
-    case 'system':
-      nativeTheme.themeSource = 'system';
-      break;
-  }
-
-  return nativeTheme.themeSource;
-});
+import { os } from '@orpc/server';
+import { nativeTheme } from 'electron';
+import { setThemeModeInputSchema } from './schemas';
+
+export const getCurrentThemeMode = os.handler(() => {
+  return nativeTheme.themeSource;
+});
+
+export const toggleThemeMode = os.handler(() => {
+  if (nativeTheme.shouldUseDarkColors) {
+    nativeTheme.themeSource = 'light';
+  } else {
+    nativeTheme.themeSource = 'dark';
+  }
+
+  return nativeTheme.shouldUseDarkColors;
+});
+
+export const setThemeMode = os.input(setThemeModeInputSchema).handler(({ input: mode }) => {
+  switch (mode) {
+    case 'light':
+      nativeTheme.themeSource = 'light';
+      break;
+    case 'dark':
+      nativeTheme.themeSource = 'dark';
+      break;
+    case 'system':
+      nativeTheme.themeSource = 'system';
+      break;
+  }
+
+  return nativeTheme.themeSource;
+});

src/ipc/theme/index.ts

@@ -1,8 +1,8 @@
-import { getCurrentThemeMode, setThemeMode, toggleThemeMode } from './handlers';
-import { os } from '@orpc/server';
-
-export const theme = os.router({
-  getCurrentThemeMode,
-  setThemeMode,
-  toggleThemeMode,
-});
+import { getCurrentThemeMode, setThemeMode, toggleThemeMode } from './handlers';
+import { os } from '@orpc/server';
+
+export const theme = os.router({
+  getCurrentThemeMode,
+  setThemeMode,
+  toggleThemeMode,
+});

src/ipc/theme/schemas.ts

@@ -1,3 +1,3 @@
-import { z } from 'zod';
-
-export const setThemeModeInputSchema = z.enum(['light', 'dark', 'system']);
+import { z } from 'zod';
+
+export const setThemeModeInputSchema = z.enum(['light', 'dark', 'system']);