From 0078d27eb27913555a1403d6872e45b80620fea5 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 22 Sep 2026 22:42:17 -0700
Subject: [PATCH 1/5] improvement(insights): serve org usage from settled
 segments and redesign the overview

---
 .../[id]/usage/{summary => overview}/route.ts |  15 +-
 .../[organizationId]/usage/route.test.ts      |   6 +-
 .../components/activity-summary.tsx           | 124 +++----
 .../components/usage-consumers.tsx            |  14 +-
 .../components/usage-credits.test.tsx         |  48 +++
 .../components/usage-credits.tsx              | 176 ++++++++++
 .../components/usage-member-avatar.tsx        |  24 ++
 .../components/usage-monitoring.tsx           |  99 +++---
 .../components/usage-source-mix.tsx           |  50 ---
 .../components/usage-summary.test.tsx         |  28 --
 .../components/usage-summary.tsx              |  76 -----
 .../components/usage-top-cards.tsx            | 104 ++++++
 apps/sim/ee/organization-usage/constants.ts   |  39 +++
 .../hooks/use-legend-highlight.ts             |  26 ++
 apps/sim/hooks/queries/organization-usage.ts  |  26 +-
 apps/sim/hooks/queries/organization.ts        |   5 +
 .../queries/utils/organization-usage-keys.ts  |  28 +-
 .../api/contracts/organization-activity.ts    |   3 +-
 .../lib/api/contracts/organization-usage.ts   |  42 ++-
 .../authorized-organization-usage-use-case.ts |  14 +-
 .../get-organization-activity.test.ts         |  54 ++-
 .../get-organization-activity.ts              |  12 +-
 .../get-organization-usage-breakdown.ts       | 307 ++++++++++--------
 .../get-organization-usage-overview.test.ts   | 150 +++++++++
 .../get-organization-usage-overview.ts        | 185 +++++++++++
 .../organization-usage/operations.ts          |   8 +
 .../core/organization-activity-queries.ts     | 139 ++++++--
 .../core/organization-activity-summary.ts     |  59 ++++
 .../organization-activity.postgres.test.ts    |  27 +-
 .../lib/billing/core/organization-activity.ts |  42 +++
 .../usage-analytics-queries.postgres.test.ts  |  64 +++-
 .../billing/core/usage-analytics-queries.ts   | 248 ++++++++++++--
 .../lib/billing/core/usage-analytics.test.ts  | 138 ++++++++
 apps/sim/lib/billing/core/usage-analytics.ts  | 175 +++++++++-
 .../billing/core/usage-segment-cache.test.ts  | 124 +++++++
 .../lib/billing/core/usage-segment-cache.ts   | 207 ++++++++++++
 .../emcn/src/components/charts/bar-chart.tsx  | 274 +++++++++++-----
 .../components/charts/chart-data-table.tsx    |  22 +-
 .../src/components/charts/chart-format.ts     |  20 +-
 .../components/charts/chart-layout.test.tsx   | 157 ++++++---
 .../src/components/charts/donut-chart.tsx     |  84 -----
 packages/emcn/src/components/charts/index.ts  |   3 +-
 42 files changed, 2689 insertions(+), 757 deletions(-)
 rename apps/sim/app/api/organizations/[id]/usage/{summary => overview}/route.ts (62%)
 create mode 100644 apps/sim/ee/organization-usage/components/usage-credits.test.tsx
 create mode 100644 apps/sim/ee/organization-usage/components/usage-credits.tsx
 create mode 100644 apps/sim/ee/organization-usage/components/usage-member-avatar.tsx
 delete mode 100644 apps/sim/ee/organization-usage/components/usage-source-mix.tsx
 delete mode 100644 apps/sim/ee/organization-usage/components/usage-summary.test.tsx
 delete mode 100644 apps/sim/ee/organization-usage/components/usage-summary.tsx
 create mode 100644 apps/sim/ee/organization-usage/components/usage-top-cards.tsx
 create mode 100644 apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts
 create mode 100644 apps/sim/lib/billing/application/organization-usage/get-organization-usage-overview.test.ts
 create mode 100644 apps/sim/lib/billing/application/organization-usage/get-organization-usage-overview.ts
 create mode 100644 apps/sim/lib/billing/core/organization-activity-summary.ts
 create mode 100644 apps/sim/lib/billing/core/usage-segment-cache.test.ts
 create mode 100644 apps/sim/lib/billing/core/usage-segment-cache.ts
 delete mode 100644 packages/emcn/src/components/charts/donut-chart.tsx

diff --git a/apps/sim/app/api/organizations/[id]/usage/summary/route.ts b/apps/sim/app/api/organizations/[id]/usage/overview/route.ts
similarity index 62%
rename from apps/sim/app/api/organizations/[id]/usage/summary/route.ts
rename to apps/sim/app/api/organizations/[id]/usage/overview/route.ts
index 4d1111e1962..8294ead619c 100644
--- a/apps/sim/app/api/organizations/[id]/usage/summary/route.ts
+++ b/apps/sim/app/api/organizations/[id]/usage/overview/route.ts
@@ -1,24 +1,19 @@
-import { getOrganizationUsageSummaryContract } from '@/lib/api/contracts/organization-usage'
+import { getOrganizationUsageOverviewContract } from '@/lib/api/contracts/organization-usage'
 import {
   defineInternalJsonRoute,
   internalRateLimits,
   internalSessionAuth,
 } from '@/lib/api/server/routes'
-import { getOrganizationUsageSummary } from '@/lib/billing/application/organization-usage/get-organization-usage-summary'
+import { getOrganizationUsageOverview } from '@/lib/billing/application/organization-usage/get-organization-usage-overview'
 import { organizationUsageOperations } from '@/lib/billing/application/organization-usage/operations'
 import { organizationUsageErrorPolicy } from '@/app/api/organizations/[id]/usage/error-policy'
 
 export const dynamic = 'force-dynamic'
 
-/**
- * Everything above the fold in one round trip. Kept separate from the breakdown
- * route because every read here is index-covered, and folding in a dimension that
- * heap-scans would put that cost on first paint.
- */
 export const GET = defineInternalJsonRoute({
-  contract: getOrganizationUsageSummaryContract,
+  contract: getOrganizationUsageOverviewContract,
   auth: internalSessionAuth,
-  operation: organizationUsageOperations.readSummary,
+  operation: organizationUsageOperations.readOverview,
   rateLimit: internalRateLimits.none({
     reason:
       'Authenticated org-admin settings read, gated on enterprise entitlement and billing authority',
@@ -32,6 +27,6 @@ export const GET = defineInternalJsonRoute({
     endDate: query.endDate ? new Date(query.endDate) : undefined,
     timezone: query.timezone,
   }),
-  useCase: getOrganizationUsageSummary,
+  useCase: getOrganizationUsageOverview,
   present: (result) => result,
 })
diff --git a/apps/sim/app/api/v2/organizations/[organizationId]/usage/route.test.ts b/apps/sim/app/api/v2/organizations/[organizationId]/usage/route.test.ts
index aa72574f436..0336f0878f4 100644
--- a/apps/sim/app/api/v2/organizations/[organizationId]/usage/route.test.ts
+++ b/apps/sim/app/api/v2/organizations/[organizationId]/usage/route.test.ts
@@ -57,7 +57,7 @@ vi.mock('@/lib/billing/organizations/member-limits', () => ({
 vi.mock('@/lib/billing/core/usage-analytics-queries', () => ({
   readUsageTotals: mocks.totals,
   readUsageTimeSeries: mocks.series,
-  readUsageBreakdown: mocks.breakdown,
+  readUsageGroups: mocks.breakdown,
   readUsageEntityNames: vi.fn().mockResolvedValue(new Map()),
 }))
 vi.mock('@/lib/billing/core/usage-log', () => ({ getBillingEntityUsageLogs: mocks.logs }))
@@ -431,7 +431,9 @@ describe('organization usage API authorization and bounds', () => {
     )
     const response = await breakdown(request('usage/breakdown?dimension=member'), usageContext)
     expect(response.status).toBe(413)
-    expect(mocks.breakdown).toHaveBeenCalledWith(expect.any(Array), 'member', undefined, 10_000)
+    expect(mocks.breakdown).toHaveBeenCalledWith(
+      expect.objectContaining({ dimension: 'member', maxRows: 10_000 })
+    )
   })
 })
 
diff --git a/apps/sim/ee/organization-usage/components/activity-summary.tsx b/apps/sim/ee/organization-usage/components/activity-summary.tsx
index 47d42aceed1..bfb0db578e4 100644
--- a/apps/sim/ee/organization-usage/components/activity-summary.tsx
+++ b/apps/sim/ee/organization-usage/components/activity-summary.tsx
@@ -1,12 +1,45 @@
 'use client'
 
 import { useMemo } from 'react'
-import { BarChart, ChartFrame, DashboardMetric, DonutChart, formatChartLatency } from '@sim/emcn'
+import {
+  BarChart,
+  type BarChartSeries,
+  ChartFrame,
+  ChartLegend,
+  type ChartLegendItem,
+  DashboardMetric,
+  formatChartLatency,
+} from '@sim/emcn'
 import type { OrganizationActivitySummary } from '@/lib/api/contracts/organization-activity'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
+import { USAGE_CHAT_COLOR } from '@/ee/organization-usage/constants'
+import { useLegendHighlight } from '@/ee/organization-usage/hooks/use-legend-highlight'
 import { useOrganizationActivitySummary } from '@/hooks/queries/organization-activity'
 import type { OrganizationUsageWindowKey } from '@/hooks/queries/utils/organization-usage-keys'
 
+const CHART_HEIGHT = 180
+
+/**
+ * Outcome layers, bottom-up. Failed is the status red and sits on the stack where a
+ * spike reads at a glance; Other (cancelled, paused, unfinished) stays neutral.
+ */
+const OUTCOMES = [
+  { id: 'completed', label: 'Completed', color: 'var(--brand-blue)' },
+  { id: 'failed', label: 'Failed', color: 'var(--text-error)' },
+  { id: 'other', label: 'Other', color: 'var(--text-muted)' },
+] as const
+
+const OUTCOME_LEGEND: ChartLegendItem[] = [...OUTCOMES]
+const OUTCOME_IDS = OUTCOMES.map((outcome) => outcome.id)
+
+type ActivityPoint = OrganizationActivitySummary['series'][number]
+
+const OUTCOME_VALUE: Record<(typeof OUTCOMES)[number]['id'], (point: ActivityPoint) => number> = {
+  completed: (point) => point.completed,
+  failed: (point) => point.failed,
+  other: (point) => Math.max(0, point.workflowRuns - point.completed - point.failed),
+}
+
 interface ActivitySummaryProps {
   summary?: OrganizationActivitySummary
   loading?: boolean
@@ -24,30 +57,26 @@ export function formatFailureRate(rate: number | null): string {
 }
 
 export function ActivitySummary({ summary, loading, error, onRetry }: ActivitySummaryProps) {
-  const workflowSeries = useMemo(
+  const highlight = useLegendHighlight(OUTCOME_IDS)
+
+  const outcomeSeries = useMemo<BarChartSeries[]>(
     () =>
-      summary?.series.map((point) => ({
-        timestamp: point.timestamp,
-        value: point.workflowRuns,
-      })) ?? [],
+      OUTCOMES.map((outcome) => ({
+        ...outcome,
+        data: (summary?.series ?? []).map((point) => ({
+          timestamp: point.timestamp,
+          value: OUTCOME_VALUE[outcome.id](point),
+        })),
+      })),
     [summary?.series]
   )
+
   const chatSeries = useMemo(
     () =>
-      summary?.series.map((point) => ({
-        timestamp: point.timestamp,
-        value: point.chatRuns,
-      })) ?? [],
-    [summary?.series]
-  )
-  const failureSeries = useMemo(
-    () =>
-      summary?.series.map((point) => ({
-        timestamp: point.timestamp,
-        value: point.failed,
-      })) ?? [],
+      summary?.series.map((point) => ({ timestamp: point.timestamp, value: point.chatRuns })) ?? [],
     [summary?.series]
   )
+
   const totals = summary?.totals
   const metrics = [
     {
@@ -81,16 +110,8 @@ export function ActivitySummary({ summary, loading, error, onRetry }: ActivitySu
       description: 'Completed and failed workflows with a recorded duration.',
     },
   ]
-  const outcomes = [
-    { label: 'Completed', value: totals?.completed ?? 0, color: 'var(--indicator-seat-filled)' },
-    { label: 'Failed', value: totals?.failed ?? 0, color: 'var(--text-error)' },
-    {
-      label: 'Other',
-      value: totals ? totals.workflowRuns - totals.completed - totals.failed : 0,
-      color: 'var(--text-muted)',
-    },
-  ]
   const chartState = { loading, error: error ? "Couldn't load activity." : undefined, onRetry }
+
   return (
     <div className='flex flex-col gap-5'>
       <div className='grid grid-cols-[repeat(auto-fit,minmax(min(120px,100%),1fr))] gap-4'>
@@ -104,41 +125,32 @@ export function ActivitySummary({ summary, loading, error, onRetry }: ActivitySu
         ))}
       </div>
       <div className='grid grid-cols-[repeat(auto-fit,minmax(min(280px,100%),1fr))] gap-6'>
-        <ChartFrame title='Workflow runs' height={160} {...chartState}>
+        <div className='flex min-w-0 flex-col gap-2'>
+          <ChartFrame
+            title='Workflow runs'
+            description='Other includes cancelled, paused, and unfinished runs.'
+            height={CHART_HEIGHT}
+            {...chartState}
+          >
+            <BarChart
+              label=''
+              xAxisFormat='date'
+              height={CHART_HEIGHT}
+              series={outcomeSeries}
+              highlightedSeriesId={highlight.highlightedId}
+            />
+          </ChartFrame>
+          <ChartLegend layout='row' items={OUTCOME_LEGEND} {...highlight.legendProps} />
+        </div>
+        <ChartFrame title='Chat runs' height={CHART_HEIGHT} {...chartState}>
           <BarChart
-            xAxisFormat='date'
-            data={workflowSeries}
             label=''
-            color='var(--indicator-seat-filled)'
-            height={160}
-          />
-        </ChartFrame>
-        <ChartFrame title='Chat runs' height={160} {...chartState}>
-          <BarChart
             xAxisFormat='date'
+            height={CHART_HEIGHT}
             data={chatSeries}
-            label=''
-            color='var(--indicator-seat-filled)'
-            height={160}
+            color={USAGE_CHAT_COLOR}
           />
         </ChartFrame>
-        <ChartFrame title='Failed runs' height={160} {...chartState}>
-          <BarChart
-            xAxisFormat='date'
-            data={failureSeries}
-            label=''
-            color='var(--text-error)'
-            height={160}
-          />
-        </ChartFrame>
-        <ChartFrame
-          title='Workflow outcomes'
-          description='Other includes cancelled, paused, and unfinished runs.'
-          height={160}
-          {...chartState}
-        >
-          <DonutChart segments={outcomes} label='Workflow outcomes' />
-        </ChartFrame>
       </div>
     </div>
   )
diff --git a/apps/sim/ee/organization-usage/components/usage-consumers.tsx b/apps/sim/ee/organization-usage/components/usage-consumers.tsx
index 8a508eaf2c9..aef6f01de4e 100644
--- a/apps/sim/ee/organization-usage/components/usage-consumers.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-consumers.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import type { ComponentType } from 'react'
+import type { ComponentType, ReactNode } from 'react'
 import { cn, disclosureChevronClass, formatChartCompactNumber } from '@sim/emcn'
 import { ArrowRight, ChevronDown } from '@sim/emcn/icons'
 import {
@@ -89,6 +89,8 @@ export const USAGE_PROVIDER_ICON_IDS = Object.keys(PROVIDER_ICONS)
 
 interface UsageConsumerRowProps {
   row: OrganizationUsageBreakdownRow
+  /** Replaces the provider mark, e.g. with a member's avatar. */
+  leading?: ReactNode
   /** BYOK rows carry no cost, so tokens are the only usage they can show. */
   showTokensOnly: boolean
   onSelect?: (row: OrganizationUsageBreakdownRow) => void
@@ -126,6 +128,7 @@ export const USAGE_ROW_CLASSES = 'flex w-full items-center gap-2.5 rounded-lg p-
  */
 function UsageConsumerRow({
   row,
+  leading,
   showTokensOnly,
   onSelect,
   actions,
@@ -148,14 +151,15 @@ function UsageConsumerRow({
         onSelect && 'transition-colors hover-hover:bg-[var(--surface-active)]'
       )}
     >
-      {ProviderIcon && <ProviderIcon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
+      {leading ??
+        (ProviderIcon && <ProviderIcon className='size-[14px] shrink-0 text-[var(--text-icon)]' />)}
       <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'>{row.label}</span>
       <div
         className='h-[4px] w-[64px] shrink-0 overflow-hidden rounded-full bg-[var(--border)]'
         aria-hidden='true'
       >
         <div
-          className='h-full rounded-full bg-[var(--indicator-seat-filled)]'
+          className='h-full rounded-full bg-[var(--brand-blue)]'
           style={{ width: `${Math.max(2, Math.round(row.share * 100))}%` }}
         />
       </div>
@@ -185,6 +189,8 @@ interface UsageConsumersProps {
   onSelectRow?: (row: OrganizationUsageBreakdownRow) => void
   /** Set on Members, where a row can open the shared manage-credits modal. */
   rowActions?: (row: OrganizationUsageBreakdownRow) => RowAction[]
+  /** Leading visual per row, in place of the provider mark. */
+  renderLeading?: (row: OrganizationUsageBreakdownRow) => ReactNode
   /**
    * Opens the truncated tail. Omitted when the list is already showing everything the
    * API will return, which is the one case where the `Other` row has nothing to open.
@@ -200,6 +206,7 @@ export function UsageConsumers({
   isPlaceholderData,
   onSelectRow,
   rowActions,
+  renderLeading,
   onExpandOther,
 }: UsageConsumersProps) {
   if (isError) {
@@ -238,6 +245,7 @@ export function UsageConsumers({
         <UsageConsumerRow
           key={`${dimension}-${row.id}`}
           row={row}
+          leading={renderLeading?.(row)}
           showTokensOnly={showTokensOnly}
           {...(onExpandOther && trailingSlot ? { reservedTrailing: trailingSlot } : {})}
           {...(onSelectRow && row.id ? { onSelect: onSelectRow } : {})}
diff --git a/apps/sim/ee/organization-usage/components/usage-credits.test.tsx b/apps/sim/ee/organization-usage/components/usage-credits.test.tsx
new file mode 100644
index 00000000000..23c81a2c008
--- /dev/null
+++ b/apps/sim/ee/organization-usage/components/usage-credits.test.tsx
@@ -0,0 +1,48 @@
+/** @vitest-environment node */
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import type { OrganizationUsageOverview } from '@/lib/api/contracts/organization-usage'
+import { UsageCredits } from '@/ee/organization-usage/components/usage-credits'
+
+const overview: OrganizationUsageOverview = {
+  window: { start: '2026-01-01', end: '2026-01-08', source: 'range' },
+  bucket: 'day',
+  totals: { credits: 200 },
+  previousTotals: { credits: 100 },
+  limitCredits: 150,
+  series: [],
+  members: {
+    dimension: 'member',
+    rows: [],
+    other: { credits: 0, events: 0, rowCount: 0, tokens: 0 },
+    totalCredits: 200,
+  },
+}
+
+describe('UsageCredits', () => {
+  it('hides stale usage badges when a refresh fails', () => {
+    const render = (isError: boolean) =>
+      renderToStaticMarkup(<UsageCredits overview={overview} isLoading={false} isError={isError} />)
+    const ok = render(false)
+    expect(ok).toContain('Over limit')
+    expect(ok).toContain('compared with the previous period')
+    expect(ok).toContain('133% of 150')
+    const failed = render(true)
+    expect(failed).not.toContain('Over limit')
+    expect(failed).not.toContain('compared with the previous period')
+    expect(failed).not.toContain('of 150')
+    expect(failed).toContain('load credits.')
+  })
+
+  it('omits the allowance outside the organization period', () => {
+    const markup = renderToStaticMarkup(
+      <UsageCredits
+        overview={{ ...overview, limitCredits: null }}
+        isLoading={false}
+        isError={false}
+      />
+    )
+    expect(markup).not.toContain('Over limit')
+    expect(markup).not.toContain('role="meter"')
+  })
+})
diff --git a/apps/sim/ee/organization-usage/components/usage-credits.tsx b/apps/sim/ee/organization-usage/components/usage-credits.tsx
new file mode 100644
index 00000000000..f3b8c43077e
--- /dev/null
+++ b/apps/sim/ee/organization-usage/components/usage-credits.tsx
@@ -0,0 +1,176 @@
+'use client'
+
+import { useMemo } from 'react'
+import {
+  Badge,
+  BarChart,
+  type BarChartSeries,
+  ChartFrame,
+  ChartLegend,
+  type ChartLegendItem,
+  cn,
+  formatChartCompactNumber,
+} from '@sim/emcn'
+import type { OrganizationUsageOverview } from '@/lib/api/contracts/organization-usage'
+import {
+  USAGE_SOURCE_CATEGORIES,
+  USAGE_SOURCE_CATEGORY,
+  type UsageSourceCategoryId,
+} from '@/ee/organization-usage/constants'
+import { useLegendHighlight } from '@/ee/organization-usage/hooks/use-legend-highlight'
+
+const CHART_HEIGHT = 200
+
+interface CreditLayers {
+  layers: BarChartSeries[]
+  legend: ChartLegendItem[]
+}
+
+/**
+ * Folds the per-source cells into the chart's fixed categories.
+ *
+ * Only categories with usage are drawn, but each keeps its own color, so a quiet
+ * period never repaints the survivors. A window with no usage still draws its empty
+ * buckets as one zero layer — a flat baseline is information, "No data" reads as a
+ * failure.
+ */
+function toCreditLayers(series: OrganizationUsageOverview['series']): CreditLayers {
+  const byCategory = new Map<UsageSourceCategoryId, number[]>()
+  series.forEach((point, index) => {
+    for (const [source, credits] of Object.entries(point.sources)) {
+      const category = USAGE_SOURCE_CATEGORY[source as keyof typeof USAGE_SOURCE_CATEGORY]
+      let values = byCategory.get(category)
+      if (!values) {
+        values = new Array<number>(series.length).fill(0)
+        byCategory.set(category, values)
+      }
+      values[index] += credits ?? 0
+    }
+  })
+
+  const present = USAGE_SOURCE_CATEGORIES.flatMap((category) => {
+    const values = byCategory.get(category.id)
+    return values ? [{ category, values }] : []
+  })
+  if (present.length === 0) {
+    return {
+      layers: [
+        {
+          id: 'credits',
+          label: 'Credits',
+          color: USAGE_SOURCE_CATEGORIES[0].color,
+          data: series.map((point) => ({ timestamp: point.timestamp, value: 0 })),
+        },
+      ],
+      legend: [],
+    }
+  }
+
+  return {
+    layers: present.map(({ category, values }) => ({
+      id: category.id,
+      label: category.label,
+      color: category.color,
+      data: series.map((point, index) => ({ timestamp: point.timestamp, value: values[index] })),
+    })),
+    legend: present.map(({ category, values }) => ({
+      id: category.id,
+      label: category.label,
+      color: category.color,
+      value: formatChartCompactNumber(values.reduce((sum, value) => sum + value, 0)),
+    })),
+  }
+}
+
+interface UsageCreditsProps {
+  overview?: OrganizationUsageOverview
+  isLoading: boolean
+  isError: boolean
+  /** Dims the figures while a re-keyed fetch resolves, rather than blanking them. */
+  isPlaceholderData?: boolean
+  onRetry?: () => void
+}
+
+/** Headline, allowance, and the source-stacked credit chart for one window. */
+export function UsageCredits({
+  overview,
+  isLoading,
+  isError,
+  isPlaceholderData,
+  onRetry,
+}: UsageCreditsProps) {
+  /** A failed refresh keeps its last data; no figure, badge, or legend may be drawn from it. */
+  const current = isError ? undefined : overview
+  const { layers, legend } = useMemo(() => toCreditLayers(current?.series ?? []), [current])
+  const used = current?.totals.credits ?? 0
+  const previous = current?.previousTotals?.credits ?? 0
+  const delta = current && previous > 0 ? ((used - previous) / previous) * 100 : null
+  const limit = current?.limitCredits ?? null
+  const highlight = useLegendHighlight(legend.map((item) => item.id))
+
+  return (
+    <div className={cn('flex flex-col gap-4', isPlaceholderData && 'opacity-50')}>
+      <div className='flex flex-col gap-1.5'>
+        <div className='flex h-7 items-baseline gap-2 whitespace-nowrap'>
+          <span className='text-[var(--text-body)] text-lg tabular-nums'>
+            {current ? used.toLocaleString() : '—'}
+          </span>
+          <span className='text-[var(--text-muted)] text-caption'>
+            {used === 1 ? 'credit' : 'credits'}
+          </span>
+          {delta !== null && (
+            <Badge
+              variant={delta > 0 ? 'amber' : 'gray-secondary'}
+              size='sm'
+              aria-label={`${Math.abs(delta).toFixed(0)}% ${delta > 0 ? 'increase' : delta < 0 ? 'decrease' : 'change'} compared with the previous period`}
+            >{`${delta > 0 ? '↑' : '↓'} ${Math.abs(delta).toFixed(0)}%`}</Badge>
+          )}
+          {limit !== null && used > limit && (
+            <Badge variant='red' size='sm'>
+              Over limit
+            </Badge>
+          )}
+        </div>
+        {limit !== null && (
+          <div className='flex items-center gap-2'>
+            <div
+              className='h-[4px] w-[120px] overflow-hidden rounded-full bg-[var(--border)]'
+              role='meter'
+              aria-label='Share of the organization allowance used'
+              aria-valuemin={0}
+              aria-valuemax={limit}
+              aria-valuenow={Math.min(used, limit)}
+            >
+              <div
+                className={cn(
+                  'h-full rounded-full',
+                  used > limit ? 'bg-[var(--text-error)]' : 'bg-[var(--brand-blue)]'
+                )}
+                style={{ width: `${Math.min(100, (used / limit) * 100)}%` }}
+              />
+            </div>
+            <span className='text-[var(--text-muted)] text-caption tabular-nums'>
+              {`${Math.round((used / limit) * 100)}% of ${limit.toLocaleString()}`}
+            </span>
+          </div>
+        )}
+      </div>
+      <ChartFrame
+        height={CHART_HEIGHT}
+        loading={isLoading || (!overview && !isError)}
+        error={isError ? "Couldn't load credits." : undefined}
+        onRetry={onRetry}
+      >
+        <BarChart
+          label=''
+          unit='credits'
+          xAxisFormat='date'
+          height={CHART_HEIGHT}
+          series={layers}
+          highlightedSeriesId={highlight.highlightedId}
+        />
+      </ChartFrame>
+      {legend.length > 1 && <ChartLegend layout='row' items={legend} {...highlight.legendProps} />}
+    </div>
+  )
+}
diff --git a/apps/sim/ee/organization-usage/components/usage-member-avatar.tsx b/apps/sim/ee/organization-usage/components/usage-member-avatar.tsx
new file mode 100644
index 00000000000..f70462067c7
--- /dev/null
+++ b/apps/sim/ee/organization-usage/components/usage-member-avatar.tsx
@@ -0,0 +1,24 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@sim/emcn'
+import { getUserColor } from '@/lib/workspaces/colors'
+
+interface UsageMemberAvatarProps {
+  id: string
+  name: string
+  image?: string | null
+}
+
+/** A 20px member mark for ranked usage rows, sized to sit on a line with a provider glyph. */
+export function UsageMemberAvatar({ id, name, image }: UsageMemberAvatarProps) {
+  return (
+    <Avatar className='size-5'>
+      {image && <AvatarImage src={image} alt='' />}
+      <AvatarFallback
+        style={{ background: getUserColor(id) }}
+        className='border-0 text-micro text-white'
+        aria-hidden='true'
+      >
+        {name.charAt(0).toUpperCase()}
+      </AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/apps/sim/ee/organization-usage/components/usage-monitoring.tsx b/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
index 23f4d1369d1..82a241e2560 100644
--- a/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
@@ -17,7 +17,6 @@ import {
   MAX_CUSTOM_RANGE_DAYS,
   type UsageBreakdownDimension,
 } from '@/lib/api/contracts/organization-usage'
-import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import {
   ManageCreditsModal,
@@ -29,8 +28,9 @@ import { serializeAuditLogFilters } from '@/ee/audit-logs/search-params'
 import { ActivityPanel } from '@/ee/organization-usage/components/activity-panel'
 import { OrganizationActivityOverview } from '@/ee/organization-usage/components/activity-summary'
 import { UsageConsumers } from '@/ee/organization-usage/components/usage-consumers'
-import { UsageSourceMix } from '@/ee/organization-usage/components/usage-source-mix'
-import { UsageSummary } from '@/ee/organization-usage/components/usage-summary'
+import { UsageCredits } from '@/ee/organization-usage/components/usage-credits'
+import { UsageMemberAvatar } from '@/ee/organization-usage/components/usage-member-avatar'
+import { UsageTopCards } from '@/ee/organization-usage/components/usage-top-cards'
 import {
   COLLAPSED_ROW_COUNT,
   EXPANDED_ROW_COUNT,
@@ -43,10 +43,9 @@ import {
 } from '@/ee/organization-usage/constants'
 import { useUsageWindow } from '@/ee/organization-usage/hooks/use-usage-window'
 import { serializeOrganizationUsageParams } from '@/ee/organization-usage/search-params'
-import { useOrganizationBilling } from '@/hooks/queries/organization'
 import {
   useOrganizationUsageBreakdown,
-  useOrganizationUsageSummary,
+  useOrganizationUsageOverview,
 } from '@/hooks/queries/organization-usage'
 
 const TABS = USAGE_TAB_ORDER.map((tab) => ({ value: tab, label: USAGE_TAB_LABELS[tab] }))
@@ -103,7 +102,7 @@ export function UsageMonitoring({
   /** Member credit caps are enforced only on hosted deployments. */
   const canManageCredits = tab === 'member' && hosted
 
-  const summary = useOrganizationUsageSummary(organizationId, window, { enabled: isOverview })
+  const overview = useOrganizationUsageOverview(organizationId, window, { enabled: isOverview })
   /** Use the full workspace page to resolve IDs selected from an expanded list. */
   const workspaceList = useOrganizationUsageBreakdown(organizationId, window, 'workspace', {
     enabled: isWorkspaceSelected,
@@ -117,12 +116,12 @@ export function UsageMonitoring({
   const isWorkspaceDetail =
     isWorkspaceSelected && (workspaceList.isLoading || workspaceName !== undefined)
 
-  const dimension: UsageBreakdownDimension =
-    isOverview || tab === 'activity'
-      ? 'source'
-      : isWorkspaceDetail
-        ? 'workflow'
-        : (tab as UsageBreakdownDimension)
+  /** Overview and Activity draw no ranked list of their own; the value is never fetched. */
+  const dimension: UsageBreakdownDimension = isWorkspaceDetail
+    ? 'workflow'
+    : isOverview || tab === 'activity'
+      ? 'member'
+      : (tab as UsageBreakdownDimension)
 
   /**
    * Per breakdown, not per page: the drill-down shows two lists at once, so opening
@@ -138,24 +137,15 @@ export function UsageMonitoring({
       : undefined
 
   const breakdown = useOrganizationUsageBreakdown(organizationId, window, dimension, {
-    enabled: tab !== 'activity',
+    enabled: !isOverview && tab !== 'activity',
     limit: rowLimitFor(dimension),
     ...(isWorkspaceDetail && workspace ? { workspaceId: workspace } : {}),
   })
-  const workspaceSources = useOrganizationUsageBreakdown(organizationId, window, 'source', {
+  const workspaceOverview = useOrganizationUsageOverview(organizationId, window, {
     enabled: isWorkspaceDetail,
-    limit: rowLimitFor('source'),
     ...(workspace ? { workspaceId: workspace } : {}),
   })
 
-  const workspaceSummary = useOrganizationUsageSummary(organizationId, window, {
-    enabled: isWorkspaceDetail,
-    ...(workspace ? { workspaceId: workspace } : {}),
-  })
-  const billing = useOrganizationBilling(organizationId, {
-    enabled: isOverview && preset === 'current-period',
-  })
-
   /** Audit logs have a separate deployment flag and incompatible period presets. */
   const auditLogsHref =
     hosted || features.auditLogs ? serializeAuditLogFilters(auditLogsBaseHref, { workspace }) : null
@@ -253,25 +243,16 @@ export function UsageMonitoring({
             : []
         }
       >
-        {/** Organization allowances do not apply to a single workspace. */}
+        {/** The server withholds the organization allowance from a single workspace. */}
         <SettingsSection label={periodLabel}>
-          <UsageSummary
-            summary={workspaceSummary.data}
-            isLoading={workspaceSummary.isLoading}
-            isError={workspaceSummary.isError}
-            isPlaceholderData={workspaceSummary.isPlaceholderData}
+          <UsageCredits
+            overview={workspaceOverview.data}
+            isLoading={workspaceOverview.isLoading}
+            isError={workspaceOverview.isError}
+            isPlaceholderData={workspaceOverview.isPlaceholderData}
+            onRetry={() => void workspaceOverview.refetch()}
           />
         </SettingsSection>
-        <UsageSection dimension='source' unit='credits'>
-          <UsageConsumers
-            dimension='source'
-            breakdown={workspaceSources.data}
-            isLoading={workspaceSources.isLoading}
-            isError={workspaceSources.isError}
-            isPlaceholderData={workspaceSources.isPlaceholderData}
-            onExpandOther={expandOtherFor('source')}
-          />
-        </UsageSection>
         <UsageSection dimension='workflow' unit='credits'>
           <UsageConsumers
             dimension='workflow'
@@ -357,28 +338,27 @@ export function UsageMonitoring({
 
         {isOverview ? (
           <>
-            {/** Compare the allowance only with its billing period. */}
             <SettingsSection label={periodLabel}>
-              <UsageSummary
-                summary={summary.data}
-                limitCredits={
-                  preset === 'current-period' && billing.data?.data?.totalUsageLimit != null
-                    ? dollarsToCredits(billing.data.data.totalUsageLimit)
-                    : null
-                }
-                isLoading={summary.isLoading}
-                isError={summary.isError}
-                isPlaceholderData={summary.isPlaceholderData}
+              <UsageCredits
+                overview={overview.data}
+                isLoading={overview.isLoading}
+                isError={overview.isError}
+                isPlaceholderData={overview.isPlaceholderData}
+                onRetry={() => void overview.refetch()}
               />
             </SettingsSection>
+            <UsageTopCards
+              organizationId={organizationId}
+              window={window}
+              overview={overview.data}
+              isOverviewLoading={overview.isLoading}
+              isOverviewError={overview.isError}
+              isOverviewPlaceholderData={overview.isPlaceholderData}
+              onViewAll={(target) =>
+                void setState({ tab: target, workspace: null, expanded: null, activityPage: 0 })
+              }
+            />
             <OrganizationActivityOverview organizationId={organizationId} window={window} />
-            <UsageSection dimension='source' unit='credits'>
-              <UsageSourceMix
-                breakdown={breakdown.data}
-                isLoading={breakdown.isLoading}
-                isError={breakdown.isError}
-              />
-            </UsageSection>
           </>
         ) : tab === 'activity' ? (
           <ActivityPanel organizationId={organizationId} />
@@ -398,6 +378,11 @@ export function UsageMonitoring({
                       void setState({ workspace: row.id, expanded: null }, { history: 'push' }),
                   }
                 : {})}
+              {...(tab === 'member'
+                ? {
+                    renderLeading: (row) => <UsageMemberAvatar id={row.id} name={row.label} />,
+                  }
+                : {})}
               {...(canManageCredits
                 ? {
                     rowActions: (row) => [
diff --git a/apps/sim/ee/organization-usage/components/usage-source-mix.tsx b/apps/sim/ee/organization-usage/components/usage-source-mix.tsx
deleted file mode 100644
index 186b9126073..00000000000
--- a/apps/sim/ee/organization-usage/components/usage-source-mix.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-
-import { ChartFrame, DonutChart } from '@sim/emcn'
-import type { OrganizationUsageBreakdown } from '@/lib/api/contracts/organization-usage'
-
-const SOURCE_COLORS: Readonly<Record<string, string>> = {
-  workflow: 'var(--indicator-seat-filled)',
-  'sim-chat': 'var(--brand-agent)',
-  mcp_copilot: 'var(--badge-purple-text)',
-  mothership_block: 'var(--badge-pink-text)',
-  'knowledge-base': 'var(--badge-teal-text)',
-  enrichment: 'var(--badge-amber-text)',
-  wand: 'var(--badge-cyan-text)',
-  'voice-input': 'var(--badge-orange-text)',
-  'voice-output': 'var(--text-success)',
-  'api-tool': 'var(--badge-blue-text)',
-}
-const MAX_SOURCES = 5
-
-interface UsageSourceMixProps {
-  breakdown?: OrganizationUsageBreakdown
-  isLoading: boolean
-  isError: boolean
-}
-
-export function UsageSourceMix({ breakdown, isLoading, isError }: UsageSourceMixProps) {
-  const rows = breakdown?.rows ?? []
-  const head = rows.slice(0, MAX_SOURCES)
-  const tail = rows.slice(MAX_SOURCES)
-  const otherCredits =
-    tail.reduce((total, row) => total + row.credits, 0) + (breakdown?.other.credits ?? 0)
-  const segments = [
-    ...head.map((row) => ({
-      label: row.label,
-      value: row.credits,
-      color: SOURCE_COLORS[row.id ?? ''] ?? 'var(--text-muted)',
-    })),
-    ...(otherCredits > 0 ? [{ label: 'Other', value: otherCredits, color: 'var(--border)' }] : []),
-  ]
-
-  return (
-    <ChartFrame
-      height={200}
-      loading={isLoading || (!breakdown && !isError)}
-      error={isError ? "Couldn't load sources." : undefined}
-    >
-      <DonutChart segments={segments} label='Credits by source' />
-    </ChartFrame>
-  )
-}
diff --git a/apps/sim/ee/organization-usage/components/usage-summary.test.tsx b/apps/sim/ee/organization-usage/components/usage-summary.test.tsx
deleted file mode 100644
index d730a2f5abc..00000000000
--- a/apps/sim/ee/organization-usage/components/usage-summary.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/** @vitest-environment node */
-import { renderToStaticMarkup } from 'react-dom/server'
-import { describe, expect, it } from 'vitest'
-import type { OrganizationUsageSummary } from '@/lib/api/contracts/organization-usage'
-import { UsageSummary } from '@/ee/organization-usage/components/usage-summary'
-
-const summary: OrganizationUsageSummary = {
-  window: { start: '2026-01-01', end: '2026-01-08', source: 'range' },
-  bucket: 'day',
-  totals: { credits: 200 },
-  previousTotals: { credits: 100 },
-  series: [],
-}
-
-describe('UsageSummary', () => {
-  it('hides stale usage badges when a refresh fails', () => {
-    const render = (isError: boolean) =>
-      renderToStaticMarkup(
-        <UsageSummary summary={summary} limitCredits={150} isLoading={false} isError={isError} />
-      )
-    expect(render(false)).toContain('Over limit')
-    expect(render(false)).toContain('compared with the previous period')
-    const failed = render(true)
-    expect(failed).not.toContain('Over limit')
-    expect(failed).not.toContain('compared with the previous period')
-    expect(failed).toContain('load credits.')
-  })
-})
diff --git a/apps/sim/ee/organization-usage/components/usage-summary.tsx b/apps/sim/ee/organization-usage/components/usage-summary.tsx
deleted file mode 100644
index 329ab208644..00000000000
--- a/apps/sim/ee/organization-usage/components/usage-summary.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client'
-
-import { useMemo } from 'react'
-import { Badge, BarChart, ChartFrame, cn } from '@sim/emcn'
-import type { OrganizationUsageSummary } from '@/lib/api/contracts/organization-usage'
-import { formatCreditsLabel } from '@/lib/billing/credits/conversion'
-
-interface UsageSummaryProps {
-  summary?: OrganizationUsageSummary
-  limitCredits?: number | null
-  isLoading: boolean
-  isError: boolean
-  isPlaceholderData?: boolean
-}
-
-export function UsageSummary({
-  summary,
-  limitCredits,
-  isLoading,
-  isError,
-  isPlaceholderData,
-}: UsageSummaryProps) {
-  const series = useMemo(
-    () =>
-      summary?.series.map((point) => ({ timestamp: point.timestamp, value: point.credits })) ?? [],
-    [summary]
-  )
-  const used = !isError ? (summary?.totals.credits ?? 0) : 0
-  const previous = !isError ? (summary?.previousTotals?.credits ?? 0) : 0
-  const delta = previous > 0 ? ((used - previous) / previous) * 100 : null
-  const hasLimit = limitCredits != null && limitCredits > 0
-  return (
-    <div className={cn('flex flex-col gap-3', isPlaceholderData && 'opacity-50')}>
-      <div className='flex flex-col gap-1'>
-        <div className='flex h-6 items-baseline gap-2 whitespace-nowrap'>
-          <span className='text-[var(--text-body)] text-base tabular-nums'>
-            {isError || !summary ? '—' : formatCreditsLabel(used)}
-          </span>
-          {hasLimit && (
-            <span className='text-[var(--text-muted)] text-caption tabular-nums'>
-              of {limitCredits.toLocaleString()}
-            </span>
-          )}
-        </div>
-        <div className='flex h-5 items-center gap-2 whitespace-nowrap'>
-          {delta !== null && (
-            <Badge
-              variant={delta > 0 ? 'amber' : 'gray-secondary'}
-              size='sm'
-              aria-label={`${Math.abs(delta).toFixed(0)}% ${delta > 0 ? 'increase' : delta < 0 ? 'decrease' : 'change'} compared with the previous period`}
-            >{`${delta > 0 ? '↑' : '↓'} ${Math.abs(delta).toFixed(0)}%`}</Badge>
-          )}
-          {hasLimit && used > limitCredits && (
-            <Badge variant='red' size='sm'>
-              Over limit
-            </Badge>
-          )}
-        </div>
-      </div>
-      <ChartFrame
-        height={160}
-        loading={isLoading || (!summary && !isError)}
-        error={isError ? "Couldn't load credits." : undefined}
-      >
-        <BarChart
-          xAxisFormat='date'
-          data={series}
-          label=''
-          color='var(--indicator-seat-filled)'
-          unit='credits'
-          height={160}
-        />
-      </ChartFrame>
-    </div>
-  )
-}
diff --git a/apps/sim/ee/organization-usage/components/usage-top-cards.tsx b/apps/sim/ee/organization-usage/components/usage-top-cards.tsx
new file mode 100644
index 00000000000..00cd51b1c28
--- /dev/null
+++ b/apps/sim/ee/organization-usage/components/usage-top-cards.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+import { Chip } from '@sim/emcn'
+import {
+  ORGANIZATION_USAGE_OVERVIEW_ROW_LIMIT,
+  type OrganizationUsageBreakdown,
+  type OrganizationUsageOverview,
+} from '@/lib/api/contracts/organization-usage'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
+import { UsageConsumers } from '@/ee/organization-usage/components/usage-consumers'
+import { UsageMemberAvatar } from '@/ee/organization-usage/components/usage-member-avatar'
+import type { UsageTab } from '@/ee/organization-usage/constants'
+import { useOrganizationUsageBreakdown } from '@/hooks/queries/organization-usage'
+import type { OrganizationUsageWindowKey } from '@/hooks/queries/utils/organization-usage-keys'
+
+/**
+ * The head of a ranking, with the rest folded into its remainder.
+ *
+ * The card reads the Models tab's own query and trims it here rather than asking the
+ * server for fewer rows: the ledger scan costs the same either way, and sharing the
+ * key means "View all" opens from cache.
+ */
+function truncateBreakdown(
+  breakdown: OrganizationUsageBreakdown,
+  count: number
+): OrganizationUsageBreakdown {
+  const hidden = breakdown.rows.slice(count)
+  return {
+    ...breakdown,
+    rows: breakdown.rows.slice(0, count),
+    other: {
+      credits: breakdown.other.credits + hidden.reduce((sum, row) => sum + row.credits, 0),
+      events: breakdown.other.events + hidden.reduce((sum, row) => sum + row.events, 0),
+      rowCount: breakdown.other.rowCount + hidden.length,
+      tokens: breakdown.other.tokens + hidden.reduce((sum, row) => sum + (row.tokens ?? 0), 0),
+    },
+  }
+}
+
+interface UsageTopCardsProps {
+  organizationId: string
+  window: OrganizationUsageWindowKey
+  overview?: OrganizationUsageOverview
+  isOverviewLoading: boolean
+  isOverviewError: boolean
+  /** Dims the member ranking with the rest of the overview while a new period loads. */
+  isOverviewPlaceholderData: boolean
+  onViewAll: (tab: UsageTab) => void
+}
+
+/**
+ * The top models and members, side by side.
+ *
+ * Members arrive with the overview; models are the Models tab's own read, trimmed
+ * here, so each card loads without holding up the other or the chart above.
+ */
+export function UsageTopCards({
+  organizationId,
+  window,
+  overview,
+  isOverviewLoading,
+  isOverviewError,
+  isOverviewPlaceholderData,
+  onViewAll,
+}: UsageTopCardsProps) {
+  const models = useOrganizationUsageBreakdown(organizationId, window, 'model')
+  const images = new Map(overview?.members.rows.map((row) => [row.id, row.image]))
+
+  return (
+    <div className='grid grid-cols-1 gap-7 md:grid-cols-2 md:gap-x-8'>
+      <SettingsSection
+        label='Top models'
+        action={<Chip onClick={() => onViewAll('model')}>View all</Chip>}
+      >
+        <UsageConsumers
+          dimension='model'
+          breakdown={
+            models.data
+              ? truncateBreakdown(models.data, ORGANIZATION_USAGE_OVERVIEW_ROW_LIMIT)
+              : undefined
+          }
+          isLoading={models.isLoading}
+          isError={models.isError}
+          isPlaceholderData={models.isPlaceholderData}
+        />
+      </SettingsSection>
+      <SettingsSection
+        label='Top members'
+        action={<Chip onClick={() => onViewAll('member')}>View all</Chip>}
+      >
+        <UsageConsumers
+          dimension='member'
+          breakdown={overview?.members}
+          isLoading={isOverviewLoading}
+          isError={isOverviewError}
+          isPlaceholderData={isOverviewPlaceholderData}
+          renderLeading={(row) => (
+            <UsageMemberAvatar id={row.id} name={row.label} image={images.get(row.id)} />
+          )}
+        />
+      </SettingsSection>
+    </div>
+  )
+}
diff --git a/apps/sim/ee/organization-usage/constants.ts b/apps/sim/ee/organization-usage/constants.ts
index 4c717d6b4ae..c910638eded 100644
--- a/apps/sim/ee/organization-usage/constants.ts
+++ b/apps/sim/ee/organization-usage/constants.ts
@@ -2,6 +2,7 @@ import type { ComboboxOption } from '@sim/emcn'
 import {
   ORGANIZATION_USAGE_BREAKDOWN_DEFAULT_LIMIT,
   ORGANIZATION_USAGE_BREAKDOWN_MAX_LIMIT,
+  type OrganizationUsageSource,
   USAGE_WINDOW_PRESETS,
   type UsageBreakdownDimension,
   type UsageWindowPreset,
@@ -93,3 +94,41 @@ export const EXPANDED_ROW_COUNT = ORGANIZATION_USAGE_BREAKDOWN_MAX_LIMIT
 
 export const DEFAULT_USAGE_PRESET = '30d' as const
 export const DEFAULT_USAGE_TAB = USAGE_OVERVIEW_TAB
+
+/** Sim Chat's color, shared by its credit layer and the chat-runs chart. */
+export const USAGE_CHAT_COLOR = 'var(--badge-orange-text)'
+
+/**
+ * The credit chart's layers, bottom-up. Each one owns a fixed color, so a layer keeps
+ * its color when a quieter period drops its neighbours — color follows the source,
+ * never its rank.
+ *
+ * Five hues plus a neutral `Other`: the palette is validated for adjacent-pair
+ * separation (including color-vision deficiency) in exactly this order, so reorder
+ * or extend it only by re-running that validation. A sixth distinct source belongs
+ * in `Other`, not in a generated hue.
+ */
+export const USAGE_SOURCE_CATEGORIES = [
+  { id: 'workflow', label: 'Workflows', color: 'var(--brand-blue)' },
+  { id: 'chat', label: 'Sim Chat', color: USAGE_CHAT_COLOR },
+  { id: 'agent', label: 'Agent block', color: 'var(--badge-purple-text)' },
+  { id: 'knowledge', label: 'Knowledge Base', color: 'var(--badge-amber-text)' },
+  { id: 'enrichment', label: 'Enrichment', color: 'var(--badge-pink-text)' },
+  { id: 'other', label: 'Other', color: 'var(--text-muted)' },
+] as const
+
+export type UsageSourceCategoryId = (typeof USAGE_SOURCE_CATEGORIES)[number]['id']
+
+/** Total over the ledger's sources, so a new source cannot ship without a layer. */
+export const USAGE_SOURCE_CATEGORY: Record<OrganizationUsageSource, UsageSourceCategoryId> = {
+  workflow: 'workflow',
+  'sim-chat': 'chat',
+  mcp_copilot: 'chat',
+  mothership_block: 'agent',
+  'knowledge-base': 'knowledge',
+  enrichment: 'enrichment',
+  wand: 'other',
+  'voice-input': 'other',
+  'voice-output': 'other',
+  'api-tool': 'other',
+}
diff --git a/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts b/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts
new file mode 100644
index 00000000000..eecc7a6d5f8
--- /dev/null
+++ b/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts
@@ -0,0 +1,26 @@
+'use client'
+
+import { useState } from 'react'
+
+/**
+ * Hover and click highlighting shared by a chart and its legend.
+ *
+ * A selection whose series the current window no longer draws is ignored: otherwise
+ * every layer would stay dimmed after a period change, with no legend entry left to
+ * clear it.
+ */
+export function useLegendHighlight(seriesIds: readonly string[]) {
+  const [hoveredId, setHoveredId] = useState<string | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const activeSelection = selectedId !== null && seriesIds.includes(selectedId) ? selectedId : null
+  const highlightedId = hoveredId ?? activeSelection
+  return {
+    highlightedId,
+    legendProps: {
+      highlightedId,
+      selectedId: activeSelection,
+      onHighlight: setHoveredId,
+      onSelect: setSelectedId,
+    },
+  }
+}
diff --git a/apps/sim/hooks/queries/organization-usage.ts b/apps/sim/hooks/queries/organization-usage.ts
index fe90d792647..6ba644be064 100644
--- a/apps/sim/hooks/queries/organization-usage.ts
+++ b/apps/sim/hooks/queries/organization-usage.ts
@@ -4,12 +4,12 @@ import { hashKey, keepPreviousData, useInfiniteQuery, useQuery } from '@tanstack
 import { requestJson } from '@/lib/api/client/request'
 import {
   getOrganizationUsageBreakdownContract,
-  getOrganizationUsageSummaryContract,
+  getOrganizationUsageOverviewContract,
   listOrganizationUsageEventsContract,
   ORGANIZATION_USAGE_BREAKDOWN_DEFAULT_LIMIT,
   type OrganizationUsageBreakdown,
   type OrganizationUsageEventPage,
-  type OrganizationUsageSummary,
+  type OrganizationUsageOverview,
   type UsageBreakdownDimension,
 } from '@/lib/api/contracts/organization-usage'
 import {
@@ -17,10 +17,10 @@ import {
   organizationUsageKeys,
 } from '@/hooks/queries/utils/organization-usage-keys'
 
-export const ORGANIZATION_USAGE_SUMMARY_STALE_TIME = 60 * 1000
+export const ORGANIZATION_USAGE_OVERVIEW_STALE_TIME = 60 * 1000
 /**
- * Longer than the summary: a ranking does not move meaningfully within a minute, and
- * three of the five dimensions heap-scan the ledger.
+ * Longer than the overview: a ranking does not move meaningfully within a minute, and
+ * some dimensions heap-scan the ledger.
  */
 export const ORGANIZATION_USAGE_BREAKDOWN_STALE_TIME = 5 * 60 * 1000
 export const ORGANIZATION_USAGE_EVENTS_STALE_TIME = 30 * 1000
@@ -32,7 +32,7 @@ const EVENTS_PAGE_SIZE = 50
  * 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
+ * overview'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.
  */
@@ -40,30 +40,30 @@ function usageKeyIdentity(key: readonly unknown[]): string {
   return hashKey(key.slice(0, -1))
 }
 
-interface UseSummaryOptions {
+interface UseOverviewOptions {
   /** The panel fetches the drill-down's chart only while that view is open. */
   enabled?: boolean
   /** Narrows to one workspace, for the Workspaces drill-down. */
   workspaceId?: string
 }
 
-export function useOrganizationUsageSummary(
+export function useOrganizationUsageOverview(
   organizationId: string | undefined,
   window: OrganizationUsageWindowKey,
-  options: UseSummaryOptions = {}
+  options: UseOverviewOptions = {}
 ) {
   const { workspaceId } = options
-  const queryKey = organizationUsageKeys.summary(organizationId ?? '', window, workspaceId)
+  const queryKey = organizationUsageKeys.overview(organizationId ?? '', window, workspaceId)
   return useQuery({
     queryKey,
-    queryFn: ({ signal }): Promise<OrganizationUsageSummary> =>
-      requestJson(getOrganizationUsageSummaryContract, {
+    queryFn: ({ signal }): Promise<OrganizationUsageOverview> =>
+      requestJson(getOrganizationUsageOverviewContract, {
         params: { id: organizationId as string },
         query: { ...window, ...(workspaceId ? { workspaceId } : {}) },
         signal,
       }),
     enabled: Boolean(organizationId) && (options.enabled ?? true),
-    staleTime: ORGANIZATION_USAGE_SUMMARY_STALE_TIME,
+    staleTime: ORGANIZATION_USAGE_OVERVIEW_STALE_TIME,
     /**
      * Kept only across a period change — the same scope asked about a different window,
      * where dimming the figures beats blanking them.
diff --git a/apps/sim/hooks/queries/organization.ts b/apps/sim/hooks/queries/organization.ts
index d81dd1366b5..e7792d61923 100644
--- a/apps/sim/hooks/queries/organization.ts
+++ b/apps/sim/hooks/queries/organization.ts
@@ -41,6 +41,7 @@ import { client } from '@/lib/auth/auth-client'
 import { isOrganizationsEnabled } from '@/lib/core/config/env-flags'
 import { workspaceCredentialKeys } from '@/hooks/queries/utils/credential-keys'
 import { organizationKeys } from '@/hooks/queries/utils/organization-keys'
+import { organizationUsageKeys } from '@/hooks/queries/utils/organization-usage-keys'
 import { subscriptionKeys } from '@/hooks/queries/utils/subscription-keys'
 import { workspaceKeys } from '@/hooks/queries/workspace'
 
@@ -339,6 +340,10 @@ export function useUpdateOrganizationUsageLimit() {
       queryClient.invalidateQueries({
         queryKey: organizationKeys.subscription(variables.organizationId),
       })
+      /** The Insights headline states the same allowance. */
+      queryClient.invalidateQueries({
+        queryKey: organizationUsageKeys.overviews(variables.organizationId),
+      })
     },
   })
 }
diff --git a/apps/sim/hooks/queries/utils/organization-usage-keys.ts b/apps/sim/hooks/queries/utils/organization-usage-keys.ts
index 0b0f4063f85..91499b3dc62 100644
--- a/apps/sim/hooks/queries/utils/organization-usage-keys.ts
+++ b/apps/sim/hooks/queries/utils/organization-usage-keys.ts
@@ -23,25 +23,15 @@ export interface OrganizationUsageWindowKey {
 
 export const organizationUsageKeys = {
   all: (organizationId: string) => ['organizations', 'detail', organizationId, 'usage'] as const,
-  summary: (
-    organizationId: string,
-    window: OrganizationUsageWindowKey,
-    /** Set only inside the Workspaces drill-down, whose chart reads one workspace. */
-    workspaceId?: string
-  ) =>
-    [
-      ...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,
+  overviews: (organizationId: string) =>
+    [...organizationUsageKeys.all(organizationId), 'overview'] as const,
+  /**
+   * `window` last: it is the one segment the overview's `placeholderData` may cross, so
+   * the scope's identity — organization and workspace — is a plain prefix that a
+   * retained overview can never cross.
+   */
+  overview: (organizationId: string, window: OrganizationUsageWindowKey, workspaceId?: string) =>
+    [...organizationUsageKeys.overviews(organizationId), workspaceId ?? '', window] as const,
   breakdowns: (organizationId: string, window: OrganizationUsageWindowKey) =>
     [...organizationUsageKeys.all(organizationId), 'breakdown', window] as const,
   breakdown: (
diff --git a/apps/sim/lib/api/contracts/organization-activity.ts b/apps/sim/lib/api/contracts/organization-activity.ts
index 23a63b6a2b3..c1e669ce82a 100644
--- a/apps/sim/lib/api/contracts/organization-activity.ts
+++ b/apps/sim/lib/api/contracts/organization-activity.ts
@@ -36,8 +36,9 @@ export const organizationActivitySummarySchema = z.object({
       z.object({
         timestamp: z.string(),
         workflowRuns: z.number().int().nonnegative(),
-        chatRuns: z.number().int().nonnegative(),
+        completed: z.number().int().nonnegative(),
         failed: z.number().int().nonnegative(),
+        chatRuns: z.number().int().nonnegative(),
       })
     )
     .max(1000),
diff --git a/apps/sim/lib/api/contracts/organization-usage.ts b/apps/sim/lib/api/contracts/organization-usage.ts
index 8a8f3876bcd..64c7a66f259 100644
--- a/apps/sim/lib/api/contracts/organization-usage.ts
+++ b/apps/sim/lib/api/contracts/organization-usage.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod'
 import { organizationIdSchema, workspaceIdSchema } from '@/lib/api/contracts/primitives'
 import { defineRouteContract } from '@/lib/api/contracts/types'
-import { INTERNAL_USAGE_LOG_SOURCES } from '@/lib/billing/usage-sources'
+import { BILLING_USAGE_LOG_SOURCES, INTERNAL_USAGE_LOG_SOURCES } from '@/lib/billing/usage-sources'
 import { isValidTimezone } from '@/lib/core/utils/timezone'
 
 /**
@@ -200,7 +200,6 @@ export const organizationUsageSummaryResponseSchema = z.object({
     .array(usageSeriesPointSchema)
     .describe('Chronological usage buckets, including buckets with no usage.'),
 })
-export type OrganizationUsageSummary = z.output<typeof organizationUsageSummaryResponseSchema>
 
 export const organizationUsageBreakdownRowSchema = z.object({
   id: z.string().describe('Group identifier; an empty ID represents unattributed usage.'),
@@ -247,6 +246,39 @@ export const organizationUsageBreakdownResponseSchema = z.object({
 })
 export type OrganizationUsageBreakdown = z.output<typeof organizationUsageBreakdownResponseSchema>
 
+/** Rows on each overview card; the matching tab holds the full ranking. */
+export const ORGANIZATION_USAGE_OVERVIEW_ROW_LIMIT = 5
+
+const billingUsageLogSourceSchema = z.enum(BILLING_USAGE_LOG_SOURCES)
+export type OrganizationUsageSource = z.output<typeof billingUsageLogSourceSchema>
+
+export const organizationUsageOverviewResponseSchema = organizationUsageSummaryResponseSchema
+  .omit({ series: true })
+  .extend({
+    /**
+     * The allowance, only for the whole organization over its current period — the
+     * one window it is measured against. Null elsewhere rather than a misleading ratio.
+     */
+    limitCredits: z.number().int().nonnegative().nullable(),
+    series: z
+      .array(
+        usageSeriesPointSchema.omit({ events: true }).extend({
+          sources: z
+            .partialRecord(billingUsageLogSourceSchema, z.number().int().positive())
+            .describe('Credits per source in this bucket; sources with none are omitted.'),
+        })
+      )
+      .max(1000)
+      .describe('Chronological buckets, including buckets with no usage.'),
+    /** The Members tab's ranking, cut to the card, with each member's avatar. */
+    members: organizationUsageBreakdownResponseSchema.extend({
+      rows: z
+        .array(organizationUsageBreakdownRowSchema.extend({ image: z.string().nullable() }))
+        .max(ORGANIZATION_USAGE_OVERVIEW_ROW_LIMIT),
+    }),
+  })
+export type OrganizationUsageOverview = z.output<typeof organizationUsageOverviewResponseSchema>
+
 export const organizationUsageEventSchema = z.object({
   id: z.string().describe('Unique usage-ledger event identifier.'),
   createdAt: z.string(),
@@ -265,12 +297,12 @@ export const organizationUsageEventsResponseSchema = z.object({
 })
 export type OrganizationUsageEventPage = z.output<typeof organizationUsageEventsResponseSchema>
 
-export const getOrganizationUsageSummaryContract = defineRouteContract({
+export const getOrganizationUsageOverviewContract = defineRouteContract({
   method: 'GET',
-  path: '/api/organizations/[id]/usage/summary',
+  path: '/api/organizations/[id]/usage/overview',
   params: z.object({ id: organizationIdSchema }),
   query: organizationUsageSummaryQuerySchema,
-  response: { mode: 'json', schema: organizationUsageSummaryResponseSchema },
+  response: { mode: 'json', schema: organizationUsageOverviewResponseSchema },
 })
 
 export const getOrganizationUsageBreakdownContract = defineRouteContract({
diff --git a/apps/sim/lib/billing/application/organization-usage/authorized-organization-usage-use-case.ts b/apps/sim/lib/billing/application/organization-usage/authorized-organization-usage-use-case.ts
index df4076d75c0..d6d4550e769 100644
--- a/apps/sim/lib/billing/application/organization-usage/authorized-organization-usage-use-case.ts
+++ b/apps/sim/lib/billing/application/organization-usage/authorized-organization-usage-use-case.ts
@@ -24,6 +24,8 @@ export interface AuthorizedOrganizationUsageContext {
    * three slightly different windows.
    */
   period: ResolvedUsagePeriod
+  /** The payer's subscription, already loaded to resolve {@link period}. */
+  subscription: Awaited<ReturnType<typeof getOrganizationSubscription>>
 }
 
 interface AuthorizedOrganizationUsageDefinition<O extends OrganizationUsageOperation, I, R> {
@@ -74,21 +76,27 @@ export function defineAuthorizedOrganizationUsageUseCase<
        * same flag the navigation gate reads, so a section can never be visible here
        * and rejected there. Calling `isOrganizationOnEnterprisePlan` directly would
        * answer `true` for every self-hosted organization.
+       *
+       * The subscription is loaded alongside rather than after: nothing is returned
+       * before the gate decides, and every usage read pays this round trip first.
        */
-      if (!(await isOrganizationFeatureEntitled(organizationId, isUsageMonitoringEnabled))) {
+      const [entitled, subscription] = await Promise.all([
+        isOrganizationFeatureEntitled(organizationId, isUsageMonitoringEnabled),
+        getOrganizationSubscription(organizationId),
+      ])
+      if (!entitled) {
         throw new ForbiddenOperationError(
           'ENTERPRISE_PLAN_REQUIRED',
           'Active enterprise subscription required'
         )
       }
 
-      const subscription = await getOrganizationSubscription(organizationId)
       const period = resolveSubscriptionUsagePeriodOrDefault(subscription ?? {})
 
       return definition.execute({
         principal,
         input,
-        context: { organizationId, billingEntity, actorUserId, period },
+        context: { organizationId, billingEntity, actorUserId, period, subscription },
       })
     },
   }
diff --git a/apps/sim/lib/billing/application/organization-usage/get-organization-activity.test.ts b/apps/sim/lib/billing/application/organization-usage/get-organization-activity.test.ts
index 0ee60fa459e..969648283da 100644
--- a/apps/sim/lib/billing/application/organization-usage/get-organization-activity.test.ts
+++ b/apps/sim/lib/billing/application/organization-usage/get-organization-activity.test.ts
@@ -20,7 +20,7 @@ vi.mock('@/lib/billing/core/subscription', () => ({
 }))
 vi.mock('@/lib/billing/core/billing', () => ({ getOrganizationSubscription: mocks.subscription }))
 vi.mock('@/lib/billing/core/organization-activity-queries', () => ({
-  readActivitySummary: mocks.summary,
+  readActivityDays: mocks.summary,
   readActivityBreakdown: mocks.breakdown,
   readActivityWorkspace: mocks.workspace,
 }))
@@ -29,7 +29,6 @@ import {
   getOrganizationActivityBreakdown,
   getOrganizationActivitySummary,
 } from '@/lib/billing/application/organization-usage/get-organization-activity'
-import { activityMetrics } from '@/lib/billing/core/organization-activity'
 
 const principal: SessionPrincipal = { kind: 'session', userId: 'admin', sessionId: 'session' }
 const input = {
@@ -53,7 +52,7 @@ beforeEach(() => {
   mocks.entitlement.mockResolvedValue(true)
   mocks.subscription.mockResolvedValue(null)
   mocks.workspace.mockResolvedValue({ id: 'workspace', name: 'Support' })
-  mocks.summary.mockResolvedValue({ totals: activityMetrics(), series: [] })
+  mocks.summary.mockResolvedValue(new Map())
   mocks.breakdown.mockResolvedValue({ rows: [], hasMore: false })
 })
 
@@ -118,11 +117,54 @@ it('uses the same authorized scope and timezone for summaries and paginated brea
     start: new Date('2026-03-08T08:00:00Z'),
     end: new Date('2026-03-10T07:00:00Z'),
   }
-  expect(mocks.summary).toHaveBeenCalledWith(scope, 'day', 'America/Los_Angeles')
+  expect(mocks.summary).toHaveBeenCalledWith(scope, 'America/Los_Angeles')
   expect(mocks.breakdown).toHaveBeenCalledWith(scope, 'workflow', 'failures', 2)
   expect(summary.workspace).toEqual({ id: 'workspace', name: 'Support' })
   expect(summary.series).toEqual([
-    { timestamp: '2026-03-08T00:00:00', workflowRuns: 0, chatRuns: 0, failed: 0 },
-    { timestamp: '2026-03-09T00:00:00', workflowRuns: 0, chatRuns: 0, failed: 0 },
+    { timestamp: '2026-03-08T00:00:00', workflowRuns: 0, completed: 0, failed: 0, chatRuns: 0 },
+    { timestamp: '2026-03-09T00:00:00', workflowRuns: 0, completed: 0, failed: 0, chatRuns: 0 },
   ])
 })
+
+describe('activity summary folding', () => {
+  const day = (overrides: Record<string, unknown> = {}) => ({
+    workflowRuns: 0,
+    completed: 0,
+    failed: 0,
+    durationSum: 0,
+    durationCount: 0,
+    chatRuns: 0,
+    chatMembers: [],
+    ...overrides,
+  })
+  const run = () => getOrganizationActivitySummary.execute({ principal, input })
+
+  it('counts a chat member active on two days once', async () => {
+    mocks.summary.mockResolvedValue(
+      new Map([
+        ['2026-03-08', day({ chatRuns: 2, chatMembers: ['a'] })],
+        ['2026-03-09', day({ chatRuns: 4, chatMembers: ['a', 'b'] })],
+      ])
+    )
+    const summary = await run()
+    expect(summary.totals).toMatchObject({ chatRuns: 6, chatMembers: 2 })
+    expect(summary.series.map((point) => point.chatRuns)).toEqual([2, 4])
+  })
+
+  it('weights the mean duration by runs, not by days', async () => {
+    mocks.summary.mockResolvedValue(
+      new Map([
+        [
+          '2026-03-08',
+          day({ workflowRuns: 3, completed: 2, failed: 1, durationSum: 300, durationCount: 3 }),
+        ],
+        ['2026-03-09', day({ workflowRuns: 1, completed: 1, durationSum: 700, durationCount: 1 })],
+      ])
+    )
+    expect((await run()).totals).toMatchObject({
+      workflowRuns: 4,
+      failureRate: 0.25,
+      averageDurationMs: 250,
+    })
+  })
+})
diff --git a/apps/sim/lib/billing/application/organization-usage/get-organization-activity.ts b/apps/sim/lib/billing/application/organization-usage/get-organization-activity.ts
index 730caf17697..92403fd7dfc 100644
--- a/apps/sim/lib/billing/application/organization-usage/get-organization-activity.ts
+++ b/apps/sim/lib/billing/application/organization-usage/get-organization-activity.ts
@@ -7,9 +7,10 @@ import { organizationUsageOperations } from '@/lib/billing/application/organizat
 import type { ActivityDimension, ActivitySort } from '@/lib/billing/core/organization-activity'
 import {
   readActivityBreakdown,
-  readActivitySummary,
+  readActivityDays,
   readActivityWorkspace,
 } from '@/lib/billing/core/organization-activity-queries'
+import { summarizeActivityDays } from '@/lib/billing/core/organization-activity-summary'
 import {
   resolveUsageAnalyticsWindow,
   resolveUsageBucket,
@@ -58,15 +59,10 @@ export const getOrganizationActivitySummary = defineAuthorizedOrganizationUsageU
   async execute({ input, context }) {
     const { window, workspace, scope } = await resolveActivityScope(input, context)
     const bucket = resolveUsageBucket(window)
-    const result = await readActivitySummary(scope, bucket, input.timezone)
-    const byTimestamp = new Map(result.series.map((point) => [point.timestamp, point]))
+    const days = await readActivityDays(scope, input.timezone)
     return {
       workspace,
-      totals: result.totals,
-      series: usageBucketTimestamps(window, bucket, input.timezone).map(
-        (timestamp) =>
-          byTimestamp.get(timestamp) ?? { timestamp, workflowRuns: 0, chatRuns: 0, failed: 0 }
-      ),
+      ...summarizeActivityDays(days, usageBucketTimestamps(window, bucket, input.timezone), bucket),
     }
   },
 })
diff --git a/apps/sim/lib/billing/application/organization-usage/get-organization-usage-breakdown.ts b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-breakdown.ts
index e31077fc433..af19e2b54e0 100644
--- a/apps/sim/lib/billing/application/organization-usage/get-organization-usage-breakdown.ts
+++ b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-breakdown.ts
@@ -5,19 +5,17 @@ import {
 } from '@/lib/billing/application/organization-usage/limits'
 import { organizationUsageOperations } from '@/lib/billing/application/organization-usage/operations'
 import {
-  buildUsageAnalyticsScope,
   foldUsageBreakdown,
-  type MergeableRow,
   mergeRowsByKey,
   resolveUsageAnalyticsWindow,
   USAGE_NULL_KEY_LABELS,
+  type UsageAnalyticsWindow,
   type UsageBreakdownDimension,
+  type UsageGroupRow,
   type UsageWindowPreset,
 } from '@/lib/billing/core/usage-analytics'
-import {
-  readUsageBreakdown,
-  readUsageEntityNames,
-} from '@/lib/billing/core/usage-analytics-queries'
+import { readUsageEntityNames, readUsageGroups } from '@/lib/billing/core/usage-analytics-queries'
+import type { BillingEntity } from '@/lib/billing/core/usage-log'
 import { apportionCredits, dollarsToCredits } from '@/lib/billing/credits/conversion'
 import {
   BILLING_USAGE_LOG_SOURCE_LABELS,
@@ -73,6 +71,167 @@ function providerLabel(providerId: string): string {
   return PROVIDER_DEFINITIONS[providerId]?.name ?? providerId
 }
 
+interface BuildUsageBreakdownArgs {
+  entity: BillingEntity
+  window: UsageAnalyticsWindow
+  timezone: string
+  dimension: UsageBreakdownDimension
+  workspaceId?: string
+  limit: number
+  /** The public API's bound on how many groups a window may have. */
+  maxGroupedRows?: number
+}
+
+/**
+ * A dimension's ranked list for a resolved window: grouped, re-keyed onto what the
+ * panel displays, named, folded to `limit` rows plus a remainder, and apportioned so
+ * the rows and the remainder add up. The one pipeline every ranked list uses, the
+ * overview's member card included.
+ */
+export async function buildUsageBreakdown({
+  entity,
+  window,
+  timezone,
+  dimension,
+  workspaceId,
+  limit,
+  maxGroupedRows,
+}: BuildUsageBreakdownArgs): Promise<OrganizationUsageBreakdownResult> {
+  const raw = await readUsageGroups({
+    entity,
+    window,
+    timezone,
+    dimension,
+    workspaceId,
+    maxRows: maxGroupedRows,
+  })
+  if (maxGroupedRows !== undefined && raw.length > maxGroupedRows) {
+    throw new UsageBreakdownTooLargeError()
+  }
+
+  /**
+   * Re-key onto what the panel actually displays before ranking.
+   *
+   * Two dimensions are coarser than their SQL grouping column: `source` shows one
+   * "Sim Chat" row for the ledger's `copilot` *and* `workspace-chat`, and `byok`
+   * shows one row per provider rather than per model. Ranking the raw rows would
+   * render the same label twice with the total split between them.
+   */
+  const rows: UsageGroupRow[] =
+    dimension === 'source'
+      ? mergeRowsByKey(raw, (key) =>
+          key ? toBillingUsageLogSource(key as InternalUsageLogSource) : null
+        )
+      : dimension === 'byok'
+        ? mergeRowsByKey(raw, (key) => (key ? getProviderFromModel(key) : null))
+        : raw
+
+  const totalCost = rows.reduce((sum, row) => sum + row.cost, 0)
+
+  /**
+   * Names are hydrated for the surviving keys only — joining inside the aggregate
+   * would break the index-only scan the member dimension depends on.
+   *
+   * Sorted before slicing: the breakdown query only groups, so Postgres returns its
+   * aggregate in arbitrary order. Slicing that directly hydrated an arbitrary subset
+   * while the fold below ranks by cost, so a top row whose name was never fetched
+   * fell through to `?? key` and rendered a raw id. The margin over `limit` covers
+   * the fold's label tiebreak pulling in a row just past the cut.
+   */
+  const rankedIds = [...rows]
+    .sort((left, right) => right.cost - left.cost)
+    .slice(0, limit * 2)
+    .map((row) => row.key)
+    .filter((key): key is string => Boolean(key))
+  const names = NAMED_DIMENSIONS.has(dimension)
+    ? await readUsageEntityNames(dimension, rankedIds)
+    : new Map<string, string>()
+
+  const labelFor = (key: string | null): string => {
+    /**
+     * A null key means something different per dimension, and one shared
+     * "Unattributed" label got both wrong: on Workspaces it is usage owned by no
+     * workspace, on Workflows it is usage that never came from a workflow — which
+     * is most of an organization's spend, and reading it as an attribution failure
+     * is what made that list useless.
+     */
+    if (!key) return USAGE_NULL_KEY_LABELS[dimension]
+    if (dimension === 'source') {
+      return BILLING_USAGE_LOG_SOURCE_LABELS[key as keyof typeof BILLING_USAGE_LOG_SOURCE_LABELS]
+    }
+    if (dimension === 'byok') return providerLabel(key)
+    if (dimension === 'model') return key
+    // A deleted workspace or workflow nulls its id on the ledger row, so a key that
+    // resolves to no name is a live entity we could not read — not a deleted one.
+    return names.get(key) ?? key
+  }
+
+  // BYOK is denominated in tokens and every row costs zero, so ranking it by cost
+  // would order the list alphabetically and call the result "top providers".
+  const fold = foldUsageBreakdown(
+    rows,
+    totalCost,
+    labelFor,
+    limit,
+    dimension === 'byok' ? 'tokens' : 'cost'
+  )
+  const tokensByKey = new Map(
+    rows.map((row) => [row.key ?? '', (row.inputTokens ?? 0) + (row.outputTokens ?? 0)])
+  )
+  const isModelDimension = dimension === 'model' || dimension === 'byok'
+
+  /**
+   * One apportionment across the visible rows and the remainder together.
+   *
+   * Converting each row independently rounds each one, so with sub-credit
+   * fractions the rows and `Other` no longer add up — which defeats the entire
+   * reason `Other` is rendered. Largest-remainder over the whole set is what
+   * `apportionCredits` is for, and it is the same routine the per-log credit
+   * costs use, so a row cannot read differently here than in the event list.
+   *
+   * Keyed positionally: a row id may be `''` for a null grouping key, and any
+   * id could otherwise collide with the remainder's own key.
+   */
+  const apportioned = apportionCredits([
+    ...fold.rows.map((row, index) => ({ key: `row:${index}` as const, dollars: row.cost })),
+    { key: 'other' as const, dollars: fold.other.cost },
+  ])
+
+  return {
+    dimension: dimension,
+    rows: fold.rows.map((row, index) => {
+      const tokens = tokensByKey.get(row.id) ?? 0
+      return {
+        id: row.id,
+        label: row.label,
+        credits: apportioned[`row:${index}`] ?? 0,
+        events: row.events,
+        share: row.share,
+        ...(isModelDimension && tokens > 0 ? { tokens } : {}),
+        ...(dimension === 'byok' ? { providerId: row.id } : {}),
+        ...(dimension === 'model' && row.id ? { providerId: getProviderFromModel(row.id) } : {}),
+      }
+    }),
+    other: {
+      credits: apportioned.other ?? 0,
+      events: fold.other.events,
+      rowCount: fold.other.rowCount,
+      /**
+       * The omitted rows' tokens, so the BYOK tab still accounts for providers
+       * past the visible limit instead of hiding them behind an em dash.
+       */
+      tokens: fold.other.tokens,
+    },
+    /**
+     * The scope total, which the rows need not sum to: the workflow dimension is
+     * explicitly the workflow-attributed subset of it. Where they do sum to it —
+     * every other dimension — the apportionment above lands on this exact figure,
+     * because it derives its target from the same dollar sum.
+     */
+    totalCredits: dollarsToCredits(fold.totalCost),
+  }
+}
+
 export const getOrganizationUsageBreakdown = defineAuthorizedOrganizationUsageUseCase({
   operation: organizationUsageOperations.readBreakdown,
   organizationId: (input: OrganizationUsageBreakdownInput) => input.organizationId,
@@ -85,134 +244,14 @@ export const getOrganizationUsageBreakdown = defineAuthorizedOrganizationUsageUs
       timezone: input.timezone,
     })
     requireBoundedUsageWindow(window, input.maxWindowDays)
-    const scope = buildUsageAnalyticsScope(context.billingEntity, window, input.workspaceId)
-    const raw = await readUsageBreakdown(scope, input.dimension, undefined, input.maxGroupedRows)
-    if (input.maxGroupedRows !== undefined && raw.length > input.maxGroupedRows) {
-      throw new UsageBreakdownTooLargeError()
-    }
-
-    /**
-     * Re-key onto what the panel actually displays before ranking.
-     *
-     * Two dimensions are coarser than their SQL grouping column: `source` shows one
-     * "Sim Chat" row for the ledger's `copilot` *and* `workspace-chat`, and `byok`
-     * shows one row per provider rather than per model. Ranking the raw rows would
-     * render the same label twice with the total split between them.
-     */
-    const rows: MergeableRow[] =
-      input.dimension === 'source'
-        ? mergeRowsByKey(raw, (key) =>
-            key ? toBillingUsageLogSource(key as InternalUsageLogSource) : null
-          )
-        : input.dimension === 'byok'
-          ? mergeRowsByKey(raw, (key) => (key ? getProviderFromModel(key) : null))
-          : raw
-
-    const totalCost = rows.reduce((sum, row) => sum + (Number(row.cost) || 0), 0)
-
-    /**
-     * Names are hydrated for the surviving keys only — joining inside the aggregate
-     * would break the index-only scan the member dimension depends on.
-     *
-     * Sorted before slicing: the breakdown query only groups, so Postgres returns its
-     * aggregate in arbitrary order. Slicing that directly hydrated an arbitrary subset
-     * while the fold below ranks by cost, so a top row whose name was never fetched
-     * fell through to `?? key` and rendered a raw id. The margin over `limit` covers
-     * the fold's label tiebreak pulling in a row just past the cut.
-     */
-    const rankedIds = [...rows]
-      .sort((left, right) => Number(right.cost) - Number(left.cost))
-      .slice(0, input.limit * 2)
-      .map((row) => row.key)
-      .filter((key): key is string => Boolean(key))
-    const names = NAMED_DIMENSIONS.has(input.dimension)
-      ? await readUsageEntityNames(input.dimension, rankedIds)
-      : new Map<string, string>()
-
-    const labelFor = (key: string | null): string => {
-      /**
-       * A null key means something different per dimension, and one shared
-       * "Unattributed" label got both wrong: on Workspaces it is usage owned by no
-       * workspace, on Workflows it is usage that never came from a workflow — which
-       * is most of an organization's spend, and reading it as an attribution failure
-       * is what made that list useless.
-       */
-      if (!key) return USAGE_NULL_KEY_LABELS[input.dimension]
-      if (input.dimension === 'source') {
-        return BILLING_USAGE_LOG_SOURCE_LABELS[key as keyof typeof BILLING_USAGE_LOG_SOURCE_LABELS]
-      }
-      if (input.dimension === 'byok') return providerLabel(key)
-      if (input.dimension === 'model') return key
-      // A deleted workspace or workflow nulls its id on the ledger row, so a key that
-      // resolves to no name is a live entity we could not read — not a deleted one.
-      return names.get(key) ?? key
-    }
-
-    // BYOK is denominated in tokens and every row costs zero, so ranking it by cost
-    // would order the list alphabetically and call the result "top providers".
-    const fold = foldUsageBreakdown(
-      rows,
-      totalCost,
-      labelFor,
-      input.limit,
-      input.dimension === 'byok' ? 'tokens' : 'cost'
-    )
-    const tokensByKey = new Map(
-      rows.map((row) => [row.key ?? '', (row.inputTokens ?? 0) + (row.outputTokens ?? 0)])
-    )
-    const isModelDimension = input.dimension === 'model' || input.dimension === 'byok'
-
-    /**
-     * One apportionment across the visible rows and the remainder together.
-     *
-     * Converting each row independently rounds each one, so with sub-credit
-     * fractions the rows and `Other` no longer add up — which defeats the entire
-     * reason `Other` is rendered. Largest-remainder over the whole set is what
-     * `apportionCredits` is for, and it is the same routine the per-log credit
-     * costs use, so a row cannot read differently here than in the event list.
-     *
-     * Keyed positionally: a row id may be `''` for a null grouping key, and any
-     * id could otherwise collide with the remainder's own key.
-     */
-    const apportioned = apportionCredits([
-      ...fold.rows.map((row, index) => ({ key: `row:${index}` as const, dollars: row.cost })),
-      { key: 'other' as const, dollars: fold.other.cost },
-    ])
-
-    return {
+    return buildUsageBreakdown({
+      entity: context.billingEntity,
+      window,
+      timezone: input.timezone ?? 'UTC',
       dimension: input.dimension,
-      rows: fold.rows.map((row, index) => {
-        const tokens = tokensByKey.get(row.id) ?? 0
-        return {
-          id: row.id,
-          label: row.label,
-          credits: apportioned[`row:${index}`] ?? 0,
-          events: row.events,
-          share: row.share,
-          ...(isModelDimension && tokens > 0 ? { tokens } : {}),
-          ...(input.dimension === 'byok' ? { providerId: row.id } : {}),
-          ...(input.dimension === 'model' && row.id
-            ? { providerId: getProviderFromModel(row.id) }
-            : {}),
-        }
-      }),
-      other: {
-        credits: apportioned.other ?? 0,
-        events: fold.other.events,
-        rowCount: fold.other.rowCount,
-        /**
-         * The omitted rows' tokens, so the BYOK tab still accounts for providers
-         * past the visible limit instead of hiding them behind an em dash.
-         */
-        tokens: fold.other.tokens,
-      },
-      /**
-       * The scope total, which the rows need not sum to: the workflow dimension is
-       * explicitly the workflow-attributed subset of it. Where they do sum to it —
-       * every other dimension — the apportionment above lands on this exact figure,
-       * because it derives its target from the same dollar sum.
-       */
-      totalCredits: dollarsToCredits(fold.totalCost),
-    }
+      workspaceId: input.workspaceId,
+      limit: input.limit,
+      maxGroupedRows: input.maxGroupedRows,
+    })
   },
 })
diff --git a/apps/sim/lib/billing/application/organization-usage/get-organization-usage-overview.test.ts b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-overview.test.ts
new file mode 100644
index 00000000000..118f4b25753
--- /dev/null
+++ b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-overview.test.ts
@@ -0,0 +1,150 @@
+/**
+ * @vitest-environment node
+ */
+import type { SessionPrincipal } from '@sim/auth/principal'
+import { setEnvFlags } from '@sim/testing'
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mocks = vi.hoisted(() => ({
+  authorizeOrganizationOperation: vi.fn(),
+  isOrganizationFeatureEntitled: vi.fn(),
+  getOrganizationSubscription: vi.fn(),
+  getOrgUsageLimit: vi.fn(),
+  readUsageDays: vi.fn(),
+  readUsageGroups: vi.fn(),
+  readUsageEntityNames: vi.fn(),
+  readUsageMemberProfiles: vi.fn(),
+}))
+
+vi.mock('@/lib/core/application/organization-authorization', () => ({
+  authorizeOrganizationOperation: mocks.authorizeOrganizationOperation,
+}))
+vi.mock('@/lib/billing/core/subscription', () => ({
+  isOrganizationFeatureEntitled: mocks.isOrganizationFeatureEntitled,
+}))
+vi.mock('@/lib/billing/core/billing', () => ({
+  getOrganizationSubscription: mocks.getOrganizationSubscription,
+}))
+vi.mock('@/lib/billing/core/usage', () => ({ getOrgUsageLimit: mocks.getOrgUsageLimit }))
+vi.mock('@/lib/billing/core/usage-analytics-queries', () => ({
+  readUsageDays: mocks.readUsageDays,
+  readUsageGroups: mocks.readUsageGroups,
+  readUsageEntityNames: mocks.readUsageEntityNames,
+  readUsageMemberProfiles: mocks.readUsageMemberProfiles,
+}))
+vi.mock('@/providers/models', () => ({
+  getProviderFromModel: () => 'openai',
+  PROVIDER_DEFINITIONS: {},
+}))
+
+import { getOrganizationUsageOverview } from '@/lib/billing/application/organization-usage/get-organization-usage-overview'
+import { dollarsToCredits } from '@/lib/billing/credits/conversion'
+
+const session: SessionPrincipal = { kind: 'session', userId: 'admin-1', sessionId: 'session-1' }
+const NOW = new Date()
+const day = NOW.toISOString().slice(0, 10)
+const today = `${day}T00:00:00`
+
+function run(input: Partial<Parameters<typeof getOrganizationUsageOverview.execute>[0]['input']>) {
+  return getOrganizationUsageOverview.execute({
+    principal: session,
+    input: { organizationId: 'org-1', preset: '7d', timezone: 'UTC', ...input },
+  })
+}
+
+describe('getOrganizationUsageOverview', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    setEnvFlags({ isBillingEnabled: true, isHosted: true })
+    mocks.authorizeOrganizationOperation.mockResolvedValue(true)
+    mocks.isOrganizationFeatureEntitled.mockResolvedValue(true)
+    mocks.getOrganizationSubscription.mockResolvedValue({
+      plan: 'enterprise',
+      seats: 1,
+      periodStart: new Date(NOW.getTime() - 10 * 86_400_000),
+      periodEnd: new Date(NOW.getTime() + 20 * 86_400_000),
+    })
+    mocks.getOrgUsageLimit.mockResolvedValue({ limit: 100, minimum: 100 })
+    mocks.readUsageDays.mockResolvedValue([
+      [
+        day,
+        [
+          { key: 'workflow', cost: 0.0104, events: 3 },
+          { key: 'copilot', cost: 0.0033, events: 1 },
+          { key: 'workspace-chat', cost: 0.0033, events: 1 },
+        ],
+      ],
+    ])
+    mocks.readUsageGroups.mockResolvedValue(
+      Array.from({ length: 7 }, (_, index) => ({
+        key: `u${index}`,
+        cost: 0.01 * (7 - index),
+        events: 1,
+      }))
+    )
+    mocks.readUsageEntityNames.mockImplementation(
+      async (_dimension: string, ids: string[]) => new Map(ids.map((id) => [id, `Member ${id}`]))
+    )
+    mocks.readUsageMemberProfiles.mockImplementation(
+      async (ids: string[]) =>
+        new Map(
+          ids.map((id) => [id, { name: `Member ${id}`, image: id === 'u0' ? 'a.png' : null }])
+        )
+    )
+  })
+
+  afterAll(() => {
+    setEnvFlags({ isBillingEnabled: false, isHosted: false })
+  })
+
+  it('reconciles the stack and the headline to one figure', async () => {
+    const result = await run({})
+    const point = result.series.find((entry) => entry.timestamp === today)
+    const stacked = Object.values(point?.sources ?? {}).reduce((sum, value) => sum + value, 0)
+    const bars = result.series.reduce((sum, entry) => sum + entry.credits, 0)
+
+    expect(result.totals.credits).toBe(3)
+    expect(stacked).toBe(result.totals.credits)
+    expect(bars).toBe(result.totals.credits)
+  })
+
+  it('merges the ledger sources that display as one before rounding them', async () => {
+    const point = (await run({})).series.find((entry) => entry.timestamp === today)
+    // `copilot` and `workspace-chat` are two ledger sources and one displayed source.
+    expect(point?.sources).toEqual({ workflow: 2, 'sim-chat': 1 })
+  })
+
+  it('cuts the Members tab ranking to the card and attaches avatars', async () => {
+    const { members } = await run({})
+    expect(members.rows.map((row) => row.id)).toEqual(['u0', 'u1', 'u2', 'u3', 'u4'])
+    expect(members.rows[0]?.image).toBe('a.png')
+    expect(members.other.rowCount).toBe(2)
+    expect(mocks.readUsageGroups).toHaveBeenCalledWith(
+      expect.objectContaining({ dimension: 'member' })
+    )
+  })
+
+  it('states the allowance only for the whole organization over its current period', async () => {
+    expect((await run({ preset: 'current-period' })).limitCredits).toBe(dollarsToCredits(100))
+    expect((await run({ preset: 'current-period', workspaceId: 'ws-1' })).limitCredits).toBeNull()
+    expect((await run({ preset: '30d' })).limitCredits).toBeNull()
+    expect(mocks.getOrgUsageLimit).toHaveBeenCalledTimes(1)
+  })
+
+  it('compares a rolling window with the span just before it', async () => {
+    mocks.readUsageDays.mockResolvedValueOnce([[day, [{ key: 'workflow', cost: 0.02, events: 1 }]]])
+    mocks.readUsageDays.mockResolvedValueOnce([[day, [{ key: 'workflow', cost: 0.01, events: 1 }]]])
+    const result = await run({ preset: '30d' })
+    expect(result.totals.credits).toBe(4)
+    expect(result.previousTotals).toEqual({ credits: 2 })
+  })
+
+  it('narrows every read, including the comparison window, to the drill-down workspace', async () => {
+    await run({ workspaceId: 'ws-1' })
+    expect(mocks.readUsageDays).toHaveBeenCalledTimes(2)
+    for (const [args] of mocks.readUsageDays.mock.calls) expect(args.workspaceId).toBe('ws-1')
+    expect(mocks.readUsageGroups).toHaveBeenCalledWith(
+      expect.objectContaining({ workspaceId: 'ws-1' })
+    )
+  })
+})
diff --git a/apps/sim/lib/billing/application/organization-usage/get-organization-usage-overview.ts b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-overview.ts
new file mode 100644
index 00000000000..73ddc541960
--- /dev/null
+++ b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-overview.ts
@@ -0,0 +1,185 @@
+import { dbReplica } from '@sim/db'
+import { ORGANIZATION_USAGE_OVERVIEW_ROW_LIMIT } from '@/lib/api/contracts/organization-usage'
+import { defineAuthorizedOrganizationUsageUseCase } from '@/lib/billing/application/organization-usage/authorized-organization-usage-use-case'
+import {
+  buildUsageBreakdown,
+  type OrganizationUsageBreakdownResult,
+} from '@/lib/billing/application/organization-usage/get-organization-usage-breakdown'
+import { organizationUsageOperations } from '@/lib/billing/application/organization-usage/operations'
+import type { UsagePeriodSource } from '@/lib/billing/core/reporting-period'
+import { getOrgUsageLimit } from '@/lib/billing/core/usage'
+import {
+  resolveComparisonWindow,
+  resolveUsageAnalyticsWindow,
+  resolveUsageBucket,
+  truncateToBucket,
+  type UsageBucket,
+  type UsageWindowPreset,
+  usageBucketTimestamps,
+  usageWindowBounds,
+} from '@/lib/billing/core/usage-analytics'
+import { readUsageDays, readUsageMemberProfiles } from '@/lib/billing/core/usage-analytics-queries'
+import { apportionCredits, dollarsToCredits } from '@/lib/billing/credits/conversion'
+import {
+  type BillingUsageLogSource,
+  type InternalUsageLogSource,
+  toBillingUsageLogSource,
+} from '@/lib/billing/usage-sources'
+
+export interface OrganizationUsageOverviewInput {
+  organizationId: string
+  preset: UsageWindowPreset
+  startDate?: Date
+  endDate?: Date
+  timezone: string
+  /** Narrows to one workspace, for the Workspaces drill-down. */
+  workspaceId?: string
+}
+
+export interface OrganizationUsageOverviewResult {
+  window: { start: string; end: string; source: UsagePeriodSource | 'range' }
+  bucket: UsageBucket
+  totals: { credits: number }
+  previousTotals: { credits: number } | null
+  limitCredits: number | null
+  series: Array<{
+    timestamp: string
+    credits: number
+    sources: Partial<Record<BillingUsageLogSource, number>>
+  }>
+  members: OrganizationUsageBreakdownResult & {
+    rows: Array<OrganizationUsageBreakdownResult['rows'][number] & { image: string | null }>
+  }
+}
+
+/**
+ * Everything the Insights overview draws.
+ *
+ * Read through the usage segment cache (see `readUsageDays`): a settled day or hour is
+ * scanned once and served from the cache after, so a large organization pays for its
+ * whole window only on the first view, and afterwards only for its unsettled hours.
+ *
+ * The headline and every bar are sums of the same apportioned cells, so they
+ * reconcile to the credit by construction; the member card is the Members tab's own
+ * ranking, cut to its first rows.
+ */
+export const getOrganizationUsageOverview = defineAuthorizedOrganizationUsageUseCase({
+  operation: organizationUsageOperations.readOverview,
+  organizationId: (input: OrganizationUsageOverviewInput) => input.organizationId,
+  async execute({ input, context }): Promise<OrganizationUsageOverviewResult> {
+    const window = resolveUsageAnalyticsWindow({
+      preset: input.preset,
+      period: context.period,
+      customStart: input.startDate,
+      customEnd: input.endDate,
+      timezone: input.timezone,
+    })
+    const bucket = resolveUsageBucket(window)
+    const read = {
+      entity: context.billingEntity,
+      timezone: input.timezone,
+      workspaceId: input.workspaceId,
+    }
+    const comparison = resolveComparisonWindow(input.preset, window, context.period)
+    /** The allowance only means something for the whole organization over its own period. */
+    const subscription =
+      input.preset === 'current-period' && !input.workspaceId ? context.subscription : null
+
+    const [sourceDays, previousDays, members, limit] = await Promise.all([
+      readUsageDays({ ...read, window, dimension: 'source' }),
+      comparison
+        ? readUsageDays({ ...read, window: comparison, dimension: 'source' })
+        : Promise.resolve(null),
+      buildUsageBreakdown({
+        ...read,
+        window,
+        dimension: 'member',
+        limit: ORGANIZATION_USAGE_OVERVIEW_ROW_LIMIT,
+      }).then(async (breakdown) => {
+        const profiles = await readUsageMemberProfiles(breakdown.rows.map((row) => row.id))
+        return {
+          ...breakdown,
+          rows: breakdown.rows.map((row) => ({
+            ...row,
+            image: profiles.get(row.id)?.image ?? null,
+          })),
+        }
+      }),
+      subscription
+        ? getOrgUsageLimit(
+            input.organizationId,
+            subscription.plan,
+            subscription.seats ?? null,
+            dbReplica
+          )
+        : Promise.resolve(null),
+    ])
+
+    const timestamps = usageBucketTimestamps(window, bucket, input.timezone)
+    const bucketIndex = new Map(
+      timestamps.map((timestamp, index) => [timestamp.slice(0, 10), index])
+    )
+
+    /**
+     * Re-keyed onto the displayed source and bucket before apportioning: the ledger's
+     * `copilot` and `workspace-chat` both display as Sim Chat, and a week's bars sum
+     * its days, so rounding the finer cells separately could leave a displayed cell a
+     * credit off its own dollars.
+     */
+    const cells: { index: number; source: BillingUsageLogSource; dollars: number }[] = []
+    const cellFor = new Map<string, (typeof cells)[number]>()
+    for (const [day, rows] of sourceDays) {
+      const index = bucketIndex.get(truncateToBucket(day, bucket))
+      if (index === undefined) continue
+      for (const row of rows) {
+        if (!row.key) continue
+        const source = toBillingUsageLogSource(row.key as InternalUsageLogSource)
+        const identity = `${index}:${source}`
+        const cell = cellFor.get(identity)
+        if (cell) cell.dollars += row.cost
+        else {
+          const created = { index, source, dollars: row.cost }
+          cells.push(created)
+          cellFor.set(identity, created)
+        }
+      }
+    }
+    const cellCredits = apportionCredits(
+      cells.map((cell, position) => ({ key: String(position), dollars: cell.dollars }))
+    )
+
+    const series: OrganizationUsageOverviewResult['series'] = timestamps.map((timestamp) => ({
+      timestamp,
+      credits: 0,
+      sources: {},
+    }))
+    cells.forEach((cell, position) => {
+      const credits = cellCredits[String(position)] ?? 0
+      if (credits <= 0) return
+      const point = series[cell.index]
+      point.credits += credits
+      point.sources[cell.source] = credits
+    })
+
+    const bounds = usageWindowBounds(window)
+    return {
+      window: {
+        start: bounds.start.toISOString(),
+        end: bounds.end.toISOString(),
+        source: window.kind === 'range' ? 'range' : window.period.source,
+      },
+      bucket,
+      totals: { credits: series.reduce((sum, point) => sum + point.credits, 0) },
+      previousTotals: previousDays
+        ? {
+            credits: dollarsToCredits(
+              previousDays.flatMap(([, rows]) => rows).reduce((sum, row) => sum + row.cost, 0)
+            ),
+          }
+        : null,
+      limitCredits: limit && limit.limit > 0 ? dollarsToCredits(limit.limit) : null,
+      series,
+      members,
+    }
+  },
+})
diff --git a/apps/sim/lib/billing/application/organization-usage/operations.ts b/apps/sim/lib/billing/application/organization-usage/operations.ts
index 9a73b59c66a..a955c15a22c 100644
--- a/apps/sim/lib/billing/application/organization-usage/operations.ts
+++ b/apps/sim/lib/billing/application/organization-usage/operations.ts
@@ -53,6 +53,14 @@ export const organizationUsageOperations = {
     capability: 'none',
     ...BASE,
   }),
+  /**
+   * permission-group-exempt: the Insights overview reads the same pooled ledger as the summary, governed by organization billing-admin authority
+   */
+  readOverview: defineOrganizationOperation({
+    id: 'organization_usage.overview.read',
+    capability: 'none',
+    ...BASE,
+  }),
   /**
    * permission-group-exempt: the organization's pooled ledger is authorized by organization billing-admin authority, which no workspace-shaped group key names
    */
diff --git a/apps/sim/lib/billing/core/organization-activity-queries.ts b/apps/sim/lib/billing/core/organization-activity-queries.ts
index 2f8df406a3e..e079c574d0a 100644
--- a/apps/sim/lib/billing/core/organization-activity-queries.ts
+++ b/apps/sim/lib/billing/core/organization-activity-queries.ts
@@ -14,9 +14,14 @@ import {
   type ActivityDimension,
   type ActivityScope,
   type ActivitySort,
+  type ActivityStretch,
   activityMetrics,
+  combineActivity,
+  EMPTY_ACTIVITY_STRETCH,
 } from '@/lib/billing/core/organization-activity'
-import type { UsageBucket } from '@/lib/billing/core/usage-analytics'
+import { usageWindowSegments } from '@/lib/billing/core/usage-analytics'
+import { readThroughSegments } from '@/lib/billing/core/usage-segment-cache'
+import { assertValidTimezone } from '@/lib/core/utils/timezone'
 
 export async function readActivityWorkspace(organizationId: string, workspaceId: string) {
   const [row] = await dbReplica
@@ -32,12 +37,7 @@ export async function readActivityWorkspace(organizationId: string, workspaceId:
  * Only lightweight execution columns are read; transcripts and trace payloads stay private.
  * Chat continuations share an execution id and belong to their first retained start.
  */
-function activityGroups(
-  scope: ActivityScope,
-  keys: SQL,
-  grouping: SQL,
-  dimension?: ActivityDimension
-) {
+function activitySources(scope: ActivityScope) {
   const start = sql`(${scope.start.toISOString()}::timestamptz AT TIME ZONE 'UTC')`
   const end = sql`(${scope.end.toISOString()}::timestamptz AT TIME ZONE 'UTC')`
   const workflows = sql`
@@ -75,19 +75,24 @@ function activityGroups(
       )
     ORDER BY r.execution_id, r.started_at, r.id
   `
+  return { workflows, chats }
+}
+
+function activityGroups(scope: ActivityScope, keys: SQL, dimension?: ActivityDimension) {
+  const { workflows, chats } = activitySources(scope)
   const workflowGroups = sql`
     SELECT ${keys}, count(*) AS "workflowRuns",
       count(*) FILTER (WHERE a.status = 'completed') AS completed,
       count(*) FILTER (WHERE a.status = 'failed') AS failed,
       0::bigint AS "chatRuns", 0::bigint AS "chatMembers",
       avg(a.duration_ms) AS "averageDurationMs"
-    FROM (${workflows}) a ${grouping}
+    FROM (${workflows}) a GROUP BY 1, 2
   `
   const chatGroups = sql`
     SELECT ${keys}, 0::bigint AS "workflowRuns", 0::bigint AS completed, 0::bigint AS failed,
       count(*) AS "chatRuns", count(DISTINCT a.member_id) AS "chatMembers",
       NULL::numeric AS "averageDurationMs"
-    FROM (${chats}) a ${grouping}
+    FROM (${chats}) a GROUP BY 1, 2
   `
   if (dimension === 'member') return chatGroups
   if (dimension === 'workflow' || dimension === 'trigger') return workflowGroups
@@ -104,32 +109,103 @@ const aggregates = sql`
   max(a."averageDurationMs") AS "averageDurationMs"
 `
 
-export async function readActivitySummary(
+/**
+ * A stretch holding an unfinished run is never cached (see `inFlight`), so the lag only
+ * has to cover a run that started but whose row has not yet been written. Every
+ * minute of lag is a minute of the most expensive rows on the page read live.
+ */
+const ACTIVITY_SETTLE_MS = 15 * 60 * 1000
+
+/**
+ * Only finished runs are cached, and those do not change, so cached activity expires
+ * only to release organizations nobody is viewing.
+ */
+const ACTIVITY_SEGMENT_TTL_MS = 7 * 24 * 60 * 60 * 1000
+
+type ActivityHourRow = Record<string, unknown> & {
+  hour: string
+  workflowRuns: string | number
+  completed: string | number
+  failed: string | number
+  durationSum: string | number
+  durationCount: string | number
+  chatRuns: string | number
+  chatMembers: string[]
+  inFlight: string | number
+}
+
+/** Workflow and chat activity per local hour of the viewer (`YYYY-MM-DDTHH`), for one range. */
+async function readActivityByHour(
   scope: ActivityScope,
-  bucket: UsageBucket,
   timezone: string
-) {
-  const keys = sql`date_trunc(${bucket}, (a.started_at AT TIME ZONE 'UTC') AT TIME ZONE ${timezone}) AS bucket`
-  const rows = await dbReplica.execute<ActivityAggregate & { bucket: string | null }>(sql`
-    WITH activity AS (${activityGroups(scope, keys, sql`GROUP BY GROUPING SETS ((1), ())`)})
-    SELECT to_char(a.bucket, 'YYYY-MM-DD') AS bucket, ${aggregates}
-    FROM activity a GROUP BY a.bucket
+): Promise<Map<string, ActivityStretch>> {
+  assertValidTimezone(timezone)
+  const { workflows, chats } = activitySources(scope)
+  const hour = sql`date_trunc('hour', (a.started_at AT TIME ZONE 'UTC') AT TIME ZONE ${timezone})`
+  /** Members as JSON: the pool skips type fetching, so a `text[]` would arrive unparsed. */
+  const rows = await dbReplica.execute<ActivityHourRow>(sql`
+    SELECT to_char(g.hour, 'YYYY-MM-DD"T"HH24') AS hour, g."workflowRuns", g.completed, g.failed,
+      g."durationSum", g."durationCount", g."chatRuns", g."chatMembers", g."inFlight"
+    FROM (
+      SELECT ${hour} AS hour, count(*) AS "workflowRuns",
+        count(*) FILTER (WHERE a.status = 'completed') AS completed,
+        count(*) FILTER (WHERE a.status = 'failed') AS failed,
+        coalesce(sum(a.duration_ms), 0) AS "durationSum",
+        count(a.duration_ms) AS "durationCount",
+        0::bigint AS "chatRuns", '[]'::jsonb AS "chatMembers",
+        count(*) FILTER (WHERE a.status NOT IN ('completed', 'failed', 'cancelled')) AS "inFlight"
+      FROM (${workflows}) a GROUP BY 1
+      UNION ALL
+      SELECT ${hour} AS hour, 0, 0, 0, 0, 0, count(*),
+        coalesce(jsonb_agg(DISTINCT a.member_id) FILTER (WHERE a.member_id IS NOT NULL), '[]'::jsonb),
+        0
+      FROM (${chats}) a GROUP BY 1
+    ) g
   `)
-  return {
-    totals: activityMetrics(rows.find((row) => row.bucket === null)),
-    series: rows.flatMap((row) =>
-      row.bucket === null
-        ? []
-        : [
-            {
-              timestamp: `${row.bucket}T00:00:00`,
-              workflowRuns: Number(row.workflowRuns),
-              chatRuns: Number(row.chatRuns),
-              failed: Number(row.failed),
-            },
-          ]
-    ),
+
+  /** The workflow and chat halves of an hour arrive as two rows. */
+  const byHour = new Map<string, ActivityStretch[]>()
+  for (const row of rows) {
+    const stretch: ActivityStretch = {
+      workflowRuns: Number(row.workflowRuns),
+      completed: Number(row.completed),
+      failed: Number(row.failed),
+      durationSum: Number(row.durationSum),
+      durationCount: Number(row.durationCount),
+      chatRuns: Number(row.chatRuns),
+      chatMembers: row.chatMembers,
+      inFlight: Number(row.inFlight),
+    }
+    const halves = byHour.get(row.hour)
+    if (halves) halves.push(stretch)
+    else byHour.set(row.hour, [stretch])
   }
+  return new Map([...byHour].map(([hour, halves]) => [hour, combineActivity(halves)]))
+}
+
+/**
+ * Activity across the scope's window as `[day, activity]` entries, settled days and
+ * hours from the cache. A day can appear in more than one entry.
+ *
+ * Execution history is read through the same segment cache as usage: the workflow
+ * and chat scans behind a month of a large organization's activity cost seconds, and
+ * the recent runs are the costliest rows of all to read.
+ */
+export function readActivityDays(
+  scope: ActivityScope,
+  timezone: string
+): Promise<[string, ActivityStretch][]> {
+  return readThroughSegments<ActivityStretch>({
+    namespace: `activity:${scope.organizationId}:${scope.workspaceId ?? '*'}:${timezone}`,
+    segments: usageWindowSegments({ kind: 'range', from: scope.start, to: scope.end }, timezone, {
+      settleMs: ACTIVITY_SETTLE_MS,
+    }),
+    empty: EMPTY_ACTIVITY_STRETCH,
+    combine: combineActivity,
+    isFinal: (activity) => activity.inFlight === 0,
+    ttlMs: ACTIVITY_SEGMENT_TTL_MS,
+    fetchRange: (start, end) => readActivityByHour({ ...scope, start, end }, timezone),
+  })
 }
 
 /** Aggregation and pagination happen in Postgres; no run history is materialized in the app. */
@@ -170,7 +246,6 @@ export async function readActivityBreakdown(
     WITH activity AS (${activityGroups(
       scope,
       sql`${id} AS id, ${workspaceId} AS "workspaceId"`,
-      sql`GROUP BY 1, 2`,
       dimension
     )}), grouped AS (
       SELECT a.id, a."workspaceId", ${aggregates}
diff --git a/apps/sim/lib/billing/core/organization-activity-summary.ts b/apps/sim/lib/billing/core/organization-activity-summary.ts
new file mode 100644
index 00000000000..986b378cbe4
--- /dev/null
+++ b/apps/sim/lib/billing/core/organization-activity-summary.ts
@@ -0,0 +1,59 @@
+import {
+  type ActivityMetrics,
+  type ActivityStretch,
+  activityMetrics,
+  combineActivity,
+} from '@/lib/billing/core/organization-activity'
+import { truncateToBucket, type UsageBucket } from '@/lib/billing/core/usage-analytics'
+
+export interface ActivitySeriesPoint {
+  timestamp: string
+  workflowRuns: number
+  completed: number
+  failed: number
+  chatRuns: number
+}
+
+/**
+ * Folds calendar days into the window's buckets and its totals.
+ *
+ * `timestamps` are the window's buckets, including empty ones, so every bucket is
+ * drawn. Members are unioned rather than summed and durations are weighted by run,
+ * so a total over many days is the same figure one query over the window would give.
+ */
+export function summarizeActivityDays(
+  days: Iterable<[string, ActivityStretch]>,
+  timestamps: string[],
+  bucket: UsageBucket
+): { totals: ActivityMetrics; series: ActivitySeriesPoint[] } {
+  const series = timestamps.map((timestamp) => ({
+    timestamp,
+    workflowRuns: 0,
+    completed: 0,
+    failed: 0,
+    chatRuns: 0,
+  }))
+  const byBucket = new Map(series.map((point) => [point.timestamp.slice(0, 10), point]))
+  const stretches: ActivityStretch[] = []
+
+  for (const [day, activity] of days) {
+    stretches.push(activity)
+    const point = byBucket.get(truncateToBucket(day, bucket))
+    if (point) {
+      point.workflowRuns += activity.workflowRuns
+      point.completed += activity.completed
+      point.failed += activity.failed
+      point.chatRuns += activity.chatRuns
+    }
+  }
+  const total = combineActivity(stretches)
+
+  return {
+    totals: activityMetrics({
+      ...total,
+      chatMembers: total.chatMembers.length,
+      averageDurationMs: total.durationCount > 0 ? total.durationSum / total.durationCount : null,
+    }),
+    series,
+  }
+}
diff --git a/apps/sim/lib/billing/core/organization-activity.postgres.test.ts b/apps/sim/lib/billing/core/organization-activity.postgres.test.ts
index 088c768a64d..f853c241c73 100644
--- a/apps/sim/lib/billing/core/organization-activity.postgres.test.ts
+++ b/apps/sim/lib/billing/core/organization-activity.postgres.test.ts
@@ -15,14 +15,18 @@ const { databaseUrl, execute, select } = vi.hoisted(() => {
 vi.unmock('drizzle-orm')
 vi.unmock('@sim/db/schema')
 vi.mock('@sim/db', () => ({ dbReplica: { execute, select } }))
+vi.mock('@/lib/core/config/redis', () => ({ getRedisClient: () => null }))
 
+import type { ActivityScope } from '@/lib/billing/core/organization-activity'
 import {
   readActivityBreakdown,
-  readActivitySummary,
+  readActivityDays,
   readActivityWorkspace,
 } from '@/lib/billing/core/organization-activity-queries'
+import { summarizeActivityDays } from '@/lib/billing/core/organization-activity-summary'
 import {
   resolveUsageAnalyticsWindow,
+  type UsageBucket,
   usageBucketTimestamps,
 } from '@/lib/billing/core/usage-analytics'
 
@@ -37,6 +41,16 @@ const connection = databaseUrl
     })
   : undefined
 const database = connection ? drizzle(connection) : undefined
+/** The summary the use case draws: per-day reads folded into the window's buckets. */
+async function readActivitySummary(scope: ActivityScope, bucket: UsageBucket, timezone: string) {
+  const window = { kind: 'range', from: scope.start, to: scope.end } as const
+  return summarizeActivityDays(
+    await readActivityDays(scope, timezone),
+    usageBucketTimestamps(window, bucket, timezone),
+    bucket
+  )
+}
+
 const scope = {
   organizationId: 'org',
   start: new Date('2026-03-08T08:00:00Z'),
@@ -114,11 +128,18 @@ describe.skipIf(!databaseUrl)('organization activity SQL', () => {
       averageDurationMs: 2000,
     })
     expect(result.series.toSorted((a, b) => a.timestamp.localeCompare(b.timestamp))).toEqual([
-      { timestamp: '2026-03-08T00:00:00', workflowRuns: 2, chatRuns: 1, failed: 1 },
-      { timestamp: '2026-03-09T00:00:00', workflowRuns: 3, chatRuns: 2, failed: 0 },
+      { timestamp: '2026-03-08T00:00:00', workflowRuns: 2, completed: 1, failed: 1, chatRuns: 1 },
+      { timestamp: '2026-03-09T00:00:00', workflowRuns: 3, completed: 0, failed: 0, chatRuns: 2 },
     ])
   })
 
+  it('counts unfinished runs so their hours are never cached', async () => {
+    const days = await readActivityDays(scope, 'America/Los_Angeles')
+    // `l3` (paused) and `l5` (running) can still change; completed, failed, and
+    // cancelled runs cannot.
+    expect(days.reduce((sum, [, activity]) => sum + activity.inFlight, 0)).toBe(2)
+  })
+
   it('uses a half-open local calendar window across daylight saving time', () => {
     const window = resolveUsageAnalyticsWindow({
       preset: 'custom',
diff --git a/apps/sim/lib/billing/core/organization-activity.ts b/apps/sim/lib/billing/core/organization-activity.ts
index c93a10dee57..8e40d3c4b37 100644
--- a/apps/sim/lib/billing/core/organization-activity.ts
+++ b/apps/sim/lib/billing/core/organization-activity.ts
@@ -46,3 +46,45 @@ export function activityMetrics(row?: ActivityAggregate): ActivityMetrics {
     averageDurationMs: row?.averageDurationMs == null ? null : Number(row.averageDurationMs),
   }
 }
+
+export interface ActivityStretch {
+  workflowRuns: number
+  completed: number
+  failed: number
+  /** Duration is summed, not averaged, so days combine into an exact mean. */
+  durationSum: number
+  durationCount: number
+  chatRuns: number
+  /** Ids rather than a count: a member active on two days is still one member. */
+  chatMembers: string[]
+  /** Runs not yet finished. A stretch holding any can still change, so it is never cached. */
+  inFlight: number
+}
+
+export const EMPTY_ACTIVITY_STRETCH: ActivityStretch = {
+  workflowRuns: 0,
+  completed: 0,
+  failed: 0,
+  durationSum: 0,
+  durationCount: 0,
+  chatRuns: 0,
+  chatMembers: [],
+  inFlight: 0,
+}
+
+/** Several stretches of activity as one; members are unioned, never double-counted. */
+export function combineActivity(stretches: Iterable<ActivityStretch>): ActivityStretch {
+  const total = { ...EMPTY_ACTIVITY_STRETCH }
+  const members = new Set<string>()
+  for (const stretch of stretches) {
+    total.workflowRuns += stretch.workflowRuns
+    total.completed += stretch.completed
+    total.failed += stretch.failed
+    total.durationSum += stretch.durationSum
+    total.durationCount += stretch.durationCount
+    total.chatRuns += stretch.chatRuns
+    total.inFlight += stretch.inFlight
+    for (const member of stretch.chatMembers) members.add(member)
+  }
+  return { ...total, chatMembers: [...members] }
+}
diff --git a/apps/sim/lib/billing/core/usage-analytics-queries.postgres.test.ts b/apps/sim/lib/billing/core/usage-analytics-queries.postgres.test.ts
index ca3d743268d..e4019d92603 100644
--- a/apps/sim/lib/billing/core/usage-analytics-queries.postgres.test.ts
+++ b/apps/sim/lib/billing/core/usage-analytics-queries.postgres.test.ts
@@ -18,7 +18,10 @@ vi.unmock('@sim/db/schema')
 vi.mock('@sim/db', () => ({ dbReplica: { select } }))
 
 import { usageLog } from '@sim/db/schema'
-import { readUsageTimeSeries } from '@/lib/billing/core/usage-analytics-queries'
+import {
+  readUsageBreakdownOverTime,
+  readUsageTimeSeries,
+} from '@/lib/billing/core/usage-analytics-queries'
 
 const schemaName = `usage_series_${generateId().replaceAll('-', '')}`
 const connection = databaseUrl
@@ -34,12 +37,26 @@ beforeAll(async () => {
   if (!connection) return
   await connection.unsafe(`CREATE SCHEMA "${schemaName}"`)
   await connection.unsafe(`
-    CREATE TABLE usage_log (billing_entity_id text, created_at timestamp, cost numeric);
-    INSERT INTO usage_log VALUES
+    CREATE TABLE usage_log (
+      billing_entity_id text, created_at timestamp, cost numeric,
+      source text DEFAULT 'workflow', category text DEFAULT 'fixed',
+      description text DEFAULT 'run', metadata jsonb, user_id text DEFAULT 'u1'
+    );
+    INSERT INTO usage_log (billing_entity_id, created_at, cost) VALUES
       ('org', '2026-03-08 08:00:00+00', 0.1),
       ('org', '2026-03-09 06:59:59+00', 0.2),
       ('org', '2026-03-09 07:00:00+00', 0.4),
       ('other', '2026-03-09 07:00:00+00', 999);
+    INSERT INTO usage_log
+      (billing_entity_id, created_at, cost, source, category, description, metadata, user_id)
+    VALUES
+      ('models', '2026-03-09 07:30:00+00', 0.5, 'copilot', 'model', 'gpt-x',
+        '{"inputTokens": 10, "outputTokens": 3}', 'u1'),
+      ('models', '2026-03-09 08:00:00+00', 0.25, 'workflow', 'model', 'gpt-x',
+        '{"inputTokens": 5}', 'u2'),
+      ('models', '2026-03-09 09:00:00+00', 0, 'workflow', 'model_unbilled', 'claude-y',
+        '{"inputTokens": 7, "outputTokens": 1}', 'u2'),
+      ('models', '2026-03-09 09:30:00+00', 0.05, 'workflow', 'fixed', 'run', NULL, 'u2');
   `)
   const database = drizzle(connection)
   select.mockImplementation((fields) => database.select(fields))
@@ -75,3 +92,44 @@ describe.skipIf(!databaseUrl)('usage series SQL', () => {
     ).toEqual([])
   })
 })
+
+describe.skipIf(!databaseUrl)('usage breakdown by hour SQL', () => {
+  it('keys each group by the viewer’s local hour across DST', async () => {
+    const hours = await readUsageBreakdownOverTime(
+      [eq(usageLog.billingEntityId, 'org')],
+      'member',
+      'America/Los_Angeles',
+      'hour'
+    )
+    expect(Object.fromEntries(hours)).toEqual({
+      '2026-03-08T00': [{ key: 'u1', cost: 0.1, events: 1 }],
+      '2026-03-08T23': [{ key: 'u1', cost: 0.2, events: 1 }],
+      '2026-03-09T00': [{ key: 'u1', cost: 0.4, events: 1 }],
+    })
+  })
+
+  it('narrows a model dimension to its category and sums its tokens', async () => {
+    const scope = [eq(usageLog.billingEntityId, 'models')]
+    expect(
+      Object.fromEntries(await readUsageBreakdownOverTime(scope, 'model', 'UTC', 'hour'))
+    ).toEqual({
+      '2026-03-09T07': [{ key: 'gpt-x', cost: 0.5, events: 1, inputTokens: 10, outputTokens: 3 }],
+      '2026-03-09T08': [{ key: 'gpt-x', cost: 0.25, events: 1, inputTokens: 5, outputTokens: 0 }],
+    })
+    expect(
+      Object.fromEntries(await readUsageBreakdownOverTime(scope, 'byok', 'UTC', 'hour'))
+    ).toEqual({
+      '2026-03-09T09': [{ key: 'claude-y', cost: 0, events: 1, inputTokens: 7, outputTokens: 1 }],
+    })
+  })
+
+  it('keeps unbilled groups, leaving the billed filter to the summed window', async () => {
+    const hours = await readUsageBreakdownOverTime(
+      [eq(usageLog.billingEntityId, 'models')],
+      'source',
+      'UTC',
+      'hour'
+    )
+    expect(hours.get('2026-03-09T09')).toEqual([{ key: 'workflow', cost: 0.05, events: 2 }])
+  })
+})
diff --git a/apps/sim/lib/billing/core/usage-analytics-queries.ts b/apps/sim/lib/billing/core/usage-analytics-queries.ts
index 9a9eb17e622..ad5675620e7 100644
--- a/apps/sim/lib/billing/core/usage-analytics-queries.ts
+++ b/apps/sim/lib/billing/core/usage-analytics-queries.ts
@@ -1,7 +1,19 @@
 import { dbReplica } from '@sim/db'
 import { usageLog, user, workflow, workspace } from '@sim/db/schema'
 import { and, eq, inArray, isNotNull, type SQL, sql } from 'drizzle-orm'
-import type { UsageBreakdownDimension, UsageBucket } from '@/lib/billing/core/usage-analytics'
+import {
+  buildUsageAnalyticsScope,
+  mergeRowsByKey,
+  sumUsageDays,
+  USAGE_MODEL_DIMENSIONS,
+  type UsageAnalyticsWindow,
+  type UsageBreakdownDimension,
+  type UsageBucket,
+  type UsageGroupRow,
+  usageWindowSegments,
+} from '@/lib/billing/core/usage-analytics'
+import type { BillingEntity } from '@/lib/billing/core/usage-log'
+import { readThroughSegments } from '@/lib/billing/core/usage-segment-cache'
 import { assertValidTimezone } from '@/lib/core/utils/timezone'
 import type { DbClient } from '@/lib/db/types'
 
@@ -56,6 +68,26 @@ export async function readUsageTimeSeries(
     .from(buckets)
 }
 
+export interface UsageMemberProfile {
+  name: string
+  image: string | null
+}
+
+/** Names and avatars for the ranked members only, after the aggregate has picked them. */
+export async function readUsageMemberProfiles(
+  ids: string[],
+  executor: DbClient = dbReplica
+): Promise<Map<string, UsageMemberProfile>> {
+  if (ids.length === 0) return new Map()
+  const rows = await executor
+    .select({ id: user.id, name: user.name, email: user.email, image: user.image })
+    .from(user)
+    .where(inArray(user.id, ids))
+  return new Map(
+    rows.map((row) => [row.id, { name: row.name?.trim() || row.email, image: row.image }])
+  )
+}
+
 export interface UsageTotals {
   cost: number
 }
@@ -92,9 +124,6 @@ export interface UsageBreakdownRow {
   outputTokens?: number
 }
 
-/** Dimensions keyed on `description`, which holds a model name for model categories. */
-const MODEL_DIMENSIONS = new Set<UsageBreakdownDimension>(['model', 'byok'])
-
 function breakdownColumn(dimension: UsageBreakdownDimension) {
   switch (dimension) {
     case 'member':
@@ -111,20 +140,8 @@ function breakdownColumn(dimension: UsageBreakdownDimension) {
   }
 }
 
-/**
- * Ranked totals for one dimension.
- *
- * Aggregate-first: names are hydrated by {@link readUsageEntityNames} for the
- * surviving keys only. Joining inside the aggregate would break index-only for
- * `member` and force a nested loop across the whole window.
- */
-export async function readUsageBreakdown(
-  scope: SQL[],
-  dimension: UsageBreakdownDimension,
-  executor: DbClient = dbReplica,
-  maxRows?: number
-): Promise<UsageBreakdownRow[]> {
-  const column = breakdownColumn(dimension)
+/** The rows a dimension ranks: the scope, narrowed to what that dimension can describe. */
+function breakdownConditions(scope: SQL[], dimension: UsageBreakdownDimension): SQL[] {
   const conditions = [...scope]
   /**
    * `description` holds a model name only for the model categories; a tool or fixed
@@ -140,8 +157,194 @@ export async function readUsageBreakdown(
    * of an organization's usage into a list it does not belong in.
    */
   if (dimension === 'workflow') conditions.push(isNotNull(usageLog.workflowId))
+  return conditions
+}
+
+/**
+ * One dimension's totals per local hour (`YYYY-MM-DDTHH`) or day (`YYYY-MM-DD`) of the
+ * viewer.
+ *
+ * Hours for the segment cache, which settles today hour by hour; days wherever
+ * nothing is cached, which returns a twenty-fourth of the rows. No `HAVING` here,
+ * unlike {@link readUsageBreakdown}: whether a group is billed is a property of its
+ * whole window, so the caller filters after summing — a per-stretch filter would drop
+ * the unbilled stretches of a group that is billed in others.
+ */
+export async function readUsageBreakdownOverTime(
+  scope: SQL[],
+  dimension: UsageBreakdownDimension,
+  timezone: string,
+  granularity: 'hour' | 'day',
+  executor: DbClient = dbReplica
+): Promise<Map<string, UsageGroupRow[]>> {
+  assertValidTimezone(timezone)
+  const column = breakdownColumn(dimension)
+  const withTokens = USAGE_MODEL_DIMENSIONS.has(dimension)
+  const grouped = executor
+    .select({
+      stretch:
+        sql`date_trunc(${granularity}, (${usageLog.createdAt} AT TIME ZONE 'UTC') AT TIME ZONE ${timezone})`.as(
+          'stretch'
+        ),
+      key: sql<string | null>`${column}`.as('key'),
+      cost: sql<string>`SUM(${usageLog.cost})`.as('cost'),
+      events: sql<number>`COUNT(*)`.mapWith(Number).as('events'),
+      inputTokens: (withTokens
+        ? sql<number>`SUM((${usageLog.metadata}->>'inputTokens')::bigint)`
+        : sql<number>`0`
+      )
+        .mapWith(Number)
+        .as('input_tokens'),
+      outputTokens: (withTokens
+        ? sql<number>`SUM((${usageLog.metadata}->>'outputTokens')::bigint)`
+        : sql<number>`0`
+      )
+        .mapWith(Number)
+        .as('output_tokens'),
+    })
+    .from(usageLog)
+    .where(and(...breakdownConditions(scope, dimension)))
+    .groupBy(sql`1`, sql`2`)
+    .as('grouped')
+
+  /** Format the aggregated groups rather than every ledger entry. */
+  const rows = await executor
+    .select({
+      stretch: sql<string>`to_char(${grouped.stretch}, ${granularity === 'hour' ? 'YYYY-MM-DD"T"HH24' : 'YYYY-MM-DD'})`,
+      key: grouped.key,
+      cost: grouped.cost,
+      events: grouped.events,
+      inputTokens: grouped.inputTokens,
+      outputTokens: grouped.outputTokens,
+    })
+    .from(grouped)
+
+  const byStretch = new Map<string, UsageGroupRow[]>()
+  for (const row of rows) {
+    const entry: UsageGroupRow = {
+      key: row.key,
+      cost: Number.parseFloat(row.cost) || 0,
+      events: row.events,
+      ...(withTokens
+        ? { inputTokens: row.inputTokens || 0, outputTokens: row.outputTokens || 0 }
+        : {}),
+    }
+    const stretchRows = byStretch.get(row.stretch)
+    if (stretchRows) stretchRows.push(entry)
+    else byStretch.set(row.stretch, [entry])
+  }
+  return byStretch
+}
+
+/**
+ * Ledger rows are immutable once settled, so a usage segment only expires to heal a
+ * straggler and to release organizations nobody is viewing.
+ */
+const USAGE_SEGMENT_TTL_MS = 7 * 24 * 60 * 60 * 1000
+
+interface ReadUsageDaysArgs {
+  entity: BillingEntity
+  window: UsageAnalyticsWindow
+  timezone: string
+  dimension: UsageBreakdownDimension
+  workspaceId?: string
+}
+
+/**
+ * {@link readUsageBreakdownOverTime} for a whole window as `[day, rows]` entries, with
+ * settled days and hours from the cache. A day can appear in more than one entry.
+ *
+ * A window matched on `created_at` — any range, or a reporting period — cuts cleanly
+ * at the viewer's midnights and hours, so each settled stretch is read once and
+ * reused by every later view. A stripe or default period matches the stamps rows
+ * carry rather than when they were created, so it has nothing to cut and reads the
+ * ledger directly.
+ */
+export async function readUsageDays({
+  entity,
+  window,
+  timezone,
+  dimension,
+  workspaceId,
+}: ReadUsageDaysArgs): Promise<[string, UsageGroupRow[]][]> {
+  if (window.kind === 'period' && window.period.source !== 'reporting') {
+    return [
+      ...(await readUsageBreakdownOverTime(
+        buildUsageAnalyticsScope(entity, window, workspaceId),
+        dimension,
+        timezone,
+        'day'
+      )),
+    ]
+  }
+  return readThroughSegments<UsageGroupRow[]>({
+    namespace: `${entity.type}:${entity.id}:${workspaceId ?? '*'}:${timezone}:${dimension}`,
+    segments: usageWindowSegments(window, timezone),
+    empty: [],
+    combine: (values) => mergeRowsByKey(values.flat(), (key) => key),
+    ttlMs: USAGE_SEGMENT_TTL_MS,
+    fetchRange: (from, to) =>
+      readUsageBreakdownOverTime(
+        buildUsageAnalyticsScope(entity, { kind: 'range', from, to }, workspaceId),
+        dimension,
+        timezone,
+        'hour'
+      ),
+  })
+}
+
+interface ReadUsageGroupsArgs extends ReadUsageDaysArgs {
+  /** Refuses a window with more groups than this — the public API's bound. */
+  maxRows?: number
+}
+
+/**
+ * One dimension's usage per key over a whole window — the one entry point a ranking
+ * reads through, whichever store answers it.
+ *
+ * Every dimension but `workflow` has at most a few hundred keys a day and reads
+ * through the segment cache. Workflows can number in the thousands, so a window of
+ * them per hour would be a large cache entry for a list only the Workspaces drill-down
+ * shows. They, and any read with a `maxRows` bound — the public API's — go to the
+ * ledger directly, where the bound stops the scan instead of a full window being
+ * summed first. A capped read can return one row past `maxRows`, which is how the
+ * caller knows the window was too large.
+ */
+export async function readUsageGroups({
+  maxRows,
+  ...args
+}: ReadUsageGroupsArgs): Promise<UsageGroupRow[]> {
+  if (args.dimension === 'workflow' || maxRows !== undefined) {
+    const rows = await readUsageBreakdown(
+      buildUsageAnalyticsScope(args.entity, args.window, args.workspaceId),
+      args.dimension,
+      undefined,
+      maxRows
+    )
+    return mergeRowsByKey(rows, (key) => key)
+  }
+  return sumUsageDays(await readUsageDays(args), {
+    billedOnly: !USAGE_MODEL_DIMENSIONS.has(args.dimension),
+  })
+}
+
+/**
+ * Ranked totals for one dimension.
+ *
+ * Aggregate-first: names are hydrated by {@link readUsageEntityNames} for the
+ * surviving keys only. Joining inside the aggregate would break index-only for
+ * `member` and force a nested loop across the whole window.
+ */
+export async function readUsageBreakdown(
+  scope: SQL[],
+  dimension: UsageBreakdownDimension,
+  executor: DbClient = dbReplica,
+  maxRows?: number
+): Promise<UsageBreakdownRow[]> {
+  const column = breakdownColumn(dimension)
+  const conditions = breakdownConditions(scope, dimension)
 
-  if (!MODEL_DIMENSIONS.has(dimension)) {
+  if (!USAGE_MODEL_DIMENSIONS.has(dimension)) {
     const query = executor
       .select({
         key: sql<string | null>`${column}`,
@@ -202,11 +405,8 @@ export async function readUsageEntityNames(
   if (ids.length === 0) return new Map()
 
   if (dimension === 'member') {
-    const rows = await executor
-      .select({ id: user.id, name: user.name, email: user.email })
-      .from(user)
-      .where(inArray(user.id, ids))
-    return new Map(rows.map((row) => [row.id, row.name?.trim() || row.email]))
+    const profiles = await readUsageMemberProfiles(ids, executor)
+    return new Map([...profiles].map(([id, profile]) => [id, profile.name]))
   }
 
   if (dimension === 'workspace') {
diff --git a/apps/sim/lib/billing/core/usage-analytics.test.ts b/apps/sim/lib/billing/core/usage-analytics.test.ts
index 3fe079040e6..9881a523102 100644
--- a/apps/sim/lib/billing/core/usage-analytics.test.ts
+++ b/apps/sim/lib/billing/core/usage-analytics.test.ts
@@ -9,12 +9,16 @@ import {
   foldUsageBreakdown,
   MAX_CUSTOM_RANGE_DAYS,
   mergeRowsByKey,
+  resolveComparisonWindow,
   resolvePreviousPeriod,
   resolveUsageAnalyticsWindow,
   resolveUsageBucket,
+  sumUsageDays,
+  USAGE_SETTLE_MS,
   UsageWindowRangeInvertedError,
   UsageWindowRangeTooLargeError,
   usageWindowLedgerFilter,
+  usageWindowSegments,
 } from '@/lib/billing/core/usage-analytics'
 
 const ENTITY = { type: 'organization', id: 'org-1' } as const
@@ -567,3 +571,137 @@ describe('mergeRowsByKey', () => {
     expect(after).toBeCloseTo(before, 8)
   })
 })
+
+describe('usageWindowSegments', () => {
+  const range = (from: string, to: string) =>
+    ({ kind: 'range', from: new Date(from), to: new Date(to) }) as const
+
+  it('keeps settled whole days whole and cuts everything else at the hour', () => {
+    const segments = usageWindowSegments(
+      range('2026-03-01T22:00:00.000Z', '2026-03-04T02:30:00.000Z'),
+      'UTC',
+      { now: new Date('2026-03-04T02:30:00.000Z') }
+    )
+    expect(segments.map(({ key, settled }) => [key, settled])).toEqual([
+      ['2026-03-01T22', true],
+      ['2026-03-01T23', true],
+      ['2026-03-02', true],
+      // Ended at midnight, less than the settle lag ago: still open, so cut at hours.
+      ...Array.from({ length: 24 }, (_, hour) => [
+        `2026-03-03T${String(hour).padStart(2, '0')}`,
+        hour <= 22,
+      ]),
+      ['2026-03-04T00', false],
+      ['2026-03-04T01', false],
+      ['2026-03-04T02', false],
+    ])
+    expect(segments.at(-1)?.to.toISOString()).toBe('2026-03-04T02:30:00.000Z')
+  })
+
+  it('tiles the window with no gap or overlap', () => {
+    const window = range('2026-03-01T05:17:00.000Z', '2026-03-05T11:42:00.000Z')
+    const segments = usageWindowSegments(window, 'Asia/Kolkata', {
+      now: new Date('2026-03-05T12:00:00Z'),
+    })
+    expect(segments[0]?.from).toEqual(window.from)
+    expect(segments.at(-1)?.to).toEqual(window.to)
+    for (let index = 1; index < segments.length; index++) {
+      expect(segments[index]?.from).toEqual(segments[index - 1]?.to)
+    }
+  })
+
+  it('settles an hour only once the lag after it has passed', () => {
+    const window = range('2026-03-01T00:00:00.000Z', '2026-03-01T01:00:00.000Z')
+    const hourEnd = new Date('2026-03-01T01:00:00.000Z').getTime()
+    const settledAt = (now: number) =>
+      usageWindowSegments(window, 'UTC', { now: new Date(now) })[0]?.settled
+    expect(settledAt(hourEnd + USAGE_SETTLE_MS - 1)).toBe(false)
+    expect(settledAt(hourEnd + USAGE_SETTLE_MS)).toBe(true)
+  })
+
+  it('settles a DST day only whole, since its hour labels are ambiguous', () => {
+    const window = range('2026-11-01T07:00:00.000Z', '2026-11-02T08:00:00.000Z')
+    const during = usageWindowSegments(window, 'America/Los_Angeles', {
+      now: new Date('2026-11-01T20:00:00Z'),
+    })
+    expect(during.every((segment) => segment.key.includes('T') && !segment.settled)).toBe(true)
+
+    const after = usageWindowSegments(window, 'America/Los_Angeles', {
+      now: new Date('2026-11-03T00:00:00Z'),
+    })
+    expect(after.map(({ key, settled }) => [key, settled])).toEqual([['2026-11-01', true]])
+  })
+
+  it('gives a settled spring-forward day its 23 hours as one segment', () => {
+    const segments = usageWindowSegments(
+      range('2026-03-08T08:00:00.000Z', '2026-03-10T07:00:00.000Z'),
+      'America/Los_Angeles',
+      { now: new Date('2026-04-01T00:00:00.000Z') }
+    )
+    expect(segments.map(({ key }) => key)).toEqual(['2026-03-08', '2026-03-09'])
+    expect(segments[0]?.to.getTime() - (segments[0]?.from.getTime() ?? 0)).toBe(23 * 3_600_000)
+  })
+})
+
+describe('sumUsageDays', () => {
+  const days: [string, { key: string; cost: number; events: number }[]][] = [
+    [
+      '2026-01-01',
+      [
+        { key: 'a', cost: 1, events: 1 },
+        { key: 'byok', cost: 0, events: 4 },
+      ],
+    ],
+    [
+      '2026-01-02',
+      [
+        { key: 'a', cost: 0.5, events: 2 },
+        { key: 'byok', cost: 0, events: 1 },
+      ],
+    ],
+  ]
+
+  it('sums each key across days', () => {
+    expect(sumUsageDays(days, { billedOnly: false })).toEqual([
+      { key: 'a', cost: 1.5, events: 3 },
+      { key: 'byok', cost: 0, events: 5 },
+    ])
+  })
+
+  it('drops a group only when its whole window is unbilled', () => {
+    expect(sumUsageDays(days, { billedOnly: true }).map((row) => row.key)).toEqual(['a'])
+  })
+})
+
+describe('resolveComparisonWindow', () => {
+  it('compares a rolling range with the same span just before it', () => {
+    const window = {
+      kind: 'range',
+      from: new Date('2026-08-01T00:00:00.000Z'),
+      to: new Date('2026-08-31T00:00:00.000Z'),
+    } as const
+    expect(resolveComparisonWindow('30d', window, period())).toEqual({
+      kind: 'range',
+      from: new Date('2026-07-02T00:00:00.000Z'),
+      to: new Date('2026-08-01T00:00:00.000Z'),
+    })
+  })
+
+  it('offers no comparison it cannot state exactly', () => {
+    const current = { kind: 'period', period: period() } as const
+    expect(resolveComparisonWindow('current-period', current, period())).toBeNull()
+    expect(resolveComparisonWindow('previous-period', current, period())).toBeNull()
+  })
+})
+
+describe('rolling windows', () => {
+  it('start on the hour, so their first hour can be cached', () => {
+    const now = new Date('2026-09-22T19:47:13.500Z')
+    const window = resolveUsageAnalyticsWindow({ preset: '30d', period: period(), now })
+    expect(window).toEqual({
+      kind: 'range',
+      from: new Date('2026-08-23T19:00:00.000Z'),
+      to: now,
+    })
+  })
+})
diff --git a/apps/sim/lib/billing/core/usage-analytics.ts b/apps/sim/lib/billing/core/usage-analytics.ts
index 736a01bdedc..2c4a04d34a2 100644
--- a/apps/sim/lib/billing/core/usage-analytics.ts
+++ b/apps/sim/lib/billing/core/usage-analytics.ts
@@ -36,6 +36,15 @@ export const USAGE_BREAKDOWN_DIMENSIONS = [
 ] as const
 export type UsageBreakdownDimension = (typeof USAGE_BREAKDOWN_DIMENSIONS)[number]
 
+/**
+ * Dimensions keyed on `description`, which holds a model name for model categories.
+ * They carry token totals, and BYOK rows among them are unbilled by definition.
+ */
+export const USAGE_MODEL_DIMENSIONS: ReadonlySet<UsageBreakdownDimension> = new Set([
+  'model',
+  'byok',
+])
+
 export type UsageBucket = 'day' | 'week' | 'month'
 
 /**
@@ -200,6 +209,17 @@ function civilDaysBetween(fromKey: string, toKey: string): number {
   return Math.round((civilDate(toKey).getTime() - civilDate(fromKey).getTime()) / DAY_MS)
 }
 
+/**
+ * The last `days` up to now, starting on the hour. A start mid-hour would leave the
+ * window's first hour partial, and a partial hour can never be cached — every view
+ * would read it from the ledger again.
+ */
+function trailingRange(days: number, now: Date): UsageAnalyticsWindow {
+  const from = new Date(now.getTime() - days * DAY_MS)
+  from.setUTCMinutes(0, 0, 0)
+  return { kind: 'range', from, to: now }
+}
+
 /**
  * Maps a picker selection to a window the ledger can actually match.
  *
@@ -218,11 +238,7 @@ export function resolveUsageAnalyticsWindow({
   switch (preset) {
     case 'current-period':
       return isUnboundedPeriod(period)
-        ? {
-            kind: 'range',
-            from: new Date(now.getTime() - UNBOUNDED_PERIOD_DISPLAY_DAYS * DAY_MS),
-            to: now,
-          }
+        ? trailingRange(UNBOUNDED_PERIOD_DISPLAY_DAYS, now)
         : { kind: 'period', period }
     case 'previous-period': {
       const previous = resolvePreviousPeriod(period)
@@ -248,9 +264,9 @@ export function resolveUsageAnalyticsWindow({
       }
     }
     case '7d':
-      return { kind: 'range', from: new Date(now.getTime() - 7 * DAY_MS), to: now }
+      return trailingRange(7, now)
     case '30d':
-      return { kind: 'range', from: new Date(now.getTime() - 30 * DAY_MS), to: now }
+      return trailingRange(30, now)
     case 'custom': {
       // A partial selection is not a range, so it falls back to the current period —
       // through the same branch, which is what keeps an unbounded period from being
@@ -307,6 +323,28 @@ export function resolvePreviousPeriod(period: ResolvedUsagePeriod): ResolvedUsag
   )
 }
 
+/**
+ * The window a headline is compared against, or `null` when none is exact.
+ *
+ * A rolling or custom range compares with the same span immediately before it,
+ * which is exact by construction. The current period compares with its predecessor
+ * only when that is derivable (see {@link resolvePreviousPeriod}); the previous
+ * period has nothing honest to compare with.
+ */
+export function resolveComparisonWindow(
+  preset: UsageWindowPreset,
+  window: UsageAnalyticsWindow,
+  period: ResolvedUsagePeriod
+): UsageAnalyticsWindow | null {
+  if (preset === 'current-period') {
+    const previous = resolvePreviousPeriod(period)
+    return previous ? { kind: 'period', period: previous } : null
+  }
+  if (preset === 'previous-period' || window.kind !== 'range') return null
+  const span = window.to.getTime() - window.from.getTime()
+  return { kind: 'range', from: new Date(window.from.getTime() - span), to: window.from }
+}
+
 /**
  * Bucket width derived from the window rather than requested.
  *
@@ -373,7 +411,7 @@ function civilKey(date: Date): string {
  * the 1st. The series keys have to land on the same boundaries the SQL emitted or
  * no lookup below will ever hit.
  */
-function truncateToBucket(key: string, bucket: UsageBucket): string {
+export function truncateToBucket(key: string, bucket: UsageBucket): string {
   const date = civilDate(key)
   if (bucket === 'week') date.setUTCDate(date.getUTCDate() - ((date.getUTCDay() + 6) % 7))
   else if (bucket === 'month') date.setUTCDate(1)
@@ -445,6 +483,92 @@ export function usageBucketTimestamps(
   return points
 }
 
+/**
+ * How long after a stretch of time ends before its ledger rows are final.
+ *
+ * Rows are stamped when inserted, but a cumulative model charge tops up its row's
+ * cost in place for as long as the stream runs. Past this lag a day or hour is
+ * treated as settled.
+ */
+export const USAGE_SETTLE_MS = 3 * 60 * 60 * 1000
+
+const HOUR_MS = 60 * 60 * 1000
+
+export interface UsageSegment {
+  /** `YYYY-MM-DD` for a whole day, `YYYY-MM-DDTHH` for one hour — the viewer's clock. */
+  key: string
+  /** The viewer's calendar date the segment falls on. */
+  day: string
+  from: Date
+  to: Date
+  /** Whole and past the settle lag, so its aggregate can no longer change. */
+  settled: boolean
+}
+
+/** The `YYYY-MM-DDTHH` local hour a segment key or SQL group names. */
+export function usageHourKey(day: string, hour: number): string {
+  return `${day}T${String(hour).padStart(2, '0')}`
+}
+
+/**
+ * The window cut at the viewer's midnights, and the unsettled days at their hours.
+ *
+ * A whole day that settled is one segment, which keeps a year to a few hundred
+ * cache entries. Every other day — the window's partial ends, today, yesterday until
+ * its lag passes — is cut into hours, each settled once it is whole and past
+ * {@link USAGE_SETTLE_MS}. So what must be read live is the last few hours, not the
+ * whole of today, whose rows are the most expensive to read. `settleMs` defaults
+ * to the ledger's lag; a reader whose rows settle sooner passes its own.
+ */
+export function usageWindowSegments(
+  window: UsageAnalyticsWindow,
+  timezone: string,
+  { settleMs = USAGE_SETTLE_MS, now = new Date() }: { settleMs?: number; now?: Date } = {}
+): UsageSegment[] {
+  const { start, end } = usageWindowBounds(window)
+  const settledBefore = now.getTime() - settleMs
+  const segments: UsageSegment[] = []
+  const cursor = civilDate(localCalendarDate(start, timezone))
+
+  for (let days = 0; days < 1000; days++) {
+    const day = civilKey(cursor)
+    cursor.setUTCDate(cursor.getUTCDate() + 1)
+    const dayStart = zonedWallClockToUtc(`${day}T00:00`, timezone)
+    const dayEnd = zonedWallClockToUtc(`${civilKey(cursor)}T00:00`, timezone)
+    if (dayStart >= end) break
+
+    if (dayStart >= start && dayEnd <= end && dayEnd.getTime() <= settledBefore) {
+      segments.push({ key: day, day, from: dayStart, to: dayEnd, settled: true })
+      continue
+    }
+    /**
+     * On a DST day a local hour label names two spans, or none, so a row's hour
+     * label need not match the segment holding it. Such a day settles only whole.
+     */
+    const hoursSettle = dayEnd.getTime() - dayStart.getTime() === 24 * HOUR_MS
+    for (let hour = 0; hour < 24; hour++) {
+      const hourStart = zonedWallClockToUtc(`${usageHourKey(day, hour)}:00`, timezone)
+      const hourEnd =
+        hour === 23 ? dayEnd : zonedWallClockToUtc(`${usageHourKey(day, hour + 1)}:00`, timezone)
+      const from = hourStart > start ? hourStart : start
+      const to = hourEnd < end ? hourEnd : end
+      if (from >= to) continue
+      segments.push({
+        key: usageHourKey(day, hour),
+        day,
+        from,
+        to,
+        settled:
+          hoursSettle &&
+          from.getTime() === hourStart.getTime() &&
+          to.getTime() === hourEnd.getTime() &&
+          hourEnd.getTime() <= settledBefore,
+      })
+    }
+  }
+  return segments
+}
+
 export interface UsageBreakdownEntry {
   id: string
   label: string
@@ -549,6 +673,15 @@ export const USAGE_NULL_KEY_LABELS: Record<UsageBreakdownDimension, string> = {
   source: 'Other',
 }
 
+/** A dimension's usage for one key, with every figure a number. */
+export interface UsageGroupRow {
+  key: string | null
+  cost: number
+  events: number
+  inputTokens?: number
+  outputTokens?: number
+}
+
 export interface MergeableRow {
   key: string | null
   cost: string | number | null
@@ -569,8 +702,8 @@ export interface MergeableRow {
 export function mergeRowsByKey<T extends MergeableRow>(
   rows: T[],
   resolveKey: (key: string | null) => string | null
-): MergeableRow[] {
-  const merged = new Map<string, MergeableRow>()
+): UsageGroupRow[] {
+  const merged = new Map<string, UsageGroupRow>()
   for (const row of rows) {
     const key = resolveKey(row.key)
     const mapKey = key ?? ''
@@ -585,8 +718,8 @@ export function mergeRowsByKey<T extends MergeableRow>(
       })
       continue
     }
-    existing.cost = toNumber(existing.cost) + toNumber(row.cost)
-    existing.events = Math.round(toNumber(existing.events) + toNumber(row.events))
+    existing.cost += toNumber(row.cost)
+    existing.events = Math.round(existing.events + toNumber(row.events))
     if (row.inputTokens !== undefined) {
       existing.inputTokens = (existing.inputTokens ?? 0) + row.inputTokens
     }
@@ -596,3 +729,21 @@ export function mergeRowsByKey<T extends MergeableRow>(
   }
   return [...merged.values()]
 }
+
+/**
+ * A dimension's `[day, rows]` entries summed over the window.
+ *
+ * `billedOnly` applies the credit lists' rule — a group every row of which was
+ * reporting-only sums to zero and is dropped — after summing, where it describes the
+ * whole window, exactly as the ledger query's `HAVING` does.
+ */
+export function sumUsageDays(
+  days: Iterable<[string, MergeableRow[]]>,
+  { billedOnly }: { billedOnly: boolean }
+): UsageGroupRow[] {
+  const merged = mergeRowsByKey(
+    [...days].flatMap(([, rows]) => rows),
+    (key) => key
+  )
+  return billedOnly ? merged.filter((row) => row.cost > 0) : merged
+}
diff --git a/apps/sim/lib/billing/core/usage-segment-cache.test.ts b/apps/sim/lib/billing/core/usage-segment-cache.test.ts
new file mode 100644
index 00000000000..479deb72fb9
--- /dev/null
+++ b/apps/sim/lib/billing/core/usage-segment-cache.test.ts
@@ -0,0 +1,124 @@
+/**
+ * @vitest-environment node
+ */
+import { generateShortId } from '@sim/utils/id'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/lib/core/config/redis', () => ({ getRedisClient: () => null }))
+
+import { type UsageSegment, usageHourKey } from '@/lib/billing/core/usage-analytics'
+import { readThroughSegments } from '@/lib/billing/core/usage-segment-cache'
+
+const HOUR = 3_600_000
+
+function day(key: string, settled = true): UsageSegment {
+  const from = new Date(`${key}T00:00:00.000Z`)
+  return { key, day: key, from, to: new Date(from.getTime() + 24 * HOUR), settled }
+}
+
+function hours(key: string, settledThrough: number): UsageSegment[] {
+  return Array.from({ length: 24 }, (_, hour) => {
+    const from = new Date(new Date(`${key}T00:00:00.000Z`).getTime() + hour * HOUR)
+    return {
+      key: usageHourKey(key, hour),
+      day: key,
+      from,
+      to: new Date(from.getTime() + HOUR),
+      settled: hour <= settledThrough,
+    }
+  })
+}
+
+/** One unit per hour in the requested range, keyed by its UTC hour — like the SQL. */
+const fetchRange = vi.fn(async (from: Date, to: Date) => {
+  const result = new Map<string, number>()
+  for (let time = from.getTime(); time < to.getTime(); time += HOUR) {
+    const instant = new Date(time)
+    result.set(usageHourKey(instant.toISOString().slice(0, 10), instant.getUTCHours()), 1)
+  }
+  return result
+})
+
+describe('readThroughSegments', () => {
+  let namespace: string
+  const read = (segments: UsageSegment[]) =>
+    readThroughSegments({
+      namespace,
+      segments,
+      fetchRange,
+      combine: (values: number[]) => values.reduce((sum, value) => sum + value, 0),
+      empty: 0,
+      ttlMs: 60_000,
+    })
+  const totalByDay = (entries: [string, number][]) =>
+    entries.reduce<Record<string, number>>((sum, [key, value]) => {
+      sum[key] = (sum[key] ?? 0) + value
+      return sum
+    }, {})
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    namespace = `test-${generateShortId()}`
+  })
+
+  it('reads every missing segment in one merged range and counts each hour once', async () => {
+    const segments = [day('2026-01-01'), ...hours('2026-01-02', 10)]
+    const entries = await read(segments)
+    expect(fetchRange).toHaveBeenCalledTimes(1)
+    expect(fetchRange).toHaveBeenCalledWith(segments[0]?.from, segments.at(-1)?.to)
+    expect(totalByDay(entries)).toEqual({ '2026-01-01': 24, '2026-01-02': 24 })
+  })
+
+  it('serves settled segments from the cache and re-reads only the open hours', async () => {
+    const segments = [day('2026-01-01'), ...hours('2026-01-02', 10)]
+    await read(segments)
+    fetchRange.mockClear()
+
+    const entries = await read(segments)
+    expect(fetchRange).toHaveBeenCalledTimes(1)
+    expect(fetchRange).toHaveBeenCalledWith(segments[12]?.from, segments.at(-1)?.to)
+    expect(totalByDay(entries)).toEqual({ '2026-01-01': 24, '2026-01-02': 24 })
+  })
+
+  it('assembles a newly settled day from its cached hours without a ledger read', async () => {
+    await read(hours('2026-01-02', 23))
+    fetchRange.mockClear()
+
+    expect(totalByDay(await read([day('2026-01-02')]))).toEqual({ '2026-01-02': 24 })
+    expect(fetchRange).not.toHaveBeenCalled()
+  })
+
+  it('serves but never stores a value that can still change', async () => {
+    const final = (value: number) => value < 100
+    const readVetoed = () =>
+      readThroughSegments({
+        namespace,
+        segments: [day('2026-01-04')],
+        fetchRange: async () => new Map([[usageHourKey('2026-01-04', 3), 100]]),
+        combine: (values: number[]) => values.reduce((sum, value) => sum + value, 0),
+        isFinal: final,
+        empty: 0,
+        ttlMs: 60_000,
+      })
+    expect(await readVetoed()).toEqual([['2026-01-04', 100]])
+    const refetch = vi.fn(async () => new Map([[usageHourKey('2026-01-04', 3), 5]]))
+    const entries = await readThroughSegments({
+      namespace,
+      segments: [day('2026-01-04')],
+      fetchRange: refetch,
+      combine: (values: number[]) => values.reduce((sum, value) => sum + value, 0),
+      isFinal: final,
+      empty: 0,
+      ttlMs: 60_000,
+    })
+    expect(refetch).toHaveBeenCalledTimes(1)
+    expect(entries).toEqual([['2026-01-04', 5]])
+  })
+
+  it('never caches an unsettled segment', async () => {
+    await read(hours('2026-01-03', -1))
+    fetchRange.mockClear()
+    await read(hours('2026-01-03', -1))
+    expect(fetchRange).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/apps/sim/lib/billing/core/usage-segment-cache.ts b/apps/sim/lib/billing/core/usage-segment-cache.ts
new file mode 100644
index 00000000000..97e36f939d6
--- /dev/null
+++ b/apps/sim/lib/billing/core/usage-segment-cache.ts
@@ -0,0 +1,207 @@
+import { createLogger } from '@sim/logger'
+import { getErrorMessage } from '@sim/utils/errors'
+import { randomInt } from '@sim/utils/random'
+import { LRUCache } from 'lru-cache'
+import { type UsageSegment, usageHourKey } from '@/lib/billing/core/usage-analytics'
+import { getRedisClient } from '@/lib/core/config/redis'
+
+const logger = createLogger('UsageSegmentCache')
+
+/**
+ * Expiry is jittered by up to this much, so a year of days written by one cold load
+ * does not expire — and get recomputed — all at once.
+ */
+const TTL_JITTER_RATIO = 0.5
+
+/**
+ * How long an hour is kept. An hour is only read until its day settles and is
+ * assembled from it, so it outlives that by a margin rather than by the day's TTL.
+ */
+const HOUR_TTL_MS = 36 * 60 * 60 * 1000
+
+/**
+ * The most recently settled days assembled from their cached hours. Only the day or
+ * two since the last view can still be held hour by hour; asking for older ones
+ * would only fetch keys that expired long ago.
+ */
+const ASSEMBLE_DAY_LIMIT = 2
+
+/**
+ * Cached runs this short between two stretches that must be read anyway are read
+ * with them: one wider scan costs less than another round trip, and jittered expiry
+ * otherwise scatters a window into many small queries.
+ */
+const MERGE_GAP_SEGMENTS = 2
+
+/** Bump when a cached value's shape or meaning changes; old entries are then ignored. */
+const KEY_VERSION = 'v1'
+
+/**
+ * The in-process fallback for deployments without Redis, bounded by bytes: a
+ * member or model entry can run to tens of kilobytes.
+ */
+const localSegments = new LRUCache<string, string>({
+  max: 50_000,
+  maxSize: 64 * 1024 * 1024,
+  sizeCalculation: (value) => value.length,
+})
+
+async function readStored(keys: string[]): Promise<(string | null)[]> {
+  if (keys.length === 0) return []
+  const redis = getRedisClient()
+  if (!redis) return keys.map((key) => localSegments.get(key) ?? null)
+  try {
+    return await redis.mget(...keys)
+  } catch (error) {
+    logger.warn('Usage segment cache read failed; reading the ledger', {
+      error: getErrorMessage(error),
+    })
+    return keys.map(() => null)
+  }
+}
+
+/** Fire-and-forget: a page never waits on, or fails because of, a cache write. */
+function writeStored(entries: { key: string; value: string; ttlMs: number }[]): void {
+  if (entries.length === 0) return
+  const jittered = (ttlMs: number) => ttlMs + randomInt(0, Math.floor(ttlMs * TTL_JITTER_RATIO))
+  const redis = getRedisClient()
+  if (!redis) {
+    for (const { key, value, ttlMs } of entries)
+      localSegments.set(key, value, { ttl: jittered(ttlMs) })
+    return
+  }
+  const pipeline = redis.pipeline()
+  for (const { key, value, ttlMs } of entries) pipeline.set(key, value, 'PX', jittered(ttlMs))
+  pipeline.exec().catch((error: unknown) => {
+    logger.warn('Usage segment cache write failed', { error: getErrorMessage(error) })
+  })
+}
+
+interface ReadThroughSegmentsArgs<T> {
+  /** Everything a value depends on besides its segment: entity, scope, timezone, dimension. */
+  namespace: string
+  segments: UsageSegment[]
+  /** Aggregates one contiguous range, keyed by the viewer's local hour (`YYYY-MM-DDTHH`). */
+  fetchRange: (from: Date, to: Date) => Promise<Map<string, T>>
+  /** Folds several stretches' aggregates into one, to store a day as a single entry. */
+  combine: (values: T[]) => T
+  /**
+   * Whether a fetched value can no longer change. One that can is served but never
+   * stored, whatever the clock says — so a stretch still holding a running execution
+   * is read again next time rather than cached as it looked mid-run.
+   */
+  isFinal?: (value: T) => boolean
+  /** The value of a segment with no rows, which is cached like any other. */
+  empty: T
+  /**
+   * How long a settled day is kept. Not a freshness bound for data that cannot
+   * change — it is how long anything the settle lag missed can survive.
+   */
+  ttlMs: number
+}
+
+/**
+ * Aggregates for a window, from the cache where a segment has settled and the
+ * ledger otherwise, as `[day, value]` entries — a day can appear more than once.
+ *
+ * Every segment the cache cannot answer is read in as few ranges as possible:
+ * adjacent segments merge, so a cold load is still one scan of the window rather
+ * than one per day. Each fetched hour is returned exactly once, under its own day,
+ * whichever segment it is cached in. A cache failure costs a ledger read, never a
+ * page.
+ */
+export async function readThroughSegments<T>({
+  namespace,
+  segments,
+  fetchRange,
+  combine,
+  isFinal = () => true,
+  empty,
+  ttlMs,
+}: ReadThroughSegmentsArgs<T>): Promise<[string, T][]> {
+  const keyOf = (segmentKey: string) => `usage-segment:${KEY_VERSION}:${namespace}:${segmentKey}`
+  const settled = segments.filter((segment) => segment.settled)
+
+  /**
+   * A day that has just settled was, until now, cached hour by hour. Its hours are
+   * asked for in the same round trip as everything else, so assembling it spares the
+   * full-day rescan the first view after midnight would otherwise pay.
+   */
+  const assemblable = settled
+    .filter((segment) => segment.key === segment.day)
+    .slice(-ASSEMBLE_DAY_LIMIT)
+  const hourKeys = assemblable.flatMap((segment) =>
+    Array.from({ length: 24 }, (_, hour) => usageHourKey(segment.day, hour))
+  )
+  const stored = await readStored(
+    [...settled, ...hourKeys].map((item) => keyOf(typeof item === 'string' ? item : item.key))
+  )
+  const storedHours = stored.slice(settled.length)
+
+  const writes: { key: string; value: string; ttlMs: number }[] = []
+  const cached = new Map<UsageSegment, T>()
+  settled.forEach((segment, index) => {
+    const value = stored[index]
+    if (value != null) cached.set(segment, JSON.parse(value) as T)
+  })
+  assemblable.forEach((segment, index) => {
+    if (cached.has(segment)) return
+    const hours = storedHours.slice(index * 24, index * 24 + 24)
+    if (hours.some((hour) => hour == null)) return
+    const value = combine(hours.map((hour) => JSON.parse(hour as string) as T))
+    cached.set(segment, value)
+    writes.push({ key: keyOf(segment.key), value: JSON.stringify(value), ttlMs })
+  })
+
+  const readAnyway = new Set(segments.filter((segment) => !cached.has(segment)))
+  let run: UsageSegment[] = []
+  for (const [index, segment] of segments.entries()) {
+    if (cached.has(segment)) {
+      run.push(segment)
+      continue
+    }
+    const bounded = run.length > 0 && index - run.length > 0
+    if (bounded && run.length <= MERGE_GAP_SEGMENTS) for (const gap of run) readAnyway.add(gap)
+    run = []
+  }
+
+  const ranges: { from: Date; to: Date }[] = []
+  for (const segment of segments) {
+    if (!readAnyway.has(segment)) continue
+    const last = ranges[ranges.length - 1]
+    if (last && last.to.getTime() === segment.from.getTime()) last.to = segment.to
+    else ranges.push({ from: segment.from, to: segment.to })
+  }
+  const hours = (
+    await Promise.all(ranges.map((range) => fetchRange(range.from, range.to)))
+  ).flatMap((fetched) => [...fetched])
+
+  const entries: [string, T][] = []
+  for (const [segment, value] of cached) {
+    if (!readAnyway.has(segment)) entries.push([segment.day, value])
+  }
+  const byHour = new Map(hours)
+  const byDay = new Map<string, T[]>()
+  for (const [hour, value] of hours) {
+    entries.push([hour.slice(0, 10), value])
+    const day = hour.slice(0, 10)
+    const values = byDay.get(day)
+    if (values) values.push(value)
+    else byDay.set(day, [value])
+  }
+
+  for (const segment of readAnyway) {
+    if (!segment.settled || cached.has(segment)) continue
+    const isDay = segment.key === segment.day
+    const parts = isDay ? (byDay.get(segment.day) ?? []) : [byHour.get(segment.key) ?? empty]
+    if (!parts.every(isFinal)) continue
+    const value = isDay ? combine(parts) : (parts[0] ?? empty)
+    writes.push({
+      key: keyOf(segment.key),
+      value: JSON.stringify(value),
+      ttlMs: isDay ? ttlMs : HOUR_TTL_MS,
+    })
+  }
+  writeStored(writes)
+  return entries
+}
diff --git a/packages/emcn/src/components/charts/bar-chart.tsx b/packages/emcn/src/components/charts/bar-chart.tsx
index 1f7ff4ccd43..6eced4c6acb 100644
--- a/packages/emcn/src/components/charts/bar-chart.tsx
+++ b/packages/emcn/src/components/charts/bar-chart.tsx
@@ -15,6 +15,7 @@ import {
   estimateTooltipHeight,
   estimateTooltipWidth,
   formatChartCompactNumber,
+  formatChartDate,
   formatChartLatency,
   formatChartTimestamp,
   formatTimeTick,
@@ -31,11 +32,17 @@ export interface BarChartPoint {
   value: number
 }
 
-interface BarChartProps {
+/** One layer of a stacked chart. Every layer shares the first layer's buckets, by index. */
+export interface BarChartSeries {
+  id: string
+  label: string
+  color: string
   data: BarChartPoint[]
+}
+
+interface BarChartBaseProps {
   /** Pass `''` for the caller-owned-wrapper form, mirroring {@link LineChart}. */
   label: string
-  color: string
   /** `''` | `'%'` | `'ms'` | `'latency'` | `'credits'` — drives tick and tooltip formatting. */
   unit?: string
   height?: number
@@ -47,28 +54,57 @@ interface BarChartProps {
   highlightIndex?: number
 }
 
-/** Tick and tooltip text for a bucket's value, in the caller's unit. */
-function formatBarValue(value: number | undefined, unit: string | undefined): string {
+interface SingleSeriesBarChartProps extends BarChartBaseProps {
+  data: BarChartPoint[]
+  color: string
+  series?: never
+  highlightedSeriesId?: never
+}
+
+interface StackedBarChartProps extends BarChartBaseProps {
+  /** Drawn bottom-up in this order, which should be the legend's order. */
+  series: BarChartSeries[]
+  /** Dims every other layer, e.g. while its legend entry is hovered. */
+  highlightedSeriesId?: string | null
+  data?: never
+  color?: never
+}
+
+export type BarChartProps = SingleSeriesBarChartProps | StackedBarChartProps
+
+/** Surface gap between stacked segments, so adjacent fills never merge. */
+const STACK_GAP = 1
+
+/**
+ * Tick and tooltip text for a bucket's value, in the caller's unit. `exact` is for
+ * the tooltip, where a figure is read in full rather than fitted to the axis gutter.
+ */
+function formatBarValue(
+  value: number | undefined,
+  unit: string | undefined,
+  { exact = false }: { exact?: boolean } = {}
+): string {
   if (typeof value !== 'number' || !Number.isFinite(value)) return '—'
   const suffix = (unit ?? '').toLowerCase()
   if (suffix.includes('%')) return `${value.toFixed(1)}%`
   if (suffix === 'latency') return formatChartLatency(value)
   if (suffix.includes('ms')) return `${Math.round(value)}ms`
-  if (suffix === 'credits') return formatChartCompactNumber(value)
-  return `${Math.round(value).toLocaleString()}${unit ?? ''}`
+  if (suffix === 'credits' && !exact) return formatChartCompactNumber(value)
+  return `${Math.round(value).toLocaleString()}${suffix === 'credits' ? '' : (unit ?? '')}`
 }
 
-/** Discrete time buckets using the shared chart geometry and tooltip. */
-function BarChartComponent({
-  data,
-  label,
-  color,
-  unit,
-  height = CHART_DEFAULT_HEIGHT,
-  highlightIndex,
-  timeZone,
-  xAxisFormat = 'auto',
-}: BarChartProps) {
+/** Discrete time buckets using the shared chart geometry and tooltip; one layer or a stack. */
+function BarChartComponent(props: BarChartProps) {
+  const {
+    label,
+    unit,
+    height = CHART_DEFAULT_HEIGHT,
+    highlightIndex,
+    timeZone,
+    xAxisFormat = 'auto',
+  } = props
+  const isStacked = props.series !== undefined
+  const highlightedSeriesId = props.highlightedSeriesId ?? null
   const uniqueId = useId().replace(/:/g, '')
   const [containerRef, containerWidth] = useChartWidth()
   const width = containerWidth ?? 0
@@ -82,40 +118,82 @@ function BarChartComponent({
   const trackOpacity = isDark ? 0.12 : 0.3
   const trackHoverOpacity = isDark ? 0.22 : 0.5
 
+  const layers = useMemo<BarChartSeries[]>(
+    () =>
+      props.series ?? [
+        { id: 'value', label: unit || 'Value', color: props.color, data: props.data },
+      ],
+    [props.series, props.color, props.data, unit]
+  )
+  const buckets = layers[0]?.data ?? []
+
+  const totals = useMemo(
+    () =>
+      buckets.map((_, index) =>
+        layers.reduce((sum, layer) => sum + Math.max(0, layer.data[index]?.value ?? 0), 0)
+      ),
+    [buckets, layers]
+  )
+
   const maxValue = useMemo(() => {
-    const peak = Math.max(...data.map((d) => d.value), 0)
+    const peak = Math.max(...totals, 0)
     return peak <= 0 ? 1 : unit ? peak * 1.1 : Math.ceil(peak * 1.1)
-  }, [data, unit])
+  }, [totals, unit])
 
   const maximumLabel = unit ? formatBarValue(maxValue, unit) : formatChartCompactNumber(maxValue)
   const padding = resolveChartPadding([maximumLabel, '0'])
   const chartWidth = width - padding.left - padding.right
   const chartHeight = height - padding.top - padding.bottom
 
-  const slot = data.length > 0 ? Math.max(1, chartWidth) / data.length : 0
+  const slot = buckets.length > 0 ? Math.max(1, chartWidth) / buckets.length : 0
   const barWidth = Math.max(1, Math.min(24, slot * 0.7))
 
   /** Derive the hovered slot after resizing so the index stays within the current geometry. */
   const hoverIndex =
-    hoverPos === null || data.length === 0 || slot <= 0
+    hoverPos === null || buckets.length === 0 || slot <= 0
       ? null
-      : Math.max(0, Math.min(data.length - 1, Math.floor((hoverPos.x - padding.left) / slot)))
+      : Math.max(0, Math.min(buckets.length - 1, Math.floor((hoverPos.x - padding.left) / slot)))
 
-  const bars = useMemo(
+  /**
+   * One column per bucket, its segments stacked bottom-up. The column's total is
+   * clamped into the plot band once and each segment takes its share of that height,
+   * so a stack can never overshoot the band that a single bar is held to.
+   */
+  const columns = useMemo(
     () =>
-      data.map((point, index) => {
+      buckets.map((point, index) => {
         const x = padding.left + slot * index + (slot - barWidth) / 2
-        const rawY = padding.top + chartHeight - (point.value / maxValue) * chartHeight
-        const y = Math.max(yMin, Math.min(yMax, rawY))
-        return {
-          x,
-          y,
-          /** Empty buckets must stay at zero despite the plot-band clamp. */
-          height: point.value > 0 ? Math.max(0, height - padding.bottom - y) : 0,
-          point,
-        }
+        const total = totals[index] ?? 0
+        const rawTop = padding.top + chartHeight - (total / maxValue) * chartHeight
+        const top = Math.max(yMin, Math.min(yMax, rawTop))
+        const baseline = height - padding.bottom
+        /** Empty buckets must stay at zero despite the plot-band clamp. */
+        const columnHeight = total > 0 ? Math.max(0, baseline - top) : 0
+        let cursor = baseline
+        const segments = layers.flatMap((layer) => {
+          const value = Math.max(0, layer.data[index]?.value ?? 0)
+          if (value <= 0 || total <= 0) return []
+          const segmentHeight = (value / total) * columnHeight
+          cursor -= segmentHeight
+          return [{ layer, y: cursor, height: segmentHeight }]
+        })
+        return { x, top, point, segments }
       }),
-    [data, slot, barWidth, maxValue, chartHeight, height, padding.left, padding.top, yMin, yMax]
+    [
+      buckets,
+      totals,
+      layers,
+      slot,
+      barWidth,
+      maxValue,
+      chartHeight,
+      height,
+      padding.left,
+      padding.top,
+      padding.bottom,
+      yMin,
+      yMax,
+    ]
   )
 
   if (containerWidth === null) {
@@ -131,7 +209,7 @@ function BarChartComponent({
     )
   }
 
-  if (data.length === 0) {
+  if (buckets.length === 0) {
     return (
       /** Keeps the measurement ref: dropping it here left the observer watching a */
       /** detached node, so a resize while empty was never seen and the next non-empty */
@@ -149,8 +227,16 @@ function BarChartComponent({
     )
   }
 
-  const spanMs = resolveSpanMs(data)
-  const tickIndices = resolveTimeTickIndices(data.length, Math.max(1, chartWidth))
+  const spanMs = resolveSpanMs(buckets)
+  const tickIndices = resolveTimeTickIndices(buckets.length, Math.max(1, chartWidth))
+
+  /** Opacity for one segment, combining the legend highlight with the hovered and current bucket. */
+  const segmentOpacity = (layerId: string, index: number): number => {
+    if (highlightedSeriesId !== null && highlightedSeriesId !== layerId) return 0.2
+    if (highlightIndex !== undefined && highlightIndex !== index) return 0.55
+    if (hoverIndex !== null && hoverIndex !== index) return 0.75
+    return 1
+  }
 
   return (
     <div
@@ -169,8 +255,9 @@ function BarChartComponent({
       <div className='relative' style={{ width, height }}>
         <ChartDataTable
           label={label || 'Values by date'}
-          series={[{ id: 'base', label: unit || 'Value', data }]}
+          series={layers}
           timeZone={timeZone}
+          xAxisFormat={xAxisFormat}
         />
         <svg
           aria-hidden='true'
@@ -178,18 +265,24 @@ function BarChartComponent({
           height={height}
           className='overflow-hidden'
           onMouseMove={(e) => {
-            if (bars.length === 0 || slot <= 0) return
+            if (columns.length === 0 || slot <= 0) return
             const rect = (e.currentTarget as SVGSVGElement).getBoundingClientRect()
             setHoverPos({ x: e.clientX - rect.left, y: e.clientY - rect.top })
           }}
           onMouseLeave={() => setHoverPos(null)}
         >
-          <defs>
-            <linearGradient id={`bar-${uniqueId}`} x1='0' x2='0' y1='0' y2='1'>
-              <stop offset='0%' stopColor={color} stopOpacity={isDark ? 0.9 : 1} />
-              <stop offset='100%' stopColor={color} stopOpacity={isDark ? 0.35 : 0.55} />
-            </linearGradient>
-          </defs>
+          {!isStacked && (
+            <defs>
+              <linearGradient id={`bar-${uniqueId}`} x1='0' x2='0' y1='0' y2='1'>
+                <stop offset='0%' stopColor={layers[0]?.color} stopOpacity={isDark ? 0.9 : 1} />
+                <stop
+                  offset='100%'
+                  stopColor={layers[0]?.color}
+                  stopOpacity={isDark ? 0.35 : 0.55}
+                />
+              </linearGradient>
+            </defs>
+          )}
 
           <line
             x1={padding.left}
@@ -215,10 +308,10 @@ function BarChartComponent({
 
           {/** Tracks preserve empty buckets and hover targets; keep them outside the screen blend. */}
           <g>
-            {bars.map((bar, index) => (
+            {columns.map((column, index) => (
               <rect
-                key={`${uniqueId}-track-${bar.point.timestamp}`}
-                x={bar.x}
+                key={`${uniqueId}-track-${column.point.timestamp}`}
+                x={column.x}
                 y={padding.top}
                 width={barWidth}
                 height={chartHeight}
@@ -230,33 +323,30 @@ function BarChartComponent({
             ))}
           </g>
 
-          <g style={{ mixBlendMode: isDark ? 'screen' : 'normal' }}>
-            {bars.map(
-              (bar, index) =>
-                bar.height > 0 && (
+          <g style={{ mixBlendMode: isDark && !isStacked ? 'screen' : 'normal' }}>
+            {columns.flatMap((column, index) =>
+              column.segments.map((segment, segmentIndex) => {
+                /** Every segment but the topmost gives up a sliver so neighbours stay distinct. */
+                const gap = segmentIndex < column.segments.length - 1 ? STACK_GAP : 0
+                return (
                   <rect
-                    key={`${uniqueId}-bar-${bar.point.timestamp}`}
-                    x={bar.x}
-                    y={bar.y}
+                    key={`${uniqueId}-bar-${column.point.timestamp}-${segment.layer.id}`}
+                    x={column.x}
+                    y={segment.y + gap}
                     width={barWidth}
-                    height={bar.height}
+                    height={Math.max(0, segment.height - gap)}
                     rx='2'
-                    fill={`url(#bar-${uniqueId})`}
+                    fill={isStacked ? segment.layer.color : `url(#bar-${uniqueId})`}
                     className='transition-opacity duration-150 motion-reduce:transition-none'
-                    opacity={
-                      highlightIndex !== undefined && highlightIndex !== index
-                        ? 0.55
-                        : hoverIndex !== null && hoverIndex !== index
-                          ? 0.75
-                          : 1
-                    }
+                    opacity={segmentOpacity(segment.layer.id, index)}
                   />
                 )
+              })
             )}
           </g>
 
           {tickIndices.map((index) => {
-            const timestamp = data[index]?.timestamp
+            const timestamp = buckets[index]?.timestamp
             if (!timestamp) return null
             const date = new Date(timestamp)
             return (
@@ -307,23 +397,59 @@ function BarChartComponent({
         </svg>
 
         {hoverIndex !== null &&
-          bars[hoverIndex] &&
+          columns[hoverIndex] &&
           (() => {
-            const bar = bars[hoverIndex]
-            const value = formatBarValue(bar.point.value, unit)
-            const date = formatChartTimestamp(bar.point.timestamp, timeZone)
+            const column = columns[hoverIndex]
+            /** A calendar bucket has no meaningful time of day. */
+            const date =
+              xAxisFormat === 'date'
+                ? formatChartDate(column.point.timestamp, timeZone)
+                : formatChartTimestamp(column.point.timestamp, timeZone)
+            /** Top of the stack first, matching the order the eye reads the column in. */
+            const rows = isStacked
+              ? [...column.segments].reverse().map((segment) => ({
+                  id: segment.layer.id,
+                  color: segment.layer.color,
+                  label: segment.layer.label,
+                  value: formatBarValue(segment.layer.data[hoverIndex]?.value, unit, {
+                    exact: true,
+                  }),
+                }))
+              : [
+                  {
+                    id: 'value',
+                    color: layers[0]?.color ?? 'currentColor',
+                    label: undefined,
+                    value: formatBarValue(column.point.value, unit, { exact: true }),
+                  },
+                ]
+            const total = isStacked
+              ? formatBarValue(totals[hoverIndex], unit, { exact: true })
+              : null
+            const longestRow = Math.max(
+              ...rows.map((row) => `${row.label ?? ''} ${row.value}`.length),
+              total ? `Total ${total}`.length : 0
+            )
             const { left, top } = positionChartTooltip({
-              anchorX: hoverPos?.x ?? bar.x,
-              anchorY: hoverPos?.y ?? bar.y,
+              anchorX: hoverPos?.x ?? column.x,
+              anchorY: hoverPos?.y ?? column.top,
               width,
               height,
-              tooltipMaxWidth: estimateTooltipWidth(value.length),
-              tooltipHeight: estimateTooltipHeight(1, Boolean(date)),
+              tooltipMaxWidth: estimateTooltipWidth(longestRow),
+              tooltipHeight: estimateTooltipHeight(rows.length + (total ? 1 : 0), Boolean(date)),
               padding,
             })
             return (
               <ChartTooltip left={left} top={top} date={date || undefined}>
-                <ChartTooltipRow color={color} value={value} />
+                {rows.map((row) => (
+                  <ChartTooltipRow
+                    key={row.id}
+                    color={row.color}
+                    label={row.label}
+                    value={row.value}
+                  />
+                ))}
+                {total && <ChartTooltipRow color='transparent' label='Total' value={total} />}
               </ChartTooltip>
             )
           })()}
diff --git a/packages/emcn/src/components/charts/chart-data-table.tsx b/packages/emcn/src/components/charts/chart-data-table.tsx
index cb1377d8a8a..c431d457c0b 100644
--- a/packages/emcn/src/components/charts/chart-data-table.tsx
+++ b/packages/emcn/src/components/charts/chart-data-table.tsx
@@ -1,13 +1,25 @@
-import { formatChartTimestamp } from '@sim/emcn'
+import { memo } from 'react'
+import { formatChartDate, formatChartTimestamp } from '@sim/emcn'
 
 interface ChartDataTableProps {
   label: string
   series: { id: string; label: string; data: { timestamp: string; value: number }[] }[]
   timeZone?: string
+  /** `date` for calendar buckets, whose time of day means nothing. */
+  xAxisFormat?: 'auto' | 'date'
 }
 
-/** Exposes exact chart values without requiring pointer interaction. */
-export function ChartDataTable({ label, series, timeZone }: ChartDataTableProps) {
+/**
+ * Exposes exact chart values without requiring pointer interaction. Memoized: the
+ * chart around it re-renders on every pointer move, and its cells never change then.
+ */
+export const ChartDataTable = memo(function ChartDataTable({
+  label,
+  series,
+  timeZone,
+  xAxisFormat,
+}: ChartDataTableProps) {
+  const formatRow = xAxisFormat === 'date' ? formatChartDate : formatChartTimestamp
   const values = series.map(
     (item) => new Map(item.data.map((point) => [point.timestamp, point.value]))
   )
@@ -30,7 +42,7 @@ export function ChartDataTable({ label, series, timeZone }: ChartDataTableProps)
       <tbody>
         {timestamps.map((timestamp) => (
           <tr key={timestamp}>
-            <th scope='row'>{formatChartTimestamp(timestamp, timeZone)}</th>
+            <th scope='row'>{formatRow(timestamp, timeZone)}</th>
             {series.map((item, index) => (
               <td key={item.id}>
                 {values[index]
@@ -43,4 +55,4 @@ export function ChartDataTable({ label, series, timeZone }: ChartDataTableProps)
       </tbody>
     </table>
   )
-}
+})
diff --git a/packages/emcn/src/components/charts/chart-format.ts b/packages/emcn/src/components/charts/chart-format.ts
index fec8ac50f30..f14602fcdb6 100644
--- a/packages/emcn/src/components/charts/chart-format.ts
+++ b/packages/emcn/src/components/charts/chart-format.ts
@@ -11,14 +11,18 @@ export function formatChartTimestamp(timestamp?: string, timeZone?: string): str
   if (!timestamp) return ''
   const date = new Date(timestamp)
   if (Number.isNaN(date.getTime())) return ''
-  if (timeZone) {
-    const day = date.toLocaleDateString('en-US', { timeZone, month: 'short', day: 'numeric' })
-    const time = date.toLocaleTimeString('en-US', { timeZone, hour: 'numeric', minute: '2-digit' })
-    return `${day.toUpperCase()} ${time}`
-  }
-  const day = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
-  const time = date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
-  return `${day.toUpperCase()} ${time}`
+  const time = date.toLocaleTimeString('en-US', { timeZone, hour: 'numeric', minute: '2-digit' })
+  return `${formatChartDate(timestamp, timeZone)} ${time}`
+}
+
+/** The tooltip's header line for a calendar bucket: `MAR 4`. Empty for an unparseable timestamp. */
+export function formatChartDate(timestamp?: string, timeZone?: string): string {
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  if (Number.isNaN(date.getTime())) return ''
+  return date
+    .toLocaleDateString('en-US', { timeZone, month: 'short', day: 'numeric' })
+    .toUpperCase()
 }
 
 /** Compact axis magnitude — `1.2k`, `3.4m`. */
diff --git a/packages/emcn/src/components/charts/chart-layout.test.tsx b/packages/emcn/src/components/charts/chart-layout.test.tsx
index f4dc13d06d6..894bc7f9413 100644
--- a/packages/emcn/src/components/charts/chart-layout.test.tsx
+++ b/packages/emcn/src/components/charts/chart-layout.test.tsx
@@ -2,7 +2,7 @@
  * @vitest-environment jsdom
  */
 import { act } from 'react'
-import { BarChart, CHART_PADDING, ChartFrame, DonutChart, LineChart, RadarChart } from '@sim/emcn'
+import { BarChart, CHART_PADDING, ChartFrame, LineChart, RadarChart } from '@sim/emcn'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -264,36 +264,6 @@ describe('Dashboard chart states', () => {
     expect(container.querySelector('path[stroke="green"]')).toBeNull()
   })
 
-  it('previews, pins, and clears a distribution without changing its proportions', () => {
-    const segments = [
-      { label: 'Completed', value: 90, color: 'blue' },
-      { label: 'Failed', value: 10, color: 'red' },
-    ]
-    mountAtWidth(400, <DonutChart label='Outcomes' segments={segments} />)
-    const failed = container.querySelector<HTMLButtonElement>(
-      '[aria-label="Highlight Failed: 10"]'
-    )!
-    const completedArc = container.querySelector('circle[stroke="blue"]')!
-    act(() => failed.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })))
-    expect(completedArc.getAttribute('opacity')).toBe('0.2')
-    expect(completedArc.getAttribute('stroke-dasharray')).toBe('90 10')
-    act(() => failed.click())
-    act(() => failed.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })))
-    expect(failed.getAttribute('aria-pressed')).toBe('true')
-    expect(completedArc.getAttribute('opacity')).toBe('0.2')
-    act(() => failed.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })))
-    expect(failed.getAttribute('aria-pressed')).toBe('false')
-    expect(completedArc.getAttribute('opacity')).toBe('1')
-    act(() => failed.focus())
-    expect(completedArc.getAttribute('opacity')).toBe('0.2')
-    act(() => failed.blur())
-    expect(completedArc.getAttribute('opacity')).toBe('1')
-    act(() => failed.click())
-    act(() => root.render(<DonutChart label='Outcomes' segments={segments.slice(0, 1)} />))
-    expect(completedArc.getAttribute('opacity')).toBe('1')
-    expect(container.querySelector('text')?.textContent).toBe('90')
-  })
-
   it.each([1, 2])('labels short daily series with calendar dates (%s buckets)', (count) => {
     const svg = mountAtWidth(
       400,
@@ -311,9 +281,7 @@ describe('Dashboard chart states', () => {
   })
 
   it('reserves the same chart frame for loading, errors, and data', () => {
-    const content = (
-      <DonutChart label='Outcomes' segments={[{ label: 'Completed', value: 5, color: 'blue' }]} />
-    )
+    const content = <p data-chart-content>Completed</p>
     mountAtWidth(
       320,
       <ChartFrame title='Outcomes' height={160} loading>
@@ -322,7 +290,7 @@ describe('Dashboard chart states', () => {
     )
     expect(container.querySelector('section')?.getAttribute('aria-busy')).toBe('true')
     expect(container.querySelector('svg')?.getAttribute('height')).toBe('160')
-    expect(container.querySelector('circle')).toBeNull()
+    expect(container.querySelector('[data-chart-content]')).toBeNull()
     act(() =>
       root.render(
         <ChartFrame title='Outcomes' height={160} error='Unavailable'>
@@ -340,10 +308,7 @@ describe('Dashboard chart states', () => {
       )
     )
     expect(container.querySelector('svg')?.getAttribute('height')).toBe('160')
-    expect(container.textContent).toContain('Completed')
-    expect(
-      container.querySelector('circle[stroke-dasharray]')?.getAttribute('stroke-dasharray')
-    ).toBe('100 0')
+    expect(container.querySelector('[data-chart-content]')?.textContent).toBe('Completed')
   })
 
   it('recovers when a selected line series disappears during refresh', () => {
@@ -374,3 +339,117 @@ describe('Dashboard chart states', () => {
     expect(container.querySelector('table')?.textContent).toContain('10')
   })
 })
+
+describe('BarChart stacked mode', () => {
+  const buckets = dailySeries(3, 0).map((point) => point.timestamp)
+  const layer = (id: string, color: string, values: number[]) => ({
+    id,
+    label: id,
+    color,
+    data: buckets.map((timestamp, index) => ({ timestamp, value: values[index] ?? 0 })),
+  })
+
+  /** Segment rects are the filled ones; tracks are painted with the border token. */
+  function segments(svg: SVGSVGElement) {
+    return [...svg.querySelectorAll('rect')].filter(
+      (rect) => rect.getAttribute('fill') !== 'var(--border)'
+    )
+  }
+
+  it('draws one segment per nonzero layer, bottom layer lowest', () => {
+    const svg = mountAtWidth(
+      680,
+      <BarChart
+        label=''
+        unit='credits'
+        height={200}
+        series={[layer('a', 'red', [30, 0, 10]), layer('b', 'blue', [10, 5, 0])]}
+      />
+    )
+    const drawn = segments(svg)
+    expect(drawn.map((rect) => rect.getAttribute('fill'))).toEqual(['red', 'blue', 'blue', 'red'])
+    const [firstA, firstB] = drawn
+    expect(Number(firstA.getAttribute('y'))).toBeGreaterThan(Number(firstB.getAttribute('y')))
+  })
+
+  it('stacks each column to the height a single bar of its total would reach', () => {
+    const stacked = mountAtWidth(
+      680,
+      <BarChart
+        label=''
+        height={200}
+        series={[layer('a', 'red', [30, 20, 10]), layer('b', 'blue', [10, 20, 0])]}
+      />
+    )
+    const stackedTops = segments(stacked)
+      .filter((rect) => rect.getAttribute('fill') === 'blue')
+      .map((rect) => Number(rect.getAttribute('y')))
+    act(() => root.unmount())
+    container.remove()
+
+    const single = mountAtWidth(
+      680,
+      <BarChart
+        label=''
+        height={200}
+        color='green'
+        data={buckets.map((timestamp, index) => ({ timestamp, value: [40, 40, 10][index] ?? 0 }))}
+      />
+    )
+    const singleTops = segments(single).map((rect) => Number(rect.getAttribute('y')))
+    expect(stackedTops[0]).toBeCloseTo(singleTops[0] ?? Number.NaN, 5)
+    expect(stackedTops[1]).toBeCloseTo(singleTops[1] ?? Number.NaN, 5)
+  })
+
+  it('dims every layer but the highlighted one', () => {
+    const svg = mountAtWidth(
+      680,
+      <BarChart
+        label=''
+        height={200}
+        highlightedSeriesId='b'
+        series={[layer('a', 'red', [30, 20, 10]), layer('b', 'blue', [10, 20, 5])]}
+      />
+    )
+    for (const rect of segments(svg)) {
+      const expected = rect.getAttribute('fill') === 'blue' ? '1' : '0.2'
+      expect(rect.getAttribute('opacity')).toBe(expected)
+    }
+  })
+
+  it('exposes every layer in the accessible data table', () => {
+    mountAtWidth(
+      680,
+      <BarChart
+        label='Credits'
+        height={200}
+        series={[layer('Workflow', 'red', [1, 2, 3]), layer('Sim Chat', 'blue', [4, 5, 6])]}
+      />
+    )
+    const headers = [...container.querySelectorAll('thead th')].map((th) => th.textContent)
+    expect(headers).toEqual(['Date', 'Workflow', 'Sim Chat'])
+  })
+})
+
+describe('BarChart tooltip', () => {
+  it('shows a calendar bucket as its date and a credit value in full', () => {
+    const svg = mountAtWidth(
+      680,
+      <BarChart
+        label=''
+        unit='credits'
+        xAxisFormat='date'
+        timeZone='UTC'
+        height={200}
+        data={dailySeries(3, 12_345)}
+        color='blue'
+      />
+    )
+    act(() => {
+      svg.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: 60, clientY: 80 }))
+    })
+    expect(container.textContent).toContain('JAN 1')
+    expect(container.textContent).not.toContain('12:00 AM')
+    expect(container.textContent).toContain('12,345')
+  })
+})
diff --git a/packages/emcn/src/components/charts/donut-chart.tsx b/packages/emcn/src/components/charts/donut-chart.tsx
deleted file mode 100644
index b3c9d362a68..00000000000
--- a/packages/emcn/src/components/charts/donut-chart.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ChartLegend } from '@sim/emcn'
-
-export interface DonutChartSegment {
-  label: string
-  value: number
-  color: string
-  display?: string
-}
-
-interface DonutChartProps {
-  segments: DonutChartSegment[]
-  label: string
-  totalLabel?: string
-}
-
-/** Shows a part-to-whole distribution, including single-category and empty totals. */
-export function DonutChart({ segments, label, totalLabel }: DonutChartProps) {
-  const [hoveredLabel, setHoveredLabel] = useState<string | null>(null)
-  const [selectedLabel, setSelectedLabel] = useState<string | null>(null)
-  const selected = segments.find((segment) => segment.label === selectedLabel)
-  const highlighted = segments.find((segment) => segment.label === hoveredLabel) ?? selected
-  const values = segments.filter((segment) => Number.isFinite(segment.value) && segment.value > 0)
-  const total = values.reduce((sum, segment) => sum + segment.value, 0)
-  let offset = 0
-  return (
-    <div className='flex h-full min-w-0 items-center gap-4'>
-      <svg viewBox='0 0 140 140' className='size-[128px] shrink-0' role='img' aria-label={label}>
-        <title>{label}</title>
-        <circle cx='70' cy='70' r='52' fill='none' stroke='var(--border)' strokeWidth='12' />
-        {values.map((segment) => {
-          const share = (segment.value / total) * 100
-          const start = offset
-          offset += share
-          return (
-            <circle
-              key={segment.label}
-              cx='70'
-              cy='70'
-              r='52'
-              pathLength='100'
-              fill='none'
-              stroke={segment.color}
-              strokeWidth='12'
-              strokeDasharray={`${share} ${100 - share}`}
-              strokeDashoffset={-start}
-              opacity={highlighted && highlighted.label !== segment.label ? 0.2 : 1}
-              className='transition-opacity duration-150 motion-reduce:transition-none'
-              onMouseEnter={() => setHoveredLabel(segment.label)}
-              onMouseLeave={() => setHoveredLabel(null)}
-              transform='rotate(-90 70 70)'
-            >
-              <title>{`${segment.label}: ${segment.display ?? segment.value.toLocaleString()} (${share.toFixed(1)}%)`}</title>
-            </circle>
-          )
-        })}
-        <text x='70' y='74' textAnchor='middle' fill='var(--text-body)' fontSize='14'>
-          {highlighted
-            ? (highlighted.display ??
-              new Intl.NumberFormat(undefined, { notation: 'compact' }).format(highlighted.value))
-            : (totalLabel ??
-              new Intl.NumberFormat(undefined, { notation: 'compact' }).format(total))}
-        </text>
-      </svg>
-      {segments.length > 0 ? (
-        <ChartLegend
-          items={segments.map((segment) => ({
-            ...segment,
-            id: segment.label,
-            value: segment.display ?? segment.value.toLocaleString(),
-          }))}
-          selectedId={selected?.label ?? null}
-          highlightedId={highlighted?.label ?? null}
-          onHighlight={setHoveredLabel}
-          onSelect={setSelectedLabel}
-        />
-      ) : (
-        <p className='text-[var(--text-muted)] text-caption'>No activity</p>
-      )}
-    </div>
-  )
-}
diff --git a/packages/emcn/src/components/charts/index.ts b/packages/emcn/src/components/charts/index.ts
index 1d8b4b995a4..f82c94a2a22 100644
--- a/packages/emcn/src/components/charts/index.ts
+++ b/packages/emcn/src/components/charts/index.ts
@@ -1,4 +1,4 @@
-export { BarChart, type BarChartPoint } from './bar-chart'
+export { BarChart, type BarChartPoint, type BarChartProps, type BarChartSeries } from './bar-chart'
 export { ChartDataTable } from './chart-data-table'
 export * from './chart-format'
 export { ChartFrame } from './chart-frame'
@@ -6,7 +6,6 @@ export * from './chart-geometry'
 export { ChartLegend, type ChartLegendItem, chartLegendVariants } from './chart-legend'
 export * from './chart-tooltip'
 export { DashboardMetric } from './dashboard-metric'
-export { DonutChart, type DonutChartSegment } from './donut-chart'
 export { LineChart, type LineChartMultiSeries, type LineChartPoint } from './line-chart'
 export { RadarChart, type RadarChartAxis } from './radar-chart'
 export { useChartWidth, useIsDarkTheme } from './use-chart-theme'

From 9a636680d0b19b1103e710161181c2d83cc85582 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 22 Sep 2026 23:01:27 -0700
Subject: [PATCH 2/5] fix(insights): bound usage settling by the stream cap,
 discard unreadable segments, neutral zero delta

---
 .../components/usage-credits.test.tsx         | 12 +++++++++
 .../components/usage-credits.tsx              | 11 +++++---
 .../hooks/use-legend-highlight.ts             | 11 ++++----
 apps/sim/lib/billing/core/usage-analytics.ts  |  8 +++---
 .../billing/core/usage-segment-cache.test.ts  | 14 +++++++++-
 .../lib/billing/core/usage-segment-cache.ts   | 27 +++++++++++++++----
 6 files changed, 66 insertions(+), 17 deletions(-)

diff --git a/apps/sim/ee/organization-usage/components/usage-credits.test.tsx b/apps/sim/ee/organization-usage/components/usage-credits.test.tsx
index 23c81a2c008..ea845eb1902 100644
--- a/apps/sim/ee/organization-usage/components/usage-credits.test.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-credits.test.tsx
@@ -34,6 +34,18 @@ describe('UsageCredits', () => {
     expect(failed).toContain('load credits.')
   })
 
+  it('shows an unchanged period as neutral, not as a decrease', () => {
+    const markup = renderToStaticMarkup(
+      <UsageCredits
+        overview={{ ...overview, totals: { credits: 100 }, previousTotals: { credits: 100 } }}
+        isLoading={false}
+        isError={false}
+      />
+    )
+    expect(markup).toContain('No change compared with the previous period')
+    expect(markup).not.toContain('↓')
+  })
+
   it('omits the allowance outside the organization period', () => {
     const markup = renderToStaticMarkup(
       <UsageCredits
diff --git a/apps/sim/ee/organization-usage/components/usage-credits.tsx b/apps/sim/ee/organization-usage/components/usage-credits.tsx
index f3b8c43077e..eccf133723f 100644
--- a/apps/sim/ee/organization-usage/components/usage-credits.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-credits.tsx
@@ -104,7 +104,8 @@ export function UsageCredits({
   const { layers, legend } = useMemo(() => toCreditLayers(current?.series ?? []), [current])
   const used = current?.totals.credits ?? 0
   const previous = current?.previousTotals?.credits ?? 0
-  const delta = current && previous > 0 ? ((used - previous) / previous) * 100 : null
+  /** Rounded once, so the arrow and the figure never disagree about a sub-percent change. */
+  const delta = current && previous > 0 ? Math.round(((used - previous) / previous) * 100) : null
   const limit = current?.limitCredits ?? null
   const highlight = useLegendHighlight(legend.map((item) => item.id))
 
@@ -122,8 +123,12 @@ export function UsageCredits({
             <Badge
               variant={delta > 0 ? 'amber' : 'gray-secondary'}
               size='sm'
-              aria-label={`${Math.abs(delta).toFixed(0)}% ${delta > 0 ? 'increase' : delta < 0 ? 'decrease' : 'change'} compared with the previous period`}
-            >{`${delta > 0 ? '↑' : '↓'} ${Math.abs(delta).toFixed(0)}%`}</Badge>
+              aria-label={
+                delta === 0
+                  ? 'No change compared with the previous period'
+                  : `${Math.abs(delta)}% ${delta > 0 ? 'increase' : 'decrease'} compared with the previous period`
+              }
+            >{`${delta > 0 ? '↑ ' : delta < 0 ? '↓ ' : ''}${Math.abs(delta)}%`}</Badge>
           )}
           {limit !== null && used > limit && (
             <Badge variant='red' size='sm'>
diff --git a/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts b/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts
index eecc7a6d5f8..400de66ae1c 100644
--- a/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts
+++ b/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts
@@ -5,15 +5,16 @@ import { useState } from 'react'
 /**
  * Hover and click highlighting shared by a chart and its legend.
  *
- * A selection whose series the current window no longer draws is ignored: otherwise
- * every layer would stay dimmed after a period change, with no legend entry left to
- * clear it.
+ * A hover or selection whose series the current window no longer draws is ignored:
+ * otherwise every layer would stay dimmed after a period change, with no legend entry
+ * left to clear it.
  */
 export function useLegendHighlight(seriesIds: readonly string[]) {
   const [hoveredId, setHoveredId] = useState<string | null>(null)
   const [selectedId, setSelectedId] = useState<string | null>(null)
-  const activeSelection = selectedId !== null && seriesIds.includes(selectedId) ? selectedId : null
-  const highlightedId = hoveredId ?? activeSelection
+  const isDrawn = (id: string | null): id is string => id !== null && seriesIds.includes(id)
+  const activeSelection = isDrawn(selectedId) ? selectedId : null
+  const highlightedId = isDrawn(hoveredId) ? hoveredId : activeSelection
   return {
     highlightedId,
     legendProps: {
diff --git a/apps/sim/lib/billing/core/usage-analytics.ts b/apps/sim/lib/billing/core/usage-analytics.ts
index 2c4a04d34a2..a39efa21524 100644
--- a/apps/sim/lib/billing/core/usage-analytics.ts
+++ b/apps/sim/lib/billing/core/usage-analytics.ts
@@ -6,6 +6,7 @@ import {
   resolveEnterpriseReportingPeriod,
 } from '@/lib/billing/core/reporting-period'
 import type { BillingEntity } from '@/lib/billing/core/usage-log'
+import { STREAM_TIMEOUT_MS } from '@/lib/copilot/constants'
 import { zonedWallClockToUtc } from '@/lib/core/utils/timezone'
 
 /**
@@ -487,10 +488,11 @@ export function usageBucketTimestamps(
  * How long after a stretch of time ends before its ledger rows are final.
  *
  * Rows are stamped when inserted, but a cumulative model charge tops up its row's
- * cost in place for as long as the stream runs. Past this lag a day or hour is
- * treated as settled.
+ * cost in place for as long as its stream runs — which {@link STREAM_TIMEOUT_MS}
+ * caps — plus the retry flushes that follow it. Past the cap and this margin a day or
+ * hour can no longer change and is treated as settled.
  */
-export const USAGE_SETTLE_MS = 3 * 60 * 60 * 1000
+export const USAGE_SETTLE_MS = STREAM_TIMEOUT_MS + 2 * 60 * 60 * 1000
 
 const HOUR_MS = 60 * 60 * 1000
 
diff --git a/apps/sim/lib/billing/core/usage-segment-cache.test.ts b/apps/sim/lib/billing/core/usage-segment-cache.test.ts
index 479deb72fb9..87c31199a20 100644
--- a/apps/sim/lib/billing/core/usage-segment-cache.test.ts
+++ b/apps/sim/lib/billing/core/usage-segment-cache.test.ts
@@ -4,7 +4,8 @@
 import { generateShortId } from '@sim/utils/id'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-vi.mock('@/lib/core/config/redis', () => ({ getRedisClient: () => null }))
+const redisMock = vi.hoisted(() => ({ client: null as unknown }))
+vi.mock('@/lib/core/config/redis', () => ({ getRedisClient: () => redisMock.client }))
 
 import { type UsageSegment, usageHourKey } from '@/lib/billing/core/usage-analytics'
 import { readThroughSegments } from '@/lib/billing/core/usage-segment-cache'
@@ -58,9 +59,20 @@ describe('readThroughSegments', () => {
 
   beforeEach(() => {
     vi.clearAllMocks()
+    redisMock.client = null
     namespace = `test-${generateShortId()}`
   })
 
+  it('reads the ledger when a stored entry does not parse, rather than failing', async () => {
+    redisMock.client = {
+      mget: async (...keys: string[]) => keys.map(() => '{not json'),
+      pipeline: () => ({ set: () => undefined, exec: async () => [] }),
+    }
+    const entries = await read([day('2026-01-05')])
+    expect(fetchRange).toHaveBeenCalledTimes(1)
+    expect(totalByDay(entries)).toEqual({ '2026-01-05': 24 })
+  })
+
   it('reads every missing segment in one merged range and counts each hour once', async () => {
     const segments = [day('2026-01-01'), ...hours('2026-01-02', 10)]
     const entries = await read(segments)
diff --git a/apps/sim/lib/billing/core/usage-segment-cache.ts b/apps/sim/lib/billing/core/usage-segment-cache.ts
index 97e36f939d6..74aa862f02e 100644
--- a/apps/sim/lib/billing/core/usage-segment-cache.ts
+++ b/apps/sim/lib/billing/core/usage-segment-cache.ts
@@ -60,6 +60,21 @@ async function readStored(keys: string[]): Promise<(string | null)[]> {
   }
 }
 
+/**
+ * A stored value, or `undefined` for a miss. An entry that does not parse — written by
+ * an older shape, or corrupted — is a miss too: the ledger answers instead of a failed
+ * page, and the fresh value overwrites it.
+ */
+function parseStored<T>(key: string, value: string | null | undefined): T | undefined {
+  if (value == null) return undefined
+  try {
+    return JSON.parse(value) as T
+  } catch (error) {
+    logger.warn('Discarding unreadable usage segment', { key, error: getErrorMessage(error) })
+    return undefined
+  }
+}
+
 /** Fire-and-forget: a page never waits on, or fails because of, a cache write. */
 function writeStored(entries: { key: string; value: string; ttlMs: number }[]): void {
   if (entries.length === 0) return
@@ -141,14 +156,16 @@ export async function readThroughSegments<T>({
   const writes: { key: string; value: string; ttlMs: number }[] = []
   const cached = new Map<UsageSegment, T>()
   settled.forEach((segment, index) => {
-    const value = stored[index]
-    if (value != null) cached.set(segment, JSON.parse(value) as T)
+    const value = parseStored<T>(keyOf(segment.key), stored[index])
+    if (value !== undefined) cached.set(segment, value)
   })
   assemblable.forEach((segment, index) => {
     if (cached.has(segment)) return
-    const hours = storedHours.slice(index * 24, index * 24 + 24)
-    if (hours.some((hour) => hour == null)) return
-    const value = combine(hours.map((hour) => JSON.parse(hour as string) as T))
+    const hours = storedHours
+      .slice(index * 24, index * 24 + 24)
+      .map((hour, offset) => parseStored<T>(keyOf(usageHourKey(segment.day, offset)), hour))
+    if (hours.some((hour) => hour === undefined)) return
+    const value = combine(hours as T[])
     cached.set(segment, value)
     writes.push({ key: keyOf(segment.key), value: JSON.stringify(value), ttlMs })
   })

From 78c4a3c27ba91cf092b7bb155cb941f5dd8f81a7 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 22 Sep 2026 23:11:55 -0700
Subject: [PATCH 3/5] fix(insights): align rolling windows to the viewer's hour
 and clear stale legend highlights

---
 .../hooks/use-legend-highlight.ts             | 14 +++++------
 .../lib/billing/core/usage-analytics.test.ts  | 14 +++++++++++
 apps/sim/lib/billing/core/usage-analytics.ts  | 25 +++++++++++++------
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts b/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts
index 400de66ae1c..e999a3f9a7f 100644
--- a/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts
+++ b/apps/sim/ee/organization-usage/hooks/use-legend-highlight.ts
@@ -5,21 +5,21 @@ import { useState } from 'react'
 /**
  * Hover and click highlighting shared by a chart and its legend.
  *
- * A hover or selection whose series the current window no longer draws is ignored:
- * otherwise every layer would stay dimmed after a period change, with no legend entry
- * left to clear it.
+ * A hover or selection whose series the current window no longer draws is cleared
+ * during render: otherwise every layer would stay dimmed after a period change, with
+ * no legend entry left to clear it, and a returning series would bring it back.
  */
 export function useLegendHighlight(seriesIds: readonly string[]) {
   const [hoveredId, setHoveredId] = useState<string | null>(null)
   const [selectedId, setSelectedId] = useState<string | null>(null)
-  const isDrawn = (id: string | null): id is string => id !== null && seriesIds.includes(id)
-  const activeSelection = isDrawn(selectedId) ? selectedId : null
-  const highlightedId = isDrawn(hoveredId) ? hoveredId : activeSelection
+  if (hoveredId !== null && !seriesIds.includes(hoveredId)) setHoveredId(null)
+  if (selectedId !== null && !seriesIds.includes(selectedId)) setSelectedId(null)
+  const highlightedId = hoveredId ?? selectedId
   return {
     highlightedId,
     legendProps: {
       highlightedId,
-      selectedId: activeSelection,
+      selectedId,
       onHighlight: setHoveredId,
       onSelect: setSelectedId,
     },
diff --git a/apps/sim/lib/billing/core/usage-analytics.test.ts b/apps/sim/lib/billing/core/usage-analytics.test.ts
index 9881a523102..80ad4a74293 100644
--- a/apps/sim/lib/billing/core/usage-analytics.test.ts
+++ b/apps/sim/lib/billing/core/usage-analytics.test.ts
@@ -147,6 +147,20 @@ describe('usageWindowLedgerFilter', () => {
 describe('resolveUsageAnalyticsWindow', () => {
   const now = new Date('2026-08-20T12:00:00.000Z')
 
+  it('starts a rolling window on the viewer-local hour, so its first segment settles', () => {
+    const window = resolveUsageAnalyticsWindow({
+      preset: '7d',
+      period: period(),
+      timezone: 'Asia/Kolkata',
+      now: new Date('2026-08-20T12:47:13.250Z'),
+    })
+    expect(window.kind === 'range' && window.from).toEqual(new Date('2026-08-13T12:30:00.000Z'))
+    const [first] = usageWindowSegments(window, 'Asia/Kolkata', {
+      now: window.kind === 'range' ? window.to : undefined,
+    })
+    expect(first?.settled).toBe(true)
+  })
+
   it('keeps current-period a period so it matches the billing page', () => {
     const window = resolveUsageAnalyticsWindow({ preset: 'current-period', period: period(), now })
     expect(window).toEqual({ kind: 'period', period: period() })
diff --git a/apps/sim/lib/billing/core/usage-analytics.ts b/apps/sim/lib/billing/core/usage-analytics.ts
index a39efa21524..86c134491a9 100644
--- a/apps/sim/lib/billing/core/usage-analytics.ts
+++ b/apps/sim/lib/billing/core/usage-analytics.ts
@@ -211,13 +211,22 @@ function civilDaysBetween(fromKey: string, toKey: string): number {
 }
 
 /**
- * The last `days` up to now, starting on the hour. A start mid-hour would leave the
- * window's first hour partial, and a partial hour can never be cached — every view
- * would read it from the ledger again.
+ * The last `days` up to now, starting on the viewer's hour. A start mid-hour would
+ * leave the window's first hour partial, and a partial hour can never be cached —
+ * every view would read it from the ledger again. The hour is local, not UTC: in a
+ * half-hour-offset zone a UTC hour starts halfway through a segment.
  */
-function trailingRange(days: number, now: Date): UsageAnalyticsWindow {
+function trailingRange(days: number, now: Date, timezone: string): UsageAnalyticsWindow {
   const from = new Date(now.getTime() - days * DAY_MS)
-  from.setUTCMinutes(0, 0, 0)
+  const parts = new Intl.DateTimeFormat('en-US', {
+    timeZone: timezone,
+    minute: 'numeric',
+    second: 'numeric',
+  }).formatToParts(from)
+  const part = (type: 'minute' | 'second') =>
+    Number(parts.find((entry) => entry.type === type)?.value ?? 0)
+  from.setTime(from.getTime() - (part('minute') * 60 + part('second')) * 1000)
+  from.setUTCMilliseconds(0)
   return { kind: 'range', from, to: now }
 }
 
@@ -239,7 +248,7 @@ export function resolveUsageAnalyticsWindow({
   switch (preset) {
     case 'current-period':
       return isUnboundedPeriod(period)
-        ? trailingRange(UNBOUNDED_PERIOD_DISPLAY_DAYS, now)
+        ? trailingRange(UNBOUNDED_PERIOD_DISPLAY_DAYS, now, timezone)
         : { kind: 'period', period }
     case 'previous-period': {
       const previous = resolvePreviousPeriod(period)
@@ -265,9 +274,9 @@ export function resolveUsageAnalyticsWindow({
       }
     }
     case '7d':
-      return trailingRange(7, now)
+      return trailingRange(7, now, timezone)
     case '30d':
-      return trailingRange(30, now)
+      return trailingRange(30, now, timezone)
     case 'custom': {
       // A partial selection is not a range, so it falls back to the current period —
       // through the same branch, which is what keeps an unbounded period from being

From bf96b23b8fd7cbb55dd8a8970f95c02deadb5e87 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 22 Sep 2026 23:17:34 -0700
Subject: [PATCH 4/5] improvement(emcn): draw each stacked column as one bar
 split by color

---
 .../emcn/src/components/charts/bar-chart.tsx  | 53 +++++++++++++------
 .../components/charts/chart-layout.test.tsx   | 25 +++++++--
 2 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/packages/emcn/src/components/charts/bar-chart.tsx b/packages/emcn/src/components/charts/bar-chart.tsx
index 6eced4c6acb..60b0e72d90f 100644
--- a/packages/emcn/src/components/charts/bar-chart.tsx
+++ b/packages/emcn/src/components/charts/bar-chart.tsx
@@ -72,9 +72,6 @@ interface StackedBarChartProps extends BarChartBaseProps {
 
 export type BarChartProps = SingleSeriesBarChartProps | StackedBarChartProps
 
-/** Surface gap between stacked segments, so adjacent fills never merge. */
-const STACK_GAP = 1
-
 /**
  * Tick and tooltip text for a bucket's value, in the caller's unit. `exact` is for
  * the tooltip, where a figure is read in full rather than fitted to the axis gutter.
@@ -177,7 +174,7 @@ function BarChartComponent(props: BarChartProps) {
           cursor -= segmentHeight
           return [{ layer, y: cursor, height: segmentHeight }]
         })
-        return { x, top, point, segments }
+        return { x, top, height: columnHeight, point, segments }
       }),
     [
       buckets,
@@ -323,26 +320,50 @@ function BarChartComponent(props: BarChartProps) {
             ))}
           </g>
 
-          <g style={{ mixBlendMode: isDark && !isStacked ? 'screen' : 'normal' }}>
-            {columns.flatMap((column, index) =>
-              column.segments.map((segment, segmentIndex) => {
-                /** Every segment but the topmost gives up a sliver so neighbours stay distinct. */
-                const gap = segmentIndex < column.segments.length - 1 ? STACK_GAP : 0
-                return (
+          {/**
+           * Each column is one bar: its segments are square and clipped to a single
+           * rounded outline, so only the bar's ends are rounded and a stack reads as one
+           * shape split by color. A segment reaches half a pixel below its own bottom so
+           * the one beneath never shows an anti-aliased seam through the join.
+           */}
+          <defs>
+            {columns.map((column, index) =>
+              column.segments.length === 0 ? null : (
+                <clipPath
+                  key={`${uniqueId}-column-${column.point.timestamp}`}
+                  id={`${uniqueId}-column-${index}`}
+                >
                   <rect
-                    key={`${uniqueId}-bar-${column.point.timestamp}-${segment.layer.id}`}
                     x={column.x}
-                    y={segment.y + gap}
+                    y={column.top}
                     width={barWidth}
-                    height={Math.max(0, segment.height - gap)}
+                    height={column.height}
                     rx='2'
+                  />
+                </clipPath>
+              )
+            )}
+          </defs>
+          <g style={{ mixBlendMode: isDark && !isStacked ? 'screen' : 'normal' }}>
+            {columns.map((column, index) => (
+              <g
+                key={`${uniqueId}-bar-${column.point.timestamp}`}
+                clipPath={`url(#${uniqueId}-column-${index})`}
+              >
+                {column.segments.map((segment) => (
+                  <rect
+                    key={segment.layer.id}
+                    x={column.x}
+                    y={segment.y}
+                    width={barWidth}
+                    height={segment.height + 0.5}
                     fill={isStacked ? segment.layer.color : `url(#bar-${uniqueId})`}
                     className='transition-opacity duration-150 motion-reduce:transition-none'
                     opacity={segmentOpacity(segment.layer.id, index)}
                   />
-                )
-              })
-            )}
+                ))}
+              </g>
+            ))}
           </g>
 
           {tickIndices.map((index) => {
diff --git a/packages/emcn/src/components/charts/chart-layout.test.tsx b/packages/emcn/src/components/charts/chart-layout.test.tsx
index 894bc7f9413..0338c63fcde 100644
--- a/packages/emcn/src/components/charts/chart-layout.test.tsx
+++ b/packages/emcn/src/components/charts/chart-layout.test.tsx
@@ -121,7 +121,7 @@ describe('BarChart rendered geometry', () => {
         height={160}
       />
     )
-    const bars = [...svg.querySelectorAll('rect')]
+    const bars = [...svg.querySelectorAll('rect')].filter((rect) => !rect.closest('clipPath'))
     expect(bars.length).toBeGreaterThan(0)
     const svgWidth = Number(svg.getAttribute('width'))
     for (const bar of bars) {
@@ -349,10 +349,10 @@ describe('BarChart stacked mode', () => {
     data: buckets.map((timestamp, index) => ({ timestamp, value: values[index] ?? 0 })),
   })
 
-  /** Segment rects are the filled ones; tracks are painted with the border token. */
+  /** Segment rects are the filled ones; tracks are painted with the border token, and a column's clip outline is not drawn. */
   function segments(svg: SVGSVGElement) {
     return [...svg.querySelectorAll('rect')].filter(
-      (rect) => rect.getAttribute('fill') !== 'var(--border)'
+      (rect) => rect.getAttribute('fill') !== 'var(--border)' && !rect.closest('clipPath')
     )
   }
 
@@ -372,6 +372,25 @@ describe('BarChart stacked mode', () => {
     expect(Number(firstA.getAttribute('y'))).toBeGreaterThan(Number(firstB.getAttribute('y')))
   })
 
+  it('draws a column as one bar: flush square segments inside one rounded outline', () => {
+    const svg = mountAtWidth(
+      680,
+      <BarChart
+        label=''
+        height={200}
+        series={[layer('a', 'red', [30, 0, 10]), layer('b', 'blue', [10, 5, 0])]}
+      />
+    )
+    const [bottom, top] = segments(svg)
+    expect(Number(top.getAttribute('y')) + Number(top.getAttribute('height'))).toBeGreaterThan(
+      Number(bottom.getAttribute('y'))
+    )
+    expect(bottom.hasAttribute('rx')).toBe(false)
+    const outline = svg.querySelector('clipPath rect')
+    expect(outline?.getAttribute('rx')).toBe('2')
+    expect(Number(outline?.getAttribute('y'))).toBeCloseTo(Number(top.getAttribute('y')), 5)
+  })
+
   it('stacks each column to the height a single bar of its total would reach', () => {
     const stacked = mountAtWidth(
       680,

From a6304e3943a737ca63313621cb4dfdc4e1d1a6b3 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 22 Sep 2026 23:32:45 -0700
Subject: [PATCH 5/5] improvement(insights): brand-aligned,
 colorblind-validated chart palette

---
 .../components/activity-summary.tsx           | 14 ++++++---
 .../components/usage-credits.tsx              |  5 +++-
 apps/sim/ee/organization-usage/constants.ts   | 29 ++++++++++++++-----
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/apps/sim/ee/organization-usage/components/activity-summary.tsx b/apps/sim/ee/organization-usage/components/activity-summary.tsx
index bfb0db578e4..75376f8e62d 100644
--- a/apps/sim/ee/organization-usage/components/activity-summary.tsx
+++ b/apps/sim/ee/organization-usage/components/activity-summary.tsx
@@ -7,12 +7,17 @@ import {
   ChartFrame,
   ChartLegend,
   type ChartLegendItem,
+  cn,
   DashboardMetric,
   formatChartLatency,
 } from '@sim/emcn'
 import type { OrganizationActivitySummary } from '@/lib/api/contracts/organization-activity'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
-import { USAGE_CHAT_COLOR } from '@/ee/organization-usage/constants'
+import {
+  USAGE_CHAT_COLOR,
+  USAGE_OTHER_COLOR,
+  USAGE_PALETTE_CLASS,
+} from '@/ee/organization-usage/constants'
 import { useLegendHighlight } from '@/ee/organization-usage/hooks/use-legend-highlight'
 import { useOrganizationActivitySummary } from '@/hooks/queries/organization-activity'
 import type { OrganizationUsageWindowKey } from '@/hooks/queries/utils/organization-usage-keys'
@@ -21,12 +26,13 @@ const CHART_HEIGHT = 180
 
 /**
  * Outcome layers, bottom-up. Failed is the status red and sits on the stack where a
- * spike reads at a glance; Other (cancelled, paused, unfinished) stays neutral.
+ * spike reads at a glance; Other (cancelled, paused, unfinished) stays neutral, in a
+ * gray whose lightness keeps it apart from the red for color-vision deficiency.
  */
 const OUTCOMES = [
   { id: 'completed', label: 'Completed', color: 'var(--brand-blue)' },
   { id: 'failed', label: 'Failed', color: 'var(--text-error)' },
-  { id: 'other', label: 'Other', color: 'var(--text-muted)' },
+  { id: 'other', label: 'Other', color: USAGE_OTHER_COLOR },
 ] as const
 
 const OUTCOME_LEGEND: ChartLegendItem[] = [...OUTCOMES]
@@ -113,7 +119,7 @@ export function ActivitySummary({ summary, loading, error, onRetry }: ActivitySu
   const chartState = { loading, error: error ? "Couldn't load activity." : undefined, onRetry }
 
   return (
-    <div className='flex flex-col gap-5'>
+    <div className={cn('flex flex-col gap-5', USAGE_PALETTE_CLASS)}>
       <div className='grid grid-cols-[repeat(auto-fit,minmax(min(120px,100%),1fr))] gap-4'>
         {metrics.map((metric) => (
           <DashboardMetric
diff --git a/apps/sim/ee/organization-usage/components/usage-credits.tsx b/apps/sim/ee/organization-usage/components/usage-credits.tsx
index eccf133723f..b3a94a65a3a 100644
--- a/apps/sim/ee/organization-usage/components/usage-credits.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-credits.tsx
@@ -13,6 +13,7 @@ import {
 } from '@sim/emcn'
 import type { OrganizationUsageOverview } from '@/lib/api/contracts/organization-usage'
 import {
+  USAGE_PALETTE_CLASS,
   USAGE_SOURCE_CATEGORIES,
   USAGE_SOURCE_CATEGORY,
   type UsageSourceCategoryId,
@@ -110,7 +111,9 @@ export function UsageCredits({
   const highlight = useLegendHighlight(legend.map((item) => item.id))
 
   return (
-    <div className={cn('flex flex-col gap-4', isPlaceholderData && 'opacity-50')}>
+    <div
+      className={cn('flex flex-col gap-4', USAGE_PALETTE_CLASS, isPlaceholderData && 'opacity-50')}
+    >
       <div className='flex flex-col gap-1.5'>
         <div className='flex h-7 items-baseline gap-2 whitespace-nowrap'>
           <span className='text-[var(--text-body)] text-lg tabular-nums'>
diff --git a/apps/sim/ee/organization-usage/constants.ts b/apps/sim/ee/organization-usage/constants.ts
index c910638eded..c28fff3003e 100644
--- a/apps/sim/ee/organization-usage/constants.ts
+++ b/apps/sim/ee/organization-usage/constants.ts
@@ -95,8 +95,21 @@ export const EXPANDED_ROW_COUNT = ORGANIZATION_USAGE_BREAKDOWN_MAX_LIMIT
 export const DEFAULT_USAGE_PRESET = '30d' as const
 export const DEFAULT_USAGE_TAB = USAGE_OVERVIEW_TAB
 
+/**
+ * The Insights chart palette, declared on each chart's root so a layer, its legend
+ * dot, and its tooltip swatch resolve to one color. Each hue is its source's color
+ * elsewhere in the app — Sim green for Chat, the Enrichment block's purple, the
+ * Knowledge block's teal, the agent violet — stepped to the lightness a filled mark
+ * needs in each mode; badge text tokens are too pale in dark mode to fill a bar.
+ */
+export const USAGE_PALETTE_CLASS =
+  '[--usage-chat:#1f9d63] [--usage-enrichment:#c026d3] [--usage-knowledge:#0e9f9f] [--usage-agent:#6f3dfa] [--usage-other:var(--text-secondary)] dark:[--usage-chat:#2dac72] dark:[--usage-enrichment:#d946ef] dark:[--usage-agent:#8b5cf6] dark:[--usage-other:#8a8a8a]'
+
 /** Sim Chat's color, shared by its credit layer and the chat-runs chart. */
-export const USAGE_CHAT_COLOR = 'var(--badge-orange-text)'
+export const USAGE_CHAT_COLOR = 'var(--usage-chat)'
+
+/** The neutral remainder, shared by the credit and outcome stacks. */
+export const USAGE_OTHER_COLOR = 'var(--usage-other)'
 
 /**
  * The credit chart's layers, bottom-up. Each one owns a fixed color, so a layer keeps
@@ -104,17 +117,17 @@ export const USAGE_CHAT_COLOR = 'var(--badge-orange-text)'
  * never its rank.
  *
  * Five hues plus a neutral `Other`: the palette is validated for adjacent-pair
- * separation (including color-vision deficiency) in exactly this order, so reorder
- * or extend it only by re-running that validation. A sixth distinct source belongs
- * in `Other`, not in a generated hue.
+ * separation (including color-vision deficiency) in both modes in exactly this order,
+ * so reorder or extend it only by re-running that validation. A sixth distinct source
+ * belongs in `Other`, not in a generated hue.
  */
 export const USAGE_SOURCE_CATEGORIES = [
   { id: 'workflow', label: 'Workflows', color: 'var(--brand-blue)' },
   { id: 'chat', label: 'Sim Chat', color: USAGE_CHAT_COLOR },
-  { id: 'agent', label: 'Agent block', color: 'var(--badge-purple-text)' },
-  { id: 'knowledge', label: 'Knowledge Base', color: 'var(--badge-amber-text)' },
-  { id: 'enrichment', label: 'Enrichment', color: 'var(--badge-pink-text)' },
-  { id: 'other', label: 'Other', color: 'var(--text-muted)' },
+  { id: 'enrichment', label: 'Enrichment', color: 'var(--usage-enrichment)' },
+  { id: 'knowledge', label: 'Knowledge Base', color: 'var(--usage-knowledge)' },
+  { id: 'agent', label: 'Agent block', color: 'var(--usage-agent)' },
+  { id: 'other', label: 'Other', color: USAGE_OTHER_COLOR },
 ] as const
 
 export type UsageSourceCategoryId = (typeof USAGE_SOURCE_CATEGORIES)[number]['id']