Add Agents.md and improve metrics/color logic#38
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdded a new PR-review knowledge template document, consolidated CPU/memory color-threshold logic into a shared helper in the process table component, and made the system metrics hook choose the API URL based on the runtime mode (production vs non-production). Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/ProcessTable.tsx (1)
82-97: Clean refactor consolidating color threshold logic.The
getUsageColorhelper nicely eliminates duplication between CPU and memory coloring. The logic correctly maps 4 thresholds to 5 color ranges.Minor optional improvement: consider moving
getUsageColorand the threshold constants outside the component to avoid recreation on each render. This is a marginal optimization but improves clarity.♻️ Optional: Extract helper outside component
+const CPU_THRESHOLDS = [10, 30, 60, 85] as const; +const MEM_THRESHOLDS = [5, 15, 30, 50] as const; + +const USAGE_COLORS = [ + 'var(--color-text)', + 'var(--color-green)', + 'var(--color-yellow)', + 'var(--color-orange)', + 'var(--color-red)', +] as const; + +function getUsageColor(value: number, thresholds: readonly number[]): string { + for (let i = 0; i < thresholds.length; i++) { + if (value < thresholds[i]) return USAGE_COLORS[i]; + } + return USAGE_COLORS[USAGE_COLORS.length - 1]; +} + export function ProcessTable({ processes, filter }: ProcessTableProps) { // ... state hooks ... - const getUsageColor = (value: number, thresholds: number[]): string => { - const colors = [ - 'var(--color-text)', - 'var(--color-green)', - 'var(--color-yellow)', - 'var(--color-orange)', - 'var(--color-red)', - ]; - for (let i = 0; i < thresholds.length; i++) { - if (value < thresholds[i]) return colors[i]; - } - return colors[colors.length - 1]; - }; - - const getCpuColor = (cpu: number) => getUsageColor(cpu, [10, 30, 60, 85]); - const getMemColor = (mem: number) => getUsageColor(mem, [5, 15, 30, 50]); + const getCpuColor = (cpu: number) => getUsageColor(cpu, CPU_THRESHOLDS); + const getMemColor = (mem: number) => getUsageColor(mem, MEM_THRESHOLDS);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ProcessTable.tsx` around lines 82 - 97, Move the getUsageColor helper and the threshold arrays used by getCpuColor and getMemColor out of the component so they aren’t recreated on every render: extract getUsageColor as a module-level function and define constant arrays like CPU_THRESHOLDS = [10,30,60,85] and MEM_THRESHOLDS = [5,15,30,50], then change getCpuColor(cpu) to call getUsageColor(cpu, CPU_THRESHOLDS) and getMemColor(mem) to call getUsageColor(mem, MEM_THRESHOLDS) inside the component.
🤖 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/hooks/useSystemMetrics.ts`:
- Around line 4-6: The API_URL constant uses process.env.NODE_ENV which Vite
doesn't inject; update the conditional in the API_URL definition inside
useSystemMetrics.ts to use import.meta.env.MODE === 'production' instead of
process.env.NODE_ENV so production builds resolve to '/api/metrics' (adjust any
TypeScript types or linting complaints around import.meta if needed).
---
Nitpick comments:
In `@src/components/ProcessTable.tsx`:
- Around line 82-97: Move the getUsageColor helper and the threshold arrays used
by getCpuColor and getMemColor out of the component so they aren’t recreated on
every render: extract getUsageColor as a module-level function and define
constant arrays like CPU_THRESHOLDS = [10,30,60,85] and MEM_THRESHOLDS =
[5,15,30,50], then change getCpuColor(cpu) to call getUsageColor(cpu,
CPU_THRESHOLDS) and getMemColor(mem) to call getUsageColor(mem, MEM_THRESHOLDS)
inside the component.
🪄 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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f3cc37d2-999c-4928-908f-c47fa99aa28b
📒 Files selected for processing (3)
Agents.mdsrc/components/ProcessTable.tsxsrc/hooks/useSystemMetrics.ts
📜 Review details
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2026-02-18T05:07:00.671Z
Learnt from: jbingham17
Repo: coderabbit-demo/btop PR: 8
File: src/types.ts:32-32
Timestamp: 2026-02-18T05:07:00.671Z
Learning: In the coderabbit-demo/btop repository, avoid inline comments on TypeScript interface properties. Ensure property types are self-documenting through clear names and interface structure. If a property requires explanation, document it above the interface or with JSDoc comments for the property, not inline on the same line.
Applied to files:
src/hooks/useSystemMetrics.ts
🔇 Additional comments (1)
Agents.md (1)
1-24: Good addition: clear, structured knowledge-base template.This is clean, purpose-driven documentation and matches the PR objective. No blocking issues found.
Summary
Agents.mdas a knowledge base for AI agents, to be updated via the new CodeRabbit finishing touch recipegetUsageColorhelperTest plan
@coderabbitai run Update Agents.mdto test the custom recipe🤖 Generated with Claude Code
Summary by CodeRabbit
Documentation
Bug Fixes
Refactor