Add mouse-reactive pulsating effects to graph dashboards

[jbingham17]

Summary

• Graphs react to mouse movement with a radial glow that follows the cursor across CPU and Memory panels
• Pulsating animations activate on hover: chart area breathes, values glow, core indicators stagger, memory bar pulses
• All effects smoothly fade in/out on mouse enter/leave

Test plan

• Hover over the CPU graph panel and verify radial glow follows cursor
• Confirm graph area, percentage value, and core indicators pulsate on hover
• Hover over the Memory graph panel and verify same radial glow behavior
• Confirm memory bar and stat values pulse with cascading delays
• Verify all animations stop smoothly when mouse leaves the panels
• Check no layout shifts or z-index issues during hover

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added interactive glow effects to graph cards that respond to mouse position
  • Introduced Alert Bar displaying system alerts with info, warning, and critical severity levels
  • Added Status Bar with live indicator
  • Enhanced memory display with human-readable values and percentages
  • Added hover animations for graphs, values, and indicators

[coderabbitai]

Walkthrough

The changes introduce interactive visual enhancements and a new alert monitoring system. A new AlertBar component displays CPU and memory usage warnings at three severity levels (info, warn, critical) based on configurable thresholds. CSS enhancements add mouse-tracking glow effects and pulsating animations to graph cards on hover. CpuGraph and MemoryGraph components now track mouse position and apply hover state styling. MemoryGraph expands its display to show usage with percentages and human-readable byte formatting. StatusBar gains a live indicator that toggles every second. The updated formatting in MemoryBar adjusts unit labels and spacing. All changes integrate through App.tsx while maintaining existing component APIs.

---

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 the current code and only fix it if needed.

Inline comments:
In `@src/App.tsx`:
- Line 75: AlertBar is receiving metrics.cpuUsage (an array of CPU objects) but
expects a numeric CPU usage for its alert calculations; compute the numeric
average (or appropriate single numeric metric) from the array before passing it
to AlertBar. In App.tsx replace the direct prop use of metrics.cpuUsage with a
computed value (e.g., derive avgCpu from metrics.cpuUsage using a reducer over
the CPU objects) and pass that numeric avgCpu to <AlertBar cpuUsage={...} /> so
AlertBar’s severity calculation (in AlertBar component) receives a number
instead of an array.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 37273158-79de-4c12-81fb-1b2cd68976c4

📥 Commits

Reviewing files that changed from the base of the PR and between 74b2ccb and 01c76e1.

📒 Files selected for processing (7)

• src/App.css
• src/App.tsx
• src/components/AlertBar.tsx
• src/components/CpuGraph.tsx
• src/components/MemoryBar.tsx
• src/components/MemoryGraph.tsx
• src/components/StatusBar.tsx

📜 Review details

🧰 Additional context used

📓 Path-based instructions (2)

**/*

⚙️ CodeRabbit configuration file

**/*: - Ignore minor or stylistic concerns. - Restrict feedback to errors, security risks, or functionality-breaking problems. - Do not post comments on code style, formatting, or non-critical
improvements.

• Keep reviews short: flag only issues that make the PR unsafe to merge. - Limit review comments to 3–5 items maximum, unless additional blockers
  exist.
• Group similar issues into a single comment instead of posting multiple
  notes.
• Skip repetition — if a pattern repeats, mention it once at a summary
  level only.
• Do not add general suggestions, focus strictly on merge-blocking
  concerns.
• If there are no critical problems, respond with minimal approval
  (e.g., 'Looks good'). Do not add additional review.
• Avoid line-by-line commentary unless it highlights a critical bug or security hole. - Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues. - Ignore minor optimization opportunities — focus solely on correctness and safety. - Provide a top-level summary of critical blockers rather than detailed per-line notes. - Comment only when the issue must be resolved before merge — otherwise remain silent. - When in doubt, err on the side of fewer comments — brevity and
  blocking issues only.
• Avoid posting any refactoring issues

Files:

• src/App.tsx
• src/components/StatusBar.tsx
• src/components/CpuGraph.tsx
• src/components/MemoryGraph.tsx
• src/App.css
• src/components/MemoryBar.tsx
• src/components/AlertBar.tsx

src/components/**

⚙️ CodeRabbit configuration file

Review React components for accessibility, proper use of hooks, and consistent naming conventions.

Files:

• src/components/StatusBar.tsx
• src/components/CpuGraph.tsx
• src/components/MemoryGraph.tsx
• src/components/MemoryBar.tsx
• src/components/AlertBar.tsx

🪛 Stylelint (17.3.0)

src/App.css

[error] 224-224: Expected empty line before declaration (declaration-empty-line-before)

(declaration-empty-line-before)

---

[error] 309-309: Expected keyframe name "graphPulsate" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

---

[error] 320-320: Expected keyframe name "valuePulsate" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

---

[error] 331-331: Expected keyframe name "corePulsate" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

---

[error] 342-342: Expected keyframe name "barPulsate" to be kebab-case (keyframes-name-pattern)

(keyframes-name-pattern)

---

[error] 323-323: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

---

[error] 327-327: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

---

[error] 327-327: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

---

[error] 345-345: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

---

[error] 349-349: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

---

[error] 349-349: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Fix AlertBar CPU input shape (current value breaks alert calculation).

Line 75 passes metrics.cpuUsage (array of CPU objects), but AlertBar computes numeric averages from cpuUsage. This makes alert severity calculation invalid.

Patch

-      <AlertBar cpuUsage={metrics.cpuUsage} memPercent={metrics.memPercent} />
+      <AlertBar cpuUsage={metrics.cpuUsage.map((cpu) => cpu.usage)} memPercent={metrics.memPercent} />

As per coding guidelines "Restrict feedback to errors, security risks, or functionality-breaking problems."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/App.tsx` at line 75, AlertBar is receiving metrics.cpuUsage (an array of
CPU objects) but expects a numeric CPU usage for its alert calculations; compute
the numeric average (or appropriate single numeric metric) from the array before
passing it to AlertBar. In App.tsx replace the direct prop use of
metrics.cpuUsage with a computed value (e.g., derive avgCpu from
metrics.cpuUsage using a reducer over the CPU objects) and pass that numeric
avgCpu to <AlertBar cpuUsage={...} /> so AlertBar’s severity calculation (in
AlertBar component) receives a number instead of an array.