Merge pull request #786 from icebear0828/fix/usage-chart-curve-integrity

Preserve usage chart curve integrity

Author: SsuJojo

README_EN.md

@@ -178,21 +178,21 @@ If you see streaming AI text, the setup is working. If you get 401, double-check
 │  POST /gemini/*            (Gemini)                      │
 │       │                                                  │
 │       ▼                                                  │
-│  ┌──────────┐    ┌───────────────┐    ┌──────────────┐   │
-│  │  Routes   │──▶│  Translation  │──▶│    Proxy     │   │
-│  │  (Hono)  │   │ Multi→Codex   │   │ Native TLS   │   │
-│  └──────────┘   └───────────────┘   └──────┬───────┘   │
-│       ▲                                     │           │
-│       │          ┌───────────────┐          │           │
-│       └──────────│  Translation  │◀─────────┘           │
-│                  │ Codex→Multi   │  SSE stream          │
+│  ┌──────────┐   ┌───────────────┐   ┌──────────────┐     │
+│  │  Routes  │──▶│  Translation  │──▶│    Proxy     │     │
+│  │  (Hono)  │   │ Multi→Codex   │   │ Native TLS   │     │
+│  └──────────┘   └───────────────┘   └──────┬───────┘     │
+│       ▲                                    │             │
+│       │          ┌───────────────┐         │             │
+│       └──────────│  Translation  │◀────────┘             │
+│                  │ Codex→Multi   │  SSE stream           │
 │                  └───────────────┘                       │
 │                                                          │
-│  ┌──────────┐  ┌───────────────┐  ┌──────────────────┐  │
-│  │   Auth   │  │  Fingerprint  │  │   Model Store    │  │
-│  │OAuth/API │  │ Rust (rustls) │  │ Static + Dynamic │  │
-│  │ API Keys │  │  Headers/UA   │  │  Plan Routing    │  │
-│  └──────────┘  └───────────────┘  └──────────────────┘  │
+│  ┌──────────┐  ┌───────────────┐  ┌──────────────────┐   │
+│  │   Auth   │  │  Fingerprint  │  │   Model Store    │   │
+│  │OAuth/API │  │ Rust (rustls) │  │ Static + Dynamic │   │
+│  │ API Keys │  │  Headers/UA   │  │  Plan Routing    │   │
+│  └──────────┘  └───────────────┘  └──────────────────┘   │
 │                                                          │
 └──────────────────────────────────────────────────────────┘
                           │

src/auth/usage-stats.ts

@@ -347,9 +347,10 @@ export class UsageStatsStore {
     granularity: "raw" | "five_min" | "hourly" | "daily",
   ): UsageDataPoint[] {
     const cutoff = range === "all" ? null : Date.now() - range * 60 * 60 * 1000;
-    const filtered = cutoff === null
-      ? this.snapshots
-      : this.snapshots.filter((s) => new Date(s.timestamp).getTime() >= cutoff);
+    const filtered = (cutoff === null
+      ? [...this.snapshots]
+      : this.snapshots.filter((s) => new Date(s.timestamp).getTime() >= cutoff))
+      .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
 
     if (filtered.length < 2) return [];
 
@@ -372,7 +373,7 @@ export class UsageStatsStore {
       });
     }
 
-    if (granularity === "raw") return deltas;
+    if (granularity === "raw") return bucketize(deltas, 1);
 
     // Bucket into time intervals
     const bucketMs =

tests/unit/auth/usage-stats.test.ts

@@ -458,6 +458,35 @@ describe("UsageStatsStore", () => {
       expect(raw[0].request_count).toBe(0);
     });
 
+    it("sorts raw history and emits at most one point per timestamp", () => {
+      const now = Date.now();
+      const first = new Date(now - 3600_000).toISOString();
+      const second = new Date(now - 1800_000).toISOString();
+      const snapshots: UsageSnapshot[] = [
+        {
+          timestamp: second,
+          totals: { input_tokens: 300, output_tokens: 30, request_count: 3, active_accounts: 1 },
+        },
+        {
+          timestamp: first,
+          totals: { input_tokens: 100, output_tokens: 10, request_count: 1, active_accounts: 1 },
+        },
+        {
+          timestamp: second,
+          totals: { input_tokens: 200, output_tokens: 20, request_count: 2, active_accounts: 1 },
+        },
+      ];
+
+      persistence = createMockPersistence(snapshots);
+      store = new UsageStatsStore(persistence);
+
+      const raw = store.getHistory("all", "raw");
+      expect(raw).toHaveLength(1);
+      expect(raw[0].timestamp).toBe(second);
+      expect(raw[0].input_tokens).toBe(200);
+      expect(raw[0].request_count).toBe(2);
+    });
+
     it("aggregates into hourly buckets", () => {
       const now = Date.now();
       const hourStart = Math.floor(now / 3600_000) * 3600_000;

web/src/components/UsageChart.tsx

@@ -24,21 +24,34 @@ const PADDING = { top: 20, right: 20, bottom: 40, left: 65 };
 
 export function buildSmoothPath(points: Point[]): string {
   if (points.length === 0) return "";
-  if (points.length === 1) return `M ${points[0].x},${points[0].y}`;
-
-  const commands = [`M ${points[0].x},${points[0].y}`];
-  for (let i = 0; i < points.length - 1; i++) {
-    const previous = points[i - 1] ?? points[i];
-    const current = points[i];
-    const next = points[i + 1];
-    const following = points[i + 2] ?? next;
+
+  // A path must not revisit an x coordinate. This is defensive for callers
+  // that receive duplicate buckets; the history API also de-duplicates them.
+  const uniquePoints = [...points]
+    .sort((a, b) => a.x - b.x)
+    .filter((point, index, sorted) => index === 0 || point.x !== sorted[index - 1].x);
+  if (uniquePoints.length === 1) return `M ${uniquePoints[0].x},${uniquePoints[0].y}`;
+
+  const minY = Math.min(...uniquePoints.map((point) => point.y));
+  const maxY = Math.max(...uniquePoints.map((point) => point.y));
+  const clampY = (y: number) => Math.min(maxY, Math.max(minY, y));
+
+  const commands = [`M ${uniquePoints[0].x},${uniquePoints[0].y}`];
+  for (let i = 0; i < uniquePoints.length - 1; i++) {
+    const previous = uniquePoints[i - 1] ?? uniquePoints[i];
+    const current = uniquePoints[i];
+    const next = uniquePoints[i + 1];
+    const following = uniquePoints[i + 2] ?? next;
+    const segmentWidth = next.x - current.x;
     const control1 = {
-      x: current.x + (next.x - previous.x) / 6,
-      y: current.y + (next.y - previous.y) / 6,
+      // Keep both controls inside this segment so x remains monotonic even
+      // when valid hit-rate points are separated by empty buckets.
+      x: current.x + segmentWidth / 3,
+      y: clampY(current.y + (next.y - previous.y) / 6),
     };
     const control2 = {
-      x: next.x - (following.x - current.x) / 6,
-      y: next.y - (following.y - current.y) / 6,
+      x: next.x - segmentWidth / 3,
+      y: clampY(next.y - (following.y - current.y) / 6),
     };
     commands.push(`C ${control1.x},${control1.y} ${control2.x},${control2.y} ${next.x},${next.y}`);
   }

web/src/pages/__tests__/usage-stats.test.tsx

@@ -156,6 +156,21 @@ describe("UsageStats", () => {
     expect(buildSmoothPath([])).toBe("");
   });
 
+  it("keeps smooth controls within each x segment and y data domain", () => {
+    const path = buildSmoothPath([
+      { x: 0, y: 100 },
+      { x: 1, y: 0 },
+      { x: 100, y: 1 },
+    ]);
+    const coordinates = [...path.matchAll(/(-?\d+(?:\.\d+)?),(-?\d+(?:\.\d+)?)/g)];
+    const xs = coordinates.map((match) => Number(match[1]));
+    const ys = coordinates.map((match) => Number(match[2]));
+
+    expect(xs).toEqual([...xs].sort((a, b) => a - b));
+    expect(Math.min(...ys)).toBeGreaterThanOrEqual(0);
+    expect(Math.max(...ys)).toBeLessThanOrEqual(100);
+  });
+
   it("connects hit-rate points across empty buckets", () => {
     const dataWithEmptyBucket: UsageDataPoint[] = [
       windowPoints[0],