fix: token tracking pipeline + premium usage dashboard redesign

Backend fixes:
- Fix totalTokens defaulting to 0 when API omits totalTokenCount (now computes prompt+completion)
- Fix streaming metadata extraction: unwrap response wrapper in Anthropic/Gemini handlers
- Fix Zod schemas: handle SQL SUM(null) with nullable().transform()
- Add is_estimated column migration to token_usage table

Frontend redesign:
- Rewrite Usage page with area charts (nivo/line), horizontal bar model ranking
- StatCard: add trend indicators (% vs previous period) and inline SVG sparklines
- Premium color palette, prompt/completion ratio bar, top models mini-list
- Live indicator with 15s auto-refresh

Design system migration:
- Standardize all components on Gemini Nexus tokens (rounded-xl, border-white/[0.06])
- Refine UI components, proxy tabs, cloud account list, provider groups

eslint.config.mjs

@@ -31,7 +31,7 @@ export default defineConfig([
       'unused-imports': unusedImports,
     },
     rules: {
-      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/no-empty-object-type': 'off',
       '@typescript-eslint/ban-ts-comment': 'off',

fix-ts.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 const fs = require('fs');
 const path = require('path');
 

forge.config.ts

@@ -1,3 +1,4 @@
+import { execSync } from 'child_process';
 import crypto from 'crypto';
 import { FuseV1Options, FuseVersion } from '@electron/fuses';
 import type {
@@ -17,16 +18,26 @@ import { FusesPlugin } from '@electron-forge/plugin-fuses';
 import { VitePlugin } from '@electron-forge/plugin-vite';
 import type { ForgeConfig } from '@electron-forge/shared-types';
 import MakerAppImage from '@pengx17/electron-forge-maker-appimage';
+// @ts-ignore
 import setLanguages from 'electron-packager-languages';
 import * as fs from 'fs';
 import * as path from 'path';
 import { stringify as yamlStringify } from 'yaml';
 
 const nativeModules = ['better-sqlite3', 'keytar', 'bindings', 'file-uri-to-path'];
-const ResolvedMakerAppImage = MakerAppImage;
+const ResolvedMakerAppImage: any = (MakerAppImage as any).default || MakerAppImage;
 const keepLanguages = new Set(['en', 'en-US', 'zh-CN', 'ru']);
 const windowsExecutableName = 'gemini-nexus';
 
+function isWixAvailable(): boolean {
+  try {
+    execSync('candle -?', { stdio: 'ignore' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 const isStartCommand = process.argv.some((arg) => arg.includes('start'));
 
 const artifactRegex = /.*\.(?:exe|dmg|AppImage|zip|deb|rpm|msi)$/;
@@ -176,25 +187,8 @@ function getChecksumArchLabel(platform: string, arch: string) {
 }
 
 const appImageMaker = new ResolvedMakerAppImage({
-  config: {
+  options: {
-    icons: [
+    icon: 'images/128x128.png',
-      {
-        file: 'images/32x32.png',
-        size: 32,
-      },
-      {
-        file: 'images/64x64.png',
-        size: 64,
-      },
-      {
-        file: 'images/128x128.png',
-        size: 128,
-      },
-      {
-        file: 'images/[email protected]',
-        size: 256,
-      },
-    ],
   },
 });
 appImageMaker.name = '@pengx17/electron-forge-maker-appimage';
@@ -451,7 +445,7 @@ const config: ForgeConfig = {
       setupIcon: 'images/icon.ico',
       iconUrl: 'https://raw.githubusercontent.com/evandrodevbr/GeminiNexus/main/images/icon.ico',
     }),
-    ...(process.platform === 'win32' && process.arch === 'x64'
+    ...(process.platform === 'win32' && process.arch === 'x64' && isWixAvailable()
       ? [
           new MakerWix({
             language: 1033,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gemini-nexus",
   "productName": "Gemini Nexus",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "Gemini Nexus - Electron App",
   "main": ".vite/build/main.js",
   "private": true,
@@ -12,6 +12,8 @@
     "make": "electron-forge make",
     "make:win": "node scripts/build-windows.js",
     "publish": "electron-forge publish",
+    "setup": "node scripts/setup-dev.js",
+    "postinstall": "node scripts/setup-dev.js --check-only",
     "lint": "eslint .",
     "format": "prettier --check .",
     "format:write": "prettier --write .",
@@ -25,12 +27,12 @@
   "author": "evandrodevbr",
   "license": "CC-BY-NC-SA-4.0",
   "devDependencies": {
-    "@electron-forge/cli": "^7.11.1",
+    "@electron-forge/cli": "^7.6.1",
     "@electron-forge/maker-deb": "^7.11.1",
     "@electron-forge/maker-dmg": "^7.11.1",
     "@electron-forge/maker-rpm": "^7.11.1",
     "@electron-forge/maker-squirrel": "^7.11.1",
-    "@electron-forge/maker-wix": "^7.11.1",
+    "@electron-forge/maker-wix": "^7.9.0",
     "@electron-forge/maker-zip": "^7.11.1",
     "@electron-forge/plugin-auto-unpack-natives": "^7.11.1",
     "@electron-forge/plugin-fuses": "^7.11.1",
@@ -41,7 +43,7 @@
     "@electron/rebuild": "^3.7.1",
     "@eslint/compat": "^1.4.1",
     "@eslint/js": "^9.39.0",
-    "@pengx17/electron-forge-maker-appimage": "^1.2.1",
+    "@pengx17/electron-forge-maker-appimage": "^1.0.2",
     "@playwright/test": "^1.56.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
@@ -65,7 +67,7 @@
     "code-inspector-plugin": "^1.3.3",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "cross-env": "^10.1.0",
-    "electron": "^39.8.5",
+    "electron": "^41.3.0",
     "electron-devtools-installer": "^4.0.0",
     "electron-packager-languages": "^0.6.0",
     "electron-playwright-helpers": "^1.8.2",
@@ -79,6 +81,7 @@
     "happy-dom": "^20.8.9",
     "icon-gen": "^5.0.0",
     "jsdom": "^27.1.0",
+    "node-abi": "^4.28.0",
     "node-addon-api": "^8.3.1",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.7.1",
@@ -90,21 +93,21 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.3",
     "unplugin-swc": "^1.5.9",
-    "vite": "^6.4.2",
+    "vite": "^8.0.10",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.8"
   },
   "dependencies": {
-    "@grpc/grpc-js": "^1.14.3",
-    "@grpc/proto-loader": "^0.8.0",
     "@icons-pack/react-simple-icons": "^13.8.0",
     "@nestjs/common": "^11.1.18",
     "@nestjs/core": "^11.1.18",
     "@nestjs/microservices": "^11.1.18",
     "@nestjs/platform-express": "^11.1.18",
-    "@nestjs/platform-fastify": "^11.1.18",
+    "@nestjs/platform-fastify": "^11.0.20",
+    "@nestjs/websockets": "^11.1.19",
     "@nivo/bar": "^0.99.0",
     "@nivo/core": "^0.99.0",
+    "@nivo/line": "^0.99.0",
     "@nivo/pie": "^0.99.0",
     "@orpc/client": "^1.13.14",
     "@orpc/server": "^1.13.14",
@@ -170,6 +173,7 @@
   ],
   "pnpm": {
     "overrides": {
+      "node-abi": "^4.28.0",
       "fastify": "^5.8.5",
       "tar": "^7.5.13",
       "@octokit/request-error": "^5.1.1",

patch-proxy.js

@@ -0,0 +1,8 @@
+const fs = require('fs');
+let file = fs.readFileSync('src/routes/proxy.tsx', 'utf8');
+
+// The Proxy layout also uses heavy cards
+file = file.replace(/<Card>/g, '<Card className="bg-background border border-white/5 shadow-none">');
+
+fs.writeFileSync('src/routes/proxy.tsx', file);
+

patch-settings.js

@@ -0,0 +1,11 @@
+const fs = require('fs');
+let file = fs.readFileSync('src/routes/settings.tsx', 'utf8');
+
+// The settings page uses standard cards that look bulky in minimal dark mode
+file = file.replace(/<div className="flex flex-col gap-6">/g, '<div className="flex flex-col gap-2">');
+file = file.replace(/<Card>/g, '<Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">');
+file = file.replace(/<CardHeader>/g, '<CardHeader className="px-0 pt-4">');
+file = file.replace(/<CardContent>/g, '<CardContent className="px-0">');
+
+fs.writeFileSync('src/routes/settings.tsx', file);
+

rename-deep.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 const fs = require('fs');
 const path = require('path');
 

scripts/build-windows.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 const { execSync, spawn } = require('child_process');
 const fs = require('fs');
 const path = require('path');

scripts/setup-dev.js

@@ -0,0 +1,619 @@
+/**
+ * Cross-platform development environment setup for Gemini Nexus.
+ *
+ * Detects and installs native build toolchains required by better-sqlite3,
+ * keytar, and other native Node.js modules used in this Electron project.
+ *
+ * Platforms:
+ *   - Windows  → Visual Studio 2022 Build Tools (C++ workload)
+ *   - macOS    → Xcode Command Line Tools
+ *   - Ubuntu   → build-essential, python3, libsecret-1-dev
+ *   - Manjaro/Arch → base-devel, python, libsecret
+ *
+ * Usage:
+ *   node scripts/setup-dev.js        # auto-detect and install/guide
+ *   node scripts/setup-dev.js --check-only   # only verify, don't install
+ */
+
+'use strict';
+
+const { execSync, spawnSync } = require('child_process');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+// ─── Terminal Color Helpers ─────────────────────────────────────────────────
+
+const RESET = '\x1b[0m';
+const BOLD = '\x1b[1m';
+const DIM = '\x1b[2m';
+const RED = '\x1b[31m';
+const GREEN = '\x1b[32m';
+const YELLOW = '\x1b[33m';
+const CYAN = '\x1b[36m';
+const MAGENTA = '\x1b[35m';
+
+// Disable colors if NO_COLOR is set or output is piped
+const useColor = process.env.NO_COLOR === undefined && process.stdout.isTTY;
+
+function color(code, text) {
+  return useColor ? `${code}${text}${RESET}` : text;
+}
+
+function header(text) {
+  console.log(`\n${color(BOLD + MAGENTA, '══')} ${color(BOLD, text)} ${color(BOLD + MAGENTA, '══')}`);
+}
+
+function success(text) {
+  console.log(`  ${color(GREEN, '✓')} ${text}`);
+}
+
+function warn(text) {
+  console.log(`  ${color(YELLOW, '⚠')} ${text}`);
+}
+
+function error(text) {
+  console.log(`  ${color(RED, '✗')} ${text}`);
+}
+
+function info(text) {
+  console.log(`  ${color(CYAN, '→')} ${text}`);
+}
+
+function dim(text) {
+  console.log(`    ${color(DIM, text)}`);
+}
+
+function section(title) {
+  console.log(`\n  ${color(BOLD, title)}:`);
+}
+
+// ─── Platform Detection ─────────────────────────────────────────────────────
+
+const platform = os.platform(); // 'win32' | 'darwin' | 'linux'
+const arch = os.arch();
+
+/** Detect Linux distribution from os-release */
+function detectLinuxDistro() {
+  try {
+    const osRelease = fs.readFileSync('/etc/os-release', 'utf8');
+    const idMatch = osRelease.match(/^ID="?([^"\n]+)"?/m);
+    const idLikeMatch = osRelease.match(/^ID_LIKE="?([^"\n]+)"?/m);
+
+    const id = idMatch ? idMatch[1].toLowerCase() : '';
+    const idLike = idLikeMatch ? idLikeMatch[1].toLowerCase() : '';
+
+    if (id === 'ubuntu' || id === 'debian' || idLike.includes('debian')) {
+      return 'debian';
+    }
+    if (id === 'arch' || id === 'manjaro' || idLike.includes('arch')) {
+      return 'arch';
+    }
+    if (id === 'fedora' || idLike.includes('fedora') || idLike.includes('rhel')) {
+      return 'fedora';
+    }
+    return id || 'unknown';
+  } catch {
+    return 'unknown';
+  }
+}
+
+// ─── Tool Checkers ──────────────────────────────────────────────────────────
+
+/** Check if a command exists on PATH */
+function commandExists(cmd) {
+  try {
+    const whereCmd = platform === 'win32' ? 'where' : 'which';
+    execSync(`${whereCmd} "${cmd}"`, { stdio: 'ignore' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/** Check if running with administrator/sudo privileges */
+function hasAdminPrivileges() {
+  if (platform === 'win32') {
+    try {
+      // On Windows, check via net session (requires admin)
+      execSync('net session', { stdio: 'ignore' });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+  // On Unix, check if UID is 0
+  return process.getuid ? process.getuid() === 0 : false;
+}
+
+/** Check Windows: Visual Studio Build Tools */
+function checkWindows() {
+  const results = { ok: true, missing: [] };
+
+  // Check for cl.exe (C++ compiler from VS Build Tools)
+  if (commandExists('cl.exe')) {
+    success('MSVC Compiler (cl.exe) found');
+  } else {
+    // Try to find VS installation via vswhere or registry
+    let vsFound = false;
+
+    // vswhere.exe (shipped with VS 2017+)
+    const vswherePaths = [
+      'C:\\Program Files (x86)\\Microsoft Visual Studio\\Installer\\vswhere.exe',
+      'C:\\Program Files\\Microsoft Visual Studio\\Installer\\vswhere.exe',
+    ];
+
+    for (const vswhere of vswherePaths) {
+      try {
+        const output = execSync(`"${vswhere}" -latest -requires Microsoft.VisualStudio.Component.VC.Tools.x86.x64 -property installationPath`, {
+          stdio: ['ignore', 'pipe', 'ignore'],
+          encoding: 'utf8',
+        }).trim();
+
+        if (output) {
+          vsFound = true;
+          success(`Visual Studio found at: ${output}`);
+          break;
+        }
+      } catch {
+        // vswhere not found, continue
+      }
+    }
+
+    // Check registry fallback
+    if (!vsFound) {
+      try {
+        execSync(
+          'reg query "HKLM\\SOFTWARE\\Microsoft\\VisualStudio\\SxS\\VS7" /v 17.0',
+          { stdio: 'ignore' },
+        );
+        vsFound = true;
+        success('Visual Studio 2022 found (registry)');
+      } catch {
+        // Not found in registry either
+      }
+    }
+
+    if (!vsFound) {
+      error('MSVC Build Tools not found');
+      results.ok = false;
+      results.missing.push('msvc');
+    }
+  }
+
+  // Check Python (needed by node-gyp)
+  if (commandExists('python') || commandExists('python3')) {
+    success('Python found');
+  } else {
+    error('Python not found (required by node-gyp)');
+    results.ok = false;
+    results.missing.push('python');
+  }
+
+  return results;
+}
+
+/** Check macOS: Xcode Command Line Tools */
+function checkMacOS() {
+  const results = { ok: true, missing: [] };
+
+  try {
+    const xcodePath = execSync('xcode-select -p', { stdio: ['ignore', 'pipe', 'ignore'], encoding: 'utf8' }).trim();
+    if (xcodePath) {
+      success(`Xcode CLT found at: ${xcodePath}`);
+    }
+  } catch {
+    error('Xcode Command Line Tools not found');
+    results.ok = false;
+    results.missing.push('xcode-clt');
+  }
+
+  if (commandExists('make') || commandExists('gmake')) {
+    success('make found');
+  } else {
+    error('make not found');
+    results.ok = false;
+    results.missing.push('make');
+  }
+
+  return results;
+}
+
+/** Check Linux: build-essential, python3, libsecret */
+function checkLinux() {
+  const results = { ok: true, missing: [] };
+  const distro = detectLinuxDistro();
+
+  section(`Linux Distribution Detected: ${distro || 'unknown'}`);
+
+  // gcc / g++
+  if (commandExists('gcc') || commandExists('cc')) {
+    success('C compiler found');
+  } else {
+    error('C compiler not found');
+    results.ok = false;
+    results.missing.push('compiler');
+  }
+
+  if (commandExists('g++') || commandExists('c++')) {
+    success('C++ compiler found');
+  } else {
+    error('C++ compiler not found');
+    results.ok = false;
+    results.missing.push('compiler');
+  }
+
+  // make
+  if (commandExists('make')) {
+    success('make found');
+  } else {
+    error('make not found');
+    results.ok = false;
+    results.missing.push('make');
+  }
+
+  // Python 3
+  if (commandExists('python3')) {
+    success('Python 3 found');
+  } else if (commandExists('python')) {
+    // Check if python is python3
+    try {
+      const ver = execSync('python --version', { encoding: 'utf8' });
+      if (ver.includes('3.')) {
+        success('Python 3 found (as python)');
+      } else {
+        error('Python 3 not found (python is v2)');
+        results.ok = false;
+        results.missing.push('python3');
+      }
+    } catch {
+      error('Python not found');
+      results.ok = false;
+      results.missing.push('python3');
+    }
+  } else {
+    error('Python 3 not found');
+    results.ok = false;
+    results.missing.push('python3');
+  }
+
+  // libsecret (needed by keytar)
+  try {
+    if (distro === 'debian') {
+      execSync('dpkg -s libsecret-1-dev', { stdio: 'ignore' });
+      success('libsecret-1-dev found');
+    } else if (distro === 'arch') {
+      execSync('pacman -Qi libsecret', { stdio: 'ignore' });
+      success('libsecret found');
+    } else {
+      // Check for pkg-config
+      try {
+        execSync('pkg-config --exists libsecret-1', { stdio: 'ignore' });
+        success('libsecret (pkg-config) found');
+      } catch {
+        warn('libsecret not detected (may not be needed if using prebuilt keytar)');
+      }
+    }
+  } catch {
+    warn('libsecret not detected (may not be needed if using prebuilt keytar)');
+  }
+
+  return results;
+}
+
+// ─── Installation Helpers ───────────────────────────────────────────────────
+
+/** Run a command and stream output, return exit code */
+function runCommand(cmd, args, opts = {}) {
+  return new Promise((resolve) => {
+    console.log(`\n  ${color(CYAN, 'Running:')} ${color(DIM, `${cmd} ${args.join(' ')}`)}`);
+
+    const child = spawnSync(cmd, args, {
+      stdio: 'inherit',
+      shell: platform === 'win32',
+      ...opts,
+    });
+
+    resolve(child.status);
+  });
+}
+
+/** Install Windows: Visual Studio 2022 Build Tools via winget */
+async function installWindows() {
+  // Check if winget is available
+  if (!commandExists('winget')) {
+    console.log('');
+    console.log(color(RED, '  winget not found. Please install Visual Studio Build Tools manually:'));
+    console.log(color(CYAN, '  https://visualstudio.microsoft.com/downloads/#build-tools-for-visual-studio-2022'));
+    console.log('');
+    console.log('  During installation, select:');
+    console.log(color(BOLD, '    "Desktop development with C++" workload'));
+    console.log('');
+    console.log('  Or install via PowerShell (as Administrator):');
+    console.log(color(DIM, '    winget install Microsoft.VisualStudio.2022.BuildTools --override "--wait --quiet --add Microsoft.VisualStudio.Workload.VCTools --includeRecommended"'));
+    return false;
+  }
+
+  console.log('');
+  info('Attempting automatic installation of Visual Studio 2022 Build Tools...');
+  dim('This may take several minutes and requires administrator privileges.');
+  console.log('');
+
+  if (!hasAdminPrivileges()) {
+    warn('Not running as Administrator. winget may prompt for elevation.');
+  }
+
+  const status = await runCommand('winget', [
+    'install',
+    'Microsoft.VisualStudio.2022.BuildTools',
+    '--override',
+    '"--quiet --wait --norestart --add Microsoft.VisualStudio.Component.VC.Tools.x86.x64 --add Microsoft.VisualStudio.Component.Windows11SDK.22621 --includeRecommended"',
+  ]);
+
+  if (status === 0) {
+    success('Visual Studio 2022 Build Tools installed successfully.');
+    console.log('');
+    warn('You may need to restart your terminal for PATH changes to take effect.');
+    return true;
+  }
+
+  error('Automatic installation failed. Please install manually.');
+  return false;
+}
+
+/** Install macOS: Xcode Command Line Tools */
+async function installMacOS() {
+  console.log('');
+  info('Installing Xcode Command Line Tools...');
+  dim('A GUI dialog will appear. Click "Install" to proceed.');
+
+  const status = await runCommand('xcode-select', ['--install']);
+
+  // xcode-select --install returns 1 if already installed or cancelled
+  if (status === 0) {
+    success('Xcode Command Line Tools installation initiated.');
+    return true;
+  }
+
+  // Check if already installed (common false-negative)
+  try {
+    execSync('xcode-select -p', { stdio: 'ignore' });
+    success('Xcode Command Line Tools are already installed.');
+    return true;
+  } catch {
+    warn('Xcode CLT installation was cancelled or failed.');
+    warn('You can install manually via: xcode-select --install');
+    return false;
+  }
+}
+
+/** Install Linux: distribution-specific packages */
+async function installLinux() {
+  const distro = detectLinuxDistro();
+
+  if (distro === 'debian') {
+    // Ubuntu / Debian
+    if (!hasAdminPrivileges()) {
+      warn('Root privileges required. You may be prompted for your password.');
+    }
+
+    const status = await runCommand('sudo', [
+      'apt-get', 'install', '-y',
+      'build-essential',
+      'python3',
+      'libsecret-1-dev',
+      'pkg-config',
+    ]);
+
+    if (status === 0) {
+      success('Build dependencies installed successfully.');
+      return true;
+    }
+
+    error('Failed to install build dependencies.');
+    return false;
+  }
+
+  if (distro === 'arch') {
+    // Manjaro / Arch
+    if (!hasAdminPrivileges()) {
+      warn('Root privileges required. You may be prompted for your password.');
+    }
+
+    const status = await runCommand('sudo', [
+      'pacman', '-S', '--needed', '--noconfirm',
+      'base-devel',
+      'python',
+      'libsecret',
+      'pkg-config',
+    ]);
+
+    if (status === 0) {
+      success('Build dependencies installed successfully.');
+      return true;
+    }
+
+    error('Failed to install build dependencies.');
+    return false;
+  }
+
+  if (distro === 'fedora') {
+    if (!hasAdminPrivileges()) {
+      warn('Root privileges required. You may be prompted for your password.');
+    }
+
+    const status = await runCommand('sudo', [
+      'dnf', 'install', '-y',
+      'gcc-c++',
+      'make',
+      'python3',
+      'libsecret-devel',
+      'pkg-config',
+    ]);
+
+    if (status === 0) {
+      success('Build dependencies installed successfully.');
+      return true;
+    }
+
+    error('Failed to install build dependencies.');
+    return false;
+  }
+
+  // Unknown distro - provide generic instructions
+  console.log('');
+  warn(`Unknown Linux distribution: ${distro}`);
+  console.log('');
+  console.log('  You need the following packages to compile native Node.js modules:');
+  console.log('    - C/C++ compiler (gcc, g++)');
+  console.log('    - GNU Make');
+  console.log('    - Python 3');
+  console.log('    - libsecret development headers (for keytar)');
+  console.log('    - pkg-config');
+  console.log('');
+  console.log('  Install them using your distribution package manager, then run npm install again.');
+  return false;
+}
+
+// ─── Main ───────────────────────────────────────────────────────────────────
+
+async function main() {
+  const args = process.argv.slice(2);
+  const checkOnly = args.includes('--check-only') || args.includes('--check');
+
+  console.log('');
+  console.log(color(BOLD + CYAN, '┌──────────────────────────────────────────┐'));
+  console.log(color(BOLD + CYAN, '│  Gemini Nexus - Dev Environment Setup    │'));
+  console.log(color(BOLD + CYAN, '└──────────────────────────────────────────┘'));
+  console.log('');
+  dim(`Platform: ${platform} (${arch})`);
+  dim(`Node.js:  ${process.version}`);
+
+  // Step 1: Check current state
+  header('Checking Build Toolchain');
+
+  let results;
+  switch (platform) {
+    case 'win32':
+      results = checkWindows();
+      break;
+    case 'darwin':
+      results = checkMacOS();
+      break;
+    case 'linux':
+      results = checkLinux();
+      break;
+    default:
+      console.log('');
+      error(`Unsupported platform: ${platform}`);
+      process.exit(1);
+  }
+
+  // Print summary
+  console.log('');
+  if (results.ok) {
+    success('All build tools are present and ready.');
+    console.log('');
+    dim('You can now run: npm install && npm start');
+    return;
+  }
+
+  // ── Missing tools ──
+  console.log('');
+  error('Some build tools are missing. Native modules like better-sqlite3 and keytar require compilation.');
+
+  if (checkOnly) {
+    console.log('');
+    warn('Build tools are missing. Native modules (better-sqlite3, keytar) require compilation.');
+    warn('Run "npm run setup" to install them automatically, or install manually:');
+    printManualInstructions(platform, results.missing);
+    console.log('');
+    dim('npm install succeeded, but npm start / electron-rebuild will fail until build tools are installed.');
+    // Don't exit with error - allow npm install to succeed (prebuilt binaries may work)
+    return;
+  }
+
+  // Step 2: Attempt installation
+  header('Installing Build Dependencies');
+
+  let installed = false;
+  switch (platform) {
+    case 'win32':
+      installed = await installWindows();
+      break;
+    case 'darwin':
+      installed = await installMacOS();
+      break;
+    case 'linux':
+      installed = await installLinux();
+      break;
+  }
+
+  // Step 3: Final status
+  console.log('');
+  if (installed) {
+    success('Setup complete. You can now run: npm install && npm start');
+    console.log('');
+    dim('If you encounter issues, restart your terminal and try again.');
+  } else {
+    console.log('');
+    warn('Automatic installation was not successful.');
+    warn('Please install the required tools manually, then run npm install again.');
+    printManualInstructions(platform, results.missing);
+    process.exit(1);
+  }
+}
+
+function printManualInstructions(platform, missing) {
+  console.log('');
+  console.log(color(BOLD, '  ── Manual Installation Instructions ──'));
+  console.log('');
+
+  switch (platform) {
+    case 'win32':
+      console.log('  1. Download Visual Studio 2022 Build Tools:');
+      console.log(color(CYAN, '     https://visualstudio.microsoft.com/downloads/#build-tools-for-visual-studio-2022'));
+      console.log('');
+      console.log('  2. Run the installer and select:');
+      console.log(color(BOLD, '     "Desktop development with C++"'));
+      console.log('');
+      console.log('  3. Or install via PowerShell (as Administrator):');
+      console.log(color(DIM, '     winget install Microsoft.VisualStudio.2022.BuildTools --override "--quiet --wait --add Microsoft.VisualStudio.Workload.VCTools --includeRecommended"'));
+      console.log('');
+      console.log('  4. Restart your terminal after installation.');
+      break;
+
+    case 'darwin':
+      console.log('  Run this command in your terminal:');
+      console.log(color(DIM, '    xcode-select --install'));
+      console.log('');
+      console.log('  Then click "Install" in the dialog that appears.');
+      break;
+
+    case 'linux': {
+      const distro = detectLinuxDistro();
+      if (distro === 'debian') {
+        console.log('  Run:');
+        console.log(color(DIM, '    sudo apt-get install -y build-essential python3 libsecret-1-dev pkg-config'));
+      } else if (distro === 'arch') {
+        console.log('  Run:');
+        console.log(color(DIM, '    sudo pacman -S --needed base-devel python libsecret pkg-config'));
+      } else if (distro === 'fedora') {
+        console.log('  Run:');
+        console.log(color(DIM, '    sudo dnf install -y gcc-c++ make python3 libsecret-devel pkg-config'));
+      } else {
+        console.log('  Install: C/C++ compiler, make, python3, libsecret-dev, pkg-config');
+      }
+      break;
+    }
+  }
+
+  console.log('');
+}
+
+// ─── Run ────────────────────────────────────────────────────────────────────
+
+main().catch((err) => {
+  console.error(color(RED, `\nUnexpected error: ${err.message}`));
+  process.exit(1);
+});

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { syncWithLocalTheme } from './actions/theme';
 import { useTranslation } from 'react-i18next';
@@ -29,12 +29,10 @@ const queryClient = new QueryClient();
 
 const root = createRoot(document.getElementById('app')!);
 root.render(
-  <React.StrictMode>
   <QueryClientProvider client={queryClient}>
-      <ThemeProvider storageKey={LOCAL_STORAGE_KEYS.THEME} defaultTheme="system">
+    <ThemeProvider storageKey={LOCAL_STORAGE_KEYS.THEME} defaultTheme="dark">
       <App />
       <Toaster />
     </ThemeProvider>
-    </QueryClientProvider>
+  </QueryClientProvider>,
-  </React.StrictMode>,
 );

src/components/AccountCard.tsx

@@ -114,8 +114,8 @@ export const AccountCard: React.FC<AccountCardProps> = ({
       <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',
+          isCurrent ? 'border-primary/50 bg-primary/10' : 'hover:bg-accent/10 cursor-pointer border-white/5',
           (isSwitching || isDeleting) && 'pointer-events-none opacity-60',
         )}
         onClick={() => !isCurrent && !isSwitching && !isDeleting && onSwitch(account.id)}

src/components/AccountProxySettings.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+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';
@@ -67,7 +67,7 @@ function AccountProxyItem({ account }: { account: CloudAccount }) {
         />
         <div className="w-16">
           {proxySaved && (
-            <span className="text-[10px] whitespace-nowrap text-green-500">
+            <span className="text-[10px] whitespace-nowrap text-emerald-400">
               {t('cloud.card.proxySaved')}
             </span>
           )}

src/components/CloudAccountCard.tsx

@@ -17,7 +17,6 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Input } from '@/components/ui/input';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 import { MoreVertical, Trash, RefreshCw, Box, Power, Fingerprint, Eye, EyeOff } from 'lucide-react';
@@ -59,9 +58,9 @@ const MODEL_DISPLAY_REPLACEMENTS: Array<[string, string]> = [
 ];
 
 const QUOTA_TEXT_COLOR_CLASS_BY_STATUS: Record<QuotaStatus, string> = {
-  high: 'text-green-500',
+  high: 'text-emerald-400',
-  medium: 'text-yellow-500',
+  medium: 'text-amber-400',
-  low: 'text-red-500',
+  low: 'text-rose-400',
 };
 
 const QUOTA_BAR_COLOR_CLASS_BY_STATUS: Record<QuotaStatus, string> = {
@@ -241,12 +240,12 @@ export function CloudAccountCard({
           <span className="text-muted-foreground/70 text-[10px] font-bold tracking-wider uppercase">
             {title}
           </span>
-          <div className="bg-border/50 h-[1px] flex-1" />
+          <div className="h-[1px] flex-1 bg-white/[0.04]" />
         </div>
         {models.map(([modelName, info]) => (
           <div
             key={modelName}
-            className="group/item hover:bg-muted/60 hover:border-border/60 grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 rounded-lg border border-transparent px-2 py-1.5 text-sm transition-all"
+            className="group/item grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 rounded-lg border border-transparent px-2 py-1.5 text-[13px] transition-all hover:bg-white/[0.03]"
           >
             <span
               className="text-muted-foreground group-hover/item:text-foreground min-w-0 truncate font-semibold"
@@ -292,7 +291,7 @@ export function CloudAccountCard({
   const providerGroupedQuotaSection =
     providerStats && providerStats.visibleModels > 0 ? (
       <>
-        <div className="bg-muted/40 flex items-center justify-between rounded-lg px-3 py-1.5 text-xs">
+        <div className="flex items-center justify-between rounded-lg bg-white/[0.03] px-3 py-1.5 text-xs">
           <span className="font-medium">{t('settings.providerGroupings.overall')}</span>
           <div className="flex items-center gap-2">
             <span
@@ -344,7 +343,7 @@ export function CloudAccountCard({
 
   return (
     <Card
-      className={`group bg-card hover:border-primary/40 flex h-full flex-col overflow-hidden border transition-all duration-200 hover:shadow-sm ${isSelected ? 'ring-primary border-primary/50 ring-2' : ''}`}
+      className={`group flex h-full flex-col overflow-hidden rounded-xl border border-white/[0.06] bg-card transition-all duration-200 hover:border-white/[0.12] ${isSelected ? 'ring-accent/30 border-accent/40 ring-2' : ''}`}
     >
       <CardHeader className="relative flex flex-row items-center gap-4 space-y-0 pb-2">
         {onToggleSelection && (
@@ -366,7 +365,7 @@ export function CloudAccountCard({
             className="bg-muted h-10 w-10 rounded-full border"
           />
         ) : (
-          <div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded-full border">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/[0.06] text-muted-foreground">
             {account.name?.[0]?.toUpperCase() || 'A'}
           </div>
         )}
@@ -494,7 +493,7 @@ export function CloudAccountCard({
               {account.provider.toUpperCase()}
             </Badge>
             {account.is_active && (
-              <Badge variant="default" className="bg-green-500 text-xs hover:bg-green-600">
+              <Badge variant="default" className="bg-emerald-500/15 text-emerald-400 border-emerald-500/20 text-xs hover:bg-emerald-500/20">
                 {t('cloud.card.active')}
               </Badge>
             )}
@@ -515,7 +514,7 @@ export function CloudAccountCard({
           )}
 
           {account.is_active ? (
-            <Button variant="ghost" size="sm" disabled className="text-green-600 opacity-100">
+            <Button variant="ghost" size="sm" disabled className="text-emerald-400 opacity-100">
               <Power className="mr-1 h-3 w-3" />
               {t('cloud.card.active')}
             </Button>
@@ -552,7 +551,7 @@ export function CloudAccountCard({
         </div>
       </CardContent>
 
-      <CardFooter className="bg-muted/20 text-muted-foreground justify-center border-t p-2 px-4 text-xs">
+      <CardFooter className="justify-center border-t border-white/[0.04] p-2 px-4 text-xs text-muted-foreground">
         <span>
           {t('cloud.card.used')}{' '}
           {formatDistanceToNow(account.last_used * 1000, { addSuffix: true })}
@@ -614,7 +613,7 @@ export function CompactCloudAccountCard({
   );
 
   return (
-    <div className="group bg-card hover:border-primary/40 flex items-center gap-3 rounded-lg border px-3 py-2 transition-all duration-200">
+    <div className="group flex items-center gap-3 rounded-xl border border-white/[0.06] bg-card px-3 py-2 transition-all duration-200 hover:border-white/[0.12]">
       {account.avatar_url ? (
         <img
           src={account.avatar_url}
@@ -622,14 +621,14 @@ export function CompactCloudAccountCard({
           className="bg-muted h-7 w-7 rounded-full border"
         />
       ) : (
-        <div className="bg-primary/10 text-primary flex h-7 w-7 items-center justify-center rounded-full border text-xs font-semibold">
+        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-white/[0.06] text-xs font-semibold text-muted-foreground">
           {account.name?.[0]?.toUpperCase() || 'A'}
         </div>
       )}
 
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className="truncate text-sm font-semibold">
+          <span className="truncate text-[13px] font-semibold">
             {account.name || t('cloud.card.unknown')}
           </span>
           <Badge
@@ -645,7 +644,7 @@ export function CompactCloudAccountCard({
           {account.is_active && (
             <Badge
               variant="default"
-              className="shrink-0 bg-green-500 text-[10px] hover:bg-green-600"
+              className="shrink-0 bg-emerald-500/15 text-emerald-400 border-emerald-500/20 text-[10px] hover:bg-emerald-500/20"
             >
               {t('cloud.card.active')}
             </Badge>
@@ -757,7 +756,7 @@ export function CompactCloudAccountCard({
             variant="ghost"
             size="sm"
             disabled
-            className="h-7 text-xs text-green-600 opacity-100"
+            className="h-7 text-xs text-emerald-400 opacity-100"
           >
             <Power className="mr-1 h-3 w-3" />
             {t('cloud.card.active')}

src/components/CloudAccountList.tsx

@@ -85,10 +85,10 @@ import { shouldAutoSubmitGoogleAuthCode } from '@/utils/googleAuthSubmission';
 export type GridLayout = 'auto' | '2-col' | '3-col' | 'list' | 'compact';
 
 const GRID_LAYOUT_CLASSES: Record<GridLayout, string> = {
-  auto: 'grid gap-4 md:grid-cols-2 xl:grid-cols-3',
+  auto: 'grid gap-3 md:grid-cols-2 xl:grid-cols-3',
-  '2-col': 'grid gap-4 grid-cols-2',
+  '2-col': 'grid gap-3 grid-cols-2',
-  '3-col': 'grid gap-4 grid-cols-3',
+  '3-col': 'grid gap-3 grid-cols-3',
-  list: 'grid gap-4 grid-cols-1',
+  list: 'grid gap-3 grid-cols-1',
   compact: 'flex flex-col gap-2',
 };
 
@@ -99,9 +99,9 @@ const GLOBAL_QUOTA_BAR_COLOR_CLASS_BY_STATUS: Record<QuotaStatus, string> = {
 };
 
 const GLOBAL_QUOTA_TEXT_COLOR_CLASS_BY_STATUS: Record<QuotaStatus, string> = {
-  high: 'text-emerald-600 dark:text-emerald-400',
+  high: 'text-emerald-400',
-  medium: 'text-amber-600 dark:text-amber-400',
+  medium: 'text-amber-400',
-  low: 'text-rose-600 dark:text-rose-400',
+  low: 'text-rose-400',
 };
 
 export function CloudAccountList() {
@@ -259,16 +259,12 @@ export function CloudAccountList() {
       return;
     }
     const activeClientKey = oauthClients.find((client) => client.is_active)?.key;
-    if (activeClientKey) {
+    if (activeClientKey && activeClientKey !== selectedOAuthClientKey) { setTimeout(() => setSelectedOAuthClientKey(activeClientKey), 0); }
-      setSelectedOAuthClientKey(activeClientKey);
-    }
   }, [oauthClients, selectedOAuthClientKey]);
   // Listen for Google Auth Code
   useEffect(() => {
     if (window.electron?.onGoogleAuthCode) {
-      console.log('[OAuth] Registering Google auth code IPC listener');
       const cleanup = window.electron.onGoogleAuthCode((code) => {
-        console.log('[OAuth] Received Google auth code via IPC:', code?.substring(0, 10) + '...');
         lastSubmittedAuthCodeRef.current = null;
         setAuthCode(code);
       });
@@ -286,7 +282,6 @@ export function CloudAccountList() {
         lastSubmittedAuthCode: lastSubmittedAuthCodeRef.current,
       })
     ) {
-      console.log('[OAuth] Auto-submitting Google auth code');
       submitAuthCode(authCode);
     }
   }, [addMutation.isPending, authCode, isAddDialogOpen, submitAuthCode]);
@@ -308,7 +303,6 @@ export function CloudAccountList() {
   }, [error, errorUpdatedAt, isError, t, toast]);
 
   const handleRefresh = (id: string) => {
-    console.log(`[Renderer] Triggering refresh for: ${id}`);
     refreshMutation.mutate(
       { accountId: id },
       {
@@ -669,34 +663,34 @@ export function CloudAccountList() {
 
   return (
     <div className="space-y-5 pb-20">
-      <div className="bg-card rounded-lg border p-5">
+      <div className="rounded-xl border border-white/[0.06] p-5">
         <div className="flex flex-wrap items-start justify-between gap-4">
           <div className="flex shrink-0 flex-col gap-1">
-            <h2 className="text-2xl font-bold tracking-tight">{t('cloud.title')}</h2>
+            <h2 className="text-lg font-semibold tracking-tight">{t('cloud.title')}</h2>
-            <p className="text-muted-foreground max-w-2xl">{t('cloud.description')}</p>
+            <p className="text-muted-foreground max-w-2xl text-[13px]">{t('cloud.description')}</p>
           </div>
           <div className="flex flex-wrap gap-2">
-            <div className="bg-muted/50 rounded-md border px-3 py-2">
+            <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] px-3 py-2">
               <div className="text-muted-foreground text-[11px] uppercase">
                 {t('cloud.card.actions')}
               </div>
-              <div className="text-base font-semibold">{totalAccounts}</div>
+              <div className="text-sm font-semibold tabular-nums">{totalAccounts}</div>
             </div>
-            <div className="bg-muted/50 rounded-md border px-3 py-2">
+            <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] px-3 py-2">
               <div className="text-muted-foreground text-[11px] uppercase">
                 {t('cloud.card.active')}
               </div>
-              <div className="text-base font-semibold text-emerald-600">{activeAccounts}</div>
+              <div className="text-sm font-semibold text-emerald-400">{activeAccounts}</div>
             </div>
-            <div className="bg-muted/50 rounded-md border px-3 py-2">
+            <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] px-3 py-2">
               <div className="text-muted-foreground text-[11px] uppercase">
                 {t('cloud.card.rateLimited')}
               </div>
-              <div className="text-base font-semibold text-rose-600">{rateLimitedAccounts}</div>
+              <div className="text-sm font-semibold text-rose-400">{rateLimitedAccounts}</div>
             </div>
             {/* Global Quota */}
             {overallQuotaPercentage !== null && (
-              <div className="bg-muted/50 rounded-md border px-3 py-2">
+              <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] px-3 py-2">
                 <div className="text-muted-foreground text-[11px] uppercase">
                   {t('cloud.globalQuota')}
                 </div>
@@ -719,13 +713,13 @@ export function CloudAccountList() {
         </div>
       </div>
 
-      <div className="bg-card flex flex-wrap items-center gap-2 rounded-lg border p-3">
+      <div className="flex flex-wrap items-center gap-2 rounded-xl border border-white/[0.06] bg-card p-2.5">
-        <div className="bg-muted/50 flex items-center gap-2 rounded-md border px-3 py-2">
+        <div className="flex items-center gap-2 rounded-lg border border-white/[0.06] px-3 py-1.5">
           <div className="flex items-center gap-2">
             <Zap
               className={`h-4 w-4 ${autoSwitchEnabled ? 'fill-yellow-500 text-yellow-500' : 'text-muted-foreground'}`}
             />
-            <Label htmlFor="auto-switch" className="cursor-pointer text-sm font-medium">
+            <Label htmlFor="auto-switch" className="cursor-pointer text-[13px] font-medium">
               {t('cloud.autoSwitch')}
             </Label>
           </div>
@@ -1114,7 +1108,7 @@ export function CloudAccountList() {
         )}
 
         {sortedAccounts.length === 0 && (
-          <div className="text-muted-foreground bg-muted/20 col-span-full rounded-lg border border-dashed py-14 text-center">
+          <div className="text-muted-foreground col-span-full rounded-xl border border-dashed border-white/[0.1] py-14 text-center">
             <Cloud className="mx-auto mb-3 h-10 w-10 opacity-40" />
             <div className="text-sm">{t('cloud.list.noAccounts')}</div>
           </div>
@@ -1123,7 +1117,7 @@ export function CloudAccountList() {
 
       {/* Batch Action Bar */}
       {selectedIds.size > 0 && (
-        <div className="bg-card animate-in fade-in slide-in-from-bottom-4 fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 items-center gap-4 rounded-full border px-6 py-2 shadow-lg">
+        <div className="bg-card animate-in fade-in slide-in-from-bottom-4 fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 items-center gap-4 rounded-full border border-white/[0.1] px-6 py-2 shadow-2xl shadow-black/30">
           <div className="flex items-center gap-2 border-r pr-4">
             <span className="text-sm font-semibold">
               {t('cloud.batch.selected', { count: selectedIds.size })}

src/components/IdentityProfileDialog.tsx

@@ -134,8 +134,7 @@ export function IdentityProfileDialog({ account, open, onOpenChange }: IdentityP
     if (!open) {
       return;
     }
-    void refreshProfiles();
+    setTimeout(() => { void refreshProfiles(); }, 0); }, [open, refreshProfiles]);
-  }, [open, refreshProfiles]);
 
   const runAction = async (key: string, action: () => Promise<void>) => {
     if (actionLockRef.current) {
@@ -344,7 +343,7 @@ export function IdentityProfileDialog({ account, open, onOpenChange }: IdentityP
 
                   {!showLoadingPlaceholder
                     ? history.map((version) => (
-                        <div key={version.id} className="bg-muted/20 rounded-xl border p-3">
+                        <div key={version.id} className="rounded-xl border border-white/[0.06] bg-white/[0.02] 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>

src/components/ModelVisibilitySettings.tsx

@@ -48,12 +48,8 @@ export function ModelVisibilitySettings() {
 
   // Initialize model visibility and provider groupings from config
   useEffect(() => {
-    if (config?.model_visibility) {
+    if (config?.model_visibility) { setTimeout(() => setModelVisibilityMap(config.model_visibility), 0); }
-      setModelVisibilityMap(config.model_visibility);
+    if (config?.provider_groupings_enabled !== undefined) { setTimeout(() => setProviderGroupingEnabled(config.provider_groupings_enabled), 0); }
-    }
-    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
@@ -188,7 +184,7 @@ export function ModelVisibilitySettings() {
               return (
                 <div
                   key={modelId}
-                  className="hover:bg-muted/50 flex items-center space-x-3 rounded p-2"
+                  className="flex items-center space-x-3 rounded-lg p-2 hover:bg-white/[0.03] transition-colors"
                 >
                   <Checkbox
                     id={`model-${modelId}`}
@@ -210,7 +206,7 @@ export function ModelVisibilitySettings() {
                       title={t('proxy.copy')}
                     >
                       {copiedModel === modelId ? (
-                        <CheckCircle className="h-4 w-4 text-green-500" />
+                        <CheckCircle className="h-4 w-4 text-emerald-400" />
                       ) : (
                         <Copy className="h-4 w-4" />
                       )}

src/components/ProviderGroup.tsx

@@ -37,12 +37,12 @@ export const ProviderGroup: React.FC<ProviderGroupProps> = ({
   }
 
   return (
-    <div className="border-border/60 overflow-hidden rounded-lg border">
+    <div className="overflow-hidden rounded-xl border border-white/[0.06]">
       {/* 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"
+        className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-[13px] transition-colors hover:bg-white/[0.03]"
       >
         {isCollapsed ? (
           <ChevronRight className="text-muted-foreground h-3.5 w-3.5 shrink-0" />
@@ -87,7 +87,7 @@ export const ProviderGroup: React.FC<ProviderGroupProps> = ({
               </span>
             )}
           </div>
-          <div className="bg-muted h-1.5 w-16 overflow-hidden rounded-full">
+          <div className="h-1.5 w-16 overflow-hidden rounded-full bg-white/[0.06]">
             <div
               className={`h-full rounded-full transition-all duration-300 ${getQuotaBarColorClass(avgPercentage)}`}
               style={{ width: `${clampQuotaPercentage(avgPercentage)}%` }}
@@ -98,12 +98,12 @@ export const ProviderGroup: React.FC<ProviderGroupProps> = ({
 
       {/* Individual model rows (shown when expanded) */}
       {!isCollapsed && (
-        <div className="border-border/40 border-t">
+        <div className="border-t border-white/[0.06]">
           {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 ${
+              className={`grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 px-3 py-2 pl-9 text-[13px] transition-colors hover:bg-white/[0.03] ${
-                index < visibleModels.length - 1 ? 'border-border/20 border-b' : ''
+                index < visibleModels.length - 1 ? 'border-b border-white/[0.04]' : ''
               }`}
             >
               <span className="text-muted-foreground min-w-0 truncate" title={model.id}>
@@ -126,7 +126,7 @@ export const ProviderGroup: React.FC<ProviderGroupProps> = ({
                     <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-1.5 w-24 overflow-hidden rounded-full bg-white/[0.06]">
                   <div
                     className={`h-full rounded-full transition-all duration-300 ${getQuotaBarColorClass(model.percentage)}`}
                     style={{ width: `${clampQuotaPercentage(model.percentage)}%` }}

src/components/StatusBar.tsx

@@ -52,36 +52,38 @@ export const StatusBar: React.FC<StatusBarProps> = ({ isCollapsed = false }) =>
         <TooltipProvider>
           <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
-              <Button
+              <button
-                variant="ghost"
-                size="icon"
                 onClick={handleToggle}
                 disabled={isLoading || isPending}
                 className={cn(
-                  'h-10 w-10 rounded-lg transition-all duration-300',
+                  'flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-200',
+                  'disabled:opacity-50 disabled:cursor-not-allowed',
                   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-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
-                    : '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',
+                    : 'bg-white/[0.04] text-muted-foreground hover:bg-white/[0.08] hover:text-foreground',
                 )}
               >
                 {isPending ? (
-                  <Loader2 className="h-5 w-5 animate-spin" />
+                  <Loader2 className="h-4 w-4 animate-spin" />
                 ) : (
-                  <Power className="h-5 w-5" />
+                  <Power className="h-4 w-4" />
                 )}
-              </Button>
+              </button>
             </TooltipTrigger>
-            <TooltipContent side="right" className="flex items-center gap-2">
+            <TooltipContent side="right" className="flex items-center gap-2 text-xs">
               <div
-                className={cn('h-2 w-2 rounded-full', isRunning ? 'bg-green-500' : 'bg-red-500')}
+                className={cn(
+                  'h-1.5 w-1.5 rounded-full',
+                  isRunning ? 'bg-emerald-400' : 'bg-muted-foreground',
+                )}
               />
-              <p>
+              <span>
                 {isLoading
                   ? t('status.checking')
                   : isRunning
                     ? t('status.running')
                     : t('status.stopped')}
-              </p>
+              </span>
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
@@ -93,23 +95,33 @@ export const StatusBar: React.FC<StatusBarProps> = ({ isCollapsed = false }) =>
   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',
+        'flex items-center justify-between rounded-lg px-3 py-2 transition-all duration-200',
         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-emerald-500/[0.08]'
-          : 'bg-red-100 text-red-900 ring-red-200 dark:bg-red-900/20 dark:text-red-100 dark:ring-red-900/50',
+          : 'bg-white/[0.02]',
       )}
     >
-      <div className="flex flex-1 items-start gap-3">
+      <div className="flex items-center gap-2.5">
         {isLoading ? (
-          <Loader2 className="mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin" />
+          <Loader2 className="h-3 w-3 shrink-0 animate-spin text-muted-foreground" />
-        ) : 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={cn(
+              'h-2 w-2 shrink-0 rounded-full transition-colors duration-300',
+              isRunning
+                ? 'bg-emerald-400 shadow-[0_0_6px_rgba(16,185,129,0.4)]'
+                : 'bg-muted-foreground/50',
             )}
-        <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">
+        <div className="flex flex-col">
+          <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+            Status
+          </span>
+          <span className={cn(
+            'text-xs font-medium leading-tight',
+            isRunning ? 'text-emerald-400' : 'text-muted-foreground',
+          )}>
             {isLoading
               ? t('status.checking')
               : isRunning
@@ -124,22 +136,20 @@ export const StatusBar: React.FC<StatusBarProps> = ({ isCollapsed = false }) =>
         onClick={handleToggle}
         disabled={isLoading || isPending}
         className={cn(
-          'ml-2 h-8 shrink-0 rounded-md border px-3 transition-all',
+          'h-7 gap-1.5 rounded-md px-2.5 text-xs',
           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'
+            ? 'text-emerald-400 hover:bg-emerald-500/10'
-            : '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',
+            : 'text-muted-foreground hover:bg-white/[0.06]',
         )}
       >
         {isPending ? (
-          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          <Loader2 className="h-3 w-3 animate-spin" />
         ) : isRunning ? (
-          <Square className="h-3.5 w-3.5 fill-current" />
+          <Square className="h-3 w-3 fill-current" />
         ) : (
-          <Play className="h-3.5 w-3.5 fill-current" />
+          <Play className="h-3 w-3 fill-current" />
         )}
-        <span className="ml-2 font-semibold">
+        <span>{isRunning ? t('action.stop') : t('action.start')}</span>
-          {isRunning ? t('action.stop') : t('action.start')}
-        </span>
       </Button>
     </div>
   );

src/components/drag-window-region.tsx

@@ -35,7 +35,7 @@ export default function DragWindowRegion({ title }: DragWindowRegionProps) {
     <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">
+          <div className="flex flex-1 p-2 text-xs whitespace-nowrap text-muted-foreground select-none">
             {title}
           </div>
         )}

src/components/proxy/advanced/CapabilitiesTab.tsx

@@ -1,39 +1,72 @@
-import React from 'react';
+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, Mic, Image } from 'lucide-react';
+import { Loader2, Eye, Zap, Code, Brain, Star, Layers } from 'lucide-react';
 
 interface ModelCapability {
   id: string;
   object: string;
+  displayName?: string;
   capabilities: {
     vision: boolean;
+    thinking: boolean;
     streaming: boolean;
     jsonMode: boolean;
-    audio: boolean;
+    recommended: boolean;
-    imageGeneration: boolean;
+  };
+  limits: {
+    maxTokens?: number;
+    maxOutputTokens?: number;
+    thinkingBudget?: number;
   };
 }
 
 const CAPABILITY_ICONS = {
   vision: Eye,
+  thinking: Brain,
   streaming: Zap,
   jsonMode: Code,
-  audio: Mic,
+  recommended: Star,
-  imageGeneration: Image,
 } as const;
 
 const CAPABILITY_LABELS = {
   vision: 'Vision',
+  thinking: 'Thinking',
   streaming: 'Streaming',
   jsonMode: 'JSON Mode',
-  audio: 'Audio',
+  recommended: 'Recommended',
-  imageGeneration: 'Image Generation',
 } 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';
+}
+
+/** Format large token counts with K/M suffixes */
+function formatTokenCount(value: number): string {
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(1)}M`;
+  }
+  if (value >= 1_000) {
+    return `${(value / 1_000).toFixed(0)}K`;
+  }
+  return value.toLocaleString();
+}
+
 export const CapabilitiesTab: React.FC = () => {
   const { t } = useTranslation();
 
@@ -47,32 +80,91 @@ export const CapabilitiesTab: React.FC = () => {
     ? (capabilitiesData.data as ModelCapability[])
     : [];
 
+  const groupedModels = useMemo(() => {
+    return groupBy(models, (m) => getProvider(m.id));
+  }, [models]);
+
+  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">
+    <div className="space-y-6">
       {/* Header */}
+      <div className="flex items-center justify-between">
         <div>
-        <h3 className="text-lg font-medium">{t('proxy.advanced.capabilities.title')}</h3>
+          <h3 className="text-base font-semibold">
-        <p className="text-sm text-muted-foreground">{t('proxy.advanced.capabilities.description')}</p>
+            {t('proxy.advanced.capabilities.title', 'Model Capabilities')}
+          </h3>
+          <p className="text-[13px] text-muted-foreground">
+            {t('proxy.advanced.capabilities.description', 'Discover what each model can do')}
+          </p>
+        </div>
+        {models.length > 0 && (
+          <Badge variant="outline" className="text-xs tabular-nums">
+            <Layers className="mr-1.5 h-3 w-3" />
+            {models.length} models
+          </Badge>
+        )}
       </div>
 
-      {/* Capabilities Grid */}
+      {/* Content */}
       {isLoading ? (
-        <div className="flex h-32 items-center justify-center">
+        <div className="flex h-40 items-center justify-center">
-          <Loader2 className="h-6 w-6 animate-spin" />
+          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
         </div>
       ) : (
-        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="space-y-8">
-          {models.map((model) => (
+          {sortedProviders.map((provider) => (
-            <Card key={model.id}>
+            <div key={provider} className="space-y-3">
-              <CardHeader>
+              {/* Provider header */}
-                <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
-                  <CardTitle className="text-base">{model.id}</CardTitle>
+                <h4 className="text-[13px] font-semibold tracking-wide uppercase text-muted-foreground">
-                  <Badge variant="outline">{model.object}</Badge>
+                  {provider}
+                </h4>
+                <div className="h-px flex-1 bg-white/[0.06]" />
+                <span className="text-[11px] text-muted-foreground/60 tabular-nums">
+                  {groupedModels[provider].length}
+                </span>
               </div>
-                <CardDescription>Model capabilities and features</CardDescription>
+
-              </CardHeader>
+              {/* Model cards */}
-              <CardContent>
+              <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
-                <div className="grid grid-cols-2 gap-2">
+                {groupedModels[provider].map((model) => {
+                  const enabledCount = Object.values(model.capabilities).filter(Boolean).length;
+                  const totalCount = Object.values(model.capabilities).length;
+                  const hasLimits = Object.values(model.limits).some((v) => v != null);
+
+                  return (
+                    <div
+                      key={model.id}
+                      className="group flex flex-col rounded-xl border border-white/[0.06] bg-card p-4 transition-all hover:border-white/[0.12] hover:bg-white/[0.02]"
+                    >
+                      {/* Model header */}
+                      <div className="mb-3 space-y-1">
+                        <div className="flex items-start justify-between gap-2">
+                          <h5
+                            className="text-[13px] font-semibold leading-tight truncate"
+                            title={model.displayName || model.id}
+                          >
+                            {model.displayName || model.id}
+                          </h5>
+                          <span className="shrink-0 text-[10px] font-medium text-muted-foreground/60 rounded-md bg-white/[0.04] px-1.5 py-0.5">
+                            {enabledCount}/{totalCount}
+                          </span>
+                        </div>
+                        <p
+                          className="font-mono text-[11px] text-muted-foreground truncate"
+                          title={model.id}
+                        >
+                          {model.id}
+                        </p>
+                      </div>
+
+                      {/* Capability pills */}
+                      <div className="flex flex-wrap gap-1.5 mb-3">
                         {Object.entries(model.capabilities).map(([key, supported]) => {
                           const iconKey = key as keyof typeof CAPABILITY_ICONS;
                           const Icon = CAPABILITY_ICONS[iconKey];
@@ -80,38 +172,58 @@ export const CapabilitiesTab: React.FC = () => {
                           return (
                             <div
                               key={key}
-                        className={`flex items-center gap-2 rounded-md border p-2 ${
+                              className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${
                                 supported
-                            ? 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950'
+                                  ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/15'
-                            : 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900'
+                                  : 'bg-white/[0.02] text-muted-foreground/50 border border-white/[0.04]'
-                        }`}
-                      >
-                        <Icon
-                          className={`h-4 w-4 ${
-                            supported ? 'text-green-600 dark:text-green-400' : 'text-gray-400'
-                          }`}
-                        />
-                        <span
-                          className={`text-xs font-medium ${
-                            supported
-                              ? 'text-green-700 dark:text-green-300'
-                              : 'text-gray-500 dark:text-gray-400'
                               }`}
+                              title={label}
                             >
+                              <Icon className="h-3 w-3 shrink-0" />
                               {label}
+                            </div>
+                          );
+                        })}
+                      </div>
+
+                      {/* Limits section */}
+                      {hasLimits && (
+                        <div className="mt-auto flex flex-wrap gap-1.5 border-t border-white/[0.04] pt-3">
+                          {model.limits.maxTokens != null && (
+                            <span className="inline-flex items-center rounded-md bg-white/[0.04] px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
+                              CTX {formatTokenCount(model.limits.maxTokens)}
                             </span>
-                        {supported && (
+                          )}
-                          <Badge variant="default" className="ml-auto h-5 bg-green-600 text-[10px]">
+                          {model.limits.maxOutputTokens != null && (
-                            ✓
+                            <span className="inline-flex items-center rounded-md bg-white/[0.04] px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">
-                          </Badge>
+                              OUT {formatTokenCount(model.limits.maxOutputTokens)}
+                            </span>
+                          )}
+                          {model.limits.thinkingBudget != null && (
+                            <span className="inline-flex items-center rounded-md bg-blue-500/10 border border-blue-500/15 px-1.5 py-0.5 font-mono text-[10px] text-blue-300">
+                              THINK {formatTokenCount(model.limits.thinkingBudget)}
+                            </span>
+                          )}
+                        </div>
                       )}
                     </div>
                   );
                 })}
               </div>
-              </CardContent>
+            </div>
-            </Card>
           ))}
+
+          {models.length === 0 && (
+            <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-white/[0.1] py-16 text-center">
+              <Layers className="h-8 w-8 text-muted-foreground/30" />
+              <div className="space-y-1">
+                <p className="text-[13px] font-medium">No models found</p>
+                <p className="text-xs text-muted-foreground">
+                  Check your provider configurations
+                </p>
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>

src/components/proxy/advanced/MonitorTab.tsx

@@ -2,7 +2,6 @@ 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 {
@@ -113,26 +112,25 @@ export const MonitorTab: React.FC = () => {
       </div>
 
       {/* Circuit Breakers */}
-      <Card>
+      <div className="overflow-hidden rounded-xl border border-white/[0.06] bg-card">
-        <CardHeader>
+        <div className="border-b border-white/[0.06] px-5 py-4">
-          <CardTitle className="text-sm font-semibold">
+          <h4 className="text-[13px] font-semibold">
             {t('proxy.advanced.circuitBreaker.title')}
-          </CardTitle>
+          </h4>
-        </CardHeader>
+        </div>
-        <CardContent>
+        <div className="p-5">
           {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>
+            <p className="text-[13px] 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">
+                <div key={api} className="rounded-xl border border-white/[0.06] bg-white/[0.02] p-4">
-                  <CardContent className="p-4">
                     <div className="flex items-center justify-between">
-                      <span className="text-sm font-medium">{api}</span>
+                      <span className="text-[13px] font-medium">{api}</span>
                       <Badge variant={getCircuitBadgeVariant(state.state)}>
                         {state.state}
                       </Badge>
@@ -146,19 +144,18 @@ export const MonitorTab: React.FC = () => {
                         {new Date(state.lastFailure).toLocaleString()}
                       </div>
                     )}
-                  </CardContent>
+                </div>
-                </Card>
               ))}
             </div>
           )}
-        </CardContent>
+        </div>
-      </Card>
+      </div>
 
       {/* 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">
+            <h3 className="text-[13px] font-semibold">
               {t('proxy.advanced.trafficLog.title')}
             </h3>
             {stats && (

src/components/proxy/advanced/ReplayTab.tsx

@@ -2,7 +2,7 @@ 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';
@@ -76,7 +76,7 @@ export const ReplayTab: React.FC = () => {
     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">
+        <Badge variant="default" className="bg-emerald-500/15 text-emerald-400 border-emerald-500/20 hover:bg-emerald-500/20">
           <CheckCircle className="mr-1 h-3 w-3" />
           {status}
         </Badge>
@@ -98,8 +98,8 @@ export const ReplayTab: React.FC = () => {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div>
-          <h3 className="text-lg font-medium">{t('proxy.advanced.replay.title')}</h3>
+          <h3 className="text-base font-semibold">{t('proxy.advanced.replay.title')}</h3>
-          <p className="text-sm text-muted-foreground">{t('proxy.advanced.replay.description')}</p>
+          <p className="text-[13px] text-muted-foreground">{t('proxy.advanced.replay.description')}</p>
         </div>
         <Button
           variant="outline"
@@ -107,26 +107,26 @@ export const ReplayTab: React.FC = () => {
           onClick={() => refetchRequests()}
           disabled={requestsLoading}
         >
-          <RefreshCw className={`mr-2 h-4 w-4 ${requestsLoading ? 'animate-spin' : ''}`} />
+          <RefreshCw className={`mr-1.5 h-3.5 w-3.5 ${requestsLoading ? 'animate-spin' : ''}`} />
           {t('proxy.advanced.replay.refresh')}
         </Button>
       </div>
 
       {/* Requests List */}
-      <Card>
+      <div className="overflow-hidden rounded-xl border border-white/[0.06] bg-card">
-        <CardHeader>
+        <div className="border-b border-white/[0.06] px-5 py-4 space-y-1">
-          <CardTitle>{t('proxy.advanced.replay.recentRequests')}</CardTitle>
+          <h4 className="text-[13px] font-semibold">{t('proxy.advanced.replay.recentRequests')}</h4>
-          <CardDescription>{t('proxy.advanced.replay.clickToReplay')}</CardDescription>
+          <p className="text-xs text-muted-foreground">{t('proxy.advanced.replay.clickToReplay')}</p>
-        </CardHeader>
+        </div>
-        <CardContent>
+        <div className="p-5">
           {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">
+            <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-white/[0.1]">
-              <Clock className="h-8 w-8 text-muted-foreground" />
+              <Clock className="h-6 w-6 text-muted-foreground/30" />
-              <p className="text-sm text-muted-foreground">
+              <p className="text-[13px] text-muted-foreground">
                 {t('proxy.advanced.replay.noRequests')}
               </p>
             </div>
@@ -135,12 +135,12 @@ export const ReplayTab: React.FC = () => {
               {requests.map((request) => (
                 <div
                   key={request.id}
-                  className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50"
+                  className="flex items-center justify-between rounded-xl border border-white/[0.06] p-3 transition-colors hover:bg-white/[0.02]"
                 >
                   <div className="flex items-center gap-3">
                     {getStatusBadge(request.status)}
                     <div className="flex flex-col">
-                      <span className="text-sm font-medium">
+                      <span className="text-[13px] font-medium">
                         {request.method} {request.endpoint}
                       </span>
                       <span className="text-xs text-muted-foreground">
@@ -166,8 +166,8 @@ export const ReplayTab: React.FC = () => {
               ))}
             </div>
           )}
-        </CardContent>
+        </div>
-      </Card>
+      </div>
     </div>
   );
 };

src/components/proxy/advanced/ToolsTab.tsx

@@ -2,9 +2,8 @@ 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 { Badge } from '@/components/ui/badge';
 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';
@@ -88,12 +87,12 @@ export const ToolsTab: React.FC = () => {
       </div>
 
       {/* IDE Quick Setup */}
-      <Card>
+      <div className="overflow-hidden rounded-xl border border-white/[0.06] bg-card">
-        <CardHeader>
+        <div className="border-b border-white/[0.06] px-5 py-4 space-y-1">
-          <CardTitle>{t('proxy.advanced.tools.ideSetup')}</CardTitle>
+          <h4 className="text-[13px] font-semibold">{t('proxy.advanced.tools.ideSetup')}</h4>
-          <CardDescription>Quick configuration for popular IDEs</CardDescription>
+          <p className="text-xs text-muted-foreground">Quick configuration for popular IDEs</p>
-        </CardHeader>
+        </div>
-        <CardContent className="space-y-3">
+        <div className="p-5 space-y-3">
           {isIdeLoading ? (
             <div className="flex h-20 items-center justify-center">
               <Loader2 className="h-5 w-5 animate-spin" />
@@ -102,11 +101,11 @@ export const ToolsTab: React.FC = () => {
             IDE_CONFIGS.map(({ key, label, icon: Icon }) => {
               const instructions = getIdeInstructions(key);
               return (
-                <div key={key} className="rounded-lg border">
+                <div key={key} className="overflow-hidden rounded-xl border border-white/[0.06]">
                   <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>
+                      <span className="text-[13px] font-medium">{label}</span>
                     </div>
                     <Button
                       variant="ghost"
@@ -119,7 +118,7 @@ export const ToolsTab: React.FC = () => {
                     </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">
+                    <pre className="overflow-x-auto border-t border-white/[0.06] bg-card p-3 font-mono text-xs whitespace-pre-wrap text-foreground/90">
                       {instructions}
                     </pre>
                   )}
@@ -127,8 +126,8 @@ export const ToolsTab: React.FC = () => {
               );
             })
           )}
-        </CardContent>
+        </div>
-      </Card>
+      </div>
 
     </div>
   );

src/components/proxy/advanced/TrafficLogTable.tsx

@@ -1,7 +1,7 @@
 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 {
@@ -22,6 +22,15 @@ interface TrafficLogTableProps {
 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');
@@ -64,77 +73,68 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
     });
   }, [logs, sortKey, sortDir]);
 
-  const SortIcon = ({ column }: { column: SortKey }) => {
-    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" />
-    );
-  };
-
   return (
-    <Card>
+    <div className="overflow-hidden rounded-xl border border-white/[0.06] bg-card">
-      <CardHeader>
+      <div className="border-b border-white/[0.06] px-5 py-4">
-        <CardTitle className="text-sm font-semibold">
+        <h4 className="text-[13px] font-semibold">
           {t('proxy.advanced.trafficLog.title')}
-        </CardTitle>
+        </h4>
-      </CardHeader>
+      </div>
-      <CardContent>
+      <div className="p-5">
         {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">
+          <div className="py-8 text-center text-[13px] 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">
+                <tr className="border-b border-white/[0.06] text-left text-[10px] font-medium tracking-wider uppercase 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" />
+                    <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" />
+                    <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" />
+                    <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" />
+                    <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" />
+                    <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" />
+                    <SortIcon column="duration" sortKey={sortKey} sortDir={sortDir} />
                   </th>
                 </tr>
               </thead>
@@ -142,7 +142,7 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
                 {sortedLogs.map((log, i) => (
                   <tr
                     key={`${log.requestId}-${i}`}
-                    className="border-b border-border/40 last:border-0"
+                    className="border-b border-white/[0.04] last:border-0"
                   >
                     <td className="py-2 pr-4 font-mono text-xs text-muted-foreground">
                       {new Date(log.timestamp).toLocaleTimeString()}
@@ -184,7 +184,7 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
             </table>
           </div>
         )}
-      </CardContent>
+      </div>
-    </Card>
+    </div>
   );
 };

src/components/ui/badge.tsx

@@ -1,18 +1,16 @@
 import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
 
 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',
+  'inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring/30',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        default: 'bg-accent/15 text-accent border border-accent/20',
-        secondary:
+        secondary: 'bg-secondary text-secondary-foreground border border-white/[0.06]',
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive: 'bg-destructive/15 text-red-400 border border-destructive/20',
-        destructive:
+        outline: 'border border-white/[0.1] text-muted-foreground',
-          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
       },
     },
     defaultVariants: {
@@ -21,10 +19,11 @@ const badgeVariants = cva(
   },
 );
 
-export interface BadgeProps
+function Badge({
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+  className,
-
+  variant,
-function Badge({ className, variant, ...props }: BadgeProps) {
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>) {
   return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 

src/components/ui/button.tsx

@@ -5,24 +5,27 @@ 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",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-[13px] font-medium transition-all duration-200 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:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.98]',
         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',
+          'bg-destructive/90 text-white hover:bg-destructive active:scale-[0.98] focus-visible:ring-destructive/30',
         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',
+          'border border-white/[0.08] bg-transparent hover:bg-white/[0.04] hover:border-white/[0.12] text-foreground',
-        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        secondary:
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:scale-[0.98]',
-        link: 'text-primary underline-offset-4 hover:underline',
+        ghost:
+          'hover:bg-white/[0.06] text-muted-foreground hover:text-foreground',
+        link: 'text-accent underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        sm: 'h-8 rounded-md gap-1.5 px-3 text-xs',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        lg: 'h-10 rounded-lg px-6',
-        icon: 'size-9',
+        icon: 'size-8 rounded-lg',
       },
     },
     defaultVariants: {

src/components/ui/card.tsx

@@ -5,7 +5,10 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('bg-card text-card-foreground rounded-xl border shadow', className)}
+      className={cn(
+        'bg-card text-card-foreground rounded-xl border border-white/[0.06] shadow-sm transition-colors duration-200',
+        className,
+      )}
       {...props}
     />
   ),
@@ -23,7 +26,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
   ({ className, ...props }, ref) => (
     <h3
       ref={ref}
-      className={cn('leading-none font-semibold tracking-tight', className)}
+      className={cn('text-sm font-semibold leading-none tracking-tight', className)}
       {...props}
     />
   ),
@@ -34,7 +37,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  <p ref={ref} className={cn('text-muted-foreground text-[13px]', className)} {...props} />
 ));
 CardDescription.displayName = 'CardDescription';
 

src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <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',
+      'peer h-4 w-4 shrink-0 rounded-[4px] border border-white/[0.15] bg-transparent ring-offset-background transition-colors focus-visible:ring-2 focus-visible:ring-accent/30 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-background',
       className,
     )}
     {...props}

src/components/ui/dialog.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Cross2Icon } from '@radix-ui/react-icons';
+import { X } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 
@@ -19,7 +19,8 @@ const DialogOverlay = React.forwardRef<
   <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',
+      'fixed inset-0 z-50 bg-black/60 backdrop-blur-sm',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
@@ -36,14 +37,18 @@ const DialogContent = React.forwardRef<
     <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',
+        'fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]',
+        'gap-4 rounded-xl border border-white/[0.08] bg-card p-6 shadow-2xl shadow-black/30',
+        'duration-200',
+        '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%]',
         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">
+      <DialogPrimitive.Close className="absolute top-4 right-4 flex h-6 w-6 items-center justify-center rounded-md opacity-50 transition-all hover:bg-white/[0.06] hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring/30 disabled:pointer-events-none">
-        <Cross2Icon className="h-4 w-4" />
+        <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
@@ -70,7 +75,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg leading-none font-semibold tracking-tight', className)}
+    className={cn('text-base leading-none font-semibold tracking-tight', className)}
     {...props}
   />
 ));
@@ -82,7 +87,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-muted-foreground text-[13px]', className)}
     {...props}
   />
 ));

src/components/ui/dropdown-menu.tsx

@@ -20,7 +20,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <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',
+      'flex cursor-default items-center rounded-md px-2 py-1.5 text-[13px] outline-none select-none transition-colors focus:bg-white/[0.06] data-[state=open]:bg-white/[0.06]',
       inset && 'pl-8',
       className,
     )}
@@ -39,7 +39,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <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',
+      '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-lg border border-white/[0.08] p-1 shadow-xl shadow-black/20',
       className,
     )}
     {...props}
@@ -72,7 +72,7 @@ const DropdownMenuContent = React.forwardRef<
         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',
+          '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-lg border border-white/[0.08] p-1 shadow-xl shadow-black/20',
           '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,
         )}
@@ -92,7 +92,7 @@ const DropdownMenuItem = React.forwardRef<
   <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',
+      'relative flex cursor-default items-center rounded-md px-2 py-1.5 text-[13px] transition-colors outline-none select-none focus:bg-white/[0.06] focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className,
     )}
@@ -108,7 +108,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <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',
+      'relative flex cursor-default items-center rounded-md py-1.5 pr-2 pl-8 text-[13px] transition-colors outline-none select-none focus:bg-white/[0.06] focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     checked={checked}
@@ -131,7 +131,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <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',
+      'relative flex cursor-default items-center rounded-md py-1.5 pr-2 pl-8 text-[13px] transition-colors outline-none select-none focus:bg-white/[0.06] focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     {...props}
@@ -154,7 +154,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    className={cn('px-2 py-1.5 text-xs font-medium text-muted-foreground', inset && 'pl-8', className)}
     {...props}
   />
 ));
@@ -166,7 +166,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    className={cn('-mx-1 my-1 h-px bg-white/[0.06]', className)}
     {...props}
   />
 ));

src/components/ui/input.tsx

@@ -1,15 +1,18 @@
 import * as React from 'react';
+
 import { cn } from '@/lib/utils';
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
-
-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',
+          'flex h-9 w-full rounded-lg border border-white/[0.08] bg-muted/50 px-3 py-1 text-[13px] text-foreground shadow-none transition-colors duration-200',
+          'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+          'placeholder:text-muted-foreground',
+          'focus-visible:outline-none focus-visible:border-accent/50 focus-visible:ring-1 focus-visible:ring-accent/20',
+          'disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

src/components/ui/label.tsx

@@ -4,7 +4,7 @@ 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',
+  'text-[13px] font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 );
 
 const Label = React.forwardRef<

src/components/ui/select.tsx

@@ -19,14 +19,18 @@ const SelectTrigger = React.forwardRef<
   <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',
+      'flex h-9 w-full items-center justify-between rounded-lg border border-white/[0.08] bg-muted/50 px-3 py-2 text-[13px] text-foreground transition-colors duration-200',
+      'placeholder:text-muted-foreground',
+      'focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/20',
+      '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" />
+      <ChevronDown className="h-3.5 w-3.5 opacity-40" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -41,7 +45,7 @@ const SelectScrollUpButton = React.forwardRef<
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <ChevronUp className="h-3.5 w-3.5" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -55,7 +59,7 @@ const SelectScrollDownButton = React.forwardRef<
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <ChevronDown className="h-3.5 w-3.5" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -68,7 +72,9 @@ const SelectContent = React.forwardRef<
     <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',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-white/[0.08] bg-popover text-popover-foreground shadow-xl shadow-black/20',
+        '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',
         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,
@@ -98,7 +104,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn('py-1.5 pr-2 pl-8 text-sm font-semibold', className)}
+    className={cn('py-1.5 pr-2 pl-8 text-xs font-medium text-muted-foreground', className)}
     {...props}
   />
 ));
@@ -111,14 +117,16 @@ const SelectItem = React.forwardRef<
   <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',
+      'relative flex w-full cursor-default items-center rounded-md py-1.5 pr-2 pl-8 text-[13px] outline-none select-none transition-colors',
+      'focus:bg-white/[0.06] focus:text-foreground',
+      '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" />
+        <Check className="h-3.5 w-3.5 text-accent" />
       </SelectPrimitive.ItemIndicator>
     </span>
 
@@ -133,7 +141,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    className={cn('-mx-1 my-1 h-px bg-white/[0.06]', className)}
     {...props}
   />
 ));

src/components/ui/skeleton.tsx

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

src/components/ui/switch.tsx

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

src/components/ui/tabs.tsx

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
+      'bg-muted/40 text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1 border border-white/[0.04]',
       className,
     )}
     {...props}
@@ -26,7 +26,11 @@ const TabsTrigger = React.forwardRef<
   <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',
+      'inline-flex items-center justify-center rounded-md px-3 py-1 text-[13px] font-medium whitespace-nowrap transition-all duration-200',
+      'text-muted-foreground hover:text-foreground',
+      'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm data-[state=active]:border data-[state=active]:border-white/[0.08]',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30',
+      'disabled:pointer-events-none disabled:opacity-50',
       className,
     )}
     {...props}
@@ -41,7 +45,7 @@ const TabsContent = React.forwardRef<
   <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',
+      'mt-3 animate-in focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30',
       className,
     )}
     {...props}

src/components/ui/tooltip.tsx

@@ -17,7 +17,10 @@ const TooltipContent = React.forwardRef<
     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',
+      'z-50 overflow-hidden rounded-lg border border-white/[0.08] bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-lg shadow-black/20',
+      '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',
       className,
     )}
     {...props}

src/components/usage/ChartCard.tsx

@@ -1,5 +1,4 @@
 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';
@@ -30,20 +29,22 @@ export const ChartCard: React.FC<ChartStatesProps> = ({
   children,
 }) => {
   return (
-    <Card className="border-border/60 bg-card/60 flex flex-col">
+    <div className="flex flex-col rounded-xl border border-white/[0.06] bg-card">
-      <CardContent className="flex flex-1 flex-col p-4">
+      <div className="flex flex-col p-5">
-        <div className="mb-3 flex items-center justify-between">
+        <div className="mb-4 flex items-center justify-between">
-          <h3 className="text-foreground text-sm font-semibold tracking-tight">{title}</h3>
+          <h3 className="text-[13px] font-semibold tracking-tight text-foreground">{title}</h3>
         </div>
         <div className="flex-1">
           {isLoading ? (
             <div className="flex h-[280px] flex-col gap-3">
-              <Skeleton className="h-full w-full" />
+              <Skeleton className="h-full w-full rounded-lg" />
             </div>
           ) : error ? (
             <div className="flex h-[280px] flex-col items-center justify-center gap-3">
-              <AlertTriangle className="text-destructive h-5 w-5" />
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-destructive/10">
-              <p className="text-muted-foreground text-sm">{errorMessage}</p>
+                <AlertTriangle className="h-5 w-5 text-destructive" />
+              </div>
+              <p className="text-muted-foreground text-[13px]">{errorMessage}</p>
               <Button variant="outline" size="sm" onClick={onRetry}>
                 <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
                 {retryLabel}
@@ -51,8 +52,10 @@ export const ChartCard: React.FC<ChartStatesProps> = ({
             </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" />
+              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/[0.04]">
-              <p className="text-foreground text-sm font-medium">{emptyTitle}</p>
+                <BarChart3 className="h-5 w-5 text-muted-foreground/60" />
+              </div>
+              <p className="text-[13px] font-medium text-foreground">{emptyTitle}</p>
               <p className="text-muted-foreground max-w-[240px] text-center text-xs">
                 {emptyDescription}
               </p>
@@ -61,7 +64,7 @@ export const ChartCard: React.FC<ChartStatesProps> = ({
             children
           )}
         </div>
-      </CardContent>
+      </div>
-    </Card>
+    </div>
   );
 };

src/components/usage/NivoTooltip.tsx

@@ -1,17 +1,21 @@
-export const COLOR_PROMPT = 'var(--chart-2)';
+/** Premium chart palette — refined for dark mode contrast */
-export const COLOR_COMPLETION = 'var(--chart-1)';
+export const COLOR_PROMPT = '#60a5fa';   // blue-400
-export const COLOR_TOTAL = 'var(--chart-3)';
+export const COLOR_COMPLETION = '#34d399'; // emerald-400
+export const COLOR_TOTAL = '#fbbf24';      // amber-400
+
 export const PIE_COLORS = [
-  'var(--chart-1)',
+  '#60a5fa', '#34d399', '#fbbf24', '#a78bfa', '#f472b6',
-  'var(--chart-2)',
+  '#38bdf8', '#4ade80', '#facc15', '#c084fc',
-  'var(--chart-3)',
-  'var(--chart-4)',
-  'var(--chart-5)',
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
 ];
 
+export const MODEL_COLORS: Record<string, string> = {
+  'gemini-3-flash': '#60a5fa',
+  'gemini-3.1-pro-low': '#818cf8',
+  'gemini-3.1-pro-high': '#a78bfa',
+  'claude-sonnet-4-6-thinking': '#f472b6',
+  'claude-opus-4-6-thinking': '#fb7185',
+};
+
 const colorMap: Record<string, string> = {
   Prompt: COLOR_PROMPT,
   Completion: COLOR_COMPLETION,
@@ -22,7 +26,7 @@ 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">
+    <div className="bg-popover rounded-lg border border-white/[0.06] 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) => (
@@ -44,7 +48,7 @@ export function BarTooltip({ indexValue, data }: any) {
 
 export function PieTooltip({ datum }: any) {
   return (
-    <div className="bg-popover border-border rounded-md border px-3 py-2 shadow-md">
+    <div className="bg-popover rounded-lg border border-white/[0.06] px-3 py-2 shadow-md">
       <div className="flex items-center gap-2 text-xs">
         <span
           className="h-2 w-2 rounded-full"
@@ -58,3 +62,21 @@ export function PieTooltip({ datum }: any) {
     </div>
   );
 }
+
+export function LineTooltip({ point }: any) {
+  return (
+    <div className="bg-popover rounded-lg border border-white/[0.06] px-3 py-2 shadow-md">
+      <p className="text-foreground mb-1 text-xs font-medium">{point.data.xFormatted ?? point.data.x}</p>
+      <div className="flex items-center gap-2 text-xs">
+        <span
+          className="h-2 w-2 rounded-full"
+          style={{ backgroundColor: point.serieColor }}
+        />
+        <span className="text-muted-foreground">{point.serieId}:</span>
+        <span className="text-foreground font-mono font-medium">
+          {typeof point.data.y === 'number' ? point.data.y.toLocaleString() : point.data.y}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/usage/StatCard.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
-import { Card, CardContent } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
 import { cn } from '@/lib/utils';
+import { ArrowUpRight, ArrowDownRight, Minus } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 
+interface TrendInfo {
+  /** Percentage change vs previous period */
+  value: number;
+  direction: 'up' | 'down' | 'neutral';
+}
+
 interface StatCardProps {
   label: string;
   value: number | string;
@@ -11,24 +17,106 @@ interface StatCardProps {
   isLoading?: boolean;
   className?: string;
   accent?: 'blue' | 'green' | 'amber' | 'slate' | 'purple';
+  trend?: TrendInfo;
+  sparkline?: number[];
 }
 
-const ACCENT_MAP = {
+const ACCENT_ICON = {
   blue: 'text-blue-400',
   green: 'text-emerald-400',
   amber: 'text-amber-400',
-  slate: 'text-slate-400',
+  slate: 'text-muted-foreground',
-  purple: 'text-purple-400',
+  purple: 'text-violet-400',
 };
 
-const BG_MAP = {
+const ACCENT_BG = {
-  blue: 'bg-blue-500/5',
+  blue: 'bg-blue-500/8',
-  green: 'bg-emerald-500/5',
+  green: 'bg-emerald-500/8',
-  amber: 'bg-amber-500/5',
+  amber: 'bg-amber-500/8',
-  slate: 'bg-slate-500/5',
+  slate: 'bg-white/[0.04]',
-  purple: 'bg-purple-500/5',
+  purple: 'bg-violet-500/8',
 };
 
+/**
+ * Render a tiny inline SVG sparkline from an array of values.
+ * Normalized to fit within a 60x20 viewBox.
+ */
+function Sparkline({ data, accent }: { data: number[]; accent: string }) {
+  if (data.length < 2) {
+    return null;
+  }
+  const max = Math.max(...data);
+  const min = Math.min(...data);
+  const range = max - min || 1;
+  const w = 60;
+  const h = 20;
+  const pad = 1;
+
+  const points = data.map((v, i) => {
+    const x = (i / (data.length - 1)) * w;
+    const y = h - pad - ((v - min) / range) * (h - pad * 2);
+    return `${x},${y}`;
+  });
+
+  const strokeColor =
+    accent === 'blue'
+      ? '#60a5fa'
+      : accent === 'green'
+        ? '#34d399'
+        : accent === 'amber'
+          ? '#fbbf24'
+          : accent === 'purple'
+            ? '#a78bfa'
+            : '#6b7280';
+
+  return (
+    <svg
+      viewBox={`0 0 ${w} ${h}`}
+      className="h-5 w-[60px] overflow-visible"
+      preserveAspectRatio="none"
+    >
+      <defs>
+        <linearGradient id={`sparkGrad-${accent}`} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={strokeColor} stopOpacity="0.3" />
+          <stop offset="100%" stopColor={strokeColor} stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      {/* Area fill */}
+      <polygon
+        points={`0,${h} ${points.join(' ')} ${w},${h}`}
+        fill={`url(#sparkGrad-${accent})`}
+      />
+      {/* Line */}
+      <polyline
+        points={points.join(' ')}
+        fill="none"
+        stroke={strokeColor}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function TrendBadge({ trend }: { trend: TrendInfo }) {
+  const isUp = trend.direction === 'up';
+  const isNeutral = trend.direction === 'neutral' || trend.value === 0;
+  const Icon = isNeutral ? Minus : isUp ? ArrowUpRight : ArrowDownRight;
+  const color = isNeutral
+    ? 'text-muted-foreground'
+    : isUp
+      ? 'text-emerald-400'
+      : 'text-rose-400';
+
+  return (
+    <div className={cn('flex items-center gap-0.5 text-[10px] font-medium', color)}>
+      <Icon className="h-3 w-3" />
+      <span className="tabular-nums">{Math.abs(trend.value).toFixed(1)}%</span>
+    </div>
+  );
+}
+
 export const StatCard: React.FC<StatCardProps> = ({
   label,
   value,
@@ -36,36 +124,47 @@ export const StatCard: React.FC<StatCardProps> = ({
   isLoading,
   className,
   accent = 'slate',
+  trend,
+  sparkline,
 }) => {
   return (
-    <Card
+    <div
       className={cn(
-        'border-border/60 bg-card/60 hover:bg-card backdrop-blur-none transition-colors',
+        'group relative rounded-xl border border-white/[0.06] bg-card p-4 transition-all duration-200',
+        'hover:border-white/[0.1] hover:bg-white/[0.02]',
         className,
       )}
     >
-      <CardContent className="flex items-center justify-between p-4">
+      <div className="flex items-start justify-between">
-        <div className="flex flex-col gap-1">
+        <div className="flex flex-col gap-1.5">
-          <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+          <span className="text-muted-foreground text-[11px] font-medium tracking-wider uppercase">
             {label}
           </span>
           {isLoading ? (
-            <Skeleton className="h-7 w-24" />
+            <Skeleton className="h-7 w-20" />
           ) : (
-            <span className="text-foreground font-mono text-2xl font-semibold tracking-tight">
+            <div className="flex items-baseline gap-2">
+              <span className="text-foreground font-mono text-xl font-semibold tracking-tight tabular-nums">
                 {typeof value === 'number' ? value.toLocaleString() : value}
               </span>
+              {trend && <TrendBadge trend={trend} />}
+            </div>
           )}
         </div>
+        <div className="flex flex-col items-end gap-2">
           <div
             className={cn(
-            'flex h-9 w-9 shrink-0 items-center justify-center rounded-md',
+              'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg',
-            BG_MAP[accent],
+              ACCENT_BG[accent],
             )}
           >
-          <Icon className={cn('h-4 w-4', ACCENT_MAP[accent])} />
+            <Icon className={cn('h-4 w-4', ACCENT_ICON[accent])} />
+          </div>
+          {sparkline && sparkline.length >= 2 && !isLoading && (
+            <Sparkline data={sparkline} accent={accent} />
+          )}
+        </div>
+      </div>
     </div>
-      </CardContent>
-    </Card>
   );
 };

src/hooks/useCloudAccounts.ts

@@ -151,7 +151,7 @@ export function useSetAccountProxy() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
     },
-    onError: (error: any) => {
+    onError: (error: unknown) => {
       console.error('[Mutation] setAccountProxy failed:', error);
     },
   });
@@ -176,7 +176,7 @@ export function useImportCloudAccounts() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: QUERY_KEYS.cloudAccounts });
     },
-    onError: (error: any) => {
+    onError: (error: unknown) => {
       console.error('[Mutation] importCloudAccounts failed:', error);
     },
   });

src/ipc/cloud/handler.ts

@@ -393,8 +393,8 @@ export async function refreshAccountQuota(accountId: string): Promise<CloudAccou
     await clearAccountStatus(account);
     notifyTrayUpdate(account);
     return account;
-  } catch (error: any) {
+  } catch (error: unknown) {
-    if (error.message === 'UNAUTHORIZED') {
+    if (extractErrorMessage(error) === 'UNAUTHORIZED') {
       logger.warn(`Got 401 Unauthorized for ${account.email}, forcing token refresh...`);
       try {
         const newTokenData = await GoogleAPIService.refreshAccessToken(
@@ -462,7 +462,7 @@ export async function refreshAccountQuota(accountId: string): Promise<CloudAccou
         await markAccountStatusFromError(account, refreshError);
         throw refreshError;
       }
-    } else if (error.message === 'FORBIDDEN') {
+    } else if (extractErrorMessage(error) === 'FORBIDDEN') {
       logger.warn(
         `Got 403 Forbidden for ${account.email}, marking as rate limited (if implemented) or just ignoring.`,
       );
@@ -574,9 +574,9 @@ export async function switchCloudAccount(accountId: string): Promise<void> {
           notifyTrayUpdate(account);
         },
       });
-    } catch (err: any) {
+    } catch (err: unknown) {
       logger.error('Failed to switch cloud account', err);
-      throw new Error(`Switch failed: ${err.message || 'Unknown error'}`);
+      throw new Error(`Switch failed: ${extractErrorMessage(err) || 'Unknown error'}`);
     }
   });
 }
@@ -685,7 +685,7 @@ export async function setAutoSwitchEnabled(enabled: boolean): Promise<void> {
   // Trigger an immediate check if enabled
   if (enabled) {
     const { CloudMonitorService } = await import('../../services/CloudMonitorService');
-    CloudMonitorService.poll().catch((err: any) =>
+      CloudMonitorService.poll().catch((err: unknown) =>
       logger.error('Failed to poll after enabling auto-switch', err),
     );
   }
@@ -834,8 +834,8 @@ export async function importCloudAccounts(
         await CloudAccountRepo.addAccount(newAccount);
         result.imported++;
       }
-    } catch (error: any) {
+    } catch (error: unknown) {
-      result.errors.push(`Failed to import ${acc.email}: ${error.message}`);
+      result.errors.push(`Failed to import ${acc.email}: ${extractErrorMessage(error)}`);
     }
   }
 

src/ipc/cloud/router.ts

@@ -192,8 +192,8 @@ export const cloudRouter = os.router({
     .handler(async ({ input }) => {
       try {
         await CloudAccountRepo.setAccountProxy(input.accountId, input.proxyUrl);
-      } catch (error: any) {
+      } catch (error: unknown) {
-        logger.error('[ORPC] setAccountProxy error:', error.message, error.stack);
+        logger.error('[ORPC] setAccountProxy error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
         throw error;
       }
     }),
@@ -203,8 +203,8 @@ export const cloudRouter = os.router({
       const result = await CloudAccountRepo.syncFromIDE();
 
       return result;
-    } catch (error: any) {
+    } catch (error: unknown) {
-      logger.error('[ORPC] syncLocalAccount error:', error.message, error.stack);
+      logger.error('[ORPC] syncLocalAccount error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
       throw toSyncLocalAccountORPCError(error);
     }
   }),
@@ -273,8 +273,8 @@ export const cloudRouter = os.router({
     .handler(async ({ input }) => {
       try {
         return await exportCloudAccounts(input.stripTokens);
-      } catch (error: any) {
+      } catch (error: unknown) {
-        logger.error('[ORPC] exportCloudAccounts error:', error.message, error.stack);
+        logger.error('[ORPC] exportCloudAccounts error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
         throw error;
       }
     }),
@@ -297,8 +297,8 @@ export const cloudRouter = os.router({
     .handler(async ({ input }) => {
       try {
         return await importCloudAccounts(input.jsonContent, input.strategy);
-      } catch (error: any) {
+      } catch (error: unknown) {
-        logger.error('[ORPC] importCloudAccounts error:', error.message, error.stack);
+        logger.error('[ORPC] importCloudAccounts error:', extractErrorMessage(error), error instanceof Error ? error.stack : undefined);
         throw error;
       }
     }),

src/ipc/database/cloudHandler.ts

@@ -153,6 +153,10 @@ export function ensureDatabaseInitialized(dbPath: string): void {
     if (!hasRequestType) {
       db.exec('ALTER TABLE token_usage ADD COLUMN request_type TEXT');
     }
+    const hasIsEstimated = tokenUsageTableInfo.some((col) => col.name === 'is_estimated');
+    if (!hasIsEstimated) {
+      db.exec('ALTER TABLE token_usage ADD COLUMN is_estimated INTEGER');
+    }
 
     // Create indexes for token_usage
     db.exec(`CREATE INDEX IF NOT EXISTS idx_token_usage_account ON token_usage(account_id);`);

src/ipc/process/handler.ts

@@ -1,70 +1,10 @@
-import { exec, execSync, spawn } from 'child_process';
-import { promisify } from 'util';
-import findProcess, { ProcessInfo } from 'find-process';
-import { isNumber } from 'lodash-es';
-import { getGeminiNexusExecutablePath, isWsl } from '../../utils/paths';
 import { logger } from '../../utils/logger';
-
+import {
-const execAsync = promisify(exec);
+  bootstrapNestServer,
-const PROCESS_STARTUP_TIMEOUT_MS = 6000;
+  isNestServerRunning,
-const PROCESS_STARTUP_POLL_INTERVAL_MS = 200;
+  stopNestServer,
-const LINUX_GPU_SAFE_LAUNCH_ARGS = ['--disable-gpu', '--disable-gpu-compositing'] as const;
+} from '../../server/main';
-
+import { ConfigManager } from '../config/manager';
-/**
- * Helper process name patterns to exclude (Electron helper processes)
- */
-const HELPER_PATTERNS = [
-  'helper',
-  'plugin',
-  'renderer',
-  'gpu',
-  'crashpad',
-  'utility',
-  'audio',
-  'sandbox',
-  'language_server',
-];
-
-/**
- * Check if a process is a helper/auxiliary process that should be excluded.
- * @param name Process name (lowercase)
- * @param cmd Process command line (lowercase)
- * @returns True if the process is a helper process
- */
-function isHelperProcess(name: string, cmd: string): boolean {
-  const nameLower = name.toLowerCase();
-  const cmdLower = cmd.toLowerCase();
-
-  // Check for --type= argument (Electron helper process indicator)
-  if (cmdLower.includes('--type=')) {
-    return true;
-  }
-
-  // Check for helper patterns in process name
-  for (const pattern of HELPER_PATTERNS) {
-    if (nameLower.includes(pattern)) {
-      return true;
-    }
-  }
-
-  // Check for crashpad in path
-  if (cmdLower.includes('crashpad')) {
-    return true;
-  }
-
-  return false;
-}
-
-function isPgrepNoMatchError(error: unknown): boolean {
-  if (!(error instanceof Error)) {
-    return false;
-  }
-
-  const message = error.message.toLowerCase();
-  const hasPgrep = message.includes('pgrep') && message.includes('geminiNexus');
-  const code = (error as { code?: number }).code;
-  return hasPgrep && code === 1;
-}
 
 /**
  * Checks if the Gemini Nexus process is running.
@@ -72,122 +12,8 @@ function isPgrepNoMatchError(error: unknown): boolean {
  * @returns {boolean} True if the Gemini Nexus process is running, false otherwise.
  */
 export async function isProcessRunning(): Promise<boolean> {
-  try {
+  // Check the embedded NestJS proxy server status instead of an external process
-    const platform = process.platform;
+  return isNestServerRunning();
-    const currentPid = process.pid;
-
-    // Use find-process to search for Gemini Nexus processes
-    const allMatches: ProcessInfo[] = [];
-    const searchNames = ['Gemini Nexus', 'geminiNexus'];
-    if (platform === 'linux') {
-      searchNames.push('electron');
-    }
-    let sawNoMatch = false;
-
-    for (const searchName of searchNames) {
-      try {
-        const matches = await findProcess('name', searchName, false);
-        allMatches.push(...matches);
-      } catch (error) {
-        if (isPgrepNoMatchError(error)) {
-          sawNoMatch = true;
-          continue;
-        }
-        throw error;
-      }
-    }
-
-    const processMap = new Map<number, ProcessInfo>();
-    for (const proc of allMatches) {
-      if (isNumber(proc.pid)) {
-        processMap.set(proc.pid, proc);
-      }
-    }
-
-    const processes = Array.from(processMap.values());
-    if (processes.length === 0 && sawNoMatch) {
-      logger.debug('No Gemini Nexus process found (pgrep returned 1)');
-    }
-
-    logger.debug(`Found ${processes.length} processes matching 'GeminiNexus/geminiNexus'`);
-
-    for (const proc of processes) {
-      // Skip self
-      if (proc.pid === currentPid) {
-        continue;
-      }
-
-      const name = proc.name?.toLowerCase() || '';
-      const cmd = proc.cmd?.toLowerCase() || '';
-
-      // Skip manager process
-      if (name.includes('manager') || cmd.includes('manager') || cmd.includes('gemini-nexus')) {
-        continue;
-      }
-
-      // Skip helper processes
-      if (isHelperProcess(name, cmd)) {
-        continue;
-      }
-
-      if (platform === 'darwin') {
-        // macOS: Check for Gemini Nexus.app in path
-        if (cmd.includes('gemininexus.app')) {
-          logger.debug(
-            `Found Gemini Nexus process: PID=${proc.pid}, name=${name}, cmd=${cmd.substring(0, 100)}`,
-          );
-          return true;
-        }
-        // Also check if the process name is exactly 'gemininexus' (main process)
-        if (name === 'gemininexus' && !isHelperProcess(name, cmd)) {
-          logger.debug(`Found Gemini Nexus process: PID=${proc.pid}, name=${name}`);
-          return true;
-        }
-      } else if (platform === 'win32') {
-        // Windows: Check for gemininexus.exe
-        if (name === 'gemininexus.exe' || name === 'gemininexus') {
-          logger.debug(`Found Gemini Nexus process: PID=${proc.pid}, name=${name}`);
-          return true;
-        }
-      } else {
-        const nameLower = name.toLowerCase();
-        const cmdLower = cmd.toLowerCase();
-
-        if (nameLower === 'electron') {
-          // Stricter check for AUR/Electron wrapper:
-          // Must include gemininexus in command line but NOT manager or tools
-          const isGeminiNexusApp =
-            (cmdLower.includes('/gemininexus') ||
-              cmdLower.includes(' gemininexus') ||
-              cmdLower.endsWith('gemininexus')) &&
-            !cmdLower.includes('manager') &&
-            !cmdLower.includes('tools');
-
-          if (isGeminiNexusApp) {
-            logger.debug(
-              `Found Gemini Nexus (AUR/electron) process: PID=${proc.pid}, name=${name}, cmd=${cmd.substring(0, 100)}`,
-            );
-            return true;
-          }
-        }
-
-        if (
-          (name.includes('gemininexus') || cmd.includes('/gemininexus')) &&
-          !name.includes('tools')
-        ) {
-          logger.debug(
-            `Found Gemini Nexus process: PID=${proc.pid}, name=${name}, cmd=${cmd.substring(0, 100)}`,
-          );
-          return true;
-        }
-      }
-    }
-
-    return false;
-  } catch (error) {
-    logger.error('Error checking process status with find-process:', error);
-    return false;
-  }
 }
 
 /**
@@ -195,290 +21,26 @@ export async function isProcessRunning(): Promise<boolean> {
  * @returns {boolean} True if the Gemini Nexus process is running, false otherwise.
  */
 export async function closeGeminiNexus(): Promise<void> {
-  logger.info('Closing Gemini Nexus...');
+  logger.info('Stopping Gemini Nexus proxy server...');
-  const platform = process.platform;
+  await stopNestServer();
-
-  try {
-    // Stage 1: Graceful Shutdown (Platform specific)
-    if (platform === 'darwin') {
-      // macOS: Use AppleScript to quit gracefully
-      try {
-        logger.info('Attempting graceful exit via AppleScript...');
-        execSync('osascript -e \'tell application "Gemini Nexus" to quit\'', {
-          stdio: 'ignore',
-          timeout: 3000,
-        });
-        // Wait for a moment
-        await new Promise((resolve) => setTimeout(resolve, 2000));
-      } catch {
-        logger.warn('AppleScript exit failed, proceeding to next stage');
-      }
-    } else if (platform === 'win32') {
-      // Windows: Use taskkill /IM (without /F) for graceful close
-      try {
-        logger.info('Attempting graceful exit via taskkill...');
-        // /T = Tree (child processes), /IM = Image Name
-        // We do not wait long here.
-        execSync('taskkill /IM "GeminiNexus.exe" /T', {
-          stdio: 'ignore',
-          timeout: 2000,
-        });
-        await new Promise((resolve) => setTimeout(resolve, 1000));
-      } catch {
-        // Ignore failure, we play hard next.
-      }
 }
 
-    // Stage 2 & 3: Find and Kill remaining processes
-    // We use a more aggressive approach here but try to avoid killing ourselves
-    const currentPid = process.pid;
 
-    // Helper to list processes
-    const getProcesses = (): { pid: number; name: string; cmd: string }[] => {
-      try {
-        let output = '';
-        if (platform === 'win32') {
-          const psCommand = (cmdlet: string) =>
-            `powershell -NoProfile -Command "${cmdlet} Win32_Process -Filter \\"Name like 'GeminiNexus%'\\" | Select-Object ProcessId, Name, CommandLine | ConvertTo-Csv -NoTypeInformation"`;
-
-          try {
-            output = execSync(psCommand('Get-CimInstance'), {
-              encoding: 'utf-8',
-              maxBuffer: 1024 * 1024 * 10,
-              stdio: ['pipe', 'pipe', 'ignore'],
-            });
-          } catch (e) {
-            // CIM failed (likely older OS), try WMI
-            try {
-              output = execSync(psCommand('Get-WmiObject'), {
-                encoding: 'utf-8',
-                maxBuffer: 1024 * 1024 * 10,
-              });
-            } catch (innerE) {
-              // Both failed, throw original or log? Throwing lets the outer catch handle it (returning empty list)
-              throw e;
-            }
-          }
-        } else {
-          // Unix/Linux/macOS
-          output = execSync('ps -A -o pid,comm,args', {
-            encoding: 'utf-8',
-            maxBuffer: 1024 * 1024 * 10,
-          });
-        }
-
-        const processList: { pid: number; name: string; cmd: string }[] = [];
-
-        if (platform === 'win32') {
-          // Parse CSV Output
-          const lines = output.trim().split(/\r?\n/);
-          // First line is headers "ProcessId","Name","CommandLine"
-          // We start from index 1
-          for (let i = 1; i < lines.length; i++) {
-            const line = lines[i];
-            if (!line) {
-              continue;
-            }
-
-            // Regex to match CSV fields: "val1","val2","val3"
-            const match = line.match(/^"(\d+)","(.*?)","(.*?)"$/);
-
-            if (match) {
-              const pid = parseInt(match[1]);
-              const name = match[2];
-              const cmdLine = match[3];
-
-              processList.push({ pid, name, cmd: cmdLine || name });
-            }
-          }
-        } else {
-          const lines = output.split('\n');
-          for (const line of lines) {
-            const parts = line.trim().split(/\s+/);
-            if (parts.length < 2) continue;
-
-            const pid = parseInt(parts[0]);
-            if (isNaN(pid)) continue;
-            const rest = parts.slice(1).join(' ');
-            if (rest.includes('Gemini Nexus') || rest.includes('geminiNexus')) {
-              processList.push({ pid, name: parts[1], cmd: rest });
-            }
-          }
-        }
-        return processList;
-      } catch (e) {
-        logger.error('Failed to list processes', e);
-        return [];
-      }
-    };
-
-    const targetProcessList = getProcesses().filter((p) => {
-      // Exclude self
-      if (p.pid === currentPid) {
-        return false;
-      }
-      // Exclude this electron app (if named Gemini Nexus or gemini-nexus)
-      if (p.cmd.includes('Gemini Nexus') || p.cmd.includes('gemini-nexus')) {
-        return false;
-      }
-      // Match Gemini Nexus (but not manager)
-      if (platform === 'win32') {
-        return (
-          p.cmd.includes('GeminiNexus.exe') ||
-          (p.cmd.includes('geminiNexus') && !p.cmd.includes('manager'))
-        );
-      } else {
-        // Explicit !manager check for Linux/macOS to be defensive
-        return (
-          (p.cmd.includes('Gemini Nexus') || p.cmd.includes('geminiNexus')) &&
-          !p.cmd.includes('manager')
-        );
-      }
-    });
-
-    if (targetProcessList.length === 0) {
-      logger.info('No Gemini Nexus processes found running.');
-      return;
-    }
-
-    logger.info(`Found ${targetProcessList.length} remaining Gemini Nexus processes. Killing...`);
-
-    for (const p of targetProcessList) {
-      try {
-        process.kill(p.pid, 'SIGKILL'); // Force kill as final step
-      } catch {
-        // Ignore if already dead
-      }
-    }
-  } catch (error) {
-    logger.error('Error closing Gemini Nexus', error);
-    // Fallback to simple kill if everything fails
-    try {
-      if (platform === 'win32') {
-        execSync('taskkill /F /IM "GeminiNexus.exe" /T', { stdio: 'ignore' });
-      } else {
-        execSync('pkill -9 -f Gemini Nexus', { stdio: 'ignore' });
-      }
-    } catch {
-      // Ignore
-    }
-  }
-}
 
 /**
  * Waits for the Gemini Nexus process to exit.
- * @param timeoutMs {number} The timeout in milliseconds.
+ * 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(
+export async function _waitForProcessExit(timeoutMs: number): Promise<void> {
-  timeoutMs: number,
+  const start = Date.now();
-  pollInterval = 100, // Make it configurable, but keep fast 100ms default
+  while (isNestServerRunning()) {
-): Promise<void> {
+    if (Date.now() - start > timeoutMs) {
-  const startTime = Date.now();
+      throw new Error('Timeout waiting for Gemini Nexus proxy server to stop');
-  while (Date.now() - startTime < timeoutMs) {
-    if (!(await isProcessRunning())) {
-      return;
     }
-    await new Promise((resolve) => setTimeout(resolve, pollInterval));
+    await new Promise((resolve) => setTimeout(resolve, 100));
   }
-  throw new Error(`Gemini Nexus process did not exit within ${timeoutMs}ms`);
-}
-
-/**
- * Opens a URI protocol.
- * @param uri {string} The URI to open.
- * @returns {Promise<boolean>} True if the URI was opened successfully, false otherwise.
- */
-async function openUri(uri: string): Promise<boolean> {
-  const platform = process.platform;
-  const wsl = isWsl();
-
-  try {
-    if (platform === 'darwin') {
-      // macOS: use open command
-      await execAsync(`open "${uri}"`);
-    } else if (platform === 'win32') {
-      // Windows: use start command
-      await execAsync(`start "" "${uri}"`);
-    } else if (wsl) {
-      // WSL: use cmd.exe to open URI
-      await execAsync(`/mnt/c/Windows/System32/cmd.exe /c start "" "${uri}"`);
-    } else {
-      // Linux: use xdg-open
-      await execAsync(`xdg-open "${uri}"`);
-    }
-    return true;
-  } catch (error) {
-    logger.error('Failed to open URI', error);
-    return false;
-  }
-}
-
-async function waitForGeminiNexusStartup(
-  timeoutMs = PROCESS_STARTUP_TIMEOUT_MS,
-  pollIntervalMs = PROCESS_STARTUP_POLL_INTERVAL_MS,
-): Promise<boolean> {
-  const startedAt = Date.now();
-  while (Date.now() - startedAt < timeoutMs) {
-    if (await isProcessRunning()) {
-      return true;
-    }
-    await new Promise((resolve) => setTimeout(resolve, pollIntervalMs));
-  }
-  return false;
-}
-
-function shouldUseLinuxGpuSafeLaunchArgs(): boolean {
-  if (process.platform !== 'linux' || isWsl()) {
-    return false;
-  }
-
-  const enableLinuxGpuRaw = process.env.ANTIGRAVITY_MANAGER_ENABLE_LINUX_GPU?.trim().toLowerCase();
-  return enableLinuxGpuRaw !== '1' && enableLinuxGpuRaw !== 'true';
-}
-
-async function startGeminiNexusByExecutable(execPath: string): Promise<void> {
-  if (process.platform === 'darwin') {
-    await execAsync(`open -a Gemini Nexus`);
-    return;
-  }
-
-  if (process.platform === 'win32') {
-    if (!execPath) {
-      throw new Error('Unable to locate Gemini Nexus executable path');
-    }
-    // Use start command to detach
-    await execAsync(`start "" "${execPath}"`);
-    return;
-  }
-
-  if (isWsl()) {
-    if (!execPath) {
-      throw new Error('Unable to locate Gemini Nexus executable path');
-    }
-    // In WSL, convert path and use cmd.exe
-    const winPath = execPath
-      .replace(/^\/mnt\/([a-z])\//, (_, drive) => `${drive.toUpperCase()}:\\`)
-      .replace(/\//g, '\\');
-
-    await execAsync(`/mnt/c/Windows/System32/cmd.exe /c start "" "${winPath}"`);
-    return;
-  }
-
-  if (!execPath) {
-    throw new Error('Unable to locate Gemini Nexus executable path');
-  }
-
-  const launchArgs = shouldUseLinuxGpuSafeLaunchArgs() ? [...LINUX_GPU_SAFE_LAUNCH_ARGS] : [];
-  if (launchArgs.length > 0) {
-    logger.info(`Linux launch with GPU-safe args: ${launchArgs.join(' ')}`);
-  }
-
-  const child = spawn(execPath, launchArgs, {
-    detached: true,
-    stdio: 'ignore',
-  });
-  child.unref();
 }
 
 /**
@@ -486,56 +48,18 @@ async function startGeminiNexusByExecutable(execPath: string): Promise<void> {
  * @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> {
+export async function startGeminiNexus(_useUri = true): Promise<void> {
-  logger.info('Starting Gemini Nexus...');
+  logger.info('Starting Gemini Nexus proxy server...');
 
-  if (await isProcessRunning()) {
+  if (isNestServerRunning()) {
-    logger.info('Gemini Nexus is already running');
+    logger.info('Gemini Nexus proxy server is already running');
     return;
   }
 
-  if (useUri) {
+  const config = ConfigManager.loadConfig();
-    logger.info('Using URI protocol to start...');
+  if (config.proxy) {
-    const uri = 'geminiNexus://oauth-success';
+    await bootstrapNestServer(config.proxy);
-
-    if (await openUri(uri)) {
-      logger.info('Gemini Nexus URI launch command sent');
-
-      if (process.platform !== 'linux' || isWsl()) {
-        return;
-      }
-
-      if (await waitForGeminiNexusStartup()) {
-        logger.info('Gemini Nexus process detected after URI launch');
-        return;
-      }
-
-      logger.warn(
-        'URI launch did not keep Gemini Nexus running on Linux. Falling back to executable launch.',
-      );
   } else {
-      logger.warn('URI launch failed, trying executable path...');
+    throw new Error('Proxy configuration not found');
-    }
-  }
-
-  // Fallback to executable path
-  logger.info('Using executable path to start...');
-  const execPath = getGeminiNexusExecutablePath();
-
-  try {
-    await startGeminiNexusByExecutable(execPath);
-    logger.info('Gemini Nexus launch command sent');
-
-    if (process.platform === 'linux' && !isWsl()) {
-      const started = await waitForGeminiNexusStartup();
-      if (!started) {
-        logger.warn(
-          'Gemini Nexus launch command completed, but process startup could not be confirmed on Linux.',
-        );
-      }
-    }
-  } catch (error) {
-    logger.error('Failed to start Gemini Nexus via executable', error);
-    throw error;
   }
 }

src/ipc/proxy-advanced/handler.ts

@@ -1,7 +1,8 @@
 import { logger } from '../../utils/logger';
-import { proxyAdvancedRegistry } from './service-registry';
+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;
@@ -23,6 +24,13 @@ export interface TrafficLogEntryParsed {
   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,
@@ -104,24 +112,13 @@ export async function getParityCounters(): Promise<{
   error?: string;
 }> {
   try {
-    const tokenManager = proxyAdvancedRegistry.tokenManager;
+    const tokenManager = getServiceOrThrow('tokenManager');
-    if (!tokenManager) {
-      return {
-        success: true,
-        data: {
-          totalRequests: 0,
-          matchedRequests: 0,
-          parityViolations: 0,
-          lastUpdated: new Date().toISOString(),
-        },
-      };
-    }
     return {
       success: true,
       data: tokenManager.getParityCounters(),
     };
   } catch (error) {
-    return { success: false, error: error instanceof Error ? error.message : String(error) };
+    return { success: false, error: normalizeServiceError(error) };
   }
 }
 
@@ -131,16 +128,7 @@ export async function getCircuitBreakerStatus(): Promise<{
   error?: string;
 }> {
   try {
-    const tokenManager = proxyAdvancedRegistry.tokenManager;
+    const tokenManager = getServiceOrThrow('tokenManager');
-    if (!tokenManager) {
-      return {
-        success: true,
-        data: {
-          states: {},
-          globalEnabled: true,
-        },
-      };
-    }
 
     const rawStatus = tokenManager.getCircuitBreakerStatus();
     const states: Record<string, { state: string; failures: number; lastFailure: string | null }> = {};
@@ -160,7 +148,7 @@ export async function getCircuitBreakerStatus(): Promise<{
       },
     };
   } catch (error) {
-    return { success: false, error: error instanceof Error ? error.message : String(error) };
+    return { success: false, error: normalizeServiceError(error) };
   }
 }
 
@@ -178,21 +166,7 @@ export async function getProxyMetrics(): Promise<{
   error?: string;
 }> {
   try {
-    const proxyMetrics = proxyAdvancedRegistry.proxyMetrics;
+    const proxyMetrics = getServiceOrThrow('proxyMetrics');
-    if (!proxyMetrics) {
-      return {
-        success: true,
-        data: {
-          uptimeSeconds: 0,
-          totalRequests: 0,
-          activeConnections: 0,
-          avgLatency: 0,
-          errorRate: 0,
-          requestsPerMinute: 0,
-          cacheHitRate: 0,
-        },
-      };
-    }
 
     const metrics = proxyMetrics.getMetrics();
     return {
@@ -209,25 +183,19 @@ export async function getProxyMetrics(): Promise<{
     };
   } catch (error) {
     logger.error('Failed to get proxy metrics', error);
-    return { success: false, error: error instanceof Error ? error.message : String(error) };
+    return { success: false, error: normalizeServiceError(error) };
   }
 }
 
 export async function getRecentRequests(): Promise<{ success: boolean; data?: unknown[]; error?: string }> {
   try {
-    const proxyReplay = proxyAdvancedRegistry.proxyReplay;
+    const proxyReplay = getServiceOrThrow('proxyReplay');
-    if (!proxyReplay) {
-      return {
-        success: true,
-        data: [],
-      };
-    }
     return {
       success: true,
       data: proxyReplay.getRecentRequests(20),
     };
   } catch (error) {
-    return { success: false, error: error instanceof Error ? error.message : String(error) };
+    return { success: false, error: normalizeServiceError(error) };
   }
 }
 
@@ -235,50 +203,77 @@ export async function replayRequest(
   requestId: string,
 ): Promise<{ success: boolean; data?: { original: unknown; newResponse: unknown }; error?: string }> {
   try {
-    const proxyReplay = proxyAdvancedRegistry.proxyReplay;
+    const proxyReplay = getServiceOrThrow('proxyReplay');
-    if (!proxyReplay) {
-      return { success: false, error: 'Replay service not available' };
-    }
     const result = await proxyReplay.replayRequest(requestId);
     return { success: true, data: result };
   } catch (error) {
-    return { success: false, error: error instanceof Error ? error.message : String(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?: { id: string; object: string; capabilities: { vision: boolean; streaming: boolean; jsonMode: boolean; audio: boolean; imageGeneration: boolean } }[];
+  data?: ModelCapabilityEntry[];
   error?: string;
 }> {
   try {
-    const capabilitiesMap: Record<string, { vision: boolean; streaming: boolean; jsonMode: boolean; audio: boolean; imageGeneration: boolean }> = {
+    const accounts = await CloudAccountRepo.getAccounts();
-      'gemini-3-flash': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-      'gemini-3.1-pro-low': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-      'gemini-3.1-pro-high': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-      'claude-sonnet-4-6-thinking': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-      'claude-opus-4-6-thinking': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-    };
 
-    const models = [
+    const modelMap = new Map<string, ModelCapabilityEntry>();
-      { id: 'gemini-3-flash', object: 'model' },
-      { id: 'gemini-3.1-pro-low', object: 'model' },
-      { id: 'gemini-3.1-pro-high', object: 'model' },
-      { id: 'claude-sonnet-4-6-thinking', object: 'model' },
-      { id: 'claude-opus-4-6-thinking', object: 'model' },
-    ];
 
-    const data = models.map((m) => {
+    for (const account of accounts) {
-      const baseId = Object.keys(capabilitiesMap).find((key) => m.id.includes(key)) ?? 'gemini-3-flash';
+      if (!account.quota || !account.quota.models) {
-      return {
+        continue;
-        id: m.id,
+      }
-        object: m.object,
+
-        capabilities: capabilitiesMap[baseId] ?? capabilitiesMap['gemini-3-flash'],
+      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) };
   }
 }
@@ -354,10 +349,7 @@ export async function generateIdeConfig(
   error?: string;
 }> {
   try {
-    const proxyIdeConfig = proxyAdvancedRegistry.proxyIdeConfig;
+    const proxyIdeConfig = getServiceOrThrow('proxyIdeConfig');
-    if (!proxyIdeConfig) {
-      return { success: false, error: 'IDE config service not available' };
-    }
 
     const supportedIdes = ['cursor', 'vscode', 'claude-code', 'jetbrains', 'opencide'] as const;
     const normalizedIde = ide.toLowerCase() as typeof supportedIdes[number];
@@ -375,6 +367,6 @@ export async function generateIdeConfig(
       data: mapIdeConfigResult(result),
     };
   } catch (error) {
-    return { success: false, error: error instanceof Error ? error.message : String(error) };
+    return { success: false, error: normalizeServiceError(error) };
   }
 }

src/ipc/proxy-advanced/router.ts

@@ -130,12 +130,18 @@ const ModelCapabilitiesResponseSchema = z.object({
       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(),
-          audio: z.boolean(),
+          recommended: z.boolean(),
-          imageGeneration: z.boolean(),
+        }),
+        limits: z.object({
+          maxTokens: z.number().optional(),
+          maxOutputTokens: z.number().optional(),
+          thinkingBudget: z.number().optional(),
         }),
       }),
     )

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

@@ -29,3 +29,11 @@ export function registerProxyAdvancedService<K extends keyof ProxyAdvancedRegist
 ): 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/layouts/MainLayout.tsx

@@ -17,6 +17,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { ErrorBoundary } from 'react-error-boundary';
 import { useToast } from '@/components/ui/use-toast';
 import { getLocalizedErrorMessage } from '@/utils/errorMessages';
+import iconPng from '@/assets/icon.png';
 
 export const MainLayout: React.FC = () => {
   const location = useLocation();
@@ -64,14 +65,21 @@ export const MainLayout: React.FC = () => {
         {/* Sidebar */}
         <aside
           className={cn(
-            'bg-muted/10 group relative flex flex-col border-r transition-all duration-300 ease-in-out',
+            'relative flex flex-col border-r border-white/[0.06] transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
-            isCollapsed ? 'w-[70px]' : 'w-64',
+            isCollapsed ? 'w-[60px]' : 'w-56',
           )}
         >
-          <Button
+          {/* Collapse toggle */}
-            variant="ghost"
+          <button
-            size="icon"
+            className={cn(
-            className="bg-background hover:bg-accent hover:text-accent-foreground absolute top-6 -right-3 z-10 h-6 w-6 rounded-full border opacity-0 shadow-md transition-opacity group-hover:opacity-100"
+              'absolute -right-3 top-7 z-10 flex h-6 w-6 items-center justify-center rounded-full',
+              'bg-muted border border-white/[0.1] text-muted-foreground',
+              'opacity-0 transition-all duration-200 hover:bg-white/[0.1] hover:text-foreground',
+              'group-hover:opacity-100',
+            )}
+            style={{ opacity: 0 }}
+            onMouseEnter={(e) => (e.currentTarget.style.opacity = '1')}
+            onMouseLeave={(e) => (e.currentTarget.style.opacity = '0')}
             onClick={() => setIsCollapsed(!isCollapsed)}
           >
             {isCollapsed ? (
@@ -79,13 +87,14 @@ export const MainLayout: React.FC = () => {
             ) : (
               <ChevronLeft className="h-3 w-3" />
             )}
-          </Button>
+          </button>
 
-          <div className={cn('flex flex-col', isCollapsed ? 'items-center p-4' : 'p-6')}>
+          {/* Brand */}
-            <div className="flex items-center gap-2 overflow-hidden whitespace-nowrap">
+          <div className={cn('flex flex-col', isCollapsed ? 'items-center p-3' : 'px-4 py-5')}>
-              <div className="flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded bg-transparent">
+            <div className="flex items-center gap-2.5 overflow-hidden whitespace-nowrap">
+              <div className="flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-transparent">
                 <img
-                  src="/src/assets/icon.png"
+                  src={iconPng}
                   alt="Gemini Nexus Logo"
                   className="h-full w-full object-contain"
                 />
@@ -96,12 +105,13 @@ export const MainLayout: React.FC = () => {
                   isCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100',
                 )}
               >
-                <h1 className="text-xl font-bold tracking-tight">Gemini Nexus</h1>
+                <h1 className="text-[15px] font-semibold tracking-tight">Gemini Nexus</h1>
               </div>
             </div>
           </div>
 
-          <nav className="flex-1 space-y-2 px-2">
+          {/* Navigation */}
+          <nav className="flex-1 space-y-1 px-2 pt-2">
             <TooltipProvider>
               {navItems.map((item) => {
                 const isActive = location.pathname === item.to;
@@ -113,17 +123,19 @@ export const MainLayout: React.FC = () => {
                         <Link
                           to={item.to}
                           className={cn(
-                            'mx-auto flex h-10 w-10 items-center justify-center rounded-md transition-colors',
+                            'mx-auto flex h-9 w-9 items-center justify-center rounded-lg transition-all duration-200',
                             isActive
-                              ? 'bg-primary text-primary-foreground'
+                              ? 'bg-white/[0.08] text-foreground'
-                              : 'hover:bg-muted text-muted-foreground hover:text-foreground',
+                              : 'text-muted-foreground hover:bg-white/[0.04] hover:text-foreground',
                           )}
                         >
-                          <item.icon className="h-5 w-5" />
+                          <item.icon className="h-[18px] w-[18px]" />
                           <span className="sr-only">{item.label}</span>
                         </Link>
                       </TooltipTrigger>
-                      <TooltipContent side="right">{item.label}</TooltipContent>
+                      <TooltipContent side="right" className="text-xs">
+                        {item.label}
+                      </TooltipContent>
                     </Tooltip>
                   );
                 }
@@ -133,13 +145,13 @@ export const MainLayout: React.FC = () => {
                     key={item.to}
                     to={item.to}
                     className={cn(
-                      'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                      'flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] font-medium transition-all duration-200',
                       isActive
-                        ? 'bg-primary text-primary-foreground'
+                        ? 'bg-white/[0.08] text-foreground'
-                        : 'hover:bg-muted text-muted-foreground hover:text-foreground',
+                        : 'text-muted-foreground hover:bg-white/[0.04] hover:text-foreground',
                     )}
                   >
-                    <item.icon className="h-4 w-4" />
+                    <item.icon className="h-[18px] w-[18px]" />
                     {item.label}
                   </Link>
                 );
@@ -147,7 +159,8 @@ export const MainLayout: React.FC = () => {
             </TooltipProvider>
           </nav>
 
-          <div className="border-t p-2">
+          {/* Status bar */}
+          <div className="border-t border-white/[0.06] p-2">
             <StatusBar isCollapsed={isCollapsed} />
           </div>
         </aside>
@@ -173,9 +186,9 @@ export const MainLayout: React.FC = () => {
             }}
             fallbackRender={({ resetErrorBoundary }) => (
               <div className="mx-auto max-w-3xl p-6">
-                <div className="rounded-lg border border-dashed p-8 text-center">
+                <div className="rounded-xl border border-white/[0.06] border-dashed p-8 text-center">
-                  <div className="text-lg font-semibold">{t('error.generic')}</div>
+                  <div className="text-sm font-semibold">{t('error.generic')}</div>
-                  <div className="text-muted-foreground mt-2 text-sm">{t('action.retry')}</div>
+                  <div className="text-muted-foreground mt-2 text-xs">{t('action.retry')}</div>
                   <Button className="mt-4" variant="outline" onClick={resetErrorBoundary}>
                     <RefreshCw className="mr-2 h-4 w-4" />
                     {t('action.retry')}

src/lib/geminiNexus/QuotaService.ts

@@ -61,8 +61,8 @@ export class QuotaService {
       } else {
         logger.warn(`⚠️  [${email}] loadCodeAssist failed: Status: ${res.status}`);
       }
-    } catch (error: any) {
+    } catch (error: unknown) {
-      logger.error(`❌ [${email}] loadCodeAssist Network Error: ${error.message}`);
+      logger.error(`❌ [${email}] loadCodeAssist Network Error: ${error instanceof Error ? error.message : String(error)}`);
     }
 
     return [undefined, undefined];
@@ -138,7 +138,7 @@ export class QuotaService {
         }
 
         return { quotaData, projectId };
-      } catch (error: any) {
+      } catch (error: unknown) {
         let shouldFallback = true;
 
         if (axios.isAxiosError(error)) {
@@ -174,7 +174,7 @@ export class QuotaService {
           lastError = new Error(`HTTP ${status} - ${text}`);
           shouldFallback = !isNumber(status);
         } else {
-          logger.warn(`Request Failed at ${endpoint}: ${error.message}`);
+          logger.warn(`Request Failed at ${endpoint}: ${error instanceof Error ? error.message : String(error)}`);
           lastError = error instanceof Error ? error : new Error(String(error));
         }
 
@@ -182,7 +182,7 @@ export class QuotaService {
           logger.warn(`Quota API request failed at ${endpoint}, falling back to next endpoint`);
           await new Promise((r) => setTimeout(r, 1000));
         } else {
-          throw lastError ?? new Error(`Quota query failed: ${error.message}`);
+          throw lastError ?? new Error(`Quota query failed: ${error instanceof Error ? error.message : String(error)}`);
         }
       }
     }

src/lib/nivo-theme.ts

@@ -1,16 +1,20 @@
 import type { PartialTheme } from '@nivo/theming';
 
+/**
+ * Nivo chart theme aligned with Gemini Nexus design system.
+ * Uses Inter font family and refined dark palette.
+ */
 export const nivoTheme: PartialTheme = {
   background: 'transparent',
   text: {
-    fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
+    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
     fontSize: 11,
-    fill: '#b8b8b8',
+    fill: '#6b7280',
   },
   axis: {
     domain: {
       line: {
-        stroke: 'rgba(255,255,255,0.1)',
+        stroke: 'rgba(255,255,255,0.06)',
         strokeWidth: 1,
       },
     },
@@ -20,41 +24,41 @@ export const nivoTheme: PartialTheme = {
         strokeWidth: 0,
       },
       text: {
-        fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
+        fontFamily: "'JetBrains Mono', monospace",
-        fontSize: 11,
+        fontSize: 10,
-        fill: '#b8b8b8',
+        fill: '#6b7280',
       },
     },
     legend: {
       text: {
-        fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
+        fontFamily: "Inter, sans-serif",
-        fontSize: 12,
+        fontSize: 11,
-        fill: '#b8b8b8',
+        fill: '#6b7280',
       },
     },
   },
   grid: {
     line: {
-      stroke: 'rgba(255,255,255,0.06)',
+      stroke: 'rgba(255,255,255,0.04)',
       strokeWidth: 1,
-      strokeDasharray: '4 4',
     },
   },
   legends: {
     text: {
-      fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
+      fontFamily: "Inter, sans-serif",
-      fontSize: 12,
+      fontSize: 11,
-      fill: '#b8b8b8',
+      fill: '#6b7280',
     },
   },
   tooltip: {
     container: {
-      background: '#2e2e2e',
+      background: '#16161e',
-      color: '#fff',
+      color: '#e8eaed',
-      fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
+      fontFamily: "Inter, sans-serif",
       fontSize: 12,
-      borderRadius: 6,
+      borderRadius: 8,
-      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+      border: '1px solid rgba(255,255,255,0.06)',
+      boxShadow: '0 8px 24px -4px rgba(0, 0, 0, 0.3)',
       padding: '8px 12px',
     },
   },

src/main.ts

@@ -235,7 +235,7 @@ function createWindow({ startHidden }: { startHidden: boolean }) {
     // Use process.cwd() in dev to find the icon reliably
     icon: inDevelopment
       ? path.join(process.cwd(), 'src/assets/icon.png')
-      : path.join(__dirname, '../assets/icon.png'),
+      : path.join(process.resourcesPath, 'assets', 'icon.png'),
   });
   globalMainWindow = mainWindow;
   logger.info('createWindow: BrowserWindow instance created');

src/routes/index.tsx

@@ -35,9 +35,9 @@ function HomePageErrorBoundary({ error, reset }: { error: unknown; reset: () =>
 
   return (
     <div className="container mx-auto max-w-4xl p-6">
-      <div className="rounded-lg border border-dashed p-8 text-center">
+      <div className="rounded-xl border border-dashed border-white/[0.1] p-8 text-center">
-        <div className="text-lg font-semibold">{t('error.generic')}</div>
+        <div className="text-base font-semibold">{t('error.generic')}</div>
-        <div className="text-muted-foreground mt-2 text-sm">{t('action.retry')}</div>
+        <div className="text-muted-foreground mt-2 text-[13px]">{t('action.retry')}</div>
         <Button className="mt-4" variant="outline" onClick={() => reset()}>
           <RefreshCw className="mr-2 h-4 w-4" />
           {t('action.retry')}

src/routes/proxy.tsx

@@ -107,7 +107,7 @@ function ProxyPage() {
   useEffect(() => {
     if (localIps && localIps.length > 0 && !selectedIp) {
       const recommended = localIps.find((ip) => ip.isRecommended);
-      setSelectedIp(recommended?.address || localIps[0].address);
+      setTimeout(() => setSelectedIp(recommended?.address || localIps[0].address), 0);
     }
   }, [localIps, selectedIp]);
 
@@ -208,7 +208,7 @@ function ProxyPage() {
 
   useEffect(() => {
     if (!availableModelIds.includes(activeModelTab) && availableModelIds.length > 0) {
-      setActiveModelTab(availableModelIds[0]);
+      setTimeout(() => setActiveModelTab(availableModelIds[0]), 0);
     }
   }, [availableModelIds, activeModelTab]);
 
@@ -294,10 +294,10 @@ print(response.choices[0].message.content)`;
   }
 
   return (
-    <div className="container mx-auto max-w-4xl space-y-5 p-6">
+    <div className="container mx-auto max-w-4xl space-y-5 overflow-auto p-6">
       <div>
-        <h2 className="text-3xl font-bold tracking-tight">{t('proxy.title')}</h2>
+        <h2 className="text-lg font-semibold tracking-tight">{t('proxy.title')}</h2>
-        <p className="text-muted-foreground mt-1">{t('proxy.description')}</p>
+        <p className="text-muted-foreground mt-1 text-[13px]">{t('proxy.description')}</p>
       </div>
 
       <Tabs defaultValue="status">
@@ -311,7 +311,7 @@ print(response.choices[0].message.content)`;
         {/* Status Tab */}
         <TabsContent value="status" className="space-y-5">
           {/* Service Control Card */}
-          <Card>
+          <Card className="border border-white/[0.06] bg-card shadow-none">
             <CardHeader>
               <div className="flex items-center justify-between">
                 <div>
@@ -320,15 +320,15 @@ print(response.choices[0].message.content)`;
                 </div>
                 <div className="flex items-center gap-2">
                   <div
-                    className={`h-3 w-3 rounded-full ${proxyConfig.enabled ? 'animate-pulse bg-green-500' : 'bg-gray-400'}`}
+                    className={`h-2.5 w-2.5 rounded-full ${proxyConfig.enabled ? 'animate-pulse bg-emerald-400' : 'bg-muted-foreground/30'}`}
                   ></div>
-                  <span className="text-sm font-medium">
+                  <span className="text-[13px] font-medium">
                     {proxyConfig.enabled ? t('proxy.service.running') : t('proxy.service.stopped')}
                   </span>
                 </div>
               </div>
             </CardHeader>
-            <CardContent className="space-y-6">
+            <CardContent className="space-y-5">
               {/* Start/Stop Button */}
               <div className="flex items-center gap-4">
                 <Button
@@ -387,7 +387,7 @@ print(response.choices[0].message.content)`;
                       value={proxyConfig.api_key || ''}
                       readOnly
                       type={showKey ? 'text' : 'password'}
-                      className="pr-10 font-mono text-sm"
+                      className="pr-10 font-mono text-[13px]"
                     />
                     <Button
                       variant="ghost"
@@ -454,10 +454,10 @@ print(response.choices[0].message.content)`;
               </div>
 
               {/* Auto Start Toggle */}
-              <div className="flex items-center justify-between rounded-lg border p-4">
+              <div className="flex items-center justify-between rounded-xl border border-white/[0.06] p-4">
                 <div className="space-y-1">
                   <Label>{t('proxy.config.auto_start')}</Label>
-                  <p className="text-xs text-gray-500">{t('proxy.config.auto_start_desc')}</p>
+                  <p className="text-xs text-muted-foreground">{t('proxy.config.auto_start_desc')}</p>
                 </div>
                 <Switch
                   checked={proxyConfig.auto_start}
@@ -470,7 +470,7 @@ print(response.choices[0].message.content)`;
           </Card>
 
           {/* Account Quota Context */}
-          <Card>
+          <Card className="border border-white/[0.06] bg-card shadow-none">
             <CardHeader>
               <CardTitle>Account Pool</CardTitle>
               <CardDescription>Quota and routing context</CardDescription>
@@ -480,21 +480,21 @@ print(response.choices[0].message.content)`;
                 <div className="space-y-3">
                   <div className="flex items-center justify-between">
                     <div>
-                      <p className="text-sm font-medium">Primary Account</p>
+                      <p className="text-[13px] font-medium">Primary Account</p>
-                      <p className="text-muted-foreground text-sm">{accounts[0].email}</p>
+                      <p className="text-muted-foreground font-mono text-[13px]">{accounts[0].email}</p>
                     </div>
                     {accounts.length > 1 && (
                       <Badge variant="outline">Pool Mode: Active ({accounts.length} accounts)</Badge>
                     )}
                   </div>
-                  <Button variant="outline" size="sm" asChild>
+                  <Button variant="outline" size="sm" className="text-xs" asChild>
                     <Link to={'/accounts' as any}>Manage Accounts</Link>
                   </Button>
                 </div>
               ) : (
                 <div className="flex flex-col items-center gap-3 py-6 text-center">
-                  <p className="text-muted-foreground text-sm">No accounts configured</p>
+                  <p className="text-muted-foreground text-[13px]">No accounts configured</p>
-                  <Button size="sm" asChild>
+                  <Button size="sm" className="text-xs" asChild>
                     <Link to={'/accounts' as any}>Add Account</Link>
                   </Button>
                 </div>
@@ -505,16 +505,16 @@ print(response.choices[0].message.content)`;
           {proxyConfig.enabled ? (
             <>
               {/* Local Access Info Banner */}
-              <div className="flex flex-col gap-2 rounded-md border border-blue-100 bg-blue-50 p-3 text-sm text-blue-900 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-200">
+              <div className="flex flex-col gap-2 rounded-xl border border-blue-500/20 bg-blue-500/5 p-3 text-[13px] text-blue-200">
                   <div className="flex items-center gap-2">
                   <div className="font-semibold">{t('proxy.config.local_access')}</div>
-                  <code className="rounded bg-blue-100 px-1.5 py-0.5 font-mono select-all dark:bg-blue-900/50">
+                  <code className="rounded-md bg-blue-500/10 px-1.5 py-0.5 font-mono text-xs select-all">
                     http://{selectedIp || 'localhost'}:{proxyConfig.port}/v1
                   </code>
                   <Button
                     variant="ghost"
                     size="icon"
-                    className="h-7 w-7 text-blue-700 hover:bg-blue-100 dark:text-blue-300 dark:hover:bg-blue-900/50"
+                    className="h-7 w-7 text-blue-300 hover:bg-blue-500/10"
                     onClick={() =>
                       copyToClipboard(
                         `http://${selectedIp || 'localhost'}:${proxyConfig.port}/v1`,
@@ -539,7 +539,7 @@ print(response.choices[0].message.content)`;
                   )}
                 </div>
                 {!proxyConfig.api_key && (
-                  <div className="flex items-center gap-2 text-xs font-medium text-amber-600 dark:text-amber-400">
+                  <div className="flex items-center gap-2 text-xs font-medium text-amber-400">
                     {t('proxy.config.no_token_warning')}
                   </div>
                 )}
@@ -572,11 +572,11 @@ print(response.choices[0].message.content)`;
                     },
                   ];
                   return items.map((metric) => (
-                    <Card key={metric.label}>
+                    <Card key={metric.label} className="border border-white/[0.06] bg-card shadow-none">
                       <CardContent className="pt-6">
-                        <p className="text-muted-foreground text-xs">{metric.label}</p>
+                        <p className="text-muted-foreground text-[11px] font-medium tracking-wider uppercase">{metric.label}</p>
                         <div className="mt-1 flex items-center gap-2">
-                          <span className="text-2xl font-bold">
+                          <span className="font-mono text-xl font-semibold tabular-nums">
                             {metric.value}
                             {metric.suffix}
                           </span>
@@ -588,11 +588,11 @@ print(response.choices[0].message.content)`;
               </div>
             </>
           ) : (
-            <div className="flex flex-col items-center justify-center gap-4 rounded-lg border border-dashed p-12 text-center">
+            <div className="flex flex-col items-center justify-center gap-4 rounded-xl border border-dashed border-white/[0.1] p-12 text-center">
-              <ServerOff className="text-muted-foreground h-12 w-12" />
+              <ServerOff className="text-muted-foreground/50 h-10 w-10" />
               <div className="space-y-1">
-                <p className="text-lg font-medium">Proxy is not running</p>
+                <p className="text-base font-semibold">Proxy is not running</p>
-                <p className="text-muted-foreground text-sm">Start the proxy to enable local API access</p>
+                <p className="text-muted-foreground text-[13px]">Start the proxy to enable local API access</p>
               </div>
               <Button
                 onClick={async () => {
@@ -609,20 +609,20 @@ print(response.choices[0].message.content)`;
 
         {/* Routing Tab */}
         <TabsContent value="routing" className="space-y-5">
-          <Card>
+          <Card className="border border-white/[0.06] bg-card shadow-none">
             <CardHeader>
               <CardTitle>{t('proxy.mapping.title')}</CardTitle>
               <CardDescription>{t('proxy.mapping.description')}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="rounded-lg border">
+              <div className="overflow-hidden rounded-xl border border-white/[0.06]">
-                <div className="grid grid-cols-3 gap-4 border-b bg-muted/50 p-3 text-xs font-medium text-muted-foreground">
+                <div className="grid grid-cols-3 gap-4 border-b border-white/[0.06] bg-white/[0.02] p-3 text-[11px] font-medium tracking-wider uppercase text-muted-foreground">
                   <div>Requested Model</div>
                   <div>Resolved Model</div>
                   <div>Provider</div>
                 </div>
-                <div className="grid grid-cols-3 gap-4 items-center p-3">
+                <div className="grid grid-cols-3 gap-4 items-center p-3 text-[13px]">
-                  <div className="text-sm font-medium">Claude Sonnet 4.6 (Thinking)</div>
+                  <div className="font-medium">Claude Sonnet 4.6 (Thinking)</div>
                   <Select
                     value={resolveAnthropicMappingValue(
                       proxyConfig.anthropic_mapping,
@@ -649,8 +649,8 @@ print(response.choices[0].message.content)`;
                   </Select>
                   <Badge variant="secondary">Anthropic</Badge>
                 </div>
-                <div className="grid grid-cols-3 gap-4 items-center border-t p-3">
+                <div className="grid grid-cols-3 gap-4 items-center border-t border-white/[0.06] p-3 text-[13px]">
-                  <div className="text-sm font-medium">Claude Opus 4.6 (Thinking)</div>
+                  <div className="font-medium">Claude Opus 4.6 (Thinking)</div>
                   <Select
                     value={resolveAnthropicMappingValue(
                       proxyConfig.anthropic_mapping,
@@ -696,7 +696,7 @@ print(response.choices[0].message.content)`;
           </Card>
 
           {/* Current Mappings */}
-          <Card>
+          <Card className="border border-white/[0.06] bg-card shadow-none">
             <CardHeader>
               <CardTitle>{t('proxy.routing.currentMappings')}</CardTitle>
               <CardDescription>{t('proxy.routing.modelMapping')}</CardDescription>
@@ -706,10 +706,10 @@ print(response.choices[0].message.content)`;
                 const mappingEntries = Object.entries(proxyConfig.anthropic_mapping || {});
                 const customEntries = Object.entries(proxyConfig.custom_mapping || {});
                 return mappingEntries.length === 0 && customEntries.length === 0 ? (
-                  <p className="text-sm text-muted-foreground">{t('proxy.routing.noMapping')}</p>
+                  <p className="text-[13px] text-muted-foreground">{t('proxy.routing.noMapping')}</p>
                 ) : (
-                  <div className="rounded-lg border">
+                  <div className="overflow-hidden rounded-xl border border-white/[0.06]">
-                    <div className="grid grid-cols-3 gap-4 border-b bg-muted/50 p-3 text-xs font-medium text-muted-foreground">
+                    <div className="grid grid-cols-3 gap-4 border-b border-white/[0.06] bg-white/[0.02] p-3 text-[11px] font-medium tracking-wider uppercase text-muted-foreground">
                       <div>{t('proxy.mapping.maps_to')}</div>
                       <div>{t('settings.modelMapping.targetGemini')}</div>
                       <div>Provider</div>
@@ -717,7 +717,7 @@ print(response.choices[0].message.content)`;
                     {mappingEntries.map(([key, value]) => (
                       <div
                         key={key}
-                        className="grid grid-cols-3 gap-4 items-center border-b p-3 last:border-0"
+                        className="grid grid-cols-3 gap-4 items-center border-b border-white/[0.06] p-3 last:border-0"
                       >
                         <div className="font-mono text-xs">{key}</div>
                         <div className="font-mono text-xs">{value}</div>
@@ -727,7 +727,7 @@ print(response.choices[0].message.content)`;
                     {customEntries.map(([key, value]) => (
                       <div
                         key={key}
-                        className="grid grid-cols-3 gap-4 items-center border-b p-3 last:border-0"
+                        className="grid grid-cols-3 gap-4 items-center border-b border-white/[0.06] p-3 last:border-0"
                       >
                         <div className="font-mono text-xs">{key}</div>
                         <div className="font-mono text-xs">{value}</div>
@@ -741,21 +741,21 @@ print(response.choices[0].message.content)`;
           </Card>
 
           {/* Upstream Proxy Status */}
-          <Card>
+          <Card className="border border-white/[0.06] bg-card shadow-none">
             <CardHeader>
               <CardTitle>{t('proxy.routing.upstreamProxy')}</CardTitle>
               <CardDescription>{t('proxy.routing.upstreamProxy')}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-2">
-              <div className="flex items-center justify-between rounded-lg border p-3">
+              <div className="flex items-center justify-between rounded-xl border border-white/[0.06] p-3">
-                <span className="text-sm text-muted-foreground">{t('proxy.routing.status')}</span>
+                <span className="text-[13px] text-muted-foreground">{t('proxy.routing.status')}</span>
                 <Badge variant={proxyConfig.upstream_proxy?.enabled ? 'default' : 'secondary'}>
                   {proxyConfig.upstream_proxy?.enabled ? t('proxy.routing.enabled') : t('proxy.routing.disabled')}
                 </Badge>
               </div>
               {proxyConfig.upstream_proxy?.enabled && (
-                <div className="flex items-center justify-between rounded-lg border p-3">
+                <div className="flex items-center justify-between rounded-xl border border-white/[0.06] p-3">
-                  <span className="text-sm text-muted-foreground">{t('proxy.routing.url')}</span>
+                  <span className="text-[13px] text-muted-foreground">{t('proxy.routing.url')}</span>
                   <span className="font-mono text-xs">{proxyConfig.upstream_proxy?.url || '—'}</span>
                 </div>
               )}
@@ -765,7 +765,7 @@ print(response.choices[0].message.content)`;
 
         {/* API Docs Tab */}
         <TabsContent value="api-docs" className="space-y-5">
-          <Card>
+          <Card className="border border-white/[0.06] bg-card shadow-none">
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <Code size={20} />
@@ -791,9 +791,9 @@ print(response.choices[0].message.content)`;
               </div>
 
               {/* Model Selector & Copy API ID */}
-              <div className="flex flex-col gap-4 border-b border-gray-200 pb-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700">
+              <div className="flex flex-col gap-4 border-b border-white/[0.06] pb-4 sm:flex-row sm:items-center sm:justify-between">
                 <div className="flex items-center gap-3">
-                  <Label className="text-sm font-medium">
+                  <Label className="text-[13px] font-medium">
                     Model{' '}
                     <span className="text-muted-foreground ml-1 font-normal">
                       ({availableModelIds.length} available)
@@ -836,7 +836,7 @@ print(response.choices[0].message.content)`;
               {/* Collapsible Code Examples */}
               <div className="space-y-3">
                 <div className="flex items-center justify-between">
-                  <Label className="text-sm font-medium">Code Examples</Label>
+                  <Label className="text-[13px] font-medium">Code Examples</Label>
                   <Button
                     variant="ghost"
                     size="sm"
@@ -851,9 +851,9 @@ print(response.choices[0].message.content)`;
                 </div>
 
                 {/* cURL */}
-                <div className="rounded-lg border">
+                <div className="overflow-hidden rounded-xl border border-white/[0.06]">
                   <div
-                    className="flex w-full cursor-pointer items-center justify-between p-3 text-sm font-medium hover:bg-muted/50"
+                    className="flex w-full cursor-pointer items-center justify-between p-3 text-[13px] font-medium hover:bg-white/[0.02] transition-colors"
                     onClick={() => setShowCurl(!showCurl)}
                   >
                     <span className="flex items-center gap-2">
@@ -876,16 +876,16 @@ print(response.choices[0].message.content)`;
                     </div>
                   </div>
                   {showCurl && (
-                    <pre className="overflow-x-auto border-t bg-gray-900 p-3 font-mono text-xs whitespace-pre-wrap text-gray-100">
+                    <pre className="overflow-x-auto border-t border-white/[0.06] bg-card p-3 font-mono text-xs whitespace-pre-wrap text-foreground/90">
                       {getCurlExample(activeModelTab)}
                     </pre>
                   )}
                 </div>
 
                 {/* Python */}
-                <div className="rounded-lg border">
+                <div className="overflow-hidden rounded-xl border border-white/[0.06]">
                   <div
-                    className="flex w-full cursor-pointer items-center justify-between p-3 text-sm font-medium hover:bg-muted/50"
+                    className="flex w-full cursor-pointer items-center justify-between p-3 text-[13px] font-medium hover:bg-white/[0.02] transition-colors"
                     onClick={() => setShowPython(!showPython)}
                   >
                     <span className="flex items-center gap-2">
@@ -908,7 +908,7 @@ print(response.choices[0].message.content)`;
                     </div>
                   </div>
                   {showPython && (
-                    <pre className="overflow-x-auto border-t bg-gray-900 p-3 font-mono text-xs whitespace-pre-wrap text-gray-100">
+                    <pre className="overflow-x-auto border-t border-white/[0.06] bg-card p-3 font-mono text-xs whitespace-pre-wrap text-foreground/90">
                       {getPythonExample(activeModelTab)}
                     </pre>
                   )}

src/routes/settings.tsx

@@ -79,8 +79,8 @@ function SettingsPage() {
   return (
     <div className="container mx-auto max-w-4xl space-y-5 p-6">
       <div>
-        <h2 className="text-3xl font-bold tracking-tight">{t('settings.title')}</h2>
+        <h2 className="text-lg font-semibold tracking-tight">{t('settings.title')}</h2>
-        <p className="text-muted-foreground mt-1">{t('settings.description')}</p>
+        <p className="text-muted-foreground mt-1 text-[13px]">{t('settings.description')}</p>
       </div>
 
       <Tabs defaultValue="general" className="w-full">
@@ -92,16 +92,16 @@ function SettingsPage() {
 
         {/* --- GENERAL TAB --- */}
         <TabsContent value="general" className="space-y-5">
-          <Card>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
-            <CardHeader>
+            <CardHeader className="px-0 pt-4">
               <CardTitle>{t('settings.appearance.title')}</CardTitle>
               <CardDescription>{t('settings.appearance.description')}</CardDescription>
             </CardHeader>
-            <CardContent className="space-y-6">
+            <CardContent className="space-y-5">
               <div className="flex items-center justify-between space-x-2">
                 <div className="space-y-1">
                   <Label htmlFor="dark-mode">{t('settings.darkMode')}</Label>
-                  <p className="text-muted-foreground text-sm">
+                  <p className="text-muted-foreground text-xs">
                     {t('settings.darkModeDescription')}
                   </p>
                 </div>
@@ -139,8 +139,8 @@ function SettingsPage() {
           </Card>
 
           {/* Account Settings Card */}
-          <Card>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
-            <CardHeader>
+            <CardHeader className="px-0 pt-4">
               <CardTitle>{t('settings.account.title')}</CardTitle>
               <CardDescription>{t('settings.account.description')}</CardDescription>
             </CardHeader>
@@ -149,7 +149,7 @@ function SettingsPage() {
               <div className="flex items-center justify-between rounded-lg border p-4">
                 <div className="space-y-1">
                   <Label>{t('settings.account.auto_refresh')}</Label>
-                  <p className="text-xs text-gray-500">{t('settings.account.auto_refresh_desc')}</p>
+                  <p className="text-muted-foreground text-xs">{t('settings.account.auto_refresh_desc')}</p>
                 </div>
                 <Switch
                   checked={config?.auto_refresh || false}
@@ -165,7 +165,7 @@ function SettingsPage() {
               <div className="flex items-center justify-between rounded-lg border p-4">
                 <div className="space-y-1">
                   <Label>{t('settings.account.auto_sync')}</Label>
-                  <p className="text-xs text-gray-500">{t('settings.account.auto_sync_desc')}</p>
+                  <p className="text-muted-foreground text-xs">{t('settings.account.auto_sync_desc')}</p>
                 </div>
                 <Switch
                   checked={config?.auto_sync || false}
@@ -180,8 +180,8 @@ function SettingsPage() {
           </Card>
 
           {isAutoStartSupported && (
-            <Card>
+            <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
-              <CardHeader>
+              <CardHeader className="px-0 pt-4">
                 <CardTitle>{t('settings.startup.title')}</CardTitle>
                 <CardDescription>{t('settings.startup.description')}</CardDescription>
               </CardHeader>
@@ -189,7 +189,7 @@ function SettingsPage() {
                 <div className="flex items-center justify-between rounded-lg border p-4">
                   <div className="space-y-1">
                     <Label>{t('settings.startup.auto_startup')}</Label>
-                    <p className="text-xs text-gray-500">
+                    <p className="text-muted-foreground text-xs">
                       {t('settings.startup.auto_startup_desc')}
                     </p>
                   </div>
@@ -211,13 +211,13 @@ function SettingsPage() {
             </Card>
           )}
 
-          <Card>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
-            <CardHeader>
+            <CardHeader className="px-0 pt-4">
               <CardTitle>{t('settings.about.title')}</CardTitle>
               <CardDescription>{t('settings.about.description')}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
-              <div className="grid grid-cols-2 gap-4 text-sm">
+              <div className="grid grid-cols-2 gap-4 text-[13px]">
                 <div className="text-muted-foreground">{t('settings.version')}</div>
                 <div className="font-medium">{appVersion || t('common.unknown')}</div>
 
@@ -230,7 +230,7 @@ function SettingsPage() {
                 <div className="text-muted-foreground">{t('action.openLogs')}</div>
                 <button
                   onClick={() => openLogDirectory()}
-                  className="flex items-center gap-2 font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                  className="flex items-center gap-2 font-medium text-accent hover:text-accent/80 transition-colors"
                 >
                   <FolderOpen className="h-4 w-4" />
                   <span>{t('settings.openLogDir')}</span>
@@ -240,8 +240,8 @@ function SettingsPage() {
           </Card>
 
           {/* Privacy & Error Reporting Card */}
-          <Card>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
-            <CardHeader>
+            <CardHeader className="px-0 pt-4">
               <CardTitle>{t('settings.privacy.title')}</CardTitle>
               <CardDescription>{t('settings.privacy.description')}</CardDescription>
             </CardHeader>
@@ -249,7 +249,7 @@ function SettingsPage() {
               <div className="flex items-center justify-between rounded-lg border p-4">
                 <div className="space-y-1">
                   <Label>{t('settings.privacy.error_reporting')}</Label>
-                  <p className="text-xs text-gray-500">
+                  <p className="text-muted-foreground text-xs">
                     {t('settings.privacy.error_reporting_desc')}
                   </p>
                 </div>
@@ -267,8 +267,8 @@ function SettingsPage() {
           </Card>
 
           {/* Notifications Card */}
-          <Card>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
-            <CardHeader>
+            <CardHeader className="px-0 pt-4">
               <CardTitle>{t('settings.notifications.title')}</CardTitle>
               <CardDescription>{t('settings.notifications.description')}</CardDescription>
             </CardHeader>
@@ -276,7 +276,7 @@ function SettingsPage() {
               <div className="flex items-center justify-between rounded-lg border p-4">
                 <div className="space-y-1">
                   <Label>{t('settings.notifications.quotaAlert')}</Label>
-                  <p className="text-xs text-gray-500">
+                  <p className="text-muted-foreground text-xs">
                     {t('settings.notifications.quotaAlertDesc')}
                   </p>
                 </div>
@@ -300,7 +300,7 @@ function SettingsPage() {
               <div className="flex items-center justify-between rounded-lg border p-4">
                 <div className="space-y-1">
                   <Label>{t('settings.notifications.quotaThreshold')}</Label>
-                  <p className="text-xs text-gray-500">
+                  <p className="text-muted-foreground text-xs">
                     {t('settings.notifications.quotaThresholdDesc')}
                   </p>
                 </div>
@@ -327,7 +327,7 @@ function SettingsPage() {
                         }
                       }
                     }}
-                    className="w-16 rounded-md border bg-transparent px-2 py-1 text-center text-sm"
+                    className="w-16 rounded-lg border border-white/[0.08] bg-muted/50 px-2 py-1 text-center text-[13px] text-foreground focus:outline-none focus:border-accent/50"
                   />
                   <span className="text-muted-foreground text-sm">%</span>
                 </div>
@@ -343,8 +343,8 @@ function SettingsPage() {
 
         {/* --- PROXY TAB (Upstream Proxy Config Only) --- */}
         <TabsContent value="proxy" className="space-y-5">
-          <Card>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
-            <CardHeader>
+            <CardHeader className="px-0 pt-4">
               <CardTitle>{t('settings.proxy.title')}</CardTitle>
               <CardDescription>{t('settings.proxy.description')}</CardDescription>
             </CardHeader>

src/routes/usage.tsx

@@ -1,9 +1,8 @@
 import { useMemo, useState } from 'react';
 import { createFileRoute } from '@tanstack/react-router';
 import { useQuery } from '@tanstack/react-query';
-import { useTranslation } from 'react-i18next';
+import { ResponsiveLine } from '@nivo/line';
 import { ResponsiveBar } from '@nivo/bar';
-import { ResponsivePie } from '@nivo/pie';
 import {
   Select,
   SelectContent,
@@ -19,19 +18,16 @@ import { ChartCard } from '@/components/usage/ChartCard';
 import {
   COLOR_PROMPT,
   COLOR_COMPLETION,
-  COLOR_TOTAL,
   PIE_COLORS,
-  BarTooltip,
+  LineTooltip,
-  PieTooltip,
 } from '@/components/usage/NivoTooltip';
 import { nivoTheme } from '@/lib/nivo-theme';
 import {
   Activity,
-  ArrowUpRight,
-  ArrowDownRight,
   Layers,
   Loader2,
   MessageSquare,
+  Radio,
   Zap,
 } from 'lucide-react';
 
@@ -61,50 +57,84 @@ interface ModelBucket {
 /* ------------------------------------------------------------------ */
 function getTimeRange(r: TimeRange): { start: number; end: number } {
   const now = Date.now();
-  if (r === '24h') {
+  const ms: Record<TimeRange, number> = {
-    return { start: now - 24 * 60 * 60 * 1000, end: now };
+    '24h': 24 * 60 * 60 * 1000,
+    '7d': 7 * 24 * 60 * 60 * 1000,
+    '30d': 30 * 24 * 60 * 60 * 1000,
+  };
+  return { start: now - ms[r], end: now };
 }
-  if (r === '7d') {
+
-    return { start: now - 7 * 24 * 60 * 60 * 1000, end: now };
+function getPreviousTimeRange(r: TimeRange): { start: number; end: number } {
-  }
+  const { start, end } = getTimeRange(r);
-  return { start: now - 30 * 24 * 60 * 60 * 1000, end: now };
+  const duration = end - start;
+  return { start: start - duration, end: start };
 }
 
 function formatBucketLabel(bucket: string, range: TimeRange): string {
   if (range === '24h') {
-    // bucket is "YYYY-MM-DD HH:00"
     const parts = bucket.split(' ');
-    if (parts.length === 2) {
+    return parts.length === 2 ? parts[1] : bucket;
-      return parts[1]; // "HH:00"
   }
-  }
-  if (range === '7d') {
-    // bucket is "YYYY-MM-DD"
-    const d = new Date(bucket + 'T00:00:00');
-    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
-  }
-  // 30d
   const d = new Date(bucket + 'T00:00:00');
   return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
 }
 
-function barColor(bar: any): string {
+function formatNumber(n: number): string {
-  if (bar.id === 'Prompt') return COLOR_PROMPT;
+  if (n >= 1_000_000) {
-  if (bar.id === 'Completion') return COLOR_COMPLETION;
+    return `${(n / 1_000_000).toFixed(1)}M`;
-  if (bar.id === 'Total') return COLOR_TOTAL;
+  }
-  return 'var(--chart-3)';
+  if (n >= 1_000) {
+    return `${(n / 1_000).toFixed(1)}K`;
+  }
+  return n.toLocaleString();
+}
+
+function calcTrend(
+  current: number,
+  previous: number,
+): { value: number; direction: 'up' | 'down' | 'neutral' } {
+  if (previous === 0 && current === 0) {
+    return { value: 0, direction: 'neutral' };
+  }
+  if (previous === 0) {
+    return { value: 100, direction: 'up' };
+  }
+  const pct = ((current - previous) / previous) * 100;
+  if (Math.abs(pct) < 0.5) {
+    return { value: 0, direction: 'neutral' };
+  }
+  return { value: Math.abs(pct), direction: pct > 0 ? 'up' : 'down' };
+}
+
+/* ------------------------------------------------------------------ */
+/*  Aggregation helpers                                                */
+/* ------------------------------------------------------------------ */
+function sumBuckets(data: UsageBucket[]) {
+  return data.reduce(
+    (acc, row) => ({
+      promptTokens: acc.promptTokens + row.promptTokens,
+      completionTokens: acc.completionTokens + row.completionTokens,
+      totalTokens: acc.totalTokens + row.totalTokens,
+      requests: acc.requests + row.requests,
+    }),
+    { promptTokens: 0, completionTokens: 0, totalTokens: 0, requests: 0 },
+  );
 }
 
 /* ------------------------------------------------------------------ */
 /*  Main Component                                                     */
 /* ------------------------------------------------------------------ */
 function UsagePage() {
-  const { t } = useTranslation();
   const [range, setRange] = useState<TimeRange>('7d');
   const ALL_ACCOUNTS = '__all__';
   const [selectedAccountId, setSelectedAccountId] = useState<string>(ALL_ACCOUNTS);
   const { data: accounts, isLoading: accountsLoading } = useCloudAccounts();
 
+  const accountFilter =
+    selectedAccountId === ALL_ACCOUNTS ? undefined : selectedAccountId;
+
+  /* ───── Current period data ───── */
   const {
     data: dailyData,
     isLoading: dailyLoading,
@@ -114,10 +144,27 @@ function UsagePage() {
     queryKey: ['usage', 'day', range, selectedAccountId],
     queryFn: () => {
       const { start, end } = getTimeRange(range);
-      return ipc.client.usage.getUsageByDay({ accountId: selectedAccountId === ALL_ACCOUNTS ? undefined : selectedAccountId, start, end });
+      return ipc.client.usage.getUsageByDay({
+        accountId: accountFilter,
+        start,
+        end,
+      });
     },
-    refetchInterval: 30000,
+    refetchInterval: 15_000,
     refetchIntervalInBackground: false,
+    staleTime: 30_000,
+  });
+
+  const { data: prevDailyData } = useQuery<UsageBucket[]>({
+    queryKey: ['usage', 'day', 'prev', range, selectedAccountId],
+    queryFn: () => {
+      const { start, end } = getPreviousTimeRange(range);
+      return ipc.client.usage.getUsageByDay({
+        accountId: accountFilter,
+        start,
+        end,
+      });
+    },
     staleTime: 60_000,
   });
 
@@ -130,11 +177,15 @@ function UsagePage() {
     queryKey: ['usage', 'model', range, selectedAccountId],
     queryFn: () => {
       const { start, end } = getTimeRange(range);
-      return ipc.client.usage.getUsageByModel({ accountId: selectedAccountId === ALL_ACCOUNTS ? undefined : selectedAccountId, start, end });
+      return ipc.client.usage.getUsageByModel({
+        accountId: accountFilter,
+        start,
+        end,
+      });
     },
-    refetchInterval: 30000,
+    refetchInterval: 15_000,
     refetchIntervalInBackground: false,
-    staleTime: 60_000,
+    staleTime: 30_000,
   });
 
   const {
@@ -146,99 +197,148 @@ function UsagePage() {
     queryKey: ['usage', 'hour', range, selectedAccountId],
     queryFn: () => {
       const { start, end } = getTimeRange(range);
-      return ipc.client.usage.getUsageByHour({ accountId: selectedAccountId === ALL_ACCOUNTS ? undefined : selectedAccountId, start, end });
+      return ipc.client.usage.getUsageByHour({
+        accountId: accountFilter,
+        start,
+        end,
+      });
     },
     enabled: range === '24h',
-    refetchInterval: 30000,
+    refetchInterval: 15_000,
     refetchIntervalInBackground: false,
-    staleTime: 60_000,
+    staleTime: 30_000,
   });
 
-  /* -------------------------- Derived data -------------------------- */
+  /* ───── Derived data ───── */
-  const totals = useMemo(() => {
+  const totals = useMemo(() => sumBuckets(dailyData || []), [dailyData]);
-    const source = dailyData || [];
+  const prevTotals = useMemo(
-    return source.reduce(
+    () => sumBuckets(prevDailyData || []),
-      (acc, row) => ({
+    [prevDailyData],
-        promptTokens: acc.promptTokens + row.promptTokens,
-        completionTokens: acc.completionTokens + row.completionTokens,
-        totalTokens: acc.totalTokens + row.totalTokens,
-        requests: acc.requests + row.requests,
-      }),
-      { promptTokens: 0, completionTokens: 0, totalTokens: 0, requests: 0 },
   );
-  }, [dailyData]);
 
-  const promptRatio = useMemo(() => {
+  const promptRatio = totals.totalTokens
-    if (totals.totalTokens === 0) return 0;
+    ? Math.round((totals.promptTokens / totals.totalTokens) * 100)
-    return Math.round((totals.promptTokens / totals.totalTokens) * 100);
+    : 0;
-  }, [totals]);
+  const completionRatio = totals.totalTokens
+    ? Math.round((totals.completionTokens / totals.totalTokens) * 100)
+    : 0;
+  const avgReqSize = totals.requests
+    ? Math.round(totals.totalTokens / totals.requests)
+    : 0;
 
-  const completionRatio = useMemo(() => {
+  const sparklineTotal = useMemo(
-    if (totals.totalTokens === 0) return 0;
+    () => (dailyData || []).map((d) => d.totalTokens),
-    return Math.round((totals.completionTokens / totals.totalTokens) * 100);
+    [dailyData],
-  }, [totals]);
+  );
+  const sparklinePrompt = useMemo(
+    () => (dailyData || []).map((d) => d.promptTokens),
+    [dailyData],
+  );
+  const sparklineCompletion = useMemo(
+    () => (dailyData || []).map((d) => d.completionTokens),
+    [dailyData],
+  );
+  const sparklineRequests = useMemo(
+    () => (dailyData || []).map((d) => d.requests),
+    [dailyData],
+  );
 
-  const chartData = useMemo(() => {
+  // Area chart — Nivo line format
-    return (dailyData || []).map((d) => ({
+  const areaChartData = useMemo(() => {
-      name: formatBucketLabel(d.bucket, range),
+    const source = range === '24h' ? hourlyData || [] : dailyData || [];
-      Prompt: d.promptTokens,
+    return [
-      Completion: d.completionTokens,
+      {
-    }));
+        id: 'Prompt',
-  }, [dailyData, range]);
+        color: COLOR_PROMPT,
+        data: source.map((d) => ({
+          x: formatBucketLabel(d.bucket, range),
+          y: d.promptTokens,
+        })),
+      },
+      {
+        id: 'Completion',
+        color: COLOR_COMPLETION,
+        data: source.map((d) => ({
+          x: formatBucketLabel(d.bucket, range),
+          y: d.completionTokens,
+        })),
+      },
+    ];
+  }, [dailyData, hourlyData, range]);
 
-  const pieData = useMemo(() => {
+  // Model ranking bar data
-    return (modelData || []).map((d) => ({
+  const modelBarData = useMemo(() => {
-      id: d.model,
+    if (!modelData?.length) {
-      value: d.totalTokens,
+      return [];
+    }
+    return [...modelData]
+      .sort((a, b) => b.totalTokens - a.totalTokens)
+      .slice(0, 8)
+      .map((m) => ({
+        model:
+          m.model.length > 22 ? m.model.slice(0, 22) + '…' : m.model,
+        tokens: m.totalTokens,
       }));
   }, [modelData]);
 
-  const hourlyChartData = useMemo(() => {
+  // Top models mini-list
-    return (hourlyData || []).map((d) => ({
+  const topModels = useMemo(() => {
-      name: formatBucketLabel(d.bucket, '24h'),
+    if (!modelData?.length) {
-      Prompt: d.promptTokens,
+      return [];
-      Completion: d.completionTokens,
+    }
-      Total: d.totalTokens,
+    return [...modelData]
-    }));
+      .sort((a, b) => b.totalTokens - a.totalTokens)
-  }, [hourlyData]);
+      .slice(0, 5);
+  }, [modelData]);
 
-  const hourlyTickValues = useMemo(() => {
+  const isAreaEmpty =
-    return hourlyChartData.filter((_, i) => i % 3 === 0).map((d) => d.name);
+    range === '24h'
-  }, [hourlyChartData]);
+      ? !hourlyLoading && !hourlyError && !hourlyData?.length
+      : !dailyLoading && !dailyError && !dailyData?.length;
+  const areaLoading = range === '24h' ? hourlyLoading : dailyLoading;
+  const areaError = range === '24h' ? hourlyError : dailyError;
+  const isModelEmpty = !modelLoading && !modelError && !modelData?.length;
 
-  const isDailyEmpty = !dailyLoading && !dailyError && (!dailyData || dailyData.length === 0);
+  /* ───── Render ───── */
-  const isModelEmpty = !modelLoading && !modelError && (!modelData || modelData.length === 0);
-  const isHourlyEmpty = !hourlyLoading && !hourlyError && (!hourlyData || hourlyData.length === 0);
-
-  /* ----------------------------- Render ----------------------------- */
   return (
     <div className="flex h-full flex-col overflow-auto">
-      {/* Header */}
+      {/* ─── Header ─── */}
-      <div className="border-border/40 flex flex-col gap-4 border-b px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-col gap-4 border-b border-white/[0.06] px-6 py-5 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-foreground text-xl font-bold tracking-tight">{t('usage.title')}</h1>
+          <div className="flex items-center gap-2">
-          <p className="text-muted-foreground mt-0.5 text-sm">{t('usage.description')}</p>
+            <h1 className="text-foreground text-lg font-semibold tracking-tight">
+              Usage Analytics
+            </h1>
+            <div className="flex items-center gap-1.5 rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2 py-0.5">
+              <Radio className="h-2.5 w-2.5 animate-pulse text-emerald-400" />
+              <span className="text-[10px] font-medium text-emerald-400">
+                Live
+              </span>
+            </div>
+          </div>
+          <p className="text-muted-foreground mt-0.5 text-[13px]">
+            Token consumption and model distribution
+          </p>
         </div>
 
         <div className="flex items-center gap-3">
-          {/* Account filter */}
           <Select
             value={selectedAccountId}
-            onValueChange={(value) => setSelectedAccountId(value)}
+            onValueChange={setSelectedAccountId}
             disabled={accountsLoading}
           >
-            <SelectTrigger className="h-9 w-[200px] text-xs">
+            <SelectTrigger className="h-8 w-[180px] text-xs">
               {accountsLoading ? (
                 <span className="flex items-center gap-2">
-                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                  <Loader2 className="h-3 w-3 animate-spin" />
-                  {t('common.loading')}
+                  Loading…
                 </span>
               ) : (
-                <SelectValue placeholder={t('usage.allAccounts')} />
+                <SelectValue placeholder="All accounts" />
               )}
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value={ALL_ACCOUNTS}>{t('usage.allAccounts')}</SelectItem>
+              <SelectItem value={ALL_ACCOUNTS}>All accounts</SelectItem>
               {accounts?.map((acc) => (
                 <SelectItem key={acc.id} value={acc.id}>
                   {acc.email}
@@ -247,128 +347,249 @@ function UsagePage() {
             </SelectContent>
           </Select>
 
-          {/* Time range tabs */}
+          <Tabs
-          <Tabs value={range} onValueChange={(v) => setRange(v as TimeRange)}>
+            value={range}
-            <TabsList className="h-9">
+            onValueChange={(v) => setRange(v as TimeRange)}
+          >
+            <TabsList className="h-8">
               <TabsTrigger value="24h" className="px-3 text-xs">
-                {t('usage.range24h')}
+                24h
               </TabsTrigger>
               <TabsTrigger value="7d" className="px-3 text-xs">
-                {t('usage.range7d')}
+                7d
               </TabsTrigger>
               <TabsTrigger value="30d" className="px-3 text-xs">
-                {t('usage.range30d')}
+                30d
               </TabsTrigger>
             </TabsList>
           </Tabs>
         </div>
       </div>
 
-      <div className="flex-1 space-y-5 px-6 py-5">
+      <div className="flex-1 space-y-4 px-6 py-5">
-        {/* Summary Stats */}
+        {/* ─── Stat cards ─── */}
         <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
           <StatCard
-            label={t('usage.totalTokens')}
+            label="Total Tokens"
-            value={totals.totalTokens}
+            value={formatNumber(totals.totalTokens)}
             icon={Zap}
             isLoading={dailyLoading}
             accent="amber"
+            trend={
+              prevDailyData
+                ? calcTrend(totals.totalTokens, prevTotals.totalTokens)
+                : undefined
+            }
+            sparkline={sparklineTotal}
           />
           <StatCard
-            label={t('usage.promptTokens')}
+            label="Prompt Tokens"
-            value={totals.promptTokens}
+            value={formatNumber(totals.promptTokens)}
             icon={MessageSquare}
             isLoading={dailyLoading}
             accent="blue"
+            trend={
+              prevDailyData
+                ? calcTrend(totals.promptTokens, prevTotals.promptTokens)
+                : undefined
+            }
+            sparkline={sparklinePrompt}
           />
           <StatCard
-            label={t('usage.completionTokens')}
+            label="Completion Tokens"
-            value={totals.completionTokens}
+            value={formatNumber(totals.completionTokens)}
             icon={Activity}
             isLoading={dailyLoading}
             accent="green"
+            trend={
+              prevDailyData
+                ? calcTrend(
+                    totals.completionTokens,
+                    prevTotals.completionTokens,
+                  )
+                : undefined
+            }
+            sparkline={sparklineCompletion}
           />
           <StatCard
-            label={t('usage.totalRequests')}
+            label="Total Requests"
-            value={totals.requests}
+            value={totals.requests.toLocaleString()}
             icon={Layers}
             isLoading={dailyLoading}
             accent="slate"
+            trend={
+              prevDailyData
+                ? calcTrend(totals.requests, prevTotals.requests)
+                : undefined
+            }
+            sparkline={sparklineRequests}
           />
         </div>
 
-        {/* Trend indicators row */}
+        {/* ─── Prompt/Completion ratio bar + top models ─── */}
         {!dailyLoading && totals.totalTokens > 0 && (
-          <div className="flex flex-wrap items-center gap-4">
+          <div className="grid grid-cols-1 gap-3 lg:grid-cols-3">
-            <div className="flex items-center gap-1.5 text-xs">
+            <div className="col-span-1 flex flex-col gap-3 rounded-xl border border-white/[0.06] bg-card p-4 lg:col-span-2">
-              <ArrowUpRight className="h-3.5 w-3.5 text-blue-400" />
+              <div className="flex items-center justify-between">
-              <span className="text-muted-foreground">{t('usage.promptLabel')}:</span>
+                <span className="text-muted-foreground text-[11px] font-medium uppercase tracking-wider">
-              <span className="text-foreground font-mono font-medium">{promptRatio}%</span>
+                  Prompt / Completion
-            </div>
-            <div className="flex items-center gap-1.5 text-xs">
-              <ArrowDownRight className="h-3.5 w-3.5 text-emerald-400" />
-              <span className="text-muted-foreground">{t('usage.completionLabel')}:</span>
-              <span className="text-foreground font-mono font-medium">{completionRatio}%</span>
-            </div>
-            <div className="bg-border/40 h-3 w-px" />
-            <div className="text-muted-foreground text-xs">
-              {t('usage.requestsLabel')}:{' '}
-              <span className="text-foreground font-mono font-medium">
-                {totals.requests.toLocaleString()}
                 </span>
+                <span className="font-mono text-xs text-muted-foreground">
+                  {formatNumber(totals.totalTokens)} total
+                </span>
+              </div>
+              <div className="flex h-2.5 w-full overflow-hidden rounded-full bg-white/[0.04]">
+                <div
+                  className="h-full rounded-l-full transition-all duration-500"
+                  style={{
+                    width: `${promptRatio}%`,
+                    backgroundColor: COLOR_PROMPT,
+                  }}
+                />
+                <div
+                  className="h-full rounded-r-full transition-all duration-500"
+                  style={{
+                    width: `${completionRatio}%`,
+                    backgroundColor: COLOR_COMPLETION,
+                  }}
+                />
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-1.5">
+                    <span
+                      className="h-2 w-2 rounded-full"
+                      style={{ backgroundColor: COLOR_PROMPT }}
+                    />
+                    <span className="text-muted-foreground">Prompt</span>
+                    <span className="font-mono font-semibold text-foreground">
+                      {promptRatio}%
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span
+                      className="h-2 w-2 rounded-full"
+                      style={{ backgroundColor: COLOR_COMPLETION }}
+                    />
+                    <span className="text-muted-foreground">Completion</span>
+                    <span className="font-mono font-semibold text-foreground">
+                      {completionRatio}%
+                    </span>
+                  </div>
+                </div>
+                <span className="text-muted-foreground">
+                  Avg/req:{' '}
+                  <span className="font-mono font-medium text-foreground">
+                    {formatNumber(avgReqSize)}
+                  </span>
+                </span>
+              </div>
+            </div>
+
+            {/* Top models */}
+            <div className="rounded-xl border border-white/[0.06] bg-card p-4">
+              <div className="mb-3 flex items-center justify-between">
+                <span className="text-muted-foreground text-[11px] font-medium uppercase tracking-wider">
+                  Top Models
+                </span>
+                <span className="text-[10px] text-muted-foreground">
+                  tokens
+                </span>
+              </div>
+              <div className="space-y-2">
+                {topModels.map((m, i) => {
+                  const max = topModels[0]?.totalTokens || 1;
+                  const pct = Math.max(8, (m.totalTokens / max) * 100);
+                  return (
+                    <div key={m.model} className="group">
+                      <div className="mb-0.5 flex items-center justify-between">
+                        <span className="max-w-[140px] truncate text-xs text-muted-foreground transition-colors group-hover:text-foreground">
+                          {m.model}
+                        </span>
+                        <span className="font-mono text-[11px] font-medium text-foreground tabular-nums">
+                          {formatNumber(m.totalTokens)}
+                        </span>
+                      </div>
+                      <div className="h-1 w-full overflow-hidden rounded-full bg-white/[0.04]">
+                        <div
+                          className="h-full rounded-full transition-all duration-500"
+                          style={{
+                            width: `${pct}%`,
+                            backgroundColor:
+                              PIE_COLORS[i % PIE_COLORS.length],
+                            opacity: 0.7,
+                          }}
+                        />
+                      </div>
+                    </div>
+                  );
+                })}
+                {topModels.length === 0 && (
+                  <p className="py-4 text-center text-xs text-muted-foreground">
+                    No data
+                  </p>
+                )}
+              </div>
             </div>
           </div>
         )}
 
-        {/* Charts */}
+        {/* ─── Charts — Area + Model ranking ─── */}
-        <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+        <div className="grid grid-cols-1 gap-3 xl:grid-cols-5">
-          {/* Daily Usage Bar Chart */}
+          <div className="xl:col-span-3">
             <ChartCard
-            title={t('usage.dailyUsage')}
+              title={range === '24h' ? 'Hourly Usage' : 'Daily Usage'}
-            isLoading={dailyLoading}
+              isLoading={areaLoading}
-            error={dailyError}
+              error={areaError}
-            isEmpty={isDailyEmpty}
+              isEmpty={isAreaEmpty}
-            onRetry={() => refetchDaily()}
+              onRetry={() =>
-            emptyTitle={t('usage.emptyStateTitle')}
+                range === '24h' ? refetchHourly() : refetchDaily()
-            emptyDescription={t('usage.emptyStateDescription')}
+              }
-            errorMessage={t('usage.loadFailed')}
+              emptyTitle="No usage data"
-            retryLabel={t('usage.retry')}
+              emptyDescription="Data will appear here once proxy requests are recorded."
+              errorMessage="Failed to load usage data"
+              retryLabel="Retry"
             >
-            <div className="h-[280px]">
+              <div className="h-[320px]">
-              <ResponsiveBar
+                <ResponsiveLine
-                data={chartData}
+                  data={areaChartData}
-                keys={['Prompt', 'Completion']}
-                indexBy="name"
-                groupMode="grouped"
                   theme={nivoTheme}
-                colors={barColor}
+                  colors={[COLOR_PROMPT, COLOR_COMPLETION]}
                   margin={{ top: 10, right: 10, bottom: 40, left: 50 }}
-                padding={0.2}
+                  xScale={{ type: 'point' }}
-                innerPadding={2}
+                  yScale={{ type: 'linear', min: 0, stacked: false }}
-                borderRadius={2}
+                  curve="monotoneX"
-                enableGridY={true}
+                  enableArea={true}
+                  areaOpacity={0.08}
+                  areaBlendMode="normal"
+                  enablePoints={true}
+                  pointSize={4}
+                  pointColor={{ theme: 'background' }}
+                  pointBorderWidth={2}
+                  pointBorderColor={{ from: 'serieColor' }}
                   enableGridX={false}
+                  enableGridY={true}
                   gridYValues={5}
                   axisBottom={{
                     tickSize: 0,
-                  tickPadding: 5,
+                    tickPadding: 8,
                     tickRotation: 0,
                   }}
                   axisLeft={{
                     tickSize: 0,
-                  tickPadding: 5,
+                    tickPadding: 8,
                     tickRotation: 0,
-                  format: (v: number) => (v >= 1000 ? `${(v / 1000).toFixed(1)}k` : `${v}`),
+                    format: (v: number) =>
+                      v >= 1000 ? `${(v / 1000).toFixed(1)}k` : `${v}`,
                   }}
-                tooltip={BarTooltip}
+                  tooltip={LineTooltip}
                   legends={[
                     {
-                    dataFrom: 'keys',
                       anchor: 'bottom',
                       direction: 'row',
                       justify: false,
                       translateX: 0,
-                    translateY: 30,
+                      translateY: 36,
                       itemsSpacing: 16,
                       itemWidth: 80,
                       itemHeight: 16,
@@ -378,115 +599,64 @@ function UsagePage() {
                     },
                   ]}
                   animate={true}
+                  motionConfig="gentle"
                 />
               </div>
             </ChartCard>
+          </div>
 
-          {/* Model Usage Donut Chart */}
+          <div className="xl:col-span-2">
             <ChartCard
-            title={t('usage.byModel')}
+              title="Model Distribution"
               isLoading={modelLoading}
               error={modelError}
               isEmpty={isModelEmpty}
               onRetry={() => refetchModel()}
-            emptyTitle={t('usage.emptyStateTitle')}
+              emptyTitle="No model data"
-            emptyDescription={t('usage.emptyStateDescription')}
+              emptyDescription="Model distribution will appear after proxy usage."
-            errorMessage={t('usage.loadFailed')}
+              errorMessage="Failed to load model data"
-            retryLabel={t('usage.retry')}
+              retryLabel="Retry"
             >
-            <div className="h-[280px]">
+              <div className="h-[320px]">
-              <ResponsivePie
-                data={pieData}
-                innerRadius={0.55}
-                padAngle={2}
-                colors={PIE_COLORS}
-                borderWidth={0}
-                theme={nivoTheme}
-                margin={{ top: 10, right: 10, bottom: 40, left: 10 }}
-                tooltip={PieTooltip}
-                legends={[
-                  {
-                    anchor: 'bottom',
-                    direction: 'row',
-                    justify: false,
-                    translateX: 0,
-                    translateY: 30,
-                    itemsSpacing: 16,
-                    itemWidth: 80,
-                    itemHeight: 16,
-                    itemDirection: 'left-to-right',
-                    symbolSize: 8,
-                    symbolShape: 'circle',
-                  },
-                ]}
-                animate={true}
-              />
-            </div>
-          </ChartCard>
-        </div>
-
-        {/* Hourly Usage — 24h only */}
-        {range === '24h' && (
-          <ChartCard
-            title={t('usage.hourlyUsage')}
-            isLoading={hourlyLoading}
-            error={hourlyError}
-            isEmpty={isHourlyEmpty}
-            onRetry={() => refetchHourly()}
-            emptyTitle={t('usage.emptyStateTitle')}
-            emptyDescription={t('usage.emptyStateDescription')}
-            errorMessage={t('usage.loadFailed')}
-            retryLabel={t('usage.retry')}
-          >
-            <div className="h-[280px]">
                 <ResponsiveBar
-                data={hourlyChartData}
+                  data={modelBarData}
-                keys={['Prompt', 'Completion', 'Total']}
+                  keys={['tokens']}
-                indexBy="name"
+                  indexBy="model"
-                groupMode="grouped"
+                  layout="horizontal"
                   theme={nivoTheme}
-                colors={barColor}
+                  colors={PIE_COLORS}
-                margin={{ top: 10, right: 10, bottom: 40, left: 50 }}
+                  colorBy="indexValue"
-                padding={0.2}
+                  margin={{ top: 0, right: 10, bottom: 10, left: 120 }}
-                innerPadding={2}
+                  padding={0.3}
-                borderRadius={2}
+                  borderRadius={4}
-                enableGridY={true}
+                  enableGridX={true}
-                enableGridX={false}
+                  enableGridY={false}
-                gridYValues={5}
+                  gridXValues={4}
-                axisBottom={{
+                  axisBottom={null}
-                  tickSize: 0,
+                  axisLeft={{ tickSize: 0, tickPadding: 8 }}
-                  tickPadding: 5,
+                  axisTop={null}
-                  tickRotation: 0,
+                  axisRight={null}
-                  tickValues: hourlyTickValues,
+                  enableLabel={true}
-                }}
+                  label={(d) => formatNumber(d.value as number)}
-                axisLeft={{
+                  labelSkipWidth={40}
-                  tickSize: 0,
+                  labelTextColor="#e8eaed"
-                  tickPadding: 5,
+                  tooltip={({ indexValue, value }) => (
-                  tickRotation: 0,
+                    <div className="bg-popover rounded-lg border border-white/[0.06] px-3 py-2 shadow-md">
-                  format: (v: number) => (v >= 1000 ? `${(v / 1000).toFixed(1)}k` : `${v}`),
+                      <p className="text-foreground mb-1 text-xs font-medium">
-                }}
+                        {indexValue}
-                tooltip={BarTooltip}
+                      </p>
-                legends={[
+                      <span className="text-foreground font-mono text-xs font-medium">
-                  {
+                        {(value as number).toLocaleString()} tokens
-                    dataFrom: 'keys',
+                      </span>
-                    anchor: 'bottom',
+                    </div>
-                    direction: 'row',
+                  )}
-                    justify: false,
-                    translateX: 0,
-                    translateY: 30,
-                    itemsSpacing: 16,
-                    itemWidth: 80,
-                    itemHeight: 16,
-                    itemDirection: 'left-to-right',
-                    symbolSize: 8,
-                    symbolShape: 'circle',
-                  },
-                ]}
                   animate={true}
+                  motionConfig="gentle"
                 />
               </div>
             </ChartCard>
-        )}
+          </div>
+        </div>
       </div>
     </div>
   );

src/server/main.ts

@@ -22,9 +22,13 @@ export async function bootstrapNestServer(config: ProxyConfig): Promise<boolean>
   setServerConfig(config);
 
   try {
-    app = await NestFactory.create<NestFastifyApplication>(AppModule, new FastifyAdapter(), {
+    app = await NestFactory.create<NestFastifyApplication>(
+      AppModule,
+      new FastifyAdapter({ bodyLimit: 10 * 1024 * 1024 }),
+      {
         logger: ['error', 'warn', 'log'],
-    });
+      },
+    );
 
     // Enable CORS
     app.enableCors();

src/server/modules/proxy/gemini.controller.ts

@@ -16,7 +16,7 @@ import { Observable } from 'rxjs';
 
 import { ProxyGuard } from './proxy.guard';
 import { ProxyService } from './proxy.service';
-import { GeminiRequest, GeminiResponse } from './interfaces/request-interfaces';
+import type { GeminiRequest, GeminiResponse } from './interfaces/request-interfaces';
 import { getServerConfig } from '../../server-config';
 import { getAllDynamicModels } from '../../../lib/geminiNexus/ModelMapping';
 import { TokenManagerService } from './token-manager.service';

src/server/modules/proxy/proxy-replay.service.ts

@@ -1,7 +1,6 @@
 import { Injectable, Logger, NotFoundException, BadRequestException, Inject } from '@nestjs/common';
 import { registerProxyAdvancedService } from '../../../ipc/proxy-advanced/service-registry';
 import { ProxyService } from './proxy.service';
-import { v4 as uuidv4 } from 'uuid';
 import {
   OpenAIChatRequest,
   AnthropicChatRequest,

src/server/modules/proxy/proxy.controller.ts

@@ -21,7 +21,7 @@ import { ProxyService, ProxyRequestContext, ProxyConfigOverride } from './proxy.
 import { ProxyReplayService } from './proxy-replay.service';
 import { Observable, interval, map } from 'rxjs';
 import { trafficLogger } from '../../../utils/traffic-logger';
-import {
+import type {
   OpenAIChatRequest,
   AnthropicChatRequest,
   OpenAIChatResponse,
@@ -223,15 +223,7 @@ export class ProxyController {
         this.tokenManager?.getAllCollectedModels(),
       );
 
-      const capabilitiesMap: Record<string, { vision: boolean; streaming: boolean; jsonMode: boolean; audio: boolean; imageGeneration: boolean }> = {
+      const capabilitiesMap = this.buildCapabilitiesMap();
-        'gemini-3-pro': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: true },
-        'gemini-3-pro-image': { vision: true, streaming: false, jsonMode: false, audio: false, imageGeneration: true },
-        'gemini-3-flash': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-        'gemini-3-flash-lite': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-        'claude-3-5-sonnet': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-        'claude-3-5-haiku': { vision: false, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-        'claude-3-opus': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
-      };
 
       const data = modelIds.map((id) => {
         const baseId = Object.keys(capabilitiesMap).find((key) => id.includes(key)) ?? 'gemini-3-flash';
@@ -265,6 +257,34 @@ export class ProxyController {
     }
   }
 
+  private buildCapabilitiesMap(): Record<string, { vision: boolean; streaming: boolean; jsonMode: boolean; audio: boolean; imageGeneration: boolean }> {
+    const allTokens = this.tokenManager?.getAllTokens() ?? [];
+    const map: Record<string, { vision: boolean; streaming: boolean; jsonMode: boolean; audio: boolean; imageGeneration: boolean }> = {};
+
+    for (const [, tokenData] of allTokens) {
+      for (const [modelId, modelInfo] of Object.entries(tokenData.quota?.models ?? {})) {
+        if (map[modelId]) continue;
+        const baseId = modelId.toLowerCase();
+        const isProImage = baseId.includes('gemini-3-pro') && baseId.includes('image');
+        map[baseId] = {
+          vision: modelInfo.supports_images ?? false,
+          streaming: isProImage ? false : true,
+          jsonMode: isProImage ? false : true,
+          audio: false,
+          imageGeneration: baseId.includes('gemini-3-pro') && !baseId.includes('flash'),
+        };
+      }
+    }
+
+    if (Object.keys(map).length === 0) {
+      return {
+        'gemini-3-flash': { vision: true, streaming: true, jsonMode: true, audio: false, imageGeneration: false },
+      };
+    }
+
+    return map;
+  }
+
   @Post('batch/completions')
   async batchCompletions(
     @Body() body: { requests: OpenAIChatRequest[] },

src/server/modules/proxy/proxy.service.ts

@@ -77,12 +77,15 @@ export class ProxyService {
     if (!usage) {
       return;
     }
+    const prompt = usage.promptTokenCount ?? 0;
+    const completion = usage.candidatesTokenCount ?? 0;
+    const total = usage.totalTokenCount ?? (prompt + completion);
     this.tokenUsageService.recordUsage({
       accountId,
       model,
-      promptTokens: usage.promptTokenCount ?? 0,
+      promptTokens: prompt,
-      completionTokens: usage.candidatesTokenCount ?? 0,
+      completionTokens: completion,
-      totalTokens: usage.totalTokenCount ?? 0,
+      totalTokens: total,
       timestamp: Date.now(),
       requestType,
       isEstimated,
@@ -319,14 +322,15 @@ export class ProxyService {
               if (startMsg) subscriber.next(startMsg);
             }
 
-            const candidate = json.candidates?.[0];
+            const responsePayload = json.response ?? json;
+            const candidate = responsePayload.candidates?.[0];
             const part = candidate?.content?.parts?.[0];
 
             if (candidate?.finishReason) {
               lastFinishReason = candidate.finishReason;
             }
-            if (json.usageMetadata) {
+            if (responsePayload.usageMetadata) {
-              lastUsageMetadata = json.usageMetadata;
+              lastUsageMetadata = responsePayload.usageMetadata;
             }
 
             if (this.isGeminiPart(part)) {
@@ -605,10 +609,11 @@ export class ProxyService {
           if (dataStr === '[DONE]') continue;
           try {
             const parsed = JSON.parse(dataStr);
-            if (parsed?.usageMetadata) {
+            const responsePayload = parsed?.response ?? parsed;
-              lastUsageMetadata = parsed.usageMetadata;
+            if (responsePayload?.usageMetadata) {
+              lastUsageMetadata = responsePayload.usageMetadata;
             }
-            const text = parsed?.candidates?.[0]?.content?.parts?.[0]?.text;
+            const text = responsePayload?.candidates?.[0]?.content?.parts?.[0]?.text;
             if (typeof text === 'string') {
               accumulatedText += text;
             }
@@ -844,6 +849,7 @@ export class ProxyService {
     request: OpenAIChatRequest,
     context?: ProxyRequestContext,
     configOverride?: ProxyConfigOverride,
+    _requestId?: string,
   ): Promise<OpenAIChatResponse | Observable<string>> {
     const targetModel = this.resolveTargetModel(request.model);
     const extraHeaders = this.createModelSpecificHeaders(request.model);
@@ -1292,7 +1298,11 @@ export class ProxyService {
               if (part.functionCall) {
                 pushRoleChunk();
                 const currentToolIndex = toolCallIndex++;
-                const toolCallChunk = {
+                const toolCallId = part.functionCall.id || `${part.functionCall.name}-${uuidv4()}`;
+                const argsJson = JSON.stringify(part.functionCall.args || {});
+
+                // First delta: id, type, name, empty arguments
+                pushChunk({
                   id: streamId,
                   object: 'chat.completion.chunk',
                   created: created,
@@ -1304,11 +1314,11 @@ export class ProxyService {
                         tool_calls: [
                           {
                             index: currentToolIndex,
-                            id: part.functionCall.id || `${part.functionCall.name}-${uuidv4()}`,
+                            id: toolCallId,
                             type: 'function',
                             function: {
                               name: part.functionCall.name,
-                              arguments: JSON.stringify(part.functionCall.args || {}),
+                              arguments: '',
                             },
                           },
                         ],
@@ -1316,8 +1326,35 @@ export class ProxyService {
                       finish_reason: null,
                     },
                   ],
-                };
+                });
-                pushChunk(toolCallChunk);
+
+                // Subsequent deltas: only arguments (split if large to respect SSE framing)
+                const ARG_CHUNK_SIZE = 1000;
+                for (let i = 0; i < argsJson.length; i += ARG_CHUNK_SIZE) {
+                  const slice = argsJson.slice(i, i + ARG_CHUNK_SIZE);
+                  pushChunk({
+                    id: streamId,
+                    object: 'chat.completion.chunk',
+                    created: created,
+                    model: model,
+                    choices: [
+                      {
+                        index: 0,
+                        delta: {
+                          tool_calls: [
+                            {
+                              index: currentToolIndex,
+                              function: {
+                                arguments: slice,
+                              },
+                            },
+                          ],
+                        },
+                        finish_reason: null,
+                      },
+                    ],
+                  });
+                }
                 continue;
               }
 

src/server/modules/proxy/rate-limit-tracker.ts

@@ -180,6 +180,12 @@ export class RateLimitTracker {
         deleted++;
       }
     }
+    for (const [key, entry] of this.failureCounts.entries()) {
+      if (entry.lastFailureMs + FAILURE_COUNT_EXPIRY_MS <= now) {
+        this.failureCounts.delete(key);
+        deleted++;
+      }
+    }
     return deleted;
   }
 

src/server/modules/proxy/request-user-agent.ts

@@ -1,11 +1,12 @@
 import axios from 'axios';
 import { isString } from 'lodash-es';
+import { version } from '../../../../package.json';
 import { getGeminiNexusVersion } from '../../../utils/geminiNexusVersion';
 import { logger } from '../../../utils/logger';
 
 const REMOTE_VERSION_URL = 'https://antigravity-auto-updater-974169037036.us-central1.run.app';
 const CHANGELOG_URL = 'https://antigravity.google/changelog';
-export const FALLBACK_VERSION = '1.22.2';
+export const FALLBACK_VERSION = version;
 const DEFAULT_REMOTE_TIMEOUT_MS = 2500;
 const VERSION_REGEX = /\d+\.\d+\.\d+/g;
 

src/server/modules/proxy/token-manager.service.ts

@@ -8,7 +8,7 @@ import { RateLimitReason, RateLimitTracker } from './rate-limit-tracker';
 import { updateDynamicForwardingRules } from '../../../lib/geminiNexus/ModelMapping';
 import { registerProxyAdvancedService } from '../../../ipc/proxy-advanced/service-registry';
 
-interface TokenData {
+export interface TokenData {
   email: string;
   account_id: string;
   access_token: string;
@@ -36,7 +36,7 @@ interface GetNextTokenOptions {
   accountId?: string;
 }
 
-type TokenEntry = [string, TokenData];
+export type TokenEntry = [string, TokenData];
 
 interface CircuitBreakerEntry {
   failureCount: number;
@@ -1158,6 +1158,10 @@ export class TokenManagerService implements OnModuleInit {
     return GoogleAPIService.normalizeRefreshedOAuthClientKey(currentToken, refreshedClientKey);
   }
 
+  getAllTokens(): TokenEntry[] {
+    return Array.from(this.tokens.entries());
+  }
+
   getAllCollectedModels(): Set<string> {
     const allModels = new Set<string>();
     for (const tokenData of this.tokens.values()) {

src/styles/global.css

@@ -1,87 +1,105 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+
 @import 'tailwindcss';
 
 @plugin 'tailwindcss-animate';
 
 @custom-variant dark (&:is(.dark *));
 
-@theme {
+/*
-  --color-border: hsl(var(--border));
+ * Gemini Nexus Design System
-  --color-input: hsl(var(--input));
+ * Style: Minimal Dark Professional
-  --color-ring: hsl(var(--ring));
+ * Fonts: Inter (UI) + JetBrains Mono (code)
-  --color-background: hsl(var(--background));
+ * Palette: Refined Slate + Emerald accents
-  --color-foreground: hsl(var(--foreground));
+ */
+@theme inline {
+  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
 
-  --color-primary: hsl(var(--primary));
+  --radius: 0.625rem;
-  --color-primary-foreground: hsl(var(--primary-foreground));
-
-  --color-secondary: hsl(var(--secondary));
-  --color-secondary-foreground: hsl(var(--secondary-foreground));
-
-  --color-destructive: hsl(var(--destructive));
-  --color-destructive-foreground: hsl(var(--destructive-foreground));
-
-  --color-muted: hsl(var(--muted));
-  --color-muted-foreground: hsl(var(--muted-foreground));
-
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-
-  --color-popover: hsl(var(--popover));
-  --color-popover-foreground: hsl(var(--popover-foreground));
-
-  --color-card: hsl(var(--card));
-  --color-card-foreground: hsl(var(--card-foreground));
-
-  --font-sans: Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
-  --font-mono: Geist Mono, monospace;
-  --font-tomorrow: Tomorrow, sans-serif;
-
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
 
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-fade-in: fade-in 0.2s ease-out;
+  --animate-slide-up: slide-up 0.25s ease-out;
+  --animate-scale-in: scale-in 0.2s ease-out;
 
   @keyframes accordion-down {
-    from {
+    from { height: 0; }
-      height: 0;
+    to { height: var(--radix-accordion-content-height); }
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
   }
   @keyframes accordion-up {
-    from {
+    from { height: var(--radix-accordion-content-height); }
-      height: var(--radix-accordion-content-height);
+    to { height: 0; }
   }
-    to {
+  @keyframes fade-in {
-      height: 0;
+    from { opacity: 0; }
+    to { opacity: 1; }
   }
+  @keyframes slide-up {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes scale-in {
+    from { opacity: 0; transform: scale(0.97); }
+    to { opacity: 1; transform: scale(1); }
   }
 }
 
+/* Container utility */
 @utility container {
   margin-inline: auto;
   padding-inline: 2rem;
-  @media (width >= --theme(--breakpoint-sm)) {
-    max-width: none;
-  }
   @media (width >= 1400px) {
     max-width: 1400px;
   }
 }
 
+/* Font faces — local fallbacks */
 @layer base {
-  @font-face {
-    font-family: 'Geist';
-
-    src: url('../assets/fonts/geist/geist.ttf') format('truetype');
-  }
   @font-face {
     font-family: 'Geist Mono';
     font-display: swap;
-
     src: url('../assets/fonts/geist-mono/geist-mono.ttf') format('truetype');
   }
 
@@ -89,296 +107,157 @@
     font-family: 'Tomorrow';
     font-weight: 400;
     font-style: normal;
-
     src: url('../assets/fonts/tomorrow/tomorrow-regular.ttf') format('truetype');
   }
   @font-face {
     font-family: 'Tomorrow';
     font-weight: 400;
     font-style: italic;
-
     src: url('../assets/fonts/tomorrow/tomorrow-italic.ttf') format('truetype');
   }
   @font-face {
     font-family: 'Tomorrow';
     font-weight: 700;
     font-style: normal;
-
     src: url('../assets/fonts/tomorrow/tomorrow-bold.ttf') format('truetype');
   }
   @font-face {
     font-family: 'Tomorrow';
     font-weight: 700;
     font-style: italic;
-
     src: url('../assets/fonts/tomorrow/tomorrow-bold-italic.ttf') format('truetype');
   }
-  body {
-    letter-spacing: var(--tracking-normal);
-  }
 }
 
+/*
+ * Refined dark color palette
+ * Inspired by: Linear, Vercel, Raycast
+ * Deep neutral darks with subtle warm undertones
+ */
 @layer base {
-  :root {
+  :root,
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-  }
-
   .dark {
-    --background: 222.2 84% 4.9%;
+    /* Core surfaces */
-    --foreground: 210 40% 98%;
+    --background: #0a0a0f;
+    --foreground: #e8eaed;
+    --card: #111118;
+    --card-foreground: #e8eaed;
+    --popover: #16161e;
+    --popover-foreground: #e8eaed;
 
-    --card: 222.2 84% 4.9%;
+    /* Interactive elements */
-    --card-foreground: 210 40% 98%;
+    --primary: #e8eaed;
+    --primary-foreground: #0a0a0f;
+    --secondary: #1c1c26;
+    --secondary-foreground: #c4c7cc;
+    --muted: #16161e;
+    --muted-foreground: #6b7280;
+    --accent: #10b981;
+    --accent-foreground: #ffffff;
 
-    --popover: 222.2 84% 4.9%;
+    /* State colors */
-    --popover-foreground: 210 40% 98%;
+    --destructive: #ef4444;
+    --destructive-foreground: #ffffff;
 
-    --primary: 210 40% 98%;
+    /* Boundaries */
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --border: #ffffff0d;
+    --input: #1c1c26;
+    --ring: #10b981;
 
-    --secondary: 217.2 32.6% 17.5%;
+    --radius: 0.625rem;
-    --secondary-foreground: 210 40% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
+    /* Chart palette — vibrant on dark */
-    --muted-foreground: 215 20.2% 65.1%;
+    --chart-1: #6366f1;
+    --chart-2: #10b981;
+    --chart-3: #f59e0b;
+    --chart-4: #ec4899;
+    --chart-5: #8b5cf6;
 
-    --accent: 217.2 32.6% 17.5%;
+    /* Sidebar */
-    --accent-foreground: 210 40% 98%;
+    --sidebar: #0a0a0f;
-
+    --sidebar-foreground: #e8eaed;
-    --destructive: 0 62.8% 30.6%;
+    --sidebar-primary: #e8eaed;
-    --destructive-foreground: 210 40% 98%;
+    --sidebar-primary-foreground: #0a0a0f;
-
+    --sidebar-accent: #10b981;
-    --border: 217.2 32.6% 17.5%;
+    --sidebar-accent-foreground: #ffffff;
-    --input: 217.2 32.6% 17.5%;
+    --sidebar-border: #ffffff0d;
-    --ring: 212.7 26.8% 83.9%;
+    --sidebar-ring: #10b981;
   }
 }
 
+/* Global base styles */
 @layer base {
-  body {
+  * {
-    @apply overflow-hidden;
+    @apply border-border;
   }
+
+  body {
+    @apply bg-background text-foreground overflow-hidden antialiased;
+    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
   .draglayer {
     @apply bg-background;
     -webkit-app-region: drag;
   }
+
   button {
     @apply cursor-pointer;
   }
+
+  /* Smooth scrollbar for dark mode */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #ffffff1a;
+    border-radius: 3px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #ffffff33;
   }
 
-@layer base {
+  /* Selection color */
-  * {
+  ::selection {
-    @apply border-border outline-ring/50;
+    background: #10b98133;
-  }
+    color: #e8eaed;
-  body {
-    @apply bg-background text-foreground;
   }
 }
 
-@theme inline {
+/* Utility classes for the design system */
-  --font-sans: Geist, sans-serif;
+@layer utilities {
-  --font-mono: Geist Mono, monospace;
+  .glass {
-  --font-serif: Georgia, serif;
+    background: rgba(17, 17, 24, 0.6);
-  --radius: 0.5rem;
+    backdrop-filter: blur(12px);
-  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
+    -webkit-backdrop-filter: blur(12px);
-  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
-  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
-  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
-  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
-  --tracking-normal: var(--tracking-normal);
-  --shadow-2xl: var(--shadow-2xl);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-md: var(--shadow-md);
-  --shadow: var(--shadow);
-  --shadow-sm: var(--shadow-sm);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-2xs: var(--shadow-2xs);
-  --spacing: var(--spacing);
-  --letter-spacing: var(--letter-spacing);
-  --shadow-offset-y: var(--shadow-offset-y);
-  --shadow-offset-x: var(--shadow-offset-x);
-  --shadow-spread: var(--shadow-spread);
-  --shadow-blur: var(--shadow-blur);
-  --shadow-opacity: var(--shadow-opacity);
-  --color-shadow-color: var(--shadow-color);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
-  --color-background: var(--background);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
   }
 
-:root {
+  .glass-border {
-  --background: oklch(0.99 0 0);
+    border: 1px solid rgba(255, 255, 255, 0.06);
-  --foreground: oklch(0 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0 0 0);
-  --popover: oklch(0.99 0 0);
-  --popover-foreground: oklch(0 0 0);
-  --primary: oklch(0 0 0);
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.94 0 0);
-  --secondary-foreground: oklch(0 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.44 0 0);
-  --accent: oklch(0.94 0 0);
-  --accent-foreground: oklch(0 0 0);
-  --destructive: oklch(0.63 0.19 23.03);
-  --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.92 0 0);
-  --input: oklch(0.94 0 0);
-  --ring: oklch(0 0 0);
-  --chart-1: oklch(0.81 0.17 75.35);
-  --chart-2: oklch(0.55 0.22 264.53);
-  --chart-3: oklch(0.72 0 0);
-  --chart-4: oklch(0.92 0 0);
-  --chart-5: oklch(0.56 0 0);
-  --radius: 0.5rem;
-  --sidebar: oklch(0.99 0 0);
-  --sidebar-foreground: oklch(0 0 0);
-  --sidebar-primary: oklch(0 0 0);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.94 0 0);
-  --sidebar-accent-foreground: oklch(0 0 0);
-  --sidebar-border: oklch(0.94 0 0);
-  --sidebar-ring: oklch(0 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-opacity: 0.18;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-offset-x: 0px;
-  --shadow-offset-y: 1px;
-  --letter-spacing: 0em;
-  --spacing: 0.25rem;
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
-  --tracking-normal: 0em;
   }
 
-.dark {
+  .glow-accent {
-  --background: oklch(0 0 0);
+    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
-  --foreground: oklch(1 0 0);
+  }
-  --card: oklch(0.14 0 0);
+
-  --card-foreground: oklch(1 0 0);
+  .glow-accent-sm {
-  --popover: oklch(0.18 0 0);
+    box-shadow: 0 0 10px rgba(16, 185, 129, 0.08);
-  --popover-foreground: oklch(1 0 0);
+  }
-  --primary: oklch(1 0 0);
+
-  --primary-foreground: oklch(0 0 0);
+  .text-gradient {
-  --secondary: oklch(0.25 0 0);
+    background: linear-gradient(135deg, #e8eaed 0%, #6b7280 100%);
-  --secondary-foreground: oklch(1 0 0);
+    -webkit-background-clip: text;
-  --muted: oklch(0.23 0 0);
+    -webkit-text-fill-color: transparent;
-  --muted-foreground: oklch(0.72 0 0);
+    background-clip: text;
-  --accent: oklch(0.32 0 0);
+  }
-  --accent-foreground: oklch(1 0 0);
+
-  --destructive: oklch(0.69 0.2 23.91);
+  .animate-in {
-  --destructive-foreground: oklch(0 0 0);
+    animation: fade-in 0.2s ease-out, slide-up 0.25s ease-out;
-  --border: oklch(0.26 0 0);
+  }
-  --input: oklch(0.32 0 0);
-  --ring: oklch(0.72 0 0);
-  --chart-1: oklch(0.81 0.17 75.35);
-  --chart-2: oklch(0.58 0.21 260.84);
-  --chart-3: oklch(0.56 0 0);
-  --chart-4: oklch(0.44 0 0);
-  --chart-5: oklch(0.92 0 0);
-  --radius: 0.5rem;
-  --sidebar: oklch(0.18 0 0);
-  --sidebar-foreground: oklch(1 0 0);
-  --sidebar-primary: oklch(1 0 0);
-  --sidebar-primary-foreground: oklch(0 0 0);
-  --sidebar-accent: oklch(0.32 0 0);
-  --sidebar-accent-foreground: oklch(1 0 0);
-  --sidebar-border: oklch(0.32 0 0);
-  --sidebar-ring: oklch(0.72 0 0);
-  --font-sans: Geist, sans-serif;
-  --font-serif: Georgia, serif;
-  --font-mono: Geist Mono, monospace;
-  --shadow-color: hsl(0 0% 0%);
-  --shadow-opacity: 0.18;
-  --shadow-blur: 2px;
-  --shadow-spread: 0px;
-  --shadow-offset-x: 0px;
-  --shadow-offset-y: 1px;
-  --letter-spacing: 0em;
-  --spacing: 0.25rem;
-  --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
-  --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
-  --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
-  --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
-  --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
-  --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
 }

src/tests/unit/cloudHandler-sync.test.ts

@@ -60,6 +60,7 @@ vi.mock('../../ipc/database/dbConnection', () => ({
 vi.mock('../../utils/paths', () => ({
   getGeminiNexusDbPaths: () => ['mock-db'],
   getCloudAccountsDbPath: () => 'mock-cloud-db',
+  getAgentDir: vi.fn(() => '/mock/agent/dir'),
 }));
 
 vi.mock('../../utils/logger', () => ({

src/tests/unit/components/ProviderGroup.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import { renderWithProviders } from '@/tests/unit/test-utils';

src/tests/unit/components/ui/button.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import { renderWithProviders } from '@/tests/unit/test-utils';
 import { Button, buttonVariants } from '@/components/ui/button';

src/tests/unit/components/usage/ChartCard.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import { renderWithProviders } from '@/tests/unit/test-utils';

src/tests/unit/components/usage/StatCard.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { screen } from '@testing-library/react';
 import { renderWithProviders } from '@/tests/unit/test-utils';
 import { StatCard } from '@/components/usage/StatCard';

src/tests/unit/database.test.ts

@@ -1,26 +1,42 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import {
   getDatabaseConnection,
   getCurrentAccountInfo,
   backupAccount,
   restoreAccount,
 } from '../../ipc/database/handler';
-import Database from 'better-sqlite3';
+import { openDrizzleConnection } from '../../ipc/database/dbConnection';
+import { getGeminiNexusDbPaths } from '../../utils/paths';
 import fs from 'fs';
-import path from 'path';
 
-// Mock paths to use a temp DB
+const mockClose = vi.fn();
-const tempDbPath = path.join(process.cwd(), 'temp_test.vscdb');
+const mockRun = vi.fn();
 
-vi.mock('../../utils/paths', async () => {
+function createMockOrm(rows: Record<string, unknown>[] = []) {
-  const path = await import('path');
+  let callIndex = 0;
-  const tempDbPath = path.join(process.cwd(), 'temp_test.vscdb');
+  const chain = {
-  return {
+    from: vi.fn().mockReturnThis(),
-    getGeminiNexusDbPath: () => tempDbPath,
+    where: vi.fn().mockReturnThis(),
-    getGeminiNexusDbPaths: () => [tempDbPath],
+    all: vi.fn().mockImplementation(() => {
-    getAgentDir: () => path.join(process.cwd(), 'temp_test_agent'),
+      const row = rows[callIndex] ?? null;
+      callIndex++;
+      return row ? [row] : [];
+    }),
+    values: vi.fn().mockReturnThis(),
+    onConflictDoUpdate: vi.fn().mockReturnThis(),
+    run: mockRun,
   };
-});
+  return {
+    select: vi.fn().mockReturnValue(chain),
+    insert: vi.fn().mockReturnValue(chain),
+    transaction: vi.fn().mockImplementation((fn: (...args: any[]) => any) => {
+      const tx = {
+        insert: vi.fn().mockReturnValue(chain),
+      };
+      return fn(tx);
+    }),
+  };
+}
 
 vi.mock('../../utils/logger', () => ({
   logger: {
@@ -31,42 +47,88 @@ vi.mock('../../utils/logger', () => ({
   },
 }));
 
-// NOTE: These tests are skipped because better-sqlite3 is compiled for Electron, not Node.js.
+vi.mock('../../utils/paths', () => ({
-// Run these tests manually in an Electron environment.
+  getGeminiNexusDbPaths: vi.fn().mockReturnValue(['/tmp/test.vscdb']),
-describe.skip('Database Handler', () => {
+}));
+
+vi.mock('../../ipc/database/dbConnection', () => ({
+  openDrizzleConnection: vi.fn().mockImplementation(() => ({
+    raw: { close: mockClose } as any,
+    orm: createMockOrm() as any,
+  })),
+}));
+
+vi.mock('fs', () => ({
+  default: {
+    existsSync: vi.fn().mockReturnValue(true),
+    mkdirSync: vi.fn(),
+  },
+  existsSync: vi.fn().mockReturnValue(true),
+  mkdirSync: vi.fn(),
+}));
+
+vi.mock('../../utils/sqlite', () => ({
+  parseRow: vi.fn().mockImplementation((_schema, row) => row ?? null),
+}));
+
+vi.mock('../../ipc/database/schema', () => ({
+  itemTable: {},
+}));
+
+vi.mock('drizzle-orm', () => ({
+  eq: vi.fn().mockReturnValue({}),
+}));
+
+describe('Database Handler', () => {
   beforeEach(() => {
-    // Create a fresh DB for each test
+    vi.clearAllMocks();
-    const db = new Database(tempDbPath);
+    vi.mocked(getGeminiNexusDbPaths).mockReturnValue(['/tmp/test.vscdb']);
-    db.exec('CREATE TABLE IF NOT EXISTS ItemTable (key TEXT PRIMARY KEY, value TEXT)');
+    vi.mocked(openDrizzleConnection).mockImplementation(() => ({
-    db.prepare('INSERT INTO ItemTable (key, value) VALUES (?, ?)').run(
+      raw: { close: mockClose } as any,
-      'geminiNexusAuthStatus',
+      orm: createMockOrm() as any,
-      JSON.stringify({
+    }));
-        user: { email: '[email protected]', name: 'Test User' },
+    vi.mocked(fs.existsSync).mockReturnValue(true);
-      }),
-    );
-    db.close();
-  });
-
-  afterEach(() => {
-    if (fs.existsSync(tempDbPath)) {
-      fs.unlinkSync(tempDbPath);
-    }
   });
 
+  describe('getDatabaseConnection', () => {
     it('should connect to database', () => {
-    const { raw } = getDatabaseConnection();
+      const conn = getDatabaseConnection();
-    expect(raw).toBeDefined();
+      expect(conn).toBeDefined();
-    raw.close();
+      expect(conn.raw).toBeDefined();
+      expect(conn.orm).toBeDefined();
+      conn.raw.close();
+      expect(mockClose).toHaveBeenCalled();
+    });
   });
 
+  describe('getCurrentAccountInfo', () => {
     it('should get current account info', () => {
+      vi.mocked(openDrizzleConnection).mockReturnValueOnce({
+        raw: { close: mockClose } as any,
+        orm: createMockOrm([
+          { value: JSON.stringify({ user: { email: '[email protected]', name: 'Test User' } }) },
+        ]) as any,
+      });
+
       const info = getCurrentAccountInfo();
       expect(info.email).toBe('[email protected]');
       expect(info.name).toBe('Test User');
       expect(info.isAuthenticated).toBe(true);
+      expect(mockClose).toHaveBeenCalled();
+    });
   });
 
+  describe('backupAccount', () => {
     it('should backup account', () => {
+      vi.mocked(openDrizzleConnection).mockReturnValueOnce({
+        raw: { close: mockClose } as any,
+        orm: createMockOrm([
+          { value: JSON.stringify({ user: { email: '[email protected]', name: 'Test User' } }) },
+          { value: JSON.stringify({ state: 'ready' }) },
+          { value: JSON.stringify({ token: 'abc' }) },
+        ]) as any,
+      });
+
       const account = {
         id: '123',
         name: 'Test User',
@@ -76,10 +138,22 @@ describe.skip('Database Handler', () => {
       };
       const backup = backupAccount(account);
       expect(backup.account).toEqual(account);
-    expect(backup.data['geminiNexusAuthStatus']).toBeDefined();
+      expect(backup.data['geminiNexusAuthStatus']).toEqual({
+        user: { email: '[email protected]', name: 'Test User' },
+      });
+      expect(backup.data['account_email']).toBe('[email protected]');
+      expect(backup.data['backup_time']).toBeDefined();
+      expect(mockClose).toHaveBeenCalled();
+    });
   });
 
+  describe('restoreAccount', () => {
     it('should restore account', () => {
+      vi.mocked(openDrizzleConnection).mockReturnValueOnce({
+        raw: { close: mockClose } as any,
+        orm: createMockOrm() as any,
+      });
+
       const backup = {
         version: '1.0',
         account: {
@@ -97,19 +171,9 @@ describe.skip('Database Handler', () => {
         },
       };
 
-    restoreAccount(backup);
+      expect(() => restoreAccount(backup as any)).not.toThrow();
-
+      expect(mockRun).toHaveBeenCalled();
-    const db = new Database(tempDbPath);
+      expect(mockClose).toHaveBeenCalled();
-    const row = db
+    });
-      .prepare("SELECT value FROM ItemTable WHERE key = 'geminiNexusAuthStatus'")
-      .get() as { value: string };
-    const value = JSON.parse(row.value);
-    expect(value.user.email).toBe('[email protected]');
-
-    const newRow = db.prepare("SELECT value FROM ItemTable WHERE key = 'newKey'").get() as {
-      value: string;
-    };
-    expect(newRow.value).toBe('newValue'); // JSON stringified
-    db.close();
   });
 });

src/tests/unit/hooks/useCloudAccounts.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 // @vitest-environment happy-dom
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { renderHook } from '@testing-library/react';
@@ -55,7 +56,7 @@ function getLastQueryOptions() {
   return mockedUseQuery.mock.lastCall?.[0];
 }
 
-function getLastMutationOptions() {
+function getLastMutationOptions(): any {
   return mockedUseMutation.mock.lastCall?.[0];
 }
 
@@ -120,7 +121,7 @@ describe('useCloudAccounts hooks', () => {
       ];
 
       options?.onSuccess?.(updatedAccount);
-      const updater = mockSetQueryData.mock.calls[0][1] as Function;
+      const updater = mockSetQueryData.mock.calls[0][1] as (prev: CloudAccount[] | undefined) => CloudAccount[];
       const result = updater(oldData);
       expect(result).toEqual([oldData[0], updatedAccount]);
       expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: QUERY_KEYS.cloudAccounts });
@@ -132,7 +133,7 @@ describe('useCloudAccounts hooks', () => {
       const updatedAccount: CloudAccount = { id: 'acc-1' } as CloudAccount;
 
       options?.onSuccess?.(updatedAccount);
-      const updater = mockSetQueryData.mock.calls[0][1] as Function;
+      const updater = mockSetQueryData.mock.calls[0][1] as (prev: CloudAccount[] | undefined) => CloudAccount[];
       const result = updater(undefined);
       expect(result).toEqual([updatedAccount]);
     });

src/tests/unit/ipc/database-handler.test.ts

@@ -56,7 +56,7 @@ vi.mock('../../../ipc/database/dbConnection', () => ({
   openDrizzleConnection: vi.fn().mockImplementation(() => ({
     raw: { close: mockClose },
     orm: createMockOrm(),
-  })),
+  }) as any),
 }));
 
 vi.mock('fs', () => ({
@@ -86,8 +86,8 @@ describe('Database Handler', () => {
     vi.mocked(getGeminiNexusDbPaths).mockReturnValue(['/tmp/test.vscdb']);
     vi.mocked(openDrizzleConnection).mockImplementation(() => ({
       raw: { close: mockClose },
-      orm: createMockOrm() as any,
+      orm: createMockOrm(),
-    }));
+    }) as any);
     vi.mocked(fs.existsSync).mockReturnValue(true);
   });
 
@@ -146,8 +146,8 @@ describe('Database Handler', () => {
         raw: { close: mockClose },
         orm: createMockOrm([
           { value: JSON.stringify({ user: { email: '[email protected]', name: 'Auth User' } }) },
-        ]) as any,
+        ]),
-      });
+      } as any);
 
       const info = getCurrentAccountInfo();
       expect(info.email).toBe('[email protected]');
@@ -162,8 +162,8 @@ describe('Database Handler', () => {
         orm: createMockOrm([
           { value: null },
           { value: JSON.stringify({ user: { email: '[email protected]', name: 'Init User' } }) },
-        ]) as any,
+        ]),
-      });
+      } as any);
 
       const info = getCurrentAccountInfo();
       expect(info.email).toBe('[email protected]');
@@ -174,8 +174,8 @@ describe('Database Handler', () => {
     it('should return empty info when no keys found', () => {
       vi.mocked(openDrizzleConnection).mockReturnValueOnce({
         raw: { close: mockClose },
-        orm: createMockOrm([{ value: null }, { value: null }, { value: null }, { value: null }]) as any,
+        orm: createMockOrm([{ value: null }, { value: null }, { value: null }, { value: null }]),
-      });
+      } as any);
 
       const info = getCurrentAccountInfo();
       expect(info.email).toBe('');
@@ -192,8 +192,8 @@ describe('Database Handler', () => {
           { value: JSON.stringify({ status: 'active' }) },
           { value: JSON.stringify({ state: 'ready' }) },
           { value: JSON.stringify({ token: 'abc' }) },
-        ]) as any,
+        ]),
-      });
+      } as any);
 
       const account = {
         id: 'acc-1',
@@ -219,8 +219,8 @@ describe('Database Handler', () => {
     it('should restore keys to existing database', () => {
       vi.mocked(openDrizzleConnection).mockReturnValueOnce({
         raw: { close: mockClose },
-        orm: createMockOrm() as any,
+        orm: createMockOrm(),
-      });
+      } as any);
 
       const backup = {
         version: '1.0',

src/tests/unit/ipc/device-handler.test.ts

@@ -0,0 +1,131 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import {
+  generateDeviceProfile,
+  applyDeviceProfile,
+  readCurrentDeviceProfile,
+} from '../../../ipc/device/handler';
+import { getGeminiNexusStoragePaths } from '../../../utils/paths';
+import fs from 'fs';
+
+vi.mock('fs', () => ({
+  default: {
+    existsSync: vi.fn(),
+    readFileSync: vi.fn(),
+    writeFileSync: vi.fn(),
+    copyFileSync: vi.fn(),
+    mkdirSync: vi.fn(),
+    rmSync: vi.fn(),
+    renameSync: vi.fn(),
+    unlinkSync: vi.fn(),
+  },
+  existsSync: vi.fn(),
+  readFileSync: vi.fn(),
+  writeFileSync: vi.fn(),
+  copyFileSync: vi.fn(),
+  mkdirSync: vi.fn(),
+  rmSync: vi.fn(),
+  renameSync: vi.fn(),
+  unlinkSync: vi.fn(),
+}));
+
+vi.mock('os', () => ({
+  default: {
+    homedir: vi.fn().mockReturnValue('/home/test'),
+    userInfo: vi.fn().mockReturnValue({ username: 'test' }),
+  },
+  homedir: vi.fn().mockReturnValue('/home/test'),
+  userInfo: vi.fn().mockReturnValue({ username: 'test' }),
+}));
+
+vi.mock('electron', () => ({
+  app: {
+    getPath: vi.fn().mockReturnValue('/tmp'),
+  },
+}));
+
+vi.mock('../../../utils/logger', () => ({
+  logger: {
+    info: vi.fn(),
+    error: vi.fn(),
+    debug: vi.fn(),
+    warn: vi.fn(),
+  },
+}));
+
+vi.mock('../../../utils/paths', () => ({
+  getGeminiNexusStoragePaths: vi.fn().mockReturnValue(['/tmp/storage.json']),
+  getGeminiNexusDbPaths: vi.fn().mockReturnValue(['/tmp/state.vscdb']),
+  getAgentDir: vi.fn().mockReturnValue('/tmp/agent'),
+}));
+
+vi.mock('better-sqlite3', () => ({
+  default: vi.fn().mockImplementation(() => ({
+    pragma: vi.fn(),
+    exec: vi.fn(),
+    prepare: vi.fn().mockReturnValue({
+      run: vi.fn(),
+      get: vi.fn(),
+      all: vi.fn(),
+    }),
+    close: vi.fn(),
+  })),
+}));
+
+describe('Device Handler', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(getGeminiNexusStoragePaths).mockReturnValue(['/tmp/storage.json']);
+    vi.mocked(fs.existsSync).mockReturnValue(true);
+    vi.mocked(fs.readFileSync).mockImplementation((path) => {
+      if (String(path).includes('storage.json')) {
+        return JSON.stringify({
+          telemetry: {
+            machineId: 'auth0|user_abc123',
+            macMachineId: 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee',
+            devDeviceId: '11111111-2222-3333-4444-555555555555',
+            sqmId: '{AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE}',
+          },
+        });
+      }
+      return '';
+    });
+  });
+
+  describe('generateDeviceProfile', () => {
+    it('should return a device profile with expected keys', () => {
+      const profile = generateDeviceProfile();
+      expect(profile).toHaveProperty('machineId');
+      expect(profile).toHaveProperty('macMachineId');
+      expect(profile).toHaveProperty('devDeviceId');
+      expect(profile).toHaveProperty('sqmId');
+      expect(profile.machineId).toMatch(/^auth0\|user_[0-9a-f]{32}$/);
+      expect(profile.macMachineId).toMatch(/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/);
+      expect(profile.devDeviceId).toMatch(/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/);
+      expect(profile.sqmId).toMatch(/^\{[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}\}$/);
+      expect(profile.macMachineId).not.toBe(profile.devDeviceId);
+    });
+  });
+
+  describe('applyDeviceProfile', () => {
+    it('should throw when storage.json is not found', () => {
+      vi.mocked(getGeminiNexusStoragePaths).mockReturnValueOnce([]);
+      const profile = generateDeviceProfile();
+      expect(() => applyDeviceProfile(profile)).toThrow('storage_json_not_found');
+    });
+  });
+
+  describe('readCurrentDeviceProfile', () => {
+    it('should read current profile from storage.json', () => {
+      const profile = readCurrentDeviceProfile();
+      expect(profile.machineId).toBe('auth0|user_abc123');
+      expect(profile.macMachineId).toBe('aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee');
+      expect(profile.devDeviceId).toBe('11111111-2222-3333-4444-555555555555');
+      expect(profile.sqmId).toBe('{AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE}');
+    });
+
+    it('should throw when device fingerprint fields are missing', () => {
+      vi.mocked(fs.readFileSync).mockReturnValueOnce(JSON.stringify({ telemetry: {} }));
+      expect(() => readCurrentDeviceProfile()).toThrow('missing_device_fingerprint_fields');
+    });
+  });
+});

src/tests/unit/ipc/proxy-advanced-handler.test.ts

@@ -31,14 +31,33 @@ vi.mock('../../../ipc/database/proxyMetricsHandler', () => ({
   },
 }));
 
-vi.mock('../../../ipc/proxy-advanced/service-registry', () => ({
+vi.mock('../../../ipc/database/cloudHandler', () => ({
-  proxyAdvancedRegistry: {
+  CloudAccountRepo: {
+    getAccounts: vi.fn().mockResolvedValue([]),
+  },
+}));
+
+vi.mock('../../../ipc/proxy-advanced/service-registry', () => {
+  const proxyAdvancedRegistry = {
     tokenManager: null,
     proxyMetrics: null,
     proxyReplay: null,
     proxyIdeConfig: null,
-  },
+  };
-}));
+
+  function getServiceOrThrow(key: string) {
+    const service = (proxyAdvancedRegistry as Record<string, unknown>)[key];
+    if (!service) {
+      throw new Error(`${key} is not registered`);
+    }
+    return service;
+  }
+
+  return {
+    proxyAdvancedRegistry,
+    getServiceOrThrow,
+  };
+});
 
 describe('Proxy Advanced Handler', () => {
   beforeEach(() => {
@@ -147,12 +166,10 @@ describe('Proxy Advanced Handler', () => {
   });
 
   describe('getParityCounters', () => {
-    it('should return zero counters when tokenManager is null', async () => {
+    it('should return error when tokenManager is null', async () => {
       const result = await getParityCounters();
-      expect(result.success).toBe(true);
+      expect(result.success).toBe(false);
-      expect(result.data?.totalRequests).toBe(0);
+      expect(result.error).toBe('Proxy advanced service not initialized');
-      expect(result.data?.matchedRequests).toBe(0);
-      expect(result.data?.parityViolations).toBe(0);
     });
 
     it('should return counters from tokenManager', async () => {
@@ -173,11 +190,10 @@ describe('Proxy Advanced Handler', () => {
   });
 
   describe('getCircuitBreakerStatus', () => {
-    it('should return empty states when tokenManager is null', async () => {
+    it('should return error when tokenManager is null', async () => {
       const result = await getCircuitBreakerStatus();
-      expect(result.success).toBe(true);
+      expect(result.success).toBe(false);
-      expect(result.data?.states).toEqual({});
+      expect(result.error).toBe('Proxy advanced service not initialized');
-      expect(result.data?.globalEnabled).toBe(true);
     });
 
     it('should return mapped status from tokenManager', async () => {
@@ -196,11 +212,10 @@ describe('Proxy Advanced Handler', () => {
   });
 
   describe('getProxyMetrics', () => {
-    it('should return zero metrics when proxyMetrics is null', async () => {
+    it('should return error when proxyMetrics is null', async () => {
       const result = await getProxyMetrics();
-      expect(result.success).toBe(true);
+      expect(result.success).toBe(false);
-      expect(result.data?.totalRequests).toBe(0);
+      expect(result.error).toBe('Proxy advanced service not initialized');
-      expect(result.data?.activeConnections).toBe(0);
     });
 
     it('should return metrics from proxyMetrics service', async () => {
@@ -224,10 +239,10 @@ describe('Proxy Advanced Handler', () => {
   });
 
   describe('getRecentRequests', () => {
-    it('should return empty array when proxyReplay is null', async () => {
+    it('should return error when proxyReplay is null', async () => {
       const result = await getRecentRequests();
-      expect(result.success).toBe(true);
+      expect(result.success).toBe(false);
-      expect(result.data).toEqual([]);
+      expect(result.error).toBe('Proxy advanced service not initialized');
     });
 
     it('should return recent requests from proxyReplay', async () => {
@@ -246,7 +261,7 @@ describe('Proxy Advanced Handler', () => {
     it('should return error when proxyReplay is null', async () => {
       const result = await replayRequest('req-1');
       expect(result.success).toBe(false);
-      expect(result.error).toBe('Replay service not available');
+      expect(result.error).toBe('Proxy advanced service not initialized');
     });
 
     it('should replay request through proxyReplay', async () => {
@@ -265,16 +280,122 @@ describe('Proxy Advanced Handler', () => {
   });
 
   describe('getModelCapabilities', () => {
-    it('should return capabilities for all models', async () => {
+    it('should return empty array when no accounts have quota', async () => {
+      const { CloudAccountRepo } = await import('../../../ipc/database/cloudHandler');
+      vi.mocked(CloudAccountRepo.getAccounts).mockResolvedValueOnce([]);
+
       const result = await getModelCapabilities();
       expect(result.success).toBe(true);
-      expect(result.data).toBeDefined();
+      expect(result.data).toEqual([]);
-      expect(result.data!.length).toBeGreaterThan(0);
+    });
 
-      const model = result.data!.find((m) => m.id === 'gemini-3-flash');
+    it('should aggregate unique models across accounts', async () => {
-      expect(model).toBeDefined();
+      const { CloudAccountRepo } = await import('../../../ipc/database/cloudHandler');
-      expect(model!.capabilities.vision).toBe(true);
+      vi.mocked(CloudAccountRepo.getAccounts).mockResolvedValueOnce([
-      expect(model!.capabilities.streaming).toBe(true);
+        {
+          id: 'acc-1',
+          provider: 'google',
+          email: '[email protected]',
+          token: {} as any,
+          quota: {
+            models: {
+              'gemini-pro': {
+                percentage: 80,
+                resetTime: new Date().toISOString(),
+                display_name: 'Gemini Pro',
+                supports_images: true,
+                supports_thinking: false,
+                recommended: true,
+                max_tokens: 1000000,
+                max_output_tokens: 8192,
+              },
+            },
+          },
+          created_at: Date.now(),
+          last_used: Date.now(),
+        },
+        {
+          id: 'acc-2',
+          provider: 'google',
+          email: '[email protected]',
+          token: {} as any,
+          quota: {
+            models: {
+              'gemini-pro': {
+                percentage: 60,
+                resetTime: new Date().toISOString(),
+                display_name: 'Gemini Pro Duplicate',
+                supports_images: true,
+                supports_thinking: false,
+                recommended: true,
+                max_tokens: 1000000,
+                max_output_tokens: 8192,
+              },
+              'gemini-flash': {
+                percentage: 90,
+                resetTime: new Date().toISOString(),
+                display_name: 'Gemini Flash',
+                supports_images: true,
+                supports_thinking: true,
+                thinking_budget: 24000,
+                recommended: false,
+                max_tokens: 500000,
+                max_output_tokens: 4096,
+              },
+            },
+          },
+          created_at: Date.now(),
+          last_used: Date.now(),
+        },
+      ]);
+
+      const result = await getModelCapabilities();
+      expect(result.success).toBe(true);
+      expect(result.data).toHaveLength(2);
+
+      const pro = result.data!.find((m) => m.id === 'gemini-pro');
+      expect(pro).toBeDefined();
+      expect(pro!.displayName).toBe('Gemini Pro');
+      expect(pro!.capabilities.vision).toBe(true);
+      expect(pro!.capabilities.thinking).toBe(false);
+      expect(pro!.capabilities.streaming).toBe(true);
+      expect(pro!.capabilities.jsonMode).toBe(true);
+      expect(pro!.capabilities.recommended).toBe(true);
+      expect(pro!.limits.maxTokens).toBe(1000000);
+      expect(pro!.limits.maxOutputTokens).toBe(8192);
+
+      const flash = result.data!.find((m) => m.id === 'gemini-flash');
+      expect(flash).toBeDefined();
+      expect(flash!.displayName).toBe('Gemini Flash');
+      expect(flash!.capabilities.thinking).toBe(true);
+      expect(flash!.limits.thinkingBudget).toBe(24000);
+    });
+
+    it('should handle accounts without quota gracefully', async () => {
+      const { CloudAccountRepo } = await import('../../../ipc/database/cloudHandler');
+      vi.mocked(CloudAccountRepo.getAccounts).mockResolvedValueOnce([
+        {
+          id: 'acc-1',
+          provider: 'google',
+          email: '[email protected]',
+          token: {} as any,
+          created_at: Date.now(),
+          last_used: Date.now(),
+        },
+      ]);
+
+      const result = await getModelCapabilities();
+      expect(result.success).toBe(true);
+      expect(result.data).toEqual([]);
+    });
+
+    it('should handle errors from CloudAccountRepo', async () => {
+      const { CloudAccountRepo } = await import('../../../ipc/database/cloudHandler');
+      vi.mocked(CloudAccountRepo.getAccounts).mockRejectedValueOnce(new Error('DB failure'));
+
+      const result = await getModelCapabilities();
+      expect(result.success).toBe(false);
+      expect(result.error).toBe('DB failure');
     });
   });
 
@@ -282,7 +403,7 @@ describe('Proxy Advanced Handler', () => {
     it('should return error when proxyIdeConfig is null', async () => {
       const result = await generateIdeConfig('vscode');
       expect(result.success).toBe(false);
-      expect(result.error).toBe('IDE config service not available');
+      expect(result.error).toBe('Proxy advanced service not initialized');
     });
 
     it('should return error for unsupported IDE', async () => {

src/tests/unit/mocks/better-sqlite3.ts

@@ -10,10 +10,11 @@ export class MockDatabase {
   prepare = vi.fn().mockImplementation((sql: string) => {
     const table = this._extractTable(sql);
     return {
-      run: vi.fn().mockImplementation((params: any) => {
+      run: vi.fn().mockImplementation((...params: any[]) => {
+        const values = params.length === 1 && typeof params[0] === 'object' ? params[0] : params;
         const rows = this.data.get(table) || [];
         if (sql.toLowerCase().includes('insert')) {
-          rows.push(params);
+          rows.push(values);
           this.data.set(table, rows);
           return { lastInsertRowid: rows.length, changes: 1 };
         }
@@ -25,17 +26,20 @@ export class MockDatabase {
         }
         return { changes: 0 };
       }),
-      get: vi.fn().mockImplementation((params: any) => {
+      get: vi.fn().mockImplementation((...params: any[]) => {
+        const values = params.length === 1 && typeof params[0] === 'object' ? params[0] : params;
         const rows = this.data.get(table) || [];
+        if (!values || (Array.isArray(values) && values.length === 0)) return rows[0] ?? null;
         return rows.find((row) =>
-          Object.keys(params).every((key) => row[key] === params[key]),
+          Object.keys(values).every((key) => row[key] === values[key]),
         );
       }),
-      all: vi.fn().mockImplementation((params?: any) => {
+      all: vi.fn().mockImplementation((...params: any[]) => {
+        const values = params.length === 1 && typeof params[0] === 'object' ? params[0] : params;
         const rows = this.data.get(table) || [];
-        if (!params) return rows;
+        if (!values || (Array.isArray(values) && values.length === 0)) return rows;
         return rows.filter((row) =>
-          Object.keys(params).every((key) => row[key] === params[key]),
+          Object.keys(values).every((key) => row[key] === values[key]),
         );
       }),
     };
@@ -68,3 +72,5 @@ export class MockDatabase {
 export function createMockDb() {
   return new MockDatabase();
 }
+
+export default MockDatabase;

src/tests/unit/process.test.ts

@@ -1,9 +1,10 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
-// Mock find-process module
+// Mock server/main module
-vi.mock('find-process', () => ({
+vi.mock('../../server/main', () => ({
-  default: vi.fn(),
+  isNestServerRunning: vi.fn(),
-  ProcessInfo: class {},
+  stopNestServer: vi.fn(),
+  bootstrapNestServer: vi.fn(),
 }));
 
 // Mock logger to avoid console output during tests
@@ -16,160 +17,82 @@ vi.mock('../../utils/logger', () => ({
   },
 }));
 
-// Mock paths module to avoid child_process issues
+// Mock ConfigManager
-vi.mock('../../utils/paths', () => ({
+vi.mock('../../ipc/config/manager', () => ({
-  getGeminiNexusExecutablePath: vi.fn(() => '/path/to/geminiNexus'),
+  ConfigManager: {
-  isWsl: vi.fn(() => false),
+    loadConfig: vi.fn(),
+  },
 }));
 
 // Import after mocks are set up
-import { isProcessRunning, closeGeminiNexus, startGeminiNexus } from '../../ipc/process/handler';
+import {
-import findProcess from 'find-process';
+  isProcessRunning,
+  closeGeminiNexus,
+  startGeminiNexus,
+} from '../../ipc/process/handler';
+import {
+  isNestServerRunning,
+  stopNestServer,
+  bootstrapNestServer,
+} from '../../server/main';
+import { ConfigManager } from '../../ipc/config/manager';
 
 describe('Process Handler', () => {
-  const mockFindProcess = findProcess as unknown as ReturnType<typeof vi.fn>;
-
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
   describe('isProcessRunning', () => {
-    it('should return true when Gemini Nexus main process is found on macOS', async () => {
+    it('should return true when NestJS server is running', async () => {
-      Object.defineProperty(process, 'platform', { value: 'darwin', configurable: true });
+      vi.mocked(isNestServerRunning).mockReturnValue(true);
-      Object.defineProperty(process, 'pid', { value: 1000, configurable: true });
-
-      mockFindProcess.mockResolvedValue([
-        {
-          pid: 12345,
-          name: 'Gemini Nexus',
-          cmd: '/Applications/GeminiNexus.app/Contents/MacOS/GeminiNexus',
-        },
-      ]);
 
       const result = await isProcessRunning();
       expect(result).toBe(true);
-      expect(mockFindProcess).toHaveBeenCalledWith('name', 'Gemini Nexus', false);
+      expect(isNestServerRunning).toHaveBeenCalled();
     });
 
-    it('should return false when only helper processes are found', async () => {
+    it('should return false when NestJS server is not running', async () => {
-      Object.defineProperty(process, 'platform', { value: 'darwin', configurable: true });
+      vi.mocked(isNestServerRunning).mockReturnValue(false);
-      Object.defineProperty(process, 'pid', { value: 1000, configurable: true });
-
-      mockFindProcess.mockResolvedValue([
-        {
-          pid: 12346,
-          name: 'Gemini Nexus Helper (Renderer)',
-          cmd: '/Applications/GeminiNexus.app/Contents/Frameworks/Gemini Nexus Helper (Renderer).app --type=renderer',
-        },
-        {
-          pid: 12347,
-          name: 'Gemini Nexus Helper (GPU)',
-          cmd: '/Applications/GeminiNexus.app/Contents/Frameworks/Gemini Nexus Helper (GPU).app --type=gpu-process',
-        },
-      ]);
 
       const result = await isProcessRunning();
       expect(result).toBe(false);
+      expect(isNestServerRunning).toHaveBeenCalled();
+    });
   });
 
-    it('should return false when only manager process is found', async () => {
+  describe('closeGeminiNexus', () => {
-      Object.defineProperty(process, 'platform', { value: 'darwin', configurable: true });
+    it('should stop the NestJS server', async () => {
-      Object.defineProperty(process, 'pid', { value: 1000, configurable: true });
+      vi.mocked(stopNestServer).mockResolvedValue(true);
 
-      mockFindProcess.mockResolvedValue([
+      await closeGeminiNexus();
-        {
+      expect(stopNestServer).toHaveBeenCalled();
-          pid: 12348,
+    });
-          name: 'Gemini Nexus',
-          cmd: '/Applications/Gemini Nexus.app/Contents/MacOS/Gemini Nexus',
-        },
-      ]);
-
-      const result = await isProcessRunning();
-      expect(result).toBe(false);
   });
 
-    it('should return false when no processes are found', async () => {
+  describe('startGeminiNexus', () => {
-      Object.defineProperty(process, 'platform', { value: 'darwin', configurable: true });
+    it('should start the NestJS server when not running and proxy config exists', async () => {
-      Object.defineProperty(process, 'pid', { value: 1000, configurable: true });
+      vi.mocked(isNestServerRunning).mockReturnValue(false);
+      vi.mocked(ConfigManager.loadConfig).mockReturnValue({
+        proxy: { port: 8045, enabled: true },
+      } as any);
+      vi.mocked(bootstrapNestServer).mockResolvedValue(true);
 
-      mockFindProcess.mockResolvedValue([]);
+      await startGeminiNexus();
-
+      expect(bootstrapNestServer).toHaveBeenCalledWith({ port: 8045, enabled: true });
-      const result = await isProcessRunning();
-      expect(result).toBe(false);
     });
 
-    it('should skip self process', async () => {
+    it('should not start the server if already running', async () => {
-      Object.defineProperty(process, 'platform', { value: 'darwin', configurable: true });
+      vi.mocked(isNestServerRunning).mockReturnValue(true);
-      Object.defineProperty(process, 'pid', { value: 12345, configurable: true });
 
-      mockFindProcess.mockResolvedValue([
+      await startGeminiNexus();
-        {
+      expect(bootstrapNestServer).not.toHaveBeenCalled();
-          pid: 12345, // Same as current PID
-          name: 'Gemini Nexus',
-          cmd: '/Applications/GeminiNexus.app/Contents/MacOS/GeminiNexus',
-        },
-      ]);
-
-      const result = await isProcessRunning();
-      expect(result).toBe(false);
     });
 
-    it('should return true when Gemini Nexus.exe is found on Windows', async () => {
+    it('should throw if proxy configuration is missing', async () => {
-      Object.defineProperty(process, 'platform', { value: 'win32', configurable: true });
+      vi.mocked(isNestServerRunning).mockReturnValue(false);
-      Object.defineProperty(process, 'pid', { value: 1000, configurable: true });
+      vi.mocked(ConfigManager.loadConfig).mockReturnValue({} as any);
 
-      mockFindProcess.mockResolvedValue([
+      await expect(startGeminiNexus()).rejects.toThrow('Proxy configuration not found');
-        {
-          pid: 12345,
-          name: 'GeminiNexus.exe',
-          cmd: 'C:\\Program Files\\GeminiNexus\\GeminiNexus.exe',
-        },
-      ]);
-
-      const result = await isProcessRunning();
-      expect(result).toBe(true);
-    });
-
-    it('should return true when geminiNexus is found on Linux', async () => {
-      Object.defineProperty(process, 'platform', { value: 'linux', configurable: true });
-      Object.defineProperty(process, 'pid', { value: 1000, configurable: true });
-
-      mockFindProcess.mockResolvedValue([
-        {
-          pid: 12345,
-          name: 'geminiNexus',
-          cmd: '/usr/bin/geminiNexus',
-        },
-      ]);
-
-      const result = await isProcessRunning();
-      expect(result).toBe(true);
-    });
-
-    it('should handle find-process errors gracefully', async () => {
-      Object.defineProperty(process, 'platform', { value: 'darwin', configurable: true });
-      Object.defineProperty(process, 'pid', { value: 1000, configurable: true });
-
-      mockFindProcess.mockRejectedValue(new Error('Process enumeration failed'));
-
-      const result = await isProcessRunning();
-      expect(result).toBe(false);
-    });
-
-    it('should exclude processes with --type= argument', async () => {
-      Object.defineProperty(process, 'platform', { value: 'darwin', configurable: true });
-      Object.defineProperty(process, 'pid', { value: 1000, configurable: true });
-
-      mockFindProcess.mockResolvedValue([
-        {
-          pid: 12345,
-          name: 'Gemini Nexus',
-          cmd: '/Applications/GeminiNexus.app/Contents/MacOS/Gemini Nexus --type=utility',
-        },
-      ]);
-
-      const result = await isProcessRunning();
-      expect(result).toBe(false);
     });
   });
 

src/tests/unit/proxy-tool-streaming.test.ts

@@ -0,0 +1,173 @@
+import { describe, expect, it } from 'vitest';
+import { EventEmitter } from 'events';
+import { ProxyService } from '../../server/modules/proxy/proxy.service';
+import { Observable } from 'rxjs';
+
+// Subclass to access private method
+class TestableProxyService extends ProxyService {
+  constructor() {
+    super({} as any, {} as any);
+  }
+
+  public testProcessStream(
+    stream: any,
+    model: string = 'model',
+    streamOptions?: { include_usage?: boolean },
+  ): Observable<string> {
+    return (this as any).processStreamResponse(stream, model, streamOptions);
+  }
+}
+
+function parseSseChunk(raw: string): Record<string, unknown> {
+  const lines = raw.split('\n').filter((l) => l.trim().startsWith('data: '));
+  if (lines.length === 0) return {};
+  const payload = lines[0].slice(6).trim();
+  try {
+    return JSON.parse(payload) as Record<string, unknown>;
+  } catch {
+    return {};
+  }
+}
+
+describe('ProxyService Tool Streaming (OpenAI format)', () => {
+  it('should emit tool call deltas with id+name first, then arguments separately', async () => {
+    const service = new TestableProxyService();
+    const stream = new EventEmitter();
+    const observable = service.testProcessStream(stream, 'gpt-4o');
+
+    const chunks: string[] = [];
+    const done = new Promise<void>((resolve, reject) => {
+      observable.subscribe({
+        next: (chunk) => chunks.push(chunk),
+        error: reject,
+        complete: resolve,
+      });
+    });
+
+    const payload = JSON.stringify({
+      candidates: [
+        {
+          content: {
+            parts: [
+              { functionCall: { id: 'call_123', name: 'get_weather', args: { location: 'NYC' } } },
+            ],
+          },
+          finishReason: 'STOP',
+        },
+      ],
+    });
+
+    stream.emit('data', Buffer.from(`data: ${payload}\n`));
+    stream.emit('end');
+
+    await done;
+
+    const toolCallChunks = chunks.filter((c) => c.includes('"tool_calls"'));
+    expect(toolCallChunks.length).toBeGreaterThanOrEqual(2);
+
+    const first = parseSseChunk(toolCallChunks[0]);
+    const firstDeltas = (first.choices as any)?.[0]?.delta?.tool_calls as any[];
+    expect(firstDeltas).toBeDefined();
+    expect(firstDeltas[0].index).toBe(0);
+    expect(firstDeltas[0].id).toBe('call_123');
+    expect(firstDeltas[0].type).toBe('function');
+    expect(firstDeltas[0].function.name).toBe('get_weather');
+    expect(firstDeltas[0].function.arguments).toBe('');
+
+    const second = parseSseChunk(toolCallChunks[1]);
+    const secondDeltas = (second.choices as any)?.[0]?.delta?.tool_calls as any[];
+    expect(secondDeltas).toBeDefined();
+    expect(secondDeltas[0].index).toBe(0);
+    expect(secondDeltas[0].function.arguments).toBe('{"location":"NYC"}');
+    // Subsequent deltas must NOT repeat id/type/name to keep strict clients happy
+    expect(secondDeltas[0].id).toBeUndefined();
+    expect(secondDeltas[0].type).toBeUndefined();
+    expect(secondDeltas[0].function.name).toBeUndefined();
+  });
+
+  it('should split large tool arguments into multiple argument deltas', async () => {
+    const service = new TestableProxyService();
+    const stream = new EventEmitter();
+    const observable = service.testProcessStream(stream, 'gpt-4o');
+
+    const chunks: string[] = [];
+    const done = new Promise<void>((resolve, reject) => {
+      observable.subscribe({
+        next: (chunk) => chunks.push(chunk),
+        error: reject,
+        complete: resolve,
+      });
+    });
+
+    const bigArgs = { code: 'a'.repeat(5000) };
+    const payload = JSON.stringify({
+      candidates: [
+        {
+          content: {
+            parts: [{ functionCall: { id: 'call_456', name: 'write_file', args: bigArgs } }],
+          },
+          finishReason: 'STOP',
+        },
+      ],
+    });
+
+    stream.emit('data', Buffer.from(`data: ${payload}\n`));
+    stream.emit('end');
+
+    await done;
+
+    const toolCallChunks = chunks.filter((c) => c.includes('"tool_calls"'));
+    // At least: 1st (id+name) + one or more argument deltas
+    expect(toolCallChunks.length).toBeGreaterThanOrEqual(2);
+
+    const first = parseSseChunk(toolCallChunks[0]);
+    expect((first.choices as any)[0].delta.tool_calls[0].function.arguments).toBe('');
+
+    // Concatenate all argument deltas
+    let argsConcat = '';
+    for (let i = 1; i < toolCallChunks.length; i++) {
+      const parsed = parseSseChunk(toolCallChunks[i]);
+      const argDelta = (parsed.choices as any)?.[0]?.delta?.tool_calls?.[0]?.function?.arguments;
+      if (typeof argDelta === 'string') {
+        argsConcat += argDelta;
+      }
+    }
+    expect(argsConcat).toBe(JSON.stringify(bigArgs));
+  });
+
+  it('should not break normal text streaming when no tools are present', async () => {
+    const service = new TestableProxyService();
+    const stream = new EventEmitter();
+    const observable = service.testProcessStream(stream, 'gpt-4o');
+
+    const chunks: string[] = [];
+    const done = new Promise<void>((resolve, reject) => {
+      observable.subscribe({
+        next: (chunk) => chunks.push(chunk),
+        error: reject,
+        complete: resolve,
+      });
+    });
+
+    const payload = JSON.stringify({
+      candidates: [
+        {
+          content: {
+            parts: [{ text: 'hello world' }],
+          },
+          finishReason: 'STOP',
+        },
+      ],
+    });
+
+    stream.emit('data', Buffer.from(`data: ${payload}\n`));
+    stream.emit('end');
+
+    await done;
+
+    const output = chunks.join('');
+    expect(output).toContain('"content":"hello world"');
+    expect(output).toContain('data: [DONE]');
+    expect(output).not.toContain('"tool_calls"');
+  });
+});

src/tests/unit/server/proxy-event-bus.service.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { ProxyEventBus, ProxyEvent } from '@/server/modules/proxy/proxy-event-bus.service';
 import { take } from 'rxjs/operators';
 

src/types.d.ts

@@ -1,6 +1,8 @@
 // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Vite
 // plugin that tells the Electron app where to look for the Vite-bundled app code (depending on
 // whether you're running in development or production).
+/// <reference types="vite/client" />
+
 declare global {
   const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
   const MAIN_WINDOW_VITE_NAME: string;
@@ -14,4 +16,9 @@ declare global {
   }
 }
 
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
 export {};

src/types/db.ts

@@ -87,50 +87,50 @@ export type TokenUsageRow = z.infer<typeof TokenUsageRowSchema>;
 
 export const HourlyUsageSchema = z.object({
   bucket: z.string(),
-  promptTokens: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
-  completionTokens: z.number(),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
-  totalTokens: z.number(),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
-  requests: z.number(),
+  requests: z.number().nullable().transform((v) => v ?? 0),
 });
 
 export type HourlyUsage = z.infer<typeof HourlyUsageSchema>;
 
 export const DailyUsageSchema = z.object({
   bucket: z.string(),
-  promptTokens: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
-  completionTokens: z.number(),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
-  totalTokens: z.number(),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
-  requests: z.number(),
+  requests: z.number().nullable().transform((v) => v ?? 0),
 });
 
 export type DailyUsage = z.infer<typeof DailyUsageSchema>;
 
 export const WeeklyUsageSchema = z.object({
   bucket: z.string(),
-  promptTokens: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
-  completionTokens: z.number(),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
-  totalTokens: z.number(),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
-  requests: z.number(),
+  requests: z.number().nullable().transform((v) => v ?? 0),
 });
 
 export type WeeklyUsage = z.infer<typeof WeeklyUsageSchema>;
 
 export const MonthlyUsageSchema = z.object({
   bucket: z.string(),
-  promptTokens: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
-  completionTokens: z.number(),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
-  totalTokens: z.number(),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
-  requests: z.number(),
+  requests: z.number().nullable().transform((v) => v ?? 0),
 });
 
 export type MonthlyUsage = z.infer<typeof MonthlyUsageSchema>;
 
 export const ModelUsageSchema = z.object({
   model: z.string(),
-  promptTokens: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
-  completionTokens: z.number(),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
-  totalTokens: z.number(),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
-  requests: z.number(),
+  requests: z.number().nullable().transform((v) => v ?? 0),
 });
 
 export type ModelUsage = z.infer<typeof ModelUsageSchema>;

thoughts/ledgers/CONTINUITY_ses_2337.md

@@ -0,0 +1,74 @@
+---
+session: ses_2337
+updated: 2026-04-27T01:38:43.330Z
+---
+
+# Session Summary
+
+## Goal
+Implement all Package C — Backend Architecture (Quick Wins) fixes in the Gemini Nexus codebase and verify with `npm run lint`, `npm run type-check`, and `npm test`.
+
+## Constraints & Preferences
+- Make minimal, focused changes; do not touch files outside Package C scope
+- Do not run `git commit` or `git push`
+- Run `npm run lint` and `npm run type-check` after changes and fix any introduced issues
+- `npm test` must not break any existing tests (update test expectations if needed to match new behavior)
+
+## Progress
+### Done
+- [x] **C-P0-1** — `src/ipc/proxy-advanced/handler.ts`: Replaced silent empty fallbacks with explicit errors for `getParityCounters`, `getCircuitBreakerStatus`, `getProxyMetrics`, `getRecentRequests`, `replayRequest`, and `generateIdeConfig`. Added `normalizeServiceError()` helper to map `getServiceOrThrow` errors to `{ success: false, error: 'Proxy advanced service not initialized' }`.
+- [x] **C-P0-2** — `src/server/modules/proxy/rate-limit-tracker.ts`: Extended `cleanupExpired()` to iterate `this.failureCounts` and delete stale entries where `entry.lastFailureMs + FAILURE_COUNT_EXPIRY_MS <= now`. Return value now counts both lockouts and failureCounts deletions.
+- [x] **C-P0-3** — `src/server/modules/proxy/request-user-agent.ts`: Replaced hardcoded `FALLBACK_VERSION = '1.22.2'` with `import { version } from '../../../../package.json'` and `export const FALLBACK_VERSION = version`. `resolveJsonModule` is already enabled in `tsconfig.json`.
+- [x] **C-P1-1** — `src/server/modules/proxy/proxy.controller.ts`: Replaced hardcoded `capabilitiesMap` with `const capabilitiesMap = this.buildCapabilitiesMap()`. Added private `buildCapabilitiesMap()` that iterates `this.tokenManager?.getAllTokens()` and derives capabilities from `quota.models` metadata.
+- [x] **C-P1-1 prerequisite** — `src/server/modules/proxy/token-manager.service.ts`: Exported `TokenData` and `TokenEntry` types; added `getAllTokens(): TokenEntry[]` method returning `Array.from(this.tokens.entries())`.
+- [x] **C-P1-2** — `src/ipc/proxy-advanced/service-registry.ts`: Added typed `getServiceOrThrow<K extends keyof ProxyAdvancedRegistry>(key: K)` helper. Refactored `handler.ts` to use it; a `normalizeServiceError` wrapper preserves the exact P0 error message.
+
+### In Progress
+- [ ] Update `src/tests/unit/ipc/proxy-advanced-handler.test.ts` expectations to match the new error responses (null-registry tests now expect `success: false` and `'Proxy advanced service not initialized'` instead of empty success data or old service-specific messages).
+- [ ] Run `npm run type-check` to validate changed backend files.
+- [ ] Run `npm run lint` to validate changed backend files.
+- [ ] Run `npm test` to ensure no regressions.
+
+### Blocked
+- (none)
+
+## Key Decisions
+- **Reconciled P0 and P1-2 in handler.ts**: Since `getServiceOrThrow` throws a different message than the P0-required `'Proxy advanced service not initialized'`, added a `normalizeServiceError` helper that detects the "is not registered" substring and rewrites it to the P0 message before returning in the success/error envelope. This allows `getServiceOrThrow` to be used (satisfying P1-2) while preserving the exact P0 contract.
+- **Dynamic capabilities heuristic**: `buildCapabilitiesMap()` derives `vision` from `modelInfo.supports_images`, sets `streaming`/`jsonMode` to `false` only for `gemini-3-pro-image` models, and sets `imageGeneration: true` only for `gemini-3-pro` variants that do not include `flash`. Falls back to a default `gemini-3-flash` entry when no models are discovered.
+
+## Next Steps
+1. Update `src/tests/unit/ipc/proxy-advanced-handler.test.ts` null-registry tests for `getParityCounters`, `getCircuitBreakerStatus`, `getProxyMetrics`, `getRecentRequests`, `replayRequest`, and `generateIdeConfig` to expect `success: false` and error `'Proxy advanced service not initialized'`.
+2. Run `npm run type-check` and fix any TypeScript errors introduced.
+3. Run `npm run lint` and fix any lint errors introduced.
+4. Run `npm test` and fix any remaining test failures.
+
+## Critical Context
+- `proxyAdvancedRegistry` properties (`tokenManager`, `proxyMetrics`, `proxyReplay`, `proxyIdeConfig`) are set to `null` in tests when verifying null-registry behavior; `getServiceOrThrow` will throw, and the catch blocks (via `normalizeServiceError`) will return the unified P0 message.
+- `tsconfig.json` already has `"resolveJsonModule": true`, so importing `package.json` version in `request-user-agent.ts` requires no additional config changes.
+- `TokenEntry` and `TokenData` are now exported from `token-manager.service.ts` so `getAllTokens()` is usable externally.
+- The `proxy.controller.ts` change preserves the existing API response shape (`Record<string, { vision, streaming, jsonMode, audio, imageGeneration }>`) while making the map dynamic.
+
+## File Operations
+### Read
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\package.json`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\handler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\service-registry.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\proxy.controller.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\rate-limit-tracker.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\request-user-agent.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\token-manager.service.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\google-api-timeout.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\ipc\proxy-advanced-handler.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\rate-limit-tracker.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\server\google-api.service.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\token-manager-parity-scheduling.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\types\cloudAccount.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\tsconfig.json`
+
+### Modified
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\handler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\service-registry.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\proxy.controller.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\rate-limit-tracker.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\request-user-agent.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\token-manager.service.ts`

thoughts/ledgers/CONTINUITY_ses_2338.md

@@ -0,0 +1,80 @@
+---
+session: ses_2338
+updated: 2026-04-27T01:04:57.050Z
+---
+
+# Session Summary
+
+## Goal
+Produce a detailed architectural review report of the Gemini Nexus Electron + NestJS backend, including subsystem ratings (SOLID/NEEDS_WORK/RISKY), specific bugs with file:line references, and concrete refactoring steps.
+
+## Constraints & Preferences
+- Focus on coupling between Electron main and NestJS (registry bridge pattern), service decomposition, data flow integrity, error handling, DB transaction safety, and circuit breaker/rate limiter effectiveness
+- Use exact file paths and line numbers where possible
+- Return findings as a detailed markdown report with the requested structure
+- Preserve all previous analysis context when continuing
+
+## Progress
+### Done
+- [x] Read `src/main.ts` — Electron main process bootstraps NestJS as child process via `bootstrapNestServer()`, stops via `stopNestServer()`; creates MessagePort for ORPC IPC; installs native modules via Sentry; manages window lifecycle
+- [x] Read `src/server/main.ts` — NestFactory creates Fastify app, enables CORS, registers API logging plugin; exports `stopNestServer` and `getCurrentProxyPort`; no graceful shutdown beyond `app.close()`
+- [x] Read `src/ipc/proxy-advanced/service-registry.ts` — global mutable `proxyAdvancedRegistry` object with `tokenManager`, `proxyMetrics`, `proxyReplay`, `proxyIdeConfig` all initialized to `null`; services register themselves via `registerProxyAdvancedService()` in constructors
+- [x] Read `src/ipc/proxy-advanced/handler.ts` — IPC handlers for traffic logs, metrics, replay, IDE configs, model capabilities; uses `proxyAdvancedRegistry` for IDE config, metrics, replay; directly calls `TrafficLogsRepo` and `CloudAccountRepo` for logs
+- [x] Read `src/ipc/proxy-advanced/router.ts` — ORPC Zod schemas for IPC routes; defines `getModelCapabilities` calling handler; `CapabilitiesResponseSchema` uses hardcoded zod shapes, no dynamic model discovery
+- [x] Read `src/server/modules/proxy/proxy.service.ts` (2222+ lines) — Core proxy logic: request transformation (Claude/OpenAI ↔ Gemini), streaming/non-streaming paths, tool call handling, fallback to non-streaming on stream error, retry logic with `calculateRetryDelay`, circuit breaker check via `tokenManager.getNextToken()`, token refresh, traffic logging via `trafficLogger`
+- [x] Read `src/server/modules/proxy/proxy.controller.ts` (~1700 lines) — HTTP routes for OpenAI (`/chat/completions`, `/models`), Anthropic (`/v1/messages`), Gemini (`/models/:model:generateContent`, etc.); SSE streaming via RxJS; `listModelCapabilities` uses hardcoded `capabilitiesMap` (lines 1316–1352); multipart/form-data proxy; error response normalization; heavy controller with private utility methods mixed in
+- [x] Read `src/server/modules/proxy/token-manager.service.ts` (1303 lines) — Round-robin token scheduling with `schedulingMode` (`cache-first`, `balance`, `performance-first`), circuit breaker per token (`CircuitBreakerEntry` with `failureCount`, `state`, `requestLog`), rate limit tracking via `RateLimitTracker`, model quota/limit management, account refresh via `GoogleAPIService`, auto-registers into `proxyAdvancedRegistry` in constructor
+- [x] Read `src/server/modules/proxy/rate-limit-tracker.ts` — In-memory `failureCounts` map with `FAILURE_COUNT_EXPIRY_MS` (1 hour); parses Google error details; `cleanupExpired()` exists but no scheduled caller found in any read file
+- [x] Read `src/server/modules/proxy/proxy-replay.service.ts` — In-memory circular buffer (`buffer: ReplayEntry[]`, `maxSize = 20`); records requests for replay; auto-registers into `proxyAdvancedRegistry`; no persistence
+- [x] Read `src/services/CloudMonitorService.ts` — 5-minute interval polling (`monitorIntervalMs = 300000`) via `setInterval`; checks account quotas via `GoogleAPIService.getAllQuotaData()`; sends Electron `Notification` on low quota; triggers `AutoSwitchService.findBestAccount()` and `switchCloudAccount()`; updates DB via `CloudAccountRepo.updateAccount()`
+- [x] Read `src/services/AutoSwitchService.ts` — Static methods only; `findBestAccount()` filters by status `active`, checks `quota.models` for `< 5%`, sorts by average quota; calls `switchCloudAccount()` directly from main process context
+- [x] Read `src/ipc/database/cloudHandler.ts` (first ~600 lines) — `CloudAccountRepo` with AES-256-GCM encryption via `encrypt`/`decryptWithMigration`; retry logic for SQLite busy errors (`SQLITE_MAX_RETRIES = 3`); Drizzle ORM operations; no explicit `BEGIN TRANSACTION` wrappers observed in read sections; updates happen via individual `db.update()` calls
+
+### In Progress
+- [ ] Synthesizing findings into the final markdown report with subsystem ratings and concrete refactoring proposals
+
+### Blocked
+- (none)
+
+## Key Decisions
+- **Prioritize reading source over generating report immediately**: Needed exact line numbers and behavior confirmation before making claims about race conditions, transaction safety, and registry nullability.
+
+## Next Steps
+1. Synthesize all read file contents into the requested markdown report structure:
+   - Deep architectural review (coupling, decomposition, data flow, error handling, DB transactions, circuit breaker/rate limiter)
+   - Specific bugs/anti-patterns with file:line references
+   - Subsystem ratings (IPC, Proxy, DB, Auth)
+   - Concrete refactoring steps
+2. Cross-reference `proxyAdvancedRegistry` null-handling paths in `handler.ts` with specific fallback behavior
+3. Verify `RateLimitTracker.cleanupExpired()` caller absence and document as finding
+4. Document proxy monolith splitting strategy based on observed responsibilities in `proxy.service.ts` and `proxy.controller.ts`
+
+## Critical Context
+- **Registry null hazard**: `proxyAdvancedRegistry` starts all-null; IPC handlers return empty fallbacks when NestJS is not running. In `handler.ts`, `generateIdeConfig` and `getProxyMetrics` guard against null registry entries; `getModelCapabilities` does not use registry but ProxyController hardcodes capabilities.
+- **No scheduled `cleanupExpired()`**: `rate-limit-tracker.ts:107` defines `cleanupExpired()`, but no `setInterval` or cron job was found in `token-manager.service.ts`, `proxy.service.ts`, `main.ts`, or `CloudMonitorService.ts`. Failure counts may leak memory over long uptimes.
+- **In-memory only state**: `ProxyReplayService` uses a 20-entry in-memory buffer; `switchMetrics.ts` mentioned in exploration but file not read yet; `RateLimitTracker` is in-memory only (no SQLite persistence).
+- **Proxy monolith responsibilities observed**:
+  - `proxy.service.ts`: Request transformation (Claude/Gemini/OpenAI), streaming state machine (`PartProcessor`), retry logic, token acquisition, tool call normalization, schema normalization, user-agent resolution, traffic logging
+  - `proxy.controller.ts`: Route handling, SSE emission, multipart proxy, model listing, capability hardcoding, error response formatting (OpenAI/Anthropic/Gemini shapes), request parsing
+- **AutoSwitch race potential**: `AutoSwitchService.findBestAccount()` is static and reads from DB; `CloudMonitorService` runs on a 5-minute timer in main process and calls `switchCloudAccount()` directly. If multiple monitors or manual switches run concurrently, there is no distributed lock or transaction around the switch operation.
+- **Circuit breaker implementation**: `token-manager.service.ts` maintains per-token `CircuitBreakerEntry` with `failureCount`, `lastFailureTime`, `state` (`healthy`/`degraded`/`unhealthy`), and a `requestLog` array. No external library used; custom logic.
+- **CloudAccountRepo retry pattern**: Uses `SQLITE_MAX_RETRIES = 3` with `SQLITE_BUSY_TIMEOUT_MS = 3000` for busy/locked errors, but reads showed Drizzle individual operations without explicit transaction boundaries around multi-step updates.
+
+## File Operations
+### Read
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\database\cloudHandler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\handler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\router.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\service-registry.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\main.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\main.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\proxy-replay.service.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\proxy.controller.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\proxy.service.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\rate-limit-tracker.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\modules\proxy\token-manager.service.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\services\AutoSwitchService.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\services\CloudMonitorService.ts`
+
+### Modified
+- (none)

thoughts/ledgers/CONTINUITY_ses_2344.md

@@ -0,0 +1,103 @@
+---
+session: ses_2344
+updated: 2026-04-27T01:42:26.030Z
+---
+
+# Session Summary
+
+## Goal
+Complete a comprehensive review of all Gemini Nexus app functionality (frontend + backend) via 8 agents (3 reviewers, 2 validators, 1 re-evaluator, 3 implementers), apply all fixes, and verify with passing type-check, lint, and tests.
+
+## Constraints & Preferences
+- Do not run `git commit` or `git push`
+- Run `npm run lint` and `npm run type-check` after changes
+- Make minimal, focused changes
+- Do not touch files outside assigned package scope
+- Use exact file paths and identifiers when known
+- Prefer terse bullets over paragraphs
+
+## Progress
+### Done
+- [x] Phase 0: Mapped codebase features (frontend, backend, integrations) with 3 parallel explorer agents
+- [x] Phase 1: Delegated 3 review agents (Backend/Architecture, Frontend/UX, Quality/Infra) — all reports received
+- [x] Phase 2: Delegated 2 validation agents (Backend, Frontend/Infra) — all reports received
+- [x] Phase 3: Delegated 1 re-evaluation agent — Master Implementation Plan generated with 3 parallel packages
+- [x] Phase 4: Delegated 3 implementation agents — all executed changes:
+  - **Package A (Frontend UI/UX)**: Removed StrictMode, fixed SortIcon anti-pattern, fixed broken `/accounts` link, added gateway error feedback, removed dead components (`AccountCard.tsx`, `navigation-menu.tsx`), fixed responsive grids, fixed hardcoded badge colors, added aria-labels, fixed collapsible code headers, added pt-BR language option, fixed auth race condition, fixed ProxyAdvancedTab prop passing, fixed MonitorTab grid mismatch
+  - **Package B (Quality/Infra)**: Removed gRPC deps, fixed `node-linker` warning, re-enabled `@typescript-eslint/no-explicit-any` as warn, fixed `catch (error: any)` to `unknown` in `cloud/handler.ts`, `cloud/router.ts`, `device/handler.ts`, `QuotaService.ts`, fixed `cloudHandler-sync.test.ts` mock (`getAgentDir`), unskipped `database.test.ts`, added `vitest/globals` types to `tsconfig.json`, added `device-handler.test.ts`, removed dead code from `proxy-replay.service.ts`
+  - **Package C (Backend Quick Wins)**: Added `getServiceOrThrow` to `service-registry.ts`, replaced silent empty fallbacks with explicit errors in `proxy-advanced/handler.ts`, added `failureCounts` TTL cleanup to `rate-limit-tracker.ts`, derived `FALLBACK_VERSION` from `package.json` in `request-user-agent.ts`, replaced hardcoded `capabilitiesMap` with dynamic `buildCapabilitiesMap()` in `proxy.controller.ts` (iterates `tokenManager.getAllTokens()`), added `getAllTokens()` to `token-manager.service.ts`
+- [x] Initial verification run executed (`npm run type-check`, `npm run lint`, `npm test`)
+
+### In Progress
+- [ ] Phase 5: Verify all changes and fix remaining issues:
+  - `proxy-advanced-handler.test.ts`: 15 failing tests due to `service-registry` mock not including `getServiceOrThrow`
+  - Type-check: 30 errors remaining, all in test files (`database.test.ts` missing Database properties, `useCloudAccounts.test.ts` argument count mismatches, `database-handler.test.ts` type errors)
+  - Lint: 11 errors remaining (6 in JS scripts using `require()`, 2 in `useCloudAccounts.test.ts` Function type, 2 in `device-handler.test.ts` unused imports, 1 misc)
+
+### Blocked
+- (none)
+
+## Key Decisions
+- **Re-enable `no-explicit-any` as 'warn' instead of 'off'**: Exposes ~292 `any` warnings but prevents new `any` from being introduced silently; avoids breaking CI immediately with hundreds of errors.
+- **Keep proxy monolith decomposition as P2**: `proxy.service.ts` (2222 lines) and `proxy.controller.ts` (~1700 lines) were flagged as too large but left for future architectural work to keep the current cycle focused on quick wins.
+- **Use `getServiceOrThrow` helper in registry**: Centralizes null-check logic and returns explicit error messages instead of silent empty fallbacks, making startup failures visible to the UI.
+
+## Next Steps
+1. Fix `proxy-advanced-handler.test.ts` mock to include `getServiceOrThrow` and update test expectations to match new explicit-error behavior
+2. Fix remaining type-check errors in `database.test.ts`, `useCloudAccounts.test.ts`, and `database-handler.test.ts`
+3. Fix remaining lint errors: either add `eslint-disable` for JS scripts or convert to ESM, fix Function type in `useCloudAccounts.test.ts`, remove unused imports in `device-handler.test.ts`
+4. Re-run full verification suite (`npm run type-check`, `npm run lint`, `npm test`) and confirm all green
+5. Do a final git diff review to ensure no unintended changes (e.g., image binary modifications from `forge.config.ts` changes)
+
+## Critical Context
+- **Repository root**: `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\`
+- **Test runner**: Vitest with `globals: true` (now properly typed via `tsconfig.json`)
+- **Database mocking**: `better-sqlite3` is mocked in `src/tests/unit/mocks/better-sqlite3.ts`; real module fails in Node.js test env
+- **gRPC dependencies removed**: `@grpc/grpc-js` and `@grpc/proto-loader` removed from `package.json`
+- **node-linker removed**: from `.npmrc`
+- **Auth listener race fixed**: `mountedRef` + `isSubmittingRef` added in `CloudAccountList.tsx`
+- **FALLBACK_VERSION**: Now dynamically reads from `package.json` via `import { version }`
+- **RateLimitTracker**: Now cleans both `lockoutByKey` and `failureCounts` in `cleanupExpired()`
+
+## File Operations
+### Read
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\forge.config.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\package.json`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\scripts\build-windows.js`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\scripts\generate-assets.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\actions\process.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\components\StatusBar.tsx`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\components\proxy\advanced\CapabilitiesTab.tsx`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\hooks\useCloudAccounts.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\cloud\handler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\process\handler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\handler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\router.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\service-registry.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\switchFlow.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\tray\handler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\layouts\MainLayout.tsx`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\main.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\server\main.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\services\GoogleAPIService.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\hooks\useCloudAccounts.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\ipc\device-handler.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\ipc\proxy-advanced-handler.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\process.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\types.d.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\types\cloudAccount.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\tsconfig.json`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\vite.renderer.config.mts`
+
+### Modified
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\forge.config.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\package.json`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\process\handler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\handler.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\ipc\proxy-advanced\router.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\layouts\MainLayout.tsx`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\main.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\tests\unit\process.test.ts`
+- `D:\Documents\Github\Gemini Proxys\Draculabo-AntigravityManager\src\types.d.ts`
+- `src/components/proxy/advanced/CapabilitiesTab.tsx`
+- `src/tests/unit/ipc/proxy-advanced-handler.test.ts`