fix(ui): hide RAM/CPU/VRAM in header by default; opt in via Settings → Performance

[debpalash]

Continuation of the "calm chrome" pass started in #105. Removes the loudest piece of always-visible telemetry from the welcome screen.

What was annoying

`RAM 12.8/16G CPU 25% VRAM 3.2G ●Idle Flush` lived in the header beside the OmniVoice brand. A user picking "Voice Clone" doesn't need a resource monitor. Telemetry chrome is the opposite of "a first-run that actually works."

What's hidden vs kept

Element	Default visible?	Why
`RAM 12.8/16G`	Hidden	Pure observational
`CPU 25%`	Hidden	Pure observational
`VRAM 3.2G`	Hidden	Pure observational
`●Idle` / `Loading…` / `Ready` status badge	Visible	Action-relevant — user needs to know when model is loading
`Flush` dropdown	Visible	Action — quick access to memory management

How to enable

Settings → Performance → "Show live system metrics in header"

Persists via the Zustand store (same path as the existing torch.compile toggle, so the "Performance" panel clusters all perf controls).

Test plan

• `bun run typecheck:ci` clean
• Launch app → header shows just `OmniVoice` brand + bell + wave + status + Flush — no numeric counters
• Settings → Performance → toggle ON → counters appear
• Reload → setting persists

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added a "Show live system metrics in header" toggle in the Performance settings panel, allowing users to control the display of real-time RAM, CPU, and VRAM statistics in the application header.
  • The visibility preference is automatically saved and persists across sessions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 246b4ac8-e35f-4f02-b20b-e46a466f9697

📥 Commits

Reviewing files that changed from the base of the PR and between aece6f1 and 1e0bc98.

📒 Files selected for processing (4)

• frontend/src/components/Header.jsx
• frontend/src/components/settings/PerformancePanel.jsx
• frontend/src/store/index.ts
• frontend/src/store/prefsSlice.ts

---

📝 Walkthrough

Walkthrough

A new toggleable preference is added to conditionally display live system metrics (RAM/CPU/VRAM) in the header. The preference is stored in the Zustand app store, persisted via localStorage, controlled through a checkbox in the Performance Settings panel, and read by the Header component to show or hide the metrics.

Changes

Header Live Stats Visibility Toggle

Layer / File(s)	Summary
Store preference definition and persistence frontend/src/store/prefsSlice.ts, frontend/src/store/index.ts	PrefsSlice interface adds showHeaderLiveStats: boolean and setter; createPrefsSlice initializes it to false and wires the setter; store persistence (partialize) includes the new field so it survives reloads.
Performance settings toggle control frontend/src/components/settings/PerformancePanel.jsx	Component imports useAppStore and selects showHeaderLiveStats and setShowHeaderLiveStats; renders a checkbox and help text describing the default-off behavior for users to toggle the setting.
Header conditional live stats rendering frontend/src/components/Header.jsx	Component imports useAppStore and reads showHeaderLiveStats; wraps the RAM/CPU/VRAM stat spans in a conditional block so they only render when the preference is true.

🎯 2 (Simple) | ⏱️ ~12 minutes

🐰 A stats toggle hops into view,
Settings now control what's true,
Header metrics dance on demand,
Preferences persisted, oh so grand! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and accurately summarizes the main change: hiding RAM/CPU/VRAM stats in the header by default with an opt-in toggle in Settings.
Description check	✅ Passed	The description covers Summary, Changes, and Testing sections comprehensively; Type checkbox marking is implied through the fix(ui) prefix; all critical information is present.
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.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/header-hide-live-stats

---

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