feat: added a roast/hype widget in the dashboard

[madsysharma]

Summary

This PR introduces the "Roast & Hype" interactive widget to the DevTrack dashboard to increase user engagement and drive organic social sharing. By utilizing the gemini-1.5-flash model, the app can now analyze a user's coding stats (commits, merged PRs, failed goals, top languages) and generate either an uplifting hype message or a hilariously brutal (but SFW) roast.

Fixes #2483

What Changed

• Frontend: created RoastHypeWidget.tsx, a Tailwind-styled card with a mode toggle (Hype/Roast) and a click-to-copy feature formatted perfectly for sharing on platforms like LinkedIn or X.
• Backend: added serverless route /api/ai/roast/route.ts that securely accepts aggregated dashboard stats and acts as a proxy to the Gemini API.
• AI Integration: integrated @google/generative-ai with strict prompt engineering ensuring outputs stay under 3 sentences and maintain the correct persona.

Acceptance Criteria

• Create the UI widget on the dashboard with the Roast/Hype toggle.
• Build the /api/ai/roast Next.js serverless route to aggregate user stats.
• Integrate gemini-1.5-flash with strict prompt engineering for safe, concise outputs.
• Add "Copy to clipboard" functionality for seamless social sharing.

How to Test

1. Add GEMINI_API_KEY=your_key_here to your .env.local file.
2. Start the dev server (npm run dev) and navigate to the dashboard.
3. Toggle between "Hype" and "Roast", generate a message, and test the clipboard copy button.
4. Verify that the generated responses align with the persona and remain concise (< 3 sentences).

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• ✨ New feature (non-breaking change that adds functionality)
• 💥 Breaking change (fix or feature that changes existing behavior)
• 📝 Documentation update
• ♻️ Refactor / code cleanup (no functional change)
• ⚡ Performance improvement
• 🔒 Security fix
• 🧪 Tests only

Screenshots / Recordings

Screen.Recording.2026-06-17.091738.mp4

Checklist

• Linked the related issue above
• Self-reviewed my own diff
• No unnecessary console.log, debug code, or commented-out blocks
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Added or updated tests where applicable (N/A: no tests)
• Updated documentation / comments if behavior changed (N/A: no update in documentation or comments)

---

Accessibility (UI changes only)

• Keyboard navigation works correctly
• Color contrast meets WCAG AA standard
• ARIA labels / roles added where needed
• Tested on mobile / responsive layout

[github-actions]

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

• Make sure CI is passing (type-check + lint)
• Double-check the PR description is filled out and the issue is linked
• Feel free to ask questions in Discussions if you need help

If you find DevTrack useful, a ⭐ star on the repo is always appreciated — it helps the project grow and attract more contributors!

[github-actions]

GSSoC Label Checklist 🏷️

@Umbrella-io — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[madsysharma]

Hi @Priyanshu-byte-coder, please review this PR. Thanks.