feat: Add event automation system for plugins attached to appointments

- Add GlobalEventPlugin model for auto-attaching plugins to all events
- Create signals for auto-attachment on new events and rescheduling
- Add API endpoints for global event plugins (CRUD, toggle, reapply)
- Update CreateTaskModal with "Scheduled Task" vs "Event Automation" choice
- Add option to apply to all events or future events only
- Display event automations in Tasks page alongside scheduled tasks
- Add EditEventAutomationModal for editing trigger and timing
- Handle event reschedule - update Celery task timing on time/duration changes
- Add Marketplace to Plugins menu in sidebar

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/pages/Tasks.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import axios from '../api/client';
@@ -10,13 +10,17 @@ import {
   Edit,
   Clock,
   Calendar,
+  CalendarDays,
   RotateCw,
   CheckCircle2,
   XCircle,
   AlertCircle,
   Zap,
+  Power,
 } from 'lucide-react';
 import toast from 'react-hot-toast';
+import CreateTaskModal from '../components/CreateTaskModal';
+import EditTaskModal from '../components/EditTaskModal';
 
 // Types
 interface ScheduledTask {
@@ -29,21 +33,70 @@ interface ScheduledTask {
   cron_expression?: string;
   interval_minutes?: number;
   run_at?: string;
-  next_run_time?: string;
-  last_run_time?: string;
-  is_active: boolean;
+  next_run_at?: string;
+  last_run_at?: string;
+  status: 'ACTIVE' | 'PAUSED' | 'DISABLED';
+  last_run_status?: string;
   plugin_config: Record<string, any>;
   created_at: string;
   updated_at: string;
 }
 
+interface PluginInstallation {
+  id: string;
+  template: number;
+  template_name: string;
+  template_slug: string;
+  template_description: string;
+  category: string;
+  version: string;
+  author_name: string;
+  logo_url?: string;
+  template_variables: Record<string, any>;
+  scheduled_task?: number;
+  scheduled_task_name?: string;
+  installed_at: string;
+  config_values: Record<string, any>;
+  has_update: boolean;
+}
+
+interface GlobalEventPlugin {
+  id: string;
+  plugin_installation: number;
+  plugin_name: string;
+  plugin_description: string;
+  plugin_category: string;
+  plugin_logo_url?: string;
+  trigger: string;
+  trigger_display: string;
+  offset_minutes: number;
+  timing_description: string;
+  is_active: boolean;
+  apply_to_existing: boolean;
+  execution_order: number;
+  events_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+// Unified task type for display
+type UnifiedTask = {
+  type: 'scheduled';
+  data: ScheduledTask;
+} | {
+  type: 'event';
+  data: GlobalEventPlugin;
+};
+
 const Tasks: React.FC = () => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
   const [showCreateModal, setShowCreateModal] = useState(false);
+  const [editingTask, setEditingTask] = useState<ScheduledTask | null>(null);
+  const [editingEventAutomation, setEditingEventAutomation] = useState<GlobalEventPlugin | null>(null);
 
-  // Fetch tasks
-  const { data: tasks = [], isLoading } = useQuery<ScheduledTask[]>({
+  // Fetch scheduled tasks
+  const { data: scheduledTasks = [], isLoading: tasksLoading } = useQuery<ScheduledTask[]>({
     queryKey: ['scheduled-tasks'],
     queryFn: async () => {
       const { data } = await axios.get('/api/scheduled-tasks/');
@@ -51,6 +104,28 @@ const Tasks: React.FC = () => {
     },
   });
 
+  // Fetch global event plugins (event automations)
+  const { data: eventAutomations = [], isLoading: automationsLoading } = useQuery<GlobalEventPlugin[]>({
+    queryKey: ['global-event-plugins'],
+    queryFn: async () => {
+      const { data } = await axios.get('/api/global-event-plugins/');
+      return data;
+    },
+  });
+
+  // Combine into unified list
+  const allTasks: UnifiedTask[] = useMemo(() => {
+    const scheduled: UnifiedTask[] = scheduledTasks.map(t => ({ type: 'scheduled' as const, data: t }));
+    const events: UnifiedTask[] = eventAutomations.map(e => ({ type: 'event' as const, data: e }));
+    return [...scheduled, ...events].sort((a, b) => {
+      const dateA = new Date(a.data.created_at).getTime();
+      const dateB = new Date(b.data.created_at).getTime();
+      return dateB - dateA; // Most recent first
+    });
+  }, [scheduledTasks, eventAutomations]);
+
+  const isLoading = tasksLoading || automationsLoading;
+
   // Delete task
   const deleteMutation = useMutation({
     mutationFn: async (taskId: string) => {
@@ -67,8 +142,8 @@ const Tasks: React.FC = () => {
 
   // Toggle task active status
   const toggleActiveMutation = useMutation({
-    mutationFn: async ({ taskId, isActive }: { taskId: string; isActive: boolean }) => {
-      await axios.patch(`/api/scheduled-tasks/${taskId}/`, { is_active: isActive });
+    mutationFn: async ({ taskId, status }: { taskId: string; status: 'ACTIVE' | 'PAUSED' }) => {
+      await axios.patch(`/api/scheduled-tasks/${taskId}/`, { status });
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['scheduled-tasks'] });
@@ -92,6 +167,49 @@ const Tasks: React.FC = () => {
     },
   });
 
+  // Delete event automation
+  const deleteEventAutomationMutation = useMutation({
+    mutationFn: async (automationId: string) => {
+      await axios.delete(`/api/global-event-plugins/${automationId}/`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['global-event-plugins'] });
+      toast.success('Event automation deleted');
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.detail || 'Failed to delete automation');
+    },
+  });
+
+  // Toggle event automation active status
+  const toggleEventAutomationMutation = useMutation({
+    mutationFn: async (automationId: string) => {
+      await axios.post(`/api/global-event-plugins/${automationId}/toggle/`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['global-event-plugins'] });
+      toast.success('Automation updated');
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.detail || 'Failed to update automation');
+    },
+  });
+
+  // Update event automation
+  const updateEventAutomationMutation = useMutation({
+    mutationFn: async ({ id, data }: { id: string; data: Partial<GlobalEventPlugin> }) => {
+      await axios.patch(`/api/global-event-plugins/${id}/`, data);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['global-event-plugins'] });
+      toast.success('Automation updated');
+      setEditingEventAutomation(null);
+    },
+    onError: (error: any) => {
+      toast.error(error.response?.data?.detail || 'Failed to update automation');
+    },
+  });
+
   const getScheduleDisplay = (task: ScheduledTask): string => {
     if (task.schedule_type === 'ONE_TIME') {
       return `Once on ${new Date(task.run_at!).toLocaleString()}`;
@@ -117,14 +235,14 @@ const Tasks: React.FC = () => {
   };
 
   const getStatusColor = (task: ScheduledTask): string => {
-    if (!task.is_active) return 'text-gray-400 dark:text-gray-500';
-    if (task.last_run_time) return 'text-green-600 dark:text-green-400';
+    if (task.status === 'PAUSED' || task.status === 'DISABLED') return 'text-gray-400 dark:text-gray-500';
+    if (task.last_run_at) return 'text-green-600 dark:text-green-400';
     return 'text-blue-600 dark:text-blue-400';
   };
 
   const getStatusIcon = (task: ScheduledTask) => {
-    if (!task.is_active) return Pause;
-    if (task.last_run_time) return CheckCircle2;
+    if (task.status === 'PAUSED' || task.status === 'DISABLED') return Pause;
+    if (task.last_run_at) return CheckCircle2;
     return AlertCircle;
   };
 
@@ -166,7 +284,7 @@ const Tasks: React.FC = () => {
             </div>
             <div>
               <p className="text-sm text-gray-600 dark:text-gray-400">Total Tasks</p>
-              <p className="text-2xl font-bold text-gray-900 dark:text-white">{tasks.length}</p>
+              <p className="text-2xl font-bold text-gray-900 dark:text-white">{allTasks.length}</p>
             </div>
           </div>
         </div>
@@ -179,21 +297,7 @@ const Tasks: React.FC = () => {
             <div>
               <p className="text-sm text-gray-600 dark:text-gray-400">Active</p>
               <p className="text-2xl font-bold text-gray-900 dark:text-white">
-                {tasks.filter(t => t.is_active).length}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
-          <div className="flex items-center gap-3">
-            <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-lg">
-              <Pause className="w-5 h-5 text-gray-600 dark:text-gray-400" />
-            </div>
-            <div>
-              <p className="text-sm text-gray-600 dark:text-gray-400">Paused</p>
-              <p className="text-2xl font-bold text-gray-900 dark:text-white">
-                {tasks.filter(t => !t.is_active).length}
+                {scheduledTasks.filter(t => t.status === 'ACTIVE').length + eventAutomations.filter(e => e.is_active).length}
               </p>
             </div>
           </div>
@@ -202,12 +306,26 @@ const Tasks: React.FC = () => {
         <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
           <div className="flex items-center gap-3">
             <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-              <RotateCw className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+              <CalendarDays className="w-5 h-5 text-purple-600 dark:text-purple-400" />
             </div>
             <div>
-              <p className="text-sm text-gray-600 dark:text-gray-400">Recurring</p>
+              <p className="text-sm text-gray-600 dark:text-gray-400">Event Automations</p>
               <p className="text-2xl font-bold text-gray-900 dark:text-white">
-                {tasks.filter(t => t.schedule_type !== 'ONE_TIME').length}
+                {eventAutomations.length}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
+              <RotateCw className="w-5 h-5 text-blue-600 dark:text-blue-400" />
+            </div>
+            <div>
+              <p className="text-sm text-gray-600 dark:text-gray-400">Scheduled</p>
+              <p className="text-2xl font-bold text-gray-900 dark:text-white">
+                {scheduledTasks.length}
               </p>
             </div>
           </div>
@@ -215,7 +333,7 @@ const Tasks: React.FC = () => {
       </div>
 
       {/* Tasks List */}
-      {tasks.length === 0 ? (
+      {allTasks.length === 0 ? (
         <div className="text-center py-16 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
           <Zap className="w-16 h-16 text-gray-400 mx-auto mb-4" />
           <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
@@ -234,132 +352,426 @@ const Tasks: React.FC = () => {
         </div>
       ) : (
         <div className="space-y-4">
-          {tasks.map((task) => {
-            const ScheduleIcon = getScheduleIcon(task);
-            const StatusIcon = getStatusIcon(task);
+          {allTasks.map((unifiedTask) => {
+            if (unifiedTask.type === 'scheduled') {
+              const task = unifiedTask.data;
+              const ScheduleIcon = getScheduleIcon(task);
+              const StatusIcon = getStatusIcon(task);
 
-            return (
-              <div
-                key={task.id}
-                className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-shadow"
-              >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-3 mb-2">
-                      <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-                        {task.name}
-                      </h3>
-                      <StatusIcon className={`w-5 h-5 ${getStatusColor(task)}`} />
-                    </div>
-
-                    {task.description && (
-                      <p className="text-gray-600 dark:text-gray-400 text-sm mb-3">
-                        {task.description}
-                      </p>
-                    )}
-
-                    <div className="flex flex-wrap items-center gap-4 text-sm">
-                      <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-                        <Zap className="w-4 h-4" />
-                        <span>{task.plugin_display_name}</span>
+              return (
+                <div
+                  key={`scheduled-${task.id}`}
+                  className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-shadow"
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <span className="px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 rounded">
+                          Scheduled
+                        </span>
+                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                          {task.name}
+                        </h3>
+                        <StatusIcon className={`w-5 h-5 ${getStatusColor(task)}`} />
                       </div>
 
-                      <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-                        <ScheduleIcon className="w-4 h-4" />
-                        <span>{getScheduleDisplay(task)}</span>
+                      {task.description && (
+                        <p className="text-gray-600 dark:text-gray-400 text-sm mb-3">
+                          {task.description}
+                        </p>
+                      )}
+
+                      <div className="flex flex-wrap items-center gap-4 text-sm">
+                        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                          <Zap className="w-4 h-4" />
+                          <span>{task.plugin_display_name}</span>
+                        </div>
+
+                        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                          <ScheduleIcon className="w-4 h-4" />
+                          <span>{getScheduleDisplay(task)}</span>
+                        </div>
+
+                        {task.next_run_at && task.status === 'ACTIVE' && (
+                          <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                            <Clock className="w-4 h-4" />
+                            <span>Next: {new Date(task.next_run_at).toLocaleString()}</span>
+                          </div>
+                        )}
+
+                        {task.last_run_at && (
+                          <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                            <CheckCircle2 className="w-4 h-4" />
+                            <span>Last: {new Date(task.last_run_at).toLocaleString()}</span>
+                          </div>
+                        )}
                       </div>
-
-                      {task.next_run_time && task.is_active && (
-                        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-                          <Clock className="w-4 h-4" />
-                          <span>Next: {new Date(task.next_run_time).toLocaleString()}</span>
-                        </div>
-                      )}
-
-                      {task.last_run_time && (
-                        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-                          <CheckCircle2 className="w-4 h-4" />
-                          <span>Last: {new Date(task.last_run_time).toLocaleString()}</span>
-                        </div>
-                      )}
                     </div>
-                  </div>
 
-                  {/* Actions */}
-                  <div className="flex items-center gap-2 ml-4">
-                    <button
-                      onClick={() => triggerMutation.mutate(task.id)}
-                      className="p-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
-                      title="Run now"
-                    >
-                      <Play className="w-5 h-5" />
-                    </button>
+                    {/* Actions */}
+                    <div className="flex items-center gap-2 ml-4">
+                      <button
+                        onClick={() => triggerMutation.mutate(task.id)}
+                        className="p-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
+                        title="Run now"
+                      >
+                        <Play className="w-5 h-5" />
+                      </button>
 
-                    <button
-                      onClick={() => toggleActiveMutation.mutate({
-                        taskId: task.id,
-                        isActive: !task.is_active
-                      })}
-                      className={`p-2 rounded-lg transition-colors ${
-                        task.is_active
-                          ? 'text-orange-600 dark:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20'
-                          : 'text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20'
-                      }`}
-                      title={task.is_active ? 'Pause' : 'Resume'}
-                    >
-                      {task.is_active ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
-                    </button>
+                      <button
+                        onClick={() => toggleActiveMutation.mutate({
+                          taskId: task.id,
+                          status: task.status === 'ACTIVE' ? 'PAUSED' : 'ACTIVE'
+                        })}
+                        className={`p-2 rounded-lg transition-colors ${
+                          task.status === 'ACTIVE'
+                            ? 'text-orange-600 dark:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20'
+                            : 'text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20'
+                        }`}
+                        title={task.status === 'ACTIVE' ? 'Pause' : 'Resume'}
+                      >
+                        {task.status === 'ACTIVE' ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
+                      </button>
 
-                    <button
-                      onClick={() => {/* TODO: Edit modal */}}
-                      className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
-                      title="Edit"
-                    >
-                      <Edit className="w-5 h-5" />
-                    </button>
+                      <button
+                        onClick={() => setEditingTask(task)}
+                        className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+                        title="Edit"
+                      >
+                        <Edit className="w-5 h-5" />
+                      </button>
 
-                    <button
-                      onClick={() => {
-                        if (confirm('Are you sure you want to delete this task?')) {
-                          deleteMutation.mutate(task.id);
-                        }
-                      }}
-                      className="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                      title="Delete"
-                    >
-                      <Trash2 className="w-5 h-5" />
-                    </button>
+                      <button
+                        onClick={() => {
+                          if (confirm('Are you sure you want to delete this task?')) {
+                            deleteMutation.mutate(task.id);
+                          }
+                        }}
+                        className="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                        title="Delete"
+                      >
+                        <Trash2 className="w-5 h-5" />
+                      </button>
+                    </div>
                   </div>
                 </div>
-              </div>
-            );
+              );
+            } else {
+              // Event automation
+              const automation = unifiedTask.data;
+
+              return (
+                <div
+                  key={`event-${automation.id}`}
+                  className={`bg-white dark:bg-gray-800 rounded-lg border p-6 hover:shadow-md transition-shadow ${
+                    automation.is_active
+                      ? 'border-gray-200 dark:border-gray-700'
+                      : 'border-gray-200 dark:border-gray-700 opacity-60'
+                  }`}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <span className="px-2 py-0.5 text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 rounded">
+                          Event Automation
+                        </span>
+                        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                          {automation.plugin_name}
+                        </h3>
+                        {automation.is_active ? (
+                          <CheckCircle2 className="w-5 h-5 text-green-600 dark:text-green-400" />
+                        ) : (
+                          <Pause className="w-5 h-5 text-gray-400" />
+                        )}
+                      </div>
+
+                      {automation.plugin_description && (
+                        <p className="text-gray-600 dark:text-gray-400 text-sm mb-3">
+                          {automation.plugin_description}
+                        </p>
+                      )}
+
+                      <div className="flex flex-wrap items-center gap-4 text-sm">
+                        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                          <CalendarDays className="w-4 h-4" />
+                          <span>{automation.timing_description}</span>
+                        </div>
+
+                        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                          <Zap className="w-4 h-4" />
+                          <span>{automation.events_count} events</span>
+                        </div>
+
+                        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                          <span className={`px-2 py-0.5 text-xs rounded ${
+                            automation.apply_to_existing
+                              ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300'
+                              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
+                          }`}>
+                            {automation.apply_to_existing ? 'All events' : 'Future only'}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex items-center gap-2 ml-4">
+                      <button
+                        onClick={() => toggleEventAutomationMutation.mutate(automation.id)}
+                        className={`p-2 rounded-lg transition-colors ${
+                          automation.is_active
+                            ? 'text-orange-600 dark:text-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20'
+                            : 'text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20'
+                        }`}
+                        title={automation.is_active ? 'Disable' : 'Enable'}
+                      >
+                        <Power className="w-5 h-5" />
+                      </button>
+
+                      <button
+                        onClick={() => setEditingEventAutomation(automation)}
+                        className="p-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+                        title="Edit"
+                      >
+                        <Edit className="w-5 h-5" />
+                      </button>
+
+                      <button
+                        onClick={() => {
+                          if (confirm('Are you sure you want to delete this automation? It will be removed from all events.')) {
+                            deleteEventAutomationMutation.mutate(automation.id);
+                          }
+                        }}
+                        className="p-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                        title="Delete"
+                      >
+                        <Trash2 className="w-5 h-5" />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              );
+            }
           })}
         </div>
       )}
 
-      {/* TODO: Create/Edit Task Modal */}
-      {showCreateModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
-          <div className="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full p-6">
-            <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
-              Create New Task
-            </h2>
-            <p className="text-gray-600 dark:text-gray-400">
-              Task creation form coming soon...
-            </p>
-            <div className="mt-6 flex justify-end gap-3">
-              <button
-                onClick={() => setShowCreateModal(false)}
-                className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        </div>
+      {/* Create Task Modal */}
+      <CreateTaskModal
+        isOpen={showCreateModal}
+        onClose={() => setShowCreateModal(false)}
+        onSuccess={() => {
+          queryClient.invalidateQueries({ queryKey: ['scheduled-tasks'] });
+          queryClient.invalidateQueries({ queryKey: ['global-event-plugins'] });
+        }}
+      />
+
+      {/* Edit Task Modal */}
+      <EditTaskModal
+        task={editingTask}
+        isOpen={!!editingTask}
+        onClose={() => setEditingTask(null)}
+        onSuccess={() => {
+          queryClient.invalidateQueries({ queryKey: ['scheduled-tasks'] });
+          toast.success('Task updated successfully');
+        }}
+      />
+
+      {/* Edit Event Automation Modal */}
+      {editingEventAutomation && (
+        <EditEventAutomationModal
+          automation={editingEventAutomation}
+          isOpen={!!editingEventAutomation}
+          onClose={() => setEditingEventAutomation(null)}
+          onSave={(data) => updateEventAutomationMutation.mutate({ id: editingEventAutomation.id, data })}
+          isLoading={updateEventAutomationMutation.isPending}
+        />
       )}
     </div>
   );
 };
 
+// Inline Edit Event Automation Modal component
+interface EditEventAutomationModalProps {
+  automation: GlobalEventPlugin;
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (data: Partial<GlobalEventPlugin>) => void;
+  isLoading: boolean;
+}
+
+const TRIGGER_OPTIONS = [
+  { value: 'before_start', label: 'Before Start' },
+  { value: 'at_start', label: 'At Start' },
+  { value: 'after_start', label: 'After Start' },
+  { value: 'after_end', label: 'After End' },
+  { value: 'on_complete', label: 'When Completed' },
+  { value: 'on_cancel', label: 'When Canceled' },
+];
+
+const OFFSET_PRESETS = [
+  { value: 0, label: 'Immediately' },
+  { value: 5, label: '5 min' },
+  { value: 10, label: '10 min' },
+  { value: 15, label: '15 min' },
+  { value: 30, label: '30 min' },
+  { value: 60, label: '1 hour' },
+];
+
+const EditEventAutomationModal: React.FC<EditEventAutomationModalProps> = ({
+  automation,
+  isOpen,
+  onClose,
+  onSave,
+  isLoading,
+}) => {
+  const [trigger, setTrigger] = useState(automation.trigger);
+  const [offsetMinutes, setOffsetMinutes] = useState(automation.offset_minutes);
+
+  const showOffset = !['on_complete', 'on_cancel'].includes(trigger);
+
+  const getTimingDescription = () => {
+    if (trigger === 'on_complete') return 'When event is completed';
+    if (trigger === 'on_cancel') return 'When event is canceled';
+
+    if (offsetMinutes === 0) {
+      if (trigger === 'before_start' || trigger === 'at_start' || trigger === 'after_start') return 'At event start';
+      if (trigger === 'after_end') return 'At event end';
+    }
+
+    const offsetLabel = OFFSET_PRESETS.find(o => o.value === offsetMinutes)?.label || `${offsetMinutes} min`;
+    if (trigger === 'before_start') return `${offsetLabel} before event starts`;
+    if (trigger === 'at_start' || trigger === 'after_start') return `${offsetLabel} after event starts`;
+    if (trigger === 'after_end') return `${offsetLabel} after event ends`;
+
+    return 'Unknown timing';
+  };
+
+  const handleSave = () => {
+    onSave({
+      trigger,
+      offset_minutes: offsetMinutes,
+    });
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg max-w-lg w-full">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-white">
+            Edit Event Automation
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
+          >
+            <XCircle className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {/* Plugin info */}
+          <div className="p-4 bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg">
+            <div className="flex items-center gap-3">
+              <Zap className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+              <div>
+                <p className="text-sm text-purple-800 dark:text-purple-200 font-medium">
+                  Plugin
+                </p>
+                <p className="text-purple-900 dark:text-purple-100">
+                  {automation.plugin_name}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* When to run */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+              When should it run?
+            </label>
+            <div className="grid grid-cols-2 gap-2">
+              {TRIGGER_OPTIONS.map((opt) => (
+                <button
+                  key={opt.value}
+                  type="button"
+                  onClick={() => {
+                    setTrigger(opt.value);
+                    if (['on_complete', 'on_cancel'].includes(opt.value)) {
+                      setOffsetMinutes(0);
+                    }
+                  }}
+                  className={`px-3 py-2 text-sm rounded-lg border transition-colors ${
+                    trigger === opt.value
+                      ? 'bg-purple-600 text-white border-purple-600'
+                      : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-purple-400'
+                  }`}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Offset selection */}
+          {showOffset && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                How long {trigger === 'before_start' ? 'before' : 'after'}?
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {OFFSET_PRESETS.map((preset) => (
+                  <button
+                    key={preset.value}
+                    type="button"
+                    onClick={() => setOffsetMinutes(preset.value)}
+                    className={`px-3 py-2 text-sm rounded-lg border transition-colors ${
+                      offsetMinutes === preset.value
+                        ? 'bg-purple-600 text-white border-purple-600'
+                        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:border-purple-400'
+                    }`}
+                  >
+                    {preset.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Preview */}
+          <div className="p-3 bg-purple-100 dark:bg-purple-900/30 border border-purple-300 dark:border-purple-700 rounded-lg">
+            <div className="flex items-center gap-2">
+              <CalendarDays className="w-4 h-4 text-purple-600 dark:text-purple-400" />
+              <span className="text-sm text-purple-800 dark:text-purple-200">
+                <strong>Runs:</strong> {getTimingDescription()}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={isLoading}
+            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+          >
+            {isLoading ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 export default Tasks;