fix token cost (#579)

src/pages/Models/index.tsx

@@ -37,9 +37,18 @@ export function Models() {
   const [usageWindow, setUsageWindow] = useState<UsageWindow>('7d');
   const [usagePage, setUsagePage] = useState(1);
   const [selectedUsageEntry, setSelectedUsageEntry] = useState<UsageHistoryEntry | null>(null);
+  const [usageFetchDoneKey, setUsageFetchDoneKey] = useState<string | null>(null);
   const usageFetchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const usageFetchGenerationRef = useRef(0);
 
+  // Stable key derived from the effect's dependencies — changes whenever a new
+  // fetch cycle should start.  Comparing this to `usageFetchDoneKey` lets us
+  // derive the loading state without calling setState in the effect body or
+  // reading refs during render.
+  const usageFetchKey = isGatewayRunning
+    ? `${gatewayStatus.pid ?? 'na'}:${gatewayStatus.connectedAt ?? 'na'}:${usageFetchMaxAttempts}`
+    : null;
+
   useEffect(() => {
     trackUiEvent('models.page_viewed');
   }, []);
@@ -50,8 +59,11 @@ export function Models() {
       usageFetchTimerRef.current = null;
     }
 
-    if (!isGatewayRunning) return;
+    if (!isGatewayRunning) {
+      return;
+    }
 
+    const fetchKey = `${gatewayStatus.pid ?? 'na'}:${gatewayStatus.connectedAt ?? 'na'}:${usageFetchMaxAttempts}`;
     const generation = usageFetchGenerationRef.current + 1;
     usageFetchGenerationRef.current = generation;
     const restartMarker = `${gatewayStatus.pid ?? 'na'}:${gatewayStatus.connectedAt ?? 'na'}`;
@@ -90,7 +102,8 @@ export function Models() {
           usageFetchTimerRef.current = setTimeout(() => {
             void fetchUsageHistoryWithRetry(attempt + 1);
           }, USAGE_FETCH_RETRY_DELAY_MS);
-        } else if (normalized.length === 0) {
+        } else {
+          if (normalized.length === 0) {
             trackUiEvent('models.token_usage_fetch_exhausted', {
               generation,
               attempt,
@@ -98,6 +111,8 @@ export function Models() {
               restartMarker,
             });
           }
+          setUsageFetchDoneKey(fetchKey);
+        }
       } catch (error) {
         if (usageFetchGenerationRef.current !== generation) return;
         trackUiEvent('models.token_usage_fetch_failed_attempt', {
@@ -119,6 +134,7 @@ export function Models() {
           return;
         }
         setUsageHistory([]);
+        setUsageFetchDoneKey(fetchKey);
         trackUiEvent('models.token_usage_fetch_exhausted', {
           generation,
           attempt,
@@ -145,7 +161,7 @@ export function Models() {
   const usageTotalPages = Math.max(1, Math.ceil(filteredUsageHistory.length / usagePageSize));
   const safeUsagePage = Math.min(usagePage, usageTotalPages);
   const pagedUsageHistory = filteredUsageHistory.slice((safeUsagePage - 1) * usagePageSize, safeUsagePage * usagePageSize);
-  const usageLoading = isGatewayRunning && visibleUsageHistory.length === 0;
+  const usageLoading = isGatewayRunning && usageFetchDoneKey !== usageFetchKey;
 
   return (
     <div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">