stagent 0.5.0 → 0.6.0

package/src/components/profiles/smoke-test-editor.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { TagInput } from "@/components/shared/tag-input";
+import { Plus, Trash2 } from "lucide-react";
+
+export interface SmokeTestDraft {
+  task: string;
+  expectedKeywords: string;
+}
+
+interface SmokeTestEditorProps {
+  tests: SmokeTestDraft[];
+  onChange: (tests: SmokeTestDraft[]) => void;
+  keywordSuggestions?: string[];
+}
+
+export function SmokeTestEditor({
+  tests,
+  onChange,
+  keywordSuggestions = [],
+}: SmokeTestEditorProps) {
+  const addTest = () => {
+    onChange([...tests, { task: "", expectedKeywords: "" }]);
+  };
+
+  const removeTest = (index: number) => {
+    onChange(tests.filter((_, i) => i !== index));
+  };
+
+  const updateTest = (index: number, field: keyof SmokeTestDraft, value: string) => {
+    const updated = tests.map((t, i) =>
+      i === index ? { ...t, [field]: value } : t
+    );
+    onChange(updated);
+  };
+
+  return (
+    <div className="space-y-3">
+      {tests.length === 0 && (
+        <p className="text-xs text-muted-foreground">
+          No tests defined. Add a test to verify this profile behaves correctly.
+        </p>
+      )}
+
+      {tests.map((test, i) => (
+        <div
+          key={i}
+          className="space-y-2 rounded-md border border-border/60 p-3"
+        >
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-medium text-muted-foreground">
+              Test {i + 1}
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive"
+              onClick={() => removeTest(i)}
+            >
+              <Trash2 className="h-3 w-3" />
+            </Button>
+          </div>
+
+          <div className="space-y-1">
+            <Label className="text-xs">Task</Label>
+            <Textarea
+              value={test.task}
+              onChange={(e) => updateTest(i, "task", e.target.value)}
+              placeholder="Describe a task this agent should handle well..."
+              rows={2}
+              className="text-sm"
+            />
+          </div>
+
+          <div className="space-y-1">
+            <Label className="text-xs">Expected Keywords</Label>
+            <TagInput
+              value={test.expectedKeywords}
+              onChange={(v) => updateTest(i, "expectedKeywords", v)}
+              suggestions={keywordSuggestions}
+              placeholder="keyword1, keyword2, keyword3"
+            />
+            <p className="text-xs text-muted-foreground">
+              Response must contain these keywords to pass.
+            </p>
+          </div>
+        </div>
+      ))}
+
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={addTest}
+        className="w-full border border-dashed border-border/60"
+      >
+        <Plus className="h-3 w-3 mr-1" />
+        Add Test
+      </Button>
+    </div>
+  );
+}

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

@@ -38,7 +38,7 @@ export function ScheduleCreateSheet({
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           name: values.name,
-          prompt: values.prompt,
+          prompt: values.prompt || undefined,
           interval: values.interval,
           projectId: values.projectId || undefined,
           assignedAgent: values.assignedAgent || undefined,
@@ -46,6 +46,14 @@ export function ScheduleCreateSheet({
           recurs: values.recurs,
           maxFirings: values.maxFirings || undefined,
           expiresInHours: values.expiresInHours || undefined,
+          type: values.type,
+          ...(values.type === "heartbeat" && {
+            heartbeatChecklist: values.heartbeatChecklist,
+            activeHoursStart: values.activeHoursStart || undefined,
+            activeHoursEnd: values.activeHoursEnd || undefined,
+            activeTimezone: values.activeTimezone || undefined,
+            heartbeatBudgetPerDay: values.heartbeatBudgetPerDay || undefined,
+          }),
         }),
       });
 

package/src/components/schedules/schedule-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
@@ -13,7 +13,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
-import { Clock, Bot } from "lucide-react";
+import { Clock, Bot, Heart, Plus, X, GripVertical, Sparkles, CheckCircle2, AlertCircle } from "lucide-react";
 import {
   type AgentRuntimeId,
   DEFAULT_AGENT_RUNTIME,
@@ -37,6 +37,12 @@ export const INTERVAL_PRESETS = [
   { label: "Custom", value: "custom" },
 ];
 
+export interface HeartbeatChecklistItem {
+  id: string;
+  instruction: string;
+  priority: "high" | "medium" | "low";
+}
+
 export interface ScheduleFormValues {
   name: string;
   prompt: string;
@@ -47,6 +53,12 @@ export interface ScheduleFormValues {
   recurs: boolean;
   maxFirings: number | "";
   expiresInHours: number | "";
+  type: "scheduled" | "heartbeat";
+  heartbeatChecklist: HeartbeatChecklistItem[];
+  activeHoursStart: number | "";
+  activeHoursEnd: number | "";
+  activeTimezone: string;
+  heartbeatBudgetPerDay: number | "";
 }
 
 export interface ScheduleFormInitialValues {
@@ -126,6 +138,69 @@ export function ScheduleForm({
   );
   const [profiles, setProfiles] = useState<ProfileOption[]>([]);
 
+  // NL schedule input state
+  const [nlInput, setNlInput] = useState("");
+  const [nlParsing, setNlParsing] = useState(false);
+  const [nlResult, setNlResult] = useState<{
+    cronExpression: string;
+    description: string;
+    nextFireTimes: string[];
+    confidence: number;
+  } | null>(null);
+  const [nlError, setNlError] = useState<string | null>(null);
+  const nlTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const parseNlExpression = useCallback(async (value: string) => {
+    if (!value.trim()) {
+      setNlResult(null);
+      setNlError(null);
+      return;
+    }
+    setNlParsing(true);
+    setNlError(null);
+    try {
+      const res = await fetch("/api/schedules/parse", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ expression: value.trim() }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setNlResult(null);
+        setNlError(data.error ?? "Could not parse");
+      } else {
+        setNlResult(data);
+        setNlError(null);
+        // Auto-fill if confidence >= 0.8
+        if (data.confidence >= 0.8) {
+          setIntervalPreset("custom");
+          setCustomInterval(data.cronExpression);
+        }
+      }
+    } catch {
+      setNlResult(null);
+      setNlError("Failed to reach parse API");
+    } finally {
+      setNlParsing(false);
+    }
+  }, []);
+
+  function handleNlInputChange(value: string) {
+    setNlInput(value);
+    if (nlTimerRef.current) clearTimeout(nlTimerRef.current);
+    nlTimerRef.current = setTimeout(() => {
+      parseNlExpression(value);
+    }, 500);
+  }
+
+  // Heartbeat state
+  const [scheduleType, setScheduleType] = useState<"scheduled" | "heartbeat">("scheduled");
+  const [heartbeatChecklist, setHeartbeatChecklist] = useState<HeartbeatChecklistItem[]>([]);
+  const [activeHoursStart, setActiveHoursStart] = useState<number | "">(9);
+  const [activeHoursEnd, setActiveHoursEnd] = useState<number | "">(17);
+  const [activeTimezone, setActiveTimezone] = useState("UTC");
+  const [heartbeatBudgetPerDay, setHeartbeatBudgetPerDay] = useState<number | "">("");
+
   useEffect(() => {
     fetch("/api/profiles")
       .then((r) => r.json())
@@ -147,7 +222,16 @@ export function ScheduleForm({
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
-    if (!name.trim() || !prompt.trim()) return;
+    if (!name.trim()) return;
+    if (scheduleType === "scheduled" && !prompt.trim()) return;
+    if (scheduleType === "heartbeat" && heartbeatChecklist.length === 0) {
+      onError("Add at least one checklist item");
+      return;
+    }
+    if (scheduleType === "heartbeat" && heartbeatChecklist.some((item) => !item.instruction.trim())) {
+      onError("All checklist items must have instructions");
+      return;
+    }
 
     const interval =
       intervalPreset === "custom" ? customInterval : intervalPreset;
@@ -171,6 +255,12 @@ export function ScheduleForm({
       recurs,
       maxFirings,
       expiresInHours,
+      type: scheduleType,
+      heartbeatChecklist,
+      activeHoursStart,
+      activeHoursEnd,
+      activeTimezone,
+      heartbeatBudgetPerDay,
     });
   }
 
@@ -191,19 +281,263 @@ export function ScheduleForm({
         </p>
       </div>
 
-      {/* Prompt */}
+      {/* Schedule Type */}
+      <div className="space-y-2">
+        <Label>Schedule Type</Label>
+        <div className="grid grid-cols-2 gap-2">
+          <button
+            type="button"
+            onClick={() => setScheduleType("scheduled")}
+            className={`flex items-center gap-2 rounded-lg border p-3 text-left text-sm transition-colors ${
+              scheduleType === "scheduled"
+                ? "border-primary bg-primary/5"
+                : "border-border hover:border-muted-foreground/30"
+            }`}
+          >
+            <Clock className="h-4 w-4 text-muted-foreground" />
+            <div>
+              <div className="font-medium">Interval</div>
+              <div className="text-xs text-muted-foreground">
+                Fire on a schedule
+              </div>
+            </div>
+          </button>
+          <button
+            type="button"
+            onClick={() => setScheduleType("heartbeat")}
+            className={`flex items-center gap-2 rounded-lg border p-3 text-left text-sm transition-colors ${
+              scheduleType === "heartbeat"
+                ? "border-primary bg-primary/5"
+                : "border-border hover:border-muted-foreground/30"
+            }`}
+          >
+            <Heart className="h-4 w-4 text-muted-foreground" />
+            <div>
+              <div className="font-medium">Heartbeat</div>
+              <div className="text-xs text-muted-foreground">
+                Check, then act if needed
+              </div>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      {/* Heartbeat Checklist (heartbeat only) */}
+      {scheduleType === "heartbeat" && (
+        <div className="space-y-2">
+          <Label className="flex items-center gap-1.5">
+            <Heart className="h-3.5 w-3.5 text-muted-foreground" />
+            Checklist
+          </Label>
+          <p className="text-xs text-muted-foreground">
+            Items the agent evaluates each heartbeat. Only acts if something needs attention.
+          </p>
+          <div className="space-y-2">
+            {heartbeatChecklist.map((item, idx) => (
+              <div key={item.id} className="flex items-start gap-2">
+                <GripVertical className="h-4 w-4 mt-2.5 text-muted-foreground/50 shrink-0" />
+                <div className="flex-1 space-y-1">
+                  <Input
+                    value={item.instruction}
+                    onChange={(e) => {
+                      const updated = [...heartbeatChecklist];
+                      updated[idx] = { ...item, instruction: e.target.value };
+                      setHeartbeatChecklist(updated);
+                    }}
+                    placeholder="e.g., Check if there are unread customer inquiries older than 2 hours"
+                  />
+                </div>
+                <Select
+                  value={item.priority}
+                  onValueChange={(v) => {
+                    const updated = [...heartbeatChecklist];
+                    updated[idx] = { ...item, priority: v as "high" | "medium" | "low" };
+                    setHeartbeatChecklist(updated);
+                  }}
+                >
+                  <SelectTrigger className="w-24 shrink-0">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="high">High</SelectItem>
+                    <SelectItem value="medium">Medium</SelectItem>
+                    <SelectItem value="low">Low</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="shrink-0"
+                  onClick={() => {
+                    setHeartbeatChecklist(heartbeatChecklist.filter((_, i) => i !== idx));
+                  }}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ))}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setHeartbeatChecklist([
+                  ...heartbeatChecklist,
+                  {
+                    id: crypto.randomUUID().slice(0, 8),
+                    instruction: "",
+                    priority: "medium",
+                  },
+                ]);
+              }}
+            >
+              <Plus className="h-3.5 w-3.5 mr-1" />
+              Add item
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Active Hours (heartbeat only) */}
+      {scheduleType === "heartbeat" && (
+        <div className="space-y-2">
+          <Label>Active Hours</Label>
+          <div className="grid grid-cols-3 gap-2">
+            <div className="space-y-1">
+              <Label htmlFor="active-start" className="text-xs text-muted-foreground">Start</Label>
+              <Input
+                id="active-start"
+                type="number"
+                min={0}
+                max={23}
+                value={activeHoursStart}
+                onChange={(e) => setActiveHoursStart(e.target.value ? Number(e.target.value) : "")}
+                placeholder="9"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="active-end" className="text-xs text-muted-foreground">End</Label>
+              <Input
+                id="active-end"
+                type="number"
+                min={0}
+                max={23}
+                value={activeHoursEnd}
+                onChange={(e) => setActiveHoursEnd(e.target.value ? Number(e.target.value) : "")}
+                placeholder="17"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="active-tz" className="text-xs text-muted-foreground">Timezone</Label>
+              <Input
+                id="active-tz"
+                value={activeTimezone}
+                onChange={(e) => setActiveTimezone(e.target.value)}
+                placeholder="UTC"
+              />
+            </div>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Heartbeats only fire within this window. Leave empty for 24/7.
+          </p>
+        </div>
+      )}
+
+      {/* Daily Budget (heartbeat only) */}
+      {scheduleType === "heartbeat" && (
+        <div className="space-y-2">
+          <Label htmlFor="hb-budget">Daily Budget ($)</Label>
+          <Input
+            id="hb-budget"
+            type="number"
+            min={0}
+            step={0.01}
+            value={heartbeatBudgetPerDay === "" ? "" : (heartbeatBudgetPerDay as number) / 1_000_000}
+            onChange={(e) =>
+              setHeartbeatBudgetPerDay(
+                e.target.value ? Math.round(Number(e.target.value) * 1_000_000) : ""
+              )
+            }
+            placeholder="Unlimited"
+          />
+          <p className="text-xs text-muted-foreground">
+            Cap daily heartbeat spend. Leave empty for no limit.
+          </p>
+        </div>
+      )}
+
+      {/* Prompt (scheduled type) or optional context (heartbeat) */}
       <div className="space-y-2">
-        <Label htmlFor="sched-prompt">Prompt</Label>
+        <Label htmlFor="sched-prompt">
+          {scheduleType === "heartbeat" ? "Additional Context (optional)" : "Prompt"}
+        </Label>
         <Textarea
           id="sched-prompt"
           value={prompt}
           onChange={(e) => setPrompt(e.target.value)}
-          placeholder="What the agent does each firing"
+          placeholder={
+            scheduleType === "heartbeat"
+              ? "Optional context for the agent when evaluating the checklist"
+              : "What the agent does each firing"
+          }
           rows={3}
-          required
+          required={scheduleType === "scheduled"}
+        />
+        <p className="text-xs text-muted-foreground">
+          {scheduleType === "heartbeat"
+            ? "Extra instructions appended to the heartbeat evaluation"
+            : "Instructions for each execution"}
+        </p>
+      </div>
+
+      {/* Natural Language Schedule Input */}
+      <div className="space-y-2">
+        <Label className="flex items-center gap-1.5">
+          <Sparkles className="h-3.5 w-3.5 text-muted-foreground" />
+          Describe your schedule
+        </Label>
+        <Input
+          value={nlInput}
+          onChange={(e) => handleNlInputChange(e.target.value)}
+          placeholder="e.g., every weekday at 9am"
         />
+        {nlParsing && (
+          <p className="text-xs text-muted-foreground">Parsing...</p>
+        )}
+        {nlResult && !nlParsing && (
+          <div className="rounded-lg border p-3 space-y-1.5 bg-surface-2">
+            <div className="flex items-center gap-1.5">
+              <CheckCircle2 className="h-3.5 w-3.5 text-emerald-600" />
+              <span className="text-sm font-medium">{nlResult.description}</span>
+            </div>
+            <p className="text-xs text-muted-foreground font-mono">
+              {nlResult.cronExpression}
+            </p>
+            {nlResult.nextFireTimes.length > 0 && (
+              <div className="text-xs text-muted-foreground space-y-0.5">
+                <p className="font-medium">Next fires:</p>
+                {nlResult.nextFireTimes.map((t, i) => (
+                  <p key={i}>{new Date(t).toLocaleString()}</p>
+                ))}
+              </div>
+            )}
+            {nlResult.confidence < 1.0 && (
+              <p className="text-xs text-amber-600">
+                Confidence: {Math.round(nlResult.confidence * 100)}%
+                {nlResult.confidence < 0.8 && " — not auto-filled, verify below"}
+              </p>
+            )}
+          </div>
+        )}
+        {nlError && !nlParsing && (
+          <div className="flex items-center gap-1.5 text-xs text-destructive">
+            <AlertCircle className="h-3.5 w-3.5" />
+            {nlError}
+          </div>
+        )}
         <p className="text-xs text-muted-foreground">
-          Instructions for each execution
+          Or use the preset/custom interval below
         </p>
       </div>
 
@@ -400,7 +734,12 @@ export function ScheduleForm({
 
       <Button
         type="submit"
-        disabled={loading || !name.trim() || !prompt.trim()}
+        disabled={
+          loading ||
+          !name.trim() ||
+          (scheduleType === "scheduled" && !prompt.trim()) ||
+          (scheduleType === "heartbeat" && heartbeatChecklist.length === 0)
+        }
         className="w-full"
       >
         {loading ? "Saving..." : submitLabel}

package/src/components/schedules/schedule-list.tsx

@@ -11,7 +11,7 @@ import { ScheduleStatusBadge } from "./schedule-status-badge";
 import { ConfirmDialog } from "@/components/shared/confirm-dialog";
 import { EmptyState } from "@/components/shared/empty-state";
 import { describeCron } from "@/lib/schedules/interval-parser";
-import { Clock, Pause, Play, Trash2 } from "lucide-react";
+import { Clock, Heart, Pause, Play, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
 interface Schedule {
@@ -28,6 +28,8 @@ interface Schedule {
   lastFiredAt: string | null;
   nextFireAt: string | null;
   createdAt: string;
+  type: "scheduled" | "heartbeat";
+  suppressionCount: number;
 }
 
 interface ScheduleListProps {
@@ -155,7 +157,10 @@ export function ScheduleList({ projects, initialSelectedId }: ScheduleListProps)
             >
               <CardHeader className="pb-2">
                 <div className="flex items-center justify-between gap-2 min-w-0">
-                  <CardTitle className="min-w-0 truncate text-base font-medium">
+                  <CardTitle className="min-w-0 truncate text-base font-medium flex items-center gap-1.5">
+                    {sched.type === "heartbeat" && (
+                      <Heart className="h-3.5 w-3.5 text-rose-500 shrink-0" />
+                    )}
                     {sched.name}
                   </CardTitle>
                   <ScheduleStatusBadge status={sched.status} />
@@ -169,6 +174,14 @@ export function ScheduleList({ projects, initialSelectedId }: ScheduleListProps)
                     {sched.firingCount} firing
                     {sched.firingCount !== 1 ? "s" : ""}
                   </span>
+                  {sched.type === "heartbeat" && sched.suppressionCount > 0 && (
+                    <>
+                      <span>·</span>
+                      <span className="text-emerald-600">
+                        {sched.suppressionCount} suppressed
+                      </span>
+                    </>
+                  )}
                   {!sched.recurs && (
                     <>
                       <span>·</span>

package/src/components/settings/auth-method-selector.tsx

@@ -7,6 +7,7 @@ import type { AuthMethod } from "@/lib/constants/settings";
 interface AuthMethodSelectorProps {
   value: AuthMethod;
   onChange: (method: AuthMethod) => void;
+  recommendedMethod?: AuthMethod | null;
 }
 
 const methods = [
@@ -24,7 +25,7 @@ const methods = [
   },
 ];
 
-export function AuthMethodSelector({ value, onChange }: AuthMethodSelectorProps) {
+export function AuthMethodSelector({ value, onChange, recommendedMethod }: AuthMethodSelectorProps) {
   return (
     <div className="space-y-2">
       <p className="text-sm font-medium">Authentication Method</p>
@@ -58,6 +59,11 @@ export function AuthMethodSelector({ value, onChange }: AuthMethodSelectorProps)
               <span className="text-xs text-muted-foreground">
                 {method.description}
               </span>
+              {recommendedMethod === method.id && !isSelected && (
+                <span className="text-[10px] font-medium uppercase tracking-wider text-primary/70 mt-0.5">
+                  Recommended
+                </span>
+              )}
             </button>
           );
         })}