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

package.json

@@ -107,6 +107,7 @@
     "@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",

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);
+

pnpm-lock.yaml

@@ -46,6 +46,9 @@ importers:
       '@nivo/core':
         specifier: ^0.99.0
         version: 0.99.0([email protected]([email protected]))([email protected])
+      '@nivo/line':
+        specifier: ^0.99.0
+        version: 0.99.0([email protected]([email protected]))([email protected])
       '@nivo/pie':
         specifier: ^0.99.0
         version: 0.99.0([email protected]([email protected]))([email protected])
@@ -1641,6 +1644,11 @@ packages:
     peerDependencies:
       react: ^16.14 || ^17.0 || ^18.0 || ^19.0
 
+  '@nivo/[email protected]':
+    resolution: {integrity: sha512-bAqTXSjpnpcGMs341qWFUi7hJTqQiNoSeJHsYPuPS3icuXPcp3WETQH+zRZACeEF79ZigeOWCW+dzODgne1y9w==}
+    peerDependencies:
+      react: ^16.14 || ^17.0 || ^18.0 || ^19.0
+
   '@nivo/[email protected]':
     resolution: {integrity: sha512-zUbo8UdLndp2RMljrOqitAKKEnl7YypkJrOzjKLk8jQGU7qqUKtgFoJIPhiBsvNPs3xtX2KwgtS1+JKNTNns7A==}
     peerDependencies:
@@ -1664,6 +1672,11 @@ packages:
     peerDependencies:
       react: ^16.14 || ^17.0 || ^18.0 || ^19.0
 
+  '@nivo/[email protected]':
+    resolution: {integrity: sha512-KfmMdidbYzhiUCki1FG4X4nHEFT4loK8G5bMBnmCl9U+S78W+gvkfrgD2Aoqp/Q9yKQvr3Y8UcZKSFZnn3HgjQ==}
+    peerDependencies:
+      react: ^16.14 || ^17.0 || ^18.0 || ^19.0
+
   '@nodelib/[email protected]':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -3505,6 +3518,9 @@ packages:
   '@types/[email protected]':
     resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
 
+  '@types/[email protected]':
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+
   '@types/[email protected]':
     resolution: {integrity: sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA==}
 
@@ -4593,6 +4609,10 @@ packages:
     resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
     engines: {node: '>=12'}
 
+  [email protected]:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
   [email protected]:
     resolution: {integrity: sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==}
 
@@ -4702,6 +4722,9 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  [email protected]:
+    resolution: {integrity: sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==}
+
   [email protected]:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -7618,6 +7641,9 @@ packages:
     resolution: {integrity: sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==}
     engines: {node: '>=8.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
+
   [email protected]:
     resolution: {integrity: sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -10389,6 +10415,24 @@ snapshots:
     transitivePeerDependencies:
       - react-dom
 
+  '@nivo/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@nivo/annotations': 0.99.0([email protected]([email protected]))([email protected])
+      '@nivo/axes': 0.99.0([email protected]([email protected]))([email protected])
+      '@nivo/colors': 0.99.0([email protected]([email protected]))([email protected])
+      '@nivo/core': 0.99.0([email protected]([email protected]))([email protected])
+      '@nivo/legends': 0.99.0([email protected]([email protected]))([email protected])
+      '@nivo/scales': 0.99.0
+      '@nivo/theming': 0.99.0([email protected])
+      '@nivo/tooltip': 0.99.0([email protected]([email protected]))([email protected])
+      '@nivo/voronoi': 0.99.0([email protected]([email protected]))([email protected])
+      '@react-spring/web': 10.0.3([email protected]([email protected]))([email protected])
+      '@types/d3-shape': 3.1.8
+      d3-shape: 3.2.0
+      react: 19.2.5
+    transitivePeerDependencies:
+      - react-dom
+
   '@nivo/[email protected]([email protected]([email protected]))([email protected])':
     dependencies:
       '@nivo/arcs': 0.99.0([email protected]([email protected]))([email protected])
@@ -10438,6 +10482,19 @@ snapshots:
     transitivePeerDependencies:
       - react-dom
 
+  '@nivo/[email protected]([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@nivo/core': 0.99.0([email protected]([email protected]))([email protected])
+      '@nivo/theming': 0.99.0([email protected])
+      '@nivo/tooltip': 0.99.0([email protected]([email protected]))([email protected])
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-scale': 4.0.9
+      d3-delaunay: 6.0.4
+      d3-scale: 4.0.2
+      react: 19.2.5
+    transitivePeerDependencies:
+      - react-dom
+
   '@nodelib/[email protected]':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -12378,6 +12435,8 @@ snapshots:
 
   '@types/[email protected]': {}
 
+  '@types/[email protected]': {}
+
   '@types/[email protected]': {}
 
   '@types/[email protected]':
@@ -13684,6 +13743,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      delaunator: 5.1.0
+
   [email protected]: {}
 
   [email protected]: {}
@@ -13790,6 +13853,10 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  [email protected]:
+    dependencies:
+      robust-predicates: 3.0.3
+
   [email protected]: {}
 
   [email protected]: {}
@@ -16781,6 +16848,8 @@ snapshots:
       sprintf-js: 1.1.3
     optional: true
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       '@oxc-project/types': 0.127.0

src/components/AccountProxySettings.tsx

@@ -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

@@ -58,9 +58,9 @@ const MODEL_DISPLAY_REPLACEMENTS: Array<[string, string]> = [
 ];
 
 const QUOTA_TEXT_COLOR_CLASS_BY_STATUS: Record<QuotaStatus, string> = {
-  high: 'text-green-500',
-  medium: 'text-yellow-500',
-  low: 'text-red-500',
+  high: 'text-emerald-400',
+  medium: 'text-amber-400',
+  low: 'text-rose-400',
 };
 
 const QUOTA_BAR_COLOR_CLASS_BY_STATUS: Record<QuotaStatus, string> = {
@@ -240,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"
@@ -291,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
@@ -343,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 && (
@@ -365,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>
         )}
@@ -493,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>
             )}
@@ -514,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>
@@ -551,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 })}
@@ -613,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}
@@ -621,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
@@ -644,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>
@@ -756,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',
-  '2-col': 'grid gap-4 grid-cols-2',
-  '3-col': 'grid gap-4 grid-cols-3',
-  list: 'grid gap-4 grid-cols-1',
+  auto: 'grid gap-3 md:grid-cols-2 xl:grid-cols-3',
+  '2-col': 'grid gap-3 grid-cols-2',
+  '3-col': 'grid gap-3 grid-cols-3',
+  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',
-  medium: 'text-amber-600 dark:text-amber-400',
-  low: 'text-rose-600 dark:text-rose-400',
+  high: 'text-emerald-400',
+  medium: 'text-amber-400',
+  low: 'text-rose-400',
 };
 
 export function CloudAccountList() {
@@ -663,34 +663,34 @@ export function CloudAccountList() {
 
   return (
     <div className="space-y-5 pb-20">
-      <div className="rounded-lg border border-white/5 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>
-            <p className="text-muted-foreground max-w-2xl">{t('cloud.description')}</p>
+            <h2 className="text-lg font-semibold tracking-tight">{t('cloud.title')}</h2>
+            <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/10 rounded-md border border-white/5 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/10 rounded-md border border-white/5 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/10 rounded-md border border-white/5 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/10 rounded-md border border-white/5 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>
@@ -713,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="bg-muted/50 flex items-center gap-2 rounded-md border px-3 py-2">
+      <div className="flex flex-wrap items-center gap-2 rounded-xl border border-white/[0.06] bg-card p-2.5">
+        <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>
@@ -1108,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>
@@ -1117,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

@@ -343,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

@@ -184,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}`}
@@ -206,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 ${
-                index < visibleModels.length - 1 ? 'border-border/20 border-b' : ''
+              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-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

@@ -1,146 +1,156 @@
-import React from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { isProcessRunning, startGeminiNexus, closeGeminiNexus } from '@/actions/process';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import { Play, Square, Loader2, Power } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-
-interface StatusBarProps {
-  isCollapsed?: boolean;
-}
-
-export const StatusBar: React.FC<StatusBarProps> = ({ isCollapsed = false }) => {
-  const { t } = useTranslation();
-  const queryClient = useQueryClient();
-
-  const { data: isRunning, isLoading } = useQuery({
-    queryKey: ['process', 'status'],
-    queryFn: isProcessRunning,
-    refetchInterval: 30000,
-  });
-
-  const startMutation = useMutation({
-    mutationFn: startGeminiNexus,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['process', 'status'] });
-    },
-  });
-
-  const stopMutation = useMutation({
-    mutationFn: closeGeminiNexus,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['process', 'status'] });
-    },
-  });
-
-  const handleToggle = () => {
-    if (isRunning) {
-      stopMutation.mutate();
-    } else {
-      startMutation.mutate();
-    }
-  };
-
-  const isPending = startMutation.isPending || stopMutation.isPending;
-
-  // Collapsed View
-  if (isCollapsed) {
-    return (
-      <div className="flex justify-center py-2">
-        <TooltipProvider>
-          <Tooltip delayDuration={0}>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleToggle}
-                disabled={isLoading || isPending}
-                className={cn(
-                  'h-10 w-10 rounded-lg transition-all duration-300',
-                  isRunning
-                    ? 'bg-green-100/50 text-green-700 hover:bg-green-100 hover:text-green-800 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50'
-                    : 'bg-red-100/50 text-red-700 hover:bg-red-100 hover:text-red-800 dark:bg-red-900/30 dark:text-red-400 dark:hover:bg-red-900/50',
-                )}
-              >
-                {isPending ? (
-                  <Loader2 className="h-5 w-5 animate-spin" />
-                ) : (
-                  <Power className="h-5 w-5" />
-                )}
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="flex items-center gap-2">
-              <div
-                className={cn('h-2 w-2 rounded-full', isRunning ? 'bg-green-500' : 'bg-red-500')}
-              />
-              <p>
-                {isLoading
-                  ? t('status.checking')
-                  : isRunning
-                    ? t('status.running')
-                    : t('status.stopped')}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      </div>
-    );
-  }
-
-  // Expanded View
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-between overflow-hidden rounded-lg px-3 py-2.5 text-sm font-medium ring-1 transition-colors ring-inset',
-        isRunning
-          ? 'bg-green-100 text-green-900 ring-green-200 dark:bg-green-900/20 dark:text-green-100 dark:ring-green-900/50'
-          : 'bg-red-100 text-red-900 ring-red-200 dark:bg-red-900/20 dark:text-red-100 dark:ring-red-900/50',
-      )}
-    >
-      <div className="flex flex-1 items-start gap-3">
-        {isLoading ? (
-          <Loader2 className="mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin" />
-        ) : isRunning ? (
-          <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
-        ) : (
-          <div className="mt-1.5 h-2.5 w-2.5 shrink-0 rounded-full bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.5)]" />
-        )}
-        <div className="flex flex-col gap-1 leading-none">
-          <span className="text-xs font-semibold tracking-wider uppercase opacity-80">Status</span>
-          <span className="text-sm leading-tight font-medium">
-            {isLoading
-              ? t('status.checking')
-              : isRunning
-                ? t('status.running')
-                : t('status.stopped')}
-          </span>
-        </div>
-      </div>
-      <Button
-        variant="ghost"
-        size="sm"
-        onClick={handleToggle}
-        disabled={isLoading || isPending}
-        className={cn(
-          'ml-2 h-8 shrink-0 rounded-md border px-3 transition-all',
-          isRunning
-            ? 'border-green-200 bg-green-200/50 text-green-900 hover:bg-green-200 dark:border-green-800 dark:bg-green-800/30 dark:text-green-100 dark:hover:bg-green-800/50'
-            : 'border-red-200 bg-red-200/50 text-red-900 hover:bg-red-200 dark:border-red-800 dark:bg-red-800/30 dark:text-red-100 dark:hover:bg-red-800/50',
-        )}
-      >
-        {isPending ? (
-          <Loader2 className="h-3.5 w-3.5 animate-spin" />
-        ) : isRunning ? (
-          <Square className="h-3.5 w-3.5 fill-current" />
-        ) : (
-          <Play className="h-3.5 w-3.5 fill-current" />
-        )}
-        <span className="ml-2 font-semibold">
-          {isRunning ? t('action.stop') : t('action.start')}
-        </span>
-      </Button>
-    </div>
-  );
-};
+import React from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { isProcessRunning, startGeminiNexus, closeGeminiNexus } from '@/actions/process';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { Play, Square, Loader2, Power } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+
+interface StatusBarProps {
+  isCollapsed?: boolean;
+}
+
+export const StatusBar: React.FC<StatusBarProps> = ({ isCollapsed = false }) => {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  const { data: isRunning, isLoading } = useQuery({
+    queryKey: ['process', 'status'],
+    queryFn: isProcessRunning,
+    refetchInterval: 30000,
+  });
+
+  const startMutation = useMutation({
+    mutationFn: startGeminiNexus,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['process', 'status'] });
+    },
+  });
+
+  const stopMutation = useMutation({
+    mutationFn: closeGeminiNexus,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['process', 'status'] });
+    },
+  });
+
+  const handleToggle = () => {
+    if (isRunning) {
+      stopMutation.mutate();
+    } else {
+      startMutation.mutate();
+    }
+  };
+
+  const isPending = startMutation.isPending || stopMutation.isPending;
+
+  // Collapsed View
+  if (isCollapsed) {
+    return (
+      <div className="flex justify-center py-2">
+        <TooltipProvider>
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <button
+                onClick={handleToggle}
+                disabled={isLoading || isPending}
+                className={cn(
+                  'flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-200',
+                  'disabled:opacity-50 disabled:cursor-not-allowed',
+                  isRunning
+                    ? 'bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20'
+                    : 'bg-white/[0.04] text-muted-foreground hover:bg-white/[0.08] hover:text-foreground',
+                )}
+              >
+                {isPending ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <Power className="h-4 w-4" />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right" className="flex items-center gap-2 text-xs">
+              <div
+                className={cn(
+                  'h-1.5 w-1.5 rounded-full',
+                  isRunning ? 'bg-emerald-400' : 'bg-muted-foreground',
+                )}
+              />
+              <span>
+                {isLoading
+                  ? t('status.checking')
+                  : isRunning
+                    ? t('status.running')
+                    : t('status.stopped')}
+              </span>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    );
+  }
+
+  // Expanded View
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between rounded-lg px-3 py-2 transition-all duration-200',
+        isRunning
+          ? 'bg-emerald-500/[0.08]'
+          : 'bg-white/[0.02]',
+      )}
+    >
+      <div className="flex items-center gap-2.5">
+        {isLoading ? (
+          <Loader2 className="h-3 w-3 shrink-0 animate-spin text-muted-foreground" />
+        ) : (
+          <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">
+          <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
+                ? t('status.running')
+                : t('status.stopped')}
+          </span>
+        </div>
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handleToggle}
+        disabled={isLoading || isPending}
+        className={cn(
+          'h-7 gap-1.5 rounded-md px-2.5 text-xs',
+          isRunning
+            ? 'text-emerald-400 hover:bg-emerald-500/10'
+            : 'text-muted-foreground hover:bg-white/[0.06]',
+        )}
+      >
+        {isPending ? (
+          <Loader2 className="h-3 w-3 animate-spin" />
+        ) : isRunning ? (
+          <Square className="h-3 w-3 fill-current" />
+        ) : (
+          <Play className="h-3 w-3 fill-current" />
+        )}
+        <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,188 +1,231 @@
-import React, { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useQuery } from '@tanstack/react-query';
-import { groupBy } from 'lodash-es';
-import { ipc } from '@/ipc/manager';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Loader2, Eye, Zap, Code, Brain, Star } from 'lucide-react';
-
-interface ModelCapability {
-  id: string;
-  object: string;
-  displayName?: string;
-  capabilities: {
-    vision: boolean;
-    thinking: boolean;
-    streaming: boolean;
-    jsonMode: boolean;
-    recommended: boolean;
-  };
-  limits: {
-    maxTokens?: number;
-    maxOutputTokens?: number;
-    thinkingBudget?: number;
-  };
-}
-
-const CAPABILITY_ICONS = {
-  vision: Eye,
-  thinking: Brain,
-  streaming: Zap,
-  jsonMode: Code,
-  recommended: Star,
-} as const;
-
-const CAPABILITY_LABELS = {
-  vision: 'Vision',
-  thinking: 'Thinking',
-  streaming: 'Streaming',
-  jsonMode: 'JSON Mode',
-  recommended: 'Recommended',
-} as const;
-
-function getProvider(modelId: string): string {
-  const id = modelId.toLowerCase();
-  if (id.startsWith('gemini')) return 'Google';
-  if (id.startsWith('claude')) return 'Anthropic';
-  if (id.startsWith('gpt') || id.startsWith('o1') || id.startsWith('o3') || id.startsWith('text-')) return 'OpenAI';
-  if (id.startsWith('deepseek')) return 'DeepSeek';
-  if (id.startsWith('meta-llama') || id.startsWith('llama')) return 'Meta';
-  if (id.startsWith('mistral') || id.startsWith('mixtral')) return 'Mistral';
-  if (id.startsWith('qwen')) return 'Alibaba';
-  if (id.startsWith('x-ai') || id.startsWith('grok')) return 'xAI';
-  if (id.startsWith('sonar')) return 'Perplexity';
-  if (id.startsWith('command')) return 'Cohere';
-  return 'Other';
-}
-
-export const CapabilitiesTab: React.FC = () => {
-  const { t } = useTranslation();
-
-  const { data: capabilitiesData, isLoading } = useQuery({
-    queryKey: ['proxyAdvanced', 'modelCapabilities'],
-    queryFn: () => ipc.client.proxyAdvanced.getModelCapabilities(),
-    refetchInterval: 60000,
-  });
-
-  const models: ModelCapability[] = capabilitiesData?.success
-    ? (capabilitiesData.data as ModelCapability[])
-    : [];
-
-  const groupedModels = useMemo(() => {
-    return groupBy(models, (m) => getProvider(m.id));
-  }, [models]);
-
-  // Sort providers alphabetically, but keep 'Other' at the bottom
-  const sortedProviders = Object.keys(groupedModels).sort((a, b) => {
-    if (a === 'Other') return 1;
-    if (b === 'Other') return -1;
-    return a.localeCompare(b);
-  });
-
-  return (
-    <div className="space-y-5">
-      {/* Header */}
-      <div>
-        <h3 className="text-lg font-medium">{t('proxy.advanced.capabilities.title', 'Model Capabilities')}</h3>
-        <p className="text-sm text-muted-foreground">{t('proxy.advanced.capabilities.description', 'Discover what each model can do')}</p>
-      </div>
-
-      {/* Capabilities Grid */}
-      {isLoading ? (
-        <div className="flex h-32 items-center justify-center">
-          <Loader2 className="h-6 w-6 animate-spin" />
-        </div>
-      ) : (
-        <div className="space-y-8">
-          {sortedProviders.map((provider) => (
-            <div key={provider} className="space-y-4">
-              <h4 className="text-md font-semibold text-foreground border-b pb-2">
-                {provider}
-              </h4>
-              <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-                {groupedModels[provider].map((model) => (
-                  <Card key={model.id} className="flex flex-col transition-shadow hover:shadow-md">
-                    <CardHeader className="pb-3">
-                      <div className="flex items-center justify-between">
-                        <CardTitle className="text-base truncate pr-2" title={model.displayName || model.id}>
-                          {model.displayName || model.id}
-                        </CardTitle>
-                        <Badge variant="outline" className="shrink-0">{model.object}</Badge>
-                      </div>
-                      <CardDescription className="text-xs font-mono text-muted-foreground truncate" title={model.id}>
-                        {model.id}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4 flex-1 flex flex-col justify-between">
-                      <div className="grid grid-cols-2 gap-2">
-                        {Object.entries(model.capabilities).map(([key, supported]) => {
-                          const iconKey = key as keyof typeof CAPABILITY_ICONS;
-                          const Icon = CAPABILITY_ICONS[iconKey];
-                          const label = CAPABILITY_LABELS[iconKey];
-                          return (
-                            <div
-                              key={key}
-                              className={`flex items-center gap-2 rounded-md border p-2 ${
-                                supported
-                                  ? 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/30'
-                                  : 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/50'
-                              }`}
-                            >
-                              <Icon
-                                className={`h-4 w-4 shrink-0 ${
-                                  supported ? 'text-green-600 dark:text-green-400' : 'text-gray-400'
-                                }`}
-                              />
-                              <span
-                                className={`text-[11px] font-medium truncate ${
-                                  supported
-                                    ? 'text-green-700 dark:text-green-300'
-                                    : 'text-gray-500 dark:text-gray-400'
-                                }`}
-                                title={label}
-                              >
-                                {label}
-                              </span>
-                            </div>
-                          );
-                        })}
-                      </div>
-                      {Object.values(model.limits).some((v) => v != null) && (
-                        <div className="space-y-2 pt-2 border-t mt-auto">
-                          <p className="text-xs font-medium text-muted-foreground">Limits</p>
-                          <div className="flex flex-wrap gap-1.5">
-                            {model.limits.maxTokens != null && (
-                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5">
-                                Context: {model.limits.maxTokens.toLocaleString()}
-                              </Badge>
-                            )}
-                            {model.limits.maxOutputTokens != null && (
-                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5">
-                                Output: {model.limits.maxOutputTokens.toLocaleString()}
-                              </Badge>
-                            )}
-                            {model.limits.thinkingBudget != null && (
-                              <Badge variant="secondary" className="text-[10px] font-normal px-1.5 border-blue-200 bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:border-blue-800 dark:text-blue-300">
-                                Think: {model.limits.thinkingBudget.toLocaleString()}
-                              </Badge>
-                            )}
-                          </div>
-                        </div>
-                      )}
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            </div>
-          ))}
-          {models.length === 0 && (
-             <div className="text-center py-10 text-muted-foreground border rounded-lg border-dashed">
-               No models found. Check your provider configurations.
-             </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-};
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { groupBy } from 'lodash-es';
+import { ipc } from '@/ipc/manager';
+import { Badge } from '@/components/ui/badge';
+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;
+    recommended: boolean;
+  };
+  limits: {
+    maxTokens?: number;
+    maxOutputTokens?: number;
+    thinkingBudget?: number;
+  };
+}
+
+const CAPABILITY_ICONS = {
+  vision: Eye,
+  thinking: Brain,
+  streaming: Zap,
+  jsonMode: Code,
+  recommended: Star,
+} as const;
+
+const CAPABILITY_LABELS = {
+  vision: 'Vision',
+  thinking: 'Thinking',
+  streaming: 'Streaming',
+  jsonMode: 'JSON Mode',
+  recommended: 'Recommended',
+} as const;
+
+function getProvider(modelId: string): string {
+  const id = modelId.toLowerCase();
+  if (id.startsWith('gemini')) return 'Google';
+  if (id.startsWith('claude')) return 'Anthropic';
+  if (id.startsWith('gpt') || id.startsWith('o1') || id.startsWith('o3') || id.startsWith('text-'))
+    return 'OpenAI';
+  if (id.startsWith('deepseek')) return 'DeepSeek';
+  if (id.startsWith('meta-llama') || id.startsWith('llama')) return 'Meta';
+  if (id.startsWith('mistral') || id.startsWith('mixtral')) return 'Mistral';
+  if (id.startsWith('qwen')) return 'Alibaba';
+  if (id.startsWith('x-ai') || id.startsWith('grok')) return 'xAI';
+  if (id.startsWith('sonar')) return 'Perplexity';
+  if (id.startsWith('command')) return 'Cohere';
+  return 'Other';
+}
+
+/** 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();
+
+  const { data: capabilitiesData, isLoading } = useQuery({
+    queryKey: ['proxyAdvanced', 'modelCapabilities'],
+    queryFn: () => ipc.client.proxyAdvanced.getModelCapabilities(),
+    refetchInterval: 60000,
+  });
+
+  const models: ModelCapability[] = capabilitiesData?.success
+    ? (capabilitiesData.data as ModelCapability[])
+    : [];
+
+  const groupedModels = useMemo(() => {
+    return groupBy(models, (m) => getProvider(m.id));
+  }, [models]);
+
+  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-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-base font-semibold">
+            {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>
+
+      {/* Content */}
+      {isLoading ? (
+        <div className="flex h-40 items-center justify-center">
+          <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+        </div>
+      ) : (
+        <div className="space-y-8">
+          {sortedProviders.map((provider) => (
+            <div key={provider} className="space-y-3">
+              {/* Provider header */}
+              <div className="flex items-center gap-3">
+                <h4 className="text-[13px] font-semibold tracking-wide uppercase text-muted-foreground">
+                  {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>
+
+              {/* Model cards */}
+              <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+                {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];
+                          const label = CAPABILITY_LABELS[iconKey];
+                          return (
+                            <div
+                              key={key}
+                              className={`inline-flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-medium transition-colors ${
+                                supported
+                                  ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/15'
+                                  : 'bg-white/[0.02] text-muted-foreground/50 border border-white/[0.04]'
+                              }`}
+                              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>
+                          )}
+                          {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">
+                              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>
+            </div>
+          ))}
+
+          {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>
-        <CardHeader>
-          <CardTitle className="text-sm font-semibold">
+      <div className="overflow-hidden rounded-xl border border-white/[0.06] bg-card">
+        <div className="border-b border-white/[0.06] px-5 py-4">
+          <h4 className="text-[13px] font-semibold">
             {t('proxy.advanced.circuitBreaker.title')}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
+          </h4>
+        </div>
+        <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">
-                  <CardContent className="p-4">
+                <div key={api} className="rounded-xl border border-white/[0.06] bg-white/[0.02] 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>
-                </Card>
+                </div>
               ))}
             </div>
           )}
-        </CardContent>
-      </Card>
+        </div>
+      </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>
-          <p className="text-sm text-muted-foreground">{t('proxy.advanced.replay.description')}</p>
+          <h3 className="text-base font-semibold">{t('proxy.advanced.replay.title')}</h3>
+          <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>
-        <CardHeader>
-          <CardTitle>{t('proxy.advanced.replay.recentRequests')}</CardTitle>
-          <CardDescription>{t('proxy.advanced.replay.clickToReplay')}</CardDescription>
-        </CardHeader>
-        <CardContent>
+      <div className="overflow-hidden rounded-xl border border-white/[0.06] bg-card">
+        <div className="border-b border-white/[0.06] px-5 py-4 space-y-1">
+          <h4 className="text-[13px] font-semibold">{t('proxy.advanced.replay.recentRequests')}</h4>
+          <p className="text-xs text-muted-foreground">{t('proxy.advanced.replay.clickToReplay')}</p>
+        </div>
+        <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">
-              <Clock className="h-8 w-8 text-muted-foreground" />
-              <p className="text-sm text-muted-foreground">
+            <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-6 w-6 text-muted-foreground/30" />
+              <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>
-      </Card>
+        </div>
+      </div>
     </div>
   );
 };

src/components/proxy/advanced/ToolsTab.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery, useQueries } from '@tanstack/react-query';
 import { ipc } from '@/ipc/manager';
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+
 import { Button } from '@/components/ui/button';
 import { useToast } from '@/components/ui/use-toast';
 import { StatCard } from '@/components/usage/StatCard';
@@ -87,12 +87,12 @@ export const ToolsTab: React.FC = () => {
       </div>
 
       {/* IDE Quick Setup */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('proxy.advanced.tools.ideSetup')}</CardTitle>
-          <CardDescription>Quick configuration for popular IDEs</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-3">
+      <div className="overflow-hidden rounded-xl border border-white/[0.06] bg-card">
+        <div className="border-b border-white/[0.06] px-5 py-4 space-y-1">
+          <h4 className="text-[13px] font-semibold">{t('proxy.advanced.tools.ideSetup')}</h4>
+          <p className="text-xs text-muted-foreground">Quick configuration for popular IDEs</p>
+        </div>
+        <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" />
@@ -101,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"
@@ -118,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>
                   )}
@@ -126,8 +126,8 @@ export const ToolsTab: React.FC = () => {
               );
             })
           )}
-        </CardContent>
-      </Card>
+        </div>
+      </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 {
@@ -74,26 +74,26 @@ export const TrafficLogTable: React.FC<TrafficLogTableProps> = ({ logs, isLoadin
   }, [logs, sortKey, sortDir]);
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-sm font-semibold">
+    <div className="overflow-hidden rounded-xl border border-white/[0.06] bg-card">
+      <div className="border-b border-white/[0.06] px-5 py-4">
+        <h4 className="text-[13px] font-semibold">
           {t('proxy.advanced.trafficLog.title')}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
+        </h4>
+      </div>
+      <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')}
@@ -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>
-    </Card>
+      </div>
+    </div>
   );
 };

src/components/ui/badge.tsx

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

src/components/ui/button.tsx

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

src/components/ui/card.tsx

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

src/components/ui/checkbox.tsx

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

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

src/components/ui/label.tsx

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

src/components/ui/select.tsx

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

src/components/ui/skeleton.tsx

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

src/components/ui/tabs.tsx

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

src/components/ui/tooltip.tsx

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

src/components/usage/ChartCard.tsx

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

src/components/usage/NivoTooltip.tsx

@@ -1,17 +1,21 @@
-export const COLOR_PROMPT = 'var(--chart-2)';
-export const COLOR_COMPLETION = 'var(--chart-1)';
-export const COLOR_TOTAL = 'var(--chart-3)';
+/** Premium chart palette — refined for dark mode contrast */
+export const COLOR_PROMPT = '#60a5fa';   // blue-400
+export const COLOR_COMPLETION = '#34d399'; // emerald-400
+export const COLOR_TOTAL = '#fbbf24';      // amber-400
+
 export const PIE_COLORS = [
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
-  'var(--chart-4)',
-  'var(--chart-5)',
-  'var(--chart-1)',
-  'var(--chart-2)',
-  'var(--chart-3)',
+  '#60a5fa', '#34d399', '#fbbf24', '#a78bfa', '#f472b6',
+  '#38bdf8', '#4ade80', '#facc15', '#c084fc',
 ];
 
+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,71 +1,170 @@
-import React from 'react';
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
-import { cn } from '@/lib/utils';
-import type { LucideIcon } from 'lucide-react';
-
-interface StatCardProps {
-  label: string;
-  value: number | string;
-  icon: LucideIcon;
-  isLoading?: boolean;
-  className?: string;
-  accent?: 'blue' | 'green' | 'amber' | 'slate' | 'purple';
-}
-
-const ACCENT_MAP = {
-  blue: 'text-blue-400',
-  green: 'text-emerald-400',
-  amber: 'text-amber-400',
-  slate: 'text-slate-400',
-  purple: 'text-purple-400',
-};
-
-const BG_MAP = {
-  blue: 'bg-blue-500/5',
-  green: 'bg-emerald-500/5',
-  amber: 'bg-amber-500/5',
-  slate: 'bg-slate-500/5',
-  purple: 'bg-purple-500/5',
-};
-
-export const StatCard: React.FC<StatCardProps> = ({
-  label,
-  value,
-  icon: Icon,
-  isLoading,
-  className,
-  accent = 'slate',
-}) => {
-  return (
-    <Card
-      className={cn(
-        'border border-white/5 bg-background hover:bg-muted/10 backdrop-blur-none transition-colors',
-        className,
-      )}
-    >
-      <CardContent className="flex items-center justify-between p-4">
-        <div className="flex flex-col gap-1">
-          <span className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
-            {label}
-          </span>
-          {isLoading ? (
-            <Skeleton className="h-7 w-24" />
-          ) : (
-            <span className="text-foreground font-mono text-2xl font-semibold tracking-tight">
-              {typeof value === 'number' ? value.toLocaleString() : value}
-            </span>
-          )}
-        </div>
-        <div
-          className={cn(
-            'flex h-9 w-9 shrink-0 items-center justify-center rounded-md',
-            BG_MAP[accent],
-          )}
-        >
-          <Icon className={cn('h-4 w-4', ACCENT_MAP[accent])} />
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
+import React from 'react';
+import { 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;
+  icon: LucideIcon;
+  isLoading?: boolean;
+  className?: string;
+  accent?: 'blue' | 'green' | 'amber' | 'slate' | 'purple';
+  trend?: TrendInfo;
+  sparkline?: number[];
+}
+
+const ACCENT_ICON = {
+  blue: 'text-blue-400',
+  green: 'text-emerald-400',
+  amber: 'text-amber-400',
+  slate: 'text-muted-foreground',
+  purple: 'text-violet-400',
+};
+
+const ACCENT_BG = {
+  blue: 'bg-blue-500/8',
+  green: 'bg-emerald-500/8',
+  amber: 'bg-amber-500/8',
+  slate: 'bg-white/[0.04]',
+  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,
+  icon: Icon,
+  isLoading,
+  className,
+  accent = 'slate',
+  trend,
+  sparkline,
+}) => {
+  return (
+    <div
+      className={cn(
+        '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,
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex flex-col gap-1.5">
+          <span className="text-muted-foreground text-[11px] font-medium tracking-wider uppercase">
+            {label}
+          </span>
+          {isLoading ? (
+            <Skeleton className="h-7 w-20" />
+          ) : (
+            <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-8 w-8 shrink-0 items-center justify-center rounded-lg',
+              ACCENT_BG[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>
+  );
+};

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/layouts/MainLayout.tsx

@@ -1,194 +1,206 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Link, Outlet, useLocation } from '@tanstack/react-router';
-import { cn } from '@/lib/utils';
-import { StatusBar } from '@/components/StatusBar';
-import {
-  LayoutDashboard,
-  Settings,
-  Network,
-  ChevronLeft,
-  ChevronRight,
-  RefreshCw,
-  BarChart3,
-} from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@/components/ui/button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-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();
-  const { t } = useTranslation();
-  const { toast } = useToast();
-  const hasShownRouteErrorToastRef = useRef(false);
-
-  // Initialize state from localStorage if available, default to false (expanded)
-  const [isCollapsed, setIsCollapsed] = useState(() => {
-    const saved = localStorage.getItem('sidebar-collapsed');
-    return saved ? JSON.parse(saved) : false;
-  });
-
-  // Persist state changes
-  useEffect(() => {
-    localStorage.setItem('sidebar-collapsed', JSON.stringify(isCollapsed));
-  }, [isCollapsed]);
-
-  const navItems = [
-    {
-      to: '/',
-      icon: LayoutDashboard,
-      label: t('nav.accounts'),
-    },
-    {
-      to: '/usage',
-      icon: BarChart3,
-      label: t('nav.usage'),
-    },
-    {
-      to: '/proxy',
-      icon: Network,
-      label: t('nav.proxy'),
-    },
-    {
-      to: '/settings',
-      icon: Settings,
-      label: t('nav.settings'),
-    },
-  ];
-
-  return (
-    <div className="bg-background text-foreground flex h-screen flex-col overflow-hidden">
-      <div className="flex flex-1 overflow-hidden">
-        {/* Sidebar */}
-        <aside
-          className={cn(
-            'bg-background group relative flex flex-col border-r border-white/5 transition-all duration-300 ease-in-out',
-            isCollapsed ? 'w-[70px]' : 'w-64',
-          )}
-        >
-          <Button
-            variant="ghost"
-            size="icon"
-            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"
-            onClick={() => setIsCollapsed(!isCollapsed)}
-          >
-            {isCollapsed ? (
-              <ChevronRight className="h-3 w-3" />
-            ) : (
-              <ChevronLeft className="h-3 w-3" />
-            )}
-          </Button>
-
-          <div className={cn('flex flex-col', isCollapsed ? 'items-center p-4' : 'p-6')}>
-            <div className="flex items-center gap-2 overflow-hidden whitespace-nowrap">
-              <div className="flex h-6 w-6 shrink-0 items-center justify-center overflow-hidden rounded bg-transparent">
-                <img
-                  src={iconPng}
-                  alt="Gemini Nexus Logo"
-                  className="h-full w-full object-contain"
-                />
-              </div>
-              <div
-                className={cn(
-                  'overflow-hidden transition-all duration-300',
-                  isCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100',
-                )}
-              >
-                <h1 className="text-xl font-bold tracking-tight">Gemini Nexus</h1>
-              </div>
-            </div>
-          </div>
-
-          <nav className="flex-1 space-y-2 px-2">
-            <TooltipProvider>
-              {navItems.map((item) => {
-                const isActive = location.pathname === item.to;
-
-                if (isCollapsed) {
-                  return (
-                    <Tooltip key={item.to} delayDuration={0}>
-                      <TooltipTrigger asChild>
-                        <Link
-                          to={item.to}
-                          className={cn(
-                            'mx-auto flex h-10 w-10 items-center justify-center rounded-md transition-colors',
-                            isActive
-                              ? 'bg-primary text-primary-foreground'
-                              : 'hover:bg-muted text-muted-foreground hover:text-foreground',
-                          )}
-                        >
-                          <item.icon className="h-5 w-5" />
-                          <span className="sr-only">{item.label}</span>
-                        </Link>
-                      </TooltipTrigger>
-                      <TooltipContent side="right">{item.label}</TooltipContent>
-                    </Tooltip>
-                  );
-                }
-
-                return (
-                  <Link
-                    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',
-                      isActive
-                        ? 'bg-primary text-primary-foreground'
-                        : 'hover:bg-muted text-muted-foreground hover:text-foreground',
-                    )}
-                  >
-                    <item.icon className="h-4 w-4" />
-                    {item.label}
-                  </Link>
-                );
-              })}
-            </TooltipProvider>
-          </nav>
-
-          <div className="border-t p-2">
-            <StatusBar isCollapsed={isCollapsed} />
-          </div>
-        </aside>
-
-        {/* Content Area */}
-        <main className="flex-1 overflow-auto transition-all duration-300">
-          <ErrorBoundary
-            resetKeys={[location.pathname]}
-            onReset={() => {
-              hasShownRouteErrorToastRef.current = false;
-            }}
-            onError={(error) => {
-              if (hasShownRouteErrorToastRef.current) {
-                return;
-              }
-
-              toast({
-                title: t('error.generic'),
-                description: getLocalizedErrorMessage(error, t),
-                variant: 'destructive',
-              });
-              hasShownRouteErrorToastRef.current = true;
-            }}
-            fallbackRender={({ resetErrorBoundary }) => (
-              <div className="mx-auto max-w-3xl p-6">
-                <div className="rounded-lg border border-dashed p-8 text-center">
-                  <div className="text-lg font-semibold">{t('error.generic')}</div>
-                  <div className="text-muted-foreground mt-2 text-sm">{t('action.retry')}</div>
-                  <Button className="mt-4" variant="outline" onClick={resetErrorBoundary}>
-                    <RefreshCw className="mr-2 h-4 w-4" />
-                    {t('action.retry')}
-                  </Button>
-                </div>
-              </div>
-            )}
-          >
-            <Outlet />
-          </ErrorBoundary>
-        </main>
-      </div>
-    </div>
-  );
-};
+import React, { useState, useEffect, useRef } from 'react';
+import { Link, Outlet, useLocation } from '@tanstack/react-router';
+import { cn } from '@/lib/utils';
+import { StatusBar } from '@/components/StatusBar';
+import {
+  LayoutDashboard,
+  Settings,
+  Network,
+  ChevronLeft,
+  ChevronRight,
+  RefreshCw,
+  BarChart3,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+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();
+  const { t } = useTranslation();
+  const { toast } = useToast();
+  const hasShownRouteErrorToastRef = useRef(false);
+
+  // Initialize state from localStorage if available, default to false (expanded)
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    const saved = localStorage.getItem('sidebar-collapsed');
+    return saved ? JSON.parse(saved) : false;
+  });
+
+  // Persist state changes
+  useEffect(() => {
+    localStorage.setItem('sidebar-collapsed', JSON.stringify(isCollapsed));
+  }, [isCollapsed]);
+
+  const navItems = [
+    {
+      to: '/',
+      icon: LayoutDashboard,
+      label: t('nav.accounts'),
+    },
+    {
+      to: '/usage',
+      icon: BarChart3,
+      label: t('nav.usage'),
+    },
+    {
+      to: '/proxy',
+      icon: Network,
+      label: t('nav.proxy'),
+    },
+    {
+      to: '/settings',
+      icon: Settings,
+      label: t('nav.settings'),
+    },
+  ];
+
+  return (
+    <div className="bg-background text-foreground flex h-screen flex-col overflow-hidden">
+      <div className="flex flex-1 overflow-hidden">
+        {/* Sidebar */}
+        <aside
+          className={cn(
+            '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-[60px]' : 'w-56',
+          )}
+        >
+          {/* Collapse toggle */}
+          <button
+            className={cn(
+              '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 ? (
+              <ChevronRight className="h-3 w-3" />
+            ) : (
+              <ChevronLeft className="h-3 w-3" />
+            )}
+          </button>
+
+          {/* Brand */}
+          <div className={cn('flex flex-col', isCollapsed ? 'items-center p-3' : 'px-4 py-5')}>
+            <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={iconPng}
+                  alt="Gemini Nexus Logo"
+                  className="h-full w-full object-contain"
+                />
+              </div>
+              <div
+                className={cn(
+                  'overflow-hidden transition-all duration-300',
+                  isCollapsed ? 'w-0 opacity-0' : 'w-auto opacity-100',
+                )}
+              >
+                <h1 className="text-[15px] font-semibold tracking-tight">Gemini Nexus</h1>
+              </div>
+            </div>
+          </div>
+
+          {/* Navigation */}
+          <nav className="flex-1 space-y-1 px-2 pt-2">
+            <TooltipProvider>
+              {navItems.map((item) => {
+                const isActive = location.pathname === item.to;
+
+                if (isCollapsed) {
+                  return (
+                    <Tooltip key={item.to} delayDuration={0}>
+                      <TooltipTrigger asChild>
+                        <Link
+                          to={item.to}
+                          className={cn(
+                            'mx-auto flex h-9 w-9 items-center justify-center rounded-lg transition-all duration-200',
+                            isActive
+                              ? 'bg-white/[0.08] text-foreground'
+                              : 'text-muted-foreground hover:bg-white/[0.04] hover:text-foreground',
+                          )}
+                        >
+                          <item.icon className="h-[18px] w-[18px]" />
+                          <span className="sr-only">{item.label}</span>
+                        </Link>
+                      </TooltipTrigger>
+                      <TooltipContent side="right" className="text-xs">
+                        {item.label}
+                      </TooltipContent>
+                    </Tooltip>
+                  );
+                }
+
+                return (
+                  <Link
+                    key={item.to}
+                    to={item.to}
+                    className={cn(
+                      'flex items-center gap-3 rounded-lg px-3 py-2 text-[13px] font-medium transition-all duration-200',
+                      isActive
+                        ? 'bg-white/[0.08] text-foreground'
+                        : 'text-muted-foreground hover:bg-white/[0.04] hover:text-foreground',
+                    )}
+                  >
+                    <item.icon className="h-[18px] w-[18px]" />
+                    {item.label}
+                  </Link>
+                );
+              })}
+            </TooltipProvider>
+          </nav>
+
+          {/* Status bar */}
+          <div className="border-t border-white/[0.06] p-2">
+            <StatusBar isCollapsed={isCollapsed} />
+          </div>
+        </aside>
+
+        {/* Content Area */}
+        <main className="flex-1 overflow-auto transition-all duration-300">
+          <ErrorBoundary
+            resetKeys={[location.pathname]}
+            onReset={() => {
+              hasShownRouteErrorToastRef.current = false;
+            }}
+            onError={(error) => {
+              if (hasShownRouteErrorToastRef.current) {
+                return;
+              }
+
+              toast({
+                title: t('error.generic'),
+                description: getLocalizedErrorMessage(error, t),
+                variant: 'destructive',
+              });
+              hasShownRouteErrorToastRef.current = true;
+            }}
+            fallbackRender={({ resetErrorBoundary }) => (
+              <div className="mx-auto max-w-3xl p-6">
+                <div className="rounded-xl border border-white/[0.06] border-dashed p-8 text-center">
+                  <div className="text-sm font-semibold">{t('error.generic')}</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')}
+                  </Button>
+                </div>
+              </div>
+            )}
+          >
+            <Outlet />
+          </ErrorBoundary>
+        </main>
+      </div>
+    </div>
+  );
+};

src/lib/nivo-theme.ts

@@ -1,61 +1,65 @@
-import type { PartialTheme } from '@nivo/theming';
-
-export const nivoTheme: PartialTheme = {
-  background: 'transparent',
-  text: {
-    fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
-    fontSize: 11,
-    fill: '#b8b8b8',
-  },
-  axis: {
-    domain: {
-      line: {
-        stroke: 'rgba(255,255,255,0.1)',
-        strokeWidth: 1,
-      },
-    },
-    ticks: {
-      line: {
-        stroke: 'transparent',
-        strokeWidth: 0,
-      },
-      text: {
-        fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
-        fontSize: 11,
-        fill: '#b8b8b8',
-      },
-    },
-    legend: {
-      text: {
-        fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
-        fontSize: 12,
-        fill: '#b8b8b8',
-      },
-    },
-  },
-  grid: {
-    line: {
-      stroke: 'rgba(255,255,255,0.06)',
-      strokeWidth: 1,
-      strokeDasharray: '4 4',
-    },
-  },
-  legends: {
-    text: {
-      fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
-      fontSize: 12,
-      fill: '#b8b8b8',
-    },
-  },
-  tooltip: {
-    container: {
-      background: '#2e2e2e',
-      color: '#fff',
-      fontFamily: "Geist, 'Microsoft YaHei', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif",
-      fontSize: 12,
-      borderRadius: 6,
-      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-      padding: '8px 12px',
-    },
-  },
-};
+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: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    fontSize: 11,
+    fill: '#6b7280',
+  },
+  axis: {
+    domain: {
+      line: {
+        stroke: 'rgba(255,255,255,0.06)',
+        strokeWidth: 1,
+      },
+    },
+    ticks: {
+      line: {
+        stroke: 'transparent',
+        strokeWidth: 0,
+      },
+      text: {
+        fontFamily: "'JetBrains Mono', monospace",
+        fontSize: 10,
+        fill: '#6b7280',
+      },
+    },
+    legend: {
+      text: {
+        fontFamily: "Inter, sans-serif",
+        fontSize: 11,
+        fill: '#6b7280',
+      },
+    },
+  },
+  grid: {
+    line: {
+      stroke: 'rgba(255,255,255,0.04)',
+      strokeWidth: 1,
+    },
+  },
+  legends: {
+    text: {
+      fontFamily: "Inter, sans-serif",
+      fontSize: 11,
+      fill: '#6b7280',
+    },
+  },
+  tooltip: {
+    container: {
+      background: '#16161e',
+      color: '#e8eaed',
+      fontFamily: "Inter, sans-serif",
+      fontSize: 12,
+      borderRadius: 8,
+      border: '1px solid rgba(255,255,255,0.06)',
+      boxShadow: '0 8px 24px -4px rgba(0, 0, 0, 0.3)',
+      padding: '8px 12px',
+    },
+  },
+};

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="text-lg font-semibold">{t('error.generic')}</div>
-        <div className="text-muted-foreground mt-2 text-sm">{t('action.retry')}</div>
+      <div className="rounded-xl border border-dashed border-white/[0.1] p-8 text-center">
+        <div className="text-base font-semibold">{t('error.generic')}</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

@@ -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>
-        <p className="text-muted-foreground mt-1">{t('proxy.description')}</p>
+        <h2 className="text-lg font-semibold tracking-tight">{t('proxy.title')}</h2>
+        <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-muted-foreground text-sm">{accounts[0].email}</p>
+                      <p className="text-[13px] font-medium">Primary Account</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>
-                  <Button size="sm" asChild>
+                  <p className="text-muted-foreground text-[13px]">No accounts configured</p>
+                  <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">
-              <ServerOff className="text-muted-foreground h-12 w-12" />
+            <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/50 h-10 w-10" />
               <div className="space-y-1">
-                <p className="text-lg font-medium">Proxy is not running</p>
-                <p className="text-muted-foreground text-sm">Start the proxy to enable local API access</p>
+                <p className="text-base font-semibold">Proxy is not running</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="grid grid-cols-3 gap-4 border-b bg-muted/50 p-3 text-xs font-medium text-muted-foreground">
+              <div className="overflow-hidden rounded-xl border border-white/[0.06]">
+                <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="text-sm font-medium">Claude Sonnet 4.6 (Thinking)</div>
+                <div className="grid grid-cols-3 gap-4 items-center p-3 text-[13px]">
+                  <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="text-sm font-medium">Claude Opus 4.6 (Thinking)</div>
+                <div className="grid grid-cols-3 gap-4 items-center border-t border-white/[0.06] p-3 text-[13px]">
+                  <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="grid grid-cols-3 gap-4 border-b bg-muted/50 p-3 text-xs font-medium text-muted-foreground">
+                  <div className="overflow-hidden rounded-xl border border-white/[0.06]">
+                    <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">
-                <span className="text-sm text-muted-foreground">{t('proxy.routing.status')}</span>
+              <div className="flex items-center justify-between rounded-xl border border-white/[0.06] p-3">
+                <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">
-                  <span className="text-sm text-muted-foreground">{t('proxy.routing.url')}</span>
+                <div className="flex items-center justify-between rounded-xl border border-white/[0.06] p-3">
+                  <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>
-        <p className="text-muted-foreground mt-1">{t('settings.description')}</p>
+        <h2 className="text-lg font-semibold tracking-tight">{t('settings.title')}</h2>
+        <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>
-            <CardHeader>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
+            <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>
-            <CardHeader>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
+            <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>
-              <CardHeader>
+            <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
+              <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>
-            <CardHeader>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
+            <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>
-            <CardHeader>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
+            <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>
-            <CardHeader>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
+            <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>
-            <CardHeader>
+          <Card className="bg-transparent border-0 shadow-none rounded-none border-b border-white/5 last:border-0 pb-6">
+            <CardHeader className="px-0 pt-4">
               <CardTitle>{t('settings.proxy.title')}</CardTitle>
               <CardDescription>{t('settings.proxy.description')}</CardDescription>
             </CardHeader>

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,
-      completionTokens: usage.candidatesTokenCount ?? 0,
-      totalTokens: usage.totalTokenCount ?? 0,
+      promptTokens: prompt,
+      completionTokens: completion,
+      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) {
-              lastUsageMetadata = json.usageMetadata;
+            if (responsePayload.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) {
-              lastUsageMetadata = parsed.usageMetadata;
+            const responsePayload = parsed?.response ?? parsed;
+            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;
             }

src/styles/global.css

@@ -1,245 +1,263 @@
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
+@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));
-  --color-input: hsl(var(--input));
-  --color-ring: hsl(var(--ring));
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-
-  --color-primary: hsl(var(--primary));
-  --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: Plus Jakarta Sans, '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);
-
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
-}
-
-@utility container {
-  margin-inline: auto;
-  padding-inline: 2rem;
-  @media (width >= --theme(--breakpoint-sm)) {
-    max-width: none;
-  }
-  @media (width >= 1400px) {
-    max-width: 1400px;
-  }
-}
-
-@layer base {
-  @font-face {
-
-  }
-  @font-face {
-    font-family: 'Geist Mono';
-    font-display: swap;
-
-    src: url('../assets/fonts/geist-mono/geist-mono.ttf') format('truetype');
-  }
-
-  @font-face {
-    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);
-  }
-}
-
-@layer base {
-  
-
-  
-}
-
-@layer base {
-  body {
-    @apply overflow-hidden;
-  }
-  .draglayer {
-    @apply bg-background;
-    -webkit-app-region: drag;
-  }
-  button {
-    @apply cursor-pointer;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-@theme inline {
-  --font-sans: Plus Jakarta Sans, sans-serif;
-  --font-mono: Geist Mono, monospace;
-  --font-serif: Georgia, serif;
-  --radius: 0.5rem;
-  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
-  --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);
-}
-
-
-
-
+@import 'tailwindcss';
 
+@plugin 'tailwindcss-animate';
 
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * Gemini Nexus Design System
+ * Style: Minimal Dark Professional
+ * Fonts: Inter (UI) + JetBrains Mono (code)
+ * Palette: Refined Slate + Emerald accents
+ */
+@theme inline {
+  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+
+  --radius: 0.625rem;
+  --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 { height: 0; }
+    to { height: var(--radix-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--radix-accordion-content-height); }
+    to { height: 0; }
+  }
+  @keyframes fade-in {
+    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 >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/* Font faces — local fallbacks */
 @layer base {
-  :root, .dark {
-    --background: #0F172A;
-    --foreground: #F8FAFC;
-    --card: #0F172A;
-    --card-foreground: #F8FAFC;
-    --popover: #0F172A;
-    --popover-foreground: #F8FAFC;
-    --primary: #1E293B;
-    --primary-foreground: #FFFFFF;
-    --secondary: #334155;
-    --secondary-foreground: #FFFFFF;
-    --muted: #272F42;
-    --muted-foreground: #94A3B8;
-    --accent: #22C55E;
-    --accent-foreground: #FFFFFF;
-    --destructive: #EF4444;
-    --destructive-foreground: #FFFFFF;
-    --border: #475569;
-    --input: #475569;
-    --ring: #1E293B;
-    --radius: 0.5rem;
+  @font-face {
+    font-family: 'Geist Mono';
+    font-display: swap;
+    src: url('../assets/fonts/geist-mono/geist-mono.ttf') format('truetype');
+  }
+
+  @font-face {
+    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');
+  }
+}
+
+/*
+ * Refined dark color palette
+ * Inspired by: Linear, Vercel, Raycast
+ * Deep neutral darks with subtle warm undertones
+ */
+@layer base {
+  :root,
+  .dark {
+    /* Core surfaces */
+    --background: #0a0a0f;
+    --foreground: #e8eaed;
+    --card: #111118;
+    --card-foreground: #e8eaed;
+    --popover: #16161e;
+    --popover-foreground: #e8eaed;
+
+    /* Interactive elements */
+    --primary: #e8eaed;
+    --primary-foreground: #0a0a0f;
+    --secondary: #1c1c26;
+    --secondary-foreground: #c4c7cc;
+    --muted: #16161e;
+    --muted-foreground: #6b7280;
+    --accent: #10b981;
+    --accent-foreground: #ffffff;
+
+    /* State colors */
+    --destructive: #ef4444;
+    --destructive-foreground: #ffffff;
+
+    /* Boundaries */
+    --border: #ffffff0d;
+    --input: #1c1c26;
+    --ring: #10b981;
+
+    --radius: 0.625rem;
+
+    /* Chart palette — vibrant on dark */
+    --chart-1: #6366f1;
+    --chart-2: #10b981;
+    --chart-3: #f59e0b;
+    --chart-4: #ec4899;
+    --chart-5: #8b5cf6;
+
+    /* Sidebar */
+    --sidebar: #0a0a0f;
+    --sidebar-foreground: #e8eaed;
+    --sidebar-primary: #e8eaed;
+    --sidebar-primary-foreground: #0a0a0f;
+    --sidebar-accent: #10b981;
+    --sidebar-accent-foreground: #ffffff;
+    --sidebar-border: #ffffff0d;
+    --sidebar-ring: #10b981;
+  }
+}
+
+/* Global base styles */
+@layer base {
+  * {
+    @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;
+  }
+
+  /* Selection color */
+  ::selection {
+    background: #10b98133;
+    color: #e8eaed;
+  }
+}
+
+/* Utility classes for the design system */
+@layer utilities {
+  .glass {
+    background: rgba(17, 17, 24, 0.6);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+  }
+
+  .glass-border {
+    border: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .glow-accent {
+    box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
+  }
+
+  .glow-accent-sm {
+    box-shadow: 0 0 10px rgba(16, 185, 129, 0.08);
+  }
+
+  .text-gradient {
+    background: linear-gradient(135deg, #e8eaed 0%, #6b7280 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .animate-in {
+    animation: fade-in 0.2s ease-out, slide-up 0.25s ease-out;
   }
 }

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(),
-  completionTokens: z.number(),
-  totalTokens: z.number(),
-  requests: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
+  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(),
-  completionTokens: z.number(),
-  totalTokens: z.number(),
-  requests: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
+  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(),
-  completionTokens: z.number(),
-  totalTokens: z.number(),
-  requests: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
+  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(),
-  completionTokens: z.number(),
-  totalTokens: z.number(),
-  requests: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
+  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(),
-  completionTokens: z.number(),
-  totalTokens: z.number(),
-  requests: z.number(),
+  promptTokens: z.number().nullable().transform((v) => v ?? 0),
+  completionTokens: z.number().nullable().transform((v) => v ?? 0),
+  totalTokens: z.number().nullable().transform((v) => v ?? 0),
+  requests: z.number().nullable().transform((v) => v ?? 0),
 });
 
 export type ModelUsage = z.infer<typeof ModelUsageSchema>;