stagent 0.1.0

package/src/components/schedules/schedule-create-dialog.tsx

@@ -0,0 +1,403 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Plus, Calendar, Clock, Bot } from "lucide-react";
+import { toast } from "sonner";
+import {
+  type AgentRuntimeId,
+  DEFAULT_AGENT_RUNTIME,
+  listRuntimeCatalog,
+} from "@/lib/agents/runtime/catalog";
+import {
+  getSupportedRuntimes,
+  profileSupportsRuntime,
+} from "@/lib/agents/profiles/compatibility";
+import type { AgentProfile } from "@/lib/agents/profiles/types";
+
+type ProfileOption = Pick<AgentProfile, "id" | "name" | "supportedRuntimes">;
+
+interface ScheduleCreateDialogProps {
+  projects: { id: string; name: string }[];
+  onCreated: () => void;
+}
+
+const INTERVAL_PRESETS = [
+  { label: "Every 5 minutes", value: "5m" },
+  { label: "Every 15 minutes", value: "15m" },
+  { label: "Every 30 minutes", value: "30m" },
+  { label: "Every hour", value: "1h" },
+  { label: "Every 2 hours", value: "2h" },
+  { label: "Daily at 9 AM", value: "1d" },
+  { label: "Custom", value: "custom" },
+];
+
+export function ScheduleCreateDialog({
+  projects,
+  onCreated,
+}: ScheduleCreateDialogProps) {
+  const runtimeOptions = listRuntimeCatalog();
+  const runtimeLabelMap = new Map(
+    runtimeOptions.map((runtime) => [runtime.id, runtime.label])
+  );
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [prompt, setPrompt] = useState("");
+  const [intervalPreset, setIntervalPreset] = useState("5m");
+  const [customInterval, setCustomInterval] = useState("");
+  const [projectId, setProjectId] = useState("");
+  const [assignedAgent, setAssignedAgent] = useState("");
+  const [agentProfile, setAgentProfile] = useState("");
+  const [recurs, setRecurs] = useState(true);
+  const [maxFirings, setMaxFirings] = useState<number | "">("");
+  const [expiresInHours, setExpiresInHours] = useState<number | "">("");
+  const [profiles, setProfiles] = useState<ProfileOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/profiles")
+      .then((r) => r.json())
+      .then((data: ProfileOption[]) => setProfiles(data))
+      .catch(() => {});
+  }, []);
+
+  const selectedRuntimeId = (assignedAgent ||
+    DEFAULT_AGENT_RUNTIME) as AgentRuntimeId;
+  const selectedProfile = profiles.find((profile) => profile.id === agentProfile);
+  const profileCompatibilityError =
+    selectedProfile && !profileSupportsRuntime(selectedProfile, selectedRuntimeId)
+      ? `${selectedProfile.name} does not support ${
+          runtimeLabelMap.get(selectedRuntimeId) ?? selectedRuntimeId
+        }`
+      : null;
+
+  function resetForm() {
+    setName("");
+    setPrompt("");
+    setIntervalPreset("5m");
+    setCustomInterval("");
+    setProjectId("");
+    setAssignedAgent("");
+    setAgentProfile("");
+    setRecurs(true);
+    setMaxFirings("");
+    setExpiresInHours("");
+    setError(null);
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim() || !prompt.trim()) return;
+
+    const interval =
+      intervalPreset === "custom" ? customInterval : intervalPreset;
+    if (!interval.trim()) {
+      setError("Please enter an interval");
+      return;
+    }
+    if (profileCompatibilityError) {
+      setError(profileCompatibilityError);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch("/api/schedules", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: name.trim(),
+          prompt: prompt.trim(),
+          interval,
+          projectId: projectId || undefined,
+          assignedAgent: assignedAgent || undefined,
+          agentProfile: agentProfile || undefined,
+          recurs,
+          maxFirings: maxFirings || undefined,
+          expiresInHours: expiresInHours || undefined,
+        }),
+      });
+
+      if (res.ok) {
+        resetForm();
+        setOpen(false);
+        toast.success("Schedule created");
+        onCreated();
+      } else {
+        const data = await res.json().catch(() => null);
+        setError(data?.error ?? `Failed to create schedule (${res.status})`);
+      }
+    } catch {
+      setError("Network error — could not reach server");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Plus className="h-4 w-4 mr-2" />
+          New Schedule
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Calendar className="h-5 w-5 text-muted-foreground" />
+            Create Schedule
+          </DialogTitle>
+          <DialogDescription>
+            Define when the agent should run, what it should do, and which project context it should use.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {/* Left column */}
+            <div className="space-y-2">
+              <Label htmlFor="sched-name">Name</Label>
+              <Input
+                id="sched-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="e.g., Build status check"
+                required
+              />
+              <p className="text-xs text-muted-foreground">Human-readable schedule name</p>
+            </div>
+
+            {/* Right column */}
+            <div className="space-y-2">
+              <Label className="flex items-center gap-1.5">
+                <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+                Interval
+              </Label>
+              <Select value={intervalPreset} onValueChange={setIntervalPreset}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {INTERVAL_PRESETS.map((p) => (
+                    <SelectItem key={p.value} value={p.value}>
+                      {p.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {intervalPreset === "custom" && (
+                <>
+                  <Input
+                    value={customInterval}
+                    onChange={(e) => setCustomInterval(e.target.value)}
+                    placeholder="e.g., 10m, 3h, or */5 * * * *"
+                    className="mt-1"
+                  />
+                  <p className="text-xs text-muted-foreground">Duration or cron expression</p>
+                </>
+              )}
+            </div>
+
+            {/* Prompt — spans full left column */}
+            <div className="space-y-2">
+              <Label htmlFor="sched-prompt">Prompt</Label>
+              <Textarea
+                id="sched-prompt"
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder="What the agent does each firing"
+                rows={3}
+                required
+              />
+              <p className="text-xs text-muted-foreground">Instructions for each execution</p>
+            </div>
+
+            {/* Recurring + conditional fields */}
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="sched-recurs">Recurring</Label>
+                <Switch
+                  id="sched-recurs"
+                  checked={recurs}
+                  onCheckedChange={setRecurs}
+                />
+              </div>
+              {recurs && (
+                <>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="sched-max">Max firings</Label>
+                    <Input
+                      id="sched-max"
+                      type="number"
+                      min={1}
+                      value={maxFirings}
+                      onChange={(e) =>
+                        setMaxFirings(e.target.value ? Number(e.target.value) : "")
+                      }
+                      placeholder="Unlimited"
+                    />
+                    <p className="text-xs text-muted-foreground">Leave empty = unlimited</p>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="sched-expires">Expires in (hours)</Label>
+                    <Input
+                      id="sched-expires"
+                      type="number"
+                      min={1}
+                      value={expiresInHours}
+                      onChange={(e) =>
+                        setExpiresInHours(
+                          e.target.value ? Number(e.target.value) : ""
+                        )
+                      }
+                      placeholder="Never"
+                    />
+                    <p className="text-xs text-muted-foreground">Auto-pause timer</p>
+                  </div>
+                </>
+              )}
+            </div>
+
+            {/* Project */}
+            {projects.length > 0 && (
+              <div className="space-y-2">
+              <Label>Project</Label>
+              <Select
+                value={projectId || "none"}
+                onValueChange={(value) =>
+                  setProjectId(value === "none" ? "" : value)
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="None" />
+                </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="none">None</SelectItem>
+                    {projects.map((p) => (
+                      <SelectItem key={p.id} value={p.id}>
+                        {p.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">Context directory</p>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <Label className="flex items-center gap-1.5">
+                <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+                Runtime
+              </Label>
+              <Select
+                value={assignedAgent || "default"}
+                onValueChange={(value) =>
+                  setAssignedAgent(value === "default" ? "" : value)
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Default runtime" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="default">Default runtime</SelectItem>
+                  {runtimeOptions.map((runtime) => (
+                    <SelectItem key={runtime.id} value={runtime.id}>
+                      {runtime.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                Which provider runtime each firing should use
+              </p>
+            </div>
+
+            {/* Agent Profile */}
+            {profiles.length > 0 && (
+              <div className="space-y-2">
+                <Label className="flex items-center gap-1.5">
+                  <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+                  Agent Profile
+                </Label>
+                <Select
+                  value={agentProfile || "auto"}
+                  onValueChange={(value) =>
+                    setAgentProfile(value === "auto" ? "" : value)
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Auto-detect" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="auto">Auto-detect</SelectItem>
+                    {profiles.map((p) => (
+                      <SelectItem
+                        key={p.id}
+                        value={p.id}
+                        disabled={!profileSupportsRuntime(p, selectedRuntimeId)}
+                      >
+                        {p.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <p className="text-xs text-muted-foreground">
+                  Auto-detect only considers profiles compatible with the selected runtime
+                </p>
+                {selectedProfile && (
+                  <p
+                    className={`text-xs ${
+                      profileCompatibilityError
+                        ? "text-destructive"
+                        : "text-muted-foreground"
+                    }`}
+                  >
+                    {profileCompatibilityError ??
+                      `Supports ${getSupportedRuntimes(selectedProfile)
+                        .map(
+                          (runtimeId) =>
+                            runtimeLabelMap.get(runtimeId) ?? runtimeId
+                        )
+                        .join(", ")}`}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+
+          <Button
+            type="submit"
+            disabled={loading || !name.trim() || !prompt.trim()}
+            className="w-full"
+          >
+            {loading ? "Creating..." : "Create Schedule"}
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/schedules/schedule-detail-view.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ScheduleStatusBadge } from "./schedule-status-badge";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+import { describeCron } from "@/lib/schedules/interval-parser";
+import { taskStatusVariant } from "@/lib/constants/status-colors";
+import { Pause, Play, Trash2, Clock, Zap, Hash } from "lucide-react";
+import { toast } from "sonner";
+import { useRouter } from "next/navigation";
+
+interface TaskSummary {
+  id: string;
+  title: string;
+  status: string;
+  createdAt: string;
+  result: string | null;
+}
+
+interface ScheduleDetail {
+  id: string;
+  name: string;
+  prompt: string;
+  cronExpression: string;
+  assignedAgent: string | null;
+  agentProfile: string | null;
+  recurs: boolean;
+  status: string;
+  maxFirings: number | null;
+  firingCount: number;
+  expiresAt: string | null;
+  lastFiredAt: string | null;
+  nextFireAt: string | null;
+  createdAt: string;
+  firingHistory: TaskSummary[];
+}
+
+interface ScheduleDetailViewProps {
+  scheduleId: string;
+  initialSchedule?: ScheduleDetail;
+}
+
+export function ScheduleDetailView({ scheduleId, initialSchedule }: ScheduleDetailViewProps) {
+  const router = useRouter();
+  const [schedule, setSchedule] = useState<ScheduleDetail | null>(initialSchedule ?? null);
+  const [loaded, setLoaded] = useState(!!initialSchedule);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const refresh = useCallback(async () => {
+    const res = await fetch(`/api/schedules/${scheduleId}`);
+    if (res.ok) setSchedule(await res.json());
+    setLoaded(true);
+  }, [scheduleId]);
+
+  useEffect(() => {
+    // Always refresh to get enriched data (firingHistory), but don't block rendering
+    refresh();
+    const interval = setInterval(refresh, 10_000);
+    return () => clearInterval(interval);
+  }, [refresh]);
+
+  async function handlePauseResume() {
+    if (!schedule) return;
+    const newStatus = schedule.status === "active" ? "paused" : "active";
+    const res = await fetch(`/api/schedules/${scheduleId}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ status: newStatus }),
+    });
+    if (res.ok) {
+      toast.success(newStatus === "paused" ? "Schedule paused" : "Schedule resumed");
+      refresh();
+    } else {
+      const data = await res.json().catch(() => null);
+      toast.error(data?.error ?? "Failed to update schedule");
+    }
+  }
+
+  async function handleDelete() {
+    setConfirmDelete(false);
+    const res = await fetch(`/api/schedules/${scheduleId}`, {
+      method: "DELETE",
+    });
+    if (res.ok) {
+      toast.success("Schedule deleted");
+      router.push("/schedules");
+    } else {
+      const data = await res.json().catch(() => null);
+      toast.error(data?.error ?? "Failed to delete schedule");
+    }
+  }
+
+  if (!loaded) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-48 w-full" />
+      </div>
+    );
+  }
+
+  if (!schedule) {
+    return <p className="text-muted-foreground">Schedule not found.</p>;
+  }
+
+  function formatDate(val: string | null): string {
+    if (!val) return "—";
+    return new Date(val).toLocaleString();
+  }
+
+  return (
+    <div className="space-y-6" aria-live="polite">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">{schedule.name}</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            {describeCron(schedule.cronExpression)}
+            {schedule.assignedAgent && ` · Runtime: ${schedule.assignedAgent}`}
+            {schedule.agentProfile && ` · Profile: ${schedule.agentProfile}`}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <ScheduleStatusBadge status={schedule.status} />
+          {(schedule.status === "active" || schedule.status === "paused") && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handlePauseResume}
+              aria-label={
+                schedule.status === "active" ? "Pause schedule" : "Resume schedule"
+              }
+            >
+              {schedule.status === "active" ? (
+                <>
+                  <Pause className="h-3.5 w-3.5 mr-1" />
+                  Pause
+                </>
+              ) : (
+                <>
+                  <Play className="h-3.5 w-3.5 mr-1" />
+                  Resume
+                </>
+              )}
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="sm"
+            className="text-destructive"
+            onClick={() => setConfirmDelete(true)}
+            aria-label="Delete schedule"
+          >
+            <Trash2 className="h-3.5 w-3.5 mr-1" />
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      {/* Info cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
+              <Hash className="h-3.5 w-3.5" />
+              Firings
+            </div>
+            <p className="text-2xl font-bold">
+              {schedule.firingCount}
+              {schedule.maxFirings && (
+                <span className="text-sm font-normal text-muted-foreground">
+                  {" "}
+                  / {schedule.maxFirings}
+                </span>
+              )}
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
+              <Zap className="h-3.5 w-3.5" />
+              Last Fired
+            </div>
+            <p className="text-sm font-medium">
+              {formatDate(schedule.lastFiredAt)}
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground mb-1">
+              <Clock className="h-3.5 w-3.5" />
+              Next Fire
+            </div>
+            <p className="text-sm font-medium">
+              {schedule.status === "active"
+                ? formatDate(schedule.nextFireAt)
+                : "—"}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Prompt */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Prompt</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm whitespace-pre-wrap">{schedule.prompt}</p>
+        </CardContent>
+      </Card>
+
+      {/* Firing History */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">
+            Firing History ({schedule.firingHistory.length})
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {schedule.firingHistory.length === 0 ? (
+            <p className="text-sm text-muted-foreground">
+              No firings yet. The scheduler checks every 60 seconds.
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {schedule.firingHistory.map((task) => (
+                <div
+                  key={task.id}
+                  className="flex items-center justify-between border rounded-lg p-3 text-sm cursor-pointer hover:bg-accent/50 transition-colors"
+                  tabIndex={0}
+                  onClick={() => router.push(`/monitor?taskId=${task.id}`)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      router.push(`/monitor?taskId=${task.id}`);
+                    }
+                  }}
+                >
+                  <div>
+                    <span className="font-medium">{task.title}</span>
+                    <span className="text-muted-foreground ml-2">
+                      {formatDate(task.createdAt)}
+                    </span>
+                  </div>
+                  <Badge variant={taskStatusVariant[task.status] ?? "secondary"}>
+                    {task.status}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <ConfirmDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        title="Delete Schedule"
+        description="This will permanently delete this schedule. Child tasks will be kept."
+        confirmLabel="Delete"
+        onConfirm={handleDelete}
+        destructive
+      />
+    </div>
+  );
+}