From 6e9639eb8eba8ed17745bc78fe981480be35b2c9 Mon Sep 17 00:00:00 2001
From: Konstantinos Kopanidis <kkopanidis@users.noreply.github.com>
Date: Sun, 21 Jun 2026 19:43:13 +0300
Subject: [PATCH 1/5] feat(ui): unified communications templates management

Add list, create, edit, and delete flows for multi-channel templates plus
email-template migration entry points under Communications navigation.
---
 .../communications/templates/[_id]/page.tsx   | 138 ++++++++
 .../communications/templates/page.tsx         |  25 ++
 .../(modules)/email/templates/[_id]/page.tsx  |  21 ++
 .../communications/templates/columns.tsx      |  77 +++++
 .../templates/create-template-sheet.tsx       |  62 ++++
 .../communications/templates/dashboard.tsx    |  40 +++
 .../communications/templates/data-table.tsx   |  26 ++
 .../templates/template-form.tsx               | 312 ++++++++++++++++++
 src/components/email/templates/dashboard.tsx  |  11 +
 src/components/navigation/navList.config.ts   |   5 +
 src/lib/api/communications/templates.ts       |  66 ++++
 src/lib/models/communications/templates.ts    |  33 ++
 12 files changed, 816 insertions(+)
 create mode 100644 src/app/(dashboard)/(modules)/communications/templates/[_id]/page.tsx
 create mode 100644 src/app/(dashboard)/(modules)/communications/templates/page.tsx
 create mode 100644 src/components/communications/templates/columns.tsx
 create mode 100644 src/components/communications/templates/create-template-sheet.tsx
 create mode 100644 src/components/communications/templates/dashboard.tsx
 create mode 100644 src/components/communications/templates/data-table.tsx
 create mode 100644 src/components/communications/templates/template-form.tsx
 create mode 100644 src/lib/api/communications/templates.ts
 create mode 100644 src/lib/models/communications/templates.ts

diff --git a/src/app/(dashboard)/(modules)/communications/templates/[_id]/page.tsx b/src/app/(dashboard)/(modules)/communications/templates/[_id]/page.tsx
new file mode 100644
index 000000000..54e14c11b
--- /dev/null
+++ b/src/app/(dashboard)/(modules)/communications/templates/[_id]/page.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { CommunicationTemplate } from '@/lib/models/communications/templates';
+import {
+  getCommunicationTemplates,
+  updateCommunicationTemplate,
+} from '@/lib/api/communications/templates';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { useToast } from '@/lib/hooks/use-toast';
+import {
+  PageHeader,
+  PageTitle,
+  PageActions,
+} from '@/components/ui/page-header';
+import {
+  CommunicationTemplateForm,
+  CommunicationTemplateFormValues,
+} from '@/components/communications/templates/template-form';
+
+type CommunicationTemplatePageProps = {
+  params: Promise<{ _id: string }>;
+};
+
+export default function CommunicationTemplateDetailPage(
+  props: CommunicationTemplatePageProps
+) {
+  const [template, setTemplate] = useState<CommunicationTemplate | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [editing, setEditing] = useState(false);
+  const router = useRouter();
+  const { toast } = useToast();
+
+  useEffect(() => {
+    const load = async () => {
+      const { _id } = await props.params;
+      try {
+        const data = await getCommunicationTemplates({ search: _id, limit: 1 });
+        if (data.templateDocuments[0]) {
+          setTemplate(data.templateDocuments[0]);
+        }
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, [props]);
+
+  const handleSave = async (values: CommunicationTemplateFormValues) => {
+    if (!template) return;
+    await updateCommunicationTemplate(template._id, values)
+      .then(updated => {
+        setTemplate(updated);
+        setEditing(false);
+        toast({
+          title: 'Communications',
+          description: 'Template updated',
+        });
+        router.refresh();
+      })
+      .catch(err =>
+        toast({ title: 'Communications', description: err.message })
+      );
+  };
+
+  if (loading) {
+    return <p className="text-muted-foreground">Loading template...</p>;
+  }
+
+  if (!template) {
+    return <p className="text-muted-foreground">Template not found</p>;
+  }
+
+  const defaultValues: CommunicationTemplateFormValues = {
+    name: template.name,
+    templateDescription: template.summary,
+    channels: template.channels,
+    email: template.email,
+    push: template.push,
+    sms: template.sms,
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader>
+        <PageTitle>{template.name}</PageTitle>
+        <PageActions>
+          <Button
+            variant={editing ? 'secondary' : 'default'}
+            onClick={() => setEditing(current => !current)}
+          >
+            {editing ? 'Cancel edit' : 'Edit template'}
+          </Button>
+        </PageActions>
+      </PageHeader>
+
+      {!editing && (
+        <div className="space-y-4 rounded-lg border p-4">
+          {template.summary && (
+            <p className="text-sm text-muted-foreground">{template.summary}</p>
+          )}
+          <div className="flex flex-wrap gap-2">
+            {template.channels.map(channel => (
+              <Badge key={channel} variant="secondary" className="capitalize">
+                {channel}
+              </Badge>
+            ))}
+          </div>
+          {template.variables && template.variables.length > 0 && (
+            <div>
+              <p className="mb-2 text-sm font-medium">Variables</p>
+              <div className="flex flex-wrap gap-2">
+                {template.variables.map(variable => (
+                  <Badge key={variable} variant="outline">
+                    {`{{${variable}}}`}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {editing && (
+        <CommunicationTemplateForm
+          defaultValues={defaultValues}
+          disableName
+          submitLabel="Save changes"
+          onSubmit={handleSave}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/(modules)/communications/templates/page.tsx b/src/app/(dashboard)/(modules)/communications/templates/page.tsx
new file mode 100644
index 000000000..7dec71a5d
--- /dev/null
+++ b/src/app/(dashboard)/(modules)/communications/templates/page.tsx
@@ -0,0 +1,25 @@
+import { getCommunicationTemplates } from '@/lib/api/communications/templates';
+import { CommunicationTemplatesDashboard } from '@/components/communications/templates/dashboard';
+
+type CommunicationTemplatesParams = {
+  searchParams: Promise<{
+    pageIndex?: number;
+    sort?: string;
+    search?: string;
+  }>;
+};
+
+export default async function CommunicationTemplatesPage(
+  props: Readonly<CommunicationTemplatesParams>
+) {
+  const searchParams = await props.searchParams;
+
+  const templates = await getCommunicationTemplates({
+    skip: searchParams.pageIndex ? searchParams.pageIndex * 10 : 0,
+    limit: 10,
+    sort: searchParams.sort,
+    search: searchParams.search,
+  });
+
+  return <CommunicationTemplatesDashboard data={templates} />;
+}
diff --git a/src/app/(dashboard)/(modules)/email/templates/[_id]/page.tsx b/src/app/(dashboard)/(modules)/email/templates/[_id]/page.tsx
index c3b227048..6076c0cec 100644
--- a/src/app/(dashboard)/(modules)/email/templates/[_id]/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/templates/[_id]/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { getTemplates } from '@/lib/api/email';
+import { migrateFromEmailTemplate } from '@/lib/api/communications/templates';
 import React, { useEffect, useState } from 'react';
 import { EmailTemplate } from '@/lib/models/email';
 import { Button } from '@/components/ui/button';
@@ -153,6 +154,26 @@ export default function EmailTemplatePage(props: EmailTemplateProps) {
             <Edit className="h-4 w-4" />
             Edit Template
           </Button>
+          {!isExternallyManaged(template) && (
+            <Button
+              variant="outline"
+              className="flex items-center space-x-2"
+              onClick={() =>
+                migrateFromEmailTemplate({ emailTemplateId: template._id })
+                  .then(() =>
+                    toast({
+                      title: 'Communications',
+                      description: 'Template migrated to unified templates',
+                    })
+                  )
+                  .catch(err =>
+                    toast({ title: 'Communications', description: err.message })
+                  )
+              }
+            >
+              Migrate to unified
+            </Button>
+          )}
         </PageActions>
       </PageHeader>
 
diff --git a/src/components/communications/templates/columns.tsx b/src/components/communications/templates/columns.tsx
new file mode 100644
index 000000000..28a1a43d2
--- /dev/null
+++ b/src/components/communications/templates/columns.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import { ColumnDef } from '@tanstack/react-table';
+import moment from 'moment/moment';
+import { DeleteAlert } from '@/components/helpers/delete';
+import React, { useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { EyeIcon } from 'lucide-react';
+import { useToast } from '@/lib/hooks/use-toast';
+import { CommunicationTemplate } from '@/lib/models/communications/templates';
+import { deleteCommunicationTemplate } from '@/lib/api/communications/templates';
+import { Badge } from '@/components/ui/badge';
+
+export function useCommunicationTemplateColumns() {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  return useMemo<ColumnDef<CommunicationTemplate, unknown>[]>(
+    () => [
+      {
+        accessorKey: 'name',
+        header: 'Name',
+      },
+      {
+        accessorKey: 'channels',
+        header: 'Channels',
+        cell: ({ row }) => (
+          <div className="flex flex-wrap gap-1">
+            {row.original.channels.map(channel => (
+              <Badge key={channel} variant="secondary" className="capitalize">
+                {channel}
+              </Badge>
+            ))}
+          </div>
+        ),
+      },
+      {
+        accessorKey: 'variables',
+        header: 'Variables',
+        cell: ({ row }) => row.original.variables?.length ?? 0,
+      },
+      {
+        accessorKey: 'createdAt',
+        header: 'Created',
+        cell: props => moment(props.getValue() as string).format('DD MMM YYYY'),
+      },
+      {
+        id: 'delete',
+        header: '',
+        cell: props => (
+          <DeleteAlert
+            title="Delete template"
+            description={`Delete unified template "${props.row.original.name}"?`}
+            callback={() =>
+              deleteCommunicationTemplate(props.row.original._id)
+                .then(() => router.refresh())
+                .catch(err =>
+                  toast({ title: 'Communications', description: err.message })
+                )
+            }
+          />
+        ),
+      },
+      {
+        id: 'view',
+        header: '',
+        cell: props => (
+          <Link href={`/communications/templates/${props.row.original._id}`}>
+            <EyeIcon className="h-4 w-4" />
+          </Link>
+        ),
+      },
+    ],
+    [router, toast]
+  );
+}
diff --git a/src/components/communications/templates/create-template-sheet.tsx b/src/components/communications/templates/create-template-sheet.tsx
new file mode 100644
index 000000000..dba0eb9ce
--- /dev/null
+++ b/src/components/communications/templates/create-template-sheet.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet';
+import { Button } from '@/components/ui/button';
+import { Plus } from 'lucide-react';
+import { useToast } from '@/lib/hooks/use-toast';
+import { createCommunicationTemplate } from '@/lib/api/communications/templates';
+import {
+  CommunicationTemplateForm,
+  CommunicationTemplateFormValues,
+} from './template-form';
+
+export function CreateCommunicationTemplateSheet() {
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const handleSubmit = async (values: CommunicationTemplateFormValues) => {
+    await createCommunicationTemplate(values)
+      .then(() => {
+        toast({
+          title: 'Communications',
+          description: 'Unified template created',
+        });
+        setOpen(false);
+        router.refresh();
+      })
+      .catch(err =>
+        toast({ title: 'Communications', description: err.message })
+      );
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          New template
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="overflow-y-auto sm:max-w-xl">
+        <SheetHeader>
+          <SheetTitle>Create unified template</SheetTitle>
+        </SheetHeader>
+        <div className="mt-6">
+          <CommunicationTemplateForm
+            submitLabel="Create template"
+            onSubmit={handleSubmit}
+          />
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/src/components/communications/templates/dashboard.tsx b/src/components/communications/templates/dashboard.tsx
new file mode 100644
index 000000000..13e3af82b
--- /dev/null
+++ b/src/components/communications/templates/dashboard.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { CommunicationTemplatesResponse } from './data-table';
+import { CommunicationTemplatesTable } from './data-table';
+import { SearchInput } from '@/components/helpers/search';
+import { CreateCommunicationTemplateSheet } from './create-template-sheet';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import Link from 'next/link';
+
+export function CommunicationTemplatesDashboard({
+  data,
+}: {
+  data: CommunicationTemplatesResponse;
+}) {
+  return (
+    <div className="space-y-6">
+      <Alert>
+        <AlertTitle>Unified templates</AlertTitle>
+        <AlertDescription>
+          Manage multi-channel templates used by orchestrated sends. Email-only
+          templates remain available under{' '}
+          <Link
+            href="/email/templates"
+            className="underline underline-offset-3"
+          >
+            Email → Templates
+          </Link>
+          .
+        </AlertDescription>
+      </Alert>
+
+      <div className="flex items-center gap-3">
+        <SearchInput />
+        <CreateCommunicationTemplateSheet />
+      </div>
+
+      <CommunicationTemplatesTable data={data} />
+    </div>
+  );
+}
diff --git a/src/components/communications/templates/data-table.tsx b/src/components/communications/templates/data-table.tsx
new file mode 100644
index 000000000..364f1599e
--- /dev/null
+++ b/src/components/communications/templates/data-table.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { DataTable } from '@/components/ui/data-table';
+import { CommunicationTemplate } from '@/lib/models/communications/templates';
+import { useCommunicationTemplateColumns } from './columns';
+
+export type CommunicationTemplatesResponse = {
+  templateDocuments: CommunicationTemplate[];
+  count: number;
+};
+
+export function CommunicationTemplatesTable({
+  data,
+}: {
+  data: CommunicationTemplatesResponse;
+}) {
+  const columns = useCommunicationTemplateColumns();
+
+  return (
+    <DataTable
+      columns={columns}
+      data={data.templateDocuments}
+      count={data.count}
+    />
+  );
+}
diff --git a/src/components/communications/templates/template-form.tsx b/src/components/communications/templates/template-form.tsx
new file mode 100644
index 000000000..40dae72c8
--- /dev/null
+++ b/src/components/communications/templates/template-form.tsx
@@ -0,0 +1,312 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { CommunicationChannel } from '@/lib/models/communications/templates';
+import { cn } from '@/lib/utils';
+
+const channelOptions: { id: CommunicationChannel; label: string }[] = [
+  { id: 'email', label: 'Email' },
+  { id: 'push', label: 'Push' },
+  { id: 'sms', label: 'SMS' },
+];
+
+export const communicationTemplateSchema = z
+  .object({
+    name: z.string().min(1, 'Name is required'),
+    templateDescription: z.string().optional(),
+    channels: z.array(z.enum(['email', 'push', 'sms'])).min(1),
+    email: z
+      .object({
+        subject: z.string().optional(),
+        body: z.string().optional(),
+        sender: z.string().optional(),
+      })
+      .optional(),
+    push: z
+      .object({
+        title: z.string().optional(),
+        body: z.string().optional(),
+      })
+      .optional(),
+    sms: z
+      .object({
+        message: z.string().optional(),
+      })
+      .optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.channels.includes('email')) {
+      if (!data.email?.subject?.trim()) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Email subject is required',
+          path: ['email', 'subject'],
+        });
+      }
+      if (!data.email?.body?.trim()) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Email body is required',
+          path: ['email', 'body'],
+        });
+      }
+    }
+    if (data.channels.includes('push')) {
+      if (!data.push?.title?.trim()) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Push title is required',
+          path: ['push', 'title'],
+        });
+      }
+      if (!data.push?.body?.trim()) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: 'Push body is required',
+          path: ['push', 'body'],
+        });
+      }
+    }
+    if (data.channels.includes('sms') && !data.sms?.message?.trim()) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'SMS message is required',
+        path: ['sms', 'message'],
+      });
+    }
+  });
+
+export type CommunicationTemplateFormValues = z.infer<
+  typeof communicationTemplateSchema
+>;
+
+export function CommunicationTemplateForm({
+  defaultValues,
+  onSubmit,
+  submitLabel,
+  disableName,
+}: {
+  defaultValues?: Partial<CommunicationTemplateFormValues>;
+  onSubmit: (values: CommunicationTemplateFormValues) => Promise<void>;
+  submitLabel: string;
+  disableName?: boolean;
+}) {
+  const form = useForm<CommunicationTemplateFormValues>({
+    resolver: zodResolver(communicationTemplateSchema),
+    defaultValues: {
+      name: '',
+      templateDescription: '',
+      channels: ['email'],
+      email: { subject: '', body: '', sender: '' },
+      push: { title: '', body: '' },
+      sms: { message: '' },
+      ...defaultValues,
+    },
+  });
+
+  const channels = form.watch('channels');
+
+  const toggleChannel = (channel: CommunicationChannel, checked: boolean) => {
+    const current = form.getValues('channels');
+    if (checked) {
+      form.setValue('channels', [...new Set([...current, channel])], {
+        shouldValidate: true,
+      });
+      return;
+    }
+    form.setValue(
+      'channels',
+      current.filter(c => c !== channel),
+      { shouldValidate: true }
+    );
+  };
+
+  return (
+    <Form {...form}>
+      <form
+        className="space-y-6"
+        onSubmit={form.handleSubmit(values => onSubmit(values))}
+      >
+        <div className="grid gap-4 md:grid-cols-2">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Template name</FormLabel>
+                <FormControl>
+                  <Input {...field} disabled={disableName} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="templateDescription"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Description</FormLabel>
+                <FormControl>
+                  <Input {...field} placeholder="Optional summary" />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <div className="space-y-3">
+          <FormLabel>Channels</FormLabel>
+          <div className="flex flex-wrap gap-4">
+            {channelOptions.map(option => (
+              <label
+                key={option.id}
+                className={cn(
+                  'flex items-center gap-2 rounded-md border px-3 py-2 text-sm',
+                  channels.includes(option.id) && 'border-primary bg-muted/40'
+                )}
+              >
+                <Checkbox
+                  checked={channels.includes(option.id)}
+                  onCheckedChange={checked =>
+                    toggleChannel(option.id, checked === true)
+                  }
+                />
+                {option.label}
+              </label>
+            ))}
+          </div>
+        </div>
+
+        <Tabs defaultValue={channels[0] ?? 'email'}>
+          <TabsList>
+            {channels.includes('email') && (
+              <TabsTrigger value="email">Email</TabsTrigger>
+            )}
+            {channels.includes('push') && (
+              <TabsTrigger value="push">Push</TabsTrigger>
+            )}
+            {channels.includes('sms') && (
+              <TabsTrigger value="sms">SMS</TabsTrigger>
+            )}
+          </TabsList>
+
+          {channels.includes('email') && (
+            <TabsContent value="email" className="space-y-4 pt-4">
+              <FormField
+                control={form.control}
+                name="email.sender"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Sender</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="no-reply" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="email.subject"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Subject</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="Hello {{name}}" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="email.body"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Body</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        {...field}
+                        rows={8}
+                        placeholder="<p>Hello {{name}}</p>"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </TabsContent>
+          )}
+
+          {channels.includes('push') && (
+            <TabsContent value="push" className="space-y-4 pt-4">
+              <FormField
+                control={form.control}
+                name="push.title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Title</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder="Welcome {{name}}" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="push.body"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Body</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} rows={4} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </TabsContent>
+          )}
+
+          {channels.includes('sms') && (
+            <TabsContent value="sms" className="space-y-4 pt-4">
+              <FormField
+                control={form.control}
+                name="sms.message"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Message</FormLabel>
+                    <FormControl>
+                      <Textarea {...field} rows={4} placeholder="Hi {{name}}" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </TabsContent>
+          )}
+        </Tabs>
+
+        <Button type="submit">{submitLabel}</Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/src/components/email/templates/dashboard.tsx b/src/components/email/templates/dashboard.tsx
index a2e801c38..546eaede9 100644
--- a/src/components/email/templates/dashboard.tsx
+++ b/src/components/email/templates/dashboard.tsx
@@ -33,6 +33,17 @@ export const TemplatesDashboard = ({
 
   return (
     <div className="space-y-6">
+      <div className="rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+        Email-only templates are still supported. For new multi-channel work,
+        use{' '}
+        <a
+          href="/communications/templates"
+          className="underline underline-offset-3"
+        >
+          Unified Templates
+        </a>
+        .
+      </div>
       <Tabs defaultValue="local">
         <div className="flex w-full items-center justify-between">
           <TabsList>
diff --git a/src/components/navigation/navList.config.ts b/src/components/navigation/navList.config.ts
index e5e27c150..af7dd797c 100644
--- a/src/components/navigation/navList.config.ts
+++ b/src/components/navigation/navList.config.ts
@@ -101,6 +101,11 @@ export const navGroups: NavGroup[] = [
   {
     id: 'communications',
     items: [
+      {
+        title: 'Unified Templates',
+        url: '/communications/templates',
+        icon: LucideMail,
+      },
       {
         title: 'Email',
         url: '/email',
diff --git a/src/lib/api/communications/templates.ts b/src/lib/api/communications/templates.ts
new file mode 100644
index 000000000..7d8c7e718
--- /dev/null
+++ b/src/lib/api/communications/templates.ts
@@ -0,0 +1,66 @@
+'use server';
+
+import { getApiClient } from '@/lib/api';
+import {
+  CommunicationTemplate,
+  CommunicationTemplatePayload,
+} from '@/lib/models/communications/templates';
+
+export const getCommunicationTemplates = async (args: {
+  skip?: number;
+  limit?: number;
+  sort?: string;
+  search?: string;
+}) => {
+  type Response = {
+    templateDocuments: CommunicationTemplate[];
+    count: number;
+  };
+  return (await getApiClient())
+    .get<Response>('/communications/templates', { params: args })
+    .then(res => res.data);
+};
+
+export const getCommunicationTemplate = async (id: string) => {
+  return (await getApiClient())
+    .get<{ template: CommunicationTemplate }>(`/communications/templates/${id}`)
+    .then(res => res.data.template);
+};
+
+export const createCommunicationTemplate = async (
+  data: CommunicationTemplatePayload
+) => {
+  return (await getApiClient())
+    .post<{
+      template: CommunicationTemplate;
+    }>('/communications/templates', data)
+    .then(res => res.data.template);
+};
+
+export const updateCommunicationTemplate = async (
+  id: string,
+  data: Partial<CommunicationTemplatePayload>
+) => {
+  return (await getApiClient())
+    .patch<{
+      template: CommunicationTemplate;
+    }>(`/communications/templates/${id}`, data)
+    .then(res => res.data.template);
+};
+
+export const deleteCommunicationTemplate = async (id: string) => {
+  return (await getApiClient())
+    .delete<{ deleted: boolean }>(`/communications/templates/${id}`)
+    .then(res => res.data);
+};
+
+export const migrateFromEmailTemplate = async (options: {
+  emailTemplateId?: string;
+  dryRun?: boolean;
+  skipExisting?: boolean;
+  deleteSource?: boolean;
+}) => {
+  return (await getApiClient())
+    .post('/communications/templates/migrate-from-email', options)
+    .then(res => res.data);
+};
diff --git a/src/lib/models/communications/templates.ts b/src/lib/models/communications/templates.ts
new file mode 100644
index 000000000..33a3dd29e
--- /dev/null
+++ b/src/lib/models/communications/templates.ts
@@ -0,0 +1,33 @@
+export type CommunicationChannel = 'email' | 'push' | 'sms';
+
+export interface CommunicationTemplate {
+  _id: string;
+  name: string;
+  summary?: string;
+  channels: CommunicationChannel[];
+  email?: {
+    subject?: string;
+    body?: string;
+    sender?: string;
+  };
+  push?: {
+    title?: string;
+    body?: string;
+  };
+  sms?: {
+    message?: string;
+  };
+  variables?: string[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CommunicationTemplatePayload {
+  name: string;
+  channels: CommunicationChannel[];
+  email?: CommunicationTemplate['email'];
+  push?: CommunicationTemplate['push'];
+  sms?: CommunicationTemplate['sms'];
+  variables?: string[];
+  templateDescription?: string;
+}

From 54be33787160e381c70a7445c36a904ec52ad5c5 Mon Sep 17 00:00:00 2001
From: Konstantinos Kopanidis <kkopanidis@users.noreply.github.com>
Date: Mon, 22 Jun 2026 18:03:27 +0300
Subject: [PATCH 2/5] feat(ui): expand communications hub and fix dialog
 animations

Add communications landing, logs, settings, and test-send surfaces with
tabbed channel views. Deepen unified templates with email editor/detail,
bulk channel actions, and redirects from legacy email/SMS/push routes.
Fix Tailwind v4 centered dialog zoom-from-top-left in shared primitives.
---
 .cursor/rules/design-context.mdc              |  45 +++
 .gitignore                                    |   2 +-
 .../(modules)/communications/logs/page.tsx    |  83 +++++
 .../(modules)/communications/page.tsx         |  96 ++++++
 .../communications/settings/page.tsx          |  57 ++++
 .../communications/templates/[_id]/page.tsx   | 203 ++++++++++---
 .../templates/email/[_id]/page.tsx            |  26 ++
 .../communications/templates/page.tsx         |  48 ++-
 .../(modules)/communications/test/page.tsx    |  60 ++++
 src/app/(dashboard)/(modules)/email/page.tsx  | 100 +-----
 .../(modules)/email/records/page.tsx          | 152 +---------
 .../(dashboard)/(modules)/email/send/page.tsx |  18 +-
 .../(modules)/email/settings/page.tsx         |   8 +-
 .../(modules)/email/templates/[_id]/page.tsx  | 197 +-----------
 .../(modules)/email/templates/page.tsx        |  38 +--
 .../(modules)/push-notifications/page.tsx     |  94 +-----
 .../push-notifications/settings/page.tsx      |   8 +-
 .../push-notifications/test/page.tsx          |  19 +-
 .../push-notifications/tokens/page.tsx        |  37 +--
 src/app/(dashboard)/(modules)/sms/page.tsx    |  88 +-----
 .../(dashboard)/(modules)/sms/send/page.tsx   |   6 +-
 .../(modules)/sms/settings/page.tsx           |   8 +-
 src/app/(dashboard)/template.tsx              | 115 +++++--
 .../logs/communications-logs-tabs.tsx         | 199 ++++++++++++
 .../settings/communications-settings-tabs.tsx |  62 ++++
 .../templates/add-channels-dialog.tsx         | 183 +++++++++++
 .../templates/bulk-add-channels-button.tsx    |  91 ++++++
 .../communications/templates/columns.tsx      | 254 +++++++++++++---
 .../templates/create-template-sheet.tsx       |  46 ++-
 .../communications/templates/dashboard.tsx    | 204 +++++++++++--
 .../communications/templates/data-table.tsx   |  27 +-
 .../templates/email-body-editor.tsx           | 272 +++++++++++++++++
 .../templates/email-template-detail.tsx       | 189 ++++++++++++
 .../templates/email-template-preview.tsx      | 271 +++++++++++++++++
 .../templates/template-form.tsx               | 109 ++++---
 .../test/channel-status-card.tsx              | 114 +++++++
 .../test/communications-test-tabs.tsx         |  89 ++++++
 src/components/email/settings/settings.tsx    | 101 ++++---
 .../email/templates/TemplateEditor.tsx        | 284 +-----------------
 .../email/templates/createTemplateSheet.tsx   |   4 +-
 src/components/email/templates/dashboard.tsx  |   7 +-
 .../templates/tables/templates/columns.tsx    |   4 +-
 src/components/navigation/navList.config.ts   |  39 +--
 src/components/notifications/settings.tsx     |  89 +++---
 .../notifications/testSend/testSendForm.tsx   | 138 ++++-----
 .../notifications/tokens/tokens.tsx           |   6 +-
 src/components/sms/settings.tsx               |  67 +++--
 .../sms/smsTest/testSendSmsForm.tsx           |  44 +--
 src/components/ui/alert-dialog.tsx            |   2 +-
 src/components/ui/dialog.tsx                  |   2 +-
 src/lib/api/communications/templates.ts       |  71 +++--
 src/lib/logic/communications-api-error.ts     |  15 +
 src/lib/logic/merge-template-rows.ts          |  42 +++
 src/lib/models/communications/template-row.ts |  84 ++++++
 src/lib/utils/module-utils.ts                 |   4 +-
 55 files changed, 3137 insertions(+), 1484 deletions(-)
 create mode 100644 .cursor/rules/design-context.mdc
 create mode 100644 src/app/(dashboard)/(modules)/communications/logs/page.tsx
 create mode 100644 src/app/(dashboard)/(modules)/communications/page.tsx
 create mode 100644 src/app/(dashboard)/(modules)/communications/settings/page.tsx
 create mode 100644 src/app/(dashboard)/(modules)/communications/templates/email/[_id]/page.tsx
 create mode 100644 src/app/(dashboard)/(modules)/communications/test/page.tsx
 create mode 100644 src/components/communications/logs/communications-logs-tabs.tsx
 create mode 100644 src/components/communications/settings/communications-settings-tabs.tsx
 create mode 100644 src/components/communications/templates/add-channels-dialog.tsx
 create mode 100644 src/components/communications/templates/bulk-add-channels-button.tsx
 create mode 100644 src/components/communications/templates/email-body-editor.tsx
 create mode 100644 src/components/communications/templates/email-template-detail.tsx
 create mode 100644 src/components/communications/templates/email-template-preview.tsx
 create mode 100644 src/components/communications/test/channel-status-card.tsx
 create mode 100644 src/components/communications/test/communications-test-tabs.tsx
 create mode 100644 src/lib/logic/communications-api-error.ts
 create mode 100644 src/lib/logic/merge-template-rows.ts
 create mode 100644 src/lib/models/communications/template-row.ts

diff --git a/.cursor/rules/design-context.mdc b/.cursor/rules/design-context.mdc
new file mode 100644
index 000000000..777a681d5
--- /dev/null
+++ b/.cursor/rules/design-context.mdc
@@ -0,0 +1,45 @@
+---
+description: Project design context for Conduit-UI. Guides Quintessential rule application to this existing admin panel codebase.
+globs: "**/*.{tsx,jsx,ts,js,css}"
+alwaysApply: true
+---
+
+# Design Context -- Conduit-UI
+
+This is an existing Next.js 16 admin panel. Apply Quintessential standards with awareness of what's already built.
+
+## Current Design Language (preserve)
+- Font: Inter via next/font/google -- keep
+- Color system: 26 semantic CSS variables in @theme with :root/:dark HSL channels -- extend, don't replace
+- Component library: 56 shadcn/ui + Radix primitives in src/components/ui/ -- extend, don't replace
+- Class merging: cn() (clsx + twMerge) -- use consistently
+- Variants: cva for multi-variant components -- follow this pattern for new components
+- Spacing: Tailwind v4 default 4px-based scale -- stay on-scale
+- Radius: Tokenized via --radius (0.5rem) with derived md/sm -- use radius tokens, not arbitrary values
+- Theme: next-themes with class="dark" toggle -- respect both modes
+- Overlays: Radix Dialog/Sheet + Vaul Drawer -- use for new overlays
+
+## Migration Targets (improve incrementally)
+- Typography: Add antialiased to body, text-wrap: balance on headings, tabular-nums on data columns
+- Colors: Extract hardcoded chart/viz hex values to --color-chart-* tokens
+- Colors: Define --popover and --card in :root (aligned with light theme)
+- Shadows: Use --shadow-1 through --shadow-4 layered scale; prefer shadow tokens over arbitrary shadow-[...] values
+- Animation: prefers-reduced-motion support in globals
+- Animation: Standardize on one primary easing curve where practical
+- Components: Prefer shared DataTable in src/components/ui/data-table.tsx for TanStack table UIs
+- Components: Align Textarea styling with Input (text-sm, ring-2)
+- Interaction: Add keyboard shortcut hints to tooltips where relevant
+- Interaction: Guard hover-only affordances with @media (hover: hover) where appropriate
+
+## Rules of Engagement
+- Apply Quintessential standards to ALL new code
+- When modifying existing files, improve what you touch
+- Do NOT refactor untouched code unprompted
+- Do NOT rewrite working components for style alone
+- When you spot a major violation in code you're editing, fix it silently
+- When you spot a major violation in code you're NOT editing, leave a brief comment noting the opportunity
+- Always use cn() for class merging
+- Always use cva for components with more than 2 variant axes
+- Always add both light and dark mode styles
+- Always use CSS variable colors for theme-bound UI; use chart tokens for charts/viz
+- Always respect the spacing scale -- no arbitrary pixel values
diff --git a/.gitignore b/.gitignore
index d72e2ac7d..6d265d339 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,6 @@
 # Logs
 node_modules
-logs
+/logs
 *.log
 npm-debug.log*
 .pnpm-debug.log*
diff --git a/src/app/(dashboard)/(modules)/communications/logs/page.tsx b/src/app/(dashboard)/(modules)/communications/logs/page.tsx
new file mode 100644
index 000000000..ac7fc6546
--- /dev/null
+++ b/src/app/(dashboard)/(modules)/communications/logs/page.tsx
@@ -0,0 +1,83 @@
+import { getTokens } from '@/lib/api/notifications';
+import { CommunicationsLogsTabs } from '@/components/communications/logs/communications-logs-tabs';
+import {
+  PageDescription,
+  PageHeader,
+  PageTitle,
+} from '@/components/ui/page-header';
+
+type CommunicationsLogsParams = {
+  searchParams: Promise<{
+    tab?: string;
+    messageId?: string;
+    templateId?: string;
+    receiver?: string;
+    sender?: string;
+    cc?: string;
+    replyTo?: string;
+    startDate?: string;
+    endDate?: string;
+    skip?: string;
+    sort?: string;
+    limit?: string;
+    search?: string;
+    platform?: string;
+  }>;
+};
+
+function parseTab(tab: string | undefined): 'email' | 'push' {
+  return tab === 'push' ? 'push' : 'email';
+}
+
+export default async function CommunicationsLogsPage(
+  props: Readonly<CommunicationsLogsParams>
+) {
+  const searchParams = await props.searchParams;
+  const tab = parseTab(searchParams.tab);
+
+  const pushTokensData =
+    tab === 'push'
+      ? await getTokens(
+          Number.parseInt(searchParams.skip ?? '0', 10) || 0,
+          Number.parseInt(searchParams.limit ?? '20', 10) || 20,
+          {
+            sort: searchParams.sort,
+            search: searchParams.search,
+            platform: searchParams.platform,
+          }
+        )
+      : undefined;
+
+  const refreshPushTokens = async (search: string) => {
+    'use server';
+    const { tokens } = await getTokens(
+      Number.parseInt(searchParams.skip ?? '0', 10) || 0,
+      Number.parseInt(searchParams.limit ?? '20', 10) || 20,
+      {
+        sort: searchParams.sort,
+        search,
+        platform: searchParams.platform,
+      }
+    );
+    return tokens;
+  };
+
+  return (
+    <div className="space-y-6">
+      <PageHeader>
+        <div>
+          <PageTitle>Logs & Devices</PageTitle>
+          <PageDescription>
+            Email delivery history and registered push device tokens.
+          </PageDescription>
+        </div>
+      </PageHeader>
+
+      <CommunicationsLogsTabs
+        initialTab={tab}
+        pushTokensData={pushTokensData}
+        refreshPushTokens={refreshPushTokens}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/(modules)/communications/page.tsx b/src/app/(dashboard)/(modules)/communications/page.tsx
new file mode 100644
index 000000000..085af0235
--- /dev/null
+++ b/src/app/(dashboard)/(modules)/communications/page.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+  FileText,
+  History,
+  MessagesSquare,
+  Send,
+  Settings,
+} from 'lucide-react';
+import { ModuleDashboard } from '@/components/dashboard/ModuleDashboard';
+import {
+  getEmailMetrics,
+  getModuleStatus,
+  getModuleUptime,
+  getPushNotificationMetrics,
+  getSystemMetrics,
+} from '@/lib/prometheus/metrics';
+import {
+  COMMUNICATIONS_SHARED_RUNTIME,
+  getApiModuleNameFromPath,
+} from '@/lib/utils/module-utils';
+import { ModuleStatus } from '@/components/dashboard/ModuleStatusCard';
+import { QuickAction } from '@/components/dashboard/QuickActionsCard';
+import { MetricCardProps } from '@/components/dashboard/MetricCard';
+import { getPrometheusAvailability } from '@/lib/observability/prometheusAvailability';
+
+export default async function CommunicationsDashboard() {
+  const promAvailability = await getPrometheusAvailability();
+  const [emailMetrics, pushMetrics] = await Promise.all([
+    getEmailMetrics(),
+    getPushNotificationMetrics(),
+  ]);
+  const metrics = [...emailMetrics, ...pushMetrics];
+
+  const metricCards: MetricCardProps[] = metrics.map(metric => ({
+    title: metric.name,
+    value: metric.value,
+    description: metric.description,
+    status: metric.status,
+  }));
+
+  const apiModuleName =
+    getApiModuleNameFromPath('/communications') || 'communications';
+
+  const systemMetrics = await getSystemMetrics(apiModuleName);
+  const uptime = await getModuleUptime(apiModuleName);
+  const status = await getModuleStatus(apiModuleName);
+
+  const moduleStatus: ModuleStatus = {
+    name: 'Communications',
+    status: status,
+    uptime: uptime,
+    version: '1.0.0',
+    instances: 1,
+    description: 'Email, SMS, and push notifications',
+  };
+
+  const quickActions: QuickAction[] = [
+    {
+      title: 'Templates',
+      description: 'Manage email, SMS, and push templates',
+      icon: <FileText className="h-4 w-4" />,
+      href: '/communications/templates',
+    },
+    {
+      title: 'Send a test',
+      description: 'Send test messages across channels',
+      icon: <Send className="h-4 w-4" />,
+      href: '/communications/test',
+    },
+    {
+      title: 'View logs',
+      description: 'Email logs and push device tokens',
+      icon: <History className="h-4 w-4" />,
+      href: '/communications/logs',
+    },
+    {
+      title: 'Channel settings',
+      description: 'Configure email, SMS, and push providers',
+      icon: <Settings className="h-4 w-4" />,
+      href: '/communications/settings',
+    },
+  ];
+
+  return (
+    <ModuleDashboard
+      moduleName="Communications"
+      moduleIcon={<MessagesSquare className="h-8 w-8" />}
+      moduleStatus={moduleStatus}
+      metrics={metricCards}
+      systemMetrics={systemMetrics}
+      quickActions={quickActions}
+      prometheusState={promAvailability.state}
+      sharedRuntime={COMMUNICATIONS_SHARED_RUNTIME}
+    />
+  );
+}
diff --git a/src/app/(dashboard)/(modules)/communications/settings/page.tsx b/src/app/(dashboard)/(modules)/communications/settings/page.tsx
new file mode 100644
index 000000000..bc81deb64
--- /dev/null
+++ b/src/app/(dashboard)/(modules)/communications/settings/page.tsx
@@ -0,0 +1,57 @@
+import { getEmailSettings } from '@/lib/api/email';
+import { getSmsSettings } from '@/lib/api/sms';
+import { getNotificationSettings } from '@/lib/api/notifications';
+import { CommunicationsSettingsTabs } from '@/components/communications/settings/communications-settings-tabs';
+import {
+  PageDescription,
+  PageHeader,
+  PageTitle,
+} from '@/components/ui/page-header';
+
+type CommunicationsSettingsParams = {
+  searchParams: Promise<{
+    tab?: string;
+  }>;
+};
+
+function parseTab(tab: string | undefined): 'email' | 'sms' | 'push' {
+  if (tab === 'sms' || tab === 'push') return tab;
+  return 'email';
+}
+
+export default async function CommunicationsSettingsPage(
+  props: Readonly<CommunicationsSettingsParams>
+) {
+  const searchParams = await props.searchParams;
+  const tab = parseTab(searchParams.tab);
+
+  const [
+    { config: emailSettings },
+    { config: smsSettings },
+    { config: pushSettings },
+  ] = await Promise.all([
+    getEmailSettings(),
+    getSmsSettings(),
+    getNotificationSettings(),
+  ]);
+
+  return (
+    <div className="space-y-6">
+      <PageHeader>
+        <div>
+          <PageTitle>Settings</PageTitle>
+          <PageDescription>
+            Configure email, SMS, and push providers.
+          </PageDescription>
+        </div>
+      </PageHeader>
+
+      <CommunicationsSettingsTabs
+        initialTab={tab}
+        emailSettings={emailSettings}
+        smsSettings={smsSettings}
+        pushSettings={pushSettings}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/(modules)/communications/templates/[_id]/page.tsx b/src/app/(dashboard)/(modules)/communications/templates/[_id]/page.tsx
index 54e14c11b..998b5dc68 100644
--- a/src/app/(dashboard)/(modules)/communications/templates/[_id]/page.tsx
+++ b/src/app/(dashboard)/(modules)/communications/templates/[_id]/page.tsx
@@ -1,14 +1,16 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { CommunicationTemplate } from '@/lib/models/communications/templates';
 import {
-  getCommunicationTemplates,
+  getCommunicationTemplate,
   updateCommunicationTemplate,
 } from '@/lib/api/communications/templates';
+import { formatCommunicationsApiError } from '@/lib/logic/communications-api-error';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useToast } from '@/lib/hooks/use-toast';
 import {
   PageHeader,
@@ -19,6 +21,10 @@ import {
   CommunicationTemplateForm,
   CommunicationTemplateFormValues,
 } from '@/components/communications/templates/template-form';
+import { EmailTemplatePreview } from '@/components/communications/templates/email-template-preview';
+import { EmailBodyEditor } from '@/components/communications/templates/email-body-editor';
+import { HtmlViewer } from '@/components/email/templates/HtmlViewer';
+import { Code, Edit } from 'lucide-react';
 
 type CommunicationTemplatePageProps = {
   params: Promise<{ _id: string }>;
@@ -29,42 +35,78 @@ export default function CommunicationTemplateDetailPage(
 ) {
   const [template, setTemplate] = useState<CommunicationTemplate | null>(null);
   const [loading, setLoading] = useState(true);
-  const [editing, setEditing] = useState(false);
+  const [editingMetadata, setEditingMetadata] = useState(false);
+  const [showEmailEditor, setShowEmailEditor] = useState(false);
+  const [showHtmlDialog, setShowHtmlDialog] = useState(false);
   const router = useRouter();
+  const searchParams = useSearchParams();
   const { toast } = useToast();
 
+  const loadTemplate = async (id: string) => {
+    const data = await getCommunicationTemplate(id);
+    setTemplate(data);
+  };
+
   useEffect(() => {
-    const load = async () => {
+    const init = async () => {
       const { _id } = await props.params;
       try {
-        const data = await getCommunicationTemplates({ search: _id, limit: 1 });
-        if (data.templateDocuments[0]) {
-          setTemplate(data.templateDocuments[0]);
-        }
+        await loadTemplate(_id);
       } catch (error) {
         console.error(error);
+        toast({
+          title: 'Communications',
+          description: formatCommunicationsApiError(error),
+        });
       } finally {
         setLoading(false);
       }
     };
-    load();
-  }, [props]);
+    init();
+  }, [props, toast]);
+
+  useEffect(() => {
+    if (
+      searchParams.get('editor-open') === 'true' &&
+      template?.channels.includes('email')
+    ) {
+      setShowEmailEditor(true);
+    }
+  }, [searchParams, template]);
 
-  const handleSave = async (values: CommunicationTemplateFormValues) => {
+  const handleSaveMetadata = async (
+    values: CommunicationTemplateFormValues
+  ) => {
     if (!template) return;
-    await updateCommunicationTemplate(template._id, values)
-      .then(updated => {
-        setTemplate(updated);
-        setEditing(false);
-        toast({
-          title: 'Communications',
-          description: 'Template updated',
-        });
-        router.refresh();
-      })
-      .catch(err =>
-        toast({ title: 'Communications', description: err.message })
-      );
+    try {
+      const updated = await updateCommunicationTemplate(template._id, values);
+      setTemplate(updated);
+      setEditingMetadata(false);
+      toast({
+        title: 'Communications',
+        description: 'Template updated',
+      });
+      router.refresh();
+    } catch (err) {
+      toast({
+        title: 'Communications',
+        description: formatCommunicationsApiError(err),
+      });
+    }
+  };
+
+  const handleSaveEmailBody = async (html: string, variables: string[]) => {
+    if (!template) return;
+    const updated = await updateCommunicationTemplate(template._id, {
+      email: {
+        ...template.email,
+        body: html,
+      },
+      variables,
+    });
+    setTemplate(updated);
+    setShowEmailEditor(false);
+    router.refresh();
   };
 
   if (loading) {
@@ -75,6 +117,18 @@ export default function CommunicationTemplateDetailPage(
     return <p className="text-muted-foreground">Template not found</p>;
   }
 
+  if (showEmailEditor && template.channels.includes('email')) {
+    return (
+      <EmailBodyEditor
+        title={`Edit email: ${template.name}`}
+        html={template.email?.body || '<p></p>'}
+        variables={template.variables}
+        onSave={handleSaveEmailBody}
+        onClose={() => setShowEmailEditor(false)}
+      />
+    );
+  }
+
   const defaultValues: CommunicationTemplateFormValues = {
     name: template.name,
     templateDescription: template.summary,
@@ -84,25 +138,49 @@ export default function CommunicationTemplateDetailPage(
     sms: template.sms,
   };
 
+  const hasEmail = template.channels.includes('email');
+  const hasPush = template.channels.includes('push');
+  const hasSms = template.channels.includes('sms');
+
   return (
     <div className="space-y-6">
       <PageHeader>
         <PageTitle>{template.name}</PageTitle>
         <PageActions>
+          {hasEmail && (
+            <>
+              <Button
+                variant="outline"
+                onClick={() => setShowHtmlDialog(true)}
+                className="flex items-center gap-2"
+              >
+                <Code className="h-4 w-4" />
+                View HTML
+              </Button>
+              <Button
+                onClick={() => setShowEmailEditor(true)}
+                className="flex items-center gap-2"
+              >
+                <Edit className="h-4 w-4" />
+                Edit email
+              </Button>
+            </>
+          )}
           <Button
-            variant={editing ? 'secondary' : 'default'}
-            onClick={() => setEditing(current => !current)}
+            variant={editingMetadata ? 'secondary' : 'default'}
+            onClick={() => setEditingMetadata(current => !current)}
           >
-            {editing ? 'Cancel edit' : 'Edit template'}
+            {editingMetadata ? 'Cancel edit' : 'Edit channels & content'}
           </Button>
         </PageActions>
       </PageHeader>
 
-      {!editing && (
-        <div className="space-y-4 rounded-lg border p-4">
+      {!editingMetadata && (
+        <div className="space-y-6">
           {template.summary && (
             <p className="text-sm text-muted-foreground">{template.summary}</p>
           )}
+
           <div className="flex flex-wrap gap-2">
             {template.channels.map(channel => (
               <Badge key={channel} variant="secondary" className="capitalize">
@@ -110,27 +188,68 @@ export default function CommunicationTemplateDetailPage(
               </Badge>
             ))}
           </div>
-          {template.variables && template.variables.length > 0 && (
-            <div>
-              <p className="mb-2 text-sm font-medium">Variables</p>
-              <div className="flex flex-wrap gap-2">
-                {template.variables.map(variable => (
-                  <Badge key={variable} variant="outline">
-                    {`{{${variable}}}`}
-                  </Badge>
-                ))}
-              </div>
-            </div>
+
+          {hasEmail && (
+            <EmailTemplatePreview
+              template={{
+                name: template.name,
+                subject: template.email?.subject,
+                sender: template.email?.sender,
+                body: template.email?.body,
+                variables: template.variables,
+                createdAt: template.createdAt,
+              }}
+              readOnlyDetails
+            />
+          )}
+
+          {hasPush && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Push notification</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-2 text-sm">
+                <p>
+                  <span className="text-muted-foreground">Title: </span>
+                  {template.push?.title || '—'}
+                </p>
+                <p>
+                  <span className="text-muted-foreground">Body: </span>
+                  {template.push?.body || '—'}
+                </p>
+              </CardContent>
+            </Card>
+          )}
+
+          {hasSms && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">SMS</CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm">
+                <p>{template.sms?.message || '—'}</p>
+              </CardContent>
+            </Card>
           )}
         </div>
       )}
 
-      {editing && (
+      {editingMetadata && (
         <CommunicationTemplateForm
+          mode="edit"
           defaultValues={defaultValues}
           disableName
           submitLabel="Save changes"
-          onSubmit={handleSave}
+          onSubmit={handleSaveMetadata}
+        />
+      )}
+
+      {hasEmail && (
+        <HtmlViewer
+          html={template.email?.body || ''}
+          templateName={template.name}
+          isOpen={showHtmlDialog}
+          onClose={() => setShowHtmlDialog(false)}
         />
       )}
     </div>
diff --git a/src/app/(dashboard)/(modules)/communications/templates/email/[_id]/page.tsx b/src/app/(dashboard)/(modules)/communications/templates/email/[_id]/page.tsx
new file mode 100644
index 000000000..c45232990
--- /dev/null
+++ b/src/app/(dashboard)/(modules)/communications/templates/email/[_id]/page.tsx
@@ -0,0 +1,26 @@
+'use client';
+
+import { EmailTemplateDetail } from '@/components/communications/templates/email-template-detail';
+import { use, useMemo } from 'react';
+
+type EmailTemplatePageProps = {
+  params: Promise<{
+    _id: string;
+  }>;
+  searchParams: Promise<{
+    'editor-open'?: string;
+  }>;
+};
+
+export default function CommunicationEmailTemplatePage(
+  props: EmailTemplatePageProps
+) {
+  const { _id } = use(props.params);
+  const searchParams = use(props.searchParams);
+  const editorOpen = useMemo(
+    () => searchParams['editor-open'] === 'true',
+    [searchParams]
+  );
+
+  return <EmailTemplateDetail templateId={_id} editorOpen={editorOpen} />;
+}
diff --git a/src/app/(dashboard)/(modules)/communications/templates/page.tsx b/src/app/(dashboard)/(modules)/communications/templates/page.tsx
index 7dec71a5d..d14d148c2 100644
--- a/src/app/(dashboard)/(modules)/communications/templates/page.tsx
+++ b/src/app/(dashboard)/(modules)/communications/templates/page.tsx
@@ -1,11 +1,21 @@
 import { getCommunicationTemplates } from '@/lib/api/communications/templates';
+import { getExternalTemplates, getTemplates } from '@/lib/api/email';
 import { CommunicationTemplatesDashboard } from '@/components/communications/templates/dashboard';
+import {
+  PageDescription,
+  PageHeader,
+  PageTitle,
+} from '@/components/ui/page-header';
+
+const TEMPLATE_LIST_LIMIT = 500;
 
 type CommunicationTemplatesParams = {
   searchParams: Promise<{
     pageIndex?: number;
     sort?: string;
     search?: string;
+    email?: string;
+    legacy?: string;
   }>;
 };
 
@@ -14,12 +24,42 @@ export default async function CommunicationTemplatesPage(
 ) {
   const searchParams = await props.searchParams;
 
-  const templates = await getCommunicationTemplates({
+  const fetchArgs = {
     skip: searchParams.pageIndex ? searchParams.pageIndex * 10 : 0,
-    limit: 10,
+    limit: TEMPLATE_LIST_LIMIT,
     sort: searchParams.sort,
     search: searchParams.search,
-  });
+  };
+
+  const [communicationTemplates, emailTemplates, externalTemplates] =
+    await Promise.all([
+      getCommunicationTemplates(fetchArgs),
+      getTemplates(fetchArgs),
+      getExternalTemplates({
+        limit: TEMPLATE_LIST_LIMIT,
+        sortByName: true,
+      }).catch(() => null),
+    ]);
+
+  const emailTemplateId = searchParams.email ?? searchParams.legacy;
+
+  return (
+    <div className="space-y-6">
+      <PageHeader>
+        <div>
+          <PageTitle>Templates</PageTitle>
+          <PageDescription>
+            Manage multi-channel message templates across email, SMS, and push.
+          </PageDescription>
+        </div>
+      </PageHeader>
 
-  return <CommunicationTemplatesDashboard data={templates} />;
+      <CommunicationTemplatesDashboard
+        communicationTemplates={communicationTemplates}
+        emailTemplates={emailTemplates}
+        externalTemplates={externalTemplates}
+        emailTemplateId={emailTemplateId}
+      />
+    </div>
+  );
 }
diff --git a/src/app/(dashboard)/(modules)/communications/test/page.tsx b/src/app/(dashboard)/(modules)/communications/test/page.tsx
new file mode 100644
index 000000000..7b80da93e
--- /dev/null
+++ b/src/app/(dashboard)/(modules)/communications/test/page.tsx
@@ -0,0 +1,60 @@
+import { getEmailSettings, getTemplates } from '@/lib/api/email';
+import { getSmsSettings } from '@/lib/api/sms';
+import { getNotificationSettings } from '@/lib/api/notifications';
+import { CommunicationsTestTabs } from '@/components/communications/test/communications-test-tabs';
+import {
+  PageDescription,
+  PageHeader,
+  PageTitle,
+} from '@/components/ui/page-header';
+
+type CommunicationsTestParams = {
+  searchParams: Promise<{
+    tab?: string;
+  }>;
+};
+
+function parseTab(tab: string | undefined): 'email' | 'sms' | 'push' {
+  if (tab === 'sms' || tab === 'push') return tab;
+  return 'email';
+}
+
+export default async function CommunicationsTestPage(
+  props: Readonly<CommunicationsTestParams>
+) {
+  const searchParams = await props.searchParams;
+  const tab = parseTab(searchParams.tab);
+
+  const [
+    { config: emailSettings },
+    { config: smsSettings },
+    { config: pushSettings },
+    emailTemplates,
+  ] = await Promise.all([
+    getEmailSettings(),
+    getSmsSettings(),
+    getNotificationSettings(),
+    getTemplates({}),
+  ]);
+
+  return (
+    <div className="space-y-6">
+      <PageHeader>
+        <div>
+          <PageTitle>Test Send</PageTitle>
+          <PageDescription>
+            Send test messages to verify provider configuration.
+          </PageDescription>
+        </div>
+      </PageHeader>
+
+      <CommunicationsTestTabs
+        initialTab={tab}
+        emailSettings={emailSettings}
+        smsSettings={smsSettings}
+        pushSettings={pushSettings}
+        emailTemplates={emailTemplates}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/(modules)/email/page.tsx b/src/app/(dashboard)/(modules)/email/page.tsx
index dd7f74a2a..a717b81ef 100644
--- a/src/app/(dashboard)/(modules)/email/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/page.tsx
@@ -1,99 +1,5 @@
-import React from 'react';
-import { FileText, History, Mail, Plus, Send, Settings } from 'lucide-react';
-import { ModuleDashboard } from '@/components/dashboard/ModuleDashboard';
-import {
-  getEmailMetrics,
-  getModuleStatus,
-  getModuleUptime,
-  getSystemMetrics,
-} from '@/lib/prometheus/metrics';
-import {
-  COMMUNICATIONS_SHARED_RUNTIME,
-  getApiModuleNameFromPath,
-} from '@/lib/utils/module-utils';
-import { ModuleStatus } from '@/components/dashboard/ModuleStatusCard';
-import { QuickAction } from '@/components/dashboard/QuickActionsCard';
-import { MetricCardProps } from '@/components/dashboard/MetricCard';
-import { getPrometheusAvailability } from '@/lib/observability/prometheusAvailability';
+import { redirect } from 'next/navigation';
 
-export default async function EmailDashboard() {
-  const promAvailability = await getPrometheusAvailability();
-  // Fetch metrics
-  const metrics = await getEmailMetrics();
-
-  // Convert to MetricCardProps format
-  const metricCards: MetricCardProps[] = metrics.map(metric => ({
-    title: metric.name,
-    value: metric.value,
-    description: metric.description,
-    status: metric.status,
-  }));
-
-  const apiModuleName = getApiModuleNameFromPath('/email') || 'email';
-
-  // Get system metrics scoped to the shared Communications runtime
-  const systemMetrics = await getSystemMetrics(apiModuleName);
-  const uptime = await getModuleUptime(apiModuleName);
-
-  // Get real module status - use correct API module name
-  const status = await getModuleStatus(apiModuleName);
-
-  // Module status
-  const moduleStatus: ModuleStatus = {
-    name: 'Email',
-    status: status,
-    uptime: uptime,
-    version: '1.0.0',
-    instances: 1,
-    description: 'Email sending and template management',
-  };
-
-  // Quick actions
-  const quickActions: QuickAction[] = [
-    {
-      title: 'Send Email',
-      description: 'Send a new email message',
-      icon: <Send className="h-4 w-4" />,
-      href: '/email/send',
-    },
-    {
-      title: 'Create Template',
-      description: 'Create a new email template',
-      icon: <Plus className="h-4 w-4" />,
-      href: '/email/templates',
-    },
-    {
-      title: 'Templates',
-      description: 'Manage email templates',
-      icon: <FileText className="h-4 w-4" />,
-      href: '/email/templates',
-    },
-    {
-      title: 'Records',
-      description: 'View email sending history',
-      icon: <History className="h-4 w-4" />,
-      href: '/email/records',
-    },
-    {
-      title: 'Settings',
-      description: 'Email module configuration',
-      icon: <Settings className="h-4 w-4" />,
-      href: '/email/settings',
-    },
-  ];
-
-  return (
-    <div className="p-6">
-      <ModuleDashboard
-        moduleName="Email"
-        moduleIcon={<Mail className="h-8 w-8" />}
-        moduleStatus={moduleStatus}
-        metrics={metricCards}
-        systemMetrics={systemMetrics}
-        quickActions={quickActions}
-        prometheusState={promAvailability.state}
-        sharedRuntime={COMMUNICATIONS_SHARED_RUNTIME}
-      />
-    </div>
-  );
+export default async function Page() {
+  redirect('/communications');
 }
diff --git a/src/app/(dashboard)/(modules)/email/records/page.tsx b/src/app/(dashboard)/(modules)/email/records/page.tsx
index e5a0fee24..6e3e1dabe 100644
--- a/src/app/(dashboard)/(modules)/email/records/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/records/page.tsx
@@ -1,151 +1,5 @@
-'use client';
+import { redirect } from 'next/navigation';
 
-import { useEffect, useState } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { EmailRecord } from '@/lib/models/email';
-import { EmailFilters } from '@/components/email/records/email-filters';
-import { EmailDetail } from '@/components/email/records/email-detail';
-import { EmailList } from '@/components/email/records/email-list';
-import { fetchRecords } from '@/lib/api/email';
-import { PageHeader, PageTitle } from '@/components/ui/page-header';
-
-export default function EmailPage() {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const [emails, setEmails] = useState<EmailRecord[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [totalCount, setTotalCount] = useState(0);
-  const [selectedEmail, setSelectedEmail] = useState<EmailRecord | null>(null);
-  const [isDetailOpen, setIsDetailOpen] = useState(false);
-
-  // Parse query params
-  const messageId = searchParams.get('messageId') || undefined;
-  const templateId = searchParams.get('templateId') || undefined;
-  const receiver = searchParams.get('receiver') || undefined;
-  const sender = searchParams.get('sender') || undefined;
-  const cc = searchParams.get('cc')
-    ? searchParams.get('cc')?.split(',')
-    : undefined;
-  const replyTo = searchParams.get('replyTo') || undefined;
-  const startDate = searchParams.get('startDate') || undefined;
-  const endDate = searchParams.get('endDate') || undefined;
-  const skip = Number.parseInt(searchParams.get('skip') || '0');
-  const limit = 10; // Fixed page size
-  const sort = searchParams.get('sort') || '-createdAt'; // Default sort by newest
-
-  // Fetch emails when query params change
-  useEffect(() => {
-    const getEmails = async () => {
-      setLoading(true);
-      try {
-        const { records, count } = await fetchRecords({
-          messageId,
-          templateId,
-          receiver,
-          sender,
-          cc,
-          replyTo,
-          startDate,
-          endDate,
-          skip,
-          limit,
-          sort,
-        });
-        setEmails(records);
-        setTotalCount(count);
-      } catch (error) {
-        console.error('Failed to fetch emails:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    getEmails();
-  }, [
-    messageId,
-    templateId,
-    receiver,
-    sender,
-    cc,
-    replyTo,
-    startDate,
-    endDate,
-    skip,
-    limit,
-    sort,
-  ]);
-
-  // Update query params
-  const updateQueryParams = (params: Record<string, string | undefined>) => {
-    const newParams = new URLSearchParams(searchParams.toString());
-
-    // Update or remove params
-    Object.entries(params).forEach(([key, value]) => {
-      if (value === undefined || value === '') {
-        newParams.delete(key);
-      } else {
-        newParams.set(key, value);
-      }
-    });
-
-    // Reset skip when filters change
-    if (!Object.keys(params).includes('skip')) {
-      newParams.set('skip', '0');
-    }
-
-    router.push(`/email/records?${newParams.toString()}`);
-  };
-
-  const handleOpenDetail = (email: EmailRecord) => {
-    setSelectedEmail(email);
-    setIsDetailOpen(true);
-  };
-
-  const handleCloseDetail = () => {
-    setIsDetailOpen(false);
-  };
-
-  return (
-    <div className="container mx-auto py-6 space-y-6">
-      <PageHeader>
-        <PageTitle>Email Management</PageTitle>
-      </PageHeader>
-
-      <EmailFilters
-        initialFilters={{
-          messageId,
-          templateId,
-          receiver,
-          sender,
-          cc: cc?.join(','),
-          replyTo,
-          startDate,
-          endDate,
-        }}
-        onFilterChange={updateQueryParams}
-      />
-
-      <EmailList
-        emails={emails}
-        loading={loading}
-        totalCount={totalCount}
-        currentPage={Math.floor(skip / limit) + 1}
-        pageSize={limit}
-        onPageChange={page =>
-          updateQueryParams({ skip: ((page - 1) * limit).toString() })
-        }
-        onSortChange={sortField => updateQueryParams({ sort: sortField })}
-        currentSort={sort}
-        onViewEmail={handleOpenDetail}
-      />
-
-      {selectedEmail && (
-        <EmailDetail
-          email={selectedEmail}
-          isOpen={isDetailOpen}
-          onClose={handleCloseDetail}
-        />
-      )}
-    </div>
-  );
+export default async function Page() {
+  redirect('/communications/logs?tab=email');
 }
diff --git a/src/app/(dashboard)/(modules)/email/send/page.tsx b/src/app/(dashboard)/(modules)/email/send/page.tsx
index 6ad398322..cfc8cd6b1 100644
--- a/src/app/(dashboard)/(modules)/email/send/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/send/page.tsx
@@ -1,17 +1,5 @@
-import { LucideMail } from 'lucide-react';
-import { getTemplates } from '@/lib/api/email';
-import { SendEmailForm } from '@/components/email/send/form';
+import { redirect } from 'next/navigation';
 
-export default async function SendEmailPage() {
-  const templates = await getTemplates({});
-
-  return (
-    <div className="flex flex-col space-y-6">
-      <div className="flex space-x-2 items-center">
-        <LucideMail className="w-5 h-5" />
-        <span>Compose Email</span>
-      </div>
-      <SendEmailForm templates={templates} />
-    </div>
-  );
+export default async function Page() {
+  redirect('/communications/test?tab=email');
 }
diff --git a/src/app/(dashboard)/(modules)/email/settings/page.tsx b/src/app/(dashboard)/(modules)/email/settings/page.tsx
index 1deefb60b..03a8fce8a 100644
--- a/src/app/(dashboard)/(modules)/email/settings/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/settings/page.tsx
@@ -1,7 +1,5 @@
-import { Settings } from '@/components/email/settings/settings';
-import { getEmailSettings } from '@/lib/api/email';
+import { redirect } from 'next/navigation';
 
-export default async function EmailSettings() {
-  const { config: data } = await getEmailSettings();
-  return <Settings data={data} />;
+export default async function Page() {
+  redirect('/communications/settings?tab=email');
 }
diff --git a/src/app/(dashboard)/(modules)/email/templates/[_id]/page.tsx b/src/app/(dashboard)/(modules)/email/templates/[_id]/page.tsx
index 6076c0cec..d985a5532 100644
--- a/src/app/(dashboard)/(modules)/email/templates/[_id]/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/templates/[_id]/page.tsx
@@ -1,195 +1,20 @@
-'use client';
+import { redirect } from 'next/navigation';
 
-import { getTemplates } from '@/lib/api/email';
-import { migrateFromEmailTemplate } from '@/lib/api/communications/templates';
-import React, { useEffect, useState } from 'react';
-import { EmailTemplate } from '@/lib/models/email';
-import { Button } from '@/components/ui/button';
-import { Code, Edit, ExternalLink } from 'lucide-react';
-import { TemplatePreview } from '@/components/email/templates/templatePreview';
-import { TemplateEditor } from '@/components/email/templates/TemplateEditor';
-import { HtmlViewer } from '@/components/email/templates/HtmlViewer';
-import { isExternallyManaged } from '@/lib/utils/template-utils';
-import { useToast } from '@/lib/hooks/use-toast';
-import {
-  PageHeader,
-  PageTitle,
-  PageActions,
-} from '@/components/ui/page-header';
-
-type EmailTemplateProps = {
+type EmailTemplateRedirectProps = {
   params: Promise<{
     _id: string;
   }>;
   searchParams: Promise<{
-    'editor-open': string;
+    'editor-open'?: string;
   }>;
 };
 
-export default function EmailTemplatePage(props: EmailTemplateProps) {
-  const [template, setTemplate] = useState<EmailTemplate | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [showEditor, setShowEditor] = useState(false);
-  const [showHtmlDialog, setShowHtmlDialog] = useState(false);
-  const [params, setParams] = useState<{ _id: string } | null>(null);
-  const { toast } = useToast();
-
-  useEffect(() => {
-    const initializePage = async () => {
-      const resolvedParams = await props.params;
-      const searchParams = await props.searchParams;
-
-      setParams(resolvedParams);
-      setShowEditor(searchParams['editor-open'] === 'true');
-
-      try {
-        const templateData = await getTemplates({ search: resolvedParams._id });
-        if (templateData.templateDocuments.length > 0) {
-          setTemplate(templateData.templateDocuments[0]);
-        }
-      } catch (error) {
-        console.error('Failed to load template:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    initializePage();
-  }, [props]);
-
-  const handleEdit = () => {
-    if (isExternallyManaged(template!)) {
-      toast({
-        title: 'External Template',
-        description:
-          'This template is managed by an external system and cannot be edited here.',
-      });
-      return;
-    }
-    setShowEditor(true);
-  };
-
-  const refreshTemplate = async () => {
-    if (!params?._id) return;
-
-    try {
-      const templateData = await getTemplates({ search: params._id });
-      if (templateData.templateDocuments.length > 0) {
-        setTemplate(templateData.templateDocuments[0]);
-      }
-    } catch (error) {
-      console.error('Failed to refresh template:', error);
-    }
-  };
-
-  const handleViewHtml = () => {
-    setShowHtmlDialog(true);
-  };
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"></div>
-          <p className="text-muted-foreground">Loading template...</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!template) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-center">
-          <p className="text-muted-foreground">Template not found</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (showEditor) {
-    if (isExternallyManaged(template)) {
-      return (
-        <div className="flex items-center justify-center h-64">
-          <div className="text-center max-w-md">
-            <ExternalLink className="h-12 w-12 text-orange-500 mx-auto mb-4" />
-            <h3 className="text-lg font-semibold mb-2">External Template</h3>
-            <p className="text-muted-foreground mb-4">
-              This template is managed by an external system and cannot be
-              edited here.
-            </p>
-            <Button onClick={() => setShowEditor(false)}>
-              Back to Template
-            </Button>
-          </div>
-        </div>
-      );
-    }
-
-    return (
-      <TemplateEditor
-        template={template}
-        onClose={() => setShowEditor(false)}
-        onTemplateUpdate={refreshTemplate}
-      />
-    );
-  }
-
-  return (
-    <div className="flex flex-col space-y-6">
-      <PageHeader>
-        <PageTitle>Template: {template.name}</PageTitle>
-        <PageActions>
-          {!isExternallyManaged(template) && (
-            <Button
-              variant="outline"
-              onClick={handleViewHtml}
-              className="flex items-center space-x-2"
-            >
-              <Code className="h-4 w-4" />
-              View HTML
-            </Button>
-          )}
-          <Button onClick={handleEdit} className="flex items-center space-x-2">
-            <Edit className="h-4 w-4" />
-            Edit Template
-          </Button>
-          {!isExternallyManaged(template) && (
-            <Button
-              variant="outline"
-              className="flex items-center space-x-2"
-              onClick={() =>
-                migrateFromEmailTemplate({ emailTemplateId: template._id })
-                  .then(() =>
-                    toast({
-                      title: 'Communications',
-                      description: 'Template migrated to unified templates',
-                    })
-                  )
-                  .catch(err =>
-                    toast({ title: 'Communications', description: err.message })
-                  )
-              }
-            >
-              Migrate to unified
-            </Button>
-          )}
-        </PageActions>
-      </PageHeader>
-
-      <TemplatePreview
-        template={template}
-        onEdit={handleEdit}
-        onViewHtml={handleViewHtml}
-        onTemplateUpdate={refreshTemplate}
-      />
-
-      <HtmlViewer
-        html={template.body || ''}
-        templateName={template.name}
-        isOpen={showHtmlDialog}
-        onClose={() => setShowHtmlDialog(false)}
-      />
-    </div>
-  );
+export default async function EmailTemplateRedirectPage(
+  props: EmailTemplateRedirectProps
+) {
+  const { _id } = await props.params;
+  const searchParams = await props.searchParams;
+  const query =
+    searchParams['editor-open'] === 'true' ? '?editor-open=true' : '';
+  redirect(`/communications/templates/email/${_id}${query}`);
 }
diff --git a/src/app/(dashboard)/(modules)/email/templates/page.tsx b/src/app/(dashboard)/(modules)/email/templates/page.tsx
index c1c8cb0de..1f8b5e2d4 100644
--- a/src/app/(dashboard)/(modules)/email/templates/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/templates/page.tsx
@@ -1,37 +1,5 @@
-import { getExternalTemplates, getTemplates } from '@/lib/api/email';
-import { TemplatesDashboard } from '@/components/email/templates/dashboard';
+import { redirect } from 'next/navigation';
 
-type EmailTemplatesParams = {
-  searchParams: Promise<{
-    pageIndex?: number;
-    sort?: string;
-    search?: string;
-    externalPageIndex?: number;
-    sortByName?: boolean;
-  }>;
-};
-
-export default async function EmailTemplates(
-  props: Readonly<EmailTemplatesParams>
-) {
-  const searchParams = await props.searchParams;
-
-  const templates = await getTemplates({
-    skip: searchParams.pageIndex ? searchParams.pageIndex * 10 : 0,
-    limit: 10,
-    sort: searchParams.sort,
-    search: searchParams.search,
-  });
-
-  const external = await getExternalTemplates({
-    skip: searchParams.externalPageIndex
-      ? searchParams.externalPageIndex * 10
-      : 0,
-    limit: 10,
-    sortByName: searchParams.sortByName,
-  })
-    .then(res => res)
-    .catch(() => null);
-
-  return <TemplatesDashboard data={templates} external={external} />;
+export default async function Page() {
+  redirect('/communications/templates');
 }
diff --git a/src/app/(dashboard)/(modules)/push-notifications/page.tsx b/src/app/(dashboard)/(modules)/push-notifications/page.tsx
index 4e388496a..7b0afb0fa 100644
--- a/src/app/(dashboard)/(modules)/push-notifications/page.tsx
+++ b/src/app/(dashboard)/(modules)/push-notifications/page.tsx
@@ -1,93 +1,5 @@
-import React from 'react';
-import { Bell, Send, Settings, Users } from 'lucide-react';
-import { ModuleDashboard } from '@/components/dashboard/ModuleDashboard';
-import {
-  getModuleStatus,
-  getModuleUptime,
-  getPushNotificationMetrics,
-  getSystemMetrics,
-} from '@/lib/prometheus/metrics';
-import {
-  COMMUNICATIONS_SHARED_RUNTIME,
-  getApiModuleNameFromPath,
-} from '@/lib/utils/module-utils';
-import { ModuleStatus } from '@/components/dashboard/ModuleStatusCard';
-import { QuickAction } from '@/components/dashboard/QuickActionsCard';
-import { MetricCardProps } from '@/components/dashboard/MetricCard';
-import { getPrometheusAvailability } from '@/lib/observability/prometheusAvailability';
+import { redirect } from 'next/navigation';
 
-export default async function PushNotificationsDashboard() {
-  const promAvailability = await getPrometheusAvailability();
-  // Fetch metrics
-  const metrics = await getPushNotificationMetrics();
-
-  // Convert to MetricCardProps format
-  const metricCards: MetricCardProps[] = metrics.map(metric => ({
-    title: metric.name,
-    value: metric.value,
-    description: metric.description,
-    status: metric.status,
-  }));
-
-  const apiModuleName =
-    getApiModuleNameFromPath('/push-notifications') || 'pushNotifications';
-
-  const systemMetrics = await getSystemMetrics(apiModuleName);
-  const uptime = await getModuleUptime(apiModuleName);
-
-  // Get real module status - use camelCase module name for API calls
-  const status = await getModuleStatus(apiModuleName);
-
-  // Module status
-  const moduleStatus: ModuleStatus = {
-    name: 'Push Notifications',
-    status: status,
-    uptime: uptime,
-    version: '1.0.0',
-    instances: 1,
-    description: 'Push notification delivery and management',
-  };
-
-  // Quick actions
-  const quickActions: QuickAction[] = [
-    {
-      title: 'Send Notification',
-      description: 'Test send to users or devices',
-      icon: <Send className="h-4 w-4" />,
-      href: '/push-notifications/test',
-    },
-    {
-      title: 'Manage Tokens',
-      description: 'View registered device tokens',
-      icon: <Bell className="h-4 w-4" />,
-      href: '/push-notifications/tokens',
-    },
-    {
-      title: 'Platform users',
-      description: 'Manage users for targeted notifications',
-      icon: <Users className="h-4 w-4" />,
-      href: '/authentication/users',
-    },
-    {
-      title: 'Settings',
-      description: 'Push notifications configuration',
-      icon: <Settings className="h-4 w-4" />,
-      href: '/push-notifications/settings',
-    },
-  ];
-
-  return (
-    <div className="p-6">
-      <ModuleDashboard
-        moduleName="Push Notifications"
-        moduleIcon={<Bell className="h-8 w-8" />}
-        moduleStatus={moduleStatus}
-        metrics={metricCards}
-        systemMetrics={systemMetrics}
-        quickActions={quickActions}
-        prometheusState={promAvailability.state}
-        sharedRuntime={COMMUNICATIONS_SHARED_RUNTIME}
-      />
-    </div>
-  );
+export default async function Page() {
+  redirect('/communications/logs?tab=push');
 }
diff --git a/src/app/(dashboard)/(modules)/push-notifications/settings/page.tsx b/src/app/(dashboard)/(modules)/push-notifications/settings/page.tsx
index 6134a413f..68567fc20 100644
--- a/src/app/(dashboard)/(modules)/push-notifications/settings/page.tsx
+++ b/src/app/(dashboard)/(modules)/push-notifications/settings/page.tsx
@@ -1,7 +1,5 @@
-import { Settings } from '@/components/notifications/settings';
-import { getNotificationSettings } from '@/lib/api/notifications';
+import { redirect } from 'next/navigation';
 
-export default async function NotificationSettings() {
-  const { config: data } = await getNotificationSettings();
-  return <Settings data={data} />;
+export default async function Page() {
+  redirect('/communications/settings?tab=push');
 }
diff --git a/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx b/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
index ee0a6f129..78639a5b6 100644
--- a/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
+++ b/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
@@ -1,18 +1,5 @@
-import { getTokenById } from '@/lib/api/notifications';
-import { isEmpty } from 'lodash';
-import { TestSendForm } from '@/components/notifications/testSend/testSendForm';
+import { redirect } from 'next/navigation';
 
-export default async function TokensPage(props: {
-  searchParams: Promise<{
-    token?: string;
-  }>;
-}) {
-  const searchParams = await props.searchParams;
-  // todo implement on backend the ability to send by token
-  let token;
-  if (!isEmpty(searchParams.token)) {
-    token = await getTokenById(searchParams.token ?? '', 'user');
-  }
-
-  return <TestSendForm token={token} />;
+export default async function Page() {
+  redirect('/communications/test?tab=push');
 }
diff --git a/src/app/(dashboard)/(modules)/push-notifications/tokens/page.tsx b/src/app/(dashboard)/(modules)/push-notifications/tokens/page.tsx
index e677c5847..7b0afb0fa 100644
--- a/src/app/(dashboard)/(modules)/push-notifications/tokens/page.tsx
+++ b/src/app/(dashboard)/(modules)/push-notifications/tokens/page.tsx
@@ -1,36 +1,5 @@
-import { getTokens } from '@/lib/api/notifications';
-import NotificationTokensTable from '@/components/notifications/tokens/tokens';
+import { redirect } from 'next/navigation';
 
-export default async function TokensPage(props: {
-  searchParams: Promise<{
-    skip: number;
-    limit: number;
-    sort?: string;
-    search?: string;
-    platform?: string;
-  }>;
-}) {
-  const searchParams = await props.searchParams;
-  const data = await getTokens(
-    searchParams.skip ?? 0,
-    searchParams.limit ?? 20,
-    { ...searchParams }
-  );
-  const refreshTokens = async (search: string) => {
-    'use server';
-    const { tokens } = await getTokens(
-      searchParams.skip ?? 0,
-      searchParams.limit ?? 20,
-      { ...searchParams }
-    );
-    return tokens;
-  };
-
-  return (
-    <NotificationTokensTable
-      data={data.tokens}
-      count={data.count}
-      refreshData={refreshTokens}
-    />
-  );
+export default async function Page() {
+  redirect('/communications/logs?tab=push');
 }
diff --git a/src/app/(dashboard)/(modules)/sms/page.tsx b/src/app/(dashboard)/(modules)/sms/page.tsx
index 07bcd5280..8c43e97d4 100644
--- a/src/app/(dashboard)/(modules)/sms/page.tsx
+++ b/src/app/(dashboard)/(modules)/sms/page.tsx
@@ -1,87 +1,5 @@
-import React from 'react';
-import { MessageSquare, Send, Settings } from 'lucide-react';
-import { ModuleDashboard } from '@/components/dashboard/ModuleDashboard';
-import {
-  getModuleMetrics,
-  getModuleStatus,
-  getModuleUptime,
-  getSystemMetrics,
-} from '@/lib/prometheus/metrics';
-import {
-  COMMUNICATIONS_SHARED_RUNTIME,
-  getApiModuleNameFromPath,
-} from '@/lib/utils/module-utils';
-import { ModuleStatus } from '@/components/dashboard/ModuleStatusCard';
-import { QuickAction } from '@/components/dashboard/QuickActionsCard';
-import { MetricCardProps } from '@/components/dashboard/MetricCard';
-import { getPrometheusAvailability } from '@/lib/observability/prometheusAvailability';
+import { redirect } from 'next/navigation';
 
-export default async function SmsDashboard() {
-  const promAvailability = await getPrometheusAvailability();
-  // Fetch metrics
-  const apiModuleName = getApiModuleNameFromPath('/sms') || 'sms';
-  const metrics = await getModuleMetrics(apiModuleName);
-
-  // Convert to MetricCardProps format
-  const metricCards: MetricCardProps[] = metrics.map(metric => ({
-    title: metric.name,
-    value: metric.value,
-    description: metric.description,
-    status: metric.status,
-  }));
-
-  const systemMetrics = await getSystemMetrics(apiModuleName);
-
-  // Get real uptime data - use correct API module name
-  const uptime = await getModuleUptime(apiModuleName);
-
-  // Get real module status - use correct API module name
-  const status = await getModuleStatus(apiModuleName);
-
-  // Module status
-  const moduleStatus: ModuleStatus = {
-    name: 'SMS',
-    status: status,
-    uptime: uptime,
-    version: '1.0.0',
-    instances: 1,
-    description: 'SMS messaging and delivery management',
-  };
-
-  // Quick actions
-  const quickActions: QuickAction[] = [
-    {
-      title: 'Send SMS',
-      description: 'Send a test SMS message',
-      icon: <Send className="h-4 w-4" />,
-      href: '/sms/send',
-    },
-    {
-      title: 'SMS settings',
-      description: 'Provider and module configuration',
-      icon: <MessageSquare className="h-4 w-4" />,
-      href: '/sms/settings',
-    },
-    {
-      title: 'Settings',
-      description: 'SMS module configuration',
-      icon: <Settings className="h-4 w-4" />,
-      href: '/sms/settings',
-    },
-  ];
-
-  return (
-    <div className="p-6">
-      <ModuleDashboard
-        moduleName="SMS"
-        moduleIcon={<MessageSquare className="h-8 w-8" />}
-        moduleStatus={moduleStatus}
-        metrics={metricCards}
-        systemMetrics={systemMetrics}
-        quickActions={quickActions}
-        prometheusState={promAvailability.state}
-        sharedRuntime={COMMUNICATIONS_SHARED_RUNTIME}
-      />
-    </div>
-  );
+export default async function Page() {
+  redirect('/communications/settings?tab=sms');
 }
diff --git a/src/app/(dashboard)/(modules)/sms/send/page.tsx b/src/app/(dashboard)/(modules)/sms/send/page.tsx
index 6996d2dee..25b54f390 100644
--- a/src/app/(dashboard)/(modules)/sms/send/page.tsx
+++ b/src/app/(dashboard)/(modules)/sms/send/page.tsx
@@ -1,5 +1,5 @@
-import { TestSendSmsForm } from '@/components/sms/smsTest/testSendSmsForm';
+import { redirect } from 'next/navigation';
 
-export default async function TokensPage() {
-  return <TestSendSmsForm />;
+export default async function Page() {
+  redirect('/communications/test?tab=sms');
 }
diff --git a/src/app/(dashboard)/(modules)/sms/settings/page.tsx b/src/app/(dashboard)/(modules)/sms/settings/page.tsx
index c3d71aaff..8c43e97d4 100644
--- a/src/app/(dashboard)/(modules)/sms/settings/page.tsx
+++ b/src/app/(dashboard)/(modules)/sms/settings/page.tsx
@@ -1,7 +1,5 @@
-import { Settings } from '@/components/sms/settings';
-import { getSmsSettings } from '@/lib/api/sms';
+import { redirect } from 'next/navigation';
 
-export default async function SmsSettings() {
-  const { config: data } = await getSmsSettings();
-  return <Settings data={data} />;
+export default async function Page() {
+  redirect('/communications/settings?tab=sms');
 }
diff --git a/src/app/(dashboard)/template.tsx b/src/app/(dashboard)/template.tsx
index 5c2b5a926..4950fed6b 100644
--- a/src/app/(dashboard)/template.tsx
+++ b/src/app/(dashboard)/template.tsx
@@ -43,9 +43,27 @@ const MODULE_NAMES: { [key: string]: string } = {
   sms: 'SMS',
   router: 'Router',
   functions: 'Functions',
+  communications: 'Communications',
   'push-notifications': 'Notifications',
   payments: 'Payments',
 };
+
+const SEGMENT_LABELS: Record<string, string> = {
+  templates: 'Templates',
+  logs: 'Logs & Devices',
+  settings: 'Settings',
+  test: 'Test Send',
+};
+
+function formatBreadcrumbSegment(segment: string): string {
+  return (
+    SEGMENT_LABELS[segment] ??
+    segment
+      .split('-')
+      .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(' ')
+  );
+}
 export default function ModuleHeader({
   children,
 }: {
@@ -146,6 +164,8 @@ export default function ModuleHeader({
   ];
 
   const pathSegments = pathname.split('/').filter(Boolean);
+  const isCommunicationsTemplates =
+    pathSegments[0] === 'communications' && pathSegments[1] === 'templates';
 
   return (
     <div className="flex flex-col overflow-x-auto no-scrollbar">
@@ -161,40 +181,75 @@ export default function ModuleHeader({
               {pathSegments.length > 0 && (
                 <>
                   <BreadcrumbSeparator />
-                  <BreadcrumbItem>
-                    {pathSegments.length === 1 ? (
-                      <BreadcrumbPage className="flex items-center gap-2">
-                        {moduleName}
-                        {moduleName === 'Database' && databaseType && (
-                          <Badge variant="secondary" className="ml-1">
-                            {databaseType}
-                          </Badge>
-                        )}
-                      </BreadcrumbPage>
-                    ) : (
-                      <BreadcrumbLink asChild>
-                        <Link href={`/${pathSegments[0]}`}>
-                          {moduleName}
-                          {moduleName === 'Database' && databaseType && (
-                            <Badge variant="secondary" className="ml-1">
-                              {databaseType}
-                            </Badge>
-                          )}
-                        </Link>
-                      </BreadcrumbLink>
-                    )}
-                  </BreadcrumbItem>
-                  {pathSegments.length > 1 && (
+                  {isCommunicationsTemplates ? (
                     <>
+                      <BreadcrumbItem>
+                        <BreadcrumbLink asChild>
+                          <Link href="/communications">Communications</Link>
+                        </BreadcrumbLink>
+                      </BreadcrumbItem>
                       <BreadcrumbSeparator />
                       <BreadcrumbItem>
-                        <BreadcrumbPage>
-                          {pathSegments[pathSegments.length - 1]
-                            .split('-')
-                            .map(w => w.charAt(0).toUpperCase() + w.slice(1))
-                            .join(' ')}
-                        </BreadcrumbPage>
+                        {pathSegments.length === 2 ? (
+                          <BreadcrumbPage>Templates</BreadcrumbPage>
+                        ) : (
+                          <BreadcrumbLink asChild>
+                            <Link href="/communications/templates">
+                              Templates
+                            </Link>
+                          </BreadcrumbLink>
+                        )}
+                      </BreadcrumbItem>
+                      {pathSegments.length > 2 && (
+                        <>
+                          <BreadcrumbSeparator />
+                          <BreadcrumbItem>
+                            <BreadcrumbPage>
+                              {formatBreadcrumbSegment(
+                                pathSegments[pathSegments.length - 1]
+                              )}
+                            </BreadcrumbPage>
+                          </BreadcrumbItem>
+                        </>
+                      )}
+                    </>
+                  ) : (
+                    <>
+                      <BreadcrumbItem>
+                        {pathSegments.length === 1 ? (
+                          <BreadcrumbPage className="flex items-center gap-2">
+                            {moduleName}
+                            {moduleName === 'Database' && databaseType && (
+                              <Badge variant="secondary" className="ml-1">
+                                {databaseType}
+                              </Badge>
+                            )}
+                          </BreadcrumbPage>
+                        ) : (
+                          <BreadcrumbLink asChild>
+                            <Link href={`/${pathSegments[0]}`}>
+                              {moduleName}
+                              {moduleName === 'Database' && databaseType && (
+                                <Badge variant="secondary" className="ml-1">
+                                  {databaseType}
+                                </Badge>
+                              )}
+                            </Link>
+                          </BreadcrumbLink>
+                        )}
                       </BreadcrumbItem>
+                      {pathSegments.length > 1 && (
+                        <>
+                          <BreadcrumbSeparator />
+                          <BreadcrumbItem>
+                            <BreadcrumbPage>
+                              {formatBreadcrumbSegment(
+                                pathSegments[pathSegments.length - 1]
+                              )}
+                            </BreadcrumbPage>
+                          </BreadcrumbItem>
+                        </>
+                      )}
                     </>
                   )}
                 </>
diff --git a/src/components/communications/logs/communications-logs-tabs.tsx b/src/components/communications/logs/communications-logs-tabs.tsx
new file mode 100644
index 000000000..6331440b5
--- /dev/null
+++ b/src/components/communications/logs/communications-logs-tabs.tsx
@@ -0,0 +1,199 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { EmailRecord } from '@/lib/models/email';
+import { EmailFilters } from '@/components/email/records/email-filters';
+import { EmailDetail } from '@/components/email/records/email-detail';
+import { EmailList } from '@/components/email/records/email-list';
+import { fetchRecords } from '@/lib/api/email';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import NotificationTokensTable from '@/components/notifications/tokens/tokens';
+import { NotificationToken } from '@/lib/models/notification/NotificationToken';
+
+const LOGS_TABS = ['email', 'push'] as const;
+type LogsTab = (typeof LOGS_TABS)[number];
+
+function parseLogsTab(tab: string | undefined): LogsTab {
+  return tab === 'push' ? 'push' : 'email';
+}
+
+type PushTokensData = {
+  tokens: NotificationToken[];
+  count: number;
+};
+
+type CommunicationsLogsTabsProps = {
+  initialTab: LogsTab;
+  pushTokensData?: PushTokensData;
+  refreshPushTokens: (search: string) => Promise<NotificationToken[]>;
+};
+
+function EmailLogsPanel() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const [emails, setEmails] = useState<EmailRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [totalCount, setTotalCount] = useState(0);
+  const [selectedEmail, setSelectedEmail] = useState<EmailRecord | null>(null);
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+
+  const messageId = searchParams.get('messageId') || undefined;
+  const templateId = searchParams.get('templateId') || undefined;
+  const receiver = searchParams.get('receiver') || undefined;
+  const sender = searchParams.get('sender') || undefined;
+  const cc = searchParams.get('cc')
+    ? searchParams.get('cc')?.split(',')
+    : undefined;
+  const replyTo = searchParams.get('replyTo') || undefined;
+  const startDate = searchParams.get('startDate') || undefined;
+  const endDate = searchParams.get('endDate') || undefined;
+  const skip = Number.parseInt(searchParams.get('skip') || '0');
+  const limit = 10;
+  const sort = searchParams.get('sort') || '-createdAt';
+
+  useEffect(() => {
+    const getEmails = async () => {
+      setLoading(true);
+      try {
+        const { records, count } = await fetchRecords({
+          messageId,
+          templateId,
+          receiver,
+          sender,
+          cc,
+          replyTo,
+          startDate,
+          endDate,
+          skip,
+          limit,
+          sort,
+        });
+        setEmails(records);
+        setTotalCount(count);
+      } catch (error) {
+        console.error('Failed to fetch emails:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void getEmails();
+  }, [
+    messageId,
+    templateId,
+    receiver,
+    sender,
+    cc,
+    replyTo,
+    startDate,
+    endDate,
+    skip,
+    limit,
+    sort,
+  ]);
+
+  const updateQueryParams = useCallback(
+    (params: Record<string, string | undefined>) => {
+      const newParams = new URLSearchParams(searchParams.toString());
+      newParams.set('tab', 'email');
+
+      Object.entries(params).forEach(([key, value]) => {
+        if (value === undefined || value === '') {
+          newParams.delete(key);
+        } else {
+          newParams.set(key, value);
+        }
+      });
+
+      if (!Object.keys(params).includes('skip')) {
+        newParams.set('skip', '0');
+      }
+
+      router.replace(`/communications/logs?${newParams.toString()}`, {
+        scroll: false,
+      });
+    },
+    [router, searchParams]
+  );
+
+  return (
+    <div className="space-y-6">
+      <EmailFilters
+        initialFilters={{
+          messageId,
+          templateId,
+          receiver,
+          sender,
+          cc: cc?.join(','),
+          replyTo,
+          startDate,
+          endDate,
+        }}
+        onFilterChange={updateQueryParams}
+      />
+
+      <EmailList
+        emails={emails}
+        loading={loading}
+        totalCount={totalCount}
+        currentPage={Math.floor(skip / limit) + 1}
+        pageSize={limit}
+        onPageChange={page =>
+          updateQueryParams({ skip: ((page - 1) * limit).toString() })
+        }
+        onSortChange={sortField => updateQueryParams({ sort: sortField })}
+        currentSort={sort}
+        onViewEmail={email => {
+          setSelectedEmail(email);
+          setIsDetailOpen(true);
+        }}
+      />
+
+      {selectedEmail && (
+        <EmailDetail
+          email={selectedEmail}
+          isOpen={isDetailOpen}
+          onClose={() => setIsDetailOpen(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+export function CommunicationsLogsTabs({
+  initialTab,
+  pushTokensData,
+  refreshPushTokens,
+}: CommunicationsLogsTabsProps) {
+  const router = useRouter();
+  const activeTab = initialTab;
+
+  const handleTabChange = (value: string) => {
+    const tab = parseLogsTab(value);
+    router.replace(`/communications/logs?tab=${tab}`, { scroll: false });
+  };
+
+  return (
+    <Tabs value={activeTab} onValueChange={handleTabChange}>
+      <TabsList>
+        <TabsTrigger value="email">Email Logs</TabsTrigger>
+        <TabsTrigger value="push">Push Devices</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="email" className="mt-6">
+        <EmailLogsPanel />
+      </TabsContent>
+
+      <TabsContent value="push" className="mt-6">
+        {pushTokensData ? (
+          <NotificationTokensTable
+            data={pushTokensData.tokens}
+            count={pushTokensData.count}
+            refreshData={refreshPushTokens}
+          />
+        ) : null}
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/src/components/communications/settings/communications-settings-tabs.tsx b/src/components/communications/settings/communications-settings-tabs.tsx
new file mode 100644
index 000000000..12b4e4720
--- /dev/null
+++ b/src/components/communications/settings/communications-settings-tabs.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { Settings as EmailSettings } from '@/components/email/settings/settings';
+import { Settings as SmsSettings } from '@/components/sms/settings';
+import { Settings as PushSettings } from '@/components/notifications/settings';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { EmailSettings as EmailSettingsData } from '@/lib/models/email';
+import { SmsSettings as SmsSettingsData } from '@/lib/models/Sms';
+import { NotificationSettings } from '@/lib/models/Notification';
+
+const SETTINGS_TABS = ['email', 'sms', 'push'] as const;
+type SettingsTab = (typeof SETTINGS_TABS)[number];
+
+function parseSettingsTab(tab: string | undefined): SettingsTab {
+  if (tab === 'sms' || tab === 'push') return tab;
+  return 'email';
+}
+
+type CommunicationsSettingsTabsProps = {
+  initialTab: SettingsTab;
+  emailSettings: EmailSettingsData;
+  smsSettings: SmsSettingsData;
+  pushSettings: NotificationSettings;
+};
+
+export function CommunicationsSettingsTabs({
+  initialTab,
+  emailSettings,
+  smsSettings,
+  pushSettings,
+}: CommunicationsSettingsTabsProps) {
+  const router = useRouter();
+  const activeTab = initialTab;
+
+  const handleTabChange = (value: string) => {
+    const tab = parseSettingsTab(value);
+    router.replace(`/communications/settings?tab=${tab}`, { scroll: false });
+  };
+
+  return (
+    <Tabs value={activeTab} onValueChange={handleTabChange}>
+      <TabsList>
+        <TabsTrigger value="email">Email</TabsTrigger>
+        <TabsTrigger value="sms">SMS</TabsTrigger>
+        <TabsTrigger value="push">Push</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="email" className="mt-6">
+        <EmailSettings data={emailSettings} embedded />
+      </TabsContent>
+
+      <TabsContent value="sms" className="mt-6">
+        <SmsSettings data={smsSettings} embedded />
+      </TabsContent>
+
+      <TabsContent value="push" className="mt-6">
+        <PushSettings data={pushSettings} embedded />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/src/components/communications/templates/add-channels-dialog.tsx b/src/components/communications/templates/add-channels-dialog.tsx
new file mode 100644
index 000000000..f18f95a70
--- /dev/null
+++ b/src/components/communications/templates/add-channels-dialog.tsx
@@ -0,0 +1,183 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { migrateFromEmailTemplate } from '@/lib/api/communications/templates';
+import { MigrationResponse } from '@/lib/models/communications/template-row';
+import { formatCommunicationsApiError } from '@/lib/logic/communications-api-error';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { useToast } from '@/lib/hooks/use-toast';
+import { Loader2 } from 'lucide-react';
+
+type AddChannelsDialogProps = {
+  emailTemplateId: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function AddChannelsDialog({
+  emailTemplateId,
+  open,
+  onOpenChange,
+}: AddChannelsDialogProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [preview, setPreview] = useState<MigrationResponse | null>(null);
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false);
+  const [isMigrating, setIsMigrating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open || !emailTemplateId) {
+      setPreview(null);
+      setError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoadingPreview(true);
+    setError(null);
+
+    migrateFromEmailTemplate({ emailTemplateId, dryRun: true })
+      .then(response => {
+        if (!cancelled) {
+          setPreview(response);
+        }
+      })
+      .catch(err => {
+        if (!cancelled) {
+          setError(formatCommunicationsApiError(err));
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoadingPreview(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, emailTemplateId]);
+
+  const handleConfirm = async () => {
+    if (!emailTemplateId) return;
+
+    setIsMigrating(true);
+    try {
+      await migrateFromEmailTemplate({
+        emailTemplateId,
+        deleteSource: false,
+      });
+      toast({
+        title: 'Communications',
+        description: 'Unified template created',
+      });
+      onOpenChange(false);
+      router.refresh();
+    } catch (err) {
+      toast({
+        title: 'Communications',
+        description: formatCommunicationsApiError(err),
+      });
+    } finally {
+      setIsMigrating(false);
+    }
+  };
+
+  const plannedItem = preview?.planned[0];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Add channels</DialogTitle>
+          <DialogDescription>
+            Create a unified copy of this email template so you can add push and
+            SMS content. The source email template will be kept.
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoadingPreview && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            Loading preview…
+          </div>
+        )}
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Preview failed</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+
+        {plannedItem && !isLoadingPreview && (
+          <div className="space-y-3 text-sm">
+            <div>
+              <span className="text-muted-foreground">Source: </span>
+              <span className="font-medium">{plannedItem.sourceName}</span>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Channels: </span>
+              <span>{plannedItem.target.channels.join(', ')}</span>
+            </div>
+            {plannedItem.target.variables &&
+              plannedItem.target.variables.length > 0 && (
+                <div>
+                  <span className="text-muted-foreground">Variables: </span>
+                  <span>{plannedItem.target.variables.join(', ')}</span>
+                </div>
+              )}
+            {plannedItem.warning && (
+              <Alert>
+                <AlertTitle>Warning</AlertTitle>
+                <AlertDescription>{plannedItem.warning}</AlertDescription>
+              </Alert>
+            )}
+            {plannedItem.skipped && (
+              <Alert>
+                <AlertTitle>Skipped</AlertTitle>
+                <AlertDescription>
+                  A unified template with this name already exists.
+                </AlertDescription>
+              </Alert>
+            )}
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={isMigrating}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleConfirm}
+            disabled={
+              isLoadingPreview ||
+              isMigrating ||
+              !!error ||
+              !plannedItem ||
+              plannedItem.skipped
+            }
+          >
+            {isMigrating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Create unified copy
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/communications/templates/bulk-add-channels-button.tsx b/src/components/communications/templates/bulk-add-channels-button.tsx
new file mode 100644
index 000000000..8d3161385
--- /dev/null
+++ b/src/components/communications/templates/bulk-add-channels-button.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { migrateFromEmailTemplate } from '@/lib/api/communications/templates';
+import { formatCommunicationsApiError } from '@/lib/logic/communications-api-error';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/lib/hooks/use-toast';
+import { Layers, Loader2 } from 'lucide-react';
+
+type BulkAddChannelsButtonProps = {
+  emailTemplateCount: number;
+};
+
+export function BulkAddChannelsButton({
+  emailTemplateCount,
+}: BulkAddChannelsButtonProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+  const [isMigrating, setIsMigrating] = useState(false);
+
+  if (emailTemplateCount <= 0) {
+    return null;
+  }
+
+  const handleBulkMigrate = async () => {
+    setIsMigrating(true);
+    try {
+      const response = await migrateFromEmailTemplate({
+        skipExisting: true,
+      });
+      const createdCount = response.count ?? response.created?.length ?? 0;
+      toast({
+        title: 'Communications',
+        description: `Created ${createdCount} unified template${createdCount === 1 ? '' : 's'}`,
+      });
+      router.refresh();
+    } catch (err) {
+      toast({
+        title: 'Communications',
+        description: formatCommunicationsApiError(err),
+      });
+    } finally {
+      setIsMigrating(false);
+    }
+  };
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="secondary" type="button" disabled={isMigrating}>
+          {isMigrating ? (
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+          ) : (
+            <Layers className="mr-2 h-4 w-4" />
+          )}
+          Add channels to all ({emailTemplateCount})
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Create unified copies</AlertDialogTitle>
+          <AlertDialogDescription>
+            Create unified copies for {emailTemplateCount} email template
+            {emailTemplateCount === 1 ? '' : 's'}. Templates that already have a
+            unified counterpart will be skipped. Source email templates will be
+            kept.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isMigrating}>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={handleBulkMigrate} disabled={isMigrating}>
+            {isMigrating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Create copies
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/components/communications/templates/columns.tsx b/src/components/communications/templates/columns.tsx
index 28a1a43d2..66858b0f8 100644
--- a/src/components/communications/templates/columns.tsx
+++ b/src/components/communications/templates/columns.tsx
@@ -3,75 +3,247 @@
 import { ColumnDef } from '@tanstack/react-table';
 import moment from 'moment/moment';
 import { DeleteAlert } from '@/components/helpers/delete';
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { EyeIcon } from 'lucide-react';
 import { useToast } from '@/lib/hooks/use-toast';
-import { CommunicationTemplate } from '@/lib/models/communications/templates';
 import { deleteCommunicationTemplate } from '@/lib/api/communications/templates';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  TemplateRow,
+  getTemplateRowCreatedAt,
+  getTemplateRowName,
+  getTemplateRowVariablesCount,
+} from '@/lib/models/communications/template-row';
+import { ExternalTemplate } from '@/lib/models/email';
+import { EmailTemplatePreview } from './email-template-preview';
 
-export function useCommunicationTemplateColumns() {
+type TemplateRowColumnsOptions = {
+  onAddChannels: (emailTemplateId: string) => void;
+};
+
+function ExternalTemplateViewDialog({
+  template,
+  open,
+  onOpenChange,
+}: {
+  template: ExternalTemplate;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>{template.name}</DialogTitle>
+        </DialogHeader>
+        <EmailTemplatePreview
+          template={{
+            name: template.name,
+            subject: template.subject,
+            body: template.body,
+            variables: template.variables,
+            isExternal: true,
+          }}
+          readOnlyDetails
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function StatusBadge({ row }: { row: TemplateRow }) {
+  switch (row.kind) {
+    case 'email':
+      return null;
+    case 'unified':
+      if (row.template.channels.length > 1) {
+        return <Badge variant="secondary">Unified</Badge>;
+      }
+      return null;
+    case 'external':
+      return <Badge variant="secondary">External</Badge>;
+    default: {
+      const _exhaustive: never = row;
+      return _exhaustive;
+    }
+  }
+}
+
+function ChannelsCell({ row }: { row: TemplateRow }) {
+  switch (row.kind) {
+    case 'unified':
+      return (
+        <div className="flex flex-wrap gap-1">
+          {row.template.channels.map(channel => (
+            <Badge key={channel} variant="secondary" className="capitalize">
+              {channel}
+            </Badge>
+          ))}
+        </div>
+      );
+    case 'email':
+    case 'external':
+      return (
+        <Badge variant="secondary" className="capitalize">
+          email
+        </Badge>
+      );
+    default: {
+      const _exhaustive: never = row;
+      return _exhaustive;
+    }
+  }
+}
+
+function ActionsCell({
+  row,
+  onAddChannels,
+}: {
+  row: TemplateRow;
+  onAddChannels: (emailTemplateId: string) => void;
+}) {
   const router = useRouter();
   const { toast } = useToast();
+  const [externalViewOpen, setExternalViewOpen] = useState(false);
 
-  return useMemo<ColumnDef<CommunicationTemplate, unknown>[]>(
+  switch (row.kind) {
+    case 'unified':
+      return (
+        <div className="flex items-center justify-end gap-2">
+          <DeleteAlert
+            title="Delete template"
+            description={`Delete template "${row.template.name}"?`}
+            callback={() =>
+              deleteCommunicationTemplate(row.template._id)
+                .then(() => router.refresh())
+                .catch(err =>
+                  toast({ title: 'Communications', description: err.message })
+                )
+            }
+          />
+          <Link
+            href={`/communications/templates/${row.template._id}`}
+            aria-label={`View ${row.template.name}`}
+          >
+            <EyeIcon className="h-4 w-4" />
+          </Link>
+        </div>
+      );
+    case 'email':
+      return (
+        <div className="flex items-center justify-end gap-2">
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() => onAddChannels(row.template._id)}
+          >
+            Add channels
+          </Button>
+          <Link
+            href={`/communications/templates/email/${row.template._id}`}
+            aria-label={`View ${row.template.name}`}
+          >
+            <EyeIcon className="h-4 w-4" />
+          </Link>
+        </div>
+      );
+    case 'external':
+      return (
+        <div className="flex justify-end">
+          <ExternalTemplateViewDialog
+            template={row.template}
+            open={externalViewOpen}
+            onOpenChange={setExternalViewOpen}
+          />
+          <button
+            type="button"
+            onClick={() => setExternalViewOpen(true)}
+            aria-label={`View ${row.template.name}`}
+          >
+            <EyeIcon className="h-4 w-4" />
+          </button>
+        </div>
+      );
+    default: {
+      const _exhaustive: never = row;
+      return _exhaustive;
+    }
+  }
+}
+
+export function useTemplateRowColumns({
+  onAddChannels,
+}: TemplateRowColumnsOptions) {
+  return useMemo<ColumnDef<TemplateRow, unknown>[]>(
     () => [
       {
-        accessorKey: 'name',
+        id: 'name',
         header: 'Name',
+        accessorFn: row => getTemplateRowName(row),
+        cell: ({ row }) => {
+          const name = getTemplateRowName(row.original);
+          if (row.original.kind === 'unified') {
+            return (
+              <Link
+                href={`/communications/templates/${row.original.template._id}`}
+                className="font-medium underline-offset-3 hover:underline"
+              >
+                {name}
+              </Link>
+            );
+          }
+          if (row.original.kind === 'email') {
+            return (
+              <Link
+                href={`/communications/templates/email/${row.original.template._id}`}
+                className="font-medium underline-offset-3 hover:underline"
+              >
+                {name}
+              </Link>
+            );
+          }
+          return <span>{name}</span>;
+        },
       },
       {
-        accessorKey: 'channels',
+        id: 'channels',
         header: 'Channels',
-        cell: ({ row }) => (
-          <div className="flex flex-wrap gap-1">
-            {row.original.channels.map(channel => (
-              <Badge key={channel} variant="secondary" className="capitalize">
-                {channel}
-              </Badge>
-            ))}
-          </div>
-        ),
+        cell: ({ row }) => <ChannelsCell row={row.original} />,
+      },
+      {
+        id: 'status',
+        header: 'Status',
+        cell: ({ row }) => <StatusBadge row={row.original} />,
       },
       {
-        accessorKey: 'variables',
+        id: 'variables',
         header: 'Variables',
-        cell: ({ row }) => row.original.variables?.length ?? 0,
+        accessorFn: row => getTemplateRowVariablesCount(row),
       },
       {
-        accessorKey: 'createdAt',
+        id: 'createdAt',
         header: 'Created',
+        accessorFn: row => getTemplateRowCreatedAt(row),
         cell: props => moment(props.getValue() as string).format('DD MMM YYYY'),
       },
       {
-        id: 'delete',
-        header: '',
-        cell: props => (
-          <DeleteAlert
-            title="Delete template"
-            description={`Delete unified template "${props.row.original.name}"?`}
-            callback={() =>
-              deleteCommunicationTemplate(props.row.original._id)
-                .then(() => router.refresh())
-                .catch(err =>
-                  toast({ title: 'Communications', description: err.message })
-                )
-            }
-          />
-        ),
-      },
-      {
-        id: 'view',
+        id: 'actions',
         header: '',
-        cell: props => (
-          <Link href={`/communications/templates/${props.row.original._id}`}>
-            <EyeIcon className="h-4 w-4" />
-          </Link>
+        cell: ({ row }) => (
+          <ActionsCell row={row.original} onAddChannels={onAddChannels} />
         ),
       },
     ],
-    [router, toast]
+    [onAddChannels]
   );
 }
diff --git a/src/components/communications/templates/create-template-sheet.tsx b/src/components/communications/templates/create-template-sheet.tsx
index dba0eb9ce..3e203a145 100644
--- a/src/components/communications/templates/create-template-sheet.tsx
+++ b/src/components/communications/templates/create-template-sheet.tsx
@@ -13,29 +13,50 @@ import { Button } from '@/components/ui/button';
 import { Plus } from 'lucide-react';
 import { useToast } from '@/lib/hooks/use-toast';
 import { createCommunicationTemplate } from '@/lib/api/communications/templates';
+import { formatCommunicationsApiError } from '@/lib/logic/communications-api-error';
 import {
   CommunicationTemplateForm,
   CommunicationTemplateFormValues,
 } from './template-form';
 
+const EMAIL_BODY_PLACEHOLDER = '<p></p>';
+
 export function CreateCommunicationTemplateSheet() {
   const [open, setOpen] = useState(false);
   const router = useRouter();
   const { toast } = useToast();
 
   const handleSubmit = async (values: CommunicationTemplateFormValues) => {
-    await createCommunicationTemplate(values)
-      .then(() => {
-        toast({
-          title: 'Communications',
-          description: 'Unified template created',
-        });
-        setOpen(false);
-        router.refresh();
-      })
-      .catch(err =>
-        toast({ title: 'Communications', description: err.message })
+    const payload = { ...values };
+
+    if (payload.channels.includes('email')) {
+      payload.email = {
+        ...payload.email,
+        body: EMAIL_BODY_PLACEHOLDER,
+      };
+    }
+
+    try {
+      const created = await createCommunicationTemplate(payload);
+      toast({
+        title: 'Communications',
+        description: 'Template created',
+      });
+      setOpen(false);
+
+      const openEditor = payload.channels.includes('email');
+      router.push(
+        openEditor
+          ? `/communications/templates/${created._id}?editor-open=true`
+          : '/communications/templates'
       );
+      router.refresh();
+    } catch (err) {
+      toast({
+        title: 'Communications',
+        description: formatCommunicationsApiError(err),
+      });
+    }
   };
 
   return (
@@ -48,10 +69,11 @@ export function CreateCommunicationTemplateSheet() {
       </SheetTrigger>
       <SheetContent className="overflow-y-auto sm:max-w-xl">
         <SheetHeader>
-          <SheetTitle>Create unified template</SheetTitle>
+          <SheetTitle>Create template</SheetTitle>
         </SheetHeader>
         <div className="mt-6">
           <CommunicationTemplateForm
+            mode="create"
             submitLabel="Create template"
             onSubmit={handleSubmit}
           />
diff --git a/src/components/communications/templates/dashboard.tsx b/src/components/communications/templates/dashboard.tsx
index 13e3af82b..39e4916dd 100644
--- a/src/components/communications/templates/dashboard.tsx
+++ b/src/components/communications/templates/dashboard.tsx
@@ -1,40 +1,202 @@
 'use client';
 
-import { CommunicationTemplatesResponse } from './data-table';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { CommunicationTemplatesTable } from './data-table';
 import { SearchInput } from '@/components/helpers/search';
 import { CreateCommunicationTemplateSheet } from './create-template-sheet';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import Link from 'next/link';
+import { BulkAddChannelsButton } from './bulk-add-channels-button';
+import { AddChannelsDialog } from './add-channels-dialog';
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/lib/hooks/use-toast';
+import { syncTemplates } from '@/lib/api/email';
+import { RefreshCw } from 'lucide-react';
+import { isNil } from 'lodash';
+import { mergeTemplateRows } from '@/lib/logic/merge-template-rows';
+import {
+  ChannelFilter,
+  filterTemplateRows,
+  rowMatchesChannel,
+  TemplateFilter,
+} from '@/lib/models/communications/template-row';
+import { CommunicationTemplate } from '@/lib/models/communications/templates';
+import { EmailTemplate, ExternalTemplate } from '@/lib/models/email';
+
+type CommunicationTemplatesResponse = {
+  templateDocuments: CommunicationTemplate[];
+  count: number;
+};
+
+type EmailTemplatesResponse = {
+  templateDocuments: EmailTemplate[];
+  count: number;
+};
+
+type ExternalTemplatesResponse = {
+  templateDocuments: ExternalTemplate[];
+  count: number;
+};
 
 export function CommunicationTemplatesDashboard({
-  data,
+  communicationTemplates,
+  emailTemplates,
+  externalTemplates,
+  emailTemplateId,
 }: {
-  data: CommunicationTemplatesResponse;
+  communicationTemplates: CommunicationTemplatesResponse;
+  emailTemplates: EmailTemplatesResponse;
+  externalTemplates: ExternalTemplatesResponse | null;
+  emailTemplateId?: string;
 }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const { toast } = useToast();
+
+  const [sourceFilter, setSourceFilter] = useState<TemplateFilter>('all');
+  const [channelFilter, setChannelFilter] = useState<ChannelFilter>('all');
+  const [addChannelsDialogId, setAddChannelsDialogId] = useState<string | null>(
+    null
+  );
+  const [addChannelsDialogOpen, setAddChannelsDialogOpen] = useState(false);
+
+  const mergedRows = useMemo(
+    () =>
+      mergeTemplateRows(
+        communicationTemplates.templateDocuments,
+        emailTemplates.templateDocuments,
+        externalTemplates?.templateDocuments ?? null
+      ),
+    [
+      communicationTemplates.templateDocuments,
+      emailTemplates.templateDocuments,
+      externalTemplates?.templateDocuments,
+    ]
+  );
+
+  const emailTemplateCount = useMemo(
+    () => mergedRows.filter(row => row.kind === 'email').length,
+    [mergedRows]
+  );
+
+  const filteredRows = useMemo(() => {
+    const bySource = filterTemplateRows(mergedRows, sourceFilter);
+    return bySource.filter(row => rowMatchesChannel(row, channelFilter));
+  }, [mergedRows, sourceFilter, channelFilter]);
+
+  const searchTerm = (searchParams.get('search') ?? '').toLowerCase();
+  const displayedRows = useMemo(() => {
+    if (!searchTerm) return filteredRows;
+    return filteredRows.filter(row =>
+      row.template.name.toLowerCase().includes(searchTerm)
+    );
+  }, [filteredRows, searchTerm]);
+
+  const openAddChannelsDialog = useCallback((templateId: string) => {
+    setAddChannelsDialogId(templateId);
+    setAddChannelsDialogOpen(true);
+  }, []);
+
+  const handleAddChannelsDialogOpenChange = useCallback(
+    (open: boolean) => {
+      setAddChannelsDialogOpen(open);
+      if (!open) {
+        setAddChannelsDialogId(null);
+        if (searchParams.get('email')) {
+          const params = new URLSearchParams(searchParams.toString());
+          params.delete('email');
+          const query = params.toString();
+          router.replace(query ? `${pathname}?${query}` : pathname);
+        }
+      }
+    },
+    [pathname, router, searchParams]
+  );
+
+  useEffect(() => {
+    if (emailTemplateId) {
+      openAddChannelsDialog(emailTemplateId);
+    }
+  }, [emailTemplateId, openAddChannelsDialog]);
+
+  const handleSyncExternal = () => {
+    syncTemplates()
+      .then(() => {
+        toast({
+          title: 'Communications',
+          description: 'External templates synced successfully',
+        });
+        router.refresh();
+      })
+      .catch(err =>
+        toast({
+          title: 'Communications',
+          description: err.message,
+        })
+      );
+  };
+
   return (
     <div className="space-y-6">
-      <Alert>
-        <AlertTitle>Unified templates</AlertTitle>
-        <AlertDescription>
-          Manage multi-channel templates used by orchestrated sends. Email-only
-          templates remain available under{' '}
-          <Link
-            href="/email/templates"
-            className="underline underline-offset-3"
-          >
-            Email → Templates
-          </Link>
-          .
-        </AlertDescription>
-      </Alert>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <Tabs
+          value={sourceFilter}
+          onValueChange={value => setSourceFilter(value as TemplateFilter)}
+        >
+          <TabsList>
+            <TabsTrigger value="all">All</TabsTrigger>
+            <TabsTrigger value="unified">Unified</TabsTrigger>
+            <TabsTrigger value="email">Email</TabsTrigger>
+            <TabsTrigger value="external">External</TabsTrigger>
+          </TabsList>
+        </Tabs>
 
-      <div className="flex items-center gap-3">
+        <Tabs
+          value={channelFilter}
+          onValueChange={value => setChannelFilter(value as ChannelFilter)}
+        >
+          <TabsList>
+            <TabsTrigger value="all">All channels</TabsTrigger>
+            <TabsTrigger value="email">Email</TabsTrigger>
+            <TabsTrigger value="push">Push</TabsTrigger>
+            <TabsTrigger value="sms">SMS</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
         <SearchInput />
+        <BulkAddChannelsButton emailTemplateCount={emailTemplateCount} />
+        {!isNil(externalTemplates) && (
+          <Button
+            variant="secondary"
+            type="button"
+            onClick={handleSyncExternal}
+          >
+            <RefreshCw className="mr-2 h-4 w-4" />
+            Sync external
+          </Button>
+        )}
         <CreateCommunicationTemplateSheet />
       </div>
 
-      <CommunicationTemplatesTable data={data} />
+      <CommunicationTemplatesTable
+        rows={displayedRows}
+        onAddChannels={openAddChannelsDialog}
+      />
+
+      {sourceFilter === 'external' && isNil(externalTemplates) && (
+        <p className="text-center text-sm text-muted-foreground">
+          External templates are not available for this email provider.
+        </p>
+      )}
+
+      <AddChannelsDialog
+        emailTemplateId={addChannelsDialogId}
+        open={addChannelsDialogOpen}
+        onOpenChange={handleAddChannelsDialogOpenChange}
+      />
     </div>
   );
 }
diff --git a/src/components/communications/templates/data-table.tsx b/src/components/communications/templates/data-table.tsx
index 364f1599e..4f88f883b 100644
--- a/src/components/communications/templates/data-table.tsx
+++ b/src/components/communications/templates/data-table.tsx
@@ -1,26 +1,19 @@
 'use client';
 
 import { DataTable } from '@/components/ui/data-table';
-import { CommunicationTemplate } from '@/lib/models/communications/templates';
-import { useCommunicationTemplateColumns } from './columns';
+import { TemplateRow } from '@/lib/models/communications/template-row';
+import { useTemplateRowColumns } from './columns';
 
-export type CommunicationTemplatesResponse = {
-  templateDocuments: CommunicationTemplate[];
-  count: number;
+type CommunicationTemplatesTableProps = {
+  rows: TemplateRow[];
+  onAddChannels: (emailTemplateId: string) => void;
 };
 
 export function CommunicationTemplatesTable({
-  data,
-}: {
-  data: CommunicationTemplatesResponse;
-}) {
-  const columns = useCommunicationTemplateColumns();
+  rows,
+  onAddChannels,
+}: CommunicationTemplatesTableProps) {
+  const columns = useTemplateRowColumns({ onAddChannels });
 
-  return (
-    <DataTable
-      columns={columns}
-      data={data.templateDocuments}
-      count={data.count}
-    />
-  );
+  return <DataTable columns={columns} data={rows} />;
 }
diff --git a/src/components/communications/templates/email-body-editor.tsx b/src/components/communications/templates/email-body-editor.tsx
new file mode 100644
index 000000000..3875c59ef
--- /dev/null
+++ b/src/components/communications/templates/email-body-editor.tsx
@@ -0,0 +1,272 @@
+'use client';
+
+import { useRef, useState, useCallback } from 'react';
+import { EmailEditor, type EmailEditorRef } from '@react-email/editor';
+import { Inspector } from '@react-email/editor/ui';
+import '@react-email/editor/themes/default.css';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Save, ArrowLeft, Plus, X, Code, Eye } from 'lucide-react';
+import { useToast } from '@/lib/hooks/use-toast';
+import { validateVariableName } from '@/lib/utils/template-utils';
+
+type EmailBodyEditorProps = {
+  title: string;
+  html: string;
+  variables?: string[];
+  onSave: (html: string, variables: string[]) => Promise<void>;
+  onClose: () => void;
+};
+
+type Variable = { name: string };
+
+const uploadImageAsDataUrl = async (file: File): Promise<{ url: string }> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve({ url: reader.result as string });
+    reader.onerror = () => reject(new Error('Failed to read image file'));
+    reader.readAsDataURL(file);
+  });
+};
+
+export function EmailBodyEditor({
+  title,
+  html,
+  variables: initialVariables = [],
+  onSave,
+  onClose,
+}: EmailBodyEditorProps) {
+  const editorRef = useRef<EmailEditorRef>(null);
+  const { toast } = useToast();
+
+  const [variables, setVariables] = useState<Variable[]>(
+    initialVariables.map(name => ({ name }))
+  );
+  const [newVariable, setNewVariable] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [mode, setMode] = useState<'visual' | 'source'>('visual');
+  const [sourceHtml, setSourceHtml] = useState(html || '');
+
+  const switchToSource = useCallback(async () => {
+    if (editorRef.current) {
+      const editorHtml = await editorRef.current.getEmailHTML();
+      setSourceHtml(editorHtml);
+    }
+    setMode('source');
+  }, []);
+
+  const switchToVisual = useCallback(() => {
+    setMode('visual');
+  }, []);
+
+  const saveTemplate = useCallback(async () => {
+    setSaving(true);
+    try {
+      let finalHtml: string;
+      if (mode === 'visual' && editorRef.current) {
+        finalHtml = await editorRef.current.getEmailHTML();
+      } else {
+        finalHtml = sourceHtml;
+      }
+      await onSave(
+        finalHtml,
+        variables.map(variable => variable.name)
+      );
+      toast({ title: 'Success', description: 'Template saved successfully' });
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description:
+          error instanceof Error ? error.message : 'Failed to save template',
+      });
+    } finally {
+      setSaving(false);
+    }
+  }, [mode, sourceHtml, variables, onSave, toast]);
+
+  const addVariable = () => {
+    const trimmedName = newVariable.trim();
+    if (!trimmedName) return;
+
+    const validation = validateVariableName(trimmedName);
+    if (!validation.isValid) {
+      toast({
+        title: 'Invalid Variable Name',
+        description: validation.error || 'Please enter a valid variable name',
+      });
+      return;
+    }
+
+    if (!variables.find(v => v.name === trimmedName)) {
+      setVariables(prev => [...prev, { name: trimmedName }]);
+      setNewVariable('');
+    } else {
+      toast({
+        title: 'Variable Exists',
+        description: 'A variable with this name already exists',
+      });
+    }
+  };
+
+  const removeVariable = (name: string) => {
+    setVariables(prev => prev.filter(v => v.name !== name));
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-background backdrop-blur-xs">
+      <div className="flex h-full w-full flex-col">
+        <div className="flex items-center justify-between border-b bg-background p-4">
+          <div className="flex items-center space-x-4">
+            <Button variant="ghost" size="sm" onClick={onClose}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              Back
+            </Button>
+            <div>
+              <h2 className="text-lg font-semibold">{title}</h2>
+              <p className="text-sm text-muted-foreground">
+                {mode === 'visual' ? 'Visual Editor' : 'Source Editor'}
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center space-x-2">
+            {mode === 'visual' ? (
+              <Button variant="outline" size="sm" onClick={switchToSource}>
+                <Code className="mr-2 h-4 w-4" />
+                View Source
+              </Button>
+            ) : (
+              <Button variant="outline" size="sm" onClick={switchToVisual}>
+                <Eye className="mr-2 h-4 w-4" />
+                Visual Editor
+              </Button>
+            )}
+            <Button
+              onClick={saveTemplate}
+              disabled={saving}
+              className="flex items-center space-x-2"
+            >
+              <Save className="h-4 w-4" />
+              {saving ? 'Saving...' : 'Save Template'}
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex min-h-0 flex-1">
+          {mode === 'visual' ? (
+            <>
+              <div className="flex min-h-0 min-w-0 flex-1">
+                <EmailEditor
+                  ref={editorRef}
+                  content={html || '<p>Start editing your template...</p>'}
+                  theme="basic"
+                  className="min-w-0 flex-1 overflow-y-auto"
+                  onUploadImage={uploadImageAsDataUrl}
+                >
+                  <Inspector.Root className="w-64 shrink-0 overflow-y-auto border-l p-4">
+                    <Inspector.Breadcrumb />
+                    <Inspector.Document />
+                    <Inspector.Node />
+                    <Inspector.Text />
+                  </Inspector.Root>
+                </EmailEditor>
+              </div>
+              <VariablesSidebar
+                variables={variables}
+                newVariable={newVariable}
+                onNewVariableChange={setNewVariable}
+                onAdd={addVariable}
+                onRemove={removeVariable}
+              />
+            </>
+          ) : (
+            <>
+              <div className="min-h-0 flex-1 p-4">
+                <Textarea
+                  value={sourceHtml}
+                  onChange={e => setSourceHtml(e.target.value)}
+                  className="h-full resize-none font-mono text-sm"
+                  placeholder="Enter your HTML template..."
+                />
+              </div>
+              <VariablesSidebar
+                variables={variables}
+                newVariable={newVariable}
+                onNewVariableChange={setNewVariable}
+                onAdd={addVariable}
+                onRemove={removeVariable}
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function VariablesSidebar({
+  variables,
+  newVariable,
+  onNewVariableChange,
+  onAdd,
+  onRemove,
+}: {
+  variables: Variable[];
+  newVariable: string;
+  onNewVariableChange: (value: string) => void;
+  onAdd: () => void;
+  onRemove: (name: string) => void;
+}) {
+  return (
+    <div className="w-72 shrink-0 overflow-y-auto border-l bg-muted/30 p-4">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-sm">Template Variables</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-xs text-muted-foreground">
+            Use <code className="text-xs">{'{{variableName}}'}</code> in your
+            template to insert dynamic content.
+          </p>
+          <div className="flex space-x-2">
+            <Input
+              placeholder="Variable name"
+              value={newVariable}
+              onChange={e => onNewVariableChange(e.target.value)}
+              onKeyDown={e => e.key === 'Enter' && onAdd()}
+            />
+            <Button size="sm" onClick={onAdd}>
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+          <div className="space-y-2">
+            {variables.map(variable => (
+              <div
+                key={variable.name}
+                className="flex items-center justify-between rounded border bg-background p-2"
+              >
+                <Badge variant="secondary" className="font-mono">
+                  {`{{${variable.name}}}`}
+                </Badge>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => onRemove(variable.name)}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+          </div>
+          {variables.length === 0 && (
+            <p className="text-center text-sm text-muted-foreground">
+              No variables defined
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/communications/templates/email-template-detail.tsx b/src/components/communications/templates/email-template-detail.tsx
new file mode 100644
index 000000000..1a0839567
--- /dev/null
+++ b/src/components/communications/templates/email-template-detail.tsx
@@ -0,0 +1,189 @@
+'use client';
+
+import { getTemplates } from '@/lib/api/email';
+import { migrateFromEmailTemplate } from '@/lib/api/communications/templates';
+import { formatCommunicationsApiError } from '@/lib/logic/communications-api-error';
+import React, { useEffect, useState } from 'react';
+import { EmailTemplate } from '@/lib/models/email';
+import { Button } from '@/components/ui/button';
+import { Code, Edit, ExternalLink } from 'lucide-react';
+import { TemplatePreview } from '@/components/email/templates/templatePreview';
+import { TemplateEditor } from '@/components/email/templates/TemplateEditor';
+import { HtmlViewer } from '@/components/email/templates/HtmlViewer';
+import { isExternallyManaged } from '@/lib/utils/template-utils';
+import { useToast } from '@/lib/hooks/use-toast';
+import {
+  PageHeader,
+  PageTitle,
+  PageActions,
+} from '@/components/ui/page-header';
+
+type EmailTemplateDetailProps = {
+  templateId: string;
+  editorOpen?: boolean;
+};
+
+export function EmailTemplateDetail({
+  templateId,
+  editorOpen = false,
+}: EmailTemplateDetailProps) {
+  const [template, setTemplate] = useState<EmailTemplate | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [showEditor, setShowEditor] = useState(editorOpen);
+  const [showHtmlDialog, setShowHtmlDialog] = useState(false);
+  const { toast } = useToast();
+
+  const loadTemplate = async (id: string) => {
+    const templateData = await getTemplates({ search: id });
+    if (templateData.templateDocuments.length > 0) {
+      setTemplate(templateData.templateDocuments[0]);
+    } else {
+      setTemplate(null);
+    }
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const init = async () => {
+      setLoading(true);
+      try {
+        await loadTemplate(templateId);
+      } catch (error) {
+        console.error('Failed to load template:', error);
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+
+    init();
+    setShowEditor(editorOpen);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [templateId, editorOpen]);
+
+  const handleEdit = () => {
+    if (!template || isExternallyManaged(template)) {
+      toast({
+        title: 'External Template',
+        description:
+          'This template is managed by an external system and cannot be edited here.',
+      });
+      return;
+    }
+    setShowEditor(true);
+  };
+
+  const refreshTemplate = async () => {
+    await loadTemplate(templateId);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <div className="text-center">
+          <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-primary" />
+          <p className="text-muted-foreground">Loading template...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!template) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <div className="text-center">
+          <p className="text-muted-foreground">Template not found</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (showEditor) {
+    if (isExternallyManaged(template)) {
+      return (
+        <div className="flex h-64 items-center justify-center">
+          <div className="max-w-md text-center">
+            <ExternalLink className="mx-auto mb-4 h-12 w-12 text-orange-500" />
+            <h3 className="mb-2 text-lg font-semibold">External Template</h3>
+            <p className="mb-4 text-muted-foreground">
+              This template is managed by an external system and cannot be
+              edited here.
+            </p>
+            <Button onClick={() => setShowEditor(false)}>
+              Back to Template
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <TemplateEditor
+        template={template}
+        onClose={() => setShowEditor(false)}
+        onTemplateUpdate={refreshTemplate}
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col space-y-6">
+      <PageHeader>
+        <PageTitle>Template: {template.name}</PageTitle>
+        <PageActions>
+          {!isExternallyManaged(template) && (
+            <Button
+              variant="outline"
+              onClick={() => setShowHtmlDialog(true)}
+              className="flex items-center space-x-2"
+            >
+              <Code className="h-4 w-4" />
+              View HTML
+            </Button>
+          )}
+          <Button onClick={handleEdit} className="flex items-center space-x-2">
+            <Edit className="h-4 w-4" />
+            Edit Template
+          </Button>
+          {!isExternallyManaged(template) && (
+            <Button
+              variant="outline"
+              className="flex items-center space-x-2"
+              onClick={() =>
+                migrateFromEmailTemplate({ emailTemplateId: template._id })
+                  .then(() =>
+                    toast({
+                      title: 'Communications',
+                      description: 'Unified template created',
+                    })
+                  )
+                  .catch(err =>
+                    toast({
+                      title: 'Communications',
+                      description: formatCommunicationsApiError(err),
+                    })
+                  )
+              }
+            >
+              Add channels
+            </Button>
+          )}
+        </PageActions>
+      </PageHeader>
+
+      <TemplatePreview template={template} onTemplateUpdate={refreshTemplate} />
+
+      <HtmlViewer
+        html={template.body || ''}
+        templateName={template.name}
+        isOpen={showHtmlDialog}
+        onClose={() => setShowHtmlDialog(false)}
+      />
+    </div>
+  );
+}
diff --git a/src/components/communications/templates/email-template-preview.tsx b/src/components/communications/templates/email-template-preview.tsx
new file mode 100644
index 000000000..dd213bf30
--- /dev/null
+++ b/src/components/communications/templates/email-template-preview.tsx
@@ -0,0 +1,271 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Eye, Code, Edit, ExternalLink, AlertTriangle } from 'lucide-react';
+import {
+  generateSampleData,
+  compileHandlebarsTemplate,
+} from '@/lib/utils/template-utils';
+
+export type EmailPreviewSource = {
+  name: string;
+  subject?: string;
+  sender?: string;
+  body?: string;
+  variables?: string[];
+  externalId?: string;
+  createdAt?: string | Date;
+  isExternal?: boolean;
+};
+
+type EmailTemplatePreviewProps = {
+  template: EmailPreviewSource;
+  onEdit?: () => void;
+  onViewHtml?: () => void;
+  readOnlyDetails?: boolean;
+};
+
+export function EmailTemplatePreview({
+  template,
+  onEdit,
+  onViewHtml,
+  readOnlyDetails = false,
+}: EmailTemplatePreviewProps) {
+  const [previewData, setPreviewData] = useState<Record<string, string>>({});
+  const [activeTab, setActiveTab] = useState<
+    'preview' | 'variables' | 'details'
+  >('preview');
+
+  useEffect(() => {
+    if (template.variables && template.variables.length > 0) {
+      setPreviewData(generateSampleData(template.variables));
+    }
+  }, [template.variables]);
+
+  const getPreviewHtml = () => {
+    if (!template.body) return '';
+    return compileHandlebarsTemplate(template.body, previewData);
+  };
+
+  const updatePreviewData = (variableName: string, value: string) => {
+    setPreviewData(prev => ({ ...prev, [variableName]: value }));
+  };
+
+  if (template.isExternal) {
+    return (
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle className="flex items-center space-x-2">
+              <ExternalLink className="h-5 w-5 text-orange-500" />
+              <span>External Template</span>
+            </CardTitle>
+            <Badge variant="secondary">External</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center space-x-3 rounded-lg border border-orange-200 bg-orange-50 p-4 dark:border-orange-900 dark:bg-orange-950/30">
+            <AlertTriangle className="h-5 w-5 text-orange-500" />
+            <div>
+              <h4 className="font-medium text-orange-800 dark:text-orange-300">
+                Externally managed template
+              </h4>
+              <p className="text-sm text-orange-700 dark:text-orange-400">
+                This template is managed by your email provider. Update it in
+                the provider&apos;s interface.
+              </p>
+            </div>
+          </div>
+          <PreviewTabs
+            template={template}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+            previewData={previewData}
+            onPreviewDataChange={updatePreviewData}
+            getPreviewHtml={getPreviewHtml}
+            readOnlyDetails
+          />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center space-x-2">
+            <Eye className="h-5 w-5" />
+            <span>Template Preview</span>
+          </CardTitle>
+          <div className="flex space-x-2">
+            {onViewHtml && (
+              <Button variant="outline" size="sm" onClick={onViewHtml}>
+                <Code className="mr-2 h-4 w-4" />
+                View HTML
+              </Button>
+            )}
+            {onEdit && (
+              <Button size="sm" onClick={onEdit}>
+                <Edit className="mr-2 h-4 w-4" />
+                Edit Template
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <PreviewTabs
+          template={template}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          previewData={previewData}
+          onPreviewDataChange={updatePreviewData}
+          getPreviewHtml={getPreviewHtml}
+          readOnlyDetails={readOnlyDetails}
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
+function PreviewTabs({
+  template,
+  activeTab,
+  onTabChange,
+  previewData,
+  onPreviewDataChange,
+  getPreviewHtml,
+  readOnlyDetails,
+}: {
+  template: EmailPreviewSource;
+  activeTab: 'preview' | 'variables' | 'details';
+  onTabChange: (tab: 'preview' | 'variables' | 'details') => void;
+  previewData: Record<string, string>;
+  onPreviewDataChange: (name: string, value: string) => void;
+  getPreviewHtml: () => string;
+  readOnlyDetails: boolean;
+}) {
+  return (
+    <Tabs
+      value={activeTab}
+      onValueChange={value =>
+        onTabChange(value as 'preview' | 'variables' | 'details')
+      }
+    >
+      <TabsList>
+        <TabsTrigger value="preview">Preview</TabsTrigger>
+        {template.variables && template.variables.length > 0 && (
+          <TabsTrigger value="variables">
+            Variables ({template.variables.length})
+          </TabsTrigger>
+        )}
+        <TabsTrigger value="details">Details</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="preview" className="space-y-4">
+        <div className="space-y-2">
+          <h4 className="font-medium">Email Preview</h4>
+          <div className="overflow-hidden rounded-lg border">
+            <div className="border-b bg-muted/40 px-4 py-2">
+              <div className="text-sm text-muted-foreground">
+                <strong>Subject:</strong> {template.subject || 'No subject'}
+              </div>
+              {template.sender && (
+                <div className="text-sm text-muted-foreground">
+                  <strong>From:</strong> {template.sender}
+                </div>
+              )}
+            </div>
+            <div className="h-96 overflow-auto">
+              <iframe
+                srcDoc={getPreviewHtml()}
+                className="h-full w-full"
+                title="Template Preview"
+                sandbox="allow-same-origin"
+              />
+            </div>
+          </div>
+        </div>
+      </TabsContent>
+
+      {template.variables && template.variables.length > 0 && (
+        <TabsContent value="variables" className="space-y-4">
+          <div className="space-y-2">
+            <h4 className="font-medium">Template Variables</h4>
+            <p className="text-sm text-muted-foreground">
+              Adjust the values below to see how they affect the template
+              preview.
+            </p>
+            <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+              {template.variables.map(variable => (
+                <div key={variable} className="space-y-1">
+                  <Label className="text-sm font-medium">{variable}</Label>
+                  <Input
+                    value={previewData[variable] || ''}
+                    onChange={e =>
+                      onPreviewDataChange(variable, e.target.value)
+                    }
+                    placeholder={`Enter value for ${variable}`}
+                    className="text-sm"
+                  />
+                </div>
+              ))}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                const sampleData = generateSampleData(template.variables || []);
+                Object.entries(sampleData).forEach(([key, value]) =>
+                  onPreviewDataChange(key, value)
+                );
+              }}
+            >
+              Reset to sample data
+            </Button>
+          </div>
+        </TabsContent>
+      )}
+
+      <TabsContent value="details" className="space-y-4">
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <strong>Name:</strong> {template.name}
+          </div>
+          <div>
+            <strong>Subject:</strong> {template.subject || 'Not set'}
+          </div>
+          <div>
+            <strong>Sender:</strong> {template.sender || 'Not set'}
+          </div>
+          <div>
+            <strong>Variables:</strong> {template.variables?.length || 0}
+          </div>
+          {template.externalId && (
+            <div>
+              <strong>External ID:</strong> {template.externalId}
+            </div>
+          )}
+          {template.createdAt && (
+            <div>
+              <strong>Created:</strong>{' '}
+              {new Date(template.createdAt).toLocaleDateString()}
+            </div>
+          )}
+        </div>
+        {readOnlyDetails && (
+          <p className="text-sm text-muted-foreground">
+            Template details are read-only.
+          </p>
+        )}
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/src/components/communications/templates/template-form.tsx b/src/components/communications/templates/template-form.tsx
index 40dae72c8..ea3792edc 100644
--- a/src/components/communications/templates/template-form.tsx
+++ b/src/components/communications/templates/template-form.tsx
@@ -25,31 +25,32 @@ const channelOptions: { id: CommunicationChannel; label: string }[] = [
   { id: 'sms', label: 'SMS' },
 ];
 
-export const communicationTemplateSchema = z
-  .object({
-    name: z.string().min(1, 'Name is required'),
-    templateDescription: z.string().optional(),
-    channels: z.array(z.enum(['email', 'push', 'sms'])).min(1),
-    email: z
-      .object({
-        subject: z.string().optional(),
-        body: z.string().optional(),
-        sender: z.string().optional(),
-      })
-      .optional(),
-    push: z
-      .object({
-        title: z.string().optional(),
-        body: z.string().optional(),
-      })
-      .optional(),
-    sms: z
-      .object({
-        message: z.string().optional(),
-      })
-      .optional(),
-  })
-  .superRefine((data, ctx) => {
+const baseSchema = z.object({
+  name: z.string().min(1, 'Name is required'),
+  templateDescription: z.string().optional(),
+  channels: z.array(z.enum(['email', 'push', 'sms'])).min(1),
+  email: z
+    .object({
+      subject: z.string().optional(),
+      body: z.string().optional(),
+      sender: z.string().optional(),
+    })
+    .optional(),
+  push: z
+    .object({
+      title: z.string().optional(),
+      body: z.string().optional(),
+    })
+    .optional(),
+  sms: z
+    .object({
+      message: z.string().optional(),
+    })
+    .optional(),
+});
+
+function buildSchema(mode: 'create' | 'edit') {
+  return baseSchema.superRefine((data, ctx) => {
     if (data.channels.includes('email')) {
       if (!data.email?.subject?.trim()) {
         ctx.addIssue({
@@ -58,7 +59,11 @@ export const communicationTemplateSchema = z
           path: ['email', 'subject'],
         });
       }
-      if (!data.email?.body?.trim()) {
+      if (
+        mode === 'edit' &&
+        data.channels.includes('email') &&
+        !data.email?.body?.trim()
+      ) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
           message: 'Email body is required',
@@ -90,24 +95,27 @@ export const communicationTemplateSchema = z
       });
     }
   });
+}
 
-export type CommunicationTemplateFormValues = z.infer<
-  typeof communicationTemplateSchema
->;
+export type CommunicationTemplateFormValues = z.infer<typeof baseSchema>;
 
 export function CommunicationTemplateForm({
   defaultValues,
   onSubmit,
   submitLabel,
   disableName,
+  mode = 'edit',
 }: {
   defaultValues?: Partial<CommunicationTemplateFormValues>;
   onSubmit: (values: CommunicationTemplateFormValues) => Promise<void>;
   submitLabel: string;
   disableName?: boolean;
+  mode?: 'create' | 'edit';
 }) {
+  const schema = buildSchema(mode);
+
   const form = useForm<CommunicationTemplateFormValues>({
-    resolver: zodResolver(communicationTemplateSchema),
+    resolver: zodResolver(schema),
     defaultValues: {
       name: '',
       templateDescription: '',
@@ -235,23 +243,30 @@ export function CommunicationTemplateForm({
                   </FormItem>
                 )}
               />
-              <FormField
-                control={form.control}
-                name="email.body"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Body</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        {...field}
-                        rows={8}
-                        placeholder="<p>Hello {{name}}</p>"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              {mode === 'create' ? (
+                <p className="text-sm text-muted-foreground">
+                  After creating the template, you&apos;ll open the rich email
+                  editor to design the body.
+                </p>
+              ) : (
+                <FormField
+                  control={form.control}
+                  name="email.body"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Body</FormLabel>
+                      <FormControl>
+                        <Textarea
+                          {...field}
+                          rows={8}
+                          placeholder="<p>Hello {{name}}</p>"
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
             </TabsContent>
           )}
 
diff --git a/src/components/communications/test/channel-status-card.tsx b/src/components/communications/test/channel-status-card.tsx
new file mode 100644
index 000000000..2f0ee5796
--- /dev/null
+++ b/src/components/communications/test/channel-status-card.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import Link from 'next/link';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { EmailSettings } from '@/lib/models/email';
+import { SmsSettings } from '@/lib/models/Sms';
+import { NotificationSettings } from '@/lib/models/Notification';
+
+type Channel = 'email' | 'sms' | 'push';
+
+type ChannelStatusCardProps = {
+  channel: Channel;
+  emailSettings?: EmailSettings;
+  smsSettings?: SmsSettings;
+  pushSettings?: NotificationSettings;
+};
+
+function formatProviderName(value: string): string {
+  return value
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, char => char.toUpperCase())
+    .trim();
+}
+
+function getChannelStatus(
+  channel: Channel,
+  emailSettings?: EmailSettings,
+  smsSettings?: SmsSettings,
+  pushSettings?: NotificationSettings
+) {
+  switch (channel) {
+    case 'email':
+      return {
+        label: 'Email',
+        active: emailSettings?.active ?? false,
+        provider: emailSettings?.transport
+          ? formatProviderName(emailSettings.transport)
+          : 'Not configured',
+      };
+    case 'sms':
+      return {
+        label: 'SMS',
+        active: smsSettings?.active ?? false,
+        provider: smsSettings?.providerName
+          ? formatProviderName(smsSettings.providerName)
+          : 'Not configured',
+      };
+    case 'push':
+      return {
+        label: 'Push',
+        active: pushSettings?.active ?? false,
+        provider: pushSettings?.providerName
+          ? formatProviderName(pushSettings.providerName)
+          : 'Not configured',
+      };
+    default: {
+      const _exhaustive: never = channel;
+      return _exhaustive;
+    }
+  }
+}
+
+export function ChannelStatusCard({
+  channel,
+  emailSettings,
+  smsSettings,
+  pushSettings,
+}: ChannelStatusCardProps) {
+  const status = getChannelStatus(
+    channel,
+    emailSettings,
+    smsSettings,
+    pushSettings
+  );
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{status.label} status</CardTitle>
+        <CardDescription>Current provider configuration</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-sm text-muted-foreground">Module</span>
+          <Badge variant={status.active ? 'default' : 'secondary'}>
+            {status.active ? 'Active' : 'Inactive'}
+          </Badge>
+        </div>
+        <div className="space-y-1">
+          <span className="text-sm text-muted-foreground">Provider</span>
+          <p className="text-sm font-medium">{status.provider}</p>
+        </div>
+        {!status.active && (
+          <p className="text-xs text-muted-foreground">
+            Enable and configure this channel before sending tests.
+          </p>
+        )}
+        <Button variant="outline" size="sm" className="w-full" asChild>
+          <Link href={`/communications/settings?tab=${channel}`}>
+            Channel settings
+          </Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/communications/test/communications-test-tabs.tsx b/src/components/communications/test/communications-test-tabs.tsx
new file mode 100644
index 000000000..bf2031f9d
--- /dev/null
+++ b/src/components/communications/test/communications-test-tabs.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { SendEmailForm } from '@/components/email/send/form';
+import { TestSendSmsForm } from '@/components/sms/smsTest/testSendSmsForm';
+import { TestSendForm } from '@/components/notifications/testSend/testSendForm';
+import { ChannelStatusCard } from '@/components/communications/test/channel-status-card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { EmailSettings, EmailTemplate } from '@/lib/models/email';
+import { SmsSettings } from '@/lib/models/Sms';
+import { NotificationSettings } from '@/lib/models/Notification';
+
+const TEST_TABS = ['email', 'sms', 'push'] as const;
+type TestTab = (typeof TEST_TABS)[number];
+
+function parseTestTab(tab: string | undefined): TestTab {
+  if (tab === 'sms' || tab === 'push') return tab;
+  return 'email';
+}
+
+type CommunicationsTestTabsProps = {
+  initialTab: TestTab;
+  emailSettings: EmailSettings;
+  smsSettings: SmsSettings;
+  pushSettings: NotificationSettings;
+  emailTemplates: {
+    templateDocuments: EmailTemplate[];
+    count: number;
+  };
+};
+
+export function CommunicationsTestTabs({
+  initialTab,
+  emailSettings,
+  smsSettings,
+  pushSettings,
+  emailTemplates,
+}: CommunicationsTestTabsProps) {
+  const router = useRouter();
+  const activeTab = initialTab;
+
+  const handleTabChange = (value: string) => {
+    const tab = parseTestTab(value);
+    router.replace(`/communications/test?tab=${tab}`, { scroll: false });
+  };
+
+  const statusProps = {
+    emailSettings,
+    smsSettings,
+    pushSettings,
+  };
+
+  return (
+    <Tabs value={activeTab} onValueChange={handleTabChange}>
+      <TabsList>
+        <TabsTrigger value="email">Email</TabsTrigger>
+        <TabsTrigger value="sms">SMS</TabsTrigger>
+        <TabsTrigger value="push">Push</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="email" className="mt-6">
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <SendEmailForm templates={emailTemplates} />
+          </div>
+          <ChannelStatusCard channel="email" {...statusProps} />
+        </div>
+      </TabsContent>
+
+      <TabsContent value="sms" className="mt-6">
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <TestSendSmsForm embedded />
+          </div>
+          <ChannelStatusCard channel="sms" {...statusProps} />
+        </div>
+      </TabsContent>
+
+      <TabsContent value="push" className="mt-6">
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <TestSendForm embedded />
+          </div>
+          <ChannelStatusCard channel="push" {...statusProps} />
+        </div>
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/src/components/email/settings/settings.tsx b/src/components/email/settings/settings.tsx
index b3d81502d..866e9def0 100644
--- a/src/components/email/settings/settings.tsx
+++ b/src/components/email/settings/settings.tsx
@@ -22,6 +22,7 @@ import {
 
 interface Props {
   data: EmailSettings;
+  embedded?: boolean;
 }
 
 const EMAIL_MODULE_NAMES = ['communications', 'email'] as const;
@@ -119,7 +120,7 @@ function isEmailActivationSuccess(result: PatchSettingsResult | void) {
   return isCommunicationsModuleServing(result.modules, EMAIL_MODULE_NAMES);
 }
 
-export const Settings = ({ data }: Props) => {
+export const Settings = ({ data, embedded = false }: Props) => {
   const [emailModule, setEmailModule] = useState<boolean>(false);
   const [edit, setEdit] = useState<boolean>(false);
   const { addAlert } = useAlerts();
@@ -184,57 +185,57 @@ export const Settings = ({ data }: Props) => {
   };
 
   return (
-    <div className={'container mx-auto py-10 main-scrollbar'}>
-      <div className={'flex flex-col gap-6'}>
-        <div className="space-y-0.5">
-          <ModuleToggle
-            label="Email Module"
-            checked={emailModule}
-            isSaving={isSaving}
-            onCheckedChange={handleSwitchChange}
-          />
-          <div className={'pr-2 w-7/12'}>
-            <p className={'text-xs text-muted-foreground'}>
-              Since you have created an account on one of the Supported
-              Providers (Mailgun, Sendgrid, Mandrill, Smtp), you need to
-              configure the provider to proceed with the activation of the
-              module. Visit documentation for{' '}
-              <a
-                href={
-                  'https://getconduit.dev/docs/modules/email/config#mandrill'
-                }
-                className="hover:underline"
-                target={'_blank'}
-              >
-                Mandrill
-              </a>
-              ,{' '}
-              <a
-                href={
-                  'https://getconduit.dev/docs/modules/email/config#sendgrid'
-                }
-                className="hover:underline"
-                target={'_blank'}
-              >
-                Sendgrid
-              </a>
-              .
-            </p>
-          </div>
+    <div
+      className={
+        embedded
+          ? 'space-y-6'
+          : 'container mx-auto py-10 main-scrollbar flex flex-col gap-6'
+      }
+    >
+      <div className="space-y-0.5">
+        <ModuleToggle
+          label="Email Module"
+          checked={emailModule}
+          isSaving={isSaving}
+          onCheckedChange={handleSwitchChange}
+        />
+        <div className={'pr-2 w-7/12'}>
+          <p className={'text-xs text-muted-foreground'}>
+            Since you have created an account on one of the Supported Providers
+            (Mailgun, Sendgrid, Mandrill, Smtp), you need to configure the
+            provider to proceed with the activation of the module. Visit
+            documentation for{' '}
+            <a
+              href={'https://getconduit.dev/docs/modules/email/config#mandrill'}
+              className="hover:underline"
+              target={'_blank'}
+            >
+              Mandrill
+            </a>
+            ,{' '}
+            <a
+              href={'https://getconduit.dev/docs/modules/email/config#sendgrid'}
+              className="hover:underline"
+              target={'_blank'}
+            >
+              Sendgrid
+            </a>
+            .
+          </p>
         </div>
-        {emailModule && (
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit, () => undefined)}>
-              <SettingsForm
-                edit={edit}
-                isSaving={isSaving}
-                setEdit={setEdit}
-                data={data}
-              />
-            </form>
-          </Form>
-        )}
       </div>
+      {emailModule && (
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit, () => undefined)}>
+            <SettingsForm
+              edit={edit}
+              isSaving={isSaving}
+              setEdit={setEdit}
+              data={data}
+            />
+          </form>
+        </Form>
+      )}
     </div>
   );
 };
diff --git a/src/components/email/templates/TemplateEditor.tsx b/src/components/email/templates/TemplateEditor.tsx
index c02ff52d1..8a790f6ef 100644
--- a/src/components/email/templates/TemplateEditor.tsx
+++ b/src/components/email/templates/TemplateEditor.tsx
@@ -1,20 +1,10 @@
 'use client';
 
-import React, { useRef, useState, useCallback } from 'react';
-import { EmailEditor, type EmailEditorRef } from '@react-email/editor';
-import { Inspector } from '@react-email/editor/ui';
-import '@react-email/editor/themes/default.css';
-import { Button } from '@/components/ui/button';
+import React from 'react';
 import { useRouter } from 'next/navigation';
 import { patchTemplates } from '@/lib/api/email';
-import { useToast } from '@/lib/hooks/use-toast';
 import { EmailTemplate } from '@/lib/models/email';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
-import { Save, ArrowLeft, Plus, X, Code, Eye } from 'lucide-react';
-import { validateVariableName } from '@/lib/utils/template-utils';
+import { EmailBodyEditor } from '@/components/communications/templates/email-body-editor';
 
 interface TemplateEditorProps {
   template: EmailTemplate;
@@ -22,272 +12,28 @@ interface TemplateEditorProps {
   onTemplateUpdate?: () => void;
 }
 
-interface Variable {
-  name: string;
-}
-
-const uploadImageAsDataUrl = async (file: File): Promise<{ url: string }> => {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve({ url: reader.result as string });
-    reader.onerror = () => reject(new Error('Failed to read image file'));
-    reader.readAsDataURL(file);
-  });
-};
-
 export const TemplateEditor: React.FC<TemplateEditorProps> = ({
   template,
   onClose,
   onTemplateUpdate,
 }) => {
-  const editorRef = useRef<EmailEditorRef>(null);
   const router = useRouter();
-  const { toast } = useToast();
-
-  const [variables, setVariables] = useState<Variable[]>(
-    template.variables?.map(v => ({ name: v })) || []
-  );
-  const [newVariable, setNewVariable] = useState('');
-  const [saving, setSaving] = useState(false);
-  const [mode, setMode] = useState<'visual' | 'source'>('visual');
-  const [sourceHtml, setSourceHtml] = useState(template.body || '');
-
-  const switchToSource = useCallback(async () => {
-    if (editorRef.current) {
-      const html = await editorRef.current.getEmailHTML();
-      setSourceHtml(html);
-    }
-    setMode('source');
-  }, []);
-
-  const switchToVisual = useCallback(() => {
-    setMode('visual');
-  }, []);
-
-  const saveTemplate = useCallback(async () => {
-    if (!template._id) {
-      toast({ title: 'Error', description: 'Template ID is required' });
-      return;
-    }
-
-    setSaving(true);
-    try {
-      let finalHtml: string;
-
-      if (mode === 'visual' && editorRef.current) {
-        finalHtml = await editorRef.current.getEmailHTML();
-      } else {
-        finalHtml = sourceHtml;
-      }
-
-      await patchTemplates(template._id, { body: finalHtml });
-
-      toast({ title: 'Success', description: 'Template saved successfully' });
-      router.refresh();
-      onTemplateUpdate?.();
-    } catch (error) {
-      toast({
-        title: 'Error',
-        description:
-          error instanceof Error ? error.message : 'Failed to save template',
-      });
-    } finally {
-      setSaving(false);
-    }
-  }, [template._id, mode, sourceHtml, router, toast, onTemplateUpdate]);
 
-  const addVariable = () => {
-    const trimmedName = newVariable.trim();
-    if (!trimmedName) return;
-
-    const validation = validateVariableName(trimmedName);
-    if (!validation.isValid) {
-      toast({
-        title: 'Invalid Variable Name',
-        description: validation.error || 'Please enter a valid variable name',
-      });
-      return;
-    }
-
-    if (!variables.find(v => v.name === trimmedName)) {
-      setVariables(prev => [...prev, { name: trimmedName }]);
-      setNewVariable('');
-    } else {
-      toast({
-        title: 'Variable Exists',
-        description: 'A variable with this name already exists',
-      });
-    }
-  };
-
-  const removeVariable = (name: string) => {
-    setVariables(prev => prev.filter(v => v.name !== name));
+  const handleSave = async (html: string) => {
+    await patchTemplates(template._id, {
+      body: html,
+    });
+    router.refresh();
+    onTemplateUpdate?.();
   };
 
   return (
-    <div className="fixed z-50 inset-0 bg-background backdrop-blur-xs">
-      <div className="h-full w-full flex flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b bg-background">
-          <div className="flex items-center space-x-4">
-            <Button variant="ghost" size="sm" onClick={onClose}>
-              <ArrowLeft className="h-4 w-4 mr-2" />
-              Back
-            </Button>
-            <div>
-              <h2 className="text-lg font-semibold">
-                Edit Template: {template.name}
-              </h2>
-              <p className="text-sm text-muted-foreground">
-                {mode === 'visual' ? 'Visual Editor' : 'Source Editor'}
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center space-x-2">
-            {mode === 'visual' ? (
-              <Button variant="outline" size="sm" onClick={switchToSource}>
-                <Code className="h-4 w-4 mr-2" />
-                View Source
-              </Button>
-            ) : (
-              <Button variant="outline" size="sm" onClick={switchToVisual}>
-                <Eye className="h-4 w-4 mr-2" />
-                Visual Editor
-              </Button>
-            )}
-            <Button
-              onClick={saveTemplate}
-              disabled={saving}
-              className="flex items-center space-x-2"
-            >
-              <Save className="h-4 w-4" />
-              {saving ? 'Saving...' : 'Save Template'}
-            </Button>
-          </div>
-        </div>
-
-        <div className="flex-1 flex min-h-0">
-          {mode === 'visual' ? (
-            <>
-              <div className="flex-1 flex min-h-0 min-w-0">
-                <EmailEditor
-                  ref={editorRef}
-                  content={
-                    template.body || '<p>Start editing your template...</p>'
-                  }
-                  theme="basic"
-                  className="flex-1 min-w-0 overflow-y-auto"
-                  onUploadImage={uploadImageAsDataUrl}
-                >
-                  <Inspector.Root className="w-64 shrink-0 border-l p-4 overflow-y-auto">
-                    <Inspector.Breadcrumb />
-                    <Inspector.Document />
-                    <Inspector.Node />
-                    <Inspector.Text />
-                  </Inspector.Root>
-                </EmailEditor>
-              </div>
-
-              {/* Variables sidebar */}
-              <div className="w-72 shrink-0 border-l bg-muted/30 p-4 overflow-y-auto">
-                <VariablesSidebar
-                  variables={variables}
-                  newVariable={newVariable}
-                  onNewVariableChange={setNewVariable}
-                  onAdd={addVariable}
-                  onRemove={removeVariable}
-                />
-              </div>
-            </>
-          ) : (
-            <>
-              <div className="flex-1 p-4 min-h-0">
-                <Textarea
-                  value={sourceHtml}
-                  onChange={e => setSourceHtml(e.target.value)}
-                  className="h-full font-mono text-sm resize-none"
-                  placeholder="Enter your HTML template..."
-                />
-              </div>
-
-              <div className="w-72 shrink-0 border-l bg-muted/30 p-4 overflow-y-auto">
-                <VariablesSidebar
-                  variables={variables}
-                  newVariable={newVariable}
-                  onNewVariableChange={setNewVariable}
-                  onAdd={addVariable}
-                  onRemove={removeVariable}
-                />
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
+    <EmailBodyEditor
+      title={`Edit Template: ${template.name}`}
+      html={template.body || ''}
+      variables={template.variables}
+      onSave={html => handleSave(html)}
+      onClose={onClose}
+    />
   );
 };
-
-function VariablesSidebar({
-  variables,
-  newVariable,
-  onNewVariableChange,
-  onAdd,
-  onRemove,
-}: {
-  variables: Variable[];
-  newVariable: string;
-  onNewVariableChange: (value: string) => void;
-  onAdd: () => void;
-  onRemove: (name: string) => void;
-}) {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-sm">Template Variables</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <p className="text-xs text-muted-foreground">
-          Use <code className="text-xs">{'{{variableName}}'}</code> in your
-          template to insert dynamic content.
-        </p>
-        <div className="flex space-x-2">
-          <Input
-            placeholder="Variable name"
-            value={newVariable}
-            onChange={e => onNewVariableChange(e.target.value)}
-            onKeyDown={e => e.key === 'Enter' && onAdd()}
-          />
-          <Button size="sm" onClick={onAdd}>
-            <Plus className="h-4 w-4" />
-          </Button>
-        </div>
-
-        <div className="space-y-2">
-          {variables.map(variable => (
-            <div
-              key={variable.name}
-              className="flex items-center justify-between p-2 bg-background rounded border"
-            >
-              <Badge variant="secondary" className="font-mono">
-                {`{{${variable.name}}}`}
-              </Badge>
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={() => onRemove(variable.name)}
-              >
-                <X className="h-3 w-3" />
-              </Button>
-            </div>
-          ))}
-        </div>
-
-        {variables.length === 0 && (
-          <p className="text-sm text-muted-foreground text-center">
-            No variables defined
-          </p>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/src/components/email/templates/createTemplateSheet.tsx b/src/components/email/templates/createTemplateSheet.tsx
index 4845e2250..865d417c7 100644
--- a/src/components/email/templates/createTemplateSheet.tsx
+++ b/src/components/email/templates/createTemplateSheet.tsx
@@ -45,7 +45,9 @@ export const CreateTemplateSheet = () => {
                 const templateId = await createTemplate(data).then(
                   res => res.template._id
                 );
-                router.push(`/email/templates/${templateId}?editor-open=true`);
+                router.push(
+                  `/communications/templates/email/${templateId}?editor-open=true`
+                );
               },
               () => undefined
             )}
diff --git a/src/components/email/templates/dashboard.tsx b/src/components/email/templates/dashboard.tsx
index 546eaede9..c3bdd35f6 100644
--- a/src/components/email/templates/dashboard.tsx
+++ b/src/components/email/templates/dashboard.tsx
@@ -17,6 +17,7 @@ import { isNil } from 'lodash';
 import { syncTemplates } from '@/lib/api/email';
 import { useToast } from '@/lib/hooks/use-toast';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { CreateTemplateSheet } from '@/components/email/templates/createTemplateSheet';
 import { RefreshCw } from 'lucide-react';
@@ -36,12 +37,12 @@ export const TemplatesDashboard = ({
       <div className="rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
         Email-only templates are still supported. For new multi-channel work,
         use{' '}
-        <a
+        <Link
           href="/communications/templates"
           className="underline underline-offset-3"
         >
-          Unified Templates
-        </a>
+          Templates
+        </Link>
         .
       </div>
       <Tabs defaultValue="local">
diff --git a/src/components/email/templates/tables/templates/columns.tsx b/src/components/email/templates/tables/templates/columns.tsx
index b607ae2a3..25d5d7c0f 100644
--- a/src/components/email/templates/tables/templates/columns.tsx
+++ b/src/components/email/templates/tables/templates/columns.tsx
@@ -93,7 +93,9 @@ export function useColumns() {
         header: '',
         enableSorting: false,
         cell: props => (
-          <Link href={`/email/templates/${props.row.original._id}`}>
+          <Link
+            href={`/communications/templates/email/${props.row.original._id}`}
+          >
             <EyeIcon className="w-4 h-4" />
           </Link>
         ),
diff --git a/src/components/navigation/navList.config.ts b/src/components/navigation/navList.config.ts
index af7dd797c..ef11a1b80 100644
--- a/src/components/navigation/navList.config.ts
+++ b/src/components/navigation/navList.config.ts
@@ -1,5 +1,4 @@
 import {
-  BellDot,
   CodeIcon,
   Database,
   HardDrive,
@@ -7,7 +6,6 @@ import {
   KeyRound,
   Logs,
   LucideMail,
-  LucideMessageSquare,
   MessagesSquare,
   Router,
   Settings,
@@ -102,38 +100,15 @@ export const navGroups: NavGroup[] = [
     id: 'communications',
     items: [
       {
-        title: 'Unified Templates',
-        url: '/communications/templates',
+        title: 'Communications',
+        url: '/communications',
         icon: LucideMail,
-      },
-      {
-        title: 'Email',
-        url: '/email',
-        icon: LucideMail,
-        items: [
-          { title: 'Templates', url: '/email/templates' },
-          { title: 'Send', url: '/email/send' },
-          { title: 'Records', url: '/email/records' },
-          { title: 'Settings', url: '/email/settings' },
-        ],
-      },
-      {
-        title: 'SMS',
-        url: '/sms',
-        icon: LucideMessageSquare,
-        items: [
-          { title: 'Test Send', url: '/sms/send' },
-          { title: 'Settings', url: '/sms/settings' },
-        ],
-      },
-      {
-        title: 'Notifications',
-        url: '/push-notifications',
-        icon: BellDot,
         items: [
-          { title: 'Tokens', url: '/push-notifications/tokens' },
-          { title: 'Test Send', url: '/push-notifications/test' },
-          { title: 'Settings', url: '/push-notifications/settings' },
+          { title: 'Overview', url: '/communications' },
+          { title: 'Templates', url: '/communications/templates' },
+          { title: 'Logs & Devices', url: '/communications/logs' },
+          { title: 'Settings', url: '/communications/settings' },
+          { title: 'Test Send', url: '/communications/test' },
         ],
       },
     ],
diff --git a/src/components/notifications/settings.tsx b/src/components/notifications/settings.tsx
index f445de9ae..c3dc84a54 100644
--- a/src/components/notifications/settings.tsx
+++ b/src/components/notifications/settings.tsx
@@ -21,6 +21,7 @@ import {
 
 interface Props {
   data: NotificationSettings;
+  embedded?: boolean;
 }
 
 const PUSH_MODULE_NAMES = ['communications', 'pushNotifications'] as const;
@@ -129,7 +130,7 @@ function isPushActivationSuccess(result: PatchSettingsResult | void) {
   return isCommunicationsModuleServing(result.modules, PUSH_MODULE_NAMES);
 }
 
-export const Settings = ({ data }: Props) => {
+export const Settings = ({ data, embedded = false }: Props) => {
   const [notificationModule, setNotificationModule] = useState<boolean>(false);
   const [edit, setEdit] = useState<boolean>(false);
   const { addAlert } = useAlerts();
@@ -248,49 +249,53 @@ export const Settings = ({ data }: Props) => {
   };
 
   return (
-    <div className={'container mx-auto py-10 main-scrollbar'}>
-      <div className={'flex flex-col gap-6'}>
-        <div className="space-y-0.5">
-          <ModuleToggle
-            label="Push Notifications Module"
-            checked={notificationModule}
-            isSaving={isSaving}
-            onCheckedChange={handleSwitchChange}
-          />
-          <div className={'pr-2'}>
-            <p className={'text-xs text-muted-foreground'}>
-              To see more information regarding the Push Notifications config,
-              visit our{' '}
-              <a
-                href={
-                  'https://getconduit.dev/docs/modules/push-notifications/config'
-                }
-                className="hover:underline"
-                target={'_blank'}
-              >
-                docs
-              </a>
-              .
-            </p>
-          </div>
+    <div
+      className={
+        embedded
+          ? 'space-y-6'
+          : 'container mx-auto py-10 main-scrollbar flex flex-col gap-6'
+      }
+    >
+      <div className="space-y-0.5">
+        <ModuleToggle
+          label="Push Notifications Module"
+          checked={notificationModule}
+          isSaving={isSaving}
+          onCheckedChange={handleSwitchChange}
+        />
+        <div className={'pr-2'}>
+          <p className={'text-xs text-muted-foreground'}>
+            To see more information regarding the Push Notifications config,
+            visit our{' '}
+            <a
+              href={
+                'https://getconduit.dev/docs/modules/push-notifications/config'
+              }
+              className="hover:underline"
+              target={'_blank'}
+            >
+              docs
+            </a>
+            .
+          </p>
         </div>
-        {notificationModule && (
-          <Form {...form}>
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <SettingsForm
-                control={control}
-                edit={edit}
-                isSaving={isSaving}
-                setEdit={setEdit}
-                watch={watch}
-                reset={reset}
-                handleFileChange={handleFileChange}
-                data={data}
-              />
-            </form>
-          </Form>
-        )}
       </div>
+      {notificationModule && (
+        <Form {...form}>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <SettingsForm
+              control={control}
+              edit={edit}
+              isSaving={isSaving}
+              setEdit={setEdit}
+              watch={watch}
+              reset={reset}
+              handleFileChange={handleFileChange}
+              data={data}
+            />
+          </form>
+        </Form>
+      )}
     </div>
   );
 };
diff --git a/src/components/notifications/testSend/testSendForm.tsx b/src/components/notifications/testSend/testSendForm.tsx
index 2dadc5205..05bea17be 100644
--- a/src/components/notifications/testSend/testSendForm.tsx
+++ b/src/components/notifications/testSend/testSendForm.tsx
@@ -16,6 +16,7 @@ import { toast } from '@/lib/hooks/use-toast';
 
 interface Props {
   token?: NotificationToken;
+  embedded?: boolean;
 }
 
 const FormSchema = z.object({
@@ -27,7 +28,7 @@ const FormSchema = z.object({
   doNotStore: z.boolean().optional(),
 });
 
-export const TestSendForm = ({ token }: Props) => {
+export const TestSendForm = ({ token, embedded = false }: Props) => {
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: rhfZodResolver(FormSchema),
   });
@@ -71,77 +72,76 @@ export const TestSendForm = ({ token }: Props) => {
     reset();
   };
 
-  return (
-    <div className={'container mx-auto py-10 main-scrollbar'}>
-      <div className={'flex flex-col gap-6'}>
-        <Form {...form}>
-          <form onSubmit={handleSubmit(onSubmit)} className={'space-y-4'}>
-            <Button
-              variant={'default'}
-              type={'button'}
-              onClick={() => {
-                openPicker(
-                  users => {
-                    setValue('users', users);
-                  },
-                  {
-                    title: 'Add Recipient(s)',
-                    description:
-                      'Select the recipient(s) to send the notification to',
-                    multiple: true,
-                  }
-                );
-              }}
+  const formBody = (
+    <Form {...form}>
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <Button
+          variant="default"
+          type="button"
+          onClick={() => {
+            openPicker(
+              users => {
+                setValue('users', users);
+              },
+              {
+                title: 'Add Recipient(s)',
+                description:
+                  'Select the recipient(s) to send the notification to',
+                multiple: true,
+              }
+            );
+          }}
+        >
+          <PlusIcon className="w-6 h-6" />
+          Add recipient(s)
+        </Button>
+        <div className="flex flex-row gap-2">
+          {form.watch('users')?.map((user, index) => (
+            <div
+              key={user._id}
+              className="group flex flex-row items-center rounded-full bg-secondary w-fit px-2"
             >
-              <PlusIcon className={'w-6 h-6'} />
-              Add recipient(s)
-            </Button>
-            <div className={'flex flex-row gap-2 '}>
-              {form.watch('users')?.map((user, index) => (
-                <div
-                  key={user._id}
-                  className={
-                    'group flex flex-row items-center rounded-full bg-secondary w-fit px-2'
-                  }
-                >
-                  <p>{user.email}</p>
-                  <Button
-                    variant={'ghost'}
-                    className={'w-fit p-0 hidden group-hover:block'}
-                    onClick={() => {
-                      const users = watch('users');
-                      setValue(
-                        'users',
-                        users.filter((_, i) => i !== index)
-                      );
-                    }}
-                  >
-                    <LucideX className={'w-4 h-4'} />
-                  </Button>
-                </div>
-              ))}
-            </div>
-            <InputField label={'Notification Title'} fieldName={'title'} />
-            <TextAreaField
-              label={'Notification Body (optional)'}
-              fieldName={'body'}
-            />
-            <CodeField
-              label={'Data'}
-              fieldName={'data'}
-              placeholder={'{"key": "value"}'}
-            />
-            <SwitchField label={'Silent'} fieldName={'silent'} />
-            <SwitchField label={'Do not store'} fieldName={'doNotStore'} />
-            <div className={'flex flex-row justify-end gap-2'}>
-              <Button variant={'secondary'} onClick={() => reset()}>
-                Reset
+              <p>{user.email}</p>
+              <Button
+                variant="ghost"
+                className="w-fit p-0 hidden group-hover:block"
+                onClick={() => {
+                  const users = watch('users');
+                  setValue(
+                    'users',
+                    users.filter((_, i) => i !== index)
+                  );
+                }}
+              >
+                <LucideX className="w-4 h-4" />
               </Button>
-              <Button type={'submit'}>Send Notification</Button>
             </div>
-          </form>
-        </Form>
-      </div>
+          ))}
+        </div>
+        <InputField label="Notification Title" fieldName="title" />
+        <TextAreaField label="Notification Body (optional)" fieldName="body" />
+        <CodeField
+          label="Data"
+          fieldName="data"
+          placeholder={'{"key": "value"}'}
+        />
+        <SwitchField label="Silent" fieldName="silent" />
+        <SwitchField label="Do not store" fieldName="doNotStore" />
+        <div className="flex flex-row justify-end gap-2">
+          <Button variant="secondary" onClick={() => reset()}>
+            Reset
+          </Button>
+          <Button type="submit">Send Notification</Button>
+        </div>
+      </form>
+    </Form>
+  );
+
+  if (embedded) return formBody;
+
+  return (
+    <div className="container mx-auto py-10 main-scrollbar">
+      <div className="flex flex-col gap-6">{formBody}</div>
     </div>
   );
 };
diff --git a/src/components/notifications/tokens/tokens.tsx b/src/components/notifications/tokens/tokens.tsx
index 7d15a5b40..909344b36 100644
--- a/src/components/notifications/tokens/tokens.tsx
+++ b/src/components/notifications/tokens/tokens.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { Input } from '@/components/ui/input';
 // @ts-ignore
 import { useDebounce } from '@uidotdev/usehooks';
-import { useSearchParams } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { NotificationToken } from '@/lib/models/notification/NotificationToken';
 import { DataTable } from '@/components/ui/data-table';
 import { columns } from '@/components/notifications/tokens/columns';
@@ -18,6 +18,8 @@ export default function NotificationTokensTable({
   refreshData: (searchString: string) => Promise<NotificationToken[]>;
 }) {
   const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
 
   const [tokens, setTokens] = useState<NotificationToken[]>(data);
   const [search, setSearch] = useState<string>(
@@ -30,7 +32,7 @@ export default function NotificationTokensTable({
     if (debouncedSearchTerm === '') {
       params.delete('search');
     }
-    window.history.pushState(null, '', `?${params.toString()}`);
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false });
     if (debouncedSearchTerm === '') {
       setTokens(data);
       return;
diff --git a/src/components/sms/settings.tsx b/src/components/sms/settings.tsx
index 21831779c..63bdc14e4 100644
--- a/src/components/sms/settings.tsx
+++ b/src/components/sms/settings.tsx
@@ -21,6 +21,7 @@ import {
 
 interface Props {
   data: SmsSettings;
+  embedded?: boolean;
 }
 
 const SMS_MODULE_NAMES = ['communications', 'sms'] as const;
@@ -78,7 +79,7 @@ function isSmsActivationSuccess(result: PatchSettingsResult | void) {
   return isCommunicationsModuleServing(result.modules, SMS_MODULE_NAMES);
 }
 
-export const Settings = ({ data }: Props) => {
+export const Settings = ({ data, embedded = false }: Props) => {
   const [smsModule, setSmsModule] = useState<boolean>(false);
   const [edit, setEdit] = useState<boolean>(false);
   const { addAlert } = useAlerts();
@@ -142,38 +143,42 @@ export const Settings = ({ data }: Props) => {
   };
 
   return (
-    <div className={'container mx-auto py-10 main-scrollbar'}>
-      <div className={'flex flex-col gap-6'}>
-        <div className="space-y-0.5">
-          <ModuleToggle
-            label="SMS Module"
-            checked={smsModule}
-            isSaving={isSaving}
-            onCheckedChange={handleSwitchChange}
-          />
-          <div className={'pr-2'}>
-            <p className={'text-xs text-muted-foreground'}>
-              To an idea on how to setup your SMS provider take a look at the
-              documentation.
-            </p>
-          </div>
+    <div
+      className={
+        embedded
+          ? 'space-y-6'
+          : 'container mx-auto py-10 main-scrollbar flex flex-col gap-6'
+      }
+    >
+      <div className="space-y-0.5">
+        <ModuleToggle
+          label="SMS Module"
+          checked={smsModule}
+          isSaving={isSaving}
+          onCheckedChange={handleSwitchChange}
+        />
+        <div className={'pr-2'}>
+          <p className={'text-xs text-muted-foreground'}>
+            To an idea on how to setup your SMS provider take a look at the
+            documentation.
+          </p>
         </div>
-        {smsModule && (
-          <Form {...form}>
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <SettingsForm
-                control={control}
-                edit={edit}
-                isSaving={isSaving}
-                setEdit={setEdit}
-                watch={watch}
-                reset={reset}
-                data={data}
-              />
-            </form>
-          </Form>
-        )}
       </div>
+      {smsModule && (
+        <Form {...form}>
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <SettingsForm
+              control={control}
+              edit={edit}
+              isSaving={isSaving}
+              setEdit={setEdit}
+              watch={watch}
+              reset={reset}
+              data={data}
+            />
+          </form>
+        </Form>
+      )}
     </div>
   );
 };
diff --git a/src/components/sms/smsTest/testSendSmsForm.tsx b/src/components/sms/smsTest/testSendSmsForm.tsx
index 02c11bdda..98d92ac0b 100644
--- a/src/components/sms/smsTest/testSendSmsForm.tsx
+++ b/src/components/sms/smsTest/testSendSmsForm.tsx
@@ -14,11 +14,15 @@ const FormSchema = z.object({
   message: z.string(),
 });
 
-export const TestSendSmsForm = () => {
+export const TestSendSmsForm = ({
+  embedded = false,
+}: {
+  embedded?: boolean;
+}) => {
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: rhfZodResolver(FormSchema),
   });
-  const { reset, handleSubmit, setValue, watch } = form;
+  const { reset, handleSubmit } = form;
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
     await testSendSMS({
@@ -30,7 +34,7 @@ export const TestSendSmsForm = () => {
           description: 'Text sent',
         });
       })
-      .catch(e => {
+      .catch(() => {
         toast({
           title: 'SMS',
           description: 'Failed to send',
@@ -39,22 +43,26 @@ export const TestSendSmsForm = () => {
     reset();
   };
 
+  const formBody = (
+    <Form {...form}>
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+        <InputField label="Receiver Phone" fieldName="to" />
+        <TextAreaField label="Text" fieldName="message" />
+        <div className="flex flex-row justify-end gap-2">
+          <Button variant="secondary" onClick={() => reset()}>
+            Reset
+          </Button>
+          <Button type="submit">Send SMS</Button>
+        </div>
+      </form>
+    </Form>
+  );
+
+  if (embedded) return formBody;
+
   return (
-    <div className={'container mx-auto py-10 main-scrollbar'}>
-      <div className={'flex flex-col gap-6'}>
-        <Form {...form}>
-          <form onSubmit={handleSubmit(onSubmit)} className={'space-y-4'}>
-            <InputField label={'Receiver Phone'} fieldName={'to'} />
-            <TextAreaField label={'Text'} fieldName={'message'} />
-            <div className={'flex flex-row justify-end gap-2'}>
-              <Button variant={'secondary'} onClick={() => reset()}>
-                Reset
-              </Button>
-              <Button type={'submit'}>Send SMS</Button>
-            </div>
-          </form>
-        </Form>
-      </div>
+    <div className="container mx-auto py-10 main-scrollbar">
+      <div className="flex flex-col gap-6">{formBody}</div>
     </div>
   );
 };
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 2919ae100..1ac0cd155 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -37,7 +37,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-popover p-6 shadow-[var(--shadow-3)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-popover p-6 shadow-[var(--shadow-3)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full',
         className
       )}
       {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index dd1ec486d..21f6b72d2 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-popover p-6 shadow-[var(--shadow-3)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-popover p-6 shadow-[var(--shadow-3)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg',
         className
       )}
       {...props}
diff --git a/src/lib/api/communications/templates.ts b/src/lib/api/communications/templates.ts
index 7d8c7e718..08137924b 100644
--- a/src/lib/api/communications/templates.ts
+++ b/src/lib/api/communications/templates.ts
@@ -5,6 +5,16 @@ import {
   CommunicationTemplate,
   CommunicationTemplatePayload,
 } from '@/lib/models/communications/templates';
+import { MigrationResponse } from '@/lib/models/communications/template-row';
+import { formatCommunicationsApiError } from '@/lib/logic/communications-api-error';
+
+async function withCommunicationsError<T>(fn: () => Promise<T>): Promise<T> {
+  try {
+    return await fn();
+  } catch (err) {
+    throw new Error(formatCommunicationsApiError(err));
+  }
+}
 
 export const getCommunicationTemplates = async (args: {
   skip?: number;
@@ -16,42 +26,54 @@ export const getCommunicationTemplates = async (args: {
     templateDocuments: CommunicationTemplate[];
     count: number;
   };
-  return (await getApiClient())
-    .get<Response>('/communications/templates', { params: args })
-    .then(res => res.data);
+  return withCommunicationsError(async () =>
+    (await getApiClient())
+      .get<Response>('/communications/templates', { params: args })
+      .then(res => res.data)
+  );
 };
 
 export const getCommunicationTemplate = async (id: string) => {
-  return (await getApiClient())
-    .get<{ template: CommunicationTemplate }>(`/communications/templates/${id}`)
-    .then(res => res.data.template);
+  return withCommunicationsError(async () =>
+    (await getApiClient())
+      .get<{
+        template: CommunicationTemplate;
+      }>(`/communications/templates/${id}`)
+      .then(res => res.data.template)
+  );
 };
 
 export const createCommunicationTemplate = async (
   data: CommunicationTemplatePayload
 ) => {
-  return (await getApiClient())
-    .post<{
-      template: CommunicationTemplate;
-    }>('/communications/templates', data)
-    .then(res => res.data.template);
+  return withCommunicationsError(async () =>
+    (await getApiClient())
+      .post<{
+        template: CommunicationTemplate;
+      }>('/communications/templates', data)
+      .then(res => res.data.template)
+  );
 };
 
 export const updateCommunicationTemplate = async (
   id: string,
   data: Partial<CommunicationTemplatePayload>
 ) => {
-  return (await getApiClient())
-    .patch<{
-      template: CommunicationTemplate;
-    }>(`/communications/templates/${id}`, data)
-    .then(res => res.data.template);
+  return withCommunicationsError(async () =>
+    (await getApiClient())
+      .patch<{
+        template: CommunicationTemplate;
+      }>(`/communications/templates/${id}`, data)
+      .then(res => res.data.template)
+  );
 };
 
 export const deleteCommunicationTemplate = async (id: string) => {
-  return (await getApiClient())
-    .delete<{ deleted: boolean }>(`/communications/templates/${id}`)
-    .then(res => res.data);
+  return withCommunicationsError(async () =>
+    (await getApiClient())
+      .delete<{ deleted: boolean }>(`/communications/templates/${id}`)
+      .then(res => res.data)
+  );
 };
 
 export const migrateFromEmailTemplate = async (options: {
@@ -60,7 +82,12 @@ export const migrateFromEmailTemplate = async (options: {
   skipExisting?: boolean;
   deleteSource?: boolean;
 }) => {
-  return (await getApiClient())
-    .post('/communications/templates/migrate-from-email', options)
-    .then(res => res.data);
+  return withCommunicationsError(async () =>
+    (await getApiClient())
+      .post<MigrationResponse>(
+        '/communications/templates/migrate-from-email',
+        options
+      )
+      .then(res => res.data)
+  );
 };
diff --git a/src/lib/logic/communications-api-error.ts b/src/lib/logic/communications-api-error.ts
new file mode 100644
index 000000000..fb8ed646a
--- /dev/null
+++ b/src/lib/logic/communications-api-error.ts
@@ -0,0 +1,15 @@
+export function formatCommunicationsApiError(err: unknown): string {
+  if (err && typeof err === 'object' && 'response' in err) {
+    const axiosErr = err as {
+      response?: { status?: number; data?: { message?: string } };
+      message?: string;
+    };
+    if (axiosErr.response?.status === 404) {
+      return 'Unified templates API not available — upgrade Conduit to a build that includes CommunicationTemplate CRUD';
+    }
+    return (
+      axiosErr.response?.data?.message ?? axiosErr.message ?? 'Request failed'
+    );
+  }
+  return err instanceof Error ? err.message : 'Request failed';
+}
diff --git a/src/lib/logic/merge-template-rows.ts b/src/lib/logic/merge-template-rows.ts
new file mode 100644
index 000000000..bc2492da6
--- /dev/null
+++ b/src/lib/logic/merge-template-rows.ts
@@ -0,0 +1,42 @@
+import {
+  TemplateRow,
+  getTemplateRowName,
+} from '@/lib/models/communications/template-row';
+import { CommunicationTemplate } from '@/lib/models/communications/templates';
+import { EmailTemplate, ExternalTemplate } from '@/lib/models/email';
+
+export function mergeTemplateRows(
+  communicationTemplates: CommunicationTemplate[],
+  emailTemplates: EmailTemplate[],
+  externalTemplates: ExternalTemplate[] | null
+): TemplateRow[] {
+  const unifiedNames = new Set(
+    communicationTemplates.map(template => template.name)
+  );
+
+  const rows: TemplateRow[] = [
+    ...communicationTemplates.map(template => ({
+      kind: 'unified' as const,
+      template,
+    })),
+    ...emailTemplates
+      .filter(template => !unifiedNames.has(template.name))
+      .map(template => ({
+        kind: 'email' as const,
+        template,
+      })),
+  ];
+
+  if (externalTemplates) {
+    rows.push(
+      ...externalTemplates.map(template => ({
+        kind: 'external' as const,
+        template,
+      }))
+    );
+  }
+
+  return rows.sort((a, b) =>
+    getTemplateRowName(a).localeCompare(getTemplateRowName(b))
+  );
+}
diff --git a/src/lib/models/communications/template-row.ts b/src/lib/models/communications/template-row.ts
new file mode 100644
index 000000000..ec2befac2
--- /dev/null
+++ b/src/lib/models/communications/template-row.ts
@@ -0,0 +1,84 @@
+import {
+  CommunicationTemplate,
+  CommunicationTemplatePayload,
+} from '@/lib/models/communications/templates';
+import { EmailTemplate, ExternalTemplate } from '@/lib/models/email';
+
+export type TemplateRow =
+  | { kind: 'unified'; template: CommunicationTemplate }
+  | { kind: 'email'; template: EmailTemplate }
+  | { kind: 'external'; template: ExternalTemplate };
+
+export type TemplateFilter = 'all' | 'unified' | 'email' | 'external';
+
+export type ChannelFilter = 'all' | 'email' | 'push' | 'sms';
+
+export type MigrationPlannedItem = {
+  sourceId: string;
+  sourceName: string;
+  target: CommunicationTemplatePayload;
+  skipped?: boolean;
+  warning?: string;
+};
+
+export type MigrationResponse = {
+  dryRun: boolean;
+  planned: MigrationPlannedItem[];
+  created?: CommunicationTemplate[];
+  count?: number;
+};
+
+export function getTemplateRowName(row: TemplateRow): string {
+  return row.template.name;
+}
+
+export function getTemplateRowId(row: TemplateRow): string {
+  return row.template._id;
+}
+
+export function getTemplateRowCreatedAt(row: TemplateRow): string {
+  const createdAt = row.template.createdAt;
+  return typeof createdAt === 'string' ? createdAt : createdAt.toISOString();
+}
+
+export function getTemplateRowVariablesCount(row: TemplateRow): number {
+  return row.template.variables?.length ?? 0;
+}
+
+export function filterTemplateRows(
+  rows: TemplateRow[],
+  filter: TemplateFilter
+): TemplateRow[] {
+  switch (filter) {
+    case 'all':
+      return rows;
+    case 'unified':
+      return rows.filter(row => row.kind === 'unified');
+    case 'email':
+      return rows.filter(row => row.kind === 'email');
+    case 'external':
+      return rows.filter(row => row.kind === 'external');
+    default: {
+      const _exhaustive: never = filter;
+      return _exhaustive;
+    }
+  }
+}
+
+export function rowMatchesChannel(
+  row: TemplateRow,
+  channel: ChannelFilter
+): boolean {
+  if (channel === 'all') return true;
+  switch (row.kind) {
+    case 'email':
+    case 'external':
+      return channel === 'email';
+    case 'unified':
+      return row.template.channels.includes(channel);
+    default: {
+      const _exhaustive: never = row;
+      return _exhaustive;
+    }
+  }
+}
diff --git a/src/lib/utils/module-utils.ts b/src/lib/utils/module-utils.ts
index 2340abbc3..d4d3ce239 100644
--- a/src/lib/utils/module-utils.ts
+++ b/src/lib/utils/module-utils.ts
@@ -60,7 +60,7 @@ export const MODULE_DISPLAY_NAMES: Record<string, string> = {
   sms: 'SMS',
   router: 'Router',
   functions: 'Functions',
-  'push-notifications': 'Notifications',
+  'push-notifications': 'Push',
   payments: 'Payments',
   settings: 'Settings',
   communications: 'Communications',
@@ -78,6 +78,7 @@ export const MODULE_URL_TO_NAME: Record<string, string> = {
   '/router': 'router',
   '/functions': 'functions',
   '/push-notifications': 'pushNotifications', // URL path maps to API module name
+  '/communications': 'communications',
   '/payments': 'payments',
   '/settings': 'settings',
 };
@@ -94,6 +95,7 @@ export const MODULE_NAME_TO_URL: Record<string, string> = {
   router: 'router',
   functions: 'functions',
   pushNotifications: 'push-notifications', // API module name maps to URL path
+  communications: 'communications',
   payments: 'payments',
   settings: 'settings',
 };

From d9ccc3ba61852868fd9b7a7022eb63cf09395ddb Mon Sep 17 00:00:00 2001
From: Konstantinos Kopanidis <kkopanidis@users.noreply.github.com>
Date: Mon, 22 Jun 2026 18:07:49 +0300
Subject: [PATCH 3/5] chore(ui): drop cursor config and unified test send from
 PR

Remove .cursor rules/skills from version control and ignore the directory.
Delete the communications test-send hub and restore per-channel send pages.
---
 .cursor/rules/api-state-management.mdc        | 560 ------------------
 .cursor/rules/design-context.mdc              |  45 --
 .cursor/rules/design-intent.mdc               |  31 -
 .cursor/rules/development-environment.mdc     | 273 ---------
 .cursor/rules/form-validation.mdc             | 489 ---------------
 .cursor/rules/keyboard-shortcuts.mdc          |  32 -
 .cursor/rules/project-structure.mdc           |  77 ---
 .../rules/server-actions-observability.mdc    |  21 -
 .cursor/rules/typescript-standards.mdc        | 199 -------
 .cursor/rules/typography.mdc                  |  54 --
 .cursor/rules/ui-component-patterns.mdc       | 336 -----------
 .cursor/rules/ux-laws.mdc                     |  65 --
 .cursor/rules/visual-design.mdc               |  33 --
 .cursor/skills/design-audit/SKILL.md          | 265 ---------
 .cursor/skills/design-critique/SKILL.md       | 230 -------
 .cursor/skills/frontend-design/SKILL.md       | 202 -------
 .cursor/skills/ui-patterns/SKILL.md           |  97 ---
 .../rules/container-callback-ref.md           |  31 -
 .../rules/container-guard-initial-zero.md     |  25 -
 .../rules/container-no-excessive-use.md       |  13 -
 .../rules/container-overflow-hidden.md        |  25 -
 .../rules/container-transition-delay.md       |  21 -
 .../rules/container-two-div-pattern.md        |  35 --
 .../rules/container-use-resize-observer.md    |  48 --
 .../ui-patterns/rules/morphing-aria-hidden.md |  25 -
 .../rules/morphing-consistent-viewbox.md      |  23 -
 .../rules/morphing-group-variants.md          |  33 --
 .../rules/morphing-jump-non-grouped.md        |  29 -
 .../rules/morphing-reduced-motion.md          |  28 -
 .../rules/morphing-spring-rotation.md         |  23 -
 .../rules/morphing-strokelinecap-round.md     |  21 -
 .../ui-patterns/rules/morphing-three-lines.md |  32 -
 .../rules/morphing-use-collapsed.md           |  25 -
 .../rules/native-backdrop-styling.md          |  27 -
 .../rules/native-placeholder-styling.md       |  27 -
 .../rules/native-selection-styling.md         |  18 -
 .../ui-patterns/rules/prefetch-hit-slop.md    |  27 -
 .../rules/prefetch-keyboard-tab.md            |  19 -
 .../rules/prefetch-not-everything.md          |  26 -
 .../rules/prefetch-touch-fallback.md          |  31 -
 .../rules/prefetch-trajectory-over-hover.md   |  31 -
 .../rules/prefetch-use-selectively.md         |  13 -
 .../rules/pseudo-content-required.md          |  28 -
 .../rules/pseudo-first-line-styling.md        |  29 -
 .../rules/pseudo-hit-target-expansion.md      |  31 -
 .../rules/pseudo-marker-styling.md            |  28 -
 .../ui-patterns/rules/pseudo-over-dom-node.md |  31 -
 .../rules/pseudo-position-relative-parent.md  |  33 --
 .../rules/pseudo-z-index-layering.md          |  37 --
 .../rules/transition-name-cleanup.md          |  28 -
 .../rules/transition-name-required.md         |  27 -
 .../rules/transition-name-unique.md           |  24 -
 .../rules/transition-over-js-library.md       |  30 -
 .../rules/transition-style-pseudo-elements.md |  26 -
 .cursor/skills/ux-heuristics/SKILL.md         |  60 --
 .cursor/skills/ux-heuristics/reference.md     | 222 -------
 .cursor/skills/web-animation-design/SKILL.md  | 533 -----------------
 .../web-animation-design/practical-tips.md    | 294 ---------
 .gitignore                                    |   1 +
 .../(modules)/communications/page.tsx         |  14 +-
 .../(modules)/communications/test/page.tsx    |  60 --
 .../(dashboard)/(modules)/email/send/page.tsx |  18 +-
 .../push-notifications/test/page.tsx          |  19 +-
 .../(dashboard)/(modules)/sms/send/page.tsx   |   6 +-
 .../test/channel-status-card.tsx              | 114 ----
 .../test/communications-test-tabs.tsx         |  89 ---
 src/components/navigation/navList.config.ts   |   1 -
 67 files changed, 36 insertions(+), 5412 deletions(-)
 delete mode 100644 .cursor/rules/api-state-management.mdc
 delete mode 100644 .cursor/rules/design-context.mdc
 delete mode 100644 .cursor/rules/design-intent.mdc
 delete mode 100644 .cursor/rules/development-environment.mdc
 delete mode 100644 .cursor/rules/form-validation.mdc
 delete mode 100644 .cursor/rules/keyboard-shortcuts.mdc
 delete mode 100644 .cursor/rules/project-structure.mdc
 delete mode 100644 .cursor/rules/server-actions-observability.mdc
 delete mode 100644 .cursor/rules/typescript-standards.mdc
 delete mode 100644 .cursor/rules/typography.mdc
 delete mode 100644 .cursor/rules/ui-component-patterns.mdc
 delete mode 100644 .cursor/rules/ux-laws.mdc
 delete mode 100644 .cursor/rules/visual-design.mdc
 delete mode 100644 .cursor/skills/design-audit/SKILL.md
 delete mode 100644 .cursor/skills/design-critique/SKILL.md
 delete mode 100644 .cursor/skills/frontend-design/SKILL.md
 delete mode 100644 .cursor/skills/ui-patterns/SKILL.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/container-callback-ref.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/container-guard-initial-zero.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/container-no-excessive-use.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/container-overflow-hidden.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/container-transition-delay.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/container-two-div-pattern.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/container-use-resize-observer.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/morphing-aria-hidden.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/morphing-consistent-viewbox.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/morphing-group-variants.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/morphing-jump-non-grouped.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/morphing-reduced-motion.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/morphing-spring-rotation.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/morphing-strokelinecap-round.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/morphing-three-lines.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/morphing-use-collapsed.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/native-backdrop-styling.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/native-placeholder-styling.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/native-selection-styling.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/prefetch-hit-slop.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/prefetch-keyboard-tab.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/prefetch-not-everything.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/prefetch-touch-fallback.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/prefetch-trajectory-over-hover.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/prefetch-use-selectively.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/pseudo-content-required.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/pseudo-first-line-styling.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/pseudo-hit-target-expansion.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/pseudo-marker-styling.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/pseudo-over-dom-node.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/pseudo-position-relative-parent.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/pseudo-z-index-layering.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/transition-name-cleanup.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/transition-name-required.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/transition-name-unique.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/transition-over-js-library.md
 delete mode 100644 .cursor/skills/ui-patterns/rules/transition-style-pseudo-elements.md
 delete mode 100644 .cursor/skills/ux-heuristics/SKILL.md
 delete mode 100644 .cursor/skills/ux-heuristics/reference.md
 delete mode 100644 .cursor/skills/web-animation-design/SKILL.md
 delete mode 100644 .cursor/skills/web-animation-design/practical-tips.md
 delete mode 100644 src/app/(dashboard)/(modules)/communications/test/page.tsx
 delete mode 100644 src/components/communications/test/channel-status-card.tsx
 delete mode 100644 src/components/communications/test/communications-test-tabs.tsx

diff --git a/.cursor/rules/api-state-management.mdc b/.cursor/rules/api-state-management.mdc
deleted file mode 100644
index 429a3d294..000000000
--- a/.cursor/rules/api-state-management.mdc
+++ /dev/null
@@ -1,560 +0,0 @@
----
-globs: *.ts,*.tsx
-description: API integration and state management patterns
----
-
-# API Integration & State Management
-
-## API Architecture
-- Centralized API client in [src/lib/api/api.ts](mdc:src/lib/api/api.ts)
-- Module-specific API functions in `src/lib/api/[module]/`
-- Server actions marked with 'use server' directive
-- Environment-aware configuration with cookie-based authentication
-
-## API Client Setup
-
-### Central API Client
-```typescript
-'use server';
-import axios from 'axios';
-import { cookies } from 'next/headers';
-import { _getEnv } from '@/lib/logic/EnvManager';
-import { redirect, RedirectType } from 'next/navigation';
-
-export const getApiClient = async (env?: string) => {
-  const envCookie = (await cookies()).get('activeEnv');
-  const envDetails = await _getEnv(env ?? envCookie?.value ?? 'Local');
-
-  const axiosInstance = axios.create({
-    baseURL: envDetails.baseUrl,
-    withCredentials: true,
-    timeout: 50000,
-    headers: {
-      'Content-Type': 'application/json',
-      Accept: 'application/json',
-      masterkey: envDetails.masterKey,
-    },
-  });
-
-  // Request interceptor for auth
-  axiosInstance.interceptors.request.use(
-    async config => {
-      if (config.headers.Authorization) return config;
-      const accessToken = (await cookies()).get(`${envDetails.name}AccessToken`);
-      if (!accessToken) return config;
-      config.headers.Authorization = `Bearer ${accessToken.value}`;
-      return config;
-    },
-    error => Promise.reject(error)
-  );
-
-  // Response interceptor for error handling
-  axiosInstance.interceptors.response.use(
-    response => response,
-    async error => {
-      const { response } = error;
-      if (response?.status === 401 && error.request.path !== '/admin/login') {
-        redirect('/login?session-timeout=true', RedirectType.replace);
-      }
-      return Promise.reject(error);
-    }
-  );
-
-  return axiosInstance;
-};
-```
-
-### Module-Specific API Functions
-```typescript
-'use server';
-import { getApiClient } from '@/lib/api';
-import { User } from '@/lib/models/User';
-
-// GET endpoints with parameters
-export const getUsers = async (
-  skip: number,
-  limit: number,
-  params?: {
-    sort?: string;
-    search?: string;
-    isActive?: boolean;
-    provider?: string;
-  }
-): Promise<{ users: User[]; count: number }> => {
-  const client = await getApiClient();
-  const response = await client.get('/authentication/users', {
-    params: { skip, limit, ...params },
-  });
-  return response.data;
-};
-
-// POST endpoints
-export const createUser = async (
-  email: string,
-  password: string
-): Promise<User> => {
-  const client = await getApiClient();
-  const response = await client.post('/authentication/users', {
-    email,
-    password,
-  });
-  return response.data;
-};
-
-// PUT endpoints
-export const updateUser = async (
-  id: string,
-  data: Partial<User>
-): Promise<User> => {
-  const client = await getApiClient();
-  const response = await client.put(`/authentication/users/${id}`, data);
-  return response.data;
-};
-
-// DELETE endpoints
-export const deleteUser = async (id: string): Promise<void> => {
-  const client = await getApiClient();
-  await client.delete(`/authentication/users/${id}`);
-};
-```
-
-## Error Handling Patterns
-
-### API Error Types
-```typescript
-export interface ApiError {
-  message: string;
-  status: number;
-  statusText: string;
-  url?: string;
-  method?: string;
-  data?: any;
-}
-
-export interface ValidationError {
-  field: string;
-  message: string;
-}
-
-export interface ApiResponse<T> {
-  success: boolean;
-  data?: T;
-  error?: string;
-  validationErrors?: ValidationError[];
-}
-```
-
-### Error Handling Utilities
-```typescript
-export const handleApiError = (error: any): ApiResponse<never> => {
-  if (error.response) {
-    // Server responded with error status
-    const { status, statusText, data } = error.response;
-    
-    if (status === 422 && data.validationErrors) {
-      return {
-        success: false,
-        error: 'Validation failed',
-        validationErrors: data.validationErrors,
-      };
-    }
-    
-    return {
-      success: false,
-      error: data.message || statusText || 'An error occurred',
-    };
-  } else if (error.request) {
-    // Network error
-    return {
-      success: false,
-      error: 'Network error. Please check your connection.',
-    };
-  } else {
-    // Request setup error
-    return {
-      success: false,
-      error: 'An unexpected error occurred.',
-    };
-  }
-};
-
-// Usage in API functions
-export const safeCreateUser = async (
-  email: string,
-  password: string
-): Promise<ApiResponse<User>> => {
-  try {
-    const user = await createUser(email, password);
-    return { success: true, data: user };
-  } catch (error) {
-    return handleApiError(error);
-  }
-};
-```
-
-## State Management Patterns
-
-### React Context for Global State
-```typescript
-// Context definition
-interface AppContextType {
-  user: User | null;
-  environment: string;
-  modules: Module[];
-  setUser: (user: User | null) => void;
-  setEnvironment: (env: string) => void;
-  isLoading: boolean;
-}
-
-const AppContext = createContext<AppContextType | undefined>(undefined);
-
-// Provider component
-export const AppProvider = ({ children }: { children: React.ReactNode }) => {
-  const [user, setUser] = useState<User | null>(null);
-  const [environment, setEnvironment] = useState('Local');
-  const [modules, setModules] = useState<Module[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const initializeApp = async () => {
-      try {
-        const [userData, moduleData] = await Promise.all([
-          getCurrentUser(),
-          getModules(),
-        ]);
-        setUser(userData);
-        setModules(moduleData);
-      } catch (error) {
-        console.error('Failed to initialize app:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    initializeApp();
-  }, [environment]);
-
-  const value = {
-    user,
-    environment,
-    modules,
-    setUser,
-    setEnvironment,
-    isLoading,
-  };
-
-  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
-};
-
-// Hook for consuming context
-export const useApp = () => {
-  const context = useContext(AppContext);
-  if (context === undefined) {
-    throw new Error('useApp must be used within an AppProvider');
-  }
-  return context;
-};
-```
-
-### URL State Management
-```typescript
-'use client';
-import { useSearchParams, useRouter, usePathname } from 'next/navigation';
-import { useCallback } from 'react';
-
-export const useUrlParams = () => {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const updateParams = useCallback(
-    (updates: Record<string, string | number | boolean | null>) => {
-      const params = new URLSearchParams(searchParams.toString());
-      
-      Object.entries(updates).forEach(([key, value]) => {
-        if (value === null || value === undefined || value === '') {
-          params.delete(key);
-        } else {
-          params.set(key, String(value));
-        }
-      });
-
-      const newUrl = `${pathname}?${params.toString()}`;
-      router.push(newUrl);
-    },
-    [searchParams, pathname, router]
-  );
-
-  const getParam = useCallback(
-    (key: string, defaultValue?: string) => {
-      return searchParams.get(key) ?? defaultValue;
-    },
-    [searchParams]
-  );
-
-  return { updateParams, getParam, searchParams };
-};
-
-// Usage in components
-export const UserList = () => {
-  const { updateParams, getParam } = useUrlParams();
-  const currentPage = parseInt(getParam('page', '1'));
-  const searchTerm = getParam('search', '');
-
-  const handlePageChange = (page: number) => {
-    updateParams({ page });
-  };
-
-  const handleSearch = (search: string) => {
-    updateParams({ search, page: 1 }); // Reset to page 1 on search
-  };
-
-  return (
-    <div>
-      <SearchInput value={searchTerm} onChange={handleSearch} />
-      <UserTable page={currentPage} search={searchTerm} />
-      <Pagination current={currentPage} onChange={handlePageChange} />
-    </div>
-  );
-};
-```
-
-### Server State with React Query Pattern
-```typescript
-// Custom hook for server state
-export const useUsers = (
-  params: {
-    page?: number;
-    limit?: number;
-    search?: string;
-    isActive?: boolean;
-  } = {}
-) => {
-  const [users, setUsers] = useState<User[]>([]);
-  const [count, setCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const fetchUsers = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    
-    try {
-      const { page = 1, limit = 10, ...otherParams } = params;
-      const skip = (page - 1) * limit;
-      const result = await getUsers(skip, limit, otherParams);
-      
-      setUsers(result.users);
-      setCount(result.count);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch users');
-    } finally {
-      setIsLoading(false);
-    }
-  }, [params]);
-
-  useEffect(() => {
-    fetchUsers();
-  }, [fetchUsers]);
-
-  const refetch = () => {
-    fetchUsers();
-  };
-
-  return {
-    users,
-    count,
-    isLoading,
-    error,
-    refetch,
-  };
-};
-
-// Usage in components
-export const UsersPage = () => {
-  const { updateParams, getParam } = useUrlParams();
-  const page = parseInt(getParam('page', '1'));
-  const search = getParam('search', '');
-  
-  const { users, count, isLoading, error, refetch } = useUsers({
-    page,
-    search,
-    limit: 10,
-  });
-
-  if (error) {
-    return <ErrorDisplay message={error} onRetry={refetch} />;
-  }
-
-  return (
-    <div>
-      <UserTable users={users} loading={isLoading} />
-      <Pagination
-        current={page}
-        total={count}
-        pageSize={10}
-        onChange={(newPage) => updateParams({ page: newPage })}
-      />
-    </div>
-  );
-};
-```
-
-## Data Fetching Patterns
-
-### Server Components Data Fetching
-```typescript
-// Server component with data fetching
-export default async function UsersPage({
-  searchParams,
-}: {
-  searchParams: { page?: string; search?: string };
-}) {
-  const page = parseInt(searchParams.page ?? '1');
-  const search = searchParams.search ?? '';
-  const skip = (page - 1) * 10;
-
-  const { users, count } = await getUsers(skip, 10, { search });
-
-  return (
-    <div>
-      <UserTableClient 
-        initialUsers={users} 
-        initialCount={count}
-        page={page}
-        search={search}
-      />
-    </div>
-  );
-}
-```
-
-### Client Component Data Mutations
-```typescript
-'use client';
-export const CreateUserForm = ({ onSuccess }: CreateUserFormProps) => {
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const form = useForm<CreateUserValues>();
-
-  const handleSubmit = async (data: CreateUserValues) => {
-    setIsSubmitting(true);
-    
-    try {
-      const result = await safeCreateUser(data.email, data.password);
-      
-      if (result.success) {
-        toast({
-          title: 'Success',
-          description: 'User created successfully',
-        });
-        form.reset();
-        onSuccess?.(result.data);
-      } else {
-        if (result.validationErrors) {
-          result.validationErrors.forEach((error) => {
-            form.setError(error.field as keyof CreateUserValues, {
-              message: error.message,
-            });
-          });
-        } else {
-          toast({
-            title: 'Error',
-            description: result.error,
-            variant: 'destructive',
-          });
-        }
-      }
-    } catch (error) {
-      toast({
-        title: 'Error',
-        description: 'An unexpected error occurred',
-        variant: 'destructive',
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)}>
-        <InputField fieldName="email" label="Email" />
-        <InputField fieldName="password" label="Password" type="password" />
-        <Button type="submit" disabled={isSubmitting}>
-          {isSubmitting ? 'Creating...' : 'Create User'}
-        </Button>
-      </form>
-    </Form>
-  );
-};
-```
-
-## Performance Optimization
-
-### Request Deduplication
-```typescript
-// Cache API responses to prevent duplicate requests
-const requestCache = new Map<string, Promise<any>>();
-
-export const getCachedApiCall = async <T>(
-  key: string,
-  apiCall: () => Promise<T>,
-  ttl: number = 5000 // 5 seconds
-): Promise<T> => {
-  if (requestCache.has(key)) {
-    return requestCache.get(key);
-  }
-
-  const promise = apiCall();
-  requestCache.set(key, promise);
-
-  // Clear cache after TTL
-  setTimeout(() => {
-    requestCache.delete(key);
-  }, ttl);
-
-  return promise;
-};
-
-// Usage
-export const getUsers = async (params: GetUsersParams) => {
-  const cacheKey = `users-${JSON.stringify(params)}`;
-  return getCachedApiCall(cacheKey, () => _getUsers(params));
-};
-```
-
-### Optimistic Updates
-```typescript
-export const useOptimisticUserUpdate = () => {
-  const [users, setUsers] = useState<User[]>([]);
-
-  const updateUser = async (id: string, updates: Partial<User>) => {
-    // Optimistic update
-    setUsers(prev => 
-      prev.map(user => 
-        user.id === id ? { ...user, ...updates } : user
-      )
-    );
-
-    try {
-      const updatedUser = await updateUserApi(id, updates);
-      // Update with server response
-      setUsers(prev => 
-        prev.map(user => 
-          user.id === id ? updatedUser : user
-        )
-      );
-    } catch (error) {
-      // Revert optimistic update
-      setUsers(prev => 
-        prev.map(user => 
-          user.id === id ? { ...user, ...updates } : user
-        )
-      );
-      throw error;
-    }
-  };
-
-  return { users, updateUser };
-};
-```
\ No newline at end of file
diff --git a/.cursor/rules/design-context.mdc b/.cursor/rules/design-context.mdc
deleted file mode 100644
index 777a681d5..000000000
--- a/.cursor/rules/design-context.mdc
+++ /dev/null
@@ -1,45 +0,0 @@
----
-description: Project design context for Conduit-UI. Guides Quintessential rule application to this existing admin panel codebase.
-globs: "**/*.{tsx,jsx,ts,js,css}"
-alwaysApply: true
----
-
-# Design Context -- Conduit-UI
-
-This is an existing Next.js 16 admin panel. Apply Quintessential standards with awareness of what's already built.
-
-## Current Design Language (preserve)
-- Font: Inter via next/font/google -- keep
-- Color system: 26 semantic CSS variables in @theme with :root/:dark HSL channels -- extend, don't replace
-- Component library: 56 shadcn/ui + Radix primitives in src/components/ui/ -- extend, don't replace
-- Class merging: cn() (clsx + twMerge) -- use consistently
-- Variants: cva for multi-variant components -- follow this pattern for new components
-- Spacing: Tailwind v4 default 4px-based scale -- stay on-scale
-- Radius: Tokenized via --radius (0.5rem) with derived md/sm -- use radius tokens, not arbitrary values
-- Theme: next-themes with class="dark" toggle -- respect both modes
-- Overlays: Radix Dialog/Sheet + Vaul Drawer -- use for new overlays
-
-## Migration Targets (improve incrementally)
-- Typography: Add antialiased to body, text-wrap: balance on headings, tabular-nums on data columns
-- Colors: Extract hardcoded chart/viz hex values to --color-chart-* tokens
-- Colors: Define --popover and --card in :root (aligned with light theme)
-- Shadows: Use --shadow-1 through --shadow-4 layered scale; prefer shadow tokens over arbitrary shadow-[...] values
-- Animation: prefers-reduced-motion support in globals
-- Animation: Standardize on one primary easing curve where practical
-- Components: Prefer shared DataTable in src/components/ui/data-table.tsx for TanStack table UIs
-- Components: Align Textarea styling with Input (text-sm, ring-2)
-- Interaction: Add keyboard shortcut hints to tooltips where relevant
-- Interaction: Guard hover-only affordances with @media (hover: hover) where appropriate
-
-## Rules of Engagement
-- Apply Quintessential standards to ALL new code
-- When modifying existing files, improve what you touch
-- Do NOT refactor untouched code unprompted
-- Do NOT rewrite working components for style alone
-- When you spot a major violation in code you're editing, fix it silently
-- When you spot a major violation in code you're NOT editing, leave a brief comment noting the opportunity
-- Always use cn() for class merging
-- Always use cva for components with more than 2 variant axes
-- Always add both light and dark mode styles
-- Always use CSS variable colors for theme-bound UI; use chart tokens for charts/viz
-- Always respect the spacing scale -- no arbitrary pixel values
diff --git a/.cursor/rules/design-intent.mdc b/.cursor/rules/design-intent.mdc
deleted file mode 100644
index 2282dae77..000000000
--- a/.cursor/rules/design-intent.mdc
+++ /dev/null
@@ -1,31 +0,0 @@
----
-description: Establish design intent before building any UI component, page, or layout. Ask the right questions before writing code.
-globs: "**/*.{tsx,jsx,vue,svelte}"
-alwaysApply: true
----
-
-# Quintessential Design Wiki -- Design Intent
-
-Before generating UI code, answer these questions. Skip none.
-
-## The Questions
-
-1. **What one word describes how this should feel?** — Calm, fast, warm, precise, playful, confident, minimal, dense, editorial, premium. Pick one. Every decision flows from it.
-
-2. **What's the user's state of mind?** — Stressed (checkout, error, deadline)? Focused (editor, form, dashboard)? Browsing (discovery, feed, settings)? The UI must respect that state — not fight it.
-
-3. **What's the single most important element on this screen?** — Name it. If you can't, the hierarchy is wrong. If everything is important, nothing is.
-
-4. **What's the reference?** — Name a real product that nails what this should feel like. "This sidebar should feel like Linear's." "This card should feel like Airbnb's listing." A concrete reference beats abstract adjectives.
-
-5. **What can be removed?** — Before adding anything, audit what's already there. Every element must earn its place. If removing it doesn't hurt the user's ability to complete their task — remove it.
-
-6. **What's the unexpected detail?** — After the UI works and looks clean, what's the one small thing that would make someone pause? A considered empty state. A satisfying confirmation moment. A hover effect that rewards curiosity. Build the expected first, then add the memorable.
-
-## Principles
-
-- **Intent before implementation** — Decide what it should feel like before deciding how to build it. The feeling determines the font, the spacing, the animation, the density — not the other way around.
-- **Reduction is taste** — The best interfaces have less than you'd expect. Generous whitespace where users breathe, density where they need efficiency. Default to less.
-- **Emotion is functional** — A calm checkout reduces abandonment. A fast dashboard builds trust. A warm onboarding increases completion. Emotion isn't decoration — it's the product working.
-- **Consistency is invisible, inconsistency is loud** — Users never notice consistent spacing, matching shadows, aligned type. They immediately feel when something is off. Invisible is the goal.
-- **Ship the third version** — First pass: it works. Second pass: it looks right. Third pass: it feels right. Don't stop at the first.
diff --git a/.cursor/rules/development-environment.mdc b/.cursor/rules/development-environment.mdc
deleted file mode 100644
index d451f2d2b..000000000
--- a/.cursor/rules/development-environment.mdc
+++ /dev/null
@@ -1,273 +0,0 @@
----
-alwaysApply: true
-description: Node.js development environment and tooling setup
----
-
-# Development Environment & Tooling
-
-## Node.js Environment Setup
-- **Node.js Version**: 24+ required (specified in [package.json](mdc:package.json) engines and [.nvmrc](mdc:.nvmrc))
-- **Package Manager**: pnpm (lockfile: [pnpm-lock.yaml](mdc:pnpm-lock.yaml)); enable Corepack (`corepack enable`) to use the version from `packageManager` in [package.json](mdc:package.json)
-- **Environment Variables**: Loaded from `.env`, `.env.local`, etc. by Next.js at build and runtime (see [Next.js env docs](https://nextjs.org/docs/app/guides/environment-variables))
-
-### Environment Commands
-```bash
-# Use correct Node.js version
-nvm use
-
-# Install dependencies
-pnpm install
-
-# Development server with Turbopack
-pnpm dev
-
-# Build for production
-pnpm build
-
-# Start production server
-pnpm start
-
-# Linting
-pnpm lint
-
-# Docker build
-pnpm build:docker
-```
-
-## Project Scripts and Commands
-
-### Development Workflow
-```bash
-# Start development server with debugger and Turbopack
-NODE_OPTIONS='--inspect' next dev --turbopack
-
-# Build optimized production bundle
-next build
-
-# Start production server on port 8080
-next start -p 8080
-
-# Run ESLint (flat config: eslint.config.mjs)
-pnpm lint
-
-# Docker build for linux/amd64
-docker build --platform linux/amd64 -t ghcr.io/conduitplatform/conduit-ui:latest .
-```
-
-### Git Workflow
-```bash
-# Install git hooks (runs `husky` from package.json prepare script)
-pnpm prepare
-
-# Generate changelog and tag release
-pnpm release
-
-# Commit with conventional format (via commitizen)
-npx cz
-```
-
-## Development Dependencies
-
-### Core Development Tools
-- **Next.js 16**: React framework with App Router
-- **TypeScript 5.1+**: Type-safe development
-- **ESLint**: Code linting with Next.js configuration
-- **Prettier**: Code formatting
-- **Husky**: Git hooks for quality control
-- **lint-staged**: Run linters on staged files
-
-### Build and Release Tools
-- **Turbo**: Build system optimization
-- **Standard Version**: Automated versioning and changelog
-- **Commitizen**: Conventional commit messages
-- **Commitlint**: Validate commit message format
-- **Docker**: Containerization support
-
-## Code Quality Setup
-
-### ESLint Configuration
-Flat config in [eslint.config.mjs](mdc:eslint.config.mjs), spreading `eslint-config-next/core-web-vitals` (ESLint 9+).
-
-### Prettier Configuration
-Automatic formatting on commit via lint-staged:
-```json
-{
-  "lint-staged": {
-    "**/*": "prettier --write --ignore-unknown"
-  }
-}
-```
-
-### Commit Convention
-Using conventional commit format via [commitlint.config.js](mdc:commitlint.config.js):
-- `feat:` - New features
-- `fix:` - Bug fixes
-- `docs:` - Documentation changes
-- `style:` - Code style changes
-- `refactor:` - Code refactoring
-- `test:` - Test changes
-- `chore:` - Build/tooling changes
-
-## Environment Configuration
-
-### Environment Variables
-Create `.env.local` for local development:
-```env
-# API Configuration
-NEXT_PUBLIC_API_URL=http://localhost:3000
-API_SECRET_KEY=your-secret-key
-
-# Authentication
-NEXTAUTH_URL=http://localhost:3000
-NEXTAUTH_SECRET=your-nextauth-secret
-
-# Database
-DATABASE_URL=postgresql://user:password@localhost:5432/conduit
-
-# External Services
-SMTP_HOST=smtp.example.com
-SMTP_PORT=587
-SMTP_USER=your-email@example.com
-SMTP_PASS=your-password
-```
-
-### Environment Management
-The application supports multiple environments through [src/lib/logic/EnvManager.ts](mdc:src/lib/logic/EnvManager.ts):
-- Local development
-- Staging
-- Production
-- Custom environments
-
-## Docker Development
-
-### Dockerfile Setup
-See the repo [Dockerfile](mdc:Dockerfile) for the current multi-stage build (`node:24-alpine`, `next.config.ts`, standalone output).
-
-### Docker Development Commands
-```bash
-# Build for production deployment
-docker build --platform linux/amd64 -t conduit-ui:latest .
-
-# Run locally
-docker run -p 3000:3000 conduit-ui:latest
-
-# Development with volume mounting
-docker run -p 3000:3000 -v $(pwd):/app conduit-ui:dev
-```
-
-## IDE Configuration
-
-### VS Code Settings
-Recommended `.vscode/settings.json`:
-```json
-{
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
-  },
-  "typescript.preferences.importModuleSpecifier": "relative",
-  "emmet.includeLanguages": {
-    "typescript": "html",
-    "typescriptreact": "html"
-  }
-}
-```
-
-### Recommended Extensions
-- ES7+ React/Redux/React-Native snippets
-- Prettier - Code formatter
-- ESLint
-- TypeScript Importer
-- Auto Rename Tag
-- Tailwind CSS IntelliSense
-- GitLens
-
-## Debugging Setup
-
-### Next.js Debugging
-Development server with debugging enabled:
-```bash
-NODE_OPTIONS='--inspect' next dev --turbopack
-```
-
-### Browser DevTools
-- React Developer Tools
-- Chrome DevTools for debugging
-- Network tab for API request monitoring
-
-### VS Code Debugging
-`.vscode/launch.json`:
-```json
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Next.js: debug server-side",
-      "type": "node",
-      "request": "attach",
-      "port": 9229,
-      "skipFiles": ["<node_internals>/**"]
-    },
-    {
-      "name": "Next.js: debug client-side",
-      "type": "chrome",
-      "request": "launch",
-      "url": "http://localhost:3000"
-    }
-  ]
-}
-```
-
-## Performance Monitoring
-
-### Next.js Bundle Analysis
-```bash
-# Analyze bundle size
-ANALYZE=true pnpm build
-
-# Check bundle composition
-npx next-bundle-analyzer
-```
-
-### Development Performance
-- Use React DevTools Profiler
-- Monitor Core Web Vitals
-- Check Network waterfall in browser DevTools
-- Use Next.js built-in performance metrics
-
-## Deployment Considerations
-
-### Production Build Optimization
-- Enable Next.js standalone output mode
-- Optimize images with Next.js Image component
-- Use dynamic imports for code splitting
-- Implement proper caching strategies
-
-### Environment-Specific Builds
-```bash
-# Development build
-NODE_ENV=development pnpm build
-
-# Production build with optimizations
-NODE_ENV=production pnpm build
-
-# Staging build
-NODE_ENV=staging pnpm build
-```
-
-## Troubleshooting
-
-### Common Issues
-1. **Node version mismatch**: Use `nvm use` (reads `.nvmrc`) or install Node 24+
-2. **Package conflicts**: Clear node_modules and reinstall
-3. **Port conflicts**: Change port with `next dev -p 3001`
-4. **Memory issues**: Increase Node.js memory with `NODE_OPTIONS="--max-old-space-size=4096"`
-
-### Reset Development Environment
-```bash
-# Clear all caches and reinstall
-rm -rf node_modules .next
-pnpm install
-pnpm dev
-```
\ No newline at end of file
diff --git a/.cursor/rules/form-validation.mdc b/.cursor/rules/form-validation.mdc
deleted file mode 100644
index f8be274dc..000000000
--- a/.cursor/rules/form-validation.mdc
+++ /dev/null
@@ -1,489 +0,0 @@
----
-globs: *.tsx,*.ts
-description: Form validation and data handling patterns
----
-
-# Form Validation & Data Handling
-
-## Form Architecture
-- Use `react-hook-form` for form state management
-- Use `zod` for schema validation with `@hookform/resolvers/zod`
-- Custom form input components wrap shadcn/ui base components
-- Server actions for form submission
-
-## Zod Schema Patterns
-
-### Basic Schema Definition
-```typescript
-import { z } from 'zod';
-
-const userSchema = z.object({
-  email: z.string().email('Please enter a valid email address'),
-  password: z.string().min(6, 'Password must be at least 6 characters long'),
-  name: z.string().min(1, 'Name is required'),
-  isActive: z.boolean().default(true),
-  role: z.enum(['admin', 'user', 'viewer']),
-});
-
-type UserFormValues = z.infer<typeof userSchema>;
-```
-
-### Complex Schema Patterns
-```typescript
-// Nested objects
-const addressSchema = z.object({
-  street: z.string().min(1, 'Street is required'),
-  city: z.string().min(1, 'City is required'),
-  zipCode: z.string().regex(/^\d{5}$/, 'Invalid zip code'),
-});
-
-const userWithAddressSchema = z.object({
-  ...userSchema.shape,
-  address: addressSchema,
-});
-
-// Arrays and dynamic fields
-const modelSchema = z.object({
-  name: z.string().min(1, 'Model name is required'),
-  fields: z.array(z.object({
-    name: z.string().min(1, 'Field name is required'),
-    type: z.enum(['String', 'Number', 'Boolean', 'Date']),
-    required: z.boolean().default(false),
-    unique: z.boolean().default(false),
-  })),
-  indices: z.array(z.object({
-    name: z.string().min(1, 'Index name is required'),
-    fields: z.array(z.string()).min(1, 'At least one field is required'),
-    unique: z.boolean().default(false),
-  })),
-});
-
-// Conditional validation
-const conditionalSchema = z.object({
-  type: z.enum(['user', 'admin']),
-  permissions: z.array(z.string()).optional(),
-}).refine((data) => {
-  if (data.type === 'admin' && (!data.permissions || data.permissions.length === 0)) {
-    return false;
-  }
-  return true;
-}, {
-  message: 'Admin users must have at least one permission',
-  path: ['permissions'],
-});
-```
-
-### Schema Reuse and Composition
-```typescript
-// Base schemas
-const baseUserSchema = z.object({
-  email: z.string().email(),
-  name: z.string().min(1),
-});
-
-// Extended schemas
-const createUserSchema = baseUserSchema.extend({
-  password: z.string().min(6),
-});
-
-const updateUserSchema = baseUserSchema.partial().extend({
-  id: z.string(),
-});
-
-// Pick and omit
-const loginSchema = baseUserSchema.pick({ email: true }).extend({
-  password: z.string().min(1, 'Password is required'),
-});
-```
-
-## React Hook Form Integration
-
-### Basic Form Setup
-```typescript
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Form } from '@/components/ui/form';
-
-export const UserForm = ({ onSubmit, defaultValues }: UserFormProps) => {
-  const form = useForm<UserFormValues>({
-    resolver: zodResolver(userSchema),
-    defaultValues: {
-      email: '',
-      name: '',
-      isActive: true,
-      ...defaultValues,
-    },
-  });
-
-  const handleSubmit = async (data: UserFormValues) => {
-    try {
-      await onSubmit(data);
-      form.reset();
-    } catch (error) {
-      // Handle errors
-    }
-  };
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
-        <InputField fieldName="email" label="Email" type="email" />
-        <InputField fieldName="name" label="Name" />
-        <CheckboxField fieldName="isActive" label="Active User" />
-        <Button type="submit" disabled={form.formState.isSubmitting}>
-          {form.formState.isSubmitting ? 'Saving...' : 'Save User'}
-        </Button>
-      </form>
-    </Form>
-  );
-};
-```
-
-### Advanced Form Patterns
-
-#### Dynamic Field Arrays
-```typescript
-import { useFieldArray } from 'react-hook-form';
-
-export const ModelEditor = () => {
-  const form = useForm<ModelFormValues>({
-    resolver: zodResolver(modelSchema),
-    defaultValues: {
-      name: '',
-      fields: [{ name: '', type: 'String', required: false, unique: false }],
-    },
-  });
-
-  const { fields, append, remove } = useFieldArray({
-    control: form.control,
-    name: 'fields',
-  });
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <InputField fieldName="name" label="Model Name" />
-        
-        {fields.map((field, index) => (
-          <div key={field.id} className="grid grid-cols-4 gap-2 items-end">
-            <InputField fieldName={`fields.${index}.name`} label="Field Name" />
-            <SelectField 
-              fieldName={`fields.${index}.type`} 
-              label="Type"
-              options={[
-                { value: 'String', label: 'String' },
-                { value: 'Number', label: 'Number' },
-                { value: 'Boolean', label: 'Boolean' },
-              ]}
-            />
-            <CheckboxField fieldName={`fields.${index}.required`} label="Required" />
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              onClick={() => remove(index)}
-            >
-              <TrashIcon className="h-4 w-4" />
-            </Button>
-          </div>
-        ))}
-        
-        <Button
-          type="button"
-          variant="outline"
-          onClick={() => append({ name: '', type: 'String', required: false, unique: false })}
-        >
-          Add Field
-        </Button>
-      </form>
-    </Form>
-  );
-};
-```
-
-#### Watched Form Values
-```typescript
-import { useWatch } from 'react-hook-form';
-
-export const ConditionalForm = () => {
-  const form = useForm<FormValues>();
-  const watchedType = useWatch({ control: form.control, name: 'type' });
-  
-  return (
-    <Form {...form}>
-      <form>
-        <SelectField 
-          fieldName="type" 
-          label="User Type"
-          options={[
-            { value: 'user', label: 'Regular User' },
-            { value: 'admin', label: 'Administrator' },
-          ]}
-        />
-        
-        {watchedType === 'admin' && (
-          <MultiSelectField 
-            fieldName="permissions" 
-            label="Permissions"
-            options={permissionOptions}
-          />
-        )}
-      </form>
-    </Form>
-  );
-};
-```
-
-## Custom Form Components
-
-### Input Field Component
-```typescript
-interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
-  fieldName: string;
-  label: string;
-  info?: string;
-  description?: string;
-  classNames?: {
-    label?: string;
-    input?: string;
-    error?: string;
-    formItem?: string;
-  };
-}
-
-export const InputField = ({
-  fieldName,
-  label,
-  info,
-  description,
-  classNames = {},
-  ...inputProps
-}: InputFieldProps) => {
-  const { control } = useFormContext();
-
-  return (
-    <FormField
-      name={fieldName}
-      control={control}
-      render={({ field }) => (
-        <FormItem className={cn('w-full space-y-0.5', classNames.formItem)}>
-          <FormLabel className={cn('flex gap-2 pl-1 text-base font-medium', classNames.label)}>
-            {label}
-            {info && (
-              <TooltipHelper content={info}>
-                <InfoIcon className="h-4 w-4" />
-              </TooltipHelper>
-            )}
-          </FormLabel>
-          <FormControl>
-            <Input
-              {...field}
-              {...inputProps}
-              className={classNames.input}
-            />
-          </FormControl>
-          {description && (
-            <FormDescription className="text-xs pl-1 text-muted-foreground">
-              {description}
-            </FormDescription>
-          )}
-          <FormMessage className={cn('text-xs pl-1', classNames.error)} />
-        </FormItem>
-      )}
-    />
-  );
-};
-```
-
-### Select Field Component
-```typescript
-interface SelectFieldProps {
-  fieldName: string;
-  label: string;
-  placeholder?: string;
-  options: Array<{ value: string; label: string }>;
-  info?: string;
-}
-
-export const SelectField = ({
-  fieldName,
-  label,
-  placeholder = 'Select an option',
-  options,
-  info,
-}: SelectFieldProps) => {
-  const { control } = useFormContext();
-
-  return (
-    <FormField
-      name={fieldName}
-      control={control}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel className="flex gap-2 pl-1 text-base font-medium">
-            {label}
-            {info && (
-              <TooltipHelper content={info}>
-                <InfoIcon className="h-4 w-4" />
-              </TooltipHelper>
-            )}
-          </FormLabel>
-          <Select onValueChange={field.onChange} defaultValue={field.value}>
-            <FormControl>
-              <SelectTrigger>
-                <SelectValue placeholder={placeholder} />
-              </SelectTrigger>
-            </FormControl>
-            <SelectContent>
-              {options.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <FormMessage className="text-xs pl-1" />
-        </FormItem>
-      )}
-    />
-  );
-};
-```
-
-## Error Handling
-
-### Form Error Display
-```typescript
-// Global form errors
-const form = useForm({
-  resolver: zodResolver(schema),
-});
-
-// Set server errors
-const handleSubmit = async (data: FormValues) => {
-  try {
-    await submitData(data);
-  } catch (error) {
-    if (error.response?.data?.errors) {
-      // Set field-specific errors
-      Object.entries(error.response.data.errors).forEach(([field, message]) => {
-        form.setError(field as keyof FormValues, {
-          type: 'server',
-          message: message as string,
-        });
-      });
-    } else {
-      // Set root error
-      form.setError('root', {
-        type: 'server',
-        message: 'Something went wrong. Please try again.',
-      });
-    }
-  }
-};
-
-// Display root errors
-{form.formState.errors.root && (
-  <Alert variant="destructive">
-    <AlertDescription>
-      {form.formState.errors.root.message}
-    </AlertDescription>
-  </Alert>
-)}
-```
-
-### Loading States
-```typescript
-export const FormWithLoading = () => {
-  const form = useForm<FormValues>();
-  const { isSubmitting, isValid } = form.formState;
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        {/* Form fields */}
-        
-        <div className="flex gap-2">
-          <Button 
-            type="submit" 
-            disabled={isSubmitting || !isValid}
-            className="min-w-[100px]"
-          >
-            {isSubmitting ? (
-              <>
-                <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
-                Saving...
-              </>
-            ) : (
-              'Save'
-            )}
-          </Button>
-          <Button type="button" variant="outline" disabled={isSubmitting}>
-            Cancel
-          </Button>
-        </div>
-      </form>
-    </Form>
-  );
-};
-```
-
-## Server Actions Integration
-
-### Form Submission with Server Actions
-```typescript
-'use server';
-
-import { revalidatePath } from 'next/cache';
-import { redirect } from 'next/navigation';
-
-export async function createUser(formData: FormData) {
-  // Validate data
-  const validatedFields = userSchema.safeParse({
-    email: formData.get('email'),
-    name: formData.get('name'),
-    password: formData.get('password'),
-  });
-
-  if (!validatedFields.success) {
-    return {
-      errors: validatedFields.error.flatten().fieldErrors,
-    };
-  }
-
-  try {
-    // Create user
-    await apiCreateUser(validatedFields.data);
-    
-    // Revalidate and redirect
-    revalidatePath('/users');
-    redirect('/users');
-  } catch (error) {
-    return {
-      message: 'Failed to create user',
-    };
-  }
-}
-
-// Client component usage
-export const CreateUserForm = () => {
-  const [state, formAction] = useActionState(createUser, initialState);
-
-  return (
-    <form action={formAction}>
-      <InputField name="email" label="Email" />
-      {state?.errors?.email && (
-        <p className="text-sm text-destructive">{state.errors.email}</p>
-      )}
-      
-      <Button type="submit">Create User</Button>
-      
-      {state?.message && (
-        <Alert variant="destructive">
-          <AlertDescription>{state.message}</AlertDescription>
-        </Alert>
-      )}
-    </form>
-  );
-};
-```
\ No newline at end of file
diff --git a/.cursor/rules/keyboard-shortcuts.mdc b/.cursor/rules/keyboard-shortcuts.mdc
deleted file mode 100644
index 553659241..000000000
--- a/.cursor/rules/keyboard-shortcuts.mdc
+++ /dev/null
@@ -1,32 +0,0 @@
----
-description: Apply standard keyboard shortcut conventions when building interactive web applications.
-globs: "**/*.{tsx,jsx,ts,js,vue,svelte}"
-alwaysApply: true
----
-
-# Quintessential Design Wiki -- Keyboard Shortcuts
-
-9 keyboard conventions every web app must support. When building interactive components, wire these up and show shortcut hints in tooltips.
-
-## Conventions
-
-| Shortcut | Action | Notes |
-|----------|--------|-------|
-| `Escape` | Close the current overlay | Modals, drawers, popovers, dropdowns, command palette — Escape always exits. No exceptions. |
-| `Enter` | Confirm the primary action | Submit forms, click the focused button (Save, Login, Confirm). Enter = "do the obvious thing." |
-| `Cmd+K` | Open command palette / search | The universal launcher. Users expect this from Linear, Slack, GitHub, Vercel, Raycast. |
-| `Cmd+/` | Toggle help or shortcut cheat sheet | Show available shortcuts in context. |
-| `Cmd+S` | Toggle sidebar | Override browser Save Page with `preventDefault`. Only override because the action is immediately useful. |
-| `Cmd+Backspace` | Delete selected item | Must trigger a confirmation dialog. Never delete silently. |
-| `Cmd+A` | Select / highlight all text | Respect native behavior in text inputs. Override only in custom list/grid contexts to select all items. |
-| `Arrow keys` | Navigate lists, menus, tabs | Move focus through items. Never animate focus movement — instant only. |
-| `Tab` / `Shift+Tab` | Move focus forward / backward | Standard focus traversal through interactive elements. Never trap focus outside of modals. |
-
-## Rules
-
-- **Cross-platform mapping** — `Cmd` on macOS becomes `Ctrl` on Windows/Linux. Detect with `navigator.userAgent` or `event.metaKey` vs `event.ctrlKey`. Show the correct glyph (`⌘` vs `Ctrl`) based on platform.
-- **Never override sacred browser shortcuts** — `Cmd+C`, `Cmd+V`, `Cmd+X` (clipboard), `Cmd+T` (new tab), `Cmd+W` (close tab), `Cmd+R` (reload), `Cmd+L` (address bar). These belong to the browser.
-- **Show shortcut hints** — Tooltips on buttons and menu items should display the keyboard shortcut in a `<kbd>` element. "Toggle sidebar ⌘S" not just "Toggle sidebar."
-- **No animation on keyboard actions** — Arrow key navigation, Tab focus, Enter confirmation — all instant. Animation adds latency to actions users repeat hundreds of times.
-- **Focus must be visible** — Every element reachable by Tab must have a visible focus ring. Use `focus-visible` to show rings only on keyboard navigation, not mouse clicks.
-- **Scope shortcuts to context** — `Cmd+Backspace` deletes only when an item is selected. `Arrow keys` navigate only when a list/menu is focused. Shortcuts must not fire globally when the user is typing in an input field.
diff --git a/.cursor/rules/project-structure.mdc b/.cursor/rules/project-structure.mdc
deleted file mode 100644
index 41e806be8..000000000
--- a/.cursor/rules/project-structure.mdc
+++ /dev/null
@@ -1,77 +0,0 @@
----
-alwaysApply: true
-description: Project structure and architecture guidelines for Conduit UI
----
-
-# Project Structure & Architecture Guide
-
-## Overview
-Conduit UI is a Next.js 16 admin panel for the Conduit Platform with React Server Components, built with TypeScript, Tailwind CSS, and shadcn/ui components.
-
-## Directory Structure
-
-### Core Application Structure
-- [src/app](mdc:src/app) - Next.js App Router pages and layouts
-  - [src/app/(dashboard)](mdc:src/app/(dashboard)) - Dashboard layout group
-  - [src/app/(dashboard)/(modules)](mdc:src/app/(dashboard)/(modules)) - Module-specific pages
-  - [src/app/login](mdc:src/app/login) - Authentication pages
-- [src/components](mdc:src/components) - Reusable React components organized by feature
-- [src/lib](mdc:src/lib) - Utility functions, API clients, and business logic
-- [src/contexts](mdc:src/contexts) - React context providers
-- [src/types](mdc:src/types) - TypeScript type definitions
-
-### Module Organization
-Each module follows a consistent structure under `src/components/[module-name]/`:
-- Dashboard components
-- Feature-specific components (users, settings, etc.)
-- Form components
-- Table components
-- Dialog/modal components
-
-### Key Configuration Files
-- [package.json](mdc:package.json) - Dependencies and scripts (Node.js 24+ required)
-- [tsconfig.json](mdc:tsconfig.json) - TypeScript configuration with path mapping
-- [tailwind.config.js](mdc:tailwind.config.js) - Tailwind CSS with custom design system
-- [next.config.ts](mdc:next.config.ts) - Next.js configuration (env from `.env*` files, loaded by Next)
-- [components.json](mdc:components.json) - shadcn/ui component configuration
-
-## Architecture Patterns
-
-### Component Architecture
-- Use React Server Components for data fetching where possible
-- Client components marked with 'use client' directive
-- Custom UI components extend shadcn/ui base components
-- Form components use react-hook-form with Zod validation
-
-### API Layer
-- [src/lib/api/api.ts](mdc:src/lib/api/api.ts) - Central API client with axios
-- Module-specific API functions in `src/lib/api/[module]/`
-- Server actions marked with 'use server' directive
-- Environment-aware API client with cookie-based auth
-
-### State Management
-- React Context for global state ([src/contexts](mdc:src/contexts))
-- React Hook Form for form state
-- URL state for navigation and filters
-- Server state via API calls
-
-### Styling System
-- Tailwind CSS with custom design tokens
-- CSS variables for theming (light/dark mode support)
-- Component variants using class-variance-authority (cva)
-- Consistent spacing and typography scale
-
-## Module Pattern
-Each Conduit module (Authentication, Database, Email, etc.) follows:
-1. Main dashboard page at `/[module]`
-2. Feature pages at `/[module]/[feature]`
-3. Settings page at `/[module]/settings`
-4. Components organized in `src/components/[module]/`
-5. API functions in `src/lib/api/[module]/`
-6. Type definitions in `src/lib/models/[module]/`
-
-## Navigation Structure
-- Sidebar navigation defined in [src/components/navigation/navList.config.ts](mdc:src/components/navigation/navList.config.ts)
-- Module-based routing with consistent URL patterns
-- Breadcrumb navigation for deep pages
-- Environment switching capability
\ No newline at end of file
diff --git a/.cursor/rules/server-actions-observability.mdc b/.cursor/rules/server-actions-observability.mdc
deleted file mode 100644
index aa04dfeda..000000000
--- a/.cursor/rules/server-actions-observability.mdc
+++ /dev/null
@@ -1,21 +0,0 @@
----
-description: Server-only Prometheus, Loki, and env-bound data; Next.js use server boundaries
-globs: src/lib/prometheus/**,src/lib/loki/**,src/lib/observability/**,src/lib/logic/EnvManager.ts
-alwaysApply: false
----
-
-# Server-side metrics, logs, and secrets
-
-## Rules
-
-1. **Never import Prometheus or Loki HTTP clients, or `EnvManager` / cookie-backed env resolution, from Client Components** except through explicit **Server Actions** defined in a dedicated file that starts with `'use server';` and exports **only async** functions (e.g. [`lokiAvailability.actions.ts`](mdc:src/lib/observability/lokiAvailability.actions.ts)).
-
-2. **File-level `'use server'`** means every export must be an async Server Action. Do **not** add synchronous function exports to such a file. Put sync helpers (e.g. building config from `Environment`) in a sibling module with **`import 'server-only';`** at the top (e.g. [`envConfig.ts`](mdc:src/lib/prometheus/envConfig.ts)).
-
-3. Use **`import 'server-only';`** in modules that must never run in the browser: Prometheus env config, observability guards, and any code that touches secrets or admin backends. This fails the build if a Client Component imports the module by mistake.
-
-4. **Prometheus HTTP**: [`client.ts`](mdc:src/lib/prometheus/client.ts) uses `'use server';` — all exports there are async server actions. Sync env mapping lives in [`envConfig.ts`](mdc:src/lib/prometheus/envConfig.ts) with `server-only`.
-
-5. **Loki from the client**: only import [`getLokiAvailability`](mdc:src/lib/observability/lokiAvailability.actions.ts) from the actions file. Do **not** import [`lokiAvailabilityCore.ts`](mdc:src/lib/observability/lokiAvailabilityCore.ts) from client code.
-
-6. **Shared types** for props (`ObservabilityServiceState`, etc.) stay in [`types.ts`](mdc:src/lib/observability/types.ts) with no `server-only` so Client Components can import types only.
diff --git a/.cursor/rules/typescript-standards.mdc b/.cursor/rules/typescript-standards.mdc
deleted file mode 100644
index 240be89e6..000000000
--- a/.cursor/rules/typescript-standards.mdc
+++ /dev/null
@@ -1,199 +0,0 @@
----
-globs: *.ts,*.tsx
-description: TypeScript coding standards and best practices
----
-
-# TypeScript & Code Quality Standards
-
-## TypeScript Configuration
-- Use strict TypeScript settings as defined in [tsconfig.json](mdc:tsconfig.json)
-- Enable `strict: true`, `forceConsistentCasingInFileNames: true`
-- Use path mapping with `@/*` alias for src directory imports
-- Target ES5 with modern library support
-
-## Import & Export Patterns
-
-### Import Order
-1. React and Next.js imports
-2. External library imports
-3. Internal library/utility imports (`@/lib/*`)
-4. Component imports (`@/components/*`)
-5. Type-only imports (use `import type`)
-
-```typescript
-import { useState } from 'react';
-import { NextPage } from 'next';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { getApiClient } from '@/lib/api';
-import { Button } from '@/components/ui/button';
-import type { User } from '@/lib/models/User';
-```
-
-### Export Patterns
-- Use named exports for components and utilities
-- Use default exports only for pages and layout components
-- Export types separately when needed
-
-```typescript
-export const UserCard = () => { ... };
-export type UserCardProps = { ... };
-export default function UserPage() { ... } // Pages only
-```
-
-## Type Definitions
-
-### Interface vs Type
-- Use `interface` for object shapes that might be extended
-- Use `type` for unions, intersections, and computed types
-- Prefer `interface` for component props
-
-```typescript
-// Good
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary';
-}
-
-// Good
-type Status = 'pending' | 'approved' | 'rejected';
-type ApiResponse<T> = { data: T; error?: string };
-```
-
-### Prop Types
-- Always type component props explicitly
-- Use generic constraints where appropriate
-- Prefer readonly for props that shouldn't be mutated
-
-```typescript
-interface UserListProps {
-  readonly users: User[];
-  readonly onUserSelect: (user: User) => void;
-  readonly loading?: boolean;
-}
-```
-
-## Function Definitions
-
-### Function Declaration Styles
-- Use arrow functions for components and simple functions
-- Use function declarations for complex utilities
-- Use async/await over Promises
-
-```typescript
-// Components
-export const UserCard = ({ user, onEdit }: UserCardProps) => {
-  return <div>{user.name}</div>;
-};
-
-// API functions
-export const getUsers = async (params: GetUsersParams): Promise<User[]> => {
-  const client = await getApiClient();
-  const response = await client.get('/users', { params });
-  return response.data;
-};
-```
-
-### Generic Functions
-- Use descriptive generic names
-- Provide constraints when necessary
-- Use default generic values when appropriate
-
-```typescript
-export const createApiFunction = <TRequest, TResponse = any>(
-  endpoint: string
-) => {
-  return async (data: TRequest): Promise<TResponse> => {
-    // implementation
-  };
-};
-```
-
-## Code Quality Standards
-
-### Naming Conventions
-- Use PascalCase for components, interfaces, types, and classes
-- Use camelCase for functions, variables, and methods
-- Use SCREAMING_SNAKE_CASE for constants
-- Use kebab-case for file names
-
-```typescript
-// Good
-const API_ENDPOINTS = {
-  USERS: '/users',
-  AUTH: '/auth'
-} as const;
-
-interface UserPreferences {
-  readonly theme: 'light' | 'dark';
-}
-
-const getUserPreferences = async () => { ... };
-```
-
-### Error Handling
-- Use try/catch blocks for async operations
-- Create typed error classes when needed
-- Use Result types for operations that can fail
-
-```typescript
-// API error handling
-try {
-  const users = await getUsers();
-  return { success: true, data: users };
-} catch (error) {
-  console.error('Failed to fetch users:', error);
-  return { success: false, error: 'Failed to fetch users' };
-}
-```
-
-### Performance Considerations
-- Use `React.memo` for expensive components
-- Use `useCallback` and `useMemo` judiciously
-- Prefer server components when possible
-- Use proper TypeScript utility types
-
-```typescript
-// Use utility types
-type CreateUserRequest = Pick<User, 'email' | 'name'>;
-type UserUpdate = Partial<Pick<User, 'name' | 'email'>>;
-
-// Memoized component
-export const UserList = React.memo<UserListProps>(({ users, onSelect }) => {
-  const sortedUsers = useMemo(
-    () => users.sort((a, b) => a.name.localeCompare(b.name)),
-    [users]
-  );
-  
-  return (
-    <div>
-      {sortedUsers.map(user => (
-        <UserCard key={user.id} user={user} onSelect={onSelect} />
-      ))}
-    </div>
-  );
-});
-```
-
-## ESLint & Prettier Integration
-- Follow Next.js ESLint configuration
-- Use Prettier for consistent formatting
-- Prefer single quotes for strings
-- Use trailing commas
-- Set line length to 80-100 characters
-
-## Documentation Standards
-- Use TSDoc comments for public APIs
-- Document complex types and interfaces
-- Include examples for utility functions
-
-```typescript
-/**
- * Fetches user data with pagination and filtering
- * @param params - Query parameters for filtering users
- * @returns Promise resolving to paginated user data
- * @example
- * const users = await getUsers({ page: 1, limit: 10, search: 'john' });
- */
-export const getUsers = async (params: GetUsersParams): Promise<PaginatedUsers> => {
-  // implementation
-};
-```
\ No newline at end of file
diff --git a/.cursor/rules/typography.mdc b/.cursor/rules/typography.mdc
deleted file mode 100644
index e10fe681c..000000000
--- a/.cursor/rules/typography.mdc
+++ /dev/null
@@ -1,54 +0,0 @@
----
-description: Apply typography best practices when setting fonts, numeric formatting, or text properties in CSS.
-globs: "**/*.{css,scss,tsx,jsx,vue,svelte,html}"
-alwaysApply: true
----
-
-# Quintessential Design Wiki -- Typography
-
-16 rules for typographically considered interfaces. Apply when setting any font or text property.
-
-## Numeric Formatting
-
-- `type-tabular-nums-for-data` -- Use `font-variant-numeric: tabular-nums` for columns, dashboards, pricing. Fixed-width digits align.
-- `type-oldstyle-nums-for-prose` -- Use `font-variant-numeric: oldstyle-nums` in body text so numbers blend with lowercase.
-- `type-slashed-zero` -- Enable `font-variant-numeric: slashed-zero` in code-adjacent UIs to distinguish 0 from O.
-- `type-proper-fractions` -- Use `font-variant-numeric: diagonal-fractions` for typographic fractions.
-
-## OpenType Features
-
-- `type-opentype-contextual-alternates` -- Keep `font-feature-settings: "calt" 1` enabled for contextual glyph adjustment.
-- `type-disambiguation-stylistic-set` -- Enable `ss02` in code-facing UIs to distinguish I/l/1 and 0/O.
-
-## Rendering
-
-- `type-optical-sizing-auto` -- Leave `font-optical-sizing: auto` for size-adaptive glyph shapes.
-- `type-antialiased-on-retina` -- Set `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` on body.
-- `type-no-font-synthesis` -- Set `font-synthesis: none` on display/icon fonts to prevent faux bold/italic.
-- `type-font-display-swap` -- Use `font-display: swap` in `@font-face` so text renders immediately with fallback.
-
-## Text Wrapping
-
-- `type-text-wrap-balance-headings` -- Use `text-wrap: balance` on headings for roughly equal line lengths.
-- `type-text-wrap-pretty` -- Use `text-wrap: pretty` on body text to reduce orphans.
-- `type-justify-with-hyphens` -- Pair `text-align: justify` with `hyphens: auto` to prevent rivers of whitespace.
-
-## Spacing & Decoration
-
-- `type-underline-offset` -- Use `text-underline-offset: 3px` with `text-decoration-skip-ink: auto` to push underlines below descenders.
-- `type-letter-spacing-uppercase` -- Add `letter-spacing: 0.05em` to uppercase and small-caps text.
-- `type-variable-weight-continuous` -- Variable fonts accept any integer 100-900, not just standard stops. Use `font-weight: 450` or `550`.
-
-## Quick Reference
-
-| Property | Use Case | Value |
-|----------|----------|-------|
-| `font-variant-numeric: tabular-nums` | Data tables, pricing | Fixed-width digits |
-| `font-variant-numeric: oldstyle-nums` | Body text | Blends with lowercase |
-| `font-variant-numeric: slashed-zero` | Code UIs | Distinguishes 0 from O |
-| `font-feature-settings: "ss02"` | Code UIs | Disambiguates I/l/1 |
-| `font-optical-sizing: auto` | Everywhere | Size-adaptive glyphs |
-| `-webkit-font-smoothing: antialiased` | Retina displays | Thinner, cleaner text |
-| `text-wrap: balance` | Headings | Even line lengths |
-| `text-underline-offset: 3px` | Links | Clear descender space |
-| `font-synthesis: none` | Display/icon fonts | Prevents faux styles |
diff --git a/.cursor/rules/ui-component-patterns.mdc b/.cursor/rules/ui-component-patterns.mdc
deleted file mode 100644
index 8469bae63..000000000
--- a/.cursor/rules/ui-component-patterns.mdc
+++ /dev/null
@@ -1,336 +0,0 @@
----
-globs: *.tsx,*.css
-description: UI/UX patterns and component design guidelines
----
-
-# UI/UX & Component Patterns
-
-## Design System Foundation
-- Built on shadcn/ui component library with Radix UI primitives
-- Tailwind CSS with custom design tokens in [tailwind.config.js](mdc:tailwind.config.js)
-- Dark/light theme support with CSS variables
-- Consistent spacing, typography, and color scales
-
-## Component Architecture
-
-### shadcn/ui Components
-Base UI components are located in [src/components/ui](mdc:src/components/ui):
-- [Button](mdc:src/components/ui/button.tsx) - Primary interaction element
-- [Form components](mdc:src/components/ui/form.tsx) - Form structure and validation
-- Input, Select, Dialog, Sheet, etc. - All following shadcn/ui patterns
-
-### Component Variant System
-Use `class-variance-authority` (cva) for component variants:
-
-```typescript
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-```
-
-### Component Composition Patterns
-
-#### Form Input Components
-Custom form inputs extend base UI components with consistent patterns:
-
-```typescript
-interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
-  fieldName: string;
-  label: string;
-  info?: string;
-  description?: string;
-  classNames?: {
-    label?: string;
-    input?: string;
-    error?: string;
-    formItem?: string;
-    description?: string;
-  };
-}
-
-const InputField = ({ fieldName, label, info, ...props }: InputFieldProps) => {
-  const { control } = useFormContext();
-  
-  return (
-    <FormField
-      name={fieldName}
-      control={control}
-      render={({ field }) => (
-        <FormItem className="w-full space-y-0.5">
-          <FormLabel className="flex gap-2 pl-1 text-base font-medium">
-            {label}
-            {info && <TooltipHelper content={info}><InfoIcon /></TooltipHelper>}
-          </FormLabel>
-          <FormControl>
-            <Input {...field} {...props} />
-          </FormControl>
-          <FormMessage className="text-xs pl-1" />
-        </FormItem>
-      )}
-    />
-  );
-};
-```
-
-#### Dialog/Modal Components
-Use Sheet for side panels, Dialog for modals:
-
-```typescript
-export const AddUserSheet = ({ children, onSuccess }: AddUserSheetProps) => {
-  const [open, setOpen] = useState(false);
-  
-  return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent className="w-full sm:max-w-md">
-        <SheetHeader>
-          <SheetTitle>Add New User</SheetTitle>
-          <SheetDescription>Create a new user account</SheetDescription>
-        </SheetHeader>
-        {/* Form content */}
-        <SheetFooter>
-          <Button type="submit">Save</Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-};
-```
-
-## Layout Patterns
-
-### Page Layout Structure
-```typescript
-export default function ModulePage() {
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center justify-between p-6 border-b">
-        <h1 className="text-2xl font-semibold">Page Title</h1>
-        <Button>Primary Action</Button>
-      </div>
-      
-      {/* Content */}
-      <div className="flex-1 p-6 overflow-auto">
-        {/* Main content */}
-      </div>
-    </div>
-  );
-}
-```
-
-### Dashboard Grid Layouts
-```typescript
-export const ModuleDashboard = () => {
-  return (
-    <div className="grid gap-6 p-6">
-      {/* Metrics Row */}
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <MetricCard title="Total Users" value="1,234" />
-        <MetricCard title="Active Sessions" value="856" />
-      </div>
-      
-      {/* Content Grid */}
-      <div className="grid gap-6 md:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Activity</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {/* Activity list */}
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-};
-```
-
-## Data Display Patterns
-
-### Table Components
-Use @tanstack/react-table for complex data tables:
-
-```typescript
-export const UserDataTable = ({ data }: { data: User[] }) => {
-  const columns: ColumnDef<User>[] = [
-    {
-      accessorKey: 'email',
-      header: 'Email',
-      cell: ({ row }) => (
-        <div className="font-medium">{row.getValue('email')}</div>
-      ),
-    },
-    {
-      accessorKey: 'isActive',
-      header: 'Status',
-      cell: ({ row }) => (
-        <Badge variant={row.getValue('isActive') ? 'default' : 'secondary'}>
-          {row.getValue('isActive') ? 'Active' : 'Inactive'}
-        </Badge>
-      ),
-    },
-    {
-      id: 'actions',
-      cell: ({ row }) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon">
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem>Edit</DropdownMenuItem>
-            <DropdownMenuItem>Delete</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ),
-    },
-  ];
-
-  const table = useReactTable({
-    data,
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-  });
-
-  return <DataTable table={table} />;
-};
-```
-
-### Loading States
-Consistent loading patterns using Lucide React icons:
-
-```typescript
-import { LoaderIcon } from 'lucide-react';
-
-export const LoadingButton = ({ loading, children, ...props }: ButtonProps & { loading?: boolean }) => {
-  return (
-    <Button disabled={loading} {...props}>
-      {loading && <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />}
-      {children}
-    </Button>
-  );
-};
-
-export const LoadingSpinner = () => (
-  <div className="flex items-center justify-center p-4">
-    <LoaderIcon className="h-6 w-6 animate-spin" />
-  </div>
-);
-```
-
-## Styling Guidelines
-
-### Tailwind CSS Usage
-- Use semantic class names from the design system
-- Prefer design tokens over arbitrary values
-- Use responsive prefixes consistently (sm:, md:, lg:, xl:)
-- Group classes logically: layout, spacing, colors, typography, effects
-
-```typescript
-// Good
-<div className="flex items-center justify-between p-4 bg-card border border-border rounded-lg shadow-xs">
-
-// Avoid arbitrary values when design tokens exist
-<div className="p-[13px] bg-[#f1f5f9]"> // Bad
-<div className="p-4 bg-muted"> // Good
-```
-
-### CSS Variable System
-Use CSS variables for theme-aware styling:
-
-```css
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-}
-
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-}
-```
-
-### Responsive Design
-- Mobile-first approach with progressive enhancement
-- Use Tailwind responsive prefixes
-- Test components across different screen sizes
-- Consider touch interactions for mobile
-
-```typescript
-<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-  {/* Responsive grid items */}
-</div>
-```
-
-## Accessibility Standards
-- Use semantic HTML elements
-- Ensure proper heading hierarchy (h1, h2, h3)
-- Include ARIA labels for complex interactions
-- Maintain keyboard navigation support
-- Use proper color contrast ratios
-- Test with screen readers
-
-```typescript
-<Button
-  aria-label="Delete user"
-  aria-describedby="delete-help-text"
-  onClick={handleDelete}
->
-  <TrashIcon className="h-4 w-4" />
-</Button>
-<div id="delete-help-text" className="sr-only">
-  This action cannot be undone
-</div>
-```
-
-## Icon Usage
-- Use Lucide React for consistent iconography
-- Standard sizes: 16px (h-4 w-4), 20px (h-5 w-5), 24px (h-6 w-6)
-- Maintain icon-text spacing consistency
-- Use semantic icon choices
-
-```typescript
-import { User, Settings, Home, ChevronRight } from 'lucide-react';
-
-<Button>
-  <User className="mr-2 h-4 w-4" />
-  Users
-</Button>
-```
\ No newline at end of file
diff --git a/.cursor/rules/ux-laws.mdc b/.cursor/rules/ux-laws.mdc
deleted file mode 100644
index 596ee2643..000000000
--- a/.cursor/rules/ux-laws.mdc
+++ /dev/null
@@ -1,65 +0,0 @@
----
-description: Apply UX psychology laws when building or reviewing any user interface element.
-globs: "**/*.{tsx,jsx,ts,js,css,scss,html,vue,svelte}"
-alwaysApply: true
----
-
-# Quintessential Design Wiki -- UX Laws
-
-These 23 laws govern how users perceive and interact with interfaces. Apply them when building or reviewing any UI.
-
-## Target Sizing (Fitts's Law)
-
-- `ux-fitts-target-size` -- Interactive elements must be at least 32px. Larger targets are easier to click.
-- `ux-fitts-hit-area` -- Expand hit areas beyond visible bounds using pseudo-elements or invisible padding.
-
-## Decision Reduction (Hick's Law)
-
-- `ux-hicks-minimize-choices` -- Minimize visible choices to reduce decision time. Use progressive disclosure.
-
-## Memory Limits (Miller's Law)
-
-- `ux-millers-chunking` -- Chunk data into groups of 5-9 items for scannability.
-
-## Response Time (Doherty Threshold)
-
-- `ux-doherty-under-400ms` -- Interactions must respond within 400ms to feel instant.
-- `ux-doherty-perceived-speed` -- When actual speed isn't possible, fake it with skeletons, optimistic UI, or progress indicators.
-
-## Input Tolerance (Postel's Law)
-
-- `ux-postels-accept-messy-input` -- Accept messy human input, normalize and output clean data.
-
-## Complexity Management
-
-- `ux-progressive-disclosure` -- Show what matters now, reveal complexity incrementally as needed.
-- `ux-teslers-complexity` -- Move irreducible complexity to the system, not the user.
-- `ux-cognitive-load-reduce` -- Remove anything that doesn't help the user complete their task.
-
-## Familiarity
-
-- `ux-jakobs-familiar-patterns` -- Use familiar UI patterns users know from other sites. Deviations must be intentional improvements.
-
-## Visual Perception (Gestalt)
-
-- `ux-proximity-grouping` -- Group related elements spatially with tighter spacing within groups, larger spacing between.
-- `ux-similarity-consistency` -- Elements that function the same must look the same.
-- `ux-common-region-boundaries` -- Use boundaries (cards, sections, dividers) to group related content.
-- `ux-uniform-connectedness` -- Visually connect related elements with lines, color, or frames.
-- `ux-pragnanz-simplify` -- Simplify complex visuals into the clearest possible forms.
-
-## Emphasis & Hierarchy
-
-- `ux-von-restorff-emphasis` -- Make the most important element visually distinct from its surroundings.
-- `ux-serial-position` -- Place key items first or last in sequences -- users remember edges best.
-- `ux-aesthetic-usability` -- Visual polish increases perceived usability. Small details compound into trust.
-
-## Progress & Completion
-
-- `ux-peak-end-finish-strong` -- End experiences with clear, satisfying success states.
-- `ux-goal-gradient-progress` -- Show progress toward completion to accelerate user behavior.
-- `ux-zeigarnik-show-incomplete` -- Show incomplete state to drive completion.
-
-## Prioritization
-
-- `ux-pareto-prioritize-features` -- 80% of users use 20% of features. Optimize the critical path first.
diff --git a/.cursor/rules/visual-design.mdc b/.cursor/rules/visual-design.mdc
deleted file mode 100644
index cacd6cac5..000000000
--- a/.cursor/rules/visual-design.mdc
+++ /dev/null
@@ -1,33 +0,0 @@
----
-description: Apply visual design fundamentals when writing CSS for shadows, borders, spacing, and elevation.
-globs: "**/*.{css,scss,tsx,jsx,vue,svelte,html}"
-alwaysApply: true
----
-
-# Quintessential Design Wiki -- Visual Design
-
-9 rules that separate considered interfaces from default ones. Apply when writing any visual CSS.
-
-## Border Radius
-
-- `visual-concentric-radius` -- Inner radius = outer radius minus padding. Same radius on nested elements creates uneven curves.
-
-## Shadows
-
-- `visual-layered-shadows` -- Layer multiple shadows with increasing blur and decreasing opacity. Single shadows look flat.
-- `visual-shadow-direction` -- All shadows share the same offset direction (single light source). Mixed directions feel broken.
-- `visual-no-pure-black-shadow` -- Use neutral colors for shadows, not pure black. `rgba(17, 24, 39, 0.08)` over `rgba(0, 0, 0, 0.25)`.
-- `visual-shadow-matches-elevation` -- Larger blur and offset = higher elevation. Use a consistent shadow scale (`--shadow-1`, `--shadow-2`, `--shadow-3`).
-- `visual-animate-shadow-pseudo` -- Never transition `box-shadow` directly. Animate opacity on a pseudo-element with the target shadow instead.
-
-## Spacing
-
-- `visual-consistent-spacing-scale` -- Use a defined scale (4, 8, 12, 16, 24, 32, 48), never arbitrary pixel values.
-
-## Borders
-
-- `visual-border-alpha-colors` -- Semi-transparent borders (`var(--gray-a4)`) adapt to any background. Hardcoded hex borders break on theme changes.
-
-## Buttons
-
-- `visual-button-shadow-anatomy` -- Polished buttons use six layers: outer cut shadow, inner ambient highlight, inner top highlight, layered depth shadows, text drop-shadow, subtle gradient background.
diff --git a/.cursor/skills/design-audit/SKILL.md b/.cursor/skills/design-audit/SKILL.md
deleted file mode 100644
index aae4eb6b8..000000000
--- a/.cursor/skills/design-audit/SKILL.md
+++ /dev/null
@@ -1,265 +0,0 @@
----
-name: design-audit
-description: "Audit an existing codebase for design consistency, extract the current design profile, and produce a prioritized migration report against Quintessential standards. Use when the user wants to evaluate an existing project's design quality, assess UI consistency, or prepare for a design system migration. Triggers on: audit codebase, design audit, evaluate design, check consistency, design debt, review project design, assess UI quality, migrate design, design profile, what needs fixing."
-argument-hint: "[project path or 'this project']"
-metadata:
-  author: Quintessential
-  version: '3.0.0'
-  short-description: Codebase design audit against Quintessential standards
----
-
-# Design Audit
-
-Scan an existing codebase, extract its current design profile, compare against Quintessential standards, and produce a prioritized migration report with a ready-to-use project context rule.
-
----
-
-## When to Use
-
-- User says "audit", "evaluate", "assess", "check design", "design debt", "what needs fixing"
-- User wants to apply Quintessential rules to an existing project
-- Before installing Quintessential rules in a project that's already in development
-- When the user asks "how consistent is this codebase?"
-
----
-
-## Audit Process
-
-Follow this sequence exactly. Each step produces output the next step depends on.
-
-### Step 1: Locate the Design Surface
-
-Find the files that define the project's visual language:
-
-```
-Search for (in order):
-1. globals.css, global.css, app.css, index.css — global styles
-2. tailwind.config.js, tailwind.config.ts — Tailwind theme
-3. theme.ts, theme.js, tokens.ts, tokens.js — design tokens
-4. components/ui/ — shared UI component library
-5. layout.tsx, layout.jsx — root layout (fonts, providers)
-6. package.json — check for styling/animation dependencies
-```
-
-Read each file found. These are the source of truth for what the project considers its design system.
-
-### Step 2: Extract the Design Profile
-
-From the files found, extract concrete values. Be specific — count things, name things, quote values.
-
-#### 2a. Typography
-
-| Question                       | How to Find                                                                          |
-| ------------------------------ | ------------------------------------------------------------------------------------ |
-| What font families are in use? | Search for `font-family`, `--font-`, `next/font`, `@font-face`, Google Fonts imports |
-| How many distinct font sizes?  | Search for `font-size`, `text-{size}` Tailwind classes, `--font-size-` variables     |
-| How many font weights?         | Search for `font-weight`, `font-{weight}` classes                                    |
-| Is there a type scale?         | Check if sizes follow a ratio or are arbitrary                                       |
-| Is `font-display: swap` used?  | Check `@font-face` declarations and `next/font` config                               |
-| Is antialiasing set?           | Search for `-webkit-font-smoothing`                                                  |
-
-#### 2b. Colors
-
-| Question                           | How to Find                                                                          |
-| ---------------------------------- | ------------------------------------------------------------------------------------ |
-| How many unique color values?      | Search for hex codes (`#[0-9a-fA-F]{3,8}`), `rgb()`, `hsl()`, Tailwind color classes |
-| How many are in CSS variables?     | Count `--color-` or `--{name}` variables in globals                                  |
-| How many are hardcoded?            | Count hex/rgb values in component files (not in globals or config)                   |
-| Is there a palette?                | Check Tailwind config `colors` or CSS variable definitions                           |
-| Are alpha colors used for borders? | Search for `rgba`, `hsla`, `/0.` patterns on borders                                 |
-
-#### 2c. Spacing
-
-| Question                      | How to Find                                                              |
-| ----------------------------- | ------------------------------------------------------------------------ |
-| What spacing values are used? | Search for `padding`, `margin`, `gap`, `p-`, `m-`, `gap-`                |
-| Do they follow a scale?       | Check if values are multiples of 4 (4, 8, 12, 16, 24, 32, 48)            |
-| Are there arbitrary values?   | Look for odd numbers or non-scale values like `13px`, `37px`, `p-[23px]` |
-
-#### 2d. Shadows & Borders
-
-| Question                                 | How to Find                                              |
-| ---------------------------------------- | -------------------------------------------------------- |
-| How many shadow definitions?             | Search for `box-shadow`, `shadow-`, `--shadow`           |
-| Are shadows layered?                     | Check if any shadow uses multiple comma-separated values |
-| Are shadows consistent direction?        | Compare offset-x/offset-y across shadows                 |
-| Are border colors hardcoded or variable? | Search for `border-color`, `border-{color}`              |
-
-#### 2e. Animation & Motion
-
-| Question                               | How to Find                                                             |
-| -------------------------------------- | ----------------------------------------------------------------------- |
-| What animation library is used?        | Check package.json for framer-motion, motion, react-spring, gsap        |
-| What durations are in use?             | Search for `duration`, `transition:`, `animation:`, timing values       |
-| What easings are in use?               | Search for `ease`, `cubic-bezier`, `ease-in`, `ease-out`, `ease-in-out` |
-| Is `prefers-reduced-motion` respected? | Search for `prefers-reduced-motion`, `useReducedMotion`                 |
-| Are `exit` animations present?         | Search for `AnimatePresence`, `exit=`                                   |
-
-#### 2f. Components
-
-| Question                        | How to Find                                                   |
-| ------------------------------- | ------------------------------------------------------------- |
-| Is there a shared UI library?   | Check for `components/ui/`, `@your-org/ui`, shadcn components |
-| How many button variants exist? | Search for button components, count distinct styles           |
-| Are inputs/forms consistent?    | Compare form components across features                       |
-| Is `cn()` or `clsx` used?       | Search for the class merging utility                          |
-
-#### 2g. Keyboard & Interaction
-
-| Question                        | How to Find                                                            |
-| ------------------------------- | ---------------------------------------------------------------------- |
-| Are keyboard shortcuts defined? | Search for `useHotkeys`, `addEventListener('keydown'`, `Cmd+`, `Ctrl+` |
-| Does Escape close overlays?     | Search for `Escape` key handling in modals/dialogs                     |
-| Is focus management handled?    | Search for `focus-visible`, `FocusTrap`, `autoFocus`                   |
-| Are hover states touch-safe?    | Search for `@media (hover: hover)`, `pointer: fine`                    |
-
-### Step 3: Compare Against Quintessential Standards
-
-For each dimension, rate the current state:
-
-| Rating      | Meaning                                                                   |
-| ----------- | ------------------------------------------------------------------------- |
-| **Solid**   | Consistent, follows a system, matches or exceeds Quintessential standards |
-| **Partial** | Has a system but inconsistently applied, or the system has gaps           |
-| **Missing** | No system, arbitrary values, no consistency                               |
-
-### Step 4: Produce the Migration Report
-
-Structure the output as:
-
-```
-## Design Audit Report
-
-### Project: [name]
-### Date: [date]
-### Overall Assessment: [1-2 sentences]
-
----
-
-### Design Profile
-
-#### Typography
-- Families: [list]
-- Scale: [exists/missing] — [details]
-- Antialiasing: [yes/no]
-- Rating: [Solid/Partial/Missing]
-
-#### Colors
-- Palette: [X] CSS variables, [Y] hardcoded values
-- System: [describe]
-- Rating: [Solid/Partial/Missing]
-
-#### Spacing
-- Scale: [describe what's in use]
-- Consistency: [percentage estimate of on-scale vs arbitrary]
-- Rating: [Solid/Partial/Missing]
-
-#### Shadows & Borders
-- [findings]
-- Rating: [Solid/Partial/Missing]
-
-#### Animation
-- Library: [name or CSS-only]
-- Durations: [range]
-- Easings: [list what's used]
-- Reduced motion: [yes/no]
-- Rating: [Solid/Partial/Missing]
-
-#### Components
-- Shared library: [yes/no]
-- Consistency: [assessment]
-- Rating: [Solid/Partial/Missing]
-
-#### Keyboard & Interaction
-- Shortcuts: [list any found]
-- Focus management: [assessment]
-- Rating: [Solid/Partial/Missing]
-
----
-
-### Top 5 Opportunities (by impact)
-
-1. [Highest impact finding — what to fix first]
-2. [Second]
-3. [Third]
-4. [Fourth]
-5. [Fifth]
-
----
-
-### Migration Order
-
-1. **Typography pass** — [specific actions]
-2. **Color pass** — [specific actions]
-3. **Spacing pass** — [specific actions]
-4. **Animation pass** — [specific actions]
-5. **Interaction pass** — [specific actions]
-
----
-
-### Project Context Rule
-
-[Generate a ready-to-use .mdc rule file — see below]
-```
-
-### Step 5: Generate the Project Context Rule
-
-Produce a `.mdc` rule file the user can drop into their project's `.cursor/rules/` directory. This rule tells the LLM what exists and what to migrate toward.
-
-Template:
-
-```markdown
----
-description: Project design context for [project name]. Guides Quintessential rule application to this existing codebase.
-globs: '**/*.{tsx,jsx,ts,js,css,scss,vue,svelte}'
-alwaysApply: true
----
-
-# Design Context — [Project Name]
-
-This is an existing project. Apply Quintessential standards with awareness of what's already built.
-
-## Current Design Language (preserve)
-
-- Font: [what's in use — keep unless explicitly changing]
-- Palette: [CSS variables and intentional colors — keep]
-- Component library: [what exists — extend, don't replace]
-- [Other intentional patterns found in audit]
-
-## Migration Targets (improve incrementally)
-
-- Spacing: migrate from [current state] to Quintessential 4/8/12/16/24/32/48 scale
-- Colors: extract [N] hardcoded hex values to CSS variables
-- Shadows: [specific migration]
-- Animation: standardize to [specific targets from audit]
-- [Other findings]
-
-## Rules of Engagement
-
-- Apply Quintessential standards to ALL new code
-- When modifying existing files, improve what you touch
-- Do NOT refactor untouched code unprompted
-- Do NOT rewrite working components for style alone
-- When you spot a major violation in code you're editing, fix it silently
-- When you spot a major violation in code you're NOT editing, leave a brief comment noting the opportunity
-```
-
----
-
-## Voice
-
-The audit report should be factual and direct. No hedging, no softening. Count things. Name things. Quote values. "There are 47 unique hex values across 23 component files, 12 of which are in CSS variables and 35 are hardcoded" — not "the color system could use some improvement."
-
-Frame findings as opportunities, not failures. The project works — the goal is to make it feel considered.
-
----
-
-## After the Audit
-
-Once the user has the report and the project context rule:
-
-1. Install the project context rule in `.cursor/rules/design-context.mdc`
-2. Install Quintessential rules alongside it (the standard `.mdc` files)
-3. Install relevant skills in the project's `.cursor/skills/` or at user level
-4. Begin building — the rules now guide every new file and every touched file
-5. Schedule targeted passes (typography first) when ready for focused migration
diff --git a/.cursor/skills/design-critique/SKILL.md b/.cursor/skills/design-critique/SKILL.md
deleted file mode 100644
index ffff0f838..000000000
--- a/.cursor/skills/design-critique/SKILL.md
+++ /dev/null
@@ -1,230 +0,0 @@
----
-name: design-critique
-description: "Systematic UI critique skill. Analyzes screenshots, component code, or live URLs and delivers specific, actionable feedback organized by visual design, interface design, interaction consistency, and user context. Triggers on: critique, review, feedback, audit, what's wrong, improve, polish, refine, redesign, analyze this UI, look at this, or when the user pastes a screenshot/image for evaluation."
-argument-hint: '[description, file path, or screenshot]'
-metadata:
-  author: Quintessential
-  version: '3.0.0'
-  short-description: Systematic UI critique with actionable design feedback
----
-
-# Design Critique
-
-A systematic interface critique skill. Analyzes UI screenshots or component code and delivers specific, actionable feedback organized by visual design, interface design, interaction consistency, and user context.
-
----
-
-## When to Use
-
-Trigger on: "critique", "review", "feedback", "audit", "what's wrong", "improve", "polish", "refine", "redesign", "analyze this UI", "look at this", or when the user pastes a screenshot/image for evaluation.
-
----
-
-## Input Modes
-
-### 1. Image / Screenshot (Primary)
-
-The user pastes or attaches a screenshot. Read the image with the Read tool, then critique what you see.
-
-### 2. File Path (Secondary)
-
-The user provides a component file path. Read the file, mentally render the layout from the JSX/TSX, and critique the structural and stylistic decisions in the code. Note: you cannot see the rendered output, so focus on what's inferrable — layout structure, spacing patterns, color choices, typography, hierarchy, component organization, and interaction patterns.
-
-### 3. Live URL (Tertiary)
-
-The user provides a URL. Use WebFetch to retrieve the page content, then critique based on the markup and any screenshots the user provides.
-
----
-
-## Critique Methodology
-
-Follow this sequence. Do NOT skip steps or merge them. Each section should feel like its own focused lens.
-
-### Step 0: Context
-
-Before critiquing, briefly establish:
-
-- **What is this?** (app type, screen purpose, target user)
-- **What emotional context surrounds this task?** (stressful? casual? high-stakes? routine?)
-
-This matters. A divorce filing app demands different care than a podcast player. Name the context so the critique respects it.
-
-### Step 1: First Impressions
-
-Spend one paragraph on gut reaction. What stands out? What feels off? What's the overall impression? Be honest and direct — not tentative.
-
-This is the "noticing" step. The skill of seeing what's actually in front of you, not what you expect to see.
-
-### Step 2: Visual Design
-
-Audit these specific dimensions:
-
-| Dimension                        | What to Look For                                                                                                                                                                          |
-| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Color intentionality**         | Is every color used with purpose? Or are colors applied as decoration without meaning? Look for: too many background colors, competing accents, colors that don't establish hierarchy.    |
-| **Typographic hierarchy**        | Is there a clear scale from most important to least? Count the distinct sizes/weights. Are headlines distinguished from body from labels? Is there unnecessary repetition of type styles? |
-| **Shadow & stroke quality**      | Are shadows crisp or muddy? Are strokes too prominent, competing with content? Do outlines/borders add structure or noise?                                                                |
-| **Visual weight vs. importance** | Do the visually heaviest elements match what's semantically most important? Or do decorative elements steal attention from primary actions?                                               |
-| **Spacing & alignment**          | Is spacing consistent? Are elements aligned to a clear grid? Is there excess padding pushing content away from where it should be?                                                        |
-| **Icon consistency**             | Are icons from the same family? Same weight/stroke width? Same optical size? Or is it a mix of styles?                                                                                    |
-
-For each issue found, use this structure:
-
-> **[Issue name]** — [Specific factual observation]. [Impact on user or experience]. [What it could be instead.]
-
-Be precise. Count things. Quote text. Name colors. Measure relative sizes. "There are four distinct background colors competing for attention" is better than "too many colors."
-
-### Step 3: Interface Design
-
-Audit these dimensions:
-
-| Dimension                  | What to Look For                                                                                                                       |
-| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-| **Focusing mechanism**     | Is it clear where the user should look first? Is there a visual entry point? Or does everything compete for attention equally?         |
-| **Progressive disclosure** | Is complexity revealed gradually, or is everything dumped on the user at once? Are there 40 things on screen when 5 would suffice?     |
-| **Information density**    | Is the density appropriate for the context? Data dashboards can be dense; onboarding should not be.                                    |
-| **Expectation setting**    | Does the user know what will happen next? Is progress communicated? Is scope clear?                                                    |
-| **Feedback & reward**      | Does the interface acknowledge user actions? Are completed items celebrated or just checked off? Is there a sense of forward momentum? |
-| **Redundancy**             | Are labels, titles, or descriptions repeating information the user already knows? Can anything be removed without losing meaning?      |
-
-Frame issues as missed opportunities:
-
-> "We're missing an opportunity to [reward progress / reduce cognitive load / set expectations / etc.]"
-
-### Step 4: Consistency & Conventions
-
-| Dimension                    | What to Look For                                                                                                                         |
-| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| **Pattern consistency**      | Are similar actions handled the same way throughout? Or do interaction patterns shift without reason?                                    |
-| **Platform conventions**     | Does the design follow established platform patterns (iOS, Android, web)? Deviations should be intentional improvements, not accidents.  |
-| **Component reuse**          | Are there elements that look like they should be the same component but aren't? Inconsistent card styles, button treatments, list items? |
-| **Visual language cohesion** | Does the interface feel like one designer made it? Or does it feel assembled from different kits?                                        |
-
-### Step 5: User Context
-
-This is where empathy meets analysis:
-
-- **How does this design make the user feel?** Name the emotion. "Overwhelmed," "confused," "unsupported," "rushed."
-- **What is the user's likely state of mind?** Anxious? Focused? Browsing casually? Under time pressure?
-- **Does the interface respect that state?** Or does it add unnecessary cognitive burden?
-- **What would "uncommon care" look like here?** What would surprise the user with thoughtfulness?
-
----
-
-## Output Format
-
-Structure the critique as:
-
-```
-## Context
-[1-2 sentences on what this is and who it's for]
-
-## First Impressions
-[1 paragraph, direct and honest]
-
-## Visual Design
-[Each issue as: **Issue Name** — observation. Impact. Opportunity.]
-
-## Interface Design
-[Each issue framed as missed opportunities]
-
-## Consistency & Conventions
-[Pattern and convention issues]
-
-## User Context
-[Empathy-driven observations]
-
-## Top Opportunities
-[Ranked list of the 3-5 highest-impact changes, each in one sentence]
-```
-
----
-
-## Voice Rules
-
-These define how the critique sounds. Follow them strictly.
-
-### BE:
-
-- **Specific** — "There are six columns of data per row" not "there's a lot of data"
-- **Decisive** — "This is overwhelming" not "this might feel overwhelming"
-- **Factual first** — State what you see before judging it. Count elements, name colors, measure sizes. The specificity of the observation is the quality of the critique.
-- **Impact-aware** — Connect every observation to how it affects the user
-- **Constructive** — Every problem gets an opportunity. Never just tear down.
-- **Quantitative** — Count elements, name colors, measure relative sizes
-- **Warm but direct** — A builder reviewing work with a builder they respect. Honest because the goal is to make the work great.
-- **Simple in language** — Everyday vocabulary. No academic jargon. "Progressive disclosure" is fine. "The affordance signifiers lack semiotic clarity" is not.
-
-### DO NOT:
-
-- **Hedge** — No "maybe," "perhaps," "it could be argued that"
-- **Apologize** — No "unfortunately" or "sadly"
-- **Be vague** — No "the design feels off" without saying exactly what and why
-- **Prescribe without reasoning** — Never say "change X to Y" without explaining the why
-- **Add praise padding** — Don't sandwich criticism with empty compliments. If something works well, say so specifically. But don't manufacture positivity.
-- **Use jargon without explanation** — Keep it accessible
-- **Use life-coach energy** — No "10x your design" or universal truths. Stay grounded and real.
-
-### Tone
-
-Direct, analytical, and honest — rooted in wanting the work to be great. No cruelty, no condescension, no hand-holding. Short blunt sentences when something is clearly wrong. Flowing when exploring nuance. Use the em dash to land a point or add context before a verdict.
-
----
-
-## Severity Guide
-
-Not all issues are equal. When listing issues, implicitly order by impact:
-
-1. **Structural** — Problems with information architecture, missing functionality, wrong mental model. These change what the interface _is_.
-2. **Behavioral** — Problems with how the interface responds, flows, or communicates. These change how the interface _feels_.
-3. **Visual** — Problems with color, type, spacing, shadows. These change how the interface _looks_.
-
-A structural issue (wrong mental model for a divorce app) matters more than a visual one (shadow is slightly muddy). Prioritize accordingly.
-
----
-
-## Frameworks to Reference
-
-These are the conceptual tools behind the critique. You don't need to name them explicitly, but they should inform your analysis:
-
-### Noticing
-
-The foundation. Most people glance; good designers see. Count the elements. Name the colors. Measure the spacing. The specificity of your observation is the quality of your critique.
-
-### Industry Standards
-
-Every popular app in a category sets an invisible bar. Users carry those expectations into every new app. A notes app is compared to Apple Notes, Bear, Notion. A dashboard is compared to Stripe, Linear, Vercel. If the design falls below the bar users already carry, it feels amateur — even if the user can't articulate why.
-
-Ask: "What would the best-in-class app in this category do here?"
-
-### Facets of Quality
-
-Quality isn't one thing. It's a collection of attributes. For any given interface, identify which 3-5 attributes matter most. Not every app needs to be "playful" — but every app needs to be clear about what it values and execute on those values consistently.
-
-### Uncommon Care
-
-The difference between good and great is often invisible to people who haven't seen great. Look for moments where the designer could have gone further — micro-interactions, empty states, error messages, transitions, loading states, edge cases. These are where "uncommon care" lives.
-
-### Separation of Concerns
-
-Visual design, interface design, and interaction design are different skills solving different problems. A beautiful interface can be unusable. A usable interface can be ugly. Critique each dimension on its own terms before synthesizing.
-
----
-
-## Examples of Good Critique Language
-
-**Visual:**
-
-> **Muddy shadows** — The card shadows use a large blur radius with low opacity, creating a hazy, unfocused look rather than crisp depth. This makes the cards feel like they're floating in fog rather than sitting on a surface. Tighter, more directional shadows would give the layout a cleaner sense of elevation.
-
-**Interface:**
-
-> **No focusing mechanism** — All four content areas compete equally for attention. There's no visual entry point — no element says "start here." The user's eye bounces between the sidebar, the header stats, the chart, and the table with no clear priority. A stronger size or weight differential on the primary content area would give the layout a clear narrative.
-
-**User context:**
-
-> **Demoralizing progress display** — Showing "10 / 47 tasks complete" immediately communicates that 37 tasks remain. For a process that takes weeks and involves one of the most stressful experiences in a person's life, this is demoralizing. "Complete Phase 1 of 4" is psychologically very different — it frames the same progress as achievable milestones rather than an endless checklist.
-
-**Opportunity:**
-
-> We're missing a huge opportunity to reward progress. Completed steps could collapse or fade, making the remaining work feel smaller — not larger — as the user advances.
diff --git a/.cursor/skills/frontend-design/SKILL.md b/.cursor/skills/frontend-design/SKILL.md
deleted file mode 100644
index f27d3ff61..000000000
--- a/.cursor/skills/frontend-design/SKILL.md
+++ /dev/null
@@ -1,202 +0,0 @@
----
-name: frontend-design
-description: >-
-  Create distinctive, production-grade frontend interfaces with high design
-  quality. Use when the user asks to build web components, pages, or
-  applications and wants visually striking, polished results that avoid generic
-  AI aesthetics.
-metadata:
-  author: Quintessential
-  version: '3.0.0'
----
-
-# Frontend Design
-
-Generate creative, production-grade frontend code with exceptional aesthetic quality. Every interface should feel intentionally designed — not templated.
-
-## Design Thinking
-
-Before coding, commit to a clear direction:
-
-- **Purpose**: What problem does this solve? Who uses it?
-- **Tone**: Pick a strong aesthetic — brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc. Use these as inspiration but design something true to the chosen direction.
-- **Differentiation**: What makes this unforgettable? What's the one thing someone remembers?
-
-**Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.** Match implementation complexity to the vision: maximalist designs need elaborate effects; minimal designs need precision in spacing, typography, and subtle details.
-
-## Aesthetics Guidelines
-
-### Typography
-
-Choose what the user wants first.
-
-**Load fonts via `next/font`** — never from raw `<link>` tags or `@import` in CSS. For fonts not available through the Google Fonts API (e.g. Google Sans), download the files and use `next/font/local`:
-
-```tsx
-import localFont from 'next/font/local';
-
-const googleSans = localFont({
-  src: [
-    { path: '../fonts/GoogleSans-Regular.ttf', weight: '400', style: 'normal' },
-    { path: '../fonts/GoogleSans-Medium.ttf', weight: '500', style: 'normal' },
-    { path: '../fonts/GoogleSans-Bold.ttf', weight: '700', style: 'normal' },
-  ],
-  variable: '--font-google-sans',
-  display: 'swap',
-});
-```
-
-**Critical: CSS variable scoping.** The font variable class is applied on `<body>` via `className`. In Tailwind v4, `@theme inline` maps theme tokens to CSS variables. If you apply `font-sans` on `html`, it cannot read a variable set on `body` (CSS variables don't flow upward). Always apply `font-sans` on `body`, not `html`:
-
-```css
-/* globals.css — WRONG */
-html {
-  @apply font-sans;
-}
-
-/* globals.css — CORRECT */
-body {
-  @apply font-sans;
-}
-```
-
-In the `@theme inline` block, use a distinct variable name to avoid circular references:
-
-```css
-@theme inline {
-  --font-sans: var(--font-google-sans);
-}
-```
-
-Never default to Inter, Roboto, Arial, or system fonts. Never converge on the same font (e.g. Space Grotesk) across designs. Every project gets a unique pairing.
-
-### Color & Theme
-
-Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
-
-**Define CSS variables in `globals.css`**, wire them through `tailwind.config.js`, and use the resulting Tailwind utilities:
-
-```css
-/* globals.css */
-:root {
-  --color-surface: #0a0a0a;
-  --color-primary: #e4ff1a;
-  --color-muted: #71717a;
-}
-```
-
-```js
-/* tailwind.config.js */
-colors: {
-  surface: 'var(--color-surface)',
-  primary: 'var(--color-primary)',
-  muted: 'var(--color-muted)',
-}
-```
-
-Then use `bg-surface`, `text-primary`, `border-muted` etc. in components. Never use raw `var()` in inline styles when a Tailwind utility can express it.
-
-Vary between light and dark themes across designs. Avoid cliched schemes (especially purple gradients on white).
-
-### Motion & Interaction
-
-Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
-
-- **CSS-first**: Use CSS transitions and `animation-delay` for staggered reveals, hover states, scroll-triggered effects
-- **Motion library** (Framer Motion / Motion): Use for complex orchestration in React when CSS alone falls short
-- Surprise with scroll-triggered animations and hover states that feel tactile
-
-### Spatial Composition
-
-Break predictable layouts. Use asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space OR controlled density — whatever serves the aesthetic.
-
-### Backgrounds & Texture
-
-Create atmosphere. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays, decorative borders — choose what fits the tone. Never default to flat solid-color backgrounds when the design calls for depth.
-
-## Project Integration Rules
-
-These rules ensure the skill's creative output integrates cleanly with existing project architecture.
-
-### Styling: Tailwind + `cn()`
-
-All styling goes through Tailwind utilities. Use the project's `cn()` helper for conditional classes:
-
-```tsx
-import { cn } from '@/lib/utils';
-
-export function Card({ variant, className, ...props }: CardProps) {
-  return (
-    <div
-      className={cn(
-        'rounded-2xl border border-white/10 backdrop-blur-sm',
-        variant === 'elevated' && 'shadow-2xl shadow-primary/20',
-        variant === 'flat' && 'bg-surface/50',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-```
-
-Reach for raw CSS (in `globals.css`) only when Tailwind cannot express the effect — complex gradients, `@keyframes`, noise SVG filters, or pseudo-element tricks. Keep raw CSS minimal and co-located in globals, not scattered in component files.
-
-### Avoid Inline Styles
-
-```tsx
-// BAD
-<div style={{ background: 'var(--color-surface)', marginTop: 20 }}>
-
-// GOOD
-<div className="bg-surface mt-5">
-```
-
-### Client / Server Boundary
-
-Components are server components by default. Only add `'use client'` for components that need interactivity (hooks, event handlers, browser APIs).
-
-Push `'use client'` to the **lowest leaf** that actually needs it. A page with a hero animation should look like:
-
-```
-page.tsx           → server component (fetches data, renders layout)
-  HeroSection.tsx  → server component (static markup + Tailwind animations)
-  HeroActions.tsx  → 'use client' (interactive buttons, hover effects needing JS)
-```
-
-If an effect can be achieved with pure CSS (`transition`, `animation`, `@keyframes`, `:hover`), keep the component as a server component.
-
-### Component Structure
-
-- Place components in `components/[feature]/` following the project's feature-based organization
-- Aim for <200 lines per component — extract sub-components for complex layouts
-- One component per file (small helpers co-located are fine)
-- Use PascalCase for component files, kebab-case for directories
-
-### Shared UI Library
-
-Check if the project has a shared UI library (`@your-org/ui` or similar) before creating new base components. Use existing shared components as foundations and customize via `className` overrides, composition, or variant props. Only create new components in `components/ui/` when the shared library doesn't cover the need.
-
-### Scrollbar Stability
-
-Use `overflow-y: scroll` on the main scrollable container so the scrollbar always reserves its space — no layout shift when content changes between overflowing and not. Pair with global CSS that makes the scrollbar invisible by default (transparent track and thumb) and only reveals a thin, pastel-colored thumb on hover. Avoid `scrollbar-gutter: stable` — it reserves space based on the browser's default scrollbar width, which conflicts with custom thin scrollbar overrides (`::-webkit-scrollbar { width: 6px }`) and causes a width mismatch.
-
-### Cursor Affordance
-
-All interactive elements (`button`, `a`, `[role="button"]`, `select`, `summary`) must show `cursor: pointer` on hover. Set this as a global rule in `globals.css` rather than per-component — one declaration covers the entire app. Never leave a clickable element with the default arrow cursor.
-
-### Text Truncation in Tables
-
-Table cells ignore `overflow: hidden`. To truncate text with ellipsis inside a `<td>`, wrap cell content in a `<div className="truncate">` inside the `TableCell` component. For cells with flex layouts (e.g. title + badge), add `min-w-0` to the flex container and `truncate` to the text element so the flex child can shrink.
-
-## Anti-Patterns
-
-Never produce:
-
-- Overused font families (Inter, Roboto, Arial, system-ui)
-- Purple gradients on white backgrounds
-- Cookie-cutter card grids with identical spacing
-- Generic hero sections with stock patterns
-- Inline `style={{ }}` for things Tailwind can handle
-- `'use client'` on an entire page when only a button needs interactivity
-- Raw `var()` in inline styles instead of Tailwind utilities wired to CSS variables
diff --git a/.cursor/skills/ui-patterns/SKILL.md b/.cursor/skills/ui-patterns/SKILL.md
deleted file mode 100644
index f3a849e9d..000000000
--- a/.cursor/skills/ui-patterns/SKILL.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-name: quintessential-ui-patterns
-description: 'Advanced UI implementation patterns for CSS pseudo-elements, View Transitions, morphing icons, container animations, and predictive prefetching. Use when working with pseudo-elements, ::before/::after, View Transitions API, morphing SVG icons, animated container dimensions, or predictive prefetching. Triggers on: pseudo-element, ::before, ::after, view-transition, ::backdrop, ::placeholder, ::selection, ::marker, ::first-line, morphing, icon animation, SVG morph, container animation, ResizeObserver, useMeasure, prefetch, trajectory, hitSlop, foresight.'
-metadata:
-  author: Quintessential
-  version: '3.0.0'
-  short-description: Advanced UI patterns for pseudo-elements, morphing icons, containers, and prefetching
----
-
-# UI Patterns
-
-Quintessential's advanced UI implementation patterns. 37 rules across 4 categories for CSS pseudo-elements, morphing icons, container animations, and predictive prefetching.
-
-Individual rule files with code examples are in the `rules/` subfolder.
-
-## 1. CSS Pseudo Elements (MEDIUM)
-
-Leveraging `::before`, `::after`, View Transitions API, and native pseudo-elements to reduce DOM nodes and improve transitions.
-
-| Rule                               | Summary                                                            |
-| ---------------------------------- | ------------------------------------------------------------------ |
-| `pseudo-content-required`          | `::before`/`::after` require `content` property to render          |
-| `pseudo-over-dom-node`             | Use pseudo-elements for decoration instead of extra DOM nodes      |
-| `pseudo-position-relative-parent`  | Parent needs `position: relative` for absolute pseudo-elements     |
-| `pseudo-z-index-layering`          | Z-index for correct pseudo-element layering                        |
-| `pseudo-hit-target-expansion`      | Negative inset values expand hit targets without extra markup      |
-| `pseudo-marker-styling`            | Use `::marker` for custom list bullet styles                       |
-| `pseudo-first-line-styling`        | Use `::first-line` for typographic treatments                      |
-| `transition-name-required`         | View transitions need `view-transition-name`                       |
-| `transition-name-unique`           | Each transition name unique during transition                      |
-| `transition-name-cleanup`          | Remove transition name after completion                            |
-| `transition-over-js-library`       | Prefer View Transitions API over JS libraries for page transitions |
-| `transition-style-pseudo-elements` | Style `::view-transition-group` for custom animations              |
-| `native-backdrop-styling`          | Use `::backdrop` for dialog/popover backgrounds                    |
-| `native-placeholder-styling`       | Use `::placeholder` for input styling                              |
-| `native-selection-styling`         | Use `::selection` for text selection styling                       |
-
-## 2. Morphing Icons (LOW)
-
-Building icon components that morph between any two icons through SVG line transformation. All icons share a 3-line structure.
-
-| Rule                           | Summary                                                                                                |
-| ------------------------------ | ------------------------------------------------------------------------------------------------------ |
-| `morphing-three-lines`         | Every icon uses exactly 3 SVG lines                                                                    |
-| `morphing-use-collapsed`       | Unused lines use collapsed constant (`{ x1: CENTER, y1: CENTER, x2: CENTER, y2: CENTER, opacity: 0 }`) |
-| `morphing-consistent-viewbox`  | All icons share same viewBox (14x14)                                                                   |
-| `morphing-group-variants`      | Rotational variants share group and base lines                                                         |
-| `morphing-spring-rotation`     | Spring physics for grouped icon rotation                                                               |
-| `morphing-reduced-motion`      | Respect `prefers-reduced-motion`                                                                       |
-| `morphing-jump-non-grouped`    | Instant rotation jump between non-grouped icons                                                        |
-| `morphing-strokelinecap-round` | Round stroke line caps                                                                                 |
-| `morphing-aria-hidden`         | Icon SVGs are `aria-hidden`                                                                            |
-
-## 3. Container Animation (MEDIUM)
-
-Animating container width and height using a measure-and-animate pattern with ResizeObserver and Motion.
-
-| Rule                            | Summary                                                         |
-| ------------------------------- | --------------------------------------------------------------- |
-| `container-two-div-pattern`     | Outer animated div, inner measured div; never same element      |
-| `container-guard-initial-zero`  | Guard bounds === 0 on initial render, fall back to `"auto"`     |
-| `container-use-resize-observer` | Use ResizeObserver for measurement, not `getBoundingClientRect` |
-| `container-overflow-hidden`     | Set `overflow: hidden` on animated container during transitions |
-| `container-no-excessive-use`    | Use sparingly: buttons, accordions, interactive elements        |
-| `container-callback-ref`        | Use callback ref (not `useRef`) for measurement hooks           |
-| `container-transition-delay`    | Add small delay for natural catching-up feel                    |
-
-## 4. Predictive Prefetching (MEDIUM)
-
-Loading content before the user clicks by analyzing cursor trajectory.
-
-| Rule                             | Summary                                                  |
-| -------------------------------- | -------------------------------------------------------- |
-| `prefetch-trajectory-over-hover` | Trajectory prediction over hover; reclaims 100-200ms     |
-| `prefetch-not-everything`        | Prefetch by intent, not viewport; avoid wasted bandwidth |
-| `prefetch-hit-slop`              | Use hitSlop to trigger predictions earlier               |
-| `prefetch-touch-fallback`        | Fall back gracefully on touch devices (no cursor)        |
-| `prefetch-keyboard-tab`          | Prefetch on keyboard navigation when focus approaches    |
-| `prefetch-use-selectively`       | Use predictive prefetching where latency is noticeable   |
-
-## How to Use
-
-Read individual rule files in `rules/` for detailed explanations and code examples:
-
-```
-rules/pseudo-content-required.md
-rules/container-two-div-pattern.md
-rules/prefetch-trajectory-over-hover.md
-```
-
-Each rule file contains:
-
-- Brief explanation of why it matters
-- Incorrect code example with explanation
-- Correct code example with explanation
-
-Reference: [MDN Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements), [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API), [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver), [ForesightJS](https://foresightjs.com), [Motion Documentation](https://motion.dev)
diff --git a/.cursor/skills/ui-patterns/rules/container-callback-ref.md b/.cursor/skills/ui-patterns/rules/container-callback-ref.md
deleted file mode 100644
index c1820b478..000000000
--- a/.cursor/skills/ui-patterns/rules/container-callback-ref.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Use Callback Ref for Measurement
-impact: MEDIUM
-tags: container, ref, callback
----
-
-## Use Callback Ref for Measurement
-
-Use a callback ref (not useRef) for measurement hooks so the observer attaches when the DOM node is ready.
-
-**Incorrect (useRef may be null on first effect):**
-
-```tsx
-const ref = useRef(null);
-useEffect(() => {
-  if (!ref.current) return;
-  observer.observe(ref.current);
-}, []);
-```
-
-**Correct (callback ref guarantees node):**
-
-```tsx
-const [element, setElement] = useState(null);
-const ref = useCallback(node => setElement(node), []);
-useEffect(() => {
-  if (!element) return;
-  observer.observe(element);
-  return () => observer.disconnect();
-}, [element]);
-```
diff --git a/.cursor/skills/ui-patterns/rules/container-guard-initial-zero.md b/.cursor/skills/ui-patterns/rules/container-guard-initial-zero.md
deleted file mode 100644
index 1e9061ddd..000000000
--- a/.cursor/skills/ui-patterns/rules/container-guard-initial-zero.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Guard Against Zero on Initial Render
-impact: HIGH
-tags: container, measure, initial-render
----
-
-## Guard Against Zero on Initial Render
-
-On initial render, measured bounds are 0. Guard against this to prevent animating from 0 to actual size.
-
-**Incorrect (animates from 0 on mount):**
-
-```tsx
-<motion.div animate={{ width: bounds.width }}>
-  <div ref={ref}>{children}</div>
-</motion.div>
-```
-
-**Correct (falls back to auto on first frame):**
-
-```tsx
-<motion.div animate={{ width: bounds.width > 0 ? bounds.width : 'auto' }}>
-  <div ref={ref}>{children}</div>
-</motion.div>
-```
diff --git a/.cursor/skills/ui-patterns/rules/container-no-excessive-use.md b/.cursor/skills/ui-patterns/rules/container-no-excessive-use.md
deleted file mode 100644
index a262b77c2..000000000
--- a/.cursor/skills/ui-patterns/rules/container-no-excessive-use.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Use Animated Bounds Sparingly
-impact: MEDIUM
-tags: container, performance, restraint
----
-
-## Use Animated Bounds Sparingly
-
-Animated bounds is a subtle effect. Use it for buttons, accordions, and interactive elements — not everywhere.
-
-**Good use cases:** loading state buttons, expandable sections, accordions, FAQs, content reveals.
-
-**Bad use cases:** every container on the page, static layouts, elements that don't change size.
diff --git a/.cursor/skills/ui-patterns/rules/container-overflow-hidden.md b/.cursor/skills/ui-patterns/rules/container-overflow-hidden.md
deleted file mode 100644
index 725aa345c..000000000
--- a/.cursor/skills/ui-patterns/rules/container-overflow-hidden.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Overflow Hidden on Animated Container
-impact: MEDIUM
-tags: container, overflow, clip
----
-
-## Overflow Hidden on Animated Container
-
-Set overflow: hidden on the animated outer container to clip content during size transitions.
-
-**Incorrect (content overflows during animation):**
-
-```tsx
-<motion.div animate={{ height: bounds.height }}>
-  <div ref={ref}>{children}</div>
-</motion.div>
-```
-
-**Correct (clipped during transition):**
-
-```tsx
-<motion.div animate={{ height: bounds.height }} style={{ overflow: 'hidden' }}>
-  <div ref={ref}>{children}</div>
-</motion.div>
-```
diff --git a/.cursor/skills/ui-patterns/rules/container-transition-delay.md b/.cursor/skills/ui-patterns/rules/container-transition-delay.md
deleted file mode 100644
index b56bf2fa0..000000000
--- a/.cursor/skills/ui-patterns/rules/container-transition-delay.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Add Delay for Natural Container Transitions
-impact: LOW
-tags: container, delay, transition, natural
----
-
-## Add Delay for Natural Container Transitions
-
-Add a small delay to container size animations so the transition feels like it's catching up to the content.
-
-**Correct:**
-
-```tsx
-<motion.div
-  animate={{ height: bounds.height }}
-  transition={{ duration: 0.2, delay: 0.05 }}
-  style={{ overflow: 'hidden' }}
->
-  <div ref={ref}>{children}</div>
-</motion.div>
-```
diff --git a/.cursor/skills/ui-patterns/rules/container-two-div-pattern.md b/.cursor/skills/ui-patterns/rules/container-two-div-pattern.md
deleted file mode 100644
index f2983c438..000000000
--- a/.cursor/skills/ui-patterns/rules/container-two-div-pattern.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Two-Div Pattern for Animated Bounds
-impact: HIGH
-tags: container, measure, motion
----
-
-## Two-Div Pattern for Animated Bounds
-
-Use an outer animated div and an inner measured div. Never measure and animate the same element.
-
-**Incorrect (measure and animate same element — creates feedback loop):**
-
-```tsx
-function AnimatedContainer({ children }) {
-  const [ref, bounds] = useMeasure();
-  return (
-    <motion.div ref={ref} animate={{ height: bounds.height }}>
-      {children}
-    </motion.div>
-  );
-}
-```
-
-**Correct (separate measure and animate targets):**
-
-```tsx
-function AnimatedContainer({ children }) {
-  const [ref, bounds] = useMeasure();
-  return (
-    <motion.div animate={{ height: bounds.height }}>
-      <div ref={ref}>{children}</div>
-    </motion.div>
-  );
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/container-use-resize-observer.md b/.cursor/skills/ui-patterns/rules/container-use-resize-observer.md
deleted file mode 100644
index c56ecc3d5..000000000
--- a/.cursor/skills/ui-patterns/rules/container-use-resize-observer.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Use ResizeObserver for Measurement
-impact: MEDIUM
-tags: container, resize-observer, performance
----
-
-## Use ResizeObserver for Measurement
-
-Use ResizeObserver to track element dimensions. It fires on resize without causing layout thrashing.
-
-**Incorrect (measuring on every render):**
-
-```tsx
-function useMeasure(ref) {
-  const [bounds, setBounds] = useState({ width: 0, height: 0 });
-  useEffect(() => {
-    if (ref.current) {
-      const rect = ref.current.getBoundingClientRect();
-      setBounds({ width: rect.width, height: rect.height });
-    }
-  });
-  return bounds;
-}
-```
-
-**Correct (ResizeObserver):**
-
-```tsx
-function useMeasure() {
-  const [element, setElement] = useState(null);
-  const [bounds, setBounds] = useState({ width: 0, height: 0 });
-  const ref = useCallback(node => setElement(node), []);
-
-  useEffect(() => {
-    if (!element) return;
-    const observer = new ResizeObserver(([entry]) => {
-      setBounds({
-        width: entry.contentRect.width,
-        height: entry.contentRect.height,
-      });
-    });
-    observer.observe(element);
-    return () => observer.disconnect();
-  }, [element]);
-
-  return [ref, bounds];
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-aria-hidden.md b/.cursor/skills/ui-patterns/rules/morphing-aria-hidden.md
deleted file mode 100644
index c71fd92b1..000000000
--- a/.cursor/skills/ui-patterns/rules/morphing-aria-hidden.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Aria Hidden on Icon SVGs
-impact: LOW
-tags: morphing, a11y, aria
----
-
-## Aria Hidden on Icon SVGs
-
-Icon SVGs should be aria-hidden since they're decorative.
-
-**Incorrect (no aria attribute):**
-
-```tsx
-<svg width={size} height={size}>
-  ...
-</svg>
-```
-
-**Correct (aria-hidden):**
-
-```tsx
-<svg width={size} height={size} aria-hidden="true">
-  ...
-</svg>
-```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-consistent-viewbox.md b/.cursor/skills/ui-patterns/rules/morphing-consistent-viewbox.md
deleted file mode 100644
index 8c7bbbd0a..000000000
--- a/.cursor/skills/ui-patterns/rules/morphing-consistent-viewbox.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Consistent ViewBox Size
-impact: HIGH
-tags: morphing, viewbox, svg
----
-
-## Consistent ViewBox Size
-
-All icons must use the same viewBox (14x14 recommended).
-
-**Incorrect (mixed scales):**
-
-```ts
-const icon1 = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] }; // 14x14
-const icon2 = { lines: [{ x1: 4, y1: 14, x2: 24, y2: 14 }, ...] }; // 28x28
-```
-
-**Correct (consistent scale):**
-
-```ts
-const VIEWBOX_SIZE = 14;
-const CENTER = 7;
-```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-group-variants.md b/.cursor/skills/ui-patterns/rules/morphing-group-variants.md
deleted file mode 100644
index 1987e8b6d..000000000
--- a/.cursor/skills/ui-patterns/rules/morphing-group-variants.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: Shared Group for Rotational Variants
-impact: HIGH
-tags: morphing, group, rotation
----
-
-## Shared Group for Rotational Variants
-
-Icons that are rotational variants MUST share the same group and base lines.
-
-**Incorrect (different line definitions):**
-
-```ts
-const arrowRight = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] };
-const arrowDown = { lines: [{ x1: 7, y1: 2, x2: 7, y2: 12 }, ...] };
-```
-
-**Correct (shared base lines):**
-
-```ts
-const arrowLines: [IconLine, IconLine, IconLine] = [
-  { x1: 2, y1: 7, x2: 12, y2: 7 },
-  { x1: 7.5, y1: 2.5, x2: 12, y2: 7 },
-  { x1: 7.5, y1: 11.5, x2: 12, y2: 7 },
-];
-
-const icons = {
-  'arrow-right': { lines: arrowLines, rotation: 0, group: 'arrow' },
-  'arrow-down': { lines: arrowLines, rotation: 90, group: 'arrow' },
-  'arrow-left': { lines: arrowLines, rotation: 180, group: 'arrow' },
-  'arrow-up': { lines: arrowLines, rotation: -90, group: 'arrow' },
-};
-```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-jump-non-grouped.md b/.cursor/skills/ui-patterns/rules/morphing-jump-non-grouped.md
deleted file mode 100644
index 67f7a22b3..000000000
--- a/.cursor/skills/ui-patterns/rules/morphing-jump-non-grouped.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Instant Jump for Non-Grouped Icons
-impact: MEDIUM
-tags: morphing, jump, group
----
-
-## Instant Jump for Non-Grouped Icons
-
-When transitioning between icons NOT in the same group, rotation should jump instantly.
-
-**Incorrect (always animates rotation):**
-
-```tsx
-useEffect(() => {
-  rotation.set(definition.rotation ?? 0);
-}, [definition]);
-```
-
-**Correct (jumps when not grouped):**
-
-```tsx
-useEffect(() => {
-  if (shouldRotate) {
-    rotation.set(definition.rotation ?? 0);
-  } else {
-    rotation.jump(definition.rotation ?? 0);
-  }
-}, [definition, shouldRotate]);
-```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-reduced-motion.md b/.cursor/skills/ui-patterns/rules/morphing-reduced-motion.md
deleted file mode 100644
index a1212ae48..000000000
--- a/.cursor/skills/ui-patterns/rules/morphing-reduced-motion.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Reduced Motion Support for Icons
-impact: MEDIUM
-tags: morphing, a11y, reduced-motion
----
-
-## Reduced Motion Support for Icons
-
-Respect prefers-reduced-motion by disabling animations.
-
-**Incorrect (always animates):**
-
-```tsx
-function MorphingIcon({ icon }: Props) {
-  return <motion.line animate={...} transition={{ duration: 0.4 }} />;
-}
-```
-
-**Correct (respects preference):**
-
-```tsx
-function MorphingIcon({ icon }: Props) {
-  const reducedMotion = useReducedMotion() ?? false;
-  const activeTransition = reducedMotion ? { duration: 0 } : transition;
-
-  return <motion.line animate={...} transition={activeTransition} />;
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-spring-rotation.md b/.cursor/skills/ui-patterns/rules/morphing-spring-rotation.md
deleted file mode 100644
index 41b01fdb2..000000000
--- a/.cursor/skills/ui-patterns/rules/morphing-spring-rotation.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-title: Spring Physics for Rotation
-impact: MEDIUM
-tags: morphing, spring, rotation
----
-
-## Spring Physics for Rotation
-
-Rotation between grouped icons should use spring physics for natural motion.
-
-**Incorrect (duration-based rotation):**
-
-```tsx
-<motion.g animate={{ rotate: rotation }} transition={{ duration: 0.3 }} />
-```
-
-**Correct (spring rotation):**
-
-```tsx
-const rotation = useSpring(definition.rotation ?? 0, activeTransition);
-
-<motion.g style={{ rotate: rotation, transformOrigin: 'center' }} />;
-```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-strokelinecap-round.md b/.cursor/skills/ui-patterns/rules/morphing-strokelinecap-round.md
deleted file mode 100644
index 87a9fdb15..000000000
--- a/.cursor/skills/ui-patterns/rules/morphing-strokelinecap-round.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-title: Round Stroke Line Caps
-impact: LOW
-tags: morphing, stroke, svg
----
-
-## Round Stroke Line Caps
-
-Lines should use strokeLinecap="round" for polished endpoints.
-
-**Incorrect (butt caps):**
-
-```tsx
-<motion.line strokeLinecap="butt" />
-```
-
-**Correct (round caps):**
-
-```tsx
-<motion.line strokeLinecap="round" />
-```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-three-lines.md b/.cursor/skills/ui-patterns/rules/morphing-three-lines.md
deleted file mode 100644
index 92b35db15..000000000
--- a/.cursor/skills/ui-patterns/rules/morphing-three-lines.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: Icons Must Use Exactly Three Lines
-impact: HIGH
-tags: morphing, svg, structure
----
-
-## Icons Must Use Exactly Three Lines
-
-Every icon MUST use exactly 3 lines. No more, no fewer.
-
-**Incorrect (only 2 lines):**
-
-```ts
-const checkIcon = {
-  lines: [
-    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
-    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
-  ],
-};
-```
-
-**Correct (3 lines with collapsed):**
-
-```ts
-const checkIcon = {
-  lines: [
-    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
-    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
-    collapsed,
-  ],
-};
-```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-use-collapsed.md b/.cursor/skills/ui-patterns/rules/morphing-use-collapsed.md
deleted file mode 100644
index 548dace6f..000000000
--- a/.cursor/skills/ui-patterns/rules/morphing-use-collapsed.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: Use Collapsed Constant for Unused Lines
-impact: HIGH
-tags: morphing, collapsed, structure
----
-
-## Use Collapsed Constant for Unused Lines
-
-Unused lines must use the collapsed constant, not omission or null.
-
-**Incorrect (null for unused):**
-
-```ts
-const minusIcon = {
-  lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, null, null],
-};
-```
-
-**Correct (collapsed constant):**
-
-```ts
-const minusIcon = {
-  lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, collapsed, collapsed],
-};
-```
diff --git a/.cursor/skills/ui-patterns/rules/native-backdrop-styling.md b/.cursor/skills/ui-patterns/rules/native-backdrop-styling.md
deleted file mode 100644
index f2fabd0c8..000000000
--- a/.cursor/skills/ui-patterns/rules/native-backdrop-styling.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Use ::backdrop for Dialog Backgrounds
-impact: MEDIUM
-tags: native, backdrop, dialog
----
-
-## Use ::backdrop for Dialog Backgrounds
-
-Use ::backdrop pseudo-element for dialog/popover backgrounds.
-
-**Incorrect (extra overlay node):**
-
-```tsx
-<>
-  <div className={styles.overlay} onClick={close} />
-  <dialog className={styles.dialog}>{children}</dialog>
-</>
-```
-
-**Correct (native ::backdrop):**
-
-```css
-dialog::backdrop {
-  background: var(--black-a6);
-  backdrop-filter: blur(4px);
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/native-placeholder-styling.md b/.cursor/skills/ui-patterns/rules/native-placeholder-styling.md
deleted file mode 100644
index 25d46a101..000000000
--- a/.cursor/skills/ui-patterns/rules/native-placeholder-styling.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Use ::placeholder for Input Styling
-impact: LOW
-tags: native, placeholder, input
----
-
-## Use ::placeholder for Input Styling
-
-Use ::placeholder for input placeholder styling, not wrapper elements.
-
-**Incorrect (custom placeholder node):**
-
-```tsx
-<div className={styles.inputWrapper}>
-  {!value && <span className={styles.placeholder}>Enter text...</span>}
-  <input value={value} />
-</div>
-```
-
-**Correct (native ::placeholder):**
-
-```css
-input::placeholder {
-  color: var(--gray-9);
-  opacity: 1;
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/native-selection-styling.md b/.cursor/skills/ui-patterns/rules/native-selection-styling.md
deleted file mode 100644
index 4af459b93..000000000
--- a/.cursor/skills/ui-patterns/rules/native-selection-styling.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: Use ::selection for Text Styling
-impact: LOW
-tags: native, selection, text
----
-
-## Use ::selection for Text Styling
-
-Use ::selection for text selection styling.
-
-**Correct:**
-
-```css
-::selection {
-  background: var(--blue-a5);
-  color: var(--gray-12);
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-hit-slop.md b/.cursor/skills/ui-patterns/rules/prefetch-hit-slop.md
deleted file mode 100644
index d96580884..000000000
--- a/.cursor/skills/ui-patterns/rules/prefetch-hit-slop.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Use hitSlop to Trigger Predictions Earlier
-impact: MEDIUM
-tags: prefetch, hit-slop, target
----
-
-## Use hitSlop to Trigger Predictions Earlier
-
-Expand the invisible prediction area around elements with hitSlop to start loading sooner.
-
-**Incorrect (tight prediction area):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => prefetch(),
-  hitSlop: 0,
-});
-```
-
-**Correct (expanded prediction area):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => prefetch(),
-  hitSlop: 20,
-});
-```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-keyboard-tab.md b/.cursor/skills/ui-patterns/rules/prefetch-keyboard-tab.md
deleted file mode 100644
index e66e13613..000000000
--- a/.cursor/skills/ui-patterns/rules/prefetch-keyboard-tab.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-title: Prefetch on Keyboard Navigation
-impact: MEDIUM
-tags: prefetch, keyboard, tab, a11y
----
-
-## Prefetch on Keyboard Navigation
-
-Monitor focus changes and prefetch when the user is a few tab stops away from a registered element.
-
-**Correct (tab-aware prefetching):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => router.prefetch('/settings'),
-  name: 'settings-link',
-  // Tab prediction fires when focus approaches
-});
-```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-not-everything.md b/.cursor/skills/ui-patterns/rules/prefetch-not-everything.md
deleted file mode 100644
index 7cdfc2ae0..000000000
--- a/.cursor/skills/ui-patterns/rules/prefetch-not-everything.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Prefetch by Intent, Not Viewport
-impact: HIGH
-tags: prefetch, viewport, intent, bundle-size
----
-
-## Prefetch by Intent, Not Viewport
-
-Don't prefetch everything visible in the viewport. Prefetch based on user intent to avoid wasted bandwidth.
-
-**Incorrect (prefetch all visible links):**
-
-```tsx
-<Link href="/page" prefetch={true}>
-  Page
-</Link>
-```
-
-**Correct (intent-based prefetching):**
-
-```tsx
-<Link href="/page" prefetch={false}>
-  Page
-</Link>
-// Let trajectory/hover prediction handle it
-```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-touch-fallback.md b/.cursor/skills/ui-patterns/rules/prefetch-touch-fallback.md
deleted file mode 100644
index 49798ea3b..000000000
--- a/.cursor/skills/ui-patterns/rules/prefetch-touch-fallback.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Fall Back Gracefully on Touch Devices
-impact: MEDIUM
-tags: prefetch, touch, mobile, fallback
----
-
-## Fall Back Gracefully on Touch Devices
-
-Touch devices have no cursor. Fall back to viewport or touch-start strategies automatically.
-
-**Incorrect (assumes cursor exists):**
-
-```tsx
-function PrefetchLink({ href, children }) {
-  return (
-    <Link href={href} onMouseMove={() => prefetch(href)}>
-      {children}
-    </Link>
-  );
-}
-```
-
-**Correct (device-aware strategy):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => router.prefetch(href),
-  hitSlop: 20,
-});
-// Automatically falls back to touch-start on mobile
-```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-trajectory-over-hover.md b/.cursor/skills/ui-patterns/rules/prefetch-trajectory-over-hover.md
deleted file mode 100644
index 87dfb0c32..000000000
--- a/.cursor/skills/ui-patterns/rules/prefetch-trajectory-over-hover.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Trajectory Prediction Over Hover Prefetching
-impact: HIGH
-tags: prefetch, trajectory, hover, performance
----
-
-## Trajectory Prediction Over Hover Prefetching
-
-Hover prefetching starts too late. Trajectory prediction fires while the cursor is still in motion, reclaiming 100-200ms.
-
-**Incorrect (waits for hover):**
-
-```tsx
-<Link href="/about" onMouseEnter={() => router.prefetch('/about')}>
-  About
-</Link>
-```
-
-**Correct (trajectory-based):**
-
-```tsx
-const { elementRef } = useForesight({
-  callback: () => router.prefetch('/about'),
-  hitSlop: 20,
-  name: 'about-link',
-});
-
-<Link ref={elementRef} href="/about">
-  About
-</Link>;
-```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-use-selectively.md b/.cursor/skills/ui-patterns/rules/prefetch-use-selectively.md
deleted file mode 100644
index 1a8c0bfed..000000000
--- a/.cursor/skills/ui-patterns/rules/prefetch-use-selectively.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Use Predictive Prefetching Selectively
-impact: MEDIUM
-tags: prefetch, selective, performance
----
-
-## Use Predictive Prefetching Selectively
-
-Predictive prefetching doesn't belong in every project. Use it where navigation latency is noticeable.
-
-**Good use cases:** data-heavy dashboards, multi-page apps with slow API responses, e-commerce product pages.
-
-**Bad use cases:** static sites with instant navigation, single-page apps with all data preloaded.
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-content-required.md b/.cursor/skills/ui-patterns/rules/pseudo-content-required.md
deleted file mode 100644
index ed65e4192..000000000
--- a/.cursor/skills/ui-patterns/rules/pseudo-content-required.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Content Property Required for Pseudo-Elements
-impact: HIGH
-tags: pseudo, content, before-after
----
-
-## Content Property Required for Pseudo-Elements
-
-::before and ::after require content property to render.
-
-**Incorrect (missing content):**
-
-```css
-.button::before {
-  position: absolute;
-  background: var(--gray-3);
-}
-```
-
-**Correct (content set):**
-
-```css
-.button::before {
-  content: '';
-  position: absolute;
-  background: var(--gray-3);
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-first-line-styling.md b/.cursor/skills/ui-patterns/rules/pseudo-first-line-styling.md
deleted file mode 100644
index dd90b2a17..000000000
--- a/.cursor/skills/ui-patterns/rules/pseudo-first-line-styling.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: Use ::first-line for Typographic Treatments
-impact: LOW
-tags: pseudo, first-line, typography
----
-
-## Use ::first-line for Typographic Treatments
-
-Use ::first-line for drop-cap-adjacent styling without JavaScript or hardcoded spans.
-
-**Incorrect (manual span):**
-
-```tsx
-<p>
-  <span className={styles['first-line']}>
-    The opening line of this paragraph
-  </span>
-  is styled differently from the rest.
-</p>
-```
-
-**Correct (native ::first-line):**
-
-```css
-.article p:first-of-type::first-line {
-  font-variant-caps: small-caps;
-  font-weight: var(--font-weight-medium);
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-hit-target-expansion.md b/.cursor/skills/ui-patterns/rules/pseudo-hit-target-expansion.md
deleted file mode 100644
index b4684dabf..000000000
--- a/.cursor/skills/ui-patterns/rules/pseudo-hit-target-expansion.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Hit Target Expansion with Pseudo-Elements
-impact: MEDIUM
-tags: pseudo, hit-target, accessibility
----
-
-## Hit Target Expansion with Pseudo-Elements
-
-Use negative inset values to expand hit targets without extra markup.
-
-**Incorrect (wrapper for hit target):**
-
-```tsx
-<div className={styles.wrapper}>
-  <a className={styles.link}>Link</a>
-</div>
-```
-
-**Correct (pseudo-element expansion):**
-
-```css
-.link {
-  position: relative;
-}
-
-.link::before {
-  content: '';
-  position: absolute;
-  inset: -8px -12px;
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-marker-styling.md b/.cursor/skills/ui-patterns/rules/pseudo-marker-styling.md
deleted file mode 100644
index a6562aa87..000000000
--- a/.cursor/skills/ui-patterns/rules/pseudo-marker-styling.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Use ::marker for Custom List Bullets
-impact: LOW
-tags: pseudo, marker, list, bullets
----
-
-## Use ::marker for Custom List Bullets
-
-Use ::marker to style list bullets without extra elements or background-image hacks.
-
-**Incorrect (background image hack):**
-
-```css
-li {
-  list-style: none;
-  background: url('bullet.svg') no-repeat 0 4px;
-  padding-left: 20px;
-}
-```
-
-**Correct (native ::marker):**
-
-```css
-li::marker {
-  color: var(--gray-8);
-  font-size: 0.8em;
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-over-dom-node.md b/.cursor/skills/ui-patterns/rules/pseudo-over-dom-node.md
deleted file mode 100644
index a03948e68..000000000
--- a/.cursor/skills/ui-patterns/rules/pseudo-over-dom-node.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Pseudo-Elements Over DOM Nodes
-impact: MEDIUM
-tags: pseudo, dom, decorative
----
-
-## Pseudo-Elements Over DOM Nodes
-
-Use pseudo-elements for decorative content instead of extra DOM nodes.
-
-**Incorrect (extra DOM node):**
-
-```tsx
-<button className={styles.button}>
-  <span className={styles.background} />
-  Click me
-</button>
-```
-
-**Correct (pseudo-element):**
-
-```tsx
-<button className={styles.button}>Click me</button>
-```
-
-```css
-.button::before {
-  content: '';
-  /* decorative background */
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-position-relative-parent.md b/.cursor/skills/ui-patterns/rules/pseudo-position-relative-parent.md
deleted file mode 100644
index 988dfa45b..000000000
--- a/.cursor/skills/ui-patterns/rules/pseudo-position-relative-parent.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: Position Relative Parent for Pseudo-Elements
-impact: HIGH
-tags: pseudo, position, relative
----
-
-## Position Relative Parent for Pseudo-Elements
-
-Parent must have position: relative for absolute pseudo-elements.
-
-**Incorrect (no position on parent):**
-
-```css
-.button::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-}
-```
-
-**Correct (parent positioned):**
-
-```css
-.button {
-  position: relative;
-}
-
-.button::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-z-index-layering.md b/.cursor/skills/ui-patterns/rules/pseudo-z-index-layering.md
deleted file mode 100644
index e6086bdc7..000000000
--- a/.cursor/skills/ui-patterns/rules/pseudo-z-index-layering.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: Z-Index Layering for Pseudo-Elements
-impact: MEDIUM
-tags: pseudo, z-index, layering
----
-
-## Z-Index Layering for Pseudo-Elements
-
-Pseudo-elements need z-index to layer correctly with content.
-
-**Incorrect (covers text):**
-
-```css
-.button::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--gray-3);
-}
-```
-
-**Correct (layered behind):**
-
-```css
-.button {
-  position: relative;
-  z-index: 1;
-}
-
-.button::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: var(--gray-3);
-  z-index: -1;
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/transition-name-cleanup.md b/.cursor/skills/ui-patterns/rules/transition-name-cleanup.md
deleted file mode 100644
index 7dad19e8b..000000000
--- a/.cursor/skills/ui-patterns/rules/transition-name-cleanup.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Clean Up View Transition Names
-impact: MEDIUM
-tags: view-transition, cleanup
----
-
-## Clean Up View Transition Names
-
-Remove view-transition-name after transition completes.
-
-**Incorrect (stale name):**
-
-```ts
-sourceImg.style.viewTransitionName = 'card';
-document.startViewTransition(() => {
-  targetImg.style.viewTransitionName = 'card';
-});
-```
-
-**Correct (name cleaned up):**
-
-```ts
-sourceImg.style.viewTransitionName = 'card';
-document.startViewTransition(() => {
-  sourceImg.style.viewTransitionName = '';
-  targetImg.style.viewTransitionName = 'card';
-});
-```
diff --git a/.cursor/skills/ui-patterns/rules/transition-name-required.md b/.cursor/skills/ui-patterns/rules/transition-name-required.md
deleted file mode 100644
index 2fe5cf291..000000000
--- a/.cursor/skills/ui-patterns/rules/transition-name-required.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: View Transition Name Required
-impact: HIGH
-tags: view-transition, transition-name
----
-
-## View Transition Name Required
-
-Elements participating in view transitions need view-transition-name.
-
-**Incorrect (no transition name):**
-
-```ts
-document.startViewTransition(() => {
-  targetImg.src = newSrc;
-});
-```
-
-**Correct (transition name assigned):**
-
-```ts
-sourceImg.style.viewTransitionName = 'card';
-document.startViewTransition(() => {
-  sourceImg.style.viewTransitionName = '';
-  targetImg.style.viewTransitionName = 'card';
-});
-```
diff --git a/.cursor/skills/ui-patterns/rules/transition-name-unique.md b/.cursor/skills/ui-patterns/rules/transition-name-unique.md
deleted file mode 100644
index 8b72f0384..000000000
--- a/.cursor/skills/ui-patterns/rules/transition-name-unique.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-title: Unique View Transition Names
-impact: HIGH
-tags: view-transition, unique, naming
----
-
-## Unique View Transition Names
-
-Each view-transition-name must be unique on the page during transition.
-
-**Incorrect (duplicate names):**
-
-```css
-.card {
-  view-transition-name: card;
-}
-/* Multiple cards with same name */
-```
-
-**Correct (unique per element):**
-
-```ts
-element.style.viewTransitionName = `card-${id}`;
-```
diff --git a/.cursor/skills/ui-patterns/rules/transition-over-js-library.md b/.cursor/skills/ui-patterns/rules/transition-over-js-library.md
deleted file mode 100644
index 3a2f9825a..000000000
--- a/.cursor/skills/ui-patterns/rules/transition-over-js-library.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: View Transitions Over JS Libraries
-impact: MEDIUM
-tags: view-transition, native, performance
----
-
-## View Transitions Over JS Libraries
-
-Prefer View Transitions API over JavaScript animation libraries for page transitions.
-
-**Incorrect (JS-based transition):**
-
-```tsx
-import { motion } from 'motion/react';
-
-function ImageLightbox() {
-  return <motion.img layoutId="hero" />;
-}
-```
-
-**Correct (native View Transition):**
-
-```ts
-function openLightbox(img: HTMLImageElement) {
-  img.style.viewTransitionName = 'hero';
-  document.startViewTransition(() => {
-    // Native browser transition
-  });
-}
-```
diff --git a/.cursor/skills/ui-patterns/rules/transition-style-pseudo-elements.md b/.cursor/skills/ui-patterns/rules/transition-style-pseudo-elements.md
deleted file mode 100644
index 5a9305e76..000000000
--- a/.cursor/skills/ui-patterns/rules/transition-style-pseudo-elements.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Style View Transition Pseudo-Elements
-impact: MEDIUM
-tags: view-transition, pseudo, styling
----
-
-## Style View Transition Pseudo-Elements
-
-Style view transition pseudo-elements for custom animations.
-
-**Incorrect (default crossfade only):**
-
-```ts
-document.startViewTransition(() => {
-  /* ... */
-});
-```
-
-**Correct (custom animation):**
-
-```css
-::view-transition-group(card) {
-  animation-duration: 300ms;
-  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-```
diff --git a/.cursor/skills/ux-heuristics/SKILL.md b/.cursor/skills/ux-heuristics/SKILL.md
deleted file mode 100644
index 0c002218f..000000000
--- a/.cursor/skills/ux-heuristics/SKILL.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-name: ux-heuristics
-description: Apply Nielsen's 10 usability heuristics when building or reviewing UI. Use when creating components, pages, forms, modals, tables, navigation, error states, or when the user asks for UX review, usability audit, or heuristic evaluation.
-metadata:
-  author: Quintessential
-  version: '3.0.0'
-  short-description: Nielsen's 10 usability heuristics for interface review
----
-
-# Nielsen's 10 Usability Heuristics
-
-Apply these heuristics when building or reviewing any user interface. Treat them as a checklist -- not every heuristic applies to every change, but scan all 10 before considering work complete.
-
-For the full reference with examples and edge cases, see [reference.md](reference.md).
-
-## Quick Checklist
-
-When building or reviewing UI, verify:
-
-- [ ] **H1 System status** -- Does the UI show what's happening? (loading, saving, success, error)
-- [ ] **H2 Real-world match** -- Does it use the user's language, not dev jargon? Are icons/metaphors intuitive?
-- [ ] **H3 User control** -- Can users undo, cancel, go back, or escape from any state?
-- [ ] **H4 Consistency** -- Does it follow existing patterns in the app and platform conventions?
-- [ ] **H5 Error prevention** -- Are destructive actions guarded? Are constraints in place before errors happen?
-- [ ] **H6 Recognition over recall** -- Are options visible? Can users see rather than remember what to do?
-- [ ] **H7 Flexibility** -- Are there shortcuts for experts? Does it scale for power users?
-- [ ] **H8 Minimalist design** -- Is every element earning its place? Is the signal-to-noise ratio high?
-- [ ] **H9 Error recovery** -- Are error messages plain language, specific, and actionable?
-- [ ] **H10 Help** -- Is contextual help available where users might need it?
-
-## How to Apply
-
-### When building new UI
-
-1. Before implementation, scan the checklist to anticipate issues
-2. Prioritize H1 (status), H3 (control), H5 (error prevention) -- these prevent the most user frustration
-3. After implementation, do a final pass against all 10
-
-### When reviewing existing UI
-
-1. Walk through each user flow as if seeing it for the first time
-2. Flag violations with severity:
-   - **Critical** -- blocks the user or causes data loss (H3, H5, H9)
-   - **Major** -- causes significant confusion or inefficiency (H1, H2, H4)
-   - **Minor** -- polish and optimization (H6, H7, H8, H10)
-
-## Common Violations in CMS/Admin UIs
-
-| Pattern                                        | Heuristic violated | Fix                                             |
-| ---------------------------------------------- | ------------------ | ----------------------------------------------- |
-| No feedback after save/delete                  | H1                 | Add toast notification or inline confirmation   |
-| Form submits with no validation                | H5                 | Add client-side validation before submit        |
-| No way to cancel mid-flow                      | H3                 | Add cancel button, support Escape key           |
-| Inconsistent button placement                  | H4                 | Standardize primary action position (right)     |
-| Raw error codes shown to user                  | H9                 | Translate to plain language with recovery steps |
-| Empty states with no guidance                  | H10                | Add helpful empty state with call-to-action     |
-| Truncated text with no way to see full content | H6                 | Add tooltip or expandable row                   |
-| Delete without confirmation                    | H5                 | Add confirmation dialog for destructive actions |
-| No loading indicator on async operations       | H1                 | Add spinner, skeleton, or progress bar          |
-| Jargon in labels (e.g. "instructorId")         | H2                 | Use human-readable labels ("Instructor")        |
diff --git a/.cursor/skills/ux-heuristics/reference.md b/.cursor/skills/ux-heuristics/reference.md
deleted file mode 100644
index caa3b2f0c..000000000
--- a/.cursor/skills/ux-heuristics/reference.md
+++ /dev/null
@@ -1,222 +0,0 @@
-# Nielsen's 10 Usability Heuristics -- Full Reference
-
-Based on [NN/g's 10 Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/).
-
----
-
-## H1. Visibility of System Status
-
-The design should always keep users informed about what is going on through appropriate feedback within a reasonable amount of time.
-
-**What to check:**
-
-- Loading states: spinners, skeletons, progress bars for async operations
-- Success confirmation: toasts, inline messages after save/create/delete
-- Error states: clear visual indicators when something fails
-- State indicators: active tab, selected item, current page, sort direction
-- Real-time feedback: character counts, validation as you type, preview
-
-**Implementation patterns:**
-
-- Toast notifications for transient success/error messages
-- Inline validation on form fields (not just on submit)
-- Skeleton loaders for content that takes time to load
-- Disabled states with visual feedback on buttons during submission
-- Progress indicators for multi-step flows
-
----
-
-## H2. Match Between the System and the Real World
-
-The interface should speak the users' language, using words, phrases, icons, and concepts familiar to them rather than internal jargon.
-
-**What to check:**
-
-- Labels use domain language, not developer terms (e.g., "Instructor" not "instructorId")
-- Icons match real-world metaphors (trash can for delete, pencil for edit)
-- Information hierarchy follows natural reading order
-- Date/time formats match user expectations (locale-appropriate)
-- Terminology is consistent with industry standards
-
-**Implementation patterns:**
-
-- Use human-readable labels derived from the domain model
-- Format dates, currencies, and numbers for the target locale
-- Order form fields in a logical sequence matching real-world workflows
-- Use familiar UI metaphors (drag to reorder, swipe to delete)
-
----
-
-## H3. User Control and Freedom
-
-Users often act by mistake, so they need clearly marked "emergency exits" to leave unwanted states without going through long flows.
-
-**What to check:**
-
-- Every modal/dialog has a close button and supports Escape key
-- Every multi-step flow has a back button or breadcrumb navigation
-- Destructive actions can be undone or require confirmation
-- Forms have a cancel button that returns to the previous state
-- Navigation doesn't trap users (browser back always works)
-
-**Implementation patterns:**
-
-- Cancel buttons on all forms and dialogs
-- Undo capability for delete operations (soft delete + undo toast)
-- Confirmation dialogs for irreversible actions
-- Escape key closes modals, popovers, and dropdown menus
-- Browser history integration (back button works as expected)
-
----
-
-## H4. Consistency and Standards
-
-Users should not have to wonder whether different words, actions, or situations mean the same thing. Follow platform and industry conventions.
-
-**What to check:**
-
-- Same action, same word everywhere (don't mix "Delete" / "Remove" / "Trash")
-- Button styles consistent (primary action always same color/position)
-- Layout patterns reused (list pages all look similar, form pages all look similar)
-- Follows platform conventions (OS-native patterns, web standards)
-- Internal consistency (spacing, typography, color usage follow a system)
-
-**Implementation patterns:**
-
-- Design tokens / theme for consistent colors, spacing, typography
-- Shared components for common patterns (DataTable, PageHeader, forms)
-- Consistent icon usage (same icon always means same action)
-- Primary action always on the right in button groups
-- Consistent empty states, loading states, error states
-
----
-
-## H5. Error Prevention
-
-Good design prevents problems before they happen by eliminating error-prone conditions or checking for them.
-
-**What to check:**
-
-- Required fields are clearly marked and validated before submission
-- Destructive actions require confirmation (delete, publish, bulk operations)
-- Sensible defaults reduce chances of misconfiguration
-- Constraints prevent invalid input (max length, number ranges, date ranges)
-- Dangerous operations are visually distinct (red styling for destructive actions)
-
-**Implementation patterns:**
-
-- Client-side form validation with Zod schemas
-- Confirmation dialogs for delete, publish, and bulk actions
-- Input constraints (type="number" min/max, maxLength, date pickers)
-- Disabled submit button until form is valid
-- Auto-save or warn before navigating away from unsaved changes
-
----
-
-## H6. Recognition Rather Than Recall
-
-Minimize memory load by making elements, actions, and options visible rather than requiring users to remember.
-
-**What to check:**
-
-- Options are visible in menus, not hidden behind memorizable shortcuts only
-- Search fields have placeholder text suggesting what to search
-- Form fields have labels (not just placeholders that disappear)
-- Recently used items or suggestions are shown
-- Related information is co-located (don't make users flip between pages)
-
-**Implementation patterns:**
-
-- Persistent labels on all form fields (not placeholder-only)
-- Combobox/search for fields with many options instead of plain dropdowns
-- Breadcrumbs or page titles showing current location
-- Tooltips for icon-only buttons
-- Inline help text for non-obvious fields
-
----
-
-## H7. Flexibility and Efficiency of Use
-
-Cater to both novice and expert users. Provide shortcuts that speed up frequent actions.
-
-**What to check:**
-
-- Keyboard shortcuts for common actions (Cmd+S to save, Escape to close)
-- Bulk operations available (select all, bulk delete, bulk publish)
-- Search and filter for large lists
-- Sortable columns in tables
-- Customizable views (grid/list toggle, column visibility)
-
-**Implementation patterns:**
-
-- Grid/list view toggle on collection pages
-- Column sorting with visual indicators
-- Search with debounce on large data sets
-- Keyboard navigation in dropdowns and menus
-- Pagination with configurable page sizes
-
----
-
-## H8. Aesthetic and Minimalist Design
-
-Every extra element competes with what matters. Focus on essentials that support primary user goals.
-
-**What to check:**
-
-- No unnecessary decorative elements that distract from content
-- Information density appropriate for the context (not too sparse, not too cluttered)
-- Visual hierarchy guides the eye to what matters most
-- White space used effectively to group related elements
-- Secondary actions are visually subordinate to primary ones
-
-**Implementation patterns:**
-
-- Progressive disclosure (show details on demand, not all at once)
-- Ghost/outline variants for secondary actions, solid for primary
-- Collapsible sections for advanced options
-- Clean empty states (helpful but not overwhelming)
-- Consistent use of muted colors for secondary information
-
----
-
-## H9. Help Users Recognize, Diagnose, and Recover from Errors
-
-Error messages should be plain language, clearly indicate what went wrong, and suggest how to fix it.
-
-**What to check:**
-
-- Error messages are in plain language (no error codes, stack traces, or technical jargon)
-- Errors indicate specifically what went wrong ("Email is invalid" not "Validation error")
-- Errors suggest how to fix the problem ("Enter a valid email address like name@example.com")
-- Form errors appear next to the relevant field, not just at the top
-- Network/server errors have retry options
-
-**Implementation patterns:**
-
-- Inline field-level error messages below each invalid field
-- Toast notifications for operation failures with retry button
-- Specific Zod error messages in schemas
-- Fallback UI for component-level errors (error boundaries)
-- Graceful degradation when external services fail
-
----
-
-## H10. Help and Documentation
-
-Help should be easy to search, task-focused, concise, and shown in context.
-
-**What to check:**
-
-- Empty states include helpful guidance ("No sessions yet. Create your first session.")
-- Complex fields have help text or tooltips explaining what's expected
-- Onboarding flow for first-time users
-- Contextual help near where users need it (not buried in a separate docs page)
-- Labels and descriptions are self-explanatory
-
-**Implementation patterns:**
-
-- Helper text below form fields for non-obvious inputs
-- Empty state components with description + call-to-action button
-- Tooltip on icon-only buttons explaining the action
-- Description text on page headers explaining the page's purpose
-- Placeholder text in search fields suggesting usage
diff --git a/.cursor/skills/web-animation-design/SKILL.md b/.cursor/skills/web-animation-design/SKILL.md
deleted file mode 100644
index 554a91692..000000000
--- a/.cursor/skills/web-animation-design/SKILL.md
+++ /dev/null
@@ -1,533 +0,0 @@
----
-name: web-animation-design
-description: 'Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth, storyboard, stage, TIMING object.'
-metadata:
-  author: Quintessential
-  version: '3.0.0'
-  short-description: Design and implement web animations that feel natural and purposeful
----
-
-# Web Animation Design
-
-Quintessential's comprehensive guide for creating animations that feel right. Covers principles, easing, timing, springs, exit animations, code architecture, performance, and accessibility.
-
-## Quick Start
-
-Every animation decision starts with these questions:
-
-1. **Is this element entering or exiting?** → Use `ease-out`
-2. **Is an on-screen element moving?** → Use `ease-in-out`
-3. **Is this a hover/color transition?** → Use `ease`
-4. **Will users see this 100+ times daily?** → Don't animate it
-
-### Motion Type Decision Framework
-
-| Motion Type                             | Best Choice | Why                                        |
-| --------------------------------------- | ----------- | ------------------------------------------ |
-| User-driven (drag, flick, gesture)      | Spring      | Survives interruption, preserves velocity  |
-| System-driven (state change, feedback)  | Easing      | Clear start/end, predictable timing        |
-| Time representation (progress, loading) | Linear      | 1:1 relationship between time and progress |
-| High-frequency (typing, fast toggles)   | None        | Animation adds noise, feels slower         |
-
-## The Easing Blueprint
-
-### ease-out (Most Common)
-
-Use for **user-initiated interactions**: dropdowns, modals, tooltips, any element entering or exiting the screen.
-
-```css
-/* Sorted weak to strong */
---ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
---ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
---ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
---ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
---ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
---ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
-```
-
-Why it works: Acceleration at the start creates an instant, responsive feeling. The element "jumps" toward its destination then settles in.
-
-### ease-in-out (For Movement)
-
-Use when **elements already on screen need to move or morph**. Mimics natural motion like a car accelerating then braking.
-
-```css
-/* Sorted weak to strong */
---ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
---ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
---ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
---ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
---ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
---ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-```
-
-### ease (For Hover Effects)
-
-Use for **hover states and color transitions**. The asymmetrical curve (faster start, slower end) feels elegant for gentle animations.
-
-```css
-transition: background-color 150ms ease;
-```
-
-### linear (Avoid in UI)
-
-Only use for:
-
-- Constant-speed animations (marquees, tickers)
-- Time visualization (hold-to-delete progress indicators)
-
-Linear feels robotic and unnatural for interactive elements.
-
-### ease-in (Almost Never)
-
-**Avoid for UI animations.** Makes interfaces feel sluggish because the slow start delays visual feedback.
-
-### Paired Elements Rule
-
-Elements that animate together must use the same easing and duration. Modal + overlay, tooltip + arrow, drawer + backdrop — if they move as a unit, they should feel like a unit.
-
-```css
-.modal {
-  transition: transform 200ms ease-out;
-}
-.overlay {
-  transition: opacity 200ms ease-out;
-}
-```
-
-## Timing and Duration
-
-| Element Type                      | Duration  |
-| --------------------------------- | --------- |
-| Micro-interactions (press, hover) | 120-180ms |
-| Standard UI (tooltips, dropdowns) | 150-250ms |
-| Small state changes               | 180-260ms |
-| Modals, drawers                   | 200-300ms |
-
-**Rules:**
-
-- UI animations must stay under 300ms
-- Larger elements animate slower than smaller ones
-- Exit animations can be ~20% faster than entrance
-- Match duration to distance — longer travel = longer duration
-- If animation feels slow, **shorten the duration first** before adjusting the curve
-
-### The Frequency Rule
-
-Determine how often users will see the animation:
-
-- **100+ times/day** → No animation (or drastically reduced)
-- **Occasional use** → Standard animation
-- **Rare/first-time** → Can be more special
-
-## When to Animate
-
-**Do animate:**
-
-- Enter/exit transitions for spatial consistency
-- State changes that benefit from visual continuity
-- Responses to user actions (feedback)
-- Rarely-used interactions where delight adds value
-
-**Don't animate:**
-
-- Keyboard-initiated actions (arrow keys, shortcuts, tab/focus)
-- Hover effects on frequently-used elements
-- Anything users interact with 100+ times daily
-- When speed matters more than smoothness
-- Context menu entrances (exit only — context menus should appear instantly)
-
-**Marketing vs. Product:**
-
-- Marketing: More elaborate, longer durations allowed
-- Product: Fast, purposeful, never frivolous
-
-## Animation Principles
-
-### Active State Feedback
-
-Interactive elements must have `:active` scale transforms for press feedback:
-
-```css
-.button:active {
-  transform: scale(0.97);
-}
-```
-
-### Subtle Deformation
-
-Squash/stretch must stay in the 0.95-1.05 range. Anything beyond looks cartoonish in UI.
-
-```tsx
-<motion.div whileTap={{ scale: 0.98 }} />
-```
-
-### Stagger Limits
-
-Stagger delays must not exceed 50ms per item. Excessive stagger makes lists feel slow.
-
-```tsx
-transition={{ staggerChildren: 0.03 }}
-```
-
-### Staging
-
-- **One focal point** — Only one element should animate prominently at a time
-- **Dim backgrounds** — Modal/dialog backgrounds should dim to direct focus
-- **Z-index hierarchy** — Animated elements must respect z-index layers
-
-## Spring Animations
-
-Springs feel more natural because they don't have fixed durations — they simulate real physics.
-
-### When to Use Springs
-
-- Gesture-driven motion (drag, flick, swipe) — springs **must** be used
-- Interruptible motion — springs **must** be used (they preserve velocity when interrupted; CSS animations restart from zero)
-- Elements that should feel "alive" (Dynamic Island)
-- Organic, playful interfaces
-- Any motion needing overshoot-and-settle behavior
-
-### Configuration
-
-**Apple's approach (recommended for most cases):**
-
-```js
-{ type: "spring", duration: 0.5, bounce: 0.2 }
-```
-
-**Traditional physics (more control):**
-
-```js
-{ type: "spring", mass: 1, stiffness: 100, damping: 10 }
-```
-
-### Spring Guidelines
-
-- **Avoid bounce** in most UI contexts
-- **Use bounce** for drag-to-dismiss, playful interactions
-- Keep bounce subtle (0.1-0.3) when used
-- Balanced parameters: avoid excessive oscillation (e.g. `stiffness: 1000, damping: 5` is too bouncy)
-- When velocity matters (drag release), pass input velocity to the spring:
-
-```tsx
-onDragEnd={(e, info) => {
-  animate(target, { x: 0 }, {
-    type: "spring",
-    velocity: info.velocity.x,
-  });
-}}
-```
-
-### Quick Reference
-
-| Interaction     | Timing | Type                          |
-| --------------- | ------ | ----------------------------- |
-| Drag release    | Spring | `stiffness: 500, damping: 30` |
-| Button press    | 150ms  | `ease`                        |
-| Modal enter     | 200ms  | `ease-out`                    |
-| Modal exit      | 150ms  | `ease-out`                    |
-| Page transition | 250ms  | `ease-in-out`                 |
-| Progress bar    | varies | `linear`                      |
-| Typing feedback | 0ms    | none                          |
-
-## Exit Animations (AnimatePresence)
-
-### Core Rules
-
-- `exit-requires-wrapper` — Conditional motion elements must be wrapped in `<AnimatePresence>`
-- `exit-prop-required` — Elements inside AnimatePresence need an `exit` prop
-- `exit-key-required` — Dynamic lists need unique keys (`item.id`), never array index
-- `exit-matches-initial` — Exit animation should mirror initial for symmetry
-
-```tsx
-<AnimatePresence>
-  {isVisible && (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: 20 }}
-    />
-  )}
-</AnimatePresence>
-```
-
-### Presence Hooks
-
-- `presence-hook-in-child` — `useIsPresent` must be called from the child of AnimatePresence, not the parent
-- `presence-safe-to-remove` — Call `safeToRemove` after async cleanup when using `usePresence`
-- `presence-disable-interactions` — Disable interactions on exiting elements via `disabled={!isPresent}`
-
-### Mode Selection
-
-- `mode-wait-doubles-duration` — Mode `"wait"` nearly doubles perceived duration; halve your timing values when using it
-- `mode-sync-layout-conflict` — Mode `"sync"` causes layout conflicts; use `"popLayout"` instead for lists
-- `mode-pop-layout-for-lists` — Use `popLayout` mode for list reordering to prevent layout shifts
-
-### Nested AnimatePresence
-
-- `nested-propagate-required` — Nested AnimatePresence needs the `propagate` prop on both parent and child
-- `nested-consistent-timing` — Coordinate parent-child exit durations; child must finish before parent
-
-## Code Architecture (Storyboard Pattern)
-
-Structure animated components for readability and tunability. Every timing value, scale, position, and spring config is extracted to named constants.
-
-### 1. ASCII Storyboard Comment
-
-A block comment at the top of the file that reads like a shot list:
-
-```
-/* ─────────────────────────────────────────────────────────
- * ANIMATION STORYBOARD
- *
- *    0ms   waiting for trigger (scroll into view / mount)
- *  300ms   card fades in, scale 0.85 → 1.0
- *  900ms   heading text highlights
- * 1500ms   detail rows slide up (staggered 200ms)
- * 2100ms   CTA button fades in
- * ───────────────────────────────────────────────────────── */
-```
-
-Rules: right-align ms values, use `→` for value transitions, note stagger intervals in parentheses.
-
-### 2. TIMING Object
-
-A single `const TIMING` object with every stage delay in milliseconds. This is the **only place** timing values live.
-
-```tsx
-const TIMING = {
-  cardAppear: 300,
-  headingGlow: 900,
-  detailRows: 1500,
-  ctaButton: 2100,
-};
-```
-
-Keys are camelCase descriptive verb phrases. Values are ms after the animation trigger (not deltas between stages).
-
-### 3. Element Config Objects
-
-Each animated element gets its own named config object:
-
-```tsx
-const CARD = {
-  initialScale: 0.85,
-  finalScale: 1.0,
-  spring: { type: 'spring' as const, stiffness: 300, damping: 30 },
-};
-
-const ROWS = {
-  stagger: 0.2,
-  offsetY: 12,
-  spring: { type: 'spring' as const, stiffness: 300, damping: 30 },
-  items: [
-    { label: 'Row 1', value: 'A' },
-    { label: 'Row 2', value: 'B' },
-  ],
-};
-```
-
-UPPERCASE names. Group ALL values for one element together. Repeated items are arrays rendered with `.map()`.
-
-### 4. Stage-Driven Sequencing
-
-A single `stage` integer state drives the entire sequence — no scattered boolean flags:
-
-```tsx
-const [stage, setStage] = useState(0);
-
-useEffect(() => {
-  if (!isInView) {
-    setStage(0);
-    return;
-  }
-
-  setStage(0);
-  const timers: NodeJS.Timeout[] = [];
-
-  timers.push(setTimeout(() => setStage(1), TIMING.cardAppear));
-  timers.push(setTimeout(() => setStage(2), TIMING.headingGlow));
-  timers.push(setTimeout(() => setStage(3), TIMING.detailRows));
-  timers.push(setTimeout(() => setStage(4), TIMING.ctaButton));
-
-  return () => timers.forEach(clearTimeout);
-}, [isInView, replayTrigger]);
-```
-
-### 5. JSX Pattern
-
-Reference config objects in animate props, use `stage >= N` checks:
-
-```tsx
-<motion.div
-  initial={{ opacity: 0, scale: CARD.initialScale }}
-  animate={{
-    opacity: stage >= 1 ? 1 : 0,
-    scale: stage >= 1 ? CARD.finalScale : CARD.initialScale,
-  }}
-  transition={CARD.spring}
-/>
-```
-
-For staggered groups:
-
-```tsx
-{
-  ROWS.items.map((item, i) => (
-    <motion.div
-      key={item.label}
-      initial={{ opacity: 0, y: ROWS.offsetY }}
-      animate={{
-        opacity: stage >= 3 ? 1 : 0,
-        y: stage >= 3 ? 0 : ROWS.offsetY,
-      }}
-      transition={{ ...ROWS.spring, delay: i * ROWS.stagger }}
-    >
-      {item.label}
-    </motion.div>
-  ));
-}
-```
-
-### Storyboard Checklist
-
-- [ ] ASCII storyboard comment at top matches actual TIMING values
-- [ ] Zero magic numbers in JSX or useEffect — everything references a const
-- [ ] Springs defined in config objects, not inline
-- [ ] Repeated elements use `.map()` over a data array
-- [ ] Stage values use `>=` checks (stages are additive)
-- [ ] `replayTrigger` in dependency array for dev/debug replay
-
-## Performance
-
-### The Golden Rule
-
-Only animate `transform` and `opacity`. These skip layout and paint stages, running entirely on the GPU.
-
-**Avoid animating:**
-
-- `padding`, `margin`, `height`, `width` (trigger layout)
-- `blur` filters above 20px (expensive, especially Safari)
-- CSS variables in deep component trees
-
-### Optimization Techniques
-
-```css
-.animated-element {
-  will-change: transform;
-}
-```
-
-**React-specific:**
-
-- Animate outside React's render cycle when possible
-- Use refs to update styles directly instead of state
-- Re-renders on every frame = dropped frames
-
-**Framer Motion:**
-
-```jsx
-// Hardware accelerated (transform as string)
-<motion.div animate={{ transform: "translateX(100px)" }} />
-
-// NOT hardware accelerated (more readable but slower)
-<motion.div animate={{ x: 100 }} />
-```
-
-### CSS vs. JavaScript
-
-- CSS animations run off main thread (smoother under load)
-- JS animations (Framer Motion, React Spring) use `requestAnimationFrame`
-- CSS better for simple, predetermined animations
-- JS better for dynamic, interruptible animations
-
-## Accessibility
-
-### prefers-reduced-motion
-
-Whenever you add an animation, also add a media query to disable it:
-
-```css
-.modal {
-  animation: fadeIn 200ms ease-out;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .modal {
-    animation: none;
-  }
-}
-```
-
-### Reduced Motion Guidelines
-
-- Every animated element needs its own `prefers-reduced-motion` media query
-- Set `animation: none` or `transition: none` (no `!important`)
-- No exceptions for opacity or color — disable all animations
-- Show play buttons instead of autoplay videos
-
-### Framer Motion Implementation
-
-```jsx
-import { useReducedMotion } from 'framer-motion';
-
-function Component() {
-  const shouldReduceMotion = useReducedMotion();
-
-  return (
-    <motion.div
-      initial={shouldReduceMotion ? false : { opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-    />
-  );
-}
-```
-
-### Touch Device Considerations
-
-```css
-@media (hover: hover) and (pointer: fine) {
-  .element:hover {
-    transform: scale(1.05);
-  }
-}
-```
-
-Touch devices trigger hover on tap, causing false positives.
-
-## Practical Tips
-
-Quick reference for common scenarios. See [practical-tips.md](practical-tips.md) for detailed implementations.
-
-| Scenario                        | Solution                                        |
-| ------------------------------- | ----------------------------------------------- |
-| Make buttons feel responsive    | Add `transform: scale(0.97)` on `:active`       |
-| Element appears from nowhere    | Start from `scale(0.95)`, not `scale(0)`        |
-| Shaky/jittery animations        | Add `will-change: transform`                    |
-| Hover causes flicker            | Animate child element, not parent               |
-| Popover scales from wrong point | Set `transform-origin` to trigger location      |
-| Sequential tooltips feel slow   | Skip delay/animation after first tooltip        |
-| Small buttons hard to tap       | Use 44px minimum hit area (pseudo-element)      |
-| Something still feels off       | Add subtle blur (under 20px) to mask it         |
-| Hover triggers on mobile        | Use `@media (hover: hover) and (pointer: fine)` |
-| Animation feels slow            | Shorten duration first, then adjust curve       |
-
-## Easing Decision Flowchart
-
-Is the element entering or exiting the viewport?
-├── Yes → ease-out
-└── No
-├── Is it moving/morphing on screen?
-│ └── Yes → ease-in-out
-└── Is it a hover change?
-├── Yes → ease
-└── Is it constant motion?
-├── Yes → linear
-└── Default → ease-out
-
-## Reference Files
-
-- [practical-tips.md](practical-tips.md) — Detailed implementations for common animation scenarios
-
-Reference: [Motion Documentation](https://motion.dev), [Motion AnimatePresence](https://motion.dev/docs/react-animate-presence), [Apple WWDC23: Animate with Springs](https://developer.apple.com/videos/play/wwdc2023/10158)
diff --git a/.cursor/skills/web-animation-design/practical-tips.md b/.cursor/skills/web-animation-design/practical-tips.md
deleted file mode 100644
index 52aaf90f0..000000000
--- a/.cursor/skills/web-animation-design/practical-tips.md
+++ /dev/null
@@ -1,294 +0,0 @@
-# Practical Animation Tips
-
-Detailed reference guide for common animation scenarios. Use this as a checklist when implementing animations.
-
-## Recording & Debugging
-
-### Record Your Animations
-
-When something feels off but you can't identify why, record the animation and play it back frame by frame. This reveals details invisible at normal speed.
-
-### Fix Shaky Animations
-
-Elements may shift by 1px at the start/end of CSS transform animations due to GPU/CPU rendering handoff.
-
-**Fix:**
-
-```css
-.element {
-  will-change: transform;
-}
-```
-
-This tells the browser to keep the element on the GPU throughout the animation.
-
-### Take Breaks
-
-Don't code and ship animations in one sitting. Step away, return with fresh eyes. The best animations are reviewed and refined over days, not hours.
-
-## Button & Click Feedback
-
-### Scale Buttons on Press
-
-Make interfaces feel responsive by adding subtle scale feedback:
-
-```css
-button:active {
-  transform: scale(0.97);
-}
-```
-
-This gives instant visual feedback that the interface is listening.
-
-### Don't Animate from scale(0)
-
-Starting from `scale(0)` makes elements appear from nowhere — it feels unnatural.
-
-**Bad:**
-
-```css
-.element {
-  transform: scale(0);
-}
-.element.visible {
-  transform: scale(1);
-}
-```
-
-**Good:**
-
-```css
-.element {
-  transform: scale(0.95);
-  opacity: 0;
-}
-.element.visible {
-  transform: scale(1);
-  opacity: 1;
-}
-```
-
-Elements should always have some visible shape, like a deflated balloon.
-
-## Tooltips & Popovers
-
-### Skip Animation on Subsequent Tooltips
-
-First tooltip: delay + animation. Subsequent tooltips (while one is open): instant, no delay.
-
-```css
-.tooltip {
-  transition:
-    transform 125ms ease-out,
-    opacity 125ms ease-out;
-  transform-origin: var(--transform-origin);
-}
-
-.tooltip[data-starting-style],
-.tooltip[data-ending-style] {
-  opacity: 0;
-  transform: scale(0.97);
-}
-
-.tooltip[data-instant] {
-  transition-duration: 0ms;
-}
-```
-
-Radix UI and Base UI support this pattern with `data-instant` attribute.
-
-### Make Animations Origin-Aware
-
-Popovers should scale from their trigger, not from center.
-
-```css
-.popover {
-  transform-origin: var(--transform-origin);
-}
-```
-
-**Radix UI:**
-
-```css
-.popover {
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-}
-```
-
-**Base UI:**
-
-```css
-.popover {
-  transform-origin: var(--transform-origin);
-}
-```
-
-## Speed & Timing
-
-### Keep Animations Fast
-
-A faster-spinning spinner makes apps feel faster even with identical load times. A 180ms select animation feels more responsive than 400ms.
-
-**Rule:** UI animations should stay under 300ms.
-
-### Don't Animate Keyboard Interactions
-
-Arrow key navigation, keyboard shortcuts — these are repeated hundreds of times daily. Animation makes them feel slow and disconnected.
-
-**Never animate:**
-
-- List navigation with arrow keys
-- Keyboard shortcut responses
-- Tab/focus movements
-
-### Be Careful with Frequently-Used Elements
-
-A hover effect is nice, but if triggered multiple times a day, it may benefit from no animation at all.
-
-**Guideline:** Use your own product daily. You'll discover which animations become annoying through repeated use.
-
-## Hover States
-
-### Fix Hover Flicker
-
-When hover animation changes element position, the cursor may leave the element, causing flicker.
-
-**Problem:**
-
-```css
-.box:hover {
-  transform: translateY(-20%);
-}
-```
-
-**Solution:** Animate a child element instead:
-
-```html
-<div class="box">
-  <div class="box-inner"></div>
-</div>
-```
-
-```css
-.box:hover .box-inner {
-  transform: translateY(-20%);
-}
-
-.box-inner {
-  transition: transform 200ms ease;
-}
-```
-
-The parent's hover area stays stable while the child moves.
-
-### Disable Hover on Touch Devices
-
-Touch devices don't have true hover. Accidental finger movement triggers unwanted hover states.
-
-```css
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    transform: scale(1.05);
-  }
-}
-```
-
-**Note:** Tailwind v4's `hover:` class automatically applies only when the device supports hover.
-
-## Touch & Accessibility
-
-### Ensure Appropriate Target Areas
-
-Small buttons are hard to tap. Use a pseudo-element to create larger hit areas without changing layout.
-
-**Minimum target:** 44px (Apple and WCAG recommendation)
-
-```css
-@utility touch-hitbox {
-  position: relative;
-}
-
-@utility touch-hitbox::before {
-  content: '';
-  position: absolute;
-  display: block;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-  min-height: 44px;
-  min-width: 44px;
-  z-index: 9999;
-}
-```
-
-Usage:
-
-```jsx
-<button className="touch-hitbox">
-  <BellIcon />
-</button>
-```
-
-## Easing Selection
-
-### Use ease-out for Enter/Exit
-
-Elements entering or exiting should use `ease-out`. The fast start creates responsiveness.
-
-```css
-.dropdown {
-  transition:
-    transform 200ms ease-out,
-    opacity 200ms ease-out;
-}
-```
-
-### Use ease-in-out for On-Screen Movement
-
-Elements already visible that need to move should use `ease-in-out`. Mimics natural acceleration/deceleration.
-
-```css
-.slider-handle {
-  transition: transform 250ms ease-in-out;
-}
-```
-
-### Use Custom Easing Curves
-
-Built-in CSS curves are usually too weak. Custom curves create more intentional motion.
-
-**Resources:**
-
-- External: [easings.co](https://easings.co/)
-
-## Visual Tricks
-
-### Use Blur as a Fallback
-
-When easing and timing adjustments don't solve the problem, add subtle blur to mask imperfections.
-
-```css
-.button-transition {
-  transition:
-    transform 150ms ease-out,
-    filter 150ms ease-out;
-}
-
-.button-transition:active {
-  transform: scale(0.97);
-  filter: blur(2px);
-}
-```
-
-Blur bridges visual gaps between states, tricking the eye into seeing smoother transitions. The two states blend instead of appearing as distinct objects.
-
-**Performance note:** Keep blur under 20px, especially on Safari.
-
-## Why Details Matter
-
-> "All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune."
-> — Paul Graham, Hackers and Painters
-
-Details that go unnoticed are good — users complete tasks without friction. Great interfaces enable users to achieve goals with ease, not to admire animations.
diff --git a/.gitignore b/.gitignore
index 6d265d339..335d0e235 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # Logs
 node_modules
+.cursor/
 /logs
 *.log
 npm-debug.log*
diff --git a/src/app/(dashboard)/(modules)/communications/page.tsx b/src/app/(dashboard)/(modules)/communications/page.tsx
index 085af0235..45d208cff 100644
--- a/src/app/(dashboard)/(modules)/communications/page.tsx
+++ b/src/app/(dashboard)/(modules)/communications/page.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  FileText,
-  History,
-  MessagesSquare,
-  Send,
-  Settings,
-} from 'lucide-react';
+import { FileText, History, MessagesSquare, Settings } from 'lucide-react';
 import { ModuleDashboard } from '@/components/dashboard/ModuleDashboard';
 import {
   getEmailMetrics,
@@ -61,12 +55,6 @@ export default async function CommunicationsDashboard() {
       icon: <FileText className="h-4 w-4" />,
       href: '/communications/templates',
     },
-    {
-      title: 'Send a test',
-      description: 'Send test messages across channels',
-      icon: <Send className="h-4 w-4" />,
-      href: '/communications/test',
-    },
     {
       title: 'View logs',
       description: 'Email logs and push device tokens',
diff --git a/src/app/(dashboard)/(modules)/communications/test/page.tsx b/src/app/(dashboard)/(modules)/communications/test/page.tsx
deleted file mode 100644
index 7b80da93e..000000000
--- a/src/app/(dashboard)/(modules)/communications/test/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { getEmailSettings, getTemplates } from '@/lib/api/email';
-import { getSmsSettings } from '@/lib/api/sms';
-import { getNotificationSettings } from '@/lib/api/notifications';
-import { CommunicationsTestTabs } from '@/components/communications/test/communications-test-tabs';
-import {
-  PageDescription,
-  PageHeader,
-  PageTitle,
-} from '@/components/ui/page-header';
-
-type CommunicationsTestParams = {
-  searchParams: Promise<{
-    tab?: string;
-  }>;
-};
-
-function parseTab(tab: string | undefined): 'email' | 'sms' | 'push' {
-  if (tab === 'sms' || tab === 'push') return tab;
-  return 'email';
-}
-
-export default async function CommunicationsTestPage(
-  props: Readonly<CommunicationsTestParams>
-) {
-  const searchParams = await props.searchParams;
-  const tab = parseTab(searchParams.tab);
-
-  const [
-    { config: emailSettings },
-    { config: smsSettings },
-    { config: pushSettings },
-    emailTemplates,
-  ] = await Promise.all([
-    getEmailSettings(),
-    getSmsSettings(),
-    getNotificationSettings(),
-    getTemplates({}),
-  ]);
-
-  return (
-    <div className="space-y-6">
-      <PageHeader>
-        <div>
-          <PageTitle>Test Send</PageTitle>
-          <PageDescription>
-            Send test messages to verify provider configuration.
-          </PageDescription>
-        </div>
-      </PageHeader>
-
-      <CommunicationsTestTabs
-        initialTab={tab}
-        emailSettings={emailSettings}
-        smsSettings={smsSettings}
-        pushSettings={pushSettings}
-        emailTemplates={emailTemplates}
-      />
-    </div>
-  );
-}
diff --git a/src/app/(dashboard)/(modules)/email/send/page.tsx b/src/app/(dashboard)/(modules)/email/send/page.tsx
index cfc8cd6b1..6ad398322 100644
--- a/src/app/(dashboard)/(modules)/email/send/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/send/page.tsx
@@ -1,5 +1,17 @@
-import { redirect } from 'next/navigation';
+import { LucideMail } from 'lucide-react';
+import { getTemplates } from '@/lib/api/email';
+import { SendEmailForm } from '@/components/email/send/form';
 
-export default async function Page() {
-  redirect('/communications/test?tab=email');
+export default async function SendEmailPage() {
+  const templates = await getTemplates({});
+
+  return (
+    <div className="flex flex-col space-y-6">
+      <div className="flex space-x-2 items-center">
+        <LucideMail className="w-5 h-5" />
+        <span>Compose Email</span>
+      </div>
+      <SendEmailForm templates={templates} />
+    </div>
+  );
 }
diff --git a/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx b/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
index 78639a5b6..ee0a6f129 100644
--- a/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
+++ b/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
@@ -1,5 +1,18 @@
-import { redirect } from 'next/navigation';
+import { getTokenById } from '@/lib/api/notifications';
+import { isEmpty } from 'lodash';
+import { TestSendForm } from '@/components/notifications/testSend/testSendForm';
 
-export default async function Page() {
-  redirect('/communications/test?tab=push');
+export default async function TokensPage(props: {
+  searchParams: Promise<{
+    token?: string;
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  // todo implement on backend the ability to send by token
+  let token;
+  if (!isEmpty(searchParams.token)) {
+    token = await getTokenById(searchParams.token ?? '', 'user');
+  }
+
+  return <TestSendForm token={token} />;
 }
diff --git a/src/app/(dashboard)/(modules)/sms/send/page.tsx b/src/app/(dashboard)/(modules)/sms/send/page.tsx
index 25b54f390..6996d2dee 100644
--- a/src/app/(dashboard)/(modules)/sms/send/page.tsx
+++ b/src/app/(dashboard)/(modules)/sms/send/page.tsx
@@ -1,5 +1,5 @@
-import { redirect } from 'next/navigation';
+import { TestSendSmsForm } from '@/components/sms/smsTest/testSendSmsForm';
 
-export default async function Page() {
-  redirect('/communications/test?tab=sms');
+export default async function TokensPage() {
+  return <TestSendSmsForm />;
 }
diff --git a/src/components/communications/test/channel-status-card.tsx b/src/components/communications/test/channel-status-card.tsx
deleted file mode 100644
index 2f0ee5796..000000000
--- a/src/components/communications/test/channel-status-card.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { EmailSettings } from '@/lib/models/email';
-import { SmsSettings } from '@/lib/models/Sms';
-import { NotificationSettings } from '@/lib/models/Notification';
-
-type Channel = 'email' | 'sms' | 'push';
-
-type ChannelStatusCardProps = {
-  channel: Channel;
-  emailSettings?: EmailSettings;
-  smsSettings?: SmsSettings;
-  pushSettings?: NotificationSettings;
-};
-
-function formatProviderName(value: string): string {
-  return value
-    .replace(/([A-Z])/g, ' $1')
-    .replace(/^./, char => char.toUpperCase())
-    .trim();
-}
-
-function getChannelStatus(
-  channel: Channel,
-  emailSettings?: EmailSettings,
-  smsSettings?: SmsSettings,
-  pushSettings?: NotificationSettings
-) {
-  switch (channel) {
-    case 'email':
-      return {
-        label: 'Email',
-        active: emailSettings?.active ?? false,
-        provider: emailSettings?.transport
-          ? formatProviderName(emailSettings.transport)
-          : 'Not configured',
-      };
-    case 'sms':
-      return {
-        label: 'SMS',
-        active: smsSettings?.active ?? false,
-        provider: smsSettings?.providerName
-          ? formatProviderName(smsSettings.providerName)
-          : 'Not configured',
-      };
-    case 'push':
-      return {
-        label: 'Push',
-        active: pushSettings?.active ?? false,
-        provider: pushSettings?.providerName
-          ? formatProviderName(pushSettings.providerName)
-          : 'Not configured',
-      };
-    default: {
-      const _exhaustive: never = channel;
-      return _exhaustive;
-    }
-  }
-}
-
-export function ChannelStatusCard({
-  channel,
-  emailSettings,
-  smsSettings,
-  pushSettings,
-}: ChannelStatusCardProps) {
-  const status = getChannelStatus(
-    channel,
-    emailSettings,
-    smsSettings,
-    pushSettings
-  );
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{status.label} status</CardTitle>
-        <CardDescription>Current provider configuration</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex items-center justify-between gap-2">
-          <span className="text-sm text-muted-foreground">Module</span>
-          <Badge variant={status.active ? 'default' : 'secondary'}>
-            {status.active ? 'Active' : 'Inactive'}
-          </Badge>
-        </div>
-        <div className="space-y-1">
-          <span className="text-sm text-muted-foreground">Provider</span>
-          <p className="text-sm font-medium">{status.provider}</p>
-        </div>
-        {!status.active && (
-          <p className="text-xs text-muted-foreground">
-            Enable and configure this channel before sending tests.
-          </p>
-        )}
-        <Button variant="outline" size="sm" className="w-full" asChild>
-          <Link href={`/communications/settings?tab=${channel}`}>
-            Channel settings
-          </Link>
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/src/components/communications/test/communications-test-tabs.tsx b/src/components/communications/test/communications-test-tabs.tsx
deleted file mode 100644
index bf2031f9d..000000000
--- a/src/components/communications/test/communications-test-tabs.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { SendEmailForm } from '@/components/email/send/form';
-import { TestSendSmsForm } from '@/components/sms/smsTest/testSendSmsForm';
-import { TestSendForm } from '@/components/notifications/testSend/testSendForm';
-import { ChannelStatusCard } from '@/components/communications/test/channel-status-card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { EmailSettings, EmailTemplate } from '@/lib/models/email';
-import { SmsSettings } from '@/lib/models/Sms';
-import { NotificationSettings } from '@/lib/models/Notification';
-
-const TEST_TABS = ['email', 'sms', 'push'] as const;
-type TestTab = (typeof TEST_TABS)[number];
-
-function parseTestTab(tab: string | undefined): TestTab {
-  if (tab === 'sms' || tab === 'push') return tab;
-  return 'email';
-}
-
-type CommunicationsTestTabsProps = {
-  initialTab: TestTab;
-  emailSettings: EmailSettings;
-  smsSettings: SmsSettings;
-  pushSettings: NotificationSettings;
-  emailTemplates: {
-    templateDocuments: EmailTemplate[];
-    count: number;
-  };
-};
-
-export function CommunicationsTestTabs({
-  initialTab,
-  emailSettings,
-  smsSettings,
-  pushSettings,
-  emailTemplates,
-}: CommunicationsTestTabsProps) {
-  const router = useRouter();
-  const activeTab = initialTab;
-
-  const handleTabChange = (value: string) => {
-    const tab = parseTestTab(value);
-    router.replace(`/communications/test?tab=${tab}`, { scroll: false });
-  };
-
-  const statusProps = {
-    emailSettings,
-    smsSettings,
-    pushSettings,
-  };
-
-  return (
-    <Tabs value={activeTab} onValueChange={handleTabChange}>
-      <TabsList>
-        <TabsTrigger value="email">Email</TabsTrigger>
-        <TabsTrigger value="sms">SMS</TabsTrigger>
-        <TabsTrigger value="push">Push</TabsTrigger>
-      </TabsList>
-
-      <TabsContent value="email" className="mt-6">
-        <div className="grid gap-6 lg:grid-cols-3">
-          <div className="lg:col-span-2">
-            <SendEmailForm templates={emailTemplates} />
-          </div>
-          <ChannelStatusCard channel="email" {...statusProps} />
-        </div>
-      </TabsContent>
-
-      <TabsContent value="sms" className="mt-6">
-        <div className="grid gap-6 lg:grid-cols-3">
-          <div className="lg:col-span-2">
-            <TestSendSmsForm embedded />
-          </div>
-          <ChannelStatusCard channel="sms" {...statusProps} />
-        </div>
-      </TabsContent>
-
-      <TabsContent value="push" className="mt-6">
-        <div className="grid gap-6 lg:grid-cols-3">
-          <div className="lg:col-span-2">
-            <TestSendForm embedded />
-          </div>
-          <ChannelStatusCard channel="push" {...statusProps} />
-        </div>
-      </TabsContent>
-    </Tabs>
-  );
-}
diff --git a/src/components/navigation/navList.config.ts b/src/components/navigation/navList.config.ts
index ef11a1b80..b9de1b3cd 100644
--- a/src/components/navigation/navList.config.ts
+++ b/src/components/navigation/navList.config.ts
@@ -108,7 +108,6 @@ export const navGroups: NavGroup[] = [
           { title: 'Templates', url: '/communications/templates' },
           { title: 'Logs & Devices', url: '/communications/logs' },
           { title: 'Settings', url: '/communications/settings' },
-          { title: 'Test Send', url: '/communications/test' },
         ],
       },
     ],

From eb28852b449f11cc49041b8c021e2317d744d8df Mon Sep 17 00:00:00 2001
From: Konstantinos Kopanidis <kkopanidis@users.noreply.github.com>
Date: Mon, 22 Jun 2026 18:09:40 +0300
Subject: [PATCH 4/5] Revert "chore(ui): drop cursor config and unified test
 send from PR"

This reverts commit d9ccc3ba61852868fd9b7a7022eb63cf09395ddb.
---
 .cursor/rules/api-state-management.mdc        | 560 ++++++++++++++++++
 .cursor/rules/design-context.mdc              |  45 ++
 .cursor/rules/design-intent.mdc               |  31 +
 .cursor/rules/development-environment.mdc     | 273 +++++++++
 .cursor/rules/form-validation.mdc             | 489 +++++++++++++++
 .cursor/rules/keyboard-shortcuts.mdc          |  32 +
 .cursor/rules/project-structure.mdc           |  77 +++
 .../rules/server-actions-observability.mdc    |  21 +
 .cursor/rules/typescript-standards.mdc        | 199 +++++++
 .cursor/rules/typography.mdc                  |  54 ++
 .cursor/rules/ui-component-patterns.mdc       | 336 +++++++++++
 .cursor/rules/ux-laws.mdc                     |  65 ++
 .cursor/rules/visual-design.mdc               |  33 ++
 .cursor/skills/design-audit/SKILL.md          | 265 +++++++++
 .cursor/skills/design-critique/SKILL.md       | 230 +++++++
 .cursor/skills/frontend-design/SKILL.md       | 202 +++++++
 .cursor/skills/ui-patterns/SKILL.md           |  97 +++
 .../rules/container-callback-ref.md           |  31 +
 .../rules/container-guard-initial-zero.md     |  25 +
 .../rules/container-no-excessive-use.md       |  13 +
 .../rules/container-overflow-hidden.md        |  25 +
 .../rules/container-transition-delay.md       |  21 +
 .../rules/container-two-div-pattern.md        |  35 ++
 .../rules/container-use-resize-observer.md    |  48 ++
 .../ui-patterns/rules/morphing-aria-hidden.md |  25 +
 .../rules/morphing-consistent-viewbox.md      |  23 +
 .../rules/morphing-group-variants.md          |  33 ++
 .../rules/morphing-jump-non-grouped.md        |  29 +
 .../rules/morphing-reduced-motion.md          |  28 +
 .../rules/morphing-spring-rotation.md         |  23 +
 .../rules/morphing-strokelinecap-round.md     |  21 +
 .../ui-patterns/rules/morphing-three-lines.md |  32 +
 .../rules/morphing-use-collapsed.md           |  25 +
 .../rules/native-backdrop-styling.md          |  27 +
 .../rules/native-placeholder-styling.md       |  27 +
 .../rules/native-selection-styling.md         |  18 +
 .../ui-patterns/rules/prefetch-hit-slop.md    |  27 +
 .../rules/prefetch-keyboard-tab.md            |  19 +
 .../rules/prefetch-not-everything.md          |  26 +
 .../rules/prefetch-touch-fallback.md          |  31 +
 .../rules/prefetch-trajectory-over-hover.md   |  31 +
 .../rules/prefetch-use-selectively.md         |  13 +
 .../rules/pseudo-content-required.md          |  28 +
 .../rules/pseudo-first-line-styling.md        |  29 +
 .../rules/pseudo-hit-target-expansion.md      |  31 +
 .../rules/pseudo-marker-styling.md            |  28 +
 .../ui-patterns/rules/pseudo-over-dom-node.md |  31 +
 .../rules/pseudo-position-relative-parent.md  |  33 ++
 .../rules/pseudo-z-index-layering.md          |  37 ++
 .../rules/transition-name-cleanup.md          |  28 +
 .../rules/transition-name-required.md         |  27 +
 .../rules/transition-name-unique.md           |  24 +
 .../rules/transition-over-js-library.md       |  30 +
 .../rules/transition-style-pseudo-elements.md |  26 +
 .cursor/skills/ux-heuristics/SKILL.md         |  60 ++
 .cursor/skills/ux-heuristics/reference.md     | 222 +++++++
 .cursor/skills/web-animation-design/SKILL.md  | 533 +++++++++++++++++
 .../web-animation-design/practical-tips.md    | 294 +++++++++
 .gitignore                                    |   1 -
 .../(modules)/communications/page.tsx         |  14 +-
 .../(modules)/communications/test/page.tsx    |  60 ++
 .../(dashboard)/(modules)/email/send/page.tsx |  18 +-
 .../push-notifications/test/page.tsx          |  19 +-
 .../(dashboard)/(modules)/sms/send/page.tsx   |   6 +-
 .../test/channel-status-card.tsx              | 114 ++++
 .../test/communications-test-tabs.tsx         |  89 +++
 src/components/navigation/navList.config.ts   |   1 +
 67 files changed, 5412 insertions(+), 36 deletions(-)
 create mode 100644 .cursor/rules/api-state-management.mdc
 create mode 100644 .cursor/rules/design-context.mdc
 create mode 100644 .cursor/rules/design-intent.mdc
 create mode 100644 .cursor/rules/development-environment.mdc
 create mode 100644 .cursor/rules/form-validation.mdc
 create mode 100644 .cursor/rules/keyboard-shortcuts.mdc
 create mode 100644 .cursor/rules/project-structure.mdc
 create mode 100644 .cursor/rules/server-actions-observability.mdc
 create mode 100644 .cursor/rules/typescript-standards.mdc
 create mode 100644 .cursor/rules/typography.mdc
 create mode 100644 .cursor/rules/ui-component-patterns.mdc
 create mode 100644 .cursor/rules/ux-laws.mdc
 create mode 100644 .cursor/rules/visual-design.mdc
 create mode 100644 .cursor/skills/design-audit/SKILL.md
 create mode 100644 .cursor/skills/design-critique/SKILL.md
 create mode 100644 .cursor/skills/frontend-design/SKILL.md
 create mode 100644 .cursor/skills/ui-patterns/SKILL.md
 create mode 100644 .cursor/skills/ui-patterns/rules/container-callback-ref.md
 create mode 100644 .cursor/skills/ui-patterns/rules/container-guard-initial-zero.md
 create mode 100644 .cursor/skills/ui-patterns/rules/container-no-excessive-use.md
 create mode 100644 .cursor/skills/ui-patterns/rules/container-overflow-hidden.md
 create mode 100644 .cursor/skills/ui-patterns/rules/container-transition-delay.md
 create mode 100644 .cursor/skills/ui-patterns/rules/container-two-div-pattern.md
 create mode 100644 .cursor/skills/ui-patterns/rules/container-use-resize-observer.md
 create mode 100644 .cursor/skills/ui-patterns/rules/morphing-aria-hidden.md
 create mode 100644 .cursor/skills/ui-patterns/rules/morphing-consistent-viewbox.md
 create mode 100644 .cursor/skills/ui-patterns/rules/morphing-group-variants.md
 create mode 100644 .cursor/skills/ui-patterns/rules/morphing-jump-non-grouped.md
 create mode 100644 .cursor/skills/ui-patterns/rules/morphing-reduced-motion.md
 create mode 100644 .cursor/skills/ui-patterns/rules/morphing-spring-rotation.md
 create mode 100644 .cursor/skills/ui-patterns/rules/morphing-strokelinecap-round.md
 create mode 100644 .cursor/skills/ui-patterns/rules/morphing-three-lines.md
 create mode 100644 .cursor/skills/ui-patterns/rules/morphing-use-collapsed.md
 create mode 100644 .cursor/skills/ui-patterns/rules/native-backdrop-styling.md
 create mode 100644 .cursor/skills/ui-patterns/rules/native-placeholder-styling.md
 create mode 100644 .cursor/skills/ui-patterns/rules/native-selection-styling.md
 create mode 100644 .cursor/skills/ui-patterns/rules/prefetch-hit-slop.md
 create mode 100644 .cursor/skills/ui-patterns/rules/prefetch-keyboard-tab.md
 create mode 100644 .cursor/skills/ui-patterns/rules/prefetch-not-everything.md
 create mode 100644 .cursor/skills/ui-patterns/rules/prefetch-touch-fallback.md
 create mode 100644 .cursor/skills/ui-patterns/rules/prefetch-trajectory-over-hover.md
 create mode 100644 .cursor/skills/ui-patterns/rules/prefetch-use-selectively.md
 create mode 100644 .cursor/skills/ui-patterns/rules/pseudo-content-required.md
 create mode 100644 .cursor/skills/ui-patterns/rules/pseudo-first-line-styling.md
 create mode 100644 .cursor/skills/ui-patterns/rules/pseudo-hit-target-expansion.md
 create mode 100644 .cursor/skills/ui-patterns/rules/pseudo-marker-styling.md
 create mode 100644 .cursor/skills/ui-patterns/rules/pseudo-over-dom-node.md
 create mode 100644 .cursor/skills/ui-patterns/rules/pseudo-position-relative-parent.md
 create mode 100644 .cursor/skills/ui-patterns/rules/pseudo-z-index-layering.md
 create mode 100644 .cursor/skills/ui-patterns/rules/transition-name-cleanup.md
 create mode 100644 .cursor/skills/ui-patterns/rules/transition-name-required.md
 create mode 100644 .cursor/skills/ui-patterns/rules/transition-name-unique.md
 create mode 100644 .cursor/skills/ui-patterns/rules/transition-over-js-library.md
 create mode 100644 .cursor/skills/ui-patterns/rules/transition-style-pseudo-elements.md
 create mode 100644 .cursor/skills/ux-heuristics/SKILL.md
 create mode 100644 .cursor/skills/ux-heuristics/reference.md
 create mode 100644 .cursor/skills/web-animation-design/SKILL.md
 create mode 100644 .cursor/skills/web-animation-design/practical-tips.md
 create mode 100644 src/app/(dashboard)/(modules)/communications/test/page.tsx
 create mode 100644 src/components/communications/test/channel-status-card.tsx
 create mode 100644 src/components/communications/test/communications-test-tabs.tsx

diff --git a/.cursor/rules/api-state-management.mdc b/.cursor/rules/api-state-management.mdc
new file mode 100644
index 000000000..429a3d294
--- /dev/null
+++ b/.cursor/rules/api-state-management.mdc
@@ -0,0 +1,560 @@
+---
+globs: *.ts,*.tsx
+description: API integration and state management patterns
+---
+
+# API Integration & State Management
+
+## API Architecture
+- Centralized API client in [src/lib/api/api.ts](mdc:src/lib/api/api.ts)
+- Module-specific API functions in `src/lib/api/[module]/`
+- Server actions marked with 'use server' directive
+- Environment-aware configuration with cookie-based authentication
+
+## API Client Setup
+
+### Central API Client
+```typescript
+'use server';
+import axios from 'axios';
+import { cookies } from 'next/headers';
+import { _getEnv } from '@/lib/logic/EnvManager';
+import { redirect, RedirectType } from 'next/navigation';
+
+export const getApiClient = async (env?: string) => {
+  const envCookie = (await cookies()).get('activeEnv');
+  const envDetails = await _getEnv(env ?? envCookie?.value ?? 'Local');
+
+  const axiosInstance = axios.create({
+    baseURL: envDetails.baseUrl,
+    withCredentials: true,
+    timeout: 50000,
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      masterkey: envDetails.masterKey,
+    },
+  });
+
+  // Request interceptor for auth
+  axiosInstance.interceptors.request.use(
+    async config => {
+      if (config.headers.Authorization) return config;
+      const accessToken = (await cookies()).get(`${envDetails.name}AccessToken`);
+      if (!accessToken) return config;
+      config.headers.Authorization = `Bearer ${accessToken.value}`;
+      return config;
+    },
+    error => Promise.reject(error)
+  );
+
+  // Response interceptor for error handling
+  axiosInstance.interceptors.response.use(
+    response => response,
+    async error => {
+      const { response } = error;
+      if (response?.status === 401 && error.request.path !== '/admin/login') {
+        redirect('/login?session-timeout=true', RedirectType.replace);
+      }
+      return Promise.reject(error);
+    }
+  );
+
+  return axiosInstance;
+};
+```
+
+### Module-Specific API Functions
+```typescript
+'use server';
+import { getApiClient } from '@/lib/api';
+import { User } from '@/lib/models/User';
+
+// GET endpoints with parameters
+export const getUsers = async (
+  skip: number,
+  limit: number,
+  params?: {
+    sort?: string;
+    search?: string;
+    isActive?: boolean;
+    provider?: string;
+  }
+): Promise<{ users: User[]; count: number }> => {
+  const client = await getApiClient();
+  const response = await client.get('/authentication/users', {
+    params: { skip, limit, ...params },
+  });
+  return response.data;
+};
+
+// POST endpoints
+export const createUser = async (
+  email: string,
+  password: string
+): Promise<User> => {
+  const client = await getApiClient();
+  const response = await client.post('/authentication/users', {
+    email,
+    password,
+  });
+  return response.data;
+};
+
+// PUT endpoints
+export const updateUser = async (
+  id: string,
+  data: Partial<User>
+): Promise<User> => {
+  const client = await getApiClient();
+  const response = await client.put(`/authentication/users/${id}`, data);
+  return response.data;
+};
+
+// DELETE endpoints
+export const deleteUser = async (id: string): Promise<void> => {
+  const client = await getApiClient();
+  await client.delete(`/authentication/users/${id}`);
+};
+```
+
+## Error Handling Patterns
+
+### API Error Types
+```typescript
+export interface ApiError {
+  message: string;
+  status: number;
+  statusText: string;
+  url?: string;
+  method?: string;
+  data?: any;
+}
+
+export interface ValidationError {
+  field: string;
+  message: string;
+}
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  validationErrors?: ValidationError[];
+}
+```
+
+### Error Handling Utilities
+```typescript
+export const handleApiError = (error: any): ApiResponse<never> => {
+  if (error.response) {
+    // Server responded with error status
+    const { status, statusText, data } = error.response;
+    
+    if (status === 422 && data.validationErrors) {
+      return {
+        success: false,
+        error: 'Validation failed',
+        validationErrors: data.validationErrors,
+      };
+    }
+    
+    return {
+      success: false,
+      error: data.message || statusText || 'An error occurred',
+    };
+  } else if (error.request) {
+    // Network error
+    return {
+      success: false,
+      error: 'Network error. Please check your connection.',
+    };
+  } else {
+    // Request setup error
+    return {
+      success: false,
+      error: 'An unexpected error occurred.',
+    };
+  }
+};
+
+// Usage in API functions
+export const safeCreateUser = async (
+  email: string,
+  password: string
+): Promise<ApiResponse<User>> => {
+  try {
+    const user = await createUser(email, password);
+    return { success: true, data: user };
+  } catch (error) {
+    return handleApiError(error);
+  }
+};
+```
+
+## State Management Patterns
+
+### React Context for Global State
+```typescript
+// Context definition
+interface AppContextType {
+  user: User | null;
+  environment: string;
+  modules: Module[];
+  setUser: (user: User | null) => void;
+  setEnvironment: (env: string) => void;
+  isLoading: boolean;
+}
+
+const AppContext = createContext<AppContextType | undefined>(undefined);
+
+// Provider component
+export const AppProvider = ({ children }: { children: React.ReactNode }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [environment, setEnvironment] = useState('Local');
+  const [modules, setModules] = useState<Module[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const initializeApp = async () => {
+      try {
+        const [userData, moduleData] = await Promise.all([
+          getCurrentUser(),
+          getModules(),
+        ]);
+        setUser(userData);
+        setModules(moduleData);
+      } catch (error) {
+        console.error('Failed to initialize app:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    initializeApp();
+  }, [environment]);
+
+  const value = {
+    user,
+    environment,
+    modules,
+    setUser,
+    setEnvironment,
+    isLoading,
+  };
+
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+};
+
+// Hook for consuming context
+export const useApp = () => {
+  const context = useContext(AppContext);
+  if (context === undefined) {
+    throw new Error('useApp must be used within an AppProvider');
+  }
+  return context;
+};
+```
+
+### URL State Management
+```typescript
+'use client';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { useCallback } from 'react';
+
+export const useUrlParams = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const updateParams = useCallback(
+    (updates: Record<string, string | number | boolean | null>) => {
+      const params = new URLSearchParams(searchParams.toString());
+      
+      Object.entries(updates).forEach(([key, value]) => {
+        if (value === null || value === undefined || value === '') {
+          params.delete(key);
+        } else {
+          params.set(key, String(value));
+        }
+      });
+
+      const newUrl = `${pathname}?${params.toString()}`;
+      router.push(newUrl);
+    },
+    [searchParams, pathname, router]
+  );
+
+  const getParam = useCallback(
+    (key: string, defaultValue?: string) => {
+      return searchParams.get(key) ?? defaultValue;
+    },
+    [searchParams]
+  );
+
+  return { updateParams, getParam, searchParams };
+};
+
+// Usage in components
+export const UserList = () => {
+  const { updateParams, getParam } = useUrlParams();
+  const currentPage = parseInt(getParam('page', '1'));
+  const searchTerm = getParam('search', '');
+
+  const handlePageChange = (page: number) => {
+    updateParams({ page });
+  };
+
+  const handleSearch = (search: string) => {
+    updateParams({ search, page: 1 }); // Reset to page 1 on search
+  };
+
+  return (
+    <div>
+      <SearchInput value={searchTerm} onChange={handleSearch} />
+      <UserTable page={currentPage} search={searchTerm} />
+      <Pagination current={currentPage} onChange={handlePageChange} />
+    </div>
+  );
+};
+```
+
+### Server State with React Query Pattern
+```typescript
+// Custom hook for server state
+export const useUsers = (
+  params: {
+    page?: number;
+    limit?: number;
+    search?: string;
+    isActive?: boolean;
+  } = {}
+) => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [count, setCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchUsers = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const { page = 1, limit = 10, ...otherParams } = params;
+      const skip = (page - 1) * limit;
+      const result = await getUsers(skip, limit, otherParams);
+      
+      setUsers(result.users);
+      setCount(result.count);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch users');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [params]);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  const refetch = () => {
+    fetchUsers();
+  };
+
+  return {
+    users,
+    count,
+    isLoading,
+    error,
+    refetch,
+  };
+};
+
+// Usage in components
+export const UsersPage = () => {
+  const { updateParams, getParam } = useUrlParams();
+  const page = parseInt(getParam('page', '1'));
+  const search = getParam('search', '');
+  
+  const { users, count, isLoading, error, refetch } = useUsers({
+    page,
+    search,
+    limit: 10,
+  });
+
+  if (error) {
+    return <ErrorDisplay message={error} onRetry={refetch} />;
+  }
+
+  return (
+    <div>
+      <UserTable users={users} loading={isLoading} />
+      <Pagination
+        current={page}
+        total={count}
+        pageSize={10}
+        onChange={(newPage) => updateParams({ page: newPage })}
+      />
+    </div>
+  );
+};
+```
+
+## Data Fetching Patterns
+
+### Server Components Data Fetching
+```typescript
+// Server component with data fetching
+export default async function UsersPage({
+  searchParams,
+}: {
+  searchParams: { page?: string; search?: string };
+}) {
+  const page = parseInt(searchParams.page ?? '1');
+  const search = searchParams.search ?? '';
+  const skip = (page - 1) * 10;
+
+  const { users, count } = await getUsers(skip, 10, { search });
+
+  return (
+    <div>
+      <UserTableClient 
+        initialUsers={users} 
+        initialCount={count}
+        page={page}
+        search={search}
+      />
+    </div>
+  );
+}
+```
+
+### Client Component Data Mutations
+```typescript
+'use client';
+export const CreateUserForm = ({ onSuccess }: CreateUserFormProps) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const form = useForm<CreateUserValues>();
+
+  const handleSubmit = async (data: CreateUserValues) => {
+    setIsSubmitting(true);
+    
+    try {
+      const result = await safeCreateUser(data.email, data.password);
+      
+      if (result.success) {
+        toast({
+          title: 'Success',
+          description: 'User created successfully',
+        });
+        form.reset();
+        onSuccess?.(result.data);
+      } else {
+        if (result.validationErrors) {
+          result.validationErrors.forEach((error) => {
+            form.setError(error.field as keyof CreateUserValues, {
+              message: error.message,
+            });
+          });
+        } else {
+          toast({
+            title: 'Error',
+            description: result.error,
+            variant: 'destructive',
+          });
+        }
+      }
+    } catch (error) {
+      toast({
+        title: 'Error',
+        description: 'An unexpected error occurred',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)}>
+        <InputField fieldName="email" label="Email" />
+        <InputField fieldName="password" label="Password" type="password" />
+        <Button type="submit" disabled={isSubmitting}>
+          {isSubmitting ? 'Creating...' : 'Create User'}
+        </Button>
+      </form>
+    </Form>
+  );
+};
+```
+
+## Performance Optimization
+
+### Request Deduplication
+```typescript
+// Cache API responses to prevent duplicate requests
+const requestCache = new Map<string, Promise<any>>();
+
+export const getCachedApiCall = async <T>(
+  key: string,
+  apiCall: () => Promise<T>,
+  ttl: number = 5000 // 5 seconds
+): Promise<T> => {
+  if (requestCache.has(key)) {
+    return requestCache.get(key);
+  }
+
+  const promise = apiCall();
+  requestCache.set(key, promise);
+
+  // Clear cache after TTL
+  setTimeout(() => {
+    requestCache.delete(key);
+  }, ttl);
+
+  return promise;
+};
+
+// Usage
+export const getUsers = async (params: GetUsersParams) => {
+  const cacheKey = `users-${JSON.stringify(params)}`;
+  return getCachedApiCall(cacheKey, () => _getUsers(params));
+};
+```
+
+### Optimistic Updates
+```typescript
+export const useOptimisticUserUpdate = () => {
+  const [users, setUsers] = useState<User[]>([]);
+
+  const updateUser = async (id: string, updates: Partial<User>) => {
+    // Optimistic update
+    setUsers(prev => 
+      prev.map(user => 
+        user.id === id ? { ...user, ...updates } : user
+      )
+    );
+
+    try {
+      const updatedUser = await updateUserApi(id, updates);
+      // Update with server response
+      setUsers(prev => 
+        prev.map(user => 
+          user.id === id ? updatedUser : user
+        )
+      );
+    } catch (error) {
+      // Revert optimistic update
+      setUsers(prev => 
+        prev.map(user => 
+          user.id === id ? { ...user, ...updates } : user
+        )
+      );
+      throw error;
+    }
+  };
+
+  return { users, updateUser };
+};
+```
\ No newline at end of file
diff --git a/.cursor/rules/design-context.mdc b/.cursor/rules/design-context.mdc
new file mode 100644
index 000000000..777a681d5
--- /dev/null
+++ b/.cursor/rules/design-context.mdc
@@ -0,0 +1,45 @@
+---
+description: Project design context for Conduit-UI. Guides Quintessential rule application to this existing admin panel codebase.
+globs: "**/*.{tsx,jsx,ts,js,css}"
+alwaysApply: true
+---
+
+# Design Context -- Conduit-UI
+
+This is an existing Next.js 16 admin panel. Apply Quintessential standards with awareness of what's already built.
+
+## Current Design Language (preserve)
+- Font: Inter via next/font/google -- keep
+- Color system: 26 semantic CSS variables in @theme with :root/:dark HSL channels -- extend, don't replace
+- Component library: 56 shadcn/ui + Radix primitives in src/components/ui/ -- extend, don't replace
+- Class merging: cn() (clsx + twMerge) -- use consistently
+- Variants: cva for multi-variant components -- follow this pattern for new components
+- Spacing: Tailwind v4 default 4px-based scale -- stay on-scale
+- Radius: Tokenized via --radius (0.5rem) with derived md/sm -- use radius tokens, not arbitrary values
+- Theme: next-themes with class="dark" toggle -- respect both modes
+- Overlays: Radix Dialog/Sheet + Vaul Drawer -- use for new overlays
+
+## Migration Targets (improve incrementally)
+- Typography: Add antialiased to body, text-wrap: balance on headings, tabular-nums on data columns
+- Colors: Extract hardcoded chart/viz hex values to --color-chart-* tokens
+- Colors: Define --popover and --card in :root (aligned with light theme)
+- Shadows: Use --shadow-1 through --shadow-4 layered scale; prefer shadow tokens over arbitrary shadow-[...] values
+- Animation: prefers-reduced-motion support in globals
+- Animation: Standardize on one primary easing curve where practical
+- Components: Prefer shared DataTable in src/components/ui/data-table.tsx for TanStack table UIs
+- Components: Align Textarea styling with Input (text-sm, ring-2)
+- Interaction: Add keyboard shortcut hints to tooltips where relevant
+- Interaction: Guard hover-only affordances with @media (hover: hover) where appropriate
+
+## Rules of Engagement
+- Apply Quintessential standards to ALL new code
+- When modifying existing files, improve what you touch
+- Do NOT refactor untouched code unprompted
+- Do NOT rewrite working components for style alone
+- When you spot a major violation in code you're editing, fix it silently
+- When you spot a major violation in code you're NOT editing, leave a brief comment noting the opportunity
+- Always use cn() for class merging
+- Always use cva for components with more than 2 variant axes
+- Always add both light and dark mode styles
+- Always use CSS variable colors for theme-bound UI; use chart tokens for charts/viz
+- Always respect the spacing scale -- no arbitrary pixel values
diff --git a/.cursor/rules/design-intent.mdc b/.cursor/rules/design-intent.mdc
new file mode 100644
index 000000000..2282dae77
--- /dev/null
+++ b/.cursor/rules/design-intent.mdc
@@ -0,0 +1,31 @@
+---
+description: Establish design intent before building any UI component, page, or layout. Ask the right questions before writing code.
+globs: "**/*.{tsx,jsx,vue,svelte}"
+alwaysApply: true
+---
+
+# Quintessential Design Wiki -- Design Intent
+
+Before generating UI code, answer these questions. Skip none.
+
+## The Questions
+
+1. **What one word describes how this should feel?** — Calm, fast, warm, precise, playful, confident, minimal, dense, editorial, premium. Pick one. Every decision flows from it.
+
+2. **What's the user's state of mind?** — Stressed (checkout, error, deadline)? Focused (editor, form, dashboard)? Browsing (discovery, feed, settings)? The UI must respect that state — not fight it.
+
+3. **What's the single most important element on this screen?** — Name it. If you can't, the hierarchy is wrong. If everything is important, nothing is.
+
+4. **What's the reference?** — Name a real product that nails what this should feel like. "This sidebar should feel like Linear's." "This card should feel like Airbnb's listing." A concrete reference beats abstract adjectives.
+
+5. **What can be removed?** — Before adding anything, audit what's already there. Every element must earn its place. If removing it doesn't hurt the user's ability to complete their task — remove it.
+
+6. **What's the unexpected detail?** — After the UI works and looks clean, what's the one small thing that would make someone pause? A considered empty state. A satisfying confirmation moment. A hover effect that rewards curiosity. Build the expected first, then add the memorable.
+
+## Principles
+
+- **Intent before implementation** — Decide what it should feel like before deciding how to build it. The feeling determines the font, the spacing, the animation, the density — not the other way around.
+- **Reduction is taste** — The best interfaces have less than you'd expect. Generous whitespace where users breathe, density where they need efficiency. Default to less.
+- **Emotion is functional** — A calm checkout reduces abandonment. A fast dashboard builds trust. A warm onboarding increases completion. Emotion isn't decoration — it's the product working.
+- **Consistency is invisible, inconsistency is loud** — Users never notice consistent spacing, matching shadows, aligned type. They immediately feel when something is off. Invisible is the goal.
+- **Ship the third version** — First pass: it works. Second pass: it looks right. Third pass: it feels right. Don't stop at the first.
diff --git a/.cursor/rules/development-environment.mdc b/.cursor/rules/development-environment.mdc
new file mode 100644
index 000000000..d451f2d2b
--- /dev/null
+++ b/.cursor/rules/development-environment.mdc
@@ -0,0 +1,273 @@
+---
+alwaysApply: true
+description: Node.js development environment and tooling setup
+---
+
+# Development Environment & Tooling
+
+## Node.js Environment Setup
+- **Node.js Version**: 24+ required (specified in [package.json](mdc:package.json) engines and [.nvmrc](mdc:.nvmrc))
+- **Package Manager**: pnpm (lockfile: [pnpm-lock.yaml](mdc:pnpm-lock.yaml)); enable Corepack (`corepack enable`) to use the version from `packageManager` in [package.json](mdc:package.json)
+- **Environment Variables**: Loaded from `.env`, `.env.local`, etc. by Next.js at build and runtime (see [Next.js env docs](https://nextjs.org/docs/app/guides/environment-variables))
+
+### Environment Commands
+```bash
+# Use correct Node.js version
+nvm use
+
+# Install dependencies
+pnpm install
+
+# Development server with Turbopack
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Start production server
+pnpm start
+
+# Linting
+pnpm lint
+
+# Docker build
+pnpm build:docker
+```
+
+## Project Scripts and Commands
+
+### Development Workflow
+```bash
+# Start development server with debugger and Turbopack
+NODE_OPTIONS='--inspect' next dev --turbopack
+
+# Build optimized production bundle
+next build
+
+# Start production server on port 8080
+next start -p 8080
+
+# Run ESLint (flat config: eslint.config.mjs)
+pnpm lint
+
+# Docker build for linux/amd64
+docker build --platform linux/amd64 -t ghcr.io/conduitplatform/conduit-ui:latest .
+```
+
+### Git Workflow
+```bash
+# Install git hooks (runs `husky` from package.json prepare script)
+pnpm prepare
+
+# Generate changelog and tag release
+pnpm release
+
+# Commit with conventional format (via commitizen)
+npx cz
+```
+
+## Development Dependencies
+
+### Core Development Tools
+- **Next.js 16**: React framework with App Router
+- **TypeScript 5.1+**: Type-safe development
+- **ESLint**: Code linting with Next.js configuration
+- **Prettier**: Code formatting
+- **Husky**: Git hooks for quality control
+- **lint-staged**: Run linters on staged files
+
+### Build and Release Tools
+- **Turbo**: Build system optimization
+- **Standard Version**: Automated versioning and changelog
+- **Commitizen**: Conventional commit messages
+- **Commitlint**: Validate commit message format
+- **Docker**: Containerization support
+
+## Code Quality Setup
+
+### ESLint Configuration
+Flat config in [eslint.config.mjs](mdc:eslint.config.mjs), spreading `eslint-config-next/core-web-vitals` (ESLint 9+).
+
+### Prettier Configuration
+Automatic formatting on commit via lint-staged:
+```json
+{
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  }
+}
+```
+
+### Commit Convention
+Using conventional commit format via [commitlint.config.js](mdc:commitlint.config.js):
+- `feat:` - New features
+- `fix:` - Bug fixes
+- `docs:` - Documentation changes
+- `style:` - Code style changes
+- `refactor:` - Code refactoring
+- `test:` - Test changes
+- `chore:` - Build/tooling changes
+
+## Environment Configuration
+
+### Environment Variables
+Create `.env.local` for local development:
+```env
+# API Configuration
+NEXT_PUBLIC_API_URL=http://localhost:3000
+API_SECRET_KEY=your-secret-key
+
+# Authentication
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=your-nextauth-secret
+
+# Database
+DATABASE_URL=postgresql://user:password@localhost:5432/conduit
+
+# External Services
+SMTP_HOST=smtp.example.com
+SMTP_PORT=587
+SMTP_USER=your-email@example.com
+SMTP_PASS=your-password
+```
+
+### Environment Management
+The application supports multiple environments through [src/lib/logic/EnvManager.ts](mdc:src/lib/logic/EnvManager.ts):
+- Local development
+- Staging
+- Production
+- Custom environments
+
+## Docker Development
+
+### Dockerfile Setup
+See the repo [Dockerfile](mdc:Dockerfile) for the current multi-stage build (`node:24-alpine`, `next.config.ts`, standalone output).
+
+### Docker Development Commands
+```bash
+# Build for production deployment
+docker build --platform linux/amd64 -t conduit-ui:latest .
+
+# Run locally
+docker run -p 3000:3000 conduit-ui:latest
+
+# Development with volume mounting
+docker run -p 3000:3000 -v $(pwd):/app conduit-ui:dev
+```
+
+## IDE Configuration
+
+### VS Code Settings
+Recommended `.vscode/settings.json`:
+```json
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "emmet.includeLanguages": {
+    "typescript": "html",
+    "typescriptreact": "html"
+  }
+}
+```
+
+### Recommended Extensions
+- ES7+ React/Redux/React-Native snippets
+- Prettier - Code formatter
+- ESLint
+- TypeScript Importer
+- Auto Rename Tag
+- Tailwind CSS IntelliSense
+- GitLens
+
+## Debugging Setup
+
+### Next.js Debugging
+Development server with debugging enabled:
+```bash
+NODE_OPTIONS='--inspect' next dev --turbopack
+```
+
+### Browser DevTools
+- React Developer Tools
+- Chrome DevTools for debugging
+- Network tab for API request monitoring
+
+### VS Code Debugging
+`.vscode/launch.json`:
+```json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node",
+      "request": "attach",
+      "port": 9229,
+      "skipFiles": ["<node_internals>/**"]
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    }
+  ]
+}
+```
+
+## Performance Monitoring
+
+### Next.js Bundle Analysis
+```bash
+# Analyze bundle size
+ANALYZE=true pnpm build
+
+# Check bundle composition
+npx next-bundle-analyzer
+```
+
+### Development Performance
+- Use React DevTools Profiler
+- Monitor Core Web Vitals
+- Check Network waterfall in browser DevTools
+- Use Next.js built-in performance metrics
+
+## Deployment Considerations
+
+### Production Build Optimization
+- Enable Next.js standalone output mode
+- Optimize images with Next.js Image component
+- Use dynamic imports for code splitting
+- Implement proper caching strategies
+
+### Environment-Specific Builds
+```bash
+# Development build
+NODE_ENV=development pnpm build
+
+# Production build with optimizations
+NODE_ENV=production pnpm build
+
+# Staging build
+NODE_ENV=staging pnpm build
+```
+
+## Troubleshooting
+
+### Common Issues
+1. **Node version mismatch**: Use `nvm use` (reads `.nvmrc`) or install Node 24+
+2. **Package conflicts**: Clear node_modules and reinstall
+3. **Port conflicts**: Change port with `next dev -p 3001`
+4. **Memory issues**: Increase Node.js memory with `NODE_OPTIONS="--max-old-space-size=4096"`
+
+### Reset Development Environment
+```bash
+# Clear all caches and reinstall
+rm -rf node_modules .next
+pnpm install
+pnpm dev
+```
\ No newline at end of file
diff --git a/.cursor/rules/form-validation.mdc b/.cursor/rules/form-validation.mdc
new file mode 100644
index 000000000..f8be274dc
--- /dev/null
+++ b/.cursor/rules/form-validation.mdc
@@ -0,0 +1,489 @@
+---
+globs: *.tsx,*.ts
+description: Form validation and data handling patterns
+---
+
+# Form Validation & Data Handling
+
+## Form Architecture
+- Use `react-hook-form` for form state management
+- Use `zod` for schema validation with `@hookform/resolvers/zod`
+- Custom form input components wrap shadcn/ui base components
+- Server actions for form submission
+
+## Zod Schema Patterns
+
+### Basic Schema Definition
+```typescript
+import { z } from 'zod';
+
+const userSchema = z.object({
+  email: z.string().email('Please enter a valid email address'),
+  password: z.string().min(6, 'Password must be at least 6 characters long'),
+  name: z.string().min(1, 'Name is required'),
+  isActive: z.boolean().default(true),
+  role: z.enum(['admin', 'user', 'viewer']),
+});
+
+type UserFormValues = z.infer<typeof userSchema>;
+```
+
+### Complex Schema Patterns
+```typescript
+// Nested objects
+const addressSchema = z.object({
+  street: z.string().min(1, 'Street is required'),
+  city: z.string().min(1, 'City is required'),
+  zipCode: z.string().regex(/^\d{5}$/, 'Invalid zip code'),
+});
+
+const userWithAddressSchema = z.object({
+  ...userSchema.shape,
+  address: addressSchema,
+});
+
+// Arrays and dynamic fields
+const modelSchema = z.object({
+  name: z.string().min(1, 'Model name is required'),
+  fields: z.array(z.object({
+    name: z.string().min(1, 'Field name is required'),
+    type: z.enum(['String', 'Number', 'Boolean', 'Date']),
+    required: z.boolean().default(false),
+    unique: z.boolean().default(false),
+  })),
+  indices: z.array(z.object({
+    name: z.string().min(1, 'Index name is required'),
+    fields: z.array(z.string()).min(1, 'At least one field is required'),
+    unique: z.boolean().default(false),
+  })),
+});
+
+// Conditional validation
+const conditionalSchema = z.object({
+  type: z.enum(['user', 'admin']),
+  permissions: z.array(z.string()).optional(),
+}).refine((data) => {
+  if (data.type === 'admin' && (!data.permissions || data.permissions.length === 0)) {
+    return false;
+  }
+  return true;
+}, {
+  message: 'Admin users must have at least one permission',
+  path: ['permissions'],
+});
+```
+
+### Schema Reuse and Composition
+```typescript
+// Base schemas
+const baseUserSchema = z.object({
+  email: z.string().email(),
+  name: z.string().min(1),
+});
+
+// Extended schemas
+const createUserSchema = baseUserSchema.extend({
+  password: z.string().min(6),
+});
+
+const updateUserSchema = baseUserSchema.partial().extend({
+  id: z.string(),
+});
+
+// Pick and omit
+const loginSchema = baseUserSchema.pick({ email: true }).extend({
+  password: z.string().min(1, 'Password is required'),
+});
+```
+
+## React Hook Form Integration
+
+### Basic Form Setup
+```typescript
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form } from '@/components/ui/form';
+
+export const UserForm = ({ onSubmit, defaultValues }: UserFormProps) => {
+  const form = useForm<UserFormValues>({
+    resolver: zodResolver(userSchema),
+    defaultValues: {
+      email: '',
+      name: '',
+      isActive: true,
+      ...defaultValues,
+    },
+  });
+
+  const handleSubmit = async (data: UserFormValues) => {
+    try {
+      await onSubmit(data);
+      form.reset();
+    } catch (error) {
+      // Handle errors
+    }
+  };
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+        <InputField fieldName="email" label="Email" type="email" />
+        <InputField fieldName="name" label="Name" />
+        <CheckboxField fieldName="isActive" label="Active User" />
+        <Button type="submit" disabled={form.formState.isSubmitting}>
+          {form.formState.isSubmitting ? 'Saving...' : 'Save User'}
+        </Button>
+      </form>
+    </Form>
+  );
+};
+```
+
+### Advanced Form Patterns
+
+#### Dynamic Field Arrays
+```typescript
+import { useFieldArray } from 'react-hook-form';
+
+export const ModelEditor = () => {
+  const form = useForm<ModelFormValues>({
+    resolver: zodResolver(modelSchema),
+    defaultValues: {
+      name: '',
+      fields: [{ name: '', type: 'String', required: false, unique: false }],
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: 'fields',
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <InputField fieldName="name" label="Model Name" />
+        
+        {fields.map((field, index) => (
+          <div key={field.id} className="grid grid-cols-4 gap-2 items-end">
+            <InputField fieldName={`fields.${index}.name`} label="Field Name" />
+            <SelectField 
+              fieldName={`fields.${index}.type`} 
+              label="Type"
+              options={[
+                { value: 'String', label: 'String' },
+                { value: 'Number', label: 'Number' },
+                { value: 'Boolean', label: 'Boolean' },
+              ]}
+            />
+            <CheckboxField fieldName={`fields.${index}.required`} label="Required" />
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={() => remove(index)}
+            >
+              <TrashIcon className="h-4 w-4" />
+            </Button>
+          </div>
+        ))}
+        
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => append({ name: '', type: 'String', required: false, unique: false })}
+        >
+          Add Field
+        </Button>
+      </form>
+    </Form>
+  );
+};
+```
+
+#### Watched Form Values
+```typescript
+import { useWatch } from 'react-hook-form';
+
+export const ConditionalForm = () => {
+  const form = useForm<FormValues>();
+  const watchedType = useWatch({ control: form.control, name: 'type' });
+  
+  return (
+    <Form {...form}>
+      <form>
+        <SelectField 
+          fieldName="type" 
+          label="User Type"
+          options={[
+            { value: 'user', label: 'Regular User' },
+            { value: 'admin', label: 'Administrator' },
+          ]}
+        />
+        
+        {watchedType === 'admin' && (
+          <MultiSelectField 
+            fieldName="permissions" 
+            label="Permissions"
+            options={permissionOptions}
+          />
+        )}
+      </form>
+    </Form>
+  );
+};
+```
+
+## Custom Form Components
+
+### Input Field Component
+```typescript
+interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  fieldName: string;
+  label: string;
+  info?: string;
+  description?: string;
+  classNames?: {
+    label?: string;
+    input?: string;
+    error?: string;
+    formItem?: string;
+  };
+}
+
+export const InputField = ({
+  fieldName,
+  label,
+  info,
+  description,
+  classNames = {},
+  ...inputProps
+}: InputFieldProps) => {
+  const { control } = useFormContext();
+
+  return (
+    <FormField
+      name={fieldName}
+      control={control}
+      render={({ field }) => (
+        <FormItem className={cn('w-full space-y-0.5', classNames.formItem)}>
+          <FormLabel className={cn('flex gap-2 pl-1 text-base font-medium', classNames.label)}>
+            {label}
+            {info && (
+              <TooltipHelper content={info}>
+                <InfoIcon className="h-4 w-4" />
+              </TooltipHelper>
+            )}
+          </FormLabel>
+          <FormControl>
+            <Input
+              {...field}
+              {...inputProps}
+              className={classNames.input}
+            />
+          </FormControl>
+          {description && (
+            <FormDescription className="text-xs pl-1 text-muted-foreground">
+              {description}
+            </FormDescription>
+          )}
+          <FormMessage className={cn('text-xs pl-1', classNames.error)} />
+        </FormItem>
+      )}
+    />
+  );
+};
+```
+
+### Select Field Component
+```typescript
+interface SelectFieldProps {
+  fieldName: string;
+  label: string;
+  placeholder?: string;
+  options: Array<{ value: string; label: string }>;
+  info?: string;
+}
+
+export const SelectField = ({
+  fieldName,
+  label,
+  placeholder = 'Select an option',
+  options,
+  info,
+}: SelectFieldProps) => {
+  const { control } = useFormContext();
+
+  return (
+    <FormField
+      name={fieldName}
+      control={control}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel className="flex gap-2 pl-1 text-base font-medium">
+            {label}
+            {info && (
+              <TooltipHelper content={info}>
+                <InfoIcon className="h-4 w-4" />
+              </TooltipHelper>
+            )}
+          </FormLabel>
+          <Select onValueChange={field.onChange} defaultValue={field.value}>
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder={placeholder} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              {options.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <FormMessage className="text-xs pl-1" />
+        </FormItem>
+      )}
+    />
+  );
+};
+```
+
+## Error Handling
+
+### Form Error Display
+```typescript
+// Global form errors
+const form = useForm({
+  resolver: zodResolver(schema),
+});
+
+// Set server errors
+const handleSubmit = async (data: FormValues) => {
+  try {
+    await submitData(data);
+  } catch (error) {
+    if (error.response?.data?.errors) {
+      // Set field-specific errors
+      Object.entries(error.response.data.errors).forEach(([field, message]) => {
+        form.setError(field as keyof FormValues, {
+          type: 'server',
+          message: message as string,
+        });
+      });
+    } else {
+      // Set root error
+      form.setError('root', {
+        type: 'server',
+        message: 'Something went wrong. Please try again.',
+      });
+    }
+  }
+};
+
+// Display root errors
+{form.formState.errors.root && (
+  <Alert variant="destructive">
+    <AlertDescription>
+      {form.formState.errors.root.message}
+    </AlertDescription>
+  </Alert>
+)}
+```
+
+### Loading States
+```typescript
+export const FormWithLoading = () => {
+  const form = useForm<FormValues>();
+  const { isSubmitting, isValid } = form.formState;
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        {/* Form fields */}
+        
+        <div className="flex gap-2">
+          <Button 
+            type="submit" 
+            disabled={isSubmitting || !isValid}
+            className="min-w-[100px]"
+          >
+            {isSubmitting ? (
+              <>
+                <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              'Save'
+            )}
+          </Button>
+          <Button type="button" variant="outline" disabled={isSubmitting}>
+            Cancel
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+};
+```
+
+## Server Actions Integration
+
+### Form Submission with Server Actions
+```typescript
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+
+export async function createUser(formData: FormData) {
+  // Validate data
+  const validatedFields = userSchema.safeParse({
+    email: formData.get('email'),
+    name: formData.get('name'),
+    password: formData.get('password'),
+  });
+
+  if (!validatedFields.success) {
+    return {
+      errors: validatedFields.error.flatten().fieldErrors,
+    };
+  }
+
+  try {
+    // Create user
+    await apiCreateUser(validatedFields.data);
+    
+    // Revalidate and redirect
+    revalidatePath('/users');
+    redirect('/users');
+  } catch (error) {
+    return {
+      message: 'Failed to create user',
+    };
+  }
+}
+
+// Client component usage
+export const CreateUserForm = () => {
+  const [state, formAction] = useActionState(createUser, initialState);
+
+  return (
+    <form action={formAction}>
+      <InputField name="email" label="Email" />
+      {state?.errors?.email && (
+        <p className="text-sm text-destructive">{state.errors.email}</p>
+      )}
+      
+      <Button type="submit">Create User</Button>
+      
+      {state?.message && (
+        <Alert variant="destructive">
+          <AlertDescription>{state.message}</AlertDescription>
+        </Alert>
+      )}
+    </form>
+  );
+};
+```
\ No newline at end of file
diff --git a/.cursor/rules/keyboard-shortcuts.mdc b/.cursor/rules/keyboard-shortcuts.mdc
new file mode 100644
index 000000000..553659241
--- /dev/null
+++ b/.cursor/rules/keyboard-shortcuts.mdc
@@ -0,0 +1,32 @@
+---
+description: Apply standard keyboard shortcut conventions when building interactive web applications.
+globs: "**/*.{tsx,jsx,ts,js,vue,svelte}"
+alwaysApply: true
+---
+
+# Quintessential Design Wiki -- Keyboard Shortcuts
+
+9 keyboard conventions every web app must support. When building interactive components, wire these up and show shortcut hints in tooltips.
+
+## Conventions
+
+| Shortcut | Action | Notes |
+|----------|--------|-------|
+| `Escape` | Close the current overlay | Modals, drawers, popovers, dropdowns, command palette — Escape always exits. No exceptions. |
+| `Enter` | Confirm the primary action | Submit forms, click the focused button (Save, Login, Confirm). Enter = "do the obvious thing." |
+| `Cmd+K` | Open command palette / search | The universal launcher. Users expect this from Linear, Slack, GitHub, Vercel, Raycast. |
+| `Cmd+/` | Toggle help or shortcut cheat sheet | Show available shortcuts in context. |
+| `Cmd+S` | Toggle sidebar | Override browser Save Page with `preventDefault`. Only override because the action is immediately useful. |
+| `Cmd+Backspace` | Delete selected item | Must trigger a confirmation dialog. Never delete silently. |
+| `Cmd+A` | Select / highlight all text | Respect native behavior in text inputs. Override only in custom list/grid contexts to select all items. |
+| `Arrow keys` | Navigate lists, menus, tabs | Move focus through items. Never animate focus movement — instant only. |
+| `Tab` / `Shift+Tab` | Move focus forward / backward | Standard focus traversal through interactive elements. Never trap focus outside of modals. |
+
+## Rules
+
+- **Cross-platform mapping** — `Cmd` on macOS becomes `Ctrl` on Windows/Linux. Detect with `navigator.userAgent` or `event.metaKey` vs `event.ctrlKey`. Show the correct glyph (`⌘` vs `Ctrl`) based on platform.
+- **Never override sacred browser shortcuts** — `Cmd+C`, `Cmd+V`, `Cmd+X` (clipboard), `Cmd+T` (new tab), `Cmd+W` (close tab), `Cmd+R` (reload), `Cmd+L` (address bar). These belong to the browser.
+- **Show shortcut hints** — Tooltips on buttons and menu items should display the keyboard shortcut in a `<kbd>` element. "Toggle sidebar ⌘S" not just "Toggle sidebar."
+- **No animation on keyboard actions** — Arrow key navigation, Tab focus, Enter confirmation — all instant. Animation adds latency to actions users repeat hundreds of times.
+- **Focus must be visible** — Every element reachable by Tab must have a visible focus ring. Use `focus-visible` to show rings only on keyboard navigation, not mouse clicks.
+- **Scope shortcuts to context** — `Cmd+Backspace` deletes only when an item is selected. `Arrow keys` navigate only when a list/menu is focused. Shortcuts must not fire globally when the user is typing in an input field.
diff --git a/.cursor/rules/project-structure.mdc b/.cursor/rules/project-structure.mdc
new file mode 100644
index 000000000..41e806be8
--- /dev/null
+++ b/.cursor/rules/project-structure.mdc
@@ -0,0 +1,77 @@
+---
+alwaysApply: true
+description: Project structure and architecture guidelines for Conduit UI
+---
+
+# Project Structure & Architecture Guide
+
+## Overview
+Conduit UI is a Next.js 16 admin panel for the Conduit Platform with React Server Components, built with TypeScript, Tailwind CSS, and shadcn/ui components.
+
+## Directory Structure
+
+### Core Application Structure
+- [src/app](mdc:src/app) - Next.js App Router pages and layouts
+  - [src/app/(dashboard)](mdc:src/app/(dashboard)) - Dashboard layout group
+  - [src/app/(dashboard)/(modules)](mdc:src/app/(dashboard)/(modules)) - Module-specific pages
+  - [src/app/login](mdc:src/app/login) - Authentication pages
+- [src/components](mdc:src/components) - Reusable React components organized by feature
+- [src/lib](mdc:src/lib) - Utility functions, API clients, and business logic
+- [src/contexts](mdc:src/contexts) - React context providers
+- [src/types](mdc:src/types) - TypeScript type definitions
+
+### Module Organization
+Each module follows a consistent structure under `src/components/[module-name]/`:
+- Dashboard components
+- Feature-specific components (users, settings, etc.)
+- Form components
+- Table components
+- Dialog/modal components
+
+### Key Configuration Files
+- [package.json](mdc:package.json) - Dependencies and scripts (Node.js 24+ required)
+- [tsconfig.json](mdc:tsconfig.json) - TypeScript configuration with path mapping
+- [tailwind.config.js](mdc:tailwind.config.js) - Tailwind CSS with custom design system
+- [next.config.ts](mdc:next.config.ts) - Next.js configuration (env from `.env*` files, loaded by Next)
+- [components.json](mdc:components.json) - shadcn/ui component configuration
+
+## Architecture Patterns
+
+### Component Architecture
+- Use React Server Components for data fetching where possible
+- Client components marked with 'use client' directive
+- Custom UI components extend shadcn/ui base components
+- Form components use react-hook-form with Zod validation
+
+### API Layer
+- [src/lib/api/api.ts](mdc:src/lib/api/api.ts) - Central API client with axios
+- Module-specific API functions in `src/lib/api/[module]/`
+- Server actions marked with 'use server' directive
+- Environment-aware API client with cookie-based auth
+
+### State Management
+- React Context for global state ([src/contexts](mdc:src/contexts))
+- React Hook Form for form state
+- URL state for navigation and filters
+- Server state via API calls
+
+### Styling System
+- Tailwind CSS with custom design tokens
+- CSS variables for theming (light/dark mode support)
+- Component variants using class-variance-authority (cva)
+- Consistent spacing and typography scale
+
+## Module Pattern
+Each Conduit module (Authentication, Database, Email, etc.) follows:
+1. Main dashboard page at `/[module]`
+2. Feature pages at `/[module]/[feature]`
+3. Settings page at `/[module]/settings`
+4. Components organized in `src/components/[module]/`
+5. API functions in `src/lib/api/[module]/`
+6. Type definitions in `src/lib/models/[module]/`
+
+## Navigation Structure
+- Sidebar navigation defined in [src/components/navigation/navList.config.ts](mdc:src/components/navigation/navList.config.ts)
+- Module-based routing with consistent URL patterns
+- Breadcrumb navigation for deep pages
+- Environment switching capability
\ No newline at end of file
diff --git a/.cursor/rules/server-actions-observability.mdc b/.cursor/rules/server-actions-observability.mdc
new file mode 100644
index 000000000..aa04dfeda
--- /dev/null
+++ b/.cursor/rules/server-actions-observability.mdc
@@ -0,0 +1,21 @@
+---
+description: Server-only Prometheus, Loki, and env-bound data; Next.js use server boundaries
+globs: src/lib/prometheus/**,src/lib/loki/**,src/lib/observability/**,src/lib/logic/EnvManager.ts
+alwaysApply: false
+---
+
+# Server-side metrics, logs, and secrets
+
+## Rules
+
+1. **Never import Prometheus or Loki HTTP clients, or `EnvManager` / cookie-backed env resolution, from Client Components** except through explicit **Server Actions** defined in a dedicated file that starts with `'use server';` and exports **only async** functions (e.g. [`lokiAvailability.actions.ts`](mdc:src/lib/observability/lokiAvailability.actions.ts)).
+
+2. **File-level `'use server'`** means every export must be an async Server Action. Do **not** add synchronous function exports to such a file. Put sync helpers (e.g. building config from `Environment`) in a sibling module with **`import 'server-only';`** at the top (e.g. [`envConfig.ts`](mdc:src/lib/prometheus/envConfig.ts)).
+
+3. Use **`import 'server-only';`** in modules that must never run in the browser: Prometheus env config, observability guards, and any code that touches secrets or admin backends. This fails the build if a Client Component imports the module by mistake.
+
+4. **Prometheus HTTP**: [`client.ts`](mdc:src/lib/prometheus/client.ts) uses `'use server';` — all exports there are async server actions. Sync env mapping lives in [`envConfig.ts`](mdc:src/lib/prometheus/envConfig.ts) with `server-only`.
+
+5. **Loki from the client**: only import [`getLokiAvailability`](mdc:src/lib/observability/lokiAvailability.actions.ts) from the actions file. Do **not** import [`lokiAvailabilityCore.ts`](mdc:src/lib/observability/lokiAvailabilityCore.ts) from client code.
+
+6. **Shared types** for props (`ObservabilityServiceState`, etc.) stay in [`types.ts`](mdc:src/lib/observability/types.ts) with no `server-only` so Client Components can import types only.
diff --git a/.cursor/rules/typescript-standards.mdc b/.cursor/rules/typescript-standards.mdc
new file mode 100644
index 000000000..240be89e6
--- /dev/null
+++ b/.cursor/rules/typescript-standards.mdc
@@ -0,0 +1,199 @@
+---
+globs: *.ts,*.tsx
+description: TypeScript coding standards and best practices
+---
+
+# TypeScript & Code Quality Standards
+
+## TypeScript Configuration
+- Use strict TypeScript settings as defined in [tsconfig.json](mdc:tsconfig.json)
+- Enable `strict: true`, `forceConsistentCasingInFileNames: true`
+- Use path mapping with `@/*` alias for src directory imports
+- Target ES5 with modern library support
+
+## Import & Export Patterns
+
+### Import Order
+1. React and Next.js imports
+2. External library imports
+3. Internal library/utility imports (`@/lib/*`)
+4. Component imports (`@/components/*`)
+5. Type-only imports (use `import type`)
+
+```typescript
+import { useState } from 'react';
+import { NextPage } from 'next';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { getApiClient } from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import type { User } from '@/lib/models/User';
+```
+
+### Export Patterns
+- Use named exports for components and utilities
+- Use default exports only for pages and layout components
+- Export types separately when needed
+
+```typescript
+export const UserCard = () => { ... };
+export type UserCardProps = { ... };
+export default function UserPage() { ... } // Pages only
+```
+
+## Type Definitions
+
+### Interface vs Type
+- Use `interface` for object shapes that might be extended
+- Use `type` for unions, intersections, and computed types
+- Prefer `interface` for component props
+
+```typescript
+// Good
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary';
+}
+
+// Good
+type Status = 'pending' | 'approved' | 'rejected';
+type ApiResponse<T> = { data: T; error?: string };
+```
+
+### Prop Types
+- Always type component props explicitly
+- Use generic constraints where appropriate
+- Prefer readonly for props that shouldn't be mutated
+
+```typescript
+interface UserListProps {
+  readonly users: User[];
+  readonly onUserSelect: (user: User) => void;
+  readonly loading?: boolean;
+}
+```
+
+## Function Definitions
+
+### Function Declaration Styles
+- Use arrow functions for components and simple functions
+- Use function declarations for complex utilities
+- Use async/await over Promises
+
+```typescript
+// Components
+export const UserCard = ({ user, onEdit }: UserCardProps) => {
+  return <div>{user.name}</div>;
+};
+
+// API functions
+export const getUsers = async (params: GetUsersParams): Promise<User[]> => {
+  const client = await getApiClient();
+  const response = await client.get('/users', { params });
+  return response.data;
+};
+```
+
+### Generic Functions
+- Use descriptive generic names
+- Provide constraints when necessary
+- Use default generic values when appropriate
+
+```typescript
+export const createApiFunction = <TRequest, TResponse = any>(
+  endpoint: string
+) => {
+  return async (data: TRequest): Promise<TResponse> => {
+    // implementation
+  };
+};
+```
+
+## Code Quality Standards
+
+### Naming Conventions
+- Use PascalCase for components, interfaces, types, and classes
+- Use camelCase for functions, variables, and methods
+- Use SCREAMING_SNAKE_CASE for constants
+- Use kebab-case for file names
+
+```typescript
+// Good
+const API_ENDPOINTS = {
+  USERS: '/users',
+  AUTH: '/auth'
+} as const;
+
+interface UserPreferences {
+  readonly theme: 'light' | 'dark';
+}
+
+const getUserPreferences = async () => { ... };
+```
+
+### Error Handling
+- Use try/catch blocks for async operations
+- Create typed error classes when needed
+- Use Result types for operations that can fail
+
+```typescript
+// API error handling
+try {
+  const users = await getUsers();
+  return { success: true, data: users };
+} catch (error) {
+  console.error('Failed to fetch users:', error);
+  return { success: false, error: 'Failed to fetch users' };
+}
+```
+
+### Performance Considerations
+- Use `React.memo` for expensive components
+- Use `useCallback` and `useMemo` judiciously
+- Prefer server components when possible
+- Use proper TypeScript utility types
+
+```typescript
+// Use utility types
+type CreateUserRequest = Pick<User, 'email' | 'name'>;
+type UserUpdate = Partial<Pick<User, 'name' | 'email'>>;
+
+// Memoized component
+export const UserList = React.memo<UserListProps>(({ users, onSelect }) => {
+  const sortedUsers = useMemo(
+    () => users.sort((a, b) => a.name.localeCompare(b.name)),
+    [users]
+  );
+  
+  return (
+    <div>
+      {sortedUsers.map(user => (
+        <UserCard key={user.id} user={user} onSelect={onSelect} />
+      ))}
+    </div>
+  );
+});
+```
+
+## ESLint & Prettier Integration
+- Follow Next.js ESLint configuration
+- Use Prettier for consistent formatting
+- Prefer single quotes for strings
+- Use trailing commas
+- Set line length to 80-100 characters
+
+## Documentation Standards
+- Use TSDoc comments for public APIs
+- Document complex types and interfaces
+- Include examples for utility functions
+
+```typescript
+/**
+ * Fetches user data with pagination and filtering
+ * @param params - Query parameters for filtering users
+ * @returns Promise resolving to paginated user data
+ * @example
+ * const users = await getUsers({ page: 1, limit: 10, search: 'john' });
+ */
+export const getUsers = async (params: GetUsersParams): Promise<PaginatedUsers> => {
+  // implementation
+};
+```
\ No newline at end of file
diff --git a/.cursor/rules/typography.mdc b/.cursor/rules/typography.mdc
new file mode 100644
index 000000000..e10fe681c
--- /dev/null
+++ b/.cursor/rules/typography.mdc
@@ -0,0 +1,54 @@
+---
+description: Apply typography best practices when setting fonts, numeric formatting, or text properties in CSS.
+globs: "**/*.{css,scss,tsx,jsx,vue,svelte,html}"
+alwaysApply: true
+---
+
+# Quintessential Design Wiki -- Typography
+
+16 rules for typographically considered interfaces. Apply when setting any font or text property.
+
+## Numeric Formatting
+
+- `type-tabular-nums-for-data` -- Use `font-variant-numeric: tabular-nums` for columns, dashboards, pricing. Fixed-width digits align.
+- `type-oldstyle-nums-for-prose` -- Use `font-variant-numeric: oldstyle-nums` in body text so numbers blend with lowercase.
+- `type-slashed-zero` -- Enable `font-variant-numeric: slashed-zero` in code-adjacent UIs to distinguish 0 from O.
+- `type-proper-fractions` -- Use `font-variant-numeric: diagonal-fractions` for typographic fractions.
+
+## OpenType Features
+
+- `type-opentype-contextual-alternates` -- Keep `font-feature-settings: "calt" 1` enabled for contextual glyph adjustment.
+- `type-disambiguation-stylistic-set` -- Enable `ss02` in code-facing UIs to distinguish I/l/1 and 0/O.
+
+## Rendering
+
+- `type-optical-sizing-auto` -- Leave `font-optical-sizing: auto` for size-adaptive glyph shapes.
+- `type-antialiased-on-retina` -- Set `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` on body.
+- `type-no-font-synthesis` -- Set `font-synthesis: none` on display/icon fonts to prevent faux bold/italic.
+- `type-font-display-swap` -- Use `font-display: swap` in `@font-face` so text renders immediately with fallback.
+
+## Text Wrapping
+
+- `type-text-wrap-balance-headings` -- Use `text-wrap: balance` on headings for roughly equal line lengths.
+- `type-text-wrap-pretty` -- Use `text-wrap: pretty` on body text to reduce orphans.
+- `type-justify-with-hyphens` -- Pair `text-align: justify` with `hyphens: auto` to prevent rivers of whitespace.
+
+## Spacing & Decoration
+
+- `type-underline-offset` -- Use `text-underline-offset: 3px` with `text-decoration-skip-ink: auto` to push underlines below descenders.
+- `type-letter-spacing-uppercase` -- Add `letter-spacing: 0.05em` to uppercase and small-caps text.
+- `type-variable-weight-continuous` -- Variable fonts accept any integer 100-900, not just standard stops. Use `font-weight: 450` or `550`.
+
+## Quick Reference
+
+| Property | Use Case | Value |
+|----------|----------|-------|
+| `font-variant-numeric: tabular-nums` | Data tables, pricing | Fixed-width digits |
+| `font-variant-numeric: oldstyle-nums` | Body text | Blends with lowercase |
+| `font-variant-numeric: slashed-zero` | Code UIs | Distinguishes 0 from O |
+| `font-feature-settings: "ss02"` | Code UIs | Disambiguates I/l/1 |
+| `font-optical-sizing: auto` | Everywhere | Size-adaptive glyphs |
+| `-webkit-font-smoothing: antialiased` | Retina displays | Thinner, cleaner text |
+| `text-wrap: balance` | Headings | Even line lengths |
+| `text-underline-offset: 3px` | Links | Clear descender space |
+| `font-synthesis: none` | Display/icon fonts | Prevents faux styles |
diff --git a/.cursor/rules/ui-component-patterns.mdc b/.cursor/rules/ui-component-patterns.mdc
new file mode 100644
index 000000000..8469bae63
--- /dev/null
+++ b/.cursor/rules/ui-component-patterns.mdc
@@ -0,0 +1,336 @@
+---
+globs: *.tsx,*.css
+description: UI/UX patterns and component design guidelines
+---
+
+# UI/UX & Component Patterns
+
+## Design System Foundation
+- Built on shadcn/ui component library with Radix UI primitives
+- Tailwind CSS with custom design tokens in [tailwind.config.js](mdc:tailwind.config.js)
+- Dark/light theme support with CSS variables
+- Consistent spacing, typography, and color scales
+
+## Component Architecture
+
+### shadcn/ui Components
+Base UI components are located in [src/components/ui](mdc:src/components/ui):
+- [Button](mdc:src/components/ui/button.tsx) - Primary interaction element
+- [Form components](mdc:src/components/ui/form.tsx) - Form structure and validation
+- Input, Select, Dialog, Sheet, etc. - All following shadcn/ui patterns
+
+### Component Variant System
+Use `class-variance-authority` (cva) for component variants:
+
+```typescript
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+```
+
+### Component Composition Patterns
+
+#### Form Input Components
+Custom form inputs extend base UI components with consistent patterns:
+
+```typescript
+interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  fieldName: string;
+  label: string;
+  info?: string;
+  description?: string;
+  classNames?: {
+    label?: string;
+    input?: string;
+    error?: string;
+    formItem?: string;
+    description?: string;
+  };
+}
+
+const InputField = ({ fieldName, label, info, ...props }: InputFieldProps) => {
+  const { control } = useFormContext();
+  
+  return (
+    <FormField
+      name={fieldName}
+      control={control}
+      render={({ field }) => (
+        <FormItem className="w-full space-y-0.5">
+          <FormLabel className="flex gap-2 pl-1 text-base font-medium">
+            {label}
+            {info && <TooltipHelper content={info}><InfoIcon /></TooltipHelper>}
+          </FormLabel>
+          <FormControl>
+            <Input {...field} {...props} />
+          </FormControl>
+          <FormMessage className="text-xs pl-1" />
+        </FormItem>
+      )}
+    />
+  );
+};
+```
+
+#### Dialog/Modal Components
+Use Sheet for side panels, Dialog for modals:
+
+```typescript
+export const AddUserSheet = ({ children, onSuccess }: AddUserSheetProps) => {
+  const [open, setOpen] = useState(false);
+  
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>{children}</SheetTrigger>
+      <SheetContent className="w-full sm:max-w-md">
+        <SheetHeader>
+          <SheetTitle>Add New User</SheetTitle>
+          <SheetDescription>Create a new user account</SheetDescription>
+        </SheetHeader>
+        {/* Form content */}
+        <SheetFooter>
+          <Button type="submit">Save</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+};
+```
+
+## Layout Patterns
+
+### Page Layout Structure
+```typescript
+export default function ModulePage() {
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between p-6 border-b">
+        <h1 className="text-2xl font-semibold">Page Title</h1>
+        <Button>Primary Action</Button>
+      </div>
+      
+      {/* Content */}
+      <div className="flex-1 p-6 overflow-auto">
+        {/* Main content */}
+      </div>
+    </div>
+  );
+}
+```
+
+### Dashboard Grid Layouts
+```typescript
+export const ModuleDashboard = () => {
+  return (
+    <div className="grid gap-6 p-6">
+      {/* Metrics Row */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <MetricCard title="Total Users" value="1,234" />
+        <MetricCard title="Active Sessions" value="856" />
+      </div>
+      
+      {/* Content Grid */}
+      <div className="grid gap-6 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent Activity</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {/* Activity list */}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+```
+
+## Data Display Patterns
+
+### Table Components
+Use @tanstack/react-table for complex data tables:
+
+```typescript
+export const UserDataTable = ({ data }: { data: User[] }) => {
+  const columns: ColumnDef<User>[] = [
+    {
+      accessorKey: 'email',
+      header: 'Email',
+      cell: ({ row }) => (
+        <div className="font-medium">{row.getValue('email')}</div>
+      ),
+    },
+    {
+      accessorKey: 'isActive',
+      header: 'Status',
+      cell: ({ row }) => (
+        <Badge variant={row.getValue('isActive') ? 'default' : 'secondary'}>
+          {row.getValue('isActive') ? 'Active' : 'Inactive'}
+        </Badge>
+      ),
+    },
+    {
+      id: 'actions',
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon">
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem>Edit</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return <DataTable table={table} />;
+};
+```
+
+### Loading States
+Consistent loading patterns using Lucide React icons:
+
+```typescript
+import { LoaderIcon } from 'lucide-react';
+
+export const LoadingButton = ({ loading, children, ...props }: ButtonProps & { loading?: boolean }) => {
+  return (
+    <Button disabled={loading} {...props}>
+      {loading && <LoaderIcon className="mr-2 h-4 w-4 animate-spin" />}
+      {children}
+    </Button>
+  );
+};
+
+export const LoadingSpinner = () => (
+  <div className="flex items-center justify-center p-4">
+    <LoaderIcon className="h-6 w-6 animate-spin" />
+  </div>
+);
+```
+
+## Styling Guidelines
+
+### Tailwind CSS Usage
+- Use semantic class names from the design system
+- Prefer design tokens over arbitrary values
+- Use responsive prefixes consistently (sm:, md:, lg:, xl:)
+- Group classes logically: layout, spacing, colors, typography, effects
+
+```typescript
+// Good
+<div className="flex items-center justify-between p-4 bg-card border border-border rounded-lg shadow-xs">
+
+// Avoid arbitrary values when design tokens exist
+<div className="p-[13px] bg-[#f1f5f9]"> // Bad
+<div className="p-4 bg-muted"> // Good
+```
+
+### CSS Variable System
+Use CSS variables for theme-aware styling:
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+}
+```
+
+### Responsive Design
+- Mobile-first approach with progressive enhancement
+- Use Tailwind responsive prefixes
+- Test components across different screen sizes
+- Consider touch interactions for mobile
+
+```typescript
+<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+  {/* Responsive grid items */}
+</div>
+```
+
+## Accessibility Standards
+- Use semantic HTML elements
+- Ensure proper heading hierarchy (h1, h2, h3)
+- Include ARIA labels for complex interactions
+- Maintain keyboard navigation support
+- Use proper color contrast ratios
+- Test with screen readers
+
+```typescript
+<Button
+  aria-label="Delete user"
+  aria-describedby="delete-help-text"
+  onClick={handleDelete}
+>
+  <TrashIcon className="h-4 w-4" />
+</Button>
+<div id="delete-help-text" className="sr-only">
+  This action cannot be undone
+</div>
+```
+
+## Icon Usage
+- Use Lucide React for consistent iconography
+- Standard sizes: 16px (h-4 w-4), 20px (h-5 w-5), 24px (h-6 w-6)
+- Maintain icon-text spacing consistency
+- Use semantic icon choices
+
+```typescript
+import { User, Settings, Home, ChevronRight } from 'lucide-react';
+
+<Button>
+  <User className="mr-2 h-4 w-4" />
+  Users
+</Button>
+```
\ No newline at end of file
diff --git a/.cursor/rules/ux-laws.mdc b/.cursor/rules/ux-laws.mdc
new file mode 100644
index 000000000..596ee2643
--- /dev/null
+++ b/.cursor/rules/ux-laws.mdc
@@ -0,0 +1,65 @@
+---
+description: Apply UX psychology laws when building or reviewing any user interface element.
+globs: "**/*.{tsx,jsx,ts,js,css,scss,html,vue,svelte}"
+alwaysApply: true
+---
+
+# Quintessential Design Wiki -- UX Laws
+
+These 23 laws govern how users perceive and interact with interfaces. Apply them when building or reviewing any UI.
+
+## Target Sizing (Fitts's Law)
+
+- `ux-fitts-target-size` -- Interactive elements must be at least 32px. Larger targets are easier to click.
+- `ux-fitts-hit-area` -- Expand hit areas beyond visible bounds using pseudo-elements or invisible padding.
+
+## Decision Reduction (Hick's Law)
+
+- `ux-hicks-minimize-choices` -- Minimize visible choices to reduce decision time. Use progressive disclosure.
+
+## Memory Limits (Miller's Law)
+
+- `ux-millers-chunking` -- Chunk data into groups of 5-9 items for scannability.
+
+## Response Time (Doherty Threshold)
+
+- `ux-doherty-under-400ms` -- Interactions must respond within 400ms to feel instant.
+- `ux-doherty-perceived-speed` -- When actual speed isn't possible, fake it with skeletons, optimistic UI, or progress indicators.
+
+## Input Tolerance (Postel's Law)
+
+- `ux-postels-accept-messy-input` -- Accept messy human input, normalize and output clean data.
+
+## Complexity Management
+
+- `ux-progressive-disclosure` -- Show what matters now, reveal complexity incrementally as needed.
+- `ux-teslers-complexity` -- Move irreducible complexity to the system, not the user.
+- `ux-cognitive-load-reduce` -- Remove anything that doesn't help the user complete their task.
+
+## Familiarity
+
+- `ux-jakobs-familiar-patterns` -- Use familiar UI patterns users know from other sites. Deviations must be intentional improvements.
+
+## Visual Perception (Gestalt)
+
+- `ux-proximity-grouping` -- Group related elements spatially with tighter spacing within groups, larger spacing between.
+- `ux-similarity-consistency` -- Elements that function the same must look the same.
+- `ux-common-region-boundaries` -- Use boundaries (cards, sections, dividers) to group related content.
+- `ux-uniform-connectedness` -- Visually connect related elements with lines, color, or frames.
+- `ux-pragnanz-simplify` -- Simplify complex visuals into the clearest possible forms.
+
+## Emphasis & Hierarchy
+
+- `ux-von-restorff-emphasis` -- Make the most important element visually distinct from its surroundings.
+- `ux-serial-position` -- Place key items first or last in sequences -- users remember edges best.
+- `ux-aesthetic-usability` -- Visual polish increases perceived usability. Small details compound into trust.
+
+## Progress & Completion
+
+- `ux-peak-end-finish-strong` -- End experiences with clear, satisfying success states.
+- `ux-goal-gradient-progress` -- Show progress toward completion to accelerate user behavior.
+- `ux-zeigarnik-show-incomplete` -- Show incomplete state to drive completion.
+
+## Prioritization
+
+- `ux-pareto-prioritize-features` -- 80% of users use 20% of features. Optimize the critical path first.
diff --git a/.cursor/rules/visual-design.mdc b/.cursor/rules/visual-design.mdc
new file mode 100644
index 000000000..cacd6cac5
--- /dev/null
+++ b/.cursor/rules/visual-design.mdc
@@ -0,0 +1,33 @@
+---
+description: Apply visual design fundamentals when writing CSS for shadows, borders, spacing, and elevation.
+globs: "**/*.{css,scss,tsx,jsx,vue,svelte,html}"
+alwaysApply: true
+---
+
+# Quintessential Design Wiki -- Visual Design
+
+9 rules that separate considered interfaces from default ones. Apply when writing any visual CSS.
+
+## Border Radius
+
+- `visual-concentric-radius` -- Inner radius = outer radius minus padding. Same radius on nested elements creates uneven curves.
+
+## Shadows
+
+- `visual-layered-shadows` -- Layer multiple shadows with increasing blur and decreasing opacity. Single shadows look flat.
+- `visual-shadow-direction` -- All shadows share the same offset direction (single light source). Mixed directions feel broken.
+- `visual-no-pure-black-shadow` -- Use neutral colors for shadows, not pure black. `rgba(17, 24, 39, 0.08)` over `rgba(0, 0, 0, 0.25)`.
+- `visual-shadow-matches-elevation` -- Larger blur and offset = higher elevation. Use a consistent shadow scale (`--shadow-1`, `--shadow-2`, `--shadow-3`).
+- `visual-animate-shadow-pseudo` -- Never transition `box-shadow` directly. Animate opacity on a pseudo-element with the target shadow instead.
+
+## Spacing
+
+- `visual-consistent-spacing-scale` -- Use a defined scale (4, 8, 12, 16, 24, 32, 48), never arbitrary pixel values.
+
+## Borders
+
+- `visual-border-alpha-colors` -- Semi-transparent borders (`var(--gray-a4)`) adapt to any background. Hardcoded hex borders break on theme changes.
+
+## Buttons
+
+- `visual-button-shadow-anatomy` -- Polished buttons use six layers: outer cut shadow, inner ambient highlight, inner top highlight, layered depth shadows, text drop-shadow, subtle gradient background.
diff --git a/.cursor/skills/design-audit/SKILL.md b/.cursor/skills/design-audit/SKILL.md
new file mode 100644
index 000000000..aae4eb6b8
--- /dev/null
+++ b/.cursor/skills/design-audit/SKILL.md
@@ -0,0 +1,265 @@
+---
+name: design-audit
+description: "Audit an existing codebase for design consistency, extract the current design profile, and produce a prioritized migration report against Quintessential standards. Use when the user wants to evaluate an existing project's design quality, assess UI consistency, or prepare for a design system migration. Triggers on: audit codebase, design audit, evaluate design, check consistency, design debt, review project design, assess UI quality, migrate design, design profile, what needs fixing."
+argument-hint: "[project path or 'this project']"
+metadata:
+  author: Quintessential
+  version: '3.0.0'
+  short-description: Codebase design audit against Quintessential standards
+---
+
+# Design Audit
+
+Scan an existing codebase, extract its current design profile, compare against Quintessential standards, and produce a prioritized migration report with a ready-to-use project context rule.
+
+---
+
+## When to Use
+
+- User says "audit", "evaluate", "assess", "check design", "design debt", "what needs fixing"
+- User wants to apply Quintessential rules to an existing project
+- Before installing Quintessential rules in a project that's already in development
+- When the user asks "how consistent is this codebase?"
+
+---
+
+## Audit Process
+
+Follow this sequence exactly. Each step produces output the next step depends on.
+
+### Step 1: Locate the Design Surface
+
+Find the files that define the project's visual language:
+
+```
+Search for (in order):
+1. globals.css, global.css, app.css, index.css — global styles
+2. tailwind.config.js, tailwind.config.ts — Tailwind theme
+3. theme.ts, theme.js, tokens.ts, tokens.js — design tokens
+4. components/ui/ — shared UI component library
+5. layout.tsx, layout.jsx — root layout (fonts, providers)
+6. package.json — check for styling/animation dependencies
+```
+
+Read each file found. These are the source of truth for what the project considers its design system.
+
+### Step 2: Extract the Design Profile
+
+From the files found, extract concrete values. Be specific — count things, name things, quote values.
+
+#### 2a. Typography
+
+| Question                       | How to Find                                                                          |
+| ------------------------------ | ------------------------------------------------------------------------------------ |
+| What font families are in use? | Search for `font-family`, `--font-`, `next/font`, `@font-face`, Google Fonts imports |
+| How many distinct font sizes?  | Search for `font-size`, `text-{size}` Tailwind classes, `--font-size-` variables     |
+| How many font weights?         | Search for `font-weight`, `font-{weight}` classes                                    |
+| Is there a type scale?         | Check if sizes follow a ratio or are arbitrary                                       |
+| Is `font-display: swap` used?  | Check `@font-face` declarations and `next/font` config                               |
+| Is antialiasing set?           | Search for `-webkit-font-smoothing`                                                  |
+
+#### 2b. Colors
+
+| Question                           | How to Find                                                                          |
+| ---------------------------------- | ------------------------------------------------------------------------------------ |
+| How many unique color values?      | Search for hex codes (`#[0-9a-fA-F]{3,8}`), `rgb()`, `hsl()`, Tailwind color classes |
+| How many are in CSS variables?     | Count `--color-` or `--{name}` variables in globals                                  |
+| How many are hardcoded?            | Count hex/rgb values in component files (not in globals or config)                   |
+| Is there a palette?                | Check Tailwind config `colors` or CSS variable definitions                           |
+| Are alpha colors used for borders? | Search for `rgba`, `hsla`, `/0.` patterns on borders                                 |
+
+#### 2c. Spacing
+
+| Question                      | How to Find                                                              |
+| ----------------------------- | ------------------------------------------------------------------------ |
+| What spacing values are used? | Search for `padding`, `margin`, `gap`, `p-`, `m-`, `gap-`                |
+| Do they follow a scale?       | Check if values are multiples of 4 (4, 8, 12, 16, 24, 32, 48)            |
+| Are there arbitrary values?   | Look for odd numbers or non-scale values like `13px`, `37px`, `p-[23px]` |
+
+#### 2d. Shadows & Borders
+
+| Question                                 | How to Find                                              |
+| ---------------------------------------- | -------------------------------------------------------- |
+| How many shadow definitions?             | Search for `box-shadow`, `shadow-`, `--shadow`           |
+| Are shadows layered?                     | Check if any shadow uses multiple comma-separated values |
+| Are shadows consistent direction?        | Compare offset-x/offset-y across shadows                 |
+| Are border colors hardcoded or variable? | Search for `border-color`, `border-{color}`              |
+
+#### 2e. Animation & Motion
+
+| Question                               | How to Find                                                             |
+| -------------------------------------- | ----------------------------------------------------------------------- |
+| What animation library is used?        | Check package.json for framer-motion, motion, react-spring, gsap        |
+| What durations are in use?             | Search for `duration`, `transition:`, `animation:`, timing values       |
+| What easings are in use?               | Search for `ease`, `cubic-bezier`, `ease-in`, `ease-out`, `ease-in-out` |
+| Is `prefers-reduced-motion` respected? | Search for `prefers-reduced-motion`, `useReducedMotion`                 |
+| Are `exit` animations present?         | Search for `AnimatePresence`, `exit=`                                   |
+
+#### 2f. Components
+
+| Question                        | How to Find                                                   |
+| ------------------------------- | ------------------------------------------------------------- |
+| Is there a shared UI library?   | Check for `components/ui/`, `@your-org/ui`, shadcn components |
+| How many button variants exist? | Search for button components, count distinct styles           |
+| Are inputs/forms consistent?    | Compare form components across features                       |
+| Is `cn()` or `clsx` used?       | Search for the class merging utility                          |
+
+#### 2g. Keyboard & Interaction
+
+| Question                        | How to Find                                                            |
+| ------------------------------- | ---------------------------------------------------------------------- |
+| Are keyboard shortcuts defined? | Search for `useHotkeys`, `addEventListener('keydown'`, `Cmd+`, `Ctrl+` |
+| Does Escape close overlays?     | Search for `Escape` key handling in modals/dialogs                     |
+| Is focus management handled?    | Search for `focus-visible`, `FocusTrap`, `autoFocus`                   |
+| Are hover states touch-safe?    | Search for `@media (hover: hover)`, `pointer: fine`                    |
+
+### Step 3: Compare Against Quintessential Standards
+
+For each dimension, rate the current state:
+
+| Rating      | Meaning                                                                   |
+| ----------- | ------------------------------------------------------------------------- |
+| **Solid**   | Consistent, follows a system, matches or exceeds Quintessential standards |
+| **Partial** | Has a system but inconsistently applied, or the system has gaps           |
+| **Missing** | No system, arbitrary values, no consistency                               |
+
+### Step 4: Produce the Migration Report
+
+Structure the output as:
+
+```
+## Design Audit Report
+
+### Project: [name]
+### Date: [date]
+### Overall Assessment: [1-2 sentences]
+
+---
+
+### Design Profile
+
+#### Typography
+- Families: [list]
+- Scale: [exists/missing] — [details]
+- Antialiasing: [yes/no]
+- Rating: [Solid/Partial/Missing]
+
+#### Colors
+- Palette: [X] CSS variables, [Y] hardcoded values
+- System: [describe]
+- Rating: [Solid/Partial/Missing]
+
+#### Spacing
+- Scale: [describe what's in use]
+- Consistency: [percentage estimate of on-scale vs arbitrary]
+- Rating: [Solid/Partial/Missing]
+
+#### Shadows & Borders
+- [findings]
+- Rating: [Solid/Partial/Missing]
+
+#### Animation
+- Library: [name or CSS-only]
+- Durations: [range]
+- Easings: [list what's used]
+- Reduced motion: [yes/no]
+- Rating: [Solid/Partial/Missing]
+
+#### Components
+- Shared library: [yes/no]
+- Consistency: [assessment]
+- Rating: [Solid/Partial/Missing]
+
+#### Keyboard & Interaction
+- Shortcuts: [list any found]
+- Focus management: [assessment]
+- Rating: [Solid/Partial/Missing]
+
+---
+
+### Top 5 Opportunities (by impact)
+
+1. [Highest impact finding — what to fix first]
+2. [Second]
+3. [Third]
+4. [Fourth]
+5. [Fifth]
+
+---
+
+### Migration Order
+
+1. **Typography pass** — [specific actions]
+2. **Color pass** — [specific actions]
+3. **Spacing pass** — [specific actions]
+4. **Animation pass** — [specific actions]
+5. **Interaction pass** — [specific actions]
+
+---
+
+### Project Context Rule
+
+[Generate a ready-to-use .mdc rule file — see below]
+```
+
+### Step 5: Generate the Project Context Rule
+
+Produce a `.mdc` rule file the user can drop into their project's `.cursor/rules/` directory. This rule tells the LLM what exists and what to migrate toward.
+
+Template:
+
+```markdown
+---
+description: Project design context for [project name]. Guides Quintessential rule application to this existing codebase.
+globs: '**/*.{tsx,jsx,ts,js,css,scss,vue,svelte}'
+alwaysApply: true
+---
+
+# Design Context — [Project Name]
+
+This is an existing project. Apply Quintessential standards with awareness of what's already built.
+
+## Current Design Language (preserve)
+
+- Font: [what's in use — keep unless explicitly changing]
+- Palette: [CSS variables and intentional colors — keep]
+- Component library: [what exists — extend, don't replace]
+- [Other intentional patterns found in audit]
+
+## Migration Targets (improve incrementally)
+
+- Spacing: migrate from [current state] to Quintessential 4/8/12/16/24/32/48 scale
+- Colors: extract [N] hardcoded hex values to CSS variables
+- Shadows: [specific migration]
+- Animation: standardize to [specific targets from audit]
+- [Other findings]
+
+## Rules of Engagement
+
+- Apply Quintessential standards to ALL new code
+- When modifying existing files, improve what you touch
+- Do NOT refactor untouched code unprompted
+- Do NOT rewrite working components for style alone
+- When you spot a major violation in code you're editing, fix it silently
+- When you spot a major violation in code you're NOT editing, leave a brief comment noting the opportunity
+```
+
+---
+
+## Voice
+
+The audit report should be factual and direct. No hedging, no softening. Count things. Name things. Quote values. "There are 47 unique hex values across 23 component files, 12 of which are in CSS variables and 35 are hardcoded" — not "the color system could use some improvement."
+
+Frame findings as opportunities, not failures. The project works — the goal is to make it feel considered.
+
+---
+
+## After the Audit
+
+Once the user has the report and the project context rule:
+
+1. Install the project context rule in `.cursor/rules/design-context.mdc`
+2. Install Quintessential rules alongside it (the standard `.mdc` files)
+3. Install relevant skills in the project's `.cursor/skills/` or at user level
+4. Begin building — the rules now guide every new file and every touched file
+5. Schedule targeted passes (typography first) when ready for focused migration
diff --git a/.cursor/skills/design-critique/SKILL.md b/.cursor/skills/design-critique/SKILL.md
new file mode 100644
index 000000000..ffff0f838
--- /dev/null
+++ b/.cursor/skills/design-critique/SKILL.md
@@ -0,0 +1,230 @@
+---
+name: design-critique
+description: "Systematic UI critique skill. Analyzes screenshots, component code, or live URLs and delivers specific, actionable feedback organized by visual design, interface design, interaction consistency, and user context. Triggers on: critique, review, feedback, audit, what's wrong, improve, polish, refine, redesign, analyze this UI, look at this, or when the user pastes a screenshot/image for evaluation."
+argument-hint: '[description, file path, or screenshot]'
+metadata:
+  author: Quintessential
+  version: '3.0.0'
+  short-description: Systematic UI critique with actionable design feedback
+---
+
+# Design Critique
+
+A systematic interface critique skill. Analyzes UI screenshots or component code and delivers specific, actionable feedback organized by visual design, interface design, interaction consistency, and user context.
+
+---
+
+## When to Use
+
+Trigger on: "critique", "review", "feedback", "audit", "what's wrong", "improve", "polish", "refine", "redesign", "analyze this UI", "look at this", or when the user pastes a screenshot/image for evaluation.
+
+---
+
+## Input Modes
+
+### 1. Image / Screenshot (Primary)
+
+The user pastes or attaches a screenshot. Read the image with the Read tool, then critique what you see.
+
+### 2. File Path (Secondary)
+
+The user provides a component file path. Read the file, mentally render the layout from the JSX/TSX, and critique the structural and stylistic decisions in the code. Note: you cannot see the rendered output, so focus on what's inferrable — layout structure, spacing patterns, color choices, typography, hierarchy, component organization, and interaction patterns.
+
+### 3. Live URL (Tertiary)
+
+The user provides a URL. Use WebFetch to retrieve the page content, then critique based on the markup and any screenshots the user provides.
+
+---
+
+## Critique Methodology
+
+Follow this sequence. Do NOT skip steps or merge them. Each section should feel like its own focused lens.
+
+### Step 0: Context
+
+Before critiquing, briefly establish:
+
+- **What is this?** (app type, screen purpose, target user)
+- **What emotional context surrounds this task?** (stressful? casual? high-stakes? routine?)
+
+This matters. A divorce filing app demands different care than a podcast player. Name the context so the critique respects it.
+
+### Step 1: First Impressions
+
+Spend one paragraph on gut reaction. What stands out? What feels off? What's the overall impression? Be honest and direct — not tentative.
+
+This is the "noticing" step. The skill of seeing what's actually in front of you, not what you expect to see.
+
+### Step 2: Visual Design
+
+Audit these specific dimensions:
+
+| Dimension                        | What to Look For                                                                                                                                                                          |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Color intentionality**         | Is every color used with purpose? Or are colors applied as decoration without meaning? Look for: too many background colors, competing accents, colors that don't establish hierarchy.    |
+| **Typographic hierarchy**        | Is there a clear scale from most important to least? Count the distinct sizes/weights. Are headlines distinguished from body from labels? Is there unnecessary repetition of type styles? |
+| **Shadow & stroke quality**      | Are shadows crisp or muddy? Are strokes too prominent, competing with content? Do outlines/borders add structure or noise?                                                                |
+| **Visual weight vs. importance** | Do the visually heaviest elements match what's semantically most important? Or do decorative elements steal attention from primary actions?                                               |
+| **Spacing & alignment**          | Is spacing consistent? Are elements aligned to a clear grid? Is there excess padding pushing content away from where it should be?                                                        |
+| **Icon consistency**             | Are icons from the same family? Same weight/stroke width? Same optical size? Or is it a mix of styles?                                                                                    |
+
+For each issue found, use this structure:
+
+> **[Issue name]** — [Specific factual observation]. [Impact on user or experience]. [What it could be instead.]
+
+Be precise. Count things. Quote text. Name colors. Measure relative sizes. "There are four distinct background colors competing for attention" is better than "too many colors."
+
+### Step 3: Interface Design
+
+Audit these dimensions:
+
+| Dimension                  | What to Look For                                                                                                                       |
+| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| **Focusing mechanism**     | Is it clear where the user should look first? Is there a visual entry point? Or does everything compete for attention equally?         |
+| **Progressive disclosure** | Is complexity revealed gradually, or is everything dumped on the user at once? Are there 40 things on screen when 5 would suffice?     |
+| **Information density**    | Is the density appropriate for the context? Data dashboards can be dense; onboarding should not be.                                    |
+| **Expectation setting**    | Does the user know what will happen next? Is progress communicated? Is scope clear?                                                    |
+| **Feedback & reward**      | Does the interface acknowledge user actions? Are completed items celebrated or just checked off? Is there a sense of forward momentum? |
+| **Redundancy**             | Are labels, titles, or descriptions repeating information the user already knows? Can anything be removed without losing meaning?      |
+
+Frame issues as missed opportunities:
+
+> "We're missing an opportunity to [reward progress / reduce cognitive load / set expectations / etc.]"
+
+### Step 4: Consistency & Conventions
+
+| Dimension                    | What to Look For                                                                                                                         |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| **Pattern consistency**      | Are similar actions handled the same way throughout? Or do interaction patterns shift without reason?                                    |
+| **Platform conventions**     | Does the design follow established platform patterns (iOS, Android, web)? Deviations should be intentional improvements, not accidents.  |
+| **Component reuse**          | Are there elements that look like they should be the same component but aren't? Inconsistent card styles, button treatments, list items? |
+| **Visual language cohesion** | Does the interface feel like one designer made it? Or does it feel assembled from different kits?                                        |
+
+### Step 5: User Context
+
+This is where empathy meets analysis:
+
+- **How does this design make the user feel?** Name the emotion. "Overwhelmed," "confused," "unsupported," "rushed."
+- **What is the user's likely state of mind?** Anxious? Focused? Browsing casually? Under time pressure?
+- **Does the interface respect that state?** Or does it add unnecessary cognitive burden?
+- **What would "uncommon care" look like here?** What would surprise the user with thoughtfulness?
+
+---
+
+## Output Format
+
+Structure the critique as:
+
+```
+## Context
+[1-2 sentences on what this is and who it's for]
+
+## First Impressions
+[1 paragraph, direct and honest]
+
+## Visual Design
+[Each issue as: **Issue Name** — observation. Impact. Opportunity.]
+
+## Interface Design
+[Each issue framed as missed opportunities]
+
+## Consistency & Conventions
+[Pattern and convention issues]
+
+## User Context
+[Empathy-driven observations]
+
+## Top Opportunities
+[Ranked list of the 3-5 highest-impact changes, each in one sentence]
+```
+
+---
+
+## Voice Rules
+
+These define how the critique sounds. Follow them strictly.
+
+### BE:
+
+- **Specific** — "There are six columns of data per row" not "there's a lot of data"
+- **Decisive** — "This is overwhelming" not "this might feel overwhelming"
+- **Factual first** — State what you see before judging it. Count elements, name colors, measure sizes. The specificity of the observation is the quality of the critique.
+- **Impact-aware** — Connect every observation to how it affects the user
+- **Constructive** — Every problem gets an opportunity. Never just tear down.
+- **Quantitative** — Count elements, name colors, measure relative sizes
+- **Warm but direct** — A builder reviewing work with a builder they respect. Honest because the goal is to make the work great.
+- **Simple in language** — Everyday vocabulary. No academic jargon. "Progressive disclosure" is fine. "The affordance signifiers lack semiotic clarity" is not.
+
+### DO NOT:
+
+- **Hedge** — No "maybe," "perhaps," "it could be argued that"
+- **Apologize** — No "unfortunately" or "sadly"
+- **Be vague** — No "the design feels off" without saying exactly what and why
+- **Prescribe without reasoning** — Never say "change X to Y" without explaining the why
+- **Add praise padding** — Don't sandwich criticism with empty compliments. If something works well, say so specifically. But don't manufacture positivity.
+- **Use jargon without explanation** — Keep it accessible
+- **Use life-coach energy** — No "10x your design" or universal truths. Stay grounded and real.
+
+### Tone
+
+Direct, analytical, and honest — rooted in wanting the work to be great. No cruelty, no condescension, no hand-holding. Short blunt sentences when something is clearly wrong. Flowing when exploring nuance. Use the em dash to land a point or add context before a verdict.
+
+---
+
+## Severity Guide
+
+Not all issues are equal. When listing issues, implicitly order by impact:
+
+1. **Structural** — Problems with information architecture, missing functionality, wrong mental model. These change what the interface _is_.
+2. **Behavioral** — Problems with how the interface responds, flows, or communicates. These change how the interface _feels_.
+3. **Visual** — Problems with color, type, spacing, shadows. These change how the interface _looks_.
+
+A structural issue (wrong mental model for a divorce app) matters more than a visual one (shadow is slightly muddy). Prioritize accordingly.
+
+---
+
+## Frameworks to Reference
+
+These are the conceptual tools behind the critique. You don't need to name them explicitly, but they should inform your analysis:
+
+### Noticing
+
+The foundation. Most people glance; good designers see. Count the elements. Name the colors. Measure the spacing. The specificity of your observation is the quality of your critique.
+
+### Industry Standards
+
+Every popular app in a category sets an invisible bar. Users carry those expectations into every new app. A notes app is compared to Apple Notes, Bear, Notion. A dashboard is compared to Stripe, Linear, Vercel. If the design falls below the bar users already carry, it feels amateur — even if the user can't articulate why.
+
+Ask: "What would the best-in-class app in this category do here?"
+
+### Facets of Quality
+
+Quality isn't one thing. It's a collection of attributes. For any given interface, identify which 3-5 attributes matter most. Not every app needs to be "playful" — but every app needs to be clear about what it values and execute on those values consistently.
+
+### Uncommon Care
+
+The difference between good and great is often invisible to people who haven't seen great. Look for moments where the designer could have gone further — micro-interactions, empty states, error messages, transitions, loading states, edge cases. These are where "uncommon care" lives.
+
+### Separation of Concerns
+
+Visual design, interface design, and interaction design are different skills solving different problems. A beautiful interface can be unusable. A usable interface can be ugly. Critique each dimension on its own terms before synthesizing.
+
+---
+
+## Examples of Good Critique Language
+
+**Visual:**
+
+> **Muddy shadows** — The card shadows use a large blur radius with low opacity, creating a hazy, unfocused look rather than crisp depth. This makes the cards feel like they're floating in fog rather than sitting on a surface. Tighter, more directional shadows would give the layout a cleaner sense of elevation.
+
+**Interface:**
+
+> **No focusing mechanism** — All four content areas compete equally for attention. There's no visual entry point — no element says "start here." The user's eye bounces between the sidebar, the header stats, the chart, and the table with no clear priority. A stronger size or weight differential on the primary content area would give the layout a clear narrative.
+
+**User context:**
+
+> **Demoralizing progress display** — Showing "10 / 47 tasks complete" immediately communicates that 37 tasks remain. For a process that takes weeks and involves one of the most stressful experiences in a person's life, this is demoralizing. "Complete Phase 1 of 4" is psychologically very different — it frames the same progress as achievable milestones rather than an endless checklist.
+
+**Opportunity:**
+
+> We're missing a huge opportunity to reward progress. Completed steps could collapse or fade, making the remaining work feel smaller — not larger — as the user advances.
diff --git a/.cursor/skills/frontend-design/SKILL.md b/.cursor/skills/frontend-design/SKILL.md
new file mode 100644
index 000000000..f27d3ff61
--- /dev/null
+++ b/.cursor/skills/frontend-design/SKILL.md
@@ -0,0 +1,202 @@
+---
+name: frontend-design
+description: >-
+  Create distinctive, production-grade frontend interfaces with high design
+  quality. Use when the user asks to build web components, pages, or
+  applications and wants visually striking, polished results that avoid generic
+  AI aesthetics.
+metadata:
+  author: Quintessential
+  version: '3.0.0'
+---
+
+# Frontend Design
+
+Generate creative, production-grade frontend code with exceptional aesthetic quality. Every interface should feel intentionally designed — not templated.
+
+## Design Thinking
+
+Before coding, commit to a clear direction:
+
+- **Purpose**: What problem does this solve? Who uses it?
+- **Tone**: Pick a strong aesthetic — brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial, etc. Use these as inspiration but design something true to the chosen direction.
+- **Differentiation**: What makes this unforgettable? What's the one thing someone remembers?
+
+**Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.** Match implementation complexity to the vision: maximalist designs need elaborate effects; minimal designs need precision in spacing, typography, and subtle details.
+
+## Aesthetics Guidelines
+
+### Typography
+
+Choose what the user wants first.
+
+**Load fonts via `next/font`** — never from raw `<link>` tags or `@import` in CSS. For fonts not available through the Google Fonts API (e.g. Google Sans), download the files and use `next/font/local`:
+
+```tsx
+import localFont from 'next/font/local';
+
+const googleSans = localFont({
+  src: [
+    { path: '../fonts/GoogleSans-Regular.ttf', weight: '400', style: 'normal' },
+    { path: '../fonts/GoogleSans-Medium.ttf', weight: '500', style: 'normal' },
+    { path: '../fonts/GoogleSans-Bold.ttf', weight: '700', style: 'normal' },
+  ],
+  variable: '--font-google-sans',
+  display: 'swap',
+});
+```
+
+**Critical: CSS variable scoping.** The font variable class is applied on `<body>` via `className`. In Tailwind v4, `@theme inline` maps theme tokens to CSS variables. If you apply `font-sans` on `html`, it cannot read a variable set on `body` (CSS variables don't flow upward). Always apply `font-sans` on `body`, not `html`:
+
+```css
+/* globals.css — WRONG */
+html {
+  @apply font-sans;
+}
+
+/* globals.css — CORRECT */
+body {
+  @apply font-sans;
+}
+```
+
+In the `@theme inline` block, use a distinct variable name to avoid circular references:
+
+```css
+@theme inline {
+  --font-sans: var(--font-google-sans);
+}
+```
+
+Never default to Inter, Roboto, Arial, or system fonts. Never converge on the same font (e.g. Space Grotesk) across designs. Every project gets a unique pairing.
+
+### Color & Theme
+
+Commit to a cohesive palette. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+
+**Define CSS variables in `globals.css`**, wire them through `tailwind.config.js`, and use the resulting Tailwind utilities:
+
+```css
+/* globals.css */
+:root {
+  --color-surface: #0a0a0a;
+  --color-primary: #e4ff1a;
+  --color-muted: #71717a;
+}
+```
+
+```js
+/* tailwind.config.js */
+colors: {
+  surface: 'var(--color-surface)',
+  primary: 'var(--color-primary)',
+  muted: 'var(--color-muted)',
+}
+```
+
+Then use `bg-surface`, `text-primary`, `border-muted` etc. in components. Never use raw `var()` in inline styles when a Tailwind utility can express it.
+
+Vary between light and dark themes across designs. Avoid cliched schemes (especially purple gradients on white).
+
+### Motion & Interaction
+
+Focus on high-impact moments: one well-orchestrated page load with staggered reveals creates more delight than scattered micro-interactions.
+
+- **CSS-first**: Use CSS transitions and `animation-delay` for staggered reveals, hover states, scroll-triggered effects
+- **Motion library** (Framer Motion / Motion): Use for complex orchestration in React when CSS alone falls short
+- Surprise with scroll-triggered animations and hover states that feel tactile
+
+### Spatial Composition
+
+Break predictable layouts. Use asymmetry, overlap, diagonal flow, grid-breaking elements, generous negative space OR controlled density — whatever serves the aesthetic.
+
+### Backgrounds & Texture
+
+Create atmosphere. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays, decorative borders — choose what fits the tone. Never default to flat solid-color backgrounds when the design calls for depth.
+
+## Project Integration Rules
+
+These rules ensure the skill's creative output integrates cleanly with existing project architecture.
+
+### Styling: Tailwind + `cn()`
+
+All styling goes through Tailwind utilities. Use the project's `cn()` helper for conditional classes:
+
+```tsx
+import { cn } from '@/lib/utils';
+
+export function Card({ variant, className, ...props }: CardProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-2xl border border-white/10 backdrop-blur-sm',
+        variant === 'elevated' && 'shadow-2xl shadow-primary/20',
+        variant === 'flat' && 'bg-surface/50',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+Reach for raw CSS (in `globals.css`) only when Tailwind cannot express the effect — complex gradients, `@keyframes`, noise SVG filters, or pseudo-element tricks. Keep raw CSS minimal and co-located in globals, not scattered in component files.
+
+### Avoid Inline Styles
+
+```tsx
+// BAD
+<div style={{ background: 'var(--color-surface)', marginTop: 20 }}>
+
+// GOOD
+<div className="bg-surface mt-5">
+```
+
+### Client / Server Boundary
+
+Components are server components by default. Only add `'use client'` for components that need interactivity (hooks, event handlers, browser APIs).
+
+Push `'use client'` to the **lowest leaf** that actually needs it. A page with a hero animation should look like:
+
+```
+page.tsx           → server component (fetches data, renders layout)
+  HeroSection.tsx  → server component (static markup + Tailwind animations)
+  HeroActions.tsx  → 'use client' (interactive buttons, hover effects needing JS)
+```
+
+If an effect can be achieved with pure CSS (`transition`, `animation`, `@keyframes`, `:hover`), keep the component as a server component.
+
+### Component Structure
+
+- Place components in `components/[feature]/` following the project's feature-based organization
+- Aim for <200 lines per component — extract sub-components for complex layouts
+- One component per file (small helpers co-located are fine)
+- Use PascalCase for component files, kebab-case for directories
+
+### Shared UI Library
+
+Check if the project has a shared UI library (`@your-org/ui` or similar) before creating new base components. Use existing shared components as foundations and customize via `className` overrides, composition, or variant props. Only create new components in `components/ui/` when the shared library doesn't cover the need.
+
+### Scrollbar Stability
+
+Use `overflow-y: scroll` on the main scrollable container so the scrollbar always reserves its space — no layout shift when content changes between overflowing and not. Pair with global CSS that makes the scrollbar invisible by default (transparent track and thumb) and only reveals a thin, pastel-colored thumb on hover. Avoid `scrollbar-gutter: stable` — it reserves space based on the browser's default scrollbar width, which conflicts with custom thin scrollbar overrides (`::-webkit-scrollbar { width: 6px }`) and causes a width mismatch.
+
+### Cursor Affordance
+
+All interactive elements (`button`, `a`, `[role="button"]`, `select`, `summary`) must show `cursor: pointer` on hover. Set this as a global rule in `globals.css` rather than per-component — one declaration covers the entire app. Never leave a clickable element with the default arrow cursor.
+
+### Text Truncation in Tables
+
+Table cells ignore `overflow: hidden`. To truncate text with ellipsis inside a `<td>`, wrap cell content in a `<div className="truncate">` inside the `TableCell` component. For cells with flex layouts (e.g. title + badge), add `min-w-0` to the flex container and `truncate` to the text element so the flex child can shrink.
+
+## Anti-Patterns
+
+Never produce:
+
+- Overused font families (Inter, Roboto, Arial, system-ui)
+- Purple gradients on white backgrounds
+- Cookie-cutter card grids with identical spacing
+- Generic hero sections with stock patterns
+- Inline `style={{ }}` for things Tailwind can handle
+- `'use client'` on an entire page when only a button needs interactivity
+- Raw `var()` in inline styles instead of Tailwind utilities wired to CSS variables
diff --git a/.cursor/skills/ui-patterns/SKILL.md b/.cursor/skills/ui-patterns/SKILL.md
new file mode 100644
index 000000000..f3a849e9d
--- /dev/null
+++ b/.cursor/skills/ui-patterns/SKILL.md
@@ -0,0 +1,97 @@
+---
+name: quintessential-ui-patterns
+description: 'Advanced UI implementation patterns for CSS pseudo-elements, View Transitions, morphing icons, container animations, and predictive prefetching. Use when working with pseudo-elements, ::before/::after, View Transitions API, morphing SVG icons, animated container dimensions, or predictive prefetching. Triggers on: pseudo-element, ::before, ::after, view-transition, ::backdrop, ::placeholder, ::selection, ::marker, ::first-line, morphing, icon animation, SVG morph, container animation, ResizeObserver, useMeasure, prefetch, trajectory, hitSlop, foresight.'
+metadata:
+  author: Quintessential
+  version: '3.0.0'
+  short-description: Advanced UI patterns for pseudo-elements, morphing icons, containers, and prefetching
+---
+
+# UI Patterns
+
+Quintessential's advanced UI implementation patterns. 37 rules across 4 categories for CSS pseudo-elements, morphing icons, container animations, and predictive prefetching.
+
+Individual rule files with code examples are in the `rules/` subfolder.
+
+## 1. CSS Pseudo Elements (MEDIUM)
+
+Leveraging `::before`, `::after`, View Transitions API, and native pseudo-elements to reduce DOM nodes and improve transitions.
+
+| Rule                               | Summary                                                            |
+| ---------------------------------- | ------------------------------------------------------------------ |
+| `pseudo-content-required`          | `::before`/`::after` require `content` property to render          |
+| `pseudo-over-dom-node`             | Use pseudo-elements for decoration instead of extra DOM nodes      |
+| `pseudo-position-relative-parent`  | Parent needs `position: relative` for absolute pseudo-elements     |
+| `pseudo-z-index-layering`          | Z-index for correct pseudo-element layering                        |
+| `pseudo-hit-target-expansion`      | Negative inset values expand hit targets without extra markup      |
+| `pseudo-marker-styling`            | Use `::marker` for custom list bullet styles                       |
+| `pseudo-first-line-styling`        | Use `::first-line` for typographic treatments                      |
+| `transition-name-required`         | View transitions need `view-transition-name`                       |
+| `transition-name-unique`           | Each transition name unique during transition                      |
+| `transition-name-cleanup`          | Remove transition name after completion                            |
+| `transition-over-js-library`       | Prefer View Transitions API over JS libraries for page transitions |
+| `transition-style-pseudo-elements` | Style `::view-transition-group` for custom animations              |
+| `native-backdrop-styling`          | Use `::backdrop` for dialog/popover backgrounds                    |
+| `native-placeholder-styling`       | Use `::placeholder` for input styling                              |
+| `native-selection-styling`         | Use `::selection` for text selection styling                       |
+
+## 2. Morphing Icons (LOW)
+
+Building icon components that morph between any two icons through SVG line transformation. All icons share a 3-line structure.
+
+| Rule                           | Summary                                                                                                |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `morphing-three-lines`         | Every icon uses exactly 3 SVG lines                                                                    |
+| `morphing-use-collapsed`       | Unused lines use collapsed constant (`{ x1: CENTER, y1: CENTER, x2: CENTER, y2: CENTER, opacity: 0 }`) |
+| `morphing-consistent-viewbox`  | All icons share same viewBox (14x14)                                                                   |
+| `morphing-group-variants`      | Rotational variants share group and base lines                                                         |
+| `morphing-spring-rotation`     | Spring physics for grouped icon rotation                                                               |
+| `morphing-reduced-motion`      | Respect `prefers-reduced-motion`                                                                       |
+| `morphing-jump-non-grouped`    | Instant rotation jump between non-grouped icons                                                        |
+| `morphing-strokelinecap-round` | Round stroke line caps                                                                                 |
+| `morphing-aria-hidden`         | Icon SVGs are `aria-hidden`                                                                            |
+
+## 3. Container Animation (MEDIUM)
+
+Animating container width and height using a measure-and-animate pattern with ResizeObserver and Motion.
+
+| Rule                            | Summary                                                         |
+| ------------------------------- | --------------------------------------------------------------- |
+| `container-two-div-pattern`     | Outer animated div, inner measured div; never same element      |
+| `container-guard-initial-zero`  | Guard bounds === 0 on initial render, fall back to `"auto"`     |
+| `container-use-resize-observer` | Use ResizeObserver for measurement, not `getBoundingClientRect` |
+| `container-overflow-hidden`     | Set `overflow: hidden` on animated container during transitions |
+| `container-no-excessive-use`    | Use sparingly: buttons, accordions, interactive elements        |
+| `container-callback-ref`        | Use callback ref (not `useRef`) for measurement hooks           |
+| `container-transition-delay`    | Add small delay for natural catching-up feel                    |
+
+## 4. Predictive Prefetching (MEDIUM)
+
+Loading content before the user clicks by analyzing cursor trajectory.
+
+| Rule                             | Summary                                                  |
+| -------------------------------- | -------------------------------------------------------- |
+| `prefetch-trajectory-over-hover` | Trajectory prediction over hover; reclaims 100-200ms     |
+| `prefetch-not-everything`        | Prefetch by intent, not viewport; avoid wasted bandwidth |
+| `prefetch-hit-slop`              | Use hitSlop to trigger predictions earlier               |
+| `prefetch-touch-fallback`        | Fall back gracefully on touch devices (no cursor)        |
+| `prefetch-keyboard-tab`          | Prefetch on keyboard navigation when focus approaches    |
+| `prefetch-use-selectively`       | Use predictive prefetching where latency is noticeable   |
+
+## How to Use
+
+Read individual rule files in `rules/` for detailed explanations and code examples:
+
+```
+rules/pseudo-content-required.md
+rules/container-two-div-pattern.md
+rules/prefetch-trajectory-over-hover.md
+```
+
+Each rule file contains:
+
+- Brief explanation of why it matters
+- Incorrect code example with explanation
+- Correct code example with explanation
+
+Reference: [MDN Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements), [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API), [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver), [ForesightJS](https://foresightjs.com), [Motion Documentation](https://motion.dev)
diff --git a/.cursor/skills/ui-patterns/rules/container-callback-ref.md b/.cursor/skills/ui-patterns/rules/container-callback-ref.md
new file mode 100644
index 000000000..c1820b478
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/container-callback-ref.md
@@ -0,0 +1,31 @@
+---
+title: Use Callback Ref for Measurement
+impact: MEDIUM
+tags: container, ref, callback
+---
+
+## Use Callback Ref for Measurement
+
+Use a callback ref (not useRef) for measurement hooks so the observer attaches when the DOM node is ready.
+
+**Incorrect (useRef may be null on first effect):**
+
+```tsx
+const ref = useRef(null);
+useEffect(() => {
+  if (!ref.current) return;
+  observer.observe(ref.current);
+}, []);
+```
+
+**Correct (callback ref guarantees node):**
+
+```tsx
+const [element, setElement] = useState(null);
+const ref = useCallback(node => setElement(node), []);
+useEffect(() => {
+  if (!element) return;
+  observer.observe(element);
+  return () => observer.disconnect();
+}, [element]);
+```
diff --git a/.cursor/skills/ui-patterns/rules/container-guard-initial-zero.md b/.cursor/skills/ui-patterns/rules/container-guard-initial-zero.md
new file mode 100644
index 000000000..1e9061ddd
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/container-guard-initial-zero.md
@@ -0,0 +1,25 @@
+---
+title: Guard Against Zero on Initial Render
+impact: HIGH
+tags: container, measure, initial-render
+---
+
+## Guard Against Zero on Initial Render
+
+On initial render, measured bounds are 0. Guard against this to prevent animating from 0 to actual size.
+
+**Incorrect (animates from 0 on mount):**
+
+```tsx
+<motion.div animate={{ width: bounds.width }}>
+  <div ref={ref}>{children}</div>
+</motion.div>
+```
+
+**Correct (falls back to auto on first frame):**
+
+```tsx
+<motion.div animate={{ width: bounds.width > 0 ? bounds.width : 'auto' }}>
+  <div ref={ref}>{children}</div>
+</motion.div>
+```
diff --git a/.cursor/skills/ui-patterns/rules/container-no-excessive-use.md b/.cursor/skills/ui-patterns/rules/container-no-excessive-use.md
new file mode 100644
index 000000000..a262b77c2
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/container-no-excessive-use.md
@@ -0,0 +1,13 @@
+---
+title: Use Animated Bounds Sparingly
+impact: MEDIUM
+tags: container, performance, restraint
+---
+
+## Use Animated Bounds Sparingly
+
+Animated bounds is a subtle effect. Use it for buttons, accordions, and interactive elements — not everywhere.
+
+**Good use cases:** loading state buttons, expandable sections, accordions, FAQs, content reveals.
+
+**Bad use cases:** every container on the page, static layouts, elements that don't change size.
diff --git a/.cursor/skills/ui-patterns/rules/container-overflow-hidden.md b/.cursor/skills/ui-patterns/rules/container-overflow-hidden.md
new file mode 100644
index 000000000..725aa345c
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/container-overflow-hidden.md
@@ -0,0 +1,25 @@
+---
+title: Overflow Hidden on Animated Container
+impact: MEDIUM
+tags: container, overflow, clip
+---
+
+## Overflow Hidden on Animated Container
+
+Set overflow: hidden on the animated outer container to clip content during size transitions.
+
+**Incorrect (content overflows during animation):**
+
+```tsx
+<motion.div animate={{ height: bounds.height }}>
+  <div ref={ref}>{children}</div>
+</motion.div>
+```
+
+**Correct (clipped during transition):**
+
+```tsx
+<motion.div animate={{ height: bounds.height }} style={{ overflow: 'hidden' }}>
+  <div ref={ref}>{children}</div>
+</motion.div>
+```
diff --git a/.cursor/skills/ui-patterns/rules/container-transition-delay.md b/.cursor/skills/ui-patterns/rules/container-transition-delay.md
new file mode 100644
index 000000000..b56bf2fa0
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/container-transition-delay.md
@@ -0,0 +1,21 @@
+---
+title: Add Delay for Natural Container Transitions
+impact: LOW
+tags: container, delay, transition, natural
+---
+
+## Add Delay for Natural Container Transitions
+
+Add a small delay to container size animations so the transition feels like it's catching up to the content.
+
+**Correct:**
+
+```tsx
+<motion.div
+  animate={{ height: bounds.height }}
+  transition={{ duration: 0.2, delay: 0.05 }}
+  style={{ overflow: 'hidden' }}
+>
+  <div ref={ref}>{children}</div>
+</motion.div>
+```
diff --git a/.cursor/skills/ui-patterns/rules/container-two-div-pattern.md b/.cursor/skills/ui-patterns/rules/container-two-div-pattern.md
new file mode 100644
index 000000000..f2983c438
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/container-two-div-pattern.md
@@ -0,0 +1,35 @@
+---
+title: Two-Div Pattern for Animated Bounds
+impact: HIGH
+tags: container, measure, motion
+---
+
+## Two-Div Pattern for Animated Bounds
+
+Use an outer animated div and an inner measured div. Never measure and animate the same element.
+
+**Incorrect (measure and animate same element — creates feedback loop):**
+
+```tsx
+function AnimatedContainer({ children }) {
+  const [ref, bounds] = useMeasure();
+  return (
+    <motion.div ref={ref} animate={{ height: bounds.height }}>
+      {children}
+    </motion.div>
+  );
+}
+```
+
+**Correct (separate measure and animate targets):**
+
+```tsx
+function AnimatedContainer({ children }) {
+  const [ref, bounds] = useMeasure();
+  return (
+    <motion.div animate={{ height: bounds.height }}>
+      <div ref={ref}>{children}</div>
+    </motion.div>
+  );
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/container-use-resize-observer.md b/.cursor/skills/ui-patterns/rules/container-use-resize-observer.md
new file mode 100644
index 000000000..c56ecc3d5
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/container-use-resize-observer.md
@@ -0,0 +1,48 @@
+---
+title: Use ResizeObserver for Measurement
+impact: MEDIUM
+tags: container, resize-observer, performance
+---
+
+## Use ResizeObserver for Measurement
+
+Use ResizeObserver to track element dimensions. It fires on resize without causing layout thrashing.
+
+**Incorrect (measuring on every render):**
+
+```tsx
+function useMeasure(ref) {
+  const [bounds, setBounds] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    if (ref.current) {
+      const rect = ref.current.getBoundingClientRect();
+      setBounds({ width: rect.width, height: rect.height });
+    }
+  });
+  return bounds;
+}
+```
+
+**Correct (ResizeObserver):**
+
+```tsx
+function useMeasure() {
+  const [element, setElement] = useState(null);
+  const [bounds, setBounds] = useState({ width: 0, height: 0 });
+  const ref = useCallback(node => setElement(node), []);
+
+  useEffect(() => {
+    if (!element) return;
+    const observer = new ResizeObserver(([entry]) => {
+      setBounds({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height,
+      });
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [element]);
+
+  return [ref, bounds];
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-aria-hidden.md b/.cursor/skills/ui-patterns/rules/morphing-aria-hidden.md
new file mode 100644
index 000000000..c71fd92b1
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/morphing-aria-hidden.md
@@ -0,0 +1,25 @@
+---
+title: Aria Hidden on Icon SVGs
+impact: LOW
+tags: morphing, a11y, aria
+---
+
+## Aria Hidden on Icon SVGs
+
+Icon SVGs should be aria-hidden since they're decorative.
+
+**Incorrect (no aria attribute):**
+
+```tsx
+<svg width={size} height={size}>
+  ...
+</svg>
+```
+
+**Correct (aria-hidden):**
+
+```tsx
+<svg width={size} height={size} aria-hidden="true">
+  ...
+</svg>
+```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-consistent-viewbox.md b/.cursor/skills/ui-patterns/rules/morphing-consistent-viewbox.md
new file mode 100644
index 000000000..8c7bbbd0a
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/morphing-consistent-viewbox.md
@@ -0,0 +1,23 @@
+---
+title: Consistent ViewBox Size
+impact: HIGH
+tags: morphing, viewbox, svg
+---
+
+## Consistent ViewBox Size
+
+All icons must use the same viewBox (14x14 recommended).
+
+**Incorrect (mixed scales):**
+
+```ts
+const icon1 = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] }; // 14x14
+const icon2 = { lines: [{ x1: 4, y1: 14, x2: 24, y2: 14 }, ...] }; // 28x28
+```
+
+**Correct (consistent scale):**
+
+```ts
+const VIEWBOX_SIZE = 14;
+const CENTER = 7;
+```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-group-variants.md b/.cursor/skills/ui-patterns/rules/morphing-group-variants.md
new file mode 100644
index 000000000..1987e8b6d
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/morphing-group-variants.md
@@ -0,0 +1,33 @@
+---
+title: Shared Group for Rotational Variants
+impact: HIGH
+tags: morphing, group, rotation
+---
+
+## Shared Group for Rotational Variants
+
+Icons that are rotational variants MUST share the same group and base lines.
+
+**Incorrect (different line definitions):**
+
+```ts
+const arrowRight = { lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, ...] };
+const arrowDown = { lines: [{ x1: 7, y1: 2, x2: 7, y2: 12 }, ...] };
+```
+
+**Correct (shared base lines):**
+
+```ts
+const arrowLines: [IconLine, IconLine, IconLine] = [
+  { x1: 2, y1: 7, x2: 12, y2: 7 },
+  { x1: 7.5, y1: 2.5, x2: 12, y2: 7 },
+  { x1: 7.5, y1: 11.5, x2: 12, y2: 7 },
+];
+
+const icons = {
+  'arrow-right': { lines: arrowLines, rotation: 0, group: 'arrow' },
+  'arrow-down': { lines: arrowLines, rotation: 90, group: 'arrow' },
+  'arrow-left': { lines: arrowLines, rotation: 180, group: 'arrow' },
+  'arrow-up': { lines: arrowLines, rotation: -90, group: 'arrow' },
+};
+```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-jump-non-grouped.md b/.cursor/skills/ui-patterns/rules/morphing-jump-non-grouped.md
new file mode 100644
index 000000000..67f7a22b3
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/morphing-jump-non-grouped.md
@@ -0,0 +1,29 @@
+---
+title: Instant Jump for Non-Grouped Icons
+impact: MEDIUM
+tags: morphing, jump, group
+---
+
+## Instant Jump for Non-Grouped Icons
+
+When transitioning between icons NOT in the same group, rotation should jump instantly.
+
+**Incorrect (always animates rotation):**
+
+```tsx
+useEffect(() => {
+  rotation.set(definition.rotation ?? 0);
+}, [definition]);
+```
+
+**Correct (jumps when not grouped):**
+
+```tsx
+useEffect(() => {
+  if (shouldRotate) {
+    rotation.set(definition.rotation ?? 0);
+  } else {
+    rotation.jump(definition.rotation ?? 0);
+  }
+}, [definition, shouldRotate]);
+```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-reduced-motion.md b/.cursor/skills/ui-patterns/rules/morphing-reduced-motion.md
new file mode 100644
index 000000000..a1212ae48
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/morphing-reduced-motion.md
@@ -0,0 +1,28 @@
+---
+title: Reduced Motion Support for Icons
+impact: MEDIUM
+tags: morphing, a11y, reduced-motion
+---
+
+## Reduced Motion Support for Icons
+
+Respect prefers-reduced-motion by disabling animations.
+
+**Incorrect (always animates):**
+
+```tsx
+function MorphingIcon({ icon }: Props) {
+  return <motion.line animate={...} transition={{ duration: 0.4 }} />;
+}
+```
+
+**Correct (respects preference):**
+
+```tsx
+function MorphingIcon({ icon }: Props) {
+  const reducedMotion = useReducedMotion() ?? false;
+  const activeTransition = reducedMotion ? { duration: 0 } : transition;
+
+  return <motion.line animate={...} transition={activeTransition} />;
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-spring-rotation.md b/.cursor/skills/ui-patterns/rules/morphing-spring-rotation.md
new file mode 100644
index 000000000..41b01fdb2
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/morphing-spring-rotation.md
@@ -0,0 +1,23 @@
+---
+title: Spring Physics for Rotation
+impact: MEDIUM
+tags: morphing, spring, rotation
+---
+
+## Spring Physics for Rotation
+
+Rotation between grouped icons should use spring physics for natural motion.
+
+**Incorrect (duration-based rotation):**
+
+```tsx
+<motion.g animate={{ rotate: rotation }} transition={{ duration: 0.3 }} />
+```
+
+**Correct (spring rotation):**
+
+```tsx
+const rotation = useSpring(definition.rotation ?? 0, activeTransition);
+
+<motion.g style={{ rotate: rotation, transformOrigin: 'center' }} />;
+```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-strokelinecap-round.md b/.cursor/skills/ui-patterns/rules/morphing-strokelinecap-round.md
new file mode 100644
index 000000000..87a9fdb15
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/morphing-strokelinecap-round.md
@@ -0,0 +1,21 @@
+---
+title: Round Stroke Line Caps
+impact: LOW
+tags: morphing, stroke, svg
+---
+
+## Round Stroke Line Caps
+
+Lines should use strokeLinecap="round" for polished endpoints.
+
+**Incorrect (butt caps):**
+
+```tsx
+<motion.line strokeLinecap="butt" />
+```
+
+**Correct (round caps):**
+
+```tsx
+<motion.line strokeLinecap="round" />
+```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-three-lines.md b/.cursor/skills/ui-patterns/rules/morphing-three-lines.md
new file mode 100644
index 000000000..92b35db15
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/morphing-three-lines.md
@@ -0,0 +1,32 @@
+---
+title: Icons Must Use Exactly Three Lines
+impact: HIGH
+tags: morphing, svg, structure
+---
+
+## Icons Must Use Exactly Three Lines
+
+Every icon MUST use exactly 3 lines. No more, no fewer.
+
+**Incorrect (only 2 lines):**
+
+```ts
+const checkIcon = {
+  lines: [
+    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
+    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
+  ],
+};
+```
+
+**Correct (3 lines with collapsed):**
+
+```ts
+const checkIcon = {
+  lines: [
+    { x1: 2, y1: 7.5, x2: 5.5, y2: 11 },
+    { x1: 5.5, y1: 11, x2: 12, y2: 3 },
+    collapsed,
+  ],
+};
+```
diff --git a/.cursor/skills/ui-patterns/rules/morphing-use-collapsed.md b/.cursor/skills/ui-patterns/rules/morphing-use-collapsed.md
new file mode 100644
index 000000000..548dace6f
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/morphing-use-collapsed.md
@@ -0,0 +1,25 @@
+---
+title: Use Collapsed Constant for Unused Lines
+impact: HIGH
+tags: morphing, collapsed, structure
+---
+
+## Use Collapsed Constant for Unused Lines
+
+Unused lines must use the collapsed constant, not omission or null.
+
+**Incorrect (null for unused):**
+
+```ts
+const minusIcon = {
+  lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, null, null],
+};
+```
+
+**Correct (collapsed constant):**
+
+```ts
+const minusIcon = {
+  lines: [{ x1: 2, y1: 7, x2: 12, y2: 7 }, collapsed, collapsed],
+};
+```
diff --git a/.cursor/skills/ui-patterns/rules/native-backdrop-styling.md b/.cursor/skills/ui-patterns/rules/native-backdrop-styling.md
new file mode 100644
index 000000000..f2fabd0c8
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/native-backdrop-styling.md
@@ -0,0 +1,27 @@
+---
+title: Use ::backdrop for Dialog Backgrounds
+impact: MEDIUM
+tags: native, backdrop, dialog
+---
+
+## Use ::backdrop for Dialog Backgrounds
+
+Use ::backdrop pseudo-element for dialog/popover backgrounds.
+
+**Incorrect (extra overlay node):**
+
+```tsx
+<>
+  <div className={styles.overlay} onClick={close} />
+  <dialog className={styles.dialog}>{children}</dialog>
+</>
+```
+
+**Correct (native ::backdrop):**
+
+```css
+dialog::backdrop {
+  background: var(--black-a6);
+  backdrop-filter: blur(4px);
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/native-placeholder-styling.md b/.cursor/skills/ui-patterns/rules/native-placeholder-styling.md
new file mode 100644
index 000000000..25d46a101
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/native-placeholder-styling.md
@@ -0,0 +1,27 @@
+---
+title: Use ::placeholder for Input Styling
+impact: LOW
+tags: native, placeholder, input
+---
+
+## Use ::placeholder for Input Styling
+
+Use ::placeholder for input placeholder styling, not wrapper elements.
+
+**Incorrect (custom placeholder node):**
+
+```tsx
+<div className={styles.inputWrapper}>
+  {!value && <span className={styles.placeholder}>Enter text...</span>}
+  <input value={value} />
+</div>
+```
+
+**Correct (native ::placeholder):**
+
+```css
+input::placeholder {
+  color: var(--gray-9);
+  opacity: 1;
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/native-selection-styling.md b/.cursor/skills/ui-patterns/rules/native-selection-styling.md
new file mode 100644
index 000000000..4af459b93
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/native-selection-styling.md
@@ -0,0 +1,18 @@
+---
+title: Use ::selection for Text Styling
+impact: LOW
+tags: native, selection, text
+---
+
+## Use ::selection for Text Styling
+
+Use ::selection for text selection styling.
+
+**Correct:**
+
+```css
+::selection {
+  background: var(--blue-a5);
+  color: var(--gray-12);
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-hit-slop.md b/.cursor/skills/ui-patterns/rules/prefetch-hit-slop.md
new file mode 100644
index 000000000..d96580884
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/prefetch-hit-slop.md
@@ -0,0 +1,27 @@
+---
+title: Use hitSlop to Trigger Predictions Earlier
+impact: MEDIUM
+tags: prefetch, hit-slop, target
+---
+
+## Use hitSlop to Trigger Predictions Earlier
+
+Expand the invisible prediction area around elements with hitSlop to start loading sooner.
+
+**Incorrect (tight prediction area):**
+
+```tsx
+const { elementRef } = useForesight({
+  callback: () => prefetch(),
+  hitSlop: 0,
+});
+```
+
+**Correct (expanded prediction area):**
+
+```tsx
+const { elementRef } = useForesight({
+  callback: () => prefetch(),
+  hitSlop: 20,
+});
+```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-keyboard-tab.md b/.cursor/skills/ui-patterns/rules/prefetch-keyboard-tab.md
new file mode 100644
index 000000000..e66e13613
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/prefetch-keyboard-tab.md
@@ -0,0 +1,19 @@
+---
+title: Prefetch on Keyboard Navigation
+impact: MEDIUM
+tags: prefetch, keyboard, tab, a11y
+---
+
+## Prefetch on Keyboard Navigation
+
+Monitor focus changes and prefetch when the user is a few tab stops away from a registered element.
+
+**Correct (tab-aware prefetching):**
+
+```tsx
+const { elementRef } = useForesight({
+  callback: () => router.prefetch('/settings'),
+  name: 'settings-link',
+  // Tab prediction fires when focus approaches
+});
+```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-not-everything.md b/.cursor/skills/ui-patterns/rules/prefetch-not-everything.md
new file mode 100644
index 000000000..7cdfc2ae0
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/prefetch-not-everything.md
@@ -0,0 +1,26 @@
+---
+title: Prefetch by Intent, Not Viewport
+impact: HIGH
+tags: prefetch, viewport, intent, bundle-size
+---
+
+## Prefetch by Intent, Not Viewport
+
+Don't prefetch everything visible in the viewport. Prefetch based on user intent to avoid wasted bandwidth.
+
+**Incorrect (prefetch all visible links):**
+
+```tsx
+<Link href="/page" prefetch={true}>
+  Page
+</Link>
+```
+
+**Correct (intent-based prefetching):**
+
+```tsx
+<Link href="/page" prefetch={false}>
+  Page
+</Link>
+// Let trajectory/hover prediction handle it
+```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-touch-fallback.md b/.cursor/skills/ui-patterns/rules/prefetch-touch-fallback.md
new file mode 100644
index 000000000..49798ea3b
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/prefetch-touch-fallback.md
@@ -0,0 +1,31 @@
+---
+title: Fall Back Gracefully on Touch Devices
+impact: MEDIUM
+tags: prefetch, touch, mobile, fallback
+---
+
+## Fall Back Gracefully on Touch Devices
+
+Touch devices have no cursor. Fall back to viewport or touch-start strategies automatically.
+
+**Incorrect (assumes cursor exists):**
+
+```tsx
+function PrefetchLink({ href, children }) {
+  return (
+    <Link href={href} onMouseMove={() => prefetch(href)}>
+      {children}
+    </Link>
+  );
+}
+```
+
+**Correct (device-aware strategy):**
+
+```tsx
+const { elementRef } = useForesight({
+  callback: () => router.prefetch(href),
+  hitSlop: 20,
+});
+// Automatically falls back to touch-start on mobile
+```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-trajectory-over-hover.md b/.cursor/skills/ui-patterns/rules/prefetch-trajectory-over-hover.md
new file mode 100644
index 000000000..87dfb0c32
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/prefetch-trajectory-over-hover.md
@@ -0,0 +1,31 @@
+---
+title: Trajectory Prediction Over Hover Prefetching
+impact: HIGH
+tags: prefetch, trajectory, hover, performance
+---
+
+## Trajectory Prediction Over Hover Prefetching
+
+Hover prefetching starts too late. Trajectory prediction fires while the cursor is still in motion, reclaiming 100-200ms.
+
+**Incorrect (waits for hover):**
+
+```tsx
+<Link href="/about" onMouseEnter={() => router.prefetch('/about')}>
+  About
+</Link>
+```
+
+**Correct (trajectory-based):**
+
+```tsx
+const { elementRef } = useForesight({
+  callback: () => router.prefetch('/about'),
+  hitSlop: 20,
+  name: 'about-link',
+});
+
+<Link ref={elementRef} href="/about">
+  About
+</Link>;
+```
diff --git a/.cursor/skills/ui-patterns/rules/prefetch-use-selectively.md b/.cursor/skills/ui-patterns/rules/prefetch-use-selectively.md
new file mode 100644
index 000000000..1a8c0bfed
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/prefetch-use-selectively.md
@@ -0,0 +1,13 @@
+---
+title: Use Predictive Prefetching Selectively
+impact: MEDIUM
+tags: prefetch, selective, performance
+---
+
+## Use Predictive Prefetching Selectively
+
+Predictive prefetching doesn't belong in every project. Use it where navigation latency is noticeable.
+
+**Good use cases:** data-heavy dashboards, multi-page apps with slow API responses, e-commerce product pages.
+
+**Bad use cases:** static sites with instant navigation, single-page apps with all data preloaded.
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-content-required.md b/.cursor/skills/ui-patterns/rules/pseudo-content-required.md
new file mode 100644
index 000000000..ed65e4192
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/pseudo-content-required.md
@@ -0,0 +1,28 @@
+---
+title: Content Property Required for Pseudo-Elements
+impact: HIGH
+tags: pseudo, content, before-after
+---
+
+## Content Property Required for Pseudo-Elements
+
+::before and ::after require content property to render.
+
+**Incorrect (missing content):**
+
+```css
+.button::before {
+  position: absolute;
+  background: var(--gray-3);
+}
+```
+
+**Correct (content set):**
+
+```css
+.button::before {
+  content: '';
+  position: absolute;
+  background: var(--gray-3);
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-first-line-styling.md b/.cursor/skills/ui-patterns/rules/pseudo-first-line-styling.md
new file mode 100644
index 000000000..dd90b2a17
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/pseudo-first-line-styling.md
@@ -0,0 +1,29 @@
+---
+title: Use ::first-line for Typographic Treatments
+impact: LOW
+tags: pseudo, first-line, typography
+---
+
+## Use ::first-line for Typographic Treatments
+
+Use ::first-line for drop-cap-adjacent styling without JavaScript or hardcoded spans.
+
+**Incorrect (manual span):**
+
+```tsx
+<p>
+  <span className={styles['first-line']}>
+    The opening line of this paragraph
+  </span>
+  is styled differently from the rest.
+</p>
+```
+
+**Correct (native ::first-line):**
+
+```css
+.article p:first-of-type::first-line {
+  font-variant-caps: small-caps;
+  font-weight: var(--font-weight-medium);
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-hit-target-expansion.md b/.cursor/skills/ui-patterns/rules/pseudo-hit-target-expansion.md
new file mode 100644
index 000000000..b4684dabf
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/pseudo-hit-target-expansion.md
@@ -0,0 +1,31 @@
+---
+title: Hit Target Expansion with Pseudo-Elements
+impact: MEDIUM
+tags: pseudo, hit-target, accessibility
+---
+
+## Hit Target Expansion with Pseudo-Elements
+
+Use negative inset values to expand hit targets without extra markup.
+
+**Incorrect (wrapper for hit target):**
+
+```tsx
+<div className={styles.wrapper}>
+  <a className={styles.link}>Link</a>
+</div>
+```
+
+**Correct (pseudo-element expansion):**
+
+```css
+.link {
+  position: relative;
+}
+
+.link::before {
+  content: '';
+  position: absolute;
+  inset: -8px -12px;
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-marker-styling.md b/.cursor/skills/ui-patterns/rules/pseudo-marker-styling.md
new file mode 100644
index 000000000..a6562aa87
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/pseudo-marker-styling.md
@@ -0,0 +1,28 @@
+---
+title: Use ::marker for Custom List Bullets
+impact: LOW
+tags: pseudo, marker, list, bullets
+---
+
+## Use ::marker for Custom List Bullets
+
+Use ::marker to style list bullets without extra elements or background-image hacks.
+
+**Incorrect (background image hack):**
+
+```css
+li {
+  list-style: none;
+  background: url('bullet.svg') no-repeat 0 4px;
+  padding-left: 20px;
+}
+```
+
+**Correct (native ::marker):**
+
+```css
+li::marker {
+  color: var(--gray-8);
+  font-size: 0.8em;
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-over-dom-node.md b/.cursor/skills/ui-patterns/rules/pseudo-over-dom-node.md
new file mode 100644
index 000000000..a03948e68
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/pseudo-over-dom-node.md
@@ -0,0 +1,31 @@
+---
+title: Pseudo-Elements Over DOM Nodes
+impact: MEDIUM
+tags: pseudo, dom, decorative
+---
+
+## Pseudo-Elements Over DOM Nodes
+
+Use pseudo-elements for decorative content instead of extra DOM nodes.
+
+**Incorrect (extra DOM node):**
+
+```tsx
+<button className={styles.button}>
+  <span className={styles.background} />
+  Click me
+</button>
+```
+
+**Correct (pseudo-element):**
+
+```tsx
+<button className={styles.button}>Click me</button>
+```
+
+```css
+.button::before {
+  content: '';
+  /* decorative background */
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-position-relative-parent.md b/.cursor/skills/ui-patterns/rules/pseudo-position-relative-parent.md
new file mode 100644
index 000000000..988dfa45b
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/pseudo-position-relative-parent.md
@@ -0,0 +1,33 @@
+---
+title: Position Relative Parent for Pseudo-Elements
+impact: HIGH
+tags: pseudo, position, relative
+---
+
+## Position Relative Parent for Pseudo-Elements
+
+Parent must have position: relative for absolute pseudo-elements.
+
+**Incorrect (no position on parent):**
+
+```css
+.button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+```
+
+**Correct (parent positioned):**
+
+```css
+.button {
+  position: relative;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/pseudo-z-index-layering.md b/.cursor/skills/ui-patterns/rules/pseudo-z-index-layering.md
new file mode 100644
index 000000000..e6086bdc7
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/pseudo-z-index-layering.md
@@ -0,0 +1,37 @@
+---
+title: Z-Index Layering for Pseudo-Elements
+impact: MEDIUM
+tags: pseudo, z-index, layering
+---
+
+## Z-Index Layering for Pseudo-Elements
+
+Pseudo-elements need z-index to layer correctly with content.
+
+**Incorrect (covers text):**
+
+```css
+.button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--gray-3);
+}
+```
+
+**Correct (layered behind):**
+
+```css
+.button {
+  position: relative;
+  z-index: 1;
+}
+
+.button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--gray-3);
+  z-index: -1;
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/transition-name-cleanup.md b/.cursor/skills/ui-patterns/rules/transition-name-cleanup.md
new file mode 100644
index 000000000..7dad19e8b
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/transition-name-cleanup.md
@@ -0,0 +1,28 @@
+---
+title: Clean Up View Transition Names
+impact: MEDIUM
+tags: view-transition, cleanup
+---
+
+## Clean Up View Transition Names
+
+Remove view-transition-name after transition completes.
+
+**Incorrect (stale name):**
+
+```ts
+sourceImg.style.viewTransitionName = 'card';
+document.startViewTransition(() => {
+  targetImg.style.viewTransitionName = 'card';
+});
+```
+
+**Correct (name cleaned up):**
+
+```ts
+sourceImg.style.viewTransitionName = 'card';
+document.startViewTransition(() => {
+  sourceImg.style.viewTransitionName = '';
+  targetImg.style.viewTransitionName = 'card';
+});
+```
diff --git a/.cursor/skills/ui-patterns/rules/transition-name-required.md b/.cursor/skills/ui-patterns/rules/transition-name-required.md
new file mode 100644
index 000000000..2fe5cf291
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/transition-name-required.md
@@ -0,0 +1,27 @@
+---
+title: View Transition Name Required
+impact: HIGH
+tags: view-transition, transition-name
+---
+
+## View Transition Name Required
+
+Elements participating in view transitions need view-transition-name.
+
+**Incorrect (no transition name):**
+
+```ts
+document.startViewTransition(() => {
+  targetImg.src = newSrc;
+});
+```
+
+**Correct (transition name assigned):**
+
+```ts
+sourceImg.style.viewTransitionName = 'card';
+document.startViewTransition(() => {
+  sourceImg.style.viewTransitionName = '';
+  targetImg.style.viewTransitionName = 'card';
+});
+```
diff --git a/.cursor/skills/ui-patterns/rules/transition-name-unique.md b/.cursor/skills/ui-patterns/rules/transition-name-unique.md
new file mode 100644
index 000000000..8b72f0384
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/transition-name-unique.md
@@ -0,0 +1,24 @@
+---
+title: Unique View Transition Names
+impact: HIGH
+tags: view-transition, unique, naming
+---
+
+## Unique View Transition Names
+
+Each view-transition-name must be unique on the page during transition.
+
+**Incorrect (duplicate names):**
+
+```css
+.card {
+  view-transition-name: card;
+}
+/* Multiple cards with same name */
+```
+
+**Correct (unique per element):**
+
+```ts
+element.style.viewTransitionName = `card-${id}`;
+```
diff --git a/.cursor/skills/ui-patterns/rules/transition-over-js-library.md b/.cursor/skills/ui-patterns/rules/transition-over-js-library.md
new file mode 100644
index 000000000..3a2f9825a
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/transition-over-js-library.md
@@ -0,0 +1,30 @@
+---
+title: View Transitions Over JS Libraries
+impact: MEDIUM
+tags: view-transition, native, performance
+---
+
+## View Transitions Over JS Libraries
+
+Prefer View Transitions API over JavaScript animation libraries for page transitions.
+
+**Incorrect (JS-based transition):**
+
+```tsx
+import { motion } from 'motion/react';
+
+function ImageLightbox() {
+  return <motion.img layoutId="hero" />;
+}
+```
+
+**Correct (native View Transition):**
+
+```ts
+function openLightbox(img: HTMLImageElement) {
+  img.style.viewTransitionName = 'hero';
+  document.startViewTransition(() => {
+    // Native browser transition
+  });
+}
+```
diff --git a/.cursor/skills/ui-patterns/rules/transition-style-pseudo-elements.md b/.cursor/skills/ui-patterns/rules/transition-style-pseudo-elements.md
new file mode 100644
index 000000000..5a9305e76
--- /dev/null
+++ b/.cursor/skills/ui-patterns/rules/transition-style-pseudo-elements.md
@@ -0,0 +1,26 @@
+---
+title: Style View Transition Pseudo-Elements
+impact: MEDIUM
+tags: view-transition, pseudo, styling
+---
+
+## Style View Transition Pseudo-Elements
+
+Style view transition pseudo-elements for custom animations.
+
+**Incorrect (default crossfade only):**
+
+```ts
+document.startViewTransition(() => {
+  /* ... */
+});
+```
+
+**Correct (custom animation):**
+
+```css
+::view-transition-group(card) {
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+```
diff --git a/.cursor/skills/ux-heuristics/SKILL.md b/.cursor/skills/ux-heuristics/SKILL.md
new file mode 100644
index 000000000..0c002218f
--- /dev/null
+++ b/.cursor/skills/ux-heuristics/SKILL.md
@@ -0,0 +1,60 @@
+---
+name: ux-heuristics
+description: Apply Nielsen's 10 usability heuristics when building or reviewing UI. Use when creating components, pages, forms, modals, tables, navigation, error states, or when the user asks for UX review, usability audit, or heuristic evaluation.
+metadata:
+  author: Quintessential
+  version: '3.0.0'
+  short-description: Nielsen's 10 usability heuristics for interface review
+---
+
+# Nielsen's 10 Usability Heuristics
+
+Apply these heuristics when building or reviewing any user interface. Treat them as a checklist -- not every heuristic applies to every change, but scan all 10 before considering work complete.
+
+For the full reference with examples and edge cases, see [reference.md](reference.md).
+
+## Quick Checklist
+
+When building or reviewing UI, verify:
+
+- [ ] **H1 System status** -- Does the UI show what's happening? (loading, saving, success, error)
+- [ ] **H2 Real-world match** -- Does it use the user's language, not dev jargon? Are icons/metaphors intuitive?
+- [ ] **H3 User control** -- Can users undo, cancel, go back, or escape from any state?
+- [ ] **H4 Consistency** -- Does it follow existing patterns in the app and platform conventions?
+- [ ] **H5 Error prevention** -- Are destructive actions guarded? Are constraints in place before errors happen?
+- [ ] **H6 Recognition over recall** -- Are options visible? Can users see rather than remember what to do?
+- [ ] **H7 Flexibility** -- Are there shortcuts for experts? Does it scale for power users?
+- [ ] **H8 Minimalist design** -- Is every element earning its place? Is the signal-to-noise ratio high?
+- [ ] **H9 Error recovery** -- Are error messages plain language, specific, and actionable?
+- [ ] **H10 Help** -- Is contextual help available where users might need it?
+
+## How to Apply
+
+### When building new UI
+
+1. Before implementation, scan the checklist to anticipate issues
+2. Prioritize H1 (status), H3 (control), H5 (error prevention) -- these prevent the most user frustration
+3. After implementation, do a final pass against all 10
+
+### When reviewing existing UI
+
+1. Walk through each user flow as if seeing it for the first time
+2. Flag violations with severity:
+   - **Critical** -- blocks the user or causes data loss (H3, H5, H9)
+   - **Major** -- causes significant confusion or inefficiency (H1, H2, H4)
+   - **Minor** -- polish and optimization (H6, H7, H8, H10)
+
+## Common Violations in CMS/Admin UIs
+
+| Pattern                                        | Heuristic violated | Fix                                             |
+| ---------------------------------------------- | ------------------ | ----------------------------------------------- |
+| No feedback after save/delete                  | H1                 | Add toast notification or inline confirmation   |
+| Form submits with no validation                | H5                 | Add client-side validation before submit        |
+| No way to cancel mid-flow                      | H3                 | Add cancel button, support Escape key           |
+| Inconsistent button placement                  | H4                 | Standardize primary action position (right)     |
+| Raw error codes shown to user                  | H9                 | Translate to plain language with recovery steps |
+| Empty states with no guidance                  | H10                | Add helpful empty state with call-to-action     |
+| Truncated text with no way to see full content | H6                 | Add tooltip or expandable row                   |
+| Delete without confirmation                    | H5                 | Add confirmation dialog for destructive actions |
+| No loading indicator on async operations       | H1                 | Add spinner, skeleton, or progress bar          |
+| Jargon in labels (e.g. "instructorId")         | H2                 | Use human-readable labels ("Instructor")        |
diff --git a/.cursor/skills/ux-heuristics/reference.md b/.cursor/skills/ux-heuristics/reference.md
new file mode 100644
index 000000000..caa3b2f0c
--- /dev/null
+++ b/.cursor/skills/ux-heuristics/reference.md
@@ -0,0 +1,222 @@
+# Nielsen's 10 Usability Heuristics -- Full Reference
+
+Based on [NN/g's 10 Usability Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/).
+
+---
+
+## H1. Visibility of System Status
+
+The design should always keep users informed about what is going on through appropriate feedback within a reasonable amount of time.
+
+**What to check:**
+
+- Loading states: spinners, skeletons, progress bars for async operations
+- Success confirmation: toasts, inline messages after save/create/delete
+- Error states: clear visual indicators when something fails
+- State indicators: active tab, selected item, current page, sort direction
+- Real-time feedback: character counts, validation as you type, preview
+
+**Implementation patterns:**
+
+- Toast notifications for transient success/error messages
+- Inline validation on form fields (not just on submit)
+- Skeleton loaders for content that takes time to load
+- Disabled states with visual feedback on buttons during submission
+- Progress indicators for multi-step flows
+
+---
+
+## H2. Match Between the System and the Real World
+
+The interface should speak the users' language, using words, phrases, icons, and concepts familiar to them rather than internal jargon.
+
+**What to check:**
+
+- Labels use domain language, not developer terms (e.g., "Instructor" not "instructorId")
+- Icons match real-world metaphors (trash can for delete, pencil for edit)
+- Information hierarchy follows natural reading order
+- Date/time formats match user expectations (locale-appropriate)
+- Terminology is consistent with industry standards
+
+**Implementation patterns:**
+
+- Use human-readable labels derived from the domain model
+- Format dates, currencies, and numbers for the target locale
+- Order form fields in a logical sequence matching real-world workflows
+- Use familiar UI metaphors (drag to reorder, swipe to delete)
+
+---
+
+## H3. User Control and Freedom
+
+Users often act by mistake, so they need clearly marked "emergency exits" to leave unwanted states without going through long flows.
+
+**What to check:**
+
+- Every modal/dialog has a close button and supports Escape key
+- Every multi-step flow has a back button or breadcrumb navigation
+- Destructive actions can be undone or require confirmation
+- Forms have a cancel button that returns to the previous state
+- Navigation doesn't trap users (browser back always works)
+
+**Implementation patterns:**
+
+- Cancel buttons on all forms and dialogs
+- Undo capability for delete operations (soft delete + undo toast)
+- Confirmation dialogs for irreversible actions
+- Escape key closes modals, popovers, and dropdown menus
+- Browser history integration (back button works as expected)
+
+---
+
+## H4. Consistency and Standards
+
+Users should not have to wonder whether different words, actions, or situations mean the same thing. Follow platform and industry conventions.
+
+**What to check:**
+
+- Same action, same word everywhere (don't mix "Delete" / "Remove" / "Trash")
+- Button styles consistent (primary action always same color/position)
+- Layout patterns reused (list pages all look similar, form pages all look similar)
+- Follows platform conventions (OS-native patterns, web standards)
+- Internal consistency (spacing, typography, color usage follow a system)
+
+**Implementation patterns:**
+
+- Design tokens / theme for consistent colors, spacing, typography
+- Shared components for common patterns (DataTable, PageHeader, forms)
+- Consistent icon usage (same icon always means same action)
+- Primary action always on the right in button groups
+- Consistent empty states, loading states, error states
+
+---
+
+## H5. Error Prevention
+
+Good design prevents problems before they happen by eliminating error-prone conditions or checking for them.
+
+**What to check:**
+
+- Required fields are clearly marked and validated before submission
+- Destructive actions require confirmation (delete, publish, bulk operations)
+- Sensible defaults reduce chances of misconfiguration
+- Constraints prevent invalid input (max length, number ranges, date ranges)
+- Dangerous operations are visually distinct (red styling for destructive actions)
+
+**Implementation patterns:**
+
+- Client-side form validation with Zod schemas
+- Confirmation dialogs for delete, publish, and bulk actions
+- Input constraints (type="number" min/max, maxLength, date pickers)
+- Disabled submit button until form is valid
+- Auto-save or warn before navigating away from unsaved changes
+
+---
+
+## H6. Recognition Rather Than Recall
+
+Minimize memory load by making elements, actions, and options visible rather than requiring users to remember.
+
+**What to check:**
+
+- Options are visible in menus, not hidden behind memorizable shortcuts only
+- Search fields have placeholder text suggesting what to search
+- Form fields have labels (not just placeholders that disappear)
+- Recently used items or suggestions are shown
+- Related information is co-located (don't make users flip between pages)
+
+**Implementation patterns:**
+
+- Persistent labels on all form fields (not placeholder-only)
+- Combobox/search for fields with many options instead of plain dropdowns
+- Breadcrumbs or page titles showing current location
+- Tooltips for icon-only buttons
+- Inline help text for non-obvious fields
+
+---
+
+## H7. Flexibility and Efficiency of Use
+
+Cater to both novice and expert users. Provide shortcuts that speed up frequent actions.
+
+**What to check:**
+
+- Keyboard shortcuts for common actions (Cmd+S to save, Escape to close)
+- Bulk operations available (select all, bulk delete, bulk publish)
+- Search and filter for large lists
+- Sortable columns in tables
+- Customizable views (grid/list toggle, column visibility)
+
+**Implementation patterns:**
+
+- Grid/list view toggle on collection pages
+- Column sorting with visual indicators
+- Search with debounce on large data sets
+- Keyboard navigation in dropdowns and menus
+- Pagination with configurable page sizes
+
+---
+
+## H8. Aesthetic and Minimalist Design
+
+Every extra element competes with what matters. Focus on essentials that support primary user goals.
+
+**What to check:**
+
+- No unnecessary decorative elements that distract from content
+- Information density appropriate for the context (not too sparse, not too cluttered)
+- Visual hierarchy guides the eye to what matters most
+- White space used effectively to group related elements
+- Secondary actions are visually subordinate to primary ones
+
+**Implementation patterns:**
+
+- Progressive disclosure (show details on demand, not all at once)
+- Ghost/outline variants for secondary actions, solid for primary
+- Collapsible sections for advanced options
+- Clean empty states (helpful but not overwhelming)
+- Consistent use of muted colors for secondary information
+
+---
+
+## H9. Help Users Recognize, Diagnose, and Recover from Errors
+
+Error messages should be plain language, clearly indicate what went wrong, and suggest how to fix it.
+
+**What to check:**
+
+- Error messages are in plain language (no error codes, stack traces, or technical jargon)
+- Errors indicate specifically what went wrong ("Email is invalid" not "Validation error")
+- Errors suggest how to fix the problem ("Enter a valid email address like name@example.com")
+- Form errors appear next to the relevant field, not just at the top
+- Network/server errors have retry options
+
+**Implementation patterns:**
+
+- Inline field-level error messages below each invalid field
+- Toast notifications for operation failures with retry button
+- Specific Zod error messages in schemas
+- Fallback UI for component-level errors (error boundaries)
+- Graceful degradation when external services fail
+
+---
+
+## H10. Help and Documentation
+
+Help should be easy to search, task-focused, concise, and shown in context.
+
+**What to check:**
+
+- Empty states include helpful guidance ("No sessions yet. Create your first session.")
+- Complex fields have help text or tooltips explaining what's expected
+- Onboarding flow for first-time users
+- Contextual help near where users need it (not buried in a separate docs page)
+- Labels and descriptions are self-explanatory
+
+**Implementation patterns:**
+
+- Helper text below form fields for non-obvious inputs
+- Empty state components with description + call-to-action button
+- Tooltip on icon-only buttons explaining the action
+- Description text on page headers explaining the page's purpose
+- Placeholder text in search fields suggesting usage
diff --git a/.cursor/skills/web-animation-design/SKILL.md b/.cursor/skills/web-animation-design/SKILL.md
new file mode 100644
index 000000000..554a91692
--- /dev/null
+++ b/.cursor/skills/web-animation-design/SKILL.md
@@ -0,0 +1,533 @@
+---
+name: web-animation-design
+description: 'Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth, storyboard, stage, TIMING object.'
+metadata:
+  author: Quintessential
+  version: '3.0.0'
+  short-description: Design and implement web animations that feel natural and purposeful
+---
+
+# Web Animation Design
+
+Quintessential's comprehensive guide for creating animations that feel right. Covers principles, easing, timing, springs, exit animations, code architecture, performance, and accessibility.
+
+## Quick Start
+
+Every animation decision starts with these questions:
+
+1. **Is this element entering or exiting?** → Use `ease-out`
+2. **Is an on-screen element moving?** → Use `ease-in-out`
+3. **Is this a hover/color transition?** → Use `ease`
+4. **Will users see this 100+ times daily?** → Don't animate it
+
+### Motion Type Decision Framework
+
+| Motion Type                             | Best Choice | Why                                        |
+| --------------------------------------- | ----------- | ------------------------------------------ |
+| User-driven (drag, flick, gesture)      | Spring      | Survives interruption, preserves velocity  |
+| System-driven (state change, feedback)  | Easing      | Clear start/end, predictable timing        |
+| Time representation (progress, loading) | Linear      | 1:1 relationship between time and progress |
+| High-frequency (typing, fast toggles)   | None        | Animation adds noise, feels slower         |
+
+## The Easing Blueprint
+
+### ease-out (Most Common)
+
+Use for **user-initiated interactions**: dropdowns, modals, tooltips, any element entering or exiting the screen.
+
+```css
+/* Sorted weak to strong */
+--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+```
+
+Why it works: Acceleration at the start creates an instant, responsive feeling. The element "jumps" toward its destination then settles in.
+
+### ease-in-out (For Movement)
+
+Use when **elements already on screen need to move or morph**. Mimics natural motion like a car accelerating then braking.
+
+```css
+/* Sorted weak to strong */
+--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+```
+
+### ease (For Hover Effects)
+
+Use for **hover states and color transitions**. The asymmetrical curve (faster start, slower end) feels elegant for gentle animations.
+
+```css
+transition: background-color 150ms ease;
+```
+
+### linear (Avoid in UI)
+
+Only use for:
+
+- Constant-speed animations (marquees, tickers)
+- Time visualization (hold-to-delete progress indicators)
+
+Linear feels robotic and unnatural for interactive elements.
+
+### ease-in (Almost Never)
+
+**Avoid for UI animations.** Makes interfaces feel sluggish because the slow start delays visual feedback.
+
+### Paired Elements Rule
+
+Elements that animate together must use the same easing and duration. Modal + overlay, tooltip + arrow, drawer + backdrop — if they move as a unit, they should feel like a unit.
+
+```css
+.modal {
+  transition: transform 200ms ease-out;
+}
+.overlay {
+  transition: opacity 200ms ease-out;
+}
+```
+
+## Timing and Duration
+
+| Element Type                      | Duration  |
+| --------------------------------- | --------- |
+| Micro-interactions (press, hover) | 120-180ms |
+| Standard UI (tooltips, dropdowns) | 150-250ms |
+| Small state changes               | 180-260ms |
+| Modals, drawers                   | 200-300ms |
+
+**Rules:**
+
+- UI animations must stay under 300ms
+- Larger elements animate slower than smaller ones
+- Exit animations can be ~20% faster than entrance
+- Match duration to distance — longer travel = longer duration
+- If animation feels slow, **shorten the duration first** before adjusting the curve
+
+### The Frequency Rule
+
+Determine how often users will see the animation:
+
+- **100+ times/day** → No animation (or drastically reduced)
+- **Occasional use** → Standard animation
+- **Rare/first-time** → Can be more special
+
+## When to Animate
+
+**Do animate:**
+
+- Enter/exit transitions for spatial consistency
+- State changes that benefit from visual continuity
+- Responses to user actions (feedback)
+- Rarely-used interactions where delight adds value
+
+**Don't animate:**
+
+- Keyboard-initiated actions (arrow keys, shortcuts, tab/focus)
+- Hover effects on frequently-used elements
+- Anything users interact with 100+ times daily
+- When speed matters more than smoothness
+- Context menu entrances (exit only — context menus should appear instantly)
+
+**Marketing vs. Product:**
+
+- Marketing: More elaborate, longer durations allowed
+- Product: Fast, purposeful, never frivolous
+
+## Animation Principles
+
+### Active State Feedback
+
+Interactive elements must have `:active` scale transforms for press feedback:
+
+```css
+.button:active {
+  transform: scale(0.97);
+}
+```
+
+### Subtle Deformation
+
+Squash/stretch must stay in the 0.95-1.05 range. Anything beyond looks cartoonish in UI.
+
+```tsx
+<motion.div whileTap={{ scale: 0.98 }} />
+```
+
+### Stagger Limits
+
+Stagger delays must not exceed 50ms per item. Excessive stagger makes lists feel slow.
+
+```tsx
+transition={{ staggerChildren: 0.03 }}
+```
+
+### Staging
+
+- **One focal point** — Only one element should animate prominently at a time
+- **Dim backgrounds** — Modal/dialog backgrounds should dim to direct focus
+- **Z-index hierarchy** — Animated elements must respect z-index layers
+
+## Spring Animations
+
+Springs feel more natural because they don't have fixed durations — they simulate real physics.
+
+### When to Use Springs
+
+- Gesture-driven motion (drag, flick, swipe) — springs **must** be used
+- Interruptible motion — springs **must** be used (they preserve velocity when interrupted; CSS animations restart from zero)
+- Elements that should feel "alive" (Dynamic Island)
+- Organic, playful interfaces
+- Any motion needing overshoot-and-settle behavior
+
+### Configuration
+
+**Apple's approach (recommended for most cases):**
+
+```js
+{ type: "spring", duration: 0.5, bounce: 0.2 }
+```
+
+**Traditional physics (more control):**
+
+```js
+{ type: "spring", mass: 1, stiffness: 100, damping: 10 }
+```
+
+### Spring Guidelines
+
+- **Avoid bounce** in most UI contexts
+- **Use bounce** for drag-to-dismiss, playful interactions
+- Keep bounce subtle (0.1-0.3) when used
+- Balanced parameters: avoid excessive oscillation (e.g. `stiffness: 1000, damping: 5` is too bouncy)
+- When velocity matters (drag release), pass input velocity to the spring:
+
+```tsx
+onDragEnd={(e, info) => {
+  animate(target, { x: 0 }, {
+    type: "spring",
+    velocity: info.velocity.x,
+  });
+}}
+```
+
+### Quick Reference
+
+| Interaction     | Timing | Type                          |
+| --------------- | ------ | ----------------------------- |
+| Drag release    | Spring | `stiffness: 500, damping: 30` |
+| Button press    | 150ms  | `ease`                        |
+| Modal enter     | 200ms  | `ease-out`                    |
+| Modal exit      | 150ms  | `ease-out`                    |
+| Page transition | 250ms  | `ease-in-out`                 |
+| Progress bar    | varies | `linear`                      |
+| Typing feedback | 0ms    | none                          |
+
+## Exit Animations (AnimatePresence)
+
+### Core Rules
+
+- `exit-requires-wrapper` — Conditional motion elements must be wrapped in `<AnimatePresence>`
+- `exit-prop-required` — Elements inside AnimatePresence need an `exit` prop
+- `exit-key-required` — Dynamic lists need unique keys (`item.id`), never array index
+- `exit-matches-initial` — Exit animation should mirror initial for symmetry
+
+```tsx
+<AnimatePresence>
+  {isVisible && (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 20 }}
+    />
+  )}
+</AnimatePresence>
+```
+
+### Presence Hooks
+
+- `presence-hook-in-child` — `useIsPresent` must be called from the child of AnimatePresence, not the parent
+- `presence-safe-to-remove` — Call `safeToRemove` after async cleanup when using `usePresence`
+- `presence-disable-interactions` — Disable interactions on exiting elements via `disabled={!isPresent}`
+
+### Mode Selection
+
+- `mode-wait-doubles-duration` — Mode `"wait"` nearly doubles perceived duration; halve your timing values when using it
+- `mode-sync-layout-conflict` — Mode `"sync"` causes layout conflicts; use `"popLayout"` instead for lists
+- `mode-pop-layout-for-lists` — Use `popLayout` mode for list reordering to prevent layout shifts
+
+### Nested AnimatePresence
+
+- `nested-propagate-required` — Nested AnimatePresence needs the `propagate` prop on both parent and child
+- `nested-consistent-timing` — Coordinate parent-child exit durations; child must finish before parent
+
+## Code Architecture (Storyboard Pattern)
+
+Structure animated components for readability and tunability. Every timing value, scale, position, and spring config is extracted to named constants.
+
+### 1. ASCII Storyboard Comment
+
+A block comment at the top of the file that reads like a shot list:
+
+```
+/* ─────────────────────────────────────────────────────────
+ * ANIMATION STORYBOARD
+ *
+ *    0ms   waiting for trigger (scroll into view / mount)
+ *  300ms   card fades in, scale 0.85 → 1.0
+ *  900ms   heading text highlights
+ * 1500ms   detail rows slide up (staggered 200ms)
+ * 2100ms   CTA button fades in
+ * ───────────────────────────────────────────────────────── */
+```
+
+Rules: right-align ms values, use `→` for value transitions, note stagger intervals in parentheses.
+
+### 2. TIMING Object
+
+A single `const TIMING` object with every stage delay in milliseconds. This is the **only place** timing values live.
+
+```tsx
+const TIMING = {
+  cardAppear: 300,
+  headingGlow: 900,
+  detailRows: 1500,
+  ctaButton: 2100,
+};
+```
+
+Keys are camelCase descriptive verb phrases. Values are ms after the animation trigger (not deltas between stages).
+
+### 3. Element Config Objects
+
+Each animated element gets its own named config object:
+
+```tsx
+const CARD = {
+  initialScale: 0.85,
+  finalScale: 1.0,
+  spring: { type: 'spring' as const, stiffness: 300, damping: 30 },
+};
+
+const ROWS = {
+  stagger: 0.2,
+  offsetY: 12,
+  spring: { type: 'spring' as const, stiffness: 300, damping: 30 },
+  items: [
+    { label: 'Row 1', value: 'A' },
+    { label: 'Row 2', value: 'B' },
+  ],
+};
+```
+
+UPPERCASE names. Group ALL values for one element together. Repeated items are arrays rendered with `.map()`.
+
+### 4. Stage-Driven Sequencing
+
+A single `stage` integer state drives the entire sequence — no scattered boolean flags:
+
+```tsx
+const [stage, setStage] = useState(0);
+
+useEffect(() => {
+  if (!isInView) {
+    setStage(0);
+    return;
+  }
+
+  setStage(0);
+  const timers: NodeJS.Timeout[] = [];
+
+  timers.push(setTimeout(() => setStage(1), TIMING.cardAppear));
+  timers.push(setTimeout(() => setStage(2), TIMING.headingGlow));
+  timers.push(setTimeout(() => setStage(3), TIMING.detailRows));
+  timers.push(setTimeout(() => setStage(4), TIMING.ctaButton));
+
+  return () => timers.forEach(clearTimeout);
+}, [isInView, replayTrigger]);
+```
+
+### 5. JSX Pattern
+
+Reference config objects in animate props, use `stage >= N` checks:
+
+```tsx
+<motion.div
+  initial={{ opacity: 0, scale: CARD.initialScale }}
+  animate={{
+    opacity: stage >= 1 ? 1 : 0,
+    scale: stage >= 1 ? CARD.finalScale : CARD.initialScale,
+  }}
+  transition={CARD.spring}
+/>
+```
+
+For staggered groups:
+
+```tsx
+{
+  ROWS.items.map((item, i) => (
+    <motion.div
+      key={item.label}
+      initial={{ opacity: 0, y: ROWS.offsetY }}
+      animate={{
+        opacity: stage >= 3 ? 1 : 0,
+        y: stage >= 3 ? 0 : ROWS.offsetY,
+      }}
+      transition={{ ...ROWS.spring, delay: i * ROWS.stagger }}
+    >
+      {item.label}
+    </motion.div>
+  ));
+}
+```
+
+### Storyboard Checklist
+
+- [ ] ASCII storyboard comment at top matches actual TIMING values
+- [ ] Zero magic numbers in JSX or useEffect — everything references a const
+- [ ] Springs defined in config objects, not inline
+- [ ] Repeated elements use `.map()` over a data array
+- [ ] Stage values use `>=` checks (stages are additive)
+- [ ] `replayTrigger` in dependency array for dev/debug replay
+
+## Performance
+
+### The Golden Rule
+
+Only animate `transform` and `opacity`. These skip layout and paint stages, running entirely on the GPU.
+
+**Avoid animating:**
+
+- `padding`, `margin`, `height`, `width` (trigger layout)
+- `blur` filters above 20px (expensive, especially Safari)
+- CSS variables in deep component trees
+
+### Optimization Techniques
+
+```css
+.animated-element {
+  will-change: transform;
+}
+```
+
+**React-specific:**
+
+- Animate outside React's render cycle when possible
+- Use refs to update styles directly instead of state
+- Re-renders on every frame = dropped frames
+
+**Framer Motion:**
+
+```jsx
+// Hardware accelerated (transform as string)
+<motion.div animate={{ transform: "translateX(100px)" }} />
+
+// NOT hardware accelerated (more readable but slower)
+<motion.div animate={{ x: 100 }} />
+```
+
+### CSS vs. JavaScript
+
+- CSS animations run off main thread (smoother under load)
+- JS animations (Framer Motion, React Spring) use `requestAnimationFrame`
+- CSS better for simple, predetermined animations
+- JS better for dynamic, interruptible animations
+
+## Accessibility
+
+### prefers-reduced-motion
+
+Whenever you add an animation, also add a media query to disable it:
+
+```css
+.modal {
+  animation: fadeIn 200ms ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal {
+    animation: none;
+  }
+}
+```
+
+### Reduced Motion Guidelines
+
+- Every animated element needs its own `prefers-reduced-motion` media query
+- Set `animation: none` or `transition: none` (no `!important`)
+- No exceptions for opacity or color — disable all animations
+- Show play buttons instead of autoplay videos
+
+### Framer Motion Implementation
+
+```jsx
+import { useReducedMotion } from 'framer-motion';
+
+function Component() {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <motion.div
+      initial={shouldReduceMotion ? false : { opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+    />
+  );
+}
+```
+
+### Touch Device Considerations
+
+```css
+@media (hover: hover) and (pointer: fine) {
+  .element:hover {
+    transform: scale(1.05);
+  }
+}
+```
+
+Touch devices trigger hover on tap, causing false positives.
+
+## Practical Tips
+
+Quick reference for common scenarios. See [practical-tips.md](practical-tips.md) for detailed implementations.
+
+| Scenario                        | Solution                                        |
+| ------------------------------- | ----------------------------------------------- |
+| Make buttons feel responsive    | Add `transform: scale(0.97)` on `:active`       |
+| Element appears from nowhere    | Start from `scale(0.95)`, not `scale(0)`        |
+| Shaky/jittery animations        | Add `will-change: transform`                    |
+| Hover causes flicker            | Animate child element, not parent               |
+| Popover scales from wrong point | Set `transform-origin` to trigger location      |
+| Sequential tooltips feel slow   | Skip delay/animation after first tooltip        |
+| Small buttons hard to tap       | Use 44px minimum hit area (pseudo-element)      |
+| Something still feels off       | Add subtle blur (under 20px) to mask it         |
+| Hover triggers on mobile        | Use `@media (hover: hover) and (pointer: fine)` |
+| Animation feels slow            | Shorten duration first, then adjust curve       |
+
+## Easing Decision Flowchart
+
+Is the element entering or exiting the viewport?
+├── Yes → ease-out
+└── No
+├── Is it moving/morphing on screen?
+│ └── Yes → ease-in-out
+└── Is it a hover change?
+├── Yes → ease
+└── Is it constant motion?
+├── Yes → linear
+└── Default → ease-out
+
+## Reference Files
+
+- [practical-tips.md](practical-tips.md) — Detailed implementations for common animation scenarios
+
+Reference: [Motion Documentation](https://motion.dev), [Motion AnimatePresence](https://motion.dev/docs/react-animate-presence), [Apple WWDC23: Animate with Springs](https://developer.apple.com/videos/play/wwdc2023/10158)
diff --git a/.cursor/skills/web-animation-design/practical-tips.md b/.cursor/skills/web-animation-design/practical-tips.md
new file mode 100644
index 000000000..52aaf90f0
--- /dev/null
+++ b/.cursor/skills/web-animation-design/practical-tips.md
@@ -0,0 +1,294 @@
+# Practical Animation Tips
+
+Detailed reference guide for common animation scenarios. Use this as a checklist when implementing animations.
+
+## Recording & Debugging
+
+### Record Your Animations
+
+When something feels off but you can't identify why, record the animation and play it back frame by frame. This reveals details invisible at normal speed.
+
+### Fix Shaky Animations
+
+Elements may shift by 1px at the start/end of CSS transform animations due to GPU/CPU rendering handoff.
+
+**Fix:**
+
+```css
+.element {
+  will-change: transform;
+}
+```
+
+This tells the browser to keep the element on the GPU throughout the animation.
+
+### Take Breaks
+
+Don't code and ship animations in one sitting. Step away, return with fresh eyes. The best animations are reviewed and refined over days, not hours.
+
+## Button & Click Feedback
+
+### Scale Buttons on Press
+
+Make interfaces feel responsive by adding subtle scale feedback:
+
+```css
+button:active {
+  transform: scale(0.97);
+}
+```
+
+This gives instant visual feedback that the interface is listening.
+
+### Don't Animate from scale(0)
+
+Starting from `scale(0)` makes elements appear from nowhere — it feels unnatural.
+
+**Bad:**
+
+```css
+.element {
+  transform: scale(0);
+}
+.element.visible {
+  transform: scale(1);
+}
+```
+
+**Good:**
+
+```css
+.element {
+  transform: scale(0.95);
+  opacity: 0;
+}
+.element.visible {
+  transform: scale(1);
+  opacity: 1;
+}
+```
+
+Elements should always have some visible shape, like a deflated balloon.
+
+## Tooltips & Popovers
+
+### Skip Animation on Subsequent Tooltips
+
+First tooltip: delay + animation. Subsequent tooltips (while one is open): instant, no delay.
+
+```css
+.tooltip {
+  transition:
+    transform 125ms ease-out,
+    opacity 125ms ease-out;
+  transform-origin: var(--transform-origin);
+}
+
+.tooltip[data-starting-style],
+.tooltip[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+.tooltip[data-instant] {
+  transition-duration: 0ms;
+}
+```
+
+Radix UI and Base UI support this pattern with `data-instant` attribute.
+
+### Make Animations Origin-Aware
+
+Popovers should scale from their trigger, not from center.
+
+```css
+.popover {
+  transform-origin: var(--transform-origin);
+}
+```
+
+**Radix UI:**
+
+```css
+.popover {
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+}
+```
+
+**Base UI:**
+
+```css
+.popover {
+  transform-origin: var(--transform-origin);
+}
+```
+
+## Speed & Timing
+
+### Keep Animations Fast
+
+A faster-spinning spinner makes apps feel faster even with identical load times. A 180ms select animation feels more responsive than 400ms.
+
+**Rule:** UI animations should stay under 300ms.
+
+### Don't Animate Keyboard Interactions
+
+Arrow key navigation, keyboard shortcuts — these are repeated hundreds of times daily. Animation makes them feel slow and disconnected.
+
+**Never animate:**
+
+- List navigation with arrow keys
+- Keyboard shortcut responses
+- Tab/focus movements
+
+### Be Careful with Frequently-Used Elements
+
+A hover effect is nice, but if triggered multiple times a day, it may benefit from no animation at all.
+
+**Guideline:** Use your own product daily. You'll discover which animations become annoying through repeated use.
+
+## Hover States
+
+### Fix Hover Flicker
+
+When hover animation changes element position, the cursor may leave the element, causing flicker.
+
+**Problem:**
+
+```css
+.box:hover {
+  transform: translateY(-20%);
+}
+```
+
+**Solution:** Animate a child element instead:
+
+```html
+<div class="box">
+  <div class="box-inner"></div>
+</div>
+```
+
+```css
+.box:hover .box-inner {
+  transform: translateY(-20%);
+}
+
+.box-inner {
+  transition: transform 200ms ease;
+}
+```
+
+The parent's hover area stays stable while the child moves.
+
+### Disable Hover on Touch Devices
+
+Touch devices don't have true hover. Accidental finger movement triggers unwanted hover states.
+
+```css
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    transform: scale(1.05);
+  }
+}
+```
+
+**Note:** Tailwind v4's `hover:` class automatically applies only when the device supports hover.
+
+## Touch & Accessibility
+
+### Ensure Appropriate Target Areas
+
+Small buttons are hard to tap. Use a pseudo-element to create larger hit areas without changing layout.
+
+**Minimum target:** 44px (Apple and WCAG recommendation)
+
+```css
+@utility touch-hitbox {
+  position: relative;
+}
+
+@utility touch-hitbox::before {
+  content: '';
+  position: absolute;
+  display: block;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-height: 44px;
+  min-width: 44px;
+  z-index: 9999;
+}
+```
+
+Usage:
+
+```jsx
+<button className="touch-hitbox">
+  <BellIcon />
+</button>
+```
+
+## Easing Selection
+
+### Use ease-out for Enter/Exit
+
+Elements entering or exiting should use `ease-out`. The fast start creates responsiveness.
+
+```css
+.dropdown {
+  transition:
+    transform 200ms ease-out,
+    opacity 200ms ease-out;
+}
+```
+
+### Use ease-in-out for On-Screen Movement
+
+Elements already visible that need to move should use `ease-in-out`. Mimics natural acceleration/deceleration.
+
+```css
+.slider-handle {
+  transition: transform 250ms ease-in-out;
+}
+```
+
+### Use Custom Easing Curves
+
+Built-in CSS curves are usually too weak. Custom curves create more intentional motion.
+
+**Resources:**
+
+- External: [easings.co](https://easings.co/)
+
+## Visual Tricks
+
+### Use Blur as a Fallback
+
+When easing and timing adjustments don't solve the problem, add subtle blur to mask imperfections.
+
+```css
+.button-transition {
+  transition:
+    transform 150ms ease-out,
+    filter 150ms ease-out;
+}
+
+.button-transition:active {
+  transform: scale(0.97);
+  filter: blur(2px);
+}
+```
+
+Blur bridges visual gaps between states, tricking the eye into seeing smoother transitions. The two states blend instead of appearing as distinct objects.
+
+**Performance note:** Keep blur under 20px, especially on Safari.
+
+## Why Details Matter
+
+> "All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune."
+> — Paul Graham, Hackers and Painters
+
+Details that go unnoticed are good — users complete tasks without friction. Great interfaces enable users to achieve goals with ease, not to admire animations.
diff --git a/.gitignore b/.gitignore
index 335d0e235..6d265d339 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,5 @@
 # Logs
 node_modules
-.cursor/
 /logs
 *.log
 npm-debug.log*
diff --git a/src/app/(dashboard)/(modules)/communications/page.tsx b/src/app/(dashboard)/(modules)/communications/page.tsx
index 45d208cff..085af0235 100644
--- a/src/app/(dashboard)/(modules)/communications/page.tsx
+++ b/src/app/(dashboard)/(modules)/communications/page.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { FileText, History, MessagesSquare, Settings } from 'lucide-react';
+import {
+  FileText,
+  History,
+  MessagesSquare,
+  Send,
+  Settings,
+} from 'lucide-react';
 import { ModuleDashboard } from '@/components/dashboard/ModuleDashboard';
 import {
   getEmailMetrics,
@@ -55,6 +61,12 @@ export default async function CommunicationsDashboard() {
       icon: <FileText className="h-4 w-4" />,
       href: '/communications/templates',
     },
+    {
+      title: 'Send a test',
+      description: 'Send test messages across channels',
+      icon: <Send className="h-4 w-4" />,
+      href: '/communications/test',
+    },
     {
       title: 'View logs',
       description: 'Email logs and push device tokens',
diff --git a/src/app/(dashboard)/(modules)/communications/test/page.tsx b/src/app/(dashboard)/(modules)/communications/test/page.tsx
new file mode 100644
index 000000000..7b80da93e
--- /dev/null
+++ b/src/app/(dashboard)/(modules)/communications/test/page.tsx
@@ -0,0 +1,60 @@
+import { getEmailSettings, getTemplates } from '@/lib/api/email';
+import { getSmsSettings } from '@/lib/api/sms';
+import { getNotificationSettings } from '@/lib/api/notifications';
+import { CommunicationsTestTabs } from '@/components/communications/test/communications-test-tabs';
+import {
+  PageDescription,
+  PageHeader,
+  PageTitle,
+} from '@/components/ui/page-header';
+
+type CommunicationsTestParams = {
+  searchParams: Promise<{
+    tab?: string;
+  }>;
+};
+
+function parseTab(tab: string | undefined): 'email' | 'sms' | 'push' {
+  if (tab === 'sms' || tab === 'push') return tab;
+  return 'email';
+}
+
+export default async function CommunicationsTestPage(
+  props: Readonly<CommunicationsTestParams>
+) {
+  const searchParams = await props.searchParams;
+  const tab = parseTab(searchParams.tab);
+
+  const [
+    { config: emailSettings },
+    { config: smsSettings },
+    { config: pushSettings },
+    emailTemplates,
+  ] = await Promise.all([
+    getEmailSettings(),
+    getSmsSettings(),
+    getNotificationSettings(),
+    getTemplates({}),
+  ]);
+
+  return (
+    <div className="space-y-6">
+      <PageHeader>
+        <div>
+          <PageTitle>Test Send</PageTitle>
+          <PageDescription>
+            Send test messages to verify provider configuration.
+          </PageDescription>
+        </div>
+      </PageHeader>
+
+      <CommunicationsTestTabs
+        initialTab={tab}
+        emailSettings={emailSettings}
+        smsSettings={smsSettings}
+        pushSettings={pushSettings}
+        emailTemplates={emailTemplates}
+      />
+    </div>
+  );
+}
diff --git a/src/app/(dashboard)/(modules)/email/send/page.tsx b/src/app/(dashboard)/(modules)/email/send/page.tsx
index 6ad398322..cfc8cd6b1 100644
--- a/src/app/(dashboard)/(modules)/email/send/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/send/page.tsx
@@ -1,17 +1,5 @@
-import { LucideMail } from 'lucide-react';
-import { getTemplates } from '@/lib/api/email';
-import { SendEmailForm } from '@/components/email/send/form';
+import { redirect } from 'next/navigation';
 
-export default async function SendEmailPage() {
-  const templates = await getTemplates({});
-
-  return (
-    <div className="flex flex-col space-y-6">
-      <div className="flex space-x-2 items-center">
-        <LucideMail className="w-5 h-5" />
-        <span>Compose Email</span>
-      </div>
-      <SendEmailForm templates={templates} />
-    </div>
-  );
+export default async function Page() {
+  redirect('/communications/test?tab=email');
 }
diff --git a/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx b/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
index ee0a6f129..78639a5b6 100644
--- a/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
+++ b/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
@@ -1,18 +1,5 @@
-import { getTokenById } from '@/lib/api/notifications';
-import { isEmpty } from 'lodash';
-import { TestSendForm } from '@/components/notifications/testSend/testSendForm';
+import { redirect } from 'next/navigation';
 
-export default async function TokensPage(props: {
-  searchParams: Promise<{
-    token?: string;
-  }>;
-}) {
-  const searchParams = await props.searchParams;
-  // todo implement on backend the ability to send by token
-  let token;
-  if (!isEmpty(searchParams.token)) {
-    token = await getTokenById(searchParams.token ?? '', 'user');
-  }
-
-  return <TestSendForm token={token} />;
+export default async function Page() {
+  redirect('/communications/test?tab=push');
 }
diff --git a/src/app/(dashboard)/(modules)/sms/send/page.tsx b/src/app/(dashboard)/(modules)/sms/send/page.tsx
index 6996d2dee..25b54f390 100644
--- a/src/app/(dashboard)/(modules)/sms/send/page.tsx
+++ b/src/app/(dashboard)/(modules)/sms/send/page.tsx
@@ -1,5 +1,5 @@
-import { TestSendSmsForm } from '@/components/sms/smsTest/testSendSmsForm';
+import { redirect } from 'next/navigation';
 
-export default async function TokensPage() {
-  return <TestSendSmsForm />;
+export default async function Page() {
+  redirect('/communications/test?tab=sms');
 }
diff --git a/src/components/communications/test/channel-status-card.tsx b/src/components/communications/test/channel-status-card.tsx
new file mode 100644
index 000000000..2f0ee5796
--- /dev/null
+++ b/src/components/communications/test/channel-status-card.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import Link from 'next/link';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { EmailSettings } from '@/lib/models/email';
+import { SmsSettings } from '@/lib/models/Sms';
+import { NotificationSettings } from '@/lib/models/Notification';
+
+type Channel = 'email' | 'sms' | 'push';
+
+type ChannelStatusCardProps = {
+  channel: Channel;
+  emailSettings?: EmailSettings;
+  smsSettings?: SmsSettings;
+  pushSettings?: NotificationSettings;
+};
+
+function formatProviderName(value: string): string {
+  return value
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/^./, char => char.toUpperCase())
+    .trim();
+}
+
+function getChannelStatus(
+  channel: Channel,
+  emailSettings?: EmailSettings,
+  smsSettings?: SmsSettings,
+  pushSettings?: NotificationSettings
+) {
+  switch (channel) {
+    case 'email':
+      return {
+        label: 'Email',
+        active: emailSettings?.active ?? false,
+        provider: emailSettings?.transport
+          ? formatProviderName(emailSettings.transport)
+          : 'Not configured',
+      };
+    case 'sms':
+      return {
+        label: 'SMS',
+        active: smsSettings?.active ?? false,
+        provider: smsSettings?.providerName
+          ? formatProviderName(smsSettings.providerName)
+          : 'Not configured',
+      };
+    case 'push':
+      return {
+        label: 'Push',
+        active: pushSettings?.active ?? false,
+        provider: pushSettings?.providerName
+          ? formatProviderName(pushSettings.providerName)
+          : 'Not configured',
+      };
+    default: {
+      const _exhaustive: never = channel;
+      return _exhaustive;
+    }
+  }
+}
+
+export function ChannelStatusCard({
+  channel,
+  emailSettings,
+  smsSettings,
+  pushSettings,
+}: ChannelStatusCardProps) {
+  const status = getChannelStatus(
+    channel,
+    emailSettings,
+    smsSettings,
+    pushSettings
+  );
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{status.label} status</CardTitle>
+        <CardDescription>Current provider configuration</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between gap-2">
+          <span className="text-sm text-muted-foreground">Module</span>
+          <Badge variant={status.active ? 'default' : 'secondary'}>
+            {status.active ? 'Active' : 'Inactive'}
+          </Badge>
+        </div>
+        <div className="space-y-1">
+          <span className="text-sm text-muted-foreground">Provider</span>
+          <p className="text-sm font-medium">{status.provider}</p>
+        </div>
+        {!status.active && (
+          <p className="text-xs text-muted-foreground">
+            Enable and configure this channel before sending tests.
+          </p>
+        )}
+        <Button variant="outline" size="sm" className="w-full" asChild>
+          <Link href={`/communications/settings?tab=${channel}`}>
+            Channel settings
+          </Link>
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/communications/test/communications-test-tabs.tsx b/src/components/communications/test/communications-test-tabs.tsx
new file mode 100644
index 000000000..bf2031f9d
--- /dev/null
+++ b/src/components/communications/test/communications-test-tabs.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { SendEmailForm } from '@/components/email/send/form';
+import { TestSendSmsForm } from '@/components/sms/smsTest/testSendSmsForm';
+import { TestSendForm } from '@/components/notifications/testSend/testSendForm';
+import { ChannelStatusCard } from '@/components/communications/test/channel-status-card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { EmailSettings, EmailTemplate } from '@/lib/models/email';
+import { SmsSettings } from '@/lib/models/Sms';
+import { NotificationSettings } from '@/lib/models/Notification';
+
+const TEST_TABS = ['email', 'sms', 'push'] as const;
+type TestTab = (typeof TEST_TABS)[number];
+
+function parseTestTab(tab: string | undefined): TestTab {
+  if (tab === 'sms' || tab === 'push') return tab;
+  return 'email';
+}
+
+type CommunicationsTestTabsProps = {
+  initialTab: TestTab;
+  emailSettings: EmailSettings;
+  smsSettings: SmsSettings;
+  pushSettings: NotificationSettings;
+  emailTemplates: {
+    templateDocuments: EmailTemplate[];
+    count: number;
+  };
+};
+
+export function CommunicationsTestTabs({
+  initialTab,
+  emailSettings,
+  smsSettings,
+  pushSettings,
+  emailTemplates,
+}: CommunicationsTestTabsProps) {
+  const router = useRouter();
+  const activeTab = initialTab;
+
+  const handleTabChange = (value: string) => {
+    const tab = parseTestTab(value);
+    router.replace(`/communications/test?tab=${tab}`, { scroll: false });
+  };
+
+  const statusProps = {
+    emailSettings,
+    smsSettings,
+    pushSettings,
+  };
+
+  return (
+    <Tabs value={activeTab} onValueChange={handleTabChange}>
+      <TabsList>
+        <TabsTrigger value="email">Email</TabsTrigger>
+        <TabsTrigger value="sms">SMS</TabsTrigger>
+        <TabsTrigger value="push">Push</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="email" className="mt-6">
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <SendEmailForm templates={emailTemplates} />
+          </div>
+          <ChannelStatusCard channel="email" {...statusProps} />
+        </div>
+      </TabsContent>
+
+      <TabsContent value="sms" className="mt-6">
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <TestSendSmsForm embedded />
+          </div>
+          <ChannelStatusCard channel="sms" {...statusProps} />
+        </div>
+      </TabsContent>
+
+      <TabsContent value="push" className="mt-6">
+        <div className="grid gap-6 lg:grid-cols-3">
+          <div className="lg:col-span-2">
+            <TestSendForm embedded />
+          </div>
+          <ChannelStatusCard channel="push" {...statusProps} />
+        </div>
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/src/components/navigation/navList.config.ts b/src/components/navigation/navList.config.ts
index b9de1b3cd..ef11a1b80 100644
--- a/src/components/navigation/navList.config.ts
+++ b/src/components/navigation/navList.config.ts
@@ -108,6 +108,7 @@ export const navGroups: NavGroup[] = [
           { title: 'Templates', url: '/communications/templates' },
           { title: 'Logs & Devices', url: '/communications/logs' },
           { title: 'Settings', url: '/communications/settings' },
+          { title: 'Test Send', url: '/communications/test' },
         ],
       },
     ],

From fb5f40f575de129c777d2f944a98d75993308d55 Mon Sep 17 00:00:00 2001
From: Konstantinos Kopanidis <kkopanidis@users.noreply.github.com>
Date: Mon, 22 Jun 2026 18:10:35 +0300
Subject: [PATCH 5/5] chore(ui): remove unified communications test send

Drop the communications test hub and restore per-channel send pages while
keeping cursor rules in the repository.
---
 .../(modules)/communications/page.tsx         |  14 +--
 .../(modules)/communications/test/page.tsx    |  60 ---------
 .../(dashboard)/(modules)/email/send/page.tsx |  18 ++-
 .../push-notifications/test/page.tsx          |  19 ++-
 .../(dashboard)/(modules)/sms/send/page.tsx   |   6 +-
 .../test/channel-status-card.tsx              | 114 ------------------
 .../test/communications-test-tabs.tsx         |  89 --------------
 src/components/navigation/navList.config.ts   |   1 -
 8 files changed, 35 insertions(+), 286 deletions(-)
 delete mode 100644 src/app/(dashboard)/(modules)/communications/test/page.tsx
 delete mode 100644 src/components/communications/test/channel-status-card.tsx
 delete mode 100644 src/components/communications/test/communications-test-tabs.tsx

diff --git a/src/app/(dashboard)/(modules)/communications/page.tsx b/src/app/(dashboard)/(modules)/communications/page.tsx
index 085af0235..45d208cff 100644
--- a/src/app/(dashboard)/(modules)/communications/page.tsx
+++ b/src/app/(dashboard)/(modules)/communications/page.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  FileText,
-  History,
-  MessagesSquare,
-  Send,
-  Settings,
-} from 'lucide-react';
+import { FileText, History, MessagesSquare, Settings } from 'lucide-react';
 import { ModuleDashboard } from '@/components/dashboard/ModuleDashboard';
 import {
   getEmailMetrics,
@@ -61,12 +55,6 @@ export default async function CommunicationsDashboard() {
       icon: <FileText className="h-4 w-4" />,
       href: '/communications/templates',
     },
-    {
-      title: 'Send a test',
-      description: 'Send test messages across channels',
-      icon: <Send className="h-4 w-4" />,
-      href: '/communications/test',
-    },
     {
       title: 'View logs',
       description: 'Email logs and push device tokens',
diff --git a/src/app/(dashboard)/(modules)/communications/test/page.tsx b/src/app/(dashboard)/(modules)/communications/test/page.tsx
deleted file mode 100644
index 7b80da93e..000000000
--- a/src/app/(dashboard)/(modules)/communications/test/page.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { getEmailSettings, getTemplates } from '@/lib/api/email';
-import { getSmsSettings } from '@/lib/api/sms';
-import { getNotificationSettings } from '@/lib/api/notifications';
-import { CommunicationsTestTabs } from '@/components/communications/test/communications-test-tabs';
-import {
-  PageDescription,
-  PageHeader,
-  PageTitle,
-} from '@/components/ui/page-header';
-
-type CommunicationsTestParams = {
-  searchParams: Promise<{
-    tab?: string;
-  }>;
-};
-
-function parseTab(tab: string | undefined): 'email' | 'sms' | 'push' {
-  if (tab === 'sms' || tab === 'push') return tab;
-  return 'email';
-}
-
-export default async function CommunicationsTestPage(
-  props: Readonly<CommunicationsTestParams>
-) {
-  const searchParams = await props.searchParams;
-  const tab = parseTab(searchParams.tab);
-
-  const [
-    { config: emailSettings },
-    { config: smsSettings },
-    { config: pushSettings },
-    emailTemplates,
-  ] = await Promise.all([
-    getEmailSettings(),
-    getSmsSettings(),
-    getNotificationSettings(),
-    getTemplates({}),
-  ]);
-
-  return (
-    <div className="space-y-6">
-      <PageHeader>
-        <div>
-          <PageTitle>Test Send</PageTitle>
-          <PageDescription>
-            Send test messages to verify provider configuration.
-          </PageDescription>
-        </div>
-      </PageHeader>
-
-      <CommunicationsTestTabs
-        initialTab={tab}
-        emailSettings={emailSettings}
-        smsSettings={smsSettings}
-        pushSettings={pushSettings}
-        emailTemplates={emailTemplates}
-      />
-    </div>
-  );
-}
diff --git a/src/app/(dashboard)/(modules)/email/send/page.tsx b/src/app/(dashboard)/(modules)/email/send/page.tsx
index cfc8cd6b1..6ad398322 100644
--- a/src/app/(dashboard)/(modules)/email/send/page.tsx
+++ b/src/app/(dashboard)/(modules)/email/send/page.tsx
@@ -1,5 +1,17 @@
-import { redirect } from 'next/navigation';
+import { LucideMail } from 'lucide-react';
+import { getTemplates } from '@/lib/api/email';
+import { SendEmailForm } from '@/components/email/send/form';
 
-export default async function Page() {
-  redirect('/communications/test?tab=email');
+export default async function SendEmailPage() {
+  const templates = await getTemplates({});
+
+  return (
+    <div className="flex flex-col space-y-6">
+      <div className="flex space-x-2 items-center">
+        <LucideMail className="w-5 h-5" />
+        <span>Compose Email</span>
+      </div>
+      <SendEmailForm templates={templates} />
+    </div>
+  );
 }
diff --git a/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx b/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
index 78639a5b6..ee0a6f129 100644
--- a/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
+++ b/src/app/(dashboard)/(modules)/push-notifications/test/page.tsx
@@ -1,5 +1,18 @@
-import { redirect } from 'next/navigation';
+import { getTokenById } from '@/lib/api/notifications';
+import { isEmpty } from 'lodash';
+import { TestSendForm } from '@/components/notifications/testSend/testSendForm';
 
-export default async function Page() {
-  redirect('/communications/test?tab=push');
+export default async function TokensPage(props: {
+  searchParams: Promise<{
+    token?: string;
+  }>;
+}) {
+  const searchParams = await props.searchParams;
+  // todo implement on backend the ability to send by token
+  let token;
+  if (!isEmpty(searchParams.token)) {
+    token = await getTokenById(searchParams.token ?? '', 'user');
+  }
+
+  return <TestSendForm token={token} />;
 }
diff --git a/src/app/(dashboard)/(modules)/sms/send/page.tsx b/src/app/(dashboard)/(modules)/sms/send/page.tsx
index 25b54f390..6996d2dee 100644
--- a/src/app/(dashboard)/(modules)/sms/send/page.tsx
+++ b/src/app/(dashboard)/(modules)/sms/send/page.tsx
@@ -1,5 +1,5 @@
-import { redirect } from 'next/navigation';
+import { TestSendSmsForm } from '@/components/sms/smsTest/testSendSmsForm';
 
-export default async function Page() {
-  redirect('/communications/test?tab=sms');
+export default async function TokensPage() {
+  return <TestSendSmsForm />;
 }
diff --git a/src/components/communications/test/channel-status-card.tsx b/src/components/communications/test/channel-status-card.tsx
deleted file mode 100644
index 2f0ee5796..000000000
--- a/src/components/communications/test/channel-status-card.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card';
-import { EmailSettings } from '@/lib/models/email';
-import { SmsSettings } from '@/lib/models/Sms';
-import { NotificationSettings } from '@/lib/models/Notification';
-
-type Channel = 'email' | 'sms' | 'push';
-
-type ChannelStatusCardProps = {
-  channel: Channel;
-  emailSettings?: EmailSettings;
-  smsSettings?: SmsSettings;
-  pushSettings?: NotificationSettings;
-};
-
-function formatProviderName(value: string): string {
-  return value
-    .replace(/([A-Z])/g, ' $1')
-    .replace(/^./, char => char.toUpperCase())
-    .trim();
-}
-
-function getChannelStatus(
-  channel: Channel,
-  emailSettings?: EmailSettings,
-  smsSettings?: SmsSettings,
-  pushSettings?: NotificationSettings
-) {
-  switch (channel) {
-    case 'email':
-      return {
-        label: 'Email',
-        active: emailSettings?.active ?? false,
-        provider: emailSettings?.transport
-          ? formatProviderName(emailSettings.transport)
-          : 'Not configured',
-      };
-    case 'sms':
-      return {
-        label: 'SMS',
-        active: smsSettings?.active ?? false,
-        provider: smsSettings?.providerName
-          ? formatProviderName(smsSettings.providerName)
-          : 'Not configured',
-      };
-    case 'push':
-      return {
-        label: 'Push',
-        active: pushSettings?.active ?? false,
-        provider: pushSettings?.providerName
-          ? formatProviderName(pushSettings.providerName)
-          : 'Not configured',
-      };
-    default: {
-      const _exhaustive: never = channel;
-      return _exhaustive;
-    }
-  }
-}
-
-export function ChannelStatusCard({
-  channel,
-  emailSettings,
-  smsSettings,
-  pushSettings,
-}: ChannelStatusCardProps) {
-  const status = getChannelStatus(
-    channel,
-    emailSettings,
-    smsSettings,
-    pushSettings
-  );
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{status.label} status</CardTitle>
-        <CardDescription>Current provider configuration</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex items-center justify-between gap-2">
-          <span className="text-sm text-muted-foreground">Module</span>
-          <Badge variant={status.active ? 'default' : 'secondary'}>
-            {status.active ? 'Active' : 'Inactive'}
-          </Badge>
-        </div>
-        <div className="space-y-1">
-          <span className="text-sm text-muted-foreground">Provider</span>
-          <p className="text-sm font-medium">{status.provider}</p>
-        </div>
-        {!status.active && (
-          <p className="text-xs text-muted-foreground">
-            Enable and configure this channel before sending tests.
-          </p>
-        )}
-        <Button variant="outline" size="sm" className="w-full" asChild>
-          <Link href={`/communications/settings?tab=${channel}`}>
-            Channel settings
-          </Link>
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/src/components/communications/test/communications-test-tabs.tsx b/src/components/communications/test/communications-test-tabs.tsx
deleted file mode 100644
index bf2031f9d..000000000
--- a/src/components/communications/test/communications-test-tabs.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { SendEmailForm } from '@/components/email/send/form';
-import { TestSendSmsForm } from '@/components/sms/smsTest/testSendSmsForm';
-import { TestSendForm } from '@/components/notifications/testSend/testSendForm';
-import { ChannelStatusCard } from '@/components/communications/test/channel-status-card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { EmailSettings, EmailTemplate } from '@/lib/models/email';
-import { SmsSettings } from '@/lib/models/Sms';
-import { NotificationSettings } from '@/lib/models/Notification';
-
-const TEST_TABS = ['email', 'sms', 'push'] as const;
-type TestTab = (typeof TEST_TABS)[number];
-
-function parseTestTab(tab: string | undefined): TestTab {
-  if (tab === 'sms' || tab === 'push') return tab;
-  return 'email';
-}
-
-type CommunicationsTestTabsProps = {
-  initialTab: TestTab;
-  emailSettings: EmailSettings;
-  smsSettings: SmsSettings;
-  pushSettings: NotificationSettings;
-  emailTemplates: {
-    templateDocuments: EmailTemplate[];
-    count: number;
-  };
-};
-
-export function CommunicationsTestTabs({
-  initialTab,
-  emailSettings,
-  smsSettings,
-  pushSettings,
-  emailTemplates,
-}: CommunicationsTestTabsProps) {
-  const router = useRouter();
-  const activeTab = initialTab;
-
-  const handleTabChange = (value: string) => {
-    const tab = parseTestTab(value);
-    router.replace(`/communications/test?tab=${tab}`, { scroll: false });
-  };
-
-  const statusProps = {
-    emailSettings,
-    smsSettings,
-    pushSettings,
-  };
-
-  return (
-    <Tabs value={activeTab} onValueChange={handleTabChange}>
-      <TabsList>
-        <TabsTrigger value="email">Email</TabsTrigger>
-        <TabsTrigger value="sms">SMS</TabsTrigger>
-        <TabsTrigger value="push">Push</TabsTrigger>
-      </TabsList>
-
-      <TabsContent value="email" className="mt-6">
-        <div className="grid gap-6 lg:grid-cols-3">
-          <div className="lg:col-span-2">
-            <SendEmailForm templates={emailTemplates} />
-          </div>
-          <ChannelStatusCard channel="email" {...statusProps} />
-        </div>
-      </TabsContent>
-
-      <TabsContent value="sms" className="mt-6">
-        <div className="grid gap-6 lg:grid-cols-3">
-          <div className="lg:col-span-2">
-            <TestSendSmsForm embedded />
-          </div>
-          <ChannelStatusCard channel="sms" {...statusProps} />
-        </div>
-      </TabsContent>
-
-      <TabsContent value="push" className="mt-6">
-        <div className="grid gap-6 lg:grid-cols-3">
-          <div className="lg:col-span-2">
-            <TestSendForm embedded />
-          </div>
-          <ChannelStatusCard channel="push" {...statusProps} />
-        </div>
-      </TabsContent>
-    </Tabs>
-  );
-}
diff --git a/src/components/navigation/navList.config.ts b/src/components/navigation/navList.config.ts
index ef11a1b80..b9de1b3cd 100644
--- a/src/components/navigation/navList.config.ts
+++ b/src/components/navigation/navList.config.ts
@@ -108,7 +108,6 @@ export const navGroups: NavGroup[] = [
           { title: 'Templates', url: '/communications/templates' },
           { title: 'Logs & Devices', url: '/communications/logs' },
           { title: 'Settings', url: '/communications/settings' },
-          { title: 'Test Send', url: '/communications/test' },
         ],
       },
     ],