fix leaderboard sorting and profile timelines

Author: B-EtterDigital

package.json

@@ -8,7 +8,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "test": "node test/ccusage.test.mts"
+    "test": "node test/ccusage.test.mts && for f in test/*.test.mts; do [ \"$f\" = \"test/ccusage.test.mts\" ] || node \"$f\" || exit 1; done"
   },
   "dependencies": {
     "@auth/core": "^0.40.0",

src/app/@modal/(.)profile/[username]/ProfileSheet.tsx

@@ -7,6 +7,7 @@ import { X, Github, ArrowUpRight } from "lucide-react";
 import TierBadge from "@/components/TierBadge";
 import { getTierProgress } from "@/lib/tiers";
 import { formatNumber, toolLabel, sizedAvatarUrl } from "@/lib/utils";
+import { formatCompactDate, type DailyFreshness } from "@/lib/profile-timeline";
 
 interface ProfileSheetProps {
   username: string;
@@ -21,6 +22,9 @@ interface ProfileSheetProps {
   tools: string[];
   /** Daily spend, oldest → newest, for the mini bar chart. */
   spark: number[];
+  sparkStartDate: string | null;
+  sparkEndDate: string | null;
+  dailyFreshness: DailyFreshness;
 }
 
 export default function ProfileSheet(props: ProfileSheetProps) {
@@ -126,7 +130,12 @@ export default function ProfileSheet(props: ProfileSheetProps) {
           {/* Daily spend sparkline */}
           {props.spark.length > 1 && (
             <div className="rounded-lg bg-background border border-border-subtle p-3 mb-3">
-              <p className="micro-label mb-2">Daily spend · last {props.spark.length} days</p>
+              <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
+                <p className="micro-label">Daily spend · last {props.spark.length} calendar days</p>
+                <span className="text-[10px] font-mono text-muted">
+                  {formatCompactDate(props.sparkStartDate)} - {formatCompactDate(props.sparkEndDate)}
+                </span>
+              </div>
               <div className="flex items-end gap-px h-12">
                 {props.spark.map((v, i) => {
                   const max = Math.max(...props.spark) || 1;
@@ -139,6 +148,11 @@ export default function ProfileSheet(props: ProfileSheetProps) {
                   );
                 })}
               </div>
+              {props.dailyFreshness.isStale && (
+                <p className="mt-2 text-[11px] text-muted">
+                  Data ends {formatCompactDate(props.dailyFreshness.lastRecordedDate)}. Run <code className="font-mono text-accent">npx viberank-cli</code> to update recent days.
+                </p>
+              )}
             </div>
           )}
 

src/app/@modal/(.)profile/[username]/page.tsx

@@ -1,5 +1,6 @@
 import { getServerDataLayer } from "@/lib/data";
 import { getProfileCached } from "@/app/profile/[username]/getProfile";
+import { buildRecentSpendSpark, getDailyFreshness, todayIso } from "@/lib/profile-timeline";
 import ProfileSheet from "./ProfileSheet";
 
 interface Params {
@@ -32,11 +33,14 @@ export default async function InterceptedProfile({ params }: Params) {
   const tools = Array.from(new Set(submissions.flatMap((s) => s.tools ?? []))).sort();
   const bestCost = submissions.length > 0 ? Math.max(...submissions.map((s) => s.totalCost)) : 0;
 
-  // Last 30 calendar days of spend for the sheet's sparkline.
-  const byDate = new Map<string, number>();
-  for (const d of allDaily) byDate.set(d.date, (byDate.get(d.date) ?? 0) + d.totalCost);
-  const days = [...byDate.keys()].sort();
-  const spark = days.slice(-30).map((d) => byDate.get(d) ?? 0);
+  const today = todayIso();
+  const dailyPoints = allDaily.map((d) => ({
+    date: d.date,
+    cost: d.totalCost,
+    tokens: d.totalTokens,
+  }));
+  const spark = buildRecentSpendSpark(dailyPoints, { days: 30, today });
+  const dailyFreshness = getDailyFreshness(dailyPoints, today);
 
   let globalRank: number | null = null;
   try {
@@ -60,7 +64,10 @@ export default async function InterceptedProfile({ params }: Params) {
       bestCost={bestCost}
       globalRank={globalRank}
       tools={tools}
-      spark={spark}
+      spark={spark.values}
+      sparkStartDate={spark.startDate}
+      sparkEndDate={spark.endDate}
+      dailyFreshness={dailyFreshness}
     />
   );
 }

src/app/profile/[username]/UsageChart.tsx

@@ -11,10 +11,11 @@ import {
   Tooltip,
   ResponsiveContainer,
 } from "recharts";
+import { formatCompactDate, type DailyFreshness } from "@/lib/profile-timeline";
 
 type DailyPoint = { date: string; cost: number; tokens: number };
 
-export default function UsageChart({ daily }: { daily: DailyPoint[] }) {
+export default function UsageChart({ daily, freshness }: { daily: DailyPoint[]; freshness?: DailyFreshness }) {
   const [range, setRange] = useState<"7d" | "30d" | "all">("30d");
 
   const data = [...daily]
@@ -24,10 +25,17 @@ export default function UsageChart({ daily }: { daily: DailyPoint[] }) {
   return (
     <div className="bg-surface-1 border border-border rounded-lg p-5 mb-6">
       <div className="flex items-center justify-between mb-4">
-        <h2 className="text-base font-medium flex items-center gap-2">
-          <TrendingUp className="w-4 h-4 text-accent" />
-          Usage over time
-        </h2>
+        <div>
+          <h2 className="text-base font-medium flex items-center gap-2">
+            <TrendingUp className="w-4 h-4 text-accent" />
+            Usage over time
+          </h2>
+          {freshness?.isStale && (
+            <p className="text-xs text-muted mt-1">
+              Data ends {formatCompactDate(freshness.lastRecordedDate)}. Run <code className="font-mono text-accent">npx viberank-cli</code> to update recent days.
+            </p>
+          )}
+        </div>
         <div className="flex gap-1">
           {(["7d", "30d", "all"] as const).map((r) => (
             <button

src/app/profile/[username]/page.tsx

@@ -15,6 +15,7 @@ import {
 import { formatNumber, formatCurrency, toolLabel, sizedAvatarUrl } from "@/lib/utils";
 import { getTierProgress } from "@/lib/tiers";
 import { getServerDataLayer } from "@/lib/data";
+import { buildCalendarDailySeries, getDailyFreshness, todayIso } from "@/lib/profile-timeline";
 import { getProfileCached } from "./getProfile";
 import UsageChart from "./UsageChartLazy";
 import Footer from "@/components/Footer";
@@ -66,14 +67,22 @@ export default async function ProfilePage({ params }: ProfileParams) {
   const daysActive = new Set(allDaily.map((d) => d.date)).size || 1;
   const avgDailyCost = totalCost / daysActive;
 
-  // Per-day chart series (summed across submissions).
-  const dailyMap = allDaily.reduce((acc, d) => {
-    if (!acc[d.date]) acc[d.date] = { date: d.date, cost: 0, tokens: 0 };
-    acc[d.date].cost += d.totalCost;
-    acc[d.date].tokens += d.totalTokens;
-    return acc;
-  }, {} as Record<string, { date: string; cost: number; tokens: number }>);
-  const dailySeries = Object.values(dailyMap);
+  const today = todayIso();
+  const dailyPoints = allDaily.map((d) => ({
+    date: d.date,
+    cost: d.totalCost,
+    tokens: d.totalTokens,
+  }));
+  const firstTrackedDate = submissions
+    .map((s) => s.dateRange.start)
+    .filter(Boolean)
+    .sort()[0];
+  const dailySeries = buildCalendarDailySeries(dailyPoints, {
+    range: "all",
+    today,
+    startDate: firstTrackedDate,
+  });
+  const dailyFreshness = getDailyFreshness(dailyPoints, today);
 
   // Tools used across the profile (Claude sorts first).
   const tools = Array.from(new Set(submissions.flatMap((s) => s.tools ?? []))).sort();
@@ -296,7 +305,7 @@ export default async function ProfilePage({ params }: ProfileParams) {
         </div>
 
         {/* Usage chart (client island) */}
-        <UsageChart daily={dailySeries} />
+        <UsageChart daily={dailySeries} freshness={dailyFreshness} />
 
         {/* Token breakdown + insights */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">

src/components/Leaderboard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Trophy, DollarSign, Zap, Calendar, Share2, X, BadgeCheck, Loader2 } from "lucide-react";
 import { useSession } from "next-auth/react";
@@ -13,6 +13,7 @@ import SponsorSlot from "./SponsorSlot";
 import TierBadge from "./TierBadge";
 import { TIERS } from "@/lib/tiers";
 import { formatNumber, formatCurrency, toolLabel } from "@/lib/utils";
+import { isLeaderboardResultForRequest, shouldUseServerSeededLeaderboard } from "@/lib/leaderboard-view";
 import { useLeaderboard, useLeaderboardByDateRange } from "@/lib/data/hooks/useSubmissions";
 import { useGlobalStats } from "@/lib/data/hooks/useStats";
 import type { Submission, GlobalStats } from "@/lib/data/types";
@@ -60,59 +61,83 @@ export default function Leaderboard({ initialItems, initialStats, initialHasMore
   const [verifiedOnly, setVerifiedOnly] = useState(false);
   const [page, setPage] = useState(0);
   const [allItems, setAllItems] = useState<Submission[]>(initialItems ?? []);
+  const [hasUserInteracted, setHasUserInteracted] = useState(false);
   const { data: session } = useSession();
   const loadMoreRef = useRef<HTMLDivElement>(null);
-  const firstRender = useRef(true);
   const { data: liveStats } = useGlobalStats();
   const globalStats = liveStats ?? initialStats;
 
   const ITEMS_PER_PAGE = 25;
   const isDateFiltered = dateFrom && dateTo;
 
   // The server already rendered page 0 of the default view — don't re-fetch
-  // it on mount. The hook only runs for non-default filters or later pages.
-  const isSeededDefaultView =
-    (initialItems?.length ?? 0) > 0 &&
-    page === 0 &&
-    sortBy === "cost" &&
-    !tool &&
-    !verifiedOnly &&
-    !isDateFiltered;
+  // it on mount. After any user sort/filter click, page 0 must be fetched
+  // fresh; otherwise stale seeded or later-page results can masquerade as top.
+  const isSeededDefaultView = shouldUseServerSeededLeaderboard({
+    hasInitialItems: (initialItems?.length ?? 0) > 0,
+    hasUserInteracted,
+    page,
+    sortBy,
+    hasToolFilter: !!tool,
+    verifiedOnly,
+    isDateFiltered: !!isDateFiltered,
+  });
+
+  const regularParams = useMemo(() => ({
+    sortBy,
+    page,
+    pageSize: ITEMS_PER_PAGE,
+    tool: tool ?? undefined,
+    verifiedOnly: verifiedOnly || undefined,
+  }), [sortBy, page, tool, verifiedOnly]);
+  const dateRangeParams = useMemo(() => ({
+    dateFrom,
+    dateTo,
+    sortBy,
+    limit: 100,
+    tool: tool ?? undefined,
+    verifiedOnly: verifiedOnly || undefined,
+  }), [dateFrom, dateTo, sortBy, tool, verifiedOnly]);
+  const dateRangeRequestKey = useMemo(() => JSON.stringify({
+    dateFrom,
+    dateTo,
+    sortBy,
+    limit: 100,
+    cursor: null,
+    tool: tool ?? null,
+    verifiedOnly: Boolean(verifiedOnly),
+  }), [dateFrom, dateTo, sortBy, tool, verifiedOnly]);
 
   const { data: regularResult, isLoading } = useLeaderboard(
-    !isDateFiltered && !isSeededDefaultView
-      ? { sortBy, page, pageSize: ITEMS_PER_PAGE, tool: tool ?? undefined, verifiedOnly: verifiedOnly || undefined }
-      : "skip"
+    !isDateFiltered && !isSeededDefaultView ? regularParams : "skip"
   );
 
   const hasMore = regularResult?.hasMore ?? (isSeededDefaultView ? initialHasMore ?? false : false);
 
   const { data: dateFilteredResult } = useLeaderboardByDateRange(
-    isDateFiltered
-      ? { dateFrom, dateTo, sortBy, limit: 100, tool: tool ?? undefined, verifiedOnly: verifiedOnly || undefined }
-      : "skip"
+    isDateFiltered ? dateRangeParams : "skip"
   );
 
   // Tools available to filter by, sourced from the global per-tool stats.
   const availableTools = globalStats?.modelUsage
     ? Object.keys(globalStats.modelUsage).sort()
     : [];
 
-  useEffect(() => {
-    // Keep the server-seeded items on first render; only reset when a filter
-    // actually changes (avoids clearing the SSR'd rows during hydration).
-    if (firstRender.current) {
-      firstRender.current = false;
-      return;
-    }
+  const resetBoardForUserChange = () => {
+    setHasUserInteracted(true);
     setAllItems([]);
     setPage(0);
-  }, [sortBy, dateFrom, dateTo, tool, verifiedOnly]);
+  };
+
+  const updateSort = (nextSort: SortBy) => {
+    if (nextSort !== sortBy) resetBoardForUserChange();
+    setSortBy(nextSort);
+  };
 
   useEffect(() => {
-    if (isDateFiltered && dateFilteredResult?.items) {
+    if (isDateFiltered && dateFilteredResult?.items && dateFilteredResult.requestKey === dateRangeRequestKey) {
       setAllItems(dateFilteredResult.items);
-    } else if (!isDateFiltered && regularResult?.items) {
+    } else if (!isDateFiltered && regularResult?.items && isLeaderboardResultForRequest(regularResult, regularParams)) {
       if (page === 0) {
         setAllItems(regularResult.items);
       } else {
@@ -123,7 +148,7 @@ export default function Leaderboard({ initialItems, initialStats, initialHasMore
         });
       }
     }
-  }, [regularResult, dateFilteredResult, page, isDateFiltered]);
+  }, [regularResult, regularParams, dateFilteredResult, dateRangeRequestKey, page, isDateFiltered]);
 
   useEffect(() => {
     if (isDateFiltered || !hasMore) return;
@@ -145,6 +170,7 @@ export default function Leaderboard({ initialItems, initialStats, initialHasMore
   }, [hasMore, isLoading, isDateFiltered, allItems.length]);
 
   const setQuickFilter = (days: number | null) => {
+    resetBoardForUserChange();
     if (days === null) {
       setDateFrom("");
       setDateTo("");
@@ -196,7 +222,10 @@ export default function Leaderboard({ initialItems, initialStats, initialHasMore
             </button>
 
             <button
-              onClick={() => setVerifiedOnly(v => !v)}
+              onClick={() => {
+                resetBoardForUserChange();
+                setVerifiedOnly(v => !v);
+              }}
               aria-pressed={verifiedOnly}
               title="Only show GitHub-verified submissions"
               className={`px-2 py-1 text-xs font-mono font-medium rounded flex items-center gap-1 transition-colors ${
@@ -210,7 +239,10 @@ export default function Leaderboard({ initialItems, initialStats, initialHasMore
             {availableTools.length > 1 && (
               <select
                 value={tool ?? ""}
-                onChange={(e) => setTool(e.target.value || null)}
+                onChange={(e) => {
+                  resetBoardForUserChange();
+                  setTool(e.target.value || null);
+                }}
                 aria-label="Filter by tool"
                 className={`px-2 py-1 text-xs font-mono font-medium rounded bg-surface-2 border border-border transition-colors focus:outline-none focus:ring-1 focus:ring-accent ${
                   tool ? "text-accent" : "text-muted hover:text-foreground"
@@ -228,7 +260,7 @@ export default function Leaderboard({ initialItems, initialStats, initialHasMore
 
           <div className="flex items-center gap-1">
             <button
-              onClick={() => setSortBy("cost")}
+              onClick={() => updateSort("cost")}
               className={`px-2.5 py-1 text-xs font-mono font-medium rounded flex items-center gap-1 transition-colors ${
                 sortBy === "cost" ? "bg-accent text-white" : "text-muted hover:text-foreground hover:bg-surface-2"
               }`}
@@ -237,7 +269,7 @@ export default function Leaderboard({ initialItems, initialStats, initialHasMore
               <span className="hidden sm:inline">Cost</span>
             </button>
             <button
-              onClick={() => setSortBy("tokens")}
+              onClick={() => updateSort("tokens")}
               className={`px-2.5 py-1 text-xs font-mono font-medium rounded flex items-center gap-1 transition-colors ${
                 sortBy === "tokens" ? "bg-accent text-white" : "text-muted hover:text-foreground hover:bg-surface-2"
               }`}
@@ -260,18 +292,31 @@ export default function Leaderboard({ initialItems, initialStats, initialHasMore
                 <input
                   type="date"
                   value={dateFrom}
-                  onChange={(e) => setDateFrom(e.target.value)}
+                  onChange={(e) => {
+                    resetBoardForUserChange();
+                    setDateFrom(e.target.value);
+                  }}
                   className="px-3 py-1.5 bg-background border border-border rounded-md"
                 />
                 <span className="text-muted">→</span>
                 <input
                   type="date"
                   value={dateTo}
-                  onChange={(e) => setDateTo(e.target.value)}
+                  onChange={(e) => {
+                    resetBoardForUserChange();
+                    setDateTo(e.target.value);
+                  }}
                   className="px-3 py-1.5 bg-background border border-border rounded-md"
                 />
                 {(dateFrom || dateTo) && (
-                  <button onClick={() => { setDateFrom(""); setDateTo(""); }} className="text-muted hover:text-foreground">
+                  <button
+                    onClick={() => {
+                      resetBoardForUserChange();
+                      setDateFrom("");
+                      setDateTo("");
+                    }}
+                    className="text-muted hover:text-foreground"
+                  >
                     <X className="w-4 h-4" />
                   </button>
                 )}