fix(insights): align rolling windows to the viewer's hour and clear stale legend highlights

Author: waleedlatif1

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,
     },

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() })

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