feat(ui): add DevProfiler component for tracking render counts in dev mode

[sean-brydon]

What does this PR do?

Adds a new DevProfiler component that helps developers track component render counts during development. The component:

• Uses React refs to track render counts without causing additional re-renders
• Only renders in development mode (process.env.NODE_ENV === "development") - returns children directly in production
• Displays a small badge in the bottom-right corner showing total render count
• Opens a floating panel when clicked, showing per-component render statistics sorted by count
• Color-codes render counts (green < 5, yellow 5-10, red > 10) to highlight potential performance issues
• Exports a useRenderCount(componentName) hook for components to register themselves for tracking
• Uses @coss/ui components (Badge, Button, Popover, ScrollArea) for consistent styling

Usage

import { DevProfiler, useRenderCount } from "@calcom/ui/components/dev-profiler";

// Wrap your app
<DevProfiler>
  <App />
</DevProfiler>

// In components you want to track
function MyComponent() {
  useRenderCount("MyComponent");
  // ...
}

Changes included

• New DevProfiler component in packages/ui/components/dev-profiler/
• Added @coss/ui as a dependency to @calcom/ui
• Added path mapping in packages/ui/tsconfig.json for @coss/ui/* imports

Updates since last revision

• Refactored to use @coss/ui components (Badge, Button, Popover, ScrollArea) instead of custom classNames styling
• Removed Shell integration - component is now standalone and doesn't modify any existing files
• Badge variants map to render counts: success (<5), warning (5-10), error (>10)

Visual Demo (For contributors especially)

Badge (bottom-right corner):

Panel open with component statistics:

Color-coded render counts (red for >10 renders):

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - this is a dev-only utility component.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Run the app in development mode (yarn dev)
2. Import and wrap any component tree with <DevProfiler> and use useRenderCount("ComponentName") in components you want to track
3. Look for the "Renders: X" badge in the bottom-right corner
4. Click the badge to open the panel and see render statistics
5. Interact with the page and watch counts update
6. Verify color coding: green (<5), yellow (5-10), red (>10)
7. Verify the component does NOT appear in production builds

Checklist

• I have read the contributing guide
• My code follows the style guidelines of this project
• I have commented my code, particularly in hard-to-understand areas
• I have checked if my changes generate no new warnings

---

Human Review Checklist

• Verify the dev-only check (process.env.NODE_ENV !== "development") properly tree-shakes in production builds
• Review the render tracking mechanism - the useEffect without dependencies is intentional for tracking every render
• Check that the forceUpdate pattern with useReducer is appropriate for this use case
• Verify @coss/ui components render correctly with the path mapping in tsconfig.json
• Confirm the @coss/ui dependency addition to @calcom/ui is appropriate

---

Link to Devin run: https://app.devin.ai/sessions/5924bb3dc1a240d0a6ab93a68a4c429e
Requested by: @sean-brydon (sean@cal.com)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

3 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
cal	Ignored		Dec 23, 2025 8:33pm
cal-companion	Ignored	Preview	Dec 23, 2025 8:33pm
cal-eu	Ignored		Dec 23, 2025 8:33pm

[devin-ai-integration]

Updated Screenshots with coss-ui Styling

Here are the new screenshots showing the DevProfiler component with coss-ui components (Badge, Button, Popover, ScrollArea):

Badge (bottom-right corner):

Panel open with component statistics:

The panel now shows:

• "Dev Profiler" title with Close button using coss-ui Button
• Summary showing tracked components and total renders
• Color-coded render counts using coss-ui Badge variants:
  • Green (success) for < 5 renders
  • Yellow (warning) for 5-10 renders
  • Red (error) for > 10 renders
• Scrollable list using coss-ui ScrollArea