feat: add shadcn MCP server configuration

[NagariaHussain]

Enable AI-assisted component management for the frontend by adding
the shadcn MCP server config. This allows browsing, searching, and
installing shadcn components using natural language prompts.

Summary by CodeRabbit

• Refactor

  • Updated dialog components to use a new composition pattern with improved structural organization.

• New Features

  • Added MCP server configuration for AI-assisted component management and browsing.

• Documentation

  • Enhanced documentation with details on MCP server setup and configuration options.

• Tests

  • Updated dialog selectors in test automation to work with the new dialog implementation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request migrates dialog components from HeadlessUI-based catalyst dialogs to shadcn/Radix dialog components across the frontend application. The changes include removing the old catalyst-dialog component, updating three dialog implementations to use the new dialog structure, adding MCP configuration for shadcn tooling, and updating test selectors to match the new dialog markup.

Changes

Cohort / File(s)	Summary
MCP Configuration & Documentation .mcp.json, CLAUDE.md	Added MCP configuration file defining a shadcn server with npx command and arguments. Expanded CLAUDE.md with documentation detailing the shadcn MCP server configuration for AI-assisted component management, including features and example prompts.
Dialog Component Migration frontend/src/components/ui/catalyst-dialog.tsx	Removed entire catalyst-dialog file that exported Dialog, DialogTitle, DialogDescription, DialogBody, and DialogActions components built with HeadlessUI. File contained 134 lines of dialog composition logic with layered transitions and styling utilities.
Dialog Usage Updates frontend/src/components/common/confirm-dialog.tsx, frontend/src/components/workflows/create-dialog.tsx, frontend/src/components/workflows/set-trigger-dialog.tsx	Refactored three dialog implementations to use new shadcn/Radix dialog structure: replaced DialogActions with DialogFooter, replaced DialogBody with DialogContent, moved descriptions into DialogHeader, changed onClose to onOpenChange pattern, and removed HeadlessUI prop spreading from component signatures.
E2E Test Updates e2e/pages/workflow-list.page.ts	Updated create workflow dialog selectors from HeadlessUI-based patterns to stable [data-testid="create-workflow-dialog"] with scoped child selectors for inputs and buttons; adjusted narrative comments to reflect Radix dialog behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 Old catalyst whispers fade away,
Radix dialogs come out to play,
From HeaderUI's nested dance so tall,
shadcn brings simplicity to us all,
Components hop to a cleaner way! ✨

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title 'feat: add shadcn MCP server configuration' accurately describes the primary objective stated in the PR description, but the actual changeset includes a substantial refactor migrating dialogs from HeadlessUI to shadcn/Radix. The title addresses only the first objective and omits the major dialog migration work.	Update the title to reflect both major changes, such as 'feat: add shadcn MCP server and migrate dialogs from HeadlessUI to shadcn/Radix' or focus the title on the more substantial change if that is the primary goal.
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 (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

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: 0

🧹 Nitpick comments (2)

frontend/src/components/common/confirm-dialog.tsx (1)

67-78: Use strict equality (===) instead of loose equality (==).

Per coding guidelines, TypeScript strict mode is enabled for frontend files. Prefer strict equality operators to avoid potential type coercion issues.

♻️ Suggested fix

             <Button
               color={
-                state.actionType == 'danger'
+                state.actionType === 'danger'
                   ? 'rose'
-                  : state.actionType == 'warning'
+                  : state.actionType === 'warning'
                     ? 'yellow'
                     : 'lime'
               }
               onClick={() => fn.current && fn.current(true)}
             >

.mcp.json (1)

1-8: Configuration is correctly structured.

The MCP server configuration matches shadcn's official documentation and will properly enable the shadcn CLI as an MCP server. Using shadcn@latest ensures you get the latest features and bugfixes, but note that this approach is not reproducible—each invocation pulls the latest published version, which could include breaking changes. For consistent, deterministic behavior (especially in CI/automation), consider pinning to a specific version: "shadcn@2.5.0" (or your desired version). Check the shadcn releases to select an appropriate version.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b6127f3 and 3ca12f9.

📒 Files selected for processing (7)

• .mcp.json
• CLAUDE.md
• e2e/pages/workflow-list.page.ts
• frontend/src/components/common/confirm-dialog.tsx
• frontend/src/components/ui/catalyst-dialog.tsx
• frontend/src/components/workflows/create-dialog.tsx
• frontend/src/components/workflows/set-trigger-dialog.tsx

💤 Files with no reviewable changes (1)

• frontend/src/components/ui/catalyst-dialog.tsx

🧰 Additional context used

📓 Path-based instructions (1)

frontend/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

frontend/**/*.{ts,tsx}: Enable strict mode for TypeScript
Use ESLint and Prettier for TypeScript linting and formatting

Files:

• frontend/src/components/common/confirm-dialog.tsx
• frontend/src/components/workflows/set-trigger-dialog.tsx
• frontend/src/components/workflows/create-dialog.tsx

🧬 Code graph analysis (2)

frontend/src/components/common/confirm-dialog.tsx (2)

frontend/src/components/ui/dialog.tsx (5)

• DialogContent (115-115)
• DialogHeader (116-116)
• DialogTitle (118-118)
• DialogDescription (119-119)
• DialogFooter (117-117)

frontend/src/components/ui/button.tsx (1)

• Button (191-222)

frontend/src/components/workflows/set-trigger-dialog.tsx (2)

frontend/src/components/ui/dialog.tsx (5)

• Dialog (110-110)
• DialogContent (115-115)
• DialogHeader (116-116)
• DialogTitle (118-118)
• DialogDescription (119-119)

frontend/src/components/ui/button.tsx (1)

• Button (191-222)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Server
• GitHub Check: Playwright E2E Tests

🔇 Additional comments (8)

CLAUDE.md (1)

100-116: Documentation is clear and well-structured.

The MCP servers section provides helpful guidance for AI-assisted component management, including practical example prompts and configuration references that align with the .mcp.json configuration.

frontend/src/components/common/confirm-dialog.tsx (1)

51-61: Dialog migration looks correct.

The transition to onOpenChange and the new DialogContent/DialogHeader structure is properly implemented. The data-testid attribute ensures stable E2E test selectors.

e2e/pages/workflow-list.page.ts (2)

32-38: Well-structured E2E selectors.

Using data-testid for the dialog container and scoping child elements within it is a robust pattern for E2E tests. The :not(:has-text("Creating")) pattern for the create button smartly handles the loading state.

---

72-81: LGTM!

The updated wait sequence and comments correctly reflect the Radix dialog behavior.

frontend/src/components/workflows/set-trigger-dialog.tsx (2)

60-71: Dialog structure migration is consistent.

The migration to DialogContent/DialogHeader follows the same pattern as the other dialogs in this PR. The data-testid attribute enables stable E2E test selectors.

---

73-92: Content structure is clean.

The loading, error, and success states are handled appropriately. The trigger list renders correctly with proper keys.

frontend/src/components/workflows/create-dialog.tsx (2)

54-84: Dialog migration is complete and well-structured.

The implementation correctly uses the new DialogContent/DialogHeader/DialogFooter composition. The data-testid="create-workflow-dialog" matches the E2E test selector in workflow-list.page.ts. Loading state is properly handled with the disabled button and text change.

---

30-52: Form handling logic is correct.

The validation, submission, and error handling follow a clean pattern. State is properly reset on successful creation.