perf(frontend): integrate page visibility API for smart polling

[wahh3b-lgtm]

Changes

• Page Visibility hook (dashboard/src/hooks/use-document-visibility.ts): New React hook using the browser's Page Visibility API to detect when the tab is hidden/minimized
• Dashboard polling (_dashboard._index.tsx): System resource and user stats polling reduces from 5s to 60s when the tab is hidden
• Chart polling (4 chart components): Usage charts poll at 15min when visible, 1hr when hidden
• Workers health (workers-health-card.tsx): Combined existing pauseRefetch logic with visibility-aware polling
• Version check (use-version-check.ts): Changed from periodic to on-demand only (reduces unnecessary API calls)
• Router type safety (router.tsx): Fixed any return type, replaced as RouteObject[] with satisfies RouteObject[]
• Gitignore (.gitignore): Added coderabbitai.md

Files Changed

• dashboard/src/hooks/use-document-visibility.ts (new)
• dashboard/src/pages/_dashboard._index.tsx
• dashboard/src/features/users/components/users-statistics.tsx
• dashboard/src/features/dashboard/components/admin-statistics-card.tsx
• dashboard/src/features/dashboard/components/workers-health-card.tsx
• dashboard/src/components/charts/area-costume-chart.tsx
• dashboard/src/components/charts/costume-bar-chart.tsx
• dashboard/src/components/charts/user-sub-update-pie-chart.tsx
• dashboard/src/components/charts/all-nodes-stacked-bar-chart.tsx
• dashboard/src/hooks/use-version-check.ts
• dashboard/src/app/router.tsx
• .gitignore

Verification

• Ruff lint + format pass
• 13/13 tests pass

Summary by CodeRabbit

• New Features
  • Dashboard now intelligently adjusts data refresh rates based on browser tab visibility, reducing network activity when hidden while keeping updates frequent when visible (charts and statistics cards).
  • Added a visibility-aware hook used across the dashboard’s polling logic.
• Chores
  • Improved route typing accuracy and loader return types for safer routing.
  • Disabled automatic periodic refetch for the latest-release version check.
  • Updated ignore rules for an internal markdown file.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 95a29604-8c6f-44a2-b378-4e78e854415f

📥 Commits

Reviewing files that changed from the base of the PR and between fab79a2 and d128057.

📒 Files selected for processing (1)

• dashboard/src/components/charts/user-sub-update-pie-chart.tsx

---

Walkthrough

This PR implements visibility-aware polling optimization across the dashboard by introducing a useDocumentVisibility hook to detect tab visibility and adapt query refetch intervals accordingly. Components poll frequently when the browser tab is visible and reduce polling when hidden. Router typing is tightened with AdminDetails type and satisfies keyword, version-check refetching is disabled, tooltip props are externalized for i18n, and .gitignore is updated.

Changes

Tab Visibility-Aware Polling

Layer / File(s)	Summary
useDocumentVisibility hook and type improvements dashboard/src/hooks/use-document-visibility.ts, dashboard/src/app/router.tsx, dashboard/src/hooks/use-version-check.ts	useDocumentVisibility hook initializes from document.visibilityState with SSR fallback and subscribes to visibilitychange events. Router loader return type changes from Promise<any> to Promise<AdminDetails>. Route array typing switches from as RouteObject[] to satisfies RouteObject[]. Version-check query refetching disabled.
All-nodes stacked bar chart with tooltip refactoring dashboard/src/components/charts/all-nodes-stacked-bar-chart.tsx	CustomTooltip accepts t and locale props instead of calling useTranslation internally. Component derives visibility-dependent polling intervals and applies them to node and admin usage queries. Tooltip wiring updated to pass computed i18n props.
Chart components polling optimization dashboard/src/components/charts/area-costume-chart.tsx, dashboard/src/components/charts/costume-bar-chart.tsx, dashboard/src/components/charts/user-sub-update-pie-chart.tsx	Area, costume bar, and pie chart components apply visibility-aware polling by deriving isTabVisible and computing pollingInterval for their respective data queries (historical stats, usage, subscription updates).
Dashboard page and statistics cards polling dashboard/src/pages/_dashboard._index.tsx, dashboard/src/features/dashboard/components/admin-statistics-card.tsx, dashboard/src/features/dashboard/components/workers-health-card.tsx, dashboard/src/features/users/components/users-statistics.tsx	Dashboard index page and component cards adapt query refetch intervals based on tab visibility. System resource stats, system users stats, workers health, and user stats queries poll faster when visible and slower when hidden.
Configuration cleanup .gitignore	.gitignore updated to exclude coderabbitai.md from version control.

---

🎯 3 (Moderate) | ⏱️ ~20 minutes

---

🐰 A rabbit hops through dashboards bright,
Watching tabs go dark at night,
Polling pauses when away,
Saving energy every day! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 12.50% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'perf(frontend): integrate page visibility API for smart polling' clearly and concisely summarizes the main change: integrating the Page Visibility API for optimizing polling behavior.
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@dashboard/src/components/charts/user-sub-update-pie-chart.tsx`:
- Around line 175-176: The refetchInterval currently uses 60_000 (60s) when
visible and 1000 * 60 * 5 (5m) when hidden; update these to match the PR
contract by setting refetchInterval to 15 minutes when isTabVisible is true and
1 hour when false (use consistent numeric expressions like 1000 * 60 * 15 and
1000 * 60 * 60) so the polling cadence in the refetchInterval option aligns with
the chart-level target; adjust the line that assigns refetchInterval (the block
using refetchInterval and isTabVisible) accordingly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8697fd87-a58a-4a21-a273-7c122c96cc95

📥 Commits

Reviewing files that changed from the base of the PR and between 5155eac and fab79a2.

📒 Files selected for processing (12)

• .gitignore
• dashboard/src/app/router.tsx
• dashboard/src/components/charts/all-nodes-stacked-bar-chart.tsx
• dashboard/src/components/charts/area-costume-chart.tsx
• dashboard/src/components/charts/costume-bar-chart.tsx
• dashboard/src/components/charts/user-sub-update-pie-chart.tsx
• dashboard/src/features/dashboard/components/admin-statistics-card.tsx
• dashboard/src/features/dashboard/components/workers-health-card.tsx
• dashboard/src/features/users/components/users-statistics.tsx
• dashboard/src/hooks/use-document-visibility.ts
• dashboard/src/hooks/use-version-check.ts
• dashboard/src/pages/_dashboard._index.tsx