feat: color cost-by-model donut by cost rank, not model identity

The donut wedges are sized by cost but were colored by the backend's
token-rank palette, so the biggest-cost model could get a non-prominent
color. CostDonut now ranks models by cost (desc) and maps the palette by
that rank, so the largest cost share always gets the leading color.

Bump version to 0.1.10.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: HduSy

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "tokenscope"
-version = "0.1.9"
+version = "0.1.10"
 description = "Claude CLI token usage dashboard"
 authors = ["you"]
 edition = "2021"

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Tokenscope",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "identifier": "com.tokenscope.app",
   "build": {
     "beforeDevCommand": "pnpm dev",

src-tauri/tauri.conf.json

@@ -119,10 +119,21 @@ export function Sparkline({ values, theme, width = 80, height = 24, accent, stro
   );
 }
 
+// Cost-rank palette: darkest/most-prominent green for the biggest cost share,
+// fading down. Colors map to the *cost* ordering here (not the backend's
+// token-rank), so the largest wedge always gets the leading color.
+const DONUT_PALETTE = ["#1f9d63", "#34c27e", "#6ad0a0", "#a7e3c5", "#4b5a52"];
+const DONUT_OVERFLOW = "#79817b";
+
 export function CostDonut({ models, theme, size = 104, thickness = 16 }:
   { models: ModelStat[]; theme: Theme; size?: number; thickness?: number }) {
   const t = theme;
   const [hi, setHi] = useState(-1);
+  // Rank by cost (desc) and recolor by that rank — usage from most to least.
+  const ranked = [...models]
+    .sort((a, b) => b.cost - a.cost)
+    .map((m, i) => ({ ...m, color: i < DONUT_PALETTE.length ? DONUT_PALETTE[i] : DONUT_OVERFLOW }));
+  models = ranked;
   const total = models.reduce((s, m) => s + m.cost, 0) || 1e-9;
   const cx = size / 2, cy = size / 2;
   const rOut = (size - 2) / 2, rIn = rOut - thickness;