fix(usage): stop a retained summary from crossing workspace scopes

The summary key now carries a workspaceId, and keepPreviousData retains
across any key change — so moving between two drill-downs drew one
workspace's headline, delta, and chart under the other's name until the
fetch landed.

- Narrow placeholderData to a period change only, matching the breakdown's
  existing scoped predicate, and share the one key-identity helper
- Order the summary key so window is the trailing segment, making the
  scope a plain prefix as it already is on the breakdown
- Give UsageSummary the isPlaceholderData signal UsageConsumers already
  takes, so retained figures dim instead of reading as fresh ones

Author: icecrasher321

apps/sim/ee/organization-usage/components/usage-monitoring.tsx

@@ -348,6 +348,7 @@ export function UsageMonitoring({
             summary={workspaceSummary.data}
             isLoading={workspaceSummary.isLoading}
             isError={workspaceSummary.isError}
+            isPlaceholderData={workspaceSummary.isPlaceholderData}
           />
         </SettingsSection>
         {/*
@@ -481,6 +482,7 @@ export function UsageMonitoring({
                 }
                 isLoading={summary.isLoading}
                 isError={summary.isError}
+                isPlaceholderData={summary.isPlaceholderData}
               />
             </SettingsSection>
             {/*

apps/sim/ee/organization-usage/components/usage-summary.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo } from 'react'
-import { Badge } from '@sim/emcn'
+import { Badge, cn } from '@sim/emcn'
 import { BarChart } from '@/components/charts'
 import type { OrganizationUsageSummary } from '@/lib/api/contracts/organization-usage'
 import { formatCreditsLabel } from '@/lib/billing/credits/conversion'
@@ -16,14 +16,26 @@ interface UsageSummaryProps {
   limitCredits?: number | null
   isLoading: boolean
   isError: boolean
+  /**
+   * Dims the figures while a re-keyed fetch resolves, rather than blanking them — the
+   * same treatment `UsageConsumers` gives a retained list. Without it the headline and
+   * chart present the previous period's numbers as though they were the new period's.
+   */
+  isPlaceholderData?: boolean
 }
 
 function percentDelta(current: number, previous: number): number | null {
   if (previous <= 0) return null
   return ((current - previous) / previous) * 100
 }
 
-export function UsageSummary({ summary, limitCredits, isLoading, isError }: UsageSummaryProps) {
+export function UsageSummary({
+  summary,
+  limitCredits,
+  isLoading,
+  isError,
+  isPlaceholderData,
+}: UsageSummaryProps) {
   /*
     Stabilized so `BarChart`'s `memo()` can actually pass. Built inline it was a new
     array on every render of the panel — a date-picker toggle or an export click
@@ -52,7 +64,9 @@ export function UsageSummary({ summary, limitCredits, isLoading, isError }: Usag
   const isOverLimit = hasLimit && used > limitCredits
 
   return (
-    <div className='flex flex-col gap-3'>
+    <div
+      className={cn('flex flex-col gap-3', isPlaceholderData && 'opacity-50 transition-opacity')}
+    >
       {/*
         One line, and the allowance sits beside the figure rather than under it —
         restating "4,958 credits used" below a "4,958 credits" headline said the same

apps/sim/hooks/queries/organization-usage.ts

@@ -26,6 +26,19 @@ export const ORGANIZATION_USAGE_EVENTS_STALE_TIME = 30 * 1000
 
 const EVENTS_PAGE_SIZE = 50
 
+/**
+ * A usage key with its trailing segment dropped — the identity of the question being
+ * asked, which is what `placeholderData` has to compare on.
+ *
+ * Both keys put the one segment their placeholder may legitimately cross last: the
+ * summary's window ("the same scope, a different period") and the breakdown's row limit
+ * ("the same list, more rows"). Everything a retained answer must never cross —
+ * organization, workspace, dimension — sits in the prefix.
+ */
+function usageKeyIdentity(key: readonly unknown[]): string {
+  return hashKey(key.slice(0, -1))
+}
+
 interface UseSummaryOptions {
   /** The panel fetches the drill-down's chart only while that view is open. */
   enabled?: boolean
@@ -39,8 +52,9 @@ export function useOrganizationUsageSummary(
   options: UseSummaryOptions = {}
 ) {
   const { workspaceId } = options
+  const queryKey = organizationUsageKeys.summary(organizationId ?? '', window, workspaceId)
   return useQuery({
-    queryKey: organizationUsageKeys.summary(organizationId ?? '', window, workspaceId),
+    queryKey,
     queryFn: ({ signal }): Promise<OrganizationUsageSummary> =>
       requestJson(getOrganizationUsageSummaryContract, {
         params: { id: organizationId as string },
@@ -49,8 +63,22 @@ export function useOrganizationUsageSummary(
       }),
     enabled: Boolean(organizationId) && (options.enabled ?? true),
     staleTime: ORGANIZATION_USAGE_SUMMARY_STALE_TIME,
-    // Changing the period should dim the current figures rather than blank them.
-    placeholderData: keepPreviousData,
+    /**
+     * Kept only across a period change — the same scope asked about a different window,
+     * where dimming the figures beats blanking them.
+     *
+     * Not `keepPreviousData`, which retains across *any* key change: once the key
+     * carries a workspace, moving between two drill-downs would draw one workspace's
+     * headline, delta, and chart under the other's name until the fetch landed. A
+     * figure attributed to the wrong workspace is worse than a brief skeleton, and
+     * unlike a ranked list it carries nothing that would look out of place.
+     */
+    placeholderData: (previous, previousQuery) =>
+      previous &&
+      previousQuery &&
+      usageKeyIdentity(previousQuery.queryKey) === usageKeyIdentity(queryKey)
+        ? previous
+        : undefined,
   })
 }
 
@@ -62,14 +90,6 @@ interface UseBreakdownOptions {
   workspaceId?: string
 }
 
-/**
- * A breakdown key with its trailing row limit removed — the identity of the list,
- * which is what "the same list, more rows" has to compare on.
- */
-function breakdownListIdentity(key: readonly unknown[]): string {
-  return hashKey(key.slice(0, -1))
-}
-
 export function useOrganizationUsageBreakdown(
   organizationId: string | undefined,
   window: OrganizationUsageWindowKey,
@@ -110,7 +130,7 @@ export function useOrganizationUsageBreakdown(
     placeholderData: (previous, previousQuery) =>
       previous &&
       previousQuery &&
-      breakdownListIdentity(previousQuery.queryKey) === breakdownListIdentity(queryKey)
+      usageKeyIdentity(previousQuery.queryKey) === usageKeyIdentity(queryKey)
         ? previous
         : undefined,
   })

apps/sim/hooks/queries/utils/organization-usage-keys.ts

@@ -29,7 +29,19 @@ export const organizationUsageKeys = {
     /** Set only inside the Workspaces drill-down, whose chart reads one workspace. */
     workspaceId?: string
   ) =>
-    [...organizationUsageKeys.all(organizationId), 'summary', window, workspaceId ?? ''] as const,
+    [
+      ...organizationUsageKeys.all(organizationId),
+      'summary',
+      workspaceId ?? '',
+      /*
+        Last deliberately, as on `breakdown`: it is the one segment the summary's
+        `placeholderData` may cross, so the scope's identity is a plain prefix rather
+        than an index-based filter that would silently drop `workspaceId` if a segment
+        were ever appended. Ordering it the other way is what let a retained summary
+        cross workspaces.
+      */
+      window,
+    ] as const,
   breakdowns: (organizationId: string, window: OrganizationUsageWindowKey) =>
     [...organizationUsageKeys.all(organizationId), 'breakdown', window] as const,
   breakdown: (