stagent 0.1.0

package/src/components/workflows/blueprint-gallery.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Skeleton } from "@/components/ui/skeleton";
+import { EmptyState } from "@/components/shared/empty-state";
+import { Button } from "@/components/ui/button";
+import { Search, Layers, Plus } from "lucide-react";
+import { patternLabels } from "@/lib/constants/status-colors";
+import type { WorkflowBlueprint } from "@/lib/workflows/blueprints/types";
+
+const difficultyColors: Record<string, string> = {
+  beginner: "border-green-500/30 bg-green-500/10 text-green-700 dark:text-green-400",
+  intermediate: "border-yellow-500/30 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400",
+  advanced: "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-400",
+};
+
+export function BlueprintGallery() {
+  const router = useRouter();
+  const [blueprints, setBlueprints] = useState<WorkflowBlueprint[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [search, setSearch] = useState("");
+  const [domainFilter, setDomainFilter] = useState<"all" | "work" | "personal">("all");
+
+  useEffect(() => {
+    fetch("/api/blueprints")
+      .then((r) => (r.ok ? r.json() : []))
+      .then((data) => setBlueprints(data))
+      .finally(() => setLoaded(true));
+  }, []);
+
+  const filtered = useMemo(() => {
+    const q = search.toLowerCase();
+    return blueprints.filter((bp) => {
+      if (domainFilter !== "all" && bp.domain !== domainFilter) return false;
+      if (!q) return true;
+      return (
+        bp.name.toLowerCase().includes(q) ||
+        bp.description.toLowerCase().includes(q) ||
+        bp.tags.some((t) => t.toLowerCase().includes(q))
+      );
+    });
+  }, [blueprints, search, domainFilter]);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Blueprints</h1>
+          <p className="text-sm text-muted-foreground mt-1">
+            Pre-configured workflow templates — select one, fill in variables, and create a ready-to-run workflow.
+          </p>
+        </div>
+        <Button onClick={() => router.push("/workflows/blueprints/new")}>
+          <Plus className="h-4 w-4 mr-2" />
+          Create Custom
+        </Button>
+      </div>
+
+      {/* Search + Filter */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search blueprints..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <Tabs
+          value={domainFilter}
+          onValueChange={(v) => setDomainFilter(v as "all" | "work" | "personal")}
+        >
+          <TabsList>
+            <TabsTrigger value="all">All</TabsTrigger>
+            <TabsTrigger value="work">Work</TabsTrigger>
+            <TabsTrigger value="personal">Personal</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {/* Grid */}
+      {!loaded ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <Skeleton key={i} className="h-32 w-full rounded-xl" />
+          ))}
+        </div>
+      ) : filtered.length === 0 ? (
+        <EmptyState
+          icon={Layers}
+          heading="No blueprints found"
+          description="Try adjusting your search or filter."
+        />
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {filtered.map((bp) => (
+            <Card
+              key={bp.id}
+              tabIndex={0}
+              className="cursor-pointer transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
+              onClick={() => router.push(`/workflows/blueprints/${bp.id}`)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  router.push(`/workflows/blueprints/${bp.id}`);
+                }
+              }}
+            >
+              <CardHeader className="pb-1">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-sm font-medium">
+                    {bp.name}
+                  </CardTitle>
+                  <div className="flex items-center gap-1.5">
+                    <Badge variant={bp.domain === "work" ? "default" : "secondary"}>
+                      {bp.domain}
+                    </Badge>
+                    {bp.difficulty && (
+                      <Badge variant="outline" className={`text-xs ${difficultyColors[bp.difficulty] ?? ""}`}>
+                        {bp.difficulty}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <p className="text-xs text-muted-foreground line-clamp-2">
+                  {bp.description}
+                </p>
+                <div className="flex flex-wrap items-center gap-2 mt-2 text-xs text-muted-foreground">
+                  <span>{patternLabels[bp.pattern] ?? bp.pattern}</span>
+                  <span>&middot;</span>
+                  <span>{bp.steps.length} steps</span>
+                  {bp.estimatedDuration && (
+                    <>
+                      <span>&middot;</span>
+                      <span>{bp.estimatedDuration}</span>
+                    </>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/workflows/blueprint-preview.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Loader2, Play } from "lucide-react";
+import { toast } from "sonner";
+import { patternLabels } from "@/lib/constants/status-colors";
+import type { WorkflowBlueprint, BlueprintVariable } from "@/lib/workflows/blueprints/types";
+
+interface BlueprintPreviewProps {
+  blueprint: WorkflowBlueprint;
+  projects: { id: string; name: string }[];
+}
+
+export function BlueprintPreview({
+  blueprint,
+  projects,
+}: BlueprintPreviewProps) {
+  const router = useRouter();
+  const [variables, setVariables] = useState<Record<string, unknown>>(() => {
+    const defaults: Record<string, unknown> = {};
+    for (const v of blueprint.variables) {
+      if (v.default !== undefined) defaults[v.id] = v.default;
+    }
+    return defaults;
+  });
+  const [projectId, setProjectId] = useState<string>("none");
+  const [submitting, setSubmitting] = useState(false);
+
+  function setVar(id: string, value: unknown) {
+    setVariables((prev) => ({ ...prev, [id]: value }));
+  }
+
+  async function handleCreate() {
+    setSubmitting(true);
+    try {
+      const res = await fetch(`/api/blueprints/${blueprint.id}/instantiate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          variables,
+          projectId: projectId !== "none" ? projectId : undefined,
+        }),
+      });
+
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(data.error || "Failed to create workflow");
+        return;
+      }
+
+      toast.success(`Workflow created: ${data.name}`);
+      router.push(`/workflows/${data.workflowId}`);
+    } catch {
+      toast.error("Network error");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{blueprint.name}</h1>
+        <p className="text-sm text-muted-foreground mt-1">{blueprint.description}</p>
+        <div className="flex flex-wrap gap-1.5 mt-3">
+          <Badge variant={blueprint.domain === "work" ? "default" : "secondary"}>
+            {blueprint.domain}
+          </Badge>
+          <Badge variant="outline">{patternLabels[blueprint.pattern] ?? blueprint.pattern}</Badge>
+          {blueprint.estimatedDuration && (
+            <Badge variant="outline">{blueprint.estimatedDuration}</Badge>
+          )}
+          {blueprint.difficulty && (
+            <Badge variant="outline">{blueprint.difficulty}</Badge>
+          )}
+        </div>
+      </div>
+
+      {/* Step Timeline */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Steps</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="relative space-y-3 pl-4 before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-px before:bg-border">
+            {blueprint.steps.map((step, i) => (
+              <div key={i} className="relative flex items-start gap-3">
+                <div className="absolute -left-4 top-1.5 h-2 w-2 rounded-full bg-primary" />
+                <div className="flex-1">
+                  <p className="text-sm font-medium">{step.name}</p>
+                  <p className="text-xs text-muted-foreground">
+                    Profile: {step.profileId}
+                    {step.requiresApproval && " · Requires approval"}
+                    {step.condition && " · Conditional"}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Variable Form */}
+      <Card>
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Configure</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Project selector */}
+          <div className="space-y-1.5">
+            <Label>Project (optional)</Label>
+            <Select value={projectId} onValueChange={setProjectId}>
+              <SelectTrigger>
+                <SelectValue placeholder="No project" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">No project</SelectItem>
+                {projects.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>
+                    {p.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Dynamic variables */}
+          {blueprint.variables.map((v) => (
+            <VariableInput
+              key={v.id}
+              variable={v}
+              value={variables[v.id]}
+              onChange={(val) => setVar(v.id, val)}
+            />
+          ))}
+
+          {/* Create button */}
+          <Button onClick={handleCreate} disabled={submitting} className="w-full mt-2">
+            {submitting ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <Play className="mr-2 h-4 w-4" />
+            )}
+            Create Workflow
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function VariableInput({
+  variable,
+  value,
+  onChange,
+}: {
+  variable: BlueprintVariable;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <Label>
+        {variable.label}
+        {variable.required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+      {variable.description && (
+        <p className="text-xs text-muted-foreground">{variable.description}</p>
+      )}
+
+      {variable.type === "text" && (
+        <Input
+          value={String(value ?? "")}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={variable.placeholder}
+        />
+      )}
+
+      {variable.type === "textarea" && (
+        <Textarea
+          value={String(value ?? "")}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={variable.placeholder}
+          rows={3}
+        />
+      )}
+
+      {variable.type === "number" && (
+        <Input
+          type="number"
+          value={value !== undefined ? Number(value) : ""}
+          onChange={(e) => onChange(e.target.value ? Number(e.target.value) : undefined)}
+          min={variable.min}
+          max={variable.max}
+        />
+      )}
+
+      {variable.type === "boolean" && (
+        <Switch
+          checked={Boolean(value)}
+          onCheckedChange={(checked) => onChange(checked)}
+        />
+      )}
+
+      {variable.type === "select" && variable.options && (
+        <Select
+          value={String(value ?? "")}
+          onValueChange={onChange}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select..." />
+          </SelectTrigger>
+          <SelectContent>
+            {variable.options.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </div>
+  );
+}

package/src/components/workflows/loop-status-view.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  CheckCircle,
+  Circle,
+  Loader2,
+  XCircle,
+  Pause,
+  Play,
+  Clock,
+  ChevronDown,
+  ChevronRight,
+  ExternalLink,
+} from "lucide-react";
+import { toast } from "sonner";
+import type { LoopState, LoopConfig, LoopStopReason } from "@/lib/workflows/types";
+
+interface LoopStatusViewProps {
+  workflowId: string;
+  workflowStatus: string;
+  loopConfig: LoopConfig;
+  loopState: LoopState | null;
+  onRefresh: () => void;
+}
+
+const iterationStatusIcons: Record<string, React.ReactNode> = {
+  pending: <Circle className="h-4 w-4 text-muted-foreground" />,
+  running: <Loader2 className="h-4 w-4 text-status-running animate-spin" />,
+  completed: <CheckCircle className="h-4 w-4 text-status-completed" />,
+  failed: <XCircle className="h-4 w-4 text-destructive" />,
+};
+
+const stopReasonLabels: Record<LoopStopReason, string> = {
+  max_iterations: "Max iterations reached",
+  time_budget: "Time budget exhausted",
+  agent_signaled: "Agent signaled completion",
+  human_cancel: "Cancelled by user",
+  human_pause: "Paused by user",
+  error: "Error",
+};
+
+const stopReasonVariant: Record<LoopStopReason, "default" | "secondary" | "destructive" | "outline" | "success"> = {
+  max_iterations: "secondary",
+  time_budget: "secondary",
+  agent_signaled: "success",
+  human_cancel: "outline",
+  human_pause: "outline",
+  error: "destructive",
+};
+
+export function LoopStatusView({
+  workflowId,
+  workflowStatus,
+  loopConfig,
+  loopState,
+  onRefresh,
+}: LoopStatusViewProps) {
+  const [pausing, setPausing] = useState(false);
+  const [resuming, setResuming] = useState(false);
+  const [expandedIterations, setExpandedIterations] = useState<Set<number>>(new Set());
+
+  const currentIteration = loopState?.currentIteration ?? 0;
+  const maxIterations = loopConfig.maxIterations;
+  const progressPercent = Math.round((currentIteration / maxIterations) * 100);
+
+  const isActive = workflowStatus === "active";
+  const isPaused = workflowStatus === "paused";
+  const isDraft = workflowStatus === "draft";
+
+  async function handlePause() {
+    setPausing(true);
+    try {
+      const res = await fetch(`/api/workflows/${workflowId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: "paused" }),
+      });
+      if (res.ok) {
+        toast.success("Loop paused");
+        onRefresh();
+      } else {
+        const err = await res.json().catch(() => null);
+        toast.error(err?.error ?? "Failed to pause");
+      }
+    } finally {
+      setPausing(false);
+    }
+  }
+
+  async function handleResume() {
+    setResuming(true);
+    try {
+      const res = await fetch(`/api/workflows/${workflowId}/execute`, {
+        method: "POST",
+      });
+      if (res.ok) {
+        toast.success("Loop resumed");
+        onRefresh();
+      } else {
+        const err = await res.json().catch(() => null);
+        toast.error(err?.error ?? "Failed to resume");
+      }
+    } finally {
+      setResuming(false);
+    }
+  }
+
+  function toggleIteration(iteration: number) {
+    setExpandedIterations((prev) => {
+      const next = new Set(prev);
+      if (next.has(iteration)) {
+        next.delete(iteration);
+      } else {
+        next.add(iteration);
+      }
+      return next;
+    });
+  }
+
+  // Time budget display
+  let timeDisplay: React.ReactNode = null;
+  if (loopConfig.timeBudgetMs && loopState) {
+    const startTime = new Date(loopState.startedAt).getTime();
+    const elapsed = loopState.completedAt
+      ? new Date(loopState.completedAt).getTime() - startTime
+      : Date.now() - startTime;
+    const remaining = Math.max(0, loopConfig.timeBudgetMs - elapsed);
+    timeDisplay = (
+      <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+        <Clock className="h-3 w-3" />
+        <span>
+          {formatDuration(elapsed)} elapsed
+          {remaining > 0 && isActive ? ` / ${formatDuration(remaining)} remaining` : ""}
+        </span>
+      </div>
+    );
+  }
+
+  const iterations = loopState?.iterations ?? [];
+  const reversedIterations = [...iterations].reverse();
+
+  return (
+    <div className="space-y-4">
+      {/* Controls */}
+      <div className="flex items-center gap-2">
+        {isActive && (
+          <Button size="sm" variant="outline" onClick={handlePause} disabled={pausing}>
+            <Pause className="h-3 w-3 mr-1" />
+            {pausing ? "Pausing..." : "Pause"}
+          </Button>
+        )}
+        {(isPaused || isDraft) && (
+          <Button size="sm" onClick={handleResume} disabled={resuming}>
+            <Play className="h-3 w-3 mr-1" />
+            {resuming ? "Resuming..." : isPaused ? "Resume" : "Execute"}
+          </Button>
+        )}
+      </div>
+
+      {/* Progress */}
+      <div className="space-y-1.5">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-muted-foreground">Progress</span>
+          <span className="font-mono text-xs">
+            {currentIteration} / {maxIterations} iterations ({progressPercent}%)
+          </span>
+        </div>
+        <div className="h-2 rounded-full bg-muted overflow-hidden">
+          <div
+            className="h-full rounded-full bg-primary transition-all duration-300"
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+        {timeDisplay}
+      </div>
+
+      {/* Stop reason */}
+      {loopState?.stopReason && (
+        <Badge variant={stopReasonVariant[loopState.stopReason]}>
+          {stopReasonLabels[loopState.stopReason]}
+        </Badge>
+      )}
+
+      {/* Total duration */}
+      {loopState?.totalDurationMs && (
+        <p className="text-xs text-muted-foreground">
+          Total duration: {formatDuration(loopState.totalDurationMs)}
+        </p>
+      )}
+
+      {/* Iteration timeline */}
+      {reversedIterations.length > 0 && (
+        <div className="space-y-2">
+          <p className="text-sm font-medium">Iterations</p>
+          <div className="space-y-1" aria-live="polite">
+            {reversedIterations.map((iter) => {
+              const isExpanded = expandedIterations.has(iter.iteration);
+              return (
+                <div key={iter.iteration} className="border rounded-lg">
+                  <button
+                    type="button"
+                    className="w-full flex items-center gap-3 p-2.5 text-left hover:bg-muted/50 transition-colors rounded-lg"
+                    onClick={() => toggleIteration(iter.iteration)}
+                  >
+                    <div className="flex-shrink-0">
+                      {iterationStatusIcons[iter.status] ?? iterationStatusIcons.pending}
+                    </div>
+                    <div className="flex-1 min-w-0 flex items-center gap-2">
+                      <span className="text-sm font-medium">
+                        Iteration {iter.iteration}
+                      </span>
+                      {iter.durationMs && (
+                        <Badge variant="outline" className="text-xs font-mono">
+                          {formatDuration(iter.durationMs)}
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="flex-shrink-0">
+                      {isExpanded ? (
+                        <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                      ) : (
+                        <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                      )}
+                    </div>
+                  </button>
+
+                  {isExpanded && (
+                    <div className="px-2.5 pb-2.5 pt-0 space-y-1.5">
+                      {iter.error && (
+                        <p className="text-xs text-destructive">{iter.error}</p>
+                      )}
+                      {iter.result && (
+                        <p className="text-xs text-muted-foreground whitespace-pre-wrap line-clamp-6">
+                          {iter.result.slice(0, 1000)}
+                          {iter.result.length > 1000 ? "..." : ""}
+                        </p>
+                      )}
+                      {iter.taskId && (
+                        <a
+                          href={`/monitor?taskId=${iter.taskId}`}
+                          className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+                        >
+                          <ExternalLink className="h-3 w-3" />
+                          View task logs
+                        </a>
+                      )}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const seconds = Math.floor(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  if (minutes < 60) return `${minutes}m ${remainingSeconds}s`;
+  const hours = Math.floor(minutes / 60);
+  const remainingMinutes = minutes % 60;
+  return `${hours}h ${remainingMinutes}m`;
+}