@agentforge-ai/cli 0.4.2 → 0.5.0

package/dist/default/dashboard/app/routes/cron.tsx

@@ -1,322 +1,163 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { DashboardLayout } from '../components/DashboardLayout';
-import { useState } from 'react';
-import { Button } from '../components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter } from '../components/ui/dialog';
-import { Input } from '../components/ui/input';
-import { Label } from '../components/ui/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../components/ui/select';
-import { Switch } from '../components/ui/switch';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../components/ui/table';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components/ui/tooltip';
-import { Clock, Play, Pause, Plus, History, AlertCircle, Trash2, Edit } from 'lucide-react';
-// import { useQuery, useMutation } from 'convex/react';
-// import { api } from '../../convex/_generated/api';
+import { useState, useMemo } from 'react';
+import { useQuery, useMutation } from 'convex/react';
+import { api } from '@convex/_generated/api';
+import { Clock, Play, Pause, Plus, History, Trash2, Edit, X, AlertCircle } from 'lucide-react';
 
-export const Route = createFileRoute('/cron')({ component: CronPageComponent });
+export const Route = createFileRoute('/cron')({ component: CronPage });
 
-type CronJob = {
-  id: string;
-  name: string;
-  schedule: string;
-  scheduleReadable: string;
-  agent: string;
-  status: 'enabled' | 'disabled';
-  lastRun: string | null;
-  nextRun: string;
-};
+function CronPage() {
+  const cronJobs = useQuery(api.cronJobs.list, {}) ?? [];
+  const agents = useQuery(api.agents.list, {}) ?? [];
+  const createCron = useMutation(api.cronJobs.create);
+  const removeCron = useMutation(api.cronJobs.remove);
+  const toggleCron = useMutation(api.cronJobs.toggleEnabled);
 
-const initialCronJobs: CronJob[] = [
-  {
-    id: 'cron_1',
-    name: 'Daily Report',
-    schedule: '0 9 * * *',
-    scheduleReadable: 'Every day at 9:00 AM',
-    agent: 'reporting-agent',
-    status: 'enabled',
-    lastRun: '2026-02-15 09:00:12',
-    nextRun: '2026-02-16 09:00:00',
-  },
-  {
-    id: 'cron_2',
-    name: 'Hourly Sync',
-    schedule: '0 * * * *',
-    scheduleReadable: 'Every hour',
-    agent: 'sync-agent',
-    status: 'disabled',
-    lastRun: '2026-02-15 14:00:05',
-    nextRun: '2026-02-15 16:00:00',
-  },
-  {
-    id: 'cron_3',
-    name: 'Nightly Cleanup',
-    schedule: '0 2 * * *',
-    scheduleReadable: 'Every day at 2:00 AM',
-    agent: 'cleanup-agent',
-    status: 'enabled',
-    lastRun: '2026-02-15 02:00:08',
-    nextRun: '2026-02-16 02:00:00',
-  },
-];
-
-function CronPageComponent() {
-  // const cronJobs = useQuery(api.cronJobs.list) ?? [];
-  // const createCronJob = useMutation(api.cronJobs.create);
-  // const updateCronJob = useMutation(api.cronJobs.update);
-  // const deleteCronJob = useMutation(api.cronJobs.delete);
-
-  const [cronJobs, setCronJobs] = useState<CronJob[]>(initialCronJobs);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [editingJob, setEditingJob] = useState<CronJob | null>(null);
-  const [selectedJobHistory, setSelectedJobHistory] = useState<CronJob | null>(null);
+  const [historyJobId, setHistoryJobId] = useState<string | null>(null);
 
-  const handleSaveJob = (jobData: Omit<CronJob, 'id'>) => {
-    if (editingJob) {
-      const updatedJob = { ...editingJob, ...jobData };
-      setCronJobs(cronJobs.map(j => j.id === editingJob.id ? updatedJob : j));
-      // updateCronJob({ id: updatedJob.id, ...jobData });
-    } else {
-      const newJob = { ...jobData, id: `cron_${Date.now()}` };
-      setCronJobs([...cronJobs, newJob]);
-      // createCronJob(jobData);
-    }
+  const handleCreate = async (data: any) => {
+    await createCron(data);
     setIsModalOpen(false);
-    setEditingJob(null);
-  };
-
-  const handleToggleStatus = (job: CronJob) => {
-    const newStatus = job.status === 'enabled' ? 'disabled' : 'enabled';
-    const updatedJob = { ...job, status: newStatus };
-    setCronJobs(cronJobs.map(j => j.id === job.id ? updatedJob : j));
-    // updateCronJob({ id: job.id, status: newStatus });
   };
 
-  const handleDeleteJob = (id: string) => {
-    if (window.confirm('Are you sure you want to delete this cron job?')) {
-      setCronJobs(cronJobs.filter(j => j.id !== id));
-      // deleteCronJob({ id });
+  const handleDelete = async (id: any) => {
+    if (confirm('Delete this cron job?')) {
+      await removeCron({ id });
     }
   };
 
-  const openEditModal = (job: CronJob) => {
-    setEditingJob(job);
-    setIsModalOpen(true);
-  };
-
-  const openCreateModal = () => {
-    setEditingJob(null);
-    setIsModalOpen(true);
-  };
-
   return (
     <DashboardLayout>
-      <div className="p-6">
-        <div className="flex justify-between items-center mb-6">
-          <h1 className="text-3xl font-bold">Cron Jobs</h1>
-          <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-            <DialogTrigger asChild>
-              <Button onClick={openCreateModal}>
-                <Plus className="mr-2 h-4 w-4" /> Add Cron Job
-              </Button>
-            </DialogTrigger>
-            <CronJobForm 
-              job={editingJob} 
-              onSave={handleSaveJob} 
-              onClose={() => setIsModalOpen(false)} 
-            />
-          </Dialog>
+      <div className="space-y-6">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+          <div>
+            <h1 className="text-3xl font-bold">Scheduled Tasks</h1>
+            <p className="text-muted-foreground">Automate agent execution with cron schedules.</p>
+          </div>
+          <button onClick={() => setIsModalOpen(true)} className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90 flex items-center gap-2">
+            <Plus className="w-4 h-4" /> New Schedule
+          </button>
         </div>
 
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <Card className="lg:col-span-2">
-            <CardHeader>
-              <CardTitle>Scheduled Jobs</CardTitle>
-            </CardHeader>
-            <CardContent>
-              {cronJobs.length > 0 ? (
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Status</TableHead>
-                      <TableHead>Name</TableHead>
-                      <TableHead>Schedule</TableHead>
-                      <TableHead>Agent</TableHead>
-                      <TableHead>Last Run</TableHead>
-                      <TableHead>Next Run</TableHead>
-                      <TableHead className="text-right">Actions</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {cronJobs.map(job => (
-                      <TableRow key={job.id}>
-                        <TableCell>
-                          <TooltipProvider>
-                            <Tooltip>
-                              <TooltipTrigger asChild>
-                                <button onClick={() => handleToggleStatus(job)}>
-                                  {job.status === 'enabled' ? (
-                                    <Play className="h-5 w-5 text-green-500" />
-                                  ) : (
-                                    <Pause className="h-5 w-5 text-yellow-500" />
-                                  )}
-                                </button>
-                              </TooltipTrigger>
-                              <TooltipContent>
-                                <p>{job.status === 'enabled' ? 'Enabled (Click to disable)' : 'Disabled (Click to enable)'}</p>
-                              </TooltipContent>
-                            </Tooltip>
-                          </TooltipProvider>
-                        </TableCell>
-                        <TableCell className="font-medium">{job.name}</TableCell>
-                        <TableCell>
-                          <TooltipProvider>
-                            <Tooltip>
-                              <TooltipTrigger className="cursor-help">{job.scheduleReadable}</TooltipTrigger>
-                              <TooltipContent><p>{job.schedule}</p></TooltipContent>
-                            </Tooltip>
-                          </TooltipProvider>
-                        </TableCell>
-                        <TableCell>{job.agent}</TableCell>
-                        <TableCell>{job.lastRun || 'N/A'}</TableCell>
-                        <TableCell>{job.nextRun}</TableCell>
-                        <TableCell className="text-right space-x-2">
-                          <Button variant="ghost" size="icon" onClick={() => setSelectedJobHistory(job)}>
-                            <History className="h-4 w-4" />
-                          </Button>
-                          <Button variant="ghost" size="icon" onClick={() => openEditModal(job)}>
-                            <Edit className="h-4 w-4" />
-                          </Button>
-                          <Button variant="destructive" size="icon" onClick={() => handleDeleteJob(job.id)}>
-                            <Trash2 className="h-4 w-4" />
-                          </Button>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              ) : (
-                <div className="text-center py-12 text-muted-foreground">
-                  <Clock className="mx-auto h-12 w-12" />
-                  <h3 className="mt-4 text-lg font-semibold">No Cron Jobs Scheduled</h3>
-                  <p className="mt-2 text-sm">Get started by adding a new cron job.</p>
-                </div>
-              )}
-            </CardContent>
-          </Card>
+        {cronJobs.length === 0 ? (
+          <div className="text-center py-16 bg-card border border-border rounded-lg">
+            <Clock className="w-16 h-16 text-muted-foreground/30 mx-auto mb-4" />
+            <h3 className="text-lg font-semibold mb-2">No scheduled tasks</h3>
+            <p className="text-muted-foreground mb-4">Create a cron job to run agents on a schedule.</p>
+            <button onClick={() => setIsModalOpen(true)} className="bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-primary/90">
+              <Plus className="w-4 h-4 inline mr-2" />Create Schedule
+            </button>
+          </div>
+        ) : (
+          <div className="bg-card border border-border rounded-lg overflow-hidden">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50">
+                <tr>
+                  <th className="text-left px-4 py-3 font-medium text-muted-foreground">Name</th>
+                  <th className="text-left px-4 py-3 font-medium text-muted-foreground">Schedule</th>
+                  <th className="text-left px-4 py-3 font-medium text-muted-foreground">Agent</th>
+                  <th className="text-left px-4 py-3 font-medium text-muted-foreground">Status</th>
+                  <th className="text-left px-4 py-3 font-medium text-muted-foreground">Last Run</th>
+                  <th className="text-right px-4 py-3 font-medium text-muted-foreground">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {cronJobs.map((job: any) => (
+                  <tr key={job._id} className="border-t border-border hover:bg-muted/30">
+                    <td className="px-4 py-3">
+                      <div>
+                        <p className="font-medium">{job.name}</p>
+                        {job.description && <p className="text-xs text-muted-foreground">{job.description}</p>}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 font-mono text-xs">{job.schedule}</td>
+                    <td className="px-4 py-3 text-muted-foreground">{job.agentId}</td>
+                    <td className="px-4 py-3">
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${job.isEnabled ? 'bg-green-500/10 text-green-500' : 'bg-muted text-muted-foreground'}`}>
+                        {job.isEnabled ? 'Enabled' : 'Disabled'}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-xs text-muted-foreground">{job.lastRun ? new Date(job.lastRun).toLocaleString() : 'Never'}</td>
+                    <td className="px-4 py-3 text-right">
+                      <div className="flex items-center justify-end gap-1">
+                        <button onClick={() => toggleCron({ id: job._id })} className="p-1.5 rounded hover:bg-muted" title={job.isEnabled ? 'Pause' : 'Resume'}>
+                          {job.isEnabled ? <Pause className="w-4 h-4 text-muted-foreground" /> : <Play className="w-4 h-4 text-green-500" />}
+                        </button>
+                        <button onClick={() => handleDelete(job._id)} className="p-1.5 rounded hover:bg-destructive/10"><Trash2 className="w-4 h-4 text-destructive" /></button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
 
-          <Card className="lg:col-span-1 h-fit">
-            <CardHeader>
-              <CardTitle className="flex items-center">
-                <History className="mr-2 h-5 w-5" />
-                Execution History
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              {selectedJobHistory ? (
-                <div>
-                  <h4 className="font-semibold mb-2">{selectedJobHistory.name}</h4>
-                  <ul className="space-y-2 text-sm text-muted-foreground">
-                    {[...Array(5)].map((_, i) => (
-                      <li key={i} className="flex items-center justify-between p-2 bg-background rounded-md border">
-                        <span>Run #{15 - i}</span>
-                        <span className="text-xs">{(new Date(Date.now() - i * 3600000)).toLocaleString()}</span>
-                        <span className="text-green-500">Success</span>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ) : (
-                <div className="text-center py-10 text-muted-foreground">
-                  <AlertCircle className="mx-auto h-10 w-10" />
-                  <p className="mt-4 text-sm">Select a job to view its execution history.</p>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </div>
+        {isModalOpen && <CronModal agents={agents} onSave={handleCreate} onClose={() => setIsModalOpen(false)} />}
       </div>
     </DashboardLayout>
   );
 }
 
-interface CronJobFormProps {
-  job: CronJob | null;
-  onSave: (jobData: Omit<CronJob, 'id'>) => void;
-  onClose: () => void;
-}
+function CronModal({ agents, onSave, onClose }: { agents: any[]; onSave: (data: any) => void; onClose: () => void }) {
+  const [form, setForm] = useState({ name: '', description: '', schedule: '0 9 * * *', agentId: agents[0]?.id || '', prompt: '' });
 
-function CronJobForm({ job, onSave, onClose }: CronJobFormProps) {
-  const [name, setName] = useState(job?.name || '');
-  const [agent, setAgent] = useState(job?.agent || '');
-  const [schedulePreset, setSchedulePreset] = useState('custom');
-  const [customSchedule, setCustomSchedule] = useState(job?.schedule || '');
+  const presets = [
+    { label: 'Every minute', value: '* * * * *' },
+    { label: 'Every hour', value: '0 * * * *' },
+    { label: 'Daily at 9 AM', value: '0 9 * * *' },
+    { label: 'Weekly (Mon 9 AM)', value: '0 9 * * 1' },
+    { label: 'Monthly (1st at 9 AM)', value: '0 9 1 * *' },
+  ];
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: any) => {
     e.preventDefault();
-    const schedule = schedulePreset === 'custom' ? customSchedule : schedulePreset;
-    // This is a simplified readable schedule. A real implementation would use a library.
-    const scheduleReadable = schedulePreset === 'custom' ? `Custom: ${customSchedule}` : `Every ${schedulePreset.split(' ')[1]}`;
-    
-    onSave({
-      name,
-      agent,
-      schedule,
-      scheduleReadable,
-      status: job?.status || 'enabled',
-      lastRun: job?.lastRun || null,
-      nextRun: job?.nextRun || 'Calculating...',
-    });
+    onSave(form);
   };
 
   return (
-    <DialogContent className="sm:max-w-[425px]">
-      <DialogHeader>
-        <DialogTitle>{job ? 'Edit Cron Job' : 'Create Cron Job'}</DialogTitle>
-      </DialogHeader>
-      <form onSubmit={handleSubmit}>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="name" className="text-right">Name</Label>
-            <Input id="name" value={name} onChange={e => setName(e.target.value)} className="col-span-3" placeholder="e.g., Daily Summary" required />
+    <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
+      <div className="bg-card border border-border rounded-lg shadow-xl w-full max-w-lg">
+        <div className="flex justify-between items-center p-4 border-b border-border">
+          <h2 className="text-lg font-bold">New Scheduled Task</h2>
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground"><X className="h-5 w-5" /></button>
+        </div>
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Name</label>
+            <input type="text" value={form.name} onChange={(e) => setForm(prev => ({ ...prev, name: e.target.value }))} className="w-full bg-background border border-border rounded-md px-3 py-2 text-sm" placeholder="e.g. Daily Report" required />
           </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="agent" className="text-right">Agent</Label>
-            <Input id="agent" value={agent} onChange={e => setAgent(e.target.value)} className="col-span-3" placeholder="e.g., reporting-agent" required />
+          <div>
+            <label className="block text-sm font-medium mb-1">Description</label>
+            <input type="text" value={form.description} onChange={(e) => setForm(prev => ({ ...prev, description: e.target.value }))} className="w-full bg-background border border-border rounded-md px-3 py-2 text-sm" placeholder="Optional description" />
           </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="schedule" className="text-right">Schedule</Label>
-            <Select onValueChange={setSchedulePreset} defaultValue={schedulePreset}>
-              <SelectTrigger className="col-span-3">
-                <SelectValue placeholder="Select a preset" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="0 * * * *">Every Hour</SelectItem>
-                <SelectItem value="0 0 * * *">Every Day (midnight)</SelectItem>
-                <SelectItem value="0 0 * * 1">Every Week (Monday)</SelectItem>
-                <SelectItem value="custom">Custom Cron Expression</SelectItem>
-              </SelectContent>
-            </Select>
+          <div>
+            <label className="block text-sm font-medium mb-1">Agent</label>
+            <select value={form.agentId} onChange={(e) => setForm(prev => ({ ...prev, agentId: e.target.value }))} className="w-full bg-background border border-border rounded-md px-3 py-2 text-sm" required>
+              {agents.length === 0 ? <option value="">No agents available</option> : agents.map((a: any) => <option key={a.id} value={a.id}>{a.name}</option>)}
+            </select>
           </div>
-          {schedulePreset === 'custom' && (
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="custom-schedule" className="text-right">Cron</Label>
-              <Input 
-                id="custom-schedule" 
-                value={customSchedule} 
-                onChange={e => setCustomSchedule(e.target.value)} 
-                className="col-span-3" 
-                placeholder="* * * * *" 
-                required
-              />
+          <div>
+            <label className="block text-sm font-medium mb-1">Cron Schedule</label>
+            <input type="text" value={form.schedule} onChange={(e) => setForm(prev => ({ ...prev, schedule: e.target.value }))} className="w-full bg-background border border-border rounded-md px-3 py-2 text-sm font-mono" required />
+            <div className="flex flex-wrap gap-1 mt-2">
+              {presets.map(p => (
+                <button key={p.value} type="button" onClick={() => setForm(prev => ({ ...prev, schedule: p.value }))} className={`text-xs px-2 py-1 rounded border ${form.schedule === p.value ? 'bg-primary text-primary-foreground border-primary' : 'bg-muted border-border text-muted-foreground hover:text-foreground'}`}>{p.label}</button>
+              ))}
             </div>
-          )}
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-1">Prompt</label>
+            <textarea value={form.prompt} onChange={(e) => setForm(prev => ({ ...prev, prompt: e.target.value }))} rows={3} className="w-full bg-background border border-border rounded-md px-3 py-2 text-sm" placeholder="What should the agent do?" required />
+          </div>
+        </form>
+        <div className="p-4 border-t border-border flex justify-end gap-2">
+          <button onClick={onClose} className="px-4 py-2 rounded-lg bg-muted text-muted-foreground text-sm">Cancel</button>
+          <button onClick={handleSubmit} disabled={!form.name || !form.agentId || !form.prompt} className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm hover:bg-primary/90 disabled:opacity-50">Create Schedule</button>
         </div>
-        <DialogFooter>
-          <Button type="button" variant="ghost" onClick={onClose}>Cancel</Button>
-          <Button type="submit">Save Job</Button>
-        </DialogFooter>
-      </form>
-    </DialogContent>
+      </div>
+    </div>
   );
 }