feat: 1-decimal model shares summing to 100% and closed single-model donut

- Tokens-by-model percentages now show 1 decimal, apportioned via the
  largest-remainder method so visible rows sum to exactly 100.0%.
- Whole-number shares drop the ".0" (100% not 100.0%); rows below 0.1%
  are hidden to avoid a meaningless "0.0%".
- Cost donut renders a single model as a closed ring (continuous ring
  + 1px card-background stroke) instead of an open gapped arc.
- Bump version to 0.1.13.

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

Author: HduSy

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "tokenscope"
-version = "0.1.12"
+version = "0.1.13"
 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.12",
+  "version": "0.1.13",
   "identifier": "com.tokenscope.app",
   "build": {
     "beforeDevCommand": "pnpm dev",

src-tauri/tauri.conf.json

@@ -55,7 +55,26 @@ function Delta({ v, theme }: { v: number; theme: Theme }) {
   );
 }
 
-function ModelRow({ m, max, theme, total }: { m: ModelStat; max: number; theme: Theme; total: number }) {
+// Round each value's share to 1 decimal (%) via largest-remainder apportionment,
+// so the displayed percentages sum to exactly 100.0% (plain rounding wouldn't).
+function sharePcts(values: number[]): number[] {
+  const total = values.reduce((s, v) => s + v, 0);
+  if (total <= 0) return values.map(() => 0);
+  const UNITS = 1000; // work in 0.1% units; target is 100.0%
+  const raw = values.map((v) => (v / total) * UNITS);
+  const units = raw.map(Math.floor);
+  const left = Math.round(UNITS - units.reduce((s, f) => s + f, 0));
+  raw
+    .map((r, i) => ({ i, frac: r - Math.floor(r) }))
+    .sort((a, b) => b.frac - a.frac)
+    .slice(0, left)
+    .forEach(({ i }) => (units[i] += 1));
+  return units.map((u) => u / 10);
+}
+
+function ModelRow({ m, max, theme, share }: { m: ModelStat; max: number; theme: Theme; share: number }) {
+  // 1-decimal share; whole numbers drop the ".0" (100% not 100.0%).
+  const pctStr = share % 1 === 0 ? share.toFixed(0) : share.toFixed(1);
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 9, padding: "5px 0" }}>
       <span style={{ width: 7, height: 7, borderRadius: 2, background: m.color, flex: "0 0 auto" }} />
@@ -66,7 +85,7 @@ function ModelRow({ m, max, theme, total }: { m: ModelStat; max: number; theme:
         <div style={{ width: `${(m.tokens / max) * 100}%`, height: "100%", background: m.color, borderRadius: 3 }} />
       </div>
       <span style={{ font: `500 10.5px ${theme.mono}`, color: theme.dim, flex: "0 0 auto", width: 42, textAlign: "right" }}>{fmtTokens(m.tokens)}</span>
-      <span style={{ font: `600 10.5px ${theme.mono}`, color: theme.text, flex: "0 0 auto", width: 30, textAlign: "right" }}>{pct(m.tokens, total)}%</span>
+      <span style={{ font: `600 10.5px ${theme.mono}`, color: theme.text, flex: "0 0 auto", width: 40, textAlign: "right" }}>{pctStr}%</span>
     </div>
   );
 }
@@ -149,11 +168,18 @@ function Panel({ dash, dark, onToggleTheme, openGen, active }: { dash: Dashboard
   const animTotal = useCountUp(M.totalTokens, `${period}:${openGen}`, active);
   const models = P.models;
   // Hide noise: 0% token-share rows, and $0 entries in the cost donut.
-  const tokenModels = models.filter((m) => pct(m.tokens, M.totalTokens || 1) > 0);
+  // Show models whose share is at least 0.1% when rounded to 1 decimal; below
+  // that it'd render a meaningless "0.0%" (a negligible token share). Such a
+  // model can still appear under Cost if it has a non-zero cost.
+  const tokenModels = models.filter(
+    (m) => Math.round((m.tokens / (M.totalTokens || 1)) * 1000) / 10 >= 0.1
+  );
   const costModels = models.filter((m) => m.cost > 0);
   // models that were used but have no LiteLLM pricing (cost unknown, not $0)
   const unpricedModels = models.filter((m) => !m.priced && m.tokens > 0);
   const maxM = Math.max(...tokenModels.map((m) => m.tokens), 1e-9);
+  // Per-row shares that sum to exactly 100.0% (largest-remainder over visible rows).
+  const tokenShares = sharePcts(tokenModels.map((m) => m.tokens));
   const trendSub = { Day: "today 24h", Week: "this week", Month: "this month" }[period];
 
   return (
@@ -216,7 +242,7 @@ function Panel({ dash, dark, onToggleTheme, openGen, active }: { dash: Dashboard
         {/* models */}
         <div style={{ marginBottom: 4 }}><Label t={t}>Tokens by model</Label></div>
         {tokenModels.length === 0 && <div style={{ font: `500 10.5px ${t.mono}`, color: t.faint, padding: "4px 0" }}>No usage in this period</div>}
-        {tokenModels.map((m, i) => <ModelRow key={i} m={m} max={maxM} theme={t} total={M.totalTokens || 1} />)}
+        {tokenModels.map((m, i) => <ModelRow key={i} m={m} max={maxM} theme={t} share={tokenShares[i]} />)}
         <SectionRule t={t} m="10px 0 10px" />
         {/* cost donut */}
         <div style={{ marginBottom: 8 }}><Label t={t}>Cost by model</Label></div>

src/App.tsx

@@ -137,7 +137,9 @@ export function CostDonut({ models, theme, size = 104, thickness = 16 }:
   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;
-  const gap = 0.045;
+  // Inter-segment gap, only meaningful when there's more than one wedge to
+  // separate. A single segment is drawn as a closed ring (see render below).
+  const gap = models.length > 1 ? 0.045 : 0;
   let a = -Math.PI / 2;
   const arc = (a0: number, a1: number, rO: number, rI: number) => {
     const large = a1 - a0 > Math.PI ? 1 : 0;
@@ -163,12 +165,25 @@ export function CostDonut({ models, theme, size = 104, thickness = 16 }:
     <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
       <div style={{ position: "relative", width: size, height: size, flex: "0 0 auto" }}>
         <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ overflow: "visible" }}>
-          {wedges.map((w) => (
-            <path key={w.i} d={w.d} fill={w.m.color}
-              opacity={hi === -1 || hi === w.i ? 1 : 0.32}
-              onMouseEnter={() => setHi(w.i)} onMouseLeave={() => setHi(-1)}
-              style={{ transition: "opacity .14s", cursor: "default" }} />
-          ))}
+          {models.length === 1 ? (
+            // Single model: a full closed ring (one 360° arc would be
+            // degenerate, and the inter-segment gap would leave it open). Trace
+            // both edges with a 1px card-coloured stroke for a crisp inset look,
+            // matching the gapped multi-wedge donut.
+            <g onMouseEnter={() => setHi(0)} onMouseLeave={() => setHi(-1)} style={{ cursor: "default" }}>
+              <circle cx={cx} cy={cy} r={(rOut + rIn) / 2}
+                fill="none" stroke={models[0].color} strokeWidth={thickness} />
+              <circle cx={cx} cy={cy} r={rOut} fill="none" stroke={t.card} strokeWidth={1} />
+              <circle cx={cx} cy={cy} r={rIn} fill="none" stroke={t.card} strokeWidth={1} />
+            </g>
+          ) : (
+            wedges.map((w) => (
+              <path key={w.i} d={w.d} fill={w.m.color}
+                opacity={hi === -1 || hi === w.i ? 1 : 0.32}
+                onMouseEnter={() => setHi(w.i)} onMouseLeave={() => setHi(-1)}
+                style={{ transition: "opacity .14s", cursor: "default" }} />
+            ))
+          )}
         </svg>
         <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }}>
           <span style={{ font: `600 ${fit.toFixed(1)}px ${t.mono}`, color: cur ? cur.color : t.text, lineHeight: 1, letterSpacing: "-.01em" }}>{txt}</span>