From 5b9075c6c2ea0a90bfd0bb2e314c978dfb675de6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Jan 2026 13:27:02 +0000
Subject: [PATCH 1/2] feat: add shadcn MCP server configuration

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.
---
 .mcp.json |  8 ++++++++
 CLAUDE.md | 17 +++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 .mcp.json

diff --git a/.mcp.json b/.mcp.json
new file mode 100644
index 0000000..9d30c31
--- /dev/null
+++ b/.mcp.json
@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
+    }
+  }
+}
diff --git a/CLAUDE.md b/CLAUDE.md
index 0601eff..fdff601 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -97,3 +97,20 @@ Pre-commit hooks auto-run on commit (ruff format, ruff check, import sorting).
 - Services: MariaDB 10.6, Redis (ports 13000, 11000)
 - Python 3.14, Node 24
 - Runs: `bench --site test_site run-tests --app hazelnode`
+
+## MCP Servers
+
+### shadcn MCP
+
+The project includes shadcn MCP server configuration (`.mcp.json`) for AI-assisted component management. This enables:
+
+- Browse and search shadcn components
+- Install components using natural language
+- Works with Claude Code, Cursor, and VS Code
+
+**Example prompts:**
+- "Show me all available components in the shadcn registry"
+- "Add the button, dialog and card components to my project"
+- "Create a contact form using components from the shadcn registry"
+
+**Configuration:** `frontend/components.json` (style: new-york, baseColor: slate)

From 3ca12f918a9f7c2bcb3b1e8e281ce74f03481a4b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Jan 2026 13:34:47 +0000
Subject: [PATCH 2/2] refactor: migrate dialogs from HeadlessUI to shadcn/Radix

- Replace catalyst-dialog (HeadlessUI) with shadcn dialog (Radix)
- Update create-dialog, set-trigger-dialog, confirm-dialog components
- Add data-testid attributes for stable E2E test selectors
- Update workflow-list.page.ts E2E page object for new dialog selectors
- Remove unused catalyst-dialog.tsx
---
 e2e/pages/workflow-list.page.ts               |  16 +--
 .../src/components/common/confirm-dialog.tsx  |  56 ++++----
 .../src/components/ui/catalyst-dialog.tsx     | 134 ------------------
 .../components/workflows/create-dialog.tsx    |  42 +++---
 .../workflows/set-trigger-dialog.tsx          |  63 ++++----
 5 files changed, 96 insertions(+), 215 deletions(-)
 delete mode 100644 frontend/src/components/ui/catalyst-dialog.tsx

diff --git a/e2e/pages/workflow-list.page.ts b/e2e/pages/workflow-list.page.ts
index de9554c..34f8bb2 100644
--- a/e2e/pages/workflow-list.page.ts
+++ b/e2e/pages/workflow-list.page.ts
@@ -29,13 +29,13 @@ export class WorkflowListPage {
 		this.loadingSkeleton = page.locator('[class*="skeleton"]');
 		this.errorMessage = page.locator('text=Error loading workflows');
 
-		// Create dialog elements - HeadlessUI dialog panel
-		// Use content-based selectors as HeadlessUI transitions can leave role="dialog" in DOM
-		this.createDialog = page.locator('text=Create new workflow');
-		// Input has id="title"
-		this.titleInput = page.locator('input#title');
-		this.createButton = page.locator('button:has-text("Create"):not(:has-text("Creating"))');
-		this.cancelButton = page.locator('button:has-text("Cancel")');
+		// Create dialog elements - shadcn/Radix dialog
+		// Use data-testid for stable selectors with Radix dialogs
+		this.createDialog = page.locator('[data-testid="create-workflow-dialog"]');
+		// Input has id="title" within the dialog
+		this.titleInput = this.createDialog.locator('input#title');
+		this.createButton = this.createDialog.locator('button:has-text("Create"):not(:has-text("Creating"))');
+		this.cancelButton = this.createDialog.locator('button:has-text("Cancel")');
 	}
 
 	/**
@@ -74,7 +74,7 @@ export class WorkflowListPage {
 		await this.newWorkflowButton.waitFor({ state: 'visible', timeout: 10000 });
 		await expect(this.newWorkflowButton).toBeEnabled();
 		await this.newWorkflowButton.click();
-		// Wait for dialog title to appear (HeadlessUI transitions)
+		// Wait for dialog to appear (Radix uses data-state="open")
 		await this.createDialog.waitFor({ state: 'visible', timeout: 15000 });
 		// Wait for input to be visible and interactable
 		await this.titleInput.waitFor({ state: 'visible', timeout: 5000 });
diff --git a/frontend/src/components/common/confirm-dialog.tsx b/frontend/src/components/common/confirm-dialog.tsx
index 80d7fa0..2c2e7d2 100644
--- a/frontend/src/components/common/confirm-dialog.tsx
+++ b/frontend/src/components/common/confirm-dialog.tsx
@@ -1,10 +1,12 @@
 import { createContext, useCallback, useRef, useState } from 'react';
 import {
   Dialog,
-  DialogActions,
+  DialogContent,
   DialogDescription,
+  DialogFooter,
+  DialogHeader,
   DialogTitle,
-} from '@/components/ui/catalyst-dialog';
+} from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
 
 interface ConfirmOptions {
@@ -47,33 +49,35 @@ export function ConfirmDialogProvider({
     <ConfirmContext.Provider value={confirm}>
       {children}
       <Dialog
-        size="sm"
         open={state.isOpen}
-        onClose={() => fn.current && fn.current(false)}
+        onOpenChange={(open) => !open && fn.current && fn.current(false)}
       >
-        <DialogTitle>{state.title}</DialogTitle>
+        <DialogContent className="sm:max-w-sm" data-testid="confirm-dialog">
+          <DialogHeader>
+            <DialogTitle>{state.title}</DialogTitle>
+            {state.description && (
+              <DialogDescription>{state.description}</DialogDescription>
+            )}
+          </DialogHeader>
 
-        {state.description && (
-          <DialogDescription>{state.description}</DialogDescription>
-        )}
-
-        <DialogActions>
-          <Button outline onClick={() => fn.current && fn.current(false)}>
-            Cancel
-          </Button>
-          <Button
-            color={
-              state.actionType == 'danger'
-                ? 'rose'
-                : state.actionType == 'warning'
-                  ? 'yellow'
-                  : 'lime'
-            }
-            onClick={() => fn.current && fn.current(true)}
-          >
-            Confirm
-          </Button>
-        </DialogActions>
+          <DialogFooter className="mt-4">
+            <Button outline onClick={() => fn.current && fn.current(false)}>
+              Cancel
+            </Button>
+            <Button
+              color={
+                state.actionType == 'danger'
+                  ? 'rose'
+                  : state.actionType == 'warning'
+                    ? 'yellow'
+                    : 'lime'
+              }
+              onClick={() => fn.current && fn.current(true)}
+            >
+              Confirm
+            </Button>
+          </DialogFooter>
+        </DialogContent>
       </Dialog>
     </ConfirmContext.Provider>
   );
diff --git a/frontend/src/components/ui/catalyst-dialog.tsx b/frontend/src/components/ui/catalyst-dialog.tsx
deleted file mode 100644
index 423253d..0000000
--- a/frontend/src/components/ui/catalyst-dialog.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import {
-  Description as HeadlessDescription,
-  Dialog as HeadlessDialog,
-  DialogPanel as HeadlessDialogPanel,
-  DialogTitle as HeadlessDialogTitle,
-  Transition as HeadlessTransition,
-  TransitionChild as HeadlessTransitionChild,
-  type DialogProps as HeadlessDialogProps,
-} from '@headlessui/react';
-import clsx from 'clsx';
-import type React from 'react';
-import { Fragment } from 'react';
-import { Text } from './text';
-
-const sizes = {
-  xs: 'sm:max-w-xs',
-  sm: 'sm:max-w-sm',
-  md: 'sm:max-w-md',
-  lg: 'sm:max-w-lg',
-  xl: 'sm:max-w-xl',
-  '2xl': 'sm:max-w-2xl',
-  '3xl': 'sm:max-w-3xl',
-  '4xl': 'sm:max-w-4xl',
-  '5xl': 'sm:max-w-5xl',
-};
-
-export function Dialog({
-  open,
-  onClose,
-  size = 'lg',
-  className,
-  children,
-  ...props
-}: {
-  size?: keyof typeof sizes;
-  children: React.ReactNode;
-} & HeadlessDialogProps) {
-  return (
-    <HeadlessTransition appear as={Fragment} show={open} {...props}>
-      <HeadlessDialog onClose={onClose}>
-        <HeadlessTransitionChild
-          as={Fragment}
-          enter="ease-out duration-100"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/25 px-2 py-2 focus:outline-0 dark:bg-zinc-950/50 sm:px-6 sm:py-8 lg:px-8 lg:py-16" />
-        </HeadlessTransitionChild>
-
-        <HeadlessTransitionChild
-          className="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0"
-          enter="ease-out duration-100"
-          enterFrom="opacity-0 translate-y-12 sm:translate-y-0"
-          enterTo="opacity-100 translate-y-0"
-          leave="ease-in duration-100"
-          leaveFrom="opacity-100 translate-y-0"
-          leaveTo="opacity-0 translate-y-12 sm:translate-y-0"
-        >
-          <div className="grid min-h-full grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr] sm:p-4">
-            <HeadlessTransitionChild
-              as={HeadlessDialogPanel}
-              className={clsx(
-                className,
-                sizes[size],
-                'row-start-2 w-full min-w-0 rounded-t-3xl bg-white p-[--gutter] shadow-lg ring-1 ring-zinc-950/10 [--gutter:theme(spacing.8)] dark:bg-zinc-900 dark:ring-white/10 sm:mb-auto sm:rounded-2xl forced-colors:outline',
-              )}
-              enter="ease-out duration-100"
-              enterFrom="sm:scale-95"
-              enterTo="sm:scale-100"
-              leave="ease-in duration-100"
-              leaveFrom="sm:scale-100"
-              leaveTo="sm:scale-100"
-            >
-              {children}
-            </HeadlessTransitionChild>
-          </div>
-        </HeadlessTransitionChild>
-      </HeadlessDialog>
-    </HeadlessTransition>
-  );
-}
-
-export function DialogTitle({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<'div'>) {
-  return (
-    <HeadlessDialogTitle
-      {...props}
-      className={clsx(
-        className,
-        'text-balance text-lg/6 font-semibold text-zinc-950 dark:text-white sm:text-base/6',
-      )}
-    />
-  );
-}
-
-export function DialogDescription({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<'div'>) {
-  return (
-    <HeadlessDescription
-      as={Text}
-      {...props}
-      className={clsx(className, 'mt-2 text-pretty')}
-    />
-  );
-}
-
-export function DialogBody({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<'div'>) {
-  return <div {...props} className={clsx(className, 'mt-6')} />;
-}
-
-export function DialogActions({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<'div'>) {
-  return (
-    <div
-      {...props}
-      className={clsx(
-        className,
-        'mt-8 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:flex-row sm:*:w-auto',
-      )}
-    />
-  );
-}
diff --git a/frontend/src/components/workflows/create-dialog.tsx b/frontend/src/components/workflows/create-dialog.tsx
index f5c3631..64b9ca0 100644
--- a/frontend/src/components/workflows/create-dialog.tsx
+++ b/frontend/src/components/workflows/create-dialog.tsx
@@ -4,25 +4,24 @@ import { useFrappeCreateDoc } from 'frappe-react-sdk';
 
 import {
   Dialog,
-  DialogActions,
-  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
   DialogTitle,
-} from '@/components/ui/catalyst-dialog';
+} from '@/components/ui/dialog';
 
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
 import { useNavigate } from '@tanstack/react-router';
-import { type DialogProps as HeadlessDialogProps } from '@headlessui/react';
 
 export default function CreateWorkflowDialog({
   open,
   onClose,
-  ...props
 }: {
   open: boolean | undefined;
   onClose: (isOpen: boolean) => void;
-} & HeadlessDialogProps) {
+}) {
   const [workflowTitle, setWorkflowTitle] = useState('');
   const navigate = useNavigate();
 
@@ -53,11 +52,16 @@ export default function CreateWorkflowDialog({
   }
 
   return (
-    <Dialog open={open} onClose={onClose} {...props}>
-      <DialogTitle>Create new workflow</DialogTitle>
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent
+        className="sm:max-w-lg"
+        data-testid="create-workflow-dialog"
+      >
+        <DialogHeader>
+          <DialogTitle>Create new workflow</DialogTitle>
+        </DialogHeader>
 
-      <DialogBody>
-        <div>
+        <div className="mt-4">
           <Label htmlFor="title">Title</Label>
           <Input
             value={workflowTitle}
@@ -67,16 +71,16 @@ export default function CreateWorkflowDialog({
             placeholder="Send an email on form submit"
           />
         </div>
-      </DialogBody>
 
-      <DialogActions>
-        <Button outline onClick={() => onClose(false)}>
-          Cancel
-        </Button>
-        <Button color="lime" onClick={handleCreateWorkflow} disabled={loading}>
-          {loading ? 'Creating...' : 'Create'}
-        </Button>
-      </DialogActions>
+        <DialogFooter className="mt-6">
+          <Button outline onClick={() => onClose(false)}>
+            Cancel
+          </Button>
+          <Button color="lime" onClick={handleCreateWorkflow} disabled={loading}>
+            {loading ? 'Creating...' : 'Create'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
     </Dialog>
   );
 }
diff --git a/frontend/src/components/workflows/set-trigger-dialog.tsx b/frontend/src/components/workflows/set-trigger-dialog.tsx
index 9a5ca82..b649bad 100644
--- a/frontend/src/components/workflows/set-trigger-dialog.tsx
+++ b/frontend/src/components/workflows/set-trigger-dialog.tsx
@@ -3,11 +3,11 @@ import { useFrappeGetDocList, useFrappeUpdateDoc } from 'frappe-react-sdk';
 
 import {
   Dialog,
+  DialogContent,
   DialogDescription,
-  DialogBody,
+  DialogHeader,
   DialogTitle,
-} from '@/components/ui/catalyst-dialog';
-import { type DialogProps as HeadlessDialogProps } from '@headlessui/react';
+} from '@/components/ui/dialog';
 
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -20,7 +20,7 @@ export default function SetTriggerDialog({
 }: {
   open: boolean | undefined;
   onClose: (isOpen: boolean) => void;
-} & HeadlessDialogProps) {
+}) {
   const editorStore = useEditorStore((state) => ({
     appendNode: state.appendNode,
     removeNode: state.removeNode,
@@ -58,32 +58,39 @@ export default function SetTriggerDialog({
   }
 
   return (
-    <Dialog open={open} onClose={onClose} size="3xl">
-      <DialogTitle>Select a trigger</DialogTitle>
-      <DialogDescription>
-        The event that will trigger a run of this workflow
-      </DialogDescription>
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent
+        className="sm:max-w-3xl"
+        data-testid="set-trigger-dialog"
+      >
+        <DialogHeader>
+          <DialogTitle>Select a trigger</DialogTitle>
+          <DialogDescription>
+            The event that will trigger a run of this workflow
+          </DialogDescription>
+        </DialogHeader>
 
-      <DialogBody>
-        {isLoading && (
-          <Skeleton className="h-12 w-full"></Skeleton>
-        )}
-        {error && (
-          <span>Error fetching list of triggers...</span>
-        )}
+        <div className="mt-4">
+          {isLoading && (
+            <Skeleton className="h-12 w-full"></Skeleton>
+          )}
+          {error && (
+            <span>Error fetching list of triggers...</span>
+          )}
 
-        {!error && triggers && (
-          <ol className="flex flex-col gap-2">
-            {triggers.map((trigger) => (
-              <li key={trigger.name}>
-                <Button onClick={() => setTrigger(trigger)} color="fuchsia">
-                  {trigger.name}
-                </Button>
-              </li>
-            ))}
-          </ol>
-        )}
-      </DialogBody>
+          {!error && triggers && (
+            <ol className="flex flex-col gap-2">
+              {triggers.map((trigger) => (
+                <li key={trigger.name}>
+                  <Button onClick={() => setTrigger(trigger)} color="fuchsia">
+                    {trigger.name}
+                  </Button>
+                </li>
+              ))}
+            </ol>
+          )}
+        </div>
+      </DialogContent>
     </Dialog>
   );
 }