diff --git a/docs/issues/settings-dashboard-cpu-usage/spec.md b/docs/issues/settings-dashboard-cpu-usage/spec.md
new file mode 100644
index 0000000000..dcd82e0d01
--- /dev/null
+++ b/docs/issues/settings-dashboard-cpu-usage/spec.md
@@ -0,0 +1,87 @@
+# Settings Dashboard CPU 占用优化
+
+## 问题描述
+
+打开 Settings 默认 Overview 后，`DashboardSettings` 会渲染 usage chart、breakdown 和最多一年左右的
+calendar cells。当前每个 calendar cell 的 title 都在 render 路径中调用 `formatDateKey()` 与
+`formatFullTokens()`，两者每次分别创建新的 `Intl.DateTimeFormat` 和 `Intl.NumberFormat`；其他 summary
+与 breakdown 格式化函数也在每次调用时创建 formatter。
+
+Dashboard 在 backfill 运行时每 3 秒刷新，稳定后仍每 15 秒刷新。Settings 窗口隐藏、最小化或失焦时
+timer 不会暂停，每次响应又替换完整 payload，触发 calendar、chart 和 breakdown 重算。这让 formatter
+构造与 IPC/数据库 dashboard 聚合持续叠加，造成打开 Settings 时的 CPU 峰值和后台额外唤醒。
+
+## 影响
+
+- calendar 数据越长，单次 render 创建的 `Intl` formatter 越多，首屏和刷新时 CPU 峰值越明显。
+- Settings 留在后台时仍周期性执行 IPC、dashboard 聚合和 Vue/Unovis 更新。
+- 手动刷新、timer 与慢请求缺少统一 in-flight owner，后续扩展容易引入重叠请求或旧结果覆盖。
+- 完成 backfill 后 15 秒刷新频率高于稳定 usage dashboard 的实际需要。
+
+## 根因位置
+
+- `src/renderer/settings/components/DashboardSettings.vue`
+  - `formatFullTokens`、`formatPercent`、`formatCurrency`、`formatDateKey` 等按调用构造 `Intl` formatter；
+  - `calendarCellTitle()` 位于 template render 路径，对每个有效 cell 重复格式化；
+  - `calendarCellStyle()` 每次调用创建新 style object；
+  - `scheduleRefresh()` 仅判断 mount/dashboard 状态，不判断 `visibilityState` 或窗口 focus；
+  - 稳定态固定 15 秒轮询，且没有显式的 in-flight 请求 owner。
+
+## 修复计划
+
+1. 用 locale 依赖的 computed 一次创建 number、percent、currency、date、month 与 weekday formatters；
+   locale 变化时自动重建，普通 render 复用实例。
+2. 将 dashboard payload 与外部 tooltip 实例改为 `shallowRef`；payload 保持 immutable replacement。
+3. 在 calendar computed 中预生成每个 day 的 title 与静态 level style，template 只读取值。
+4. 将刷新改为单 owner 的 self-scheduling timeout：
+   - backfill `running`：3 秒；
+   - 其他稳定状态：60 秒；
+   - document hidden 或 window unfocused：清除 timer 并暂停；
+   - 恢复可见/焦点时按上次完成时间计算剩余延迟，已过期则立即刷新。
+5. 同一时间只允许一个 dashboard IPC；手动、timer 和 focus 恢复复用 in-flight Promise。卸载后响应不得
+   更新 state 或重新调度。
+
+## 非目标
+
+- 不修改 usage dashboard 主进程查询、数据 schema、backfill 批处理或 RTK health contract。
+- 不改变 Dashboard 布局、图表、calendar 范围或用户可见文案。
+- 不引入 worker、虚拟化 calendar 或跨页面 dashboard cache。
+- 不创建 GitHub issue；通过独立 PR 评审该修复。
+
+## 验收标准
+
+1. 同一 locale 下，calendar 长度增加不会线性增加 `Intl.NumberFormat` / `Intl.DateTimeFormat` 构造次数。
+2. calendar title、月份、weekday、summary、breakdown 与 tooltip 保持原有本地化输出。
+3. backfill 运行时每 3 秒刷新；完成/失败/空闲状态每 60 秒刷新。
+4. hidden 或 unfocused 期间不发 dashboard IPC；恢复后仅在数据已过期时立即刷新，否则等待剩余时间。
+5. 慢请求期间的手动刷新或 timer 不创建第二个 IPC；卸载后不更新、不调度。
+6. 组件行为测试覆盖 formatter 复用、两档 interval、visibility/focus pause-resume、in-flight dedupe 和 cleanup。
+7. format、i18n、lint、typecheck 与 Dashboard/Settings 相关 renderer tests 通过。
+
+## 任务清单
+
+- [x] 定位 calendar render 中的线性 `Intl` 构造和后台持续轮询根因。
+- [x] 缓存 locale formatter，并预计算 calendar title/style view model。
+- [x] 将 dashboard payload/tooltip 改为 shallow reactive 边界。
+- [x] 实现 3 秒/60 秒两档、visibility/focus aware 的单请求自调度刷新。
+- [x] 补 formatter、interval、pause/resume、dedupe 与 unmount 回归测试（19 个用例通过）。
+- [x] 运行 format、i18n、lint、typecheck、architecture baseline 和相关 renderer tests。
+- [x] 提交、推送并创建以 `dev` 为 base 的独立 PR。
+
+## 验证
+
+```bash
+pnpm exec vitest --config vitest.config.renderer.ts --run test/renderer/components/DashboardSettings.test.ts
+pnpm run format
+pnpm run i18n
+pnpm run lint
+pnpm run typecheck
+pnpm run test:renderer
+```
+
+- `format`、`i18n`、`lint`、`typecheck` 与 renderer architecture baseline 均通过。
+- `DashboardSettings` 定向测试 19/19 通过。
+- 全量 renderer suite：173 个测试文件通过，1 个失败；1331 个测试通过，15 个失败。失败均来自
+  `origin/dev` 已存在的 `App.startup.test.ts` mock：`initAppStores` 返回 `undefined`，而未修改的
+  `ChatMainApp.vue` 对结果调用 `.then()`；本次 Dashboard 变更没有引入新的全量测试失败。
+- PR: [#2004](https://github.com/ThinkInAIXYZ/deepchat/pull/2004)
diff --git a/src/renderer/settings/components/DashboardSettings.vue b/src/renderer/settings/components/DashboardSettings.vue
index eb7e5ce61e..73e1ab607e 100644
--- a/src/renderer/settings/components/DashboardSettings.vue
+++ b/src/renderer/settings/components/DashboardSettings.vue
@@ -333,23 +333,23 @@
                 <div class="flex items-center gap-1">
                   <span
                     class="h-3 w-3 rounded-sm border border-border/70"
-                    :style="calendarCellStyle(0)"
+                    :style="calendarCellStyles[0]"
                   ></span>
                   <span
                     class="h-3 w-3 rounded-sm border border-border/70"
-                    :style="calendarCellStyle(1)"
+                    :style="calendarCellStyles[1]"
                   ></span>
                   <span
                     class="h-3 w-3 rounded-sm border border-border/70"
-                    :style="calendarCellStyle(2)"
+                    :style="calendarCellStyles[2]"
                   ></span>
                   <span
                     class="h-3 w-3 rounded-sm border border-border/70"
-                    :style="calendarCellStyle(3)"
+                    :style="calendarCellStyles[3]"
                   ></span>
                   <span
                     class="h-3 w-3 rounded-sm border border-border/70"
-                    :style="calendarCellStyle(4)"
+                    :style="calendarCellStyles[4]"
                   ></span>
                 </div>
               </div>
@@ -403,8 +403,8 @@
                         data-testid="calendar-cell"
                         class="calendar-cell rounded-sm border border-border/70"
                         :class="day ? 'opacity-100' : 'opacity-0'"
-                        :style="day ? calendarCellStyle(day.level) : undefined"
-                        :title="day ? calendarCellTitle(day) : ''"
+                        :style="day ? day.cellStyle : undefined"
+                        :title="day ? day.title : ''"
                       ></div>
                     </div>
                   </div>
@@ -646,8 +646,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h, onBeforeUnmount, onMounted, ref, render } from 'vue'
+import { computed, h, onBeforeUnmount, onMounted, render, shallowRef, watch } from 'vue'
+import type { CSSProperties } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useDocumentVisibility, useTimeoutFn, useWindowFocus } from '@vueuse/core'
 import { Icon } from '@iconify/vue'
 import { CurveType } from '@unovis/ts'
 import type { Tooltip as UnovisTooltip } from '@unovis/ts'
@@ -674,7 +676,11 @@ import type { UsageDashboardCalendarDay, UsageDashboardData } from '@shared/type
 import { createSessionClient } from '@api/SessionClient'
 import UsageNostalgiaCard from './control-center/UsageNostalgiaCard.vue'
 
-type CalendarCell = UsageDashboardCalendarDay | null
+type CalendarDayView = UsageDashboardCalendarDay & {
+  cellStyle: CSSProperties
+  title: string
+}
+type CalendarCell = CalendarDayView | null
 type TokenUsageTrendKey = 'input' | 'output' | 'cached' | 'cost'
 type TokenUsageTrendPoint = {
   index: number
@@ -711,16 +717,66 @@ const emit = defineEmits<{
   (e: 'dashboard-loaded', dashboard: UsageDashboardData): void
 }>()
 
-const isLoading = ref(true)
-const isRetryingRtk = ref(false)
-const errorMessage = ref('')
-const dashboard = ref<UsageDashboardData | null>(null)
-const tokenUsageTooltip = ref<{ component?: UnovisTooltip } | null>(null)
+const isLoading = shallowRef(true)
+const isRetryingRtk = shallowRef(false)
+const errorMessage = shallowRef('')
+const dashboard = shallowRef<UsageDashboardData | null>(null)
+const tokenUsageTooltip = shallowRef<{ component?: UnovisTooltip } | null>(null)
+const documentVisibility = useDocumentVisibility()
+const isWindowFocused = useWindowFocus()
 let isDashboardMounted = false
-let refreshTimer: number | null = null
+const refreshDelay = shallowRef(0)
+const { start: startRefreshTimer, stop: stopRefreshTimer } = useTimeoutFn(
+  () => {
+    if (!isDashboardMounted) {
+      return
+    }
+    void loadDashboard()
+  },
+  () => refreshDelay.value,
+  { immediate: false }
+)
+let dashboardLoadPromise: Promise<void> | null = null
+let lastDashboardLoadCompletedAt: number | null = null
 
 const COST_TREND_DAYS = 30
 const TOKEN_USAGE_CHART_HEIGHT = 184
+const BACKFILL_REFRESH_INTERVAL_MS = 3_000
+const STABLE_REFRESH_INTERVAL_MS = 60_000
+const calendarCellStyles: Record<UsageDashboardCalendarDay['level'], CSSProperties> = {
+  0: { backgroundColor: 'var(--muted)' },
+  1: { backgroundColor: 'hsl(var(--usage-low) / 0.35)' },
+  2: { backgroundColor: 'hsl(var(--usage-low) / 0.75)' },
+  3: { backgroundColor: 'hsl(var(--usage-mid))' },
+  4: { backgroundColor: 'hsl(var(--usage-high))' }
+}
+
+const localeFormatters = computed(() => {
+  const activeLocale = locale.value
+
+  return {
+    number: new Intl.NumberFormat(activeLocale),
+    compactInteger: new Intl.NumberFormat(activeLocale, { maximumFractionDigits: 0 }),
+    compactDecimal: new Intl.NumberFormat(activeLocale, { maximumFractionDigits: 1 }),
+    percent: new Intl.NumberFormat(activeLocale, {
+      style: 'percent',
+      maximumFractionDigits: 1
+    }),
+    currency: new Intl.NumberFormat(activeLocale, {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: 2
+    }),
+    preciseCurrency: new Intl.NumberFormat(activeLocale, {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: 4
+    }),
+    date: new Intl.DateTimeFormat(activeLocale, { dateStyle: 'medium' }),
+    month: new Intl.DateTimeFormat(activeLocale, { month: 'short' }),
+    weekday: new Intl.DateTimeFormat(activeLocale, { weekday: 'short' })
+  }
+})
 
 const hasData = computed(() => (dashboard.value?.summary.messageCount ?? 0) > 0)
 
@@ -863,12 +919,19 @@ const tokenUsageCard = computed(() => {
   }
 })
 
-const calendarGridStyle = computed(() => ({
-  gridTemplateColumns: `repeat(${Math.max(calendarWeeks.value.length, 1)}, minmax(0, 1fr))`
-}))
+const calendarDays = computed<CalendarDayView[]>(() =>
+  (dashboard.value?.calendar ?? []).map((day) => ({
+    ...day,
+    cellStyle: calendarCellStyles[day.level],
+    title: t('settings.dashboard.calendar.tooltip', {
+      date: formatDateKey(day.date),
+      tokens: formatFullTokens(day.totalTokens)
+    })
+  }))
+)
 
 const calendarWeeks = computed<CalendarCell[][]>(() => {
-  const days = dashboard.value?.calendar ?? []
+  const days = calendarDays.value
   if (days.length === 0) {
     return []
   }
@@ -895,8 +958,11 @@ const calendarWeeks = computed<CalendarCell[][]>(() => {
   return weeks
 })
 
+const calendarGridStyle = computed(() => ({
+  gridTemplateColumns: `repeat(${Math.max(calendarWeeks.value.length, 1)}, minmax(0, 1fr))`
+}))
+
 const calendarMonthLabels = computed(() => {
-  const formatter = new Intl.DateTimeFormat(locale.value, { month: 'short' })
   const labels: Array<{ label: string; weekIndex: number; span: number }> = []
   let lastMonth = ''
 
@@ -906,7 +972,7 @@ const calendarMonthLabels = computed(() => {
       return
     }
 
-    const label = formatter.format(new Date(`${firstDay.date}T00:00:00`))
+    const label = localeFormatters.value.month.format(new Date(`${firstDay.date}T00:00:00`))
     if (label !== lastMonth) {
       labels.push({ label, weekIndex, span: 1 })
       lastMonth = label
@@ -923,12 +989,11 @@ const calendarMonthLabels = computed(() => {
 })
 
 const weekdayLabels = computed(() => {
-  const formatter = new Intl.DateTimeFormat(locale.value, { weekday: 'short' })
   return Array.from({ length: 7 }, (_, dayIndex) => ({
     key: dayIndex,
     label:
       dayIndex === 1 || dayIndex === 3 || dayIndex === 5
-        ? formatter.format(new Date(2026, 0, dayIndex + 4))
+        ? localeFormatters.value.weekday.format(new Date(2026, 0, dayIndex + 4))
         : ''
   }))
 })
@@ -950,8 +1015,30 @@ async function loadDashboard(): Promise<void> {
     return
   }
 
-  let shouldFinalizeLoad = false
+  if (dashboardLoadPromise) {
+    await dashboardLoadPromise
+    return
+  }
+
+  stopRefreshTimer()
+  const request = runDashboardLoad()
+  dashboardLoadPromise = request
 
+  try {
+    await request
+  } finally {
+    if (dashboardLoadPromise === request) {
+      dashboardLoadPromise = null
+      if (isDashboardMounted) {
+        isLoading.value = false
+        lastDashboardLoadCompletedAt = Date.now()
+        scheduleRefresh()
+      }
+    }
+  }
+}
+
+async function runDashboardLoad(): Promise<void> {
   try {
     isLoading.value = true
     errorMessage.value = ''
@@ -961,19 +1048,12 @@ async function loadDashboard(): Promise<void> {
     }
     dashboard.value = nextDashboard
     emit('dashboard-loaded', nextDashboard)
-    shouldFinalizeLoad = true
   } catch (error) {
     if (!isDashboardMounted) {
       return
     }
     errorMessage.value =
       error instanceof Error ? error.message : t('settings.dashboard.error.description')
-    shouldFinalizeLoad = true
-  } finally {
-    if (shouldFinalizeLoad && isDashboardMounted) {
-      isLoading.value = false
-      scheduleRefresh()
-    }
   }
 }
 
@@ -994,23 +1074,34 @@ async function retryRtkHealthCheck(): Promise<void> {
   }
 }
 
+function canScheduleRefresh(): boolean {
+  return documentVisibility.value === 'visible' && isWindowFocused.value
+}
+
 function scheduleRefresh(): void {
-  if (refreshTimer) {
-    window.clearTimeout(refreshTimer)
-    refreshTimer = null
-  }
+  stopRefreshTimer()
 
-  if (!isDashboardMounted || !dashboard.value) {
+  if (!isDashboardMounted || !dashboard.value || !canScheduleRefresh()) {
     return
   }
 
-  const delay = dashboard.value.backfillStatus.status === 'running' ? 3000 : 15000
-  refreshTimer = window.setTimeout(() => {
-    if (!isDashboardMounted) {
-      return
-    }
+  const interval =
+    dashboard.value.backfillStatus.status === 'running'
+      ? BACKFILL_REFRESH_INTERVAL_MS
+      : STABLE_REFRESH_INTERVAL_MS
+  const elapsed =
+    lastDashboardLoadCompletedAt === null
+      ? interval
+      : Math.max(Date.now() - lastDashboardLoadCompletedAt, 0)
+  const delay = Math.max(interval - elapsed, 0)
+
+  if (delay === 0) {
     void loadDashboard()
-  }, delay)
+    return
+  }
+
+  refreshDelay.value = delay
+  startRefreshTimer()
 }
 
 function buildBreakdownCard(
@@ -1035,28 +1126,6 @@ function buildBreakdownCard(
   }
 }
 
-function calendarCellStyle(level: number): { backgroundColor: string } {
-  switch (level) {
-    case 4:
-      return { backgroundColor: 'hsl(var(--usage-high))' }
-    case 3:
-      return { backgroundColor: 'hsl(var(--usage-mid))' }
-    case 2:
-      return { backgroundColor: 'hsl(var(--usage-low) / 0.75)' }
-    case 1:
-      return { backgroundColor: 'hsl(var(--usage-low) / 0.35)' }
-    default:
-      return { backgroundColor: 'var(--muted)' }
-  }
-}
-
-function calendarCellTitle(day: UsageDashboardCalendarDay): string {
-  return t('settings.dashboard.calendar.tooltip', {
-    date: formatDateKey(day.date),
-    tokens: formatFullTokens(day.totalTokens)
-  })
-}
-
 function formatTokens(value: number): string {
   const absoluteValue = Math.abs(value)
   const compactUnits = [
@@ -1069,9 +1138,11 @@ function formatTokens(value: number): string {
   for (const unit of compactUnits) {
     if (absoluteValue >= unit.threshold) {
       const compactValue = value / unit.threshold
-      return `${new Intl.NumberFormat(locale.value, {
-        maximumFractionDigits: Math.abs(compactValue) >= 100 ? 0 : 1
-      }).format(compactValue)}${unit.suffix}`
+      const formatter =
+        Math.abs(compactValue) >= 100
+          ? localeFormatters.value.compactInteger
+          : localeFormatters.value.compactDecimal
+      return `${formatter.format(compactValue)}${unit.suffix}`
     }
   }
 
@@ -1079,18 +1150,15 @@ function formatTokens(value: number): string {
 }
 
 function formatFullTokens(value: number): string {
-  return new Intl.NumberFormat(locale.value).format(value)
+  return localeFormatters.value.number.format(value)
 }
 
 function formatCount(value: number): string {
-  return new Intl.NumberFormat(locale.value).format(value)
+  return localeFormatters.value.number.format(value)
 }
 
 function formatPercent(value: number): string {
-  return new Intl.NumberFormat(locale.value, {
-    style: 'percent',
-    maximumFractionDigits: 1
-  }).format(value)
+  return localeFormatters.value.percent.format(value)
 }
 
 function formatCurrency(value: number | null): string {
@@ -1098,17 +1166,13 @@ function formatCurrency(value: number | null): string {
     return t('settings.dashboard.unavailable')
   }
 
-  return new Intl.NumberFormat(locale.value, {
-    style: 'currency',
-    currency: 'USD',
-    maximumFractionDigits: value >= 1 ? 2 : 4
-  }).format(value)
+  const formatter =
+    value >= 1 ? localeFormatters.value.currency : localeFormatters.value.preciseCurrency
+  return formatter.format(value)
 }
 
 function formatDateKey(dateKey: string): string {
-  return new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium' }).format(
-    new Date(`${dateKey}T00:00:00`)
-  )
+  return localeFormatters.value.date.format(new Date(`${dateKey}T00:00:00`))
 }
 
 const tokenTrendXAccessor = (point: TokenUsageTrendPoint): number => point.index
@@ -1157,7 +1221,7 @@ function tokenUsageMetricDotStyle(series: TokenUsageTrendKey): { backgroundColor
 
 function tokenUsageTooltipDateLabel(value: number | Date): string {
   if (value instanceof Date && !Number.isNaN(value.getTime())) {
-    return new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium' }).format(value)
+    return localeFormatters.value.date.format(value)
   }
 
   return t('settings.dashboard.unavailable')
@@ -1213,6 +1277,23 @@ function breakdownBarStyle(barRatio: number): { width: string } {
   }
 }
 
+watch(
+  [documentVisibility, isWindowFocused],
+  ([visibility, focused]) => {
+    if (!isDashboardMounted) {
+      return
+    }
+
+    if (visibility !== 'visible' || !focused) {
+      stopRefreshTimer()
+      return
+    }
+
+    scheduleRefresh()
+  },
+  { flush: 'sync' }
+)
+
 onMounted(() => {
   isDashboardMounted = true
   void loadDashboard()
@@ -1220,11 +1301,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   isDashboardMounted = false
-
-  if (refreshTimer) {
-    window.clearTimeout(refreshTimer)
-    refreshTimer = null
-  }
 })
 </script>
 
diff --git a/test/renderer/components/DashboardSettings.test.ts b/test/renderer/components/DashboardSettings.test.ts
index f4f1f2b9ea..07be057463 100644
--- a/test/renderer/components/DashboardSettings.test.ts
+++ b/test/renderer/components/DashboardSettings.test.ts
@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { defineComponent, ref } from 'vue'
+import { defineComponent, nextTick, ref } from 'vue'
 import type { PropType } from 'vue'
 import { flushPromises, mount } from '@vue/test-utils'
 import type { UsageDashboardData } from '@shared/types/agent-interface'
@@ -195,6 +195,7 @@ async function setup(
   options: {
     getUsageDashboard?: ReturnType<typeof vi.fn>
     retryRtkHealthCheck?: ReturnType<typeof vi.fn>
+    hideNostalgia?: boolean
   } = {}
 ) {
   vi.resetModules()
@@ -329,6 +330,9 @@ async function setup(
   ).default
 
   const wrapper = mount(DashboardSettings, {
+    props: {
+      hideNostalgia: options.hideNostalgia
+    },
     global: {
       stubs: {
         ScrollArea: passthrough('ScrollArea'),
@@ -353,11 +357,16 @@ async function setup(
   }
 }
 
+let mockedDocumentVisibility: DocumentVisibilityState
+
 describe('DashboardSettings', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     vi.useFakeTimers()
     vi.setSystemTime(new Date(2026, 2, 17, 12, 0, 0))
+    mockedDocumentVisibility = 'visible'
+    vi.spyOn(document, 'hasFocus').mockReturnValue(true)
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => mockedDocumentVisibility)
   })
 
   afterEach(() => {
@@ -405,6 +414,117 @@ describe('DashboardSettings', () => {
     expect(wrapper.find('[data-testid="dashboard-backfill-banner"]').exists()).toBe(true)
   })
 
+  it('polls every three seconds while backfill is running', async () => {
+    const { getUsageDashboard } = await setup(
+      buildDashboard({
+        backfillStatus: {
+          status: 'running',
+          startedAt: new Date(2026, 2, 1, 12, 0, 0).getTime(),
+          finishedAt: null,
+          error: null,
+          updatedAt: new Date(2026, 2, 1, 12, 0, 5).getTime()
+        }
+      })
+    )
+
+    await vi.advanceTimersByTimeAsync(2_999)
+    expect(getUsageDashboard).toHaveBeenCalledTimes(1)
+
+    await vi.advanceTimersByTimeAsync(1)
+    expect(getUsageDashboard).toHaveBeenCalledTimes(2)
+  })
+
+  it('polls every sixty seconds after backfill completes', async () => {
+    const { getUsageDashboard } = await setup(buildDashboard())
+
+    await vi.advanceTimersByTimeAsync(59_999)
+    expect(getUsageDashboard).toHaveBeenCalledTimes(1)
+
+    await vi.advanceTimersByTimeAsync(1)
+    expect(getUsageDashboard).toHaveBeenCalledTimes(2)
+  })
+
+  it('pauses while hidden and refreshes immediately when stale and visible again', async () => {
+    const { getUsageDashboard } = await setup(buildDashboard())
+
+    mockedDocumentVisibility = 'hidden'
+    document.dispatchEvent(new Event('visibilitychange'))
+    await vi.advanceTimersByTimeAsync(120_000)
+    expect(getUsageDashboard).toHaveBeenCalledTimes(1)
+
+    mockedDocumentVisibility = 'visible'
+    document.dispatchEvent(new Event('visibilitychange'))
+    await flushPromises()
+    expect(getUsageDashboard).toHaveBeenCalledTimes(2)
+  })
+
+  it('pauses while unfocused and preserves the remaining delay after an early focus', async () => {
+    const { getUsageDashboard } = await setup(buildDashboard())
+
+    window.dispatchEvent(new Event('blur'))
+    await vi.advanceTimersByTimeAsync(30_000)
+    expect(getUsageDashboard).toHaveBeenCalledTimes(1)
+
+    window.dispatchEvent(new Event('focus'))
+    await flushPromises()
+    expect(getUsageDashboard).toHaveBeenCalledTimes(1)
+
+    await vi.advanceTimersByTimeAsync(29_999)
+    expect(getUsageDashboard).toHaveBeenCalledTimes(1)
+
+    await vi.advanceTimersByTimeAsync(1)
+    expect(getUsageDashboard).toHaveBeenCalledTimes(2)
+  })
+
+  it('deduplicates manual refreshes while a dashboard request is in flight', async () => {
+    let resolveDashboard: ((value: UsageDashboardData) => void) | null = null
+    const getUsageDashboard = vi.fn().mockImplementation(
+      () =>
+        new Promise<UsageDashboardData>((resolve) => {
+          resolveDashboard = resolve
+        })
+    )
+    const { wrapper } = await setup(buildDashboard(), { getUsageDashboard })
+
+    await wrapper.get('[data-testid="dashboard-header"] button').trigger('click')
+    await wrapper.get('[data-testid="dashboard-header"] button').trigger('click')
+    expect(getUsageDashboard).toHaveBeenCalledTimes(1)
+
+    resolveDashboard?.(buildDashboard())
+    await flushPromises()
+    expect(getUsageDashboard).toHaveBeenCalledTimes(1)
+  })
+
+  it('reuses a bounded set of Intl formatters for a full calendar render', async () => {
+    const numberFormat = vi.spyOn(Intl, 'NumberFormat')
+    const dateTimeFormat = vi.spyOn(Intl, 'DateTimeFormat')
+    const firstDay = new Date(2025, 0, 1)
+    const calendar = Array.from({ length: 365 }, (_, index) => {
+      const date = new Date(firstDay)
+      date.setDate(firstDay.getDate() + index)
+      return {
+        date: date.toISOString().slice(0, 10),
+        messageCount: 1,
+        inputTokens: 40,
+        outputTokens: 20,
+        totalTokens: 60,
+        cachedInputTokens: 10,
+        estimatedCostUsd: 0.0006,
+        level: 3 as const
+      }
+    })
+
+    const { wrapper } = await setup(buildDashboard({ calendar }), { hideNostalgia: true })
+
+    expect(numberFormat).toHaveBeenCalledTimes(6)
+    expect(dateTimeFormat).toHaveBeenCalledTimes(3)
+
+    wrapper.vm.$forceUpdate()
+    await nextTick()
+    expect(numberFormat).toHaveBeenCalledTimes(6)
+    expect(dateTimeFormat).toHaveBeenCalledTimes(3)
+  })
+
   it('renders summary cards and breakdown rows when stats exist', async () => {
     const { wrapper, getUsageDashboard } = await setup(buildDashboard())
     const summaryCards = wrapper.findAll('[data-testid^="summary-card-"]')