From dd15a1a29dd017b312b6781555c33128e0dde746 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 20 Oct 2026 19:43:01 -0700
Subject: [PATCH 1/2] improvement(insights): clarify unassigned usage and
 refresh usage charts

---
 .../[id]/usage/calendar/route.ts              |  29 +++
 .../components/activity-summary.tsx           |   9 +-
 .../components/usage-calendar.tsx             |  36 ++++
 .../components/usage-consumers.tsx            |  69 ++++++-
 .../components/usage-heatmap.tsx              | 182 ++++++++++++++++++
 .../components/usage-monitoring.tsx           |   7 +
 apps/sim/ee/organization-usage/constants.ts   |  16 +-
 apps/sim/hooks/queries/organization-usage.ts  |  20 ++
 .../queries/utils/organization-usage-keys.ts  |   4 +
 .../lib/api/contracts/organization-usage.ts   |  17 ++
 .../get-organization-usage-breakdown.ts       |  10 +-
 .../get-organization-usage-calendar.ts        |  43 +++++
 .../get-organization-usage-overview.test.ts   |  17 ++
 .../organization-usage/operations.ts          |   7 +
 .../lib/billing/core/usage-analytics.test.ts  |  20 ++
 apps/sim/lib/billing/core/usage-analytics.ts  |  23 ++-
 .../emcn/src/components/charts/bar-chart.tsx  | 146 ++++----------
 .../src/components/charts/geometry.test.ts    |  27 ++-
 .../emcn/src/components/charts/geometry.ts    |  12 ++
 19 files changed, 549 insertions(+), 145 deletions(-)
 create mode 100644 apps/sim/app/api/organizations/[id]/usage/calendar/route.ts
 create mode 100644 apps/sim/ee/organization-usage/components/usage-calendar.tsx
 create mode 100644 apps/sim/ee/organization-usage/components/usage-heatmap.tsx
 create mode 100644 apps/sim/lib/billing/application/organization-usage/get-organization-usage-calendar.ts

diff --git a/apps/sim/app/api/organizations/[id]/usage/calendar/route.ts b/apps/sim/app/api/organizations/[id]/usage/calendar/route.ts
new file mode 100644
index 00000000000..ecb915e03b5
--- /dev/null
+++ b/apps/sim/app/api/organizations/[id]/usage/calendar/route.ts
@@ -0,0 +1,29 @@
+import { getOrganizationUsageCalendarContract } from '@/lib/api/contracts/organization-usage'
+import {
+  defineInternalJsonRoute,
+  internalRateLimits,
+  internalSessionAuth,
+} from '@/lib/api/server/routes'
+import { getOrganizationUsageCalendar } from '@/lib/billing/application/organization-usage/get-organization-usage-calendar'
+import { organizationUsageOperations } from '@/lib/billing/application/organization-usage/operations'
+import { organizationUsageErrorPolicy } from '@/app/api/organizations/[id]/usage/error-policy'
+
+export const dynamic = 'force-dynamic'
+
+export const GET = defineInternalJsonRoute({
+  contract: getOrganizationUsageCalendarContract,
+  auth: internalSessionAuth,
+  operation: organizationUsageOperations.readCalendar,
+  rateLimit: internalRateLimits.none({
+    reason:
+      'Authenticated org-admin settings read, gated on enterprise entitlement and billing authority',
+  }),
+  errorPolicy: organizationUsageErrorPolicy,
+  mapInput: ({ params, query }) => ({
+    organizationId: params.id,
+    workspaceId: query.workspaceId,
+    timezone: query.timezone,
+  }),
+  useCase: getOrganizationUsageCalendar,
+  present: (result) => result,
+})
diff --git a/apps/sim/ee/organization-usage/components/activity-summary.tsx b/apps/sim/ee/organization-usage/components/activity-summary.tsx
index 75376f8e62d..0d590c02a40 100644
--- a/apps/sim/ee/organization-usage/components/activity-summary.tsx
+++ b/apps/sim/ee/organization-usage/components/activity-summary.tsx
@@ -25,13 +25,12 @@ import type { OrganizationUsageWindowKey } from '@/hooks/queries/utils/organizat
 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, in a
- * gray whose lightness keeps it apart from the red for color-vision deficiency.
+ * Outcome layers, bottom-up. Failed stays red; cancelled, paused and unfinished
+ * runs share the neutral remainder.
  */
 const OUTCOMES = [
-  { id: 'completed', label: 'Completed', color: 'var(--brand-blue)' },
-  { id: 'failed', label: 'Failed', color: 'var(--text-error)' },
+  { id: 'completed', label: 'Completed', color: 'var(--usage-workflow)' },
+  { id: 'failed', label: 'Failed', color: 'var(--usage-failed)' },
   { id: 'other', label: 'Other', color: USAGE_OTHER_COLOR },
 ] as const
 
diff --git a/apps/sim/ee/organization-usage/components/usage-calendar.tsx b/apps/sim/ee/organization-usage/components/usage-calendar.tsx
new file mode 100644
index 00000000000..6171d2093ad
--- /dev/null
+++ b/apps/sim/ee/organization-usage/components/usage-calendar.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import { ChartFrame } from '@sim/emcn'
+import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
+import { UsageHeatmap } from '@/ee/organization-usage/components/usage-heatmap'
+import { useOrganizationUsageCalendar } from '@/hooks/queries/organization-usage'
+
+interface UsageCalendarProps {
+  organizationId: string
+  timezone: string
+  workspaceId?: string
+}
+
+/** Loads the year separately so its history cannot delay the selected period's chart. */
+export function UsageCalendar({ organizationId, timezone, workspaceId }: UsageCalendarProps) {
+  const calendar = useOrganizationUsageCalendar(organizationId, timezone, workspaceId)
+  return (
+    <SettingsSection
+      label='Usage heatmap'
+      action={<span className='text-[var(--text-muted)] text-small'>Last 365 days</span>}
+    >
+      {calendar.isError || !calendar.data ? (
+        <ChartFrame
+          height={172}
+          loading={calendar.isLoading}
+          error={calendar.isError ? 'Could not load daily usage' : undefined}
+          onRetry={() => void calendar.refetch()}
+        >
+          {null}
+        </ChartFrame>
+      ) : (
+        <UsageHeatmap days={calendar.data.days} />
+      )}
+    </SettingsSection>
+  )
+}
diff --git a/apps/sim/ee/organization-usage/components/usage-consumers.tsx b/apps/sim/ee/organization-usage/components/usage-consumers.tsx
index ac8087b0888..7ee9a3f5eff 100644
--- a/apps/sim/ee/organization-usage/components/usage-consumers.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-consumers.tsx
@@ -1,8 +1,20 @@
 'use client'
 
-import type { ComponentType } from 'react'
-import { Avatar, cn, disclosureChevronClass, formatChartCompactNumber } from '@sim/emcn'
-import { ArrowRight, ChevronDown } from '@sim/emcn/icons'
+import { type ComponentType, useId, useState } from 'react'
+import {
+  Avatar,
+  Button,
+  cn,
+  disclosureChevronClass,
+  FloatingTooltip,
+  formatChartCompactNumber,
+  OverflowText,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  useFloatingTooltip,
+} from '@sim/emcn'
+import { ArrowRight, ChevronDown, CircleInfo } from '@sim/emcn/icons'
 import {
   AnthropicIcon,
   AzureIcon,
@@ -91,6 +103,7 @@ const PROVIDER_ICONS: Readonly<Record<string, ComponentType<{ className?: string
 
 interface UsageConsumerRowProps {
   row: OrganizationUsageBreakdownRow
+  info?: string
   /** Member rows lead with the member's avatar where other rows show a provider mark. */
   isMember: boolean
   /** BYOK rows carry no cost, so tokens are the only usage they can show. */
@@ -124,12 +137,46 @@ const TRAILING_SLOT_CLASSES = {
  */
 export const USAGE_ROW_CLASSES = 'flex w-full items-center gap-2.5 rounded-lg p-2 text-left'
 
+interface UsageInfoProps {
+  label: string
+  info: string
+}
+
+function UsageInfo({ label, info }: UsageInfoProps) {
+  const [open, setOpen] = useState(false)
+  const tooltipId = useId()
+  const tooltip = useFloatingTooltip(() => !open, { revalidateKey: open })
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='quiet'
+          size='icon'
+          aria-label={label}
+          aria-describedby={!open && tooltip.state.visible ? tooltipId : undefined}
+          {...tooltip.handlers}
+        >
+          <CircleInfo className='size-[14px]' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent appearance='tooltip' aria-label={label}>
+        {info}
+      </PopoverContent>
+      {!open && (
+        <FloatingTooltip id={tooltipId} role='tooltip' label={info} state={tooltip.state} />
+      )}
+    </Popover>
+  )
+}
+
 /**
  * A tabular row, not `SettingsResourceRow` — tabular columns are the sanctioned
  * exception in `sim-settings-pages.md`, alongside billing invoices and credit usage.
  */
 function UsageConsumerRow({
   row,
+  info,
   isMember,
   showTokensOnly,
   onSelect,
@@ -158,7 +205,14 @@ function UsageConsumerRow({
       ) : (
         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='flex min-w-0 flex-1 items-center gap-1'>
+        <OverflowText
+          label={row.label}
+          className='text-[var(--text-body)] text-sm'
+          focusTarget={onSelect ? 'nearest-interactive' : undefined}
+        />
+        {info && <UsageInfo label={`About ${row.label.toLowerCase()}`} info={info} />}
+      </div>
       <div
         className='h-[4px] w-[64px] shrink-0 overflow-hidden rounded-full bg-[var(--border)]'
         aria-hidden='true'
@@ -243,9 +297,14 @@ export function UsageConsumers({
         <UsageConsumerRow
           key={`${dimension}-${row.id}`}
           row={row}
+          info={
+            dimension === 'workspace' && !row.id
+              ? 'Usage without a workspace link, including organization-level activity and permanently deleted workspaces.'
+              : undefined
+          }
           isMember={dimension === 'member'}
           showTokensOnly={showTokensOnly}
-          {...(onExpandOther && trailingSlot ? { reservedTrailing: trailingSlot } : {})}
+          {...(trailingSlot ? { reservedTrailing: trailingSlot } : {})}
           {...(onSelectRow && row.id ? { onSelect: onSelectRow } : {})}
           {...(rowActions && row.id ? { actions: rowActions(row) } : {})}
         />
diff --git a/apps/sim/ee/organization-usage/components/usage-heatmap.tsx b/apps/sim/ee/organization-usage/components/usage-heatmap.tsx
new file mode 100644
index 00000000000..4ab103be505
--- /dev/null
+++ b/apps/sim/ee/organization-usage/components/usage-heatmap.tsx
@@ -0,0 +1,182 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import { cn, scrollFadeAttributes, scrollFadeXClass, Tooltip, useScrollEdges } from '@sim/emcn'
+import type { OrganizationUsageCalendar } from '@/lib/api/contracts/organization-usage'
+import { formatCreditsLabel } from '@/lib/billing/credits/conversion'
+import { USAGE_PALETTE_CLASS } from '@/ee/organization-usage/constants'
+
+const LEVEL_CLASSES = [
+  'bg-[var(--surface-active)]',
+  'bg-[color-mix(in_srgb,var(--usage-workflow)_25%,var(--surface-2))]',
+  'bg-[color-mix(in_srgb,var(--usage-workflow)_50%,var(--surface-2))]',
+  'bg-[color-mix(in_srgb,var(--usage-workflow)_75%,var(--surface-2))]',
+  'bg-[var(--usage-workflow)]',
+] as const
+const WEEKDAY_LABELS = ['Mon', '', 'Wed', '', 'Fri', '', 'Sun'] as const
+const ARROW_OFFSETS: Record<string, number> = {
+  ArrowLeft: -7,
+  ArrowRight: 7,
+  ArrowUp: -1,
+  ArrowDown: 1,
+}
+const DAY_FORMAT = new Intl.DateTimeFormat('en-US', {
+  timeZone: 'UTC',
+  weekday: 'long',
+  month: 'long',
+  day: 'numeric',
+  year: 'numeric',
+})
+const MONTH_FORMAT = new Intl.DateTimeFormat('en-US', { timeZone: 'UTC', month: 'short' })
+
+interface UsageHeatmapProps {
+  days: OrganizationUsageCalendar['days']
+}
+
+function formatDayUsage(day: OrganizationUsageCalendar['days'][number]) {
+  return `${formatCreditsLabel(day.credits)} on ${DAY_FORMAT.format(new Date(`${day.date}T00:00:00Z`))}`
+}
+
+/** Calendar dates stay in UTC for layout; they already describe the viewer's local days. */
+export function UsageHeatmap({ days }: UsageHeatmapProps) {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const gridRef = useRef<HTMLDivElement>(null)
+  const edges = useScrollEdges(scrollRef, { axis: 'x' })
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null)
+  const [selectedDate, setSelectedDate] = useState<string | null>(null)
+  const selectedDay = days.find((day) => day.date === selectedDate)
+  const first = days[0]
+  if (!first) return null
+  const firstDate = new Date(`${first.date}T00:00:00Z`)
+  const offset = (firstDate.getUTCDay() + 6) % 7
+  const weeks = Math.ceil((offset + days.length) / 7)
+  const peak = Math.max(...days.map((day) => day.credits), 1)
+  const total = days.reduce((sum, day) => sum + day.credits, 0)
+  const months = days.flatMap((day, index) => {
+    const date = new Date(`${day.date}T00:00:00Z`)
+    if (date.getUTCDate() !== 1) return []
+    const column = Math.floor((index + offset) / 7)
+    if (column > weeks - 3) return []
+    return [{ date: day.date, column, label: MONTH_FORMAT.format(date) }]
+  })
+
+  return (
+    <div className={cn('flex min-w-0 flex-col gap-3', USAGE_PALETTE_CLASS)}>
+      <div
+        ref={scrollRef}
+        className={cn('overflow-x-auto pb-1', scrollFadeXClass)}
+        {...scrollFadeAttributes(edges)}
+      >
+        <div className='min-w-[660px] max-w-[860px] p-1'>
+          <div
+            className='mb-2 ml-8 grid gap-[3px] text-[var(--text-muted)] text-small'
+            style={{ gridTemplateColumns: `repeat(${weeks}, minmax(0, 1fr))` }}
+            aria-hidden='true'
+          >
+            {months.map((month) => (
+              <span key={month.date} style={{ gridColumn: `${month.column + 1} / span 3` }}>
+                {month.label}
+              </span>
+            ))}
+          </div>
+          <div className='relative'>
+            <div
+              className='absolute inset-y-0 left-0 grid w-6 grid-rows-7 gap-[3px] text-[var(--text-muted)] text-small'
+              aria-hidden='true'
+            >
+              {WEEKDAY_LABELS.map((label, index) => (
+                <span key={index} className='flex items-center'>
+                  {label}
+                </span>
+              ))}
+            </div>
+            <div
+              ref={gridRef}
+              role='group'
+              aria-label='Daily credit usage. Use arrow keys to move between days, Home for the first day, or End for today.'
+              className='ml-8 grid gap-[3px]'
+              style={{ gridTemplateColumns: `repeat(${weeks}, minmax(0, 1fr))` }}
+            >
+              {days.map((day, index) => {
+                const position = index + offset
+                const level =
+                  day.credits === 0 ? 0 : Math.min(4, Math.ceil(Math.sqrt(day.credits / peak) * 4))
+                const label = formatDayUsage(day)
+                return (
+                  <Tooltip.Root key={day.date}>
+                    <Tooltip.Trigger asChild>
+                      <button
+                        type='button'
+                        aria-label={label}
+                        aria-pressed={day.date === selectedDate}
+                        data-day-index={index}
+                        tabIndex={index === (focusedIndex ?? days.length - 1) ? 0 : -1}
+                        className={cn(
+                          'aspect-square rounded-[3px] outline-offset-2 hover:outline hover:outline-1 hover:outline-[var(--text-tertiary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)]',
+                          LEVEL_CLASSES[level],
+                          day.date === selectedDate &&
+                            'outline outline-2 outline-[var(--text-primary)]'
+                        )}
+                        style={{
+                          gridColumn: Math.floor(position / 7) + 1,
+                          gridRow: (position % 7) + 1,
+                        }}
+                        onClick={() =>
+                          setSelectedDate((current) => (current === day.date ? null : day.date))
+                        }
+                        onFocus={() => setFocusedIndex(index)}
+                        onKeyDown={(event) => {
+                          if (event.key === 'Escape' && selectedDate) {
+                            event.preventDefault()
+                            setSelectedDate(null)
+                            return
+                          }
+                          const delta = ARROW_OFFSETS[event.key]
+                          const next =
+                            event.key === 'Home'
+                              ? 0
+                              : event.key === 'End'
+                                ? days.length - 1
+                                : delta === undefined
+                                  ? null
+                                  : Math.max(0, Math.min(days.length - 1, index + delta))
+                          if (next === null) return
+                          event.preventDefault()
+                          gridRef.current
+                            ?.querySelector<HTMLButtonElement>(`[data-day-index="${next}"]`)
+                            ?.focus()
+                        }}
+                      />
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>{label}</Tooltip.Content>
+                  </Tooltip.Root>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='flex flex-wrap items-center justify-between gap-2 text-[var(--text-muted)] text-small'>
+        <span aria-live='polite'>
+          {selectedDay
+            ? formatDayUsage(selectedDay)
+            : `${formatCreditsLabel(total)} in the last 365 days`}
+        </span>
+        <div
+          className='flex items-center gap-1'
+          aria-label='Color intensity: less to more daily usage'
+        >
+          <span className='mr-1'>Less</span>
+          {LEVEL_CLASSES.map((className) => (
+            <span
+              key={className}
+              className={cn('size-3 rounded-[3px]', className)}
+              aria-hidden='true'
+            />
+          ))}
+          <span className='ml-1'>More</span>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/ee/organization-usage/components/usage-monitoring.tsx b/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
index 457fc64fe21..d913a4cf14d 100644
--- a/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-monitoring.tsx
@@ -27,6 +27,7 @@ import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/componen
 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 { UsageCalendar } from '@/ee/organization-usage/components/usage-calendar'
 import { UsageConsumers } from '@/ee/organization-usage/components/usage-consumers'
 import { UsageCredits } from '@/ee/organization-usage/components/usage-credits'
 import { UsageTopCards } from '@/ee/organization-usage/components/usage-top-cards'
@@ -252,6 +253,11 @@ export function UsageMonitoring({
             onRetry={() => void workspaceOverview.refetch()}
           />
         </SettingsSection>
+        <UsageCalendar
+          organizationId={organizationId}
+          timezone={window.timezone}
+          workspaceId={workspace}
+        />
         <UsageSection dimension='workflow' unit='credits'>
           <UsageConsumers
             dimension='workflow'
@@ -346,6 +352,7 @@ export function UsageMonitoring({
                 onRetry={() => void overview.refetch()}
               />
             </SettingsSection>
+            <UsageCalendar organizationId={organizationId} timezone={window.timezone} />
             <UsageTopCards
               organizationId={organizationId}
               window={window}
diff --git a/apps/sim/ee/organization-usage/constants.ts b/apps/sim/ee/organization-usage/constants.ts
index c28fff3003e..68cec52ea72 100644
--- a/apps/sim/ee/organization-usage/constants.ts
+++ b/apps/sim/ee/organization-usage/constants.ts
@@ -97,13 +97,11 @@ 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.
+ * dot, and its tooltip swatch resolve to one color. Muted hues in light mode and
+ * soft pastels in dark mode keep dense daily series legible.
  */
 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]'
+  '[--usage-workflow:#6476c7] [--usage-chat:#268967] [--usage-enrichment:#b66d99] [--usage-knowledge:#268f97] [--usage-agent:#8d68c9] [--usage-other:#77848f] [--usage-failed:#c46b6b] dark:[--usage-workflow:#a3adf7] dark:[--usage-chat:#7bdcb5] dark:[--usage-enrichment:#e9a0cc] dark:[--usage-knowledge:#6bcbd0] dark:[--usage-agent:#bd9aee] dark:[--usage-other:#8c9ba9] dark:[--usage-failed:#e69494]'
 
 /** Sim Chat's color, shared by its credit layer and the chat-runs chart. */
 export const USAGE_CHAT_COLOR = 'var(--usage-chat)'
@@ -116,13 +114,11 @@ export const USAGE_OTHER_COLOR = 'var(--usage-other)'
  * 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 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.
+ * Five hues plus a neutral remainder. Legend labels and hover isolation identify
+ * each source without relying on color alone.
  */
 export const USAGE_SOURCE_CATEGORIES = [
-  { id: 'workflow', label: 'Workflows', color: 'var(--brand-blue)' },
+  { id: 'workflow', label: 'Workflows', color: 'var(--usage-workflow)' },
   { id: 'chat', label: 'Sim Chat', color: USAGE_CHAT_COLOR },
   { id: 'enrichment', label: 'Enrichment', color: 'var(--usage-enrichment)' },
   { id: 'knowledge', label: 'Knowledge Base', color: 'var(--usage-knowledge)' },
diff --git a/apps/sim/hooks/queries/organization-usage.ts b/apps/sim/hooks/queries/organization-usage.ts
index 6ba644be064..68a96268065 100644
--- a/apps/sim/hooks/queries/organization-usage.ts
+++ b/apps/sim/hooks/queries/organization-usage.ts
@@ -4,10 +4,12 @@ import { hashKey, keepPreviousData, useInfiniteQuery, useQuery } from '@tanstack
 import { requestJson } from '@/lib/api/client/request'
 import {
   getOrganizationUsageBreakdownContract,
+  getOrganizationUsageCalendarContract,
   getOrganizationUsageOverviewContract,
   listOrganizationUsageEventsContract,
   ORGANIZATION_USAGE_BREAKDOWN_DEFAULT_LIMIT,
   type OrganizationUsageBreakdown,
+  type OrganizationUsageCalendar,
   type OrganizationUsageEventPage,
   type OrganizationUsageOverview,
   type UsageBreakdownDimension,
@@ -23,6 +25,7 @@ export const ORGANIZATION_USAGE_OVERVIEW_STALE_TIME = 60 * 1000
  * some dimensions heap-scan the ledger.
  */
 export const ORGANIZATION_USAGE_BREAKDOWN_STALE_TIME = 5 * 60 * 1000
+const ORGANIZATION_USAGE_CALENDAR_STALE_TIME = 5 * 60 * 1000
 export const ORGANIZATION_USAGE_EVENTS_STALE_TIME = 30 * 1000
 
 const EVENTS_PAGE_SIZE = 50
@@ -83,6 +86,23 @@ export function useOrganizationUsageOverview(
   })
 }
 
+export function useOrganizationUsageCalendar(
+  organizationId: string,
+  timezone: string,
+  workspaceId?: string
+) {
+  return useQuery({
+    queryKey: organizationUsageKeys.calendar(organizationId, timezone, workspaceId),
+    queryFn: ({ signal }): Promise<OrganizationUsageCalendar> =>
+      requestJson(getOrganizationUsageCalendarContract, {
+        params: { id: organizationId },
+        query: { timezone, workspaceId },
+        signal,
+      }),
+    staleTime: ORGANIZATION_USAGE_CALENDAR_STALE_TIME,
+  })
+}
+
 interface UseBreakdownOptions {
   limit?: number
   /** The panel passes the selected tab, so only the visible list is ever fetched. */
diff --git a/apps/sim/hooks/queries/utils/organization-usage-keys.ts b/apps/sim/hooks/queries/utils/organization-usage-keys.ts
index 91499b3dc62..fcac09ebb94 100644
--- a/apps/sim/hooks/queries/utils/organization-usage-keys.ts
+++ b/apps/sim/hooks/queries/utils/organization-usage-keys.ts
@@ -32,6 +32,10 @@ export const organizationUsageKeys = {
    */
   overview: (organizationId: string, window: OrganizationUsageWindowKey, workspaceId?: string) =>
     [...organizationUsageKeys.overviews(organizationId), workspaceId ?? '', window] as const,
+  calendars: (organizationId: string) =>
+    [...organizationUsageKeys.all(organizationId), 'calendar'] as const,
+  calendar: (organizationId: string, timezone: string, workspaceId?: string) =>
+    [...organizationUsageKeys.calendars(organizationId), workspaceId ?? '', timezone] as const,
   breakdowns: (organizationId: string, window: OrganizationUsageWindowKey) =>
     [...organizationUsageKeys.all(organizationId), 'breakdown', window] as const,
   breakdown: (
diff --git a/apps/sim/lib/api/contracts/organization-usage.ts b/apps/sim/lib/api/contracts/organization-usage.ts
index 5b4026eb5f2..4d5eb17c48a 100644
--- a/apps/sim/lib/api/contracts/organization-usage.ts
+++ b/apps/sim/lib/api/contracts/organization-usage.ts
@@ -308,6 +308,23 @@ export const organizationUsageEventsResponseSchema = z.object({
 })
 export type OrganizationUsageEventPage = z.output<typeof organizationUsageEventsResponseSchema>
 
+const organizationUsageCalendarResponseSchema = z.object({
+  days: z
+    .array(z.object({ date: z.iso.date(), credits: z.number().int().nonnegative() }))
+    .length(365),
+})
+export type OrganizationUsageCalendar = z.output<typeof organizationUsageCalendarResponseSchema>
+
+export const getOrganizationUsageCalendarContract = defineRouteContract({
+  method: 'GET',
+  path: '/api/organizations/[id]/usage/calendar',
+  params: z.object({ id: organizationIdSchema }),
+  query: organizationUsageWindowQuerySchema
+    .pick({ timezone: true })
+    .extend(usageWorkspaceScopeShape),
+  response: { mode: 'json', schema: organizationUsageCalendarResponseSchema },
+})
+
 export const getOrganizationUsageOverviewContract = defineRouteContract({
   method: 'GET',
   path: '/api/organizations/[id]/usage/overview',
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 be84912da45..a1fe99c2a12 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
@@ -154,21 +154,13 @@ export async function buildUsageBreakdown({
     : new Map<string, UsageEntity>()
 
   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.
+    // Retain the id if its name is unavailable, including stale cached attribution.
     return entities.get(key)?.name ?? key
   }
 
diff --git a/apps/sim/lib/billing/application/organization-usage/get-organization-usage-calendar.ts b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-calendar.ts
new file mode 100644
index 00000000000..082033f2c76
--- /dev/null
+++ b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-calendar.ts
@@ -0,0 +1,43 @@
+import { defineAuthorizedOrganizationUsageUseCase } from '@/lib/billing/application/organization-usage/authorized-organization-usage-use-case'
+import { organizationUsageOperations } from '@/lib/billing/application/organization-usage/operations'
+import {
+  resolveUsageCalendarWindow,
+  usageBucketTimestamps,
+} from '@/lib/billing/core/usage-analytics'
+import { readUsageDays } from '@/lib/billing/core/usage-analytics-queries'
+import { apportionCredits } from '@/lib/billing/credits/conversion'
+
+interface OrganizationUsageCalendarInput {
+  organizationId: string
+  timezone: string
+  workspaceId?: string
+}
+
+/** Daily credits for a bounded year, independent of the dashboard's selected period. */
+export const getOrganizationUsageCalendar = defineAuthorizedOrganizationUsageUseCase({
+  operation: organizationUsageOperations.readCalendar,
+  organizationId: (input: OrganizationUsageCalendarInput) => input.organizationId,
+  async execute({ input, context }) {
+    const window = resolveUsageCalendarWindow(input.timezone)
+    const days = usageBucketTimestamps(window, 'day', input.timezone).map((timestamp) =>
+      timestamp.slice(0, 10)
+    )
+    const dollars = new Map(days.map((day) => [day, 0]))
+    const segments = await readUsageDays({
+      entity: context.billingEntity,
+      window,
+      timezone: input.timezone,
+      workspaceId: input.workspaceId,
+      dimension: 'source',
+    })
+    for (const [day, rows] of segments) {
+      const current = dollars.get(day)
+      if (current === undefined) continue
+      dollars.set(day, current + rows.reduce((sum, row) => sum + row.cost, 0))
+    }
+    const credits = apportionCredits(
+      days.map((day) => ({ key: day, dollars: dollars.get(day) ?? 0 }))
+    )
+    return { days: days.map((date) => ({ date, credits: credits[date] ?? 0 })) }
+  },
+})
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
index ad13b3dadb7..70842552e1c 100644
--- 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
@@ -30,6 +30,7 @@ vi.mock('@/lib/billing/core/usage-analytics-queries', () => ({
 }))
 vi.mock('@/providers/models', () => providersModelsMock)
 
+import { getOrganizationUsageCalendar } from '@/lib/billing/application/organization-usage/get-organization-usage-calendar'
 import { getOrganizationUsageOverview } from '@/lib/billing/application/organization-usage/get-organization-usage-overview'
 
 const mocks = {
@@ -97,6 +98,22 @@ describe('getOrganizationUsageOverview', () => {
     setEnvFlags({ isBillingEnabled: false, isHosted: false })
   })
 
+  it('sums repeated daily segments before rounding and retains zero-usage calendar days', async () => {
+    mocks.readUsageDays.mockResolvedValue([
+      [day, [{ key: 'workflow', cost: 0.0017, events: 1 }]],
+      [day, [{ key: 'workflow', cost: 0.0017, events: 1 }]],
+      [day, [{ key: 'copilot', cost: 0.0017, events: 1 }]],
+    ])
+    const result = await getOrganizationUsageCalendar.execute({
+      principal: session,
+      input: { organizationId: 'org-1', timezone: 'UTC' },
+    })
+    expect(result.days).toHaveLength(365)
+    expect(result.days.find((entry) => entry.date === day)?.credits).toBe(1)
+    expect(result.days.reduce((sum, entry) => sum + entry.credits, 0)).toBe(1)
+    expect(result.days.filter((entry) => entry.credits === 0)).toHaveLength(364)
+  })
+
   it('reads names only for the kept rows, however large a tie at the cutoff', async () => {
     mocks.readUsageGroups.mockResolvedValue(
       Array.from({ length: 12 }, (_, index) => ({
diff --git a/apps/sim/lib/billing/application/organization-usage/operations.ts b/apps/sim/lib/billing/application/organization-usage/operations.ts
index cb089dd3bb1..e3bb9e686ed 100644
--- a/apps/sim/lib/billing/application/organization-usage/operations.ts
+++ b/apps/sim/lib/billing/application/organization-usage/operations.ts
@@ -66,6 +66,13 @@ export const organizationUsageOperations = {
     capability: 'none',
     ...BASE,
   }),
+  /** permission-group-exempt: daily credit history requires organization billing-admin authority. */
+  readCalendar: defineOrganizationOperation({
+    id: 'organization_usage.calendar.read',
+    contentDelivery: 'none',
+    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/usage-analytics.test.ts b/apps/sim/lib/billing/core/usage-analytics.test.ts
index a332770434b..b46080b8170 100644
--- a/apps/sim/lib/billing/core/usage-analytics.test.ts
+++ b/apps/sim/lib/billing/core/usage-analytics.test.ts
@@ -8,10 +8,12 @@ import {
   resolveComparisonWindow,
   resolveUsageAnalyticsWindow,
   resolveUsageBucket,
+  resolveUsageCalendarWindow,
   sumUsageDays,
   USAGE_SETTLE_MS,
   UsageWindowRangeInvertedError,
   UsageWindowRangeTooLargeError,
+  usageBucketTimestamps,
   usageWindowLedgerFilter,
   usageWindowSegments,
 } from '@/lib/billing/core/usage-analytics'
@@ -658,3 +660,21 @@ describe('resolveComparisonWindow', () => {
     })
   })
 })
+
+describe('resolveUsageCalendarWindow', () => {
+  it.each([
+    ['2026-03-09T06:30:00.000Z', 'America/Los_Angeles', '2025-03-09T08:00:00.000Z', '2026-03-08'],
+    ['2024-03-01T00:00:00.000Z', 'UTC', '2023-03-03T00:00:00.000Z', '2024-03-01'],
+    ['2026-01-01T11:00:00.000Z', 'Pacific/Kiritimati', '2025-01-02T10:00:00.000Z', '2026-01-02'],
+  ])(
+    'keeps 365 calendar days across DST, leap years and midnight (%s, %s)',
+    (instant, timezone, start, lastDay) => {
+      const window = resolveUsageCalendarWindow(timezone, new Date(instant))
+      const days = usageBucketTimestamps(window, 'day', timezone)
+      expect(window.from.toISOString()).toBe(start)
+      expect(days).toHaveLength(365)
+      expect(new Set(days).size).toBe(365)
+      expect(days[364]).toBe(`${lastDay}T00:00:00`)
+    }
+  )
+})
diff --git a/apps/sim/lib/billing/core/usage-analytics.ts b/apps/sim/lib/billing/core/usage-analytics.ts
index 49c6b4417aa..09f3ab8d4b7 100644
--- a/apps/sim/lib/billing/core/usage-analytics.ts
+++ b/apps/sim/lib/billing/core/usage-analytics.ts
@@ -429,6 +429,21 @@ function civilKey(date: Date): string {
   return date.toISOString().slice(0, 10)
 }
 
+/** A bounded year of calendar days, including today's partial day in the viewer's timezone. */
+export function resolveUsageCalendarWindow(
+  timezone: string,
+  now = new Date()
+): Extract<UsageAnalyticsWindow, { kind: 'range' }> {
+  const start = civilDate(localCalendarDate(now, timezone))
+  start.setUTCDate(start.getUTCDate() - 364)
+  return {
+    kind: 'range',
+    from: zonedWallClockToUtc(`${civilKey(start)}T00:00`, timezone),
+    // Include the current instant so today's empty cell survives a request exactly at midnight.
+    to: new Date(now.getTime() + 1),
+  }
+}
+
 /**
  * Mirrors Postgres `date_trunc(bucket, …)`: an ISO week starts Monday, a month on
  * the 1st. The series keys have to land on the same boundaries the SQL emitted or
@@ -710,14 +725,12 @@ export function foldUsageBreakdown(
 /**
  * What a null grouping key means, per dimension.
  *
- * A single "Unattributed" label was wrong in both directions: on Workspaces it means
- * usage that belongs to no workspace, and on Workflows it means usage that never came
- * from a workflow — which is most of an organization's spend, and reading that as an
- * attribution failure is what made the workflow list useless.
+ * Workspace attribution is absent for organization-level usage and is cleared when
+ * a workspace is permanently deleted. The null bucket cannot distinguish the two.
  */
 export const USAGE_NULL_KEY_LABELS: Record<UsageBreakdownDimension, string> = {
   member: 'Unknown member',
-  workspace: 'No workspace',
+  workspace: 'Unassigned usage',
   // Unreachable: the workflow dimension filters null ids out entirely.
   workflow: 'Unknown workflow',
   model: 'Unknown model',
diff --git a/packages/emcn/src/components/charts/bar-chart.tsx b/packages/emcn/src/components/charts/bar-chart.tsx
index 9f48f67c92a..e5eff370acf 100644
--- a/packages/emcn/src/components/charts/bar-chart.tsx
+++ b/packages/emcn/src/components/charts/bar-chart.tsx
@@ -4,13 +4,11 @@ import { memo, useId, useMemo, useState } from 'react'
 import {
   CHART_AXIS_LABEL_GAP,
   CHART_DEFAULT_HEIGHT,
-  CHART_GRID_FRACTIONS,
   CHART_TICK_FILL,
   CHART_TICK_FONT_SIZE,
   ChartDataTable,
   ChartTooltip,
   ChartTooltipRow,
-  chartPlotBand,
   cn,
   estimateTooltipHeight,
   estimateTooltipWidth,
@@ -20,11 +18,11 @@ import {
   formatChartTimestamp,
   formatTimeTick,
   positionChartTooltip,
+  resolveBarTickValues,
   resolveChartPadding,
   resolveSpanMs,
   resolveTimeTickIndices,
   useChartWidth,
-  useIsDarkTheme,
 } from '@sim/emcn'
 
 interface BarChartPoint {
@@ -105,16 +103,10 @@ function BarChartComponent(props: BarChartProps) {
   const uniqueId = useId().replace(/:/g, '')
   const [containerRef, containerWidth] = useChartWidth()
   const width = containerWidth ?? 0
-  const { yMin, yMax } = chartPlotBand(height)
-  const isDark = useIsDarkTheme()
   const [hoverPos, setHoverPos] = useState<{ x: number; y: number } | null>(null)
 
   const hasExternalWrapper = !label
 
-  /** Tracks need stronger opacity on light backgrounds to remain visible. */
-  const trackOpacity = isDark ? 0.12 : 0.3
-  const trackHoverOpacity = isDark ? 0.22 : 0.5
-
   const layers = useMemo<BarChartSeries[]>(
     () =>
       props.series ?? [
@@ -132,13 +124,12 @@ function BarChartComponent(props: BarChartProps) {
     [buckets, layers]
   )
 
-  const maxValue = useMemo(() => {
-    const peak = Math.max(...totals, 0)
-    return peak <= 0 ? 1 : unit ? peak * 1.1 : Math.ceil(peak * 1.1)
-  }, [totals, unit])
-
-  const maximumLabel = unit ? formatBarValue(maxValue, unit) : formatChartCompactNumber(maxValue)
-  const padding = resolveChartPadding([maximumLabel, '0'])
+  const tickValues = resolveBarTickValues(Math.max(...totals, 0))
+  const maxValue = tickValues[tickValues.length - 1]
+  const tickLabels = tickValues.map((value) =>
+    unit ? formatBarValue(value, unit) : formatChartCompactNumber(value)
+  )
+  const padding = resolveChartPadding(tickLabels)
   const chartWidth = width - padding.left - padding.right
   const chartHeight = height - padding.top - padding.bottom
 
@@ -151,21 +142,14 @@ function BarChartComponent(props: BarChartProps) {
       ? null
       : Math.max(0, Math.min(buckets.length - 1, Math.floor((hoverPos.x - padding.left) / slot)))
 
-  /**
-   * 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(
     () =>
       buckets.map((point, index) => {
         const x = padding.left + slot * index + (slot - barWidth) / 2
         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
+        const columnHeight = (total / maxValue) * chartHeight
+        const top = baseline - columnHeight
         let cursor = baseline
         const segments = layers.flatMap((layer) => {
           const value = Math.max(0, layer.data[index]?.value ?? 0)
@@ -186,10 +170,7 @@ function BarChartComponent(props: BarChartProps) {
       chartHeight,
       height,
       padding.left,
-      padding.top,
       padding.bottom,
-      yMin,
-      yMax,
     ]
   )
 
@@ -268,57 +249,32 @@ function BarChartComponent(props: BarChartProps) {
           }}
           onMouseLeave={() => setHoverPos(null)}
         >
-          {!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}
+          {tickValues.map((value, index) => {
+            const y = height - padding.bottom - (value / maxValue) * chartHeight
+            return (
+              <g key={value}>
+                <line
+                  x1={padding.left}
+                  y1={y}
+                  x2={width - padding.right}
+                  y2={y}
+                  stroke='var(--border)'
+                  strokeOpacity={value === 0 ? 0.5 : 0.35}
+                  strokeDasharray={value === 0 ? undefined : '2 4'}
                 />
-              </linearGradient>
-            </defs>
-          )}
-
-          <line
-            x1={padding.left}
-            y1={padding.top}
-            x2={padding.left}
-            y2={height - padding.bottom}
-            stroke='var(--border)'
-            strokeWidth='1'
-          />
-
-          {CHART_GRID_FRACTIONS.map((fraction) => (
-            <line
-              key={`${uniqueId}-grid-${fraction}`}
-              x1={padding.left}
-              y1={padding.top + chartHeight * fraction}
-              x2={width - padding.right}
-              y2={padding.top + chartHeight * fraction}
-              stroke='var(--border)'
-              strokeOpacity='0.35'
-              strokeWidth='1'
-            />
-          ))}
-
-          {/** Tracks preserve empty buckets and hover targets; keep them outside the screen blend. */}
-          <g>
-            {columns.map((column, index) => (
-              <rect
-                key={`${uniqueId}-track-${column.point.timestamp}`}
-                x={column.x}
-                y={padding.top}
-                width={barWidth}
-                height={chartHeight}
-                rx='2'
-                fill='var(--border)'
-                fillOpacity={hoverIndex === index ? trackHoverOpacity : trackOpacity}
-                className='transition-[fill-opacity] duration-150 motion-reduce:transition-none'
-              />
-            ))}
-          </g>
+                <text
+                  x={padding.left - CHART_AXIS_LABEL_GAP}
+                  y={y}
+                  dominantBaseline='middle'
+                  textAnchor='end'
+                  fontSize={CHART_TICK_FONT_SIZE}
+                  fill={CHART_TICK_FILL}
+                >
+                  {tickLabels[index]}
+                </text>
+              </g>
+            )
+          })}
 
           {/**
            * Each column is one bar: its segments are square and clipped to a single
@@ -344,7 +300,7 @@ function BarChartComponent(props: BarChartProps) {
               )
             )}
           </defs>
-          <g style={{ mixBlendMode: isDark && !isStacked ? 'screen' : 'normal' }}>
+          <g>
             {columns.map((column, index) => (
               <g
                 key={`${uniqueId}-bar-${column.point.timestamp}`}
@@ -357,7 +313,7 @@ function BarChartComponent(props: BarChartProps) {
                     y={segment.y}
                     width={barWidth}
                     height={segment.height + 0.5}
-                    fill={isStacked ? segment.layer.color : `url(#bar-${uniqueId})`}
+                    fill={segment.layer.color}
                     className='transition-opacity duration-150 motion-reduce:transition-none'
                     opacity={segmentOpacity(segment.layer.id, index)}
                   />
@@ -385,36 +341,6 @@ function BarChartComponent(props: BarChartProps) {
               </text>
             )
           })}
-
-          <text
-            x={padding.left - CHART_AXIS_LABEL_GAP}
-            y={padding.top}
-            textAnchor='end'
-            fontSize={CHART_TICK_FONT_SIZE}
-            fill={CHART_TICK_FILL}
-          >
-            {/** Same formatter the tooltip uses, or the axis and the hover disagree
-                about what the numbers mean on any non-`credits` unit. */}
-            {maximumLabel}
-          </text>
-          <text
-            x={padding.left - CHART_AXIS_LABEL_GAP}
-            y={height - padding.bottom}
-            textAnchor='end'
-            fontSize={CHART_TICK_FONT_SIZE}
-            fill={CHART_TICK_FILL}
-          >
-            0
-          </text>
-
-          <line
-            x1={padding.left}
-            y1={height - padding.bottom}
-            x2={width - padding.right}
-            y2={height - padding.bottom}
-            stroke='var(--border)'
-            strokeWidth='1'
-          />
         </svg>
 
         {hoverIndex !== null &&
diff --git a/packages/emcn/src/components/charts/geometry.test.ts b/packages/emcn/src/components/charts/geometry.test.ts
index c216cd249d7..827f33cf69b 100644
--- a/packages/emcn/src/components/charts/geometry.test.ts
+++ b/packages/emcn/src/components/charts/geometry.test.ts
@@ -1,6 +1,31 @@
-import { formatTimeTick, resolveSpanMs, resolveTimeTickIndices } from '@sim/emcn'
+import {
+  formatTimeTick,
+  resolveBarTickValues,
+  resolveSpanMs,
+  resolveTimeTickIndices,
+} from '@sim/emcn'
 import { describe, expect, it } from 'vitest'
 
+describe('resolveBarTickValues', () => {
+  it.each([
+    [620_000, [0, 200_000, 400_000, 600_000, 800_000]],
+    [1, [0, 1, 2]],
+    [0.6, [0, 0.2, 0.4, 0.6, 0.8]],
+  ])('keeps readable ticks and headroom above a peak of %s', (peak, expected) => {
+    expect(resolveBarTickValues(peak)).toEqual(expected)
+  })
+
+  it.each([0, -1, Number.NaN, Number.POSITIVE_INFINITY])(
+    'provides a finite, nonzero scale for an empty or invalid peak of %s',
+    (peak) => {
+      const ticks = resolveBarTickValues(peak)
+      expect(ticks[0]).toBe(0)
+      expect(ticks[ticks.length - 1]).toBeGreaterThan(0)
+      expect(ticks.every(Number.isFinite)).toBe(true)
+    }
+  )
+})
+
 describe('resolveTimeTickIndices', () => {
   it('dedupes the collisions rounding produces on a short series', () => {
     /** 2 points across a wide chart wants 8 ticks but only has indices 0 and 1. */
diff --git a/packages/emcn/src/components/charts/geometry.ts b/packages/emcn/src/components/charts/geometry.ts
index fab6a5cda76..5a4595f1bc8 100644
--- a/packages/emcn/src/components/charts/geometry.ts
+++ b/packages/emcn/src/components/charts/geometry.ts
@@ -39,6 +39,18 @@ export function resolveChartPadding(yAxisLabels: readonly string[]): ChartPaddin
   }
 }
 
+/** Round a nonnegative bar scale to readable intervals, leaving headroom above its peak. */
+export function resolveBarTickValues(peak: number): number[] {
+  if (!Number.isFinite(peak) || peak <= 0) return [0, 1, 2, 3, 4]
+  const ceiling = peak * 1.08
+  const roughStep = ceiling / 4
+  const magnitude = 10 ** Math.floor(Math.log10(roughStep))
+  const multiple = [1, 2, 5, 10].find((candidate) => candidate * magnitude >= roughStep) ?? 10
+  const step = Math.max(peak >= 1 ? 1 : 0, multiple * magnitude)
+  const intervals = Math.ceil(ceiling / step)
+  return Array.from({ length: intervals + 1 }, (_, index) => Number((index * step).toPrecision(12)))
+}
+
 /** Vertical clamp for plotted geometry, keeping strokes off the axis rules. */
 export function chartPlotBand(height: number): { yMin: number; yMax: number } {
   const chartHeight = height - CHART_PADDING.top - CHART_PADDING.bottom

From 9236aaafe2e395dadd3739b41fc73dfbef019f99 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Tue, 20 Oct 2026 20:00:50 -0700
Subject: [PATCH 2/2] fix(insights): preserve sub-credit activity in the usage
 heatmap

---
 .../platform/enterprise/usage-tracking.mdx    |  6 ++++--
 .../components/usage-heatmap.tsx              | 12 +++++++-----
 .../lib/api/contracts/organization-usage.ts   |  8 +++++++-
 .../get-organization-usage-calendar.ts        |  8 +++++++-
 .../get-organization-usage-overview.test.ts   | 19 +++++++++++++++++++
 .../emcn/src/components/charts/bar-chart.tsx  |  2 +-
 6 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/apps/docs/content/docs/platform/enterprise/usage-tracking.mdx b/apps/docs/content/docs/platform/enterprise/usage-tracking.mdx
index fba4f443d8f..53f42f47227 100644
--- a/apps/docs/content/docs/platform/enterprise/usage-tracking.mdx
+++ b/apps/docs/content/docs/platform/enterprise/usage-tracking.mdx
@@ -16,7 +16,9 @@ Organization owners and admins open **Settings → Organization → Insights**.
 | **Last 7 days** / **Last 30 days** | Rolling window ending now. |
 | **Custom range** | Selected dates, up to 92 days. |
 
-The period applies to every tab. Daily bars use your browser's timezone, while billing periods begin at a fixed UTC instant. The first and last bars can be partial. Different timezones can split the same total differently across days.
+The period applies to every tab's charts and breakdowns. The **Usage heatmap** below the credit chart in Overview and workspace details always shows the last 365 days, including today's partial day. Hover, select, or use the arrow keys to inspect a day. A positive charge below one displayed credit reads **&lt;1 credit** and remains colored.
+
+Daily bars and heatmap cells use your browser's timezone, while billing periods begin at a fixed UTC instant. The first and last bars can be partial. Different timezones can split the same total differently across days.
 
 Spend is in **credits**, where 1 credit = $0.005; the UI rounds displayed credits. [Logs](/logs-debugging/logging) and Logs API costs are in USD, while Billing and run-resource API amounts use their documented credit units. Check the endpoint contract before comparing amounts. See [cost calculation](/platform/costs).
 
@@ -67,7 +69,7 @@ Each charge has one source. The exact **Agent block** label in Insights refers t
 
 An ordinary Agent block's hosted model calls remain under Workflow. The Workflow base charge applies even without model calls. To assess a workflow using the Sim Chat block, read its Workflow charges and the separately metered Agent block source; neither charge is counted twice.
 
-A hosted-key tool called inside a workflow belongs to Workflow; the same tool called directly belongs to API tool call. Chat panel, API agent, and Inbox charges cannot be separated by source. Dedicated workspace attribution can distinguish them when those surfaces actually name different workspaces. Usage without a workspace appears under **No workspace** and remains part of the organization total.
+A hosted-key tool called inside a workflow belongs to Workflow; the same tool called directly belongs to API tool call. Chat panel, API agent, and Inbox charges cannot be separated by source. Dedicated workspace attribution can distinguish them when those surfaces actually name different workspaces. Usage without a workspace link appears under **Unassigned usage** and remains part of the organization total. This includes organization-level activity and retained charges from permanently deleted workspaces; the row cannot distinguish between them.
 
 ### Reconcile totals
 
diff --git a/apps/sim/ee/organization-usage/components/usage-heatmap.tsx b/apps/sim/ee/organization-usage/components/usage-heatmap.tsx
index 4ab103be505..4a74d9c9843 100644
--- a/apps/sim/ee/organization-usage/components/usage-heatmap.tsx
+++ b/apps/sim/ee/organization-usage/components/usage-heatmap.tsx
@@ -3,7 +3,7 @@
 import { useRef, useState } from 'react'
 import { cn, scrollFadeAttributes, scrollFadeXClass, Tooltip, useScrollEdges } from '@sim/emcn'
 import type { OrganizationUsageCalendar } from '@/lib/api/contracts/organization-usage'
-import { formatCreditsLabel } from '@/lib/billing/credits/conversion'
+import { formatApportionedCreditCost } from '@/lib/billing/credits/conversion'
 import { USAGE_PALETTE_CLASS } from '@/ee/organization-usage/constants'
 
 const LEVEL_CLASSES = [
@@ -34,7 +34,7 @@ interface UsageHeatmapProps {
 }
 
 function formatDayUsage(day: OrganizationUsageCalendar['days'][number]) {
-  return `${formatCreditsLabel(day.credits)} on ${DAY_FORMAT.format(new Date(`${day.date}T00:00:00Z`))}`
+  return `${formatApportionedCreditCost(day.credits, day.hasCost)} on ${DAY_FORMAT.format(new Date(`${day.date}T00:00:00Z`))}`
 }
 
 /** Calendar dates stay in UTC for layout; they already describe the viewer's local days. */
@@ -52,6 +52,7 @@ export function UsageHeatmap({ days }: UsageHeatmapProps) {
   const weeks = Math.ceil((offset + days.length) / 7)
   const peak = Math.max(...days.map((day) => day.credits), 1)
   const total = days.reduce((sum, day) => sum + day.credits, 0)
+  const hasCost = days.some((day) => day.hasCost)
   const months = days.flatMap((day, index) => {
     const date = new Date(`${day.date}T00:00:00Z`)
     if (date.getUTCDate() !== 1) return []
@@ -99,8 +100,9 @@ export function UsageHeatmap({ days }: UsageHeatmapProps) {
             >
               {days.map((day, index) => {
                 const position = index + offset
-                const level =
-                  day.credits === 0 ? 0 : Math.min(4, Math.ceil(Math.sqrt(day.credits / peak) * 4))
+                const level = day.hasCost
+                  ? Math.max(1, Math.min(4, Math.ceil(Math.sqrt(day.credits / peak) * 4)))
+                  : 0
                 const label = formatDayUsage(day)
                 return (
                   <Tooltip.Root key={day.date}>
@@ -160,7 +162,7 @@ export function UsageHeatmap({ days }: UsageHeatmapProps) {
         <span aria-live='polite'>
           {selectedDay
             ? formatDayUsage(selectedDay)
-            : `${formatCreditsLabel(total)} in the last 365 days`}
+            : `${formatApportionedCreditCost(total, hasCost)} in the last 365 days`}
         </span>
         <div
           className='flex items-center gap-1'
diff --git a/apps/sim/lib/api/contracts/organization-usage.ts b/apps/sim/lib/api/contracts/organization-usage.ts
index 4d5eb17c48a..b097aa260c3 100644
--- a/apps/sim/lib/api/contracts/organization-usage.ts
+++ b/apps/sim/lib/api/contracts/organization-usage.ts
@@ -310,7 +310,13 @@ export type OrganizationUsageEventPage = z.output<typeof organizationUsageEvents
 
 const organizationUsageCalendarResponseSchema = z.object({
   days: z
-    .array(z.object({ date: z.iso.date(), credits: z.number().int().nonnegative() }))
+    .array(
+      z.object({
+        date: z.iso.date(),
+        credits: z.number().int().nonnegative(),
+        hasCost: z.boolean(),
+      })
+    )
     .length(365),
 })
 export type OrganizationUsageCalendar = z.output<typeof organizationUsageCalendarResponseSchema>
diff --git a/apps/sim/lib/billing/application/organization-usage/get-organization-usage-calendar.ts b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-calendar.ts
index 082033f2c76..1deef70cac1 100644
--- a/apps/sim/lib/billing/application/organization-usage/get-organization-usage-calendar.ts
+++ b/apps/sim/lib/billing/application/organization-usage/get-organization-usage-calendar.ts
@@ -38,6 +38,12 @@ export const getOrganizationUsageCalendar = defineAuthorizedOrganizationUsageUse
     const credits = apportionCredits(
       days.map((day) => ({ key: day, dollars: dollars.get(day) ?? 0 }))
     )
-    return { days: days.map((date) => ({ date, credits: credits[date] ?? 0 })) }
+    return {
+      days: days.map((date) => ({
+        date,
+        credits: credits[date] ?? 0,
+        hasCost: (dollars.get(date) ?? 0) > 0,
+      })),
+    }
   },
 })
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
index 70842552e1c..dd23e4e04ad 100644
--- 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
@@ -114,6 +114,25 @@ describe('getOrganizationUsageOverview', () => {
     expect(result.days.filter((entry) => entry.credits === 0)).toHaveLength(364)
   })
 
+  it('distinguishes paid calendar days from empty days when credits round to zero', async () => {
+    const previousDay = new Date(NOW.getTime() - 86_400_000).toISOString().slice(0, 10)
+    mocks.readUsageDays.mockResolvedValue([
+      [previousDay, [{ key: 'workflow', cost: 0.002, events: 1 }]],
+      [day, [{ key: 'workflow', cost: 0.002, events: 1 }]],
+    ])
+    const result = await getOrganizationUsageCalendar.execute({
+      principal: session,
+      input: { organizationId: 'org-1', timezone: 'UTC' },
+    })
+    expect(result.days.find((entry) => entry.date === day)).toEqual({
+      date: day,
+      credits: 0,
+      hasCost: true,
+    })
+    expect(result.days[0]).toMatchObject({ credits: 0, hasCost: false })
+    expect(result.days.reduce((sum, entry) => sum + entry.credits, 0)).toBe(1)
+  })
+
   it('reads names only for the kept rows, however large a tie at the cutoff', async () => {
     mocks.readUsageGroups.mockResolvedValue(
       Array.from({ length: 12 }, (_, index) => ({
diff --git a/packages/emcn/src/components/charts/bar-chart.tsx b/packages/emcn/src/components/charts/bar-chart.tsx
index e5eff370acf..665f46ec3ec 100644
--- a/packages/emcn/src/components/charts/bar-chart.tsx
+++ b/packages/emcn/src/components/charts/bar-chart.tsx
@@ -127,7 +127,7 @@ function BarChartComponent(props: BarChartProps) {
   const tickValues = resolveBarTickValues(Math.max(...totals, 0))
   const maxValue = tickValues[tickValues.length - 1]
   const tickLabels = tickValues.map((value) =>
-    unit ? formatBarValue(value, unit) : formatChartCompactNumber(value)
+    value === 0 ? '0' : unit ? formatBarValue(value, unit) : formatChartCompactNumber(value)
   )
   const padding = resolveChartPadding(tickLabels)
   const chartWidth = width - padding.left - padding.right