stagent 0.9.6 → 0.11.0

package/src/components/workflows/shared/workflow-header.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Play,
+  Pencil,
+  Copy,
+  RotateCcw,
+  Trash2,
+  FolderKanban,
+} from "lucide-react";
+import { workflowStatusVariant, patternLabels } from "@/lib/constants/status-colors";
+import { IconCircle, getWorkflowIconFromName } from "@/lib/constants/card-icons";
+import type { WorkflowStatusResponse } from "@/lib/workflows/types";
+
+/**
+ * Pattern-agnostic header card for the workflow detail page. Renders the
+ * workflow name, pattern label, project/run badges, status badge, and the
+ * action buttons (Execute, Edit, Clone, Re-run, Delete). Each subview passes
+ * callbacks and the narrowed-arm `data` object.
+ *
+ * This component is deliberately read-only with respect to polling state —
+ * subviews own their own `executing` state so the Execute button can show
+ * the "Starting..." label without a round-trip through the router.
+ */
+export function WorkflowHeader({
+  data,
+  executing,
+  canExecute,
+  onExecute,
+  onRerun,
+  onDelete,
+}: {
+  data: WorkflowStatusResponse;
+  executing: boolean;
+  /** Subviews decide when Execute makes sense (e.g. loop workflows hide it in favour of the loop's own start/pause controls). */
+  canExecute: boolean;
+  onExecute: () => void;
+  onRerun: () => void;
+  onDelete: () => void;
+}) {
+  const router = useRouter();
+  const hasDefinition = !!data.definition;
+
+  return (
+    <CardHeader>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <IconCircle
+            icon={getWorkflowIconFromName(data.name, data.pattern).icon}
+            colors={getWorkflowIconFromName(data.name, data.pattern).colors}
+          />
+          <div>
+            <CardTitle>{data.name}</CardTitle>
+            <p className="text-sm text-muted-foreground mt-1">
+              {patternLabels[data.pattern] ?? data.pattern}
+            </p>
+            <div className="flex items-center gap-2 mt-1">
+              {data.projectId && (
+                <Badge
+                  variant="outline"
+                  className="text-xs cursor-pointer hover:bg-accent gap-1"
+                  onClick={() => router.push(`/projects/${data.projectId}`)}
+                >
+                  <FolderKanban className="h-3 w-3" />
+                  Project
+                </Badge>
+              )}
+              {data.runNumber != null && data.runNumber > 0 && (
+                <Badge variant="outline" className="text-xs font-normal">
+                  Run #{data.runNumber}
+                </Badge>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant={workflowStatusVariant[data.status] ?? "secondary"}>
+            {data.status}
+          </Badge>
+
+          {canExecute && (data.status === "draft" || data.status === "paused") && (
+            <Button size="sm" onClick={onExecute} disabled={executing}>
+              <Play className="h-3 w-3 mr-1" />
+              {executing ? "Starting..." : "Execute"}
+            </Button>
+          )}
+
+          {["draft", "completed", "failed"].includes(data.status) && hasDefinition && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => router.push(`/workflows/${data.id}/edit`)}
+            >
+              <Pencil className="h-3.5 w-3.5 mr-1.5" />
+              Edit
+            </Button>
+          )}
+
+          {hasDefinition && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => router.push(`/workflows/${data.id}/edit?clone=true`)}
+            >
+              <Copy className="h-3.5 w-3.5 mr-1.5" />
+              Clone
+            </Button>
+          )}
+
+          {(data.status === "completed" || data.status === "failed") && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onRerun}
+              disabled={executing}
+            >
+              <RotateCcw className="h-3.5 w-3.5 mr-1.5" />
+              Re-run
+            </Button>
+          )}
+
+          {data.status !== "active" && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-destructive hover:text-destructive"
+              onClick={onDelete}
+            >
+              <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+              Delete
+            </Button>
+          )}
+        </div>
+      </div>
+    </CardHeader>
+  );
+}

package/src/components/workflows/shared/workflow-loading-skeleton.tsx

@@ -0,0 +1,36 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+/**
+ * Loading state shown by the workflow detail router while the first poll
+ * tick is in flight. Extracted from the router so the router itself stays
+ * within its ≤80-line budget per TDR-031.
+ */
+export function WorkflowLoadingSkeleton() {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <Skeleton className="h-6 w-48 mb-2" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+          <Skeleton className="h-6 w-16 rounded-full" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="flex items-start gap-3">
+              <Skeleton className="h-4 w-4 rounded-full mt-0.5" />
+              <div className="flex-1">
+                <Skeleton className="h-4 w-32 mb-1" />
+                <Skeleton className="h-3 w-full" />
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/workflows/swarm-dashboard.tsx

@@ -5,21 +5,8 @@ import { Brain, GitBranch, MessageSquareMore, RotateCcw } from "lucide-react";
 import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { ExpandableResult } from "./workflow-status-view";
-import type { SwarmConfig } from "@/lib/workflows/types";
-
-interface StepWithState {
-  id: string;
-  name: string;
-  prompt: string;
-  state: {
-    stepId: string;
-    status: string;
-    taskId?: string;
-    result?: string;
-    error?: string;
-  };
-}
+import { ExpandableResult } from "./shared/step-result";
+import type { StepWithState, SwarmConfig } from "@/lib/workflows/types";
 
 interface SwarmDashboardProps {
   workflowId: string;

package/src/components/workflows/views/loop-pattern-view.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { useCallback, useMemo, useState } from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { toast } from "sonner";
+import { LoopStatusView } from "../loop-status-view";
+import { WorkflowFullOutput } from "../workflow-full-output";
+import { WorkflowHeader } from "../shared/workflow-header";
+import type {
+  WorkflowStatusResponse,
+} from "@/lib/workflows/types";
+
+/**
+ * Loop workflow subview. Consumes the `pattern: "loop"` arm of the status
+ * API discriminated union. Delegates iteration rendering to the existing
+ * LoopStatusView component; adds the loop-prompt display and the Full Output
+ * sheet (which reads from `loopState.iterations[].result` rather than from
+ * `steps[].state.result` — the latter doesn't exist on the loop arm).
+ *
+ * Per TDR-031: this is the only place in the view layer that is allowed to
+ * read `data.loopState`, because it is the only place narrowed to the loop
+ * arm.
+ *
+ * The Full Output sheet fix is the spec's headline behavior change: before
+ * this refactor, `completedStepOutputs` was computed in the god component
+ * BEFORE the pattern dispatch, so loop workflows either crashed (pre-PR #6)
+ * or got an empty array (post-PR #6). Now the loop subview reads iterations
+ * directly, so a completed table enrichment workflow actually shows its
+ * per-iteration outputs.
+ */
+export function LoopPatternView({
+  data,
+  onRefresh,
+  onRequestDelete,
+}: {
+  data: Extract<WorkflowStatusResponse, { pattern: "loop" }>;
+  onRefresh: () => Promise<void>;
+  onRequestDelete: () => void;
+}) {
+  const [executing, setExecuting] = useState(false);
+
+  const handleExecute = useCallback(async () => {
+    setExecuting(true);
+    try {
+      const res = await fetch(`/api/workflows/${data.id}/execute`, { method: "POST" });
+      if (res.ok) {
+        toast.success("Workflow started");
+        await onRefresh();
+      } else {
+        const err = await res.json().catch(() => null);
+        toast.error(err?.error ?? "Failed to start workflow");
+      }
+    } finally {
+      setExecuting(false);
+    }
+  }, [data.id, onRefresh]);
+
+  const handleRerun = useCallback(async () => {
+    setExecuting(true);
+    try {
+      const res = await fetch(`/api/workflows/${data.id}/execute`, { method: "POST" });
+      if (res.ok) {
+        toast.success("Workflow re-started");
+        await onRefresh();
+      } else {
+        const err = await res.json().catch(() => null);
+        toast.error(err?.error ?? "Failed to re-run workflow");
+      }
+    } finally {
+      setExecuting(false);
+    }
+  }, [data.id, onRefresh]);
+
+  // Loop workflows expose their completed outputs as `loopState.iterations[]`
+  // rather than `steps[].state`. Map each completed iteration to the shape
+  // `WorkflowFullOutput` expects. This is the bug fix — previously the Full
+  // Output sheet was silently empty for every table enrichment run because
+  // the old god component only read from `steps[].state` (which doesn't
+  // exist on loop responses).
+  const completedIterationOutputs = useMemo(() => {
+    const iterations = data.loopState?.iterations ?? [];
+    return iterations
+      .filter((iter) => iter.status === "completed" && iter.result && iter.result.trim() !== "")
+      .map((iter) => ({
+        name: `Iteration ${iter.iteration}`,
+        result: iter.result!,
+      }));
+  }, [data.loopState]);
+
+  const loopPromptText = data.steps[0]?.prompt;
+  const showFullOutput =
+    data.status === "completed" && completedIterationOutputs.length > 0;
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <WorkflowHeader
+          data={data}
+          executing={executing}
+          // Loop workflows have their own start/pause controls inside
+          // LoopStatusView — the header's Execute button would be redundant
+          // and confusing.
+          canExecute={false}
+          onExecute={handleExecute}
+          onRerun={handleRerun}
+          onDelete={onRequestDelete}
+        />
+        <CardContent>
+          {loopPromptText && (
+            <div className="mb-4">
+              <p className="text-xs font-medium text-muted-foreground mb-1.5">Loop Prompt</p>
+              <div className="rounded-md border bg-muted/50 p-3">
+                <p className="text-sm whitespace-pre-wrap">{loopPromptText}</p>
+              </div>
+            </div>
+          )}
+          {data.loopConfig && (
+            <LoopStatusView
+              workflowId={data.id}
+              workflowStatus={data.status}
+              loopConfig={data.loopConfig}
+              loopState={data.loopState ?? null}
+              onRefresh={() => void onRefresh()}
+            />
+          )}
+        </CardContent>
+      </Card>
+
+      {showFullOutput && (
+        <WorkflowFullOutput
+          workflowName={data.name}
+          steps={completedIterationOutputs}
+        />
+      )}
+    </div>
+  );
+}