perf(settings): reduce dashboard CPU usage

[zhangmo8]

Summary

• cache six number formatters and three date/time formatters per active locale, then precompute calendar titles and style references outside the render path
• keep the immutable dashboard payload and Unovis tooltip instance shallow-reactive to avoid deep proxy work
• retain 3-second refreshes only while usage backfill is running, reduce stable refreshes from 15 to 60 seconds, and pause them while Settings is hidden or unfocused
• coalesce manual, timer, and focus-resume refreshes into one in-flight dashboard request while preserving unmount cleanup

Runtime Flow

BEFORE

Settings Overview
└─ Dashboard render
   ├─ each calendar cell -> new Intl formatters + style object
   └─ request completes -> 3s / 15s timer -> refresh even in background

manual refresh + timer -> overlapping dashboard IPC can occur

AFTER

Settings Overview
└─ Dashboard render
   ├─ locale change -> build 9 cached Intl formatters
   ├─ dashboard change -> precompute calendar title/style view data
   └─ request completes -> 3s backfill / 60s stable timer
                         -> pause while hidden or unfocused

manual refresh + timer + focus resume -> one shared in-flight dashboard IPC

The visible Dashboard layout and copy are unchanged.

Validation

• pnpm run format
• pnpm run i18n
• pnpm run lint
• pnpm run typecheck
• pnpm run architecture:renderer-baseline:check
• DashboardSettings renderer tests: 19/19 passed
• full renderer suite: 1331 passed, 15 failed; all 15 failures are the existing origin/dev App.startup.test.ts mock returning undefined for Promise-based initAppStores, while unchanged ChatMainApp.vue calls .then()

Summary by CodeRabbit

• Performance Improvements
  • Reduced CPU usage during Settings Dashboard calendar rendering by reusing localized formatter instances and precomputing per-day display details.
  • Improved refresh behavior by pausing background updates when the page is hidden or the window is unfocused.
  • Prevented duplicate dashboard loads when multiple refresh actions occur at the same time.
• Bug Fixes
  • Restored correct dashboard update timing when visibility or focus returns, resuming promptly without excessive background activity.
  • Preserved existing localized output for dates, numbers, tooltips, and calendar styling.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 25ebc032-78c6-4bf1-988c-e6773ccb38a6

📥 Commits

Reviewing files that changed from the base of the PR and between a1b7fcc and a42faa7.

📒 Files selected for processing (1)

• src/renderer/settings/components/DashboardSettings.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• src/renderer/settings/components/DashboardSettings.vue

---

📝 Walkthrough

Walkthrough

DashboardSettings now reuses locale formatters, precomputes calendar display fields, uses shallow state updates, deduplicates dashboard loads, and pauses visibility- or focus-ineligible refreshes. Tests cover polling cadence, lifecycle behavior, request deduplication, and formatter reuse.

Changes

Dashboard CPU optimization

Layer / File(s)	Summary
Calendar rendering and locale formatter reuse src/renderer/settings/components/DashboardSettings.vue, test/renderer/components/DashboardSettings.test.ts, docs/issues/settings-dashboard-cpu-usage/spec.md	Calendar cells, labels, tooltips, and token-related values use precomputed display data and shared locale formatters; tests verify bounded formatter creation and stable reuse.
Visibility-aware dashboard refresh lifecycle src/renderer/settings/components/DashboardSettings.vue, test/renderer/components/DashboardSettings.test.ts, docs/issues/settings-dashboard-cpu-usage/spec.md	Dashboard loads deduplicate concurrent requests, refresh intervals vary by backfill state, and scheduling responds to visibility, focus, errors, and unmount cleanup. Tests cover timing, pause/resume behavior, and in-flight refresh deduplication.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant DashboardSettings
  participant Document
  participant Window
  participant DashboardIPC
  Document->>DashboardSettings: visibility change
  Window->>DashboardSettings: focus change
  DashboardSettings->>DashboardSettings: clear or schedule refresh timer
  DashboardSettings->>DashboardIPC: load dashboard when eligible
  DashboardIPC-->>DashboardSettings: dashboard data or error
  DashboardSettings->>DashboardSettings: schedule next refresh after load

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: reducing Settings dashboard CPU usage.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch perf/settings-dashboard-refresh

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

src/renderer/settings/components/DashboardSettings.vue (1)

728-728: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Optional: replace manual timer bookkeeping with useTimeoutFn.

refreshTimer/clearRefreshTimer reimplement what VueUse's useTimeoutFn already provides (start/stop controls + automatic cleanup on scope dispose), which the guidelines call out for mechanical browser-timer behavior. Not required since correctness is fine as-is, but would remove the manual refreshTimer variable and reduce boilerplate.
[optional_refactor]

As per coding guidelines, src/renderer/**/*.vue: "Prefer VueUse utilities such as useEventListener, useDebounceFn, useWindowSize, useResizeObserver, useIntervalFn, and useStorage for mechanical browser behavior."

Also applies to: 1067-1101

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/renderer/settings/components/DashboardSettings.vue` at line 728,
Optionally replace the manual refreshTimer and clearRefreshTimer bookkeeping
with VueUse’s useTimeoutFn in the dashboard refresh flow. Use its start/stop
controls and automatic scope cleanup, preserving the existing refresh timing and
behavior while removing the redundant timer state and cleanup boilerplate.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/renderer/settings/components/DashboardSettings.vue`:
- Line 728: Optionally replace the manual refreshTimer and clearRefreshTimer
bookkeeping with VueUse’s useTimeoutFn in the dashboard refresh flow. Use its
start/stop controls and automatic scope cleanup, preserving the existing refresh
timing and behavior while removing the redundant timer state and cleanup
boilerplate.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 89b6e879-8887-4891-ae36-508065590245

📥 Commits

Reviewing files that changed from the base of the PR and between bfb1e78 and a1b7fcc.

📒 Files selected for processing (3)

• docs/issues/settings-dashboard-cpu-usage/spec.md
• src/renderer/settings/components/DashboardSettings.vue
• test/renderer/components/DashboardSettings.test.ts