fix(usage): surface export failures, make narrow charts scroll

A network-level export failure produced an unhandled rejection and no toast. The
action is fire-and-forget, so a dropped connection or a failed blob read was
indistinguishable from a click that never registered.

`resolveUsageBucket` ceiled its day count, so a 92-day range spanning the autumn
fall-back measured 92 days and one hour, counted as 93, and silently rendered
weekly bars for the longest range the picker allows. Rounded instead, with a test
on both sides of the threshold.

The client's custom-range guard only checked that both bounds were present, while
the contract — tightened last round — rejects a date that does not exist. A deep
link carrying `2026-02-30` therefore satisfied "resolved custom" and every query on
the page answered 400, where before it merely returned a shifted window. Tightening
one end without the other made a bad link worse; the client now applies the same
calendar round-trip, so it falls back as the partial-link guard intends. The
contract's own check also now covers the date portion of a datetime, not only the
bare form.

The export loop omitted `cursorCreatedAt`, whose documentation names this exact
caller. Each page therefore resolved its cursor against the primary before reading
the replica — up to 99 avoidable round-trips for a capped export.

Both chart roots become `overflow-x-auto`. `CHART_MIN_WIDTH` says the chart
"scrolls rather than compresses", and the code clipped: below the floor the
rightmost bars and axis labels were cut off. That comment was added by this branch
during the lift, so the contradiction is this PR's rather than inherited. At or
above the floor there is no overflow and nothing renders differently. Applied to
both charts because the floor lives in the shared hook.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: icecrasher321

apps/sim/components/charts/bar-chart.tsx

@@ -168,7 +168,14 @@ function BarChartComponent({
     <div
       ref={containerRef}
       className={cn(
-        'w-full overflow-hidden',
+        /*
+          `overflow-x-auto`, not `overflow-hidden`: `useChartWidth` floors the SVG at
+          CHART_MIN_WIDTH, so in a narrower container the chart is wider than its box.
+          Hiding that silently cut off the rightmost bars and axis labels — and
+          contradicted the constant's own note that the chart "scrolls rather than
+          compresses". At or above the floor there is no overflow and nothing changes.
+        */
+        'w-full overflow-x-auto',
         !hasExternalWrapper && 'rounded-[11px] border bg-card p-4 shadow-sm'
       )}
     >

apps/sim/components/charts/line-chart.tsx

@@ -222,7 +222,14 @@ function LineChartComponent({
     <div
       ref={containerRef}
       className={cn(
-        'w-full overflow-hidden',
+        /*
+          `overflow-x-auto`, not `overflow-hidden`: `useChartWidth` floors the SVG at
+          CHART_MIN_WIDTH, so in a narrower container the chart is wider than its box.
+          Hiding that silently cut off the rightmost bars and axis labels — and
+          contradicted the constant's own note that the chart "scrolls rather than
+          compresses". At or above the floor there is no overflow and nothing changes.
+        */
+        'w-full overflow-x-auto',
         !hasExternalWrapper && 'rounded-[11px] border bg-card p-4 shadow-sm'
       )}
     >

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

@@ -181,27 +181,36 @@ export function UsageMonitoring({ organizationId, workspaceId }: UsageMonitoring
     if (window.startDate) params.set('startDate', window.startDate)
     if (window.endDate) params.set('endDate', window.endDate)
 
-    // boundary-raw-fetch: downloads a CSV blob and reads X-Export-Truncated before saving — a plain anchor navigation can do neither
-    const response = await fetch(
-      `/api/organizations/${organizationId}/usage/export?${params.toString()}`
-    )
-    if (!response.ok) {
+    /**
+     * Wrapped because the action is fire-and-forget: `onSelect` cannot await this, so
+     * a rejection — a dropped connection, a blob read that fails — became an unhandled
+     * promise and the button appeared to do nothing at all.
+     */
+    try {
+      // boundary-raw-fetch: downloads a CSV blob and reads X-Export-Truncated before saving — a plain anchor navigation can do neither
+      const response = await fetch(
+        `/api/organizations/${organizationId}/usage/export?${params.toString()}`
+      )
+      if (!response.ok) {
+        toast.error('Failed to export usage')
+        return
+      }
+      if (response.headers.get('X-Export-Truncated') === '1') {
+        toast.info('Export truncated — narrow the date range to see everything')
+      }
+
+      const blob = await response.blob()
+      const url = URL.createObjectURL(blob)
+      const link = document.createElement('a')
+      link.href = url
+      link.download = `organization-usage-${new Date().toISOString().slice(0, 10)}.csv`
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
+      URL.revokeObjectURL(url)
+    } catch {
       toast.error('Failed to export usage')
-      return
-    }
-    if (response.headers.get('X-Export-Truncated') === '1') {
-      toast.info('Export truncated — narrow the date range to see everything')
     }
-
-    const blob = await response.blob()
-    const url = URL.createObjectURL(blob)
-    const link = document.createElement('a')
-    link.href = url
-    link.download = `organization-usage-${new Date().toISOString().slice(0, 10)}.csv`
-    document.body.appendChild(link)
-    link.click()
-    link.remove()
-    URL.revokeObjectURL(url)
   }
 
   /**

apps/sim/ee/organization-usage/hooks/use-usage-window.ts

@@ -12,6 +12,14 @@ import {
 } from '@/ee/organization-usage/search-params'
 import type { OrganizationUsageWindowKey } from '@/hooks/queries/utils/organization-usage-keys'
 
+/** A `YYYY-MM-DD` that survives a calendar round-trip, matching the contract's rule. */
+function isCalendarDate(value: string | null): value is string {
+  if (!value) return false
+  const datePart = /^(\d{4}-\d{2}-\d{2})/.exec(value)?.[1]
+  if (!datePart) return false
+  return new Date(`${datePart}T00:00:00.000Z`).toISOString().slice(0, 10) === datePart
+}
+
 /**
  * The panel's URL state, resolved into the window every query is keyed on.
  *
@@ -22,8 +30,17 @@ export function useUsageWindow() {
   const [state, setState] = useQueryStates(organizationUsageParsers, organizationUsageUrlKeys)
   const timezone = getBrowserTimezone()
 
+  /**
+   * Both bounds present *and* real calendar dates.
+   *
+   * The contract rejects a date that does not exist (`2026-02-30` parses and rolls
+   * forward, so it has to be refused rather than silently shifted). Without the same
+   * check here, a deep link carrying one satisfied this guard and every query on the
+   * page answered 400 — the partial-link fallback exists precisely so a bad link
+   * degrades to the default window instead.
+   */
   const isResolvedCustom =
-    state.preset === 'custom' && Boolean(state.startDate) && Boolean(state.endDate)
+    state.preset === 'custom' && isCalendarDate(state.startDate) && isCalendarDate(state.endDate)
   const preset: UsageWindowPreset =
     state.preset === 'custom' && !isResolvedCustom ? DEFAULT_USAGE_PRESET : state.preset
 

apps/sim/lib/api/contracts/organization-usage.ts

@@ -54,10 +54,12 @@ const isoDateSchema = z
   .refine(
     (value) => {
       if (!value) return true
-      const parsed = new Date(value)
-      if (Number.isNaN(parsed.getTime())) return false
-      // Bare `YYYY-MM-DD` parses as UTC, so compare against the UTC serialization.
-      return !/^\d{4}-\d{2}-\d{2}$/.test(value) || parsed.toISOString().slice(0, 10) === value
+      if (Number.isNaN(Date.parse(value))) return false
+      // The leading `YYYY-MM-DD` of either form, so `2026-02-30T00:00:00` is rejected
+      // rather than only the bare `2026-02-30`.
+      const datePart = /^(\d{4}-\d{2}-\d{2})/.exec(value)?.[1]
+      if (!datePart) return true
+      return new Date(`${datePart}T00:00:00.000Z`).toISOString().slice(0, 10) === datePart
     },
     { message: 'Expected a real calendar date such as 2026-08-01' }
   )

apps/sim/lib/billing/application/organization-usage/export-organization-usage-events.ts

@@ -68,6 +68,14 @@ export const exportOrganizationUsageEvents = defineAuthorizedOrganizationUsageUs
 
     const rows: OrganizationUsageExportRow[] = []
     let cursor: string | undefined
+    /**
+     * The cursor row's timestamp, carried forward from the page that produced it.
+     *
+     * Without it `getUsageLogs` resolves the cursor with a lookup on the primary
+     * before it can read the replica — once per page, up to a hundred times for a
+     * capped export. This loop is the exact case that option was added for.
+     */
+    let cursorCreatedAt: Date | undefined
     let truncated = false
 
     while (rows.length < USAGE_EXPORT_SAFETY_CAP) {
@@ -78,6 +86,7 @@ export const exportOrganizationUsageEvents = defineAuthorizedOrganizationUsageUs
         ...(input.source?.length ? { source: input.source } : {}),
         limit: EXPORT_PAGE_SIZE,
         ...(cursor ? { cursor } : {}),
+        ...(cursorCreatedAt ? { cursorCreatedAt } : {}),
         // Each page would otherwise repeat the same cursor-independent aggregate
         // for a total this export never reads.
         includeSummary: false,
@@ -94,7 +103,9 @@ export const exportOrganizationUsageEvents = defineAuthorizedOrganizationUsageUs
       }
 
       if (!page.pagination.hasMore || !page.pagination.nextCursor) break
+      const cursorRow = page.logs.find((log) => log.id === page.pagination.nextCursor)
       cursor = page.pagination.nextCursor
+      cursorCreatedAt = cursorRow ? new Date(cursorRow.createdAt) : undefined
       if (rows.length >= USAGE_EXPORT_SAFETY_CAP) {
         truncated = true
         break

apps/sim/lib/billing/core/usage-analytics.test.ts

@@ -296,6 +296,22 @@ describe('resolveUsageBucket', () => {
     expect(resolveUsageBucket({ kind: 'range', from, to: days(200) })).toBe('week')
     expect(resolveUsageBucket({ kind: 'range', from, to: days(500) })).toBe('month')
   })
+
+  it('keeps daily bars for the maximum range across a DST transition', () => {
+    // 92 calendar days spanning the autumn fall-back is 92 days and one hour. Ceiling
+    // that called it 93 and silently demoted the longest legal custom range to weekly
+    // bars — a granularity change with no cause the reader could see.
+    const dstSpan = {
+      kind: 'range' as const,
+      from,
+      to: new Date(from.getTime() + 92 * 86_400_000 + 3_600_000),
+    }
+    expect(resolveUsageBucket(dstSpan)).toBe('day')
+    // A genuinely longer range still steps up.
+    expect(
+      resolveUsageBucket({ kind: 'range', from, to: new Date(from.getTime() + 93 * 86_400_000) })
+    ).toBe('week')
+  })
 })
 
 describe('densifyUsageSeries', () => {

apps/sim/lib/billing/core/usage-analytics.ts

@@ -300,7 +300,10 @@ export function resolvePreviousPeriod(period: ResolvedUsagePeriod): ResolvedUsag
  */
 export function resolveUsageBucket(window: UsageAnalyticsWindow): UsageBucket {
   const { start, end } = usageWindowBounds(window)
-  const days = Math.max(1, Math.ceil((end.getTime() - start.getTime()) / DAY_MS))
+  // Rounded, not ceiled: a 92-day range spanning the autumn transition is 92 days and
+  // one hour, which `ceil` called 93 — quietly demoting the longest legal custom range
+  // from daily bars to weekly ones.
+  const days = Math.max(1, Math.round((end.getTime() - start.getTime()) / DAY_MS))
   if (days <= 92) return 'day'
   if (days <= 400) return 'week'
   return 'month'