perf(modules): replace index-based keys with stable identifiers in list renders

[angelina-2206]

Summary

• what changed: Audited all .tsx files in modules/ for .map() calls rendering components with array-index key props, and replaced them with stable, unique identifiers.
• why it changed: Using array index as a React key causes rendering issues when lists are dynamically mutated (items added, deleted, or reordered), as React cannot correctly reconcile component state. Stable keys ensure predictable re-renders and prevent subtle UI bugs.

Type of change

• Refactor

Related issue

Closes #303

Validation

• npm run lint
• npm test
• npm run build

List any additional manual verification you performed:

• Confirmed no new TypeScript errors were introduced by running npx tsc --noEmit.

Screenshots or recordings

No UI changes — this is a React key prop stability fix.

Checklist

• I kept this PR focused on one primary change
• I updated documentation if behavior changed
• I did not commit secrets, local logs, or scratch files
• I am requesting review on the correct scope

Summary by CodeRabbit

• Refactor
  • Enhanced the stability of list rendering across multiple components including features display, breadcrumbs navigation, collaboration avatars, environment manager, contribution charts, and statistics panels. Lists now maintain better integrity when items are reordered or added/removed.

[qodo-code-review]

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

[github-actions]

👋 Thanks for opening a PR, @angelina-2206!

Your PR has entered the 🚦 PR Review Pipeline.

⚪ Standard PR detected — your PR will follow the standard review pipeline.

---

What happens next

Stage	Reviewer	Checks
Stage 1 — Automated Validation	🤖 Bot	DCO · Format · AI/Slop · Duplicate
Stage 2 — Human Review	👥 Maintainer	Code + Quality Review
Stage 3 — PA / Maintainer Review	🔑 Project Admin	Final Merge Decision

A pipeline status comment will appear below and update automatically as your PR progresses.

---

While you wait

• Sign all commits (git commit -s)
• Link your issue (Closes #123)
• Use a feature branch (not main)
• Avoid unrelated changes

This comment is posted only once.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 18cec160-fd25-4893-a1fb-750ec143e3ae

📥 Commits

Reviewing files that changed from the base of the PR and between f12b223 and 5ae7c51.

📒 Files selected for processing (7)

• modules/home/features.tsx
• modules/playground/components/breadcrumbs.tsx
• modules/playground/components/collaboration-avatars.tsx
• modules/playground/components/env-manager.tsx
• modules/profile/components/AIInsights.tsx
• modules/profile/components/ContributionHeatmap.tsx
• modules/profile/components/KPIStats.tsx

---

Walkthrough

This PR audits and fixes React list key stability across multiple display components. EnvManager gains an id field to track environment variables, while home, playground, and profile components replace index-based keys with stable identifiers tied to feature titles, paths, user names, entry names, dates, and labels.

Changes

React List Key Stabilization

Layer / File(s)	Summary
EnvManager ID field and ID generation modules/playground/components/env-manager.tsx	EnvVar interface adds id: string; parsed and new environment variable entries receive generated unique IDs; rendering uses v.id as the React key instead of array index.
Display component key stabilization modules/home/features.tsx, modules/playground/components/breadcrumbs.tsx, modules/playground/components/collaboration-avatars.tsx, modules/profile/components/AIInsights.tsx, modules/profile/components/ContributionHeatmap.tsx, modules/profile/components/KPIStats.tsx	Six display components switch from index-based keys to stable identifiers: Features uses feature.title, Breadcrumbs uses cumulative path strings, CollaborationAvatars uses u.name, AIInsights uses entry.name, ContributionHeatmap uses day.date and week[0]?.date, and KPIStats uses item.label.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• piyushdotcomm

Poem

A rabbit hops through lists so long,
With keys that shift and drift along—
But stable IDs save the day,
No more remounts in every way! 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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
Title check	✅ Passed	The title clearly and concisely summarizes the main change: replacing index-based React keys with stable identifiers across module list renders.
Description check	✅ Passed	The description follows the template with all required sections completed: summary of changes, type of change, related issue, validation steps, and checklist items all properly filled out.
Linked Issues check	✅ Passed	All code changes in the PR directly address issue #303 objectives: auditing .tsx files in modules/ for .map() calls and replacing array-index keys with stable identifiers.
Out of Scope Changes check	✅ Passed	All changes are in-scope refactoring focused on React key stability; no unrelated modifications to other functionality or features are present.

_{✏️ 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.}