stagent 0.1.7 → 0.1.10

package/src/components/workflows/workflow-confirmation-view.tsx

@@ -0,0 +1,447 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  ArrowUp,
+  ArrowDown,
+  Star,
+  Trash2,
+  Loader2,
+  GitBranch,
+  ListOrdered,
+  Settings,
+} from "lucide-react";
+import { toast } from "sonner";
+import { FormSectionCard } from "@/components/shared/form-section-card";
+import type { TaskAssistResponse } from "@/lib/agents/runtime/task-assist-types";
+import type { WorkflowPattern } from "@/lib/workflows/types";
+import { suggestProfileForStep } from "@/lib/agents/profiles/suggest";
+import {
+  loadAssistState,
+  clearAssistState,
+  saveTaskFormState,
+} from "@/lib/workflows/assist-session";
+
+const PATTERN_OPTIONS: { value: WorkflowPattern; label: string; description: string }[] = [
+  { value: "sequence", label: "Sequence", description: "Steps run one after another" },
+  { value: "planner-executor", label: "Planner → Executor", description: "First step plans, rest execute" },
+  { value: "checkpoint", label: "Checkpoint", description: "Steps pause for human approval" },
+  { value: "parallel", label: "Parallel", description: "Independent steps run concurrently" },
+  { value: "loop", label: "Loop", description: "Single step repeats iteratively" },
+  { value: "swarm", label: "Swarm", description: "Mayor coordinates workers" },
+];
+
+interface StepItem {
+  title: string;
+  description: string;
+  profile: string;
+  requiresApproval?: boolean;
+}
+
+interface ProfileOption {
+  id: string;
+  name: string;
+}
+
+interface WorkflowConfirmationViewProps {
+  projects: { id: string; name: string }[];
+  profiles: ProfileOption[];
+}
+
+export function WorkflowConfirmationView({
+  projects,
+  profiles,
+}: WorkflowConfirmationViewProps) {
+  const router = useRouter();
+  const [workflowName, setWorkflowName] = useState("");
+  const [pattern, setPattern] = useState<WorkflowPattern>("sequence");
+  const [selectedProjectId, setSelectedProjectId] = useState("");
+  const [steps, setSteps] = useState<StepItem[]>([]);
+  const [maxIterations, setMaxIterations] = useState(5);
+  const [workerConcurrencyLimit, setWorkerConcurrencyLimit] = useState(2);
+  const [submitting, setSubmitting] = useState(false);
+  const [priority, setPriority] = useState(2);
+  const [assignedAgent, setAssignedAgent] = useState<string | undefined>();
+  const [loaded, setLoaded] = useState(false);
+
+  // Load state from sessionStorage on mount
+  useEffect(() => {
+    const state = loadAssistState();
+    if (!state) {
+      router.replace("/tasks/new");
+      return;
+    }
+
+    const { assistResult, formState } = state;
+    const recommended = assistResult.recommendedPattern;
+    const validPattern = recommended === "single" ? "sequence" : (recommended as WorkflowPattern);
+
+    setPattern(validPattern);
+    setWorkflowName(`Workflow: ${formState.title}`);
+    setSelectedProjectId(formState.projectId);
+    setPriority(parseInt(formState.priority, 10) || 2);
+    setAssignedAgent(formState.assignedAgent || undefined);
+    setMaxIterations(assistResult.suggestedLoopConfig?.maxIterations ?? 5);
+    setWorkerConcurrencyLimit(assistResult.suggestedSwarmConfig?.workerConcurrencyLimit ?? 2);
+
+    const profileIds = profiles.map((p) => p.id);
+
+    const newSteps: StepItem[] = [
+      {
+        title: formState.title,
+        description: formState.description,
+        profile: formState.agentProfile || "auto",
+      },
+      ...assistResult.breakdown.map((sub) => ({
+        title: sub.title,
+        description: sub.description,
+        profile: sub.suggestedProfile || suggestProfileForStep(sub.title, sub.description, profileIds),
+        requiresApproval: sub.requiresApproval,
+      })),
+    ];
+
+    setSteps(newSteps);
+    setLoaded(true);
+  }, [router, profiles]);
+
+  function navigateBackToTask() {
+    // Save form state so task form can restore
+    const state = loadAssistState();
+    if (state) {
+      saveTaskFormState(state.formState);
+    }
+    clearAssistState();
+    router.push("/tasks/new?restore=1");
+  }
+
+  function moveStep(index: number, direction: -1 | 1) {
+    if (index === 0) return;
+    const newIndex = index + direction;
+    if (newIndex < 1 || newIndex >= steps.length) return;
+    const newSteps = [...steps];
+    [newSteps[index], newSteps[newIndex]] = [newSteps[newIndex], newSteps[index]];
+    setSteps(newSteps);
+  }
+
+  function removeStep(index: number) {
+    if (index === 0 || steps.length <= 2) return;
+    setSteps(steps.filter((_, i) => i !== index));
+  }
+
+  function updateStepProfile(index: number, profile: string) {
+    const newSteps = [...steps];
+    newSteps[index] = { ...newSteps[index], profile };
+    setSteps(newSteps);
+  }
+
+  async function handleSubmit(executeImmediately: boolean) {
+    if (!workflowName.trim() || steps.length < 2) return;
+    setSubmitting(true);
+
+    try {
+      const definitionSteps = steps.map((step, i) => ({
+        id: `step_${i + 1}`,
+        name: step.title,
+        prompt: step.description,
+        agentProfile: step.profile === "auto" ? undefined : step.profile,
+        requiresApproval: pattern === "checkpoint" ? step.requiresApproval : undefined,
+        ...(pattern === "parallel" && i === steps.length - 1
+          ? { dependsOn: steps.slice(0, -1).map((_, j) => `step_${j + 1}`) }
+          : {}),
+      }));
+
+      const definition: Record<string, unknown> = {
+        pattern,
+        steps: definitionSteps,
+      };
+
+      if (pattern === "loop") {
+        definition.loopConfig = {
+          maxIterations,
+          agentProfile: steps[0]?.profile === "auto" ? undefined : steps[0]?.profile,
+        };
+      }
+
+      if (pattern === "swarm") {
+        definition.swarmConfig = { workerConcurrencyLimit };
+      }
+
+      const res = await fetch("/api/workflows/from-assist", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: workflowName.trim(),
+          projectId: selectedProjectId || undefined,
+          definition,
+          priority,
+          assignedAgent: assignedAgent || undefined,
+          executeImmediately,
+          parentTask: {
+            title: steps[0].title,
+            description: steps[0].description,
+            agentProfile: steps[0].profile === "auto" ? undefined : steps[0].profile,
+          },
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => null);
+        toast.error(data?.error ?? "Failed to create workflow");
+        return;
+      }
+
+      const data = await res.json();
+      toast.success(
+        executeImmediately
+          ? `Task created with workflow (${data.taskIds.length} steps)`
+          : `Task created with draft workflow (${data.taskIds.length} steps)`,
+        {
+          action: {
+            label: "View workflow",
+            onClick: () => window.open(`/workflows/${data.workflow.id}`, "_self"),
+          },
+        }
+      );
+      clearAssistState();
+      router.push("/dashboard");
+    } catch {
+      toast.error("Network error — could not create workflow");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const isReorderDisabled = pattern === "parallel";
+
+  if (!loaded) {
+    return (
+      <div className="flex items-center justify-center py-12 text-muted-foreground">
+        <Loader2 className="h-5 w-5 animate-spin mr-2" />
+        Loading workflow data...
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Create Workflow from AI Assist</h1>
+        <p className="text-sm text-muted-foreground mt-1">
+          Review and customize the AI-suggested workflow before creating it.
+        </p>
+      </div>
+
+      {/* Workflow Identity */}
+      <FormSectionCard icon={GitBranch} title="Workflow Identity">
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label htmlFor="workflow-name">Name</Label>
+            <Input
+              id="workflow-name"
+              value={workflowName}
+              onChange={(e) => setWorkflowName(e.target.value)}
+              placeholder="Workflow name"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label>Pattern</Label>
+              <Select value={pattern} onValueChange={(v) => setPattern(v as WorkflowPattern)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {PATTERN_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                {PATTERN_OPTIONS.find((o) => o.value === pattern)?.description}
+              </p>
+            </div>
+            <div className="space-y-1.5">
+              <Label>Project</Label>
+              <Select
+                value={selectedProjectId || "none"}
+                onValueChange={(v) => setSelectedProjectId(v === "none" ? "" : v)}
+              >
+                <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>
+            </div>
+          </div>
+        </div>
+      </FormSectionCard>
+
+      {/* Steps */}
+      <FormSectionCard icon={ListOrdered} title={`Steps (${steps.length})`}>
+        <div className="space-y-2">
+          {steps.map((step, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-2 p-2.5 rounded-md border bg-card text-sm"
+            >
+              <span className="text-xs text-muted-foreground w-5 shrink-0">
+                {i + 1}.
+              </span>
+              {i === 0 && (
+                <Badge variant="outline" className="text-xs shrink-0 px-1">
+                  <Star className="h-2.5 w-2.5" />
+                </Badge>
+              )}
+              <div className="flex-1 min-w-0">
+                <span className="font-medium block truncate">{step.title}</span>
+                {step.description && (
+                  <span className="text-xs text-muted-foreground block truncate">
+                    {step.description}
+                  </span>
+                )}
+              </div>
+
+              {/* Profile selector */}
+              <Select
+                value={step.profile}
+                onValueChange={(v) => updateStepProfile(i, v)}
+              >
+                <SelectTrigger className="w-32 h-7 text-xs shrink-0">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="auto">Auto</SelectItem>
+                  {profiles.map((p) => (
+                    <SelectItem key={p.id} value={p.id}>
+                      {p.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              {/* Reorder buttons */}
+              {!isReorderDisabled && (
+                <div className="flex flex-col gap-0.5">
+                  <button
+                    type="button"
+                    onClick={() => moveStep(i, -1)}
+                    disabled={i <= 1}
+                    className="p-0.5 rounded hover:bg-muted disabled:opacity-30"
+                    aria-label="Move step up"
+                  >
+                    <ArrowUp className="h-3 w-3" />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => moveStep(i, 1)}
+                    disabled={i === 0 || i === steps.length - 1}
+                    className="p-0.5 rounded hover:bg-muted disabled:opacity-30"
+                    aria-label="Move step down"
+                  >
+                    <ArrowDown className="h-3 w-3" />
+                  </button>
+                </div>
+              )}
+
+              {/* Remove button */}
+              {i > 0 && steps.length > 2 && (
+                <button
+                  type="button"
+                  onClick={() => removeStep(i)}
+                  className="p-0.5 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive"
+                  aria-label={`Remove step ${step.title}`}
+                >
+                  <Trash2 className="h-3 w-3" />
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      </FormSectionCard>
+
+      {/* Pattern-specific config */}
+      {(pattern === "loop" || pattern === "swarm") && (
+        <FormSectionCard icon={Settings} title="Configuration">
+          {pattern === "loop" && (
+            <div className="space-y-1.5">
+              <Label htmlFor="max-iterations">Max Iterations</Label>
+              <Input
+                id="max-iterations"
+                type="number"
+                min={1}
+                max={50}
+                value={maxIterations}
+                onChange={(e) => setMaxIterations(parseInt(e.target.value, 10) || 5)}
+                className="w-32"
+              />
+            </div>
+          )}
+          {pattern === "swarm" && (
+            <div className="space-y-1.5">
+              <Label htmlFor="concurrency-limit">Worker Concurrency Limit</Label>
+              <Input
+                id="concurrency-limit"
+                type="number"
+                min={1}
+                max={5}
+                value={workerConcurrencyLimit}
+                onChange={(e) => setWorkerConcurrencyLimit(parseInt(e.target.value, 10) || 2)}
+                className="w-32"
+              />
+            </div>
+          )}
+          <div className="flex items-center gap-2 text-xs text-muted-foreground opacity-50 mt-2">
+            <input type="checkbox" disabled />
+            <span>Save as Blueprint (coming soon)</span>
+          </div>
+        </FormSectionCard>
+      )}
+
+      {/* Action bar */}
+      <div className="flex justify-end gap-2 pt-2">
+        <Button
+          variant="ghost"
+          onClick={navigateBackToTask}
+          disabled={submitting}
+        >
+          Dismiss
+        </Button>
+        <Button
+          variant="outline"
+          onClick={() => handleSubmit(false)}
+          disabled={submitting || !workflowName.trim() || steps.length < 2}
+        >
+          {submitting ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : null}
+          Accept
+        </Button>
+        <Button
+          onClick={() => handleSubmit(true)}
+          disabled={submitting || !workflowName.trim() || steps.length < 2}
+        >
+          {submitting ? <Loader2 className="h-3 w-3 mr-1 animate-spin" /> : null}
+          Accept & Run
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/hooks/__tests__/use-persisted-state.test.ts

@@ -0,0 +1,57 @@
+import { renderHook, act } from "@testing-library/react";
+import { usePersistedState } from "@/hooks/use-persisted-state";
+
+describe("usePersistedState", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("returns default value when localStorage is empty", () => {
+    const { result } = renderHook(() => usePersistedState("test-key", "default"));
+    expect(result.current[0]).toBe("default");
+  });
+
+  it("reads stored value from localStorage on mount", () => {
+    localStorage.setItem("test-key", "stored-value");
+    const { result } = renderHook(() => usePersistedState("test-key", "default"));
+    // After effect runs, value should be the stored one
+    expect(result.current[0]).toBe("stored-value");
+  });
+
+  it("writes to localStorage when setter is called", () => {
+    const { result } = renderHook(() => usePersistedState("test-key", "default"));
+
+    act(() => {
+      result.current[1]("new-value");
+    });
+
+    expect(result.current[0]).toBe("new-value");
+    expect(localStorage.getItem("test-key")).toBe("new-value");
+  });
+
+  it("handles localStorage errors gracefully", () => {
+    const origGetItem = Storage.prototype.getItem;
+    Storage.prototype.getItem = () => {
+      throw new Error("Quota exceeded");
+    };
+
+    const { result } = renderHook(() => usePersistedState("test-key", "fallback"));
+    expect(result.current[0]).toBe("fallback");
+
+    Storage.prototype.getItem = origGetItem;
+  });
+
+  it("maintains independent values for different keys", () => {
+    const { result: hookA } = renderHook(() => usePersistedState("key-a", "a-default"));
+    const { result: hookB } = renderHook(() => usePersistedState("key-b", "b-default"));
+
+    act(() => {
+      hookA.current[1]("a-updated");
+    });
+
+    expect(hookA.current[0]).toBe("a-updated");
+    expect(hookB.current[0]).toBe("b-default");
+    expect(localStorage.getItem("key-a")).toBe("a-updated");
+    expect(localStorage.getItem("key-b")).toBeNull();
+  });
+});

package/src/hooks/use-persisted-state.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+/**
+ * useState wrapper that persists to localStorage.
+ * Reads from storage in useEffect to avoid SSR hydration mismatch.
+ */
+export function usePersistedState<T extends string>(
+  key: string,
+  defaultValue: T
+): [T, (value: T) => void] {
+  const [value, setValue] = useState<T>(defaultValue);
+
+  // Restore from localStorage on mount (client-only)
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(key);
+      if (stored !== null) {
+        setValue(stored as T);
+      }
+    } catch {
+      // localStorage unavailable (e.g. private browsing)
+    }
+  }, [key]);
+
+  const setPersisted = useCallback(
+    (next: T) => {
+      setValue(next);
+      try {
+        localStorage.setItem(key, next);
+      } catch {
+        // localStorage unavailable
+      }
+    },
+    [key]
+  );
+
+  return [value, setPersisted];
+}

package/src/lib/agents/claude-agent.ts

@@ -1,4 +1,5 @@
 import { query } from "@anthropic-ai/claude-agent-sdk";
+import { z } from "zod";
 import { db } from "@/lib/db";
 import { tasks, projects, agentLogs, notifications } from "@/lib/db/schema";
 import { eq } from "drizzle-orm";
@@ -49,11 +50,13 @@ interface TaskUsageState extends UsageSnapshot {
   scheduleId?: string | null;
 }
 
-interface ToolPermissionResponse {
-  behavior: "allow" | "deny";
-  updatedInput?: unknown;
-  message?: string;
-}
+const toolPermissionResponseSchema = z.object({
+  behavior: z.enum(["allow", "deny"]),
+  updatedInput: z.unknown().optional(),
+  message: z.string().optional(),
+});
+
+type ToolPermissionResponse = z.infer<typeof toolPermissionResponseSchema>;
 
 const inFlightPermissionRequests = new Map<
   string,
@@ -149,8 +152,15 @@ async function waitForToolPermissionResponse(
 
     if (notification?.response) {
       try {
-        return JSON.parse(notification.response) as ToolPermissionResponse;
-      } catch {
+        const parsed = JSON.parse(notification.response);
+        const validated = toolPermissionResponseSchema.safeParse(parsed);
+        if (validated.success) {
+          return validated.data;
+        }
+        console.error("[claude-agent] Invalid permission response shape:", validated.error.message);
+        return { behavior: "deny", message: "Invalid response format" };
+      } catch (err) {
+        console.error("[claude-agent] Failed to parse permission response:", err);
         return { behavior: "deny", message: "Invalid response format" };
       }
     }

package/src/lib/agents/profiles/__tests__/suggest.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import { suggestProfileForStep } from "../suggest";
+
+const ALL_PROFILES = [
+  "general",
+  "researcher",
+  "code-reviewer",
+  "document-writer",
+  "devops-engineer",
+  "data-analyst",
+];
+
+describe("suggestProfileForStep", () => {
+  it("suggests researcher for research-related tasks", () => {
+    expect(
+      suggestProfileForStep("Research API patterns", "Investigate best practices", ALL_PROFILES)
+    ).toBe("researcher");
+  });
+
+  it("suggests code-reviewer for review tasks", () => {
+    expect(
+      suggestProfileForStep("Security audit", "Review code for vulnerabilities", ALL_PROFILES)
+    ).toBe("code-reviewer");
+  });
+
+  it("suggests document-writer for writing tasks", () => {
+    expect(
+      suggestProfileForStep("Write documentation", "Document the API endpoints", ALL_PROFILES)
+    ).toBe("document-writer");
+  });
+
+  it("suggests devops-engineer for deployment tasks", () => {
+    expect(
+      suggestProfileForStep("Deploy to production", "Set up CI pipeline and infrastructure", ALL_PROFILES)
+    ).toBe("devops-engineer");
+  });
+
+  it("suggests data-analyst for data tasks", () => {
+    expect(
+      suggestProfileForStep("Analyze metrics", "Aggregate data and create statistics", ALL_PROFILES)
+    ).toBe("data-analyst");
+  });
+
+  it('returns "auto" when no keywords match', () => {
+    expect(
+      suggestProfileForStep("Fix the thing", "Make it work", ALL_PROFILES)
+    ).toBe("auto");
+  });
+
+  it("only suggests from available profiles", () => {
+    expect(
+      suggestProfileForStep("Research API patterns", "Investigate", ["general"])
+    ).toBe("auto");
+  });
+
+  it("picks highest-scoring profile when multiple match", () => {
+    // "review" + "security" + "vulnerability" = 3 hits for code-reviewer
+    // "investigate" = 1 hit for researcher
+    expect(
+      suggestProfileForStep(
+        "Security review",
+        "Investigate vulnerability audit",
+        ALL_PROFILES
+      )
+    ).toBe("code-reviewer");
+  });
+});

package/src/lib/agents/profiles/suggest.ts

@@ -0,0 +1,36 @@
+/**
+ * Lightweight keyword-based profile suggestion.
+ * Used as fallback when AI doesn't suggest a profile for a step.
+ */
+
+const KEYWORD_MAP: Record<string, string[]> = {
+  researcher: ["research", "search", "investigate", "explore", "find", "discover", "analyze data", "survey"],
+  "code-reviewer": ["review", "audit", "security", "vulnerability", "lint", "inspect", "code quality"],
+  "document-writer": ["write", "document", "report", "summarize", "draft", "compose", "blog", "article"],
+  "devops-engineer": ["deploy", "ci", "infrastructure", "pipeline", "docker", "kubernetes", "terraform", "monitor"],
+  "data-analyst": ["analyze", "data", "statistics", "metrics", "chart", "visualization", "dashboard", "aggregate"],
+};
+
+export function suggestProfileForStep(
+  title: string,
+  description: string,
+  availableProfileIds: string[]
+): string {
+  const text = `${title} ${description}`.toLowerCase();
+  let bestProfile = "auto";
+  let bestScore = 0;
+
+  for (const [profileId, keywords] of Object.entries(KEYWORD_MAP)) {
+    if (!availableProfileIds.includes(profileId)) continue;
+    let score = 0;
+    for (const keyword of keywords) {
+      if (text.includes(keyword)) score++;
+    }
+    if (score > bestScore) {
+      bestScore = score;
+      bestProfile = profileId;
+    }
+  }
+
+  return bestScore >= 1 ? bestProfile : "auto";
+}